:root{--bg:#e9dcc0;--panel:#f2e7cf;--panel2:#e1cdaa;--line:#bc9e764d;--line2:#a88b60;--gold:#963d2c;--gold2:#653525;--ink:#271e16;--muted:#6c5841;--dim:#79654d;--seal:#9b3327;--r:3px}
body{background-color:var(--bg);background-image:url('paper-grain.webp');background-size:700px;font-size:16px}
::selection{background:#a63c2c;color:#fff2d6}
.top{height:78px;background:#e9dcc0ed;border-color:var(--line);padding-inline:max(24px,5vw)}
.brand{font-size:23px;letter-spacing:.15em}.seal{border-radius:1px;transform:rotate(-4deg);background:transparent;border:2px solid var(--seal);color:var(--seal);outline:1px solid var(--seal);outline-offset:-5px}
.top nav{gap:32px;font-size:13px}.top .btn{background:none;color:var(--seal);border-bottom:1px solid var(--seal);border-radius:0;padding:0}
.hero{max-width:1420px;gap:6vw;padding:55px 5vw 100px;min-height:calc(100svh - 78px)}
.hero-art{border-radius:1px;aspect-ratio:4/5;max-height:740px;box-shadow:0 18px 50px #3c26151b;isolation:isolate;overflow:visible}
.hero-art img{object-position:center;border:1px solid #7e5b34;border-radius:1px}
.hero-art:after{inset:10px;border:1px solid #e0c59d70;background:none;pointer-events:none}
.portrait-label{position:absolute;right:-25px;top:30px;writing-mode:vertical-rl;font-family:var(--head);font-size:12px;letter-spacing:.4em;color:var(--muted)}
.hero-copy{padding-bottom:10px}.eyebrow{font-size:12px;letter-spacing:.2em;color:var(--muted)}
.hero-chapter{font-size:12px;letter-spacing:.12em;color:var(--seal);margin:52px 0 12px}
.hero h1{font-size:clamp(48px,6vw,88px);line-height:1.3;letter-spacing:-.065em;margin:14px 0 25px;font-weight:900}.hero h1 em{color:var(--ink)}
.hero-note{font-size:16px;line-height:1.95;color:var(--muted);margin:0 0 35px}.peek{display:none}
.btn{border-radius:2px;min-height:58px;padding-inline:28px;font-size:16px;letter-spacing:.02em}.btn-gold{background:var(--seal);color:#fff3dd}.btn-gold:hover{background:#7e2b20}.btn-line{border-color:var(--line2)}
.trust{font-size:12px;gap:8px 15px}.trust svg{width:13px}.cta-row .btn{min-width:270px;justify-content:space-between;gap:28px}.btn small{font-size:11px;letter-spacing:.1em}
section{padding-block:95px;max-width:1280px}.band{background:#d3bc9322;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kicker{font-size:11px;letter-spacing:.15em;color:var(--seal);margin-bottom:18px}h2{letter-spacing:-.04em;line-height:1.4}.sample{margin-top:54px;gap:80px}.mapcard{border-radius:2px;background:#f7edd650;border:1px solid var(--line2)}
.type small{color:var(--muted)}.items .num,.num{background:var(--seal);color:#fff1d2}.item{border-color:var(--line)}.topic{border-radius:2px;background:#f2e6cc60;border:1px solid var(--line2);padding:26px 22px;box-shadow:none}.topic .han{color:var(--seal);font-family:var(--head);font-size:40px;font-weight:700}.topic:hover{background:#f9efd8;border-color:var(--seal)}
.story img{border-radius:1px}.story .quote em{color:var(--seal)}.paid{border-radius:2px;background:#d5bd932b;border-color:var(--line2);box-shadow:inset 0 0 0 7px #e9dcc0}.price{color:var(--seal)}.faq details{border-color:var(--line)}
footer{border-color:var(--line);color:var(--muted)}footer .row{gap:20px;align-items:center}.dock{background:linear-gradient(0deg,#e9dcc0 65%,#e9dcc000)}
.flow,.paid-modal{background:var(--bg);background-image:url('paper-grain.webp');background-size:700px;border:1px solid var(--line2);border-radius:3px;color:var(--ink)}dialog::backdrop{background:#20180fd9;backdrop-filter:blur(7px)}.fl-head{background:#e9dcc0;border-color:var(--line)}.fl-foot{background:#e9dcc0;border-color:var(--line)}.say img{border-radius:1px;border:1px solid var(--line2);object-position:50% 30%}.say p{color:var(--ink)}
textarea,#story{background:#fff7e852;color:var(--ink);border-radius:2px;border-color:var(--line2)}textarea:focus{outline-color:var(--seal)}.storybox,.storycard,.paid,.r-brief,.errbox{border-radius:2px}.scroll-head{background:#ede0c2;border-radius:2px;border:1px solid var(--line2);padding-top:34px}.scroll-head:before{content:'觀';display:grid;place-items:center;width:46px;height:46px;border:2px solid var(--seal);color:var(--seal);font-family:var(--head);font-size:28px;transform:rotate(-6deg);margin-bottom:32px}.r-tags span,.r-measure{border-radius:2px;background:#b17a4620}.scan{background:#231a12}.scan video{object-fit:contain;background:#231a12}.scanClose{color:white}
.personal-scene{padding:0!important;position:relative;min-height:600px;background:#2a2016;isolation:isolate}.personal-portrait{position:absolute;inset:0;z-index:-1}.personal-portrait img{height:100%;width:100%;object-fit:cover;object-position:center 12%}.personal-portrait:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#281e16c9,transparent 70%)}.personal-portrait p{position:absolute;top:26px;left:25px;right:25px;margin:0;padding:17px 20px;background:#f2e6cde8;border:1px solid #9a7750;font-family:var(--head);font-size:22px;line-height:1.55;box-shadow:4px 4px #5a3d2333}.personal-card{position:relative;margin:340px 18px 20px;padding:24px;background:#f1e5ccf7;border:1px solid #9a7750;box-shadow:0 8px 30px #20160d30}.personal-card h2{font-size:24px;margin:0 0 18px}.personal-card label{display:block;font-size:12px;font-weight:700;margin:0 0 8px}.personal-card input{width:100%;border:0;border-bottom:1px solid #9a7750;background:#fff8e85c;border-radius:0;padding:12px;font-size:21px;color:var(--ink)}.field-note{font-size:12px;line-height:1.7;color:var(--muted);margin:12px 0 20px}.personal-card .btn-text{display:block;margin:8px auto 0;font-weight:400;font-size:12px}.personal-card .kicker{margin:0 0 9px}
.cinema{position:fixed;inset:0;z-index:1000;background:#221a12;display:grid;place-items:center;opacity:1;transition:opacity .85s ease,visibility .85s}.cinema.leaving{opacity:0;visibility:hidden;pointer-events:none}.cinema video{height:100%;width:100%;object-fit:contain;background:#221a12}.intro-active{overflow:hidden}.intro-skip{position:absolute;right:max(22px,env(safe-area-inset-right));top:max(24px,env(safe-area-inset-top));min-height:44px;border:1px solid #efdfbe55;background:#2a1c12b3;color:#f6e7cc;font-size:12px;padding:0 17px;border-radius:2px;letter-spacing:.08em}.intro-skip span{margin-left:15px}.intro-caption{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#f4e4c8a8;letter-spacing:.2em;font-size:10px}.intro-play{position:absolute;inset:45% 20% auto;border:1px solid #e7d2ad;background:#281b11df;color:#f5e8d2;padding:20px;font-family:var(--head);font-size:22px}
@media(min-width:861px){.cinema video{max-width:80vh}.hero-copy{max-width:590px}.flow{max-width:550px}}
@media(max-width:860px){.top{height:66px;padding-inline:20px}.brand{font-size:19px}.top nav{gap:15px}.hero{display:flex;flex-direction:column;padding:24px 22px 65px;gap:0;min-height:0}.hero-art{order:0;width:100%;max-width:480px;max-height:none;align-self:center;aspect-ratio:4/4.8;margin:0 0 26px}.hero-art img{object-fit:cover}.hero-copy{order:1;width:100%;max-width:480px;align-self:center}.hero h1{font-size:clamp(44px,10.8vw,68px);margin:10px 0 17px;line-height:1.3}.hero-chapter{margin:24px 0 8px;font-size:10px}.hero-note{font-size:14px;line-height:1.8;margin-bottom:25px}.eyebrow{font-size:10px}.cta-row .btn{width:100%}.trust{margin-top:15px;font-size:11px}.portrait-label{right:-16px;font-size:9px}.sample{gap:32px}.personal-scene{min-height:610px}.personal-card{margin-top:350px}section{padding:64px 22px}.topics{gap:12px}.topic{padding:22px 18px}.flow{border-radius:0}.cinema video{object-fit:contain}.intro-caption{bottom:calc(20px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.cinema{display:none}.intro-active{overflow:auto}*{scroll-behavior:auto!important}}

/* An unbroken portrait composition from the film to the first page. */
.cinema[hidden]{display:none!important}.cinema{transition:opacity .45s ease,visibility .45s}.cinema video{aspect-ratio:4/5}.hero-art{aspect-ratio:4/5!important}.hero-art .bubble{display:none}.profile-steps{display:flex;gap:14px;list-style:none;padding:0;margin:0 0 20px;font-size:10px;color:#84725b;border-bottom:1px solid #9a77504d;padding-bottom:12px}.profile-steps li[aria-current]{color:#963d2c;font-weight:700}.profile-steps li[aria-current]:before{content:'● ';font-size:7px}.personal-portrait p{white-space:pre-line}.personal-card input[type=date],.personal-card input[type=time]{min-height:52px;font-size:18px;max-width:100%;appearance:none;-webkit-appearance:none}.personal-card input:focus{outline:2px solid #963d2c;outline-offset:2px}.personal-privacy{font-size:10px;text-align:center;color:#79654d;margin:15px 0 0}.personal-card label small{font-weight:400;color:#79654d}.field-error{font-size:12px;color:#963d2c}.personal-card{animation:page-in .3s ease-out}.sheet{border-radius:2px!important}.bubble{background:#f3e8cf;color:#2a2016}.storycard,.storybox{background:#f2e7cf}.scroll-head .fine{color:var(--muted)}
@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.personal-card{animation:none}}

[tabindex="-1"]:focus{outline:none}.personal-scene{min-height:0!important}.personal-card{margin-top:clamp(200px,38svh,340px)}.steps .on .dot,.core,.chip[aria-pressed=true]{color:#fff3dd}.say p{border-radius:2px}.choice,.locked,.chip,.story img{border-radius:2px}
@media(max-width:860px){.hero{padding:18px 22px 55px}.hero-art{height:auto!important;width:min(100%,calc(44svh * .8));margin-bottom:22px}.hero-copy{margin-top:0;padding:0}.hero-chapter,.hero .eyebrow{display:none}.hero h1{font-size:clamp(38px,10.8vw,50px);line-height:1.2;margin:0 0 16px}.hero-note{font-size:13px;line-height:1.75;margin-bottom:20px}.trust{font-size:10px}.personal-card{margin-top:clamp(190px,36svh,350px);padding:21px}.personal-portrait p{font-size:19px;left:18px;right:18px;top:20px}.personal-card h2{font-size:23px}.portrait-label{right:-17px}}
@media(max-height:560px){.personal-card{margin-top:190px}.personal-portrait p{font-size:16px}}

/* 관상도령 wordmark: retain the ink and seal identity. */
.brand-logo{display:block;width:224px;height:52px;max-width:none;object-fit:contain}.brand{gap:0;flex-shrink:0}@media(max-width:860px){.brand-logo{width:176px;height:44px}}@media(max-width:360px){.brand-logo{width:154px}}

.scroll-head:before{content:'';background:url('favicon.svg') center/contain no-repeat;border:0;transform:rotate(-4deg)}