/* eng-quiz 스타일 — '크레용 사탕 워크북' 테마 (6~10세 어린이 대상).
   따뜻한 크림 종이 + 통통한 캔디 버튼(아래 하드 섀도우, 누르면 꾹 들어감) + 스티커 카드.
   글꼴: Jua(한글 제목·버튼) / Baloo 2(영어·숫자) / Gowun Dodum(본문) — index.html에서 로드, 없으면 시스템 글꼴.
   4선 연습장 줄은 CSS 배경이라 저장되는 손글씨 PNG(투명)에는 절대 섞이지 않는다 — 쓰기 캔버스와
   채점·검토 화면의 영어 손글씨 이미지에 같은 줄을 깔아(아래 .draw.eng) 줄맞춤을 본다. */
:root{
  /* 종이·잉크 */
  --paper:#fff6e1;          /* 크림 종이 배경 */
  --card:#ffffff;
  --text:#4a3528;           /* 초콜릿 잉크(검정 대신 따뜻하게) */
  --muted:#7c6753;
  --line:#ecdcbe;           /* 모래색 테두리 */
  --line-soft:#f4ead2;
  /* 사탕 팔레트: 채움색 + 진한색(테두리·그림자) + 옅은색(배경 틴트) */
  --orange:#f97316; --orange-d:#c2580c; --orange-t:#ffe8d2;   /* 메인(귤) */
  --sky:#2e96d6;    --sky-d:#1f6f9f;    --sky-t:#dff1fc;      /* 하늘 */
  --mint:#1ea563;   --mint-d:#157a49;   --mint-t:#ddf5e8;     /* 민트(성공·O) */
  --grape:#8f67d8;  --grape-d:#6c48ad;  --grape-t:#efe7fb;    /* 포도 */
  --sun:#ffc533;    --sun-d:#cf9410;    --sun-t:#fff2cc;      /* 해님(듣기·안내) */
  --red:#e94f3f;    --red-d:#b93527;    --red-t:#fde4e0;      /* 빨강(X·삭제) */
  /* 옛 변수명 호환(의미 매핑) */
  --accent:var(--orange); --accent-d:var(--orange-d); --warn:#9a6206;
  --ok:var(--mint); --no:var(--red);
  /* 글꼴: 영어·숫자는 Baloo 2, 한글은 Jua로 떨어지게 순서를 둔다 */
  --font-head:"Baloo 2","Jua","Noto Sans KR","맑은 고딕",sans-serif;
  --font-body:"Gowun Dodum","Noto Sans KR","맑은 고딕",sans-serif;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  background:
    radial-gradient(circle at 10% 6%, rgba(255,197,51,.22), transparent 24%),
    radial-gradient(circle at 92% 10%, rgba(46,150,214,.14), transparent 22%),
    radial-gradient(rgba(74,53,40,.05) 1.6px, transparent 1.7px),
    var(--paper);
  background-size:auto, auto, 26px 26px, auto;  /* 셋째 레이어 = 잔잔한 물방울 무늬 */
  color:var(--text);
  padding:16px; max-width:760px; margin:0 auto; min-height:100vh;
  line-height:1.5;
}
::selection{ background:var(--orange-t); }
h1{ font-family:var(--font-head); font-size:26px; font-weight:600; margin:0 0 4px; line-height:1.25; }
h3{ font-family:var(--font-head); font-weight:600; }
.sub{ font-size:15px; color:var(--muted); margin:0 0 18px; }

/* ---------- 버튼: 캔디 3D(아래 하드 섀도우 → 누르면 꾹) ---------- */
button{
  font-family:var(--font-head); font-size:17px; font-weight:600;
  border:2.5px solid var(--line);
  background:#fff; color:var(--text); border-radius:16px; padding:11px 20px;
  cursor:pointer; min-height:48px;
  box-shadow:0 4px 0 rgba(74,53,40,.13);
  transition:transform .08s ease, box-shadow .08s ease;
}
button:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(74,53,40,.13); }
button:focus-visible{ outline:3px solid rgba(249,115,22,.45); outline-offset:2px; }
button.primary{ background:var(--orange); color:#fff; border-color:var(--orange-d); box-shadow:0 4px 0 var(--orange-d); }
button.primary:active{ box-shadow:0 1px 0 var(--orange-d); }
button.ghost{ background:transparent; border-style:dashed; box-shadow:none; color:var(--muted); }
button.ghost:active{ transform:scale(.97); }
button:disabled{ opacity:.45; transform:none; box-shadow:0 2px 0 rgba(74,53,40,.10); cursor:default; }
button.huge{ font-size:21px; padding:16px 32px; border-radius:20px; min-height:60px; }
button.block{ display:block; width:100%; }
button.danger{ color:var(--red); border-color:var(--red); box-shadow:0 4px 0 rgba(185,53,39,.25); }
button.danger:active{ background:var(--red-t); box-shadow:0 1px 0 rgba(185,53,39,.25); }

/* ---------- 카드: 스티커(둥글 + 모래 테두리 + 하드 섀도우) ---------- */
.card{
  background:var(--card); border:2.5px solid var(--line); border-radius:22px;
  padding:20px; margin-bottom:16px;
  box-shadow:0 6px 0 rgba(74,53,40,.07);
}
.row{ display:flex; gap:10px; }
.row.vcenter{ align-items:center; }
.navrow{ margin-top:8px; }
.navrow button:first-child{ flex:1; }
.navrow button:last-child{ flex:2; }
.center{ text-align:center; }
.gap{ margin-top:12px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.mt{ margin-top:14px; }
.hidden{ display:none; }

/* ---------- 입력 ---------- */
input[type=text],input[type=password],input[type=date],select{
  font-family:var(--font-body); font-size:16px; padding:12px 14px; color:var(--text);
  border:2.5px solid var(--line); border-radius:14px; width:100%; background:#fff;
}
input:focus,select:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-t); }
label{ font-family:var(--font-head); font-size:14px; color:var(--orange-d); display:block; margin:0 0 5px; }
.pill{ font-size:13px; color:var(--muted); min-height:16px; margin:8px 0 0; line-height:1.6; }
.note{
  background:var(--sun-t); color:var(--warn); border:2px dashed rgba(207,148,16,.45);
  border-radius:14px; padding:12px 14px; font-size:13px; line-height:1.7; margin-bottom:16px;
}

/* 슬라이더(말하기 속도·반복 횟수): 통통한 주황 손잡이 */
input[type=range]{
  -webkit-appearance:none; appearance:none; height:34px; padding:0; margin:0;
  background:transparent; border:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:10px; border-radius:999px; background:var(--line-soft); border:1.5px solid var(--line);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:28px; height:28px; border-radius:50%;
  background:var(--orange); border:3.5px solid #fff; box-shadow:0 2px 0 var(--orange-d);
  margin-top:-10px;
}
input[type=range]::-moz-range-track{
  height:10px; border-radius:999px; background:var(--line-soft); border:1.5px solid var(--line);
}
input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--orange); border:3.5px solid #fff; box-shadow:0 2px 0 var(--orange-d);
}

/* 발음설정의 API 키 칸: 한 번 설정하면 잘 안 쓰므로 접이식(기본 접힘) */
.keybox{ border:2.5px solid var(--line); border-radius:16px; background:#fff; margin-bottom:16px; }
.keybox > summary{ cursor:pointer; list-style:none; padding:12px 14px; font-family:var(--font-head); font-size:15px; font-weight:600; color:var(--orange-d); }
.keybox > summary::-webkit-details-marker{ display:none; }
.keybox > summary::before{ content:"▸"; display:inline-block; width:1em; color:var(--muted); transition:transform .15s ease; }
.keybox[open] > summary{ border-bottom:2px dashed var(--line); }
.keybox[open] > summary::before{ transform:rotate(90deg); }
.keybox .keyhint{ display:block; margin:3px 0 0 1em; font-family:var(--font-body); font-weight:400; font-size:12px; color:var(--muted); } /* 좁은 화면에서 어중간하게 꺾이지 않게 아예 둘째 줄로 */
.keybox-body{ padding:12px 14px 14px; }
.keybox-body .note{ margin-bottom:12px; }
.divider{ border:0; border-top:2px dashed var(--line); margin:18px 0; }

/* ---------- 상단 바 ---------- */
.topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:10px; }
.topbar .title{ font-family:var(--font-head); font-size:21px; font-weight:600; }
.topbar button{ font-size:15px; padding:8px 16px; min-height:42px; flex:0 0 auto; border-radius:999px; }
/* 시험·오답쓰기 상단: 시험 이름이 길어도 한 줄로 줄여 '나가기' 버튼을 밀어내지 않게 */
.topbar #quiz-group, .topbar #pq-group{
  flex:1; min-width:0; margin:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--font-head); font-size:15px; color:var(--text);
  background:rgba(255,255,255,.75); border:2px solid var(--line);
  border-radius:999px; padding:7px 14px;
}

/* ---------- 홈(아이 첫 화면): 큰 스티커 메뉴 ---------- */
.home-hero{ text-align:center; padding:22px 8px 6px; position:relative; }
.home-hero .mascot{
  font-size:58px; line-height:1; margin-bottom:6px;
  display:inline-block; animation:bob 2.6s ease-in-out infinite;
}
.home-hero h1{ display:flex; flex-direction:column; gap:2px; align-items:center; }
.home-hero .t-eyebrow{
  font-family:var(--font-body); font-size:15px; letter-spacing:.18em; color:var(--orange-d); font-weight:400;
}
.home-hero .t-title{
  font-size:46px; letter-spacing:.02em;
  background:linear-gradient(transparent 64%, var(--sun-t) 64%);  /* 형광펜 밑줄 */
  padding:0 8px; border-radius:6px;
}
.home-hero .sub{ margin-top:8px; }
/* 떠 있는 장식(해·구름) — 콘텐츠를 가리지 않게 양 끝 + 은은하게 */
.home-hero::before, .home-hero::after{
  position:absolute; font-size:30px; opacity:.85; animation:bob 3.4s ease-in-out infinite;
}
.home-hero::before{ content:"☁️"; left:4%; top:14px; animation-delay:-1.2s; }
.home-hero::after{ content:"⭐"; right:6%; top:30px; font-size:24px; animation-delay:-.5s; }

.home-menu{ display:flex; flex-direction:column; gap:14px; padding:8px 2px 0; }
.bigbtn{
  display:flex; align-items:center; gap:16px; text-align:left;
  padding:16px 20px; border-radius:24px; min-height:84px;
  color:#fff; font-size:23px; line-height:1.2;
}
.bigbtn .bi{
  flex:0 0 auto; width:54px; height:54px; border-radius:18px;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  font-size:30px; box-shadow:inset 0 -3px 0 rgba(74,53,40,.10);
}
.bigbtn .bl small{ display:block; font-family:var(--font-body); font-size:13px; font-weight:400; color:rgba(255,255,255,.92); margin-top:3px; }
.bigbtn.c-orange{ background:var(--orange); border-color:var(--orange-d); box-shadow:0 6px 0 var(--orange-d); }
.bigbtn.c-sky{    background:var(--sky);    border-color:var(--sky-d);    box-shadow:0 6px 0 var(--sky-d); }
.bigbtn.c-mint{   background:var(--mint);   border-color:var(--mint-d);   box-shadow:0 6px 0 var(--mint-d); }
.bigbtn:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(74,53,40,.2); }
.home-foot{ display:flex; gap:10px; justify-content:center; margin-top:6px; flex-wrap:wrap; }
.home-foot button{ font-size:15px; padding:9px 18px; min-height:44px; border-radius:999px; }
#key-state{ text-align:center; }
/* 홈 진입: 메뉴가 통통 튀며 차례로 나타난다 */
.home-menu > *{ animation:rise .34s ease-out backwards; }
.home-menu > *:nth-child(1){ animation-delay:.04s; }
.home-menu > *:nth-child(2){ animation-delay:.10s; }
.home-menu > *:nth-child(3){ animation-delay:.16s; }
.home-menu > *:nth-child(4){ animation-delay:.22s; }
.home-menu > *:nth-child(5){ animation-delay:.26s; }

/* ---------- 관리 메뉴(선생님 허브) ---------- */
.menu{ display:flex; flex-direction:column; gap:12px; }
.menu button{
  display:flex; align-items:center; gap:14px; text-align:left;
  font-size:18px; padding:13px 16px; line-height:1.3; border-radius:18px;
}
.menu button .mi{
  flex:0 0 auto; width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.menu button:nth-child(1) .mi{ background:var(--orange-t); }
.menu button:nth-child(2) .mi{ background:var(--sky-t); }
.menu button:nth-child(3) .mi{ background:var(--mint-t); }
.menu button:nth-child(4) .mi{ background:var(--grape-t); }
.menu button:nth-child(5) .mi{ background:var(--sun-t); }
.menu button small{ display:block; font-family:var(--font-body); font-size:13px; color:var(--muted); margin-top:3px; font-weight:400; }

/* ---------- 단어/그룹/목록 행 ---------- */
.wrow{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.wrow .wnum{ flex:0 0 auto; min-width:1.6em; text-align:right; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; } /* 단어 편집: 행 앞 순번(전체 개수 파악용) */
.wrow input{ flex:1; min-width:0; }
.wrow input.eng{ flex:1.3; }
.wrow button{ flex:0 0 auto; padding:10px 12px; }
.listrow{ display:flex; gap:8px; align-items:center; padding:13px 6px; border-bottom:2px dashed var(--line-soft); }
.listrow .main{ flex:1; min-width:0; cursor:pointer; }
.listrow .main b{ font-family:var(--font-head); font-size:17px; font-weight:600; }
.listrow .main .meta{ font-size:13px; color:var(--muted); margin-top:2px; }
/* 숨김 처리한 행: 내용만 흐리게(버튼은 그대로 눌러 되돌릴 수 있게), '숨김' 배지로 명시 */
.listrow.ishidden .main{ opacity:.45; }
.listrow .hidebtn{ flex:0 0 auto; font-size:13px; padding:8px 10px; min-height:40px; white-space:nowrap; }
.listrow .del{ flex:0 0 auto; min-height:40px; padding:8px 12px; }
/* 오답관리 행(.mrow)은 컨트롤이 많아(오답수·검토·숨기기·삭제) 좁은 화면에서 한 줄에 안 들어간다.
   행을 넘김(wrap) 허용 + 본문 최소폭을 줘 글자가 한 자씩 깨지지 않게 하고, 액션 묶음(.rowact)을 아래로 흘린다. */
.listrow.mrow{ flex-wrap:wrap; }
.listrow.mrow .main{ min-width:55%; }
.listrow.mrow .rowact{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-left:auto; }
.empty{
  text-align:center; color:var(--muted); padding:26px 12px; font-size:14px; line-height:1.7;
  border:2.5px dashed var(--line); border-radius:18px; background:rgba(255,255,255,.5);
}
/* 지난 점수·시험 목록: 날짜별 그룹 머리글(달력 리본) */
.datehead{
  font-family:var(--font-head); font-size:14px; font-weight:600; color:var(--orange-d);
  background:var(--orange-t); border-radius:999px; padding:6px 14px;
  width:fit-content; margin-top:18px; margin-bottom:2px;
}
.datehead::before{ content:"📅 "; }
.datehead:first-child{ margin-top:0; }

/* ---------- 문제 번호 버블 ---------- */
.qnum{
  font-family:var(--font-head); font-size:30px; font-weight:600; text-align:center; color:var(--text);
  background:#fff; border:2.5px solid var(--line); border-radius:20px;
  box-shadow:0 5px 0 rgba(74,53,40,.07);
  padding:12px 10px; margin:0 0 14px; letter-spacing:.5px;
}
.qnum b{ font-size:38px; color:var(--orange); }

/* 오답 쓰기: 카운터 좌우 '단어 넘김' 화살표. 하단 회차 버튼과 구분되게 크고 진하게.
   .qnum은 시험 화면과 공유하므로 .pq-wordnav 안에서만 스코프해 덮는다(시험 카운터 불변). */
.pq-wordnav{ align-items:stretch; margin-bottom:14px; }
.pq-wordnav .qnum{ flex:1; margin:0; }
.wordnav{ flex:0 0 auto; font-size:30px; font-weight:600; line-height:1;
  color:var(--sky-d); background:var(--sky-t); border-color:rgba(31,111,159,.25); padding:0 20px; }
.wordnav:disabled{ opacity:.3; }

/* ---------- 발음 듣기 카드(해님) ---------- */
.speakcard{ margin-bottom:14px; background:var(--sun-t); border-color:rgba(207,148,16,.4); }
.speakcard button.primary{ animation:glow 2.8s ease-in-out infinite; }

/* ---------- 정답보기(시험 포기 — 보조 동작이라 눈에 덜 띄게) ---------- */
#reveal-wrap{ margin-top:10px; }
#btn-reveal{ font-size:14px; color:var(--muted); min-height:42px; }
.reveal-ans{ margin:8px 0 12px; }
.reveal-ans .rl-row{ display:flex; align-items:baseline; justify-content:center; gap:10px; margin:8px 0; }
.reveal-ans .rl{ flex:0 0 auto; min-width:52px; text-align:right; font-size:13px; color:var(--muted); }
.reveal-ans b{ font-family:var(--font-head); font-size:30px; font-weight:600; letter-spacing:.5px; word-break:break-word; }

/* 오답 쓰기 — 첫 회차 '보고 쓰기' 정답 안내(포기 reveal과 구분되는 '안내' 박스) */
.copybox{
  background:var(--sun-t); border:2.5px dashed rgba(207,148,16,.5);
  border-radius:20px; padding:14px 16px; margin-bottom:14px;
}
.copylabel{ margin:0 0 4px; font-family:var(--font-head); font-size:15px; font-weight:600; color:var(--warn); text-align:center; }
.copylabel .copysub{ font-family:var(--font-body); font-weight:400; font-size:12px; color:var(--muted); }
.copybox .reveal-ans{ margin:0; }
/* 오답 쓰기 — 새 단어 시작 알림(첫 회차): 같은 단어 반복 중 경계를 굵게 환기 */
.pill.newword{
  font-family:var(--font-head); color:var(--grape-d); font-weight:600; font-size:16px;
  background:var(--grape-t); border:2px solid rgba(108,72,173,.25);
  border-radius:999px; padding:7px 14px; width:fit-content; margin-left:auto; margin-right:auto;
  animation:popin .3s ease-out;
}

/* ---------- 손글씨 영역: 영어 연습장 ---------- */
.padwrap{ margin-bottom:14px; }
.padlabel{ display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.padlabel span{
  font-family:var(--font-head); font-size:14px; font-weight:600; color:#fff;
  border-radius:999px; padding:4px 14px;
}
/* 영역별 색 구분(아이가 칸을 색으로 기억): 소문자=하늘, 대문자=포도, 뜻=민트 */
#pad-lower .padlabel span,   #pq-pad-lower .padlabel span{   background:var(--sky-d); }
#pad-upper .padlabel span,   #pq-pad-upper .padlabel span{   background:var(--grape-d); }
#pad-meaning .padlabel span, #pq-pad-meaning .padlabel span{ background:var(--mint-d); }
.padlabel .clr{ font-size:13px; padding:6px 12px; min-height:38px; border-radius:999px; box-shadow:0 3px 0 rgba(74,53,40,.10); }
canvas.pad{
  width:100%; height:144px; background:#fff; border:2.5px solid var(--line);
  border-radius:18px; touch-action:none; display:block;
  box-shadow:0 4px 0 rgba(74,53,40,.06);
}
/* 영어 칸(소문자·대문자)에 4선 연습장 줄을 깔아 준다(셋째 줄이 기준선).
   ① 쓰기 캔버스(#cv-*): CSS 배경이라 화면에만 보이고, 저장되는 손글씨 PNG(투명)에는 섞이지 않는다.
   ② 채점·지난점수·검토 화면의 영어 손글씨 이미지(.draw.eng img): 같은 줄을 투명 PNG 뒤로 비춰
      아이가 줄에 맞게 썼는지 한눈에 본다. 줄 위치가 비율(%)이라 144px 캔버스↔축소 이미지에서 자동 정렬된다.
   두 쓰임이 같은 줄(위치·색)을 쓰도록 셀렉터를 합쳐 한 곳에서 관리한다(각 셀렉터가 제 문맥에서 우선순위 승리). */
#cv-lower, #cv-upper, #cv-p-lower, #cv-p-upper,
.field .draw.eng img{
  background-image:
    linear-gradient(rgba(46,150,214,.30), rgba(46,150,214,.30)),
    linear-gradient(rgba(46,150,214,.30), rgba(46,150,214,.30)),
    linear-gradient(rgba(233,79,63,.38), rgba(233,79,63,.38)),
    linear-gradient(rgba(46,150,214,.30), rgba(46,150,214,.30));
  background-size:100% 2px;
  background-repeat:no-repeat;
  background-position:0 14%, 0 38%, 0 62%, 0 86%;
}

/* 시험보기·오답쓰기: 화면이 길어 스크롤될 때만 나타나는 '맨 위로'(발음 듣기로 복귀) 버튼.
   하단 여백이 이전/다음·정답보기 버튼을 항상 버튼 위로 밀어 겹치지 않게 한다. */
#quiz, #practiceQuiz{ padding-bottom:84px; }
.fab-top{
  position:fixed; right:16px; bottom:16px; z-index:50;
  width:54px; height:54px; min-height:0; padding:0;
  border-radius:50%; font-size:24px; line-height:1;
  background:var(--orange); color:#fff; border-color:var(--orange-d);
  box-shadow:0 4px 0 var(--orange-d), 0 6px 14px rgba(74,53,40,.25); opacity:.94;
}

/* ---------- 채점 ---------- */
.scorecard{
  background:
    radial-gradient(circle at 8% 20%, rgba(255,197,51,.3) 0 8px, transparent 9px),
    radial-gradient(circle at 94% 26%, rgba(46,150,214,.22) 0 7px, transparent 8px),
    radial-gradient(circle at 14% 86%, rgba(143,103,216,.2) 0 6px, transparent 7px),
    radial-gradient(circle at 88% 84%, rgba(30,165,99,.2) 0 7px, transparent 8px),
    var(--card);
}
.scorecard .qnum{ margin-bottom:6px; border:0; box-shadow:none; background:transparent; padding-bottom:0; }
.gradecard{
  background:var(--card); border:2.5px solid var(--line); border-radius:20px;
  padding:14px 16px; margin-bottom:12px; box-shadow:0 5px 0 rgba(74,53,40,.06);
}
.gradecard h3{ margin:0 0 8px; font-size:17px; }
.gradecard h3::before{ content:"✏️ "; font-size:14px; }
.field{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 0; border-top:2px dashed var(--line-soft); }
.field:first-of-type{ border-top:0; }
.field .flabel{ font-family:var(--font-head); font-size:13px; font-weight:600; color:var(--muted); width:48px; }
.field .ans{ font-family:var(--font-head); font-size:18px; font-weight:600; }
.field .ans.up{ letter-spacing:1px; }
.field .draw img{ height:64px; max-width:100%; border:2px solid var(--line); border-radius:12px; background:#fff; vertical-align:middle; }
.field .blank{ font-size:13px; color:var(--muted); }
.markrow{ display:flex; gap:12px; justify-content:center; margin-top:12px; }
.markbtn{ font-size:22px; font-weight:700; padding:10px 24px; min-width:76px; border-radius:18px; }
.markbtn.o{ color:var(--mint-d); border-color:var(--mint); box-shadow:0 4px 0 rgba(21,122,73,.25); }
.markbtn.x{ color:var(--red); border-color:var(--red); box-shadow:0 4px 0 rgba(185,53,39,.25); }
.markbtn.o.on{ background:var(--mint); color:#fff; border-color:var(--mint-d); box-shadow:0 4px 0 var(--mint-d); }
.markbtn.x.on{ background:var(--red); color:#fff; border-color:var(--red-d); box-shadow:0 4px 0 var(--red-d); }

/* ---------- 배지 ---------- */
.badge{
  font-family:var(--font-head); font-size:12px; font-weight:600;
  padding:3px 10px; border-radius:999px; background:var(--mint-t); color:var(--mint-d);
}
.badge.review{ background:var(--grape-t); color:var(--grape-d); }
/* 지난 점수: 만점 응시 표시(제목과 휴지통 사이). 초록 동그라미 ✓로 '만점'을 한눈에. */
.listrow .perfect{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:var(--mint); color:#fff; font-size:15px; font-weight:800;
  display:flex; align-items:center; justify-content:center; line-height:1;
  box-shadow:0 2px 0 var(--mint-d);
}
/* 만점 행: 배경을 옅은 민트로 살짝 강조 + 왼쪽 띠로 한눈에. */
.listrow.perfect-row{ background:var(--mint-t); box-shadow:inset 4px 0 0 var(--mint); border-radius:12px; border-bottom-color:transparent; }
.badge.ungraded{ background:var(--sun-t); color:var(--warn); }
/* 약한 단어 목록의 '정답보기 N회' 배지(많이 본 단어 강조). listrow 안에서 줄어들지 않게 고정. */
.badge.count{ background:var(--orange-t); color:var(--orange-d); flex:0 0 auto; white-space:nowrap; }
/* 숨김 표시 배지(중립 회색). 클래스명은 유틸리티 .hidden(display:none)과 겹치지 않게 .hide 사용. */
.badge.hide{ background:#efe8da; color:var(--muted); flex:0 0 auto; white-space:nowrap; }
/* 오답 쓰기 '완료' 배지(민트). 선생님·아이가 목록에서 완료된 시험을 한눈에 보게. */
.badge.done{ background:var(--mint); color:#fff; flex:0 0 auto; white-space:nowrap; }
/* 오답 쓰기 목록의 '검토' 버튼(완료된 시험만 노출). 숨기기 버튼과 같은 크기감. */
.listrow .reviewbtn{ flex:0 0 auto; font-size:13px; padding:8px 10px; min-height:40px; white-space:nowrap; }

/* 단어 편집: 기본은 읽기전용(흐린 배경), '수정' 누르면 편집 상태(강조 테두리) */
.wrow input[readonly]{ background:var(--line-soft); color:var(--muted); border-color:transparent; }
.wrow input.editing{ background:#fff; color:var(--text); border-color:var(--orange); }
.wrow .wedit{ padding:10px 12px; min-width:56px; }

/* 말하기 속도·반복 횟수 −/＋ 스텝 버튼 */
.step{ font-size:20px; font-weight:700; padding:8px 0; min-width:46px; flex:0 0 auto; line-height:1; border-radius:14px; }

/* 오답 쓰기 검토: 단어별 그룹 머리글(정답을 한 번만 보여주고 아래에 회차별 손글씨) */
.wordhead{
  background:var(--sky-t); border:2.5px solid rgba(31,111,159,.22); border-radius:18px;
  padding:12px 16px; margin:18px 0 10px;
}
.wordhead:first-child{ margin-top:0; }
.wordhead b{ font-family:var(--font-head); font-size:22px; font-weight:600; color:var(--sky-d); letter-spacing:.5px; word-break:break-word; }
.wordhead .wh-ans{ display:block; font-size:13px; color:var(--muted); margin-top:3px; }

/* ---------- 등장 효과 ---------- */
/* 화면 전환: .hidden 해제(display 복귀) 때마다 애니메이션이 다시 돌아 살짝 떠오른다 */
.screen{ animation:screenIn .26s ease-out; }
@keyframes screenIn{ from{ opacity:0; transform:translateY(10px); } }
@keyframes rise{ from{ opacity:0; transform:translateY(14px) scale(.97); } }
@keyframes popin{ from{ opacity:0; transform:scale(.7); } 70%{ transform:scale(1.06); } }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes glow{
  0%,100%{ box-shadow:0 4px 0 var(--orange-d), 0 0 0 0 rgba(249,115,22,.34); }
  55%{ box-shadow:0 4px 0 var(--orange-d), 0 0 0 12px rgba(249,115,22,0); }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

/* ---------- 경고·확인 다이얼로그 (window.alert/confirm 대체) ----------
   투박한 시스템 경고창 대신, 종이 위에 스티커 카드가 '톡' 붙듯 떠오르는 모달.
   따뜻한 초콜릿 틴트 오버레이 + 통통 팝인 카드 + 캔디 버튼(.primary/.danger 재사용).
   시그니처: 위쪽 아이콘 '도장'이 살짝 늦게 콩 찍히고, 제목엔 홈 히어로와 같은 형광펜 밑줄.
   톤(info/question/notice/danger/error)으로 아이콘 통 색·형광펜 색만 바꾼다.
   ★reduced-motion 은 이 파일 상단 전역 규칙이 모든 애니메이션을 자동으로 끈다. */
.dlg-overlay{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center; padding:22px;
  background:rgba(74,53,40,.45);          /* 초콜릿 잉크 틴트(차가운 검정 대신 따뜻하게) */
  animation:dlgFade .16s ease-out;
}
.dlg{
  position:relative; width:100%; max-width:340px;
  background:var(--card); border:2.5px solid var(--line); border-radius:26px;
  padding:24px 22px 20px; text-align:center;
  box-shadow:0 8px 0 rgba(74,53,40,.10), 0 20px 42px rgba(74,53,40,.28);  /* 하드 섀도우 + 떠 있는 그림자 */
  animation:dlgPop .36s cubic-bezier(.18,.92,.30,1.25);
}
.dlg-icon{                                 /* 시그니처: 통통한 캔디 '도장' — 살짝 늦게 콩 찍힌다 */
  width:66px; height:66px; margin:2px auto 14px; border-radius:22px;
  display:flex; align-items:center; justify-content:center; font-size:34px; line-height:1;
  background:var(--sky-t); box-shadow:inset 0 -3px 0 rgba(74,53,40,.10);
  animation:dlgStamp .42s cubic-bezier(.2,.8,.3,1.55) .1s backwards;
}
.dlg-title{ font-family:var(--font-head); font-size:20px; font-weight:600; line-height:1.35; color:var(--text); margin:0; }
.dlg-title .hl{                            /* 홈 히어로와 같은 형광펜 밑줄 */
  background:linear-gradient(transparent 60%, var(--sun-t) 60%);
  padding:0 5px; border-radius:5px; -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.dlg-msg{ font-family:var(--font-body); font-size:14px; color:var(--muted); line-height:1.7; margin:9px 4px 0; white-space:pre-line; }
.dlg-actions{ display:flex; gap:10px; margin-top:20px; }
.dlg-actions button{ flex:1; min-height:52px; }
.dlg-actions.one{ justify-content:center; }      /* 알림(버튼 1개)은 가운데로 모으되 너무 넓지 않게 */
.dlg-actions.one button{ flex:0 1 200px; }
/* 삭제 확인의 '삭제' 버튼은 꽉 찬 빨강으로(파괴 동작이 한눈에 — .markbtn.x.on 과 같은 결). 취소는 흰 버튼 그대로. */
.dlg-actions .confirm.danger{ background:var(--red); color:#fff; border-color:var(--red-d); box-shadow:0 4px 0 var(--red-d); }
.dlg-actions .confirm.danger:active{ background:var(--red); box-shadow:0 1px 0 var(--red-d); }
/* 톤별 색 — 아이콘 통 배경 + 제목 형광펜 */
.dlg.t-info     .dlg-icon{ background:var(--sky-t); }
.dlg.t-question .dlg-icon{ background:var(--orange-t); }
.dlg.t-notice   .dlg-icon{ background:var(--grape-t); }
.dlg.t-danger   .dlg-icon{ background:var(--red-t); }
.dlg.t-error    .dlg-icon{ background:var(--red-t); }
.dlg.t-info     .dlg-title .hl{ background:linear-gradient(transparent 60%, var(--sky-t) 60%); }
.dlg.t-question .dlg-title .hl{ background:linear-gradient(transparent 60%, var(--orange-t) 60%); }
.dlg.t-notice   .dlg-title .hl{ background:linear-gradient(transparent 60%, var(--grape-t) 60%); }
.dlg.t-danger   .dlg-title .hl{ background:linear-gradient(transparent 60%, var(--red-t) 60%); }
.dlg.t-error    .dlg-title .hl{ background:linear-gradient(transparent 60%, var(--red-t) 60%); }

@keyframes dlgFade{ from{ opacity:0; } }
@keyframes dlgPop{ from{ opacity:0; transform:translateY(14px) scale(.84); } 72%{ transform:translateY(0) scale(1.03); } }
@keyframes dlgStamp{ from{ opacity:0; transform:scale(.2) rotate(-14deg); } 70%{ transform:scale(1.12) rotate(4deg); } to{ transform:scale(1) rotate(0); } }

/* ---------- 좁은 화면 보정 ---------- */
@media (max-width:420px){
  body{ padding:12px; }
  .home-hero .t-title{ font-size:38px; }
  .bigbtn{ font-size:20px; min-height:76px; gap:13px; }
  .bigbtn .bi{ width:48px; height:48px; font-size:26px; }
  .card{ padding:16px; }
}