/* Theme tokens keep every view in sync; artwork keeps its own dark treatment. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg2: #f5f5f7;
  --card: #ededf0;
  --line: #dedee3;
  --text: #202126;
  --sub: #53545e;
  --mute: #6c6d76;
  --accent: #202126;
  --accent-rgb: 32,33,38;
  --accent-deep: #767780;
  --on-accent: #ffffff;
  --new: #cf3450;
  --free: #087a68;
  --err: #bb3d32;
  --c-木: #367348;
  --c-火: #bb473f;
  --c-土: #886719;
  --c-金: #626675;
  --c-水: #317591;
}

:root[data-theme="light"] body { background: #e9e9ed; }
:root[data-theme="light"] :is(.hdr, .rbar, .eptabs),
:root[data-theme="light"] body:is(.v-home, .v-explore) .hdr {
  background: rgba(255,255,255,.94);
  border-color: var(--line);
}
:root[data-theme="light"] .buybar {
  background: rgba(255,255,255,.96);
  box-shadow: 0 -8px 26px rgba(25,26,35,.07);
}
:root[data-theme="light"] .tabbar {
  background: #ffffff;
  border-color: rgba(32,33,38,.22);
  box-shadow: 0 6px 20px rgba(25,26,35,.17);
}
:root[data-theme="light"] .tabbar button { color: #5e6069; }
:root[data-theme="light"] .tabbar button.on { color: #17181c; background: #e4e4e9; }
:root[data-theme="light"] body.v-home .topnav { border-bottom-color: var(--line); }
:root[data-theme="light"] body.v-home .topnav button { color: var(--sub); }
:root[data-theme="light"] body.v-home .topnav button.on { color: var(--text); }
:root[data-theme="light"] :is(.browse-links button, .detail-highlights, .lead, .disc),
:root[data-theme="light"] body.v-home :is(#secLove, #secLife, .promise),
:root[data-theme="light"] body.v-explore .sort { border-color: var(--line); }
:root[data-theme="light"] .subgenre .chip { border-color: var(--line); }
:root[data-theme="light"] .subgenre .chip.on { border-color: var(--accent); }
:root[data-theme="light"] body.v-home #charGrid .chcard {
  background: var(--bg2);
  border-color: var(--line);
}
:root[data-theme="light"] body:is(.v-home, .v-explore) .c2 .th {
  border-color: rgba(32,33,38,.1);
  box-shadow: 0 6px 18px rgba(25,26,35,.08);
}
:root[data-theme="light"] body.v-home .slide { box-shadow: 0 8px 24px rgba(25,26,35,.13); }

/* Cover copy stays white on its illustration in either theme. */
:root[data-theme="light"] :is(.slide, .collection-lead, .cover, .stage) {
  --text: #ffffff;
  --sub: #d4d4da;
  --mute: #aaaab4;
  --accent: #ffffff;
  --accent-rgb: 255,255,255;
  --on-accent: #18181b;
  color: #ffffff;
}
:root[data-theme="light"] .cover { --bg: #0e0e10; }
:root[data-theme="light"] :is(.count, .c2 .th .ov, .c2 .th .ov small) { color: #ffffff; }
:root[data-theme="light"] .c2 .th .ov small { --accent: #ffffff; }
:root[data-theme="light"] .bd { background: var(--card); color: var(--sub); }
:root[data-theme="light"] :is(.slide, .th) .bd { background: rgba(0,0,0,.58); color: #ffffff; }
:root[data-theme="light"] .bd.gold { background: #ffffff; color: #18181b; }
:root[data-theme="light"] .sr-head .bd.gold { background: var(--accent); color: var(--on-accent); }
:root[data-theme="light"] .bd.new { background: var(--new); color: #ffffff; }
:root[data-theme="light"] .bd.free { background: var(--free); color: #ffffff; }
:root[data-theme="light"] .sr-cover::after {
  background: linear-gradient(180deg, rgba(14,14,16,.35), transparent 22%, rgba(255,255,255,.16) 48%, var(--bg) 92%);
}
:root[data-theme="light"] .sr-top .ib { background: rgba(14,14,16,.42); }
:root[data-theme="light"] .sr-top .ib svg { stroke: #ffffff; }

/* Form, payment, account, and reading surfaces share the light palette. */
:root[data-theme="light"] :is(input, textarea, select) { color-scheme: light; }
:root[data-theme="light"] :is(input, textarea)::placeholder { color: #767782; opacity: 1; }
:root[data-theme="light"] .btn:disabled { background: #e1e1e6; color: #777884; }
:root[data-theme="light"] .sheet .pnl { box-shadow: 0 -14px 44px rgba(0,0,0,.14); }
:root[data-theme="light"] .toast { background: #292a30; color: #ffffff; }
:root[data-theme="light"] .paywall { background: linear-gradient(180deg, #f7f7f9, #efeff3); }
:root[data-theme="light"] :is(.lore, .sym) { background: var(--bg2); }
:root[data-theme="light"] .prose p { color: var(--text); }
:root[data-theme="light"] .disc { color: var(--mute); }
:root[data-theme="light"] .chap .fr { color: #ffffff; }
:root[data-theme="light"] .fl i { background: #bfc0c9; }
:root[data-theme="light"] .fl div.on i { background: var(--accent); }
:root[data-theme="light"] .sig {
  background: radial-gradient(120% 70% at 85% 0%, color-mix(in srgb, var(--glow) 12%, transparent), transparent 60%), linear-gradient(160deg, #ffffff, #f2f2f6 70%);
  box-shadow: inset 0 0 0 4px #f7f7fa, inset 0 0 0 5px rgba(32,33,38,.12);
  border-color: #c7c8d0;
}
:root[data-theme="light"] :is(.sig-il, .sig-p div) { background: rgba(32,33,38,.04); border-color: rgba(32,33,38,.09); }
:root[data-theme="light"] .sig-ft { border-color: var(--line); }
:root[data-theme="light"] .stars button { color: #bfc0c9; }
:root[data-theme="light"] :is(.stars button.on, .rv .st) { color: #9a6e04; }
:root[data-theme="light"] .fbg .shade {
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.9) 34%, rgba(255,255,255,.97) 62%, var(--bg));
}
.sw.on::after { background: var(--on-accent); }

/* Increase readable copy without expanding cover titles or the mobile shell. */
:root[data-text-size="large"] :is(.rc p, .rc.epc > p, .rc.epc .sub + p, .prose p, .lore p, .yr1 p, .yrs p, .pos p, .sym figcaption p) {
  font-size: 17px !important;
  line-height: 1.85 !important;
}
:root[data-text-size="large"] :is(.legal p, .legal li, .notice, .sheet p, .empty p, .setrow, .detail-highlights li, .row p, .sr-head p) {
  font-size: 16px;
  line-height: 1.75;
}
:root[data-text-size="large"] :is(.setrow small, .note, .order small, .foot, .browse-links small) { font-size: 13px; }
:root[data-text-size="large"] :is(.btn, .opt, .seg button) { font-size: 17px; }
:root[data-text-size="large"] .tabbar button { font-size: 11.5px; }

/* The app resolves its stored preference and OS setting to this attribute. */
:root[data-reduce-motion="true"] *,
:root[data-reduce-motion="true"] *::before,
:root[data-reduce-motion="true"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
:root[data-reduce-motion="true"] .js :is(.b, .nar),
:root[data-reduce-motion="true"].js :is(.b, .nar) { opacity: 1; transform: none; }
:root[data-reduce-motion="true"] :is(.fbg .im, .stage .sc.on) { animation: none !important; transform: none !important; }
:root[data-reduce-motion="true"] :is(.fx, .stage .flash, .stage .sweep) { display: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-reduce-motion="false"]) *,
  :root:not([data-reduce-motion="false"]) *::before,
  :root:not([data-reduce-motion="false"]) *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  :root:not([data-reduce-motion="false"]) :is(.fx, .stage .flash, .stage .sweep) { display: none; }
}

/* 매향 하연 평생사주첩: 결제창 아래 소개 구역을 라이트 모드에서는 흰 웹툰 바탕에 이어지는 미색 종이 톤으로 */
:root[data-theme="light"] :is(.ps-vol, .ps-toc) { background: transparent; }
:root[data-theme="light"] .ps-kick { color: #9a6a3a; }
:root[data-theme="light"] .ps-vol h2 { color: #2a1416; }
:root[data-theme="light"] .ps-vol .sub { color: #7a6058; }
:root[data-theme="light"] .ps-vol .sub i { color: #c4b3a6; }
:root[data-theme="light"] .ps-vol .wall { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
:root[data-theme="light"] .ps-vol .cap { color: #7a6058; bottom: 0; }
:root[data-theme="light"] .ps-toc { color: #2a1c18; }
:root[data-theme="light"] .ps-toc .guide { color: #7a6058; }
:root[data-theme="light"] .ps-toc .guide b { color: #2a1416; }
:root[data-theme="light"] .ps-ep,
:root[data-theme="light"] .ps-sec.ps-fr { background: #fffcf7; border-color: rgba(142,42,53,.16); box-shadow: 0 8px 24px rgba(80,40,30,.08); }
:root[data-theme="light"] .ps-ep .art::after { background: linear-gradient(180deg, rgba(255,252,247,0) 40%, rgba(255,252,247,.8) 76%, #fffcf7); }
:root[data-theme="light"] .ps-ep .hd { border-bottom-color: rgba(122,44,52,.12); }
:root[data-theme="light"] .ps-ep .hd .k,
:root[data-theme="light"] .ps-ep li b,
:root[data-theme="light"] .ps-fr .ps-vs p.o span,
:root[data-theme="light"] .ps-fr.ps-faq summary::after { color: #a8323f; }
:root[data-theme="light"] .ps-ep h3,
:root[data-theme="light"] .ps-sec > h3,
:root[data-theme="light"] .ps-sec.ps-fr > h3,
:root[data-theme="light"] .ps-fr .ps-open b,
:root[data-theme="light"] .ps-fr .ps-vs b { color: #2a1416; }
:root[data-theme="light"] .ps-ep .lead,
:root[data-theme="light"] .ps-sec > .s,
:root[data-theme="light"] .ps-sec.ps-fr > .s,
:root[data-theme="light"] .ps-fr .ps-open small,
:root[data-theme="light"] .ps-end { color: #7a6058; }
:root[data-theme="light"] .ps-ep li,
:root[data-theme="light"] .ps-fr .ps-vs p.o,
:root[data-theme="light"] .ps-faq summary { color: #2a1c18; }
:root[data-theme="light"] :is(.ps-ep li, .ps-fr .ps-open > div, .ps-fr .ps-vs > div, .ps-faq details) { border-bottom-color: rgba(122,44,52,.12); }
:root[data-theme="light"] .ps-fr .ps-open img { background: rgba(122,44,52,.06); }
:root[data-theme="light"] .ps-fr .ps-vs p.x { color: #8a7a72; border-bottom-color: rgba(122,44,52,.14); }
:root[data-theme="light"] .ps-fr .ps-vs p.x span { color: #9a8a82; }
:root[data-theme="light"] .ps-fr .ps-vs img { filter: drop-shadow(0 3px 5px rgba(60,30,20,.2)); }
:root[data-theme="light"] .ps-faq details p { color: #5a4640; }
:root[data-theme="light"] .ps-hy p { box-shadow: 0 2px 12px rgba(80,40,30,.12); }
/* 그림이 들어간 어두운 카드(결제 카드, 올해 운, 재물, 조심할 달 등)는 그대로 두되, 흰 바탕에서 무겁지 않게 그림자만 부드럽게 */
:root[data-theme="light"] :is(.pw2.sk-hy, .sk-hy, .yr2) { box-shadow: 0 10px 26px rgba(70,25,30,.16) !important; }