/* Source: pub/LawPass/index.html — shared layout styles. */
/* #region [COMMON] 공통 변수 / 기본 스타일 */

:root {
    --lp-primary-50:  #E5F6FF;
    --lp-primary-100: #CFEFFF;
    --lp-primary-200: #A9DEFF;
    --lp-primary-300: #77C6FF;
    --lp-primary-400: #429BFF;
    --lp-primary-500: #1770FF;
    --lp-primary-600: #0059FF;
    --lp-primary-700: #004EED;
    --lp-primary-800: #0138AD;
    --lp-primary-900: #002D8A;
    --lp-primary-950: #011546;

    --lp-gray-30:  #F4F6FB;
    --lp-gray-50:  #EAEEF7;
    --lp-gray-100: #D6DCE8;
    --lp-gray-200: #CAD0DC;
    --lp-gray-300: #B8C1D1;
    --lp-gray-400: #A1AABA;
    --lp-gray-500: #8A93A3;
    --lp-gray-600: #737C8C;
    --lp-gray-700: #5C6575;
    --lp-gray-800: #454E5E;
    --lp-gray-900: #2E3747;
    --lp-gray-950: #172030;

    --lp-white: #FFFFFF;
    --lp-black: #0C1019;

    /* ---- [SEMANTIC] 용도별 매핑 ---- */
    --lp-primary:      var(--lp-primary-600);
    --lp-primary-dark: var(--lp-primary-800);
    --lp-accent:       var(--lp-primary-500);

    --lp-text:      var(--lp-gray-700);
    --lp-text-sub:  var(--lp-gray-600);
    --lp-line:      var(--lp-gray-200);
    --lp-bg:        var(--lp-white);
    --lp-bg-soft:   var(--lp-gray-30);

    --lp-radius: 14px;
    --lp-gnb-height: 60px;
    --lp-layout-padding-x: clamp(min(160px, 50vw - 560px), 50vw - 650px, 310px);
}
/* #endregion */

/* #region [TYPOGRAPHY] 로패스 타이포 스타일 — 모듈 단위로 분리 가능 (시작) */
:root {
    --t-regular: 400;
    --t-medium: 500;
    --t-semibold: 600;
    --t-line: 150%;

    --t-60: 60px;   --t-60-ls: 0;   --t-60-ls-noto: -1.2px;
    --t-44: 44px;   --t-44-ls: 0;   --t-44-ls-noto: -0.88px;
    --t-40: 40px;   --t-40-ls: 0;   --t-40-ls-noto: -0.8px;
    --t-36: 36px;   --t-36-ls: 0;   --t-36-ls-noto: -0.72px;
    --t-32: 32px;   --t-32-ls: 0;   --t-32-ls-noto: -0.64px;
    --t-24: 24px;   --t-24-ls: 0;   --t-24-ls-noto: -0.48px;
    --t-22: 22px;   --t-22-ls: 0;   --t-22-ls-noto: -0.44px;
    --t-19: 19px;   --t-19-ls: 0;   --t-19-ls-noto: -0.38px;
    --t-17: 17px;   --t-17-ls: 0;   --t-17-ls-noto: -0.34px;
    --t-15: 15px;   --t-15-ls: 0;   --t-15-ls-noto: -0.3px;
    --t-13: 13px;   --t-13-ls: 0;   --t-13-ls-noto: -0.26px;

    --t-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
              system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo',
              'Noto Sans KR', 'Malgun Gothic', sans-serif;
    --t-font-hero: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}

.t-display-60-regular,  .t-display-60-semibold,
.t-display-44-regular,  .t-display-44-semibold,
.t-display-36-regular,  .t-display-36-semibold,
.t-heading-40-regular,  .t-heading-40-semibold,
.t-heading-32-regular,  .t-heading-32-semibold,
.t-heading-24-regular,  .t-heading-24-semibold,
.t-body-19-medium,      .t-body-19-semibold,
.t-body-17-medium,      .t-body-17-semibold,
.t-body-15-medium,      .t-body-15-semibold,
.t-body-13-medium,      .t-body-13-semibold {
    font-family: var(--t-font);
    font-style: normal;
    line-height: var(--t-line);
}

.t-display-60-regular  { font-size: var(--t-60); font-weight: var(--t-regular);  letter-spacing: var(--t-60-ls); }
.t-display-60-semibold { font-size: var(--t-60); font-weight: var(--t-semibold); letter-spacing: var(--t-60-ls); }
.t-display-44-regular  { font-size: var(--t-44); font-weight: var(--t-regular);  letter-spacing: var(--t-44-ls); }
.t-display-44-semibold { font-size: var(--t-44); font-weight: var(--t-semibold); letter-spacing: var(--t-44-ls); }
.t-display-36-regular  { font-size: var(--t-36); font-weight: var(--t-regular);  letter-spacing: var(--t-36-ls); }
.t-display-36-semibold { font-size: var(--t-36); font-weight: var(--t-semibold); letter-spacing: var(--t-36-ls); }

.t-heading-40-regular  { font-size: var(--t-40); font-weight: var(--t-regular);  letter-spacing: var(--t-40-ls); }
.t-heading-40-semibold { font-size: var(--t-40); font-weight: var(--t-semibold); letter-spacing: var(--t-40-ls); }
.t-heading-32-regular  { font-size: var(--t-32); font-weight: var(--t-regular);  letter-spacing: var(--t-32-ls); }
.t-heading-32-semibold { font-size: var(--t-32); font-weight: var(--t-semibold); letter-spacing: var(--t-32-ls); }
.t-heading-24-regular  { font-size: var(--t-24); font-weight: var(--t-regular);  letter-spacing: var(--t-24-ls); }
.t-heading-24-semibold { font-size: var(--t-24); font-weight: var(--t-semibold); letter-spacing: var(--t-24-ls); }

.t-body-19-medium   { font-size: var(--t-19); font-weight: var(--t-medium);   letter-spacing: var(--t-19-ls); }
.t-body-19-semibold { font-size: var(--t-19); font-weight: var(--t-semibold); letter-spacing: var(--t-19-ls); }
.t-body-17-medium   { font-size: var(--t-17); font-weight: var(--t-medium);   letter-spacing: var(--t-17-ls); }
.t-body-17-semibold { font-size: var(--t-17); font-weight: var(--t-semibold); letter-spacing: var(--t-17-ls); }
.t-body-15-medium   { font-size: var(--t-15); font-weight: var(--t-medium);   letter-spacing: var(--t-15-ls); }
.t-body-15-semibold { font-size: var(--t-15); font-weight: var(--t-semibold); letter-spacing: var(--t-15-ls); }
.t-body-13-medium   { font-size: var(--t-13); font-weight: var(--t-medium);   letter-spacing: var(--t-13-ls); }
.t-body-13-semibold { font-size: var(--t-13); font-weight: var(--t-semibold); letter-spacing: var(--t-13-ls); }
/* #endregion */


/* #region [LAYOUT] 공통 레이아웃 · 반응형 좌우 여백 */
html { scroll-behavior: smooth; }

body.lawpass-home, .gnb, .footer {
    font-family: var(--t-font);
    color: var(--lp-text);
}

@media (max-width: 1279.98px) { :root { --lp-layout-padding-x: clamp(40px, 7.8125vw - 20px, 80px); } }

@media (max-width: 767.98px)  { :root { --lp-layout-padding-x: clamp(20px, 5.2vw, 40px); } }

.lp-section { padding: 100px 0; }
.lp-section--soft { background-color: var(--lp-bg-soft); }

@media (max-width: 767.98px) {
    .lp-section { padding: 64px 0; }
}

.lp-section-x { padding-left: var(--lp-layout-padding-x); padding-right: var(--lp-layout-padding-x); }
.lp-section-inner { width: 100%; margin: 0 auto; }

.lp-br-mo { display: inline; }
.lp-br-pc { display: none; }
@media (min-width: 768px) {
    .lp-br-mo { display: none; }
    .lp-br-pc { display: inline; }
}
/* #endregion */

/* 로그인 알림은 상단 메뉴에 가려지지 않도록 폼 안에 표시합니다. */
#alertContainer.login-alert-container {
    position: static;
}

/* #region [GNB] - CSS  ===== 여기부터 잘라내면 GNB 스타일 전체 =====
   의존 : [COMMON] --lp-* / [TYPOGRAPHY] --t-*
   이미지 : /public/img/lawpass/icons/lawpass-logo.svg
   짝  : HTML #region [GNB] / JS #region [GNB] */
.gnb {
    --gnb-height:      var(--lp-gnb-height, 60px);
    --gnb-padding-x:   var(--lp-layout-padding-x, 160px);
    --gnb-bg:          var(--lp-white, #FFFFFF);
    --gnb-border:      var(--lp-gray-50, #EAEEF7);
    --gnb-login-bg:    var(--lp-primary-600, #0059FF);
    --gnb-login-color: var(--lp-white, #FFFFFF);
    --gnb-join-bg:     var(--lp-gray-50, #EAEEF7);
    --gnb-join-color:  var(--lp-gray-700, #5C6575);

    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--gnb-bg);
    border-bottom: 1px solid var(--gnb-border);
}

@media (max-width: 1279.98px) { .gnb { --gnb-padding-x: var(--lp-layout-padding-x, 40px); } }

.gnb__inner {
    height: var(--gnb-height);
    padding: 0 var(--gnb-padding-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gnb__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.gnb__logo img {
    display: block;
    width: 126px;
    height: 32px;
}

.gnb__utils {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.gnb__btn {
    display: flex;
    width: 88px;
    padding: 6px 20px;
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;

    font-family: var(--t-font, 'Pretendard', sans-serif);
    font-style: normal;
    font-size: var(--t-13, 13px);
    font-weight: var(--t-medium, 500);
    line-height: var(--t-line, 150%);
    letter-spacing: var(--t-13-ls, 0);
}

.gnb__btn--login {
    background-color: var(--gnb-login-bg);
    color: var(--gnb-login-color);
}

.gnb__btn--join {
    background-color: var(--gnb-join-bg);
    color: var(--gnb-join-color);
}

@media (max-width: 767.98px) {
    .gnb { --gnb-padding-x: var(--lp-layout-padding-x, 20px); }
    .gnb__btn--join { display: none; }
    .gnb__btn {
        height: 32px;
        padding: 0 20px;
    }
}
/* #endregion [GNB] - CSS  ===== 여기까지 ===== */


/* #region [FOOTER] - CSS  ===== 여기부터 잘라내면 푸터 스타일 전체 =====
   의존 : [COMMON] --lp-* / [TYPOGRAPHY] --t-*
   이미지 : /public/img/lawpass/icons/lawpass-logo-white.svg
   짝  : HTML #region [FOOTER] / JS #region [FOOTER] */
.footer {
    --footer-bg:          var(--lp-black, #000000);
    --footer-padding-x:   var(--lp-layout-padding-x, 160px);
    --footer-title-color: var(--lp-white, #FFFFFF);
    --footer-text-color:  var(--lp-gray-300, #B8C1D1);
    --footer-muted-color: var(--lp-gray-500, #8A93A3);
    --footer-font:        var(--t-font, 'Pretendard', sans-serif);

    background-color: var(--footer-bg);
    color: var(--footer-text-color);
}

@media (max-width: 1279.98px) { .footer { --footer-padding-x: var(--lp-layout-padding-x, 40px); } }
@media (max-width: 767.98px)  { .footer { --footer-padding-x: var(--lp-layout-padding-x, 20px); } }

.footer__inner {
    min-height: 252px;
    padding: 40px var(--footer-padding-x);
    display: flex;
    flex-direction: column;
}

.footer__logo { display: block; }
.footer__logo img {
    display: block;
    width: 126px;
    height: 32px;
}

.footer__info {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer__brand,
.footer__address,
.footer__meta,
.footer__links,
.footer__copyright {
    margin: 0;
    font-family: var(--footer-font);
    font-style: normal;
    font-size: var(--t-13, 13px);
    line-height: var(--t-line, 150%);
    letter-spacing: var(--t-13-ls, 0);
}

.footer__brand,
.footer__meta-label {
    color: var(--footer-title-color);
    font-weight: var(--t-semibold, 600);
}

.footer__address,
.footer__meta-value {
    color: var(--footer-text-color);
    font-weight: var(--t-medium, 500);
}

.footer__meta-sep {
    color: var(--footer-title-color);
    font-weight: var(--t-medium, 500);
}

.footer__meta {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.footer__meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.footer__meta-value { white-space: nowrap; }

.footer__bottom {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
}

.footer__links {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 18px;
}
.footer__link {
    color: var(--footer-muted-color);
    font-weight: var(--t-semibold, 600);
    text-decoration: none;
    white-space: nowrap;
}
.footer__link:hover { color: var(--footer-title-color); }

.footer__copyright {
    color: var(--footer-muted-color);
    font-weight: var(--t-medium, 500);
    white-space: nowrap;
}

.footer__links-sep {
    display: none;
    color: var(--footer-muted-color);
    font-weight: var(--t-medium, 500);
}

@media (max-width: 767.98px) {
    .footer__inner {
        min-height: 0;
        padding: 40px var(--footer-padding-x);
    }

    .footer__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-top: 20px;
    }
    .footer__meta-sep { display: none; }

    .footer__meta-item--group { margin-top: 20px; }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .footer__links-sep { display: block; }
}
/* #endregion [FOOTER] - CSS  ===== 여기까지 ===== */


/* #region [TOPBTN] 탑 버튼 */
.top-btn {
    --top-btn-bottom: 50px;
    --top-btn-dock: 80px;

    position: fixed;
    right: 50px;
    bottom: var(--top-btn-bottom);
    z-index: 1020;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--lp-white, #FFFFFF);
    cursor: pointer;
}
.top-btn img {
    display: block;
    width: 22px;
    height: 24px;
}

.top-btn.is-docked {
    position: absolute;
    bottom: auto;
}

@media (max-width: 767.98px) {
    .top-btn {
        --top-btn-bottom: 40px;
        right: 20px;
        width: 44px;
        height: 44px;
    }
    .top-btn img { width: 16px; height: 18px; }
}
/* #endregion */

/* 기존 PHP 레이아웃과의 연결: 업무 본문의 스타일은 유지합니다. */
.lawpass-home-content { padding-bottom: 0; }
.footer { padding: 0; }

/* 로그인 후 PC 메뉴와 기존 Bootstrap 드롭다운을 유지합니다. */
.lawpass-navbar {
    position: sticky;
    background: var(--lp-white);
    padding: 0;
    --bs-navbar-color: var(--lp-gray-700);
    --bs-navbar-hover-color: var(--lp-primary);
}
.lawpass-navbar::before { content: none; }
.lawpass-navbar__inner {
    min-height: 60px;
    padding: 10px var(--gnb-padding-x);
    gap: 12px;
}
.lawpass-navbar .navbar-brand { margin: 0 12px 0 0; padding: 0; }
.lawpass-navbar .navbar-nav .nav-link {
    color: var(--lp-gray-700) !important;
    font-size: 13px;
    padding: 8px;
}
.lawpass-navbar .navbar-nav a.nav-link:hover,
.lawpass-navbar .navbar-nav a.nav-link:focus {
    color: var(--lp-primary) !important;
    background: var(--lp-gray-30);
}
.lawpass-navbar .dropdown-menu { font-size: 14px; }
.lawpass-navbar .lawpass-company,
.lawpass-navbar #navbarDropdown {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gnb__btn:focus-visible, .gnb__logo:focus-visible, .footer__link:focus-visible {
    outline: 2px solid var(--lp-primary-400);
    outline-offset: 4px;
}

/* 계정 정보는 업무 메뉴의 접힘 상태와 관계없이 표시합니다. */
.lawpass-account {
    flex-direction: row;
    align-items: center;
    min-width: 0;
    margin-left: auto;
}
.lawpass-account > .dropdown { min-width: 0; }
.lawpass-account .dropdown-menu { position: absolute; }
.lawpass-navbar .navbar-toggler {
    flex-shrink: 0;
    padding: 4px;
    border: 0;
    box-shadow: none;
}
.lawpass-navbar .navbar-toggler:focus-visible {
    outline: 2px solid var(--lp-primary-400);
    outline-offset: 2px;
}
@media (max-width: 1199.98px) {
    .lawpass-navbar .dropdown-menu { border: 0; }
    .lawpass-navbar__inner { gap: 8px; }
    .lawpass-navbar .navbar-brand { margin-right: 0; }
    .lawpass-work-menu { order: 4; }
    .lawpass-account { flex: 0 1 auto; }
    .lawpass-account .lawpass-company,
    .lawpass-account #navbarDropdown { max-width: 120px; }
}
@media (max-width: 575.98px) {
    .lawpass-account { flex: 1 1 0; justify-content: flex-end; }
    .lawpass-account .lawpass-company { min-width: 0; max-width: 72px; }
    .lawpass-account #navbarDropdown { max-width: 72px; }
    .lawpass-navbar .lawpass-account .nav-link { padding: 8px 4px; }
}