/* Canonical bilingual layout layer. Sync verbatim to the English repository. */
.dts-context-help { margin: 8px 0; max-width: 100%; min-width: 0; border: 1px solid var(--dts-field-border); border-radius: 10px; background: var(--dts-raised); color: var(--dts-text); }
.dts-context-help > summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 44px; box-sizing: border-box; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; line-height: 1.5; }
.dts-context-help > summary::-webkit-details-marker { display: none; }
.dts-context-help > summary .material-symbols-outlined { font-size: 20px; color: inherit !important; }
.dts-context-help > p { margin: 0; padding: 0 12px 12px; font-size: 13px; line-height: 1.75; color: var(--dts-text-secondary) !important; white-space: normal; overflow-wrap: anywhere; }
.dts-context-help[open] > summary { border-bottom: 1px solid var(--dts-border); margin-bottom: 10px; }
/* Quiet interaction motion: no layout animation, no delay before an action. */
:root { --dts-motion-ease: cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: no-preference) {
  :is(.app-shell,.landing-shell,.agent-coach-drawer) :is(.toolbar-button,.map-dock-btn,.workspace-primary-nav-item,.ux-demo-link,.agent-icon-button,.agent-coach-trigger,#stakeholder-pills button) {
    transition: transform 150ms var(--dts-motion-ease), box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
  }
  @media (hover:hover) and (pointer:fine) {
    :is(.app-shell,.landing-shell,.agent-coach-drawer) :is(.toolbar-button,.map-dock-btn,.ux-demo-link,.agent-icon-button,.agent-coach-trigger,#stakeholder-pills button):not(:disabled):not([aria-disabled="true"]):hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 12px rgb(15 23 42 / .13);
    }
    .ux-path .ux-path-action .material-symbols-outlined { transition: transform 180ms var(--dts-motion-ease); }
    .ux-path:hover .ux-path-action .material-symbols-outlined { transform: translateX(3px); }
  }
  :is(.app-shell,.landing-shell,.agent-coach-drawer) :is(.toolbar-button,.map-dock-btn,.workspace-primary-nav-item,.ux-demo-link,.agent-icon-button,.agent-coach-trigger,#stakeholder-pills button):not(:disabled):not([aria-disabled="true"]):active { transform: scale(.97); }
  .agent-coach-drawer:not([hidden]) { animation: dts-drawer-enter 240ms var(--dts-motion-ease); }
  .agent-coach-scrim:not([hidden]) { animation: dts-fade-enter 180ms ease; }
  .topbar-more[open] > .topbar-more-body { animation: dts-menu-enter 160ms var(--dts-motion-ease); }
  #dts-ui-tooltip:not([hidden]) { animation: dts-fade-enter 120ms ease; }
  .density-simple .visualizer-layout :is(.intake-panel,.insight-panel) { transition: transform 240ms var(--dts-motion-ease), opacity 180ms ease; }
}
@keyframes dts-drawer-enter { from { transform: translateX(32px); opacity: .55; } to { transform: translateX(0); opacity: 1; } }
@keyframes dts-menu-enter { from { transform: translateY(-6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes dts-fade-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Contrast pairs are theme-scoped: never put light-theme ink on dark cards. */
html { --dts-muted: #bac6d9; --dts-text-secondary: #dde5f1; --dts-field-border: #718099; }
html.theme-light { --dts-muted: #475569; --dts-text-secondary: #334155; --dts-field-border: #7a8699; }
html input::placeholder, html textarea::placeholder { color: #b5c2d6 !important; opacity: 1; }
html.theme-light input::placeholder, html.theme-light textarea::placeholder { color: #526079 !important; opacity: 1; }
html :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select) { border-color: var(--dts-field-border); }
html :is(input,textarea,select,button,summary,a):focus-visible { outline: 3px solid #96b4ff; outline-offset: 3px; }
html.theme-light :is(input,textarea,select,button,summary,a):focus-visible { outline-color: #234bc0; }
html:not(.theme-light) .landing-copy h2 #landing-hero-title { color: #f8fafc; -webkit-text-fill-color: #f8fafc; }
html:not(.theme-light) #landing-developer-kicker { color: #a7bcff; }
html.theme-light .landing-footer-link { color: #475569; }
html .tour-card { background: #182131; border-color: #718099; color: #f8fafc; }
html .tour-card :is(h3,#tour-skip) { color: #f8fafc; }
html .tour-card :is(p,#tour-step-label) { color: #c5d0e2; }
html.theme-light .tour-card { background: #fff; border-color: #7a8699; color: #17243b; }
html.theme-light .tour-card :is(h3,#tour-skip) { color: #17243b; }
html.theme-light .tour-card :is(p,#tour-step-label) { color: #475569; }
html.theme-light .agent-coach-drawer { --text-dim: #526079; }
html.theme-light .agent-icon-button { background: #fff; border-color: #7a8699; color: #17243b; }
html.theme-light .agent-control-strip { background: #e8f5f0; border-color: #47806e; color: #215748; }
html.theme-light .agent-control-strip :is(strong,span),
html.theme-light .agent-context-card > span,
html.theme-light .agent-topic-card strong { color: #17624e; }
html.theme-light .agent-suggestion-meta span { color: #526079; }
html.theme-light .agent-caveat { background: #fff3da; border: 1px solid #9a6c25; color: #754400; }
html.theme-light .agent-caveat :is(span,.material-symbols-outlined) { color: #754400; }
html.theme-light .agent-evidence-detail { background: #eef2f8; color: #475569; }
html.theme-light .agent-evidence-options button.is-selected { background: #e8edff; color: #213c85; border-color: #3454bd; }
html.theme-light .agent-coach-trigger:hover { background: #e8f5f0; color: #17624e; }
/* Origin badges sit on their own SVG circle, not on the canvas background. */
html .app-shell .network-stage .node-badge text { fill: #fff !important; }
html .app-shell .network-stage .node-badge circle[data-origin="brief"] { fill: #475569; }
html .app-shell .network-stage .node-badge circle[data-origin="me"] { fill: #11634f; }
html .app-shell .network-stage .node-badge:has(circle[data-origin="peer"]) text { fill: #17243b !important; }
#dts-ui-tooltip {
  position: fixed; z-index: 100000; pointer-events: none;
  max-width: min(280px,calc(100vw - 24px)); box-sizing: border-box;
  padding: 8px 12px; border-radius: 8px; background: #172132; color: #fff;
  font: 500 13px/1.5 var(--dts-ui-font); overflow-wrap: anywhere;
  box-shadow: 0 4px 16px #0003;
}
#dts-ui-tooltip[hidden] { display: none; }
#stakeholder-pills button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#stakeholder-pills .material-symbols-outlined { font-size: 20px; }
.app-shell #stakeholder-pills .token-active .material-symbols-outlined { color: inherit !important; }
[data-ui-tooltip]:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
:root { --dts-ui-font: "Pretendard Variable", system-ui, sans-serif; }
body, button, input, textarea, select, h1, h2, h3, h4, p, summary, label, legend {
  font-family: var(--dts-ui-font) !important;
}
/* Keep icon ligatures on their own font, even inside controls. */
.material-symbols-outlined { font-family: "Material Symbols Outlined" !important; flex-shrink: 0; }
.app-shell :is(h1,h2,h3,h4,p,label,legend), .landing-shell :is(h1,h2,h3,p) {
  overflow-wrap: anywhere;
  word-break: normal;
}
html[lang="ko"] .app-shell :is(h1,h2,h3,h4,p),
html[lang="ko"] .landing-shell :is(h1,h2,h3,p) { word-break: keep-all; }
.app-shell :is(.panel,.workspace,.topbar-side,.toolbar-actions,.platform-switcher,.panel-header,.section-header) { min-width: 0; }
.app-shell .topbar {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center;
  gap: 12px 20px;
}
.app-shell .topbar-heading {
  grid-column: 1; grid-row: 1;
  width: auto !important; min-width: 0 !important; max-width: none !important;
}
.app-shell .topbar-heading h2 {
  font-size: 16px !important; line-height: 1.45;
  white-space: normal !important; overflow: visible !important;
  text-overflow: clip !important; max-height: none; max-width: none !important; width: auto !important;
}
.app-shell .topbar-heading .eyebrow { white-space: normal; line-height: 1.5; }
.app-shell .workspace-primary-nav {
  grid-column: 1 / -1; grid-row: 2;
  width: min(100%,520px) !important; max-width: 100%; justify-self: center;
  display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr));
}
.app-shell .workspace-primary-nav-item {
  min-width: 0 !important; width: auto !important; min-height: 44px;
  padding: 10px 12px; white-space: normal !important;
  line-height: 1.4; overflow-wrap: anywhere;
}
.app-shell .topbar-side {
  grid-column: 2; grid-row: 1;
  width: auto !important; min-width: 0 !important; max-width: 55vw;
  flex-wrap: wrap !important;
}
.app-shell .topbar-side .toolbar-actions { min-width: 0 !important; flex-wrap: wrap !important; }
.app-shell .topbar-side .platform-switcher { width: auto !important; min-width: 0; flex-wrap: wrap !important; }
.app-shell .topbar-side .mini-control { min-width: 0 !important; max-width: 100%; }
.app-shell .topbar-side .mini-control select { min-width: 0 !important; max-width: 100%; }
.app-shell .topbar-more-body { width: min(420px,calc(100vw - 48px)); max-height: min(70vh,620px); overflow: auto; }
.app-shell .topbar-more-switcher { display: grid; grid-template-columns: minmax(0,1fr); }
.app-shell .topbar-more-actions { flex-wrap: wrap; }
.app-shell .panel-header, .app-shell .section-header { flex-wrap: wrap; gap: 12px; }
.app-shell .panel-header > *, .app-shell .section-header > * { min-width: 0; max-width: 100%; }
.app-shell :is(.toolbar-button,.reflection-actions button,.agent-approval-actions button) {
  max-width: 100%; white-space: normal; overflow-wrap: anywhere; height: auto; min-height: 40px; line-height: 1.4;
}
.app-shell :is(#density-toggle-btn,#map-focus-btn,#map-mode-btn) {
  width: auto !important; min-width: 44px !important; flex: 0 0 auto;
  padding: 8px !important; height: auto !important; min-height: 40px;
}
.app-shell #map-layer-control { width: auto !important; min-width: 124px !important; max-width: 100%; flex-shrink: 0; }
.app-shell #map-layer-control select { width: 100%; min-width: 0; }
.app-shell label.switch { width: 52px !important; min-width: 52px !important; flex-shrink: 0; max-width: 100%; white-space: normal; }
.app-shell p { white-space: normal !important; }
.app-shell .ux-case-perspectives { flex-wrap: wrap; }
.app-shell .orbit-ring-large { width: min(320px,100%); height: auto; aspect-ratio: 1; }
.app-shell .orbit-ring-small { max-width: 75%; }
.app-shell .orbit-visual { overflow: clip; }
.app-shell .ux-demo-banner, .app-shell .ux-demo-banner > span { flex-wrap: wrap; }
@media(max-width:1180px) {
  .app-shell:not(.density-simple) .topbar-side { grid-column: 1 / -1; grid-row: 3; max-width: 100%; justify-content: flex-start; }
  .app-shell:not(.density-simple) .topbar-side .platform-switcher { flex: 1 1 280px; }
}
@media(max-width:720px) {
  .app-shell #stakeholder-pills { display: flex !important; flex-flow: row wrap !important; gap: 4px; }
  .app-shell #map-lens-bar #stakeholder-pills button { width: 44px !important; min-width: 44px !important; height: 44px; padding: 8px; }
  .app-shell #stakeholder-pills .ui-control-label { display: none; }
  .app-shell .map-dock-btn { min-width: 44px; min-height: 44px; }
  .app-shell .map-dock-btn::after { display: none !important; }
  .app-shell #map-lens-bar {
    left: 84px !important; right: 12px !important; top: 12px !important;
    transform: none !important; width: auto !important; max-width: none !important;
    min-width: 0; height: auto; border-radius: 12px !important; padding: 6px;
  }
  .app-shell #map-lens-bar .stakeholder-pills {
    display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr));
    flex-direction: row !important; width: 100%; gap: 4px;
  }
  .app-shell #map-lens-bar button { min-width: 0 !important; width: 100% !important; padding: 7px 4px; font-size: 11px; white-space: normal; line-height: 1.35; }
  .app-shell .score-chip::after { position: fixed; left: 16px; right: 16px; top: auto; bottom: 24px; transform: none; width: auto; max-width: none; box-sizing: border-box; }
  .app-shell .score-chip::before { display: none; }
  .app-shell .topbar { padding: 12px; gap: 12px; }
  .app-shell .topbar-side { max-width: 104px; }
  .app-shell .workspace-primary-nav { width: 100% !important; }
  .app-shell .workspace-primary-nav-item { font-size: 13px; padding: 10px 8px; }
  .app-shell .ux-demo-banner { gap: 4px 12px; line-height: 1.5; }
  .app-shell .ux-demo-banner > span { gap: 4px 10px; }
  .app-shell .ux-home-heading, .app-shell .ux-section-heading { flex-wrap: wrap; gap: 8px; }
  .app-shell .ux-case { grid-template-columns: minmax(0,1fr); }
  .app-shell .ux-case > * { min-width: 0; }
  .app-shell .reflection-actions { flex-wrap: wrap; }
  .app-shell .reflection-actions button { min-height: 44px; }
}