/* ===========================================================
   기출 101 — 사이트 프로토타입 공통 스타일
   디자인 규칙의 원본. 색상·글꼴·간격은 전부 여기 토큰으로 정의한다.
   =========================================================== */

:root {
  /* --- 바탕 / 표면 --------------------------------------- */
  --paper:          #EDE7DA;   /* 페이지 바탕 (따뜻한 종이색) */
  --surface:        #FCFAF4;   /* 카드·본문 박스 */
  --surface-2:      #F5F1E6;   /* 광고 자리, 보조 박스 */
  --surface-3:      #F3EEE4;   /* 도식 박스 */
  --border:         #DCD4C3;   /* 기본 테두리 */
  --border-2:       #C9BFA8;   /* 점선 테두리 (광고 자리) */
  --rule:           #E6E0D3;   /* 표 내부 구분선 */

  /* --- 메인: 딥 틸 --------------------------------------- */
  --teal:           #14524D;
  --teal-mid:       #2C7A71;
  --teal-dark:      #0E3B37;
  --teal-pale:      #E4EEEB;
  --teal-pale-bd:   #B9D2CD;
  --teal-dim:       #B6CFCB;   /* 네비 비활성 링크 */
  --teal-sub:       #C8DCD8;   /* 틸 배경 위 보조 텍스트 */

  /* --- 강조: 머스터드 ------------------------------------ */
  --gold:           #DFA828;
  --gold-pale:      #FAF0D2;
  --gold-pale-bd:   #E3CE8A;
  --gold-ink:       #7A5A0C;
  --marker:         #FAEBB8;   /* 형광펜 하이라이트 */

  /* --- 경고: 벽돌색 -------------------------------------- */
  --brick:          #AE4029;
  --brick-pale:     #F9E8E2;
  --brick-pale-bd:  #E0B5A7;

  /* --- 글자색 -------------------------------------------- */
  --ink:            #1F2429;   /* 본문 */
  --ink-2:          #55606A;   /* 보조 (명도 대비 5.7:1 확보) */
  --ink-inv:        #FCFAF4;   /* 어두운 배경 위 글자 */
  --ink-inv-2:      #B0B6BC;
  --crumb-sep:      #9A9284;

  /* --- 도식 전용 ----------------------------------------- */
  --thumb:          #DFD8C9;
  --thumb-2:        #E8E1D2;
  --arrow:          #8C8372;

  /* --- 글꼴 ---------------------------------------------- */
  --font-kr: 'Noto Sans KR', system-ui, sans-serif;  /* 한국어 본문·UI */
  --font-en: 'Lora', Georgia, serif;                 /* 영어 예문만 */

  /* --- 본문 단 너비 (페이지마다 덮어씀) ------------------- */
  --wrap: 980px;
}

/* =========================== 기본 =========================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  font-family: var(--font-kr);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); }
a:hover { color: var(--teal-dark); }

h1, h2, h3 { letter-spacing: -0.6px; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
}

.page-body { padding: 22px 24px 60px; }

/* 영어 예문 — 이 클래스가 붙은 곳만 세리프 */
.eg {
  font-family: var(--font-en);
  font-size: 16.5px;
  color: var(--ink);
}
.eg--sm { font-size: 15px; }
.eg--lg { font-size: 16.5px; line-height: 1.9; }

/* 한국어 주석이 영어 예문 안에 섞일 때 */
.ko-note {
  font-family: var(--font-kr);
  font-size: 13px;
  color: var(--ink-2);
}

/* 형광펜 */
.hl {
  background: var(--marker);
  padding: 1px 4px;
  font-weight: 700;
  color: var(--ink);
}

.strike { text-decoration: line-through; color: var(--ink-2); }

/* =========================== 네비 =========================== */

.site-nav { background: var(--teal); padding: 0 24px; }

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
}

.site-nav__brand {
  color: var(--ink-inv);
  text-decoration: none;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.4px;
}

.site-nav__links { display: flex; gap: 26px; align-items: center; }

.site-nav__links a {
  color: var(--teal-dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.site-nav__links a:hover { color: var(--ink-inv); }
.site-nav__links a[aria-current="page"] { color: var(--ink-inv); }

/* ======================== 브레드크럼 ======================== */

.breadcrumb { font-size: 12.5px; color: var(--ink-2); margin-bottom: 18px; }
.breadcrumb a { text-decoration: none; }
.breadcrumb .sep { color: var(--crumb-sep); margin: 0 6px; }

/* ========================== 패널 ============================ */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
}
.panel--top-teal { border-top: 4px solid var(--teal); }
.panel--top-gold { border-top: 4px solid var(--gold); }
.panel--pad    { padding: 22px 26px; }
.panel--pad-lg { padding: 28px 32px; }
.panel--pad-sm { padding: 15px 17px; }

/* 유닛 머리글의 번호 블록 */
.unit-badge {
  background: var(--teal);
  color: var(--ink-inv);
  width: 76px;
  flex-shrink: 0;
  text-align: center;
  padding: 9px 0 11px;
}
.unit-badge__label { font-size: 10.5px; font-weight: 500; letter-spacing: 0.8px; opacity: 0.85; }
.unit-badge__num   { font-size: 38px; font-weight: 900; line-height: 1.05; letter-spacing: -1px; }

.eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal-mid);
  letter-spacing: 0.2px;
  margin-bottom: 7px;
}

/* ========================= 제목 ============================= */

.h2-sec {
  margin: 40px 0 0;
  font-size: 23px;
  font-weight: 900;
  color: var(--ink);
  border-bottom: 3px solid var(--teal);
  padding-bottom: 11px;
}
.h2-sec--sm { font-size: 20px; }
.h2-sec__num { color: var(--teal-mid); margin-right: 9px; }

.h3-sub {
  margin: 30px 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 9px;
}

.num-badge {
  background: var(--teal);
  color: var(--ink-inv);
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  flex-shrink: 0;
}

.tag-exam {
  background: var(--brick);
  color: var(--ink-inv);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  letter-spacing: 0.3px;
}

.tag-teal {
  display: inline-block;
  background: var(--teal);
  color: var(--ink-inv);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  letter-spacing: 0.3px;
}

.label-sm {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0.3px;
  margin-bottom: 12px;
}

/* ========================= 그리드 =========================== */

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grid-8 { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; }
.gap-11 { gap: 11px; }

/* ======================= 강조 박스 ========================== */

.warn {
  background: var(--brick-pale);
  border-left: 4px solid var(--brick);
  padding: 13px 17px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.7;
}

.box-brick {
  background: var(--brick-pale);
  border: 1px solid var(--brick-pale-bd);
  padding: 18px 24px;
}

.box-compare {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--teal);
  padding: 18px 24px;
}

.tipbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  padding: 14px 20px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.75;
}

.verb-box { padding: 16px 18px; }
.verb-box--teal  { background: var(--teal-pale);  border: 1px solid var(--teal-pale-bd); }
.verb-box--gold  { background: var(--gold-pale);  border: 1px solid var(--gold-pale-bd); }
.verb-box--brick { background: var(--brick-pale); border: 1px solid var(--brick-pale-bd); }
.verb-box__head { font-size: 12.5px; font-weight: 700; margin-bottom: 9px; }

/* ======================== 광고 자리 ========================= */
/* 프로토타입에서는 점선 상자로만 표시한다. 실제 코드로 교체할 곳. */

.ad-slot {
  border: 1.5px dashed var(--border-2);
  background: var(--surface-2);
  padding: 30px 20px;
  text-align: center;
}
.ad-slot--tall  { padding: 44px 20px; }
.ad-slot--mid   { padding: 36px 20px; }
.ad-slot--prime { border-color: var(--brick); background: var(--brick-pale); }

.ad-slot__label { font-size: 12.5px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.4px; }
.ad-slot--prime .ad-slot__label { color: var(--brick); }
.ad-slot__note  { font-size: 11.5px; color: var(--ink-2); margin-top: 5px; }

/* ========================== 버튼 ============================ */

.btn {
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  box-sizing: border-box;
}
.btn--gold  { background: var(--gold); color: var(--ink);     font-size: 16px; padding: 17px 32px; }
.btn--teal  { background: var(--teal); color: var(--ink-inv); font-size: 18px; padding: 19px 44px; gap: 12px; }
.btn--ghost {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--teal);
  font-size: 13.5px;
  padding: 13px 20px;
  gap: 8px;
}
.btn--gold:hover  { background: #D29D1F; color: var(--ink); }
.btn--teal:hover  { background: var(--teal-dark); color: var(--ink-inv); }
.btn--ghost:hover { background: var(--surface); }

/* 눈에 띄는 CTA 띠 */
.cta {
  background: var(--teal);
  padding: 30px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.cta__title { font-size: 20px; font-weight: 900; color: var(--ink-inv); letter-spacing: -0.4px; margin-bottom: 8px; }
.cta__note  { font-size: 14px; color: var(--teal-sub); line-height: 1.7; }

/* ====================== 카드형 링크 ========================= */

.card-link {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 16px 18px;
  text-decoration: none;
  display: block;
}
.card-link:hover { background: var(--surface-2); }
.card-link__kicker { font-size: 11.5px; color: var(--ink-2); margin-bottom: 5px; }
.card-link__title  { font-size: 14.5px; font-weight: 700; color: var(--teal); }

.file-link {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 15px 18px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.file-link:hover { background: var(--surface-2); }
.file-link__name { font-size: 14px; font-weight: 500; color: var(--ink); }
.file-link__meta { font-size: 12px; color: var(--ink-2); }
.file-link--solid { background: var(--teal); border-color: var(--teal); }
.file-link--solid:hover { background: var(--teal-dark); }
.file-link--solid .file-link__name { color: var(--ink-inv); font-weight: 700; }

/* ===================== 역할 표 (3열) ======================== */

.role-table { background: var(--surface); border: 1px solid var(--border); }
.role-row {
  display: grid;
  grid-template-columns: 170px 170px minmax(0, 1fr);
}
.role-row .cell { padding: 16px 17px; }
.role-table .role-row:not(:last-child) { border-bottom: 1px solid var(--rule); }
.role-table .role-row--head { background: #EFEADF; border-bottom: 1px solid var(--border); }
.role-table .role-row--head .cell { font-size: 13px; font-weight: 700; padding: 11px 17px; }
.role-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.role-mean { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.role-where { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.role-ko { font-size: 13px; color: var(--ink-2); margin-top: 4px; }

/* ====================== 개념 확인 문항 ====================== */

.quiz-grid {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 34px;
}
.quiz-item {
  font-family: var(--font-en);
  font-size: 15.5px;
  color: var(--ink);
  border-bottom: 1px dotted var(--border-2);
  padding-bottom: 9px;
}
.quiz-no {
  font-family: var(--font-kr);
  font-weight: 700;
  color: var(--teal-mid);
  font-size: 13px;
  margin-right: 7px;
}

/* ========================= 정답 칩 ========================== */

.ans-chip {
  padding: 8px 4px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--teal-pale);
  border: 1px solid var(--teal-pale-bd);
}
.ans-chip--plain { background: var(--surface-2); border: 1px solid var(--border); }
.ans-chip b { color: var(--teal-mid); }

.num-chip {
  border: 1px solid var(--border);
  padding: 9px 4px;
  text-align: center;
  font-size: 13px;
  color: var(--ink);
}
.num-chip b { color: var(--teal-mid); }
.num-chip--ref { font-size: 11.5px; color: var(--ink-2); }

/* ========================== 해설 ============================ */

.sol-list { background: var(--surface); border: 1px solid var(--border); border-top: none; }
.sol { padding: 18px 24px; border-bottom: 1px solid var(--rule); }
.sol__head {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--brick);
  margin-bottom: 8px;
  font-family: var(--font-en);
}
.sol__body { margin: 0 0 9px; font-size: 14.5px; color: var(--ink); line-height: 1.8; }
.sol__row { display: flex; gap: 9px; align-items: flex-start; }
.sol__row + .sol__row { margin-top: 7px; }
.sol__text { font-size: 14px; color: var(--ink); line-height: 1.7; }

.chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  flex-shrink: 0;
  margin-top: 2px;
}
.chip--trap  { background: var(--brick-pale); color: var(--brick); }
.chip--score { background: var(--teal-pale);  color: var(--teal); }
.chip--trans { background: var(--surface-2);  color: var(--ink-2); }

.sol-more {
  padding: 20px 24px;
  background: var(--surface-2);
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.7;
}

/* ====================== PDF 미리보기 ======================== */

.thumb {
  background: var(--surface);
  border: 1px solid var(--border);
  height: 230px;
  padding: 14px;
}
.thumb__cap { font-size: 12px; color: var(--ink-2); text-align: center; margin-top: 7px; }
.bar     { background: var(--thumb); height: 6px; margin-bottom: 5px; }
.block   { background: var(--thumb-2); }
.spec {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink);
}

/* ====================== 구조 비교 도식 ====================== */

.flow-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px 24px;
}
.flow-panel--bad  { border-left: 5px solid var(--brick); }
.flow-panel--good { border-left: 5px solid var(--teal); }
.flow-head { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; flex-wrap: wrap; }
.flow-chip {
  color: var(--ink-inv);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  letter-spacing: 0.3px;
}
.flow-chip--bad  { background: var(--brick); }
.flow-chip--good { background: var(--teal); }
.flow-row { display: flex; align-items: stretch; gap: 9px; }
.flow-box {
  flex-grow: 1;
  background: var(--surface-3);
  border: 1px solid var(--border);
  padding: 13px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flow-box--bad   { background: var(--brick-pale); border-color: var(--brick-pale-bd); }
.flow-box--good  { background: var(--teal-pale);  border-color: var(--teal-pale-bd); }
.flow-box--exit  { border-style: dashed; border-color: var(--border-2); }
.flow-box__name  { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.flow-box--good .flow-box__name { color: var(--teal); }
.flow-box--exit .flow-box__name { color: var(--ink-2); }
.flow-box__note  { font-size: 11.5px; color: var(--ink-2); margin-top: 3px; }
.flow-arrow { display: flex; align-items: center; flex-shrink: 0; }
.stat-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.stat-chip { padding: 8px 14px; font-size: 13px; color: var(--ink); }
.stat-chip--bad  { background: var(--brick-pale); }
.stat-chip--good { background: var(--teal-pale); }

/* ========================= 푸터 ============================= */

.site-footer { background: var(--ink); padding: 26px 24px; }
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.site-footer__text { font-size: 12.5px; color: var(--ink-inv-2); line-height: 1.7; }

/* ============ 프로토타입 전용 (실제 사이트에는 없음) ========= */

.proto-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  background: var(--ink);
  color: var(--ink-inv);
  border: none;
  font-family: var(--font-kr);
  font-size: 12.5px;
  font-weight: 500;
  padding: 11px 15px;
  min-height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 2px 10px rgba(31, 36, 41, 0.28);
}
.proto-toggle:hover { background: #343A41; }
.proto-toggle__dot {
  width: 9px;
  height: 9px;
  background: var(--gold);
  flex-shrink: 0;
}
.proto-toggle[aria-pressed="false"] .proto-toggle__dot { background: #6E7781; }

/* 좁은 화면 */
@media (max-width: 760px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .role-row { grid-template-columns: minmax(0, 1fr); }
  .quiz-grid { grid-template-columns: minmax(0, 1fr); }
  .cta { flex-direction: column; align-items: stretch; }
  .site-nav__links { gap: 14px; }
  .site-nav__inner { height: auto; padding: 12px 0; flex-direction: column; gap: 10px; }
  .flow-row { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); align-self: center; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
}