/* Surface and accent are independent: all six combinations share the same contrast rules. */
:root {
  --brand:#4e2fda;
  --paper:#fffef9;
  --surface:#fff;
  --surface-soft:#f7f8ef;
  --field:#fafbf5;
  --ink:#181818;
  --muted:#505050;
  --line:#e5e9db;
  --shadow:0 6px 24px rgb(25 40 32 / 4%);
  --backdrop:rgb(20 24 23 / 28%);
  --accent:#5d9913;
  --accent-hover:#4f8410;
  --accent-ink:#497b0d;
  --accent-soft:#f1f7e6;
  --accent-border:#c9dcae;
  --on-accent:#fff;
  --hero-surface:#fff6d7;
  --light:var(--accent-soft);
}
:root[data-mode="gray"] {
  --paper:#e6e8e7;
  --surface:#eff1ef;
  --surface-soft:#dfe3e0;
  --field:#e8ebe8;
  --ink:#29332e;
  --muted:#58645d;
  --line:#ccd3cd;
  --shadow:none;
  --accent-soft:#e5ecd9;
  --accent-border:#b7c8a3;
  --hero-surface:#e8eadf;
  --backdrop:rgb(20 24 23 / 30%);
}
:root[data-mode="dark"] {
  --paper:#191c1f;
  --surface:#22272a;
  --surface-soft:#2b3234;
  --field:#1e2427;
  --ink:#dde4df;
  --muted:#a6b3ac;
  --line:#37413d;
  --shadow:none;
  --accent:#9ac950;
  --accent-hover:#afd96b;
  --accent-ink:#b0d97a;
  --accent-soft:#2c3823;
  --accent-border:#4c6338;
  --on-accent:#1d2a0f;
  --hero-surface:#292c22;
  --backdrop:rgb(0 0 0 / 46%);
}
:root[data-accent="purple"] {
  --accent:#7962ae;
  --accent-hover:#685296;
  --accent-ink:#725a9f;
  --accent-soft:#f1edf7;
  --accent-border:#d1c5e2;
}
:root[data-mode="gray"][data-accent="purple"] {
  --accent-soft:#e4deec;
  --accent-border:#c2b6d4;
}
:root[data-mode="dark"][data-accent="purple"] {
  --accent:#c3b4df;
  --accent-hover:#d3c6e8;
  --accent-ink:#c3b4df;
  --accent-soft:#393244;
  --accent-border:#665773;
  --on-accent:#30243f;
}
body{background:var(--paper);color:var(--ink)}
.header,.nav{background:var(--surface)}
.header-inner{gap:30px}.header-actions{gap:17px}.search{width:315px;margin-left:10px;flex:1;max-width:350px}
.brand{color:var(--ink)}.brand-dot,.footer .brand{color:var(--brand)}
:root[data-mode="dark"] .brand-dot,:root[data-mode="dark"] .footer .brand{color:#a58aff}
/* The N symbol is the original purple asset, in every theme. */
.brand img{filter:none;opacity:1}
.search,.search kbd{background:var(--field);border-color:var(--line)}
.search input{color:var(--ink)}.search input::placeholder{color:var(--muted);opacity:1}
.search svg{stroke:var(--muted)}.search kbd{color:var(--muted)}
.appearance-button{display:flex;gap:6px;align-items:center;font-size:12px}
.appearance-button svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.6}
.button,.button.dark{background:var(--accent);color:var(--on-accent);box-shadow:none}
.button:hover,.button.dark:hover{background:var(--accent-hover);transform:none}
.button.secondary{background:var(--surface);border-color:var(--accent-border);color:var(--accent-ink)}
.button.secondary:hover{background:var(--accent-soft)}
.button.text{background:transparent;color:var(--accent-ink)}
.button.text:hover{background:transparent;text-decoration:underline}
.new-dot{background:var(--accent)}
.studio-link,.hero h1 em,.eyebrow,.hero .eyebrow,.quick-icon,.rank-num,.metrics b,.ranking-item .up{color:var(--accent-ink)}
.hero{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow)}
.hero h1{font-size:38px;font-weight:700;line-height:1.5;letter-spacing:-1.5px}
.hero-copy>p{font-size:14px;line-height:1.95;color:var(--muted)}
.hero-actions .plain,.section-heading .plain{color:var(--muted)}
.hero-art{opacity:1}
.quickbar{background:var(--surface);border-color:var(--line);box-shadow:none}
.quickbar small,.section-heading p,.book .author,.book .metrics,.ranking-item small,.branch-feature p,.footer,.footer p,.page-head p,.result-bar,.tree-panel p,.tree-child small,.detail-top p,.detail-author,.detail-tabs button,.episode .episode-number,.episode small,.panel p,.field small,.studio-aside li,.checkline,.draft-item p,.modal-desc,.modal-close,.subtle,.mini-notice,.back,.language-item small,.settings-note,.meta-line,.reading .chapter-label{color:var(--muted)}
.badge{background:var(--accent-soft);color:var(--accent-ink)}
.chip{background:var(--surface);border-color:var(--line);color:var(--muted)}
.chip.active{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent-ink);font-weight:700}
.chip:hover{border-color:var(--accent-border);background:var(--accent-soft)}
.book-cover{background:var(--surface-soft);box-shadow:0 3px 9px rgb(20 30 25 / 7%)}
.book-cover>img,.detail-cover,.branch-feature img,.ranking-item img{filter:none}
.cover-badge{background:rgb(29 39 35 / 78%);color:#f1f5f2}
.branch-label{background:var(--surface);color:var(--accent-ink)}
.branch-feature{background:var(--accent-soft);border:1px solid var(--line)}
.invitation{background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--ink)}
.invitation h3{color:var(--ink);font-weight:600}.invitation p{color:var(--muted)}
.invitation .button{background:var(--accent);color:var(--on-accent)}
.invitation .button:hover{background:var(--accent-hover)}
.filters,.panel{background:var(--surface);border-color:var(--line)}
.tag{background:var(--surface-soft);border-color:var(--line);color:var(--muted)}
.tag.selected{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent-ink)}
.empty{background:var(--surface-soft);color:var(--muted);border-color:var(--line)}.empty h3{color:var(--ink)}
.tree-panel{background:var(--surface-soft);border-color:var(--line)}
.tree-root,.tree-child{background:var(--surface);border-color:var(--line)}
.tree-children{border-color:var(--accent-border)}.tree-child:before{background:var(--accent-border)}
.tree-child.is-current{background:var(--accent-soft);border-color:var(--accent-border)}
.detail-tabs button.active{color:var(--accent-ink)}.episode:hover{background:var(--surface-soft)}
.origin-note,.modal-box{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent-ink)}
.field input,.field textarea,.field select{background:var(--field);border-color:var(--line);color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85}
.studio-aside .panel,.guide-output{background:var(--surface-soft);color:var(--ink)}
.settings-note{background:var(--surface-soft);border-color:var(--accent-border)}
.cover-upload{background:var(--field);border-color:var(--accent-border)}
.cover-picker button.active{border-color:var(--accent)}
.reader-controls select{background:var(--surface);border-color:var(--line);color:var(--ink)}
.reading{background:var(--paper);color:var(--ink)}
dialog{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:0 22px 70px rgb(0 0 0 / 18%)}
dialog::backdrop{background:var(--backdrop);backdrop-filter:none;-webkit-backdrop-filter:none}
.language-item{background:var(--surface-soft);border:1px solid var(--line)}
.social{background:var(--field);color:var(--ink);border-color:var(--line)}
.social.kakao{background:#e6d77c;color:#332f1c;border-color:#e6d77c}.social.naver{background:#32815d;color:white;border-color:#32815d}
.toast{background:var(--ink);color:var(--paper);box-shadow:var(--shadow)}
.skip{background:var(--surface);color:var(--ink)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:var(--accent)}
.appearance-group{padding:0;border:0;margin:26px 0}.appearance-group legend{font-size:13px;font-weight:700;margin-bottom:13px}
.appearance-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.mode-choice{position:relative;cursor:pointer;display:block}
.mode-choice input,.accent-choice input{position:absolute;opacity:0;width:1px;height:1px}
.mode-card{border:1px solid var(--line);border-radius:9px;padding:10px;background:var(--surface);display:flex;flex-direction:column;gap:9px;font-size:12px;color:var(--muted)}
.mode-card strong{font-weight:500}.mode-card .selection-check{float:right;visibility:hidden;color:var(--accent-ink)}
.mode-choice input:checked+.mode-card{border-color:var(--accent-border);background:var(--accent-soft);color:var(--ink)}
.mode-choice input:checked+.mode-card .selection-check{visibility:visible}
.mode-choice input:focus-visible+.mode-card,.accent-choice input:focus-visible+.accent-card{outline:2px solid var(--accent);outline-offset:3px}
.mode-sample{height:62px;border-radius:4px;border:1px solid rgb(60 70 65 / 10%);display:flex;gap:7px;padding:9px;align-items:flex-start;background:#fff}
.mode-sample i{display:block;width:15px;height:42px;background:#ecefed;border-radius:2px}.mode-sample b{display:block;width:calc(100% - 20px);height:5px;margin-top:4px;background:#b8c2bc;box-shadow:0 11px 0 #e2e6e3,0 22px 0 #e2e6e3;border-radius:2px}
.mode-sample.gray{background:#e6e8e7}.mode-sample.gray i{background:#d0d6d2}.mode-sample.gray b{background:#98a69d;box-shadow:0 11px 0 #c1c9c4,0 22px 0 #c1c9c4}
.mode-sample.dark{background:#22272a}.mode-sample.dark i{background:#3b4540}.mode-sample.dark b{background:#a0b0a6;box-shadow:0 11px 0 #55655b,0 22px 0 #55655b}
.appearance-accents{display:grid;grid-template-columns:1fr 1fr;gap:11px}.accent-choice{position:relative;cursor:pointer}
.accent-card{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:13px;font-size:12px;background:var(--surface)}
.accent-choice input:checked+.accent-card{background:var(--accent-soft);border-color:var(--accent-border)}
.accent-dot{width:22px;height:22px;border-radius:50%;background:#8fbaa3;border:4px solid #dfece4;flex-shrink:0}.accent-dot.purple{background:#ad9cc7;border-color:#e9e2f1}
.appearance-live{font-size:11px;color:var(--muted);padding:10px 0;min-height:38px}
.appearance-hint{font-size:11px;color:var(--muted);line-height:1.8;margin-top:14px}
@media(min-width:1400px){.hero h1{font-size:42px}}
@media(max-width:1050px){.header-inner{gap:18px}.header-actions{gap:13px}.search{margin-left:0;max-width:290px}.appearance-button span{display:none}}
@media(max-width:760px){.header-inner{gap:12px}.header-actions{gap:12px}.search{flex:auto;width:100%;max-width:none}.appearance-button{padding:3px}.hero h1{font-size:28px}.hero-copy>p{font-size:11px}.hero-actions .plain{font-size:10px}.appearance-modes{gap:7px}.mode-card{padding:8px;font-size:11px}.mode-sample{height:55px;padding:7px}.mode-sample i{height:37px}.accent-card{padding:12px 9px;font-size:11px}}
@media(max-width:480px){.hero h1{font-size:30px}.hero-copy>p{font-size:11px}.hero-copy{padding-bottom:5px}}

/* Dairy Farm reference: leaf green #5d9913, cream hero, warm golden details. */
.hero{background:var(--hero-surface);grid-template-columns:1fr .9fr;align-items:center;min-height:416px}
.hero-copy{padding:38px 20px 38px 45px}
.hero-feature{position:relative;justify-self:center;width:246px;aspect-ratio:2/3;margin:24px 0;overflow:hidden;border-radius:8px;box-shadow:0 12px 28px rgb(38 46 23 / 19%);isolation:isolate}
.hero-feature .hero-art{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center;filter:none}
.hero-feature figcaption{position:absolute;inset:auto 0 0;padding:52px 22px 23px;color:#fff;background:linear-gradient(transparent,rgba(7,16,22,.86));text-shadow:0 2px 5px #0008}
.hero-feature figcaption{display:none}
.hero-feature figcaption span{display:block;font-size:8px;letter-spacing:1.3px;margin-bottom:7px;color:#ffe4a6}
.hero-feature figcaption strong{display:block;font-size:26px;line-height:1.25;font-weight:800;letter-spacing:-1px}
.accent-dot{background:#5d9913;border-color:#e2efce}
:root[data-accent="green"] .hero .button{background:linear-gradient(110deg,#64a019,#83c236);color:#142900}
:root[data-accent="green"] .hero .button:hover{background:#76b52d}
:root[data-accent="green"][data-mode="dark"] .hero .button{background:var(--accent);color:var(--on-accent)}
:root[data-accent="purple"] .hero{background:var(--accent-soft)}
.book-cover{border-radius:7px}
.book-cover>img{object-position:center}
@media(max-width:760px){.hero{grid-template-columns:1fr .85fr;min-height:355px}.hero-copy{padding:25px 12px 25px 25px}.hero-feature{width:200px;margin:24px 12px}.hero-feature figcaption{padding:45px 17px 19px}.hero-feature figcaption strong{font-size:23px}}
@media(max-width:480px){.hero{grid-template-columns:1fr;gap:8px}.hero-copy{padding:25px 24px 5px}.hero-feature{width:220px;margin:15px 0 25px}.hero-feature .hero-art{height:100%;object-fit:cover}.hero h1{font-size:30px}.hero-actions{flex-wrap:wrap}}