/* =========================================================
   베테랑스 토플 공개 사이트 R5
   공부한 기록을 고르지 않고 그대로 보여주는 토플 학원.
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  /* ink (brand navy) */
  --c-ink: #0b1b33;
  --c-ink-2: #1d2f4b;
  --c-text: #32425a;
  --c-muted: #5f6f86;
  --c-faint: #93a2b6;

  /* ice surfaces */
  --c-bg: #ffffff;
  --c-ice: #f4f8fc;
  --c-ice-2: #e8f1fa;
  --c-ice-3: #d6e6f5;
  --c-line: #e1e9f2;
  --c-line-2: #cddaea;
  --c-deep: #08162b;
  --c-deep-2: #10233f;

  /* action — clear cobalt */
  --c-blue: #1857dc;
  --c-blue-600: #1146b5;
  --c-blue-50: #ecf2fe;

  /* signature — 숨기지 않는 성적표 (report) */
  --c-pink: #ef4f7d;
  --c-pink-600: #cf3563;
  --c-pink-50: #fff0f4;

  /* correction marks (실제 첨삭 화면과 같은 빨강/파랑) */
  --c-red: #d4283f;
  --c-red-50: #fdedef;
  --c-mark: #1c5ed6;
  --c-mark-50: #eaf1fd;
  --c-ok: #0f8a5f;

  /* type */
  --f-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --f-num: "Pretendard Variable", Pretendard, "SF Pro Display", system-ui, sans-serif;
  --t-hero: clamp(34px, 4.6vw, 62px);
  --t-h2: clamp(27px, 3.1vw, 42px);
  --t-h3: clamp(19px, 1.6vw, 22px);
  --t-body: 16px;
  --t-small: 14px;
  --t-eyebrow: 12.5px;

  /* shape */
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 32px;
  --sh-1: 0 1px 2px rgba(11, 27, 51, .05), 0 6px 20px rgba(11, 27, 51, .06);
  --sh-2: 0 30px 70px -28px rgba(11, 27, 51, .35), 0 2px 6px rgba(11, 27, 51, .05);
  --sh-float: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 24px 60px -30px rgba(16, 52, 110, .35);

  /* layout */
  --w-max: 1200px;
  --gutter: 32px;
  --sec-y: clamp(72px, 9vw, 128px);
  --hd-h: 68px;
  --bar-h: 0px;
}
@media (max-width: 760px) {
  :root { --gutter: 16px; --hd-h: 58px; --bar-h: 64px; }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hd-h) + 16px); }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font: 400 var(--t-body)/1.65 var(--f-sans); letter-spacing: -0.01em;
  word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased;
  padding-bottom: var(--bar-h); overflow-x: clip;
}
:where(.h5) img, :where(.h5) svg, :where(.h5) video { display: block; max-width: 100%; height: auto; }
:where(.h5) a { color: inherit; text-decoration: none; }
:where(.h5) button { font: inherit; color: inherit; cursor: pointer; }
:where(.h5) h1, :where(.h5) h2, :where(.h5) h3, :where(.h5) h4, :where(.h5) p, :where(.h5) ul, :where(.h5) ol, :where(.h5) dl, :where(.h5) dd, :where(.h5) figure { margin: 0; }
:where(.h5) ul, :where(.h5) ol { padding: 0; list-style: none; }
:where(.h5) h1, :where(.h5) h2, :where(.h5) h3, :where(.h5) h4 { color: var(--c-ink); letter-spacing: -0.035em; line-height: 1.22; font-weight: 750; }
strong, b { font-weight: 700; color: var(--c-ink); }
:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--c-ink); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }

.wrap { width: min(100% - var(--gutter) * 2, var(--w-max)); margin-inline: auto; }
.sec { padding-block: var(--sec-y); }
.sec--ice { background: var(--c-ice); }
.sec--deep { background: var(--c-deep); color: #c6d3e6; }
.sec--deep h2, .sec--deep h3, .sec--deep strong { color: #fff; }
.sec--tight { padding-block: clamp(48px, 6vw, 80px); }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-blue); }
.eyebrow--pink { color: var(--c-pink-600); }
.eyebrow--red { color: var(--c-red); }
.sec--deep .eyebrow { color: #8fb4ff; }
.h2 { font-size: var(--t-h2); margin-top: 14px; }
.lead { font-size: clamp(16px, 1.3vw, 18.5px); color: var(--c-muted); margin-top: 16px; max-width: 640px; line-height: 1.7; }
.sec--deep .lead { color: #a9bad3; }
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 56px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .lead { margin-inline: auto; }
.note { font-size: 13px; color: var(--c-faint); margin-top: 18px; line-height: 1.6; }
.sec--deep .note { color: #7f93b1; }

/* ---------- 3. Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--c-blue); color: #fff; box-shadow: 0 10px 24px -10px rgba(24, 87, 220, .7); }
.btn--primary:hover { background: var(--c-blue-600); }
.btn--ink { background: var(--c-ink); color: #fff; }
.btn--ghost { background: #fff; color: var(--c-ink); border-color: var(--c-line-2); }
.btn--ghost:hover { border-color: var(--c-ink); }
.btn--clear { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .22); }
.btn--clear:hover { background: rgba(255, 255, 255, .16); }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 16.5px; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(3px); }
.kakao-dot { width: 18px; height: 18px; border-radius: 50%; background: #fee500; display: inline-grid; place-items: center; flex: none; }
.kakao-dot::before { content: ""; width: 9px; height: 7px; background: #3a1d1d; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.text-link { color: var(--c-blue); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 4. Announcement + header ---------- */
.notice-bar { background: var(--c-deep); color: #c9d6ea; font-size: 13.5px; }
.notice-bar .wrap { display: flex; align-items: center; justify-content: center; gap: 10px 18px; min-height: 40px; flex-wrap: wrap; padding-block: 6px; text-align: center; }
.notice-bar strong { color: #fff; }
.notice-bar .tag { background: var(--c-pink); color: #fff; font-weight: 700; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; letter-spacing: .04em; }
.notice-bar a { color: #9fc0ff; font-weight: 700; }
.notice-bar .dim { color: #8496b3; }
.notice-bar .n-short { display: none; }

.hd { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid rgba(225, 233, 242, .9); }
.hd__in { display: flex; align-items: center; gap: 28px; height: var(--hd-h); }
.hd__logo img { width: 168px; height: auto; }
.hd__nav { display: flex; gap: 4px; margin-right: auto; }
.hd__nav a { padding: 8px 12px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--c-ink-2); }
.hd__nav a:hover { background: var(--c-ice); }
.hd__nav a[aria-current="page"] { color: var(--c-blue); background: var(--c-blue-50); }
.hd__util { display: flex; gap: 14px; font-size: 13px; color: var(--c-muted); font-weight: 600; }
.hd__util a:hover { color: var(--c-ink); }
.hd__act { display: flex; gap: 8px; }
.hd__menu { display: none; }

@media (max-width: 1180px) { .hd__util { display: none; } }
@media (max-width: 1260px) {
  .hd__nav, .hd__act { display: none; }
  .hd__in { justify-content: space-between; }
  .hd__menu { display: block; }
  .hd__menu summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--c-line-2); font-weight: 700; font-size: 14px; color: var(--c-ink); background: #fff; }
  .hd__menu summary::-webkit-details-marker { display: none; }
  .hd__menu summary .bars { width: 16px; height: 10px; border-block: 2px solid currentColor; position: relative; }
  .hd__menu summary .bars::after { content: ""; position: absolute; inset: 2px 0 auto; border-top: 2px solid currentColor; }
  .hd__panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--c-line); box-shadow: var(--sh-2); padding: 12px var(--gutter) 22px; max-height: calc(100vh - var(--hd-h)); overflow-y: auto; }
  .hd__panel a.m { display: flex; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--c-line); font-weight: 700; color: var(--c-ink); font-size: 16.5px; }
  .hd__panel a.m small { color: var(--c-faint); font-weight: 600; font-size: 12px; letter-spacing: .08em; }
  .hd__panel .btn-row { margin-top: 18px; }
  .hd__panel .btn { flex: 1 1 140px; }
  .hd__panel .login { display: flex; gap: 16px; margin-top: 16px; font-size: 14px; color: var(--c-muted); font-weight: 600; }
}
@media (max-width: 760px) { .hd__logo img { width: 138px; } }

/* mobile sticky action bar */
.mbar { display: none; }
@media (max-width: 760px) {
  .mbar { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 6px; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--c-line); }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: 14px; font-weight: 700; font-size: 14px; color: var(--c-ink); background: var(--c-ice); }
  .mbar a.go { background: var(--c-blue); color: #fff; }
}

/* ---------- 5. Signature marks (report / correction) ---------- */
.sig { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.sig--pink { background: var(--c-pink-50); color: var(--c-pink-600); }
.sig--fix { background: var(--c-red-50); color: var(--c-red); }
.sig__ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; flex: none; }
.sig__ico svg { width: 18px; height: 18px; }

/* ---------- 6. Hero ---------- */
.hero { position: relative; overflow: hidden; background:
  radial-gradient(900px 480px at 85% -10%, rgba(120, 178, 255, .28), transparent 60%),
  radial-gradient(700px 420px at -5% 110%, rgba(239, 79, 125, .10), transparent 60%),
  linear-gradient(180deg, #f6faff 0%, #ffffff 70%); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(24, 87, 220, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 87, 220, .05) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, #000 0%, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); pointer-events: none; }
.hero .wrap { position: relative; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; padding-block: clamp(40px, 5vw, 76px) clamp(56px, 6vw, 92px); }
.hero__kicker { display: flex; flex-wrap: wrap; gap: 8px; }
.hero h1 { font-size: var(--t-hero); margin-top: 22px; letter-spacing: -0.045em; line-height: 1.12; font-weight: 800; }
.hero h1 .pk { color: var(--c-pink); }
.hero h1 .rd { color: var(--c-red); }
.hero h1 .u { background: linear-gradient(transparent 62%, rgba(239, 79, 125, .18) 0); }
.hero__promise { margin-top: 22px; font-size: clamp(16.5px, 1.35vw, 19px); color: var(--c-text); max-width: 560px; line-height: 1.7; }
.hero__promise b { color: var(--c-ink); }
.hero .btn-row { margin-top: 30px; }
.hero__sub { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--c-muted); }
.hero__sub a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-line-2); }
.hero__sub a:hover { color: var(--c-ink); }

/* evidence stack in hero */
.proof-stack { position: relative; display: grid; gap: 16px; }
.proof { position: relative; background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .9); border-radius: var(--r-l); box-shadow: var(--sh-float); padding: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.proof__cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 12px; }
.proof__cap .t { font-weight: 750; color: var(--c-ink); font-size: 15px; letter-spacing: -0.02em; }
.proof__cap .s { font-size: 12px; color: var(--c-faint); white-space: nowrap; }
.proof__img { border-radius: 14px; overflow: hidden; border: 1px solid var(--c-line); background: #fff; }
.proof__img img { width: 100%; }
.proof--pink { border-top: 3px solid var(--c-pink); }
.proof--fix { border-top: 3px solid var(--c-red); }
.proof__crop { height: 214px; overflow: hidden; }
.proof__crop img { width: 100%; }
.proof__crop--top img { object-fit: cover; object-position: top; height: 100%; }
.proof__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 0 4px; }
.score-jump { display: flex; align-items: baseline; gap: 10px; font-family: var(--f-num); }
.score-jump .a { font-size: 26px; font-weight: 800; color: var(--c-ink); }
.score-jump .ar { color: var(--c-mark); font-weight: 800; }
.score-jump .b { font-size: 34px; font-weight: 800; color: var(--c-mark); letter-spacing: -0.03em; }
.score-jump small { font-size: 12.5px; color: var(--c-muted); font-family: var(--f-sans); }

/* page hero (sub pages) */
.phero { position: relative; overflow: hidden; background: radial-gradient(760px 380px at 92% -20%, rgba(120, 178, 255, .26), transparent 62%), linear-gradient(180deg, #f5f9ff, #fff); border-bottom: 1px solid var(--c-line); }
.phero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(24, 87, 220, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 87, 220, .045) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, #000, transparent 90%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); pointer-events: none; }
.phero .wrap { position: relative; }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding-block: clamp(36px, 5vw, 72px); }
.phero h1 { font-size: clamp(32px, 4vw, 54px); margin-top: 16px; letter-spacing: -0.045em; line-height: 1.14; font-weight: 800; }
.phero .lead { margin-top: 18px; }
.phero .btn-row { margin-top: 28px; }
.crumb { font-size: 13px; color: var(--c-muted); font-weight: 600; display: inline-flex; gap: 6px; }
.crumb a:hover { color: var(--c-ink); }

/* in-page jump nav */
.jump { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.jump a { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--c-line); font-size: 14px; font-weight: 600; color: var(--c-ink-2); }
.jump a span { color: var(--c-faint); font-size: 12px; font-family: var(--f-num); }
.jump a:hover { border-color: var(--c-ink); }

/* ---------- 7. Common blocks ---------- */
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-l); padding: 26px; }
.card--ice { background: var(--c-ice); border-color: transparent; }
.card--lift { box-shadow: var(--sh-1); }
.card h3 { font-size: var(--t-h3); }
.card p { margin-top: 10px; color: var(--c-muted); font-size: 15px; }
.num { font-family: var(--f-num); font-weight: 800; color: var(--c-blue); font-size: 13px; letter-spacing: .06em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--c-ice); color: var(--c-ink-2); border: 1px solid var(--c-line); }
.sec--ice .chip { background: #fff; }

.promise3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--c-line); border-radius: var(--r-l); background: #fff; overflow: hidden; }
.promise3 > div { padding: 26px 28px; display: flex; gap: 16px; align-items: flex-start; }
.promise3 > div + div { border-left: 1px solid var(--c-line); }
.promise3 .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--c-pink-50); color: var(--c-pink-600); flex: none; font-weight: 800; }
.promise3 h3 { font-size: 17px; }
.promise3 p { margin-top: 4px; font-size: 14.5px; color: var(--c-muted); }

.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.split--rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.sticky-col { position: sticky; top: calc(var(--hd-h) + 28px); }

.shot { margin: 0; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-l); padding: 10px; box-shadow: var(--sh-1); }
.shot img { border-radius: 16px; width: 100%; }
.shot figcaption { font-size: 13px; color: var(--c-muted); padding: 12px 8px 4px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.shot figcaption b { color: var(--c-ink); }
.shot-col { display: grid; gap: 20px; }

.checklist { display: grid; gap: 14px; margin-top: 28px; }
.checklist li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.checklist li::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--c-blue-50); color: var(--c-blue); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.checklist li.pk::before { background: var(--c-pink-50); color: var(--c-pink-600); }
.checklist b { display: block; }
.checklist span { color: var(--c-muted); font-size: 15px; }

/* steps (flow) */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: f; border-radius: var(--r-l); background: #fff; border: 1px solid var(--c-line); overflow: hidden; }
.flow li { padding: 24px; position: relative; counter-increment: f; }
.flow li + li { border-left: 1px solid var(--c-line); }
.flow li::before { content: counter(f, decimal-leading-zero); font-family: var(--f-num); font-weight: 800; color: var(--c-blue); font-size: 13px; letter-spacing: .06em; }
.flow b { display: block; margin-top: 8px; font-size: 16.5px; }
.flow span { display: block; margin-top: 6px; font-size: 14px; color: var(--c-muted); }
.flow li.now { background: var(--c-blue-50); }
.flow--deep { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }
.flow--deep li + li { border-color: rgba(255, 255, 255, .12); }
.flow--deep b { color: #fff; }
.flow--deep span { color: #9fb1cc; }
.flow--deep li::before { color: #8fb4ff; }
.flow--deep li.now { background: rgba(24, 87, 220, .25); }

/* ---------- 8. Correction (fix's course) ---------- */
.course { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: c; }
.course li { position: relative; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-m); padding: 22px; counter-increment: c; }
.course li .k { font-size: 12px; letter-spacing: .12em; font-weight: 700; color: #8fb4ff; text-transform: uppercase; }
.course li h3 { font-size: 18px; margin-top: 10px; }
.course li p { font-size: 14.5px; margin-top: 8px; color: #a9bad3; }
.course li.fix { background: linear-gradient(160deg, rgba(212, 40, 63, .22), rgba(212, 40, 63, .06)); border-color: rgba(255, 120, 140, .35); }
.course li.fix .k { color: #ff9aaa; }
.course li:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--c-deep); color: #8fb4ff; display: grid; place-items: center; font-size: 12px; z-index: 1; }

.menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.menu .m { border: 1px solid var(--c-line); border-radius: var(--r-l); padding: 26px; background: #fff; display: flex; flex-direction: column; }
.menu .m .lv { font-size: 12px; letter-spacing: .12em; font-weight: 700; color: var(--c-faint); text-transform: uppercase; }
.menu .m h3 { margin-top: 10px; font-size: 20px; }
.menu .m p { margin-top: 8px; color: var(--c-muted); font-size: 14.5px; }
.menu .m ul { margin-top: 16px; display: grid; gap: 8px; font-size: 14.5px; }
.menu .m li { padding-left: 18px; position: relative; }
.menu .m li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-line-2); }
.menu .m .foot { margin-top: auto; padding-top: 18px; font-size: 13px; color: var(--c-faint); }
.menu .m--fix { border: 2px solid var(--c-red); box-shadow: 0 30px 60px -36px rgba(212, 40, 63, .55); position: relative; }
.menu .m--fix .lv { color: var(--c-red); }
.menu .m--fix li::before { background: var(--c-red); }
.menu .m--fix .badge { position: absolute; top: -13px; left: 22px; background: var(--c-red); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }

/* mock correction (HTML, mirrors real screen) */
.corr { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-1); }
.corr__hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 20px; background: var(--c-ink); color: #fff; flex-wrap: wrap; }
.corr__hd b { color: #fff; font-size: 15px; }
.corr__hd small { color: #a9bad3; font-size: 12.5px; }
.corr__body { display: grid; grid-template-columns: 1fr 1fr; }
.corr__col { padding: 20px; font-size: 15px; line-height: 1.85; }
.corr__col + .corr__col { border-left: 1px solid var(--c-line); background: var(--c-ice); }
.corr__col h4 { font-size: 13px; color: var(--c-muted); font-weight: 700; margin-bottom: 8px; }
.del { color: var(--c-red); text-decoration: line-through; background: var(--c-red-50); padding: 0 2px; border-radius: 3px; }
.ins { color: var(--c-mark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; background: var(--c-mark-50); padding: 0 2px; border-radius: 3px; }
.corr__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--c-line); }
.corr__notes > div { padding: 14px 18px; font-size: 13.5px; }
.corr__notes > div + div { border-left: 1px solid var(--c-line); }
.corr__notes .k { font-size: 12px; font-weight: 700; color: var(--c-red); }
.corr__notes b { display: block; margin-top: 2px; font-size: 14px; }
.corr__notes span { color: var(--c-muted); }
.corr__extra { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--c-line); }
.corr__extra > div { padding: 16px 20px; font-size: 14px; }
.corr__extra > div + div { border-left: 1px solid var(--c-line); }
.corr__extra .k { font-size: 12px; font-weight: 700; color: var(--c-blue); letter-spacing: .04em; }
.corr__extra p { margin-top: 4px; color: var(--c-ink); font-weight: 600; }
.corr__extra small { color: var(--c-muted); display: block; margin-top: 2px; }
.corr__ok { padding: 12px 20px; font-size: 14px; color: var(--c-ok); font-weight: 700; border-top: 1px solid var(--c-line); }

/* ---------- 9. Stories (reviews / scorecards) ---------- */
.stories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.story { display: block; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-m); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.story:hover { transform: translateY(-3px); box-shadow: var(--sh-1); }
.story .ph { aspect-ratio: 4 / 3; background: var(--c-ice); overflow: hidden; }
.story .ph img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.story .tx { padding: 12px 14px 14px; }
.story .ty { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--c-blue); }
.story .ty.res { color: var(--c-pink-600); }
.story b { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.4; }
.story small { display: block; margin-top: 6px; font-size: 12px; color: var(--c-faint); }
.stories-more { margin-top: 16px; }
.stories-more > summary { list-style: none; cursor: pointer; display: flex; justify-content: center; }
.stories-more > summary::-webkit-details-marker { display: none; }
.stories-more[open] > summary .open { display: none; }
.stories-more:not([open]) > summary .close { display: none; }
.stories-more .stories { margin-bottom: 16px; }

.statline { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 30px; }
.statline div b { display: block; font-family: var(--f-num); font-size: clamp(30px, 3vw, 40px); font-weight: 800; letter-spacing: -0.03em; color: var(--c-ink); line-height: 1.1; }
.statline div span { font-size: 13.5px; color: var(--c-muted); }
.sec--deep .statline b { color: #fff; }

/* ---------- 10. Routes / CTA ---------- */
.routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.route { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--c-line); transition: border-color .2s, transform .2s; min-height: 210px; }
.route:hover { border-color: var(--c-ink); transform: translateY(-2px); }
.route .who { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--c-blue); text-transform: uppercase; }
.route h3 { font-size: 21px; }
.route p { color: var(--c-muted); font-size: 14.5px; }
.route .go { margin-top: auto; font-weight: 700; color: var(--c-ink); display: flex; justify-content: space-between; padding-top: 12px; }

.cta { position: relative; overflow: hidden; border-radius: var(--r-xl); background: radial-gradient(600px 300px at 90% 0%, rgba(24, 87, 220, .55), transparent 60%), radial-gradient(500px 260px at 0% 100%, rgba(239, 79, 125, .25), transparent 60%), var(--c-deep); color: #b8c7de; padding: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.cta h2 { color: #fff; font-size: clamp(26px, 3vw, 40px); }
.cta p { margin-top: 14px; color: #a9bad3; }
.cta .flow { margin-top: 0; }
.cta__acts { display: grid; gap: 10px; }
.cta__acts .btn { width: 100%; }
.cta__acts small { color: #8496b3; font-size: 13px; text-align: center; }

/* ---------- 11. Interactive mini questions ---------- */
.qtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.qtabs button { border: 1px solid var(--c-line); background: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 14px; color: var(--c-ink-2); }
.qtabs button[aria-selected="true"] { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.q { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-l); padding: clamp(20px, 2.4vw, 30px); box-shadow: var(--sh-1); }
.q[hidden] { display: none; }
.q__top { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.q__top .k { font-size: 12px; letter-spacing: .12em; font-weight: 700; color: var(--c-blue); }
.q__top .try { font-size: 12px; font-weight: 700; color: var(--c-pink-600); background: var(--c-pink-50); padding: 3px 10px; border-radius: 999px; }
.q h3 { font-size: 18px; margin-top: 8px; }
.q .ins-t { color: var(--c-muted); font-size: 14.5px; margin-top: 10px; }
.q .passage { margin-top: 14px; padding: 16px 18px; background: var(--c-ice); border-radius: 14px; font-size: 14.5px; line-height: 1.75; color: var(--c-ink-2); }
.q .passage .lbl { display: block; font-size: 12px; letter-spacing: .14em; font-weight: 800; color: var(--c-ink); margin-bottom: 6px; }
.q .stem { margin-top: 14px; font-weight: 700; color: var(--c-ink); }
.q audio { width: 100%; margin-top: 12px; height: 40px; }
.opts { display: grid; gap: 8px; margin-top: 12px; }
.opt { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--c-line); background: #fff; border-radius: 12px; padding: 10px 12px; font-size: 14.5px; color: var(--c-ink-2); min-height: 48px; }
.opt .l { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--c-ice); font-weight: 800; font-size: 13px; color: var(--c-ink); }
.opt[aria-pressed="true"] { border-color: var(--c-blue); background: var(--c-blue-50); }
.opt[aria-pressed="true"] .l { background: var(--c-blue); color: #fff; }
.opt.is-right { border-color: var(--c-ok); background: #e9f7f1; }
.opt.is-right .l { background: var(--c-ok); color: #fff; }
.opt.is-wrong { border-color: var(--c-red); background: var(--c-red-50); }
.q__act { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.q__fb { margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 14.5px; background: var(--c-ice); color: var(--c-ink-2); }
.q__fb[hidden] { display: none; }
.q__fb.ok { background: #e9f7f1; color: #0b6b4a; }
.q__fb.no { background: var(--c-red-50); color: #9b1c2e; }
.q__after { margin-top: 14px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--c-line-2); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14.5px; }
.q__after[hidden] { display: none; }
.words { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.words button { border: 1px solid var(--c-line-2); background: #fff; padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: 14.5px; min-height: 42px; }
.words button:disabled { opacity: .3; }
.slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; min-height: 46px; padding: 6px; border-radius: 12px; background: var(--c-ice); }
.slots span { background: var(--c-ink); color: #fff; padding: 6px 12px; border-radius: 9px; font-weight: 600; font-size: 14.5px; }
.slots .ph { color: var(--c-faint); font-size: 13.5px; padding: 6px; }
.q details { margin-top: 12px; font-size: 14.5px; }
.q details summary { cursor: pointer; font-weight: 700; color: var(--c-blue); }
.q details p { margin-top: 8px; padding: 12px 14px; background: var(--c-ice); border-radius: 12px; }
.rec { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.rec small { color: var(--c-muted); font-size: 13px; }
.tapline { margin-top: 12px; font-size: 16px; line-height: 2.1; }
.tapline button { border: 0; background: transparent; padding: 2px 3px; border-radius: 6px; font-size: 16px; }
.tapline button.subj { background: var(--c-blue-50); color: var(--c-blue); font-weight: 700; }
.tapline button.verb { background: var(--c-pink-50); color: var(--c-pink-600); font-weight: 700; }
.q input[type="text"] { width: 100%; margin-top: 12px; border: 1px solid var(--c-line-2); border-radius: 12px; min-height: 48px; padding: 0 14px; font: inherit; font-size: 15px; }

/* ---------- 12. Accordion / table ---------- */
.acc { border-top: 1px solid var(--c-line); }
.acc details { border-bottom: 1px solid var(--c-line); }
.acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px 1fr 32px; gap: 14px; align-items: center; padding: 22px 4px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .n { font-family: var(--f-num); font-weight: 800; color: var(--c-blue); font-size: 14px; }
.acc summary h3 { font-size: 18.5px; }
.acc summary h3 small { display: block; font-size: 13.5px; color: var(--c-muted); font-weight: 500; letter-spacing: 0; margin-top: 2px; }
.acc summary .pm { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--c-line-2); display: grid; place-items: center; transition: transform .2s; font-weight: 700; }
.acc details[open] summary .pm { transform: rotate(45deg); background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.acc .body { padding: 0 4px 26px 74px; color: var(--c-text); font-size: 15.5px; }
.acc .body > * + * { margin-top: 14px; }
.acc .body h4 { font-size: 15.5px; margin-top: 18px; }
.acc .body .four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.acc .body .four div { background: var(--c-ice); padding: 14px 16px; border-radius: 12px; font-size: 14.5px; }
.acc .body .four b { display: block; color: var(--c-blue); font-size: 13px; letter-spacing: .04em; }
.acc .body .meta { font-size: 14.5px; color: var(--c-muted); }
.acc .body .meta b { color: var(--c-ink); }

.tbl { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; border-radius: var(--r-m); overflow: hidden; }
.tbl th, .tbl td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.tbl thead th { background: var(--c-ink); color: #fff; font-size: 14px; font-weight: 700; }
.tbl tbody th { color: var(--c-ink); font-weight: 700; white-space: nowrap; }
.tbl td.us { color: var(--c-ink); font-weight: 600; background: var(--c-blue-50); }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-m); }

/* level ladder */
.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ladder a { display: block; padding: 22px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--c-line); position: relative; overflow: hidden; }
.ladder a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c-blue); transform-origin: left; }
.ladder a:nth-child(1)::after { transform: scaleX(.25); }
.ladder a:nth-child(2)::after { transform: scaleX(.5); }
.ladder a:nth-child(3)::after { transform: scaleX(.75); }
.ladder .lv { font-size: 12px; letter-spacing: .12em; font-weight: 700; color: var(--c-faint); }
.ladder b { display: block; font-size: 24px; margin-top: 6px; letter-spacing: -0.03em; }
.ladder span { display: block; margin-top: 4px; font-size: 14px; color: var(--c-muted); }

/* mini report (parents) */
.mrep { background: #fff; border-radius: var(--r-l); border: 1px solid var(--c-line); box-shadow: var(--sh-2); padding: 22px; }
.mrep__hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mrep__hd .k { font-size: 12px; letter-spacing: .12em; font-weight: 700; color: var(--c-blue); }
.mrep__hd .tag { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--c-ice); color: var(--c-muted); font-weight: 700; }
.mrep h3 { font-size: 19px; margin-top: 6px; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--c-ice); gap: 2px; margin-top: 14px; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--c-muted); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--c-ink); box-shadow: 0 1px 3px rgba(11, 27, 51, .12); }
.mrep .period { font-size: 13px; color: var(--c-muted); margin-top: 10px; }
.mrep .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.mrep .kpis div { background: var(--c-ice); border-radius: 14px; padding: 12px 14px; }
.mrep .kpis span { font-size: 12.5px; color: var(--c-muted); }
.mrep .kpis b { display: block; font-family: var(--f-num); font-size: 24px; letter-spacing: -0.03em; }
.mrep .bars { display: flex; gap: 14px; align-items: flex-end; height: 92px; margin-top: 14px; padding: 0 6px; border-bottom: 1px solid var(--c-line); }
.mrep .bars div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--c-muted); }
.mrep .bars i { display: block; width: 100%; max-width: 54px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #4f86f0, var(--c-blue)); }
.mrep .foot { margin-top: 12px; font-size: 13px; color: var(--c-muted); display: flex; justify-content: space-between; }

/* ---------- 13. Footer ---------- */
.ft { background: var(--c-deep); color: #93a5c1; font-size: 14px; padding-block: 56px 40px; }
.ft__top { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.ft__brand img { width: 170px; filter: brightness(0) invert(1); opacity: .92; }
.ft__brand p { margin-top: 14px; line-height: 1.7; }
.ft h4 { color: #fff; font-size: 14px; letter-spacing: .04em; margin-bottom: 12px; }
.ft ul { display: grid; gap: 8px; }
.ft a:hover { color: #fff; }
.ft__bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 13px; color: #7488a6; }
.ft__ets { color: #a4b4cc; }

/* ---------- 14. Report & correction emblems ---------- */
.emblem { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; }
.emblem svg { width: 34px; height: 34px; }
.emblem--pink { background: var(--c-pink-50); }
.emblem--fix { background: var(--c-red-50); }
.sec--deep .emblem--fix { background: rgba(212, 40, 63, .18); }

/* ---------- 15. Responsive ---------- */
@media (max-width: 1020px) {
  .hero__grid, .phero__grid, .split, .split--rev, .cta { grid-template-columns: minmax(0, 1fr); }
  .sticky-col { position: static; }
  .stories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .course { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course li:nth-child(2)::after { display: none; }
  .g4, .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .g2, .g3, .g6, .routes, .menu, .promise3 { grid-template-columns: minmax(0, 1fr); }
  .promise3 > div + div { border-left: 0; border-top: 1px solid var(--c-line); }
  .promise3 > div { padding: 20px; }
  .stories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .story .tx { padding: 10px 10px 12px; }
  .story b { font-size: 13.5px; }
  .flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .flow li:nth-child(3) { border-left: 0; }
  .flow li:nth-child(n+3) { border-top: 1px solid var(--c-line); }
  .flow--deep li:nth-child(n+3) { border-top-color: rgba(255, 255, 255, .12); }
  .course { grid-template-columns: minmax(0, 1fr); }
  .course li::after { display: none; }
  .corr__body, .corr__extra { grid-template-columns: minmax(0, 1fr); }
  .corr__col + .corr__col, .corr__extra > div + div { border-left: 0; border-top: 1px solid var(--c-line); }
  .corr__notes { grid-template-columns: minmax(0, 1fr); }
  .corr__notes > div + div { border-left: 0; border-top: 1px solid var(--c-line); }
  .acc summary { grid-template-columns: 36px 1fr 32px; gap: 10px; }
  .acc .body { padding-left: 4px; }
  .acc .body .four { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 22px; }
  .ft__top { grid-template-columns: minmax(0, 1fr); }
  .hero__grid { padding-top: 22px; gap: 26px; }
  .hero h1 { margin-top: 16px; }
  .phero .btn-row .btn { flex: 1 1 100%; }
  .proof__crop { height: 150px; }
  .btn { white-space: normal; text-align: center; }
  .tbl th, .tbl td { padding: 12px; font-size: 14px; }
  .tbl tbody th { white-space: normal; }
  .statline { gap: 12px 28px; }
  .notice-bar { font-size: 12.5px; }
  .notice-bar .n-long, .notice-bar .tag { display: none; }
  .notice-bar .n-short { display: inline; }
  .notice-bar .wrap { flex-wrap: nowrap; justify-content: space-between; min-height: 38px; }
  .hero .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero .btn-row .btn { padding: 0 12px; font-size: 15px; min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

.rowcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }
@media (max-width: 760px) { .rowcard { grid-template-columns: minmax(0, 1fr); } }
.flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flow--2 li:nth-child(3) { border-left: 0; }
.flow--2 li:nth-child(n+3) { border-top: 1px solid var(--c-line); }
.acc--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 0; }
.acc--2col details:nth-child(-n+2) { border-top: 1px solid var(--c-line); }
@media (max-width: 760px) {
  .flow--3 { grid-template-columns: minmax(0, 1fr); }
  .flow--3 li + li { border-left: 0; border-top: 1px solid var(--c-line); }
  .acc--2col { grid-template-columns: minmax(0, 1fr); }
  .acc--2col details:nth-child(2) { border-top: 0; }
}
@media (max-width: 760px) { .g4 { grid-template-columns: minmax(0, 1fr); } }
.qlabel { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--c-muted); margin-bottom: 10px; }
.corr__diff { border-top: 1px solid var(--c-line); padding: 12px 20px; font-size: 14px; }
.corr__diff summary { cursor: pointer; font-weight: 700; color: var(--c-blue); }
.corr__diff ol { margin-top: 10px; display: grid; gap: 6px; }
.corr__diff li span { display: inline-block; min-width: 64px; font-size: 12px; font-weight: 700; color: var(--c-muted); }
.corr__diff s { color: var(--c-red); }
.corr__diff b { color: var(--c-mark); }

.journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: end; margin-top: 18px; }
.journey div { background: var(--c-ice); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; }
.journey div:nth-child(1) { min-height: 70px; } .journey div:nth-child(2) { min-height: 100px; } .journey div:nth-child(3) { min-height: 130px; }
.journey div.goal { min-height: 160px; background: var(--c-blue); }
.journey span { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--c-muted); }
.journey .goal span, .journey .goal b { color: #fff; }
.journey b { font-size: 13.5px; margin-top: 4px; line-height: 1.35; }
@media (max-width: 760px) { .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rtool { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.rtool > div, .rtool > a { background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 10px 14px; }
.rtool span { display: block; font-size: 11.5px; color: var(--c-faint); font-weight: 600; }
.rtool b { font-size: 14.5px; }
.rtool > a { display: flex; align-items: center; font-weight: 700; font-size: 14px; color: var(--c-ink); }
.corr--more summary { cursor: pointer; padding: 16px 20px; font-weight: 700; color: var(--c-ink); }
.corr--more .k { font-size: 12.5px; font-weight: 700; color: var(--c-blue); }
.corr--more p { font-size: 14.5px; margin-top: 10px; }
.corr--more .passage { background: var(--c-ice); padding: 14px 16px; border-radius: 12px; line-height: 1.8; }

/* =========================================================
   16. SHOW, DON'T TELL — 화면으로 증명하는 레이어 (rev. 2)
   ========================================================= */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lic circle { fill: currentColor; stroke: none; }
.sig__ico { color: inherit; }
.sig__ico .lic { width: 17px; height: 17px; }
.emblem .lic { width: 30px; height: 30px; }
.emblem--pink { color: var(--c-pink-600); }
.emblem--fix { color: var(--c-red); }
.sec--deep .emblem--fix { color: #ff8c9b; }
.checklist li::before { content: ""; background: var(--c-blue-50); -webkit-mask: none; }
.checklist li { position: relative; }
.checklist li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 14px; height: 14px; background: currentColor; color: var(--c-blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.checklist li.pk::after { color: var(--c-pink-600); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: 1px; margin-right: 4px; }

/* scroll reveal */
.js .rv { opacity: 0; transform: translateY(48px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv-d1 { transition-delay: .08s; } .js .rv-d2 { transition-delay: .16s; } .js .rv-d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } }

/* stage sections */
.stage { padding-block: clamp(96px, 12vw, 168px); text-align: center; overflow: hidden; }
.stage--ice { background: var(--c-ice); }
.stage--deep { background: var(--c-deep); color: #a9bad3; }
.stage--deep h2, .stage--deep .big { color: #fff; }
.stage .kick { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--c-blue); }
.stage .kick.pk { color: var(--c-pink-600); } .stage .kick.rd { color: var(--c-red); }
.stage--deep .kick.rd { color: #ff8c9b; } .stage--deep .kick { color: #8fb4ff; }
.stage h2 { font-size: clamp(36px, 5.6vw, 76px); letter-spacing: -0.05em; line-height: 1.08; font-weight: 800; margin-top: 14px; }
.stage .sub { font-size: clamp(17px, 1.6vw, 22px); color: var(--c-muted); margin: 18px auto 0; max-width: 720px; line-height: 1.55; font-weight: 500; }
.stage--deep .sub { color: #9fb1cc; }
.stage .screen { margin: clamp(44px, 6vw, 80px) auto 0; max-width: 1080px; }
.stage .acts { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 26px; font-size: 17px; }
.stage .acts a { color: var(--c-blue); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.stage--deep .acts a { color: #8fb4ff; }
.stage .acts a:hover { text-decoration: underline; text-underline-offset: 4px; }
.stage .tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 960px; margin: 48px auto 0; text-align: left; }
.stage .tri b { display: block; font-size: 19px; color: var(--c-ink); letter-spacing: -0.02em; }
.stage--deep .tri b { color: #fff; }
.stage .tri span { font-size: 15px; color: var(--c-muted); }
.stage .fine { font-size: 13px; color: var(--c-faint); margin-top: 28px; }
.stage--deep .fine { color: #6f84a3; }
.big { font-family: var(--f-num); font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: var(--c-ink); }
.giant { font-size: clamp(76px, 13vw, 190px); }
.giant .to { color: var(--c-faint); font-weight: 600; margin: 0 .12em; font-size: .6em; vertical-align: .22em; }
.giant .hi { color: var(--c-mark); }
.stage--deep .giant .hi { color: #6ea2ff; }

/* device frames */
.browser { background: #fff; border-radius: 18px; box-shadow: 0 50px 100px -40px rgba(11, 27, 51, .45), 0 0 0 1px rgba(11, 27, 51, .07); overflow: hidden; text-align: left; }
.browser__bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 16px; background: #f1f4f8; border-bottom: 1px solid var(--c-line); }
.browser__bar i { width: 11px; height: 11px; border-radius: 50%; background: #d5dce6; }
.browser__bar span { margin-left: 14px; flex: 1; max-width: 360px; height: 22px; border-radius: 7px; background: #fff; font-size: 11.5px; color: var(--c-faint); display: flex; align-items: center; padding: 0 10px; overflow: hidden; white-space: nowrap; }
.browser img { width: 100%; }
.stage--deep .browser { box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); }
.phone { width: 300px; border-radius: 46px; padding: 11px; background: #0b1424; box-shadow: 0 50px 90px -30px rgba(11, 27, 51, .55), inset 0 0 0 2px #2a3446; flex: none; }
.phone__in { border-radius: 36px; overflow: hidden; background: #fff; aspect-ratio: 390 / 844; position: relative; }
.phone__in img { width: 100%; }
.phone__in::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 20px; background: #0b1424; z-index: 1; }
.phone--sm { width: 240px; border-radius: 38px; padding: 9px; }
.phone--sm .phone__in { border-radius: 30px; }
.cap { font-size: 13.5px; color: var(--c-muted); margin-top: 16px; }
.stage--deep .cap { color: #7f93b1; }

/* home hero */
.ahero { text-align: center; padding: clamp(56px, 7vw, 104px) 0 0; background: radial-gradient(1200px 600px at 50% 110%, rgba(120, 178, 255, .25), transparent 60%), #fff; overflow: hidden; }
.ahero .tags { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ahero h1 { font-size: clamp(42px, 7vw, 96px); letter-spacing: -0.055em; line-height: 1.04; font-weight: 800; margin-top: 22px; }
.ahero h1 .pk { color: var(--c-pink); } .ahero h1 .rd { color: var(--c-red); }
.ahero .sub { font-size: clamp(17px, 1.7vw, 23px); color: var(--c-muted); margin-top: 20px; font-weight: 500; }
.ahero .btn-row { justify-content: center; margin-top: 30px; }
.ahero__devices { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px, 3vw, 44px); margin-top: clamp(48px, 6vw, 76px); padding-bottom: 0; height: clamp(420px, 44vw, 600px); }
.ahero__devices .phone { margin-bottom: -170px; }
.ahero__devices .phone:nth-child(1) { transform: translateY(70px) rotate(-3deg); }
.ahero__devices .phone:nth-child(3) { transform: translateY(70px) rotate(3deg); }
.dev-label { position: absolute; z-index: 2; top: -16px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* split stage (screen + short text) */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; text-align: left; }
.duo h2 { font-size: clamp(32px, 4.2vw, 58px); }
.duo .sub { margin-left: 0; }
.duo--rev > :first-child { order: 2; }

/* AI tutor recreation */
.tutor { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); text-align: left; background: #fff; }
.tutor__q { padding: 28px; border-right: 1px solid var(--c-line); }
.tutor__q .k { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--c-blue); }
.tutor__q .passage { margin-top: 12px; background: var(--c-ice); border-radius: 12px; padding: 14px 16px; font-size: 14.5px; line-height: 1.75; color: var(--c-ink-2); }
.tutor__q .passage mark { background: rgba(24, 87, 220, .14); color: inherit; border-radius: 3px; padding: 0 2px; box-shadow: 0 0 0 2px rgba(24, 87, 220, .35); }
.tutor__q .stem { margin-top: 14px; font-weight: 700; color: var(--c-ink); font-size: 15px; }
.tutor__q .o { margin-top: 8px; border: 1px solid var(--c-line); border-radius: 10px; padding: 9px 12px; font-size: 14px; }
.tutor__q .o.sel { border-color: var(--c-red); background: var(--c-red-50); }
.tutor__p { display: flex; flex-direction: column; background: #fff; }
.tutor__hd { background: var(--c-ink); color: #fff; padding: 16px 20px; font-weight: 800; font-size: 19px; display: flex; justify-content: space-between; align-items: center; }
.tutor__hd small { font-size: 12px; font-weight: 600; color: #a9bad3; }
.tutor__body { padding: 18px 20px; display: grid; gap: 12px; font-size: 14px; }
.tutor__body .guide { color: var(--c-muted); }
.tutor__body .attach { border: 1px solid #d9c38f; background: #fff8e8; border-radius: 12px; padding: 12px; text-align: center; font-weight: 700; color: var(--c-ink); display: flex; gap: 8px; justify-content: center; align-items: center; }
.tutor__body .hint { background: var(--c-ice); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; color: var(--c-muted); }
.tutor__body label { font-weight: 700; color: var(--c-ink); font-size: 13.5px; }
.tutor__body .ta { border: 2px solid #8a6a2c; border-radius: 12px; padding: 12px; min-height: 86px; color: var(--c-ink-2); }
.tutor__body .row { display: flex; justify-content: space-between; gap: 8px; }
.tutor__body .row span { border: 1px solid var(--c-line-2); border-radius: 10px; padding: 9px 14px; font-weight: 700; }
.tutor__body .row span.go { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.tutor__body .foot { font-size: 11.5px; color: var(--c-faint); }

/* game pair */
.games { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; max-width: 1180px; margin: clamp(44px, 6vw, 80px) auto 0; }
.games figure { margin: 0; border-radius: 24px; overflow: hidden; position: relative; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.games img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.games figcaption { position: absolute; left: 16px; bottom: 16px; background: rgba(8, 22, 43, .72); color: #fff; font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 999px; backdrop-filter: blur(8px); }

/* student essays — last section on home */
.essays { background: linear-gradient(180deg, #fff, var(--c-ice)); padding-block: clamp(96px, 11vw, 150px); }
.essays .head { text-align: center; max-width: 760px; margin: 0 auto clamp(44px, 5vw, 64px); }
.essays .head h2 { font-size: clamp(34px, 4.8vw, 64px); letter-spacing: -0.05em; line-height: 1.1; font-weight: 800; margin-top: 12px; }
.essays .head p { color: var(--c-muted); font-size: 18px; margin-top: 14px; }
.essay-grid { columns: 3; column-gap: 22px; }
.essay { break-inside: avoid; display: block; margin: 0 0 22px; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(11, 27, 51, .05), 0 22px 50px -30px rgba(11, 27, 51, .3); transition: transform .3s, box-shadow .3s; }
.essay:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(11, 27, 51, .4); }
.essay img { width: 100%; }
.essay .tx { padding: 16px 20px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.essay .tx b { font-size: 16.5px; letter-spacing: -0.02em; }
.essay .tx span { font-size: 12px; color: var(--c-faint); white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.essay .ty { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--c-pink-600); margin-bottom: 4px; }
.score-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.score-strip .essay { margin: 0; border-radius: 18px; }
.score-strip .essay .tx b { font-size: 15px; }
.score-strip .ty { color: var(--c-blue); }
.essays h3.strip-h { text-align: center; font-size: 22px; margin-top: 56px; }

@media (max-width: 1020px) {
  .duo, .tutor { grid-template-columns: minmax(0, 1fr); }
  .duo--rev > :first-child { order: 0; }
  .tutor__q { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .essay-grid { columns: 2; }
  .score-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ahero__devices { height: 430px; gap: 0; }
  .ahero__devices .phone { width: 210px; border-radius: 34px; padding: 8px; margin-bottom: -150px; }
  .ahero__devices .phone .phone__in { border-radius: 27px; }
  .ahero__devices .phone:nth-child(1), .ahero__devices .phone:nth-child(3) { position: absolute; bottom: 0; width: 150px; opacity: .95; }
  .ahero__devices .phone:nth-child(1) { left: -6px; } .ahero__devices .phone:nth-child(3) { right: -6px; }
  .ahero__devices .phone:nth-child(2) { position: relative; z-index: 1; }
  .stage .tri { grid-template-columns: minmax(0, 1fr); gap: 14px; text-align: center; }
  .games { grid-template-columns: minmax(0, 1fr); }
  .essay-grid { columns: 1; }
  .browser { border-radius: 12px; } .browser__bar { height: 28px; } .browser__bar i { width: 8px; height: 8px; } .browser__bar span { display: none; }
}
/* hero fold tuning: devices must show inside the first screen */
.ahero { padding-top: clamp(36px, 4.2vw, 60px); }
.ahero h1 { font-size: clamp(40px, 6vw, 86px); margin-top: 18px; }
.ahero .sub { margin-top: 16px; }
.ahero .btn-row { margin-top: 24px; }
.ahero__devices { margin-top: clamp(30px, 3.4vw, 48px); }
.ahero__devices .phone:nth-child(1), .ahero__devices .phone:nth-child(3) { transform: translateY(40px) rotate(-3deg); }
.ahero__devices .phone:nth-child(3) { transform: translateY(40px) rotate(3deg); }
@media (max-width: 760px) { .ahero__devices .phone:nth-child(1), .ahero__devices .phone:nth-child(3) { transform: translateY(30px); } }
.ahero__devices { align-items: flex-start; height: clamp(380px, 34vw, 500px); }
.ahero__devices .phone { margin-bottom: 0 !important; }
.ahero__devices .phone:nth-child(1) { transform: translateY(70px) rotate(-3deg); }
.ahero__devices .phone:nth-child(3) { transform: translateY(70px) rotate(3deg); }
@media (max-width: 760px) {
  .ahero__devices { height: 330px; margin-top: 28px; }
  .ahero__devices .phone:nth-child(1), .ahero__devices .phone:nth-child(3) { top: 60px; bottom: auto; transform: none; }
  .ahero .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ahero .btn-row .btn { padding: 0 10px; font-size: 15px; min-height: 52px; }
  .ahero .tags .sig { font-size: 12.5px; }
}
details.more { margin-top: 14px; }
details.more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--c-blue); padding: 6px 0; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s; }
details.more[open] > summary::after { transform: rotate(180deg); }
.sec--deep details.more > summary, .stage--deep details.more > summary { color: #8fb4ff; }
.phone__in { background: #f4f7fb; padding-top: 30px; }
/* TOEFL brand mark next to the logo + home brand line */
.hd__logo { display: inline-flex; align-items: center; gap: 12px; }
.hd__toefl { display: inline-flex; align-items: center; gap: 6px; padding-left: 12px; border-left: 1px solid var(--c-line-2); font-size: 14px; font-weight: 800; color: var(--c-ink); letter-spacing: -0.02em; white-space: nowrap; }
.hd__toefl b { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: #fff; background: var(--c-blue); border-radius: 6px; padding: 3px 7px; }
.hd__nav a { padding: 8px 10px; font-size: 14.5px; }
.brandline { font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; color: var(--c-ink); letter-spacing: -0.02em; margin-bottom: 16px; }
.brandline span { display: inline-block; margin-left: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; color: var(--c-blue); vertical-align: 3px; }
@media (max-width: 1180px) { .hd__logo img { width: 140px; } }
@media (max-width: 760px) { .hd__logo img { width: 118px; } .hd__toefl { font-size: 12.5px; padding-left: 8px; gap: 4px; } .hd__toefl b { font-size: 10.5px; padding: 2px 5px; } .hd__logo { gap: 8px; } }
/* header fit with TOEFL mark */
.hd__in { gap: 20px; }
.hd__nav { gap: 0; }
.hd__nav a { white-space: nowrap; padding: 8px 9px; }
.hd__act .btn { white-space: nowrap; }
.hd__menu summary { white-space: nowrap; }
@media (max-width: 1560px) { .hd__util { display: none; } }
@media (max-width: 1260px) {
  .hd__nav, .hd__act { display: none; }
  .hd__in { justify-content: space-between; }
  .hd__menu { display: block; }
}
@media (max-width: 760px) {
  .hd__toefl { font-size: 0; gap: 0; }
  .hd__toefl b { font-size: 11px; }
  .ahero h1 { font-size: 34px; letter-spacing: -0.05em; }
}
.ahero h1 span { white-space: nowrap; }
.hd__act { align-items: center; }
.hd__login { font-size: 14px; font-weight: 700; color: var(--c-ink-2); padding: 8px 6px; white-space: nowrap; }
.hd__login:hover { color: var(--c-blue); }

   17. Laptop — pages 2–9 on one 16:10 screen
   The laptop is sized from the window height so bezel, screen and base are all
   on screen at once (budget: sticky header + title line + controls ≈ 270px).
   Each slide is designed at 1280x800 and scaled to the screen (--k, set by r5.js).
   ========================================================= */
.tour { background: linear-gradient(180deg, var(--c-ice) 0%, #fff 75%); padding-block: 20px 28px; scroll-margin-top: var(--hd-h); }
.tour__head { text-align: center; font-size: clamp(17px, 1.5vw, 21px); font-weight: 700; letter-spacing: -0.02em; color: var(--c-ink); margin: 0 0 14px; }
.tour__head b { font-weight: 800; color: var(--c-blue); }
.tour__head span { color: var(--c-muted); font-weight: 500; margin-left: 8px; }

.laptop { --bez: clamp(8px, 1.4vw, 16px); width: min(100%, 1180px, calc((1.6 * (100svh - 270px) + 2 * var(--bez)) / .9)); margin: 0 auto; }
.laptop__lid { position: relative; width: 90%; margin: 0 auto; background: #0b1424; border-radius: clamp(10px, 1.6vw, 20px) clamp(10px, 1.6vw, 20px) 4px 4px; padding: var(--bez); box-shadow: inset 0 0 0 2px #27344c, 0 40px 80px -46px rgba(11, 27, 51, .6); }
.laptop__cam { position: absolute; top: calc(var(--bez) / 2 - 2px); left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #3f5070; }
.laptop__screen { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: #fff; --k: .5; }
.laptop__base { position: relative; height: clamp(10px, 1.5vw, 18px); border-radius: 0 0 clamp(10px, 1.8vw, 22px) clamp(10px, 1.8vw, 22px); background: linear-gradient(180deg, #e3e8ef 0%, #c3ccd8 55%, #9ea9ba 100%); box-shadow: 0 18px 30px -18px rgba(11, 27, 51, .45); }
.laptop__base span { position: absolute; top: 0; left: 50%; width: 15%; height: 42%; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #aeb8c7; }

.tour__track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.tour__track::-webkit-scrollbar { display: none; }
.tour__track:focus-visible { outline: 3px solid var(--c-blue); outline-offset: -3px; }
.slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; background: #fff; }

/* the 1280x800 design surface */
.stage { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform: scale(var(--k)); transform-origin: 0 0; padding: 56px 72px 48px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.stage--center { align-items: center; text-align: center; justify-content: center; }
.st-k { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: .06em; color: var(--c-blue); }
.st-k .lic { width: 22px; height: 22px; }
.st-h { font-size: 50px; line-height: 1.12; letter-spacing: -0.045em; font-weight: 800; color: var(--c-ink); }
.st-s { font-size: 20px; color: var(--c-muted); }
.st-shot { flex: 1 1 auto; min-height: 0; margin-top: 14px; display: flex; align-items: flex-start; justify-content: center; }
.st-shot img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 14px; border: 1px solid var(--c-line); box-shadow: 0 24px 50px -32px rgba(11, 27, 51, .45); }
.st-shot--wide { flex: 0 0 auto; width: 100%; max-width: 1000px; margin-top: 28px; }
.st-shot--wide img { width: 100%; }
.st-shot--html { display: block; }
.st-shot--html .browser { font-size: 15px; box-shadow: 0 24px 50px -32px rgba(11, 27, 51, .45); }
.st-num { font-family: var(--f-num); margin-right: 10px; }
.st-num b, .st-giant b { color: var(--c-mark); }
.st-giant { font-family: var(--f-num); font-weight: 800; font-size: 190px; line-height: 1; letter-spacing: -0.06em; color: var(--c-ink); margin: 8px 0; }
.st-giant .to { color: var(--c-faint); font-weight: 600; font-size: .5em; vertical-align: .3em; }
.mark-red { color: var(--c-red); }
.mark-blue { color: var(--c-mark); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--c-text); }
.sw { width: 20px; height: 20px; border-radius: 5px; display: inline-block; }
.sw--red { background: var(--c-red-50); box-shadow: inset 0 -4px 0 var(--c-red); }
.sw--blue { background: var(--c-mark-50); box-shadow: inset 0 -4px 0 var(--c-mark); }
.st-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; }
.st-levels a { display: flex; flex-direction: column; gap: 4px; padding: 22px 22px 26px; border-radius: 18px; border: 1px solid var(--c-line); background: #fff; position: relative; overflow: hidden; }
.st-levels a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 6px; background: var(--c-blue); }
.st-levels a:nth-child(1)::after { width: 25%; } .st-levels a:nth-child(2)::after { width: 50%; } .st-levels a:nth-child(3)::after { width: 75%; } .st-levels a:nth-child(4)::after { width: 100%; }
.st-levels span { font-size: 14px; font-weight: 700; letter-spacing: .12em; color: var(--c-faint); }
.st-levels b { font-size: 34px; letter-spacing: -0.03em; color: var(--c-ink); }
.st-levels small { font-size: 17px; color: var(--c-muted); }
.st-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.st-pair p { background: var(--c-ice); border-radius: 16px; padding: 18px 22px; font-size: 18px; color: var(--c-muted); line-height: 1.5; }
.st-pair b { color: var(--c-ink); font-size: 21px; margin-right: 6px; }
.st-acts { display: flex; gap: 12px; margin-top: auto; }
.st-acts .btn { font-size: 19px; min-height: 60px; padding: 0 30px; }

/* page 9: the 13 reviews step past one by one */
.slide--stories, .slide--stories .stage { background: rgb(243, 246, 250); }
.s9 { flex: 1 1 auto; min-height: 0; margin: 10px -72px 0; overflow: hidden; }
.s9__lane { display: flex; gap: 22px; height: 100%; width: max-content; padding-inline: 72px; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.s9-card { flex: 0 0 auto; width: 340px; height: 100%; display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: 15px; padding: 16px; box-shadow: 0 18px 40px -26px rgba(22, 43, 64, .35); color: rgb(22, 42, 66); }
.s9-card__top { display: flex; justify-content: space-between; font-size: 14px; color: rgb(117, 99, 65); }
.s9-card img { width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; object-position: top; border-radius: 10px; background: #eef2f7; }
.s9-card strong { font-size: 22px; font-weight: 700; line-height: 1.3; color: rgb(22, 42, 66); }
.s9-card small { font-size: 14px; color: rgb(102, 118, 138); }
.s9__count { font-variant-numeric: tabular-nums; }
.s9__count b { color: var(--c-ink); }
.s9__fine { font-size: 14px; color: rgb(104, 115, 131); }

/* AI tutor recreation: page tokens only (no cream) */
.tutor__body .attach { background: var(--c-blue-50); border-color: var(--c-line-2); }
.tutor__body .ta { border-color: var(--c-blue); }

/* controls under the laptop */
.tour__ctl { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.tour__btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--c-line-2); background: #fff; color: var(--c-ink); display: grid; place-items: center; font-size: 18px; }
.tour__btn:hover { border-color: var(--c-ink); }
.tour__dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tour__dots button { border: 1px solid var(--c-line); background: #fff; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 800; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.tour__dots button span { font-weight: 600; margin-left: 4px; }
.tour__dots button[aria-current="true"] { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.tour__play[aria-pressed="false"] { color: var(--c-blue); }

@media (max-width: 760px) {
  .tour { padding-block: 18px 24px; }
  .tour__head span { display: block; margin: 4px 0 0; font-size: 14px; }
  .laptop { width: 100%; }
  .laptop__lid { width: 92%; }
  .tour__dots { order: -1; width: 100%; flex-wrap: nowrap; gap: 4px; }
  .tour__dots button { width: 34px; padding: 6px 0; }
  .tour__dots button span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tour__track { scroll-behavior: auto; }
  .s9__lane { transition: none; }
}
/* inside the 1280x800 surface, ignore viewport breakpoints: always the desktop layout */
.stage .tutor { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.stage .tutor__q { border-right: 1px solid var(--c-line); border-bottom: 0; }
.stage .browser { border-radius: 18px; }
.stage .browser__bar { height: 38px; }
.stage .browser__bar i { width: 11px; height: 11px; }
.stage .browser__bar span { display: flex; }
.stage .btn { white-space: nowrap; }
.slide .stage { text-align: left; }
.slide .stage--center { text-align: center; }
/* slide 4: the real first-set correction as text, ending on a full sentence */
.st-corr { flex: 1 1 auto; min-height: 0; margin-top: 18px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items: start; }
.st-corr__essay { background: #fff; border: 1px solid var(--c-line); border-radius: 16px; padding: 26px 30px; box-shadow: 0 24px 50px -32px rgba(11, 27, 51, .4); }
.st-corr__essay h4 { font-size: 20px; color: var(--c-ink); margin-bottom: 12px; }
.st-corr__essay p { font-size: 21px; line-height: 1.85; color: var(--c-text); }
.st-corr__essay p + p { margin-top: 6px; }
.fix-red { background: var(--c-red-50); color: var(--c-red); font-weight: 700; border-radius: 4px; padding: 0 4px; box-shadow: inset 0 -3px 0 var(--c-red); }
.st-corr__notes { display: grid; gap: 16px; background: var(--c-ice); border: 1px solid var(--c-line); border-radius: 16px; padding: 18px; }
.st-note { background: #fff; border-left: 4px solid var(--c-mark); border-radius: 10px; padding: 16px 18px; display: grid; gap: 6px; }
.st-note__k { font-size: 15px; font-weight: 800; color: var(--c-red); }
.st-note s { font-size: 18px; color: var(--c-red); background: var(--c-red-50); padding: 2px 6px; border-radius: 4px; justify-self: start; }
.st-note b { font-size: 24px; color: var(--c-mark); background: var(--c-mark-50); padding: 2px 6px; border-radius: 4px; text-decoration: underline; text-underline-offset: 4px; justify-self: start; }
.st-note p { font-size: 17px; color: var(--c-muted); }

/* page 9: exactly three whole cards in view, review images shown uncropped */
.s9 { margin: 10px 0 0; flex: 0 0 auto; }
.s9__lane { padding-inline: 0; height: auto; align-items: stretch; gap: 22px; }
.s9-card { width: 364px; height: auto; }
.s9-card img { flex: 0 0 auto; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.slide--stories .s9__fine { margin-top: auto; }

/* =========================================================
   18. Hero (rev. 7): "성적이 실시간으로 들어오고 있어요" + results feed + rotating phones
   ========================================================= */
.ahero h1 { font-size: clamp(34px, 4.6vw, 66px); line-height: 1.12; }
@media (min-width: 1024px) { .ahero h1 br { display: none; } }

.feed { max-width: 640px; margin: 22px auto 0; text-align: left; }
.feed__list { --row: 54px; --gap: 8px; position: relative; height: calc(3 * var(--row) + 2 * var(--gap)); overflow: hidden; display: flex; flex-direction: column; gap: var(--gap); }
.feed__item { flex: 0 0 var(--row); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 0 18px; background: #fff; border: 1px solid var(--c-line); border-radius: 14px; box-shadow: 0 10px 24px -20px rgba(11, 27, 51, .35); }
.feed__item:nth-child(n+4) { display: none; }
.feed__item b { font-size: 17px; color: var(--c-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed__item small { font-size: 13px; color: var(--c-muted); white-space: nowrap; }
.feed__tag { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.feed__tag--report { background: var(--c-pink-50); color: var(--c-pink-600); }
.feed__tag--fix { background: var(--c-red-50); color: var(--c-red); }
.feed__tag--level { background: var(--c-blue-50); color: var(--c-blue); }
.feed__tag--study { background: var(--c-ice-2); color: var(--c-ink-2); }
.feed__item.is-new { box-shadow: 0 0 0 2px var(--c-blue-50), 0 10px 24px -20px rgba(11, 27, 51, .35); }
.feed__note { margin-top: 8px; font-size: 12px; color: var(--c-faint); text-align: right; }
.ahero .btn-row { margin-top: 20px; }

/* phones: absolute positions so they can trade places */
.ahero .ahero__devices { position: relative; display: block; height: clamp(380px, 34vw, 500px); margin-top: clamp(26px, 3vw, 40px); }
.ahero .ahero__devices .dev-label { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); z-index: 5; }
.ahero .ahero__devices .phone { position: absolute; top: 0; left: 50%; right: auto; bottom: auto; width: 300px; margin: 0; opacity: 1; transform-origin: 50% 0; transition: transform 1.2s cubic-bezier(.3, .7, .2, 1); }
.ahero .ahero__devices .phone.pos-c { transform: translateX(-50%); z-index: 3; }
.ahero .ahero__devices .phone.pos-l { transform: translateX(calc(-50% - 330px)) translateY(64px) rotate(-3deg) scale(.8); z-index: 2; }
.ahero .ahero__devices .phone.pos-r { transform: translateX(calc(-50% + 330px)) translateY(64px) rotate(3deg) scale(.8); z-index: 2; }
.ahero .phone__in img { transition: opacity .45s ease; }
.ahero .phone__in img.is-fading { opacity: 0; }
@media (max-width: 760px) {
  .feed__list { --row: 50px; }
  .feed__item { gap: 10px; padding: 0 12px; grid-template-columns: auto minmax(0, 1fr); }
  .feed__item small { display: none; }
  .feed__item b { font-size: 15px; }
  .ahero .ahero__devices { height: 330px; }
  .ahero .ahero__devices .phone { width: 200px; border-radius: 32px; padding: 8px; }
  .ahero .ahero__devices .phone .phone__in { border-radius: 25px; }
  .ahero .ahero__devices .phone.pos-l { transform: translateX(calc(-50% - 118px)) translateY(46px) rotate(-3deg) scale(.72); }
  .ahero .ahero__devices .phone.pos-r { transform: translateX(calc(-50% + 118px)) translateY(46px) rotate(3deg) scale(.72); }
}
@media (prefers-reduced-motion: reduce) {
  .ahero .ahero__devices .phone, .ahero .phone__in img { transition: none; }
}

/* =========================================================
   19. Hero phone ring (rev. 8): 5 phones on a turning ring
   Positions are computed in r5.js from one rotation value; the
   front three face the viewer, the back two sit smaller and dimmer.
   ========================================================= */
.ahero .ring { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; outline: none; }
.ahero .ring:focus-visible { box-shadow: inset 0 0 0 3px var(--c-blue-50); border-radius: 24px; }
.ahero .ring.is-dragging { cursor: grabbing; }
.ahero .ring .phone { transform: translateX(-50%); transition: transform .85s cubic-bezier(.3, .7, .2, 1), opacity .85s ease, filter .85s ease; will-change: transform, opacity; }
.ahero .ring.is-dragging .phone, .ahero .ring.no-anim .phone { transition: none; }
.ahero .ring .phone img { pointer-events: none; }
.ring__btn { position: absolute; top: 150px; z-index: 300; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--c-line-2); background: rgba(255, 255, 255, .92); color: var(--c-ink); display: grid; place-items: center; font-size: 18px; box-shadow: 0 10px 24px -14px rgba(11, 27, 51, .45); cursor: pointer; }
.ring__btn:hover { border-color: var(--c-ink); }
.ring__btn--prev { left: calc(50% - 560px); }
.ring__btn--next { right: calc(50% - 560px); }
@media (max-width: 1180px) { .ring__btn--prev { left: 8px; } .ring__btn--next { right: 8px; } }
@media (max-width: 760px) {
  .ring__btn { top: 110px; width: 38px; height: 38px; font-size: 16px; }
  .ring__btn--prev { left: 0; } .ring__btn--next { right: 0; }
}
.ahero .ring { margin-top: clamp(48px, 4.8vw, 68px); }
.ahero .ring .dev-label { z-index: 400; }
@media (max-width: 760px) { .ahero .ring { margin-top: 44px; } }

/* ---- 5안 on the live home: what the live page keeps ---- */
.hn-page.h5-home #academy-main{padding:0!important;background:none;max-width:none}
.hn-page.h5-home{background:var(--c-bg,#fff)}
/* the opening notice keeps its live place over the top right of the first screen */
.h5-notice{position:relative;z-index:45;height:0}
@media(max-width:760px){.h5-notice{height:auto}}
/* the quick menu stays the phone bottom bar; on wider screens the 5안 header carries the same links */
@media(min-width:761px){.h5-home .hn-quick{display:none!important}}
/* on phones the page ends above the bottom bar and 루멘 (which sits just above the bar), so the last footer links stay free */
@media(max-width:760px){.h5-home .ft{padding-bottom:calc(200px + env(safe-area-inset-bottom))}}
/* the live skip link, shown only on keyboard focus (its old style came with the React page CSS) */
.h5-home .academy-skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--c-ink);color:#fff;padding:10px 14px;border-radius:8px}
.h5-home .academy-skip:focus{top:12px}
/* the studio back button never showed on the live home (the React page removed it); keep it that way */
/* (emoji-layout forces it visible with html body > #studio-floating-back#studio-floating-back, so this one is one id stronger) */
html body:has(.h5-home) > #studio-floating-back#studio-floating-back#studio-floating-back{display:none!important}

/* ---- Live parts kept on / , dressed in the 5안 design (palette, type, radius, buttons, shadows) ----
   Only on the new home (.h5-home). Content and links are the live ones; nothing here hides or moves a link. */

/* line icons in place of the text arrows and the close mark (same strokes as the 5안 arrows) */
.h5-home{
 --i-ext:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E");
 --i-next:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
 --i-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.h5-home .vti{display:inline-block;width:14px;height:14px;background:currentColor;-webkit-mask:var(--i-ext) center/contain no-repeat;mask:var(--i-ext) center/contain no-repeat;vertical-align:-2px;font-size:0;font-style:normal}
.h5-home .vti .vti-g{display:none!important}

/* 1. 토플 리뉴얼반 개강 notice */
html body .h5-home .home-notice-pair .opening-notice{font-family:var(--f-sans);color:var(--c-text)}
html body .h5-home .home-notice-pair .opening-notice details{background:#fff!important;border:1px solid var(--c-line)!important;border-radius:var(--r-l)!important;box-shadow:var(--sh-2)!important}
html body .h5-home .home-notice-pair .opening-notice summary{color:var(--c-ink)!important;font-size:13px!important;font-weight:700!important;letter-spacing:-.01em!important;padding:12px 12px 12px 20px!important;border-bottom:1px solid var(--c-line)}
html body .h5-home .home-notice-pair .opening-notice summary>span:first-child{display:inline-flex;align-items:center;gap:8px}
html body .h5-home .home-notice-pair .opening-notice summary>span:first-child::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-pink)}
html body .h5-home .home-notice-pair .opening-toggle{display:grid!important;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--c-ice);font-size:0!important;color:var(--c-ink)}
html body .h5-home .home-notice-pair .opening-toggle::before{content:"";width:13px;height:13px;background:currentColor;-webkit-mask:var(--i-x) center/contain no-repeat;mask:var(--i-x) center/contain no-repeat}
html body .h5-home .home-notice-pair .opening-toggle:hover{background:var(--c-ice-2)}
html body .h5-home .home-notice-pair .opening-copy-plate{background:#fff!important;box-shadow:0 0 0 10px #fff!important;border:0!important;border-radius:var(--r-m)!important}
html body .h5-home .home-notice-pair .opening-ticket{transform:none!important;filter:none!important;background:var(--c-ice)!important;border-radius:var(--r-m)!important;color:var(--c-ink)!important;font-family:var(--f-sans)!important}
html body .h5-home .home-notice-pair .opening-ticket .opening-toefl{color:var(--c-pink-600)!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:.14em!important}
html body .h5-home .home-notice-pair .opening-ticket strong{color:var(--c-ink)!important;font-weight:800!important;letter-spacing:-.04em!important;text-shadow:none!important}
html body .h5-home .home-notice-pair .opening-ticket b{color:var(--c-blue)!important;font-weight:750!important}
html body .h5-home .home-notice-pair :is(.opening-promise,.opening-asap){color:var(--c-muted)!important;border-color:var(--c-line)!important;background:none!important}
html body .h5-home .home-notice-pair :is(.opening-promise,.opening-asap)::before,html body .h5-home .home-notice-pair :is(.opening-promise,.opening-asap)::after{background:var(--c-line)!important;border-color:var(--c-line)!important}
html body .h5-home .home-notice-pair :is(.opening-promise,.opening-asap) p{color:var(--c-muted)!important;font-weight:600!important}
html body .h5-home .home-notice-pair :is(.opening-promise,.opening-asap) h3{color:var(--c-ink)!important;font-family:var(--f-sans)!important;font-weight:800!important;letter-spacing:-.035em!important;text-shadow:none!important;border:0!important;background:none!important}
html body .h5-home .home-notice-pair .opening-promise h3 em{color:var(--c-blue)!important;font-style:normal!important;text-decoration-color:rgba(24,87,220,.3)!important}
html body .h5-home .home-notice-pair .opening-asap h3 em{color:var(--c-pink)!important;font-style:normal!important;text-decoration-color:rgba(239,79,125,.3)!important}
html body .h5-home .home-notice-pair :is(.opening-ngu-meaning,.opening-asap-meaning){color:var(--c-faint)!important;font-weight:600!important;font-style:normal!important}
html body .h5-home .home-notice-pair .opening-location{color:var(--c-ink)!important}
html body .h5-home .home-notice-pair .opening-location span+span{color:var(--c-muted)!important;font-weight:600!important}
html body .h5-home .home-notice-pair .opening-link{display:inline-flex!important;align-items:center;justify-content:center;gap:8px!important;min-height:48px!important;padding:0 18px!important;border-radius:999px!important;border:1px solid var(--c-line-2)!important;background:#fff!important;color:var(--c-ink)!important;font-family:var(--f-sans)!important;font-size:14.5px!important;font-weight:700!important;letter-spacing:-.01em;box-shadow:none!important;text-decoration:none!important;transition:background .2s,border-color .2s,transform .2s}
html body .h5-home .home-notice-pair .opening-link:hover{transform:translateY(-1px);border-color:var(--c-ink)!important}
html body .h5-home .home-notice-pair .opening-link:not(.opening-level-test)::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:radial-gradient(ellipse 4.6px 3.6px at 50% 52%,#3a1d1d 96%,transparent 100%),#fee500}
html body .h5-home .home-notice-pair .opening-link.opening-level-test{background:var(--c-blue)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 10px 24px -10px rgba(24,87,220,.7)!important}
html body .h5-home .home-notice-pair .opening-link.opening-level-test:hover{background:var(--c-blue-600)!important}
html body .h5-home .home-notice-pair .opening-link.opening-level-test>span[aria-hidden]{display:inline-block;width:16px;height:16px;font-size:0!important;background:currentColor;-webkit-mask:var(--i-next) center/contain no-repeat;mask:var(--i-next) center/contain no-repeat}
/* the celebration keeps moving, in the 5안 colours (cobalt, pink, ice) instead of gold and teal */
.h5-home #opening-metallic-gold stop:nth-child(1){stop-color:#1146b5}.h5-home #opening-metallic-gold stop:nth-child(2){stop-color:#8fb4ff}.h5-home #opening-metallic-gold stop:nth-child(3){stop-color:#1857dc}
.h5-home #opening-brass stop:nth-child(1){stop-color:#0b1b33}.h5-home #opening-brass stop:nth-child(2){stop-color:#1d2f4b}.h5-home #opening-brass stop:nth-child(3){stop-color:#d6e6f5}.h5-home #opening-brass stop:nth-child(4){stop-color:#3d5f95}.h5-home #opening-brass stop:nth-child(5){stop-color:#0b1b33}
.h5-home #opening-bell stop:nth-child(1){stop-color:#08162b}.h5-home #opening-bell stop:nth-child(2){stop-color:#1857dc}.h5-home #opening-bell stop:nth-child(3){stop-color:#8fb4ff}
.h5-home .opening-fountain [fill="#029dbb"],.h5-home .opening-fountain [fill="#d79f35"]{fill:#1857dc}
.h5-home .opening-fountain [stroke="#029dbb"]{stroke:#1857dc}
.h5-home .opening-fountain [fill="#42bfcb"]{fill:#ef4f7d}
.h5-home .opening-fountain :is([stroke="#42bfcb"],[stroke="#32b7c9"]){stroke:#ef4f7d}
.h5-home .opening-fountain [fill="#dc9676"]{fill:#8fb4ff}.h5-home .opening-fountain [stroke="#dc9676"]{stroke:#8fb4ff}
.h5-home .opening-fountain :is([fill="#fff9d9"],[fill="#fff1b5"]){fill:#d6e6f5}
.h5-home .opening-fountain :is([stroke="#fff9d9"],[stroke="#fff2b8"],[stroke="#ffe6a0"],[stroke="#ffd978"]){stroke:#d6e6f5}
.h5-home .opening-fountain [fill="#79430e"]{fill:#0b1b33}
.h5-home .opening-notice .opening-trumpet{filter:drop-shadow(0 5px 4px rgba(11,27,51,.22))}

/* 2. phone bottom menu (quick links), as a 5안 bar */
@media(max-width:760px){
 html body .hn-page.h5-home .hn-quick{background:rgba(255,255,255,.94)!important;border:1px solid var(--c-line)!important;border-radius:var(--r-m)!important;box-shadow:var(--sh-2)!important;-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);font-family:var(--f-sans)!important}
 html body .hn-page.h5-home .hn-quick a{color:var(--c-ink-2)!important;background:none!important;border:0!important;border-radius:12px!important;transform:none!important;font-family:var(--f-sans)!important}
 html body .hn-page.h5-home .hn-quick a:hover,html body .hn-page.h5-home .hn-quick a[aria-current=page]{background:var(--c-ice)!important;color:var(--c-ink)!important}
 html body .hn-page.h5-home .hn-quick a:first-child{background:var(--c-blue)!important;color:#fff!important;box-shadow:0 10px 24px -12px rgba(24,87,220,.7)}
 html body .hn-page.h5-home .hn-quick a.hn-quick-consult{background:var(--c-ice)!important;color:var(--c-ink)!important}
 html body .hn-page.h5-home .hn-quick a.hn-quick-consult strong::before{content:"";display:inline-block;width:10px;height:10px;margin-right:4px;border-radius:50%;background:#fee500;box-shadow:0 0 0 1px rgba(58,29,29,.15);vertical-align:0}
 html body .hn-page.h5-home .hn-quick strong{font-weight:700!important;letter-spacing:-.02em}
 html body .hn-page.h5-home .hn-quick :is(.hn-quick-number,small){font-family:var(--f-num)!important;color:inherit;opacity:.6}
}

/* 3. 루멘: the float, the question button and the speech bubble, in the 5안 palette (the character drawing is unchanged) */
html body:has(.h5-home) #study-pet.sp{--sp-navy:#0b1b33;--sp-ink:#0b1b33;--sp-blue:#1857dc;--sp-blue-d:#1146b5;--sp-sub:#5f6f86;--sp-bg:#f4f8fc;--sp-soft:#f4f8fc;--sp-line:#e1e9f2;--sp-paper:#fff;--sp-shadow:0 30px 70px -28px rgba(11,27,51,.35),0 2px 6px rgba(11,27,51,.05);--sp-comic-fill:#fff;--sp-comic-burst:#fff0f4;--sp-comic-shadow:transparent;font-family:var(--f-sans)}
html body:has(.h5-home) #study-pet .sp-bar{border:1px solid var(--c-line);box-shadow:var(--sh-1);padding:4px}
html body:has(.h5-home) #study-pet .sp-barbtn{height:32px;padding:0 12px;font-size:12.5px;color:var(--c-ink);font-family:var(--f-sans)}
html body:has(.h5-home) #study-pet .sp-barbtn svg{color:var(--c-blue)}
html body:has(.h5-home) #study-pet .sp-bubble{border:1px solid var(--c-line)!important;border-radius:var(--r-m)!important;box-shadow:var(--sh-2)!important;background:#fff!important;padding:6px 6px 6px 2px}
html body:has(.h5-home) #study-pet .sp-bubble::before{border-top-color:var(--c-line);border-left-color:transparent}
html body:has(.h5-home) #study-pet .sp-bubble.sp-at-left::before{border-color:transparent transparent transparent var(--c-line)}
html body:has(.h5-home) #study-pet .sp-bubble .sp-bubble-text{font-family:var(--f-sans);font-weight:700;color:var(--c-ink);letter-spacing:-.01em}
html body:has(.h5-home) #study-pet .sp-bubble-x{border:1px solid var(--c-line)!important;background:var(--c-ice)!important;color:var(--c-ink)!important}
html body:has(.h5-home) #study-pet .sp-bubble.sp-burst .sp-bubble-body::before{border:1px solid #f7c4d3}
html body:has(.h5-home) #study-pet :is(.sp-panel,.sp-menu){border-radius:var(--r-l);font-family:var(--f-sans)}
html body:has(.h5-home) #study-pet .sp-head{background:var(--c-deep)}
html body:has(.h5-home) #study-pet :is(.sp-send,.sp-chip){border-radius:999px}
@media(max-width:760px){html body .h5-home .home-notice-pair .opening-link{min-height:44px!important;padding:0 10px!important;font-size:13px!important;gap:6px!important;white-space:nowrap}html body .h5-home .home-notice-pair .opening-link:not(.opening-level-test)::before{width:16px;height:16px}}

/* ---- Hero: real TOEFL score sheets flowing into the phone ring (replaces the three result rows) ---- */
.ahero{position:relative;isolation:isolate}
.ahero>.wrap{position:relative;z-index:1}
.sflow-layer{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sflow-layer img{position:absolute;left:0;top:0;height:auto;border-radius:10px;background:#fff;box-shadow:0 18px 40px -18px rgba(11,27,51,.45);filter:blur(.4px) saturate(.92);will-change:transform,opacity;opacity:0}
/* the band between the buttons and the ring that the sheets fall through */
.sflow{position:relative;height:clamp(64px,7vw,104px);pointer-events:none}
.sflow__stack{display:none}
.sflow.is-still,html:not(.js) .sflow{height:clamp(300px,28vw,380px)}
.sflow.is-still .sflow__stack,html:not(.js) .sflow .sflow__stack{display:block;position:absolute;left:50%;top:14px;width:0;height:100%}
.sflow__stack img{position:absolute;top:0;width:clamp(156px,14vw,192px);height:auto;border-radius:8px;background:#fff;opacity:.38;filter:blur(.3px);box-shadow:0 14px 30px -16px rgba(11,27,51,.4)}
.sflow__stack img:nth-child(1){transform:translateX(-118%) rotate(-7deg)}
.sflow__stack img:nth-child(2){transform:translateX(-50%) translateY(-6px);opacity:.46}
.sflow__stack img:nth-child(3){transform:translateX(18%) rotate(7deg)}
.ahero .sflow+.ring{margin-top:0}
@media(max-width:760px){.sflow{height:56px}.sflow.is-still,html:not(.js) .sflow{height:300px}}

/* phones: 베티 waits below the first screen (it sat on the headline there) */
@media(max-width:760px){
 html.h5-first body:has(.h5-home) #study-pet{opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .25s,visibility 0s .25s,transform .25s}
 html body:has(.h5-home) #study-pet{transition:opacity .3s,transform .3s}
}

/* phones: all six quick-menu items fit (상담받기 was cut at 390px) */
@media(max-width:760px){
 html body .hn-page.h5-home .hn-quick{left:6px!important;right:6px!important;padding:4px!important;gap:2px!important;grid-template-columns:repeat(6,minmax(0,1fr))!important}
 html body .hn-page.h5-home .hn-quick a{min-width:0!important;padding:10px 2px!important;justify-content:center!important;overflow:hidden}
 html body .hn-page.h5-home .hn-quick a>span:not(.hn-quick-number){min-width:0;max-width:100%}
 html body .hn-page.h5-home .hn-quick strong{font-size:11.5px!important;letter-spacing:-.04em!important;white-space:nowrap!important;text-align:center}
 html body .hn-page.h5-home .hn-quick a.hn-quick-consult strong::before{width:7px!important;height:7px!important;margin-right:2px!important;vertical-align:1px!important}
}

/* ---- header and links on the live shell (same rules as the public pages' fix stylesheet) ---- */
/* 5안 pages on the live shell: undo what the old site's stylesheets still paint on them (served on / and the five public pages). */
/* page text colour: the old shell (.hn-page) sets its navy on everything */
.hn-page.h5-home{color:var(--c-text)}
/* homepage.css paints every 학부모 link as a navy button (.hn-page a[href*="audience=parent"]); 5안 links keep their own look */
html body .hn-page.h5-home .h5 a[href*="audience=parent"]:not(.btn){background:none;color:inherit;border-color:transparent}
html body .hn-page.h5-home .h5 .hd__util a[href*="audience=parent"]:hover{color:var(--c-ink)}
html body .hn-page.h5-home .h5.ft a[href*="audience=parent"]:hover{color:#fff}
html body .hn-page.h5-home .h5 a.btn--ghost[href*="audience=parent"]{background:#fff;color:var(--c-ink);border-color:var(--c-line-2)}
html body .hn-page.h5-home .h5 a.btn--ghost[href*="audience=parent"]:hover{border-color:var(--c-ink)}
html body .hn-page.h5-home .h5 a.btn--ink[href*="audience=parent"]{background:var(--c-ink);color:#fff;border-color:transparent}
/* the page ends above 루멘 on wide screens too, so the last footer links stay free (phones: home stylesheet already pads for the bottom bar) */
@media(min-width:761px){.h5-home .ft.h5{padding-bottom:168px}}

/* from 1561px the header also shows 학부모 리포트실 / 학생 학습실: give the row room so the menu never runs into the logo */
@media(min-width:1561px){.hd .wrap.hd__in{width:min(100% - 64px,1480px)}}

/* the still stack's sheets keep their shape before they load (score sheets are about 5:9) */
.sflow__stack img{aspect-ratio:5/9;object-fit:cover;object-position:top}
.sflow__stack img,.sflow-layer img{max-width:none}
@media(max-width:760px){.sflow__stack img:nth-child(1){transform:translateX(-104%) rotate(-6deg)}.sflow__stack img:nth-child(3){transform:translateX(4%) rotate(6deg)}}

/* ==== 2026-10-18 owner requests: hero wording, class footage, small notice, no sideways scroll, pink entry buttons ==== */

/* hero: the owner's words. A struck-through line above, the headline in two fixed lines, then the subline */
.ahero .hero-pre{margin-top:22px;font-size:clamp(17px,1.9vw,26px);font-weight:700;letter-spacing:-.03em;color:var(--c-ink-2)}
.ahero .hero-pre s{color:var(--c-muted);text-decoration-line:line-through;text-decoration-color:var(--c-pink);text-decoration-thickness:.13em}
.ahero h1#hero-h{margin-top:8px}
.ahero h1#hero-h .hl{display:block;white-space:nowrap}
.ahero h1#hero-h .bl{color:var(--c-blue)}
.ahero .hero-sub{max-width:720px;margin:18px auto 0;font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--c-muted);font-weight:500}
@media(max-width:760px){
 .ahero h1#hero-h{font-size:clamp(25px,8.8vw,34px)!important;letter-spacing:-.05em}
 .ahero .hero-pre{font-size:17px;margin-top:18px}
 .ahero .hero-sub{font-size:15px;padding:0 2px}
}

/* class footage: fills the phone screen like the screenshots; on the laptop page a tall 9:16 frame */
.phone__in video.h5v{display:block;width:100%;height:auto;aspect-ratio:780/1688;object-fit:cover;pointer-events:none;background:#0b1b33}
.st-shot.st-shot--video{align-items:stretch;justify-content:center}
.st-shot--video video.h5v{display:block;height:100%;width:auto;max-width:none;aspect-ratio:9/16;object-fit:cover;border-radius:22px;box-shadow:var(--sh-2);background:#0b1b33}

/* opening notice: a small plain card (the fanfare is gone) */
html body .h5-home .home-notice-pair .opening-notice.h5n details{height:auto!important;min-height:0!important}
.h5n .h5n__body{padding:14px 18px 18px;display:grid;gap:12px;text-align:left}
.h5n .h5n__body p{margin:0;font-size:14.5px;line-height:1.5;font-weight:600;color:var(--c-ink);letter-spacing:-.01em}
.h5n .h5n__acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html body .h5-home .home-notice-pair .h5n .opening-link{width:auto!important;min-height:44px!important;padding:0 10px!important;font-size:13.5px!important;white-space:nowrap;margin:0!important}
@media(min-width:761px){html body .hn-page.hn-home .home-notice-pair{width:340px!important}}

/* never a sideways scroll on phones: nothing in the hero or the notice may widen the page */
html:has(.h5-home){overflow-x:hidden}
@supports(overflow:clip){html:has(.h5-home){overflow-x:clip}.h5-home .ahero,.h5-home .h5-notice,.h5-home .tour{overflow-x:clip}}

/* 학부모님용 리포트실 / 학생용 무료토플 학습실: pink, the strongest buttons in the header and the phone menu */
html body .hn-page.h5-home .hd a.entry{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--c-pink)!important;color:#fff!important;border:0!important;font-size:14px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;box-shadow:0 10px 22px -12px rgba(239,79,125,.9);text-decoration:none}
html body .hn-page.h5-home .hd a.entry:hover{background:var(--c-pink-600)!important;color:#fff!important}
html body .hn-page.h5-home .hd .hd__entry{display:flex!important;gap:8px;align-items:center}

@media(max-width:1260px){.hd .hd__entry{margin-left:auto}}
@media(max-width:760px){
 .hd .hd__in{flex-wrap:wrap;height:auto!important;min-height:var(--hd-h);row-gap:8px;padding-top:8px;padding-bottom:10px}
 html body .hn-page.h5-home .hd .hd__entry{order:5;width:100%;margin:0;display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
 html body .hn-page.h5-home .hd a.entry{font-size:13px;padding:0 6px;min-height:40px}
}
html body .hn-page.h5-home .hd .hd__panel .login--entry{display:grid!important;grid-template-columns:1fr;gap:8px;margin-top:16px}
html body .hn-page.h5-home .hd .hd__panel .login--entry a.entry{min-height:48px;font-size:15px}
/* the small notice keeps the live popup's place (its old inline style went with the fanfare) */
.h5-home .h5n summary{display:flex!important;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer}
.h5-home .h5n summary::-webkit-details-marker{display:none}
.h5-home .h5n summary::marker{content:''}
.h5-home .h5n:has(details:not([open])){display:none}
html body .hn-page.h5-home .home-notice-pair{position:absolute;z-index:12;top:22px;right:max(24px,calc((100% - 1200px)/2));width:330px!important;max-width:calc(100% - 32px);display:block}
html body .hn-page.h5-home .home-notice-pair .opening-notice.h5n{position:relative;inset:auto;width:100%;max-width:none;margin:0}
@media(max-width:760px){html body .hn-page.h5-home .home-notice-pair{position:relative;top:auto;right:auto;width:auto!important;max-width:none;margin:12px 16px 0}}
/* 1261-1560px: the header row has the menu, the two pink buttons and nothing else (무료 레벨테스트 stays in the hero, the notice and the menu) */
@media(min-width:1261px) and (max-width:1560px){.hd .hd__act .btn{display:none!important}.hd .hd__nav a{padding:8px 9px}}
/* phones: the taller header must not push the menu's last items under the bottom bar */
@media(max-width:760px){html body .hn-page.h5-home .hd .hd__panel{max-height:calc(100dvh - 200px);overflow-y:auto;overscroll-behavior:contain}}
/* phones: while the menu is open, 베티 steps aside so it never sits on a menu button */
@media(max-width:760px){html body:has(.h5-home .hd__menu[open]) #study-pet{visibility:hidden!important;opacity:0!important}}

/* ==== 3-part home: 수기 band between the hero and the laptop ==== */
.sband{padding:clamp(48px,6vw,88px) 0 clamp(36px,4vw,56px);background:var(--c-ice);overflow:hidden}
.sband .h2{margin-top:10px}
.sband__view{margin-top:clamp(24px,3vw,36px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.sband__lane{display:flex;gap:18px;width:max-content;padding:6px 0 18px;animation:sband-slide 90s linear infinite}
.sband:hover .sband__lane,.sband.is-held .sband__lane,.sband:focus-within .sband__lane{animation-play-state:paused}
@keyframes sband-slide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}
.sband .s9-card{width:clamp(220px,24vw,300px);height:auto}
.sband .s9-card img{aspect-ratio:4/3;object-fit:contain;background:#fff}
.sband .s9-card strong{font-size:17px}
.sband .s9-card small,.sband .s9-card__top{font-size:12.5px}
@media(prefers-reduced-motion:reduce){.sband__lane{animation:none}.sband__view{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.sband__lane>[aria-hidden="true"]{display:none}}

/* ==== laptop: program pages (one big line, one real screen, one button) ==== */
.slide--ad .stage{gap:10px}
.slide--ad .st-h{font-size:38px;line-height:1.28;max-width:1100px;letter-spacing:-.035em}
.slide--ad .st-shot{align-items:center}
.slide--ad .st-shot img{max-height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:16px;border:1px solid var(--c-line);box-shadow:var(--sh-2);background:#fff}
.slide--ad .st-acts{display:flex;gap:10px;margin-top:6px}
/* 17 pages: numbers only on wide screens, small dots on phones */
.tour__dots button span{display:none}
.tour__dots button{min-width:36px}
@media(max-width:760px){
 .tour__dots{gap:6px!important;flex-wrap:wrap!important;justify-content:center}
 .tour__dots button{width:10px!important;min-width:0;height:10px;padding:0!important;font-size:0!important;border-radius:50%;border:0;background:var(--c-line-2)}
 .tour__dots button[aria-current="true"]{background:var(--c-ink);width:22px!important;border-radius:6px}
}

/* Homepage laptop: full screenshot viewport and readable adjacent captions. */
.tour--screen-fit { scroll-margin-top:calc(var(--hd-h) + 16px); }
.tour--screen-fit .laptop { width: min(100%, 1120px); }
.tour--screen-fit .slide--screen-image .stage,
.tour--screen-fit .slide--video .stage { width:100%; height:100%; padding:0; gap:0; transform:none; }
.tour--screen-fit .slide--screen-image .stage > :not(.st-shot),
.tour--screen-fit .slide--video .stage > :not(.st-shot) { display:none; }
.tour--screen-fit .slide--screen-image .st-shot,
.tour--screen-fit .slide--video .st-shot { flex:none; width:100%; height:100%; max-width:none; margin:0; display:flex; align-items:center; justify-content:center; background:#f2f4f7; }
.tour--screen-fit .slide--screen-image .st-shot img,
.tour--screen-fit .slide--video .st-shot video { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; border:0; border-radius:0; box-shadow:none; }
.tour--screen-fit .tour__caption { max-width:800px; margin:24px auto 0; text-align:center; color:var(--c-ink); }
.tour--screen-fit .tour__caption-meta { display:flex; justify-content:center; align-items:center; gap:12px; font-size:13px; font-weight:700; color:#705b32; }
.tour--screen-fit .tour__count { font-variant-numeric:tabular-nums; color:var(--c-muted); }
.tour--screen-fit .tour__caption h3 { margin:10px 0; font-size:clamp(22px,2.5vw,30px); font-weight:800; line-height:1.4; letter-spacing:-.035em; word-break:keep-all; overflow-wrap:anywhere; }
.tour--screen-fit .tour__caption-detail { margin:0; min-height:3.4em; font-size:17px; line-height:1.7; color:var(--c-muted); word-break:keep-all; overflow-wrap:anywhere; }
.tour--screen-fit .tour__caption-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 18px; margin-top:8px; min-height:44px; }
.tour--screen-fit .tour__caption-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:6px 4px; font-size:15px; font-weight:700; color:var(--c-blue); text-underline-offset:5px; }
.tour--screen-fit .tour__caption-actions a:hover { text-decoration:underline; }
.tour--screen-fit .tour__ctl { width:min(100%,880px); margin:10px auto 0; display:grid; grid-template-columns:44px minmax(0,1fr) 44px 44px; gap:8px; align-items:center; }
.tour--screen-fit .tour__dots { order:0; display:flex; min-width:0; overflow-x:auto; flex-wrap:nowrap!important; justify-content:flex-start!important; gap:4px!important; padding:4px 2px 8px; scrollbar-width:thin; scroll-behavior:smooth; }
.tour--screen-fit .tour__dots li { flex:0 0 auto; }
.tour--screen-fit .tour__dots button,
.tour--screen-fit .tour__dots button[aria-current="true"] { width:44px!important; min-width:44px!important; height:44px; padding:0!important; font-size:14px!important; font-weight:700; border-radius:50%; border:1px solid var(--c-line); background:#fff; color:var(--c-ink); }
.tour--screen-fit .tour__dots button[aria-current="true"] { border-color:var(--c-ink); background:var(--c-ink); color:#fff; }
.tour--screen-fit .tour__btn { width:44px; min-width:44px; height:44px; }
.tour--screen-fit a:focus-visible,
.tour--screen-fit button:focus-visible { outline:3px solid var(--c-blue); outline-offset:2px; }
@media(max-width:760px) {
 .tour--screen-fit { padding-bottom:100px; }
 .tour--screen-fit .tour__caption { margin-top:20px; text-align:left; }
 .tour--screen-fit .tour__caption-meta,.tour--screen-fit .tour__caption-actions { justify-content:flex-start; }
 .tour--screen-fit .tour__caption-detail { font-size:16px; min-height:5.1em; }
 .tour--screen-fit .tour__ctl { gap:5px; }
 .tour--screen-fit .tour__dots { scroll-padding-inline:2px; }
}
@media(prefers-reduced-motion:reduce) {
 .tour--screen-fit .tour__track,.tour--screen-fit .tour__dots { scroll-behavior:auto; }
}