:root { --chae-ivory: #fff4de; --chae-gold: #e3b65d; --chae-wine: #7b2948; --chae-panel: rgba(33, 16, 31, .9); }
* { box-sizing: border-box; }
.chaeryeong-page { min-height: 100vh; margin: 0; background: radial-gradient(circle at 50% -10%, #5d2345 0, #1a0d19 38%, #080508 78%); color: var(--chae-ivory); }
.chaeryeong-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(45deg, transparent 48%, rgba(255,255,255,.12) 50%, transparent 52%); background-size: 38px 38px; }
.chaeryeong-shell { position: relative; width: min(100%, 46rem); margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(2rem, env(safe-area-inset-bottom)); }
.chaeryeong-hero { position: relative; overflow: hidden; min-height: 29rem; padding: 4.6rem 1.35rem 2rem; border: 1px solid rgba(227,182,93,.3); border-radius: 0 0 1.8rem 1.8rem; background: linear-gradient(150deg, rgba(76,24,55,.92), rgba(18,8,17,.94)); box-shadow: 0 26px 70px rgba(0,0,0,.48); }
.chaeryeong-back { position: absolute; z-index: 3; top: 1.15rem; left: 1.2rem; color: #dac9bd; font-size: .82rem; text-decoration: none; }
.chaeryeong-oracle { position: absolute; inset: 1.4rem -3.3rem auto auto; width: 15rem; opacity: .72; filter: drop-shadow(0 0 28px rgba(227,182,93,.26)); }
.chaeryeong-oracle svg { display: block; width: 100%; }
.chaeryeong-eyebrow { position: relative; margin: 10rem 0 .6rem; color: var(--chae-gold); font-size: .67rem; font-weight: 900; letter-spacing: .15em; }
.chaeryeong-hero h1 { position: relative; margin: 0; font-family: Georgia, "Noto Serif KR", serif; font-size: clamp(2.35rem, 11vw, 4rem); line-height: 1.08; letter-spacing: -.06em; }
.chaeryeong-hero h1 span { color: var(--chae-gold); }
.chaeryeong-hero > p:not(.chaeryeong-eyebrow) { position: relative; max-width: 28rem; margin: 1.1rem 0; color: #d5c5bb; font-size: .9rem; line-height: 1.75; }
.chaeryeong-pilot { position: relative; display: inline-flex; padding: .48rem .72rem; border: 1px solid rgba(227,182,93,.45); border-radius: 999px; color: #f1d99e; background: rgba(0,0,0,.22); font-size: .7rem; letter-spacing: .06em; }
.chaeryeong-card { margin-top: 1rem; padding: 1.25rem; border: 1px solid rgba(227,182,93,.22); border-radius: 1.35rem; background: var(--chae-panel); box-shadow: 0 18px 45px rgba(0,0,0,.28); }
.chaeryeong-heading { display: flex; gap: .8rem; align-items: center; margin-bottom: 1rem; }
.chaeryeong-heading > span { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid rgba(227,182,93,.5); border-radius: 50%; color: var(--chae-gold); font: .76rem Georgia, serif; }
.chaeryeong-heading p { margin: 0 0 .12rem; color: #b89ca9; font-size: .66rem; font-weight: 900; letter-spacing: .14em; }
.chaeryeong-heading h2 { margin: 0; font-family: Georgia, "Noto Serif KR", serif; font-size: 1.2rem; }
.chaeryeong-products { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.chaeryeong-products button { min-height: 8.6rem; padding: .9rem; border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; background: rgba(255,255,255,.035); color: #d8c9c2; text-align: left; }
.chaeryeong-products button[aria-pressed="true"] { border-color: #f3d17a; background: linear-gradient(145deg, rgba(123,41,72,.74), rgba(54,22,45,.9)); box-shadow: 0 0 0 2px rgba(243,209,122,.14), 0 10px 28px rgba(0,0,0,.32); }
.chaeryeong-products small,.chaeryeong-products strong,.chaeryeong-products span { display: block; }
.chaeryeong-products small { color: #c7aeb7; font-size: .62rem; }
.chaeryeong-products strong { margin: .45rem 0; color: var(--chae-ivory); font: 1.4rem Georgia, "Noto Serif KR", serif; }
.chaeryeong-products span { font-size: .75rem; line-height: 1.5; }
.chaeryeong-grid { display: grid; gap: .65rem; }
.chaeryeong-grid--date { grid-template-columns: 1.45fr .8fr .8fr; }
.chaeryeong-grid--time { grid-template-columns: repeat(2, .72fr) repeat(2, 1.1fr); margin-top: .65rem; }
.chaeryeong-grid label { color: #beaeb4; font-size: .69rem; font-weight: 800; }
.chaeryeong-grid input,.chaeryeong-grid select { width: 100%; min-height: 48px; margin-top: .32rem; padding: .65rem .7rem; border: 1px solid rgba(227,182,93,.2); border-radius: .68rem; outline: none; background: #120a12; color: var(--chae-ivory); font: inherit; }
.chaeryeong-grid input:focus,.chaeryeong-grid select:focus { border-color: #f0ca6d; box-shadow: 0 0 0 3px rgba(240,202,109,.12); }
.chaeryeong-check { display: flex; gap: .5rem; align-items: center; margin-top: .85rem; color: #c4b4b8; font-size: .75rem; }
.chaeryeong-privacy { margin: 1rem 0; color: #9f8c95; font-size: .7rem; line-height: 1.6; }
.chaeryeong-error { margin: .8rem 0; padding: .75rem; border: 1px solid #a2465e; border-radius: .7rem; background: rgba(112,24,52,.26); color: #ffdce4; font-size: .78rem; }
.chaeryeong-submit { display: flex; width: 100%; min-height: 54px; align-items: center; justify-content: space-between; padding: .8rem 1rem; border: 1px solid #ffe4a1; border-radius: .82rem; background: linear-gradient(135deg, #ffe9ae, #d8a94e 52%, #8c5524); color: #24130f; font-weight: 900; box-shadow: 0 12px 28px rgba(181,116,43,.25), inset 0 1px rgba(255,255,255,.65); }
.chaeryeong-result { margin-top: 1rem; padding: 1.3rem; border: 1px solid rgba(243,209,122,.42); border-radius: 1.4rem; background: linear-gradient(145deg, rgba(66,24,49,.98), rgba(17,8,16,.98)); box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 32px rgba(227,182,93,.1); }
.chaeryeong-result__eyebrow { margin: 0; color: var(--chae-gold); font-size: .68rem; font-weight: 900; letter-spacing: .13em; }
.chaeryeong-result h2 { margin: .45rem 0 .3rem; font: 1.75rem Georgia, "Noto Serif KR", serif; }
.chaeryeong-result__meta { color: #bba8b0; font-size: .73rem; }
.chaeryeong-toc { margin-top: 1rem; padding: 1rem; border: 1px solid rgba(227,182,93,.22); border-radius: 1rem; background: rgba(255,255,255,.035); }
.chaeryeong-toc__eyebrow { margin: 0 0 .35rem; color: var(--chae-gold); font-size: .62rem; font-weight: 900; letter-spacing: .16em; }
.chaeryeong-toc h3 { margin: 0 0 .8rem; color: #f3d99b; font: 1.08rem Georgia, "Noto Serif KR", serif; }
.chaeryeong-toc ol { display: grid; gap: .48rem; margin: 0; padding: 0; list-style: none; }
.chaeryeong-toc__item a { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: .55rem; align-items: baseline; color: #e9dce0; font-size: .76rem; line-height: 1.45; text-decoration: none; word-break: keep-all; }
.chaeryeong-toc__item span { color: var(--chae-gold); font: .68rem Georgia, serif; letter-spacing: .08em; }
.chaeryeong-reading-pages { display: grid; gap: 1rem; margin-top: 1rem; }
.chaeryeong-reading-sheet { position: relative; isolation: isolate; min-height: min(158vw, 50rem); overflow: hidden; padding: 15% 10% 12%; border: 1px solid rgba(227,182,93,.42); border-radius: 1.05rem; background-position: center; background-size: cover; box-shadow: 0 18px 42px rgba(0,0,0,.3); color: #37262b; }
.chaeryeong-reading-sheet::before { content: ""; position: absolute; z-index: -1; inset: 8% 6%; border-radius: 1rem; background: radial-gradient(ellipse at center, rgba(255,250,238,.78) 0, rgba(255,248,235,.52) 58%, rgba(255,248,235,0) 82%); }
.chaeryeong-reading-sheet--bg-01 { background-image: url("./assets/reading/chaeryeong-bg-basic-1.jpg"); }
.chaeryeong-reading-sheet--bg-02 { background-image: url("./assets/reading/chaeryeong-bg-basic-2.jpg"); }
.chaeryeong-reading-sheet--bg-03 { background-image: url("./assets/reading/chaeryeong-bg-accent-1.jpg"); }
.chaeryeong-reading-sheet--bg-04 { background-image: url("./assets/reading/chaeryeong-bg-accent-2.jpg"); }
.chaeryeong-reading-sheet__content { position: relative; z-index: 1; }
.chaeryeong-reading-sheet__heading { display: flex; gap: .55rem; align-items: center; justify-content: space-between; margin-bottom: .55rem; }
.chaeryeong-reading-sheet__eyebrow { margin: 0 !important; color: #87592f !important; font-size: .66rem !important; font-weight: 900; letter-spacing: .15em; }
.chaeryeong-reading-sheet__status { flex: none; padding: .25rem .45rem; border: 1px solid rgba(104,68,42,.25); border-radius: 999px; background: rgba(255,250,238,.55); color: #714d34; font-size: .58rem; font-weight: 900; }
.chaeryeong-result .chaeryeong-reading-sheet h3 { margin: 0 0 1rem; color: #4b2634; font: 1.35rem/1.35 Georgia, "Noto Serif KR", serif; word-break: keep-all; }
.chaeryeong-reading-sheet p:not(.chaeryeong-reading-sheet__eyebrow) { margin: .68rem 0; color: #3f3435; font-size: clamp(.86rem, 4vw, .98rem); font-weight: 600; line-height: 1.82; word-break: keep-all; }
.chaeryeong-reading-sheet__proof { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid rgba(84,55,42,.16); color: #5d463d; font-size: .7rem; }
.chaeryeong-reading-sheet__proof summary { cursor: pointer; font-weight: 900; }
.chaeryeong-reading-sheet__proof p { font-size: .68rem !important; line-height: 1.55 !important; overflow-wrap: anywhere; }
.chaeryeong-facts-card,.chaeryeong-locked { margin-top: 1rem; padding: 1rem; border: 1px solid rgba(255,255,255,.08); border-radius: .9rem; background: rgba(255,255,255,.035); }
.chaeryeong-result h3 { margin: 0 0 .65rem; color: #f3d99b; font: 1rem Georgia, "Noto Serif KR", serif; }
.chaeryeong-facts-card p,.chaeryeong-locked p { margin: .55rem 0; color: #e0d3ce; font-size: .88rem; line-height: 1.8; }
.chaeryeong-result__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.chaeryeong-result__facts div { padding: .7rem; border-radius: .65rem; background: rgba(0,0,0,.2); }
.chaeryeong-result__facts small,.chaeryeong-result__facts strong { display: block; }
.chaeryeong-result__facts small { color: #a9959f; font-size: .62rem; }
.chaeryeong-result__facts strong { margin-top: .25rem; color: var(--chae-ivory); }
.chaeryeong-locked { border-color: rgba(227,182,93,.25) !important; }
.chaeryeong-locked span { display: inline-flex; margin-bottom: .4rem; padding: .28rem .5rem; border-radius: 999px; background: rgba(227,182,93,.12); color: #f1d594; font-size: .61rem; font-weight: 900; }
.chaeryeong-proof { margin-top: 1rem; color: #9f8e96; font-size: .68rem; word-break: break-all; }
.chaeryeong-proof summary { min-height: 44px; display: flex; align-items: center; color: #c6aeb7; cursor: pointer; }
.chaeryeong-proof p { color: #9f8e96 !important; font-size: .68rem !important; }
.chaeryeong-boundary { margin: 1rem 0; padding: 1rem; border-left: 3px solid var(--chae-gold); border-radius: 0 .85rem .85rem 0; background: rgba(255,255,255,.035); }
.chaeryeong-boundary strong { color: #f2d797; }
.chaeryeong-boundary p { margin: .45rem 0 0; color: #b9a8ae; font-size: .74rem; line-height: 1.65; }
.chaeryeong-shell footer { display: flex; justify-content: space-between; padding: 1rem .2rem; color: #846e79; font-size: .67rem; }
.chaeryeong-shell footer a { color: #a8909a; }
@media (max-width: 390px) { .chaeryeong-shell { padding-inline: .7rem; } .chaeryeong-hero { min-height: 28rem; } .chaeryeong-products { grid-template-columns: 1fr; } .chaeryeong-products button { min-height: 7rem; } .chaeryeong-grid--time { grid-template-columns: repeat(2, 1fr); } .chaeryeong-result { padding: .78rem; } .chaeryeong-reading-sheet { padding: 18% 10% 13%; } }
@media (min-width: 700px) { .chaeryeong-hero { padding-inline: 2.2rem; } .chaeryeong-card,.chaeryeong-result { padding: 1.7rem; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; } }