/* wowMath 소개 페이지 — "책상 위의 학습지"를 웹으로 옮겼다.
   색은 앱(app/lib/ui/paper_theme.dart)의 토큰 그대로다. 색은 뜻이 있을 때만 쓴다:
   레벨 색(장마다의 바탕), 채점 빨강, 확인 파랑. 버튼은 잉크색. */

@font-face { font-family: "Plex KR"; src: url("fonts/plex-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex KR"; src: url("fonts/plex-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex KR"; src: url("fonts/plex-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* 해외 페이지용 라틴·키릴·베트남 글자: IBM Plex Sans (OFL, @fontsource/ibm-plex-sans@5.2.8). 쓰는 글자 범위만 받는다. */
@font-face { font-family: "Plex"; src: url("plex/ibm-plex-sans-cyrillic-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Plex"; src: url("plex/ibm-plex-sans-cyrillic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Plex"; src: url("plex/ibm-plex-sans-vietnamese-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Plex"; src: url("plex/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plex"; src: url("plex/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plex"; src: url("plex/ibm-plex-sans-cyrillic-ext-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Plex"; src: url("plex/ibm-plex-sans-cyrillic-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Plex"; src: url("plex/ibm-plex-sans-vietnamese-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Plex"; src: url("plex/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plex"; src: url("plex/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plex"; src: url("plex/ibm-plex-sans-cyrillic-ext-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Plex"; src: url("plex/ibm-plex-sans-cyrillic-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Plex"; src: url("plex/ibm-plex-sans-vietnamese-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Plex"; src: url("plex/ibm-plex-sans-latin-ext-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Plex"; src: url("plex/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Pen"; src: url("fonts/pen.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Marker"; src: url("fonts/marker.woff2") format("woff2"); font-display: swap; }

:root {
  --desk: #e9edf2;
  --paper: #ffffff;
  --ink: #22262d;
  --sub: #5f6672;
  --rule: #c7ccd4;
  --box: #8c939e;
  --pencil: #3f434a;
  --red: #dd3b31;
  --red-field: #c8322a;
  --blue: #2f66c8;
  --lv-a: #f5c84c; --lv-b: #f4a261; --lv-c: #ef97ae; --lv-d: #86bdeb; --lv-e: #93cf90;
  --lv-f: #bba7e6; --lv-g: #76cbc3; --lv-h: #a4b2c8; --lv-i: #e8b4d8; --lv-j: #c9d27a;

  --font: "Plex KR", "Plex", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --m: clamp(16px, 3vw, 40px);          /* 바깥 여백 한 쌍 */
  --gap: clamp(12px, 1.7vw, 24px);      /* 칸 사이 */
  --d1: clamp(48px, 8.4vw, 136px);      /* 가장 큰 글 (모자이크 구호, 입력 줄, 연락처) */
  --d2: clamp(36px, 5.2vw, 80px);       /* 제목 */
  --d3: clamp(20px, 1.7vw, 24px);       /* 작은 제목, 순서 문장, 짧은 머리글 */
  --t: clamp(16px, 1.25vw, 18px);       /* 본문 */
  --s: 15px;                            /* 쪽지 */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

html:not([lang="ko"]) { --font: "Plex", "Plex KR", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
html[lang="ja"] { --font: "Plex", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", "Plex KR", sans-serif; }
html[lang="zh-CN"] { --font: "Plex", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Plex KR", sans-serif; }
html[lang="zh-TW"] { --font: "Plex", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Plex KR", sans-serif; }
html[lang="th"] { --font: "Plex", "Noto Sans Thai", "Thonburi", "Leelawadee UI", "Tahoma", "Plex KR", sans-serif; }
html[lang="hi"] { --font: "Plex", "Noto Sans Devanagari", "Kohinoor Devanagari", "Nirmala UI", "Mangal", "Plex KR", sans-serif; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --desk: #1b1e23; --paper: #2a2e35; --ink: #eceef1; --sub: #a9b0ba; --rule: #454b55; --box: #8a919c;
    --pencil: #d9dce1; --red: #ff6b5f; --red-field: #b8302a; --blue: #7aa5ff;
  }
}
:root[data-theme="dark"] {
  --desk: #1b1e23; --paper: #2a2e35; --ink: #eceef1; --sub: #a9b0ba; --rule: #454b55; --box: #8a919c;
  --pencil: #d9dce1; --red: #ff6b5f; --red-field: #b8302a; --blue: #7aa5ff;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--desk); color: var(--ink); font-family: var(--font); font-size: var(--t); line-height: 1.6; overflow-wrap: break-word; }
html[lang="ko"] body { word-break: keep-all; }
html[lang="ja"] body, html[lang^="zh"] body { line-break: strict; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--lv-a); color: #22262d; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { padding-inline: var(--m); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* 제목들. 큰 글은 한 단계, 촘촘하게. */
.h-d1 { font-size: var(--d1); font-weight: 700; line-height: 0.98; letter-spacing: -0.035em; }
.h-d2 { font-size: var(--d2); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
.h-d3 { font-size: var(--d3); font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; }
.lead { font-size: var(--t); max-width: 40ch; }
.small { font-size: var(--s); }

/* 버튼: 납작한 잉크색 직사각형 하나로 정한다. */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; background: #22262d; color: #fff; text-decoration: none; font-weight: 700; font-size: var(--s); border: 0; border-radius: 0; cursor: pointer; transition: transform .15s var(--ease), background-color .15s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn[aria-disabled="true"] { cursor: default; }
.btn .soon { font-weight: 500; font-size: var(--s); padding: 2px 8px; background: rgba(255,255,255,.16); }
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.facts { margin-top: 16px; font-size: var(--s); color: var(--ink); }

/* ---------- 상단 바 ---------- */
.top { position: sticky; top: 0; z-index: 20; background: var(--desk); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: var(--t); letter-spacing: -0.01em; }
.mark img { width: 32px; height: 32px; border-radius: 8px; }
.top nav { margin-left: auto; display: flex; gap: 24px; font-size: var(--s); }
.top nav a { text-decoration: underline 2px transparent; text-underline-offset: 6px; padding: 6px 0; transition: text-decoration-color .2s; }
.top nav a:hover { text-decoration-color: currentColor; }
.lang { position: relative; font-size: var(--s); }
.lang summary { list-style: none; cursor: pointer; padding: 8px 12px; background: var(--paper); font-weight: 500; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: " ▾"; font-size: 12px; }
.lang ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--paper); padding: 10px; width: max-content; display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 2px 8px; box-shadow: 0 12px 32px rgba(34,38,45,.18); }
.lang ul a { display: block; padding: 8px 10px; text-decoration: none; }
.lang ul a:hover { background: var(--desk); }
.lang ul a[aria-current="true"] { font-weight: 700; background: var(--desk); }
@media (max-width: 860px) { .top nav { display: none; } .lang { margin-left: auto; } }

/* ---------- 1. 히어로 ---------- */
.hero { position: relative; min-height: max(720px, calc(100svh - 72px)); overflow: hidden; }
.hero-copy { position: relative; z-index: 2; padding-top: clamp(40px, 9vh, 110px); grid-column: 1 / span 7; }
.hero-copy h1 { margin-bottom: 32px; }
.hero-copy .lead { margin-bottom: 28px; }
.stage { position: absolute; left: calc(var(--m) + (100% - 2 * var(--m) + var(--gap)) / 12 * 4); right: 0; bottom: 0; top: 46%; background: var(--lv-a);
  clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%, 0 80px); }
.stage .sheet { position: absolute; left: 56px; top: 56px; width: 640px; }
@media (max-width: 860px) {
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .hero-copy { grid-column: 1 / -1; padding-top: 28px; padding-bottom: 36px; }
  .hero-copy h1 { font-size: 10vw; margin-bottom: 20px; }
  .stage { position: relative; left: 0; top: 0; height: 430px; clip-path: polygon(64px 0, 100% 0, 100% 100%, 0 100%, 0 64px); }
  .stage .sheet { left: 16px; top: 40px; width: 600px; }
}

/* ---------- 학습지 조각 (앱 화면을 HTML 로 옮긴 것) ---------- */
[data-ui] { font-family: var(--font); color: #22262d; }
.sheet { background: #fff; transform: rotate(-1.6deg); transform-origin: 0 0; }
.sheet-head { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr .9fr; border-bottom: 2.5px solid #22262d; }
.sheet-head > div { padding: 10px 12px; border-right: 1px solid #c7ccd4; display: flex; flex-direction: column; justify-content: center; min-height: 64px; }
.sheet-head > div:last-child { border-right: 0; position: relative; }
.sheet-head .lbl { font-size: 12px; color: #5f6672; line-height: 1.2; }
.sheet-head b { font-size: 16px; line-height: 1.3; }
.sheet-head .no { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.chip { display: inline-grid; place-items: center; width: 30px; height: 30px; font-weight: 700; font-size: 17px; color: #22262d; flex: none; }
.no small { display: block; font-size: 12px; color: #5f6672; font-weight: 400; }
.sheet-head b.name, .mini-head b.name, .name { font-family: "Pen", var(--font); font-size: 34px; font-weight: 400; line-height: 1; font-weight: 400; color: #3f434a; }
.score { position: absolute; right: 8px; top: -4px; font-family: "Marker", cursive; font-size: 54px; line-height: 1; color: #dd3b31; transform: rotate(-8deg); }
.probs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px 14px; padding: 22px 18px 40px; }
.vp { position: relative; font-size: 22px; font-weight: 500; line-height: 1; display: grid; justify-items: end; gap: 6px; }
.vp .n { position: absolute; left: 0; top: 0; font-size: 12px; color: #5f6672; font-weight: 400; }
.vp .carry { display: flex; gap: 3px; }
.vp .carry i { width: 20px; height: 20px; border: 1.5px dashed #a9b0ba; font: 400 17px/18px "Pen", cursive; text-align: center; color: #3f434a; font-style: normal; }
.vp .row { display: flex; gap: 3px; letter-spacing: 0; }
.vp .row span { width: 20px; text-align: center; }
.vp .op { margin-right: 4px; }
.vp .bar { width: 100%; height: 2px; background: #22262d; }
.vp .ans { position: relative; display: flex; gap: 3px; }
.vp .ans i { width: 20px; height: 28px; border: 1.5px solid #8c939e; font: 400 26px/26px "Pen", cursive; text-align: center; color: #3f434a; font-style: normal; }

/* 채점 표시: 손으로 돌린 빨간 고리, 빗금, 파란 세모 */
.mk { position: absolute; pointer-events: none; overflow: visible; max-width: none; }
.mk path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mk-o { left: -14%; top: -30%; width: 128%; height: 160%; }
.mk-o path { stroke: #dd3b31; stroke-width: 2.6; }
.mk-x { left: 10%; top: -20%; width: 80%; height: 140%; }
.mk-x path { stroke: #dd3b31; stroke-width: 3; }
.mk-t { left: 0; top: -40%; width: 100%; height: 170%; }
.mk-t path { stroke: #2f66c8; stroke-width: 2.6; }
.js .draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .draw.on path { stroke-dashoffset: 0; transition: stroke-dashoffset .38s var(--ease); }
.js .score.draw { opacity: 0; transform: rotate(-8deg) scale(1.3); }
.js .score.draw.on { opacity: 1; transform: rotate(-8deg) scale(1); transition: opacity .2s, transform .35s var(--ease); }

/* ---------- 2. 하는 일 (큰 글 목록) ---------- */
.does { background: var(--paper); padding-block: clamp(96px, 18vh, 200px); }
.does ul { display: grid; gap: 0.35em; font-size: var(--d2); }
.does li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: first baseline; }
.does .nm { grid-column: 1 / span 8; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; transition: color .2s; }
.does .ds { grid-column: 9 / span 4; font-size: var(--t); line-height: 1.55; }
.does li.head .nm { color: var(--sub); grid-column: 1 / -1; }
.does ul:hover li:not(.head):not(:hover) .nm { color: var(--sub); }
@media (max-width: 860px) {
  .does ul { font-size: clamp(28px, 7.4vw, 56px); gap: 28px; }
  .does li { display: block; }
  .does .ds { display: block; margin-top: 8px; padding-left: var(--m); }
  .does ul:hover li:not(.head):not(:hover) .nm { color: inherit; }
}

/* ---------- 3. 한 장의 흐름 (네 칸) ---------- */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); }
.flow > li { position: relative; min-height: 84svh; padding: 112px 28px 32px; display: flex; flex-direction: column; }
.flow > li:nth-child(1) { background: var(--desk); }
.flow > li:nth-child(2) { background: var(--lv-a); color: #22262d; }
.flow > li:nth-child(3) { background: var(--lv-d); color: #22262d; }
.flow > li:nth-child(4) { background: #22262d; color: #fff; }
.flow h2 { position: absolute; top: 40px; left: 28px; right: 28px; font-size: var(--d3); line-height: 1.35; }
.flow .card-slot { flex: 1; display: grid; place-items: center; padding-block: 24px; }
.flow .say { font-size: var(--d3); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; max-width: 15em; }
.mini { width: 260px; background: #fff; transition: transform .15s var(--ease); }
.flow > li:hover .mini { transform: translateY(-6px); }
.mini-head { display: grid; grid-template-columns: 1.3fr 1fr .8fr; border-bottom: 2px solid #22262d; font-size: 11px; }
.mini-head > div { padding: 6px 8px; border-right: 1px solid #c7ccd4; position: relative; min-height: 40px; }
.mini-head > div:last-child { border-right: 0; }
.mini-head .lbl { display: block; color: #5f6672; font-size: 10px; line-height: 1.2; }
.mini-head b { font-size: 13px; }
.mini-head .chip { width: 20px; height: 20px; font-size: 12px; margin-right: 5px; vertical-align: -5px; }
.mini-head b.name { font-size: 24px; line-height: 1; }
.mini-head .score { font-size: 34px; right: 4px; top: -2px; }
.mini-probs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 14px 12px 18px; }
.hp { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.hp .box { position: relative; width: 40px; height: 28px; border: 1.5px solid #8c939e; font: 400 23px/26px "Pen", cursive; text-align: center; color: #3f434a; }
.hp .box s { text-decoration: none; position: absolute; inset: 0; color: #a9b0ba; }
.mini .done-btn { margin: 0 12px 14px auto; display: block; width: max-content; padding: 6px 12px; background: #2e7d5b; color: #fff; font-size: 12px; font-weight: 700; }
.stamp { position: absolute; right: -18px; bottom: -22px; width: 84px; height: 84px; border: 4px solid #dd3b31; border-radius: 50%; display: grid; place-items: center; color: #dd3b31; font: 400 40px/1 "Marker", cursive; transform: rotate(-14deg); background: rgba(255,255,255,.0); }
@media (max-width: 1100px) and (min-width: 861px) { .mini { width: 220px; } .hp .box { width: 34px; } }
@media (max-width: 860px) and (min-width: 600px) {
  .flow > li { display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: 24px; }
  .flow .say { grid-column: 1; grid-row: 1; }
  .flow .card-slot { grid-column: 2; grid-row: 1; justify-items: end; }
}
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; }
  .flow > li { min-height: 64svh; padding: 88px 20px 32px; }
  .flow h2 { top: 32px; left: 20px; }
  .flow .card-slot { justify-items: start; }
  .flow h2 { font-size: 24px; }
}

/* ---------- 4. 분량 (모자이크) ---------- */
.amount { padding: 8px; }
.board { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(2, minmax(260px, 38svh)); gap: 8px; }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 24px; }
.tile-a { grid-column: 1 / span 8; grid-row: 1 / span 2; background: #22262d; color: #fff; }
.tile-b { grid-column: 9 / span 4; grid-row: 1; background: var(--lv-a); color: #22262d; }
.tile-c { grid-column: 9 / span 4; grid-row: 2; background: var(--lv-d); color: #22262d; }
.tile-a .h-d1 { font-size: var(--d1); line-height: .9; }
.tile .fig { font-size: var(--d2); font-weight: 700; line-height: .95; letter-spacing: -0.04em; }
.tile .cap { font-size: var(--t); margin-top: 10px; }
.tile-a .ladder { position: absolute; top: 24px; left: 24px; right: 24px; display: flex; gap: 6px; }
.tile-a .ladder span { flex: 1; height: 44px; display: grid; place-items: center; font-weight: 700; color: #22262d; font-size: 18px; }
.amount-text { margin-top: 8px; background: var(--paper); padding: clamp(32px, 5vw, 64px) clamp(20px, 3vw, 40px); }
.amount-text .levels { grid-column: 1 / span 5; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; align-content: start; }
.amount-text .levels li { display: flex; align-items: center; gap: 12px; font-size: var(--t); }
.amount-text .levels .chip { width: 28px; height: 28px; font-size: 15px; }
.amount-text .words { grid-column: 7 / span 6; font-size: var(--d3); line-height: 1.55; }
.amount-text .words p + p { margin-top: 1em; }
@media (max-width: 860px) {
  .amount { padding: 6px; }
  .board { grid-template-columns: 1fr 1fr; grid-template-rows: 46svh auto; gap: 6px; }
  .tile-a { grid-column: 1 / -1; grid-row: 1; }
  .tile-a .h-d1 { font-size: 17vw; }
  .tile-b, .tile-c { grid-column: auto; grid-row: 2; aspect-ratio: 1; padding: 14px; }
  .tile .fig { font-size: 11vw; }
  .tile .cap { font-size: 14px; }
  .amount-text { margin-top: 6px; padding: 32px 20px; }
  .amount-text .levels, .amount-text .words { grid-column: 1 / -1; }
  .amount-text .words { margin-top: 32px; font-size: 18px; }
  .tile-a .ladder span { height: 32px; font-size: 14px; }
}

/* ---------- 5. 직접 넣어 보기 ---------- */
.try { background: var(--paper); padding-block: clamp(80px, 14vh, 160px); min-height: 88svh; }
.try h2 { margin-bottom: 8px; }
.try .intro { color: var(--ink); max-width: 46ch; margin-bottom: 28px; }
.try-line { display: flex; align-items: baseline; gap: 0; border-bottom: 0; }
.try-line input { width: 100%; border: 0; background: transparent; padding: 0; color: var(--ink); font-size: var(--d1); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; caret-color: var(--red); outline: none; }
.try-line input:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; }
.try-out { margin-top: 40px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.try-out .face { grid-column: 1 / span 5; background: #fff; padding: 28px 32px; min-height: 220px; display: grid; place-items: center start; box-shadow: inset 0 0 0 2px var(--rule); }
.try-out .meta { grid-column: 7 / span 6; }
.try-out .lvl { display: flex; align-items: center; gap: 14px; font-size: var(--d3); font-weight: 700; line-height: 1.3; }
.try-out .lvl .chip { width: 48px; height: 48px; font-size: 26px; }
.try-out dl { margin-top: 20px; display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }
.try-out dt { color: var(--sub); }
.try-out .msg { font-size: var(--d3); font-weight: 500; }
.examples { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.examples button { border: 0; background: var(--desk); padding: 10px 16px; min-height: 44px; font-size: var(--t); font-weight: 500; cursor: pointer; transition: transform .15s var(--ease), background-color .15s; }
.examples button:hover { transform: translateY(-2px); background: var(--lv-a); color: #22262d; }
@media (max-width: 860px) {
  .try-line input { font-size: 12vw; }
  .try-out .face, .try-out .meta { grid-column: 1 / -1; }
  .try-out .meta { margin-top: 28px; }
  .try-out .face { padding: 20px; overflow-x: auto; }
}

/* 입력한 식을 앱 모양으로 그린 것 */
.eq { font-size: 34px; font-weight: 500; line-height: 1; color: #22262d; }
.eq .h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eq .abox { position: relative; display: inline-flex; gap: 4px; padding: 0 4px; min-width: 58px; height: 52px; border: 2px solid #8c939e; align-items: center; justify-content: center; font: 400 46px/1 "Pen", cursive; color: #3f434a; }
.eq .v { display: inline-grid; justify-items: end; gap: 8px; }
.eq .v .r { display: flex; gap: 4px; }
.eq .v .r span, .eq .v .r i { width: 34px; text-align: center; font-style: normal; }
.eq .v .c i { height: 30px; border: 2px dashed #a9b0ba; font: 400 24px/26px "Pen", cursive; color: #3f434a; }
.eq .v .p i { height: 38px; border: 2px dashed #a9b0ba; font: 400 32px/34px "Pen", cursive; color: #3f434a; }
.eq .v .r .ab { position: relative; display: flex; gap: 4px; width: auto; }
.eq .v .a i { height: 46px; border: 2px solid #8c939e; font: 400 40px/42px "Pen", cursive; color: #3f434a; }
.eq .v .bar { width: 100%; height: 3px; background: #22262d; }
.eq .ld { display: inline-grid; gap: 8px; }
.eq .ld .q { display: flex; gap: 4px; justify-content: flex-end; position: relative; }
.eq .ld .q .ab { position: relative; display: flex; gap: 4px; }
.eq .ld .q i { width: 34px; height: 46px; border: 2px solid #8c939e; font: 400 40px/42px "Pen", cursive; color: #3f434a; font-style: normal; text-align: center; }
.eq .ld .q i.blank { border-color: transparent; }
.eq .ld .div { display: flex; align-items: stretch; }
.eq .ld .dv { padding-right: 10px; display: flex; gap: 4px; align-items: center; }
.eq .ld .dv span, .eq .ld .dd span { width: 34px; text-align: center; }
.eq .ld .dd { display: flex; gap: 4px; border-top: 3px solid #22262d; border-left: 3px solid #22262d; border-top-left-radius: 14px; padding: 6px 0 0 0; }
.eq .ld .steps { display: grid; gap: 4px; justify-content: end; }
.eq .ld .steps .r { display: flex; gap: 4px; }
.eq .ld .steps .r i { width: 34px; height: 34px; border: 2px dashed #a9b0ba; font: 400 30px/30px "Pen", cursive; color: #3f434a; font-style: normal; text-align: center; }
.eq .ld .steps .r i.blank { border-color: transparent; }
.eq .ld .steps .r.u { border-bottom: 2px solid #22262d; padding-bottom: 4px; }
.eq .fr { display: inline-grid; justify-items: center; gap: 4px; }
.eq .fr .bar { width: 100%; min-width: 34px; height: 3px; background: #22262d; }
.eq .fbox { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.eq .fbox .w, .eq .fbox .nn, .eq .fbox .dd2 { width: 44px; height: 46px; border: 2px solid #8c939e; display: grid; place-items: center; font: 400 38px/1 "Pen", cursive; color: #3f434a; }
.eq .fbox .stack { display: grid; gap: 4px; justify-items: center; }
.eq .fbox .stack .bar { width: 44px; height: 3px; background: #22262d; }
.eq .gap { width: 6px; }

/* ---------- 6. 학부모 (안쪽 판) ---------- */
.parents { padding: 20px; background: var(--desk); }
.panel { position: relative; background: #22262d; color: #fff; min-height: 110svh; overflow: hidden; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 56px; }
.panel h2 { grid-column: 1 / span 6; color: #fff; align-self: start; }
.panel .texts { grid-column: 8 / span 5; grid-row: 1 / span 2; display: grid; gap: 48px; align-content: start; max-width: 420px; }
.panel .texts h3 { margin-bottom: 10px; }
.panel .texts p { color: #e3e6ea; }
.panel .shot { grid-column: 1 / span 7; align-self: end; margin-bottom: -56px; margin-top: 64px; }
.prog { background: #fff; color: #22262d; padding: 24px 28px 40px; clip-path: polygon(48px 0, 100% 0, 100% 100%, 0 100%, 0 48px); }
.prog-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.prog-top b { font-size: 20px; }
.prog-top span { font-size: 14px; color: #5f6672; }
.prog-rows { display: grid; gap: 6px; }
.prog-row { display: grid; grid-template-columns: 54px repeat(10, 1fr); gap: 4px; align-items: center; font-size: 13px; }
.prog-row b { font-size: 14px; }
.prog-row i { height: 26px; font-style: normal; display: grid; place-items: center; font-size: 12px; color: #22262d; }
.c0 { background: #eceef1; } .c1 { background: #f4c6c1; } .c2 { background: #f6e2ae; } .c3 { background: #bfe0cc; } .c4 { background: #5fa684; color: #fff !important; } .ct { box-shadow: inset 0 0 0 2px #2f66c8; }
.prog-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font-size: 13px; color: #5f6672; }
.prog-key span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; background: var(--k); }
.note-card { margin-top: 18px; background: #f3f5f8; padding: 16px 18px; font-size: 15px; line-height: 1.6; }
.note-card b { display: block; font-size: 13px; color: #5f6672; margin-bottom: 4px; font-weight: 500; }
@media (max-width: 860px) {
  .parents { padding: 10px; }
  .panel { display: block; padding: 28px 20px 0; min-height: 0; }
  .panel h2 { font-size: 8.5vw; margin-bottom: 32px; }
  .panel .texts { max-width: none; gap: 32px; }
  .panel .shot { margin: 40px 0 0; }
  .prog { padding: 18px 16px 28px; }
  .prog-row { grid-template-columns: 46px repeat(10, 1fr); gap: 3px; font-size: 12px; }
  .prog-row b { font-size: 12px; white-space: nowrap; }
}

/* ---------- 7. 개인정보 (두 단 목록) ---------- */
.privacy { background: var(--lv-d); color: #22262d; padding-block: clamp(96px, 16vh, 180px); }
.privacy h2 { grid-column: 1 / span 9; margin-bottom: 20px; }
.privacy .lead2 { grid-column: 1 / span 7; font-size: var(--d3); margin-bottom: 24px; }
.privacy .cols { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 40px; }
.cat-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; }
.cat-head h3 { font-size: var(--d3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.cat-head span { font-size: var(--t); }
.items { display: grid; gap: 32px; }
.item { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; }
.item svg { width: 64px; height: 64px; }
.item b { display: block; font-size: var(--t); margin-bottom: 4px; }
.item p { font-size: var(--t); line-height: 1.6; max-width: 40ch; }
.privacy .more { grid-column: 1 / -1; margin-top: 56px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.privacy .more p { font-weight: 700; font-size: var(--d3); }
.privacy .more a { font-weight: 700; }
@media (max-width: 860px) {
  .privacy .cols { grid-template-columns: 1fr; gap: 56px; }
  .privacy h2, .privacy .lead2 { grid-column: 1 / -1; }
  .item { grid-template-columns: 52px 1fr; gap: 14px; }
  .item svg { width: 52px; height: 52px; }
}

/* ---------- 8. 자주 묻는 질문 (띠마다 한 질문) ---------- */
.faq-head { background: #22262d; color: #fff; min-height: 40svh; display: flex; align-items: flex-end; padding-bottom: 40px; }
.faq-head h2 { font-size: var(--d1); }
.band { padding-block: 56px; }
.band:nth-child(odd) { background: var(--paper); }
.band:nth-child(even) { background: var(--desk); }
.band h3 { grid-column: 1 / span 5; font-size: var(--d3); font-weight: 700; line-height: 1.35; }
.band p { grid-column: 7 / span 6; font-size: var(--t); line-height: 1.6; max-width: 60ch; }
@media (max-width: 860px) {
  .faq-head { min-height: 30svh; }
  .faq-head h2 { font-size: 10vw; }
  .band { padding-block: 32px; }
  .band h3, .band p { grid-column: 1 / -1; }
  .band h3 { font-size: 22px; margin-bottom: 10px; }
}

/* ---------- 9. 마지막 (오늘 몫이 이미 열려 있다) ---------- */
.last { background: var(--lv-a); color: #22262d; min-height: 90svh; padding-block: 40px; }
.last .grid { min-height: calc(90svh - 80px); align-items: center; }
.last .words { grid-column: 1 / span 6; align-self: end; }
.last h2 { font-size: var(--d2); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 20px; }
.last .words p { max-width: 36ch; margin-bottom: 24px; }
.last .kid { grid-column: 7 / span 5; }
.kidhome { background: #e9edf2; padding: 28px; box-shadow: 0 18px 40px rgba(34,38,45,.22); }
.kidhome .hi { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.kidhome .hi b { font-size: 22px; }
.kidhome .hi span { font-size: 14px; color: #5f6672; }
.pile { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pile .pg { position: relative; background: #fff; padding: 14px; min-height: 150px; display: flex; flex-direction: column; gap: 6px; transition: transform .15s var(--ease); }
.pile .pg:hover { transform: translateY(-4px); }
.pile .pg b { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.pile .pg .chip { width: 24px; height: 24px; font-size: 13px; }
.pile .pg span { font-size: 13px; color: #5f6672; }
.pile .pg.done { opacity: .62; }
.pile .pg .st { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; border: 3px solid #dd3b31; border-radius: 50%; display: grid; place-items: center; color: #dd3b31; font: 400 22px/1 "Marker", cursive; transform: rotate(-12deg); }
.pile .pg.now { box-shadow: inset 0 0 0 3px #22262d; }
.pile .go { margin-top: auto; background: #22262d; color: #fff; text-align: center; padding: 8px; font-size: 14px; font-weight: 700; }
@media (max-width: 860px) {
  .last .words, .last .kid { grid-column: 1 / -1; }
  .last h2 { font-size: 10vw; }
  .last .kid { margin-top: 40px; }
  .kidhome { padding: 16px; }
  .pile { gap: 8px; }
  .pile .pg { min-height: 120px; padding: 10px; }
}

/* ---------- 10. 바닥 (연락처가 제목) ---------- */
.foot { background: var(--red-field); color: #fff; min-height: 72svh; display: flex; flex-direction: column; padding-block: 40px 32px; }
.foot .row1 { display: flex; justify-content: space-between; gap: 24px; font-size: var(--s); }
.foot .row1 ul { display: grid; gap: 4px; }
.foot .row1 a { text-decoration: none; }
.foot .contact { margin-top: auto; }
.foot .contact p { font-size: var(--t); margin-bottom: 8px; }
.foot .contact a { display: inline-block; font-size: clamp(36px, 7vw, 120px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; text-decoration: none; }
.foot .contact a:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 10px; }
.foot .meta { margin-top: 40px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px 24px; font-size: var(--s); }
.foot .meta .l { display: flex; gap: 20px; flex-wrap: wrap; }
.foot .meta .r { text-align: right; }
@media (max-width: 860px) {
  .foot { min-height: 80svh; }
  .foot .row1 { flex-direction: column; }
  .foot .contact a { font-size: 11vw; }
  .foot .meta { grid-template-columns: 1fr; }
  .foot .meta .r { text-align: left; }
}

/* ---------- 움직임 ---------- */
.js [data-rv] > * { opacity: 0; transform: translateY(24px); }
.js [data-rv].in > * { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-rv].in > *:nth-child(2) { transition-delay: .08s; }
.js [data-rv].in > *:nth-child(3) { transition-delay: .16s; }
.js [data-rv].in > *:nth-child(4) { transition-delay: .24s; }
.js [data-rv].in > *:nth-child(5) { transition-delay: .32s; }
.js [data-rv].in > *:nth-child(6) { transition-delay: .40s; }
.js [data-rv].in > *:nth-child(n+7) { transition-delay: .46s; }
.js .stage { clip-path: polygon(80px 100%, 100% 100%, 100% 100%, 0 100%, 0 100%); }
.js .stage.open { clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%, 0 80px); transition: clip-path 1.1s var(--ease); }
.js .stage .sheet { transform: rotate(-1.6deg) translateY(40px) scale(1.04); }
.js .stage.open .sheet { transform: rotate(-1.6deg); transition: transform 1.2s var(--ease); }
@media (max-width: 860px) {
  .js .stage { clip-path: polygon(64px 100%, 100% 100%, 100% 100%, 0 100%, 0 100%); }
  .js .stage.open { clip-path: polygon(64px 0, 100% 0, 100% 100%, 0 100%, 0 64px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rv] > *, .js [data-rv].in > * { opacity: 1; transform: none; transition: none; }
  .js .stage, .js .stage.open { clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%, 0 80px); transition: none; }
  .js .stage .sheet, .js .stage.open .sheet { transform: rotate(-1.6deg); transition: none; }
  .js .draw path { stroke-dashoffset: 0; }
  .js .score.draw { opacity: 1; transform: rotate(-8deg); }
  .btn, .mini, .pile .pg, .examples button { transition: none; }
}

/* ---------- 문서 페이지 (개인정보처리방침·지원) ---------- */
.doc { background: var(--paper); padding-block: clamp(48px, 8vh, 96px) clamp(96px, 14vh, 160px); }
.doc .toc { grid-column: 1 / span 3; position: sticky; top: 96px; align-self: start; font-size: var(--s); }
.doc .toc p { font-weight: 700; margin-bottom: 10px; }
.doc .toc ol { display: grid; gap: 6px; }
.doc .toc a { text-decoration: none; color: var(--ink); }
.doc .toc a:hover { text-decoration: underline; text-underline-offset: 4px; }
.doc article { grid-column: 4 / span 8; max-width: 760px; }
.doc h1 { margin-bottom: 12px; font-size: clamp(30px, 4vw, 56px); hyphens: auto; }
.doc .when { color: var(--ink); margin-bottom: 32px; }
.doc h2 { font-size: var(--d3); font-weight: 700; line-height: 1.35; margin: 56px 0 14px; scroll-margin-top: 96px; }
.doc h3 { font-size: var(--t); font-weight: 700; margin: 28px 0 8px; }
.doc p { margin-bottom: 14px; }
.doc .summary { background: var(--desk); padding: 28px 32px; margin-bottom: 32px; }
.doc .summary h2 { margin: 0 0 12px; }
.doc .summary ul { display: grid; gap: 8px; }
.doc .summary li { padding-left: 1.2em; position: relative; }
.doc .summary li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--red); border-radius: 50%; }
.doc .summary.ask .btn { margin-top: 6px; }
.doc ul.dots { display: grid; gap: 8px; margin-bottom: 14px; }
.doc ul.dots li { padding-left: 1.2em; position: relative; }
.doc ul.dots li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--ink); }
.doc ol.steps { counter-reset: s; display: grid; gap: 10px; margin-bottom: 14px; }
.doc ol.steps li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; gap: 8px; }
.doc ol.steps li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; background: var(--lv-a); color: #22262d; font-weight: 700; }
.doc table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: var(--t); }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.doc th { background: var(--desk); font-weight: 700; }
.doc td:first-child { width: 34%; font-weight: 500; }
.doc .contact-line a { font-weight: 700; }
.doc .note:empty { display: none; }
.doc .note { color: var(--ink); background: var(--desk); padding: 12px 16px; }
.foot-doc { min-height: 0; padding-block: 28px; }
.foot-doc .meta { margin-top: 0; }
.nf { min-height: 70svh; background: var(--paper); display: flex; align-items: center; padding-block: 64px; }
.nf .nf-score { font: 400 clamp(96px, 16vw, 220px)/1 "Marker", cursive; color: var(--red); transform: rotate(-6deg); margin-bottom: 8px; }
.nf h1 { margin-bottom: 12px; }
.nf p { margin-bottom: 20px; }
@media (max-width: 860px) {
  .doc .toc { display: none; }
  .doc article { grid-column: 1 / -1; }
  .doc .summary { padding: 20px; }
  .doc td:first-child { width: 38%; }
  .doc th, .doc td { padding: 10px 8px; }
}

/* 한중일 제목은 띄어쓰기로 줄이 나뉘지 않아 한 단계 줄인다 */
html[lang="ja"] .hero h1, html[lang^="zh"] .hero h1 { font-size: clamp(32px, 4.6vw, 68px); }
@media (max-width: 860px) { html[lang="ja"] .hero-copy h1, html[lang^="zh"] .hero-copy h1 { font-size: 8vw; } }
/* 펜 글꼴에 없는 글자(한중일·태국·데바나가리·키릴)로 쓴 예시 이름은 한 단계 작게, 한 줄로 */
.sheet-head b.name, .mini-head b.name { white-space: nowrap; }
html[lang="ja"] .sheet-head b.name, html[lang^="zh"] .sheet-head b.name, html[lang="th"] .sheet-head b.name,
html[lang="hi"] .sheet-head b.name, html[lang="ru"] .sheet-head b.name { font-size: 22px; }
html[lang="ja"] .mini-head b.name, html[lang^="zh"] .mini-head b.name, html[lang="th"] .mini-head b.name,
html[lang="hi"] .mini-head b.name, html[lang="ru"] .mini-head b.name { font-size: 15px; }
.hero-copy .facts { max-width: 30em; }

/* ---------- 실제 앱 화면 ---------- */
.shots { background: var(--paper); padding-block: clamp(96px, 14vh, 160px); }
.shots h2 { margin-bottom: 40px; }
.shots-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 32px; }
.shots figure { margin: 0; grid-column: 9 / span 4; }
.shots figure.big { grid-column: 1 / span 8; grid-row: 1 / span 2; }
.shots img { width: 100%; height: auto; background: var(--desk); box-shadow: inset 0 0 0 1px var(--rule); }
.shots figcaption { margin-top: 12px; font-size: var(--t); max-width: 52ch; }
.shots-note { margin-top: 32px; font-size: var(--s); }
@media (max-width: 860px) {
  .shots figure, .shots figure.big { grid-column: 1 / -1; grid-row: auto; }
}