/* Lusite (루사이트) - 블로그 (/blog/, /blog/<slug>/)
   tools/build_blog.py가 만드는 페이지 전용. 토큰·버튼·하위 상단 바·푸터는 style.css/pages.css를 그대로 쓴다.
   모양 규칙: 버튼·태그는 알약(999px), 면(목차·CTA·관련 글)은 18px, 표는 14px. 강조색은 --accent 하나. */

.blog { word-break: keep-all; overflow-wrap: break-word; }
.blog .nav__links a[aria-current="page"] { background: var(--accent-soft); color: var(--ink); }

/* ---------- 공통 메타·태그 ---------- */
.bmeta { margin: 0; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bmeta__sep { margin: 0 6px; color: var(--line-2); }
.btags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.btags li { padding: 4px 11px; border-radius: 999px; font-size: 13px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- 목록 (/blog/) ---------- */
.bwrap { padding-block: clamp(40px, 6vw, 88px) 0; }
/* RSS는 화면에 버튼을 두지 않는다(오너 결정 2026-10-28). 검색엔진·구독기는 head의 rel=alternate로 찾는다 */
.bhead { display: grid; gap: 12px; max-width: 1080px; }
.bhead__title { margin: 0; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; letter-spacing: -0.04em; font-weight: 760; }
.bhead__lede { margin: 0; max-width: 46ch; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.65; color: var(--ink-2); }

/* 맨 위 글: 표지가 있으면 표지 + 글 두 칸, 없으면 글만 넓게(빈 색면으로 그림 자리를 채우지 않는다). */
.blead { margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(28px, 3.5vw, 40px); border-top: 1px solid var(--line); max-width: 1080px; }
.blead__link { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; color: inherit; text-decoration: none; }
.blead--cover { max-width: none; }
.blead--cover .blead__link { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.blead__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; box-shadow: 0 0 0 1px var(--line); }
.blead__text { min-width: 0; }
.blead__title { margin: 12px 0 0; max-width: 24em; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.25; letter-spacing: -0.035em; font-weight: 740; }
.blead__desc { margin: 14px 0 0; max-width: 52ch; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.blead__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 650; color: var(--accent-text); }
.blead__more svg { width: 18px; height: 18px; fill: currentColor; transition: transform 0.2s ease; }
.blead__link:hover .blead__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.blead__link:hover .blead__more svg { transform: translateX(3px); }

.bindex { margin-top: clamp(56px, 7vw, 96px); max-width: 1080px; }
.bindex__h { margin: 0 0 8px; font-size: 15px; font-weight: 650; color: var(--ink-3); }
.bindex__list { margin: 0; padding: 0; list-style: none; }
.bindex__row + .bindex__row { border-top: 1px solid var(--line); }
.bindex__row a { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 20px; padding: 22px 0; color: inherit; text-decoration: none; }
.bindex__date { font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 4px; }
.bindex__body { display: grid; gap: 6px; }
.bindex__title { font-size: 1.1875rem; font-weight: 680; line-height: 1.4; letter-spacing: -0.02em; }
.bindex__desc { color: var(--ink-2); line-height: 1.6; }
.bindex__row a:hover .bindex__title { text-decoration: underline; text-underline-offset: 4px; }
.bempty { margin-top: 48px; color: var(--ink-2); }

/* ---------- 글 (/blog/<slug>/) ---------- */
.bpost__head { padding-block: clamp(32px, 5vw, 72px) 0; max-width: 1080px; }
.bcrumb { display: flex; gap: 8px; font-size: 14px; color: var(--ink-3); }
.bcrumb a { color: var(--ink-3); text-decoration: none; }
.bcrumb a:hover { color: var(--ink); text-decoration: underline; }
.bpost__title { margin: 18px 0 0; max-width: 22em; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.22; letter-spacing: -0.04em; font-weight: 760; }
.bpost__desc { margin: 16px 0 18px; max-width: 60ch; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.7; color: var(--ink-2); }
.bpost__hero { display: block; width: min(100% - 2 * var(--gutter), 1080px); height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: clamp(28px, 4vw, 48px) auto 0; border-radius: 18px; box-shadow: 0 0 0 1px var(--line); }

.bpost__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px;
  max-width: 1080px; padding-top: clamp(32px, 4vw, 56px);
}
@media (min-width: 1100px) {
  .bpost__grid:has(.btoc) { grid-template-columns: minmax(0, 1fr) 248px; }
  .bpost__grid .btoc { order: 2; position: sticky; top: 24px; align-self: start; }
}
.btoc__box { padding: 18px 20px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.btoc__sum { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink-2); list-style: none; }
.btoc__sum::-webkit-details-marker { display: none; }
.btoc__list { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; }
.btoc__list a { color: var(--ink-2); text-decoration: none; }
.btoc__list a:hover { color: var(--ink); text-decoration: underline; }

/* 본문 타이포: 한 줄 68자 안팎, 제목 간격은 위를 넓게 */
.bprose { min-width: 0; max-width: 70ch; font-size: 1.0625rem; line-height: 1.85; color: var(--ink); }
.bprose > * + * { margin-top: 1.1em; }
.bprose h2 { margin-top: 2.4em; font-size: clamp(1.35rem, 2.2vw, 1.65rem); line-height: 1.35; letter-spacing: -0.03em; font-weight: 740; scroll-margin-top: 24px; }
.bprose h3 { margin-top: 1.9em; font-size: 1.2rem; line-height: 1.45; letter-spacing: -0.02em; font-weight: 700; scroll-margin-top: 24px; }
.bprose h2 + *, .bprose h3 + * { margin-top: 0.7em; }
.bprose p { margin-bottom: 0; }
.bprose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bprose a:hover { text-decoration-thickness: 2px; }
.bprose strong { font-weight: 700; }
.bprose ul, .bprose ol { padding-left: 1.4em; }
.bprose li + li { margin-top: 0.45em; }
.bprose li::marker { color: var(--ink-3); }
.bprose blockquote { margin-inline: 0; padding: 14px 20px; border-radius: 14px; background: var(--accent-soft); color: var(--ink); }
.bprose blockquote > :first-child { margin-top: 0; }
.bprose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.4em; }
.bprose code { padding: 0.12em 0.4em; border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.92em; }
.bprose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.95rem; line-height: 1.6; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.bprose th, .bprose td { padding: 12px 14px; text-align: left; vertical-align: top; min-width: 7rem; }
.bprose thead th { background: var(--surface); font-weight: 700; white-space: nowrap; }
.bprose tbody tr + tr td { border-top: 1px solid var(--line); }
.bprose img { max-width: 100%; height: auto; border-radius: 14px; }

/* ---------- 글 끝 문의 + 관련 글 ---------- */
.bcta { max-width: 1080px; margin-top: clamp(56px, 7vw, 96px); }
.bcta__box { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 32px; padding: clamp(24px, 3.4vw, 40px); border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.bcta__title { margin: 0; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.4; letter-spacing: -0.025em; font-weight: 720; }
.bcta__text { grid-column: 1; margin: 0; color: var(--ink-2); line-height: 1.6; }
.bcta__box .btn { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }

.brel { max-width: 1080px; margin-top: clamp(48px, 6vw, 80px); }
.brel__h { margin: 0 0 16px; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
.brel__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.brel__card { display: grid; gap: 10px; height: 100%; padding: 18px 20px; border-radius: 18px; color: inherit; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.2s ease, background-color 0.2s ease; }
.brel__card:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.brel__title { font-weight: 680; line-height: 1.45; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 900px) {
  .blead--cover .blead__link { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .bindex__row a { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bprose { font-size: 1rem; line-height: 1.8; }
  .bcta__box { grid-template-columns: minmax(0, 1fr); }
  .bcta__box .btn { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .blead__more svg, .brel__card { transition: none !important; }
}