/* 핫이슈 — 뉴스 대시보드 톤 (DESIGN 4절). 바탕 아주 옅은 회색, 상승은 주홍(#c2410c)만, 하락은 파랑.
   순위 숫자는 tabular-nums. 최대 폭 1080px, PC 2단(좌 순위 / 우 이슈·사이트), ~767 모바일 1단. */

:root {
  color-scheme: light dark;   /* 스크롤바·기본 위젯도 OS 테마를 따르게 */
  --bg: #f6f6f7;
  --surf: #fff;
  --ink: #1f2328;
  --mut: #6a717f;   /* 옛 #6b7280 은 --bg 위에서 4.48 로 탈락 — 색상·채도는 두고 명도만 내렸다(4.54) */
  --line: #e5e7eb;
  --up: #c2410c;
  --dn: #1d4ed8;
  --up-bg: #fff1eb;
  --onfill: #fff;   /* 색을 채운 바탕 위에 얹는 글자 */
  --r: 8px;
  --gutter: 32px;
  --pad: 24px;

  /* famousbros 공용 부품(fb.css) 값 — 기존 토큰을 가리킨다(G:\workspace\DESIGN.md '토큰').
     실측(2026-10-16, WCAG): 라이트 --ink 흰 면 15.80 · --mut 흰 면 4.90(--bg 위 4.54) · 흰 글자 on --up 5.18.
     다크 --ink on --surf 13.74 · --mut 6.60 · --onfill(#121416) 글자 on 다크 --up 6.70(다크 hex 는 아래 다크 블록 — export_app_pages 가 다크 값이 라이트 CSS 에 없는지 hex 로 검사한다).
     강조는 원래부터 로고·현재 주제에 쓰던 주홍 --up 그대로다. */
  --fb-bg: var(--bg);
  --fb-surface: var(--surf);
  --fb-ink: var(--ink);
  --fb-muted: var(--mut);
  --fb-line: var(--line);
  --fb-accent: var(--up);
  --fb-on-accent: var(--onfill);
  --fb-display: inherit;
  --fb-max: 1080px;  /* .wrap 과 같은 폭 */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.5 "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  word-break: keep-all;
}
a { color: inherit; text-decoration: none; }
/* 키보드 포커스 — 이 사이트에는 링이 아예 없었다. :focus-visible 이 몇 군데 있었지만
   전부 글자색만 바꿔서, 키보드로는 지금 어디에 있는지 알 수 없었다.
   --up 은 바탕 4.79 · 카드 5.18, 다크 6.70 · 6.12 로 3:1 을 넘는다. */
:focus-visible { outline: 2px solid var(--up); outline-offset: 2px; }
p, ol, ul, h1, h2, h3 { margin: 0; }
img { max-width: 100%; }
ol, ul { padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: var(--gutter); }

/* 상단 */
/* 틀은 fb.css 의 .fb-nav(떠 있는 유리 막대, 폰에서는 주제 링크가 아래 탭바). 현재 주제는 aria-current 로만 칠한다. */
.mark { font-size: 22px; font-weight: 900; letter-spacing: -.03em; color: var(--up); white-space: nowrap; }
.fb-foot .mark { color: var(--up); }

/* 카드 */
.page { padding-block: 24px 40px; display: flex; flex-direction: column; gap: 20px; }
.card { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r); padding: var(--pad); display: flex; flex-direction: column; gap: 16px; }
.sec { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.sec__t { font-size: 20px; font-weight: 900; letter-spacing: -.02em; }
.sec__r { font-size: 12.5px; color: var(--mut); white-space: nowrap; }
.crumb { font-size: 13px; color: var(--mut); display: flex; gap: 8px; align-items: center; }
.crumb a:hover { color: var(--up); text-decoration: underline; }
.desc { color: var(--mut); font-size: 14px; }
.basis { font-size: 13px; color: var(--mut); line-height: 1.6; }
.empty { padding: 24px 0; text-align: center; color: var(--mut); font-size: 14px; }
.note { font-size: 12px; color: var(--mut); }

/* 홈: 주제 카드 */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tcard { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tcard:hover, .tcard:focus-visible { border-color: var(--up); }
.tcard__name { font-size: 17px; font-weight: 900; letter-spacing: -.02em; }
.tcard__desc { font-size: 12.5px; color: var(--mut); }
.tcard__none { font-size: 12.5px; color: var(--mut); padding-top: 4px; }
.tcard__top { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; font-size: 14px; }
.tcard__top li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tcard__top .kw { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.rn { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--mut); }
.tcard__top .rn { width: 16px; }

/* 기간 탭 */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
/* 알약 버튼이므로 44px 을 맞춘다 — 21+14+2=37px 이었다. */
.tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--mut); background: var(--bg); }
.tabs a:hover, .tabs a:focus-visible { color: var(--ink); border-color: var(--ink); }
.tabs a.on { background: var(--ink); border-color: var(--ink); color: var(--onfill); font-weight: 700; }

/* 순위 표 */
table.rank { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rank th, .rank td { text-align: left; padding-inline: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* 표 안 링크의 탭 대상. 🔥 패딩을 더하면 안 된다 — 9px 두 쪽에 얹으면 20줄 순위표가 행마다 60px 을 넘어
   주 화면 높이가 확 늘어난다. 행 높이만 39.75 → 44px 로 맞추고 세로 가운데 정렬로 둔다
   (20줄 합계 795 → 880px, +85px). 키워드 앵커는 그 44px 를 꽉 채워 실제 탭 대상이 되게 한다. */
.rank td { height: 44px; }
.rank th { padding-block: 9px; font-size: 12px; font-weight: 700; color: var(--mut); }
.rank tbody tr:last-child td { border-bottom: 0; }
.rank .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank td.rn { font-size: 15px; color: var(--ink); }
.rank td.rn.is-top { color: var(--up); }
.rank .kw { font-weight: 700; display: flex; align-items: center; min-height: 44px; }
.rank .kw:hover, .rank .kw:focus-visible { text-decoration: underline; text-underline-offset: 3px; color: var(--up); }
/* .basis-col 은 2026-09-14 에 화면에서 근거 열을 빼면서 쓰이지 않게 됐다.
   되살릴 때를 위해 규칙은 남긴다(HotRank.basis 값 자체는 계속 저장된다). */
.rank .basis-col { font-size: 12px; color: var(--mut); white-space: nowrap; }
.tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); white-space: nowrap; }
.tag:hover { border-color: var(--up); color: var(--up); }

/* 변동 */
.chg { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chg svg { display: block; }
.chg--up { color: var(--up); }
.chg--down { color: var(--dn); }
.chg--same { color: var(--mut); }   /* 옛 #b3b6bb 는 흰 바탕에서 2.03 이었다 */
.new { font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 1; color: var(--up); background: var(--up-bg); border-radius: 4px; padding: 3px 6px; white-space: nowrap; }

/* 2단: 좌 순위 / 우 이슈·사이트 */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.issue { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.issue:last-child { border-bottom: 0; padding-bottom: 0; }
.issue__kw { font-size: 15px; font-weight: 900; position: relative; }
.issue__kw a:hover { color: var(--up); text-decoration: underline; }
/* 줄 전체가 링크다. HTML 은 그대로 두고 앵커를 제목 줄 전체로 펼친다 — a 안에 a 를 넣지 않고
   말줄임·baseline 정렬도 깨지 않는다. "N건" 글자까지 눌러도 키워드 페이지로 간다.
   ⚠️ 덮은 줄은 글자를 끌어 선택하기 어려워진다 — '누르러 온 줄' 에만 쓴다. */
.issue__kw a::after { content: ""; position: absolute; inset: 0; }
.issue__kw small { font-size: 12px; color: var(--mut); font-weight: 400; margin-left: 4px; }
.news { display: flex; flex-direction: column; }
.news li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; }
.news li:first-child { border-top: 0; padding-top: 0; }
/* 기사 줄 전체가 그 기사 링크다(제목·언론사·시각이 전부 같은 기사를 가리킨다). 줄을 덮으면
   어디를 눌러도 원문으로 나간다 — 이 절들이 하는 일이 그것이다.
   🔥 네이버 카페글·블로그 절(.card.naver)은 뺐다: 거기 .desc 는 읽는 본문 발췌라 끌어서
   선택할 수 있어야 하고, 약관상 결과를 그대로 보여 주는 절이다. 제목만 링크로 둔다. */
.card:not(.naver) .news li { position: relative; }
.card:not(.naver) .news li a.ext::after { content: ""; position: absolute; inset: 0; }
.news a.ext { font-weight: 500; font-size: 14px; line-height: 1.45; }
.news a.ext:hover, .news a.ext:focus-visible { text-decoration: underline; text-underline-offset: 3px; color: var(--up); }
.news .desc { font-size: 13px; color: var(--mut); line-height: 1.5; }
.src { font-size: 12px; color: var(--mut); }
.sites { display: flex; flex-direction: column; }
.sites li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); position: relative; }
.sites li:first-child { border-top: 0; padding-top: 0; }
/* 줄 전체가 그 사이트 링크다 — 종류 알약·비고까지 눌러도 그 사이트로 간다. */
.sites li a.ext::after { content: ""; position: absolute; inset: 0; }
.sites a.ext { font-weight: 700; font-size: 14px; }
.sites a.ext:hover { text-decoration: underline; color: var(--up); }
.kind { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--mut); }
.card.naver { border-left: 3px solid #03c75a; }

/* 키워드 페이지 */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tile { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tile__l { font-size: 12px; font-weight: 700; color: var(--mut); }
.tile__v { font-size: 26px; font-weight: 900; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tile__v small { font-size: 12px; font-weight: 700; color: var(--mut); letter-spacing: 0; margin-left: 2px; }
.tile__s { font-size: 11.5px; color: var(--mut); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chart { width: 100%; height: auto; display: block; }
.chart text { font-size: 11px; fill: var(--mut); font-variant-numeric: tabular-nums; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .line { fill: none; stroke: var(--up); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: rgba(194, 65, 12, .08); }
.chart .end { fill: var(--up); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--mut); }

/* 소개·방침·약관 */
.prose { max-width: 70ch; display: flex; flex-direction: column; gap: 14px; line-height: 1.75; font-size: 14.5px; }
.prose h2 { margin: 12px 0 0; font-size: 16.5px; font-weight: 900; letter-spacing: -.02em; }
.prose ul { padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 6px; }
.prose a { color: var(--up); text-decoration: underline; text-underline-offset: 3px; }
.prose code { font-size: 13px; background: var(--bg); padding: 1px 5px; border-radius: 4px; }
/* 꼬리 틀은 fb.css 의 .fb-foot */

/* 태블릿 */
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* PC: 2단 */
@media (min-width: 1024px) {
  .grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; }
  .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* 모바일 */
@media (max-width: 767px) {
  :root { --gutter: 16px; --pad: 16px; }
  .page { padding-block: 16px 32px; gap: 16px; }
  .cards { grid-template-columns: 1fr; }
  .sec { flex-direction: column; align-items: flex-start; gap: 4px; }
  .sec__t { font-size: 18px; }
  .rank .basis-col { display: none; }
  .rank th, .rank td { padding-inline: 6px; }   /* 세로는 위 .rank td 의 height: 44px 가 잡는다 */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile__v { font-size: 22px; }
}

/* 다크 — OS 설정만 따른다(수동 토글은 쿠키·JS 가 필요해 넣지 않았다).
   상승 주홍·하락 파랑은 색상(H)을 고정하고 명도만 올려 대비를 맞췄다(--up H17 유지, L 40→62).
   네이버 절 좌측선(#03c75a)은 브랜드색이라 손대지 않았다. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121416; --surf: #1b1d21; --ink: #e6e8ea; --mut: #9aa3ad; --line: #2a2e33;
    --up: #f2794c; --dn: #7ba7f5; --up-bg: #2e1a12;
    --onfill: #121416;   /* .tabs a.on 바탕이 --ink 라 다크에선 밝아진다 → 글자는 어둡게 */
  }
  .chart .area { fill: rgba(242, 121, 76, .1); }   /* 채움도 밝아진 --up 을 따라간다 */
}

/* 쿠팡 파트너스 칸(issues/coupang.py) — 이 사이트 토큰만 쓴다(강조는 링크 hover·포커스와 같은 --up). 새 색은 사진 바탕 #fff 하나. */
.cpn { margin: 24px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surf); }
.page > .cpn { margin: 0; }   /* .page 의 gap 이 칸 사이를 띄운다 */
.cpn__h { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.cpn__d { margin: 4px 0 8px; font-size: 12px; color: var(--mut); }
.cpn__l { list-style: none; margin: 0; padding: 0; }
.cpn__l li + li { border-top: 1px solid var(--line); }
.cpn__i { position: relative; display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 12px 0; }
.cpn__img { flex: none; width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: #fff; }
.cpn__t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cpn__a { color: var(--ink); font-weight: 700; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.cpn__a::after { content: ""; position: absolute; inset: 0; }
.cpn__a:focus-visible { outline: none; }
.cpn__a:focus-visible::after { outline: 2px solid var(--up); outline-offset: 2px; border-radius: 8px; }
.cpn__i:hover .cpn__a { text-decoration: underline; }
.cpn__n { margin: 0; color: var(--mut); font-size: 14px; line-height: 1.5; }
.cpn__go { color: var(--up); font-size: 14px; font-weight: 700; }
.cpn--top { padding: 8px 12px; }
.cpn--top .cpn__h { font-size: 14px; }
.cpn--top .cpn__i { padding: 4px 0; }
.cpn--top .cpn__img { width: 48px; height: 48px; }
.cpn--top .cpn__n { display: none; }