/* ============================================================
   PINEHILL ENGLISH — 초·중·고 영어 학습 관리
   공부하는 화면이라 눈이 편하고 글자가 또렷한 것을 가장 앞에 두었습니다.
   ============================================================ */

/* ============================================================
   ★★★ 학원 색 — 여기 여섯 줄만 바꾸면 홈페이지 전체가 따라 바뀝니다 ★★★
   ------------------------------------------------------------
   인테리어 파란색에 맞추실 때는 아래 --brand 부터 --tint 까지만
   고치시면 됩니다. 단추 · 제목 · 표 머리 · 그래프 · 뱃지가 모두
   이 값을 보고 그려지므로 다른 곳은 손대지 않으셔도 됩니다.

   고르실 때 지키면 좋은 것
     · --brand      흰 글자를 얹어야 하므로 너무 밝으면 안 됩니다
     · --brand-dk   --brand 보다 어둡게 (눌렀을 때 · 진한 제목)
     · --brand-lt   --brand 보다 밝게   (작은 글씨 · 보조선)
     · --tint       아주 옅게 (고른 줄의 배경)
   ============================================================ */
:root{
  /* ── 브랜드 (여기를 바꾸세요) ──
     ★ 학원 벽 파란색에서 그대로 뽑은 값입니다.
       보내주신 사진의 벽 33만 화소를 재어 보니 색상(hue)이 217° 로
       한결같았습니다. 그늘진 벽이 #002868, 조명 받은 벽이 #14418F 였고,
       아래 값은 그 사이에서 흰 글자가 또렷하게 얹히는 자리로 골랐습니다.
       (--brand 위의 흰 글자 대비 10.1 : 1 — 기준 4.5 의 두 배 넘음) */
  --brand:     #0B3D8E;   /* 조명 받은 벽 — 단추 · 제목 · 표 머리 */
  --brand-dk:  #082D68;   /* 그늘진 벽 — 사진에서 가장 많이 나온 색 그대로 */
  --brand-lt:  #3B73CE;   /* 밝은 쪽 — 작은 글씨 · 보조선 */
  --tint:      #E2EBF8;   /* 아주 옅게 — 고른 줄의 배경 */
  --bg:        #F4F7FB;   /* 바탕 — 벽빛이 아주 조금 도는 흰색 */
  --accent:    #083378;   /* 링크 · 강조 글자 */

  /* ── 바탕 ── */
  --surface:   #FFFFFF;
  --surface-2: #EBF0F8;   /* 표 머리·비활성 영역 */

  /* ── 글자 ──
     ★ 작은 글씨가 흐려 보이지 않게 대비를 재서 정한 값입니다.
       (흰 바탕 기준 · 웹 접근성 기준은 4.5:1)
         --ink       17.1 : 1   본문
         --ink-soft   7.6 : 1   보조 설명
         --ink-faint  5.1 : 1   가장 작은 글씨 — 예전 3.7 에서 올렸습니다 */
  --ink:       #141C2B;
  --ink-soft:  #47546B;
  --ink-faint: #626F8A;

  /* ── 선 ── */
  --line:      #D8DFEC;
  --line-2:    #B8C4D8;

  /* ── 뜻이 있는 색 ── */
  --ok:        #12805C;   /* 정답 */
  --ok-bg:     #E3F5EE;
  --no:        #C1443F;   /* 오답 */
  --no-bg:     #FBE9E8;
  --warn:      #B07D18;
  --warn-bg:   #FBF2DF;

  /* ── 학년 색 ── */
  --g-e1: #58A55C;  --g-e2: #3FA08C;  --g-e3: #2F9BB5;
  --g-e4: #5E8FC7;  --g-e5: #7F86CC;  --g-e6: #9C7CC0;
  --g-m1: #4C8DD9;  --g-m2: #3E9E8F;  --g-m3: #6A7FD4;
  --g-h1: #C77A2E;  --g-h2: #B0524E;  --g-h3: #7C5AA6;

  --radius:   8px;
  --radius-l: 14px;
  --shadow:   0 1px 2px rgba(22,35,47,.05), 0 4px 14px rgba(22,35,47,.06);
  --shadow-l: 0 2px 6px rgba(22,35,47,.07), 0 14px 34px rgba(22,35,47,.09);

  --font-body: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --wrap: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;

  /* ★ 화면을 옮겨 다닐 때 좌우로 흔들리지 않게 합니다.
     -------------------------------------------------------------
     내용이 긴 화면(홈·시험·오답노트)에는 오른쪽 스크롤 막대가 생기고,
     짧은 화면(학습)에는 생기지 않습니다.
     막대가 차지하는 15px 남짓 때문에 쓸 수 있는 너비가 달라져,
     가운데 정렬된 본문이 화면마다 7~8px 씩 좌우로 튀었습니다.
     막대 자리를 늘 비워두면 있든 없든 같은 자리에 있습니다.
     (지원하지 않는 브라우저는 이 줄을 그냥 무시합니다) */
  scrollbar-gutter:stable;
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:15.5px; line-height:1.72;
  -webkit-font-smoothing:antialiased; word-break:keep-all;
  display:flex; flex-direction:column; min-height:100vh;
}
main{ flex:1; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); }
h1,h2,h3,h4,h5{ margin:0; line-height:1.4; font-weight:700; letter-spacing:-.01em; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 20px; }
.narrow-page .wrap{ max-width:560px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pad{ padding:clamp(24px,4vw,40px) 0; }

/* ============================================================
   머리말
   ============================================================ */
.site-head{ background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.head-inner{ display:flex; align-items:center; gap:24px; height:60px; }

.logo{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--brand); flex:none; }
.logo-mark{ width:26px; height:26px; display:block; }
.logo-mark svg{ width:100%; height:100%; display:block; }
.logo-text{
  display:flex; align-items:baseline; gap:5px;
  font-size:18px; letter-spacing:.02em; color:var(--ink); white-space:nowrap;
}
.logo-text b{ font-weight:800; }
.logo-text i{ font-style:normal; font-weight:600; color:var(--brand); font-size:.92em; }
.logo-slogan{ font-size:13.5px; color:var(--ink-faint); font-weight:500;
  padding-left:11px; margin-left:2px; border-left:1px solid var(--line-2); }

.main-nav{ display:flex; gap:2px; flex:1; min-width:0; }
.main-nav a{
  padding:8px 14px; border-radius:var(--radius); text-decoration:none;
  color:var(--ink-soft); font-size:14.5px; font-weight:600; white-space:nowrap;
  transition:background .13s, color .13s;
}
.main-nav a:hover{ background:var(--surface-2); color:var(--ink); }
.main-nav a.on{ background:var(--tint); color:var(--brand-dk); }

.head-right{ display:flex; align-items:center; gap:12px; margin-left:auto; flex:none; }
.who{ display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit; }
.avatar{
  width:32px; height:32px; border-radius:50%; flex:none;
  background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
}
.who-text{ display:flex; flex-direction:column; line-height:1.25; }
.who-text b{ font-size:14px; }
.who-text small{ font-size:12.5px; color:var(--ink-faint); }
.who:hover b{ color:var(--brand); }

.inline-form{ margin:0; display:inline; }
.link-btn{
  background:none; border:none; padding:6px 4px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--ink-soft); text-decoration:none;
}
.link-btn:hover{ color:var(--brand); }

.nav-toggle{ display:none; width:36px; height:36px; border:1px solid var(--line-2); border-radius:var(--radius);
  background:var(--surface); cursor:pointer; padding:9px 8px; flex-direction:column; justify-content:space-between; }
.nav-toggle span{ display:block; height:2px; background:var(--ink-soft); border-radius:2px; }

.admin-strip{ background:var(--brand-dk); color:#fff; font-size:13.5px; }
.admin-strip .wrap{ display:flex; gap:14px; align-items:center; padding-top:7px; padding-bottom:7px; }
.admin-strip a{ color:#fff; font-weight:700; margin-left:auto; text-decoration:none; }
.admin-strip a:hover{ text-decoration:underline; text-underline-offset:3px; }

@media (max-width:900px){
  .logo-slogan{ display:none; }
  /* 이름이 길면 좁은 화면에서 메뉴를 밀어냅니다 — 뒤 낱말만 감춥니다 */
  .logo-text i{ display:none; }
  .who-text{ display:none; }
  .nav-toggle{ display:flex; }
  .main-nav{
    position:absolute; top:60px; left:0; right:0; background:var(--surface);
    border-bottom:1px solid var(--line); flex-direction:column; gap:0; padding:8px 16px 14px;
    box-shadow:var(--shadow); display:none;
  }
  body.nav-open .main-nav{ display:flex; }
  .main-nav a{ padding:11px 12px; }
}

/* ============================================================
   꼬리말
   ============================================================ */
.site-foot{ background:var(--surface); border-top:1px solid var(--line); margin-top:56px; }
.site-foot .wrap{ display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center;
  padding-top:22px; padding-bottom:22px; font-size:13.5px; color:var(--ink-faint); }
.foot-left b{ color:var(--ink); margin-right:9px; }
.foot-right{ margin-left:auto; display:flex; gap:18px; align-items:center; }
.foot-right a{ color:var(--ink-soft); text-decoration:none; }
.foot-right a:hover{ color:var(--brand); }
.foot-right .cr{ font-family:var(--font-mono); font-size:12.5px; }

/* ============================================================
   제목 줄 · 안내
   ============================================================ */
.page-head{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end;
  margin:0 0 22px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.eyebrow{ display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand-lt); margin-bottom:5px; font-weight:600; }
.page-head h1{ font-size:clamp(21px,2.6vw,27px); }
.page-head-right{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.section-title{ font-size:16.5px; margin:0 0 14px; display:flex; align-items:center; gap:9px; }
.section-title .count{ font-family:var(--font-mono); font-size:13px; color:var(--ink-faint); font-weight:500; }

.alert{ padding:13px 16px; border-radius:var(--radius); font-size:14px; margin:0 0 18px; line-height:1.65; }
.alert-ok   { background:var(--ok-bg);   color:#0A5F44; border-left:3px solid var(--ok); }
.alert-error{ background:var(--no-bg);   color:#8E2F2B; border-left:3px solid var(--no); }
.alert-warn { background:var(--warn-bg); color:#7A5510; border-left:3px solid var(--warn); }
.alert-info { background:var(--tint);    color:var(--brand-dk); border-left:3px solid var(--brand-lt); }

.empty-box{ background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--radius-l);
  padding:40px 24px; text-align:center; }
.empty-box .t{ margin:0 0 8px; font-size:16px; font-weight:700; color:var(--ink); }
.empty-box .d{ margin:0; font-size:14px; color:var(--ink-soft); line-height:1.8; }
.empty-box .a{ margin-top:20px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

.notice-box{ background:var(--surface); border-radius:var(--radius-l); box-shadow:var(--shadow);
  padding:44px 28px; text-align:center; max-width:520px; margin:40px auto; }
.notice-box h2{ font-size:20px; margin-bottom:10px; }
.notice-box p{ color:var(--ink-soft); font-size:14.5px; margin:0 0 22px; }

/* ============================================================
   단추
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 20px; border-radius:var(--radius); border:1px solid transparent;
  font-family:inherit; font-size:14px; font-weight:700; line-height:1.3;
  text-decoration:none; cursor:pointer; white-space:nowrap; transition:.14s;
}
.btn-solid{ background:var(--brand); color:#fff; }
.btn-solid:hover{ background:var(--brand-dk); }
.btn-outline{ background:var(--surface); color:var(--ink); border-color:var(--line-2); }
.btn-outline:hover{ border-color:var(--brand); color:var(--brand); }
.btn-ghost{ background:transparent; color:var(--ink-soft); }
.btn-ghost:hover{ background:var(--surface-2); color:var(--ink); }
.btn-danger{ background:var(--surface); color:var(--no); border-color:#E9C4C2; }
.btn-danger:hover{ background:var(--no); color:#fff; border-color:var(--no); }
.btn-sm{ padding:7px 14px; font-size:13.5px; }
.btn-lg{ padding:14px 30px; font-size:15.5px; }
.btn-block{ width:100%; }
.btn:disabled,.btn[disabled]{ opacity:.5; cursor:default; }

/* ============================================================
   카드 · 표
   ============================================================ */
.card{ background:var(--surface); border-radius:var(--radius-l); box-shadow:var(--shadow); padding:22px; }
.card + .card{ margin-top:16px; }
.card h3{ font-size:16px; margin-bottom:4px; }
.card .desc{ font-size:14px; color:var(--ink-soft); margin:0 0 16px; line-height:1.75; }

.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-side{ grid-template-columns:minmax(0,1fr) 320px; }
@media (max-width:960px){
  .grid-3,.grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-side{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:minmax(0,1fr); }
}

.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.data{ width:100%; border-collapse:collapse; font-size:14px; min-width:520px; }
table.data th{
  text-align:left; padding:11px 12px; background:var(--surface-2);
  font-size:13px; font-weight:700; color:var(--ink-soft); white-space:nowrap;
  border-bottom:1px solid var(--line-2);
}
table.data td{ padding:12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.data tbody tr:hover{ background:var(--tint); }
table.data td.num,table.data th.num{ font-family:var(--font-mono); font-size:13.5px; }
table.data td.right,table.data th.right{ text-align:right; }
table.data td.center,table.data th.center{ text-align:center; }
table.data .actions{ display:flex; gap:6px; justify-content:flex-end; white-space:nowrap; }
table.data .main{ font-weight:600; color:var(--ink); text-decoration:none; }
table.data .main:hover{ color:var(--brand); }
table.data .sub{ display:block; font-size:12.5px; color:var(--ink-faint); margin-top:2px; }

/* ============================================================
   입력칸
   ============================================================ */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.5px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; }
.field .hint{ font-size:13px; color:var(--ink-faint); margin-top:5px; line-height:1.6; }
.field .err{ font-size:13.5px; color:var(--no); margin-top:5px; font-weight:600; }

input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],
input[type=search],input[type=date],input[type=datetime-local],select,textarea{
  width:100%; padding:10px 12px; font-family:inherit; font-size:14.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius);
  transition:border-color .13s, box-shadow .13s;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
input::placeholder,textarea::placeholder{ color:var(--ink-faint); }
textarea{ resize:vertical; min-height:110px; line-height:1.7; }
select{ appearance:none; -webkit-appearance:none; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%237C8FA1' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:11px; }
input[disabled],select[disabled],textarea[disabled]{ background:var(--surface-2); color:var(--ink-faint); }

.field-row{ display:flex; gap:12px; flex-wrap:wrap; }
.field-row > .field{ flex:1; min-width:150px; }

.check{ display:flex; align-items:flex-start; gap:9px; font-size:14px; cursor:pointer; margin-bottom:9px; }
.check input{ width:17px; height:17px; margin:2px 0 0; flex:none; accent-color:var(--brand); cursor:pointer; }
.check span{ line-height:1.6; }
.check small{ display:block; font-size:13px; color:var(--ink-faint); }

.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  background:var(--surface); border-radius:var(--radius-l); padding:16px; margin-bottom:18px;
  box-shadow:var(--shadow); }
.filters .field{ margin:0; min-width:140px; }
.filters .field.grow{ flex:1; min-width:180px; }

/* ============================================================
   뱃지 · 알약
   ============================================================ */
.gbadge{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:12.5px; font-weight:700; color:#fff; white-space:nowrap; line-height:1.7;
}
.gbadge.g-e1{ background:var(--g-e1); } .gbadge.g-e2{ background:var(--g-e2); }
.gbadge.g-e3{ background:var(--g-e3); } .gbadge.g-e4{ background:var(--g-e4); }
.gbadge.g-e5{ background:var(--g-e5); } .gbadge.g-e6{ background:var(--g-e6); }
.gbadge.g-m1{ background:var(--g-m1); } .gbadge.g-m2{ background:var(--g-m2); }
.gbadge.g-m3{ background:var(--g-m3); } .gbadge.g-h1{ background:var(--g-h1); }
.gbadge.g-h2{ background:var(--g-h2); } .gbadge.g-h3{ background:var(--g-h3); }

.pill{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:12.5px; font-weight:700; line-height:1.7; white-space:nowrap;
  background:var(--surface-2); color:var(--ink-soft);
}
.pill-active,.pill-open,.pill-on{ background:var(--ok-bg); color:#0A5F44; }
.pill-pending,.pill-draft   { background:var(--warn-bg); color:#7A5510; }
.pill-rejected,.pill-paused { background:var(--no-bg); color:#8E2F2B; }
.pill-closed,.pill-off      { background:var(--surface-2); color:var(--ink-faint); }
/* 단어·숙어 — 둘 다 파랑 계열로 모으되 서로는 구별되게 */
.pill-word { background:#E2EBF8; color:#0B3D8E; }
.pill-idiom{ background:#DDEDF2; color:#0B5872; }

.tag-line{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }

/* ============================================================
   숫자 카드 (대시보드)
   ============================================================ */
.stat-row{ display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:22px; }
@media (max-width:800px){ .stat-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.stat{
  background:var(--surface); border-radius:var(--radius-l); padding:18px 20px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:3px; text-decoration:none; color:inherit;
  border-left:3px solid var(--brand-lt);
}
a.stat:hover{ box-shadow:var(--shadow-l); transform:translateY(-1px); }
.stat .k{ font-size:13.5px; color:var(--ink-faint); font-weight:600; }
.stat .v{ font-size:26px; font-weight:800; font-family:var(--font-mono); letter-spacing:-.02em; }
.stat .v small{ font-size:13.5px; font-weight:600; color:var(--ink-faint); margin-left:3px; font-family:var(--font-body); }
.stat.warn{ border-left-color:var(--warn); }
.stat.warn .v{ color:var(--warn); }
.stat.ok{ border-left-color:var(--ok); }
.stat.no{ border-left-color:var(--no); }
.stat.no .v{ color:var(--no); }

/* ============================================================
   ★ 한눈에 보기 — 칸마다 다른 색
   ------------------------------------------------------------
   여덟 칸이 모두 같은 색이면 찾는 숫자를 눈으로 짚기 어렵습니다.
   칸마다 색을 주면 "학생 수는 초록 칸" 처럼 자리로 기억하게 됩니다.

   색은 글자에 쓰지 않고 왼쪽 띠·옅은 바탕·작은 점에만 씁니다.
   숫자는 늘 진한 먹색이라, 색을 못 알아보셔도 읽는 데 지장이 없습니다.
   (--t 는 띠와 점, --tb 는 옅은 바탕입니다)
   ============================================================ */
.stat[class*="t-"]{
  border-left-color:var(--t);
  background:
    linear-gradient(var(--tb), var(--tb)) padding-box,
    var(--surface);
}
.stat[class*="t-"] .k{ color:var(--ink-soft); }
.stat[class*="t-"] .v{ color:var(--ink); }
/* 이름 앞의 작은 점 */
.stat[class*="t-"] .k:first-child::before{
  content:''; display:inline-block; vertical-align:middle;
  width:7px; height:7px; margin:-2px 6px 0 0;
  background:var(--t); border-radius:99px;
}
a.stat[class*="t-"]:hover{ border-left-color:var(--t); }

.stat.t-teal   { --t:#0B5872; --tb:rgba(11,88,114,.055); }
.stat.t-green  { --t:#12805C; --tb:rgba(18,128,92,.055); }
.stat.t-blue   { --t:#3D6FC4; --tb:rgba(61,111,196,.055); }
.stat.t-violet { --t:#7C5AA6; --tb:rgba(124,90,166,.06); }
.stat.t-amber  { --t:#B07D18; --tb:rgba(176,125,24,.07); }
.stat.t-rose   { --t:#B0524E; --tb:rgba(176,82,78,.055); }
.stat.t-cyan   { --t:#2F9BB5; --tb:rgba(47,155,181,.06); }
.stat.t-plum   { --t:#9C5E8A; --tb:rgba(156,94,138,.055); }

/* 할 일이 남은 칸은 색보다 먼저 눈에 들어와야 합니다 */
.stat.t-amber.warn .v{ color:var(--warn); }

/* ============================================================
   점수
   ============================================================ */
.score{ font-family:var(--font-mono); font-weight:800; font-size:15px; }
.score.sc-a{ color:#0A5F44; } .score.sc-b{ color:#12805C; }
.score.sc-c{ color:#B07D18; } .score.sc-d{ color:#C77A2E; }
.score.sc-e{ color:var(--no); }

.bar{ height:6px; background:var(--surface-2); border-radius:99px; overflow:hidden; margin-top:6px; }
.bar i{ display:block; height:100%; background:var(--brand); border-radius:99px; }
.bar.sc-a i{ background:#12805C; } .bar.sc-b i{ background:#3E9E8F; }
.bar.sc-c i{ background:#C9A227; } .bar.sc-d i{ background:#C77A2E; }
.bar.sc-e i{ background:var(--no); }

/* ============================================================
   로그인 · 가입 (좁은 화면)
   ============================================================ */
.auth-shell{ display:flex; align-items:center; justify-content:center; padding:clamp(28px,6vw,64px) 20px; }
.auth-card{ background:var(--surface); border-radius:var(--radius-l); box-shadow:var(--shadow-l);
  padding:clamp(26px,4vw,38px); width:100%; max-width:440px; }
.auth-card .brand{ display:flex; align-items:center; gap:9px; justify-content:center;
  color:var(--brand); margin-bottom:6px; }
.auth-card h1{ font-size:21px; text-align:center; margin-bottom:6px; }
.auth-card .lead{ text-align:center; font-size:14px; color:var(--ink-soft); margin:0 0 24px; }
.auth-foot{ text-align:center; font-size:14px; color:var(--ink-faint); margin-top:20px;
  padding-top:18px; border-top:1px solid var(--line); }
.auth-foot a{ font-weight:700; text-decoration:none; }
.auth-foot a:hover{ text-decoration:underline; text-underline-offset:3px; }

.role-pick{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px; }
.role-pick label{
  display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
  padding:15px 10px; border:1.5px solid var(--line-2); border-radius:var(--radius);
  background:var(--surface); text-align:center; transition:.14s;
}
.role-pick label:hover{ border-color:var(--brand-lt); }
.role-pick input{ position:absolute; opacity:0; width:0; height:0; }
.role-pick input:checked + .rp-in{ color:var(--brand-dk); }
.role-pick label:has(input:checked){ border-color:var(--brand); background:var(--tint); }
.role-pick .rp-t{ font-size:15px; font-weight:700; }
.role-pick .rp-d{ font-size:12.5px; color:var(--ink-faint); line-height:1.5; }

/* ============================================================
   학습 — 단어 카드
   ============================================================ */
.word-list{ list-style:none; margin:0; padding:0; }
.word-list li{
  display:flex; align-items:flex-start; gap:16px; padding:14px 4px;
  border-bottom:1px solid var(--line);
}
.word-list li:last-child{ border-bottom:none; }
.word-list .no{ font-family:var(--font-mono); font-size:13px; color:var(--ink-faint);
  width:30px; flex:none; padding-top:3px; }
.word-list .en{ flex:0 0 34%; min-width:0; }
.word-list .en b{ font-size:16.5px; font-weight:700; letter-spacing:-.01em; word-break:break-word; }
.word-list .en .pos{ font-size:12.5px; color:var(--ink-faint); margin-left:6px; }
.word-list .ko{ flex:1; min-width:0; font-size:14.5px; color:var(--ink-soft); }
.word-list .ex{ display:block; font-size:13.5px; color:var(--ink-faint); margin-top:4px;
  font-style:italic; }
.word-list .row-act{ margin-left:auto; display:flex; gap:6px; flex:none; }
@media (max-width:640px){
  .word-list li{ flex-wrap:wrap; gap:6px 12px; }
  .word-list .en{ flex:1 1 100%; }
  .word-list .ko{ flex:1 1 100%; padding-left:46px; }
  .word-list .no{ width:auto; }
}

/* ============================================================
   🔊 소리로 듣기
   ------------------------------------------------------------
   ★ 단추는 기본이 '숨김' 입니다.
     assets/speak.js 가 "이 기기에서 됩니다" 를 확인하면 <html> 에
     has-tts 를 붙이고, 그때서야 보입니다.
     눌러도 아무 일이 없는 단추를 보여드리지 않으려는 것입니다.
   ============================================================ */
.speak, .speak-all{ display:none; }
.has-tts .speak{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; flex:none; padding:0; margin-left:6px;
  border:1px solid var(--line-2); border-radius:50%;
  background:var(--surface); color:var(--ink-soft);
  font-size:13.5px; line-height:1; cursor:pointer; vertical-align:middle;
}
.has-tts .speak:hover{ border-color:var(--brand); color:var(--brand); }
.has-tts .speak.is-on{ background:var(--brand); border-color:var(--brand); color:#fff; }
.has-tts .speak-all{ display:inline-flex; }
.is-reading{ background:var(--tint) !important; border-radius:4px; }
@media print{ .speak, .speak-all{ display:none !important; } }

/* 가리고 외우기 */
.word-list.hide-ko .ko .m{ background:var(--surface-2); color:transparent; border-radius:4px;
  cursor:pointer; user-select:none; }
.word-list.hide-ko .ko .m.show{ background:none; color:var(--ink-soft); }
.word-list.hide-en .en b{ background:var(--surface-2); color:transparent; border-radius:4px;
  cursor:pointer; user-select:none; }
.word-list.hide-en .en b.show{ background:none; color:var(--ink); }

.study-bar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  background:var(--surface); border-radius:var(--radius-l); padding:12px 16px;
  box-shadow:var(--shadow); margin-bottom:16px; }
.study-bar .lbl{ font-size:13.5px; color:var(--ink-faint); font-weight:600; margin-right:2px; }
.seg{ display:inline-flex; border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden; }
.seg button{
  background:var(--surface); border:none; padding:7px 14px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink-soft);
  border-right:1px solid var(--line-2);
}
.seg button:last-child{ border-right:none; }
.seg button.on{ background:var(--brand); color:#fff; }
.seg button:hover:not(.on){ background:var(--surface-2); }

/* ============================================================
   시험 응시
   ============================================================ */
.exam-top{
  position:sticky; top:60px; z-index:30; background:var(--surface);
  border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  padding:12px 0; margin-bottom:24px;
}
.exam-top .wrap{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.exam-top .t{ font-weight:700; font-size:15px; }
.exam-top .prog{ flex:1; min-width:140px; }
.exam-top .clock{ font-family:var(--font-mono); font-size:16px; font-weight:700; color:var(--brand-dk); }
.exam-top .clock.hurry{ color:var(--no); }

.q-card{
  background:var(--surface); border-radius:var(--radius-l); box-shadow:var(--shadow);
  padding:24px; margin-bottom:14px;
}
.q-card .q-no{ font-family:var(--font-mono); font-size:13px; color:var(--brand-lt);
  font-weight:700; letter-spacing:.06em; }
.q-card .q-kind{ font-size:12.5px; color:var(--ink-faint); margin-left:8px; }
.q-card .q-stem{ font-size:clamp(20px,3vw,26px); font-weight:700; margin:10px 0 18px;
  letter-spacing:-.01em; word-break:break-word; }
.q-card .q-stem.ko{ font-size:clamp(17px,2.4vw,21px); }
.q-card input[type=text]{ font-size:17px; padding:12px 14px; }

.choices{ display:grid; gap:9px; }
.choice{
  display:flex; align-items:center; gap:11px; padding:13px 15px; cursor:pointer;
  border:1.5px solid var(--line-2); border-radius:var(--radius); background:var(--surface);
  font-size:15px; transition:.13s;
}
.choice:hover{ border-color:var(--brand-lt); background:var(--tint); }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice .mark{
  width:24px; height:24px; border-radius:50%; flex:none;
  background:var(--surface-2); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:13px; font-weight:700;
}
.choice:has(input:checked){ border-color:var(--brand); background:var(--tint); }
.choice:has(input:checked) .mark{ background:var(--brand); color:#fff; }

.exam-foot{ display:flex; gap:10px; justify-content:space-between; align-items:center;
  margin-top:26px; flex-wrap:wrap; }
.exam-foot .left{ font-size:13.5px; color:var(--ink-faint); }

/* ── 기출문제 시험 ────────────────────────────────────────
   낱말 문제는 한 낱말이라 크게 보여주지만,
   기출은 지문이 여러 줄이라 '읽는 글' 처럼 보여야 합니다.
   줄바꿈(pre-wrap)을 살려야 대화문·보기가 원본처럼 읽힙니다. */
.q-card.exam{ padding:22px; }
.q-card .q-stem.long{
  font-size:15.5px; font-weight:500; line-height:1.72; letter-spacing:0;
  white-space:pre-wrap; margin:10px 0 16px;
  max-height:none; overflow-wrap:anywhere;
}
.q-card .q-stem.long::first-line{ font-weight:700; }
.choices.long{ gap:7px; }
.choices.long .choice{ align-items:flex-start; font-size:14.5px; line-height:1.55; padding:11px 13px; }
.choices.long .choice .mark{ margin-top:1px; }
.choices.long .choice > span:last-child{ overflow-wrap:anywhere; }
/* 시험 낼 문항 고르기 (선생님 화면) */
.eq-pick{ display:flex; align-items:flex-start; gap:10px; padding:9px 11px; margin:0 0 6px;
  border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; }
.eq-pick:has(input:checked){ border-color:var(--brand); background:var(--tint); }
.eq-pick input{ width:17px; height:17px; margin-top:2px; flex:none; accent-color:var(--brand); }
.eq-pick .n{ font-family:var(--font-mono); font-size:13.5px; color:var(--ink-faint); flex:none; width:40px; }
.eq-pick .t{ flex:1; min-width:0; font-size:14px; line-height:1.5; }
.eq-pick .t small{ display:block; font-size:13px; color:var(--ink-faint); margin-top:2px; }

@media (max-width:600px){
  .eq-pick .n{ width:34px; }
  .eq-choice .mk{ display:none; }
}


/* ============================================================
   채점 결과
   ============================================================ */
.result-hero{
  background:var(--surface); border-radius:var(--radius-l); box-shadow:var(--shadow);
  padding:clamp(24px,4vw,34px); margin-bottom:22px; text-align:center;
}
.result-hero .big{ font-family:var(--font-mono); font-size:clamp(44px,9vw,64px);
  font-weight:800; line-height:1; letter-spacing:-.03em; }
.result-hero .big small{ font-size:.35em; color:var(--ink-faint); margin-left:4px; font-weight:600; }
.result-hero .sub{ font-size:14.5px; color:var(--ink-soft); margin-top:10px; }
.result-hero .meta{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap;
  margin-top:18px; padding-top:18px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--ink-faint); }
.result-hero .meta b{ color:var(--ink); font-family:var(--font-mono); }

.review-list{ display:grid; gap:10px; }
.rv{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px 18px; border-left:3px solid var(--ok);
}
.rv.no{ border-left-color:var(--no); }
.rv-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:7px; }
.rv-head .n{ font-family:var(--font-mono); font-size:13px; color:var(--ink-faint); }
.rv-head .verdict{ font-size:13px; font-weight:700; padding:2px 9px; border-radius:999px; }
.rv .verdict.y{ background:var(--ok-bg); color:#0A5F44; }
.rv .verdict.n{ background:var(--no-bg); color:#8E2F2B; }
.rv-stem{ font-size:17px; font-weight:700; margin-bottom:6px; }
.rv-stem.long{ font-size:14.5px; font-weight:500; line-height:1.7;
  white-space:pre-wrap; overflow-wrap:anywhere; }
.rv-choices{ margin:8px 0 10px; padding:0 0 0 2px; list-style:none;
  display:grid; gap:4px; font-size:14px; color:var(--ink-soft); }
.rv-choices li{ overflow-wrap:anywhere; }
.rv-choices li b{ font-family:var(--font-mono); color:var(--ink-faint); margin-right:5px; }
.rv-choices li.y{ color:var(--ok); font-weight:600; }
.rv-choices li.y b{ color:var(--ok); }
.rv-line{ font-size:14px; color:var(--ink-soft); }
.rv-line .k{ display:inline-block; width:58px; color:var(--ink-faint); font-size:13.5px; }
.rv-line .mine.wrong{ color:var(--no); text-decoration:line-through; }
.rv-line .right{ color:var(--ok); font-weight:700; }
.rv-ex{ font-size:13.5px; color:var(--ink-faint); font-style:italic; margin-top:6px;
  padding-top:6px; border-top:1px dashed var(--line); }

/* 해설 — 채점이 끝난 뒤에만 나옵니다 */
.rv-expl{ margin-top:10px; padding:10px 12px; border-radius:var(--radius);
  background:var(--surface-2); font-size:14px; line-height:1.75; }
.rv-expl b{ display:block; font-size:13px; color:var(--brand-dk); margin-bottom:3px;
  letter-spacing:.02em; }
.rv-expl span{ display:block; white-space:pre-wrap; color:var(--ink); overflow-wrap:anywhere; }

/* ============================================================
   토스트
   ============================================================ */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 14px);
  background:var(--ink); color:#fff; padding:12px 22px; border-radius:999px;
  font-size:14px; font-weight:600; box-shadow:var(--shadow-l);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:999;
  max-width:calc(100vw - 40px); text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* ============================================================
   인쇄 — 시험지·단어장을 종이로 뽑을 때
   ============================================================ */
@media print{
  .site-head,.site-foot,.exam-top,.no-print,.toast,.page-head-right,
  .admin-top,.admin-side{ display:none !important; }
  /* 시험지를 뽑을 때 왼쪽 메뉴 자리가 빈 칸으로 남지 않게 */
  .admin-shell{ display:block !important; padding:0 !important; }
  .admin-main{ padding:0 !important; }
  body{ background:#fff; font-size:12pt; }
  .card,.q-card,.rv{ box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
  .wrap{ max-width:none; padding:0; }
  a{ color:inherit; text-decoration:none; }
}

/* ---------- 학년별 필수 단어 불러오기 ---------- */
.seed-box{ margin-bottom:20px; border-left:3px solid var(--brand-lt, #3E8FAE); }
.seed-box h3{ margin:0 0 8px; font-size:16.5px; }
.seed-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
  gap:10px; margin-top:16px;
}
.seed-cell{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  background:var(--surface-2, #F4F7F9); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 13px; margin:0;
}
.seed-cell b{ font-size:14.5px; }
.seed-cell span{ font-size:13px; color:var(--ink-faint); }
.seed-cell .btn{ width:100%; text-align:center; margin-top:2px; }
.seed-box .note{ font-size:13.5px; color:var(--ink-faint); }
@media (max-width:520px){
  .seed-box .note{ display:block; margin:8px 0 0 !important; }
}

/* ============================================================
   시험 카드 — 크기 고정
   ------------------------------------------------------------
   시험 이름이 길거나 짧다고 카드 높이와 단추 자리가 들쭉날쭉하면
   목록이 어지러워 보입니다. 칸 높이를 맞추고 단추를 늘 아래에 붙입니다.
   ============================================================ */
.grid > .card{
  display:flex; flex-direction:column;   /* 세로로 쌓아 아래를 비워둡니다 */
  height:100%;                            /* 한 줄 안에서 높이를 맞춥니다 */
}
/* 띠(진행 중 · 반 이름)는 한 줄로 고정 — 없어도 자리를 지킵니다 */
.grid > .card .tag-line{ min-height:24px; }
/* 제목은 두 줄까지, 넘치면 … 로 줄입니다 */
.grid > .card h3{
  font-size:16.5px; line-height:1.45;
  min-height:calc(1.45em * 2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
/* 설명도 자리를 정해둡니다 (두 줄) */
.grid > .card .desc{ min-height:calc(1.7em * 2); }
/* 단추는 언제나 카드 맨 아래 */
.grid > .card .btn-block{ margin-top:auto; }
/* ★ 칸 안에서는 카드끼리 띄우는 여백을 쓰지 않습니다.
   .card + .card 의 margin-top 이 남아 있으면 같은 줄의 카드가
   서로 16px 씩 어긋나 아래로 처져 보입니다. */
.grid > .card + .card{ margin-top:0; }

/* 표 — 칸 너비 고정 (큰 화면) */
table.data{ table-layout:fixed; }
table.data th,
table.data td{ overflow-wrap:anywhere; }
/* 가운데·오른쪽 칸은 내용이 짧으므로 너비를 정해둡니다 */
table.data th.center,
table.data td.center{ width:110px; }
table.data th.num,
table.data td.num{ width:150px; }
table.data th.right,
table.data td.right{ width:120px; }

@media (max-width:700px){
  /* ============================================================
     ★ 휴대폰에서 표 — 글자가 세로로 눌리던 것을 고쳤습니다
     ------------------------------------------------------------
     예전에는 이랬습니다.
        table-layout: fixed           (칸 너비를 미리 못 박음)
        .center 칸마다 width: 110px   (짧은 내용인데도 넓게)
        overflow-wrap: anywhere       (낱말 가운데서도 자름)
     가운데 칸 넷이 440px 을 가져가면 이름 칸에 27px 밖에 안 남습니다.
     그 27px 에 글자를 끼워 넣느라 '시 / 험 / 이 / 름' 처럼 한 글자씩
     세로로 쌓였습니다.

     이제는
        · 칸 너비를 내용에 맡기고 (table-layout: auto)
        · 짧은 칸은 줄바꿈을 막고 (white-space: nowrap)
        · 낱말 가운데서 자르지 않고 (word-break: keep-all)
        · 첫 칸(이름)은 옆으로 밀어도 붙어 있게 (position: sticky)
     둡니다. 표는 옆으로 밀어 보시면 됩니다.
     ============================================================ */
  table.data{ table-layout:auto; min-width:560px; }
  table.data th,
  table.data td{ overflow-wrap:normal; word-break:keep-all; }
  /* 어떤 칸도 이보다 좁아지지 않게 — 좁으면 글자가 눌립니다 */
  table.data td{ min-width:76px; }
  /* 아주 긴 영어 낱말·주소만 잘라 줍니다 */
  table.data td code,
  table.data td .break{ overflow-wrap:anywhere; word-break:break-all; }
  /* 짧은 칸은 넓이를 못 박지 않고, 대신 줄바꿈만 막습니다 */
  table.data th.center, table.data td.center,
  table.data th.num,    table.data td.num,
  table.data th.right,  table.data td.right{ width:auto; white-space:nowrap; }

  /* 첫 칸은 왼쪽에 붙여 둡니다 — 옆으로 밀어도 누구 것인지 보입니다 */
  table.data th:first-child,
  table.data td:first-child{
    position:sticky; left:0; z-index:2;
    background:var(--surface);
    box-shadow:1px 0 0 var(--line);
    max-width:168px; min-width:112px;
  }
  table.data thead th:first-child{ background:var(--surface-2); z-index:3; }
  table.data tbody tr:hover td:first-child{ background:var(--tint); }
  table.data tr.aw-group td:first-child{ background:var(--surface-2); }

  /* 옆으로 밀 수 있다는 것을 오른쪽 그늘로 알려줍니다 */
  .table-wrap{ position:relative; }
  .table-wrap.can-scroll::after{
    content:''; position:absolute; top:0; right:0; bottom:0; width:26px;
    pointer-events:none;
    background:linear-gradient(to right, rgba(255,255,255,0), rgba(0,0,0,.07));
  }
}

/* ============================================================
   🔔 알림 — 머리말의 종 모양
   ------------------------------------------------------------
   휴대폰에서도 손가락으로 누를 만하게 44px 을 지킵니다.
   ============================================================ */
/* ★ 머리말은 흰 바탕입니다. 종을 흰색으로 두면 보이지 않습니다. */
.bell{
  position:relative; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-right:-2px;
  border-radius:11px; color:var(--ink-soft);
  text-decoration:none;
}
.bell:hover, .bell:focus-visible{ background:var(--surface-2); color:var(--brand); }
.bell svg{
  width:22px; height:22px;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.bell.has{ color:var(--brand); }
.bell.has svg{ fill:var(--accent-soft, #DCEDF3); }
.bell-n{
  position:absolute; top:2px; right:0;
  min-width:17px; height:17px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  background:var(--no, #C1443F); color:#fff;
  font-size:11.5px; font-weight:700; line-height:1;
  border-radius:9px; border:2px solid var(--surface, #fff);
}

/* ---------- 알림 목록 ---------- */
.nt-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.nt-head h1{ margin:0; font-size:24px; }

.nt-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.nt-item a{
  display:grid; gap:5px;
  padding:15px 16px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); text-decoration:none; color:inherit;
  border-left:4px solid var(--line-2);
}
.nt-item a:hover, .nt-item a:focus-visible{ background:var(--tint); }
.nt-item.is-new a{ border-left-color:var(--brand); background:var(--surface); }
.nt-kind{
  justify-self:start;
  font-size:12.5px; font-weight:700; color:var(--brand);
  background:var(--accent-soft, #DCEDF3); padding:2px 8px; border-radius:999px;
}
.nt-item.is-new .nt-kind::after{ content:' ·  새 알림'; }
.nt-title{ font-size:16px; font-weight:700; line-height:1.45; word-break:keep-all; }
.nt-body{ font-size:14px; color:var(--ink-soft); line-height:1.6; word-break:keep-all; }
.nt-when{ font-size:13px; color:var(--ink-faint); }

@media (max-width:600px){
  .nt-item a{ padding:14px; }
  .nt-title{ font-size:15.5px; }
}

/* ============================================================
   📋 문제 글 안의 표
   ------------------------------------------------------------
   문제 글에 줄마다 칸을 | 로 나눠 적으면 표로 그려 드립니다.
   표가 아닌 줄은 pre-wrap 그대로라, .qt-text 로 감싸 두었습니다.
   ============================================================ */
.qt-text{ white-space:pre-wrap; }

.qt-wrap{
  display:block; margin:12px 0; overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
table.qt{
  border-collapse:collapse; width:auto; min-width:min(100%, 280px);
  font-size:14.5px; line-height:1.55; white-space:normal;
  background:var(--surface);
  border:1px solid var(--line-2); border-radius:6px;
}
table.qt th,
table.qt td{
  border:1px solid var(--line-2);
  padding:8px 12px; text-align:left; vertical-align:top;
  word-break:keep-all; overflow-wrap:normal;
}
table.qt th{
  background:var(--surface-2); font-weight:700; color:var(--ink);
  white-space:nowrap;
}
/* 문제 글이 굵은 글씨라도 표 안은 보통 굵기로 — 머리글만 도드라지게 */
table.qt td{ font-weight:400; color:var(--ink); }
table.qt tbody tr:nth-child(even) td{ background:var(--tint); }

/* 시험 보는 화면은 글씨가 크므로 표도 조금 키웁니다 */
.q-card .qt-wrap{ margin:14px 0; }
.q-card table.qt{ font-size:15.5px; }
.q-card table.qt th,
.q-card table.qt td{ padding:9px 14px; }

@media (max-width:600px){
  table.qt{ font-size:14px; }
  table.qt th, table.qt td{ padding:7px 9px; }
  .q-card table.qt{ font-size:14px; }
}

/* ============================================================
   ★ 낼 낱말 고르기 (시험 내기 화면)
   ============================================================ */
.tn-pick-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:9px;
}
.tn-pick-bar .hint{ flex:1 1 200px; min-width:0; }

.tn-picker{ margin-top:6px; }
.tn-pick-tools{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:9px;
}
.tn-find{
  flex:1 1 200px; min-width:0; padding:8px 11px; font-size:14px;
  border:1px solid var(--line-2); border-radius:7px; font-family:inherit;
}
.tn-pick-n{ font-size:13.5px; font-weight:700; color:var(--brand); margin-left:auto; }

.tn-words{
  max-height:360px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); padding:5px;
}
.tn-word{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:6px; cursor:pointer; margin:0;
}
.tn-word:hover{ background:var(--surface-2); }
.tn-word input{ width:17px; height:17px; flex:none; accent-color:var(--brand); }
.tn-word .no{
  flex:none; width:32px; text-align:right;
  font-family:var(--font-mono); font-size:13px; color:var(--ink-faint);
}
.tn-word .en{ flex:0 0 auto; font-weight:700; font-size:14.5px; }
.tn-word .ko{
  flex:1 1 auto; min-width:0; font-size:14px; color:var(--ink-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tn-word.is-hidden{ display:none; }
.tn-word.is-on{ background:var(--tint); }
/* 품사 — 줄 오른쪽 끝에 조용히 붙습니다 */
.tn-word .ps{
  flex:none; font-size:12.5px; color:var(--ink-faint);
  padding:1px 7px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface-2); white-space:nowrap;
}

/* ★ 품사로 거르기 */
.tn-pos{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding:9px 11px; margin-bottom:9px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface-2);
}
.tn-pos-t{
  font-size:13.5px; font-weight:700; color:var(--ink-soft);
  margin-right:2px; flex:none;
}
.tn-pos-one{
  display:inline-flex; align-items:center; gap:6px; margin:0;
  padding:5px 10px; border:1px solid var(--line-2); border-radius:999px;
  background:var(--surface); cursor:pointer; font-size:13.5px;
  line-height:1.2; white-space:nowrap;
}
.tn-pos-one:hover{ border-color:var(--brand); }
.tn-pos-one input{ width:15px; height:15px; flex:none; accent-color:var(--brand); margin:0; }
.tn-pos-one b{ font-size:12.5px; color:var(--ink-faint); font-weight:700; }
/* 켜진 것은 색으로 알려드립니다.
   :has() 를 모르는 옛 브라우저에서도 되도록 스크립트가 is-on 을 붙여줍니다. */
.tn-pos-one.is-on{
  background:var(--tint); border-color:var(--brand); color:var(--brand);
}
.tn-pos-one.is-on b{ color:var(--brand); }
.tn-pos [data-pos]{ margin-left:auto; }

@media (max-width:600px){
  .tn-words{ max-height:300px; }
  .tn-word{ flex-wrap:wrap; gap:6px 10px; padding:9px 10px; }
  .tn-word .ko{ flex:1 1 100%; padding-left:42px; white-space:normal; }
  .tn-word .ps{ margin-left:42px; }
  .tn-pick-n{ margin-left:0; flex:1 1 100%; }
  .tn-pos{ gap:6px; padding:8px 9px; }
  .tn-pos-t{ flex:1 1 100%; margin:0 0 2px; }
  .tn-pos [data-pos]{ margin-left:0; }
}