@charset "UTF-8";
/* ============================================================
   common.css — 전 페이지 공통
   디자인 토큰 / 기본 스타일 / 공통 컴포넌트 / 헤더 / 드로어 / 푸터
   기준 문서 : reference/designPage/DESIGN.md
   ============================================================ */

/* ------------------------------------------------------------
   1. 디자인 토큰
   ------------------------------------------------------------ */
:root {
    /* 색 — 브랜드 */
    --c-brand: #2563EB;
    --c-brand-hover: #1D4FD1;
    --c-brand-subtle: #F1F5FD;

    /* 색 — 배경 */
    --c-bg: #FFFFFF;
    --c-bg-alt: #F8F9FA;
    --c-bg-dark: #2B2B2B;
    --c-bg-drawer: #2A2A2A;
    --c-bg-darker: #1B1E25;

    /* 색 — 텍스트 */
    --c-text: #333333;
    --c-text-strong: #1B1E25;
    --c-text-sub: #5A5F66;
    --c-text-faint: #8A8F96;
    --c-text-muted: #8A94A0;
    --c-text-placeholder: #B1B8BE;
    --c-text-invert: #FFFFFF;
    --c-text-invert-sub: #B1B8BE;
    --c-text-invert-soft: #D5D8DC;
    --c-text-drawer: #E7E7E7;
    --c-text-drawer-sub: #B8B8B8;

    /* 색 — 보더 */
    --c-border: #E4E7EA;
    --c-border-gray: #B1B8BE;
    --c-border-drawer: #3A3A3A;
    --c-border-invert: rgba(255, 255, 255, 0.08);
    --c-border-footer: rgba(0, 0, 0, 0.25);

    /* 색 — 상태 */
    --c-warning: #E0912F;
    --c-danger: #C9372C;
    --c-danger-bg: #FDF2F1;

    /* 타이포 */
    --font-base: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* 라운드 */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-full: 999px;

    /* 그림자 — 떠 있는 요소에만 사용 */
    --shadow-header: 0 2px 20px rgba(27, 30, 37, 0.10);
    --shadow-dropdown: 0 4px 16px rgba(27, 30, 37, 0.12);
    --shadow-drawer: -4px 0 24px rgba(27, 30, 37, 0.16);
    --shadow-card-hover: 0 6px 16px rgba(27, 30, 37, 0.10);

    /* 모션 */
    --t-dur: 150ms;
    --t-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* 레이아웃 */
    --w-container: 1200px;
    --h-header: 88px;
    --z-header: 50;
    /* 알림 팝업 — 헤더보다는 위, 드로어·모달보다는 아래에 둔다 */
    --z-toast: 70;
    --z-dim: 80;
    --z-drawer: 90;
    --z-modal: 100;
}

/* ------------------------------------------------------------
   2. 기본 스타일
   ------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    /* 드로어를 열 때 스크롤바가 사라지며 생기는 레이아웃 이동을 막는다 */
    scrollbar-gutter: stable;
    /* 앵커로 이동할 때 대상이 고정 헤더에 가려지지 않게 한다 */
    scroll-padding-top: var(--h-header);
}

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: 15px;
    line-height: 22.5px;
    color: var(--c-text);
    background: var(--c-bg);
    word-break: keep-all;
}

h1,
h2,
h3,
h4,
p,
figure,
dl,
dd {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

address {
    font-style: normal;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: var(--c-brand);
    text-decoration: none;
}

a:hover {
    color: var(--c-brand-hover);
    text-decoration: underline;
}

button {
    font-family: inherit;
}

:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
    border-radius: 2px;
}

/* 화면에는 감추고 보조기기에만 읽히는 텍스트 */
.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.container {
    width: 100%;
    max-width: var(--w-container);
    margin-inline: auto;
    padding-inline: 20px;
}

/* ------------------------------------------------------------
   3. 공통 컴포넌트 — 버튼
   ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    font-family: inherit;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t-dur) var(--t-ease), color var(--t-dur) var(--t-ease);
}

.btn:hover {
    text-decoration: none;
}

/* 처리 중이거나 사용할 수 없는 버튼 */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn--primary {
    background: var(--c-brand);
    color: var(--c-text-invert);
}

.btn--primary:hover {
    background: var(--c-brand-hover);
    color: var(--c-text-invert);
}

/* 밝은 배경 위 외곽선 버튼 — 높이는 border-box 를 흐트러뜨리지 않도록 inset 그림자로 그린다 */
.btn--outline {
    background: transparent;
    color: var(--c-text);
    box-shadow: inset 0 0 0 1px var(--c-border);
}

.btn--outline:hover {
    background: var(--c-bg-alt);
    color: var(--c-text);
}

/* 어두운 배경 위 외곽선 버튼 */
.btn--outline-invert {
    background: transparent;
    color: var(--c-text-invert);
    box-shadow: inset 0 0 0 1px var(--c-text-sub);
}

.btn--outline-invert:hover {
    background: var(--c-bg-dark);
    color: var(--c-text-invert);
}

.btn--small {
    height: 40px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    font-size: 15px;
    line-height: 22.5px;
}

.btn--large {
    height: 56px;
    padding: 0 20px;
    border-radius: var(--r-md);
    font-size: 19px;
    line-height: 28.5px;
}

.btn--block {
    display: flex;
    width: 100%;
}

/* ------------------------------------------------------------
   4. 공통 컴포넌트 — 태그 · 필
   ------------------------------------------------------------ */
/* 태그 — 분류를 나타내는 작은 채움 칩 */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 8px;
    border-radius: var(--r-full);
    background: var(--c-brand-subtle);
    color: var(--c-brand);
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;
}

.tag--outline {
    background: transparent;
    color: var(--c-text);
    box-shadow: inset 0 0 0 1px var(--c-border-gray);
}

/* 필 — 키워드를 나열하는 외곽선 칩 (태그보다 여백이 넓다) */
.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    font-size: 13px;
    line-height: 19.5px;
    color: var(--c-text-sub);
}

/* ------------------------------------------------------------
   5. 공통 컴포넌트 — 모달 · 폼
   ------------------------------------------------------------ */
.modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal[hidden] {
    display: none;
}

body.is-modal-open {
    overflow: hidden;
}

.modal__dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

/* 딤 위에 올라오도록 위치를 잡는다 */
.modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border-radius: var(--r-lg);
    background: var(--c-bg);
    box-shadow: var(--shadow-dropdown);
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--c-border);
}

.modal__title {
    font-size: 19px;
    line-height: 28.5px;
    font-weight: 700;
    color: var(--c-text);
}

.modal__close {
    flex: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--r-xs);
    background: none;
    color: var(--c-text-sub);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t-dur) var(--t-ease), color var(--t-dur) var(--t-ease);
}

.modal__close:hover {
    background: var(--c-bg-alt);
    color: var(--c-text);
}

.modal__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
}

/* 폼 — 라벨과 입력칸 한 벌 */
.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field__label {
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 700;
    color: var(--c-text);
}

.field__input {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: var(--c-bg);
    color: var(--c-text);
    font-family: inherit;
    font-size: 15px;
    line-height: 22.5px;
    transition: border-color var(--t-dur) var(--t-ease);
}

.field__input:focus {
    border-color: var(--c-brand);
    outline: 2px solid var(--c-brand-subtle);
}

.field__input:disabled {
    background: var(--c-bg-alt);
    color: var(--c-text-faint);
    cursor: not-allowed;
}

/* 안내 문구는 입력한 값과 헷갈리지 않게 연하게 둔다 */
input::placeholder,
textarea::placeholder {
    color: var(--c-text-placeholder);
    opacity: 1;
}

/* 여러 줄 입력칸 — 높이는 rows 로 정하고 세로로만 늘린다 */
.field__textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: var(--c-bg);
    color: var(--c-text);
    font-family: inherit;
    font-size: 15px;
    line-height: 22.5px;
    resize: vertical;
    transition: border-color var(--t-dur) var(--t-ease);
}

.field__textarea:focus {
    border-color: var(--c-brand);
    outline: 2px solid var(--c-brand-subtle);
}

/* 폼 제출 버튼 — .btn.btn--primary.btn--block 과 함께 쓴다 */
.form-submit {
    height: 48px;
    border-radius: var(--r-md);
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 700;
}

.form-error {
    font-size: 13px;
    line-height: 19.5px;
    color: var(--c-danger);
    text-wrap: pretty;
}

.form-error[hidden] {
    display: none;
}

/* ------------------------------------------------------------
   6. 공통 컴포넌트 — 서브 하위 메뉴
   ------------------------------------------------------------ */
.side-nav {
    display: flex;
    flex-direction: column;
    border-top: 2px solid var(--c-text);
}

.side-nav__title {
    padding: 20px 0 16px;
    font-size: 19px;
    line-height: 28.5px;
    font-weight: 700;
    color: var(--c-text);
}

/* 이동할 페이지가 없는 대분류 라벨 */
.side-nav__group {
    padding: 12px 16px;
    border-top: 1px solid var(--c-border);
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 700;
    color: var(--c-text);
}

.side-nav__link {
    padding: 10px 16px 10px 28px;
    font-size: 15px;
    line-height: 22.5px;
    color: var(--c-text-sub);
    transition: background var(--t-dur) var(--t-ease), color var(--t-dur) var(--t-ease);
}

/* 대분류로 노출되는 항목 — 그룹 라벨과 같은 여백·구분선을 쓴다 */
.side-nav__link--top {
    padding: 12px 16px;
    border-top: 1px solid var(--c-border);
    color: var(--c-text);
}

.side-nav__link:hover {
    background: var(--c-bg-alt);
    color: var(--c-text);
    text-decoration: none;
}

.side-nav__link.is-current {
    background: var(--c-brand-subtle);
    color: var(--c-brand);
    font-weight: 700;
}

/* ------------------------------------------------------------
   7. 헤더
   ------------------------------------------------------------ */
/* 스크롤해도 항상 상단에 남는다. sticky 라 문서 흐름에 자리를 유지하므로
   페이지마다 헤더 높이만큼 여백을 보정할 필요가 없다. */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow-header);
}

/* 본문(1200px 컨테이너)과 달리 헤더만 화면 전체 폭을 쓴다.
   로고를 화면 왼쪽 끝, 주메뉴·햄버거를 오른쪽 끝에 붙이기 위한 것으로 기존 사이트와 같은 배치다.
   그래서 헤더의 좌우 시작선은 본문과 일부러 어긋난다. */
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
    height: var(--h-header);
    padding-inline: 50px;
}

.site-header__logo {
    flex: none;
    display: block;
    width: 172px;
    height: 38px;
    background: url('../img/logow.png') left center / contain no-repeat;
}

/* 주메뉴(GNB) */
.gnb {
    flex: 1 1 auto;
    min-width: 0;
}

.gnb__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

.gnb__item {
    position: relative;
}

.gnb__link {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 20px;
    color: var(--c-text-strong);
    font-size: 19px;
    line-height: 28.5px;
    font-weight: 400;
    white-space: nowrap;
    transition: color var(--t-dur) var(--t-ease);
}

.gnb__link:hover {
    color: var(--c-brand);
    text-decoration: none;
}

.gnb__link.is-current {
    color: var(--c-brand);
    font-weight: 700;
    box-shadow: inset 0 -3px 0 0 var(--c-brand);
}

/* 주메뉴 드롭다운 — hover / 키보드 포커스로 열린다 */
.gnb__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    padding-top: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--t-dur) var(--t-ease),
                transform var(--t-dur) var(--t-ease),
                visibility var(--t-dur) var(--t-ease);
}

/* 마지막 메뉴는 화면 밖으로 나가지 않도록 우측 정렬 */
.gnb__item:last-child .gnb__sub {
    left: auto;
    right: 0;
}

.gnb__item:hover > .gnb__sub,
.gnb__item:focus-within > .gnb__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.gnb__sub-list {
    display: flex;
    flex-direction: column;
    min-width: 180px;
    padding: 8px 0;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-dropdown);
}

.gnb__sub-link {
    display: block;
    padding: 10px 20px;
    color: var(--c-text);
    font-size: 15px;
    line-height: 22.5px;
    white-space: nowrap;
    transition: background var(--t-dur) var(--t-ease), color var(--t-dur) var(--t-ease);
}

.gnb__sub-link:hover {
    background: var(--c-brand-subtle);
    color: var(--c-brand);
    text-decoration: none;
}

/* 전체 메뉴 열기 버튼(햄버거) */
.drawer-open {
    flex: none;
    /* 주메뉴가 숨겨지는 좁은 화면에서도 우측에 고정한다 */
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 0;
    background: none;
    cursor: pointer;
}

.drawer-open__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--c-text);
    transition: background var(--t-dur) var(--t-ease);
}

/* 히어로 위에 겹쳐지는 헤더 — 메인 페이지처럼 전체화면 비주얼이 있는 페이지에서 사용한다.
   기본은 투명, 히어로를 절반 이상 스크롤하면 .is-scrolled 가 붙어 흰 배경으로 전환된다. */
.site-header--overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    transition: background var(--t-dur) var(--t-ease),
                border-color var(--t-dur) var(--t-ease),
                box-shadow var(--t-dur) var(--t-ease);
}

.site-header--overlay .site-header__logo {
    background-image: url('../img/logob.png');
}

.site-header--overlay .gnb__link,
.site-header--overlay .gnb__link.is-current {
    color: var(--c-text-invert);
}

.site-header--overlay .gnb__link.is-current {
    box-shadow: inset 0 -3px 0 0 var(--c-text-invert);
}

.site-header--overlay .gnb__link:hover {
    color: var(--c-brand);
}

.site-header--overlay .drawer-open__bar {
    background: var(--c-text-invert);
}

/* 스크롤 후 — 일반 헤더와 동일한 흰 배경 상태 */
.site-header--overlay.is-scrolled {
    background: var(--c-bg);
    border-bottom-color: var(--c-border);
    box-shadow: var(--shadow-header);
}

.site-header--overlay.is-scrolled .site-header__logo {
    background-image: url('../img/logow.png');
}

.site-header--overlay.is-scrolled .gnb__link {
    color: var(--c-text-strong);
}

.site-header--overlay.is-scrolled .gnb__link:hover,
.site-header--overlay.is-scrolled .gnb__link.is-current {
    color: var(--c-brand);
}

.site-header--overlay.is-scrolled .gnb__link.is-current {
    box-shadow: inset 0 -3px 0 0 var(--c-brand);
}

.site-header--overlay.is-scrolled .drawer-open__bar {
    background: var(--c-text);
}

/* ------------------------------------------------------------
   8. 전체 메뉴 드로어
   ------------------------------------------------------------ */
.drawer-dim {
    position: fixed;
    inset: 0;
    z-index: var(--z-dim);
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-dur) var(--t-ease), visibility var(--t-dur) var(--t-ease);
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    width: min(340px, 88vw);
    background: var(--c-bg-drawer);
    box-shadow: var(--shadow-drawer);
    transform: translateX(100%);
    transition: transform var(--t-dur) var(--t-ease);
}

body.is-drawer-open {
    overflow: hidden;
}

.is-drawer-open .drawer-dim {
    opacity: 1;
    visibility: visible;
}

.is-drawer-open .drawer {
    transform: translateX(0);
}

.drawer__head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--h-header);
    padding: 0 20px;
    border-bottom: 1px solid var(--c-border-drawer);
}

.drawer__logo {
    width: 140px;
    height: 28px;
    object-fit: contain;
    object-position: left center;
}

.drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: var(--c-text-drawer);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.drawer__util {
    flex: none;
    padding: 20px;
    border-bottom: 1px solid var(--c-border-drawer);
}

/* 로그인 · 로그아웃 버튼 — 상태에 따라 문구만 바뀐다 */
.drawer__auth {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: var(--r-md);
    background: var(--c-brand);
    color: var(--c-text-invert);
    font-family: inherit;
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--t-dur) var(--t-ease);
}

.drawer__auth:hover {
    background: var(--c-brand-hover);
}

.drawer__auth:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.drawer__nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    overflow-y: auto;
}

.drawer__group {
    padding: 14px 20px 6px;
    color: var(--c-text-drawer);
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 700;
}

.drawer__link {
    padding: 14px 20px;
    color: var(--c-text-drawer);
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 700;
    transition: background var(--t-dur) var(--t-ease), color var(--t-dur) var(--t-ease);
}

.drawer__link:hover {
    background: var(--c-border-drawer);
    color: var(--c-text-invert);
    text-decoration: none;
}

.drawer__link--sub {
    padding: 10px 20px 10px 32px;
    color: var(--c-text-drawer-sub);
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 400;
}

.drawer__counter {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--c-border-drawer);
}

.drawer__counter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--c-text-drawer);
    font-size: 10px;
    line-height: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   9. 서브 비주얼 / 브레드크럼 — 서브페이지 공통
   ------------------------------------------------------------ */
.sub-visual {
    position: relative;
    height: 280px;
    background: var(--c-bg-dark) url('../img/main_01.jpg') center / cover no-repeat;
}

/* 배경 위 글자 대비를 확보하는 어두운 오버레이 */
.sub-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(27, 30, 37, 0.55);
}

.sub-visual__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    height: 100%;
}

.sub-visual__title {
    font-size: 40px;
    line-height: 60px;
    font-weight: 700;
    color: var(--c-text-invert);
}

.sub-visual__desc {
    font-size: 17px;
    line-height: 25.5px;
    color: var(--c-text-invert-soft);
}

.breadcrumb {
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
}

.breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    font-size: 13px;
    line-height: 19.5px;
    color: var(--c-text-sub);
}

/* 항목 사이 구분점 — 목록 gap(8px)과 합쳐 좌우 여백이 같아진다 */
.breadcrumb__item + .breadcrumb__item::before {
    content: '·';
    margin-right: 8px;
    color: var(--c-border-gray);
}

.breadcrumb__link {
    color: inherit;
}

.breadcrumb__link:hover {
    color: var(--c-brand);
}

.breadcrumb__current {
    color: var(--c-text);
    font-weight: 700;
}

/* ------------------------------------------------------------
   10. 서브페이지 콘텐츠 — 인트로 / 구분선 / 패널 / 카드 / 지표 / 문의 CTA
   ------------------------------------------------------------ */
/* 본문을 여는 큰 제목 + 리드문 */
.page-intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-intro__title {
    font-size: 32px;
    line-height: 48px;
    font-weight: 700;
    color: var(--c-text);
    text-wrap: pretty;
}

.page-intro__lead {
    font-size: 17px;
    line-height: 25.5px;
    color: var(--c-text-sub);
    text-wrap: pretty;
}

/* 인트로 gap(16px)과 합쳐 리드문과 20px 간격이 되게 한다 */
.page-intro__pills {
    padding-top: 4px;
}

.divider {
    height: 1px;
    background: var(--c-border);
}

/* 패널 — 배지 · 제목 · 설명으로 시작하는 콘텐츠 묶음 */
.panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
    border-radius: var(--r-md);
    background: var(--c-bg-alt);
}

/* 배경 박스가 없는 변형 — 회색 패널과 좌우 정렬을 맞춘다 */
.panel--plain {
    padding: 0 28px;
    border-radius: 0;
    background: transparent;
}

.panel__badge {
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: var(--r-full);
    background: var(--c-brand-subtle);
    color: var(--c-brand);
    font-size: 13px;
    line-height: 19.5px;
    font-weight: 700;
}

.panel__title {
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
    color: var(--c-text);
    text-wrap: pretty;
}

.panel__desc {
    font-size: 15px;
    line-height: 22.5px;
    color: var(--c-text-sub);
    text-wrap: pretty;
}

.panel__link {
    align-self: flex-start;
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 700;
}

/* 카드 그리드 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: start;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-bg);
}

.card__title {
    font-size: 17px;
    line-height: 25.5px;
    font-weight: 700;
    color: var(--c-text);
}

.card__desc {
    font-size: 15px;
    line-height: 22.5px;
    color: var(--c-text-sub);
    text-wrap: pretty;
}

/* 지표 */
.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.stats__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-bg);
}

.stats__value {
    font-size: 32px;
    line-height: 48px;
    font-weight: 700;
    color: var(--c-brand);
}

.stats__label {
    font-size: 15px;
    line-height: 22.5px;
    color: var(--c-text-sub);
}

/* 문의 CTA — 어두운 박스 */
.cta {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    border-radius: var(--r-md);
    background: var(--c-bg-darker);
    color: var(--c-text-invert);
}

.cta__title {
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
    text-wrap: pretty;
}

.cta__desc {
    font-size: 15px;
    line-height: 22.5px;
    color: var(--c-text-invert-sub);
    text-wrap: pretty;
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 4px;
}

.cta__btn {
    height: 48px;
    padding: 0 24px;
    border-radius: var(--r-md);
    font-size: 15px;
    line-height: 22.5px;
    font-weight: 700;
}

/* ------------------------------------------------------------
   11. 푸터
   ------------------------------------------------------------ */
.site-footer {
    background: var(--c-bg-darker);
    color: var(--c-text-invert);
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 56px;
    padding-bottom: 20px;
}

.site-footer__top {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.site-footer__logo {
    width: 168px;
    height: 34px;
    margin-bottom: 25px;
    object-fit: contain;
    object-position: left center;
}

.site-footer__tagline,
.site-footer__contact,
.site-footer__copyright {
    color: var(--c-text-invert-sub);
    font-size: 15px;
    line-height: 22.5px;
}

/* 로고(34px) + 하단 여백(25px) + 브랜드 영역 gap(8px) 만큼 내려 태그라인과 첫 줄을 맞춘다 */
.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 67px;
}

.site-footer__links a {
    color: var(--c-text-invert-sub);
    font-size: 15px;
    line-height: 22.5px;
}

.site-footer__links a:hover {
    color: var(--c-text-invert);
}

/* 저작권 위 구분선 */
.site-footer__copyright {
    margin-top: 10px;
    padding-top: 24px;
    border-top: 1px solid var(--c-border-footer);
}

/* 이메일 무단수집 거부 — 전 페이지 공통 */
.email-notice {
    background: var(--c-bg-darker);
    border-top: 1px solid var(--c-border-invert);
}

.email-notice__text {
    padding-block: 16px;
    color: var(--c-text-muted);
    font-size: 13px;
    line-height: 19.5px;
    text-wrap: pretty;
}

/* ------------------------------------------------------------
   12. 반응형
   ------------------------------------------------------------ */
/* 주메뉴가 로고·햄버거와 겹치기 시작하는 폭부터 드로어로 대체 */
@media (max-width: 1080px) {
    .gnb {
        display: none;
    }
}

@media (max-width: 1024px) {
    .stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 서브 하위 메뉴는 '왼쪽 메뉴 + 오른쪽 본문' 2열일 때만 쓴다.
       이 폭부터 .note-main · .policy-main 이 1열로 바뀌어 메뉴가 본문 위에 얹히므로 감춘다.
       (두 레이아웃의 1열 전환 지점과 이 값이 같아야 한다. 한쪽만 바꾸면 어긋난다)
       감춰도 길이 막히지 않는다 — 강의노트/자료·관리자 항목은 햄버거 메뉴에,
       개인정보처리방침·이용약관은 푸터에 같은 항목이 그대로 있다. */
    .side-nav {
        display: none;
    }
}

@media (max-width: 768px) {
    /* 좁은 화면에서는 좌우 50px 를 유지할 수 없다.
       320px 화면이면 로고(172) + 간격(32) + 햄버거(44) = 248px 가 남는 폭 220px 을 넘어서,
       오른쪽 여백이 22px 까지 눌리며 좌우가 어긋난다. (가로 스크롤은 생기지 않는다)
       본문 컨테이너와 같은 20px 로 줄여 양쪽 여백을 맞춘다. */
    .site-header__inner {
        padding-inline: 20px;
    }

    .page-intro__title {
        font-size: 24px;
        line-height: 36px;
    }

    .card-grid,
    .stats {
        grid-template-columns: 1fr;
    }

    .site-footer__inner {
        padding-top: 40px;
    }

    .site-footer__top {
        flex-direction: column;
        gap: 24px;
    }

    .site-footer__links {
        margin-top: 0;
    }
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}