:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --text: #172033;
  --muted: #667085;
  --line: #dfe5ee;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-soft: #eaf1ff;
  --success: #15803d;
  --success-soft: #eaf8ef;
  --warning: #b45309;
  --warning-soft: #fff7e6;
  --danger: #b42318;
  --danger-soft: #fff0ef;
  --purple: #7c3aed;
  --shadow: 0 14px 40px rgba(28, 39, 56, .08);
  --shadow-soft: 0 6px 22px rgba(28, 39, 56, .06);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --tap: 46px;
  --content: 1240px;
  --base-font: 17px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", Arial, sans-serif;
  font-size: var(--base-font);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
body.large-text { --base-font: 19px; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.hidden { display: none !important; }
.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; }
.skip-link { position: fixed; z-index: 9999; left: 12px; top: -80px; padding: 12px 16px; background: #111827; color: white; border-radius: 10px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid rgba(37, 99, 235, .35); outline-offset: 3px; }

.setup-banner { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 10px 18px; background: #fff4d6; color: #6d4c00; border-bottom: 1px solid #f0d98c; font-size: .92rem; }
.setup-banner a { font-weight: 800; text-decoration: underline; }

.eyebrow { margin: 0 0 5px; color: var(--primary); font-size: .78rem; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.16; letter-spacing: -.045em; margin: 0; }
h2 { font-size: clamp(1.35rem, 2.3vw, 1.85rem); line-height: 1.3; letter-spacing: -.025em; margin: 0; }
h3 { line-height: 1.35; }
p { color: var(--muted); }

.btn, .icon-btn, .nav-btn, .study-tab, .mobile-nav button, .text-btn {
  border: 0;
  border-radius: 12px;
  min-height: var(--tap);
  font-weight: 780;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:active, .icon-btn:active { transform: translateY(1px); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 17px; text-decoration: none; }
.btn.primary { background: var(--primary); color: #fff; box-shadow: 0 7px 18px rgba(37,99,235,.22); }
.btn.primary:hover { background: var(--primary-dark); }
.btn.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.btn.secondary:hover { background: var(--surface-soft); border-color: #c8d1df; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.xl { min-height: 54px; padding-inline: 22px; border-radius: 14px; }
.btn.compact { min-height: 40px; padding: 7px 12px; font-size: .9rem; }
.btn.active-important { background: var(--warning-soft); border-color: #f5c670; color: #8b4b00; }
.btn.active-confused { background: #f3e8ff; border-color: #d8b4fe; color: #6b21a8; }
.text-btn { background: transparent; color: var(--primary); padding: 8px 2px; min-height: 36px; }
.icon-btn { min-width: 44px; padding: 7px 10px; background: var(--surface); color: var(--text); border: 1px solid var(--line); }

input, select, textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid #cfd7e3;
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  padding: 10px 13px;
}
input::placeholder, textarea::placeholder { color: #98a2b3; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.11); outline: none; }
textarea { min-height: 92px; resize: vertical; }

/* Auth */
.auth-screen { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); align-items: center; gap: clamp(30px, 6vw, 90px); max-width: 1180px; margin: 0 auto; padding: 50px 28px; }
.auth-hero { max-width: 700px; }
.brand-mark, .brand-icon { display: inline-grid; place-items: center; background: var(--primary); color: #fff; border-radius: 13px; box-shadow: 0 8px 22px rgba(37,99,235,.24); }
.brand-mark { width: 58px; height: 58px; font-size: 1.4rem; margin-bottom: 25px; }
.auth-hero h1 { margin-bottom: 18px; }
.auth-lead { font-size: 1.12rem; max-width: 650px; }
.feature-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.feature-strip span { background: var(--surface); border: 1px solid var(--line); padding: 8px 12px; border-radius: 999px; color: #344054; font-size: .9rem; font-weight: 680; }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: clamp(24px, 4vw, 38px); }
.auth-card-heading { margin-bottom: 24px; }
.auth-card-heading p { margin: 8px 0 0; }
.form-stack { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; font-weight: 700; color: #344054; }
.fine-print { font-size: .82rem; color: #7b8493; }

/* Shell */
.topbar { position: sticky; top: 0; z-index: 40; height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 max(22px, calc((100vw - var(--content))/2)); background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(214,220,230,.92); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 170px; }
.brand-icon { width: 38px; height: 38px; border-radius: 10px; font-size: .85rem; }
.brand strong, .brand small { display: block; line-height: 1.05; }
.brand small { color: var(--muted); font-size: .7rem; margin-top: 4px; letter-spacing: .08em; text-transform: uppercase; }
.desktop-nav { display: flex; align-items: center; gap: 4px; }
.nav-btn { background: transparent; color: #596273; padding: 7px 14px; }
.nav-btn.active { color: var(--primary); background: var(--primary-soft); }
.top-actions { display: flex; gap: 8px; align-items: center; }
.main-content { max-width: var(--content); margin: 0 auto; padding: 40px 24px 100px; }
.view { display: none; }
.view.active { display: block; animation: fadein .18s ease; }
@keyframes fadein { from { opacity: .5; transform: translateY(4px); } }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 35px; margin-bottom: 30px; }
.page-head > div:first-child { max-width: 750px; }
.page-head p { margin-bottom: 0; }
.compact-head h1 { font-size: clamp(2rem, 3.5vw, 2.8rem); }
.quick-stats { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 10px; min-width: 320px; }
.quick-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 14px 16px; box-shadow: var(--shadow-soft); }
.quick-stat strong { display: block; font-size: 1.45rem; line-height: 1.2; }
.quick-stat span { color: var(--muted); font-size: .83rem; }

.analyze-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 18px 20px; padding: clamp(22px, 4vw, 34px); background: linear-gradient(135deg,#fff 0%,#f8fbff 100%); border: 1px solid #d6e4ff; border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.step-badge { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: white; font-weight: 850; }
.analyze-copy p { margin: 6px 0 0; }
.url-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(260px, 1fr) 190px auto; gap: 10px; }
.url-form input { min-height: 54px; }
.helper-row { grid-column: 1 / -1; display: flex; gap: 9px 18px; flex-wrap: wrap; color: var(--muted); font-size: .82rem; }
.section-block { margin-top: 42px; }
.section-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.video-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.video-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.video-thumb { position: relative; aspect-ratio: 16 / 9; background: #e9edf3; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(17,24,39,.78); color: white; }
.video-card-body { padding: 16px; }
.video-card-body h3 { font-size: 1rem; margin: 2px 0 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .78rem; }

.empty-state { text-align: center; background: var(--surface); border: 1px dashed #cdd5df; border-radius: var(--radius-xl); padding: 38px 20px; }
.empty-state.large { padding: 80px 20px; }
.empty-state h1 { font-size: 2rem; }
.empty-state h3 { margin-bottom: 5px; }
.empty-icon { font-size: 2.3rem; margin-bottom: 9px; }

/* Study */
.study-top-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .6fr); gap: 18px; align-items: start; }
.player-card, .study-summary-card, .stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); }
.player-card { overflow: hidden; }
.video-frame-wrap { width: 100%; aspect-ratio: 16 / 9; background: #101828; }
.video-frame-wrap iframe { width: 100%; height: 100%; display: block; }
.player-info { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 20px 12px; }
.player-info h1 { font-size: 1.25rem; letter-spacing: -.025em; }
.listening-panel { margin: 0 16px 16px; padding: 13px; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; border-radius: 15px; background: #f4f7fb; border: 1px solid #e1e7ef; }
.control-group { min-width: 108px; }
.control-group.grow { min-width: 220px; flex: 1; }
.control-group select { min-height: 40px; padding: 6px 10px; }
.control-label { display: block; color: var(--muted); font-size: .72rem; font-weight: 800; margin-bottom: 3px; }
#nowPlayingText { display: block; font-size: .88rem; max-width: 480px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.study-summary-card { padding: 22px; display: grid; gap: 22px; }
.summary-badge { display: flex; align-items: baseline; gap: 8px; padding: 14px; border-radius: 16px; background: var(--primary-soft); color: var(--primary-dark); }
.summary-badge span { font-size: 2rem; font-weight: 900; line-height: 1; }
.summary-badge small { font-weight: 800; }
.study-summary-card p { margin: 6px 0 0; }
.learning-value { display: flex; align-items: baseline; gap: 5px; border-top: 1px solid var(--line); padding-top: 15px; }
.learning-value span { flex: 1; color: var(--muted); }
.learning-value strong { font-size: 1.7rem; color: var(--success); }
.learning-value small { color: var(--muted); }

.study-tabs { position: sticky; top: 70px; z-index: 25; display: flex; gap: 6px; margin: 28px 0 14px; padding: 7px; background: rgba(245,247,251,.94); backdrop-filter: blur(10px); }
.study-tab { padding: 10px 18px; background: transparent; color: var(--muted); }
.study-tab.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-soft); }
.study-tab-panel { display: none; }
.study-tab-panel.active { display: block; }
.study-toolbar, .library-toolbar { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; background: var(--surface); border: 1px solid var(--line); padding: 11px; border-radius: var(--radius-lg); margin-bottom: 14px; box-shadow: var(--shadow-soft); }
.toolbar-search { flex: 1; min-width: 230px; }
.study-toolbar select, .library-toolbar select { width: auto; min-width: 145px; }
.toggle-chip { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--line); background: var(--surface-soft); border-radius: 11px; color: #475467; font-weight: 720; font-size: .88rem; }
.toggle-chip input { width: 18px; min-height: 18px; margin: 0; }
.expression-list { display: grid; gap: 12px; }
.expression-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-soft); }
.expression-card.is-important { border-left: 5px solid #e9a000; }
.expression-card.is-confused { border-right: 5px solid #9b51e0; }
.expression-card-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.select-expression { width: 20px; min-height: 20px; margin: 0 2px 0 0; }
.rank-badge { font-weight: 900; color: var(--primary); min-width: 34px; }
.level-pill, .score-pill, .status-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 8px; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.level-pill { background: #eef2ff; color: #4338ca; }
.score-pill { background: var(--success-soft); color: var(--success); }
.status-pill { margin-left: auto; background: #f2f4f7; color: #667085; }
.expression-main { padding: 13px 0 9px; }
.expression-en { font-size: clamp(1.25rem, 2.6vw, 1.62rem); line-height: 1.42; font-weight: 830; letter-spacing: -.02em; color: #111827; margin: 0; }
.expression-original { margin: 7px 0 0; color: #667085; font-size: .86rem; }
.expression-ko { margin: 7px 0 0; color: #344054; font-size: 1rem; font-weight: 610; }
body.hide-english .expression-en, body.hide-english .expression-original { filter: blur(8px); user-select: none; transition: filter .15s; }
body.hide-english .expression-card:hover .expression-en, body.hide-english .expression-card:focus-within .expression-en { filter: blur(0); }
body.hide-korean .expression-ko { filter: blur(8px); user-select: none; }
body.hide-korean .expression-card:hover .expression-ko, body.hide-korean .expression-card:focus-within .expression-ko { filter: blur(0); }
.expression-context { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 8px 0 13px; }
.info-chip { padding: 10px 12px; border-radius: 12px; background: var(--surface-soft); color: #475467; font-size: .84rem; }
.info-chip strong { color: #344054; }
.expression-actions { display: flex; flex-wrap: wrap; gap: 7px; border-top: 1px solid #edf0f4; padding-top: 12px; }
.timestamp-btn { color: var(--primary); }
.expression-extra { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #d8dee8; }
.expression-extra.open { display: grid; gap: 10px; }
.dictation-box { padding: 13px; border-radius: 13px; background: #f8fafc; }
.dictation-row { display: flex; gap: 8px; margin-top: 8px; }
.dictation-result { margin: 7px 0 0; font-weight: 750; }
.dictation-result.good { color: var(--success); }
.dictation-result.retry { color: var(--warning); }
.review-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.review-row > span { color: var(--muted); font-size: .82rem; margin-right: 4px; }

.section-intro { margin: 14px 2px 18px; }
.section-intro p { margin-top: 6px; }
.dialogue-list { display: grid; gap: 13px; }
.dialogue-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
.dialogue-card header { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.dialogue-en { white-space: pre-line; font-size: 1.08rem; font-weight: 700; color: #1f2937; }
.dialogue-ko { white-space: pre-line; color: #475467; }
.study-pack { display: grid; gap: 18px; }
.pack-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; overflow: hidden; }
.pack-section h3 { margin: 0 0 12px; }
.pack-table-wrap { overflow-x: auto; }
.pack-table { width: 100%; border-collapse: collapse; min-width: 700px; font-size: .9rem; }
.pack-table th, .pack-table td { text-align: left; padding: 10px; border-bottom: 1px solid #e8ecf1; vertical-align: top; }
.pack-table th { color: #475467; background: #f8fafc; }

/* Library */
.library-toolbar input { flex: 1; min-width: 240px; }
.result-count { margin: 12px 2px; color: var(--muted); font-size: .9rem; }
.library-list { display: grid; gap: 10px; }
.library-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.library-expression { font-size: 1.08rem; font-weight: 810; color: #1d2939; }
.library-translation { color: #667085; margin-top: 3px; font-size: .9rem; }
.library-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.library-side { display: flex; align-items: center; gap: 8px; }
.marker { font-size: 1rem; }

/* Stats */
.stats-overview { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; margin-bottom: 18px; }
.overview-card { padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow-soft); }
.overview-card strong { display: block; font-size: 1.7rem; }
.overview-card span { color: var(--muted); font-size: .82rem; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stat-card { padding: 20px; }
.stat-card.wide { grid-column: 1 / -1; }
.stat-help { font-size: .86rem; margin-top: 5px; }
.rank-list, .rare-list { display: grid; gap: 7px; margin-top: 14px; }
.rank-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid #edf0f4; }
.rank-num { font-weight: 900; color: var(--primary); }
.rank-row strong { line-height: 1.25; }
.rank-row small { display: block; color: var(--muted); margin-top: 2px; }
.freq-chip { background: var(--primary-soft); color: var(--primary-dark); border-radius: 999px; padding: 4px 8px; font-weight: 800; font-size: .75rem; white-space: nowrap; }
.level-stats { display: grid; gap: 12px; margin-top: 18px; }
.level-row { display: grid; grid-template-columns: 48px 1fr 48px; gap: 10px; align-items: center; }
.level-bar { height: 12px; border-radius: 99px; overflow: hidden; background: #edf1f6; }
.level-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#4f7cff,#7657e8); }
.rare-item { padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.rare-item strong { display: block; }
.rare-item small { color: var(--muted); }
.daily-chart { min-height: 190px; display: grid; grid-template-columns: repeat(30, 1fr); align-items: end; gap: 4px; padding: 24px 4px 8px; overflow-x: auto; }
.day-bar-wrap { min-width: 16px; height: 160px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; }
.day-bar { width: 100%; min-height: 3px; background: var(--primary); opacity: .78; border-radius: 5px 5px 2px 2px; }
.day-label { color: #98a2b3; font-size: .62rem; writing-mode: vertical-rl; height: 32px; overflow: hidden; }

/* Mobile nav */
.mobile-nav { display: none; }

/* Loading + toast */
.loading-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(15,23,42,.56); backdrop-filter: blur(5px); }
.loading-card { width: min(520px, 100%); background: var(--surface); border-radius: var(--radius-xl); padding: 30px; box-shadow: 0 24px 70px rgba(0,0,0,.22); }
.spinner { width: 46px; height: 46px; border: 5px solid #dbe7ff; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; margin-bottom: 18px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-card p { margin-top: 7px; }
.loading-steps { display: grid; gap: 8px; margin: 18px 0; padding-left: 24px; color: #8a94a4; }
.loading-steps li.active { color: var(--primary); font-weight: 800; }
.toast-region { position: fixed; z-index: 300; right: 18px; bottom: 18px; display: grid; gap: 8px; width: min(390px, calc(100vw - 36px)); }
.toast { padding: 13px 15px; border-radius: 13px; color: #fff; background: #1f2937; box-shadow: var(--shadow); animation: toastin .18s ease; }
.toast.success { background: #166534; }
.toast.error { background: #991b1b; }
@keyframes toastin { from { transform: translateY(10px); opacity: 0; } }

@media (max-width: 980px) {
  .auth-screen { grid-template-columns: 1fr; max-width: 760px; padding-top: 35px; }
  .auth-hero { text-align: center; margin: 0 auto; }
  .feature-strip { justify-content: center; }
  .desktop-nav { display: none; }
  .topbar { padding-inline: 18px; }
  .main-content { padding-inline: 18px; padding-bottom: 105px; }
  .mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: rgba(255,255,255,.97); border-top: 1px solid var(--line); backdrop-filter: blur(12px); }
  .mobile-nav button { display: grid; justify-items: center; gap: 0; min-height: 52px; padding: 5px 3px; background: transparent; color: #667085; border-radius: 10px; }
  .mobile-nav button.active { color: var(--primary); background: var(--primary-soft); }
  .mobile-nav span { font-size: 1.1rem; line-height: 1.1; }
  .mobile-nav small { font-size: .7rem; font-weight: 750; }
  .home-head { align-items: stretch; flex-direction: column; }
  .quick-stats { min-width: 0; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .study-top-grid { grid-template-columns: 1fr; }
  .study-summary-card { grid-template-columns: auto 1fr auto; align-items: center; }
  .stats-overview { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
  :root { --radius-xl: 18px; --radius-lg: 15px; }
  body { line-height: 1.58; }
  .topbar { height: 62px; }
  .brand { min-width: auto; }
  .brand small { display: none; }
  .top-actions .btn { display: none; }
  .main-content { padding-top: 24px; padding-inline: 12px; }
  .page-head { margin-bottom: 20px; }
  h1 { font-size: 2rem; }
  .analyze-card { padding: 18px; grid-template-columns: 1fr; }
  .step-badge { display: none; }
  .url-form { grid-column: 1; grid-template-columns: 1fr; }
  .helper-row { grid-column: 1; display: grid; }
  .video-grid { grid-template-columns: 1fr; gap: 12px; }
  .video-card { display: grid; grid-template-columns: 135px 1fr; }
  .video-thumb { aspect-ratio: 16/11; height: 100%; }
  .video-card-body { padding: 12px; }
  .video-meta { display: grid; gap: 2px; }
  .study-top-grid { gap: 12px; }
  .player-info { align-items: flex-start; padding: 13px; }
  .player-info .btn { display: none; }
  .listening-panel { margin: 0 8px 8px; padding: 9px; }
  .control-group.grow { width: 100%; flex-basis: 100%; }
  .study-summary-card { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .summary-badge { width: max-content; }
  .study-tabs { top: 62px; margin-top: 18px; overflow-x: auto; padding: 5px 0; }
  .study-tab { flex: 1; white-space: nowrap; padding-inline: 11px; font-size: .88rem; }
  .study-toolbar { position: static; padding: 8px; }
  .toolbar-search { flex-basis: 100%; }
  .study-toolbar select { flex: 1; min-width: 130px; }
  .toggle-chip { flex: 1; justify-content: center; }
  #playSelectedBtn { width: 100%; }
  .expression-card { padding: 14px 13px; }
  .expression-context { grid-template-columns: 1fr; }
  .status-pill { margin-left: 0; }
  .expression-actions .btn { flex: 1 1 auto; }
  .dictation-row { flex-direction: column; }
  .library-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .library-toolbar input { grid-column: 1 / -1; min-width: 0; }
  .library-toolbar select { width: 100%; min-width: 0; }
  .library-item { grid-template-columns: 1fr; gap: 9px; }
  .library-side { justify-content: space-between; }
  .stats-overview { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card.wide { grid-column: auto; }
  .rank-row { grid-template-columns: 28px minmax(0,1fr) auto; }
  .rank-row .score-pill { display: none; }
  .auth-screen { padding: 28px 15px; }
  .auth-hero h1 { font-size: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ===== v1.0.0 UI consistency / accessibility fixes ===== */
.grow{min-width:0;flex:1}.user-label{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.86rem}.player-info-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.publish-wrap{display:grid;justify-items:end;gap:2px}.switch-row{display:flex;align-items:center;gap:7px;font-weight:800;font-size:.86rem}.switch-row input{width:20px;min-height:20px;margin:0}.privacy-chip{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:#f2f4f7;color:#667085;font-size:.75rem;font-weight:800}.privacy-chip.public{background:var(--success-soft);color:var(--success)}

.video-card{cursor:default}.video-play{position:relative;inset:auto;transform:none;width:100%;height:auto;min-height:0;display:block;padding:0;border:0;border-radius:0;background:#101828;color:#fff;overflow:hidden}.video-play .video-thumb{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#e9edf3}.video-play>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(17,24,39,.78);color:#fff;font-size:1rem;pointer-events:none}.video-card-body .btn{margin-top:8px}

.expression-card-head{justify-content:space-between}.select-expression{width:auto;display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.82rem;font-weight:750}.select-expression input{width:20px;min-height:20px;margin:0}.expression-actions{border-top:0;padding-top:0;margin-left:auto}.marker{min-height:36px;padding:5px 9px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);color:#475467;font-weight:800}.marker.active{background:var(--warning-soft);border-color:#f0c36e;color:#8b4b00}.expression-card.is-confused .marker.active[data-action="confused"]{background:#f3e8ff;border-color:#d8b4fe;color:#6b21a8}.expression-main{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:start;padding:13px 0 9px}.timestamp-btn{border:1px solid #cddcff;background:var(--primary-soft);border-radius:11px;min-height:42px;padding:8px 11px;font-weight:850;white-space:nowrap}.expression-context{display:block;margin:7px 0;color:var(--muted);font-size:.9rem}.expression-extra{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px dashed #d8dee8}.expression-extra .info-chip{padding:7px 9px}.dictation-box{margin-top:10px}.note-box{margin-top:10px;padding:13px;border-radius:13px;background:#fffdf4;border:1px solid #f0ddb0}.note-row{display:flex;gap:8px}.note-row textarea{min-height:72px}.note-row .btn{align-self:flex-end}.expression-list.hide-english .expression-en,.expression-list.hide-english .expression-original{filter:blur(8px);user-select:none;transition:filter .15s}.expression-list.hide-english .expression-card:hover .expression-en,.expression-list.hide-english .expression-card:focus-within .expression-en,.expression-list.hide-english .expression-card:hover .expression-original,.expression-list.hide-english .expression-card:focus-within .expression-original{filter:blur(0)}.expression-list.hide-korean .expression-ko{filter:blur(8px);user-select:none}.expression-list.hide-korean .expression-card:hover .expression-ko,.expression-list.hide-korean .expression-card:focus-within .expression-ko{filter:blur(0)}

.library-expression{display:flex;align-items:flex-start;gap:10px}.library-expression>div{min-width:0}.library-expression p{margin:2px 0;color:#475467;font-weight:600}.library-expression small{display:block;color:var(--muted);font-weight:500}.level-bar>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4f7cff,#7657e8)}

.community-official{background:linear-gradient(135deg,#f7f9ff,#fff);border:1px solid #dfe6ff;border-radius:var(--radius-xl);padding:22px}.community-list{display:grid;gap:9px}.community-expression{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:13px;background:var(--surface);border:1px solid var(--line);border-radius:14px}.community-expression p{margin:3px 0}.community-expression small{color:var(--muted)}
.period-filter{display:grid;gap:5px;min-width:180px;color:var(--muted);font-size:.8rem;font-weight:800}.period-filter select{min-height:44px}

.mobile-nav{grid-template-columns:repeat(5,1fr)}

@media(max-width:700px){.expression-main{grid-template-columns:32px minmax(0,1fr)}.expression-main .timestamp-btn{grid-column:2;justify-self:start}.expression-actions{margin-left:0;width:100%}.expression-extra>.btn{flex:1 1 auto}.note-row{flex-direction:column}.community-expression{grid-template-columns:30px minmax(0,1fr)}.community-expression>.library-tags{grid-column:2}.period-filter{width:100%}.page-head.compact-head{align-items:stretch;flex-direction:column}.publish-wrap{justify-items:start}.player-info-actions{justify-content:flex-start}.top-actions .user-label{display:none}}