/* ===========================================================
   기출 101 — site.css (design v2, prompt 049)
   The one stylesheet of the website (copied to /assets/site.css). Benchmark: 내신코치's structure, proportions and
   whitespace; no copied assets. Palette 60-30-10: white/#F7F8FA ground, deep navy for dark blocks and primary
   buttons, a highlighter yellow accent used only as a background behind dark text. Grading red only for answer
   marks. No gradients except the highlighter's hard stop and the notebook ruling; corners 0–4px.
   Font: Pretendard (self-hosted, OFL; /assets/fonts/pretendard/).
   =========================================================== */

:root {
  /* ground (60) */
  --bg:          #FFFFFF;
  --bg-2:        #F7F8FA;
  --tint:        #EEF2F9;     /* hero and preview panels */
  --line:        #E6E8EC;
  --line-2:      #D5DAE3;     /* inactive chips, paper edges */
  --line-3:      #C9CFDA;
  /* text */
  --ink:         #1F2329;
  --ink-2:       #4B515C;
  --muted:       #80858F;
  --faint:       #9AA0AA;     /* inactive tabs, dates (large text or non-essential only) */
  --ink-inv:     #FFFFFF;
  --ink-inv-2:   #C7D0E6;
  /* navy (30) */
  --navy-deep:   #0F1E46;     /* dark blocks, primary buttons, footer band */
  --navy:        #1F3C88;     /* links, active tab, chips, eyebrows */
  --navy-pale:   #E9EEF8;
  --navy-pale-bd:#C5D0E8;
  /* accent (10): highlighter, background only */
  --hl:          #FFE94A;
  --hl-pale:     #FFF8CC;
  /* semantic: grading red, answer marks only */
  --red:         #C8102E;
  /* ruling */
  --rule-40: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, rgba(31, 60, 136, 0.08) 39px, rgba(31, 60, 136, 0.08) 40px);
  --rule-32: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(31, 60, 136, 0.07) 31px, rgba(31, 60, 136, 0.07) 32px);
  /* fonts */
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  --wrap: 1200px;
}

/* =========================================================== base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); letter-spacing: -0.3px;
       -webkit-font-smoothing: antialiased; line-height: 1.6;
       word-break: keep-all; overflow-wrap: break-word; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--navy-deep); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
h1, h2, h3 { letter-spacing: -0.6px; }
img { max-width: 100%; }
.wrap { max-width: var(--wrap); margin: 0 auto; }
.page-body { padding: 28px 24px 72px; }
.hl-mark, mark { background: linear-gradient(transparent 55%, var(--hl) 55%); color: inherit; padding: 0 2px; }
.mono { font-family: var(--font-mono); }

/* =========================================================== notice bar */
.notice { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.notice__in { max-width: 1200px; margin: 0 auto; padding: 0 24px; min-height: 38px; display: flex; align-items: center;
              justify-content: space-between; gap: 16px; font-size: 13px; }
.notice__msg { display: flex; gap: 14px; align-items: center; min-width: 0; }
.notice__label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--navy); letter-spacing: 0.6px;
                 font-variant: small-caps; flex-shrink: 0; }
.notice__msg a { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.notice__links { display: flex; gap: 12px; color: var(--muted); flex-shrink: 0; align-items: center; }
.notice__links a { color: var(--muted); }

/* =========================================================== header */
/* U144: the top menu by field. Navy bar, 64px on a PC; each field carries its colours as inline --c / --bg / --light (home_fields.tvars): the dot and
   the current-page line use --light (readable on navy), the panel's head box uses --bg and --c. >= 900px: drop-down panels under the bar;
   below 900px: a 56px bar, the fields in a 3 x 2 row (.frow) and a full-screen menu panel (.mm). menu.js adds the behaviour; without it the
   drop-down fields are plain links to /all/#<id> and the menu button is a link to the footer. */
.hdr { position: relative; z-index: 20; background: var(--navy-deep); color: #fff; }
.hdr__in { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 24px; }
.hdr :focus-visible { outline: 2px solid #FFE94A; outline-offset: -2px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; }
.brand img { display: block; height: 32px; width: auto; }
.brand:hover { text-decoration: none; }
.menu { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; height: 64px; gap: 2px; }
.mf { display: flex; }
.mf__a { height: 64px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap;
         box-shadow: inset 0 -3px 0 transparent; }
.mf__a:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.08); }
.mf__a[aria-current], .mf.is-open > .mf__a { box-shadow: inset 0 -3px 0 var(--light); }
.mf__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--light); }
.mf__chev { font-size: 11px; opacity: 0.8; }
.mf__a--soon { color: #9AA6C4; cursor: default; }
.mf__a--soon:hover { color: #9AA6C4; background: none; }
.mf__a--soon .mf__dot { opacity: 0.5; }
.mf__pill { font-size: 11px; font-weight: 700; line-height: 1.5; color: var(--navy-deep); background: #C9D3E8; border-radius: 999px; padding: 1px 7px; }
.hdr__all { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 8px; background: #FFE94A; color: var(--navy-deep);
            font-size: 14px; font-weight: 800; white-space: nowrap; }
.hdr__all:hover { color: var(--navy-deep); text-decoration: none; background: #FFF08A; }
.menu-btn, .frow, .mm { display: none; }
/* the drop-down panel: white, full width under the bar, the content width inside */
.mp { position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 14px 30px rgba(15, 30, 70, 0.12); }
.mp[hidden] { display: none; }
.mp__in { max-width: 1200px; margin: 0 auto; padding: 18px 24px 22px; display: flex; align-items: flex-start; gap: 32px; }
.mp__head { flex: 0 0 220px; padding: 14px 16px; border-radius: 12px; background: var(--bg); }
.mp__head b { display: block; font-size: 18px; font-weight: 900; color: var(--c); }
.mp__head p { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.mp__head a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--c); }
.mp__list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 16px; }
.mp__list a { display: block; min-height: 52px; padding: 8px 12px; border-radius: 10px; border: 1px solid #F1F2F4; color: var(--ink); }
.mp__list a:hover { background: var(--bg-2); text-decoration: none; }
.mp__list b { display: block; font-size: 15px; color: var(--navy-deep); }
.mp__list span { font-size: 12.5px; color: var(--ink-2); }
/* a PC just under 900px: shrink the gaps first */
@media (max-width: 1000px) { .hdr__in { gap: 14px; } .mf__a { padding: 0 8px; gap: 6px; font-size: 14.5px; } }

/* U144: below 900px the header is the phone header: bar (logo, 전체 보기, menu button), the fields in a 3 x 2 row, and the menu panel */
@media (max-width: 899px) {
  .hdr { z-index: auto; }                                       /* no stacking context: the fixed panel (.mm) must cover the whole page */
  .hdr__in { height: 56px; padding: 0 8px 0 16px; gap: 10px; }
  .brand img { height: 26px; }
  .menu { display: none; }
  .hdr__all { margin-left: auto; min-height: 44px; padding: 0 12px; font-size: 13px; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #fff; }
  .menu-btn:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.08); }
  .frow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .frow__a { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 4px; color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap;
             border-right: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 -3px 0 transparent; }
  .frow__a:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.08); }
  .frow__a[aria-current] { box-shadow: inset 0 -3px 0 var(--light); }
  .frow__a--soon { color: #9AA6C4; }
  .frow__a--soon .mf__dot { opacity: 0.5; }
  .mm:not([hidden]) { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: #fff; color: var(--ink); }
  .mm__top { flex: 0 0 56px; height: 56px; display: flex; align-items: center; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); }
  .mm__title { flex: 1 1 auto; font-size: 18px; font-weight: 900; color: var(--navy-deep); }
  .mm__x { width: 44px; height: 44px; border: 0; background: transparent; color: var(--navy-deep); font: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
  .mm__body { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; padding: 6px 12px 12px; }
  .mm__f { border-bottom: 1px solid #F1F2F4; }
  .mm__row { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 6px; border: 0; background: transparent; font: inherit; font-size: 17px; font-weight: 800;
             color: var(--navy-deep); text-align: left; cursor: pointer; }
  .mm__row:hover { color: var(--navy-deep); text-decoration: none; }
  .mm__row i { font-style: normal; color: var(--ink-2); }
  .mm__dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: var(--c); }
  .mm__name { flex: 1 1 auto; }
  .mm__chev { color: var(--ink-2); display: inline-block; }
  .mm__row[aria-expanded="true"] .mm__chev { rotate: 180deg; }
  .mm__row--off { color: #6B7280; cursor: default; }
  .mm__row--off .mm__dot { opacity: 0.45; }
  .mm__pill { font-size: 12px; font-weight: 700; color: var(--ink-2); background: #F1F2F4; border-radius: 999px; padding: 2px 9px; }
  .mm__subs { margin: 0 0 10px 26px; padding: 4px; border-radius: 10px; background: var(--bg); }
  .mm__subs[hidden] { display: none; }
  .mm__subs a { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 8px; color: var(--ink); font-size: 15px; font-weight: 600; }
  .mm__subs a:hover { text-decoration: none; background: rgba(255, 255, 255, 0.6); }
  .mm__subs i { font-style: normal; color: var(--ink-2); }
  .mm__foot { flex: 0 0 auto; padding: 12px 16px 20px; border-top: 1px solid var(--line); }
  .mm__foot a { min-height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--navy-deep); color: #fff; font-weight: 800; }
  .mm__foot a:hover { color: #fff; text-decoration: none; }
  .mm :focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
}
html.mm-open { overflow: hidden; }

/* =========================================================== footer */
.foot { border-top: 1px solid var(--line); background: var(--bg-2); margin-top: 0; }
.foot__in { max-width: 1200px; margin: 0 auto; padding: 32px 24px 40px; display: flex; justify-content: space-between; gap: 16px;
            flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.foot__col { display: flex; flex-direction: column; gap: 8px; }
.foot__brand { display: inline-flex; align-self: flex-start; min-height: 44px; align-items: center; margin-bottom: 4px; }
.foot__brand img { display: block; height: 46px; width: auto; }   /* the letters 기출 101 ≈ 34px tall */
.page-mark { margin: 6px 0 18px; }
.page-mark img { display: block; height: 64px; width: auto; }
/* the loader behind preview images (052): the image covers it once loaded; with JS it also fades in */
.has-loader { position: relative; color: var(--navy); }
.has-loader > .loader { position: absolute; left: 50%; top: 50%; width: 66px; height: 35px; transform: translate(-50%, -50%); }
.has-loader > img { position: relative; z-index: 1; transition: opacity 0.25s ease; }
.js .has-loader > img:not([data-loaded]) { opacity: 0; }
.row__thumb > .loader { width: 30px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .has-loader > img { transition: none; } }
.foot__links { display: flex; gap: 4px 20px; flex-wrap: wrap; }
.foot__links a { color: var(--ink-2); min-height: 44px; display: inline-flex; align-items: center; }
.foot__links a.foot__privacy { color: var(--ink); font-weight: 700; }
/* U110: footer columns 영어 / 수학 (from published pages) */
.foot__cols { display: flex; gap: 8px 48px; flex-wrap: wrap; }
.foot__links--col { flex-direction: column; gap: 0; }
.foot__col-title { font-weight: 800; color: var(--ink); font-size: 14px; padding: 8px 0 4px; }

/* =========================================================== buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; font-weight: 700;
       text-decoration: none; border-radius: 2px; box-sizing: border-box; font-family: inherit; }
.btn:hover { text-decoration: none; }
.btn--navy { background: var(--navy-deep); border: 1px solid var(--navy-deep); color: var(--ink-inv); font-size: 16px; height: 56px; padding: 0 26px; }
.btn--navy:hover { background: var(--navy); border-color: var(--navy); color: var(--ink-inv); }
.btn--outline { background: var(--bg); border: 1px solid var(--ink); color: var(--ink); font-size: 16px; height: 56px; padding: 0 26px; }
.btn--outline:hover { background: var(--bg-2); color: var(--ink); }
.btn--sm { height: 50px; font-size: 15px; padding: 0 22px; }
.btn--lg { height: 60px; font-size: 18px; padding: 0 40px; }
.btn__tag { font-family: var(--font-mono); font-size: 11px; background: var(--navy); color: var(--ink-inv); padding: 2px 5px; }
.pill { font-size: 13.5px; border: 1px solid var(--line-3); padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center;
        background: var(--bg); color: var(--navy); border-radius: 2px; font-weight: 600; }
.pill:hover { background: var(--bg-2); text-decoration: none; }

/* =========================================================== home: hero */
.ruled { position: relative; overflow: hidden; }
.ruled::before { content: ""; position: absolute; inset: 0; background-image: var(--rule-40); pointer-events: none; }
.ruled--32::before { background-image: var(--rule-32); }
.ruled > * { position: relative; }
.hero { background: var(--tint); }
.hero__in { max-width: 1200px; margin: 0 auto; padding: 72px 24px 64px; display: flex; gap: 48px; align-items: center; }
.hero__text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.hero h1 { margin: 0; font-size: 46px; line-height: 1.32; font-weight: 900; letter-spacing: -1.2px; color: var(--navy-deep); }
.hero h1 .hero__sub { display: block; font-weight: 700; color: var(--ink); }
.hero p { margin: 0; font-size: 18px; line-height: 1.7; color: var(--ink-2); max-width: 560px; }
.hero__paper { flex: 0 0 360px; position: relative; height: 430px; }
/* U115: 새 소식 panel in place of the PDF picture (config home.news); static, no JavaScript */
.news { flex: 0 0 380px; min-width: 0; background: var(--bg); border: 1px solid var(--line); padding: 20px 20px 12px; }
.news h2 { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--navy-deep); letter-spacing: -0.2px; }
.news__list { list-style: none; margin: 0; padding: 0; }
.news__list li + li { border-top: 1px solid var(--line); }
.news__item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px 4px; color: var(--ink); }
.news__item:hover { text-decoration: none; background: var(--bg-2); }
.news__item:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.news__item--main { padding: 16px 4px; }
.news__tag { flex-shrink: 0; align-self: flex-start; margin-top: 2px; min-width: 52px; text-align: center; background: var(--navy-deep); color: var(--ink-inv); font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 2px; }
.news__item--main .news__tag { background: var(--hl); color: var(--ink); }
.news__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.news__title { font-size: 16px; font-weight: 800; color: var(--navy-deep); letter-spacing: -0.3px; }
.news__item--main .news__title { font-size: 18px; }
.news__text { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.news__arrow { flex-shrink: 0; color: var(--navy); font-weight: 700; }
.paper { background: var(--bg); border: 1px solid var(--line-3); box-shadow: 0 8px 24px rgba(15, 30, 70, 0.12); display: block; }
.paper img { display: block; width: 100%; height: auto; }
.hero__paper .paper--back { position: absolute; left: 40px; top: 22px; width: 280px; height: 396px; transform: rotate(4deg);
                            border-color: var(--line-2); box-shadow: none; }
.hero__paper .paper--front { position: absolute; left: 0; top: 0; width: 290px; }

/* =========================================================== home: highlight band */
.band { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.band__in { max-width: 1200px; margin: 0 auto; padding: 48px 24px; display: flex; gap: 32px; align-items: flex-end; justify-content: space-between; }
.band__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; flex: 1 1 560px; }
.band h2 { margin: 0; font-size: 38px; line-height: 1.35; font-weight: 900; letter-spacing: -1px; color: var(--ink); }
.band h2 mark { padding: 0 4px; }
.chips__label { font-size: 14px; font-weight: 700; color: var(--muted); display: block; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-book { font-size: 15px; font-weight: 700; color: var(--ink-inv); background: var(--navy); padding: 0 16px; min-height: 44px;
             border-radius: 2px; display: inline-flex; align-items: center; border: 1px solid var(--navy); }
.chip-book:hover { background: var(--navy-deep); color: var(--ink-inv); text-decoration: none; }
.band__btns { display: flex; flex-wrap: wrap; flex-shrink: 0; }

/* =========================================================== home: 콘텐츠 소개 (CSS-only tabs) */
.contents { max-width: 1200px; margin: 0 auto; padding: 88px 24px 40px; }
.contents__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.contents__head h2 { margin: 0; font-size: 64px; line-height: 1; font-weight: 900; letter-spacing: -2px; color: var(--ink); }
.tabs { display: flex; gap: 28px; flex-wrap: nowrap; overflow-x: auto; }
.tabs a { font-size: 18px; font-weight: 700; color: var(--faint); border-bottom: 3px solid transparent; padding: 6px 0;
          min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.tabs a:hover { color: var(--navy); text-decoration: none; }
.tab-panel { display: flex; gap: 56px; align-items: center; scroll-margin-top: 24px; }
.tab-panel + .tab-panel { margin-top: 56px; }
.tab-panel__text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.tab-panel__no { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.tab-panel h3 { margin: 0; font-size: 40px; font-weight: 900; letter-spacing: -1px; color: var(--navy-deep); line-height: 1.25; }
.tab-panel p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--ink-2); }
.tab-panel p.tab-panel__tags { font-size: 15px; font-weight: 700; color: var(--ink); }
.tab-panel .btn { align-self: flex-start; margin-top: 10px; }
.tab-panel__img { flex: 1 1 560px; min-width: 0; background: var(--tint); height: 420px; display: flex; align-items: center; justify-content: center; }
.tab-panel__img .paper { width: 270px; }
.qa { background: var(--bg-2); border-left: 3px solid var(--navy); padding: 14px 18px; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.qa b { color: var(--ink); }
.qa p { margin: 0; font-size: inherit; }
.qa p + p { margin-top: 4px; }
/* one panel at a time where :has() exists; otherwise all four stay stacked and readable */
@supports selector(:has(a)) {
  .contents:not(.js-tabs) .tab-panel { display: none; }
  .contents:not(.js-tabs) .tab-panel + .tab-panel { margin-top: 0; }
  .contents:not(.js-tabs):not(:has(.tab-panel:target)) .contents__head + .tab-panel,
  .contents:not(.js-tabs) .tab-panel:target { display: flex; }
  .contents:not(.js-tabs):not(:has(.tab-panel:target)) .tabs a:first-child,
  .contents:not(.js-tabs):has(#c1:target) .tabs a[href="#c1"], .contents:not(.js-tabs):has(#c2:target) .tabs a[href="#c2"],
  .contents:not(.js-tabs):has(#c3:target) .tabs a[href="#c3"], .contents:not(.js-tabs):has(#c4:target) .tabs a[href="#c4"] {
    color: var(--navy); font-weight: 800; border-bottom-color: var(--navy); }
}
/* with JavaScript (050): the script switches panels without scrolling and keeps aria-selected in sync */
.contents.js-tabs .tab-panel { display: none; }
.contents.js-tabs .tab-panel + .tab-panel { margin-top: 0; }
.contents.js-tabs .tab-panel.is-active { display: flex; }
.contents.js-tabs .tabs a[aria-selected="true"] { color: var(--navy); font-weight: 800; border-bottom-color: var(--navy); }

/* =========================================================== rows: 새로 올라온 자료, /exams/ */
.latest { max-width: 1200px; margin: 0 auto; padding: 56px 24px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: 14px; gap: 16px; }
.sec-head h2 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -0.6px; }
.sec-head a { font-size: 14px; color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }
.rows { margin: 0; padding: 0; list-style: none; }
.row { display: flex; gap: 20px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); min-height: 44px; }
.row:hover { background: var(--bg-2); text-decoration: none; color: var(--ink); }
.row__thumb { flex: 0 0 52px; height: 68px; background: var(--bg); border: 1px solid var(--line-3); overflow: hidden; }
.row__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row__kind { font-size: 12px; font-weight: 700; color: var(--navy); }
.row__title { font-size: 17px; font-weight: 700; line-height: 1.45; }
.row__meta { font-size: 13px; color: var(--muted); }
.row__date { font-size: 13px; color: var(--muted); white-space: nowrap; }

/* =========================================================== number band */
.numbers { background: var(--navy-deep); color: var(--ink-inv); }
.numbers__in { max-width: 1200px; margin: 0 auto; padding: 44px 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
.numbers__item { display: flex; flex-direction: column; gap: 6px; }
.numbers strong { font-size: 40px; font-weight: 900; letter-spacing: -1px; line-height: 1.2;
                  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }   /* U118b: the unit drops whole under the number */
.numbers strong small { font-size: 20px; white-space: nowrap; }
.numbers strong .numbers__hl { color: var(--hl); }   /* the only yellow text: on the deep navy band (about 11:1), never on white */
.numbers span.numbers__cap { font-size: 14px; color: var(--ink-inv-2); }
@media (max-width: 900px) { .numbers__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* U118b: 2 × 2 up to 900px */

/* =========================================================== ad slots: always labelled 광고 */
.ad-wrap { margin: 40px 0; }
/* 054: with no ad box (ads off) a section directly under the page header still gets its own space */
.page-head + section { margin-top: 30px; }
/* 054: a box is rendered only with a real AdSense unit in it (site.ads_enabled + site.ad_units); the small 광고 label sits
   above the ad, and min-height (only then) avoids layout shift while the ad loads */
.ad-slot { display: block; }
.ad-slot__label { font-size: 12px; color: var(--faint); letter-spacing: 1px; margin-bottom: 6px; }
.ad-slot .adsbygoogle { min-height: 100px; }
.ad-slot--tall .adsbygoogle { min-height: 160px; }
.ad-slot--mid .adsbygoogle { min-height: 120px; }
.home-ad { max-width: 1200px; margin: 0 auto; padding: 40px 24px; }
/* 153: the home banner (config home.slides; design approved by Jaehyuk 2026-10-24, planning/home_slides/banner_preview.html).
   A photo carousel, 440px tall on a PC (600px on a phone), rounded 16px, in the page's 1200px wrap. Native scroll-snap does
   swipe; home.js adds autoplay, the dots and the arrows. Under 720px the photo moves on top (brand, school) or fills the card
   with the text over its bottom (news, store). Backgrounds are named (config `bg`), never free CSS. */
@font-face { font-family: "Noto Serif KR Brand"; font-weight: 700; font-style: normal; font-display: swap;
             src: url(/assets/fonts/notoserif/noto-serif-kr-700-brand-v4.woff2) format("woff2"); }   /* a subset: only the brand title's glyphs (generator/tools/make_home_assets.py) */
.hb { --hb-serif: "Noto Serif KR Brand", "Noto Serif KR", "Nanum Myeongjo", Batang, serif; --hb-gold: #9A7B3F; --hb-dot: #C5CCD8; padding: 24px 0 0; }
.hb__in { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hb__frame { position: relative; min-width: 0; }
.hb__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 16px; }
.hb__track::-webkit-scrollbar { display: none; }
.hb__slide { flex: 0 0 100%; min-width: 0; min-height: 440px; scroll-snap-align: start; position: relative; overflow: hidden; display: flex; align-items: center; }
.hb__bg--wall { background: linear-gradient(90deg, #EFEDEA 0%, #EFEDEA 45%, #D6D4D1 100%); }
.hb__bg--news { --hb-rgb: 244, 241, 236; background: rgb(var(--hb-rgb)); }
.hb__bg--store { --hb-rgb: 247, 243, 236; background: rgb(var(--hb-rgb)); }
.hb__bg--school { background: linear-gradient(180deg, #D7E8FB 0%, #EAF3FD 55%, #F4EBDB 100%); }
.hb picture { display: block; }
.hb img { max-width: none; }
/* the photo (news, store): on the right, full height; the slide's own colour fades over its left edge */
.hb__slide--photo > picture.hb__photo, .hb__slide--photo > noscript > picture.hb__photo { position: absolute; right: 0; top: 0; height: 100%; z-index: 0; }   /* 157a: the <noscript> copy matches too */
.hb__slide--photo > picture.hb__photo img, .hb__slide--photo > noscript > picture.hb__photo img { display: block; height: 100%; width: auto; }
.hb__slide--photo.hb__bg--news::after, .hb__slide--photo.hb__bg--store::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hb__slide--photo.hb__bg--news::after { background: linear-gradient(90deg, rgb(var(--hb-rgb)) 0%, rgb(var(--hb-rgb)) 52%, rgba(var(--hb-rgb), .7) 58%, rgba(var(--hb-rgb), 0) 68%); }
.hb__slide--photo.hb__bg--store::after { background: linear-gradient(90deg, rgb(var(--hb-rgb)) 0%, rgb(var(--hb-rgb)) 53%, rgba(var(--hb-rgb), .6) 59%, rgba(var(--hb-rgb), 0) 68%); }
/* the school photo: whole (3:2) at the banner's height, its left edge fading into the sky; voices sit over it */
.hb__bg--school > div.hb__photo { position: absolute; right: 0; top: 0; height: 100%; aspect-ratio: 3 / 2; z-index: 0; }
.hb__bg--school > div.hb__photo img { display: block; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
.hb__voice { position: absolute; left: var(--hb-x, 50%); transform: translate(-50%, -100%) rotate(var(--hb-tilt, 0deg)); font-weight: 900; font-size: 27px; white-space: nowrap; color: var(--navy-deep); padding-bottom: 24px; letter-spacing: -0.3px;
  text-shadow: -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff, 3px 0 0 #fff, -3px 0 0 #fff, 0 3px 8px rgba(0, 0, 0, .25); }
.hb__voice::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 56px; height: 22px; transform: translateX(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 18'%3E%3Cg stroke='%23ffffff' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M8 3 L15 14'/%3E%3Cpath d='M22 2 L22 15'/%3E%3Cpath d='M36 3 L29 14'/%3E%3C/g%3E%3Cg stroke='%230F1E46' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8 3 L15 14'/%3E%3Cpath d='M22 2 L22 15'/%3E%3Cpath d='M36 3 L29 14'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; }
/* the brand slide: the two teachers on the right, a pile of three real PDF pages between them and the text */
.hb__people { position: absolute; right: 0; top: 0; height: 100%; z-index: 0; }
.hb__people img { display: block; height: 100%; width: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.hb__pile { position: absolute; left: calc(47% + 12px); top: 80px; width: 200px; height: 283px; z-index: 0; }
.hb__page { position: absolute; left: 0; top: 0; width: 200px; height: auto; border: 1px solid #DDD6CB; box-shadow: 0 14px 30px rgba(15, 30, 70, .18); }
.hb__page--l { transform: translate(-72px, 14px) rotate(-9deg); }
.hb__page--r { transform: translate(72px, 6px) rotate(7deg); }
.hb__page--f { transform: rotate(-1.5deg); }
.hb__text { position: relative; z-index: 2; padding: 56px 56px 84px; max-width: 600px; display: grid; justify-items: start; gap: 12px; }
.hb .hb__title { margin: 2px 0 0; max-width: none; font-family: var(--hb-serif); font-size: 34px; line-height: 1.3; font-weight: 700; letter-spacing: -0.5px; color: var(--navy-deep); word-break: keep-all; text-wrap: balance; }   /* 153a: serif on every slide */
.hb__slide--brand .hb__title { font-size: 36px; margin-top: 4px; }   /* 153c: slide 1 keeps its size */
.hb__slide--brand .hb__text { padding-top: 46px; padding-bottom: 74px; }   /* U131: the keyword line adds 20px; slide 1 keeps its height (440) */
.hb .hb__p { margin: 0; max-width: none; font-size: 17px; line-height: 1.6; color: var(--ink-2); word-break: keep-all; }
.hb__tag { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--navy-deep); color: var(--ink-inv); }   /* 153c: the chips are back on slides 2-4 */
.hb__tag--soon { background: #FFF4D6; color: #8A5A00; border: 1px solid #F0D58A; }
.hb__eyebrow { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 3px; color: var(--hb-gold); }
.hb__eyebrow::after { content: ""; width: 40px; height: 1px; background: var(--hb-gold); }
.hb__btns { display: flex; gap: 10px; margin-top: 10px; }
.hb__btn { margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 20px; border-radius: 10px; background: var(--navy); border: 1px solid var(--navy); color: var(--ink-inv); font-weight: 700; font-size: 15px; }
.hb__btn:hover { text-decoration: none; background: var(--navy-deep); border-color: var(--navy-deep); color: var(--ink-inv); }
.hb__btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.hb__btns .hb__btn { margin-top: 0; }
.hb__slide--brand .hb__btn { border-radius: 2px; background: var(--navy-deep); border-color: var(--navy-deep); }   /* slide 1: square */
.hb__btn--line, .hb__slide--brand .hb__btn--line { background: var(--bg); color: var(--navy-deep); }
.hb__btn--line:hover, .hb__slide--brand .hb__btn--line:hover { background: var(--navy-pale); color: var(--navy-deep); }
.hb__soon { margin-top: 10px; display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border: 1px dashed var(--hb-dot); border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: 15px; letter-spacing: 1.5px; cursor: default; user-select: none; }   /* a label, not a button: no hover, not focusable */
.hb__controls { position: absolute; left: 56px; bottom: 36px; z-index: 3; display: flex; align-items: center; gap: 12px; }
.hb__controls[hidden] { display: none; }
.hb__dots { display: flex; }
.hb__dot { width: 24px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.hb__dot span { width: 8px; height: 8px; border-radius: 50%; background: var(--hb-dot); transition: width .25s; }
.hb__dot[aria-current="true"] span { width: 22px; border-radius: 4px; background: var(--navy); }
.hb__dot:focus-visible, .hb__arrow:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.hb__arrow { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg); color: var(--navy-deep); cursor: pointer; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.hb__arrow:hover { background: var(--bg-2); }
/* U143c: the keyword line under slide 1's title stays inside the <h1> for search engines but is not shown (U131 had made it visible) */
.hb-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the 새 소식 panel, under the carousel */
.hb-news { padding: 24px 0 8px; }
.hb-news__in { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hb-news .news { flex: none; width: 100%; padding-bottom: 8px; }
.hb-news .news__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hb-news .news__list li + li { border-top: 0; border-left: 1px solid var(--line); padding-left: 20px; }
.hb-news .news__list li { padding-right: 20px; }
.hb-news .news__item { height: 100%; align-items: flex-start; }
@media (max-width: 900px) {
  .hb-news .news__list { display: block; }
  .hb-news .news__list li + li { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .hb-news .news__list li { padding-right: 0; }
}
@media (max-width: 719px) {
  .hb { padding-top: 16px; }
  .hb__in { padding: 0 16px; }
  .hb__slide { min-height: 600px; align-items: flex-end; }
  .hb__text { padding: 0 20px 84px; max-width: none; gap: 8px; }
  .hb .hb__title { font-size: 23px; }
  .hb__slide--brand .hb__title { font-size: 25px; }
  .hb__slide--brand .hb__text { padding-top: 0; padding-bottom: 76px; }   /* U131: the keyword line (2 lines here) adds 8px; slide 1 keeps its height (600) */
  .hb .hb__p { font-size: 15px; }
  .hb__btn, .hb__soon { height: 42px; }
  .hb__btn, .hb__soon, .hb__btns .hb__btn { margin-top: 6px; }
  .hb__btns .hb__btn { margin-top: 0; }
  .hb__btns { margin-top: 6px; }
  .hb__slide--brand .hb__btn { padding: 0 16px; font-size: 14px; }
  .hb__controls { left: 20px; bottom: 22px; }
  .hb-pc { display: none; }
  /* news, store: the photo fills the card's top (focus = its horizontal crop); the slide's colour fades up over its bottom */
  .hb__slide--photo > picture.hb__photo, .hb__slide--photo > noscript > picture.hb__photo { left: 0; right: 0; height: 380px; }
  .hb__slide--photo > picture.hb__photo img, .hb__slide--photo > noscript > picture.hb__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hb-focus, 50%) 0; }
  .hb__slide--photo.hb__bg--news::after { background: linear-gradient(180deg, rgba(var(--hb-rgb), 0) 0%, rgba(var(--hb-rgb), 0) 44%, rgba(var(--hb-rgb), .88) 60%, rgb(var(--hb-rgb)) 68%) }
  .hb__slide--photo.hb__bg--store > picture.hb__photo, .hb__slide--photo.hb__bg--store > noscript > picture.hb__photo { height: 330px; }   /* 153b, kept by 153c: a shorter photo, and the fade starts higher, so the chip and the title sit on the plain background */
  .hb__slide--photo.hb__bg--store::after { background: linear-gradient(180deg, rgba(var(--hb-rgb), 0) 0%, rgba(var(--hb-rgb), 0) 34%, rgba(var(--hb-rgb), .85) 46%, rgb(var(--hb-rgb)) 54%) }
  /* brand: the teachers + page pile picture on top, the text below on the wall colour */
  .hb__bg--wall { background: #EFEDEA; }
  .hb__slide--brand { flex-direction: column; align-items: stretch; }
  .hb__people { position: static; height: auto; }
  .hb__people img { width: 100%; height: 219px; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; }   /* U131c: the height of the 3:2 photo at 360 px, fixed, so slide 1 stays 600 from 360 to 430 px */
  .hb__pile { display: none; }
  .hb__slide--brand .hb__text { padding-top: 18px; }
  /* school: the whole photo on top, the text below */
  .hb__bg--school { flex-direction: column; align-items: stretch; }
  .hb__bg--school > div.hb__photo { position: relative; right: auto; top: auto; width: 100%; height: auto; }
  .hb__bg--school > div.hb__photo img { height: auto; -webkit-mask-image: none; mask-image: none; }
  .hb__bg--school .hb__text { padding-top: 18px; }
  .hb__voice { left: var(--hb-xm, var(--hb-x, 50%)); font-size: 15px; padding-bottom: 13px; text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff; }
  .hb__voice::after { width: 34px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) { .hb__dot span { transition: none; } }
.numbers__n { font-variant-numeric: tabular-nums; }
/* U123: scroll reveal on every home block (home.js adds .rv only after it runs, so with no JavaScript, an error, no
   IntersectionObserver or reduced motion nothing is ever hidden). Only opacity and transform change. */
.rv { opacity: 0; transform: translateY(24px); }
.rv--in { opacity: 1; transform: none;
          transition: opacity 600ms cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0ms), transform 600ms cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0ms); }
@media (max-width: 760px) { .rv { transform: translateY(16px); } }
.hub-sec[id] { scroll-margin-top: 16px; }
/* 157: home 문제 PDF section (above 「콘텐츠 소개」): three real pages of one unit as a fanned bundle. The end state is the default (no
   JavaScript, reduced motion); home.js adds .pdfsec--pre (the bundle and the chips are folded) while the section is below the fold and
   .pdfsec--go when it scrolls into view: the bundle rises and the two back pages fan out (1.5 s, ease-out), then the chips fade in. */
.pdfsec { padding: 40px 0 8px; }
.pdfsec__in { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: center; }
.pdfsec__in { background: var(--tint); border-radius: 20px; max-width: 1152px; padding: 56px 64px; box-sizing: border-box; }
.pdfsec__text { display: grid; gap: 14px; justify-items: start; }
.pdfsec__eyebrow { font-size: 15px; font-weight: 800; color: var(--navy); }
.pdfsec__title { margin: 0; font-size: 40px; line-height: 1.3; font-weight: 800; letter-spacing: -0.8px; color: var(--navy-deep); word-break: keep-all; }
.pdfsec__p { margin: 0; font-size: 18px; line-height: 1.7; color: var(--ink-2); max-width: 520px; }
.pdfsec__chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; transition: opacity .6s ease-out 1.3s; }
.pdfsec__chips li { padding: 8px 18px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line-2); color: var(--navy); font-weight: 800; font-size: 15px; }
.pdfsec__link { font-weight: 800; color: var(--navy); min-height: 44px; display: inline-flex; align-items: center; }
.pdfsec__bundle { position: relative; aspect-ratio: 1.45 / 1; min-width: 0; }
.pdfsec__page { position: absolute; display: block; height: auto; max-width: none; border: 1px solid #DDD6CB; box-shadow: 0 14px 34px rgba(15, 30, 70, .2); background: #FBF7EF;
                transition: transform 1.5s cubic-bezier(.16, .84, .3, 1), opacity .5s ease-out; }
.pdfsec__page--front { left: 28%; top: 3%; width: 44%; z-index: 3; transform: rotate(-0.8deg); }
.pdfsec__page--left { left: 3%; top: 12%; width: 35%; z-index: 1; transform: rotate(-7deg); }
.pdfsec__page--right { right: 1%; top: 2%; width: 35%; z-index: 2; transform: rotate(6deg); }
.pdfsec__tag { position: absolute; z-index: 4; padding: 6px 16px; border-radius: 999px; background: var(--navy); color: var(--ink-inv); font-weight: 800; font-size: 14px; white-space: nowrap; transition: opacity .6s ease-out 1.3s; }
.pdfsec__tag--left { left: 9%; top: 24%; }
.pdfsec__tag--right { right: 2%; top: 14%; }
.pdfsec__tag--front { left: 41%; bottom: 0; }
.pdfsec--pre .pdfsec__page--front { transform: translateY(46px) rotate(-0.8deg); opacity: 0; }
.pdfsec--pre .pdfsec__page--left { transform: translate(34%, 6%) rotate(0deg); opacity: 0; }
.pdfsec--pre .pdfsec__page--right { transform: translate(-34%, 6%) rotate(0deg); opacity: 0; }
.pdfsec--pre .pdfsec__chips, .pdfsec--pre .pdfsec__tag { opacity: 0; transition: none; }
@media (max-width: 860px) {
  .pdfsec { padding-top: 28px; }
  .pdfsec__in { grid-template-columns: minmax(0, 1fr); padding: 32px 22px 28px; gap: 24px; border-radius: 16px; }
  .pdfsec__title { font-size: 28px; }
  .pdfsec__p { font-size: 15.5px; }
  .pdfsec__tag { font-size: 12.5px; padding: 5px 12px; }
}
@media (prefers-reduced-motion: reduce) { .pdfsec__page, .pdfsec__chips, .pdfsec__tag { transition: none; } }

/* U133 / U133b: home story block (.hstory): the tint panel of .pdfsec; text left, cards right (option B: one big card + up to three rows);
   the link is its own grid item so it sits under the text on PC and is a full-width button on phones. Reused by the next blocks. */
.hstory { padding: 40px 0 8px; }
.hstory__in { max-width: 1152px; margin: 0 auto; padding: 52px 56px; box-sizing: border-box; background: var(--tint); border-radius: 20px; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); grid-template-areas: "text cards" "link cards"; column-gap: 48px; row-gap: 0; align-items: center; }
.hstory__text { grid-area: text; align-self: end; display: grid; gap: 14px; justify-items: start; }
.hstory__eyebrow { font-size: 15px; font-weight: 800; color: var(--navy); }
.hstory__title { margin: 0; font-size: 36px; line-height: 1.3; font-weight: 800; letter-spacing: -0.8px; color: var(--navy-deep); word-break: keep-all; }
.hstory__p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink-2); max-width: 520px; }
.hstory__chips { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 10px; justify-content: start; }
.hstory__chips li { padding: 7px 16px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line-2); color: var(--navy); font-weight: 800; font-size: 14px; }
.hstory__link { grid-area: link; align-self: start; justify-self: start; margin-top: 10px; font-weight: 800; color: var(--navy); min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.hstory__cards { grid-area: cards; display: grid; gap: 12px; min-width: 0; }
.hstory__big, .hstory__rows { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; min-width: 0; }
.hstory__big { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); color: var(--ink); text-decoration: none; }
.hstory__big:hover, .hstory__row:hover { text-decoration: none; color: var(--ink); }
.hstory__big:hover { border-color: var(--navy); }
.hstory__media { position: relative; display: block; min-height: 220px; background: var(--tint); overflow: hidden; }
.hstory__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.hstory__media--plain { display: flex; align-items: center; justify-content: center; color: var(--navy); font-size: 14px; font-weight: 800; }
.hstory__body { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 20px 22px; min-width: 0; }
.hstory__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hstory__tag { padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--bg); border: 1px solid var(--line-2); color: var(--ink-2); }
.hstory__tag--topic { background: var(--navy-pale); border-color: var(--navy-pale-bd); color: var(--navy); }
.hstory__tag--new { background: var(--hl); border-color: var(--hl); color: var(--ink); }
.hstory__en { font-family: Georgia, "Times New Roman", serif; font-size: 18px; line-height: 1.3; font-weight: 800; color: var(--navy-deep); overflow-wrap: anywhere; }
.hstory__ko { font-size: 15px; line-height: 1.45; font-weight: 700; color: var(--ink); }
.hstory__meta { font-size: 13px; color: var(--muted); }
.hstory__row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 44px; padding: 12px 16px; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); }
.hstory__row:first-child { border-top: 0; }
.hstory__thumb { position: relative; display: block; width: 112px; height: 63px; border-radius: 8px; background: var(--tint); overflow: hidden; }
.hstory__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.hstory__thumb.hstory__media--plain { min-height: 0; font-size: 12px; }
.hstory__rtext { display: grid; gap: 4px; min-width: 0; }
.hstory__rline { font-size: 12px; font-weight: 800; color: var(--navy); }
.hstory__rmd { display: none; }
.hstory__rko { font-size: 15px; line-height: 1.4; font-weight: 700; color: var(--ink); }
.hstory__rdate { font-size: 13px; color: var(--muted); white-space: nowrap; }
@media (max-width: 860px) {
  .hstory { padding-top: 28px; }
  .hstory__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "cards" "link"; row-gap: 22px; padding: 32px 18px 24px; border-radius: 16px; }
  .hstory__text { align-self: auto; }
  .hstory__title { font-size: 28px; }
  .hstory__p { font-size: 15.5px; }
  .hstory__link { align-self: auto; justify-self: stretch; justify-content: center; margin-top: 0; min-height: 48px; border: 1px solid var(--navy); border-radius: 12px; background: var(--bg); }
  .hstory__big { grid-template-columns: minmax(0, 1fr); }
  .hstory__media { min-height: 0; aspect-ratio: 16 / 9; }
  .hstory__body { padding: 16px 18px 18px; }
  .hstory__row { grid-template-columns: 96px minmax(0, 1fr); padding: 12px 14px; }
  .hstory__thumb { width: 96px; height: 54px; }
  .hstory__rko { font-size: 14.5px; }
  .hstory__rlv, .hstory__rdate { display: none; }
  .hstory__rmd { display: inline; }
}

/* U134: three more home story blocks on the .hstory panel: modifiers --dark / --plain / --flip, and the cards of 문제 풀기 (.hq, .hstory__grades),
   중학 수학 (.hm) and 학교별 시험 정보 (.hs). Same geometry as the news block; phones: text, visual, link. */
.hstory--dark .hstory__in { background: var(--navy-deep); }
.hstory--dark .hstory__title { color: var(--ink-inv); }
.hstory--dark .hstory__p { color: var(--ink-inv-2); }
.hstory--dark .hstory__eyebrow { background: var(--hl); color: var(--navy-deep); padding: 2px 8px; border-radius: 4px; }
.hstory--plain .hstory__in { background: var(--bg-2); border: 1px solid var(--line); }
@media (min-width: 861px) {
  .hstory--flip .hstory__in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); grid-template-areas: "cards text" "cards link"; }
  .hstory--solve .hstory__in { grid-template-areas: "cards text"; }
  .hstory--solve .hstory__text { align-self: center; }
}
.hstory__grades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 8px; }
.hstory__grade { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 12px; background: rgba(255, 255, 255, .08); color: var(--ink-inv); text-decoration: none; box-sizing: border-box; }
.hstory__grade:hover { background: rgba(255, 255, 255, .16); color: var(--ink-inv); text-decoration: none; }
.hstory__grade-name { font-size: 15px; font-weight: 800; }
.hstory__grade-n { font-size: 13px; font-weight: 700; color: var(--ink-inv-2); }
.hq { display: block; background: var(--bg); color: var(--ink); border-radius: 14px; padding: 22px 24px 24px; box-shadow: 0 18px 40px rgba(0, 0, 0, .28); text-decoration: none; min-width: 0; }
.hq:hover { color: var(--ink); text-decoration: none; }
.hq > span, .hq__q > span { display: block; }
.hq__top { display: flex !important; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.hq__bar { height: 4px; border-radius: 2px; background: var(--line); margin: 10px 0 18px; overflow: hidden; }
.hq__bar::before { content: ""; display: block; height: 100%; width: var(--hq-p, 5%); background: var(--navy); border-radius: 2px; }
.hq__no { font-size: 13px; font-weight: 800; color: var(--navy); }
.hq__stem { margin: 6px 0 12px; font-size: 17px; line-height: 1.5; font-weight: 800; color: var(--navy-deep); word-break: keep-all; }
.hq__pass { margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); font-family: Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.hq .blank { display: inline-block; min-width: 5em; height: 1em; border-bottom: 1.5px solid var(--ink); vertical-align: -2px; }
.hq .blank.xl, .hq .blank.full { min-width: 8em; }
.hq .nw { white-space: nowrap; }
.hq__opts { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hq__opt { display: flex !important; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 15px; box-sizing: border-box; min-width: 0; }
.hq__opt--on { border: 2px solid var(--navy); background: var(--navy-pale); padding: 7px 11px; }
.hq__cn { font-weight: 800; color: var(--ink-2); }
.hq__ot { overflow-wrap: anywhere; min-width: 0; }
.hq__pill { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--navy-deep); color: var(--ink-inv); font-size: 12px; font-weight: 800; white-space: nowrap; }
.hq__strat { margin-top: 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.hq__strat b { color: var(--navy); font-weight: 800; }
.hm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.hm__card { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; min-width: 0; }
.hm__card:hover { border-color: var(--navy); color: var(--ink); text-decoration: none; }
.hm__page { display: block; margin-bottom: 10px; border: 1px solid #DDD6CB; box-shadow: 0 10px 24px rgba(15, 30, 70, .16); background: #FBF7EF; aspect-ratio: 320 / 453; overflow: hidden; }
.hm__page img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.hm__name { font-size: 17px; font-weight: 800; color: var(--navy-deep); }
.hm__meta { font-size: 13px; font-weight: 700; color: var(--navy); }
.hm__set { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.hs { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; min-width: 0; }
.hs__head { display: flex; justify-content: space-between; gap: 12px; padding: 16px 20px; font-size: 15px; font-weight: 800; color: var(--navy-deep); border-bottom: 1px solid var(--line); }
.hs__grade { color: var(--navy); }
.hs__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 14px 20px; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); }
.hs__row:first-child { border-top: 0; }
.hs__row:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.hs__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hs__short { font-size: 16px; font-weight: 800; color: var(--navy-deep); }
.hs__district { font-size: 13px; color: var(--ink-2); }
.hs__when { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 14px; font-weight: 700; color: var(--ink-2); text-align: right; }
.hs__tag { font-size: 12px; font-weight: 800; color: var(--navy); }
.hs .wiki-nw { white-space: nowrap; }
/* U136: home 한능검 block: 예상문제 set cards (.hh__set) and the 회차별 기출 card (.hh__rounds), each one link */
.hh { display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; min-width: 0; }
.hh:hover { border-color: var(--navy); color: var(--ink); text-decoration: none; }
.hh__set { align-items: center; gap: 20px; padding: 18px 20px; }
.hh__page { flex: none; display: block; width: 96px; border: 1px solid #DDD6CB; box-shadow: 0 8px 18px rgba(15, 30, 70, .16); background: #FBF7EF; aspect-ratio: 320 / 453; overflow: hidden; }
.hh__page img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.hh__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.hh__title { font-size: 17px; line-height: 1.4; font-weight: 800; color: var(--navy-deep); word-break: keep-all; }
.hh__line { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.hh__rounds { flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 22px; }
.hh__next { padding: 3px 10px; border-radius: 6px; background: var(--hl); color: var(--ink); font-size: 15px; font-weight: 800; }
@media (max-width: 860px) {
  .hstory--solve .hstory__in { grid-template-areas: "text" "cards"; }
  .hstory__grades { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .hstory__grade { flex-direction: row; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; }
  .hstory--dark .hstory__link { color: var(--ink-inv); border-color: rgba(255, 255, 255, .5); background: transparent; }
  .hq { padding: 18px 16px 20px; }
  .hq__stem { font-size: 16px; }
  .hq__pass { font-size: 16px; padding: 12px 14px; }
  .hq__opts { grid-template-columns: minmax(0, 1fr); }
  .hq__opt--ph { display: none !important; }
  .hm { gap: 8px; }
  .hm__card { padding: 8px 8px 12px; border-radius: 12px; }
  .hm__page { margin-bottom: 6px; }
  .hm__name { font-size: 14px; }
  .hm__meta { font-size: 11.5px; line-height: 1.35; }
  .hm__set { display: none; }
  .hs__head, .hs__row { padding-left: 16px; padding-right: 16px; }
  .hs__short { font-size: 15px; }
  .hs__when { font-size: 13px; }
}

/* U137: book page numbers row (.bk-nums, 2 x 2 on phones) and 자주 묻는 질문 (.bk-faq, rows split by 1px lines) */
.bk-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 28px; border: 1px solid var(--line); background: var(--bg); }
.bk-nums__cell { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-left: 1px solid var(--line); min-width: 0; }
.bk-nums__cell:first-child { border-left: 0; }
.bk-nums__label { font-size: 12px; color: var(--ink-2); }
.bk-nums__value { font-size: 24px; line-height: 1.25; font-weight: 900; color: var(--navy-deep); letter-spacing: -0.4px; }
.bk-faq__row { padding: 18px 0; border-bottom: 1px solid var(--line); }
.bk-faq__row:first-of-type { padding-top: 16px; }
.bk-faq__q { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 800; color: var(--ink); }
.bk-faq__a { margin: 6px 0 0; font-size: 15px; line-height: 1.75; color: var(--ink-2); }
.bk-faq__list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; font-size: 15px; line-height: 1.75; color: var(--ink-2); }
@media (max-width: 860px) {
  .bk-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-nums__cell:nth-child(odd) { border-left: 0; }
  .bk-nums__cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .bk-nums__cell { padding: 14px 16px; }
  .bk-nums__value { font-size: 20px; }
  .bk-faq__list { grid-template-columns: minmax(0, 1fr); }
}
/* U110: two equal subject cards under the hero (영어 / 수학) */
.subjects { border-bottom: 1px solid var(--line); }
.subjects__in { max-width: 1200px; margin: 0 auto; padding: 36px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.subject-card { border: 1px solid var(--line); background: var(--bg); padding: 26px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.subject-card h3 { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -0.6px; color: var(--navy-deep); }
.subject-card p { margin: 0 0 6px; font-size: 15px; color: var(--ink-2); }
.hub-sec { margin-top: 34px; }
.hub-sec .book-grid, .hub-sec .rows { margin-top: 14px; }
.hub-sec .book-grade-h { margin: 22px 0 10px; font-size: 17px; font-weight: 800; color: var(--navy-deep); }   /* U135 */
.hub-sec .sec-head + .book-grade-h { margin-top: 14px; }
.hub-sec .book-grade-h + .book-grid { margin-top: 0; }
/* U114: math unit landing pages and the hub's 단원별 안내 */
.unit-sem { font-size: 13.5px; font-weight: 700; color: var(--navy); margin: -4px 0 8px; }
.unit-text p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.8; }
.unit-terms { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.unit-terms li { border: 1px solid var(--line); background: var(--bg-2); padding: 6px 12px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.unit-list-plain { margin: 14px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.8; }
.unit-rel-h { font-size: 15px; font-weight: 800; margin: 20px 0 6px; }
.unit-rel { list-style: none; margin: 0; padding: 0; }
.unit-rel a { display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--navy); border-bottom: 1px solid var(--line); }
.unit-rel li:last-child a { border-bottom: 0; }
.unit-rel a::before { content: "\00b7"; margin-right: 8px; color: var(--muted); }
@media (min-width: 861px) { .grid-2 > .card-link:only-child.is-next { grid-column: 2; } }
.unit-sem-h { margin: 18px 0 8px; font-size: 15px; font-weight: 800; color: var(--ink-2); }
.unit-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.unit-chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); background: var(--bg); color: var(--navy); font-weight: 700; font-size: 15px; }
.unit-chips a:hover { background: var(--bg-2); text-decoration: none; }
.unit-chips small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.home-ad .ad-wrap { margin: 0; }

/* =========================================================== inner pages: header, sections */
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.breadcrumb a { color: var(--muted); display: inline-block; padding: 6px 0; }
.breadcrumb .sep { color: var(--line-3); margin: 0 7px; }
.page-head { background: var(--tint); padding: 34px 36px; }
.page-head h1 { margin: 0 0 12px; font-size: 32px; font-weight: 900; letter-spacing: -1px; line-height: 1.32; color: var(--navy-deep); }
.page-head h1 .h1-pre { display: block; font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: -0.2px; margin-bottom: 4px; }
.page-head p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.75; }
.page-head p + p { margin-top: 6px; }
.page-head .page-head__note { font-size: 13.5px; color: var(--ink-2); background: var(--bg); border-left: 3px solid var(--navy); padding: 8px 12px; margin-top: 14px; }
.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; }
.eyebrow { font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: 0.2px; margin-bottom: 8px; }
.unit-badge { background: var(--navy-deep); color: var(--ink-inv); width: 78px; flex-shrink: 0; text-align: center; padding: 10px 0 12px; }
.unit-badge__label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.8px; opacity: 0.85; }
.unit-badge__num { font-size: 38px; font-weight: 900; line-height: 1.05; letter-spacing: -1px; }
.h2-sec { margin: 48px 0 0; font-size: 24px; font-weight: 900; color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 12px; }
.h2-sec--sm { font-size: 21px; }
.h2-sec__num { color: var(--navy); margin-right: 9px; }
.h3-sub { margin: 30px 0 12px; font-size: 18px; font-weight: 800; color: var(--navy-deep); display: flex; align-items: center; gap: 9px; }
.label-sm { font-size: 13.5px; font-weight: 700; color: var(--muted); letter-spacing: 0.2px; margin-bottom: 12px; }
/* U125: the 서술형 rule line under an answers page header: footnote-level, not a banner */
.answers-rule { margin: 14px 0 20px; font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }
.note-sm { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; margin: 10px 0 0; }
.goal { font-size: 14px; line-height: 1.6; }
.panel { background: var(--bg); border: 1px solid var(--line); }
.panel--pad { padding: 22px 26px; }
.panel--pad-lg { padding: 28px 32px; }
.panel--pad-sm { padding: 16px 18px; }
.prose { font-size: 15.5px; line-height: 1.9; }
.prose h2 { font-size: 19px; margin: 30px 0 8px; color: var(--navy-deep); }
.prose ul, .prose ol { padding-left: 22px; }
.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; }
.num-badge { background: var(--navy-deep); color: var(--ink-inv); width: 22px; height: 22px; display: inline-flex; align-items: center;
             justify-content: center; font-size: 12.5px; font-weight: 700; flex-shrink: 0; }
.tag-exam { background: var(--navy-deep); color: var(--ink-inv); font-size: 11px; font-weight: 700; padding: 3px 8px; letter-spacing: 0.3px; }
.tag-navy { display: inline-block; background: var(--navy); color: var(--ink-inv); font-size: 11.5px; font-weight: 700; padding: 3px 9px; }

/* cards and file links */
.card-link { background: var(--bg); border: 1px solid var(--line); padding: 16px 18px; display: block; min-height: 44px; color: var(--ink); }
.card-link:hover { background: var(--bg-2); border-color: var(--line-3); text-decoration: none; }
.card-link__kicker { font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.card-link__title { font-size: 15px; font-weight: 700; color: var(--navy); }
.file-link { background: var(--bg); border: 1px solid var(--line); padding: 14px 18px; display: flex; align-items: center;
             justify-content: space-between; gap: 12px; min-height: 44px; color: var(--ink); }
.file-link:hover { background: var(--bg-2); text-decoration: none; }
.file-link__name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.file-link__meta { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.file-link--solid { background: var(--navy-deep); border-color: var(--navy-deep); }
.file-link--solid:hover { background: var(--navy); }
.file-link--solid .file-link__name { color: var(--ink-inv); font-weight: 700; }
@media (max-width: 760px) {   /* U130: a long meta line wraps instead of pushing the row wider than a phone (desktop rows unchanged) */
  .file-link__name { flex: 1 1 auto; min-width: 0; }
  .file-link__meta { flex-shrink: 1; min-width: 0; text-align: right; overflow-wrap: anywhere; }
}
.unit-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.unit-row { background: var(--bg); border: 1px solid var(--line); padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.unit-row__title { font-size: 15.5px; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); }
.unit-row__links { display: flex; gap: 6px; flex-shrink: 0; }
.unit-row__links a { font-size: 13px; border: 1px solid var(--line-3); padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 2px; }
.unit-row__links a:hover { background: var(--bg-2); text-decoration: none; }
/* U129: the 문제 풀기 entry points (only rendered when the solve page is built) */
.pill-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }
.unit-row--solve { flex-wrap: wrap; }
.unit-row--solve .unit-row__links { flex-wrap: wrap; }
.soon { font-size: 13px; color: var(--muted); }

/* book cards (/textbook/) */
.book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.book-card { border: 1px solid var(--line); padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--bg); color: var(--ink); min-height: 44px; }
a.book-card:hover { border-color: var(--navy); text-decoration: none; background: var(--bg-2); }
.book-card__name { font-size: 18px; font-weight: 800; letter-spacing: -0.4px; }
a.book-card .book-card__name { color: var(--navy-deep); }
.book-card__meta { font-size: 13px; color: var(--muted); }
.book-card--soon .book-card__name { color: var(--faint); font-weight: 600; }
/* U120: /textbook/ grade sections; 준비 중 books as one muted line, not cards */
.tb-grade { margin-top: 30px; scroll-margin-top: 16px; }
.tb-grade__lead { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); line-height: 1.75; }
.book-soon { margin: 14px 0 0; font-size: 14px; color: var(--muted); line-height: 1.7; }

/* CTA band */
.cta { background: var(--navy-deep); padding: 30px 34px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.cta__title { font-size: 21px; font-weight: 900; color: var(--ink-inv); letter-spacing: -0.5px; margin-bottom: 8px; }
.cta__note { font-size: 14px; color: var(--ink-inv-2); line-height: 1.7; }
.cta .btn--light { background: var(--bg); color: var(--navy-deep); border: 1px solid var(--bg); height: 56px; padding: 0 26px; font-size: 16px; }
.cta .btn--light:hover { background: var(--hl); border-color: var(--hl); color: var(--navy-deep); }

/* =========================================================== PDF page */
.spec { background: var(--bg); border: 1px solid var(--line); padding: 14px 18px; display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.types-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--bg); }
.types-table th, .types-table td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.types-table th { background: var(--bg-2); font-weight: 700; color: var(--ink-2); }
.types-table td.num { text-align: right; white-space: nowrap; }
.preview-panel { background: var(--tint); padding: 40px 32px; margin-top: 12px; }
.preview-panel .grid-3 { gap: 24px; }
.preview-panel figure { margin: 0; }
.thumb-img { display: block; width: 100%; height: auto; }
.thumb__cap { font-size: 12.5px; color: var(--ink-2); text-align: center; margin-top: 10px; }
/* U128: the quiet jump link in a math set page's header (a text link, not a second download button) */
.jump-dl { display: inline-block; margin-top: 10px; padding: 11px 0; font-size: 14px; font-weight: 700; color: var(--navy); }
.jump-dl:hover { text-decoration: underline; }
.jump-dl:focus-visible { text-decoration: underline; outline: 3px solid var(--navy); outline-offset: 2px; }
.dl-panel { text-align: center; margin-top: 26px; border: 1px solid var(--line); padding: 32px 28px; background: var(--bg); }
.dl-file { font-size: 13px; color: var(--muted); margin-top: 14px; overflow-wrap: anywhere; }
.dl-note { font-size: 13px; color: var(--ink-2); margin-top: 8px; line-height: 1.7; }
.answers-band { margin-top: 14px; background: var(--bg-2); border: 1px solid var(--line); padding: 14px 22px; display: flex; align-items: center;
                justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14.5px; }

/* =========================================================== YAML content (same meaning as in the PDF) */
.en, .eg { font-family: var(--font); }
.eg { font-size: 16.5px; color: var(--ink); letter-spacing: 0; }
.ko { font-size: 13.5px; color: var(--ink-2); }
.u { text-decoration: underline; text-underline-offset: 3px; }
.o, .x { color: var(--red); font-weight: 700; }       /* answer marks: grading red */
.arrow { color: var(--navy); font-weight: 700; }
.gray, .tr { color: var(--ink-2); }
s { color: var(--muted); }
.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; }

/* concept blocks */
.c-p { margin: 12px 0; font-size: 15.5px; line-height: 1.85; }
.c-ex { margin: 10px 0; padding: 12px 18px; background: var(--bg-2); border: 1px solid var(--line); line-height: 1.9; }
.c-item { margin-top: 28px; }
.c-box { margin: 12px 0; padding: 14px 18px; font-size: 15px; line-height: 1.8; }
.c-box h4 { margin: 0 0 6px; font-size: 15px; }
.c-box ol { margin: 6px 0 0; padding-left: 20px; }
.c-box--warn { background: var(--hl-pale); border-left: 4px solid var(--navy-deep); }
.c-box--warn h4 { color: var(--navy-deep); }
.c-box--tip { background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--navy); }
.c-box--tip h4 { color: var(--navy); }
.role-table { background: var(--bg); border: 1px solid var(--line); }
.role-row { display: grid; grid-template-columns: 170px 170px minmax(0, 1fr); }
.role-row--3 { grid-template-columns: 150px 150px minmax(0, 1fr); }
.role-row .cell { padding: 16px 17px; }
.role-table .role-row:not(:last-child) { border-bottom: 1px solid var(--line); }
.role-table .role-row--head { background: var(--bg-2); }
.role-table .role-row--head .cell { font-size: 13px; font-weight: 700; padding: 11px 17px; color: var(--ink-2); }
.role-name { font-size: 15px; font-weight: 700; }
.role-mean, .role-ko, .role-note { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.role-where { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.verb-box { padding: 16px 18px; }
.verb-box--ok { background: var(--navy-pale); border: 1px solid var(--navy-pale-bd); }
.verb-box--both { background: var(--hl-pale); border: 1px solid #EADF94; }
.verb-box--no { background: var(--bg-2); border: 1px solid var(--line-3); }
.verb-box__head { font-size: 13px; font-weight: 700; margin-bottom: 9px; }
.verb-box .en { font-size: 15px; line-height: 1.75; }
.check-list { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.95; }
.box-note { background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--navy); padding: 18px 24px; }
.box-hl { background: var(--hl-pale); border: 1px solid #EADF94; padding: 20px 26px; }
.box-hl__title { font-size: 16px; font-weight: 800; color: var(--navy-deep); margin-bottom: 12px; }
.ins { font-size: 14px; color: var(--ink-2); margin: 8px 0 12px; }
.quiz-grid { background: var(--bg); border: 1px solid var(--line); padding: 20px 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 34px; }
.quiz-item { font-size: 15.5px; border-bottom: 1px dotted var(--line-3); padding-bottom: 9px; }
.quiz-no { font-weight: 700; color: var(--navy); font-size: 13px; margin-right: 7px; }

/* questions */
.q { background: var(--bg); border: 1px solid var(--line); padding: 18px 22px; margin-top: 12px; }
.q__head { display: flex; gap: 10px; align-items: baseline; font-size: 15.5px; font-weight: 700; line-height: 1.6; }
.q__no { color: var(--navy); font-weight: 900; font-size: 18px; flex-shrink: 0; }
.q__lv { font-size: 11px; font-weight: 700; padding: 2px 6px; border: 1px solid var(--navy-pale-bd); color: var(--navy); flex-shrink: 0; }
.q__pts { color: var(--ink-2); font-weight: 700; }
.q__box { margin: 12px 0 0; padding: 12px 16px; border: 1px solid var(--line); background: var(--bg-2); line-height: 1.85; }
.q__box--en { font-size: 15.5px; }
.q__label { font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.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__resp { margin-top: 12px; line-height: 2; font-size: 15px; }
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(--line); padding: 7px 10px; text-align: left; }
table.q__table th { background: var(--bg-2); }

/* answers: correct choices and marks in grading red */
.ans { color: var(--red); font-weight: 800; }
.num-chip { border: 1px solid var(--line); padding: 0 4px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 4px;
            font-size: 13.5px; color: var(--ink); background: var(--bg); }
.num-chip:hover { background: var(--bg-2); text-decoration: none; }
.num-chip b { color: var(--navy); }
.num-chip--ref { font-size: 12px; color: var(--muted); }
.ans-chip { padding: 8px 4px; text-align: center; font-size: 13px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); }
.ans-chip b { color: var(--navy); margin-right: 2px; }
.ans-chip .ans-chip__a { color: var(--red); font-weight: 700; }
.quick { border: 1px solid var(--line); background: var(--bg-2); padding: 18px 22px; margin-top: 14px; }
.sol-list { background: var(--bg); border: 1px solid var(--line); margin-top: 14px; }
.sol { padding: 18px 24px; border-bottom: 1px solid var(--line); }
.sol:last-child { border-bottom: 0; }
.sol__head { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.sol__head .sol__no { color: var(--navy); }
.sol__head .pts { font-size: 12px; color: var(--muted); font-weight: 600; }
.sol__lesson { font-size: 11.5px; color: var(--navy); font-weight: 700; border: 1px solid var(--navy-pale-bd); padding: 1px 6px; }
.sol__body { margin: 0 0 9px; font-size: 15px; 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: 14.5px; line-height: 1.7; }
.sol--group { background: var(--bg-2); }
.sol--group .sol__head { color: var(--navy-deep); }
.chip { font-size: 11px; font-weight: 700; padding: 3px 8px; flex-shrink: 0; margin-top: 2px; white-space: nowrap; }
.chip--score { background: var(--navy-pale); color: var(--navy); }
.chip--trans { background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line); }
.chip--trap { background: var(--hl); color: var(--ink); }
.chip--strat { background: var(--navy-deep); color: var(--ink-inv); }

/* =========================================================== narrow screens */
@media (max-width: 1000px) {
  .hero__paper { display: none; }
  .hero__in--news { flex-direction: column; align-items: stretch; gap: 28px; }   /* U115: panel below the text */
  .hero__in--news .hero__text, .news { flex: none; }   /* a flex-basis becomes a height in a column (050) */
}
@media (max-width: 760px) {
  .notice__in { padding: 0 16px; }
  .notice__msg a { min-height: 44px; display: flex; align-items: center; }   /* tap target; the bar grows to 44px */
  .notice__links { display: none; }
  .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
  .breadcrumb a, .breadcrumb > span { min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
  .page-mark img { height: 48px; }
  .hero__in { padding: 40px 16px 36px; flex-direction: column; align-items: stretch; gap: 28px; }
  .hero__text, .band__main { flex: none; }   /* 050: a flex-basis became a height in the column layout (the gaps) */
  .hero h1, .hero .hero__title { font-size: 28px; letter-spacing: -0.8px; }
  .hero p { font-size: 15.5px; }
  .hero__paper { display: block; flex: none; height: auto; }
  .hero__paper .paper--back { display: none; }
  .hero__paper .paper--front { position: static; width: 78%; max-width: 280px; margin: 0 auto; }
  .band__in { padding: 36px 16px; flex-direction: column; align-items: stretch; gap: 20px; }
  .band h2 { font-size: 26px; }
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip-book { padding: 0 12px; font-size: 14.5px; }
  .band__btns { flex-direction: column; gap: 8px; }
  .band__btns .btn { width: 100%; height: 54px; }
  .contents { padding: 52px 16px 24px; }
  .contents__head { flex-direction: column; align-items: stretch; gap: 18px; margin-bottom: 26px; }
  .contents__head h2 { font-size: 38px; letter-spacing: -1.2px; }
  .tabs { gap: 20px; }
  .tabs a { font-size: 15.5px; }
  .tab-panel { flex-direction: column-reverse; align-items: stretch; gap: 22px; }
  .tab-panel h3 { font-size: 28px; }
  .tab-panel__img { flex: none; height: 260px; }
  .tab-panel__img .paper { width: 160px; }
  .latest { padding: 36px 16px; }
  .row { gap: 14px; }
  .row__thumb { display: none; }
  .row { flex-wrap: wrap; }
  .row__title { font-size: 15.5px; }
  .row__date { width: 100%; }
  .numbers__in { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 32px 16px; gap: 22px 16px; }
  .numbers strong { font-size: 30px; }
  .numbers strong small { font-size: 16px; }
  .home-ad { padding: 28px 16px; }
  .subjects__in { grid-template-columns: minmax(0, 1fr); padding: 24px 16px; gap: 12px; }
  .subject-card { padding: 20px; }
  .subject-card .btn { width: 100%; }
  .foot__cols { gap: 4px 32px; }
  .ad-slot .adsbygoogle { min-height: 100px; }
  .foot__in { padding: 26px 16px 32px; flex-direction: column; }
  .page-body { padding: 16px 16px 48px; }
  .page-head { padding: 24px 20px; }
  .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; }
  .grid-2, .grid-3, .book-grid, .unit-list { grid-template-columns: minmax(0, 1fr); }
  .grid-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .preview-panel { padding: 24px 18px; }
  .preview-panel .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .cta { flex-direction: column; align-items: stretch; padding: 22px 18px; }
  .btn--lg { width: 100%; padding: 0 20px; font-size: 17px; }
  .unit-row { flex-wrap: wrap; }
  .q { padding: 14px; }
  .q__opts, .q__opts--three { grid-template-columns: minmax(0, 1fr); }
  .role-row, .role-row--3 { grid-template-columns: minmax(0, 1fr); }
  .quiz-grid { grid-template-columns: minmax(0, 1fr); }
  .sol { padding: 14px 16px; }
  .c-ex, .q__box { overflow-wrap: anywhere; }
  .h2-sec { font-size: 21px; }
}

/* U143: the home banner as drawn pictures (design Banner_B). Navy slides, text left, picture right (a 420 x 230 drawing); on a phone the picture sits in
   its own 150px box above the text, scaled to .62, so nothing overlaps. Motion plays once when home.js gives the slide `.go`; the only loop is the
   calendar's walking blocks. Individual translate / scale / rotate properties keep the static tilts. */
.hb__bg--art { background: #0F1E46; color: #fff; }
.hb--art .hb__slide { min-height: 320px; }
.hb--art .hb__text { padding: 28px 0 60px 56px; flex: 1 1 0; max-width: none; gap: 8px; align-content: start; }
.hb--art .hb .hb__title, .hb--art .hb__title { color: #fff; font-size: 36px; margin-top: 2px; }
.hb--art .hb__p { color: #C9D3E8; }
.hb--art .hb__eyebrow { color: #FFE94A; } .hb--art .hb__eyebrow::after { background: #FFE94A; }
.hb--art .hb__tag { background: #FFE94A; color: #0F1E46; border-radius: 4px; padding: 3px 8px; }
.hb--art .hb__btn { background: #FFE94A; border-color: #FFE94A; color: #0F1E46; border-radius: 8px; height: 48px; }
.hb--art .hb__btn:hover { background: #fff; border-color: #fff; color: #0F1E46; }
.hb--art .hb__btn:focus-visible, .hb--art .hb__dot:focus-visible, .hb--art .hb__arrow:focus-visible { outline-color: #fff; }
.hb--art .hb__dot span { background: rgba(255, 255, 255, .35); }
.hb--art .hb__dot[aria-current="true"] span { background: #FFE94A; }
.hb--art .hb__controls { bottom: 8px; left: 50px; gap: 4px; }   /* 44px targets for the dots and arrows */
.hb--art .hb__dot { width: 28px; height: 44px; }
.hb--art .hb__arrow { width: 44px; height: 44px; font-size: 22px; }
.hb--art .hb__arrow { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; } .hb--art .hb__arrow:hover { background: rgba(255, 255, 255, .12); }
.ha-box { flex: 0 0 420px; height: 230px; position: relative; margin: 0 56px 0 24px; }
.ha-art { position: absolute; left: 0; top: 0; width: 420px; height: 230px; }
.ha-sh { position: absolute; width: 130px; height: 180px; background: #fff; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); padding: 14px; box-sizing: border-box; rotate: var(--r); }
.ha-sh i { display: block; height: 8px; border-radius: 4px; background: #E6E8EC; margin-bottom: 9px; } .ha-sh i.h { background: #FFE94A; width: 45%; }
.ha-k { display: inline-block; font-size: 10.5px; font-weight: 800; color: #fff; border-radius: 4px; padding: 2px 6px; margin-bottom: 10px; }
.ha-card { position: absolute; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); box-sizing: border-box; color: #1F2329; rotate: var(--r, 0deg); }
.ha-ph { position: relative; height: 118px; border-radius: 6px; background: #C9D3E8; margin-bottom: 10px; overflow: hidden; }
.ha-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ha-cr { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; font-size: 8.5px; line-height: 1.3; color: #fff; background: rgba(15, 30, 70, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; } .ha-row--sp { justify-content: space-between; margin-bottom: 10px; }
.ha-en { font-size: 11px; font-weight: 800; color: #fff; background: #1F3C88; border-radius: 4px; padding: 2px 6px; }
.ha-bar { height: 9px; flex: 1; background: #0F1E46; border-radius: 4px; }
.ha-ln { height: 8px; background: #E6E8EC; border-radius: 4px; margin-bottom: 6px; }
.ha-wl { font-size: 11px; font-weight: 700; margin-bottom: 4px; } .ha-w { font-size: 18px; font-weight: 900; color: #0F1E46; overflow-wrap: anywhere; line-height: 1.25; }
.ha-ul { height: 7px; width: 60%; background: #FFE94A; border-radius: 4px; margin-top: 6px; }
.ha-chip { position: absolute; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 5px 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); white-space: nowrap; background: var(--bg); color: var(--c); }
.ha-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.ha-cal span { height: 18px; border-radius: 4px; background: #F1F2F4; }
.ha-cal span.wy { background: var(--y); } .ha-cal span.wp { background: var(--p); }
.ha-bag { position: absolute; left: 115px; top: 62px; width: 190px; height: 160px; background: #FFE94A; border-radius: 10px 10px 18px 18px; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.ha-bag::before { content: ""; position: absolute; left: 50%; top: -46px; width: 88px; height: 58px; margin-left: -44px; border: 8px solid #FFE94A; border-bottom: 0; border-radius: 44px 44px 0 0; box-sizing: border-box; }
.ha-bag::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: rgba(15, 30, 70, .08); border-radius: 10px 10px 0 0; }
.ha-mk { position: absolute; left: 0; right: 0; bottom: 44px; text-align: center; font-weight: 900; font-size: 28px; color: #0F1E46; letter-spacing: -1px; }
.ha-mk span { box-shadow: inset 0 -8px 0 #fff; padding: 0 2px; }
@keyframes ha-fan { from { translate: var(--fx) 26px; rotate: 0deg; opacity: 0; } to { translate: 0 0; rotate: var(--r); opacity: 1; } }
@keyframes ha-rise { from { translate: 0 26px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes ha-drop { 0% { translate: 0 -36px; opacity: 0; } 70% { translate: 0 4px; opacity: 1; } 100% { translate: 0 0; opacity: 1; } }
@keyframes ha-pop { 0% { scale: .5; opacity: 0; } 70% { scale: 1.08; opacity: 1; } 100% { scale: 1; opacity: 1; } }
@keyframes ha-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ha-walky { 0%, 22% { background: var(--y); } 30%, 100% { background: #F1F2F4; } }
@keyframes ha-walkp { 0%, 22% { background: var(--p); } 30%, 100% { background: #F1F2F4; } }
.go .ha-sh { animation: ha-fan .8s cubic-bezier(.2, .8, .2, 1) both; }
.go .ha-sh:nth-child(2) { animation-delay: .08s; } .go .ha-sh:nth-child(3) { animation-delay: .16s; } .go .ha-sh:nth-child(4) { animation-delay: .24s; }
.go .ha-card { animation: ha-rise .7s cubic-bezier(.2, .8, .2, 1) both; } .go .ha-card.ha-word { animation-delay: .25s; }
.go .ha-bag { animation: ha-drop .7s cubic-bezier(.2, .8, .2, 1) both; }
.go .ha-chip { animation: ha-pop .45s ease-out both; }
.go .ha-chip.d1 { animation-delay: .9s; } .go .ha-chip.d2 { animation-delay: 1.1s; } .go .ha-chip.d3 { animation-delay: 1.3s; }
.go .ha-cal-card { animation: ha-fade .5s ease-out .3s both; }
.go .ha-cal span.wy { animation: ha-walky 3.5s linear infinite; } .go .ha-cal span.wp { animation: ha-walkp 3.5s linear infinite; }
@media (prefers-reduced-motion: reduce) { .go .ha-sh, .go .ha-card, .go .ha-bag, .go .ha-chip, .go .ha-cal-card, .go .ha-cal span { animation: none !important; } }
@media (max-width: 719px) {
  .hb--art .hb__slide { min-height: 0; flex-direction: column; align-items: stretch; padding-top: 18px; }
  .hb--art .hb__text { padding: 10px 20px 56px; flex: 0 0 auto; gap: 6px; }   /* U143b: tighter, so the tallest slide (1) is shorter; the dots sit right under it */
  .hb--art .hb__controls { left: 14px; bottom: 6px; }
  .hb--art .hb .hb__title, .hb--art .hb__title { font-size: 26px; }
  .hb--art .hb__btn { width: 100%; }
  .ha-box { order: -1; flex: 0 0 auto; width: 100%; height: 150px; margin: 0; overflow: hidden; }
  .ha-art { left: 50%; margin-left: -131px; scale: .62; transform-origin: 0 0; }
}

/* U143: the block under the banner (design B): four field cards + 다가오는 시험. A field's colours come inline from home_fields.TYPES (--c, --bg). */
.hf { padding: 34px 0 6px; }
.hf__in { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.hf__main { flex: 999 1 640px; min-width: 0; }
.hf__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.hf__head h2 { margin: 0; font-size: 22px; font-weight: 900; color: var(--navy-deep); }
.hf__head a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.hf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hf__card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: var(--ink); background: #fff; border-bottom: 4px solid var(--c); text-decoration: none; }
a.hf__card:hover { box-shadow: 0 10px 24px rgba(15, 30, 70, .12); text-decoration: none; color: var(--ink); }
a.hf__card:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
.hf__vis { display: block; height: 150px; background: var(--bg); position: relative; overflow: hidden; }
.hf__lab { position: absolute; left: 12px; top: 12px; z-index: 2; font-size: 13px; font-weight: 800; color: #fff; background: var(--c); border-radius: 6px; padding: 4px 10px; }
.hf__soon { position: absolute; right: 12px; top: 12px; z-index: 2; font-size: 12px; font-weight: 700; color: #4B515C; background: #fff; border-radius: 999px; padding: 3px 10px; }
.hf__pv { position: absolute; top: 34px; width: 92px; height: 122px; background: #fff; border-radius: 6px; box-shadow: 0 6px 16px rgba(15, 30, 70, .15); padding: 11px; box-sizing: border-box; }
.hf__pv--1 { left: 32%; } .hf__pv--2 { left: 52%; top: 22px; }
.hf__pv i { display: block; height: 8px; border-radius: 4px; background: #E6E8EC; margin-bottom: 9px; }
.hf__pv i.n { background: var(--c); width: 60%; height: 10px; } .hf__pv i.h { background: #FFE94A; width: 45%; }
.hf__tx { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.hf__tx strong { font-size: 20px; color: var(--navy-deep); letter-spacing: -.4px; }
.hf__pills { display: flex; flex-wrap: wrap; gap: 5px; }
.hf__pills span { font-size: 12.5px; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.hf__card--off { background: #FAFAFB; } .hf__card--off .hf__tx strong { color: #4B515C; }
.hf__side { flex: 1 1 300px; min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--bg-2); display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; }
.hf__in--solo .hf__main { flex-basis: 100%; }
.hf__side h2 { margin: 0; font-size: 18px; font-weight: 900; color: var(--navy-deep); }
.hf__ev { display: flex; gap: 12px; align-items: center; min-height: 64px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 8px 8px; font-size: 14px; color: var(--ink); text-decoration: none; }
.hf__ev[hidden] { display: none; }
.hf__ev:hover { border-color: var(--c); text-decoration: none; color: var(--ink); }
.hf__ev:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
.hf__dd { flex: 0 0 56px; height: 56px; border-radius: 10px; background: var(--bg); color: var(--c); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.hf__dd b { font-size: 17px; font-weight: 900; } .hf__dd b:empty { display: none; } .hf__dd small { font-size: 11.5px; font-weight: 700; margin-top: 2px; }
.hf__ew { flex: 1 1 auto; min-width: 0; }
.hf__ek { display: inline-block; font-size: 11.5px; font-weight: 800; color: var(--c); margin-bottom: 1px; }
.hf__ew b { display: block; color: var(--navy-deep); font-size: 15px; } .hf__ew em { font-style: normal; font-size: 12.5px; color: var(--ink-2); }
.hf__ar { color: var(--ink-2); font-size: 18px; }
.hf__btn { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 10px; background: var(--navy-deep); color: #fff; font-weight: 700; margin-top: auto; }
.hf__btn:hover { background: var(--navy); color: #fff; text-decoration: none; }
@media (max-width: 719px) {
  .hf { padding-top: 24px; } .hf__in { padding: 0 16px; }
  .hf__grid { gap: 10px; } .hf__vis { height: 104px; } .hf__pv { width: 64px; height: 84px; top: 30px; padding: 8px; } .hf__pv--2 { top: 20px; }
  .hf__tx { padding: 10px 11px 12px; } .hf__tx strong { font-size: 16.5px; } .hf__pills span { font-size: 11.5px; }
  .hf__lab { font-size: 12px; left: 8px; top: 8px; padding: 3px 7px; } .hf__soon { right: 8px; top: 8px; font-size: 11px; }
}

/* U143: 전체 보기 /all/ (design C): six light-headed panels, a field's colours inline (--c, --bg) */
.all-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 14px 0 40px; }
/* U143b: a plain head on /all/ (no box, no ruled lines) */
.all-top { padding: 6px 0 14px; } .all-top h1 { margin: 0 0 4px; font-size: 28px; font-weight: 900; color: var(--navy-deep); } .all-top p { margin: 0; font-size: 15px; color: #4B515C; }
@media (max-width: 719px) { .all-top h1 { font-size: 23px; } }
.all-col { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 4px rgba(15, 30, 70, .05); overflow: hidden; display: flex; flex-direction: column; scroll-margin-top: 16px; }
.all-col:target { border-color: var(--c); box-shadow: 0 0 0 2px var(--c); }
.all-head { background: var(--bg); padding: 16px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #EEF0F3; }
.all-ic { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; background: #fff; color: var(--c); display: flex; align-items: center; justify-content: center; }
.all-head h2 { margin: 0; font-size: 18px; font-weight: 900; color: var(--c); }
.all-head p { margin: 2px 0 0; font-size: 13px; color: #4B515C; }
.all-soon { margin-left: auto; font-size: 12px; font-weight: 700; color: #C2410C; background: #fff; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.all-list { display: flex; flex-direction: column; padding: 6px 10px 10px; }
.ap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 8px 10px; border-bottom: 1px solid #F1F2F4; color: var(--ink); text-decoration: none; }
.all-list > *:last-child { border-bottom: 0; }
a.ap-row:hover { background: var(--bg); text-decoration: none; color: var(--ink); }
a.ap-row:focus-visible { outline: 3px solid var(--c); outline-offset: -3px; }
.ap-row b { display: block; font-size: 15.5px; color: var(--navy-deep); } .ap-row small { display: block; font-size: 12.5px; color: #4B515C; margin-top: 2px; }
.ap-row i { font-style: normal; color: var(--c); font-weight: 700; font-size: 18px; }
.ap-row--off b { color: #4B515C; }
@media (max-width: 900px) { .all-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .all-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* =========================================================== 163: 중학 영어 재디자인 v1, 학년 영문법 /gN/ and 단원 /gN/unit-NN/ (docs/design_system.md; own gr-* classes, new rules only).
   Field colours come from tvars("eng") (--c, --bg, --light). The head is full width, the body column 1120px. */
.gr { --bd: #D9E2F2; color: #1F2329; }
.gr-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.gr-head { background: var(--bg); border-bottom: 1px solid var(--bd); }
.gr-head .gr-in { padding-top: 22px; padding-bottom: 26px; }
.gr-head .breadcrumb { font-size: 13px; color: #4B515C; margin-bottom: 12px; line-height: 1.7; }
.gr-head .breadcrumb a { color: #4B515C; padding: 0; }
.gr-head .breadcrumb .sep { margin: 0 6px; color: #80858F; }
.gr-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.gr-lab { font-size: 13px; font-weight: 800; color: #fff; background: var(--c); border-radius: 6px; padding: 3px 9px; }
.gr-chip { font-size: 12.5px; font-weight: 800; color: var(--c); background: #fff; border: 1px solid var(--bd); border-radius: 999px; padding: 2px 10px; }
.gr-head h1 { margin: 10px 0 6px; font-size: 30px; line-height: 1.3; font-weight: 900; color: #0F1E46; letter-spacing: -0.8px; }
.gr-lead { margin: 0; font-size: 15.5px; line-height: 1.6; color: #4B515C; }
.gr-tabs { display: inline-flex; gap: 4px; margin-top: 16px; background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 4px; max-width: 100%; }
.gr-tabs a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 9px; font-weight: 800; font-size: 14.5px; color: #4B515C; white-space: nowrap; }
.gr-tabs a:hover { text-decoration: none; background: var(--bg); color: #4B515C; }
.gr-tabs a.on { background: var(--c); color: #fff; }
.gr-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding-top: 28px; padding-bottom: 56px; align-items: start; }
.gr-toc { position: sticky; top: 16px; border: 1px solid #E6E8EC; border-radius: 14px; padding: 10px; }
.gr-toc b { display: block; font-size: 12.5px; color: #4B515C; padding: 6px 8px; }
.gr-toc a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; border-radius: 8px; color: #1F2329; font-size: 14px; font-weight: 600; }
.gr-toc a span { font-size: 12px; font-weight: 800; color: var(--c); width: 18px; flex: 0 0 auto; }
.gr-toc a:hover { background: var(--bg); text-decoration: none; color: #1F2329; }
.gr-col { min-width: 0; }
.gr-ch { margin-bottom: 26px; scroll-margin-top: 16px; }
.gr-ch h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 19px; line-height: 1.4; font-weight: 900; color: #0F1E46; }
.gr-ch h2 small { font-size: 12.5px; font-weight: 800; color: var(--c); }
.gr-list { border: 1px solid #E6E8EC; border-radius: 14px; overflow: hidden; background: #fff; }
.gr-u { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 60px; padding: 8px 14px; border-top: 1px solid #F1F2F4; }
.gr-u:first-child { border-top: 0; }
.gr-no { width: 36px; height: 36px; border-radius: 10px; background: var(--bg); color: var(--c); font-weight: 900; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.gr-t { font-size: 15.5px; font-weight: 700; color: #0F1E46; min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.gr-t:hover { text-decoration: underline; color: #0F1E46; }
.gr-act { display: flex; gap: 6px; align-items: center; }
.gr-b { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: 10px; font-size: 13.5px; font-weight: 800; background: #fff; border: 1px solid #D9DCE3; color: #1F2329; white-space: nowrap; }
.gr-b:hover { background: #F4F5F7; color: #1F2329; text-decoration: none; }
.gr-b--p { background: #0F1E46; border-color: #0F1E46; color: #fff; }
.gr-b--p:hover { background: #1F3C88; border-color: #1F3C88; color: #fff; }
/* 164: list rows use an outline 「바로 풀기」 (navy text); the filled navy stays on the unit page */
.gr-b--first { color: #0F1E46; font-weight: 800; }
.gr-b--first:hover { color: #0F1E46; border-color: #0F1E46; }
.gr-b--lg { min-height: 52px; padding: 0 22px; font-size: 16px; border-radius: 12px; }
.gr-l { min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; font-size: 13.5px; font-weight: 800; color: var(--c); }
.gr-note { font-size: 13px; color: #4B515C; border-top: 1px solid #E6E8EC; padding-top: 16px; margin: 8px 0 0; }
/* the unit page: body column under the head, then the 「PDF 받기」 card with the first page of the PDF */
.gr-unit { padding-top: 12px; padding-bottom: 56px; }
.gr-cta { margin-top: 34px; display: flex; gap: 24px; align-items: center; border: 1px solid var(--bd); background: var(--bg); border-radius: 16px; padding: 20px 24px; }
.gr-cta__sheet { flex: 0 0 auto; width: 132px; aspect-ratio: 210 / 297; border: 1px solid #E6E8EC; border-radius: 8px; background: #FAFAFC; overflow: hidden; display: block; }
.gr-cta__sheet:hover { border-color: var(--light); box-shadow: 0 0 0 3px #fff; }
.gr-cta__sheet img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gr-cta__body { min-width: 0; flex: 1 1 auto; }
.gr-cta__title { font-size: 20px; line-height: 1.4; font-weight: 900; color: #0F1E46; }
.gr-cta__note { margin-top: 4px; font-size: 14px; line-height: 1.65; color: #4B515C; }
.gr-cta__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 760px) {
  .gr-in { padding: 0 16px; }
  .gr-head h1 { font-size: 24px; }
  .gr-tabs { display: flex; overflow-x: auto; }
  .gr-tabs a { flex: 1 0 auto; justify-content: center; padding: 0 12px; }
  .gr-body { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 20px; }
  .gr-toc { position: static; display: flex; overflow-x: auto; gap: 4px; padding: 6px; }
  .gr-toc b { display: none; }
  .gr-toc a { flex: 0 0 auto; border: 1px solid #E6E8EC; border-radius: 999px; padding: 0 12px; white-space: nowrap; }
  .gr-u { grid-template-columns: 32px minmax(0, 1fr); padding: 10px 12px; }
  .gr-no { width: 32px; height: 32px; }
  .gr-act { grid-column: 2; }
  .gr-cta { flex-direction: column; align-items: stretch; padding: 18px; gap: 16px; }
  .gr-cta__sheet { width: 112px; align-self: center; }
  .gr-cta__acts .gr-b { flex: 1 1 100%; }
}