:root {
  --ink: #171b2e;
  --ink-soft: #4f556b;
  --muted: #7c8295;
  --paper: #f5f6fb;
  --card: #ffffff;
  --line: #e3e5ed;
  --primary: #6258d5;
  --primary-dark: #493fb6;
  --primary-soft: #eeecff;
  --green: #2f8f68;
  --green-soft: #e3f5ed;
  --lime: #b7dc86;
  --amber: #b66a1c;
  --amber-soft: #fff1dc;
  --red: #c74b5c;
  --red-soft: #ffe9ec;
  --shadow: 0 18px 55px rgba(33, 37, 65, 0.09);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  font-family: Pretendard, "Pretendard Variable", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--paper); color: var(--ink); }
button, input, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 10px 16px; color: #fff; background: var(--ink); border-radius: 8px; }
.skip-link:focus { top: 16px; }

.boot-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 16px; color: var(--muted); }
.boot-mark, .brand-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--primary); color: #fff; font-weight: 900; letter-spacing: -0.06em; box-shadow: 0 10px 28px rgba(98, 88, 213, .26); }
.brand-logo { display: block; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; box-shadow: 0 10px 28px rgba(98, 88, 213, .26); }
.brand-logo.boot-logo { animation: pulse 1.5s ease-in-out infinite; }
.boot-mark { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 50% { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(98, 88, 213, .34); } }

.entry-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr); background: var(--ink); }
.entry-story { position: relative; overflow: hidden; padding: clamp(42px, 7vw, 104px); display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: linear-gradient(145deg, #171b2e 0%, #282451 58%, #5c53cc 140%); }
.entry-story::before, .entry-story::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.entry-story::before { width: 460px; height: 460px; right: -190px; top: -170px; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 0 0 65px rgba(255,255,255,.025), 0 0 0 130px rgba(255,255,255,.018); }
.entry-story::after { width: 260px; height: 260px; left: 45%; bottom: -180px; background: var(--lime); filter: blur(4px); opacity: .25; }
.entry-brand { position: relative; display: flex; align-items: center; gap: 14px; font-weight: 800; letter-spacing: -.02em; }
.brand-home { border: 0; color: inherit; background: none; font: inherit; text-align: left; cursor: pointer; }
.brand-home:focus-visible { outline: 3px solid rgba(98, 88, 213, .28); outline-offset: 4px; border-radius: 14px; }
.entry-brand .brand-mark { background: #fff; color: var(--primary); box-shadow: none; }
.entry-brand .brand-logo { box-shadow: 0 12px 30px rgba(7, 9, 25, .22); }
.story-copy { position: relative; max-width: 700px; padding: 11vh 0; }
.eyebrow { margin: 0 0 16px; color: var(--primary); font-size: 12px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow-lime { color: var(--lime); }
.entry-story .eyebrow { color: var(--lime); }
.story-copy h1 { margin: 0; max-width: 650px; font-size: clamp(48px, 6vw, 86px); line-height: 1.02; letter-spacing: -.065em; }
.story-copy p { margin: 26px 0 0; max-width: 530px; color: rgba(255,255,255,.74); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.75; }
.story-stats { position: relative; display: flex; gap: 36px; }
.story-stat strong { display: block; font-size: 28px; letter-spacing: -.04em; }
.story-stat span { color: rgba(255,255,255,.58); font-size: 13px; }
.entry-panel { padding: clamp(28px, 6vw, 84px); display: grid; place-items: center; background: #f4f4f9; }
.entry-card { width: min(100%, 460px); padding: clamp(28px, 4vw, 46px); border: 1px solid rgba(255,255,255,.9); border-radius: var(--radius-lg); background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.entry-card h2 { margin: 4px 0 9px; font-size: 30px; letter-spacing: -.04em; }
.entry-card > p { margin: 0 0 28px; color: var(--muted); line-height: 1.65; }
.entry-actions { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.text-button { padding: 8px 2px; border: 0; color: var(--ink-soft); background: none; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.privacy-note { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.6; }
.entry-official-link { margin-top: 17px; padding: 14px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #d7e2d9; border-radius: 13px; color: #244f43; background: #edf5ef; text-decoration: none; }
.entry-official-link strong, .entry-official-link small { display: block; }
.entry-official-link strong { font-size: 13px; }
.entry-official-link small { margin-top: 3px; color: #708078; font-size: 10px; }
.entry-practical-link { color: #176b6d; border-color: #bfe3e2; background: #eaf9f8; }
.entry-practical-link small { color: #65888a; }
.connection-error { margin: 4px 0 12px; padding: 18px; border: 1px solid #f1c9cf; border-radius: 14px; background: var(--red-soft); }
.connection-error strong { color: var(--red); }
.connection-error p { margin: 8px 0 16px; color: var(--ink-soft); font-size: 13px; line-height: 1.65; }

.field { display: grid; gap: 8px; margin: 0 0 18px; }
.field label { color: var(--ink-soft); font-size: 13px; font-weight: 750; }
.field input, .field select { width: 100%; min-height: 52px; padding: 0 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); outline: 0; background: #fff; color: var(--ink); transition: .2s ease; }
.field input:focus, .field select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.field small { color: var(--muted); line-height: 1.5; }
.form-error { min-height: 20px; margin: -5px 0 12px; color: var(--red); font-size: 13px; }

.btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 1px solid transparent; border-radius: 13px; background: #fff; font-weight: 780; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid rgba(98,88,213,.3); outline-offset: 2px; }
.btn:disabled { cursor: wait; opacity: .62; transform: none; }
.btn-primary { color: #fff; background: var(--primary); box-shadow: 0 10px 22px rgba(98,88,213,.22); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { border-color: var(--line); background: #fff; }
.btn-secondary:hover { border-color: #c9ccda; background: #fafafe; }
.btn-danger { color: var(--red); border-color: #f1c9cf; background: var(--red-soft); }
.btn-block { width: 100%; }
.btn-sm { min-height: 38px; padding: 0 13px; font-size: 13px; border-radius: 10px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 20px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(16px); }
.side-brand { width: 100%; display: flex; align-items: center; gap: 12px; padding: 0 8px 28px; font-weight: 900; letter-spacing: -.03em; }
.side-brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.side-nav { display: grid; gap: 7px; }
.nav-button { width: 100%; min-height: 46px; padding: 0 14px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 12px; color: var(--ink-soft); background: transparent; text-align: left; font-weight: 720; text-decoration: none; cursor: pointer; }
.nav-button:hover { background: #f5f5fa; }
.nav-button.nav-teacher { color: #79542a; }
.nav-button.active { color: var(--primary); background: var(--primary-soft); }
.nav-button.nav-official { color: #2f765b; }
.nav-button.nav-official .nav-icon { background: #e3f5ed; }
.nav-button.nav-practical { color: #16777a; }
.nav-button.nav-practical .nav-icon { width: 29px; color: #116064; background: #dff5f4; font-size: 8px; }
.nav-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: rgba(124,130,149,.09); font-size: 11px; font-weight: 900; }
.nav-button.active .nav-icon { background: rgba(98,88,213,.12); }
.side-footer { margin-top: auto; padding: 18px 8px 0; border-top: 1px solid var(--line); }
.mode-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; color: var(--green); background: var(--green-soft); font-size: 11px; font-weight: 800; }
.mode-chip.local { color: var(--amber); background: var(--amber-soft); }
.mode-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.user-mini { margin-top: 15px; display: flex; align-items: center; gap: 10px; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #fff; background: var(--ink); font-weight: 850; }
.user-mini strong { display: block; max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.user-mini span { color: var(--muted); font-size: 11px; }
.logout-mini { margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 9px; color: var(--muted); background: #f4f5f8; cursor: pointer; }

.main-area { min-width: 0; }
.topbar { height: 76px; padding: 0 clamp(22px, 4vw, 54px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(245,246,251,.86); backdrop-filter: blur(14px); }
.topbar-copy strong { display: block; font-size: 14px; }
.topbar-copy span { color: var(--muted); font-size: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.content { width: min(100%, 1320px); margin: 0 auto; padding: clamp(28px, 5vw, 62px); }
.page-heading { margin-bottom: 28px; display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.page-heading h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.055em; line-height: 1.08; }
.page-heading p { margin: 10px 0 0; color: var(--muted); line-height: 1.6; }

.official-recommendation { position: relative; isolation: isolate; min-height: 205px; margin-bottom: 22px; padding: clamp(26px, 4vw, 42px); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(155px, 210px) auto; align-items: center; gap: clamp(24px, 4vw, 52px); border: 1px solid rgba(196,143,0,.22); border-radius: 30px; color: #332600; background: radial-gradient(circle at 78% 0, rgba(255,255,255,.78), transparent 32%), linear-gradient(125deg, #fff9ce 0%, #ffe875 48%, #ffc928 100%); box-shadow: 0 0 0 1px rgba(255,222,80,.24), 0 0 34px rgba(255,198,0,.35), 0 24px 65px rgba(157,111,0,.18); animation: official-recommendation-glow 3s ease-in-out infinite; }
.official-recommendation::before { content: "80"; position: absolute; right: 19%; top: 50%; z-index: -1; color: rgba(126,86,0,.07); font-size: clamp(150px, 18vw, 250px); font-weight: 950; line-height: .75; letter-spacing: -.12em; transform: translateY(-50%); pointer-events: none; }
.official-recommendation::after { content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; left: -135px; bottom: -190px; border: 42px solid rgba(255,255,255,.24); border-radius: 50%; box-shadow: 0 0 0 32px rgba(255,255,255,.1); pointer-events: none; }
.official-recommendation-copy { min-width: 0; }
.official-recommendation-badge { width: fit-content; margin-bottom: 15px; padding: 7px 11px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(65,47,0,.15); border-radius: 999px; color: #443300; background: rgba(255,255,255,.48); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.official-recommendation-badge span { width: 7px; height: 7px; border-radius: 50%; background: #e29d00; box-shadow: 0 0 0 5px rgba(226,157,0,.14), 0 0 14px rgba(226,157,0,.7); }
.official-recommendation h2 { margin: 0; font-size: clamp(27px, 3.1vw, 43px); line-height: 1.08; letter-spacing: -.055em; word-break: keep-all; }
.official-recommendation-copy p { max-width: 660px; margin: 14px 0 0; color: rgba(56,42,0,.68); font-size: 13px; line-height: 1.7; word-break: keep-all; }
.official-recommendation-status { min-width: 0; padding: 20px; border: 1px solid rgba(84,61,0,.13); border-radius: 20px; background: rgba(255,255,255,.42); backdrop-filter: blur(10px); }
.official-recommendation-status > span { display: block; color: rgba(56,42,0,.62); font-size: 10px; font-weight: 850; }
.official-recommendation-status strong { display: block; margin: 4px 0 12px; font-size: 40px; line-height: 1; letter-spacing: -.065em; }
.official-recommendation-status strong small { margin-left: 5px; color: rgba(56,42,0,.5); font-size: 13px; letter-spacing: 0; }
.official-recommendation-status progress { width: 100%; height: 7px; display: block; overflow: hidden; border: 0; border-radius: 999px; background: rgba(88,61,0,.14); appearance: none; }
.official-recommendation-status progress::-webkit-progress-bar { border-radius: 999px; background: rgba(88,61,0,.14); }
.official-recommendation-status progress::-webkit-progress-value { border-radius: 999px; background: #4a3700; }
.official-recommendation-status progress::-moz-progress-bar { border-radius: 999px; background: #4a3700; }
.official-recommendation-status em { display: block; margin-top: 8px; color: rgba(56,42,0,.66); font-size: 10px; font-style: normal; font-weight: 800; text-align: right; }
.official-recommendation-action { min-width: 156px; min-height: 112px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; border-radius: 20px; color: #ffe36b; background: #282007; box-shadow: 0 16px 34px rgba(77,54,0,.2); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.official-recommendation-action span { color: #fff4bd; font-size: 13px; font-weight: 850; }
.official-recommendation-action strong { align-self: flex-end; font-size: 30px; line-height: 1; }
.official-recommendation-action:hover { background: #171304; box-shadow: 0 20px 42px rgba(77,54,0,.28); transform: translateY(-2px); }
.official-recommendation-action:focus-visible { outline: 3px solid #332600; outline-offset: 4px; }
.official-recommendation-error { grid-template-columns: minmax(0, 1fr) minmax(156px, auto) minmax(156px, auto); }
.official-recommendation-error .official-recommendation-action { border: 0; cursor: pointer; }
.official-progress-loading { min-height: 58px; margin-bottom: 22px; padding: 0 20px; display: flex; align-items: center; border: 1px solid #e8e1b9; border-radius: 16px; color: #76652e; background: #fffced; font-size: 12px; font-weight: 800; }
@keyframes official-recommendation-glow { 50% { box-shadow: 0 0 0 1px rgba(255,226,92,.38), 0 0 48px rgba(255,198,0,.5), 0 28px 72px rgba(157,111,0,.22); } }

.hero-card { position: relative; min-height: 310px; overflow: hidden; padding: clamp(28px, 5vw, 58px); display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 30px; border-radius: 32px; color: #fff; background: linear-gradient(135deg, #1b2036, #3c366e 68%, #6258d5); box-shadow: var(--shadow); }
.hero-card::after { content: ""; position: absolute; right: -70px; top: -100px; width: 360px; height: 360px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 50px rgba(255,255,255,.04), 0 0 0 100px rgba(255,255,255,.025); }
.hero-copy { position: relative; z-index: 1; }
.hero-copy .eyebrow { color: var(--lime); }
.hero-copy h1 { margin: 0; max-width: 680px; font-size: clamp(36px, 5vw, 62px); line-height: 1.03; letter-spacing: -.065em; }
.hero-copy p { max-width: 570px; margin: 18px 0 28px; color: rgba(255,255,255,.7); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions .btn-primary { color: var(--ink); background: var(--lime); box-shadow: none; }
.hero-actions .btn-primary:hover { background: #c8e5a2; }
.hero-actions .btn-secondary { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }
.hero-orbit { position: relative; z-index: 1; width: 220px; height: 220px; margin: auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 26px rgba(255,255,255,.04), 0 0 0 52px rgba(255,255,255,.025); }
.hero-score { width: 142px; height: 142px; display: grid; place-content: center; justify-items: center; border-radius: 50%; color: var(--ink); background: var(--lime); }
.hero-score strong { font-size: 42px; letter-spacing: -.06em; }
.hero-score span { font-size: 11px; font-weight: 800; }

.metric-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.metric-card, .panel, .category-card { border: 1px solid var(--line); background: var(--card); box-shadow: 0 8px 30px rgba(33,37,65,.035); }
.metric-card { padding: 22px; border-radius: var(--radius-md); }
.metric-card span { color: var(--muted); font-size: 12px; font-weight: 720; }
.metric-card strong { display: block; margin-top: 8px; font-size: 28px; letter-spacing: -.05em; }
.metric-trend { margin-top: 6px; color: var(--green); font-size: 11px; }
.section-head { margin: 42px 0 16px; display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.section-head-flush { margin-top: 0; }
.section-head h2 { margin: 0; font-size: 22px; letter-spacing: -.035em; }
.section-head p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.category-card { position: relative; overflow: hidden; padding: 24px; border-radius: var(--radius-md); }
.category-card::after { content: attr(data-code); position: absolute; right: 16px; top: 8px; color: rgba(23,27,46,.04); font-size: 74px; font-weight: 950; letter-spacing: -.08em; }
.category-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: var(--primary); background: var(--primary-soft); font-size: 13px; font-weight: 900; }
.category-card.database .category-icon { color: var(--green); background: var(--green-soft); }
.category-card.practical .category-icon { color: var(--amber); background: var(--amber-soft); }
.category-card h3 { margin: 22px 0 8px; font-size: 18px; }
.category-card p { min-height: 44px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.category-meta { margin-top: 20px; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); font-size: 12px; }
.category-meta span { color: var(--muted); }
.fixed-set-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fixed-set-grid-preview { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fixed-set-card { padding: 21px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; box-shadow: 0 8px 30px rgba(33,37,65,.035); }
.fixed-set-head, .fixed-set-score { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fixed-set-number { color: var(--primary); font-size: 11px; font-weight: 900; letter-spacing: .09em; }
.fixed-set-card h3 { margin: 20px 0 7px; font-size: 19px; letter-spacing: -.035em; }
.fixed-set-card > p { min-height: 39px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.fixed-set-score { margin: 18px 0 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.fixed-set-score strong { color: var(--ink); font-size: 15px; }
.short-answer-set-card { border-color: #d3c5ff; background: linear-gradient(145deg, #fff, #f4f0ff); box-shadow: 0 12px 34px rgba(91,67,184,.09); }
.teacher-core-set-card { border-color: #cce6db; background: linear-gradient(145deg, #fff, #f0faf5); }
.short-answer-feature { margin-top: 22px; padding: clamp(25px, 4vw, 40px); display: flex; align-items: end; justify-content: space-between; gap: 24px; border: 1px solid #d8cdfa; border-radius: 25px; background: radial-gradient(circle at 87% 14%, rgba(126,100,232,.16), transparent 27%), linear-gradient(135deg, #fbfaff, #eee9ff); }
.short-answer-feature .eyebrow { margin: 18px 0 8px; color: #6b50c5; }
.short-answer-feature h2 { margin: 0; font-size: clamp(26px, 3vw, 39px); line-height: 1.08; letter-spacing: -.05em; }
.short-answer-feature p:not(.eyebrow) { max-width: 720px; margin: 13px 0 0; color: #6d6587; font-size: 12px; line-height: 1.7; }
.short-answer-feature .btn { flex: 0 0 auto; }
.source-legend { margin-bottom: 18px; padding: 16px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; border: 1px solid #ded9f6; border-radius: 16px; background: #faf9ff; }
.source-legend p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.65; }
.source-legend-actions { display: flex; gap: 7px; }
.practical-path-card { margin-top: 22px; padding: clamp(25px, 4vw, 40px); display: flex; align-items: end; justify-content: space-between; gap: 24px; border: 1px solid #bfe4e2; border-radius: 25px; background: linear-gradient(135deg, #effcfb, #dff5f4); }
.practical-path-card .eyebrow { margin: 18px 0 8px; color: #187b7c; }
.teacher-path-card { border-color: #ead5ad; background: linear-gradient(135deg, #fffaf0, #f8ead0); }
.teacher-path-card .eyebrow { color: #8b5b1f; }
.teacher-path-card .btn-primary { background: #765126; }
.entry-teacher-link { border-color: #ead5ad; background: #fffaf0; }
.practical-path-card h2 { margin: 0; font-size: clamp(26px, 3vw, 39px); line-height: 1.08; letter-spacing: -.05em; }
.practical-path-card p:not(.eyebrow) { max-width: 720px; margin: 13px 0 0; color: #557477; font-size: 12px; line-height: 1.7; }
.practical-path-card .btn-primary { flex: 0 0 auto; color: #071923; background: #6de1dd; box-shadow: 0 10px 24px rgba(30,148,145,.2); }
.history-source { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 850; white-space: nowrap; }
.history-source-ai { color: #554ab9; background: var(--primary-soft); }
.history-source-official { color: #236448; background: var(--green-soft); }

.panel { padding: clamp(20px, 3vw, 30px); border-radius: var(--radius-md); }
.setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; }
.choice-list { display: grid; gap: 11px; }
.choice-card { min-height: 74px; padding: 16px; display: flex; align-items: center; gap: 15px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; transition: .18s ease; }
.choice-card:hover { border-color: #c9c5f2; background: #fbfaff; }
.choice-card.selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px rgba(98,88,213,.08); }
.choice-card input { accent-color: var(--primary); }
.choice-card strong { display: block; font-size: 14px; }
.choice-card span { color: var(--muted); font-size: 12px; }
.setup-summary { position: sticky; top: 96px; align-self: start; color: #fff; background: var(--ink); }
.setup-summary h3 { margin: 0 0 20px; }
.summary-row { padding: 12px 0; display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.72); font-size: 13px; }
.summary-row strong { color: #fff; }
.setup-summary .btn { margin-top: 22px; }

.quiz-page { min-height: 100vh; background: #f6f7fb; }
.quiz-header { position: sticky; top: 0; z-index: 20; min-height: 78px; padding: 14px clamp(18px, 4vw, 48px); display: grid; grid-template-columns: 220px minmax(180px, 1fr) 220px; align-items: center; gap: 28px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(18px); }
.quiz-brand { display: flex; align-items: center; gap: 10px; font-weight: 850; }
.quiz-brand .brand-mark, .quiz-brand .brand-logo { width: 38px; height: 38px; border-radius: 11px; font-size: 13px; }
.quiz-progress-wrap { text-align: center; }
.quiz-progress-label { margin-bottom: 8px; display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.quiz-progress { width: 100%; height: 7px; display: block; overflow: hidden; border: 0; border-radius: 999px; background: #e9eaf0; appearance: none; }
.quiz-progress::-webkit-progress-bar { border-radius: 999px; background: #e9eaf0; }
.quiz-progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, var(--primary), #8b7ff0); transition: width .25s ease; }
.quiz-progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, var(--primary), #8b7ff0); }
.quiz-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.quiz-layout { width: min(1240px, calc(100% - 36px)); margin: 34px auto; display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 24px; }
.question-card { min-height: 600px; padding: clamp(24px, 5vw, 54px); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: var(--shadow); }
.question-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tag { padding: 6px 9px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 10px; font-weight: 850; }
.tag.neutral { color: var(--ink-soft); background: #f1f2f6; }
.tag.source-badge { border: 1px solid transparent; letter-spacing: .02em; white-space: nowrap; }
.tag.source-ai { color: #5740b1; border-color: #dcd4ff; background: #eeeaff; }
.tag.source-official { color: #245e49; border-color: #c9e2d5; background: #e3f2ea; }
.flag-button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: #fff; cursor: pointer; }
.flag-button.active { color: var(--amber); border-color: #efd6b8; background: var(--amber-soft); }
.question-number { margin-top: 34px; color: var(--primary); font-size: 14px; font-weight: 900; }
.question-text { margin: 13px 0 30px; font-size: clamp(22px, 3vw, 31px); line-height: 1.48; letter-spacing: -.035em; word-break: keep-all; }
.options { display: grid; gap: 12px; }
.option-button { min-height: 66px; padding: 14px 18px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 15px; background: #fff; text-align: left; cursor: pointer; transition: .16s ease; }
.option-button:hover { border-color: #c6c2ec; background: #fbfaff; transform: translateX(2px); }
.option-button.selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px rgba(98,88,213,.07); }
.option-key { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-soft); background: #f6f7fa; font-size: 12px; font-weight: 850; }
.option-button.selected .option-key { color: #fff; border-color: var(--primary); background: var(--primary); }
.option-button:disabled { opacity: 1; cursor: default; }
.option-button.locked:hover { transform: none; }
.option-button.correct-answer { border-color: #8ac9ad; background: var(--green-soft); box-shadow: 0 0 0 3px rgba(47,143,104,.07); }
.option-button.correct-answer .option-key { color: #fff; border-color: var(--green); background: var(--green); }
.option-button.wrong-answer { border-color: #e9aab3; background: var(--red-soft); box-shadow: 0 0 0 3px rgba(199,75,92,.05); }
.option-button.wrong-answer .option-key { color: #fff; border-color: var(--red); background: var(--red); }
.short-answer-wrap { padding: 21px; display: grid; gap: 10px; border: 1px solid #dcd8f0; border-radius: 17px; background: #faf9ff; }
.short-answer-wrap label { color: var(--ink); font-size: 13px; font-weight: 850; }
.short-answer-input { width: 100%; min-height: 62px; padding: 0 17px; border: 2px solid #cbc3ed; border-radius: 13px; color: var(--ink); background: #fff; font: inherit; font-size: 18px; font-weight: 750; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.short-answer-input::placeholder { color: #a19caf; font-weight: 600; }
.short-answer-input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(98,88,213,.13); }
.short-answer-wrap > small { color: var(--muted); font-size: 10px; line-height: 1.55; }
.short-answer-wrap.correct { border-color: #8ac9ad; background: var(--green-soft); }
.short-answer-wrap.wrong { border-color: #e9aab3; background: var(--red-soft); }
.short-answer-wrap.correct .short-answer-input { border-color: var(--green); background: #fff; }
.short-answer-wrap.wrong .short-answer-input { border-color: var(--red); background: #fff; }
.short-answer-input:disabled { opacity: 1; cursor: default; }
.btn-check { color: #fff; background: var(--green); box-shadow: 0 10px 22px rgba(47,143,104,.18); }
.btn-check:hover { background: #267a59; }
.answer-check-row { margin-top: 20px; display: flex; align-items: center; gap: 13px; }
.answer-check-row span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.answer-feedback { margin-top: 16px; padding: 18px 20px; border: 1px solid #b9dccd; border-radius: 16px; background: var(--green-soft); }
.answer-feedback.wrong { border-color: #efc1c8; background: var(--red-soft); }
.feedback-heading { display: flex; align-items: center; gap: 9px; color: var(--green); }
.answer-feedback.wrong .feedback-heading { color: var(--red); }
.feedback-mark { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 12px; }
.answer-feedback.wrong .feedback-mark { background: var(--red); }
.answer-feedback p { margin: 9px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.68; }
.answer-feedback .feedback-answer { color: var(--ink); font-weight: 780; }
.feedback-detail-row { margin-top: 15px; padding-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px dashed rgba(69,91,82,.22); }
.feedback-detail-row small { color: var(--muted); font-size: 10px; line-height: 1.5; text-align: right; }
.easy-explanation-button { padding: 0; display: inline-flex; align-items: center; gap: 7px; border: 0; color: #5147bd; background: none; font-size: 12px; font-weight: 900; cursor: pointer; }
.easy-explanation-button:hover { color: #352c9b; text-decoration: underline; text-underline-offset: 3px; }
.easy-explanation-button:focus-visible { outline: 3px solid rgba(98,88,213,.22); outline-offset: 4px; border-radius: 4px; }
.answer-feedback.wrong .easy-explanation-button { color: #a63345; }
.review-easy-button { margin-top: 13px; }
.question-actions { margin-top: auto; padding-top: 32px; display: flex; justify-content: space-between; gap: 10px; }
.question-actions > div { display: flex; gap: 10px; }
.question-nav { position: sticky; top: 112px; align-self: start; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.question-nav h3 { margin: 0; font-size: 14px; }
.nav-legend { margin: 8px 0 18px; display: flex; gap: 10px; color: var(--muted); font-size: 9px; }
.nav-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.number-button { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: #fff; font-size: 11px; font-weight: 760; cursor: pointer; }
.number-button.answered { color: var(--primary); border-color: #d9d5fa; background: var(--primary-soft); }
.number-button.checked { color: var(--green); border-color: #b9dccd; background: var(--green-soft); }
.number-button.checked.checked-wrong { color: var(--red); border-color: #efb5bf; background: var(--red-soft); }
.number-button.flagged { box-shadow: inset 0 -3px 0 var(--amber); }
.number-button.current { color: #fff; border-color: var(--ink); background: var(--ink); }
.number-button.current.checked-wrong { color: #fff; border-color: var(--red); background: var(--red); box-shadow: 0 0 0 3px rgba(199,75,92,.14); }
.number-button.current.checked-wrong.flagged { box-shadow: 0 0 0 3px rgba(199,75,92,.14), inset 0 -3px 0 var(--amber); }
.nav-legend .legend-wrong { color: var(--red); font-weight: 850; }
.nav-summary { margin-top: 18px; padding-top: 16px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }

body.easy-modal-open { overflow: hidden; }
.easy-modal-backdrop { position: fixed; inset: 0; z-index: 200; padding: 20px; display: grid; place-items: center; background: rgba(16,20,34,.68); backdrop-filter: blur(6px); animation: easy-fade-in .16s ease both; }
.easy-modal { width: min(820px, 100%); max-height: min(920px, calc(100dvh - 40px)); padding: 0 30px 28px; overflow-y: auto; border: 1px solid rgba(255,255,255,.7); border-radius: 26px; color: var(--ink); background: #fff; box-shadow: 0 32px 100px rgba(10,14,28,.35); outline: none; animation: easy-rise-in .2s ease both; }
.easy-modal-header { position: sticky; top: 0; z-index: 2; margin: 0 -30px; padding: 25px 30px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid #ececf2; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.easy-modal-header .eyebrow { margin: 12px 0 4px; color: #6b63cf; font-size: 9px; }
.easy-modal-header h2 { margin: 0; font-size: clamp(24px, 5vw, 34px); letter-spacing: -.045em; }
.easy-modal-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.easy-result-chip { padding: 6px 9px; border-radius: 999px; font-size: 10px; font-weight: 900; }
.easy-result-chip.correct { color: #226c4c; background: #e2f3ea; }
.easy-result-chip.wrong { color: #a73547; background: #fff0f2; }
.easy-modal-close { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 13px; color: #646879; background: #f6f7fa; font-size: 25px; line-height: 1; cursor: pointer; }
.easy-modal-close:hover { color: var(--ink); background: #eceef4; }
.easy-question-copy { margin-top: 24px; padding: 16px 18px; border-left: 4px solid #7067da; border-radius: 0 14px 14px 0; background: #f7f6ff; }
.easy-question-copy span { color: #6258d5; font-size: 10px; font-weight: 900; }
.easy-question-copy p { margin: 6px 0 0; color: #4e5263; font-size: 13px; line-height: 1.65; }
.easy-answer-box { margin-top: 14px; padding: 18px 20px; display: grid; gap: 6px; border: 1px solid #b9dccd; border-radius: 16px; background: #edf8f2; }
.easy-answer-box span { color: #398064; font-size: 10px; font-weight: 900; }
.easy-answer-box strong { color: #1f563f; font-size: 16px; line-height: 1.55; word-break: keep-all; }
.easy-clue-box { margin-top: 14px; padding: 16px 18px; border: 1px solid #ecd28e; border-radius: 16px; background: #fff9e7; }
.easy-clue-box span { color: #8b651b; font-size: 10px; font-weight: 900; }
.easy-clue-box p { margin: 7px 0 0; color: #695124; font-size: 13px; line-height: 1.75; word-break: keep-all; }
.easy-step { margin-top: 15px; padding: 19px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; border: 1px solid #e3e4eb; border-radius: 17px; background: #fff; }
.easy-step-number { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #6258d5; font-size: 12px; font-weight: 900; }
.easy-step h3 { margin: 2px 0 7px; font-size: 15px; }
.easy-step p { margin: 0; color: #5f6474; font-size: 13px; line-height: 1.75; word-break: keep-all; }
.easy-deep-note { margin-top: 13px; padding: 14px 15px; border-left: 3px solid #746add; border-radius: 0 12px 12px 0; background: #f6f5ff; }
.easy-deep-note strong { display: block; margin-bottom: 5px; color: #5147bd; font-size: 11px; }
.easy-deep-note p { color: #50566a; }
.easy-analogy-note { margin-top: 12px !important; padding: 13px 14px; border-radius: 12px; color: #6a552d !important; background: #fff8e8; }
.easy-analogy-note strong { display: block; margin-bottom: 4px; color: #9a6c23; font-size: 10px; }
.easy-solve-list { margin: 0; padding-left: 20px; color: #5f6474; font-size: 13px; line-height: 1.78; }
.easy-solve-list li + li { margin-top: 6px; }
.easy-selected-note { margin-top: 12px !important; padding: 11px 13px; border-radius: 11px; font-size: 12px !important; }
.easy-selected-note.correct { color: #2c6b51; background: #edf8f2; }
.easy-selected-note.wrong { color: #963848; background: #fff0f2; }
.easy-comparison { margin-top: 15px; padding: 19px; border: 1px solid #e3e4eb; border-radius: 17px; background: #f9f9fc; }
.easy-comparison-heading { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; align-items: start; }
.easy-comparison-heading > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #6258d5; font-size: 12px; font-weight: 900; }
.easy-comparison-heading h3 { margin: 2px 0 5px; font-size: 15px; }
.easy-comparison-heading p { margin: 0; color: #6b7080; font-size: 12px; line-height: 1.6; }
.easy-comparison-list { margin-top: 15px; display: grid; gap: 10px; }
.easy-comparison-item { padding: 14px 15px; border: 1px solid #e0e2e9; border-radius: 13px; background: #fff; }
.easy-comparison-item.correct { border-color: #a8d7c3; background: #f0faf5; }
.easy-comparison-item.selected-wrong { border-color: #efb4bd; background: #fff4f5; }
.easy-comparison-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.easy-comparison-title strong { color: var(--ink); font-size: 13px; line-height: 1.55; }
.easy-comparison-title span { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; color: #6c7180; background: #eceef3; font-size: 9px; font-weight: 900; }
.easy-comparison-item.correct .easy-comparison-title span { color: #24684d; background: #dcefe6; }
.easy-comparison-item.selected-wrong .easy-comparison-title span { color: #9a3445; background: #ffe0e5; }
.easy-comparison-item p { margin: 8px 0 0; color: #626777; font-size: 12px; line-height: 1.72; word-break: keep-all; }
.easy-memory-tip { margin-top: 15px; padding: 17px 19px; display: grid; gap: 6px; border: 1px solid #f0d5a8; border-radius: 16px; background: #fff8e8; }
.easy-memory-tip span { color: #9a6c23; font-size: 10px; font-weight: 900; }
.easy-memory-tip strong { color: #6e4b16; font-size: 14px; line-height: 1.55; }
.easy-transfer-tip { margin-top: 12px; padding: 16px 18px; border: 1px solid #d8d5f2; border-radius: 16px; background: #f6f5ff; }
.easy-transfer-tip span { color: #5b52c2; font-size: 10px; font-weight: 900; }
.easy-transfer-tip p { margin: 7px 0 0; color: #585d70; font-size: 12px; line-height: 1.72; word-break: keep-all; }
.easy-transfer-tip strong { color: #4037a8; }
.easy-modal-done { width: 100%; margin-top: 18px; }
@keyframes easy-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes easy-rise-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

.result-hero { padding: clamp(28px, 5vw, 58px); display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: 44px; border-radius: 30px; color: #fff; background: linear-gradient(135deg, #191e32, #3b356d); }
.score-ring { --score: 0; width: 210px; height: 210px; padding: 14px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--lime) calc(var(--score) * 1%), rgba(255,255,255,.12) 0); }
.score-ring.score-0 { --score: 0; }
.score-ring.score-1 { --score: 1; }
.score-ring.score-2 { --score: 2; }
.score-ring.score-3 { --score: 3; }
.score-ring.score-4 { --score: 4; }
.score-ring.score-5 { --score: 5; }
.score-ring.score-6 { --score: 6; }
.score-ring.score-7 { --score: 7; }
.score-ring.score-8 { --score: 8; }
.score-ring.score-9 { --score: 9; }
.score-ring.score-10 { --score: 10; }
.score-ring.score-11 { --score: 11; }
.score-ring.score-12 { --score: 12; }
.score-ring.score-13 { --score: 13; }
.score-ring.score-14 { --score: 14; }
.score-ring.score-15 { --score: 15; }
.score-ring.score-16 { --score: 16; }
.score-ring.score-17 { --score: 17; }
.score-ring.score-18 { --score: 18; }
.score-ring.score-19 { --score: 19; }
.score-ring.score-20 { --score: 20; }
.score-ring.score-21 { --score: 21; }
.score-ring.score-22 { --score: 22; }
.score-ring.score-23 { --score: 23; }
.score-ring.score-24 { --score: 24; }
.score-ring.score-25 { --score: 25; }
.score-ring.score-26 { --score: 26; }
.score-ring.score-27 { --score: 27; }
.score-ring.score-28 { --score: 28; }
.score-ring.score-29 { --score: 29; }
.score-ring.score-30 { --score: 30; }
.score-ring.score-31 { --score: 31; }
.score-ring.score-32 { --score: 32; }
.score-ring.score-33 { --score: 33; }
.score-ring.score-34 { --score: 34; }
.score-ring.score-35 { --score: 35; }
.score-ring.score-36 { --score: 36; }
.score-ring.score-37 { --score: 37; }
.score-ring.score-38 { --score: 38; }
.score-ring.score-39 { --score: 39; }
.score-ring.score-40 { --score: 40; }
.score-ring.score-41 { --score: 41; }
.score-ring.score-42 { --score: 42; }
.score-ring.score-43 { --score: 43; }
.score-ring.score-44 { --score: 44; }
.score-ring.score-45 { --score: 45; }
.score-ring.score-46 { --score: 46; }
.score-ring.score-47 { --score: 47; }
.score-ring.score-48 { --score: 48; }
.score-ring.score-49 { --score: 49; }
.score-ring.score-50 { --score: 50; }
.score-ring.score-51 { --score: 51; }
.score-ring.score-52 { --score: 52; }
.score-ring.score-53 { --score: 53; }
.score-ring.score-54 { --score: 54; }
.score-ring.score-55 { --score: 55; }
.score-ring.score-56 { --score: 56; }
.score-ring.score-57 { --score: 57; }
.score-ring.score-58 { --score: 58; }
.score-ring.score-59 { --score: 59; }
.score-ring.score-60 { --score: 60; }
.score-ring.score-61 { --score: 61; }
.score-ring.score-62 { --score: 62; }
.score-ring.score-63 { --score: 63; }
.score-ring.score-64 { --score: 64; }
.score-ring.score-65 { --score: 65; }
.score-ring.score-66 { --score: 66; }
.score-ring.score-67 { --score: 67; }
.score-ring.score-68 { --score: 68; }
.score-ring.score-69 { --score: 69; }
.score-ring.score-70 { --score: 70; }
.score-ring.score-71 { --score: 71; }
.score-ring.score-72 { --score: 72; }
.score-ring.score-73 { --score: 73; }
.score-ring.score-74 { --score: 74; }
.score-ring.score-75 { --score: 75; }
.score-ring.score-76 { --score: 76; }
.score-ring.score-77 { --score: 77; }
.score-ring.score-78 { --score: 78; }
.score-ring.score-79 { --score: 79; }
.score-ring.score-80 { --score: 80; }
.score-ring.score-81 { --score: 81; }
.score-ring.score-82 { --score: 82; }
.score-ring.score-83 { --score: 83; }
.score-ring.score-84 { --score: 84; }
.score-ring.score-85 { --score: 85; }
.score-ring.score-86 { --score: 86; }
.score-ring.score-87 { --score: 87; }
.score-ring.score-88 { --score: 88; }
.score-ring.score-89 { --score: 89; }
.score-ring.score-90 { --score: 90; }
.score-ring.score-91 { --score: 91; }
.score-ring.score-92 { --score: 92; }
.score-ring.score-93 { --score: 93; }
.score-ring.score-94 { --score: 94; }
.score-ring.score-95 { --score: 95; }
.score-ring.score-96 { --score: 96; }
.score-ring.score-97 { --score: 97; }
.score-ring.score-98 { --score: 98; }
.score-ring.score-99 { --score: 99; }
.score-ring.score-100 { --score: 100; }
.score-ring-inner { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; border-radius: 50%; background: #242842; }
.score-ring strong { font-size: 56px; letter-spacing: -.07em; }
.score-ring span { color: rgba(255,255,255,.64); font-size: 12px; }
.result-copy h1 { margin: 8px 0 12px; font-size: clamp(34px, 5vw, 56px); letter-spacing: -.055em; }
.result-copy p { max-width: 580px; color: rgba(255,255,255,.68); line-height: 1.7; }
.result-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.result-actions .btn-secondary { color: var(--ink); }
.review-list { display: grid; gap: 14px; }
.review-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.review-card.correct { border-left: 4px solid var(--green); }
.review-card.wrong { border-left: 4px solid var(--red); }
.review-head { display: flex; gap: 12px; }
.review-state { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--green); background: var(--green-soft); font-size: 11px; font-weight: 900; }
.review-card.wrong .review-state { color: var(--red); background: var(--red-soft); }
.review-card h3 { margin: 2px 0 12px; font-size: 16px; line-height: 1.5; }
.review-source-row { margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 800; }
.answer-line { margin: 6px 0; color: var(--ink-soft); font-size: 13px; }
.explanation { margin: 15px 0 0; padding: 14px 16px; border-radius: 12px; color: var(--ink-soft); background: #f7f7fa; font-size: 13px; line-height: 1.65; }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
table { width: 100%; min-width: 680px; border-collapse: collapse; }
th, td { padding: 15px 17px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
th { color: var(--muted); background: #fafafe; font-size: 11px; letter-spacing: .02em; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fcfcff; }
.student-id-cell { color: var(--muted); font-size: 11px; }
.score-pill { display: inline-flex; min-width: 54px; justify-content: center; padding: 6px 8px; border-radius: 999px; color: var(--green); background: var(--green-soft); font-weight: 850; }
.score-pill.low { color: var(--red); background: var(--red-soft); }
.empty-state { padding: 54px 24px; display: grid; place-items: center; text-align: center; color: var(--muted); }
.empty-state strong { color: var(--ink); font-size: 18px; }
.empty-state p { max-width: 430px; line-height: 1.7; }

.admin-login-page { min-height: 100vh; padding: 28px; display: grid; place-items: center; background: radial-gradient(circle at 20% 0, #393573, transparent 36%), var(--ink); }
.admin-card { width: min(100%, 430px); padding: 38px; border-radius: 26px; background: #fff; box-shadow: 0 28px 80px rgba(0,0,0,.28); }
.admin-card .brand-mark { margin-bottom: 26px; }
.admin-card .brand-logo { margin-bottom: 26px; }
.admin-card h1 { margin: 0 0 9px; font-size: 28px; letter-spacing: -.04em; }
.admin-card > p { margin: 0 0 27px; color: var(--muted); line-height: 1.6; }
.back-button { margin-top: 14px; width: 100%; border: 0; color: var(--muted); background: none; cursor: pointer; }
.notice { padding: 15px 16px; border-radius: 13px; color: var(--amber); background: var(--amber-soft); font-size: 12px; line-height: 1.6; }
.notice strong { display: block; margin-bottom: 5px; color: #8c5115; }
.notice p { margin: 0; }
.notice code { padding: 2px 4px; border-radius: 4px; color: var(--ink); background: rgba(255,255,255,.6); font-size: 11px; }

.category-stat-list { display: grid; gap: 11px; }
.category-stat { padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 320px); align-items: center; gap: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.category-stat > div > strong { display: block; font-size: 14px; }
.category-stat > div > span { color: var(--muted); font-size: 11px; }
.category-stat-score { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 12px; }
.category-stat-score strong { color: var(--green); font-size: 15px; text-align: right; }
.category-stat-score progress { width: 100%; height: 9px; overflow: hidden; border: 0; border-radius: 999px; background: #e9eaf0; appearance: none; }
.category-stat-score progress::-webkit-progress-bar { border-radius: 999px; background: #e9eaf0; }
.category-stat-score progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, var(--green), #70bf99); }
.category-stat-score progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, var(--green), #70bf99); }
.admin-filter-panel { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; }
.admin-mobile-tabs { margin-bottom: 18px; display: none; gap: 8px; }
.admin-filter-panel .field { margin: 0; }
.admin-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.admin-search-form .btn { min-height: 52px; }
.admin-bank-summary { margin: 18px 2px 12px; display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 12px; }
.admin-bank-summary strong { color: var(--ink); }
.admin-question-card { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 15px; background: #fff; overflow: hidden; }
.admin-question-card summary { min-height: 64px; padding: 14px 18px; display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.admin-question-card summary::-webkit-details-marker { display: none; }
.admin-question-card summary::after { content: "+"; width: 24px; height: 24px; display: grid; place-items: center; grid-column: 4; border-radius: 7px; color: var(--primary); background: var(--primary-soft); font-weight: 900; }
.admin-question-card[open] summary::after { content: "−"; }
.admin-question-card[open] summary { border-bottom: 1px solid var(--line); background: #fcfcff; }
.admin-question-id { color: var(--primary); font-size: 11px; font-weight: 850; }
.admin-question-summary { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.admin-question-body { padding: 22px; }
.admin-question-body h3 { margin: 17px 0; font-size: 18px; line-height: 1.62; white-space: pre-wrap; }
.admin-options { margin: 0; padding-left: 28px; display: grid; gap: 8px; }
.admin-options li { padding: 10px 12px; border-radius: 10px; color: var(--ink-soft); background: #f7f7fa; font-size: 13px; line-height: 1.55; }
.admin-options li.correct { color: #206f50; background: var(--green-soft); font-weight: 760; }
.admin-explanation { margin-top: 18px; padding: 16px; border-radius: 12px; background: #f7f7fa; }
.admin-explanation strong { font-size: 12px; }
.admin-explanation p { margin: 7px 0; color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
.admin-explanation small { color: var(--muted); }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 100; max-width: min(90vw, 480px); padding: 13px 18px; border-radius: 12px; color: #fff; background: var(--ink); box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, 20px); pointer-events: none; transition: .22s ease; font-size: 13px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #8f3341; }
.mobile-nav { display: none; }
.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; }

@media (max-width: 980px) {
  .entry-page { grid-template-columns: 1fr; }
  .entry-story { min-height: 430px; padding: 40px; }
  .story-copy { padding: 55px 0 40px; }
  .story-copy h1 { font-size: clamp(42px, 10vw, 66px); }
  .entry-panel { padding: 44px 20px; }
  .app-shell { grid-template-columns: 1fr; padding-bottom: 74px; }
  .sidebar { display: none; }
  .mobile-nav { position: fixed; left: 12px; right: 12px; bottom: 10px; z-index: 50; height: 64px; padding: 7px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; border: 1px solid rgba(227,229,237,.9); border-radius: 19px; background: rgba(255,255,255,.94); box-shadow: 0 14px 42px rgba(33,37,65,.16); backdrop-filter: blur(18px); }
  .mobile-nav .nav-button { min-height: 50px; padding: 5px; flex-direction: column; justify-content: center; gap: 2px; font-size: 10px; text-align: center; }
  .mobile-nav .nav-icon { width: 22px; height: 22px; }
  .official-recommendation { grid-template-columns: minmax(0, 1fr) minmax(150px, 190px); }
  .official-recommendation-action { min-height: 58px; grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .hero-card { grid-template-columns: 1fr; }
  .hero-orbit { display: none; }
  .category-grid { grid-template-columns: 1fr 1fr; }
  .fixed-set-grid, .fixed-set-grid-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-grid { grid-template-columns: 1fr; }
  .setup-summary { position: static; }
  .quiz-header { grid-template-columns: 1fr 1fr; }
  .quiz-progress-wrap { grid-row: 2; grid-column: 1 / -1; }
  .quiz-actions { justify-content: flex-end; }
  .quiz-layout { grid-template-columns: 1fr; }
  .question-nav { position: static; order: 2; }
  .result-hero { grid-template-columns: 180px 1fr; gap: 28px; }
  .score-ring { width: 170px; height: 170px; }
  .admin-mobile-tabs { display: flex; }
}

@media (max-width: 650px) {
  .entry-story { min-height: 390px; padding: 28px 22px; }
  .story-copy { padding: 44px 0 20px; }
  .story-copy h1 { font-size: 43px; }
  .story-stats { gap: 20px; }
  .story-stat strong { font-size: 22px; }
  .entry-card { padding: 28px 22px; }
  .topbar { height: 66px; padding: 0 18px; }
  .topbar-actions .mode-chip { display: none; }
  .content { padding: 28px 17px; }
  .official-recommendation { min-height: 0; padding: 25px 21px; grid-template-columns: 1fr; gap: 16px; border-radius: 24px; }
  .official-recommendation::before { right: -8px; top: 118px; font-size: 150px; }
  .official-recommendation h2 { font-size: 30px; }
  .official-recommendation-copy p { font-size: 12px; }
  .official-recommendation-status { padding: 16px; }
  .official-recommendation-status strong { font-size: 34px; }
  .official-recommendation-action { grid-column: auto; width: 100%; min-height: 58px; padding: 0 17px; flex-direction: row; align-items: center; }
  .official-recommendation-action strong { align-self: auto; }
  .hero-card { min-height: 0; padding: 30px 24px; border-radius: 24px; }
  .hero-copy h1 { font-size: 39px; }
  .metric-grid { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: 1fr; }
  .fixed-set-grid, .fixed-set-grid-preview { grid-template-columns: 1fr; }
  .source-legend { grid-template-columns: 1fr; align-items: start; }
  .source-legend-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .short-answer-feature { align-items: stretch; flex-direction: column; }
  .short-answer-feature .btn { width: 100%; }
  .practical-path-card { align-items: stretch; flex-direction: column; }
  .practical-path-card .btn { width: 100%; }
  .page-heading { align-items: start; flex-direction: column; }
  .quiz-header { padding: 11px 14px; gap: 10px; }
  .quiz-brand > span:last-child { display: none; }
  .quiz-layout { width: calc(100% - 22px); margin: 14px auto 90px; }
  .question-card { min-height: 620px; padding: 24px 18px; border-radius: 20px; }
  .question-text { font-size: 22px; }
  .option-button { min-height: 62px; padding: 12px; }
  .short-answer-wrap { padding: 16px; }
  .short-answer-input { min-height: 58px; font-size: 16px; }
  .answer-check-row { align-items: stretch; flex-direction: column; }
  .answer-check-row .btn { width: 100%; }
  .feedback-detail-row { align-items: flex-start; flex-direction: column; }
  .feedback-detail-row small { text-align: left; }
  .question-actions { flex-direction: column-reverse; }
  .question-actions > div, .question-actions .btn { width: 100%; }
  .question-actions > div { display: grid; grid-template-columns: 1fr 1fr; }
  .result-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .result-actions { justify-content: center; }
  .score-ring { width: 178px; height: 178px; }
  .score-ring strong { font-size: 48px; }
  .panel { padding: 20px 16px; }
  .admin-card { padding: 30px 22px; }
  .category-stat { grid-template-columns: 1fr; gap: 12px; }
  .admin-filter-panel { grid-template-columns: 1fr; }
  .admin-search-form { grid-template-columns: 1fr; }
  .admin-bank-summary { align-items: flex-start; flex-direction: column; }
  .admin-question-card summary { grid-template-columns: 70px minmax(0, 1fr) auto; }
  .admin-question-card summary .tag { display: none; }
  .admin-question-card summary::after { grid-column: 3; }
  .easy-modal-backdrop { padding: 10px; align-items: end; }
  .easy-modal { max-height: calc(100dvh - 18px); padding: 0 16px 18px; border-radius: 24px 24px 16px 16px; }
  .easy-modal-header { margin: 0 -16px; padding: 18px 16px 14px; }
  .easy-modal-header .eyebrow { display: none; }
  .easy-modal-header h2 { font-size: 27px; }
  .easy-modal-close { width: 40px; height: 40px; }
  .easy-question-copy { margin-top: 18px; }
  .easy-step { padding: 15px; grid-template-columns: 30px minmax(0, 1fr); }
  .easy-step-number { width: 28px; height: 28px; }
  .easy-comparison { padding: 15px; }
  .easy-comparison-heading { grid-template-columns: 30px minmax(0, 1fr); }
  .easy-comparison-heading > span { width: 28px; height: 28px; }
  .easy-comparison-title { flex-direction: column; gap: 7px; }
  .easy-comparison-title span { align-self: flex-start; }
}

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

/* 공단 공개문제 80문항 완전정복 */
.official-body { background: #f1f4f0; }
.official-shell { min-height: 100vh; }
.official-topbar { position: sticky; top: 0; z-index: 30; min-height: 72px; padding: 10px clamp(18px, 5vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(215,222,214,.9); background: rgba(250,252,249,.94); backdrop-filter: blur(18px); }
.official-brand, .official-quiz-brand { display: inline-flex; align-items: center; gap: 11px; border: 0; background: none; font-weight: 900; letter-spacing: -.035em; text-decoration: none; cursor: pointer; }
.official-brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 780; letter-spacing: .1em; }
.official-brand .brand-mark, .official-quiz-brand .brand-mark { background: #244f43; box-shadow: 0 9px 24px rgba(36,79,67,.22); }
.official-brand .brand-logo { box-shadow: 0 9px 24px rgba(36,79,67,.22); }
.official-user-name { color: var(--muted); font-size: 12px; font-weight: 800; }
.official-entry-page .entry-story { background: linear-gradient(145deg, #193b34, #244f43 58%, #2f6557); }
.official-entry-page .entry-brand .brand-mark { background: #fff; color: #244f43; }
.official-top-actions { display: flex; gap: 8px; }
.official-top-actions a { text-decoration: none; }
.official-content { width: min(100%, 1280px); margin: 0 auto; padding: clamp(24px, 5vw, 64px); }
.official-hero { position: relative; overflow: hidden; min-height: 390px; padding: clamp(30px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 50px; border-radius: 34px; color: #fff; background: linear-gradient(135deg, #152824, #244f43 62%, #4e7465); box-shadow: 0 24px 70px rgba(24,55,46,.18); }
.official-hero::before, .official-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.official-hero::before { width: 420px; height: 420px; right: -190px; top: -210px; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 0 0 54px rgba(255,255,255,.035), 0 0 0 108px rgba(255,255,255,.02); }
.official-hero::after { width: 260px; height: 260px; left: 45%; bottom: -220px; background: #bedb87; filter: blur(8px); opacity: .3; }
.official-hero-copy, .official-mastery-ring { position: relative; z-index: 1; }
.official-hero-copy h1 { margin: 0; font-size: clamp(42px, 6vw, 72px); line-height: 1.02; letter-spacing: -.065em; }
.official-hero-copy > p:not(.eyebrow) { max-width: 650px; margin: 22px 0 30px; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.8; word-break: keep-all; }
.official-hero .hero-actions .btn-primary { color: #17372e; background: #bedb87; }
.official-mastery-ring { width: 250px; height: 250px; margin: auto; padding: 35px; display: grid; place-content: center; justify-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(255,255,255,.07); box-shadow: 0 0 0 22px rgba(255,255,255,.035), inset 0 0 40px rgba(255,255,255,.04); }
.official-mastery-ring strong { font-size: 74px; line-height: .95; letter-spacing: -.08em; }
.official-mastery-ring span { margin-top: 8px; color: rgba(255,255,255,.64); font-size: 12px; }
.official-mastery-ring progress { width: 140px; height: 7px; margin-top: 18px; overflow: hidden; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); appearance: none; }
.official-mastery-ring progress::-webkit-progress-bar { border-radius: 999px; background: rgba(255,255,255,.14); }
.official-mastery-ring progress::-webkit-progress-value { border-radius: 999px; background: #bedb87; }
.official-mastery-ring progress::-moz-progress-bar { border-radius: 999px; background: #bedb87; }
.official-metric-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.official-metric-grid article { padding: 22px 24px; border: 1px solid #dbe1da; border-radius: 18px; background: rgba(255,255,255,.88); }
.official-metric-grid span { color: #66736f; font-size: 12px; font-weight: 800; }
.official-metric-grid strong { display: block; margin: 8px 0 4px; color: #244f43; font-size: 32px; letter-spacing: -.055em; }
.official-metric-grid strong small { margin-left: 3px; color: #87918e; font-size: 13px; letter-spacing: 0; }
.official-metric-grid p { margin: 0; color: #7a8581; font-size: 11px; line-height: 1.55; }
.official-set-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.official-set-card { padding: 24px; border: 1px solid #dbe1da; border-radius: 20px; background: #fff; box-shadow: 0 10px 35px rgba(35,67,56,.04); }
.official-set-head, .official-set-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #78847f; font-size: 11px; font-weight: 750; }
.official-set-code { color: #244f43; letter-spacing: .08em; }
.official-set-card h3 { margin: 19px 0 7px; font-size: 20px; letter-spacing: -.035em; }
.official-set-card p { min-height: 42px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.official-set-card progress { width: 100%; height: 9px; margin: 20px 0 13px; overflow: hidden; border: 0; border-radius: 999px; background: #e8ede8; appearance: none; }
.official-set-card progress::-webkit-progress-bar { border-radius: 999px; background: #e8ede8; }
.official-set-card progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #244f43, #6d9b87); }
.official-set-card progress::-moz-progress-bar { border-radius: 999px; background: #244f43; }
.official-review-panel { margin-top: 18px; padding: clamp(24px, 4vw, 38px); display: flex; align-items: center; justify-content: space-between; gap: 30px; border-radius: 24px; color: #fff; background: #202d30; }
.official-review-panel h2 { margin: 0; font-size: 28px; letter-spacing: -.045em; }
.official-review-panel p:not(.eyebrow) { max-width: 600px; margin: 8px 0 0; color: rgba(255,255,255,.64); font-size: 13px; line-height: 1.65; }
.official-review-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.official-review-actions .btn-primary { color: #17372e; background: #bedb87; box-shadow: none; }
.official-review-actions .btn-secondary { color: #fff; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.07); }
.official-rule-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.official-rule-grid article { padding: 23px; border: 1px solid #dbe1da; border-radius: 18px; background: rgba(255,255,255,.66); }
.official-rule-grid span { color: #6b887d; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.official-rule-grid h3 { margin: 13px 0 6px; font-size: 16px; }
.official-rule-grid p { margin: 0; color: #74807c; font-size: 12px; line-height: 1.65; }
.official-recent-list { display: grid; gap: 9px; }
.official-recent-list article { padding: 15px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto 55px; align-items: center; gap: 16px; border: 1px solid #dbe1da; border-radius: 14px; background: #fff; }
.official-recent-list article div strong, .official-recent-list article div span { display: block; }
.official-recent-list article div span, .official-recent-list article > span { color: var(--muted); font-size: 11px; }
.official-recent-list article > strong { color: #244f43; font-size: 18px; }
.official-reset-row { margin-top: 36px; padding: 15px 0; display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.official-source-note { margin: 34px 0 0; padding-top: 20px; border-top: 1px solid #dbe1da; color: #808a86; font-size: 11px; line-height: 1.7; }
.official-quiz-page { min-height: 100vh; background: #f1f4f0; }
.official-quiz-brand { text-align: left; }
.official-round-label { max-width: 125px; overflow: hidden; color: #53615d; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.official-question-card { border-color: #dbe1da; }
.official-question-kicker { margin-top: 30px; display: flex; justify-content: space-between; color: #6f7e78; font-size: 11px; font-weight: 850; letter-spacing: .05em; }
.official-question-card .question-number { color: #244f43; }
.official-question-card .question-text { margin-top: 12px; white-space: pre-wrap; }
.matching-board { margin-top: 2px; padding: 18px; border: 1px solid #d8e2dc; border-radius: 20px; background: #f8faf8; }
.matching-instruction { margin-bottom: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.matching-instruction strong, .matching-instruction span { display: block; }
.matching-instruction strong { color: #203f36; font-size: 14px; }
.matching-instruction span { margin-top: 4px; color: #76827e; font-size: 11px; line-height: 1.55; }
.matching-instruction .text-button { flex: 0 0 auto; }
.matching-instruction .text-button:disabled { opacity: .42; cursor: default; }
.matching-workspace { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(0, 1.35fr); gap: 12px; }
.matching-bank, .matching-target-list { padding: 15px; border: 1px solid #e0e6e2; border-radius: 15px; background: #fff; }
.matching-bank h2, .matching-target-list h2 { margin: 0 0 11px; color: #64716d; font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.matching-chip-list, .matching-target-list { display: grid; gap: 9px; }
.matching-chip { min-height: 50px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid #cfd9d3; border-radius: 12px; color: #29483e; background: #fff; font-size: 12px; font-weight: 760; line-height: 1.48; text-align: left; cursor: grab; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
button.matching-chip { width: 100%; }
.matching-chip:hover { border-color: #79b39b; background: #f2faf6; transform: translateY(-1px); }
.matching-chip:focus-visible, .matching-target:focus-visible { outline: 3px solid rgba(98,88,213,.24); outline-offset: 2px; }
.matching-chip.is-selected { color: #fff; border-color: #6258d5; background: #6258d5; box-shadow: 0 8px 20px rgba(98,88,213,.2); }
.matching-chip.is-dragging { opacity: .45; transform: scale(.98); }
.matching-chip-marker { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #245c48; background: #e4f2eb; font-size: 12px; font-weight: 900; }
.matching-chip.is-selected .matching-chip-marker { color: #6258d5; background: #fff; }
.matching-bank-empty { min-height: 58px; margin: 0; display: grid; place-items: center; border: 1px dashed #cbd7d0; border-radius: 12px; color: #78857f; font-size: 11px; text-align: center; }
.matching-target { width: 100%; min-height: 82px; padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .85fr); align-items: center; gap: 10px; border: 1px dashed #c6d3cc; border-radius: 14px; color: var(--ink); background: #fbfcfb; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.matching-target:hover, .matching-target.is-over { border-color: #4d9c78; background: #edf8f2; box-shadow: 0 0 0 3px rgba(77,156,120,.1); }
.matching-target.is-filled { border-style: solid; border-color: #9cbcac; background: #f6fbf8; }
.matching-target:disabled { opacity: 1; cursor: default; }
.matching-target-copy { min-width: 0; }
.matching-target-copy strong { display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.45; }
.matching-target-copy small { display: block; margin: 5px 0 0 37px; color: #82908a; font-size: 10px; }
.matching-target-marker { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #fff; background: #315f50; font-size: 12px; font-weight: 900; }
.matching-drop-slot { min-height: 54px; display: grid; place-items: stretch; }
.matching-drop-slot .matching-chip { min-height: 54px; cursor: move; }
.matching-placeholder { min-height: 54px; display: grid; place-items: center; border: 1px dashed #cbd7d0; border-radius: 12px; color: #8a9691; background: rgba(255,255,255,.72); font-size: 11px; font-weight: 800; }
.matching-verdict { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid rgba(83,111,99,.13); font-size: 11px; font-weight: 850; }
.matching-verdict.correct { color: #24704e; }
.matching-verdict.wrong { color: #b43f51; }
.matching-target.is-correct { border-color: #75bd99; background: #eaf7f0; }
.matching-target.is-wrong { border-color: #e3a3ad; background: #fff0f2; }
.matching-board.is-locked .matching-chip { cursor: default; transform: none; }
.matching-progress { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #78857f; font-size: 10px; }
.matching-progress strong { color: #315f50; font-size: 11px; }
.official-result-hero { background: linear-gradient(135deg, #172b26, #315c50); }
.official-review-meta { color: #6a8178; font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.source-transform-note { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(69,91,82,.24); color: #68756f; }
.source-transform-note summary { width: fit-content; color: #49665b; font-size: 11px; font-weight: 850; cursor: pointer; }
.source-transform-note p { margin: 8px 0 0; color: inherit; font-size: 11px; line-height: 1.65; }

@media (max-width: 900px) {
  .official-hero { grid-template-columns: 1fr; }
  .official-mastery-ring { display: none; }
  .official-set-grid { grid-template-columns: 1fr; }
  .official-review-panel { align-items: flex-start; flex-direction: column; }
  .official-review-actions { justify-content: flex-start; }
}

@media (max-width: 650px) {
  .official-topbar { min-height: 64px; padding: 9px 14px; }
  .official-brand .brand-mark, .official-brand .brand-logo { width: 40px; height: 40px; }
  .official-user-name { display: none; }
  .official-top-actions .btn:first-child { display: none; }
  .official-content { padding: 22px 14px 40px; }
  .official-hero { min-height: 0; padding: 32px 23px; gap: 0; border-radius: 24px; }
  .official-hero-copy h1 { font-size: 43px; }
  .official-hero-copy > p:not(.eyebrow) { font-size: 13px; }
  .official-hero .hero-actions { display: grid; }
  .official-hero .hero-actions .btn { width: 100%; }
  .official-metric-grid, .official-rule-grid { grid-template-columns: 1fr; }
  .official-set-card { padding: 21px 18px; }
  .official-set-card p { min-height: 0; }
  .official-review-actions { width: 100%; display: grid; }
  .official-review-actions .btn { width: 100%; }
  .official-recent-list article { grid-template-columns: minmax(0, 1fr) auto; }
  .official-recent-list article > span { display: none; }
  .official-reset-row { align-items: flex-start; flex-direction: column; }
  .official-quiz-brand > span:last-child, .official-round-label { display: none; }
  .official-question-kicker { margin-top: 24px; }
  .matching-board { padding: 14px; border-radius: 17px; }
  .matching-instruction { align-items: flex-start; flex-direction: column; gap: 8px; }
  .matching-workspace { grid-template-columns: 1fr; }
  .matching-target { grid-template-columns: 1fr; }
  .matching-target-copy small { margin-left: 37px; }
  .matching-drop-slot, .matching-drop-slot .matching-chip, .matching-placeholder { min-height: 50px; }
  .matching-progress { align-items: flex-start; flex-direction: column; }
}

/* 화면 테마 전환 */
.theme-toggle { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(227,229,237,.92); border-radius: 15px; color: #4f556b; background: rgba(255,255,255,.9); box-shadow: 0 14px 38px rgba(33,37,65,.18); backdrop-filter: blur(16px); cursor: pointer; transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.theme-toggle:hover { color: var(--primary); border-color: #cbc7ef; box-shadow: 0 18px 44px rgba(33,37,65,.24); transform: translateY(-2px) rotate(-4deg); }
.theme-toggle:focus-visible { outline: 3px solid rgba(98,88,213,.32); outline-offset: 3px; }
.theme-icon { grid-area: 1 / 1; font-size: 24px; line-height: 1; transition: opacity .18s ease, transform .22s ease; }
.theme-icon-sun { opacity: 0; transform: rotate(-50deg) scale(.65); }
.theme-icon-moon { opacity: 1; transform: rotate(0) scale(1); }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f3f5ff;
  --ink-soft: #c6cbd8;
  --muted: #949bad;
  --paper: #0d0f16;
  --card: #171a24;
  --line: #2d3241;
  --primary: #a79bff;
  --primary-dark: #8f82f2;
  --primary-soft: #292644;
  --green: #74d9ae;
  --green-soft: #17362b;
  --lime: #c2e78f;
  --amber: #f2b35e;
  --amber-soft: #3a2a17;
  --red: #ff8596;
  --red-soft: #3d2028;
  --shadow: 0 18px 55px rgba(0,0,0,.42);
  --dark-deep: #11131d;
  --dark-surface: #171a24;
  --dark-surface-2: #1d212d;
  --dark-surface-3: #242938;
  --dark-glass: rgba(18,21,30,.92);
  --official-bg: #0f1512;
  --official-surface: #171f1b;
  --official-surface-2: #1c2722;
  --official-line: #2c3c34;
  --official-text: #dce8e2;
  --official-muted: #9baaa3;
  --official-accent: #8ed6b5;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .quiz-page { color: var(--ink); background: var(--paper); }
html[data-theme="dark"] .skip-link,
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .setup-summary,
html[data-theme="dark"] .toast { color: #f7f8ff; background: var(--dark-deep); }
html[data-theme="dark"] .entry-page { background: var(--dark-deep); }
html[data-theme="dark"] .entry-panel { background: var(--paper); }
html[data-theme="dark"] .entry-card,
html[data-theme="dark"] .admin-card { border-color: rgba(255,255,255,.08); background: rgba(23,26,36,.97); box-shadow: var(--shadow); }
html[data-theme="dark"] .entry-official-link { color: #9bd8bf; border-color: #315143; background: #172920; }
html[data-theme="dark"] .entry-official-link small { color: #93a89f; }
html[data-theme="dark"] .entry-practical-link { color: #9ce4df; border-color: #2d5556; background: #163033; }
html[data-theme="dark"] .entry-practical-link small { color: #8eb4b4; }
html[data-theme="dark"] .connection-error { border-color: #713743; }
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea { color: var(--ink); border-color: var(--line); background: #12151f; }
html[data-theme="dark"] .field input::placeholder,
html[data-theme="dark"] .field textarea::placeholder { color: #777f92; }

html[data-theme="dark"] .btn { color: var(--ink); background: var(--dark-surface-2); }
html[data-theme="dark"] .btn-primary { color: #fff; background: var(--primary); }
html[data-theme="dark"] .btn-check { color: #fff; background: #348d6b; }
html[data-theme="dark"] .btn-secondary { color: var(--ink); border-color: var(--line); background: var(--dark-surface-2); }
html[data-theme="dark"] .btn-secondary:hover { border-color: #474d60; background: var(--dark-surface-3); }
html[data-theme="dark"] .btn-danger { color: var(--red); border-color: #713743; background: var(--red-soft); }
html[data-theme="dark"] .hero-actions .btn-primary,
html[data-theme="dark"] .hero-score,
html[data-theme="dark"] .official-hero .hero-actions .btn-primary,
html[data-theme="dark"] .official-review-actions .btn-primary { color: #172016; background: var(--lime); }
html[data-theme="dark"] .hero-actions .btn-secondary,
html[data-theme="dark"] .result-actions .btn-secondary,
html[data-theme="dark"] .official-review-actions .btn-secondary { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }

html[data-theme="dark"] .sidebar { background: var(--dark-glass); }
html[data-theme="dark"] .topbar { background: rgba(13,15,22,.88); }
html[data-theme="dark"] .mobile-nav { border-color: rgba(45,50,65,.94); background: rgba(18,21,30,.95); box-shadow: 0 14px 42px rgba(0,0,0,.42); }
html[data-theme="dark"] .nav-button:hover { background: var(--dark-surface-3); }
html[data-theme="dark"] .nav-button.nav-official { color: #9ed9bf; }
html[data-theme="dark"] .nav-button.nav-teacher { color: #e7c58f; }
html[data-theme="dark"] .teacher-path-card,
html[data-theme="dark"] .entry-teacher-link { border-color: #604b2c; background: linear-gradient(145deg, #201b16, #2c2418); }
html[data-theme="dark"] .nav-button.nav-official .nav-icon { background: #19372b; }
html[data-theme="dark"] .nav-button.nav-practical { color: #9ce4df; }
html[data-theme="dark"] .nav-button.nav-practical .nav-icon { color: #9ce4df; background: #183538; }
html[data-theme="dark"] .logout-mini { background: var(--dark-surface-3); }
html[data-theme="dark"] .category-card::after { color: rgba(255,255,255,.035); }
html[data-theme="dark"] .fixed-set-card,
html[data-theme="dark"] .choice-card { border-color: var(--line); background: var(--card); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
html[data-theme="dark"] .short-answer-set-card { border-color: #504778; background: linear-gradient(145deg, #191b25, #292544); }
html[data-theme="dark"] .teacher-core-set-card { border-color: #35604e; background: linear-gradient(145deg, #191b25, #19372b); }
html[data-theme="dark"] .short-answer-feature { border-color: #4b416f; background: radial-gradient(circle at 87% 14%, rgba(167,155,255,.15), transparent 29%), linear-gradient(135deg, #171724, #27223e); }
html[data-theme="dark"] .short-answer-feature h2 { color: var(--ink); }
html[data-theme="dark"] .short-answer-feature p:not(.eyebrow) { color: #aaa3bc; }
html[data-theme="dark"] .source-legend { border-color: #403a63; background: #1c192b; }
html[data-theme="dark"] .practical-path-card { border-color: #2c5354; background: linear-gradient(135deg, #14272b, #183638); }
html[data-theme="dark"] .practical-path-card h2 { color: var(--ink); }
html[data-theme="dark"] .practical-path-card p:not(.eyebrow) { color: #9bb9ba; }
html[data-theme="dark"] .official-progress-loading { color: #e4cc82; border-color: #5b4b1f; background: #2e2714; }
html[data-theme="dark"] .choice-card:hover,
html[data-theme="dark"] .choice-card.selected { background: var(--primary-soft); }

html[data-theme="dark"] .quiz-header { background: rgba(18,21,30,.95); }
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .question-nav,
html[data-theme="dark"] .option-button,
html[data-theme="dark"] .flag-button,
html[data-theme="dark"] .number-button { border-color: var(--line); background: var(--card); }
html[data-theme="dark"] .option-button:hover,
html[data-theme="dark"] .option-button.selected { background: var(--primary-soft); }
html[data-theme="dark"] .short-answer-wrap { border-color: var(--line); background: var(--dark-surface-2); }
html[data-theme="dark"] .short-answer-input { color: var(--ink); border-color: #504778; background: #12151f; }
html[data-theme="dark"] .short-answer-input::placeholder { color: #777f92; }
html[data-theme="dark"] .short-answer-wrap.correct { border-color: #396d58; background: var(--green-soft); }
html[data-theme="dark"] .short-answer-wrap.wrong { border-color: #783946; background: var(--red-soft); }
html[data-theme="dark"] .short-answer-wrap.correct .short-answer-input,
html[data-theme="dark"] .short-answer-wrap.wrong .short-answer-input { color: var(--ink); background: #12151f; }
html[data-theme="dark"] .option-key,
html[data-theme="dark"] .tag.neutral { background: var(--dark-surface-3); }
html[data-theme="dark"] .quiz-progress,
html[data-theme="dark"] .quiz-progress::-webkit-progress-bar,
html[data-theme="dark"] .category-stat-score progress,
html[data-theme="dark"] .category-stat-score progress::-webkit-progress-bar { background: var(--dark-surface-3); }
html[data-theme="dark"] .tag.source-ai { color: #c0b6ff; border-color: #504778; background: #292544; }
html[data-theme="dark"] .tag.source-official { color: #9ed9bf; border-color: #35604e; background: #19372b; }
html[data-theme="dark"] .option-button.correct-answer,
html[data-theme="dark"] .answer-feedback { border-color: #396d58; }
html[data-theme="dark"] .option-button.wrong-answer,
html[data-theme="dark"] .answer-feedback.wrong { border-color: #783946; }
html[data-theme="dark"] .number-button.answered { border-color: #514b7b; }
html[data-theme="dark"] .number-button.checked { border-color: #396d58; }
html[data-theme="dark"] .number-button.checked.checked-wrong { border-color: #783946; }
html[data-theme="dark"] .number-button.current { color: #fff; border-color: var(--primary); background: var(--primary); }
html[data-theme="dark"] .easy-explanation-button { color: #b7afff; }
html[data-theme="dark"] .answer-feedback.wrong .easy-explanation-button { color: #ff9baa; }

html[data-theme="dark"] .easy-modal-backdrop { background: rgba(5,7,12,.8); }
html[data-theme="dark"] .easy-modal { border-color: var(--line); background: var(--dark-surface); box-shadow: 0 32px 100px rgba(0,0,0,.62); }
html[data-theme="dark"] .easy-modal-header { border-color: var(--line); background: rgba(23,26,36,.96); }
html[data-theme="dark"] .easy-modal-close { color: var(--muted); border-color: var(--line); background: var(--dark-surface-3); }
html[data-theme="dark"] .easy-modal-close:hover { color: var(--ink); background: #303545; }
html[data-theme="dark"] .easy-question-copy { border-left-color: var(--primary); background: #211f35; }
html[data-theme="dark"] .easy-question-copy span { color: #b7afff; }
html[data-theme="dark"] .easy-question-copy p,
html[data-theme="dark"] .easy-step p,
html[data-theme="dark"] .easy-solve-list,
html[data-theme="dark"] .easy-comparison-heading p,
html[data-theme="dark"] .easy-comparison-item p,
html[data-theme="dark"] .easy-transfer-tip p { color: var(--ink-soft); }
html[data-theme="dark"] .easy-deep-note { border-left-color: var(--primary); background: #292544; }
html[data-theme="dark"] .easy-deep-note strong { color: #c0b6ff; }
html[data-theme="dark"] .easy-deep-note p { color: var(--ink-soft); }
html[data-theme="dark"] .easy-analogy-note { color: #f2c67d !important; background: var(--amber-soft); }
html[data-theme="dark"] .easy-analogy-note strong { color: #f2c67d; }
html[data-theme="dark"] .easy-answer-box,
html[data-theme="dark"] .easy-selected-note.correct { color: #a6dfc6; border-color: #396d58; background: var(--green-soft); }
html[data-theme="dark"] .easy-answer-box span,
html[data-theme="dark"] .easy-answer-box strong { color: #a6dfc6; }
html[data-theme="dark"] .easy-step { border-color: var(--line); background: var(--dark-surface-2); }
html[data-theme="dark"] .easy-clue-box { border-color: #6e5129; background: var(--amber-soft); }
html[data-theme="dark"] .easy-clue-box span,
html[data-theme="dark"] .easy-clue-box p { color: #f2c67d; }
html[data-theme="dark"] .easy-comparison { border-color: var(--line); background: var(--dark-surface-2); }
html[data-theme="dark"] .easy-comparison-item { border-color: var(--line); background: var(--dark-surface); }
html[data-theme="dark"] .easy-comparison-item.correct { border-color: #396d58; background: var(--green-soft); }
html[data-theme="dark"] .easy-comparison-item.selected-wrong { border-color: #783946; background: var(--red-soft); }
html[data-theme="dark"] .easy-comparison-title span { color: var(--muted); background: var(--dark-surface-3); }
html[data-theme="dark"] .easy-comparison-item.correct .easy-comparison-title span { color: #a6dfc6; background: #244a3b; }
html[data-theme="dark"] .easy-comparison-item.selected-wrong .easy-comparison-title span { color: #ff9baa; background: #542b34; }
html[data-theme="dark"] .easy-result-chip.correct { color: #a6dfc6; background: var(--green-soft); }
html[data-theme="dark"] .easy-result-chip.wrong,
html[data-theme="dark"] .easy-selected-note.wrong { color: #ff9baa; background: var(--red-soft); }
html[data-theme="dark"] .easy-memory-tip { border-color: #6e5129; background: var(--amber-soft); }
html[data-theme="dark"] .easy-memory-tip span,
html[data-theme="dark"] .easy-memory-tip strong { color: #f2c67d; }
html[data-theme="dark"] .easy-transfer-tip { border-color: #504778; background: #292544; }
html[data-theme="dark"] .easy-transfer-tip span,
html[data-theme="dark"] .easy-transfer-tip strong { color: #c0b6ff; }

html[data-theme="dark"] .review-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .category-stat,
html[data-theme="dark"] .admin-question-card { border-color: var(--line); background: var(--card); }
html[data-theme="dark"] .explanation,
html[data-theme="dark"] .admin-options li,
html[data-theme="dark"] .admin-explanation { background: var(--dark-surface-2); }
html[data-theme="dark"] th { color: var(--muted); background: var(--dark-surface-3); }
html[data-theme="dark"] tbody tr:hover { background: #1c202b; }
html[data-theme="dark"] .admin-question-card[open] summary { background: var(--dark-surface-2); }
html[data-theme="dark"] .admin-options li.correct { color: #9ce1c2; }
html[data-theme="dark"] .notice strong { color: #f0bc72; }
html[data-theme="dark"] .notice code { background: rgba(0,0,0,.24); }
html[data-theme="dark"] .admin-login-page { background: radial-gradient(circle at 20% 0, #332f68, transparent 36%), var(--dark-deep); }
html[data-theme="dark"] .toast { border: 1px solid var(--line); background: #202431; }
html[data-theme="dark"] .toast.error { border-color: #86404d; background: #762e3b; }

html[data-theme="dark"] .official-body,
html[data-theme="dark"] .official-quiz-page { color: var(--official-text); background: var(--official-bg); }
html[data-theme="dark"] .official-topbar { border-color: var(--official-line); background: rgba(15,21,18,.95); }
html[data-theme="dark"] .official-metric-grid article,
html[data-theme="dark"] .official-set-card,
html[data-theme="dark"] .official-rule-grid article,
html[data-theme="dark"] .official-recent-list article { border-color: var(--official-line); background: var(--official-surface); box-shadow: 0 10px 35px rgba(0,0,0,.2); }
html[data-theme="dark"] .official-metric-grid span,
html[data-theme="dark"] .official-metric-grid p,
html[data-theme="dark"] .official-set-head,
html[data-theme="dark"] .official-set-footer,
html[data-theme="dark"] .official-rule-grid p,
html[data-theme="dark"] .official-recent-list article div span,
html[data-theme="dark"] .official-recent-list article > span,
html[data-theme="dark"] .official-source-note,
html[data-theme="dark"] .official-round-label,
html[data-theme="dark"] .official-question-kicker,
html[data-theme="dark"] .official-review-meta,
html[data-theme="dark"] .source-transform-note { color: var(--official-muted); }
html[data-theme="dark"] .official-metric-grid strong,
html[data-theme="dark"] .official-set-code,
html[data-theme="dark"] .official-recent-list article > strong,
html[data-theme="dark"] .official-question-card .question-number { color: var(--official-accent); }
html[data-theme="dark"] .official-set-card progress,
html[data-theme="dark"] .official-set-card progress::-webkit-progress-bar { background: #29362f; }
html[data-theme="dark"] .official-source-note { border-color: var(--official-line); }
html[data-theme="dark"] .official-question-card,
html[data-theme="dark"] .official-quiz-page .question-nav,
html[data-theme="dark"] .official-quiz-page .option-button,
html[data-theme="dark"] .official-quiz-page .flag-button,
html[data-theme="dark"] .official-quiz-page .number-button { border-color: var(--official-line); background: var(--official-surface); }
html[data-theme="dark"] .official-quiz-page .quiz-header { border-color: var(--official-line); background: rgba(15,21,18,.95); }

html[data-theme="dark"] .matching-board { border-color: var(--official-line); background: #121a16; }
html[data-theme="dark"] .matching-bank,
html[data-theme="dark"] .matching-target-list,
html[data-theme="dark"] .matching-chip,
html[data-theme="dark"] .matching-target { color: var(--official-text); border-color: var(--official-line); background: var(--official-surface); }
html[data-theme="dark"] .matching-instruction strong,
html[data-theme="dark"] .matching-chip,
html[data-theme="dark"] .matching-target-copy strong { color: var(--official-text); }
html[data-theme="dark"] .matching-instruction span,
html[data-theme="dark"] .matching-bank h2,
html[data-theme="dark"] .matching-target-list h2,
html[data-theme="dark"] .matching-target-copy small,
html[data-theme="dark"] .matching-bank-empty,
html[data-theme="dark"] .matching-progress { color: var(--official-muted); }
html[data-theme="dark"] .matching-chip:hover,
html[data-theme="dark"] .matching-target:hover,
html[data-theme="dark"] .matching-target.is-over,
html[data-theme="dark"] .matching-target.is-filled { background: var(--official-surface-2); }
html[data-theme="dark"] .matching-chip-marker { color: #a5dfc6; background: #234136; }
html[data-theme="dark"] .matching-placeholder { color: var(--official-muted); border-color: var(--official-line); background: rgba(255,255,255,.035); }
html[data-theme="dark"] .matching-target.is-correct { border-color: #4e9677; background: var(--green-soft); }
html[data-theme="dark"] .matching-target.is-wrong { border-color: #8d4653; background: var(--red-soft); }
html[data-theme="dark"] .source-transform-note summary { color: var(--official-accent); }

html[data-theme="dark"] .theme-toggle { color: #d8dbee; border-color: rgba(66,72,91,.95); background: rgba(29,33,45,.92); box-shadow: 0 16px 42px rgba(0,0,0,.42); }
html[data-theme="dark"] .theme-toggle:hover { color: #ffe58a; border-color: #6b627c; background: rgba(36,41,56,.96); }
html[data-theme="dark"] .theme-icon-moon { opacity: 0; transform: rotate(50deg) scale(.65); }
html[data-theme="dark"] .theme-icon-sun { opacity: 1; transform: rotate(0) scale(1); }

@media (max-width: 980px) {
  .theme-toggle { right: 17px; bottom: 88px; }
}

/* SQL 실기 스크립트 연습실 */
.tag.source-sample { color: #78521b; border-color: #ecd09d; background: #fff2d9; }
.practical-body { background: #f1f4f7; }
.practical-shell { min-height: 100vh; }
.practical-topbar { position: sticky; top: 0; z-index: 35; min-height: 74px; padding: 10px clamp(18px, 4vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #dce3e8; background: rgba(248,250,251,.95); backdrop-filter: blur(18px); }
.practical-brand { display: flex; align-items: center; gap: 12px; color: #172131; font-weight: 900; letter-spacing: -.03em; text-decoration: none; }
.practical-brand .brand-mark, .practical-entry-story .brand-mark { width: 48px; padding: 0 8px; color: #071923; background: #6de1dd; box-shadow: 0 10px 28px rgba(19,160,157,.22); font-size: 12px; letter-spacing: -.03em; }
.practical-brand small { display: block; margin-top: 2px; color: #74808b; font-size: 9px; font-weight: 750; letter-spacing: .08em; }
.practical-top-actions { display: flex; align-items: center; gap: 8px; }
.practical-user-name { color: #5c6874; font-size: 12px; font-weight: 800; }
.practical-entry-story { background: linear-gradient(145deg, #111a27 0%, #17333e 60%, #176d70 135%); }
.practical-entry-story::after { background: #6de1dd; }
.practical-content { width: min(100%, 1320px); margin: 0 auto; padding: clamp(28px, 5vw, 62px); }
.practical-hero { min-height: 310px; padding: clamp(30px, 5vw, 58px); display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: center; gap: 40px; overflow: hidden; position: relative; border-radius: 32px; color: #eafcff; background: radial-gradient(circle at 90% 0, rgba(109,225,221,.22), transparent 34%), linear-gradient(135deg, #101b29, #173946 70%, #176e71); box-shadow: 0 24px 65px rgba(15,45,55,.18); }
.practical-hero::after { content: "SELECT"; position: absolute; right: -15px; bottom: -28px; color: rgba(255,255,255,.035); font: 950 clamp(80px, 12vw, 160px)/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: -.1em; pointer-events: none; }
.practical-hero > div { position: relative; z-index: 1; }
.practical-hero .eyebrow { color: #79eee9; }
.practical-hero h1 { margin: 0; font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -.065em; }
.practical-hero p:not(.eyebrow) { max-width: 640px; margin: 20px 0 28px; color: rgba(234,252,255,.7); line-height: 1.75; }
.practical-hero .btn-primary { color: #071923; background: #6de1dd; box-shadow: none; }
.practical-hero .btn-secondary { color: #fff; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.07); }
.practical-hero-score { min-height: 190px; padding: 28px; display: grid; place-content: center; border: 1px solid rgba(255,255,255,.13); border-radius: 26px; background: rgba(4,20,27,.28); }
.practical-hero-score strong { font-size: 62px; line-height: 1; letter-spacing: -.07em; }
.practical-hero-score span { margin-top: 5px; color: rgba(234,252,255,.65); font-size: 12px; }
.practical-hero-score progress { width: 150px; height: 8px; margin-top: 18px; border: 0; border-radius: 999px; overflow: hidden; appearance: none; background: rgba(255,255,255,.12); }
.practical-hero-score progress::-webkit-progress-bar { background: rgba(255,255,255,.12); }
.practical-hero-score progress::-webkit-progress-value { background: #6de1dd; }
.practical-hero-score progress::-moz-progress-bar { background: #6de1dd; }
.practical-metrics { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.practical-metrics article { padding: 22px; border: 1px solid #dfe6ea; border-radius: 18px; background: #fff; }
.practical-metrics span { color: #7b8791; font-size: 11px; font-weight: 800; }
.practical-metrics strong { display: block; margin-top: 8px; font-size: 30px; letter-spacing: -.05em; }
.practical-metrics small { margin-left: 4px; color: #8b959e; font-size: 12px; }
.practical-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.practical-project-card { padding: 22px; display: flex; flex-direction: column; border: 1px solid #dfe6ea; border-radius: 20px; background: #fff; box-shadow: 0 10px 34px rgba(31,52,63,.05); }
.practical-project-card.official { border-top: 4px solid #68b995; }
.practical-project-card.sample { border-top: 4px solid #e4b45f; }
.practical-project-card.ai { border-top: 4px solid #7865d7; }
.practical-project-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #7a8690; font-size: 10px; font-weight: 850; }
.practical-project-card h3 { margin: 21px 0 8px; font-size: 21px; letter-spacing: -.04em; }
.practical-project-card > p { min-height: 43px; margin: 0; color: #76818c; font-size: 12px; line-height: 1.65; }
.practical-project-concepts { margin: 18px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.practical-project-concepts span { padding: 5px 7px; border-radius: 7px; color: #48616a; background: #edf4f5; font: 750 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.practical-project-card progress { width: 100%; height: 7px; margin: auto 0 16px; overflow: hidden; border: 0; border-radius: 99px; appearance: none; background: #e9eef0; }
.practical-project-card progress::-webkit-progress-bar { background: #e9eef0; }
.practical-project-card progress::-webkit-progress-value { background: #26958f; }
.practical-project-card progress::-moz-progress-bar { background: #26958f; }
.practical-source-note { margin: 28px 0 0; padding: 18px 0; border-top: 1px solid #dfe6ea; color: #7b8791; font-size: 11px; line-height: 1.7; }

.practical-lab { width: min(100%, 1500px); margin: 0 auto; padding: 28px clamp(16px, 3vw, 42px) 70px; display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; align-items: start; }
.practical-workbench { min-width: 0; display: grid; gap: 16px; }
.practical-question-panel, .practical-editor-panel, .practical-feedback, .practical-feedback-placeholder, .practical-navigator { border: 1px solid #dce4e8; border-radius: 21px; background: #fff; box-shadow: 0 10px 36px rgba(31,52,63,.045); }
.practical-question-panel { padding: clamp(24px, 4vw, 40px); }
.practical-question-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.practical-question-meta > div { display: flex; flex-wrap: wrap; gap: 6px; }
.practical-question-meta > span { color: #89939c; font-size: 11px; font-weight: 850; }
.practical-document { margin: 24px 0 7px; color: #2f8f68; font-size: 11px; font-weight: 850; }
.practical-question-panel h1 { margin: 0; font-size: clamp(27px, 3.5vw, 44px); line-height: 1.12; letter-spacing: -.055em; }
.practical-task { margin: 17px 0 0; color: #56636d; font-size: 15px; line-height: 1.8; word-break: keep-all; }
.practical-schema { margin-top: 24px; padding: 17px; display: grid; gap: 8px; border: 1px solid #dbe8e8; border-radius: 14px; background: #f2f8f8; }
.practical-schema strong { color: #52636a; font-size: 10px; letter-spacing: .08em; }
.practical-schema code { color: #164b52; font: 700 11px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.practical-editor-panel { overflow: hidden; background: #111824; }
.practical-editor-head { min-height: 50px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #27303e; color: #94a2ae; background: #171f2c; font-size: 10px; }
.practical-editor-head > div { display: flex; align-items: center; gap: 7px; }
.practical-editor-head strong { margin-left: 8px; color: #ced8df; font: 700 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.editor-dot { width: 9px; height: 9px; border-radius: 50%; }
.editor-dot.red { background: #fb6b6b; }.editor-dot.amber { background: #f4c45d; }.editor-dot.green { background: #62cf89; }
.sql-editor { width: 100%; min-height: 390px; padding: 25px; resize: vertical; border: 0; outline: 0; color: #d9f4f0; background: #111824; caret-color: #6de1dd; font: 600 14px/1.8 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; tab-size: 2; }
.sql-editor:focus { box-shadow: inset 0 0 0 2px rgba(109,225,221,.4); }
.practical-editor-actions { min-height: 70px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #27303e; background: #171f2c; }
.practical-editor-actions > div { display: flex; gap: 8px; }
.practical-editor-actions .btn-secondary { color: #d9e2e8; border-color: #364151; background: #222c39; }
.practical-editor-actions .btn-primary { color: #071923; background: #6de1dd; box-shadow: none; }
.practical-hint { min-width: 0; color: #aab6bf; font-size: 11px; }
.practical-hint summary { width: fit-content; color: #7fe9e4; font-weight: 850; cursor: pointer; }
.practical-hint p { max-width: 640px; margin: 8px 0 0; line-height: 1.65; }
.practical-feedback-placeholder { padding: 28px; text-align: center; }
.practical-feedback-placeholder strong { font-size: 14px; }
.practical-feedback-placeholder p { margin: 8px 0 0; color: #87919a; font-size: 12px; }
.practical-feedback { padding: clamp(22px, 4vw, 36px); scroll-margin-top: 92px; }
.practical-feedback.correct { border-color: #9bd5bc; }
.practical-feedback.wrong { border-color: #edb3bb; }
.practical-feedback-title { display: flex; align-items: flex-start; gap: 14px; }
.practical-feedback-title > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: #fff; background: #2f8f68; font-weight: 900; }
.practical-feedback.wrong .practical-feedback-title > span { background: #c74b5c; }
.practical-feedback-title strong { display: block; font-size: 19px; }
.practical-feedback-title p { margin: 5px 0 0; color: #68747e; font-size: 12px; line-height: 1.6; }
.practical-missing-list { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.practical-missing-list strong { margin-right: 4px; color: #9f3b4a; font-size: 11px; }
.practical-missing-list span { padding: 6px 9px; border-radius: 999px; color: #a53d4c; background: #ffe9ec; font-size: 10px; font-weight: 800; }
.practical-solution { margin-top: 25px; overflow: hidden; border: 1px solid #2d3745; border-radius: 15px; background: #111824; }
.practical-solution > div { min-height: 44px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; color: #9dabb6; background: #171f2c; font-size: 10px; font-weight: 850; }
.practical-solution .text-button { color: #7fe9e4; }
.practical-solution pre { margin: 0; padding: 22px; overflow: auto; }
.practical-solution code { color: #d9f4f0; font: 600 12px/1.75 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; }
.practical-easy-explanation, .practical-expected { margin-top: 24px; }
.practical-easy-explanation h3, .practical-expected h3 { margin: 0 0 12px; font-size: 16px; letter-spacing: -.03em; }
.practical-easy-explanation ol { margin: 0; padding: 0; display: grid; gap: 9px; list-style: none; counter-reset: sql-step; }
.practical-easy-explanation li { counter-increment: sql-step; padding: 13px 15px 13px 49px; position: relative; border-radius: 12px; color: #52606a; background: #f2f7f7; font-size: 12px; line-height: 1.65; }
.practical-easy-explanation li::before { content: counter(sql-step); position: absolute; left: 13px; top: 12px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #258d88; font-size: 10px; font-weight: 900; }
.practical-result-table { overflow: auto; border: 1px solid #dce4e8; border-radius: 13px; }
.practical-result-table table { min-width: 620px; }
.practical-result-table p { margin: 0; padding: 10px 13px; border-top: 1px solid #e5eaed; color: #7c8790; font-size: 10px; }
.practical-step-actions { display: flex; align-items: center; justify-content: space-between; }
.practical-navigator { position: sticky; top: 94px; padding: 22px; }
.practical-navigator h2 { margin: 0; font-size: 23px; letter-spacing: -.04em; }
.practical-navigator > div:first-child > p:not(.eyebrow) { margin: 7px 0 0; color: #7e8992; font-size: 11px; line-height: 1.6; }
.practical-number-list { margin-top: 19px; display: grid; gap: 7px; max-height: calc(100vh - 300px); overflow: auto; }
.practical-number { width: 100%; min-height: 48px; padding: 7px 9px; display: grid; grid-template-columns: 31px minmax(0, 1fr); align-items: center; gap: 9px; border: 1px solid #e1e7ea; border-radius: 11px; color: #58656f; background: #fff; text-align: left; cursor: pointer; }
.practical-number span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: #f0f3f5; font-size: 9px; font-weight: 900; }
.practical-number small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 750; }
.practical-number.current { color: #0a5d5a; border-color: #53c8c3; background: #effbfa; }
.practical-number.checked { border-color: #7bc3a3; }
.practical-number.checked span { color: #fff; background: #2f8f68; }
.practical-number.checked.checked-wrong { color: #a23c4a; border-color: #e39da7; background: #fff4f5; }
.practical-number.checked.checked-wrong span { color: #fff; background: #c74b5c; }
.practical-nav-legend { margin-top: 17px; padding-top: 15px; display: grid; gap: 7px; border-top: 1px solid #e3e8eb; color: #7d8891; font-size: 9px; }
.practical-nav-legend span { display: flex; align-items: center; gap: 7px; }
.practical-nav-legend i { width: 9px; height: 9px; border-radius: 3px; background: #dfe4e7; }
.practical-nav-legend i.wrong { background: #c74b5c; }.practical-nav-legend i.correct { background: #2f8f68; }

html[data-theme="dark"] .tag.source-sample { color: #f4c878; border-color: #6d5427; background: #3a2a17; }
html[data-theme="dark"] .practical-body { background: #0c1117; }
html[data-theme="dark"] .practical-topbar { border-color: #2a3540; background: rgba(13,19,26,.95); }
html[data-theme="dark"] .practical-brand { color: #eef7fa; }
html[data-theme="dark"] .practical-brand small, html[data-theme="dark"] .practical-user-name { color: #94a2ad; }
html[data-theme="dark"] .practical-metrics article,
html[data-theme="dark"] .practical-project-card,
html[data-theme="dark"] .practical-question-panel,
html[data-theme="dark"] .practical-feedback,
html[data-theme="dark"] .practical-feedback-placeholder,
html[data-theme="dark"] .practical-navigator { color: #e7eff3; border-color: #293540; background: #151d25; box-shadow: 0 10px 36px rgba(0,0,0,.25); }
html[data-theme="dark"] .practical-project-card > p,
html[data-theme="dark"] .practical-task,
html[data-theme="dark"] .practical-feedback-title p,
html[data-theme="dark"] .practical-feedback-placeholder p,
html[data-theme="dark"] .practical-navigator > div:first-child > p:not(.eyebrow) { color: #9aa7b0; }
html[data-theme="dark"] .practical-project-concepts span { color: #9edbd8; background: #1b3237; }
html[data-theme="dark"] .practical-project-card progress,
html[data-theme="dark"] .practical-project-card progress::-webkit-progress-bar { background: #26323b; }
html[data-theme="dark"] .practical-source-note { border-color: #293540; color: #8d9ba5; }
html[data-theme="dark"] .practical-schema { border-color: #2b474b; background: #14272c; }
html[data-theme="dark"] .practical-schema strong { color: #93aaaF; }
html[data-theme="dark"] .practical-schema code { color: #9ce4df; }
html[data-theme="dark"] .practical-easy-explanation li { color: #c3cdd3; background: #1d2931; }
html[data-theme="dark"] .practical-result-table { border-color: #2b3741; }
html[data-theme="dark"] .practical-result-table p { border-color: #2b3741; color: #93a0a9; }
html[data-theme="dark"] .practical-number { color: #bdc8ce; border-color: #2b3741; background: #18212a; }
html[data-theme="dark"] .practical-number span { background: #25303a; }
html[data-theme="dark"] .practical-number.current { color: #a2ebe7; border-color: #3da5a1; background: #173033; }
html[data-theme="dark"] .practical-number.checked.checked-wrong { color: #ff9baa; border-color: #783946; background: #3d2028; }
html[data-theme="dark"] .practical-nav-legend { border-color: #2b3741; }

@media (max-width: 1080px) {
  .practical-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .practical-lab { grid-template-columns: 1fr; }
  .practical-navigator { position: static; }
  .practical-number-list { max-height: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .practical-topbar { min-height: 64px; padding: 8px 13px; }
  .practical-brand > span:last-child, .practical-user-name, .practical-top-actions .mode-chip, .practical-top-actions .btn:nth-of-type(2), .practical-top-actions .btn:nth-of-type(3) { display: none; }
  .practical-top-actions .text-button { font-size: 10px; }
  .practical-content { padding: 22px 14px 40px; }
  .practical-hero { min-height: 0; padding: 32px 23px; grid-template-columns: 1fr; border-radius: 24px; }
  .practical-hero h1 { font-size: 40px; }
  .practical-hero-score { display: none; }
  .practical-metrics, .practical-project-grid { grid-template-columns: 1fr; }
  .practical-project-card > p { min-height: 0; }
  .practical-lab { padding: 14px 11px 96px; gap: 12px; }
  .practical-question-panel { padding: 22px 18px; border-radius: 18px; }
  .practical-question-meta { align-items: flex-start; flex-direction: column-reverse; }
  .practical-question-panel h1 { font-size: 29px; }
  .practical-task { font-size: 14px; }
  .practical-schema { padding: 14px; }
  .sql-editor { min-height: 360px; padding: 19px 15px; font-size: 12px; }
  .practical-editor-actions { align-items: stretch; flex-direction: column; }
  .practical-editor-actions > div, .practical-editor-actions .btn { width: 100%; }
  .practical-editor-actions > div { display: grid; grid-template-columns: 1fr 1fr; }
  .practical-hint { width: 100%; }
  .practical-feedback { padding: 21px 16px; }
  .practical-solution pre { padding: 17px 14px; }
  .practical-number-list { grid-template-columns: 1fr 1fr; }
  .practical-number { grid-template-columns: 30px minmax(0, 1fr); }
  .practical-step-actions .btn { min-width: 120px; }
}

/* JSP 검색 페이지 전용 연습실 */
.entry-jsp-link { color: #5b43b8; border-color: #d8cff7; background: #f4f0ff; }
.entry-jsp-link small { color: #786da2; }
.nav-button.nav-jsp { color: #6649c7; }
.nav-button.nav-jsp .nav-icon { color: #fff; background: #7053d4; }
.jsp-path-card { margin-top: 16px; border-color: #d9cff7; background: linear-gradient(135deg, #f9f7ff, #eee9ff); }
.jsp-path-card .tag.source-ai { width: fit-content; }
.jsp-path-card .btn-primary { background: #6b51ce; }

.jsp-search-body { background: #f3f2f8; }
.jsp-brand .brand-mark, .jsp-entry-story .brand-mark { color: #fff; background: #7256dc; box-shadow: 0 10px 28px rgba(93,70,185,.25); }
.jsp-entry-story { background: linear-gradient(145deg, #161429 0%, #2b2354 62%, #6652bc 135%); }
.jsp-entry-story::after { background: #9f8cff; }
.jsp-hero { background: radial-gradient(circle at 90% 0, rgba(177,158,255,.28), transparent 34%), linear-gradient(135deg, #16152a, #2c2754 70%, #6652bc); }
.jsp-hero::after { content: "JSP"; }
.jsp-hero .eyebrow { color: #c7baff; }
.jsp-hero .btn-primary { color: #fff; background: #8067e4; }
.jsp-hero .practical-hero-score progress::-webkit-progress-value { background: #a996ff; }
.jsp-hero .practical-hero-score progress::-moz-progress-bar { background: #a996ff; }
.jsp-project-card > p { min-height: 66px; }
.jsp-source-note { margin-top: 18px; }
.jsp-source-note summary { color: #6a50c4; font-size: 11px; font-weight: 850; cursor: pointer; }
.jsp-source-note p { margin: 9px 0 0; color: #6d7580; font-size: 11px; line-height: 1.7; }

.jsp-flow-strip { padding: 14px 18px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid #dcd5f3; border-radius: 16px; color: #594c86; background: #f8f6ff; font-size: 11px; font-weight: 850; }
.jsp-flow-strip span { display: flex; align-items: center; gap: 7px; }
.jsp-flow-strip b { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #7256d8; font-size: 9px; }
.jsp-flow-strip i { color: #aaa0ce; font-style: normal; }

.jsp-search-simulator { overflow: hidden; scroll-margin-top: 92px; border: 1px solid #dcdfe6; border-radius: 21px; background: #fff; box-shadow: 0 10px 36px rgba(31,52,63,.05); }
.jsp-browser-bar { min-height: 48px; padding: 0 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 15px; border-bottom: 1px solid #e4e5eb; color: #858a96; background: #f5f5f8; font-size: 9px; font-weight: 750; }
.jsp-browser-bar > div { display: flex; gap: 6px; }
.jsp-browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff6c6c; }
.jsp-browser-bar i:nth-child(2) { background: #f5c45d; }
.jsp-browser-bar i:nth-child(3) { background: #63ce88; }
.jsp-browser-bar > span { min-width: 0; padding: 7px 13px; overflow: hidden; border: 1px solid #e1e2e7; border-radius: 8px; background: #fff; text-overflow: ellipsis; white-space: nowrap; }
.jsp-browser-bar > strong { color: #6752b6; }
.jsp-simulator-body { padding: clamp(22px, 4vw, 36px); }
.jsp-simulator-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.jsp-simulator-heading h2 { margin: 3px 0 0; font-size: clamp(23px, 3vw, 34px); letter-spacing: -.045em; }
.jsp-simulator-heading p:not(.eyebrow) { margin: 8px 0 0; color: #717986; font-size: 12px; line-height: 1.65; }
.jsp-flow-badge { flex: 0 0 auto; padding: 8px 11px; border: 1px solid #e2d5a9; border-radius: 999px; color: #805d12; background: #fff6d9; font-size: 9px; font-weight: 900; }
.jsp-demo-search-form { margin-top: 24px; padding: 17px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; border: 1px solid #ded9ef; border-radius: 15px; background: #faf9fd; }
.jsp-search-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jsp-search-fields label:only-child { grid-column: 1 / -1; }
.jsp-search-fields label { display: grid; gap: 6px; }
.jsp-search-fields label > span { color: #5d6070; font-size: 10px; font-weight: 850; }
.jsp-search-fields input { width: 100%; min-height: 44px; padding: 0 13px; border: 1px solid #d6d5de; border-radius: 10px; color: #222635; background: #fff; font: inherit; font-size: 13px; }
.jsp-search-fields input:focus { outline: 2px solid rgba(114,86,220,.23); border-color: #836be0; }
.jsp-demo-actions { display: flex; gap: 7px; }
.jsp-demo-actions .btn-primary { color: #fff; background: #7053d4; box-shadow: none; }
.jsp-simulator-output { min-height: 178px; margin-top: 14px; }
.jsp-simulator-empty { min-height: 178px; display: grid; place-content: center; justify-items: center; border: 1px dashed #d5d2df; border-radius: 15px; color: #8b8d99; background: #fbfbfd; text-align: center; }
.jsp-simulator-empty > span { width: 45px; height: 45px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 14px; color: #6c58be; background: #efebff; font-size: 24px; }
.jsp-simulator-empty strong { color: #4f5260; font-size: 13px; }
.jsp-simulator-empty p { margin: 6px 0 0; font-size: 10px; }
.jsp-search-count { margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #7b7f8c; font-size: 10px; }
.jsp-search-count strong { color: #55439c; font-size: 12px; }
.jsp-simulator-result .practical-result-table table { min-width: 680px; }
.jsp-simulator-result .practical-result-table td[colspan] { padding: 28px; color: #858994; text-align: center; }
.jsp-editor-panel .sql-editor { min-height: 560px; }
.jsp-code-editor { color: #efeaff; caret-color: #ad9aff; }
.jsp-editor-panel .practical-editor-actions .btn-primary { color: #fff; background: #8067e4; }
.jsp-editor-panel .practical-hint summary, .jsp-editor-panel .practical-solution .text-button { color: #baaaff; }

html[data-theme="dark"] .entry-jsp-link { color: #c3b4ff; border-color: #4d3b7e; background: #241d3b; }
html[data-theme="dark"] .entry-jsp-link small { color: #a89cc8; }
html[data-theme="dark"] .nav-button.nav-jsp { color: #c2b2ff; }
html[data-theme="dark"] .jsp-path-card { border-color: #45376f; background: linear-gradient(135deg, #191625, #29213f); }
html[data-theme="dark"] .jsp-path-card p:not(.eyebrow) { color: #aaa3bc; }
html[data-theme="dark"] .jsp-search-body { background: #0d0c14; }
html[data-theme="dark"] .jsp-source-note p { color: #a19baa; }
html[data-theme="dark"] .jsp-source-note summary { color: #baaaff; }
html[data-theme="dark"] .jsp-flow-strip { color: #c2b7e4; border-color: #39304f; background: #1b1727; }
html[data-theme="dark"] .jsp-search-simulator { color: #eceaf2; border-color: #2f2c3a; background: #17151d; box-shadow: 0 10px 36px rgba(0,0,0,.26); }
html[data-theme="dark"] .jsp-browser-bar { color: #9a96a5; border-color: #302d38; background: #1d1b23; }
html[data-theme="dark"] .jsp-browser-bar > span { border-color: #36323f; background: #24212b; }
html[data-theme="dark"] .jsp-browser-bar > strong { color: #bbaaFA; }
html[data-theme="dark"] .jsp-simulator-heading p:not(.eyebrow) { color: #aaa5b3; }
html[data-theme="dark"] .jsp-flow-badge { color: #efd78a; border-color: #5c4b20; background: #302810; }
html[data-theme="dark"] .jsp-demo-search-form { border-color: #373142; background: #1c1923; }
html[data-theme="dark"] .jsp-search-fields label > span { color: #b6b1bd; }
html[data-theme="dark"] .jsp-search-fields input { color: #f0edf5; border-color: #403a49; background: #25212c; color-scheme: dark; }
html[data-theme="dark"] .jsp-simulator-empty { color: #96919e; border-color: #3a3542; background: #1b1820; }
html[data-theme="dark"] .jsp-simulator-empty > span { color: #c2b2ff; background: #2b2344; }
html[data-theme="dark"] .jsp-simulator-empty strong { color: #ddd9e4; }
html[data-theme="dark"] .jsp-search-count { color: #9d98a6; }
html[data-theme="dark"] .jsp-search-count strong { color: #bbaaff; }

@media (max-width: 760px) {
  .practical-top-actions .hide-mobile { display: none; }
  .jsp-project-card > p { min-height: 0; }
  .jsp-flow-strip { padding: 13px 10px; gap: 6px; overflow-x: auto; justify-content: flex-start; }
  .jsp-flow-strip span { flex: 0 0 auto; }
  .jsp-simulator-body { padding: 21px 15px; }
  .jsp-simulator-heading { display: grid; }
  .jsp-flow-badge { width: fit-content; }
  .jsp-demo-search-form { grid-template-columns: 1fr; }
  .jsp-search-fields { grid-template-columns: 1fr; }
  .jsp-demo-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .jsp-demo-actions .btn { width: 100%; }
  .jsp-browser-bar { grid-template-columns: auto minmax(0, 1fr); }
  .jsp-browser-bar > strong { display: none; }
  .jsp-search-count { align-items: flex-start; flex-direction: column; }
  .jsp-editor-panel .sql-editor { min-height: 500px; }
}