:root {
  color-scheme: dark;
  --bg: #071108;
  --sidebar: #0A160D;
  --panel: #0D1B10;
  --panel-2: #102217;
  --text: #F0F3ED;
  --muted: #A1ADA3;
  --line: rgba(163, 190, 169, .14);
  --line-strong: rgba(180, 210, 188, .28);
  --A: #D6BE2E;
  --B: #53D6E6;
  --C: #E98A2C;
  --D: #A8E92A;
  --E: #8B68E8;
  --F: #DA58B9;
  --neutral: #9AA59C;
  --danger: #F0957F;
  --focus: #F4E89A;
  --sidebar-width: 330px;
  --drawer-width: 440px;
  --font: "Noto Sans KR", Inter, Pretendard, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --han: "Noto Sans KR", "Noto Sans CJK KR", "Malgun Gothic", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
body { color: var(--text); font-family: var(--font); font-size: 14px; word-break: keep-all; overflow-wrap: break-word; }
small { font-size: max(12px, .875em); }
code, pre, samp, .machine-token, [data-machine-token], a[href^="mailto:"] { word-break: normal; overflow-wrap: anywhere; }
button, input, textarea, select { color: inherit; font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
.graph-controls button:disabled, #mobile-fit:disabled { cursor: wait; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, .graph-stage:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; left: 12px; top: -60px; padding: 10px 14px; background: var(--text); color: var(--bg); border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 12px; }

.startup-help {
  visibility: hidden;
  position: fixed;
  z-index: 1200;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(560px, calc(100vw - 32px));
  padding: 20px 22px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(240, 149, 127, .42);
  border-radius: 12px;
  background: #132319;
  color: #F2F5F2;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .68);
  animation: reveal-startup-help 0s linear 3s forwards;
}
.startup-help b { font-size: 16px; }
.startup-help span { color: #C0CBC2; font-size: 12px; line-height: 1.7; }
.startup-help code { padding: 2px 5px; border-radius: 4px; background: rgba(255, 255, 255, .08); color: #F3E59C; font-size: 12px; }
@keyframes reveal-startup-help { to { visibility: visible; } }

.app-shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; width: 100vw; height: 100vh; height: 100dvh; background: var(--bg); }
.sidebar { position: relative; z-index: 20; height: 100vh; height: 100dvh; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(210,230,216,.25) transparent; background: var(--sidebar); border-right: 1px solid var(--line); }
.sidebar-head { display: flex; justify-content: space-between; gap: 12px; padding: 22px 20px 14px; }
.sidebar-head > div { min-width: 0; overflow: hidden; }
.sidebar-head > div > .eyebrow { font-size: 12px; letter-spacing: .12em; white-space: nowrap; }
.eyebrow { margin: 0 0 7px; color: #83A18C; font-size: 12px; font-weight: 800; letter-spacing: .17em; }
h1 { margin: 0; font-size: 23px; line-height: 1.1; letter-spacing: -.04em; }
h1 span { margin-left: 4px; color: #C9D6CB; font-family: var(--han); font-weight: 500; letter-spacing: .01em; }
.brand-lockup { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; }
.brand-lockup > img { width: 38px; height: 38px; border: 1px solid rgba(194, 219, 201, .13); border-radius: 10px; box-shadow: 0 7px 20px rgba(0, 0, 0, .24); }
.brand-title { min-width: 0; }
.brand-name-ko { margin-left: 0; color: var(--text); font-family: var(--font); font-weight: 800; letter-spacing: -.04em; }
.brand-english { max-width: none; margin: 3px 0 0; color: #91A097; font-size: 12px; line-height: 1.35; letter-spacing: .015em; white-space: nowrap; }
.brand-purpose { max-width: 296px; margin: 10px 0 0; color: #C6D3C8; font-size: 13px; line-height: 1.6; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(14, 33, 20, .86); color: #DDE8DF; font-size: 20px; }
.fit-icon {
  display: block;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(currentColor, currentColor) left top / 6px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) left top / 1.5px 6px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 6px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 1.5px 6px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 6px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 1.5px 6px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 6px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 1.5px 6px no-repeat;
}
.sidebar-close { display: none; }

.search-wrap { position: sticky; z-index: 6; top: 0; margin: 0 16px 4px; padding: 10px 0; container-type: inline-size; background: var(--sidebar); }
.search-wrap input { --placeholder-size: clamp(12px, 4.3cqi, 14px); width: 100%; height: 44px; padding: 0 62px 0 38px; border: 1px solid rgba(168, 201, 176, .24); border-radius: 8px; background: #0C2416; color: var(--text); box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.search-wrap input::placeholder { color: #829087; font-size: var(--placeholder-size); transition: opacity .12s ease; }
.search-wrap input:focus::placeholder { opacity: 0; }
.search-icon { position: absolute; z-index: 2; left: 13px; top: 50%; transform: translateY(-50%); color: #A8C0AF; font-size: 20px; pointer-events: none; }
.search-submit { position: absolute; z-index: 2; right: 4px; top: 50%; min-width: 52px; min-height: 36px; transform: translateY(-50%); padding: 0 8px; border: 1px solid rgba(180, 203, 185, .2); border-radius: 6px; background: rgba(19, 48, 29, .94); color: #CED9D0; font: 12px var(--font); cursor: pointer; }
.search-submit:hover, .search-submit:focus-visible { border-color: rgba(229, 216, 137, .62); background: #1A3A24; color: #FFF2A9; }
.search-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); max-height: min(420px, 55vh); overflow: auto; padding: 6px; border: 1px solid var(--line-strong); border-radius: 10px; background: #102217; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.search-result-group { margin: 5px 7px 3px; padding-top: 6px; border-top: 1px solid rgba(177, 207, 184, .1); color: #D4C77E; font-size: 12px; font-weight: 750; line-height: 1.4; }
.search-result-group:first-child { margin-top: 0; padding-top: 2px; border-top: 0; }
.search-result { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px; border: 0; border-radius: 7px; background: transparent; text-align: left; }
.search-result:hover, .search-result.active { background: rgba(171, 206, 178, .10); }
.result-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.result-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.result-name small { overflow: hidden; color: var(--muted); font-family: var(--han); text-overflow: ellipsis; white-space: nowrap; }
.relation-chip { justify-self: end; max-width: none; padding: 3px 5px; border-radius: 4px; background: rgba(159, 181, 164, .11); color: #ADC1B1; font-size: 12px; text-align: right; overflow-wrap: normal; white-space: nowrap; word-break: keep-all; }
.result-empty { padding: 14px 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.search-result-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px 5px; border-top: 1px solid var(--line); color: #98A79B; font-size: 12px; }
.search-choice-note { margin: 0 7px 5px; padding: 7px 9px; border-radius: 6px; background: rgba(213, 193, 103, .1); color: #E0D59B; font-size: 12px; line-height: 1.5; }
.search-choice-note + .search-result-group { margin-top: 0; padding-top: 2px; border-top: 0; }
.search-more { min-height: 29px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: #18311F; color: #E2EAE4; font-size: 12px; }
.search-variant-note { margin: 4px 7px 6px; padding: 8px 9px; border-left: 2px solid rgba(213, 193, 103, .55); background: rgba(79, 68, 24, .18); color: #D9CD91; font-size: 12px; line-height: 1.55; }

.search-example-line { display: flex; min-height: 28px; align-items: center; gap: 5px; margin: -2px 16px 5px; color: #839188; font-size: 12px; line-height: 1.4; }
.search-example-line button { min-height: 28px; padding: 2px 0; border: 0; border-bottom: 1px solid rgba(218, 204, 115, .46); background: transparent; color: #E5D889; font-size: 12px; }
.search-example-line button:hover, .search-example-line button:focus-visible { color: #FFF2A9; border-bottom-color: currentColor; }

.audience-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 16px 2px; }
.audience-entry a { display: flex; min-width: 0; min-height: 52px; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 10px; border: 1px solid rgba(213, 193, 103, .28); border-radius: 8px; background: rgba(79, 68, 24, .22); color: #F0E7A5; text-decoration: none; }
.audience-entry a:hover { border-color: rgba(197, 222, 203, .3); background: #16301E; }
.audience-entry b { font-size: 12px; }
.audience-entry span { overflow-wrap: break-word; color: #899A8D; font-size: 12px; line-height: 1.35; }
.audience-entry .research-entry { border-color: var(--line); background: rgba(17, 41, 24, .32); color: #C7D3C9; }
.audience-entry .research-entry span { color: #7F8E84; }

.sidebar-sections { padding: 4px 16px 8px; }
.control-section { padding: 14px 3px; border-bottom: 1px solid var(--line); }
.advanced-tools { margin-top: 5px; border: 1px solid rgba(173, 204, 181, .17); border-radius: 9px; background: rgba(11, 29, 17, .48); }
.advanced-tools > summary { display: grid; gap: 2px; min-height: 50px; padding: 9px 11px; color: #CBD8CE; cursor: pointer; list-style-position: inside; }
.advanced-tools > summary span { font-size: 12px; font-weight: 800; }
.advanced-tools > summary small { padding-left: 17px; color: #829087; font-size: 12px; font-weight: 400; }
.advanced-tools[open] > summary { border-bottom: 1px solid var(--line); background: rgba(26, 56, 34, .42); }
.advanced-tools:not([open]) > .advanced-tools-body { display: none; }
.advanced-tools-body { padding: 0 9px 5px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.section-heading h2, .trail-section summary { margin: 0; color: #D7E1D9; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.section-help { margin: 0 0 10px; color: #8D9B91; font-size: 12px; line-height: 1.55; }
.text-button { padding: 2px 0; border: 0; background: none; color: #B9CCBD; font-size: 12px; }
.group-controls { display: grid; gap: 3px; }
.group-button { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 31px; padding: 5px 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #C7D1C9; text-align: left; }
.group-button:hover, .group-button.active { border-color: rgba(180, 206, 185, .16); background: rgba(161, 190, 168, .07); }
.swatch { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 9px currentColor; }
.group-button small { color: #6F7F73; font-variant-numeric: tabular-nums; }
.relation-navigation-controls { display: grid; min-height: 42px; gap: 5px; }
.relation-navigation-placeholder { margin: 0; padding: 10px 11px; border: 1px dashed rgba(176, 205, 183, .18); border-radius: 8px; background: rgba(17, 41, 24, .32); color: #7F8E83; font-size: 12px; line-height: 1.55; }
.relation-group-button { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: rgba(17, 41, 24, .48); color: #AAB9AD; font-size: 12px; text-align: left; }
.relation-group-button small { color: #A7B8AA; font-variant-numeric: tabular-nums; }
.relation-group-button:hover, .relation-group-button.active { border-color: rgba(197, 222, 203, .3); background: #1B3924; color: #F0F5F1; }
.segmented { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.12); }
.segmented button { min-height: 29px; border: 0; border-radius: 5px; background: transparent; color: #849087; font-size: 12px; }
.segmented button.active { background: #18311F; color: #F0F4F1; box-shadow: inset 0 0 0 1px rgba(180, 207, 186, .15); }
.toggle-list { display: grid; gap: 2px; }
.toggle-list label { display: grid; grid-template-columns: 17px 29px 1fr auto; align-items: center; min-height: 32px; color: #C2CDC4; font-size: 12px; cursor: pointer; }
.toggle-list input, .status-grid input { width: 14px; height: 14px; accent-color: #B6D5BD; }
.toggle-list output { color: #78867B; font-size: 12px; font-variant-numeric: tabular-nums; }
.line-key { display: inline-block; width: 19px; height: 0; border-top: 1px solid #7F9A86; }
.line-key.composition { border-top: 2px dashed #D3BE66; }
.line-key.lineage { position: relative; border-top: 2px solid #79C6BA; }
.line-key.lineage::after { content: ""; position: absolute; right: -1px; top: -4px; border: 3px solid transparent; border-left-color: #79C6BA; }
.line-key.variant { border-top: 2px dotted #CD83BD; }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 9px; }
.status-grid label { display: grid; grid-template-columns: 17px 8px 1fr; align-items: center; min-height: 29px; color: #ACB9AF; font-size: 12px; cursor: pointer; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; }
.status-dot.verified { background: #64D89A; }
.status-dot.partially-verified { border: 1px solid #6FD1B6; background: linear-gradient(90deg, #6FD1B6 50%, transparent 50%); }
.status-dot.disputed { background: #F1BA62; }
.status-dot.unchecked { border: 1px solid #92A197; background: transparent; }
.status-dot.unmapped { background: #69756C; }

.trail-section { border: 0; }
.trail-section summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.trail-section summary::-webkit-details-marker { display: none; }
.count-pill { min-width: 20px; padding: 2px 6px; border-radius: 10px; background: rgba(148, 177, 155, .12); color: #A9B9AC; text-align: center; font-size: 12px; }
.trail-section[open] summary { margin-bottom: 7px; }
.trail-steps { display: grid; gap: 4px; max-height: 180px; overflow: auto; margin: 0 0 10px; padding: 0; list-style: none; }
.trail-steps:empty::after { content: "전체 성도나 근거 비교 자료에서 별을 열면 경로가 시작됩니다."; padding: 9px 7px; color: #6E7B71; font-size: 12px; }
.trail-step { display: grid; grid-template-columns: 20px minmax(0, 1fr) 44px; align-items: center; position: relative; }
.trail-step::before { content: ""; position: absolute; left: 11px; top: 22px; bottom: -7px; width: 1px; background: var(--line-strong); }
.trail-step:last-child::before { display: none; }
.trail-index { display: grid; place-items: center; align-self: center; width: 19px; height: 19px; border: 1px solid rgba(189, 214, 195, .24); border-radius: 50%; background: #102217; color: #85968A; font-size: 12px; }
.trail-step button { min-height: 44px; border: 0; background: transparent; color: #BBC9BE; font-size: 12px; }
.trail-step button:hover { color: var(--text); }
.trail-open { min-width: 0; overflow: hidden; padding: 4px 7px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.trail-open small { display: inline; vertical-align: baseline; white-space: nowrap; }
.trail-remove { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: #9EADA2; font-size: 18px; }
.trail-remove:hover, .trail-remove:focus-visible { background: rgba(92, 130, 101, .14); color: #F0F5F1; }
.trail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.trail-actions button, .wide-button, .modal-actions button, .trail-card button { min-height: 32px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: rgba(20, 43, 27, .62); color: #BFCBC1; font-size: 12px; }
.trail-actions .primary-button { grid-column: 1 / -1; }
.primary-button { border-color: rgba(188, 215, 195, .35) !important; background: #244B30 !important; color: #F3F7F4 !important; }
.compact-section { padding-top: 4px; }
.wide-button { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; text-align: center; }
.evidence-feature-list { display: grid; gap: 4px; margin: 0 0 10px; }
.evidence-feature-list p { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 7px; min-height: 30px; margin: 0; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: rgba(139, 171, 147, .035); color: #C5D0C7; font-size: 12px; }
.evidence-feature-list p b { overflow-wrap: normal; white-space: nowrap; }
.evidence-feature-list p span { min-width: 0; color: #91BA9C; text-align: right; font-size: 12px; overflow-wrap: normal; white-space: nowrap; }
.evidence-feature-list .evidence-unavailable { color: #9AA49C; background: rgba(129, 139, 131, .025); }
.evidence-feature-list .evidence-unavailable span { color: #7D8980; }
.evidence-reference-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 8px; }
.evidence-reference-actions button { min-height: 36px; padding: 6px 7px; border: 1px solid var(--line-strong); border-radius: 7px; background: rgba(20, 43, 27, .62); color: #bfcfc3; font-size: 12px; }
.atlas-hook { position: relative; }
.atlas-hook[data-state="ready"] { border-bottom-color: rgba(111, 209, 182, .28); }
.atlas-hook[data-state="ready"] .count-pill { background: rgba(80, 184, 146, .14); color: #9DE0BF; }
.atlas-hook[data-state="error"] .count-pill { background: rgba(240, 149, 127, .12); color: #F0B0A0; }
#public-atlas-container:empty { display: none; }
.sidebar-foot { padding: 8px 19px max(20px, env(safe-area-inset-bottom)); color: #909D93; font-size: 12px; line-height: 1.55; text-align: center; }
.sidebar-foot p { margin: 5px 0; }
.creator-credit { margin-top: 13px !important; color: #C4D0C7; font-size: 12px; font-weight: 650; }
.copyright-credit { color: #AEBBAF; font-variant-numeric: tabular-nums; }
.rights-note { color: #8C9A90; }
.medical-disclaimer { margin: 9px 0 !important; padding: 8px 9px; border: 1px solid rgba(218, 181, 92, .28); border-radius: 8px; color: #D9CBA8; background: rgba(92, 67, 17, .16); text-align: left; }
.medical-disclaimer b { color: #F0D990; }
.footer-links { display: grid; justify-content: center; align-items: center; margin-top: 8px; }
.footer-primary-links { grid-template-columns: repeat(3, max-content); gap: 0 8px; }
.footer-secondary-links { grid-template-columns: repeat(2, max-content); gap: 0 10px; margin-top: 2px; padding-top: 2px; border-top: 1px solid rgba(180, 208, 187, .1); }
.footer-links button { flex: 0 0 auto; min-height: 27px; padding: 2px 0; border: 0; border-bottom: 1px solid rgba(180, 208, 187, .22); background: transparent; color: #B9C8BC; font: inherit; font-size: 12px; line-height: 23px; text-decoration: none; overflow-wrap: normal; white-space: nowrap; word-break: keep-all; }
.footer-links a { flex: 0 0 auto; min-height: 27px; padding: 2px 0; border: 0; border-bottom: 1px solid rgba(180, 208, 187, .22); background: transparent; color: #B9C8BC; font: inherit; font-size: 12px; line-height: 23px; text-decoration: none; overflow-wrap: normal; white-space: nowrap; word-break: keep-all; }
.footer-links button:hover, .footer-links a:hover { color: #F0F5F1; border-bottom-color: #B9C8BC; }
.formula-mark { display: inline-block; width: 10px; height: 10px; margin-right: 3px; border: 1px solid #E9F0EA; border-radius: 2px; vertical-align: -1px; }
.herb-mark { display: inline-block; width: 7px; height: 7px; margin: 0 3px 0 10px; border-radius: 50%; background: #A3B1A6; vertical-align: 0; }
.disease-mark { display: inline-block; width: 8px; height: 8px; margin: 0 5px 0 9px; transform: rotate(45deg); border: 1.5px solid #E58AAE; background: transparent !important; box-shadow: 0 0 7px rgba(229, 138, 174, .6); vertical-align: 0; }

.graph-stage { --space-x: 0px; --space-y: 0px; --space-scale: 1.08; position: relative; isolation: isolate; min-width: 0; height: 100vh; height: 100dvh; overflow: hidden; background: #02050B; outline: none; }
.graph-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -12%;
  pointer-events: none;
  background:
    linear-gradient(145deg, rgba(1, 5, 13, .03), rgba(4, 3, 13, .08)),
    url("assets/uibang-space-nebula.webp") center / cover no-repeat;
  opacity: .96;
  transform: translate3d(var(--space-x), var(--space-y), 0) scale(var(--space-scale));
  transform-origin: center;
  will-change: transform;
}
.graph-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0, 2, 8, .12) 73%, rgba(0, 2, 8, .38) 100%);
}
#graph-canvas, #universe-canvas, #universe-labels { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#graph-canvas { z-index: 1; opacity: 0; pointer-events: none; transition: opacity .28s ease; }
#universe-canvas { z-index: 1; opacity: 1; }
#universe-labels { z-index: 2; opacity: 1; pointer-events: none; }
html[data-map-mode="core"] #graph-canvas { opacity: 1; pointer-events: auto; }
html[data-map-mode="core"] #universe-canvas,
html[data-map-mode="core"] #universe-labels { opacity: 0; pointer-events: none; }
html:not([data-map-mode="core"]) .core-only { display: none !important; }
html[data-map-mode="core"] .universe-sidebar { display: none !important; }
.map-mode-switch { position: absolute; z-index: 8; right: 18px; top: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border: 1px solid rgba(181, 211, 189, .18); border-radius: 11px; background: rgba(6, 18, 9, .76); box-shadow: 0 12px 32px rgba(0, 0, 0, .26); backdrop-filter: blur(10px); }
.map-mode-switch button { display: flex; flex-direction: column; align-items: flex-start; min-width: 102px; min-height: 42px; padding: 6px 9px; border: 0; border-radius: 8px; background: transparent; color: #829187; text-align: left; }
.map-mode-switch button.active { background: rgba(52, 94, 62, .52); color: #F0F5F1; box-shadow: inset 0 0 0 1px rgba(192, 221, 200, .15); }
.map-mode-switch b { font-size: 12px; }
.map-mode-switch small { margin-top: 1px; color: #84968A; font-size: 12px; }
.map-mode-switch button.active small { color: #B5C7B9; }
.universe-loading { position: absolute; z-index: 7; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 250px; padding: 18px 22px; transform: translate(-50%, -50%); border: 1px solid rgba(182, 211, 190, .18); border-radius: 13px; background: rgba(7, 20, 10, .9); color: #E4ECE6; box-shadow: 0 24px 70px rgba(0, 0, 0, .48); backdrop-filter: blur(12px); transition: opacity .35s ease, visibility .35s ease; }
.universe-loading.ready { visibility: hidden; opacity: 0; }
.universe-loading b { font-size: 13px; }
.universe-loading span { color: #8FA096; font-size: 12px; }
.universe-spinner { width: 26px; height: 26px; border: 2px solid rgba(124, 195, 157, .2); border-top-color: #C9DE82; border-radius: 50%; animation: universe-spin .8s linear infinite; }
@keyframes universe-spin { to { transform: rotate(360deg); } }
.universe-card { position: absolute; z-index: 8; left: 18px; bottom: 18px; width: min(340px, calc(100% - 124px)); max-height: min(72vh, 680px); overflow: auto; padding: 14px 15px 13px; border: 1px solid rgba(188, 216, 196, .22); border-radius: 12px; background: rgba(8, 23, 12, .91); box-shadow: 0 18px 50px rgba(0, 0, 0, .42); backdrop-filter: blur(14px); }
.universe-card-close { position: absolute; right: 0; top: 0; width: 44px; height: 44px; border: 0; background: transparent; color: #C3CEC5; font-size: 20px; }
.universe-card > p { margin: 0 44px 4px 0; color: #8FA095; font-size: 12px; }
.universe-card h2 { margin: 0 44px 4px 0; font-size: 19px; letter-spacing: -.02em; }
.universe-card #universe-card-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; min-height: 20px; margin-right: 0; color: #ADB9AF; line-height: 1.55; }
.universe-card-meta-part { overflow-wrap: normal; white-space: nowrap; }
.universe-card-meta-part + .universe-card-meta-part::before { content: "·"; margin-right: 8px; }
.universe-card-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 44px 0 0; }
.universe-card-badges span { padding: 3px 6px; border: 1px solid rgba(213, 193, 103, .28); border-radius: 999px; background: rgba(79, 68, 24, .34); color: #F0D989; font-size: 12px; line-height: 1.35; }
.universe-card > .universe-card-identity-note { margin: 6px 44px 0 0; color: #C6D0C8; font-size: 12px; line-height: 1.55; }
.universe-card #universe-card-relations { margin: 8px 0 0; padding: 8px 9px; border: 1px solid rgba(175, 205, 183, .15); border-radius: 7px; background: rgba(21, 47, 29, .46); color: #B6C5B9; line-height: 1.55; }
.universe-card #universe-card-relations strong,
.universe-card #universe-card-relations span { display: block; }
.universe-card #universe-card-relations strong { color: #E3ECE5; font-size: 12px; }
.universe-card #universe-card-relations span { margin-top: 5px; }
.universe-card #universe-card-relations .variant-note { padding-top: 5px; border-top: 1px solid rgba(175, 205, 183, .13); color: #9EAEA2; }
.universe-card-method { margin-top: 8px; border: 1px solid rgba(175, 205, 183, .13); border-radius: 7px; background: rgba(9, 25, 14, .4); }
.universe-card-method summary { min-height: 44px; padding: 11px 9px; color: #C7D3C9; font-size: 12px; cursor: pointer; }
.universe-card-method > div { display: grid; gap: 10px; padding: 9px 10px 12px; border-top: 1px solid rgba(175, 205, 183, .1); color: #AAB8AD; font-size: 12px; line-height: 1.6; }
.universe-card-method > div:empty { display: none; }
.universe-card-method > div span { display: block; }
.universe-card-method .variant-note { padding-top: 7px; border-top: 1px solid rgba(175, 205, 183, .1); color: #C9BD83; }
.universe-card-related { margin-top: 8px; border: 1px solid rgba(175, 205, 183, .14); border-radius: 7px; background: rgba(9, 25, 14, .52); }
.universe-card-related summary { min-height: 44px; padding: 11px 9px; color: #D6E0D8; font-size: 12px; cursor: pointer; }
.universe-card-related > .universe-card-related-legend { padding-top: 8px; border-top: 1px solid rgba(175, 205, 183, .12); color: #B8C7BB; font-size: 12px; }
.universe-card-related ul { display: grid; gap: 3px; max-height: 190px; overflow: auto; margin: 0; padding: 0 7px 7px; list-style: none; }
.universe-card-related li button { display: grid; width: 100%; min-height: 52px; padding: 7px; border: 1px solid rgba(177, 207, 184, .12); border-radius: 6px; background: rgba(27, 56, 35, .5); color: #D8E2DA; text-align: left; }
.universe-card-related li button:hover, .universe-card-related li button:focus-visible { background: rgba(42, 78, 51, .72); }
.universe-relation-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; min-width: 0; }
.universe-relation-row-head > :first-child { min-width: 0; overflow-wrap: break-word; }
.universe-relation-status { flex: 0 0 auto; padding: 2px 5px; border: 1px solid rgba(180, 207, 187, .22); border-radius: 999px; color: #D5E0D7; font-size: 12px; line-height: 1.35; white-space: nowrap; }
.universe-relation-status.mutual { border-color: rgba(116, 211, 193, .34); background: rgba(31, 92, 77, .32); color: #AEE4D8; }
.universe-relation-status.single { border-color: rgba(228, 202, 84, .34); background: rgba(95, 77, 20, .28); color: #F0DA84; }
.universe-relation-status.unknown { background: rgba(112, 128, 116, .2); color: #D2DBD4; }
.universe-card-related li small { margin-top: 3px; color: #A8B7AC; font-size: 12px; line-height: 1.45; }
.universe-card-related li .universe-relation-evidence { color: #C1CEC4; }
.universe-relation-provenance { margin-top: 3px; border: 1px solid rgba(177, 207, 184, .12); border-radius: 6px; background: rgba(4, 17, 8, .62); }
.universe-relation-provenance > summary { min-height: 44px; padding: 11px 9px; color: #BFD0C3; font-size: 12px; font-weight: 700; cursor: pointer; }
.universe-relation-provenance dl { display: grid; grid-template-columns: minmax(92px, max-content) minmax(0, 1fr); margin: 0; padding: 0 9px 8px; }
.universe-relation-provenance dt,
.universe-relation-provenance dd { margin: 0; padding: 6px 4px; border-top: 1px solid rgba(177, 207, 184, .08); font-size: 12px; line-height: 1.55; }
.universe-relation-provenance dt { color: #819287; }
.universe-relation-provenance dd { min-width: 0; color: #C0CEC3; overflow-wrap: break-word; }
.universe-relation-provenance a { color: #A9D3B3; }
.universe-relation-provenance > p { margin: 0; padding: 0 13px 11px; color: #D1BD78; font-size: 12px; line-height: 1.55; }
.universe-card-related > p { margin: 0; padding: 0 9px 9px; color: #84948A; font-size: 12px; line-height: 1.55; }
.universe-card-actions { display: grid; gap: 6px; margin-top: 8px; }
.universe-card-canonical { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 7px 10px; border: 1px solid rgba(182, 214, 191, .3); border-radius: 8px; background: rgba(34, 75, 46, .62); color: #E1EBE3; font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; }
.universe-card-canonical:hover, .universe-card-canonical:focus-visible { border-color: rgba(196, 227, 204, .54); background: rgba(45, 91, 58, .72); }
.universe-card-actions button { width: 100%; min-height: 44px; border: 1px solid rgba(188, 215, 195, .25); border-radius: 8px; font-size: 12.5px; }
.universe-card-actions .secondary-button { background: rgba(24, 54, 34, .72); color: #D7E3DA; }
.universe-card-actions .primary-button { margin-top: 0; }
.universe-export-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.universe-card-actions .universe-export-actions button { min-height: 44px; padding: 6px 4px; background: rgba(10, 29, 16, .75); color: #C0CFC3; font-size: 12px; }
.universe-card-actions .universe-export-actions button:hover,
.universe-card-actions .universe-export-actions button:focus-visible { border-color: rgba(180, 217, 190, .48); color: #EEF4EF; }
.universe-type-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.universe-type-controls label { position: relative; min-width: 0; cursor: pointer; }
.universe-type-controls input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.universe-type-controls label > span { display: flex; flex-direction: column; justify-content: center; min-height: 46px; padding: 7px 7px 7px 27px; border: 1px solid var(--line); border-radius: 8px; background: rgba(17, 41, 24, .55); color: #8E9D92; }
.universe-type-controls label > span::before { content: ""; position: absolute; left: 9px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); border: 1px solid rgba(185, 211, 192, .36); border-radius: 3px; background: rgba(5, 15, 8, .55); }
.universe-type-controls input:checked + span { border-color: rgba(197, 222, 203, .34); background: #1B3924; color: #F0F5F1; }
.universe-type-controls input:checked + span::before { border-color: #A6D3B2; background: #A6D3B2; box-shadow: inset 0 0 0 2.5px #1B3924; }
.universe-type-controls input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.universe-type-controls b { font-size: 12px; }
.universe-type-controls small { margin-top: 2px; color: #A8B7AC; font-size: 12px; font-variant-numeric: tabular-nums; }
.universe-legend { display: grid; gap: 4px; margin-top: 9px; color: #A9BAAE; text-align: center; }
.universe-legend p { margin: 0; font-size: 12px; line-height: 1.55; }
.universe-help { margin: 0; color: #A9BAAE; font-size: 12px; line-height: 1.55; white-space: nowrap; }
.universe-help span { color: #E6D971; }

/* 발표 화면에서 작았던 하단 탐색·상세 영역만 선택적으로 확대합니다. */
.atlas-hook .section-heading h2, .trail-section summary { font-size: 14px; }
.atlas-hook .section-help, .trail-section .section-help { font-size: 12.5px; }
.trail-steps:empty::after { font-size: 12px; }
.trail-index { width: 22px; height: 22px; font-size: 12px; }
.trail-step { grid-template-columns: 24px minmax(0, 1fr) 44px; }
.trail-step button { min-height: 44px; font-size: 12.5px; }
.trail-actions button, .wide-button { min-height: 40px; font-size: 12.5px; }
.sidebar-foot, .creator-credit { font-size: 12px; }
.footer-links button, .footer-links a { min-height: 36px; font-size: 12px; line-height: 32px; }
.badge { font-size: 12px; }
.detail-note { font-size: 12.5px; }
.detail-section h3 { font-size: 13.5px; }
.detail-section h3 small { font-size: 12px; }
.field-grid dt, .field-grid dd, .detail-select { font-size: 13px; }
.field-grid { grid-template-columns: 106px 1fr; }
.field-grid dt, .field-grid dd { padding: 8px 0; }
.evidence-note { font-size: 12px; }
.preparation-list li { font-size: 12.5px; }
.preparation-list small { font-size: 12px; }
.ingredient-table th { font-size: 12px; }
.ingredient-table td { font-size: 12.5px; }
.verification-mark { width: 16px; height: 16px; font-size: 12px; }
.mapping-card b { font-size: 12.5px; }
.mapping-card small, .mapping-card em { font-size: 12px; }
.difference-row { grid-template-columns: 72px 1fr; font-size: 12.5px; }
.difference-row b { font-size: 12px; }
.connection-button { min-height: 42px; font-size: 12.5px; }
.passage blockquote { font-size: 13px; }
.passage p { font-size: 12px; }
.passage cite { font-size: 12px; }
.reverse-summary { font-size: 12px; }
.occurrence-card button { font-size: 12.5px; }
.occurrence-card p { font-size: 12px; }
.map-header { position: absolute; left: 18px; top: 15px; display: flex; gap: 7px; pointer-events: none; }
.map-header span { padding: 5px 8px; border: 1px solid rgba(166, 196, 173, .11); border-radius: 15px; background: rgba(6, 18, 9, .62); color: #78907D; font-size: 12px; backdrop-filter: blur(5px); }
.universe-history { position: absolute; z-index: 8; top: 8px; left: 50%; width: min(720px, calc(100% - 430px)); padding: 6px; transform: translateX(-50%); border: 1px solid rgba(184, 213, 191, .16); border-radius: 11px; background: rgba(6, 18, 9, .82); box-shadow: 0 12px 34px rgba(0, 0, 0, .28); backdrop-filter: blur(10px); }
.universe-history[hidden] { display: none; }
.universe-history-head { display: flex; align-items: center; gap: 7px; padding: 0 3px 5px; color: #9FB0A3; font-size: 12px; }
.universe-history-head b { color: #D9E3DB; font-size: 12px; }
.universe-history-head span { color: #85968A; }
.universe-history-head button { margin-left: auto; padding: 1px 3px; border: 0; background: transparent; color: #9FB0A3; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }
.universe-history-list { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: thin; }
.universe-history-chip { display: inline-flex; flex: 0 0 auto; align-items: stretch; overflow: hidden; border: 1px solid rgba(181, 210, 188, .16); border-radius: 7px; background: rgba(20, 44, 28, .7); }
.universe-history-chip.active { border-color: rgba(222, 235, 225, .42); background: rgba(37, 72, 46, .9); box-shadow: 0 0 14px rgba(127, 190, 147, .13); }
.universe-history-chip[data-type="formula"] { border-left: 2px solid #E4CA54; }
.universe-history-chip[data-type="herb"] { border-left: 2px solid #74D3C1; }
.universe-history-chip[data-type="disease"] { border-left: 2px solid #DC82BD; }
.universe-history-focus, .universe-history-remove { border: 0; background: transparent; color: #C8D5CB; }
.universe-history-focus { max-width: 152px; padding: 6px 7px 6px 8px; overflow: hidden; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.universe-history-remove { width: 25px; padding: 0; border-left: 1px solid rgba(184, 213, 191, .11); color: #95A49A; font-size: 15px; line-height: 1; }
.universe-history-focus:hover, .universe-history-remove:hover { color: #FFFFFF; background: rgba(255,255,255,.05); }
.graph-controls { position: absolute; z-index: 9; right: 18px; bottom: 18px; display: grid; grid-template-columns: 38px 38px; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 23, 12, .85); box-shadow: 0 14px 32px rgba(0,0,0,.25); backdrop-filter: blur(8px); }
.graph-controls button { display: grid; place-items: center; width: 38px; height: 36px; padding: 0; border: 1px solid rgba(179, 204, 185, .13); border-radius: 6px; background: #102619; color: #C5D3C8; font-size: 17px; line-height: 1; }
.graph-hint { position: absolute; left: 50%; bottom: 16px; margin: 0; transform: translateX(-50%); color: rgba(157, 174, 161, .55); font-size: 12px; pointer-events: none; }
.graph-notice, .data-alert { position: absolute; z-index: 6; left: 50%; top: 20px; display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; transform: translateX(-50%); border: 1px solid rgba(210, 184, 107, .24); border-radius: 8px; background: rgba(17, 33, 21, .93); color: #D6DDCF; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.graph-notice b, .data-alert b { font-size: 12px; }
.graph-notice span, .data-alert span { color: #91A097; font-size: 12px; }
.data-alert { top: 50%; max-width: 480px; transform: translate(-50%, -50%); border-color: rgba(240, 149, 127, .35); }
.tooltip { position: fixed; z-index: 80; max-width: 220px; padding: 8px 10px; border: 1px solid rgba(185, 211, 191, .23); border-radius: 7px; background: rgba(10, 28, 15, .96); color: #E8EFEA; box-shadow: 0 12px 28px rgba(0,0,0,.45); pointer-events: none; }
.tooltip b { display: block; margin-bottom: 2px; font-size: 12px; }
.tooltip span { color: #91A097; font-size: 12px; line-height: 1.5; }

.detail-drawer { position: fixed; z-index: 40; top: 0; right: 0; width: min(var(--drawer-width), calc(100vw - var(--sidebar-width))); height: 100vh; height: 100dvh; overflow: hidden; transform: translateX(102%); border-left: 1px solid rgba(181, 209, 188, .18); background: rgba(12, 28, 16, .97); box-shadow: -24px 0 60px rgba(0,0,0,.42); transition: transform .24s ease; backdrop-filter: blur(14px); }
.detail-drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: 62px; padding: 12px 15px 8px 19px; border-bottom: 1px solid var(--line); }
.drawer-head .eyebrow { margin: 0; }
.drawer-content { height: calc(100% - 62px); overflow: auto; padding: 18px 19px 34px; }
.detail-title { margin: 0; font-size: 24px; letter-spacing: -.035em; }
.detail-hanja { display: block; margin-top: 3px; color: #A8B6AB; font-family: var(--han); font-size: 16px; font-weight: 500; letter-spacing: .04em; }
.badge-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 15px; }
.badge { padding: 4px 7px; border: 1px solid rgba(177, 204, 184, .16); border-radius: 4px; background: rgba(135, 164, 143, .07); color: #AEBEB1; font-size: 12px; }
.badge.warn { border-color: rgba(233, 178, 91, .24); color: #E4BC77; }
.badge.ok { border-color: rgba(96, 211, 146, .28); color: #78D9A0; }
.badge.muted { color: #77867A; }
.detail-note { margin: 0 0 14px; padding: 10px 11px; border-left: 2px solid rgba(230, 181, 79, .55); background: rgba(223, 174, 66, .06); color: #BEBDAE; font-size: 12px; line-height: 1.65; }
.detail-section { margin-top: 19px; padding-top: 15px; border-top: 1px solid var(--line); }
.detail-section h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; color: #D9E2DB; font-size: 12px; letter-spacing: .04em; }
.detail-section h3 small { color: #738078; font-size: 12px; font-weight: 500; }
.field-grid { display: grid; grid-template-columns: 92px 1fr; gap: 0; margin: 0; }
.field-grid dt, .field-grid dd { margin: 0; padding: 6px 0; border-bottom: 1px solid rgba(160, 187, 166, .07); font-size: 12px; line-height: 1.55; }
.field-grid dt { color: #85968A; }
.field-grid dd { color: #C2CEC4; overflow-wrap: break-word; }
.missing { color: #78857B !important; font-style: normal; }
.detail-select { width: 100%; min-height: 38px; padding: 6px 30px 6px 9px; border: 1px solid var(--line-strong); border-radius: 7px; background: #11251A; color: #DCE5DE; font-size: 12px; }
.evidence-note { margin: 7px 0 0; color: #829287; font-size: 12px; line-height: 1.55; }
.preparation-list { display: grid; gap: 6px; margin: 0; padding-left: 19px; }
.preparation-list li { padding-left: 3px; color: #BFCAC1; font-size: 12px; line-height: 1.5; }
.preparation-list small { display: block; margin-top: 2px; color: #85968A; font-family: var(--font); font-size: 12px; }
.ingredient-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ingredient-table th { padding: 5px 4px; border-bottom: 1px solid var(--line-strong); color: #708077; font-size: 12px; font-weight: 700; text-align: left; }
.ingredient-table td { padding: 7px 4px; border-bottom: 1px solid rgba(156, 182, 162, .07); color: #BFCBC1; font-size: 12px; line-height: 1.4; vertical-align: top; overflow-wrap: break-word; }
.ingredient-table td:first-child { width: 23px; color: #647168; }
.inline-node { padding: 0; border: 0; background: none; color: #AFCDB7; text-align: left; font-size: inherit; }
.raw-name { font-family: var(--han); color: #E1E6E2; }
.verification-mark { display: inline-grid; place-items: center; width: 13px; height: 13px; margin-left: 3px; border: 1px solid #6F7F73; border-radius: 50%; color: #718078; font-size: 12px; vertical-align: 1px; }
.mapping-badges { display: grid; gap: 6px; }
.mapping-card { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; min-height: 44px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(135, 165, 142, .035); }
.mapping-card .map-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; background: rgba(144, 174, 151, .08); color: #8FA093; font-size: 12px; }
.mapping-card b { display: block; color: #BBC8BE; font-size: 12px; }
.mapping-card small { display: block; margin-top: 2px; color: #829287; font-size: 12px; line-height: 1.4; }
.mapping-card em { color: #7F8B82; font-size: 12px; font-style: normal; }
.mapping-card.unavailable { background: rgba(112, 124, 115, .025); }
.mapping-card.unavailable .map-icon,
.mapping-card.unavailable b,
.mapping-card.unavailable em { color: #77837A; }
.evidence-layer-section { border-top-color: rgba(155, 191, 164, .16); }
.detail-zero-state { margin: 0; padding: 10px 11px; border: 1px dashed rgba(154, 182, 161, .16); border-radius: 7px; background: rgba(122, 148, 128, .025); color: #7E8C82; font-size: 12px; line-height: 1.65; }
.witness-link-list { display: grid; gap: 7px; margin-top: 9px; }
.witness-link-card { padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(136, 165, 143, .035); }
.witness-link-card > p { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 7px; color: #93A298; font-size: 12px; }
.witness-link-card > p b { color: #BAC7BD; font-size: 12px; }
.witness-link-card > p span { color: #758279; text-align: right; }
.witness-link-endpoints { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 6px; }
.witness-link-endpoints > i { align-self: center; color: #66756B; font-size: 12px; font-style: normal; }
.witness-link-button { display: grid; align-content: start; gap: 2px; min-width: 0; min-height: 62px; padding: 7px; border: 1px solid rgba(165, 195, 172, .12); border-radius: 6px; background: rgba(14, 35, 21, .75); color: #C9D4CB; text-align: left; }
.witness-link-button:hover { border-color: var(--line-strong); background: rgba(22, 48, 29, .82); }
.witness-link-button > span { color: #79877D; font-size: 12px; }
.witness-link-button b { overflow: hidden; font-family: var(--han); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.witness-link-button small { color: #748078; font-size: 12px; line-height: 1.45; overflow-wrap: break-word; }
.comparison-list { display: grid; gap: 6px; margin-top: 9px; }
.difference-row { display: grid; grid-template-columns: 65px 1fr; gap: 7px; padding: 7px 8px; border-radius: 6px; background: rgba(143, 172, 150, .055); font-size: 12px; line-height: 1.55; }
.difference-row b { color: #89998D; font-size: 12px; }
.difference-row.add span { color: #9DD6A9; }
.difference-row.remove span { color: #E69B8D; }
.difference-row.dose span { color: #E2C676; }
.difference-row.process span { color: #C99DDD; }
.difference-row.prep span { color: #81C9D0; }
.connection-list { display: grid; gap: 4px; }
.connection-button { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 7px 8px; border: 1px solid transparent; border-radius: 6px; background: rgba(136, 166, 143, .045); color: #C4D0C6; text-align: left; font-size: 12px; }
.connection-button:hover { border-color: var(--line-strong); }
.connection-button small { color: #718078; }
.passage { margin-bottom: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; }
.passage blockquote { margin: 0 0 7px; color: #D2DBD4; font-family: var(--han); font-size: 12px; line-height: 1.75; }
.passage p { margin: 0; color: #839087; font-size: 12px; line-height: 1.55; }
.passage cite { display: block; margin-top: 6px; color: #69766D; font-size: 12px; font-style: normal; }
.reverse-summary { margin: -3px 0 10px; color: #89978C; font-size: 12px; }
.reverse-summary b { color: #B7C4BA; }
.occurrence-list { display: grid; gap: 5px; }
.occurrence-card { padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: rgba(143, 171, 149, .035); }
.occurrence-card button { padding: 0; border: 0; background: none; color: #D3DDD5; font-size: 12px; }
.occurrence-card p { margin: 4px 0 0; color: #78867C; font-size: 12px; }

.scrim { display: none; }
.mobile-bar { display: none; }
.modal { width: min(720px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); max-height: min(760px, calc(100dvh - 32px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 12px; background: #0D1D12; color: var(--text); box-shadow: 0 28px 90px rgba(0,0,0,.66); }
.modal::backdrop { background: rgba(2, 9, 4, .76); backdrop-filter: blur(4px); }
.modal-shell { display: flex; flex-direction: column; max-height: min(760px, calc(100vh - 32px)); max-height: min(760px, calc(100dvh - 32px)); padding: 0; }
.modal header { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px 12px; border-bottom: 1px solid var(--line); }
.modal header .eyebrow { margin-bottom: 4px; }
.modal h2 { margin: 0; font-size: 18px; }
.modal-search { padding: 12px 14px 5px; }
.evidence-dialog-summary { margin: 0; padding: 11px 16px 0; color: #8E9D92; font-size: 12px; line-height: 1.65; }
.modal-search input, .trail-editor input, .trail-editor textarea { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: #102319; color: var(--text); }
.accessible-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; overflow: auto; padding: 10px 14px 18px; }
.list-group h3 { position: sticky; top: 0; margin: 0; padding: 8px 3px; background: #0D1D12; color: #8A9A8E; font-size: 12px; }
.list-group ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.list-item { width: 100%; min-height: 40px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: rgba(140, 168, 146, .035); text-align: left; }
.list-item b { display: block; color: #CCD7CE; font-size: 12px; }
.list-item small { display: block; color: #748178; font-family: var(--han); font-size: 12px; }
.list-item em { display: block; margin-top: 4px; color: #8EAC94; font-size: 12px; font-style: normal; line-height: 1.4; }
.trail-modal { width: min(600px, calc(100vw - 32px)); }
.trail-editor, .trail-library { overflow: auto; padding: 14px 16px 18px; }
.trail-editor label { display: grid; gap: 5px; margin-bottom: 11px; color: #89978D; font-size: 12px; }
.trail-editor textarea { resize: vertical; }
.modal-actions { display: flex; gap: 6px; justify-content: flex-end; }
.trail-library { display: grid; gap: 8px; }
.trail-card { padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: rgba(139, 168, 145, .04); }
.trail-card h3 { margin: 0 0 3px; font-size: 12px; }
.trail-card p { margin: 0 0 7px; color: #7F8D82; font-size: 12px; line-height: 1.5; }
.trail-card small { color: #68766C; font-size: 12px; }
.trail-card-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.empty-library { padding: 24px 10px; color: #76847A; text-align: center; font-size: 12px; }
.info-modal { width: min(660px, calc(100vw - 32px)); }
.info-dialog-content { overflow: auto; padding: 17px 18px 22px; color: #C7D2C9; font-size: 12px; line-height: 1.75; }
.info-dialog-content h3 { margin: 18px 0 6px; color: #E5ECE7; font-size: 12px; }
.info-dialog-content h3:first-child { margin-top: 0; }
.info-dialog-content p { margin: 6px 0; }
.info-dialog-content ul { margin: 7px 0; padding-left: 19px; }
.info-dialog-content code { padding: 2px 4px; border-radius: 4px; background: rgba(147, 178, 154, .10); color: #D5E1D8; font-size: 12px; }
.info-dialog-content a { color: #9FDBD0; text-underline-offset: 2px; }
.lineage-evidence-list { display: grid; gap: 9px; padding-left: 22px; }
.lineage-evidence-list li { padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; background: rgba(139, 171, 147, .035); }
.lineage-evidence-list li > b,
.lineage-evidence-list li > span,
.lineage-evidence-list li > small { display: block; }
.lineage-evidence-list li > span { color: #a6cdb5; }
.lineage-evidence-list li > small { margin-top: 3px; color: #8f9e93; }
.lineage-evidence-list .held-evidence { border-color: rgba(208, 183, 96, .35); }
.info-notice { padding: 9px 10px; border-left: 2px solid #D6BE2E; background: rgba(214, 190, 46, .06); color: #C7C7B5; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 24px; max-width: min(420px, calc(100vw - 24px)); padding: 9px 13px; transform: translate(-50%, 20px); border: 1px solid var(--line-strong); border-radius: 8px; background: #18321F; color: #E6EFE8; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 767px) {
  :root { --mobile-bar-height: calc(50px + env(safe-area-inset-top)); }
  .mobile-bar { position: fixed; z-index: 31; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: var(--mobile-bar-height); padding: calc(7px + env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) 7px max(9px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: rgba(8, 22, 12, .94); backdrop-filter: blur(10px); }
  .mobile-bar .icon-button { width: 44px; height: 44px; }
  .mobile-brand { display: flex; align-items: baseline; gap: 5px; }
  .mobile-brand img { align-self: center; width: 26px; height: 26px; margin-right: 2px; border-radius: 7px; }
  .mobile-brand b { font-size: 14px; }
  .mobile-brand span { color: #93A096; font-family: var(--han); font-size: 12px; }
  .app-shell { display: block; height: 100vh; height: 100dvh; }
  .sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; width: min(360px, 92vw); padding-top: env(safe-area-inset-top); transform: translateX(-103%); border-right-color: rgba(180, 211, 188, .22); box-shadow: 22px 0 58px rgba(0,0,0,.55); transition: transform .22s ease; }
  .sidebar-head { gap: 8px; padding-right: 14px; padding-left: 14px; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { display: grid; flex: 0 0 auto; }
  .search-wrap input { font-size: 16px; }
  .scrim { position: fixed; z-index: 45; inset: 0; border: 0; background: rgba(2, 8, 4, .64); }
  .scrim.open { display: block; }
  .graph-stage { width: 100vw; height: 100vh; height: 100dvh; }
  .graph-stage::before { opacity: .96; }
  .map-header { top: calc(var(--mobile-bar-height) + 9px); left: 10px; }
  .map-mode-switch { top: calc(var(--mobile-bar-height) + 8px); right: 9px; }
  .map-mode-switch button { min-width: 82px; min-height: 40px; padding: 5px 7px; }
  .map-mode-switch b { font-size: 12px; }
  .map-mode-switch small { font-size: 12px; }
  .map-header { max-width: calc(100vw - 190px); flex-wrap: wrap; }
  .graph-stage:has(.universe-history:not([hidden])) .map-header,
  .graph-stage:has(.universe-history:not([hidden])) .map-mode-switch { opacity: 0; pointer-events: none; }
  .universe-history { top: calc(var(--mobile-bar-height) + 8px); left: 9px; width: calc(100vw - 18px); transform: none; }
  .universe-history-head { padding-bottom: 4px; }
  .universe-history-focus { max-width: 126px; min-height: 44px; }
  .universe-history-remove { width: 44px; min-height: 44px; }
  .universe-card { left: 9px; bottom: max(82px, calc(env(safe-area-inset-bottom) + 72px)); width: calc(100vw - 18px); max-height: 62vh; }
  .graph-hint { display: none; }
  .graph-controls { right: max(9px, env(safe-area-inset-right)); bottom: max(11px, env(safe-area-inset-bottom)); grid-template-columns: 44px 44px; }
  .graph-controls button { width: 44px; height: 44px; }
  .detail-drawer { top: auto; bottom: 0; width: 100vw; height: 72vh; height: 72dvh; transform: translateY(103%); border-top: 1px solid rgba(182, 211, 189, .22); border-left: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -24px 60px rgba(0,0,0,.54); }
  .detail-drawer.open { transform: translateY(0); }
  .drawer-head { height: 49px; padding: 8px 11px 6px 15px; }
  .drawer-content { height: calc(100% - 49px); padding: 14px max(15px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(15px, env(safe-area-inset-left)); }
  .detail-title { font-size: 20px; }
  .detail-hanja { display: inline; margin-left: 6px; font-size: 13px; }
  .graph-notice { top: calc(var(--mobile-bar-height) + 8px); max-width: calc(100vw - 125px); }
  .accessible-list { grid-template-columns: 1fr; }
  .modal { width: calc(100vw - 18px); max-height: calc(100vh - 18px); max-height: calc(100dvh - 18px); }
  .modal-shell { max-height: calc(100vh - 18px); max-height: calc(100dvh - 18px); }
  .toast { bottom: max(12px, env(safe-area-inset-bottom)); }
}

@media (max-width: 360px) {
  .brand-lockup h1 { white-space: nowrap; font-size: clamp(17px, 6vw, 20px); }
  .brand-lockup { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; }
  .brand-lockup > img { width: 34px; height: 34px; }
  .search-wrap input { --placeholder-size: 12px; padding-right: 62px; }
  .search-wrap input::placeholder { letter-spacing: -.025em; }
  .audience-entry { grid-template-columns: 1fr; }
  .evidence-feature-list p { gap: 6px; padding-right: 6px; padding-left: 6px; }
  .universe-relation-row-head { flex-wrap: wrap; }
  .universe-relation-status { margin-left: auto; }
  .universe-relation-provenance dl { grid-template-columns: 1fr; }
  .universe-relation-provenance dt { padding-bottom: 0; }
  .field-grid { grid-template-columns: 1fr; }
  .field-grid dt { padding-bottom: 0; border-bottom: 0; }
  .mapping-card { grid-template-columns: 26px minmax(0, 1fr); }
  .mapping-card em { grid-column: 2; }
  .witness-link-endpoints { grid-template-columns: 1fr; }
  .witness-link-endpoints > i { justify-self: center; transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}