/* 영어 단어 연습 — 공용 스타일
   모티프: 한국 초등 영어 4선 공책(하늘색 괘선) + 빨간 채점 도장 + 형광펜
   글자 크기 하한 = 15px(보조) / 본문 18px. 초6 학습자·모바일 우선. */

:root{
  --paper:#fbfaf7;
  --card:#ffffff;
  --ink:#1b2a4a;
  --ink-soft:#5a6a85;
  --rule:#8fbce6;          /* 4선 공책 기준선 */
  --rule-soft:#cfe2f4;     /* 보조선 */
  --line:#e4e0d6;          /* 카드 경계 */
  --hl:#ffe45e;            /* 형광펜 */
  --hl-soft:#fff6c9;
  --ok:#0d7f62;
  --ok-soft:#dcf2ea;
  --no:#d43f39;
  --no-soft:#fbe3e1;
  --stage1:#2f6fb2;
  --stage2:#0d7f62;
  --stage3:#b26a12;
  --stage4:#7a4fb0;
  --shadow:0 1px 0 rgba(27,42,74,.06),0 6px 18px rgba(27,42,74,.07);
  --radius:14px;
  --font-en:"Century Gothic","Futura","Questrial","Avenir Next","Segoe UI",system-ui,sans-serif;
  --font-ko:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  --font-ipa:"Segoe UI","Helvetica Neue","Apple SD Gothic Neo",system-ui,sans-serif;
  --font-num:ui-monospace,"Consolas","SF Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#141a24;
    --card:#1c2432;
    --ink:#e9edf4;
    --ink-soft:#a3b3c9;
    --rule:#4a7099;
    --rule-soft:#2b3a4d;
    --line:#2e3846;
    --hl:#d9b93a;
    --hl-soft:#3a3520;
    --ok:#4fc39c;
    --ok-soft:#1e3830;
    --no:#f0736c;
    --no-soft:#3b2321;
    --stage1:#71a9e0;
    --stage2:#4fc39c;
    --stage3:#e0a558;
    --stage4:#b98fe0;
    --shadow:0 1px 0 rgba(0,0,0,.2),0 6px 18px rgba(0,0,0,.25);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
/* .btn 등이 display를 지정해 [hidden]을 이기는 경우 방지 */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ko);
  font-size:18px;
  line-height:1.6;
  min-height:100vh;
  /* 한글은 낱말 단위로 줄바꿈(단어 중간에서 끊기는 것 방지) */
  word-break:keep-all;
  overflow-wrap:break-word;
}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--stage1);
  outline-offset:2px;
}
a{color:var(--stage1)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:900px;margin:0 auto;padding:0 16px 64px}

/* ── 헤더 ─────────────────────────────────────────────── */
.top{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 0 14px;
  border-bottom:2px solid var(--ink);
}
.top .home-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:16px;
  color:var(--ink-soft);
  text-decoration:none;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:999px;
  padding:8px 14px;
  min-height:44px;
}
.top .home-link:hover{border-color:var(--stage1);color:var(--stage1)}
.top h1{
  font-size:clamp(21px,4.4vw,27px);
  line-height:1.25;
  letter-spacing:-.01em;
  flex:1;
  min-width:0;
}
.top .top-sub{font-size:15px;color:var(--ink-soft);font-weight:400;display:block}

/* ── 4선 공책 스테이지(시그니처) ───────────────────────── */
.staff{
  position:relative;
  height:132px;
  margin:6px 0 2px;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--rule-soft),var(--rule-soft)),
    repeating-linear-gradient(90deg,var(--rule) 0 7px,transparent 7px 15px),
    linear-gradient(var(--rule),var(--rule)),
    linear-gradient(var(--rule-soft),var(--rule-soft));
  background-size:100% 1px,100% 1px,100% 2px,100% 1px;
  background-position:0 10%,0 40%,0 76%,0 97%;
}
.staff .staff-word{
  position:absolute;
  left:0;
  right:0;
  bottom:19%;
  text-align:center;
  font-family:var(--font-en);
  font-size:clamp(38px,10.5vw,66px);
  font-weight:600;
  line-height:1;
  letter-spacing:.005em;
  overflow-wrap:anywhere;
}
.staff.staff-sm{height:96px}
.staff.staff-sm .staff-word{font-size:clamp(30px,8vw,46px)}

/* ── 카드 ─────────────────────────────────────────────── */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}

/* ── 버튼 ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:52px;
  padding:12px 22px;
  border-radius:12px;
  border:1.5px solid var(--line);
  background:var(--card);
  color:var(--ink);
  font-size:18px;
  font-weight:600;
}
.btn:hover{border-color:var(--stage1);color:var(--stage1)}
.btn:active{transform:translateY(1px)}
.btn-main{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}
.btn-main:hover{background:var(--stage1);border-color:var(--stage1);color:#fff}
.btn-lg{min-height:60px;font-size:20px;padding:14px 28px}
.btn-sm{min-height:44px;font-size:16px;padding:8px 16px;border-radius:10px}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn:disabled:hover{border-color:var(--line);color:var(--ink)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.btn-row .btn{flex:1 1 auto}

/* 발음 듣기 */
.snd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:44px;
  padding:8px 15px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--card);
  color:var(--ink-soft);
  font-size:16px;
}
.snd:hover{border-color:var(--stage1);color:var(--stage1)}
.snd svg{width:19px;height:19px;display:block}
.snd.speaking{border-color:var(--no);color:var(--no)}
@keyframes sndPulse{0%,100%{transform:none}50%{transform:scale(1.1)}}
@media (prefers-reduced-motion:no-preference){.snd.speaking{animation:sndPulse .8s ease-in-out infinite}}

/* ── 칩(선택 옵션) ────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  min-height:44px;
  padding:8px 16px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--card);
  color:var(--ink-soft);
  font-size:16.5px;
}
.chip[aria-pressed="true"],.chip.on{
  border-color:var(--stage2);
  color:var(--stage2);
  background:var(--ok-soft);
  font-weight:700;
}
.chip:hover{border-color:var(--stage1)}

/* ── 진도 바 ──────────────────────────────────────────── */
.bar{
  height:10px;
  border-radius:999px;
  background:var(--rule-soft);
  overflow:hidden;
}
.bar > i{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--stage2);
  transition:width .3s ease;
}

/* ── 발음기호·뜻·예문 ─────────────────────────────────── */
.ipa{
  font-family:var(--font-ipa);
  font-size:21px;
  color:var(--ink-soft);
  letter-spacing:.01em;
}
.pos{
  display:inline-block;
  font-size:15px;
  font-weight:700;
  color:var(--stage1);
  border:1px solid currentColor;
  border-radius:6px;
  padding:1px 8px;
  vertical-align:2px;
}
.mean{font-size:25px;font-weight:700;line-height:1.4}
.ex{
  font-family:var(--font-en);
  font-size:20px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.ex b{background:var(--hl-soft);box-shadow:0 -2px 0 var(--hl) inset;padding:0 2px;font-weight:700}
.ex-ko{font-size:17px;color:var(--ink-soft);line-height:1.5}
.tip{
  font-size:16px;
  color:var(--ink-soft);
  background:var(--hl-soft);
  border-left:4px solid var(--hl);
  border-radius:0 8px 8px 0;
  padding:9px 12px;
}
.blank{
  font-family:var(--font-en);
  border-bottom:2.5px solid var(--stage1);
  padding:0 20px;
  color:transparent;
}

/* ── 채점 도장(시그니처) ──────────────────────────────── */
.stamp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  font-size:32px;
  font-weight:700;
  border:3.5px solid currentColor;
  flex:0 0 auto;
}
.stamp.ok{color:var(--ok)}
.stamp.no{color:var(--no);border-style:dashed}
@keyframes stampIn{
  0%{transform:scale(.5) rotate(-14deg);opacity:0}
  60%{transform:scale(1.08) rotate(3deg);opacity:1}
  100%{transform:scale(1) rotate(-4deg);opacity:1}
}
@media (prefers-reduced-motion:no-preference){
  .stamp{animation:stampIn .32s ease-out both}
}

/* ── 입력(쓰기) ───────────────────────────────────────── */
.write-field{
  width:100%;
  font-family:var(--font-en);
  font-size:clamp(30px,8vw,44px);
  font-weight:600;
  text-align:center;
  letter-spacing:.02em;
  background:transparent;
  border:none;
  color:var(--ink);
  padding:0;
}
.write-field::placeholder{color:var(--rule);font-weight:400;font-size:.5em;letter-spacing:0}
/* 입력칸은 사각 외곽선 대신 공책 칸 전체를 강조 — 4선 괘선과 겹치지 않게 */
.write-field:focus-visible{outline:none}
.write-staff:focus-within{background-color:color-mix(in srgb,var(--stage1) 7%,transparent)}
.write-staff{
  position:relative;
  /* 입력 글자의 아래끝이 기준선(80%)에 놓이도록 위쪽 여백을 크게 준다 */
  padding:34px 12px 14px;
  border-radius:10px;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--rule-soft),var(--rule-soft)),
    repeating-linear-gradient(90deg,var(--rule) 0 7px,transparent 7px 15px),
    linear-gradient(var(--rule),var(--rule)),
    linear-gradient(var(--rule-soft),var(--rule-soft));
  background-size:100% 1px,100% 1px,100% 2px,100% 1px;
  background-position:0 12%,0 42%,0 80%,0 99%;
}
.letters{
  display:flex;
  justify-content:flex-start;
  flex-wrap:wrap;
  margin-top:6px;
  gap:3px;
  font-family:var(--font-en);
  font-size:30px;
  font-weight:700;
}
.letters span{
  min-width:22px;
  text-align:center;
  border-radius:5px;
  padding:0 3px;
}
.letters .lt-ok{color:var(--ok);background:var(--ok-soft)}
.letters .lt-no{color:var(--no);background:var(--no-soft);text-decoration:underline wavy}

/* ── 보기(4지선다) ────────────────────────────────────── */
.opts{display:grid;gap:10px;margin-top:4px}
.opt{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  min-height:60px;
  padding:12px 16px;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:var(--card);
  font-size:19px;
  line-height:1.4;
}
.opt:hover:not(:disabled){border-color:var(--stage1)}
.opt .opt-no{
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--rule-soft);
  color:var(--ink-soft);
  font-family:var(--font-num);
  font-size:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.opt .opt-txt{flex:1;min-width:0;overflow-wrap:anywhere}
.opt.en .opt-txt{font-family:var(--font-en);font-weight:600;font-size:23px}
.opt.pick-ok{border-color:var(--ok);background:var(--ok-soft);font-weight:700}
.opt.pick-no{border-color:var(--no);background:var(--no-soft)}
.opt.reveal{border-color:var(--ok);border-style:dashed}
.opt:disabled{cursor:default}

/* ── 단어장(목록) ─────────────────────────────────────── */
.wl-row{
  display:grid;
  grid-template-columns:34px minmax(120px,1.1fr) minmax(90px,1fr);
  gap:8px 12px;
  align-items:baseline;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.wl-row:last-child{border-bottom:none}
.wl-no{
  font-family:var(--font-num);
  font-size:15px;
  color:var(--ink-soft);
}
.wl-en{min-width:0}
.wl-word{
  font-family:var(--font-en);
  font-size:24px;
  font-weight:600;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.wl-ipa{font-family:var(--font-ipa);font-size:16px;color:var(--ink-soft)}
.wl-ko{font-size:18px;font-weight:600;line-height:1.35}
.wl-pos{font-size:15px;color:var(--ink-soft);margin-right:4px}
.wl-ex{grid-column:2/-1;margin-top:2px}
.wl-ex .ex{font-size:17.5px}
.wl-ex .ex-ko{font-size:16px}
.wl-mark{
  grid-column:1;
  align-self:start;
  font-size:15px;
}
/* 가림판 — 눌러서 하나씩 확인 */
.hide{
  background:var(--rule-soft);
  color:transparent!important;
  border-radius:6px;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--rule);
}
.hide *{color:transparent!important;background:transparent!important;box-shadow:none!important}
.hide.show{background:transparent;color:inherit!important;box-shadow:none}
.hide.show *{color:inherit!important}
@media (max-width:560px){
  .wl-row{grid-template-columns:28px minmax(0,1fr)}
  .wl-ko{grid-column:2}
  .wl-ex{grid-column:2}
}

/* ── 상태 줄 ──────────────────────────────────────────── */
.meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:16px;
  color:var(--ink-soft);
  flex-wrap:wrap;
}
.meta .count{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.sec-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  margin:26px 0 10px;
}
.sec-title::after{content:"";flex:1;height:1px;background:var(--line)}
.notice{
  font-size:16px;
  color:var(--ink-soft);
  background:var(--card);
  border:1px dashed var(--line);
  border-radius:12px;
  padding:12px 14px;
}
.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translate(-50%,10px);
  background:var(--ink);
  color:var(--paper);
  font-size:16px;
  padding:10px 18px;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s,transform .18s;
  z-index:90;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.sr{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* ── 인쇄(단어장을 종이로 뽑을 때) ────────────────────── */
@media print{
  body{background:#fff;color:#000;font-size:12pt}
  .top,.btn,.btn-row,.chips,.snd,.toast,#range-sel,label[for="range-sel"]{display:none!important}
  .card{border:none;box-shadow:none;padding:0}
  .wrap{max-width:none;padding:0}
  .wl-row{page-break-inside:avoid;border-bottom:1px solid #bbb}
  .hide{background:#fff;color:#000!important;box-shadow:none}
  .hide *{color:#000!important}
  .ex b{background:none;box-shadow:none;font-weight:700;text-decoration:underline}
}

@media (max-width:560px){
  body{font-size:17px}
  .wrap{padding:0 12px 56px}
  .card{padding:15px}
  .btn-row .btn{flex:1 1 100%}
  .mean{font-size:23px}
  .ex{font-size:19px}
}