/* 제주오승도장 — 쪽빛 밤의 도장
   색: 藍(쪽빛) 바탕, 絹(비단) 글자, 金糸(금실)은 한자에만, 朱(인주)는 목록의 도장에만 */

/* 한글 글꼴 (무료, 직접 호스팅): 을유1945 */
@font-face { font-family: "Eulyoo1945"; font-weight: 400; font-display: swap; src: url("../fonts/Eulyoo1945-Regular.woff") format("woff"); }
@font-face { font-family: "Eulyoo1945"; font-weight: 700; font-display: swap; src: url("../fonts/Eulyoo1945-SemiBold.woff") format("woff"); }

:root {
  --ai:      #0e131c;   /* 쪽빛 밤: 바탕 */
  --ai-2:    #151c28;   /* 한 단 밝은 쪽빛 */
  --kinu:    #e6e2d8;   /* 비단: 본문 글자 */
  --haze:    #9ba1ac;   /* 안개: 보조 글자 */
  --kin:     #bb9d61;   /* 금실: 한자 */
  --rule:    rgba(230, 226, 216, .14);
  --washi:   #dcd6c8;   /* 목록 두루마리 종이 */
  --sumi:    #1c1a17;   /* 먹 */
  --shu:     #9a2f24;   /* 인주 */

  /* 한글 글꼴. 원래대로 돌리려면 아래 줄을 "Gowun Batang"으로 바꾼다 */
  --serif-kr: "Eulyoo1945", "Gowun Batang", "Noto Serif KR", "Apple SD Gothic Neo", serif;
  --mincho:   "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --gutter: clamp(16px, 5vw, 72px);
  --max: 1360px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: clip;   /* 100vw 칸이 스크롤바 폭만큼 넘치지 않도록 */
  background: var(--ai);
  color: var(--kinu);
  font-family: var(--serif-kr);
  font-size: clamp(17px, 1.05vw + 11px, 19px);
  line-height: 1.9;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* 현무암 같은 옅은 결 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
a:hover { color: var(--kin); }
:focus-visible { outline: 2px solid var(--kin); outline-offset: 4px; }

h1, h2, h3 { font-weight: 700; line-height: 1.4; margin: 0; }
p { margin: 0 0 1.1em; }

figcaption {
  margin-top: .8rem;
  font-size: .82rem;
  color: var(--haze);
  line-height: 1.6;
}

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

/* ---------- 상단 막대 ---------- */
.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  background: linear-gradient(var(--ai) 20%, rgba(14, 19, 28, 0));
  font-size: .9rem;
}
.bar a { text-decoration: none; }
.bar__home { display: flex; align-items: center; gap: 12px; }
.bar__seal {
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  font-size: .78rem;
  line-height: 1;
  letter-spacing: .1em;
  color: var(--kin);
  border: 1px solid var(--kin);
  padding: 5px 3px;
}
.bar__name { letter-spacing: .08em; }
.bar__nav { display: flex; align-items: baseline; gap: clamp(14px, 2.4vw, 36px); }
.bar__nav a { color: var(--haze); }
.bar__nav a:hover, .bar__nav .bar__gate { color: var(--kinu); }

/* ---------- 첫 화면: 검은 띠 ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: 120px var(--gutter) 56px;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  transform: scaleX(-1);   /* 밝은 결을 왼쪽으로, 한자는 어두운 쪽에 */
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 60%;
}
/* 띠의 결은 보이되 글자는 또렷하게: 위와 아래를 쪽빛으로 가라앉힌다 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--ai) 0%, rgba(14,19,28,.35) 22%, rgba(14,19,28,.2) 55%, var(--ai) 100%),
    radial-gradient(ellipse at 70% 40%, rgba(14,19,28,0) 0%, rgba(14,19,28,.55) 75%);
}
.hero__title {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: clamp(12px, 2vw, 28px);
  margin: 0;
  font-weight: 400;
}
.hero__kanji {
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  font-size: clamp(4.5rem, 13vw, 11rem);
  line-height: 1;
  letter-spacing: .14em;
  color: var(--kin);
}
.hero__name {
  writing-mode: vertical-rl;
  font-size: clamp(.95rem, 1vw + .5rem, 1.15rem);
  letter-spacing: .4em;
  color: var(--kinu);
  padding-top: .4em;
}
.hero__text {
  grid-column: 1;
  grid-row: 2;
  max-width: 24em;
  font-size: .95rem;
  color: var(--kinu);
}
.hero__text p { margin: 0; }
.hero__sub { margin-top: .5em !important; color: var(--haze); }
.hero__sub span { font-family: var(--mincho); color: var(--kin); margin-right: .4em; letter-spacing: .08em; }

/* 단 한 번의 연출: 어둠에서 띠의 결이 떠오르고, 한자가 스민다 */
.js .hero__bg { opacity: 0; filter: brightness(0); }
.js .hero__kanji, .js .hero__name, .js .hero__text { opacity: 0; }
.js.is-lit .hero__bg { animation: rise 3.4s cubic-bezier(.2, .6, .2, 1) forwards; }
.js.is-lit .hero__kanji { animation: seep 2.6s ease-out 1.4s forwards; }
.js.is-lit .hero__name { animation: seep 1.8s ease-out 2.6s forwards; }
.js.is-lit .hero__text { animation: seep 1.8s ease-out 3s forwards; }

@keyframes rise {
  to { opacity: 1; filter: brightness(1); }
}
@keyframes seep {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 머리말 ---------- */
.prologue {
  max-width: 30em;
  margin: 0 auto;
  padding: 22vh var(--gutter) 18vh;
  font-size: clamp(1.15rem, 1.4vw + .7rem, 1.5rem);
  line-height: 2.1;
}
.prologue p + p { margin-top: 1.6em; }

/* ---------- 두 갈래 ---------- */
.ways {
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: end;
  gap: clamp(16px, 2vw, 32px);
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) 16vh;
}
.way {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  text-decoration: none;
  background: var(--ai-2);
}
.way img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
  transition: opacity .6s ease, transform 1.2s ease;
}
.way:hover img, .way:focus-visible img { opacity: .8; transform: scale(1.02); }
.way:hover { color: var(--kinu); }
.way__kanji {
  position: absolute;
  top: clamp(20px, 3vw, 40px);
  right: clamp(20px, 3vw, 40px);
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  font-size: clamp(2rem, 4.4vw, 4rem);
  line-height: 1;
  letter-spacing: .18em;
  color: var(--kin);
}
.way__name, .way__note {
  position: absolute;
  left: clamp(20px, 3vw, 40px);
}
.way__name { bottom: calc(clamp(20px, 3vw, 40px) + 1.8em); font-size: 1.3rem; font-weight: 700; }
.way__note { bottom: clamp(20px, 3vw, 40px); font-size: .9rem; color: var(--kinu); opacity: .8; }

/* ---------- 작품(종목) ---------- */
.work, .dojo {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14vh var(--gutter) 10vh;
  border-top: 1px solid var(--rule);
}
.work__head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  column-gap: 24px;
  margin-bottom: 10vh;
  /* 머리 칸은 첫 화면처럼 화면 가득 사진을 깔고 이름을 새긴다.
     바깥 여백은 뚫고 나가되 글자는 본문 칼럼에 맞춘다 */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 14vh calc(50vw - 50%) 56px;
}
/* 사진이 구분선 역할을 하므로 종목 칸 위의 선과 여백은 없앤다 */
.work, .dojo { padding-top: 0; border-top: 0; }
.work__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work__head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(14,19,28,.72) 0%, rgba(14,19,28,.35) 45%, rgba(14,19,28,.8) 100%),
    linear-gradient(180deg, rgba(14,19,28,.25) 0%, rgba(14,19,28,.1) 50%, rgba(14,19,28,.85) 100%);
}
.work__head > h2 { grid-column: 1; grid-row: 1; align-self: end; }
.work__head > .work__meta { grid-column: 1; grid-row: 2; }
.work__head > .work__kanji { grid-column: 2; grid-row: 1 / 3; }
.work__kanji {
  writing-mode: vertical-rl;
  margin: 0;
  font-family: var(--mincho);
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: 1;
  letter-spacing: .12em;
  color: var(--kin);
}
.work__head h2 { font-size: clamp(1.5rem, 2vw + .8rem, 2.2rem); letter-spacing: .06em; }
.work__meta { margin: .6em 0 0; color: var(--haze); font-size: .9rem; max-width: 24em; }

.wide { margin: 0 calc(var(--gutter) * -0.5); }
.wide img { width: 100%; }
.wide--tall img { max-height: 92vh; object-fit: cover; }
.wide figcaption { padding-left: calc(var(--gutter) * .5); }

.prose { max-width: 34em; margin: 12vh 0 12vh auto; margin-right: 8%; }
.prose h3 { font-size: clamp(1.3rem, 1vw + 1rem, 1.7rem); margin-bottom: 1.2em; }
.prose__fact {
  margin-top: 2em;
  padding-top: 1.4em;
  border-top: 1px solid var(--rule);
  color: var(--haze);
  font-size: .92rem;
}

.pair {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 32px);
  margin: 10vh 0;
  align-items: start;
}
.pair__a { grid-column: 1 / 8; }
.pair__b { grid-column: 8 / 13; margin-top: 22vh; }
.pair--flip .pair__a { grid-column: 7 / 13; grid-row: 1; }
.pair--flip .pair__b { grid-column: 1 / 7; grid-row: 1; margin-top: 28vh; }

.trio {
  display: grid;
  grid-template-columns: 3fr 4fr 3fr;
  gap: clamp(16px, 2vw, 32px);
  align-items: end;
  margin: 14vh 0;
}
.trio figure:nth-child(2) { margin-bottom: 12vh; }

.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(24px, 5vw, 96px);
  align-items: center;
  margin-bottom: 14vh;
}
.split__text { margin: 0; }

/* ---------- 계보와 기록 ---------- */
.annals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 120px);
  margin-top: 16vh;
  padding-top: 8vh;
  border-top: 1px solid var(--rule);
}
.annals h3 { font-size: 1.15rem; letter-spacing: .1em; margin-bottom: 1.6em; }

.line__portrait { width: clamp(140px, 14vw, 200px); margin-bottom: 2.4rem; }
.line ol, .timeline { list-style: none; margin: 0; padding: 0; }
.line li {
  position: relative;
  padding: 0 0 1.8em 1.6em;
  border-left: 1px solid var(--rule);
}
.line li:last-child { border-left-color: transparent; padding-bottom: 0; }
.line li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kin);
}
.line li strong { display: block; font-size: 1.05rem; }
.line li span { display: block; color: var(--haze); font-size: .88rem; line-height: 1.6; }
.line .line__gap { border-left-style: dashed; }
.line .line__gap::before { background: transparent; border: 1px solid var(--kin); }

.record__photo { margin-bottom: 2.4rem; }
.record__photo img { width: 100%; max-height: 420px; object-fit: cover; }
.timeline li {
  display: grid;
  grid-template-columns: 4.2em 1fr;
  gap: 1em;
  padding: .8em 0;
  border-top: 1px solid var(--rule);
}
.timeline time { font-family: var(--mincho); color: var(--kin); letter-spacing: .04em; }
.timeline p { margin: 0; font-size: .95rem; }

/* ---------- 목록 두루마리 (이 페이지의 단 하나의 큰 목소리) ---------- */
.scroll-intro { max-width: 34em; margin: 14vh auto 5vh 0; }
.scroll-intro h3 { font-size: clamp(1.3rem, 1vw + 1rem, 1.7rem); margin-bottom: .8em; }
.scroll-intro p { color: var(--haze); font-size: .95rem; }

.mokuroku {
  writing-mode: vertical-rl;
  /* 세로쓰기 상자는 폭을 정해 주지 않으면 내용만큼 늘어난다 */
  width: calc(100% + var(--gutter) * 2);
  height: clamp(400px, 58vh, 540px);
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--kin) transparent;
  cursor: grab;
}
.mokuroku.is-dragging { cursor: grabbing; user-select: none; }
.mokuroku__paper {
  position: relative;
  height: 100%;
  padding: 56px 64px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.10), rgba(0,0,0,0) 6%, rgba(0,0,0,0) 94%, rgba(0,0,0,.10)),
    var(--washi);
  color: var(--sumi);
  font-family: var(--mincho);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.mokuroku__title {
  white-space: nowrap;
  margin: 0 0 0 2.4em;
  font-size: clamp(1.5rem, 1.2vw + 1.2rem, 2.1rem);
  font-weight: 900;
  letter-spacing: .3em;
  line-height: 1;
}
.mokuroku dl { margin: 0; display: block; }
.mokuroku dl > div { margin-left: 2.2em; }
.mokuroku dt {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .2em;
  margin-left: .8em;
}
.mokuroku dd {
  margin: 0 0 0 .5em;
  padding-top: 2.4em;
  font-size: 1.2rem;
  letter-spacing: .14em;
  line-height: 1.7;
}
.mokuroku__seal {
  position: relative;
  margin: auto 0 0 0;
  align-self: end;
  padding: 10px 6px;
  background: var(--shu);
  color: #f1e9dc;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.2;
  inset-block-start: calc(100% - 9em);  /* 두루마리 왼쪽 끝, 아래쪽에 찍는다 */
}
.scroll-hint {
  margin: 1.2rem 0 0;
  color: var(--haze);
  font-size: .82rem;
  text-align: right;
}

/* ---------- 도장 ---------- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(16px, 2vw, 32px);
  align-items: start;
}
.mosaic__obi    { grid-column: 1 / 9; grid-row: 1; }
.mosaic__katana { grid-column: 9 / 13; grid-row: 1; margin-top: 18vh; }
.mosaic__text   { grid-column: 1 / 6; grid-row: 2; margin: 10vh 0 0; }
.mosaic__plate  { grid-column: 6 / 13; grid-row: 2; margin-top: 4vh; }

.teachers { margin: 16vh 0 12vh; max-width: 46em; }
.teachers h3 { font-size: 1.15rem; letter-spacing: .1em; margin-bottom: 1.4em; }
.teachers ul { list-style: none; margin: 0; padding: 0; }
.teachers li {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 1em;
  padding: .9em 0;
  border-top: 1px solid var(--rule);
}
.teachers li span { color: var(--haze); font-size: .93rem; }

/* ---------- 문 ---------- */
.gate {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(24px, 6vw, 120px);
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  padding: 18vh var(--gutter);
  border-top: 1px solid var(--rule);
}
.gate__kanji {
  margin: 0;
  justify-self: center;
  font-family: var(--mincho);
  font-size: clamp(9rem, 26vw, 22rem);
  line-height: 1;
  color: var(--kin);
  opacity: .9;
}
.gate__body h2 { font-size: 1.15rem; letter-spacing: .1em; color: var(--haze); font-weight: 400; margin-bottom: 1em; }
.gate__lead { font-size: clamp(1.25rem, 1.2vw + .9rem, 1.7rem); line-height: 1.8; margin-bottom: 2em; }
.gate__info { margin: 0; }
.gate__info div {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: 1em;
  padding: .9em 0;
  border-top: 1px solid var(--rule);
}
.gate__info dt { color: var(--haze); font-size: .9rem; }
.gate__info dd { margin: 0; }
.gate__info small { display: block; margin-top: .4em; color: var(--haze); font-size: .85rem; line-height: 1.7; }

/* ---------- 바닥 ---------- */
.foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px var(--gutter) 56px;
  color: var(--haze);
  font-size: .85rem;
  border-top: 1px solid var(--rule);
}
.foot ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.foot p { margin: 0; }
/* 맨 끝: 예전 WordPress 첫 화면으로 */

/* ---------- 영문 페이지 (/en/) ---------- */
/* 로마자는 EB Garamond, 한글 이름은 을유1945로 넘어간다 */
:root:lang(en) { --serif-kr: "EB Garamond", "Eulyoo1945", "Gowun Batang", serif; }
:lang(en) body { font-size: 1.06rem; }
:lang(en) .hero__name { letter-spacing: .22em; }
:lang(en) .bar__name { letter-spacing: .04em; }
:lang(en) .teachers li { grid-template-columns: 10em 1fr; }
:lang(en) .gate__info div { grid-template-columns: 9em 1fr; }
:lang(en) .ledger__list dl div { grid-template-columns: 5.5em 1fr; }
:lang(en) .ledger__list li { grid-template-columns: 8.5em 1fr; }
:lang(en) .scroll-hint, :lang(en) .record__open, :lang(en) .ledger__close { letter-spacing: .06em; }
.bar__lang { font-size: .85em; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 820px) {
  .bar__nav a:not(.bar__gate):not(.bar__lang) { display: none; }

  .hero { grid-template-columns: 1fr; }
  .hero__title { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; margin-top: 4vh; }
  .hero__text { grid-row: 2; }

  .ways { grid-template-columns: 1fr; }
  .way { aspect-ratio: 4 / 3; }

  .work__head { margin-bottom: 6vh; }
  .work__kanji { font-size: clamp(2.6rem, 14vw, 4rem); }

  .prose { margin: 8vh 0; }

  .pair, .trio, .split, .annals, .mosaic, .gate { grid-template-columns: 1fr; }
  .pair__a, .pair__b,
  .pair--flip .pair__a, .pair--flip .pair__b,
  .mosaic__obi, .mosaic__katana, .mosaic__text, .mosaic__plate {
    grid-column: 1; grid-row: auto; margin-top: 0;
  }
  .pair__b { width: 78%; justify-self: end; }
  .pair--flip .pair__b { justify-self: start; }
  .trio figure:nth-child(2) { margin-bottom: 0; }
  .trio figure:nth-child(3) { display: none; }
  .mosaic__katana { width: 62%; justify-self: end; }

  .mokuroku__paper { padding: 36px 40px; }
  .mokuroku__title { font-size: 1.5rem; }

  .gate { text-align: left; }
  .gate__kanji { justify-self: start; font-size: 8rem; }
  .gate__info div, .teachers li,
  :lang(en) .gate__info div, :lang(en) .teachers li { grid-template-columns: 1fr; gap: .2em; }
}

/* ---------- 기록 전문 ---------- */
.record__open {
  margin-top: 2.4em;
  padding: .5em 0;
  border: 0;
  border-bottom: 1px solid var(--kin);
  background: none;
  color: var(--kinu);
  font: inherit;
  font-size: .95rem;
  letter-spacing: .14em;
  cursor: pointer;
}
.record__open:hover { color: var(--kin); }
.record__open:focus-visible,
.ledger__close:focus-visible { outline: 1px solid var(--kin); outline-offset: 6px; }

.ledger {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kinu);
  overflow: hidden;
}
.ledger::backdrop { background: transparent; }
html.is-ledger { overflow: hidden; }

/* 대문: 지금 보던 화면을 그대로 복제해 두 짝으로 나누고,
   바깥쪽 경첩을 축으로 안쪽으로 밀려 열리게 한다 */
.rift {
  position: absolute;
  inset: 0;
  background: #06080c;
  perspective: 1400px;
  perspective-origin: 50% 45%;
}
/* 문틈으로 새어 나오는 빛: 열리기 직전 가운데 한 줄이 먼저 밝아진다 */
.rift::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, rgba(187,157,97,.9) 30%, rgba(230,226,216,.95) 50%, rgba(187,157,97,.9) 70%, transparent);
  box-shadow: 0 0 24px 6px rgba(187,157,97,.35);
  opacity: 0;
  transform: scaleY(.2);
}
.rift__half {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--ai);
  backface-visibility: hidden;
  /* 닫힐 때: 무겁게 돌아와 맞물린다 */
  transition: transform 1.2s cubic-bezier(.55, 0, .75, .2), filter 1.2s ease;
}
.rift__half--l { clip-path: inset(0 50% 0 0); transform-origin: 0 50%; }
.rift__half--r { clip-path: inset(0 0 0 50%); transform-origin: 100% 50%; }
/* 문짝 안쪽 가장자리의 그늘 */
.rift__half::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18vw;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.rift__half--l::after { left: 32vw; background: linear-gradient(90deg, transparent, rgba(0,0,0,.7)); }
.rift__half--r::after { right: 32vw; background: linear-gradient(270deg, transparent, rgba(0,0,0,.7)); }

.ledger.is-open .rift::after { animation: seam 1.1s ease-out forwards; }
.ledger.is-open .rift__half {
  filter: brightness(.45);
  /* 열릴 때: 빗장이 풀리고 잠시 버티다가 천천히 밀려 열린다 */
  transition: transform 1.9s cubic-bezier(.6, .02, .2, 1) .28s, filter 1.9s ease .28s;
}
.ledger.is-open .rift__half::after { opacity: 1; transition-delay: .28s; }
.ledger.is-open .rift__half--l { transform: rotateY(76deg); }
.ledger.is-open .rift__half--r { transform: rotateY(-76deg); }

@keyframes seam {
  0%   { opacity: 0; transform: scaleY(.2); }
  30%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); width: 24vw; margin-left: -12vw; }
}

.rift__page { position: absolute; top: 0; left: 0; right: 0; }
.rift .bar { position: absolute; }
.rift .hero__bg, .rift .hero__kanji, .rift .hero__name, .rift .hero__text {
  opacity: 1; filter: none; animation: none !important;
}
/* 복제한 화면 안의 움직임은 멈춰 둔다 (문짝 자체의 움직임은 살린다) */
.rift__page *, .rift .bar * { transition: none !important; }

/* 가운데로 떠오르는 기록 */
.ledger__sheet {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(680px, 76vw);
  padding: 14vh clamp(20px, 4vw, 56px) 12vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translate(-50%, 8vh);
  transition: opacity .4s ease, transform .4s ease;
  outline: none;
}
.ledger.is-open .ledger__sheet {
  opacity: 1;
  transform: translate(-50%, 0);
  transition: opacity 1.2s ease 1.1s, transform 1.4s cubic-bezier(.2, .6, .2, 1) 1.1s;
}
.ledger__close {
  position: absolute;
  z-index: 2;
  top: 22px;
  /* 기록 칼럼의 오른쪽 위 모서리에 맞춘다 */
  right: calc(50% - min(680px, 76vw) / 2 + clamp(20px, 4vw, 56px));
  padding: .4em .6em;
  margin-right: -.6em;
  border: 0;
  background: #080b11;
  color: var(--haze);
  font: inherit;
  font-size: .9rem;
  letter-spacing: .14em;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease;
}
.ledger.is-open .ledger__close { opacity: 1; transition: opacity .8s ease 1.6s; }
.ledger__close:hover { color: var(--kinu); }
.ledger__kanji {
  margin: 0 0 .3em;
  font-family: var(--mincho);
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: .2em;
  color: var(--kin);
}
.ledger h2 { font-size: clamp(1.2rem, 1vw + .9rem, 1.5rem); letter-spacing: .06em; margin-bottom: 8vh; }
.ledger h3 { font-size: 1.05rem; letter-spacing: .1em; margin-bottom: 1.4em; color: var(--kinu); }
.ledger__list { list-style: none; margin: 0; padding: 0; }
.ledger__list li {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 1em;
  padding: 1.1em 0;
  border-top: 1px solid var(--rule);
}
.ledger__list time { font-family: var(--mincho); color: var(--kin); letter-spacing: .04em; }
.ledger__judge { margin: 0 0 .5em; color: var(--haze); font-size: .85rem; }
.ledger__list dl { margin: 0; }
.ledger__list dl div { display: grid; grid-template-columns: 3em 1fr; gap: .6em; }
.ledger__list dt { color: var(--haze); font-size: .9rem; }
.ledger__list dd { margin: 0; font-size: .95rem; line-height: 1.8; }

@media (max-width: 820px) {
  .rift { perspective: 700px; }
  .ledger.is-open .rift__half--l { transform: rotateY(84deg); }
  .ledger.is-open .rift__half--r { transform: rotateY(-84deg); }
  .ledger__sheet { width: 92vw; padding-top: 12vh; }
  .ledger__close { right: calc(4vw + 20px); }
  .ledger__list li, :lang(en) .ledger__list li { grid-template-columns: 1fr; gap: .3em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero__bg,
  .js .hero__kanji,
  .js .hero__name,
  .js .hero__text { opacity: 1; filter: none; animation: none !important; }
  .way img { transition: none; }
  .rift__half, .ledger.is-open .rift__half, .ledger__sheet, .ledger.is-open .ledger__sheet { transition: none; }
  .ledger.is-open .rift::after { animation: none; }
}