/* ============================================================
   색 체계 — 차분한 회녹색 바탕(--paper = --canvas), 흰 표면, 짙은 초록 강조색, 형광펜 노랑.
   데스크톱은 좌측 사이드바, 모바일(<=880px)은 위 머리글 + 하단 탭바로 전환된다.
   Palette: a calm grey-green canvas (--paper = --canvas), white surfaces, a deep green accent and a highlighter
   yellow. Desktop uses a left sidebar; mobile (<=880px) switches to a top header and a bottom tab bar.
   ============================================================ */
:root{
  --paper:#F3F6F4;
  --paper-deep:#E7EDEA;
  --ink:#17201D;
  --ink-soft:#5F6B66;
  --red:#CF4338;
  --red-soft:#F7E1DE;
  --teal:#127A66;
  --gold:#A97F2A;
  --card:#FFFFFF;
  --line:#DCE3DF;
  /* 맞음·틀림 바탕(어두운 화면에서 바뀐다) / right and wrong backgrounds (changed in dark mode) */
  --ok-bg:#E2F2EC;
  --bad-bg:#FCEBE9;
  /* 따뜻한 안내(복습 권하기·다시 풀기·프리미엄) / warm notices (review nudge, retry note, premium) */
  --warm-bg:#FFF7DD;
  --warm-line:#F0D88A;
  --warm-ink:#7A5A12;
  /* 문제 화면·학습 노선도의 깔끔한 바탕(어두운 화면 값은 tools/css/dark.py)
     Clean surfaces for the solving screens and the route map (dark values in tools/css/dark.py) */
  --canvas:#F3F6F4;
  --surface:#FFFFFF;
  --ink-strong:#17201D;
  --muted:#5F6B66;
  --hair:#DCE3DF;
  --accent:#127A66;
  --accent-soft:#E2F2EC;
  --marker:#FFE07A;
  --wrong:#CF4338;
  --wrong-soft:#FCEBE9;
  --on-accent:#FFFFFF;
  /* 일본어 글자(한글은 Noto Sans KR 로 넘어간다) / Japanese text (Hangul falls through to Noto Sans KR) */
  --jp-font:'Zen Kaku Gothic New','Noto Sans KR','Noto Sans CJK JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
}

/* 브라운 화면(앱 설정 "브라운") — 예전 종이 색: 베이지 바탕, 크림색 표면, 차분한 초록 강조색, 짙은 갈색 글자.
   모양은 그대로 두고 색 이름만 바꾸므로 새 화면도 저절로 따라온다(html[data-theme=brown], app.js AppPrefs 가 단다).
   Brown theme (app setting "Brown"): the earlier paper palette - beige canvas, cream surfaces, a muted green accent and
   dark brown text. Only the colour variables change, so every screen follows (html[data-theme=brown], set by AppPrefs). */
:root[data-theme="brown"]{
  --paper:#F3EEE1;
  --paper-deep:#EAE2CF;
  --ink:#262220;
  --ink-soft:#5C5348;
  --red:#B23A2E;
  --red-soft:#E7DCCF;
  --teal:#3F6E64;
  --gold:#B08D3E;
  --card:#FFFDF6;
  --line:#D9CFB8;
  --ok-bg:#E9F1EA;
  --bad-bg:#FBEFEC;
  --warm-bg:#FBF0D2;
  --warm-line:#E5CB86;
  --warm-ink:#7A5A12;
  --canvas:#F3EEE1;
  --surface:#FFFDF6;
  --ink-strong:#262220;
  --muted:#6B6155;
  --hair:#DDD3BD;
  --accent:#3F6E64;
  --accent-soft:#E4ECE4;
  --marker:#F6D77A;
  --wrong:#B23A2E;
  --wrong-soft:#F8E9E4;
  --on-accent:#FFFFFF;
}

*{box-sizing:border-box;}
/* 옆으로 넘치는 것을 자른다. clip 은 hidden 과 달리 body 를 스크롤 상자로 만들지 않아 position:sticky(왼쪽 메뉴·
   "학습 계속하기"·모의고사 탭)가 화면 기준으로 붙는다. 오래된 브라우저는 hidden 을 쓴다.
   Clip horizontal overflow; unlike hidden, clip doesn't turn body into a scroll container, so position:sticky (the
   sidebar, the continue bar, mock-test tabs) sticks to the viewport. Older browsers fall back to hidden. */
html,body{overflow-x:hidden; overflow-x:clip;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:14px;
  line-height:1.55;
}

a{color:var(--teal);}

/* ===== 전체 레이아웃 / layout ===== */
.app{display:flex; min-height:100vh;}

/* ===== 사이드바 (데스크톱) / sidebar (desktop) ===== */
.sidebar{
  width:232px; flex:0 0 232px;
  background:var(--surface); border-right:1px solid var(--hair);
  color:var(--ink-strong); padding:22px 0;
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
  /* 화면에 붙어 있으므로 메뉴가 길면 메뉴 안에서 굴린다 / pinned, so a long menu scrolls inside */
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
}
.brand{
  padding:0 20px 18px; font-size:21px; font-weight:800; letter-spacing:.2px;
  border-bottom:1px solid var(--hair); margin-bottom:12px;
}
.brand small{display:block; font-size:10.5px; font-weight:500; color:var(--muted); letter-spacing:0; margin-top:4px;}
.brand a{color:inherit; text-decoration:none;}
.tabs{display:flex; flex-direction:column; gap:2px; flex:1;}
.tab-btn{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; background:none; border:none; width:auto;
  color:var(--muted); font-size:14px; font-weight:500; cursor:pointer;
  text-align:left; text-decoration:none; transition:background-color .15s, color .15s;
}
.tab-btn:hover{background:var(--canvas); color:var(--ink-strong);}
.tab-btn.active{background:var(--accent-soft); color:var(--accent); font-weight:700;}
.tab-btn .ico{
  font-family:var(--jp-font); font-weight:500;
  font-size:15px; width:20px; text-align:center;
}

.badge-admin{
  background:var(--gold); color:#fff; font-size:9.5px; font-weight:700;
  padding:1px 6px; border-radius:8px; margin-left:4px; white-space:nowrap;
}

/* ============================================================
   오른쪽 위 계정 메뉴
   로그인하면 프로필 사진(없으면 첫 글자)이 보이고, 누르면 아래로 메뉴가 열린다.
   <details> 라서 스크립트 없이도 열고 닫힌다.
   Top-right account menu: the photo (or first letter) opens a dropdown.
   Built on <details>, so it opens and closes without script.
   ============================================================ */
.topbar-account{position:absolute; top:18px; right:24px; z-index:80;}
.account-login{
  display:inline-flex; align-items:center; height:36px; padding:0 16px; border-radius:18px;
  background:var(--teal); color:#fff; font-size:13px; font-weight:700; text-decoration:none;
  box-shadow:0 2px 8px rgba(15,30,25,.14); white-space:nowrap;
}
.account-login:hover{background:#0F6857; background:color-mix(in srgb, var(--teal) 82%, #000);}

.profile-menu{position:relative;}
.profile-menu > summary{
  list-style:none; cursor:pointer; display:block; border-radius:50%;
  -webkit-tap-highlight-color:transparent;
}
.profile-menu > summary::-webkit-details-marker{display:none;}
.profile-menu > summary:focus-visible{outline:3px solid rgba(18,122,102,.45); outline-offset:2px;}

/* 사진 동그라미 — 사진이 없으면 같은 자리에 첫 글자 / photo circle, or the first letter */
.avatar{
  width:38px; height:38px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--teal); color:#fff; font-weight:800; font-size:16px; line-height:1;
  border:2px solid #fff; box-shadow:0 1px 6px rgba(15,30,25,.2);
  vertical-align:middle; user-select:none;
}
.profile-menu[open] > summary .avatar{box-shadow:0 0 0 3px rgba(176,141,62,.6);}
.avatar-lg{width:48px; height:48px; font-size:20px;}
.avatar-xl{width:112px; height:112px; font-size:44px; border-width:3px;}

.profile-dropdown{
  position:absolute; right:0; top:calc(100% + 10px);
  width:268px; max-width:calc(100vw - 24px);
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 14px 34px rgba(15,30,25,.2), 0 2px 6px rgba(15,30,25,.08);
  padding:6px; transform-origin:top right; animation:pd-in .14s ease-out;
}
@keyframes pd-in{from{opacity:0; transform:translateY(-4px) scale(.98);} to{opacity:1; transform:none;}}
.pd-head{
  display:flex; align-items:center; gap:12px;
  padding:10px 10px 14px; margin-bottom:6px; border-bottom:1px solid var(--line);
}
.pd-who{min-width:0;}
.pd-name{font-weight:800; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pd-id{font-size:12px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pd-item{
  display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:10px 12px;
  border:none; border-radius:10px; background:none; color:var(--ink);
  font-family:inherit; font-size:14px; text-align:left; text-decoration:none; cursor:pointer;
}
.pd-item:hover,.pd-item:focus-visible{background:var(--paper-deep); outline:none;}
.pd-item.active{background:var(--paper); font-weight:700;}
.pd-ico{font-family:var(--jp-font); width:22px; text-align:center; color:var(--teal); flex:0 0 auto;}
.pd-sep{height:1px; background:var(--line); margin:6px 4px;}
.pd-label{font-size:12px; font-weight:700; color:var(--ink-soft); letter-spacing:0; padding:6px 12px 2px;}
.pd-form{margin:0;}
.pd-logout,.pd-logout .pd-ico{color:var(--red);}

/* ===== 본문 / main content ===== */
main{flex:1; padding:36px 40px 90px; max-width:1080px; min-width:0;}
.eyebrow{
  color:var(--accent); font-weight:800; letter-spacing:0;
  font-size:12.5px; margin-bottom:6px;
}
.page-title{font-size:26px; margin:0 0 8px; font-weight:800; letter-spacing:-.01em; color:var(--ink-strong);}
.page-desc{color:var(--ink-soft); font-size:13.5px; margin:0 0 20px;}
/* keep-all(낱말 가운데서 끊지 않기)은 띄어쓰기로 끊는 한국어 화면에만. 일본어·중국어 글은 띄어쓰기가 없어
   keep-all 이면 문장부호에서만 줄이 바뀌어 화면 밖으로 넘친다. <html lang> 이 화면 언어라 :lang(ko) 로 고른다.
   keep-all only for Korean UI: Japanese/Chinese have no spaces, so keep-all would break lines only at punctuation
   and overflow. <html lang> is the UI language. */
:lang(ko) .page-title, :lang(ko) .page-desc, :lang(ko) .fc-meaning, :lang(ko) .learn-desc,
:lang(ko) .speak-error-msg{word-break:keep-all;}

.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:18px 20px; margin-bottom:14px;
}
.card h2{font-size:15px; margin:0 0 10px;}

/* ===== 표 (모바일에서 가로 스크롤) / tables (horizontal scroll on mobile) ===== */
.table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius:16px; border:1px solid var(--line); background:var(--card);
}
table{width:100%; border-collapse:collapse; min-width:520px;}
th,td{
  padding:10px 12px; text-align:left; font-size:13px;
  border-bottom:1px solid var(--line); word-break:break-word;
}
th{background:var(--canvas); color:var(--muted); font-weight:700; font-size:12px; white-space:nowrap;}
tr:last-child td{border-bottom:none;}

/* ===== 폼 / forms ===== */
.form-row{margin-bottom:13px;}
label{display:block; font-size:12.5px; margin-bottom:6px; color:var(--ink-soft); font-weight:700;}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=date],select,textarea{
  width:100%; max-width:100%; padding:10px 12px;
  border:1px solid var(--line); border-radius:12px;
  font-size:14px; background:var(--surface); color:var(--ink); font-family:inherit;
  transition:border-color .12s, box-shadow .12s;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
textarea{min-height:120px; resize:vertical;}
.hint{font-size:11.5px; color:var(--ink-soft); font-weight:400;}
/* 비밀번호 보기 단추(app.js 가 감싼다)·Caps Lock 알림·체크박스 줄 / password reveal, Caps Lock notice, checkbox row */
.pw-wrap{position:relative; display:block;}
.pw-wrap input{padding-right:44px;}
.pw-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:8px; background:transparent; color:var(--ink-soft); cursor:pointer;
}
.pw-toggle:hover,.pw-toggle[aria-pressed="true"]{color:var(--teal);}
.pw-toggle:focus-visible{outline:2px solid var(--teal); outline-offset:0;}
.caps-warn{display:block; margin-top:4px; color:var(--red); font-weight:600;}
.check-row{display:flex; align-items:center; gap:8px; margin:0; color:var(--ink); font-weight:600; cursor:pointer;}
.check-row input{width:18px; height:18px; margin:0; flex:none;}
.check-row + .hint{display:block; margin:4px 0 0 26px;}
.login-links{margin:12px 0 0; font-size:13px;}
/* 관리자: 방금 발급한 임시 비밀번호 / admin: the temporary password just issued */
.temp-password{border-color:var(--gold);}
.temp-password-value{
  display:inline-block; margin-left:8px; padding:4px 10px; border-radius:8px;
  background:var(--paper-deep); font-size:16px; letter-spacing:.06em; user-select:all;
}

.btn{
  display:inline-block; padding:9px 16px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none; font-family:inherit;
  transition:border-color .12s, background-color .12s, filter .12s; white-space:nowrap;
}
.btn:hover{border-color:var(--teal);}
.btn-primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700;}
.btn-primary:hover{border-color:var(--accent); filter:brightness(1.07);}
.btn-danger{background:var(--red); color:#fff; border-color:var(--red);}
.btn-sm{padding:6px 12px; font-size:12px; border-radius:10px;}

.toolbar{display:flex; gap:8px; align-items:center; margin-bottom:16px; flex-wrap:wrap;}
.toolbar form{display:flex; gap:6px; flex:1; min-width:200px; flex-wrap:wrap;}
.toolbar input[type=text],.toolbar select{flex:1; min-width:120px; width:auto;}

/* ===== 메시지 / messages ===== */
.msg-error{color:var(--red); font-size:13px; margin:8px 0; font-weight:600;}
.msg-ok{color:var(--teal); font-size:13px; margin:8px 0; font-weight:600;}
.field-error{color:var(--red); font-size:11.5px; display:block; margin-top:4px;}
.empty{text-align:center; color:var(--ink-soft); padding:30px 16px; font-size:13px;}

/* ===== 배지 / badges ===== */
.badge{
  display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px;
  background:var(--paper-deep); border:1px solid transparent; color:var(--ink-soft);
  white-space:nowrap;
}
.badge-answered{background:var(--accent-soft); color:var(--accent); border-color:transparent;}
.badge-wait{background:var(--wrong-soft); color:var(--wrong); border-color:transparent;}
.badge-gold{background:var(--warm-bg); color:var(--warm-ink); border-color:var(--warm-line);}

/* ===== 일본어 표기 / Japanese text ===== */
.jp{font-family:var(--jp-font); font-size:15px;}
.jp-lg{font-family:var(--jp-font); font-size:18px; line-height:1.9;}
.uword{
  text-decoration:none; border-bottom:2px solid var(--red);
  padding-bottom:1px; font-weight:700;
}
.blankbox{
  display:inline-block; min-width:64px; border-bottom:2px solid var(--ink-soft);
  text-align:center; color:var(--ink-soft);
}
.correct{color:var(--teal); font-weight:700;}
.oyomi{color:var(--teal); font-size:12.5px;}
.omean{color:var(--ink-soft); font-size:12.5px;}

/* ===== 발음 듣기 버튼 / listen buttons ===== */
.spk{
  background:var(--teal); color:#fff; border:none;
  width:26px; height:26px; min-width:26px; border-radius:50%;
  font-size:12px; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; padding:0;
  vertical-align:middle; margin-right:5px; flex:0 0 auto; position:relative;
}
/* 보이는 크기는 그대로 두고 누르는 자리만 넓힌다(작은 단추도 손가락으로) / a larger tap area, same look */
.spk:not(.letter-cell)::after{content:''; position:absolute; inset:-8px; border-radius:50%;}
.spk:hover{background:#0F6857; background:color-mix(in srgb, var(--teal) 82%, #000);}
.spk:active{transform:scale(.93);}
.spk-sm{width:21px; height:21px; min-width:21px; font-size:10px;}

/* ===== 문제 선택지 / question choices ===== */
.choice-list{list-style:none; padding:0; margin:0;}
.choice-list li{padding:0; margin-bottom:8px;}
.choice-btn{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:12px 14px; border:1.5px solid var(--line); border-radius:11px;
  background:var(--surface); color:var(--ink); font-size:14.5px; cursor:pointer;
  text-align:left; font-family:inherit; transition:.12s;
}
.choice-btn:hover{border-color:var(--teal); background:var(--canvas);}
.choice-num{
  color:var(--ink-soft); font-size:12px; font-weight:700;
  min-width:16px; flex:0 0 auto;
}
.choice-text{font-family:var(--jp-font); flex:1; word-break:break-word;}

.result-row{
  display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap;
  padding:11px 13px; border-radius:10px; margin-bottom:7px;
  border:1.5px solid var(--line); background:var(--surface);
}
.result-row.is-correct{border-color:var(--teal); background:var(--accent-soft);}
.result-row.is-picked-wrong{border-color:var(--red); background:var(--wrong-soft);}

/* ===== 진도바 / progress bar ===== */
.progress-track{height:8px; background:var(--paper-deep); border-radius:99px; overflow:hidden; margin-top:6px;}
.progress-fill{height:100%; background:var(--teal); border-radius:99px; transition:width .3s;}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px;}
.stat-num{font-size:26px; font-weight:800; color:var(--teal); line-height:1.2;}
.stat-label{font-size:11.5px; color:var(--ink-soft);}

/* ===== 모바일 하단 탭바 (기본 숨김) / mobile bottom tab bar (hidden by default) ===== */
.mobile-tabbar{display:none;}

/* ============================================================
   반응형: 880px 이하에서 사이드바 → 위쪽 머리글 + 하단 탭바
   Responsive: below 880px the sidebar becomes a top header + bottom tab bar
   ============================================================ */
@media (max-width:880px){
  .app{flex-direction:column;}

  /* 위쪽 머리글: 왼쪽 로고, 오른쪽 계정 메뉴(.topbar-account 가 그 자리에 겹친다)
     Top header: logo on the left; the account menu sits over the right end */
  .sidebar{
    width:100%; flex:none; height:56px; position:static;
    padding:0 64px 0 0; flex-direction:row; align-items:center; overflow:visible;
    border-right:none; border-bottom:1px solid var(--hair);
  }
  .brand{
    padding:0 16px; margin:0; border:none;
    font-size:17px; flex:1; min-width:0; white-space:nowrap;
  }
  .brand small{display:none;}
  .tabs{display:none;}
  .topbar-account{top:calc(9px + env(safe-area-inset-top)); right:12px;}
  /* 앱(TWA)에서 화면 끝까지 그릴 때 위쪽 상태 표시줄 밑으로 들어가지 않게 / keep clear of the status bar edge-to-edge */
  .sidebar{height:calc(56px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top);}
  .account-login{height:34px; padding:0 14px; font-size:12.5px;}

  /* 하단 탭바 — 칸은 줄어들지 않고(넓으면 나눠 채우고) 넘치면 옆으로 민다. 손을 떼면 가까운 칸에 맞춰 멈춘다.
       Bottom tab bar: tabs never shrink (they share spare width); overflow scrolls and snaps. */
  .mobile-tabbar{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--surface); border-top:1px solid var(--hair);
    box-shadow:0 -4px 18px rgba(15,30,25,.06);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tabbar-track{
    display:flex; gap:4px; padding:6px 8px;
    overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity; scroll-padding:0 28px;
    scrollbar-width:none;
  }
  .tabbar-track::-webkit-scrollbar{display:none;}
  .tabbar-track > a{
    flex:1 0 auto; min-width:68px; min-height:52px; padding:6px 12px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    border-radius:12px; scroll-snap-align:center;
    color:var(--muted); text-decoration:none;
    font-size:11.5px; line-height:1.15; white-space:nowrap;
    -webkit-tap-highlight-color:transparent; transition:background .15s, color .15s;
  }
  .tabbar-track > a .ico{font-family:var(--jp-font); font-weight:500; font-size:18px; line-height:1;}
  .tabbar-track > a.active{background:var(--accent-soft); color:var(--accent); font-weight:700;}
  .tabbar-track > a.active .ico{color:var(--accent);}
  .tabbar-track > a:active{background:var(--canvas);}

  /* 옆에 칸이 더 있으면 그쪽 가장자리를 흐리게 하고 화살표를 보인다(app.js 가 more-left/right 를 단다)
     Fade + chevron on an edge that has more tabs beyond it (app.js sets more-left / more-right) */
  .mobile-tabbar::before,.mobile-tabbar::after{
    position:absolute; top:0; bottom:env(safe-area-inset-bottom); width:34px; z-index:1;
    display:flex; align-items:center; font-size:20px; color:var(--muted);
    pointer-events:none; opacity:0; transition:opacity .2s;
  }
  .mobile-tabbar::before{
    content:'\2039'; left:0; justify-content:flex-start; padding-left:5px;
    background:linear-gradient(90deg, var(--surface) 35%, transparent);
  }
  .mobile-tabbar::after{
    content:'\203A'; right:0; justify-content:flex-end; padding-right:5px;
    background:linear-gradient(270deg, var(--surface) 35%, transparent);
  }
  .mobile-tabbar.more-left::before,.mobile-tabbar.more-right::after{opacity:1;}

  main{padding:20px 16px calc(96px + env(safe-area-inset-bottom)); max-width:100%;}
  .page-title{font-size:22px;}
  .card{padding:15px; border-radius:12px;}
  th,td{padding:8px 9px; font-size:12.5px;}
  .jp-lg{font-size:16.5px;}
  .stat-num{font-size:22px;}
  .toolbar form{width:100%;}
  .btn{padding:8px 13px;}
}

@media (max-width:420px){
  main{padding:18px 14px calc(96px + env(safe-area-inset-bottom));}
  .page-title{font-size:20px;}
  .choice-btn{padding:11px 12px; font-size:13.5px;}
  .tabbar-track > a{min-width:64px; padding:6px 10px;}
}

/* ============================================================
   문제 세트(그룹) 카드
   낱개 문제 대신 "몇 주차 몇 번 세트"를 카드로 보여준다.
   Set cards - groups of questions instead of a flat question list.
   ============================================================ */
.set-grid{
  display:grid; gap:11px;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
}
.set-card{
  display:block; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line);
  border-radius:13px; padding:14px; transition:.13s;
}
.set-card:hover{border-color:var(--teal); transform:translateY(-1px);}
.set-card-head{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:9px;}
.set-card-title{
  font-family:var(--jp-font);
  font-size:17px; font-weight:700;
}
.set-card-sub{font-size:12px; color:var(--ink-soft); margin-top:2px;}
.set-card-stat{
  display:flex; justify-content:space-between; gap:8px;
  font-size:11px; color:var(--ink-soft); margin-top:5px;
}

/* ============================================================
   가나 글자표 / 퀴즈
   Kana chart / quiz
   ============================================================ */
.kana-grid{
  display:grid; gap:6px;
  grid-template-columns:repeat(5, 1fr);
}
.kana-cell{
  background:var(--card); border:1px solid var(--line);
  border-radius:9px; padding:9px 4px; text-align:center; position:relative;
}
.kana-cell.empty-cell{visibility:hidden;}
.kana-char{
  font-family:var(--jp-font);
  font-size:19px; font-weight:700; line-height:1.2; display:block;
}
.kana-kata{
  font-family:var(--jp-font);
  font-size:13px; color:var(--teal); display:block; line-height:1.2;
}
.kana-romaji{font-size:9.5px; color:var(--ink-soft); text-transform:uppercase; display:block;}
.kana-row-label{
  font-size:11px; font-weight:700; color:var(--teal);
  display:flex; align-items:center; justify-content:center;
}
/* 가나 칸은 칸 어디를 눌러도 소리가 난다(app.js) / tapping anywhere on a kana cell plays it */
.kana-cell:not(.empty-cell){cursor:pointer;}
.kana-cell .spk::after{content:none;}
.kana-cell .spk{
  position:absolute; top:2px; right:2px;
  width:17px; height:17px; min-width:17px; font-size:8px; margin:0;
}

/* 퀴즈 화면 / quiz screen */
.quiz-box{
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:22px 18px; text-align:center;
}
.quiz-prompt{
  font-family:var(--jp-font);
  font-size:44px; font-weight:700; margin:14px 0 18px; line-height:1.2;
}
.quiz-prompt-sm{
  font-family:var(--jp-font);
  font-size:26px; font-weight:700; margin:12px 0 16px; line-height:1.4;
}
.quiz-options{
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
}
.quiz-progress{font-size:12px; color:var(--ink-soft); margin-bottom:4px;}
.quiz-score{font-size:13px; font-weight:700; color:var(--teal);}

@media (max-width:600px){
  .set-grid{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:9px;}
  .set-card{padding:12px;}
  .set-card-title{font-size:15px;}
  .kana-grid{gap:4px;}
  .kana-char{font-size:16px;}
  .kana-kata{font-size:11px;}
  .quiz-prompt{font-size:36px;}
  .quiz-prompt-sm{font-size:21px;}
}

/* ============================================================
   Everstudy Language Score 화면
   Language Score screen
   ============================================================ */
.score-hero{text-align:center; padding:26px 18px;}
.score-big{
  font-size:64px; font-weight:800; color:var(--teal);
  line-height:1; letter-spacing:-2px;
}
.score-unit{font-size:14px; color:var(--ink-soft); margin-bottom:12px;}
.score-rank{font-size:13.5px; margin:10px 0 0;}

.skill-row{margin-bottom:16px;}
.skill-row:last-child{margin-bottom:0;}
.skill-head{
  display:flex; justify-content:space-between; align-items:center;
  gap:8px; flex-wrap:wrap; margin-bottom:5px; font-size:13px;
}
.skill-sub{font-size:11.5px; color:var(--ink-soft); margin-top:4px;}

/* 연습 화면 입력창 / practice input */
#answer{font-family:var(--jp-font);}

@media (max-width:600px){
  .score-big{font-size:52px;}
  .skill-head{font-size:12.5px;}
}

/* ============================================================
   동의 항목
   체크박스를 label로 감싸서 글자를 눌러도 체크되게 한다.
   모바일에서 작은 체크박스만 정확히 누르기 어렵기 때문이다.
   Consent items: the checkbox sits inside its label so tapping the text toggles it — small boxes are hard to hit on
   phones.
   ============================================================ */
.consent-box{
  border:1px solid var(--line); border-radius:10px;
  padding:12px; margin:14px 0; background:var(--paper);
}
.consent-item{
  display:flex; align-items:flex-start; gap:8px;
  font-size:12.5px; font-weight:400; color:var(--ink);
  margin-bottom:10px; cursor:pointer; line-height:1.5;
}
.consent-item:last-child{margin-bottom:0;}
.consent-item input[type=checkbox]{
  width:auto; flex:0 0 auto; margin-top:2px;
}
.consent-item .hint{display:block; margin-top:2px;}

/* ============================================================
   발음 연습 — 마이크 파형 / 오류 표시
   Pronunciation practice — mic waveform / error display
   ============================================================ */

.interim-text{
  font-family:var(--jp-font);
  font-size:18px; color:var(--teal); min-height:26px; margin:0 0 12px;
}

/* 글자별 대조 결과 / per-character comparison */
.diff-box{
  display:flex; justify-content:center; gap:4px; flex-wrap:wrap;
  margin:12px 0; font-family:var(--jp-font);
}
.diff-char{
  /* 아래 "한글 병기"에서 덮어쓰던 값을 합쳤다 / merged with the later override (Korean reading below) */
  position:relative; display:inline-flex; flex-direction:column; align-items:center;
  min-width:34px; padding:5px 6px 4px; font-size:26px; border-radius:7px; line-height:1;
}
.diff-match{color:var(--teal); background:var(--accent-soft);}
.diff-wrong{color:var(--red); background:var(--wrong-soft);}
.diff-missing{
  color:var(--ink-soft); background:var(--paper-deep);
  text-decoration:line-through; opacity:.75;
}
.diff-char small{
  font-size:10px; font-family:'Noto Sans KR',sans-serif;
  color:var(--red); text-align:center; margin-top:1px;
}

.tip-box{
  background:var(--paper-deep); border-radius:9px;
  padding:9px 12px; font-size:12.5px; margin:10px 0 0;
  text-align:left; line-height:1.6;
}

/* ============================================================
   가나 키보드 — 화면을 덮지 않게 키를 낮게 두고, 탭마다 줄 수가 달라도(히라가나 11줄, 탁음 5줄) 높이가 같도록
   키패드에 최소 높이를 준다. 입력 표시줄은 늘 맨 위.
   Kana keyboard: short keys, a minimum keypad height so every tab is the same size, the input line on top.
   ============================================================ */
.kana-keyboard{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  margin:0 auto;
  max-width:480px;
  background:var(--card);
  border-top:1px solid var(--line);
  border-radius:14px 14px 0 0;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 22px rgba(0,0,0,.16);
}

/* 지금 입력한 내용 — 항상 키보드 맨 위에 보인다 / current input — always visible above the keyboard */
.kb-display{
  display:flex; align-items:center; gap:2px;
  min-height:42px; padding:5px 12px; margin-bottom:7px;
  background:var(--surface); border:1.5px solid var(--teal); border-radius:9px;
  overflow-x:auto;
}
.kb-display-text{
  font-family:var(--jp-font);
  font-size:22px; line-height:1.2; color:var(--ink);
  white-space:nowrap;
}
.kb-display-text.empty{
  font-family:'Noto Sans KR',sans-serif;
  font-size:12.5px; color:var(--ink-soft);
}
.kb-caret{
  width:2px; height:22px; background:var(--teal);
  animation:kbBlink 1s step-end infinite; flex:0 0 auto;
}
@keyframes kbBlink{ 50%{opacity:0;} }

.kb-tabs{display:flex; gap:4px; margin-bottom:7px;}
.kb-tab{
  flex:1; padding:7px 4px; font-size:11.5px;
  border:1px solid var(--line); border-radius:7px;
  background:var(--paper); color:var(--ink-soft);
  cursor:pointer; font-family:inherit; white-space:nowrap;
}
.kb-tab.active{background:var(--teal); color:#fff; border-color:var(--teal);}
.kb-back, .kb-close{flex:0 0 42px; font-size:13px;}
.kb-close{background:var(--paper-deep);}

/* 키패드.
   min-height 를 둔 이유: 탁음(5줄)으로 바꿔도 히라가나(11줄)와 같은 높이를
   유지해, 탭을 옮길 때 본문이 튀지 않게 한다.
   Keypad; min-height keeps the voiced tab (5 rows) as tall as hiragana (11 rows) so the page doesn't jump. */
.kb-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:4px;
  align-content:start;
  min-height:352px;
}
.kb-key{
  height:30px; padding:0;
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
  font-family:var(--jp-font);
  border:1px solid var(--line); border-radius:7px;
  background:var(--surface); color:var(--ink); cursor:pointer;
}
.kb-key:hover{border-color:var(--teal);}
.kb-key:active{background:var(--teal); color:#fff;}
.kb-empty{visibility:hidden;}

/*
 * 키보드가 가리는 만큼 본문 아래에 여백을 준다(JS가 잰 실제 높이)
 * bottom padding equal to the keyboard height (measured by JS)
 */
body.kb-open main{ padding-bottom:calc(var(--kb-h, 480px) + 24px); }

@media (max-width:600px){
  .kana-keyboard{max-width:100%;}
  .kb-key{height:32px; font-size:17px;}
  .kb-grid{min-height:374px;}
  .kb-display-text{font-size:21px;}
}

/* 화면이 낮은 기기(가로 모드 등)에서는 키를 더 줄인다 / smaller keys on short screens (e.g. landscape) */
@media (max-height:640px){
  .kb-key{height:26px; font-size:15px;}
  .kb-grid{min-height:308px;}
  .kb-display{min-height:36px;}
  .kb-display-text{font-size:19px;}
}

/* ============================================================
   한글 발음 대조 / 점수 변화 그래프
   Hangul reading comparison / score history chart
   ============================================================ */

/* 정답 vs 내 발음을 한글로 나란히 / target vs. my pronunciation side by side in Hangul */
.kr-compare{
  background:var(--paper); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; margin:12px 0; text-align:left;
}
.kr-row{
  display:flex; align-items:center; gap:8px;
  padding:5px 0; flex-wrap:wrap;
}
.kr-row + .kr-row{border-top:1px dashed var(--line);}
.kr-label{
  font-size:11px; color:var(--ink-soft); font-weight:700;
  flex:0 0 46px;
}
.kr-text{
  font-size:15px; font-weight:700; color:var(--teal);
  letter-spacing:1px;
}
.kr-text.kr-mine{color:var(--red);}

/* 글자별 대조에 한글 병기 / Hangul under the per-character comparison */
.diff-char b{font-size:24px; font-weight:700; line-height:1.1;}
.diff-char i{
  font-style:normal; font-size:11px; font-family:'Noto Sans KR',sans-serif;
  margin-top:2px; opacity:.85;
}
.diff-missing b{text-decoration:line-through;}

/* 점수 변화 막대 그래프 (라이브러리 없이 CSS만) / score history bar chart (CSS only, no library) */
.score-chart{
  display:flex; align-items:flex-end; gap:5px;
  height:140px; padding:6px 0; overflow-x:auto;
}
.chart-col{
  display:flex; flex-direction:column; align-items:center;
  flex:1 0 26px; height:100%;
}
.chart-bar-wrap{
  flex:1; width:100%; display:flex; align-items:flex-end;
  background:var(--paper); border-radius:4px;
}
.chart-bar{
  width:100%; border-radius:4px; min-height:3px;
  transition:height .3s;
}
.chart-label{font-size:10px; color:var(--ink-soft); margin-top:4px;}

@media (max-width:600px){
  .diff-char{min-width:30px;}
  .diff-char b{font-size:21px;}
  .kr-text{font-size:14px;}
}

/* 글자표 열 머리글 (세로줄이 모음임을 표시) / kana chart column headers (columns are vowels) */
.col-head{
  text-align:center; font-size:11px; font-weight:700;
  color:var(--teal); padding:2px 0;
  font-family:var(--jp-font);
}

/* ============================================================
   가나 쓰기 연습
   흐린 글자 위에 직접 써보며 모양을 익히는 화면.
   Kana writing practice: trace over a faint character to learn its shape.
   ============================================================ */
.write-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin-bottom:14px;
}
.seg{display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden;}
.seg-btn{
  padding:7px 14px; font-size:12.5px; border:0; cursor:pointer;
  background:var(--paper); color:var(--ink-soft); font-family:inherit;
}
.seg-btn.active{background:var(--teal); color:#fff;}
.guide-toggle{
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--ink-soft); cursor:pointer;
}
.guide-toggle input{width:auto;}

.write-stage{
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:16px; text-align:center;
}
.write-progress{font-size:12px; color:var(--ink-soft); margin-bottom:10px;}
.write-info{
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin-bottom:12px;
}
.write-romaji{font-size:20px; font-weight:800; color:var(--teal);}
.write-kr{font-size:15px; color:var(--red); font-weight:700;}

/* 쓰기 판과 그 둘레 띠는 손가락이 닿아도 화면이 움직이지 않는다(스크롤·확대·길게 눌러 선택 모두 막음).
   판 양옆 여백까지 띠를 넓혀, 획을 판 가장자리에서 시작해도 화면이 밀리지 않게 한다.
   The pad and the band around it never move the page on touch (no scroll, zoom or long-press select);
   the band reaches the stage edges so a stroke starting at the rim stays put. */
.write-pad{
  margin:-8px -16px; padding:8px 16px;
  touch-action:none; overscroll-behavior:contain;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
/* 흐린 글자와 캔버스를 정확히 겹친다 / faint character and canvas overlap exactly */
.write-canvas-wrap{
  position:relative; width:320px; height:320px; max-width:100%;
  margin:0 auto; container-type:inline-size;
}
.write-guide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Shippori Mincho','Noto Serif KR',serif;
  font-size:240px; font-size:75cqw; line-height:1;
  color:var(--line);        /* 따라 쓸 수 있을 만큼만 흐리게 / faint enough to trace */
  user-select:none; pointer-events:none;
}
#writeCanvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  background:transparent;
  /* 십자 보조선 - 글자 균형을 잡기 쉽게 / crosshair guides for balance */
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:50% 50%;
  border:1px solid var(--line); border-radius:10px;
  touch-action:none;   /* 손가락으로 쓸 때 화면이 밀리지 않게 / keeps the page still while writing with a finger */
  cursor:crosshair;
}
.write-actions{
  display:flex; gap:6px; justify-content:center;
  margin-top:14px; flex-wrap:wrap;
}

@media (max-width:600px){
  /* 휴대폰에서는 판을 카드 폭만큼 크게 / on phones the pad fills the card width */
  .write-stage{padding:12px;}
  .write-pad{margin:-8px -12px; padding:8px 12px;}
  .write-canvas-wrap{width:280px; height:280px;}
  .write-guide{font-size:210px; font-size:75cqw;}
  @supports (aspect-ratio:1/1){
    .write-canvas-wrap{width:100%; max-width:380px; height:auto; aspect-ratio:1/1;}
  }
}

/* ============================================================
   가나 쓰기 — 획순 안내 / 서체 비교
   Kana writing — stroke order / typeface comparison
   ============================================================ */
.stroke-guide{
  background:var(--paper); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; margin:0 0 12px;
  text-align:left;
}
.stroke-title{
  font-size:11.5px; font-weight:700; color:var(--teal);
  margin-bottom:6px;
}

/* 인쇄체 vs 손글씨체.
   손글씨 느낌을 내려고 다른 계열 글꼴을 우선 적용하고 살짝 기울인다.
   글꼴이 없는 기기에서도 크기·기울기 차이로 "같은 글자의 다른 모습"은 전달된다.
   Print vs. handwriting: a different font family, slightly slanted; without the font, size and slant still show "the
   same character, another look". */
.font-compare{
  display:flex; align-items:center; justify-content:center;
  gap:14px; margin:0 0 6px;
}
.font-sample{text-align:center;}
.font-sample-char{
  width:74px; height:74px; line-height:74px;
  border:1px solid var(--line); border-radius:10px;
  background:var(--surface); font-size:46px;
}
.font-sample-char.print{
  font-family:'Shippori Mincho','Noto Serif KR',serif;
}
.font-sample-char.hand{
  font-family:'Yu Gothic','Hiragino Maru Gothic ProN','Noto Sans JP','Noto Sans KR',sans-serif;
  transform:skewX(-4deg);
}
.font-sample-label{
  font-size:11px; color:var(--ink-soft); margin-top:5px; line-height:1.4;
}
.font-compare-eq{font-size:18px; color:var(--ink-soft);}

/* 문제 등록 폼의 일본어 입력 도구 / Japanese input tools on the question form */
.jp-input-tools{
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; margin-top:6px;
}

/* 나란한 입력칸 묶음: 넓은 화면은 같은 폭으로 한 줄, 휴대폰은 한 줄에 하나씩 같은 폭으로(2+1 처럼 들쭉날쭉하지 않게).
   Side-by-side fields: equal widths on one line on wide screens, one full-width field per line on phones
   (never a ragged 2+1 wrap). */
.form-row-group{display:flex; gap:10px; align-items:flex-start;}
.form-row-group > .form-row{flex:1 1 0; min-width:0;}
.form-row-group > .form-row > label{min-height:18px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.field-hint{margin:4px 0 0; font-size:11.5px;}
@media (max-width:600px){
  .form-row-group{display:block;}
  .form-row-group > .form-row > label{white-space:normal;}
}

/* 언어별 칸 표: 넓은 화면은 칸 폭을 고정한 표, 휴대폰은 언어마다 카드 한 장
   Per-language fields: a fixed-width table on wide screens, one card per language on phones */
.lang-table{table-layout:fixed;}
.lang-table td{padding:8px 10px; vertical-align:middle;}
.lang-table td input{padding:8px 9px;}
.lang-table td.lang-name{font-weight:700;}
@media (max-width:600px){
  .lang-table-wrap{border:none; background:none; border-radius:0; overflow:visible;}
  .lang-table{min-width:0;}
  .lang-table colgroup, .lang-table thead{display:none;}
  .lang-table, .lang-table tbody, .lang-table tr, .lang-table td{display:block; width:auto;}
  .lang-table tr{border:1px solid var(--line); border-radius:12px; background:var(--card); padding:10px 12px 6px; margin-bottom:10px;}
  .lang-table td{border:none; padding:0 0 8px;}
  .lang-table td.lang-name{color:var(--teal); font-size:14px; padding-bottom:8px;}
  .lang-table td[data-label]::before{content:attr(data-label); display:block; margin-bottom:4px; font-size:11.5px; font-weight:700; color:var(--ink-soft);}
}

/* ============================================================
   언어 선택
   Language selection
   ============================================================ */
.lang-list{display:flex; flex-direction:column; gap:6px;}
.lang-item{
  display:flex; align-items:center; gap:9px;
  padding:10px 12px; border:1px solid var(--line); border-radius:9px;
  background:var(--paper); cursor:pointer; font-weight:400;
}
.lang-item:hover{border-color:var(--teal);}
.lang-item input{width:auto; flex:0 0 auto;}
.lang-item input:checked ~ .lang-name{color:var(--teal); font-weight:700;}
.lang-name{font-size:13.5px; color:var(--ink);}
.lang-native{font-size:12px; color:var(--ink-soft);}
.lang-count{
  margin-left:auto; font-size:11px; color:var(--ink-soft);
  background:var(--card); border:1px solid var(--line);
  border-radius:20px; padding:2px 9px;
}

/* ============================================================
   홈 화면 언어 선택
   "내가 쓰는 언어 → 배우고 싶은 언어" 를 한 줄로 보여준다.
   Home language picker: "my language → language to learn" on one line.
   ============================================================ */

.lang-form{
  display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap;
}
.lang-field{flex:1; min-width:120px;}
.lang-field label{
  display:block; font-size:11.5px; color:var(--ink-soft);
  margin-bottom:4px; font-weight:700;
}
.lang-field select{width:100%;}
.lang-arrow{
  font-size:18px; color:var(--teal); padding-bottom:8px;
}
@media (max-width:600px){
  .lang-arrow{display:none;}      /* 세로로 쌓이면 화살표가 어색하다 / the arrow looks odd when stacked vertically */
  .lang-field{min-width:100%;}
}

/* ============================================================
   번역 편집 화면
   원문과 번역을 나란히 두어 무엇을 옮기는지 보이게 한다.
   Translation editor: source and translation side by side.
   ============================================================ */
.trans-orig-choices{display:flex; flex-wrap:wrap; gap:6px;}
.trans-chip{
  padding:5px 10px; font-size:12.5px;
  border:1px solid var(--line); border-radius:7px;
  background:var(--paper); color:var(--ink-soft);
}
.trans-chip.correct{
  border-color:var(--teal); color:var(--teal); font-weight:700;
}

/* ============================================================
   일괄 번역 검수 화면
   변환 전후를 나란히 두어 무엇이 어떻게 바뀌는지 보이게 한다.
   Batch translation review: before and after side by side.
   ============================================================ */
.lang-checks{display:flex; flex-wrap:wrap; gap:12px;}

.draft-card{border-left-width:3px; border-left-style:solid;}
.draft-ok{border-left-color:var(--teal);}
.draft-warn{border-left-color:var(--gold);}
.draft-blocked{border-left-color:var(--line); opacity:.75;}

.draft-head{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.draft-note{
  font-size:12.5px; line-height:1.5; color:var(--red);
  background:var(--paper); border-radius:7px;
  padding:7px 10px; margin:0 0 10px;
}

/* 전후 비교. 좁은 화면에서는 위아래로 쌓는다 / before/after; stacked on narrow screens */
.draft-compare{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:820px){ .draft-compare{grid-template-columns:1fr;} }

.draft-side{
  background:var(--paper); border:1px solid var(--line);
  border-radius:9px; padding:10px 12px;
}
.draft-label{
  font-size:11px; font-weight:700; color:var(--teal);
  margin-bottom:6px;
}
.draft-side textarea, .draft-side input{margin-bottom:6px;}

.draft-choices{display:flex; flex-direction:column; gap:5px; margin:6px 0;}
.draft-choice-row{display:flex; align-items:center; gap:7px;}
.draft-choice-orig{
  flex:0 0 76px; font-size:12.5px; color:var(--ink-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.draft-choice-row input{flex:1; margin:0;}


/* 번역기 목록 — 무엇이 설정됐고 한도가 어떤지 보여준다 / translator list — what is configured and its limits */
.translator-list{display:flex; flex-direction:column; gap:8px;}
.translator-row{
  padding:9px 11px; border-radius:8px;
  border:1px solid var(--line); background:var(--paper);
}
.translator-row.on{border-color:var(--teal); background:var(--card);}
.translator-row.off{opacity:.8;}
.translator-head{display:flex; align-items:center; gap:7px;}

/* 번역기 연결 테스트 결과 / translator connection test results */
.test-results{display:flex; flex-direction:column; gap:5px; margin-bottom:10px;}
.test-row{
  display:flex; gap:10px; align-items:baseline;
  padding:7px 10px; border-radius:7px; font-size:12.5px;
  border:1px solid var(--line); background:var(--paper);
  word-break:break-all;
}
.test-row strong{flex:0 0 110px;}
.test-row.ok{border-color:var(--teal);}
.test-row.ok strong{color:var(--teal);}
.test-row.fail{border-color:var(--red);}
.test-row.fail strong{color:var(--red);}
.test-row.off{opacity:.6;}

/* AI 프롬프트 · 조합 표 · 해설 초안 / AI prompt · pair table · explanation drafts */
.ai-prompt, .ai-result{
  width:100%; min-height:220px; font-family:ui-monospace, Consolas, monospace;
  font-size:12px; line-height:1.45; white-space:pre; overflow:auto;
}
.ai-result{min-height:180px;}
.pair-grid th, .pair-grid td{text-align:center; padding:6px 8px;}
.pair-grid tbody th{text-align:left;}
.pair-grid input[type=checkbox]{width:18px; height:18px;}
.guide-fields label{font-size:12px; color:var(--ink-soft); margin:6px 0 2px; display:block;}
.guide-choice{border-top:1px dashed var(--line); padding-top:6px; margin-top:6px;}
.guide-choice .guide-orig{font-weight:700; font-size:13px;}
.guide-choice .guide-orig.correct{color:var(--teal);}
/* 선택지 칸 이름(채워진 뒤에도 어느 칸인지 보이게) / choice field labels */
.guide-choice .gc-row{display:grid; grid-template-columns:72px 1fr; align-items:center; gap:6px; margin-top:3px;}
.guide-choice .gc-row > span{font-size:11.5px; color:var(--ink-soft);}

/* 정답 화면 해설 / explanation on the answer screen */

.guide-explanation{
  margin:12px 0 0; padding:9px 12px; border-radius:8px;
  background:var(--paper); border-left:3px solid var(--teal);
  font-size:13px; line-height:1.55;
}

/* 문제 폼 — 선택지별 발음·뜻 / question form — per-choice reading and meaning */
.choice-extra{display:flex; gap:6px; margin:-2px 0 8px 58px;}
.choice-extra input{flex:1; font-size:12.5px; padding:5px 8px;}
@media (max-width:600px){ .choice-extra{margin-left:0; flex-direction:column;} }

/* ============================================================
   프로필 설정 화면
   Profile settings page
   ============================================================ */
/* 화면에는 안 보이고 읽기 프로그램·비밀번호 관리자에게만 보인다. 입력칸 공통 규칙(width:100%)이
   이기지 못하게 모두 !important — 안 그러면 숨긴 칸이 화면 폭만큼 늘어나 가로 스크롤이 생긴다.
   Hidden on screen, kept for screen readers / password managers. Everything is !important so the
   generic input rule (width:100%) can't stretch it across the page and cause sideways scrolling. */
.visually-hidden{
  position:absolute !important; width:1px !important; height:1px !important; min-width:0 !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap !important; border:0 !important;
}
.avatar-editor{display:flex; gap:20px; align-items:flex-start;}
.avatar-actions{flex:1; min-width:0;}
.avatar-actions .hint{margin:0 0 12px;}
.avatar-form{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0;}
.avatar-form label.btn{margin:0; color:var(--ink); font-weight:600; cursor:pointer;}
.avatar-form label.btn:focus-within{outline:2px solid rgba(18,122,102,.45); outline-offset:1px;}
.avatar-form .btn[disabled]{opacity:.5; cursor:not-allowed;}
#avatarStatus{margin:8px 0 0; min-height:1em;}
.avatar-remove{margin:10px 0 0;}

.inline-form{display:flex; gap:8px; align-items:center;}
.inline-form input{flex:1; min-width:0;}
.narrow-form{max-width:420px;}
.narrow-form .hint{display:block; margin-top:4px;}

.info-list{
  display:grid; grid-template-columns:max-content 1fr; gap:8px 16px;
  margin:0; font-size:13.5px;
}
.info-list dt{color:var(--ink-soft); font-weight:600;}
.info-list dd{margin:0; word-break:break-all;}

@media (max-width:600px){
  .avatar-editor{flex-direction:column; align-items:center; text-align:center;}
  .avatar-form{justify-content:center;}
  .avatar-form .btn{flex:1 1 140px; text-align:center;}
  .avatar-actions .hint{text-align:center;}
  .inline-form{flex-direction:column; align-items:stretch;}
  .inline-form .btn{width:100%;}
  .narrow-form{max-width:none;}
  .narrow-form .btn{width:100%;}
}

/* ============================================================
   휴대폰 화면 다듬기
   Phone layout polish
   ============================================================ */
/* 단원 필터 단추 줄. 휴대폰에서는 두 줄로 흩어지지 않고 한 줄로 옆으로 민다.
   Unit filter chips: one sideways-scrolling row on phones instead of a ragged wrap. */
.chip-row{flex:1; display:flex; gap:6px; flex-wrap:wrap; min-width:0;}

@media (max-width:600px){
  .chip-row{
    flex:1 1 100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding:2px 0;
  }
  .chip-row::-webkit-scrollbar{display:none;}
  .chip-row > .btn{flex:0 0 auto;}

  /* 칸이 적은 표(순위·문의 등)는 옆으로 밀지 않고 폭에 맞춘다.
     Few-column tables (ranking, Q&A, ...) fit the width instead of scrolling sideways. */
  .table-fit table{min-width:0;}

  /* 어휘장: 한 단어 = 카드 한 장 / vocabulary: one word per card
       [🔊 단어]          [단원]
       읽기 · 발음
       뜻
       예문
       [수정] [삭제]          (관리자) */
  .table-cards{border:none; background:none; overflow:visible; border-radius:0;}
  .vocab-table{min-width:0;}
  .vocab-table thead{display:none;}
  .vocab-table tbody tr{
    display:grid; grid-template-columns:1fr auto;
    grid-template-areas:"word week" "read read" "pron pron" "mean mean" "admin admin";
    gap:2px 10px; align-items:center;
    background:var(--card); border:1px solid var(--line); border-radius:12px;
    padding:12px 14px; margin-bottom:8px;
  }
  .vocab-table tbody tr:last-child td{border-bottom:none;}
  .vocab-table td{padding:0; border:none; font-size:13px;}
  .vocab-table td:empty{display:none;}
  .vocab-table .v-word{grid-area:word; display:flex; align-items:center;}
  .vocab-table .v-word .jp{font-size:19px; font-weight:700;}
  .vocab-table .v-week{grid-area:week; justify-self:end;}
  .vocab-table .v-read{grid-area:read; color:var(--teal); font-size:14px; padding-left:26px;}
  .vocab-table .v-pron{grid-area:pron; color:var(--ink-soft); font-size:12px; padding-left:26px;}
  .vocab-table .v-mean{grid-area:mean; margin-top:6px; padding-top:8px; border-top:1px dashed var(--line);}
  .vocab-table .v-meaning{font-size:14.5px; font-weight:600;}
  .vocab-table .v-admin{grid-area:admin; margin-top:8px; display:flex; gap:6px;}
}

/* ============================================================
   오늘의 학습(홈) · 단원 코스 · 단원 화면 · 단어 카드 · 복습
   다른 언어 학습 앱처럼 "지금 할 일 하나"를 크게, 나머지는 한 줄짜리 큰 칸으로.
   Today (home), the unit course, unit page, flashcards, review: one big "do this now",
   everything else as large one-line rows that are easy to tap.
   ============================================================ */
.back-link{display:inline-block; font-size:13px; color:var(--ink-soft); text-decoration:none; padding:10px 12px 10px 0; margin:-10px 0 0;}
.back-link:hover{color:var(--teal);}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:22px 0 10px;}
.section-head h2{font-size:16px; margin:0;}
.section-head > a{display:inline-flex; align-items:center; min-height:40px; margin:-10px 0; padding:0 2px;}
.card .section-head{margin-top:0;}

.btn-block{display:block; width:100%; text-align:center;}
.stack-actions{display:grid; gap:8px; margin-top:16px;}
.stack-actions form{margin:0;}
.sub-nav{margin-bottom:14px;}

/* 단원 동그라미 / unit badge */
.unit-icon{
  width:44px; height:44px; flex:0 0 44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--paper-deep); color:var(--teal); border:1px solid var(--line);
  font-family:var(--jp-font); font-size:20px; font-weight:700; line-height:1;
}
.unit-icon.big{width:58px; height:58px; flex-basis:58px; font-size:27px;}

/* 오늘 / today */

.today-chips{display:flex; gap:6px; margin-bottom:12px;}
.chip{
  display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:18px;
  background:var(--card); border:1px solid var(--line); font-size:13px; font-weight:700; color:var(--ink-soft);
}
.chip-streak.on{background:var(--warm-bg); border-color:var(--warm-line); color:var(--warm-ink);}

.goal-ring{
  --p:0; width:58px; height:58px; flex:0 0 58px; border-radius:50%;
  background:conic-gradient(var(--teal) calc(var(--p) * 1%), var(--paper-deep) 0);
  display:grid; place-items:center; position:relative;
}
.goal-ring::before{content:''; position:absolute; inset:7px; border-radius:50%; background:var(--card);}
.goal-ring span{position:relative; font-size:12.5px; font-weight:800; color:var(--teal);}

/* 이어서 학습 / continue */
.hero-card{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:18px; margin-bottom:12px;
  border-radius:18px; text-decoration:none; color:var(--on-accent); background:var(--accent);
}
.hero-card:hover{filter:brightness(1.05);}
.hero-card .unit-icon{background:rgba(255,255,255,.14); color:inherit; border-color:rgba(255,255,255,.25);}
.hero-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.hero-label{font-size:12px; letter-spacing:0; opacity:.85; font-weight:700;}
.hero-title{font-size:18px; font-weight:800; line-height:1.3;}
.hero-step{font-size:13.5px; opacity:.9;}
.hero-card .progress-track{background:rgba(255,255,255,.2); margin-top:8px; height:6px;}
.hero-card .progress-fill{background:var(--marker);}
.hero-go{font-size:26px; line-height:1; opacity:.55; flex:0 0 auto;}

/* 코스 / the course */
.course-list{list-style:none; margin:0; padding:0;}
.course-list li{margin:0 0 8px;}
.course-item{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  text-decoration:none; color:var(--ink); transition:border-color .12s, box-shadow .12s;
}
.course-item:hover{border-color:var(--teal);}
.course-item.next{border-color:var(--teal); box-shadow:0 0 0 2px rgba(18,122,102,.15);}
.course-item.done .unit-icon{background:var(--teal); color:#fff; border-color:var(--teal);}
.course-item.empty{opacity:.55;}
.course-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.course-title{display:flex; align-items:center; gap:6px; font-weight:700; font-size:14.5px;}
.course-title > span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.course-meta{font-size:12px; color:var(--ink-soft);}
.progress-track.thin{height:5px; margin-top:4px;}
/* 진도 막대를 span 으로 넣은 곳(링크 안)도 막대로 보이게 / span progress bars inside links */
span.progress-track, span.progress-fill{display:block;}

/* 접힌 카드(홈의 언어 설정) / folded card */
details.fold > summary{
  list-style:none; cursor:pointer; display:flex; flex-direction:column; gap:2px; font-weight:700;
  min-height:44px; justify-content:center; margin:-10px 0; padding-right:24px;
}
details.fold > summary::-webkit-details-marker{display:none;}
details.fold > summary::after{content:'▾'; position:absolute; right:18px; top:16px; color:var(--ink-soft);}
details.fold{position:relative; margin-top:18px;}
details.fold[open] > summary{margin-bottom:12px;}
details.fold .lang-picker-title{display:none;}
.lang-picker-title{font-size:15px; margin:0 0 10px;}

/* 단원 화면 / unit page */
.unit-head{display:flex; align-items:center; gap:14px; margin-bottom:8px;}
.unit-head .page-title{margin:0 0 2px;}
.unit-head .page-desc{margin:0;}
.unit-head-text{min-width:0;}
.unit-progress{display:flex; align-items:center; gap:10px; margin:6px 0 16px;}
.unit-progress .progress-track{flex:1; margin:0;}
.step-list{display:grid; gap:10px; margin-bottom:16px;}
.step-list form{margin:0;}
.step-card{
  display:flex; align-items:center; gap:14px; width:100%; min-height:68px; padding:12px 16px;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  color:var(--ink); text-decoration:none; text-align:left; font-family:inherit; font-size:14px; cursor:pointer;
}
.step-card:hover{border-color:var(--teal);}
.step-card[disabled]{opacity:.5; cursor:not-allowed;}
.step-no{
  width:30px; height:30px; flex:0 0 30px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper-deep); color:var(--teal); font-weight:800; font-size:14px;
}
.step-card.done .step-no{background:var(--teal); color:#fff;}
.step-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.step-body strong{font-size:15px;}
.set-rows{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
.set-row{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); text-decoration:none; color:var(--ink);
}
.set-row:hover{border-color:var(--teal);}
.set-row-no{width:26px; height:26px; flex:0 0 26px; border-radius:8px; display:grid; place-items:center;
  background:var(--paper-deep); font-size:12.5px; font-weight:800; color:var(--ink-soft);}
.set-row.done .set-row-no{background:var(--teal); color:#fff;}
.set-row-body{flex:1; min-width:0; display:flex; flex-direction:column;}
.set-row-state{font-size:12px; color:var(--ink-soft); font-weight:700;}

/* ===== 문제 풀기 — 단원 카드 안의 유형별 갈래(묶음 대신) / practice: type groups inside unit cards (instead of sets) ===== */
.pr-filters{display:flex; flex-direction:column; gap:10px; margin:0 0 18px;}
.pr-filter{display:flex; align-items:flex-start; gap:10px;}
.pr-filter-label{flex:0 0 auto; min-width:34px; padding-top:7px; font-size:12.5px; font-weight:700; color:var(--muted);}
.pr-admin{display:flex; gap:6px; flex-wrap:wrap;}
.pr-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); align-items:start;}
.pr-unit{margin:0; padding:16px 16px 10px;}
.pr-unit-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.pr-unit-title{display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; color:var(--ink-strong);}
.pr-unit-ico{width:38px; height:38px; flex:0 0 38px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); font-family:var(--jp-font); font-size:19px; font-weight:700;}
.pr-unit-name{display:flex; flex-direction:column; min-width:0; line-height:1.3;}
.pr-unit-no{font-size:11.5px; font-weight:700; color:var(--accent);}
.pr-unit-name strong{font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pr-unit-title:hover strong{text-decoration:underline; text-underline-offset:3px;}
.pr-unit-count{flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums;}
.pr-track{margin:12px 0 6px;}
.pr-unit.done .pr-unit-ico{background:var(--accent); color:var(--on-accent);}
.pr-groups{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.pr-groups > li + li{border-top:1px solid var(--hair);}
.pr-group{display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 4px; text-decoration:none;
  color:var(--ink-strong); border-radius:10px;}
.pr-group:hover{background:var(--canvas);}
.pr-group:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.pr-glyph{width:32px; height:32px; flex:0 0 32px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--hair); background:var(--surface); color:var(--accent); font-family:var(--jp-font);
  font-size:15px; font-weight:700;}
.pr-group.done .pr-glyph{border-color:var(--accent); background:var(--accent); color:var(--on-accent);}
.pr-name{flex:1; min-width:0; display:flex; flex-direction:column; font-size:15px; font-weight:600; line-height:1.35;}
.pr-name strong{font-weight:700;}
.pr-name .hint{font-size:12.5px; font-weight:400; color:var(--muted);}
.pr-acc{flex:0 0 auto; font-size:12px; color:var(--muted);}
.pr-num{flex:0 0 auto; min-width:44px; text-align:right; font-size:13px; font-weight:700; color:var(--muted);
  font-variant-numeric:tabular-nums;}
.pr-group.done .pr-num{color:var(--accent);}
.pr-go{flex:0 0 auto; font-size:20px; line-height:1; color:var(--muted);}
.unit-qtypes .pr-group{padding:10px 4px;}
@media (max-width:880px){
  .pr-grid{grid-template-columns:1fr;}
  .pr-filter{flex-direction:column; gap:4px;}
  .pr-filter-label{padding-top:0;}
  .pr-acc{display:none;}
}
.word-chips{display:flex; flex-wrap:wrap; gap:6px;}
.word-chip{display:inline-flex; flex-direction:column; padding:6px 10px; border-radius:10px;
  background:var(--paper); border:1px solid var(--line); line-height:1.3;}
.word-chip .jp{font-size:15px;}
.unit-nav{display:flex; justify-content:space-between; gap:8px; margin-top:18px;}
.unit-nav .btn{max-width:48%; overflow:hidden; text-overflow:ellipsis;}
.unit-nav .btn:only-child{margin-left:auto;}

/* 단어 카드 / flashcards */

.fc-wrap{position:relative;}
.flashcard{
  position:relative; min-height:320px; padding:28px 20px; border-radius:22px;
  background:var(--card); border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(15,30,25,.1);
  display:flex; align-items:center; justify-content:center; text-align:center;
  cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:pan-y;
  transition:transform .22s ease, opacity .22s ease;
  outline:none;
}
.flashcard:focus-visible{box-shadow:0 0 0 3px rgba(18,122,102,.4);}
.flashcard .fc-back{display:none;}
.flashcard.flipped .fc-front{display:none;}
.flashcard.flipped .fc-back{display:block;}
.flashcard.swipe-right{transform:translateX(60%) rotate(8deg); opacity:0;}
.flashcard.swipe-left{transform:translateX(-60%) rotate(-8deg); opacity:0;}
.fc-word{font-size:46px; font-weight:700; line-height:1.25; word-break:keep-all;}
.fc-tap{margin-top:14px;}
.fc-word-sm{font-size:24px; font-weight:700;}
.fc-reading{font-size:19px; color:var(--teal); margin-top:4px;}
.fc-pron{margin-top:2px;}
.fc-meaning{font-size:24px; font-weight:800; margin-top:14px;}
.fc-example{margin-top:16px; padding-top:12px; border-top:1px dashed var(--line); font-size:14px;}
.fc-example .jp{font-size:16px;}
.fc-seen{position:absolute; top:14px; left:14px;}
.fc-speak{position:absolute; top:14px; right:14px; width:40px; height:40px; min-width:40px; font-size:16px; margin:0; z-index:2;}
.card-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;}
.card-actions .btn{min-height:54px; font-size:15.5px; font-weight:700;}
.btn-again{color:var(--red); border-color:#E3B7B0; background:var(--surface);}
.btn-again:hover{border-color:var(--red);}
.cards-help{text-align:center; margin:12px 0 0;}
.cards-done h2{font-size:18px;}

/* 복습 / review */
.review-hero{text-align:center; padding:22px 18px;}
.review-hero.due{border-color:var(--teal);}
.review-hero form{margin:10px 0 0;}
.review-num{font-size:56px; font-weight:800; color:var(--teal); line-height:1.1;}
.interval-steps{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.interval-steps li{padding:5px 10px; border-radius:14px; background:var(--paper); border:1px solid var(--line); font-size:12.5px;}
.interval-steps li + li::before{content:'→'; margin-right:6px; color:var(--ink-soft);}

/* ============================================================
   휴대폰에서 읽고 누르기 편하게
   · 글자 15px, 설명 13.5px
   · 단추 높이 44px 이상(작은 단추 38px) — 손가락으로 누르기 좋은 크기
   · 입력칸 16px — 그보다 작으면 아이폰이 입력할 때 화면을 확대한다
   Phones: 15px text, 44px+ tap targets, 16px inputs (smaller makes iOS zoom in on focus).
   ============================================================ */
@media (max-width:600px){
  body{font-size:15px;}
  .page-desc{font-size:13.5px; margin-bottom:16px;}
  .eyebrow{font-size:12px; letter-spacing:0; margin-bottom:4px;}
  .btn{min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:8px 14px;}
  .btn-sm{min-height:38px; padding:6px 12px; font-size:12.5px;}
  input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{font-size:16px; padding:11px 12px;}
  .choice-btn{min-height:52px;}
  .card{margin-bottom:12px;}
  .hero-card{padding:16px; gap:12px;}
  .hero-title{font-size:17px;}

  .flashcard{min-height:46vh;}
  .fc-word{font-size:42px;}
  .unit-head .page-title{font-size:21px;}

}

/* 하루 목표 고르기 / daily goal pills */
.goal-choices{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.goal-choice{position:relative; cursor:pointer; margin:0;}
.goal-choice input{position:absolute; opacity:0; pointer-events:none;}
.goal-choice span{display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px;
  border:1px solid var(--line); border-radius:12px; background:var(--surface); min-height:56px; justify-content:center;}
.goal-choice strong{font-size:18px;}
.goal-choice small{font-size:11.5px; color:var(--ink-soft);}
.goal-choice input:checked + span{border-color:var(--teal); background:rgba(18,122,102,.08); box-shadow:0 0 0 2px rgba(18,122,102,.2);}
.goal-choice input:focus-visible + span{outline:2px solid var(--teal); outline-offset:2px;}

/* 하단 탭이 다섯 칸이라 한 줄에 다 들어간다 — 글자 길이와 상관없이 같은 너비로 나눈다.
   글자가 긴 언어에서만 칸이 글자만큼 넓어지고, 그래도 넘치면 옆으로 민다.
   Five tabs share the width equally; a long label widens only its own tab, and an overflowing row scrolls. */
@media (max-width:880px){
  .tabbar-track > a{flex:1 0 0; min-width:max-content;}
}

/* hidden 속성은 언제나 숨긴다 — display 를 정한 규칙(.badge·.btn·.card)이 브라우저 기본 [hidden]{display:none} 을 이기므로.
   The hidden attribute always hides, even on elements whose rules set display. */
[hidden]{display:none !important;}

/* 넓은 화면(컴퓨터)에서는 코스를 두 줄로 놓아 한눈에 더 많이 보이게 한다.
   On wide (desktop) screens the course runs in two columns so more units fit on screen. */
@media (min-width:1100px){
  .course-list{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .course-list li{margin:0;}
}

/* ============================================================
   가나 획순 그림 / kana stroke-order pictures
   획마다 색(app.js 가 칠함), 시작점 번호 동그라미, 가운데 화살표. 흐린 밑그림(ghost)은 한 가지 연한 색.
   Coloured strokes (set by app.js), numbered start badges and mid-stroke arrows; the ghost is one pale colour.
   ============================================================ */
.kstroke-box{display:block; width:100%; aspect-ratio:1/1;}
.kstroke{display:block; width:100%; height:100%; overflow:visible;}
.kstroke .ks-under path{fill:none; stroke:var(--hair); stroke-width:4.2; stroke-linecap:round; stroke-linejoin:round;}
.kstroke .ks-stroke{fill:none; stroke:var(--ink); stroke-width:4.2; stroke-linecap:round; stroke-linejoin:round;}
.kstroke .ks-arrow{fill:var(--ink); stroke:#fff; stroke-width:.8; stroke-linejoin:round;}
.kstroke .ks-start{fill:var(--ink); stroke:#fff; stroke-width:.8;}
.kstroke .ks-badge{fill:var(--ink); stroke:#fff; stroke-width:1;}
.kstroke .ks-num{fill:#fff; font-size:7px; font-weight:800; font-family:system-ui,-apple-system,'Segoe UI',sans-serif;}
.kstroke.ghost .ks-stroke{stroke:var(--hair); stroke-width:7;}
.kstroke.ghost .ks-arrow{fill:color-mix(in srgb, var(--muted) 45%, var(--hair)); stroke:none;}
.kstroke.ghost .ks-start{fill:color-mix(in srgb, var(--muted) 45%, var(--hair)); stroke:none;}
.kstroke.ghost .ks-badge{fill:#fff; stroke:color-mix(in srgb, var(--muted) 45%, var(--hair)); stroke-width:.9;}
.kstroke.ghost .ks-num{fill:var(--muted); font-size:6px;}

/* 쓰기 연습: 획순 그림 + 설명 / writing page: picture + side text */
.stroke-view{display:flex; align-items:center; gap:14px;}
.stroke-view .kstroke-box{flex:0 0 132px; width:132px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:6px;}
.stroke-view-side{flex:1; min-width:0; text-align:left;}
.stroke-howto{margin:8px 0 0;}
.stroke-credit{margin:12px 0 0; font-size:11.5px;}
.stroke-credit a{color:inherit;}
/* 따라 쓰기 판의 흐린 밑그림 / ghost under the writing canvas */
.write-ghost{position:absolute; inset:0; padding:6%; pointer-events:none; user-select:none;}
.write-ghost:empty{display:none;}
.write-guide.replaced{display:none;}

/* 글자표의 쓰는 순서 / stroke section of the chart */
.stroke-section .section-head{margin-top:0; flex-wrap:wrap;}
.stroke-viewer{display:flex; align-items:center; gap:16px; margin-bottom:14px; padding:10px;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;}
.stroke-viewer .kstroke-box.big{flex:0 0 170px; width:170px; background:var(--surface); border-radius:12px; border:1px solid var(--line); padding:8px;}
.stroke-viewer-side{flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
.stroke-viewer-char{font-family:var(--jp-font); font-size:22px; font-weight:700;}
.stroke-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:6px;}
.stroke-cell{display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 2px 5px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; cursor:pointer; font-family:inherit; color:inherit;}
.stroke-cell:hover{border-color:var(--teal);}
.stroke-cell.on{border-color:var(--teal); box-shadow:0 0 0 2px rgba(18,122,102,.2);}
.stroke-cell.empty{visibility:hidden;}
.stroke-cell .kstroke-box{width:100%; max-width:96px;}
.stroke-cell-romaji{font-size:10.5px; color:var(--ink-soft); text-transform:lowercase;}
@media (max-width:600px){
  .stroke-view .kstroke-box{flex-basis:112px; width:112px;}
  .stroke-viewer .kstroke-box.big{flex-basis:140px; width:140px;}
  .stroke-grid{gap:4px;}
  .stroke-cell{padding:2px 1px 4px; border-radius:8px;}
  /* 작은 칸에서는 번호를 조금 키워 읽히게 / bigger numbers in the small cells */
  .stroke-cell .kstroke .ks-badge{r:6.2px;}
  .stroke-cell .kstroke .ks-num{font-size:8.4px;}
}
@media (prefers-reduced-motion: reduce){
  .kstroke .ks-stroke, .kstroke .ks-mark{animation:none !important;}
}

/* 최근 7일 막대 / last-7-days bars */
.week-card .section-head{margin-top:0;}
.week-bars{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; align-items:end;}
.week-bar{display:flex; flex-direction:column; align-items:center; gap:4px;}
.week-count{font-size:11.5px; color:var(--ink-soft); font-weight:700;}
.week-track{display:flex; align-items:flex-end; width:100%; max-width:34px; height:84px; background:var(--paper-deep);
  border-radius:8px; overflow:hidden;}
.week-fill{display:block; width:100%; background:rgba(18,122,102,.55); border-radius:8px 8px 0 0; min-height:0;}
.week-fill.met{background:var(--teal);}
.week-label{font-size:12px; color:var(--ink-soft);}
.week-bar.today .week-label{color:var(--teal); font-weight:800;}
.week-bar.today .week-track{box-shadow:0 0 0 2px rgba(18,122,102,.35);}

/* ============================================================
   한 화면에 집중 / focus on one screen
   · 푸는 화면(문제·퀴즈·단어 카드·결과)은 메뉴를 숨기고 가운데 한 줄로: 위에 ✕ 와 진행 막대, 가운데 문제,
     답을 내면 아래에서 올라오는 결과 칸에 "계속" 단추 — 위아래로 오가며 다음 단추를 찾지 않게.
   · 보기만 하는 단계(글자표·쓰는 순서·따라 쓰기)는 아래에 "다음 단계" 띠.
   · 홈은 "다음 할 것" 하나와 요약만, 코스 전체는 /course 로.
   Solving screens hide the menus and use one centred column: ✕ and a progress bar on top, the item
   in the middle, and after answering a bottom sheet with "continue", so nobody scrolls around looking
   for the next button. View-only steps get a "next step" strip; home shows only the next step.
   ============================================================ */
.focus-page{background:var(--paper);}
.focus-main{
  max-width:680px; margin:0 auto; width:100%;
  padding:6px 18px calc(28px + env(safe-area-inset-bottom));
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
}
.focus-top{
  display:flex; align-items:center; gap:12px; min-height:52px;
  position:sticky; top:0; z-index:5; background:var(--paper);
  padding-top:env(safe-area-inset-top);
}
.focus-top form{margin:0;}
.focus-close{
  width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:50%;
  font-size:22px; line-height:1; color:var(--ink-soft); text-decoration:none;
  border:none; background:none; cursor:pointer; font-family:inherit; padding:0;
}
.focus-close:hover,.focus-close:focus-visible{background:var(--paper-deep); color:var(--ink); outline:none;}
.focus-progress{flex:1; height:12px; background:var(--paper-deep); border-radius:8px; overflow:hidden;}
.focus-progress > span{display:block; height:100%; background:var(--teal); border-radius:8px; transition:width .3s;}
.focus-count{font-size:13px; font-weight:800; color:var(--ink-soft); min-width:42px; text-align:right; white-space:nowrap;}
.focus-body{flex:1; display:flex; flex-direction:column;}
.focus-center{flex:1; display:flex; flex-direction:column; justify-content:center; text-align:center; gap:10px;}
.focus-title{font-size:20px; font-weight:800; margin:0;}

/* 묶음 안 문항 점(눌러서 그 문항으로) / the set's items as dots (tap to jump) */
.q-dots{flex:1; display:flex; gap:4px; min-width:0;}
.q-dot{flex:1; min-width:6px; height:30px; display:flex; align-items:center; text-decoration:none;}
.q-dot::before{content:''; flex:1; height:10px; border-radius:6px; background:var(--paper-deep); transition:background .2s;}
.q-dot.done::before{background:color-mix(in srgb, var(--accent) 45%, var(--hair));}
.q-dot.current::before{background:var(--teal); height:12px; box-shadow:0 0 0 2px rgba(18,122,102,.25);}
.q-dot:focus-visible{outline:2px solid var(--teal); outline-offset:1px; border-radius:6px;}

.q-meta{display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:12.5px; color:var(--ink-soft); margin:2px 0 8px; min-height:28px;}
.q-meta .badge{margin:0;}
.q-type{display:inline-flex; align-items:center; gap:6px; font-weight:700;}
.q-help{border:none; background:none; color:var(--ink-soft); cursor:pointer; padding:0; font-size:12.5px;}
.q-help > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;}
.q-help > summary::-webkit-details-marker{display:none;}
.q-help > summary .i{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%;
  border:1px solid var(--line); font-size:11px; font-weight:800;}
.q-help p{margin:6px 0 0; font-weight:400; color:var(--ink-soft);}
.q-prompt{display:flex; align-items:flex-start; gap:8px; margin:6px 0 16px;}
.q-prompt .jp-lg{flex:1; font-size:19px; line-height:1.65;}
.focus-main .choice-list{margin:0;}
.focus-main .result-row{margin-bottom:8px;}
.result-note{display:block; flex-basis:100%; font-size:12.5px; color:var(--ink-soft); margin:2px 0 0 34px;}

/* 답을 낸 뒤 아래에서 올라오는 결과 칸 / the result sheet that slides up after answering */
.answer-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--card); border-top:4px solid var(--teal);
  box-shadow:0 -10px 28px rgba(0,0,0,.14); border-radius:18px 18px 0 0;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  animation:sheet-up .22s ease-out;
}
.answer-sheet.wrong{border-top-color:var(--red); background:var(--surface);}
.answer-sheet.late{border-top-color:var(--gold);}
.answer-sheet-inner{max-width:680px; margin:0 auto;}
.sheet-head{display:flex; align-items:center; gap:8px; font-size:18px; font-weight:800; margin:0 0 4px; color:var(--teal);}
.answer-sheet.wrong .sheet-head{color:var(--red);}
.answer-sheet.late .sheet-head{color:var(--warm-ink);}
.sheet-sub{font-size:14px; margin:0 0 6px;}
.sheet-more{max-height:26vh; overflow:auto; font-size:13.5px; color:var(--ink-soft); overscroll-behavior:contain;}
.sheet-more p{margin:4px 0;}
.sheet-actions{display:flex; gap:8px; margin-top:12px; align-items:center;}
.sheet-actions .btn-primary{flex:1; min-height:52px; font-size:16px; font-weight:800;}
.sheet-actions form{margin:0;}
.sheet-admin{margin-top:8px; font-size:12.5px;}
.sheet-admin > summary{cursor:pointer; color:var(--ink-soft);}
.sheet-admin .chip-row{margin-top:8px;}
.focus-main.has-sheet{padding-bottom:calc(320px + env(safe-area-inset-bottom));}
@keyframes sheet-up{from{transform:translateY(40%); opacity:.4;} to{transform:none; opacity:1;}}

/* 퀴즈(글자·단어) / quizzes */
.quiz-feedback{padding:9px 12px; border-radius:12px; font-weight:700; font-size:14px; margin:0 0 8px; text-align:center;}
.quiz-feedback.ok{background:var(--accent-soft); color:var(--teal);}
.quiz-feedback.bad{background:var(--wrong-soft); color:var(--red);}
.quiz-feedback.late{background:var(--warm-bg); color:var(--warm-ink);}
.focus-main .quiz-box{border:none; background:none; padding:4px 0 0;}
.focus-main .quiz-prompt{margin:18px 0 20px;}
.focus-main .quiz-options{grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px;}
.focus-main .quiz-options .btn{min-height:60px; font-size:18px; font-weight:700; border-radius:14px; white-space:normal;}
.quiz-sub{display:flex; justify-content:center; align-items:center; gap:10px; font-size:13px; color:var(--ink-soft);}

/* 결과 화면 / result screen */
.result-ring{
  --p:0; width:128px; height:128px; margin:0 auto 6px; border-radius:50%;
  background:conic-gradient(var(--teal) calc(var(--p) * 1%), var(--paper-deep) 0);
  display:grid; place-items:center; position:relative;
}
.result-ring::before{content:''; position:absolute; inset:12px; border-radius:50%; background:var(--paper);}
.result-ring span{position:relative; font-size:30px; font-weight:800; color:var(--teal);}
.result-ring.low{background:conic-gradient(var(--gold) calc(var(--p) * 1%), var(--paper-deep) 0);}
.result-ring.low span{color:var(--warm-ink);}
.focus-actions{display:grid; gap:8px; margin-top:auto; padding-top:16px;}
.focus-actions form{margin:0;}
.focus-actions .btn{min-height:50px;}
.focus-actions .btn-primary{font-size:16px; font-weight:800;}

/* 단어 카드는 남은 높이를 채운다 / flashcards fill the remaining height */
.focus-main .flashcard{min-height:44vh;}
.focus-main .cards-help{margin-top:10px;}

/* 보기만 하는 단계의 "다음 단계" 띠 / the "next step" strip on view-only steps */
.flow-bar{
  position:sticky; bottom:12px; z-index:40; display:flex; align-items:center; gap:10px;
  margin:18px 0 0; padding:10px 10px 10px 12px;
  background:var(--card); border:1.5px solid var(--teal); border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.flow-step{flex:0 0 auto; font-size:12px; font-weight:800; color:#fff; background:var(--teal); border-radius:10px; padding:3px 8px;}
.flow-label{flex:1; min-width:0; font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.flow-bar .btn{flex:0 0 auto;}
@media (max-width:880px){
  .flow-bar{bottom:calc(76px + env(safe-area-inset-bottom));}
}

/* 글자표 / 쓰는 순서 / 쓰기 연습 탭 / chart, stroke order and writing tabs */
.view-tabs{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; padding:4px; margin:0 0 14px;
  background:var(--paper-deep); border-radius:12px;}
.view-tabs a{display:flex; align-items:center; justify-content:center; min-height:40px; border-radius:9px;
  font-size:14px; font-weight:700; color:var(--ink-soft); text-decoration:none;}
.view-tabs a.on{background:var(--card); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.08);}

/* 홈: 한 화면 / home in one screen */

.goal-mini{display:inline-flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border-radius:22px;
  background:var(--card); border:1px solid var(--line); font-size:13px; font-weight:700; color:var(--ink-soft); text-decoration:none;}
.goal-mini .goal-ring{width:34px; height:34px; flex-basis:34px;}
.goal-mini .goal-ring::before{inset:5px;}
.goal-mini .goal-ring span{font-size:9.5px;}
.goal-mini.met{border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); color:var(--teal);}
.hero-cta{
  flex:1 0 100%; display:flex; align-items:center; justify-content:center; gap:6px; min-height:48px;
  margin-top:6px; border-radius:12px; background:var(--marker); color:var(--ink-strong); font-weight:800; font-size:16px;
}

.first-steps{list-style:none; margin:0 0 12px; padding:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  background:var(--card); border:1px dashed var(--line); border-radius:16px; counter-reset:fs;}
.first-steps li{display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; font-size:12.5px; color:var(--ink-soft);}
.first-steps li strong{font-size:13.5px; color:var(--ink);}
.first-steps li::before{counter-increment:fs; content:counter(fs); width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; background:var(--teal); color:#fff; font-weight:800; font-size:12.5px;}
.first-steps-note{text-align:center; font-size:12.5px; color:var(--ink-soft); margin:-4px 0 12px;}

.guest-lang{margin-top:12px;}
.guest-lang > summary{cursor:pointer; font-size:13px; color:var(--ink-soft); list-style:none;}
.guest-lang > summary::-webkit-details-marker{display:none;}
.guest-lang[open] > summary{margin-bottom:10px;}
.guest-lang .lang-picker-title{display:none;}  /* 접힘 제목과 겹친다 / the summary already says it */

/* 다음 할 것 안내 화면 / the next-step page */
.learn-card{text-align:center; padding:26px 20px 22px;}
.learn-card .unit-icon.big{margin:0 auto 10px;}
.learn-eyebrow{font-size:12.5px; font-weight:800; color:var(--teal); letter-spacing:0;}
.learn-title{font-size:22px; font-weight:800; margin:6px 0 4px;}
.learn-desc{font-size:14px; color:var(--ink-soft); margin:0 auto 16px; max-width:420px;}
.learn-bar{display:flex; gap:5px; max-width:260px; margin:0 auto 16px;}
.learn-bar span{flex:1; height:8px; border-radius:5px; background:var(--paper-deep);}
.learn-bar span.done{background:color-mix(in srgb, var(--accent) 45%, var(--hair));}
.learn-bar span.now{background:var(--teal);}
.learn-card form{margin:0;}
.learn-card .btn-primary{min-height:54px; font-size:17px; font-weight:800;}
.learn-links{display:flex; justify-content:center; gap:16px; margin-top:6px; font-size:13px;}
.learn-links a{display:inline-flex; align-items:center; min-height:40px; padding:0 4px;}

/* 단원 화면 / unit page */
.unit-cta{margin:0 0 14px;}
.unit-cta form{margin:0;}
.unit-cta .btn{min-height:52px; font-size:16px; font-weight:800;}
.step-card.now{border-color:var(--teal); box-shadow:0 0 0 2px rgba(18,122,102,.18);}
.step-card.now .step-no{background:var(--gold); color:#fff;}
details.more{margin:0 0 10px; padding:0; overflow:hidden;}
details.more > summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:14px 16px; font-weight:700; font-size:14.5px;}
details.more > summary::-webkit-details-marker{display:none;}
details.more > summary::after{content:'▾'; color:var(--ink-soft); transition:transform .15s;}
details.more[open] > summary::after{transform:rotate(180deg);}
details.more > .more-body{padding:0 16px 14px;}

/* 코스 화면 / course page */
.course-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px;}
.course-head .page-title{margin:0;}

/* 복습: 접을 수 있는 설명 / review: foldable explanations */
.review-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px;}
.review-stats > div{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px; text-align:center;}
.review-stats .stat-num{font-size:20px;}
.review-hero form + form{margin-top:8px;}

@media (max-width:600px){
  .focus-main{padding:4px 14px calc(22px + env(safe-area-inset-bottom));}
  .q-prompt .jp-lg{font-size:18px;}
  .focus-main .quiz-options .btn{min-height:56px; font-size:17px;}
  .learn-card{padding:22px 16px 18px;}
  .learn-title{font-size:20px;}
  .first-steps{padding:10px 8px;}
  .result-ring{width:112px; height:112px;}
}

/* ============================================================
   문의 공개 범위 / QnA visibility
   ============================================================ */
.vis-choice{border:0; padding:0; margin:0 0 14px;}
.vis-choice legend{font-weight:700; font-size:14px; margin-bottom:6px;}
.vis-option{display:flex; align-items:flex-start; gap:10px; padding:10px 12px; margin-bottom:6px;
  border:1.5px solid var(--line); border-radius:12px; cursor:pointer; background:var(--card);}
.vis-option:has(input:checked){border-color:var(--teal); box-shadow:0 0 0 2px rgba(18,122,102,.15);}
.vis-option input{margin-top:3px;}
.vis-option strong{display:block; font-size:14.5px;}
.vis-option small{display:block; color:var(--ink-soft); font-size:12.5px;}
.badge-lock{background:var(--paper-deep); color:var(--ink);}

/* ============================================================
   말하기 연습 — 점검 칩·단계·큰 마이크 단추·결과 칸
   Speaking practice - check chips, stages, the big mic button, the result sheet
   ============================================================ */
.speak-page .focus-body{align-items:center; text-align:center;}
.speak-check{margin:2px 0 10px;}
.check-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; width:100%; padding:0; border:0;
  background:none; cursor:pointer; font:inherit;}
.check-chip{display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:20px; font-size:12.5px;
  border:1px solid var(--line); background:var(--card); color:var(--ink-soft);}
.check-chip .ck-state, .check-list .ck-state{font-style:normal; font-weight:800;}
.check-chip.ok{border-color:color-mix(in srgb, var(--accent) 45%, var(--hair)); color:var(--teal);}
.check-chip.bad{border-color:var(--red); color:var(--red); background:var(--wrong-soft);}
.check-chip.unk{border-color:var(--gold);}
.check-panel{margin-top:10px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--card); text-align:left;}
.check-panel h2{font-size:15px; margin:0 0 8px;}
.check-list{list-style:none; margin:0 0 10px; padding:0; display:grid; gap:8px;}
.check-list li{display:flex; gap:10px; align-items:flex-start;}
.check-list li > b{flex:0 0 24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:13px;
  background:var(--paper-deep);}
.check-list li.ok > b{background:var(--teal); color:#fff;}
.check-list li.bad > b{background:var(--red); color:#fff;}
.check-list li.unk > b{background:var(--gold); color:#fff;}
.check-list strong{font-size:14px;}
.check-list .ck-detail{margin:2px 0 0;}
.mic-test{display:grid; gap:6px;}
.level-meter{height:8px; border-radius:5px; background:var(--paper-deep); overflow:hidden;}
.level-meter span{display:block; height:100%; width:0; background:var(--teal); transition:width .08s;}

.speak-steps{list-style:none; display:flex; justify-content:center; gap:6px; margin:0 0 12px; padding:0;}
.speak-steps li{display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--ink-soft); padding:3px 9px;
  border-radius:16px; background:var(--paper-deep);}
.speak-steps li span{width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:11px;
  font-weight:800; background:var(--card);}
.speak-steps li em{font-style:normal;}
.speak-steps li.now{background:var(--teal); color:#fff;}
.speak-steps li.now span{color:var(--teal);}
.speak-steps li.done{color:var(--teal);}
.speak-steps li.done span::before{content:'✓';}
.speak-steps li.done span{font-size:0;}
.speak-steps li.done span::before{font-size:11px;}

.speak-word{margin:0 0 14px;}
.speak-word-main{font-family:var(--jp-font); font-size:40px; font-weight:700; line-height:1.2;
  word-break:keep-all;}
.speak-reading{font-size:18px; margin:4px 0 2px;}
.speak-listen{display:flex; justify-content:center; gap:8px; margin-top:8px;}

.speak-mic{display:flex; flex-direction:column; align-items:center; gap:6px; margin:4px 0 6px;}
.mic-btn{--size:132px; position:relative; width:var(--size); height:var(--size); border-radius:50%; border:0;
  background:var(--teal); color:#fff; cursor:pointer; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; box-shadow:0 8px 20px rgba(18,122,102,.25); font:inherit; padding:0 10px;}
.mic-btn:disabled{cursor:default;}
.mic-ring{--left:0; position:absolute; inset:-7px; border-radius:50%; pointer-events:none;
  background:conic-gradient(var(--red) calc(var(--left) * 360deg), transparent 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));}
.mic-face{font-size:34px; line-height:1;}
.mic-label{font-size:13px; font-weight:800; line-height:1.25;}
.mic-btn[data-state="listening"], .mic-btn[data-state="hearing"]{background:var(--red); box-shadow:0 8px 22px rgba(181,69,58,.35);}
.mic-btn[data-state="hearing"]{animation:mic-breathe 1s ease-in-out infinite;}
.mic-btn[data-state="processing"], .mic-btn[data-state="grading"]{background:var(--muted);}
@keyframes mic-breathe{0%,100%{transform:scale(1);} 50%{transform:scale(1.05);}}
@media (prefers-reduced-motion: reduce){ .mic-btn[data-state="hearing"]{animation:none;} }
.mic-status{min-height:20px; margin:4px 0 0; font-size:14px; font-weight:700; color:var(--ink);}
.speak-howto{margin:0; max-width:340px;}
.speak-skip{margin:6px 0 0;}
.link-btn{border:0; background:none; color:var(--ink-soft); text-decoration:underline; cursor:pointer; font:inherit; font-size:13px; padding:6px;}

.speak-error{width:100%; margin:8px 0; padding:12px 14px; border:1.5px solid var(--red); border-radius:14px;
  background:var(--wrong-soft); text-align:left;}
.speak-error-msg{margin:0 0 10px; font-weight:700; color:var(--red);}
.speak-error-actions{display:flex; flex-wrap:wrap; gap:8px;}

.speak-record{width:100%; margin:8px 0; padding:14px; border:1px dashed var(--line); border-radius:14px; background:var(--card);}
.speak-record-title{font-weight:800; margin:0 0 4px;}
.speak-record-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:10px 0 6px;}

.speak-result{position:fixed; left:0; right:0; bottom:0; z-index:60; max-height:82vh; overflow-y:auto;
  padding:16px 18px calc(16px + env(safe-area-inset-bottom)); background:var(--paper);
  border-top:3px solid var(--teal); border-radius:20px 20px 0 0; box-shadow:0 -10px 30px rgba(0,0,0,.15);
  animation:sheet-up .22s ease-out;}
.speak-result > *{max-width:560px; margin-left:auto; margin-right:auto;}
.speak-result-head{display:flex; align-items:center; gap:14px; margin-bottom:10px;}
.speak-result-head .result-ring{flex:0 0 auto; width:96px; height:96px; margin:0;}
.speak-result-head .result-ring span{font-size:26px;}
.speak-feedback{font-weight:800; font-size:16px; margin:0 0 2px;}
.result-ring.bad{background:conic-gradient(var(--red) calc(var(--p) * 1%), var(--paper-deep) 0);}
.result-ring.bad span{color:var(--red);}
.diff-box.no-kr .diff-char i{display:none;}
.diff-legend{display:flex; justify-content:center; gap:8px; margin:0 0 8px; font-size:12px;}
.diff-legend .lg{padding:2px 8px; border-radius:10px;}
.lg-match{color:var(--teal); background:var(--accent-soft);}
.lg-wrong{color:var(--red); background:var(--wrong-soft);}
.lg-missing{color:var(--ink-soft); background:var(--paper-deep); text-decoration:line-through;}
.speak-alts{text-align:center; margin:0 0 8px;}
.speak-result-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:6px 0 0;}
@media (max-width:600px){
  .speak-word-main{font-size:34px;}
  .mic-btn{--size:120px;}
}

/* ============================================================
   언어별 글자표·발음 규칙·듣고 고르기 / per-language letters, rules and quiz
   ============================================================ */
.letters-langs{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px;}
.letters-langs .chip{text-decoration:none; padding:5px 12px; border-radius:16px; border:1px solid var(--line);
  background:var(--card); color:var(--ink-soft); font-size:13px;}
.letters-langs .chip.on{background:var(--teal); border-color:var(--teal); color:#fff; font-weight:700;}
.letters-group h2{font-size:16px; margin:0 0 10px;}
.letter-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px;}
/* .spk(작은 동그란 듣기 단추) 모양을 칸 전체 단추로 되돌린다 / undo the small round .spk look for whole-cell buttons */
.letter-cell.spk{display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:2px;
  width:auto; height:auto; min-width:0; min-height:96px; margin:0; padding:10px 6px; flex:initial; vertical-align:top;
  border:1px solid var(--line); border-radius:12px; background:var(--paper); cursor:pointer; font:inherit; font-size:inherit; color:var(--ink);}
.letter-cell.spk:hover, .letter-cell.spk:focus-visible{background:var(--card); border-color:var(--teal); box-shadow:0 0 0 2px rgba(18,122,102,.15);}
.letter-cell.spk:active{transform:scale(.97);}
.letter-glyph{font-size:28px; font-weight:700; line-height:1.15;}
.letter-name{font-size:12.5px; font-weight:700; color:var(--teal);}
.letter-sound{font-size:12px; color:var(--ink-soft);}
.letter-ex{font-size:12px; color:var(--ink);}
.letter-ex small{color:var(--ink-soft);}
.letters-next{margin:14px 0 0; text-align:center;}
.rule-card h2{display:flex; align-items:center; gap:8px; font-size:16px; margin:0 0 6px;}
.rule-no{flex:0 0 24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px;
  background:var(--teal); color:#fff;}
.rule-examples{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px;}
.rule-examples li{display:flex; align-items:center; gap:8px;}
.rule-ex{font-size:16px; font-weight:600;}
.lq{text-align:center;}
.lq-top{display:flex; justify-content:center; gap:10px; font-weight:700; color:var(--ink-soft);}
.lq-ask{margin:8px 0;}
.lq-play{font-size:18px; min-height:52px; padding:0 22px; margin:4px 0 12px;}
.lq-options{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 10px;}
.lq-opt{font-size:26px; font-weight:700; min-height:68px;}
.lq-opt.is-right{background:var(--accent-soft); border-color:var(--teal); color:var(--teal);}
.lq-opt.is-wrong{background:var(--wrong-soft); border-color:var(--red); color:var(--red);}
.lq-feedback{min-height:22px; font-weight:700; margin:0 0 10px;}
.lq-feedback.ok{color:var(--teal);}
.lq-feedback.bad{color:var(--red);}
@media (max-width:600px){
  .letter-grid{grid-template-columns:repeat(auto-fill, minmax(78px, 1fr));}
  .letter-glyph{font-size:24px;}
}

/* ============================================================
   시안에서 보충한 것 — 브랜드·알림 벨·인사 카드·학습 포인트·국기·추천 과정·바로가기
   From the design mock - brand, bell, greeting, points, flags, recommended course, shortcuts
   ============================================================ */
.brand-link{display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none;}
.brand-logo{width:34px; height:34px; flex:0 0 auto; color:var(--accent);}
.brand-text{display:flex; flex-direction:column; min-width:0;}
.brand-name{font-size:21px; font-weight:800; letter-spacing:.3px; line-height:1.1;}
.brand-text small{margin-top:3px; letter-spacing:.4px;}
@media (max-width:880px){
  .brand-logo{width:28px; height:28px;}
  .brand-name{font-size:18px;}
}

.topbar-account{display:flex; align-items:center; gap:8px;}
.alerts-menu{position:relative;}
.alerts-menu > summary{list-style:none; cursor:pointer; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--card); border:1px solid var(--line); font-size:17px; position:relative; -webkit-tap-highlight-color:transparent;}
.alerts-menu > summary::-webkit-details-marker{display:none;}
.alerts-dot{position:absolute; top:5px; right:6px; width:9px; height:9px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 2px var(--card);}
.alerts-dropdown{position:absolute; right:0; top:calc(100% + 10px); width:280px; max-width:calc(100vw - 24px); z-index:90;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:10px;
  box-shadow:0 14px 34px rgba(15,30,25,.2), 0 2px 6px rgba(15,30,25,.08);}
.alerts-head{font-weight:800; margin:2px 6px 8px;}
.alerts-list{list-style:none; margin:0; padding:0; display:grid; gap:4px;}
.alerts-list .hint{padding:6px;}
.alerts-item{display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--ink); background:var(--paper); font-size:14px;}
.alerts-item:hover{background:var(--paper-deep);}
.alerts-due::before{content:'復 ';  color:var(--red); font-weight:800;}
.alerts-qna::before{content:'💬 ';}
.alerts-goal::before{content:'🔥 ';}
.alerts-empty{margin:4px 6px;}

.greet-row{display:grid; grid-template-columns:1fr auto; gap:10px; margin:0 0 12px;}
.greet-card{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px;
  background:var(--card); border:1px solid var(--line);}
.greet-avatar{width:46px; height:46px; flex:0 0 auto; font-size:18px;}
.greet-body{min-width:0;}
.greet-name{margin:0; font-size:17px; font-weight:800;}
.greet-sub{margin:1px 0 6px; font-size:13px; color:var(--ink-soft);}
.greet-card .today-chips{margin:0; flex-wrap:wrap;}
.points-card{display:flex; flex-direction:column; justify-content:center; gap:2px; padding:12px 16px; min-width:150px;
  border-radius:16px; text-decoration:none; color:var(--on-accent); background:var(--accent);}
.points-label{font-size:12.5px; font-weight:700; opacity:.92;}
.points-num{font-size:24px; font-weight:800; letter-spacing:.3px;}
.points-hint{font-size:11px; opacity:.75;}
/* 포인트 칩은 휴대폰에서만(포인트 카드 대신) / the points chip replaces the points card on phones */
.chip-points{display:none; text-decoration:none; min-height:36px;}
@media (max-width:600px){
  .greet-row{grid-template-columns:1fr;}
  .points-card{display:none;}
  .chip-points{display:inline-flex; align-self:center;}
}

/* 복습 먼저 권하기(홈) / review-first suggestion on the home page */
.review-first{display:flex; align-items:center; gap:12px; padding:14px 16px; margin:0 0 12px; border-radius:16px;
  background:var(--warm-bg); border:1px solid var(--warm-line); color:var(--ink); text-decoration:none;}
.review-first:hover{border-color:var(--warm-line);}
.rf-ico{width:42px; height:42px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  background:var(--marker); color:var(--warm-ink); font-family:var(--jp-font); font-size:20px; font-weight:700;}
.rf-body{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
.rf-body .hint{margin:0;}
.rf-cta{font-weight:800; color:var(--warm-ink); white-space:nowrap;}
@media (max-width:420px){
  .review-first{flex-wrap:wrap;}
  .rf-cta{flex-basis:100%; text-align:right;}
}
.learn-review-first{margin-top:10px; border-color:var(--warm-line); background:var(--warm-bg); color:var(--warm-ink);}

/* 다시 풀기 안내(퀴즈) / retry-pass note in quizzes */
.quiz-retry-note{margin:0 0 10px; padding:8px 12px; border-radius:12px; background:var(--warm-bg); border:1px solid var(--warm-line);
  color:var(--warm-ink); font-size:13.5px; font-weight:700; text-align:center;}
.focus-count.retry{color:var(--warm-ink);}

/* 카드 10장마다 쉬어 가기 / flashcard checkpoint */
.cards-check{text-align:center;}
.cards-check h2{margin:4px 0 6px;}

.slogan{margin:4px 0 6px;}
.slogan-title{margin:0; font-size:24px; font-weight:800; color:var(--teal); font-family:var(--jp-font);}
.slogan-sub{margin:2px 0 0; font-size:15px; color:var(--ink-soft);}

.hero-card{position:relative; overflow:hidden;}
.hero-card > *{position:relative;}
.hero-card > .hero-art{position:absolute; right:-6px; bottom:-4px; width:180px; height:96px; opacity:.22; pointer-events:none;
  background:no-repeat right bottom / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 96'%3E%3Ccircle cx='132' cy='30' r='14' fill='%23fff'/%3E%3Cpath d='M0 96 L48 40 L78 70 L112 26 L180 96 Z' fill='%23fff'/%3E%3Cpath d='M100 42 L112 26 L124 42 L116 38 L112 44 L108 38 Z' fill='%23cfe3dc'/%3E%3C/svg%3E");}

.lang-row{display:flex; gap:6px; margin:4px 0 6px; overflow-x:auto; scrollbar-width:none; padding:2px;}
.lang-row::-webkit-scrollbar{display:none;}
.lang-row > *{flex:1 0 56px; min-width:56px;}
.lang-pick{margin:0;}
.lang-btn{width:100%; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px; border-radius:14px;
  border:1px solid var(--line); background:var(--card); color:var(--ink); font:inherit; cursor:pointer; text-decoration:none;}
.lang-btn.on{border-color:var(--teal); box-shadow:0 0 0 2px rgba(18,122,102,.18); background:var(--accent-soft);}
.lang-btn.is-display{opacity:.7;}
.flag-wrap{width:36px; height:36px; border-radius:50%; overflow:hidden; display:block; box-shadow:0 1px 3px rgba(0,0,0,.18);}
.flag-wrap .flag{width:100%; height:100%; display:block;}
.lang-name{font-size:12px; font-weight:700; white-space:nowrap;}
.lang-sub{font-size:10px; color:var(--ink-soft); white-space:nowrap;}
@media (max-width:600px){
  .flag-wrap{width:32px; height:32px;}
  .lang-btn{padding:7px 2px; border-radius:12px;}
  .lang-name{font-size:11.5px;}
}

.home-sec{margin:16px 0 8px;}
.home-sec a{font-size:13px; text-decoration:none;}
.course-card{display:flex; align-items:center; gap:12px; padding:12px; border-radius:16px; text-decoration:none; color:var(--ink);
  background:var(--card); border:1px solid var(--line); margin-bottom:10px;}
.course-card:hover{border-color:var(--teal);}
.course-art{flex:0 0 auto; width:76px; height:58px; border-radius:12px; display:grid; place-items:center;
  font-size:30px; font-weight:800; font-family:var(--jp-font);
  background:linear-gradient(135deg,var(--accent-soft),color-mix(in srgb, var(--accent) 22%, var(--surface))); color:var(--teal);}
.course-card[data-lang="ja"] .course-art{background:linear-gradient(135deg,#fff 40%,#F6D3D8); color:#BC002D;}
.course-card[data-lang="ko"] .course-art{background:linear-gradient(135deg,#FCE3E5,#DCE6F7); color:#0047A0;}
.course-card[data-lang="en"] .course-art{background:linear-gradient(135deg,#DDE3F2,#F6D9DD); color:#012169;}
.course-card[data-lang="es"] .course-art{background:linear-gradient(180deg,#F7D7D8 20%,#FBEAB0 20%,#FBEAB0 80%,#F7D7D8 80%); color:#AA151B;}
.course-card[data-lang="zh"] .course-art{background:linear-gradient(135deg,#F9D3CF,#FBEBB2); color:#DE2910;}
.course-card[data-lang="vi"] .course-art{background:linear-gradient(135deg,#F9D3CF,#FDF3A8); color:#DA251D;}
.course-card-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.course-card-body strong{font-size:15.5px;}
.course-card-progress{display:flex; align-items:center; gap:8px; margin-top:4px;}
.course-card-progress .progress-track{flex:1;}

.sc-ico{font-size:22px;}
/* 넓은 화면: 오른쪽 위에 떠 있는 벨·계정 단추와 겹치지 않게 / wide screens: clear the floating bell and avatar */
@media (min-width:881px){
  .home .greet-row{margin-top:44px;}
}

/* ============================================================
   언어교환 게시판 / language-exchange board
   글 목록(카드) · 글 보기 · 댓글 · 신고 접기 · 차단 목록 · 관리자 신고 처리
   Post cards, detail, comments, folding report form, block list, admin reports
   ============================================================ */
.exchange .ex-safety{background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 25%, var(--hair)); border-radius:14px; padding:10px 14px; margin:8px 0 12px; font-size:13px;}
.ex-safety summary{cursor:pointer; font-weight:700; color:var(--teal); padding:8px 0; margin:-8px 0;}
.ex-safety a{display:inline-block; padding:6px 0;}
.ex-safety ul{margin:8px 0 6px; padding-left:18px; line-height:1.75;}
.ex-safety a{font-size:12.5px;}

.ex-filter{display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 10px; padding:12px; margin-bottom:10px;}
.ex-filter label{display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--ink-soft); font-weight:600;}
.ex-filter select{min-width:120px;}
.ex-filter .ex-check{flex-direction:row; align-items:center; gap:6px; padding-bottom:6px;}
.ex-arrow{color:var(--ink-soft); font-weight:700; padding:0 2px;}
.ex-filter > .ex-arrow{padding-bottom:8px;}

.ex-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.ex-item{padding:0; margin:0;}
.ex-item.is-closed{opacity:.72;}
.ex-link{display:flex; flex-direction:column; gap:4px; padding:12px 14px; color:var(--ink); text-decoration:none; border-radius:inherit;}
.ex-link:hover{background:var(--canvas);}
.ex-link:focus-visible{outline:3px solid rgba(18,122,102,.45); outline-offset:-3px;}
.ex-langs{display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:12.5px; font-weight:700; margin:0;}
.ex-langs .flag{width:20px; height:20px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.12); flex:0 0 auto;}
.ex-title{font-size:15.5px; line-height:1.4; overflow-wrap:anywhere;}
.ex-excerpt{font-size:13px; color:var(--ink-soft); line-height:1.5; overflow-wrap:anywhere;}
.ex-meta{font-size:12px; color:var(--ink-soft); margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px;}
.badge-closed{background:var(--paper-deep); color:var(--ink-soft);}
.badge-mine{background:var(--accent-soft); color:var(--teal); border-color:color-mix(in srgb, var(--accent) 25%, var(--hair));}
.ex-empty{margin-top:4px;}

.ex-back{margin-bottom:10px;}
.ex-post{padding:16px;}
.ex-post-title{font-size:20px; margin:8px 0 4px; line-height:1.35; overflow-wrap:anywhere;}
.ex-body{white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; margin:10px 0; font-size:14px;}
.ex-actions{display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px; margin-top:8px;}
.ex-actions form.inline, form.inline{display:inline; margin:0;}
.ex-hidden-note{background:var(--wrong-soft); border:1px solid color-mix(in srgb, var(--wrong) 30%, var(--hair)); color:var(--red); border-radius:12px; padding:10px 12px; font-size:13px; font-weight:600;}
.btn-link{background:none; border:0; padding:2px 4px; font:inherit; font-size:12px; color:var(--ink-soft); cursor:pointer; text-decoration:underline;}
.btn-link:hover{color:var(--red);}

/* 신고: 눌러야 펼쳐지는 작은 폼 / report: a small form that unfolds */
.ex-report{display:inline-block;}
.ex-report > summary{list-style:none; cursor:pointer;}
.ex-report > summary::-webkit-details-marker{display:none;}
.ex-report[open]{display:block; width:100%;}
.ex-report-form{display:flex; flex-direction:column; gap:6px; margin-top:8px; padding:10px; border:1px solid var(--line);
  border-radius:12px; background:var(--warm-bg); max-width:420px;}
.ex-report-form label{display:flex; flex-direction:column; gap:3px; font-size:12px; font-weight:600;}
.ex-report-form textarea{min-height:56px;}

.ex-comments{margin-top:16px;}
.ex-comments h2{font-size:15px; margin:0 0 8px;}
.ex-comment-list{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:8px;}
.ex-comment{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; scroll-margin-top:80px;}
.ex-comment:target{border-color:var(--teal); box-shadow:0 0 0 2px rgba(18,122,102,.18);}
.ex-comment.is-hidden{opacity:.6; border-style:dashed;}
.ex-comment .ex-body{margin:6px 0 2px; font-size:13.5px;}
.ex-comment .ex-actions{margin-top:2px; gap:2px;}
.ex-write{display:flex; flex-direction:column; gap:6px; padding:12px; scroll-margin-top:80px;}
.ex-write label{font-weight:700; font-size:13px;}
.ex-write textarea{min-height:76px;}
.ex-write-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px;}

/* 글쓰기 / the form */
.ex-form-card{max-width:640px;}
.ex-lang-pick{display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px 10px;}
.ex-lang-pick .form-row{flex:1 1 180px; margin-bottom:10px;}
.ex-lang-pick > .ex-arrow{padding-bottom:20px;}
.ex-levels{border:0; padding:0; display:flex; flex-wrap:wrap; gap:6px;}
.ex-levels legend{font-size:13px; font-weight:600; margin-bottom:6px; padding:0;}
.ex-level{display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border:1px solid var(--line); border-radius:999px;
  background:var(--card); font-size:13px; cursor:pointer;}
.ex-level:has(input:checked){border-color:var(--teal); background:var(--accent-soft); font-weight:700;}
.ex-agree{background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 25%, var(--hair)); border-radius:12px; padding:10px 12px; margin:6px 0 14px; font-size:13px;}
.ex-agree ul{margin:0 0 8px; padding-left:18px; line-height:1.7;}
.ex-check{display:inline-flex; align-items:center; gap:6px; font-weight:700; cursor:pointer;}

/* 차단 목록 · 미성년자 안내 / block list, under-18 page */
.ex-block-list{list-style:none; margin:0; padding:4px 14px;}
.ex-block-list li{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line);}
.ex-block-list li:last-child{border-bottom:0;}
.ex-block-name{flex:1; font-weight:700; overflow-wrap:anywhere;}
.ex-adults{text-align:center; padding:24px 18px; max-width:560px;}
.ex-adults-ico{font-size:40px; margin:0;}
.ex-adults .chip-row{justify-content:center; margin-top:12px;}

/* 관리자 신고 처리 / admin reports */
.report-list{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
.report-item{padding:12px 14px; margin:0;}
.report-who{font-size:13px; margin:6px 0;}
.report-text{white-space:pre-wrap; overflow-wrap:anywhere; margin:6px 0; padding:8px 12px; border-left:3px solid var(--red);
  background:var(--canvas); font-size:13px; border-radius:0 8px 8px 0;}
.report-detail{font-size:12.5px; color:var(--ink-soft); margin:4px 0;}

@media (max-width:600px){
  .ex-filter{padding:10px;}
  .ex-filter label{flex:1 1 40%;}
  .ex-filter select{min-width:0; width:100%;}
  .ex-filter > .ex-arrow{display:none;}
  .ex-post-title{font-size:18px;}
  .ex-lang-pick > .ex-arrow{display:none;}
}

/* ============================================================
   프리미엄 · 광고 자리 · 인쇄용 바인더
   Premium pages, the ad slot and the print binder
   ============================================================ */
/* 광고 자리 — 높이를 미리 잡아 화면이 밀리지 않게, "광고" 표시는 늘 보이게 / reserved height, always labelled */
.ad-slot{margin:18px 0 8px; padding:8px 10px 10px; border:1px dashed var(--line); border-radius:14px; background:var(--canvas);
  min-height:120px; position:relative;}
.ad-label{display:inline-block; font-size:10.5px; color:var(--ink-soft); letter-spacing:.06em; margin-bottom:4px;}
.ad-remove{display:block; text-align:right; font-size:12px; margin-top:6px;}

/* 연속 학습 보호 방패 / streak shield */
.streak-shield{margin-left:2px; font-size:12px;}

/* 말하기: 무료 채점을 다 썼을 때 / speaking: free scorings used up */
.speak-limit{margin:12px 0; padding:12px 14px; border-radius:14px; background:var(--warm-bg); border:1px solid var(--warm-line);}
.speak-limit-msg{margin:0 0 4px; font-weight:700; color:var(--warm-ink);}

/* 소개 화면 / plans */
.premium .pr-status{padding:14px 16px; margin-bottom:12px;}
.pr-status.is-premium{background:linear-gradient(135deg,var(--warm-bg),var(--warm-bg)); border-color:var(--warm-line);}
.pr-status-badge{margin:0; font-weight:800; color:var(--warm-ink);}
.pr-status-badge.free{color:var(--ink-soft);}
.pr-status-main{margin:4px 0 8px; font-size:15px; font-weight:700;}
.pr-compare{padding:14px 16px;}
.pr-compare h2, .pr-buy h2{font-size:16px; margin:0 0 10px;}
.pr-table{width:100%; min-width:0; border-collapse:collapse; font-size:13px; table-layout:fixed;}
.pr-table th, .pr-table td{white-space:normal; overflow-wrap:anywhere; background:none;}
.pr-table thead th:first-child{width:38%;}
.pr-table th, .pr-table td{padding:9px 6px; border-bottom:1px solid var(--line); text-align:center; vertical-align:middle;}
.pr-table tbody th{text-align:left; font-weight:600;}
.pr-table thead th{font-size:12px; color:var(--ink-soft);}
.pr-col-premium{background:var(--warm-bg); font-weight:700; color:var(--warm-ink);}
.pr-buy{margin:16px 0;}
.pr-test{background:#EAF3FF; border:1px solid #BFD6F5; color:#24518A; border-radius:10px; padding:8px 12px; font-size:12.5px; font-weight:600;}
.pr-off{padding:12px 14px; color:var(--ink-soft);}
.pr-buy-form{display:flex; flex-direction:column; gap:10px;}
.pr-plans{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;}
.pr-plan{position:relative; display:flex; flex-direction:column; gap:4px; padding:14px; border:2px solid var(--line); border-radius:16px;
  background:var(--card); cursor:pointer;}
.pr-plan input{position:absolute; opacity:0; pointer-events:none;}
.pr-plan:has(input:checked){border-color:var(--teal); box-shadow:0 0 0 3px rgba(18,122,102,.15);}
.pr-plan:has(input:focus-visible){outline:3px solid rgba(18,122,102,.45); outline-offset:2px;}
.pr-plan-name{font-weight:700; font-size:13.5px;}
.pr-plan-price{font-size:22px; font-weight:800;}
.pr-plan .badge{align-self:flex-start;}
.pr-notes{margin:0; padding-left:18px; font-size:12.5px; color:var(--ink-soft); line-height:1.7;}
.pr-agree{font-weight:600; font-size:13px; align-items:flex-start;}
.pr-agree input{margin-top:3px;}
.pr-minor{color:var(--red);}
.pr-coupon, .pr-history{padding:14px 16px; margin-top:12px;}
.pr-coupon h2, .pr-history h2{font-size:15px; margin:0 0 8px;}
.pr-history ul{list-style:none; margin:0; padding:0;}
.pr-history li{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:6px 0; border-bottom:1px solid var(--line); font-size:13px;}
.pr-history li:last-child{border-bottom:0;}
.is-revoked{opacity:.55;}
.pr-business{margin-top:18px; font-size:11.5px; color:var(--ink-soft); line-height:1.7;}

/* 결제 · 결과 / checkout and result */
.pr-checkout, .pr-result{max-width:520px; padding:18px;}
.pr-checkout .btn-block, .pr-buy-form .btn-block{width:100%; margin-top:6px;}
.pr-summary{display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:6px 0 12px; font-size:14px;}
.pr-summary dt{color:var(--ink-soft);}
.pr-summary dd{margin:0; font-weight:700; overflow-wrap:anywhere;}
.pr-amount{font-size:20px;}
.pr-order-id{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px !important; font-weight:400 !important;}
.pr-result{text-align:center;}
.pr-result h1{font-size:20px; margin:4px 0 8px;}
.pr-result-ico{font-size:44px; margin:0;}
.pr-result-actions{justify-content:center; margin-top:14px;}

/* 리포트 / report */
.pr-teaser{padding:18px; text-align:center;}
.pr-teaser-nums{display:flex; justify-content:center; gap:28px; margin:4px 0 10px;}
.pr-teaser-nums strong{font-size:28px; display:block;}
.pr-teaser-blur{display:flex; align-items:flex-end; justify-content:center; gap:8px; height:80px; margin:10px auto 14px; max-width:260px;
  filter:blur(3px); opacity:.6;}
.pr-teaser-blur span{flex:1; background:var(--teal); border-radius:6px 6px 0 0;}
.pr-kpis{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-bottom:12px;}
.pr-kpis .card{margin:0; padding:12px; display:flex; flex-direction:column; gap:2px;}
.pr-kpis strong{font-size:20px;}
.pr-kpis span{font-size:11.5px; color:var(--ink-soft);}
.pr-report .card h2{font-size:15px; margin:0 0 10px;}
.pr-bars{display:flex; align-items:flex-end; gap:3px; height:110px; padding:4px 0; border-bottom:1px solid var(--line);}
.pr-bar{flex:1; height:100%; display:flex; align-items:flex-end;}
.pr-bar i{display:block; width:100%; background:var(--teal); border-radius:4px 4px 0 0; min-height:2px;}
.pr-bar.zero i{background:var(--line);}
.pr-bars-axis{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-soft); margin:4px 0 0;}
.pr-areas, .pr-hbars{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.pr-areas li, .pr-hbars li{display:grid; grid-template-columns:72px 1fr 40px auto; align-items:center; gap:8px; font-size:13px;}
.pr-hbars li{grid-template-columns:44px 1fr 40px;}
.pr-area-track{height:10px; background:var(--paper-deep); border-radius:6px; overflow:hidden;}
.pr-area-track i{display:block; height:100%; background:var(--teal); border-radius:6px;}
.pr-area-num{text-align:right; font-weight:700;}
.pr-delta{font-size:11.5px; font-weight:700; color:var(--ink-soft);}
.pr-delta.up{color:var(--teal);}
.pr-delta.down{color:var(--red);}
.pr-two{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;}
.pr-two .card{margin:0;}
.pr-weak{margin:0 0 10px; padding-left:22px; display:flex; flex-direction:column; gap:6px; font-size:13.5px;}
.pr-weak li{display:flex; flex-wrap:wrap; align-items:center; gap:6px;}

/* 관리자 / admin */
.pr-admin-status ul{margin:0; padding-left:18px; line-height:1.9; font-size:13px;}
.pr-admin-who{margin:10px 0;}
.pr-admin-grant{margin-bottom:10px; flex-wrap:wrap;}
.pr-admin-grant input[type=number]{max-width:90px; flex:0 0 auto;}
.pr-coupon-form{display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; margin-bottom:12px;}
.pr-coupon-form label{display:flex; flex-direction:column; gap:3px; font-size:12px; font-weight:600;}
.pr-coupon-form input{min-width:110px;}

/* 인쇄용 바인더 / print binder */
.print-tools{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px;}
.binder-head{display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px solid var(--ink); margin:14px 0 8px; padding-bottom:4px;}
.binder-brand{margin:0; font-weight:800; letter-spacing:.02em;}
.binder-meta{margin:0; font-size:12px; color:var(--ink-soft);}
.binder-table{width:100%; min-width:0; border-collapse:collapse; font-size:13.5px; background:var(--card);}
.binder-table th, .binder-table td{border:1px solid var(--line); padding:6px 8px; text-align:left;}
.binder-table thead th{background:var(--paper-deep); font-size:12px;}
.binder-no{width:36px; color:var(--ink-soft); text-align:right !important;}
.binder-word{font-size:16px; font-weight:700;}
.binder-check{width:44px; text-align:center !important;}
.hide-meaning .binder-meaning{color:transparent; background:repeating-linear-gradient(45deg,#F1ECE0,#F1ECE0 6px,#E7E0D0 6px,#E7E0D0 12px);}
.binder-wrong{margin:0; padding-left:24px; display:flex; flex-direction:column; gap:10px;}
.binder-wrong li{border-bottom:1px dashed var(--line); padding-bottom:8px; break-inside:avoid;}
.binder-q{margin:0; font-size:15px;}
.binder-tr{margin:2px 0;}
.binder-picks{margin:4px 0 0; display:flex; flex-wrap:wrap; gap:10px; font-size:13px;}
.binder-mine{color:var(--red);}
.binder-answer{color:var(--teal); font-weight:700;}
.hide-answer .binder-answer, .hide-answer .binder-mine{color:transparent; background:#EFE9DC; border-radius:4px;}

@media (max-width:600px){
  .pr-plans{grid-template-columns:1fr;}
  .pr-kpis{grid-template-columns:repeat(2, minmax(0,1fr));}
  .pr-two{grid-template-columns:1fr;}
  .pr-table{font-size:12px;}
  .pr-areas li{grid-template-columns:56px 1fr 34px auto;}
}

@media print{
  .sidebar, .topbar-account, .mobile-tabbar, .print-tools, .ad-slot{display:none !important;}
  body, .app, main, .print-page{background:var(--surface) !important; margin:0 !important; padding:0 !important; box-shadow:none !important;}
  .app{display:block !important;}
  .binder-table th, .binder-table td{border-color:#999;}
  .binder-table tr{break-inside:avoid;}
}

/* 표기 읽기 문제: 밑줄 친 말은 답을 고른 뒤 읽는다는 안내 / kanji-reading note: target read after answering */
.listen-note{margin:4px 0 10px;}
/* 번역 검수 — 새 문제(다른 언어로 다시 만든 문제) 초안 / review: adapted-question drafts */
.draft-adapt .guide-orig{font-size:12px; color:var(--ink-soft);}
.adapt-links a{margin-right:4px;}

/* ============================================================
   메뉴 단순화 — 묶음 사이드바 · 전체 메뉴 · 연습 격자 · 홈 바로 가기 · 안내 띠 · 소리 설정
   Simplified navigation: grouped sidebar, full menu, practice grid, home shortcuts, toast, voice settings
   ============================================================ */
/* 사이드바: 묶음 제목 + 촘촘한 칸, 길면 사이드바 안에서만 스크롤 / group titles, compact items, scroll inside */
.tabs{overflow-y:auto; scrollbar-width:thin; padding-bottom:12px;}
.nav-group{display:flex; flex-direction:column; gap:1px; margin-bottom:8px;}
.nav-group-title{
  padding:10px 22px 4px; font-size:12px; letter-spacing:0;
  color:var(--muted); font-weight:700; list-style:none; cursor:default;
}
.nav-admin > summary.nav-group-title{cursor:pointer; display:block;}
.nav-admin > summary.nav-group-title::-webkit-details-marker{display:none;}
.nav-admin > summary.nav-group-title::after{content:' ▾'; opacity:.7;}
.nav-admin[open] > summary.nav-group-title::after{content:' ▴';}
.sidebar .tab-btn{margin:0 10px; padding:8px 12px; border-radius:10px;}
.nav-desc{display:none;}

/* 전체 메뉴 화면: 같은 목록을 카드 격자로 / the full-menu page: the same list as a card grid */
.menu-page{max-width:980px;}
.menu-search{position:sticky; top:0; z-index:5; padding:4px 0 10px; background:var(--paper);}
.menu-search input{
  width:100%; padding:12px 14px; font-size:15px; border-radius:12px;
  border:1px solid var(--line); background:var(--card);
}
.menu-grid .nav-group{margin-bottom:16px;}
.menu-grid .nav-group-title{
  padding:0 0 6px; font-size:12px; color:var(--ink-soft); letter-spacing:.06em;
}
.menu-grid .nav-group{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px;}
.menu-grid .nav-group-title{grid-column:1 / -1;}
.menu-grid .tab-btn{
  display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center;
  padding:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:13px;
  color:var(--ink); text-decoration:none; box-shadow:none;
}
.menu-grid .tab-btn:hover{border-color:var(--teal); background:var(--card); color:var(--ink);}
.menu-grid .tab-btn .ico{
  grid-row:1 / span 2; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:var(--paper-deep); color:var(--teal); font-size:17px; opacity:1;
}
.menu-grid .tab-btn .label{font-weight:700; font-size:14.5px;}
.menu-grid .nav-desc{display:block; font-size:12px; color:var(--ink-soft); line-height:1.35;}
.menu-grid .nav-admin > summary.nav-group-title{padding:0 0 6px; font-size:12px; color:var(--ink-soft);}
.menu-guest{margin-top:8px;}

/* 연습 화면: 일곱 칸 격자 / the practice page: a seven-tile grid */
.hub-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px; margin:6px 0 12px;}
.hub-card{
  position:relative; display:flex; flex-direction:column; gap:3px; padding:16px 14px 14px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  color:var(--ink); text-decoration:none; transition:.13s;
}
.hub-card:hover{border-color:var(--teal); transform:translateY(-1px);}
.hub-ico{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center; margin-bottom:6px;
  border-radius:11px; background:var(--paper-deep); color:var(--teal);
  font-family:var(--jp-font); font-size:19px;
}
.hub-title{font-family:var(--jp-font); font-size:16.5px; font-weight:700;}
.hub-desc{font-size:12px; color:var(--ink-soft); line-height:1.4;}
.hub-badge{position:absolute; top:12px; right:12px;}
.hub-note{margin:4px 0 14px;}

/* 홈 바로 가기: 여섯 칸(휴대폰은 세 칸씩 두 줄) / home shortcuts: six tiles (3 × 2 on phones) */
.quick-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin:12px 0 6px;}
.quick-grid a{
  display:flex; flex-direction:column; gap:2px; padding:12px; min-height:84px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  color:var(--ink); text-decoration:none; transition:.13s;
}
.quick-grid a:hover{border-color:var(--teal);}
.quick-grid .sc-ico{font-family:var(--jp-font); font-size:19px; color:var(--teal);}
.quick-grid .sc-label{font-weight:700; font-size:14px;}
.quick-grid .sc-sub{font-size:11.5px; color:var(--ink-soft); line-height:1.35;}
.quick-grid a.due{border-color:var(--red); box-shadow:inset 3px 0 0 var(--red);}
.quick-grid a.due .sc-ico, .quick-grid a.due .sc-sub{color:var(--red);}
.quick-grid a.quick-all{background:var(--paper-deep);}
@media (min-width:1100px){ .quick-grid{grid-template-columns:repeat(6, minmax(0,1fr));} }
@media (max-width:420px){
  .quick-grid{gap:6px;}
  .quick-grid a{padding:10px 8px; min-height:76px;}
  .quick-grid .sc-sub{display:none;}
  .quick-grid .sc-label{font-size:13px;}
}

/* 잠깐 뜨는 안내(목소리 없음 등) / short-lived notice */
.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom)); z-index:80;
  max-width:min(92vw, 520px); display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:11px 14px; border-radius:14px; background:var(--ink-strong); color:var(--canvas);
  box-shadow:0 8px 24px rgba(0,0,0,.22); font-size:13px; line-height:1.45;
}
.toast a{color:var(--marker); font-weight:700; white-space:nowrap; display:inline-block; padding:10px 4px; margin:-10px 0;}   /* 누르기 쉽게 / bigger tap target */
@media (min-width:881px){ .toast{bottom:24px;} }
/* 문제 푸는 화면에서는 위에 — 아래는 보기 줄과 답 줄이 차지한다 / on solving screens at the top: options and the answer bar own the bottom */
.focus-page .toast{top:calc(62px + env(safe-area-inset-top)); bottom:auto;}

/* 소리 설정 / voice settings */
.voice-status{display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:10px;
  background:var(--paper-deep); color:var(--ink-soft); font-size:13px;}
.voice-status.on{background:var(--accent-soft); color:var(--teal);}
.voice-row{display:flex; gap:10px; align-items:center; margin-bottom:10px; flex-wrap:wrap;}
.voice-row label{min-width:64px; font-weight:700; font-size:13px;}
.voice-row select{flex:1; min-width:0; max-width:100%; padding:9px 10px; border-radius:10px; border:1px solid var(--line); background:var(--card);}
.voice-guide > summary{cursor:pointer; padding:10px 0; margin:-10px 0;}
.voice-guide ul{margin:8px 0 0; padding-left:18px;}
.voice-guide li{margin-bottom:6px; font-size:13px;}
/* 휴대폰의 전체 메뉴는 두 칸씩(덜 내려도 다 보이게), 칸은 세로로 / two columns on phones, stacked tiles */
@media (max-width:600px){
  .menu-grid .nav-group{grid-template-columns:repeat(2, minmax(0,1fr)); gap:7px; margin-bottom:12px;}
  .menu-grid .tab-btn{display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:11px 11px 10px;}
  .menu-grid .tab-btn .ico{width:30px; height:30px; font-size:15px; margin-bottom:3px;}
  .menu-grid .tab-btn .label{font-size:14px;}
  .menu-grid .nav-desc{font-size:11.5px;}
  .hub-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px;}
  .hub-card{padding:13px 11px 12px;}
  .hub-badge{position:static; align-self:flex-start; margin-top:4px;}
}

/* ===== 앱판·약관 링크·계정 삭제 / editions, policy links, account deletion ===== */
/*
 * 사이드바 아래 약관·개인정보 처리방침·계정 삭제(플레이: 앱 안에서도 방침을 열 수 있어야 함)
 * terms, privacy policy and account deletion under the sidebar (Play: the policy must be reachable inside the app)
 */
.policy-links{display:flex; flex-wrap:wrap; gap:4px 12px; padding:14px 22px 0; font-size:11px;}
.policy-links a{color:inherit; opacity:.62; text-decoration:none;}
.policy-links a:hover{opacity:1; text-decoration:underline;}
.menu-page .policy-links{padding:18px 2px 4px; color:var(--ink-soft); font-size:12px;}
.menu-page .policy-links a{opacity:.9; display:inline-flex; align-items:center; min-height:36px;}
@media (max-width:880px){ .sidebar .policy-links{display:none;} }
/* 앱판 이름 아래 줄(일본어 학습 · 韓国語学習) / the edition line under the brand */
.brand .brand-app{opacity:.85; font-weight:700; letter-spacing:.2px;}
/* 웹사이트 홈의 "안드로이드 앱" / the website's "Android apps" box */
.app-links h2{font-size:15px; margin:0 0 8px;}
/* 앱의 프리미엄 화면: 팔지 않는다는 안내 / the app's premium page note */
.pr-app-note h2{margin-top:0;}
/* 계정 삭제 / account deletion */
.del-list{margin:8px 0 0; padding-left:18px; font-size:13px; line-height:1.8;}
.del-keep{background:var(--paper-deep);}
.del-form .field{margin-bottom:12px;}
.del-form input[type=password]{width:100%; max-width:360px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card);}
.btn-danger:hover{background:color-mix(in srgb, var(--red) 85%, #000); border-color:color-mix(in srgb, var(--red) 85%, #000);}
/* 개인정보 처리방침 표 / privacy policy tables */
.policy-doc h2{font-size:16px; margin:0 0 8px;}
.policy-doc p, .policy-doc li{font-size:13.5px; line-height:1.8;}
.policy-doc ul{padding-left:18px; margin:6px 0 0;}
.policy-meta{font-size:12.5px; color:var(--ink-soft);}
.card .policy-links{padding:12px 0 0; color:var(--ink-soft); font-size:12px;}
.card .policy-links a{opacity:.9; display:inline-flex; align-items:center; min-height:36px;}
/* 휴대폰 위 띠에서도 앱판이면 무엇을 배우는 앱인지 보이게(사이드바 작은 글씨는 원래 숨김) / show the edition label in the phone top bar */
@media (max-width:880px){
  .brand .brand-text{flex-direction:row; align-items:baseline; gap:6px;}
  .brand .brand-app{display:inline-block; font-size:11px; margin:0;}
}
/* 개인정보 처리방침 표를 휴대폰에서는 칸마다 한 줄씩(머리글은 data-label 로) / stacked policy tables on phones */
@media (max-width:600px){
  .policy-doc table thead{display:none;}
  .policy-doc table, .policy-doc tbody, .policy-doc tr, .policy-doc td{display:block; width:auto !important;}
  .policy-doc tr{padding:10px 0; border-bottom:1px solid var(--line);}
  .policy-doc td{border:none; padding:2px 12px;}
  .policy-doc td[data-label]::before{content:attr(data-label); display:block; font-size:11.5px; font-weight:700; color:var(--ink-soft);}
}

/* 관리: 앱 출시 점검 / admin release check */
.release-card h2{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.release-fail td:first-child{color:var(--red); font-weight:800;}
.release-warn td:first-child{color:var(--gold); font-weight:800;}
.release-ok td:first-child{color:var(--teal); font-weight:800;}

/* 묶음 끝: 결과 한 줄과 다음 갈 곳(다음 묶음 단추는 한 줄 전체) / end of a set: the result line and where next */
.set-done{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:10px 0 0; font-size:14.5px;}
.set-done strong{color:var(--teal); font-size:16px;}
.sheet-actions.set-end{flex-wrap:wrap;}
.sheet-actions.set-end .btn-primary{flex:1 1 100%;}
.sheet-actions.set-end .btn:not(.btn-primary){flex:1 1 0; justify-content:center; text-align:center;}
.learn-finished{text-align:center; margin:0 0 12px;}

/* 학습 안내 / the guide page */
.guide-toc{margin:0 0 14px;}
.guide-sec h2, .guide-h2{font-size:16.5px; margin:0 0 12px;}
.guide-sec{scroll-margin-top:16px;}
.guide-flow{list-style:none; margin:0 0 12px; padding:0; display:grid; gap:8px; counter-reset:gf;}
.guide-flow li{display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--paper);}
.guide-flow li + li{position:relative;}
.guide-flow li + li::before{content:'↓'; position:absolute; top:-15px; left:28px; font-size:12px; color:var(--ink-soft);}
.gf-ico{flex:0 0 36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:10px;
  background:var(--paper-deep); color:var(--teal); font-family:var(--jp-font); font-size:18px;}
.gf-body{display:flex; flex-direction:column; gap:3px; font-size:13.5px; line-height:1.55; color:var(--ink-soft); min-width:0;}
.gf-body strong{color:var(--ink); font-size:14.5px;}
.guide-actions{margin-top:10px;}
.guide-sec .interval-steps{margin:0 0 12px;}
.guide-table td{vertical-align:top; line-height:1.5;}
.guide-table .gt-name{font-weight:700; white-space:nowrap;}
.guide-table .gt-muted td{color:var(--ink-soft);}
.guide-all{margin:4px 0 0;}
@media (max-width:600px){
  /* 휴대폰: 표의 한 줄 = 카드 한 장(칸 이름은 data-label) / phones: one table row = one card */
  .guide-table{border:none; background:none; overflow:visible;}
  .guide-table table, .guide-table tbody, .guide-table tr, .guide-table td{display:block; width:auto;}
  .guide-table thead{display:none;}
  .guide-table tr{border:1px solid var(--line); border-radius:12px; background:var(--card); padding:10px 12px; margin-bottom:8px;}
  .guide-table td{border:none; padding:2px 0;}
  .guide-table .gt-name{white-space:normal; font-size:14px; padding-bottom:4px;}
  .guide-table td[data-label]::before{content:attr(data-label); display:block; font-size:11px; font-weight:700; color:var(--ink-soft); margin-top:4px;}
}
/* 홈의 학습 안내 띠 / the guide strip on home */
.guide-strip{display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:12px 14px; border-radius:12px;
  border:1px dashed var(--teal); background:var(--card); color:var(--teal); font-weight:700; font-size:13.5px; text-decoration:none;}
.guide-strip .gs-ico{font-family:var(--jp-font); font-size:18px;}
.guide-mini{display:inline-flex; align-items:center; min-height:36px; font-size:12.5px; color:var(--ink-soft); margin:0 0 8px;}
.review-next{margin:8px 0 0; font-weight:700; color:var(--teal);}

/* 단원 단어로 더 연습(단원 화면) / unit-scoped practice on the unit page */
.unit-practice{margin-top:12px;}
.up-title{font-size:16px; margin:0 0 4px;}
.unit-practice .hint{margin:0;}
.up-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:10px;}
.up-btn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:64px;
  padding:10px 6px; border-radius:14px; border:1px solid var(--line); background:var(--card);
  text-decoration:none; color:var(--ink); font-weight:700; font-size:14px; text-align:center;}
.up-btn:hover{border-color:var(--teal);}
.up-ico{font-family:var(--jp-font); font-size:20px; color:var(--teal);}
/* 연습 화면의 단원 표시 / the unit line on a unit-scoped practice page */
.practice-unit{display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; margin:0 0 12px; padding:8px 12px;
  border-radius:12px; background:var(--paper-deep); font-size:13px; color:var(--ink-soft);}
.practice-unit a{font-weight:800;}

/* ============================================================
   관리 화면 / admin pages
   ============================================================ */
/* 관리 메뉴 줄 — 모든 관리 화면 맨 위. 휴대폰에서는 옆으로 민다 / admin sub-nav; scrolls sideways on phones */
.admin-nav{display:flex; gap:6px; margin:0 0 14px; padding:2px 0 6px; overflow-x:auto; scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;}
.admin-nav a{flex:0 0 auto; display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border-radius:18px;
  border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:13px; font-weight:600;
  text-decoration:none; white-space:nowrap;}
.admin-nav a:hover{border-color:var(--teal);}
.admin-nav a.on{background:var(--teal); border-color:var(--teal); color:#fff;}
/* 데스크톱에서는 오른쪽 위 알림·계정 단추와 겹치지 않게 그만큼 비우고 줄을 바꾼다
   On desktop leave room for the bell and account buttons at the top right, and wrap instead of scrolling */
@media (min-width:881px){
  .admin-nav{margin-right:104px; flex-wrap:wrap; overflow-x:visible;}
}
.admin-h2{font-size:15px; margin:0 0 10px;}
.admin-h2-row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;}
.admin-h2-row .admin-h2{margin:0;}

/* 처리할 일 / to-dos */
.admin-todo{border-left:4px solid var(--gold);}
.todo-list{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
.todo-list a{display:flex; align-items:center; gap:10px; min-height:44px; padding:6px 10px; border-radius:10px;
  background:var(--paper); color:var(--ink); text-decoration:none; font-weight:600;}
.todo-list a:hover{background:var(--paper-deep);}
.todo-num{min-width:34px; height:28px; padding:0 8px; border-radius:14px; display:inline-grid; place-items:center;
  background:var(--teal); color:#fff; font-weight:800; font-size:13px;}
.todo-num.warn{background:var(--red);}
.todo-go{margin-left:auto; color:var(--ink-soft); font-size:18px;}

/* 숫자 칸 / stat tiles */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; margin:0 0 16px;}
.stat{display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-radius:14px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); text-decoration:none;}
a.stat:hover{border-color:var(--teal);}
.stat-label{font-size:12px; font-weight:700; color:var(--ink-soft);}
.stat-num{font-size:26px; font-weight:800; line-height:1.15; color:var(--teal);}
.stat-num.warn{color:var(--red);}
.stat-sub{font-size:11.5px; color:var(--ink-soft);}
@media (max-width:420px){
  .stat-grid{grid-template-columns:1fr 1fr;}
  .stat{padding:12px;}
  .stat-num{font-size:22px;}
}

/* 최근 7일 막대 / seven-day bars */
.week-chart{display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; align-items:end;}
.wk-col{display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0;}
.wk-num{font-size:11px; font-weight:700; color:var(--ink-soft);}
.wk-bar{display:flex; align-items:flex-end; width:100%; max-width:42px; height:110px; border-radius:8px; background:var(--paper);}
.wk-bar span{display:block; width:100%; border-radius:8px; background:color-mix(in srgb, var(--teal) 55%, #fff);}
.wk-col.today .wk-bar span{background:var(--teal);}
.wk-day{font-size:12px; font-weight:700;}
.wk-col.today .wk-day{color:var(--teal);}
.wk-meta{font-size:10.5px; color:var(--ink-soft); white-space:nowrap;}
@media (max-width:420px){ .wk-meta{font-size:9.5px;} .wk-bar{height:90px;} }

/* 최근 활동 / recent activity */
.recent-list{list-style:none; margin:0; padding:0;}
.recent-list li{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:8px 0; border-bottom:1px solid var(--line);
  font-size:13px;}
.recent-list li:last-child{border-bottom:none;}
.recent-time{color:var(--ink-soft); font-size:12px; font-variant-numeric:tabular-nums;}
.recent-user{font-weight:700; display:inline-block; padding:6px 0;}
.recent-detail{color:var(--ink-soft); flex-basis:100%; font-size:12.5px;}
@media (min-width:700px){ .recent-detail{flex-basis:auto; flex:1;} }

/* 관리 화면 바로가기 / admin shortcuts */
.admin-links{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:8px;}
.admin-links a{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); text-decoration:none;}
.admin-links a:hover{border-color:var(--teal);}
.admin-links span{font-size:12px; color:var(--ink-soft);}

/* 휴대폰에서 표를 카드로 — 칸마다 data-label 이 제목이 된다(옆으로 밀지 않아도 단추가 보인다)
   Tables become cards on phones: each cell's data-label is its heading, so actions show without scrolling */
@media (max-width:640px){
  .table-wrap.stack{border:none; background:transparent; overflow:visible;}
  .table-wrap.stack table{min-width:0;}
  .table-wrap.stack thead{display:none;}
  .table-wrap.stack tr{display:block; margin:0 0 10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px;
    background:var(--card);}
  .table-wrap.stack td{display:flex; gap:10px; padding:5px 0; border:none; width:auto !important;}
  .table-wrap.stack td[data-label]::before{content:attr(data-label); flex:0 0 72px; font-size:11.5px; font-weight:700;
    color:var(--ink-soft);}
  .table-wrap.stack td.empty{display:block;}
  .table-wrap.stack td .btn-sm{min-height:34px;}
  .table-wrap.stack td form{flex-wrap:wrap;}
  .table-wrap.stack td.row-actions{flex-wrap:wrap; gap:6px;}
  .table-wrap.stack td.row-actions::before{flex-basis:100%;}
}

/* ============================================================
   퀴즈 풀기: 고르기 → [확인] → 결과 칸, 힌트·일시정지, 후리가나·로마자 (app.js 13)
   Quiz play: pick, then [Check], result sheet, hint and pause, furigana and romaji (app.js 13)
   ============================================================ */
.focus-tool{
  width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:50%;
  font-size:18px; line-height:1; border:1.5px solid var(--line); background:var(--card); color:var(--ink);
  cursor:pointer; padding:0; font-family:inherit;
}
.focus-tool:hover,.focus-tool:focus-visible{border-color:var(--teal); outline:none;}
.focus-tool:disabled{opacity:.4; cursor:default;}

/* 고른 보기 · 정답 · 고른 오답 · 힌트로 지운 보기 / picked, right, picked-wrong and hint-removed options */
.quiz-opt.picked,.choice-btn.picked{border-color:var(--teal); box-shadow:0 0 0 2px var(--teal) inset; background:var(--ok-bg);}
.quiz-opt.is-right{border-color:var(--teal); background:var(--teal); color:#fff; opacity:1;}
.quiz-opt.is-wrong{border-color:var(--red); background:var(--bad-bg); color:var(--red); opacity:1;
  box-shadow:0 0 0 2px var(--red) inset;}
.quiz-opt.opt-out{opacity:.32; text-decoration:line-through; cursor:default;}
.quiz-opt:disabled{cursor:default;}
.quiz-opt.is-right::before{content:'✓ ';}

/* 아래에 붙는 [확인] / the [Check] bar stuck to the bottom */
.quiz-confirm{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--paper); border-top:1px solid var(--line);
  padding:10px 18px calc(10px + env(safe-area-inset-bottom));
}
.quiz-confirm[hidden]{display:none;}
.quiz-confirm .btn{display:block; width:100%; max-width:680px; margin:0 auto; min-height:52px; font-size:16px; font-weight:800;}
.quiz-confirm .btn:disabled{opacity:.45; cursor:default;}
body.has-confirm .focus-main{padding-bottom:calc(96px + env(safe-area-inset-bottom));}

/* 일시정지: 문제를 가리고 가운데 카드 / pause: hide the item behind a centred card */
.focus-main.paused .focus-body{filter:blur(10px); pointer-events:none; user-select:none;}
.quiz-pause{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px;
  background:rgba(15,30,25,.42);
}
.quiz-pause-card{
  width:100%; max-width:340px; background:var(--card); border-radius:20px; padding:22px 20px 18px;
  text-align:center; display:grid; gap:10px; box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.quiz-pause-card h2{margin:0; font-size:19px;}
.quiz-pause-card .page-desc{margin:0 0 6px;}
.quiz-pause-card .btn{min-height:48px; font-size:15px;}
.quiz-pause-icon{margin:0; font-size:34px; line-height:1;}

/* 발음 단추 한 줄(🔊 🐢) / the speak row */
.spk-row{display:flex; justify-content:center; gap:10px; margin:0 0 14px;}
.spk-row .spk{width:38px; height:38px; min-width:38px; font-size:17px; margin:0;}
.spk-slow{background:var(--card); color:var(--ink); border:1.5px solid var(--line);}
.spk-slow:hover{background:var(--paper-deep);}

/* 후리가나(한자 위 읽기)와 로마자 — 설정에서 끈다(html.no-furi / html.no-romaji)
   furigana and romaji, switched off from the settings */
ruby{ruby-position:over;}
rt{font-size:.5em; color:var(--ink-soft); font-weight:400; letter-spacing:.02em;}
.furi{line-height:2.1;}
.quiz-prompt-sm.furi{font-size:30px;}
.romaji{margin:-4px 0 10px; font-size:13.5px; color:var(--ink-soft); letter-spacing:.04em; text-align:center;
  font-family:-apple-system,BlinkMacSystemFont,'Noto Sans KR',sans-serif;}
html.no-furi rt{display:none;}
html.no-romaji .romaji{display:none;}

/* ============================================================
   단어 카드 도구(🔊 🐢 ☆) · 새 단어 표시 / flashcard tools and the new-word badge
   ============================================================ */
.fc-tools{position:absolute; top:14px; right:14px; display:flex; gap:8px; z-index:2;}
/* 단추 자체가 40px 라 넓힌 누르는 자리(::after)는 끈다 — 켜 두면 도구줄을 기준으로 퍼져 🐢 가 🔊·☆ 를 덮는다
   The buttons are 40px already, so the widened tap area (::after) is off: anchored to the toolbar it let 🐢 cover
   🔊 and ☆ */
.fc-tools .fc-speak{position:relative; inset:auto; width:40px; height:40px; min-width:40px; font-size:16px; margin:0;}
.fc-tools .spk::after{content:none;}
.fc-new{position:absolute; top:14px; left:14px; background:var(--gold); color:#fff; border-color:var(--gold); font-weight:700;}
.fc-romaji{margin:2px 0 0;}
.fc-word.furi{line-height:1.9;}

/* ☆ 단추 / the star button */
.star-btn{
  width:40px; height:40px; min-width:40px; display:inline-grid; place-items:center; border-radius:50%;
  border:1.5px solid var(--line); background:var(--card); color:var(--ink-soft);
  font-size:20px; line-height:1; cursor:pointer; padding:0; font-family:inherit; transition:transform .12s;
}
.star-btn:hover,.star-btn:focus-visible{border-color:var(--gold); outline:none;}
.star-btn.on{color:var(--gold); border-color:var(--gold); background:var(--warm-bg);}
.star-btn:active{transform:scale(.9);}
.star-btn:disabled{opacity:.6;}

/* ============================================================
   배울 단어 목록(단원·내 단어장) / the word list (unit page, my words)
   ============================================================ */
.learn-words{padding:14px 14px 8px;}
.lw-head{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.lw-head .up-title{margin:0;}
.lw-head .btn{margin-left:auto;}
.lw-list{list-style:none; margin:0; padding:0;}
.lw{position:relative; border-top:1px solid var(--line);}
.lw:first-child{border-top:none;}
.lw-item > summary{list-style:none; cursor:pointer;}
.lw-item > summary::-webkit-details-marker{display:none;}
.lw-row{display:flex; align-items:center; gap:10px; padding:10px 52px 10px 2px; min-height:58px;}
.lw-row .spk{margin:0;}
.lw-main{display:flex; flex-direction:column; min-width:0; flex:0 1 auto;}
.lw-word{font-size:19px; font-weight:700; line-height:1.5;}
.lw-word.furi{line-height:1.9;}
.lw-romaji{margin:0; text-align:left; font-size:12px;}
.lw-reading{font-size:12px;}
.lw-mean{flex:1; min-width:0; font-size:13.5px; color:var(--ink-soft); text-align:right; word-break:keep-all;}
.lw-memo-dot{font-size:13px;}
.lw-star{position:absolute; right:2px; top:9px; margin:0;}
.lw-more{padding:0 2px 12px 38px; display:grid; gap:8px;}
.lw-ex{margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px;}
.lw-ex .hint{flex-basis:100%;}
.lw-memo{display:grid; gap:6px; margin:0;}
.lw-memo textarea{width:100%; resize:vertical; min-height:52px; font:inherit; font-size:13.5px; padding:8px 10px;
  border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink);}
.lw-memo-actions{display:flex; align-items:center; gap:8px;}
.lw.unstarred{opacity:.55;}
@media (max-width:600px){
  .lw-row{gap:8px;}
  .lw-word{font-size:17px;}
  .lw-mean{font-size:12.5px;}
}

/* 내 단어장 위 요약 / the summary on top of my words */
.mw-summary{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.mw-summary form{margin:0;}
.mw-stats{display:flex; gap:18px; font-size:15px;}
.mw-stats strong{font-size:22px;}
.empty-card{text-align:center; padding:28px 18px;}
.mw-empty-ico{font-size:40px; color:var(--gold); margin:0;}

/* ============================================================
   문법 레슨 / grammar lessons
   ============================================================ */
.gr-progress{display:grid; gap:6px;}
.gr-progress strong{font-size:20px; margin-right:6px;}
.gr-unit{padding:14px 14px 6px;}
.gr-unit .up-title a{color:inherit; text-decoration:none;}
.gr-rows{list-style:none; margin:6px 0 0; padding:0;}
.gr-rows li{border-top:1px solid var(--line);}
.gr-rows li:first-child{border-top:none;}
.gr-row{display:flex; align-items:center; gap:10px; padding:11px 2px; text-decoration:none; color:var(--ink); flex-wrap:wrap;}
.gr-row:hover .gr-title{color:var(--teal);}
.gr-title{font-size:17px; font-weight:700;}
.gr-mean{flex:1; min-width:120px;}
.gr-state{display:flex; align-items:center; gap:6px; margin-left:auto;}
.gr-star{color:var(--gold); font-size:15px;}
.gr-head{display:flex; align-items:center; gap:10px; justify-content:space-between;}
.gr-head form{margin:0;}
.gr-head .page-title{font-size:30px;}
.gr-step{padding:16px 16px 14px;}
.gr-step-label{display:flex; align-items:center; gap:8px; margin:0 0 10px; font-weight:800; color:var(--teal);}
.gr-step-no{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--teal); color:#fff; font-size:12.5px;}
.gr-def{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; align-items:baseline;}
.gr-def dt{color:var(--ink-soft); font-size:12.5px; font-weight:700;}
.gr-def dd{margin:0; font-size:16px; font-weight:700;}
.gr-usage{margin:0; line-height:1.75; font-size:14.5px;}
.gr-examples{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.gr-examples li{display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:14px; background:var(--paper);}
.gr-ex-tools{display:flex; flex-direction:column; gap:8px;}
.gr-ex-tools .spk{width:36px; height:36px; min-width:36px; font-size:15px; margin:0;}
.gr-ex-body{flex:1; min-width:0;}
.gr-ex-ja{margin:0; font-size:20px; font-weight:700;}
.gr-ex-romaji{text-align:left; margin:2px 0 4px;}
.gr-ex-tr{margin:0; color:var(--ink-soft); font-size:14px;}
.gq{padding:10px 0 14px; border-top:1px solid var(--line);}
.gq:first-of-type{border-top:none; padding-top:0;}
.gq-q{margin:0 0 10px; font-size:18px; font-weight:700;}
.gq-no{color:var(--ink-soft); font-size:14px; margin-right:2px;}
.gq-opts{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px;}
.gq-opt{min-height:50px; font-size:16px; font-weight:700; border-radius:12px; white-space:normal;}
.gq-opt.is-right{background:var(--teal); border-color:var(--teal); color:#fff;}
.gq-opt.is-right::before{content:'✓ ';}
.gq-opt.is-wrong{background:var(--bad-bg); border-color:var(--red); color:var(--red); box-shadow:0 0 0 2px var(--red) inset;}
.gq-opt:disabled{cursor:default;}
.gq-answer{margin-top:10px; font-size:13.5px;}
.gq-answer > summary{cursor:pointer; color:var(--ink-soft);}
.gq-answer p{margin:6px 0 0; line-height:1.6;}
.gr-finish{display:grid; gap:8px; margin:16px 0 8px;}
.gr-finish form{margin:0;}
.gr-finish .btn{min-height:52px; font-size:16px; font-weight:800;}
.gr-finish .btn.is-on::after{content:' ✓';}
@media (max-width:600px){
  .gr-head .page-title{font-size:26px;}
  .gr-ex-ja{font-size:18px;}
}

/* 단원 화면의 문법 단계 / the grammar step on the unit page */
.unit-grammar{padding:14px 14px 8px;}
.unit-grammar .gr-rows{margin-top:4px;}

/* ============================================================
   모의고사 / mock tests
   ============================================================ */
.mk-tests{list-style:none; margin:0 0 14px; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));}
.mk-test{display:grid; gap:12px; margin:0;}
.mk-test-head{display:flex; align-items:center; gap:12px;}
.mk-test-head > div{display:flex; flex-direction:column; flex:1; min-width:0;}
.mk-test-no{display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--paper-deep);
  font-size:18px; font-weight:800; color:var(--teal); flex:0 0 42px;}
.mk-best{font-size:12px; font-weight:800; color:var(--ink-soft); white-space:nowrap;}
.mk-best.pass{color:var(--teal);}
.mk-continue{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; border-left:4px solid var(--gold);}
.mk-continue p{margin:0;}
.mk-rule ul{margin:6px 0 8px; padding-left:18px; line-height:1.7;}
.mk-history{width:100%; border-collapse:collapse; font-size:13.5px;}
.mk-history th,.mk-history td{padding:8px 6px; border-top:1px solid var(--line); text-align:left;}
.mk-history th{color:var(--ink-soft); font-weight:700; font-size:12px; border-top:none;}

.mk-page .focus-top{gap:10px;}
.mk-title{flex:1; font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mk-timer{font-size:13px; padding:5px 10px; font-variant-numeric:tabular-nums;}
.mk-tabs{display:flex; gap:8px; position:sticky; top:52px; z-index:4; background:var(--paper); padding:6px 0 8px;}
.mk-tabs a{flex:1; text-align:center; padding:8px 4px; border-radius:10px; border:1px solid var(--line); background:var(--card);
  color:var(--ink); text-decoration:none; font-weight:700; font-size:13.5px;}
.mk-section{font-size:18px; margin:18px 0 4px; padding-top:8px; scroll-margin-top:110px; border-top:2px solid var(--teal);}
.mk-kind{margin:2px 0 8px;}
.mk-item{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:12px 12px 10px; margin:0 0 10px;
  scroll-margin-top:110px; min-width:0;}
.mk-item.answered{border-color:color-mix(in srgb, var(--accent) 35%, var(--hair));}
.mk-q{display:flex; gap:8px; align-items:baseline; padding:0; margin:0 0 8px;}
.mk-q .jp-lg{font-size:18px;}
.mk-no{display:inline-grid; place-items:center; min-width:26px; height:26px; border-radius:8px; background:var(--paper-deep);
  font-size:12.5px; font-weight:800; color:var(--ink-soft); padding:0 4px;}
.mk-audio{justify-content:flex-start;}
.mk-opts{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px;}
.mk-opt{display:flex; align-items:center; gap:8px; padding:9px 10px; border:1.5px solid var(--line); border-radius:11px;
  cursor:pointer; background:var(--card); min-width:0;}
.mk-opt input{margin:0; accent-color:var(--teal);}
.mk-opt:has(input:checked){border-color:var(--teal); background:var(--ok-bg);}
.mk-opt-no{font-size:12px; font-weight:800; color:var(--ink-soft);}
.mk-opt-text{flex:1; min-width:0; word-break:break-word; font-size:15px;}
.mk-sheet{margin-top:16px;}
.mk-bubbles{display:grid; grid-template-columns:repeat(auto-fill, minmax(34px, 1fr)); gap:6px; margin:8px 0;}
.mk-bubble{display:grid; place-items:center; height:34px; border-radius:50%; border:1.5px solid var(--line); background:var(--card);
  color:var(--ink-soft); text-decoration:none; font-size:12.5px; font-weight:700;}
.mk-bubble.done{background:var(--teal); border-color:var(--teal); color:#fff;}
.mk-sheet .btn-primary{min-height:52px; font-size:16px; font-weight:800; margin-top:6px;}
@media (max-width:420px){ .mk-opts{grid-template-columns:1fr;} }

.mk-score{text-align:center;}
.mk-total-label{margin:0; color:var(--ink-soft);}
.mk-verdict{font-size:20px; font-weight:800; margin:8px 0 14px;}
.mk-verdict.pass{color:var(--teal);}
.mk-verdict.fail{color:var(--warm-ink);}
.mk-bars{display:grid; gap:12px; text-align:left; margin:0 0 12px;}
.mk-bar-head{display:flex; justify-content:space-between; font-size:14px;}
.mk-counts{list-style:none; margin:0 0 10px; padding:0; display:grid; gap:6px; text-align:left;}
.mk-counts li{display:flex; justify-content:space-between; padding:8px 10px; border-radius:10px; background:var(--paper); font-size:13.5px;}
.mk-review .mk-rv{border-top:1px solid var(--line); padding:8px 0;}
.mk-rv > summary{display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;}
.mk-rv > summary::-webkit-details-marker{display:none;}
.mk-rv-mark{margin-left:auto; font-weight:800;}
.mk-rv.ok .mk-rv-mark{color:var(--teal);}
.mk-rv.bad .mk-rv-mark{color:var(--red);}
.mk-rv-body{padding:8px 0 4px 34px;}
.mk-rv-body .jp-lg{margin:0 0 6px;}
.mk-rv-opts{list-style:none; margin:0; padding:0; display:grid; gap:4px;}
.mk-rv-opts li{padding:6px 8px; border-radius:8px; display:flex; gap:6px; align-items:center;}
.mk-rv-opts li.right{background:var(--ok-bg);}
.mk-rv-opts li.picked{background:var(--bad-bg);}
.mk-rv-explain{margin:6px 0 0; font-size:13.5px; color:var(--ink-soft);}

/* ============================================================
   내 학습 · 트로피 · 공부 꿀팁 · 앱 설정 / my study hub, trophies, tips, app settings
   ============================================================ */
.me-profile{display:flex; align-items:center; gap:12px;}
.me-who{display:flex; flex-direction:column; flex:1; min-width:0;}
.me-who strong{font-size:17px;}
.me-stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:14px;}
.me-stat{display:flex; flex-direction:column; align-items:center; gap:2px; margin:0; padding:12px 6px; text-align:center;}
.me-stat strong{font-size:22px; line-height:1.2;}
.me-stat-ico{font-size:15px; color:var(--teal); font-weight:800;}
.week-acc{font-size:10.5px; color:var(--teal); font-weight:700; margin-top:2px;}
.me-week-note{margin:8px 0 0;}
.me-tiles{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin:0 0 14px;}
.me-tile{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 4px 12px;
  border-radius:16px; background:var(--card); border:1px solid var(--line); color:var(--ink); text-decoration:none;
  font-size:12.5px; font-weight:700; text-align:center; word-break:keep-all;}
.me-tile:hover{border-color:var(--teal);}
.me-tile-ico{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--paper-deep);
  font-size:18px; color:var(--teal);}
.me-tile-meta{position:absolute; top:6px; right:6px; font-size:10.5px; font-weight:800; color:#fff; background:var(--teal);
  border-radius:9px; padding:1px 6px;}
@media (max-width:420px){ .me-tiles{grid-template-columns:repeat(4, 1fr); gap:6px;} .me-tile{font-size:11.5px;} }
.trophy-mini{display:flex; gap:10px; flex-wrap:wrap;}
.tip-today .tip-label{margin:0 0 4px; font-weight:800; color:var(--gold);}
.tip-today h3{margin:0 0 6px; font-size:16px;}
.tip-today p{margin:0 0 6px; line-height:1.65;}

.trophy-list{list-style:none; margin:0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));}
.trophy{display:flex; gap:14px; align-items:center; margin:0;}
.trophy-body{flex:1; min-width:0;}
.trophy-head{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.trophy-body .hint{margin:2px 0 6px;}
.trophy-tier{font-size:11.5px; font-weight:800; color:var(--ink-soft);}
.trophy.bronze .trophy-tier{color:#A0612C;}
.trophy.silver .trophy-tier{color:#6F7C86;}
.trophy.gold .trophy-tier{color:#B08D3E;}
.trophy-count{display:block; margin-top:4px; text-align:right;}
.trophy-medal{display:grid; place-items:center; width:54px; height:54px; flex:0 0 54px; border-radius:50%; font-size:22px;
  font-weight:800; background:var(--paper-deep); color:var(--ink-soft); border:3px solid var(--line);}
.trophy-medal.bronze{background:linear-gradient(145deg,#F3D2B3,#C98A57); color:#5A3418; border-color:#B8743F;}
.trophy-medal.silver{background:linear-gradient(145deg,#F2F4F6,#AEB8C0); color:#3E4850; border-color:#9AA6AF;}
.trophy-medal.gold{background:linear-gradient(145deg,#FFF0B8,#D9A93C); color:#5C4100; border-color:#C8962A;
  box-shadow:0 0 0 3px rgba(217,169,60,.25);}
.trophy-mini .trophy-medal{width:46px; height:46px; flex-basis:46px; font-size:19px;}

.tip-filter{margin:0 0 12px;}
.tip-list{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.tip{margin:0;}
.tip-head{display:flex; justify-content:space-between; align-items:center;}
.tip-head form{margin:0;}
.tip-title{font-size:16.5px; margin:8px 0 6px;}
.tip-body{margin:0; line-height:1.7;}
.heart-btn.on{color:#D2475A; border-color:#E8A0AA; background:#FFF0F2;}

.appset .up-title{margin-bottom:10px;}
.seg{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;}
.seg label{display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 6px; border-radius:12px;
  border:1.5px solid var(--line); background:var(--card); cursor:pointer; font-weight:700; font-size:13.5px;}
.seg label:has(input:checked){border-color:var(--teal); background:var(--ok-bg);}
.seg input{accent-color:var(--teal); margin:0;}
.switch-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); cursor:pointer;}
.switch-row:first-of-type{border-top:none;}
.switch-row > span{display:flex; flex-direction:column;}
.switch{appearance:none; -webkit-appearance:none; width:48px; height:28px; border-radius:14px; background:var(--line);
  position:relative; cursor:pointer; flex:0 0 48px; transition:background .15s; margin:0;}
.switch::after{content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .15s;}
.switch:checked{background:var(--teal);}
.switch:checked::after{left:23px;}
.switch:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.rate-row{display:grid; gap:8px; padding:10px 0 0; border-top:1px solid var(--line);}
.rate-ctl{display:flex; align-items:center; gap:8px;}
.rate-ctl input{flex:1; accent-color:var(--teal);}
.rate-ctl output{min-width:30px; font-weight:800; text-align:right;}
.rate-row .btn{justify-self:start;}
.appset-sample{margin:10px 0 0; font-size:22px; text-align:center;}
.appset-sample-romaji{margin:0;}

/* ============================================================
   학습 노선도 (홈·코스) — fragments/path.html, app.js 18)
   단원은 세로 노선 위의 역이다. 역 번호 배지(배우는 언어 코드 + 단원 번호)가 선 위에 앉고, 지나온 구간은 노선 색,
   남은 구간은 회색. 지금 역만 펼쳐 단계 목록을 보이고, 화면 아래 "학습 계속하기"에도 같은 배지가 붙는다.
   노선 색은 배우는 언어마다 하나(data-line) — 일본어는 강조색.
   Route map (home and course): units are stations on a vertical line. A station badge (study language code + unit
   number) sits on the line; the travelled part takes the line colour, the rest stays grey. Only the current station
   opens into its steps, and the sticky continue bar carries the same badge. One line colour per study language.
   ============================================================ */
.route,.ph-stats,.path-go{--line-c:var(--accent); --on-line:var(--on-accent);}
[data-line="ko"]{--line-c:#2F6BD8; --on-line:#fff;}
[data-line="en"]{--line-c:#7A4FD6; --on-line:#fff;}
[data-line="es"]{--line-c:#D9621A; --on-line:#fff;}
[data-line="zh"]{--line-c:#C4314B; --on-line:#fff;}
[data-line="vi"]{--line-c:#B88A00; --on-line:#fff;}

.home-path{margin:4px 0 18px; max-width:720px;}
.path-head{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin:0 0 18px;}
.course-sheet{position:relative;}
.course-chip{display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 5px; border-radius:999px; list-style:none;
  background:var(--surface); border:1px solid var(--hair); color:var(--ink-strong); font-weight:700; font-size:14px; cursor:pointer;}
.course-chip::-webkit-details-marker{display:none;}
.course-chip.static{cursor:default;}
.course-chip .flag-wrap{width:28px; height:28px;}
.cc-caret{font-size:11px; color:var(--muted); transition:transform .2s;}
.course-sheet[open] .cc-caret{transform:rotate(180deg);}
.course-chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.cs-panel{position:absolute; top:calc(100% + 8px); left:0; z-index:45; width:min(440px, 92vw); padding:16px;
  background:var(--surface); border:1px solid var(--hair); border-radius:18px; box-shadow:0 18px 40px rgba(15,30,25,.16);}
.cs-title{margin:0 0 2px; font-size:16px;}
.cs-panel > .hint{margin:0;}
.lang-row.cs-langs{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin:12px 0 0; overflow:visible;}
.cs-langs .lang-btn{flex-direction:row; justify-content:flex-start; gap:10px; padding:10px 12px; text-align:left;}
.cs-langs .lang-btn > .lang-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;}
/* 전체 진도: 글 + 단원마다 눈금 하나인 짧은 노선 / overall progress: text and a mini line with one tick per unit */
.ph-stats{flex:1 1 280px; display:flex; align-items:center; gap:14px; min-width:0;}
.ph-text{display:flex; flex-direction:column; line-height:1.3; white-space:nowrap;}
.ph-text strong{font-size:14px; font-weight:800; color:var(--ink-strong); font-variant-numeric:tabular-nums;}
.ph-text .hint{font-size:11.5px; color:var(--muted);}
.ph-line{flex:1; min-width:72px; display:flex; align-items:center; gap:3px; height:14px;}
.ph-line i{flex:1; height:4px; border-radius:2px; background:var(--hair);}
.ph-line i.done{background:var(--line-c);}
.ph-line i.past{background:color-mix(in srgb, var(--line-c) 45%, var(--hair));}
.ph-line i.now{height:14px; border-radius:4px; background:var(--line-c);}
.ph-map{font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; color:var(--accent);}

/* 노선 — 역마다 ::before 가 세로 선 한 토막(지나온 역은 노선 색). 배지 가운데는 왼쪽에서 --col/2
   The line: each station's ::before is one vertical segment (travelled ones in the line colour), centred at --col/2 */
.route{--col:56px; --mk:44px; --mid:30px; list-style:none; margin:0; padding:0; max-width:720px;}
.st,.route-more{position:relative; padding:0 0 12px;}
.st::before,.route-more::before{content:''; position:absolute; left:calc(var(--col) / 2 - 2px); top:0; bottom:0; width:4px;
  border-radius:2px; background:var(--hair);}
.st.is-past::before{background:var(--line-c);}
.st.is-current::before{background:linear-gradient(var(--line-c) 0 35px, var(--hair) 35px);}
.route:not(.has-before) > .st:first-child::before{top:var(--mid);}
.route:not(.has-before) > .st.is-current:first-child::before{top:35px; background:var(--hair);}
.route:not(.has-after) > .st:last-child::before{bottom:auto; height:var(--mid);}
.route-more.before::before{background:repeating-linear-gradient(var(--line-c) 0 6px, transparent 6px 12px);}
.route-more.after::before{background:repeating-linear-gradient(var(--hair) 0 6px, transparent 6px 12px);}
.route-more a{display:inline-flex; align-items:center; min-height:40px; margin-left:calc(var(--col) + 10px); color:var(--muted);
  font-size:13px; font-weight:700; text-decoration:none;}
.route-more a:hover{color:var(--line-c);}

/* 역 한 줄: 배지 · 이름과 진도 · 단계 점 · (지금 여기) · 펼침 / one station row */
.st-fold > summary{list-style:none;}
.st-fold > summary::-webkit-details-marker{display:none;}
.st-row{position:relative; display:flex; align-items:flex-start; gap:12px; padding:8px 8px 8px 0; color:var(--ink-strong);
  border-radius:14px; cursor:pointer;}
div.st-row{cursor:default;}
.st-row:focus-visible{outline:2px solid var(--line-c); outline-offset:2px;}
.st-mark{position:relative; z-index:1; flex:none; width:var(--mk); height:var(--mk);
  margin:0 calc((var(--col) - var(--mk)) / 2); border-radius:50%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; background:var(--surface); border:4px solid var(--hair); color:var(--muted); line-height:1;
  font-variant-numeric:tabular-nums; transition:transform .15s;}
.st-mark b{font-size:8.5px; font-weight:800; letter-spacing:.05em;}
.st-mark span{margin-top:1px; font-size:15px; font-weight:800; letter-spacing:-.02em;}
.st-row:hover .st-mark{transform:scale(1.05);}
.st.is-past .st-mark,.st.is-partial .st-mark{border-color:var(--line-c); color:var(--ink-strong);}
.st.is-finished .st-mark{background:var(--line-c); border-color:var(--line-c); color:var(--on-line);}
.st.is-past:not(.is-finished):not(.is-partial) .st-mark{border-color:color-mix(in srgb, var(--line-c) 45%, var(--hair));}
.st.is-current .st-mark{--mk:54px; border-width:5px; border-color:var(--line-c); background:var(--surface); color:var(--ink-strong);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--line-c) 16%, transparent); animation:st-halo 2.6s ease-in-out infinite;}
.st.is-current .st-mark b{font-size:9.5px;}
.st.is-current .st-mark span{font-size:19px;}
.st.is-empty .st-mark{border-style:dashed; color:var(--muted);}
@keyframes st-halo{50%{box-shadow:0 0 0 12px color-mix(in srgb, var(--line-c) 5%, transparent);}}
@media (prefers-reduced-motion:reduce){ .st.is-current .st-mark{animation:none;} }
.st-name{flex:1; min-width:0; min-height:var(--mk); display:flex; flex-direction:column; justify-content:center; gap:2px;}
.st.is-current .st-name{min-height:54px;}
.st-title{font-size:16px; font-weight:700; line-height:1.3; color:var(--ink-strong); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;}
.st.is-current .st-title{font-size:18px; font-weight:800;}
.st:not(.is-past):not(.is-current):not(.is-finished) .st-title{color:color-mix(in srgb, var(--ink-strong) 70%, var(--muted));}
.st-sub{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums;}
.st-pips{display:flex; gap:3px; align-self:center; margin-left:4px;}
.st-pips i{width:7px; height:7px; border-radius:50%; background:var(--hair);}
.st-pips i.done{background:var(--line-c);}
.st-pips i.now{background:var(--surface); box-shadow:inset 0 0 0 2px var(--line-c);}
.st-fold[open] .st-pips{display:none;}
.st-here{align-self:center; padding:5px 11px; border-radius:999px; background:var(--line-c); color:var(--on-line); font-size:12px;
  font-weight:800; white-space:nowrap;}
.st-caret{align-self:center; flex:none; width:8px; height:8px; margin:0 6px 4px 2px; border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s;}
.st-fold[open] .st-caret{transform:rotate(-135deg); margin-bottom:-4px;}

/* 펼친 역: 단계 목록 / an open station: its steps */
.st-panel{margin:2px 0 4px calc(var(--col) + 8px); padding:6px; background:var(--surface); border:1px solid var(--hair);
  border-radius:18px;}
.st-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
.st-form{margin:0;}
.st-link{width:100%; display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 12px; border:none; border-radius:12px;
  background:transparent; color:var(--ink-strong); text-decoration:none; font:inherit; font-size:15px; text-align:left;
  cursor:pointer;}
.st-link:hover{background:var(--canvas);}
.st-link:focus-visible{outline:2px solid var(--line-c); outline-offset:-2px;}
.st-dot{flex:none; position:relative; width:22px; height:22px; border-radius:50%; border:2px solid var(--hair); background:var(--surface);}
.st-step.done .st-dot{background:var(--line-c); border-color:var(--line-c);}
.st-step.done .st-dot::after{content:''; position:absolute; left:5px; top:5px; width:8px; height:4px;
  border-left:2px solid var(--on-line); border-bottom:2px solid var(--on-line); transform:rotate(-45deg);}
.st-step.partial .st-dot{border-color:var(--line-c);}
.st-step.optional .st-dot{border-style:dashed;}
.st-step.now .st-dot{border:6px solid var(--line-c);}
.st-step-main{flex:1; min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px;}
.st-step-name{font-weight:700;}
.st-step.done .st-step-name{color:var(--muted); font-weight:500;}
.st-step-type{padding:2px 8px; border-radius:999px; background:var(--canvas); color:var(--muted); font-size:12px; font-weight:500;}
.st-now{flex:none; font-size:12px; font-weight:800; color:var(--line-c); white-space:nowrap;}
.st-step-count{flex:none; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums;}
.st-go{flex:none; width:8px; height:8px; margin-right:4px; border-top:2px solid var(--hair); border-right:2px solid var(--hair);
  transform:rotate(45deg);}
.st-step.now .st-link{background:color-mix(in srgb, var(--line-c) 9%, var(--surface));}
.st-step.now .st-go{border-color:var(--line-c);}
.st-open{display:inline-block; padding:8px 12px 6px; color:var(--muted); font-size:13px; font-weight:700; text-decoration:none;}
.st-open:hover{color:var(--line-c);}

/* 아래에 붙는 "학습 계속하기" — 왼쪽에 지금 역 배지 / the sticky continue bar with the current station's badge */
.path-go{position:sticky; bottom:16px; z-index:30; display:flex; justify-content:center; margin:18px 0 0; pointer-events:none;}
.path-go > *{pointer-events:auto;}
.path-go form{margin:0; width:100%; max-width:460px;}
.btn-go{width:100%; max-width:460px; display:flex; align-items:center; gap:14px; padding:9px 20px 9px 9px; border:none;
  border-radius:20px; background:var(--line-c); color:var(--on-line); text-align:left; text-decoration:none; font:inherit; cursor:pointer;
  box-shadow:0 12px 28px color-mix(in srgb, var(--line-c) 34%, transparent); transition:transform .12s, filter .12s;}
.btn-go:hover{filter:brightness(1.06);}
.btn-go:active{transform:scale(.985);}
.btn-go:focus-visible{outline:3px solid var(--ink-strong); outline-offset:3px;}
.pg-mark{flex:none; width:48px; height:48px; border-radius:50%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; background:var(--surface); color:var(--ink-strong); border:4px solid rgba(255,255,255,.55); line-height:1;
  font-variant-numeric:tabular-nums;}
.pg-mark b{font-size:8.5px; font-weight:800; letter-spacing:.05em;}
.pg-mark span{margin-top:1px; font-size:16px; font-weight:800;}
.pg-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.pg-main{font-size:16.5px; font-weight:800;}
.pg-sub{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; font-weight:500; opacity:.9;}

@media (max-width:880px){
  .path-go{bottom:calc(78px + env(safe-area-inset-bottom));}
  /* 휴대폰: 코스 시트는 아래에서 올라온다. 뒤를 누르면(요약의 ::before) 닫힌다
     Phones: the course sheet slides up from the bottom; tapping the backdrop (the summary's ::before) closes it */
  .course-sheet[open] > .cs-panel{position:fixed; top:auto; left:0; right:0; bottom:0; width:auto; z-index:70;
    max-height:78vh; overflow:auto; border-radius:20px 20px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom));
    animation:cs-up .22s ease-out;}
  .course-sheet[open] > summary::before{content:''; position:fixed; left:0; top:0; right:0; bottom:0; z-index:69;
    background:rgba(0,0,0,.42); cursor:default;}
}
@keyframes cs-up{from{transform:translateY(24px); opacity:.4;}}
@media (max-width:480px){
  .lang-row.cs-langs{grid-template-columns:minmax(0, 1fr);}
}
@media (max-width:400px){
  .route{--col:50px; --mk:40px;}
  .st-pips{display:none;}
}
/* 휴대폰 홈: 위쪽(인사·복습 권하기·코스 줄)을 줄여 들어오자마자 노선이 보이게
   Phone home: a compact top (greeting, review nudge, course row) so the line is in view at once */
@media (max-width:600px){
  .home .greet-row{margin-bottom:10px;}
  .home .greet-card{padding:10px 12px; gap:10px;}
  .home .greet-avatar{width:38px; height:38px; font-size:15px;}
  .home .greet-name{font-size:15.5px;}
  .home .greet-sub{display:none;}
  .home .greet-card .today-chips{flex-wrap:nowrap; margin-top:6px; overflow-x:auto; scrollbar-width:none;}
  .home .greet-card .today-chips > *{flex:0 0 auto; white-space:nowrap; font-size:12.5px;}
  .home .greet-card .goal-mini{padding-right:10px;}
  .home .review-first{padding:10px 12px; gap:10px; flex-wrap:nowrap;}
  .home .review-first .rf-ico{width:34px; height:34px; font-size:17px;}
  .home .review-first .hint{display:none;}
  .home .review-first .rf-body strong{font-size:13.5px;}
  .home .review-first .rf-cta{flex-basis:auto; font-size:13px;}
  .path-head{margin-bottom:14px;}
  .ph-stats{flex-basis:100%;}
  .ph-text .hint{display:none;}
  .home .course-chip .cc-name{max-width:56vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .st-step-type{display:none;}
}

/* ============================================================
   사진으로 문제 넣기(관리자) — admin/page-import*.html, app.js 19)
   Photo import (admin)
   ============================================================ */
.pi-err{margin:0 0 4px;}
.pi-err:last-child{margin-bottom:0;}
.pi-done{border-left:3px solid var(--teal);}
.pi-done h2{margin:0 0 4px;}
.pi-photo{display:flex; flex-direction:column; align-items:flex-start; gap:10px;}
.pi-drop{display:flex; flex-direction:column; gap:6px; width:100%; padding:16px; border:2px dashed var(--line); border-radius:14px;
  background:var(--paper); cursor:pointer;}
.pi-drop:hover{border-color:var(--teal);}
.pi-drop input{width:100%;}
.pi-drop-text{font-weight:700;}
.pi-preview{max-width:min(320px, 100%); max-height:360px; border-radius:10px; border:1px solid var(--line); object-fit:contain;}
.pi-note,.pi-off{margin:10px 0 0;}
.pi-steps{margin:0 0 8px; padding-left:20px;}
.pi-steps li{margin:2px 0;}
.pi-prompt{margin:8px 0;}
.pi-prompt summary{cursor:pointer; font-weight:700; font-size:13px;}
.pi-prompt-box{width:100%; margin-top:8px; font-size:12.5px; line-height:1.5;}
.pi-paste{display:flex; flex-direction:column; gap:8px; margin-top:14px;}
.pi-paste label{font-weight:700; font-size:13px;}
.pi-paste textarea{width:100%; font-size:13px;}
.pi-paste .btn{align-self:flex-start;}
.pi-tips{margin:0; padding-left:20px;}
.pi-tips li{margin:3px 0;}
.pi-reason{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:4px;}
.pi-instruction{margin:0 0 12px; padding:8px 10px; border-radius:10px; background:var(--paper-deep); font-size:13.5px;}
.pi-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 2px 10px;}
.pi-all{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px; cursor:pointer;}
.pi-all input,.pi-pick input{width:auto;}
.pi-row{margin-bottom:12px;}
.pi-row.has-warn{border-left:3px solid var(--gold);}
.pi-row-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px;}
.pi-pick{display:inline-flex; align-items:center; gap:8px; cursor:pointer;}
.pi-dup{display:inline-flex; align-items:center; gap:6px; font-size:12.5px;}
.pi-prompt-row{display:flex; gap:8px; align-items:center;}
.pi-prompt-row input{flex:1; min-width:0;}
.pi-render{margin:6px 0 0; font-size:15px; color:var(--ink-soft);}
.pi-choices{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin:6px 0 4px;}
.pi-choice{display:flex; align-items:center; gap:8px;}
.pi-choice input[type=radio]{width:auto; flex:0 0 auto;}
.pi-choice input[type=text]{flex:1; min-width:0;}
.pi-more{margin-top:8px;}
.pi-more summary{cursor:pointer; font-size:12.5px; font-weight:700; color:var(--ink-soft);}
.pi-more summary .hint{font-weight:400; margin-left:6px;}
.pi-warns{margin:8px 0 0; padding-left:18px; color:var(--red); font-size:12.5px;}
.pi-words input[type=text]{width:100%; min-width:80px;}
.pi-words input[type=checkbox]{width:auto;}
.pi-words tr.is-dup{opacity:.65;}
.pi-actions{position:sticky; bottom:12px; z-index:20; display:flex; justify-content:flex-end; margin:14px 0 0;}
.pi-actions .btn{box-shadow:0 6px 18px rgba(0,0,0,.16);}
.pi-discard{margin:10px 0 0; display:flex; justify-content:flex-end;}
/* 문항마다 단원·유형 / per-item unit and type */
.pi-all-set .form-row{display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
.pi-all-set select{width:100%;}
.pi-row-where{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px;}
.pi-where select{width:auto; min-width:150px; max-width:100%; padding:6px 10px; font-size:13px;}
.pi-unit-note{font-size:12px;}
.pi-open{margin-left:auto; font-size:12.5px; font-weight:700;}
/* 사진 여러 장 / photo batches */
.pi-photo-actions{gap:8px;}
.pi-count,.pi-upload{margin:0; font-weight:700; color:var(--accent);}
.pi-jobs h2{margin:0 0 8px;}
.pi-job-list{margin:0 0 10px; padding-left:18px;}
.pi-job-list li{margin:4px 0;}
.job-head{display:flex; flex-direction:column; gap:10px;}
.job-sum{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.job-count{font-size:20px;}
.job-stopped{margin:0;}
.job-next{align-items:center; gap:10px;}
.job-items{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px;}
.job-item{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:4px 12px; margin:0; padding:12px 14px;}
.job-state{grid-row:span 2; min-width:64px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:800; text-align:center;
  background:var(--canvas); color:var(--muted);}
.job-item[data-state="READING"] .job-state{background:var(--marker); color:var(--ink-strong);}
.job-item[data-state="DONE"] .job-state{background:var(--accent-soft); color:var(--accent);}
.job-item[data-state="CHECK"] .job-state{background:var(--warm-bg); color:var(--warm-ink);}
.job-item[data-state="FAILED"] .job-state,.job-item[data-state="STOPPED"] .job-state{background:var(--wrong-soft); color:var(--wrong);}
.job-name{font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.job-msg{grid-column:2; font-size:12.5px;}
.job-open{grid-row:span 2; margin:0;}
/* ============================================================
   오프라인 학습(흐름 19) — 저장 관리(offline/manage.html)와 오프라인 화면(offline-study.html)
   Offline study (flow 19): the management page and the offline study page
   ============================================================ */
.appset-link{display:flex; align-items:center; justify-content:space-between; gap:12px; color:inherit; text-decoration:none;}
.appset-link > span:first-child{display:flex; flex-direction:column;}
.appset-link:hover{border-color:var(--teal);}
.offline-head{display:flex; flex-direction:column; gap:8px;}
.offline-head p{margin:0;}
.offline-usage{font-weight:700;}
.offline-actions{gap:8px; flex-wrap:wrap;}
.offline-units,.os-units{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px;}
.offline-unit,.os-unit{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; margin:0; padding:12px 14px;}
.offline-icon{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); font-size:19px; font-weight:700;}
.offline-what{display:flex; flex-direction:column; gap:2px; min-width:0;}
.offline-what strong{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.offline-status{font-size:12.5px; color:var(--muted);}
.offline-unit[data-state="saved"] .offline-status{color:var(--accent); font-weight:700;}
.offline-unit[data-state="stale"] .offline-status,.offline-unit[data-state="failed"] .offline-status{color:var(--warm-ink);}
.offline-btns{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.offline-btns .is-disabled{opacity:.45; pointer-events:none;}
.os-body{background:var(--canvas); margin:0; min-height:100vh;}
.os-main{max-width:720px; margin:0 auto; padding:16px 16px calc(24px + env(safe-area-inset-bottom));}
.os-head{display:flex; align-items:center; gap:10px; margin:0 0 12px;}
.os-title{margin:0; flex:1; font-size:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.os-net{font-size:13px; color:var(--muted);}
.os-sync{margin:12px 0 0;}
.os-progress{margin:0 0 8px;}
.os-card{min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; cursor:pointer; user-select:none;}
.os-word{font-size:40px; line-height:1.5;}
.os-card-back p{margin:0 0 4px;}
.os-reading{font-size:18px;}
.os-meaning{font-size:20px; font-weight:700;}
.os-example{margin-top:10px !important;}
.os-flip{margin:6px 0 0;}
.os-card-tools{display:flex; justify-content:center; margin:10px 0;}
.os-marks{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.os-marks .btn{min-height:48px; font-size:15px;}
.os-choices{margin-top:12px;}
.choice-btn.is-right{border:2px solid var(--teal); background:var(--accent-soft); font-weight:700;}
.choice-btn.is-wrong{border:2px solid var(--red); background:var(--wrong-soft);}
.choice-btn.is-right::after{content:'✓'; margin-left:auto; color:var(--accent); font-weight:800; font-size:17px;}
.choice-btn.is-wrong::after{content:'✕'; margin-left:auto; color:var(--wrong); font-weight:800; font-size:17px;}
.choice-btn:disabled{cursor:default; opacity:1; color:var(--ink);}
.os-feedback{margin-top:12px;}
.os-feedback p{margin:0 0 6px;}
.os-verdict{font-size:18px; font-weight:800;}
.os-verdict.is-right{color:var(--accent);}
.os-verdict.is-wrong{color:var(--wrong);}
.os-notes{margin:4px 0 10px; padding-left:18px; font-size:13px;}
.os-done{text-align:center;}
.os-done-title{font-size:22px; font-weight:800; margin:0 0 6px;}
.os-done-score{font-size:16px; margin:0 0 14px;}
.os-done .chip-row{justify-content:center; gap:8px;}
.os-empty p{margin:0 0 8px;}
@media (max-width:600px){
  .offline-unit,.os-unit{gap:10px; padding:10px 12px;}
  .offline-btns{flex-direction:column; align-items:stretch;}
}
/* AI 자동 작업(흐름 14-9) / automatic AI runs */
.auto-card{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px;}
.auto-card h2{margin:0 0 6px;}
.auto-card > div{width:100%;}
.job-head[data-state="DONE"] .job-count{color:var(--accent);}
.job-head[data-state="FAILED"] .job-count,.job-head[data-state="STOPPED"] .job-count{color:var(--wrong);}
.job-msg-main{margin:0; font-weight:600;}
.auto-log{margin:0; padding-left:20px; font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--muted);
  max-height:360px; overflow:auto;}
.auto-log li{margin:2px 0; overflow-wrap:anywhere;}
/* 검수 / review */
.rv-actions{gap:8px; flex-wrap:wrap;}
.rv-pages{justify-content:center; margin-top:14px;}
.rv-all{display:flex; justify-content:flex-end; margin:12px 0 0;}
@media (max-width:880px){
  .pi-actions{bottom:calc(78px + env(safe-area-inset-bottom));}
}
@media (max-width:600px){
  .pi-choices{grid-template-columns:minmax(0, 1fr);}
  .job-item{grid-template-columns:auto minmax(0, 1fr);}
  .job-open{grid-column:1 / -1; grid-row:auto;}
}

/* ============================================================
   문제 푸는 화면 — 깔끔한 한 장(문제 풀기 · 퀴즈 · 모의고사 · 듣기 · 받아쓰기)
   맨 위 한 줄(✕ · 진도 · 남은 시간) → 유형과 몇 번째 → 지시 → 큰 문제 → 남는 높이를 나눠 채우는 흰 보기 칸 → 아래 [확인].
   바탕은 차분한 회녹색(--canvas), 보기는 흰 칸, 고르면 초록 테두리. 꾸밈은 하나만 — 밑줄 친 말의 형광펜.
   묶음 진도는 학습 노선도처럼 문항을 역 점으로 잇는다.
   Solving screens as one clean sheet: a top row (close, progress, time), the type and position, the instruction, the
   item in large type, white option tiles sharing the remaining height and a bottom [Check]. A calm grey-green canvas,
   a green ring when picked; the one flourish is the highlighter on the target word. Set progress reuses the route
   map's station dots.
   ============================================================ */
body.solve-page{background:var(--canvas); background-image:none;}
.solve-page .focus-top{background:var(--canvas);}
.focus-main.solve{max-width:720px; padding:0 18px calc(22px + env(safe-area-inset-bottom)); color:var(--ink-strong);}
body.has-confirm .focus-main.solve{padding-bottom:calc(100px + env(safe-area-inset-bottom));}
.focus-main.solve.has-sheet{padding-bottom:calc(300px + env(safe-area-inset-bottom));}
.solve .focus-top{gap:12px; min-height:60px;}
.solve .focus-close{color:var(--muted);}
.solve .focus-close:hover,.solve .focus-close:focus-visible{background:var(--hair); color:var(--ink-strong);}
.solve-spacer{flex:1;}
.solve .focus-progress{height:8px; background:var(--hair); border-radius:99px;}
.solve .focus-progress > span{background:var(--accent); border-radius:99px;}
.solve .focus-count{min-width:0; font-size:14px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums;}
.solve .focus-tool{width:36px; height:36px; flex-basis:36px; border:1px solid var(--hair); background:var(--surface); font-size:16px;}
.solve-timer{flex:none; display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 12px; border-radius:999px;
  background:var(--surface); border:1px solid var(--hair); color:var(--ink-strong); font-size:15px; font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap;}
.solve-clock{font-size:12px; filter:grayscale(1); opacity:.7;}
.solve-timer:has(.badge-wait){background:var(--wrong-soft); border-color:transparent; color:var(--wrong);}
.solve-timer .badge-wait{background:none; border:none; padding:0; color:inherit;}

/* 묶음 진도 = 역 점을 이은 짧은 노선(눌러서 이동) / set progress as station dots on a short line (tap to jump) */
.solve-top .q-dots{flex:1; gap:0; min-width:0;}
.solve-top .q-dot{position:relative; flex:1; min-width:10px; height:28px;}
.solve-top .q-dot::before{content:''; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px; flex:none;
  border-radius:0; background:var(--hair); box-shadow:none;}
.solve-top .q-dot:first-child::before{left:50%;}
.solve-top .q-dot:last-child::before{right:50%;}
.solve-top .q-dot::after{content:''; position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px;
  border-radius:50%; background:var(--surface); border:2px solid var(--hair); box-sizing:border-box; transition:transform .15s;}
.solve-top .q-dot.done::before{background:var(--accent);}
.solve-top .q-dot.done::after{background:var(--accent); border-color:var(--accent);}
.solve-top .q-dot.current::after{width:16px; height:16px; margin:-8px 0 0 -8px; border:4px solid var(--accent);
  background:var(--surface); box-shadow:0 0 0 4px var(--accent-soft);}
.solve-top .q-dot:hover::after{transform:scale(1.2);}
.solve-top .q-dot:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:8px;}
/* 같은 유형 문항이 많을 때(17~40개) 작은 점 / smaller dots when a type has many items (17-40) */
.solve-top .q-dots.many .q-dot{min-width:4px;}
.solve-top .q-dots.many .q-dot::after{width:6px; height:6px; margin:-3px 0 0 -3px; border-width:1.5px;}
.solve-top .q-dots.many .q-dot.current::after{width:12px; height:12px; margin:-6px 0 0 -6px; border-width:3px;}

/* 유형 · 몇 번째 · 지시 / type, position, instruction */
.solve-body{flex:1; display:flex; flex-direction:column; min-height:0;}
.solve-meta{display:flex; align-items:center; gap:8px; margin:6px 0 0; min-height:24px;}
.solve-kind{font-size:13px; font-weight:800; color:var(--accent);}
.solve-meta .solve-count,.solve-score{margin-left:auto; font-size:13px; font-weight:700; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;}
.solve-score b{color:var(--ink-strong);}
.solve-help{position:relative; font-size:13px;}
.solve-help > summary .i{width:20px; height:20px; border:1.5px solid var(--hair); color:var(--muted); font:700 11px/1 Georgia,serif;
  font-style:italic;}
.solve-help[open] > summary .i{border-color:var(--accent); color:var(--accent);}
.solve-help-pop{position:absolute; top:calc(100% + 8px); left:-60px; z-index:30; width:min(280px, 80vw); padding:10px 14px;
  background:var(--surface); border:1px solid var(--hair); border-radius:14px; box-shadow:0 14px 32px rgba(15,30,25,.14);
  color:var(--ink-strong);}
.solve-help-pop p{margin:0; color:var(--muted);}
.solve-ask{margin:4px 0 0; font-size:15px; font-weight:500; line-height:1.55; color:var(--muted);}

/* 문제 — 크게, 밑줄 친 말은 형광펜 / the item in large type, the target word highlighted */
.focus-main.solve .solve-q{display:flex; align-items:flex-start; gap:14px; margin:16px 0 20px; padding:0; background:none;
  border:none; color:var(--ink-strong);}
.solve-q .jp-lg{flex:1; min-width:0; font-family:var(--jp-font); font-size:26px; font-weight:500; line-height:1.7;
  letter-spacing:.01em; color:var(--ink-strong); word-break:break-word;}
.solve-q .uword{border:none; padding:0 .08em; font-weight:700; color:inherit;
  background:linear-gradient(transparent 55%, var(--marker) 55%, var(--marker) 90%, transparent 90%);}
.solve-q .blankbox{min-width:3.2em; border-bottom:2.5px solid var(--accent); color:var(--muted);}
.solve-q rt{color:var(--muted); font-size:.42em;}
.solve-q > .spk{flex:none; width:44px; height:44px; min-width:44px; margin:2px 0 0; border-radius:50%; font-size:17px;
  background:var(--surface); color:var(--accent); border:1px solid var(--hair); box-shadow:0 1px 2px rgba(15,30,25,.06);}
.solve-q > .spk:hover{background:var(--accent-soft);}
.solve .listen-note{margin:-10px 0 14px; font-size:12.5px; color:var(--muted);}

/* 보기 칸 — 남는 높이를 나눠 채운다(너무 커지지 않게) / option tiles share the remaining height (capped) */
.solve-body > form{flex:1; display:flex; flex-direction:column; margin:0;}
.focus-main.solve .solve-choices{flex:1; display:flex; flex-direction:column; gap:10px; margin:0; padding:0;}
.focus-main.solve .solve-choices > li{flex:1 1 0; display:flex; min-height:60px; max-height:92px; margin:0; padding:0;}
.solve .choice-btn{flex:1; display:flex; align-items:center; gap:14px; min-height:60px; padding:10px 16px; border:1.5px solid var(--hair);
  border-radius:14px; background:var(--surface); color:var(--ink-strong); font-size:20px; text-align:left;
  transition:border-color .12s, background-color .12s, transform .08s;}
.solve .choice-btn:hover{border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); background:var(--surface);}
.solve .choice-btn:active{transform:scale(.99);}
.solve .choice-btn:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
.solve .choice-num,.solve .quiz-opt-no,.solve .mk-opt-no{flex:none; display:grid; place-items:center; width:30px; height:30px;
  min-width:30px; border-radius:9px; border:none; background:var(--canvas); color:var(--muted);
  font:700 14px/1 'Noto Sans KR',-apple-system,sans-serif;}
.solve .choice-text,.solve .mk-opt-text.jp{font-family:var(--jp-font); font-weight:500;}
.solve .choice-text{font-size:20px; line-height:1.45;}
.solve .choice-btn.picked{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent);}
.solve .choice-btn.picked .choice-num{background:var(--accent); color:var(--on-accent);}

/* 채점 뒤 — 정답 칸·내가 고른 오답 칸만 또렷하게 / after answering: only the right tile and the picked wrong tile stand out */
.solve-results{flex:1; display:flex; flex-direction:column; gap:10px;}
.solve .result-row{flex:1 1 0; display:flex; flex-wrap:wrap; align-items:center; align-content:center; gap:4px 12px;
  min-height:60px; max-height:124px; margin:0; padding:10px 16px; border:1.5px solid var(--hair); border-radius:14px;
  background:var(--surface); opacity:.62;}
.solve .result-row .jp{font-family:var(--jp-font); font-size:19px; font-weight:500;}
.solve .result-row .spk{order:9; width:30px; height:30px; min-width:30px; margin:0; font-size:12px; background:var(--canvas);
  color:var(--accent);}
.solve .result-row .badge{border:none; border-radius:999px; padding:3px 10px; font-size:12px; font-weight:800;}
.solve .result-row.is-correct{opacity:1; border-color:var(--accent); background:var(--accent-soft);}
.solve .result-row.is-correct .choice-num{background:var(--accent); color:var(--on-accent);}
.solve .result-row.is-correct .badge{background:var(--accent); color:var(--on-accent);}
.solve .result-row.is-picked-wrong{opacity:1; border-color:var(--wrong); background:var(--wrong-soft);}
.solve .result-row.is-picked-wrong .choice-num{background:var(--wrong); color:#fff;}
.solve .result-row.is-picked-wrong .badge{background:var(--wrong); color:#fff;}
.solve .result-row .oyomi{color:var(--accent);}
.solve .result-note{flex-basis:100%; margin:2px 0 0 42px; color:var(--muted);}

/* 아래에 붙는 줄 — 흐린 유리 위에 큰 단추 하나 / the bottom bar: one large button on frosted glass */
.quiz-confirm.solve-bar{background:color-mix(in srgb, var(--canvas) 88%, transparent); border-top:1px solid var(--hair);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  box-shadow:none;}
.solve-bar-inner{max-width:684px; margin:0 auto; display:flex; align-items:center; gap:10px;}
.quiz-confirm.solve-bar .btn{flex:1; width:auto; max-width:none; min-height:54px; margin:0; border:none; border-radius:14px;
  font-size:16.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;}
.quiz-confirm.solve-bar .btn-primary{background:var(--accent); color:var(--on-accent);}
.quiz-confirm.solve-bar .btn-primary:disabled{background:var(--hair); color:var(--muted); opacity:1;}
.quiz-confirm.solve-bar .btn:not(.btn-primary){background:var(--surface); color:var(--ink-strong); border:1.5px solid var(--hair);}

/* 결과 칸 — 아래에서 올라오는 흰 시트, 맨 앞에 맞음·틀림 표시 / the result sheet: a white sheet with a right/wrong mark */
.solve-page .answer-sheet{background:var(--surface); border-top:none; border-radius:24px 24px 0 0;
  box-shadow:0 -14px 40px rgba(15,30,25,.16); padding:20px 18px calc(16px + env(safe-area-inset-bottom));}
.solve-page .answer-sheet.wrong{background:var(--surface);}
.solve-page .answer-sheet-inner{max-width:684px;}
.solve-page .sheet-head{gap:10px; font-size:19px; color:var(--accent);}
.solve-page .sheet-head::before{content:'✓'; flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--accent); color:var(--on-accent); font-size:16px; font-weight:800;}
.solve-page .answer-sheet.wrong .sheet-head{color:var(--wrong);}
.solve-page .answer-sheet.wrong .sheet-head::before{content:'✕'; background:var(--wrong); color:#fff; font-size:14px;}
.solve-page .answer-sheet.late .sheet-head{color:var(--ink-strong);}
.solve-page .answer-sheet.late .sheet-head::before{content:'!'; background:var(--marker); color:var(--ink-strong);}
.solve-page .sheet-head ~ .sheet-head::before{content:none;}
.solve-page .sheet-more{color:var(--muted); font-size:14px;}
.solve-page .sheet-actions{gap:10px; margin-top:14px;}
.solve-page .sheet-actions .btn{min-height:54px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; border:1.5px solid var(--hair); background:var(--surface); color:var(--ink-strong);}
.solve-page .sheet-actions .btn-primary{flex:1; border:none; background:var(--accent); color:var(--on-accent); font-size:16.5px;
  font-weight:800;}
.solve-page .answer-sheet.wrong .sheet-actions .btn-primary{background:var(--ink-strong); color:var(--surface);}
.solve-page .set-done{margin:10px 0 0; color:var(--ink-strong);}

/* 일시정지 카드와 퀴즈 결과 화면도 같은 색으로 / the pause card and the quiz result in the same palette */
.solve-page .quiz-pause{background:rgba(10,20,16,.45);}
.solve-page .quiz-pause-card{background:var(--surface); border-radius:24px; padding:26px 20px 18px; box-shadow:0 20px 48px rgba(10,20,16,.25);}
.solve-page .quiz-pause-card .btn,.solve-page .focus-actions .btn{display:flex; align-items:center; justify-content:center;
  min-height:54px; border-radius:14px; border:1.5px solid var(--hair); background:var(--surface); color:var(--ink-strong);
  font-size:15.5px; font-weight:700;}
.solve-page .quiz-pause-card .btn-primary,.solve-page .focus-actions .btn-primary{border:none; background:var(--accent);
  color:var(--on-accent); font-weight:800;}
.solve-page .focus-center .eyebrow{color:var(--accent); letter-spacing:.02em; text-transform:none; font-size:13px; font-weight:800;}
.solve-page .result-ring{width:148px; height:148px; background:conic-gradient(var(--accent) calc(var(--p) * 1%), var(--hair) 0);}
.solve-page .result-ring::before{inset:10px; background:var(--canvas);}
.solve-page .result-ring span{color:var(--ink-strong); font-size:32px;}
.solve-page .result-ring.low{background:conic-gradient(var(--marker) calc(var(--p) * 1%), var(--hair) 0);}
.solve-page .result-ring.low span{color:var(--ink-strong);}
.solve-page .focus-center .quiz-score{color:var(--accent);}

/* 퀴즈 / quiz */
.quiz-card .quiz-feedback,.quiz-card .quiz-retry-note{margin:10px 0 0;}
.solve .quiz-feedback{border-radius:12px; font-size:14px;}
.solve .quiz-feedback.ok{background:var(--accent-soft); color:var(--accent);}
.solve .quiz-feedback.bad{background:var(--wrong-soft); color:var(--wrong);}
.focus-main.solve .quiz-q{display:flex; flex-direction:column; align-items:center; gap:6px; margin:18px 0 22px; padding:0;
  text-align:center; background:none; border:none;}
.solve .quiz-q .quiz-prompt{margin:0; font-family:var(--jp-font); font-size:40px; font-weight:500; line-height:1.3;
  color:var(--ink-strong);}
.solve .quiz-q .quiz-prompt-sm{margin:0; font-family:var(--jp-font); font-size:36px; font-weight:500; line-height:1.35;
  color:var(--ink-strong);}
.solve .quiz-q rt{font-size:.38em; color:var(--muted);}
/* 글자 퀴즈: 연습장 칸(가운데 열십자 점선) 안에 크게 / kana: very large inside a practice-book cell with a dashed cross */
.solve .quiz-q.is-kana .quiz-prompt{position:relative; display:grid; place-items:center; width:148px; height:148px;
  font-size:92px; line-height:1; border-radius:22px; background:var(--surface); border:1.5px solid var(--hair);
  background-image:linear-gradient(90deg, transparent calc(50% - .5px), color-mix(in srgb, var(--hair) 80%, transparent) calc(50% - .5px), color-mix(in srgb, var(--hair) 80%, transparent) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(transparent calc(50% - .5px), color-mix(in srgb, var(--hair) 80%, transparent) calc(50% - .5px), color-mix(in srgb, var(--hair) 80%, transparent) calc(50% + .5px), transparent calc(50% + .5px));}
.solve .quiz-q .romaji{margin:2px 0 0; color:var(--muted); font-size:14px;}
.solve .quiz-q .quiz-reading{margin:0; color:var(--muted); font-size:16px;}
.solve .quiz-q .spk-row{margin:6px 0 0; gap:10px;}
.solve .quiz-q .spk-row .spk,.solve .listen-slow{width:42px; height:42px; min-width:42px; font-size:16px; background:var(--surface);
  color:var(--accent); border:1px solid var(--hair);}
.quiz-card form{flex:1; display:flex; flex-direction:column; margin:0;}
.focus-main.solve .quiz-options{flex:1; margin:0;}
.focus-main.solve .quiz-options.as-grid{display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:minmax(84px, 1fr); gap:12px;
  padding:0;}
.focus-main.solve .quiz-options.as-grid .quiz-opt{position:relative; display:flex; align-items:center; justify-content:center;
  min-height:84px; padding:10px; border:1.5px solid var(--hair); border-radius:18px; background:var(--surface);
  color:var(--ink-strong); font-family:var(--jp-font); font-size:38px; font-weight:500; box-shadow:none;}
.focus-main.solve .as-grid .quiz-opt-no{position:absolute; top:10px; left:10px; width:24px; height:24px; min-width:24px;
  border-radius:7px; font-size:12px;}
.focus-main.solve .quiz-options.as-rows{display:flex; flex-direction:column; gap:10px; padding:0;}
.focus-main.solve .quiz-options.as-rows .quiz-opt{flex:1 1 0; display:flex; align-items:center; justify-content:flex-start; gap:14px;
  min-height:60px; max-height:92px; padding:10px 16px; border:1.5px solid var(--hair); border-radius:14px; background:var(--surface);
  color:var(--ink-strong); font-size:19px; font-weight:700; text-align:left; white-space:normal; box-shadow:none;
  transition:border-color .12s, background-color .12s, transform .08s;}
.focus-main.solve .quiz-options .quiz-opt:hover:where(:not(:disabled)){border-color:color-mix(in srgb, var(--accent) 40%, var(--hair));}
.focus-main.solve .quiz-options .quiz-opt:active:where(:not(:disabled)){transform:scale(.99);}
.focus-main.solve .quiz-options .quiz-opt:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
.quiz-opt-text{min-width:0; word-break:break-word;}
.focus-main.solve .quiz-options .quiz-opt.picked{border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent);}
.focus-main.solve .quiz-options .quiz-opt.picked .quiz-opt-no{background:var(--accent); color:var(--on-accent);}
.focus-main.solve .quiz-options .quiz-opt.is-right{border-color:var(--accent); background:var(--accent-soft); color:var(--ink-strong);
  box-shadow:inset 0 0 0 1px var(--accent);}
.focus-main.solve .quiz-options .quiz-opt.is-right .quiz-opt-no{background:var(--accent); color:var(--on-accent);}
.focus-main.solve .quiz-options .quiz-opt.is-wrong{border-color:var(--wrong); background:var(--wrong-soft); color:var(--wrong);
  box-shadow:inset 0 0 0 1px var(--wrong); animation:opt-shake .32s ease-in-out;}
.focus-main.solve .quiz-options .quiz-opt.is-wrong .quiz-opt-no{background:var(--wrong); color:#fff;}
.focus-main.solve .quiz-options .quiz-opt.is-right::before{content:none;}
.focus-main.solve .quiz-options .quiz-opt.is-right .quiz-opt-text::after{content:' ✓'; color:var(--accent);}
.focus-main.solve .quiz-options .quiz-opt.opt-out{opacity:.35; border-style:dashed; text-decoration:line-through;}
.focus-main.solve .quiz-opt:disabled{cursor:default;}
@keyframes opt-shake{25%{transform:translateX(-4px);} 75%{transform:translateX(4px);}}
@media (prefers-reduced-motion:reduce){ .focus-main.solve .quiz-opt.is-wrong{animation:none;} }

/* 모의고사 / mock test */
.solve .mk-title{flex:1; min-width:0; font-size:14px; font-weight:700; color:var(--muted);}
.solve .mk-submit-top{flex:none; height:36px; padding:0 16px; border:none; border-radius:999px; white-space:nowrap;
  background:var(--accent); color:var(--on-accent); font-weight:800;}
/* 영역 탭 = 세 칸 분할 단추 / section tabs as a three-way segmented control */
.focus-main.solve .mk-tabs{gap:4px; top:60px; margin:2px 0 6px; padding:4px; border:none; border-radius:14px;
  background:color-mix(in srgb, var(--hair) 70%, var(--canvas));}
.focus-main.solve .mk-tabs a{flex:1; padding:8px 4px; margin:0; border:none; border-radius:10px; background:none;
  color:var(--muted); font-family:var(--jp-font); font-size:14px; font-weight:700; text-align:center; text-decoration:none;}
.focus-main.solve .mk-tabs a.on{background:var(--surface); color:var(--ink-strong); box-shadow:0 1px 3px rgba(15,30,25,.12);}
.solve .mk-item.solve-body{flex:none; margin:0 0 14px; padding:0; border:none; background:none; border-radius:0;}
.solve .mk-no{display:inline-flex; align-items:baseline; gap:4px; min-width:0; height:auto; padding:0; border-radius:0; background:none;
  color:var(--accent); font-size:13px;}
.solve .mk-no b{font-size:15px;}
.solve .mk-of{color:var(--muted); font-weight:600;}
.solve .mk-kind{margin:4px 0 0;}
.focus-main.solve .mk-q{align-items:flex-start; gap:12px; margin:14px 0 18px;}
.solve .mk-q .jp-lg{font-size:24px;}
.solve .mk-audio{display:flex; gap:10px; margin:0;}
.solve .mk-audio .spk{width:44px; height:44px; min-width:44px; font-size:17px; background:var(--surface); color:var(--accent);
  border:1px solid var(--hair);}
.focus-main.solve .mk-opts{flex:1; display:flex; flex-direction:column; gap:10px; padding:0;}
.focus-main.solve .mk-opt{position:relative; flex:1 1 0; display:flex; align-items:center; gap:14px; min-height:60px;
  max-height:92px; padding:10px 16px; border:1.5px solid var(--hair); border-radius:14px; background:var(--surface);
  color:var(--ink-strong); cursor:pointer; transition:border-color .12s, background-color .12s;}
.focus-main.solve .mk-opt:hover{border-color:color-mix(in srgb, var(--accent) 40%, var(--hair));}
.solve .mk-opt input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.solve .mk-opt-text{font-size:19px;}
.focus-main.solve .mk-opt:has(input:checked){border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent);}
.solve .mk-opt:has(input:checked) .mk-opt-no{background:var(--accent); color:var(--on-accent);}
.solve .mk-opt:has(input:focus-visible){outline:3px solid var(--accent); outline-offset:2px;}
/* 한 문항씩(스크립트) / one item at a time (script) */
.mk-form.paged{flex:1; display:flex; flex-direction:column;}
.mk-form.paged .mk-section,.mk-form.paged .mk-item,.mk-form.paged .mk-sheet{display:none;}
.focus-main.solve .mk-form.paged .mk-item.on{display:flex; flex:1; margin:0;}
.mk-form.paged .mk-item.on:focus{outline:none;}
.mk-form.paged.sheet-open .mk-sheet{display:block; position:fixed; left:0; right:0; bottom:0; z-index:70; max-height:82vh;
  overflow:auto; margin:0; padding:18px 18px calc(18px + env(safe-area-inset-bottom)); border:none; border-radius:24px 24px 0 0;
  background:var(--surface); box-shadow:0 -14px 40px rgba(15,30,25,.22); animation:sheet-up .22s ease-out;}
.mk-form.paged.sheet-open::before{content:''; position:fixed; left:0; top:0; right:0; bottom:0; z-index:69; background:rgba(10,20,16,.45);}
.mk-sheet-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.mk-sheet-head .up-title{margin:0;}
.solve .mk-bubbles{grid-template-columns:repeat(auto-fill, minmax(38px, 1fr)); gap:8px; margin:12px 0;}
.solve .mk-bubble{height:38px; border:1.5px solid var(--hair); background:var(--surface); color:var(--muted); font-size:13px;}
.solve .mk-bubble.done{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.solve .mk-bubble.current{box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--ink-strong);}
.solve .mk-sheet .btn-primary{min-height:54px; border:none; border-radius:14px; background:var(--accent); color:var(--on-accent);}
.mk-bar .solve-bar-inner{justify-content:space-between;}
.mk-nav{flex:0 0 54px; height:54px; padding:0; border:1.5px solid var(--hair); border-radius:14px; background:var(--surface);
  color:var(--ink-strong); font-size:26px; line-height:1; cursor:pointer;}
.mk-nav:hover{border-color:var(--accent);}
.mk-nav:disabled{opacity:.35; cursor:default;}
.mk-sheet-btn{flex:1; height:54px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 14px;
  border:1.5px solid var(--hair); border-radius:14px; background:var(--surface); color:var(--ink-strong); font:inherit;
  font-size:15px; font-weight:700; cursor:pointer;}
.mk-sheet-btn:hover{border-color:var(--accent);}
.mk-done{color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums;}
.mk-done b{color:var(--accent);}

/* 듣기 · 받아쓰기 — 큰 재생 단추, 보기 칸 또는 큰 입력칸, 결과도 같은 자리에
   Listening and dictation: a big play button, option tiles or a large input, the result in the same place */
.focus-main.solve .practice-unit{margin:0 0 6px; padding:6px 12px; border-radius:12px; background:var(--surface);
  border:1px solid var(--hair); font-size:12.5px; color:var(--muted);}
.listen-stage{display:flex; flex-direction:column; align-items:center; gap:6px; margin:18px 0 20px; text-align:center;}
.listen-btns{display:flex; align-items:center; justify-content:center; gap:16px;}
.solve .listen-play{width:96px; height:96px; min-width:96px; margin:0; border-radius:50%; font-size:36px; background:var(--accent);
  color:var(--on-accent); box-shadow:0 0 0 10px var(--accent-soft);}
.solve .listen-play:hover{filter:brightness(1.06); background:var(--accent);}
.listen-stage .quiz-reading{margin:10px 0 0; font-size:13.5px; color:var(--muted);}
.listen-hint{margin:2px 0 0; color:var(--ink-strong); font-size:18px; font-weight:700;}
.listen-hint:empty{display:none;}
.listen-stage .listen-feedback{min-height:36px; margin:6px 0 0; padding:7px 16px; border-radius:999px; font-size:14.5px;}
.listen-stage .listen-feedback:empty{visibility:hidden;}
.write-area{flex:1; display:flex; flex-direction:column; justify-content:flex-start; gap:10px; padding:4px 0 0;}
.write-area input.write-input{width:100%; min-height:64px; padding:10px 16px; text-align:center; font-family:var(--jp-font);
  font-size:26px; border:1.5px solid var(--hair); border-radius:16px; background:var(--surface); color:var(--ink-strong);}
.write-area input.write-input:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 4px var(--accent-soft);}
.write-tip{margin:0; text-align:center; color:var(--muted);}
.write-area .write-feedback{min-height:42px; margin:4px 0 0; font-size:15px;}
.write-area .write-feedback:empty{visibility:hidden;}
.quiz-confirm.solve-bar .write-kb{flex:0 0 auto; padding:0 16px; font-size:15px; font-weight:700;}
/* 가나 키보드가 열리면 아래 줄이 키보드 바로 위로 / with the kana keyboard open, the bar rides just above it */
body.kb-open .write-bar{bottom:var(--kb-h, 0px); padding-bottom:10px;}
body.kb-open .focus-main.solve{padding-bottom:calc(var(--kb-h, 480px) + 96px);}
/* 키보드가 화면 절반을 덮으므로 지시·단원 줄·입력칸(키보드 안에 표시줄이 있다)·도움말을 접고 🔊 와 뜻을 한 줄로
   The keyboard covers half the screen: fold the instruction, unit line, input (the keyboard has its own line) and tip,
   and put 🔊 and the meaning on one row */
body.kb-open .write-page .practice-unit,body.kb-open .write-page .solve-ask,body.kb-open .write-page .quiz-reading,
body.kb-open .write-area input.write-input,body.kb-open .write-area .write-tip{display:none;}
body.kb-open .write-page .listen-stage{flex-direction:row; justify-content:center; gap:14px; margin:10px 0;}
body.kb-open .write-page .listen-play{width:52px; height:52px; min-width:52px; font-size:20px; box-shadow:0 0 0 5px var(--accent-soft);}
body.kb-open .write-page .listen-slow{width:38px; height:38px; min-width:38px; font-size:15px;}
body.kb-open .write-area{flex:none; padding:0;}
body.kb-open .write-area .write-feedback{margin:0;}
/* 결과 / the result */
.solve-done{flex:1; display:flex; flex-direction:column; margin-top:8px;}
.solve-done .done-q{display:flex; flex-direction:column; align-items:center; gap:4px; padding:40px 18px 30px; text-align:center;
  border-radius:24px; background:var(--surface); border:1px solid var(--hair);}
.done-label{margin:0; color:var(--muted); font-size:15px; font-weight:700;}
.done-score{margin:0; color:var(--accent); font-size:64px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums;}
.done-msg{margin:0; padding:16px 8px 0; text-align:center; font-weight:600; color:var(--ink-strong);}
.done-msg:empty{display:none;}
.done-actions{margin-top:auto; display:flex; flex-direction:column; gap:10px; padding:18px 0 0;}
.done-actions .btn{width:100%; min-height:54px; margin:0; border-radius:14px; display:inline-flex; align-items:center;
  justify-content:center; font-size:16px; font-weight:800; border:1.5px solid var(--hair); background:var(--surface);
  color:var(--ink-strong);}
.done-actions .btn-primary{border:none; background:var(--accent); color:var(--on-accent);}

/* 말하기 연습 — 같은 한 장: 점검 칩 · 역 점 세 개로 이은 단계 · 큰 단어 · 큰 마이크 · 아래에서 올라오는 결과
   Speaking practice on the same sheet: check chips, the three stages as station dots, the big word, the big mic and
   the result sheet */
.speak-page.solve .speak-check{margin:8px 0 4px;}
.speak-page.solve .check-chips{justify-content:flex-start; gap:6px;}
.speak-page.solve .check-chip{padding:4px 10px; border-radius:999px; border:1px solid var(--hair); background:var(--surface);
  color:var(--muted); font-size:12px;}
.speak-page.solve .check-chip.ok{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 35%, var(--hair));}
.speak-page.solve .check-chip.bad{color:var(--wrong); border-color:var(--wrong); background:var(--wrong-soft);}
.speak-page.solve .check-chip.unk{color:var(--ink-strong); border-color:color-mix(in srgb, var(--marker) 80%, var(--hair));}
.speak-page.solve .check-panel{padding:16px; border:1px solid var(--hair); border-radius:18px; background:var(--surface);}
.speak-page.solve .check-list li > b{background:var(--canvas);}
.speak-page.solve .check-list li.ok > b{background:var(--accent); color:var(--on-accent);}
.speak-page.solve .check-list li.bad > b{background:var(--wrong); color:#fff;}
.speak-page.solve .check-list li.unk > b{background:var(--marker); color:var(--ink-strong);}
.speak-page.solve .level-meter{background:var(--hair);}
.speak-page.solve .level-meter span{background:var(--accent);}
.speak-page.solve .speak-stage{margin-top:6px;}
/* 단계 = 역 점 세 개 / the stages as three station dots */
.speak-page.solve .speak-steps{width:100%; max-width:300px; gap:0; margin:6px auto 16px;}
.speak-page.solve .speak-steps li{position:relative; flex:1; flex-direction:column; gap:5px; padding:0; border-radius:0;
  background:none; color:var(--muted); font-size:12.5px; font-weight:700;}
.speak-page.solve .speak-steps li::before{content:''; position:absolute; top:11px; left:-50%; right:50%; height:3px;
  background:var(--hair);}
.speak-page.solve .speak-steps li:first-child::before{content:none;}
.speak-page.solve .speak-steps li.done::before,.speak-page.solve .speak-steps li.now::before{background:var(--accent);}
.speak-page.solve .speak-steps li span{position:relative; z-index:1; width:24px; height:24px; border:2px solid var(--hair);
  background:var(--surface); color:var(--muted);}
.speak-page.solve .speak-steps li.now{color:var(--ink-strong); background:none;}
.speak-page.solve .speak-steps li.now span{border-color:var(--accent); background:var(--accent); color:var(--on-accent);
  box-shadow:0 0 0 4px var(--accent-soft);}
.speak-page.solve .speak-steps li.done{color:var(--accent);}
.speak-page.solve .speak-steps li.done span{border-color:var(--accent); background:var(--accent); color:var(--on-accent);}
/* 단어 / the word */
.speak-page.solve .speak-word{margin:2px 0 16px;}
.speak-page.solve .speak-word-main{font-family:var(--jp-font); font-size:46px; font-weight:500; line-height:1.25;
  color:var(--ink-strong);}
.speak-page.solve .speak-word-main rt{font-size:.36em; color:var(--muted);}
.speak-page.solve .speak-reading{margin:6px 0 2px; color:var(--accent); font-size:17px;}
.speak-page.solve .speak-word .omean{margin:0; color:var(--muted); font-size:15px;}
.speak-page.solve .speak-listen{gap:8px; margin-top:12px;}
.speak-page.solve .speak-listen .btn{display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px;
  border:1px solid var(--hair); border-radius:999px; background:var(--surface); color:var(--ink-strong); font-size:13.5px;
  font-weight:700;}
.speak-page.solve .speak-listen .btn:hover{border-color:var(--accent);}
/* 마이크 단추 — 대기는 강조색, 듣는 중은 빨강(남은 시간 원), 알아듣는 중은 회색 / the mic: accent idle, red while
   listening (with the time ring), grey while recognising */
.speak-page.solve .speak-mic{margin:8px 0 6px;}
.speak-page.solve .mic-btn{--size:136px; background:var(--accent); color:var(--on-accent);
  box-shadow:0 0 0 12px var(--accent-soft); transition:background-color .2s, box-shadow .2s;}
.speak-page.solve .mic-btn:hover{filter:brightness(1.05);}
.speak-page.solve .mic-btn:focus-visible{outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:16px;}
.speak-page.solve .mic-btn[data-state="listening"],.speak-page.solve .mic-btn[data-state="hearing"]{background:var(--wrong);
  color:#fff; box-shadow:0 0 0 12px var(--wrong-soft);}
.speak-page.solve .mic-btn[data-state="processing"],.speak-page.solve .mic-btn[data-state="grading"]{background:var(--muted);
  color:#fff; box-shadow:0 0 0 12px var(--hair);}
.speak-page.solve .mic-ring{inset:-12px; background:conic-gradient(var(--wrong) calc(var(--left) * 360deg), transparent 0);}
.speak-page.solve .mic-status{margin-top:14px; color:var(--ink-strong);}
.speak-page.solve .interim-text{font-family:var(--jp-font); color:var(--accent);}
.speak-page.solve .speak-howto{color:var(--muted); font-size:13px;}
.speak-page.solve .link-btn{color:var(--muted);}
/* 오류·채점 한도·녹음 비교 칸 / the error, scoring-limit and record boxes */
.speak-page.solve .speak-error{padding:14px 16px; border:none; border-radius:16px; background:var(--wrong-soft);}
.speak-page.solve .speak-error-msg{color:var(--wrong);}
.speak-page.solve .speak-limit,.speak-page.solve .speak-record{padding:16px; border:1px solid var(--hair); border-radius:18px;
  background:var(--surface);}
.speak-page.solve .speak-limit-msg{color:var(--ink-strong);}
.speak-page.solve .speak-error .btn,.speak-page.solve .speak-limit .btn,.speak-page.solve .speak-record .btn,
.speak-page.solve .speak-result-actions .btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:42px; padding:0 14px; border:1.5px solid var(--hair); border-radius:12px; background:var(--surface);
  color:var(--ink-strong); font-size:13.5px; font-weight:700;}
.speak-page.solve .speak-error .btn-primary,.speak-page.solve .speak-limit .btn-primary,
.speak-page.solve .speak-record .btn-primary{border:none; background:var(--accent); color:var(--on-accent);}
.speak-page.solve .speak-record .btn-block{width:100%; min-height:54px; border-radius:14px; font-size:15.5px;}
/* 결과 시트 / the result sheet */
.speak-page.solve ~ .speak-result,.speak-page.solve .speak-result{padding:20px 18px calc(16px + env(safe-area-inset-bottom));
  border-top:none; border-radius:24px 24px 0 0; background:var(--surface); box-shadow:0 -14px 40px rgba(15,30,25,.16);}
.speak-page.solve .speak-result-head .result-ring{width:96px; height:96px;}
.speak-page.solve .speak-result-head .result-ring::before{background:var(--surface);}
.speak-page.solve .speak-result-head .result-ring span{font-size:26px;}
.solve-page .result-ring.bad{background:conic-gradient(var(--wrong) calc(var(--p) * 1%), var(--hair) 0);}
.solve-page .result-ring.bad span{color:var(--wrong);}
.speak-page.solve .speak-feedback{color:var(--ink-strong); font-size:17px;}
.speak-page.solve .kr-compare{padding:10px 14px; border:none; border-radius:14px; background:var(--canvas);}
.speak-page.solve .kr-row + .kr-row{border-top:1px solid var(--hair);}
.speak-page.solve .kr-label{color:var(--muted);}
.speak-page.solve .kr-compare .jp{font-family:var(--jp-font); font-size:18px;}
.speak-page.solve .kr-text{color:var(--accent);}
.speak-page.solve .kr-text.kr-mine{color:var(--wrong);}
.speak-page.solve .diff-box{gap:6px; font-family:var(--jp-font);}
.speak-page.solve .diff-char{min-width:38px; padding:6px 8px 5px; border-radius:10px;}
.speak-page.solve .diff-match,.speak-page.solve .lg-match{background:var(--accent-soft); color:var(--accent);}
.speak-page.solve .diff-wrong,.speak-page.solve .lg-wrong{background:var(--wrong-soft); color:var(--wrong);}
.speak-page.solve .diff-missing,.speak-page.solve .lg-missing{background:var(--hair); color:var(--muted);}
.speak-page.solve .diff-legend .lg{border-radius:999px; padding:2px 10px;}
.speak-page.solve .tip-box{border-radius:12px; background:var(--canvas); color:var(--ink-strong);}

/* 단어 카드 — 남는 높이를 채우는 흰 카드, 아래 몰라요·알아요. 새 단어 표시는 형광펜 색
   Flashcards: a white card filling the height, don't know / know below; the new-word badge in the highlighter colour */
.cards-page.solve #cardsApp{flex:1; display:flex; flex-direction:column;}
.cards-page.solve .fc-wrap{flex:1; display:flex; flex-direction:column; margin-top:12px;}
.cards-page.solve .flashcard{flex:1; min-height:46vh; padding:60px 22px 28px; border:1px solid var(--hair); border-radius:28px;
  background:var(--surface); box-shadow:0 18px 40px rgba(15,30,25,.08), 0 2px 6px rgba(15,30,25,.04);}
.cards-page.solve .flashcard:focus-visible{box-shadow:0 0 0 3px var(--accent);}
.cards-page.solve .fc-word{font-family:var(--jp-font); font-size:50px; font-weight:500; color:var(--ink-strong);}
.cards-page.solve .fc-word rt,.cards-page.solve .fc-word-sm rt{font-size:.36em; color:var(--muted);}
.cards-page.solve .fc-tap{margin-top:18px; color:var(--muted); font-size:13px;}
.cards-page.solve .fc-word-sm{font-family:var(--jp-font); font-size:26px; font-weight:500; color:var(--ink-strong);}
.cards-page.solve .fc-reading{font-family:var(--jp-font); color:var(--accent);}
.cards-page.solve .fc-romaji{color:var(--muted);}
.cards-page.solve .fc-meaning{margin-top:16px; font-size:26px; color:var(--ink-strong);}
.cards-page.solve .flashcard .fc-back{width:100%; max-width:520px;}
.cards-page.solve .fc-example{margin-top:18px; padding:12px 14px; border-top:none; border-radius:14px; background:var(--canvas);
  text-align:left;}
.cards-page.solve .fc-example .jp{font-family:var(--jp-font); font-size:16px;}
.cards-page.solve .fc-new,.cards-page.solve .fc-seen{top:18px; left:18px; padding:4px 10px; border:none; border-radius:999px;
  font-size:12px; font-weight:800;}
.cards-page.solve .fc-new{background:var(--marker); color:var(--ink-strong);}
.cards-page.solve .fc-seen{background:var(--canvas); color:var(--muted);}
.cards-page.solve .fc-tools{top:16px; right:16px;}
.cards-page.solve .fc-tools .spk,.cards-page.solve .fc-tools .star-btn{width:40px; height:40px; min-width:40px; border:1px solid var(--hair);
  background:var(--surface); color:var(--accent);}
.cards-page.solve .fc-tools .star-btn{color:var(--muted); font-size:19px;}
.cards-page.solve .fc-tools .star-btn.on{color:var(--ink-strong); border-color:var(--marker);
  background:color-mix(in srgb, var(--marker) 45%, var(--surface));}
.cards-page.solve .card-actions{gap:10px; margin-top:14px;}
.cards-page.solve .card-actions .btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:56px;
  border-radius:16px; font-size:16px; font-weight:800;}
.cards-page.solve .btn-again{border:1.5px solid var(--hair); background:var(--surface); color:var(--wrong);}
.cards-page.solve .btn-again:hover{border-color:var(--wrong);}
.cards-page.solve #btnKnow{border:none; background:var(--accent); color:var(--on-accent);}
.cards-page.solve .cards-help{margin-top:10px; color:var(--muted); font-size:12.5px;}
/* 10장마다 쉬어 가기·다 봤을 때 / the checkpoint every ten cards and the done card */
.cards-page.solve .cards-check,.cards-page.solve .cards-done{margin:14px 0 0; padding:26px 20px 18px; border:1px solid var(--hair);
  border-radius:24px; background:var(--surface); box-shadow:none; text-align:center;}
.cards-page.solve .stack-actions .btn{display:flex; align-items:center; justify-content:center; min-height:54px; border-radius:14px;
  border:1.5px solid var(--hair); background:var(--surface); color:var(--ink-strong); font-size:15.5px; font-weight:700;}
.cards-page.solve .stack-actions .btn-primary{border:none; background:var(--accent); color:var(--on-accent); font-weight:800;}
.cards-page.solve .learn-eyebrow{color:var(--accent);}

@media (max-width:600px){
  .focus-main.solve{padding-left:16px; padding-right:16px;}
  .solve .focus-top{gap:10px;}
  .solve-q .jp-lg{font-size:23px;}
  .solve .choice-text{font-size:19px;}
  .mk-paged .mk-title{visibility:hidden;}
  .solve .listen-play{width:88px; height:88px; min-width:88px; font-size:32px;}
  .write-area input.write-input{font-size:23px;}
  .solve .quiz-q.is-kana .quiz-prompt{width:132px; height:132px; font-size:82px;}
  .speak-page.solve .speak-word-main{font-size:38px;}
  .speak-page.solve .mic-btn{--size:124px;}
  .cards-page.solve .fc-word{font-size:44px;}
}
@media (max-height:700px){
  .focus-main.solve .solve-choices > li,.focus-main.solve .quiz-options.as-rows .quiz-opt,.focus-main.solve .mk-opt{min-height:52px;}
  .solve .quiz-q.is-kana .quiz-prompt{width:112px; height:112px; font-size:68px;}
  .focus-main.solve .quiz-options.as-grid{grid-auto-rows:minmax(68px, 1fr);}
}
@media (min-width:881px){
  .solve-q .jp-lg{font-size:28px;}
  .solve .choice-text{font-size:21px;}
}
@media (min-width:881px) and (min-height:800px){
  .focus-main.solve .solve-choices > li,.focus-main.solve .quiz-options.as-rows .quiz-opt,.focus-main.solve .mk-opt{max-height:104px;}
}

/* ==== dark theme: generated by tools/css/dark.py — 고치지 말고 다시 만드세요 / regenerate, do not edit ==== */
/* 어두운 화면은 html[data-theme=dark] 일 때 — 화면 색을 고르지 않았으면 head 의 스크립트가 기기 밝기를 보고 붙인다.
   Dark applies with html[data-theme=dark]; with no choice, the head script sets it from the system setting. */
:root{color-scheme:light;}
:root[data-theme="dark"]{--paper:#121614;--paper-deep:#1F2623;--ink:#E9EEEB;--ink-soft:#9CA8A3;--red:#EF6F64;--red-soft:#3A2522;--teal:#2E9C84;--gold:#D4AF5E;--card:#1B201E;--line:#2F3733;--ok-bg:#163029;--bad-bg:#3A2220;--warm-bg:#2B2614;--warm-line:#5A4B1F;--warm-ink:#E8CC7A;--canvas:#121614;--surface:#1B201E;--ink-strong:#E9EEEB;--muted:#9CA8A3;--hair:#2F3733;--accent:#3DBB9F;--accent-soft:#163029;--marker:#6E5B1E;--wrong:#EF6F64;--wrong-soft:#3A2220;--on-accent:#0B1F1A;color-scheme:dark;}
@media screen{
:where(:root[data-theme="dark"]) body{background:var(--paper);color:var(--ink);}
:where(:root[data-theme="dark"]) a{color:var(--teal);}
:where(:root[data-theme="dark"]) .sidebar{background:var(--surface);border-right:1px solid var(--hair);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .brand{border-bottom:1px solid var(--hair);}
:where(:root[data-theme="dark"]) .brand small{color:var(--muted);}
:where(:root[data-theme="dark"]) .brand a{color:inherit;}
:where(:root[data-theme="dark"]) .tab-btn{background:none;border:none;color:var(--muted);}
:where(:root[data-theme="dark"]) .tab-btn:hover{background:var(--canvas);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .tab-btn.active{background:var(--accent-soft);color:var(--accent);}
:where(:root[data-theme="dark"]) .badge-admin{background:var(--gold);color:#fff;}
:where(:root[data-theme="dark"]) .account-login{background:var(--teal);color:#fff;}
:where(:root[data-theme="dark"]) .account-login:hover{background:#0F6857;background:color-mix(in srgb, var(--teal) 82%, #000);}
:where(:root[data-theme="dark"]) .avatar{background:var(--teal);color:#fff;border:2px solid #1F1F1F;}
:where(:root[data-theme="dark"]) .profile-dropdown{background:var(--card);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .pd-head{border-bottom:1px solid var(--line);}
:where(:root[data-theme="dark"]) .pd-id{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .pd-item{border:none;background:none;color:var(--ink);}
:where(:root[data-theme="dark"]) .pd-item:hover,:where(:root[data-theme="dark"]) .pd-item:focus-visible{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .pd-item.active{background:var(--paper);}
:where(:root[data-theme="dark"]) .pd-ico{color:var(--teal);}
:where(:root[data-theme="dark"]) .pd-sep{background:var(--line);}
:where(:root[data-theme="dark"]) .pd-label{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .pd-logout,:where(:root[data-theme="dark"]) .pd-logout .pd-ico{color:var(--red);}
:where(:root[data-theme="dark"]) .eyebrow{color:var(--accent);}
:where(:root[data-theme="dark"]) .page-title{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .page-desc{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .card{background:var(--card);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .table-wrap{border:1px solid var(--line);background:var(--card);}
:where(:root[data-theme="dark"]) th,:where(:root[data-theme="dark"]) td{border-bottom:1px solid var(--line);}
:where(:root[data-theme="dark"]) th{background:var(--canvas);color:var(--muted);}
:where(:root[data-theme="dark"]) tr:last-child td{border-bottom:none;}
:where(:root[data-theme="dark"]) label{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) input[type=text],:where(:root[data-theme="dark"]) input[type=password],:where(:root[data-theme="dark"]) input[type=email],:where(:root[data-theme="dark"]) input[type=number],:where(:root[data-theme="dark"]) input[type=date],:where(:root[data-theme="dark"]) select,:where(:root[data-theme="dark"]) textarea{border:1px solid var(--line);background:var(--surface);color:var(--ink);}
:where(:root[data-theme="dark"]) input:focus,:where(:root[data-theme="dark"]) select:focus,:where(:root[data-theme="dark"]) textarea:focus{border-color:var(--accent);}
:where(:root[data-theme="dark"]) .hint{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .pw-toggle{border:0;background:transparent;color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .pw-toggle:hover,:where(:root[data-theme="dark"]) .pw-toggle[aria-pressed="true"]{color:var(--teal);}
:where(:root[data-theme="dark"]) .caps-warn{color:var(--red);}
:where(:root[data-theme="dark"]) .check-row{color:var(--ink);}
:where(:root[data-theme="dark"]) .temp-password{border-color:var(--gold);}
:where(:root[data-theme="dark"]) .temp-password-value{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);}
:where(:root[data-theme="dark"]) .btn:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
:where(:root[data-theme="dark"]) .btn-primary:hover{border-color:var(--accent);}
:where(:root[data-theme="dark"]) .btn-danger{background:var(--red);color:#fff;border-color:var(--red);}
:where(:root[data-theme="dark"]) .msg-error{color:var(--red);}
:where(:root[data-theme="dark"]) .msg-ok{color:var(--teal);}
:where(:root[data-theme="dark"]) .field-error{color:var(--red);}
:where(:root[data-theme="dark"]) .empty{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .badge{background:var(--paper-deep);border:1px solid transparent;color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .badge-answered{background:var(--accent-soft);color:var(--accent);border-color:transparent;}
:where(:root[data-theme="dark"]) .badge-wait{background:var(--wrong-soft);color:var(--wrong);border-color:transparent;}
:where(:root[data-theme="dark"]) .badge-gold{background:var(--warm-bg);color:var(--warm-ink);border-color:var(--warm-line);}
:where(:root[data-theme="dark"]) .uword{border-bottom:2px solid var(--red);}
:where(:root[data-theme="dark"]) .blankbox{border-bottom:2px solid var(--ink-soft);color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .correct{color:var(--teal);}
:where(:root[data-theme="dark"]) .oyomi{color:var(--teal);}
:where(:root[data-theme="dark"]) .omean{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .spk{background:var(--teal);color:#fff;border:none;}
:where(:root[data-theme="dark"]) .spk:hover{background:#0F6857;background:color-mix(in srgb, var(--teal) 82%, #000);}
:where(:root[data-theme="dark"]) .choice-btn{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);}
:where(:root[data-theme="dark"]) .choice-btn:hover{border-color:var(--teal);background:var(--canvas);}
:where(:root[data-theme="dark"]) .choice-num{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .result-row{border:1.5px solid var(--line);background:var(--surface);}
:where(:root[data-theme="dark"]) .result-row.is-correct{border-color:var(--teal);background:var(--accent-soft);}
:where(:root[data-theme="dark"]) .result-row.is-picked-wrong{border-color:var(--red);background:var(--wrong-soft);}
:where(:root[data-theme="dark"]) .progress-track{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .progress-fill{background:var(--teal);}
:where(:root[data-theme="dark"]) .stat-num{color:var(--teal);}
:where(:root[data-theme="dark"]) .stat-label{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .set-card{color:inherit;background:var(--card);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .set-card:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .set-card-sub{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .set-card-stat{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .kana-cell{background:var(--card);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .kana-kata{color:var(--teal);}
:where(:root[data-theme="dark"]) .kana-romaji{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .kana-row-label{color:var(--teal);}
:where(:root[data-theme="dark"]) .quiz-box{background:var(--card);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .quiz-progress{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .quiz-score{color:var(--teal);}
:where(:root[data-theme="dark"]) .score-big{color:var(--teal);}
:where(:root[data-theme="dark"]) .score-unit{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .skill-sub{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .consent-box{border:1px solid var(--line);background:var(--paper);}
:where(:root[data-theme="dark"]) .consent-item{color:var(--ink);}
:where(:root[data-theme="dark"]) .interim-text{color:var(--teal);}
:where(:root[data-theme="dark"]) .diff-match{color:var(--teal);background:var(--accent-soft);}
:where(:root[data-theme="dark"]) .diff-wrong{color:var(--red);background:var(--wrong-soft);}
:where(:root[data-theme="dark"]) .diff-missing{color:var(--ink-soft);background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .diff-char small{color:var(--red);}
:where(:root[data-theme="dark"]) .tip-box{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .kana-keyboard{background:var(--card);border-top:1px solid var(--line);}
:where(:root[data-theme="dark"]) .kb-display{background:var(--surface);border:1.5px solid var(--teal);}
:where(:root[data-theme="dark"]) .kb-display-text{color:var(--ink);}
:where(:root[data-theme="dark"]) .kb-display-text.empty{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .kb-caret{background:var(--teal);}
:where(:root[data-theme="dark"]) .kb-tab{border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .kb-tab.active{background:var(--teal);color:#fff;border-color:var(--teal);}
:where(:root[data-theme="dark"]) .kb-close{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .kb-key{border:1px solid var(--line);background:var(--surface);color:var(--ink);}
:where(:root[data-theme="dark"]) .kb-key:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .kb-key:active{background:var(--teal);color:#fff;}
:where(:root[data-theme="dark"]) .kr-compare{background:var(--paper);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .kr-row + .kr-row{border-top:1px dashed var(--line);}
:where(:root[data-theme="dark"]) .kr-label{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .kr-text{color:var(--teal);}
:where(:root[data-theme="dark"]) .kr-text.kr-mine{color:var(--red);}
:where(:root[data-theme="dark"]) .chart-bar-wrap{background:var(--paper);}
:where(:root[data-theme="dark"]) .chart-label{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .col-head{color:var(--teal);}
:where(:root[data-theme="dark"]) .seg{border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .seg-btn{border:0;background:var(--paper);color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .seg-btn.active{background:var(--teal);color:#fff;}
:where(:root[data-theme="dark"]) .guide-toggle{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .write-stage{background:var(--card);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .write-progress{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .write-romaji{color:var(--teal);}
:where(:root[data-theme="dark"]) .write-kr{color:var(--red);}
:where(:root[data-theme="dark"]) .write-guide{color:var(--line);}
:where(:root[data-theme="dark"]) #writeCanvas{background:transparent;background-image:linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .lang-item{border:1px solid var(--line);background:var(--paper);}
:where(:root[data-theme="dark"]) .lang-item:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .lang-item input:checked ~ .lang-name{color:var(--teal);}
:where(:root[data-theme="dark"]) .lang-name{color:var(--ink);}
:where(:root[data-theme="dark"]) .lang-native{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .lang-count{color:var(--ink-soft);background:var(--card);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .lang-field label{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .lang-arrow{color:var(--teal);}
:where(:root[data-theme="dark"]) .trans-chip{border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .trans-chip.correct{border-color:var(--teal);color:var(--teal);}
:where(:root[data-theme="dark"]) .draft-ok{border-left-color:var(--teal);}
:where(:root[data-theme="dark"]) .draft-warn{border-left-color:var(--gold);}
:where(:root[data-theme="dark"]) .draft-blocked{border-left-color:var(--line);}
:where(:root[data-theme="dark"]) .draft-note{color:var(--red);background:var(--paper);}
:where(:root[data-theme="dark"]) .draft-side{background:var(--paper);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .draft-label{color:var(--teal);}
:where(:root[data-theme="dark"]) .draft-choice-orig{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .translator-row{border:1px solid var(--line);background:var(--paper);}
:where(:root[data-theme="dark"]) .translator-row.on{border-color:var(--teal);background:var(--card);}
:where(:root[data-theme="dark"]) .test-row{border:1px solid var(--line);background:var(--paper);}
:where(:root[data-theme="dark"]) .test-row.ok{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .test-row.ok strong{color:var(--teal);}
:where(:root[data-theme="dark"]) .test-row.fail{border-color:var(--red);}
:where(:root[data-theme="dark"]) .test-row.fail strong{color:var(--red);}
:where(:root[data-theme="dark"]) .guide-fields label{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .guide-choice{border-top:1px dashed var(--line);}
:where(:root[data-theme="dark"]) .guide-choice .guide-orig.correct{color:var(--teal);}
:where(:root[data-theme="dark"]) .guide-choice .gc-row > span{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .guide-explanation{background:var(--paper);border-left:3px solid var(--teal);}
:where(:root[data-theme="dark"]) .visually-hidden{border:0 !important;}
:where(:root[data-theme="dark"]) .avatar-form label.btn{color:var(--ink);}
:where(:root[data-theme="dark"]) .info-list dt{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .back-link{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .back-link:hover{color:var(--teal);}
:where(:root[data-theme="dark"]) .unit-icon{background:var(--paper-deep);color:var(--teal);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .chip{background:var(--card);border:1px solid var(--line);color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .chip-streak.on{background:var(--warm-bg);border-color:var(--warm-line);color:var(--warm-ink);}
:where(:root[data-theme="dark"]) .goal-ring{background:conic-gradient(var(--teal) calc(var(--p) * 1%), var(--paper-deep) 0);}
:where(:root[data-theme="dark"]) .goal-ring::before{background:var(--card);}
:where(:root[data-theme="dark"]) .goal-ring span{color:var(--teal);}
:where(:root[data-theme="dark"]) .hero-card{color:var(--on-accent);background:var(--accent);}
:where(:root[data-theme="dark"]) .hero-card .unit-icon{background:rgba(255,255,255,.14);color:inherit;border-color:rgba(255,255,255,.25);}
:where(:root[data-theme="dark"]) .hero-card .progress-track{background:rgba(255,255,255,.2);}
:where(:root[data-theme="dark"]) .hero-card .progress-fill{background:var(--marker);}
:where(:root[data-theme="dark"]) .course-item{background:var(--card);border:1px solid var(--line);color:var(--ink);}
:where(:root[data-theme="dark"]) .course-item:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .course-item.next{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .course-item.done .unit-icon{background:var(--teal);color:#fff;border-color:var(--teal);}
:where(:root[data-theme="dark"]) .course-meta{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) details.fold > summary::after{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .step-card{background:var(--card);border:1px solid var(--line);color:var(--ink);}
:where(:root[data-theme="dark"]) .step-card:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .step-no{background:var(--paper-deep);color:var(--teal);}
:where(:root[data-theme="dark"]) .step-card.done .step-no{background:var(--teal);color:#fff;}
:where(:root[data-theme="dark"]) .set-row{border:1px solid var(--line);background:var(--surface);color:var(--ink);}
:where(:root[data-theme="dark"]) .set-row:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .set-row-no{background:var(--paper-deep);color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .set-row.done .set-row-no{background:var(--teal);color:#fff;}
:where(:root[data-theme="dark"]) .set-row-state{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .pr-filter-label{color:var(--muted);}
:where(:root[data-theme="dark"]) .pr-unit-title{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .pr-unit-ico{background:var(--accent-soft);color:var(--accent);}
:where(:root[data-theme="dark"]) .pr-unit-no{color:var(--accent);}
:where(:root[data-theme="dark"]) .pr-unit-count{color:var(--muted);}
:where(:root[data-theme="dark"]) .pr-unit.done .pr-unit-ico{background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .pr-groups > li + li{border-top:1px solid var(--hair);}
:where(:root[data-theme="dark"]) .pr-group{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .pr-group:hover{background:var(--canvas);}
:where(:root[data-theme="dark"]) .pr-glyph{border:1.5px solid var(--hair);background:var(--surface);color:var(--accent);}
:where(:root[data-theme="dark"]) .pr-group.done .pr-glyph{border-color:var(--accent);background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .pr-name .hint{color:var(--muted);}
:where(:root[data-theme="dark"]) .pr-acc{color:var(--muted);}
:where(:root[data-theme="dark"]) .pr-num{color:var(--muted);}
:where(:root[data-theme="dark"]) .pr-group.done .pr-num{color:var(--accent);}
:where(:root[data-theme="dark"]) .pr-go{color:var(--muted);}
:where(:root[data-theme="dark"]) .word-chip{background:var(--paper);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .flashcard{background:var(--card);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .fc-reading{color:var(--teal);}
:where(:root[data-theme="dark"]) .fc-example{border-top:1px dashed var(--line);}
:where(:root[data-theme="dark"]) .btn-again{color:var(--red);border-color:#E3B7B0;background:var(--surface);}
:where(:root[data-theme="dark"]) .btn-again:hover{border-color:var(--red);}
:where(:root[data-theme="dark"]) .review-hero.due{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .review-num{color:var(--teal);}
:where(:root[data-theme="dark"]) .interval-steps li{background:var(--paper);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .interval-steps li + li::before{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .goal-choice span{border:1px solid var(--line);background:var(--surface);}
:where(:root[data-theme="dark"]) .goal-choice small{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .goal-choice input:checked + span{border-color:var(--teal);background:rgba(18,122,102,.08);}
:where(:root[data-theme="dark"]) .kstroke .ks-under path{fill:none;stroke:var(--hair);}
:where(:root[data-theme="dark"]) .kstroke .ks-stroke{fill:none;stroke:var(--ink);}
:where(:root[data-theme="dark"]) .kstroke .ks-arrow{fill:var(--ink);stroke:#1F1F1F;}
:where(:root[data-theme="dark"]) .kstroke .ks-start{fill:var(--ink);stroke:#1F1F1F;}
:where(:root[data-theme="dark"]) .kstroke .ks-badge{fill:var(--ink);stroke:#1F1F1F;}
:where(:root[data-theme="dark"]) .kstroke .ks-num{fill:#fff;}
:where(:root[data-theme="dark"]) .kstroke.ghost .ks-stroke{stroke:var(--hair);}
:where(:root[data-theme="dark"]) .kstroke.ghost .ks-arrow{fill:color-mix(in srgb, var(--muted) 45%, var(--hair));stroke:none;}
:where(:root[data-theme="dark"]) .kstroke.ghost .ks-start{fill:color-mix(in srgb, var(--muted) 45%, var(--hair));stroke:none;}
:where(:root[data-theme="dark"]) .kstroke.ghost .ks-badge{fill:#fff;stroke:color-mix(in srgb, var(--muted) 45%, var(--hair));}
:where(:root[data-theme="dark"]) .kstroke.ghost .ks-num{fill:var(--muted);}
:where(:root[data-theme="dark"]) .stroke-view .kstroke-box{background:var(--surface);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .stroke-credit a{color:inherit;}
:where(:root[data-theme="dark"]) .stroke-viewer{background:var(--paper);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .stroke-viewer .kstroke-box.big{background:var(--surface);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .stroke-cell{background:var(--surface);border:1px solid var(--line);color:inherit;}
:where(:root[data-theme="dark"]) .stroke-cell:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .stroke-cell.on{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .stroke-cell-romaji{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .week-count{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .week-track{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .week-fill{background:rgba(18,122,102,.55);}
:where(:root[data-theme="dark"]) .week-fill.met{background:var(--teal);}
:where(:root[data-theme="dark"]) .week-label{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .week-bar.today .week-label{color:var(--teal);}
:where(:root[data-theme="dark"]) .focus-page{background:var(--paper);}
:where(:root[data-theme="dark"]) .focus-top{background:var(--paper);}
:where(:root[data-theme="dark"]) .focus-close{color:var(--ink-soft);border:none;background:none;}
:where(:root[data-theme="dark"]) .focus-close:hover,:where(:root[data-theme="dark"]) .focus-close:focus-visible{background:var(--paper-deep);color:var(--ink);}
:where(:root[data-theme="dark"]) .focus-progress{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .focus-progress > span{background:var(--teal);}
:where(:root[data-theme="dark"]) .focus-count{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .q-dot::before{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .q-dot.done::before{background:color-mix(in srgb, var(--accent) 45%, var(--hair));}
:where(:root[data-theme="dark"]) .q-dot.current::before{background:var(--teal);}
:where(:root[data-theme="dark"]) .q-meta{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .q-help{border:none;background:none;color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .q-help > summary .i{border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .q-help p{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .result-note{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .answer-sheet{background:var(--card);border-top:4px solid var(--teal);}
:where(:root[data-theme="dark"]) .answer-sheet.wrong{border-top-color:var(--red);background:var(--surface);}
:where(:root[data-theme="dark"]) .answer-sheet.late{border-top-color:var(--gold);}
:where(:root[data-theme="dark"]) .sheet-head{color:var(--teal);}
:where(:root[data-theme="dark"]) .answer-sheet.wrong .sheet-head{color:var(--red);}
:where(:root[data-theme="dark"]) .answer-sheet.late .sheet-head{color:var(--warm-ink);}
:where(:root[data-theme="dark"]) .sheet-more{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .sheet-admin > summary{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .quiz-feedback.ok{background:var(--accent-soft);color:var(--teal);}
:where(:root[data-theme="dark"]) .quiz-feedback.bad{background:var(--wrong-soft);color:var(--red);}
:where(:root[data-theme="dark"]) .quiz-feedback.late{background:var(--warm-bg);color:var(--warm-ink);}
:where(:root[data-theme="dark"]) .focus-main .quiz-box{border:none;background:none;}
:where(:root[data-theme="dark"]) .quiz-sub{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .result-ring{background:conic-gradient(var(--teal) calc(var(--p) * 1%), var(--paper-deep) 0);}
:where(:root[data-theme="dark"]) .result-ring::before{background:var(--paper);}
:where(:root[data-theme="dark"]) .result-ring span{color:var(--teal);}
:where(:root[data-theme="dark"]) .result-ring.low{background:conic-gradient(var(--gold) calc(var(--p) * 1%), var(--paper-deep) 0);}
:where(:root[data-theme="dark"]) .result-ring.low span{color:var(--warm-ink);}
:where(:root[data-theme="dark"]) .flow-bar{background:var(--card);border:1.5px solid var(--teal);}
:where(:root[data-theme="dark"]) .flow-step{color:#fff;background:var(--teal);}
:where(:root[data-theme="dark"]) .view-tabs{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .view-tabs a{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .view-tabs a.on{background:var(--card);color:var(--ink);}
:where(:root[data-theme="dark"]) .goal-mini{background:var(--card);border:1px solid var(--line);color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .goal-mini.met{border-color:color-mix(in srgb, var(--accent) 45%, var(--hair));color:var(--teal);}
:where(:root[data-theme="dark"]) .hero-cta{background:var(--marker);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .first-steps{background:var(--card);border:1px dashed var(--line);}
:where(:root[data-theme="dark"]) .first-steps li{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .first-steps li strong{color:var(--ink);}
:where(:root[data-theme="dark"]) .first-steps li::before{background:var(--teal);color:#fff;}
:where(:root[data-theme="dark"]) .first-steps-note{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .guest-lang > summary{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .learn-eyebrow{color:var(--teal);}
:where(:root[data-theme="dark"]) .learn-desc{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .learn-bar span{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .learn-bar span.done{background:color-mix(in srgb, var(--accent) 45%, var(--hair));}
:where(:root[data-theme="dark"]) .learn-bar span.now{background:var(--teal);}
:where(:root[data-theme="dark"]) .step-card.now{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .step-card.now .step-no{background:var(--gold);color:#fff;}
:where(:root[data-theme="dark"]) details.more > summary::after{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .review-stats > div{background:var(--card);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .vis-choice{border:0;}
:where(:root[data-theme="dark"]) .vis-option{border:1.5px solid var(--line);background:var(--card);}
:where(:root[data-theme="dark"]) .vis-option:has(input:checked){border-color:var(--teal);}
:where(:root[data-theme="dark"]) .vis-option small{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .badge-lock{background:var(--paper-deep);color:var(--ink);}
:where(:root[data-theme="dark"]) .check-chips{border:0;background:none;}
:where(:root[data-theme="dark"]) .check-chip{border:1px solid var(--line);background:var(--card);color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .check-chip.ok{border-color:color-mix(in srgb, var(--accent) 45%, var(--hair));color:var(--teal);}
:where(:root[data-theme="dark"]) .check-chip.bad{border-color:var(--red);color:var(--red);background:var(--wrong-soft);}
:where(:root[data-theme="dark"]) .check-chip.unk{border-color:var(--gold);}
:where(:root[data-theme="dark"]) .check-panel{border:1px solid var(--line);background:var(--card);}
:where(:root[data-theme="dark"]) .check-list li > b{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .check-list li.ok > b{background:var(--teal);color:#fff;}
:where(:root[data-theme="dark"]) .check-list li.bad > b{background:var(--red);color:#fff;}
:where(:root[data-theme="dark"]) .check-list li.unk > b{background:var(--gold);color:#fff;}
:where(:root[data-theme="dark"]) .level-meter{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .level-meter span{background:var(--teal);}
:where(:root[data-theme="dark"]) .speak-steps li{color:var(--ink-soft);background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .speak-steps li span{background:var(--card);}
:where(:root[data-theme="dark"]) .speak-steps li.now{background:var(--teal);color:#fff;}
:where(:root[data-theme="dark"]) .speak-steps li.now span{color:var(--teal);}
:where(:root[data-theme="dark"]) .speak-steps li.done{color:var(--teal);}
:where(:root[data-theme="dark"]) .mic-btn{border:0;background:var(--teal);color:#fff;}
:where(:root[data-theme="dark"]) .mic-ring{background:conic-gradient(var(--red) calc(var(--left) * 360deg), transparent 0);}
:where(:root[data-theme="dark"]) .mic-btn[data-state="listening"],:where(:root[data-theme="dark"]) .mic-btn[data-state="hearing"]{background:var(--red);}
:where(:root[data-theme="dark"]) .mic-btn[data-state="processing"],:where(:root[data-theme="dark"]) .mic-btn[data-state="grading"]{background:var(--muted);}
:where(:root[data-theme="dark"]) .mic-status{color:var(--ink);}
:where(:root[data-theme="dark"]) .link-btn{border:0;background:none;color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .speak-error{border:1.5px solid var(--red);background:var(--wrong-soft);}
:where(:root[data-theme="dark"]) .speak-error-msg{color:var(--red);}
:where(:root[data-theme="dark"]) .speak-record{border:1px dashed var(--line);background:var(--card);}
:where(:root[data-theme="dark"]) .speak-result{background:var(--paper);border-top:3px solid var(--teal);}
:where(:root[data-theme="dark"]) .result-ring.bad{background:conic-gradient(var(--red) calc(var(--p) * 1%), var(--paper-deep) 0);}
:where(:root[data-theme="dark"]) .result-ring.bad span{color:var(--red);}
:where(:root[data-theme="dark"]) .lg-match{color:var(--teal);background:var(--accent-soft);}
:where(:root[data-theme="dark"]) .lg-wrong{color:var(--red);background:var(--wrong-soft);}
:where(:root[data-theme="dark"]) .lg-missing{color:var(--ink-soft);background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .letters-langs .chip{border:1px solid var(--line);background:var(--card);color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .letters-langs .chip.on{background:var(--teal);border-color:var(--teal);color:#fff;}
:where(:root[data-theme="dark"]) .letter-cell.spk{border:1px solid var(--line);background:var(--paper);color:var(--ink);}
:where(:root[data-theme="dark"]) .letter-cell.spk:hover,:where(:root[data-theme="dark"]) .letter-cell.spk:focus-visible{background:var(--card);border-color:var(--teal);}
:where(:root[data-theme="dark"]) .letter-name{color:var(--teal);}
:where(:root[data-theme="dark"]) .letter-sound{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .letter-ex{color:var(--ink);}
:where(:root[data-theme="dark"]) .letter-ex small{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .rule-no{background:var(--teal);color:#fff;}
:where(:root[data-theme="dark"]) .lq-top{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .lq-opt.is-right{background:var(--accent-soft);border-color:var(--teal);color:var(--teal);}
:where(:root[data-theme="dark"]) .lq-opt.is-wrong{background:var(--wrong-soft);border-color:var(--red);color:var(--red);}
:where(:root[data-theme="dark"]) .lq-feedback.ok{color:var(--teal);}
:where(:root[data-theme="dark"]) .lq-feedback.bad{color:var(--red);}
:where(:root[data-theme="dark"]) .brand-link{color:inherit;}
:where(:root[data-theme="dark"]) .brand-logo{color:var(--accent);}
:where(:root[data-theme="dark"]) .alerts-menu > summary{background:var(--card);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .alerts-dot{background:var(--red);}
:where(:root[data-theme="dark"]) .alerts-dropdown{background:var(--card);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .alerts-item{color:var(--ink);background:var(--paper);}
:where(:root[data-theme="dark"]) .alerts-item:hover{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .alerts-due::before{color:var(--red);}
:where(:root[data-theme="dark"]) .greet-card{background:var(--card);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .greet-sub{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .points-card{color:var(--on-accent);background:var(--accent);}
:where(:root[data-theme="dark"]) .review-first{background:var(--warm-bg);border:1px solid var(--warm-line);color:var(--ink);}
:where(:root[data-theme="dark"]) .review-first:hover{border-color:var(--warm-line);}
:where(:root[data-theme="dark"]) .rf-ico{background:var(--marker);color:var(--warm-ink);}
:where(:root[data-theme="dark"]) .rf-cta{color:var(--warm-ink);}
:where(:root[data-theme="dark"]) .learn-review-first{border-color:var(--warm-line);background:var(--warm-bg);color:var(--warm-ink);}
:where(:root[data-theme="dark"]) .quiz-retry-note{background:var(--warm-bg);border:1px solid var(--warm-line);color:var(--warm-ink);}
:where(:root[data-theme="dark"]) .focus-count.retry{color:var(--warm-ink);}
:where(:root[data-theme="dark"]) .slogan-title{color:var(--teal);}
:where(:root[data-theme="dark"]) .slogan-sub{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .hero-card > .hero-art{background:no-repeat right bottom / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 96'%3E%3Ccircle cx='132' cy='30' r='14' fill='%23fff'/%3E%3Cpath d='M0 96 L48 40 L78 70 L112 26 L180 96 Z' fill='%23fff'/%3E%3Cpath d='M100 42 L112 26 L124 42 L116 38 L112 44 L108 38 Z' fill='%23cfe3dc'/%3E%3C/svg%3E");}
:where(:root[data-theme="dark"]) .lang-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);}
:where(:root[data-theme="dark"]) .lang-btn.on{border-color:var(--teal);background:var(--accent-soft);}
:where(:root[data-theme="dark"]) .lang-sub{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .course-card{color:var(--ink);background:var(--card);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .course-card:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .course-art{background:linear-gradient(135deg,var(--accent-soft),color-mix(in srgb, var(--accent) 22%, var(--surface)));color:var(--teal);}
:where(:root[data-theme="dark"]) .course-card[data-lang="ja"] .course-art{background:linear-gradient(135deg,#fff 40%,#F6D3D8);color:#BC002D;}
:where(:root[data-theme="dark"]) .course-card[data-lang="ko"] .course-art{background:linear-gradient(135deg,#FCE3E5,#DCE6F7);color:#0047A0;}
:where(:root[data-theme="dark"]) .course-card[data-lang="en"] .course-art{background:linear-gradient(135deg,#DDE3F2,#F6D9DD);color:#012169;}
:where(:root[data-theme="dark"]) .course-card[data-lang="es"] .course-art{background:linear-gradient(180deg,#F7D7D8 20%,#FBEAB0 20%,#FBEAB0 80%,#F7D7D8 80%);color:#AA151B;}
:where(:root[data-theme="dark"]) .course-card[data-lang="zh"] .course-art{background:linear-gradient(135deg,#F9D3CF,#FBEBB2);color:#DE2910;}
:where(:root[data-theme="dark"]) .course-card[data-lang="vi"] .course-art{background:linear-gradient(135deg,#F9D3CF,#FDF3A8);color:#DA251D;}
:where(:root[data-theme="dark"]) .exchange .ex-safety{background:var(--accent-soft);border:1px solid color-mix(in srgb, var(--accent) 25%, var(--hair));}
:where(:root[data-theme="dark"]) .ex-safety summary{color:var(--teal);}
:where(:root[data-theme="dark"]) .ex-filter label{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .ex-arrow{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .ex-link{color:var(--ink);}
:where(:root[data-theme="dark"]) .ex-link:hover{background:var(--canvas);}
:where(:root[data-theme="dark"]) .ex-excerpt{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .ex-meta{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .badge-closed{background:var(--paper-deep);color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .badge-mine{background:var(--accent-soft);color:var(--teal);border-color:color-mix(in srgb, var(--accent) 25%, var(--hair));}
:where(:root[data-theme="dark"]) .ex-hidden-note{background:var(--wrong-soft);border:1px solid color-mix(in srgb, var(--wrong) 30%, var(--hair));color:var(--red);}
:where(:root[data-theme="dark"]) .btn-link{background:none;border:0;color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .btn-link:hover{color:var(--red);}
:where(:root[data-theme="dark"]) .ex-report-form{border:1px solid var(--line);background:var(--warm-bg);}
:where(:root[data-theme="dark"]) .ex-comment{background:var(--card);border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .ex-comment:target{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .ex-levels{border:0;}
:where(:root[data-theme="dark"]) .ex-level{border:1px solid var(--line);background:var(--card);}
:where(:root[data-theme="dark"]) .ex-level:has(input:checked){border-color:var(--teal);background:var(--accent-soft);}
:where(:root[data-theme="dark"]) .ex-agree{background:var(--accent-soft);border:1px solid color-mix(in srgb, var(--accent) 25%, var(--hair));}
:where(:root[data-theme="dark"]) .ex-block-list li{border-bottom:1px solid var(--line);}
:where(:root[data-theme="dark"]) .ex-block-list li:last-child{border-bottom:0;}
:where(:root[data-theme="dark"]) .report-text{border-left:3px solid var(--red);background:var(--canvas);}
:where(:root[data-theme="dark"]) .report-detail{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .ad-slot{border:1px dashed var(--line);background:var(--canvas);}
:where(:root[data-theme="dark"]) .ad-label{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .speak-limit{background:var(--warm-bg);border:1px solid var(--warm-line);}
:where(:root[data-theme="dark"]) .speak-limit-msg{color:var(--warm-ink);}
:where(:root[data-theme="dark"]) .pr-status.is-premium{background:linear-gradient(135deg,var(--warm-bg),var(--warm-bg));border-color:var(--warm-line);}
:where(:root[data-theme="dark"]) .pr-status-badge{color:var(--warm-ink);}
:where(:root[data-theme="dark"]) .pr-status-badge.free{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .pr-table th,:where(:root[data-theme="dark"]) .pr-table td{background:none;}
:where(:root[data-theme="dark"]) .pr-table th,:where(:root[data-theme="dark"]) .pr-table td{border-bottom:1px solid var(--line);}
:where(:root[data-theme="dark"]) .pr-table thead th{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .pr-col-premium{background:var(--warm-bg);color:var(--warm-ink);}
:where(:root[data-theme="dark"]) .pr-test{background:#12253E;border:1px solid #263C5A;color:#9DB2CD;}
:where(:root[data-theme="dark"]) .pr-off{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .pr-plan{border:2px solid var(--line);background:var(--card);}
:where(:root[data-theme="dark"]) .pr-plan:has(input:checked){border-color:var(--teal);}
:where(:root[data-theme="dark"]) .pr-notes{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .pr-minor{color:var(--red);}
:where(:root[data-theme="dark"]) .pr-history li{border-bottom:1px solid var(--line);}
:where(:root[data-theme="dark"]) .pr-history li:last-child{border-bottom:0;}
:where(:root[data-theme="dark"]) .pr-business{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .pr-summary dt{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .pr-teaser-blur span{background:var(--teal);}
:where(:root[data-theme="dark"]) .pr-kpis span{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .pr-bars{border-bottom:1px solid var(--line);}
:where(:root[data-theme="dark"]) .pr-bar i{background:var(--teal);}
:where(:root[data-theme="dark"]) .pr-bar.zero i{background:var(--line);}
:where(:root[data-theme="dark"]) .pr-bars-axis{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .pr-area-track{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .pr-area-track i{background:var(--teal);}
:where(:root[data-theme="dark"]) .pr-delta{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .pr-delta.up{color:var(--teal);}
:where(:root[data-theme="dark"]) .pr-delta.down{color:var(--red);}
:where(:root[data-theme="dark"]) .binder-head{border-bottom:2px solid var(--ink);}
:where(:root[data-theme="dark"]) .binder-meta{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .binder-table{background:var(--card);}
:where(:root[data-theme="dark"]) .binder-table th,:where(:root[data-theme="dark"]) .binder-table td{border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .binder-table thead th{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .binder-no{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .hide-meaning .binder-meaning{color:transparent;background:repeating-linear-gradient(45deg,#3D3728,#3D3728 6px,#4A4333 6px,#4A4333 12px);}
:where(:root[data-theme="dark"]) .binder-wrong li{border-bottom:1px dashed var(--line);}
:where(:root[data-theme="dark"]) .binder-mine{color:var(--red);}
:where(:root[data-theme="dark"]) .binder-answer{color:var(--teal);}
:where(:root[data-theme="dark"]) .hide-answer .binder-answer,:where(:root[data-theme="dark"]) .hide-answer .binder-mine{color:transparent;background:#413A2B;}
:where(:root[data-theme="dark"]) .draft-adapt .guide-orig{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .nav-group-title{color:var(--muted);}
:where(:root[data-theme="dark"]) .menu-search{background:var(--paper);}
:where(:root[data-theme="dark"]) .menu-search input{border:1px solid var(--line);background:var(--card);}
:where(:root[data-theme="dark"]) .menu-grid .nav-group-title{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .menu-grid .tab-btn{background:var(--card);border:1px solid var(--line);color:var(--ink);}
:where(:root[data-theme="dark"]) .menu-grid .tab-btn:hover{border-color:var(--teal);background:var(--card);color:var(--ink);}
:where(:root[data-theme="dark"]) .menu-grid .tab-btn .ico{background:var(--paper-deep);color:var(--teal);}
:where(:root[data-theme="dark"]) .menu-grid .nav-desc{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .menu-grid .nav-admin > summary.nav-group-title{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .hub-card{background:var(--card);border:1px solid var(--line);color:var(--ink);}
:where(:root[data-theme="dark"]) .hub-card:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .hub-ico{background:var(--paper-deep);color:var(--teal);}
:where(:root[data-theme="dark"]) .hub-desc{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .quick-grid a{background:var(--card);border:1px solid var(--line);color:var(--ink);}
:where(:root[data-theme="dark"]) .quick-grid a:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .quick-grid .sc-ico{color:var(--teal);}
:where(:root[data-theme="dark"]) .quick-grid .sc-sub{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .quick-grid a.due{border-color:var(--red);}
:where(:root[data-theme="dark"]) .quick-grid a.due .sc-ico,:where(:root[data-theme="dark"]) .quick-grid a.due .sc-sub{color:var(--red);}
:where(:root[data-theme="dark"]) .quick-grid a.quick-all{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .toast{background:var(--ink-strong);color:var(--canvas);}
:where(:root[data-theme="dark"]) .toast a{color:var(--marker);}
:where(:root[data-theme="dark"]) .voice-status{background:var(--paper-deep);color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .voice-status.on{background:var(--accent-soft);color:var(--teal);}
:where(:root[data-theme="dark"]) .voice-row select{border:1px solid var(--line);background:var(--card);}
:where(:root[data-theme="dark"]) .policy-links a{color:inherit;}
:where(:root[data-theme="dark"]) .menu-page .policy-links{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .del-keep{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .del-form input[type=password]{border:1px solid var(--line);background:var(--card);}
:where(:root[data-theme="dark"]) .btn-danger:hover{background:color-mix(in srgb, var(--red) 85%, #000);border-color:color-mix(in srgb, var(--red) 85%, #000);}
:where(:root[data-theme="dark"]) .policy-meta{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .card .policy-links{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .release-fail td:first-child{color:var(--red);}
:where(:root[data-theme="dark"]) .release-warn td:first-child{color:var(--gold);}
:where(:root[data-theme="dark"]) .release-ok td:first-child{color:var(--teal);}
:where(:root[data-theme="dark"]) .set-done strong{color:var(--teal);}
:where(:root[data-theme="dark"]) .guide-flow li{border:1px solid var(--line);background:var(--paper);}
:where(:root[data-theme="dark"]) .guide-flow li + li::before{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .gf-ico{background:var(--paper-deep);color:var(--teal);}
:where(:root[data-theme="dark"]) .gf-body{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .gf-body strong{color:var(--ink);}
:where(:root[data-theme="dark"]) .guide-table .gt-muted td{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .guide-strip{border:1px dashed var(--teal);background:var(--card);color:var(--teal);}
:where(:root[data-theme="dark"]) .guide-mini{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .review-next{color:var(--teal);}
:where(:root[data-theme="dark"]) .up-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);}
:where(:root[data-theme="dark"]) .up-btn:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .up-ico{color:var(--teal);}
:where(:root[data-theme="dark"]) .practice-unit{background:var(--paper-deep);color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .admin-nav a{border:1px solid var(--line);background:var(--card);color:var(--ink);}
:where(:root[data-theme="dark"]) .admin-nav a:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .admin-nav a.on{background:var(--teal);border-color:var(--teal);color:#fff;}
:where(:root[data-theme="dark"]) .admin-todo{border-left:4px solid var(--gold);}
:where(:root[data-theme="dark"]) .todo-list a{background:var(--paper);color:var(--ink);}
:where(:root[data-theme="dark"]) .todo-list a:hover{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .todo-num{background:var(--teal);color:#fff;}
:where(:root[data-theme="dark"]) .todo-num.warn{background:var(--red);}
:where(:root[data-theme="dark"]) .todo-go{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .stat{border:1px solid var(--line);background:var(--card);color:var(--ink);}
:where(:root[data-theme="dark"]) a.stat:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .stat-label{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .stat-num{color:var(--teal);}
:where(:root[data-theme="dark"]) .stat-num.warn{color:var(--red);}
:where(:root[data-theme="dark"]) .stat-sub{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .wk-num{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .wk-bar{background:var(--paper);}
:where(:root[data-theme="dark"]) .wk-bar span{background:color-mix(in srgb, var(--teal) 55%, #1F1F1F);}
:where(:root[data-theme="dark"]) .wk-col.today .wk-bar span{background:var(--teal);}
:where(:root[data-theme="dark"]) .wk-col.today .wk-day{color:var(--teal);}
:where(:root[data-theme="dark"]) .wk-meta{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .recent-list li{border-bottom:1px solid var(--line);}
:where(:root[data-theme="dark"]) .recent-list li:last-child{border-bottom:none;}
:where(:root[data-theme="dark"]) .recent-time{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .recent-detail{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .admin-links a{border:1px solid var(--line);background:var(--card);color:var(--ink);}
:where(:root[data-theme="dark"]) .admin-links a:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .admin-links span{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .focus-tool{border:1.5px solid var(--line);background:var(--card);color:var(--ink);}
:where(:root[data-theme="dark"]) .focus-tool:hover,:where(:root[data-theme="dark"]) .focus-tool:focus-visible{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .quiz-opt.picked,:where(:root[data-theme="dark"]) .choice-btn.picked{border-color:var(--teal);background:var(--ok-bg);}
:where(:root[data-theme="dark"]) .quiz-opt.is-right{border-color:var(--teal);background:var(--teal);color:#fff;}
:where(:root[data-theme="dark"]) .quiz-opt.is-wrong{border-color:var(--red);background:var(--bad-bg);color:var(--red);}
:where(:root[data-theme="dark"]) .quiz-confirm{background:var(--paper);border-top:1px solid var(--line);}
:where(:root[data-theme="dark"]) .quiz-pause{background:rgba(15,30,25,.42);}
:where(:root[data-theme="dark"]) .quiz-pause-card{background:var(--card);}
:where(:root[data-theme="dark"]) .spk-slow{background:var(--card);color:var(--ink);border:1.5px solid var(--line);}
:where(:root[data-theme="dark"]) .spk-slow:hover{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) rt{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .romaji{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .fc-new{background:var(--gold);color:#fff;border-color:var(--gold);}
:where(:root[data-theme="dark"]) .star-btn{border:1.5px solid var(--line);background:var(--card);color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .star-btn:hover,:where(:root[data-theme="dark"]) .star-btn:focus-visible{border-color:var(--gold);}
:where(:root[data-theme="dark"]) .star-btn.on{color:var(--gold);border-color:var(--gold);background:var(--warm-bg);}
:where(:root[data-theme="dark"]) .lw{border-top:1px solid var(--line);}
:where(:root[data-theme="dark"]) .lw:first-child{border-top:none;}
:where(:root[data-theme="dark"]) .lw-mean{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .lw-memo textarea{border:1px solid var(--line);background:var(--card);color:var(--ink);}
:where(:root[data-theme="dark"]) .mw-empty-ico{color:var(--gold);}
:where(:root[data-theme="dark"]) .gr-unit .up-title a{color:inherit;}
:where(:root[data-theme="dark"]) .gr-rows li{border-top:1px solid var(--line);}
:where(:root[data-theme="dark"]) .gr-rows li:first-child{border-top:none;}
:where(:root[data-theme="dark"]) .gr-row{color:var(--ink);}
:where(:root[data-theme="dark"]) .gr-row:hover .gr-title{color:var(--teal);}
:where(:root[data-theme="dark"]) .gr-star{color:var(--gold);}
:where(:root[data-theme="dark"]) .gr-step-label{color:var(--teal);}
:where(:root[data-theme="dark"]) .gr-step-no{background:var(--teal);color:#fff;}
:where(:root[data-theme="dark"]) .gr-def dt{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .gr-examples li{background:var(--paper);}
:where(:root[data-theme="dark"]) .gr-ex-tr{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .gq{border-top:1px solid var(--line);}
:where(:root[data-theme="dark"]) .gq:first-of-type{border-top:none;}
:where(:root[data-theme="dark"]) .gq-no{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .gq-opt.is-right{background:var(--teal);border-color:var(--teal);color:#fff;}
:where(:root[data-theme="dark"]) .gq-opt.is-wrong{background:var(--bad-bg);border-color:var(--red);color:var(--red);}
:where(:root[data-theme="dark"]) .gq-answer > summary{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .mk-test-no{background:var(--paper-deep);color:var(--teal);}
:where(:root[data-theme="dark"]) .mk-best{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .mk-best.pass{color:var(--teal);}
:where(:root[data-theme="dark"]) .mk-continue{border-left:4px solid var(--gold);}
:where(:root[data-theme="dark"]) .mk-history th,:where(:root[data-theme="dark"]) .mk-history td{border-top:1px solid var(--line);}
:where(:root[data-theme="dark"]) .mk-history th{color:var(--ink-soft);border-top:none;}
:where(:root[data-theme="dark"]) .mk-tabs{background:var(--paper);}
:where(:root[data-theme="dark"]) .mk-tabs a{border:1px solid var(--line);background:var(--card);color:var(--ink);}
:where(:root[data-theme="dark"]) .mk-section{border-top:2px solid var(--teal);}
:where(:root[data-theme="dark"]) .mk-item{border:1px solid var(--line);background:var(--card);}
:where(:root[data-theme="dark"]) .mk-item.answered{border-color:color-mix(in srgb, var(--accent) 35%, var(--hair));}
:where(:root[data-theme="dark"]) .mk-no{background:var(--paper-deep);color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .mk-opt{border:1.5px solid var(--line);background:var(--card);}
:where(:root[data-theme="dark"]) .mk-opt:has(input:checked){border-color:var(--teal);background:var(--ok-bg);}
:where(:root[data-theme="dark"]) .mk-opt-no{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .mk-bubble{border:1.5px solid var(--line);background:var(--card);color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .mk-bubble.done{background:var(--teal);border-color:var(--teal);color:#fff;}
:where(:root[data-theme="dark"]) .mk-total-label{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .mk-verdict.pass{color:var(--teal);}
:where(:root[data-theme="dark"]) .mk-verdict.fail{color:var(--warm-ink);}
:where(:root[data-theme="dark"]) .mk-counts li{background:var(--paper);}
:where(:root[data-theme="dark"]) .mk-review .mk-rv{border-top:1px solid var(--line);}
:where(:root[data-theme="dark"]) .mk-rv.ok .mk-rv-mark{color:var(--teal);}
:where(:root[data-theme="dark"]) .mk-rv.bad .mk-rv-mark{color:var(--red);}
:where(:root[data-theme="dark"]) .mk-rv-opts li.right{background:var(--ok-bg);}
:where(:root[data-theme="dark"]) .mk-rv-opts li.picked{background:var(--bad-bg);}
:where(:root[data-theme="dark"]) .mk-rv-explain{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .me-stat-ico{color:var(--teal);}
:where(:root[data-theme="dark"]) .week-acc{color:var(--teal);}
:where(:root[data-theme="dark"]) .me-tile{background:var(--card);border:1px solid var(--line);color:var(--ink);}
:where(:root[data-theme="dark"]) .me-tile:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .me-tile-ico{background:var(--paper-deep);color:var(--teal);}
:where(:root[data-theme="dark"]) .me-tile-meta{color:#fff;background:var(--teal);}
:where(:root[data-theme="dark"]) .tip-today .tip-label{color:var(--gold);}
:where(:root[data-theme="dark"]) .trophy-tier{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .trophy.bronze .trophy-tier{color:#C7AB94;}
:where(:root[data-theme="dark"]) .trophy.silver .trophy-tier{color:#6F7C86;}
:where(:root[data-theme="dark"]) .trophy.gold .trophy-tier{color:#B08D3E;}
:where(:root[data-theme="dark"]) .trophy-medal{background:var(--paper-deep);color:var(--ink-soft);border:3px solid var(--line);}
:where(:root[data-theme="dark"]) .trophy-medal.bronze{background:linear-gradient(145deg,#F3D2B3,#C98A57);color:#5A3418;border-color:#B8743F;}
:where(:root[data-theme="dark"]) .trophy-medal.silver{background:linear-gradient(145deg,#F2F4F6,#AEB8C0);color:#3E4850;border-color:#9AA6AF;}
:where(:root[data-theme="dark"]) .trophy-medal.gold{background:linear-gradient(145deg,#FFF0B8,#D9A93C);color:#5C4100;border-color:#C8962A;}
:where(:root[data-theme="dark"]) .heart-btn.on{color:#D2475A;border-color:#E8A0AA;background:#FFF0F2;}
:where(:root[data-theme="dark"]) .seg label{border:1.5px solid var(--line);background:var(--card);}
:where(:root[data-theme="dark"]) .seg label:has(input:checked){border-color:var(--teal);background:var(--ok-bg);}
:where(:root[data-theme="dark"]) .switch-row{border-top:1px solid var(--line);}
:where(:root[data-theme="dark"]) .switch-row:first-of-type{border-top:none;}
:where(:root[data-theme="dark"]) .switch{background:var(--line);}
:where(:root[data-theme="dark"]) .switch::after{background:var(--surface);}
:where(:root[data-theme="dark"]) .switch:checked{background:var(--teal);}
:where(:root[data-theme="dark"]) .rate-row{border-top:1px solid var(--line);}
:where(:root[data-theme="dark"]) .course-chip{background:var(--surface);border:1px solid var(--hair);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .cc-caret{color:var(--muted);}
:where(:root[data-theme="dark"]) .cs-panel{background:var(--surface);border:1px solid var(--hair);}
:where(:root[data-theme="dark"]) .ph-text strong{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .ph-text .hint{color:var(--muted);}
:where(:root[data-theme="dark"]) .ph-line i{background:var(--hair);}
:where(:root[data-theme="dark"]) .ph-line i.done{background:var(--line-c);}
:where(:root[data-theme="dark"]) .ph-line i.past{background:color-mix(in srgb, var(--line-c) 45%, var(--hair));}
:where(:root[data-theme="dark"]) .ph-line i.now{background:var(--line-c);}
:where(:root[data-theme="dark"]) .ph-map{color:var(--accent);}
:where(:root[data-theme="dark"]) .st::before,:where(:root[data-theme="dark"]) .route-more::before{background:var(--hair);}
:where(:root[data-theme="dark"]) .st.is-past::before{background:var(--line-c);}
:where(:root[data-theme="dark"]) .st.is-current::before{background:linear-gradient(var(--line-c) 0 35px, var(--hair) 35px);}
:where(:root[data-theme="dark"]) .route:not(.has-before) > .st.is-current:first-child::before{background:var(--hair);}
:where(:root[data-theme="dark"]) .route-more.before::before{background:repeating-linear-gradient(var(--line-c) 0 6px, transparent 6px 12px);}
:where(:root[data-theme="dark"]) .route-more.after::before{background:repeating-linear-gradient(var(--hair) 0 6px, transparent 6px 12px);}
:where(:root[data-theme="dark"]) .route-more a{color:var(--muted);}
:where(:root[data-theme="dark"]) .route-more a:hover{color:var(--line-c);}
:where(:root[data-theme="dark"]) .st-row{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .st-mark{background:var(--surface);border:4px solid var(--hair);color:var(--muted);}
:where(:root[data-theme="dark"]) .st.is-past .st-mark,:where(:root[data-theme="dark"]) .st.is-partial .st-mark{border-color:var(--line-c);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .st.is-finished .st-mark{background:var(--line-c);border-color:var(--line-c);color:var(--on-line);}
:where(:root[data-theme="dark"]) .st.is-past:not(.is-finished):not(.is-partial) .st-mark{border-color:color-mix(in srgb, var(--line-c) 45%, var(--hair));}
:where(:root[data-theme="dark"]) .st.is-current .st-mark{border-color:var(--line-c);background:var(--surface);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .st.is-empty .st-mark{color:var(--muted);}
:where(:root[data-theme="dark"]) .st-title{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .st:not(.is-past):not(.is-current):not(.is-finished) .st-title{color:color-mix(in srgb, var(--ink-strong) 70%, var(--muted));}
:where(:root[data-theme="dark"]) .st-sub{color:var(--muted);}
:where(:root[data-theme="dark"]) .st-pips i{background:var(--hair);}
:where(:root[data-theme="dark"]) .st-pips i.done{background:var(--line-c);}
:where(:root[data-theme="dark"]) .st-pips i.now{background:var(--surface);}
:where(:root[data-theme="dark"]) .st-here{background:var(--line-c);color:var(--on-line);}
:where(:root[data-theme="dark"]) .st-caret{border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);}
:where(:root[data-theme="dark"]) .st-panel{background:var(--surface);border:1px solid var(--hair);}
:where(:root[data-theme="dark"]) .st-link{border:none;background:transparent;color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .st-link:hover{background:var(--canvas);}
:where(:root[data-theme="dark"]) .st-dot{border:2px solid var(--hair);background:var(--surface);}
:where(:root[data-theme="dark"]) .st-step.done .st-dot{background:var(--line-c);border-color:var(--line-c);}
:where(:root[data-theme="dark"]) .st-step.done .st-dot::after{border-left:2px solid var(--on-line);border-bottom:2px solid var(--on-line);}
:where(:root[data-theme="dark"]) .st-step.partial .st-dot{border-color:var(--line-c);}
:where(:root[data-theme="dark"]) .st-step.now .st-dot{border:6px solid var(--line-c);}
:where(:root[data-theme="dark"]) .st-step.done .st-step-name{color:var(--muted);}
:where(:root[data-theme="dark"]) .st-step-type{background:var(--canvas);color:var(--muted);}
:where(:root[data-theme="dark"]) .st-now{color:var(--line-c);}
:where(:root[data-theme="dark"]) .st-step-count{color:var(--muted);}
:where(:root[data-theme="dark"]) .st-go{border-top:2px solid var(--hair);border-right:2px solid var(--hair);}
:where(:root[data-theme="dark"]) .st-step.now .st-link{background:color-mix(in srgb, var(--line-c) 9%, var(--surface));}
:where(:root[data-theme="dark"]) .st-step.now .st-go{border-color:var(--line-c);}
:where(:root[data-theme="dark"]) .st-open{color:var(--muted);}
:where(:root[data-theme="dark"]) .st-open:hover{color:var(--line-c);}
:where(:root[data-theme="dark"]) .btn-go{border:none;background:var(--line-c);color:var(--on-line);}
:where(:root[data-theme="dark"]) .pg-mark{background:var(--surface);color:var(--ink-strong);border:4px solid rgba(255,255,255,.55);}
:where(:root[data-theme="dark"]) .pi-done{border-left:3px solid var(--teal);}
:where(:root[data-theme="dark"]) .pi-drop{border:2px dashed var(--line);background:var(--paper);}
:where(:root[data-theme="dark"]) .pi-drop:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .pi-preview{border:1px solid var(--line);}
:where(:root[data-theme="dark"]) .pi-instruction{background:var(--paper-deep);}
:where(:root[data-theme="dark"]) .pi-row.has-warn{border-left:3px solid var(--gold);}
:where(:root[data-theme="dark"]) .pi-render{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .pi-more summary{color:var(--ink-soft);}
:where(:root[data-theme="dark"]) .pi-warns{color:var(--red);}
:where(:root[data-theme="dark"]) .pi-count,:where(:root[data-theme="dark"]) .pi-upload{color:var(--accent);}
:where(:root[data-theme="dark"]) .job-state{background:var(--canvas);color:var(--muted);}
:where(:root[data-theme="dark"]) .job-item[data-state="READING"] .job-state{background:var(--marker);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .job-item[data-state="DONE"] .job-state{background:var(--accent-soft);color:var(--accent);}
:where(:root[data-theme="dark"]) .job-item[data-state="CHECK"] .job-state{background:var(--warm-bg);color:var(--warm-ink);}
:where(:root[data-theme="dark"]) .job-item[data-state="FAILED"] .job-state,:where(:root[data-theme="dark"]) .job-item[data-state="STOPPED"] .job-state{background:var(--wrong-soft);color:var(--wrong);}
:where(:root[data-theme="dark"]) .appset-link{color:inherit;}
:where(:root[data-theme="dark"]) .appset-link:hover{border-color:var(--teal);}
:where(:root[data-theme="dark"]) .offline-icon{background:var(--accent-soft);color:var(--accent);}
:where(:root[data-theme="dark"]) .offline-status{color:var(--muted);}
:where(:root[data-theme="dark"]) .offline-unit[data-state="saved"] .offline-status{color:var(--accent);}
:where(:root[data-theme="dark"]) .offline-unit[data-state="stale"] .offline-status,:where(:root[data-theme="dark"]) .offline-unit[data-state="failed"] .offline-status{color:var(--warm-ink);}
:where(:root[data-theme="dark"]) .os-body{background:var(--canvas);}
:where(:root[data-theme="dark"]) .os-net{color:var(--muted);}
:where(:root[data-theme="dark"]) .choice-btn.is-right{border:2px solid var(--teal);background:var(--accent-soft);}
:where(:root[data-theme="dark"]) .choice-btn.is-wrong{border:2px solid var(--red);background:var(--wrong-soft);}
:where(:root[data-theme="dark"]) .choice-btn.is-right::after{color:var(--accent);}
:where(:root[data-theme="dark"]) .choice-btn.is-wrong::after{color:var(--wrong);}
:where(:root[data-theme="dark"]) .choice-btn:disabled{color:var(--ink);}
:where(:root[data-theme="dark"]) .os-verdict.is-right{color:var(--accent);}
:where(:root[data-theme="dark"]) .os-verdict.is-wrong{color:var(--wrong);}
:where(:root[data-theme="dark"]) .job-head[data-state="DONE"] .job-count{color:var(--accent);}
:where(:root[data-theme="dark"]) .job-head[data-state="FAILED"] .job-count,:where(:root[data-theme="dark"]) .job-head[data-state="STOPPED"] .job-count{color:var(--wrong);}
:where(:root[data-theme="dark"]) .auto-log{color:var(--muted);}
:where(:root[data-theme="dark"]) body.solve-page{background:var(--canvas);background-image:none;}
:where(:root[data-theme="dark"]) .solve-page .focus-top{background:var(--canvas);}
:where(:root[data-theme="dark"]) .focus-main.solve{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve .focus-close{color:var(--muted);}
:where(:root[data-theme="dark"]) .solve .focus-close:hover,:where(:root[data-theme="dark"]) .solve .focus-close:focus-visible{background:var(--hair);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve .focus-progress{background:var(--hair);}
:where(:root[data-theme="dark"]) .solve .focus-progress > span{background:var(--accent);}
:where(:root[data-theme="dark"]) .solve .focus-count{color:var(--muted);}
:where(:root[data-theme="dark"]) .solve .focus-tool{border:1px solid var(--hair);background:var(--surface);}
:where(:root[data-theme="dark"]) .solve-timer{background:var(--surface);border:1px solid var(--hair);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve-timer:has(.badge-wait){background:var(--wrong-soft);border-color:transparent;color:var(--wrong);}
:where(:root[data-theme="dark"]) .solve-timer .badge-wait{background:none;border:none;color:inherit;}
:where(:root[data-theme="dark"]) .solve-top .q-dot::before{background:var(--hair);}
:where(:root[data-theme="dark"]) .solve-top .q-dot::after{background:var(--surface);border:2px solid var(--hair);}
:where(:root[data-theme="dark"]) .solve-top .q-dot.done::before{background:var(--accent);}
:where(:root[data-theme="dark"]) .solve-top .q-dot.done::after{background:var(--accent);border-color:var(--accent);}
:where(:root[data-theme="dark"]) .solve-top .q-dot.current::after{border:4px solid var(--accent);background:var(--surface);}
:where(:root[data-theme="dark"]) .solve-kind{color:var(--accent);}
:where(:root[data-theme="dark"]) .solve-meta .solve-count,:where(:root[data-theme="dark"]) .solve-score{color:var(--muted);}
:where(:root[data-theme="dark"]) .solve-score b{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve-help > summary .i{border:1.5px solid var(--hair);color:var(--muted);}
:where(:root[data-theme="dark"]) .solve-help[open] > summary .i{border-color:var(--accent);color:var(--accent);}
:where(:root[data-theme="dark"]) .solve-help-pop{background:var(--surface);border:1px solid var(--hair);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve-help-pop p{color:var(--muted);}
:where(:root[data-theme="dark"]) .solve-ask{color:var(--muted);}
:where(:root[data-theme="dark"]) .focus-main.solve .solve-q{background:none;border:none;color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve-q .jp-lg{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve-q .uword{border:none;color:inherit;background:linear-gradient(transparent 55%, var(--marker) 55%, var(--marker) 90%, transparent 90%);}
:where(:root[data-theme="dark"]) .solve-q .blankbox{border-bottom:2.5px solid var(--accent);color:var(--muted);}
:where(:root[data-theme="dark"]) .solve-q rt{color:var(--muted);}
:where(:root[data-theme="dark"]) .solve-q > .spk{background:var(--surface);color:var(--accent);border:1px solid var(--hair);}
:where(:root[data-theme="dark"]) .solve-q > .spk:hover{background:var(--accent-soft);}
:where(:root[data-theme="dark"]) .solve .listen-note{color:var(--muted);}
:where(:root[data-theme="dark"]) .solve .choice-btn{border:1.5px solid var(--hair);background:var(--surface);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve .choice-btn:hover{border-color:color-mix(in srgb, var(--accent) 40%, var(--hair));background:var(--surface);}
:where(:root[data-theme="dark"]) .solve .choice-num,:where(:root[data-theme="dark"]) .solve .quiz-opt-no,:where(:root[data-theme="dark"]) .solve .mk-opt-no{border:none;background:var(--canvas);color:var(--muted);}
:where(:root[data-theme="dark"]) .solve .choice-btn.picked{border-color:var(--accent);background:var(--accent-soft);}
:where(:root[data-theme="dark"]) .solve .choice-btn.picked .choice-num{background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .solve .result-row{border:1.5px solid var(--hair);background:var(--surface);}
:where(:root[data-theme="dark"]) .solve .result-row .spk{background:var(--canvas);color:var(--accent);}
:where(:root[data-theme="dark"]) .solve .result-row .badge{border:none;}
:where(:root[data-theme="dark"]) .solve .result-row.is-correct{border-color:var(--accent);background:var(--accent-soft);}
:where(:root[data-theme="dark"]) .solve .result-row.is-correct .choice-num{background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .solve .result-row.is-correct .badge{background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .solve .result-row.is-picked-wrong{border-color:var(--wrong);background:var(--wrong-soft);}
:where(:root[data-theme="dark"]) .solve .result-row.is-picked-wrong .choice-num{background:var(--wrong);color:#fff;}
:where(:root[data-theme="dark"]) .solve .result-row.is-picked-wrong .badge{background:var(--wrong);color:#fff;}
:where(:root[data-theme="dark"]) .solve .result-row .oyomi{color:var(--accent);}
:where(:root[data-theme="dark"]) .solve .result-note{color:var(--muted);}
:where(:root[data-theme="dark"]) .quiz-confirm.solve-bar{background:color-mix(in srgb, var(--canvas) 88%, transparent);border-top:1px solid var(--hair);}
:where(:root[data-theme="dark"]) .quiz-confirm.solve-bar .btn{border:none;}
:where(:root[data-theme="dark"]) .quiz-confirm.solve-bar .btn-primary{background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .quiz-confirm.solve-bar .btn-primary:disabled{background:var(--hair);color:var(--muted);}
:where(:root[data-theme="dark"]) .quiz-confirm.solve-bar .btn:not(.btn-primary){background:var(--surface);color:var(--ink-strong);border:1.5px solid var(--hair);}
:where(:root[data-theme="dark"]) .solve-page .answer-sheet{background:var(--surface);border-top:none;}
:where(:root[data-theme="dark"]) .solve-page .answer-sheet.wrong{background:var(--surface);}
:where(:root[data-theme="dark"]) .solve-page .sheet-head{color:var(--accent);}
:where(:root[data-theme="dark"]) .solve-page .sheet-head::before{background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .solve-page .answer-sheet.wrong .sheet-head{color:var(--wrong);}
:where(:root[data-theme="dark"]) .solve-page .answer-sheet.wrong .sheet-head::before{background:var(--wrong);color:#fff;}
:where(:root[data-theme="dark"]) .solve-page .answer-sheet.late .sheet-head{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve-page .answer-sheet.late .sheet-head::before{background:var(--marker);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve-page .sheet-more{color:var(--muted);}
:where(:root[data-theme="dark"]) .solve-page .sheet-actions .btn{border:1.5px solid var(--hair);background:var(--surface);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve-page .sheet-actions .btn-primary{border:none;background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .solve-page .answer-sheet.wrong .sheet-actions .btn-primary{background:var(--ink-strong);color:var(--surface);}
:where(:root[data-theme="dark"]) .solve-page .set-done{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve-page .quiz-pause{background:rgba(10,20,16,.45);}
:where(:root[data-theme="dark"]) .solve-page .quiz-pause-card{background:var(--surface);}
:where(:root[data-theme="dark"]) .solve-page .quiz-pause-card .btn,:where(:root[data-theme="dark"]) .solve-page .focus-actions .btn{border:1.5px solid var(--hair);background:var(--surface);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve-page .quiz-pause-card .btn-primary,:where(:root[data-theme="dark"]) .solve-page .focus-actions .btn-primary{border:none;background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .solve-page .focus-center .eyebrow{color:var(--accent);}
:where(:root[data-theme="dark"]) .solve-page .result-ring{background:conic-gradient(var(--accent) calc(var(--p) * 1%), var(--hair) 0);}
:where(:root[data-theme="dark"]) .solve-page .result-ring::before{background:var(--canvas);}
:where(:root[data-theme="dark"]) .solve-page .result-ring span{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve-page .result-ring.low{background:conic-gradient(var(--marker) calc(var(--p) * 1%), var(--hair) 0);}
:where(:root[data-theme="dark"]) .solve-page .result-ring.low span{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve-page .focus-center .quiz-score{color:var(--accent);}
:where(:root[data-theme="dark"]) .solve .quiz-feedback.ok{background:var(--accent-soft);color:var(--accent);}
:where(:root[data-theme="dark"]) .solve .quiz-feedback.bad{background:var(--wrong-soft);color:var(--wrong);}
:where(:root[data-theme="dark"]) .focus-main.solve .quiz-q{background:none;border:none;}
:where(:root[data-theme="dark"]) .solve .quiz-q .quiz-prompt{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve .quiz-q .quiz-prompt-sm{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve .quiz-q rt{color:var(--muted);}
:where(:root[data-theme="dark"]) .solve .quiz-q.is-kana .quiz-prompt{background:var(--surface);border:1.5px solid var(--hair);background-image:linear-gradient(90deg, transparent calc(50% - .5px), color-mix(in srgb, var(--hair) 80%, transparent) calc(50% - .5px), color-mix(in srgb, var(--hair) 80%, transparent) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(transparent calc(50% - .5px), color-mix(in srgb, var(--hair) 80%, transparent) calc(50% - .5px), color-mix(in srgb, var(--hair) 80%, transparent) calc(50% + .5px), transparent calc(50% + .5px));}
:where(:root[data-theme="dark"]) .solve .quiz-q .romaji{color:var(--muted);}
:where(:root[data-theme="dark"]) .solve .quiz-q .quiz-reading{color:var(--muted);}
:where(:root[data-theme="dark"]) .solve .quiz-q .spk-row .spk,:where(:root[data-theme="dark"]) .solve .listen-slow{background:var(--surface);color:var(--accent);border:1px solid var(--hair);}
:where(:root[data-theme="dark"]) .focus-main.solve .quiz-options.as-grid .quiz-opt{border:1.5px solid var(--hair);background:var(--surface);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .focus-main.solve .quiz-options.as-rows .quiz-opt{border:1.5px solid var(--hair);background:var(--surface);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .focus-main.solve .quiz-options .quiz-opt:hover:where(:not(:disabled)){border-color:color-mix(in srgb, var(--accent) 40%, var(--hair));}
:where(:root[data-theme="dark"]) .focus-main.solve .quiz-options .quiz-opt.picked{border-color:var(--accent);background:var(--accent-soft);}
:where(:root[data-theme="dark"]) .focus-main.solve .quiz-options .quiz-opt.picked .quiz-opt-no{background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .focus-main.solve .quiz-options .quiz-opt.is-right{border-color:var(--accent);background:var(--accent-soft);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .focus-main.solve .quiz-options .quiz-opt.is-right .quiz-opt-no{background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .focus-main.solve .quiz-options .quiz-opt.is-wrong{border-color:var(--wrong);background:var(--wrong-soft);color:var(--wrong);}
:where(:root[data-theme="dark"]) .focus-main.solve .quiz-options .quiz-opt.is-wrong .quiz-opt-no{background:var(--wrong);color:#fff;}
:where(:root[data-theme="dark"]) .focus-main.solve .quiz-options .quiz-opt.is-right .quiz-opt-text::after{color:var(--accent);}
:where(:root[data-theme="dark"]) .solve .mk-title{color:var(--muted);}
:where(:root[data-theme="dark"]) .solve .mk-submit-top{border:none;background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .focus-main.solve .mk-tabs{border:none;background:color-mix(in srgb, var(--hair) 70%, var(--canvas));}
:where(:root[data-theme="dark"]) .focus-main.solve .mk-tabs a{border:none;background:none;color:var(--muted);}
:where(:root[data-theme="dark"]) .focus-main.solve .mk-tabs a.on{background:var(--surface);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .solve .mk-item.solve-body{border:none;background:none;}
:where(:root[data-theme="dark"]) .solve .mk-no{background:none;color:var(--accent);}
:where(:root[data-theme="dark"]) .solve .mk-of{color:var(--muted);}
:where(:root[data-theme="dark"]) .solve .mk-audio .spk{background:var(--surface);color:var(--accent);border:1px solid var(--hair);}
:where(:root[data-theme="dark"]) .focus-main.solve .mk-opt{border:1.5px solid var(--hair);background:var(--surface);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .focus-main.solve .mk-opt:hover{border-color:color-mix(in srgb, var(--accent) 40%, var(--hair));}
:where(:root[data-theme="dark"]) .focus-main.solve .mk-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft);}
:where(:root[data-theme="dark"]) .solve .mk-opt:has(input:checked) .mk-opt-no{background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .mk-form.paged.sheet-open .mk-sheet{border:none;background:var(--surface);}
:where(:root[data-theme="dark"]) .mk-form.paged.sheet-open::before{background:rgba(10,20,16,.45);}
:where(:root[data-theme="dark"]) .solve .mk-bubble{border:1.5px solid var(--hair);background:var(--surface);color:var(--muted);}
:where(:root[data-theme="dark"]) .solve .mk-bubble.done{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .solve .mk-sheet .btn-primary{border:none;background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .mk-nav{border:1.5px solid var(--hair);background:var(--surface);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .mk-nav:hover{border-color:var(--accent);}
:where(:root[data-theme="dark"]) .mk-sheet-btn{border:1.5px solid var(--hair);background:var(--surface);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .mk-sheet-btn:hover{border-color:var(--accent);}
:where(:root[data-theme="dark"]) .mk-done{color:var(--muted);}
:where(:root[data-theme="dark"]) .mk-done b{color:var(--accent);}
:where(:root[data-theme="dark"]) .focus-main.solve .practice-unit{background:var(--surface);border:1px solid var(--hair);color:var(--muted);}
:where(:root[data-theme="dark"]) .solve .listen-play{background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .solve .listen-play:hover{background:var(--accent);}
:where(:root[data-theme="dark"]) .listen-stage .quiz-reading{color:var(--muted);}
:where(:root[data-theme="dark"]) .listen-hint{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .write-area input.write-input{border:1.5px solid var(--hair);background:var(--surface);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .write-area input.write-input:focus{border-color:var(--accent);}
:where(:root[data-theme="dark"]) .write-tip{color:var(--muted);}
:where(:root[data-theme="dark"]) .solve-done .done-q{background:var(--surface);border:1px solid var(--hair);}
:where(:root[data-theme="dark"]) .done-label{color:var(--muted);}
:where(:root[data-theme="dark"]) .done-score{color:var(--accent);}
:where(:root[data-theme="dark"]) .done-msg{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .done-actions .btn{border:1.5px solid var(--hair);background:var(--surface);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .done-actions .btn-primary{border:none;background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .speak-page.solve .check-chip{border:1px solid var(--hair);background:var(--surface);color:var(--muted);}
:where(:root[data-theme="dark"]) .speak-page.solve .check-chip.ok{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 35%, var(--hair));}
:where(:root[data-theme="dark"]) .speak-page.solve .check-chip.bad{color:var(--wrong);border-color:var(--wrong);background:var(--wrong-soft);}
:where(:root[data-theme="dark"]) .speak-page.solve .check-chip.unk{color:var(--ink-strong);border-color:color-mix(in srgb, var(--marker) 80%, var(--hair));}
:where(:root[data-theme="dark"]) .speak-page.solve .check-panel{border:1px solid var(--hair);background:var(--surface);}
:where(:root[data-theme="dark"]) .speak-page.solve .check-list li > b{background:var(--canvas);}
:where(:root[data-theme="dark"]) .speak-page.solve .check-list li.ok > b{background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .speak-page.solve .check-list li.bad > b{background:var(--wrong);color:#fff;}
:where(:root[data-theme="dark"]) .speak-page.solve .check-list li.unk > b{background:var(--marker);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .speak-page.solve .level-meter{background:var(--hair);}
:where(:root[data-theme="dark"]) .speak-page.solve .level-meter span{background:var(--accent);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-steps li{background:none;color:var(--muted);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-steps li::before{background:var(--hair);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-steps li.done::before,:where(:root[data-theme="dark"]) .speak-page.solve .speak-steps li.now::before{background:var(--accent);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-steps li span{border:2px solid var(--hair);background:var(--surface);color:var(--muted);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-steps li.now{color:var(--ink-strong);background:none;}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-steps li.now span{border-color:var(--accent);background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-steps li.done{color:var(--accent);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-steps li.done span{border-color:var(--accent);background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-word-main{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-word-main rt{color:var(--muted);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-reading{color:var(--accent);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-word .omean{color:var(--muted);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-listen .btn{border:1px solid var(--hair);background:var(--surface);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-listen .btn:hover{border-color:var(--accent);}
:where(:root[data-theme="dark"]) .speak-page.solve .mic-btn{background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .speak-page.solve .mic-btn[data-state="listening"],:where(:root[data-theme="dark"]) .speak-page.solve .mic-btn[data-state="hearing"]{background:var(--wrong);color:#fff;}
:where(:root[data-theme="dark"]) .speak-page.solve .mic-btn[data-state="processing"],:where(:root[data-theme="dark"]) .speak-page.solve .mic-btn[data-state="grading"]{background:var(--muted);color:#fff;}
:where(:root[data-theme="dark"]) .speak-page.solve .mic-ring{background:conic-gradient(var(--wrong) calc(var(--left) * 360deg), transparent 0);}
:where(:root[data-theme="dark"]) .speak-page.solve .mic-status{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .speak-page.solve .interim-text{color:var(--accent);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-howto{color:var(--muted);}
:where(:root[data-theme="dark"]) .speak-page.solve .link-btn{color:var(--muted);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-error{border:none;background:var(--wrong-soft);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-error-msg{color:var(--wrong);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-limit,:where(:root[data-theme="dark"]) .speak-page.solve .speak-record{border:1px solid var(--hair);background:var(--surface);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-limit-msg{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-error .btn,:where(:root[data-theme="dark"]) .speak-page.solve .speak-limit .btn,:where(:root[data-theme="dark"]) .speak-page.solve .speak-record .btn,:where(:root[data-theme="dark"]) .speak-page.solve .speak-result-actions .btn{border:1.5px solid var(--hair);background:var(--surface);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-error .btn-primary,:where(:root[data-theme="dark"]) .speak-page.solve .speak-limit .btn-primary,:where(:root[data-theme="dark"]) .speak-page.solve .speak-record .btn-primary{border:none;background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .speak-page.solve ~ .speak-result,:where(:root[data-theme="dark"]) .speak-page.solve .speak-result{border-top:none;background:var(--surface);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-result-head .result-ring::before{background:var(--surface);}
:where(:root[data-theme="dark"]) .solve-page .result-ring.bad{background:conic-gradient(var(--wrong) calc(var(--p) * 1%), var(--hair) 0);}
:where(:root[data-theme="dark"]) .solve-page .result-ring.bad span{color:var(--wrong);}
:where(:root[data-theme="dark"]) .speak-page.solve .speak-feedback{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .speak-page.solve .kr-compare{border:none;background:var(--canvas);}
:where(:root[data-theme="dark"]) .speak-page.solve .kr-row + .kr-row{border-top:1px solid var(--hair);}
:where(:root[data-theme="dark"]) .speak-page.solve .kr-label{color:var(--muted);}
:where(:root[data-theme="dark"]) .speak-page.solve .kr-text{color:var(--accent);}
:where(:root[data-theme="dark"]) .speak-page.solve .kr-text.kr-mine{color:var(--wrong);}
:where(:root[data-theme="dark"]) .speak-page.solve .diff-match,:where(:root[data-theme="dark"]) .speak-page.solve .lg-match{background:var(--accent-soft);color:var(--accent);}
:where(:root[data-theme="dark"]) .speak-page.solve .diff-wrong,:where(:root[data-theme="dark"]) .speak-page.solve .lg-wrong{background:var(--wrong-soft);color:var(--wrong);}
:where(:root[data-theme="dark"]) .speak-page.solve .diff-missing,:where(:root[data-theme="dark"]) .speak-page.solve .lg-missing{background:var(--hair);color:var(--muted);}
:where(:root[data-theme="dark"]) .speak-page.solve .tip-box{background:var(--canvas);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .cards-page.solve .flashcard{border:1px solid var(--hair);background:var(--surface);}
:where(:root[data-theme="dark"]) .cards-page.solve .fc-word{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .cards-page.solve .fc-word rt,:where(:root[data-theme="dark"]) .cards-page.solve .fc-word-sm rt{color:var(--muted);}
:where(:root[data-theme="dark"]) .cards-page.solve .fc-tap{color:var(--muted);}
:where(:root[data-theme="dark"]) .cards-page.solve .fc-word-sm{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .cards-page.solve .fc-reading{color:var(--accent);}
:where(:root[data-theme="dark"]) .cards-page.solve .fc-romaji{color:var(--muted);}
:where(:root[data-theme="dark"]) .cards-page.solve .fc-meaning{color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .cards-page.solve .fc-example{border-top:none;background:var(--canvas);}
:where(:root[data-theme="dark"]) .cards-page.solve .fc-new,:where(:root[data-theme="dark"]) .cards-page.solve .fc-seen{border:none;}
:where(:root[data-theme="dark"]) .cards-page.solve .fc-new{background:var(--marker);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .cards-page.solve .fc-seen{background:var(--canvas);color:var(--muted);}
:where(:root[data-theme="dark"]) .cards-page.solve .fc-tools .spk,:where(:root[data-theme="dark"]) .cards-page.solve .fc-tools .star-btn{border:1px solid var(--hair);background:var(--surface);color:var(--accent);}
:where(:root[data-theme="dark"]) .cards-page.solve .fc-tools .star-btn{color:var(--muted);}
:where(:root[data-theme="dark"]) .cards-page.solve .fc-tools .star-btn.on{color:var(--ink-strong);border-color:var(--marker);background:color-mix(in srgb, var(--marker) 45%, var(--surface));}
:where(:root[data-theme="dark"]) .cards-page.solve .btn-again{border:1.5px solid var(--hair);background:var(--surface);color:var(--wrong);}
:where(:root[data-theme="dark"]) .cards-page.solve .btn-again:hover{border-color:var(--wrong);}
:where(:root[data-theme="dark"]) .cards-page.solve #btnKnow{border:none;background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .cards-page.solve .cards-help{color:var(--muted);}
:where(:root[data-theme="dark"]) .cards-page.solve .cards-check,:where(:root[data-theme="dark"]) .cards-page.solve .cards-done{border:1px solid var(--hair);background:var(--surface);}
:where(:root[data-theme="dark"]) .cards-page.solve .stack-actions .btn{border:1.5px solid var(--hair);background:var(--surface);color:var(--ink-strong);}
:where(:root[data-theme="dark"]) .cards-page.solve .stack-actions .btn-primary{border:none;background:var(--accent);color:var(--on-accent);}
:where(:root[data-theme="dark"]) .cards-page.solve .learn-eyebrow{color:var(--accent);}
:where(:root[data-theme="dark"]) body{background-image:none;}
:where(:root[data-theme="dark"]) input:not([type=checkbox]):not([type=radio]):not([type=range]),:where(:root[data-theme="dark"]) select,:where(:root[data-theme="dark"]) textarea{background:var(--card);color:var(--ink);border-color:var(--line);}
:where(:root[data-theme="dark"]) .quiz-pause{background:rgba(0,0,0,.6);}
:where(:root[data-theme="dark"]) .switch::after{background:#E8E3D8;}
}
@media screen and (max-width:880px){:where(:root[data-theme="dark"]) .sidebar{border-right:none;border-bottom:1px solid var(--hair);}}
@media screen and (max-width:880px){:where(:root[data-theme="dark"]) .brand{border:none;}}
@media screen and (max-width:880px){:where(:root[data-theme="dark"]) .mobile-tabbar{background:var(--surface);border-top:1px solid var(--hair);}}
@media screen and (max-width:880px){:where(:root[data-theme="dark"]) .tabbar-track > a{color:var(--muted);}}
@media screen and (max-width:880px){:where(:root[data-theme="dark"]) .tabbar-track > a.active{background:var(--accent-soft);color:var(--accent);}}
@media screen and (max-width:880px){:where(:root[data-theme="dark"]) .tabbar-track > a.active .ico{color:var(--accent);}}
@media screen and (max-width:880px){:where(:root[data-theme="dark"]) .tabbar-track > a:active{background:var(--canvas);}}
@media screen and (max-width:880px){:where(:root[data-theme="dark"]) .mobile-tabbar::before,:where(:root[data-theme="dark"]) .mobile-tabbar::after{color:var(--muted);}}
@media screen and (max-width:880px){:where(:root[data-theme="dark"]) .mobile-tabbar::before{background:linear-gradient(90deg, var(--surface) 35%, transparent);}}
@media screen and (max-width:880px){:where(:root[data-theme="dark"]) .mobile-tabbar::after{background:linear-gradient(270deg, var(--surface) 35%, transparent);}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .stroke-guide{background:var(--paper);border:1px solid var(--line);}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .stroke-title{color:var(--teal);}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .font-sample-char{border:1px solid var(--line);background:var(--surface);}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .font-sample-label{color:var(--ink-soft);}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .font-compare-eq{color:var(--ink-soft);}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .lang-table-wrap{border:none;background:none;}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .lang-table tr{border:1px solid var(--line);background:var(--card);}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .lang-table td{border:none;}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .lang-table td.lang-name{color:var(--teal);}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .lang-table td[data-label]::before{color:var(--ink-soft);}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .table-cards{border:none;background:none;}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .vocab-table tbody tr{background:var(--card);border:1px solid var(--line);}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .vocab-table tbody tr:last-child td{border-bottom:none;}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .vocab-table td{border:none;}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .vocab-table .v-read{color:var(--teal);}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .vocab-table .v-pron{color:var(--ink-soft);}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .vocab-table .v-mean{border-top:1px dashed var(--line);}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .policy-doc tr{border-bottom:1px solid var(--line);}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .policy-doc td{border:none;}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .policy-doc td[data-label]::before{color:var(--ink-soft);}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .guide-table{border:none;background:none;}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .guide-table tr{border:1px solid var(--line);background:var(--card);}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .guide-table td{border:none;}}
@media screen and (max-width:600px){:where(:root[data-theme="dark"]) .guide-table td[data-label]::before{color:var(--ink-soft);}}
@media screen and (max-width:640px){:where(:root[data-theme="dark"]) .table-wrap.stack{border:none;background:transparent;}}
@media screen and (max-width:640px){:where(:root[data-theme="dark"]) .table-wrap.stack tr{border:1px solid var(--line);background:var(--card);}}
@media screen and (max-width:640px){:where(:root[data-theme="dark"]) .table-wrap.stack td{border:none;}}
@media screen and (max-width:640px){:where(:root[data-theme="dark"]) .table-wrap.stack td[data-label]::before{color:var(--ink-soft);}}
@media screen and (max-width:880px){:where(:root[data-theme="dark"]) .course-sheet[open] > summary::before{background:rgba(0,0,0,.42);}}
/* ==== end of dark theme ==== */