/* ══════════════════════════════════════════════════════════
   EAIM 영어 — 공통 디자인  · english-theme.css  v1.0 (2026-10-03)
   디자인 "여행 노선도"(선생님 결정 B): 앱 하나 = 노선 하나. 노선 번호·색이 첫 화면 노선도와 앱 머리·단계 줄에서 이어진다.
     1 회화 방 파랑 · 2 문법 탐구실 보라 · 3 놀이터 초록 · 4 게임방 주황 · 5 영시 자홍 · 6 작문 청록 · 7 신문 빨강 · T 선생님 도구 남색
   - 모든 화면이 <head> 맨 끝에서 이 파일을 읽고, <body data-line="…"> 로 자기 노선을 고른다.
   - 각 화면의 예전 색 이름(--mint, --sky, --coral …)은 그대로 두고 값만 밝고 선명한 새 색으로 바꾼다 → 화면 코드는 고치지 않는다.
   - 머리 줄·단계 줄·탭·단추처럼 모든 앱에 있는 것만 여기서 모양을 맞춘다. 기능·버튼 이름·순서는 바꾸지 않는다.
   - 글꼴: Pretendard 하나(2026-10-05 선생님 결정 — 컴퓨터·휴대폰·아이패드 어디서나 같게). 손글씨 Gaegu(학생 문장·시)와 신문 제호 Playfair 만 그대로.
   ══════════════════════════════════════════════════════════ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root{
  /* 노선 색 */
  --l1:#1E6FE8; --l1d:#1554B8;   /* 1 회화 방 */
  --l2:#8A3FFC; --l2d:#6A22D6;   /* 2 문법 탐구실 */
  --l3:#00A859; --l3d:#007A40;   /* 3 놀이터 */
  --l4:#FF8A00; --l4d:#B85F00;   /* 4 게임방 */
  --l5:#E0338C; --l5d:#AD1F66;   /* 5 영시 */
  --l6:#00A3A8; --l6d:#00777B;   /* 6 작문 */
  --l7:#E8402E; --l7d:#B52A1B;   /* 7 신문 */
  --lt:#2E3B55; --ltd:#1B2740;   /* T 선생님 도구 */
  --sig:#FFC93C;                 /* 신호등 노랑 — 지도안 단추·강조 */
  --ink:#13203A; --ink2:#4B5872; --ink3:#8592A8;
  --page:#F2F5F9; --hair:#DCE3EC;
  --disp:'Pretendard Variable','Pretendard',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --kr:var(--disp);
  --ui:var(--disp);
  --route:var(--lt); --route-d:var(--ltd); --no:'T';

  /* 예전 색 이름 → 새 색 (화면 코드는 그대로) */
  --mint:#00A859; --mint-d:#007A40; --mint-l:#E3F6EC;
  --sky:#1E9BF0; --sky-l:#E3F2FD;
  --coral:#E8402E; --coral-l:#FDECEA;
  --amber:#FF9F1C; --amber-l:#FFF4E2;
  --violet:#8A3FFC; --violet-l:#F1EAFF; --vio:#8A3FFC; --vio-l:#F1EAFF;
  --gold:#FFB400; --gold-l:#FFF6DC;
  --navy:#13203A; --navy2:#22345A;
  --blue:#1E6FE8; --blue-l:#E6EFFD;
  --bg:#F2F5F9;
  --s:0 1px 0 rgba(19,32,58,.04); --sl:0 2px 10px rgba(19,32,58,.06);
}
body[data-line="conversation"]{--route:var(--l1);--route-d:var(--l1d);--no:'1'}
body[data-line="grammar"]{--route:var(--l2);--route-d:var(--l2d);--no:'2'}
body[data-line="playground"]{--route:var(--l3);--route-d:var(--l3d);--no:'3'}
body[data-line="game"]{--route:var(--l4);--route-d:var(--l4d);--no:'4'}
body[data-line="poetry"]{--route:var(--l5);--route-d:var(--l5d);--no:'5'}
body[data-line="writing"]{--route:var(--l6);--route-d:var(--l6d);--no:'6'}
body[data-line="news"]{--route:var(--l7);--route-d:var(--l7d);--no:'7'}
body[data-line]{--route-l:color-mix(in srgb,var(--route) 16%,#fff)}

html,body{word-break:keep-all}
body[data-line]{background:var(--page) !important;color:var(--ink);font-family:var(--kr)}
body[data-line] :is(h1,h2,h3,h4){letter-spacing:-0.02em}
body[data-line] :is(button,input,select,textarea){font-family:inherit}
body[data-line]::before{display:none !important}
:focus-visible{outline:3px solid var(--sig);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ── 머리 줄: 흰 바탕 + 노선 색 굵은 띠 + 노선 번호 동그라미 ── */
body[data-line]:not([data-line="hub"]) > header,
body[data-line]:not([data-line="hub"]) .top{
  background:#fff !important;color:var(--ink) !important;
  border-bottom:6px solid var(--route) !important;box-shadow:none !important;backdrop-filter:none !important;
}
body[data-line] > header::after{display:none !important}
body[data-line] header .logo,body[data-line] header b{color:var(--ink) !important;font-family:var(--ui) !important;font-weight:800 !important;letter-spacing:0}
body[data-line]:not([data-line="hub"]) header .logo{display:inline-flex !important;align-items:center;white-space:nowrap;gap:4px;background:none !important;-webkit-text-fill-color:currentColor !important}
body[data-line] header .logo span,body[data-line] header .logo .la{color:var(--route-d) !important;background:none !important;-webkit-text-fill-color:currentColor !important}
body[data-line]:not([data-line="hub"]) header .logo::before{
  content:var(--no);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:30px;height:30px;margin-right:8px;border-radius:50%;border:5px solid var(--route);background:#fff;
  font-family:var(--disp);font-weight:800;font-size:.85rem;color:var(--ink);vertical-align:middle;box-sizing:border-box;
}
body[data-line] header .ls,body[data-line] header small{color:var(--ink2) !important}
body[data-line] header .rb,body[data-line] header a.rb,body[data-line] .top a{
  background:var(--page) !important;color:var(--ink) !important;border:1px solid var(--hair) !important;box-shadow:none !important
}
body[data-line] header .nb{background:#fff !important;color:var(--route-d) !important;border:2px solid var(--route) !important}
body[data-line] header .who{color:var(--ink2) !important}
body[data-line] header .btn.ghost{background:var(--page) !important;color:var(--ink) !important}

/* ── 단계 줄: 노선 위의 정거장 ── */
body[data-line] .sn{
  background-color:#fff !important;border-bottom:1px solid var(--hair) !important;
  background-image:linear-gradient(var(--route-l),var(--route-l)) !important;
  background-size:100% 4px !important;background-position:0 50% !important;background-repeat:no-repeat !important;
  backdrop-filter:none !important;
}
body[data-line] .sn .sb{
  border:3px solid var(--route) !important;border-radius:999px !important;background:#fff !important;color:var(--ink) !important;
  font-family:var(--ui) !important;box-shadow:none !important;transform:none !important;
}
body[data-line] .sn .sb.on{background:var(--route) !important;color:#fff !important}
body[data-line] .sn .sb.dn,body[data-line] .sn .sb.done{background:var(--route-l) !important}

/* ── 탭 ── */
body[data-line] .tabs button{border:2px solid var(--hair) !important;background:#fff !important;color:var(--ink2) !important;border-radius:999px !important;font-family:var(--kr)}
body[data-line] .tabs button.on,body[data-line] .tabs button[aria-selected="true"]{background:var(--route) !important;border-color:var(--route) !important;color:#fff !important}

/* ── 카드: 얇은 선, 그림자 없이 ── */
body[data-line] .cd,body[data-line] .card,body[data-line] .box,body[data-line] section.card,body[data-line] .unit,body[data-line] .intro{
  box-shadow:none !important;border:1px solid var(--hair) !important;
}

/* ── 단추 ── */
body[data-line] .btn{font-family:var(--ui);letter-spacing:0}
body[data-line="conversation"] .btn:not(.ghost):not(.mic),
body[data-line="grammar"] .btn:not(.ghost),
body[data-line="teacher"] .btn:not(.ghost):not(.warn),
body[data-line="lessonplan"] .btn:not(.ghost){background:var(--route) !important;color:#fff !important}
body[data-line] .btn.ghost{background:var(--route-l) !important;color:var(--route-d) !important}
body[data-line] .btn.mic{background:var(--l7) !important;color:#fff !important}

/* ── 앱별 손질 ── */
/* 회화 방·문법 탐구실 */
body[data-line] .chip.on{background:var(--route) !important;border-color:var(--route) !important;color:#fff !important}
body[data-line] .card:hover{border-color:var(--route) !important}
body[data-line="grammar"] .pt{background:var(--route-l) !important;border-color:var(--route-l) !important;color:var(--route-d) !important}
body[data-line="grammar"] .unit .u,body[data-line="grammar"] .ph .u{color:var(--route-d) !important}
body[data-line="grammar"] .tok.sel{border-color:var(--route) !important;background:var(--route-l) !important;color:var(--route-d) !important}
body[data-line="conversation"] .who{background:var(--route) !important}
body[data-line="conversation"] .bub.B .who{background:var(--l6) !important}
body[data-line="conversation"] .cm.me{background:var(--route) !important}

/* 게임방: 어두운 화면 → 밝은 노선 화면 */
body[data-line="game"]{
  --bg:#F2F5F9;--surface:#FFFFFF;--surface2:#EEF2F7;
  --accent1:#00A859;--accent2:#E8402E;--accent3:#FFC93C;--accent4:#1E9BF0;
  --text:#13203A;--text2:#4B5872;--seed:#00A859;--sprout:#1E9BF0;--tree:#8A3FFC;
}
body[data-line="game"] header{border-bottom:6px solid var(--route) !important}
body[data-line="game"] .game-card,body[data-line="game"] .stat-card,body[data-line="game"] .rank-item,body[data-line="game"] .chat-banner,
body[data-line="game"] .q-card,body[data-line="game"] .choice-btn,body[data-line="game"] .word-token,body[data-line="game"] .login-card,
body[data-line="game"] .result-card,body[data-line="game"] .badge-item{border:1px solid var(--hair) !important;box-shadow:none !important}
body[data-line="game"] .bottom-nav,body[data-line="game"] #bottomNav{background:#fff !important;border-top:1px solid var(--hair) !important}
body[data-line="game"] .nav-btn.active{color:var(--route-d) !important}
body[data-line="game"] .player-bar,body[data-line="game"] #playerBar{background:#fff !important;border-bottom:1px solid var(--hair) !important}
body[data-line="game"] .btn-primary{background:var(--route) !important;color:#fff !important}

/* 선생님 도구(교사 페이지·지도안·가이드) */
body[data-line="teacher"] .room{border:1px solid var(--hair) !important}
body[data-line="teacher"] .code{color:var(--ink) !important;font-family:var(--disp) !important}
body[data-line="lessonplan"]{--teal:#2E3B55;--teal2:#E8ECF3}
body[data-line="guide"] .top{border-bottom:6px solid var(--lt) !important}
body[data-line="guide"] .top h1{color:var(--ink) !important;font-family:var(--disp) !important}
body[data-line="guide"] .top .lead{color:var(--ink2) !important}
body[data-line="guide"] .btnname{background:color-mix(in srgb,var(--sig) 28%,#fff) !important;border-color:var(--sig) !important}

/* 학생 입장 창(english-class.js) */
.ecl-btn,.ecl-send{background:var(--route,#2E3B55) !important}
.ecl-in:focus{border-color:var(--route,#2E3B55) !important}
.ecl-sub{color:var(--route-d,#1B2740) !important}
/* AI 음악(english-ai.js) */
.eai-go{background:var(--route,#2E3B55) !important}
.eai-chip.on,.eai-mode.on{border-color:var(--route,#2E3B55) !important}
.eai-chip.on{background:var(--route,#2E3B55) !important}
/* 머리 줄 부제는 넓은 화면에서만 */
body[data-line] header .logo small{white-space:nowrap}
@media (max-width:640px){ body[data-line]:not([data-line="hub"]) header .logo small{display:none !important} }

/* ── 큰 제목 두께 (2026-10-05 선생님 요청 "조금만 얇게") ──
   예전 900·800 → 큰 제목 700, 소제목 650. Pretendard Variable 이라 중간 굵기도 그대로 보인다. */
body[data-line] h1{font-weight:700 !important}
body[data-line] :is(h2,h3){font-weight:650 !important}
body[data-line] header .logo,body[data-line] header b{font-weight:700 !important}
body[data-line="hub"] .mast h1 small{font-weight:700 !important}
/* 첫 화면 노선도의 앱 이름("영어 회화 방", "영어 놀이터" …)과 앱 머리 줄 이름은 한 단계 더 가볍게 (2026-10-05 선생님 요청 "너무 굵어서 어색") */
body[data-line="hub"] .stop h3{font-weight:600 !important;font-size:1.08rem}
body[data-line="hub"] .stop .en{font-weight:600}
body[data-line] header .logo{font-weight:650 !important}
/* 첫 화면 큰 제목 다듬기 (2026-10-05): 회색 + 아주 굵은 한글 부제가 탁해 보였음
   → "EAIM English"는 로고처럼 굵게 두되 조금만 가볍게, 한글 부제는 진한 남색 + 보통 굵기로 맑게 */
body[data-line="hub"] .mast h1{font-weight:750 !important;letter-spacing:-0.025em}
body[data-line="hub"] .mast h1 small{color:var(--ink) !important;font-weight:500 !important;letter-spacing:-0.01em}
body[data-line="hub"] h2.sec{font-weight:650 !important}
/* 첫 화면 노선도 마무리 (2026-10-05): 작은 알약 글씨는 한 단계 가볍게, "타러 가기"에는 → 를 붙여 누르는 곳임을 보이게 */
body[data-line="hub"] .chips span{font-weight:500 !important}
body[data-line="hub"] .stop .go{font-weight:650}
body[data-line="hub"] .stop .go::after{content:'→';display:inline-block;margin-left:5px;transition:transform .15s}
body[data-line="hub"] .stop:hover .go::after,body[data-line="hub"] .stop:focus-visible .go::after{transform:translateX(3px)}
/* 노선도 정거장 숫자 자리 (2026-10-05 선생님 "숫자 위치가 어색"):
   동그라미를 카드 가운데 높이에 맞추고, 노선 줄은 정거장과 정거장 사이만 잇는다(첫 정거장 위·끝 정거장 아래로 삐져나오지 않게). */
body[data-line="hub"] .route::before{display:none !important}
body[data-line="hub"] .stop{align-items:center !important;position:relative}
body[data-line="hub"] .stop::before{content:'';position:absolute;left:25px;top:50%;height:calc(100% + 12px);width:6px;border-radius:3px;background:var(--hair);z-index:0}
body[data-line="hub"] .stop:last-child::before{display:none}
body[data-line="hub"] .stop .rd{line-height:1;font-variant-numeric:tabular-nums;padding-top:1px;box-sizing:border-box}
/* 노선 양 끝 (2026-10-05 선생님 "1번 위·7번 아래에도 줄이 조금 있으면"): 줄이 정거장 밖으로 조금 이어지다 흐려지게 — 노선이 계속 이어지는 느낌 */
body[data-line="hub"] .stop:first-child::after{content:'';position:absolute;left:25px;bottom:50%;height:calc(50% + 26px);width:6px;border-radius:3px;background:linear-gradient(to top,var(--hair) 55%,rgba(220,227,236,0));z-index:0}
body[data-line="hub"] .stop:last-child::before{display:block;height:calc(50% + 26px);background:linear-gradient(to bottom,var(--hair) 55%,rgba(220,227,236,0))}
body[data-line="hub"] .route{padding-top:22px;padding-bottom:18px}