:root {
    color-scheme: light;
    --paper: #ede7d8;
    --paper-deep: #dfd4bd;
    --paper-light: #f7f3e9;
    --ink: #191814;
    --ink-soft: #545048;
    --ink-faint: #817a6e;
    --rule: #aaa08e;
    --rule-dark: #6c655b;
    --seal: #a22b26;
    --seal-dark: #701b18;
    --gold: #93651d;
    --night: #1d2022;
    --focus: #174f8a;
    --wood: #41684e;
    --fire: #a53a2c;
    --earth: #a07731;
    --metal: #69727a;
    --water: #315777;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); scroll-behavior: smooth; }
body {
    min-height: 100vh;
    margin: 0;
    background-color: var(--paper);
    background-image:
        repeating-linear-gradient(0deg, transparent 0 27px, rgba(42, 36, 27, .026) 27px 28px),
        repeating-linear-gradient(90deg, transparent 0 119px, rgba(42, 36, 27, .018) 119px 120px);
    color: var(--ink);
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.58;
    -webkit-font-smoothing: antialiased;
}
body::before {
    position: fixed;
    z-index: 50;
    inset: 0 auto 0 22px;
    width: 2px;
    background: var(--seal);
    content: "";
    opacity: .72;
    pointer-events: none;
}
body::after {
    position: fixed;
    z-index: -1;
    right: 4vw;
    bottom: -11vw;
    width: 36vw;
    aspect-ratio: 1;
    border: 1px solid rgba(25, 24, 20, .07);
    border-radius: 50%;
    box-shadow: inset 0 0 0 4vw rgba(25, 24, 20, .018), inset 0 0 0 8vw rgba(25, 24, 20, .012);
    content: "";
    pointer-events: none;
}

a, button, input, select { font: inherit; }
button { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
.wrap { width: min(1120px, calc(100% - 72px)); margin-inline: auto; }

.site-head {
    min-height: 76px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-bottom: 1px solid var(--ink);
}
.brand { display: inline-flex; justify-self: start; }
.brand img { width: 140px; height: auto; filter: invert(1) hue-rotate(180deg) saturate(3) contrast(2); mix-blend-mode: multiply; }
.book-title {
    margin: 0;
    font-family: "Iowan Old Style", "Noto Serif KR", "AppleMyungjo", Batang, serif;
    font-size: 12px;
    letter-spacing: .3em;
}
.head-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    justify-self: end;
    padding: 0 1px 0 12px;
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
    font-size: 12px;
    font-weight: 760;
    text-decoration: none;
    transition: gap 180ms ease, color 180ms ease;
}
.head-link:hover { gap: 25px; color: var(--seal); }

.intro { padding: 82px 0 58px; }
.saju-intro, .result-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    align-items: center;
    gap: 80px;
}
.eyebrow, .panel-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    color: var(--seal);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .09em;
}
.eyebrow::before, .panel-kicker::before { width: 9px; height: 9px; background: var(--seal); content: ""; }
.intro h1, .result-hero h1 {
    margin: 0;
    font-family: "Iowan Old Style", "Noto Serif KR", "AppleMyungjo", Batang, serif;
    font-size: clamp(52px, 6.5vw, 78px);
    font-weight: 800;
    letter-spacing: -.075em;
    line-height: 1.06;
    word-break: keep-all;
}
.intro h1 em, .result-hero h1 em { color: var(--seal); font-style: normal; }
.intro-copy > p:not(.eyebrow), .result-hero > div > p:last-child {
    max-width: 670px;
    margin: 24px 0 0;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.85;
    word-break: keep-all;
}
.intro-meta {
    display: flex;
    gap: 0;
    margin-top: 35px;
    border-block: 1px solid var(--rule-dark);
}
.intro-meta span { padding: 13px 22px; border-right: 1px solid var(--rule); color: var(--ink-soft); font-size: 11px; }
.intro-meta span:first-child { padding-left: 0; }
.intro-meta b { margin-right: 4px; color: var(--ink); font-family: Georgia, serif; font-size: 15px; }
.saju-test-page .saju-intro { display: block; padding: 38px 0 24px; }
.saju-test-page .saju-intro h1 { max-width: 760px; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.15; }
.saju-test-page .saju-intro .intro-copy > p:not(.eyebrow) { margin-top: 14px; font-size: 13px; }
.saju-test-page .saju-intro .intro-meta { width: fit-content; margin-top: 20px; }
.intro-start {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 58px;
    margin-top: 22px;
    padding: 0 15px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper-light);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    transition: background-color 150ms ease;
}
.intro-start:hover { background: var(--seal); }
.test-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin: 25px 0 16px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--rule-dark);
}
.test-summary > div { display: flex; align-items: baseline; gap: 14px; }
.test-summary strong { font-family: "Noto Serif KR", "AppleMyungjo", Batang, serif; font-size: 21px; letter-spacing: -.035em; }
.test-summary span { color: var(--ink-soft); font-size: 11px; }
.test-summary p { display: flex; gap: 6px; margin: 0; white-space: nowrap; }
.test-summary b { padding: 5px 8px; border: 1px solid var(--rule-dark); color: var(--ink-soft); font-size: 9px; }
.intro-mark, .hero-seal {
    position: relative;
    width: 240px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    justify-self: end;
    border: 1px solid var(--ink);
    border-radius: 50%;
}
.intro-mark::before, .intro-mark::after, .hero-seal::before, .hero-seal::after {
    position: absolute;
    background: var(--ink);
    content: "";
    opacity: .45;
}
.intro-mark::before, .hero-seal::before { width: 118%; height: 1px; }
.intro-mark::after, .hero-seal::after { width: 1px; height: 118%; }
.intro-mark > span, .hero-seal > span {
    position: relative;
    z-index: 1;
    font-family: "Songti SC", "Noto Serif CJK KR", serif;
    font-size: 112px;
    line-height: 1;
}
.intro-mark small, .hero-seal small {
    position: absolute;
    right: -9px;
    bottom: 20px;
    padding: 8px 7px;
    background: var(--seal);
    color: var(--paper-light);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
}

.stepbar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 0 38px;
    border-block: 1px solid var(--ink);
}
.stepbar span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px;
    border-right: 1px solid var(--rule);
    color: var(--ink-faint);
    font-size: 11px;
}
.stepbar span:last-child { border-right: 0; }
.stepbar b { font-family: Georgia, serif; font-size: 17px; font-weight: 400; }
.stepbar .active { background: var(--ink); color: var(--paper-light); }

.panel {
    position: relative;
    padding: 46px 56px 52px;
    border: 1px solid var(--ink);
    background: rgba(247, 243, 233, .76);
    box-shadow: 10px 10px 0 rgba(25, 24, 20, .12);
}
.birth-sheet { overflow: hidden; }
.birth-sheet::before {
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    border-bottom: 1px solid var(--ink);
    background: var(--seal);
    content: "";
}
.panel-index {
    position: absolute;
    top: 42px;
    right: 0;
    padding: 13px 10px;
    border-block: 1px solid var(--rule-dark);
    border-left: 1px solid var(--rule-dark);
    color: var(--seal);
    font-family: serif;
    font-size: 10px;
    letter-spacing: .2em;
    line-height: 1.8;
    text-align: center;
}
.panel-head { display: grid; grid-template-columns: 1fr 300px; align-items: end; gap: 70px; margin-bottom: 46px; }
.panel-head h2 { margin: 0; font-family: "Noto Serif KR", "AppleMyungjo", Batang, serif; font-size: 37px; letter-spacing: -.05em; line-height: 1.25; }
.panel-head > p { margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--rule-dark); color: var(--ink-soft); font-size: 11px; text-align: right; }
.panel-kicker { margin-bottom: 9px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 52px; counter-reset: field; }
.field { min-width: 0; display: grid; align-content: start; gap: 9px; margin: 0; padding: 0; border: 0; }
.field label, .field legend { color: var(--ink); font-size: 12px; font-weight: 780; }
.field label > span:first-child, .field legend > span:first-child { margin-right: 9px; color: var(--seal); font-family: Georgia, serif; font-size: 10px; }
.field input:not([type="radio"]):not([type="checkbox"]), .field select {
    width: 100%;
    min-height: 49px;
    padding: 0 4px;
    border: 0;
    border-bottom: 1px solid var(--ink);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    outline: none;
}
.field input:not([type="radio"]):not([type="checkbox"]):focus, .field select:focus { border-bottom: 3px solid var(--seal); }
.field small { color: var(--ink-faint); font-size: 10px; }
.choice-row { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule-dark); }
.choice-row label {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--rule-dark);
    background: transparent;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}
.choice-row label:last-child { border-right: 0; }
.choice-row input { position: absolute; opacity: 0; }
.choice-row label:has(input:checked) { background: var(--seal); color: var(--paper-light); }
.choice-row label:has(input:disabled) { opacity: .3; cursor: not-allowed; }
.inline { display: flex; align-items: center; gap: 8px; width: fit-content; cursor: pointer; }
.inline input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--seal); }
.notice {
    display: grid;
    grid-template-columns: 94px 1fr;
    gap: 18px;
    margin-top: 42px;
    padding: 17px 0;
    border-block: 1px solid var(--rule-dark);
    color: var(--ink-soft);
    font-size: 11px;
}
.notice b { color: var(--seal); }
.primary {
    width: 100%;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
    padding: 0 24px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--ink);
    color: var(--paper-light);
    font-weight: 850;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--paper), inset 0 0 0 4px var(--ink);
    transition: background-color 150ms ease, color 150ms ease;
}
.primary:hover { background: var(--seal); }
.primary b { color: #d6c59e; font-size: 11px; }
.primary i { margin-left: 15px; font-style: normal; font-size: 20px; }
.primary:disabled { opacity: .42; cursor: not-allowed; }
.error { margin: 13px 0 0; color: var(--seal-dark); font-size: 11px; font-weight: 700; }

.question-shell { max-width: 1060px; margin: 44px auto 90px; }
.question-top { display: flex; align-items: center; justify-content: space-between; color: var(--ink-soft); font-family: Georgia, serif; font-size: 11px; letter-spacing: .08em; }
.question-top > div { display: flex; align-items: center; gap: 18px; }
.question-top button { padding: 0; border: 0; border-bottom: 1px solid var(--rule-dark); background: transparent; color: var(--ink-soft); font-size: 9px; cursor: pointer; }
.question-top button:hover { color: var(--seal); border-color: var(--seal); }
.progress { height: 8px; margin: 12px 0 42px; border-block: 1px solid var(--ink); background: repeating-linear-gradient(90deg, transparent 0 calc(2.777% - 1px), var(--rule) calc(2.777% - 1px) 2.777%); }
.progress span { display: block; height: 100%; background: var(--seal); transition: width 380ms cubic-bezier(.22,.8,.25,1); }
.question-stage { display: grid; grid-template-columns: 260px 1fr; min-height: 520px; border: 1px solid var(--ink); background: var(--paper-light); box-shadow: 10px 10px 0 rgba(25, 24, 20, .12); }
.question-orbit { display: grid; place-items: center; align-content: center; padding: 34px; border-right: 1px solid var(--ink); background: var(--paper-deep); }
.orbit-ring { position: relative; width: 165px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; box-shadow: inset 0 0 0 14px var(--paper-deep), inset 0 0 0 15px var(--rule-dark); }
.orbit-ring::before, .orbit-ring::after { position: absolute; background: var(--ink); content: ""; opacity: .35; }
.orbit-ring::before { width: 118%; height: 1px; }
.orbit-ring::after { width: 1px; height: 118%; }
.orbit-ring > span { position: relative; z-index: 2; color: var(--seal); font-family: Georgia, serif; font-size: 39px; }
.orbit-hand { position: absolute; z-index: 3; top: 5px; left: calc(50% - 1px); width: 2px; height: 77px; background: var(--seal); transform-origin: 50% 77px; }
.orbit-hand::before { position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--seal); content: ""; }
.question-orbit > p { margin: 30px 0 0; font-family: serif; font-size: 11px; letter-spacing: .35em; }
.question-paper { position: relative; display: flex; flex-direction: column; padding: 50px 52px 42px; overflow: hidden; }
.question-paper::after { position: absolute; right: -18px; bottom: -42px; color: rgba(162,43,38,.045); font-family: serif; font-size: 170px; content: "問"; pointer-events: none; }
.dimension { margin: 0; color: var(--seal); font-size: 11px; font-weight: 850; letter-spacing: .05em; }
.question { min-height: 122px; margin: 18px 0 12px; font-family: "Noto Serif KR", "AppleMyungjo", Batang, serif; font-size: clamp(28px, 3.5vw, 42px); font-weight: 800; letter-spacing: -.05em; line-height: 1.34; word-break: keep-all; }
.answer-prompt { margin: 0 0 18px; color: var(--ink-faint); font-size: 11px; }
.scale { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--ink); }
.scale button { min-height: 92px; display: grid; place-items: center; align-content: center; gap: 6px; border: 0; border-right: 1px solid var(--rule-dark); background: transparent; cursor: pointer; transition: background-color 130ms ease, color 130ms ease; }
.scale button:last-child { border-right: 0; }
.scale button span { font-family: Georgia, serif; font-size: 23px; }
.scale button b { color: var(--ink-faint); font-size: 9px; font-weight: 650; }
.scale button:hover { background: var(--paper-deep); }
.scale button.selected { position: relative; background: var(--seal); color: var(--paper-light); }
.scale button.selected::after { position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,.45); content: ""; }
.scale button.selected b { color: #ead8c9; }
.question-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 32px; border-top: 1px solid var(--rule); }
.question-nav button { min-height: 45px; padding: 0; border: 0; border-bottom: 1px solid var(--ink); background: transparent; font-size: 11px; font-weight: 760; cursor: pointer; }
.question-nav button:disabled { opacity: .28; cursor: not-allowed; }
.question-nav .next { min-width: 150px; margin-left: auto; padding-inline: 16px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper-light); }
.question-nav .next[hidden] { display: none; }

.flow-dialog { width: min(850px, calc(100% - 36px)); padding: 0; border: 1px solid var(--ink); border-radius: 0; background: var(--paper-light); color: var(--ink); box-shadow: 14px 14px 0 rgba(0,0,0,.35); }
.flow-dialog::backdrop { background: rgba(24, 20, 16, .76); backdrop-filter: blur(3px); }
.dialog-inner { padding: 48px; }
.dialog-seal { position: absolute; top: 26px; right: 30px; width: 62px; aspect-ratio: 1; display: grid; place-items: center; border: 3px double var(--seal); color: var(--seal); font-family: serif; font-size: 28px; transform: rotate(7deg); }
.dialog-inner h2 { margin: 0; font-family: "Noto Serif KR", "AppleMyungjo", Batang, serif; font-size: 40px; letter-spacing: -.055em; line-height: 1.2; }
.dialog-inner > p:not(.eyebrow) { max-width: 630px; color: var(--ink-soft); font-size: 12px; }
.save-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; margin-top: 30px; border: 1px solid var(--ink); }
.save-option { position: relative; padding: 28px; border-right: 1px solid var(--ink); }
.save-option:last-child { border-right: 0; }
.save-option.recommended { background: var(--paper-deep); }
.save-option > small { color: var(--seal); font-size: 9px; font-weight: 850; }
.save-option strong { display: block; margin-top: 5px; font-family: "Noto Serif KR", serif; font-size: 21px; }
.save-option p { min-height: 42px; color: var(--ink-faint); font-size: 10px; }
.save-option input { width: 100%; min-height: 44px; padding: 0 5px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); }
.google-btn, .nickname-btn { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 0 15px; border: 1px solid var(--ink); border-radius: 0; font-weight: 800; cursor: pointer; }
.google-btn { background: var(--ink); color: var(--paper-light); }
.nickname-btn { background: transparent; color: var(--ink); }

.result-page {
    --result-divider: rgba(25, 24, 20, .18);
    --result-divider-soft: rgba(25, 24, 20, .10);
}
.result-page .wrap { max-width: 1180px; }
.result-page .site-head { border-bottom-color: var(--result-divider); }
.result-hero { padding: 88px 0 58px; }
.result-hero > div > p:last-child { max-width: 700px; }
.hero-seal { width: 220px; color: var(--seal); border-color: var(--seal); transform: rotate(-3deg); }
.hero-seal::before, .hero-seal::after { background: var(--seal); }
.hero-seal > span { font-size: 100px; }
.result-ribbon { display: flex; align-items: center; justify-content: center; gap: 26px; padding: 11px 18px; border-block: 1px solid var(--result-divider); color: var(--ink-faint); font-family: Georgia, serif; font-size: 10px; letter-spacing: .09em; }
.result-ribbon b { color: var(--seal); font-size: 16px; }
.result-grid { display: grid; grid-template-columns: repeat(12, 1fr); margin-top: 38px; border-top: 1px solid var(--result-divider); border-left: 1px solid var(--result-divider); }
.result-card { position: relative; display: grid; grid-template-columns: 76px 1fr; border-right: 1px solid var(--result-divider); border-bottom: 1px solid var(--result-divider); background: rgba(247,243,233,.62); }
.origin-card { grid-column: span 7; }
.trait-card { grid-column: span 5; }
.match-card, .element-card { grid-column: 1 / -1; }
.card-index { display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 33px; border-right: 1px solid var(--result-divider-soft); background: var(--paper-deep); }
.card-index span { font-family: serif; font-size: 24px; }
.card-index small { color: var(--ink-faint); font-size: 9px; writing-mode: vertical-rl; letter-spacing: .22em; }
.card-content { padding: 36px 38px 40px; }
.result-card .label { color: var(--seal); font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.result-card h2 { margin: 10px 0 9px; font-family: "Noto Serif KR", "AppleMyungjo", Batang, serif; font-size: 33px; letter-spacing: -.05em; line-height: 1.25; word-break: keep-all; }
.result-card p { color: var(--ink-soft); font-size: 12px; line-height: 1.75; word-break: keep-all; }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 27px; border: 1px solid var(--result-divider); }
.pillar { position: relative; padding: 14px 6px 16px; border-right: 1px solid var(--result-divider-soft); text-align: center; opacity: 0; transform: translateY(12px); }
.pillar:last-child { border-right: 0; }
.result-root.is-ready .pillar { animation: pillarRise 500ms both; }
.result-root.is-ready .pillar:nth-child(2) { animation-delay: 80ms; }
.result-root.is-ready .pillar:nth-child(3) { animation-delay: 160ms; }
.result-root.is-ready .pillar:nth-child(4) { animation-delay: 240ms; }
@keyframes pillarRise { to { opacity: 1; transform: translateY(0); } }
.pillar span { display: block; margin-bottom: 8px; color: var(--ink-faint); font-size: 8px; }
.pillar strong { display: block; font-family: "Songti SC", "Noto Serif CJK KR", serif; font-size: 26px; letter-spacing: .12em; }
.bars { display: grid; gap: 11px; margin-top: 24px; }
.bar { display: grid; grid-template-columns: 78px 1fr 39px; align-items: center; gap: 10px; font-size: 10px; }
.bar i { position: relative; height: 7px; border-block: 1px solid var(--rule-dark); background: repeating-linear-gradient(90deg, transparent 0 19%, var(--rule) 19% 20%); }
.bar i::after { width: 0; height: 100%; display: block; background: var(--seal); content: ""; transition: width 900ms cubic-bezier(.2,.8,.2,1); }
.result-root.is-ready .bar i::after { width: var(--value); }
.bar b { color: var(--seal); font-family: Georgia, serif; text-align: right; }
.match-card { min-height: 340px; display: grid; grid-template-columns: minmax(360px, .9fr) 1.5fr; padding: 46px 54px; background: var(--night); color: var(--paper-light); overflow: hidden; }
.match-card::before { position: absolute; inset: 15px; border: 1px solid rgba(237,231,216,.13); content: ""; pointer-events: none; }
.match-lead { position: relative; z-index: 1; padding-right: 52px; border-right: 1px solid rgba(237,231,216,.15); }
.match-card .label { color: #d98074; }
.match-card h2 { max-width: 430px; margin-top: 19px; color: var(--paper-light); font-size: 38px; }
.match-card p { color: #aaa69d; }
.match-points { position: relative; z-index: 1; display: grid; align-content: center; gap: 0; padding-left: 52px; }
.match-points div { display: grid; grid-template-columns: 58px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(237,231,216,.11); }
.match-points div:last-child { border-bottom: 0; }
.match-points strong { color: #d98074; font-family: serif; font-size: 12px; }
.match-points span { color: #ddd6c9; font-size: 11px; }
.match-seal { position: absolute; right: -18px; bottom: -48px; color: rgba(162,43,38,.28); font-family: serif; font-size: 190px; line-height: 1; transform: rotate(-8deg); }
.element-content { display: grid; grid-template-columns: .85fr 310px 1fr; align-items: center; gap: 46px; }
.element-content > div:first-child p { max-width: 310px; }
.element-wheel { width: 270px; justify-self: center; }
.element-wheel svg { width: 100%; overflow: visible; }
.element-wheel .wheel-grid, .element-wheel line { fill: none; stroke: var(--rule); stroke-width: 1; }
.element-wheel .wheel-value { fill: rgba(162,43,38,.16); stroke: var(--seal); stroke-width: 2; transform-origin: 110px 110px; transform: scale(0); transition: transform 850ms cubic-bezier(.2,.9,.25,1); }
.result-root.is-ready .element-wheel .wheel-value { transform: scale(1); }
.element-wheel circle { fill: var(--ink); }
.element-wheel text { fill: var(--ink); font-family: serif; font-size: 11px; text-anchor: middle; }
.element-bars { margin: 0; }
.element-bars .bar[data-key="wood"] i::after { background: var(--wood); }
.element-bars .bar[data-key="fire"] i::after { background: var(--fire); }
.element-bars .bar[data-key="earth"] i::after { background: var(--earth); }
.element-bars .bar[data-key="metal"] i::after { background: var(--metal); }
.element-bars .bar[data-key="water"] i::after { background: var(--water); }
.element-report { margin-top: 58px; }
.section-title-row { display: grid; grid-template-columns: 1fr minmax(280px, 430px); align-items: end; gap: 48px; margin-bottom: 22px; }
.section-title-row .label, .compatibility-intro .label { margin: 0 0 8px; color: var(--seal); font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.section-title-row h2 { margin: 0; font-family: "Noto Serif KR", "AppleMyungjo", Batang, serif; font-size: 35px; letter-spacing: -.05em; }
.section-title-row > p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.7; }
.element-report-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--result-divider); border-left: 1px solid var(--result-divider); }
.element-count-sheet, .element-fit-sheet { padding: 30px; border-right: 1px solid var(--result-divider); border-bottom: 1px solid var(--result-divider); background: rgba(247,243,233,.62); }
.analysis-head { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.analysis-head > span { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; color: var(--seal); font-family: serif; }
.analysis-head div { display: grid; gap: 3px; }
.analysis-head strong { font-size: 14px; }
.analysis-head small { color: var(--ink-faint); font-size: 9px; }
.element-count-list, .ideal-element-list { display: grid; gap: 13px; }
.element-count-row { display: grid; grid-template-columns: 70px 1fr 34px 32px; align-items: center; gap: 10px; font-size: 10px; }
.element-count-row i, .ideal-element-row i { height: 7px; border-block: 1px solid var(--rule-dark); background: repeating-linear-gradient(90deg, transparent 0 19%, var(--rule) 19% 20%); }
.element-count-row i b, .ideal-element-row i b { height: 100%; display: block; background: var(--element-color); }
.element-count-row strong { color: var(--ink); text-align: right; }
.element-count-row small { color: var(--ink-faint); font-family: Georgia, serif; text-align: right; }
.ideal-element-row { display: grid; grid-template-columns: 70px 1fr 36px; align-items: center; gap: 10px; font-size: 10px; }
.ideal-element-row strong { color: var(--seal); font-family: Georgia, serif; text-align: right; }
.analysis-note { margin: 22px 0 0; padding-top: 17px; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 10px; line-height: 1.7; }
.partner-guide { position: relative; margin-top: 48px; padding: 40px; background: var(--night); color: var(--paper-light); overflow: hidden; }
.partner-guide::after { position: absolute; right: -25px; top: -55px; color: rgba(162,43,38,.22); font-family: serif; font-size: 210px; content: "緣"; transform: rotate(-8deg); }
.section-title-row.inverse { position: relative; z-index: 1; padding-bottom: 23px; border-bottom: 1px solid rgba(237,231,216,.13); }
.section-title-row.inverse h2 { color: var(--paper-light); }
.section-title-row.inverse > p { color: #aaa69d; }
.partner-guide-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); }
.partner-recommendation { min-height: 190px; padding: 27px 28px; border-right: 1px solid rgba(237,231,216,.12); }
.partner-recommendation:last-child { border-right: 0; }
.partner-recommendation > span { color: #d98074; font-family: Georgia, serif; font-size: 9px; letter-spacing: .09em; }
.partner-recommendation h3 { margin: 18px 0 10px; color: var(--paper-light); font-family: "Noto Serif KR", "AppleMyungjo", Batang, serif; font-size: 20px; line-height: 1.35; letter-spacing: -.04em; }
.partner-recommendation p { margin: 0; color: #aaa69d; font-size: 10px; line-height: 1.75; }
.compatibility-lab { margin-top: 58px; border: 1px solid var(--result-divider); background: rgba(247,243,233,.62); }
.compatibility-intro { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; padding: 45px; border-bottom: 1px solid var(--result-divider); }
.compatibility-intro .label { grid-column: 1 / -1; margin-bottom: -40px; }
.compatibility-intro h2 { margin: 0; font-family: "Noto Serif KR", "AppleMyungjo", Batang, serif; font-size: 38px; line-height: 1.22; letter-spacing: -.055em; }
.compatibility-intro > p:last-child { align-self: end; margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.8; }
.partner-form { padding: 38px 45px 44px; }
.partner-form-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 33px 38px; }
.partner-form .field:nth-child(4) { grid-column: span 2; }
.partner-form .field.compact label, .partner-form .field.compact legend { font-size: 11px; }
.partner-privacy { margin: 32px 0 0; padding: 13px 0; border-block: 1px solid var(--rule-dark); color: var(--ink-faint); font-size: 10px; }
.compatibility-submit { width: 100%; min-height: 61px; display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding: 0 23px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper-light); font: inherit; font-size: 12px; font-weight: 820; cursor: pointer; }
.compatibility-submit b { color: #d6c59e; font-size: 10px; }
.compatibility-result { display: grid; grid-template-columns: 210px 1fr; border-top: 1px solid var(--result-divider); background: var(--paper-light); scroll-margin-top: 24px; }
.compatibility-score { display: grid; place-items: center; align-content: center; min-height: 270px; padding: 25px; border-right: 1px solid var(--result-divider); background: var(--paper-deep); text-align: center; }
.compatibility-score > span { color: var(--seal); font-size: 10px; font-weight: 800; }
.compatibility-score strong { margin-top: 4px; color: var(--seal); font-family: Georgia, serif; font-size: 74px; line-height: 1; }
.compatibility-score small { color: var(--ink-faint); font-family: Georgia, serif; }
.compatibility-score p { margin: 14px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.compatibility-copy { align-self: center; padding: 38px 42px; }
.compatibility-copy h3 { margin: 11px 0 10px; font-family: "Noto Serif KR", "AppleMyungjo", Batang, serif; font-size: 28px; letter-spacing: -.05em; }
.compatibility-copy > p:last-child { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.8; }
.couple-elements { grid-column: 1 / -1; display: grid; gap: 13px; padding: 31px 42px; border-top: 1px solid var(--result-divider); }
.couple-element-row { display: grid; grid-template-columns: 70px 1fr 190px; align-items: center; gap: 15px; }
.couple-element-row > strong { font-size: 10px; }
.couple-element-row > div { position: relative; height: 17px; border-block: 1px solid var(--rule-dark); background: repeating-linear-gradient(90deg, transparent 0 19%, var(--rule) 19% 20%); }
.couple-element-row > div span, .couple-element-row > div i { position: absolute; left: 0; display: block; height: 6px; background: var(--element-color); }
.couple-element-row > div span { top: 1px; }
.couple-element-row > div i { bottom: 1px; opacity: .45; }
.couple-element-row small { color: var(--ink-faint); font-family: Georgia, serif; font-size: 9px; text-align: right; }
.compatibility-points { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--result-divider); }
.compatibility-point { min-height: 150px; padding: 25px 30px; border-right: 1px solid var(--result-divider-soft); border-bottom: 1px solid var(--result-divider-soft); }
.compatibility-point:nth-child(2n) { border-right: 0; }
.compatibility-point:nth-last-child(-n+2) { border-bottom: 0; }
.compatibility-point > span { color: var(--seal); font-size: 9px; font-weight: 800; }
.compatibility-point strong { display: block; margin: 12px 0 7px; font-size: 13px; }
.compatibility-point p { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.7; }
.compatibility-point.caution { background: rgba(162,43,38,.045); }
.disclaimer { display: grid; grid-template-columns: 110px 1fr; gap: 26px; margin: 28px 0 0; padding: 18px 0; border-block: 1px solid var(--result-divider); color: var(--ink-soft); font-size: 10px; }
.disclaimer b { color: var(--seal); }
.result-actions { display: flex; gap: 12px; margin: 30px 0 86px; }
.result-actions a, .result-actions button { min-height: 49px; display: flex; align-items: center; justify-content: center; gap: 30px; padding: 0 21px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: 11px; font-weight: 780; text-decoration: none; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.result-actions .accent { min-width: 245px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper-light); }
.result-actions .accent:hover { background: var(--seal); }
.social-share-panel { margin: 34px 0 0; padding: 24px; border: 1px solid var(--result-divider); background: rgba(255,255,255,.22); }
.social-share-heading { display: grid; gap: 5px; margin-bottom: 16px; }
.social-share-heading p { margin: 0; color: var(--seal); font-family: Georgia, serif; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.social-share-heading h2 { margin: 0; font-family: "Noto Serif KR", "AppleMyungjo", Batang, serif; font-size: 21px; letter-spacing: -.045em; }
.social-share-heading span { color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.social-share-buttons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--result-divider); }
.social-share-button { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; border: 0; border-right: 1px solid var(--result-divider-soft); background: transparent; color: var(--ink); font: inherit; font-size: 11px; text-decoration: none; cursor: pointer; }
.social-share-button:last-child { border-right: 0; }
.social-share-button .social-share-icon { width: 25px; height: 25px; display: grid; flex: 0 0 25px; place-items: center; border: 1px solid var(--result-divider); border-radius: 50%; transition: transform 150ms ease; }
.social-share-icon svg { width: 13px; height: 13px; display: block; fill: currentColor; }
.social-x .social-share-icon, .social-threads .social-share-icon { border-color: #111; background: #111; color: #fff; }
.social-facebook .social-share-icon { border-color: #1877f2; background: #1877f2; color: #fff; }
.social-bluesky .social-share-icon { border-color: #1185fe; background: #1185fe; color: #fff; }
.social-share-button b { font-size: 11px; }
.social-share-button:hover { background: var(--ink); color: var(--paper-light); }
.social-share-button:hover .social-share-icon { transform: scale(1.08); }
.social-share-toast { position: fixed; z-index: 140; right: 20px; bottom: 20px; max-width: min(380px, calc(100vw - 40px)); margin: 0; padding: 13px 15px; border: 1px solid var(--ink); background: var(--paper-light); box-shadow: 8px 8px 0 rgba(25,24,20,.22); color: var(--ink); font-size: 11px; font-weight: 700; }
.empty-result { margin-top: 54px; }
.empty-result h2 { font-family: serif; font-size: 36px; }
.empty-result .primary { text-decoration: none; }
.empty-seal { position: absolute; top: 30px; right: 30px; color: var(--seal); font-family: serif; font-size: 60px; opacity: .35; }
.footer { display: flex; justify-content: space-between; padding: 30px 0 38px; border-top: 1px solid var(--result-divider); color: var(--ink-faint); font-family: Georgia, serif; font-size: 9px; letter-spacing: .05em; }

@media (max-width: 900px) {
    .saju-intro, .result-hero { grid-template-columns: minmax(0, 1fr) 180px; gap: 40px; }
    .intro-mark, .hero-seal { width: 170px; }
    .intro-mark > span, .hero-seal > span { font-size: 78px; }
    .panel { padding-inline: 36px; }
    .question-stage { grid-template-columns: 190px 1fr; }
    .question-orbit { padding: 20px; }
    .orbit-ring { width: 130px; }
    .orbit-hand { height: 60px; transform-origin: 50% 60px; }
    .question-paper { padding-inline: 35px; }
    .origin-card, .trait-card { grid-column: 1 / -1; }
    .element-content { grid-template-columns: 1fr 240px; }
    .element-bars { grid-column: 1 / -1; }
    .element-wheel { width: 220px; }
    .element-report-grid { grid-template-columns: 1fr; }
    .partner-guide-grid { grid-template-columns: 1fr; }
    .partner-recommendation { min-height: auto; border-right: 0; border-bottom: 1px solid rgba(237,231,216,.22); }
    .partner-recommendation:last-child { border-bottom: 0; }
    .partner-form-grid { grid-template-columns: 1fr 1fr; }
    .partner-form .field:nth-child(4) { grid-column: auto; }
    .partner-form .field:last-child { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    body::before { left: 8px; width: 1px; }
    .wrap { width: calc(100% - 32px); }
    .site-head { min-height: 64px; grid-template-columns: 1fr auto; }
    .brand img { width: 114px; }
    .book-title { display: none; }
    .head-link { font-size: 10px; }
    .intro { padding: 50px 0 34px; }
    .saju-test-page .saju-intro { padding: 27px 0 18px; }
    .saju-test-page .saju-intro h1 { font-size: 34px; line-height: 1.18; }
    .saju-test-page .saju-intro .intro-copy > p:not(.eyebrow) { margin-top: 11px; font-size: 12px; }
    .saju-test-page .saju-intro .intro-meta { width: 100%; margin-top: 15px; }
    .saju-intro, .result-hero { grid-template-columns: 1fr; gap: 35px; }
    .intro h1, .result-hero h1 { font-size: clamp(43px, 12vw, 57px); line-height: 1.08; }
    .intro-copy > p:not(.eyebrow), .result-hero > div > p:last-child { font-size: 13px; }
    .intro-mark, .hero-seal { width: 128px; justify-self: start; margin-left: 17px; }
    .intro-mark > span, .hero-seal > span { font-size: 60px; }
    .intro-mark small, .hero-seal small { right: -20px; bottom: 5px; }
    .intro-meta { display: grid; grid-template-columns: repeat(3, 1fr); }
    .intro-meta span { padding: 11px 7px; text-align: center; }
    .intro-start { width: 100%; margin-top: 16px; }
    .test-summary { align-items: flex-start; margin-top: 18px; }
    .test-summary > div { display: grid; gap: 2px; }
    .test-summary strong { font-size: 18px; }
    .test-summary span { font-size: 9px; }
    .test-summary p { gap: 3px; }
    .test-summary b { padding: 4px 5px; }
    .stepbar span { gap: 5px; padding: 11px 4px; font-size: 9px; }
    .stepbar b { font-size: 13px; }
    .panel { padding: 34px 22px 31px; box-shadow: 6px 6px 0 rgba(25,24,20,.12); }
    .panel-index { display: none; }
    .panel-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 34px; }
    .panel-head h2 { font-size: 30px; }
    .panel-head > p { text-align: left; }
    .form-grid { grid-template-columns: 1fr; gap: 30px; }
    .choice-row { grid-template-columns: repeat(3, 1fr); }
    .notice { grid-template-columns: 1fr; gap: 5px; }
    .primary { padding-inline: 15px; }
    .primary b { font-size: 9px; }
    .question-shell { margin-top: 26px; }
    .progress { margin-bottom: 18px; }
    .question-stage { grid-template-columns: 1fr; box-shadow: 6px 6px 0 rgba(25,24,20,.12); }
    .question-orbit { grid-template-columns: auto 1fr; justify-items: start; min-height: 105px; padding: 14px 24px; border-right: 0; border-bottom: 1px solid var(--ink); }
    .orbit-ring { width: 76px; }
    .orbit-ring > span { font-size: 22px; }
    .orbit-hand { top: 4px; height: 34px; transform-origin: 50% 34px; }
    .question-orbit > p { margin: 0 0 0 25px; font-size: 9px; }
    .question-paper { min-height: 560px; padding: 31px 20px 24px; }
    .question { min-height: 135px; font-size: 29px; }
    .scale { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .scale button { min-width: 0; min-height: 72px; }
    .scale button span { font-size: 19px; }
    .scale button b { display: none; }
    .question-nav { margin-top: 28px; }
    .question-nav .next { min-width: 125px; }
    .dialog-inner { padding: 35px 22px 25px; }
    .dialog-seal { width: 45px; top: 20px; right: 17px; font-size: 21px; }
    .dialog-inner h2 { font-size: 31px; }
    .save-grid { grid-template-columns: 1fr; }
    .save-option { border-right: 0; border-bottom: 1px solid var(--ink); }
    .save-option:last-child { border-bottom: 0; }
    .result-hero { padding: 57px 0 39px; }
    .result-ribbon { justify-content: flex-start; gap: 15px; overflow: hidden; white-space: nowrap; }
    .result-grid { margin-top: 24px; }
    .result-card { grid-template-columns: 48px 1fr; }
    .card-content { padding: 28px 20px 31px; }
    .card-index { padding-top: 26px; }
    .result-card h2 { font-size: 28px; }
    .pillars { margin-top: 20px; }
    .pillar { padding-inline: 2px; }
    .pillar strong { font-size: 20px; letter-spacing: 0; }
    .bar { grid-template-columns: 65px 1fr 34px; }
    .match-card { min-height: auto; grid-template-columns: 1fr; padding: 35px 27px; }
    .match-lead { padding: 0 0 25px; border-right: 0; border-bottom: 1px solid rgba(237,231,216,.15); }
    .match-card h2 { font-size: 31px; }
    .match-points { padding: 16px 0 0; }
    .match-points div { grid-template-columns: 48px 1fr; }
    .element-content { grid-template-columns: 1fr; gap: 25px; }
    .element-wheel { width: min(230px, 80%); }
    .element-report { margin-top: 43px; }
    .section-title-row { grid-template-columns: 1fr; gap: 10px; }
    .section-title-row h2 { font-size: 30px; }
    .element-count-sheet, .element-fit-sheet { padding: 24px 18px; }
    .element-count-row { grid-template-columns: 62px 1fr 30px 29px; gap: 7px; }
    .ideal-element-row { grid-template-columns: 62px 1fr 32px; gap: 7px; }
    .partner-guide { margin-top: 35px; padding: 28px 20px; }
    .partner-recommendation { padding: 24px 4px; }
    .compatibility-lab { margin-top: 42px; }
    .compatibility-intro { grid-template-columns: 1fr; gap: 13px; padding: 31px 20px; }
    .compatibility-intro .label { grid-column: auto; margin-bottom: 3px; }
    .compatibility-intro h2 { font-size: 31px; }
    .partner-form { padding: 29px 20px 31px; }
    .partner-form-grid { grid-template-columns: 1fr; gap: 27px; }
    .partner-form .field:last-child { grid-column: auto; }
    .compatibility-result { grid-template-columns: 1fr; }
    .compatibility-score { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--result-divider); }
    .compatibility-copy { padding: 28px 20px; }
    .compatibility-copy h3 { font-size: 24px; }
    .couple-elements { padding: 26px 20px; }
    .couple-element-row { grid-template-columns: 55px 1fr; gap: 9px; }
    .couple-element-row small { grid-column: 2; text-align: left; }
    .compatibility-points { grid-template-columns: 1fr; }
    .compatibility-point { min-height: auto; padding: 23px 20px; border-right: 0; }
    .compatibility-point:nth-last-child(-n+2) { border-bottom: 1px solid var(--result-divider-soft); }
    .compatibility-point:last-child { border-bottom: 0; }
    .disclaimer { grid-template-columns: 1fr; gap: 5px; }
    .result-actions { flex-direction: column; }
    .result-actions a, .result-actions button, .result-actions .accent { width: 100%; }
    .social-share-panel { padding: 18px; }
    .social-share-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .social-share-button:nth-child(2n) { border-right: 0; }
    .social-share-button { border-bottom: 1px solid var(--result-divider-soft); }
    .social-share-button:nth-last-child(-n+2) { border-bottom: 0; }
    .footer { flex-direction: column; gap: 7px; }
}

@media print {
    body { background: #fff; }
    body::before, body::after, .site-head, .partner-form, .social-share-panel, .result-actions, .footer { display: none !important; }
    .wrap { width: 100%; max-width: none !important; }
    .result-hero { padding-top: 20px; }
    .result-card { break-inside: avoid; }
    .match-card { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .disclaimer { margin-bottom: 0; }
}

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