@import url('/css/konglish-brand.css?v=20261022');
/* web2.css — 2026-10-21 콩글리시 웹 개편(1단계) 공통 스타일 (스테이징: /next/ 경로)
   · 새 색을 만들지 않는다: D' 5색(보라·파랑·오렌지·그린·핑크) + 크림 배경 + 잉크 #3A2A0A + 링크 #17804C. 구 브랜드 노랑 없음.
   · 크기는 rem(글자 크게 설정 = html font-size 비율을 그대로 따른다), 터치 타겟 44px 이상, 포커스 링 3px.
   · 움직임 줄이기·눌림 피드백은 /css/konglish-tokens.css 공통 규칙이 처리(이 파일은 움직임을 거의 쓰지 않는다). */
/* 2026-10-24(사장님 확정) 제목 글꼴 고운돋움(Gowun Dodum, OFL — fonts/OFL-GowunDodum.txt). 같은 도메인에서 서브셋 woff2 154KB(KS X 1001 한글 2,350자+영문·기호)를 직접 내려받는다.
   굵기 1종(보통)뿐이라 font-synthesis-weight:none 으로 가짜 굵게를 막는다. 서브셋 밖 글자는 Noto Sans KR 로 대체. */
@font-face { font-family: 'Gowun Dodum'; src: url('/next/fonts/GowunDodum-subset.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --w-ink: #3A2A0A;
  --w-mute: #6B5A3E;        /* 크림 위 보조 글자(대비 5.7:1) */
  --w-link: #17804C;
  --w-link-hover: #0F5E37;
  --w-cream: #FFF3E4;       /* 카드 안 보조 박스 */
  --w-line: #E7DCC4;
  --w-card: #FFFFFF;
  --w-focus: #2E63E0;  /* 2026-10-24 포커스 링: 크림 위 4.94, 파스텔 위 3.73~4.02 (크리에이티브 가이드 §5) */
  /* 2026-10-24(색 A안) — 파스텔 면은 --card-*-from/to, 진한 포인트색은 --accent-*(css/konglish-tokens.css). 예전 --w-*-a/b(진한 그라데이션)는 폐기. */
  --w-green-b: var(--accent-green); --w-purple-b: var(--accent-purple); --w-blue-b: var(--accent-blue); --w-orange-b: var(--accent-orange); --w-pink-b: var(--accent-pink);
  --w-radius: 16px;
  --w-font-display: 'Gowun Dodum', 'Noto Sans KR', sans-serif;
  --w-font-body: 'Noto Sans KR', 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --w-font-en: 'Plus Jakarta Sans', 'Noto Sans KR', sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--w-ink); font-family: var(--w-font-body); font-size: 1rem; line-height: 1.6;
  background: #F6F5F1; background: linear-gradient(180deg, #FBF7EF 0%, #FAF4E8 45%, #F6F5F1 100%);
  word-break: keep-all; overflow-wrap: anywhere;
}
a { color: var(--w-link); }
a:hover { color: var(--w-link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--w-focus); outline-offset: 3px; border-radius: 6px;
}
.w-skip { position: absolute; left: -999px; top: 8px; background: var(--w-ink); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; }
.w-skip:focus { left: 8px; }
.w-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.w-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 헤더 */
.w-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; flex-wrap: wrap; }
.w-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.w-nav a, .w-nav button.w-link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; font-weight: 700; font-size: 1rem; text-decoration: none; border-radius: 12px; background: none; border: 0; color: var(--w-link); cursor: pointer; font-family: inherit; }
.w-nav a:hover, .w-nav button.w-link:hover { background: rgba(23,128,76,0.08); color: var(--w-link-hover); }

/* 버튼 */
.w-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 22px; line-height: 1.35; text-align: center; border-radius: 14px; border: 2px solid transparent; font-family: var(--w-font-body); font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none; }
.w-btn.lg { min-height: 56px; padding: 10px 32px; border-radius: 16px; }
.w-btn.primary { background: var(--w-link); color: #fff; }
.w-btn.primary:hover { background: var(--w-link-hover); color: #fff; }
.w-btn.dark { background: var(--w-ink); color: #fff; }
.w-btn.dark:hover { color: #fff; background: #2a1d05; }
.w-btn.ghost { background: #fff; color: var(--w-ink); border-color: var(--w-line); }
.w-btn.ghost:hover { color: var(--w-ink); border-color: #cdbf9f; }
.w-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* 카드·배지 */
.w-card { background: var(--w-card); border-radius: 24px; padding: 28px; box-shadow: 0 16px 36px rgba(58,42,10,0.10); }
.w-card.flat { box-shadow: 0 2px 10px rgba(58,42,10,0.08); border-radius: var(--w-radius); padding: 20px; }
.w-badge { display: inline-block; font-size: 0.9rem; font-weight: 700; color: var(--w-mute); background: var(--w-cream); border-radius: 999px; padding: 6px 14px; }
.w-chip { display: inline-block; font-size: 0.85rem; font-weight: 700; border-radius: 999px; padding: 4px 12px; color: #1B4FC4; background: #E8F0FF; }
.w-sentence { background: var(--w-cream); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.w-en { font-family: var(--w-font-en); font-weight: 800; font-size: 1.6rem; line-height: 1.3; }
.w-ko { font-size: 1.05rem; color: var(--w-mute); }
.w-h1 { font-family: var(--w-font-display); font-weight: 400; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.2; margin: 0; text-wrap: balance; }
.w-h2 { font-family: var(--w-font-display); font-weight: 400; font-size: 1.5rem; margin: 0; }
.w-lead { font-size: 1.1rem; line-height: 1.7; color: var(--w-mute); margin: 0; max-width: 34rem; }
.w-icon { flex: none; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.w-icon svg { width: 22px; height: 22px; stroke: var(--card-ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.w-ic-green { background: linear-gradient(150deg, var(--card-green-from), var(--card-green-to)); }
.w-ic-blue { background: linear-gradient(150deg, var(--card-blue-from), var(--card-blue-to)); }
.w-ic-orange { background: linear-gradient(150deg, var(--card-orange-from), var(--card-orange-to)); }
.w-ic-purple { background: linear-gradient(150deg, var(--card-purple-from), var(--card-purple-to)); }
.w-ic-pink { background: linear-gradient(150deg, var(--card-pink-from), var(--card-pink-to)); }
.w-feature { display: flex; gap: 14px; align-items: flex-start; }
.w-feature b { font-family: var(--w-font-display); font-weight: 400; font-size: 1.25rem; display: block; }
.w-feature span { font-size: 0.95rem; color: var(--w-mute); line-height: 1.6; }
.w-foot { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 40px 0 28px; font-size: 0.9rem; }
.w-copy a { display: inline; min-height: 0; min-width: 0; padding: 0; text-decoration: underline; }
.w-copy { flex-basis: 100%; margin: 4px 0 0; font-size: 0.85rem; color: var(--w-mute); }
.w-foot a:first-child { padding-left: 0; }
.w-foot a { min-height: 44px; min-width: 44px; padding: 0 8px; justify-content: center; display: inline-flex; align-items: center; }

/* 대화상자(로그인·안내) */
.w-modal-back { position: fixed; inset: 0; background: rgba(58,42,10,0.55); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 1000; }
.w-modal-back.open { display: flex; }
.w-modal { width: 100%; max-width: 420px; max-height: 92vh; overflow: auto; background: #fff; border-radius: 24px; padding: 28px; position: relative; }
.w-modal h2 { margin: 0 0 8px; }
.w-x { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border: 0; background: none; font-size: 1.5rem; cursor: pointer; color: var(--w-ink); border-radius: 12px; }
.w-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; margin-top: 14px; cursor: pointer; }
.w-check input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--w-link); }
.w-google { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 14px; border: 2px solid var(--w-line); background: #fff; color: var(--w-ink); font-weight: 700; text-decoration: none; margin-top: 20px; }
.w-google[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.w-note { font-size: 0.9rem; color: var(--w-mute); margin: 8px 0 0; }
.w-err { color: #B3261E; font-weight: 700; }

@media (max-width: 640px) {
  .w-wrap { padding: 0 16px; }
  .w-card { padding: 22px; }
  .w-en { font-size: 1.4rem; }
}

/* ── 왼쪽 메뉴 + 오른쪽 내용 틀(학습/자료실/내 학습현황 공통, /next/side.js 가 붙인다) ── */
.w-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 4px; padding-bottom: 20px; }
.w-shell-main { min-width: 0; }
.w-side { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; -webkit-overflow-scrolling: touch; }
.w-side a { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 12px; white-space: nowrap; text-decoration: none; font-weight: 700; font-size: 0.95rem; color: var(--w-ink); background: #fff; border: 1px solid var(--w-line); }
.w-side a:hover { color: var(--w-ink); border-color: #cdbf9f; }
.w-side a[aria-current="page"] { background: var(--w-ink); color: #fff; border-color: var(--w-ink); }
.w-side .w-side-h { flex: none; align-self: center; font-size: 0.8rem; font-weight: 700; color: var(--w-mute); padding: 0 6px; white-space: nowrap; }
@media (min-width: 1024px) {
  .w-shell { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; padding-top: 24px; }
  .w-side { flex-direction: column; gap: 4px; position: sticky; top: 16px; align-self: start; overflow: visible; padding: 0; }
  .w-side a { min-height: 48px; padding: 0 14px; border: 0; background: none; font-size: 1rem; white-space: normal; }
  .w-side a:hover { background: #fff; }
  .w-side a.sub { min-height: 40px; padding-left: 30px; font-weight: 500; font-size: 0.95rem; }
  .w-side a[aria-current="page"] { background: var(--w-ink); color: #fff; }
  .w-side .w-side-h { align-self: flex-start; padding: 14px 14px 4px; }
}

/* ══ 공통 부품 v1 — 모든 웹 페이지가 이것만 쓴다(페이지·메뉴별로 달라지는 값 금지). 값은 아래 기준값 변수만 사용 ══ */
:root {
  --w-r-sm: 8px; --w-r-ctl: 14px; --w-r-card: 16px; --w-r-big: 24px; --w-r-pill: 999px;
  --w-sh-card: 0 2px 10px rgba(58, 42, 10, 0.08); --w-sh-lift: 0 6px 18px rgba(58, 42, 10, 0.14); --w-sh-pop: 0 16px 36px rgba(58, 42, 10, 0.10);
  --w-read: 44rem; --w-form: 30rem; --w-gap: 16px;
  --w-fs-h1: clamp(1.8rem, 5vw, 2.6rem); --w-fs-h2: 1.5rem; --w-fs-h3: 1.15rem; --w-fs-body: 1rem; --w-fs-sm: 0.9rem; --w-fs-xs: 0.85rem;
}
/* 페이지 틀 */
.w-back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.w-title { font-family: var(--w-font-display); font-weight: 400; font-size: var(--w-fs-h1); line-height: 1.2; margin: 4px 0 0; text-wrap: balance; }
.w-title + .w-lead { margin-top: 8px; }
.w-page { max-width: var(--w-read); margin-inline: auto; }
/* 2026-10-24(QA 핫픽스): 고정 폭(width=620) 본문 SVG 가 새 shell 에서 article 폭을 키워 /method 가 폰에서 가로로 넘치던 것을 막는다 */
.w-page svg { max-width: 100%; height: auto; }
.w-section { margin-top: 28px; }
.w-h3 { font-family: var(--w-font-display); font-weight: 400; font-size: var(--w-fs-h3); margin: 0; line-height: 1.3; }
.w-stack { display: flex; flex-direction: column; gap: var(--w-gap); }
.w-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.w-mute { color: var(--w-mute); }
.w-sm { font-size: var(--w-fs-sm); } .w-xs { font-size: var(--w-fs-xs); }
.w-num { font-family: var(--w-font-display); font-size: 2rem; line-height: 1.2; }
.w-grid { display: grid; gap: var(--w-gap); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); margin: 20px 0 0; padding: 0; list-style: none; }
.w-grid.c2 { --cols: 2; } .w-grid.c4 { --cols: 4; } .w-grid > li { min-width: 0; }
@media (max-width: 820px) { .w-grid { --cols: 2; } .w-grid.c4 { --cols: 2; } }
@media (max-width: 520px) { .w-grid { --cols: 1; } .w-grid.keep2 { --cols: 2; } }
/* 표면 */
.w-item { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--w-ink); background: #fff; border-radius: var(--w-r-card); padding: 20px; box-shadow: var(--w-sh-card); min-height: 44px; height: 100%; }
.w-item:hover { color: var(--w-ink); box-shadow: var(--w-sh-lift); }
.w-item b { font-family: var(--w-font-display); font-weight: 400; font-size: 1.2rem; }
.w-item img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--w-r-sm); background: var(--w-cream); }
.w-item .d { font-size: var(--w-fs-sm); color: var(--w-mute); line-height: 1.6; }
/* 2026-10-25(사장님 지시 — 영상은 쇼츠만): 세로 9:16 카드 그리드. 쇼츠 썸네일은 좌우 검은 띠가 있는 16:9 프레임이라 가운데를 잘라(cover) 세로로 보여 준다. 데스크톱 4열·태블릿 3열·폰 2열. */
.w-grid.shorts { --cols: 4; gap: 16px; }
@media (max-width: 1000px) { .w-grid.shorts { --cols: 3; } }
@media (max-width: 520px) { .w-grid.shorts { --cols: 2; gap: 12px; } }
.w-item.w-short { padding: 12px; gap: 8px; }
.w-item.w-short img { aspect-ratio: 9 / 16; }
.w-item.w-short .w-h3 { font-size: 1rem; line-height: 1.4; margin: 0; overflow-wrap: anywhere; }
.w-item.w-short .w-btn { min-height: 44px; padding-inline: 10px; font-size: .9rem; }
.w-box { background: var(--w-cream); border-radius: var(--w-r-card); padding: 14px 16px; line-height: 1.7; }
.w-box.green { border-left: 4px solid var(--w-green-b); } .w-box.pink { border-left: 4px solid var(--w-pink-b); } .w-box.blue { border-left: 4px solid var(--w-blue-b); } .w-box.purple { border-left: 4px solid var(--w-purple-b); } .w-box.orange { border-left: 4px solid var(--w-orange-b); }
.w-box > :first-child { margin-top: 0; } .w-box > :last-child { margin-bottom: 0; }
.w-kpi { background: var(--w-cream); border-radius: var(--w-r-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.w-kpi > span { font-size: var(--w-fs-sm); color: var(--w-mute); font-weight: 700; }
/* 칩(톤은 D' 5색 파생) */
.w-chip.green { color: #0F5E37; background: #E3F6EC; } .w-chip.pink { color: #9B2C58; background: #FFE9F1; } .w-chip.purple { color: #4A2FB8; background: #EFEAFF; } .w-chip.cream { color: var(--w-ink); background: var(--w-cream); }
/* 목록 */
.w-list, .l-list { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: var(--w-r-card); box-shadow: var(--w-sh-card); display: flex; flex-direction: column; }
.w-row, .l-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; border-bottom: 1px solid var(--w-line); text-decoration: none; color: inherit; }
.w-row:last-child, .l-row:last-child { border-bottom: 0; } a.w-row:hover { background: var(--w-cream); color: inherit; }
.w-row .t, .l-row .t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .w-row .t b { font-weight: 700; } .w-row .s, .l-row .sub { font-size: var(--w-fs-sm); color: var(--w-mute); } .w-row .e { flex: none; font-size: var(--w-fs-sm); color: var(--w-mute); }
.w-empty, .l-empty { text-align: center; padding: 28px 12px; color: var(--w-mute); }
/* 폼 */
.w-field { display: flex; flex-direction: column; gap: 6px; } .w-field > label { font-weight: 700; font-size: var(--w-fs-sm); }
.w-input, .w-select, .w-textarea { width: 100%; min-height: 48px; padding: 0 16px; border: 2px solid var(--w-line); border-radius: var(--w-r-ctl); background: #fff; color: var(--w-ink); font: inherit; }
.w-textarea { padding: 12px 16px; resize: vertical; }
.w-input::placeholder, .w-textarea::placeholder { color: var(--w-mute); opacity: 1; }
/* 표 */
.w-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.w-table { width: 100%; border-collapse: collapse; font-size: var(--w-fs-sm); }
.w-table th, .w-table td { padding: 10px 12px; border-bottom: 1px solid var(--w-line); text-align: left; vertical-align: top; }
.w-table th { color: var(--w-mute); font-weight: 700; white-space: nowrap; }
.w-row[role="button"] { cursor: pointer; } .w-row[role="button"]:hover { background: var(--w-cream); }
.w-chip { max-width: 100%; }
.w-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.w-title strong { color: var(--w-link); font-weight: inherit; }
.w-arrow { text-align: center; color: var(--w-mute); padding: 2px 0; }
div.l-card { cursor: default; }
/* 문서 목차(스크롤 스파이): 긴 안내 페이지 공통 부품(.gwrap 2단 + .gtoc 고정 목차) */
.gwrap { margin-top: 1.5rem; display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.gmain { min-width: 0; }
.gtoc { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
.gtoc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gtoc a { display: flex; align-items: center; min-height: 44px; padding: 6px 10px; text-decoration: none; color: var(--w-mute); font-weight: 700; border-radius: var(--w-r-sm); }
.gtoc a.hovering, .gtoc a.on { background: var(--w-cream); color: var(--w-ink); }
.gtoc.hovering-active a.on:not(.hovering) { background: transparent; color: var(--w-mute); }
@media (max-width: 1279px) {
  .gwrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gtoc { position: static; max-height: none; overflow: visible; }
  .gtoc ol { flex-direction: row; flex-wrap: wrap; gap: 8px; }
}
main img { max-width: 100%; height: auto; }
@media (max-width: 520px) { .w-grid.c2, .w-grid.c4 { --cols: 1; } .w-grid.c4.keep2, .w-grid.c2.keep2 { --cols: 2; } }
.w-center { text-align: center; margin-inline: auto; }
.w-row.on, a.w-row[aria-current] { background: var(--w-cream); }
.w-btn.speaking, .l-sp.speaking { outline: 3px solid var(--w-focus); outline-offset: 2px; }
.w-chip[hidden] { display: none; }
.w-inline.between { justify-content: space-between; }
.l-ans.wrap { flex-wrap: wrap; } .l-ans.wrap > button { flex: 1 1 45%; }
.w-scroll { max-height: 20rem; overflow-y: auto; }
button.w-row, button.l-row { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--w-line); text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.w-row:last-child, button.l-row:last-child { border-bottom: 0; } button.w-row:hover, button.l-row:hover { background: var(--w-cream); }
.w-list, .l-list { padding: 6px 0; }
.w-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.w-btn.right { border-color: var(--w-link); } .w-btn.wrong { border-color: #B3261E; }
/* 현재 경로(학습 홈 › 단어 학습 › 레벨별 단어): /next/web2.js 가 data-crumb 를 보고 머리글 아래에 붙인다 */
.w-crumb { padding-top: 4px; padding-bottom: 0; }
.w-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: var(--w-fs-sm); color: var(--w-mute); }
.w-crumb li { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.w-crumb li + li::before { content: "›"; color: var(--w-mute); }
.w-crumb a { text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.w-crumb [aria-current="page"] { color: var(--w-ink); font-weight: 700; }
/* QA 22:44 경미 일괄 */
.l-big { overflow-wrap: break-word; word-break: normal; }
.w-stack.tight { gap: 8px; align-items: flex-start; }
.w-box + .w-box, .w-card + .w-box, .w-box + .w-card { margin-top: var(--w-gap); }
.w-chip.cream { background: var(--w-line); }
.w-row .w-btn { flex: none; white-space: nowrap; }
.w-list:empty { display: none; }
.w-nav a, .w-nav button.w-link { min-width: 44px; justify-content: center; }
@media (max-width: 400px) { .l-ans button { font-size: 1.05rem; padding: 0 6px; } }
@media (min-width: 1024px) { .w-side a.sub { min-height: 44px; } }
/* 로딩 중 레이아웃 이동 방지: 스크롤바 자리 고정, 머리글 로그인 상태 표시는 class 로, 본문 자리 미리 확보 */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
.lo .w-li, .li .w-lo { display: none; }
/* 2026-10-24(QA 차단): .w-nav button.w-link{display:inline-flex}(0,2,1)가 위 규칙(0,2,0)을 이겨 로그인 상태에도 '로그인' 버튼이 보이던 것을 명시도(0,3,0)로 올려 숨김 */
.lo .w-nav .w-li, .li .w-nav .w-lo { display: none; }
.w-shell-main { min-height: 70vh; display: flex; flex-direction: column; }
.w-shell-main > #main { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 100vh; }
.w-shell-main > #main > .w-foot { margin-top: auto; }
/* 스위치·토스트·파형·아바타 */
.w-switch { position: relative; width: 56px; height: 44px; border-radius: var(--w-r-pill); border: 0; background: transparent; cursor: pointer; padding: 0; flex: none; }
.w-switch::before { content: ""; position: absolute; left: 0; top: 9px; width: 56px; height: 26px; border-radius: var(--w-r-pill); background: var(--w-mute); transition: background 150ms; }
.w-switch[aria-checked="true"]::before { background: var(--w-link); }
.w-switch-knob { position: absolute; top: 12px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(58, 42, 10, 0.25); transition: transform 150ms; }
.w-switch[aria-checked="true"] .w-switch-knob { transform: translateX(30px); }
.w-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-12px); background: var(--w-ink); color: #fff; padding: 10px 18px; border-radius: var(--w-r-pill); font-weight: 700; opacity: 0; pointer-events: none; transition: opacity 200ms, transform 200ms; z-index: 1100; max-width: calc(100% - 32px); }
.w-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.w-wave { display: flex; align-items: flex-end; gap: 2px; height: 40px; }
.w-wave > i { flex: 1; background: var(--w-link); border-radius: 2px; height: var(--v, 3px); transition: height 60ms; }
.l-bar > i, .w-bar > i { width: var(--v, 0); }
.w-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.w-main audio, main audio { width: 100%; }
@media (prefers-reduced-motion: reduce) { .w-switch::before, .w-switch-knob, .w-toast, .w-wave > i { transition: none; } }

/* ══ 학습 화면 공통(옛 learn.css 를 이 파일로 합침) ══ */
/* learn.css — 웹 학습 화면 재설계(2단계) 공통: 모바일 단일 칼럼 기준, 데스크톱은 가운데 고정폭(560~720px)+좌측 학습 메뉴 */
.l-main { width: 100%; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.l-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 0.95rem; font-weight: 700; text-decoration: none; }
.l-back svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.l-title { display: flex; align-items: center; gap: 14px; }
.l-title .w-icon { width: 52px; height: 52px; border-radius: 16px; }
.l-title .w-icon svg { width: 26px; height: 26px; }
.l-title h1 { margin: 0; font-family: var(--w-font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.2; }
.l-title small { font-size: 0.9rem; color: var(--w-mute); display: block; }
.l-cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: 16px; background: var(--w-link); color: #fff; font-family: var(--w-font-display); font-size: 1.3rem; text-decoration: none; border: 0; cursor: pointer; width: 100%; box-shadow: 0 8px 20px rgba(31, 158, 95, 0.28); }
.l-cta:hover { color: #fff; filter: brightness(0.95); }
.l-tabs, .w-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.l-tabs button, .w-tabs button { min-height: 44px; padding: 0 16px; border: 2px solid var(--w-line); border-radius: 999px; background: #fff; color: var(--w-ink); font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.l-tabs button[aria-selected="true"], .w-tabs button[aria-selected="true"] { background: var(--w-ink); color: #fff; border-color: var(--w-ink); }
.l-row .en { font-family: var(--w-font-en); font-weight: 800; font-size: 1.15rem; }
.l-sp { flex: none; width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--w-cream); color: var(--w-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.l-sp svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.l-sp.speaking { outline: 3px solid var(--w-focus); }
.l-count { text-align: center; font-family: var(--w-font-en); font-weight: 800; font-size: 1rem; color: var(--w-mute); }
.l-bar, .w-bar { height: 10px; border-radius: 999px; background: #EFE6D2; }
.l-bar > i, .w-bar > i { display: block; height: 10px; border-radius: 999px; background: var(--w-green-b); }
.l-note { text-align: center; font-size: 0.85rem; line-height: 1.6; color: var(--w-mute); margin: 0; }
/* 카드 */
.l-cardwrap { position: relative; padding-bottom: 14px; }
.l-cardwrap > .ghost { position: absolute; left: 16px; right: 16px; top: 22px; bottom: -12px; border-radius: 28px; background: var(--w-purple-b); opacity: 0.25; transform: rotate(-2deg); }
.l-card { position: relative; min-height: 360px; border-radius: 28px; background: #fff; padding: 28px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; box-shadow: 0 18px 40px rgba(58, 42, 10, 0.12); border: 0; font: inherit; color: inherit; cursor: pointer; width: 100%; text-align: center; }
.l-chip { font-size: 0.85rem; font-weight: 700; color: #4A2FB8; background: #EFEAFF; border-radius: 999px; padding: 5px 12px; }
.l-big { font-family: var(--w-font-en); font-weight: 800; font-size: 2.5rem; line-height: 1.15; }
.l-ipa { font-family: var(--w-font-en); font-weight: 600; font-size: 1.05rem; color: var(--w-mute); }
.l-mean { width: 100%; border-top: 2px dashed #EFE6D2; margin-top: 6px; padding-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 84px; }
.l-mean small { font-size: 0.85rem; font-weight: 700; color: var(--w-mute); }
.l-mean b { font-family: var(--w-font-display); font-weight: 400; font-size: 1.75rem; }
.l-mean .hid { color: var(--w-mute); font-size: 1rem; }
.l-ans { display: flex; gap: 12px; }
.l-ans button { flex: 1 1 0; min-height: 60px; border-radius: 18px; font-family: var(--w-font-display); font-size: 1.3rem; cursor: pointer; }
.l-ans .no { border: 2px solid var(--w-line); background: #fff; color: var(--w-ink); }
.l-ans .yes { border: 0; background: var(--w-link); color: #fff; box-shadow: 0 8px 20px rgba(31, 158, 95, 0.28); }
.l-ans button[disabled] { opacity: 0.5; cursor: not-allowed; }
.l-speakbtn { min-height: 48px; padding: 0 20px; border: 0; border-radius: 14px; background: var(--w-cream); color: var(--w-ink); display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; }
.l-speakbtn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.l-done { text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; padding: 28px 16px; background: #fff; border-radius: 24px; box-shadow: 0 8px 24px rgba(58, 42, 10, 0.1); }
.l-done h2 { margin: 0; font-family: var(--w-font-display); font-weight: 400; font-size: 1.6rem; }
.l-main:focus { outline: none; }

/* 2026-10-24(build94): level-test 구역 — 3분 실력 진단 v2 (문장 맞추기 칩·보기 버튼·능력 막대). 기존 --w-* 토큰만 사용 */
.lt-choices { display: flex; flex-direction: column; gap: 10px; }
.lt-choice { width: 100%; justify-content: flex-start; text-align: left; min-height: 56px; overflow-wrap: anywhere; }
.lt-choice[aria-pressed="true"] { border-color: var(--w-link); background: var(--w-cream); }
.lt-slot { min-height: 96px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 12px; background: #fff; border: 2px solid var(--w-line); border-radius: var(--w-r-card); }
.lt-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.lt-token { min-height: 48px; min-width: 44px; padding: 0 16px; border-radius: var(--w-r-ctl); border: 2px solid var(--w-mute); background: #fff; color: var(--w-ink); font-family: var(--w-font-en); font-weight: 700; font-size: 1.05rem; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.lt-token.on { background: #EFEAFF; border-color: var(--w-purple-b); }
.lt-token[disabled] { background: var(--w-line); color: var(--w-mute); border-style: dashed; border-color: var(--w-line); cursor: default; }
.lt-word > i { background: var(--w-blue-b); } .lt-natural > i { background: var(--w-orange-b); } .lt-build > i { background: var(--w-purple-b); } .lt-listen > i { background: var(--w-green-b); }
.lt-word, .lt-natural, .lt-build, .lt-listen { height: 14px; } .lt-word > i, .lt-natural > i, .lt-build > i, .lt-listen > i { height: 14px; }

/* 2026-10-24(합본): ② 자연스러운 표현 학습 화면 — 로컬 색 변수(토큰이 base 에 없어 같은 값으로 선언) */
.lt-study, .lt-note { --lt-pink: #FFC8DC; --lt-green-from: #D6F3E3; --lt-green-to: #BDEBD2; --lt-ink: #3A2A0A; }
.lt-study { border-radius: 18px; padding: 14px; color: var(--lt-ink); min-width: 0; }
.lt-study.good { background: var(--lt-green-from); border: 2px solid var(--w-link); }
.lt-study.bad { background: #fff; border: 2px solid var(--w-line); }
.lt-badge { align-self: flex-start; font-size: 0.8rem; font-weight: 700; border-radius: 999px; padding: 4px 11px; color: var(--lt-ink); }
.lt-badge.good { background: var(--lt-green-to); } .lt-badge.bad { background: var(--lt-pink); }
.lt-en { margin: 0; font-family: var(--w-font-en); font-weight: 700; font-size: 1.1rem; line-height: 1.5; overflow-wrap: anywhere; }
.lt-mark { background: #FFD6B0; color: var(--lt-ink); border-bottom: 3px solid #B95C15; border-radius: 4px; padding: 0 3px; }
.lt-note { margin: 0; background: #fff; border-radius: 16px; padding: 12px 14px; font-size: 0.9rem; line-height: 1.6; color: var(--lt-ink); overflow-wrap: anywhere; }
/* 제목용 글꼴을 쓰는 모든 요소: 가짜 굵게 금지 */
.w-h1, .w-h2, .w-h3, .w-title, .w-num, .w-feature b, .w-item b, .l-title h1, .l-mean b, .l-cta, .l-ans button { font-synthesis-weight: none; }