:root {   /* 다크 모드(기본) */
    --bg: #0e0f11; --paper: #16171a; --ink: #f1f2f5; --muted: #868a92;
    --accent: #d2691e; --amber: #eaa24e; --accent-soft: rgba(234,162,78,.15); --line: rgba(255,255,255,.08);
    --active: rgba(234,162,78,.13); --active-border: #eaa24e;
    --ghost: rgba(255,255,255,.06); --ghost-hi: rgba(255,255,255,.11);
    --sheet: #1d1e22; --shadow: rgba(0,0,0,.5); --sentence-hover: rgba(255,255,255,.04);
  }
  :root.light {   /* 라이트 모드 */
    --bg: #f5f3ee; --paper: #fffdf9; --ink: #1b1c1f; --muted: #74767c;
    --accent: #c2410c; --accent-soft: rgba(210,105,30,.14); --line: rgba(20,20,26,.10);
    --active: rgba(234,162,78,.18); --active-border: #d2691e;
    --ghost: rgba(0,0,0,.05); --ghost-hi: rgba(0,0,0,.09);
    --sheet: #fffdf9; --shadow: rgba(0,0,0,.12); --sentence-hover: #ffffff;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'Spectral', 'Pretendard', sans-serif;   /* 라틴=Spectral 세리프 · 한글=Pretendard(명조 폴백 방지) */
    background: var(--bg); color: var(--ink); line-height: 1.6; min-height: 100vh;
  }
  .appheader { position: sticky; top: 0; z-index: 160; background: var(--paper); box-shadow: 0 1px 8px rgba(0,0,0,0.04); }
  .topbar { background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px 0; }
  .subbar { background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 0; }
  .bar-inner { max-width: 1320px; width: 100%; margin: 0 auto; padding: 0 24px;   /* 헤더 내용 = 콘텐츠 폭에 정렬 */
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .docinfo { max-width: 1272px; margin: 8px auto 0; padding: 0 12px 0 44px; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; font-size: 13px; color: var(--muted); }
  .docinfo:empty { display: none; }
  body:not(.has-doc) .docinfo { text-align: center; padding-left: 12px; padding-right: 12px; }   /* 빈 화면·실패 메시지는 가운데 정렬(문서 로드 시엔 본문 정렬 유지) */
  /* 서브바 4버튼(전체해석·요약·내정리·새자료) 폰트·크기 동일 */
  .tgl { font-size: 13px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--muted); cursor: pointer; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }
  .tgl:hover { border-color: var(--accent); color: var(--accent); }
  .tgl.on { background: var(--accent); color: #fff; border-color: var(--accent); }
  .subbar-sep { flex: none; align-self: center; width: 1px; height: 18px; background: var(--line); margin: 0 5px; }   /* 노트(단어장·내문장) / 읽기도구(전체해석·운전) 구분선 */
  .brand { font-size: 19px; font-weight: 800; letter-spacing: -0.5px; line-height: 1; display: inline-block; cursor: pointer; font-family: 'Pretendard', -apple-system, sans-serif; }   /* 데스크톱: 단일행 두 톤(Every 하양 · Says 앰버) */
  .brand .es-says { color: var(--amber, #eaa24e); }
  .brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
  .topbar .bar-inner { position: relative; }   /* 설정 팝오버 기준점 */
  .hdr-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .hdr-acct { background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 8px; transition: color .15s, background .15s; }
  .hdr-acct:hover { color: var(--accent); background: var(--ghost); }
  .hdr-acct svg { width: 19px; height: 19px; display: block; }
  /* 테마 토글(nav): 다크=해(라이트로), 라이트=달(다크로) */
  .hdr-theme .ic-moon { display: none; }
  :root.light .hdr-theme .ic-sun { display: none; }
  :root.light .hdr-theme .ic-moon { display: block; }
  .hdr-login { background: none; border: 1px solid var(--line); color: var(--ink); cursor: pointer; padding: 7px 14px; border-radius: 9px; font-family: 'Schibsted Grotesk','Pretendard',-apple-system,sans-serif; font-size: 13px; font-weight: 600; transition: border-color .15s, color .15s; }
  .hdr-login:hover { border-color: var(--accent); color: var(--accent); }
  /* 로그아웃 = 이메일 + 라벨 버튼(아이콘만 → 명확히) */
  .hdr-email { color: var(--muted); font-size: 12.5px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Schibsted Grotesk','Pretendard',-apple-system,sans-serif; }
  .hdr-logout { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--line); color: var(--muted); cursor: pointer; padding: 7px 12px; border-radius: 9px; font-family: 'Schibsted Grotesk','Pretendard',-apple-system,sans-serif; font-size: 13px; font-weight: 600; transition: border-color .15s, color .15s; }
  .hdr-logout:hover { border-color: var(--accent); color: var(--accent); }
  .hdr-logout svg { width: 16px; height: 16px; display: block; }
  @media (max-width: 768px) {                  /* 모바일·태블릿 전 구간 컴팩트 헤더(기어 잘림 방지) */
    .hdr-email { display: none !important; }
    .hdr-right { gap: 5px; }
    .hdr-logout span { display: none; }      /* 모바일: 로그아웃 아이콘만 → 기어 잘림 방지 */
    .hdr-logout { padding: 9px; }            /* 터치영역 ~36px */
    .hdr-acct { padding: 8px; }              /* 테마 토글 ~35px */
    .hdr-gear { padding: 8px; }
    .hdr-gear svg, .hdr-acct svg, .hdr-logout svg { width: 19px; height: 19px; }
    .langctrl .langicon { display: none; }   /* 모바일: 지구본 생략(셀렉트 텍스트로 충분) */
    .langctrl select { max-width: 76px; padding: 8px 7px; }   /* 폭 확보 + 터치 높이 */
    .topbar .bar-inner { padding-right: max(16px, env(safe-area-inset-right)); }   /* 작은 폰에서도 우측 여백 유지(잘림 방지) */
  }
  .hdr-gear { display: inline-flex; background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 8px; transition: all .15s; }
  .hdr-gear:hover { color: var(--accent); background: var(--ghost); }
  .hdr-gear svg { width: 20px; height: 20px; display: block; overflow: visible; }   /* 기어 톱니가 viewBox를 살짝 넘어 SVG 기본 overflow:hidden에 잘리는 것 방지 */
  .drv-gear svg, .hdr-acct svg, .hdr-logout svg { overflow: visible; }
  /* 읽기 설정(테마·음성·속도·묶음)은 톱니 팝오버로 — 헤더는 한 줄 유지(마케팅 nav와 일관) */
  .controls { position: absolute; top: calc(100% + 10px); right: 4px; z-index: 170; width: auto; min-width: 264px; max-width: calc(100vw - 24px);
    display: none; flex-direction: column; align-items: stretch; gap: 14px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: 0 18px 44px rgba(0,0,0,.22);
    font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }
  .controls.open { display: flex; }
  .controls .ctrl { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .controls .spdpresets { display: none; }   /* 팝오버에선 슬라이더로 충분 → 프리셋 칩 숨겨 폭 절약 */
  .ctrl { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
  .ctrl label { white-space: nowrap; }
  select, input[type=range] { font-family: inherit; }
  select { padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); font-size: 13px; max-width: 200px; }
  select option, select optgroup { background: var(--paper); color: var(--ink); }   /* 드롭다운 목록도 테마 배경에 맞춤(흰 배경 방지) */
  select optgroup { color: var(--muted); font-weight: 600; }
  /* 모던 커스텀 셀렉트 — 네이티브 select를 감싸 부드럽게 열리는 드롭다운으로 */
  .xsel { position: relative; display: inline-flex; vertical-align: middle; }
  .xsel > select { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
  .xsel-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink); font-size: 13px; font-family: inherit; cursor: pointer; max-width: 210px; transition: border-color .15s, background .15s; }
  .xsel-btn:hover, .xsel.open .xsel-btn { border-color: var(--accent); background: var(--ghost); }
  .xsel-btn:active { transform: scale(.97); }
  .xsel.open .xsel-btn { box-shadow: 0 0 0 3px var(--accent-soft); }
  .xsel-btn .xsel-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .xsel-btn .xsel-car { font-size: 9px; color: var(--muted); transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
  .xsel.open .xsel-car { transform: rotate(180deg); color: var(--accent); }
  .xsel-pop { position: absolute; top: calc(100% + 7px); left: 0; z-index: 170; min-width: 100%; width: max-content; max-width: 240px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 38px rgba(0,0,0,.32); padding: 5px;
    max-height: 74vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;   /* 스크롤바 숨김 · 보통은 전부 보임 */
    opacity: 0; transform: translateY(-10px); transform-origin: top center; pointer-events: none; transition: opacity .18s ease, transform .24s cubic-bezier(.16,1,.3,1); }
  .xsel-pop::-webkit-scrollbar { display: none; }
  .xsel.open .xsel-pop { opacity: 1; transform: none; pointer-events: auto; }
  @keyframes xOptIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .xsel.open .xsel-opt, .xsel.open .xsel-grp { animation: xOptIn .26s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i,0) * 16ms); }
  .xsel-grp { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 8px 10px 3px; }
  .xsel-opt { display: flex; align-items: center; width: 100%; padding: 8px 11px; border: none; background: none; border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--ink); cursor: pointer; text-align: left; white-space: nowrap; transition: background .13s ease, padding .13s ease, color .13s; }
  .xsel-opt:hover { background: var(--ghost); padding-left: 15px; }
  .xsel-opt:active { background: var(--ghost-hi); }
  .xsel-opt.sel { color: var(--accent); font-weight: 600; }
  .xsel-opt.sel::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: auto; flex: none; box-shadow: 0 0 0 3px var(--accent-soft); }
  .langicon { display: inline-flex; align-items: center; color: var(--muted); margin-right: -2px; }   /* 표준 언어(지구본) 아이콘 · 모노크롬 */
  .langicon svg { width: 17px; height: 17px; display: block; }
  .speedval { font-variant-numeric: tabular-nums; min-width: 34px; color: var(--ink); font-weight: 600; }
  .uploadbtn {
    background: var(--accent); color: #fff; border: none; padding: 7px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif;
    transition: transform .1s, background .15s;
  }
  .uploadbtn:hover { background: #9a3412; }
  .uploadbtn:active { transform: scale(.97); }
  .ytbar { display: none; position: relative; z-index: 40; background: var(--bg); padding: 6px 0; text-align: center; }
  .ytbar.pinned { position: sticky; top: 0; }   /* 재생 중에만 고정 · 멈추면 같이 스크롤되어 스크립트를 편히 봄 */
  .ytbar #ytplayer { width: min(100%, 1080px); aspect-ratio: 16 / 9; height: auto; margin: 0 auto; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 14px rgba(0,0,0,0.14); }
  /* 팟캐스트 오디오 바 — 슬림, 재생 중 sticky(유튜브 바와 동일 거동) */
  .podbar { display: none; position: relative; z-index: 40; background: var(--bg); padding: 8px 0; }
  .podbar.pinned { position: sticky; top: 0; }
  .podbar-inner { display: flex; align-items: center; gap: 11px; width: min(100%, 720px); margin: 0 auto; padding: 9px 14px;
    background: var(--ghost); border: 1px solid var(--line); border-radius: 12px; }
  .podbar .podico { display: inline-flex; color: var(--accent); flex: none; }
  .podbar .podico svg { width: 20px; height: 20px; display: block; }
  .podbar audio { flex: 1; min-width: 0; height: 34px; }
  /* 업로드 영상(owner) — 영상은 보면서 셰도잉 */
  .vidbar { display: none; position: relative; z-index: 40; background: var(--bg); padding: 8px 0; }
  .vidbar.pinned { position: sticky; top: 0; }
  .vidbar video { display: block; width: min(100%, 720px); max-height: 56vh; margin: 0 auto; border-radius: 12px; background: #000; }
  /* 인앱 로그인 시트 + 온보딩 오버레이 */
  .authovl { position: fixed; inset: 0; z-index: 200; display: flex; visibility: hidden; opacity: 0; pointer-events: none; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--bg) 74%, transparent); backdrop-filter: blur(4px); transition: opacity .2s ease, visibility .2s; }
  .authovl.on { visibility: visible; opacity: 1; pointer-events: auto; }
  .authovl > * { transform: translateY(10px) scale(.985); opacity: 0; transition: transform .26s cubic-bezier(.16,1,.3,1), opacity .2s ease; }
  .authovl.on > * { transform: none; opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .authovl, .authovl > * { transition: none; } }
  /* 월별 학습 달력 (월~일 · 날짜 · 완성도) */
  .cal-head2 { display: flex; align-items: center; gap: 10px; margin: 14px 0 14px; flex-wrap: wrap; }
  .cal-nav { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 8px; width: 28px; height: 28px; cursor: pointer; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
  .cal-nav:hover { color: var(--ink); border-color: var(--amber); }
  .cal-nav:disabled { opacity: .35; cursor: default; }
  .cal-month { font-family: var(--serif); font-size: 17px; color: var(--ink); min-width: 116px; text-align: center; }
  .cal-bar { width: 56px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.09); overflow: hidden; margin-left: auto; }
  .cal-bar-fill { height: 100%; background: var(--amber); border-radius: 999px; transition: width .4s; }
  .cal-done { font-size: 12px; color: var(--muted); white-space: nowrap; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 4px; }
  .cal-wd { text-align: center; font-size: 11px; color: var(--muted); padding-bottom: 4px; }
  .cal-day { min-height: 34px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); border-radius: 9px; background: var(--ghost); }
  .cal-day.on { background: var(--amber); color: #1b1205; font-weight: 700; box-shadow: 0 0 10px -3px rgba(234,162,78,.7); }
  .cal-day.today { outline: 1.6px solid var(--amber); outline-offset: 1px; }
  .cal-day.future { opacity: .3; }
  .cal-day.blank { background: none; }
  .streak-card { max-width: 460px; }
  .compose-card { max-width: 460px; }
  .compose-sub { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 16px; }
  .compose-in { width: 100%; box-sizing: border-box; resize: vertical; min-height: 86px; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.25); color: var(--ink); font-family: inherit; font-size: 15px; line-height: 1.5; margin-bottom: 14px; }
  .compose-in:focus { outline: none; border-color: var(--amber); }
  .compose-msg { font-size: 13px; color: var(--muted); margin-top: 12px; text-align: center; min-height: 17px; }
  .compose-msg.err { color: #e5867f; }
  .compose-res { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; text-align: left; }
  .compose-corrected { font-size: 17px; line-height: 1.5; color: var(--ink); font-weight: 600; }
  .compose-fb { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin-top: 9px; }
  .compose-res .lgo { margin-top: 15px; }
  .compose-acts { display: flex; gap: 8px; }
  .compose-acts .lgo { flex: 1; }
  .obcard .lgo.lgo-ghost, .compose-acts .lgo-ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
  .obcard .lgo.lgo-ghost:hover { background: var(--accent); color: #fff; }
  .lgo-ghost.saved { border-color: var(--line); color: var(--muted); background: transparent; cursor: default; }
  @media (max-width: 460px) { .compose-acts { flex-direction: column; } }
  .streak-stats { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 2px; color: var(--muted); font-size: 14px; }
  .streak-stats .streak-big { font-family: var(--serif); font-size: 34px; color: var(--amber); line-height: 1; }
  .streak-stats .streak-sub { margin-left: auto; font-size: 13px; }
  .hdr-streak { align-items: center; }
  .hdr-streak .sb-n { font-weight: 700; font-size: 13px; margin-left: 3px; }
  .lsheet { position: relative; width: 100%; max-width: 384px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 28px 24px 20px; box-shadow: 0 28px 70px rgba(0,0,0,.45); }
  .lsheet h3 { font-family: 'Spectral', 'Pretendard', sans-serif; font-weight: 500; font-size: 24px; margin: 0 0 7px; color: var(--ink); letter-spacing: -.01em; }
  .lsheet .lsub { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
  .lsheet-x, .sp-x { background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; line-height: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, background .15s; }
  .lsheet-x { position: absolute; top: 12px; right: 12px; }
  .lsheet-x:hover, .sp-x:hover { color: var(--ink); background: var(--ghost-hi); }
  .lsheet-x svg, .sp-x svg { width: 20px; height: 20px; }
  .lsheet .sso { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--ghost); color: var(--ink); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
  .lsheet .sso:hover { border-color: var(--accent); background: var(--ghost-hi); }
  .lsheet .sso svg { width: 18px; height: 18px; }
  .lsheet .ldiv { text-align: center; color: var(--muted); font-size: 12px; margin: 16px 0 11px; }
  .lsheet input { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 14px; font-family: inherit; outline: none; }
  .lsheet input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .lsheet .lgo { width: 100%; margin-top: 9px; padding: 12px; border: none; border-radius: 11px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
  .lsheet .lgo:hover { background: #9a3412; }
  .lsheet .lmsg { font-size: 13px; margin-top: 10px; min-height: 16px; }
  .lsheet .lmsg.ok { color: #6ab07e; } .lsheet .lmsg.err { color: #e5867f; }
  .lsheet .lhint { font-size: 11.5px; color: var(--faint); margin-top: 6px; }
  .lsheet .ltoggle { text-align: center; margin-top: 14px; color: var(--muted); font-size: 13px; }
  .lsheet .llink { background: none; border: none; color: var(--accent); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; }
  .lsheet .lguest { display: block; width: 100%; margin-top: 14px; background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; }
  .lsheet .lguest:hover { color: var(--ink); text-decoration: underline; }
  .lsheet .lseg { display: flex; gap: 4px; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; }
  .lsheet .lseg-t { flex: 1; padding: 8px 0; border: none; border-radius: 8px; background: none; color: var(--muted); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
  .lsheet .lseg-t.on { background: var(--accent-soft); color: var(--amber); }
  .lsheet .pwwrap { position: relative; margin-top: 8px; }
  .lsheet .pwwrap input { margin-top: 0; padding-right: 42px; }
  .lsheet .pweye { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; line-height: 0; border-radius: 8px; }
  .lsheet .pweye:hover { color: var(--ink); } .lsheet .pweye svg { width: 18px; height: 18px; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  /* 온보딩 */
  .obcard { width: 100%; max-width: 440px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 30px 28px 24px; box-shadow: 0 28px 70px rgba(0,0,0,.45); }
  .obcard h2 { font-family: 'Spectral', 'Pretendard', sans-serif; font-weight: 500; font-size: 26px; margin: 0 0 18px; color: var(--ink); letter-spacing: -.015em; line-height: 1.2; }
  .obsteps { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .obsteps li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink2, var(--ink)); font-size: 15px; line-height: 1.45; }
  .obsteps .obn { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .oblang { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; }
  .oblang label { font-size: 13px; color: var(--muted); }
  .obcard .lgo { width: 100%; padding: 13px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; }
  .obcard .lgo:hover { background: #9a3412; }
  .sentence.speaking { background: var(--active); box-shadow: inset 3px 0 0 var(--accent); }   /* 유튜브: 지금 말하는 문장 */
  /* 빈 상태 히어로 — URL 입력에 맥락을 주고 한 묶음으로 보이게 (자료 없을 때만) */
  .starthero { display: none; text-align: center; max-width: 600px; margin: 56px auto 0; padding: 0 20px; }
  body:not(.has-doc) .starthero { display: block; }
  .start-title { font-family: 'Spectral', 'Pretendard', sans-serif; font-weight: 500; font-size: clamp(24px, 3.4vw, 33px); letter-spacing: -.015em; color: var(--ink); line-height: 1.15; margin: 0; }
  .start-sub { margin: 11px auto 0; max-width: 470px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
  body:not(.has-doc) .sourcepick { margin-top: 18px; }
  body:not(.has-doc) .empty { padding-top: 28px; }
  body:not(.has-doc) #biBtn { display: none; }   /* 전체해석: 자료(URL 등) 로드 전까진 숨김 */
  body:not(.has-doc) #driverBtn { opacity: .45; }   /* 운전 모드: 자료 로드 전엔 비활성처럼(클릭 시 안내 툴팁) */
  body.driving #biBtn { opacity: .4; pointer-events: none; }   /* 운전 모드 중엔 전체해석 비활성(운전 모드 자체 해석 토글 사용) */
  body.home-on #playerbar { display: none !important; }   /* 홈·단어장·내문장·문장만들기 페이지엔 재생바 숨김(읽기 중에만) */
  .btn-tip { position: fixed; transform: translateX(-50%); z-index: 300; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; padding: 7px 11px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; box-shadow: 0 6px 20px rgba(0,0,0,.28); font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }
  .btn-tip.show { opacity: 1; }
  .sourcepick { display: none; max-width: 560px; margin: 22px auto 0; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 4px 22px rgba(0,0,0,0.05); font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }
  .sourcepick.show { display: block; }
  .sourcepick.over { border-color: var(--accent); background: var(--accent-soft); }
  .srcbox { display: flex; gap: 8px; align-items: center; }
  .srcurl { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 11px; font-size: 15px; font-family: inherit; background: var(--bg); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
  .srcurl::placeholder { color: var(--muted); }
  .srcurl:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .srcgo { padding: 12px 22px; border: none; border-radius: 11px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background .15s, transform .1s; }
  .srcgo:hover { background: #9a3412; }
  .srcgo:active { transform: scale(.97); }
  .srcbox { position: relative; }
  .srcicon-btn { display: inline-flex; align-items: center; gap: 3px; padding: 9px 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); cursor: pointer; flex-shrink: 0; font-size: 15px; line-height: 1; }
  .srcicon-btn:hover { border-color: var(--accent); }
  .srcicon-btn .srcico { display: flex; align-items: center; color: var(--muted); }
  .srcicon-btn .srcico img { width: 18px; height: 18px; border-radius: 3px; display: block; }
  .srcicon-btn .srcico svg { width: 18px; height: 18px; display: block; }
  .srcicon-btn .caret { font-size: 9px; color: var(--muted); }
  .platmenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 14px 32px rgba(0,0,0,.3); padding: 5px; min-width: 190px; text-align: left;
    max-height: 74vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transform-origin: top; pointer-events: none; transition: opacity .17s ease, transform .22s cubic-bezier(.16,1,.3,1), visibility .22s; }
  .platmenu::-webkit-scrollbar { display: none; }
  .platmenu.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .platmenu.open .platitem { animation: xOptIn .26s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i,0) * 15ms); }
  .platitem { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: none; background: none; border-radius: 8px; font-size: 14px; font-family: inherit; color: var(--ink); cursor: pointer; }
  .platitem img { width: 18px; height: 18px; border-radius: 3px; }
  .platitem:hover { background: var(--accent-soft); color: var(--accent); }
  .platgrp { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 9px 10px 4px; font-weight: 600; }
  .srcalt { margin-top: 13px; text-align: center; font-size: 13px; color: var(--muted); }
  .linkbtn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 13px; font-family: inherit; padding: 0; font-weight: 600; }
  .linkbtn:hover { text-decoration: underline; }
  .srchint { font-size: 13px; color: var(--muted); }

  .wrap { max-width: 760px; margin: 0 auto; padding: 42px 24px 150px; }   /* 읽기 컬럼(책처럼 좁게) */

  .empty { text-align: center; padding: 44px 20px 80px; color: var(--muted); font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }
  .empty .feats { list-style: none; max-width: 452px; margin: 0 auto; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 14px; }
  .empty .feats li { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
  .empty .feats svg { width: 18px; height: 18px; flex: none; color: var(--accent); margin-top: 1px; }
  .empty .feats strong { color: var(--ink); font-weight: 600; }
  .empty .drop { margin-top: 28px; border: 2px dashed var(--line); border-radius: 14px; padding: 44px 20px; cursor: pointer; transition: border-color .2s, background .2s; }
  .empty .drop:hover, .empty .drop.over { border-color: var(--accent); background: var(--accent-soft); }
  .empty .drop strong { color: var(--accent); }
  /* 홈(로그인 메인) 대시보드 */
  body.home-on .empty, body.home-on #wrap, body.home-on #demoHint { display: none; }
  /* 내 단어 / 내 문장 / 문장 만들기 전체 페이지 */
  body.nbpage-on .starthero, body.nbpage-on .sourcepick, body.nbpage-on #home, body.nbpage-on .docinfo,
  body.composepage-on .starthero, body.composepage-on .sourcepick, body.composepage-on #home, body.composepage-on #nbPage, body.composepage-on .docinfo { display: none; }
  .composepage .obcard { margin: 10px auto 0; box-shadow: 0 6px 26px rgba(0,0,0,0.06); }
  .nbp-top { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
  .nbp-title { flex: 1; font-size: 21px; font-weight: 800; color: var(--ink); margin: 0; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }
  .ms-back { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 9px; padding: 7px 12px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
  .ms-back:hover { border-color: var(--accent); color: var(--accent); }
  .ms-back svg { width: 16px; height: 16px; }
  .nbp-list { display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
  .home { max-width: 760px; margin: 18px auto 90px; padding: 0 24px; display: flex; flex-direction: column; gap: 16px; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }   /* padding = 헤더(.bar-inner)와 정렬 */
  .home[hidden] { display: none; }   /* hidden 속성이 .home의 display:flex를 이기게 — 안 그러면 home/nbPage/composePage가 겹쳐 쌓임 */
  .home-duo { display: flex; flex-direction: column; gap: 16px; }
  .home-prog-body { display: flex; flex-direction: column; gap: 18px; }
  @media (min-width: 760px) { .home-prog-body { display: grid; grid-template-columns: 0.85fr 1.5fr; gap: 26px; align-items: start; } }
  @media (min-width: 900px) {
    .home { max-width: 1320px; }   /* 헤더 .bar-inner(1320)와 폭 정렬 */
    .home-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  }
  .home-card { border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 20px; background: var(--paper); }
  .home-compose { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); border-radius: 9px; padding: 7px 13px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }
  .home-compose[hidden] { display: none; }   /* hidden 속성이 display:inline-flex를 이기게 — 단어장 페이지엔 '문장 만들기' 숨김 */
  .home-compose:hover { background: var(--accent); color: #fff; }
  .home-compose svg { width: 15px; height: 15px; }
  .home-seeall { display: inline-flex; align-items: center; gap: 3px; border: none; background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }
  .home-seeall:hover { color: var(--accent); }
  .home-seeall svg { width: 15px; height: 15px; }
  .home-card-h { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 12px; }
  .home-card-h-nav { cursor: pointer; }
  .home-card-h-nav:hover > span:first-child { color: var(--accent); }
  .home-today-date { font-size: 12px; font-weight: 500; color: var(--muted); }
  .home-streak { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--accent); }
  .home-streak svg { width: 15px; height: 15px; }
  .home-empty { color: var(--muted); font-size: 13.5px; line-height: 1.6; padding: 4px 0; }
  .home-docs { display: flex; flex-direction: column; gap: 8px; }
  .home-doc, .home-resume-main { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: 1px solid var(--line); background: transparent; border-radius: 12px; padding: 11px 13px; cursor: pointer; font: inherit; color: var(--ink); }
  .home-doc:hover, .home-resume-main:hover { border-color: var(--accent); background: var(--accent-soft); }
  /* 만든 문장 = 박스 하이라이트 없이 플레인 줄 */
  .home-sent-it { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: transparent; padding: 9px 2px; cursor: pointer; font: inherit; color: var(--ink); }
  .home-sent-it + .home-sent-it { border-top: 1px solid var(--line); }
  .home-sent-it:hover .home-doc-t { color: var(--accent); }
  .home-sent-it .home-doc-ico { color: var(--muted); }
  /* 내 문장 홈 개요 = 날짜별 그룹(이번 주만) */
  .home-sent-grp + .home-sent-grp { margin-top: 12px; }
  .home-sent-grp-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--muted); padding: 2px 2px 5px; }
  .home-sent-grp-h span { color: var(--accent); font-weight: 700; }
  .home-word-m { color: var(--muted); font-weight: 400; }
  .home-resume-it { display: flex; align-items: stretch; gap: 8px; }
  .home-resume-main { flex: 1; min-width: 0; }
  .home-done-btn { flex: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 12px; padding: 0 13px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; }
  .home-done-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
  .home-done-btn svg { width: 14px; height: 14px; }
  @media (max-width: 520px) { .home-done-btn span { display: none; } .home-done-btn { padding: 0 11px; } }
  .home-doc-ico { flex: none; width: 22px; height: 22px; color: var(--accent); display: flex; align-items: center; justify-content: center; }
  .home-doc-ico svg { width: 20px; height: 20px; }
  .home-doc-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .home-doc-t { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .home-doc-sub { display: flex; gap: 10px; }
  .home-doc-meta { font-size: 11.5px; color: var(--muted); }
  .home-doc-meta.home-repeat { color: var(--accent); font-weight: 600; }
  .home-chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
  .home-chip { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 4px 11px; }
  .home-range { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 14px; }
  .hr-seg { border: none; background: transparent; color: var(--muted); font: inherit; font-size: 12px; padding: 5px 13px; border-radius: 6px; cursor: pointer; }
  .hr-seg.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
  /* 진척률 2단 — 왼쪽: 기간 콘텐츠 요약 */
  .home-prog-summary { display: flex; flex-direction: column; gap: 12px; }
  .ps-stat { font-size: 13px; color: var(--muted); }
  .ps-stat b { color: var(--ink); font-weight: 700; }
  .ps-mats { display: flex; flex-direction: column; gap: 7px; }
  .ps-mat { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 1px solid var(--line); background: transparent; border-radius: 10px; padding: 8px 11px; cursor: pointer; font: inherit; color: var(--ink); }
  .ps-mat:hover { border-color: var(--accent); background: var(--accent-soft); }
  .ps-mat-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ps-mat-d { font-size: 11px; flex: none; }
  .ps-more { font-size: 12px; color: var(--muted); padding: 2px; }
  .ps-empty { color: var(--muted); font-size: 13px; padding: 8px 0; }
  /* 하위 단위별 브레이크다운(주=일별 / 월=주별 / 년=월별) */
  .ps-grp { margin-bottom: 12px; }
  .ps-grp-h { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: transparent; padding: 4px 0; margin-bottom: 6px; cursor: pointer; font: inherit; color: var(--ink); }
  .ps-grp-h b { font-size: 13.5px; color: var(--ink); font-weight: 700; }
  .ps-chev { width: 15px; height: 15px; flex: none; color: var(--muted); transition: transform .2s; }
  .ps-grp.collapsed .ps-chev { transform: rotate(-90deg); }
  .ps-grp.collapsed .ps-grp-mats { display: none; }
  .ps-grp-amt { font-size: 12px; color: var(--accent); font-weight: 600; white-space: nowrap; }
  .ps-grp-n { font-size: 11.5px; color: var(--muted); margin-left: auto; white-space: nowrap; }
  .ps-grp-mats { display: flex; flex-direction: column; gap: 5px; }
  .ps-extra { display: contents; }
  .ps-extra.hidden { display: none; }
  .ps-more { align-self: flex-start; border: none; background: transparent; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 0; }
  .ps-mat-chip { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 1px solid var(--line); background: transparent; border-radius: 9px; padding: 7px 10px; cursor: pointer; font: inherit; color: var(--ink); }
  .ps-mat-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
  .ps-chip-ico { flex: none; width: 16px; height: 16px; color: var(--accent); display: flex; }
  .ps-chip-ico svg { width: 16px; height: 16px; }
  .ps-chip-t { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 진척률 2단 — 오른쪽: 기간별 시각화(일=날짜셀 / 주·년=막대 / 월=달력) */
  .home-prog-viz { min-width: 0; }
  .pv-head { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
  /* 일 → 날짜별 리스트(구체적 날짜 + 시작~끝 시각) */
  .pv-list { display: flex; flex-direction: column; gap: 7px; }
  .pv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; }
  .pv-row.today { border-color: var(--accent); background: var(--accent-soft); }
  .pv-row-d { font-size: 13.5px; font-weight: 600; color: var(--ink); }
  .pv-row-t { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
  .pv-clock { width: 13px; height: 13px; flex: none; }
  /* 오늘 → 오늘 하나만(날짜 + 시작~끝 시각) */
  .pv-today { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 160px; border: 1px solid var(--line); border-radius: 14px; padding: 26px 20px; text-align: center; }
  .pv-today.on { border-color: var(--accent); background: var(--accent-soft); }
  .pv-today.none { border-style: dashed; color: var(--muted); font-size: 14px; }
  .pv-today-date { font-size: 16px; font-weight: 700; color: var(--ink); }
  .pv-today-time { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: var(--accent); }
  .pv-today-time svg { width: 18px; height: 18px; }
  .pv-today-none { font-size: 13px; color: var(--muted); }
  .pv-cols { display: grid; gap: 8px; height: 190px; }
  .pv-week { grid-template-columns: repeat(7, 1fr); }
  .pv-year { grid-template-columns: repeat(12, 1fr); }
  .pv-col { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; }
  .pv-bar-wrap { flex: 1; width: 62%; max-width: 22px; display: flex; align-items: flex-end; }
  .pv-bar { width: 100%; min-height: 3px; background: var(--line); border-radius: 4px 4px 0 0; transition: height .3s; }
  .pv-bar.on { background: var(--accent); }
  .pv-col.today .pv-bar.on { background: var(--amber); }
  .pv-bar-c { font-size: 10px; color: var(--muted); min-height: 12px; }
  .pv-bar-l { font-size: 10px; color: var(--muted); white-space: nowrap; }
  .pv-bar-d { font-size: 10px; color: var(--ink); font-weight: 600; margin-top: -2px; }
  .pv-col.fut { opacity: .4; }
  .pv-col.today .pv-bar-l { color: var(--accent); font-weight: 700; }
  .pv-cal { margin-top: 0; }
  .pv-foot { margin-top: 10px; font-size: 12px; color: var(--muted); }
  .home-resume { display: flex; flex-direction: column; gap: 8px; }

  #status { font-size: 13px; color: var(--muted); font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }

  .sentence { position: relative; padding: 7px 12px 7px 44px; margin: 2px 0; border-radius: 9px; cursor: pointer; transition: background .15s; font-size: 19px; }
  .sentence:hover { background: var(--sentence-hover); }
  .sentence.active { background: var(--active); box-shadow: inset 3px 0 0 var(--active-border); }
  .sentence.looping { box-shadow: inset 3px 0 0 var(--accent); }
  .sentence .num { position: absolute; left: 12px; top: 10px; font-size: 11px; color: var(--muted); font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; font-variant-numeric: tabular-nums; }
  .sentence .tools { display: flex; gap: 6px; margin-top: 6px; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; opacity: .5; transition: opacity .12s; }
  .sentence:hover .tools, .sentence.active .tools, .sentence.open .tools { opacity: 1; }  /* 항상 보임(누를 수 있게), 호버/재생 시 또렷 */
  .sentence .w { cursor: pointer; border-radius: 3px; padding: 0 1px; }
  .sentence .w:hover { background: var(--accent-soft); }
  .sentence .w.reading { background: var(--active); box-shadow: inset 0 -2px 0 var(--active-border); border-radius: 4px; }
  .sentence .w.anchor { background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }   /* 구 담기 시작 단어 */
  .sentence .w.picked { background: var(--accent-soft); }                                              /* 구로 잡힌 범위 */
  .wpophint { font-size: 11px; color: var(--muted); margin-top: 6px; }
  .wpophead { display: flex; align-items: center; gap: 7px; }
  .wpopipa { color: rgba(255,255,255,.6); font-size: 13px; }
  .wpopspk { display: inline-flex; align-items: center; background: none; border: none; color: rgba(255,255,255,.7); cursor: pointer; padding: 1px; }
  .wpopspk:hover { color: #fff; }
  #wpop { position: fixed; display: none; z-index: 170; background: #23272f; color: #fff;
    font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; font-size: 14px; line-height: 1.45;
    padding: 8px 12px; border-radius: 8px; max-width: 320px; box-shadow: 0 6px 20px rgba(0,0,0,0.28); }
  #wpop b { color: #ffd9c2; margin-right: 6px; }
  .tool { font-size: 11.5px; padding: 3px 4px; border: none; background: none; color: var(--muted); cursor: pointer; transition: color .12s; user-select: none; font-weight: 500; }
  .tool:hover { color: var(--ink); }
  .tool.analyze { color: var(--accent); }

  /* 분석 패널 */
  .panel { display: none; margin-top: 6px; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; font-size: 14px; }
  .p-gram.show { background: var(--ghost); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }   /* 표현만 박스, 해석은 전체해석처럼 맨 텍스트 */
  .sentence.open .panel { display: block; }
  .panel .pt-trans { color: var(--muted); font-size: 17px; line-height: 1.6; font-weight: 400; font-family: 'Spectral', 'Pretendard', sans-serif; }   /* 전체해석(.strans-t)과 동일 */
  .p-trans, .p-gram { display: none; }
  .p-trans.show, .p-gram.show { display: block; }
  .p-trans.show ~ .p-gram.show { margin-top: 10px; }
  .panel h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 12px 0 6px; }
  .panel table { width: 100%; border-collapse: collapse; }
  .panel td { padding: 4px 8px 4px 0; vertical-align: top; border-top: 1px solid var(--line); }
  .panel td.w { font-weight: 700; color: var(--accent); white-space: nowrap; }
  .panel td.note { color: var(--muted); font-size: 12px; }
  .whead { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; }
  .whead h4 { margin: 0; }
  .wtoggle { font-size: 11px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--muted); cursor: pointer; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }
  .wtoggle:hover { border-color: var(--accent); color: var(--accent); }
  .wlist { display: flex; flex-direction: column; gap: 1px; }
  .wrow { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 3px 8px; border-radius: 6px; cursor: pointer; }
  .wrow:hover { background: var(--accent-soft); }
  .wword { font-weight: 700; color: var(--accent); min-width: 130px; flex-shrink: 0; user-select: none; }
  .wmean { font-weight: 400; color: var(--ink); font-size: 13px; visibility: hidden; }
  /* 클릭 고정 / 전체보기 → 오른쪽 인라인으로 고정 표시 */
  .wrow.open .wmean, .wlist.all .wmean { visibility: visible; }
  /* 호버(미고정) → 단어 위로 살짝 플로팅 미리보기 */
  .wrow:not(.open):hover .wmean {
    visibility: visible; position: absolute; left: 8px; bottom: 100%; margin-bottom: 4px;
    background: var(--ink); color: #fff; line-height: 1.45;
    padding: 7px 11px; border-radius: 8px; width: max-content; max-width: 320px;
    box-shadow: 0 5px 16px rgba(0,0,0,0.25); z-index: 80;
  }
  /* 재생 컨트롤 (속도/반복 프리셋, 숫자 입력) */
  .spd, .lp, .cp, .thm { font-size: 12px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--muted); cursor: pointer; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }
  .spd:hover, .lp:hover, .cp:hover, .thm:hover { border-color: var(--accent); color: var(--accent); }
  .spd.on, .lp.on, .cp.on, .thm.on { background: var(--accent); color: #fff; border-color: var(--accent); }
  .spdpresets, .lpchips, .navchips { display: inline-flex; gap: 4px; }
  .numin { width: 54px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; font-family: inherit; background: var(--ghost); color: var(--ink); appearance: textfield; -moz-appearance: textfield; }
  .numin::placeholder { color: var(--muted); }
  .numin.on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }   /* 직접 입력값이 활성(선택)됐을 때 */
  .numin.on::placeholder { color: rgba(255,255,255,.7); }
  .numin::-webkit-outer-spin-button, .numin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }   /* 옛날식 위아래 화살표 제거 */
  .panel .gp { padding: 6px 0; border-top: 1px solid var(--line); }
  .panel .gp b { color: var(--ink); }
  .panel .gp .ex { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; font-style: italic; }
  .panel .pfoot { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
  .panel .badge { background: var(--accent-soft); color: var(--accent); border-radius: 5px; padding: 2px 7px; font-weight: 600; }
  .panel .relink { color: var(--muted); cursor: pointer; text-decoration: underline; }
  .panel .relink:hover { color: var(--accent); }
  .spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: sp .7s linear infinite; vertical-align: middle; }
  @keyframes sp { to { transform: rotate(360deg); } }
  /* 화면 가운데 원형 로더 */
  #loadovl { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; }
  #loadovl.on { display: flex; opacity: 1; }
  .loadcard { display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .ringwrap { position: relative; width: 120px; height: 120px; }
  .loadring { width: 120px; height: 120px; transform: rotate(-90deg); }
  .lr-track { fill: none; stroke: var(--line); stroke-width: 7; }
  .lr-bar { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset .3s ease; }
  .loadpct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; font-size: 27px; font-weight: 700; color: var(--ink); }
  .loadlbl { font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; font-size: 15px; color: var(--muted); letter-spacing: .3px; }
  /* 콘텐츠 등장 */
  @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .fade-in { animation: fadeUp .28s ease both; }
  @keyframes popIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
  #wpop.pop { animation: popIn .12s ease both; transform-origin: top left; }
  .platitem:active, .tgl:active, .tool:active, .srcicon-btn:active { transform: scale(.97); }
  @media (prefers-reduced-motion: reduce) {
    .fade-in, #wpop.pop, #loadovl, .lr-bar { animation: none !important; transition: opacity .2s ease !important; }
  }

  .doctitle { font-family: 'Spectral', 'Pretendard', sans-serif; font-size: 31px; font-weight: 500; color: var(--ink); line-height: 1.18; letter-spacing: -.01em; margin: 2px 0 20px; padding: 0 12px 0 44px; }
  .sentence.heading .num, .sentence.heading .tools, .sentence.heading .panel { display: none; }
  .sentence.heading { margin-top: 22px; padding-top: 2px; cursor: default; }
  .sentence.heading .stext { font-family: 'Spectral', 'Pretendard', sans-serif; font-weight: 700; font-size: 21px; color: var(--ink); }
  .sentence.parastart { margin-top: 15px; }
  .artimg { display: block; width: min(760px, calc(100% - 56px)); margin: 24px 0 0 44px; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }   /* 문장과 같은 좌측 기준 왼쪽정렬 */
  .artcap { margin: 8px 0 6px; padding: 0 12px 0 44px; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; font-size: 13px; color: var(--muted); line-height: 1.5; text-align: left;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* 왼쪽정렬·가능하면 1줄, 길면 최대 2줄 */
  .speaker-label { font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .3px; margin: 20px 0 2px; padding-left: 44px; display: flex; align-items: center; gap: 5px; }
  .speaker-label::before { content: ""; display: inline-block; width: 12px; height: 12px; flex-shrink: 0; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z'/%3E%3C/svg%3E") center/contain no-repeat; }
  .pagebreak { text-align: center; color: var(--muted); font-size: 11px; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; letter-spacing: 1px; margin: 20px 0; text-transform: uppercase; }
  .pagebreak::before, .pagebreak::after { content: ""; display: inline-block; width: 40px; height: 1px; background: var(--line); vertical-align: middle; margin: 0 10px; }

  .playerbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: var(--paper); border-top: 1px solid var(--line); padding: 9px 22px; display: none; align-items: center; justify-content: center; gap: 16px; box-shadow: 0 -2px 12px rgba(0,0,0,0.05); font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }
  .transport { display: inline-flex; align-items: center; gap: 6px; }
  .loopstep, .navstep { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
  .step { width: 26px; height: 26px; border: 1px solid var(--line); background: var(--paper); border-radius: 7px; cursor: pointer; font-size: 16px; line-height: 1; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }
  .step:hover { border-color: var(--accent); color: var(--accent); }
  .step.on { background: var(--accent); color: #fff; border-color: var(--accent); }
  #loopNum { min-width: 36px; text-align: center; font-weight: 600; color: var(--ink); }
  .playerbar.show { display: flex; }
  .pbtn { border: none; background: var(--accent); color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; display: flex; align-items: center; justify-content: center; transition: transform .1s, background .15s; flex-shrink: 0; }
  .pbtn svg { width: 16px; height: 16px; display: block; }
  .pbtn:hover { background: #9a3412; }
  .pbtn:active { transform: scale(.93); }
  .pbtn.sm { width: 36px; height: 36px; background: none; color: var(--muted); border: none; }
  .pbtn.sm svg { width: 14px; height: 14px; }
  .pbtn.sm:hover { color: var(--ink); background: var(--ghost); }
  .pbtn.sm.on { background: var(--accent-soft); color: var(--accent); border: none; }
  .pinfo { font-size: 12.5px; color: var(--muted); position: absolute; right: 22px; }
  .pinfo b { color: var(--ink); }
  .pb-slot { display: none; }   /* 데스크탑: 기어 시트 슬롯 숨김(부차 컨트롤은 재생바에 둠) */
  /* 전체 해석(바이링궐) */
  .sright { display: none; }
  .strans-t, .strans-g { display: none; }
  .wrap.show-tr .strans-t { display: block; }
  .wrap.show-gr .strans-g { display: block; }
  .strans-t { color: var(--muted); font-size: 15px; line-height: 1.62; margin-top: 8px; padding-left: 14px; border-left: 1.5px solid var(--line); font-family: 'Pretendard', sans-serif; }
  .strans-g { margin-top: 8px; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }
  .strans-g h5 { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 0 0 4px; }
  /* 전체해석: 원문 한 줄(전체너비), 그 바로 아래에 해석(세로 스택). 해석이 한눈에 들어오게 넓게 */
  .wrap.bi { max-width: 1320px; }
  .wrap.bi .sright { display: block; }
  .wrap.bi .tool[data-act=trans] { pointer-events: none; opacity: .4; }   /* 전체해석 ON이면 문장별 해석 비활성 */
  /* 요약 배너 */
  .loopcount { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
  .loopcount select { padding: 3px 6px; font-size: 12px; }
  /* 내 정리 패널 */
  .studyPanel { position: fixed; top: 0; right: -380px; width: 360px; max-width: 88vw; height: 100vh; z-index: 170; background: var(--paper); border-left: 1px solid var(--line); box-shadow: -4px 0 20px rgba(0,0,0,0.08); transition: right .22s; display: flex; flex-direction: column; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }
  .studyPanel.open { right: 0; }
  .tgl.flash { background: var(--accent); color: #fff; border-color: var(--accent); }
  .sp-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); font-weight: 700; }
  .sp-body { flex: 1; overflow-y: auto; padding: 12px 18px 40px; }
  .sp-body h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); margin: 16px 0 8px; }
  .sp-body h4 span { color: var(--muted); }
  .sp-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 17.5px; line-height: 1.55; }
  .sp-item b { color: var(--accent); }
  .sp-ctx { display: block; color: var(--muted); font-size: 12px; font-style: italic; margin-top: 3px; }
  .sp-del { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 13px; flex-shrink: 0; }
  .sp-del:hover { color: var(--accent); }
  .sp-empty { color: var(--muted); text-align: center; padding: 40px 10px; line-height: 1.7; }
  /* 내 학습 노트: 탭(단어장/내 문장) + 일·주·월 토글 + 날짜 그룹 */
  .nb-tabs { display: flex; gap: 6px; margin: 2px 0 10px; }
  .nb-tab { flex: 1; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 6px; border-radius: 9px; cursor: pointer; }
  .nb-tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
  .nb-segs { display: inline-flex; gap: 4px; margin: 0 0 12px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; }
  .nb-seg { border: none; background: transparent; color: var(--muted); font: inherit; font-size: 15px; padding: 7px 16px; border-radius: 7px; cursor: pointer; }
  .nb-seg.on { background: var(--paper-2, rgba(0,0,0,.05)); color: var(--accent); font-weight: 700; }
  .nb-grp { margin-bottom: 16px; }
  .nb-grp-h { font-size: 15px; font-weight: 700; color: var(--ink); margin: 18px 0 6px; display: flex; align-items: baseline; gap: 6px; }
  .nb-grp-h span { color: var(--muted); font-weight: 500; font-size: 13px; }
  .nb-item-main { flex: 1; min-width: 0; }
  .nb-kind { display: inline-block; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft, rgba(200,120,40,.12)); border-radius: 5px; padding: 2px 8px; margin-right: 6px; vertical-align: middle; }
  .nb-exn { display: inline-block; font-size: 11px; color: var(--muted); margin-left: 6px; }
  .nb-ex { margin-top: 5px; border-left: 2px solid var(--line); padding-left: 9px; }
  .nb-ex-line { color: var(--muted); font-size: 14px; font-style: italic; line-height: 1.55; margin: 2px 0; }
  .nb-sent-t { color: var(--ink); font-size: 18px; line-height: 1.55; }
  .nb-sent-o { color: var(--muted); font-size: 14px; margin-top: 3px; }
  .nb-fb { color: var(--muted); font-size: 14px; line-height: 1.55; margin-top: 5px; border-left: 2px solid var(--accent); padding-left: 9px; }
  .nb-reshadow { margin-top: 7px; border: 1px solid var(--line); background: transparent; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 7px; cursor: pointer; }
  .nb-reshadow:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
  .nb-sim { margin-top: 7px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .nb-sim-lbl { font-size: 11px; font-weight: 700; color: var(--accent); }
  .nb-sim-it { font-size: 11.5px; color: var(--muted); background: var(--accent-soft, rgba(200,120,40,.10)); border-radius: 6px; padding: 2px 8px; cursor: help; }
  .compose-sim { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 11px; text-align: left; }
  .compose-sim-h { font-size: 12.5px; font-weight: 700; color: var(--accent); margin-bottom: 7px; }
  .compose-sim-it { font-size: 13px; color: var(--ink); line-height: 1.5; padding: 4px 0; }
  .compose-sim-r { display: block; font-size: 11.5px; color: var(--muted); font-style: italic; }
  .savebtn { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 13px; margin-right: 5px; padding: 0; }
  .savebtn:hover, .savebtn.saved { color: var(--accent); }
  .wpopsave { display: block; margin-top: 6px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 6px; cursor: pointer; }
  .wpopsave:hover { background: rgba(255,255,255,.12); }

  /* ---------- 운전 모드 (핸즈프리 포커스 — 전역 테마(다크/라이트)를 따름) ---------- */
  .driver { position: fixed; inset: 0; z-index: 150; display: none; flex-direction: column;
    color: var(--ink);
    background: radial-gradient(130% 62% at 50% 124%, color-mix(in srgb, var(--accent) 8%, var(--bg)), var(--bg) 60%); }
  .driver.on { display: flex; }
  /* 데스크탑: 메인 헤더와 동일한 구성·시작점(콘텐츠 폭 1320 가운데 컬럼, 좌우 24px) */
  .drv-top { max-width: 1320px; width: 100%; margin: 0 auto; display: flex; align-items: center; gap: 8px 10px; padding: 13px 24px; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .drv-brand { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; display: flex; align-items: center; gap: 9px; cursor: pointer; color: var(--ink); font-family: 'Pretendard', -apple-system, sans-serif; }
  .drv-brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
  #drvHome { display: none; }   /* 데스크탑: 브랜드가 홈 역할 → 아이콘 숨김 */
  .drv-iconbtn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 999px; display: inline-flex; transition: all .15s; }
  .drv-iconbtn:hover { color: var(--ink); background: var(--ghost-hi); }
  .drv-iconbtn svg { width: 19px; height: 19px; display: block; }
  #drvCount { font-weight: 600; letter-spacing: .3px; color: color-mix(in srgb, var(--ink) 72%, transparent); margin-right: auto; }   /* 데스크탑: 메뉴·닫기를 우측으로 밀기 */
  .drv-menu { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
  .drv-gear { display: none; }   /* 데스크탑: 설정 인라인이라 기어 숨김 */
  .drv-settings { display: flex; align-items: center; gap: 6px; }
  .drv-settings select { font-size: 13px; padding: 5px 8px; max-width: 124px; border: 1px solid transparent; border-radius: 9px; background: var(--ghost); color: var(--ink); font-family: inherit; cursor: pointer; transition: background .15s; }
  .drv-settings select:hover { background: var(--ghost-hi); }
  .langicon { color: var(--muted); }
  .drv-toggles { display: flex; gap: 6px; }
  .drv-tgl { font-size: 13px; font-weight: 600; padding: 6px 13px; border: none; border-radius: 999px; background: var(--ghost); color: var(--muted); cursor: pointer; font-family: inherit; transition: all .15s; }
  .drv-tgl:hover { color: var(--ink); background: var(--ghost-hi); }
  .drv-tgl.on { background: var(--accent); color: #fff; }
  .drv-exit { background: none; border: none; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; padding: 6px 9px; border-radius: 999px; transition: all .15s; }
  .drv-exit:hover { color: var(--ink); background: var(--ghost-hi); }
  .drv-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px 28px; text-align: center; overflow-y: auto; }
  .drv-text { font-family: 'Spectral', 'Pretendard', sans-serif; font-weight: 300; color: var(--ink); font-size: clamp(28px, 6vw, 50px); line-height: 1.42; letter-spacing: -0.01em; max-width: 1080px; }
  .drv-text .w.reading { color: var(--active-border); box-shadow: inset 0 -2px 0 var(--active-border); }   /* 읽는 단어 = 앰버 밑줄(절제) */
  .drv-empty { font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; font-weight: 400; color: var(--muted); font-size: clamp(16px, 3.4vw, 22px); letter-spacing: 0; }   /* 자료 없을 때 안내 문구 */
  /* 단어 가리기: 단어 하나하나를 블록으로 가림(귀로만 쉐도잉) */
  .drv-text.masked { cursor: pointer; }
  .drv-text.masked .w { background: var(--ghost-hi); color: transparent; border-radius: 5px; box-shadow: none; }
  .drv-text.masked .w.reading { background: none; color: var(--active-border); box-shadow: inset 0 -2px 0 var(--active-border); }   /* 읽는 단어 드러남+밑줄 */
  .drv-text.masked .w.reveal { background: transparent; color: var(--ink); }   /* 탭한 단어 하나만 드러남 */
  .drv-text.masked .w.reading.reveal { background: none; color: var(--active-border); }
  .drv-trans { font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; color: var(--muted); font-size: clamp(17px, 3.6vw, 27px); line-height: 1.45; max-width: 920px; }
  .drv-trans:empty { display: none; }
  /* 자료 미선택 상태 — 운전 모드 안에서 바로 자료 선택(앱처럼 자족적인 화면) */
  .drv-start { display: none; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 460px; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }
  .drv-start .srcbox { width: 100%; }   /* 입력칸 묶음을 카드 폭에 맞춰(모바일 넘침 방지) */
  .driver.empty .drv-start { display: flex; }
  .driver.empty .drv-text, .driver.empty .drv-trans { display: none; }
  .driver.empty .drv-panel, .driver.empty .drv-toggles { display: none; }   /* 자료 없으면 해석/가리기·재생 컨트롤 숨김 */
  /* 데모(랜딩 임베드): 최소 기능만 — 문서 액션 서브바(전체해석·요약·내정리·운전모드전환·＋새자료)와
     무거운 설정은 통째로 감춤. 핵심(문장 재생·반복·문장별 해석·단어 탭)만 남김. */
  body.demo .subbar, body.demo #loopCustom, body.demo .hdr-login, body.demo #themeBtn,
  body.demo .drv-toggles, body.demo .drv-theme,
  body.demo #drvHome, body.demo #drvExit { display: none !important; }
  /* 데모 사용법 힌트 — 데모에서만 표시 */
  .demo-hint { display: none; }
  body.demo .demo-hint { display: flex; justify-content: center; margin: 10px 0 0; }
  body.demo .demo-hint .dh-pill { font-family: 'Schibsted Grotesk','Pretendard',-apple-system,sans-serif; font-size: 12.5px; color: var(--muted); padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
  /* 데모: 헤더·운전 설정 모두 '언어 + 음성 선택'만 남기고 나머지(테마·속도·묶어읽기)는 숨김.
     → 각 플레이어(일반·운전)에서 직접 언어·목소리를 바꿀 수 있게 함. */
  body.demo .controls .ctrl:not(:has(#ttsVoice)):not(:has(#uiLang)) { display: none !important; }
  /* 데모: 기어 제거 → 음성 선택을 헤더에 직접 노출(부드러운 등장 애니메이션) */
  body.demo #hdrGear { display: none !important; }
  body.demo #drvGear { display: none !important; }   /* 드라이빙 모드 데모에서도 기어 제거 */
  .hdr-voice { display: inline-flex !important; align-items: center; gap: 6px; flex: none; animation: hdrVoiceIn .45s cubic-bezier(.2,.7,.2,1) both; }
  .hdr-voice label { font-size: 11px; color: var(--muted); margin: 0; white-space: nowrap; }
  .hdr-voice select { max-width: 128px; }
  @keyframes hdrVoiceIn { from { opacity: 0; transform: translateY(-7px) scale(.96); } to { opacity: 1; transform: none; } }
  .drv-start-title { font-size: clamp(19px, 4.4vw, 26px); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; text-align: center; }
  /* 하단 컨트롤 패널 — 떠 있는 프로스트 카드 */
  .drv-panel { background: var(--ghost); border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px var(--shadow); padding: 11px 16px max(11px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  /* 세그먼트 컨트롤 (이동/반복) — 넓은 화면에선 가운데 카드처럼 */
  .drv-panel > * { width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; }
  .drv-prog { height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
  .drv-prog i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; transition: width .3s; }
  /* 항상 보이는 컴팩트 컨트롤 — 이동 세그먼트 + 반복 스테퍼(접기 없이 바로 조작) */
  .drv-quick { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; padding: 2px 0; font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; }
  .drv-q-lbl { font-size: 10px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .14em; margin-right: 9px; }
  .drv-seg { display: inline-flex; align-items: center; }
  .drv-seg-track { display: inline-flex; background: var(--ghost); border-radius: 11px; padding: 3px; gap: 2px; }
  .drv-seg-opt { border: none; background: none; color: var(--muted); font-size: 13.5px; font-weight: 600; padding: 6px 15px; border-radius: 8px; cursor: pointer; font-family: inherit; transition: color .15s, background .15s; }
  .drv-seg-opt:hover { color: var(--ink); }
  .drv-seg-opt.on { background: var(--accent); color: #fff; }
  .drv-seg-opt.num { padding: 6px 12px; min-width: 30px; font-variant-numeric: tabular-nums; }
  /* 트랜스포트 — 절제: 이전/다음 맨 아이콘, 재생만 앰버 원형 */
  .drv-controls { display: flex; gap: 40px; align-items: center; justify-content: center; }
  .drv-btn { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 7px;
    border: none; background: none; box-shadow: none; color: var(--ink); cursor: pointer; padding: 0;
    font-family: 'Schibsted Grotesk', 'Pretendard', -apple-system, sans-serif; font-size: 11px; font-weight: 500; transition: transform .12s; }
  .drv-btn:hover { background: none; box-shadow: none; }
  .drv-btn:active { transform: scale(.94); }
  .drv-btn .drv-lbl { color: var(--muted); }
  .drv-btn .drv-ico { display: flex; align-items: center; justify-content: center; }
  .drv-btn .drv-ico svg { width: 28px; height: 28px; display: block; }
  .drv-btn.play .drv-ico { width: 68px; height: 68px; border-radius: 50%; background: var(--accent); color: #fff;
    box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--accent) 85%, transparent); }
  .drv-btn.play .drv-ico svg { width: 26px; height: 26px; }
  .drv-btn.play .drv-lbl { display: none; }

  /* ---------- 반응형 (모바일/태블릿) ---------- */
  @media (max-width: 820px) {
    .topbar, .subbar { padding-top: 9px; padding-bottom: 9px; }
    .bar-inner { gap: 10px 12px; padding: 0 14px; }
    .controls { gap: 10px 14px; }
    .wrap { padding: 22px 14px 130px; }
    .empty { padding: 36px 16px 80px; }
    .sentence { font-size: 17px; padding: 7px 10px 7px 34px; }
    .sentence .num { left: 8px; }
    .doctitle, .docinfo, .speaker-label, .artcap { padding-left: 34px; }
    .doctitle { font-size: 22px; }
    .artimg { width: calc(100% - 44px); margin-left: 34px; }
    .playerbar { gap: 14px; padding: 10px 14px; }
    .pinfo { position: static; }
  }
  @media (max-width: 768px) {                          /* 태블릿 경계 · 이 아래는 바로 모바일(앱바+기어) 레이아웃 */
    /* 모바일: 빈 화면 = 기능 리스트만(picker 카드가 입력 안내 역할) */
    .empty { padding: 30px 18px 60px; }
    .empty .feats { gap: 12px; }
    .empty .feats li { font-size: 13px; }
    /* 모바일: 앱 상단바 — 브랜드(좌) + 설정 기어(우), 읽기설정은 기어 시트로 접어 깔끔하게 */
    .topbar, .subbar { padding: 7px 0; }
    .bar-inner { justify-content: center; gap: 6px 10px; padding: 0 16px; }   /* 서브바 등 기본 */
    .topbar .bar-inner { position: relative; justify-content: space-between; flex-wrap: nowrap;
      padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }   /* 로고(좌)·기어(우) 가장자리 여백 + 노치 안전영역 */
    .brand { font-size: 18px; line-height: .88; }   /* 모바일: 스택(두 줄) */
    .brand .es-says { display: block; }
    .hdr-gear { display: inline-flex; }
    /* 헤더 아이콘 버튼 터치영역 확대(베이스 규칙보다 뒤라 우선 적용) */
    .hdr-gear, .hdr-acct { padding: 9px; }
    .hdr-logout { padding: 9px; }
    .hdr-gear svg, .hdr-acct svg, .hdr-logout svg { width: 19px; height: 19px; }
    .controls {
      margin-left: 0; justify-content: flex-start;   /* 시트 모드: 데스크탑 우측정렬 리셋 */
      position: absolute; top: calc(100% + 8px); right: 4px; z-index: 60;
      width: auto; min-width: 250px; max-width: calc(100vw - 24px);
      flex-direction: column; align-items: stretch; gap: 13px;
      background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
      padding: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.18); display: none; }
    .controls.open { display: flex; }
    .controls .ctrl { width: 100%; justify-content: space-between; flex-wrap: wrap; }
    .ctrl { font-size: 12px; gap: 5px; flex-wrap: wrap; justify-content: center; }
    .ctrl label { font-size: 11px; }
    .spdpresets { display: none; }                     /* 슬라이더로 충분 → 프리셋 칩 숨겨 공간 절약 */
    #speed { flex: 1; min-width: 66px; max-width: 120px; }
    select { padding: 4px 7px; font-size: 12px; max-width: 130px; }
    .spd, .lp, .cp { padding: 2px 7px; font-size: 11px; }
    .numin { width: 58px; }   /* '직접/Custom/Manual/Eigene' 안 잘리게 */
    .tgl, .uploadbtn { padding: 8px 13px; font-size: 13px; }
    body.has-doc #newBtn { display: none; }   /* 모바일: 읽는 중엔 '새 자료' 숨겨 서브바 정리(추가는 로고→홈에서) */
    .sentence { font-size: 16px; padding-left: 30px; }
    .strans-t, .panel .pt-trans { font-size: 15px; }
    .doctitle, .docinfo, .speaker-label, .artcap { padding-left: 30px; }
    .doctitle { font-size: 20px; }
    .artimg { width: calc(100% - 40px); margin-left: 30px; }
    /* 모바일 재생바: 핵심 트랜스포트·반복칩 터치타겟 확대(부차 컨트롤은 기어 시트로 이동) */
    .playerbar { flex-wrap: wrap; justify-content: center; gap: 9px 12px; padding: 9px 12px max(9px, env(safe-area-inset-bottom)); }
    .transport { gap: 14px; }
    /* 표준 배치: 이전 · 재생(가운데·hero) · 다음 (DOM 불변, order만) */
    #prev { order: 1; }
    #playPause { order: 2; }
    #next { order: 3; }
    .pbtn { width: 60px; height: 60px; }        /* 재생 = hero */
    .pbtn svg { width: 22px; height: 22px; }
    .pbtn.sm { width: 48px; height: 48px; }       /* 이전·다음 */
    .pbtn.sm svg { width: 19px; height: 19px; }
    /* 반복 행으로 옮겨온 반복토글(↺) — 칩 톤으로 맞춤 */
    .pb-loopslot .pbtn.sm { width: 38px; height: 38px; border-radius: 9px; background: var(--paper); border: 1px solid var(--line); color: var(--muted); }
    .pb-loopslot .pbtn.sm svg { width: 16px; height: 16px; }
    .pb-loopslot .pbtn.sm.on { background: var(--accent); color: #fff; border-color: var(--accent); }
    .loopstep { flex-wrap: nowrap; justify-content: center; font-size: 13px; gap: 6px; }   /* 한 줄: 반복 ↺ 2 3 4 직접 후 다음 */
    .loopstep .lp-mhide { display: none; }   /* 모바일: ∞·5·10·20 숨김 → 2·3·4만 */
    .loopstep .lpchips { gap: 5px; }
    .navstep { font-size: 13px; }
    .spd, .lp, .cp { min-height: 38px; padding: 0 14px; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
    .numin { height: 38px; box-sizing: border-box; }
    .pinfo { display: none; }
    .pb-slot { display: flex; }   /* 기어 시트로 옮겨온 부차 컨트롤 노출(모바일) */
    .pb-slot .pb-slotbox { display: inline-flex; align-items: center; gap: 4px; }
    .pb-slot .navstep, .pb-slot .navchips { flex-wrap: wrap; }
    .ringwrap, .loadring { width: 88px; height: 88px; }
    .loadpct { font-size: 20px; }
    .sourcepick { margin: 16px 12px 0; padding: 16px; }
    /* 운전 모드: 모바일도 메인 헤더와 동일 구성·시작점(좌우 12px) — 브랜드(좌) + 기어(우) */
    .driver .drv-top { position: relative; flex-wrap: nowrap; padding: 9px 12px; gap: 8px; }
    .driver .drv-brand { font-size: 16px; }        /* 홈 = 브랜드 클릭(메인과 동일) */
    .driver #drvCount { font-size: 13px; }
    .driver .drv-gear { display: inline-flex; }   /* 모바일: 설정은 기어 시트로 */
    .driver .drv-menu {                            /* 설정/토글 → 떠 있는 시트(기본 숨김) */
      position: absolute; top: calc(100% + 4px); right: 8px; z-index: 5;
      flex-direction: column; align-items: stretch; gap: 12px;
      min-width: 215px; padding: 14px;
      background: var(--sheet); border: 1px solid var(--line); border-radius: 16px;
      box-shadow: 0 14px 36px var(--shadow); display: none; }
    .driver .drv-menu.open { display: flex; }
    .driver .drv-menu .drv-settings { flex-wrap: wrap; gap: 8px; }
    .driver .drv-menu .drv-settings select { flex: 1; max-width: none; font-size: 14px; padding: 8px 10px; }
    .driver .drv-menu .drv-toggles { gap: 8px; }
    .driver .drv-menu .drv-tgl { flex: 1; text-align: center; padding: 9px 13px; font-size: 14px; }
    .driver .drv-body { gap: 14px; padding: 16px; }
    .driver .drv-panel { padding: 9px 10px max(9px, env(safe-area-inset-bottom)); gap: 7px; border-radius: 18px 18px 0 0; }
    .driver .drv-quick { gap: 10px 14px; }
    .driver .drv-q-lbl { font-size: 11px; }
    .driver .drv-seg-opt { padding: 6px 13px; font-size: 13px; }
    .driver .drv-seg-opt.num { padding: 6px 10px; min-width: 28px; }
    .driver .drv-controls { gap: 30px; }
    .driver .drv-btn { font-size: 11px; gap: 6px; }
    .driver .drv-btn .drv-ico svg { width: 25px; height: 25px; }
    .driver .drv-btn.play .drv-ico { width: 62px; height: 62px; }
    /* 홈 대시보드 모바일: 폭 확보 + 밀도 완화(꽉 찬 느낌 개선) */
    .starthero { margin: 24px auto 0; padding: 0 4px; }
    .start-title { font-size: 23px; line-height: 1.22; }
    .start-sub { font-size: 13.5px; margin-top: 9px; }
    .home { padding: 0 16px; gap: 14px; }
    .home-card { padding: 16px 15px 18px; }
    .sourcepick { padding: 16px 15px; margin-top: 16px; }
    .srcbox { flex-wrap: wrap; }
    .srcurl { flex: 1 1 0; }
    .srcgo { flex: 1 1 100%; }          /* 불러오기 = 입력칸 아래 전체폭(입력칸 잘림 방지) */
  }
  @media (max-width: 380px) {                          /* 아주 작은 폰(iPhone SE/미니, 구형 갤럭시) */
    .brand { font-size: 17px; }
    .ctrl label { font-size: 10px; }
    select { max-width: 116px; font-size: 11px; }
    .tgl, .uploadbtn { padding: 7px 11px; font-size: 12px; }
    .sentence { font-size: 15px; padding-left: 28px; }
    .doctitle, .docinfo, .speaker-label, .artcap { padding-left: 28px; }
    .pbtn { width: 48px; height: 48px; }       /* 아주 작은 폰도 터치타겟 유지 */
    .pbtn.sm { width: 42px; height: 42px; }
    .driver .drv-panel { padding: 8px 9px max(8px, env(safe-area-inset-bottom)); gap: 6px; }
    .driver .drv-seg-opt { padding: 5px 11px; font-size: 12px; }
    .driver .drv-seg-opt.num { padding: 5px 8px; min-width: 26px; }
    .driver .drv-q-lbl { font-size: 10px; }
    .driver .drv-btn { padding: 7px 5px; font-size: 10.5px; border-radius: 12px; }
    .driver .drv-btn svg { width: 20px; height: 20px; }
  }