/* 桜光 2.0 — 시안 v5(프로토타입-v5/style.css)를 옮긴 것. 어두운 화면, 최대한 담백하게.
   장식 없이 글자·여백·가는 선만 쓰고, 사쿠라는 화면마다 한 명, 가는 선 위에 서 있다(상자 안에 넣지 않는다).
   맨 아래 「워드프레스」 칸은 본문 블록·댓글·플러그인(목차 등)을 이 화면에 맞춘 것. */

:root {
  --bg: #0B0B0C;
  --ink: #EDEDE9;      /* 제목 */
  --text: #D4D4D0;     /* 본문 — 밤에 읽으니 순백보다 한 단계 낮게 */
  --mute: #B4B4B9;     /* 10/31: 흐린 글자 금지(가독성). 보조 글자도 또렷하게 — 강약은 크기·굵기로 */
  --faint: #A2A2A8;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .18);
  --sans: "Geist", "Pretendard JP Variable", "Pretendard JP", system-ui, sans-serif;
  --ko: "Pretendard JP Variable", "Pretendard JP", system-ui, sans-serif;
  --mono: "Geist", "Pretendard JP Variable", system-ui, sans-serif;   /* 10/31: Geist Mono는 0에 사선이 있어 뺌. 숫자만 고정폭(tabular-nums) */
  --jp: "Sakuhika JP", var(--ko);   /* 桜光 두 글자만. 후보는 fonts/compare.html */
  --wrap: 1120px;
  --gut: 40px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

/* 桜光 두 글자 글꼴 — 구글 폰트에서 두 글자만 받아 fonts/에 둠. 바꿀 땐 파일 이름만 */
@font-face { font-family: "Sakuhika JP"; src: url(../fonts/line-seed-jp-100.woff2) format("woff2"); font-display: swap; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-variant-numeric: tabular-nums;
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 15px/1.7 var(--sans); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  word-break: keep-all; overflow-wrap: break-word;   /* 한국어는 낱말 단위로 줄바꿈 */
}
a, body a:where(:not(.wp-element-button)) { color: inherit; text-decoration: none; }   /* 워드프레스 전역 스타일의 밑줄을 끈다 */
button, input { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.narrow { width: 100%; max-width: calc(680px + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.label {
  margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute);
}

/* ── 머리 ── */
.head {
  position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 20; background: var(--bg);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.head.is-scrolled { border-bottom-color: var(--line); }
.head__in { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }
.brand { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.brand b { font: 400 20px/1 var(--jp); color: var(--ink); letter-spacing: .06em; }
.brand span { font: 500 13px/1 var(--sans); color: var(--mute); }
.nav { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--mute); }
.nav a { transition: color .2s; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.icon-btn {
  display: grid; place-items: center; width: 32px; height: 32px; margin-right: -6px;
  background: none; border: 0; color: var(--mute); cursor: pointer; transition: color .2s;
}
.icon-btn:hover { color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }

/* 돋보기를 누르면 메뉴 자리가 검색 칸으로 바뀐다 */
.search { display: none; flex: 1; max-width: 420px; align-items: center; gap: 10px; }
.head.is-search .nav { display: none; }
.head.is-search .search { display: flex; }

/* 첫 화면: 머리의 이름·☰는 큰 제목·「카테고리」와 겹치니 숨겨 두고, 글 목록에 들어서면 위에서 톡 튀어나온다 */
.head.is-quiet .brand, .head.is-quiet .nav [data-drawer] { opacity: 0; translate: 0 -12px; scale: .92; visibility: hidden; }
.head.is-quiet.is-peek .brand, .head.is-quiet.is-peek .nav [data-drawer] { opacity: 1; translate: 0 0; scale: 1; visibility: visible; }
.fx .head.is-quiet .brand, .fx .head.is-quiet .nav [data-drawer] {
  transition: opacity .25s, translate .3s var(--ease), scale .3s var(--ease), visibility 0s .3s;
}
.fx .head.is-quiet.is-peek .brand, .fx .head.is-quiet.is-peek .nav [data-drawer] {
  transition: opacity .35s, translate .55s cubic-bezier(.34, 1.56, .64, 1), scale .55s cubic-bezier(.34, 1.56, .64, 1), visibility 0s;
}
.fx .head.is-quiet.is-peek .nav [data-drawer] { transition-delay: .06s; }
.search input {
  flex: 1; min-width: 0; height: 36px; padding: 0; background: none; border: 0;
  border-bottom: 1px solid var(--line-2); color: var(--ink); font-size: 15px;
}
.search input:focus { outline: none; border-bottom-color: var(--ink); }
.search input::placeholder { color: var(--faint); }

/* ── 첫머리: 글자 + 선 위에 선 사쿠라 ── */
.intro {
  display: grid; grid-template-columns: auto auto 1fr; column-gap: 36px;
  grid-template-areas: "jp jp ." "title sakura ." "eyebrow sakura ." "by sakura .";
  grid-template-rows: 1fr auto auto auto;
  min-height: 460px; padding-top: 24px;
  position: relative;
}
/* 사쿠라가 딛는 선. 섹션 아래 끝 한 줄 */
.intro::after {
  content: ""; position: absolute; left: var(--gut); right: var(--gut); bottom: 0;
  height: 1px; background: var(--line-2); transform-origin: left;
}
.intro__eyebrow {   /* 10/31: saku-hika 아래로 */
  grid-area: eyebrow; margin: 26px 0 0;
  display: flex; gap: 18px; font: 500 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text);
}
.intro__eyebrow span + span::before { content: "/"; margin-right: 18px; color: var(--mute); }
.intro__title {
  grid-area: title; margin: 0;
  font: 600 clamp(64px, 9.6vw, 144px)/.88 var(--sans); letter-spacing: -.055em; color: var(--ink);
}
.intro__jp {   /* 10/31: 맨 위로(사용자 표시) */
  grid-area: jp; align-self: end; margin: 0 0 6px 6px;   /* 10/31: saku-hika 쪽으로 조금 내림 */
  font: 400 34px/1 var(--jp); letter-spacing: .14em; color: var(--ink);
}
.intro__by {
  grid-area: by; margin: 18px 0 0; padding-bottom: 24px;   /* 10/31: 아래 구분선을 by 줄 바로 밑으로(사용자) */
  font-size: 15px; color: var(--text);
}
.intro__by b { color: var(--ink); font-weight: 600; }
.intro__by .sep { margin: 0 10px; color: var(--mute); }
.intro__sakura {   /* 작게, 제목 바로 옆에서 선을 딛고 선다 */
  grid-area: sakura; align-self: end; justify-self: start;
  --h: 230px; margin: 0;
}
/* 사쿠라 자리 시안: data-sak="right"(오른쪽 끝) / "left"(왼쪽). 키는 main.js가 글 묶음 높이에 맞춘다
   (머리 = 맨 윗줄 위끝, 발 = 아래 선). .is-flip 이면 좌우 반전 */
@media (min-width: 761px) {
  .intro[data-sak="right"] { grid-template-columns: auto 1fr auto; grid-template-areas: "jp . sakura" "title . sakura" "eyebrow . sakura" "by . sakura"; }
  .intro[data-sak="right"] .intro__sakura { justify-self: end; margin-right: 40px; }   /* 10/31: 왼쪽으로 40px(20 + 20) */
  .intro[data-sak="left"] { grid-template-columns: auto auto 1fr; column-gap: 64px; grid-template-areas: "sakura jp ." "sakura title ." "sakura eyebrow ." "sakura by ."; }
  .intro[data-sak] .intro__sakura { grid-row: 1 / -1; margin-bottom: var(--lift, 0px); }
}
.stage.is-flip .sakura { transform: scaleX(-1); }
/* 다리 자르기: 그림은 더 크게, 아래 선 밑은 잘라서 선 뒤에서 올라온 것처럼(위·옆 빛은 살린다) */
.stage.is-crop { clip-path: inset(-80px -80px 0 -80px); }
.stage.is-crop .sakura { height: var(--img-h); }
.stage.is-crop::after { display: none; }
/* 선 위 허공에서 잘릴 때는 잘린 면을 아래로 스르르 흐리게 */
.stage.is-crop.is-lifted .sakura {
  -webkit-mask-image: linear-gradient(#000 calc(var(--crop-pct) - 7%), transparent var(--crop-pct));
  mask-image: linear-gradient(#000 calc(var(--crop-pct) - 7%), transparent var(--crop-pct));
}

/* 사쿠라 무대: 그림 + 은은한 빛(뒤) + 발밑 그림자.
   몸 둘레에 1px 흰 빛 테두리를 일부러 둘러서, 배경 따기에서 남은 흰 기운이 조명처럼 묻히게 한다 */
.stage { position: relative; margin: 0; height: var(--h); transform-origin: 50% 100%; }
.stage .sakura {
  position: relative; z-index: 1; height: 100%; width: auto;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .5)) drop-shadow(0 0 12px rgba(255, 255, 255, .09));
}
.stage::before {   /* 뒤에서 비치는 빛 — 테두리 없이 퍼지기만 한다 */
  content: ""; position: absolute; z-index: 0; left: -30%; right: -30%; top: 12%; bottom: -6%;
  background: radial-gradient(50% 50% at 50% 58%, rgba(255, 255, 255, .055), transparent 70%);
  pointer-events: none;
}
.stage::after {    /* 발밑 그림자 */
  content: ""; position: absolute; z-index: 0; left: 14%; right: 14%; bottom: -7px; height: 16px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, .35) 60%, transparent);
  filter: blur(1px); pointer-events: none;
}

/* 그림 속 화면·종이에 얹는 HTML — main.js가 네 모서리에 맞춰 원근(matrix3d)을 씌운다.
   크기는 여기 고정값을 기준으로 계산하니 바꾸면 비율도 맞출 것 */
.overlay { position: absolute; z-index: 2; left: 0; top: 0; transform-origin: 0 0; visibility: hidden; }
.overlay.is-on { visibility: visible; }

/* 첫 화면: 태블릿에 켜진 프로필. 누르면 사이드바 */
.screen {
  width: 264px; height: 180px; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, #FFFFFF, #E9ECF2); color: #18181B;
  box-shadow: 0 0 60px 14px rgba(215, 228, 255, .20);   /* 화면 불빛이 얼굴·손에 번지는 느낌 */
  transition: box-shadow .4s var(--ease);
}
.screen:hover { box-shadow: 0 0 70px 20px rgba(215, 228, 255, .32); }
.screen__in { display: grid; justify-items: center; gap: 10px; }
.screen img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px #fff, 0 4px 14px rgba(0, 0, 0, .18); }
.screen b { display: none; }   /* 사쿠라가 작아서 글자는 안 읽힌다 — 사진만 */

/* 404: 펼친 수첩 두 쪽에 손글씨(바탕 없이 글자만) */
.pages {
  width: 300px; height: 184px; display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  font-family: "Nanum Pen Script", var(--ko); color: #2A2A33; text-align: center; pointer-events: none;
}
.pages__l { font-size: 92px; line-height: 1; rotate: -4deg; }
.pages__r { font-size: 36px; line-height: 1.15; rotate: 2deg; }

/* 404: 같은 짜임에 제목만 한국어 */
.intro--nf { min-height: 440px; }
.intro--nf .intro__sakura { --h: 300px; }   /* 404는 사쿠라가 주인공이라 조금 크게(수첩 글씨가 읽히게) */
.intro__title--ko { font: 700 clamp(40px, 5.6vw, 72px)/1.1 var(--ko); letter-spacing: -.035em; }
.intro--nf .intro__by p { margin: 0 0 22px; }
.nf-search { display: flex; gap: 12px; max-width: 380px; margin-bottom: 26px; }
.nf-search input {
  flex: 1; min-width: 0; height: 40px; padding: 0; background: none; border: 0;
  border-bottom: 1px solid var(--line-2); color: var(--ink);
}
.nf-search input:focus { outline: none; border-bottom-color: var(--ink); }
.nf-search input::placeholder { color: var(--faint); }
.nf-search button {
  height: 40px; padding: 0 16px; background: var(--ink); color: var(--bg); border: 0; border-radius: 3px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}

/* ── 글 목록: 섹션마다 글 성격에 맞는 모양, 아래로 갈수록 촘촘하게 ──
   01 Weekly Log = 회차(큰 번호 + 지난 회차 한 줄)  02 Personality = 에세이(그림 없이 큰 인용·큰 제목)
   03 새로운 글 = 연도별 한 줄 목록(가리키면 썸네일이 커서 옆에)
   참고: Craig Mod Ridgeline·/essays, Soft Labor 호수, tonsky·thesephist 연도 목록 */
.posts-top { display: flex; align-items: center; gap: 24px; padding-top: 72px; margin-bottom: 8px; }
.side-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px; margin-left: auto;
  background: none; border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer;
  font-size: 12px; color: var(--text); transition: border-color .2s, color .2s;
}
.side-btn:hover { border-color: var(--ink); color: var(--ink); }
.side-btn svg { width: 15px; height: 15px; }

.sec { padding-top: 64px; }
.sec, .posts-top { scroll-margin-top: 40px; }   /* #latest-posts로 넘어올 때 머리 막대에 제목이 가리지 않게 */
.sec__head {
  display: flex; align-items: baseline; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2);
}
.sec__no { font: 400 12px/1 var(--mono); color: var(--faint); }
.sec__head h2, .sec__title { margin: 0; font: 600 28px/1.1 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.sec__head h2 span, .sec__title span { margin-left: 10px; font: 400 14px/1 var(--ko); letter-spacing: 0; color: var(--mute); }
.sec__all { margin-left: auto; font-size: 13px; color: var(--mute); white-space: nowrap; transition: color .2s; }
.sec__all:hover { color: var(--ink); }

/* 01 Weekly Log — 최신 회차 크게 */
.wl-lead a {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px; column-gap: 40px; align-items: center;
  padding: 36px 0; border-bottom: 1px solid var(--line);
}
.wl-no { grid-area: auto; font: 200 120px/.8 var(--sans); letter-spacing: -.06em; color: var(--ink); }
.wl-no small { display: block; margin-bottom: 14px; font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--mute); }
.wl-lead__text { min-width: 0; }
.wl-lead time, .essay-lead__label, .essay time { font: 400 12px/1 var(--mono); letter-spacing: .04em; color: var(--faint); }
.wl-lead h3 { margin: 12px 0 0; font: 500 24px/1.45 var(--ko); letter-spacing: -.025em; color: var(--ink); }
.wl-lead p { margin: 10px 0 0; font-size: 14px; color: var(--mute); }
.wl-lead__img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; background: #161618;
  filter: saturate(.85) brightness(.92); transition: filter .4s var(--ease);
}
/* 지난 회차: 번호 · 날짜 · 첫 문장 한 줄 */
.wl-idx { list-style: none; margin: 0; padding: 0; }
.wl-idx a {
  display: grid; grid-template-columns: 200px 104px 80px minmax(0, 1fr) auto; column-gap: 40px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.wl-idx__no { font: 400 13px/1 var(--mono); color: var(--mute); }
.wl-idx time { font: 400 13px/1 var(--mono); color: var(--faint); }
.wl-idx__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--text); transition: color .2s, translate .35s var(--ease); }
.wl-idx__img { width: 80px; }
.wl-idx__go { font-size: 13px; color: var(--faint); transition: color .2s, translate .35s var(--ease); }

/* 02 Personality — 최신 에세이 제목을 크게 + 요약, 썸네일은 옆·위에 차분하게 */
.essay-lead a {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 56px; align-items: center;
  padding: 40px 0 36px; border-bottom: 1px solid var(--line);
}
.essay-lead__text { min-width: 0; }
.essay__img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; background: #161618;
  filter: saturate(.85) brightness(.92); transition: filter .4s var(--ease);
}
.essay .essay__img { margin-bottom: 18px; }
.essay-lead__label { display: flex; align-items: center; gap: 10px; }
.essay-lead__label .new { margin: 0; }
.essay-lead h3 {
  margin: 16px 0 0; font: 600 clamp(30px, 3.4vw, 44px)/1.15 var(--sans); letter-spacing: -.035em; color: var(--ink);
  transition: color .2s;
}
.essay-lead p {
  margin: 16px 0 0; max-width: 560px; font-size: 16px; line-height: 1.75; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.essay-lead__go { display: inline-block; margin-top: 22px; font: 500 13px/1 var(--sans); color: var(--mute); transition: color .2s, translate .35s var(--ease); }
.essays { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.essay a { display: block; padding: 26px 0 28px; border-bottom: 1px solid var(--line); }
.essay h3 { margin: 12px 0 8px; font: 600 21px/1.35 var(--sans); letter-spacing: -.025em; color: var(--ink); transition: color .2s; }
.essay p {
  margin: 0; font-size: 14px; line-height: 1.65; color: var(--mute);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 03 새로운 글 — 연도별 한 줄 목록 */
.ledger { margin: 0; padding: 0; }
.yr { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 40px; border-bottom: 1px solid var(--line); }
.yr h3 {   /* 10/31: 연도 크게. 그 해 글이 끝날 때까지 왼쪽에 붙어 따라온다 */
  position: sticky; top: calc(92px + var(--wp-admin--admin-bar--height, 0px)); align-self: start; margin: 0; padding: 20px 0;
  font: 600 44px/1 var(--sans); letter-spacing: -.04em; color: var(--ink);
}
.yr ol { list-style: none; margin: 0; padding: 0; }
.yr li + li { border-top: 1px solid var(--line); }
.yr a {
  display: grid; grid-template-columns: 64px 112px minmax(0, 1fr) auto; column-gap: 24px; align-items: center;
  padding: 14px 0;
}
.yr__img, .wl-idx__img {   /* 썸네일은 늘 보인다(10/31). 밤에 눈부시지 않게 살짝만 눌러 둔다 */
  width: 112px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; background: #161618;
  filter: saturate(.85) brightness(.92); transition: filter .4s var(--ease);
}
.yr time { font: 400 13px/1 var(--mono); color: var(--faint); }
.yr__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 16px/1.4 var(--sans); color: var(--ink); letter-spacing: -.015em; transition: translate .35s var(--ease); }
.yr__c { font-size: 12px; color: var(--mute); white-space: nowrap; }
.new {
  margin-left: 10px; font: 500 10px/1 var(--mono); letter-spacing: .08em; color: var(--bg);
  background: var(--ink); padding: 3px 5px 2px; border-radius: 2px; vertical-align: 2px;
}

@media (hover: hover) {
  .wl-lead a:hover .wl-lead__img, .yr a:hover .yr__img, .wl-idx a:hover .wl-idx__img { filter: none; }
  .wl-idx a:hover .wl-idx__t, .yr a:hover .yr__t { translate: 6px 0; color: var(--ink); }
  .wl-idx a:hover .wl-idx__go { color: var(--ink); translate: 4px 0; }
  .essay a:hover .essay__img, .essay-lead a:hover .essay__img { filter: none; }
  .essay a:hover h3, .essay-lead a:hover h3 { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
  .essay-lead a:hover .essay-lead__go { color: var(--ink); translate: 4px 0; }
}

.index { padding-top: 64px; padding-bottom: 24px; }
.index__head { display: flex; align-items: center; gap: 24px; margin-bottom: 18px; }
.index__head .clear { margin-left: auto; font-size: 13px; color: var(--mute); }
.index__head .clear:hover { color: var(--ink); }

/* ── 사이드바(왼쪽 서랍): 프로필 + 카테고리 ── */
.drawer { position: fixed; inset: 0; z-index: 50; visibility: hidden; transition: visibility 0s .4s; }
.drawer.is-open { visibility: visible; transition: none; }
.drawer__dim {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .35s var(--ease);
}
.drawer.is-open .drawer__dim { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(360px, 86vw); overflow-y: auto;
  background: #111113; border-right: 1px solid var(--line-2);
  padding: 22px 28px 40px; translate: -100% 0; transition: translate .4s var(--ease);
}
.drawer.is-open .drawer__panel { translate: 0 0; }
.drawer__close { position: absolute; top: 16px; right: 14px; }
.prof { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: center; padding: 34px 0 26px; border-bottom: 1px solid var(--line); }
.prof img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line-2); }
.prof b { display: block; font: 600 18px/1.2 var(--sans); color: var(--ink); }
.prof p { margin: 4px 0 0; font-size: 13px; color: var(--mute); }
.prof small { grid-column: 1 / -1; margin-top: 16px; font: 400 12px/1 var(--mono); color: var(--faint); }
.drawer .label { margin: 26px 0 10px; }
.cats { list-style: none; margin: 0; padding: 0; }
.cats a {
  display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0;
  font-size: 15px; color: var(--text); border-bottom: 1px solid var(--line); transition: color .2s, padding .3s var(--ease);
}
.cats a:hover { color: var(--ink); padding-left: 6px; }
.cats a[aria-current] { color: var(--ink); font-weight: 600; }
.cats span { font: 400 12px/1 var(--mono); color: var(--faint); }

.more { display: flex; justify-content: center; padding: 40px 0 24px; }
.more__btn {
  padding: 12px 22px; background: none; border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 13px; color: var(--text); cursor: pointer; transition: border-color .2s, color .2s;
}
.more__btn:hover { border-color: var(--ink); color: var(--ink); }
.more__btn[hidden] { display: none; }
.empty { padding: 48px 0; color: var(--mute); }

/* ── 글 상세 ── */
.progress { position: fixed; inset: var(--wp-admin--admin-bar--height, 0px) 0 auto; height: 2px; z-index: 30; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.post { padding: 56px 0 24px; }
.back { display: inline-block; font-size: 13px; color: var(--mute); transition: color .2s; }
.back:hover { color: var(--ink); }
.post__meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 40px 0 18px;
  font: 400 13px/1.4 var(--mono); color: var(--faint);
}
.post__meta a { font-family: var(--sans); color: var(--mute); }
.post__meta a:hover { color: var(--ink); }
.post__title {
  margin: 0 0 56px; font: 600 clamp(32px, 4.4vw, 52px)/1.12 var(--sans); letter-spacing: -.035em; color: var(--ink);
}
.prose { font: 400 17px/1.95 var(--ko); color: var(--text); letter-spacing: -.01em; }
.prose p { margin: 0 0 .55em; }
.prose h2 {
  margin: 2.6em 0 1em; padding-top: 1.4em; border-top: 1px solid var(--line);
  font: 600 23px/1.4 var(--ko); color: var(--ink); letter-spacing: -.025em;
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.prose figure { margin: 2.2em 0; }
.prose figure img { width: 100%; height: auto; border-radius: 4px; filter: brightness(.9); }
.prose figcaption { margin-top: 10px; font: 400 12px/1.6 var(--mono); color: var(--faint); text-align: center; }

/* 글 끝: 이전·다음 + 책 읽는 사쿠라가 선 위에 */
.post-end {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 40px;
  margin-top: 72px; position: relative;
}
.post-end::after {
  content: ""; position: absolute; left: var(--gut); right: var(--gut); bottom: 0; height: 1px; background: var(--line-2);
}
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 40px; max-width: 760px; }
.pager a { display: block; padding-top: 18px; border-top: 1px solid var(--line); transition: border-color .2s; }
.pager a:hover { border-top-color: var(--ink); }
.pager small { display: block; margin-bottom: 8px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pager span { font-size: 16px; font-weight: 500; color: var(--ink); }
.pager a[aria-disabled] { pointer-events: none; }
.pager a[aria-disabled] span { color: var(--faint); font-weight: 400; }
.post-end__sakura { --h: 220px; margin: 0 24px 0 0; }
.related { padding-top: 64px; padding-bottom: 32px; }
.related .label { margin-bottom: 18px; }

/* ── 바닥 ── */
.foot { margin-top: 64px; }
.foot__in {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 28px 0 40px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint);
}
.foot__in a:hover { color: var(--ink); }

/* ── 움직임 ── 처음엔 글자가 차례로 올라오고 사쿠라가 선 위로 살짝 내려앉는다.
   목록 줄은 화면에 들어올 때 하나씩. 움직임 줄이기 설정이면 전부 끈다 */
@keyframes rise { from { opacity: 0; translate: 0 18px; } }
@keyframes land { from { opacity: 0; translate: 0 -14px; } 70% { opacity: 1; translate: 0 2px; } }
@keyframes breathe { 50% { scale: 1 1.006; } }
@keyframes draw { from { transform: scaleX(0); } }

.fx .intro__jp { animation: rise .8s var(--ease) .05s both; }
.fx .intro__eyebrow { animation: rise .8s var(--ease) .22s both; }
.fx .intro__title { animation: rise .9s var(--ease) .15s both; }
.fx .intro__by { animation: rise .9s var(--ease) .3s both; }
.fx .intro::after { animation: draw 1.2s var(--ease) .1s both; }
.fx .intro__sakura { animation: land 1s var(--ease) .45s both, breathe 5s ease-in-out 1.6s infinite; }
.fx .post__head > * { animation: rise .8s var(--ease) both; }
.fx .post__head > :nth-child(2) { animation-delay: .08s; }
.fx .post__head > :nth-child(3) { animation-delay: .16s; }

.fx .reveal { opacity: 0; translate: 0 14px; transition: opacity .7s var(--ease) var(--d, 0s), translate .7s var(--ease) var(--d, 0s); }
.fx .reveal.is-in { opacity: 1; translate: 0 0; }
.fx .post-end__sakura.reveal { translate: 0 -14px; }
.fx .post-end__sakura.reveal.is-in { translate: 0 0; animation: breathe 5s ease-in-out 1.2s infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fx *, .fx *::after { animation: none !important; transition: none !important; }
  .fx .reveal { opacity: 1; translate: none; }
}

/* ── 폰 ── */
@media (max-width: 760px) {
  :root { --gut: 20px; }
  body { font-size: 14px; }
  .head__in { height: 60px; }
  .nav { gap: 18px; }
  .nav .nav__page { display: none; }   /* 폰은 메뉴 페이지를 사이드바 「Pages」로 */

  .intro {
    min-height: 0; column-gap: 12px; padding-top: 28px;
    grid-template-columns: 1fr auto;
    grid-template-areas: "jp jp" "title title" "eyebrow eyebrow" "by sakura";
    grid-template-rows: auto auto auto;
  }
  .intro__eyebrow { margin-top: 18px; }
  .intro__title { font-size: clamp(56px, 17vw, 88px); }
  .intro__jp { font-size: 22px; margin: 0 0 12px 4px; }
  .intro__by { align-self: end; margin-top: 0; padding-bottom: 28px; font-size: 13px; }
  .intro__by .sep { display: block; height: 0; margin: 0; visibility: hidden; }
  .intro__sakura { --h: 170px; margin: 8px 4px 0 0; justify-self: end; }
  .intro--nf .intro__title--ko { font-size: 34px; }
  .intro--nf { grid-template-areas: "jp jp" "title title" "eyebrow eyebrow" "by sakura"; }
  .intro--nf .intro__sakura { --h: 170px; }
  .nf-search { flex-direction: column; gap: 10px; }
  .nf-search button { align-self: flex-start; }


  .posts-top { padding-top: 48px; }
  .sec { padding-top: 48px; }
  .sec__head h2, .sec__title { font-size: 22px; }
  .sec__head h2 span, .sec__title span { display: none; }
  .wl-lead a { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "no img" "text text"; column-gap: 20px; row-gap: 18px; padding: 26px 0; }
  .wl-no { grid-area: no; font-size: 76px; }
  .wl-lead__img { grid-area: img; }
  .wl-lead__text { grid-area: text; }
  .wl-lead h3 { font-size: 19px; }
  .wl-idx a { grid-template-columns: 56px minmax(0, 1fr) 72px; column-gap: 12px; padding: 12px 0; }
  .wl-idx__img { width: 72px; order: 3; }
  .wl-idx__no { font-size: 12px; }
  .wl-idx time, .wl-idx__go { display: none; }
  .wl-idx__t { font-size: 14px; }
  .essay-lead a { grid-template-columns: 1fr; row-gap: 20px; padding: 28px 0; }
  .essay-lead__img { order: -1; }
  .essays { grid-template-columns: 1fr; }
  .essay a { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; align-content: start; padding: 20px 0; }
  .essay .essay__img { grid-row: 1 / span 3; margin: 0; align-self: start; }
  .essay h3 { margin: 6px 0 4px; }
  .essay h3 { font-size: 18px; }
  .yr { grid-template-columns: 1fr; }
  .yr h3 { position: static; padding: 22px 0 8px; font-size: 30px; }
  .yr a { grid-template-columns: 44px minmax(0, 1fr) 88px; grid-template-areas: "d t img" ". c img"; row-gap: 4px; column-gap: 12px; padding: 13px 0; align-items: start; }
  .yr__img { grid-area: img; width: 88px; }
  .yr time { grid-area: d; font-size: 12px; }
  .yr__t { grid-area: t; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; }
  .yr__c { grid-area: c; }

  .post { padding-top: 36px; }
  .post__meta { margin-top: 28px; }
  .post__title { margin-bottom: 40px; }
  .prose { font-size: 16px; line-height: 1.9; }
  .prose h2 { font-size: 20px; }
  .post-end { column-gap: 8px; margin-top: 48px; }
  .pager { grid-template-columns: 1fr; gap: 18px; padding-bottom: 28px; }
  .pager span { font-size: 15px; }
  .post-end__sakura { --h: 160px; margin-right: 0; }
  .foot { margin-top: 40px; }
}


/* ── 워드프레스 ── 본문 블록·댓글·플러그인을 이 화면에 맞춘다 */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
  position: fixed !important; z-index: 100; top: 8px; left: 8px; width: auto; height: auto;
  clip: auto; clip-path: none; padding: 10px 14px; background: var(--ink); color: var(--bg); border-radius: 3px;
}

/* 썸네일: 워드프레스가 붙이는 width·height 대신 칸 비율을 따른다. 대표 이미지가 없으면 같은 크기의 빈 칸 */
.wl-lead__img, .wl-idx__img, .yr__img, .essay__img { height: auto; }
.is-empty { display: block; }

/* 본문 블록 */
.prose h3 { margin: 2em 0 .8em; font: 600 19px/1.45 var(--ko); color: var(--ink); letter-spacing: -.02em; }
.prose h4 { margin: 1.8em 0 .6em; font: 600 17px/1.5 var(--ko); color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--mute); }
.prose blockquote { margin: 1.6em 0; padding: 2px 0 2px 20px; border-left: 2px solid var(--line-2); color: var(--text); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote cite { display: block; margin-top: .6em; font: 400 13px/1.5 var(--sans); font-style: normal; color: var(--mute); }
.prose hr, .prose .wp-block-separator { margin: 2.4em 0; border: 0; border-top: 1px solid var(--line-2); opacity: 1; }
.prose img { height: auto; max-width: 100%; }
.prose .wp-block-image, .prose .wp-block-embed, .prose .wp-block-gallery { margin: 2em 0; }
.prose .wp-block-image img { border-radius: 4px; filter: brightness(.9); }
.prose .wp-element-caption { margin-top: 10px; font: 400 12px/1.6 var(--mono); color: var(--faint); text-align: center; }
.prose iframe { max-width: 100%; }
.prose .wp-block-table { overflow-x: auto; margin: 1.6em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.prose th { color: var(--ink); font-weight: 600; background: rgba(255, 255, 255, .03); }
.prose code { padding: 2px 5px; border-radius: 3px; background: rgba(255, 255, 255, .07); font: 400 .88em/1.5 ui-monospace, Consolas, monospace; color: var(--ink); }
.prose pre { overflow-x: auto; padding: 16px 18px; border-radius: 4px; background: #141416; border: 1px solid var(--line); font-size: 14px; line-height: 1.7; }
.prose pre code { padding: 0; background: none; }
.prose mark { background: rgba(255, 255, 255, .14); color: var(--ink); }
.prose .aligncenter { margin-left: auto; margin-right: auto; }
.prose .alignleft { float: left; margin: .4em 1.4em 1em 0; }
.prose .alignright { float: right; margin: .4em 0 1em 1.4em; }
.prose::after { content: ""; display: block; clear: both; }
.page-links { margin-top: 2em; font-size: 14px; color: var(--mute); }

/* 글 안 목차(Easy Table of Contents): 검은 상자 대신 가는 선 */
.prose #ez-toc-container {
  float: none; display: block; width: auto; margin: 2em 0; padding: 16px 20px;
  background: none !important; border: 1px solid var(--line-2); border-radius: 4px; box-shadow: none;
}
.prose #ez-toc-container .ez-toc-title { font: 500 12px/1 var(--sans) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--mute) !important; }
.prose #ez-toc-container a, .prose #ez-toc-container a:visited { color: var(--text) !important; text-decoration: none; }
.prose #ez-toc-container a:hover { color: var(--ink) !important; text-decoration: underline; }
.prose #ez-toc-container nav > ul { margin-top: 10px; }
.prose #ez-toc-container .ez-toc-js-icon-con { border-color: var(--line-2) !important; color: var(--mute); }
.prose #ez-toc-container svg { fill: currentColor; color: var(--mute); }

/* 글 끝 조회수(Post Views Counter)·태그 */
.post-views { display: flex; align-items: center; gap: 6px; margin-top: 2.4em; font: 400 12px/1 var(--mono); color: var(--faint); }
.post-views .dashicons { width: 15px; height: 15px; font-size: 15px; }
.post__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.post__tags a { padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; color: var(--text); transition: border-color .2s, color .2s; }
.post__tags a:hover { border-color: var(--ink); color: var(--ink); }
.post__title--page { margin-top: 40px; }

/* 댓글: 본문 폭, 가는 선만 */
.comments { margin-top: 72px; }
.comments .label { margin-bottom: 18px; }
.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { padding-left: 28px; border-left: 1px solid var(--line); }
.comment-body { padding: 18px 0; border-top: 1px solid var(--line); }
.comment-author { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); }
.comment-author .avatar { width: 32px; height: 32px; border-radius: 50%; }
.comment-author .says { display: none; }
.comment-metadata { margin: 4px 0 0 42px; font: 400 12px/1.4 var(--mono); color: var(--faint); }
.comment-content { margin: 10px 0 0 42px; font-size: 15px; line-height: 1.8; color: var(--text); }
.comment-content p { margin: 0 0 .5em; }
.reply { margin: 6px 0 0 42px; font-size: 12px; }
.reply a { color: var(--mute); }
.reply a:hover, .comment-metadata a:hover { color: var(--ink); }
.comment-respond { margin-top: 40px; }
.comment-reply-title small { margin-left: 10px; text-transform: none; letter-spacing: 0; }
.comment-reply-title small a { color: var(--text); }
.comment-form { display: grid; gap: 14px; }
.comment-form p { margin: 0; }
.comment-form label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--mute); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; padding: 10px 12px; background: #111113; border: 1px solid var(--line-2); border-radius: 4px; color: var(--ink);
}
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--ink); }
.comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; }
.comment-form .comment-form-cookies-consent label { margin: 0; }
.comment-form .submit {
  height: 40px; padding: 0 18px; background: var(--ink); color: var(--bg); border: 0; border-radius: 3px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.logged-in-as, .comment-notes { font-size: 13px; color: var(--mute); }
.logged-in-as a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.comment-navigation .nav-links { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; color: var(--mute); }

@media (max-width: 760px) {
  .comment-metadata, .comment-content, .reply { margin-left: 0; }
  .comment-list .children { padding-left: 14px; }
  .prose .alignleft, .prose .alignright { float: none; margin: 1.4em auto; }
}