/* ===========================================================
   기출 101 — site.css (prompt 045)
   Loaded after the prototype's styles.css (copied unchanged). Adds what the generated pages need: the inline
   classes of the YAML content (same meaning as in the PDF), concept blocks, questions, the "광고" label,
   footer links, and the mobile rules (no horizontal scroll at 360px, 44px tap targets).
   =========================================================== */

/* ------------------------------------------------ inline content classes (as in worksheet.css) */
.en { font-family: var(--font-en); }
.ko { font-family: var(--font-kr); font-size: 13.5px; color: var(--ink-2); }
.u { text-decoration: underline; text-underline-offset: 2px; }
.o { color: var(--teal-mid); font-weight: 700; }
.x, .arrow { color: var(--brick); font-weight: 700; }
.gray { color: var(--ink-2); }
mark { background: var(--marker); color: inherit; padding: 0 2px; }
s { color: var(--ink-2); }
.blank { display: inline-block; min-width: 64px; border-bottom: 1.5px solid var(--ink); height: 1em; vertical-align: -2px; }
.blank--w { min-width: 96px; }
.blank--l { min-width: 128px; }
.blank--xl { min-width: 168px; }
.blank--full { display: block; min-width: 0; width: 100%; height: 1.6em; }
.eg .ko, .quiz-item .ko { font-size: 13px; }
.tr { color: var(--ink-2); }

/* ------------------------------------------------ page headers */
.page-head { padding: 28px 32px; }
.page-head h1 { margin: 0 0 10px; font-size: 30px; font-weight: 900; letter-spacing: -0.8px; line-height: 1.3; }
.page-head p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }
.page-head--unit { display: flex; gap: 26px; align-items: flex-start; }
.page-head--split { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.page-head--split h1 { margin: 0; }
.goal { font-size: 13.5px; line-height: 1.6; }

/* ------------------------------------------------ concept blocks */
.c-p { margin: 12px 0; font-size: 15px; line-height: 1.85; }
.c-ex { margin: 10px 0; padding: 12px 18px; background: var(--surface); border: 1px solid var(--border); line-height: 1.9; }
.c-item { margin-top: 26px; }
.c-box { margin: 12px 0; padding: 14px 18px; font-size: 14.5px; line-height: 1.8; }
.c-box h4 { margin: 0 0 6px; font-size: 14.5px; }
.c-box ol { margin: 6px 0 0; padding-left: 20px; }
.c-box--warn { background: var(--brick-pale); border-left: 4px solid var(--brick); }
.c-box--warn h4 { color: var(--brick); }
.c-box--tip { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--teal); }
.c-box--tip h4 { color: var(--teal); }
.c-box__label { display: inline-block; background: currentColor; margin-right: 8px; }
.c-box__label span { color: var(--ink-inv); font-size: 11px; padding: 2px 7px; display: inline-block; }
.role-row--3 { grid-template-columns: 150px 150px minmax(0, 1fr); }
.role-note { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }
.verb-box .en { font-size: 15px; line-height: 1.75; }
.check-list { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.95; }
.ins { font-size: 13.5px; color: var(--ink-2); margin: 8px 0 12px; }

/* ------------------------------------------------ questions (samples and answers) */
.q { background: var(--surface); border: 1px solid var(--border); padding: 18px 22px; margin-top: 12px; }
.q__head { display: flex; gap: 10px; align-items: baseline; font-size: 15px; font-weight: 700; line-height: 1.6; }
.q__no { color: var(--teal-mid); font-weight: 900; font-size: 18px; flex-shrink: 0; }
.q__lv { font-size: 11px; font-weight: 700; padding: 2px 6px; border: 1px solid var(--teal-pale-bd); color: var(--teal); flex-shrink: 0; }
.q__pts { color: var(--gold-ink); font-weight: 700; }
.q__box { margin: 12px 0 0; padding: 12px 16px; border: 1px solid var(--border); background: #FFFDF8; line-height: 1.85; }
.q__box--en { font-family: var(--font-en); font-size: 15.5px; }
.q__label { font-size: 12px; font-weight: 700; color: var(--teal-mid); margin-bottom: 4px; font-family: var(--font-kr); }
.q__opts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: 15px; }
.q__opts--one { grid-template-columns: minmax(0, 1fr); }
.q__opts--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.q__opts--en { font-family: var(--font-en); }
.q__resp { margin-top: 12px; line-height: 2; font-size: 15px; }
.q__resp.en { font-size: 15.5px; }
table.q__table { border-collapse: collapse; margin-top: 12px; font-size: 14px; width: 100%; }
table.q__table th, table.q__table td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; }
table.q__table th { background: #EFEADF; }

/* ------------------------------------------------ answers */
.sol__head .pts { font-family: var(--font-kr); font-size: 12px; color: var(--gold-ink); margin-left: 6px; }
.sol__lesson { font-family: var(--font-kr); font-size: 11.5px; color: var(--ink-2); font-weight: 500; margin-left: 6px; }
.sol--group { background: var(--surface-2); }
.sol--group .sol__head { color: var(--teal); font-family: var(--font-kr); }
.note-sm { font-size: 13px; color: var(--ink-2); line-height: 1.7; margin: 10px 0 0; }
.chip--strat { background: var(--gold-pale); color: var(--gold-ink); }

/* ------------------------------------------------ ad slots: always labelled 광고 */
.ad-wrap { margin: 34px 0; }
.ad-slot__label { font-size: 11.5px; letter-spacing: 1px; }

/* ------------------------------------------------ PDF page */
.thumb-img { display: block; width: 100%; height: auto; border: 1px solid var(--border); background: var(--surface); }
.dl-panel { text-align: center; }
.dl-file { font-size: 13px; color: var(--ink-2); margin-top: 14px; overflow-wrap: anywhere; }
.types-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); }
.types-table th, .types-table td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; }
.types-table th { background: #EFEADF; font-weight: 700; }
.types-table td.num { text-align: right; white-space: nowrap; }

/* ------------------------------------------------ lists of units / books */
.unit-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.unit-row { background: var(--surface); border: 1px solid var(--border); padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.unit-row__title { font-size: 15px; font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.unit-row__links { display: flex; gap: 6px; flex-shrink: 0; }
.unit-row__links a, .pill { font-size: 12.5px; text-decoration: none; border: 1px solid var(--border); padding: 0 10px; min-height: 44px; display: inline-flex; align-items: center; background: var(--surface-2); }
.soon { font-size: 12.5px; color: var(--ink-2); }
.card-link { min-height: 44px; }
.prose { font-size: 15px; line-height: 1.9; }
.prose h2 { font-size: 19px; margin: 28px 0 8px; }
.prose ul, .prose ol { padding-left: 22px; }

/* ------------------------------------------------ nav and footer */
.site-nav__links a, .nav-soon { min-height: 44px; display: inline-flex; align-items: center; }
.nav-soon { color: var(--teal-dim); font-size: 13px; opacity: 0.8; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-footer__links a { color: var(--ink-inv-2); font-size: 12.5px; min-height: 44px; display: inline-flex; align-items: center; }
.breadcrumb a { display: inline-block; padding: 6px 0; }

/* ------------------------------------------------ narrow screens */
@media (max-width: 760px) {
  .site-nav__inner { flex-direction: row; height: auto; padding: 4px 0; gap: 12px; }
  .site-nav__brand { flex-shrink: 0; }
  .page-body { padding: 16px 14px 48px; }
  .page-head { padding: 20px 18px; }
  .page-head h1 { font-size: 24px; }
  .page-head--unit { gap: 14px; }
  .unit-badge { width: 62px; }
  .unit-badge__num { font-size: 30px; }
  .panel--pad, .panel--pad-lg { padding: 18px; }
  .cta { padding: 22px 18px; }
  .btn--teal { padding: 17px 24px; font-size: 16px; }
  .unit-list { grid-template-columns: minmax(0, 1fr); }
  .unit-row { flex-wrap: wrap; }
  .q { padding: 14px 14px; }
  .q__opts, .q__opts--three { grid-template-columns: minmax(0, 1fr); }
  .role-row--3 { grid-template-columns: minmax(0, 1fr); }
  .sol { padding: 14px 16px; }
  .site-nav { padding: 0 14px; }
  .site-nav__links { flex-wrap: nowrap; gap: 0 14px; }
  .nav-soon--hide-sm { display: none; }   /* 준비 중 items: desktop only, so the mobile nav is one row (046) */
  .site-footer { padding: 22px 14px; }
  .c-ex, .q__box { overflow-wrap: anywhere; }
}