/* App-specific extensions on top of design-system.css (Industry tokens).
   Ported from the docs/design prototype's inline <style> block. */

body { margin: 0; }
/* :not(.btn) — 본문 링크만 액센트색으로 튜닝한다. .btn 클래스가 붙은
   <a>(신규등록/다운로드 등)까지 여기서 색을 덮어쓰면 .app-root a의
   특이성이 .btn-primary보다 높아서 파란 배경 위에 파란 글씨가 겹쳐
   텍스트가 안 보이는 버그가 생긴다 (실제로 발생했던 버그). */
.app-root a:not(.btn) { color: var(--color-accent); }
.app-root a:not(.btn):hover { color: var(--color-accent-700); }
.app-root ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.side-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-left: 3px solid transparent;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-family: var(--font-body); font-size: 14px; cursor: pointer; text-decoration: none;
}
.side-link:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.side-link.active { border-left-color: var(--color-accent); color: var(--color-text); font-weight: 500; }

.icon-btn-plain {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-md);
  border: 1px solid transparent; background: transparent; color: var(--color-text); cursor: pointer;
}
.icon-btn-plain:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); border-color: var(--color-divider); }

.graph-frame { position: relative; border: 1px solid var(--color-divider); background: var(--color-surface); overflow: visible; }
.graph-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.graph-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }

.zoom-controls {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 5;
  display: flex; gap: 2px; padding: 2px;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border: 1px solid var(--color-divider);
  backdrop-filter: blur(2px);
}
.zoom-controls .icon-btn-plain { width: 26px; height: 26px; }

.graph-marker {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-accent); border: 2px solid var(--color-bg);
  transform: translate(-50%, -50%); pointer-events: none;
}
.graph-marker.curve { background: var(--color-text); }
.graph-marker-label {
  position: absolute; font-size: 11px; font-family: var(--font-body); color: var(--color-text);
  transform: translate(-50%, -100%); white-space: nowrap; font-feature-settings: "tnum" 1;
  pointer-events: none;
}
.guide-line { position: absolute; background: var(--color-accent); opacity: 0.55; pointer-events: none; }
.guide-line-v { width: 1px; }
.guide-line-h { height: 1px; }
.guide-line.result { background: var(--color-accent-2); opacity: 0.8; }

.result-num { font-family: var(--font-heading); font-weight: 600; font-feature-settings: "tnum" 1; letter-spacing: 0.01em; }
.result-num.updated { animation: result-flash 400ms ease; }
@keyframes result-flash {
  0% { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
  100% { background: transparent; }
}

.step-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
input[type="file"].input { padding: var(--space-2); }

/* toast */
.toast-stack { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 60; display: flex; flex-direction: column; gap: var(--space-2); }
.toast {
  min-width: 240px; max-width: 360px; padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-md); font-size: 13px; display: flex; align-items: center; gap: var(--space-2);
  animation: toast-in 200ms ease;
}
.toast.success { border-color: var(--color-success); }
.toast.error { border-color: var(--color-error); }
@keyframes toast-in { from { transform: translateX(12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* help slide panel */
.help-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: 340px; max-width: 88vw;
  background: var(--color-bg); border-left: 1px solid var(--color-divider);
  box-shadow: var(--shadow-lg); z-index: 41; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 200ms ease;
}
.help-panel.open { transform: translateX(0); }
.help-backdrop {
  position: fixed; inset: 0; background: color-mix(in srgb, #000 35%, transparent); z-index: 40;
  display: none;
}
.help-backdrop.open { display: block; }

.step-indicator .tag { cursor: default; }

/* sidebar collapse */
/* 이전엔 base.html에서 width:208px를 인라인 스타일로 박아뒀는데, 인라인 스타일은
   외부 스타일시트의 어떤 선택자(#id.class 포함)보다도 우선순위가 높아서
   #app-sidebar.collapsed { width: 56px; }가 절대 못 이겼다 — 그래서 토글을
   눌러도 실제로 접히지 않는 버그가 있었다. 이제 기본 폭도 클래스로 뺐다. */
.app-sidebar { width: 208px; transition: width 150ms ease; }
#app-sidebar.collapsed { width: 56px; }
#app-sidebar.collapsed .side-label { display: none; }
#app-sidebar.collapsed > div:first-child { justify-content: center; }
#app-sidebar .icon-sidebar-collapsed { display: none; }
#app-sidebar.collapsed .icon-sidebar-expanded { display: none; }
#app-sidebar.collapsed .icon-sidebar-collapsed { display: block; }

/* 테마 토글 아이콘 — 라이트일 땐 달(눌러서 다크로), 다크일 땐 해(눌러서
   라이트로)를 보여준다. 예전엔 해 아이콘 하나만 박혀 있어 테마를 바꿔도
   버튼 모양이 그대로였다. */
.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }