@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;600;700&family=Pretendard:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --ink:#191713;
  --muted:#746f65;
  --paper:#f5f1e8;
  --card:#fffdf8;
  --line:#d9d1c2;
  --gold:#9c6d2d;
  --deep:#272218;
  --reader-font-size:24px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #d8a751; outline-offset:3px; }
[hidden] { display:none !important; }

.app-shell { min-height:100vh; display:grid; grid-template-columns:250px minmax(0,1fr); }
.sidebar { min-height:100vh; padding:32px 24px; position:sticky; top:0; align-self:start; display:flex; flex-direction:column; color:#f8f2e8; background:var(--deep); }
.brand { display:flex; gap:12px; align-items:center; color:inherit; text-decoration:none; }
.brand-mark { width:44px; height:44px; display:grid; place-items:center; flex:0 0 auto; border:1px solid currentColor; border-radius:50%; color:#dfbd82; font:600 23px "Noto Serif KR",serif; }
.brand strong,.brand small { display:block; }
.brand strong { font-family:"Noto Serif KR",serif; letter-spacing:.02em; }
.brand small { margin-top:3px; color:#aaa193; font-size:11px; }
.side-nav { margin-top:72px; display:grid; gap:10px; }
.side-nav button { width:100%; padding:16px 14px; display:flex; gap:13px; align-items:center; color:#c8c0b4; border:1px solid transparent; border-radius:12px; background:transparent; text-align:left; font-weight:600; cursor:pointer; }
.side-nav button span { color:#82796c; font-size:11px; letter-spacing:.08em; }
.side-nav button:hover { color:white; background:rgba(255,255,255,.06); }
.side-nav button.active { color:#241e15; border-color:#dfbd82; background:#dfbd82; }
.side-nav button.active span { color:#74511f; }
.sidebar-links { margin-top:auto; padding-top:40px; display:grid; gap:13px; }
.sidebar-links a { color:#aaa193; font-size:12px; text-decoration:none; }
.sidebar-links a:hover { color:white; }

.page-shell { min-width:0; }
main { max-width:1200px; margin:auto; padding:28px 28px 70px; }
.eyebrow { margin:0 0 18px; color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.2em; }
.hero { min-height:570px; padding:105px 7% 75px; position:relative; overflow:hidden; color:#f8f2e8; border-radius:32px; background:linear-gradient(120deg,rgba(20,18,13,.98),rgba(49,42,29,.88)),radial-gradient(circle at 80% 20%,#7c6037,transparent 50%); }
.hero::after { content:"“"; position:absolute; right:7%; top:-95px; color:rgba(255,255,255,.045); font:500 420px/1 "Noto Serif KR",serif; pointer-events:none; }
.hero .eyebrow { color:#d3ab6d; }
.hero h1 { margin:0; max-width:720px; font:700 clamp(40px,6vw,72px)/1.22 "Noto Serif KR",serif; letter-spacing:-.055em; }
.hero h1 em { color:#dfbd82; font-style:normal; }
.hero-copy { max-width:580px; margin:24px 0 36px; color:#cfc8bc; font-size:17px; line-height:1.75; }
.search-panel { max-width:820px; padding:8px; display:flex; gap:8px; position:relative; z-index:1; background:white; border-radius:16px; box-shadow:0 18px 55px rgba(0,0,0,.28); }
.search-panel label { min-width:0; flex:1; padding:0 14px; display:flex; gap:12px; align-items:center; color:#6c655a; }
.search-panel input { width:100%; min-width:0; color:var(--ink); border:0; outline:0; background:transparent; font-size:16px; }
.search-panel kbd { padding:3px 7px; color:#91897d; border:1px solid #ddd5c8; border-radius:5px; background:#f6f2eb; }
.search-panel button { padding:15px 25px; color:white; border:0; border-radius:11px; background:var(--gold); font-weight:700; cursor:pointer; }
.suggestions { margin-top:18px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; position:relative; z-index:1; }
.suggestions > span { margin-right:5px; color:#9f978a; font-size:12px; }
.suggestions button { padding:8px 12px; color:#d9d0c2; border:1px solid rgba(255,255,255,.17); border-radius:999px; background:transparent; cursor:pointer; }
.suggestions button:hover { color:white; border-color:#d3ab6d; }
.stats { margin:0 4%; padding:28px 4%; display:grid; grid-template-columns:repeat(3,auto) 1fr; gap:38px; align-items:center; border:1px solid var(--line); border-top:0; border-radius:0 0 22px 22px; background:rgba(255,253,248,.6); }
.stats div { display:flex; gap:5px; align-items:baseline; }
.stats strong { font:700 30px "Noto Serif KR",serif; }
.stats span,.stats p { color:var(--muted); font-size:13px; }
.stats p { justify-self:end; }

.explorer { padding:100px 4% 70px; }
.explorer-head { display:flex; gap:24px; align-items:end; justify-content:space-between; }
.explorer h2,.rag-card h2 { margin:0; font:700 clamp(30px,4vw,48px)/1.3 "Noto Serif KR",serif; letter-spacing:-.04em; }
.filters { display:flex; gap:12px; }
.filters label { display:grid; gap:7px; }
.filters span { color:var(--muted); font-size:12px; }
.filters select { min-width:150px; padding:11px 34px 11px 12px; color:var(--ink); border:1px solid var(--line); border-radius:10px; background:var(--card); }
.result-summary { min-height:68px; margin-top:30px; padding:16px 0; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); }
.result-summary p { color:var(--muted); }
.result-summary button { color:var(--gold); border:0; background:none; cursor:pointer; }
.results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.verse-card,.empty { padding:28px; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.verse-card { min-height:270px; display:flex; flex-direction:column; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.verse-card:hover { border-color:#bca67f; box-shadow:0 12px 35px rgba(70,54,30,.08); transform:translateY(-2px); }
.verse-meta { display:flex; gap:7px; }
.verse-meta span { padding:4px 8px; color:#7d6849; border-radius:999px; background:#eee5d6; font-size:11px; font-weight:700; }
.verse-open { width:100%; padding:0; display:block; flex:1; color:inherit; border:0; background:none; text-align:left; cursor:pointer; }
.verse-open h3 { margin:20px 0 12px; font:700 20px "Noto Serif KR",serif; }
.verse-open p { margin:0; font:400 16px/1.9 "Noto Serif KR",serif; word-break:keep-all; }
.verse-open mark { color:inherit; background:#f2d89f; }
.read-more { margin-top:20px; display:block; color:var(--gold); font-size:13px; font-weight:700; }
.copy-link { align-self:start; margin-top:14px; padding:10px 0 0; color:var(--muted); border:0; border-top:1px solid #eee7db; background:none; font-size:12px; cursor:pointer; }
.empty { grid-column:1/-1; padding:55px; color:var(--muted); text-align:center; }
.empty strong { display:block; color:var(--ink); font:700 22px "Noto Serif KR",serif; }
.rag-card { margin:30px 4% 70px; padding:55px; display:grid; grid-template-columns:1fr 1fr; gap:80px; color:#eee8dd; border-radius:24px; background:var(--deep); }
.rag-card p { color:#bbb2a4; line-height:1.75; }
.rag-card a { margin:12px 14px 0 0; padding:13px 18px; display:inline-flex; color:var(--deep); border-radius:9px; background:#dfbd82; text-decoration:none; font-weight:700; }
.rag-card a span { margin-left:25px; }
.rag-card .guide-link { color:#ddd2c0; border:1px solid #5d5548; background:transparent; }

.reader-view,.faq-view { max-width:980px; min-height:80vh; margin:auto; padding:60px 4% 40px; }
.view-header { padding-bottom:42px; border-bottom:1px solid var(--line); }
.view-header h1 { margin:0; font:700 clamp(42px,6vw,70px)/1.2 "Noto Serif KR",serif; letter-spacing:-.055em; }
.view-header > p:last-child { margin:20px 0 0; color:var(--muted); font-size:17px; line-height:1.7; }
.reader-controls { margin:36px 0 22px; padding:22px; display:flex; gap:24px; align-items:end; justify-content:space-between; border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:0 12px 35px rgba(70,54,30,.06); }
.reader-selectors { display:flex; gap:12px; }
.reader-selectors label,.font-controls { display:grid; gap:9px; }
.reader-selectors span,.font-controls > span { color:var(--muted); font-size:13px; font-weight:600; }
.reader-selectors select { min-width:170px; min-height:52px; padding:0 38px 0 14px; color:var(--ink); border:1px solid var(--line); border-radius:11px; background:white; font-size:17px; }
.font-controls > div { display:flex; border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.font-controls button { min-width:58px; min-height:50px; padding:0 12px; color:var(--ink); border:0; border-right:1px solid var(--line); background:white; font-size:17px; font-weight:700; cursor:pointer; }
.font-controls button:last-child { border-right:0; }
.font-controls button:hover:not(:disabled) { background:#f3eadb; }
.font-controls button:disabled,.chapter-nav button:disabled { opacity:.38; cursor:not-allowed; }
#fontReset { min-width:72px; color:var(--gold); }
.tts-player { margin:0 0 24px; padding:26px; color:#f5efe4; border-radius:18px; background:linear-gradient(135deg,#272218,#393023); box-shadow:0 16px 40px rgba(35,29,20,.16); }
.tts-heading { display:flex; gap:24px; align-items:end; justify-content:space-between; }
.tts-heading .eyebrow { margin-bottom:8px; color:#d3ab6d; }
.tts-heading h2 { margin:0; font:700 28px "Noto Serif KR",serif; }
.tts-heading > p { max-width:420px; margin:0; color:#c8bfb1; font-size:14px; line-height:1.6; text-align:right; }
.tts-settings { margin-top:22px; display:grid; grid-template-columns:minmax(220px,1.5fr) 1fr 1fr; gap:12px; }
.tts-settings label { display:grid; gap:8px; }
.tts-settings span { color:#b9afa0; font-size:12px; font-weight:600; }
.tts-settings select { width:100%; min-width:0; min-height:50px; padding:0 36px 0 13px; color:#211d17; border:1px solid #5a5144; border-radius:10px; background:#fffdf8; }
.tts-actions { margin-top:16px; display:flex; gap:10px; align-items:center; }
.tts-actions > button { min-height:52px; padding:0 20px; color:#eee7db; border:1px solid #625849; border-radius:10px; background:transparent; font-weight:700; cursor:pointer; }
.tts-actions > button:hover:not(:disabled) { border-color:#dfbd82; }
.tts-actions > button:disabled { opacity:.4; cursor:not-allowed; }
.tts-actions .tts-primary { min-width:145px; color:#272218; border-color:#dfbd82; background:#dfbd82; }
.auto-next { margin-left:auto; display:flex; gap:9px; align-items:center; color:#d2c8b9; font-size:14px; cursor:pointer; }
.auto-next input { width:20px; height:20px; accent-color:#d6a95f; }
.tts-note { margin:16px 0 0; color:#9f9689; font-size:12px; line-height:1.6; }
.chapter-nav { min-height:68px; padding:0 6px; display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; border-bottom:1px solid var(--line); }
.chapter-nav strong { font:700 21px "Noto Serif KR",serif; }
.chapter-nav button { padding:12px; color:var(--gold); border:0; background:none; font-weight:700; cursor:pointer; }
.chapter-nav button:first-child { justify-self:start; }
.chapter-nav button:last-child { justify-self:end; }
.chapter-reading { margin-top:28px; padding:clamp(28px,6vw,68px); border:1px solid var(--line); border-radius:22px; background:var(--card); box-shadow:0 18px 50px rgba(70,54,30,.06); }
.chapter-reading h2 { margin:0 0 38px; padding-bottom:24px; border-bottom:2px solid var(--ink); font:700 clamp(34px,5vw,52px)/1.25 "Noto Serif KR",serif; }
.chapter-reading h2 span { color:var(--gold); font-size:.55em; }
.reader-verse { margin:0; padding:12px 10px; border-radius:10px; font:400 var(--reader-font-size)/2 "Noto Serif KR",serif; letter-spacing:-.015em; word-break:keep-all; transition:font-size .15s ease,background .2s ease; }
.reader-verse.selected { background:#f5dfac; box-shadow:inset 4px 0 #a06e29; }
.reader-verse.speaking { background:#ead4a3; box-shadow:inset 5px 0 #8b5e21,0 4px 16px rgba(124,87,34,.12); }
.verse-number { min-width:1.8em; display:inline-block; color:var(--gold); font-family:Pretendard,sans-serif; font-size:.62em; font-weight:700; vertical-align:.25em; }

.faq-list { margin:38px 0; display:grid; gap:12px; }
.faq-list details { padding:0 24px; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.faq-list summary { padding:22px 34px 22px 0; position:relative; list-style:none; font:600 18px "Noto Serif KR",serif; cursor:pointer; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"＋"; position:absolute; right:0; color:var(--gold); }
.faq-list details[open] summary::after { content:"−"; }
.faq-list details p { margin:0 0 24px; color:var(--muted); font-size:16px; line-height:1.8; }
.notice { padding:24px 28px; display:grid; grid-template-columns:120px 1fr; gap:20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.notice strong { font-family:"Noto Serif KR",serif; }
.notice p { margin:0; color:var(--muted); line-height:1.7; }
footer { max-width:1200px; margin:auto; padding:26px 28px 45px; display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }

@media (max-width:900px) {
  .app-shell { display:block; }
  .sidebar { min-height:0; padding:12px 16px; position:sticky; z-index:10; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; box-shadow:0 8px 24px rgba(25,23,19,.18); }
  .sidebar .brand span:last-child,.sidebar-links { display:none; }
  .brand-mark { width:39px; height:39px; font-size:20px; }
  .side-nav { min-width:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
  .side-nav button { min-width:0; padding:11px 8px; justify-content:center; font-size:13px; white-space:nowrap; }
  .side-nav button span { display:none; }
  main { padding:18px 16px 50px; }
  .hero { min-height:auto; padding:72px 6% 60px; }
}

@media (max-width:700px) {
  main { padding:14px 12px 40px; }
  .hero { padding:64px 22px 52px; border-radius:22px; }
  .hero h1 { font-size:38px; }
  .hero-copy { font-size:15px; }
  .search-panel { display:grid; }
  .search-panel label { min-height:54px; }
  .search-panel button { width:100%; min-height:52px; }
  .suggestions > span { width:100%; }
  .stats { margin:0 10px; padding:22px 12px; grid-template-columns:repeat(3,1fr); gap:7px; text-align:center; }
  .stats div { display:block; }
  .stats strong,.stats span { display:block; }
  .stats strong { font-size:22px; }
  .stats p { display:none; }
  .explorer { padding:70px 5px 42px; }
  .explorer-head { display:block; }
  .filters { margin-top:24px; display:grid; grid-template-columns:1fr 1fr; }
  .filters select { width:100%; min-width:0; }
  .results { grid-template-columns:1fr; }
  .verse-card { min-height:0; padding:23px; }
  .rag-card { margin:20px 0 55px; padding:35px 25px; grid-template-columns:1fr; gap:15px; }
  .reader-view,.faq-view { padding:42px 2px 30px; }
  .view-header { padding:0 8px 32px; }
  .view-header h1 { font-size:43px; }
  .reader-controls { padding:16px; display:grid; gap:18px; }
  .reader-selectors { display:grid; grid-template-columns:1fr 1fr; }
  .reader-selectors select { width:100%; min-width:0; }
  .font-controls > div { width:100%; }
  .font-controls button { flex:1; min-height:56px; font-size:18px; }
  .tts-player { padding:22px 16px; }
  .tts-heading { display:block; }
  .tts-heading > p { margin-top:10px; text-align:left; }
  .tts-settings { grid-template-columns:1fr 1fr; }
  .tts-settings label:first-child { grid-column:1/-1; }
  .tts-settings select { min-height:54px; font-size:16px; }
  .tts-actions { display:grid; grid-template-columns:1fr 1fr; }
  .tts-actions > button { min-height:56px; }
  .tts-actions .tts-primary { min-width:0; }
  .auto-next { grid-column:1/-1; margin:8px 0 0; min-height:42px; }
  .chapter-nav { grid-template-columns:1fr 1fr; padding:8px 0; }
  .chapter-nav strong { grid-column:1/-1; grid-row:1; text-align:center; }
  .chapter-nav button { grid-row:2; }
  .chapter-reading { margin-top:18px; padding:30px 18px; border-radius:16px; }
  .chapter-reading h2 { margin-bottom:24px; font-size:36px; }
  .reader-verse { padding:11px 5px; line-height:1.95; }
  .faq-list details { padding:0 18px; }
  .notice { padding:22px 8px; display:block; }
  .notice p { margin-top:10px; }
  footer { padding:20px 16px 36px; display:block; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; }
}