/* Player: one grotesk, large-type lists, scroll-lit text, glass only over the user's images; dark/light, base/terminal themes, chapter effects.
   Editor: tree | live screen | properties in neutral editor tokens. */
:root{
  --e-bg:#f1f2f4;--e-panel:#ffffff;--e-fg:#16181d;--e-dim:#676d78;--e-line:#dfe2e7;--e-soft:#eceef1;
  --e-accent:#2f6bff;--e-accent-fg:#ffffff;--e-ok:#178a52;--e-warn:#b86e00;--e-danger:#d93a2b;
  --e-font:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --e-mono:ui-monospace,'SFMono-Regular',Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--e-bg:#0f1013;--e-panel:#17181c;--e-fg:#e9ebef;--e-dim:#959ba6;--e-line:#2a2d33;--e-soft:#212329;--e-accent:#6d95ff;--e-accent-fg:#0b1430;--e-ok:#4fca8a;--e-warn:#f0a83a;--e-danger:#ff6b5d;color-scheme:dark}}
:root[data-theme="dark"]{--e-bg:#0f1013;--e-panel:#17181c;--e-fg:#e9ebef;--e-dim:#959ba6;--e-line:#2a2d33;--e-soft:#212329;--e-accent:#6d95ff;--e-accent-fg:#0b1430;--e-ok:#4fca8a;--e-warn:#f0a83a;--e-danger:#ff6b5d;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:#000;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.is-editor{background:var(--e-bg)}
#root{height:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
input,select,textarea{font:inherit;color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
.ico{display:inline-block;width:1em;height:1em;flex:none;vertical-align:middle}
.ico svg{display:block;width:100%;height:100%}

/* ───────── player: one grotesk, typographic lists, scroll-lit text, glass only over images ─────────
   modes: dark (default) / light · themes: base / terminal · per-chapter effects layered on top */
.pv{
  --bg:#000;--fg:#fff;--fg2:rgba(255,255,255,.58);--fg3:rgba(255,255,255,.32);--dim:rgba(255,255,255,.22);--txt:rgba(255,255,255,.84);
  --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);--chip:rgba(255,255,255,.08);--chip2:rgba(255,255,255,.13);
  --btn:#fff;--btn-fg:#000;--glass:rgba(22,22,24,.72);--pin:rgba(20,20,22,.58);--pin-on:#fff;--pin-on-fg:#000;--danger:#ff7d7d;--ph:#0d0d0d;
  --font:'Wanted Sans Variable','Wanted Sans','Pretendard Variable',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  container:pv / inline-size;
  position:relative;height:100%;overflow:hidden;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);
  font-family:var(--font);font-size:16px;line-height:1.6;letter-spacing:-.012em;-webkit-tap-highlight-color:transparent;color-scheme:dark
}
.pv[data-mode="light"]{
  --bg:#f5f5f2;--fg:#0b0b0c;--fg2:rgba(11,11,12,.6);--fg3:rgba(11,11,12,.4);--dim:rgba(11,11,12,.18);--txt:rgba(11,11,12,.82);
  --line:rgba(0,0,0,.09);--line2:rgba(0,0,0,.16);--chip:rgba(0,0,0,.05);--chip2:rgba(0,0,0,.09);
  --btn:#0b0b0c;--btn-fg:#fff;--glass:rgba(250,250,247,.78);--pin:rgba(255,255,255,.72);--pin-on:#0b0b0c;--pin-on-fg:#fff;--danger:#c4302b;--ph:#e7e7e2;color-scheme:light
}
/* communication-server theme: phosphor green, pixel type, scanlines */
.pv[data-theme="terminal"]{
  --bg:#010603;--fg:#46ff8a;--fg2:rgba(70,255,138,.72);--fg3:rgba(70,255,138,.46);--dim:rgba(70,255,138,.2);--txt:rgba(70,255,138,.88);
  --line:rgba(70,255,138,.18);--line2:rgba(70,255,138,.32);--chip:rgba(70,255,138,.08);--chip2:rgba(70,255,138,.14);
  --btn:#46ff8a;--btn-fg:#010603;--glass:rgba(2,14,6,.86);--pin:rgba(1,8,3,.72);--pin-on:#46ff8a;--pin-on-fg:#010603;--danger:#ff6464;--ph:#03120a;
  --font:'Galmuri11','Galmuri9',ui-monospace,monospace;letter-spacing:0
}
.pv[data-theme="terminal"][data-mode="light"]{
  --bg:#dce6d2;--fg:#0f4a1f;--fg2:rgba(15,74,31,.75);--fg3:rgba(15,74,31,.5);--dim:rgba(15,74,31,.22);--txt:rgba(15,74,31,.9);
  --line:rgba(15,74,31,.2);--line2:rgba(15,74,31,.34);--chip:rgba(15,74,31,.08);--chip2:rgba(15,74,31,.14);
  --btn:#0f4a1f;--btn-fg:#dce6d2;--glass:rgba(220,230,210,.9);--pin:rgba(220,230,210,.8);--pin-on:#0f4a1f;--pin-on-fg:#dce6d2;--ph:#cdd9c1
}
.pv[data-theme="terminal"]:not([data-mode="light"]) .pv-body{text-shadow:0 0 8px rgba(70,255,138,.35)}
.pv[data-theme="terminal"] .display,.pv[data-theme="terminal"] .h2,.pv[data-theme="terminal"] .row.big .h3{font-weight:400;letter-spacing:0}
.pv[data-theme="terminal"] .display{font-size:clamp(28px,8vw,40px);line-height:1.25}
.pv[data-theme="terminal"] .lit{font-weight:400;font-size:clamp(19px,5.2vw,24px);line-height:1.6}
.pv[data-theme="terminal"] .eyebrow::before{content:'// '}
.pv[data-theme="terminal"] .sec-label::before{content:'> '}
.pv[data-theme="terminal"] .row .h3::before{content:'['}
.pv[data-theme="terminal"] .row .h3::after{content:']'}
.pv[data-theme="terminal"] .btn,.pv[data-theme="terminal"] .field,.pv[data-theme="terminal"] .pin,.pv[data-theme="terminal"] .pill,.pv[data-theme="terminal"] .tb-back,.pv[data-theme="terminal"] .tb-name,.pv[data-theme="terminal"] .seen button,.pv[data-theme="terminal"] .tb-mode{border-radius:2px}
.pv[data-theme="terminal"] .field{box-shadow:inset 0 0 0 1px var(--line2)}
.pv[data-theme="terminal"] .field::before{content:'>';margin-right:10px;color:var(--fg)}
.pv[data-theme="terminal"] .field input{caret-color:var(--fg)}
.pv[data-theme="terminal"] .mapv,.pv[data-theme="terminal"] .pic-wide,.pv[data-theme="terminal"] .row .pic{border-radius:2px}
.pv[data-theme="terminal"] .mapc>img{filter:grayscale(1) contrast(1.2) brightness(.85) sepia(1) hue-rotate(75deg) saturate(2.4)}
.pv[data-theme="terminal"] .scanlines{position:absolute;inset:0;pointer-events:none;z-index:6;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.5))}
.pv[data-theme="terminal"][data-mode="light"] .scanlines{background:repeating-linear-gradient(0deg,rgba(15,74,31,.07) 0 1px,transparent 1px 3px)}
.pv[data-theme="terminal"] .display::after{content:'▮';margin-left:4px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

.pv-fx{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.pv-top{position:absolute;top:0;left:0;right:0;z-index:8;display:flex;align-items:center;gap:10px;min-height:56px;padding:calc(env(safe-area-inset-top,0px) + 8px) 16px 8px;pointer-events:none;transition:background .3s}
.pv-top>*{pointer-events:auto}
.pv.scrolled .pv-top{background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4)}
.tb-back{height:36px;padding:0 14px 0 10px;border-radius:999px;background:var(--chip);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:14px;color:var(--fg);display:inline-flex;align-items:center;gap:4px}
.tb-back::before{content:'';width:8px;height:8px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-right:2px}
.tb-title{font-size:15px;font-weight:600;opacity:0;transition:opacity .25s;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv.scrolled .tb-title{opacity:1}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.tb-name,.tb-mode{height:34px;padding:0 14px;border-radius:999px;background:var(--chip);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:13px;color:var(--fg2);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center}
.tb-tag{height:26px;padding:0 10px;border-radius:999px;background:var(--btn);color:var(--btn-fg);font-size:11px;font-weight:700;display:inline-flex;align-items:center;letter-spacing:.04em}
.pv-body{position:relative;z-index:2;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none}
.pv-body::-webkit-scrollbar{display:none}
.scr{position:relative;width:100%;max-width:600px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 76px) 22px calc(80px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;min-height:100%}

/* type */
.eyebrow{font-size:13px;font-weight:500;color:var(--fg3)}
.display{margin:0;font-size:clamp(34px,10vw,46px);font-weight:700;line-height:1.08;letter-spacing:-.045em;text-wrap:balance}
.h2{margin:0;font-size:26px;font-weight:700;line-height:1.2;letter-spacing:-.035em}
.h3{margin:0;font-size:19px;font-weight:600;line-height:1.35;letter-spacing:-.02em}
.sub{margin:0;color:var(--fg2);font-size:15px;line-height:1.55}
.body{font-size:16px;line-height:1.8;color:var(--txt)}
.rich p{margin:0 0 .9em}.rich p:last-child{margin-bottom:0}
.pre{white-space:pre-line}
.empty{margin:0;padding:28px 0;color:var(--fg3);font-size:15px}
.gap{height:44px;flex:none}
.sec-label{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;font-weight:600;color:var(--fg3);margin-bottom:6px}
.lit{font-size:clamp(23px,6.4vw,30px);font-weight:600;line-height:1.38;letter-spacing:-.03em}
.lit .w{color:var(--dim);transition:color .25s}
.lit .w.on,.pv.is-edit .lit .w{color:var(--fg)}
.up{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.up.in,.pv.is-edit .up{opacity:1;transform:none}

/* cover image */
.cover{position:relative;margin:calc(-76px - env(safe-area-inset-top,0px)) -22px 0;height:min(62vh,520px);overflow:hidden;flex:none}
.cover>img,.cover>.img-slot,.cover>.img-slot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 25%,transparent) 0%,transparent 35%,color-mix(in srgb,var(--bg) 75%,transparent) 82%,var(--bg) 100%)}
.cover+.head,.cover+.pg{margin-top:-96px;position:relative;z-index:1}
.head{display:flex;flex-direction:column;gap:10px}

/* rows */
.list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.row{position:relative;display:flex;align-items:center;gap:16px;width:100%;padding:20px 0;border-bottom:1px solid var(--line);text-align:left;min-width:0;transition:opacity .2s}
.row:active{opacity:.6}
.row-t{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.row-t .h3{overflow:hidden;text-overflow:ellipsis}
.row-t .sub{font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.row.big .h3{font-size:26px;font-weight:700;letter-spacing:-.035em}
.row .no{font-size:14px;font-weight:600;color:var(--fg3);min-width:28px;font-variant-numeric:tabular-nums}
.row .meta{font-size:14px;color:var(--fg3);font-variant-numeric:tabular-nums}
.row .go{width:9px;height:9px;border-right:1.5px solid var(--fg3);border-top:1.5px solid var(--fg3);transform:rotate(45deg);flex:none;margin-right:4px}
.row .pic{width:56px;height:56px;border-radius:14px;overflow:hidden;flex:none;background:var(--ph)}
.row .pic.tall{height:72px}
.row .pic img{width:100%;height:100%;object-fit:cover}
.row.off .h3{color:var(--fg3)}
.pill{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:var(--chip);font-size:12px;font-weight:600;color:var(--fg2);white-space:nowrap}

/* buttons, fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:56px;border-radius:999px;background:var(--btn);color:var(--btn-fg);font-size:16px;font-weight:600;transition:transform .15s}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--chip2);color:var(--fg)}
.field{display:flex;align-items:center;height:58px;padding:0 22px;border-radius:999px;background:var(--chip);transition:background .2s,box-shadow .2s}
.field:focus-within{background:var(--chip2);box-shadow:0 0 0 1px var(--line2)}
.field input,.field .fake{flex:1;min-width:0;border:0;background:none;outline:none;font-size:17px;font-weight:500;color:var(--fg);font-family:var(--font)}
.field input::placeholder,.field .fake{color:var(--fg3)}
.field.err{box-shadow:0 0 0 1px var(--danger);animation:shake .3s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* name */
.s-name{justify-content:flex-end;padding-top:calc(env(safe-area-inset-top,0px) + 40px)}
.s-name .cover{height:46vh;margin-bottom:-60px}
.nm-form{display:flex;flex-direction:column;gap:12px;margin-top:36px}
.again{display:flex;align-items:center;gap:14px;width:100%;margin-top:30px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left}
.again .row-t b{font-size:22px;font-weight:700;letter-spacing:-.03em}
.again .go{width:9px;height:9px;border-right:1.5px solid var(--fg3);border-top:1.5px solid var(--fg3);transform:rotate(45deg)}

/* sheets */
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:12;max-height:82%;overflow-y:auto;background:var(--glass);backdrop-filter:blur(40px) saturate(1.5);-webkit-backdrop-filter:blur(40px) saturate(1.5);border-radius:28px 28px 0 0;box-shadow:inset 0 1px 0 var(--line2);transform:translateY(105%);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.sheet.open{transform:none}
.sheet.lockmode{top:0;max-height:none;border-radius:0}
.sh-in{max-width:600px;margin:0 auto;padding:12px 22px calc(32px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px}
.sh-close{align-self:flex-end;height:32px;padding:0 14px;border-radius:999px;background:var(--chip2);font-size:13px;color:var(--fg2)}
.pic-wide{display:block;width:100%;border-radius:20px}
.lock{min-height:62vh;justify-content:center;align-items:center;text-align:center;gap:14px;padding-top:40px}
.lock .lock-img{width:96px;height:96px;border-radius:24px;overflow:hidden;filter:blur(1.5px) brightness(.85)}
.lock .lock-img img{width:100%;height:100%;object-fit:cover}
.lock .sub{max-width:320px}
.lock form{width:100%;display:flex;flex-direction:column;gap:12px;margin-top:18px}
.lock-msg{min-height:1.4em;font-size:14px;color:var(--danger)}

/* page layout: head / map / text / sub-pages; two columns on wide screens */
.pg{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "map" "text" "kids";row-gap:38px}
.pg>.a-head{grid-area:head}.pg>.a-map{grid-area:map;min-width:0}.pg>.a-text{grid-area:text;display:flex;flex-direction:column;gap:38px;min-width:0}.pg>.a-kids{grid-area:kids;min-width:0}
.pg>.a-text:empty{display:none}

/* map */
.mapv{position:relative;margin:0 -22px;overflow:hidden;background:var(--ph);touch-action:manipulation}
.mapc{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform,opacity}
.mapc>img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.mapv.blank::before{content:attr(data-empty);position:absolute;inset:0;display:grid;place-items:center;color:var(--fg3);font-size:14px}
.pin{position:absolute;z-index:1;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px 0 10px;border-radius:999px;background:var(--pin);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:inset 0 1px 0 var(--line2);font-size:13px;font-weight:600;white-space:nowrap;touch-action:none;color:var(--fg);transition:transform .2s}
.pin::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--fg);flex:none}
.pin.hub::after{content:'';width:6px;height:6px;border-right:1.5px solid var(--fg2);border-top:1.5px solid var(--fg2);transform:rotate(45deg);margin-left:2px}
.pin:active{transform:translate(-50%,-50%) scale(.95)}
.pin.on{background:var(--pin-on);color:var(--pin-on-fg)}
.pin.on::before{background:var(--pin-on-fg)}
.trail{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:var(--fg3)}
.trail button{color:var(--fg2);font-weight:500}
.trail .sep::before{content:'/';color:var(--dim)}
.quests{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.quest{border-bottom:1px solid var(--line)}
.quest-h{display:flex;align-items:center;gap:12px;width:100%;padding:16px 0;text-align:left}
.quest-h .h3{flex:1;min-width:0;font-size:17px}
.quest-h .go{width:8px;height:8px;border-right:1.5px solid var(--fg3);border-bottom:1.5px solid var(--fg3);transform:rotate(45deg);transition:transform .25s;flex:none;margin-right:4px}
.quest.open .quest-h .go{transform:rotate(225deg)}
.quest-b{padding:0 0 18px}

.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{position:relative;display:flex;flex-direction:column;gap:2px;padding:14px 12px 14px 0;background:var(--bg);min-width:0}
.fact:nth-child(2n){padding-left:14px}
.fact>:first-child{font-size:12px;color:var(--fg3)}
.fact>:nth-child(2){font-size:16px;font-weight:500;overflow-wrap:anywhere}
.fact .ed-x{position:absolute;top:8px;right:6px}
.miss{padding:24px 0;color:var(--fg2);font-size:15px;animation:shake .3s}
.seen{display:flex;flex-wrap:wrap;gap:8px}
.seen button{height:34px;padding:0 14px;border-radius:999px;background:var(--chip);font-size:13px;color:var(--fg2)}
.sect{position:relative;display:flex;flex-direction:column;gap:8px}
.sect .ed-x{position:absolute;top:0;right:0}
.say{position:relative;font-size:18px;font-weight:500;line-height:1.55;letter-spacing:-.02em;color:var(--fg);padding:2px 0}
.say::before{content:'“';color:var(--fg3);margin-right:2px}
.say::after{content:'”';color:var(--fg3);margin-left:2px}
.pv.is-edit .say::before,.pv.is-edit .say::after{content:none}
.says{display:flex;flex-direction:column;gap:14px}
.say-w{display:flex;align-items:center;gap:8px}
.say-w>.say{flex:1}

/* page transitions */
.pv.a-push .scr{animation:push .5s cubic-bezier(.2,.8,.2,1)}
@keyframes push{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
.pv.a-pop .scr{animation:popin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes popin{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
.pv.a-zoom .scr{animation:zin .65s cubic-bezier(.16,1,.3,1)}
@keyframes zin{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

/* wide screens (container width, so it also works inside the editor canvas) */
@container pv (min-width: 900px){
  .scr{max-width:1200px;padding-left:56px;padding-right:56px}
  .cover{margin-left:-56px;margin-right:-56px;height:min(58vh,560px)}
  .s-name{max-width:1200px}
  .s-name .head,.s-name .again,.s-name .nm-form{max-width:560px}
  .display{font-size:clamp(46px,5vw,64px)}
  .lit{font-size:clamp(28px,2.6vw,36px);max-width:900px}
  .list.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;border-top:0}
  .list.cols>.row{border-top:1px solid var(--line);border-bottom:0}
  .pg.two{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:64px;grid-template-areas:"head map" "text map" "text kids" ". kids";align-items:start}
  .pg.two.nomap{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"head kids" "text kids"}
  .pg.two>.a-map{position:sticky;top:76px}
  .mapv{margin:0;border-radius:22px}
  .sheet:not(.lockmode){left:50%;right:auto;bottom:24px;width:min(560px,90%);max-height:80%;border-radius:28px;transform:translate(-50%,110%)}
  .sheet.open:not(.lockmode){transform:translate(-50%,0)}
  .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fact:nth-child(2n){padding-left:0}.fact:not(:nth-child(3n+1)){padding-left:14px}
}

/* ───────── chapter effects ───────── */
/* hack: warning tapes crawling across the top and bottom */
.fx-tape{position:absolute;left:-5%;right:-5%;height:34px;z-index:9;display:flex;align-items:center;overflow:hidden;background:#ffd400;color:#111;font:800 14px/1 'Galmuri11',ui-monospace,monospace;letter-spacing:.18em;box-shadow:0 0 0 1px #111,0 6px 20px rgba(0,0,0,.45);pointer-events:none}
.fx-tape::before,.fx-tape::after{content:'';position:absolute;left:0;right:0;height:6px;background:repeating-linear-gradient(-45deg,#111 0 10px,#ffd400 10px 20px)}
.fx-tape::before{top:0}.fx-tape::after{bottom:0}
.fx-tape.t{top:calc(env(safe-area-inset-top,0px) + 58px);transform:rotate(-1.2deg)}
.fx-tape.b{bottom:18px;transform:rotate(1deg)}
.fx-tape span{display:inline-block;white-space:nowrap;padding-left:100%;animation:tape 14s linear infinite}
.fx-tape.b span{animation-direction:reverse;animation-duration:17s}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.pv.fx-hack .scr{padding-top:calc(env(safe-area-inset-top,0px) + 112px);padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
.pv.fx-hack .cover{margin-top:calc(-112px - env(safe-area-inset-top,0px))}
.pv.fx-hack .pv-fx{background:radial-gradient(ellipse at center,transparent 55%,rgba(255,30,30,.12))}
/* water: tint, drifting light, rising bubbles, wavering content */
/* water: deep teal sea behind the text, soft drifting glows, rising bubbles */
.pv-under{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.uw-sea{position:absolute;inset:0;background:linear-gradient(180deg,#07262e 0%,#052029 45%,#041a24 100%)}
.uw-glow{position:absolute;inset:-25%;filter:blur(18px);
  background:radial-gradient(ellipse 34% 14% at 28% 24%,rgba(70,150,165,.42),transparent 70%),radial-gradient(ellipse 30% 13% at 76% 56%,rgba(70,150,165,.34),transparent 70%),radial-gradient(ellipse 46% 12% at 42% 92%,rgba(60,130,165,.3),transparent 70%);
  animation:glow 13s ease-in-out infinite alternate}
.uw-glow.b{background:radial-gradient(ellipse 26% 10% at 62% 18%,rgba(90,170,180,.22),transparent 70%),radial-gradient(ellipse 30% 12% at 20% 70%,rgba(80,160,175,.2),transparent 70%);animation-duration:17s;animation-direction:alternate-reverse}
@keyframes glow{to{transform:translate(5%,4%) scale(1.08)}}
.fx-water{position:absolute;inset:0}
.fx-water i{position:absolute;bottom:-20px;width:8px;height:8px;border-radius:50%;border:1px solid rgba(180,225,232,.5);background:rgba(180,225,232,.05);animation:bubble linear infinite}
@keyframes bubble{0%{transform:translate(0,0);opacity:0}10%{opacity:1}100%{transform:translate(18px,-110vh);opacity:0}}
.pv.fx-water .scr{animation:sway 7s ease-in-out infinite}
@keyframes sway{0%,100%{transform:translate(0,0)}33%{transform:translate(1.5px,3px)}66%{transform:translate(-1.5px,-2px)}}
.pv.fx-water:not([data-mode="light"]){--fg:#d9eef0;--fg2:rgba(205,232,236,.6);--fg3:rgba(205,232,236,.36);--dim:rgba(205,232,236,.2);--txt:rgba(214,236,239,.84);--line:rgba(170,220,228,.1);--chip:rgba(170,220,228,.1);--chip2:rgba(170,220,228,.16);--ph:#08303a}
/* light mode: clear beach water with the same soft glows */
.pv[data-mode="light"] .uw-sea{background:linear-gradient(180deg,#dff5f2 0%,#b3e6e4 45%,#7ccfd9 100%)}
.pv[data-mode="light"] .uw-glow{background:radial-gradient(ellipse 34% 14% at 28% 24%,rgba(255,255,255,.75),transparent 70%),radial-gradient(ellipse 30% 13% at 76% 56%,rgba(255,255,255,.6),transparent 70%),radial-gradient(ellipse 46% 12% at 42% 92%,rgba(255,255,255,.5),transparent 70%)}
.pv[data-mode="light"] .uw-glow.b{background:radial-gradient(ellipse 26% 10% at 62% 18%,rgba(255,255,255,.45),transparent 70%),radial-gradient(ellipse 30% 12% at 20% 70%,rgba(255,255,255,.4),transparent 70%)}
.pv[data-mode="light"] .fx-water i{border-color:rgba(255,255,255,.9);background:rgba(255,255,255,.25)}
.pv.fx-water[data-mode="light"]{--line:rgba(0,70,90,.14);--chip:rgba(255,255,255,.4);--chip2:rgba(255,255,255,.55);--fg2:rgba(4,45,58,.68);--fg3:rgba(4,45,58,.45);--dim:rgba(4,45,58,.22);--fg:#04232e;--txt:rgba(4,35,46,.85);--ph:#b9ecec;--pin:rgba(255,255,255,.6)}
/* broken: flicker, a rolling bar, dead lines */
.pv.fx-broken .pv-body{animation:flicker 5.5s steps(1) infinite}
@keyframes flicker{0%,100%{opacity:1}12%{opacity:.82}13%{opacity:1}47%{opacity:.35}48%{opacity:1}49%{opacity:.6}50%{opacity:1}81%{opacity:0}82%{opacity:1}}
.fx-roll{position:absolute;left:0;right:0;height:22%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.06),transparent);animation:roll 6s linear infinite}
@keyframes roll{from{top:-25%}to{top:105%}}
.fx-dead{position:absolute;inset:0;background:linear-gradient(transparent 31%,rgba(255,255,255,.18) 31% 31.3%,transparent 31.3% 67%,rgba(0,0,0,.6) 67% 67.6%,transparent 67.6%),linear-gradient(90deg,transparent 78%,rgba(255,40,140,.25) 78% 78.3%,transparent 78.3%)}
/* glitch: slices and colour split, triggered from script */
.pv.glx .pv-body{animation:glx .22s steps(2) 1}
.pv.glx .display,.pv.glx .h2,.pv.glx .h3{text-shadow:-3px 0 rgba(255,40,80,.85),3px 0 rgba(40,220,255,.85)}
@keyframes glx{0%{transform:translate(-6px,1px);filter:hue-rotate(80deg) saturate(2)}33%{transform:translate(7px,-2px);clip-path:inset(12% 0 55% 0)}66%{transform:translate(-3px,0);clip-path:inset(60% 0 8% 0)}100%{transform:none}}
/* unstable signal: bursts of static with a shake */
.fx-static{position:absolute;inset:0;width:100%;height:100%;opacity:0;image-rendering:pixelated;mix-blend-mode:screen}
.pv.zz .fx-static{opacity:.42}
.pv.zz .pv-body{animation:zz .12s steps(2) 2}
@keyframes zz{0%{transform:translate(2px,-1px)}50%{transform:translate(-3px,1px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.pv *,.pv *::before,.pv *::after,.pv{animation:none!important;transition:none!important}.lit .w{color:var(--fg)}.up{opacity:1;transform:none}.pv.fx-water .scr{animation:none}}

/* ───────── edit mode inside the screen ───────── */
.pv.is-edit .ed{outline:1px dashed transparent;outline-offset:3px;border-radius:4px;cursor:text;min-width:1ch;transition:outline-color .15s}
.pv.is-edit .ed:hover{outline-color:rgba(109,149,255,.7)}
.pv.is-edit .ed:focus{outline:2px solid #7aa2ff;outline-offset:3px;background:rgba(109,149,255,.1)}
.pv.is-edit .ed:empty::before{content:attr(data-ph);opacity:.35;pointer-events:none;font-style:italic}
.pv.is-edit .ed-m{white-space:pre-wrap}
.pv.is-edit .selable{cursor:pointer;outline:2px solid transparent;outline-offset:2px}
.pv.is-edit .selable:hover{outline-color:rgba(109,149,255,.4)}
.pv.is-edit .selable.is-sel{outline-color:#7aa2ff}
.tbar{position:absolute;top:-15px;right:8px;z-index:12;display:none;gap:2px;padding:3px;border-radius:10px;background:#fff;color:#111;box-shadow:0 6px 18px rgba(0,0,0,.5);font-style:normal}
.is-sel>.tbar{display:flex}
.tbar button{height:26px;min-width:26px;padding:0 8px;border-radius:7px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:4px}
.tbar button:hover{background:#eef0f4}
.tbar button.armed{background:#d93a2b;color:#fff}
.tbar .ico{font-size:14px}
.ed-add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:14px;border-radius:20px;border:1.5px dashed rgba(109,149,255,.6);color:#8fb0ff;font-weight:700;font-size:13px;font-style:normal;background:rgba(109,149,255,.06)}
.ed-add:hover{background:rgba(109,149,255,.12)}
.ed-add.tall{flex-direction:column;min-height:120px}
.ed-hint{margin:10px 2px 0;font-size:12px;color:#8fb0ff;font-style:normal}
.ed-zone{margin-top:24px;padding:16px;border-radius:22px;border:1.5px dashed rgba(109,149,255,.5);display:flex;flex-direction:column;gap:12px}
.ed-zone-h{font-size:12px;font-weight:700;color:#8fb0ff;font-style:normal}
.lock-b{position:absolute;top:8px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;background:rgba(0,0,0,.72);border:1px solid var(--line2);color:#ffd43b;font-size:10.5px;font-weight:700;font-style:normal;pointer-events:none}
.ed-x{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--fg3);font-size:13px;background:rgba(255,255,255,.06);flex:none}
.ed-x:hover{background:rgba(255,93,108,.2);color:var(--danger)}
.img-slot{cursor:pointer;display:block;position:relative}
.img-slot.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;border-radius:20px;border:1.5px dashed rgba(109,149,255,.5);color:#8fb0ff;font-size:12px;font-weight:700;background:rgba(109,149,255,.05)}
.img-slot.empty .ico{font-size:24px}
.img-slot .img-x{position:absolute;top:10px;right:10px;z-index:3;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:14px}
.hero-bg>.img-slot{position:absolute;inset:0}.hero-bg>.img-slot>img{width:100%;height:100%;object-fit:cover}
.pv.is-edit .map-box{cursor:crosshair}
.pv.is-edit .pin{cursor:grab}
.pv.is-edit 
.cover>.img-slot.empty{border-radius:0;border:0;background:rgba(122,162,255,.05);justify-content:center}
.pv.is-edit .mapv{cursor:crosshair}
.pv.is-edit .pin{cursor:grab}
/* ───────── splash, gates ───────── */
.splash{height:100%;display:grid;place-items:center;background:#000}
.splash i{width:6px;height:6px;border-radius:50%;background:#888;animation:blink 1s ease-in-out infinite}
@keyframes blink{50%{opacity:.2}}
.gate{min-height:100%;display:grid;place-items:center;padding:24px 22px;background:#000;color:#fff;font-family:'Wanted Sans Variable','Wanted Sans',sans-serif}
.gate form,.gate .gate-box{width:min(400px,100%);display:flex;flex-direction:column;gap:12px}
.gate h1{margin:0 0 4px;font-size:32px;font-weight:700;letter-spacing:-.04em}
.gate p{margin:0 0 18px;color:rgba(255,255,255,.58);font-size:15px;line-height:1.55}
.gate .g-ico{display:none}
.gate input{height:58px;padding:0 22px;border-radius:999px;border:0;background:rgba(255,255,255,.08);color:#fff;font-size:16px;outline:none}
.gate input:focus{background:rgba(255,255,255,.12)}
.gate .go{height:56px;margin-top:6px;border-radius:999px;background:#fff;color:#000;font-weight:600;font-size:16px}
.gate .go:disabled{opacity:.5}
.gate-err{color:#ff7b86!important}

/* ───────── editor ───────── */
body.is-editor{font-family:var(--e-font);color:var(--e-fg)}
.ed-app{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--e-bg);color:var(--e-fg);font-family:var(--e-font);font-size:14px}
.ed-top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--e-panel);border-bottom:1px solid var(--e-line);min-width:0}
.ed-brand{display:flex;flex-direction:column;min-width:0;gap:1px}
.ed-brand b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ed-brand span{font-size:12px;color:var(--e-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grow{flex:1}
.seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--e-soft);gap:2px;flex:none}
.seg button{padding:6px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--e-dim);white-space:nowrap}
.seg button.on{background:var(--e-panel);color:var(--e-fg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.e-status{font-size:12px;color:var(--e-dim);white-space:nowrap}
.e-status.dirty{color:var(--e-warn)}
.ebtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--e-line);background:var(--e-panel);color:var(--e-fg);font-size:13px;font-weight:600;white-space:nowrap;flex:none}
.ebtn:hover{border-color:var(--e-dim)}
.ebtn:disabled{opacity:.45;cursor:default}
.ebtn.primary{background:var(--e-accent);border-color:var(--e-accent);color:var(--e-accent-fg)}
.ebtn.danger{color:var(--e-danger)}
.ebtn.armed{background:var(--e-danger);border-color:var(--e-danger);color:#fff}
.ebtn.sm{height:30px;padding:0 10px;font-size:12px}
.ebtn.icon{width:36px;padding:0;font-size:17px}
.ebtn.on{border-color:var(--e-accent);color:var(--e-accent);background:color-mix(in srgb,var(--e-accent) 10%,var(--e-panel))}
.ebtn .ico{font-size:16px}
.ed-body{display:grid;grid-template-columns:236px minmax(0,1fr) 330px;min-height:0}
.ed-tree{overflow:auto;padding:12px 10px 40px;border-right:1px solid var(--e-line);background:var(--e-panel);display:flex;flex-direction:column;gap:1px}
.tr-h{padding:14px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--e-dim)}
.tr-h:first-child{padding-top:4px}
.tr{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:8px;text-align:left;color:var(--e-fg);min-width:0}
.tr:hover{background:var(--e-soft)}
.tr.on{background:color-mix(in srgb,var(--e-accent) 14%,transparent);color:var(--e-accent);font-weight:700}
.tr .ico{font-size:16px;color:var(--e-dim)}
.tr.on .ico{color:var(--e-accent)}
.tr.sub{padding-left:30px}
.tr-no{font-family:var(--e-mono);font-size:11px;color:var(--e-dim);min-width:18px}
.tr-t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tr-b{font-size:10px;font-weight:600;padding:2px 6px;border-radius:999px;background:var(--e-soft);color:var(--e-dim)}
.tr-b.ok{background:color-mix(in srgb,var(--e-ok) 16%,transparent);color:var(--e-ok)}
.tr.add{color:var(--e-accent);margin-top:6px}
.tr.add .ico{color:var(--e-accent)}
.ed-stage{position:relative;min-width:0;min-height:0;display:grid;place-items:center;padding:20px;overflow:hidden;background:var(--e-bg) radial-gradient(color-mix(in srgb,var(--e-dim) 22%,transparent) 1px,transparent 1.2px) 0 0/18px 18px}
.ed-phone{width:390px;max-width:100%;height:min(844px,100%);border-radius:34px;overflow:hidden;box-shadow:0 0 0 1px var(--e-line),0 24px 60px -24px rgba(0,0,0,.5);background:var(--e-bg)}
.ed-props{overflow:auto;padding:14px 14px 60px;border-left:1px solid var(--e-line);background:var(--e-panel);display:flex;flex-direction:column;gap:14px}
.pp-tip{font-size:12px;line-height:1.6;color:var(--e-dim);padding:10px 12px;border-radius:10px;background:var(--e-soft)}
.pp-sec{display:flex;flex-direction:column;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--e-line)}
.pp-sec:last-child{border-bottom:0}
.pp-sec h3{margin:0;font-size:13px;font-weight:700}
.pp-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pp-f{display:flex;flex-direction:column;gap:6px}
.pp-f>span{font-size:12px;font-weight:600;color:var(--e-dim)}
.pp-hint{margin:0;font-size:12px;line-height:1.55;color:var(--e-dim)}
.e-inp,.e-sel{width:100%;min-width:0;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--e-line);background:var(--e-bg);color:var(--e-fg);font-size:13px}
.e-inp:focus,.e-sel:focus{outline:none;border-color:var(--e-accent)}
.e-num{width:76px}
.tog{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-size:13px}
.tog input{position:absolute;opacity:0;width:1px;height:1px}
.tog-ui{position:relative;width:38px;height:22px;border-radius:11px;background:var(--e-line);transition:background .2s;flex:none}
.tog-ui::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .2s}
.tog input:checked+.tog-ui{background:var(--e-ok)}
.tog input:checked+.tog-ui::after{transform:translateX(16px)}
.tog input:focus-visible+.tog-ui{outline:2px solid var(--e-accent);outline-offset:2px}
.release{padding:12px;border-radius:10px;border:1px solid var(--e-line)}
.release.on{border-color:var(--e-ok);background:color-mix(in srgb,var(--e-ok) 8%,transparent)}
.opts{display:flex;flex-direction:column;gap:6px}
.opt{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;border:1px solid var(--e-line);text-align:left}
.opt.on{border-color:var(--e-accent);background:color-mix(in srgb,var(--e-accent) 8%,transparent)}
.opt b{font-size:13px}
.opt small{font-size:11.5px;color:var(--e-dim);line-height:1.45}
.swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.swatches button{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1px var(--e-line)}
.swatches button.on{box-shadow:0 0 0 2px var(--e-panel),0 0 0 4px var(--e-accent)}
.swatches input[type=color]{width:34px;height:30px;padding:0;border:1px solid var(--e-line);border-radius:8px;background:none}
.icons{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.icons button{aspect-ratio:1;display:grid;place-items:center;border-radius:8px;border:1px solid var(--e-line);font-size:17px;color:var(--e-dim)}
.icons button.on{border-color:var(--e-accent);color:var(--e-accent);background:color-mix(in srgb,var(--e-accent) 10%,transparent)}
.thumb{display:flex;gap:10px;align-items:center}
.thumb img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--e-line)}
.thumb .none{width:64px;height:64px;border-radius:8px;border:1px dashed var(--e-line);display:grid;place-items:center;color:var(--e-dim);font-size:20px}
.picks{display:flex;flex-wrap:wrap;gap:6px}
.picks button{height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--e-line);font-size:12px;font-weight:600;color:var(--e-dim)}
.picks button.on{border-color:var(--e-accent);color:var(--e-accent);background:color-mix(in srgb,var(--e-accent) 10%,transparent)}
.note{padding:12px;border-radius:10px;border:1px solid var(--e-warn);font-size:12.5px;line-height:1.6;display:flex;flex-direction:column;gap:10px}
.banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;background:color-mix(in srgb,var(--e-warn) 14%,var(--e-panel));border-bottom:1px solid var(--e-line);font-size:13px}
.only-m{display:none!important}
.dlg{border:0;padding:0;border-radius:18px;width:min(520px,calc(100% - 32px));max-height:calc(100% - 48px);background:var(--e-panel);color:var(--e-fg);font-family:var(--e-font);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.dlg::backdrop{background:rgba(10,12,16,.5)}
.dlg-in{display:flex;flex-direction:column;gap:18px;padding:22px}
.dlg-h{display:flex;align-items:center;justify-content:space-between}
.dlg-h h2{margin:0;font-size:18px}
.links{display:flex;flex-direction:column;gap:8px}
.links a{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;background:var(--e-soft);color:var(--e-fg);text-decoration:none;font-size:13px}
.links a code{font-family:var(--e-mono);color:var(--e-accent);font-size:12px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100;display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100% - 32px));padding:12px 16px;border-radius:14px;background:#1c1c20;color:#fff;font:500 13px/1.5 'Pretendard Variable',Pretendard,sans-serif;box-shadow:0 12px 30px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);animation:enter .25s}
.toast.warn{background:#5a1a20}
.toast.gem{background:#17121f;border-color:rgba(183,156,255,.5);box-shadow:0 0 40px -10px #b79cff}
.toast button{flex:none;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.16);color:#fff;font-weight:700}
@media (max-width:1100px){.ed-body{grid-template-columns:210px minmax(0,1fr) 300px}}
@media (max-width:900px){
  .ed-body{grid-template-columns:minmax(0,1fr)}
  .ed-tree,.ed-props{position:fixed;z-index:50;top:0;bottom:0;width:min(340px,88%);box-shadow:0 0 60px rgba(0,0,0,.35);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .ed-tree{left:0;transform:translateX(-105%)}
  .ed-props{right:0;transform:translateX(105%)}
  .ed-app.show-tree .ed-tree,.ed-app.show-props .ed-props{transform:none}
  .ed-stage{padding:0}
  .ed-phone{width:100%;height:100%;border-radius:0;box-shadow:none}
  .only-m{display:inline-flex!important}
  .hide-m{display:none!important}
  .ed-top{gap:6px;padding:8px 10px;flex-wrap:wrap}
}
.scrim{position:fixed;inset:0;z-index:45;background:rgba(10,12,16,.4)}

body[data-mode="light"]{background:#f5f5f2}
.ed-phone{transition:width .3s}
.ed-phone.wide{width:100%;max-width:1440px;border-radius:14px}