/* ============================================================
   桜光 컴포넌트 CSS  v2 — 잉크 & 종이
   !important 0개.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* ════════════════════════════════════════════════════════════
   상단 바
   카테고리 바로가기가 헤더 배너에서 여기로 올라왔다.
   sticky + backdrop-blur 는 고정 요소에만 허용된다.
   ════════════════════════════════════════════════════════════ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--hairline);
}
/* backdrop-filter 미지원 브라우저는 불투명 배경으로 */
@supports not (backdrop-filter: blur(1px)) {
  .topbar { background: var(--bg); }
}

.topbar__inner {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ── 브랜드 ────────────────────────────────────────────────
   히어로에 이미 큰 桜光 이 있으니 같은 화면에 두 번 나올 필요가 없다.
   히어로 제목이 상단바 밑으로 사라지면 그때 나타난다.
   기본값은 "보임" 이다. JS 가 없거나 히어로가 없는 페이지(글·아카이브)에서도
   브랜드가 정상 표시되게 하기 위한 점진적 향상 방식. */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 0;
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              visibility 0s;
}
.brand.is-hidden {
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;              /* 숨은 링크에 탭 초점이 가지 않게 */
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              visibility 0s var(--t-base);
}
/* 로고 이미지와 태그라인은 뺐다. 桜光 글자 자체가 로고 역할을 한다. */
.brand__title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: opacity var(--t-fast) var(--ease-out);
}
.brand:hover .brand__title { opacity: 0.7; }

/* ── 주 메뉴 ────────────────────────────────────────────── */
.mainnav { flex: 1 1 auto; min-width: 0; }

.mainnav__list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin: 0; padding: 0;
  list-style: none;
}

.mainnav__list > li > a {
  position: relative;
  display: block;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.mainnav__list > li > a:hover {
  color: var(--text);
  background: var(--surface-2);
}

/* 밑줄은 커서가 온 쪽에서 자라난다 */
.mainnav__list > li > a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.mainnav__list > li > a:hover::after { transform: scaleX(1); }

.mainnav__list > li > a[aria-current="page"] {
  color: var(--text);
  font-weight: 700;
}
.mainnav__list > li > a[aria-current="page"]::after { transform: scaleX(1); }

/* ── 도구 ──────────────────────────────────────────────── */
/* margin-left:auto 가 있어야 메뉴가 absolute 로 빠지는 모바일에서도
   검색·다크모드 버튼이 오른쪽 끝에 붙는다. */
.topbar__tools {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
  color: var(--text-muted);
  background: transparent;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
.icon-btn:hover  { background: var(--surface-2); color: var(--text); }
.icon-btn:active { transform: scale(0.93); }
.icon-btn svg { width: 19px; height: 19px; }

.theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: block; }
}

.nav-toggle { display: none; }

/* ── 검색 ────────────────────────────────────────────────
   메뉴 6개가 이미 상단바 오른쪽을 채우고 있어서, 입력창을 인라인으로
   넣으면 좁은 화면에서 두 줄로 터진다. 버튼으로 열고 아래에 한 줄 펼친다. */
.searchbar {
  overflow: hidden;
  max-height: 0;
  border-top: 1px solid transparent;
  transition: max-height var(--t-base) var(--ease-out);
}
.searchbar.is-open {
  max-height: 90px;
  border-top-color: var(--hairline);
}

.searchform {
  display: flex;
  gap: 8px;
  padding: 13px 0 15px;
}

.searchform__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  transition: box-shadow var(--t-fast) var(--ease-out);
}
/* subtle 로 두면 라이트 모드에서 4.47:1 로 AA 미달이다.
   입력창 배경이 흰색이 아니라 surface-2 라 그만큼 대비가 깎인다. */
.searchform__input::placeholder { color: var(--text-muted); }
.searchform__input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}

.searchform__submit {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
.searchform__submit:hover  { opacity: 0.88; }
.searchform__submit:active { transform: scale(0.97); }

/* ════════════════════════════════════════════════════════════
   히어로 — 夜桜
   桜光 = 벚꽃 + 빛. 이름의 뜻을 그대로 화면에 옮긴 자리다.
   페이지에서 색이 허용된 유일한 구역. 나머지는 전부 모노크롬.
   사진 위에 얹히는 표면이라 라이트/다크 모드와 무관하게 항상 어둡다.
   ════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: var(--page-pad);
  border-radius: var(--r-lg);
  /* 옛 배너의 가로로 긴 비율을 승계. 사진이 주인공이라 너무 높으면 안 된다. */
  min-height: clamp(300px, 30vw, 420px);
  display: flex;
  box-shadow: var(--shadow-2);
}

/* 사진이 없어도 완성된 화면이어야 한다.
   등불빛과 꽃잎빛을 CSS 그라디언트로 먼저 깔고,
   hero.jpg 가 있으면 그 위에 얹힌다. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(62% 52% at 78% 62%, rgba(240, 179, 74, 0.72), transparent 64%),
    radial-gradient(50% 44% at 24% 24%, rgba(231, 154, 192, 0.40), transparent 68%),
    radial-gradient(44% 38% at 54% 92%, rgba(240, 179, 74, 0.30), transparent 72%),
    linear-gradient(158deg, var(--night-deep) 0%, var(--night) 54%, var(--night-deep) 100%);
}

/* 초점 나간 제등 불빛. 사진 속 보케를 옮겼다.
   장식용 SVG 를 그리는 게 아니라 순수한 빛 표현이라 CSS 로 충분하다. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 71% 34%, rgba(255, 205, 130, 0.95) 0, rgba(255, 205, 130, 0) 2.6%),
    radial-gradient(circle at 86% 49%, rgba(255, 198, 112, 0.80) 0, rgba(255, 198, 112, 0) 2.1%),
    radial-gradient(circle at 63% 71%, rgba(255, 186, 96, 0.70) 0, rgba(255, 186, 96, 0) 1.7%),
    radial-gradient(circle at 92% 76%, rgba(255, 214, 150, 0.60) 0, rgba(255, 214, 150, 0) 1.4%),
    radial-gradient(circle at 78% 18%, rgba(255, 176, 176, 0.55) 0, rgba(255, 176, 176, 0) 1.6%),
    radial-gradient(circle at 55% 22%, rgba(255, 225, 180, 0.45) 0, rgba(255, 225, 180, 0) 1.1%),
    radial-gradient(circle at 96% 33%, rgba(255, 190, 120, 0.50) 0, rgba(255, 190, 120, 0) 1.9%);
  filter: blur(0.4px);
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  /* 아주 느린 확대. transform 만 건드리므로 GPU 안전. */
  animation: hero-drift 26s var(--ease-out) infinite alternate;
}
@keyframes hero-drift {
  from { transform: scale(1.02); }
  to   { transform: scale(1.10); }
}

/* 글자 대비를 확보하는 스크림.
   제목이 위, 문구가 아래에 있으므로 위아래를 눌러주고 왼쪽에 약간 더 얹는다.
   가운데는 열어둬서 사진이 살아난다. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* 우하단 국소 스크림.
       영문 블록이 오른쪽으로 옮겨가면서 가로 스크림(58%에서 0)이 닿지 않는
       구간에 놓였고, 실측 3.76:1 로 AA 미달이 났다. 이 한 겹으로 해결. */
    radial-gradient(70% 64% at 100% 100%, rgba(10, 6, 14, 0.76), transparent 76%),
    radial-gradient(58% 62% at 0% 0%, rgba(10, 6, 14, 0.60), transparent 72%),
    linear-gradient(180deg,
      rgba(10, 6, 14, 0.62) 0%,
      rgba(10, 6, 14, 0.22) 40%,
      rgba(10, 6, 14, 0.34) 62%,
      rgba(10, 6, 14, 0.78) 100%),
    linear-gradient(90deg, rgba(10, 6, 14, 0.34) 0%, rgba(10, 6, 14, 0) 60%);
}

/* 옛 배너 배치를 그대로 승계한다:
   제목은 좌상단, 일본어 한 줄은 좌하단, Since 는 우하단. */
.hero__inner {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  /* 사진이 주인공이라 글자는 모서리로 밀어붙인다 */
  padding: clamp(18px, 2.1vw, 28px) clamp(20px, 2.3vw, 32px);
}

.hero__title {
  /* 명조 CJK 글리프는 em 박스 안쪽에서 획이 시작한다(실측 0.0246em).
     보정하지 않으면 위의 영문 eyebrow 보다 오른쪽으로 밀려 보인다.
     px 가 아니라 em 이라 반응형으로 크기가 변해도 라인이 유지된다. */
  margin: 0 0 0 -0.025em;
  font-family: var(--font-jp);
  font-size: clamp(3.4rem, 2rem + 6.4vw, 6.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
}

.hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 20px;
}

/* 영문은 전부 우하단에 모았다.
   CJK 인 桜光 과 라틴을 같은 세로선에 억지로 맞추는 것보다
   아예 다른 모서리로 떼어놓는 편이 훨씬 안정적이다. */
.hero__meta {
  margin: 0;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
  font-family: var(--font-en);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.hero__meta-lead {
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.94);
}
.hero__meta-sub {
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  /* 0.66 이면 이 분홍 사진 위에서 3.77:1 로 AA 미달이 난다. */
  color: rgba(255, 255, 255, 0.86);
}

/* ════════════════════════════════════════════════════════════
   일본어 조판 유틸
   Shippori Mincho 에는 한글이 없다. 이 클래스는 순수 일본어에만 붙인다.
   ════════════════════════════════════════════════════════════ */
.jp {
  font-family: var(--font-jp);
  font-feature-settings: "palt" 1;
}

/* 영문 헤드라인. Stack Sans Headline 은 라틴 전용이라
   한글·일본어에는 절대 붙이지 않는다. */
.en {
  font-family: var(--font-en);
  letter-spacing: 0.01em;
}

/* ════════════════════════════════════════════════════════════
   본문 레이아웃 — 사이드바 왼쪽
   ════════════════════════════════════════════════════════════ */

.layout {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
  padding-block: var(--section-gap);
}

.sidebar {
  position: sticky;
  top: calc(var(--topbar-h) + 20px);
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

/* ════════════════════════════════════════════════════════════
   프로필 카드 — "소개"
   하프톤 띠(껍데기) 위로 1:1 아바타가 겹쳐 올라온다.
   ════════════════════════════════════════════════════════════ */

.profile-card {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1), var(--inner-top);
  overflow: hidden;
  text-align: center;
}

/* 프로필 아트의 점묘를 옮긴 텍스처 띠.
   작고 고정된 영역에만 쓴다. 스크롤 컨테이너에는 절대 안 깐다. */
.profile-card__band {
  height: 88px;
  background:
    radial-gradient(var(--halftone-dot) 1px, transparent 1.15px) 0 0 /
      var(--halftone-size) var(--halftone-size),
    var(--surface-2);
  border-bottom: 1px solid var(--hairline);
}

.profile-card__body { padding: 0 20px 22px; }

/* 1:1 아바타 */
.profile-card__avatar {
  width: 118px;
  aspect-ratio: 1 / 1;
  margin: -62px auto 14px;
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 0 0 5px var(--surface), var(--shadow-2);
  transition: transform var(--t-slow) var(--ease-spring);
}
.profile-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-card:hover .profile-card__avatar { transform: scale(1.04); }

.profile-card__name {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
}
.profile-card__role {
  margin-top: 3px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.profile-card__bio {
  margin: 12px 0 0;
  font-size: var(--fs-meta);
  line-height: 1.75;
  color: var(--text-muted);
  word-break: keep-all;
}

/* 통계·링크·CTA 는 사용자 요청으로 제거.
   남은 건 아바타 / 이름 / 소개글 / 시계 뿐이다. */

.profile-card__clock {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.clock__date { font-size: var(--fs-micro); color: var(--text-subtle); }
.clock__time {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* ════════════════════════════════════════════════════════════
   사이드바 위젯
   ════════════════════════════════════════════════════════════ */

.widget {
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1), var(--inner-top);
}
.widget__title {
  margin-bottom: 12px;
  font-size: 0.9375rem;
  font-weight: 800;
}

/* ── 접이식 위젯 ──────────────────────────────────────────
   <details> 를 쓰면 키보드 조작과 스크린리더 대응이 공짜로 따라온다.
   마크업에 open 을 박아둬서 JS 가 없으면 펼쳐진 상태로 남는다. */
.widget--collapsible { padding: 0; }

.widget--collapsible > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;                 /* 기본 삼각형 마커 제거 */
  user-select: none;
}
.widget--collapsible > summary::-webkit-details-marker { display: none; }
.widget--collapsible > summary::marker { content: ""; }
.widget--collapsible > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--r-lg);
}

.widget__count {
  font-family: var(--font-num);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.widget__chevron {
  width: 18px; height: 18px;
  margin-left: auto;
  color: var(--text-subtle);
  transition: transform var(--t-base) var(--ease-out);
}
.widget--collapsible[open] .widget__chevron { transform: rotate(180deg); }

.widget--collapsible > .cat-list { padding: 0 18px 14px; }

.cat-list { margin: 0; padding: 0; list-style: none; }
.cat-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.cat-list a:hover { background: var(--accent-weak); color: var(--accent); }
.cat-list .n {
  font-family: var(--font-num);
  font-size: var(--fs-micro);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════
   홈 섹션
   각 섹션 = 커스터마이저 슬롯 1개 (카테고리 / 개수 / 레이아웃)
   ════════════════════════════════════════════════════════════ */

.home-section + .home-section { margin-top: var(--section-gap); }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.section-head h2 { font-size: var(--fs-h2); font-weight: 800; }
.section-head__n {
  font-family: var(--font-num);
  font-size: var(--fs-meta);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
.section-head__more {
  margin-left: auto;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text-muted);
  transition: color var(--t-fast) var(--ease-out);
}
.section-head__more:hover { color: var(--accent); }

/* ── 레이아웃 A: 피처드 (큰 카드 1 + 옆에 목록) ──────────── */
.featured {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--gutter);
}
.featured__side { display: flex; flex-direction: column; gap: 12px; }

/* ── 레이아웃 B: 3열 그리드 ─────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}

/* ════════════════════════════════════════════════════════════
   글 카드 (Double-Bezel: 껍데기 20 - 여백 6 = 코어 14)
   ════════════════════════════════════════════════════════════ */

.post-card {
  padding: var(--bezel);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1), var(--inner-top);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2), var(--inner-top);
}
.post-card:active { transform: translateY(-1px); }

.post-card__link { display: flex; flex-direction: column; height: 100%; }

.post-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
}
.post-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.post-card:hover .post-card__media img { transform: scale(1.05); }

.post-card__body {
  display: flex; flex-direction: column; gap: 8px;
  padding: 15px 11px 11px;
  flex: 1;
}

.chip {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--r-sm);
  background: var(--accent-weak);
  color: var(--accent);
  font-size: var(--fs-micro);
  font-weight: 700;
}

.post-card__title {
  font-size: var(--fs-card);
  font-weight: 700;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--t-fast) var(--ease-out);
}
.post-card:hover .post-card__title { color: var(--accent); }

.post-card__excerpt {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.65;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
}

.post-card__meta {
  margin-top: auto;
  padding-top: 10px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-num);
  font-size: var(--fs-micro);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
.post-card__meta .sep { opacity: 0.5; }

/* ── 피처드 대형 카드 ────────────────────────────────────── */
.post-card--lead .post-card__media { aspect-ratio: 16 / 9; }
.post-card--lead .post-card__body { padding: 18px 14px 14px; gap: 10px; }
.post-card--lead .post-card__title {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  -webkit-line-clamp: 3;
}
.post-card--lead .post-card__excerpt { -webkit-line-clamp: 3; font-size: 0.9375rem; }

/* ── 가로형 미니 카드 (피처드 옆 목록) ───────────────────── */
.post-card--mini .post-card__link { flex-direction: row; gap: 12px; align-items: stretch; }
.post-card--mini .post-card__media {
  flex: 0 0 84px;
  aspect-ratio: 1 / 1;
  align-self: center;
}
.post-card--mini .post-card__body { padding: 4px 8px 4px 0; gap: 5px; }
.post-card--mini .post-card__title { font-size: 0.9375rem; }
.post-card--mini .post-card__meta { padding-top: 4px; }

/* ════════════════════════════════════════════════════════════
   푸터
   ════════════════════════════════════════════════════════════ */

.site-footer {
  margin-top: var(--section-gap);
  border-top: 1px solid var(--hairline);
  background: var(--surface);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  padding-block: 34px 40px;
}

.site-footer__brand {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.site-footer__meta {
  margin: 8px 0 0;
  font-family: var(--font-num);
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  color: var(--text-subtle);
}

/* 공지성 문구. 눈에 띄되 소리 지르지는 않게. */
.site-footer__notice {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--hairline-firm);
  font-size: var(--fs-meta);
  line-height: 1.85;
  color: var(--text-muted);
  word-break: keep-all;
}

/* ════════════════════════════════════════════════════════════
   스크롤 진입 — IntersectionObserver 전용
   ════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ════════════════════════════════════════════════════════════
   반응형
   ════════════════════════════════════════════════════════════ */

/* 데스크톱에서는 항상 펼쳐져 있으므로 접기 UI 를 노출하지 않는다 */
@media (min-width: 981px) {
  .widget--collapsible > summary { cursor: default; }
  .widget__chevron { display: none; }
}

@media (max-width: 1180px) {
  :root { --sidebar: 268px; --gutter: 20px; }
  .mainnav__list > li > a { padding-inline: 9px; font-size: 0.9rem; }
}

/* 사이드바를 위로 접는 지점 */
@media (max-width: 980px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; }

  /* 프로필 카드는 접혀도 가로로 넓게 쓴다 */
  .profile-card { text-align: left; }
  .profile-card__band { height: 72px; }
  .profile-card__body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 20px;
    padding: 0 22px 22px;
  }
  .profile-card__avatar { width: 104px; margin: -52px 0 0; }
  .profile-card__head { padding-top: 12px; }
  .profile-card__clock { grid-column: 1 / -1; justify-content: flex-start; }

  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured { grid-template-columns: minmax(0, 1fr); }
}

/* 메뉴를 접이식으로 전환하는 지점 */
@media (max-width: 860px) {
  :root { --topbar-h: 60px; }

  .topbar__inner { gap: 12px; }
  .brand__title { font-size: 1.1rem; }

  /* 페이지 배경과 같은 색이면 패널로 안 읽힌다.
     surface + 그림자로 확실히 떠 있게 만든다. */
  .mainnav {
    position: absolute;
    left: 0; right: 0; top: var(--topbar-h);
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--t-base) var(--ease-out);
  }
  .mainnav.is-open { max-height: 340px; }
  .mainnav__list {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 6px var(--page-pad) 12px;
  }
  .mainnav__list > li > a { padding: 12px 10px; font-size: 0.9375rem; }
  .mainnav__list > li > a::after { left: 10px; right: auto; width: 18px; }

  .nav-toggle { display: grid; }
}

@media (max-width: 620px) {
  :root { --page-pad: 14px; --gutter: 14px; }

  /* 좁은 화면에서도 우하단을 유지한다.
     왼쪽으로 옮기면 桜光 과 라틴이 다시 같은 세로선을 공유하게 되고,
     서로 사이드베어링이 달라 어긋나 보인다. 대각선 배치가 안전하다. */

  .searchform__submit { padding-inline: 16px; }

  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__notice { padding-left: 12px; }

  .card-grid { grid-template-columns: minmax(0, 1fr); }

  .profile-card { text-align: center; }
  .profile-card__body { display: block; padding: 0 18px 20px; }
  .profile-card__avatar { width: 108px; margin: -56px auto 14px; }
  .profile-card__head { padding-top: 0; }
  .profile-card__clock { justify-content: center; }

  .post-card--mini .post-card__media { flex-basis: 72px; }
}

/* ════════════════════════════════════════════════════════════
   터치 기기
   ════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .icon-btn   { width: 44px; height: 44px; }
  .cat-list a { padding: 10px; }
}

/* ════════════════════════════════════════════════════════════
   모션 최소화
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════
   워드프레스 전용 컴포넌트
   프로토타입에는 없던, 실제 사이트에서 필요한 것들.
   ════════════════════════════════════════════════════════════ */

/* 키보드 사용자를 위한 건너뛰기 링크. 초점을 받으면 나타난다. */
.skip-link:focus {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 200;
  width: auto; height: auto;
  clip: auto;
  padding: 10px 18px;
  border-radius: var(--r-full);
  background: var(--text);
  color: var(--bg);
  font-weight: 700;
}

/* 썸네일이 없는 글 */
.post-card__media-empty {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(var(--halftone-dot) 1px, transparent 1.15px) 0 0 /
      var(--halftone-size) var(--halftone-size),
    var(--surface-2);
}

/* ── 글 상세 ────────────────────────────────────────────── */
.entry {
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1), var(--inner-top);
}

.entry-header { margin-bottom: 22px; }

.entry-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: var(--font-num);
  font-size: var(--fs-meta);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.entry-title {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.35;
  word-break: keep-all;
}

.entry-thumb {
  margin: 0 0 26px;
  border-radius: var(--r-md);
  overflow: hidden;
}
.entry-thumb img { width: 100%; height: auto; }

/* 본문은 읽기 폭을 제한한다. 한글은 45~50자 근처가 편하다. */
.entry-content {
  max-width: 42em;
  font-size: 1.0625rem;
  line-height: 1.85;
  word-break: keep-all;
}
.entry-content > * + * { margin-top: 1.15em; }

.entry-content h2 { margin-top: 2em; font-size: 1.35rem; font-weight: 800; }
.entry-content h3 { margin-top: 1.7em; font-size: 1.15rem; font-weight: 700; }

.entry-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.entry-content a:hover { text-decoration-thickness: 2px; }

.entry-content img,
.entry-content video,
.entry-content iframe { max-width: 100%; height: auto; border-radius: var(--r-md); }

.entry-content blockquote {
  margin-inline: 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
}

.entry-content pre {
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.6;
}
.entry-content code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 0.92em;
}
.entry-content pre code { padding: 0; background: none; }

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.entry-content th,
.entry-content td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
}

.entry-content ul,
.entry-content ol { padding-left: 1.3em; }
.entry-content li + li { margin-top: 0.4em; }

/* 넓은 정렬은 읽기 폭을 넘어설 수 있게 풀어준다 */
.entry-content .alignwide,
.entry-content .alignfull { max-width: none; }
.entry-content .alignwide { width: 100%; }

.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.entry-tags a {
  padding: 4px 11px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.entry-tags a:hover { background: var(--accent-weak); color: var(--accent); }

/* ── 이전 / 다음 글 ─────────────────────────────────────── */
.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: var(--gutter);
}
.post-nav__prev,
.post-nav__next {
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1), var(--inner-top);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.post-nav__next { text-align: right; }
.post-nav__prev:hover,
.post-nav__next:hover { transform: translateY(-3px); box-shadow: var(--shadow-2), var(--inner-top); }
.post-nav a { display: block; font-size: 0.9375rem; font-weight: 700; line-height: 1.5; }
.post-nav span {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--text-subtle);
}

/* ── 페이지네이션 ───────────────────────────────────────── */
.pagination { margin-top: var(--section-gap); }
.pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0; padding: 0;
  list-style: none;
}
.pagination a,
.pagination span {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 12px;
  border-radius: var(--r-full);
  font-family: var(--font-num);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.pagination a:hover { background: var(--surface-2); color: var(--text); }
.pagination .current { background: var(--text); color: var(--bg); }

/* ── 안내 카드 (404 / 결과 없음) ────────────────────────── */
.notice-card {
  padding: clamp(26px, 4vw, 44px);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1), var(--inner-top);
  text-align: center;
}
.notice-card__title { font-size: var(--fs-h2); font-weight: 800; }
.notice-card__text {
  margin: 10px auto 22px;
  max-width: 34em;
  color: var(--text-muted);
  word-break: keep-all;
}
.notice-card .searchform { max-width: 460px; margin-inline: auto; }

.archive-desc {
  margin: -6px 0 20px;
  color: var(--text-muted);
  word-break: keep-all;
}

/* 본문에 삽입되는 검색 폼은 상단바용 여백이 필요 없다 */
.searchform--inline { padding: 0; }

/* ── 댓글 ───────────────────────────────────────────────── */
.comments-area {
  margin-top: var(--gutter);
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1), var(--inner-top);
}
.comments-title,
.comment-reply-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 18px; }
.comment-list { margin: 0; padding: 0; list-style: none; }
.comment-list li { padding-block: 16px; border-top: 1px solid var(--hairline); }
.comment-list .children { margin: 12px 0 0 22px; padding: 0; list-style: none; }
.comment-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.comment-author img { border-radius: var(--r-full); }
.comment-metadata { font-size: var(--fs-micro); color: var(--text-subtle); }
.comment-content { font-size: 0.95rem; line-height: 1.75; word-break: keep-all; }

.comment-form { display: grid; gap: 12px; }
.comment-form label { font-size: var(--fs-meta); font-weight: 600; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}
.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.comment-form .submit {
  justify-self: start;
  padding: 11px 24px;
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-sans);
  font-weight: 700;
}

/* ── 워드프레스 코어 클래스 ─────────────────────────────── */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption {
  margin-top: 8px;
  font-size: var(--fs-meta);
  color: var(--text-subtle);
  text-align: center;
}
.sticky .post-card { box-shadow: var(--shadow-2), 0 0 0 2px var(--accent); }

@media (max-width: 620px) {
  .post-nav { grid-template-columns: minmax(0, 1fr); }
  .post-nav__next { text-align: left; }
}