/* ============================================================
   디어토픽 시험 가이드 — 공통 스타일
   ------------------------------------------------------------
   [목차]
   01. 디자인 토큰
   02. 리셋·기본
   03. 공통 레이아웃
   04. 가이드 서브 내비게이션
   05. 페이지 타이틀 영역
   06. D-day 배너 (시험 소개 페이지 전용) — 이번 회차 / 다음 회차 두 칸
   07. 섹션·본문
   08. 카드
   09. 표(테이블)
   10. 안내 박스
   11. 접수 단계(스텝)
   12. 추천 카드 (PBT/IBT 선택)
   13. 반응형
   14. 유틸리티
   ============================================================ */

/* ── 01. 디자인 토큰 ─────────────────────────────
   색상·크기를 바꿀 때는 이 변수만 수정하면 전체에 반영됩니다. */
:root {
    --navy: #003478; /* 브랜드 메인 (랜딩과 동일) */
    --navy-deep: #04295c; /* 버튼 hover */
    --navy-soft: #eaf1f9; /* 연한 배경·뱃지 */
    --ink: #0f172a; /* 본문 텍스트 */
    --ink-2: #4b5563; /* 보조 텍스트 */
    --ink-3: #6b7280; /* 흐린 텍스트 */
    --line: #e5e7eb; /* 테두리 */
    --bg: #ffffff;
    --bg-soft: #f6f8fb; /* 교차 섹션 배경 */
    --red: #d6303b; /* D-day·경고 */
    --red-soft: #fbeff0;
    --teal: #0e7566; /* 긍정·팁 */
    --teal-soft: #e5f7f3;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(16, 34, 66, 0.05), 0 8px 24px rgba(16, 34, 66, 0.06);
    --maxw: 1200px; /* 콘텐츠 최대 폭 */
}

/* ── 02. 리셋·기본 ───────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}

/* 공통 헤더는 landing.css 에서 position:fixed 다 → 흐름에서 빠지므로 본문을 그 높이만큼 민다.
   값은 shared/site-chrome.js 가 헤더 실측 높이로 채운다. */
body {
    padding-top: var(--dt-guide-header-h, 70px);
}

/* 공통 크롬은 랜딩과 완전히 같은 타이포로 그려져야 한다. 이 문서의 body 타이포(가이드 본문용,
   line-height 1.65)가 상속으로 흘러들면 줄 높이가 달라져 헤더·서브내비·푸터 높이가 1~4px 씩
   어긋난다. 랜딩 토큰(tokens.css)을 그대로 되돌려 준다 — 값이 아니라 출처를 맞추는 것이다. */
/* 크롬을 심는 자리는 레이아웃에서 사라져야 한다(display: contents).
   래퍼가 박스를 만들면 랜딩과 DOM 구조가 달라진다 — 특히 서브 내비의 position:sticky 는
   "부모 박스 안에서만" 붙으므로, 높이가 제 키(68px)뿐인 래퍼 안에 갇히면 스크롤과 함께
   그대로 흘러가 버린다(서브 내비가 스크롤과 함께 사라진다). */
[data-site-chrome] {
    display: contents;
}
[data-site-chrome] {
    font-family: var(--ff-sans);
    font-size: var(--fs-base);
    line-height: var(--lh);
    color: var(--c-text);
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    * {
        transition: none !important;
    }
}
body {
    font-family:
        'Pretendard Variable',
        Pretendard,
        -apple-system,
        'Apple SD Gothic Neo',
        'Noto Sans KR',
        sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
a {
    color: inherit;
    text-decoration: none;
}
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
    border-radius: 6px;
}
img {
    display: block;
    max-width: 100%;
}

/* ── 03. 공통 레이아웃 ───────────────────────── */
.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 32px;
}
@media (max-width: 880px) {
    .wrap {
        padding: 0px 20px;
    }
}
@media (max-width: 640px) {
    .wrap {
        padding: 0px 16px;
    }
}
/* ── 04. 가이드 서브 내비게이션 ──────────────────
   이 문서는 자체 서브 내비를 갖지 않는다. 마크업은 shared/site-chrome.js 가 만들고
   스타일은 landing.css 의 .guide-nav* 를 그대로 쓴다 — 사이트 전체와 같은 것이어야 하므로. */

/* ── 05. 페이지 타이틀 영역 ──────────────────── */
.page-head {
    background: linear-gradient(180deg, var(--bg-soft), #fff);
}
.page-head .wrap {
    padding-top: 40px;
    padding-bottom: 40px;
}
.page-head h1 {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 800;
    letter-spacing: -0.03em;
}
.page-head .sub {
    font-size: clamp(16px, 3vw, 18px);
    color: var(--ink);
}

/* ── 06. D-day 배너 (시험 소개 페이지 전용) — 이번 회차 / 다음 회차 두 칸 ──── */
.dday {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--radius);
    background-color: #eff6ff;
    border: 1px solid #dbeafe;
    overflow: hidden;
}
.dday-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 22px;
}
.dday-col--divider {
    border-left: 1px solid #dbeafe;
}
.dday-col__label {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-3);
}
.dday-col__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.dday-col__date {
    font-size: clamp(16px, 2.5vw, 20px);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.7px;
}
.dday-col__sub {
    font-size: 14px;
    color: var(--ink-1);
}
.dday-col__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid #dbeafe;
}
@media (max-width: 480px) {
    .dday-col__footer {
        border-top: none;
        padding-top: 0px;
    }
}
/* D-count 배지 (이번 회차) */
.dday__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--red);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    border-radius: 32px;
    padding: 6px 12px;
}
.dday__badge-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* 접수 마감/접수 중 상태 배지 */
.dday-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
}
.dday-status__icon {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}
.dday-status--danger {
    background: #f6d3d6;
    color: var(--red);
}
.dday-status--success {
    background: #cdeee4;
    color: var(--teal);
}

/* 다음 회차 확인 링크 */
.dday-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy);
}
.dday-cta:hover {
    text-decoration: underline;
}
.dday-cta__icon {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .dday {
        grid-template-columns: 1fr;
    }
    .dday-col--divider {
        border-left: none;
        border-top: 1px solid #dbeafe;
    }
}

/* ── 07. 섹션·본문 ──────────────────────────── */
.page-head + .g-section {
    padding-top: 0;
}
.g-section {
    padding: 48px 0;
}
.section--tint {
    background: var(--bg-soft);
} /* 교차 배경 섹션 */

.g-sec-head {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.g-sec-head .eyebrow {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.g-sec-head h2 {
    font-size: clamp(20px, 3vw, 24px);
    font-weight: 800;
    display: flex;
    align-items: center;
}
.g-sec-head h2 .icon-inline {
    width: 20px;
    height: 20px;
}

.g-sec-head p {
    font-size: clamp(14px, 3vw, 15px);
    color: var(--ink-2);
}
.sub-title {
    font-size: 16px;
    font-weight: 800;
    margin: 26px 0 12px;
    color: var(--ink-2);
} /* 표 위 소제목 */
.sub-title:first-of-type {
    margin-top: 0;
}
.prose {
    font-size: clamp(15px, 3vw, 16px);
}

.prose p + p {
    margin-top: 12px;
}
.note {
    position: relative;
    padding-left: 14px;
    font-size: clamp(13px, 4vw, 14px);
    color: var(--ink-3);
    margin-top: 12px;
}
.note::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
}
.note a {
    color: var(--navy);
    font-weight: 600;
}
.note a:hover {
    text-decoration: underline;
}
.note-list {
    list-style: none;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.note-list li {
    position: relative;
    padding-left: 14px;
    font-size: clamp(13px, 4vw, 14px);
    color: var(--ink-3);
}
.note-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
}
.note-list a {
    color: var(--navy);
    font-weight: 600;
}
.note-list a:hover {
    text-decoration: underline;
}
.txt-dim {
    font-size: 12px;
    color: var(--ink-3);
} /* 표 안 보조 텍스트 */

/* ── 08. 카드 ───────────────────────────────── */
/* 준비 중 안내(학습 블로그) — 아이콘 + 상태 배지 + 한 줄 설명만 담는 미니멀 플레이스홀더 */
.blog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    border-radius: var(--radius);
    background: var(--bg-soft);
}
.blog-empty__icon {
    width: 100px;
    height: auto;
    filter: saturate(65%);
}
.blog-empty__badge {
    display: inline-block;
    color: var(--ink-1);
    font-size: 18px;
    font-weight: 700;
}
.blog-empty__desc {
    font-size: 14px;
    color: var(--ink-2);
}

/* 요약 카드 그리드 (핵심 수치, PBT/IBT 개요) */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
}
.stat span {
    font-size: clamp(13px, 43vw, 14px);
    font-weight: 600;
}
.stat__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--navy);
}
.stat__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* 제목·표 헤더 등 글자 크기가 제각각인 곳에 붙는 아이콘 — 부모 font-size 에 비례해 자동으로 맞춰진다 */
.icon-inline {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: -0.12em;
    margin-right: 0.32em;
    flex: 0 0 auto;
}
@media (max-width: 480px) {
    .icon-inline {
        width: 18px;
        height: 18px;
    }
}
.stat b {
    display: block;
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 800;
    color: var(--ink);
}
.stat p {
    font-size: 15px;
    color: var(--ink-2);
    margin-top: 6px;
}

/* ── 09. 표(테이블) ─────────────────────────── */
.tbl-wrap {
    overflow-x: auto; /* 모바일 가로 스크롤 */
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.tbl {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: clamp(14px, 3vw, 15px);
}

.tbl th,
.tbl td {
    padding: 14px 20px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
@media (max-width: 480px) {
    .tbl th,
    .tbl td {
        padding: 10px 12px;
    }
}
.tbl thead th {
    background: #506b8d;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
}
.tbl tbody tr:last-child td {
    border-bottom: 0;
}

.tbl td b {
    color: var(--navy);
}
.tbl .is-hl {
    background: #fbfdff;
} /* 강조 행 */
.tbl__t1,
.tbl__t2 {
    border-right: 1px solid var(--line);
} /* 등급 커트라인 표: TOPIK I/II 셀 오른쪽 구분선 (등급·점수 범위 컬럼은 그대로) */
.tbl__group th {
    /* TOPIK I / II 구분 행 */
    background: var(--navy-soft);
    color: var(--navy);
    font-size: 13px;
    font-weight: 800;
    padding: 9px 16px;
}
.tbl__merged {
    text-align: center !important;
    font-weight: 700;
    color: var(--teal);
}
.txt-open {
    color: var(--red);
    font-weight: 700;
} /* 접수 중 */
.txt-soon {
    color: var(--teal);
    font-weight: 700;
} /* 접수 예정 */

/* ── 10. 안내 박스 ──────────────────────────── */

.tip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 13.5px;
}
.tip .icon-inline {
    margin-right: 0;
    flex: 0 0 auto;
}
.tip {
    background: var(--teal-soft);
    border: 1px solid #b1d6ce;
    color: #0b5a4e;
    flex-wrap: wrap;
}
.tip__lead {
    display: flex;
    align-items: center;
    gap: 8px;
}
.link-em {
    flex: 0 0 auto;
    font-weight: 700;
}
.link-em:hover {
    text-decoration: underline;
}
/* ── 11. 접수 단계(스텝) ────────────────────── */
.g-steps {
    counter-reset: s;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.step {
    display: flex;
    flex-direction: column;
    background: var(--navy-soft);
    border-radius: var(--radius);
    padding: 22px 20px;
}
.step::before {
    counter-increment: s;
    content: counter(s, decimal-leading-zero) '.';
    display: block;
    font-size: clamp(24px, 4vw, 28px);
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 10px;
}
.step h3 {
    font-size: clamp(18px, 4vw, 24px);
    font-weight: 700;
    line-height: 1.35;
}

.step p {
    font-size: clamp(15px, 3vw, 16px);
    color: var(--ink-2);
    margin-top: 20px;
}
@media (max-width: 480px) {
    .step p {
        margin-top: 12px;
    }
}
@media (max-width: 880px) {
    .g-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .g-steps {
        grid-template-columns: 1fr;
    }
}

/* ── 12. 추천 카드 (PBT/IBT 선택) ───────────── */
.pick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.pick__col {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
}
.pick__icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--navy-soft);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.pick__icon svg {
    width: 24px;
    height: 24px;
}
.pick__col h3 {
    font-size: clamp(18px, 4vw, 24px);
    font-weight: 800;
    color: var(--navy);
}
.pick__col ul {
    list-style: none;
    margin-top: 12px;
}
.pick__col li {
    position: relative;
    padding: 7px 0 7px 24px;
    font-size: clamp(15px, 3vw, 16px);
}
.pick__col li::before {
    content: '✓';
    position: absolute;
    left: 2px;
    color: var(--teal);
    font-weight: 800;
}

/* ── 13. 반응형 ─────────────────────────────── */
@media (max-width: 860px) {
    .pick {
        grid-template-columns: 1fr;
    }
    .dday__apply {
        margin-left: 0;
        width: 100%;
    }
}

/* ── 14. 유틸리티 ───────────────────────────── */
.u-mt-26 {
    margin-top: 26px;
}
.u-nowrap {
    white-space: nowrap;
}