/* ═══════════════════════════════════════════════════════════════════════════
   매거진 (숫자로 보는 동네) — 목록 / 상세
   본문은 원고 마크다운을 변환한 HTML 이라 클래스를 붙일 수 없다. 그래서 `.mag-body` 안의
   태그 선택자로 꾸민다(이 파일에서 태그 선택자를 쓰는 유일한 이유).
   ═══════════════════════════════════════════════════════════════════════════ */

/* 섹션 사이는 스케일의 22px (구현원칙 11). 새 값을 만들지 않는다. */
.mag-list-card,
.mag-more-card { margin-bottom: 22px; }

/* ── 목록 ─────────────────────────────────────────────────────────────── */
/* 카테고리 칩. 🔴 이름을 줄이지 않는다 — 좁은 폭에서 여러 줄로 갈리는 건 괜찮지만
   "우리 동네는 어떤 곳?" 을 "어떤 곳?" 으로 줄이면 카테고리가 다른 말이 된다. */
.mag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mag-chip {
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 12px; white-space: nowrap;
}
.mag-chip.on { background: #1e3a8a; border-color: #1e3a8a; color: #fff; }

.mag-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.mag-row:last-of-type { border-bottom: none; }
/* 날짜와 카테고리 사이는 가운뎃점이 아니라 여백으로 벌린다 (카피 친화어 규칙). */
.mag-meta { font-size: 13px; color: var(--text-faint); margin-bottom: 4px; }
/* 🔴 카테고리는 링크가 아니다 — 파란색을 쓰지 말 것(사용자 지적 2026-08-13).
   이 사이트는 링크에 밑줄을 안 긋고 **색(파랑)으로만** 알린다. 링크가 아닌 글자를 파랗게 하면
   눌러도 안 되는 것을 누르게 만든다. 날짜(faint)와는 굵기와 한 단계 진한 색으로 가른다. */
.mag-cat { color: var(--text-muted); font-weight: 700; margin-left: 10px; }
.mag-title { display: block; font-size: 15px; font-weight: 700; color: var(--primary); line-height: 1.45; }
.mag-empty { font-size: 15px; color: var(--text-muted); padding: 8px 0; }

/* ── 페이징 (trade-list.css `.card-pagination` 정본과 같은 모양) ────────── */
.mag-paging {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--border);
}
.mag-pg-btn {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); font-size: 15px; font-weight: 700;
}
.mag-pg-btn.off { opacity: 0.3; }
.mag-pg-info {
  font-size: 13px; font-weight: 700; color: var(--text-main);
  min-width: 48px; text-align: center; font-variant-numeric: tabular-nums;
}

/* ── hero (목록·상세 공용) ────────────────────────────────────────────── */
/* 🔴 `.hero-subtitle` 의 margin-bottom 24px 은 원래 hero 아래 버튼줄(`.hero-bottom`)과 띄우려는
   값이다. 매거진 hero 엔 그 줄이 없어 그만큼이 파란 상자 안에서 통째로 빈다(구현원칙 12).
   여백을 지우고 상자 아래는 padding 이 잡게 둔다. */
.mag-hero .hero-subtitle { margin-bottom: 0; }
/* 기본 h1.hero-title 은 38px/line-height 1 이라 긴 글 제목이 서로 붙어 읽히지 않는다. */
.mag-hero-title { font-size: 28px; letter-spacing: -1px; line-height: 1.24; }
.mag-hero-eyebrow .mag-hero-date { margin-left: 10px; }

/* ── 상세 본문 ────────────────────────────────────────────────────────── */
/* 🔴 본문은 좁히되 **가운데** 둔다. 읽기 좋은 줄 길이를 넘기면 눈이 다음 줄 시작을 못 찾는데
   (1280px 에서 카드 폭을 다 쓰면 한 줄이 1,180px), 왼쪽에 붙여 두면 오른쪽이 통째로 비어
   구멍으로 읽힌다(사용자 지적 2026-08-13, 460px 공백). 구현원칙 12 제1원칙 그대로 —
   늘려서 채우지 말고 남는 자리를 좌우로 반씩 나눈다.
   🔴 hero 와 하단 목록은 좁히지 않는다(사용자 확정 2026-08-14). 한때 페이지 전체를 808px 로
   좁혔다가 되돌렸다 — 제목 띠와 목록은 원래 너비가 맞다. */
.mag-body { max-width: 760px; margin: 0 auto; }
.mag-article-card { margin-bottom: 22px; }
.mag-body h2 {
  font-size: 19px; font-weight: 800; margin: 26px 0 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.mag-body h2:first-child { margin-top: 0; }
.mag-body h3 { font-size: 16px; font-weight: 700; margin: 20px 0 8px; }
.mag-body p { font-size: 15px; line-height: 1.75; margin-bottom: 14px; }
.mag-body ul,
.mag-body ol { margin: 0 0 14px 20px; }
.mag-body li { font-size: 15px; line-height: 1.75; margin-bottom: 6px; }
.mag-body a { color: var(--primary); }
.mag-body blockquote {
  margin: 0 0 14px; padding: 10px 14px;
  border-left: 3px solid var(--divider); background: var(--bg);
  font-size: 14px; color: var(--text-muted);
}
.mag-body hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

/* 표 — 머리글도 값도 가운데 정렬 (구현원칙 14 ①. 머리만 옮기면 세로줄이 어긋난다). */
.mag-body table {
  width: 100%; border-collapse: collapse; margin: 6px 0 16px;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.mag-body th,
.mag-body td { border-bottom: 1px solid var(--border); padding: 8px 6px; text-align: center; }
/* 🔴 머리글에 `white-space: nowrap` 을 걸지 말 것. 매거진 머리글은 원고가 정하고 문장인 경우가 있다
   ("거래 건수 (2025년 6월 → 2026년 6월)" 24자). nowrap 이면 4칸 표가 796px 을 요구해 768px 에서
   넘쳤다(실측 2026-08-13, 게이트 hscroll+overflow). 구현원칙 14 의 "머리글 개행은 결함" 은
   내가 문구를 고를 수 있는 표 얘기다 — 여기선 줄일 수단이 없고, 넘치는 것이 접히는 것보다 나쁘다.
   낱말 안에서 끊기는 것은 body 의 `word-break: keep-all` 이 막는다. */
.mag-body th { background: var(--bg); color: var(--text-muted); font-weight: 700; }

/* 좁은 폭 — 각 행을 카드로 세로 스택 (구현원칙 10 2순위, `table.dt-stack` 미러).
   🔴 컬럼을 지우거나 가로 스크롤을 주는 것은 금지다. 머리글 행만 접고 이름표를 값마다 붙인다.
   이름표는 마크다운 변환기가 머리글에서 읽어 `data-l` 로 박아 둔다. */
@media (max-width: 700px) {
  .mag-body table,
  .mag-body tbody { display: block; }
  .mag-body thead { display: none; }
  /* 2열 고정 격자 — `table.dt-stack` 정본과 같은 구조다.
     🔴 내용이 열 수를 정하게 하는 방식(flex-wrap + min-width 50%)을 먼저 시도했고 실패했다.
     게이트 pairfit 은 필요폭을 `::before` 라벨을 빼고 재는데(값 자식만 더한다) 그 배치는 라벨
     84px 을 실제로 차지해서, 게이트는 "2열이 들어간다" 하고 브라우저는 1열로 접었다
     (실측 2026-08-13: 360·390px 에서 pairfit 25·29건). 열 수를 고정하면 그 어긋남이 사라진다.
     긴 라벨·값은 반쪽 안에서 접힌다(`keep-all` 이라 낱말 안에서는 안 끊긴다). */
  .mag-body tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start;
    column-gap: 12px; padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  }
  .mag-body tbody tr:last-child { margin-bottom: 0; }
  .mag-body tbody td {
    display: flex; align-items: baseline; justify-content: flex-start; gap: 8px;
    padding: 3px 0; border-bottom: none; text-align: left; white-space: normal;
  }
  /* 좌우로 갈랐으니 가운데 구분선을 넣는다 (구현원칙 10, 사용자 지적 3회째).
     첫 칸이 전폭을 쓰므로 홀수 번째 칸(3·5·7…)이 오른쪽 열이다.
     선은 `--divider` 실선 — `--border` 점선은 티가 안 난다. */
  .mag-body tbody td:nth-child(odd):not(:first-child) {
    border-left: 1px solid var(--divider); padding-left: 12px;
  }
  /* 이름표 폭 84px = 매거진 원고의 가장 긴 머리글("2026년 0.0mm")에 맞춘 값.
     dt-stack 정본은 68px 인데 그건 그쪽 표의 머리글에 맞춘 값이라 여기선 글자가 접힌다.
     🔴 `flex: 0 0 84px`(못 줄어듦)로 두면 안 된다 — 칸의 최소폭이 84+8+값 = 132px 이 되고
     두 열이면 격자가 276px 을 요구해 **레이아웃 뷰포트가 366px 로 밀린다**(실측 2026-08-13:
     360 요청에 366 이 나와 페이지 전체가 잘렸다. `minmax(0,1fr)` 은 칸이 트랙보다 커지는 것을
     막지 못한다). `0 1 84px` + `min-width: 0` 이면 좁을 때 이름표가 낱말 단위로 접힌다. */
  .mag-body tbody td { min-width: 0; }
  /* 값을 감싼 span (`MagazineTableCellRenderer` 가 넣는다). 좁은 칸에서 줄어들 수 있어야 한다. */
  .mag-body tbody td .mag-v { min-width: 0; }
  /* 🔴 이름표는 접히지 않는다(`nowrap`) — 구현원칙 14 ②. 상한을 걸어 접게 했더니 320px 에서
     "아파트 / 매매", "법인이 / 사는 쪽" 으로 갈렸다(실측 2026-08-13, 눈으로 발견. 게이트는 못 잡는다).
     폭은 표마다 다르므로 변환기가 그 표의 가장 긴 이름표에 맞춰 `--mag-label-w` 로 내려 준다.
     이 폭은 열 수 판단에도 그대로 들어간다 — 이름표를 빼고 재면 "두 열이 들어간다" 고 잘못 본다. */
  /* 🔴 폭은 `flex-basis` 가 아니라 `width` 로 준다. 게이트 pairfit 은 필요폭을
     `getComputedStyle(td, '::before').width` 로 재는데, flex-basis 로만 주면 그 값이 `auto` 로 나와
     **0으로 계산**된다(실측 2026-08-13: 라벨 84px 인데 쌍이 83px 로 보고됐다). 그러면 게이트는
     "두 열이 들어간다" 하고 브라우저는 1열로 접어 양쪽이 영원히 어긋난다. `width` 면 같은 숫자를 본다. */
  .mag-body tbody td::before {
    content: attr(data-l); flex: 0 0 auto; width: var(--mag-label-w, 84px); text-align: left;
    white-space: nowrap;
    font-size: 11px; font-weight: 700; color: var(--text-faint);
  }
  /* 첫 칸(이름 칸)은 카드 제목이라 이름표 없이 한 줄 전체를 쓴다. */
  .mag-body tbody td:first-child {
    grid-column: 1 / -1;
    display: block; text-align: left;
    font-size: 14px; font-weight: 700;
    padding: 0 0 6px; margin-bottom: 5px; border-bottom: 1px dashed var(--border);
  }
  .mag-body tbody td:first-child::before { content: none; }
  /* 값 칸 수가 홀수면 마지막 하나가 왼쪽 열에 혼자 서서 오른쪽 반이 빈다 (구현원칙 10).
     그때만 전폭으로 늘린다. 이 칸은 짝수 번째라 구분선 규칙(홀수)에 애초에 안 걸린다. */
  .mag-body tbody tr td:last-child:nth-child(even) { grid-column: 1 / -1; }

  /* 🔴 쌓는 폭은 표마다 다르다. 두 열이 들어갈지는 **값의 폭**이 정하고 쓸 수 있는 폭은 **화면 폭**이
     정하므로, 같은 표가 320px 에선 1열이고 390px 에선 2열인 것이 맞다. 변환기
     (`MagazineTableStackDecision`)가 값 폭을 어림해 아래 표식 중 하나를 tbody 에 붙인다.
     표식이 없으면 700px 아래 전부 두 열이다. 열이 하나면 좌우로 가른 게 아니니 구분선도 지운다. */
  .mag-body tbody tr.mag-stack-700 { grid-template-columns: minmax(0, 1fr); }
  .mag-body tbody tr.mag-stack-700 td:nth-child(odd):not(:first-child) {
    border-left: none; padding-left: 0;
  }

  /* 문장급 이름표 — 값 옆이 아니라 위에 놓는다. 안 줄어드는 이름표가 칸보다 넓으면 격자를 밀어
     레이아웃 뷰포트가 넓어지고 페이지가 잘린다(실측 366px). 여기서는 이름표가 접혀도 된다. */
  .mag-body tbody tr.mag-stack-block { grid-template-columns: minmax(0, 1fr); }
  .mag-body tbody tr.mag-stack-block td {
    display: block; padding: 4px 0;
  }
  .mag-body tbody tr.mag-stack-block td::before {
    display: block; flex: none; white-space: normal; margin-bottom: 2px; word-break: keep-all;
  }
  .mag-body tbody tr.mag-stack-block td:nth-child(odd):not(:first-child) {
    border-left: none; padding-left: 0;
  }
}

@media (max-width: 389px) {
  .mag-body tbody tr.mag-stack-390 { grid-template-columns: minmax(0, 1fr); }
  .mag-body tbody tr.mag-stack-390 td:nth-child(odd):not(:first-child) {
    border-left: none; padding-left: 0;
  }
}

@media (max-width: 359px) {
  .mag-body tbody tr.mag-stack-360 { grid-template-columns: minmax(0, 1fr); }
  .mag-body tbody tr.mag-stack-360 td:nth-child(odd):not(:first-child) {
    border-left: none; padding-left: 0;
  }
}

/* ── 상세 하단 목록 ───────────────────────────────────────────────────── */
/* 🔴 한 행 = 한 줄이다. 메타 줄 + 제목 줄로 두 줄을 쓰면 목록이 본문만큼 자리를 먹는다
   (사용자 지적 2026-08-13). 카테고리 배지와 "지금 보는 글" 배지를 뺀 것이 그 때문이다. */
.mag-more-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  padding-bottom: 8px; border-bottom: 1px solid var(--divider); margin-bottom: 2px;
}
.mag-more-head a { color: var(--primary); font-weight: 600; }
.mag-mini {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.mag-mini:last-of-type { border-bottom: none; }
.mag-mini-date {
  flex: 0 0 auto; font-size: 13px; color: var(--text-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 카테고리는 링크가 아니다 — 파란색 금지(위 `.mag-cat` 과 같은 이유). */
.mag-mini-cat { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.mag-mini-title { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--primary); line-height: 1.5; }
/* 좁은 폭에서는 날짜·카테고리를 첫 줄에 두고 제목을 다음 줄로 내린다.
   한 줄에 셋을 다 밀어 넣으면 제목이 90px 로 짜부라져 여러 줄로 갈린다. */
@media (max-width: 560px) {
  .mag-mini-title { flex: 1 1 100%; }
}
/* 지금 보는 글 — 배지 없이 굵게 + 배경 한 칸으로만 표시한다.
   `.card` 의 좌우 여백 20px 만큼 음수 마진으로 넓혀 칸이 카드 끝까지 닿게 한다. */
.mag-mini.here {
  background: var(--bg); border-left: 3px solid #1e3a8a;
  margin: 0 -20px; padding-left: 17px; padding-right: 20px;
}
.mag-mini.here .mag-mini-date { color: #1e3a8a; font-weight: 700; }
.mag-mini.here .mag-mini-title { color: var(--text-main); font-weight: 700; }

/* ── 메인 페이지 하단 카드 ────────────────────────────────────────────── */
/* 머리(색 막대 + 제목 + 설명)는 메인의 공용 `.grp-hd` 를 그대로 쓴다 — 위 48px 도 거기서 온다.
   🔴 카드 안에 머리를 넣는 방식은 폐기했다: 앞뒤 묶음과 혼자 다르게 보였다(사용자 지적 2026-08-14). */
.mag-main-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* 전체 보기 버튼 — 모양은 메인의 정본 CTA `.mi-hub-link`(monthly-insight.css, 짙은 알약)를 그대로 쓴다.
   여기서는 **자리와 높이만** 손본다: 설명 바로 옆에 서고, 높이는 제목+설명 두 줄에 딱 맞춘다.
   🔴 두 번 되돌린 자리다 — ① 오른쪽 끝(`.cm`)은 1280px 에서 제목과 1,100px 떨어져 안 보였고
   ② 청록 알약은 바로 옆 묶음 막대색과 겹쳐 보였다(사용자 지적 2026-08-14). */
.mag-hub-link {
  flex: 0 0 auto; align-self: stretch;
  display: flex; align-items: center; white-space: nowrap;
}
/* 🔴 글 덩어리는 **늘어나면 안 된다**. `flex: 1 1 0` 을 주면 남는 폭을 다 먹어 버튼이 오른쪽 끝으로
   밀린다(실측 1280px, 2026-08-14 — 사용자가 원한 자리는 설명 *바로 옆*이다).
   `0 1 auto` = 제 내용만큼만 쓰고, 좁아지면 줄어든다(줄바꿈은 아래 미디어쿼리에서만). */
.mag-grp-hd > div:not(.grp-bar) { flex: 0 1 auto; min-width: 0; }

/* 좁은 폭에서는 버튼을 다음 줄로 내린다. 🔴 이때는 글 덩어리가 `flex: 1 1 0` 이라야 한다 —
   기본값(basis auto)이면 flex 가 줄이기 전에 줄바꿈부터 해서 **색 막대만 첫 줄에 혼자 남는다**
   (실측 360px, 2026-08-14). */
@media (max-width: 760px) {
  .mag-grp-hd { flex-wrap: wrap; }
  .mag-grp-hd > div:not(.grp-bar) { flex: 1 1 0; }
  .mag-hub-link { align-self: auto; }
}
.mag-main-item {
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  padding: 12px 13px;
}
.mag-main-meta { font-size: 13px; color: var(--text-faint); margin-bottom: 5px; }
/* 카테고리는 링크가 아니다 — 파란색 금지(`.mag-cat` 과 같은 이유). */
.mag-main-cat { color: var(--text-muted); font-weight: 700; margin-left: 10px; }
/* 🔴 제목은 링크다 → 파랑. 이 사이트는 밑줄을 안 긋고 **색으로만** 링크를 알리므로
   검정으로 두면 눌리는 줄 모른다(사용자 지적 2026-08-14). 목록 페이지 `.mag-title` 과 같은 색. */
.mag-main-title { display: block; font-size: 14px; font-weight: 700; color: var(--primary); line-height: 1.45; }

@media (max-width: 760px) {
  .mag-main-grid { grid-template-columns: minmax(0, 1fr); }
}