/* =====================================================================
   띵킷 교실 · 하루 사고력 — 디자인 토큰 + 기본 부품 (v1 · 2026-10-21)
   모든 시안이 이 한 파일을 같이 씀. 값을 바꿀 때는 여기만 고친다.
   읽는 법: 1 색 → 2 글꼴 → 3 크기 단계(기기별) → 4 간격·둥글기·그림자 → 5 움직임 → 6 부품
   ===================================================================== */

/* ---------- 2. 글꼴 (자체 호스팅) ----------
   프리텐다드(SIL 공개 글꼴 사용권 1.1 — 상업 사용 · 임베딩 · 웹 배포 가능, 글꼴 파일 자체 판매만 금지)
   파일을 fonts/ 에 넣으면 아래 주석을 푼다. 파일이 없으면 본고딕(Noto Sans KR, 같은 사용권) → 맑은 고딕 순서로 대신 그림.
*/
@font-face { font-family: "Pretendard Variable"; font-weight: 45 920; font-style: normal; font-display: swap;
  src: url("../fonts/PretendardVariable.woff2") format("woff2-variations"), url("../fonts/PretendardVariable.woff2") format("woff2"); }

:root {
  /* ---------- 1-1. 학원판 바탕 · 글자 (차분 · 믿음) ---------- */
  --ink: #15213B;          /* 제목 · 본문 — 흰 바탕 15.6:1 */
  --ink-2: #44506C;        /* 설명 — 흰 바탕 8.2:1 */
  --ink-3: #66708A;        /* 자리표시 · 꺼진 글자만 — 흰 바탕 4.9:1 (본문 금지) */
  --bg: #F4F5F8;           /* 화면 바탕 */
  --bg-2: #EBEEF4;         /* 묶음 바탕(왼쪽 메뉴 · 표 머리) */
  --card: #FFFFFF;
  --line: #DCE1EB;         /* 카드 테두리 · 나눔선 */
  --line-2: #C3CAD9;       /* 칸 테두리 · 점선 */

  /* ---------- 1-2. 브랜드 ---------- */
  --brand: #2B3FB8;        /* 띵킷 남청 — 고른 것 · 길잡이 · 연결 글자 (흰 글자 8.0:1) */
  --brand-deep: #1C2A82;
  --brand-soft: #E7EAFB;   /* 고른 칩 바탕 — 위 글자 --brand-deep 10.9:1 */
  --spark: #F4B42A;        /* 생각 불꽃(로고 점 · 칭찬 별) — 글자색 금지, 위 글자는 --ink */
  --spark-soft: #FFF3D4;

  /* ---------- 1-3. 지금 누를 단추 (한 화면에 하나만) ---------- */
  --go: #0B7D3E;           /* 흰 글자 5.2:1 */
  --go-deep: #075C2D;
  --go-glow: #2BD46F;

  /* ---------- 1-4. 상태 (색 + 모양 + 말 셋을 같이) ---------- */
  --ok: #17703E;  --ok-bg: #E3F3E9;  --ok-line: #3FA36A;   /* 맞음 = 동그라미 */
  --no: #B5361C;  --no-bg: #FCE8E2;  --no-line: #E0735A;   /* 틀림 = 세모 + 「다시 볼까요」 */
  --wait: #5D6782; --wait-bg: #EEF0F5; --wait-line: #B9C0D0; /* 아직 = 빈 네모 */
  --busy: #2B3FB8; --busy-bg: #EEF0FD; --busy-line: #8D9AE6; /* 푸는 중 = 점선 + 연필 */
  --hint: #A94F09; --hint-bg: #FFF0DF;                      /* 힌트 · 주의 */
  --danger: #B5361C;                                        /* 멈춤 · 지우기 */

  /* ---------- 1-5. 아이 화면 블록색 (밝음) — 주색 위 흰 글자 AA, 노랑만 남색 글자 ---------- */
  --k-blue: #2F62E0;   --k-blue-soft: #E4EBFF;   --k-blue-deep: #1F48B3;
  --k-sun: #FFC21A;    --k-sun-soft: #FFF4CC;    --k-sun-deep: #8A5A00;
  --k-tomato: #E0502C; --k-tomato-soft: #FFE6DE; --k-tomato-deep: #A93718;
  --k-grape: #7A50DE;  --k-grape-soft: #EEE7FF;  --k-grape-deep: #5631B8;
  --k-aqua: #138FB2;   --k-aqua-soft: #DDF4FA;   --k-aqua-deep: #0C6A86;
  --k-berry: #D0407A;  --k-berry-soft: #FFE3EE;  --k-berry-deep: #A12A5C;
  --k-bg: #F6F8FF;

  /* 영역 7 고정색 (어느 화면이든 같은 영역 = 같은 색) */
  --a-num: var(--k-blue);      /* 수와 연산 */
  --a-shape: var(--k-aqua);    /* 도형 */
  --a-meas: var(--k-sun-deep); /* 측정 */
  --a-pat: var(--k-grape);     /* 규칙과 패턴 */
  --a-case: var(--k-berry);    /* 경우의 수 · 자료 */
  --a-logic: var(--k-tomato);  /* 논리 · 추론 */
  --a-puz: #3B6E2A;            /* 퍼즐 · 전략 */

  /* ---------- 1-6. 인쇄 흑백 ---------- */
  --p-ink: #000000; --p-g1: #3A3A3A; --p-g2: #7A7A7A; --p-g3: #B8B8B8; --p-g4: #E4E4E4;

  /* ---------- 2. 글꼴 ---------- */
  --font: "Pretendard Variable", "Pretendard", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --font-num: "Pretendard Variable", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;

  /* ---------- 3. 크기 단계 — 노트북(기본) ----------
     어떤 화면도 12px 밑 금지. 기본 바닥 18px. 16px 은 작은 숫자 배지 · 원장 관리 화면만. */
  --t-badge: 16px;
  --t-s: 18px;     /* 보조 · 표 칸 */
  --t-m: 20px;     /* 본문 */
  --t-l: 24px;     /* 카드 제목 */
  --t-xl: 30px;    /* 화면 제목 */
  --t-2xl: 40px;   /* 큰 숫자 */
  --t-3xl: 56px;   /* 첫 화면 큰 글 */
  --hit: 48px;     /* 누르는 곳 최소 */
  --icon: 24px;

  /* ---------- 4. 간격 (4의 배수만) · 둥글기 · 그림자 ---------- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gap-group: 32px;      /* 묶음과 묶음 사이 — 관리 화면은 48px */
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 24px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(21,33,59,.06);
  --sh-2: 0 1px 2px rgba(21,33,59,.05), 0 10px 24px -14px rgba(21,33,59,.30);
  --sh-3: 0 2px 4px rgba(21,33,59,.06), 0 24px 48px -20px rgba(21,33,59,.35);
  --sh-panel: -16px 0 40px -24px rgba(21,33,59,.40);      /* 오른쪽 판 — 덮개 없이 그림자만 */
  --line-w: 1px; --line-w2: 2px; --line-w3: 3px;          /* 테두리 두께는 이 셋만 */

  /* ---------- 5. 움직임 ---------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --m-fast: 140ms; --m-mid: 220ms; --m-slow: 360ms;
  --pulse: 2.4s;          /* 지금 누를 단추가 한 번 숨 쉬는 시간 */

  color-scheme: light;
}

/* ---------- 1-7. [D3 10-21] 앱 화면 색 층 — 판매 첫 화면(index · landing.css)과 한 집안 ----------
   html.tk(선생님 · 원장 앱 · 들어오기 · 체험관 · 게임관 · 칠판)에만 걸림. 판매 첫 화면 · 학부모 · 집 화면 값은 위 :root 그대로.
   밝은 하늘(고름 · 길잡이) + 주황(따뜻한 꾸밈 · 올림) + 따뜻한 흰 바탕 + 진한 남색 글자. 값을 바꿀 때는 여기만 고치면 앱 전체가 따라감.
   글자 대비(흰 바탕): ink 15.6 · ink-2 7.6 · brand 5.6 · brand-deep 8.9 · accent-deep 5.3 — 모두 AA 넘음. 주황 --accent 는 꾸밈 · 점 · 띠에만(글자색 금지). */
html.tk {
  --ink: #15213B;  --ink-2: #4A5368;  --ink-3: #6D7285;
  --bg: #F8F6F1;           /* 따뜻한 흰 종이 */
  --bg-2: #F1ECE3;         /* 묶음 바탕(탭 띠 · 표 머리 · 조용한 카드) — 따뜻한 모래 */
  --card: #FFFFFF;
  --line: #E8E2D7;  --line-2: #D5CDBF;
  --brand: #0E6C96;  --brand-deep: #0A4F70;  --brand-soft: #E2F2FB;      /* 판매 첫 화면 하늘(sky-deep)과 같은 값 */
  --accent: #F2711C; --accent-deep: #B9480B; --accent-soft: #FFEBDA;     /* 판매 첫 화면 주황 */
  --cream: #FFF8EE;  --sky-1: #EEF7FC;  --sky-2: #D9EFFB;  --sky-3: #BFE3F7;
  --busy: #0E6C96; --busy-bg: #EAF5FB; --busy-line: #86C3E0;
  --hint-bg: #FFF1E3;
  --sh-1: 0 1px 2px rgba(40,35,25,.05);
  --sh-2: 0 1px 2px rgba(40,35,25,.04), 0 14px 30px -18px rgba(14,60,100,.32);
  --sh-3: 0 2px 4px rgba(40,35,25,.05), 0 28px 56px -24px rgba(14,60,100,.38);
  --sh-panel: -18px 0 44px -26px rgba(14,60,100,.42);
  /* 화면 틀 — 1366 · 1440 · 1920 에서 폭을 꽉 쓰고 가로 넘침 없게 */
  --page-max: 1840px;                          /* 본문 최대 폭(1920 에서 양옆 40) */
  --gutter: clamp(24px, 2.2vw, 40px);          /* 화면 양옆 여백 · 판 사이 */
  --col-l: clamp(300px, 20vw, 368px);          /* 왼쪽 판(반 · 단계 · 테마) — 탭 글자가 두 줄로 안 깨지는 폭 */
  --col-r: clamp(320px, 22vw, 424px);          /* 오른쪽 판(시작 · 준비물 · 미리 보기) */
  --t-title: 30px;   /* 화면 제목 */
  --t-sec: 22px;     /* 묶음 제목 */
}
html.tk[data-dev="admin"] { --t-title: 30px; }

/* ---------- 3-2. 기기별 크기 단계 — 같은 부품, 숫자만 커짐 ---------- */
[data-dev="pad"] {           /* 아이 패드 — 6세 손가락 */
  --t-badge: 18px; --t-s: 22px; --t-m: 26px; --t-l: 32px; --t-xl: 40px; --t-2xl: 56px; --t-3xl: 80px;
  --hit: 72px; --icon: 32px; --r-l: 20px; --r-xl: 28px;
}
[data-dev="board"] {         /* 전자칠판 65~86인치 — 5~8m 뒤에서 읽힘 (1920×1080 기준) */
  --t-badge: 24px; --t-s: 26px; --t-m: 32px; --t-l: 40px; --t-xl: 52px; --t-2xl: 72px; --t-3xl: 140px;
  --hit: 88px; --icon: 40px; --r-l: 20px; --r-xl: 28px;
}
[data-dev="admin"] {         /* 원장 · 관리 — 16px 바닥, 묶음 넓게 */
  --t-s: 18px; --t-m: 19px; --gap-group: 48px;
}
[data-dev="print"] {         /* 인쇄 — 흑백, 화면 px 그대로(96dpi: 18px = 13.5pt) */
  --ink: #000; --ink-2: #333; --line: #000; --bg: #fff;
}

/* ---------- 5-2. 움직임 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* =====================================================================
   6. 기본 부품
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--t-m); line-height: 1.55; font-weight: 450;
  word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 800; letter-spacing: -0.01em; }
p { margin: 0; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.sub { color: var(--ink-2); font-size: var(--t-s); }
.ico { width: var(--icon); height: var(--icon); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico .f { fill: currentColor; stroke: none; }
.ico .soft { fill: var(--ico-soft, var(--brand-soft)); stroke: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 6-1. 단추 — 모든 화면 같은 네 가지 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--hit); padding: 0 var(--s5); border-radius: var(--r-m);
  font: inherit; font-size: var(--t-s); font-weight: 700; line-height: 1.2; white-space: nowrap;
  border: var(--line-w2) solid var(--line-2); background: var(--card); color: var(--ink);
  cursor: pointer; text-decoration: none; transition: background var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease), transform var(--m-fast) var(--ease);
}
.btn:hover { border-color: var(--brand); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .chip:focus-visible, .field:focus-visible { outline: var(--line-w3) solid var(--brand); outline-offset: 3px; }
.btn-main { background: var(--brand); border-color: var(--brand); color: #fff; }       /* 남청 = 중요한 일, 깜빡이지 않음 */
.btn-main:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--bg-2); border-color: transparent; }
.btn-stop { border-color: var(--no-line); color: var(--danger); background: var(--card); }
.btn-lg { min-height: calc(var(--hit) + 12px); font-size: var(--t-m); padding: 0 var(--s6); border-radius: var(--r-l); }

/* 6-2. 지금 누를 단추 — 초록 + 부드럽게 숨 쉬기. 한 화면에 하나 */
.btn-go {
  background: var(--go); border-color: var(--go); color: #fff; position: relative;
  animation: go-breathe var(--pulse) var(--ease) infinite;
}
.btn-go:hover { background: var(--go-deep); border-color: var(--go-deep); }
@keyframes go-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(43,212,111,.0), 0 6px 16px -8px rgba(11,125,62,.55); }
  50%      { box-shadow: 0 0 0 8px rgba(43,212,111,.28), 0 6px 16px -8px rgba(11,125,62,.55); }
}

/* 6-3. 칩 — 고르기(여러 개 중 하나 또는 여럿) */
.chip {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4);
  border-radius: var(--r-pill); border: var(--line-w) solid var(--line-2); background: var(--card);
  font: inherit; font-size: var(--t-s); font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.chip[aria-pressed="true"], .chip.on { background: var(--brand-soft); border: var(--line-w2) solid var(--brand); color: var(--brand-deep); font-weight: 800; }
.chip .n { font-size: var(--t-badge); color: var(--ink-2); font-weight: 700; }
.chip.on .n { color: var(--brand-deep); }

/* 6-4. 묶음 띠(같은 자리에서 보기만 바꿈) */
.seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--bg-2); border-radius: var(--r-m); }
.seg > * { min-height: calc(var(--hit) - 8px); padding: 0 var(--s4); border-radius: var(--r-s); border: 0; background: transparent; font: inherit; font-size: var(--t-s); font-weight: 700; color: var(--ink-2); display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; }
.seg > .on { background: var(--card); color: var(--ink); box-shadow: var(--sh-1), inset 0 -3px 0 var(--brand); }

/* 6-5. 카드 */
.card { background: var(--card); border: var(--line-w) solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); }
.card-pad { padding: var(--s5); }
.card h3 { font-size: var(--t-l); }

/* 6-6. 칸(입력) */
.field { width: 100%; min-height: var(--hit); padding: 0 var(--s4); border: var(--line-w2) solid var(--line-2); border-radius: var(--r-m); background: var(--card); font: inherit; font-size: var(--t-m); color: var(--ink); }
.field::placeholder { color: var(--ink-3); }
.label { display: block; font-size: var(--t-s); font-weight: 700; margin-bottom: var(--s2); }

/* 6-7. 배지 */
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--t-badge); font-weight: 700; background: var(--bg-2); color: var(--ink-2); white-space: nowrap; }
.badge.b-brand { background: var(--brand-soft); color: var(--brand-deep); }
.badge.b-ok { background: var(--ok-bg); color: var(--ok); }
.badge.b-no { background: var(--no-bg); color: var(--no); }
.badge.b-spark { background: var(--spark-soft); color: #6E4A00; }

/* 6-8. 영역 점(색 + 첫 글자 — 색만으로 뜻을 전하지 않음) */
.area { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); font-weight: 700; color: var(--ink-2); }
.area::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--c, var(--brand)); }

/* 6-9. 난이도 막대 1~4 */
.lv { display: inline-flex; gap: 3px; align-items: flex-end; height: 20px; }
.lv i { width: 6px; border-radius: 2px; background: var(--line-2); }
.lv i:nth-child(1) { height: 8px; } .lv i:nth-child(2) { height: 12px; } .lv i:nth-child(3) { height: 16px; } .lv i:nth-child(4) { height: 20px; }
.lv[data-lv="1"] i:nth-child(-n+1), .lv[data-lv="2"] i:nth-child(-n+2), .lv[data-lv="3"] i:nth-child(-n+3), .lv[data-lv="4"] i { background: var(--ink); }

/* 6-10. 반 칸(각자 풀기) — 색 · 모양 · 말 */
.tile { position: relative; border-radius: var(--r-l); border: var(--line-w3) solid var(--wait-line); background: var(--wait-bg); padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: 6px; min-height: 140px; }
.tile .who { font-size: var(--t-l); font-weight: 800; display: flex; align-items: center; gap: var(--s3); }
.tile .st { font-size: var(--t-s); font-weight: 800; color: var(--wait); display: flex; align-items: center; gap: var(--s2); }
.tile .ans { font-size: var(--t-m); color: var(--ink-2); }
.tile .mark { width: calc(var(--icon) + 4px); height: calc(var(--icon) + 4px); }
.tile.is-ok { border-color: var(--ok-line); background: var(--ok-bg); } .tile.is-ok .st { color: var(--ok); }
.tile.is-no { border-color: var(--no-line); background: var(--no-bg); } .tile.is-no .st { color: var(--no); }
.tile.is-busy { border-style: dashed; border-color: var(--busy-line); background: var(--busy-bg); } .tile.is-busy .st { color: var(--busy); }

/* 6-11. 오른쪽 판 — 덮개 없음, 화면 높이 꽉, 뒤 화면은 그대로 보이고 눌림 */
.side { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 42vw); background: var(--card); border-left: var(--line-w) solid var(--line); box-shadow: var(--sh-panel); display: flex; flex-direction: column; z-index: 20; }
.side-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: var(--line-w) solid var(--line); min-height: 72px; }
.side-head h2 { font-size: var(--t-l); flex: 1; white-space: nowrap; }
.side-body { flex: 1; overflow: auto; padding: var(--s5); }
.side-foot { padding: var(--s4) var(--s5); border-top: var(--line-w) solid var(--line); display: flex; gap: var(--s3); }

/* 6-12. 표 — 한 줄에 하나, 줄 높이 넉넉히 */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-s); }
.tbl th { text-align: left; font-weight: 700; color: var(--ink-2); background: var(--bg-2); padding: 12px 16px; border-bottom: var(--line-w) solid var(--line); white-space: nowrap; }
.tbl th:first-child { border-top-left-radius: var(--r-m); } .tbl th:last-child { border-top-right-radius: var(--r-m); }
.tbl td { padding: 14px 16px; border-bottom: var(--line-w) solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .r { text-align: right; }

/* 6-13. 차례 띠(수업 흐름 · 만들기 순서 — 늘 같은 모양) */
.steps { display: flex; gap: var(--s2); list-style: none; padding: 0; margin: 0; }
.steps li { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-s); font-weight: 700; color: var(--ink-3); }
.steps li b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); color: var(--ink-2); font-size: var(--t-badge); }
.steps li.done b { background: var(--ok-bg); color: var(--ok); }
.steps li.now { color: var(--ink); } .steps li.now b { background: var(--brand); color: #fff; }

/* 6-14. 돌림판 고르개(시간 · 분) — 숫자 적지 않고 끌기 · 스크롤 */
.drum { display: inline-flex; gap: var(--s2); align-items: center; padding: var(--s2); background: var(--bg-2); border-radius: var(--r-l); position: relative; }
.drum-col { height: 168px; width: 92px; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; border-radius: var(--r-m); background: var(--card); position: relative;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); cursor: grab; }
.drum-col::-webkit-scrollbar { display: none; }
.drum-col div { height: 56px; display: grid; place-items: center; scroll-snap-align: center; font-size: var(--t-l); font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.drum-col div.on { color: var(--ink); font-weight: 800; }
.drum-col .pad { scroll-snap-align: none; }
.drum::after { content: ""; position: absolute; left: var(--s2); right: var(--s2); top: 50%; height: 56px; transform: translateY(-50%); border-top: var(--line-w2) solid var(--brand); border-bottom: var(--line-w2) solid var(--brand); pointer-events: none; border-radius: 4px; }
.drum .u { font-size: var(--t-s); font-weight: 700; color: var(--ink-2); padding: 0 4px; }

/* 6-15. 로고 줄 */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand svg { height: 36px; width: auto; }

/* 6-16. 윗줄(모든 어른 화면 같은 자리 · 같은 순서: 로고 → 메뉴 띠 → 빈자리 → 나) */
.topbar { height: 72px; display: flex; align-items: center; gap: var(--s5); padding: 0 var(--s5); background: var(--card); border-bottom: var(--line-w) solid var(--line); position: sticky; top: 0; z-index: 10; }
.topbar .brand .mark { height: 40px; width: auto; }
.topbar .brand b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.topbar .grow { flex: 1; }
.topbar .me { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-s); font-weight: 700; color: var(--ink-2); }
.topbar .me i { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-deep); display: grid; place-items: center; font-style: normal; font-weight: 800; }
.section-title { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-s); font-weight: 800; color: var(--ink-2); margin: 0 0 var(--s3); }
.section-title .ico { color: var(--ink-2); }
.ico-s { width: 20px; height: 20px; }

/* 6-17. 단계 배지 — 영어 이름 크게, 우리말 · 나이 작게. 이름은 stages.js(실제: config.js STAGES) 한 곳에서만 */
.stage { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 14px 6px 12px; border-radius: var(--r-m); background: #fff; border: var(--line-w) solid var(--line); box-shadow: inset 4px 0 0 var(--sc, var(--brand)); line-height: 1.15; }
.stage b { font-size: var(--t-s); font-weight: 800; letter-spacing: .01em; color: var(--ink); }
.stage small { font-size: var(--t-s); font-weight: 600; color: var(--ink-2); }
.stage-en { font-weight: 800; color: var(--ink); }