/* web/static/app.css — 앱(/app/) 전용 추가 스타일 (P9-2 → R7A, §4.11.2)
   tokens.css + /static/style.css 공용 위에 얹는 1파일 — 외부 CDN·프레임워크 금지
   (폰트·토큰은 tokens.css 공유).
   정제 핀테크 라이트: 콘텐츠 사이트와 같은 지면(쿨 뉴트럴·흰 카드 서피스·인디고
   액센트·Pretendard 단일)이되 더 조밀한 도구 지면 — 숫자는 tabular, 헤어라인 보더.
   감사 반영(DESIGN_AUDIT_20260708.md): 표 12.5px+ · 12px 미만 텍스트 금지(11.5px 하한은
   보조 라벨만) · 컨트롤·버튼 터치 타깃 확보 · 포커스 대비 보강. 모바일 퍼스트. */

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

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

.app-title { margin: var(--space-6) 0 var(--space-1); font-size: 24px; }
.app-section-title { margin-top: 30px; }

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

/* ── 스크리너 컨트롤 — 시세 단말 패널: 조밀하되 터치 타깃 확보 ── */
.scr-controls {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin: var(--space-4) 0 var(--space-2); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  background: var(--surface); 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: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--sub);
}
/* R3: 체크박스 라벨을 44px 유효 터치 타깃으로 (선언치 34px → 44px). */
.scr-controls label {
  display: inline-flex; align-items: center; gap: 4px;
  margin-right: 10px; min-height: 44px; white-space: nowrap;
}
.scr-controls input[type="checkbox"] {
  width: 20px; height: 20px; accent-color: var(--accent);
}
/* R3: 입력 폰트를 16px 로 (iOS 포커스 강제 줌 제거). 컨트롤 크롬이 커지지
   않도록 세로 패딩을 줄여 컴팩트 높이 유지. */
.scr-controls input[type="number"],
.scr-controls input[type="search"],
.scr-controls select {
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line);
  min-height: 40px; padding: 2px 8px;
}
.scr-controls input[type="number"]:focus-visible,
.scr-controls input[type="search"]:focus-visible,
.scr-controls select:focus-visible { border-color: var(--accent); }
.scr-controls input[type="number"] { width: 76px; }
.scr-controls input[type="search"] { width: 200px; max-width: 100%; }
.ctl-hint { color: var(--sub); font-size: 11.5px; }

/* R3: 필터 패널 접기 — 모바일 기본 접힘(JS 가 matchMedia 로 open 초기값 설정),
   데스크톱 기본 열림. summary 는 44px 터치 타깃. */
.scr-filters { border: 0; margin: 0; padding: 0; }
.scr-filters-summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 4px 2px; cursor: pointer;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--sub);
  list-style: none;
}
.scr-filters-summary::-webkit-details-marker { display: none; }
.scr-filters-summary::before {
  content: ""; width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 0.12s;
}
.scr-filters[open] > .scr-filters-summary::before { transform: rotate(90deg); }
.scr-filters-summary:hover { color: var(--ink); }
.scr-filters-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scr-filters-count { color: var(--accent); font-weight: 700; }
.scr-filters-body {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 8px;
}

/* R3: 활성 필터 칩 — 기본 프리셋과 다른 필터를 요약, 각 칩 눌러 해제. */
.scr-chips {
  list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0 2px; padding: 0;
}
.scr-chips button {
  font: inherit; font-size: 12px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  min-height: 32px; display: inline-flex; align-items: center; gap: 5px;
  padding: 0 10px; cursor: pointer; white-space: nowrap;
}
.scr-chips button:hover { border-color: var(--accent); color: var(--accent); }
.scr-chips button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scr-chips .scr-chip-x { color: var(--sub); font-variant-numeric: tabular-nums; }
.scr-chips .scr-chip-clear-all { color: var(--sub); }

.scr-count {
  margin: 6px 0; font-size: 12.5px; color: var(--sub);
  font-variant-numeric: tabular-nums;
}
.scr-load-more {
  display: block; margin: 16px auto 0; min-height: 44px; padding: 8px 24px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: inherit; cursor: pointer;
}
.scr-load-more:hover { border-color: var(--accent); color: var(--accent); }
.scr-load-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scr-load-more[hidden] { display: none; }

/* ── 스크리너 표 — firm-table 위에 한 단계 더 조밀하게 (감사: 12.5px 하한) ── */
.scr-table { font-size: 12.5px; }
.scr-table td { white-space: nowrap; }
/* [R7H] '카드' 컬럼 → '최신 이벤트' 개명 + 폭 대폭 축소 (300px -> 18ch) —
   가운데 컬럼이 대부분 빈 공간으로 비치던 문제 해소. 전체 제목은 title
   툴팁(호버·포커스 시 아래에서 펼침)과 행 펼침 상세로 접근 가능해 정보
   손실 없음. */
.scr-table .scr-card { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 잘린 카드 제목 — 호버·키보드 포커스 시 전체 노출 (P10-9c [TPL];
   전체 텍스트는 DOM 에 그대로 있고 링크가 카드 페이지 원제로 연결) */
.scr-table .scr-card:hover, .scr-table .scr-card:focus-within {
  white-space: normal; overflow: visible; text-overflow: clip;
}
.scr-ticker {
  color: var(--sub); font-size: 11.5px; margin-left: 4px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
/* [P22-10] 가지 요약 — 롤업 행 안의 접힘 상세. summary 는 한 줄 요약,
   펼치면 가지별 방향·티어 리스트 (bid 는 내부 코드 → 호버로만 카테고리 전문). */
.scr-branches { display: inline-block; }
.scr-branches > summary {
  cursor: pointer; white-space: nowrap; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.scr-branches > summary:hover { color: var(--accent); }
.scr-branch-list {
  list-style: none; margin: 4px 0 0; padding: 0;
  font-size: 11.5px; color: var(--sub); white-space: normal;
}
.scr-branch-list li { padding: 1px 0; }
.scr-branch-bid {
  font-family: var(--mono); border-bottom: 1px dotted var(--line); cursor: help;
}
.scr-c, .scr-excess, .d0-cell { font-variant-numeric: tabular-nums; }
.scr-bf {
  margin-left: 6px; cursor: help; font-size: 11px; color: var(--sub);
  background: var(--panel); border-radius: var(--radius-pill); padding: 0 6px;
}

/* [P22-10] 스크리너 내 탭 — 관심 종목을 스크리너 하위 탭으로 유지 */
.scr-tabs { display: flex; gap: 14px; margin: var(--space-1) 0 var(--space-3); font-size: 13.5px; }
.scr-tabs a { text-decoration: none; color: var(--sub); padding-bottom: 3px; }
.scr-tabs a:hover { color: var(--ink); }
.scr-tabs a.is-active {
  color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--accent);
}

/* ── 투데이 — 피드보다 조밀한 목록 ── */
.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-size: 16.5px; font-weight: 700; line-height: 1.42; }
.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-size: 15.5px; font-weight: 700; 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: 11.5px; color: var(--sub); background: var(--panel); border-radius: var(--radius-pill); padding: 0 8px; }
.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) ── */
/* R3: 워치리스트 검색 폰트 16px (iOS 포커스 강제 줌 제거). */
.wl-search input[type="search"] {
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line);
  min-height: 44px; padding: 6px 12px; width: 100%; max-width: 340px;
}
.wl-search input[type="search"]:focus-visible { border-color: var(--accent); }
.wl-results { list-style: none; padding: 0; margin: 8px 0 0; }
.wl-result {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px;
}
.wl-added { color: var(--sub); font-size: 11.5px; }
/* R3: 버튼 터치 타깃 44px (선언치 38px → 44px). */
.wl-add-btn, .wl-remove-btn, .wl-io button {
  font: inherit; font-size: 12.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 14px; 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); }
/* [R7D] 관심 종목 -- 그룹 토글 (관심/보유 로컬 분류, 사실 표시) */
.wl-group-btn {
  font: inherit; font-size: 12.5px; color: var(--sub);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 12px; cursor: pointer;
}
.wl-group-btn:hover { border-color: var(--accent); color: var(--accent); }
.wl-group-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.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-size: 16px; font-weight: 700; 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-thesis-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0;
}
.wl-thesis-actions a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); font-size: 12.5px; text-decoration: none;
}
.wl-thesis-actions a:hover { border-color: var(--accent); color: var(--accent); }
.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: 12.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 14px; 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: 3px; }
.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;
}
/* R3: 제거 후 되돌리기 버튼 — 상태 줄 안 인라인 (터치 타깃). */
.wl-status {
  margin: 6px 0 0; font-size: 12.5px; color: var(--sub);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.wl-undo-btn {
  font: inherit; font-size: 12.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  min-height: 32px; display: inline-flex; align-items: center;
  padding: 0 12px; cursor: pointer;
}
.wl-undo-btn:hover { border-color: var(--accent); color: var(--accent); }
.wl-undo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* [R6C-3] 카드 열 dedupe — 반복 카드 행의 링크 마커 (dim, 보조 표시) */
.scr-card-repeat { color: var(--sub); font-size: 11px; text-decoration: none; }
.scr-card-repeat:hover { color: var(--accent); }

/* [R6C-1] 스크리너 th 정렬 버튼 — 클릭 정렬 힌트 + aria-sort 연동 */
.scr-th-sort {
  cursor: pointer; user-select: none; position: relative;
}
.scr-th-sort:hover { color: var(--accent); }
.scr-th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 활성 정렬 컬럼 — 잉크색 유지 (R6.6 가드레일: 빨강/초록 금지; 앰버 방향 글리프) */
.scr-th-active { color: var(--ink); }
.scr-th-active .th-sort-glyph { color: var(--ink); }

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