/**
 * 방향 라벨과 화면 상태. `terminal.css` 의 토큰을 그대로 쓴다 — 색을 새로 정의하지 않는다.
 *
 * 왜 별 파일인가: `terminal.css` 는 화면별 레이아웃이고 여기는 **모든 화면이 쓰는 표시 규칙**이다.
 * 방향 배지를 레이아웃 파일에 두면 화면이 늘 때마다 어디에 있는지 찾게 된다.
 */

/* ── 방향 배지 ───────────────────────────────────────────────────────────── */

/*
 * **색·아이콘·텍스트를 함께 낸다.** 기획서 공통 원칙: `방향 색은 보조 수단이다 — 텍스트
 * 라벨을 항상 함께 쓴다`. 색만 쓰면 색을 구분 못 하는 사용자에게 상승과 하락이 같다.
 */
/*
 * **방향 배지는 작다(D-440).**
 *
 * 제목 줄 끝에 붙는 표시지 제목과 겨루는 요소가 아니다. 크게 만들면 폰에서 제목이
 * 한 줄 더 감기고 그 아래 요약도 좁아진다. 글자를 11px 로, 여백을 절반으로 줄인다.
 *
 * `vertical-align` 을 주는 이유 — `inline-flex` 는 기준선이 안쪽 내용에 걸려서
 * 제목 글자보다 아래로 처진다.
 */
.dirbadge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  /*
   * **글자 크기는 붙는 자리를 따른다(D-441).** 제목 옆에 오면 제목과 같은 크기여야
   * 한 줄로 읽힌다 — 혼자 작으면 따로 노는 딱지가 된다. `font-size: inherit` 로
   * 부모를 따라가고, 굵기와 여백만 배지답게 둔다.
   */
  font-family: "Noto Sans KR", sans-serif;
  font-size: inherit;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.dirbadge i {
  font-style: normal;
  font-size: 0.85em;
  line-height: 1;
}
.dirbadge b {
  font-weight: 700;
}
.dirbadge em {
  font-style: normal;
  font-weight: 500;
  opacity: 0.75;
}
.dirbadge.up {
  color: var(--up);
  background: var(--up-soft);
  border-color: color-mix(in srgb, var(--up) 22%, transparent);
}
.dirbadge.down {
  color: var(--down);
  background: var(--down-soft);
  border-color: color-mix(in srgb, var(--down) 22%, transparent);
}
.dirbadge.mixed,
.dirbadge.neutral {
  color: var(--mixed);
  background: var(--mixed-soft);
  border-color: color-mix(in srgb, var(--mixed) 22%, transparent);
}

/*
 * 목록 행 왼쪽 표시. 좁아서 아이콘 위에 라벨을 쌓는다 — 가로로 두면 제목 자리를 먹는다.
 * 폭을 고정해 행들이 세로로 정렬되게 한다.
 */
.dirmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex: 0 0 44px;
  width: 44px;
  padding: 4px 0;
  border-radius: 4px;
  border: 1px solid transparent;
}
.dirmark i {
  font-style: normal;
  font:
    500 14px "DM Mono",
    monospace;
  line-height: 1;
}
.dirmark small {
  font:
    600 12px "Noto Sans KR",
    sans-serif;
  line-height: 1;
  letter-spacing: -0.03em;
}
.dirmark.up {
  color: var(--up);
  background: var(--up-soft);
  border-color: color-mix(in srgb, var(--up) 20%, transparent);
}
.dirmark.down {
  color: var(--down);
  background: var(--down-soft);
  border-color: color-mix(in srgb, var(--down) 20%, transparent);
}
.dirmark.mixed,
.dirmark.neutral {
  color: var(--mixed);
  background: var(--mixed-soft);
  border-color: color-mix(in srgb, var(--mixed) 20%, transparent);
}

/** 등락률. 종목 화면에서 종가 옆에 붙는다. */
.pct {
  font:
    500 14px "DM Mono",
    monospace;
}
.pct.up {
  color: var(--up);
}
.pct.down {
  color: var(--down);
}
.pct.neutral {
  color: var(--muted);
}

/* ── 화면 상태 ───────────────────────────────────────────────────────────── */

.state {
  padding: 20px 16px;
}
.state.empty,
.state.error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 24px 20px;
}
.state.empty b,
.state.error b {
  font:
    700 16px "Noto Sans KR",
    sans-serif;
  color: var(--ink);
}
.state.empty p,
.state.error p {
  margin: 0;
  font:
    400 14px "Noto Sans KR",
    sans-serif;
  color: var(--muted);
  line-height: 1.6;
}
.state.error button {
  margin-top: 6px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: 4px;
  padding: 8px 14px;
  font:
    600 14px "Noto Sans KR",
    sans-serif;
  cursor: pointer;
}

/* 로딩 자리표시. 목록 높이를 미리 잡아 채워질 때 화면이 튀지 않게 한다. */
.skel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.skel-row i {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 4px;
}
.skel-row div {
  flex: 1;
  display: grid;
  gap: 7px;
}
.skel-row b,
.skel-row em {
  display: block;
  height: 11px;
  border-radius: 4px;
}
.skel-row b {
  width: 72%;
}
.skel-row em {
  width: 38%;
}
.skel-row i,
.skel-row b,
.skel-row em {
  background: linear-gradient(90deg, var(--line) 25%, var(--mixed-soft) 50%, var(--line) 75%);
  background-size: 300% 100%;
  animation: skel 1.3s ease-in-out infinite;
}
@keyframes skel {
  0% {
    background-position: 150% 0;
  }
  100% {
    background-position: -150% 0;
  }
}
/* 움직임을 싫어하는 설정을 존중한다. */
@media (prefers-reduced-motion: reduce) {
  .skel-row i,
  .skel-row b,
  .skel-row em {
    animation: none;
  }
}

/** 스크린리더 전용. 로딩 중임을 소리로 알린다. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── 공통 조각 ───────────────────────────────────────────────────────────── */

/*
 * 예측이 아니라는 고정 문구. 기획 원칙 5번(정보와 추천의 분리) — 방향 배지 옆에 색만
 * 있으면 "오를 것" 으로 읽힌다.
 */
.disclaimer {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font:
    400 12px "Noto Sans KR",
    sans-serif;
  line-height: 1.7;
}

/** 근거가 얇은 이슈에 붙인다. 숨기지 않는다(기획 원칙 4번: 불확실성 노출). */
.thin-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--mixed-soft);
  color: var(--muted);
  font:
    600 12px "Noto Sans KR",
    sans-serif;
}

/** 회차 표시. 후속 보도가 이어진 이슈를 가려낸다 — 우리만 가진 축이다. */
.rounds-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  color: var(--brand);
  font:
    600 12px "Noto Sans KR",
    sans-serif;
}

/** 테마 태그. 이슈·종목 상세에서 역방향 진입점이 된다. */
.tagrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tagrow a,
.tagrow span {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface);
  color: var(--muted);
  text-decoration: none;
  font:
    500 12px "Noto Sans KR",
    sans-serif;
}
.tagrow a:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/** 근거 기사 목록. 기획서 이슈 상세 6번 — 제목·매체·발행일·인용문·원문 이동. */
.articles {
  display: grid;
  gap: 10px;
}
.articles a {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  text-decoration: none;
}
.articles a:hover {
  border-color: var(--brand);
}
.articles b {
  display: block;
  color: var(--ink);
  font:
    600 14px "Noto Sans KR",
    sans-serif;
  line-height: 1.5;
}
.articles .meta {
  display: flex;
  gap: 8px;
  margin-top: 5px;
  color: var(--muted);
  font:
    400 12px "DM Mono",
    monospace;
}
.articles blockquote {
  margin: 8px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font:
    400 14px "Noto Sans KR",
    sans-serif;
  line-height: 1.65;
}

/*
 * 광고 자리. **애드센스 승인 전에는 비어 있고 자리를 차지하지 않는다** — 승인 전에
 * "광고 영역" 이라고 적어 두면 방문자에게는 미완성으로 보인다. 승인 후 이 안에
 * 애드센스 스니펫만 넣으면 레이아웃이 그대로 유지된다.
 */
.ad-slot:empty {
  display: none;
}
.ad-slot {
  margin: 20px 0;
  min-height: 90px;
}

/** 목록 더보기. */
.more {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font:
    600 14px "Noto Sans KR",
    sans-serif;
  cursor: pointer;
}
.more:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.more[disabled] {
  color: var(--muted);
  cursor: default;
}

/* ── 기존 레이아웃과 맞추는 보정 ──────────────────────────────────────────── */

/*
 * 영향 대상 카드에 확신도 표시가 붙는다. `.company` 는 2열 격자이고 `p` 가 이미 두 칸을
 * 차지하므로 다음 요소가 좁은 칸에 끼는 것을 막는다.
 */
.company .thin-flag {
  grid-column: 1 / 3;
  justify-self: start;
  margin-top: 4px;
}

/*
 * 검색을 모바일에서 감추고 있었다. 기획서 이슈 목록 구성 1번이 `상단 검색 입력`이고,
 * 종목 화면은 검색이 진입 수단이다 — 모바일에서 없으면 티커로 못 들어온다.
 */
@media (max-width: 1023px) {
  /*
   * **검색은 자기 줄을 통째로 쓴다(D-447).**
   *
   * `flex: 1` 에 `min-width: 0` 이라 형제(필터 칩)가 자리를 다 가져가면 0 까지 줄어든다 —
   * 실측 390px 폰에서 입력칸이 **10×20px** 이었다. 사실상 안 보인다.
   *
   * 툴바는 이미 `flex-wrap: wrap` 이므로 기준 폭을 100% 로 주면 한 줄을 차지한다.
   * `order: -1` 로 맨 앞에 둔다 — 찾는 일이 거르는 일보다 먼저다.
   */
  .filter-search {
    display: flex;
    order: -1;
    /* shrink 를 0 으로 두면 안에 든 것이 길 때 가로로 넘친다(D-458). */
    flex: 1 1 100%;
    min-width: 0;
  }
  .filter-search input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    /*
     * **16px 미만이면 iOS 가 화면을 확대한다(D-458).** 확대되면 `position: fixed` 인
     * 하단 메뉴가 시각 뷰포트 밖으로 밀려 "메뉴가 아래로 떨어진" 것처럼 보인다.
     * `maximum-scale` 로 막는 방법도 있지만 그건 확대를 아예 못 하게 해 접근성을 깬다.
     */
    font-size: 16px;
  }
  /* 상세를 밀어 올린 화면에서는 2열 격자가 좁아 글자가 뭉친다. */
  .mobile-detail .detail-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* `.detail-section` 아래선과 `.mobile-detail section` 위선이 겹쳐 두 줄로 보인다. */
  .mobile-detail .detail-section {
    border-bottom: 0;
  }
}

/*
 * 조건 목록은 `65px 1fr` 2열이다. 라벨(`<b>`)이 없는 항목을 넣으면 본문이 65px 칸에
 * 들어가 한 글자씩 끊긴다 — 라벨 없는 항목은 한 칸으로 쓴다.
 */
.conditions li.plain {
  grid-template-columns: 1fr;
}

/** 상세 머리의 배지·표시가 여러 개 붙는다. 줄바꿈을 허용한다. */
.detail-top p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.detail-top {
  flex-wrap: wrap;
  align-items: flex-start;
}

/** 이슈 목록의 필터 줄. 칩·검색·정렬이 좁은 화면에서 겹치지 않게 한다. */
.toolbar {
  flex-wrap: wrap;
}
.chips {
  flex-wrap: wrap;
}

/** 상세 안의 빈 상태는 카드 안이라 여백을 줄인다. */
.detail-section .state.empty,
.evidence .state.empty {
  padding: 16px;
}

/* ── 종목 화면 ───────────────────────────────────────────────────────────── */

/** 종가와 전일비. 시계열이 없으므로 차트를 만들지 않는다 — 빈 차트보다 정확하다. */
.price-line {
  margin: 8px 0 0 !important;
  color: var(--ink) !important;
  font:
    500 16px "DM Mono",
    monospace !important;
}

/*
 * 사건 타임라인. `.conditions` 격자를 쓰되 날짜 칸을 넓힌다 — `오늘 09:20` 이 65px 에
 * 들어가지 않아 두 줄로 접힌다.
 */
.conditions.timeline li {
  grid-template-columns: 92px 1fr;
  align-items: start;
}
.conditions.timeline span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.conditions.timeline a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.conditions.timeline a:hover {
  color: var(--brand);
  text-decoration: underline;
}

/** 종목 목록 행의 이슈 수 표시. 숫자가 세 자리까지 온다. */
.dirmark i {
  max-width: 42px;
  overflow: hidden;
}

/* ── 주간 종합 ───────────────────────────────────────────────────────────── */

/** 범위별 분포. 막대 길이와 숫자를 함께 낸다 — 막대만 두면 값을 못 읽는다. */
.scopebars {
  display: grid;
  gap: 9px;
}
.scopebars > div {
  display: grid;
  /*
   * 이름 칸이 56px 이라 한글 업종명이 두 줄로 쪼개졌다 — `소프트웨/어`,
   * `전기통신/서비스`. WI26 에서 가장 긴 이름이 7자(`전기통신서비스`)이므로
   * 그게 한 줄에 들어갈 만큼 준다. 막대는 늘어나도 판정 글자가 밀리지 않게
   * 최대폭을 둔다 — 1,100px 짜리 막대는 읽을 정보가 없다.
   */
  grid-template-columns: 108px minmax(0, 420px) 62px;
  gap: 12px;
  align-items: center;
}
.scopebars b {
  color: var(--ink);
  font:
    600 14px "Noto Sans KR",
    sans-serif;
  white-space: nowrap;
}
/* 안쪽 링크가 기본 파랑·밑줄로 나왔다 — `b` 만 잡고 `a` 를 안 잡았다. */
.scopebars b a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.scopebars b a:hover,
.scopebars b a:focus-visible {
  border-bottom-color: currentColor;
}
.scopebars i {
  display: block;
  height: 8px;
  min-width: 3px;
  border-radius: 100px;
  background: var(--brand);
}
.scopebars em {
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
  font-style: normal;
  text-align: right;
}

/** 주차 칩이 12개까지 늘어난다. 좁은 화면에서 가로 스크롤로 둔다. */
[data-weeks] {
  overflow-x: auto;
  padding-bottom: 4px;
}
[data-weeks] button {
  flex: 0 0 auto;
}

/* ── 범위 안의 대상 ──────────────────────────────────────────────────────── */

/*
 * 상세 머리의 대상 표시. `섹터` 옆에 `자율주행차` 처럼 붙어 무엇에 대한 이슈인지 말한다 —
 * 범위만 적으면 섹터 필터를 눌러도 전부 `섹터` 라 구분이 안 된다.
 */
.subject {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font:
    600 12px "Noto Sans KR",
    sans-serif;
}

/** 영향이 걸린 업종. 거시·시장 이슈도 어디로 번지는지 이걸로 드러난다. */
.tagrow.sectors {
  margin: 14px 0 0;
}
.tagrow.sectors span {
  border-color: color-mix(in srgb, var(--brand) 25%, transparent);
  background: var(--brand-soft);
  color: var(--brand);
}

/*
 * 검색에 왜 걸렸는지. 제목에 없는 말로 찾으면(거시 탭 + "삼성") 영향 기업이 이유인데
 * 화면에 안 보여 검색이 고장 난 것처럼 읽혔다.
 */
.matched {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--brand-soft);
  color: var(--brand);
  font:
    600 12px "Noto Sans KR",
    sans-serif;
}

/* ── 날짜별 핵심 변화 ────────────────────────────────────────────────────── */

/*
 * **흐름을 보는 목록이다.** 날짜·등락률·헤드라인만 한 줄씩 훑고 상세는 눌러서 본다 —
 * 목록 옆에 상세를 붙여 두면 한 화면에 날짜가 몇 개 안 들어와 흐름이 안 읽힌다.
 */
.daylist {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.dayrow {
  display: grid;
  grid-template-columns: 132px 190px minmax(0, 1fr) 92px 18px;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.dayrow:hover {
  border-color: var(--brand);
}
.dayrow-date b {
  display: block;
  font:
    700 16px "Noto Sans KR",
    sans-serif;
}
.dayrow-date small {
  margin-top: 4px;
}

/* 등락. 숫자와 막대를 같이 둔다 — 숫자만으로는 어느 날이 컸는지 눈에 안 잡힌다. */
.dayrow-move {
  display: grid;
  gap: 4px;
  font:
    500 12px "Noto Sans KR",
    sans-serif;
  color: var(--muted);
}
.dayrow-move .sub {
  opacity: 0.8;
}
.dayrow-move em {
  font-style: normal;
  margin-left: 4px;
}
.daybar {
  display: block;
  height: 6px;
  border-radius: 100px;
  background: var(--mixed-soft);
  overflow: hidden;
}
.daybar i {
  display: block;
  height: 100%;
  border-radius: 100px;
}
.daybar.up i {
  background: var(--up);
}
.daybar.down i {
  background: var(--down);
}
.daybar.neutral i {
  background: var(--mixed);
}

.dayrow-body b {
  display: block;
  font:
    600 15px "Noto Sans KR",
    sans-serif;
  line-height: 1.5;
}
.dayrow-body small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font:
    400 12px "Noto Sans KR",
    sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dayrow-num {
  display: grid;
  gap: 2px;
  text-align: right;
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
}
.dayrow-num b {
  color: var(--ink);
  margin-right: 4px;
}
.dayrow > i {
  color: var(--muted);
  font-style: normal;
  text-align: right;
}

/* 상세에서 목록으로 돌아가는 길. 상세가 단독 화면이라 반드시 있어야 한다. */
.back-link {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--muted);
  font:
    600 14px "Noto Sans KR",
    sans-serif;
  text-decoration: none;
}
.back-link:hover {
  color: var(--brand);
}

@media (max-width: 1023px) {
  /* 폰에서는 날짜·등락을 위로 올리고 제목을 아래에 둔다. */
  .dayrow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 13px 15px;
  }
  .dayrow-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .dayrow-move {
    grid-column: 1 / 3;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
  }
  .dayrow-body,
  .dayrow-num {
    grid-column: 1 / 3;
  }
  .dayrow-num {
    display: flex;
    gap: 12px;
    text-align: left;
  }
  .dayrow > i {
    display: none;
  }
}

/* ── 주간 안의 날짜별 마감 ───────────────────────────────────────────────── */

/*
 * 주간 종합이 이슈 표를 다시 집계하면 날짜별 화면과 다른 이야기를 하게 된다 — 하루의
 * 결론은 마감 종합이 이미 냈으므로 주간은 그것을 모아 보여준다.
 */
.weekdays {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.weekday {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.weekday:hover {
  border-color: var(--brand);
}
.weekday-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.weekday-head b {
  font:
    700 16px "Noto Sans KR",
    sans-serif;
}
.weekday p {
  margin: 8px 0 0;
  font:
    400 14px "Noto Sans KR",
    sans-serif;
  line-height: 1.55;
}
.weekday small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
}

/* 시세 옆의 기준 표시(장중 / 08-19 종가). 값과 붙어 있어야 오해가 없다. */
.price-line small,
.brief-tags small {
  margin-left: 6px;
  color: var(--muted);
  font:
    500 12px "Noto Sans KR",
    sans-serif;
}

/* 판정 배지 + 설명. 붙어 있어야 무엇에 대한 판정인지 바로 확인된다. */
.tally {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* ── 하단 안전 문구 ──────────────────────────────────────────────────────── */

/*
 * **모든 화면에 같은 문구가 들어간다.** 화면마다 따로 넣으면 새 화면에서 빼먹고, 빠진
 * 화면이 투자 권유처럼 읽힌다 — 뼈대(`shell()`)가 붙인다.
 */
.site-foot {
  margin: 32px auto 0;
  padding: 20px 24px 28px;
  max-width: 1280px;
  border-top: 1px solid var(--line);
}
.site-foot p {
  margin: 0;
  max-width: 900px;
  color: var(--muted);
  font:
    400 12px "Noto Sans KR",
    sans-serif;
  line-height: 1.75;
}
.site-foot-meta {
  margin-top: 8px !important;
  font:
    500 12px "DM Mono",
    monospace !important;
}
@media (max-width: 1023px) {
  .site-foot {
    padding: 18px 15px 24px;
    /* 하단 탭에 가리지 않게 띄운다. */
    margin-bottom: 78px;
  }
}

/* 업종으로 걸러 들어왔을 때 무엇으로 걸렀는지 보여주고 푸는 길을 준다. */
.sector-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--brand);
  border-radius: 100px;
  background: var(--brand-soft);
  color: var(--brand);
  text-decoration: none;
  font:
    600 12px "Noto Sans KR",
    sans-serif;
}

/*
 * 날짜별 ↔ 주간 전환. 둘은 같은 갈래(기록)인데 모바일 탭이 5개라 한쪽만 들어간다 —
 * 화면 안에서 서로 오갈 길을 둔다.
 */
.seg {
  display: inline-flex;
  gap: 2px;
  margin: 14px 0 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface);
}
.seg a {
  padding: 7px 16px;
  border-radius: 100px;
  color: var(--muted);
  text-decoration: none;
  font:
    600 14px "Noto Sans KR",
    sans-serif;
}
.seg a.on {
  background: var(--brand);
  color: var(--brand-ink);
}
.seg a:not(.on):hover {
  color: var(--ink);
}

/*
 * 조건이 어느 이슈의 것인지. **줄을 바꿔 붙인다** — 본문 뒤에 그냥 이으면 한 문장으로
 * 읽혀 조건이 어디서 끝나는지 알 수 없다.
 */
.cond-issue {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface);
  color: var(--brand);
  text-decoration: none;
  font:
    600 12px "Noto Sans KR",
    sans-serif;
}
.cond-issue:hover {
  border-color: var(--brand);
}

/* ── 약관·처리방침 같은 문서 화면 ────────────────────────────────────────── */

.doc h2 {
  margin: 28px 0 10px;
  font-size: 16px;
}
.doc p,
.doc li {
  margin: 0 0 10px;
  max-width: 780px;
  color: var(--ink);
  font:
    400 14px "Noto Sans KR",
    sans-serif;
  line-height: 1.8;
}
.doc ul {
  margin: 0 0 10px;
  padding-left: 18px;
}
.doc-note {
  margin-top: 16px !important;
  padding: 12px 14px;
  border-left: 3px solid var(--brand);
  background: var(--brand-soft);
  color: var(--muted) !important;
  font-size: 13px !important;
}
.doc-foot {
  margin-top: 28px !important;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.doc-foot a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

/* ── 분류 목록 (테마·업종) ───────────────────────────────────────────────── */

/*
 * **목록만 먼저 보여준다.** 옆에 상세를 붙이면 한 화면에 몇 개 안 들어와 무엇이 있는지
 * 훑을 수가 없다 — 고르는 화면과 읽는 화면을 나눈다.
 */
.catgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.catcard {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.catcard:hover {
  border-color: var(--brand);
}
.catcard > b {
  display: block;
  font:
    700 16px "Noto Sans KR",
    sans-serif;
  line-height: 1.45;
}
.catcard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.catcard-meta small {
  color: var(--muted);
  font:
    500 12px "DM Mono",
    monospace;
}

/* ── 도움말 ──────────────────────────────────────────────────────────────── */

/*
 * **설명은 화면에 깔지 않는다.** 한 번 읽으면 되는 문장이 매번 자리를 먹는다 —
 * 물음표를 누른 사람에게만 보여 준다.
 *
 * 크기를 `em` 으로 잡아 옆 글자를 따라가게 한다. 고정 px 로 두면 글자 크기가 다른 자리마다
 * 커 보이거나 작아 보인다.
 */
.help {
  width: 1.35em;
  height: 1.35em;
  /*
   * **손가락이 닿는 넓이를 따로 준다(D-417).** 실측 모바일에서 이 버튼이 14~18px 라
   * 눌러도 잘 안 잡혔다. 보이는 원은 그대로 두고 가상 요소로 44px 를 덮는다 —
   * 원을 키우면 옆 글자와 간격이 무너진다.
   */
  position: relative;
  flex: 0 0 auto;
  margin-left: 8px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  vertical-align: -0.15em;
  cursor: pointer;
}
.help:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/*
 * **떠 있는 층이다.** `position: fixed` 라 문서 흐름을 건드리지 않는다 — 예전에 규칙이
 * 빠져 `static` 으로 그려지면서 페이지 맨 아래에 끼어 화면을 밀어냈다(실측 문서 높이
 * 1402 → 1536).
 */
.help-layer {
  position: fixed;
  z-index: 60;
  max-width: calc(100vw - 24px);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
}
.help-layer[hidden] {
  display: none;
}
.help-layer p {
  margin: 0;
  color: var(--ink);
  font:
    400 14px "Noto Sans KR",
    sans-serif;
  line-height: 1.7;
}
.help-close {
  margin-top: 12px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font:
    600 13px "Noto Sans KR",
    sans-serif;
  cursor: pointer;
}
.help-close:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* 로그인 실패 안내. */
.auth-error {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--down) 30%, transparent);
  border-radius: 4px;
  background: var(--down-soft);
  color: var(--down);
  font:
    600 13px "Noto Sans KR",
    sans-serif;
}

/* ── 로그인·회원가입 폼 ──────────────────────────────────────────────────── */

.auth-card form label {
  display: block;
  margin: 14px 0 0;
  color: var(--ink);
  font:
    600 13px "Noto Sans KR",
    sans-serif;
}
.auth-card form input[type="email"],
.auth-card form input[type="password"],
.auth-card form input[name="nickname"] {
  width: 100%;
  margin-top: 6px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font:
    400 15px "Noto Sans KR",
    sans-serif;
}
.auth-card form input:focus {
  outline: none;
  border-color: var(--brand);
}
.auth-card .hint,
.auth-card .opt {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font:
    400 12px "Noto Sans KR",
    sans-serif;
}
.auth-card .opt {
  display: inline;
  margin-left: 4px;
}

/*
 * **기본 체크박스가 글자보다 커 보였다.** 브라우저 기본 크기는 글자 크기를 안 따라간다 —
 * `em` 으로 잡아 옆 글자에 맞춘다.
 */
.checks {
  display: grid;
  gap: 10px;
  margin: 18px 0 4px;
}
.checks label {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  margin: 0 !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 1.55;
}
.checks input[type="checkbox"] {
  width: 1.05em;
  height: 1.05em;
  margin: 0.25em 0 0;
  flex: 0 0 auto;
  accent-color: var(--brand);
}
.checks a {
  color: var(--brand);
  font-weight: 600;
}
.checks em {
  margin-left: 4px;
  color: var(--down);
  font-style: normal;
  font-weight: 600;
}

/** 연결 전 소셜 버튼. 눌리지 않지만 무엇이 준비 중인지 보인다. */
.social[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.social em {
  margin-left: 6px;
  font-style: normal;
  font-size: 12px;
  opacity: 0.8;
}

/*
 * 영향 방향 앞의 대상 표시. `긍정` 만 있으면 기사 논조나 주가 이야기로 읽힌다 —
 * 무엇에 대한 방향인지 앞에 적는다.
 */
.impact-dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--muted);
  font:
    500 12px "Noto Sans KR",
    sans-serif;
}

/* 목록 방향 칸의 `사업` 머리말. 아래 라벨이 무엇에 대한 방향인지 말해 준다(D-384). */
.dirmark em {
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 0.72;
}

/* 기업 카드·칩의 시세. 없으면 자리를 지우므로 빈 줄이 남지 않는다(D-385). */
.company .quote {
  display: block;
  font-size: 13px;
  color: var(--muted, #6a7484);
  margin: 2px 0 4px;
  font-variant-numeric: tabular-nums;
}
.quote-chip {
  margin-left: 6px;
  font-size: 12px;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

/* 이슈가 무엇에 관한 것인지 — 테마 화면에서 왜 그 이슈가 거기 있는지 보이게 한다(D-399). */
.issue-sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.issue-sectors span {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.7;
}

/* 이 테마를 실제로 다룬 이슈 표시(D-400). 나머지는 구성종목 때문에 딸려온 것이다. */
.issue-sectors span.on {
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
}

/* 문서 화면의 표(개인정보 처리방침 위탁 목록 등). 좁은 화면에서 가로로 넘긴다(D-403). */
.doc .scroll-x {
  overflow-x: auto;
  margin: 12px 0 4px;
}
.doc-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
  font-size: 14px;
}
.doc-table th,
.doc-table td {
  text-align: left;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.doc-table thead th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.doc h3 {
  margin: 20px 0 6px;
  font-size: 15px;
  font-weight: 700;
}

/* 종목 목록 행의 시세 — 이슈 요약 아래 한 줄. 값이 없으면 자바스크립트가 지운다. */
.sector-row .quote,
.mobile-sector .quote { display: block; font-variant-numeric: tabular-nums; opacity: .85; }
.sector-row .quote .pct.up, .mobile-sector .quote .pct.up { color: var(--up); }
.sector-row .quote .pct.down, .mobile-sector .quote .pct.down { color: var(--down); }

/*
 * 파급 추론으로 붙은 종목(D-410). 기사에 이름이 적힌 기업과 근거가 달라서
 * 같은 무게로 보이면 안 된다 — 눈에 띄되 경고처럼 보이지는 않게 둔다.
 */
.company .link-kind.ripple {
  display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; line-height: 1.6; color: var(--muted);
  border: 1px dashed var(--line);
  /* 한 줄로 둔다 — 두 줄로 깨지면 점선 테두리가 어색하게 잘린다(실측). */
  white-space: nowrap;
}

/* 도움말 버튼의 손가락 영역. 보이는 크기는 그대로 두고 닿는 범위만 넓힌다(D-417). */
.help::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
@media (hover: hover) and (pointer: fine) {
  /* 마우스에서는 넓힐 이유가 없다 — 옆 요소의 hover 를 가로챈다. */
  .help::after { display: none; }
}

/* ── 관심 종목 하트 (D-418) ───────────────────────────────────────────────
 * 담긴 것은 채운 빨강, 아닌 것은 빈 하트. 이름 옆에 붙어 글자 흐름을 안 밀도록
 * 세로 가운데로 맞춘다. 손가락 영역은 44px 로 따로 준다.
 */
.heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  vertical-align: -4px;
  cursor: pointer;
  color: var(--muted);
  flex: 0 0 auto;
}
.heart svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.heart.on { color: #e5484d; }
.heart.on svg { fill: #e5484d; stroke: #e5484d; }
.heart.busy { opacity: .45; }
.heart:hover { color: #e5484d; }
.heart:focus-visible { outline: 2px solid var(--accent, #e5484d); outline-offset: 2px; border-radius: 4px; }
/* 눌리는 범위만 넓힌다 — 보이는 하트를 키우면 이름과 간격이 무너진다. */
.heart::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
@media (hover: hover) and (pointer: fine) { .heart::after { display: none; } }

/* 홈의 관심 종목 목록 (D-418). 하트는 링크 밖에 둬서 눌러도 상세로 안 넘어간다. */
.mywatch-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.mywatch-list li { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--line); }
.mywatch-list li:first-child { border-top: 0; }
.mywatch-list a { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 2px;
                  color: inherit; text-decoration: none; min-width: 0; }
.mywatch-list b { font-weight: 600; white-space: nowrap; }
.mywatch-list .quote { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12px; }
.mywatch-list em { font-style: normal; flex: 0 0 auto; }
.mywatch-more { display: inline-block; margin-top: 12px; font-size: 13px;
                 color: var(--muted); text-decoration: none; }
.mywatch-more:hover { color: var(--text); }

/* 목록 끝 더보기(D-444). 목록 폭을 다 쓰고, 눌러야 할 것으로 보이게 둔다. */
.more-host {
  display: block;
  padding: 4px 0 18px;
}
.more-btn {
  display: block;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.more-btn:disabled {
  color: var(--muted);
  cursor: default;
}

/*
 * 기업 검색 필터(D-454·458). 폰에서 한 줄에 셋이 들어간다.
 *
 * **`flex-shrink` 를 0 으로 두면 안 된다.** `1 0 100%` 로 뒀더니 셀렉트가 줄어들지
 * 못해 긴 테마 이름이 폭을 밀어냈다 — 실측 390px 화면에서 504px 이 됐고, 문서가
 * 가로로 넘쳐 화면이 확대되고 고정 내비의 오른쪽 끝(`업종`)이 화면 밖으로 나갔다.
 *
 * 셀렉트는 **내용이 아니라 칸이 폭을 정해야** 한다 — `width: 0` 에 `flex-grow` 로
 * 나눠 갖게 하고, 넘치는 글자는 잘라 낸다.
 */
.filter-picks {
  display: flex;
  flex: 1 1 100%;
  min-width: 0;
  gap: 6px;
  margin-top: 8px;
}
.filter-picks select {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  /* iOS 는 16px 미만 입력칸에 포커스가 가면 화면을 자동으로 확대한다(D-458). */
  font-size: 16px;
  text-overflow: ellipsis;
}