/* ═══════════════════════════════════════════════════════════════════════════
   WB 취학준비 홈팩 — 공용 디자인 체계  ·  wb.css
   ---------------------------------------------------------------------------
   이 파일 하나가 4화면(index · note · class · teacher)의 «단일 기준»이다.
   새 색·새 그림자·새 글자크기를 화면 파일에 직접 적지 말고, 여기 토큰을 써라.

   ▣ 무엇을 보고 만들었나 (두 원천의 «공통분모»를 뽑았다)
     A) 랜딩 index.html — 남색→하늘 그라데이션 히어로, 장식 원, 큰 D-day 숫자,
        분기별 --season/--season-ink, 둥근 카드+그림자, 칩/배지, 아이보리 배경
     B) 인지훈련365 지면 PDF — 알약 배지, 라틴 대문자 서브타이틀,
        «오늘의 목표» 좌측 컬러바 콜아웃, M1/M2 모듈 카드 + 소요시간 배지,
        영역별 액센트색, 연한 워시 밴드
     공통분모 = WB 블루 계열 · 둥근 모서리 · 알약 배지 · 좌측 컬러바 · 여백 리듬.
     각자의 강점 = 랜딩의 그라데이션/장식원(감성) + 365의 모듈 카드/영역색(정보 구조).

   ▣ 어느 화면이 무엇을 쓰나  ── 다른 그룹은 이 표만 보고 쓰면 된다 ──────────
     ┌ 전 화면 공통
     │   .wb-card / .wb-card--top / .wb-band / .wb-pill(3종) / .wb-btn(대·중·소)
     │   .wb-goal(오늘의 목표형 콜아웃) / .wb-latin / .wb-note / .wb-check
     │   토큰: --navy --ink-2 --line --surface --ivory --r-* --sh-* --sp-*
     ├ index.html (학부모 랜딩)      → .wb-hero + .wb-hero__geo, .wb-card,
     │   .wb-pill--wash, 문서 타이포 --ds-*, 분기색은 [data-q="1".."4"]
     ├ note.html (관찰 노트)          → .wb-card, .wb-goal, .wb-btn--md/--sm,
     │   .wb-field, 문서 타이포 --ds-*
     ├ class.html (교실 TV·태블릿)    → 교실 타이포 --fs-* «만» 쓴다(3m 가독),
     │   .wb-slide / .wb-dots / .wb-timer / .wb-stepn / .wb-btn--lg / .wb-check
     └ teacher.html (교사)            → .wb-cell(진도 그리드), .wb-modcard,
         .wb-dbadge, .wb-pill--outline, 문서 타이포 --ds-*

   ▣ 색을 «켜는» 방법 — 액센트는 상속된다
     요소에 data-domain / data-q 를 얹으면 그 «안쪽 전부»가 그 색으로 물든다.
       <section data-q="3">          … 3분기(가을) 색
       <div class="wb-modcard" data-domain="시공간"> … 365 시공간 색
     각각 --accent(비텍스트) --accent-ink(텍스트) --accent-wash(배경) --accent-edge(보더)
     네 값을 한꺼번에 세운다. 컴포넌트는 이 네 변수만 참조하므로 어디에 붙여도 맞는다.

   ▣ 명암비 규칙 (WCAG AA) — 토큰 단계에서 보장했다
     · 텍스트에는 «--*-ink» 만 쓴다. --accent / --wb-blue / --coral 은 배경·보더 전용.
     · 검증된 배경은 3종뿐: #FFFFFF · var(--ivory) · var(--accent-wash).
       그 위에서 --navy / --ink-2 / --accent-ink 는 전부 4.5:1 이상이다(실측표는 아래).
     · --accent-wash 는 «액센트 12% + 흰색». 12%가 AA를 지키는 상한이다(14%면 4.40으로 깨진다).
     · --accent-ink 위의 흰 글자도 전부 5.28:1 이상 — 알약 배지를 뒤집어 써도 안전하다.

   ▣ 금지
     · 외부 리소스 0 — @import·웹폰트 CDN·이미지 URL 금지(시스템 한글 폰트만 쓴다).
     · color-mix() 를 새로 쓰지 마라. 구형 교실 TV 대응으로 워시·엣지를 «미리 계산»해 뒀다.
     · 노출물 임상용어·가격·과장 표현 금지. 영역명(시공간·작업기억…)은 내부 분류 라벨로만.

   ▣ ⚠ class.html 은 이 파일을 <link> 하지 «않고» 통째로 인라인한다.
     첫 방문(캐시 이전)에도 스타일이 살아 있어야 하는 화면이라, /wb.css 를 링크하지 않고
     class.html 안의 «style id="wb-css"» 블록에 이 파일 원문을 넣어 두었다.
     (sw.js ALLOW 에는 2026-08-28 부터 '/wb.css' 가 들어가 있다 — 오프라인 재방문은 그쪽이 받는다.)
     (이 주석에 닫는 style 태그를 «글자 그대로» 적으면 인라인된 블록이 거기서 끊긴다 — 적지 마라.)
     이 파일을 고쳤으면 class.html 의 그 블록도 «같이» 갈아 끼워라(원문 동일 유지).
     sw.js 소유 그룹이 ALLOW 에 '/wb.css' 를 넣어 주면 그때 링크로 바꾸면 된다.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   1) 토큰
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  /* 1-1) 글꼴 — index.html 스택 그대로. 외부 폰트 0 */
  --font-sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,
    'Apple SD Gothic Neo','Noto Sans KR','Noto Sans CJK KR','Malgun Gothic','맑은 고딕',
    'NanumGothic','나눔고딕',Roboto,'Segoe UI','Helvetica Neue',Arial,sans-serif,
    'Apple Color Emoji','Segoe UI Emoji';
  /* 365 지면의 라틴 서브타이틀·모듈 태그용 */
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'DejaVu Sans Mono','Courier New',monospace;

  /* 1-2) 브랜드 — «-ink» 가 붙은 것만 텍스트에 쓴다 */
  --wb-blue:#1E9DD6;        /* 배경·보더 전용 (흰 배경 3.07:1 — 텍스트 금지) */
  --wb-blue-ink:#1478A6;    /* 텍스트용 파랑  흰 4.92 / 아이보리 4.64 */
  --navy:#1B3A5C;           /* 기본 잉크      흰 11.63 / 아이보리 10.95 */
  --coral:#E85D4A;          /* 큰 숫자·보더 전용 (3.42:1 — 작은 텍스트 금지) */
  --coral-ink:#C6412C;      /* 배지·경고 텍스트 흰 5.01 / 아이보리 4.72 */

  /* 1-3) 배경·선 — 텍스트를 얹어도 되는 배경은 이 둘과 --accent-wash 뿐이다 */
  --surface:#FFFFFF;
  --ivory:#FAF8F3;          /* 페이지 바탕 (365 지면 하단 크림 밴드와 같은 톤) */
  --line:rgba(27,58,92,.12);
  --line-strong:rgba(27,58,92,.22);

  /* 1-4) 텍스트 전용 잉크 계단 — 배경 3종 모두에서 AA 통과 */
  --ink:var(--navy);            /* 본문·제목 */
  --ink-2:rgba(27,58,92,.72);   /* 보조 설명   흰 5.03 / 아이보리 4.89 */
  --ink-on-accent:#FFFFFF;      /* --accent-ink 바탕 위 (5.28:1 이상) */

  /* 1-5) 상태 */
  --ok:#2E9D6A;      --ok-ink:#247A52;      --ok-wash:#E6F3ED;
  --warn:#D69A2D;    --warn-ink:#8C641B;    --warn-wash:#FAF3E6;
  /* danger 만 워시가 8% 다(다른 액센트는 12%). --coral-ink 는 index.html 에서 물려받은
     조금 밝은 잉크(흰 배경 5.01)라, 12% 워시 위에서는 4.37 로 깨진다. 8% → 4.57 로 통과. */
  --danger:#E85D4A;  --danger-ink:#C6412C;  --danger-wash:#FDF2F1;

  /* 1-6) 액센트 기본값 — data-domain / data-q 가 없으면 브랜드 파랑 */
  --accent:var(--wb-blue);
  --accent-ink:var(--wb-blue-ink);
  --accent-wash:#E4F3FA;
  --accent-edge:#B7E0F2;

  /* 1-7) 여백 계단 */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:26px; --sp-7:34px; --sp-8:44px;
  /* 교실 화면 세로 리듬 — 화면 높이에 따라 숨 쉰다 */
  --gap-tv:clamp(14px,2.6vh,30px);
  --pad-tv-y:clamp(20px,3.6vh,46px);
  --pad-tv-x:clamp(20px,4vw,64px);

  /* 1-8) 모서리 */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-2xl:30px; --r-pill:999px;

  /* 1-9) 그림자 */
  --sh-sm:0 1px 3px rgba(27,58,92,.06);
  --sh-md:0 4px 18px rgba(27,58,92,.07);
  --sh-lg:0 8px 30px rgba(27,58,92,.10);
  --sh-btn:0 6px 22px rgba(27,58,92,.20);

  /* 1-10) 타이포 — 두 계단을 «섞어 쓰지 마라»
     --fs-* : 교실 TV·태블릿(3m 가독). class.html 전용.
     --ds-* : 손에 든 화면(학부모·교사). index/note/teacher 전용. */
  /* ⚠ 교실 계단은 «폭만» 보면 안 된다 — 높이도 함께 본다.
     1366×768 같은 720p 교실 화면은 폭이 넓어 vw 기준 글자가 최대치에 가까워지는데,
     세로는 768px 뿐이라 슬라이드 몸통에 142px 밖에 남지 않았다(실측).
     그 결과 활동 슬라이드에서 «단계 1·2·3 이 셋 다 화면 밖»이었다.
     그래서 min(Xvw, Yvh) 로 «둘 중 작은 쪽»을 쓴다 — 주차 숫자(--fs-display)가
     이미 같은 이유로 쓰던 방식을 교실 계단 전체로 넓힌 것이다.
     vh 계수는 16:9 보다 «납작하지 않은» 화면에서는 거의 물리지 않게 잡아,
     큰 교실 TV 의 3m 가독은 그대로 둔다. */
  --fs-display:clamp(70px,min(12vw,17vh),160px);
  --fs-timer:clamp(38px,min(7.5vw,7.6vh),110px);   /* 타이머 숫자 */
  --fs-title:clamp(30px,min(6vw,6.4vh),86px);      /* 슬라이드 제목 */
  --fs-h2:clamp(30px,min(4.4vw,5.6vh),58px);       /* 화면 제목 */
  --fs-nav:clamp(22px,min(3.3vw,3.6vh),46px);      /* 이전/다음 */
  --fs-btn:clamp(22px,min(3.1vw,3.4vh),42px);      /* 큰 버튼 */
  --fs-lead:clamp(20px,min(3.2vw,3.3vh),44px);     /* 리드문·단계 */
  --fs-item:clamp(20px,min(3vw,3.2vh),42px);       /* 목록 항목 */
  --fs-sub:clamp(17px,min(2.3vw,2.5vh),31px);      /* 보조 문장 */
  --fs-chip:clamp(14px,min(1.9vw,2.1vh),26px);     /* 배지·칩 */
  --fs-note:clamp(14px,min(1.6vw,1.8vh),22px);     /* 선생님 메모 */
  --fs-fine:clamp(11px,1.15vw,14px);    /* 고지문 */

  --ds-dday:clamp(62px,21vw,92px);
  --ds-hero:clamp(27px,7.4vw,38px);
  --ds-h2:21px; --ds-h3:17px; --ds-lead:16.5px;
  --ds-body:15px; --ds-sm:13.5px; --ds-xs:12.5px; --ds-fine:11.5px;

  /* 1-11) 히어로 그라데이션 3번째 정지점과 그 위치 — 시즌이 갈아 끼운다.
     145% = index.html 의 «거의 안 보이는» 원래 값(랜딩 톤 유지).
     100% 로 당기면 시즌 색이 히어로 아래쪽에 실제로 드러난다(교실 시작 화면이 쓴다). */
  --hero-3:#1E9DD6;
  --hero-stop:145%;
}

/* ───────────────────────────────────────────────────────────────────────────
   2) 영역 5종 — 인지훈련365 지면 PDF 에서 «실측»한 액센트다. 임의로 바꾸지 마라.
      (wisc365_L0_D001~D005 1쪽 상단 룰 픽셀값)
      base 는 지면 원본 그대로, ink 는 흰·아이보리·워시 3종 배경에서 AA 를
      통과하도록 명도만 낮춘 값이다. 색상(hue)·채도는 지면과 같다.
   ─────────────────────────────────────────────────────────────────────────── */
[data-domain="시공간"]{
  --accent:#2E6FB1; --accent-ink:#2D6EAF; --accent-wash:#E6EEF6; --accent-edge:#BCD1E6;
}
[data-domain="작업기억"]{
  --accent:#2E9D6A; --accent-ink:#247A52; --accent-wash:#E6F3ED; --accent-edge:#BCE0CF;
}
[data-domain="유동추론"]{
  --accent:#7D4EB0; --accent-ink:#7D4EB0; --accent-wash:#EFEAF6; --accent-edge:#D5C6E6;
}
[data-domain="처리속도"]{
  --accent:#E74579; --accent-ink:#CF1B55; --accent-wash:#FCE9EF; --accent-edge:#F7C3D4;
}
[data-domain="언어이해"]{
  --accent:#E2732A; --accent-ink:#AB5217; --accent-wash:#FCEEE5; --accent-edge:#F6D2BB;
}

/* ───────────────────────────────────────────────────────────────────────────
   3) 분기 4종 (학사력: 1=봄 2=여름 3=가을 4=겨울) — index.html --season 계승.
      base 4색은 index.html 값 그대로. ink 만 워시 배경까지 AA 가 되도록 조금 낮췄다.
   ─────────────────────────────────────────────────────────────────────────── */
[data-q="1"]{ --accent:#D69A2D; --accent-ink:#8C641B; --accent-wash:#FAF3E6; --accent-edge:#F2DFBC; --hero-3:#D69A2D; }
[data-q="2"]{ --accent:#1E9DD6; --accent-ink:#16729C; --accent-wash:#E4F3FA; --accent-edge:#B7E0F2; --hero-3:#1E9DD6; }
[data-q="3"]{ --accent:#4CAF7D; --accent-ink:#347856; --accent-wash:#EAF5EF; --accent-edge:#C6E5D5; --hero-3:#4CAF7D; }
[data-q="4"]{ --accent:#0E9488; --accent-ink:#0B786E; --accent-wash:#E2F2F1; --accent-edge:#B2DDD9; --hero-3:#0E9488; }

/* ───────────────────────────────────────────────────────────────────────────
   4) 최소 리셋 + 바탕
   ─────────────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--ivory);
  color:var(--ink);
  line-height:1.5;
  word-break:keep-all;          /* 한글 낱말이 중간에서 끊기지 않게 */
  overflow-wrap:anywhere;       /* 그래도 긴 토큰은 감싸서 가로스크롤을 막는다 */
}
img{max-width:100%;height:auto}
button,input,select,textarea{font-family:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--wb-blue-ink)}
:focus-visible{outline:4px solid var(--wb-blue);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;
    animation-iteration-count:1 !important}
}

/* ───────────────────────────────────────────────────────────────────────────
   5) 컴포넌트 — 히어로 (랜딩 A 의 강점: 그라데이션 + 장식 원)
   ─────────────────────────────────────────────────────────────────────────── */
.wb-hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(165deg,#1B3A5C 0%,#1A557E 62%,var(--hero-3) var(--hero-stop));
}
/* 장식 원 — «어둡게 하는» 원과 «아주 옅은 흰» 원만 쓴다.
   ⚠ 장식 원을 액센트 색으로 칠하지 마라: 봄(#D69A2D) 원이 그라데이션 밝은 끝에 겹치면
   그 위의 흰 글자가 4.08:1 까지 떨어진다(불투명도 .20 에서도 4.48 로 미달).
   어둡게 하는 원은 흰 글자 대비를 «올리기만» 하므로 언제나 안전하다. */
.wb-hero__geo{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.wb-hero__geo i{position:absolute;display:block;border-radius:50%}
.wb-hero__geo i:nth-child(1){width:260px;height:260px;right:-90px;top:-110px;background:rgba(255,255,255,.08)}
.wb-hero__geo i:nth-child(2){width:190px;height:190px;left:-70px;bottom:20px;background:rgba(13,32,54,.30)}
.wb-hero__geo i:nth-child(3){width:120px;height:120px;right:14%;bottom:-50px;background:rgba(255,255,255,.06)}
.wb-hero__in{position:relative;z-index:1}
/* 히어로 안에서는 흰 글자가 기본 — 대비를 유지하기 위해 잉크 토큰을 갈아 끼운다.
   ⚠ 히어로 위 «반투명 흰 글자»는 .90 미만이면 AA 가 깨진다(그라데이션 최악 정지점에서
   .82 → 4.16 / .86 → 4.40 / .90 → 4.67). --ink-2 를 더 흐리게 낮추지 마라.
   같은 이유로 히어로 위 배지는 «흰색을 얹어» 밝히지 말고 «남색을 얹어» 어둡게 깐다. */
.wb-hero{--ink:#fff;--ink-2:rgba(255,255,255,.92)}

/* ───────────────────────────────────────────────────────────────────────────
   6) 컴포넌트 — 카드 / 밴드
   ─────────────────────────────────────────────────────────────────────────── */
.wb-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);padding:var(--sp-6) var(--sp-5);
}
.wb-card--top{border-top:4px solid var(--accent)}   /* 랜딩 분기카드 패턴 */
.wb-card--flat{box-shadow:none}
.wb-card--tv{border-radius:var(--r-2xl);box-shadow:var(--sh-lg)}
.wb-card--tv.wb-card--top{border-top-width:12px}

/* 365 지면의 연한 크림/워시 밴드 */
.wb-band{background:var(--ivory);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5)}
.wb-band--accent{background:var(--accent-wash);border:1px solid var(--accent-edge)}

/* ───────────────────────────────────────────────────────────────────────────
   7) 컴포넌트 — 알약 배지 / 영역 배지 / 라틴 서브타이틀  (365 지면 B 의 강점)
   ─────────────────────────────────────────────────────────────────────────── */
.wb-pill{
  display:inline-flex;align-items:center;gap:.4em;
  font-weight:800;line-height:1.25;white-space:nowrap;
  border-radius:var(--r-pill);padding:.3em 1em;
}
.wb-pill--solid  {background:var(--accent-ink);color:var(--ink-on-accent);border:0}
.wb-pill--outline{background:transparent;color:var(--accent-ink);border:2px solid currentColor}
.wb-pill--wash   {background:var(--accent-wash);color:var(--accent-ink);border:1px solid var(--accent-edge)}
.wb-pill--navy   {background:var(--navy);color:#fff;border:0}
.wb-pill--alert  {background:var(--danger-ink);color:#fff;border:0}

/* 영역 배지 — 앞에 색점을 달아 색만으로 구분하지 않게 한다(색각 이상 대비) */
.wb-dbadge{
  display:inline-flex;align-items:center;gap:.45em;
  background:var(--accent-wash);color:var(--accent-ink);border:1px solid var(--accent-edge);
  border-radius:var(--r-pill);padding:.25em .85em;font-weight:800;line-height:1.3;white-space:nowrap;
}
.wb-dbadge::before{content:"";width:.62em;height:.62em;border-radius:50%;background:var(--accent);flex:none}

/* 365 지면의 «VISUAL SPATIAL · 시공간 · L0 · D001» 줄 */
.wb-latin{
  font-family:var(--font-mono);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent-ink);
}

/* 365 지면의 M1/M2 모듈 태그 */
.wb-modtag{
  font-family:var(--font-mono);font-weight:800;letter-spacing:.06em;
  color:var(--accent-ink);border:2px solid var(--accent-edge);
  border-radius:var(--r-sm);padding:.1em .5em;line-height:1.35;flex:none;
}
/* 소요시간 배지 — 365 지면의 오른쪽 빨간 알약 */
.wb-mins{
  margin-left:auto;flex:none;background:var(--coral-ink);color:#fff;
  border-radius:var(--r-pill);padding:.2em .8em;font-weight:800;line-height:1.35;white-space:nowrap;
}

/* ───────────────────────────────────────────────────────────────────────────
   8) 컴포넌트 — «오늘의 목표»형 콜아웃 (좌측 컬러바)  ★ 365 지면의 핵심 장치
   ─────────────────────────────────────────────────────────────────────────── */
.wb-goal{
  text-align:left;
  background:var(--accent-wash);
  border-left:6px solid var(--accent);
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:var(--sp-4) var(--sp-5);
}
.wb-goal__label{font-weight:800;color:var(--accent-ink)}
.wb-goal__label::after{content:" — ";color:var(--ink-2);font-weight:600}
.wb-goal--tv{border-left-width:10px;padding:var(--sp-5) var(--sp-6)}

/* ───────────────────────────────────────────────────────────────────────────
   9) 컴포넌트 — 365 모듈 카드 (교사·교실에서 활동지 한 장을 미리 보여 줄 때)
      ⚠ 이 카드는 «자리»다. 안에 넣을 내용은 인지훈련365 원본에서 가져와 채운다.
   ─────────────────────────────────────────────────────────────────────────── */
.wb-modcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);overflow:hidden;text-align:left;
}
.wb-modcard__head{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);
}
.wb-modcard__title{font-weight:800;color:var(--ink);min-width:0}
.wb-modcard__body{padding:var(--sp-3) var(--sp-4);color:var(--ink-2)}
.wb-modcard__hint{background:var(--accent-wash);color:var(--ink);padding:var(--sp-3) var(--sp-4)}
/* 아직 실물이 안 붙은 슬롯 */
.wb-modcard--slot{border-style:dashed;border-color:var(--line-strong);box-shadow:none;background:transparent}

/* ───────────────────────────────────────────────────────────────────────────
   10) 컴포넌트 — 버튼 (대 88 / 중 72 / 소 56 — 전부 터치 44px 이상)
   ─────────────────────────────────────────────────────────────────────────── */
.wb-btn{
  appearance:none;border:0;font-family:inherit;font-weight:800;line-height:1.2;
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  border-radius:var(--r-xl);text-decoration:none;text-align:center;
  transition:transform .1s ease;
}
.wb-btn:active{transform:scale(.97)}
.wb-btn[disabled],.wb-btn[aria-disabled="true"]{opacity:.35;cursor:default;transform:none}

.wb-btn--lg{min-height:88px;font-size:var(--fs-btn);padding:clamp(14px,2.4vh,24px) clamp(28px,4.4vw,54px)}
.wb-btn--md{min-height:72px;font-size:var(--fs-sub);padding:12px clamp(18px,2.4vw,28px)}
.wb-btn--sm{min-height:56px;font-size:var(--fs-note);padding:10px 20px;border-radius:var(--r-md)}

.wb-btn--primary{background:var(--navy);color:#fff;box-shadow:var(--sh-btn)}
.wb-btn--accent {background:var(--accent-ink);color:var(--ink-on-accent);box-shadow:var(--sh-btn)}
.wb-btn--ghost  {background:var(--surface);color:var(--navy);border:3px solid var(--navy);box-shadow:none}
.wb-btn--quiet  {background:var(--surface);color:var(--navy);border:2px solid var(--line);box-shadow:none}
.wb-btn--quiet[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ───────────────────────────────────────────────────────────────────────────
   11) 컴포넌트 — 진행 점(dots). 현재 단계만 «이름표 알약»으로 펼쳐진다.
       3m 밖에서 «지금 몇 번째인지»가 1초에 보이는 것이 목적이다.
   ─────────────────────────────────────────────────────────────────────────── */
.wb-dots{display:flex;gap:var(--sp-2);justify-content:center;align-items:center;flex-wrap:wrap}
.wb-dot{
  appearance:none;border:0;background:none;padding:6px 2px;
  min-height:44px;display:flex;align-items:center;justify-content:center;  /* 터치 44px 확보 */
}
.wb-dot__mark{
  display:flex;align-items:center;justify-content:center;
  height:20px;min-width:20px;border-radius:var(--r-pill);
  background:rgba(27,58,92,.16);transition:background .18s ease;
}
.wb-dot[data-state="done"] .wb-dot__mark{background:var(--accent-edge)}
.wb-dot[aria-current="true"] .wb-dot__mark{
  height:auto;min-height:40px;padding:.2em .9em;background:var(--accent-ink);
}
.wb-dot__txt{display:none;font-weight:800;font-size:var(--fs-note);color:var(--ink-on-accent);white-space:nowrap}
.wb-dot[aria-current="true"] .wb-dot__txt{display:inline}

/* ───────────────────────────────────────────────────────────────────────────
   12) 컴포넌트 — 타이머 (숫자 + 남은 시간 막대)
   ─────────────────────────────────────────────────────────────────────────── */
/* 한 줄에 [숫자][시작·처음부터][5·7·10분] 이 모두 들어가도록 잡았다.
   버튼이 아랫줄로 접히면 타이머 띠가 300px 가까이 자라 «단계 목록»을 잡아먹는다(실측). */
.wb-timer{
  width:100%;display:flex;flex-direction:column;gap:var(--sp-2);
  background:var(--accent-wash);border:2px solid var(--accent-edge);
  border-radius:var(--r-xl);padding:var(--sp-3) var(--sp-4);
}
.wb-timer__row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;justify-content:center}
.wb-timer__num{
  font-variant-numeric:tabular-nums;font-weight:800;line-height:1;letter-spacing:-.02em;
  font-size:var(--fs-timer);min-width:4.4ch;color:var(--ink);
}
.wb-timer__bar{height:14px;border-radius:var(--r-pill);background:rgba(27,58,92,.14);overflow:hidden}
.wb-timer__fill{display:block;height:100%;width:100%;border-radius:inherit;
  background:var(--accent-ink);transition:width .3s linear}
/* 납작한 교실 화면(720p 등)에서 타이머는 «도구»답게 자리를 양보한다.
   실측: 1366×768 에서 타이머 바닥이 180px 을 먹고 단계 목록에는 142px 만 남았다
   — 도구가 내용보다 컸다. 여기서 되찾은 높이가 그대로 단계 목록으로 간다. */
@media (max-height:820px){
  .wb-timer{gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);border-width:1px}
  .wb-timer__row{gap:var(--sp-2)}
  .wb-timer__bar{height:9px}
}
.wb-timer.is-done{background:var(--danger-wash);border-color:var(--coral)}
.wb-timer.is-done .wb-timer__num{color:var(--coral-ink);animation:wb-pulse 1s ease 3}
.wb-timer.is-done .wb-timer__fill{background:var(--coral-ink)}
@keyframes wb-pulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}

/* ───────────────────────────────────────────────────────────────────────────
   13) 컴포넌트 — 활동 번호 배지 / 완료 표시
   ─────────────────────────────────────────────────────────────────────────── */
/* 바탕은 반드시 --accent-ink 다. --accent 위의 흰 글자는 봄(#D69A2D) 에서 2.46:1 로 깨진다
   — 숫자도 «텍스트»이므로 배경 전용 토큰을 깔면 안 된다. */
.wb-stepn{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:1.6em;height:1.6em;border-radius:50%;
  background:var(--accent-ink);color:var(--ink-on-accent);font-weight:800;
}
.wb-stepn--lg{width:1.9em;height:1.9em;box-shadow:var(--sh-sm)}

/* 미완료는 «빈 점선 원»이다 — 글자를 투명색으로 숨기지 말고 아예 비워 둔다
   (투명 글자는 스크린리더에 읽히고 명암비 감사에서도 1:1 로 잡힌다) */
.wb-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.7em;height:1.7em;border-radius:50%;flex:none;
  border:4px dashed var(--line-strong);color:var(--ink-2);font-weight:800;
}
.wb-check.is-done{border:0;background:var(--accent-ink);color:var(--ink-on-accent)}

/* ───────────────────────────────────────────────────────────────────────────
   14) 컴포넌트 — 진도 그리드 셀 (teacher.html 52주 표)
   ─────────────────────────────────────────────────────────────────────────── */
.wb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:var(--sp-2)}
.wb-cell{
  min-height:46px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink-2);font-weight:700;
}
.wb-cell[data-state="done"]{background:var(--accent-wash);border-color:var(--accent-edge);color:var(--accent-ink)}
.wb-cell[data-state="now"] {border:3px solid var(--accent-ink);color:var(--accent-ink);font-weight:800}
.wb-cell[data-state="off"] {background:var(--ivory);color:var(--ink-2);opacity:.6}

/* ───────────────────────────────────────────────────────────────────────────
   15) 컴포넌트 — 선생님 메모 / 경고 / 입력칸 / 고지문
   ─────────────────────────────────────────────────────────────────────────── */
.wb-note{
  text-align:left;color:var(--ink-2);background:var(--ivory);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-5);line-height:1.55;
}
.wb-note__btn{
  min-height:56px;font-weight:700;color:var(--ink-2);background:var(--surface);
  border:2px dashed var(--line-strong);border-radius:var(--r-md);padding:0 var(--sp-5);
}
.wb-warn{
  color:var(--danger-ink);background:var(--danger-wash);font-weight:700;
  border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-6);
}
.wb-field{
  font:inherit;font-weight:700;text-align:center;background:var(--surface);color:var(--ink);
  border:2px solid var(--line);border-radius:var(--r-lg);padding:14px 18px;
}
.wb-fine{font-size:var(--fs-fine);color:var(--ink-2);line-height:1.6}

/* ───────────────────────────────────────────────────────────────────────────
   16) 유틸 — 꼭 필요한 것만
   ─────────────────────────────────────────────────────────────────────────── */
.wb-row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.wb-center{justify-content:center}
.wb-stack{display:flex;flex-direction:column}
.wb-scroll-x{overflow-x:auto;max-width:100%}
.wb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ═══════════════════════════════════════════════════════════════════════════
   부록 · 명암비 실측표 (derive_ink.py / tokens.py 로 계산, 전 항목 AA 4.5:1 이상)

     배경           navy   ink-2  accent-ink   accent-ink 위 흰글자
     ─────────────────────────────────────────────────────────────
     #FFFFFF        11.63  5.03   4.92~5.85    —
     ivory #FAF8F3  10.95  4.89   4.64~5.51    —
     시공간 wash     9.92   4.63   4.53         5.30
     작업기억 wash   10.19  4.66   4.62         5.28
     유동추론 wash    9.84   4.62   4.95         5.85
     처리속도 wash    9.99   4.65   4.58         5.33
     언어이해 wash   10.24  4.74   4.68         5.32
     봄 wash        10.53  4.78   4.81         5.31
     여름 wash      10.24  4.68   4.72         5.36
     가을 wash      10.41  4.75   4.74         5.29
     겨울 wash      10.08  4.62   4.64         5.35
   ═══════════════════════════════════════════════════════════════════════════ */