/* web/static/app.css — 앱(/app/) 전용 추가 스타일 (P9-2, §4.11.2)
   /static/style.css 공용 위에 얹는 1파일 — 외부 CDN·웹폰트·프레임워크 금지.
   방향: 콘텐츠 사이트와 같은 계열(웜 오프화이트·니어블랙·딥 앰버·명조 표제)이되
   더 조밀한 도구 지면 — 시세 단말처럼 숫자는 tabular, 괘선은 헤어라인. 모바일 퍼스트. */

/* ── 앱 셸 — 스크리너 표를 위해 지면을 넓게 ── */
.app-header { max-width: 1120px; }
.app-main { max-width: 1120px; margin: 0 auto; padding: 0 16px 56px; }
.app-footer { max-width: 1120px; }

.site-header nav a.is-active {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

.app-title { margin: 22px 0 4px; font-size: 23px; }
.app-section-title { margin-top: 26px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 오류 문구 — 레이아웃 유지 (fetch 실패 시 JS 가 unhide) ── */
.app-error {
  padding: 8px 12px; background: var(--panel);
  border-left: 3px solid var(--accent); color: var(--sub); font-size: 13.5px;
}

/* ── 스크리너 컨트롤 — 시세 단말 패널: 조밀, 헤어라인 구획 ── */
.scr-controls {
  display: flex; flex-wrap: wrap; gap: 12px 22px;
  margin: 14px 0 8px; padding: 10px 14px 12px;
  border: 1px solid var(--line); border-top: 2px solid var(--rule);
  background: var(--panel); font-size: 13px;
}
.scr-controls fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.scr-controls legend {
  padding: 0; margin: 0 0 3px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--sub);
}
.scr-controls label { margin-right: 10px; white-space: nowrap; }
.scr-controls input[type="checkbox"] { accent-color: var(--accent); }
.scr-controls input[type="number"],
.scr-controls input[type="search"],
.scr-controls select {
  font: inherit; font-size: 13px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line);
  padding: 2px 6px;
}
.scr-controls input[type="number"] { width: 64px; }
.scr-controls input[type="search"] { width: 150px; }
.ctl-hint { color: var(--sub); font-size: 11px; }

.scr-count {
  margin: 6px 0; font-size: 12.5px; color: var(--sub);
  font-variant-numeric: tabular-nums;
}

/* ── 스크리너 표 — firm-table 위에 한 단계 더 조밀하게 ── */
.scr-table { font-size: 12px; }
.scr-table td { white-space: nowrap; }
.scr-table .scr-card { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.scr-ticker {
  color: var(--sub); font-size: 10.5px; margin-left: 4px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.scr-branch span { border-bottom: 1px dotted var(--line); cursor: help; }
.scr-tier { font-family: var(--mono); font-size: 11px; color: var(--sub); }
.scr-c, .scr-excess, .d0-cell { font-variant-numeric: tabular-nums; }
.scr-bf { margin-left: 5px; cursor: help; }

/* ── 투데이 — 피드보다 조밀한 목록 ── */
.today-list { list-style: none; padding: 0; margin: 8px 0 0; }
.today-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.today-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.today-title { margin: 6px 0 2px; font-family: var(--serif); font-size: 16px; line-height: 1.4; }
.today-title a { text-decoration: none; color: var(--ink); }
.today-title a:hover { color: var(--accent); }
.today-counts { margin: 0; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }

/* ── 투데이 P9-3: 조용→가속 하이라이트 · 워치리스트 요약 ── */
.hl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
.hl-head a { font-family: var(--serif); font-size: 15px; text-decoration: none; color: var(--ink); }
.hl-head a:hover { color: var(--accent); }
.hl-c { font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12px; }
.hl-tier { font-size: 11px; color: var(--sub); border: 1px solid var(--line); padding: 0 5px; }
.hl-card { margin: 4px 0 0; font-size: 13px; }
.hl-card a { color: var(--sub); }
.watch-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.watch-counts { font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
.empty-note { color: var(--sub); font-size: 13px; }

/* ── 워치리스트 페이지 (P9-3) ── */
.wl-search input[type="search"] {
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line);
  padding: 6px 10px; width: 100%; max-width: 340px;
}
.wl-results { list-style: none; padding: 0; margin: 8px 0 0; }
.wl-result {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px;
}
.wl-added { color: var(--sub); font-size: 11.5px; }
.wl-add-btn, .wl-remove-btn, .wl-io button {
  font: inherit; font-size: 12px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line);
  padding: 2px 10px; cursor: pointer;
}
.wl-add-btn:hover, .wl-io button:hover { border-color: var(--accent); color: var(--accent); }
.wl-remove-btn { margin-left: auto; color: var(--sub); }
.wl-remove-btn:hover { border-color: var(--accent); color: var(--accent); }
.wl-list { list-style: none; padding: 0; margin: 8px 0 0; }
.wl-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.wl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
.wl-head a { font-family: var(--serif); font-size: 15.5px; text-decoration: none; color: var(--ink); }
.wl-head a:hover { color: var(--accent); }
.wl-counts { margin: 3px 0 0; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
.wl-card { margin: 3px 0 0; font-size: 13px; }
.wl-card a { color: var(--sub); }
.wl-io { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0 0; }
/* 가져오기 = 버튼처럼 (P10-7) — 브라우저 기본 파일 입력의 영문 문구 숨김,
   입력 자체는 시각적 은닉만 (키보드 포커스 유지) */
.wl-import-label {
  font: inherit; font-size: 12px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line);
  padding: 2px 10px; cursor: pointer;
}
.wl-import-label:hover { border-color: var(--accent); color: var(--accent); }
.wl-import-label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.wl-import-label input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wl-status { margin: 6px 0 0; font-size: 12.5px; color: var(--sub); }

/* ── 데스크톱 ── */
@media (min-width: 720px) {
  .scr-controls { gap: 12px 30px; }
  .scr-table { font-size: 12.5px; }
}