/* ============================================================
   SAJUROK · Scientific Myeongri Observatory
   Shared visual layer for public web pages
   IA, copy, form names, IDs and application logic remain intact.
   ============================================================ */

body.obs-site {
  --obs-space: #0a0c0e;
  --obs-space-2: #0f1214;
  --obs-surface: #14181b;
  --obs-surface-2: #1a1f22;
  --obs-surface-3: #22282c;
  --obs-ink: #eeeae1;
  --obs-ink-2: #c8c3b8;
  --obs-ink-3: #918d84;
  --obs-brass: #c2a56b;
  --obs-brass-2: #e0c488;
  --obs-seal: #a9473f;
  --obs-line: rgba(226, 214, 190, 0.14);
  --obs-line-strong: rgba(226, 214, 190, 0.28);
  --obs-shadow: rgba(0, 0, 0, 0.36);

  /* Legacy token bridge */
  --C-paper: var(--obs-space);
  --C-paper-2: var(--obs-surface);
  --C-paper-3: var(--obs-surface-2);
  --C-ink: var(--obs-ink);
  --C-ink-2: var(--obs-ink-2);
  --C-ink-3: var(--obs-ink-3);
  --C-line: var(--obs-line);
  --C-line-2: var(--obs-line-strong);
  --C-gold: var(--obs-brass);
  --C-gold-2: var(--obs-brass-2);
  --C-seal: var(--obs-seal);
  --gold: var(--obs-brass);
  --text: var(--obs-ink);
  --text-muted: var(--obs-ink-2);
  --text-dim: var(--obs-ink-3);
  --white: var(--obs-ink);
  --card: var(--obs-surface);
  --border: var(--obs-line);
  --border-purple: var(--obs-line);

  min-height: 100dvh;
  color: var(--obs-ink);
  background: var(--obs-space);
  font-family: var(--font-sans);
  color-scheme: dark;
}

html:has(body.obs-site) {
  color-scheme: dark;
  background: #0a0c0e;
  scroll-padding-top: 86px;
}

body.obs-site button,
body.obs-site a,
body.obs-site input,
body.obs-site select,
body.obs-site textarea { touch-action: manipulation; }

body.obs-site .obs-skip {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  color: var(--obs-space);
  background: var(--obs-brass-2);
  transform: translateY(-160%);
  transition: transform 160ms var(--ease-out);
}
body.obs-site .obs-skip:focus { transform: translateY(0); }

body.obs-site:not([data-page="home"])::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: -2;
  height: min(82dvh, 920px);
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 10, 12, 0.12), var(--obs-space) 88%),
    linear-gradient(90deg, rgba(8, 10, 12, 0.2), rgba(8, 10, 12, 0.72));
  /* 2026-10-30: 배경 사진 제거. observatory-site.css가 이 ::before를 content:none으로 끄는데, 이 파일이 먼저 도착하면
     206KB 사진을 받기 시작해 모바일에서 첫 화면 이미지와 대역폭을 다퉜다. */
  opacity: 0.34;
  filter: saturate(0.72) contrast(1.08);
}

body.obs-site:not([data-page="home"])::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
}

body.obs-site ::selection {
  color: var(--obs-space);
  background: var(--obs-brass-2);
}

body.obs-site :focus-visible {
  outline: 2px solid var(--obs-brass-2);
  outline-offset: 3px;
}

body.obs-site main {
  position: relative;
}

/* ---------- Shared chrome ---------- */
body.obs-site .v2-nav {
  min-height: 70px;
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--obs-line);
  background: rgba(10, 12, 14, 0.96);
  backdrop-filter: none;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.16);
}

body.obs-site .v2-nav-inner {
  min-height: 70px;
  max-width: 1400px;
  padding-block: 11px;
}

body.obs-site .v2-logo-svg > text { fill: var(--obs-ink); }
body.obs-site .v2-logo-svg g text { fill: #f0e8d9; }
body.obs-site .v2-logo-svg g rect:first-child { fill: var(--obs-seal); }

body.obs-site .v2-nav-links { gap: clamp(14px, 1.45vw, 24px); }
body.obs-site .v2-nav-links a {
  color: var(--obs-ink-3);
  font-size: 12px;
  letter-spacing: -0.01em;
}
body.obs-site .v2-nav-links a:hover,
body.obs-site .v2-nav-links a.is-active { color: var(--obs-ink); }
body.obs-site .v2-nav-links a.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -17px;
  left: 0;
  height: 1px;
  background: var(--obs-brass);
}

body.obs-site .v2-nav-ghost,
body.obs-site .v2-nav-cta {
  min-height: 38px;
  padding: 9px 15px;
  border: 1px solid var(--obs-line-strong);
  border-radius: 2px;
  color: var(--obs-ink);
  background: #111518;
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
body.obs-site .v2-nav-cta {
  border-color: rgba(194, 165, 107, 0.7);
  box-shadow: inset 3px 0 0 var(--obs-brass);
}
body.obs-site .v2-nav-ghost:hover,
body.obs-site .v2-nav-cta:hover {
  color: var(--obs-ink);
  border-color: var(--obs-brass-2);
  background: var(--obs-surface-2);
}

body.obs-site .v2-tabbar {
  border-top-color: var(--obs-line-strong);
  background: rgba(10, 12, 14, 0.98);
  backdrop-filter: none;
}
body.obs-site .v2-tab { color: var(--obs-ink-3); }
body.obs-site .v2-tab.is-active { color: var(--obs-ink); }
body.obs-site .v2-tab.is-active::before { background: var(--obs-brass); }

body.obs-site .v2-foot {
  max-width: 1400px;
  margin: 96px auto 0;
  border-top-color: var(--obs-line);
  color: var(--obs-ink-3);
}
body.obs-site .v2-foot-top nav a { color: var(--obs-ink-2); }
body.obs-site .v2-foot-top nav a:hover { color: var(--obs-brass-2); }

@media (min-width: 768px) and (max-width: 1179px) {
  body.obs-site .v2-nav-links { display: none; }
  body.obs-site .v2-tabbar { display: grid; }
  body.obs-site.v2-body { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px); }
}
@media (min-width: 1180px) {
  body.obs-site .v2-nav-links { display: flex; }
  body.obs-site .v2-tabbar { display: none; }
  body.obs-site.v2-body { padding-bottom: 0; }
}

/* ---------- Type and page headers ---------- */
body.obs-site .v2-kicker,
body.obs-site [class$="-kicker"],
body.obs-site [class$="__eyebrow"] {
  color: var(--obs-brass);
}

body.obs-site .v2-kicker::before { background: var(--obs-brass); }
body.obs-site .v2-h1,
body.obs-site .v2-h2,
body.obs-site .v2-h3,
body.obs-site .C-h1 { color: var(--obs-ink); }
body.obs-site .v2-h1 em,
body.obs-site .v2-h2 em,
body.obs-site .C-h1 em { color: var(--obs-brass-2); }
body.obs-site .v2-h1 .hanja { color: var(--obs-seal); }
body.obs-site .v2-lead,
body.obs-site .C-lead { color: var(--obs-ink-2); }

body.obs-site .palja-hero,
body.obs-site .compat-hero,
body.obs-site .wl-hero,
body.obs-site .td-hero,
body.obs-site .pg-hero,
body.obs-site .py-hero,
body.obs-site .prod-hero,
body.obs-site .gd-hero,
body.obs-site .mr-hero,
body.obs-site .column-hero,
body.obs-site .ijx-hero,
body.obs-site .ij-hero,
body.obs-site .r-head,
body.obs-site .rd-hero {
  position: relative;
  padding-top: clamp(52px, 8vw, 96px);
}

body.obs-site .palja-hero::after,
body.obs-site .compat-hero::after,
body.obs-site .wl-hero::after,
body.obs-site .td-hero::after,
body.obs-site .pg-hero::after,
body.obs-site .py-hero::after,
body.obs-site .gd-hero::after,
body.obs-site .mr-hero::after,
body.obs-site .column-hero::after {
  content: "";
  display: block;
  width: min(220px, 32vw);
  height: 1px;
  margin-top: 28px;
  background: linear-gradient(90deg, var(--obs-brass), transparent);
}

/* ---------- Buttons ---------- */
body.obs-site .v2-btn,
body.obs-site .C-btn,
body.obs-site .btn,
body.obs-site .btn-buy,
body.obs-site .btn-sample,
body.obs-site .btn-primary,
body.obs-site .btn-ghost,
body.obs-site .conversion-primary,
body.obs-site .conversion-secondary,
body.obs-site .cta-box-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 2px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}

body.obs-site .v2-btn-primary,
body.obs-site .v2-btn-gold,
body.obs-site .C-btn,
body.obs-site .btn-buy,
body.obs-site .btn-primary,
body.obs-site .conversion-primary,
body.obs-site .cta-box-action {
  color: var(--obs-ink);
  border: 1px solid rgba(194, 165, 107, 0.72);
  background:
    linear-gradient(180deg, rgba(194, 165, 107, 0.12), rgba(194, 165, 107, 0.025)),
    #101417;
  box-shadow: inset 0 1px 0 rgba(238, 220, 177, 0.12), 0 12px 30px rgba(0, 0, 0, 0.18);
}

body.obs-site .v2-btn-ghost,
body.obs-site .v2-btn-outline,
body.obs-site .btn-sample,
body.obs-site .btn-ghost,
body.obs-site .conversion-secondary {
  color: var(--obs-ink-2);
  border: 1px solid var(--obs-line-strong);
  background: rgba(15, 18, 20, 0.72);
  box-shadow: none;
}

body.obs-site .v2-btn:hover,
body.obs-site .C-btn:hover,
body.obs-site .btn:hover,
body.obs-site .btn-buy:hover,
body.obs-site .btn-sample:hover,
body.obs-site .btn-primary:hover,
body.obs-site .btn-ghost:hover,
body.obs-site .conversion-primary:hover,
body.obs-site .conversion-secondary:hover,
body.obs-site .cta-box-action:hover {
  color: var(--obs-ink);
  border-color: var(--obs-brass-2);
  background: var(--obs-surface-2);
  transform: translateY(-1px);
}

body.obs-site .v2-btn:active,
body.obs-site .C-btn:active,
body.obs-site .btn:active,
body.obs-site .btn-buy:active,
body.obs-site .btn-sample:active { transform: translateY(1px); }

body.obs-site button:disabled,
body.obs-site .v2-btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

body.obs-site .v2-share {
  border-color: var(--obs-line);
  background: var(--obs-surface);
}
body.obs-site .v2-share-btn {
  color: var(--obs-ink-2);
  border-color: var(--obs-line-strong);
  background: var(--obs-space-2);
}
body.obs-site .v2-share-btn:hover {
  color: var(--obs-ink);
  border-color: var(--obs-brass);
  background: var(--obs-surface-2);
}
body.obs-site .v2-share-btn.kakao {
  color: #1b1b1b;
  border-color: #f3d900;
  background: #f3d900;
}

/* ---------- Forms and controls ---------- */
body.obs-site .field label,
body.obs-site .field .lbl,
body.obs-site .fld label { color: var(--obs-ink-2); }

body.obs-site input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
body.obs-site select,
body.obs-site textarea {
  min-height: 48px;
  color: var(--obs-ink);
  caret-color: var(--obs-brass-2);
  border: 1px solid var(--obs-line-strong);
  border-radius: 2px;
  background: #0f1214;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
body.obs-site input::placeholder,
body.obs-site textarea::placeholder { color: #77756f; opacity: 1; }
body.obs-site input:not([type="radio"]):not([type="checkbox"]):focus,
body.obs-site select:focus,
body.obs-site textarea:focus {
  outline: none;
  color: var(--obs-ink);
  border-color: var(--obs-brass-2);
  background: #121619;
  box-shadow: 0 0 0 3px rgba(194, 165, 107, 0.13);
}

body.obs-site .seg,
body.obs-site .ptab {
  border-color: var(--obs-line-strong);
  border-radius: 2px;
  background: var(--obs-space-2);
}
body.obs-site .seg label,
body.obs-site .seg-btn,
body.obs-site .ptab-btn {
  color: var(--obs-ink-3);
  border-color: var(--obs-line);
  background: transparent;
}
body.obs-site .seg input:checked + label,
body.obs-site .seg-btn.on,
body.obs-site .ptab-btn.on {
  color: var(--obs-ink);
  background: var(--obs-surface-3);
  box-shadow: inset 0 -2px 0 var(--obs-brass);
}
body.obs-site .hint,
body.obs-site .notes,
body.obs-site .submit-note,
body.obs-site [class$="-notes"],
body.obs-site [class$="-note"] { color: var(--obs-ink-3); }

/* ---------- Containers: physical plates, not floating glass ---------- */
body.obs-site .hanji,
body.obs-site .step,
body.obs-site .person-card,
body.obs-site .wl-form-wrap,
body.obs-site .td-form-wrap,
body.obs-site .pg-form-wrap,
body.obs-site .py-form-wrap,
body.obs-site .checkout,
body.obs-site .card,
body.obs-site .toggle-card,
body.obs-site .aside-block,
body.obs-site .rd-sheet,
body.obs-site .article-summary,
body.obs-site .conversion-card,
body.obs-site .cta-box {
  border-color: var(--obs-line-strong);
  border-radius: 2px;
  background: linear-gradient(145deg, #171b1e, #111416);
  box-shadow: 0 24px 52px -34px var(--obs-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body.obs-site .hanji::before { border-color: var(--obs-line); }
body.obs-site .hanji .label { color: var(--obs-brass); background: var(--obs-space); }

body.obs-site .step-head,
body.obs-site .person-label,
body.obs-site .wl-form-title,
body.obs-site .td-form-title,
body.obs-site .pg-form-title,
body.obs-site .py-form-title,
body.obs-site .rd-toc-head {
  border-color: var(--obs-line);
  background: rgba(255, 255, 255, 0.016);
}

body.obs-site .step-num,
body.obs-site .person-num,
body.obs-site .idx,
body.obs-site .rd-sec-num { color: var(--obs-brass); }

body.obs-site .trust,
body.obs-site .preview-meta,
body.obs-site .pg-ribbon,
body.obs-site .py-ribbon,
body.obs-site .mr-stats,
body.obs-site .rd-hero-meta,
body.obs-site .ij-meta {
  border-color: var(--obs-line);
  background: rgba(12, 15, 17, 0.82);
}

body.obs-site .trust-item,
body.obs-site .pg-ribbon-item,
body.obs-site .py-ribbon-item,
body.obs-site .mr-stat,
body.obs-site .ij-meta .cell { border-color: var(--obs-line); }

/* ---------- Repeated content becomes archive rows / specimens ---------- */
body.obs-site .upsell-list,
body.obs-site .tool-guide__grid,
body.obs-site .tool-guide__links,
body.obs-site .pg-secgrid,
body.obs-site .py-secgrid,
body.obs-site .mr-starter,
body.obs-site .related-list,
body.obs-site .ij-related-grid,
body.obs-site .ij-easy-grid,
body.obs-site .ij-scene-grid {
  gap: 1px;
  border: 1px solid var(--obs-line);
  background: var(--obs-line);
}

body.obs-site .upsell-card,
body.obs-site .tool-guide__card,
body.obs-site .tool-guide__link,
body.obs-site .pg-secgrid-cell,
body.obs-site .py-secgrid-cell,
body.obs-site .mr-starter-cell,
body.obs-site .related-item,
body.obs-site .ij-related-grid > a,
body.obs-site .ij-easy-grid > div,
body.obs-site .ij-scene-grid > div {
  border: 0;
  border-radius: 0;
  color: var(--obs-ink);
  background: var(--obs-surface);
  box-shadow: none;
}

body.obs-site .upsell-card:hover,
body.obs-site .tool-guide__link:hover,
body.obs-site .mr-starter-cell:hover,
body.obs-site .ij-related-grid > a:hover {
  border: 0;
  background: var(--obs-surface-2);
  transform: none;
}

body.obs-site .tool-guide__section,
body.obs-site .tool-guide__note,
body.obs-site .tool-guide__cta,
body.obs-site .upsell,
body.obs-site .cta-strip,
body.obs-site .wl-upsell,
body.obs-site .td-upsell,
body.obs-site .gd-pull,
body.obs-site .gd-end,
body.obs-site .ij-note,
body.obs-site .ij-cta {
  border-color: var(--obs-line-strong);
  border-radius: 2px;
  color: var(--obs-ink-2);
  background: var(--obs-surface);
}

/* 60갑자 허브 CTA: 구형 btn 클래스가 글자 폭으로 붕괴하지 않게 고정 */
body.obs-site .ijx-cta {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  padding: 36px;
}

body.obs-site .ijx-cta > div:first-child { min-width: 0; }

body.obs-site .ijx-cta .actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  flex-wrap: nowrap;
  gap: 10px;
}

body.obs-site .ijx-cta .actions > a {
  min-width: 142px;
  padding-inline: 20px;
}

body.obs-site .upsell,
body.obs-site .upsell * { color: var(--obs-ink-2); }
body.obs-site .upsell h2,
body.obs-site .upsell h3,
body.obs-site .upsell .now,
body.obs-site .upsell .price { color: var(--obs-ink); }

/* ---------- Results and data sheets ---------- */
body.obs-site .pillars,
body.obs-site .rs-pillars,
body.obs-site .gods,
body.obs-site .rs-gods,
body.obs-site .els,
body.obs-site .rs-els,
body.obs-site .rd-keymsg-grid,
body.obs-site .rel-matrix,
body.obs-site .rd-list,
body.obs-site .td-stars-grid,
body.obs-site .td-lucky-grid,
body.obs-site .wl-struct,
body.obs-site .wl-channel-list {
  border-color: var(--obs-line);
}

body.obs-site .pl,
body.obs-site .rs-pl,
body.obs-site .gd,
body.obs-site .rs-gd,
body.obs-site .el,
body.obs-site .rs-el,
body.obs-site .rd-keymsg-cell,
body.obs-site .rel-cell,
body.obs-site .td-stars-grid > *,
body.obs-site .td-lucky-grid > *,
body.obs-site .wl-struct-cell,
body.obs-site .wl-income-card {
  color: var(--obs-ink);
  border-color: var(--obs-line);
  background: var(--obs-surface);
  box-shadow: none;
}

body.obs-site .pl.day,
body.obs-site .rs-pl.is-day,
body.obs-site .rd-tl-row.is-peak {
  border-color: var(--obs-brass);
  background: #1d1b17;
}

/* Five elements are read as material specimens. The image carries matter;
   the lower rail carries the user's numbers without five colored circles. */
body.obs-site .card:has(.els),
body.obs-site .rs-sub:has(.rs-els) {
  min-height: 470px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--obs-line-strong);
  background:
    linear-gradient(180deg, rgba(9, 11, 13, 0.12) 0%, rgba(9, 11, 13, 0.2) 48%, rgba(9, 11, 13, 0.96) 84%),
    url("/img/observatory/five-elements-lab.webp") center 42% / cover no-repeat,
    var(--obs-surface);
}
body.obs-site .card:has(.els) > h3,
body.obs-site .card:has(.els) > .hm,
body.obs-site .rs-sub:has(.rs-els) > h4,
body.obs-site .rs-sub:has(.rs-els) > .hm {
  position: relative;
  z-index: 1;
  width: max-content;
  max-width: 100%;
  padding-inline: 6px;
  background: rgba(10, 12, 14, 0.74);
}
body.obs-site .card:has(.els) > p,
body.obs-site .rs-sub:has(.rs-els) > p { margin-top: 12px !important; color: var(--obs-ink-2) !important; }
body.obs-site .els,
body.obs-site .rs-els {
  margin-top: auto;
  gap: 0;
  border: 1px solid var(--obs-line);
  background: rgba(10, 12, 14, 0.92);
}
body.obs-site .el,
body.obs-site .rs-el {
  min-width: 0;
  padding: 13px 6px;
  border: 0;
  border-right: 1px solid var(--obs-line);
  background: transparent;
}
body.obs-site .el:last-child,
body.obs-site .rs-el:last-child { border-right: 0; }
body.obs-site .el-wrap svg,
body.obs-site .rs-el-wrap svg { display: none; }
body.obs-site .el-wrap,
body.obs-site .rs-el-wrap { min-height: 26px; }
body.obs-site .el .cnt,
body.obs-site .rs-el .cnt {
  position: static;
  margin: 0;
  color: var(--obs-brass-2);
  font-family: var(--font-mono);
  font-size: 19px;
  line-height: 1;
}
body.obs-site .el .n,
body.obs-site .rs-el .n { color: var(--obs-ink); }

body.obs-site .toggle-head,
body.obs-site .toggle-foot,
body.obs-site .rd-tl-row,
body.obs-site .bd-row,
body.obs-site .rd-mini,
body.obs-site .rd-breakdown {
  border-color: var(--obs-line);
}

body.obs-site .rd-aside,
body.obs-site .article-side { color: var(--obs-ink-2); }
body.obs-site .rd-toc,
body.obs-site .article-side > * {
  border-color: var(--obs-line);
  border-radius: 2px;
  background: var(--obs-surface);
}

/* ---------- Wealth DNA: character-sheet hierarchy ---------- */
body.obs-site .wl-grade {
  min-height: 500px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: clamp(28px, 5vw, 64px);
  border-color: var(--obs-line-strong);
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(9, 11, 13, 0.97) 0%, rgba(9, 11, 13, 0.82) 45%, rgba(9, 11, 13, 0.2) 72%, rgba(9, 11, 13, 0.46) 100%),
    linear-gradient(180deg, rgba(9, 11, 13, 0.08), rgba(9, 11, 13, 0.76)),
    url("/img/observatory/wealth-architect.webp") 72% 28% / cover no-repeat,
    var(--obs-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 30px 70px -42px #000;
}
body.obs-site .wl-grade-grid { position: relative; z-index: 1; width: min(760px, 82%); align-items: end; }
body.obs-site .wl-grade-letter { color: var(--obs-brass-2); text-shadow: none; }
body.obs-site .wl-grade-kicker { color: var(--obs-brass); }
body.obs-site .wl-grade-title,
body.obs-site .wl-grade-sub { color: var(--obs-ink); }
body.obs-site .wl-grade-body { color: var(--obs-ink-2); }
body.obs-site .wl-grade-keywords > * {
  color: var(--obs-ink-2);
  border-color: var(--obs-line-strong);
  border-radius: 2px;
  background: rgba(10, 12, 14, 0.78);
}
body.obs-site .wl-dna-stage {
  border-color: var(--obs-line-strong);
  border-radius: 2px;
  background: linear-gradient(145deg, var(--obs-surface-2), var(--obs-space-2));
}
body.obs-site .wl-income-card,
body.obs-site .wl-struct-cell { border-radius: 0; }

/* ---------- Today, compatibility and product comparisons ---------- */
body.obs-site .td-day-plate,
body.obs-site .td-overall,
body.obs-site .td-pair-cell,
body.obs-site .td-caution,
body.obs-site .pg-person,
body.obs-site .pg-preview,
body.obs-site .pg-vs-col,
body.obs-site .pg-why-col,
body.obs-site .py-person,
body.obs-site .py-vs-col,
body.obs-site .py-why-col,
body.obs-site .py-year-plate,
body.obs-site .pro-hero .layout > *,
body.obs-site .pro-hero .parts .part {
  border-color: var(--obs-line-strong);
  border-radius: 2px;
  background: var(--obs-surface);
  box-shadow: none;
}

body.obs-site .pg-vs-col.is-paid,
body.obs-site .py-vs-col.is-paid {
  border-color: var(--obs-brass);
  background: #1d1b17;
}

body.obs-site .pg-stickybar,
body.obs-site .mobile-conversion-bar {
  border-color: var(--obs-line-strong);
  background: rgba(10, 12, 14, 0.98);
  backdrop-filter: none;
}

/* ---------- Guide and saved readings ---------- */
body.obs-site .gd-toc,
body.obs-site .gd-concept,
body.obs-site .gd-step,
body.obs-site .gd-table,
body.obs-site .mr-toolbar,
body.obs-site .mr-empty,
body.obs-site .mr-grid > * {
  color: var(--obs-ink);
  border-color: var(--obs-line);
  border-radius: 2px;
  background: var(--obs-surface);
  box-shadow: none;
}
body.obs-site .mr-filter,
body.obs-site .mr-sort {
  color: var(--obs-ink-3);
  border-color: var(--obs-line-strong);
  background: var(--obs-space-2);
}
body.obs-site .mr-filter.is-on { color: var(--obs-ink); border-color: var(--obs-brass); }

/* ---------- Columns ---------- */
body.obs-site .column-page { max-width: 1180px; padding-top: 28px; }
body.obs-site .column-hero {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
}
body.obs-site .column-hero h1 {
  margin: 0 0 10px;
  color: var(--obs-ink);
  font-family: var(--font-serif-kr);
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 400;
  letter-spacing: -0.04em;
}
body.obs-site .column-hero p { color: var(--obs-ink-2); }
body.obs-site .cat-tabs {
  margin: 0 0 34px;
  padding: 14px 0;
  border-block: 1px solid var(--obs-line);
}
body.obs-site .cat-tab {
  padding: 9px 14px;
  color: var(--obs-ink-3);
  border: 0;
  border-radius: 2px;
  background: transparent;
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
body.obs-site .cat-tab:hover,
body.obs-site .cat-tab--active { color: var(--obs-ink); background: var(--obs-surface-2); }
body.obs-site .cat-tab--active { box-shadow: inset 0 -2px 0 var(--obs-brass); }
body.obs-site .column-grid {
  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 .column-card {
  grid-column: span 6;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: var(--obs-surface);
  box-shadow: none;
}
body.obs-site .column-card:nth-child(5n + 1) { grid-column: span 7; }
body.obs-site .column-card:nth-child(5n + 2) { grid-column: span 5; }
body.obs-site .column-card:hover {
  border-color: transparent;
  background: var(--obs-surface-2);
  transform: none;
}
body.obs-site .column-card-img {
  height: clamp(190px, 26vw, 320px);
  border-radius: 0;
  filter: saturate(0.78) contrast(1.06);
}
body.obs-site .column-card-body { padding: 22px; }
body.obs-site .column-card-title { color: var(--obs-ink); font-family: var(--font-serif-kr); font-size: 20px; font-weight: 500; }
body.obs-site .column-card-desc { color: var(--obs-ink-2); }
body.obs-site .column-card-meta { color: var(--obs-ink-3); }

body.obs-site .article-page { max-width: 1240px; padding-top: 42px; }
body.obs-site .article-header { padding: 40px 0 24px; }
body.obs-site .article-cat,
body.obs-site .article-tag {
  border-color: var(--obs-line-strong);
  border-radius: 2px;
  color: var(--obs-brass);
  background: var(--obs-surface);
}
body.obs-site .article-title {
  max-width: 760px;
  color: var(--obs-ink);
  font-family: var(--font-serif-kr);
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 500;
  letter-spacing: -0.035em;
}
body.obs-site .article-meta { color: var(--obs-ink-3); }
body.obs-site .article-featured {
  max-height: 520px;
  border: 1px solid var(--obs-line);
  border-radius: 2px;
  filter: saturate(0.84) contrast(1.04);
}
body.obs-site .article-body { color: var(--obs-ink-2); }
body.obs-site .article-body h2,
body.obs-site .article-body h3 { color: var(--obs-ink); }
body.obs-site .article-body h2 { border-left-color: var(--obs-brass); }
body.obs-site .article-body a { color: var(--obs-brass-2); }
body.obs-site .article-body img { border: 1px solid var(--obs-line); border-radius: 2px; }

/* ---------- 60 Jiazi archive ---------- */
body.obs-site .ijx-guide-card,
body.obs-site .ijx-featured-card,
body.obs-site .ijx-grid > a,
body.obs-site .ij-plate,
body.obs-site .ij-sec,
body.obs-site .ij-compare > div,
body.obs-site .ij-checklist > div {
  color: var(--obs-ink);
  border-color: var(--obs-line);
  border-radius: 2px;
  background: var(--obs-surface);
  box-shadow: none;
}
body.obs-site .ij-figure img { border-radius: 2px; filter: saturate(0.82) contrast(1.05); }
body.obs-site .ij-sec p,
body.obs-site .ij-lead,
body.obs-site .ij-figure figcaption { color: var(--obs-ink-2); }
body.obs-site .ij-sec-head { border-color: var(--obs-line); }

/* ---------- Legal ---------- */
body.obs-site .legal-wrap,
body.obs-site .legal-card,
body.obs-site .legal-nav {
  color: var(--obs-ink-2);
  border-color: var(--obs-line);
  background: var(--obs-surface);
}

/* ---------- Motion: hierarchy and feedback only ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.obs-site:not([data-page="home"]) main > header,
  body.obs-site:not([data-page="home"]) main > section:first-child {
    animation: obs-enter 760ms var(--ease-out) both;
  }
  body.obs-site .column-card,
  body.obs-site .upsell-card,
  body.obs-site .tool-guide__link {
    transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 180ms var(--ease-out);
  }
  @keyframes obs-enter {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.obs-site *,
  body.obs-site *::before,
  body.obs-site *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  body.obs-site:not([data-page="home"])::before {
    height: 66dvh;
    background-position: 62% 44%;
    opacity: 0.26;
  }
  body.obs-site .v2-nav { min-height: 58px; }
  body.obs-site .v2-nav-inner { min-height: 58px; padding: 8px 18px; }
  body.obs-site .v2-logo-svg { height: 34px !important; }
  body.obs-site .v2-nav-ghost { display: none; }
  body.obs-site .v2-nav-cta { min-height: 36px; padding: 8px 11px; font-size: 11px; }
  body.obs-site .v2-wrap,
  body.obs-site .v2-main,
  body.obs-site .v2-wrap-narrow { padding-inline: 18px; }
  body.obs-site .palja-hero,
  body.obs-site .compat-hero,
  body.obs-site .wl-hero,
  body.obs-site .td-hero,
  body.obs-site .pg-hero,
  body.obs-site .py-hero,
  body.obs-site .gd-hero,
  body.obs-site .mr-hero,
  body.obs-site .column-hero { padding-top: 42px; }
  body.obs-site .v2-h1 { font-size: clamp(36px, 11vw, 50px); }
  body.obs-site .column-grid { grid-template-columns: 1fr; }
  body.obs-site .column-card,
  body.obs-site .column-card:nth-child(5n + 1),
  body.obs-site .column-card:nth-child(5n + 2) { grid-column: 1; }
  body.obs-site .column-card-img { height: 220px; }
  body.obs-site .article-layout { display: block; }
  body.obs-site .article-side { position: static; margin-top: 42px; }
  body.obs-site .article-title { font-size: clamp(32px, 10vw, 44px); }
  body.obs-site .ijx-cta {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 28px 24px;
  }
  body.obs-site .ijx-cta .actions {
    width: 100%;
    justify-self: stretch;
    flex-direction: column;
    align-items: stretch;
  }
  body.obs-site .ijx-cta .actions > a {
    width: 100%;
    min-width: 0;
  }
  body.obs-site .wl-grade {
    min-height: 560px;
    align-items: flex-end;
    background:
      linear-gradient(180deg, rgba(9, 11, 13, 0.18) 0%, rgba(9, 11, 13, 0.54) 48%, rgba(9, 11, 13, 0.98) 79%),
      url("/img/observatory/wealth-architect.webp") 58% 22% / auto 100% no-repeat,
      var(--obs-surface);
  }
  body.obs-site .wl-grade-grid { width: 100%; }
  body.obs-site .card:has(.els),
  body.obs-site .rs-sub:has(.rs-els) { min-height: 400px; background-position: 54% 40%; }
}

@media (prefers-contrast: more) {
  body.obs-site {
    --obs-ink-2: #dedbd3;
    --obs-ink-3: #b9b5ad;
    --obs-line: rgba(238, 234, 225, 0.3);
    --obs-line-strong: rgba(238, 234, 225, 0.52);
  }
}