/* ============================================================
   기존 HTML 학습 바인더와 같은 색상/레이아웃 체계.
   데스크톱은 좌측 사이드바, 모바일(<=880px)은 하단 탭바로 전환된다.
   Same palette/layout as the original HTML binder.
   Desktop uses a left sidebar; mobile (<=880px) switches to a bottom tab bar.
   ============================================================ */
:root{
  --paper:#F3EEE1;
  --paper-deep:#EAE2CF;
  --ink:#262220;
  --ink-soft:#5C5348;
  --red:#B23A2E;
  --red-soft:#E7DCCF;
  --teal:#3F6E64;
  --gold:#B08D3E;
  --card:#FFFDF6;
  --line:#D9CFB8;
}

*{box-sizing:border-box;}
html,body{overflow-x:hidden;}

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;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(176,141,62,0.05), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(63,110,100,0.06), transparent 45%);
}

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

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

/* ===== 사이드바 (데스크톱) ===== */
.sidebar{
  width:220px; flex:0 0 220px;
  background:linear-gradient(180deg,#1F2A28,#171E1C);
  color:#EFE9DA; padding:26px 0;
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
}
.brand{
  padding:0 22px 18px; font-size:21px; font-weight:800; letter-spacing:1px;
  border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:16px;
}
.brand small{display:block; font-size:10.5px; font-weight:400; opacity:.65; 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:11px 22px; background:none; border:none; width:100%;
  color:rgba(239,233,218,.72); font-size:13.5px; cursor:pointer;
  text-align:left; text-decoration:none; transition:.15s;
}
.tab-btn:hover{background:rgba(255,255,255,.06); color:#EFE9DA;}
.tab-btn.active{background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 3px 0 0 var(--gold);}
.tab-btn .ico{
  font-family:'Shippori Mincho','Noto Serif KR',serif;
  font-size:15px; width:20px; text-align:center; opacity:.8;
}
.tab-btn .label{font-family:'Shippori Mincho','Noto Serif KR',serif;}

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

/* ============================================================
   [STEP-57] 오른쪽 위 계정 메뉴
   로그인하면 프로필 사진(없으면 첫 글자)이 보이고, 누르면 아래로 메뉴가 열린다.
   <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(38,34,32,.14); white-space:nowrap;
}
.account-login:hover{background:#345A52; 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(63,110,100,.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(38,34,32,.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(38,34,32,.2), 0 2px 6px rgba(38,34,32,.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:'Shippori Mincho','Noto Serif KR',serif; 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:11px; font-weight:700; color:var(--ink-soft); letter-spacing:.5px; padding:6px 12px 2px;}
.pd-form{margin:0;}
.pd-logout,.pd-logout .pd-ico{color:var(--red);}

/* ===== 본문 ===== */
main{flex:1; padding:36px 40px 90px; max-width:1080px; min-width:0;}
.eyebrow{
  color:var(--red); font-weight:700; letter-spacing:3px;
  font-size:11px; text-transform:uppercase; margin-bottom:6px;
}
.page-title{font-size:28px; margin:0 0 8px; font-weight:800;}
.page-desc{color:var(--ink-soft); font-size:13px; margin:0 0 20px;}
/* [STEP-70] keep-all(낱말 가운데서 끊지 않기)은 띄어쓰기로 끊는 한국어 화면에만. 일본어·중국어 글은 띄어쓰기가 없어
   keep-all 이면 문장부호에서만 줄이 바뀌어 화면 밖으로 넘쳤다(한국어 앱의 일본어 화면에서 실제 렌더로 확인).
   <html lang> 이 화면 언어라(STEP-69) :lang(ko) 로 고른다.
   keep-all only for Korean UI: Japanese/Chinese have no spaces, so keep-all let lines break only at punctuation and
   text overflowed the screen (seen in a real render of the Korean app's Japanese UI). <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:14px; padding:18px; margin-bottom:14px;
}
.card h2{font-size:15px; margin:0 0 10px;}

/* ===== 표 (모바일에서 가로 스크롤) ===== */
.table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius:12px; 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(--paper-deep); font-weight:700; font-size:11.5px; white-space:nowrap;}
tr:last-child td{border-bottom:none;}

/* ===== 폼 ===== */
.form-row{margin-bottom:13px;}
label{display:block; font-size:12.5px; margin-bottom:5px; color:var(--ink-soft); font-weight:600;}
input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{
  width:100%; max-width:100%; padding:9px 11px;
  border:1px solid var(--line); border-radius:9px;
  font-size:14px; background:#fff; color:var(--ink); font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(63,110,100,.35); outline-offset:0;}
textarea{min-height:120px; resize:vertical;}
.hint{font-size:11.5px; color:var(--ink-soft); font-weight:400;}
/* [STEP-68] 비밀번호 보기 단추(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;}
/* [STEP-68] 관리자: 방금 발급한 임시 비밀번호 / 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 15px; border-radius:10px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font-size:13px; cursor:pointer; text-decoration:none; font-family:inherit;
  transition:.12s; white-space:nowrap;
}
.btn:hover{border-color:var(--teal);}
.btn-primary{background:var(--teal); color:#fff; border-color:var(--teal);}
.btn-primary:hover{background:#345A52; background:color-mix(in srgb, var(--teal) 82%, #000);}   /* [STEP-67] 앱판 색을 따라감 / follows the edition colour */
.btn-danger{background:var(--red); color:#fff; border-color:var(--red);}
.btn-sm{padding:5px 10px; font-size:11.5px; border-radius:8px;}

.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;}

/* ===== 메시지 ===== */
.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;}

/* ===== 배지 ===== */
.badge{
  display:inline-block; font-size:10.5px; padding:2px 8px; border-radius:9px;
  background:var(--paper-deep); border:1px solid var(--line); color:var(--ink-soft);
  white-space:nowrap;
}
.badge-answered{background:var(--teal); color:#fff; border-color:var(--teal);}
.badge-wait{background:var(--red); color:#fff; border-color:var(--red);}
.badge-gold{background:var(--gold); color:#fff; border-color:var(--gold);}

/* ===== 일본어 표기 ===== */
.jp{font-family:'Shippori Mincho','Noto Serif KR',serif; font-size:15px;}
.jp-lg{font-family:'Shippori Mincho','Noto Serif KR',serif; 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;}

/* ===== 발음 듣기 버튼 ===== */
.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;
}
.spk:hover{background:#345A52; 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;}

/* ===== 문제 선택지 ===== */
.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:#fff; 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:#FAFDFB;}
.choice-num{
  color:var(--ink-soft); font-size:12px; font-weight:700;
  min-width:16px; flex:0 0 auto;
}
.choice-text{font-family:'Shippori Mincho','Noto Serif KR',serif; 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:#fff;
}
.result-row.is-correct{border-color:var(--teal); background:#F2F8F5;}
.result-row.is-picked-wrong{border-color:var(--red); background:#FBF3F1;}

/* ===== 진도바 ===== */
.progress-track{height:10px; background:var(--paper-deep); border-radius:6px; overflow:hidden; margin-top:6px;}
.progress-fill{height:100%; background:var(--teal); border-radius:6px; 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-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;
  }
  .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:9px; right:12px;}
  .account-login{height:34px; padding:0 14px; font-size:12.5px;}

  /* [STEP-57] 하단 탭바 — 옆으로 밀어서 본다.
     예전에는 칸을 모두 한 줄에 억지로 넣었다(관리자면 13칸). 뒤쪽 규칙이 앞의 "줄어들지 않게"를
     덮어써서 칸이 30px 남짓으로 쪼그라들고 글자가 "…"로 잘렸다. 이제 칸은 줄어들지 않고
     (넓으면 나눠 채우고) 넘치면 옆으로 민다. 손을 떼면 가까운 칸에 맞춰 멈춘다.
     Bottom tab bar - swipe sideways. It used to cram every tab into one row (13 for admins);
     a later rule overrode the "don't shrink" rule, squeezing tabs to ~30px with "…" labels.
     Tabs never shrink now (they share spare width), overflow scrolls and snaps. */
  .mobile-tabbar{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:#1C2523; border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 -4px 18px rgba(0,0,0,.14);
    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:rgba(239,233,218,.72); 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:'Shippori Mincho',serif; font-size:18px; line-height:1;}
  .tabbar-track > a.active{background:rgba(255,255,255,.1); color:#fff; font-weight:700;}
  .tabbar-track > a.active .ico{color:var(--gold);}
  .tabbar-track > a:active{background:rgba(255,255,255,.16);}

  /* 옆에 칸이 더 있으면 그쪽 가장자리를 흐리게 하고 화살표를 보인다(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:rgba(239,233,218,.75);
    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,#1C2523 35%,rgba(28,37,35,0));
  }
  .mobile-tabbar::after{
    content:'\203A'; right:0; justify-content:flex-end; padding-right:5px;
    background:linear-gradient(270deg,#1C2523 35%,rgba(28,37,35,0));
  }
  .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;}
}

/* ============================================================
   [STEP-11] 문제 세트(그룹) 카드
   낱개 문제 대신 "몇 주차 몇 번 세트"를 카드로 보여준다.
   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:'Shippori Mincho','Noto Serif KR',serif;
  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;
}

/* ============================================================
   [STEP-11] 가나 글자표 / 퀴즈
   ============================================================ */
.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:'Shippori Mincho','Noto Serif KR',serif;
  font-size:19px; font-weight:700; line-height:1.2; display:block;
}
.kana-kata{
  font-family:'Shippori Mincho','Noto Serif KR',serif;
  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;
}
.kana-cell .spk{
  position:absolute; top:2px; right:2px;
  width:17px; height:17px; min-width:17px; font-size:8px; margin:0;
}

/* 퀴즈 화면 */
.quiz-box{
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:22px 18px; text-align:center;
}
.quiz-prompt{
  font-family:'Shippori Mincho','Noto Serif KR',serif;
  font-size:44px; font-weight:700; margin:14px 0 18px; line-height:1.2;
}
.quiz-prompt-sm{
  font-family:'Shippori Mincho','Noto Serif KR',serif;
  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;}
}

/* ============================================================
   [STEP-12] Everstudy Language Score 화면
   ============================================================ */
.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;}

/* 연습 화면 입력창 */
#answer{font-family:'Shippori Mincho','Noto Serif KR',serif;}

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

/* ============================================================
   [STEP-13] 동의 항목
   체크박스를 label로 감싸서 글자를 눌러도 체크되게 한다.
   모바일에서 작은 체크박스만 정확히 누르기 어렵기 때문이다.
   ============================================================ */
.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;}

/* ============================================================
   [STEP-14] 발음 연습 — 마이크 파형 / 오류 표시
   ============================================================ */

.interim-text{
  font-family:'Shippori Mincho','Noto Serif KR',serif;
  font-size:18px; color:var(--teal); min-height:26px; margin:0 0 12px;
}

/* 글자별 대조 결과 */
.diff-box{
  display:flex; justify-content:center; gap:4px; flex-wrap:wrap;
  margin:12px 0; font-family:'Shippori Mincho','Noto Serif KR',serif;
}
.diff-char{
  /* [STEP-68] 아래 "한글 병기"에서 덮어쓰던 값을 합쳤다 / 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:#F2F8F5;}
.diff-wrong{color:var(--red); background:#FBF3F1;}
.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;
}

/* ============================================================
   [STEP-25] 가나 키보드

   ── 고친 것 ──
   1) 높이가 너무 컸다. 히라가나는 11줄이라 키가 크면 화면을 거의 다 덮어서,
      정작 무엇을 쓰는지 볼 수가 없었다. 키를 낮춰 전체를 줄였다.
   2) 탭마다 줄 수가 달라(히라가나 11줄, 탁음 5줄) 탭을 바꾸면 키보드 높이가
      확 바뀌고 본문이 위아래로 튀었다. 키패드 영역에 최소 높이를 줘서
      어느 탭을 골라도 전체 높이가 같게 만들었다.
   3) 입력 표시줄을 항상 맨 위에 두어, 무엇을 쓰고 있는지 늘 보이게 했다.

   The keyboard was tall enough (11 rows) to cover almost the whole screen, hiding
   the very text being typed; and because tabs have different row counts, switching
   them jolted the page as the height changed. Keys are shorter now, and the keypad
   area has a minimum height so every tab occupies the same space.
   ============================================================ */
.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);
}

/* 지금 입력한 내용 — 항상 키보드 맨 위에 보인다 */
.kb-display{
  display:flex; align-items:center; gap:2px;
  min-height:42px; padding:5px 12px; margin-bottom:7px;
  background:#fff; border:1.5px solid var(--teal); border-radius:9px;
  overflow-x:auto;
}
.kb-display-text{
  font-family:'Shippori Mincho','Noto Serif KR',serif;
  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줄)와 같은 높이를
   유지해, 탭을 옮길 때 본문이 튀지 않게 한다. */
.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:'Shippori Mincho','Noto Serif KR',serif;
  border:1px solid var(--line); border-radius:7px;
  background:#fff; 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가 잰 실제 높이) */
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;}
}

/* 화면이 낮은 기기(가로 모드 등)에서는 키를 더 줄인다 */
@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;}
}

/* ============================================================
   [STEP-15] 한글 발음 대조 / 점수 변화 그래프
   ============================================================ */

/* 정답 vs 내 발음을 한글로 나란히 */
.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);}

/* 글자별 대조에 한글 병기 */
.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-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;}
}

/* [STEP-17] 글자표 열 머리글 (세로줄이 모음임을 표시) */
.col-head{
  text-align:center; font-size:11px; font-weight:700;
  color:var(--teal); padding:2px 0;
  font-family:'Shippori Mincho','Noto Serif KR',serif;
}

/* ============================================================
   [STEP-22] 가나 쓰기 연습
   흐린 글자 위에 직접 써보며 모양을 익히는 화면.
   ============================================================ */
.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;}

/* 흐린 글자와 캔버스를 정확히 겹친다 */
.write-canvas-wrap{
  position:relative; width:320px; height:320px; max-width:100%;
  margin:0 auto; aspect-ratio:1/1;
}
.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; line-height:1;
  color:var(--line);        /* 따라 쓸 수 있을 만큼만 흐리게 */
  user-select:none; pointer-events:none;
}
#writeCanvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  background:transparent;
  /* 십자 보조선 - 글자 균형을 잡기 쉽게 */
  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;   /* 손가락으로 쓸 때 화면이 밀리지 않게 */
  cursor:crosshair;
}
.write-actions{
  display:flex; gap:6px; justify-content:center;
  margin-top:14px; flex-wrap:wrap;
}

@media (max-width:600px){
  .write-canvas-wrap{width:280px; height:280px;}
  .write-guide{font-size:210px;}
}

/* ============================================================
   [STEP-23] 가나 쓰기 — 획순 안내 / 서체 비교
   ============================================================ */
.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 손글씨체.
   손글씨 느낌을 내려고 다른 계열 글꼴을 우선 적용하고 살짝 기울인다.
   글꼴이 없는 기기에서도 크기·기울기 차이로 "같은 글자의 다른 모습"은 전달된다. */
.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:#fff; 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);}

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

/* [STEP-25] 주차·세트·순서 세 칸의 높이를 맞춘다.
   칸마다 안내 문구 길이가 달라 입력창 위치가 어긋나 보였다.
   라벨을 같은 높이로 맞추고 입력창을 위로 정렬한다. */
.form-row-group{display:flex; gap:9px; flex-wrap:wrap; align-items:flex-start;}
.form-row-group > .form-row{flex:1; min-width:100px;}
.form-row-group > .form-row > label{min-height:18px; display:block;}

/* ============================================================
   [STEP-27] 언어 선택
   ============================================================ */
.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;
}

/* ============================================================
   [STEP-28] 홈 화면 언어 선택
   "내가 쓰는 언어 → 배우고 싶은 언어" 를 한 줄로 보여준다.
   ============================================================ */

.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;}      /* 세로로 쌓이면 화살표가 어색하다 */
  .lang-field{min-width:100%;}
}

/* ============================================================
   [STEP-35] 번역 편집 화면
   원문과 번역을 나란히 두어 무엇을 옮기는지 보이게 한다.
   ============================================================ */
.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;
}

/* ============================================================
   [STEP-36] 일괄 번역 검수 화면
   변환 전후를 나란히 두어 무엇이 어떻게 바뀌는지 보이게 한다.
   ============================================================ */
.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;
}

/* 전후 비교. 좁은 화면에서는 위아래로 쌓는다 */
.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;}


/* [STEP-37] 번역기 목록 — 무엇이 설정됐고 한도가 어떤지 보여준다 */
.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;}

/* [STEP-39] 번역기 연결 테스트 결과 */
.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;}

/* [STEP-42] AI 프롬프트 · 조합 표 · 해설 초안 */
.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);}
/* [STEP-54] 선택지 칸 이름. 채워진 뒤에는 자리표시 글이 안 보여 어느 칸이 무엇인지 몰랐다 */
.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);}

/* [STEP-42] 정답 화면 해설 */

.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;
}

/* [STEP-52] 문제 폼 — 선택지별 발음·뜻 */
.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;} }

/* ============================================================
   [STEP-57] 프로필 설정 화면
   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(63,110,100,.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%;}
}

/* ============================================================
   [STEP-57] 휴대폰 화면 다듬기
   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;}
}

/* ============================================================
   [STEP-58] 오늘의 학습(홈) · 단원 코스 · 단원 화면 · 단어 카드 · 복습
   다른 언어 학습 앱처럼 "지금 할 일 하나"를 크게, 나머지는 한 줄짜리 큰 칸으로.
   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; margin:0 0 10px;}
.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;}
.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:'Shippori Mincho','Noto Serif KR',serif; 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:#FFF3DC; border-color:#E9C98A; color:#8A5A00;}

.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:#fff;
  background:linear-gradient(135deg,#3F6E64,#2C5249);
  /* [STEP-67] 앱판 색을 따라감(color-mix 를 모르면 위 초록) / follows the edition colour */
  background:linear-gradient(135deg, var(--teal), color-mix(in srgb, var(--teal) 70%, #000));
  box-shadow:0 8px 22px rgba(44,82,73,.28);
}
.hero-card:hover{filter:brightness(1.05);}
.hero-card .unit-icon{background:rgba(255,255,255,.14); color:#fff; 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:.5px; 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:#F2D38B;}
.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(63,110,100,.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;
}
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:#fff; 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;}
.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(38,34,32,.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(63,110,100,.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:#fff;}
.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);}

/* ============================================================
   [STEP-58] 휴대폰에서 읽고 누르기 편하게
   · 글자 15px, 설명 13.5px — 14px 은 휴대폰에서 작았다
   · 단추 높이 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:10.5px; letter-spacing:2px; 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;}

}

/* [STEP-58] 하루 목표 고르기 / 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:#fff; 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(63,110,100,.08); box-shadow:0 0 0 2px rgba(63,110,100,.2);}
.goal-choice input:focus-visible + span{outline:2px solid var(--teal); outline-offset:2px;}

/* [STEP-58] 하단 탭이 다섯 칸이라 한 줄에 다 들어간다 — 글자 길이와 상관없이 같은 너비로 나눈다.
   글자가 긴 언어에서만 칸이 글자만큼 넓어지고, 그래도 넘치면 예전처럼 옆으로 민다.
   Five tabs fit in one row, so they share the width equally regardless of label length; a long label
   widens only its own tab, and a row that still overflows scrolls sideways as before. */
@media (max-width:880px){
  .tabbar-track > a{flex:1 0 0; min-width:max-content;}
}

/* [STEP-58] hidden 속성은 언제나 숨긴다. .badge·.btn·.card 처럼 display 를 정한 규칙이 브라우저 기본
   [hidden]{display:none} 을 이겨서, 단어 카드의 "본 단어" 표시와 "몰라요 다시 보기" 단추가 숨겨지지 않았다.
   The hidden attribute always hides: rules that set display (.badge, .btn, .card) beat the browser's
   default [hidden]{display:none}, so the flashcard "seen" badge and retry button never disappeared. */
[hidden]{display:none !important;}

/* [STEP-58] 넓은 화면(컴퓨터)에서는 코스를 두 줄로 놓아 한눈에 더 많이 보이게 한다.
   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;}
}

/* ============================================================
   [STEP-59] 가나 획순 그림 / 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:#E6DECD; 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:#E3DAC6; stroke-width:7;}
.kstroke.ghost .ks-arrow{fill:#CFC3AB; stroke:none;}
.kstroke.ghost .ks-start{fill:#CFC3AB; stroke:none;}
.kstroke.ghost .ks-badge{fill:#fff; stroke:#CFC3AB; stroke-width:.9;}
.kstroke.ghost .ks-num{fill:#B3A68C; 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:#fff; 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:#fff; 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:'Shippori Mincho','Noto Serif KR',serif; 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:#fff; 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(63,110,100,.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;}
}

/* [STEP-59] 최근 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(63,110,100,.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(63,110,100,.35);}

/* ============================================================
   [STEP-60] 한 화면에 집중 / 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);
}
.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:#9DBDB4;}
.q-dot.current::before{background:var(--teal); height:12px; box-shadow:0 0 0 2px rgba(63,110,100,.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:#FFF9F7;}
.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:#8A6A1F;}
.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:#E9F3EF; color:var(--teal);}
.quiz-feedback.bad{background:#FBECE9; color:var(--red);}
.quiz-feedback.late{background:#FBF3DF; color:#8A6A1F;}
.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:#8A6A1F;}
.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:#9DBDB4; 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:#F2D38B; color:#2B2416; 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:.5px;}
.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:#9DBDB4;}
.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:14px; font-size:13px;}

/* 단원 화면 / 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(63,110,100,.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;}
}

/* ============================================================
   [STEP-61] 문의 공개 범위 / 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(63,110,100,.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);}

/* ============================================================
   [STEP-61] 말하기 연습 — 점검 칩·단계·큰 마이크 단추·결과 칸
   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:#9DBDB4; color:var(--teal);}
.check-chip.bad{border-color:var(--red); color:var(--red); background:#FBF3F1;}
.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:'Shippori Mincho','Noto Serif KR',serif; 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(63,110,100,.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:#8A8270;}
@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:#FBF3F1; 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:#F2F8F5;}
.lg-wrong{color:var(--red); background:#FBF3F1;}
.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;}
}

/* ============================================================
   [STEP-61] 언어별 글자표·발음 규칙·듣고 고르기 / 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(63,110,100,.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:#F2F8F5; border-color:var(--teal); color:var(--teal);}
.lq-opt.is-wrong{background:#FBF3F1; 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;}
}

/* ============================================================
   [STEP-62] 시안에서 보충한 것 — 브랜드·알림 벨·인사 카드·학습 포인트·국기·추천 과정·바로가기
   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:#EFE9DA;}
.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(38,34,32,.2), 0 2px 6px rgba(38,34,32,.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:#fff; background:linear-gradient(135deg,#3F6E64,#2C5249);
  background:linear-gradient(135deg, var(--teal), color-mix(in srgb, var(--teal) 70%, #000));
  box-shadow:0 6px 16px rgba(44,82,73,.25);}
.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;}
@media (max-width:600px){
  .greet-row{grid-template-columns:1fr;}
  .points-card{flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:4px 10px; min-width:0;}
  .points-hint{flex-basis:100%;}
}

.slogan{margin:4px 0 6px;}
.slogan-title{margin:0; font-size:24px; font-weight:800; color:var(--teal); font-family:'Shippori Mincho','Noto Serif KR',serif;}
.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(63,110,100,.18); background:#F2F8F5;}
.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:'Shippori Mincho','Noto Serif KR',serif;
  background:linear-gradient(135deg,#E8F1EE,#C9DDD6); 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;}
}

/* ============================================================
   [STEP-63] 언어교환 게시판 / language-exchange board
   글 목록(카드) · 글 보기 · 댓글 · 신고 접기 · 차단 목록 · 관리자 신고 처리
   Post cards, detail, comments, folding report form, block list, admin reports
   ============================================================ */
.exchange .ex-safety{background:#F4F8F6; border:1px solid #CFE0DA; border-radius:14px; padding:10px 14px; margin:8px 0 12px; font-size:13px;}
.ex-safety summary{cursor:pointer; font-weight:700; color:var(--teal);}
.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:#FBF7EC;}
.ex-link:focus-visible{outline:3px solid rgba(63,110,100,.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:#EDE7DA; color:var(--ink-soft);}
.badge-mine{background:#E6F0EC; color:var(--teal); border-color:#CFE0DA;}
.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:#FBEDEA; border:1px solid #EBC9C2; 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:#FFFBF2; 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(63,110,100,.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:#F2F8F5; font-weight:700;}
.ex-agree{background:#F4F8F6; border:1px solid #CFE0DA; 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:#FBF6F4; 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;}
}

/* ============================================================
   [STEP-64] 프리미엄 · 광고 자리 · 인쇄용 바인더
   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:#FBF8F0;
  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:#FFF7E6; border:1px solid #EED9A8;}
.speak-limit-msg{margin:0 0 4px; font-weight:700; color:#7A5A12;}

/* 소개 화면 / plans */
.premium .pr-status{padding:14px 16px; margin-bottom:12px;}
.pr-status.is-premium{background:linear-gradient(135deg,#FFF8E6,#FDF1D2); border-color:#EAD39A;}
.pr-status-badge{margin:0; font-weight:800; color:#8A6514;}
.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:#FFF8E6; font-weight:700; color:#6B4E0E;}
.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(63,110,100,.15);}
.pr-plan:has(input:focus-visible){outline:3px solid rgba(63,110,100,.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:#fff !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;}
}

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

/* ============================================================
   [STEP-66] 메뉴 단순화 — 묶음 사이드바 · 전체 메뉴 · 연습 격자 · 홈 바로 가기 · 안내 띠 · 소리 설정
   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:8px 22px 3px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(239,233,218,.45); 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{padding:8px 22px;}
.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:'Shippori Mincho','Noto Serif KR',serif; font-size:19px;
}
.hub-title{font-family:'Shippori Mincho','Noto Serif KR',serif; 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:'Shippori Mincho','Noto Serif KR',serif; 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:12px; background:#1F2A28; color:#EFE9DA;
  box-shadow:0 8px 24px rgba(0,0,0,.22); font-size:13px; line-height:1.45;
}
.toast a{color:#E8C873; font-weight:700; white-space:nowrap;}
@media (min-width:881px){ .toast{bottom:24px;} }

/* 소리 설정 / 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:#E3EFE9; 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 ul{margin:8px 0 0; padding-left:18px;}
.voice-guide li{margin-bottom:6px; font-size:13px;}
/* [STEP-66] 휴대폰의 전체 메뉴는 두 칸씩(덜 내려도 다 보이게), 칸은 세로로 / 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;}
}

/* ===== [STEP-67] 앱판·약관 링크·계정 삭제 / editions, policy links, account deletion ===== */
/* 사이드바 아래 약관·개인정보 처리방침·계정 삭제(플레이: 앱 안에서도 방침을 열 수 있어야 함) */
.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;}
@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:#962F25; border-color:#962F25;}
/* 개인정보 처리방침 표 / 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;}
/* 휴대폰 위 띠에서도 앱판이면 무엇을 배우는 앱인지 보이게(사이드바 작은 글씨는 원래 숨김) / 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);}
}

/* [STEP-69] 관리: 앱 출시 점검 / 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;}