/* 일본 사주(四柱推命) 감정사 선택 페이지 — 먹색 바탕 · 朱 도장 · 金 장식 · 和紙 글자 */
:root {
  color-scheme: dark;
  --lp-ai: #070606;            /* 먹: 바탕 */
  --lp-ai-2: #110f0e;          /* 카드 */
  --lp-ai-3: #1a1614;
  --lp-washi: #eee5d4;         /* 和紙: 본문 글자 */
  --lp-washi-soft: #cfc6b6;
  --lp-muted: #9a9187;
  --lp-faint: #6f675e;
  --lp-shu: #d0473a;           /* 朱 */
  --lp-kin: #d4b378;           /* 金 */
  --lp-kin-line: #d4b37833;
  --lp-kin-hair: #d4b3781f;
  --lp-gutter: 20px;
  --lp-jp-serif: "Shippori Mincho", "Noto Serif KR", serif;
  --lp-serif: "Noto Serif KR", "Shippori Mincho", serif;
  --lp-logo-serif: "Gowun Batang", "Noto Serif KR", serif; /* the site logo face, as in gate.css --g-serif */
  --lp-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  /* 바탕 문양: 일본 사주판은 青海波, 명서각판은 창살(.lp-edition-myeongseo) */
  --lp-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cg fill='none' stroke='%23d4b378' stroke-width='.8'%3E%3Cpath d='M0 20a20 20 0 0 1 40 0M6 20a14 14 0 0 1 28 0M12 20a8 8 0 0 1 16 0M-20 20a20 20 0 0 1 40 0M-14 20a14 14 0 0 1 28 0M-8 20a8 8 0 0 1 16 0M20 20a20 20 0 0 1 40 0M26 20a14 14 0 0 1 28 0M32 20a8 8 0 0 1 16 0M-20 10a20 20 0 0 1 40 0M20 10a20 20 0 0 1 40 0'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--lp-ai);
  color: var(--lp-washi);
  font: 16px/1.6 var(--lp-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ol, ul, figure { margin: 0; }

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

.lp {
  max-width: 444px;
  margin: 0 auto;
  padding-bottom: 150px;
  overflow-x: clip;
  background:
    radial-gradient(120% 40% at 50% 30%, #1c1411 0%, transparent 60%),
    var(--lp-ai);
}

.lp-jp { font-family: var(--lp-jp-serif); }

/* Header: the content pages' .gate-top (public/css/gate.css?v=5a32ecfe) — arrow back, serif logo in the middle, glass button on the right. */
.lp-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(58px + env(safe-area-inset-top, 0px));
  margin-bottom: calc(-58px - env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(180deg, #000000b3, transparent);
  transition: background .3s;
}

/* Past the trailer the page content would show through the gradient. */
.lp-topbar.is-scrolled {
  background: #070606eb;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--lp-kin-hair);
}

.lp-topbar-back {
  position: absolute;
  left: 10px;
  bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.lp-topbar-back svg {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 4px #000c);
}

.lp-topbar-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font: 700 16px/1 var(--lp-logo-serif);
  letter-spacing: .5px;
  text-decoration: none;
  text-shadow: 0 1px 8px #000b;
}

.lp-topbar-logo img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

.lp-topbar-logo span {
  color: #f0323f;
  font-size: 14px;
  letter-spacing: 1px;
  text-shadow: 0 0 14px #d81f2a66;
}

/* Same glass button as the content pages' sound button. */
.lp-topbar-btn {
  position: absolute;
  right: 10px;
  bottom: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #ffffff24;
  border-radius: 12px;
  background: #ffffff0f;
  color: #ffffffe6;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background .2s, border-color .2s, transform .12s, color .2s;
}

.lp-topbar-btn:hover { background: #ffffff1f; color: #fff; }
.lp-topbar-btn:active { transform: scale(.9); }
.lp-topbar-btn svg { width: 20px; height: 20px; }


/* 예고편: 9:16 그대로 좌우 끝까지 붙인다(일본 사주판은 맨 위, 명서각판은 기록관 고르기 아래). */
.lp-trailer {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #000;
}

.lp-trailer video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-trailer-fade {
  position: absolute;
  inset: auto 0 0;
  height: 64px;
  pointer-events: none;
  background: linear-gradient(transparent, var(--lp-ai));
}

/* 첫 화면 아래에 둔 예고편(명서각판)은 위쪽도 바탕색으로 녹여 앞 블록과 잇는다. */
.lp-trailer.is-below::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 48px;
  pointer-events: none;
  background: linear-gradient(var(--lp-ai), transparent);
}

/* 소리 버튼(예고편·기록관 영상 공통): 가운데 큰 원, 소리를 켠 뒤에는 오른쪽 아래 작은 원으로 물러난다. */
.lp-sound {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 96px;
  height: 96px;
  padding: 0;
  border: 1px solid #ffffff4d;
  border-radius: 50%;
  background: #0707068c;
  box-shadow: 0 0 0 6px #ffffff12, 0 10px 30px #0009;
  color: #fff;
  font: 600 12.5px/1 var(--lp-sans);
  letter-spacing: .02em;
  transform: translate(-50%, -50%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: width .3s, height .3s, top .3s, left .3s, background .2s;
}

.lp-sound svg { width: 30px; height: 30px; fill: currentColor; }

/* 소리를 켠 뒤에는 오른쪽 아래 작은 원으로 물러난다. */
.lp-sound[aria-pressed="true"] {
  top: auto;
  left: auto;
  right: 14px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  box-shadow: 0 4px 14px #0008;
  transform: none;
}

.lp-sound[aria-pressed="true"] svg { width: 20px; height: 20px; }
.lp-sound[aria-pressed="true"] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.lp-sound .lp-sound-on { display: none; }
.lp-sound[aria-pressed="true"] .lp-sound-on { display: inline; }
.lp-sound[aria-pressed="true"] .lp-sound-off { display: none; }
.lp-sound:focus-visible { outline: 2px solid var(--lp-kin); outline-offset: 2px; }
/* 영상이 없는 기록관이면 숨긴다(display:flex 가 hidden 속성을 이기지 않게). */
.lp-sound[hidden] { display: none; }

/* 감정사 고르기 제목 */
.lp-pick-head {
  padding: 30px var(--lp-gutter) 4px;
  text-align: center;
}

.lp-pick-head .lp-eyebrow { justify-content: center; }

.lp-pick-head h2 {
  margin-top: 10px;
  color: var(--lp-washi);
  font-family: var(--lp-serif);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.35;
}

/* 본문 사이 삽화: 좌우 끝까지, 위아래는 바탕색으로 녹인다. */
.lp-scene {
  position: relative;
  margin: 4px calc(var(--lp-gutter) * -1) 22px;
}

.lp-scene img {
  display: block;
  width: 100%;
  height: auto;
}

.lp-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--lp-ai), transparent 14%, transparent 78%, var(--lp-ai));
  pointer-events: none;
}

/* Hero: the poster sits flush with the top at its own 2:3 ratio so nothing (the name lettering) is cropped. */
.lp-hero {
  position: relative;
  z-index: 1;
  aspect-ratio: 960 / 1440;
  overflow: hidden;
  background: var(--lp-ai);
}

.lp-hero-art {
  position: absolute;
  inset: 0;
}

.lp-hero-art img,
.lp-hero-art video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

.lp-hero-art video {
  position: absolute;
  inset: 0;
}

.lp-hero-art [hidden] { display: none; }


/* 세로쓰기 표찰 */
.lp-hero-label {
  position: absolute;
  z-index: 2;
  top: 92px;
  left: 14px;
  padding: 10px 5px;
  border: 1px solid #d0473aa6;
  background: #0706068c;
  color: var(--lp-washi);
  font: 600 13px/1 var(--lp-jp-serif);
  letter-spacing: .35em;
  writing-mode: vertical-rl;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* 포스터 아래쪽 '일본 사주' 배지 */
.lp-hero-badge {
  position: absolute;
  z-index: 2;
  top: 86px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px 9px;
  border: 1px solid #d4b37880;
  background: #070606b3;
  text-align: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.lp-hero-badge b {
  color: var(--lp-shu);
  font: 800 17px/1 var(--lp-jp-serif);
  letter-spacing: .18em;
  text-indent: .18em;
}

.lp-hero-badge span {
  color: var(--lp-washi);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
}

/* 일본 사주 소개 띠 */
.lp-japan {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px var(--lp-gutter) 0;
  padding: 14px 16px;
  border: 1px solid var(--lp-kin-line);
  border-left: 3px solid var(--lp-shu);
  background: linear-gradient(90deg, #d0473a1f, transparent 70%);
}

.lp-japan-seal {
  display: grid;
  flex: 0 0 52px;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid var(--lp-shu);
  border-radius: 4px;
  color: var(--lp-shu);
  font: 800 15px/1.1 var(--lp-jp-serif);
  text-align: center;
  transform: rotate(-5deg);
}

.lp-japan p {
  color: var(--lp-washi-soft);
  font-size: 13.5px;
  line-height: 1.6;
  word-break: keep-all;
}

.lp-japan b {
  display: block;
  margin-bottom: 2px;
  color: var(--lp-washi);
  font-family: var(--lp-serif);
  font-size: 16px;
}

.lp-hero-label span {
  margin-top: 8px;
  color: var(--lp-shu);
}

.lp-hero-fade {
  position: absolute;
  inset: auto 0 0;
  height: 56px;
  pointer-events: none;
  background: linear-gradient(#07060600 0%, #07060655 45%, #070606d9 80%, var(--lp-ai) 100%);
}

/* Tabs: two guide cards. The chosen one glows vermilion; the other's portrait ring breathes so it reads as tappable. */
.lp-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px var(--lp-gutter) 16px;
  background: var(--lp-ai);
}

.lp-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 10px 10px 9px;
  border: 1px solid var(--lp-kin-hair);
  border-radius: 14px;
  background: linear-gradient(160deg, #1a1414, #0d0b0a);
  color: var(--lp-washi);
  text-align: left;
  cursor: pointer;
  transition: border-color .25s, box-shadow .25s, background .25s, transform .12s;
}

.lp-tab:active { transform: scale(.97); }

.lp-tab img {
  flex: none;
  width: 52px;
  height: 52px;
  border: 1.5px solid #d4b37866;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(.45) brightness(.72);
  transition: filter .25s, border-color .25s;
}

.lp-tab[aria-pressed="false"] img { animation: lp-tab-breathe 2.4s ease-in-out infinite; }

@keyframes lp-tab-breathe {
  0%, 100% { box-shadow: 0 0 0 0 #d4b37800; }
  50% { box-shadow: 0 0 0 5px #d4b37840; }
}

.lp-tab-text { min-width: 0; }

.lp-tab-text b {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font: 700 19px/1.1 var(--lp-serif);
  letter-spacing: .06em;
  transition: color .25s;
}

.lp-tab-text small {
  color: var(--lp-shu);
  font: 600 11px/1 var(--lp-jp-serif);
  letter-spacing: .08em;
}

.lp-tab-text em span {
  display: block;
  margin-bottom: 2px;
  color: var(--lp-kin);
  font: 600 10.5px/1.2 var(--lp-jp-serif);
  letter-spacing: .12em;
}

.lp-tab-text em {
  display: block;
  margin-top: 5px;
  color: var(--lp-muted);
  font: 500 11.5px/1.35 var(--lp-sans);
  font-style: normal;
  word-break: keep-all;
}

.lp-tab[aria-pressed="true"] {
  border-color: var(--lp-shu);
  background:
    radial-gradient(120% 100% at 0% 50%, #d0473a38, transparent 70%),
    linear-gradient(160deg, #241615, #120d0c);
  box-shadow: 0 0 0 1px #d0473a66, 0 8px 24px #d0473a33;
}

.lp-tab[aria-pressed="true"] img { border-color: var(--lp-kin); filter: none; }
.lp-tab[aria-pressed="true"] .lp-tab-text b { color: var(--lp-kin); }

.lp-tab-check {
  position: absolute;
  top: -7px;
  right: -7px;
  display: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lp-shu);
  box-shadow: 0 2px 6px #0008;
}

.lp-tab-check::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 7px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.lp-tab[aria-pressed="true"] .lp-tab-check { display: block; }

.lp-tabs button:focus-visible,
.lp-topbar-back:focus-visible,
.lp-topbar-btn:focus-visible,
.lp-topbar-logo:focus-visible,
.lp-cta:focus-visible,
.lp-final-card:focus-visible,
.lp-faq summary:focus-visible {
  outline: 1px solid var(--lp-kin);
  outline-offset: 3px;
}

/* 青海波 띠 */
.lp-ornament {
  height: 22px;
  margin: 6px 0;
  background: var(--lp-pattern) repeat-x center / 40px 20px;
  opacity: .45;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

/* Section heads */
.lp-section {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 48px var(--lp-gutter);
}

.lp-intro {
  gap: 20px;
  padding: 20px var(--lp-gutter) 44px;
}

.lp-head-block {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lp-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lp-head-tight { gap: 14px; }

/* 朱印 머리말 */
.lp-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--lp-kin);
  font-size: 12px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: .18em;
}

.lp-eyebrow .lp-jp {
  padding: 5px 7px 4px;
  border: 1.5px solid var(--lp-shu);
  border-radius: 2px;
  color: var(--lp-shu);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 12px;
  transform: rotate(-2deg);
}

.lp-head h2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 14px;
  border-left: 2px solid var(--lp-shu);
  color: var(--lp-washi);
  font-family: var(--lp-serif);
  font-size: 25px;
  font-weight: 600;
  line-height: 34px;
  letter-spacing: -.01em;
  word-break: keep-all;
}

.lp-sub {
  color: var(--lp-muted);
  font-size: 15px;
  line-height: 1.75;
  word-break: keep-all;
}

.lp-sub b { color: var(--lp-washi); font-weight: 600; }

.lp-note {
  color: var(--lp-faint);
  font-size: 12.5px;
  line-height: 1.7;
  word-break: keep-all;
}

/* 소개 숫자 */
.lp-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
  padding: 0;
  list-style: none;
}

.lp-facts li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px 12px;
  border: 1px solid var(--lp-kin-hair);
  border-top: 2px solid var(--lp-shu);
  background: #110f0eb3;
}

.lp-facts b {
  color: var(--lp-kin);
  font: 700 22px/1 var(--lp-jp-serif);
  letter-spacing: .08em;
}

.lp-facts span {
  color: var(--lp-washi-soft);
  font-size: 12px;
}

/* Intro art */
/* 소개 콜라주: 본문과 같은 여백 안에서, 큰 그림 한 장과 기울어진 작은 두 장을 겹쳐 둔다. */
.lp-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: 400px;
  margin: 32px var(--lp-gutter) 0;
}

.lp-collage figure {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--lp-kin-line);
  background: var(--lp-ai-2);
  box-shadow: 0 14px 30px #000b;
}

.lp-collage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-collage-main { grid-row: 1 / 3; }
.lp-collage-main img { object-position: 50% 30%; }

.lp-collage-a {
  margin: 18px -6px -6px 0;
  transform: rotate(2.5deg);
}

.lp-collage-b {
  margin: 6px 6px 16px -14px;
  transform: rotate(-2deg);
}

.lp-collage figcaption {
  position: absolute;
  left: 8px;
  bottom: 7px;
  color: var(--lp-washi);
  font: 700 11px/1 var(--lp-jp-serif);
  letter-spacing: .16em;
  text-shadow: 0 1px 6px #000;
}

.lp-collage-seal {
  position: absolute;
  top: -12px;
  left: calc(54.5% - 26px);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid var(--lp-shu);
  border-radius: 4px;
  background: #070606d9;
  color: var(--lp-shu);
  font: 800 13px/1.15 var(--lp-jp-serif);
  text-align: center;
  transform: rotate(-6deg);
}

.lp-intro-wrap .lp-intro {
  position: relative;
}

/* Guide showcase */
.lp-guide {
  position: relative;
  aspect-ratio: 402 / 640;
  overflow: hidden;
}

.lp-guide > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
}

.lp-guide::before,
.lp-guide::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  pointer-events: none;
}

.lp-guide::before {
  top: 0;
  height: 14%;
  background: linear-gradient(to bottom, var(--lp-ai), transparent);
}

.lp-guide::after {
  bottom: 0;
  height: 58%;
  background: linear-gradient(to top, var(--lp-ai) 12%, #070606c7 46%, transparent);
}

/* 세로쓰기 한자 이름 */
.lp-guide-kanji {
  position: absolute;
  z-index: 1;
  top: 12%;
  right: 16px;
  color: #eee5d4e6;
  font: 700 40px/1 var(--lp-jp-serif);
  letter-spacing: .25em;
  writing-mode: vertical-rl;
  text-shadow: 0 2px 16px #000;
}

/* 인물이 오른쪽에 있는 장면은 이름을 왼쪽에 둔다. */
.lp-guide-kanji-left {
  right: auto;
  left: 16px;
}

.lp-guide-kanji::after {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  margin-top: 10px;
  margin-inline: auto;
  border: 2px solid var(--lp-shu);
  border-radius: 3px;
  background: radial-gradient(circle, #d0473a55, transparent 70%);
  transform: rotate(8deg);
}

.lp-guide-copy {
  position: absolute;
  z-index: 1;
  left: var(--lp-gutter);
  right: var(--lp-gutter);
  bottom: 6%;
  text-shadow: 0 2px 14px #000;
}

.lp-guide-role {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--lp-kin);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
}

.lp-guide-role .lp-jp {
  color: var(--lp-shu);
  font-size: 13px;
  letter-spacing: .1em;
}

.lp-guide-copy h3 {
  margin: 12px 0 14px;
  color: var(--lp-washi);
  font-family: var(--lp-serif);
  font-size: 54px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .14em;
}

.lp-guide-copy > p:not(.lp-guide-role) {
  max-width: 300px;
  padding-top: 14px;
  border-top: 1px solid var(--lp-kin-line);
  color: var(--lp-washi-soft);
  font-family: var(--lp-serif);
  font-size: 18px;
  line-height: 1.65;
  word-break: keep-all;
}

.lp-guide-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
}

.lp-guide-tags li {
  padding: 6px 10px;
  border: 1px solid var(--lp-kin-line);
  border-radius: 2px;
  background: #070606b3;
  color: var(--lp-washi-soft);
  font-size: 12px;
  line-height: 1;
  text-shadow: none;
}

/* 예시 명식 */
.lp-chart {
  padding: 18px 14px 16px;
  border: 1px solid var(--lp-kin-line);
  border-top: 3px double var(--lp-shu);
  background:
    linear-gradient(#110f0ef2, #0d0b0af2),
    var(--lp-pattern) repeat center / 40px 20px;
}

.lp-chart figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--lp-washi-soft);
  font-size: 13px;
}

.lp-chart figcaption span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--lp-shu);
  color: var(--lp-shu);
  font: 700 12px/1 var(--lp-jp-serif);
}

.lp-chart figcaption small { color: var(--lp-faint); font-size: 12px; }

.lp-chart table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
}

.lp-chart th,
.lp-chart td {
  padding: 8px 2px;
  border: 1px solid #d4b37826;
  font-family: var(--lp-jp-serif);
}

.lp-chart thead th {
  color: var(--lp-kin);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
}

.lp-chart thead th:first-child { width: 62px; }

.lp-chart tbody th {
  color: var(--lp-muted);
  font-size: 11.5px;
  font-weight: 600;
}

.lp-chart td {
  color: var(--lp-washi-soft);
  font-size: 13.5px;
  font-weight: 600;
}

.lp-chart-big td {
  color: var(--lp-washi);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.lp-chart-big td small {
  display: block;
  margin-top: 2px;
  color: var(--lp-faint);
  font-size: 11px;
  font-weight: 500;
}

.lp-chart td.lp-chart-self {
  background: #d0473a1f;
  color: var(--lp-shu);
}

.lp-chart-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
}

.lp-chart-notes li {
  color: var(--lp-washi-soft);
  font-size: 13px;
  line-height: 1.65;
  word-break: keep-all;
}

.lp-chart-notes b {
  margin-right: 6px;
  color: var(--lp-kin);
  font-weight: 600;
}

/* Steps */
.lp-steps {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}

.lp-steps li { display: flex; gap: 18px; }

.lp-step-rail {
  display: flex;
  flex: 0 0 40px;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}

.lp-step-rail i { width: 1px; background: var(--lp-kin-line); }
.lp-rail-top { height: 16px; }
.lp-step-rail .lp-rail-first { background: linear-gradient(to bottom, transparent, var(--lp-kin-line)); }
.lp-rail-rest { flex: 1; }
.lp-step-rail .lp-rail-last { background: linear-gradient(to bottom, var(--lp-kin-line), transparent); }

/* 朱印 번호 */
.lp-step-rail span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid var(--lp-shu);
  border-radius: 4px;
  background: radial-gradient(circle at 40% 35%, #d0473a2e, #070606 75%);
  color: var(--lp-shu);
  font: 800 19px/1 var(--lp-jp-serif);
  transform: rotate(-4deg);
}

.lp-step-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 22px 84px 26px 0;
}

/* 단계마다 오른쪽에 작은 오브제 그림 */
.lp-step-icon {
  position: absolute;
  top: 14px;
  right: 0;
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px #d0473a33);
}

.lp-step-body h3 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--lp-washi);
  font-family: var(--lp-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.lp-step-body h3 .lp-jp {
  color: var(--lp-kin);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
}

.lp-step-body p {
  color: var(--lp-muted);
  font-size: 14px;
  line-height: 1.7;
  word-break: keep-all;
}

.lp-chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid #d0473a73;
  border-radius: 2px;
  background: #d0473a14;
  color: #f0a79c;
  font-family: var(--lp-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .04em;
  white-space: normal;
}

.lp-step-body .lp-chip { margin-top: 4px; }

/* 십사 항목 */
.lp-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 0;
  list-style: none;
}

.lp-items li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 84px;
  padding: 14px 12px 12px;
  overflow: hidden;
  border: 1px solid var(--lp-kin-hair);
  background: linear-gradient(160deg, var(--lp-ai-3), var(--lp-ai-2));
}

.lp-items i {
  position: absolute;
  top: 8px;
  right: 10px;
  color: #d0473a99;
  font: 700 11px/1 var(--lp-jp-serif);
  font-style: normal;
}

.lp-items b {
  color: var(--lp-washi);
  font: 700 17px/1.3 var(--lp-jp-serif);
  letter-spacing: .04em;
}

.lp-items span {
  color: var(--lp-muted);
  font-size: 12px;
  line-height: 1.5;
  word-break: keep-all;
}

/* 한국식 비교 */
.lp-compare {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--lp-shu);
}

.lp-compare th,
.lp-compare td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--lp-kin-hair);
  text-align: left;
}

.lp-compare thead th {
  color: var(--lp-kin);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}

.lp-compare td:first-child {
  width: 46%;
  color: var(--lp-washi-soft);
  font-size: 14px;
}

.lp-compare td:last-child {
  color: var(--lp-washi);
  font: 700 17px/1.3 var(--lp-jp-serif);
  letter-spacing: .04em;
}

/* 감정서 미리보기 */
.lp-preview-art {
  position: relative;
  margin: -8px calc(var(--lp-gutter) * -1) 0;
}

.lp-preview-art img {
  display: block;
  width: 100%;
  height: auto;
}

.lp-preview-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--lp-ai), transparent 16%, transparent 80%, var(--lp-ai));
  pointer-events: none;
}

.lp-gift-art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: -8px 0 -4px;
}

.lp-gift-art::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 50%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, #d0473a2b, transparent 68%);
  transform: translateX(-50%);
  pointer-events: none;
}

.lp-gift-art img {
  position: relative;
  display: block;
  width: min(100%, 280px);
  height: auto;
}

.lp-gift-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 0;
  list-style: none;
}

.lp-gift-chips li {
  padding: 7px 11px;
  border: 1px solid var(--lp-kin-line);
  border-radius: 2px;
  color: var(--lp-washi-soft);
  font-family: var(--lp-serif);
  font-size: 13px;
  line-height: 13px;
}

/* Cards */
.lp-cards-wrap,
.lp-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.lp-cards li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 18px 20px;
  overflow: hidden;
  border: 1px solid var(--lp-kin-hair);
  background: linear-gradient(160deg, var(--lp-ai-3), var(--lp-ai-2));
}

.lp-cards li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--lp-shu);
}

.lp-cards li > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lp-cards h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--lp-washi);
  font-family: var(--lp-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

.lp-cards h3 .lp-jp {
  width: 100%;
  color: var(--lp-kin);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
}

.lp-cards p {
  color: var(--lp-muted);
  font-size: 13px;
  line-height: 1.55;
  word-break: keep-all;
}

.lp-card-icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  margin: -8px -6px -8px 0;
  filter: drop-shadow(0 4px 12px #d0473a33);
}

/* 후기 */
.lp-sample-flag {
  align-self: flex-start;
  padding: 6px 10px;
  border: 1px dashed #f0a79c80;
  color: #f0a79c;
  font-size: 12px;
  line-height: 1.4;
}

.lp-review-rail {
  display: flex;
  gap: 10px;
  margin: 0 calc(var(--lp-gutter) * -1);
  padding: 0 var(--lp-gutter) 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--lp-gutter);
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.lp-review-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }

/* 오른쪽 끝을 흐리게 — 넘길 카드가 더 있다는 신호. 끝까지 가면 사라진다. */
.lp-review-rail[data-end="0"] {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}

.lp-review-rail::-webkit-scrollbar { display: none; }

.lp-review {
  display: flex;
  flex: 0 0 78%;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px 14px;
  border: 1px solid var(--lp-kin-hair);
  border-top: 2px solid var(--lp-kin);
  background: linear-gradient(160deg, var(--lp-ai-3), var(--lp-ai-2));
  scroll-snap-align: start;
}

.lp-review-stars {
  color: var(--lp-kin);
  font-size: 13px;
  letter-spacing: .1em;
}

.lp-review p:not(.lp-review-stars) {
  color: var(--lp-washi-soft);
  font-family: var(--lp-serif);
  font-size: 14.5px;
  line-height: 1.7;
  word-break: keep-all;
}

.lp-review footer {
  margin-top: auto;
  color: var(--lp-faint);
  font-size: 12px;
}

.lp-review footer b {
  color: #f0a79c;
  font-weight: 600;
}

/* FAQ */
.lp-faq { gap: 20px; }

.lp-faq details { border-bottom: 1px solid var(--lp-kin-hair); }

.lp-faq summary {
  position: relative;
  padding: 16px 30px 16px 0;
  color: var(--lp-washi);
  font-family: var(--lp-serif);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}

.lp-faq summary::-webkit-details-marker { display: none; }

.lp-faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--lp-shu);
  border-bottom: 1.5px solid var(--lp-shu);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s;
}

.lp-faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }

.lp-faq details p {
  padding: 0 0 16px;
  color: var(--lp-muted);
  font-size: 14px;
  line-height: 1.75;
  word-break: keep-all;
}

/* Bullets */
.lp-bullets {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0;
  list-style: none;
}

.lp-bullets li {
  position: relative;
  padding-left: 16px;
  color: var(--lp-faint);
  font-size: 13px;
  line-height: 1.65;
  word-break: keep-all;
}

.lp-bullets li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 2px;
  width: 5px;
  height: 5px;
  background: var(--lp-shu);
  opacity: .8;
}

.lp-notice { gap: 22px; }
.lp-notice .lp-head h2 { color: var(--lp-washi-soft); }

/* 마지막 선택 */
.lp-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px var(--lp-gutter) 40px;
  background:
    linear-gradient(#070606, #070606cc 40%, #070606),
    var(--lp-pattern) repeat center / 40px 20px;
  text-align: center;
}

.lp-final-jp {
  color: var(--lp-shu);
  font: 600 13px/1.4 var(--lp-jp-serif);
  letter-spacing: .12em;
}

.lp-final h2 {
  color: var(--lp-washi);
  font-family: var(--lp-serif);
  font-size: 24px;
  font-weight: 600;
}

.lp-final-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
}

.lp-final-card {
  position: relative;
  display: block;
  /* 포스터(2:3) 아래쪽에 박힌 이름 글씨는 잘라 내고 카드 이름만 보이게 한다. */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--lp-kin-line);
  text-decoration: none;
}

.lp-final-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transition: transform .4s;
}

.lp-final-card:hover img { transform: scale(1.04); }

.lp-final-card span {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 30px 10px 12px;
  background: linear-gradient(to top, #070606f2, transparent);
}

.lp-final-card b {
  color: var(--lp-washi);
  font-family: var(--lp-serif);
  font-size: 20px;
  letter-spacing: .1em;
}

.lp-final-card small {
  color: var(--lp-shu);
  font: 600 11px/1.2 var(--lp-jp-serif);
  letter-spacing: .08em;
}

.lp-brand-foot {
  margin-top: 28px;
  color: var(--lp-faint);
  font-family: var(--lp-serif);
  font-size: 13px;
}

.lp-brand-foot em { color: var(--lp-shu); font-style: normal; }

/* Fixed bottom CTA: one lacquer button per guide */
.lp-cta-bar {
  position: fixed;
  z-index: 40;
  inset: auto 0 0;
  display: flex;
  gap: 8px;
  max-width: 444px;
  margin: 0 auto;
  padding: 44px var(--lp-gutter) calc(env(safe-area-inset-bottom, 0px) + 24px);
  pointer-events: none;
  background: linear-gradient(to bottom, #07060600, #07060699 40%, #070606f0);
}

.lp-cta {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 60px;
  border: 1px solid #ffffff2e;
  border-radius: 6px;
  background: linear-gradient(180deg, #1a1515, #0e0b0b);
  box-shadow: 0 10px 24px #0008;
  color: #ffffffcc;
  text-decoration: none;
  pointer-events: auto;
  transition: background .3s, border-color .3s, box-shadow .3s, color .3s;
}

.lp-cta.is-active {
  border-color: #ff8a7a8c;
  background:
    radial-gradient(120% 130% at 20% 0%, #ffffff1f, transparent 55%),
    linear-gradient(180deg, #b8332a, #862019);
  box-shadow: 0 10px 30px #d0473a59, inset 0 1px 0 #ffb0a52e;
  color: #fff;
}

.lp-cta b {
  font-family: var(--lp-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
}

.lp-cta small {
  color: #ffd9c7a6;
  font: 600 11px/1 var(--lp-jp-serif);
  letter-spacing: .06em;
}

.lp-cta:active { transform: scale(.98); }

.lp-toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 100px);
  padding: 12px 20px;
  border: 1px solid #d0473a66;
  border-radius: 8px;
  background: #110f0ef2;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}

.lp-toast.on {
  opacity: 1;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-tab,
  .lp-tab img,
  .lp-cta,
  .lp-toast,
  .lp-final-card img { transition: none; }
  .lp-tab[aria-pressed="false"] img { animation: none; }
}

/* 명서각판(/myeongseo/): 한옥 창살 문양, 한자 표기도 한국 명조로, 초상은 4:5. */
.lp-edition-myeongseo {
  --lp-jp-serif: "Noto Serif KR", "Gowun Batang", serif;
  --lp-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cg fill='none' stroke='%23d4b378' stroke-width='.7'%3E%3Cpath d='M0 10h40M20 0v20M10 5h20v10H10z'/%3E%3C/g%3E%3C/svg%3E");
}

.lp-edition-myeongseo .lp-hero { aspect-ratio: 900 / 1124; }

/* 아이콘 없는 단계는 오른쪽 여백을 두지 않는다. */
.lp-step-body:not(:has(.lp-step-icon)) { padding-right: 0; }

/* 미리 들어 보기: 오디오북·운명곡 샘플 */
.lp-listen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 14px;
  border: 1px solid var(--lp-kin-line);
  border-top: 3px double var(--lp-shu);
  background: linear-gradient(#110f0ef2, #0d0b0af2), var(--lp-pattern) repeat center / 40px 20px;
}

.lp-listen-title {
  color: var(--lp-kin);
  font: 600 13px/1 var(--lp-serif);
  letter-spacing: .14em;
}

.lp-listen figure { display: flex; flex-direction: column; gap: 6px; }
.lp-listen figcaption { color: var(--lp-washi-soft); font-size: 13px; }
.lp-listen audio { width: 100%; height: 36px; }

/* 명서 그림 콜라주: 판화 다섯 장을 부채꼴로 겹친다. 맨 앞 한 장만 똑바로, 뒤로 갈수록 기울고 어둡게. */
.lp-plates {
  position: relative;
  height: 350px;
  margin: 6px 0 26px;
}

.lp-plate {
  position: absolute;
  width: 72%;
  height: auto;
  border: 1px solid var(--lp-kin-line);
  box-shadow: 0 14px 30px #000c;
}

.lp-plate-1 { top: 0; left: -6%; transform: rotate(-9deg); filter: brightness(.5); }
.lp-plate-2 { top: 6px; right: -6%; transform: rotate(8deg); filter: brightness(.5); }
.lp-plate-3 { top: 110px; left: -4%; transform: rotate(-4deg); filter: brightness(.7); }
.lp-plate-4 { top: 118px; right: -4%; transform: rotate(5deg); filter: brightness(.7); }
.lp-plate-5 { top: 52px; left: 7%; width: 86%; border-color: #d4b37866; box-shadow: 0 18px 40px #000e; }

.lp-plates figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  color: var(--lp-washi-soft);
  font: 500 13px/1.4 var(--lp-serif);
}

.lp-plates figcaption b {
  color: var(--lp-shu);
  font: 800 18px/1 var(--lp-jp-serif);
}

/* 명서 선물하기로 가는 줄(감정사·기록관 고르기 바로 아래). */
.lp-gift-seal { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1.5px solid var(--lp-shu); border-radius: 6px; color: #f08b7e; font: 700 16px/1 var(--lp-serif); }