/* ============================================================
   SAJUROK · Observatory page compositions
   Guide, product landings and Wealth DNA share surface.
   Structural information stays in HTML; imagery supplies space/material.
   ============================================================ */

body.obs-site {
  --obs-page-max: 1380px;
  --obs-pad: clamp(20px, 4vw, 64px);
  --obs-section-gap: clamp(72px, 10vw, 144px);
}

body.obs-site .obs-keyframe {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--obs-line-strong);
  border-bottom-color: rgba(194, 165, 107, 0.48);
  background: #080a0b;
  box-shadow: 0 34px 72px -46px rgba(0, 0, 0, 0.92);
  isolation: isolate;
}

body.obs-site .obs-keyframe::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 10, 11, 0.26), transparent 40%),
    linear-gradient(180deg, transparent 64%, rgba(8, 10, 11, 0.82));
}

body.obs-site .obs-keyframe img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  filter: saturate(0.76) contrast(1.06);
  transition: transform 700ms cubic-bezier(.2,.7,.2,1), filter 300ms ease;
}

body.obs-site .obs-keyframe:hover img {
  transform: scale(1.012);
  filter: saturate(0.82) contrast(1.08);
}

/* Guide: index on the left, paper-and-wood archive on the right. */
body.obs-site[data-page="guide"] .gd-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 44px);
  align-items: start;
  padding-bottom: 0;
}

body.obs-site[data-page="guide"] .gd-hero > .kicker,
body.obs-site[data-page="guide"] .gd-hero > .chi,
body.obs-site[data-page="guide"] .gd-hero > h1,
body.obs-site[data-page="guide"] .gd-hero > .lede,
body.obs-site[data-page="guide"] .gd-hero > .byline {
  grid-column: 1 / span 5;
}

body.obs-site[data-page="guide"] .gd-hero > .kicker { margin-top: 8px; }
body.obs-site[data-page="guide"] .gd-hero > h1 {
  max-width: 650px;
  margin-top: 22px;
  font-size: clamp(42px, 5.5vw, 76px);
  line-height: 1.08;
}

body.obs-site[data-page="guide"] .gd-hero > .lede {
  max-width: 570px;
  margin-top: 26px;
  color: var(--obs-ink-2);
}

body.obs-site[data-page="guide"] .obs-guide-keyframe {
  grid-column: 6 / -1;
  grid-row: 1 / span 6;
  min-height: 610px;
}

body.obs-site[data-page="guide"] .obs-guide-keyframe img,
body.obs-site[data-page="product-saju"] .obs-saju-keyframe img,
body.obs-site[data-page="product-gunghap"] .obs-gunghap-keyframe img,
body.obs-site[data-page="product-yearly"] .obs-yearly-keyframe img {
  height: 610px;
  min-height: 610px;
}

body.obs-site[data-page="guide"] .gd-toc {
  grid-column: 1 / -1;
  margin-top: clamp(42px, 6vw, 76px);
  border-color: var(--obs-line-strong);
  background: #101315;
}

body.obs-site[data-page="guide"] .gd-toc li {
  min-height: 52px;
  border-color: var(--obs-line);
  background: transparent;
}

body.obs-site[data-page="guide"] .gd-toc li:hover { background: var(--obs-surface-2); }
body.obs-site[data-page="guide"] .gd-toc a { color: var(--obs-ink); }
body.obs-site[data-page="guide"] .gd-toc .n { color: var(--obs-brass); }
body.obs-site[data-page="guide"] .gd-toc .d { color: var(--obs-ink-3); }

body.obs-site[data-page="guide"] .gd-howto {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--obs-line);
  background: var(--obs-line);
}

body.obs-site[data-page="guide"] .gd-step {
  grid-column: span 3;
  min-height: 320px;
  border: 0;
  background: var(--obs-surface);
}

body.obs-site[data-page="guide"] .gd-step:nth-child(2),
body.obs-site[data-page="guide"] .gd-step:nth-child(4) { background: #101416; }
body.obs-site[data-page="guide"] .gd-step .stepnum { color: var(--obs-brass); }
body.obs-site[data-page="guide"] .gd-step .cta { color: var(--obs-brass-2); }

body.obs-site[data-page="guide"] .gd-concept {
  border-color: var(--obs-line);
  background: transparent;
}

body.obs-site[data-page="guide"] .gd-concept .gd-visual {
  border-color: var(--obs-line-strong);
  background: #0e1113;
}

/* Product hero composition shared across three reports. */
body.obs-site[data-page="product-saju"] .pro-hero,
body.obs-site[data-page="product-gunghap"] .pg-hero,
body.obs-site[data-page="product-yearly"] .py-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 44px);
  align-items: start;
  max-width: var(--obs-page-max);
}

body.obs-site[data-page="product-saju"] .pro-hero {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--obs-page-max);
  padding-inline: var(--obs-pad);
  padding-top: clamp(58px, 8vw, 100px);
  padding-bottom: 80px;
}

body.obs-site[data-page="product-saju"] .pro-hero > .pills,
body.obs-site[data-page="product-saju"] .pro-hero > h1,
body.obs-site[data-page="product-saju"] .pro-hero > .C-lead {
  grid-column: 1 / span 5;
}

body.obs-site[data-page="product-saju"] .pro-hero > h1 {
  margin-top: 28px;
  max-width: 620px !important;
  font-size: clamp(46px, 6.4vw, 88px) !important;
  line-height: 1.04;
}

body.obs-site[data-page="product-saju"] .pro-hero > .C-lead {
  max-width: 560px;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.72;
}

body.obs-site[data-page="product-saju"] .obs-saju-keyframe {
  grid-column: 6 / -1;
  grid-row: 1 / span 4;
  min-height: 610px;
}

body.obs-site[data-page="product-saju"] .layout {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(330px, .72fr);
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(64px, 9vw, 126px);
  align-items: start;
}

body.obs-site[data-page="product-saju"] .parts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--obs-line);
  background: var(--obs-line);
}

body.obs-site[data-page="product-saju"] .part {
  display: block;
  min-height: 390px;
  padding: clamp(26px, 3vw, 42px);
  border: 0;
  background: var(--obs-surface);
}

body.obs-site[data-page="product-saju"] .part:nth-child(2),
body.obs-site[data-page="product-saju"] .part:nth-child(3) { background: #101416; }
body.obs-site[data-page="product-saju"] .part-n {
  margin-bottom: 52px;
  color: var(--obs-brass);
  font-size: 13px;
  letter-spacing: .2em;
}
body.obs-site[data-page="product-saju"] .part h3 { font-size: clamp(22px, 2.2vw, 32px); }
body.obs-site[data-page="product-saju"] .part ul { margin-top: 28px; }
body.obs-site[data-page="product-saju"] .part ul li { border-color: var(--obs-line); }

body.obs-site[data-page="product-saju"] .checkout {
  top: 94px;
  padding: 34px;
  border-top: 1px solid rgba(194, 165, 107, .72);
  background: #111416;
}

body.obs-site[data-page="product-saju"] .checkout::after { box-shadow: 0 8px 22px rgba(0,0,0,.35); }
body.obs-site[data-page="product-saju"] .checkout .price .now { color: var(--obs-brass-2); }
body.obs-site[data-page="product-saju"] .checkout .cta { grid-template-columns: .8fr 1.4fr; }

body.obs-site[data-page="product-gunghap"] .pg-hero > .pg-hero-kicker,
body.obs-site[data-page="product-gunghap"] .pg-hero > h1,
body.obs-site[data-page="product-gunghap"] .pg-hero > .pg-hero-sub {
  grid-column: 1 / span 5;
}

body.obs-site[data-page="product-gunghap"] .pg-hero > h1,
body.obs-site[data-page="product-yearly"] .py-hero > h1 {
  font-size: clamp(46px, 6.4vw, 88px);
  line-height: 1.04;
}

body.obs-site[data-page="product-gunghap"] .obs-gunghap-keyframe {
  grid-column: 6 / -1;
  grid-row: 1 / span 5;
  min-height: 610px;
}

body.obs-site[data-page="product-gunghap"] .pg-hero-seal { display: none; }

body.obs-site[data-page="product-yearly"] .py-hero > .py-hero-kicker,
body.obs-site[data-page="product-yearly"] .py-hero > h1,
body.obs-site[data-page="product-yearly"] .py-hero > .py-hero-sub,
body.obs-site[data-page="product-yearly"] .py-hero > .py-year-plate {
  grid-column: 1 / span 5;
}

body.obs-site[data-page="product-yearly"] .obs-yearly-keyframe {
  grid-column: 6 / -1;
  grid-row: 1 / span 6;
  min-height: 610px;
}

body.obs-site[data-page="product-yearly"] #landing-mode > .v2-wrap-narrow {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--obs-page-max);
  padding-inline: var(--obs-pad);
}

body.obs-site[data-page="product-yearly"] .py-year-plate {
  width: 100%;
  border-color: var(--obs-line-strong);
  background: #101315;
}

body.obs-site[data-page="product-yearly"] .py-year-plate .cell { border-color: var(--obs-line); }
body.obs-site[data-page="product-yearly"] .py-year-plate .big { background: var(--obs-surface-2); }

body.obs-site[data-page="product-gunghap"] .pg-ribbon,
body.obs-site[data-page="product-yearly"] .py-ribbon {
  margin-top: clamp(54px, 7vw, 92px);
  border-top: 1px solid rgba(194, 165, 107, .65);
  background: #0e1113;
}

body.obs-site[data-page="product-gunghap"] .pg-ribbon::after,
body.obs-site[data-page="product-yearly"] .py-ribbon::after { display: none; }

body.obs-site[data-page="product-gunghap"] .pg-vs-col,
body.obs-site[data-page="product-yearly"] .py-vs-col,
body.obs-site[data-page="product-gunghap"] .pg-preview,
body.obs-site[data-page="product-yearly"] .py-preview,
body.obs-site[data-page="product-gunghap"] .pg-why-item,
body.obs-site[data-page="product-yearly"] .py-why-item {
  border-color: var(--obs-line-strong);
  background: var(--obs-surface);
  box-shadow: none;
}

body.obs-site[data-page="product-gunghap"] .pg-secgrid,
body.obs-site[data-page="product-yearly"] .py-secgrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

body.obs-site[data-page="product-gunghap"] .pg-secgrid > *,
body.obs-site[data-page="product-yearly"] .py-secgrid > * {
  grid-column: span 3;
  min-height: 176px;
  padding: clamp(20px, 2.3vw, 30px);
}

body.obs-site[data-page="product-gunghap"] .pg-secgrid > :nth-child(1),
body.obs-site[data-page="product-gunghap"] .pg-secgrid > :nth-child(6),
body.obs-site[data-page="product-gunghap"] .pg-secgrid > :nth-child(11),
body.obs-site[data-page="product-yearly"] .py-secgrid > :nth-child(1),
body.obs-site[data-page="product-yearly"] .py-secgrid > :nth-child(6) {
  grid-column: span 6;
  background: #101416;
}

/* Wealth result and downloadable card stay in the same dark world. */
body.obs-site[data-page="wealth"] .wl-dna {
  overflow: hidden;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid var(--obs-line-strong);
  border-top-color: rgba(194, 165, 107, .68);
  background:
    linear-gradient(135deg, rgba(194,165,107,.055), transparent 38%),
    #0d1012;
  color: var(--obs-ink);
}

body.obs-site[data-page="wealth"] .wl-dna::before {
  content: "OBSERVATION RECORD";
  position: absolute;
  top: 26px;
  right: 28px;
  color: rgba(194,165,107,.28);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .22em;
}

body.obs-site[data-page="wealth"] .wl-dna-stage {
  margin-top: 34px;
  padding: clamp(20px, 4vw, 48px);
  border: 1px solid var(--obs-line);
  background:
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 72px 72px,
    #080a0b;
}

body.obs-site[data-page="wealth"] .wl-dna h2 { color: var(--obs-ink); }
body.obs-site[data-page="wealth"] .wl-dna-sub { color: var(--obs-ink-2); }

body.obs-site[data-page="wealth"] .wl-dna-canvas-wrap {
  width: min(100%, 520px);
  margin-inline: auto;
  padding: 0;
  border: 1px solid rgba(194,165,107,.32);
  background: #0a0c0e;
  box-shadow: 0 38px 76px -42px rgba(0,0,0,.95);
}

body.obs-site[data-page="wealth"] .wl-dna-canvas-wrap canvas {
  display: block;
  width: 100% !important;
  height: auto !important;
}

body.obs-site[data-page="wealth"] .wl-dna-actions {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 8px;
  max-width: 760px;
  margin: 24px auto 0;
}

body.obs-site[data-page="wealth"] .wl-dna-meta {
  margin-top: 16px;
  color: var(--obs-ink-3);
  text-align: center;
}

@media (max-width: 980px) {
  body.obs-site[data-page="guide"] .gd-hero > .kicker,
  body.obs-site[data-page="guide"] .gd-hero > .chi,
  body.obs-site[data-page="guide"] .gd-hero > h1,
  body.obs-site[data-page="guide"] .gd-hero > .lede,
  body.obs-site[data-page="guide"] .gd-hero > .byline,
  body.obs-site[data-page="product-saju"] .pro-hero > .pills,
  body.obs-site[data-page="product-saju"] .pro-hero > h1,
  body.obs-site[data-page="product-saju"] .pro-hero > .C-lead,
  body.obs-site[data-page="product-gunghap"] .pg-hero > .pg-hero-kicker,
  body.obs-site[data-page="product-gunghap"] .pg-hero > h1,
  body.obs-site[data-page="product-gunghap"] .pg-hero > .pg-hero-sub,
  body.obs-site[data-page="product-yearly"] .py-hero > .py-hero-kicker,
  body.obs-site[data-page="product-yearly"] .py-hero > h1,
  body.obs-site[data-page="product-yearly"] .py-hero > .py-hero-sub,
  body.obs-site[data-page="product-yearly"] .py-hero > .py-year-plate,
  body.obs-site[data-page="guide"] .obs-guide-keyframe,
  body.obs-site[data-page="product-saju"] .obs-saju-keyframe,
  body.obs-site[data-page="product-gunghap"] .obs-gunghap-keyframe,
  body.obs-site[data-page="product-yearly"] .obs-yearly-keyframe {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  body.obs-site[data-page="guide"] .obs-guide-keyframe,
  body.obs-site[data-page="product-saju"] .obs-saju-keyframe,
  body.obs-site[data-page="product-gunghap"] .obs-gunghap-keyframe,
  body.obs-site[data-page="product-yearly"] .obs-yearly-keyframe {
    min-height: 0;
    margin-top: 34px;
  }

  body.obs-site .obs-keyframe img { min-height: 0; aspect-ratio: 16 / 10; }
  body.obs-site[data-page="guide"] .obs-guide-keyframe img,
  body.obs-site[data-page="product-saju"] .obs-saju-keyframe img,
  body.obs-site[data-page="product-gunghap"] .obs-gunghap-keyframe img,
  body.obs-site[data-page="product-yearly"] .obs-yearly-keyframe img {
    height: auto;
    min-height: 0;
  }
  body.obs-site[data-page="product-saju"] .layout { grid-template-columns: 1fr; }
  body.obs-site[data-page="product-saju"] .checkout { position: static; }
  body.obs-site[data-page="guide"] .gd-step { grid-column: span 6; min-height: 280px; }
  body.obs-site[data-page="product-gunghap"] .pg-secgrid > *,
  body.obs-site[data-page="product-yearly"] .py-secgrid > * { grid-column: span 6; }
}

@media (max-width: 640px) {
  body.obs-site[data-page="guide"] .gd-hero,
  body.obs-site[data-page="product-saju"] .pro-hero,
  body.obs-site[data-page="product-gunghap"] .pg-hero,
  body.obs-site[data-page="product-yearly"] .py-hero { display: block; }

  body.obs-site[data-page="guide"] .gd-hero > h1,
  body.obs-site[data-page="product-saju"] .pro-hero > h1,
  body.obs-site[data-page="product-gunghap"] .pg-hero > h1,
  body.obs-site[data-page="product-yearly"] .py-hero > h1 {
    font-size: clamp(40px, 13vw, 58px) !important;
  }

  body.obs-site .obs-keyframe figcaption { align-items: flex-end; flex-direction: column; }
  body.obs-site[data-page="guide"] .gd-step,
  body.obs-site[data-page="product-gunghap"] .pg-secgrid > *,
  body.obs-site[data-page="product-yearly"] .py-secgrid > * { grid-column: 1 / -1; }
  body.obs-site[data-page="product-saju"] .parts { grid-template-columns: 1fr; }
  body.obs-site[data-page="product-saju"] .part { min-height: 0; }
  body.obs-site[data-page="product-saju"] .checkout .cta,
  body.obs-site[data-page="wealth"] .wl-dna-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  body.obs-site .obs-keyframe img { transition: none; }
  body.obs-site .obs-keyframe:hover img { transform: none; }
}