/* Direction (from the user's reference): a private object you keep.
   Night charcoal for the logo stage, warm paper for daily reading, champagne gold as the only accent.
   Cormorant Garamond for Latin editorial display, Inter Tight for Latin UI; Korean uses system Korean fallback. */
:root {
  --paper: #f3eee6;
  --paper-2: #ebe4d8;
  --card: #fbf8f3;
  --ink: #1d1a17;
  --ink-2: #7a7166;
  --line: #e1d8ca;
  --gold: #b38b5d;
  --gold-2: #d8bf98;
  --night: #1b1815;
  --night-2: #26221e;
  --on-night: #efe6d8;
  --on-night-2: #a99c8a;
  --ok: #4c6b52;
  --warn: #8f4636;
  --f-display: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", sans-serif;
  --f-latin: "Cormorant Garamond", "Times New Roman", serif;
  --f-latin-ui: "Inter Tight", "Arial Narrow", Arial, sans-serif;
  --f-body: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --r: 20px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 15px/1.6 var(--f-body); word-break: keep-all; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; }

.shell { max-width: 480px; margin: 0 auto; min-height: 100dvh; padding: 0 20px calc(100px + env(safe-area-inset-bottom)); }
.shell.night { background: var(--night); color: var(--on-night); max-width: none; padding-bottom: 40px; }
.shell.night > * { max-width: 440px; margin-inline: auto; }

/* top bar */
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 0 10px; }
.topbar .title { font: 19px var(--f-display); letter-spacing: .04em; }
.topbar .ver { justify-self: end; font: 11px var(--f-latin); letter-spacing: .12em; color: var(--ink-2); }

/* shared type */
.latin { font: 500 11px/1.4 var(--f-latin); letter-spacing: .32em; text-transform: uppercase; }
.display { font-family: var(--f-display); }
.hint { font-size: 13px; color: var(--ink-2); }
.center { text-align: center; }
.note { font-size: 12px; color: var(--ink-2); }

/* surfaces */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.stack { display: grid; gap: 14px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border-radius: 999px; padding: 15px 20px; font-weight: 500; letter-spacing: .02em; }
.btn-ink { background: var(--ink); color: var(--paper); border: 0; }
.btn-line { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn-gold { background: linear-gradient(180deg, #ecdcc2, #d8bf98); color: var(--ink); border: 0; }
.btn-ghost-night { background: transparent; border: 1px solid rgba(216,191,152,.55); color: var(--on-night); }
.btn .arrow { font-family: var(--f-latin); }
button.link { border: 0; background: none; color: var(--ink-2); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; justify-self: start; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* intro (night) */
.intro { display: grid; gap: 26px; padding: 28px 0 8px; }
.brandmark { display: grid; gap: 6px; }
.brandmark .ko { font: 700 46px/1 var(--f-display); letter-spacing: .02em; color: var(--on-night); }
.brandmark .latin { color: var(--on-night-2); }
.tagline { display: grid; gap: 8px; border-top: 1px solid rgba(216,191,152,.25); padding-top: 22px; }
.tagline h1 { font: 30px/1.35 var(--f-display); color: var(--on-night); }
.tagline .latin { color: var(--gold-2); font-size: 10px; }
.frames { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.frames figure { margin: 0; display: grid; justify-items: center; gap: 4px; }
.frames .logo { width: 100% !important; height: auto !important; aspect-ratio: 1; }
.frames figcaption { font: 13px var(--f-display); color: var(--on-night-2); }
.intro .lead { color: var(--on-night); font-size: 15px; line-height: 1.75; }
.intro .hint { color: var(--on-night-2); }

/* form */
.form { display: grid; gap: 14px; }
.form h2 { font: 22px var(--f-display); }
.form label { display: grid; gap: 6px; font-size: 12px; color: var(--ink-2); }
.form input, .form select { font: 16px var(--f-body); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px; width: 100%; }
.form select:disabled { opacity: .4; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.check { display: flex !important; align-items: center; gap: 8px !important; font-size: 14px !important; color: var(--ink) !important; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }
.check.tight { align-self: end; padding-bottom: 12px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper-2); border-radius: 999px; padding: 4px; }
.seg.three { grid-template-columns: repeat(3, 1fr); }
.seg button { border: 0; background: transparent; padding: 9px 6px; border-radius: 999px; color: var(--ink-2); font-size: 14px; }
.seg button.on { background: var(--ink); color: var(--paper); font-weight: 500; }
.err { color: var(--warn); font-size: 14px; }
.amb { border-top: 1px dashed var(--line); padding-top: 12px; display: grid; gap: 8px; }
.amb p { font-size: 14px; }

/* reveal (night overlay) */
.reveal-screen { position: fixed; inset: 0; z-index: 20; background: radial-gradient(120% 70% at 30% 0%, #3a3128 0%, var(--night) 60%); color: var(--on-night); overflow-y: auto; padding: calc(24px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom)); }
.reveal-inner { max-width: 420px; margin: 0 auto; display: grid; gap: 22px; justify-items: center; text-align: center; }
.reveal-inner .logo { width: min(78vw, 320px) !important; height: auto !important; aspect-ratio: 1; }
.reveal-inner h1 { font: 26px/1.5 var(--f-display); }
.reveal-meta { display: grid; gap: 4px; font: 14px var(--f-display); color: var(--on-night-2); }
.reveal-quote { font: 18px/1.7 var(--f-display); color: var(--on-night); }
.reveal-inner .btn { max-width: 300px; }
.share-link { display: inline-flex; gap: 8px; align-items: center; border: 0; background: none; color: var(--on-night); font-size: 14px; }

/* logo assembly */
@media (prefers-reduced-motion: no-preference) {
  .assemble #frame-layer { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .assemble #motif-layer { animation: rise .9s .55s cubic-bezier(.2,.7,.2,1) both; }
  .assemble #number-layer { animation: rise .9s 1.05s cubic-bezier(.2,.7,.2,1) both; }
  .fade-late { animation: fade .8s 1.5s both; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } }
  @keyframes fade { from { opacity: 0; } }
}

/* 기깔 tab */
.stage { background: radial-gradient(120% 80% at 25% 0%, #3b3229 0%, var(--night) 65%); color: var(--on-night); border-radius: 26px; overflow: hidden; }
.stage-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 14px 14px 0; border-radius: 999px; background: rgba(255,255,255,.06); padding: 4px; }
.stage-tabs button { border: 0; background: none; color: var(--on-night-2); border-radius: 999px; padding: 9px; font-size: 13px; }
.stage-tabs button.on { background: var(--on-night); color: var(--night); font-weight: 600; }
.stage .logo { width: 100% !important; height: auto !important; aspect-ratio: 1; max-width: 330px; margin: 0 auto; }
.stage-floor { height: 18px; background: linear-gradient(180deg, rgba(239,230,216,.08), rgba(239,230,216,0)); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--card); color: var(--ink); }
.fact { padding: 14px 16px; display: grid; gap: 4px; border-left: 1px solid var(--line); }
.fact:first-child { border-left: 0; }
.fact .k { font-size: 11px; color: var(--ink-2); }
.fact .v { font: 22px var(--f-display); }
.panel { background: var(--card); color: var(--ink); border-top: 1px solid var(--line); padding: 4px 18px 18px; }
.dna { list-style: none; margin: 0; padding: 0; }
.dna li { display: grid; grid-template-columns: 26px 92px 1fr; gap: 10px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); font-size: 14px; }
.dna li:first-child { border-top: 0; }
.dna svg { width: 20px; height: 20px; color: var(--ink); }
.dna .k { color: var(--ink-2); font-size: 13px; }
.dna .v { font-family: var(--f-display); }
.dna .v small { font-family: var(--f-body); color: var(--ink-2); font-size: 12px; }
.pillar-table { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 14px; }
.pillar { display: grid; justify-items: center; gap: 2px; padding: 12px 0 14px; border-left: 1px solid var(--line); }
.pillar:first-child { border-left: 0; }
.pillar .lbl { font-size: 11px; color: var(--ink-2); }
.pillar .g { font: 24px/1.2 var(--f-display); }
.pillar.me { background: #f1e7d8; }
.pillar.me .lbl { color: var(--ink); font-weight: 600; }
.pillar .none { color: var(--line); }
.birthline { margin-top: 12px; font: 14px var(--f-display); color: var(--ink-2); text-align: center; }
.section-title { font: 20px var(--f-display); }
.share { display: grid; gap: 10px; }

/* goods teaser */
.goods { display: grid; gap: 14px; }
.goods h2 { font: 26px/1.35 var(--f-display); }
.medal { background: radial-gradient(110% 90% at 30% 10%, #3a3128, var(--night) 70%); border-radius: 18px; display: grid; place-items: center; padding: 24px; }
.medal .coin { width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(70% 70% at 35% 30%, #f3e4c9, #c8a77a 55%, #8d6a45); box-shadow: inset 0 0 0 6px rgba(255,255,255,.18), 0 18px 30px rgba(0,0,0,.45); display: grid; place-items: center; }
.medal .coin .logo { width: 128px !important; height: 128px !important; }
.goods-foot { display: grid; gap: 4px; }
.goods-foot b { font: 18px var(--f-latin); letter-spacing: .08em; font-weight: 600; }

/* today */
.today-date { text-align: center; font: 14px var(--f-display); color: var(--ink-2); }
.greet { font: 24px/1.5 var(--f-display); margin-top: 6px; }
.gauge { position: relative; width: 210px; height: 210px; margin: 6px auto 0; display: grid; place-items: center; text-align: center; }
.gauge svg { position: absolute; inset: 0; }
.gauge .k { font-size: 12px; color: var(--ink-2); }
.gauge .n { font: 64px/1.05 var(--f-display); font-variant-numeric: tabular-nums; }
.gauge .band { font-size: 12px; color: var(--ink-2); }
.today-logo { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; }
.today-logo .tile { border-radius: 16px; overflow: hidden; background: radial-gradient(120% 90% at 30% 10%, #3a3128, var(--night) 70%); }
.today-logo .logo { width: 100% !important; height: auto !important; aspect-ratio: 1; }
.today-logo .k { font-size: 12px; color: var(--ink-2); }
.today-logo .v { font: 20px var(--f-display); display: flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.quote { background: var(--paper-2); border-radius: 16px; padding: 16px 18px; display: grid; gap: 6px; }
.quote .k { font-size: 12px; color: var(--ink-2); }
.quote p { font: 16px/1.7 var(--f-display); }
.buy { display: grid; gap: 12px; }
.buy h3 { font: 18px var(--f-display); }
.q { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 10px; font-size: 14px; }
.verdict { border-radius: 16px; padding: 14px 16px; background: var(--paper); display: grid; gap: 4px; }
.verdict b { font: 20px var(--f-display); font-weight: 400; }
.verdict p { font-size: 14px; }
.v-BUY_OK b { color: var(--ok); }
.v-PASS_TODAY b { color: var(--warn); }
.owoon-bar { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; border: 0; border-radius: 999px; padding: 16px; background: var(--ink); color: var(--paper); }
.owoon-bar b { font-weight: 600; letter-spacing: .02em; }
.owoon-bar span { font-size: 13px; opacity: .8; }
.owoon-bar.done { background: var(--paper-2); color: var(--ink); }

/* dex */
.dex-head { display: flex; align-items: baseline; justify-content: space-between; }
.dex-head h2 { font: 24px var(--f-display); }
.count { font: 30px var(--f-display); font-variant-numeric: tabular-nums; }
.count small { font-size: 14px; color: var(--ink-2); }
.dex { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.cell { margin: 0; display: grid; justify-items: center; gap: 4px; }
.cell .tile, .cell .blank { width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.cell .tile { background: radial-gradient(120% 90% at 30% 10%, #3a3128, var(--night) 70%); }
.cell .tile .logo { width: 100% !important; height: 100% !important; }
.cell .blank { display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); font: 15px var(--f-display); color: #cbbfae; }
.cell figcaption { font: 11px var(--f-display); color: var(--ink-2); }
.cell.got figcaption { color: var(--ink); }
.soon { text-align: center; padding: 44px 20px; display: grid; gap: 10px; }
.soon h2 { font: 22px var(--f-display); }

/* tab bar */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(251,248,243,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); max-width: 480px; margin: 0 auto; z-index: 10; }
.tabs button { font-size: 11px; border: 0; background: none; color: var(--ink-2); display: grid; justify-items: center; gap: 3px; padding: 2px 0; }
.tabs button.on { color: var(--ink); font-weight: 600; }
.tabs svg.ico { width: 22px; height: 22px; }
.tabs .logo { border-radius: 6px; overflow: hidden; background: var(--night); }
.mini-empty { width: 22px; height: 22px; display: block; border-radius: 6px; border: 1.5px dashed currentColor; }
.boot { min-height: 100dvh; background: var(--night); }
.logo { line-height: 0; }
.logo svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* additions for the luxe app shell */
.tabs .logo { width: 22px; height: 22px; padding: 1px; }
.fact .v small { font-size: 12px; }
.fact .brand-no { font-family: var(--f-latin); font-weight: 600; letter-spacing: .04em; }
.q { grid-template-columns: 1fr 140px; }
.today .greet { margin-bottom: 4px; }
.today-logo .hint { margin-top: 4px; font-size: 12px; }
.today-logo-v { font: 20px var(--f-display); }
.reveal-inner > .logo { filter: drop-shadow(0 30px 40px rgba(0,0,0,.35)); }
.goods .seg button.on { background: var(--ink); }
.share-link svg { width: 18px; height: 18px; flex: none; }
.share-link { white-space: nowrap; }
.hint, .lead, .reveal-meta span { text-wrap: pretty; }
.intro .hint.center { text-wrap: balance; }

/* S3: DNA, brand kit, people */
.dna-exploder { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.dna-logo { width: min(270px, 78vw); aspect-ratio: 1; margin: 0 auto; border-radius: 22px; overflow: hidden; background: var(--paper); }
.dna-logo .logo { width: 100%; height: 100%; }
.dna-live { background: var(--paper-2); border-radius: 16px; padding: 6px 14px; }
.brand-kit { display: grid; gap: 12px; }
.brand-kit h3 { font: 22px var(--f-display); }
.brand-kit-preview { display: grid; grid-template-columns: 1fr 72px; gap: 14px; align-items: center; background: var(--paper-2); border-radius: 18px; padding: 14px; }
.brand-kit-preview > .logo { width: 100%; aspect-ratio: 1; }
.swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.swatches i { display: block; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }
.kit-ids { display: flex; flex-wrap: wrap; gap: 6px; }
.kit-ids span { font: 11px var(--f-latin); border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; }
.people { gap: 16px; }
.people-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.people-head h2 { font: 25px var(--f-display); margin-top: 4px; }
.btn.compact { width: auto; padding: 10px 13px; }
.people-empty { display: grid; gap: 16px; text-align: center; padding: 34px 20px; }
.people-grid { display: grid; gap: 10px; }
.person-card { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 10px 12px 10px 10px; }
.person-logo { width: 74px; height: 74px; border-radius: 15px; overflow: hidden; background: var(--night); }
.person-logo .logo { width: 100%; height: 100%; }
.person-card h3 { font: 18px var(--f-display); }
.person-card p { color: var(--ink-2); font-size: 12px; margin-top: 3px; }
.person-delete { border: 0; background: none; color: var(--ink-2); font-size: 11px; padding: 8px; }
.person-form { display: grid; gap: 14px; }
@media (prefers-reduced-motion: reduce) { .dna-logo g { transition: none !important; } }

/* S3.1 — DNA on the reveal stage, scoped to that logo only */
.reveal-logo-host { width: min(78vw, 320px); aspect-ratio: 1; }
.reveal-logo-host .logo { width: 100% !important; height: 100% !important; }
.reveal-dna { width: min(100%, 360px); display: grid; gap: 10px; }
.dna-toggle.on-night { color: var(--on-night); border-color: rgba(239,230,216,.35); background: rgba(255,255,255,.04); }
.reveal-dna-list { text-align: left; color: var(--ink); background: var(--paper); max-height: 280px; overflow: auto; }
.undo-toast { position: fixed; z-index: 40; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(420px, calc(100% - 28px)); background: var(--night); color: var(--on-night); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.22); }
.undo-toast button { border: 0; background: none; color: var(--gold-2); font-weight: 700; padding: 6px; }
@media (prefers-reduced-motion: reduce) { [data-dna-motion] { transition: none !important; } }

.stage-dna-toggle { width: calc(100% - 44px); margin: 4px 22px 14px; }


/* S3 design polish 01 — responsive, tactile, accessible. Presentation only. */
:root { --touch-min: 44px; }
@media (max-width: 370px) {
  .shell { padding-left: 14px; padding-right: 14px; }
  .card { padding: 16px; }
  .stage-dna-toggle { width: calc(100% - 32px); margin-left: 16px; margin-right: 16px; }
  .topbar .title { font-size: 17px; }
}
@media (min-width: 700px) {
  body { background: #e9e2d8; }
  .shell:not(.night) { box-shadow: 0 16px 70px rgba(35, 26, 18, .10); background: var(--paper); }
}
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled) { transition: transform .18s ease, box-shadow .18s ease; }
  .btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(27,24,21,.10); }
  .btn:not(:disabled):active { transform: translateY(0); }
}
.person-delete, .undo-toast button, .stage-dna-toggle { min-height: var(--touch-min); }
.reveal-dna-list { scrollbar-width: thin; overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; }
}
@media (prefers-contrast: more) {
  :root { --ink-2: #51473e; --line: #9c8c78; }
  .btn-line, .stage-dna-toggle { border-width: 2px; }
}

/* Typography pass 02: supplied typeface families, Korean fallback, responsive rhythm. */
.brandmark .ko, .tagline h1, .reveal-screen h1, .stage h2 { letter-spacing: -.045em; }
.latin, .ver, .kit-ids, .reveal-meta { font-variant-numeric: lining-nums tabular-nums; }
button, input, select { font-family: var(--f-body); }
button { min-height: 44px; }
.form input, .form select { font-size: 16px; }
.card h3, .section-title { line-height: 1.28; }
.reveal-meta { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 390px) {
  .tagline h1, .reveal-screen h1 { font-size: clamp(29px, 8vw, 40px); }
  .latin { letter-spacing: .2em; }
}

/* Pretendard Korean type scale — version-pinned webfont, no local binaries. */
:root { --font-weight-body: 400; --font-weight-medium: 500; --font-weight-strong: 650; }
body { font-weight: var(--font-weight-body); }
.card h3, .section-title, .topbar .title { font-weight: var(--font-weight-strong); }
.form label, .btn, .tabs button { font-weight: var(--font-weight-medium); }
.latin { font-family: var(--f-latin); }
@media (max-width: 360px) { .form label, .hint, .note { overflow-wrap: anywhere; } }

/* Compact result presentation. */
.reveal-inner { gap: 18px; }
.reveal-logo-host { width: min(68vw, 270px); }
.reveal-screen h1 { font-size: 26px; line-height: 1.3; }

.saju-details { display:grid; gap:14px; }
.saju-details .pillar-table { margin:0; }
.pillar-readings { display:grid; grid-template-columns:repeat(4,1fr); text-align:center; font-size:13px; color:var(--ink-2); }
.element-counts { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.element-counts > div { display:grid; gap:8px; text-align:center; padding:10px 2px; background:var(--paper-2); border-radius:10px; }
.element-counts span { font-size:12px; }
.element-counts strong { font-size:22px; }
.saju-details summary { cursor:pointer; min-height:44px; display:flex; align-items:center; text-decoration:underline; font-size:14px; }
.calculation-notes { display:grid; gap:12px; color:var(--ink-2); font-size:13px; line-height:1.7; }

/* Gikkal Studio — bright, tactile mobile design. */
:root { --paper:#f5f5f2; --paper-2:#eeefeb; --card:#fff; --ink:#202124; --ink-2:#65676a; --line:#e5e6e2; --gold:#a59add; --gold-2:#dad2f4; --night:#eeedf4; --on-night:#202124; --on-night-2:#65676a; --f-latin:Arial,sans-serif; }
body { background:var(--paper); }
.shell { padding:0 20px 100px; }
.topbar { grid-template-columns:1fr auto 1fr; padding:23px 0; }
.wordmark { font-size:27px; font-weight:850; letter-spacing:-.08em; }
.wordmark span { color:#9b87d5; }
.topbar .title { font-size:14px; }
.ver { justify-self:end; font:10px Arial,sans-serif; letter-spacing:.08em; background:#e6e1f6; color:#544279; padding:7px 10px; border-radius:20px; }
.card { border:0; border-radius:24px; box-shadow:0 4px 20px #20212404; padding:22px; }
.btn { font-weight:650; }
.btn-gold,.btn-ink { background:#202124; color:#fff; border:0; box-shadow:0 5px 0 #d9d9d3; }
.btn-line { border-color:#d6d8d3; }
.intro { gap:20px; padding-top:26px; }
.brandmark { display:flex; justify-content:space-between; align-items:center; }
.brandmark .ko { font-size:33px; color:var(--ink); font-weight:850; }
.intro-tag { font:10px Arial,sans-serif; letter-spacing:.08em; border:1px solid #d6d8d3; border-radius:24px; padding:9px 12px; }
.tagline { border:0; padding:10px 0 0; text-align:left; }
.eyebrow { font-size:10px; font-weight:650; letter-spacing:.1em; color:var(--ink-2); }
.tagline h1 { font-size:43px; font-weight:800; line-height:1.12; margin-top:12px; letter-spacing:-.055em; }
.studio-hero { position:relative; height:292px; display:grid; place-items:center; border-radius:30px; background:radial-gradient(ellipse at 55% 60%,#e5dff1,transparent 70%); }
.studio-hero img { width:100%; height:285px; object-fit:contain; filter:drop-shadow(0 12px 12px #63547c14); }
.studio-label { position:absolute; bottom:0; left:50%; transform:translateX(-50%) rotate(-3deg); font:9px Arial,sans-serif; letter-spacing:.04em; white-space:nowrap; background:#e1f6a8; padding:8px 11px; border-radius:4px; }
.intro .lead { text-align:left; font-size:15px; line-height:1.6; color:var(--ink-2); }
.intro .hint { font-size:11px; }
.form h2 { font-weight:750; font-size:25px; letter-spacing:-.04em; }
.form input,.form select { background:#f5f6f3; border-color:#e5e6e2; border-radius:13px; }
.seg { background:#f0f1ed; }
.stack { gap:18px; }
.saju-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.saju-heading h2 { font-size:25px; font-weight:750; margin-top:7px; letter-spacing:-.045em; }
.chart-stamp { font-size:11px; background:#e4f3d3; color:#37502f; padding:9px 10px; border-radius:14px; transform:rotate(5deg); white-space:nowrap; }
.saju-details .birthline { margin:0; text-align:left; font-size:12px; }
.pillar-table { border:0; gap:6px; border-radius:0; }
.pillar { border:0; border-radius:18px; background:#f5f5f2; padding:13px 0; gap:9px; }
.pillar.me { background:#e8e2f8; }
.pillar .g { font-size:29px; font-weight:600; }
.pillar .lbl { font-size:11px; }
.saju-details h3 { margin-top:8px; font-size:17px; font-weight:700; }
.element-counts > div { border-radius:16px; padding:12px 2px; }
.element-counts .element-wood { background:#e0f1dd; }
.element-counts .element-fire { background:#ffe2d7; }
.element-counts .element-earth { background:#f7edbe; }
.element-counts .element-metal { background:#e8ebee; }
.element-counts .element-water { background:#e6e1f7; }
.element-counts span { font-size:10px; white-space:nowrap; }
.element-counts strong { font-size:25px; }
.saju-details summary { text-decoration:none; justify-content:space-between; border-top:1px solid var(--line); padding-top:9px; font-size:12px; }
.saju-details summary:after { content:'+'; font-size:20px; }
.saju-details details[open] summary:after { content:'−'; }
.stage { background:radial-gradient(ellipse at 50% 42%,#e7def6,#f0eef5 68%); color:var(--ink); border:0; }
.stage-tabs { background:#ffffff80; }
.stage-tabs button { color:var(--ink-2); }
.stage-tabs button.on { background:#fff; color:var(--ink); box-shadow:0 2px 7px #20212408; }
.dna-toggle.on-night { border-color:#cac2dd; background:#ffffff80; color:var(--ink); }
.stage-floor { background:none; }
.cell .tile,.person-logo { background:#eeedf4; }
.tabs { background:#ffffffed; border-top:0; box-shadow:0 -3px 20px #20212405; padding-top:12px; }
.tabs button { min-height:45px; }
.tabs button.on { color:#594588; }
.tabs .logo { background:#eee9f7; }
.brand-kit-preview { background:#f1eff7; }
.latin { letter-spacing:.1em; }
@media(min-width:700px) { body { background:#e9ebe7; } .shell:not(.night) { background:var(--paper); box-shadow:0 16px 70px #2021240c; } }
@media(max-width:370px) { .shell { padding-left:16px; padding-right:16px; } .tagline h1 { font-size:38px; } .studio-hero { height:260px; } .studio-hero img { height:255px; } .card { padding:18px; } .saju-heading h2 { font-size:23px; } }
.easy-saju { display:grid; gap:16px; }
.easy-saju h2 { font-size:26px; font-weight:750; letter-spacing:-.04em; }
.easy-saju h3 { font-size:18px; font-weight:700; margin:7px 0 10px; }
.easy-saju p { font-size:14px; line-height:1.85; color:#55585b; margin-top:9px; word-break:keep-all; }
.easy-saju .easy-intro { margin:0; }
.easy-saju section { border-top:1px solid var(--line); padding-top:18px; }
.easy-saju .day-guide { background:#eae4f8; padding:20px; border-radius:20px; border:0; }
.easy-saju .day-guide.element-wood { background:#e0f1dd; }.easy-saju .day-guide.element-fire { background:#ffe7df; }.easy-saju .day-guide.element-earth { background:#f7efca; }.easy-saju .day-guide.element-metal { background:#e8ebee; }
.easy-saju small { display:block; font-size:11px; line-height:1.7; margin-top:14px; color:#626366; }
.step { font-size:11px; color:#65676a; }
.pillar-guide { display:grid; gap:10px; }
.pillar-guide > div { background:#f5f5f2; border-radius:16px; padding:14px; }
.pillar-guide span { float:right; font-size:12px; }
.pillar-guide p { font-size:13px; }
.easy-saju summary { font-size:13px; cursor:pointer; padding:14px 0; min-height:44px; }
.element-guide { display:grid; gap:15px; padding:12px; background:#f5f5f2; border-radius:15px; }
.element-guide b { font-size:13px; }.element-guide p { font-size:13px; }
.reference-link { color:#65676a; font-size:11px; text-underline-offset:4px; }

.update-notice { background:#e8e2f8; border-radius:18px; padding:15px; margin-bottom:16px; font-size:13px; line-height:1.6; display:grid; gap:10px; }