@charset "UTF-8";
:root { color-scheme:light; --paper:#edf2f8; --surface:#fff; --surface-soft:#f3f6fb; --ink:#202d43; --muted:#56667e; --line:#ccd6e5; --accent:#3555c7; --accent-soft:#e9efff; --on-accent:#fff; --orange:#9b5a25; --danger:#b3343e; --shadow:0 8px 28px #243b6010; --reading-scale:1; font-family:"Pretendard", "Noto Sans KR", system-ui, sans-serif; font-size:15px; line-height:1.65; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); }
body[data-font="large"] { --reading-scale:1.3; }
body[data-font="largest"] { --reading-scale:2; }
body[data-theme="dark"] { color-scheme:dark; --paper:#121c2d; --surface:#24344b; --surface-soft:#1b293c; --ink:#f0f5ff; --muted:#bccce2; --line:#4a6280; --accent:#adc2ff; --accent-soft:#2e4466; --on-accent:#172442; --orange:#f1bf86; --danger:#ffb4bc; --shadow:0 8px 28px #0003; }
/* Catppuccin Mocha and Rosé Pine Dawn palettes, adapted for reading and controls. */
body[data-theme="catppuccin-mocha"] { color-scheme:dark; --paper:#181825; --surface:#1e1e2e; --surface-soft:#313244; --ink:#cdd6f4; --muted:#bac2de; --line:#585b70; --accent:#cba6f7; --accent-soft:#313244; --on-accent:#1e1e2e; --orange:#fab387; --danger:#f38ba8; --shadow:0 8px 28px #0003; }
body[data-theme="rose-pine-dawn"] { color-scheme:light; --paper:#f2e9e1; --surface:#faf4ed; --surface-soft:#fffaf3; --ink:#575279; --muted:#686282; --line:#b5aabd; --accent:#286983; --accent-soft:#f2e9e1; --on-accent:#fffaf3; --orange:#a14a65; --danger:#a13d5a; --shadow:0 8px 28px #57527912; }
button, input, textarea, select { font:inherit; }
button, select, summary, input[type="checkbox"], input[type="radio"] { cursor:pointer; }
button { color:inherit; }
a { color:inherit; }
button, select { min-height:44px; }
button:disabled, input:disabled { cursor:not-allowed; opacity:.65; }
dialog[data-busy="true"] :disabled, [aria-busy="true"] button:disabled, [aria-busy="true"] input:disabled, button[data-busy="true"]:disabled { cursor:progress; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--orange); outline-offset:4px; }
[hidden] { display:none !important; }
.skip-link { position:fixed; top:12px; left:16px; padding:12px; z-index:10; background:var(--surface); clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap; }
.skip-link:focus { clip-path:none; width:auto; height:auto; white-space:normal; }
.site-header { max-width:1232px; margin:auto; min-height:94px; display:flex; align-items:center; padding:20px 40px; gap:24px; border-bottom:1px solid var(--line); }
.brand { font-size:23px; font-weight:750; letter-spacing:-1px; display:flex; align-items:center; gap:9px; text-decoration:none; }
.brand-symbol { display:inline-flex; width:36px; height:36px; justify-content:center; align-items:center; color:var(--on-accent); background:var(--accent); border-radius:12px 12px 12px 3px; font-family:Georgia,serif; font-style:italic; font-size:28px; }
.brand-dot { font-size:6px; color:var(--orange); align-self:flex-start; margin-top:9px; margin-left:-5px; }
.header-caption { font-size:12px; color:var(--muted); margin-left:12px; }
.site-header > button { margin-left:auto; }
.quiet-button { padding:9px 13px; border:1px solid transparent; background:transparent; font-size:13px; font-weight:650; border-radius:10px; }
.quiet-button:hover { background:var(--accent-soft); }
.quiet-button span { margin-left:8px; font-family:Georgia,serif; font-size:17px; }
.workspace { max-width:1232px; margin:auto; display:grid; grid-template-columns:244px minmax(0,1fr); }
.library { padding:44px 30px 32px 40px; border-right:1px solid var(--line); min-width:0; }
.eyebrow { font-size:10px; font-weight:750; letter-spacing:1.8px; color:var(--accent); margin:0 0 11px; }
.library h2 { font-size:18px; letter-spacing:-.6px; margin:0; }
.muted, .document-meta { color:var(--muted); font-size:13px; }
.library-intro { margin-top:12px; line-height:1.9; }
.section-label { text-transform:uppercase; letter-spacing:.3px; font-size:11px; font-weight:700; margin:0; }
.library > .section-label { margin:38px 0 14px; color:var(--muted); }
.document-link { display:block; width:100%; text-align:left; border:1px solid var(--line); background:var(--accent-soft); border-radius:12px; padding:16px 13px; overflow-wrap:anywhere; }
.document-link strong { font-size:12px; display:block; margin-bottom:8px; }
.document-link span { color:var(--muted); font-size:11px; }
.library-footer { margin-top:180px; border-top:1px solid var(--line); padding-top:20px; color:var(--muted); font-size:11px; }
.library-footer p { margin:8px 0; }
.tiny-leaf { font-size:22px; color:var(--accent); }
main { padding:44px 54px 32px; min-width:0; }
.reader-heading { display:flex; gap:20px; justify-content:space-between; align-items:center; }
h1 { font-size:28px; line-height:1.4; letter-spacing:-1px; margin:0; font-weight:700; }
.level-badge { white-space:nowrap; color:var(--accent); background:var(--accent-soft); padding:5px 10px; border:1px solid var(--line); border-radius:20px; font-size:11px; }
.document-meta { margin:12px 0 28px; }
.reading-line { display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--muted); margin-bottom:8px; }
.completion-track { height:6px; background:var(--line); border-radius:4px; margin-bottom:24px; overflow:hidden; }
.completion-track span { display:block; width:0; height:100%; background:var(--accent); }
.completion-track[aria-valuenow="1"] span { width:100%; }
.sentence-card { background:var(--surface); padding:28px 32px 22px; border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:18px; box-shadow:var(--shadow); }
.card-top { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.card-top h2 { color:var(--muted); }
.card-top h2 span { color:var(--orange); padding-left:6px; }
.bookmark { background:transparent; border:0; border-radius:6px; font-size:11px; padding:0 6px; }
.bookmark span { font-size:20px; vertical-align:middle; margin-left:6px; color:var(--orange); }
.bookmark[aria-pressed="true"] { color:var(--accent); font-weight:700; }
.source-text { font-family:Georgia,"Noto Serif",serif; font-size:calc(28px * var(--reading-scale)); line-height:1.7; margin:24px 0 13px; overflow-wrap:anywhere; }
.reading-hint { color:var(--muted); font-size:11px; margin:0 0 28px; }
fieldset { border:0; margin:0; padding:0; min-width:0; }
legend { padding:0; font-size:12px; font-weight:650; margin-bottom:12px; }
.status-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.status-choice { position:relative; min-width:0; }
.status-choice input { position:absolute; opacity:0; width:1px; height:1px; }
.status-choice span { min-height:44px; display:flex; align-items:center; justify-content:center; gap:5px; border:1px solid var(--line); background:var(--surface-soft); border-radius:9px; font-size:12px; padding:10px 4px; text-align:center; cursor:pointer; }
.status-choice b { display:none; }
.status-choice:has(input:checked) span { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:700; }
.status-choice:has(input:checked) b { display:inline; }
.status-choice:has(input:focus-visible) span { outline:3px solid var(--orange); outline-offset:3px; }
.status-choice:has(input:disabled) span { opacity:.65; cursor:not-allowed; }
#progress-form[aria-busy="true"] .status-choice span { cursor:progress; }
.help-choice { display:flex; width:fit-content; align-items:center; gap:9px; font-size:12px; min-height:44px; margin-top:8px; cursor:pointer; }
.help-choice input { width:17px; height:17px; accent-color:var(--accent); margin:0; }
.note-editor { border-top:1px solid var(--line); margin-top:12px; }
.note-editor summary { min-height:44px; display:flex; align-items:center; font-size:12px; color:var(--muted); }
.note-editor summary::after { content:"＋"; margin-left:auto; }
.note-editor[open] summary::after { content:"−"; }
.note-editor label { display:block; font-size:12px; margin:5px 0 8px; }
.note-editor textarea { width:100%; resize:vertical; min-height:90px; padding:12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--paper); font-size:calc(13px * var(--reading-scale)); }
.note-actions { display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:12px; }
.primary-button { background:var(--accent); border:1px solid var(--accent); color:var(--on-accent); padding:10px 17px; font-weight:650; font-size:13px; border-radius:10px; }
.primary-button:hover { filter:brightness(1.1); }
.save-notice { min-height:22px; margin:7px 4px 26px; font-size:11px; color:var(--muted); }
.save-notice[data-kind="error"] { color:var(--danger); }
.analysis-heading { display:flex; justify-content:space-between; align-items:end; gap:16px; }
.analysis-heading .eyebrow { font-size:9px; margin-bottom:6px; }
.analysis-heading h2 { font-size:19px; letter-spacing:-.6px; margin:0; }
.analysis-intro { margin:10px 0 19px; font-size:11px; }
.analysis-section { background:var(--surface); border:1px solid var(--line); border-radius:12px; margin-top:10px; }
.analysis-section > summary { display:flex; align-items:center; gap:14px; min-height:64px; padding:14px 20px; list-style:none; font-size:14px; font-weight:650; border-radius:12px; }
.analysis-section > summary:hover { background:var(--surface-soft); }
summary::-webkit-details-marker { display:none; }
.section-number { font-size:12px; color:var(--accent); background:var(--accent-soft); border-radius:8px; padding:4px 8px; font-family:Georgia,serif; }
.summary-hint { margin-left:auto; color:var(--muted); font-weight:400; font-size:11px; }
.analysis-section > summary::after { content:"＋"; margin-left:9px; color:var(--muted); }
.analysis-section[open] > summary::after { content:"−"; }
.analysis-body { padding:0 20px 24px; font-size:calc(14px * var(--reading-scale)); line-height:1.85; overflow-wrap:anywhere; }
.analysis-body h3 { font-size:1em; margin:20px 0 8px; }
.analysis-body p { margin:8px 0; }
.chunk { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; padding:12px 0; border-bottom:1px dashed var(--line); }
.chunk .english { white-space:pre-wrap; }
.english { font-family:Georgia,serif; font-size:1.12em; }
.translation { background:var(--accent-soft); border-radius:8px; padding:13px 16px; margin-top:15px; }
.translation p:first-child { font-weight:650; font-size:.9em; }
.clause-card { margin-top:16px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 17px; }
.clause-card h3 { margin:0 0 14px; }
.role-row { display:grid; grid-template-columns:70px minmax(0,1fr); gap:10px; margin:14px 0; align-items:start; }
.role-label { border-radius:4px; padding:2px 5px; background:var(--accent-soft); color:var(--accent); font-size:11px; text-align:center; }
.role-verb { color:var(--orange); background:var(--paper); border:1px solid var(--line); }
.role-detail p { margin:3px 0; }
.role-detail .muted { font-size:.9em; }
.evidence { border-left:2px solid var(--accent); padding:4px 12px; background:var(--surface-soft); margin:10px 0; }
.example-box { margin:12px 0 25px; padding:12px 16px; border:1px solid var(--line); border-radius:8px; }
.vocab-item { padding:14px 0; border-bottom:1px dashed var(--line); }
.vocab-item:first-child { padding-top:0; }
.word-heading { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.word-heading strong { font-family:Georgia,serif; font-size:1.3em; }
.word-heading span { font-size:.85em; color:var(--muted); }
.vocab-definitions { display:grid; grid-template-columns:84px minmax(0,1fr); gap:10px 14px; margin:16px 0; }
.vocab-definitions dt { color:var(--muted); font-size:.85em; font-weight:650; padding-top:2px; }
.vocab-definitions dd { margin:0; white-space:pre-wrap; }
.vocab-context-meaning { color:var(--accent); font-weight:650; }
.vocab-forms { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:8px; padding:12px; margin:16px 0; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); }
.vocab-forms > div { min-width:0; padding:4px; }
.vocab-forms dt { font-size:.8em; color:var(--muted); margin-bottom:5px; }
.vocab-forms dd { margin:0; overflow-wrap:anywhere; }
.vocab-usage { padding:12px 16px; border-left:3px solid var(--accent); border-radius:0 8px 8px 0; background:var(--accent-soft); }
.vocab-usage > strong { color:var(--accent); font-size:.85em; }
.vocab-usage p { margin-bottom:0; white-space:pre-wrap; }
.vocab-supplement { font-size:.85em; }
@media(max-width:600px) { .vocab-definitions { grid-template-columns:1fr; gap:4px; } .vocab-definitions dd { margin-bottom:8px; } .vocab-forms { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.cautions { font-size:.9em; color:var(--muted); border-top:1px solid var(--line); margin-top:18px; padding-top:12px; }
.cautions li { margin:7px 0; }
.reader-footer { margin-top:34px; padding-top:20px; color:var(--muted); border-top:1px solid var(--line); font-size:10px; display:flex; justify-content:space-between; gap:15px; }
.loading, .load-error { padding:50px 0; }
.load-error h1 { font-size:23px; }
dialog { color:var(--ink); background:var(--surface-soft); border:1px solid var(--line); border-radius:20px; padding:28px; width:min(420px,calc(100% - 32px)); box-shadow:0 24px 80px #14243c40; }
dialog::backdrop { background:#15243d70; backdrop-filter:blur(3px); }
.settings-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:22px; }
.settings-heading h2 { font-size:19px; margin:0; }
dialog label { display:block; margin-top:20px; margin-bottom:9px; font-size:13px; }
dialog select { width:100%; border-radius:8px; padding:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); }
dialog > p { margin-top:22px; }
@media (max-width:1000px) { main { padding:36px 28px; } .workspace { grid-template-columns:210px minmax(0,1fr); } .library { padding-left:28px; padding-right:22px; } .status-options { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) { .site-header { padding:16px 20px; min-height:76px; gap:10px; } .brand { font-size:21px; } .header-caption { display:none; } .workspace { display:block; } .library { padding:23px 20px; border-right:0; border-bottom:1px solid var(--line); } .library h2 { font-size:16px; } .library .eyebrow, .library-intro, .library > .section-label, .library-footer { display:none; } #document-list { margin-top:12px; } .document-link { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; } .document-link strong { margin:0; } .document-link span { flex-shrink:0; } main { padding:30px 20px; } h1 { font-size:24px; } .sentence-card { padding:20px 19px 14px; border-radius:13px; } .source-text { font-size:calc(26px * var(--reading-scale)); margin-top:20px; } .reader-heading { gap:10px; } .document-meta { margin-bottom:24px; } .analysis-heading { align-items:center; gap:8px; } .analysis-heading h2 { font-size:18px; } .analysis-heading .quiet-button { padding:6px; font-size:10px; } .summary-hint { display:none; } .analysis-section > summary::after { margin-left:auto; } .analysis-intro { line-height:1.9; } .role-row { grid-template-columns:56px minmax(0,1fr); } .chunk { grid-template-columns:1fr; gap:2px; } .reader-footer { flex-wrap:wrap; } .clause-card { padding:13px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; } }