/*
 * 색은 **역할이 겹치지 않게** 나눈다.
 *
 * ## 국내 관례를 따른다 — 상승이 빨강, 하락이 파랑
 *
 * 처음엔 상승을 초록, 하락을 빨강으로 뒀다. 그건 미국·유럽 관례다. **국내 증시는 반대다**
 * (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;
  --accent-soft: #eeeaff;
  --accent-ink: #fff;
  /*
   * **흰 바탕 위 보라(D-451).** 어두운 테마의 `--accent`(#a991ff)는 흰 바탕에서 흐리다.
   * 메뉴의 선택 칸처럼 **테마와 무관하게 흰 바탕**인 자리는 이 값을 쓴다.
   */
  --accent-strong: #5b3df5;
  /*
   * 하단 메뉴 높이. **상세 오버레이가 같은 값을 쓴다(D-463).** 따로 적으면 한쪽만
   * 바뀌어 상세가 메뉴를 가린다 — 실제로 그렇게 한 번 가렸다(D-457).
   */
  --nav-h: 58px;
  /* 상승·긍정 = 빨강 (국내 관례) */
  --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;
}
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: 7px 12px;
  border-radius: 4px;
  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: 6px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  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: 25px 20px 45px;
}
.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: 6px 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: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.context-note {
  color: var(--muted);
  font-size: 12px;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0;
}
.chips {
  display: flex;
  gap: 6px;
  overflow: auto;
}
.chips button,
.sort {
  height: 32px;
  flex: 0 0 auto;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  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;
}
.desktop-workspace {
  height: calc(100vh - 178px);
  min-height: 560px;
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
}
.master {
  overflow-y: auto;
  border-right: 1px solid var(--line);
}
.list-head {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  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 16px;
  gap: 9px;
  padding: 14px 13px;
  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: 5px 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;
}
.detail {
  overflow-y: auto;
  padding: 24px 28px;
}
.detail-top {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.detail-top p {
  margin: 0;
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
}
.badge {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 4px;
  font:
    500 12px "DM Mono",
    monospace;
}
.market {
  color: #28602f;
  background: #e6f1c9;
}
.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);
}
.detail-section {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.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: #3d434a;
  font-size: 14px;
  line-height: 1.75;
}
.path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.path span {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  font-size: 12px;
}
.path b {
  color: var(--muted);
  font-size: 16px;
}
.detail-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 33px;
}
.company {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px;
  padding: 10px 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: 10px 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: #3d434a;
}
.evidence {
  padding-top: 20px;
}
.evidence a,
.mini-link {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 9px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  text-decoration: none;
}
.evidence a span {
  padding: 3px;
  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;
}
.filter-search {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 16px;
}
.filter-search input {
  width: 130px;
  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 16px;
  gap: 9px;
  align-items: center;
  padding: 10px 13px;
  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: 4px;
  font-size: 16px;
}
.sector-icon.chips {
  color: #6856c4;
  background: #e9e5fc;
}
.energy {
  color: #43844d;
  background: #e2f4e3;
}
.finance {
  color: #497ab9;
  background: #e0edff;
}
.auto {
  color: #c06454;
  background: #ffe3dd;
}
.bio {
  color: #337b76;
  background: #e1f2f1;
}
.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: 26px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.stats span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  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"] {
  --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);
}
html[data-theme="dark"] .detail-section > p,
html[data-theme="dark"] .conditions span {
  color: #c5cbd2;
}
html[data-theme="dark"] .market {
  color: #243b21;
  background: #d4ecaa;
}
/* 기획서 반응형 규칙: 모바일·태블릿은 단일 열 + 하단 탭, 데스크톱(1024~)은 2열 + 상단 내비. */
@media (max-width: 1023px) {
  .app-header {
    height: 56px;
    padding: 0 14px;
  }
  .desktop-nav {
    display: none;
  }
  .search {
    width: 33px;
    padding: 0;
  }
  .account-link {
    padding: 0 9px;
    font-size: 12px;
  }
  .search span {
    display: none;
  }
  .app {
    padding: 17px 14px 83px;
  }
  .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: 10px 0;
  }
  .chips button,
  .sort {
    height: 30px;
    padding: 0 9px;
    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: 13px 0 3px;
    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 16px;
    gap: 9px;
    padding: 11px 1px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    text-align: left;
  }
  .mobile-issue b {
    display: block;
    margin: 3px 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: 3px;
    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: 5px;
    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: 14px;
    padding: 0 14px;
    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 14px;
  }
  .mobile-detail article > p {
    margin: 0;
  }
  .mobile-detail h2 {
    margin: 12px 0 21px;
    font-size: 27px;
    line-height: 1.38;
  }
  .mobile-detail section {
    padding: 17px 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 16px;
    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: 3px;
    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: 15px 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;
}