/* Visual layer. Graph coordinates, camera scale and interaction targets stay in graph.css. */
:root { color: var(--color-text); background: var(--color-canvas); }
body { background: var(--color-canvas); -webkit-font-smoothing: antialiased; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { transition: background-color var(--duration-hover), border-color var(--duration-hover), color var(--duration-hover); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
summary:focus-visible, .node:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
::selection { background: var(--color-accent-soft); color: var(--color-text); }
.header {
  height: var(--header-height); padding: 0 var(--space-24); gap: var(--space-24);
  background: var(--color-canvas); border-bottom-color: transparent;
}
.brand { font: var(--font-brand); letter-spacing: -.6px; color: var(--color-text); }
.header-end { gap: var(--space-16); }
#save-status { font: var(--font-meta); color: var(--color-secondary); }
.canvas-actions { gap: var(--space-4); }
.canvas-actions button, .text-control {
  font: var(--font-control); padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-control); color: var(--color-secondary);
}
.canvas-actions button:hover, .text-control:hover, .more-menu[open] summary { background: var(--color-soft); }
.canvas-actions .add-control, .primary-button { background: var(--color-accent); color: var(--color-surface); }
.canvas-actions .add-control { padding: var(--space-8) var(--space-12); }
.canvas-actions .add-control:hover, .primary-button:hover { background: var(--color-accent); filter: brightness(.94); }
.primary-button { border-radius: var(--radius-control); font: var(--font-control); }
.more-menu { color: var(--color-secondary); }
.more-menu summary { border-radius: var(--radius-control); }
.more-menu>div { border-color: var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-panel); }
.more-menu button, .more-menu a { color: var(--color-secondary); font: var(--font-body); border-radius: var(--radius-control); }
.more-menu button:hover, .more-menu a:hover { background: var(--color-soft); }
#search-button { display: flex; align-items: center; gap: var(--space-8); }
#search-button svg, .search-heading svg { width: 16px; height: 16px; stroke-width: 1.5; }
.landing { height: calc(100dvh - var(--header-height)); background: var(--color-canvas); padding-bottom: 72px; }
.landing .eyebrow { font: var(--font-meta); color: var(--color-secondary); letter-spacing: 1.5px; text-transform: uppercase; }
.landing h1 { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.4; letter-spacing: -1.2px; font-weight: 500; margin: var(--space-24) 0; white-space: pre-line; }
.landing p { font: var(--font-body); color: var(--color-secondary); white-space: pre-line; margin-bottom: var(--space-32); }
.landing .primary-button { min-width: 0; padding: var(--space-12) var(--space-24); }
.landing .text-button { font: var(--font-body); color: var(--color-secondary); margin-top: var(--space-12); }
#canvas {
  height: calc(100dvh - var(--header-height)); background-color: var(--color-canvas);
  background-image: radial-gradient(color-mix(in srgb, var(--color-edge) 23%, transparent) .55px, transparent .55px);
  background-size: 24px 24px;
}
.node {
  padding: var(--space-16); border-radius: var(--radius-card); border-color: var(--color-border);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card);
  transition: border-color var(--duration-hover), box-shadow var(--duration-hover), opacity var(--duration-hover);
}
.node:hover { border-color: var(--color-hover); box-shadow: var(--shadow-hover); }
.node h2 { font: var(--font-title); letter-spacing: -.14px; margin: 0; }
.node time { font: var(--font-meta); color: var(--color-secondary); margin-top: var(--space-4); }
.node p {
  font: var(--font-body); color: var(--color-secondary); margin: var(--space-4) 0 0;
  -webkit-line-clamp: 1; padding-right: var(--space-8); white-space: normal;
}
.node-photo {
  width: calc(100% + 32px); margin: -16px -16px var(--space-12);
  border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
  aspect-ratio: 16/10; height: auto; object-fit: cover;
}
.node.selected, .node.search-found { background: var(--color-surface); border-color: var(--color-accent); box-shadow: var(--selection-ring), var(--shadow-card); }
.node-ellipsis { color: var(--color-secondary); font-size: 16px; width: 24px; height: 20px; right: 4px; bottom: 0; padding: 0; }
.node-link { color: var(--color-accent); border-color: var(--color-border); margin-top: var(--space-8); padding-top: var(--space-8); font: var(--font-meta); }
.node.dimmed { opacity: .2; }
#canvas[data-detail=compact] .node h2 { font-weight: 500; }
#canvas[data-detail=overview] .node { box-shadow: var(--shadow-card); border-width: max(1px, calc(.6px / var(--zoom))); }
#canvas[data-detail=overview] .node.selected { box-shadow: 0 0 0 calc(2px / var(--zoom)) rgb(82 106 83 / 9%); }
#canvas[data-detail=overview] .node time { color: var(--color-secondary); }
#canvas[data-view=year] .node p { -webkit-line-clamp: 1; }
.handle, .node:hover .handle, .node.selected .handle, .node:focus-within .handle, .connecting .handle {
  width: max(24px, calc(24px / var(--zoom))); height: max(24px, calc(24px / var(--zoom)));
  border: 0; background: transparent; box-shadow: none;
}
.handle::after { display: none; }
.handle::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: max(6px, calc(6px / var(--zoom))); height: max(6px, calc(6px / var(--zoom)));
  border-radius: 50%; transform: translate(-50%,-50%); background: var(--color-accent);
  transition: width var(--duration-hover), height var(--duration-hover), box-shadow var(--duration-hover);
}
.handle.snap-target { background: transparent; box-shadow: none; transform: translate(-50%,-50%); }
.handle.snap-target::before { width: max(8px, calc(8px / var(--zoom))); height: max(8px, calc(8px / var(--zoom))); box-shadow: 0 0 0 calc(4px / var(--zoom)) rgb(82 106 83 / 10%); }
/* Bias the invisible target outward so overview titles remain clickable. */
.handle.top, .handle.top.snap-target { transform: translate(-50%,-75%); }
.handle.top::before { top: 75%; }
.handle.bottom, .handle.bottom.snap-target { transform: translate(-50%,-25%); }
.handle.bottom::before { top: 25%; }
.handle.left, .handle.left.snap-target { transform: translate(-75%,-50%); }
.handle.left::before { left: 75%; }
.handle.right, .handle.right.snap-target { transform: translate(-25%,-50%); }
.handle.right::before { left: 25%; }
.edge { stroke: var(--color-edge); opacity: .45; }
.edge.related, .edge.selected { stroke: var(--color-accent); opacity: .8; }
.edge.faded { opacity: .1; }
.edge-endpoint { fill: var(--color-surface); stroke: var(--color-accent); }
.preview-edge, .preview-edge.snapped { stroke: var(--color-accent); }
.timeline-line { border-color: var(--color-border); }
.year-marker, .year-marker.now { background: var(--color-canvas); color: var(--color-secondary); font-weight: 500; border-radius: var(--radius-control); }
.year-marker.now { color: var(--color-accent); }
.year-marker:hover, .year-marker[aria-pressed=true] { background: var(--color-accent-soft); color: var(--color-accent); }
.month-marker { color: var(--color-secondary); opacity: .75; }
.view-navigation { top: 20px; left: var(--space-24); gap: var(--space-12); color: var(--color-secondary); }
.view-navigation button { border-color: transparent; background: var(--color-canvas); color: var(--color-secondary); border-radius: var(--radius-control); }
.view-navigation button[aria-current=true] { background: var(--color-soft); color: var(--color-accent); }
.view-navigation button:hover { background: var(--color-accent-soft); border-color: transparent; }
#year-focus-label, #view-guide, .view-navigation #previous-year, .view-navigation #next-year { background: var(--color-canvas); color: var(--color-secondary); }
#year-focus-label { color: var(--color-accent); }
.connection-indicator { background: var(--color-canvas); border-color: var(--color-border); color: var(--color-secondary); border-radius: var(--radius-control); }
.connection-indicator small { color: var(--color-secondary); }
.connection-indicator:hover { background: var(--color-accent-soft); border-color: var(--color-hover); }
.empty-hint p { font: var(--font-body); color: var(--color-secondary); }
.empty-hint button { border-color: var(--color-border); color: var(--color-accent); border-radius: var(--radius-control); background: var(--color-surface); }
.interaction-hint { background: var(--color-canvas); color: var(--color-secondary); font: var(--font-meta); }
.interaction-hint button { color: var(--color-secondary); }
.zoom-controls { background: var(--color-surface); border-color: var(--color-border); border-radius: var(--radius-control); box-shadow: var(--shadow-card); }
.zoom-controls output { font: var(--font-meta); color: var(--color-secondary); }
.zoom-controls>span { background: var(--color-border); }
.zoom-controls button { color: var(--color-secondary); }
.zoom-controls button:hover { background: var(--color-soft); }
.selection-bar { background: var(--color-surface); border-color: var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-hover); }
.selection-bar>span { color: var(--color-text); }
.selection-bar button { background: var(--color-soft); color: var(--color-secondary); border-radius: var(--radius-control); }
.selection-bar button[aria-pressed=true] { background: var(--color-accent); color: var(--color-surface); }
.toast { background: var(--color-text); border-radius: var(--radius-control); box-shadow: var(--shadow-panel); }
.toast button { color: var(--color-surface); border-color: var(--color-hover); }
.composer, .record-detail, #search-dialog {
  background: var(--color-surface); color: var(--color-text); border-color: var(--color-border);
  border-radius: var(--radius-panel); box-shadow: var(--shadow-panel);
}
.composer { padding: var(--space-16); }
.composer-heading { margin-bottom: var(--space-8); }
.composer-heading h2 { font: var(--font-meta); color: var(--color-secondary); }
.composer-heading button, #close-search, .record-detail>header button { color: var(--color-secondary); min-width: 28px; min-height: 28px; }
.composer textarea { min-height: 76px; font: 400 14px/1.65 'Noto Sans KR',sans-serif; color: var(--color-text); background: var(--color-surface); padding: var(--space-8) 0; }
.composer textarea::placeholder { color: var(--color-muted); font-size: 14px; }
.composer-options { border-color: var(--color-border); gap: var(--space-8); padding-top: var(--space-8); }
.composer-options button { border-radius: var(--radius-control); color: var(--color-secondary); padding: var(--space-8); }
.composer-options button:hover, .composer-options button[aria-expanded=true] { background: var(--color-soft); }
.composer label { color: var(--color-secondary); }
.composer input { color: var(--color-text); background: var(--color-canvas); border-color: var(--color-border); border-radius: var(--radius-control); }
.composer input::placeholder { color: var(--color-muted); }
.composer footer { margin-top: var(--space-12); }
.composer footer small { color: var(--color-secondary); font-size: 9px; }
.record-detail { top: calc(var(--header-height) + 20px); }
.record-detail>header { color: var(--color-secondary); border-color: var(--color-border); padding: var(--space-12) var(--space-24); font: var(--font-meta); }
.detail-content { padding: var(--space-24); }
.detail-content h2 { color: var(--color-text); font-size: 24px; line-height: 1.5; letter-spacing: -.24px; }
.detail-content time { font: var(--font-meta); color: var(--color-secondary); margin-top: var(--space-8); }
#detail-photo { border-radius: var(--radius-control); background: var(--color-canvas); margin-top: var(--space-24); }
#detail-body { color: var(--color-secondary); font-size: 13px; line-height: 1.9; margin-top: var(--space-24); }
#detail-link { color: var(--color-accent); border-color: var(--color-border); }
.record-detail>footer { padding: var(--space-16) var(--space-24); border-color: var(--color-border); }
#detail-edit { background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-secondary); font: var(--font-control); }
#detail-edit:hover { background: var(--color-soft); }
#search-dialog { width: 500px; }
#search-dialog::backdrop { background: rgb(48 54 48 / 12%); backdrop-filter: none; }
.search-heading { padding: var(--space-16); gap: var(--space-12); border-color: var(--color-border); color: var(--color-secondary); }
#search-input { font-size: 14px; color: var(--color-text); }
#search-input::placeholder { color: var(--color-muted); }
.search-result { color: var(--color-text); background: var(--color-surface); border-radius: var(--radius-control); padding: var(--space-12); }
.search-result[aria-selected=true], .search-result:hover { background: var(--color-accent-soft); border-color: transparent; }
.search-result strong { font: var(--font-title); }
.search-result small, .search-result p, #search-empty { color: var(--color-secondary); }
.search-result.year-result { border-bottom-color: var(--color-border); }
.year-result strong { color: var(--color-accent); }
#search-dialog footer { color: var(--color-secondary); border-color: var(--color-border); padding: var(--space-12) var(--space-16); }
@keyframes panel-enter { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes sheet-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.record-detail:not([hidden]) { animation: panel-enter var(--duration-panel) var(--ease-calm); }
@media(min-width:701px) {
  .record-detail { width: min(360px,33vw); }
  .detail-open .zoom-controls { right: calc(min(360px,33vw) + 40px); }
}
@media(max-width:700px) {
  :root { --header-height: 60px; }
  .header { padding: 0 var(--space-16); gap: var(--space-8); }
  .header-end { gap: var(--space-4); }
  .brand { font-size: 20px; }
  .canvas-actions { gap: 0; }
  .canvas-actions button { min-height: 36px; padding: var(--space-8); font-size: 11px; }
  .canvas-actions .add-control { padding: var(--space-8); }
  #search-button { min-width: 36px; justify-content: center; }
  #search-button span { display: none; }
  #save-status { top: 72px; font-size: 9px; background: var(--color-canvas); color: var(--color-secondary); }
  .landing { padding: var(--space-24) var(--space-24) 64px; }
  .landing h1 { font-size: 30px; line-height: 1.5; letter-spacing: -.9px; }
  .landing p { max-width: 310px; }
  .view-navigation { top: 16px; left: var(--space-12); gap: var(--space-4); }
  .record-detail { top: auto; border-radius: var(--radius-panel); }
  .record-detail:not([hidden]) { animation-name: sheet-enter; }
  .record-detail>header { padding: var(--space-8) var(--space-16); }
  .detail-content { padding: var(--space-16) var(--space-24); }
  .detail-content h2 { font-size: 22px; }
  .record-detail>footer { padding: var(--space-12) var(--space-24); }
  .composer textarea { font-size: 16px; }
  .composer textarea::placeholder { font-size: 14px; }
  .zoom-controls button { width: 36px; height: 36px; }
  .text-control { padding: var(--space-4); font-size: 10px; }
}
@media(max-width:390px) { .header { padding: 0 var(--space-12); } .canvas-actions button { padding: 8px 6px; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none!important; transition: none!important; } }