/* ===========================================================
   기출 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 */
.hdr { border-bottom: 1px solid var(--line); background: var(--bg); }
.hdr__in { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 84px; display: flex; align-items: center;
           justify-content: space-between; gap: 24px; }
/* wordmark (052, docs/brand.md): compact SVG, digits' cap height ≈ 28px (37px tall image); 22px on phones */
.brand img { display: block; height: 37px; width: auto; }
.brand { display: inline-flex; align-items: baseline; gap: 6px; color: var(--navy-deep); font-size: 28px; font-weight: 900;
         letter-spacing: -1px; line-height: 1.2; min-height: 44px; align-items: center; }
.brand:hover { color: var(--navy-deep); text-decoration: none; }
.menu { display: flex; gap: 36px; align-items: center; font-size: 17px; font-weight: 700; }
.menu a { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }   /* 090: six entries stay on one line down to 761px */
.menu a[aria-current] { color: var(--navy); box-shadow: inset 0 -3px 0 var(--navy); }   /* U110: page or its section */
.menu-btn { display: none; }
.subnav { display: none; }

/* =========================================================== 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-v2.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 .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); }
.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; }   /* visually hidden, still in the <h1> (SEO) */
/* 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 .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: auto; aspect-ratio: 3 / 2; -webkit-mask-image: none; mask-image: none; }
  .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; } }

/* 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; }
/* 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-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; }
.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) {
  .menu { gap: 22px; font-size: 16px; }
  .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; }
  .hdr__in { height: 60px; padding: 0 16px; }
  .brand { font-size: 23px; }
  .brand img { height: 29px; }
  .page-mark img { height: 48px; }
  .menu { display: none; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); color: var(--ink); }
  .menu-btn:hover { text-decoration: none; background: var(--bg-2); }
  .subnav { display: block; border-bottom: 1px solid var(--line); background: var(--bg); }
  .subnav__in { display: flex; gap: 22px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
  .subnav__in::-webkit-scrollbar { display: none; }
  .subnav a { flex-shrink: 0; height: 46px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
  .subnav a[aria-current] { color: var(--navy); box-shadow: inset 0 -3px 0 var(--navy); }
  .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; }
}