/* SnapHolo News — Boulevard 위에 얹는 SnapHolo 층.
   색·글꼴·간격 값은 tokens.css(snapholo-web 생성물 사본, scripts/sync_tokens.py) 변수로만 쓴다. hex 리터럴 금지. */

/* ── Boulevard 변수 → SnapHolo 의미 토큰 ─────────────────────────────── */
:root {
  /* 예전엔 default.hbs 인라인 <style> 이 @custom 값으로 넣었다 — /news CSP(style-src 'self')가 인라인을 막아 로고가 원본 크기로 커졌다(T14). */
  --desktop-logo-height: 24px;
  --mobile-logo-height: 20px;
  --container-width: 1280px;
  --heading-font-family: var(--font-sans);
  --body-font-family: var(--font-sans);
  --heading-font-weight: var(--weight-bold);
  --heading-letter-spacing: var(--tracking-display);
  --body-letter-spacing: 0;
  --corner-radius: var(--radius-md);
  --corner-radius-lg: var(--radius-xl);
  --card-image-aspect: 4/3;
  --post-image-aspect: 16/9;
  --color-text-button: var(--color-brand-action-on);
  --color-bg-button: var(--color-brand-action-fill);
  --color-white: var(--color-surface);
  --color-black: var(--color-text);
  --color-black-50: var(--color-surface-sunken);
  --color-black-100: var(--color-surface-sunken);
  --color-black-200: var(--color-border);
  --color-black-300: var(--color-border-strong);
  --color-black-500: var(--color-text-muted);
  --color-black-600: var(--color-text-secondary);
}

/* ── 세 언어: 지금 언어 문구만 보인다(partials/l10n.hbs · tag-label.hbs) ── */
html[data-news-lang="en"] [data-lang-only]:not([data-lang-only="en"]),
html[data-news-lang="ja"] [data-lang-only]:not([data-lang-only="ja"]),
html[data-news-lang="ko"] [data-lang-only]:not([data-lang-only="ko"]) { display: none !important; }

/* 한·일 줄바꿈 — 낱말 가운데서 끊지 않는다(디자인 가이드 03 「글자 하한」). */
:lang(ko) { word-break: keep-all; }
:lang(ja) :is(h1, h2, h3, h4) { word-break: auto-phrase; }

:focus-visible { outline: 2px solid var(--color-brand-link-text); outline-offset: 2px; }

.s-entry-content a { color: var(--color-brand-link-text); }

/* 버튼: 글자가 미끄러지는 Boulevard 효과 대신 색만 바뀐다(토큰 모션 규칙 — 장식 애니메이션 금지). */
.s-btn::before { content: none; }
.s-btn:hover span { transform: none; }
.s-btn { transition: opacity var(--motion-tint) var(--motion-ease); }
.s-btn:hover { opacity: .88; }

/* ── GNB — 모양은 본 사이트 /css/global-header.css(default.hbs). 여기는 그 파일이 본 사이트 화면 CSS 에 기대는 값만 ── */
:root {
  --mint: var(--color-brand-action-fill);   /* 지금 화면 아이콘 밑줄(뉴스 아이콘) */
  --panel: var(--set-panel);                /* 사람 아이콘 hover */
}
body > header.global-header a { color: inherit; text-decoration: none; }

/* ── 뉴스 분류 줄 — GNB 아래, 같은 좌우 여백. 따라붙지 않고, 좁으면 줄바꿈 대신 가로로 민다 ── */
.s-news-tabs {
  display: flex; gap: var(--space-7);
  padding-inline: max(var(--site-gutter), calc((100% - var(--site-content-width)) / 2));
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-data); font-weight: var(--weight-semibold);
}
.s-news-tabs::-webkit-scrollbar { display: none; }
.s-news-tabs a {
  position: relative; flex: none; display: flex; align-items: center;
  min-height: 48px; white-space: nowrap;
  color: var(--color-text-secondary); text-decoration: none;
}
.s-news-tabs a:hover { color: var(--color-brand-link-text); }
.s-news-tabs a[aria-current="page"] { color: var(--color-text); }
.s-news-tabs a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--mint);
}
@media screen and (max-width: 760px) {
  .s-news-tabs { gap: var(--space-5); }
  .s-news-tabs a { min-height: 44px; }
}

/* ── 목록 ───────────────────────────────────────────────────────────── */
/* nowrap: 320 폭 일본어 필터 이름이 글자 사이에서 끊겼다(「すべ/て」 — T14). 넘치면 필터 줄만 가로로 민다(Boulevard overflow:auto). */
.s-quick-filters .s-filter { text-decoration: none; white-space: nowrap; }
/* 그리드 칸(1fr)이 카드의 최소 폭에 끌려 늘지 않게 — 일본어 제목(word-break: auto-phrase)이 320 폭에서 칸을 290px 로 밀었다(T14). */
.s-cards > * { min-width: 0; }
.s-data-as-of {
  margin: 0;
  font-size: var(--text-label); font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

/* ── 홈(partials/home-content.hbs): 위 = 최신 1편(2/3) + 추천 4편(1/3) · 아래 = 최신 목록 3열 + 사이드바 300 ── */
.s-home { margin-top: var(--space-6); }
.s-content.s-home .s-container { gap: var(--space-8); }  /* Boulevard .home-template .s-content .s-container(32) 보다 세게 */
@media (max-width: 479px) { .s-home .s-container { padding: 0 var(--space-4); } }
.s-home-top { display: grid; gap: var(--space-4); }
/* 칸이 일본어 제목(auto-phrase)의 최소 폭에 끌려 늘지 않게 — 390 폭 ja 머리기사가 455px 로 넘쳤다(0.2.6 실측). */
.s-home-top > * { min-width: 0; }
.s-lead .s-image { aspect-ratio: 3/2; }
@media (min-width: 1024px) {
  .s-home-top { grid-template-columns: 2fr 1fr; gap: var(--space-6); }
  .s-home .s-content-layout.has-sidebar .s-content-aside { width: 300px; min-width: 300px; }
  .s-home .s-content-layout.has-sidebar { gap: var(--space-6); }
}
/* 추천·많이 본 글 줄 그림 84×56(3:2). 사이드바 그림 1:1 · 카드 둥근 모서리 16 을 덮는다. */
.s-sidebar-featured .s-card-image { min-width: 84px; max-width: 84px; }
.s-sidebar-featured .s-image { aspect-ratio: 3/2; border-radius: var(--radius-sm); }
.s-sidebar-featured .s-card-content { min-width: 0; }  /* 같은 이유 — ja 390 추천 줄 제목이 427px 로 밀었다 */
.s-rank { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.s-rank li { display: flex; gap: var(--space-3); align-items: flex-start; }
.s-rank-num { flex: none; min-width: 1em; font-weight: var(--weight-bold); color: var(--color-accent); font-variant-numeric: tabular-nums; }
/* 홈 밀도(0.2.7) — 값 = 시안 news-home-plan 의 CSS 를 토큰으로(색은 시안과 같은 토큰: accent · accent-soft · slate-100 · border · ink).
   카드 모양(둥근 그림 + 아래 글, 상자 없음)은 승인 범위대로 그대로 — 크기·간격·글자만 맞춘다. */
.s-content.s-home .s-container { gap: var(--space-8); }  /* Boulevard .home-template .s-content .s-container(32) 보다 세게 */
@media (max-width: 479px) { .s-home .s-container { padding: 0 var(--space-4); } }
.s-home .s-card .s-tags > .s-tag ~ .s-tag { display: none; }  /* 카드 분류 배지는 첫 1개(사이드바 태그 목록은 그대로) */
.s-home .s-card .s-tags .s-tag {
  padding: calc(var(--space-1) / 2) var(--space-3); border-radius: var(--radius-full);
  background: var(--color-accent-soft); color: var(--color-accent);
  font-size: var(--text-label); font-weight: var(--weight-semibold);
}
.s-home .s-byline { font-size: var(--text-label); font-weight: var(--weight-regular); color: var(--color-text-muted); }
/* 머리기사 */
.s-lead .s-card { gap: 0; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.s-lead .s-card-image .s-image { border-radius: 0; }  /* 그림 모서리는 상자가 자른다 */
.s-lead .s-card-content { gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-6); }
.s-lead .s-card h2 { max-width: 18em; font-weight: var(--weight-black); }
.s-lead .s-card-excerpt { font-size: var(--text-data); color: var(--color-text-secondary); }
@media (max-width: 767px) { .s-lead .s-card-excerpt { display: none; } .s-lead .s-card-content { padding-bottom: var(--space-4); } }
/* 상자(추천 · 사이드바) = 흰 바탕 + 테두리 + 모서리 12 + 안쪽 16, 머리말 18 */
.s-home .s-sidebar-items { gap: var(--space-4); }
.s-home .s-sidebar-content {
  gap: var(--space-3); padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.s-home .s-sidebar-content > h4 { font-size: 1.125rem; line-height: 1.3; }  /* = s-heading-md(18) — 18 은 토큰에 없어 Boulevard 단계값 */
.s-home .s-sidebar-featured .s-card { gap: var(--space-3); }
.s-home .s-sidebar-featured .s-card-content { gap: var(--space-1); }
.s-home .s-sidebar-featured .s-byline { line-height: 1.3; }
.s-home .s-sidebar-featured .s-card h3 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-size: var(--text-data); line-height: 1.35;
}
.s-home .s-rank { gap: var(--space-3); }
.s-sidebar-about p { margin: 0; line-height: 1.5; }
.s-home .s-sidebar-about h4 { font-size: var(--text-data); }
.s-home .s-sidebar-about p { font-size: var(--text-data); color: var(--color-text-secondary); }
.s-home .s-sidebar-tags .s-tags { gap: var(--space-2); }
.s-home .s-sidebar-tags .s-tag {
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--slate-100);
  font-size: var(--text-label); font-weight: var(--weight-regular);
}
/* Latest 머리줄: 알약 칩(활성 = 잉크 바탕) */
.s-latest-head { margin-bottom: var(--space-4); }
.s-home .s-quick-filters { gap: var(--space-2); }
.s-home .s-quick-filters .s-filter {
  padding: calc(var(--space-1) - 1px) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
  font-size: var(--text-label); line-height: 1.5; color: var(--color-text);
}
.s-home .s-quick-filters .s-filter span { padding: 0; font-size: inherit; color: inherit; }
.s-home .s-quick-filters .s-filter span::after { content: none; }
.s-home .s-quick-filters .s-filter.is-active { background: var(--ink); border-color: var(--ink); color: var(--color-surface); }
/* Latest 카드: 그림 3:2 · 제목 2줄 */
.s-home .s-cards .s-image { aspect-ratio: 3/2; }
.s-home .s-cards .s-card { gap: var(--space-3); }
.s-home .s-cards .s-card-content { gap: var(--space-2); padding: 0 var(--space-3) var(--space-2); }
.s-home .s-cards .s-card h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.35; }

/* 홈 제목 줄바꿈: ja = 단어 안에서 안 끊고(넘칠 때만 아무 데서나) 금칙 엄격 · ko = keep-all(전역) · 둘 다 줄 길이 고르게 */
.s-home :is(h2, h3, h4):lang(ja), .s-sidebar-about p:lang(ja) { word-break: auto-phrase; line-break: strict; text-wrap: balance; }  /* 구절 단위(0.2.8 keep-all 은 넘칠 때 「、」 줄머리·단어 중간) */
.s-lead .s-card h2:lang(ja) { max-width: 20em; }
.s-home .s-cards .s-card h3:lang(ja) { -webkit-line-clamp: 3; }
.s-home .s-sidebar-featured .s-card h3:lang(ja) { -webkit-line-clamp: 4; }
.s-home :is(h2, h3, h4):lang(ko) { text-wrap: balance; }
/* 휴대폰: 분야 탭은 가로로 밀리니 오른쪽 끝을 흐리게(더 있다는 표시), 홈 칩은 줄바꿈 */
@media (max-width: 767px) {
  .s-news-tabs { mask-image: linear-gradient(to right, black calc(100% - var(--space-7)), transparent); }
  .s-home .s-quick-filters { flex-wrap: wrap; overflow: visible; margin-right: 0; padding-right: 0; }
}

/* 사이드바 언어 묶음(sidebar/index)은 상자를 만들지 않는다 — 빈 묶음이 칸 간격을 먹지 않게. */
.s-sidebar-items > [data-lang-only] { display: contents; }

/* ── 기사 끝: 저자 · AI 고지 · 시세 기준일 · 카드 링크 ───────────────────── */
.s-news-footer {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface-sunken); border-radius: var(--corner-radius);
}
.s-news-meta { display: flex; flex-direction: column; gap: var(--space-2); }
.s-news-meta p { margin: 0; }
.s-news-author { font-size: var(--text-data); color: var(--color-text-muted); }
.s-news-author a { color: var(--color-text); font-weight: var(--weight-semibold); text-decoration: none; }
.s-news-ai { font-size: var(--text-data); color: var(--color-text-secondary); }
.s-news-footer .s-data-as-of { font-size: var(--text-data); }
.s-news-card { align-self: flex-start; }

/* ── 푸터: Boulevard 의 `li span` 제목 스타일이 문구 span 에 번지지 않게 ─── */
.s-footer-nav ul li a span,
.s-footer-nav ul li span span { display: inline; margin: 0; font-size: inherit; font-weight: inherit; }
.s-footer-nav ul li a { white-space: nowrap; }
.s-footer-nav ul li a:hover { color: var(--color-brand-link-text); }
/* 푸터 분야 링크는 한 칸(li)에 category-links 를 통째로 — 칸을 지워 링크가 목록 줄로 선다 */
.s-footer-cats { display: contents; }
.s-footer-copyright { font-size: var(--text-data); color: var(--color-text-muted); }

/* ── 오류 화면 ──────────────────────────────────────────────────────── */
.s-error-content .s-btn-group { flex-wrap: wrap; justify-content: center; }

/* ── 로그인 실패 알림(?signin=failed) ──────────────────────────────── */
.s-toast {
  position: fixed; left: 50%; bottom: var(--space-6); z-index: 10002;
  transform: translateX(-50%);
  max-width: calc(100% - 2 * var(--space-5));
  padding: var(--space-3) var(--space-5);
  background: var(--color-text); color: var(--color-surface);
  border-radius: var(--radius-md); box-shadow: var(--shadow-rest);
  font-size: var(--text-data);
}
.s-toast[hidden] { display: none; }

/* ══ UX 점검 g4 반영(0.2.13, 2026-10-11 대표 「UX 개선 다 적용」) ══════════════════════ */

/* 본문으로 건너뛰기(13) — 키보드 첫 Tab 에만 보인다 */
.s-skip {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-md); box-shadow: var(--shadow-rest);
  text-decoration: none;
}
.s-skip:focus { top: var(--space-2); }

/* GNB 모양(아이콘 · 이름 · 간격)은 본 사이트 /css/global-header.css 하나가 정한다 — 여기서 덮지 않는다(2026-10-12: 0.2.13 의 ::before 이름이
   본 사이트의 이름과 겹쳐 뉴스에서만 아래로 · 두 번 찍혔다). 시험 scripts/checks/theme_gnb_check.py */
/* 감춘 언어 select(account-menu.js .acm-moved, 1px 절대 위치)가 글자로 넓어진 줄 끝 너머(390 en 409px)에 놓여 가로 넘침 → 머리 줄 안 왼쪽 위에 둔다. */
html body > header.global-header .acm-moved { left: 0; top: 0; }

/* SnapHolo 두 버튼(5 · 2) — sh-cta(사이드바 소개 · 휴대폰 기사 끝 · 홈) + 발행기가 본문 요약 아래 넣는 카드 시세 버튼 줄(.sh-price-cta). 민트 채움 · 누르는 높이 44. */
.s-cta, .s-entry-content .sh-price-cta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.s-cta .s-btn, .s-entry-content .sh-price-cta a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-4);
  border-radius: var(--radius-md); font-size: var(--text-data); font-weight: var(--weight-semibold); line-height: 1.2; text-decoration: none;
}
.s-entry-content .sh-price-cta a { background: var(--color-brand-action-fill); color: var(--color-brand-action-on); }
/* 출처 줄(발행기 .sh-sources, 기사 끝) = 작은 회색 한 줄 */
.s-entry-content .sh-sources { font-size: var(--text-data); color: var(--color-text-muted); }
/* 본문 표가 320 폭에서 문서를 369px 로 밀었다 — 표만 가로로 민다. */
.s-entry-content table { display: block; max-width: 100%; overflow-x: auto; }
/* 기사 끝 SnapHolo 시세 표(livevil-contents snapholo_price_table · 관제 2026-10-18): 행 구분선 · 머리 굵게 · 가격 오른쪽 정렬 */
.s-entry-content .sh-price-table table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.s-entry-content .sh-price-table th, .s-entry-content .sh-price-table td { border-bottom: 1px solid #dee8ee; padding: 8px 10px; text-align: left; vertical-align: top; }
.s-entry-content .sh-price-table th { font-weight: 700; }
.s-entry-content .sh-price-table th:last-child, .s-entry-content .sh-price-table td:last-child { text-align: right; white-space: nowrap; }
.s-entry-content .sh-price-note { font-size: var(--text-data); color: var(--color-text-muted); }
.s-cta .s-btn--line { background: transparent; color: var(--color-text); border: 1px solid var(--color-border-strong); }

/* 카드 스캔 버튼 = 본 사이트 공용 /js/scan-fab.js + /css/scan-fab.css 그대로(모양 · 자리 · 휴대폰 body 아래 여백 모두 그쪽) — 덮지 않는다.
   2026-10-12 대표 「왜 뉴스만 카드 스캔 버튼이 달라?」: 0.2.13 의 글자 알약 · 휴대폰 아래 띠를 걷었다. 알림 칸만 버튼(700 이하 18 + 52px) 위로. */
@media (max-width: 700px) { .s-toast { bottom: calc(70px + var(--space-4) + env(safe-area-inset-bottom)); } }

/* 누르는 높이 44(12) — 공유 아이콘 · 기사 머리 태그 · 사이드바 태그 · 홈 칩. 카드 안 분류 배지는 모양을 두고 누르는 칸만 위아래로 넓힌다. */
.s-share ul { gap: var(--space-2); }
.s-share ul li a { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
@media (max-width: 479px) { .s-entry-footer .s-share { gap: var(--space-3); padding: var(--space-4) var(--space-3); } .s-share ul { gap: 0; } }
.s-post-header .s-tags .s-tag, .s-sidebar-tags .s-tags .s-tag, .s-quick-filters .s-filter { min-height: 44px; display: inline-flex; align-items: center; }
.s-home .s-quick-filters .s-filter { padding-block: 0; }
.s-card .s-tags .s-tag { position: relative; }
.s-card .s-tags .s-tag::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

/* 홈 첫 화면 오른쪽 칸(11) = 추천 · 소개(두 버튼) · 많이 본 글 · 태그. 휴대폰은 위 분류 탭이 있어 태그 상자 · Latest 칩을 뺀다(15). */
.s-home-side { display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 1023px) { .s-home-side .s-sidebar-tags { display: none; } }
@media (max-width: 767px) { .s-home .s-quick-filters { display: none; } }

/* 기사 휴대폰 순서(6 · 5): 본문 → SnapHolo 두 버튼 → 기사 끝 상자 → 관련 기사 → 공유 → 댓글 → 사이드바. 겹 상자를 풀어 한 줄로 세운다(큰 화면은 그대로). */
.s-post-cta { display: none; }
#comments { scroll-margin-top: 88px; }
/* 관련 기사 칸이 일본어 제목 최소 폭에 끌려 320 폭에서 373px 로 넘쳤다 — 목록 카드와 같은 처방 */
.s-related .s-card { min-width: 0; }
@media (max-width: 1023px) {
  .post-template .s-post-cta { display: block; order: 2; }
  .post-template :is(.s-content-layout.has-sidebar, .s-content-main, .s-entry, .s-entry-footer) { display: contents; }  /* .has-sidebar = main.css 의 display:flex 보다 세게 */
  .post-template .s-entry-content { order: 1; }
  .post-template .s-news-footer { order: 3; }
  .post-template .s-container > [data-lang-only] { order: 4; }
  .post-template .s-entry-footer .s-share { order: 5; }
  .post-template #comments { order: 6; }
  .post-template .s-content-aside { order: 7; }
  .post-template .s-sidebar-about { display: none; }  /* 같은 두 버튼이 기사 끝에 있다 */
  .s-entry-footer #ghost-comments-root { padding: var(--space-4); }
}

/* 카드 메타 줄(저자 • 날짜): 좁으면 날짜가 「•」째 다음 줄 머리로 떨어졌다(320 태그 카드) → 한 줄 고정, 길면 저자 이름만 말줄임. */
.s-byline { flex-wrap: nowrap; min-width: 0; }
.s-byline-author, .s-byline-author-content, .s-byline-author-content a { min-width: 0; }
.s-byline-author-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.s-byline-date { flex: none; white-space: nowrap; }
/* 목록 자동 로딩 — 불러오는 중 자리를 처음부터 잡아 둔다(나중에 나타나며 바닥글을 밀지 않게) */
.s-card-loader{display:flex;min-height:44px}