/* ===== fonts.css ===== */
/* ============================================================
   웹 글꼴 — (R4 2026-10-07 §8) 모든 기기에서 같은 글꼴로 보이게
   - 한글 SUIT 2.0.5 (sun-typeface/SUIT 공식 배포 fonts/static/woff2 의 Medium·ExtraBold 를 **바이트 그대로**, 서브셋·이름 바꾸기 없음)
     SIL Open Font License 1.1 · Reserved Font Name "SUIT" — 원문 /assets/fonts/suit/LICENSE.txt
   - 라틴·숫자 라벨 Space Grotesk 2.0.0 (floriankarsten/space-grotesk 공식 저장소 가변 woff2, 바이트 그대로)
     SIL Open Font License 1.1 — 원문 /assets/fonts/space-grotesk/LICENSE.txt
   - font-display: swap — 글꼴이 오기 전에는 기기 글꼴로 먼저 보인다(빈 화면 없음)
   - 구글 폰트 CDN 은 쓰지 않는다(탈구글 방침). 캐시는 vercel.json 의 /assets/fonts/ 1년 immutable
   ============================================================ */
/* SUIT 는 정적 굵기 2개(500 본문 · 800 제목)만 — 가변 글꼴(610KB)은 느린 4G 폰에서 글꼴 적용이 8.4초,
   정적 2개(합계 335KB)는 4.6초(로컬 실측, LCP 는 둘 다 영향 없음). 600·700 은 800 으로, 900(로고)도 800 으로 그려진다 */
@font-face {
  font-family: "SUIT";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/suit/SUIT-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "SUIT";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/suit/SUIT-ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk/SpaceGrotesk-Variable.woff2") format("woff2-variations"),
       url("/assets/fonts/space-grotesk/SpaceGrotesk-Variable.woff2") format("woff2");
}

/* ===== style.css ===== */
/* ============================================================
   짬프레스 공통 스타일
   - 색상은 :root 변수로 관리 (data/site.config.js 의 색과 맞춰 수정)
   - 모바일 우선 반응형
   ============================================================ */

:root {
  --main: #0e0e10;        /* (R4 2026-10-07 §8) 잉크 블랙 — 스튜디오 인포그래픽이 이 :root 를 읽는다. 화면은 layouts/magazine.css 가 덮어씀 */
  --main-dark: #0e0e10;
  --accent: #ff5a1f;      /* 짬 오렌지 (면·점 전용, 작은 글자는 magazine.css 의 #c23a06) */
  --accent-soft: #fdeee6;
  --bg: #ffffff;
  --bg-soft: #f4f4f1;
  --text: #0e0e10;
  --text-soft: #5f5f66;
  --line: #e7e7e3;
  --radius: 12px;
  --shadow: 0 2px 10px rgba(22, 50, 79, 0.07);
  --w-content: 1080px;
  --w-article: 760px;
}

/* ---------- 리셋 & 기본 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.75;
  word-break: keep-all;
}
img { max-width: 100%; height: auto; }
a { color: var(--main); text-decoration: none; }
a:hover { color: var(--accent); }

.container { max-width: var(--w-content); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--main); color: #fff; padding: 8px 16px; z-index: 100;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- 헤더 ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: 16px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--main); color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px; letter-spacing: -0.5px;
}
.brand-text { font-weight: 800; font-size: 20px; color: var(--main); line-height: 1.2; display: flex; flex-direction: column; }
.brand-text small { font-weight: 500; font-size: 11px; color: var(--text-soft); letter-spacing: 1.5px; }

.site-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.site-nav a {
  padding: 8px 12px; border-radius: 8px;
  font-size: 15px; color: var(--text);
}
.site-nav a:hover { background: var(--bg-soft); color: var(--main); }
.site-nav a.active { color: var(--accent); font-weight: 700; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--main); margin: 5px 0; transition: 0.2s; }

@media (max-width: 960px) {  /* 햄버거 전환 기준 — 메뉴가 두 줄로 꺾이지 않도록 4개 사이트 공통 960px */
  .nav-toggle { display: block; }
  /* 햄버거 → X 애니메이션 (aria-expanded 상태 기반) */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav {
    display: none; width: 100%; flex-direction: column; padding: 4px 0 12px;
    animation: navDrop 0.18s ease-out;
  }
  .site-nav.open { display: flex; }
  /* 터치 타겟 확대(44px+) + 마지막 항목 구분선 제거 */
  .site-nav a { padding: 13px 8px; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 15.5px; }
  .site-nav a:last-child { border-bottom: none; }
  .site-nav a.active { border-left: 3px solid var(--accent); padding-left: 12px; background: var(--accent-soft); }
  @keyframes navDrop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ---------- 히어로 ---------- */
.hero {
  background: linear-gradient(160deg, var(--main) 0%, var(--main-dark) 100%);
  color: #fff; padding: 72px 0;
}
.hero-kicker { color: var(--accent); font-weight: 700; letter-spacing: 0.5px; margin-bottom: 12px; }
.hero h1 { font-size: clamp(28px, 4.5vw, 42px); line-height: 1.35; margin-bottom: 18px; }
.hero-desc { max-width: 640px; color: #d6dee7; margin-bottom: 28px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.btn {
  display: inline-block; padding: 12px 22px; border-radius: 10px;
  font-weight: 700; font-size: 15px; transition: 0.15s; border: 1.5px solid transparent;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #d3731f; color: #fff; }
.btn-ghost { border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.08); }
.page-body .btn-ghost, .notfound .btn-ghost { border-color: var(--main); color: var(--main); }
.page-body .btn-ghost:hover, .notfound .btn-ghost:hover { background: var(--bg-soft); }

/* ---------- 섹션 공통 ---------- */
/* 주의: .container 와 같은 요소에 쓰이므로 좌우 패딩을 덮어쓰지 않게 상하만 지정 */
.section { padding-top: 56px; padding-bottom: 56px; }
.section-sm { margin: 40px 0; }
.section-tint { background: var(--bg-soft); }
.section h2, .section-sm h2 { font-size: 24px; color: var(--main); margin-bottom: 18px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-desc { color: var(--text-soft); margin: -8px 0 20px; }
.more-link { font-weight: 700; font-size: 14px; color: var(--accent); }

.two-col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- 카테고리 카드 ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 960px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
.cat-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 16px; display: flex; flex-direction: column; gap: 6px;
  transition: 0.15s; box-shadow: var(--shadow);
}
.cat-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.cat-icon { font-size: 26px; }
.cat-name { font-weight: 800; color: var(--main); }
.cat-short { font-size: 13px; color: var(--text-soft); line-height: 1.5; }

/* ---------- 글 카드 ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .card-grid { grid-template-columns: 1fr; } }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: 0.15s; overflow: hidden;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card-link { display: block; padding: 22px; height: 100%; color: inherit; }
/* 카드 썸네일 (REBUILD02 §7) — 이미지가 있는 카드만. 글자 위쪽으로 꽉 차게 */
.card.has-thumb .card-link { padding-top: 0; }
.card-thumb {
  display: block; width: calc(100% + 44px); margin: 0 -22px 16px; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-soft);
}
.card-link:hover { color: inherit; }
.card-cat { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.card-title { font-size: 17px; line-height: 1.5; color: var(--main); margin-bottom: 8px; }
.card-sub {
  font-size: 14px; color: var(--text-soft); line-height: 1.6; margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { font-size: 12.5px; color: #93a1af; }

/* 칼럼 카드: 일반 글과 구분되는 톤 */
.column-card { background: var(--accent-soft); border-color: #f2ddc4; }
.column-card:hover { border-color: var(--accent); }
.column-label { color: var(--accent); font-weight: 800; font-size: 13px; letter-spacing: 0.3px; }

/* ---------- 홈 하단 ---------- */
.owner-strip { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 800px) { .owner-strip { grid-template-columns: 1fr; } }
.cta-box {
  background: var(--main); color: #fff; border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.cta-box h2 { color: #fff; font-size: 20px; margin: 0; }
.cta-box p { color: #c9d4de; font-size: 14.5px; }

/* ---------- 운영자 박스 ---------- */
.author-box {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; margin: 36px 0 0;
}
.home-author { margin: 0; background: #fff; box-shadow: var(--shadow); }
.author-avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--main); color: #fff; font-weight: 800; font-size: 20px;
  display: grid; place-items: center;
}
.author-avatar.big { width: 76px; height: 76px; font-size: 30px; }
.author-name { font-size: 17px; font-weight: 800; color: var(--main); margin-bottom: 4px; }
.author-role { font-size: 13.5px; color: var(--text-soft); font-weight: 500; }
.author-bio { font-size: 14.5px; color: var(--text-soft); }
.owner-link { border-bottom: 2px solid var(--accent); padding-bottom: 1px; }

/* ---------- 페이지 공통 ---------- */
/* 주의: .container 와 같은 요소에 쓰이므로 좌우 패딩을 덮어쓰지 않게 상하만 지정 */
.page-body { padding-top: 36px; padding-bottom: 72px; }
.page-head { margin: 18px 0 32px; max-width: var(--w-article); }
.page-head h1 { font-size: clamp(26px, 4vw, 34px); color: var(--main); line-height: 1.4; margin-bottom: 12px; }
.page-head p { color: var(--text-soft); }

.breadcrumb { font-size: 13px; color: var(--text-soft); display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb .sep { color: #b6c0ca; }
.breadcrumb span[aria-current] { color: var(--text-soft); max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.count { font-size: 14px; color: var(--text-soft); font-weight: 500; }
.catlist-item { border-top: 1px solid var(--line); padding: 28px 0; max-width: var(--w-article); }
.catlist-item h2 { font-size: 21px; margin-bottom: 10px; }
.catlist-item p { color: var(--text-soft); margin-bottom: 10px; }

.plainlist { list-style: none; }
.plainlist li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- 글 상세 ---------- */
.article-body article { max-width: var(--w-article); margin: 0 auto; }
.article-head { margin: 20px 0 28px; }
.article-cat { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.article-cat a { color: var(--accent); }
.article-head h1 { font-size: clamp(25px, 4vw, 33px); line-height: 1.45; color: var(--main-dark); margin-bottom: 12px; }
.article-sub { font-size: 16.5px; color: var(--text-soft); margin-bottom: 14px; }
.article-meta { font-size: 13.5px; color: #93a1af; }

.article-body section { margin: 36px 0; }
.article-body h2 { font-size: 21px; color: var(--main); margin-bottom: 14px; padding-top: 8px; }
.article-body p { margin-bottom: 14px; font-size: 16px; }
.body-list { margin: 4px 0 14px 22px; }
.body-list li { margin-bottom: 8px; font-size: 15.5px; }

/* 요약 박스 */
.summary-box {
  background: var(--bg-soft); border-left: 4px solid var(--main);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 22px; margin: 28px 0;
}
.box-title { font-weight: 800; color: var(--main); margin-bottom: 10px; }
.summary-box ul { margin-left: 20px; }
.summary-box li { margin-bottom: 6px; font-size: 15px; }

/* 운영자 한마디 (2026-09-28) — 운영자가 직접 쓴 한 줄. 목록과 따로, 글 끝 실수·체크 상자 뒤 */
.owner-note {
  border: 1px dashed var(--main); border-radius: var(--radius);
  padding: 18px 22px; margin: 28px 0; background: var(--bg-soft); min-width: 0;
}
.owner-note .box-title { margin-bottom: 6px; }
.owner-note .owner-note-text { font-size: 15.5px; line-height: 1.8; overflow-wrap: anywhere; margin-bottom: 0; }
@media (max-width: 600px) { .owner-note { padding: 16px 18px; } }

/* 글 대표 이미지 (REBUILD02 §7, 2026-09-20) — 글 주제를 한 장으로 보여 주는 삽화 */
.article-hero { margin: 4px 0 26px; }
.article-hero img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius); background: var(--bg-soft);
}

/* 본문 이미지 (REBUILD03 §1, 2026-09-21) — 글 중간에 들어가는 그림.
   대표 이미지보다 조금 작게, 위아래 여백을 넉넉히 줘서 글 흐름을 끊지 않게 한다. */
.article-bodyimg { margin: 26px 0; }
.article-bodyimg img {
  /* 비율은 그림에 맡긴다 (2026-09-22) — 16:9 로 자르면 글자 있는 정사각 그림이 잘려 깨져 보였다.
     자리 잡기는 템플릿이 적어 주는 실제 width/height 가 맡는다 */
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); background: var(--bg-soft);
}
.article-bodyimg figcaption {
  margin-top: 8px; font-size: 0.86rem; color: var(--text-soft); text-align: center;
}


/* 글 도표 (REBUILD02 §1, 2026-09-20) — 글의 데이터로 그린 SVG.
   폭이 좁아지면 그림도 같이 줄어든다 (SVG 라 흐려지지 않는다) */
.article-fig { margin: 28px 0; }
.article-fig img {
  display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto;
  border-radius: var(--radius); background: #fff;
}
.article-fig figcaption {
  margin-top: 8px; font-size: 13px; color: var(--text-soft); text-align: center;
}

/* 본문 표 (REBUILD02 §6, 2026-09-20) — 비교 내용을 목록 대신 표로.
   좁은 화면에서는 표만 옆으로 밀어 본다 (본문은 넘치지 않는다) */
.table-wrap { margin: 24px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table {
  border-collapse: collapse; width: 100%; min-width: 420px;
  font-size: 14px; background: #fff;
}
.table-wrap caption {
  caption-side: top; text-align: left; font-weight: 700; color: var(--main);
  font-size: 15px; padding-bottom: 8px;
}
.table-wrap th, .table-wrap td {
  border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top;
  line-height: 1.6;
}
.table-wrap thead th { background: var(--bg-soft); font-weight: 700; color: var(--main); white-space: nowrap; }
.table-wrap tbody th { background: var(--bg-soft); font-weight: 600; width: 22%; }
.table-wrap tbody tr:nth-child(even) td { background: #fcfdfe; }

/* 직접 확인해 보실 곳 (REBUILD02 §2, 2026-09-20) — 글에서 언급한 기관의 공식 창구 */
.source-box {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; margin: 28px 0; background: var(--bg-soft);
}
.source-box h2 { font-size: 18px; color: var(--main); }
.source-note { font-size: 13px; color: var(--text-soft); margin: 6px 0 12px; }
.source-box ul { list-style: none; display: grid; gap: 8px; }
.source-box li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  font-size: 15px; padding-left: 18px; position: relative;
}
.source-box li::before { content: "↗"; position: absolute; left: 0; color: var(--accent); font-size: 13px; }
.source-box li span { font-size: 13px; color: var(--text-soft); }

/* 목차 */
.toc {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; margin: 28px 0; background: #fff;
}
.toc-title { font-weight: 800; color: var(--main); margin-bottom: 8px; font-size: 15px; }
.toc ol { margin-left: 22px; }
.toc li { margin: 4px 0; font-size: 14.5px; }

/* 실수/체크리스트 박스 */
.mistakes-box {
  background: #fdf3f0; border-left: 4px solid #d9634a;
  border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 22px;
}
.mistakes-box h2 { color: #b44a34; font-size: 18px; }
.mistakes-box ul { margin-left: 20px; }
.mistakes-box li { margin-bottom: 8px; font-size: 15px; }

.check-box {
  background: #f0f7f1; border-left: 4px solid #4a9159;
  border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 22px;
}
.check-box h2 { color: #3a7447; font-size: 18px; }
.checklist { list-style: none; }
.checklist li { margin-bottom: 8px; font-size: 15px; padding-left: 26px; position: relative; }
.checklist li::before { content: "✓"; position: absolute; left: 2px; color: #4a9159; font-weight: 800; }

/* FAQ */
.faq details {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 18px; margin-bottom: 10px; background: #fff;
}
.faq summary { font-weight: 700; cursor: pointer; color: var(--main); font-size: 15.5px; }
.faq details p { margin: 10px 0 2px; font-size: 15px; color: var(--text-soft); }

.article-notice {
  font-size: 13.5px; color: #93a1af; border-top: 1px dashed var(--line);
  padding-top: 16px; margin-top: 40px;
}

/* 관련 글 */
.related { margin-top: 36px; }
.related h2 { font-size: 18px; }
.related ul { list-style: none; }
.related li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.tag-col {
  font-size: 11px; background: var(--accent-soft); color: var(--accent);
  padding: 2px 8px; border-radius: 20px; font-weight: 700; margin-left: 6px;
}

/* ---------- 칼럼 상세 ---------- */
.column-article .article-head { border-left: 4px solid var(--accent); padding-left: 18px; }
.column-para { font-size: 16.5px; margin-bottom: 20px; }

/* ---------- 운영자 페이지 ---------- */
.author-hero { display: flex; gap: 22px; align-items: center; }
.guest-note { color: var(--text-soft); margin-bottom: 20px; font-size: 15px; }
.principle-list { list-style: none; }
.principle-list li {
  padding: 10px 0 10px 24px; position: relative; font-size: 15px;
}
.principle-list li::before { content: "—"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }

/* ---------- 일반 문서(prose) ---------- */
.prose { max-width: var(--w-article); }
.prose h2 { font-size: 20px; color: var(--main); margin: 32px 0 12px; }
.prose p { margin-bottom: 14px; }
.prose ul { margin: 0 0 14px 22px; }
.prose li { margin-bottom: 6px; }
.legal p, .legal li { font-size: 15px; }

/* ---------- 문의 폼 ---------- */
.contact-form { max-width: 560px; margin: 8px 0 36px; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--main); }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 15px; background: #fff;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--accent);
}
.contact-form .btn { border: none; cursor: pointer; }
.form-note { font-size: 13px; color: #93a1af; margin-top: 12px; }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: 90px 20px; }
.nf-code { font-size: 80px; font-weight: 800; color: var(--line); line-height: 1; margin-bottom: 12px; }
.notfound h1 { color: var(--main); margin-bottom: 12px; }
.notfound p { color: var(--text-soft); margin-bottom: 24px; }
.notfound .hero-actions { justify-content: center; }

/* ---------- 푸터 ---------- */
.site-footer { background: var(--main-dark); color: #b9c5d1; margin-top: 40px; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; padding: 48px 20px 28px;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } }
.footer-brand { color: #fff; font-weight: 800; font-size: 18px; margin-bottom: 10px; }
.footer-brand small { font-weight: 500; font-size: 11px; letter-spacing: 1.5px; color: #8fa0b0; }
.footer-about p { font-size: 14px; margin-bottom: 8px; }
.footer-owner a { color: #fff; }
.footer-owner a:hover { color: var(--accent); }
.footer-links { display: flex; gap: 48px; }
.footer-links-title { color: #fff; font-weight: 700; font-size: 13.5px; margin-bottom: 10px; }
.footer-links a { display: block; color: #b9c5d1; font-size: 14px; padding: 4px 0; }
.footer-links a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 18px 20px; font-size: 13px; color: #8fa0b0; }

/* ============================================================
   모바일 UI/UX 개선 (2026-08 개선분)
   - 가로 오버플로우 원천 차단 (좌우 잘림 방지)
   - 소형 화면 여백·타이포 최적화
   - 맨 위로 버튼
   ============================================================ */

/* 가로 스크롤/잘림 방지: 어떤 요소가 넘쳐도 페이지가 옆으로 밀리지 않게 */
html, body { overflow-x: clip; max-width: 100%; }
body { overflow-wrap: break-word; }  /* keep-all 유지하되 긴 토큰(URL 등)은 강제 줄바꿈 */
.card, .cat-card, .panel, .summary-box, .toc, .mistakes-box, .check-box { min-width: 0; }

/* 브레드크럼: 줄바꿈 대신 가로 스와이프 (제목이 길어도 레이아웃 안 깨짐) */
@media (max-width: 600px) {
  .breadcrumb {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px;
  }
  .breadcrumb::-webkit-scrollbar { display: none; }
  .breadcrumb a, .breadcrumb span { white-space: nowrap; }
}

/* 소형 화면 여백·타이포 최적화 */
@media (max-width: 600px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .hero { padding: 44px 0; }
  .hero-desc { font-size: 15px; }
  .section { padding-top: 40px; padding-bottom: 40px; }
  .section h2, .section-sm h2 { font-size: 21px; }
  .page-body { padding-top: 24px; padding-bottom: 56px; }
  .page-head { margin: 14px 0 24px; }
  .card-grid { gap: 14px; }
  .card-link { padding: 18px; }
  .cat-grid { gap: 10px; }
  .cat-card { padding: 16px 14px; }
  .article-body h2 { font-size: 19.5px; }
  .article-sub { font-size: 15.5px; }
  .summary-box, .toc, .mistakes-box, .check-box { padding: 16px 18px; }
  .author-box { padding: 18px; gap: 12px; }
  .author-hero { gap: 14px; }
  .author-avatar.big { width: 60px; height: 60px; font-size: 24px; }
  .footer-grid { padding: 36px 16px 22px; }
  .footer-links { gap: 32px; }
  .btn { padding: 12px 18px; font-size: 14.5px; }
  .cta-box { padding: 22px; }
}

/* 터치 반응: 탭 하이라이트 제거 + 카드 눌림 피드백 */
a, button { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .card:active, .cat-card:active { transform: scale(0.985); border-color: var(--accent); }
}

/* 맨 위로 버튼 (main.js가 생성, 600px 이상 스크롤 시 표시) */
.back-to-top {
  position: fixed; right: 16px; bottom: 20px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--main); color: #fff; font-size: 18px;
  box-shadow: 0 4px 14px rgba(22, 50, 79, 0.3);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.back-to-top.show { opacity: 0.92; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { opacity: 1; }

/* ============================================================
   (SEO 2026-10-05 §A-4·9) 카테고리 "글 목록" h2 · 글 머리 "YYYY년 M월 기준" · 홈 최신 글 갱신일
   ============================================================ */
.section-title { font-size: 18px; color: var(--main); margin: 8px 0 14px; }
.section-title span { font-weight: 500; font-size: 14px; color: var(--text-soft); }
.article-basis { font-size: 13px; color: var(--text-soft); margin: -4px 0 8px; }
.section-updated { font-size: 13px; color: var(--text-soft); margin: 0 auto 0 4px; }

/* ============================================================
   (P5 2026-10-05) 쓸모 페이지 — 용어 사전 /tools/glossary/ · 홈 띠 · 글 하단 "이 글의 용어" 칩
   기존 토큰(--main·--accent·--line·--bg-soft·--radius)만 쓴다. 테크구닝에서 옮겨 온 블록 — 색은 이 사이트 토큰을 따른다
   ============================================================ */
.glossary .page-head { margin-bottom: 24px; }
.glossary-meta { font-size: 13px; margin-top: 8px; }

/* 색인 — 묶음별 칸, 항목은 용어 + 한 줄 정의 */
.glossary-index {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 40px;
}
.glossary-index h2 { font-size: 18px; color: var(--main); margin-bottom: 12px; }
.glossary-index-group + .glossary-index-group { margin-top: 18px; }
.glossary-index-head { font-size: 15px; color: var(--main); margin-bottom: 6px; }
.glossary-index-head .count { font-size: 12px; font-weight: 500; color: var(--text-soft); margin-left: 4px; }
.glossary-index ul {
  list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px;
}
.glossary-index li a { display: block; padding: 6px 0; border-bottom: 1px dashed var(--line); color: var(--text); }
.glossary-index li a:hover { color: var(--accent); }
.glossary-index li b { display: block; color: var(--main); font-size: 14.5px; }
.glossary-index li span { display: block; font-size: 12.5px; color: var(--text-soft); line-height: 1.5; }

/* 본문 — 묶음 머리 + 용어 블록 */
.glossary-group { max-width: var(--w-article); }
.glossary-group-head {
  font-weight: 800; color: var(--accent); font-size: 14px; letter-spacing: 0.02em;
  border-bottom: 2px solid var(--accent); padding-bottom: 6px; margin: 44px 0 4px;
}
.glossary-term { padding: 22px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.glossary-term h2 { font-size: 21px; color: var(--main); line-height: 1.4; margin-bottom: 8px; }
.glossary-short { font-weight: 700; color: var(--text); margin-bottom: 8px; }
.glossary-body { color: var(--text); margin-bottom: 12px; }
.glossary-label { font-size: 12.5px; font-weight: 800; color: var(--text-soft); margin-bottom: 4px; }
.glossary-rel ul { list-style: none; margin-bottom: 10px; }
.glossary-rel li { padding: 3px 0; font-size: 14.5px; }
.glossary-rel li::before { content: "→ "; color: var(--accent); }
.glossary-top { font-size: 12.5px; text-align: right; margin-top: 4px; }
.glossary-top a { color: var(--text-soft); }
.glossary-group[id] { scroll-margin-top: 80px; }

/* 칩 — 함께 보기·이 글의 용어 공용 */
.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: 13.5px; color: var(--main); line-height: 1.5;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }

/* 글 하단 "이 글의 용어" */
.glossary-chips { margin-top: 36px; }
.glossary-chips h2 { font-size: 18px; }
.glossary-chips-desc { font-size: 13.5px; color: var(--text-soft); margin-bottom: 10px; }

/* 홈 띠 */
.glossary-band-wrap { margin-top: -24px; margin-bottom: 8px; }
.glossary-band {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px;
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 16px 20px; color: var(--text);
}
.glossary-band:hover { border-color: var(--accent); color: var(--text); }
.glossary-band-title { font-weight: 800; color: var(--main); }
.glossary-band-desc { grid-column: 1; font-size: 13.5px; color: var(--text-soft); }
.glossary-band-go { grid-column: 2; grid-row: 1 / span 2; font-size: 20px; color: var(--accent); }

@media (max-width: 600px) {
  .glossary-index { padding: 16px; }
  .glossary-index ul { grid-template-columns: minmax(0, 1fr); }
  .glossary-term h2 { font-size: 19px; }
  .glossary-band-wrap { margin-top: -12px; }
}

/* (SEO 2026-10-05 §B-17 보정, 2026-10-06) WebP 용 <picture> 포장이 격자·플렉스의 한 칸을 차지하지 않게 — 안의 <img> 가 예전처럼 직접 자식인 것처럼 놓인다.
   짬프레스·러브시큐 카드(.card-thumb { grid-row: 1 / span 4 })가 포장 때문에 제목이 그림 아래로 흘러내린 것을 고침 (사용자 폰 캡처). */
picture { display: contents; }

/* ===== layouts/magazine.css ===== */
/* ============================================================
   레이아웃 타입 — magazine v2 "잉크와 짬 오렌지" (R4 2026-10-07 §8)
   REBUILD03 §1(2026-09-21)에서 만든 magazine 타입을 REBUILD04 4단계 확정 시안으로 다시 썼다.

   ★ 이 파일이 하는 일
     style.css(뼈대)를 **덮어쓰기만** 한다. 뼈대는 건드리지 않는다(스튜디오 CSS 지문은 둘을 합쳐 본다).
     빌드는 fonts.css → style.css → 이 파일 순서로 이어 붙여 site.css 한 벌로 낸다(templates/layout.js siteCss).

   ★ 확정 톤 (REBUILD04 §8 맨 위 확정 블록)
     흰 바탕 · 잉크 블랙 #0E0E10 · 포인트 1색 짬 오렌지 #FF5A1F(면·점·번호 전용, 작은 글자는 #C23A06, 검정 위 #FF7A45)
     · 안개 회색 #F4F4F1(해설 판·그림 자리) · 선 #E7E7E3 1px / 구획 2px 검정
     · 그림자·그라데이션 없음 · 카드·판은 각지게(모서리 0), 칩·태그만 둥글게
     · 한글 SUIT(제목 800·자간 -0.045~-0.05em, 본문 500·폰 17px·줄간 1.8) + 라틴·숫자 라벨 Space Grotesk
   ★ 폰: 가로 밀기 0 — 섹션은 줄바꿈 칩, 표는 폭 맞춤(넓은 표는 카드로 쌓기), 차례·출처는 접기
   ★ 주의: .container 와 같은 요소에는 padding 축약형을 쓰지 않는다(옛 잘림 사고) — 위아래·좌우를 따로 쓴다
   ============================================================ */

:root {
  /* 확정 토큰 */
  --ink: #0e0e10;
  --paper: #ffffff;
  --fog: #f4f4f1;
  --hair: #e7e7e3;
  --jj: #ff5a1f;          /* 면·점·번호·진행 막대 — 글자에는 쓰지 않는다 */
  --jj-text: #c23a06;     /* 작은 글자용 오렌지 (흰 바탕 대비 4.5 이상) */
  --jj-dark: #ff7a45;     /* 검정 위 오렌지 */
  --muted: #5f5f66;       /* 보조 글자 (흰·안개 회색 바탕 모두 대비 4.5 이상) */
  --sub: #45454b;         /* 부제 */
  --dim: #a9a9b0;         /* 검정 위 보조 글자 */
  --dark-line: #2a2a2f;
  --font-ko: "SUIT", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-label: "Space Grotesk", "SUIT", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* 뼈대(style.css) 토큰을 새 톤으로 — 뼈대 규칙들이 그대로 새 색을 쓰게 */
  --main: var(--ink);
  --main-dark: var(--ink);
  --accent: var(--jj-text);
  --accent-soft: var(--fog);
  --bg: var(--paper);
  --bg-soft: var(--fog);
  --text: var(--ink);
  --text-soft: var(--muted);
  --line: var(--hair);
  --radius: 0px;
  --shadow: none;
  --w-content: 1200px;
  --w-article: 700px;
}

/* ---------- 기본 ---------- */
body {
  font-family: var(--font-ko);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--paper);
}
a { color: inherit; }
a:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--jj); outline-offset: 2px; }
.container { --gutter: 32px; padding-left: var(--gutter); padding-right: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.eyebrow {
  font-family: var(--font-label); font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--jj-text); line-height: 1.4; margin: 0;
}
h1, h2, h3 { letter-spacing: -0.04em; }
.skip-link { background: var(--ink); }
.more-link { color: var(--ink); font-weight: 800; font-size: 14px; }
.more-link:hover { color: var(--ink); }

/* ---------- 유틸 띠 (PC) ---------- */
.util-band { border-bottom: 1px solid var(--hair); }
.util-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 4px 20px; padding-top: 7px; padding-bottom: 7px; font-size: 13px; color: var(--muted);
}
.util-date { font-family: var(--font-label); font-weight: 500; letter-spacing: 0.06em; }
.util-links { display: flex; gap: 20px; }
.util-links a { color: var(--muted); }
.util-links a:hover { color: var(--ink); }

/* ---------- 마스트헤드 + 섹션 태그 칩 ---------- */
.site-header { position: static; border-bottom: 1px solid var(--ink); background: var(--paper); }
.header-inner { min-height: 0; padding-top: 16px; padding-bottom: 16px; gap: 12px 40px; flex-wrap: wrap; justify-content: flex-start; }
.brand { gap: 10px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 14px; height: 14px; border-radius: 0; background: var(--jj); display: inline-block; flex: none;
}
.brand-text {
  display: inline; font-size: 30px; font-weight: 900; letter-spacing: -0.05em; color: var(--ink); line-height: 1.1;
}
.sec-nav { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 420px; align-items: center; }
.sec-nav .sec-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px;
  border-radius: 20px; border: 1px solid var(--hair); background: var(--paper); color: var(--ink);
  font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none;
}
.sec-nav .sec-chip:hover { border-color: var(--ink); background: var(--paper); color: var(--ink); text-decoration: none; }
.sec-chip .dot { width: 6px; height: 6px; border-radius: 3px; background: #c9c9c4; flex: none; }
.sec-chip .n { font-family: var(--font-label); font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; }
.sec-nav .sec-chip.is-active, .sec-nav .sec-chip.is-hot { background: var(--ink); border-color: var(--ink); color: #fff; }
.sec-nav .sec-chip.is-active:hover, .sec-nav .sec-chip.is-hot:hover { background: var(--ink); color: #fff; }
.sec-chip.is-active .dot, .sec-chip.is-hot .dot { background: var(--jj); }
.sec-chip.is-active .n, .sec-chip.is-hot .n { color: var(--jj-dark); }
.sec-nav .sec-chip.active { color: #fff; font-weight: 700; } /* 뼈대 .site-nav a.active 덮기 */
.nav-util { display: none; }
.sheet-title { display: none; }
.nav-toggle {
  width: 44px; height: 44px; padding: 0; margin-left: auto; color: var(--ink);
  align-items: center; justify-content: center; border-radius: 0;
}
.nav-toggle svg path { transition: transform 0.2s, opacity 0.2s; transform-origin: 12px 12px; }
.nav-toggle[aria-expanded="true"] .l1 { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .l2 { transform: translateY(-4px) rotate(-45deg); }

/* 읽기 진행 막대 — 글·칼럼 페이지 맨 위에 고정, main.js 가 폭을 바꾼다 */
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; background: var(--fog); z-index: 70; }
.read-progress span { display: block; height: 3px; width: 0; background: var(--jj); }

/* ---------- 브레드크럼 ---------- */
.breadcrumb { font-size: 13px; color: var(--muted); gap: 8px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: #b8b8b3; }

/* ============================================================
   홈
   ============================================================ */
.home-intro {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px;
  padding-top: 22px; padding-bottom: 18px;
}
.home-intro h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.5; margin: 0; color: var(--ink); }
.home-intro p { font-size: 14px; color: var(--muted); margin: 0; }
.home-intro + .home-hero { position: relative; }

/* 히어로 슬라이더 (R4 2026-10-07 §8 히어로 슬라이더) — 옛 리드 해설 1장 자리.
   슬라이드는 한 칸(grid-area 1/1)에 겹쳐 쌓는다 → 높이 = 가장 긴 장, 장이 바뀌어도 높이 고정(CLS 0).
   지금 장이 아닌 장은 visibility:hidden(JS 없이도 포커스·낭독 제외). PC: 글(5) 왼쪽 · 그림(7) 오른쪽 / 폰: 그림 위 */
.home-hero { padding-top: 36px; padding-bottom: 32px; }
.hs-stage { display: grid; overflow: hidden; padding: 4px; margin: -4px; touch-action: pan-y; }
.hs-slide {
  grid-area: 1 / 1; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "text fig";
  gap: 40px; align-items: center;
  visibility: hidden; opacity: 0; transform: translateX(var(--hs-from, 24px));
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}
.hs-slide.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s; }
.hs-fig { grid-area: fig; display: block; min-width: 0; }
.hs-fig img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--fog);
}
.hs-text { grid-area: text; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* 진행 막대 — 지금 장의 남은 시간(오렌지 2px). 끝나면(animationend) main.js 가 다음 장으로 */
.hs-bar { height: 2px; background: var(--hair); margin-top: 28px; overflow: hidden; }
.hs-bar span { display: block; height: 2px; width: 100%; background: var(--jj); transform-origin: 0 50%; transform: scaleX(0); }
.home-hero.is-run .hs-bar span { animation: hs-fill var(--hs-ms, 6500ms) linear forwards; }
.home-hero.is-run.is-hold .hs-bar span { animation-play-state: paused; }
@keyframes hs-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* 아래쪽 컨트롤 — 섹션 이름 탭(줄바꿈 칩, 가로 밀기 0) · 장 번호 · 이전·일시정지·다음(44px) */
.hs-ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 14px; }
.hs-tabs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.hs-tab {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 18px;
  border: 1px solid var(--hair); background: var(--paper); color: var(--ink);
  font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none;
}
.hs-tab:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.hs-tab[aria-current="true"], .hs-tab[aria-current="true"]:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.hs-btns { display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* JS 가 준비되기 전(또는 JS 없음)에는 단추 자리만 잡아 두고 감춘다 — 나타날 때 밀림 없음 */
.home-hero:not(.is-ready) .hs-btn { visibility: hidden; }
.hs-count { font-family: var(--font-label); font-size: 14px; font-weight: 500; letter-spacing: 0.06em; color: var(--muted); margin-right: 8px; white-space: nowrap; }
.hs-count b { color: var(--ink); font-weight: 700; }
.hs-btn {
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--hair); border-radius: 22px; background: var(--paper); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.hs-btn:hover { border-color: var(--ink); }
.hs-play .i-play { display: none; }
.hs-play[aria-pressed="true"] .i-play { display: block; }
.hs-play[aria-pressed="true"] .i-pause { display: none; }
.lead-title { font-size: 44px; line-height: 1.18; font-weight: 800; letter-spacing: -0.045em; margin: 0; overflow-wrap: anywhere; }
.lead-title a { color: var(--ink); }
.lead-sub {
  font-size: 17px; line-height: 1.6; color: var(--sub); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.byline-s { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--muted); margin: 0; }
.byline-s strong { color: var(--ink); }
.avatar {
  width: 28px; height: 28px; border-radius: 14px; background: var(--ink); color: #fff; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-label); font-size: 12px; font-weight: 700; letter-spacing: 0;
}

/* 최근 해설 4 — 2px 검정 머리선 + 번호 */
.home-recent { padding-top: 0; padding-bottom: 44px; }
.recent-list {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px;
}
.recent-list a {
  display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 2px solid var(--ink);
  color: var(--ink); text-decoration: none; height: 100%;
}
.recent-list a:hover .rc-title { text-decoration: underline; text-underline-offset: 3px; }
.rc-top { display: flex; justify-content: space-between; font-family: var(--font-label); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.rc-n { color: var(--jj-text); }
.rc-cat { color: var(--muted); letter-spacing: 0; font-family: var(--font-ko); }
.rc-title { font-size: 19px; line-height: 1.42; font-weight: 800; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.rc-date { font-size: 13px; color: var(--muted); }
.rc-thumb { display: none; }

/* 섹션 머리 공통 */
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 8px; }
.sec-head h2, .home-cats > h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.3; margin: 0; color: var(--ink); }
.sec-head p { font-size: 14px; color: var(--muted); margin: 0; }

/* 오늘의 브리핑 띠 (N단계 데이터가 있을 때만 그려진다) */
.brief-band { background: var(--ink); color: #fff; }
.brief-band .container { padding-top: 48px; padding-bottom: 52px; }
.brief-band .eyebrow { color: var(--jj-dark); }
.brief-band h2 { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; margin: 6px 0 0; color: #fff; }
.brief-desc { font-size: 15px; color: var(--dim); margin: 6px 0 0; }
.brief-grid {
  margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 1px; background: var(--dark-line); border: 1px solid var(--dark-line);
}
.brief-card { background: var(--ink); padding: 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.brief-top { display: flex; justify-content: space-between; font-family: var(--font-label); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--jj-dark); }
.brief-top span + span { color: var(--dim); }
.brief-card h3 { font-size: 19px; line-height: 1.42; font-weight: 800; letter-spacing: -0.03em; color: #fff; overflow-wrap: anywhere; }
.brief-card p { font-size: 14px; line-height: 1.6; color: #d4d4d8; }
.brief-card p strong { color: #fff; }
.brief-bg { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #1b1b1f; font-size: 14px; font-weight: 700; color: #fff; }
.brief-bg span { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.08em; color: var(--jj-dark); }
.brief-src { font-size: 13px; color: var(--dim); }
.brief-bg:hover, .brief-src:hover { color: #fff; }

/* 주제 묶음 8 — 큰 번호 */
.home-clusters { padding-top: 52px; padding-bottom: 44px; }
.home-clusters, .home-cats { position: relative; }
.home-clusters::before, .home-cats::before, .home-intro + .home-hero::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--hair);
}
.cluster-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
.cluster-grid a { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--hair); color: var(--ink); text-decoration: none; height: 100%; }
.cluster-grid a:hover .cg-name { text-decoration: underline; text-underline-offset: 3px; }
.cg-n { font-family: var(--font-label); font-size: 28px; font-weight: 700; line-height: 1; color: var(--jj); min-width: 40px; }
.cg-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cg-name { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.4; }
.cg-hub { font-size: 14px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.cg-count { font-size: 12px; color: var(--muted); font-family: var(--font-label); letter-spacing: 0.06em; }

/* 분야별 최신 — 카테고리 5칸 */
.home-cats { padding-top: 44px; padding-bottom: 44px; }
.home-cats > h2 { margin-bottom: 20px; }
.cat-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.cat-col { min-width: 0; }
.cat-col-head {
  display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 800; padding-bottom: 10px;
  border-bottom: 2px solid var(--ink); color: var(--ink);
}
.cat-col-head .n { font-family: var(--font-label); font-size: 11px; font-weight: 500; color: var(--muted); }
.cat-col-head span[aria-hidden] { margin-left: auto; }
.cat-col ul { list-style: none; }
.cat-col li a { display: block; font-size: 15px; line-height: 1.5; font-weight: 600; padding: 12px 0; color: var(--ink); overflow-wrap: anywhere; }
.cat-col li + li a { border-top: 1px solid var(--hair); }

/* 칼럼(큰 인용) + 용어 사전 */
.home-colgloss { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; padding-top: 8px; padding-bottom: 64px; align-items: start; }
.home-columns h2, .home-glossary h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; margin: 4px 0 8px; color: var(--ink); }
.home-glossary h2 { font-size: 24px; margin-bottom: 6px; }
.quote-list { list-style: none; margin-bottom: 16px; }
.quote-list a {
  display: block; padding: 16px 0; border-bottom: 1px solid var(--hair);
  font-size: 20px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.4; color: var(--ink);
}
.home-glossary { background: var(--fog); padding: 28px; min-width: 0; }
.hg-desc { font-size: 14px; color: var(--muted); margin: 0 0 16px; }
.tag-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tag-chips a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 19px;
  background: var(--paper); border: 1px solid var(--hair); font-size: 14px; font-weight: 600; color: var(--ink);
}
.tag-chips a:hover { border-color: var(--ink); text-decoration: none; }

/* ============================================================
   글 페이지 v2
   ============================================================ */
.art-wrap { display: flex; flex-direction: column; padding-top: 32px; padding-bottom: 72px; }
.art-wrap > .breadcrumb { order: 0; }
.art-wrap > .article-head { order: 1; }
.art-wrap > .article-hero { order: 2; }
.art-wrap > .short-answer { order: 3; }
.art-wrap > .art-grid { order: 4; }

.article-head { margin: 26px 0 0; max-width: none; border-bottom: 0; padding-bottom: 0; }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 14px; font-size: 14px; }
.kicker .eyebrow { font-size: 13px; }
.kicker-cat { font-weight: 700; color: var(--muted); }
.kicker-cluster { color: var(--ink); }
.kicker-cluster b { font-weight: 800; }
.kc-pos { font-family: var(--font-label); font-weight: 700; color: var(--jj-text); letter-spacing: 0.02em; }
.kicker-cluster a { font-weight: 700; }
.article-head h1 {
  font-size: 52px; line-height: 1.16; font-weight: 800; letter-spacing: -0.05em; color: var(--ink);
  max-width: 960px; margin: 0; overflow-wrap: anywhere;
}
.article-sub { margin: 18px 0 0; max-width: 760px; font-size: 20px; line-height: 1.6; color: var(--sub); }

/* 바이라인 */
.byline {
  margin-top: 26px; padding-top: 14px; padding-bottom: 14px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
}
.by-who { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.by-who:hover { text-decoration: none; }
.by-who:hover .owner-name { text-decoration: underline; text-underline-offset: 3px; }
.by-who .avatar { width: 40px; height: 40px; border-radius: 20px; font-size: 15px; }
.by-name { display: flex; flex-direction: column; line-height: 1.35; }
.by-name strong { font-size: 15px; font-weight: 800; }
.by-name span { font-size: 13px; color: var(--muted); }
.by-dates { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--muted); margin: 0; }
.by-dates time { font-family: var(--font-label); letter-spacing: 0.02em; }
.by-dates .article-basis { margin: 0; font-size: 13px; color: var(--muted); }
.by-badge { color: var(--jj-text); font-weight: 700; }
.by-badge.is-fix { color: var(--ink); }

/* 대표 그림 — PC 21:9 넓게, 폰 3:2 */
.article-hero { margin: 32px 0 0; }
.article-hero img { aspect-ratio: 21 / 9; object-fit: cover; border-radius: 0; background: var(--fog); }

/* 짧은 답 — 검정 판 (answer 있을 때만) */
.short-answer { background: var(--ink); color: #fff; padding: 26px 28px; margin-top: 40px; max-width: var(--w-article); }
.short-answer h2.eyebrow { font-size: 12px; letter-spacing: 0.12em; color: var(--jj-dark); margin: 0; padding: 0; }
.short-answer p { margin: 10px 0 0; font-size: 21px; line-height: 1.6; font-weight: 700; letter-spacing: -0.02em; }

/* 본문 2단 — 왼쪽 글(최대 700) + 오른쪽 따라오는 차례(1100px 이상) */
.art-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; margin-top: 40px; align-items: start; }
.art-main { min-width: 0; max-width: var(--w-article); }
.art-rail { display: none; }

.article-body article, .art-main { margin: 0; }
.art-main p { font-size: 18px; line-height: 1.8; margin: 0 0 20px; }
.art-main h2 {
  font-size: 30px; line-height: 1.32; font-weight: 800; letter-spacing: -0.04em; color: var(--ink);
  margin: 56px 0 14px; padding-top: 0; scroll-margin-top: 24px;
}
.art-main [id] { scroll-margin-top: 24px; }
.body-list { margin: 0 0 20px 22px; }
.body-list li { font-size: 17px; line-height: 1.75; margin-bottom: 8px; }
.body-list li::marker { color: var(--jj); }
/* 본문 문장 속 링크 — 오렌지 밑줄 · (R4 2026-10-07 §2단계) links 칸(templates/inline-links.js 의 .inline-link)·칼럼 문단도 같은 모양 */
.body-sec p a, .body-sec li a, .owner-note a, .faq details p a, .column-para a, a.inline-link {
  color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--jj);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
/* (R4 2026-10-07 §2단계) 누르기 전 손끝 확인 — 밑줄이 진해지고 글자는 그대로(오렌지 글자색은 대비 미달이라 쓰지 않는다) */
a.inline-link:hover, a.inline-link:focus-visible { text-decoration-thickness: 3px; text-decoration-color: var(--jj-text); }

/* 요점 01~ */
.keypoints { margin: 0; }
.keypoints h2.eyebrow { font-size: 13px; color: var(--muted); margin: 0 0 12px; padding: 0; letter-spacing: 0.1em; line-height: 1.4; }
.keypoints ol { list-style: none; border-bottom: 1px solid var(--hair); }
.keypoints li { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid var(--hair); font-size: 17px; line-height: 1.65; }
.kp-n { font-family: var(--font-label); font-weight: 700; color: var(--jj-text); flex: none; line-height: 1.65; }

/* 차례 — 접기(1100px 미만) */
.toc { border-radius: 0; background: var(--paper); }
.toc-fold { border: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--hair); padding: 0; margin: 28px 0 0; }
.toc-fold summary, .source-box summary {
  min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 15px; font-weight: 800; cursor: pointer; list-style: none;
}
.toc-fold summary::-webkit-details-marker, .source-box summary::-webkit-details-marker { display: none; }
.toc-fold summary::after, .source-box summary::after { content: "+"; font-family: var(--font-label); font-weight: 700; font-size: 18px; margin-left: 4px; }
.toc-fold[open] summary::after, .source-box[open] summary::after { content: "−"; }
.sum-meta { font-family: var(--font-label); font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0.08em; margin-left: auto; }
.toc-fold ol { margin: 0 0 14px 22px; padding: 0; }
.toc-fold li { margin: 4px 0; font-size: 15px; line-height: 1.6; }
.toc-fold li::marker { font-family: var(--font-label); color: var(--muted); font-size: 13px; }

/* 바로 가기 — 폰: 줄바꿈 태그 / 레일: 네모 상자 */
.jump-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.jump-tags a {
  min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 20px;
  border: 1px solid var(--hair); font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.jump-tags a span, .jump-boxes a span { font-family: var(--font-label); color: var(--jj-text); }
.jump-tags a:hover, .jump-boxes a:hover { border-color: var(--ink); text-decoration: none; }
.jump-boxes { display: flex; flex-direction: column; gap: 8px; }
.jump-boxes a {
  min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--hair);
  font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none;
}

/* 오른쪽 따라오는 차례 */
.toc-rail { border: 0; padding: 0; margin: 0; }
.toc-rail .eyebrow { font-size: 12px; color: var(--muted); padding-bottom: 10px; }
.toc-rail ol { list-style: none; margin: 0; border-left: 2px solid var(--hair); }
.toc-rail li { margin: 0; font-size: 14px; line-height: 1.5; }
.toc-rail a { display: block; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); font-weight: 500; }
.toc-rail a:hover { color: var(--ink); text-decoration: none; }
.toc-rail a.is-on { border-left-color: var(--jj); color: var(--ink); font-weight: 800; }

/* 도표·본문 그림 — 각지게 */
.article-fig { margin: 32px 0; }
.article-fig img, .article-bodyimg img { border-radius: 0; }
.article-fig figcaption, .article-bodyimg figcaption { font-size: 13px; color: var(--muted); text-align: left; }
.article-bodyimg { margin: 28px 0; }

/* 표 — 2px 머리선 · 캡션 아래 · 가로 스크롤 없음(폭 맞춤) */
.table-wrap { margin: 32px 0; overflow: visible; }
.table-wrap table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 16px; line-height: 1.55; background: transparent; }
.table-wrap caption {
  caption-side: bottom; text-align: left; font-size: 13px; font-weight: 500; color: var(--muted); padding: 10px 0 0;
}
.table-wrap th, .table-wrap td {
  border: 0; border-bottom: 1px solid var(--hair); padding: 12px 10px; text-align: left; vertical-align: top;
  overflow-wrap: anywhere; word-break: keep-all;
}
.table-wrap thead tr { border-bottom: 2px solid var(--ink); }
.table-wrap thead th { background: transparent; color: var(--ink); font-weight: 800; white-space: normal; border-bottom: 2px solid var(--ink); }
.table-wrap thead th.col-head { font-size: 13px; color: var(--muted); }
.table-wrap tbody th { background: transparent; font-weight: 800; width: 22%; }
.table-wrap tbody tr:nth-child(even) td { background: transparent; }
.table-wrap th:first-child, .table-wrap td:first-child { padding-left: 0; }

/* 짬프레스 해설 — 회색 판 (editorialNote 있을 때만) */
.jj-note { margin: 40px 0; padding: 28px; background: var(--fog); }
.jj-note .eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.12em; color: var(--ink); }
.jj-note .sq { width: 10px; height: 10px; background: var(--jj); display: inline-block; }
.jj-note p:last-child { margin: 10px 0 0; font-size: 19px; line-height: 1.65; font-weight: 600; letter-spacing: -0.02em; }

/* 실수·체크 — 각진 판, 색 면 없이 */
.mistakes-box, .check-box {
  background: transparent; border: 0; border-left: 0; border-radius: 0; border-top: 2px solid var(--ink);
  padding: 18px 0 4px; margin: 48px 0 0;
}
.mistakes-box h2, .check-box h2 { font-size: 22px; color: var(--ink); margin: 0 0 12px; }
.mistakes-box ul { list-style: none; margin: 0; }
.mistakes-box li, .checklist li { font-size: 16.5px; line-height: 1.7; padding: 10px 0 10px 28px; margin: 0; position: relative; border-bottom: 1px solid var(--hair); }
.mistakes-box li:last-child, .checklist li:last-child { border-bottom: 0; }
.mistakes-box li::before {
  content: ""; position: absolute; left: 4px; top: 21px; width: 10px; height: 2px; background: var(--jj);
}
.checklist li::before {
  content: ""; position: absolute; left: 2px; top: 17px; width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 0;
}
.checklist li::after {
  content: ""; position: absolute; left: 7px; top: 19px; width: 5px; height: 9px;
  border-right: 2px solid var(--jj); border-bottom: 2px solid var(--jj); transform: rotate(45deg);
}

/* 운영자 한마디 — 큰 인용 */
.owner-note { margin: 48px 0; padding: 22px 0 0; border: 0; border-top: 2px solid var(--ink); background: transparent; border-radius: 0; }
.owner-note blockquote { margin: 0; }
.art-main .owner-note .owner-note-text { font-size: 23px; line-height: 1.55; font-weight: 700; letter-spacing: -0.03em; margin: 0; overflow-wrap: anywhere; }
.owner-note figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* FAQ */
.faq { margin-top: 48px; }
.faq h2 { margin-top: 0; }
.faq details { border: 0; border-top: 1px solid var(--hair); border-radius: 0; padding: 0; margin: 0; background: transparent; }
.faq details:last-of-type { border-bottom: 1px solid var(--hair); }
.faq summary { font-size: 17px; font-weight: 800; color: var(--ink); padding: 14px 32px 14px 0; position: relative; list-style: none; line-height: 1.5; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-family: var(--font-label); font-weight: 700; color: var(--jj-text); }
.faq details[open] summary::after { content: "−"; }
.art-main .faq details p { font-size: 16.5px; color: var(--sub); margin: 0 0 16px; line-height: 1.75; }

/* 출처와 확인 창구 */
.source-box { border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: 0; margin: 56px 0 0; background: transparent; }
.source-box summary h2 { font-size: 20px; margin: 0; letter-spacing: -0.03em; }
.source-cols { display: flex; flex-wrap: wrap; gap: 24px 40px; padding: 4px 0 8px; }
.source-cols > div { flex: 1 1 260px; min-width: 0; }
.source-cols h3.eyebrow { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.art-main .source-note { font-size: 13px; color: var(--muted); margin: 0 0 10px; line-height: 1.6; }
.source-box ol { margin: 0; padding-left: 20px; display: block; }
.source-box li { display: list-item; font-size: 15px; line-height: 1.6; padding: 4px 0; position: static; }
.source-box li::before { content: none; }
.source-box li::marker { font-family: var(--font-label); color: var(--muted); }
.source-box li a { font-weight: 700; color: var(--ink); }
.source-box li span { font-size: 13px; color: var(--muted); }

/* 변경 기록 */
.changelog { margin-top: 32px; padding: 20px 24px; border: 1px solid var(--hair); }
.art-main .changelog h2 { font-size: 16px; margin: 0 0 12px; letter-spacing: -0.02em; }
.changelog ol { list-style: none; }
.changelog li { display: flex; gap: 14px; font-size: 14px; line-height: 1.6; padding: 3px 0; }
.changelog time { font-family: var(--font-label); color: var(--muted); white-space: nowrap; }
.changelog .is-up { color: var(--jj-text); }
.art-main .changelog-note { font-size: 13px; color: var(--muted); margin: 12px 0 0; }

.article-notice { font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--hair); padding-top: 16px; margin-top: 48px; }
.art-main .article-notice { font-size: 13.5px; line-height: 1.7; }

/* 작성자 상자 */
.author-box { background: var(--paper); border: 1px solid var(--hair); border-radius: 0; padding: 22px; margin: 32px 0 0; box-shadow: none; }
.author-avatar { background: var(--ink); font-family: var(--font-label); }
.author-name { color: var(--ink); }
.art-main .author-bio { font-size: 14.5px; margin: 0; line-height: 1.7; }
.art-main .author-name { margin: 0 0 4px; font-size: 16px; }
.owner-link { border-bottom: 2px solid var(--jj); color: var(--ink); }
.owner-link:hover { text-decoration: none; }

/* 이 글의 용어 · 칩 */
.glossary-chips { margin-top: 40px; }
.art-main .glossary-chips h2 { font-size: 20px; margin: 0 0 6px; }
.art-main .glossary-chips-desc { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; }
.chip { border-radius: 19px; min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; color: var(--ink); font-weight: 600; font-size: 14px; }
.chip:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }

/* 묶음 번호 목록 */
.cluster-box { margin-top: 56px; }
.art-main .cluster-box h2 { font-size: 24px; margin: 4px 0 6px; }
.cluster-box .eyebrow { font-size: 12px; }
.art-main .cluster-desc { font-size: 14px; color: var(--muted); margin: 0 0 14px; line-height: 1.6; }
.cluster-next {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center;
  background: var(--ink); color: #fff; padding: 18px 20px; margin-bottom: 8px; text-decoration: none;
}
.cluster-next:hover { color: #fff; text-decoration: none; }
.cn-label { font-family: var(--font-label); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--jj-dark); }
.cn-title { grid-column: 1; font-size: 17px; font-weight: 800; line-height: 1.45; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.cn-go { grid-column: 2; grid-row: 1 / span 2; font-size: 22px; color: var(--jj-dark); }
.cluster-list { list-style: none; }
.cluster-list li { display: flex; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 16px; line-height: 1.5; }
.cl-n { font-family: var(--font-label); font-weight: 700; color: var(--muted); flex: none; }
.cluster-list li a { color: var(--ink); }
.cluster-list li.is-current { font-weight: 800; }
.cluster-list li.is-current .cl-n { color: var(--jj-text); }
.cluster-list li.is-current em { font-style: normal; font-weight: 600; color: var(--muted); }

/* 관련 글 */
.related { margin-top: 48px; }
.art-main .related h2 { font-size: 20px; margin: 0 0 6px; }
.related li { padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 16px; }
.related li a { color: var(--ink); font-weight: 600; }
.tag-col { background: var(--fog); color: var(--muted); border-radius: 10px; }

/* 칼럼 본문 */
.column-article .article-head { border-left: 0; padding-left: 0; }
.art-main .column-para { font-size: 18px; line-height: 1.85; margin: 0 0 22px; }
.column-label { color: var(--jj-text); }

/* ============================================================
   목록(카테고리·칼럼 목록·작성자·도구) — 한 줄 목록 + 왼쪽 작은 썸네일 (magazine 결 유지)
   ============================================================ */
.page-body { padding-top: 32px; padding-bottom: 72px; }
.page-head { margin: 22px 0 32px; }
.page-head h1 { font-size: 40px; line-height: 1.22; font-weight: 800; letter-spacing: -0.045em; color: var(--ink); }
.page-head p { color: var(--sub); font-size: 16px; }
.section-title { font-size: 13px; font-family: var(--font-label); letter-spacing: 0.1em; color: var(--muted); margin: 8px 0 0; padding-bottom: 10px; border-bottom: 2px solid var(--ink); font-weight: 700; }
.section-title span { font-size: 13px; color: var(--muted); }
.section-sm h2, .section h2 { font-size: 24px; color: var(--ink); font-weight: 800; }

.card-grid { display: block; }
.card { border: none; border-bottom: 1px solid var(--hair); border-radius: 0; box-shadow: none; background: transparent; }
.card:hover { border-color: var(--hair); transform: none; background: transparent; }
.card-link { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; padding: 20px 0; }
.card.has-thumb .card-link { grid-template-columns: 168px minmax(0, 1fr); padding-top: 20px; }
.card-thumb { width: 100%; margin: 0; grid-row: 1 / span 4; border-radius: 0; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fog); }
.card-cat { margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--jj-text); }
.card-cat span[aria-hidden] { display: none; }
.card-title { font-size: 20px; line-height: 1.42; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); margin-bottom: 6px; overflow-wrap: anywhere; }
.card-link:hover .card-title { text-decoration: underline; text-underline-offset: 3px; }
.card-link:hover { text-decoration: none; }
.card-sub { -webkit-line-clamp: 2; color: var(--muted); font-size: 14.5px; }
.card-meta { color: var(--muted); font-size: 12.5px; }
.column-card { background: transparent; border-color: var(--hair); }
.column-card:hover { background: transparent; }

.cat-card { border-radius: 0; box-shadow: none; }
.cat-card:hover { transform: none; background: var(--fog); }
.catlist-item { border-top: 2px solid var(--ink); padding: 24px 0; max-width: 760px; }
.catlist-item h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.04em; }
.catlist-item h2 a { color: var(--ink); }
.catlist-item h2 span[aria-hidden] { display: none; }
.catlist-item p { color: var(--sub); }
.page-head h1 span[aria-hidden] { display: none; }
.count { font-family: var(--font-label); font-size: 13px; color: var(--muted); }

.plainlist li { border-bottom: 1px solid var(--hair); }
.plainlist li a { color: var(--ink); font-weight: 600; }
.principle-list li::before { color: var(--jj); }
.prose h2 { font-size: 22px; color: var(--ink); font-weight: 800; }
.prose a, .legal a, .guest-note a, .page-head p a { text-decoration: underline; text-decoration-color: var(--jj); text-underline-offset: 3px; }
.author-hero h1 { margin-bottom: 4px; }

/* 버튼 — 각지게, 검정 */
.btn { border-radius: 0; font-weight: 800; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #2a2a2f; color: #fff; text-decoration: none; }
.btn-ghost, .page-body .btn-ghost, .notfound .btn-ghost { border-color: var(--ink); color: var(--ink); }
.form-row input, .form-row select, .form-row textarea { border-radius: 0; border: 1px solid var(--hair); font-family: inherit; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--ink); }
.form-row label { color: var(--ink); }
.nf-code { font-family: var(--font-label); color: var(--hair); }

/* 용어 사전 페이지 */
.glossary-index { border-radius: 0; background: var(--fog); border: 0; }
.glossary-index h2, .glossary-index-head, .glossary-index li b, .glossary-term h2 { color: var(--ink); }
.glossary-index-group h3 span[aria-hidden], .glossary-group-head span[aria-hidden] { display: none; }
.glossary-group-head { color: var(--jj-text); border-bottom: 2px solid var(--ink); font-family: var(--font-ko); }
.glossary-term h2 { font-weight: 800; letter-spacing: -0.03em; }
.glossary-band { border-radius: 0; border-left: 3px solid var(--jj); }

/* ---------- 푸터 — 검정 ---------- */
.site-footer { background: var(--ink); color: var(--dim); margin-top: 0; }
.footer-grid { padding-top: 44px; padding-bottom: 28px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 900; letter-spacing: -0.05em; color: #fff; }
.footer-brand .brand-mark { width: 12px; height: 12px; }
.footer-brand small { font-family: var(--font-label); letter-spacing: 0.1em; color: var(--dim); font-size: 11px; font-weight: 500; }
.footer-about p { color: var(--dim); font-size: 14px; }
.footer-owner a, .footer-links a { color: #fff; }
.footer-owner a:hover, .footer-links a:hover { color: var(--jj-dark); }
.footer-owner .owner-link { border-bottom-color: var(--jj-dark); }
.footer-links-title { font-family: var(--font-label); letter-spacing: 0.1em; font-size: 12px; color: var(--dim); }
.footer-links a { color: #e4e4e7; }
.footer-bottom { border-top: 1px solid var(--dark-line); color: var(--dim); }
.back-to-top { border-radius: 0; background: var(--ink); box-shadow: none; }

/* ============================================================
   반응형
   ============================================================ */
/* 1100px 이상 — 오른쪽 따라오는 차례 */
@media (min-width: 1100px) {
  .art-grid { grid-template-columns: minmax(0, 700px) minmax(0, 300px); justify-content: space-between; }
  .art-rail { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 24px; min-width: 0; max-height: calc(100vh - 48px); overflow-y: auto; }
  .toc-fold, .jump-tags { display: none; }
}

@media (max-width: 1099px) {
  .recent-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cluster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .art-main { max-width: 760px; }
  .short-answer { max-width: 760px; }
}

/* 960px 이하 — 한 줄 상단바(따라옴) + 지금 섹션 알약 단추 → 섹션 시트 (가로 밀기 0) */
@media (max-width: 960px) {
  .container { --gutter: 20px; }
  .util-band { display: none; }
  .header-inner { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .brand-text { font-size: 23px; }
  .brand-mark { width: 11px; height: 11px; }
  /* (R4 2026-10-07 §8 폰 상단) 한 줄 상단바 — 스크롤해도 따라오고, 지금 섹션 알약 단추 → 아래에서 올라오는 섹션 시트 */
  /* 주의: backdrop-filter·transform 을 여기 걸면 안의 fixed 시트가 상단바 기준으로 갇힌다 → 단색 바탕 */
  .site-header { position: sticky; top: 0; z-index: 60; background: var(--paper); }
  .header-inner { flex-wrap: nowrap; justify-content: space-between; }
  .nav-toggle {
    display: inline-flex; width: auto; height: 40px; gap: 8px; padding-left: 14px; padding-right: 12px;
    border: 1px solid var(--hair); border-radius: 20px; background: var(--paper);
    font-family: var(--font-body); font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1;
  }
  /* 뼈대 style.css 의 햄버거 줄(.nav-toggle span) 규칙이 알약 안 글자에 걸리지 않게 되돌린다 */
  .nav-toggle span { display: inline-block; width: auto; height: auto; margin: 0; background: none; transform: none !important; opacity: 1 !important; }
  .nav-toggle .dot { width: 6px; height: 6px; border-radius: 3px; background: var(--jj); flex: none; }
  .nav-toggle .chev { transition: transform 0.2s; }
  .nav-toggle[aria-expanded="true"] { border-color: var(--ink); }
  .nav-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

  /* 섹션 시트: 닫혀 있을 땐 화면 밖, 열면 아래에서 올라온다. 칩은 2열 격자(가로 밀기 0) */
  .site-nav.sec-nav {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; margin: 0; width: auto; flex: none;
    max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); background: var(--paper);
    border-radius: 20px 20px 0 0; border-top: 1px solid var(--hair);
    transform: translateY(105%); visibility: hidden; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.28s;
    animation: none;
  }
  .site-nav.sec-nav.open { transform: translateY(0); visibility: visible; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
  .site-nav.sec-nav::before { content: ""; grid-column: 1 / -1; justify-self: center; width: 40px; height: 4px; border-radius: 2px; background: #d6d6d1; margin-bottom: 6px; }
  .sheet-title { display: block; grid-column: 1 / -1; margin: 0 0 4px; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
  .site-nav.sec-nav .sec-chip { justify-content: flex-start; min-height: 48px; padding: 0 16px; font-size: 15px; border: 1px solid var(--hair); border-radius: 24px; }
  .site-nav.sec-nav .sec-chip .n { margin-left: auto; }
  .site-nav.sec-nav .sec-chip.is-all { grid-column: 1 / -1; } /* 시트 맨 위 한 줄 — 전체(홈)로 돌아가기 */
  .site-nav.sec-nav .sec-chip.is-active, .site-nav.sec-nav .sec-chip.is-hot { border-color: var(--ink); }
  .site-nav.sec-nav .sec-chip:last-child { border-bottom: 1px solid var(--hair); }
  .site-nav .sec-chip.active { border-left: 1px solid var(--ink); padding-left: 16px; background: var(--ink); }
  .nav-util { display: flex; flex-wrap: wrap; gap: 4px 18px; grid-column: 1 / -1; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair); font-size: 14px; }
  .site-nav .nav-util a { padding: 10px 0; border: 0; font-size: 14px; color: var(--muted); }
  .site-nav .nav-util a:last-child { border-bottom: 0; }
  /* 시트 뒤 어둡게 + 뒤 화면 스크롤 잠금 (main.js 가 body 에 sheet-open) */
  body.sheet-open { overflow: hidden; }
  /* 상단바(z 60)가 쌓임 맥락을 만들어 안의 시트는 그 층에 묶인다 → 막은 상단바보다 아래(55), 본문보다 위 */
  body.sheet-open::after { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(14, 14, 16, 0.45); }

  .home-intro { padding-top: 14px; padding-bottom: 12px; border-top: 1px solid var(--ink); }
  .home-hero { padding-top: 18px; padding-bottom: 22px; }
  .hs-slide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fig" "text"; gap: 14px; align-items: start; align-content: start; }
  .hs-bar { margin-top: 18px; }
  .lead-title { font-size: 30px; line-height: 1.26; }
  .home-colgloss { grid-template-columns: minmax(0, 1fr); }
  .article-head h1 { font-size: 40px; }
}

/* (R4 2026-10-07 §8 히어로 슬라이더 — 폰) 섹션 탭 칩 두 줄 + 단추 줄 → **스토리형 분할 막대 한 줄**.
   칸 6개(지금 장만 오렌지로 차오름) + 장 번호 + 이전·일시정지·다음. 칸 글자는 화면에서만 숨기고 낭독·링크 이름은 그대로 */
@media (max-width: 720px) {
  /* 막대는 숨기되 display:none 은 금지 — 막대 애니메이션 끝(animationend)이 자동 넘김 신호라 돌고 있어야 한다 */
  .hs-bar { height: 0; margin-top: 0; }
  .hs-ctrl { flex-wrap: wrap; gap: 8px 10px; padding-top: 14px; }
  .hs-tabs { flex: 1 1 140px; flex-wrap: nowrap; gap: 4px; }
  .hs-tabs li { flex: 1 1 0; min-width: 0; display: flex; }
  .hs-tab, .hs-tab:hover, .hs-tab[aria-current="true"], .hs-tab[aria-current="true"]:hover {
    flex: 1 1 auto; position: relative; min-width: 0; min-height: 28px; padding: 0; border: 0; border-radius: 0;
    background: transparent; color: transparent; font-size: 0; overflow: hidden;
  }
  .hs-tab::before, .hs-tab::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px;
  }
  .hs-tab::before { background: var(--hair); }
  .hs-tab::after { background: var(--jj); transform-origin: 0 50%; transform: scaleX(0); }
  .hs-tab[aria-current="true"]::after { transform: scaleX(1); }
  .home-hero.is-run .hs-tab[aria-current="true"]::after { animation: hs-fill var(--hs-ms, 6500ms) linear forwards; }
  .home-hero.is-run.is-hold .hs-tab[aria-current="true"]::after { animation-play-state: paused; }
  .hs-count { font-size: 13px; margin-right: 2px; }
  .hs-btns { margin-left: 0; gap: 4px; }
  .hs-btn { width: 40px; height: 40px; border-radius: 20px; }
}

@media (max-width: 720px) {
  .card.has-thumb .card-link { grid-template-columns: 112px minmax(0, 1fr); gap: 0 14px; padding: 16px 0; }
  .card-thumb { aspect-ratio: 1 / 1; }
  .card-title { font-size: 17px; line-height: 1.42; }
  .card-sub { -webkit-line-clamp: 2; font-size: 13.5px; }
  .card-cat { font-size: 12px; margin-bottom: 4px; }
}

/* 폰 (600px 이하) */
@media (max-width: 600px) {
  .container { --gutter: 16px; }
  .home-intro { flex-direction: column; gap: 2px; }
  .home-intro h1 { font-size: 16px; }
  .home-intro p { font-size: 13px; }
  .lead-title { font-size: 27px; }
  .lead-sub { display: none; }
  .hs-text { gap: 10px; }
  .home-hero .eyebrow { font-size: 11px; }
  .hs-ctrl { gap: 10px; }
  .hs-tabs { gap: 6px; }
  .hs-tab { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
  .hs-btns { width: 100%; justify-content: flex-end; }
  .hs-count { margin-right: auto; }
  .byline-s { font-size: 13px; }
  .byline-s .avatar { display: none; }

  .home-recent { padding-bottom: 20px; }
  .recent-list { grid-template-columns: minmax(0, 1fr); }
  .recent-list a {
    display: grid; grid-template-columns: auto minmax(0, 1fr) 76px; grid-template-areas: "n title thumb" "n date thumb";
    gap: 4px 14px; padding: 16px 0; border-top: 0; border-bottom: 1px solid var(--hair); align-items: start;
  }
  .rc-top { grid-area: n; display: block; padding-top: 2px; }
  .rc-cat { display: none; }
  .rc-n { font-size: 13px; }
  .rc-title { grid-area: title; font-size: 17px; }
  .rc-date { grid-area: date; font-size: 12px; }
  .rc-thumb { display: block; grid-area: thumb; width: 76px; height: 76px; object-fit: cover; background: var(--fog); }
  .recent-list picture { display: contents; }

  .home-clusters { padding-top: 28px; padding-bottom: 8px; }
  .sec-head h2, .home-cats > h2 { font-size: 23px; }
  .sec-head p { font-size: 13px; }
  .cluster-grid { grid-template-columns: minmax(0, 1fr); }
  .cluster-grid a { padding: 14px 0; gap: 14px; }
  .cg-n { font-size: 22px; min-width: 32px; line-height: 1.1; }
  .cg-name { font-size: 16px; }
  .cg-hub { font-size: 13px; }
  .cg-count { display: none; }
  .home-cats { padding-top: 28px; padding-bottom: 28px; }
  .cat-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .home-colgloss { padding-bottom: 40px; gap: 28px; }
  .home-columns h2 { font-size: 23px; }
  .quote-list a { font-size: 18px; padding: 14px 0; }
  .home-glossary { padding: 20px; }
  .home-glossary h2 { font-size: 20px; }

  .brief-band .container { padding-top: 28px; padding-bottom: 28px; }
  .brief-band h2 { font-size: 25px; }
  .brief-card { padding: 18px 0; }
  .brief-grid { background: transparent; border: 0; gap: 0; }
  .brief-card + .brief-card { border-top: 1px solid var(--dark-line); }

  /* 글 — 첫 화면 안에 제목·바이라인·짧은 답 */
  .art-wrap { padding-top: 18px; padding-bottom: 48px; }
  .art-wrap > .short-answer { order: 2; margin-top: 18px; }
  .art-wrap > .article-hero { order: 3; }
  .breadcrumb { font-size: 12px; }
  .article-head { margin-top: 14px; }
  .kicker { margin-bottom: 8px; gap: 4px 12px; font-size: 13px; }
  .kicker .eyebrow { font-size: 11px; }
  .kicker-cat { display: none; }
  .article-head h1 { font-size: 30px; line-height: 1.24; }
  .article-sub { font-size: 16px; margin-top: 12px; }
  .byline { margin-top: 16px; padding-top: 12px; padding-bottom: 12px; gap: 6px 12px; }
  .by-who .avatar { width: 34px; height: 34px; font-size: 13px; }
  .by-name span { display: none; }
  .by-dates { gap: 2px 12px; font-size: 12px; }
  .by-dates .article-basis { font-size: 12px; }
  .short-answer { padding: 20px; }
  .short-answer p { font-size: 18px; }
  .article-hero { margin-top: 18px; }
  .article-hero img { aspect-ratio: 3 / 2; }
  .art-grid { margin-top: 18px; }
  .art-main p { font-size: 17px; }
  .art-main h2 { font-size: 23px; line-height: 1.36; margin: 40px 0 10px; }
  .keypoints li { font-size: 16px; gap: 12px; }
  .mistakes-box h2, .check-box h2 { font-size: 20px; }
  .mistakes-box li, .checklist li { font-size: 16px; }
  .jj-note { padding: 20px; }
  .jj-note p:last-child { font-size: 16px; }
  .art-main .owner-note .owner-note-text { font-size: 20px; }
  .faq summary { font-size: 16px; }
  .changelog { padding: 14px 16px; }
  .changelog li { font-size: 13px; }
  .table-wrap table { font-size: 14px; }
  .table-wrap th, .table-wrap td { padding: 10px 8px; }
  .page-head h1 { font-size: 30px; }

  /* 4칸 이상 넓은 표 — 줄마다 카드로 쌓는다(가로 스크롤 금지) */
  .tbl-wide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl-wide table, .tbl-wide tbody, .tbl-wide tr, .tbl-wide th, .tbl-wide td { display: block; width: auto; }
  .tbl-wide tr { border-top: 2px solid var(--ink); padding: 8px 0 4px; }
  .tbl-wide tbody th { width: auto; padding: 4px 0; border: 0; font-size: 15px; }
  .tbl-wide td { display: grid; grid-template-columns: minmax(0, 7em) minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--hair); }
  .tbl-wide td:last-child { border-bottom: 0; }
  .tbl-wide td::before { content: attr(data-label); font-size: 12.5px; font-weight: 700; color: var(--muted); }
  .tbl-wide caption { display: block; }
}

/* 아주 좁은 화면(380px 이하) — 모든 표를 카드로 쌓는다 */
@media (max-width: 380px) {
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap th, .table-wrap td { display: block; width: auto; }
  .table-wrap tr { border-top: 2px solid var(--ink); padding: 8px 0 4px; }
  .table-wrap tbody th { width: auto; padding: 4px 0; border: 0; font-size: 15px; }
  .table-wrap td { display: grid; grid-template-columns: minmax(0, 6em) minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--hair); }
  .table-wrap td:last-child { border-bottom: 0; }
  .table-wrap td::before { content: attr(data-label); font-size: 12.5px; font-weight: 700; color: var(--muted); }
  .table-wrap caption { display: block; }
  .card.has-thumb .card-link { grid-template-columns: 88px minmax(0, 1fr); }
  .article-head h1 { font-size: 27px; }
  .lead-title { font-size: 25px; }
}

/* 큰 글자 설정·긴 낱말 — 칸이 내용 폭 때문에 밀리지 않게 */
.hs-slide > *, .cat-col, .cluster-grid li, .recent-list li, .art-main, .art-rail { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav-toggle svg path { transition: none; }
  /* (R4 2026-10-07 §8 히어로 슬라이더) 장 바뀜은 즉시 — 미끄러짐·흐려짐 없음(자동 넘김도 main.js 가 끈다) */
  .hs-slide, .hs-slide.is-on { transition: none; transform: none; }
}

/* 폰 브레드크럼 — 가로 밀기 대신 "짬프레스 / 분류" 까지만(현재 글 제목은 바로 아래 h1 에 있다) */
@media (max-width: 600px) {
  .breadcrumb { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
  .breadcrumb .sep:nth-last-child(2), .breadcrumb span[aria-current] { display: none; }
}

/* 작성자 상자 — 280px 에서 긴 메일 주소가 칸을 밀어내지 않게 */
.author-box > div { min-width: 0; }
.author-bio { overflow-wrap: anywhere; }
@media (max-width: 380px) { .author-box .author-avatar { width: 40px; height: 40px; font-size: 16px; } .author-box { padding: 16px; } }

/* 썸네일 있는 목록 줄 — 글자 네 줄은 언제나 오른쪽 칸(날짜가 그림 아래로 떨어지지 않게) */
.card.has-thumb .card-link > :not(picture):not(img) { grid-column: 2; }
.card.has-thumb .card-thumb { grid-column: 1; grid-row: 1 / span 4; align-self: start; }

/* 폰 바이라인 — 아바타 옆에 이름·날짜 두 줄(시안: 첫 화면 안에 제목·바이라인·짧은 답) */
@media (max-width: 600px) {
  .byline { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 10px; }
  .by-who { display: contents; }
  .by-who .avatar { grid-row: 1 / span 2; }
  .by-name { grid-column: 2; }
  .by-dates { grid-column: 2; }
}

/* 작성자·소개 같은 글 페이지 문단 — 한 줄이 너무 길지 않게 */
.page-body .section-sm > p, .page-body .section-sm > ul, .author-hero > div { max-width: 760px; }

/* ============================================================
   (R4 2026-10-07 §1단계) 신뢰 뼈대 — 편집 원칙 페이지·원칙 요약 상자·작성자 4칸·정정 요청 서식
   4단계 토큰·부품을 그대로 쓴다: 검정 판·회색(안개) 판·2px 구획선·칩. 그림자·둥근 카드 없음(칩만 둥글게)
   ============================================================ */

/* 원칙 요약 상자 — 홈·소개·작성자 공용 (조 제목 7개 + 전문 링크) */
.ed-summary { border-top: 2px solid var(--ink); padding-top: 20px; min-width: 0; }
.ed-summary h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.04em; margin: 4px 0 8px; color: var(--ink); }
.ed-sum-lead { font-size: 16px; line-height: 1.7; color: var(--sub); margin: 0 0 14px; max-width: 760px; }
.ed-titles { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ed-titles a {
  min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 20px;
  border: 1px solid var(--hair); background: var(--paper); font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.ed-titles a:hover { border-color: var(--ink); text-decoration: none; }
.ed-titles .n { font-family: var(--font-label); font-size: 12px; color: var(--jj-text); letter-spacing: 0.02em; }
.home-editorial { margin-top: 56px; margin-bottom: 8px; }
.prose .ed-summary { margin: 32px 0 0; }
.prose .ed-summary h2 { margin-top: 4px; }
.prose .ed-titles { margin-left: 0; }
.prose .ed-titles li { margin: 0; }
.prose .ed-titles a, .ed-summary .more-link { text-decoration: none; }
.name-meaning { background: var(--fog); padding: 14px 18px; font-size: 15px; }
.name-meaning strong { margin-right: 8px; }
.footer-meaning { color: var(--dim); font-size: 13px; }

/* 정정 요청 3단계 서식 — 번호 사각 + 글 */
.ed-steps { list-style: none; margin: 12px 0 16px; padding: 0; display: grid; gap: 8px; max-width: 760px; }
.prose .ed-steps { margin-left: 0; }
.ed-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.6; margin: 0; }
.ed-steps .n {
  flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; font-family: var(--font-label); font-size: 13px; font-weight: 700;
}

/* 편집 원칙 페이지 /editorial/ */
.editorial-page { max-width: 880px; }
.ed-head .eyebrow { margin-bottom: 6px; }
.ed-lead { font-size: 19px; line-height: 1.65; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); max-width: 760px; }
.page-head .ed-meta { font-size: 14px; color: var(--muted); margin-top: 10px; }
.ed-meta time { font-family: var(--font-label); }
.ed-jumps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.ed-jumps a {
  min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 20px;
  border: 1px solid var(--hair); font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.ed-jumps a span { font-family: var(--font-label); color: var(--jj-text); }
.ed-jumps a:hover { border-color: var(--ink); text-decoration: none; }
.ed-sec { border-top: 2px solid var(--ink); margin-top: 48px; padding-top: 22px; }
.ed-sec h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.3; margin: 0 0 16px; color: var(--ink); scroll-margin-top: 80px; }
.ed-sec h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; margin: 28px 0 10px; color: var(--ink); }
.ed-sec p { font-size: 16px; line-height: 1.75; max-width: 760px; }
.ed-principles { list-style: none; margin: 0; padding: 0; }
.ed-principles li { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--hair); scroll-margin-top: 80px; }
.ed-n { flex: none; min-width: 44px; font-family: var(--font-label); font-size: 30px; font-weight: 700; line-height: 1; color: var(--jj); }
.ed-principles > li > div { min-width: 0; }
.ed-principles h3 { margin: 2px 0 6px; font-size: 20px; }
.ed-principles p { margin: 0; color: var(--sub); }
.ed-list { margin: 0 0 12px 20px; padding: 0; max-width: 760px; }
.ed-list li { font-size: 16px; line-height: 1.7; margin-bottom: 6px; }
.ed-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.ed-type { background: var(--paper); padding: 18px; min-width: 0; }
.ed-type p { font-size: 14.5px; line-height: 1.65; margin: 0; }
.ed-type .ed-type-label { margin-bottom: 8px; }
.ed-type .ed-type-when { font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.is-fix, .is-up, .is-none { font-family: var(--font-ko); font-weight: 800; }
.ed-type-label strong { display: inline-block; padding: 2px 10px; font-size: 13px; }
.ed-type-label .is-fix { background: var(--ink); color: #fff; }
.ed-type-label .is-up { border: 1px solid var(--jj-text); color: var(--jj-text); }
.ed-type-label .is-none { border: 1px solid var(--hair); color: var(--muted); }
.ed-form { margin-top: 16px; }
.ed-flow { margin: 0 0 8px 22px; padding: 0; max-width: 760px; }
.ed-flow li { font-size: 16px; line-height: 1.7; margin-bottom: 6px; }
.ed-request { background: var(--fog); padding: 22px 24px; margin-top: 24px; }
.ed-request h3 { margin-top: 0; }
.ed-request .ed-steps { margin-bottom: 0; }
.ed-sub { color: var(--muted); }
.ed-sec .ed-empty { font-size: 16px; font-weight: 700; color: var(--ink); padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.ed-fixes { list-style: none; margin: 0; padding: 0; }
.ed-fixes li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.6; }
.ed-fixes time { font-family: var(--font-label); color: var(--muted); white-space: nowrap; }
.ed-fixes li > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ed-fixes a { color: var(--ink); font-weight: 700; }
.editorial-page a:not(.owner-link):not(.more-link):not([class]) { text-decoration: underline; text-decoration-color: var(--jj); text-underline-offset: 3px; }
/* 위 본문 밑줄 규칙이 칩·브레드크럼까지 덮지 않게 (칩은 테두리로, 브레드크럼은 글자만) */
.editorial-page .ed-jumps a, .editorial-page .breadcrumb a { text-decoration: none !important; }

/* 작성자 페이지 4칸 (NYT 바이라인 페이지 방식) */
.author-page .author-hero .eyebrow { margin-bottom: 2px; }
.author-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; margin-top: 8px; }
.author-cell { border-top: 2px solid var(--ink); padding-top: 18px; min-width: 0; }
.author-cell h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.04em; margin: 4px 0 12px; color: var(--ink); }
.author-cell p { font-size: 15.5px; line-height: 1.75; }
.author-cell a:not(.more-link) { text-decoration: underline; text-decoration-color: var(--jj); text-underline-offset: 3px; }
.author-cell .ed-titles a { text-decoration: none; }
.au-topics { list-style: none; margin: 0 0 12px; padding: 0; }
.au-topics li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.au-topics li a { font-weight: 800; color: var(--ink); }
.au-topics .n { font-family: var(--font-label); font-size: 12px; color: var(--muted); }
.au-short { flex-basis: 100%; font-size: 14px; color: var(--muted); }
.au-formats { color: var(--sub); }
.au-formats strong { color: var(--ink); margin-right: 6px; }
.author-list { margin-top: 56px; }
.author-list .section-title { margin-bottom: 4px; }

@media (max-width: 960px) {
  .author-cells { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ed-types { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ed-lead { font-size: 17px; }
  .ed-sec { margin-top: 40px; }
  .ed-sec h2 { font-size: 24px; }
  .ed-principles li { gap: 12px; }
  .ed-n { min-width: 34px; font-size: 24px; }
  .ed-principles h3 { font-size: 18px; }
  .ed-request { padding: 18px 16px; }
  .ed-summary h2, .author-cell h2 { font-size: 22px; }
  .ed-titles a, .ed-jumps a { padding: 0 12px; font-size: 13.5px; }
  .home-editorial { margin-top: 40px; }
}
.author-list .section-title { font-family: var(--font-ko); font-size: 24px; letter-spacing: -0.04em; color: var(--ink); font-weight: 800; }