/* V4 detail layer: scoped away from the shared site header and other pages. */
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside {
  --bg: #fff;
  --ink: #20242c;
  --ink-2: #404957;
  --ink-3: #596575;
  --line: #dce2ec;
  --soft: #f4f6fb;
  --accent: #2558d9;
  --accent-deep: #1944b1;
  --accent-soft: #edf2ff;
  --accent-line: #c9d6f7;
  background: #fff;
  color: #20242c;
}
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside :is(.hero, .layout.wrap, #guide-article) { background: #fff; color: #20242c; }
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside :is(.case, .box, .mm-card, .stat, .rcards a, .vlist li, .faq, .qa, .caution, .hero-quote) { background: #fff; border-color: #dce2ec; border-radius: 20px; }
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside :is(.prompt, .who, .mm-step, .download-guide) { background: #f4f6fb; border-color: #dce2ec; border-radius: 18px; }
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .layout.wrap .group { background: #edf2ff; color: #20242c; border-color: #c9d6f7; border-left-color: #2558d9; border-radius: 20px; }
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .layout.wrap .group-title { color: #20242c; }
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .layout.wrap .group-sub { color: #404957; }
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside :is(.btn, .copy, .watch, .watch-links a, figure a, figure img, .hero-shot img, .bub, .checks li, .chips li, .download-preview, .download-actions a, .result-proof, .result-top, .video-thumb, .video-card-body, .video-watch, .prompt-disclosure, .prompt-banner, .map, .fab, .channels a) { border-radius: 16px; }
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .toc {
  background: #fff;
  border: 1px solid #dce2ec;
  border-radius: 20px;
  overscroll-behavior-y: contain;
  scroll-behavior: auto;
  overflow-anchor: none;
  scrollbar-color: #a7b9e7 transparent;
}
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .toc ol a {
  position: relative;
  border-left: 3px solid transparent;
  border-radius: 16px;
  color: #404957;
  transition: color .15s, background-color .15s;
}
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .toc ol a.is-active,
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .toc ol a[aria-current="location"] {
  border-left-color: #2558d9;
  background: #edf2ff;
  color: #1944b1;
}
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .toc ol a.is-active :is(b, span, strong, small) { color: inherit; }
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .toc ol a.is-active { box-shadow: none; }
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .toc ol a:hover { background: #f4f6fb; color: #1944b1; }
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .result-index { background: #2558d9; color: #fff; }
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside :is(.result-service,.rgo,.case-no) { color: #1944b1; }
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .rcards a:hover { border-color: #a6b9e8; box-shadow: 0 8px 22px #293a6012; }
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .toc .toc-quick a { background: #f4f6fb; color: #1944b1; border-radius: 10px; }
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .h1-a { color: #20242c; }
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .chat { background: #f4f6fb; color: #20242c; border-color: #dce2ec; border-radius: 22px; }
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .chat :is(p,.chat-url,.small,.bubbles,.channels) { color: #404957; }
@media screen and (min-width: 1100px) {
  html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .layout.wrap > .toc {
    position: sticky;
    top: 104px;
    align-self: start;
    max-height: calc(100dvh - 122px);
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .toc ol a { transition: none; }
}
@media print {
  html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .layout.wrap > .toc { position: static; max-height: none; overflow: visible; }
}

/* v25: floating chat uses the same Kakao yellow as other chat actions. */
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .fab {background:#fee500;color:#191919;border-color:#fee500}
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .fab:hover {background:#f5d900;color:#191919;border-color:#f5d900}
html body.studio-site.editorial-site.interactive-site.brand-site .interactive-aside .fab:focus-visible {outline:3px solid #191919;outline-offset:4px}