/* ARCANA — The midnight tarot salon. No external assets, blur, or blend layers.
   Only .card's position belongs to app.js; ornament and feedback stay inside .tilt. */
:root {
  --ink:#080f20; --velvet:#101c30; --gold:#dfc58c; --gold-deep:#987446;
  --txt:#ece6d9; --muted:#9ba8b8; --line:rgba(217,185,123,.3);
  --accent:#e4bd8a; --accent-bg:#30271f;
  --serif:'Gowun Batang','Noto Serif KR','Nanum Myeongjo',Batang,Georgia,serif;
  --sans:'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --latin:'Palatino Linotype',Palatino,Georgia,serif;
  --ease:cubic-bezier(.22,.9,.24,1);
  color-scheme:dark;
}
* {box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body {height:100%;background:var(--ink);color:var(--txt);font-family:var(--serif)}
body.app {position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none}
body[data-persona="cold"] {--accent:#a9c9e7;--accent-bg:#192b41}
body[data-persona="friend"] {--accent:#acd6bd;--accent-bg:#1b302d}
body[data-persona="fact"] {--accent:#dda5a0;--accent-bg:#342228}
button,input,textarea {font:inherit;color:inherit}
button {cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible {outline:2px solid var(--accent);outline-offset:4px}
button,input,textarea {border-radius:0}
[hidden] {display:none!important}

/* A quiet velvet room; its celestial arch is shared with the cards. */
#sky,#fx {position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#sky {z-index:0;opacity:.8;transition:opacity .7s}
#fx {z-index:6}
.nebula {position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 24%,#20344c66,transparent 65%),linear-gradient(110deg,#080e1c00,#16243944 48%,#080e1c00)}
.nebula i {position:absolute;inset:0;opacity:.45}
.nebula i:first-child {background:radial-gradient(ellipse at 15% 90%,#122d354d,transparent 56%)}
.nebula i:last-child {background:radial-gradient(ellipse at 90% 70%,#34234033,transparent 48%)}
.salon-frame {position:fixed;z-index:2;inset:12px;pointer-events:none;border:1px solid #b996542e;border-radius:3px}
.salon-frame::before,.salon-frame::after {content:'';position:absolute;width:42px;height:42px;border-color:#c8aa6f8c;border-style:solid;pointer-events:none}
.salon-frame::before {top:5px;left:5px;border-width:1px 0 0 1px}
.salon-frame::after {bottom:5px;right:5px;border-width:0 1px 1px 0}
.salon-frame>span {position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);padding:0 12px;background:var(--ink);color:var(--gold);font-size:19px}
body[data-phase="talk"] #sky {opacity:.25}
body[data-phase="talk"] .salon-frame {opacity:.35}

/* Common card faces. Foil is confined to the narrow outer gold rim. */
.cardface {position:relative;aspect-ratio:3/5;border-radius:5.4% / 3.24%;overflow:hidden;container-type:inline-size;background:#0c1427;box-shadow:0 8px 20px #0008,0 0 0 1px #dbbc7955}
.cardface img {position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.cardface .num {position:absolute;left:0;right:0;top:7.2%;transform:translateY(-50%);text-align:center;font:700 4.4cqw var(--latin);letter-spacing:.1em;color:#f6dfa1;text-shadow:0 1px 2px #000}
.cardface .nm {position:absolute;left:22%;right:22%;top:90.4%;transform:translateY(-50%);text-align:center;line-height:1.05}
.cardface .nm b {display:block;font:700 6.2cqw var(--serif);color:#fdeab4;white-space:nowrap;text-shadow:0 1px 2px #000}
.cardface .nm small {display:block;font:500 2.6cqw var(--latin);letter-spacing:.12em;color:#d8b566;text-transform:uppercase;margin-top:1cqw;white-space:nowrap}
body.art .cardface .num {top:6.2%;font-size:4cqw}
body.art .cardface .nm {top:91.9%;left:19%;right:19%}
body.art .cardface .nm b {font-size:6cqw}
body.nolabels .cardface .num,body.nolabels .cardface .nm {display:none}
.holo,.glare {position:absolute;inset:0;pointer-events:none;opacity:.15;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,4% 3%,4% 97%,96% 97%,96% 3%,4% 3%,0 0)}
.holo {background:linear-gradient(120deg,transparent 20%,#fff3c180 47%,#c3d8da80 53%,transparent 76%);transform:translateX(calc((var(--mx,50) - 50) * .035%))}
.glare {opacity:.12;background:radial-gradient(circle at calc(var(--mx,50)*1%) calc(var(--my,50)*1%),#fff4cb,transparent 56%)}

/* Table cards: never override the outer transform or --w. */
#stage {position:fixed;inset:0;z-index:5;pointer-events:none}
.card {position:absolute;left:0;top:0;width:var(--w,80px);height:calc(var(--w,80px)*5/3);cursor:pointer;pointer-events:auto;transition:transform .9s var(--ease),opacity .6s;will-change:transform}
.card.slot {perspective:1000px}
body[data-phase="pick"] .card.slot {transition-duration:.62s}
.card.out {opacity:0;pointer-events:none}
#stage.quick .card {transition-duration:.42s}
.card .tilt {width:100%;height:100%;transition:transform .22s var(--ease)}
.card .inner {position:relative;width:100%;height:100%;transition:transform 1.05s cubic-bezier(.3,.1,.2,1)}
.card.slot .tilt,.card.slot .inner {transform-style:preserve-3d}
.card.flipped .inner {transform:rotateY(180deg)}
.card .back,.card .face {position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card .back {border-radius:5.4% / 3.24%;background:var(--back) center/100% 100% no-repeat;box-shadow:0 3px 9px #0008,0 0 0 1px #dbbc7955}
.card .face {transform:rotateY(180deg);aspect-ratio:auto}
.card.rev .face {transform:rotateY(180deg) rotate(180deg)}
.card .back::after {content:'';position:absolute;inset:2%;border:1px solid #f9e9ba;border-radius:4%;box-shadow:0 0 13px #dfc58c80;opacity:0;pointer-events:none;transition:opacity .2s}
@media (hover:hover) {.card.fan:hover .tilt {transform:translateY(-14%) scale(1.035)}.card.fan:hover .back::after {opacity:.9}}
.card.fan.touched .tilt,.card.fan:active .tilt {transform:translateY(-16%) scale(1.04)}
.card.fan.touched .back::after,.card.fan:active .back::after {opacity:1}
/* Only one in six backs breathes; no extra moving transforms across all 78 cards. */
.card.fan:nth-child(6n+1) .back::after {animation:deck-breath 4.8s ease-in-out infinite}
.card.fan:nth-child(12n+1) .back::after {animation-delay:-2.4s}
.card.fan.touched .back::after,.card.fan:active .back::after {animation:none;opacity:1}
@keyframes deck-breath {0%,100%{opacity:.04}50%{opacity:.42}}
.card.await .tilt {animation:invitation 3s ease-in-out infinite}
.card.await .back::after {opacity:.8;animation:deck-breath 3s ease-in-out infinite}
@keyframes invitation {50%{transform:translateY(-2.5%)}}
.card .pos {position:absolute;left:50%;top:100%;margin-top:9px;transform:translateX(-50%);width:max-content;max-width:calc(var(--w,80px) + 10px);text-align:center;font:12px/1.4 var(--sans);word-break:keep-all;color:var(--gold);opacity:0;transition:opacity .5s;pointer-events:none}
.card.slot .pos {opacity:1}
.card .pos em {display:block;font-size:10px;font-style:normal;color:#d7a29c;margin-top:3px}
body[data-phase="pick"] .card .pos {opacity:0}

/* Intro and profile remain scrollable within the keyboard-sized #ui. */
#ui {position:fixed;left:0;right:0;top:0;height:100%;z-index:4;pointer-events:none}
.screen {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;opacity:0;visibility:hidden;transition:opacity .55s,visibility .55s;overflow-y:auto;padding:52px 26px max(30px,env(safe-area-inset-bottom));scrollbar-width:thin;scrollbar-color:#705c3c transparent}
.screen.on {opacity:1;visibility:visible;pointer-events:auto}
.screen>.wrap {margin:auto;width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}
.eyebrow {font:10px/1.5 var(--latin);letter-spacing:.23em;color:#c5ad7b;text-align:center}
.salon-name {font-size:9px;letter-spacing:.25em;margin-bottom:1px}
.hero-scene {position:relative;width:100%;height:198px;display:flex;align-items:flex-end;justify-content:center;margin-top:0}
.hero-scene::before {content:'';position:absolute;inset:-24px -6px -16px;background:url('salon-ornament.svg') center/100% 100% no-repeat;pointer-events:none;opacity:.9}
.hero {position:relative;display:flex;justify-content:center;align-items:flex-end;width:100%;height:100%;padding-bottom:10px}
.hero .hc {width:99px;margin:0 -5px;transform:rotate(var(--r)) translateY(var(--y));animation:float 8s ease-in-out infinite;animation-delay:var(--d)}
.hero .hc:nth-child(2) {z-index:2;width:114px}
@keyframes float {50%{transform:rotate(calc(var(--r)*.9)) translateY(calc(var(--y) - 6px))}}
h1 {font:400 47px/.96 var(--latin);letter-spacing:.18em;margin:6px -.18em 0 0;color:#ead49e;text-shadow:0 1px 0 #79603d}
.sub {display:flex;align-items:center;gap:14px;color:#d9c79f;font-size:12px;letter-spacing:.4em;margin-right:-.4em}
.sub::before,.sub::after {content:'';width:38px;height:1px;background:linear-gradient(90deg,transparent,#a28650)}
.sub::after {transform:rotate(180deg)}
.today {font:11px/1.5 var(--sans);letter-spacing:.06em;color:#9cabbc}
.hello {font:12px/1.5 var(--sans);color:#c9c8c2;margin-top:-6px}
.plain {background:none;border:0;color:#abb7c6;font:12px/1.5 var(--sans);padding:9px 6px;text-underline-offset:4px;min-height:36px}
.plain:hover {color:var(--gold)}
.hello .plain {font-size:11px;min-height:0;padding:4px;text-decoration:underline}
.question-label {align-self:flex-start;font-size:14px;color:#e7d8b7;margin-top:4px}
#q,.pform input {width:100%;border:1px solid #bba06c66;border-radius:5px;background:#0b1527;color:#efe9dd;outline:0;user-select:text;-webkit-user-select:text}
#q {resize:none;padding:13px 15px;font:14px/1.7 var(--serif);min-height:80px}
#q::placeholder {color:#a1aebe}
#q:focus,.pform input:focus {border-color:var(--gold);outline:1px solid #dfc58c26;outline-offset:3px}
.plabel {display:flex;align-items:baseline;justify-content:space-between;gap:6px;width:100%;margin-top:5px;color:#dac49a;font-size:12px}
.plabel small {font:10px/1.4 var(--sans);color:#93a2b4}
.personas {width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.personas button {--persona:#dfba8a;position:relative;text-align:left;min-height:77px;padding:10px 10px 9px 37px;border:1px solid #a8b4c32e;border-radius:4px;background:#101b2d;color:var(--txt);transition:transform .2s}
.personas button[data-id="cold"] {--persona:#a9c9e7}
.personas button[data-id="friend"] {--persona:#acd6bd}
.personas button[data-id="fact"] {--persona:#dda5a0}
.personas button::before {content:'☾';position:absolute;top:15px;left:11px;font:23px/1 var(--latin);color:var(--persona)}
.personas button[data-id="cold"]::before {content:'◇'}
.personas button[data-id="friend"]::before {content:'❧'}
.personas button[data-id="fact"]::before {content:'✧'}
.personas button::after {content:'';position:absolute;right:6px;top:6px;width:3px;height:3px;border-radius:50%;background:var(--persona);opacity:0}
.personas button.sel {border-color:var(--persona);background:var(--accent-bg)}
.personas button.sel::after {opacity:1}
.personas button:active {transform:scale(.98)}
.personas b {display:block;font-size:12px;line-height:1.5;word-break:keep-all;font-weight:700}
.personas small {display:block;font:10px/1.5 var(--sans);color:#aab6c5;margin-top:3px;word-break:keep-all}
.btn {position:relative;width:100%;min-height:53px;padding:14px 23px;border:1px solid #e6d3a1;border-radius:5px;background:linear-gradient(115deg,#b49156,#ebd6a0 45%,#c8aa6c);color:#19202b;font:700 16px/1.4 var(--serif);letter-spacing:.12em;box-shadow:0 5px 14px #0004;transition:transform .2s}
.btn::before {content:'';position:absolute;inset:4px;border:1px solid #44392166;border-radius:2px;pointer-events:none}
.btn::after {content:'✧';position:absolute;right:17px;top:50%;transform:translateY(-50%);font-weight:400}
.btn:active {transform:scale(.985)}
#start {margin-top:4px}
.btn.ghost {background:#111e30;color:var(--gold);border-color:#bfa16a88;font-size:15px;letter-spacing:.07em}
.btn.ghost::before {border-color:#bfa16a33}
.foot {font:11px/1.8 var(--sans);color:#95a2b3;text-align:center;max-width:100%}
.foot a {color:#c6b58c;text-decoration:none;border-bottom:1px solid #c6b58c50;padding-bottom:3px}
.foot code {font:10px/1.5 Consolas,monospace;color:#c4cbbd;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
.foot .tip {display:block;font-size:10px;color:#8794a7;margin-top:7px}
.foot .qr {display:block;width:78px;height:78px;margin:8px auto;padding:5px;background:white;border-radius:3px}
.salon-seal {display:grid;place-items:center;width:62px;height:62px;border:1px solid var(--line);border-radius:50%;font:40px var(--latin);color:var(--gold);box-shadow:0 0 0 5px #c6a66b0c;margin-bottom:8px}
.ptitle {font-size:24px;line-height:1.5;font-weight:400;text-align:center;color:#ecd6a4;word-break:keep-all}
.psub {font-size:13px;line-height:1.7;text-align:center;color:#aab7c7;margin-bottom:10px;word-break:keep-all}
.pform {width:100%;display:flex;flex-direction:column;gap:16px;max-width:400px}
.pform label {display:flex;flex-direction:column;gap:7px;font-size:12px;color:#d1bd96}
.pform input {padding:13px 15px;min-height:47px;font:16px var(--sans)}
.pform small {font:11px/1.5 var(--sans);color:#98a8ba}
.pform .plain {align-self:center;text-decoration:underline}
.perr {min-height:18px;font:12px/1.5 var(--sans);text-align:center;color:#e5aca3}
#profile .wrap {max-width:450px;padding:28px 20px;border:1px solid var(--line);background:linear-gradient(145deg,#122036d9,#0a1324e8);border-radius:120px 120px 5px 5px}

/* The chosen seat is announced above the card tray. */
#hint {position:absolute;left:50%;top:max(24px,env(safe-area-inset-top));transform:translateX(-50%);width:calc(100% - 48px);max-width:500px;padding:12px 12px 13px;text-align:center;border-top:1px solid #b79d6855;border-bottom:1px solid #b79d6855;background:#0c1729ed;font-size:13px;line-height:1.7;word-break:keep-all;color:#d7d2c5;opacity:0;transition:opacity .4s;pointer-events:none}
#hint.on {opacity:1}
#hint b {font:700 13px var(--latin);letter-spacing:.1em;color:#f5dfaa}
#hint::before,#hint::after {content:'✧';position:absolute;top:50%;transform:translateY(-50%);font-size:13px;color:var(--gold)}
#hint::before {left:-7px}#hint::after {right:-7px}
.seat-guide {position:fixed;top:104px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:8px;pointer-events:none;opacity:0;transition:opacity .4s}
body[data-phase="pick"] .seat-guide {opacity:1}
.seat-guide i {display:grid;place-items:center;width:var(--seat-w);height:calc(var(--seat-w)*5/3);border:1px solid #c8ac7040;border-radius:4px;color:#b8a06d99;font:10px var(--latin);font-style:normal;background:#c1a56b05;transition:opacity .3s}
.seat-guide i.filled {opacity:0}

/* Conversation: a reading across a velvet table, no reader speech bubbles. */
.room {position:absolute;inset:0;display:flex;flex-direction:column;min-height:0;padding-top:env(safe-area-inset-top);opacity:0;visibility:hidden;transition:opacity .55s,visibility .55s;background:linear-gradient(180deg,#0d192bdd,#0a1324fa 45%,#0b1526)}
.room.on {opacity:1;visibility:visible;pointer-events:auto}
.room-heading {flex:none;display:flex;align-items:center;gap:12px;padding:14px 24px 12px;border-bottom:1px solid #bda47235;width:100%;max-width:760px;margin:0 auto}
.reader-seal {display:grid;place-items:center;flex:none;width:33px;height:33px;border:1px solid var(--accent);border-radius:50%;color:var(--accent);font-size:22px}
.room-heading .eyebrow {font-size:10px;letter-spacing:.19em;color:#ddc797}
.reader-tone {font:11px/1.7 var(--sans);color:#a7b5c8;margin-top:1px}
.room-moon {margin-left:auto;font:25px var(--latin);color:#aa9264}
.room-heading.speaking .reader-seal {animation:reader-arrival 1.2s ease-out}
@keyframes reader-arrival {0%{opacity:.25;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
.table {flex:none;display:flex;gap:11px;overflow-x:auto;padding:18px 24px 13px;scrollbar-width:none;background:radial-gradient(ellipse at 50% 20%,#20394a80,transparent 75%),linear-gradient(#142438,#101c2f);border-bottom:1px solid #bca37238;transition:opacity .4s}
.table::-webkit-scrollbar {display:none}
.table:empty {display:none}
.table figure {flex:none;width:clamp(55px,15.5vw,77px);text-align:center;animation:table-arrival .7s var(--ease)}
.table figure.gap {margin-left:14px}
.table .cardface {cursor:pointer;box-shadow:3px 5px 5px #02080f99,0 0 0 1px #dfc58c55}
.table figure:nth-child(3n+1) .cardface:not(.rev) {transform:rotate(-2deg)}
.table figure:nth-child(3n+2) .cardface:not(.rev) {transform:rotate(1.5deg)}
.table .cardface.rev {transform:rotate(180deg)}
.table figcaption {font:10px/1.5 var(--sans);color:#c6b893;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes table-arrival {from{opacity:0;transform:translateY(12px) scale(.93)}to{opacity:1;transform:translateY(0) scale(1)}}
.chat {flex:1;min-height:0;overflow-y:auto;position:relative;transition:opacity .4s;user-select:text;-webkit-user-select:text;scrollbar-width:thin;scrollbar-color:#5a5360 transparent}
.log {max-width:680px;margin:0 auto;padding:26px 25px 32px;display:flex;flex-direction:column;gap:28px}
.msg {max-width:100%;animation:message-arrival .5s ease-out}
@keyframes message-arrival {from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.msg.c {align-self:stretch}
.msg.c .who {display:flex;align-items:center;gap:9px;font:11px/1.5 var(--sans);letter-spacing:.15em;color:var(--accent);margin-bottom:13px}
.msg.c .who::before {content:'✧';font-size:17px;line-height:1}
.msg.c .who::after {content:'';height:1px;flex:1;background:linear-gradient(90deg,#c7af7744,transparent);margin-left:4px}
.msg.c p {font-size:16.5px;line-height:1.85;color:#eee8dc;word-break:keep-all;overflow-wrap:break-word;margin-bottom:13px}
.msg.c p:last-child {margin-bottom:0}
.msg.u {align-self:flex-end;max-width:88%;padding:12px 15px;border-right:2px solid var(--accent);background:#15243a;color:#d9e1e9;font:15px/1.75 var(--sans);word-break:keep-all;overflow-wrap:anywhere}
.msg.u::before {content:'나의 이야기';display:block;color:#9aaabd;font:10px/1.4 var(--sans);letter-spacing:.06em;margin-bottom:5px}
.msg.sys {align-self:center;max-width:100%;padding:8px 10px;font:11px/1.7 var(--sans);color:#cfb4a9;text-align:center;background:#32272255;border-radius:3px}
.dots {display:inline-flex;gap:7px;padding:8px 0}
.dots i {width:4px;height:4px;border-radius:50%;background:var(--accent);animation:pulse 1.7s infinite}
.dots i:nth-child(2) {animation-delay:.2s}.dots i:nth-child(3) {animation-delay:.4s}
@keyframes pulse {50%{opacity:.25;transform:translateY(-2px)}}
.talk {flex:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%;max-width:704px;margin:0 auto;padding:12px 20px calc(8px + env(safe-area-inset-bottom));border-top:1px solid #bda47235;background:#0c1728;transition:opacity .3s}
.talk.off {opacity:.38;pointer-events:none}
.talk input {flex:1;min-width:0;padding:12px 13px;min-height:47px;font:16px/1.4 var(--sans);color:var(--txt);outline:0;background:#121f33;border:1px solid #bfa16a77;border-radius:4px;user-select:text;-webkit-user-select:text}
.talk input:focus {border-color:var(--accent)}
.talk input::placeholder {font-size:13px;color:#a2afc0}
.talk .send {flex:none;width:47px;height:47px;border:1px solid #d8c08e;border-radius:4px;font-size:18px;color:#172236;background:#d9c18f}
.talk .plain {margin:0 auto;min-height:28px;padding:3px 6px;flex-basis:100%;font-size:11px}
.drawbar,.endbar {display:none;flex:none;flex-direction:column;align-items:center;width:100%;max-width:704px;margin:0 auto;gap:5px;padding:14px 24px calc(9px + env(safe-area-inset-bottom));border-top:1px solid #bda47235;background:#0c1728}
.draw-caption {font:11px/1.6 var(--sans);color:#b6c1ce;margin-bottom:5px;text-align:center}
.drawbar .btn {min-height:54px;max-width:450px;isolation:isolate}
.drawbar.ready .btn {animation:draw-arrival .7s var(--ease)}
.drawbar .btn::after {content:'✦';animation:invitation 3.6s ease-in-out infinite}
.drawbar .plain {font-size:11px;min-height:28px;padding:3px 6px}
@keyframes draw-arrival {from{transform:translateY(8px);opacity:.25}to{transform:translateY(0);opacity:1}}
.room.todraw .talk,.room.ended .talk {display:none}
.room.todraw .drawbar,.room.ended .endbar {display:flex}
.room.ended .drawbar {display:none}
.endbar {padding-top:12px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.endbar .btn {max-width:450px}
.closing-mark {color:var(--gold);font-size:18px;margin-bottom:5px}
.note {font:10px/1.6 var(--sans);color:#95a3b6;text-align:center;margin-top:5px;word-break:keep-all}
body[data-phase="shuffle"] .room,body[data-phase="pick"] .room,body[data-phase="reveal"] .room {opacity:0;pointer-events:none}
body[data-phase="shuffle"] .room *,body[data-phase="pick"] .room *,body[data-phase="reveal"] .room * {pointer-events:none!important}

/* Temporary, non-interactive flourishes: gold linework rather than bright fog. */
.rays {position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:0}
.rays::before {content:'';position:absolute;width:var(--d);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--d)/-2);border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--c) 0 1deg,transparent 1deg 20deg);-webkit-mask:radial-gradient(closest-side,transparent 15%,#000 26%,transparent 73%);mask:radial-gradient(closest-side,transparent 15%,#000 26%,transparent 73%);animation:rays-in 2.6s ease-out forwards}
@keyframes rays-in {0%{opacity:0;transform:scale(.4) rotate(0)}20%{opacity:.3}100%{opacity:0;transform:scale(1.1) rotate(32deg)}}
.sigil {position:fixed;z-index:6;width:var(--size);height:var(--size);left:var(--x);top:var(--y);color:var(--sigil-color);pointer-events:none;animation:sigil-in 2.6s ease-out forwards}
.sigil svg {display:block;width:100%;height:100%;stroke:currentColor;stroke-width:1;fill:none}
@keyframes sigil-in {0%{opacity:0;transform:translate(-50%,-50%) scale(.65)}18%{opacity:.65}100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}
.sigil.turning {animation:sigil-spin 2.6s ease-out forwards}
@keyframes sigil-spin {0%{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-25deg)}18%{opacity:.6}100%{opacity:0;transform:translate(-50%,-50%) scale(1.12) rotate(32deg)}}
#flash {position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),var(--fc,#fff),transparent 42%)}
#flash.go {animation:reveal-light .8s ease-out}
@keyframes reveal-light {0%{opacity:0}16%{opacity:.16}100%{opacity:0}}
body.shake #stage {animation:table-tremor .45s ease-out}
@keyframes table-tremor {20%{transform:translate(2px,-1px)}50%{transform:translate(-2px,1px)}80%{transform:translate(1px,0)}}

/* Card inspection and unobtrusive utility controls. */
#zoom {position:fixed;inset:0;z-index:8;display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:#07101af7;perspective:1100px;padding:24px}
#zoom.on {display:flex;animation:zoom-in .35s ease-out}
@keyframes zoom-in {from{opacity:0}to{opacity:1}}
#zoom .zcard {width:min(76vw,calc(64vh*.6),420px);transform:rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg));transition:transform .12s ease-out;touch-action:none}
#zoom .zcard.rev {transform:rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg)) rotate(180deg)}
.zinfo {text-align:center;max-width:520px}
.zinfo b {font-size:17px;color:var(--gold);font-weight:400}
.zinfo p {font-size:13px;line-height:1.7;color:#b3c0d1;margin-top:9px;word-break:keep-all}
.corner {position:fixed;z-index:7;right:22px;top:calc(env(safe-area-inset-top) + 17px);width:34px;height:34px;background:#0b1527;border:1px solid #cbb17c66;border-radius:50%;color:var(--gold);font-size:16px;transition:opacity .3s}
#full {left:22px;right:auto;display:grid;place-items:center}
#sound.off {color:#7f8ca0;text-decoration:line-through}
body:not([data-phase="intro"]) .corner {opacity:0;pointer-events:none}

/* The gallery shares the card frame without introducing any dependencies. */
body.gallery {height:auto;min-height:100%;padding:28px 18px 60px}
body.gallery h2 {text-align:center;font:400 26px var(--latin);letter-spacing:.2em;color:var(--gold);margin-bottom:6px}
body.gallery p.lead {text-align:center;color:#aab7c7;font-size:14px;margin-bottom:26px}
body.gallery p.lead a {color:var(--gold)}
.grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;max-width:1300px;margin:0 auto}
.grid .cardface {cursor:pointer;transition:transform .3s}
.grid .cardface:hover {transform:translateY(-4px)}

@media(min-width:760px) {
 .screen {padding:48px 30px 32px}.screen>.wrap {max-width:480px;gap:12px}
 .hero-scene {height:246px}.hero .hc {width:122px}.hero .hc:nth-child(2) {width:142px}
 h1 {font-size:57px}.salon-name {font-size:10px}.personas b {font-size:14px}.personas small {font-size:11px}
 .personas button {min-height:86px;padding-left:43px}.personas button::before {left:14px}
 .room {max-width:800px;margin:0 auto;border-inline:1px solid #bda47228}
 .table {padding-inline:45px}.room-heading {padding-inline:45px}.log {padding:30px 30px 40px}
 .salon-frame {inset:24px;background:url('salon-ornament.svg') center/auto 100% no-repeat;opacity:.3}
 .talk {flex-wrap:nowrap;padding:15px 24px 20px}.talk .plain {flex-basis:auto;white-space:nowrap}
}
@media(max-width:370px) {
 .screen {padding-inline:23px}.screen>.wrap {gap:10px}.hero-scene {height:194px}
 .hero .hc {width:94px}.hero .hc:nth-child(2) {width:110px}h1 {font-size:43px}
 .personas button {padding-left:32px;min-height:85px}.personas button::before {left:7px;font-size:21px}
 .personas b {font-size:11.5px}.plabel small {font-size:9px}.log {padding-inline:22px}
}
@media(max-height:650px) {
 .room-heading {padding-top:7px;padding-bottom:7px}.reader-tone {display:none}
 .table {padding-top:10px;padding-bottom:8px}.table figure {width:43px}
 .table figcaption {font-size:9px;margin-top:4px}.log {padding-top:16px}
 .drawbar {padding-top:8px;gap:2px}.draw-caption {font-size:10px}.drawbar .btn {min-height:47px}
}
@media(pointer:coarse) {.foot .qr {display:none}}
body.fx-paused *,body.fx-paused *::before,body.fx-paused *::after {animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after {animation:none!important;scroll-behavior:auto!important;transition-duration:.12s!important;transition-delay:0s!important}
 .hero .hc {transform:rotate(var(--r)) translateY(var(--y))}
 .card.await .tilt,.card.fan.touched .tilt {transform:none}
 #flash,.rays,.sigil {display:none!important}
}


/* ---------- ARCANA / CINEMATIC ATELIER ----------
   Rendered scenery + independent CSS 3D cards. No new full-screen canvas. */
:root {--ink:#070c14;--gold:#c9ae7a;--txt:#eeeae1;--muted:#a7adb5;--serif:'HCR Batang','Hancom Batang',Batang,Georgia,serif;--sans:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;--latin:'Palatino Linotype',Palatino,Georgia,serif}
html,body {background:#070c14}
.salon-frame {display:none}
body[data-phase="intro"] #sky,body[data-phase="intro"] .nebula {opacity:0}
#intro.cinema-intro {display:block;padding:0;overflow-x:hidden;scrollbar-width:none;scroll-behavior:smooth;background:#070c14}
#intro::-webkit-scrollbar {display:none}
.cinema-sequence {height:calc(var(--scene-h,100svh)*1.4);min-height:760px;position:relative}
.cinema-hero {height:var(--scene-h,100svh);min-height:540px;position:sticky;top:0;overflow:hidden;isolation:isolate;background:#070c14}
.atelier-picture {position:absolute;inset:-2%;z-index:-3;pointer-events:none;transform:translate3d(calc(var(--look-x,0)*-7px),calc(var(--look-y,0)*-5px),0) scale(var(--room-scale,1.015));will-change:transform}
.atelier-picture img {width:100%;height:100%;object-fit:cover;object-position:60% 52%;display:block}
.atelier-shade {position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,#070b14b3 0%,#070b1433 37%,transparent 64%),linear-gradient(0deg,#070c14 0%,#070c1433 12%,transparent 30%)}
.cinema-header {position:absolute;left:5.5%;right:5.5%;top:max(36px,env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;z-index:4}
.wordmark {font:400 24px/1 var(--latin);letter-spacing:.2em;color:#e9dfc7;text-decoration:none;display:flex;align-items:center;gap:21px}
.wordmark span {font:10px var(--sans);letter-spacing:.12em;color:#aca99e;border-left:1px solid #b4a17b55;padding-left:18px}
.header-note {font:9px var(--sans);letter-spacing:.18em;color:#bcb8af;display:flex;align-items:center;gap:10px;margin-right:46px}
.header-note i {display:block;width:4px;height:4px;background:#bdb18f;border-radius:50%}
.hero-copy {position:absolute;z-index:2;left:7.3%;top:27%;width:43%;transform:translate3d(0,var(--copy-y,0px),0);opacity:var(--copy-alpha,1);pointer-events:none}
.chapter-kicker {display:flex;align-items:center;gap:15px;font:9px/1.6 var(--sans);letter-spacing:.2em;color:#b5aa93}
.chapter-kicker span {font:italic 15px var(--latin);letter-spacing:0;border-bottom:1px solid #b5aa9366;padding-bottom:3px}
.hero-copy h1 {font:400 clamp(44px,4.5vw,76px)/1.35 var(--serif);color:#eee9df;letter-spacing:-.065em;margin:28px 0 25px;text-shadow:none;background:none;animation:none}
.hero-copy h1 em {font-style:normal;color:#d3ba8d}
.hero-description {font:13px/1.9 var(--sans);color:#aaaeb3;letter-spacing:-.02em}
.hero-rig {position:absolute;z-index:1;width:570px;height:420px;left:68%;top:52%;transform:translate3d(-50%,calc(-50% + var(--rig-y,0px)),0) scale(var(--rig-scale,1));pointer-events:none;will-change:transform}
#intro .hero {position:relative;display:block;width:100%;height:100%;padding:0;margin:0;perspective:1200px;perspective-origin:50% 40%;transform:rotateX(calc(var(--look-y,0)*-2deg)) rotateY(calc(var(--look-x,0)*3deg));transform-style:preserve-3d;touch-action:pan-y;pointer-events:none}
#intro .hero .hc {position:absolute;top:50%;left:50%;width:174px;margin:0;border-radius:6px;animation:none;transform:translate3d(calc(-50% + var(--card-x,0px)),calc(-50% + var(--card-y,0px)),var(--card-z,0px)) rotateY(var(--card-yaw,0deg)) rotateZ(var(--card-roll,0deg));transition:transform 1.15s cubic-bezier(.2,.75,.2,1),opacity .6s;box-shadow:1px 1px 0 #967546,3px 2px 0 #d6bb80,4px 3px 0 #6e512d,9px 16px 24px #0008;pointer-events:auto;cursor:pointer;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#intro .hero .hc[data-position="center"] {--card-x:0px;--card-y:-10px;--card-z:115px;--card-yaw:-6deg;--card-roll:2deg;z-index:3}
#intro .hero .hc[data-position="left"] {--card-x:-168px;--card-y:24px;--card-z:-65px;--card-yaw:31deg;--card-roll:-11deg;z-index:1}
#intro .hero .hc[data-position="right"] {--card-x:166px;--card-y:19px;--card-z:-40px;--card-yaw:-30deg;--card-roll:10deg;z-index:2}
#intro .hero .hc:focus-visible {outline:2px solid #eee0b9;outline-offset:6px}
.hero-ground {position:absolute;left:68%;top:72%;width:540px;height:50px;transform:translateX(-50%) scale(var(--rig-scale,1));opacity:var(--ground-alpha,.7);pointer-events:none;z-index:-1;display:flex;align-items:center;justify-content:space-around}
.hero-ground i {width:150px;height:32px;background:radial-gradient(ellipse,#0009,transparent 67%);border-radius:50%}
.hero-caption {position:absolute;left:68%;bottom:16%;transform:translateX(-50%);display:flex;align-items:center;gap:27px;text-align:center;opacity:var(--copy-alpha,1);z-index:4}
.hero-caption>div {min-width:120px;display:flex;flex-direction:column;gap:7px}
.orbit-number {font:9px var(--sans);color:#bab3a5;letter-spacing:.21em}
.orbit-title {font:12px var(--serif);color:#ded4be;letter-spacing:.05em}
.hero-caption button {width:36px;height:36px;border:1px solid #b8aa8944;border-radius:50%;background:#080d1840;color:#d7c8aa;font:17px var(--latin);transition:transform .25s,opacity .25s}
.hero-caption button:hover {transform:scale(1.12)}
.scene-enter {position:absolute;left:7.3%;top:69%;width:245px;display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid #c7b18a88;color:#e4d8c1;font:13px var(--sans);text-decoration:none;z-index:3;opacity:var(--copy-alpha,1);transform:translateY(var(--copy-y,0px))}
.scene-enter i {font:20px var(--latin);display:grid;place-items:center;width:35px;height:35px;border:1px solid #baa88866;border-radius:50%;font-style:normal;transition:transform .3s}
.scene-enter:hover i {transform:rotate(45deg)}
.scene-footer {position:absolute;bottom:31px;left:5.5%;right:5.5%;display:flex;justify-content:space-between;color:#999c9e;font:8px/1.6 var(--sans);letter-spacing:.18em;z-index:3;opacity:var(--copy-alpha,1)}
.scroll-invitation {display:flex;align-items:center;gap:22px}
.scroll-invitation i {font:16px var(--latin);font-style:normal}
.scene-whisper {position:absolute;left:7.3%;top:39%;font:400 clamp(34px,3.7vw,60px)/1.45 var(--serif);letter-spacing:-.05em;color:#e6e0d3;opacity:var(--whisper-alpha,0);transform:translateY(var(--whisper-y,28px));pointer-events:none}
.scene-whisper em {font-style:normal;color:#cab188}
/* The consultation setup is a second, editorial scene rather than a crowded hero form. */
.consultation-panel {position:relative;z-index:2;background:#090f19;padding:100px 7.3% 32px;border-top:1px solid #b0a18430;min-height:740px}
.consultation-panel::before {content:'';position:absolute;left:0;right:0;height:100px;bottom:100%;background:linear-gradient(transparent,#090f19);pointer-events:none}
.consultation-inner {display:grid;grid-template-columns:1fr 1fr;gap:10%;max-width:1200px;margin:0 auto}
.consultation-copy h2 {font:400 clamp(36px,3.5vw,56px)/1.5 var(--serif);letter-spacing:-.055em;color:#e9e2d4;margin:30px 0 22px}
.consultation-copy h2 em {font-style:normal;color:#bfa780}
.consultation-copy>p:not(.chapter-kicker) {font:13px/2 var(--sans);color:#a2aab5}
.consultation-divider {display:flex;align-items:center;gap:15px;color:#b39d75;font-size:13px;width:150px;margin:32px 0 22px}
.consultation-divider i {width:60px;height:1px;background:#b5a07944}
.consultation-copy .today {font-size:10px;letter-spacing:.03em;color:#8e99a6}
.consultation-copy .hello {margin:10px 0 0;color:#b9b7ad}
.consultation-controls {display:flex;flex-direction:column;gap:18px;padding-top:5px}
.question-label {font:15px/1.7 var(--serif);color:#ded6c7;margin:0}
.question-label>span {display:block;font:8px var(--sans);letter-spacing:.18em;color:#8f9baa;margin-bottom:16px}
#q {font:14px/1.9 var(--sans);background:#0e1826;border:1px solid #aeb8c22b;border-radius:0;padding:18px;min-height:113px;color:#e5e4e1}
#q::placeholder {color:#8c99aa;font-size:13px}
#q:focus {outline:0;border-color:#bfa98188}
.plabel {align-items:flex-end;margin-top:10px;font-size:14px;color:#ded6c7}
.plabel>span>small {display:block;font:8px var(--sans);letter-spacing:.18em;color:#8f9baa;margin-bottom:13px}
.plabel>small {font:10px var(--sans);color:#8f99a5}
.personas {gap:0 14px}
.personas button {border:0;border-bottom:1px solid #a6b0be30;border-radius:0;background:none;min-height:92px;padding:15px 8px 15px 33px}
.personas button.sel {background:linear-gradient(90deg,#bfa9780d,transparent);border-color:var(--persona)}
.personas button::before {left:5px;top:21px;font-size:21px}
.personas button::after {right:2px;top:25px}
.personas b {font:500 12px/1.7 var(--sans);color:#e1dfd7;letter-spacing:-.025em}
.personas small {font:10px/1.7 var(--sans);color:#8f9dae}
.btn {border-radius:0;background:#cdb78c;color:#0c1521;box-shadow:none;border:1px solid #cdb78c;font:500 14px/1.5 var(--sans);min-height:54px;letter-spacing:.02em}
.btn::before {display:none}
.btn::after {content:'↗';right:20px;font-size:20px}
#start {margin-top:14px}
.appointment-note {font:10px/1.7 var(--sans);text-align:center;color:#7f8d9e;margin-top:-5px}
#foot {max-width:1200px;margin:55px auto 30px;color:#7c899a;font-size:10px;line-height:1.8}
#foot a {font:11px var(--sans);color:#b9b6aa;border-color:#b9b6aa44;display:inline-block;padding-bottom:8px}
#foot a>span {margin-left:18px}
.panel-colophon {max-width:1200px;margin:0 auto;border-top:1px solid #9c8b6d28;display:flex;align-items:baseline;justify-content:space-between;padding-top:22px;color:#8a8375;font:10px var(--sans)}
.panel-colophon>span:first-child {font:23px var(--latin);letter-spacing:.16em;color:#b4a78c}
/* Existing profile and room retain their original form/flex behavior. */
#profile {padding-top:76px;padding-bottom:35px;background:linear-gradient(90deg,#070d17e8,#070d17cc),url('assets/atelier-wide.webp') 70% center/cover no-repeat}
#profile .wrap {border:0;border-radius:0;background:none;padding:8px 16px;max-width:410px;gap:14px}
.salon-seal {border:0;box-shadow:none;width:44px;height:44px;font-size:36px;margin:0}
.ptitle {font-size:24px;font-weight:400;letter-spacing:-.04em}
.psub {font:12px/1.8 var(--sans)}
.pform {gap:15px}.pform label {font:11px var(--sans);color:#b9b3a5}
.pform input {border-radius:0;border-color:#b3b8bb33;background:#101c2a99;font:16px var(--sans)}
.pform small {font-size:10px}.pform input:focus {outline:0;border-color:#bca47a99}
.room {background:#09121e;border-color:#9c8b6d28}
.room-heading {padding-top:18px;padding-bottom:16px;border-color:#9c8b6d33}
.room-heading .eyebrow {font:12px var(--latin);letter-spacing:.16em}
.room-heading .eyebrow small {font:7px var(--sans);color:#8e99a9;letter-spacing:.12em;margin-left:6px}
.reader-seal {border:0;font-size:30px;color:var(--accent);width:32px}
.reader-tone {font:10px/1.7 var(--sans);margin-top:5px}
.table {background:linear-gradient(#0a1421dd,#0a1421aa),url('assets/atelier-wide.webp') 70% 82%/cover no-repeat;border-bottom-color:#9c8b6d33;padding-top:20px;padding-bottom:15px}
.table figure {width:clamp(55px,16vw,80px)}
.table figcaption {font-size:9px}
.log {padding-top:30px;padding-bottom:36px;gap:32px}
.msg.c p {font-family:var(--serif);font-size:16.5px;line-height:1.85;color:#e7e2d6}
.msg.c .who {font-size:10px;letter-spacing:.12em;color:#baa884;margin-bottom:17px}
.msg.c .who::before {content:'—';font-size:13px}.msg.c .who::after {display:none}
.msg.u {border-right-width:1px;background:#15243788;padding:12px 16px;font-size:14px}
.talk,.drawbar,.endbar {background:#0b1623;border-color:#9c8b6d33}
.talk input {border-radius:0;background:#111e2e;border-color:#b1a08355;font-size:16px}
.talk .send {border-radius:0;background:#cdb78c;border-color:#cdb78c}
.draw-caption {font-size:10px;color:#9ba7b6;margin-bottom:8px}
.drawbar .btn {max-width:450px}.drawbar .btn::after {content:'↗';animation:none}
.btn.ghost {background:none;border-color:#b5a17b77;font:13px var(--sans)}
.corner {top:max(31px,env(safe-area-inset-top));right:4.5%;width:28px;height:28px;border-color:#bfa77d44;background:#080d1755;font-size:13px}
#full {left:auto;right:calc(4.5% + 38px)}
body:has(#intro.on) #full {opacity:0;pointer-events:none}
body:has(#intro.on) #sound {top:max(34px,env(safe-area-inset-top));right:4.5%}

@media(min-width:1500px) {.hero-rig{width:650px}.hero-copy h1{font-size:80px}#intro .hero .hc{width:195px}#intro .hero .hc[data-position="left"]{--card-x:-190px}#intro .hero .hc[data-position="right"]{--card-x:190px}}
@media(max-width:1020px) and (min-width:760px) {
 .hero-copy{left:6%;width:47%;top:25%}.hero-copy h1{font-size:48px}.hero-rig{left:72%;width:450px}
 #intro .hero .hc{width:135px}#intro .hero .hc[data-position="left"]{--card-x:-118px}#intro .hero .hc[data-position="right"]{--card-x:118px}
 .hero-caption{left:72%;gap:12px}.hero-caption>div{min-width:90px}.header-note{font-size:7px}
 .scene-enter{left:6%;width:220px}.consultation-inner{gap:6%}.personas b{font-size:11px}
}
@media(max-width:759px) {
 .cinema-sequence{min-height:0;height:calc(var(--scene-h,100svh)*1.3)}
 .cinema-hero{min-height:560px}
 .atelier-picture{inset:-1.5%}.atelier-picture img{object-position:center 56%}
 .atelier-shade{background:linear-gradient(180deg,#060b1466,transparent 30%,transparent 69%,#070c14bd 88%,#070c14)}
 .cinema-header{left:24px;right:24px;top:max(24px,env(safe-area-inset-top));align-items:center}
 .wordmark{font-size:22px;gap:11px;letter-spacing:.16em}.wordmark span{font-size:8px;padding-left:11px}
 .header-note{display:none}
 body:has(#intro.on) #sound{right:23px;top:max(20px,env(safe-area-inset-top));border:0}
 .hero-copy{left:26px;top:13.8%;width:calc(100% - 52px)}
 .chapter-kicker{font-size:8px;letter-spacing:.16em;gap:12px}.chapter-kicker span{font-size:12px}
 .hero-copy h1{font-size:clamp(34px,9.1vw,44px);line-height:1.4;letter-spacing:-.065em;margin:15px 0 14px}
 .hero-description{font-size:11px;line-height:1.85;color:#a7adb8}
 .hero-rig{width:100%;height:310px;left:50%;top:58.5%;}
 #intro .hero{perspective:850px;perspective-origin:50% 50%}
 #intro .hero .hc{width:115px;box-shadow:1px 1px 0 #ac8850,2px 2px 0 #d6bb80,3px 2px 0 #6e512d,6px 11px 19px #0008}
 #intro .hero .hc[data-position="center"]{--card-x:0px;--card-y:-5px;--card-z:95px;--card-yaw:-6deg;--card-roll:2deg}
 #intro .hero .hc[data-position="left"]{--card-x:-105px;--card-y:13px;--card-z:-20px;--card-yaw:31deg;--card-roll:-11deg}
 #intro .hero .hc[data-position="right"]{--card-x:105px;--card-y:15px;--card-z:-30px;--card-yaw:-28deg;--card-roll:10deg}
 .hero-ground{width:340px;left:50%;top:73%;height:30px}.hero-ground i{width:90px;height:20px}
 .hero-caption{left:50%;bottom:19%;gap:24px}.hero-caption>div{min-width:100px;gap:5px}
 .orbit-number{font-size:7px}.orbit-title{font-size:10px}.hero-caption button{height:29px;width:29px;font-size:15px;background:#080d1866}
 .scene-enter{left:26px;right:26px;top:auto;bottom:8%;width:auto;padding:10px 0;font-size:12px}
 .scene-enter i{width:31px;height:31px;font-size:19px}
 .scene-footer{left:26px;right:26px;bottom:24px;font-size:6px;letter-spacing:.1em}.scroll-invitation{gap:9px}.scroll-invitation i{font-size:13px}
 .scene-whisper{left:26px;top:20%;font-size:35px;line-height:1.45}
 .consultation-panel{padding:54px 26px 27px;min-height:0}
 .consultation-inner{display:block}
 .consultation-copy h2{font-size:32px;line-height:1.45;margin:21px 0 13px}
 .consultation-copy>p:not(.chapter-kicker){font-size:11px;line-height:1.9}
 .consultation-divider{display:none}.consultation-copy .today{font-size:9px;margin-top:20px}
 .consultation-copy .hello{font-size:11px;margin:6px 0 32px}
 .consultation-controls{gap:15px}.question-label{font-size:14px}.question-label>span{margin-bottom:13px;font-size:7px}
 #q{font-size:16px;line-height:1.7;padding:15px;min-height:108px}#q::placeholder{font-size:12px}
 .plabel{margin-top:13px;font-size:13px}.plabel>span>small{font-size:7px}.plabel>small{font-size:9px}
 .personas{gap:0 12px}.personas button{min-height:91px;padding:12px 5px 12px 28px}.personas b{font-size:11px}.personas small{font-size:9px;line-height:1.6}.personas button::before{left:2px;top:17px;font-size:20px}
 .appointment-note{font-size:9px}.consultation-panel #foot{margin:35px auto 25px;line-height:2;font-size:9px}
 .panel-colophon{font-size:8px}.panel-colophon>span:first-child{font-size:20px}
 .room-heading{padding:14px 23px}.room-heading .eyebrow{font-size:11px}.room-heading .eyebrow small{font-size:6px}
 .log{padding-inline:25px}.table{padding-inline:24px}.msg.c .who{font-size:9px}
 .corner{top:24px;right:24px}#full{right:auto;left:24px}
}
@media(max-width:359px) {
 .cinema-header{left:21px}.wordmark{font-size:20px}.wordmark span{font-size:7px}
 .hero-copy{left:23px;top:13%;width:calc(100% - 46px)}.hero-copy h1{font-size:30px;margin-block:10px}.hero-description{font-size:10px;line-height:1.7}
 #intro .hero .hc{width:92px}#intro .hero .hc[data-position="left"]{--card-x:-86px}#intro .hero .hc[data-position="right"]{--card-x:86px}
 .hero-caption{gap:18px;bottom:17.5%}.hero-rig{top:60%}.hero-ground{width:280px}
 .scene-enter{left:23px;right:23px;bottom:7%;font-size:11px}.scene-footer{bottom:15px;left:23px;right:23px;font-size:5px}
 .consultation-panel{padding-inline:23px}.personas b{font-size:10px}
}
@media(max-height:650px) and (min-width:760px) {
 .hero-copy{top:21%}.hero-copy h1{font-size:43px;margin-block:17px}.hero-description{font-size:11px}.hero-rig{top:49%}
 #intro .hero .hc{width:130px}.hero-caption{bottom:14%}.scene-enter{top:72%}.scene-footer{bottom:20px}
}
@media(max-height:650px) {.room-heading{padding-top:8px;padding-bottom:8px}.table{padding-top:10px;padding-bottom:8px}.table figure{width:43px}.log{padding-top:18px}.reader-tone{display:none}}
@media(prefers-reduced-motion:reduce) {
 .cinema-sequence{height:var(--scene-h,100svh)}
 .atelier-picture{transform:none}.hero-rig{transform:translate(-50%,-50%)}
 #intro .hero{transform:none}.hero-copy,.scene-enter{opacity:1;transform:none}.hero-caption,.scene-footer{opacity:1}.scene-whisper{display:none}
 #intro.cinema-intro{scroll-behavior:auto}
}


/* ---------- ARCANA / 이후 추가된 화면 ----------
   시네마틱 아틀리에의 규칙을 그대로 따른다: 가는 선, 넉넉한 여백, 작은 산세리프 표지, 각진 면. */
button,input,textarea,select {font:inherit;color:inherit}
/* 가볍게 한 장: 오늘의 한 장 · 예/아니오 · 궁합 · 도감 */
.modes {width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.modes button {position:relative;text-align:left;min-height:76px;padding:14px 20px 14px 33px;border:0;border-bottom:1px solid #a6b0be30;border-radius:0;background:none;color:var(--txt);transition:background .3s}
.modes button::before {position:absolute;left:5px;top:18px;font:19px/1 var(--latin);color:#c9ae7a}
#m-daily::before {content:'☼'}
#m-yesno::before {content:'◈'}
#m-match::before {content:'❦'}
#m-book::before {content:'❖'}
.modes button::after {content:'↗';position:absolute;right:3px;top:17px;font:14px/1 var(--latin);color:#8f9baa;transition:transform .3s,color .3s}
.modes button:hover::after,.modes button:active::after {transform:translate(2px,-2px);color:#d3ba8d}
.modes button:active {background:linear-gradient(90deg,#bfa9780d,transparent)}
.modes b {display:block;font:500 12px/1.7 var(--sans);color:#e1dfd7;letter-spacing:-.025em}
.modes small {display:block;font:10px/1.7 var(--sans);color:#8f9dae;word-break:keep-all}
.modes button.done small {color:#c9ae7a}
/* 궁합 입력: 정보 입력 화면과 같은 방 */
#match {padding-top:76px;padding-bottom:35px;background:linear-gradient(90deg,#070d17e8,#070d17cc),url('assets/atelier-wide.webp') 70% center/cover no-repeat}
#match .wrap {border:0;border-radius:0;background:none;padding:8px 16px;max-width:410px;gap:14px}
.pform select {width:100%;min-height:47px;padding:13px 40px 13px 15px;border:1px solid #b3b8bb33;border-radius:0;background-color:#101c2a;color:#efe9dd;font:16px var(--sans);outline:0;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#c9ae7a 50%),linear-gradient(135deg,#c9ae7a 50%,transparent 50%);background-position:calc(100% - 21px) 21px,calc(100% - 16px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.pform select:focus {border-color:#bca47a99}
/* 상담이 끝난 뒤 */
.endbar {gap:10px}
.msg.sys {background:none;border-top:1px solid #9c8b6d33;border-bottom:1px solid #9c8b6d33;border-radius:0;padding:9px 14px;font:10px/1.7 var(--sans);letter-spacing:.04em;color:#b5aa93}
/* 여러 번 만난 카드: 은빛 겹선(인연) · 금빛 겹선(황금) · 세 겹(가호) */
.cardface.lv-silver {box-shadow:0 0 0 1px #dfe5ec,0 0 0 3px #46505c,0 0 0 4px #c3ccd6,0 10px 22px #000a}
.cardface.lv-gold {box-shadow:0 0 0 1px #f1dfae,0 0 0 3px #7a5a2c,0 0 0 4px #e3c88a,0 10px 22px #000a}
.cardface.lv-guardian {box-shadow:0 0 0 1px #fff3d0,0 0 0 3px #8a6630,0 0 0 4px #f1dfae,0 0 0 6px #4f3a1c,0 0 0 7px #e3c88a,0 12px 26px #000b}
.cardface.lv-gold::after,.cardface.lv-guardian::after {content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 36%,#fff3c433 49%,transparent 60%);background-size:260% 100%;animation:gold-sheen 6s linear infinite}
@keyframes gold-sheen {from{background-position:130% 0}to{background-position:-130% 0}}
.card .pos em.lv {font:9px/1.6 var(--sans);letter-spacing:.1em;color:#d3ba8d}
/* 카드 도감 */
body.gallery {height:auto;min-height:100%;padding:0 0 70px;background:#070c14}
.g-top {position:relative;padding:max(24px,env(safe-area-inset-top)) 26px 36px;background:linear-gradient(180deg,#070c1480,#070c14e6 70%,#070c14),url('assets/atelier-mobile.webp') center 34%/cover no-repeat}
.g-header {display:flex;align-items:center;justify-content:space-between;margin-bottom:58px}
.g-back {font:11px var(--sans);color:#b9b6aa;text-decoration:none;border-bottom:1px solid #b9b6aa44;padding-bottom:6px}
.g-back span {margin-left:10px}
.g-top h1 {font:400 clamp(32px,8.6vw,54px)/1.4 var(--serif);letter-spacing:-.06em;color:#eee9df;margin:16px 0 12px;text-shadow:none}
.g-top h1 em {font-style:normal;color:#d3ba8d}
.g-lead {font:11px/1.9 var(--sans);color:#a7adb8}
.g-count {display:flex;align-items:baseline;gap:8px;margin-top:30px;color:#8f9baa;font:11px var(--sans);letter-spacing:.14em}
.g-count b {font:400 46px/1 var(--latin);color:#e9dfc7;letter-spacing:0}
.g-bar {flex:1;height:1px;background:#a6b0be30;align-self:center;margin-left:14px;position:relative}
.g-bar i {position:absolute;left:0;top:-1px;height:3px;width:0;background:#c9ae7a;transition:width 1.2s var(--ease)}
.g-body {padding:0 26px;max-width:1200px;margin:0 auto}
.g-guardian {display:flex;gap:24px;align-items:center;padding:28px 0;border-top:1px solid #9c8b6d33;border-bottom:1px solid #9c8b6d33}
.g-guardian .cardface {flex:none;width:108px;cursor:pointer}
body.gallery .g-guardian h2 {font:400 24px/1.5 var(--serif);letter-spacing:-.04em;color:#e9e2d4;margin:10px 0 8px;text-align:left}
.g-guardian p {font:11px/1.9 var(--sans);color:#a2aab5;word-break:keep-all}
.g-legend {display:flex;flex-wrap:wrap;gap:8px 22px;padding:18px 0 2px;font:10px/1.7 var(--sans);color:#8f9dae}
.g-legend i {display:inline-block;width:9px;height:14px;margin-right:9px;vertical-align:-2px;border:1px solid #c3ccd6}
.g-legend i.gold {border-color:#e3c88a;box-shadow:0 0 0 1px #7a5a2c}
.g-legend i.crown {border-color:#fff3d0;box-shadow:0 0 0 1px #8a6630,0 0 0 2px #e3c88a}
body.gallery .g-section {display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:46px 0 18px;padding-bottom:12px;border-bottom:1px solid #a6b0be30;font:400 13px/1.5 var(--latin);letter-spacing:.2em;color:#d7cdb6;text-align:left}
.g-section small {font:10px var(--sans);letter-spacing:.04em;color:#8f9baa;white-space:nowrap}
.g-section b {font-weight:400;color:#c9ae7a}
body.gallery .grid {display:grid;grid-template-columns:repeat(4,1fr);gap:14px 10px;max-width:none;margin:0}
body.gallery .grid .cardface {cursor:pointer;transition:transform .3s;box-shadow:0 6px 14px #0008,0 0 0 1px #dbbc7940}
body.gallery .grid .cardface.lv-silver {box-shadow:0 0 0 1px #dfe5ec,0 0 0 2px #46505c,0 0 0 3px #c3ccd6,0 6px 14px #0008}
body.gallery .grid .cardface.lv-gold {box-shadow:0 0 0 1px #f1dfae,0 0 0 2px #7a5a2c,0 0 0 3px #e3c88a,0 6px 14px #0008}
body.gallery .grid .cardface.lv-guardian {box-shadow:0 0 0 1px #fff3d0,0 0 0 2px #8a6630,0 0 0 3px #f1dfae,0 0 0 4px #4f3a1c,0 0 0 5px #e3c88a,0 6px 14px #0008}
body.gallery .grid .cardface.locked {cursor:default;opacity:.2;box-shadow:0 0 0 1px #a6b0be55}
body.gallery .grid .cardface.locked:hover {transform:none}
.grid .cardface .cnt {position:absolute;left:0;right:0;bottom:0;z-index:2;padding:3px 0;border-radius:0;font:9px/1.5 var(--sans);letter-spacing:.12em;text-align:center;color:#0c1521;background:#cdb78cf0}
@media(min-width:760px) {
 .modes {gap:0 14px}
 .g-top {padding:max(36px,env(safe-area-inset-top)) 7.3% 54px;background:linear-gradient(90deg,#070c14f2,#070c1480 60%,#070c1433),linear-gradient(0deg,#070c14,transparent 30%),url('assets/atelier-wide.webp') center/cover no-repeat}
 .g-header {margin-bottom:90px}.g-lead {font-size:13px}.g-count {max-width:480px}
 .g-body {padding:0 7.3%}.g-guardian .cardface {width:150px}.g-guardian p {font-size:13px}
 body.gallery .grid {grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:20px 18px}
}
@media(max-width:359px) {.modes b{font-size:10px}.modes button{padding-right:16px}}

/* 오늘의 카드: 메인의 가운데 카드를 누르면 크게 떠올라 뒤집히고, 뒷면에 그날의 이야기가 적혀 있다 */
.orbit-hint {font:8px var(--sans);letter-spacing:.1em;color:#8f9baa;white-space:nowrap}
.zflip {width:min(78vw,calc(66vh*.6),400px);aspect-ratio:3/5;perspective:1400px;cursor:pointer}
.zflip-in {position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.3,.1,.2,1)}
.zflip.turned .zflip-in {transform:rotateY(180deg)}
.zf-front,.zf-back {position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.zf-front {box-shadow:1px 1px 0 #967546,3px 2px 0 #d6bb80,4px 3px 0 #6e512d,10px 18px 30px #000a}
.zf-back {transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;text-align:center;padding:9% 9% 7%;background:linear-gradient(160deg,#101b2b,#0a121e);
  box-shadow:inset 0 0 0 1px #c9ae7a,inset 0 0 0 5px #0a121e,inset 0 0 0 6px #c9ae7a55,10px 18px 30px #000a;overflow:hidden}
.zb-kicker {font:9px var(--sans);letter-spacing:.2em;color:#b5aa93}
.zf-back b {font:400 clamp(22px,7vw,30px)/1.4 var(--serif);letter-spacing:-.04em;color:#eee9df;margin-top:14px}
.zf-back i {font:9px var(--latin);font-style:normal;letter-spacing:.24em;color:#c9ae7a;text-transform:uppercase;margin-top:6px}
.zb-rule {color:#b39d75;font-size:12px;margin:16px 0 14px}
.zf-back p {font:13px/1.95 var(--serif);color:#e2ddd1;word-break:keep-all;overflow-wrap:break-word;flex:1;display:flex;align-items:center}
.zf-back dl {width:100%;display:grid;grid-template-columns:auto 1fr;gap:7px 12px;text-align:left;padding-top:14px;border-top:1px solid #a6b0be30;font:10px/1.7 var(--sans)}
.zf-back dt {color:#8f9baa;letter-spacing:.08em;white-space:nowrap}
.zf-back dd {color:#c5c9cf;word-break:keep-all}
.zb-foot {font:11px var(--latin);letter-spacing:.3em;color:#7d7566;margin-top:14px}
.zhint {font:10px/1.6 var(--sans);letter-spacing:.04em;color:#8f9baa;text-align:center}
@media(max-height:640px) {.zf-back p {font-size:12px;line-height:1.8}.zb-rule {margin:9px 0 8px}}
@media(prefers-reduced-motion:reduce) {.zflip-in {transition-duration:.01s!important}}

/* 초대 코드: 집 밖에서 들어온 손님에게 보이는 입력 화면과, 남은 대화 횟수 (임시 스타일) */
#gate {position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(180deg,#070d17f2,#070d17fa),url('assets/atelier-mobile.webp') center/cover no-repeat}
#gate.on {display:flex}
.gate-in {max-width:360px;text-align:center;align-items:stretch}
.gate-in h2 {font:400 30px/1.3 var(--serif);letter-spacing:-.04em;color:#eee9df;margin:2px 0 0}
.gate-msg {font:13px/1.8 var(--sans);color:#b9c0c9;word-break:keep-all}
.gate-in input {text-align:center;letter-spacing:.18em;text-transform:uppercase}
.gate-in .chapter-kicker {justify-content:center}
#left {color:#c6b58c;letter-spacing:.04em}