html:has(.home-shell), body.home-shell { --site-header-height: 0px; --site-header-scrolled-height: 0px; --site-sidebar-width: 0px; }
body.home-shell {
  --ui-surface: #fffdf8;
  --ui-field: #f6f2e9;
  --ui-tint: #f3e7db;
  --ui-accent-line: #b38c75;
  --ui-solid: #804936;
  --ui-on-solid: #fff8ef;
  --ui-shadow: 0 2px 8px rgba(62, 46, 27, .045);
  --ui-radius: 7px;
  --ui-wash: rgba(245, 242, 233, .17);
  --ui-scene: url("/images/wuxia-ui/river-dawn.webp");
  --paper: #efece3;
  --paper-light: var(--ui-surface);
  --ink: #292a25;
  --muted: #67665c;
  --red: #8c4f3b;
  --red-dark: #79412f;
  --line: #dad7cc;
}
html[data-theme="dark"] body.home-shell {
  --ui-surface: #252d2e;
  --ui-field: #2c3535;
  --ui-tint: #413933;
  --ui-accent-line: #96725c;
  --ui-solid: #744b39;
  --ui-shadow: 0 2px 9px rgba(0, 0, 0, .1);
  --ui-wash: rgba(20, 29, 32, .16);
  --ui-scene: url("/images/wuxia-ui/moonlit-ridge.webp");
  --paper: #1d2526;
  --paper-light: var(--ui-surface);
  --ink: #edeae0;
  --muted: #b4bab1;
  --red: #e2ae8f;
  --red-dark: #f0c3a6;
  --line: #424b49;
  --theme-surface: var(--ui-surface);
  --theme-input: var(--ui-field);
  --theme-raised: #384140;
  --theme-solid: var(--ui-solid);
  --theme-on-solid: var(--ui-on-solid);
}
body.home-shell, html[data-theme="dark"] body.home-shell {
  position: relative; isolation: isolate; min-height: 100svh; padding: 0; color: var(--ink); background: var(--paper);
}
.home-shell::before {
  position: fixed; z-index: -1; inset: 0; content: ""; pointer-events: none;
  background: linear-gradient(var(--ui-wash), var(--ui-wash)), var(--ui-scene) right center / cover no-repeat;
}
@media (orientation: portrait) {
  .home-shell::before { background-position: center, 86% center; }
}
.home-shell [hidden] { display: none !important; }
.home-content { container: tools-content / inline-size; min-width: 0; scroll-margin-top: 12px; }
.home-content > section { min-width: 0; outline: none; }
.home-content .home-tool-panel { width: 100%; max-width: none; margin: 0; padding: 0; }
.home-content .home-tool-panel.info-main { min-height: 0; }
.home-content .info-content { width: 100%; max-width: none; margin: 0; padding: 0; }
.home-shell .back-to-top { right: 18px; }
.home-content .gear-page {
  --gear-panel: var(--ui-surface);
  --gear-field: var(--ui-field);
  --gear-muted: var(--muted);
}
.home-content .gear-page :is(.gear-equipment, .gear-panel, .gear-damage-panel) { border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
.home-content .gear-page .gear-damage-panel { width: 100%; }
.home-content .gear-page .gear-mobile-nav { top: 6px; }
.home-content .gear-page select :is(option, optgroup) { color: var(--ink); background-color: var(--ui-surface); }

.home-content .coupon-controls { margin: 0 0 14px; }
.home-content .coupon-toolbar { display: inline-flex; gap: 3px; width: fit-content; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--ui-surface); }
.home-content .coupon-toolbar button { min-height: 36px; margin: 0; padding: 5px 12px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); }
.home-content .coupon-toolbar button span { margin-left: 3px; }
.home-content .coupon-toolbar button:hover, .home-content .coupon-toolbar button.is-active { color: var(--red-dark); background: var(--ui-tint); }
.home-content .coupon-toolbar button:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.home-content .coupon-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr)); gap: 12px; border: 0; }
.home-content .coupon-item { gap: 10px; padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--ui-surface); }
.home-content .coupon-item-meta { padding-top: 9px; border-top: 1px solid var(--line); font-weight: 500; }
.home-content .coupon-state, .home-content .coupon-expiry { font-size: 11px; }
.home-content .coupon-item .coupon-code-area { gap: 8px; }
.home-content .coupon-code { line-height: 1.45; }
.home-content .coupon-copy, .home-content .coupon-use { min-height: 33px; border-radius: 4px; }
.home-content .coupon-copy:not(:disabled) { border-color: transparent; background: var(--ui-solid); color: var(--ui-on-solid); }
.home-content .coupon-use:not(:disabled):hover { color: var(--red-dark); border-color: var(--ui-accent-line); background: var(--ui-tint); }

.home-content .chat-workspace { gap: 12px; }
.home-content .chat-panel { border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.home-content .chat-panel :is(textarea, select, input[type="text"]) { border-color: var(--line); color: var(--ink); background-color: var(--ui-field); }
.home-content .chat-panel :is(.chat-primary, .chat-color-actions button[aria-pressed="true"]) { border-color: transparent; color: var(--ui-on-solid); background: var(--ui-solid); }
.home-content .chat-primary:hover:not(:disabled) { filter: brightness(1.1); }
.home-content .chat-preview-stage { border-radius: 4px; }
@container tools-content (min-width: 761px) {
  .home-content .chat-panel { height: clamp(590px, 73dvh, 740px); }
  .home-content .chat-decoration-panel { height: auto; align-self: start; }
  .home-content .chat-decorations { flex: 0 1 auto; max-height: 390px; }
}
@container tools-content (min-width: 1101px) {
  .home-content .chat-workspace { grid-template-columns: minmax(270px, .95fr) minmax(360px, 1.48fr) minmax(218px, .72fr); }
}
@container tools-content (min-width: 761px) and (max-width: 1100px) {
  .home-content .chat-decorations { max-height: 215px; }
}

.home-content .news-article-main { max-width: 900px; margin-inline: auto; }
.home-content .news-article-panel { padding: clamp(18px, 4cqw, 48px); border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ink); box-shadow: var(--ui-shadow); }
.home-content .news-article-header, .home-content .news-article-footer { border-color: var(--line); }
.home-content .news-article-header h1 { font-family: "Noto Serif KR", Batang, serif; letter-spacing: -.035em; }
.home-content .news-article-back, .home-content .news-article-meta { color: var(--muted); }
.home-content .news-article-body a, .home-content .news-article-footer a { color: var(--red-dark); }
@container tools-content (max-width: 500px) {
  .home-content .coupon-toolbar { width: 100%; }
  .home-content .coupon-toolbar button { flex: 1; padding-inline: 5px; }
  .home-content .news-article-header h1 { font-size: 21px; }
}