/* ─────────────────────────────────────────────
   공통 디자인 — 초등 저학년 기준
   원칙: 글자 크게, 버튼 크게, 한 번에 한 가지만
   ───────────────────────────────────────────── */

:root{
  --bg:#FFF7E8; --card:#FFFFFF; --ink:#2E2A24; --muted:#7C7266;
  --accent:#E8743C; --accent-soft:#FFE6D8;
  --green:#3F9E6B; --green-soft:#E2F5EA;
  --blue:#3B7EA1; --blue-soft:#DFF0F7;
  --red:#C0442A;  --red-soft:#FDE8E4;
  --line:#EDE3D2;
  --shadow:0 2px 10px rgba(70,55,35,.08);

  /* 손가락 터치 최소 크기 */
  --tap:56px;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}

body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  font-size:20px; line-height:1.65;
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.wrap{max-width:760px;margin:0 auto;padding:18px 18px 90px}

/* ── 헤더 ── */
header{display:flex;align-items:center;gap:10px;margin:6px 0 18px}
header h1{font-size:25px;margin:0;flex:1;letter-spacing:-.5px}

.iconbtn{
  width:var(--tap);height:var(--tap);flex:none;
  border:none;border-radius:16px;background:var(--card);
  box-shadow:var(--shadow);font-size:24px;cursor:pointer;
}
.iconbtn:active{transform:scale(.94)}

/* ── 입력 ── */
.searchbar{display:flex;gap:10px}

.input-lg{
  flex:1;min-width:0;font-size:26px;font-family:inherit;
  padding:16px 18px;border:3px solid var(--line);border-radius:18px;
  background:var(--card);color:var(--ink);outline:none;
}
.input-lg:focus{border-color:var(--accent)}

/* ── 버튼 ── */
.btn{
  min-height:var(--tap);padding:0 26px;
  font-size:22px;font-weight:700;font-family:inherit;
  border:none;border-radius:18px;cursor:pointer;
}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.5;transform:none}

.btn-primary{background:var(--accent);color:#fff}
.btn-green  {background:var(--green);color:#fff}
.btn-ghost  {background:var(--card);color:var(--muted);box-shadow:var(--shadow)}

.btn-block{width:100%;padding:18px}
.btnrow{display:flex;gap:10px;margin-top:24px}
.btnrow .btn{flex:1}

/* 마이크 버튼 */
.btn-mic{
  width:var(--tap);height:var(--tap);flex:none;padding:0;
  border:none;border-radius:18px;background:var(--blue-soft);
  color:var(--blue);font-size:26px;cursor:pointer;
}
.btn-mic.on{background:var(--red-soft);color:var(--red);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}

/* 듣기 버튼 */
.speak{
  min-height:48px;border:none;border-radius:999px;
  background:var(--blue-soft);color:var(--blue);
  font-size:20px;font-family:inherit;font-weight:700;
  padding:10px 20px;cursor:pointer;
}
.speak:active{transform:scale(.95)}

/* ── 카드 ── */
.card{
  background:var(--card);border-radius:22px;padding:22px;margin-top:16px;
  box-shadow:var(--shadow);
}

.word-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.word{font-size:36px;font-weight:800;letter-spacing:-.5px;word-break:break-word}
.pron{color:var(--muted);font-size:20px;margin-top:2px}
.emoji{font-size:60px;line-height:1}

.word-img{
  width:100%;max-height:260px;object-fit:contain;
  border-radius:16px;background:#F6F1E6;margin-top:16px;
}

.label{
  display:inline-block;font-size:16px;font-weight:700;letter-spacing:.5px;
  color:var(--accent);background:var(--accent-soft);
  padding:5px 14px;border-radius:999px;margin:22px 0 10px;
}

.meaning{font-size:28px;font-weight:700;line-height:1.5}

.ex{
  background:var(--green-soft);border-radius:16px;padding:16px;
  display:flex;gap:12px;align-items:flex-start;
}
.ex-text{flex:1;min-width:0}
.ex-text b{display:block;font-size:23px;font-weight:600;line-height:1.5;word-break:break-word}
.ex-text i{display:block;font-style:normal;color:var(--muted);font-size:18px;margin-top:4px}
.ex .speak{background:#fff;color:var(--green);padding:10px 16px;flex:none}

/* ── 알림 / 상태 ── */
.note{color:var(--muted);font-size:17px;margin:10px 2px}

.error{
  background:var(--red-soft);border:2px solid #F3B6A8;color:#9B3A22;
  padding:16px;border-radius:16px;margin-top:14px;font-size:18px;
}

.loading{text-align:center;padding:48px 0;color:var(--muted);font-size:20px}
.dots span{display:inline-block;animation:bounce 1.2s infinite;font-size:32px;color:var(--accent)}
.dots span:nth-child(2){animation-delay:.2s}
.dots span:nth-child(3){animation-delay:.4s}
@keyframes bounce{
  0%,60%,100%{opacity:.25;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-8px)}
}

/* ── 시트(아래에서 올라오는 창) ── */
.sheet{
  position:fixed;inset:0;background:rgba(46,42,36,.45);
  display:flex;align-items:flex-end;justify-content:center;z-index:50;
}
.sheet[hidden]{display:none}
.sheet-inner{
  background:var(--bg);width:100%;max-width:760px;max-height:92vh;overflow:auto;
  border-radius:24px 24px 0 0;
  padding:22px 18px calc(28px + env(safe-area-inset-bottom));
}
.sheet-inner h2{margin:0 0 4px;font-size:23px}

/* ── 목록 ── */
.list-item{
  display:flex;align-items:center;gap:14px;padding:16px 4px;
  border-bottom:1px solid var(--line);cursor:pointer;min-height:var(--tap);
}
.list-item:last-child{border-bottom:none}
.list-item .e{font-size:32px;flex:none}
.list-item .w{font-weight:700;font-size:21px}
.list-item .m{color:var(--muted);font-size:17px}

/* ── 폼 ── */
.field{margin-top:18px}
.field label{display:block;font-weight:700;margin-bottom:6px;font-size:18px}
.field input,.field select{
  width:100%;font-size:19px;font-family:inherit;padding:14px;
  border:2px solid var(--line);border-radius:14px;
  background:#fff;color:var(--ink);outline:none;
}
.field input:focus,.field select:focus{border-color:var(--accent)}
.hint{color:var(--muted);font-size:16px;margin-top:6px;line-height:1.55}

/* ── 그림 자리 ──
   그림이 있으면 그림, 없거나 로딩에 실패하면 예문 카드로 바뀐다. */
.visual{margin-top:8px}
.visual img{
  display:block;width:100%;max-height:260px;object-fit:contain;
  border-radius:16px;background:#F6F1E6;
}
.visual .scenecard{display:none}
.visual.failed img{display:none}
.visual.failed .scenecard{display:block}

.scenecard{
  background:linear-gradient(180deg,#FFF9EF,#FFF2DE);
  border:2px solid var(--line);border-radius:20px;
  padding:22px 18px;text-align:center;
}
.scenecard .scene{
  font-size:52px;line-height:1.25;letter-spacing:6px;
  word-break:keep-all;
}
.scenecard .ex-en{
  font-size:26px;font-weight:700;line-height:1.45;
  margin-top:14px;word-break:break-word;
}
.scenecard .ex-ko{font-size:19px;color:var(--muted);margin-top:6px}

/* 작은 자리(카드 넘기기, 내 낱말)에서는 조금 줄인다 */
.scenecard.sm{padding:16px 14px}
.scenecard.sm .scene{font-size:40px}
.scenecard.sm .ex-en{font-size:21px;margin-top:10px}
.scenecard.sm .ex-ko{font-size:16px}

/* ── 아래 메뉴 ── */
.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;background:var(--card);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -2px 12px rgba(70,55,35,.07);
}
.bottomnav a{
  flex:1;position:relative;text-align:center;text-decoration:none;
  color:var(--muted);font-size:15px;font-weight:700;
  padding:9px 4px 11px;min-height:var(--tap);
}
.bottomnav a .ic{display:block;font-size:27px;line-height:1.25}
.bottomnav a.on{color:var(--accent)}
.bottomnav a:active{background:var(--accent-soft)}

.nav-badge{
  position:absolute;top:4px;left:calc(50% + 8px);
  background:var(--red);color:#fff;
  font-size:13px;font-weight:800;line-height:21px;
  min-width:21px;height:21px;border-radius:999px;padding:0 6px;
}

/* ── 인쇄 (시험지) ── */
@media print{
  body{background:#fff;font-size:14px}
  .no-print{display:none !important}
  .card{box-shadow:none;border:1px solid #ccc}
  .page-break{page-break-before:always}
}