/* ============================================================
   끌리진아: public pages (index, apply, privacy, terms, 404)
   Loaded AFTER app.css. Admin never loads this file.
   Direction: editorial, ink rules on a near-white ground, proof beside every number.
   ============================================================ */

/* ---------- 0. Hahmlet display subset (self-hosted) ----------
   Only the glyphs the display type uses (instead of ~600 KB of CDN slices), all OpenType features kept
   (lnum/tnum for the figures). This is the only Hahmlet source: the @fontsource CDN stylesheet is no longer linked, so a
   display character outside this unicode-range falls back to the serif stack in --f-display. Check coverage with
   ux/hahmlet-guard.mjs (every page and form state) after any display-copy change.
   v3 adds the restored hero H1 (당, 웁) and the planned apply display labels (연락, 상담, 담당, 동석, 입금, 건너뛰기).
   Rebuild (new filename, /assets is cached immutable) when display copy changes:
   node redesign/glyphs.mjs display-glyphs.txt   (then union with the previous list)
   pyftsubset "Hahmlet[wght].ttf" --text-file=display-glyphs.txt --flavor=woff2 --name-IDs='*' --layout-features='*'
   License: assets/fonts/Hahmlet-OFL.txt */
@font-face{font-family:'Hahmlet Variable';font-style:normal;font-display:swap;font-weight:100 900;
  src:url('/assets/fonts/hahmlet-sub-v3.woff2') format('woff2-variations'),url('/assets/fonts/hahmlet-sub-v3.woff2') format('woff2');
  unicode-range:U+20-7e,U+b7,U+d7,U+2013-2014,U+2018-2019,U+201c-201d,U+2026,U+20a9,U+2192,U+ac00,U+ac04,U+ac10,U+ac15,U+ac19,U+ac1c,U+ac4d,U+ac70,U+ac74,U+ac8c,U+aca9,U+acac,U+acb0,U+acbd,U+acc4,U+ace0,U+ace7-ace8,U+acf5,U+acfc,U+ad00,U+ad6c,U+ad70,U+ad8c,U+adc0,U+adf8,U+ae08,U+ae30,U+ae4c,U+af2c,U+afb8,U+afe8,U+b04c,U+b05d,U+b098,U+b0b4,U+b108,U+b110,U+b178,U+b204,U+b294,U+b2c8,U+b2e4-b2e5,U+b2e8,U+b2ec,U+b2f4-b2f5,U+b2f9,U+b300,U+b3c4,U+b3d9,U+b3fc,U+b410,U+b418,U+b41c,U+b450,U+b458,U+b4dc,U+b4e0,U+b4e4,U+b514,U+b54c,U+b5a4,U+b6f0,U+b77c-b77d,U+b791,U+b798,U+b79c,U+b7a8,U+b7b5,U+b7f0,U+b807,U+b824-b825,U+b85c,U+b8cc,U+b97c,U+b9ac-b9ad,U+b9b4,U+b9bd,U+b9c8,U+b9cc,U+b9d0,U+b9de,U+b9e1,U+b9e4,U+b9f7,U+ba39,U+ba58,U+ba74,U+baa9,U+babb,U+bb34,U+bb38,U+bb3b,U+bb50,U+bbfc,U+bc00,U+bc0d,U+bc0f,U+bc14-bc15,U+bc29,U+bc94-bc95,U+bcc0,U+bcc4,U+bcd1,U+bcf4,U+bd24,U+bd80,U+bd84,U+bd88,U+be0c,U+be44,U+c0ac,U+c0b0,U+c0c1,U+c0c8,U+c11c-c11d,U+c120,U+c124,U+c131,U+c138,U+c18c,U+c190,U+c1fc,U+c218,U+c21c,U+c2a4,U+c2a8,U+c2dc-c2dd,U+c2e0,U+c2e4,U+c2f1,U+c370,U+c544,U+c548,U+c54c,U+c57c-c57d,U+c598,U+c5b4,U+c5b8-c5b9,U+c5c5-c5c6,U+c5c8,U+c5d0,U+c5f0,U+c601,U+c606,U+c608,U+c624,U+c62c,U+c640,U+c654,U+c694,U+c6a9,U+c6b0,U+c6b4,U+c6b8,U+c6c0-c6c1,U+c6cc,U+c6d0,U+c6d4,U+c6e0,U+c704,U+c720,U+c73c,U+c740,U+c744,U+c758,U+c774-c775,U+c778,U+c77c,U+c784-c785,U+c790-c791,U+c798,U+c7a5,U+c7ac,U+c7c1,U+c800-c801,U+c804,U+c808,U+c811,U+c815,U+c81c,U+c838,U+c84c,U+c870,U+c880,U+c885,U+c8fc,U+c900,U+c918,U+c988,U+c9c0-c9c1,U+c9c4,U+c9c8,U+c9d0-c9d1,U+cabd,U+cc28-cc29,U+cc3e,U+cc44-cc45,U+cc98,U+cca0,U+ccad,U+ccb4,U+cd5c,U+ce58,U+ce68,U+ce74,U+ce90,U+cea0,U+cee8,U+d06c,U+d0a4,U+d0c1,U+d0c8,U+d0d5,U+d130,U+d14c,U+d2b8,U+d305,U+d30c,U+d314,U+d398,U+d3c9,U+d3ec,U+d3f4,U+d504,U+d508,U+d544,U+d558,U+d55c,U+d560,U+d56d,U+d574,U+d589,U+d5a5,U+d611,U+d638,U+d655,U+d658,U+d65c,U+d68c-d68d,U+d6c4,U+d788}

/* ---------- 1. tokens (override app.css / tokens.css) ---------- */
:root{
  /* ground & ink */
  --c-bg:#fffdfa;                 /* near-white: ink 15.35, ink-2 7.72, ink-3 5.57, primary-ink 5.12 */
  --c-surface:#ffffff;
  --c-surface-sunken:#f6ece4;     /* one full-bleed band (#reference) and disabled choices; ink-3 on it 4.86 */
  --c-ink:#2e2119;
  --c-ink-2:#5e4f45;
  --c-ink-3:#74645a;
  --c-ink-4:#807064;
  --c-rule:#2e2119;
  --c-rule-soft:#e6d6c8;
  --c-field:#937f71;
  --c-line:var(--c-rule-soft);
  --c-line-strong:var(--c-field);
  --c-line-focus:var(--c-ink);

  /* brand orange: fill only, ink text on it */
  --c-primary:#ff5c38;
  --c-primary-hover:#2e2119;
  --c-primary-press:#1f1712;
  --c-primary-ink:#c2401b;
  --c-primary-weak:#f6ece4;
  --c-primary-weak-2:#ffffff;

  --c-dark:#2e2119;
  --c-ink-on-dark:#fff8f3;
  --c-ink-2-on-dark:#d9c6b5;
  --c-dark-line:rgba(255,248,243,.18);

  --c-error:#c42a36;
  --c-error-weak:#fdeceb;

  /* type */
  --f-display:'Hahmlet Variable','AppleMyungjo','Nanum Myeongjo','Noto Serif CJK KR','Batang',serif;
  --f-text:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --font:var(--f-text);

  --t-display:clamp(36px, 4.4vw + 14px, 76px);
  --t-h2:clamp(28px, 2.6vw + 16px, 52px);
  --t-h2-side:clamp(26px, 1.2vw + 20px, 38px);
  --t-h3:clamp(20px, .6vw + 17px, 26px);
  --t-figure:clamp(72px, 7vw + 30px, 132px);
  --t-figure-sm:clamp(44px, 2.4vw + 30px, 64px);
  --t-point:clamp(21px, 1.2vw + 16px, 30px);
  --t-price:clamp(26px, .8vw + 20px, 32px);
  --t-title-1:clamp(30px, 2vw + 22px, 44px);
  --t-title-2:clamp(21px, .8vw + 17px, 26px);
  --t-title-3:18px;
  --t-body-lg:clamp(17px, .3vw + 15px, 19px);
  --t-body:16px;
  --t-caption:14px;
  --t-micro:13px;
  --t-num-lg:var(--t-price); --t-num-xl:var(--t-price);
  --w-black:700; --w-bold:700; --w-medium:600; --w-regular:500;
  --ls-wide:0;

  /* space & layout */
  --s-7:28px;
  --page-max:1280px;
  --page-pad:clamp(20px, 4vw, 48px);
  --gutter:clamp(16px, 2.2vw, 32px);
  --sec-y:clamp(64px, 7vw, 104px);
  --read-max:680px;
  --measure:34em;

  /* shape */
  --r-sm:4px; --r-md:6px; --r-lg:6px; --r-xl:6px; --r-full:999px;

  /* elevation: only the modal */
  --sh-card:none; --sh-raised:none; --sh-primary:none; --sh-float:none;
  --sh-modal:0 24px 64px rgba(46,33,25,.24);

  --tap-min:48px; --field-h:56px; --cta-h:56px;
}

/* ---------- 2. base ---------- */
/* keyboard focus and in-page anchors stay clear of the sticky nav (top) and the sticky CTA bars (bottom) */
html{scroll-padding-top:72px;scroll-padding-bottom:104px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--f-text);font-weight:500;background:var(--c-bg);color:var(--c-ink)}
a{color:var(--c-ink)} a:hover{color:var(--c-ink)}
::selection{background:#ffd2c2;color:var(--c-ink)}
:focus-visible{outline:2px solid var(--c-ink);outline-offset:3px;border-radius:0}
.on-ink :focus-visible{outline-color:var(--c-ink-on-dark)}
strong,b{font-weight:700;color:var(--c-ink)}
.nobr{white-space:nowrap}

.display,.h2,.h3,.title-1,.title-2,.title-3{font-family:var(--f-display)}
.display{font-size:var(--t-display);font-weight:500;line-height:1.1;letter-spacing:-.035em}
.h2,.h3,.title-1,.title-2{text-wrap:balance}
.display__num{font-weight:300;letter-spacing:-.045em}
.h2{font-size:var(--t-h2);font-weight:500;line-height:1.15;letter-spacing:-.03em}
.sec--side .h2{font-size:var(--t-h2-side);line-height:1.2}
.h3{font-size:var(--t-h3);font-weight:600;line-height:1.3;letter-spacing:-.02em}
.title-1{font-size:var(--t-title-1);font-weight:500;line-height:1.2;letter-spacing:-.03em}
.title-2,.title-3{font-weight:600;letter-spacing:-.02em}
.lead{font-size:var(--t-body-lg);line-height:1.7;color:var(--c-ink-2);max-width:var(--measure)}
.meta{font:600 13px/1.55 var(--f-text);color:var(--c-ink-3);letter-spacing:0;font-variant-numeric:tabular-nums}
.fine{font-size:14px;line-height:1.6;color:var(--c-ink-3)}
/* no one-word last lines in running text (Chromium 117+; others ignore it) */
.lead,.fine,.meta,.case__body,.story__text,.story__point,.fit-list li,.steps li p,.faq-item p,.rows__text{text-wrap:pretty}
/* short serif lines: even line lengths instead of a long line and a stub */
.fit-list li,.story__point,.steps .h3,.plan__name,.rows__name,.story__result{text-wrap:balance}

/* legacy classes JS still injects */
.card{border-radius:6px;border-color:var(--c-rule-soft);box-shadow:none}
.eyebrow{font:600 13px/1.5 var(--f-text);letter-spacing:0;text-transform:none;color:var(--c-ink-2)}

/* ---------- 3. layout ---------- */
.grid12{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--gutter)}
.grid12>*,.hero__grid>*{min-width:0}
@media (min-width:900px){.grid12{grid-template-columns:repeat(12,minmax(0,1fr))}}
.sec{padding-block:0 var(--sec-y)}
.sec__grid{border-top:1px solid var(--c-rule);padding-top:clamp(20px,2.4vw,32px);row-gap:24px}
.sec__head .lead{margin-top:14px}
.sec--wide .sec__head{margin-bottom:clamp(8px,1.2vw,16px)}
/* a section that continues the one above it (works under about, process under programs): no new section rule */
.sec--cont .sec__grid{border-top:0;padding-top:0}
/* the one full-bleed band on the page; border-image paints past the .wrap edges without causing overflow */
.sec--band{padding-block:var(--sec-y);margin-bottom:var(--sec-y);
  border-image:linear-gradient(var(--c-surface-sunken),var(--c-surface-sunken)) fill 0 // 0 100vmax}
.sec--band .sec__grid{border-top:0;padding-top:0}
.sec--band .story{border-bottom-color:#dcc7b6}   /* the soft rule is too faint on the peach band */
.sec--band .story:last-child{border-bottom:0;padding-bottom:0}
@media (min-width:900px){
  .sec--side .sec__head{grid-column:1/5;position:sticky;top:96px;align-self:start}
  .sec--side .sec__body{grid-column:5/13}
  .sec--wide .sec__head{grid-column:1/9}
  .sec--wide .sec__body{grid-column:1/13}
}
/* side-head sections: the section rule already tops the list, so the list drops its own (no double rule, phones included) */
.sec--side:not(.sec--cont) .sec__body>:is(.fit-list,.rows,.faq,.steps):first-child{border-top:0}

/* ---------- 4. buttons & links ---------- */
.btn{border-radius:4px;font-weight:700;letter-spacing:-.01em;box-shadow:none;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.btn:active{transform:none}
.btn--primary{background:var(--c-primary);color:var(--c-ink);border:1.5px solid var(--c-primary)}
/* hover keeps the orange (it is still the one action) and draws a 2px ink edge; press goes ink */
.btn--primary:hover{background:var(--c-primary);border-color:var(--c-ink);color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink)}
.btn--primary:active{background:var(--c-primary-press);border-color:var(--c-primary-press);color:var(--c-ink-on-dark);box-shadow:none}
.on-ink .btn--primary:hover{background:var(--c-primary);border-color:var(--c-ink-on-dark);color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink-on-dark)}
.on-ink .btn--primary:active{background:var(--c-ink-on-dark);border-color:var(--c-ink-on-dark);color:var(--c-ink);box-shadow:none}
.btn--primary .btn__spinner{border-color:rgba(46,33,25,.25);border-top-color:var(--c-ink)}
.btn--secondary,.btn--line{background:transparent;color:var(--c-ink);border:1.5px solid var(--c-ink);font-weight:700}
.btn--secondary:hover,.btn--line:hover{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-ink-on-dark)}
.btn--lg{min-height:56px;font-size:17px;padding-inline:28px}
.btn--sm{min-height:44px;font-size:15px;padding-inline:18px}
.btn[disabled],.btn[aria-disabled='true']{background:#efe3d9;border-color:#efe3d9;color:var(--c-ink-3);box-shadow:none}
.link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--c-ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--c-field)}
.link:hover{color:var(--c-ink);text-decoration-color:var(--c-primary)}
.on-ink .link{color:var(--c-ink-on-dark);text-decoration-color:rgba(255,248,243,.5)}
/* touch screens keep :hover after a tap, which left the orange button stuck in ink (app.css hover included) */
@media (hover:none){
  .btn--primary:not([disabled]):hover:not(:active){background:var(--c-primary);border-color:var(--c-primary);color:var(--c-ink);box-shadow:none}
  .btn--secondary:not([disabled]):hover:not(:active),.btn--line:not([disabled]):hover:not(:active){background:transparent;border-color:var(--c-ink);color:var(--c-ink)}
  .on-ink .btn--primary:not([disabled]):hover:not(:active){background:var(--c-primary);border-color:var(--c-primary);color:var(--c-ink);box-shadow:none}
}

/* ---------- 5. nav ---------- */
.nav{background:var(--c-bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--c-rule)}
.nav__logo{font:600 22px/1 var(--f-display);letter-spacing:-.02em;color:var(--c-ink)}
/* 44px tap target for the wordmark link; the header rows are 60px, so nothing moves */
.nav .nav__logo,.apply-head .nav__logo,.e404__logo{display:inline-flex;align-items:center;min-height:44px}
.nav__links{gap:28px;font-size:15px;font-weight:600}
.nav__links a{color:var(--c-ink-2)}
.nav__links a:hover{color:var(--c-ink);text-decoration:underline;text-underline-offset:6px}
.nav__cta{border-radius:4px;min-height:44px;font-size:15px;padding-inline:18px}
/* phones: the section links are hidden, so one text link to the price list sits beside the button */
.nav__price{display:none}
@media (max-width:859px){
  .nav__price{display:inline-flex;align-items:center;min-height:44px;margin-left:auto;margin-right:16px;font:600 15px/1 var(--f-text);color:var(--c-ink-2);
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--c-field)}
  .nav__price:hover{color:var(--c-ink);text-decoration-color:var(--c-primary)}
}

/* ---------- 6. shared pieces ---------- */
/* credentials table */
.spec{margin:0;border-top:1px solid var(--c-rule)}
.spec>div{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;padding-block:12px;border-bottom:1px solid var(--c-rule-soft)}
.spec dt{font:600 13px/1.6 var(--f-text);color:var(--c-ink-3)}
.spec dd{margin:0;font-size:14px;line-height:1.6;color:var(--c-ink)}
.spec__item{display:block}

/* ruled list */
.ruled-list{border-top:1px solid var(--c-rule)}
.ruled-list li{padding-block:11px;border-bottom:1px solid var(--c-rule-soft);font-size:15px;line-height:1.55;color:var(--c-ink)}
.ruled-list .meta{display:inline-block;min-width:1.9em}

/* the proving number: 223만 is the only display size; the small ones are plain numbers with a label, no underline */
.figure{margin:0;font:300 var(--t-figure)/.9 var(--f-display);letter-spacing:-.05em;font-variant-numeric:lining-nums;color:var(--c-ink)}
.figure small{font-size:.32em;font-weight:500;letter-spacing:0;margin-left:.06em}
.figure--sm{font-size:var(--t-figure-sm)}
.figure-cap{display:block;max-width:16em;margin-top:12px;padding-top:10px;border-top:1px solid var(--c-rule);font:600 14px/1.5 var(--f-text);color:var(--c-ink-2)}
.figure--sm + .figure-cap{border-top:0;padding-top:0;margin-top:6px}

/* screenshots: never cropped, never boxed */
.shot{margin:0}
.shot__frame{position:relative;display:block}
.shot__frame img{display:block;width:100%;height:auto;background:#fff;border-radius:0;outline:1px solid var(--c-rule-soft);outline-offset:-1px}
.shot figcaption{margin-top:8px;font:500 13px/1.5 var(--f-text);color:var(--c-ink-3)}
.shot figcaption b{font-weight:600;color:var(--c-ink)}

/* hand-drawn ring: exactly two, each on a one-tile crop shown near 1:1 so the circled number is readable */
.ring{position:absolute;overflow:visible;pointer-events:none;fill:none;stroke:var(--c-primary);stroke-width:2.5;stroke-linecap:round}
.ring path{vector-effect:non-scaling-stroke}
.ring--sultang{left:1%;top:87.5%;width:47%;height:11.5%}    /* around "223만" in sultang-grid-cell.jpg */
.ring--oggoming{left:0;top:87%;width:54%;height:14%}  /* around "116.1만" in oggoming-grid-cell.jpg */

/* ============================================================
   index.html
   ============================================================ */

/* ---------- hero ---------- */
.hero{padding-block:0 var(--sec-y)}
.hero__grid{align-items:center}
.hero__photo{order:-1;margin:0 calc(var(--page-pad) * -1) 24px}
.hero__photo picture{display:block}
.hero__photo img{width:100%;height:auto;aspect-ratio:4/3;max-height:42svh;object-fit:cover;object-position:50% 28%;mix-blend-mode:multiply}
.byline{font-size:14px;font-weight:600;color:var(--c-ink-2)}
.hero .display{margin-top:12px}
/* The H1 keeps its three written lines at every width: the size follows the text column, so
   "86만 팔로워를 직접 키운" (about 9.8em) never wraps. */
@supports (width:1cqi){
  .hero__text{container-type:inline-size}
  .hero .display{font-size:min(var(--t-display),9.6cqi)}
}
.display__em{text-decoration:underline;text-decoration-color:var(--c-primary);text-decoration-thickness:.07em;text-underline-offset:.14em;text-decoration-skip-ink:none}
.hero__lead{margin-top:16px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:24px}
/* 2026-09-14 (4b): the text column ends at the buttons. Prices live in #programs only; the awards table moved to #about (.about__spec). */
@media (max-width:559px){.actions .btn{width:100%}}
/* short phones (SE, older Androids): a shorter photo so the button is on the first screen */
@media (max-width:559px) and (max-height:700px){.hero__photo img{max-height:30svh;object-position:50% 58%}}
@media (min-width:600px) and (max-width:899px){
  /* tablets get jinah-portrait-t.jpg, a 4:3 crop of the tall portrait (the phone crop cuts the head and chin at this width).
     The crop starts 120px down the 990px portrait, so 38% frames exactly what 38% of the full portrait did, also when
     56svh clamps the height (landscape tablets). */
  .hero__photo img{aspect-ratio:4/3;max-height:56svh;object-position:50% 38%}
}
/* landscape phones keep the tall portrait (the tablet <source> needs min-height 501px) and show it as a square beside the
   page edge: a 4:3 band this short cut through the eyes and lost the lips */
@media (max-height:500px) and (orientation:landscape) and (max-width:899px){
  .page-home .hero__photo{margin:0 0 20px}
  .page-home .hero__photo img{width:auto;max-width:100%;height:44svh;max-height:none;aspect-ratio:1/1;object-position:50% 22%}
}
@media (min-width:900px){
  .hero{padding-top:clamp(40px,5vw,72px)}
  .hero__text{grid-column:1/8;grid-row:1}
  .hero__photo{grid-column:8/13;grid-row:1;order:0;margin:0 calc(var(--page-pad) * -1) 0 0}
  .hero__photo img{aspect-ratio:4/5;min-height:480px;max-height:calc(100svh - 132px)}
}
/* once the page is capped at --page-max the photo can no longer reach the window edge; align it to the content edge */
@media (min-width:1281px){.hero__photo{margin-right:0}}

/* ---------- #proof ---------- */
.proof-a__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:20px}
.proof-a__shots{display:grid;gap:28px}
.proof-b{margin-top:clamp(56px,7vw,96px);padding-top:32px;border-top:1px solid var(--c-rule-soft)}
.proof-b__text .meta{margin-top:6px}
.proof-b .figure{margin-top:20px}
.proof-b .lead{margin-top:16px}
/* crop (ringed) · full grid · profile. fr values are width/height ratios, so all three end at the same height */
.proof-b__shots{display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,.46fr);gap:12px;margin-top:28px;align-items:start}
.proof-b__shots .shot--ctx{display:none}
@media (min-width:600px){
  .proof-b__shots{grid-template-columns:minmax(0,.76fr) minmax(0,.46fr) minmax(0,1.124fr);gap:var(--gutter)}
  .proof-b__shots .shot--ctx{display:block}
}
@media (min-width:600px) and (max-width:899px){
  .proof-a__shots{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .proof-a__shots>:first-child{grid-column:1/-1;max-width:560px}
  .proof-b__shots{max-width:640px}
}
@media (min-width:900px){
  .proof-a__shots{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:28px}
  .proof-a__shots>:nth-child(1){grid-column:1/8;grid-row:1/3}
  .proof-a__shots>:nth-child(2){grid-column:8/13;grid-row:1}
  .proof-a__shots>:nth-child(3){grid-column:8/13;grid-row:2;align-self:start}
  .proof-b{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .proof-b__text{grid-column:1/6}
  .proof-b__shots{grid-column:6/13;margin-top:0}
}

/* ---------- #about ---------- */
.about__cols{display:grid;gap:32px;margin-top:40px}
.about__h{font-size:20px;margin-bottom:12px}
/* awards table (was dl.spec.hero__spec in the hero): under the two columns, above the degree line */
.about__spec{margin-top:32px;max-width:40em}
/* .about__edu removed 2026-09-14: education line dropped at the user's request */
@media (min-width:720px){.about__cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gutter)}}

/* ---------- #cases ---------- */
.case-lead{padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--c-rule-soft)}
.case-lead__text,.case__text{display:flex;flex-direction:column;gap:8px}
.case-lead__fig,.case__fig{order:-1;margin-bottom:16px}
/* the caption rule under 223만 ends where the number ends */
.case-lead__fig{align-self:flex-start}
.case-lead__fig .figure-cap{max-width:none}
.case__body{margin-top:6px;font-size:16px;line-height:1.75;color:var(--c-ink-2);max-width:var(--measure)}
/* crop (ringed) · reels grid · profile, equal heights */
.case-lead__shots{display:grid;grid-template-columns:minmax(0,.568fr) minmax(0,.46fr);gap:12px;margin-top:32px;align-items:start}
.case-lead__shots .shot--ctx{display:none}
@media (min-width:600px){
  .case-lead__shots{grid-template-columns:minmax(0,.568fr) minmax(0,.46fr) minmax(0,.46fr);gap:var(--gutter)}
  .case-lead__shots .shot--ctx{display:block}
}
/* GNG gets a full row; 마이비 is a smaller row under it. Not a mirrored pair. */
.case{display:grid;align-items:start;padding-block:clamp(36px,4.5vw,56px)}
.case + .case{border-top:1px solid var(--c-rule-soft)}
.case--sm{padding-block:clamp(28px,3.5vw,40px) 0}
@media (max-width:899px){
  /* number, name and period beside the screenshot; the story runs full width below.
     The empty 1fr row takes the screenshot's extra height so the text lines keep their 8px rhythm. */
  .case{grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:20px;row-gap:8px}
  .case__text{display:contents}
  .case__img{grid-column:1;grid-row:1/5}
  .case__fig{grid-column:2;grid-row:1;margin-bottom:8px}
  .case__text>.h3{grid-column:2;grid-row:2}
  .case__text>.meta:first-of-type{grid-column:2;grid-row:3;align-self:start}
  .case--sm .case__text>.h3{grid-row:1}
  .case--sm .case__text>.meta:first-of-type{grid-row:2}
  .case__body,.case__text>.meta:last-child{grid-column:1/-1}
  .case__body{margin-top:12px}
}
/* where the brand cases end: the next step for a brand, as a text link (the orange button stays unique) */
.cases__after{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 16px;margin-top:clamp(28px,3.5vw,40px);padding-top:12px;border-top:1px solid var(--c-rule-soft)}
.cases__after .meta a{color:var(--c-ink-2);text-decoration:underline;text-decoration-color:var(--c-field);text-underline-offset:3px}
.cases__after .meta a:hover{color:var(--c-ink);text-decoration-color:var(--c-primary)}
@media (min-width:600px) and (max-width:899px){
  .case-lead__shots{max-width:560px}
  .case{grid-template-columns:150px minmax(0,1fr)}
  .case--sm{grid-template-columns:112px minmax(0,1fr)}
}
@media (min-width:900px){
  .case-lead{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .case-lead__text{grid-column:1/6}
  .case-lead__shots{grid-column:7/13;margin-top:0}
  .case{grid-template-columns:204px minmax(0,1fr);column-gap:clamp(32px,4vw,64px)}
  .case--sm{grid-template-columns:112px minmax(0,1fr)}
  .case--sm .case__text{padding-left:92px}   /* text starts on the same line as GNG's text */
}

/* ---------- #reference ---------- */
.stories{border-top:1px solid var(--c-rule)}
.story{display:grid;gap:20px;padding-block:clamp(32px,4vw,48px);border-bottom:1px solid var(--c-rule-soft);--shot-h:200px}
.story__who .meta{margin-top:4px}
.story__result{margin-top:10px;font-size:16px;font-weight:700;line-height:1.5;color:var(--c-ink)}
.story__point{font:400 var(--t-point)/1.4 var(--f-display);letter-spacing:-.02em;color:var(--c-ink)}
.story__text{margin-top:14px;font-size:15px;line-height:1.75;color:var(--c-ink-2);max-width:var(--measure)}
/* A definite width (capped height x the image's own ratio) reserves the space before a lazy image loads,
   so rows don't grow under an in-page jump. The ratio comes from a class on each <img>. */
.story .shot__frame{display:block}
.story .shot__frame img{height:auto;width:min(100%,calc(var(--shot-h) * var(--shot-r,1)))}
.shot--r550x866{--shot-r:.6351}
.shot--r858x604{--shot-r:1.4205}
.shot--r518x228{--shot-r:2.2719}
.story__btn{margin-top:14px}
.story__proof .btn{display:flex;width:max-content}
@media (max-width:899px){
  /* image and button side by side so each story stays short on phones */
  .story__proof{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:end}
  .story__btn{margin-top:0}
}
@media (min-width:900px){
  .story{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);--shot-h:220px}
  .story__who{grid-column:1/4} .story__say{grid-column:4/9} .story__proof{grid-column:9/13}
}

/* ---------- #fit ---------- */
.fit-list{border-top:1px solid var(--c-rule)}
.fit-list li{padding-block:18px;border-bottom:1px solid var(--c-rule-soft);font:400 var(--t-h3)/1.4 var(--f-display);letter-spacing:-.02em;color:var(--c-ink)}
.fit__after{margin-top:16px}

/* ---------- #programs (the lecture row carries the lecture history, id="lectures") ---------- */
.plans{border-top:1px solid var(--c-rule)}
.plans__head{display:none}
.plan{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "term price" "items items" "cta cta";column-gap:16px;row-gap:6px;padding-block:28px;border-bottom:1px solid var(--c-rule-soft)}
.plan__name{grid-area:name;font:600 var(--t-h3)/1.3 var(--f-display);letter-spacing:-.02em}
.plan__term{grid-area:term}
.plan__items{grid-area:items;margin-top:8px;font-size:15px;line-height:1.75;color:var(--c-ink-2)}
.plan__items b{font-weight:700}
.plan__price{grid-area:price;text-align:right;white-space:nowrap;font:400 var(--t-price)/1.1 var(--f-display);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em;color:var(--c-ink)}
.plan__price small{display:block;max-width:12em;margin:6px 0 0 auto;white-space:normal;font:600 13px/1.4 var(--f-text);letter-spacing:0;color:var(--c-ink-3)}
.plan__cta{grid-area:cta;margin-top:10px}
.plan__cta .btn{width:100%;min-height:48px}
@media (min-width:900px){
  .plans__head,.plan{grid-template-columns:minmax(0,1.15fr) minmax(0,2fr) minmax(0,.8fr) minmax(0,1fr) 150px;column-gap:var(--gutter)}
  .plans__head{display:grid;padding-block:10px;border-bottom:1px solid var(--c-rule-soft)}
  .plan{grid-template-areas:"name items term price cta";align-items:start;padding-block:32px}
  .plan__items{margin-top:0}
  .plan__term{padding-top:4px}
  .plan__price{text-align:left} .plan__price small{margin-left:0}
  .plan__cta{justify-self:end;margin-top:0} .plan__cta .btn{width:auto;min-width:130px;min-height:44px}
}
@media (min-width:900px) and (max-width:1199px){
  /* four columns: the period moves under the plan name, so names stay on one line and '월 200만원~' fits */
  .plans__head,.plan{grid-template-columns:minmax(0,1.35fr) minmax(0,2fr) minmax(0,1.05fr) 136px}
  .plans__head>:nth-child(3){display:none}
  .plan{grid-template-areas:"name items price cta" "term items price cta";grid-template-rows:auto 1fr;row-gap:4px}
  .plan__term{padding-top:0}
  .plan__price{font-size:24px}
  .plan__cta{justify-self:stretch}
  .plan__cta .btn{min-width:0;width:100%;padding-inline:10px}
}
@media (min-width:1200px){
  /* name, items, period and price start on one text baseline */
  .plan{align-items:baseline}
  .plan__term{padding-top:0}
  .plan__cta{align-self:start}
}
.plans__note{margin-top:14px}
@media (min-width:900px){.plans__note{display:none}}   /* the table head says it from here up */

/* ---------- #process: a short ruled list at every width ---------- */
.steps{border-top:1px solid var(--c-rule)}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding-block:20px;border-bottom:1px solid var(--c-rule-soft)}
.steps__no{grid-row:1/4;font:300 28px/1 var(--f-display);font-variant-numeric:lining-nums;color:var(--c-ink)}
.steps .h3{display:block;font-size:20px}
.steps li p{margin-top:6px;font-size:15px;line-height:1.7;color:var(--c-ink-2);max-width:var(--measure)}
.steps li p.meta{margin-top:10px;font-size:13px;color:var(--c-ink-3)}

/* ---------- #works: text rows ---------- */
.rows{border-top:1px solid var(--c-rule)}
.rows li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding-block:16px;border-bottom:1px solid var(--c-rule-soft)}
.rows__text{flex-basis:100%}
.rows li.rows__head{display:none}
.rows__name{font:600 19px/1.35 var(--f-display);letter-spacing:-.01em;color:var(--c-ink)}
.rows__text{font-size:15px;line-height:1.65;color:var(--c-ink-2)}
@media (min-width:720px){
  .rows--3 li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,2fr);column-gap:var(--gutter);align-items:baseline;padding-block:18px}
  .rows li.rows__head{display:grid;padding-block:10px}
}

/* ---------- #faq ---------- */
.faq{border-top:1px solid var(--c-rule)}
.faq-item{border-bottom:1px solid var(--c-rule-soft)}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;min-height:48px;padding-block:20px;cursor:pointer;font:700 17px/1.5 var(--f-text);color:var(--c-ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:14px;height:14px;margin-top:6px;
  background:linear-gradient(var(--c-ink),var(--c-ink)) center/14px 1.5px no-repeat,linear-gradient(var(--c-ink),var(--c-ink)) center/1.5px 14px no-repeat}
.faq-item[open] summary::after{background-size:14px 1.5px,1.5px 0}
.faq-item p{max-width:40em;padding-bottom:24px;font-size:16px;line-height:1.75;color:var(--c-ink-2)}

/* ---------- reference modal ---------- */
.ref-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.ref-modal[hidden]{display:none}
.ref-modal__scrim{position:absolute;inset:0;background:rgba(46,33,25,.55);animation:fade .2s ease}
.ref-modal__panel{position:relative;width:100%;max-width:960px;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;background:var(--c-bg);border-radius:0;box-shadow:var(--sh-modal);--panel-pad:clamp(20px,4vw,40px);padding:var(--panel-pad)}
/* the close button sits 12px inside the panel corner and stays there while the before/after images scroll under it.
   Negative margins take it out of the flow, so the title starts at the panel padding as before. */
.ref-modal__close{position:sticky;top:calc(12px - var(--panel-pad));z-index:1;display:block;margin:calc(12px - var(--panel-pad)) calc(12px - var(--panel-pad)) calc(var(--panel-pad) - 56px) auto;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--c-ink);border-radius:4px;background:var(--c-bg);box-shadow:0 0 0 6px var(--c-bg);color:var(--c-ink);font:600 14px var(--f-text);cursor:pointer}
.ref-modal__close:hover{background:var(--c-ink);color:var(--c-ink-on-dark)}
#refModalTitle{padding-right:72px;font-size:var(--t-title-2);line-height:1.3}
#refModalTitle .meta{margin-left:4px;font-size:14px;letter-spacing:0}
.ref-stats{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:20px}
.ref-stat-box{flex:1 1 140px;border-top:1px solid var(--c-rule);padding-top:10px}
.ref-stat-box b{display:block;white-space:nowrap;font:300 clamp(26px,1.6vw + 20px,34px)/1.1 var(--f-display);letter-spacing:-.03em;color:var(--c-ink)}
.ref-stat-box span{font:600 13px/1.5 var(--f-text);color:var(--c-ink-3)}
/* before | after, side by side from 700px */
.ref-compare{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:28px}
@media (min-width:700px){.ref-compare{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gutter)}}
.ref-phase{padding-top:12px;border-top:1px solid var(--c-rule)}
.ref-phase h4{margin:0;font:600 19px/1.3 var(--f-display)}
.ref-shots{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 12px;margin-top:12px}
/* three portrait captures pair up; one or two captures take the column width so their numbers stay readable */
.ref-col--after .ref-shots:has(>figure:nth-child(3)){grid-template-columns:repeat(2,minmax(0,1fr))}
.ref-shots figure{margin:0}
.ref-shots img{display:block;width:100%;height:auto;background:#fff;outline:1px solid var(--c-rule-soft);outline-offset:-1px}
.ref-shot__cap{display:block;margin-top:6px;font:600 13px/1.4 var(--f-text);color:var(--c-ink-3)}
.ref-shot__cap--after{color:var(--c-ink)}
.ref-hint{margin-top:8px}
.ref-note{margin-top:16px;font-size:14px;color:var(--c-ink-3);border-top:1px solid var(--c-rule-soft);padding-top:12px}
.ref-modal__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px;padding-top:20px;border-top:1px solid var(--c-rule)}
@media (max-width:559px){.ref-modal__foot .btn{width:100%}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- #contact + footer: one ink band ---------- */
.close{background:var(--c-dark);color:var(--c-ink-on-dark)}
.close__inner{row-gap:24px;padding-block:clamp(72px,9vw,128px) clamp(48px,6vw,80px)}
.close__photo{width:112px;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:55% 25%}
.close .h2{color:var(--c-ink-on-dark)}
.close .lead{margin-top:16px;color:var(--c-ink-2-on-dark)}
.close strong{color:var(--c-ink-on-dark)}
.close .btn{margin-top:28px}
.close .meta,.footer .meta{color:var(--c-ink-2-on-dark)}
.close .meta{margin-top:14px}
.footer{background:var(--c-dark);color:var(--c-ink-on-dark);border-top:0}
/* the rule spans the content width like every other rule, not the padded .wrap box */
.footer__inner{position:relative;border-top:0;padding-block:28px calc(40px + env(safe-area-inset-bottom))}
.footer__inner::before{content:"";position:absolute;top:0;left:var(--page-pad);right:var(--page-pad);border-top:1px solid var(--c-dark-line)}
.footer .nav__logo{color:var(--c-ink-on-dark);font-size:19px;margin-right:8px}
.footer__op{display:block;margin-top:4px}
.footer__links{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.footer__links a{color:var(--c-ink-on-dark);font-size:14px;min-height:44px;display:inline-flex;align-items:center}
.footer__links a:hover{color:var(--c-ink-on-dark);text-decoration:underline;text-underline-offset:4px}
@media (max-width:559px){.close .btn{width:100%}}
@media (min-width:900px){
  .close__photo{grid-column:1/4;width:100%}
  .close__body{grid-column:5/12;align-self:center}
}

/* ---------- sticky mobile CTA ---------- */
/* 84px tall; while it is in use (body.mcta-on) the footer keeps that much room at its end */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-cta);box-sizing:border-box;min-height:calc(84px + env(safe-area-inset-bottom));padding:12px var(--page-pad) calc(12px + env(safe-area-inset-bottom));background:var(--c-bg);border-top:1px solid var(--c-rule);transition:transform var(--dur-slow) var(--ease-out),visibility 0s linear}
/* while parked below the screen it is also out of the tab order (and out of full-page captures) */
.mcta[style*="120%"]{visibility:hidden;transition:transform var(--dur-slow) var(--ease-out),visibility 0s linear var(--dur-slow)}
.mcta-on .footer__inner{padding-bottom:calc(40px + 84px + env(safe-area-inset-bottom))}
/* one orange "상담 신청" at a time on phones: the hero button, then the bar, then #contact's button.
   The nav button only stands in while the hero button is still below the screen (landscape, very short phones);
   hidden from the first paint, so the nav never shifts on load. */
@media (max-width:859px){.page-home:not(.nav-cta-on) .nav__cta{display:none}}

/* landscape phones: the sticky nav and bar would cover a third of the screen */
@media (max-height:500px) and (orientation:landscape){
  .page-home .nav{position:static}
  :root:has(body.page-home){scroll-padding-top:16px}
  .mcta{min-height:calc(64px + env(safe-area-inset-bottom));padding-block:8px calc(8px + env(safe-area-inset-bottom))}
  .mcta .btn{min-height:48px}
  .mcta-on .footer__inner{padding-bottom:calc(40px + 64px + env(safe-area-inset-bottom))}
}

/* ============================================================
   404.html
   ============================================================ */
.page-404 .apply-head{background:var(--c-bg);border-bottom:1px solid var(--c-rule)}
/* the ruled header (same as privacy/terms) takes 61px of the first screen */
.e404{min-height:calc(100dvh - 61px);display:grid;align-content:center;gap:40px;padding-block:64px}
.e404 .title-1{margin-top:0}
.e404 .lead{margin-top:14px}
.e404__photo{display:none}
@media (min-width:900px){
  .e404{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center}
  .e404__text{grid-column:1/8}
  .e404__photo{display:block;grid-column:9/13;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:55% 28%;mix-blend-mode:multiply}
}

/* ============================================================
   apply.html: operate mode. Calm, ruled, no decoration.
   Styles only the hooks apply.js already uses (spec §0.4); nothing is renamed or hidden here.
   ============================================================ */
.page-apply .apply-head{background:var(--c-bg);border-bottom:1px solid var(--c-rule)}
.page-apply .apply-head .caption{font:600 13px/1.5 var(--f-text);color:var(--c-ink-3)}
.page-apply .apply-main{padding-block:32px 24px}
@media (min-width:900px){.page-apply .apply-main{padding-block:56px 32px}}
/* a short step (a lecture / biz inquiry's step 3 is a single text box) keeps the bottom bar at the bottom of the screen
   instead of floating right under the box: while the form shows, the page is at least one screen tall below the 61px header
   and the bar is pushed to the end of the form (margin-top:auto is 0 on long steps). The bar is the page's last row, so the
   bottom padding goes: at the end of a long step the bar now rests on the screen edge instead of 24/32px above it.
   (No padding inside the min-height also keeps full-page captures stable: 100svh there is the page height.) */
.page-apply .apply-main:has(> #applyForm:not([hidden])){display:flex;flex-direction:column;min-height:calc(100svh - 61px);padding-bottom:0}
.page-apply #applyForm{flex:1 0 auto;display:flex;flex-direction:column}
.page-apply #applyForm > .cta-bar{margin-top:auto}
/* text-link buttons ("날짜 더 보기", "처음부터 다시 쓰기") drop the UA button box and read like .link */
.page-apply button.link{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:0;padding:0;font-family:inherit;font-size:15px;cursor:pointer}
/* a restored draft says so once, with a way to start over */
.restore-note{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin:0 0 16px;border-bottom:1px solid var(--c-rule-soft);color:var(--c-ink-2)}
.restore-note .link{font-size:14px}

/* progress: serif counter, hairline bar */
.progress__label{font:400 17px/1 var(--f-display);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em;color:var(--c-ink)}
#progressHint{font-size:13px;font-weight:600;color:var(--c-ink-3)}
.progress__bar{height:2px;background:var(--c-rule-soft);border-radius:0}
.progress__fill{background:var(--c-ink);border-radius:0}

/* step heads and question rhythm */
.page-apply .step__lead{font:500 clamp(28px,2.4vw + 19px,40px)/1.2 var(--f-display);letter-spacing:-.03em;text-wrap:balance;margin-bottom:10px}
/* the heading takes focus after a step change so screen readers start at the question; it is not a control, so no ring */
.page-apply .step__lead:focus{outline:none}
.page-apply .step__sub{font-size:16px;line-height:1.7;color:var(--c-ink-2);text-wrap:pretty;margin-bottom:40px}
.page-apply .q + .q{margin-top:36px;padding-top:28px;border-top:1px solid var(--c-rule-soft)}
.page-apply .q:has(> .consent){padding-top:0;border-top:0}
/* lecture / biz inquiries hide step 3's creator questions (js/apply.js); the message box is then the first question, with no rule above it */
.page-apply .q[data-creator-only][hidden] + .q:not([data-creator-only]){margin-top:0;padding-top:0;border-top:0}
/* ...and that box is where the whole request is described: start taller and grow with the text instead of scrolling inside */
.page-apply .q[data-creator-only][hidden] + .q:not([data-creator-only]) .textarea{min-height:168px;field-sizing:content;max-height:50svh}

/* fields */
.field__label{font-size:17px;font-weight:700;line-height:1.45}
.field__req{color:var(--c-primary-ink);margin-left:3px}
.field__hint{font-size:14px;color:var(--c-ink-3)}
.page-apply .field__hint,.page-apply .consent__text{text-wrap:pretty}
/* "2개 모두 골랐어요": the limit is explained right under the question while the other cards are greyed out */
.field__hint--full{color:var(--c-ink);font-weight:600}
.page-apply .field__label + .field__hint{margin-top:-4px}
.page-apply .field > .choices,.page-apply .field > .input,.page-apply .field > .select,.page-apply .field > .textarea{margin-top:4px}
.input,.textarea,.select{border:1px solid var(--c-field);border-radius:6px;font-weight:500}
.input:hover,.textarea:hover,.select:hover{border-color:var(--c-ink-3)}
/* focus: a 2px ink edge (1px border + 1px ring) like every other control, with the orange halo outside it */
.input:focus,.textarea:focus,.select:focus{border-color:var(--c-ink);box-shadow:0 0 0 1px var(--c-ink),0 0 0 4px rgba(255,92,56,.35)}
.field--invalid .input,.field--invalid .textarea,.field--invalid .select{border-color:var(--c-error);box-shadow:inset 0 0 0 1px var(--c-error)}
/* an unanswered card group shows it on the cards too, not only in the error line under them (which can sit below the fold).
   Direct cards only: the 21+ time chips stay calm, their error line sits right under the list. */
.page-apply .field--invalid .choices > .choice:not(:has(input:checked)){border-color:var(--c-error)}
.field--invalid .input:focus,.field--invalid .textarea:focus,.field--invalid .select:focus{box-shadow:inset 0 0 0 1px var(--c-error),0 0 0 3px rgba(196,42,54,.25)}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%235e4f45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.field__error{font-weight:600}

/* choice cards: ink when chosen, never orange */
.choice{border:1px solid var(--c-field);border-radius:6px;background:var(--c-surface);min-height:60px;padding:14px 16px;font-size:16px;font-weight:500;line-height:1.45}
/* Fixing a field hides its error on blur, which moves everything below it up by one line while a tap is in progress.
   Tall cards whose hit area also covers half of each gap keep that tap on the card the person aimed at. */
.choice::before{content:"";position:absolute;inset:-4px}
.choice:hover{border-color:var(--c-ink-3);background:var(--c-surface)}
.choice:has(input:checked){border-color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-ink);background:var(--c-surface)}
.choice__mark{width:20px;height:20px;border:1.5px solid var(--c-field)}
.choice__mark::after{width:8px;height:8px}
.choice--multi .choice__mark{border-radius:3px}
.choice--multi .choice__mark::after{width:12px;height:12px}
.choice:has(input:checked) .choice__mark{background:var(--c-ink);border-color:var(--c-ink)}
.choice:has(input:focus-visible){outline:2px solid var(--c-ink);outline-offset:3px}
.choice:has(input:disabled){opacity:1;background:var(--c-surface-sunken);border-color:var(--c-rule-soft);color:var(--c-ink-3)}
.choice:has(input:disabled) .choice__mark{background:transparent;border-color:var(--c-rule-soft)}
.choice .caption{display:block;margin-top:2px;font-size:14px;font-weight:500;color:var(--c-ink-3)}
.choices--2{grid-auto-rows:1fr}
@media (max-width:359px){.choices--2{grid-template-columns:1fr}}
/* "교육기관 · 기관" keeps its dot with the words (&nbsp;); below 375px the six client types stack instead of breaking mid-word */
@media (max-width:374px){.page-apply .choices--2[data-name="client_type"]{grid-template-columns:1fr;grid-auto-rows:auto}}
@media (min-width:375px) and (max-width:419px){.page-apply [data-name="client_type"] .choice{padding-inline:10px;gap:8px}}
/* program cards pair up once there is room, so the second question starts on the first screen */
@media (min-width:600px){.page-apply .choices[data-name="program"]{grid-template-columns:1fr 1fr;grid-auto-rows:1fr}}
/* step 4 is all optional: one-line boxes that grow with the text instead of eight tall empty boxes, on a tighter rhythm */
.page-apply [data-step="4"] .textarea{min-height:56px;field-sizing:content}
.page-apply [data-step="4"] .q + .q{margin-top:24px;padding-top:20px}

/* time slots: a note, then a ruled grid of time chips per date (the nearest dates first, then "날짜 더 보기").
   Chips carry only the time, so four fit a phone row; a chosen time turns ink (the input is still a checkbox for AT). */
#slotChoices{grid-auto-rows:auto}
#slotChoices > div,#slotChoices > p,#slotChoices > button{grid-column:1 / -1}
#slotChoices .slot-note{margin:8px 0 0}
#slotChoices .slot-day{margin-bottom:8px}
#slotChoices .slot-day__date{display:block;margin:4px 0 8px;padding-top:10px;border-top:1px solid var(--c-rule-soft);font-weight:700;color:var(--c-ink-2)}
#slotChoices .slot-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
#slotChoices .slot-chips .choice{justify-content:center;min-height:44px;padding:8px 6px;font-variant-numeric:tabular-nums}
#slotChoices .slot-chips .choice__mark{display:none}
#slotChoices .slot-chips .choice:has(input:checked){background:var(--c-ink);border-color:var(--c-ink);color:var(--c-ink-on-dark);font-weight:700}
#slotChoices .slot-more{justify-self:start}

/* consent: a ruled block, not a box */
.consent{background:transparent;border:0;border-top:1px solid var(--c-rule);border-radius:0;padding:20px 0 0}
/* box and sentence are both 44px rows on one centre line; tapping either checks the box */
.consent > .choice{min-height:44px;padding:0;border:0}
.consent .choice,.consent .choice:has(input:checked){box-shadow:none;background:none}
.consent .choice::before{content:"";position:absolute;inset:0 -6px 0 -12px}  /* 44px tap area around the 20px box */
.consent__label{display:inline-flex;align-items:center;min-height:44px;cursor:pointer}
.consent__text{font-size:14px;line-height:1.6;color:var(--c-ink-2)}
.consent details{margin-top:0}
.consent summary{color:var(--c-ink-2);text-decoration:underline;text-decoration-color:var(--c-field);text-underline-offset:4px;min-height:44px;padding-block:11px}
.consent summary::marker{color:var(--c-ink-3)}
.consent summary:hover{color:var(--c-ink)}
.consent a{text-decoration:underline;text-underline-offset:3px}
.field--invalid .consent .choice__mark{border-color:var(--c-error);border-width:2px}
/* the consent error is the last line of step 5; keep it off the bar's rule */
.page-apply #err-consent{margin-bottom:16px}
#brandDiagnosisNote{background:var(--c-surface);border:1px solid var(--c-rule-soft);border-left:2px solid var(--c-ink);border-radius:0;padding:14px 16px;scroll-margin-bottom:16px}

/* bottom action bar */
.cta-bar{flex-wrap:wrap;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-top:0}
.cta-bar .btn{min-height:var(--cta-h);font-size:17px}
/* a failed submit leaves the reason and the mail fallback inside the bar, right above the button that was pressed */
#submitFallback{flex-basis:100%;margin:0 0 4px;font-size:13px;line-height:1.55;color:var(--c-ink-2);text-align:left;text-wrap:pretty}
#submitFallback strong{color:var(--c-error)}
#submitFallback a{text-decoration:underline;text-underline-offset:3px}
/* the bar sits inside the 680px column; its ground and rule run the full window width like the header's */
.cta-bar::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--c-bg);border-top:1px solid var(--c-rule)}
body.page-apply{overflow-x:clip}
.page-apply .toast{width:max-content;max-width:calc(100vw - 40px);line-height:1.5;border-radius:4px}
body:has(.cta-bar) .toast{bottom:calc(96px + env(safe-area-inset-bottom))}
.cta-bar .btn--secondary{flex:0 0 96px}

/* landscape phones: a slimmer bar and tighter head so a question fits above it */
@media (max-height:500px) and (orientation:landscape){
  .cta-bar{padding-block:8px calc(8px + env(safe-area-inset-bottom))}
  .cta-bar .btn{min-height:48px}
  .page-apply .apply-main{padding-top:8px}
  #progress{margin-bottom:16px!important}
  .page-apply .step__lead{font-size:30px}
  .page-apply .step__sub{margin-bottom:16px}
  body:has(.cta-bar) .toast{bottom:calc(72px + env(safe-area-inset-bottom))}
}
/* short portrait phones (SE and older Androids) */
@media (max-width:559px) and (max-height:700px){
  .page-apply .apply-main{padding-top:20px}
  #progress{margin-bottom:20px!important}
  .page-apply .step__sub{margin-bottom:24px}
  .page-apply .q + .q{margin-top:28px;padding-top:20px}
}

/* done screen: the serif heading opens it on its own (no success badge) */
.page-apply .done{text-align:left;padding-block:16px 48px}
@media (min-width:900px){.page-apply .done{padding-block:32px 64px}}
.page-apply .done__icon{display:none}
.page-apply .next-steps.card{background:none;border:0;border-top:1px solid var(--c-rule);border-radius:0;padding:0}
.page-apply .next-steps li{gap:14px;padding-block:18px}
.page-apply .next-steps__no{width:auto;height:auto;min-width:28px;background:none;border-radius:0;place-items:start;font:300 26px/1 var(--f-display);font-variant-numeric:lining-nums;color:var(--c-ink)}
.page-apply .next-steps li strong{font:600 18px/1.35 var(--f-display);letter-spacing:-.02em}
.page-apply .next-steps .caption{display:inline-block;margin-top:4px;line-height:1.6}
/* the spam-folder advice appears once: #doneEmailed already carries it when a mail went out */
.page-apply .done:has(#doneEmailed:not([hidden])) .done__spam{display:none}
#doneMail{text-decoration:underline;text-underline-offset:3px}
#doneTo strong{overflow-wrap:anywhere}
/* #donePay markup comes from apply.js with inline peach colours; !important is the only way to reach them from CSS */
#donePay .card{background:var(--c-surface)!important;border-color:var(--c-rule-soft)!important;border-radius:6px}
#donePay .eyebrow{color:var(--c-ink-2)!important}
#donePay .card > div:first-of-type{font-family:var(--f-display)!important;font-weight:400!important;letter-spacing:-.02em!important;font-variant-numeric:lining-nums tabular-nums}
#donePay td{border-top-color:var(--c-rule-soft)!important}
#donePay a{text-decoration:underline;text-underline-offset:3px}
#copyAcct{min-height:44px!important;padding-inline:14px!important;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   privacy.html, terms.html: reading pages
   ============================================================ */
.page-doc .apply-head{background:var(--c-bg);border-bottom:1px solid var(--c-rule)}
.page-doc .apply-head .link{font-size:15px}
.page-doc .doc{max-width:var(--read-max)}
.page-doc .doc .title-1{margin-bottom:0}
.page-doc .doc h2{font:700 17px/1.5 var(--f-text);margin:48px 0 12px;padding-top:16px;border-top:1px solid var(--c-rule-soft)}
.page-doc .doc h3{font:700 16px/1.5 var(--f-text)}
.page-doc .doc p,.page-doc .doc li{font-size:15px;line-height:1.8;color:var(--c-ink-2)}
.page-doc .doc p.caption{font-size:14px;line-height:1.6;color:var(--c-ink-3)}
/* consecutive paragraphs get a pause between them */
.page-doc .doc p + p{margin-top:12px}
.page-doc .doc p + p.caption{margin-top:16px}
.page-doc .doc li::marker{color:var(--c-ink-3)}
.page-doc .doc table{border-top:1px solid var(--c-rule);font-size:14px}
.page-doc .doc th,.page-doc .doc td{border:0;border-bottom:1px solid var(--c-rule-soft);padding:12px 12px 12px 0;line-height:1.65}
.page-doc .doc th{background:none;border-bottom-color:var(--c-rule);font:600 13px/1.5 var(--f-text);color:var(--c-ink-2)}
.page-doc .doc tbody th{border-bottom-color:var(--c-rule-soft);font-size:14px;color:var(--c-ink)}
.page-doc .doc td{color:var(--c-ink-2)}
.page-doc .doc td[rowspan]{padding-left:12px;border-left:1px solid var(--c-rule-soft)}
.page-doc .doc a:not(.btn){text-decoration:underline;text-underline-offset:3px}
/* the 3-column refund table and the merged-cell tables keep readable columns on phones and scroll inside .doc-scroll instead */
@media (max-width:559px){.page-doc .refund-table,.page-doc .doc-scroll>table:has(td[rowspan]){min-width:480px}}
/* scroll shadows: an edge shadow shows only on the side that still has more table (covers scroll with the content) */
.page-doc .doc-scroll{background:
  linear-gradient(to right,var(--c-bg) 40%,rgba(255,253,250,0)) left center/28px 100% no-repeat local,
  linear-gradient(to left,var(--c-bg) 40%,rgba(255,253,250,0)) right center/28px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(46,33,25,.18),rgba(46,33,25,0)) left center/12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(46,33,25,.18),rgba(46,33,25,0)) right center/12px 100% no-repeat scroll}