/* 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: 22px; }
.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: 13px;
}

/* ── 스크리너 컨트롤 — 시세 단말 패널: 조밀하되 터치 타깃 확보 ── */
.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);
  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: 11px; 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: 11px; }

/* 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: 12px; 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: 12px; }
.scr-table td { white-space: nowrap; }
/* [R7H] '카드' 컬럼 → '최신 이벤트' 개명 + 폭 대폭 축소 (300px -> 18ch) —
   가운데 컬럼이 대부분 빈 공간으로 비치던 문제 해소.
   [모바일 감사 2026-09-10 P0-1] 이 절단을 드러내는 경로가 :hover/:focus-within
   뿐이라 "title 툴팁 + 행 펼침으로 정보 손실 없음" 은 포인터 입력에서만 참이었다
   — 터치에서는 셀이 <a> 라 탭하면 드러나는 대신 이동하고, 행 펼침(.scr-branches)
   은 경로·티어 목록이지 제목이 아니어서 반증됐다. 실제 수리는 파일 끝의
   `@media (max-width: 719px)` + `@media (hover: none)` — 터치 폭·터치 입력
   양쪽에서 절단 자체를 없앤다(전문 줄바꿈). */
.scr-table .scr-card { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 잘린 카드 제목 — 호버·키보드 포커스 시 전체 노출 (P10-9c [TPL];
   전체 텍스트는 DOM 에 그대로 있고 링크가 카드 페이지 원제로 연결).
   719px 이하이거나 hover 없는 입력(터치)에서는 파일 끝의 미디어 쿼리가
   기본 상태부터 이미 절단을 없애므로 이 규칙은 그 조건에서 무효과(no-op)
   — 데스크톱 마우스/트랙패드 전용. */
.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: 11px; 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: 11px; 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-sm); padding: 0 6px;
}

/* [P22-10] 스크리너 내 탭 — 관심 종목을 스크리너 하위 탭으로 유지 */
.scr-tabs { display: flex; gap: 14px; margin: var(--space-1) 0 var(--space-3); font-size: 13px; }
.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(--ink);
}

/* ── 투데이 — 피드보다 조밀한 목록 ── */
.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: 17px; 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: 16px; 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: 11px; color: var(--sub); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); 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; }
/* [표정 2026-09-07] style.css .empty-note 와 같은 이유로 행간·측정 폭만 연다
   (앱 스코프는 13px 유지 — 이 면의 본문 크기 규약이다). */
.empty-note {
  color: var(--sub); font-size: 13px; line-height: 1.7;
  max-width: 46ch; text-wrap: pretty;
}

/* ── 워치리스트 페이지 (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: 13px;
}
.wl-added { color: var(--sub); font-size: 11px; }
/* R3: 버튼 터치 타깃 44px (선언치 38px → 44px). */
.wl-add-btn, .wl-remove-btn, .wl-io button {
  font: inherit; font-size: 12px; 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: 12px; 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: 12px; 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: 12px; 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: 12px; color: var(--sub);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.wl-undo-btn {
  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;
  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; }
}

/* ── 모바일(≤719px) — 스크리너 표를 행 카드로 접는다 (M-1, 모바일 감사
   2026-09-10 P0-1 + P1-1). 경계값은 감사 원안의 640 이 아니라 719 —
   위 `@media (min-width: 720px)` 이 이 파일의 기존 데스크톱 경계이고, 지시문은
   "모바일(≤720px)" 을 명시했다. 719 로 잡아야 그 경계의 정확한 여집합이 되어
   641-719px 사이(폰 가로 모드 등)에 카드화가 안 걸리는 틈이 생기지 않는다.
   데스크톱 표 레이아웃(위 규칙 전부)은 그대로 두고, 좁은 화면에서만 <tr>/<td>
   를 블록으로 펼쳐 세로 카드로 만든다. 열 헤더(thead)는 숨긴다 — 각 셀
   문장이 이미 self-describing 하다(screener.mjs 가 strings.json 서술형
   템플릿으로 채운다: "68% · 급상승", "▲ 3.21%p", "3개 가지 · 수혜 2",
   "5일 경과" 등 — 별도 라벨 없이도 무슨 값인지 읽힌다). 가로 스크롤 래퍼
   (.table-wrap, style.css:1073)는 건드리지 않는다 — 표 자체가 뷰포트 폭에
   맞춰지면 scrollWidth 가 자연히 clientWidth 이하로 떨어진다(오라클 3).
   셀렉터를 전부 .scr-table 로 좁혀 .firm-table 을 공유하는 다른 표
   (카드 부록·트랙레코드)는 영향 없다.
   사보타주 확인: 이 블록을 통째로 지우면 위 P0-1 주석이 가리키는 hover 전용
   해제 경로로 되돌아가 오라클 1·2가 다시 red — 즉 이 블록이 실제로 그 결과를
   낸다(아무 일도 안 하는 상수가 아니다). */
@media (max-width: 719px) {
  .scr-table { font-size: 13px; }
  .scr-table thead { display: none; }
  .scr-table, .scr-table tbody, .scr-table tr { display: block; width: 100%; }
  .scr-table tr {
    border-bottom: 1px solid var(--line); padding: 10px 0;
  }
  .scr-table tr:first-child { border-top: 1px solid var(--line); }
  .scr-table td {
    display: block; width: 100%; border: 0; padding: 2px 0;
    white-space: normal;
  }
  .scr-table .firm-name { white-space: normal; font-size: 15px; }
  /* P0-1 수리 핵심 — 18ch 절단 + :hover 전용 해제를 여기서 무효화. 기본
     상태부터 줄바꿈으로 전문을 노출한다(터치 입력에는 hover 자체가 없다). */
  .scr-table .scr-card {
    max-width: none; overflow: visible; white-space: normal;
    text-overflow: clip; font-weight: 600; margin: 1px 0;
  }
}

/* [모바일 감사 2026-09-10 P0-1] 720px 이상에서도 터치 입력(태블릿 등)은
   :hover 를 발생시키지 않는다 — 위 카드화 폭 바깥에서도 P0-1 이 재현되면
   안 된다는 지시("어떤 뷰포트·입력 방식에서도 재현 불가")를 satisfy 하려면
   폭이 아니라 입력 방식으로 한 번 더 걸어야 한다. `(hover: none)` 은
   panel.css:511-527(`(any-pointer: coarse)`)와 같은 계열의 터치 폴백
   패턴 — 이 리포에서 이미 검증된 접근이다. */
@media (hover: none) {
  .scr-table .scr-card {
    max-width: none; overflow: visible; white-space: normal;
    text-overflow: clip;
  }
}

/* ── M-6 활자 하한 토큰화 (2026-09-11) — AUDIT.md §M-6, P2-1 ──
   파일 머리 주석(6행)이 이미 "12px 미만 텍스트 금지"라고 적어 놓았는데
   실제 선언 다수가 11px 였다 — 문서가 못 지킨 계약을 여기서 값으로
   맞춘다. style.css EOF 블록과 같은 원칙(#1084·#1087 선례): 구 11px
   리터럴을 지우지 않고 같은 선택자를 font-size 한 속성만 다시 선언해
   소스 순서로 덮는다. --fs-meta 는 tokens.css 정의(12px). */
.scr-controls legend,
.ctl-hint,
.scr-ticker,
.scr-branch-list,
.scr-bf,
.hl-tier,
.wl-added,
.scr-card-repeat {
  font-size: var(--fs-meta);
}