/*
 * 색은 **역할이 겹치지 않게** 나눈다.
 *
 * ## 국내 관례를 따른다 — 상승이 빨강, 하락이 파랑
 *
 * 처음엔 상승을 초록, 하락을 빨강으로 뒀다. 그건 미국·유럽 관례다. **국내 증시는 반대다**
 * (KRX·증권사 앱 전부 상승 빨강 · 하락 파랑). 국내 투자자에게 빨간 하락 표시는 뜻이 뒤집혀
 * 읽힌다 — 색은 학습된 신호라 관례를 거스르면 없는 것만 못하다.
 *
 * ## 그래서 브랜드가 남색을 못 쓴다
 *
 * 방향이 **빨강과 파랑을 둘 다** 가져갔다. 브랜드가 남색(#0f3d5c)이면 하락 파랑과 같은
 * 계열이라, 로고·활성 탭·선택된 행이 "내린다" 로 읽힌다 — 전에 브랜드 초록이 상승 초록과
 * 겹쳤던 것과 같은 사고다. **브랜드는 그래파이트(무채색)로 뺀다.** 방향이 쓰는 두 색을
 * 피하면서 화면에서 중심을 잡는다.
 *
 * `--mixed` 는 회색이다. 뜻이 **판단 불가**라 눈에 띄는 색을 주면 "특별함" 으로 읽힌다.
 */
:root {
  --bg: #f7f7f8;
  --surface: #fff;
  --ink: #1a1d21;
  --muted: #6b7280;
  --line: #e2e4e7;
  /*
   * **브랜드 색이 곧 강조색이다(D-460).**
   *
   * 예전엔 브랜드가 무채색(그래파이트)이라 강조 자리 40여 곳이 전부 회색이었다.
   * 액센트를 따로 두고 로고에만 쓰니 화면 대부분은 여전히 회색이었다 — 색을 정한
   * 의미가 없다. 브랜드를 보라로 옮겨 강조가 전부 한 색으로 선다.
   *
   * `--accent` 는 같은 값이다. 이름을 둘 다 남기는 건 부르는 자리의 뜻이 달라서다 —
   * 브랜드는 "우리 색", 액센트는 "여기를 보라". 값이 갈릴 일이 생기면 그때 나눈다.
   */
  --brand: #5b3df5;
  --brand-soft: #eeeaff;
  --brand-ink: #fff;
  /*
   * **액센트는 보라다(D-448).**
   *
   * 방향 색이 이미 둘을 차지한다 — 상승 `#c8322a`(빨강) · 하락 `#1257b8`(파랑).
   * 액센트가 그 둘과 섞이면 배지가 작을 때 방향으로 오독된다. 보라는 어느 쪽과도
   * 안 섞이고, 한국 증시에서 방향을 뜻하지 않아 오독 위험이 없다.
   *
   * 예전엔 `--accent` 가 `--brand` 와 같은 값이었다 — 액센트를 안 정한 것이다.
   * 쓰는 자리는 셋으로 제한한다: 링크 · 활성 탭 · 주요 버튼. 방향 배지에는 안 쓴다.
   */
  --accent: #5b3df5;

  /*
   * **업종 배지 색을 토큰으로 옮긴다(D-553).** `.market`·`.energy` 같은 자리에 색을
   * 직접 박아 두었더니 어두운 테마에서 팔레트와 따로 놀았다 — 연두 `#d4ecaa` 가
   * `--bg #14171a` 위에 떠 있었다. 가이드 1절이 "새 색이 필요하면 토큰을 늘린다"
   * 고 정한 자리다. 다음 사람이 그 색을 찾을 수 있어야 한다.
   *
   * 값은 쓰던 것을 그대로 옮긴다 — 색을 새로 정하는 것은 별개의 일이다.
   */
  --tag-market-ink: #28602f;
  --tag-market-bg: #e6f1c9;
  --tag-chips-ink: #6856c4;
  --tag-chips-bg: #e9e5fc;
  --tag-energy-ink: #43844d;
  --tag-energy-bg: #e2f4e3;
  --tag-finance-ink: #497ab9;
  --tag-finance-bg: #e0edff;
  --tag-auto-ink: #c06454;
  --tag-auto-bg: #ffe3dd;
  --tag-bio-ink: #337b76;
  --tag-bio-bg: #e1f2f1;
  /** 찜하기. 방향(빨강·파랑)과 안 섞이는 자리라 따로 둔다. */
  --heart: #e5484d;
  --accent-soft: #eeeaff;
  --accent-ink: #fff;
  /*
   * **흰 바탕 위 보라(D-451).** 어두운 테마의 `--accent`(#a991ff)는 흰 바탕에서 흐리다.
   * 메뉴의 선택 칸처럼 **테마와 무관하게 흰 바탕**인 자리는 이 값을 쓴다.
   */
  --accent-strong: #5b3df5;
  /*
   * 하단 메뉴 높이. **상세 오버레이가 같은 값을 쓴다(D-463).** 따로 적으면 한쪽만
   * 바뀌어 상세가 메뉴를 가린다 — 실제로 그렇게 한 번 가렸다(D-457).
   */
  --nav-h: 58px;

  /*
   * **여백·간격 토큰(D-490).** 4의 배수만 쓴다.
   *
   * 목록 한 줄을 그리는 규칙이 다섯 가지인데(company · catcard · dayrow ·
   * driver-row · issue-row) **여백이 전부 제각각이었다** — 10/16/14/11/14 에
   * 간격이 3/16/10/9 다. 4의 배수를 지키는 건 dayrow 의 gap 하나뿐이었다.
   *
   * 격자는 화면마다 다를 수밖에 없다(칸 수가 다르다). 그러나 **여백과 간격은
   * 같아야 한다** — 그래야 화면을 옮겨 다녀도 같은 리듬으로 읽힌다.
   */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --pad-row: 12px 16px;
  --pad-card: 16px 20px;
  /* 상승·긍정 = 빨강 (국내 관례) */
  --up: #c8322a;
  --up-soft: #fdecea;
  /* 하락·부정 = 파랑 (국내 관례) */
  --down: #1257b8;
  --down-soft: #e8f0fb;
  --mixed: #6f767d;
  --mixed-soft: #eef0f2;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans KR", sans-serif;
  letter-spacing: -0.035em;
  /*
   * **한글은 단어 중간에서 끊지 않는다(D-439).**
   *
   * 기본값(`normal`)은 한글을 음절 단위로 끊는다. 그래서 폰처럼 좁은 화면에서
   * "…자동으로 이어집 / 니다." 처럼 마지막 한 글자만 다음 줄로 넘어간다 — 실측으로
   * 로그인·마이페이지 두 곳에서 나왔다. 앱 전체 CSS 에 `word-break` 가 한 건도 없었다.
   *
   * `keep-all` 은 띄어쓰기에서만 끊는다. 대신 띄어쓰기 없는 긴 문자열(URL·티커)이
   * 넘칠 수 있어 `overflow-wrap: anywhere` 를 같이 둔다.
   */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/**
 * **색을 안 정한 요소는 브라우저 기본을 쓴다(D-553).**
 *
 * 실측 2026-08-31 어두운 테마: 링크 94곳이 `#0000ee`(브라우저 기본 파랑), 글자
 * 122곳이 검정으로 나왔다. **잘못 칠한 게 아니라 안 칠한 자리다** — 그래서 상세
 * 화면이 팔레트와 따로 놀아 보였다.
 *
 * 바탕이 되는 요소에 토큰을 못 박는다. 개별 규칙이 있으면 그것이 이긴다.
 */
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }
p,
li,
td,
th,
dd,
dt,
figcaption {
  color: inherit;
}
button,
input {
  font: inherit;
}
.app-header {
  height: 58px;
  padding: 0 max(20px, calc((100vw - 1320px) / 2));
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.06em;
}
/*
 * **로고 심볼 — 소나 핑(D-461).**
 *
 * 예전엔 글자 `S` 를 사각형에 넣은 것뿐이라 심볼이 없었다. 이름이 소나가 됐으니
 * 그 이름이 하는 일을 그린다 — 한 점에서 음파가 퍼져 나가는 모양이다.
 *
 * 제품의 구조와도 같다: 하나의 사건이 퍼져 여러 기업에 닿는다. 메뉴의 이슈 아이콘
 * (노드에서 선이 뻗는 그림)과 같은 생각이다.
 *
 * **칠하지 않고 선으로 둔다.** 칠한 사각형은 헤더에서 무겁고, 선이면 글자와 같은
 * 무게로 앉는다.
 */
.logo .logo-mark {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.9;
  stroke-linecap: round;
}
.desktop-nav {
  display: flex;
  gap: 4px;
  margin-left: 40px;
}
.desktop-nav a {
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.desktop-nav a:hover {
  background: var(--mixed-soft);
  color: var(--ink);
}
/*
 * **글자색만으로는 구분이 안 됐다.** 브랜드를 무채색(그래파이트)으로 옮기면서 활성 항목이
 * 본문 글자색과 거의 같아졌다 — 색 하나에 기대면 브랜드가 바뀔 때마다 이렇게 무너진다.
 * 칠한 배경으로 바꿔 색이 아니라 형태로 구분되게 한다.
 */
.desktop-nav a.active,
.desktop-nav a.active:hover {
  /* 액센트가 생겼으니 활성 항목이 그 색을 쓴다(D-449) — 회색 알약은 눈에 안 띈다. */
  background: var(--accent);
  color: var(--accent-ink);
}
.head-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.theme-toggle,
.search,
.account-link {
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
}
.account-link {
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.theme-toggle {
  width: 33px;
  padding: 0;
}
.theme-toggle svg,
.search svg,
.mobile-nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px 44px;
}
.context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.context h1 {
  margin: 0;
  font-size: 27px;
  letter-spacing: -0.07em;
}
.context p {
  margin: 8px 0 0;
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
  letter-spacing: 0;
}
.context p i {
  width: 6px;
  height: 6px;
  display: inline-block;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.context-note {
  color: var(--muted);
  font-size: 12px;
}
/**
 * **두 줄로 나눈다(D-552).** 검색이 첫 줄을 통째로 쓰고, 둘째 줄에 칩과 정렬이 온다.
 * 한 줄에 다 넣었더니 검색과 정렬 사이가 735px 벌어져 서로 무관해 보였다.
 */
.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}
/*
 * 필터 칩 줄. **가로로만 스크롤한다(D-495)** — 폰에서 칩이 다섯 개를 넘으면
 * 줄바꿈 대신 옆으로 민다. 세로는 잠그지 않아 페이지 스크롤과 겹치지 않는다.
 */
.chips {
  display: flex;
  gap: var(--gap-2);
  overflow-x: auto;
  overflow-y: hidden;
}
.chips button,
.sort {
  height: 32px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.chips button.selected {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--brand-ink);
}
.sort {
  margin-left: auto;
  color: var(--ink);
}
.sort span {
  margin-left: 8px;
}
/*
 * **안에서 스크롤하지 않는다(D-495).**
 *
 * 예전엔 `height: calc(100vh - 178px)` 로 화면 높이에 가두고 목록과 상세가
 * 각자 안에서 스크롤했다. 페이지 스크롤과 겹쳐 **스크롤이 둘**이 됐다 — 휠을
 * 굴리면 어느 것이 움직일지 예측이 안 되고, 목록 끝에서 페이지로 넘어가는
 * 지점이 걸린다.
 *
 * 내용만큼 자라게 두고 페이지 스크롤 하나만 쓴다. 목록이 길면 목록이 길어진다.
 * 상세를 따라다니게 하려면 `position: sticky` 를 쓴다 — 그건 스크롤을 만들지 않는다.
 */
.desktop-workspace {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.master {
  border-right: 1px solid var(--line);
}
.list-head {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.list-head span {
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
}
.issue-row {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--gap-2);
  padding: var(--pad-row);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.issue-row.selected,
.sector-row.selected {
  background: var(--brand-soft);
  box-shadow: inset 3px 0 var(--brand);
}
.status {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font:
    600 14px "DM Mono",
    monospace;
}
.status.up {
  color: var(--up);
  background: var(--up-soft);
}
.status.down {
  color: var(--down);
  background: var(--down-soft);
}
.status.mixed {
  color: var(--mixed);
  background: var(--mixed-soft);
}
.status.neutral {
  color: var(--muted);
  background: var(--mixed-soft);
}
.issue-row small,
.sector-row small {
  display: block;
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
  letter-spacing: 0;
}
.issue-row b {
  display: block;
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}
.issue-row em {
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
  font-style: normal;
}
.issue-row strong,
.sector-row strong,
.mobile-issue strong,
.mobile-sector strong {
  align-self: center;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
}
/*
 * 상세는 화면에 붙어 따라온다(D-495). 목록이 길어도 상세를 다시 찾아 올라갈
 * 일이 없다. `sticky` 는 자기 스크롤을 만들지 않아 이중 스크롤이 안 생긴다.
 */
.detail {
  position: sticky;
  top: 16px;
  padding: 24px 28px;
}
.detail-top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
/**
 * **작은 머리글은 하나다(D-498).** 화면마다 이름이 달랐다 — 상세는 `detail-top p`,
 * 홈은 `section-kicker`, 로그인·마이페이지는 `auth-eyebrow` 였다. 값은 셋 다 같았는데
 * 파일이 셋이라 한쪽만 고치면 나머지가 어긋났다.
 *
 * `kicker` 하나로 모은다. 옛 이름은 **별칭으로 남긴다** — 화면을 건드리지 않는다.
 * `letter-spacing` 은 셋 중 둘이 쓰던 값으로 맞춘다.
 */
.kicker,
.detail-top p,
.section-kicker,
.ai-label,
.auth-eyebrow,
.profile-head p,
.watch-head p,
.company-head p,
.analysis-card header p,
.condition-card > p {
  margin: 0;
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
  letter-spacing: 0.05em;
}
.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 8px;
  font:
    500 12px "DM Mono",
    monospace;
}
.market {
  color: var(--tag-market-ink);
  background: var(--tag-market-bg);
}
.detail h2 {
  margin: 12px 0 0;
  font-size: 27px;
  line-height: 1.34;
  letter-spacing: -0.07em;
}
.impact {
  white-space: nowrap;
  font:
    600 12px "DM Mono",
    monospace;
  letter-spacing: -0.04em;
}
.up {
  color: var(--up);
}
.down {
  color: var(--down);
}
.mixed {
  color: var(--mixed);
}
.neutral {
  color: var(--muted);
}
/*
 * **절마다 선을 긋지 않는다(D-493).** 이슈 상세는 절이 예닐곱이라 선이 그만큼
 * 그어져 화면이 표처럼 보였다. **제목이 이미 구역을 나눈다** — 선은 그걸 한 번 더
 * 말하면서 눈만 끌었다.
 *
 * 여백으로 나눈다. 마지막 절 아래 남는 선도 함께 사라진다.
 */
.detail-section {
  padding: 24px 0 0;
}
.detail-section h3,
.evidence h3 {
  margin: 0 0 12px;
  font-size: 14px;
}
.detail-section h3 small,
.evidence h3 small {
  margin-left: 4px;
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
}
.detail-section > p {
  max-width: 700px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
.path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.path span {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font-size: 12px;
}
.path b {
  color: var(--muted);
  font-size: 16px;
}
.detail-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.company {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gap-1);
  padding: var(--gap-3) 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.company b {
  font-size: 14px;
}
.company b small {
  margin-left: 4px;
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
}
.company p {
  grid-column: 1 / 3;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.conditions {
  margin: 0;
  padding: 0;
  list-style: none;
}
.conditions li {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.6;
}
.conditions b {
  color: var(--brand);
  font:
    500 12px "DM Mono",
    monospace;
}
.conditions span {
  color: var(--muted);
}
.evidence {
  padding-top: 20px;
}
.evidence a,
.mini-link {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  text-decoration: none;
}
.evidence a span {
  padding: 4px;
  color: var(--brand);
  background: var(--brand-soft);
  font:
    500 12px "DM Mono",
    monospace;
}
.evidence time,
.mini-link span {
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
}
.evidence > p {
  margin: 12px 0;
  color: var(--muted);
  font-size: 12px;
}
/**
 * **검색이 주된 동작이다 — 그 크기로 보여야 한다(D-552).**
 *
 * 실측 2026-08-31: 검색 150px 인데 옆의 셀렉트가 409px 씩 셋이었다. 이슈 화면에서는
 * 필터 칩과 같은 줄·같은 크기라 **여섯 번째 칩처럼 보였다.** 위계가 거꾸로였다.
 *
 * 한 줄을 통째로 쓰고 그 아래에 필터를 둔다.
 */
.filter-search {
  flex: 1 1 100%;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 16px;
}
.filter-search input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
}
.sector-workspace {
  grid-template-columns: 450px minmax(0, 1fr);
}
.sector-row {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 12px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.sector-row b {
  display: block;
  font-size: 14px;
}
.sector-row i,
.mobile-sector i {
  font-style: normal;
}
.sector-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 16px;
}
.sector-icon.chips {
  color: var(--tag-chips-ink);
  background: var(--tag-chips-bg);
}
.energy {
  color: var(--tag-energy-ink);
  background: var(--tag-energy-bg);
}
.finance {
  color: var(--tag-finance-ink);
  background: var(--tag-finance-bg);
}
.auto {
  color: var(--tag-auto-ink);
  background: var(--tag-auto-bg);
}
.bio {
  color: var(--tag-bio-ink);
  background: var(--tag-bio-bg);
}
.sector-detail .detail-top h2 {
  font-size: 27px;
}
.sector-detail .detail-top h2 small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.stats {
  display: flex;
  gap: 28px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.stats span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}
.stats b {
  color: var(--brand);
  font:
    500 21px "DM Mono",
    monospace;
}
.mobile-stream,
.mobile-detail,
.mobile-nav {
  display: none;
}
/* 다크도 같은 규칙이다 — 상승 빨강 · 하락 파랑, 브랜드는 둘 다 피한 무채색. */
html[data-theme="dark"] {
  /*
   * **배지 색도 테마별로 값만 바꾼다(D-553).** 예전엔 `.market` 만 어두운 테마에서
   * 따로 덮어썼고 나머지 다섯은 밝은 값 그대로였다 — 어두운 바닥에 밝은 배지가
   * 떠 있었다. 토큰으로 옮겼으니 여기서 값만 바꾼다.
   */
  --tag-market-ink: #cfe6a6;
  --tag-market-bg: #253018;
  --tag-chips-ink: #c3b8ff;
  --tag-chips-bg: #262040;
  --tag-energy-ink: #9fd6a8;
  --tag-energy-bg: #1a2b1d;
  --tag-finance-ink: #a8c8f0;
  --tag-finance-bg: #172436;
  --tag-auto-ink: #f0b3a5;
  --tag-auto-bg: #33201b;
  --tag-bio-ink: #93cfca;
  --tag-bio-bg: #162b29;
  --heart: #ff6b70;
  --bg: #14171a;
  --surface: #1c2024;
  --ink: #eef0f2;
  --muted: #9aa2ab;
  --line: #2f353b;
  --brand: #a991ff;
  --brand-soft: #221b3d;
  --brand-ink: #14171a;
  /* 어두운 배경에서는 밝은 보라라야 글자가 읽힌다. */
  --accent: #a991ff;
  --accent-soft: #221b3d;
  --accent-ink: #14171a;
  /* 어두운 테마에서도 흰 바탕 위 글자는 진한 보라라야 읽힌다. */
  --accent-strong: #5b3df5;
  --up: #ef6b62;
  --up-soft: #2e1f1e;
  --down: #6ba6f5;
  --down-soft: #16273d;
  --mixed: #9aa2ab;
  --mixed-soft: #24282d;
}
html[data-theme="dark"] .issue-row.selected,
html[data-theme="dark"] .sector-row.selected {
  background: var(--brand-soft);
}
html[data-theme="dark"] .path span {
  border-color: var(--line);
  background: var(--mixed-soft);
}
/* 기획서 반응형 규칙: 모바일·태블릿은 단일 열 + 하단 탭, 데스크톱(1024~)은 2열 + 상단 내비. */
@media (max-width: 1023px) {
  .app-header {
    height: 56px;
    padding: 0 16px;
  }
  .desktop-nav {
    display: none;
  }
  .search {
    width: 33px;
    padding: 0;
  }
  .account-link {
    padding: 0 8px;
    font-size: 12px;
  }
  .search span {
    display: none;
  }
  .app {
    padding: 16px 16px 84px;
  }
  .context {
    padding-bottom: 12px;
    flex-wrap: wrap;
  }
  .context h1 {
    font-size: 21px;
  }
  .context p {
    font-size: 12px;
  }
  /*
   * **폰에서 통째로 감추고 있었다.** 그 안에 물음표 도움말이 들어 있어 폰에서는 설명을
   * 볼 방법이 아예 없었다. 건수 정보도 쓸모가 있으니 제목 아래로 내려 보여준다.
   */
  .context-note {
    display: block;
    width: 100%;
    margin-top: 8px;
  }
  .toolbar {
    margin: 12px 0;
  }
  .chips button,
  .sort {
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }
  .desktop-workspace {
    display: none;
  }
  .mobile-stream {
    display: block;
    border-top: 1px solid var(--line);
  }
  .stream-head {
    display: flex;
    justify-content: space-between;
    margin: 12px 0 4px;
    font-size: 14px;
    font-weight: 600;
  }
  .stream-head span {
    color: var(--muted);
    font:
      500 12px "DM Mono",
      monospace;
  }
  .mobile-issue {
    width: 100%;
    min-height: 88px;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 8px;
    padding: 12px 1px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    text-align: left;
  }
  .mobile-issue b {
    display: block;
    margin: 4px 0;
    font-size: 14px;
    line-height: 1.45;
  }
  .mobile-issue small,
  .mobile-issue p {
    margin: 0;
    color: var(--muted);
    font:
      500 12px "DM Mono",
      monospace;
  }
  .mobile-issue p i {
    width: 5px;
    height: 5px;
    display: inline-block;
    margin-right: 4px;
    border-radius: 50%;
    background: currentColor;
  }
  /*
   * **바 전체가 브랜드 색이다(D-450).**
   *
   * 흰 바탕에 알약 하나만 칠하면 메뉴가 화면의 나머지와 섞여 눈에 안 들어온다. 바를
   * 통째로 액센트로 두면 화면 아래에 브랜드가 늘 한 줄 있다 — 회색뿐이던 화면에
   * 축이 생긴다.
   *
   * 선택된 탭은 **거꾸로 흰 블록**이다. 칠한 바탕 위에서는 비어 있는 자리가 더 튄다.
   */
  /*
   * **메뉴 바는 중립이다(D-463).**
   *
   * 바 전체를 액센트로 칠했더니 화면 아래를 무겁게 눌렀다 — 액센트가 아니라 배경이
   * 됐다. 브랜드 색이 나오는 자리는 **로고와 선택된 탭 둘**이면 된다. 그게 액센트를
   * 쓰는 올바른 밀도다.
   *
   * 높이도 70 → 58px 로 줄인다. 폰에서 본문 한 줄이 더 보인다.
   */
  .mobile-nav {
    /* 상세 오버레이가 이 값을 그대로 쓴다 — 따로 적으면 또 어긋나 메뉴를 가린다. */
    height: var(--nav-h);
    display: flex;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
    background: var(--surface);
  }
  .mobile-nav a {
    /*
     * 탭이 여섯이라 `20%` 는 다섯 개 기준이었다 — 마지막이 넘친다. 균등 분배로 둔다.
     */
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
  }
  .mobile-nav svg {
    width: 21px;
    height: 21px;
  }
  /*
   * **선택된 탭이 눈에 안 들어왔다.** 글자색만 바꾸면 아이콘·글자 크기가 같아 구분이 약하다.
   * 칠한 알약을 아이콘 뒤에 깔아 **형태**로 구분한다 — 색을 못 보는 사람에게도 남는다.
   */
  /*
   * **아이콘과 이름이 한 덩어리로 보여야 한다(D-449).**
   *
   * 예전엔 알약과 아이콘만 색이 바뀌고 **이름은 회색 그대로**였다. 위아래가 따로 놀아
   * 선택된 것이 하나로 안 읽혔다. 이름도 같은 액센트를 쓴다.
   *
   * 알약은 형태로도 구분되게 남긴다 — 색을 못 보는 사람에게는 그것만 남는다.
   */
  /*
   * **아이콘과 이름을 한 블록으로 묶는다(D-450).**
   *
   * 알약이 아이콘만 덮으면 이름이 블록 밖에 남아 둘이 따로 보인다. 탭 전체를 덮어
   * 아이콘·이름이 같은 바탕 위에 앉게 한다 — 선택된 것이 하나의 덩어리로 읽힌다.
   *
   * 높이가 있는 블록이라 완전한 알약(`100px`)보다 둥근 사각형이 안정적이다.
   */
  /*
   * **선택된 탭은 색과 짧은 선으로 말한다(D-463).**
   *
   * 색 하나에만 기대면 색을 못 보는 사람이 **지금 어디 있는지**를 잃는다. 그건 다른
   * 것과 달리 길을 잃는 문제라 형태 표시가 하나는 있어야 한다.
   *
   * 선은 바 위쪽 경계에 붙어 2.5px 뿐이라 자리를 거의 안 먹는다 — 칸을 통째로 칠하던
   * 예전 방식보다 훨씬 가볍다.
   */
  .mobile-nav a.active {
    color: var(--accent);
    font-weight: 700;
  }
  .mobile-nav a.active svg {
    color: var(--accent);
    stroke-width: 2.05;
  }
  .mobile-nav a.active::before {
    content: "";
    position: absolute;
    top: 0;
    right: 26%;
    left: 26%;
    height: 2.5px;
    border-radius: 0 0 3px 3px;
    background: var(--accent);
  }
  /* 알약이 아이콘·글자를 덮지 않게 한다. */
  .mobile-nav a > svg,
  .mobile-nav a > span {
    position: relative;
    z-index: 1;
  }
  .mobile-detail {
    /*
     * **`display` 를 되돌려 받아야 한다.** 전역에서 `.mobile-stream, .mobile-detail,
     * .mobile-nav { display: none }` 로 꺼 두는데, 다른 둘과 달리 여기는 켜는 규칙이 없어서
     * `.open` 을 붙여도 계속 `none` 이었다 — 폰에서 이슈 상세 링크를 열면 아무것도 안 나왔다.
     */
    display: block;
    position: fixed;
    /*
     * **하단 메뉴를 덮지 않는다(D-457).**
     *
     * `inset: 0` 에 `z-index: 20` 이라 상세가 열리면 내비(`z-index: 10`)를 통째로 가렸다 —
     * 기업 상세에 들어가면 하단 메뉴가 사라졌다. 상세는 내비 **위쪽까지만** 차지한다.
     *
     * `70px` 은 내비 높이고, `env(safe-area-inset-bottom)` 은 홈 인디케이터 자리다 —
     * 내비가 그만큼 더 아래로 내려가 있으므로 상세도 같은 값을 빼야 한다.
     */
    top: 0;
    right: 0;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
    left: 0;
    z-index: 20;
    overflow: auto;
    padding-bottom: 24px;
    background: var(--bg);
  }
  .mobile-detail:not(.open) {
    display: none;
  }
  .mobile-detail header {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
  }
  .mobile-detail header button {
    width: 30px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 27px;
  }
  .mobile-detail header b {
    font-size: 16px;
  }
  .mobile-detail header time {
    margin-left: auto;
    color: var(--muted);
    font:
      500 12px "DM Mono",
      monospace;
  }
  .mobile-detail article {
    padding: 20px 16px;
  }
  .mobile-detail article > p {
    margin: 0;
  }
  .mobile-detail h2 {
    margin: 12px 0 20px;
    font-size: 27px;
    line-height: 1.38;
  }
  .mobile-detail section {
    padding: 16px 0;
    border-top: 1px solid var(--line);
  }
  .mobile-detail h3 {
    margin: 0 0 12px;
    font-size: 14px;
  }
  .mobile-detail section > p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
  }
  .filter-search {
    display: none;
  }
  .sector-app .toolbar {
    justify-content: space-between;
  }
  .sector-stream .stream-head {
    margin-top: 8px;
  }
  .mobile-sector {
    width: 100%;
    min-height: 72px;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 8px 1px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    text-align: left;
  }
  .mobile-sector b {
    display: block;
    font-size: 14px;
  }
  .mobile-sector small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font:
      500 12px "DM Mono",
      monospace;
  }
  .mobile-sector i {
    font-size: 12px;
  }
  .sector-app .context {
    margin-bottom: 2px;
  }
  .stats {
    gap: 24px;
    padding: 16px 0;
  }
  .stats b {
    font-size: 21px;
  }
}

/* 로그인한 사람의 이름이 들어가는 자리. '로그인' 세 글자보다 길어질 수 있다(D-397). */
.account-link.signed-in {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * **제목 밑 갱신 시각과 물음표를 감춘다(D-456).**
 *
 * 갱신 시각은 파이프라인이 언제 돌았는지지 사용자가 할 일이 없는 값이다. 물음표는
 * 누르기 전엔 뜻이 없고, 눌러야 나오는 설명이라면 처음부터 화면에 있어야 할 만큼
 * 중요하지 않다.
 *
 * **DOM 에서 빼지 않고 감춘다.** 화면 코드가 `querySelector("[data-synced]").textContent`
 * 로 채우는데 요소가 없으면 null 참조로 화면이 통째로 죽는다 — 실제로 그렇게 날짜별·
 * 테마·업종 세 화면을 깨뜨렸다(2026-08-26). 지우는 건 그 코드까지 같이 손볼 때 한다.
 */
[data-help-slot] {
  display: none;
}
/*
 * 갱신 시각은 **줄 통째로** 감춘다. 안쪽 `<span>` 만 감추면 껍데기 `<p><i></i>` 의
 * 6px 짜리 점이 제목 밑에 남는다 — 문단 기호처럼 보인다(실측 2026-08-26).
 */
.context p:has([data-synced]) {
  display: none;
}
/* `:has` 를 모르는 브라우저를 위한 대비 — 점과 글자를 각각 지운다. */
[data-synced] {
  display: none;
}
.context p > i:only-child {
  display: none;
}