/* ============================================================
   Born Decoded — JP skin (디자인 디렉션 v1)
   style.css 뒤에 로드. /ja/ 전 페이지 공통.
   컬러·타이포 토큰 = 전달/JP디자인디렉션_v1.md §1–2
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;600;700&family=Noto+Serif+JP:wght@400;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
  /* 기본 */
  --bg-ivory:  #F7F1E6;
  --bg-paper:  #FDFAF3;
  --ink:       #3A3226;
  --ink-soft:  #6B6152;
  --gold:      #B89B5E;
  --gold-soft: #D9C79A;

  /* 오행 코드북 */
  --el-wood:  #5B8A5E;
  --el-fire:  #C05A4A;
  --el-earth: #C2A45C;
  --el-metal: #9C9C94;
  --el-water: #4A6B8A;

  /* 기능색 */
  --cta:       #8A5A3B;
  --cta-hover: #6F4830;
  --danger:    #A04838;

  /* style.css 토큰 재매핑 — 폼/기존 컴포넌트 스킨 통일 */
  --ivory: #F7F1E6;
  --brown: #3A3226;
  --brown-light: #6B6152;
  --dark: #3A3226;
  --wood:  #5B8A5E;
  --fire:  #C05A4A;
  --earth: #C2A45C;
  --metal: #9C9C94;
  --water: #4A6B8A;
  --font-serif: "Shippori Mincho", "Noto Serif JP", serif;
  --font-sans:  "Noto Sans JP", sans-serif;
}

body {
  background: var(--bg-ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.9;
}
a { color: var(--gold); }

/* ---------- 헤더 보정 (M1·M2) ---------- */
.header-nav .btn { white-space: nowrap; }   /* 버튼 라벨 개행 금지 */
.header-logo span { white-space: nowrap; }  /* 로고 한 줄 강제 */

/* ---------- 랜딩 공통 ---------- */
.jp-section { padding: 0 20px; margin: 96px auto 0; max-width: 960px; }
.jp-section:last-of-type { margin-bottom: 96px; }

.jp-section-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
  text-wrap: balance; /* M4: 한 글자 widow 방지 */
}
.jp-section-title::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold);
  margin: 14px auto 0;
}

/* 섹션 카드 (기본 그릇) */
.jp-card {
  background: var(--bg-paper);
  border: 1px solid var(--gold-soft);
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(58, 50, 38, .06);
}

/* 배지 */
.jp-badge {
  display: inline-block;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  background: var(--bg-paper);
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--ink);
  padding: 4px 12px;
  letter-spacing: .04em;
}

/* 버튼 */
.jp-btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  padding: 16px 32px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
}
.jp-btn-primary { background: var(--cta); color: var(--bg-paper); }
.jp-btn-primary:hover { background: var(--cta-hover); color: var(--bg-paper); }
.jp-btn-ghost {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--ink);
}
.jp-btn-ghost:hover { background: rgba(184, 155, 94, .1); color: var(--ink); }
.jp-btn[disabled], .jp-btn.jp-disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- [1] 히어로 ----------
   기본(1열 스택·모바일 포함) = 센터 정렬 + 상단 여백 — 이후 섹션들과 정렬 통일 (A2).
   데스크톱 2컬럼일 때만 텍스트 좌정렬. */
.jp-hero {
  max-width: 1080px;
  margin: 0 auto;
  /* M2: 고정 헤더(모바일 56px) 높이 + 여백만큼 오프셋 — 히어로 1단 가림 방지 */
  padding: 92px 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.jp-hero-text { min-width: 0; text-align: center; }
.jp-hero-main {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.5;
  color: var(--ink);
  word-break: keep-all;   /* 모바일 줄바꿈은 「、」 뒤에서만 */
  overflow-wrap: anywhere;
  margin: 0 0 20px;
}
.jp-hero-sub {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.9;
  color: var(--ink);
  margin: 0 0 16px;
}
.jp-hero-trust,
.jp-hero-note {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.jp-hero-note { font-size: 13px; }
.jp-hero-cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 24px 0 20px; }
.jp-hero-voice {
  font-family: var(--font-sans); /* M3: 본문성 문장은 sans */
  font-size: 15px;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* 커버 아트: 흐림 없는 실물 카드 (PM 07-25 수정 확정) — 1열에선 카피·CTA 직하 배치
   M10-a 확대(카드는 fold에 걸쳐도 무방) / M10-b 발색 미세 보정(변환 손실 아님 — 실측 ΔS≈0.3%,
   상한 saturate 1.1·contrast 1.02 준수) / M10-c 보더·그림자 강화로 톤온톤 묻힘 해소
   M11: 카드 직하 샘플 버튼 2개(고스트 — 주 CTA와 위계 구분, 탭 버튼 대비 2배 크기) */
.jp-hero-art { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.jp-hero-sample-btns { display: flex; gap: 10px; justify-content: center; }
.jp-hero-sample-btn { font-size: 15px; padding: 12px 24px; }
.jp-hero-art img {
  width: 100%;
  max-width: 250px;
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  transform: rotate(2.5deg);
  box-shadow: 0 10px 32px rgba(58, 50, 38, .18);
  filter: saturate(1.08) contrast(1.02);
}

/* 데스크톱 2컬럼: 텍스트 좌 / 카드 우, 좌정렬 */
@media (min-width: 861px) {
  .jp-hero {
    min-height: 88vh;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding-top: 110px; /* M2: 72px 헤더 + 여백 */
  }
  .jp-hero-text { flex: 1 1 55%; text-align: left; }
  .jp-hero-cta { justify-content: flex-start; }
  .jp-hero-art { flex: 0 1 40%; }
  .jp-hero-art img { max-width: 420px; } /* M10-a: ~1.4배 */
}

/* ---------- [2] 공감 ---------- */
.jp-empathy-lead {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 30px;
  text-align: center;
  word-break: keep-all;
  text-wrap: balance; /* M4 */
}
.jp-empathy-lead::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold);
  margin: 14px auto 0;
}
.jp-voices { display: flex; flex-direction: column; gap: 16px; max-width: 560px; margin: 40px auto 0; }
.jp-voice {
  padding: 22px 26px;
  font-family: var(--font-sans); /* M3: 실제 고민 문장 = 본문 → sans (디렉션 §2) */
  font-size: 16px;
  color: var(--ink);
  text-align: center;
  text-wrap: pretty;
}
.jp-empathy-turn {
  margin: 40px auto 0;
  text-align: center;
  font-family: var(--font-sans); /* M3 */
  font-size: 17px;
  color: var(--ink);
  word-break: keep-all;
  text-wrap: balance;
}

/* ---------- [3] 상품 실물 증거 ---------- */
.jp-proof-lead {
  max-width: 640px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 16px;
  color: var(--ink);
}
.jp-proof-lead p { text-wrap: pretty; } /* M4 */
.jp-tabs { display: flex; justify-content: center; gap: 32px; margin: 40px 0 28px; }
.jp-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink-soft);
  padding: 8px 4px;
  cursor: pointer;
}
.jp-tab[aria-selected="true"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--gold);
}
.jp-proof-panel[hidden], .jp-contents-grid[hidden] { display: none; }
.jp-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  max-width: 520px;
  margin: 0 auto;
}
.jp-spec {
  padding: 12px 16px;
  font-size: 15px;
  text-align: center;
  font-family: var(--font-sans); /* M3: 스펙 = UI 텍스트 → sans */
}
.jp-sample-btn {
  display: table;
  margin: 18px auto 0;
  font-size: 14px;
  padding: 10px 24px;
}
.jp-page-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 14px;
}

/* 스크린샷: 1·2 크게 앞, 3·4 작게 뒤 겹침 */
.jp-shots {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  margin: 44px auto 0;
  max-width: 760px;
}
/* M10-b·c: 발색 미세 보정 + 보더·그림자 강화 (스크린샷 = 실물 증거 — 상한 준수) */
.jp-shot {
  border: 1.5px solid var(--gold);
  border-radius: 10px;
  background: var(--bg-paper);
  box-shadow: 0 6px 20px rgba(58, 50, 38, .14);
  filter: saturate(1.08) contrast(1.02);
}
.jp-shot-main { width: 46%; transform: rotate(-2deg); z-index: 2; }
.jp-shot-sub { width: 40%; transform: rotate(2deg); margin-top: 40px; z-index: 2; }
.jp-shot-cover {
  position: absolute;
  width: 24%;
  z-index: 1;
  top: 8%;
}
.jp-shot-cover.jp-cover-l { left: 0; transform: rotate(-6deg); }
.jp-shot-cover.jp-cover-r { right: 0; transform: rotate(6deg); }
.jp-shot-caption {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 20px;
}

/* ---------- [4] 내용 4항목 ---------- */
.jp-contents-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 760px;
  margin: 40px auto 0;
}
.jp-content-item { padding: 26px 28px; }
/* M9: 번호 골드 serif 대형 — 타이틀과 시각 위계 */
.jp-content-num {
  font-family: var(--font-serif);
  color: var(--gold);
  font-size: 26px;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
}
.jp-content-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 8px;
}
.jp-content-desc { font-size: 15px; color: var(--ink-soft); margin: 0; text-wrap: pretty; }

/* ---------- [5] 가격 ---------- */
.jp-price-cards {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin: 40px auto 0;
  max-width: 760px;
}
.jp-price-card {
  position: relative;
  flex: 1 1 0;
  padding: 36px 28px 30px;
  text-align: center;
}
.jp-price-card .jp-badge { position: absolute; top: 14px; right: 14px; }
.jp-price-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 19px;
  margin: 0 0 18px;
}
.jp-price-monitor {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  margin: 0;
}
.jp-price-monitor .jp-yen-line {
  display: block;
  font-size: 40px;
}
.jp-price-regular {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 10px 0 0;
}
.jp-price-notes {
  max-width: 560px;
  margin: 26px auto 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.jp-price-notes p { margin: 2px 0; }

/* ---------- [6] 리스크 리버설 ---------- */
.jp-risk-card {
  max-width: 640px;
  margin: 40px auto 0;
  padding: 32px 36px;
  font-size: 15px;
}
.jp-risk-card p { margin: 0 0 6px; text-wrap: pretty; }
.jp-risk-email {
  font-family: var(--font-sans);
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: var(--gold-soft);
}

/* ---------- [7] 최종 CTA ---------- */
.jp-cta-lead {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 26px;
  text-align: center;
  word-break: keep-all;
  text-wrap: balance; /* M4 */
}
.jp-cta-sub {
  text-align: center;
  font-size: 15px;
  color: var(--ink-soft);
  margin: 12px 0 0;
  text-wrap: pretty;
}
.jp-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 28px 0 0;
}
.jp-consents {
  max-width: 560px;
  margin: 26px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 커스텀 체크박스 */
.jp-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.7;
}
.jp-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border: 1.5px solid var(--gold);
  border-radius: 5px;
  background: var(--bg-paper);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
}
.jp-consent input[type="checkbox"]::before {
  content: "";
  width: 11px;
  height: 11px;
  transform: scale(0);
  transition: transform .1s;
  background: var(--gold);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.jp-consent input[type="checkbox"]:checked::before { transform: scale(1); }
.jp-consent a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: var(--gold-soft);
}

/* ---------- [8] 푸터 ---------- */
.jp-footer {
  margin-top: 96px;
  padding: 48px 20px 40px;
  border-top: 1px solid var(--gold-soft);
  background: var(--bg-paper);
  text-align: center;
}
.jp-footer-brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 16px;
}
.jp-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  font-size: 13px;
  margin: 0 0 16px;
}
.jp-footer-links a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--gold-soft);
}
.jp-footer-biz { font-size: 12px; color: var(--ink-soft); margin: 0; }

/* ---------- 법무 페이지 ---------- */
.jp-legal {
  max-width: 720px;
  margin: 56px auto 96px;
  padding: 0 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 2.0;
  color: var(--ink);
}
.jp-legal h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.6;
  margin: 0 0 8px;
}
.jp-legal h1::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold);
  margin-top: 12px;
}
.jp-legal .jp-legal-intro { margin: 24px 0 0; }
.jp-legal h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  margin: 36px 0 8px;
}
.jp-legal p { margin: 0 0 10px; }
.jp-legal ul { margin: 0 0 10px; padding-left: 1.4em; }
.jp-legal li { margin: 2px 0; }
.jp-legal dl { margin: 28px 0 0; }
.jp-legal dt {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  margin: 28px 0 4px;
}
.jp-legal dd { margin: 0; }
.jp-legal dd p { margin: 0 0 6px; }
.jp-legal-enacted { margin-top: 40px; color: var(--ink-soft); font-size: 14px; }
.jp-legal-note { white-space: pre-line; }

/* ---------- 헤더(간이) ---------- */
.jp-header {
  padding: 18px 20px;
  display: flex;
  justify-content: center;
}
.jp-header a {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: .06em;
}

/* ---------- 스크롤 페이드인 (0.4s 1회, 12px 이하) ---------- */
.jp-fade {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s ease;
}
.jp-fade.jp-fade-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .jp-fade { opacity: 1; transform: none; transition: none; }
}

/* ---------- 폼 페이지 보정 ---------- */
.form-page .form-card { border-radius: 20px; }
.btn-gold { background: var(--cta); }
.btn-gold:hover { background: var(--cta-hover); }

/* ---------- 반응형 ---------- */
@media (max-width: 860px) {
  /* M1: 모바일 헤더 압축 */
  .header { height: 56px; padding-top: 0; }
  .header-logo { font-size: 1rem; gap: 6px; }
  .header-logo img { width: 28px; height: 28px; }
  .header-nav { gap: 6px; }
  .header-nav .btn { padding: 7px 14px; font-size: 0.8rem; }
  /* 랜딩 헤더: 두 버튼 대신 주 CTA(二人を読む) 1개만 */
  .jp-nav-personal { display: none; }

  .jp-section { margin-top: 64px; }
  .jp-section-title, .jp-empathy-lead { font-size: 22px; }
  .jp-hero { padding-top: 84px; } /* M2: 56px 헤더 + 28px 여백 */
  .jp-hero-main { font-size: 28px; }
  .jp-hero-sub { font-size: 16px; }
  .jp-hero-trust { font-size: 13px; }
  .jp-hero-art img { max-width: 250px; } /* M10-a: 모바일도 확대 */

  /* M9: 태블릿(700~860px)도 2×2 유지 — 1열·M5 압축은 아래 700px 미만 블록으로 */
  .jp-contents-grid { gap: 14px; }
  .jp-cta-lead { font-size: 20px; }
  .jp-price-cards { flex-direction: column; }
  .jp-price-monitor .jp-yen-line { font-size: 32px; }
  .jp-shots { flex-wrap: wrap; }
  .jp-shot-main { width: 72%; margin-left: 14%; }
  .jp-shot-sub { width: 62%; margin: 24px 0 0 0; }
  .jp-shot-cover { width: 30%; }
  .jp-shot-cover.jp-cover-l { top: 2%; }
  .jp-shot-cover.jp-cover-r { top: auto; bottom: 6%; }
  .jp-specs { grid-template-columns: 1fr 1fr; }
}

/* 모바일(<700px): 내용 4항목 1열 + M5 압축 (M9로 태블릿과 분리) */
@media (max-width: 699px) {
  .jp-contents-grid { grid-template-columns: 1fr; gap: 12px; }
  .jp-content-item { padding: 16px 18px; }
  .jp-content-num { margin-bottom: 4px; font-size: 20px; }
  .jp-content-title { font-size: 16px; margin: 0 0 4px; }
  .jp-content-desc { line-height: 1.7; }
}

/* ═══ [어포던스 통일 8/4] 「짙은 채움 = 클릭 가능」 — 2단 위계: 골드 채움 = 최종 전환 제출 전용(btn-gold 유지) /
   다크 브라운(--cta) = 일반 이동·오픈 CTA. 비클릭 요소엔 짙은 채움 금지. ═══ */

/* 헤더 내비 — 클릭 요소 다크 채움 (ja 페이지 한정 오버라이드, EN 무영향) */
.header-nav .btn-nav { background: var(--cta); color: var(--bg-paper); border-color: var(--cta); }
.header-nav .btn-nav:hover { background: var(--cta-hover); color: var(--bg-paper); }

/* 무료 CTA 기한 정보 배지 — 버튼에서 분리된 비클릭 정보 (아이보리 + 골드 보더) */
.jp-free-badge { display: block; width: fit-content; margin: 8px auto 0; padding: 4px 14px; font-size: 12.5px; color: var(--ink-soft); background: var(--bg-paper); border: 1px solid var(--gold-soft); border-radius: 999px; }

/* 무료 CTA 종료·마감 상태 — 비클릭이 된 버튼에서 짙은 채움 해제(정보 표시로 강등) */
.jp-btn.jp-free-ended { background: var(--bg-paper); color: var(--ink-soft); border: 1px solid var(--gold-soft); opacity: 1; }

/* 고민 리스트(공감 voice) — 비클릭 인용문 스타일 (jp-card 강등, HTML에서 클래스 제거됨) */
.jp-voice { color: var(--ink-soft); padding: 6px 10px; }

/* ═══ 리뷰 섹션 — jp-reviews.js가 approved ≥3건일 때만 주입 (리뷰 v2 §5·§8) ═══ */
.jp-reviews-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.jp-review-card { padding: 0; overflow: hidden; text-align: left; }
.jp-review-photo { width: 100%; display: block; cursor: zoom-in; }   /* §8 사진 주인공 — 카드 폭 전체 상단 */
.jp-review-text { padding: 16px 18px; }
.jp-review-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.jp-review-nick { font-weight: 600; color: var(--ink); }
.jp-review-badge { border: 1px solid var(--gold-soft); color: var(--gold); border-radius: 999px; padding: 1px 10px; font-size: 11px; }
.jp-review-body { margin: 0; font-size: 14px; line-height: 1.8; white-space: pre-wrap; }
.jp-reviews-actions { text-align: center; margin-top: 20px; }
.jp-reviews-manage-btn { display: block; margin: 10px auto 0; padding: 10px 22px; font-size: 13px; }   /* [어포던스 8/4] 링크→다크 버튼 */
.jp-rv-remaining { font-size: 13px; color: var(--ink-soft); margin: 0 0 4px; }
.jp-rv-btn { margin-top: 16px; width: 100%; }
.jp-rv-btn-s { margin: 10px 8px 0 0; padding: 8px 18px; font-size: 13px; }

/* 작성·수정 오버레이 */
.jp-rv-overlay { position: fixed; inset: 0; background: rgba(30, 25, 18, 0.72); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 24px 16px; }
.jp-rv-panel { background: var(--bg-paper); border-radius: 16px; max-width: 480px; width: 100%; padding: 24px 20px 28px; margin: auto 0; }
.jp-rv-panel h3 { margin: 0 0 6px; font-size: 18px; color: var(--ink); }
.jp-rv-panel label { display: block; font-size: 13px; color: var(--ink-soft); margin: 14px 0 4px; }
.jp-rv-panel input, .jp-rv-panel textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--gold-soft); border-radius: 8px; padding: 10px; font-size: 14px; background: #fff; color: var(--ink); }
.jp-rv-panel textarea { min-height: 120px; resize: vertical; }
.jp-rv-msg { font-size: 13px; margin: 10px 0 0; color: #b3423a; min-height: 1em; }
.jp-rv-msg.ok { color: #2e7d32; }
.jp-rv-close { float: right; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--ink-soft); line-height: 1; }
.jp-rv-photos-note { font-size: 12px; color: var(--gold); margin: 6px 0 0; }
.jp-rv-item { border: 1px solid var(--gold-soft); border-radius: 10px; padding: 12px 14px; margin-top: 12px; font-size: 13px; }
.jp-rv-status { font-size: 11px; color: var(--gold); border: 1px solid var(--gold-soft); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }

/* 라이트박스 (§8 사진 탭 확대) */
.jp-rv-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); z-index: 1100; display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 16px; }
.jp-rv-lightbox img { max-width: 100%; max-height: 92vh; border-radius: 8px; }

/* 모바일: 리뷰 1열 (첫 화면 2~3장 밀도 — §7) */
@media (max-width: 699px) {
  .jp-reviews-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ============================================================
   [N0/N1] 무료 命式 미리보기 (jp-preview.js) — 2026-08-10 개편
   골드=제출 위계: .jp-btn-gold 는 미리보기 제출·무료 신청 전용
   ============================================================ */
.jp-btn-gold { background: var(--gold); color: #fff; border: 1px solid var(--gold); }
.jp-btn-gold:hover { background: #a8894e; border-color: #a8894e; color: #fff; }
.jp-btn-gold:disabled { opacity: 0.45; cursor: default; }

.jp-preview-card {
  position: relative;
  margin: 22px 0 14px;
  padding: 22px 22px 24px;
  background: var(--bg-paper);
  border: 1px solid var(--gold-soft);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(58, 50, 38, 0.08);
  overflow: hidden;
}
/* 장식: 우상단 은은한 금빛 원광 + 초승달 라인 (외부 에셋 없음) */
.jp-preview-card::before {
  content: "";
  position: absolute; top: -46px; right: -46px; width: 140px; height: 140px;
  background: radial-gradient(circle at 60% 40%, rgba(184,155,94,0.22), rgba(184,155,94,0) 70%);
  pointer-events: none;
}
.jp-preview-card::after {
  content: "";
  position: absolute; top: 18px; right: 20px; width: 26px; height: 26px;
  border-radius: 50%;
  box-shadow: inset 7px -3px 0 0 var(--gold-soft);
  opacity: 0.8;
  pointer-events: none;
}
.jp-pv-head { font-family: "Shippori Mincho", serif; font-size: 1.12rem; color: var(--ink); margin: 0 0 4px; font-weight: 600; }
.jp-pv-lead { font-size: 0.86rem; color: var(--ink-soft); margin: 0 0 14px; }

.jp-pv-dots { display: flex; gap: 6px; margin-bottom: 12px; }
.jp-pv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-soft); opacity: 0.5; }
.jp-pv-dot.is-on { background: var(--gold); opacity: 1; }

.jp-pv-q { font-family: "Shippori Mincho", serif; font-size: 1.02rem; color: var(--ink); margin: 0 0 12px; }
.jp-pv-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.jp-pv-select {
  flex: 1 1 90px; min-width: 90px;
  padding: 12px 10px; font-size: 1rem;
  border: 1px solid var(--gold-soft); border-radius: 8px;
  background: #fff; color: var(--ink);
}
.jp-pv-select:focus { outline: none; border-color: var(--gold); }
.jp-pv-chip {
  flex: 1 1 40%;
  padding: 12px 14px; font-size: 0.98rem;
  border: 1px solid var(--gold-soft); border-radius: 999px;
  background: #fff; color: var(--ink); cursor: pointer;
}
.jp-pv-chip.is-on { background: var(--gold); border-color: var(--gold); color: #fff; }
.jp-pv-next { width: 100%; padding: 14px 16px; border-radius: 10px; font-size: 1rem; cursor: pointer; }
.jp-pv-sub { display: flex; justify-content: space-between; margin-top: 10px; }
.jp-pv-link { background: none; border: none; color: var(--ink-soft); font-size: 0.84rem; text-decoration: underline; cursor: pointer; padding: 4px; }
.jp-pv-loading { font-size: 0.95rem; color: var(--ink-soft); padding: 18px 0; text-align: center; }

/* 결과 — 三柱 카드 */
.jp-pv-title { font-family: "Shippori Mincho", serif; font-size: 1.15rem; color: var(--ink); margin: 0 0 12px; }
.jp-pv-pillars { display: flex; gap: 10px; }
.jp-pv-pillar {
  flex: 1; text-align: center;
  background: #fff; border: 1px solid var(--gold-soft); border-radius: 10px;
  padding: 12px 6px 10px;
  border-top: 3px solid var(--gold);
}
.jp-el-wood  { border-top-color: var(--el-wood); }
.jp-el-fire  { border-top-color: var(--el-fire); }
.jp-el-earth { border-top-color: var(--el-earth); }
.jp-el-metal { border-top-color: var(--el-metal); }
.jp-el-water { border-top-color: var(--el-water); }
.jp-pv-pillar-label { font-size: 0.74rem; color: var(--ink-soft); margin: 0 0 6px; letter-spacing: 0.08em; }
.jp-pv-hanja { font-family: "Shippori Mincho", serif; font-size: 1.9rem; line-height: 1.15; color: var(--ink); margin: 0; }
.jp-pv-hanja-branch { font-size: 1.55rem; color: var(--ink-soft); }
.jp-pv-pillar-tag { font-size: 0.72rem; color: var(--ink-soft); margin: 6px 0 0; }
.jp-pv-note { font-size: 0.78rem; color: var(--ink-soft); margin: 10px 0 16px; }

.jp-pv-dm { background: rgba(184,155,94,0.09); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.jp-pv-dm-label { font-size: 0.8rem; color: var(--ink-soft); margin: 0 0 4px; letter-spacing: 0.05em; }
.jp-pv-dm-line { font-family: "Shippori Mincho", serif; font-size: 1.02rem; color: var(--ink); margin: 0; line-height: 1.7; }

.jp-pv-subtitle { font-family: "Shippori Mincho", serif; font-size: 0.98rem; color: var(--ink); margin: 0 0 10px; }
.jp-pv-bars { margin-bottom: 18px; }
.jp-pv-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.jp-pv-bar-name { width: 1.4em; font-family: "Shippori Mincho", serif; font-size: 0.92rem; color: var(--ink); text-align: center; }
.jp-pv-bar-track { flex: 1; height: 8px; background: rgba(58,50,38,0.07); border-radius: 999px; overflow: hidden; }
.jp-pv-bar-fill { height: 100%; border-radius: 999px; }
.jp-el-bg-wood  { background: var(--el-wood); }
.jp-el-bg-fire  { background: var(--el-fire); }
.jp-el-bg-earth { background: var(--el-earth); }
.jp-el-bg-metal { background: var(--el-metal); }
.jp-el-bg-water { background: var(--el-water); }
.jp-pv-bar-pct { width: 3.2em; font-size: 0.78rem; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }

/* 게이트 — 항목 노출·값 마스킹 */
.jp-pv-gate { border-top: 1px dashed var(--gold-soft); padding-top: 16px; }
.jp-pv-gate-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 2px; border-bottom: 1px solid rgba(184,155,94,0.18);
}
.jp-pv-gate-label { font-size: 0.9rem; color: var(--ink); }
.jp-pv-gate-mask {
  font-size: 0.84rem; color: var(--ink-soft);
  filter: blur(4px); user-select: none; pointer-events: none;
  background: rgba(58,50,38,0.04); border-radius: 4px; padding: 1px 6px;
}
.jp-pv-gate-row::after { content: "\1F512"; font-size: 0.72rem; margin-left: 6px; opacity: 0.55; }
.jp-pv-gate-note { font-size: 0.82rem; color: var(--ink-soft); margin: 12px 0 12px; }
.jp-pv-gate-btns { display: flex; flex-direction: column; gap: 8px; }
.jp-pv-gate-btns .jp-btn { width: 100%; text-align: center; padding: 13px 16px; border-radius: 10px; }

/* [N2] 신뢰 수치 스트립 */
.jp-truststrip {
  background: rgba(184,155,94,0.10);
  border-top: 1px solid var(--gold-soft);
  border-bottom: 1px solid var(--gold-soft);
  padding: 12px 16px; text-align: center;
}
.jp-truststrip p { margin: 0; font-size: 0.84rem; color: var(--ink); letter-spacing: 0.02em; }
.jp-ts-dot { color: var(--gold); margin: 0 6px; }

/* [N5] 감정 방법 블록 */
.jp-method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.jp-method-card { position: relative; padding: 20px 16px 18px; }
.jp-method-num {
  display: inline-block; font-family: "Shippori Mincho", serif;
  font-size: 1.3rem; color: var(--gold); margin-bottom: 8px;
}
.jp-method-t { font-family: "Shippori Mincho", serif; font-size: 1rem; color: var(--ink); margin: 0 0 8px; }
.jp-method-d { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.75; margin: 0; }
.jp-method-origin {
  margin-top: 16px; font-size: 0.85rem; color: var(--ink-soft);
  text-align: center; line-height: 1.8;
}
@media (max-width: 720px) { .jp-method-grid { grid-template-columns: 1fr; } }

/* [N8] 절차 번호 스텝 */
.jp-steps { list-style: none; margin: 0; padding: 0; max-width: 560px; margin-inline: auto; }
.jp-step-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(184,155,94,0.2); }
.jp-step-item:last-child { border-bottom: none; }
.jp-step-num {
  flex: 0 0 32px; height: 32px; border-radius: 50%;
  background: var(--gold); color: #fff;
  font-size: 0.95rem; display: flex; align-items: center; justify-content: center;
  font-family: "Shippori Mincho", serif;
}
.jp-step-t { font-family: "Shippori Mincho", serif; font-size: 0.98rem; color: var(--ink); margin: 2px 0 4px; }
.jp-step-d { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.7; margin: 0; }

/* ============================================================
   [v2] 과감한 시각 레이어 — 2026-08-11
   먹색 다크 반전 섹션 · 히어로 별하늘/커버 팬 · 아이콘 · FAQ
   팔레트는 브랜드 유지(아이보리+골드+먹색) — 채도만 과감하게
   ============================================================ */

/* 히어로: 은은한 별하늘(아이보리 위 골드 파티클) */
.jp-hero {
  position: relative;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(184,155,94,0.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 64%, rgba(184,155,94,0.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 12%, rgba(184,155,94,0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 42%, rgba(184,155,94,0.35) 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 18%, rgba(184,155,94,0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 58%, rgba(184,155,94,0.4) 50%, transparent 51%),
    radial-gradient(ellipse at 70% 0%, rgba(217,199,154,0.35), transparent 55%),
    var(--bg-ivory);
}

/* 히어로 커버 팬 갤러리 — 실물 3부 (매번 다른 그림 증명)
   ⚠️전 규칙을 .jp-hero-covers로 스코프: v1 .jp-hero-art img(0,1,1)를 이기고(0,2,0~),
   proof 섹션의 jp-cover-l/r 재사용 클래스(jp-shot 계열)로 누출 방지 (최종검수 반영) */
.jp-hero-covers { position: relative; width: 100%; max-width: 430px; margin-inline: auto; aspect-ratio: 4/5; }
.jp-hero-covers .jp-cover {
  position: absolute; top: 0; width: 74%; max-width: none; height: auto;
  border-radius: 10px;
  border: 1px solid var(--gold-soft);
  box-shadow: 0 16px 40px rgba(58,50,38,0.22);
  background: var(--bg-paper);
  transform: none; filter: none;
}
.jp-hero-covers .jp-cover-c { left: 13%; z-index: 3; transform: rotate(0.6deg); }
.jp-hero-covers .jp-cover-l { left: -4%; top: 6%; z-index: 2; transform: rotate(-7deg) scale(0.92); filter: brightness(0.97); }
.jp-hero-covers .jp-cover-r { right: -4%; top: 7%; z-index: 1; transform: rotate(7.5deg) scale(0.9); filter: brightness(0.95); }
.jp-hero-covers:hover .jp-cover-l { transform: rotate(-9deg) scale(0.93) translateX(-6px); transition: transform .4s ease; }
.jp-hero-covers:hover .jp-cover-r { transform: rotate(9deg) scale(0.91) translateX(6px); transition: transform .4s ease; }

/* 신뢰 스트립 — 아이콘형 3열 */
.jp-truststrip { padding: 16px 14px; }
.jp-ts-items { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; }
.jp-ts-item { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--ink); }
.jp-ico { width: 19px; height: 19px; color: var(--gold); flex: 0 0 auto; }

/* 다크 반전 섹션(먹색 밤하늘) — method 전용. 상하 패딩 필수(전역 리셋으로 0이 됨 — 최종검수) */
.jp-dark {
  padding-top: 52px;
  padding-bottom: 48px;
  background:
    radial-gradient(1.5px 1.5px at 16% 26%, rgba(217,199,154,0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 70%, rgba(217,199,154,0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 16%, rgba(217,199,154,0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 52%, rgba(217,199,154,0.3) 50%, transparent 51%),
    radial-gradient(2px 2px at 86% 30%, rgba(217,199,154,0.4) 50%, transparent 51%),
    linear-gradient(180deg, #2E2822, #241F1A);
}
.jp-dark .jp-section-title { color: var(--gold-soft); }
.jp-dark .jp-section-title::after { background: var(--gold); }
.jp-dark .jp-method-card {
  background: rgba(253,250,243,0.05);
  border: 1px solid rgba(217,199,154,0.28);
  box-shadow: none;
  backdrop-filter: blur(2px);
}
.jp-dark .jp-method-num {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold); color: var(--gold);
  font-size: 1.15rem; margin-bottom: 10px;
}
.jp-dark .jp-method-t { color: #F3EBDB; }
.jp-dark .jp-method-d { color: rgba(243,235,219,0.75); }
.jp-dark .jp-method-origin { color: rgba(243,235,219,0.65); }

/* 가격 카드 — 골드 상단 보더 + 부양 */
.jp-price-card {
  border-top: 3px solid var(--gold);
  box-shadow: 0 12px 30px rgba(58,50,38,0.10);
  transition: transform .25s ease;
}
.jp-price-card:hover { transform: translateY(-3px); }

/* FAQ */
.jp-faq { max-width: 640px; margin-inline: auto; }
.jp-faq-item {
  background: var(--bg-paper);
  border: 1px solid var(--gold-soft);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.jp-faq-item summary {
  cursor: pointer; list-style: none;
  padding: 15px 44px 15px 18px;
  font-size: 0.94rem; color: var(--ink);
  font-family: "Shippori Mincho", serif;
  position: relative;
}
.jp-faq-item summary::-webkit-details-marker { display: none; }
.jp-faq-item summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%);
  color: var(--gold); font-size: 1.2rem; font-weight: 300;
  transition: transform .2s ease;
}
.jp-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.jp-faq-item[open] summary { border-bottom: 1px dashed rgba(184,155,94,0.3); }
.jp-faq-item p {
  margin: 0; padding: 14px 18px 16px;
  font-size: 0.88rem; color: var(--ink-soft); line-height: 1.85;
}
.jp-faq-item p + p { padding-top: 0; }
.jp-faq-link { color: var(--cta); font-size: 0.84rem; text-decoration: underline; }

/* 미리보기 카드 — v2 강조: 골드 이중 프레임 */
.jp-preview-card {
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(184,155,94,0.12), 0 14px 34px rgba(58,50,38,0.12);
}

/* 절차 스텝 — 라인 연결 */
.jp-steps { position: relative; }
.jp-step-item { position: relative; }
.jp-step-item:not(:last-child)::before {
  content: ""; position: absolute; left: 15px; top: 46px; bottom: -14px;
  width: 1px; background: linear-gradient(180deg, var(--gold-soft), transparent);
}

@media (max-width: 720px) {
  .jp-ts-items { gap: 10px; flex-direction: column; align-items: center; }
  .jp-hero-covers { max-width: 340px; }
}

/* ============================================================
   [v3] 벤치 껍데기 정밀 모사 — 상품 카드 2장·타이포 스케일·스티키 CTA
   (사주관: 커버 카드+훅+마스킹 목차+하단 고정 CTA / 용용: 태그 칩+질문 훅)
   ============================================================ */

/* 타이포 스케일 업 — 벤치급 위계 (v1: 히어로 44px·타이틀 30px 대비 상향) */
.jp-hero-main { font-size: clamp(2.15rem, 5vw, 3.1rem); line-height: 1.4; letter-spacing: 0.01em; }
.jp-section-title { font-size: clamp(1.7rem, 3.4vw, 2.1rem); letter-spacing: 0.05em; }

/* 상품 카드 2장 */
.jp-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 860px; margin-inline: auto; }
@media (max-width: 720px) { .jp-products { grid-template-columns: 1fr; } }
.jp-product-card {
  background: var(--bg-paper);
  border: 1px solid var(--gold-soft);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(58,50,38,0.12);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.jp-product-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(58,50,38,0.18); }

.jp-product-art { position: relative; }
.jp-product-art img { width: 100%; height: auto; display: block; aspect-ratio: 3/3.2; object-fit: cover; object-position: top; }
.jp-product-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,36,32,0.18) 0%, rgba(42,36,32,0) 30%, rgba(42,36,32,0) 45%, rgba(42,36,32,0.72) 100%);
}
.jp-product-chips { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 6px; }
.jp-chip {
  font-size: 0.72rem; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.04em;
}
.jp-chip-tag { background: rgba(42,36,32,0.72); color: var(--gold-soft); border: 1px solid rgba(217,199,154,0.5); }
.jp-chip-free { background: var(--gold); color: #fff; }
.jp-product-hook {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2;
  margin: 0;
  font-family: "Shippori Mincho", serif;
  font-size: 1.18rem; line-height: 1.6; color: #FDFAF3;
  white-space: pre-line;
  text-shadow: 0 1px 10px rgba(42,36,32,0.65);
}

.jp-product-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.jp-product-toc-title { font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.08em; margin: 0 0 8px; }
.jp-product-toc { list-style: none; margin: 0 0 12px; padding: 0; }
.jp-product-toc li {
  position: relative; padding: 8px 0 8px 22px;
  font-size: 0.9rem; color: var(--ink);
  border-bottom: 1px solid rgba(184,155,94,0.18);
}
.jp-product-toc li:last-child { border-bottom: none; }
.jp-product-toc li::before {
  content: ""; position: absolute; left: 2px; top: 14px;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--gold); opacity: 0.75;
  transform: rotate(45deg);
}
/* 콘텐츠 사전 고지 (相性の体の章) — 목차와 가격 사이, 눈에 띄되 압도하지 않는 크기 */
.jp-product-note { font-size: 0.72rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 10px; }
.jp-product-price { font-family: "Shippori Mincho", serif; font-size: 0.95rem; color: var(--ink); margin: 0 0 12px; }
.jp-product-cta { margin-top: auto; text-align: center; padding: 13px 16px; border-radius: 10px; }

/* 스티키 CTA 바 (모바일) — 사주관 하단 고정 CTA 문법. 히어로 이탈 후 표시 */
.jp-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(253,250,243,0.96);
  border-top: 1px solid var(--gold-soft);
  box-shadow: 0 -8px 24px rgba(58,50,38,0.12);
  display: none;
  transform: translateY(100%);
  transition: transform .3s ease;
}
.jp-sticky-cta.is-visible { transform: translateY(0); }
.jp-sticky-cta .jp-btn { display: block; width: 100%; text-align: center; padding: 13px 16px; border-radius: 10px; }
.jp-sticky-note { margin: 6px 0 0; text-align: center; font-size: 0.72rem; color: var(--ink-soft); }
@media (max-width: 720px) { .jp-sticky-cta { display: block; } }

/* [메일 우선] 무료 폼 — 미리보기 인계 요약 칩 */
.jp-prefill {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: rgba(184,155,94,0.10);
  border: 1px solid var(--gold-soft, #D9C79A);
  border-radius: 10px;
}
.jp-prefill-ico {
  width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: 50%; background: var(--gold, #B89B5E); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
}
.jp-prefill-text { flex: 1; font-size: 0.92rem; color: var(--ink, #3A3226); }
.jp-prefill-edit {
  background: none; border: none; cursor: pointer; padding: 4px;
  font-size: 0.8rem; color: var(--ink-soft, #6B6152); text-decoration: underline;
}