/* Starlit Scholar — the Starlit Gate (home page entry).
   Gate → lattice door → the star-reader's study, where Ha-on asks Quest I (name) and Quest II (birth details).
   Quest II uses the real chart form (#chartForm), moved here from the page and moved back afterwards. */
#intro{display:none}
.intro-on{overflow:hidden}
.intro-on body{overflow:hidden}
.intro-on #intro{display:block}
#intro{position:fixed;inset:0;z-index:35;background:#06070B;color:#F3EBDD;transition:opacity .9s ease,visibility 0s .9s;
  --fi:18px;--ink:#F3EBDD;--ink2:#D9D0BE;--ink3:#B8AE9C;--gold:#C9A45C;--gold2:#E2C384;--onGold:#120E08;--line:rgba(201,164,92,.42);--line2:rgba(201,164,92,.16);--err:#F0A08F;
  --veil:linear-gradient(180deg,rgba(4,5,9,.55) 0,rgba(4,5,9,0) 22%,rgba(4,5,9,.05) 40%,rgba(4,5,9,.86) 62%,rgba(4,5,9,.97) 100%);
  --dx:50%;--dy:69%;--push:1.55}
.intro-out #intro{opacity:0;visibility:hidden;pointer-events:none}
/* chart opened: while the gate fades, the page is already at the reading; the hero stays hidden just in case */
.to-reading main .gate{visibility:hidden}
/* the site bar stays on top: brand + music button only while the gate is open */
.intro-on .bar-top{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.intro-on .bar-top .nav{display:none}
.intro-on .skip{display:none}

.g-scene{position:absolute;inset:0;overflow:hidden}
.g-bg,.g-bg img{position:absolute;inset:0;width:100%;height:100%}
.g-bg img{object-fit:cover;object-position:var(--fx,50%) var(--fy,50%)}
.g-grain{position:absolute;inset:-50%;pointer-events:none;z-index:40;opacity:.08;background:url(/img/grain.webp);mix-blend-mode:overlay;animation:g-grain 1.2s steps(4) infinite}
@keyframes g-grain{25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(2%,2%)}}
#g-sparks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

/* gold hairline frame with Korean bracket corners */
.g-frame{position:absolute;inset:72px var(--fi) var(--fi);border:1px solid var(--line);pointer-events:none;z-index:30}
.g-frame i{position:absolute;width:22px;height:22px;border:1px solid var(--gold)}
.g-frame i::after{content:"";position:absolute;width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.g-frame .tl{top:-5px;left:-5px;border-right:0;border-bottom:0}.g-frame .tl::after{top:5px;left:5px}
.g-frame .tr{top:-5px;right:-5px;border-left:0;border-bottom:0}.g-frame .tr::after{top:5px;right:5px}
.g-frame .bl{bottom:-5px;left:-5px;border-right:0;border-top:0}.g-frame .bl::after{bottom:5px;left:5px}
.g-frame .br{bottom:-5px;right:-5px;border-left:0;border-top:0}.g-frame .br::after{bottom:5px;right:5px}

/* cinematic bars */
.g-bars::before,.g-bars::after{content:"";position:absolute;left:0;right:0;height:9vh;background:linear-gradient(#000 55%,rgba(0,0,0,0));z-index:25;pointer-events:none;transition:transform 2.2s cubic-bezier(.7,0,.2,1),opacity 1s}
.g-bars::after{bottom:0;background:linear-gradient(rgba(0,0,0,0),#000 45%)}
.g-bars::before{top:0}
#intro:not([data-stage=gate]) .g-bars::before{transform:translateY(-100%)}
#intro:not([data-stage=gate]) .g-bars::after{transform:translateY(100%)}

/* buttons: double gold hairline, diamond ends, slow shimmer */
.g-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 36px;border:1px solid rgba(226,195,132,.75);
  background:linear-gradient(180deg,rgba(201,164,92,.14),rgba(201,164,92,.04));color:var(--ink);font:600 12px/1.2 var(--sans);letter-spacing:.24em;text-transform:uppercase;cursor:pointer;overflow:hidden;text-decoration:none;
  box-shadow:0 0 0 1px rgba(201,164,92,.15),0 0 40px -10px rgba(226,195,132,.45);transition:color .7s cubic-bezier(.2,.7,.2,1),border-color .7s,background .7s;-webkit-tap-highlight-color:transparent}
.g-btn::before{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.7,0,.2,1);z-index:-1}
.g-btn::after{content:"";position:absolute;inset:3px;border:1px solid rgba(226,195,132,.25);pointer-events:none}
.g-btn:hover::before,.g-btn:focus-visible::before{transform:scaleX(1)}
.g-btn:hover,.g-btn:focus-visible{color:var(--onGold)}
.g-btn:focus-visible{outline:1.5px solid var(--gold2);outline-offset:4px}
.g-btn svg{width:16px;height:16px;flex:none}
.g-btn .dm{position:absolute;top:50%;width:5px;height:5px;background:var(--gold2);transform:translateY(-50%) rotate(45deg)}
.g-btn .dm.l{left:-3px}.g-btn .dm.r{right:-3px}
.g-btn .sh{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,236,190,.28) 50%,transparent 70%);transform:translateX(-120%);animation:g-shim 5.5s 3s ease-in-out infinite;pointer-events:none}
@keyframes g-shim{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
.g-btn.ghost{border-color:transparent;background:none;box-shadow:none;padding:0 14px;color:var(--ink2)}
.g-btn.ghost::after{display:none}
.g-btn.ghost::before{height:1px;top:auto;bottom:14px;left:22px;right:22px;transform:scaleX(.3);background:currentColor;transform-origin:center}
.g-btn.ghost:hover,.g-btn.ghost:focus-visible{color:var(--ink)}
.g-btn.ghost:hover::before,.g-btn.ghost:focus-visible::before{transform:scaleX(1)}
.g-btn:active{transform:translateY(1px)}

/* ── stage 1: the gate */
#g-gate{z-index:20;transition:opacity 1.6s cubic-bezier(.4,0,.2,1),visibility 0s 1.6s}
#g-gate .g-bg{transform:scale(1.04)}
#g-gate .g-bg img{transform-origin:var(--dx) var(--dy);transition:transform 4.2s cubic-bezier(.55,0,.15,1),filter 3.6s}
.g-fog{position:absolute;left:-30%;right:-30%;height:46%;pointer-events:none;filter:blur(8px);
  background:radial-gradient(50% 50% at 30% 50%,rgba(120,140,170,.35) 0,transparent 70%),radial-gradient(40% 50% at 75% 60%,rgba(120,140,170,.35) 0,transparent 70%)}
.g-fog.f1{bottom:-8%;animation:g-drift 48s linear infinite alternate}
.g-fog.f2{bottom:12%;opacity:.55;animation:g-drift 70s linear infinite alternate-reverse}
@keyframes g-drift{from{transform:translateX(-8%)}to{transform:translateX(8%)}}
.g-veil{position:absolute;inset:0;background:var(--veil);pointer-events:none}
.g-blade{position:absolute;left:var(--dx);top:var(--dy);width:40px;height:30%;transform:translate(-50%,-50%) scaleX(0);opacity:0;mix-blend-mode:screen;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,170,80,.28) 32%,rgba(255,220,160,.8) 50%,rgba(255,170,80,.28) 68%,transparent);
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
#intro:not([data-stage=gate]) #g-gate .g-bg img{transform:scale(var(--push));filter:brightness(1.08)}
#intro:not([data-stage=gate]) .g-blade{animation:g-blade 2.6s .35s linear forwards}
@keyframes g-blade{0%{opacity:0;transform:translate(-50%,-50%) scaleX(.05)}12%{opacity:1;transform:translate(-50%,-50%) scaleX(.25)}60%{transform:translate(-50%,-50%) scaleX(3.4) scaleY(1.15)}100%{opacity:.8;transform:translate(-50%,-50%) scaleX(12) scaleY(1.7)}}
#intro[data-stage=door] #g-gate,#intro[data-stage=study] #g-gate{opacity:0;visibility:hidden;pointer-events:none}

.g-hero{position:absolute;z-index:2;left:22px;right:22px;bottom:calc(var(--fi) + 9vh);display:flex;flex-direction:column;align-items:center;text-align:center;transition:opacity .9s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.g-hero::before{content:"";position:absolute;z-index:-1;inset:-12% -18% -10%;background:radial-gradient(closest-side,rgba(3,4,8,.78),rgba(3,4,8,.45) 60%,transparent);pointer-events:none}
.g-hero>*{opacity:0;transform:translateY(14px);animation:g-rise 2s cubic-bezier(.2,.7,.2,1) forwards}
.g-hero>:nth-child(1){animation-delay:.1s}.g-hero>:nth-child(3){animation-delay:1.1s}.g-hero>:nth-child(4){animation-delay:1.5s}
.g-hero>h2{opacity:1;transform:none;animation:none}
@keyframes g-rise{to{opacity:1;transform:none}}
#intro:not([data-stage=gate]) .g-hero{opacity:0;transform:translateY(-10px);pointer-events:none}
.g-eyebrow{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 18px;font:500 10.5px/1.4 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--gold2)}
.g-eyebrow::before,.g-eyebrow::after{content:"";width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.g-eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent)}
.g-hero h2{margin:0;font:400 clamp(44px,5.4vw,80px)/1 var(--serif);text-transform:uppercase;letter-spacing:.14em;color:#E2C384;filter:drop-shadow(0 4px 24px rgba(0,0,0,.65))}
.g-hero h2 span{display:inline-block;background:linear-gradient(180deg,#FFF3D6 0,#E2C384 45%,#9C7A3C 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .02em;opacity:0;filter:blur(10px);letter-spacing:.3em;animation:g-title 2.6s cubic-bezier(.16,.8,.2,1) forwards}
.g-hero h2 span:nth-child(2){animation-delay:.25s}.g-hero h2 span:nth-child(3){animation-delay:.5s}
@keyframes g-title{to{opacity:1;filter:blur(0);letter-spacing:.14em}}
.g-lede{margin:16px auto 28px;max-width:34em;font:400 16px/1.65 var(--sans);color:#D6CCBA;text-wrap:balance}
.g-act{display:flex;flex-direction:column;align-items:center}
.g-act::before{content:"";display:block;width:1px;height:28px;margin:0 auto 18px;background:linear-gradient(transparent,var(--gold))}
.g-choices{display:flex;flex-wrap:wrap;gap:10px 8px;align-items:center;justify-content:center}
.g-fine{margin:16px 0 0;font:400 13px/1.5 var(--sans);color:#C9C0AE;text-wrap:balance}

/* ── stage 2: the lattice door slides open */
#g-door{z-index:15;display:flex;opacity:0;visibility:hidden;transition:opacity .8s,visibility 0s .8s}
#intro[data-stage=door] #g-door{opacity:1;visibility:visible;transition:opacity .8s}
.g-leaf{position:relative;flex:1;height:100%;border:0;
  background:linear-gradient(#140e09,#140e09) 0 17%/100% 3px no-repeat,linear-gradient(#140e09,#140e09) 0 20%/100% 3px no-repeat,
  linear-gradient(#140e09,#140e09) 0 49%/100% 3px no-repeat,linear-gradient(#140e09,#140e09) 0 52%/100% 3px no-repeat,
  linear-gradient(#140e09,#140e09) 0 81%/100% 3px no-repeat,linear-gradient(#140e09,#140e09) 0 84%/100% 3px no-repeat,
  repeating-linear-gradient(90deg,#140e09 0 3px,transparent 3px 18px),
  radial-gradient(70% 55% at 50% 50%,#b98a4e 0,#6e4c27 55%,#2a1c10 100%)}
.g-leaf::after{content:"";position:absolute;inset:0;background:url(/img/hanji.webp);background-size:384px;mix-blend-mode:multiply;opacity:.55}
.g-leaf.l{box-shadow:inset 0 0 0 1px rgba(201,164,92,.35),inset 0 0 0 7px #0b0806,inset 0 0 0 8px rgba(201,164,92,.25),inset 0 0 120px rgba(0,0,0,.8),inset -14px 0 24px -10px rgba(255,200,120,.35)}
.g-leaf.r{box-shadow:inset 0 0 0 1px rgba(201,164,92,.35),inset 0 0 0 7px #0b0806,inset 0 0 0 8px rgba(201,164,92,.25),inset 0 0 120px rgba(0,0,0,.8),inset 14px 0 24px -10px rgba(255,200,120,.35)}
.g-leaf .ring{position:absolute;top:50%;width:14px;height:14px;border:1.5px solid rgba(226,195,132,.8);border-radius:50%;transform:translateY(-50%);z-index:2}
.g-leaf.l .ring{right:10px}.g-leaf.r .ring{left:10px}
#g-door::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:linear-gradient(transparent,rgba(255,214,150,.9) 30%,rgba(255,214,150,.9) 70%,transparent);filter:blur(1px);z-index:2;opacity:0}
#intro[data-stage=door] #g-door::before{animation:g-seam 2.6s .4s ease-in forwards}
@keyframes g-seam{0%{opacity:0;width:2px}30%{opacity:1;width:2px}100%{opacity:0;width:40vw;filter:blur(30px)}}
#intro[data-stage=door] .g-leaf.l{animation:g-slideL 1.7s .7s cubic-bezier(.7,0,.2,1) forwards}
#intro[data-stage=door] .g-leaf.r{animation:g-slideR 1.7s .7s cubic-bezier(.7,0,.2,1) forwards}
@keyframes g-slideL{to{transform:translateX(-102%)}}@keyframes g-slideR{to{transform:translateX(102%)}}

/* ── stage 3: the star-reader's study */
#g-study{z-index:10;visibility:hidden}
#intro[data-stage=door] #g-study,#intro[data-stage=study] #g-study{visibility:visible}
#g-study .g-bg img{--fx:46%;filter:blur(2px) brightness(.78) saturate(.9);transform:scale(1.03)}
.g-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,7,11,.2) 0,rgba(6,7,11,.35) 45%,rgba(6,7,11,.8) 100%);pointer-events:none}
.g-starglow{position:absolute;z-index:1;right:0;top:0;bottom:0;width:60%;background:radial-gradient(60% 55% at 62% 50%,rgba(70,90,140,.28),transparent 70%),radial-gradient(30% 30% at 80% 78%,rgba(255,170,90,.12),transparent 70%);pointer-events:none}
.g-starmap{position:absolute;z-index:1;right:max(40px,5vw);top:50%;width:min(62vh,640px);height:auto;transform:translateY(-50%) rotate(-8deg);color:rgba(222,188,120,.36);pointer-events:none;animation:g-spin 240s linear infinite;filter:drop-shadow(0 0 6px rgba(226,195,132,.25))}
@keyframes g-spin{to{transform:translateY(-50%) rotate(352deg)}}
.g-beam{position:absolute;left:-10%;top:-20%;width:60%;height:140%;background:linear-gradient(100deg,transparent 30%,rgba(150,180,235,.10) 45%,rgba(150,180,235,.05) 55%,transparent 70%);transform:rotate(-8deg);mix-blend-mode:screen;pointer-events:none;animation:g-beam 14s ease-in-out infinite alternate}
@keyframes g-beam{from{opacity:.55;transform:rotate(-8deg) translateX(-2%)}to{opacity:1;transform:rotate(-6deg) translateX(3%)}}
.g-haze{position:absolute;left:-10%;right:-10%;bottom:0;height:45%;background:linear-gradient(transparent,rgba(60,74,110,.42));filter:blur(6px);pointer-events:none;z-index:2;animation:g-drift 50s linear infinite alternate}
.g-candle{position:absolute;left:46%;bottom:6%;width:60vmin;height:60vmin;transform:translate(-50%,50%);background:radial-gradient(closest-side,rgba(255,190,110,.42),rgba(255,160,80,.12) 60%,transparent);mix-blend-mode:screen;pointer-events:none;animation:g-flick 3.2s ease-in-out infinite alternate}
@keyframes g-flick{0%{opacity:.75}40%{opacity:1}70%{opacity:.85}100%{opacity:.95}}
.g-fgvig{position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(120% 90% at 40% 45%,transparent 50%,rgba(2,3,6,.7) 100%)}

.g-guide{position:absolute;z-index:3;margin:0;aspect-ratio:.898;opacity:0;pointer-events:none;
  transition:opacity 2.2s ease .5s,transform 2.6s cubic-bezier(.16,.8,.2,1) .5s,height .9s cubic-bezier(.2,.7,.2,1),bottom .9s cubic-bezier(.2,.7,.2,1)}
.g-guide img{display:block;width:100%;height:100%;object-fit:contain;object-position:bottom center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 78%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 78%,transparent);mask-composite:intersect;
  filter:brightness(.93) contrast(1.04) saturate(.95) drop-shadow(-3px -2px 6px rgba(150,180,240,.35)) drop-shadow(0 30px 40px rgba(0,0,0,.65))}
.g-guide::after{content:"";position:absolute;left:5%;right:5%;bottom:-2%;height:12%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);z-index:-1}
#intro[data-stage=study] .g-guide{opacity:1}
#intro[data-stage=study] .g-guide picture{display:block;height:100%;animation:g-breath 7s ease-in-out 3s infinite}
@keyframes g-breath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.006)}}

.g-dlg{position:absolute;z-index:4;opacity:0;transform:translateY(18px);background:linear-gradient(180deg,rgba(14,15,22,.82),rgba(8,9,14,.9));border:1px solid rgba(201,164,92,.38);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 40px 90px -30px #000;transition:opacity 1.4s ease 1.4s,transform 1.6s cubic-bezier(.16,.8,.2,1) 1.4s}
.g-dlg::before{content:"";position:absolute;inset:5px;border:1px solid var(--line2);pointer-events:none}
.g-dlg::after{content:"";position:absolute;left:50%;top:-1px;width:80px;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--gold2),transparent)}
#intro[data-stage=study] .g-dlg{opacity:1;transform:none}
.g-prog{list-style:none;display:flex;gap:18px;margin:0;padding:0;font:500 12px/1 var(--serif);letter-spacing:.12em;color:#9C9384}
.g-prog li{display:flex;align-items:center;gap:8px}
.g-prog li::before{content:"";width:6px;height:6px;border:1px solid currentColor;transform:rotate(45deg)}
.g-prog li.now{color:var(--gold2)}.g-prog li.done{color:var(--ink2)}.g-prog li.done::before{background:currentColor}
.g-who{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.g-who b{font:500 13px/1 var(--sans);letter-spacing:.36em;text-transform:uppercase;color:var(--gold2)}
.g-who span{font:400 12.5px/1.4 var(--sans);color:#C9C0AE}
.g-say{position:relative;margin:0;font:300 23px/1.48 var(--serif);color:var(--ink)}
.g-say .ghost{visibility:hidden}.g-say .typed{position:absolute;inset:0}
.g-say .typed::after{content:"";display:inline-block;width:.5em;height:1px;margin-left:4px;background:var(--gold);vertical-align:middle;animation:g-blink 1.1s steps(2) infinite}
.g-say.done .typed::after{display:none}
@keyframes g-blink{50%{opacity:0}}
.g-q{margin-top:18px}
.g-dlg-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px}
.g-dlg-top #g-skip{position:static;padding:10px 0 10px 8px;font-size:11.5px;flex:none}
.g-q[hidden]{display:none}
.g-q:not([hidden]){animation:g-rise .9s cubic-bezier(.2,.7,.2,1) both}
.g-ql,.g-q2 .f>span:first-child{display:block;margin:0 0 6px;font:500 12px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#E2C384}
.g-field{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
#g-nick{flex:1 1 200px;min-width:0;height:50px;padding:0 2px;border:0;border-bottom:1px solid var(--gold);background:transparent;font:300 22px/1 var(--serif);color:var(--ink);border-radius:0;outline:none}
#g-nick::placeholder{color:rgba(236,228,210,.62);opacity:1}
#g-nick:focus{border-bottom-color:var(--gold2);box-shadow:0 1px 0 var(--gold2)}
.g-err{min-height:1.2em;margin:6px 0 0;font:400 13px/1.3 var(--sans);color:var(--err)}
.g-row{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:8px;flex-wrap:wrap}
.g-priv{font:400 14px/1.4 var(--sans);color:#CFC6B4}
.g-credit{margin:14px 0 0;font:400 11.5px/1.5 var(--sans);color:#A8A08F}
.g-credit a{color:inherit;text-underline-offset:3px}

/* Quest II: the real chart form, dressed for the study */
.g-q2 .form{margin-top:4px;gap:12px}
.g-q2 .form input:not([type=checkbox]){background:rgba(255,255,255,.04);border:1px solid rgba(201,164,92,.45);border-radius:2px;color:var(--ink);color-scheme:dark}
.g-q2 .form input:not([type=checkbox])::placeholder{color:rgba(236,228,210,.55)}
.g-q2 .form input:focus,.g-q2 .f:focus-within input:not([type=checkbox]){outline:1.5px solid var(--gold2);outline-offset:1px;border-color:var(--gold2)}
.g-q2 .chk{color:#CFC6B4}
.g-q2 .chk input{accent-color:var(--gold)}
.g-q2 .go{border-radius:2px;box-shadow:inset 0 0 0 1px rgba(251,239,216,.25),inset 0 0 0 4px var(--seal),inset 0 0 0 5px rgba(251,239,216,.35)}
.g-q2 .go:focus-visible{outline:1.5px solid var(--gold2)}
.g-q2 #formErr{color:var(--err)}
.g-q2 .fnote{color:var(--ink);background:rgba(201,164,92,.1);border-left-color:var(--gold)}
.g-q2 .ac{z-index:60}

#g-skip{position:absolute;z-index:33;right:calc(var(--fi) + 20px);bottom:calc(var(--fi) + 10px);background:none;border:0;padding:12px 6px;cursor:pointer;font:500 12px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:#D9D0BE}
#g-skip:hover{color:#fff}
#g-skip:focus-visible{outline:1.5px solid var(--gold2);outline-offset:2px}
.g-gcredit{position:absolute;z-index:31;left:calc(var(--fi) + 22px);bottom:calc(var(--fi) + 14px);font:500 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#8E8676;text-decoration:none}
#intro:not([data-stage=gate]) .g-gcredit{display:none}

/* desktop */
@media (min-width:900px){
  .g-guide{left:max(7vw,70px);bottom:0;height:min(80vh,840px);transform:translate3d(0,24px,0)}
  #intro[data-stage=study] .g-guide{transform:none}
  .g-dlg{right:max(80px,9vw);top:50%;width:min(540px,40vw);transform:translateY(calc(-50% + 18px));padding:36px 40px 30px;max-height:calc(100% - 160px);overflow-y:auto;overscroll-behavior:contain}
  #intro[data-stage=study] .g-dlg{transform:translateY(-50%)}
}
/* phones and tablets */
@media (max-width:899px){
  #intro{--fi:10px;--veil:linear-gradient(180deg,rgba(4,5,9,.35) 0,rgba(4,5,9,.55) 14%,rgba(4,5,9,.25) 32%,rgba(4,5,9,0) 45%,rgba(4,5,9,0) 70%,rgba(4,5,9,.75) 86%,rgba(4,5,9,.95) 100%)}
  .g-bars::before,.g-bars::after{height:6vh}
  .g-frame{top:66px}
  #g-gate .g-bg img{--fy:44%}
  #g-gate .g-bg{--fyn:.44}
  .g-hero{top:calc(var(--fi) + 15vh);bottom:calc(6vh + 8px);justify-content:flex-start}
  .g-hero::before,.g-lede{display:none}
  .g-act{margin-top:auto}
  .g-act::before{display:none}
  .g-hero h2{font-size:34px;letter-spacing:.04em;text-wrap:balance;filter:drop-shadow(0 2px 14px rgba(0,0,0,.9))}
  .g-eyebrow{text-shadow:0 1px 8px #000}
  .g-eyebrow::before,.g-eyebrow::after{width:28px}
  .g-gcredit{display:none}
  .g-starmap{right:-30%;top:30%;width:120vw;color:rgba(214,180,110,.12)}
  .g-guide{left:50%;bottom:max(24vh,calc(var(--dlg,320px) - 110px));height:clamp(260px,calc(100% - max(24vh,calc(var(--dlg,320px) - 110px)) - 76px),620px);transform:translate3d(-50%,24px,0)}
  #intro[data-stage=study] .g-guide{transform:translate3d(-50%,0,0)}
  .g-guide img{-webkit-mask-image:linear-gradient(#000 70%,transparent 99%);mask-image:linear-gradient(#000 70%,transparent 99%)}
  .g-dlg{left:12px;right:12px;bottom:12px;padding:18px 18px 14px;max-height:calc(100% - 116px);overflow-y:auto;overscroll-behavior:contain;
    background:linear-gradient(180deg,rgba(8,9,14,.55),rgba(8,9,14,.92) 90px)}
  .g-who{margin-bottom:8px}.g-who span{display:none}
  .g-say{font-size:17.5px;line-height:1.5}
  /* Quest II needs the room: Ha-on steps back, the form takes the card */
  /* Quest II: Ha-on becomes a round portrait above the card, the form gets the room */
  #intro.q2 .g-guide{left:50%;top:76px;bottom:auto;width:112px;height:112px;aspect-ratio:1;border-radius:50%;overflow:hidden;transform:translate3d(-50%,0,0)!important;
    box-shadow:0 0 0 1px rgba(226,195,132,.8),0 0 0 4px #0b0806,0 0 0 5px rgba(226,195,132,.35),0 14px 40px rgba(0,0,0,.6);transition:opacity .6s}
  #intro.q2 .g-guide picture{animation:none!important}
  #intro.q2 .g-guide img{object-fit:cover;object-position:50% 15%;-webkit-mask-image:none;mask-image:none}
  #intro.q2 .g-guide::after{display:none}
  #intro.q2 .g-dlg{top:204px;max-height:none}
}

/* reduced motion (only when the visitor asks for the gate with ?gate=1): no pushes or slides, short fades */
.g-rm *,.g-rm *::before,.g-rm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}
.g-rm #g-gate .g-bg img,.g-rm #g-study .g-bg img{transition:none!important;transform:none!important}
.g-rm .g-guide,.g-rm .g-dlg,.g-rm #g-gate,.g-rm #g-door{transition-duration:.3s!important;transition-delay:0s!important}
.g-rm .g-grain,.g-rm #g-sparks{display:none}
.g-rm .g-hero>*,.g-rm .g-q:not([hidden]){opacity:1!important;transform:none!important}
.g-rm .g-hero h2 span{opacity:1!important;filter:none!important;letter-spacing:.14em!important}
.g-rm #g-door{display:none!important}

/* ── the plaque (현판) above the gate: real text laid over the painted board.
   The layer has the same box, cover-fit maths and zoom as the gate image, so the sign stays locked to it. */
@font-face{font-family:SongMyung;src:url(/fonts/song-myung-plaque.woff2) format("woff2");font-display:block;unicode-range:U+BCC4,U+BE5B,U+C11C,U+C7AC}
#g-gate .g-bg{--iw:1600;--ih:914;--cx:817.5;--cy:432;--pw:142;--ph:60;--fyn:.5}
@media (max-width:759px){#g-gate .g-bg{--iw:800;--ih:1429;--cx:407;--cy:606;--pw:176;--ph:62}}
.g-plq-layer{position:absolute;inset:0;container-type:size;pointer-events:none;transform-origin:var(--dx) var(--dy);transition:transform 4.2s cubic-bezier(.55,0,.15,1)}
#intro:not([data-stage=gate]) .g-plq-layer{transform:scale(var(--push))}
.g-plq{--s:max(calc(100cqw / var(--iw)),calc(100cqh / var(--ih)));position:absolute;
  width:calc(var(--pw) * var(--s));height:calc(var(--ph) * var(--s));
  left:calc((100cqw - var(--iw) * var(--s)) * .5 + (var(--cx) - var(--pw) / 2) * var(--s));
  top:calc((100cqh - var(--ih) * var(--s)) * var(--fyn) + (var(--cy) - var(--ph) / 2) * var(--s));
  display:flex;align-items:center;justify-content:center;border-radius:calc(var(--s) * 1.5);
  background:radial-gradient(90% 120% at 50% 0,#1d1610 0,#0d0a07 70%);
  box-shadow:inset 0 0 0 calc(var(--s) * 2.5) #6f5226,inset 0 0 0 calc(var(--s) * 3.5) #0b0806,inset 0 0 0 calc(var(--s) * 4.5) rgba(226,195,132,.55),
    0 0 0 1px rgba(0,0,0,.5),0 calc(var(--s) * 3) calc(var(--s) * 10) rgba(0,0,0,.7),0 0 calc(var(--s) * 22) rgba(226,195,132,.12)}
.g-plq-t{font:400 min(calc(var(--ph) * var(--s) * .5),calc(var(--pw) * var(--s) * .165))/1 SongMyung,KoSerif,"Noto Serif KR",serif;letter-spacing:.16em;margin-right:-.16em;
  background:linear-gradient(180deg,#FFF0C8 0,#E2C384 48%,#A47E3C 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 calc(var(--s) * 3) rgba(255,214,150,.35))}
.g-plq-seal{position:absolute;right:calc(var(--s) * 7);bottom:calc(var(--s) * 7);width:calc(var(--ph) * var(--s) * .2);height:calc(var(--ph) * var(--s) * .2);
  display:grid;place-items:center;background:var(--seal,#A8352A);color:#F7E9D2;border-radius:1px;font:600 calc(var(--ph) * var(--s) * .13)/1 KoSerif,"Noto Serif KR",serif;opacity:.9}
.g-rm .g-plq-layer{transition:none!important;transform:none!important}

/* hero sits below the plaque on shorter desktop screens */
@media (min-width:900px){.g-hero{bottom:calc(var(--fi) + 5vh)}}
@media (min-width:900px) and (max-height:960px){.g-lede{display:none}.g-act::before{height:16px;margin-bottom:12px}.g-eyebrow{margin-bottom:12px}}
@media (max-width:899px) and (max-height:700px){#intro.q2 .g-guide{width:84px;height:84px;top:72px}#intro.q2 .g-dlg{top:168px}}
@media (max-width:899px){
  .g-dlg-top{position:sticky;top:-18px;z-index:2;margin:-18px -18px 12px;padding:8px 18px 6px;background:linear-gradient(#0b0c12 75%,rgba(11,12,18,0))}
}
@media (max-width:899px){#intro.q2.q2-scrolled .g-guide{opacity:0}}
@media (max-width:899px){.g-dlg::before{display:none}}

/* ════ living gate: clouds over the moon, the door light breathing, stars twinkling (layers locked to the image) ════ */
#g-gate .g-bg{--mx:819;--my:128;--dxp:808;--dyp:668}
@media (max-width:759px){#g-gate .g-bg{--mx:403;--my:177;--dxp:405;--dyp:930}}
.g-plq-layer>*{--s:max(calc(100cqw / var(--iw)),calc(100cqh / var(--ih)));--ox:calc((100cqw - var(--iw) * var(--s)) * .5);--oy:calc((100cqh - var(--ih) * var(--s)) * var(--fyn))}
.g-fx{position:absolute;display:block;pointer-events:none}
.g-halo{width:calc(260 * var(--s));height:calc(260 * var(--s));left:calc(var(--ox) + (var(--mx) - 130) * var(--s));top:calc(var(--oy) + (var(--my) - 130) * var(--s));border-radius:50%;
  background:radial-gradient(closest-side,rgba(220,230,255,.28),rgba(170,190,240,.08) 55%,transparent);mix-blend-mode:screen;animation:g-halo 9s ease-in-out infinite alternate}
@keyframes g-halo{from{opacity:.55;transform:scale(.96)}to{opacity:1;transform:scale(1.05)}}
.g-cloud{left:0;right:0;overflow:hidden;height:calc(var(--ch) * var(--s));top:calc(var(--oy) + (var(--my) + var(--cy0)) * var(--s) - var(--ch) * var(--s) / 2);opacity:0;transition:opacity 2.5s}
.g-cloud b{position:absolute;left:0;top:0;height:100%;width:calc(var(--ch) * var(--s) * 16);background-repeat:repeat-x;background-size:auto 100%;animation:g-cloud var(--cd) linear infinite;will-change:transform}
.g-cloud.c1{--ch:300;--cy0:-10;--cd:150s}
.g-cloud.c2{--ch:240;--cy0:70;--cd:230s}
.fx-on .g-cloud.c1{opacity:.62}.fx-on .g-cloud.c1 b{background-image:url(/img/cloud-a.webp)}
.fx-on .g-cloud.c2{opacity:.4}.fx-on .g-cloud.c2 b{background-image:url(/img/cloud-b.webp);animation-direction:reverse}
@keyframes g-cloud{from{transform:translateX(0)}to{transform:translateX(-25%)}}
.g-door{width:calc(220 * var(--s));height:calc(300 * var(--s));left:calc(var(--ox) + (var(--dxp) - 110) * var(--s));top:calc(var(--oy) + (var(--dyp) - 150) * var(--s));
  background:radial-gradient(closest-side,rgba(255,196,120,.42),rgba(255,160,80,.12) 55%,transparent);mix-blend-mode:screen;animation:g-flick 2.8s ease-in-out infinite alternate}
.g-door2{animation:g-flick2 1.3s steps(2,jump-none) infinite alternate;opacity:.5;transform:scale(.7)}
@keyframes g-flick2{0%{opacity:.35}50%{opacity:.6}100%{opacity:.45}}
#g-stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* ════ the opening (first visit, ~4 s): ink → stars become 四柱 → five elements → the moon rises over the gate ════ */
#g-open{display:none}
.op-on #g-open{display:block;position:absolute;inset:0;z-index:60;cursor:pointer}
.g-open-art{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 45%,#0b0d16 0,#030407 75%);transition:opacity .9s ease}
#g-open.out .g-open-art{opacity:0}
#g-open.out{pointer-events:none}
#g-open-cv{position:absolute;inset:0;width:100%;height:100%}
.g-brush{position:absolute;left:6%;right:6%;top:calc(50% - 11vh);width:88%;height:22vh;opacity:.85}
.g-brush path{stroke-dasharray:1;stroke-dashoffset:1;animation:g-ink 1.1s .15s cubic-bezier(.6,.05,.3,1) forwards}
@keyframes g-ink{to{stroke-dashoffset:0}}
#g-open.p2 .g-brush{transition:opacity 1.2s;opacity:.18}
.g-wuxing{position:absolute;left:50%;top:50%;width:min(64vmin,520px);height:min(64vmin,520px);transform:translate(-50%,-50%)}
.g-wuxing i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--c);opacity:0;
  box-shadow:0 0 18px 4px color-mix(in srgb,var(--c) 70%,transparent),0 0 60px 10px color-mix(in srgb,var(--c) 30%,transparent);transition:opacity .9s,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.g-wuxing i:nth-child(1){--a:-90deg}.g-wuxing i:nth-child(2){--a:-18deg}.g-wuxing i:nth-child(3){--a:54deg}.g-wuxing i:nth-child(4){--a:126deg}.g-wuxing i:nth-child(5){--a:198deg}
#g-open.p2 .g-wuxing i{opacity:.95;transform:rotate(var(--a)) translateX(min(30vmin,240px)) rotate(calc(var(--a) * -1))}
#g-open.p3 .g-wuxing i{opacity:0;transition-duration:.7s}
.g-omoon{position:absolute;left:50%;top:100%;width:min(22vmin,170px);aspect-ratio:1;margin-left:calc(min(22vmin,170px) / -2);border-radius:50%;opacity:0;
  background:radial-gradient(circle at 42% 38%,#fbf8ef 0,#e3e5ee 45%,#b9bfd0 100%);box-shadow:0 0 60px 16px rgba(220,230,255,.35),0 0 180px 60px rgba(160,180,240,.18);
  transition:top 1.6s cubic-bezier(.2,.7,.2,1),opacity 1.2s}
#g-open.p3 .g-omoon{top:16%;opacity:1}
.g-open-cap{position:absolute;left:0;right:0;top:calc(50% + min(26vmin,210px));margin:0;text-align:center;font:italic 300 clamp(16px,2vw,20px)/1.4 var(--serif);color:#D9CDB2;opacity:0;transition:opacity .9s}
#g-open.p2 .g-open-cap{opacity:.9}#g-open.p3 .g-open-cap{opacity:0}
.g-load{position:absolute;left:50%;bottom:calc(var(--fi) + 28px);width:min(240px,50vw);height:1px;transform:translateX(-50%);background:rgba(201,164,92,.18)}
.g-load i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,transparent,#E2C384);box-shadow:0 0 8px rgba(226,195,132,.7);transition:width .4s}
.g-open-skip{position:absolute;right:calc(var(--fi) + 16px);bottom:calc(var(--fi) + 12px);background:none;border:0;padding:12px 6px;cursor:pointer;font:500 12px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:#D9D0BE}
.g-open-skip:focus-visible{outline:1.5px solid var(--gold2);outline-offset:2px}
#g-open.out .g-open-skip{opacity:0}
/* while the opening plays, the gate waits a little further back */
.op-on #g-gate .g-bg{transform:scale(1.16)}
#g-gate .g-bg{transition:transform 3.2s cubic-bezier(.2,.7,.2,1)}
.op-on .g-hero>*,.op-on .g-hero h2 span{animation-play-state:paused}
.op-on .g-bars::before,.op-on .g-bars::after{opacity:0}
.op-on #g-skip{visibility:hidden}

/* the gate picture, its plaque, clouds and title appear together, only once the picture itself is ready
   (no plaque or title floating on black). Safety: shown after 10 s even if the ready signal never comes. */
#g-gate .g-bg{opacity:0;transition:opacity 1.2s ease,transform 3.2s cubic-bezier(.2,.7,.2,1);animation:g-safe 0s 10s forwards}
#intro.gimg-ready #g-gate .g-bg{opacity:1;animation:none}
#intro:not(.gimg-ready) .g-hero{visibility:hidden;animation:g-safev 0s 10s forwards}
#intro:not(.gimg-ready) .g-hero>*,#intro:not(.gimg-ready) .g-hero h2 span{animation-play-state:paused}
@keyframes g-safe{to{opacity:1}}
@keyframes g-safev{to{visibility:visible}}
.op-on .g-hero{opacity:0}

/* ── editor 86 → fixes (11/05) */
/* quicker way in: doors open within ~1.2 s */
#intro[data-stage=door] .g-leaf.l{animation:g-slideL 1s .15s cubic-bezier(.7,0,.2,1) forwards}
#intro[data-stage=door] .g-leaf.r{animation:g-slideR 1s .15s cubic-bezier(.7,0,.2,1) forwards}
#intro[data-stage=door] #g-door::before{animation:g-seam 1.2s .05s ease-in forwards}
/* nothing else moves while the doors open */
#intro:not([data-stage=gate]) .g-cloud b,#intro:not([data-stage=gate]) .g-fog,#intro:not([data-stage=gate]) .g-halo,#intro:not([data-stage=gate]) .g-door,#intro:not([data-stage=gate]) .g-grain{animation-play-state:paused}
#intro[data-stage=door] #g-sparks{display:none}
/* phones, Quest II: the round portrait always shows the still picture (same framing, no zoom jump) */
@media (max-width:899px){#intro.q2 .g-guide canvas{display:none}#intro.q2 .g-guide.hl-on picture img{opacity:1!important}}
/* the opening moon is the gate's own moon, with a soft glowing rim */
.g-omoon{background:url(/img/moon.webp) center/108% no-repeat;box-shadow:0 0 40px 10px rgba(220,230,255,.35),0 0 140px 50px rgba(160,180,240,.16)}
.g-open-cap{font-size:clamp(18px,2.2vw,22px);color:#E6DCC4}
#g-open.p2 .g-open-cap{opacity:1}
/* lighter on weak devices: a still grain, no blend modes on the glows, fog kept on its own layer */
.g-grain{animation:none;mix-blend-mode:normal;opacity:.035}
.g-halo,.g-door{mix-blend-mode:normal}
.g-door{background:radial-gradient(closest-side,rgba(255,196,120,.26),rgba(255,160,80,.07) 55%,transparent)}
.g-halo{background:radial-gradient(closest-side,rgba(220,230,255,.18),rgba(170,190,240,.05) 55%,transparent)}
.g-fog{will-change:transform}
.g-fog{filter:none}
.g-grain{display:none}
.g-halo,.g-door{will-change:opacity,transform}
/* weak device (measured on the gate): keep the picture, the plaque and one slow cloud; drop the rest */
.fx-lite #g-sparks,.fx-lite #g-stars,.fx-lite .g-cloud.c2,.fx-lite .g-door2,.fx-lite .g-fog.f2{display:none}
.fx-lite .g-halo,.fx-lite .g-door,.fx-lite .g-fog,.fx-lite .g-hero .g-btn .sh{animation:none}
.fx-lite .g-starmap{animation:none;filter:none}
.fx-lite .g-haze,.fx-lite .g-beam,.fx-lite .g-candle{animation:none;filter:none;mix-blend-mode:normal}
.fx-lite .g-dlg{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,rgba(14,15,22,.94),rgba(8,9,14,.97))}
.fx-lite .g-guide img{filter:none!important}
.fx-lite #intro[data-stage=study] .g-guide picture{animation:none}
.fx-lite #g-study .g-bg img{filter:brightness(.72) saturate(.9)}

/* ── gate → doors → study without the gate coming back (11/05 owner bug):
   the lattice doors now cover the gate (z 25 over 20) and fade in over 0.4 s; the gate is then hidden for good
   (no lingering fade underneath), and the doors only start to slide once the gate is gone */
#g-door{z-index:22;transition:opacity .4s ease,visibility 0s .4s}
#intro[data-stage=door] #g-door{transition:opacity .4s ease}
#intro[data-stage=door] #g-gate,#intro[data-stage=study] #g-gate{transition:opacity .05s linear .4s,visibility 0s .45s}
#intro[data-stage=door] .g-leaf.l{animation:g-slideL .8s .45s cubic-bezier(.7,0,.2,1) forwards}
#intro[data-stage=door] .g-leaf.r{animation:g-slideR .8s .45s cubic-bezier(.7,0,.2,1) forwards}
#intro[data-stage=door] #g-door::before{animation:g-seam 1s .3s ease-in forwards}

/* ── the study doors: hanok 사분합 style — 띠살 bands, 아자살 centre, hanji glowing with candle light, brass ring pull */
.g-ldefs{position:absolute;width:0;height:0}
.g-leaf{background:#1a120c!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 0 60px rgba(0,0,0,.55)!important;border:0;will-change:transform;overflow:hidden}
.g-leaf::after{display:none!important}
.g-leaf .ring{display:none}
.g-leaf.l{box-shadow:inset -2px 0 0 rgba(120,84,48,.5),inset 0 0 60px rgba(0,0,0,.5)!important}
.g-leaf.r{box-shadow:inset 2px 0 0 rgba(120,84,48,.5),inset 0 0 60px rgba(0,0,0,.5)!important}
.g-leaf.r .g-lsvg{transform:scaleX(-1)}
.g-lsvg{display:block}
.g-lsvg .pp{fill:url(#gl-glow)}
.g-lsvg .bar{fill:#1d130c}
.g-lsvg .bev{fill:none;stroke:#0f0905;stroke-width:3}
.g-lsvg .panel{fill:#24180f;stroke:#120b07;stroke-width:2}
.g-lsvg .panel2{fill:none;stroke:#3d2a1b;stroke-width:1.5}
.g-lsvg .sill{fill:#0e0906}
.g-lsvg .plate{fill:url(#gl-brass);stroke:#4a3310;stroke-width:1}
.g-lsvg .boss{fill:#f3d790}
.g-lsvg .ring{fill:none;stroke:url(#gl-brass);stroke-width:3.2;filter:url(#gl-soft)}
.g-lsvg .nail circle{fill:url(#gl-brass);stroke:#3a280c;stroke-width:.6}
/* hanji texture over the lit paper, and a gentle flicker of the candle behind it */
.g-leaf::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:url(/img/hanji.webp);background-size:300px;mix-blend-mode:multiply;opacity:.35}
.g-leaf .g-lsvg{position:relative;z-index:0}
/* warm light spilling out as the doors part */
.g-spill{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(45% 70% at 50% 55%,rgba(255,206,140,.75),rgba(255,170,90,.25) 45%,transparent 75%)}
#g-door .g-leaf{z-index:1}
#intro[data-stage=door] .g-spill{animation:g-spill 1.4s .35s ease-out forwards}
@keyframes g-spill{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
/* motion: weighty, no bounce */
#intro[data-stage=door] .g-leaf.l{animation:g-slideL 1s .45s cubic-bezier(.65,0,.35,1) forwards}
#intro[data-stage=door] .g-leaf.r{animation:g-slideR 1s .45s cubic-bezier(.65,0,.35,1) forwards}
/* soft shadow under the lattice: a cheap blurred copy is not needed — the bars carry a light edge and a dark core;
   the leaves are their own GPU layers, so sliding never repaints the drawing */
#g-door .g-leaf{contain:paint}
/* once open, the doors stay open: in the study stage the slide animation no longer applies,
   so hold the leaves at their open position (no snap back to closed while the door scene fades) */
#intro[data-stage=study] .g-leaf.l{transform:translateX(-102%)}
#intro[data-stage=study] .g-leaf.r{transform:translateX(102%)}
#intro[data-stage=study] #g-door{transition:opacity .3s ease,visibility 0s .3s}

/* ════ one scene (owner 11/05 15:05–15:43, plan A): Ha-on is no longer a picture pasted on the room.
   His own art, cut out (img/haon-cut-*: background removed, nothing redrawn) and graded to the study:
   same navy shadows, warm candle side (right), cool moonlit window side (left), edge sunk into the air.
   One shared light layer, haze, vignette and grain sit over BOTH the room and him;
   the words float in a shadow that fades out on every side (no box, no border, no gold frame). */
#g-study .g-bg img{filter:brightness(.74) saturate(.9) contrast(1.04);transform:scale(1.02)}
.g-frame{transition:opacity .8s ease}
#intro[data-stage=study] .g-frame{opacity:0}
.g-guide{z-index:3}
.g-guide img{filter:brightness(.8) contrast(.96) saturate(.92) drop-shadow(-1px -2px 2px rgba(120,150,215,.08))}
.g-guide::after{left:0;right:0;bottom:-4%;height:22%;background:radial-gradient(closest-side,rgba(2,3,8,.7),transparent);z-index:-1}
.g-haze{z-index:4;opacity:.45}
.g-fgvig{z-index:4;background:radial-gradient(125% 95% at 44% 46%,transparent 52%,rgba(2,3,7,.72) 100%)}
.g-grade{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(42% 55% at 58% 70%,rgba(255,172,96,.09),transparent 70%),radial-gradient(45% 60% at 14% 34%,rgba(110,140,210,.08),transparent 70%),
    linear-gradient(180deg,rgba(4,5,10,0) 58%,rgba(4,5,10,.5) 100%)}
.g-dlg{z-index:6}
.g-dlg::before{display:none}

@media (min-width:900px){
  /* he stands just left of the candle, cut by the bottom of the frame */
  .g-guide{left:clamp(-60px,calc(46vw - 84vh * .898),4vw);bottom:0;height:84vh;transform:translate3d(0,18px,0)}
  .g-guide img{filter:brightness(.7) contrast(.95) saturate(.9) drop-shadow(-1px -2px 2px rgba(120,150,215,.08))}
  .g-guide img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 5%,#000 78%,transparent 100%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 5%,#000 78%,transparent 100%);mask-composite:intersect}
  .g-dlg{right:max(56px,6vw);width:min(560px,40vw);padding:34px 40px 28px;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  /* Quest I: nothing to scroll, so the shadow may spill far past the words and fade on every side */
  #intro:not(.q2) .g-dlg{overflow:visible;max-height:none}
  .g-dlg::before{display:block;content:"";position:absolute;inset:-90px -120px;z-index:-1;border:0;pointer-events:none;
    background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(6,8,15,.8) 0,rgba(6,8,15,.72) 52%,rgba(6,8,15,.3) 78%,rgba(6,8,15,0) 100%)}
  .g-dlg::after{top:6px;opacity:.3}
  .g-starmap{color:rgba(222,188,120,.22)}
  /* Quest II: the form may need to scroll, so the shadow is painted inside the box as a soft oval */
  #intro.q2 .g-dlg{right:max(32px,4vw);width:min(640px,46vw);padding:44px 64px 34px;
    background:radial-gradient(farthest-side,rgba(6,8,15,.86) 0,rgba(6,8,15,.8) 70%,rgba(6,8,15,.4) 90%,rgba(6,8,15,0) 100%)}
  #intro.q2 .g-dlg::before{display:none}
  #intro.q2 .g-dlg::after{top:14px}
}
@media (min-width:900px) and (max-width:1299px){.g-dlg{right:28px;width:min(520px,46vw)}.g-dlg::before{inset:-70px -60px}}

/* phones and tablets: he fills the top of the screen and melts into the dark where the words are */
@media (max-width:899px){
  .g-guide{left:50%;top:64px;bottom:auto;width:min(112vw,660px);height:auto;aspect-ratio:900/1002;transform:translate3d(-50%,16px,0)}
  #intro[data-stage=study] .g-guide{transform:translate3d(-50%,0,0)}
  /* 11/05 편집장 83: the fade used to start at 45% and ran over his arms, so the window lattice showed through them.
     He now stays solid down past the arms (63%) and only melts below them, over a dark floor shadow (::after),
     so nothing of the room shows through him. Same dimming as the desktop (he was 2.1-2.4x the room behind) */
  .g-guide img{filter:brightness(.66) contrast(.95) saturate(.9);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 63%,transparent 93%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 6%,#000 63%,transparent 93%);mask-composite:intersect}
  .g-guide::after{display:block;left:-6%;right:-6%;top:34%;bottom:-8%;height:auto;z-index:-1;
    background:radial-gradient(56% 62% at 50% 64%,rgba(3,4,9,.94) 0,rgba(3,4,9,.9) 48%,rgba(3,4,9,.55) 76%,rgba(3,4,9,0) 100%)}
  #intro.q2 .g-guide::after{display:none}
  .g-grade{background:linear-gradient(180deg,rgba(4,5,10,.6) 0,rgba(4,5,10,0) 90px),radial-gradient(60% 40% at 82% 74%,rgba(255,172,96,.08),transparent 70%),
    linear-gradient(0deg,rgba(5,6,11,.95) 0,rgba(5,6,11,.9) calc(var(--dlg,330px) - 24px),rgba(5,6,11,.7) calc(var(--dlg,330px) + 22px),rgba(5,6,11,.3) calc(var(--dlg,330px) + 90px),rgba(5,6,11,0) calc(var(--dlg,330px) + 140px))}
  .g-dlg{left:4px;right:4px;bottom:8px;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .g-dlg::after{display:none}
  .g-dlg-top{background:none}
  #intro.q2-scrolled .g-dlg-top{background:linear-gradient(#06070c 75%,rgba(6,7,12,0))}
  /* name + seal on one line, so he keeps more of the screen */
  #g-q1 .g-field{flex-wrap:nowrap;gap:10px}
  #g-nick{flex:1 1 auto;width:0;font-size:20px}
  #g-q1 .g-field .g-btn{flex:none;padding-left:14px;padding-right:14px;letter-spacing:.16em}
  /* Quest II: no round photo; he steps up so his face stays above the form */
  #intro.q2 .g-guide{left:50%;top:-30px;bottom:auto;width:min(112vw,660px);height:auto;aspect-ratio:900/1002;border-radius:0;overflow:visible;box-shadow:none;transform:translate3d(-50%,0,0)!important;transition:opacity .6s}
  #intro.q2 .g-guide img{object-fit:contain;object-position:bottom center;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 36%,transparent 58%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 36%,transparent 58%);mask-composite:intersect}
  #intro.q2 .g-guide canvas{display:block}
  #intro.q2 .g-guide.hl-on picture img{opacity:0!important}
  #intro.q2 .g-guide picture{animation:g-breath 7s ease-in-out 3s infinite!important}
}
/* 360x740: the logo sat on the gat brim, so he stands 16px lower */
@media (max-width:899px) and (max-height:760px){.g-guide{top:40px}#intro.q2 .g-guide{top:-14px}
  /* short phones: the room behind him is darker, so he is dimmed a little more to stay under ~1.9x of it */
  #intro .g-guide img{filter:brightness(.58) contrast(.95) saturate(.9)!important}}
@media (max-width:899px) and (max-height:700px){#intro.q2 .g-guide{width:min(112vw,660px);height:auto;top:-60px}}
/* 11/05 편집장 84 */
/* 360x740 Quest II: the logo sat on the gat brim, so the brim now melts away under the header (longer top fade) and he stands a little lower */
@media (max-width:899px) and (min-height:701px) and (max-height:760px){
  #intro.q2 .g-guide{top:-6px}
  #intro.q2 .g-guide img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,transparent 4%,#000 17%,#000 36%,transparent 58%);
    mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,transparent 4%,#000 17%,#000 36%,transparent 58%)}}
/* tall phones and tablets (768x1024): Quest II showed only his eyes above the form and ~300px of empty dark below it.
   The form now starts just under his chin (chin = 50% of the art), and he stays solid down to it */
@media (max-width:899px) and (min-height:900px){
  #intro.q2 .g-guide{top:-20px}
  #intro.q2 .g-guide img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 47%,transparent 66%);
    mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 47%,transparent 66%)}
  #intro.q2 .g-dlg{top:calc(min(112vw,660px) * .556 + 6px)}
}
@media (max-width:389px){#g-nick{font-size:18px}#g-q1 .g-field .g-btn{padding-left:12px;padding-right:12px;letter-spacing:.1em}}
/* lighter devices: no drop-shadow, but the same dimming so he still matches the room */
.fx-lite .g-guide img{filter:brightness(.8) contrast(.96) saturate(.92)!important}
@media (max-width:899px){.fx-lite .g-guide img{filter:brightness(.66) contrast(.95) saturate(.9)!important}}
@media (min-width:900px){.fx-lite .g-guide img{filter:brightness(.7) contrast(.95) saturate(.9)!important}}
.fx-lite .g-dlg::before{-webkit-backdrop-filter:none;backdrop-filter:none}
.fx-lite .g-dlg{background:none}
@media (min-width:900px){.fx-lite #intro.q2 .g-dlg{background:radial-gradient(farthest-side,rgba(5,7,13,.9) 0,rgba(5,7,13,.86) 70%,rgba(5,7,13,.45) 90%,rgba(5,7,13,0) 100%)}}

/* ── 11/05 편집장: the doors sit in a real frame — 상인방 lintel under the site bar, 기둥 posts, 하인방 sill.
   The leaves (drawn in whole pixels by gate.js) slide behind the posts into the wall */
#g-door{padding:calc(var(--top,64px) + var(--lh,30px)) var(--post,24px) var(--sill,24px);background:none}
#g-door .g-leaf{flex:none;width:50%;height:100%;background:#1a120c!important}
#g-door .g-leaf.r .g-lsvg{transform:none}
.g-lsvg{width:100%;height:100%}
.g-lsvg .sal{fill:none;stroke:#1a110a;stroke-width:2.8;stroke-linecap:square}
.g-lsvg .sal.aja{stroke-width:3;stroke-linejoin:miter}
.g-lsvg .salhi{fill:none;stroke:#7a5634;stroke-width:.9;opacity:.5;transform:translate(-.8px,-.8px)}
.g-lsvg .bev{fill:none;stroke:#0d0805;stroke-width:3.4}
.g-lsvg .seam{fill:#0a0604}
.g-lsvg .plate{fill:url(#gl-brass);stroke:#3e2a0c;stroke-width:.8;opacity:.92}
.g-lsvg .rose{fill:url(#gl-brass);stroke:#4a3310;stroke-width:1;filter:url(#gl-soft)}
.g-lsvg .boss{fill:#f6df9f;stroke:#6b4c18;stroke-width:.6}
.g-lsvg .staple{fill:url(#gl-brass);stroke:#4a3310;stroke-width:.6}
.g-lsvg .ring{fill:none;stroke:url(#gl-brass);stroke-width:3.6;filter:url(#gl-soft)}
.g-eave,.g-lintel,.g-post,.g-sill{position:absolute;z-index:4;pointer-events:none}
.g-eave{left:0;right:0;top:0;height:var(--top,64px);background:linear-gradient(180deg,#050403,#0c0906 70%,#140e09)}
.g-lintel{left:0;right:0;top:var(--top,64px);height:var(--lh,30px);
  background:linear-gradient(180deg,rgba(255,220,160,.16) 0 1px,transparent 1px),linear-gradient(180deg,#3d2a1b 0,#2c1e13 45%,#1b120b 85%,#0b0705 100%);
  box-shadow:0 6px 14px rgba(0,0,0,.6),inset 0 -2px 0 rgba(0,0,0,.5)}
.g-post{top:var(--top,64px);bottom:0;width:var(--post,24px);
  background:linear-gradient(90deg,#0d0906 0,#2e2015 22%,#433021 46%,#2a1c12 72%,#0b0705 100%);box-shadow:0 0 18px rgba(0,0,0,.7)}
.g-post.l{left:0}.g-post.r{right:0}
.g-sill{left:0;right:0;bottom:0;height:var(--sill,24px);background:linear-gradient(180deg,#2a1c12,#140d08 60%,#080504);box-shadow:0 -4px 10px rgba(0,0,0,.5)}
.g-lintel::after,.g-post::after,.g-sill::after{content:"";position:absolute;inset:0;background:url(/img/hanji.webp);background-size:260px;mix-blend-mode:overlay;opacity:.18}
/* the seam glow stays inside the frame */
#g-door::before{top:calc(var(--top,64px) + var(--lh,30px));bottom:var(--sill,24px)}
.g-lsvg .ring{display:inline}
.g-lsvg .ring{transform:none;border:0;position:static}
/* 11/05 편집장 78 (AI 검수 1회차) */
/* short desktops (1024x768): Quest II's red button was cut off inside the box; the box is tighter so it all fits */
@media (min-width:900px) and (max-height:820px){
  #intro.q2 .g-dlg{padding:26px 52px 18px;max-height:calc(100% - 92px);top:calc(50% + 22px)}
  #intro.q2 .g-who{margin-bottom:8px}#intro.q2 .g-who span{display:none}
  #intro.q2 .g-say{font-size:20px;line-height:1.42}
  #intro.q2 .g-dlg-top{margin-bottom:10px}
}
/* tall tablets (768x1024): no big empty strip under the form; the form sits lower and he keeps more of his shoulders */
@media (max-width:899px) and (min-height:900px){
  #intro.q2 .g-guide{top:0}
  #intro.q2 .g-guide img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 52%,transparent 72%);
    mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 52%,transparent 72%)}
  #intro.q2 .g-dlg{top:auto;bottom:max(24px,calc(100vh - min(112vw,660px) * .62 - 640px))}
}
/* 360x740 Quest II: the header strip is darker so the logo never sits on the gat brim, and his face is a touch brighter */
@media (max-width:899px) and (min-height:701px) and (max-height:760px){
  #intro.q2 .g-guide{top:10px}
  #intro.q2 .g-guide img{filter:brightness(.68) contrast(.96) saturate(.9)!important}
}
@media (max-width:899px) and (max-height:760px){
  #intro.q2 .g-grade{background:linear-gradient(180deg,rgba(4,5,10,.92) 0,rgba(4,5,10,.7) 56px,rgba(4,5,10,0) 112px),radial-gradient(60% 40% at 82% 74%,rgba(255,172,96,.08),transparent 70%),
    linear-gradient(0deg,rgba(5,6,11,.95) 0,rgba(5,6,11,.9) calc(var(--dlg,330px) - 24px),rgba(5,6,11,.7) calc(var(--dlg,330px) + 22px),rgba(5,6,11,.3) calc(var(--dlg,330px) + 90px),rgba(5,6,11,0) calc(var(--dlg,330px) + 140px))}
}
/* 11/05 AI 검수 3회차 */
/* phones: his face was too dark in Quests I and II; a little brighter (the dark band under the words stays) */
@media (max-width:899px){#intro .g-guide img,.fx-lite #intro .g-guide img{filter:brightness(.76) contrast(.96) saturate(.92)!important}}
@media (max-width:899px) and (max-height:760px){#intro .g-guide img,.fx-lite #intro .g-guide img{filter:brightness(.72) contrast(.96) saturate(.92)!important}}
/* big screens (1600+): Quest II's box was small and far from his face; it is larger, with bigger words, and sits closer to him */
@media (min-width:1600px){
  #intro.q2 .g-dlg{right:9vw;width:min(780px,40vw);padding:52px 76px 40px}
  #intro .g-say{font-size:28px}
  #intro .g-who b{font-size:15px}#intro .g-who span{font-size:14px}
  #intro.q2 .f>span{font-size:13px}#intro.q2 .chk{font-size:16px}
  #intro .g-ql{font-size:13px}
  #intro.q2 .g-q input,#intro.q2 .g-q select{font-size:18px;min-height:54px}
  #intro.q2 .go{font-size:18px;min-height:58px}
}

/* 11/06 하온 검수: on phones the moon touched the top frame — the whole gate picture (moon, plaque, door light move together)
   sits a little lower (the moon ~12% further down its frame); the strip it uncovers at the top is the same night-sky navy, faded into the picture */
@media (max-width:759px){
  #g-gate{background:linear-gradient(180deg,#070a14 0,#0c1426 100%)}
  #g-gate .g-bg{translate:0 6vh}
  #g-gate .g-bg picture{display:block;height:100%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%);mask-image:linear-gradient(180deg,transparent 0,#000 7%)}
}