:root {
  --bg: #f4f6fb;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --accent: #1d4ed8;
  --accent-soft: #e0e7ff;
  --good: #047857;
  --good-soft: #d1fae5;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --stage-bg: #0b1220;
  --stage-text: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --card: #151d2e;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --line: #243049;
    --accent: #7aa2ff;
    --accent-soft: #1e2a4a;
    --good: #6ee7b7;
    --good-soft: #0f3a2e;
    --warn: #fcd34d;
    --warn-soft: #3a2f0f;
    --stage-bg: #000000;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }

.top {
  position: sticky; top: 0; z-index: 5;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  display: flex; align-items: center; gap: 10px;
}
.brand { font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.badge { background: var(--accent); color: #fff; border-radius: 6px; padding: 1px 7px; font-size: 13px; letter-spacing: .5px; }
/* ☰ 와 지금 보고 있는 자리 — 탭 줄을 늘어놓지 않는다 (2026-10-07) */
.menu-btn { flex: none; font-size: 22px; line-height: 1; padding: 4px 8px; border: 0;
  background: none; color: var(--text); cursor: pointer; border-radius: 10px; }
.menu-btn:active { background: var(--accent-soft); }
.now-tab { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--accent); }

/* 옆에서 미끄러져 나오는 메뉴 */
.drawer { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.drawer-bg { position: absolute; inset: 0; background: rgba(17, 24, 39, .4); opacity: 0;
  transition: opacity .22s ease; }
.drawer-menu {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(74vw, 280px);
  background: var(--card); box-shadow: 2px 0 18px rgba(0, 0, 0, .18);
  display: flex; flex-direction: column; gap: 2px;
  padding: calc(env(safe-area-inset-top) + 16px) 10px calc(env(safe-area-inset-bottom) + 16px);
  transform: translateX(-100%); transition: transform .24s ease;
}
.drawer.open { pointer-events: auto; }
.drawer.open .drawer-bg { opacity: 1; }
.drawer.open .drawer-menu { transform: none; }
.tabs button {
  border: 0; background: none; text-align: left; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 600; color: var(--text);
  padding: 14px 14px; border-radius: 12px;
}
.tabs button[aria-selected="true"] { color: var(--accent); background: var(--accent-soft); }
.tabs button:active { background: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) {
  .drawer-bg, .drawer-menu { transition: none; }
}

main { max-width: 640px; margin: 0 auto; padding: 14px 16px calc(env(safe-area-inset-bottom) + 40px); }

.dir { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 12px; font-weight: 700; }
.dir span { min-width: 84px; text-align: center; }
.langs { display: flex; justify-content: center; margin: -4px 0 12px; }
.lang-pick { border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 999px; padding: 6px 16px; font-size: 14px; }
.dir span { cursor: pointer; }
/* ── 첫 화면 (2026-10-27) ──────────────────────────────────────────────────
   「들어오자마자 화면 전체가 헷갈려」라는 되먹임을 받아 손봤다.
   한 줄로 **무엇을 하는 앱인지** 먼저 말한다 — 그 앞에 아무 설명이 없었다. */
.one-line { text-align: center; color: var(--muted); font-size: 13px; margin: 2px 0 10px; }
.one-line b { color: var(--text); font-weight: 600; }
/* 언어 이름이 **누를 수 있다**는 것을 보인다. 전에는 눌러도 되는 줄 모르셔서
   아래에 「🌐 English ▾」를 따로 두었는데, 그러면 English 가 두 번 보였다. */
/* ▾ 는 **CSS 로** 붙인다. setDir() 이 dir-to 의 textContent 를 통째로 바꾸므로,
   자식 요소로 두면 언어를 고를 때마다 ▾ 가 사라진다. */
.pickable::after { content: '▾'; font-size: 11px; opacity: .55; margin-left: 3px;
  vertical-align: 1px; font-weight: 400; }
.ls-note { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 10px 0 4px; }
.ls-group h4 { margin: 18px 0 8px; font-size: 14px; color: var(--muted); }
.ls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ls-lang { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 12px; padding: 10px 12px; }
.ls-lang .n { font-size: 16px; font-weight: 700; }
.ls-lang .k { font-size: 12px; color: var(--muted); }
.ls-lang[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.icon-btn {
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  width: 42px; height: 42px; font-size: 20px;
}

.input-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
textarea {
  width: 100%; border: 0; outline: none; resize: none; background: transparent;
  color: var(--text); font: inherit; font-size: 19px;
  /* 말로 길게 넣으면 칸이 끝없이 늘어나 번역 카드를 화면 밖으로 밀어냈다 —
     일정 높이를 넘으면 칸 안에서 굴린다 (2026-10-06) */
  max-height: 34vh; overflow-y: auto;
}
.input-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.mic {
  width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: var(--accent); color: #fff; font-size: 24px;
  box-shadow: 0 4px 12px rgb(29 78 216 / .3);
}
.mic.on { animation: pulse 1s infinite; background: #dc2626; }
.cam {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); font-size: 21px;
}
/* 카메라 번역 — 화면 가득 카메라, 그 위에 번역 상자 */
.camlive { position: fixed; inset: 0; z-index: 60; background: #000; }
.camlive video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-boxes { position: absolute; inset: 0; transition: opacity .2s; }
.cl-boxes.moving { opacity: 0; }
.cl-box {
  position: absolute; background: rgb(255 255 255 / .93); color: #111; border-radius: 5px;
  padding: 1px 5px; line-height: 1.15; font-weight: 600; box-shadow: 0 1px 4px rgb(0 0 0 / .35);
  overflow-wrap: anywhere; cursor: pointer;
}
.cl-box.book { outline: 2px solid #1d4ed8; }
.cl-top, .cl-bottom {
  position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; color: #fff;
}
.cl-top { top: 0; padding-top: max(12px, env(safe-area-inset-top)); background: linear-gradient(rgb(0 0 0 / .55), transparent); }
.cl-bottom { bottom: 0; justify-content: space-between; padding-bottom: max(18px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgb(0 0 0 / .55)); }
.cl-status { font-size: 14px; flex: 1; text-shadow: 0 1px 2px #000; }
.cl-btn { border: 0; border-radius: 20px; padding: 8px 14px; background: rgb(255 255 255 / .2); color: #fff; font: inherit; font-size: 14px; }
.cl-shutter { width: 72px; height: 72px; border-radius: 50%; border: 5px solid #fff; background: #fff;
  box-shadow: inset 0 0 0 4px #000; flex: none; }
.cl-shutter:active { transform: scale(.94); }
.cl-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cl-btn[aria-pressed="true"] { background: #1d4ed8; }
.cl-strong { background: #fff; color: #111; font-weight: 700; }

/* 사진 번역 */
.photo { margin-top: 14px; background: var(--card); border-radius: 16px; padding: 14px; box-shadow: 0 1px 3px rgb(0 0 0 / .06); }
.photo-head { display: flex; align-items: center; gap: 12px; }
.photo-head img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: var(--line); flex: none; }
.photo-head > div { flex: 1; min-width: 0; }
.photo-title { font-weight: 700; }
.photo-status { color: var(--muted); font-size: 13px; }
.photo-list { margin: 12px 0 4px; padding-left: 22px; }
.photo-list li { margin-bottom: 12px; line-height: 1.5; cursor: pointer; }
.photo-list .s { color: var(--muted); font-size: 14px; }
.photo-list .t { font-weight: 600; font-size: 17px; }
.photo-list .book { font-size: 11px; color: var(--accent); margin-left: 6px; font-weight: 600; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.listening { color: #dc2626; font-size: 14px; }
.ghost { border: 0; background: none; color: var(--muted); padding: 6px 8px; }

.result { margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.result-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.match { border-radius: 999px; padding: 2px 10px; font-weight: 700; }
.match.exact { background: var(--good-soft); color: var(--good); }
.src { color: var(--muted); text-align: right; }
.out { font-size: 24px; font-weight: 700; margin: 10px 0 4px; word-break: keep-all; }
.orig { color: var(--muted); margin: 0 0 10px; }
.alt { margin: 0 0 6px; font-size: 15px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  border: 1px solid var(--line); background: var(--bg); border-radius: 999px;
  /* 손가락으로 누르는 자리는 **44px 이상**이어야 한다(애플·구글이 함께 권하는 값).
     8px 패딩으로는 35px 밖에 안 됐다. 다만 **세로만 키운다** — 가로까지 늘렸더니
     첫 화면 조작 줄이 한 줄에서 세 줄로 쪼개져 「⚙ 설정」이 아래로 밀려났다. */
  padding: 8px 14px; font-size: 15px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pill.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.vocab { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; font-size: 14px; color: var(--muted); }
.vocab b { color: var(--text); font-weight: 600; }

.cont-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 10px 4px 0; }
.toggle { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; cursor: pointer; min-width: 0; }
.toggle input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.toggle small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.tag { font-size: 11px; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.tag.book { background: var(--good-soft); color: var(--good); }
.tag.machine, .tag.pending { background: var(--accent-soft); color: var(--accent); }
.tag.none { background: var(--warn-soft); color: var(--warn); }

/* 연속 듣기 전체 화면 */
body.live-open { overflow: hidden; }
.liveview {
  position: fixed; inset: 0; z-index: 15; background: var(--bg);
  display: flex; flex-direction: column; height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 10px) 16px calc(env(safe-area-inset-bottom) + 10px);
}
.lv-top { display: flex; align-items: center; gap: 10px; }
.lv-dot { width: 10px; height: 10px; border-radius: 50%; background: #dc2626; flex: none; animation: blink 1.2s infinite; }
.liveview.muted .lv-dot { background: var(--muted); animation: none; }
@keyframes blink { 50% { opacity: .3; } }
/* 머리줄은 **두 줄까지**다 — 이름이 길어 세 줄로 접히면 통역문 자리를 먹는다 (2026-10-19).
   이름 줄과 상태 줄 모두 넘치면 … 로 줄인다. */
.lv-title { flex: 1; min-width: 0; font-size: 15px; line-height: 1.3; }
.lv-title > b { white-space: nowrap; }
.lv-title #lv-dir { display: none; }   /* 말 방향은 상태 줄 앞머리로 옮겼다 (2026-10-19) */
.lv-status { display: block; color: var(--muted); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-stop { border: 0; border-radius: 999px; background: #dc2626; color: #fff; font-weight: 700; padding: 10px 16px; flex: none; }
/* 설정 단추 — 멈춤 왼쪽에 작게. 누르면 준비 창이 덮어 열린다(화면에 설정을 깔지 않는다) */
.lv-gear { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--muted); font-size: 19px; cursor: pointer; margin-right: 6px; }
/* 통역 준비 창 안의 설정 — 한 줄에 하나씩, 손가락으로 누르기 좋게 */
/* 「🎧 이어 듣기」 — 읽어주기 **바로 옆에 붙인다** (2026-10-07 사용자).
   큰 단추 → 읽어주기 밑 → 오른쪽 끝 → 바로 옆. 설명은 셋을 모아 아래 한 줄로 내렸다. */
/* 셋이 한 줄에 들어가야 한다 — 글자를 크게 쓰는 기기에서도 버티도록 간격과 여백을 좁힌다 */
.cont-row { justify-content: flex-start; gap: 7px; align-items: center; flex-wrap: wrap; }
.cont-row .toggle { flex: none; align-items: center; gap: 7px; }
.cont-row .record-link { padding: 5px 10px; }
.record-link.strong { background: var(--accent); color: #fff; border-color: transparent; font-weight: 600; }
.record-link.strong:active { filter: brightness(.94); }
/* 「📚 쓸 말」 — 첫 화면에서 용어로 가는 길. 비어 있으면 눈에 띄게 한다 (2026-10-09) */
.terms-link { display: inline-flex; align-items: center; gap: 5px; margin: 10px 0 0;
  font: inherit; font-size: 14px; cursor: pointer; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: inherit; }
.terms-link b { color: var(--accent); font-weight: 700; }
.terms-link b.none { color: var(--warn); }
.terms-link b.none::before { content: '⚠ '; }
.terms-link:active { background: var(--accent-soft); }
.cont-note { margin: 6px 4px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
#rs-slot .rs-go { margin-bottom: 10px; }
#rs-slot #rs-start { width: 100%; justify-content: center; font-size: 17px; padding: 13px; }
.rs-opts { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 18px; font-size: 16px; }
.rs-opts > label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.rs-opts input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); }
.rs-opts select { font: inherit; font-size: 15px; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card); color: var(--text); margin-left: auto; max-width: 62%; }
.rs-row { display: flex; align-items: center; gap: 10px; }
.lv-mic select { max-width: 220px; font: inherit; font-size: 14px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); }
/* 오늘 쓸 말 */
.lv-words { font: inherit; font-size: 14px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--text); }
.lv-words b { color: var(--accent); }
.ws-text { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.7;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); }
.ws-count { margin: 8px 0 14px; font-size: 13px; color: var(--muted); }
.ws-packs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.ws-packs-label { font-size: 13px; color: var(--muted); }
.ws-packs button { font: inherit; font-size: 14px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--text); }
.ws-packs button:hover, .ws-packs button:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
/* 내 용어집 (2026-10-07 ②) — 고객사·분야마다 묶음 하나. 켠 묶음의 말을 모아 Azure 에 일러 준다 */
.ws-sum { margin: 0 0 10px; font-size: 14px; color: var(--accent); font-weight: 600; }
.ws-list { list-style: none; margin: 0 0 16px; padding: 0; }
.ws-list li { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.ws-list li:first-child { border-top: 0; }
.ws-list input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.ws-row { flex: 1; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  font: inherit; color: inherit; background: none; border: 0; padding: 13px 2px; }
.ws-row b { flex: 1; font-size: 16px; font-weight: 600; word-break: keep-all; }
.ws-row-n { font-size: 13px; color: var(--muted); flex: none; }
.ws-row:active { background: var(--accent-soft); border-radius: 8px; }
.ws-empty { display: block; padding: 16px 2px; color: var(--muted); font-size: 14px; line-height: 1.6; }
/* 단추 넷이 한 줄에 들어가야 한다 — 내보내기가 늘면서 「묶음 목록」이 한 글자씩
   세로로 쪼개졌다 (2026-10-09). 글자는 줄바꿈하지 않고, 모자라면 줄을 내린다. */
.ws-one-top { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.ws-one-top .ghost { white-space: nowrap; padding: 6px 9px; }
.ws-one-top .ghost:first-child { margin-right: auto; }
.ghost.danger { color: var(--warn); }
/* 🔊 미리 들어 두기 (2026-10-07 ③) — 회의 전에 이 묶음의 말을 죽 들어 둔다 */
.ws-listen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
.ws-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ws-opt select { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: inherit; }
.ws-opt input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
/* 지금 읽고 있는 말 — 줄바꿈을 살려 교재 예문을 아래에 붙인다 */
.ws-now { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft);
  font-size: 17px; font-weight: 600; line-height: 1.5; white-space: pre-line; word-break: keep-all; }
/* 📷 자료에서 뽑기 (2026-10-07) — 손으로 쳐 넣던 일을 없앤다 */
.ws-from { margin: 0 0 14px; }
.ws-from small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ws-pick { border: 1px solid var(--accent); border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; background: var(--card); }
.ws-pick-top { display: flex; align-items: center; gap: 8px; }
.ws-pick-top b { flex: 1; }
.ws-pick-note { margin: 6px 0 10px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.ws-pick-list { list-style: none; margin: 0 0 12px; padding: 0; max-height: 46vh; overflow-y: auto; }
.ws-pick-list li { border-top: 1px solid var(--line); }
.ws-pick-list li:first-child { border-top: 0; }
.ws-pick-list label { display: flex; align-items: center; gap: 9px; padding: 9px 2px; cursor: pointer; }
.ws-pick-list input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.ws-pick-list b { font-weight: 600; word-break: break-all; }
.ws-pick-n { font-size: 12px; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 7px; flex: none; }
.ws-pick-book { font-size: 12px; color: var(--muted); flex: none; }
/* 지금 말하는 쪽 — 회의록의 「말한 이」가 된다 */
.lv-who { display: flex; align-items: center; gap: 6px; font-size: 14px; flex-basis: 100%; }
.lv-who-label { color: var(--muted); margin-right: 2px; }
.lv-who button {
  font: inherit; font-size: 14px; padding: 5px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
}
.lv-who button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); font-weight: 700; }
/* 목소리로 가릴 때 — 누를 것이 없으니 지금 말하는 이를 글로만 */
.lv-who-now { padding: 5px 14px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-soft); font-weight: 700; }
/* 머리줄 아래는 **두 칸이 자리를 못 박고 있다** (2026-10-07).
   위 = 원문, 아래 = 통역문. 글이 길어져도 서로 밀지 않고 **자기 칸 안에서만** 구른다.
   사용자: 「위면 원문 밑면은 통역문이어야 하는데 자꾸 왔다 갔다 함」 */
.lv-now { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
/* 원문 칸 — 참고하는 자리라 작고 낮게. 높이를 **고정**해 아래 칸이 들썩이지 않는다
   (원문 길이에 따라 늘었다 줄면 통역문 자리가 움직여 눈 둘 곳이 바뀐다).
   2026-10-12: 23%(큰 화면에서 172px)는 너무 컸다 — 통역문을 한 화면에 더 담으려고
   120px 로 줄였다. 원문 두 줄 반이 들어가고 통역문은 세 줄이 늘어난다. */
.lv-srcbox {
  flex: none; height: 120px; min-height: 62px; overflow-y: auto;
  background: var(--accent-soft); border-radius: 14px; padding: 10px 14px;
}
/* 통역문 칸 — 읽는 자리라 남은 자리를 다 쓴다 */
.lv-outbox {
  flex: 1; min-height: 0; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px;
}
.lv-src { margin: 0; color: var(--muted); font-size: 16px; word-break: keep-all; }
.lv-out { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.28; word-break: keep-all; }
.lv-out.preview { color: var(--muted); font-weight: 600; }
/* 원문 칸이 아래로 굴러도 「듣는 중 / 기계번역」 표는 칸 꼭대기에 붙어 있는다 */
.lv-srcbox .tag { display: inline-block; margin-bottom: 5px; position: sticky; top: 0; z-index: 1; }
/* 끝난 통역문 — 번역만 한 문장씩. 지금 통역문과는 옅은 줄 하나로만 나눈다 */
.lv-flow-out:not(:empty) { margin-bottom: 12px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.lv-flow-out .lv-row-out { margin: 0 0 10px; cursor: pointer; border-radius: 6px; }
.lv-flow-out .lv-row-out:last-child { margin-bottom: 0; }
.lv-flow-out .lv-row-out:active { background: var(--accent-soft); }
/* 「원문도 보기」를 꺼도 **원문 칸은 없애지 않는다** — 「듣는 중」이 거기 있어서,
   없애면 지금 듣고 있는지 알 길이 사라진다. 대신 칸을 낮추고 글을 작게 한다. */
.liveview:not(.show-src) .lv-srcbox { height: 46px; min-height: 46px; }
.record-link { flex: none; border: 1px solid var(--line); background: var(--card); color: var(--accent); border-radius: 999px; padding: 5px 12px; font-size: 13px; white-space: nowrap; }
/* 서버 연결 안내 — 눌러서 다시 시도할 수 있다 */
.srv { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  white-space: pre-line; cursor: pointer; background: var(--line); color: var(--muted); }
.srv.bad { background: #fff4f4; color: #9b2c2c; border: 1px solid #f3c9c9; }
@media (prefers-color-scheme: dark) { .srv.bad { background: #3a2020; color: #ffb4b4; border-color: #5a2e2e; } }

/* 통역 기록 전체 보기 */
.record {
  position: fixed; inset: 0; z-index: 18; background: var(--bg); overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 30px);
}
.rec-top { display: flex; justify-content: space-between; align-items: center; font-size: 17px; gap: 8px; }
/* 머리줄 단추 — 내보내기·⋯·닫기 셋만. 좁은 화면에서 줄바꿈 없이 들어가야 한다 (2026-10-19) */
.rec-top-btns { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.rec-top-btns .pill { padding: 7px 11px; font-size: 13px; white-space: nowrap; }
.rec-top > div:first-child { min-width: 0; }
.rec-top #rec-meta { display: block; font-size: 12px; margin-top: 2px; }
.rec-meta { color: var(--muted); font-size: 13px; }
.rec-bar { position: sticky; top: -12px; background: var(--bg); padding: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; z-index: 1; }
.rec-modes { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.rec-modes button { border: 0; background: var(--card); padding: 7px 12px; font-size: 14px; }
.rec-modes button[aria-pressed="true"] { background: var(--accent); color: #fff; }
/* 2026-10-12: flex 에 wrap 이 없어 좁은 화면에서 여섯 단추가 쥐어짜였다 —
   「복사」가 폭 39px·높이 97px 로 글자가 세로로 쌓였다. 줄바꿈을 허용하고
   단추 안에서는 줄을 바꾸지 않게 한다(글자가 쪼개지느니 줄이 하나 느는 편이 낫다). */
.rec-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.rec-actions .pill { white-space: nowrap; }
.rec-actions .pill { padding: 6px 12px; font-size: 14px; }
.rec-list { margin: 4px 0 0; padding-left: 26px; max-width: 720px; }
.rec-list li { margin-bottom: 14px; line-height: 1.55; }
.rec-list .s { color: var(--muted); }
.rec-list .t { font-weight: 600; font-size: 17px; }
.record.mode-out .rec-list .s, .record.mode-src .rec-list .t { display: none; }
/* 받아쓰기 줄은 **어느 보기에서도 들은 말을 보여 준다** (2026-10-19).
   그 줄에는 통역 칸이 없어서, 「번역만」으로 보면 줄이 통째로 비어 보였다. */
.record.mode-out .rec-list li.note .s { display: block; }
.rec-list li.note .s { color: var(--text); font-weight: 600; font-size: 17px; }
/* 받아쓰기 줄에는 통역 칸이 없다 — 비어 있는 칸이 「…」로 보이던 것을 아예 감춘다 */
.rec-list li.note .t { display: none; }
.record.mode-src .rec-list .s { color: var(--text); font-size: 17px; }
.rec-list .session { list-style: none; margin: 18px 0 8px -26px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); padding-top: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sess-info { min-width: 0; }
/* 회의 제목 — 눌러서 적는다 */
.sess-title { font-size: 15px; font-weight: 700; color: var(--text); border-radius: 6px; padding: 2px 4px; margin-left: -4px; }
.sess-title:hover { background: var(--accent-soft); }
.sess-title:focus { outline: 2px solid var(--accent); background: var(--card); }
.sess-when { margin-top: 2px; }
/* 줄머리 — 시각 · 말한 이 · 고침 · 숫자 확인 */
.rec-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.rec-at { font-variant-numeric: tabular-nums; }
.rec-who { padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); }
.rec-who.who-me { background: var(--accent-soft); color: var(--text); }
.rec-who:focus { outline: 2px solid var(--accent); background: var(--card); }
.rec-edited { padding: 1px 6px; border-radius: 999px; background: var(--line); }
.rec-warn { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.rec-warn .warn { padding: 1px 7px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-weight: 700; }
/* 부정이 빠지는 것이 가장 큰 사고라 더 눈에 띄게 */
.rec-warn .w-neg, .rec-warn .w-short { background: #fde2e2; color: #9b1c1c; }
@media (prefers-color-scheme: dark) { .rec-warn .w-neg, .rec-warn .w-short { background: #3a1f1f; color: #ffb4b4; } }
/* 교재의 검수된 모범 번역 */
.rec-book { margin-top: 4px; font-size: 13px; color: var(--muted); border-left: 3px solid var(--line); padding-left: 8px; }
.rec-list li.flagged { border-left: 3px solid var(--warn); margin-left: -10px; padding-left: 7px; }
/* 다시 보기 줄 */
.rec-review { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 2px; }
.rec-review .pill.flag[aria-pressed="true"] { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); font-weight: 700; }
.rec-review .pill.none { opacity: .5; }
.rec-weak { font-size: 13px; color: var(--muted); }
.rec-note { margin: 2px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* 연습하기 — 듣고 → 통역해 말하고 → 견준다 */
/* 오늘 회의 분야 고르기 — 연속 듣기를 켤 때 한 번 묻는다 */
.fs-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.fs-list button {
  font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
}
.fs-list button:hover, .fs-list button:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.fs-bar { display: flex; gap: 8px; flex-wrap: wrap; }
/* 약점 칸 — 최근 30일에 자주 빠뜨린 갈래 */
.dr-weak { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--warn);
  border-radius: 12px; padding: 12px 14px; margin: 4px 0 14px; }
.dr-weak-head { font-size: 15px; }
.dr-weak-head span { color: var(--warn); font-weight: 700; }
.dr-weak-why { margin: 4px 0 10px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.dr-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.pill.run { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.dn-stage { max-width: 720px; text-align: center; padding: 8px 0 4px; }
/* 하는 차례를 화면에 적어 둔다 — 처음 여는 사람이 무엇을 할지 알게 */
.dn-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px;
  list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; color: var(--muted); }
.dn-steps b { color: var(--accent); margin-right: 3px; }
.dn-hint { color: var(--muted); font-size: 14px; margin: 6px 0 12px; line-height: 1.5; }
.dn-miclabel { margin: -10px 0 0; font-size: 14px; color: var(--muted); min-height: 20px; }
.dn-src { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dn-srctext { margin: 12px auto 0; max-width: 640px; font-size: 17px; line-height: 1.6; color: var(--muted); word-break: keep-all; }
/* 마이크 — 화면 한가운데, 손가락으로 누르기 좋게 */
.dn-mic {
  display: block; margin: 22px auto; width: 92px; height: 92px; border-radius: 50%;
  border: 0; background: var(--accent); color: #fff; font-size: 38px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.dn-mic.on { background: #dc2626; animation: dnPulse 1.1s infinite; }
@keyframes dnPulse { 50% { transform: scale(1.07); } }
.dn-label { margin: 14px 0 2px; font-size: 12px; color: var(--muted); }
/* 되듣기 — 「내 통역」 이름표 옆에 붙인다. 글과 소리는 같은 것을 가리키므로
   한자리에 두어야 한다(아래에 따로 두면 모범과 섞여 무엇을 듣는지 흐려진다). */
.dn-replay {
  margin-left: 8px; padding: 2px 9px; height: 22px;
  font-size: 11px; line-height: 1; vertical-align: 1px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--card); color: var(--text); cursor: pointer;
}
.dn-replay:hover { background: var(--line); }
/* 듣는 동안 — 어두운 바탕에서 --accent 가 연한 파랑이라 흰 글씨는 안 읽힌다.
   두 결 모두에서 서는 짝(accent-soft 바탕 + accent 글씨)으로 둔다. */
.dn-replay.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.dn-mine { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.45; word-break: keep-all; }
.dn-model { margin: 0; font-size: 17px; line-height: 1.5; color: var(--good); word-break: keep-all; }
/* 회의 때 빠뜨린 통역문은 본받을 것이 아니다 — 초록으로 칠하지 않는다 */
.dn-model.flawed { color: var(--warn); text-decoration: line-through; text-decoration-thickness: 1px; }
#dn-marks { justify-content: center; margin-top: 8px; }
.dn-bar { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 16px 0 4px; }
.dn-bar .pill.next { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.dn-done { text-align: center; margin-top: 18px; }
.dn-done p { font-size: 17px; line-height: 1.6; word-break: keep-all; }
.dn-done .pill { margin: 4px; }
.dn-tries { padding: 1px 7px; border-radius: 999px; background: var(--line); }
.rec-list .s:focus, .rec-list .t:focus { outline: 2px solid var(--accent); border-radius: 6px; background: var(--card); }
/* 지우기 단추 — 글을 가리지 않게 흐리게 두되, 손가락으로 누를 수 있게 44px는 확보한다 */
.rec-del { flex: none; display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 10px; background: none; border: 0; border-radius: 8px;
  color: var(--muted); font-size: 12px; cursor: pointer; }
.rec-del:hover, .rec-del:focus-visible { color: var(--text); background: var(--line); }
.rec-list .session .rec-del { margin: -10px -8px -10px 0; } /* 날짜 줄이 단추 높이만큼 벌어지지 않게 */
.rec-row { display: flex; align-items: flex-start; gap: 4px; }
.rec-text { flex: 1; min-width: 0; }
.rec-del.one { min-width: 44px; font-size: 16px; line-height: 1; opacity: .45; margin: -10px -8px -10px 0; }
.rec-del.one:hover, .rec-del.one:focus-visible { opacity: 1; }

/* 서신 예문 */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chips button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.chips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.lt-count { color: var(--muted); font-size: 13px; margin: 4px 2px 8px; }
.lt-list .meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.lt-list .topic { background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 1px 8px; font-weight: 600; }
.lt-list .k { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lt-list .e { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.lt-body { display: grid; gap: 16px; max-width: 980px; margin-top: 6px; }
@media (min-width: 760px) { .lt-body.both { grid-template-columns: 1fr 1fr; } }
.lt-body h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.lt-body p { margin: 0; font-size: 17px; line-height: 1.75; word-break: keep-all; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.lt-body .lt-tr p { font-weight: 500; }
.record.mode-src .lt-tr, .record.mode-tr .lt-src { display: none; }
.lt-nav { display: flex; justify-content: space-between; max-width: 980px; margin-top: 16px; }

.match.machine { background: var(--accent-soft); color: var(--accent); }
.result.mt { border-style: dashed; }
.mt-note { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.mt-status { color: var(--muted); font-size: 14px; margin: 12px 4px 0; }
.nomatch { margin-top: 14px; background: var(--warn-soft); color: var(--warn); border-radius: 12px; padding: 10px 14px; font-size: 14px; }

.sub { font-size: 14px; color: var(--muted); margin: 22px 0 8px; }
/* 「한 문장 번역」 — 회의 통역과 쓰임이 다르다는 것을 줄 하나로 갈라 준다 */
.one-head { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 20px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 8px; cursor: pointer;
}
.list li .k { font-weight: 600; }
.list li .e { color: var(--muted); font-size: 14px; }
.list li:active { background: var(--accent-soft); }

.filter {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font: inherit; margin-bottom: 12px;
}
.cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cat {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; text-align: left;
}
.cat .ico { font-size: 26px; }
.cat .name { font-weight: 700; display: block; margin-top: 4px; }
.cat .cnt { color: var(--muted); font-size: 13px; }
.cat-group { grid-column: 1 / -1; margin: 14px 2px 0; font-size: 15px; color: var(--muted); }
.cat-group:first-child { margin-top: 0; }
#cat-title { font-size: 20px; margin: 6px 0 12px; }
.empty { color: var(--muted); text-align: center; margin-top: 40px; }

.stage {
  position: fixed; inset: 0; z-index: 20; background: var(--stage-bg); color: var(--stage-text);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 40px 24px;
}
.stage p { font-size: clamp(28px, 8vw, 56px); font-weight: 700; text-align: center; word-break: keep-all; margin: 0 0 30px; }
.stage-close { position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 16px; background: none; border: 0; color: #fff; font-size: 28px; }
.pill.big { font-size: 28px; padding: 12px 26px; background: #1f2937; color: #fff; border-color: #374151; }

.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 24px); transform: translateX(-50%);
  background: #111827; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; z-index: 30;
}
[hidden] { display: none !important; }
/* 앱 판 번호 — 첫 화면 맨 아래에 작게 */
.ver { margin: 22px 2px 0; color: var(--muted); font-size: 12px; text-align: center; }
/* 끝난 통역문 — 한 문장씩 줄을 나눠서 번역만 (2026-10-07: 원문 줄은 아주 뺐다) */
.lv-row-out { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; word-break: keep-all; }
.lv-row-out.pending { color: var(--muted); font-weight: 500; }
.lv-row-out.none { color: var(--warn); }
/* 「원문도 보기」는 이제 **지금 듣는 말**에만 걸린다 — 꺼도 작게 남긴다 */
.liveview:not(.show-src) .lv-src { font-size: 13px; opacity: .85; }
.rec-scope { margin: 8px 0 2px; }
/* 듣는 중 글자 크기 — 보통 / 크게 / 아주 크게 / 작게 */
.lv-size select { font: inherit; font-size: 14px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); }
/* 2026-10-12: 한 단계씩 내렸다 (28→24 …) — 통역문을 한 화면에 더 담으시려고.
   고른 단계는 그대로 두므로 「보통」을 쓰시던 분은 손대지 않아도 작아진다. */
.liveview { --lv-now-size: 24px; --lv-past-size: 17px; --lv-src-size: 14px; }
.liveview[data-size="l"] { --lv-now-size: 30px; --lv-past-size: 21px; --lv-src-size: 15px; }
.liveview[data-size="xl"] { --lv-now-size: 36px; --lv-past-size: 25px; --lv-src-size: 16px; }
.liveview[data-size="s"] { --lv-now-size: 20px; --lv-past-size: 15px; --lv-src-size: 13px; }
.lv-out { font-size: var(--lv-now-size); line-height: 1.4; }
.lv-src { font-size: var(--lv-src-size); }
.lv-row-out { font-size: var(--lv-past-size); line-height: 1.65; }

/* 단어 듣기 — 낱말·발음 기호·뜻을 한 줄에, 이어폰으로 죽 듣는다 */
.w-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0}
.w-opt{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted)}
.w-opt select{font-size:13px;padding:3px 6px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:inherit}
.w-now{margin:0 0 8px;font-size:13px;color:var(--accent);font-weight:600}
.w-list{list-style:none;margin:0;padding:0}
.w-row{padding:11px 12px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:10px}
.w-row:hover{background:var(--accent-soft)}
.w-row.on{background:var(--accent-soft);outline:2px solid var(--accent)}
.w-en{font-size:18px;font-weight:600}
.w-ipa{font-size:15px;color:var(--accent);margin-top:2px;letter-spacing:.3px}
.w-ko{font-size:14px;color:var(--muted);margin-top:3px}

/* 마주 보고 대화 — 위아래로 갈라 두 사람이 마주 본다 (위쪽은 상대 쪽이라 뒤집는다) */
.talk{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column}
.tk-half{flex:1;display:flex;flex-direction:column;min-height:0;padding:10px 14px}
.tk-top{transform:rotate(180deg)}
.tk-log{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.tk-line{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 13px}
.tk-line.mine{background:var(--accent-soft);border-color:transparent}
.tk-out{font-size:21px;line-height:1.5;font-weight:600}
.tk-src{font-size:13px;color:var(--muted);margin-top:5px}
.tk-empty{color:var(--muted);font-size:14px;text-align:center;padding:20px 0}
.tk-bar{display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 0 2px}
.tk-lang{font-size:14px;color:var(--muted);font-weight:600}
/* 상대 언어를 눌러서 바꾼다. 대화 화면(z-index 60)이 언어 고르기 창(18)을 덮고 있어
   그 창만 위로 올린다 — 안 그러면 눌러도 아무 일이 없는 것처럼 보인다 (2026-10-09) */
.tk-lang-pick{font:inherit;font-size:14px;font-weight:600;color:var(--accent);cursor:pointer;
  border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 12px}
.tk-lang-pick:active{background:var(--accent-soft)}
#langsheet{z-index:70}
.tk-mic{width:62px;height:62px;border-radius:50%;border:0;background:var(--accent);color:#fff;font-size:26px;cursor:pointer}
.tk-mic:disabled{opacity:.35}
.tk-mic.on{background:var(--warn);animation:tkPulse 1.1s infinite}
@keyframes tkPulse{50%{transform:scale(1.08)}}
.tk-mid{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
/* 가운데 줄은 좁다 — 375px 에 다섯이 들어가야 한다.
   2026-10-07 ⑤ 로 단추가 하나 늘자 글이 한 글자씩 세로로 쪼개지고 89px 이 넘쳤다.
   상태 글만 **끝까지 줄어들게** 하고(넘치면 … 으로), 단추들은 제 크기를 지킨다. */
.tk-mid{gap:6px;padding:6px 8px}
.tk-status{font-size:13px;color:var(--muted);text-align:center;flex:1 1 0;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-mid>:not(.tk-status){flex:0 0 auto}
.tk-close{white-space:nowrap;padding:6px 8px}
.tk-wait{white-space:nowrap}
.tk-wait select{padding:5px 4px}
.tk-close{border:1px solid var(--line);background:var(--card);color:inherit;border-radius:10px;padding:6px 10px;font-size:13px;cursor:pointer}
.tk-wait{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted)}
.tk-wait select{font-size:13px;padding:5px 6px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:inherit}
/* ⑤ 지금 쓰는 말 수 — 현장 사람도 보이게, 눌러서 용어집을 연다 */
#tk-terms{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
#tk-terms b{color:var(--accent);font-weight:700}
.w-ex{margin-top:7px;padding-top:7px;border-top:1px dashed var(--line);font-size:13px;line-height:1.5}
.w-ex-en{display:block;color:var(--text)}
.w-ex-ko{display:block;color:var(--muted);margin-top:2px}
.w-sense + .w-sense{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.w-no{display:inline-block;min-width:17px;height:17px;line-height:17px;text-align:center;border-radius:5px;background:var(--accent-soft);color:var(--accent);font-size:11px;margin-right:4px}

/* ── 의료관광 병원 안내 ───────────────────────────────────────────────────
   단어 탭의 「의료 전문통역」 밑에 병원 하나가 카테고리 하나로 선다.
   읽는 사람은 외국인 환자라서 영어가 위, 우리말이 아래다. (2026-10-02) */
.cat.clinic .cnt { color: var(--accent); }
.cat.clinic .tag-sample {
  display: inline-block; margin-top: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--warn-soft); color: var(--warn); font-size: 12px;
}
.cat.clinic.invite { border-style: dashed; }
#w-clinic { margin-top: 4px; }
.c-name { font-size: 22px; margin: 10px 0 2px; }
.c-name-ko { display: block; font-size: 15px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.c-type { color: var(--accent); font-size: 14px; margin: 0 0 12px; }
.c-sample {
  background: var(--warn-soft); color: var(--warn); border-radius: 10px;
  padding: 8px 12px; font-size: 14px; margin: 0 0 12px;
}
.c-sub { font-size: 15px; color: var(--muted); margin: 18px 0 6px; }
.c-line {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin: 0 0 8px; cursor: pointer;
}
.c-line.c-blurb { background: var(--accent-soft); border-color: transparent; }
.c-en { display: block; font-size: 16px; line-height: 1.5; }
.c-ko { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; }
.c-note { color: var(--muted); font-size: 13px; margin: 18px 0 0; line-height: 1.6; }
.cat.clinic.consult { background: var(--accent-soft); border-color: transparent; }
.c-step {
  display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center;
  border-radius: 999px; background: var(--accent); color: #fff; font-size: 13px;
  font-weight: 700; margin-right: 8px; vertical-align: top;
}
.c-step + .c-en { display: inline; }
.c-step ~ .c-ko { margin-left: 30px; }
/* 뜻을 그 나라 말로 보여 줄 때, 한국어 뜻은 아래에 작게 남긴다 (2026-10-02) */
.w-ko2 { color: var(--muted); font-size: 13px; margin-top: 2px; }
/* 광고 자리임을 밝히는 딱지 — 광고 모델 (2026-10-02) */
.cat.clinic .tag-ad {
  display: inline-block; margin-top: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--line); color: var(--muted); font-size: 12px;
}
.c-adnote {
  background: var(--line); color: var(--muted); border-radius: 10px;
  padding: 8px 12px; font-size: 13px; line-height: 1.5; margin: 0 0 12px;
}
/* 필리핀 묶음 고르기 (2026-10-09) — 묶음이 열 개가 되어 단추 대신 칸으로 모았다.
   칸과 「담기」가 떨어지면 짝인 줄 모르므로 한 덩어리로 붙여 둔다. */
.ws-packs-ph { display: inline-flex; align-items: center; gap: 6px; }
.ws-packs-ph select { font: inherit; font-size: 14px; padding: 6px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); max-width: 56vw; }
.ws-packs-ph select:focus-visible { border-color: var(--accent); }
/* 회의록 핵심 요약 (2026-10-12) — 회의록을 열면 먼저 읽을 것은 요지다.
   요약이 생기면 원문(rec-list)은 접고 「회의 원문 보기」로 펼친다. */
.rec-sum-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px;
  background: var(--accent-soft); }
.rec-sum-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rec-sum-top b { font-size: 15px; }
.rec-sum { margin-top: 10px; font-size: 15px; line-height: 1.55; }
.rec-sum h4 { margin: 12px 0 4px; font-size: 14px; color: var(--accent); }
.rec-sum h4:first-child { margin-top: 0; }
.rec-sum ul { margin: 0; padding-left: 18px; }
.rec-sum li { margin: 2px 0; }
.rec-sum p { margin: 4px 0; }
.rec-raw { margin: 0 0 10px; }
/* 설정 가름줄 (2026-10-12) — 위는 「할 일」(분야·용어집·회의록), 아래는 「한 번 정하는 것」 */
.rs-line { border: 0; border-top: 1px solid var(--line); margin: 14px 0 12px; }
/* 메뉴 가름 (2026-10-12) — 위는 통역·회의록·용어집, 아래는 배우기.
   「배우기」는 고를 수 없는 제목이라 단추와 다르게 작고 흐리게 둔다. */
.drawer-sec {
  margin: 12px 14px 4px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .02em;
}

/* ── 앱답게 다듬기 (2026-10-12, v256) ─────────────────────────────────────
 * 자리와 이름은 **하나도 바꾸지 않는다.** 크기·여백·깊이만 손본다.
 * 스토어에 올릴 앱의 첫인상으로는 글씨가 너무 작고 누를 자리가 좁았다.
 * 아래 규칙은 앞선 규칙을 덮어쓰므로 파일 끝에 둔다. */

/* 작은 글씨 키우기 — 11~12px 은 손에 쥔 화면에서 읽히지 않는다 */
.toggle small { font-size: 13px; line-height: 1.45; margin-top: 3px; }
.tag { font-size: 12px; padding: 2px 9px; }
.vocab { font-size: 15px; }
.ls-note { font-size: 15px; }

/* 누르는 자리 넓히기 */
.lang-pick { padding: 10px 18px; font-size: 15px; min-height: 42px; }
.menu-btn { padding: 8px 12px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.tabs button[data-tab] { padding: 12px 10px; }

/* 칸에 숨통과 옅은 깊이 — 테두리만 있으면 웹 문서처럼 보인다 */
.input-card {
  padding: 16px;
  box-shadow: 0 1px 2px rgb(16 24 40 / .04), 0 6px 16px rgb(16 24 40 / .05);
}
.toggle { font-size: 15px; }
/* 간격을 12px 로 넓혔더니 **4px 이 모자라** 조작 줄이 한 줄에서 세 줄로 쪼개졌다.
   네 가지(읽어주기·회의·대화·설정)가 335px 안에 들어가야 하므로 가로 간격은 건드리지 않는다.
   세로 여백만 늘려 숨통을 틔운다. */
.cont-row { margin: 14px 4px 0; gap: 8px; }

/* 어두운 화면에서는 그림자가 안 보인다 — 테두리를 또렷하게 해 깊이를 대신한다 */
@media (prefers-color-scheme: dark) {
  .input-card { box-shadow: none; border-color: #2d3a56; }
}
/* 통역 화면 머리의 아이콘 단추도 손가락에 맞춘다 (📄 회의록 · ⚙ 설정) */
.lv-gear { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* 「💬 대화」·「⚙ 설정」도 누르는 자리다 — 31px 이라 자꾸 빗나갔다.
   가로는 그대로 두어야 네 가지가 한 줄에 남는다(335px 안에 303px + 간격). */
.record-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* 체크박스도 누르는 자리다 — 글자 높이(23px)밖에 안 돼 작았다.
   첫 화면 조작 줄에서만 키운다(설정 화면의 체크박스는 설명 글이 아래 붙어 있어 건드리면 흐트러진다). */
.cont-row .toggle { min-height: 44px; align-items: center; }
.icon-btn { min-height: 44px; min-width: 44px; }

/* ── 첫 화면 카드 (2026-10-12) ───────────────────────────────────────────
 * 쓰는 만큼 크기를 준다 — 회의 통역이 가장 크다(서버 기록 177회).
 * 색은 꾸미려고 쓰지 않고 **무엇인지 가리키는 데** 쓴다:
 *   파랑 = 회의 통역(주력) · 초록 = 한 마디 · 주황 = 주고받기 · 회색 = 보러 가는 곳 */
.hcards { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.hcard {
  border: 0; border-radius: 16px; padding: 18px 12px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: inherit; cursor: pointer; width: 100%;
}
.hcard:active { transform: scale(.985); }
.hc-ico { font-size: 27px; line-height: 1.1; }
.hc-name { font-size: 16px; font-weight: 600; margin-top: 5px; }
.hc-sub { font-size: 12px; opacity: .8; }
/* 무엇이 나오는지 — 곁말보다 **한 단 더 흐리게** (2026-10-27).
   「들어와도 뭐가 뭔지 모르겠다」는 되먹임을 받아 더했다. 고를 때만 읽히면 되므로
   눈에 먼저 들면 안 된다 — 이름 → 누구와 → 무엇이 나오나, 이 차례로 읽히게 한다.
   큰 카드에만 둔다(작은 카드는 나란히 놓여 좁아 줄이 깨진다). */
.hc-hint { font-size: 12px; opacity: .62; margin-top: 3px; line-height: 1.45; }

.hcard-main { background: var(--accent); color: #fff; padding: 26px 14px; }
.hcard-main .hc-ico { font-size: 38px; }
.hcard-main .hc-name { font-size: 19px; }
.hcard-main .hc-sub { font-size: 13px; }

.hcard-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hcard-one { background: #e1f5ee; color: #0f6e56; }
/* 📝 받아쓰기 — 통역(파랑)과 가르되 회의 쪽 일이라 차분한 보라로 (2026-10-19) */
.hcard-note { background: #5b51b8; color: #fff; padding: 26px 14px; }
.hcard-note .hc-ico { font-size: 38px; }
.hcard-note .hc-name { font-size: 19px; }
.hcard-note .hc-sub { font-size: 13px; }
.hcard-talk { background: #faece7; color: #993c1d; }

/* 보러 가는 곳 — 시작하는 단추와 모양을 달리해 헷갈리지 않게 한다 */
.hcard-rec {
  background: #f1efe8; color: #444441; flex-direction: row; justify-content: space-between;
  padding: 15px 16px; font-size: 15px; font-weight: 600;
}
.hc-rec-n { font-size: 13px; font-weight: 400; color: #888780; }
.hcard-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }

.one-back { border: 0; background: none; color: var(--accent); font: inherit; font-size: 15px;
  padding: 10px 4px; min-height: 44px; cursor: pointer; }

@media (prefers-color-scheme: dark) {
  /* 같은 색조의 **진한 쪽**으로 바꾼다 — 연한 바탕을 그대로 두면 눈이 부시다 */
  .hcard-one { background: #0f6e56; color: #e1f5ee; }
  .hcard-talk { background: #993c1d; color: #faece7; }
  .hcard-rec { background: #2c2c2a; color: #d3d1c7; }
  .hc-rec-n { color: #b4b2a9; }
}
/* 카드가 **화면을 채우게** 한다 — 위쪽에만 몰리고 아래 225px 이 비어 허전했다.
   정해진 높이를 주지 않고 비율로 나눠, 작은 폰에서는 함께 줄고 큰 폰에서는 함께 는다. */
/* 275 → 293(개인정보 처리방침 줄) → 327(2026-10-19 받아쓰기 카드를 통역 카드와 같은 크기로).
   화면에서 재서 맞춘 값이다 — 카드 크기를 건드리면 여기도 다시 재야 한다. */
#home-cards { min-height: calc(100dvh - 327px - var(--ad-h)); }
/* 두 길은 **같은 몫**으로 — 하나가 크면 다른 하나가 곁다리로 보인다 (2026-10-19).
   큰 카드가 둘이 되면서 속 여백이 화면을 밀어냈다(845 > 812). 첫 화면에서는 줄여 쓴다 —
   min-height 만으로는 안 줄어든다. 카드 **속**이 밀어내는 것이라 거기를 줄여야 한다. */
/* 카드 속 여백을 줄여 첫 화면이 넘치지 않게 한다 (2026-10-19).
   ※ 두 카드 높이가 다르다 — 📝 를 뺀 쪽이 그림 한 줄만큼(약 40px) 낮다.
     카드가 **내용만큼** 크고 남는 자리가 없어, flex 몫을 같게 줘도 안 맞는다.
     맞추려면 🎧 도 빼거나 회의록 쪽에 그림을 하나 넣어야 한다 — 사용자가 정할 일이다. */
#home-cards .hcard-main, #home-cards .hcard-note { padding: 16px 14px; }
#home-cards .hcard-main .hc-ico, #home-cards .hcard-note .hc-ico { font-size: 34px; }
#home-cards .hcard-main { flex: 1.6; }
#home-cards .hcard-note { flex: 1.6; }
#home-cards .hcard-pair { flex: 1.1; }
#home-cards .hcard-rec { flex: .7; }
#home-cards .hcard-foot { flex: none; }
.hcard-main, .hcard-one, .hcard-talk { justify-content: center; }
/* 큰 화면에서 지나치게 늘어나지 않게 — 태블릿에서 단추가 손바닥만 해진다 */
@media (min-height: 900px) { #home-cards { min-height: calc(620px - var(--ad-h)); } }

/* ── 광고 자리 ───────────────────────────────────────────────────────────
 * 아무것도 안 붙은 동안에는 **자리를 차지하지 않는다**(--ad-h: 0).
 * body 에 .ad-on 을 붙이면 배너 높이만큼 열리고, 카드는 그만큼 알아서 줄어든다. */
:root { --ad-h: 0px; }
body.ad-on { --ad-h: 56px; }           /* 흔한 배너 높이(320×50)에 여백을 더한 값 */
.ad-slot { display: none; }
body.ad-on .ad-slot {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
  height: var(--ad-h); background: var(--card); border-top: 1px solid var(--line);
}
/* 통역·대화 화면에서는 가린다 — 듣는 중에 눈을 뺏으면 안 된다 */
body.live-open .ad-slot { display: none; }
/* 굴러가는 탭은 끝줄이 배너에 가리지 않게 그만큼 비운다.
   첫 화면(#tab-interp)은 빼야 한다 — 카드 높이가 이미 --ad-h 를 덜어 내고 있어 두 번 빼면 스크롤이 생긴다. */
body.ad-on .tab:not(#tab-interp) { padding-bottom: var(--ad-h); }

/* ── 페이지마다 두는 광고 자리 ────────────────────────────────────────────
 * 아래 고정 배너(#ad-slot)는 **어느 화면에서나 같은 것**이 뜬다.
 * 이것은 화면마다 **다른 것**을 넣을 수 있는 자리다 — 글 흐름 안에 들어가 함께 굴러간다.
 * 안 붙은 동안에는 자리를 차지하지 않는다. */
.ad-inline { display: none; }
body.ad-on .ad-inline {
  display: block; min-height: 56px; margin: 14px 0 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
/* 듣는 화면에서는 글 흐름 안 광고도 가린다 */
body.live-open .ad-inline { display: none; }

/* 광고 한 장의 생김새 — 그림 + 제목 + 한 줄 + 「광고」 표시.
   표시광고법에 따라 **광고임을 알리는 표시를 뺄 수 없다**(.ad-mark). */
.ad-box {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 100%; padding: 8px 12px;
  background: none; border: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer; overflow: hidden;
}
.ad-box img { width: 44px; height: 44px; flex: 0 0 auto; object-fit: cover; border-radius: 8px; }
.ad-box .ad-words { min-width: 0; }     /* 긴 글이 칸을 밀어내지 않게 */
.ad-box .ad-t {
  font-size: 14px; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ad-box .ad-b {
  font-size: 12px; color: var(--muted); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ad-mark {
  margin-left: auto; flex: 0 0 auto; align-self: flex-start;
  font-size: 10px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 4px;
}
/* 광고망(애드센스 등)이 제 그림을 그리는 자리 — 우리 테두리를 지운다 */
.ad-inline.ad-raw, .ad-slot.ad-raw { background: none; border: 0; padding: 0; }

/* 받아쓰기 딱지 — 「✓ 교재」·「🤖 음성 번역」과 같은 자리 */
.tag.note { background: #ece9f7; color: #46409a; }
/* 설정 줄의 곁말 — 「(받아쓰기)」처럼 어디에 걸리는지 작게 적는다 */
.rs-dim { color: var(--muted); font-size: 13px; }

/* ── 이번 달 통역 시간 막대 ───────────────────────────────────────────────
 * 숫자만 적어 두면 「많이 썼나」가 안 잡힌다. 한도를 정해 둔 분에게만 보인다. */
.use-bar { height: 8px; margin: 2px 0 14px; border-radius: 999px; background: var(--line); overflow: hidden; }
.use-bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .3s; }

/* ── 로그인 ──────────────────────────────────────────────────────────── */
.who { border: 1px solid var(--line); background: var(--card); color: var(--text);
  border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13px;
  min-height: 36px; margin-left: 8px; cursor: pointer; white-space: nowrap; }
.who.in { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

.sheet { position: fixed; inset: 0; z-index: 50; background: rgba(17,24,39,.45);
  display: flex; align-items: center; justify-content: center; padding: 18px; }
.sheet-card { background: var(--card); border-radius: 18px; padding: 18px; width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 11px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; font-size: 17px; }
.sheet-note { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.5; }
.f-row { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--muted); }
.f-row input { border: 1px solid var(--line); background: var(--bg); color: var(--text);
  border-radius: 12px; padding: 12px 13px; font: inherit; font-size: 16px; min-height: 48px; }
.f-row input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.login-err { color: #b91c1c; font-size: 14px; margin: 0; line-height: 1.5; }
.pill.strong { background: var(--accent); color: #fff; border-color: transparent; font-weight: 600;
  justify-content: center; }
.sheet-foot { color: var(--muted); font-size: 13px; margin: 2px 0 0; text-align: center; }
/* 가입 창의 동의 줄 (2026-10-27) — 네모를 글 맨 윗줄에 맞춘다. 두 줄로 넘어가도
   네모가 가운데로 내려가지 않게 align-items 를 flex-start 로 둔다.
   누르는 자리는 네모만이 아니라 **글까지** — 손가락으로 네모만 맞히기 어렵다. */
.su-check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px;
  line-height: 1.55; color: var(--text); cursor: pointer; margin: 2px 0; }
.su-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--accent); }
@media (prefers-color-scheme: dark) { .login-err { color: #fca5a5; } }

/* 손가락 자판이 올라와도 「로그인」 단추가 가리지 않게 (2026-10-13).
   창을 화면 한가운데 고정해 두었더니, 아이폰에서 칸을 누르면 자판이 올라와
   아래쪽 단추가 덮였다. 굴릴 수 있게 하고 자판 높이만큼 아래를 띄운다. */
.sheet { overflow-y: auto; -webkit-overflow-scrolling: touch; align-items: flex-start; padding-top: 24px; }
.sheet-card { margin: auto 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
@supports (height: 100dvh) { .sheet { max-height: 100dvh; } }

/* ── 내 포인트 (2026-10-20) ────────────────────────────────────────────────
   유상과 무상을 **갈라** 보여 준다. 사라질 것에는 날짜를 함께 적어,
   없어지고 나서 묻는 일이 없게 한다. */
/* 2026-10-20: **작게 고쳤다.** 색 칸에 20px 굵은 글씨로 두었더니 「내 계정」 창에서
   포인트가 제일 먼저 눈에 들었다 — 거기 주인공은 계정이지 포인트가 아니다.
   칸을 걷고 줄 하나로 가르기만 한다. */
.me-pt { margin: 12px 0 2px; padding-top: 10px; border-top: 1px solid var(--line, #e2e8f0); }
.me-pt-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.me-pt-top b:first-child { color: var(--dim, #64748b); font-weight: 600; }
.me-pt-top b:last-child { font-size: 15px; }
.me-pt-rows { margin-top: 4px; }
.me-pt-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; font-size: 13px; }
.me-pt-row .lab { color: var(--dim, #64748b); }
.me-pt-row .when { color: var(--dim, #64748b); font-size: 12px; }
.me-pt .sheet-note { margin-top: 6px; font-size: 12px; }
/* 충전 단추도 거들게 — 로그아웃 단추보다 세면 안 된다 */
#me-pt-buy { font-size: 14px; padding: 8px 12px; }

/* ── 포인트 충전 (2026-10-20) ──────────────────────────────────────────── */
#me-pt-buy { margin-top: 10px; }
/* 목록에서 바로 통역 연습 (2026-10-30) ──────────────────────────────────
   줄 오른쪽에 「정답」과 🎤 를 둔다 — **통역연습 모드일 때만.** 처음에는 🎤 를
   늘 붙여 두었는데, 모드를 켜지도 않았는데 마이크가 보여 무엇을 하라는 것인지
   알 수 없었다. 켠 사람에게만 보인다.
   줄을 누르면 전처럼 문장이 열리고, 🎤 를 누르면 그 자리에서 연습이 시작된다 —
   두 가지가 한 줄에 있으니 **누르는 자리를 또렷이 갈라야** 한다
   (손가락이 44px 은 되어야 한다). */
.list li { position: relative; }
/* 방향 바꾸기 — 스위치 바로 위. 누를 것이라고 보이게 테를 두른다 */
.cat-dir {
  display: block; width: 100%; margin: 2px 0 8px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer;
}
.cat-dir:hover { background: var(--line); }
/* 연습 모드 스위치 — 목록 바로 위. 켜고 끄는 것이 눈에 보여야 한다 */
.prac-sw { display: flex; align-items: center; gap: 9px; margin: 2px 0 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); font-size: 14px; cursor: pointer; }
.prac-sw input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); }
/* 가린 정답 — 자리는 남겨 둔다. 자리까지 없애면 줄 높이가 들쭉날쭉해진다 */
.list li .e.veil { color: transparent; background: var(--line); border-radius: 6px;
  max-width: 62%; user-select: none; }
/* 연습 줄은 단추가 **둘**(정답·🎤)이라 오른쪽을 비운다.
   52px 만 비워 두었더니 긴 문장이 「정답」 단추 밑으로 들어갔다(재어 보고 잡음). */
.list li.prac { padding-right: 108px; }
.row-ans {
  position: absolute; right: 54px; top: 50%; transform: translateY(-50%);
  height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 15px;
  background: var(--card); color: var(--muted); font-size: 12px; cursor: pointer;
}
.row-mic {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--card); font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.row-mic:active { transform: translateY(-50%) scale(.92); }

.buy-picks { display: flex; gap: 8px; margin: 4px 0 14px; }
.buy-picks .pill { flex: 1; }
.buy-picks .pill[aria-pressed="true"] { background: var(--brand, #1d4ed8); color: #fff; }
.buy-amt { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.buy-amt input {
  flex: 1; min-width: 0; padding: 10px 12px; font-size: 18px; text-align: right;
  border: 1px solid var(--line, #cbd5e1); border-radius: 10px;
}
.buy-terms { margin: 14px 0 16px; padding-left: 18px; color: var(--dim, #64748b); font-size: 13px; line-height: 1.7; }
#buy-go { width: 100%; }
#buy-msg { margin-top: 10px; }

/* 회의 중 남은 포인트 — 통역문과 눈을 다투지 않게 작고 흐리게 */
.lv-pt { margin-left: 10px; font-size: 13px; color: var(--dim, #64748b); white-space: nowrap; }
.lv-pt.low { color: #b45309; font-weight: 700; }

/* ── 설명서·방침을 앱 안에서 (2026-10-20) ──────────────────────────────────
   거의 화면을 다 쓴다 — 글을 읽는 창이라 좁으면 줄이 자꾸 꺾인다. */
.page-card { width: min(760px, 96vw); height: 88vh; display: flex; flex-direction: column; padding-bottom: 0; }
.page-card .sheet-head { flex: 0 0 auto; }
#page-frame { flex: 1 1 auto; width: 100%; border: 0; border-radius: 0 0 14px 14px; background: #fff; }
/* 꼬리말의 글 단추 — 생김새는 고리, 하는 일은 단추 */
.linky { background: none; border: 0; padding: 0; font: inherit; color: var(--brand, #1d4ed8);
         text-decoration: underline; cursor: pointer; }