/* ============================================================
   영어회화 학습 앱 · 공용 스타일시트  (english_2.html · admin.html 공용)
   ------------------------------------------------------------
   ▶ 디자이너 안내: 색·폰트 등 전체 테마는 아래 :root 의
     '디자인 토큰(CSS 변수)' 만 바꾸면 앱 전체에 반영됩니다.
     개별 컴포넌트 스타일은 그 아래 섹션에서 조정하세요.
     (화면 구조/마크업은 JS(app 로직)에서 생성되므로 CSS로는 색·간격·폰트 중심 조정)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&family=Gothic+A1:wght@400;500;600;700;800&display=swap');

  :root {
    /* B · 스카이 + 클레이: 또렷한 블루 기본색 + 따뜻한 클레이 보조. */
    --bg:oklch(0.966 0.007 245); --surface:#fff; --surface2:oklch(0.945 0.013 245);
    --border:oklch(0.9 0.017 245); --accent:oklch(0.58 0.15 250); --accent2:oklch(0.65 0.155 48);
    --text:oklch(0.32 0.025 258); --muted:oklch(0.6 0.02 255); --red:oklch(0.585 0.19 25); --green:oklch(0.61 0.135 158);
    --diff-del:oklch(0.585 0.19 25 / 0.15); --diff-add:oklch(0.61 0.135 158 / 0.15);
    --shadow:0 5px 14px oklch(0.5 0.06 250 / 0.16);
  }
  /* 유동형 루트 폰트: 폰(작게)~데스크톱(크게) 자동 확대. 모든 rem 값이 함께 커집니다. */
  html { font-size:clamp(18px, 1rem + 0.55vw, 22px); }
  * { box-sizing:border-box; margin:0; padding:0; }
  /* 앱처럼 동작하도록: 길게 눌러도 글자 선택·복사/공유 메뉴가 안 뜨게 한다.
     단, 실제 입력(입력창·textarea)과 '.selectable' 로 표시한 곳은 선택·복사 허용. */
  body { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
  input, textarea, [contenteditable="true"], .selectable, .selectable *,
  td, th {   /* 관리자 표(이메일·아이디·로그)는 복사 가능해야 함 */
    -webkit-user-select:text; user-select:text; -webkit-touch-callout:default;
  }
  /* ── 하늘·바다 풍경 배경 (이미지 파일 없이 CSS로 그림) ──
     파란 하늘 → 옅은 수평선 → 바다, 은은한 구름과 작은 달.
     모바일에서도 고정되도록 body::before(position:fixed) 사용. */
  body {
    color:var(--text); font-family:'Nunito','Gothic A1',sans-serif; min-height:100vh;
    display:flex; flex-direction:column; align-items:center;
    background-color:#cfe9f8;
  }
  body::before {
    content:''; position:fixed; inset:0; z-index:-1;
    background:
      /* 상단 글자 가독용 옅은 밝기 */
      linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.10) 14%, rgba(255,255,255,0) 30%),
      /* ★ 실제 사진 (sky.jpg 가 있으면 이 층이 아래 그림을 덮음) */
      url('sky.jpg') center center / cover no-repeat,
      /* 아래는 사진이 없을 때 임시로 보이는 CSS 하늘·바다 그림 */
      radial-gradient(circle at 66% 12%, rgba(255,255,255,0.95) 0 5px, rgba(255,255,255,0) 8px) no-repeat,
      radial-gradient(58% 7% at 28% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%) no-repeat,
      radial-gradient(46% 6% at 76% 23%, rgba(255,255,255,0.50), rgba(255,255,255,0) 70%) no-repeat,
      radial-gradient(66% 8% at 48% 46%, rgba(255,255,255,0.45), rgba(255,255,255,0) 70%) no-repeat,
      linear-gradient(180deg,
        #4a93cf 0%, #6fabd9 22%, #9cc7e4 42%, #d3e7f1 57%, #e8f2f8 61%,
        #bcd2e1 63%, #6f9dc2 73%, #427aab 87%, #2d6299 100%);
  }

  /* 전체 콘텐츠 폭: 화면에 맞춰 넓어지는 적응형(모바일=전체폭, 데스크톱=최대 900px). */
  #main { width:100%; max-width:900px; min-height:100vh; display:flex; flex-direction:column; padding:0 1.2rem; }

  /* ── SELECT ── */
  .select-screen { width:100%; min-height:100vh; min-height:100dvh; padding:2.5rem 0; display:flex; flex-direction:column; gap:2rem; }
  .select-title {
    font-family:'Gothic A1','Fredoka',sans-serif; font-weight:800;
    font-size:1.85rem; line-height:1.2; letter-spacing:-0.02em; margin-bottom:0.2rem;
    color:#1f5fa6;   /* 폴백 */
    background:linear-gradient(135deg,#154c8c 0%,#2f86cf 55%,#5ab0d4 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 2px 7px rgba(255,255,255,0.55)) drop-shadow(0 1px 2px rgba(20,60,110,0.25));
  }
  .select-sub { font-size:0.7rem; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; }
  .section-group { display:flex; flex-direction:column; gap:0.5rem; }
  .section-label { font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); padding-bottom:0.3rem; border-bottom:1px solid var(--border); margin-bottom:0.2rem; }
  .q-cards { display:flex; flex-direction:column; gap:0.6rem; margin-top:0.5rem; }
  .q-card { background:var(--surface); border:2px solid var(--border); border-radius:22px; padding:1rem 1.2rem; box-shadow:var(--shadow); transition:border-color 0.2s,box-shadow 0.2s,transform 0.2s; display:flex; align-items:flex-start; gap:1rem; }
  .q-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 20px oklch(0.5 0.06 250 / 0.2); }
  .q-card.done { background:oklch(0.96 0.05 150); border-color:oklch(0.82 0.11 150); }
  .q-card.done:hover { border-color:oklch(0.72 0.14 150); }
  .q-num { font-size:0.62rem; color:var(--accent); letter-spacing:0.12em; text-transform:uppercase; padding-top:2px; white-space:nowrap; flex-shrink:0; }
  .q-card-content { flex:1; min-width:0; }
  .q-card-ko { font-family:'Fredoka','Gothic A1',sans-serif; font-weight:400; font-style:normal; font-size:0.95rem; color:var(--text); margin-bottom:0.25rem; }
  .q-card-meta { display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem 0.8rem; margin-top:0.4rem; font-size:0.65rem; }
  .q-stat-line { flex-basis:100%; }   /* 라이팅·스피킹 통계를 각각 한 줄에 */
  .q-card-actions { display:flex; gap:0.6rem; margin-top:0.8rem; }
  .q-act-btn { flex:1; min-width:0; padding:0.7rem 0.9rem; border-radius:999px; font-family:'Nunito','Gothic A1',sans-serif; font-weight:700; font-size:0.9rem; letter-spacing:.02em; cursor:pointer; border:2px solid var(--accent); background:var(--surface2); color:var(--accent); transition:all .15s; white-space:nowrap; }
  .q-act-btn:hover { background:var(--accent); color:#fff; }
  .q-act-btn:active { transform:scale(0.98); }
  .q-act-btn.write { background:var(--accent); color:#fff; }
  .q-act-btn.write:hover { filter:brightness(1.08); }
  .q-best { color:var(--accent2); } .q-count { color:var(--muted); }
  .data-manage { display:flex; flex-direction:column; gap:0.5rem; background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:0.7rem 0.9rem; }
  .dm-status { font-size:0.66rem; color:var(--muted); letter-spacing:.03em; }
  .dm-btns { display:flex; flex-wrap:wrap; gap:0.5rem; }
  .dm-btn { background:var(--surface2); border:1px solid var(--border); color:var(--text); border-radius:4px; padding:0.4rem 0.8rem; font-family:'Nunito','Gothic A1',sans-serif; font-size:0.68rem; letter-spacing:.04em; cursor:pointer; transition:all 0.2s; }
  .dm-btn:hover { border-color:var(--accent); color:var(--accent); }
  .dm-btn.dm-admin { border-color:var(--accent); color:var(--accent); }
  .dm-btn.dm-admin:hover { background:var(--accent); color:#fff; }
  .dm-btn.dm-save { border-color:var(--accent); background:var(--accent); color:#fff; }
  .dm-btn.dm-save:hover { filter:brightness(1.08); }
  .dm-unsaved { color:var(--red); }
  /* ── PAGE (컬렉션) 목록 ── */
  .page-card { display:flex; align-items:center; gap:0.8rem; background:var(--surface); border:2px solid var(--border); border-radius:22px; padding:1rem 1.1rem; box-shadow:var(--shadow); cursor:pointer; transition:all 0.15s; }
  .page-card:hover { border-color:var(--accent); box-shadow:0 2px 10px rgba(0,0,0,0.04); }
  .page-card-main { flex:1; min-width:0; }
  .page-card-title { font-family:'Fredoka','Gothic A1',sans-serif; font-weight:400; font-style:normal; font-size:1.05rem; color:var(--text); }
  .page-card-meta { font-size:0.68rem; color:var(--muted); margin-top:0.2rem; }
  .page-card-actions { display:flex; gap:0.3rem; }
  .page-card-actions button { background:none; border:1px solid var(--border); border-radius:4px; padding:0.35rem 0.5rem; cursor:pointer; font-size:0.8rem; }
  .page-card-actions button:hover { border-color:var(--accent); }
  /* 받은 공유 카드 */
  .share-card { background:var(--surface); border:2px solid var(--accent2); border-radius:18px; padding:0.9rem 1.1rem; box-shadow:var(--shadow); display:flex; align-items:center; gap:0.8rem; margin-top:0.5rem; }
  .share-info { flex:1; min-width:0; }
  .share-title { font-family:'Fredoka','Gothic A1',sans-serif; font-size:0.95rem; color:var(--text); }
  .share-meta { font-size:0.68rem; color:var(--muted); margin-top:0.2rem; }
  .share-actions { display:flex; gap:0.4rem; flex-shrink:0; }
  .share-actions button { border:none; border-radius:999px; padding:0.45rem 0.9rem; font-family:'Nunito','Gothic A1',sans-serif; font-weight:700; font-size:0.78rem; cursor:pointer; transition:all .15s; }
  .share-accept { background:var(--accent); color:#fff; }
  .share-accept:hover { filter:brightness(1.08); }
  .share-decline { background:var(--surface2); color:var(--muted); }
  .share-decline:hover { background:var(--red); color:#fff; }
  /* ── EDIT ── */
  /* 편집 화면은 640px 컬럼을 벗어나 화면 폭에 맞춰 넓어짐(적응형). 스티키 저장바 유지 위해 transform 미사용. */
  .edit-screen { width:min(1080px, 94vw); margin-inline:calc((100% - min(1080px, 94vw)) / 2); padding:1.2rem 0 4rem; display:flex; flex-direction:column; gap:1rem; }
  .edit-topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:0.8rem; background:var(--bg); border-bottom:1px solid var(--border); padding:0.6rem 0; }
  .edit-title-text { font-size:0.9rem; font-weight:600; color:var(--text); }
  .edit-cancel, .edit-save { border:1px solid var(--border); border-radius:5px; padding:0.45rem 0.9rem; font-family:'Nunito','Gothic A1',sans-serif; font-size:0.72rem; cursor:pointer; background:var(--surface); color:var(--text); transition:all 0.2s; }
  .edit-cancel:hover { border-color:var(--red); color:var(--red); }
  .edit-save { border-color:var(--accent); color:#fff; background:var(--accent); }
  .edit-save:hover { filter:brightness(1.08); }
  .edit-hint { font-size:0.68rem; color:var(--muted); line-height:1.6; }
  .edit-hint b { color:var(--accent); }
  .edit-ep { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:0.8rem; display:flex; flex-direction:column; gap:0.6rem; }
  .edit-ep-head { display:flex; align-items:center; gap:0.5rem; }
  .edit-ep-num { font-size:0.62rem; color:var(--muted); letter-spacing:.1em; white-space:nowrap; }
  .edit-title { flex:1; min-width:0; background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:0.45rem 0.6rem; font-family:inherit; font-size:0.82rem; color:var(--text); }
  .edit-title:focus, .edit-spk:focus, .edit-ko:focus, .edit-en:focus { outline:none; border-color:var(--accent); }
  .edit-del-ep { border:1px solid var(--border); background:transparent; border-radius:4px; padding:0.35rem 0.5rem; cursor:pointer; font-size:0.8rem; }
  .edit-del-ep:hover { border-color:var(--red); }
  .edit-sents { display:flex; flex-direction:column; gap:0.35rem; }
  .edit-sent-labels, .edit-sent { display:grid; grid-template-columns:5.5rem 1fr 1fr 1.8rem; gap:0.4rem; align-items:center; }
  .edit-sent-labels { font-size:0.6rem; color:var(--muted); letter-spacing:.06em; padding:0 0.1rem; }
  .edit-sent-stat { font-size:0.62rem; color:var(--muted); padding:0.05rem 0.1rem 0.2rem 5.9rem; letter-spacing:.02em; }
  .edit-sent-extra { padding:0 0.1rem 0.15rem 5.9rem; }
  .edit-hint { width:100%; padding:0.35rem 0.6rem; border:1px dashed var(--border); border-radius:6px;
    background:var(--bg); color:var(--text); font-size:0.78rem; font-family:'DM Mono','Gothic A1',monospace; }
  .edit-hint:focus { outline:none; border-color:var(--accent2); border-style:solid; }
  .edit-spk, .edit-ko, .edit-en { background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:0.4rem 0.5rem; font-family:inherit; font-size:0.76rem; color:var(--text); min-width:0; }
  .edit-del-sent { border:1px solid var(--border); background:transparent; border-radius:4px; padding:0.35rem 0; cursor:pointer; color:var(--muted); font-size:0.8rem; }
  .edit-del-sent:hover { border-color:var(--red); color:var(--red); }
  .edit-add-sent { align-self:flex-start; border:1px dashed var(--border); background:transparent; border-radius:4px; padding:0.35rem 0.7rem; cursor:pointer; color:var(--muted); font-size:0.7rem; font-family:'Nunito','Gothic A1',sans-serif; margin-top:0.2rem; }
  .edit-add-sent:hover { border-color:var(--accent); color:var(--accent); }
  .edit-add-ep { align-self:center; border:1px dashed var(--border); background:transparent; border-radius:6px; padding:0.6rem 1.4rem; cursor:pointer; color:var(--accent); font-size:0.8rem; font-family:'Nunito','Gothic A1',sans-serif; }
  .edit-add-ep:hover { background:var(--surface2); }
  .edit-empty { text-align:center; color:var(--muted); font-size:0.75rem; padding:2rem 0; }
  /* ── AUTH ── */
  /* 좌: 목록·공지 / 우: (위)아이디·충전 (아래)로그아웃 */
  .auth-bar { display:flex; align-items:flex-start; justify-content:space-between; gap:0.5rem; font-size:0.72rem; color:var(--muted); }
  .auth-left { display:flex; flex-wrap:wrap; gap:0.4rem; }
  /* 학습 페이지 안에서만: 오른쪽(auth-right)처럼 2줄로 — 위=공지·영상, 아래=목록 */
  .auth-left-col { flex-direction:column; align-items:flex-start; }
  .auth-left-top { display:flex; flex-wrap:wrap; gap:0.4rem; }
  .auth-right { display:flex; flex-direction:column; align-items:flex-end; gap:0.4rem; }
  .auth-right-top { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:0.4rem; }
  .auth-bar a { color:var(--accent); text-decoration:none; }
  .auth-bar a:hover { text-decoration:underline; }
  /* 상단바 요소 — 알약 대신 부드러운 라운드 + 살짝 투명한 프로스트 유리 */
  .auth-link-btn, .auth-user {
    display:inline-flex; align-items:center; gap:0.25rem; white-space:nowrap;
    font-family:'Nunito','Gothic A1',sans-serif; font-weight:600; font-size:0.7rem; color:var(--text);
    background:rgba(255,255,255,0.42); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
    border:1px solid rgba(255,255,255,0.55); border-radius:11px; padding:0.34rem 0.72rem; }
  .auth-link-btn { cursor:pointer; transition:all .15s; }
  .auth-link-btn:hover { background:rgba(255,255,255,0.72); border-color:var(--accent); color:var(--accent); }
  .auth-point { color:var(--accent2); font-weight:700; border-color:rgba(224,150,90,0.55); background:rgba(255,255,255,0.55); }
  .auth-point:hover { background:var(--accent2); color:#fff; border-color:var(--accent2); }
  .auth-box { background:var(--surface); border:2px solid var(--border); border-radius:24px; width:100%; max-width:clamp(320px, 42vw, 460px); box-shadow:var(--shadow); overflow:hidden; }
  .auth-tabs { display:flex; align-items:center; border-bottom:1px solid var(--border); }
  .auth-tab { flex:1; background:none; border:none; padding:0.8rem; font-family:inherit; font-size:0.85rem; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; }
  .auth-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
  .auth-body { padding:1rem 1.1rem 1.2rem; }
  .auth-body label { display:block; font-size:0.68rem; color:var(--muted); margin:0.6rem 0 0.25rem; }
  .auth-body input { width:100%; padding:0.55rem 0.7rem; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); font-size:0.9rem; font-family:inherit; }
  .auth-body input:focus { outline:none; border-color:var(--accent); }
  .auth-inline { display:flex; gap:0.4rem; align-items:stretch; }
  .auth-inline input { flex:1; min-width:0; }
  .auth-code-btn { flex:0 0 auto; white-space:nowrap; padding:0 0.75rem; border:1px solid var(--accent); background:transparent; color:var(--accent); border-radius:6px; font-family:inherit; font-weight:700; font-size:0.75rem; cursor:pointer; }
  .auth-code-btn:hover:not(:disabled) { background:var(--accent); color:#fff; }
  .auth-code-btn:disabled { opacity:0.55; cursor:default; border-color:var(--border); color:var(--muted); }
  .auth-submit { width:100%; margin-top:1rem; padding:0.7rem; border:2px solid var(--accent); background:var(--accent); color:#fff; border-radius:999px; font-family:inherit; font-weight:800; font-size:0.9rem; cursor:pointer; }
  .auth-submit:hover { filter:brightness(1.08); }
  .auth-submit.danger { border-color:var(--red); background:var(--red); }   /* 회원 탈퇴 */
  .auth-msg { font-size:0.75rem; margin-top:0.7rem; min-height:1em; color:var(--red); }
  .auth-msg.ok { color:var(--green); }
  .auth-consent { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:0.7rem 0.8rem; margin-top:0.9rem; }
  .auth-consent-title { font-size:0.72rem; font-weight:700; color:var(--accent); margin-bottom:0.45rem; }
  .auth-consent-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.4rem; }
  .auth-consent-list li { font-size:0.68rem; line-height:1.5; color:var(--muted); padding-left:0.8rem; position:relative; }
  .auth-consent-list li::before { content:'•'; position:absolute; left:0; color:var(--accent); }
  .auth-consent-list b { color:var(--text); }
  .auth-agree { display:flex; align-items:center; gap:0.45rem; margin-top:0.7rem; font-size:0.78rem; color:var(--text); cursor:pointer; }
  .auth-agree input { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
  .auth-alt { text-align:center; margin-top:0.9rem; }
  .auth-alt a { font-size:0.72rem; color:var(--muted); cursor:pointer; text-decoration:underline; }
  .auth-alt a:hover { color:var(--accent); }
  /* 로그인 화면: 뷰포트 세로 중앙 정렬(적응형) */
  .gate-screen { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem; padding:2rem 1rem; text-align:center; }
  .gate-brand { display:flex; flex-direction:column; align-items:center; gap:0.5rem; }
  .gate-title-main {
    font-family:'Gothic A1','Fredoka',sans-serif; font-weight:800;
    font-size:clamp(2rem, 1.25rem + 2.6vw, 3rem); line-height:1.12; letter-spacing:-0.03em;
    color:#1f5fa6;   /* 폴백 */
    background:linear-gradient(135deg,#123f78 0%,#2f86cf 52%,#63b8d8 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 3px 12px rgba(255,255,255,0.6)) drop-shadow(0 2px 3px rgba(15,50,95,0.28));
  }
  .gate-title-sub {
    font-family:'DM Mono','Nunito',monospace; font-weight:500; text-transform:uppercase;
    font-size:clamp(0.58rem, 0.5rem + 0.3vw, 0.72rem); letter-spacing:0.44em; padding-left:0.44em;
    color:#2f6aa0; opacity:0.9;
    text-shadow:0 1px 5px rgba(255,255,255,0.65);
  }
  .gate-screen .auth-box { max-width:clamp(320px, 42vw, 460px); width:100%; text-align:left; }
  .gate-footer { margin-top:0.6rem; padding:0.95rem 1.3rem; border-radius:16px;
    background:rgba(255,255,255,0.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    box-shadow:0 6px 18px rgba(20,60,110,0.14);
    width:100%; max-width:clamp(320px, 42vw, 460px); text-align:center; display:flex; flex-direction:column; gap:0.3rem; }
  .gate-footer-title { font-size:0.7rem; font-weight:700; color:var(--muted); letter-spacing:.04em; }
  .gate-footer-line { font-size:0.68rem; line-height:1.5; color:var(--muted); }
  .gate-footer-mail { font-size:0.74rem; font-weight:700; color:var(--accent); text-decoration:none; }
  .gate-footer-mail:hover { text-decoration:underline; }
  /* 목록 화면 등에서 푸터를 화면 맨 아래·가운데로 */
  .app-footer { margin-top:auto; align-self:center; }
  /* 홈 화면에 추가(앱 설치) 버튼 — 로그인 화면 */
  .gate-install { font-family:'Nunito','Gothic A1',sans-serif; font-weight:700; font-size:0.82rem; cursor:pointer;
    border:1.5px solid var(--accent); background:rgba(255,255,255,0.35); color:var(--accent);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border-radius:999px; padding:0.55rem 1.2rem; transition:all .15s; }
  .gate-install:hover { background:var(--accent); color:#fff; }
  .notice-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.2rem; box-shadow:var(--shadow); }
  .notice-card + .notice-card { margin-top:0.8rem; }
  .notice-card-head { display:flex; align-items:baseline; justify-content:space-between; gap:0.8rem; flex-wrap:wrap; margin-bottom:0.5rem; }
  .notice-card-title { font-size:0.95rem; font-weight:800; color:var(--text); line-height:1.4; }
  .notice-card-date { font-size:0.66rem; color:var(--muted); white-space:nowrap; }
  .notice-card-body { font-size:0.8rem; line-height:1.75; color:var(--text); word-break:break-word; }
  /* 유튜브 임베드 — 폭에 맞춰 16:9 비율 유지(휴대폰에서도 잘림 없이) */
  .video-frame { position:relative; width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#000; }
  .video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
  .empty-state { display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.6rem; padding:3rem 1rem; border:1px dashed var(--border); border-radius:8px; color:var(--muted); }
  .empty-emoji { font-size:2.2rem; }
  .empty-title { font-size:0.95rem; color:var(--text); font-weight:600; }
  .empty-desc { font-size:0.72rem; line-height:1.7; }
  .empty-desc b { color:var(--accent); }
  .reset-area { display:flex; justify-content:center; padding:0.5rem 0 1.5rem; margin-top:0.5rem; }
  .reset-btn { background:rgba(255,255,255,0.82); border:1px solid rgba(120,140,160,0.35); color:var(--text);
    border-radius:4px; padding:0.4rem 1rem; font-family:'Nunito','Gothic A1',sans-serif; font-size:0.68rem;
    letter-spacing:.06em; cursor:pointer; transition:all 0.2s; }
  .reset-btn:hover { border-color:var(--red); color:var(--red); background:rgba(255,255,255,0.92); }
  .reset-btn.reset-confirm { border-color:var(--red); color:var(--red); background:rgba(255,236,236,0.92); }

  /* ── TIMER ── */
  .timer-box { position:fixed; top:1rem; right:1rem; display:flex; flex-direction:column; gap:0.35rem; z-index:100; pointer-events:none; }
  .live-timer, .session-timer { font-size:1.6rem; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; background:var(--surface); border:1px solid var(--border); border-radius:5px; padding:0.2rem 0.6rem; line-height:1.2; opacity:0; transition:color .3s,opacity .2s; text-align:right; }
  .live-timer { color:var(--accent); } .live-timer.running { opacity:1; } .live-timer.warn { color:var(--red); }
  .session-timer { color:var(--muted); } .session-timer.running { opacity:1; }

  /* ── CHAT ── */
  .chat-wrap { width:100%; flex:1; padding-top:1.8rem; display:flex; flex-direction:column; }
  .progress { display:flex; gap:5px; margin-bottom:1.5rem; flex-wrap:wrap; }
  .dot { width:5px; height:5px; border-radius:50%; background:var(--border); transition:background .3s; }
  .dot.done { background:var(--accent2); } .dot.active { background:var(--accent); }

  .msg { display:flex; gap:0.7rem; margin-bottom:1.4rem; animation:up .3s ease both; }
  .msg.system { align-items:flex-start; } .msg.user { align-items:flex-start; flex-direction:row-reverse; }
  @keyframes up { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

  .avatar { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.6rem; font-weight:600; letter-spacing:.03em; margin-top:2px; }
  .avatar.sys { background:var(--surface2); color:var(--accent); border:1px solid var(--border); }
  .avatar.usr { background:var(--accent); color:#fff; }
  .avatar.beth { background:#7b5ea7; color:#fff; }
  .avatar.sam  { background:#2e7d9f; color:#fff; }
  .avatar.daughter { background:#c2607a; color:#fff; }
  .avatar.mom      { background:#5a8f5a; color:#fff; }
  .avatar.mike     { background:#4a6fa5; color:#fff; }
  .avatar.alison   { background:#b07a3d; color:#fff; }
  .avatar.candace  { background:#c06a4a; color:#fff; }
  .avatar.emily    { background:#5a7a9f; color:#fff; }
  .avatar.sue      { background:#9f5a7a; color:#fff; }
  .avatar.rachel   { background:#4a8f8f; color:#fff; }
  .avatar.owen     { background:#3a7d8c; color:#fff; }
  .avatar.jerry    { background:#a85d3d; color:#fff; }
  .avatar.alex     { background:#5d5fa3; color:#fff; }
  .avatar.susan    { background:#3d8c6e; color:#fff; }
  .avatar.helen    { background:#9c5fa0; color:#fff; }
  .avatar.teacher1 { background:#b5663d; color:#fff; }
  .avatar.teacher2 { background:#7d6ba8; color:#fff; }

  .bubble { max-width:84%; padding:0.85rem 1.05rem; border-radius:20px; line-height:1.7; font-size:0.84rem; }
  .msg.system .bubble { background:var(--surface); border:1px solid var(--border); border-top-left-radius:0; }
  .msg.user   .bubble { background:var(--surface2); border:1px solid var(--border); border-top-right-radius:0; color:var(--accent); }

  .speaker { font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:0.3rem; font-weight:600; }
  .speaker.beth { color:#7b5ea7; } .speaker.sam { color:#2e7d9f; }
  .speaker.daughter { color:#c2607a; } .speaker.mom { color:#5a8f5a; }
  .speaker.mike { color:#4a6fa5; } .speaker.alison { color:#b07a3d; }
  .speaker.candace { color:#c06a4a; } .speaker.emily { color:#5a7a9f; }
  .speaker.sue { color:#9f5a7a; } .speaker.rachel { color:#4a8f8f; }
  .speaker.owen { color:#3a7d8c; } .speaker.jerry { color:#a85d3d; }
  .speaker.alex { color:#5d5fa3; }
  .speaker.susan { color:#3d8c6e; } .speaker.helen { color:#9c5fa0; }
  .speaker.teacher1 { color:#b5663d; } .speaker.teacher2 { color:#7d6ba8; }
  .q-korean { font-family:'Fredoka','Gothic A1',sans-serif; font-weight:400; font-style:normal; font-size:1rem; color:var(--text); display:block; }
  .retry-tag { font-size:0.62rem; letter-spacing:.08em; color:var(--red); font-weight:600; margin-bottom:0.4rem; }

  /* ── FEEDBACK ── */
  .fb { margin-top:0.8rem; padding-top:0.8rem; border-top:1px solid var(--border); }
  .fb-row { margin-bottom:0.6rem; }
  .fb-lbl { font-size:0.6rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:0.25rem; }
  .fb-lbl.yours { color:var(--red); } .fb-lbl.model { color:var(--green); }
  .fb-lbl.hint { color:var(--accent); }
  .fb-text { font-size:0.8rem; line-height:1.65; color:var(--text); }
  .del { background:var(--diff-del); color:var(--red); text-decoration:line-through; border-radius:2px; padding:0 2px; }
  .ins { background:var(--diff-add); color:var(--green); border-radius:2px; padding:0 2px; }
  .fb-score { font-size:0.68rem; color:var(--muted); margin-top:0.4rem; }
  .fb-score span { color:var(--accent); }

  /* ── 복습 체크(⭐) ── */
  /* 라이팅 피드백 안의 복습 담기 버튼 */
  .fb-star { font-family:'Nunito','Gothic A1',sans-serif; font-weight:700; font-size:0.66rem; cursor:pointer;
    border:1.5px solid var(--accent2); background:var(--surface); color:var(--accent2);
    border-radius:999px; padding:0.15rem 0.6rem; transition:all .15s; }
  .fb-star:hover { background:var(--accent2); color:#fff; }
  .fb-star.on { background:var(--accent2); color:#fff; }
  /* 복습 카드(체크한 표현이 있으면 강조) */
  .review-card { border-color:var(--accent2); }
  .review-card:hover { border-color:var(--accent2); }
  .review-card.done { background:oklch(0.97 0.03 48); border-color:var(--accent2); }
  .review-card .q-num { color:var(--accent2); }
  /* 스피킹(운전 모드) '이 표현 복습' 버튼 — 표현 아래 가운데 배치 */
  .drive-btn-row { display:flex; flex-direction:column; align-items:center; gap:0.6rem; margin-top:1.4rem; }
  /* 배경을 반투명으로 두어 뒤 하늘·바다 배경이 살짝 비쳐 보이게 한다(프로스트 유리 느낌). */
  .drive-star-btn { font-family:'Nunito','Gothic A1',sans-serif; font-weight:700; font-size:0.82rem; cursor:pointer;
    border:2px solid var(--accent2); background:rgba(255,255,255,0.2); color:var(--accent2);
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    border-radius:999px; padding:0.5rem 1.1rem; transition:all .15s; white-space:nowrap; }
  .drive-star-btn:hover { background:rgba(255,255,255,0.32); }
  .drive-star-btn.on { background:var(--accent2); color:#fff; }
  .drive-reveal-btn { font-family:'Nunito','Gothic A1',sans-serif; font-weight:700; font-size:0.82rem; cursor:pointer;
    border:2px solid rgba(255,255,255,0.75); background:rgba(255,255,255,0.2); color:#fff;
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    text-shadow:0 1px 3px rgba(0,0,0,0.25);
    border-radius:999px; padding:0.5rem 1.1rem; transition:all .15s; white-space:nowrap; }
  .drive-reveal-btn:hover { background:rgba(255,255,255,0.34); }

  /* ── INPUT ── */
  .input-area { width:100%; padding:1.2rem 0 1.5rem; position:sticky; bottom:0; background:transparent; }
  .input-row { display:flex; gap:0.5rem; align-items:flex-end; }
  textarea { flex:1; background:var(--surface); border:2px solid var(--border); color:var(--text); font-family:'Nunito','Gothic A1',sans-serif; font-weight:600; font-size:0.86rem; padding:0.8rem 1rem; border-radius:18px; resize:none; min-height:58px; max-height:160px; line-height:1.6; outline:none; transition:border-color .2s; }
  textarea:focus { border-color:var(--accent); }
  textarea::placeholder { color:var(--muted); }
  .bottom-row { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
  .kbd-hint { font-size:0.62rem; color:var(--text); font-weight:600; background:rgba(255,255,255,0.84); border-radius:999px; padding:0.24rem 0.66rem; box-shadow:0 2px 7px rgba(20,60,110,0.13); }
  .redo-area { display:flex; flex-direction:column; gap:0.55rem; padding-bottom:0.5rem; }
  .redo-btns { display:flex; gap:0.6rem; align-items:stretch; }
  .redo-btns .redo-btn { flex:1; width:auto; }
  .redo-hint { font-size:0.68rem; color:var(--muted); text-align:center; line-height:1.5; }
  .redo-hint b { color:var(--accent); font-weight:600; }
  .redo-btn { width:100%; background:var(--accent); border:2px solid var(--accent); color:#fff; border-radius:999px; padding:0.85rem 1rem; font-family:'Nunito','Gothic A1',sans-serif; font-weight:800; font-size:0.86rem; letter-spacing:.03em; cursor:pointer; transition:opacity .2s; }
  .redo-btn:hover { opacity:0.88; }

  /* ── VOICE (Whisper /transcribe) ── */
  .cp-mic { width:56px; min-height:58px; flex-shrink:0; background:var(--surface); border:2px solid var(--border); border-radius:18px; color:var(--accent); font-size:1.2rem; cursor:pointer; transition:background .2s,border-color .2s,color .2s; display:flex; align-items:center; justify-content:center; }
  .cp-mic:hover { border-color:var(--accent); background:var(--surface2); }
  .cp-mic:active { transform:scale(0.96); }
  .cp-mic.listening { background:var(--red); border-color:var(--red); color:#fff; animation:cpPulse 1s ease-in-out infinite; }
  @keyframes cpPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(185,64,64,0.45);} 50%{ box-shadow:0 0 0 7px rgba(185,64,64,0);} }
  .cp-status { font-size:0.66rem; line-height:1.5; margin:0.45rem auto 0; min-height:1em; color:var(--text); font-weight:600; word-break:break-word; text-align:center; width:fit-content; max-width:100%; }
  /* 내용이 있을 때만 반투명 흰 배경을 깔아 바다 위에서도 또렷하게 */
  .cp-status:not(:empty) { background:rgba(255,255,255,0.86); border-radius:12px; padding:0.3rem 0.75rem; box-shadow:0 2px 8px rgba(20,60,110,0.14); }
  .cp-status.listen { color:var(--red); } .cp-status.ok { color:var(--green); } .cp-status.warn { color:var(--red); }

  /* ── DRIVE MODE (운전 모드) ── */
  .drive-screen { flex:1; display:flex; flex-direction:column; align-items:stretch; text-align:center; padding:1rem 1rem 2rem; min-height:62vh; }
  .drive-topbar { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; }
  .drive-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.3rem; }
  .drive-title { font-size:0.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
  .drive-now { display:flex; flex-direction:column; gap:0.6rem; align-items:center; }
  .drive-count { font-size:0.64rem; letter-spacing:.12em; color:var(--muted); }
  .drive-ko-q { font-family:'Fredoka','Gothic A1',sans-serif; font-weight:400; font-style:normal; font-size:1.7rem; line-height:1.4; color:var(--text); max-width:520px; }
  .drive-en { font-size:0.98rem; color:var(--green); line-height:1.5; max-width:520px; }
  .drive-heard { min-height:1.4em; }
  .drive-heard-line { display:flex; flex-direction:column; align-items:center; gap:0.25rem; margin:0.6rem 0; }
  .drive-hl-lbl { font-size:0.78rem; letter-spacing:.06em; color:var(--muted); }
  .drive-heard-txt { font-size:1.4rem; }
  .drive-heard-score { display:block; font-size:1rem; margin-top:0.2rem; opacity:0.85; }
  .drive-answer-txt { font-size:1.7rem; font-weight:700; color:var(--green); line-height:1.35; }
  .drive-heard-txt.ok { color:var(--green); } .drive-heard-txt.no { color:var(--red); }
  .drive-status { font-size:0.82rem; color:var(--accent); min-height:1.2em; }

  /* ── DRIVE SETTINGS (운전 모드 설정) ── */
  .drive-set { border:1px solid var(--border); border-radius:8px; padding:0.9rem 1rem; background:var(--surface); display:flex; flex-direction:column; gap:0.7rem; }
  .drive-set-title { font-size:0.72rem; letter-spacing:.06em; color:var(--accent); font-weight:600; }
  .drive-set-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
  .drive-set-lbl { font-size:0.82rem; color:var(--text); }
  .stepper { display:flex; align-items:center; gap:0.6rem; }
  .stepper button { width:34px; height:34px; border:1px solid var(--border); border-radius:6px; background:var(--surface2); color:var(--accent); font-size:1.2rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s,border-color .15s; }
  .stepper button:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
  .stepper button:active { transform:scale(0.94); }
  .stepper span { min-width:52px; text-align:center; font-family:'Nunito','Gothic A1',sans-serif; font-size:0.9rem; color:var(--text); }
  .drive-set-hint { font-size:0.64rem; line-height:1.5; color:var(--muted); }
  .drive-set-hint b { color:var(--accent); }
  .toggle-btn { min-width:70px; padding:0.4rem 0.9rem; border:1px solid var(--border); border-radius:16px; background:var(--surface2); color:var(--muted); font-family:'Nunito','Gothic A1',sans-serif; font-size:0.8rem; font-weight:600; cursor:pointer; transition:all .15s; }
  .toggle-btn.on { background:var(--accent); border-color:var(--accent); color:#fff; }
  .toggle-btn:active { transform:scale(0.96); }
  .drive-next-bar { display:flex; justify-content:center; padding:0.5rem 0 1.2rem; }
  .drive-next-btn { min-width:200px; padding:0.9rem 1.6rem; border:1px solid var(--accent); border-radius:10px; background:var(--accent); color:#fff; font-family:'Nunito','Gothic A1',sans-serif; font-size:1.05rem; font-weight:700; cursor:pointer; box-shadow:var(--shadow, 0 6px 18px rgba(0,0,0,0.18)); transition:all .15s; }
  .drive-next-btn:hover { filter:brightness(1.06); }
  .drive-next-btn:active { transform:scale(0.97); }

  /* ── DONE ── */
  .done-card { background:var(--surface); border:2px solid var(--border); border-radius:26px; padding:1.4rem; box-shadow:var(--shadow); text-align:center; width:100%; }
  .done-card h2 { font-family:'Fredoka','Gothic A1',sans-serif; font-weight:300; font-size:1.2rem; color:var(--accent); margin-bottom:0.3rem; }
  .total-time { font-size:1rem; color:var(--text); margin-bottom:0.2rem; }
  .first-try-stat { font-size:0.78rem; color:var(--muted); margin-bottom:0.4rem; }
  .first-try-stat span { color:var(--accent2); font-weight:600; } .first-try-stat .ft-wrong { color:var(--red); }
  .best-badge { font-size:0.7rem; color:var(--accent2); margin-left:0.4rem; }
  .records-title { font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin:1rem 0 0.5rem; }
  .records-list { text-align:left; max-height:180px; overflow-y:auto; }
  .record-row { display:flex; gap:0.8rem; align-items:center; font-size:0.75rem; color:var(--muted); padding:0.25rem 0; border-bottom:1px solid var(--border); }
  .record-row.rec-best { color:var(--accent2); }
  .rec-rank { width:24px; flex-shrink:0; } .rec-time { color:var(--accent); width:64px; flex-shrink:0; } .rec-date { font-size:0.68rem; }
  .btn-row { display:flex; gap:0.6rem; justify-content:center; margin-top:1rem; flex-wrap:wrap; }
  button.restart-btn, button.back-btn, button.retry-btn {
    background:transparent; border:1px solid var(--accent); color:var(--accent);
    border-radius:4px; padding:0.45rem 1.2rem;
    font-family:'Nunito','Gothic A1',sans-serif; font-size:0.72rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .2s,color .2s;
  }
  /* 정지/목록 뒤로가기 버튼: 하늘색으로 또렷하게 */
  button.back-btn { border-color:var(--accent); color:var(--accent); background:rgba(255,255,255,0.9); font-weight:700; box-shadow:0 2px 8px rgba(20,60,110,0.14); }
  button.retry-btn { border-color:var(--red); color:var(--red); }
  button.restart-btn:hover { background:var(--accent); color:#fff; }
  button.retry-btn:hover { background:var(--red); color:#fff; }
  button.back-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

  /* ── 커스텀 다이얼로그 / 토스트 (네이티브 alert/confirm/prompt 대체) ── */
  .ui-modal { position:fixed; inset:0; background:oklch(0.32 0.025 258 / 0.42); display:flex; align-items:center; justify-content:center; z-index:200; padding:1rem; animation:uiFade .15s ease; }
  .ui-modal.closing { opacity:0; transition:opacity .15s; }
  .ui-box { background:var(--surface); border:1px solid var(--border); border-radius:12px; width:100%; max-width:340px; padding:1.4rem 1.3rem 1.1rem; box-shadow:var(--shadow, 0 12px 40px rgba(0,0,0,0.2)); animation:uiPop .18s ease; }
  /* 스피킹 충전 안내 모달 */
  .charge-box { max-width:430px; text-align:left; }
  .charge-title { font-weight:800; font-size:1.05rem; color:var(--accent); text-align:center; margin-bottom:0.7rem; }
  .charge-warn { background:oklch(0.65 0.155 48 / 0.14); color:var(--accent2); border-radius:10px; padding:0.6rem 0.8rem; font-size:0.82rem; text-align:center; line-height:1.5; margin-bottom:0.7rem; }
  .charge-balance { text-align:center; font-size:0.85rem; color:var(--muted); margin-bottom:0.5rem; }
  .charge-pack { text-align:center; font-size:1.02rem; color:var(--text); margin-bottom:0.8rem; }
  .charge-pack b { color:var(--accent); }
  .charge-intro { text-align:center; font-size:0.82rem; line-height:1.6; color:var(--text); margin-bottom:0.85rem; }
  .charge-intro b { color:var(--accent); }
  .charge-list { list-style:none; padding:0.6rem 0.2rem; margin:0 0 0.3rem; display:flex; flex-direction:column; gap:0.45rem; border-top:1px solid var(--border); }
  .charge-list li { font-size:0.8rem; line-height:1.5; color:var(--text); padding-left:0.95rem; position:relative; }
  .charge-list li::before { content:'•'; position:absolute; left:0; color:var(--accent2); font-weight:700; }
  .charge-list b { color:var(--accent); }
  .charge-msg { text-align:center; font-size:0.8rem; margin-top:0.6rem; min-height:1em; line-height:1.5; }
  .charge-msg.ok { color:var(--green); }
  .charge-msg.err { color:var(--red); }
  .ui-msg { font-size:0.86rem; line-height:1.65; color:var(--text); }
  .ui-input { width:100%; margin-top:1rem; padding:0.6rem 0.7rem; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--text); font-family:inherit; font-size:0.95rem; }
  .ui-input:focus { outline:none; border-color:var(--accent); }
  .ui-actions { display:flex; gap:0.6rem; margin-top:1.2rem; }
  .ui-btn { flex:1; padding:0.6rem; border-radius:7px; font-family:inherit; font-size:0.82rem; cursor:pointer; border:1px solid var(--border); background:var(--surface2); color:var(--text); transition:all .15s; }
  .ui-btn:hover { border-color:var(--accent); }
  .ui-btn.ui-ok { border-color:var(--accent); background:var(--accent); color:#fff; }
  .ui-btn.ui-ok:hover { filter:brightness(1.06); }
  .ui-btn.ui-ok.ui-danger { border-color:var(--red); background:var(--red); }
  @keyframes uiPop { from{ transform:scale(0.96); opacity:0; } to{ transform:scale(1); opacity:1; } }
  @keyframes uiFade { from{ opacity:0; } to{ opacity:1; } }
  .ui-toast-wrap { position:fixed; left:0; right:0; bottom:1.4rem; display:flex; flex-direction:column; align-items:center; gap:0.5rem; z-index:300; pointer-events:none; padding:0 1rem; }
  .ui-toast { background:var(--text); color:var(--surface); font-size:0.8rem; line-height:1.5; padding:0.7rem 1.1rem; border-radius:9px; box-shadow:var(--shadow, 0 6px 20px rgba(0,0,0,0.25)); max-width:420px; text-align:center; animation:uiToastIn .25s ease; }
  .ui-toast.err { background:var(--red); color:#fff; }
  .ui-toast.out { opacity:0; transform:translateY(8px); transition:all .3s; }
  @keyframes uiToastIn { from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }