/* 삐삐가 울린 날: 1998 PC통신·Y2K 창 UI. 1920×1080 무대를 화면에 맞춰 줄이는 방식 (Paperlogy 500 이상만 사용) */
@font-face{font-family:'Paperlogy';src:url(../fonts/Paperlogy-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Paperlogy';src:url(../fonts/Paperlogy-700.woff2) format('woff2');font-weight:600 700;font-display:swap}
@font-face{font-family:'Paperlogy';src:url(../fonts/Paperlogy-800.woff2) format('woff2');font-weight:800 900;font-display:swap}
:root{
  --ink:#26324f;--ink2:#4a5578;--mut:#7d86a6;--line:#c9d3ff;--blue:#6b8cff;--blue2:#4a64c8;--vio:#b48cff;--pink:#ff8fc2;--mint:#7fd6a6;--sun:#ffd86b;
  --paper:#fffefb;--card:#ffffff;--ok:#2f9a6a;--okl:#dff5ea;--no:#d4503f;--nol:#fde5e0;--z:1;
  --who:#ff8fb8;--what:#7aa2ff;--where:#7fd6a6;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#dfe9ff}
body{font-family:'Paperlogy','Pretendard','Malgun Gothic',sans-serif;font-weight:500;color:var(--ink);word-break:keep-all;overflow-wrap:break-word;line-break:strict;-webkit-font-smoothing:antialiased;user-select:none;-webkit-tap-highlight-color:transparent}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;touch-action:manipulation}
img{display:block;-webkit-user-drag:none}
[hidden]{display:none!important}
h1,h2,h3,h4,p{text-wrap:pretty}h1,h2,h3{text-wrap:balance;font-weight:800;line-height:1.25}
:focus-visible{outline:4px solid var(--vio);outline-offset:3px;border-radius:10px}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:#cfe6ff}
#rotate{position:fixed;inset:0;z-index:99;background:var(--ink);color:#fff;display:grid;place-items:center;text-align:center;font-size:22px;font-weight:700;line-height:1.7}

/* ───── 바탕화면 / 작업표시줄 ───── */
#desk{position:absolute;inset:0;background:#bcdcff url(../images/wallpaper.webp) center/cover}
#desk::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(180,140,255,.12));pointer-events:none}
#task{position:absolute;left:0;right:0;bottom:0;height:68px;z-index:40;display:flex;align-items:center;gap:14px;padding:0 14px;background:linear-gradient(180deg,#e9efff,#c5d2ff);border-top:3px solid #fff;box-shadow:0 -6px 18px -8px rgba(40,60,140,.5)}
.start{height:46px;padding:0 22px 0 14px;border-radius:12px;font-weight:800;font-size:22px;display:flex;align-items:center;gap:10px;color:#fff;background:linear-gradient(180deg,#8fd6a6,#3f9f6b);box-shadow:0 4px 0 #2a7a4d,inset 0 2px 0 rgba(255,255,255,.5)}
.start:active{transform:translateY(3px);box-shadow:0 1px 0 #2a7a4d}
.tkt{height:46px;padding:0 20px;border-radius:10px;background:#fff;border:2px solid var(--line);font-weight:700;font-size:19px;display:flex;align-items:center;gap:8px;box-shadow:inset 0 -3px 0 #e4e9ff}
.tkt.on{background:#eef2ff;box-shadow:inset 0 3px 6px rgba(70,90,180,.25)}
.sp{flex:1}
.tray{display:flex;align-items:center;gap:12px;padding:0 16px;height:46px;border-radius:10px;background:#eef2ff;box-shadow:inset 0 3px 6px rgba(70,90,180,.2);font-weight:700;font-size:19px;color:var(--ink2)}
.tray button{height:36px;padding:0 12px;border-radius:8px;font-weight:700;font-size:18px;background:#fff;border:1.5px solid var(--line)}
.tray button[aria-pressed=true]{background:var(--ink);color:#fff}
.tlogo{height:42px;width:auto;margin-left:4px}
.logoLink{display:block}

/* 바탕화면 아이콘 */
#icons{position:absolute;left:64px;top:56px;display:grid;grid-template-columns:repeat(3,250px);grid-template-rows:repeat(3,292px);gap:6px 16px;align-content:start}
.ic{width:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px 6px;border-radius:16px;text-align:center;position:relative;transition:transform .15s,background .2s}
.ic .tile{width:132px;height:132px;border-radius:32px;display:grid;place-items:center;background:linear-gradient(160deg,#fff,#e2e9ff);border:3px solid #fff;box-shadow:0 14px 20px -12px rgba(40,60,160,.7),inset 0 -6px 0 rgba(100,120,220,.25);color:var(--c,#6b8cff)}
.ic .tile svg{width:74px;height:74px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ic b{font-size:27px;font-weight:800;color:#fff;text-shadow:0 2px 0 rgba(38,50,79,.65),0 0 10px rgba(38,50,79,.55);line-height:1.25}
.ic small{font-size:20px;font-weight:700;color:#fff;background:rgba(38,50,79,.55);border-radius:99px;padding:2px 10px}
.ic:hover:not(.lock){transform:scale(1.07)}
.ic.lock{filter:grayscale(.9) brightness(.92);opacity:.78;cursor:not-allowed}
.ic.lock .tile{position:relative}
.ic.lock .tile::after{content:"";position:absolute;width:40px;height:40px;right:-10px;top:-10px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='6' y='11' width='12' height='9' rx='2'/%3E%3Cpath d='M9 11V8a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E") center/20px no-repeat}
.ic.done .tile{background:linear-gradient(160deg,#f3fff8,#c9f2dc)}
.ic.done::before{content:"✓";position:absolute;right:56px;top:26px;z-index:2;width:42px;height:42px;border-radius:50%;background:var(--ok);color:#fff;font-weight:800;font-size:22px;display:grid;place-items:center;border:3px solid #fff}
.ic.next .tile{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.deskhello{position:absolute;right:46px;top:44px;width:560px;z-index:3}

/* ───── 창(Window) ───── */
.win{z-index:20;position:absolute;left:70px;right:70px;top:24px;bottom:88px;border-radius:18px 18px 12px 12px;background:var(--card);border:3px solid #fff;box-shadow:0 40px 60px -26px rgba(40,50,130,.75),0 0 0 2px #8fa2ff;display:flex;flex-direction:column;overflow:hidden;animation:winin .32s cubic-bezier(.2,1.2,.4,1)}
@keyframes winin{from{opacity:0;transform:translateY(24px) scale(.97)}}
.win.full{left:0;right:0;top:0;bottom:68px;border-radius:0;border-width:0 0 3px;box-shadow:none}
.wt{height:50px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 18px;background:linear-gradient(90deg,#6b8cff,#a98cff 70%,#ff9bd0);color:#fff;font-weight:800;font-size:22px}
.wtl{display:flex;align-items:center;gap:12px;text-shadow:0 2px 0 rgba(38,50,129,.4)}
.wtl i{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.9);display:inline-grid;place-items:center;color:var(--blue2)}
.wtl i svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wbtn{display:flex;gap:8px}
.wbtn b{width:36px;height:30px;border-radius:7px;background:rgba(255,255,255,.88);color:var(--ink);display:grid;place-items:center;font-size:18px;font-weight:800;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.wbtn b.x{background:#ff8c8c;color:#fff;cursor:pointer}
.wb{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,#f7f9ff,#eef1ff)}
.wb.paper{background:#faf7f1}

/* ───── 공통 부품 ───── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:62px;padding:0 36px;border-radius:14px;font-size:24px;font-weight:800;color:#fff;background:linear-gradient(180deg,#8fa6ff,#6b8cff);box-shadow:0 6px 0 var(--blue2),0 16px 22px -12px rgba(60,80,200,.7),inset 0 2px 0 rgba(255,255,255,.45);transition:transform .1s,box-shadow .1s,filter .2s;position:relative;white-space:nowrap}
.btn:hover{filter:brightness(1.07)}.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--blue2),0 6px 10px -8px rgba(60,80,200,.6),inset 0 2px 0 rgba(255,255,255,.45)}
.btn[disabled]{background:#cfd5ea;box-shadow:0 6px 0 #aab2d0;color:#fff;cursor:not-allowed;filter:none}
.btn.line{background:#fff;color:var(--ink);box-shadow:0 0 0 2.5px var(--ink),0 6px 0 var(--ink)}
.btn.line:active{box-shadow:0 0 0 2.5px var(--ink),0 1px 0 var(--ink)}
.btn.pink{background:linear-gradient(180deg,#ffa8d2,#ff7db8);box-shadow:0 6px 0 #d4558f,0 16px 22px -12px rgba(220,80,150,.65),inset 0 2px 0 rgba(255,255,255,.45)}
.btn.green{background:linear-gradient(180deg,#7fd6a6,#3fa971);box-shadow:0 6px 0 #2a7a4d,0 16px 22px -12px rgba(40,140,90,.6),inset 0 2px 0 rgba(255,255,255,.45)}
.btn.sm{height:50px;font-size:20px;padding:0 24px;border-radius:12px}
.pill{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:99px;font-size:18px;font-weight:800;background:var(--ink);color:#fff;white-space:nowrap}
.pill.b{background:#e8edff;color:var(--blue2)}.pill.g{background:var(--okl);color:var(--ok)}.pill.p{background:#ffe3f1;color:#c23d86}
.card{background:#fff;border:2px solid var(--line);border-radius:18px;box-shadow:0 12px 20px -14px rgba(60,80,200,.5)}
.lbl{font-size:18px;font-weight:800;color:var(--blue2);letter-spacing:.03em}
#toast{position:absolute;left:50%;bottom:96px;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:14px 28px;border-radius:99px;opacity:0;pointer-events:none;transition:.3s;z-index:90;font-size:21px;font-weight:700}
#toast.on{opacity:1;transform:translate(-50%,0)}
#modal{position:absolute;inset:0;z-index:70;background:rgba(38,50,79,.45);display:grid;place-items:center;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.pop{width:min(900px,92%);max-height:92%;display:flex;flex-direction:column;border-radius:18px;background:#fff;border:3px solid #fff;box-shadow:0 40px 60px -20px rgba(20,30,100,.8),0 0 0 2px #8fa2ff;overflow:hidden;animation:pop .35s cubic-bezier(.2,1.3,.4,1)}
@keyframes pop{0%{transform:scale(.88);opacity:0}100%{transform:scale(1);opacity:1}}
.pop .pb{padding:32px 40px;overflow:auto;font-size:25px;line-height:1.7}
.pop .pb h2{font-size:34px;margin-bottom:12px}
.pop .pf{padding:0 40px 30px;display:flex;gap:14px;justify-content:center}
.pop.ok .wt{background:linear-gradient(90deg,#3fa971,#7fd6a6)}.pop.no .wt{background:linear-gradient(90deg,#e0705a,#ff9b8c)}
.dim{color:var(--mut)}
@keyframes up{from{opacity:0;transform:translateY(18px)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.shake{animation:shake .4s}

/* ───── 접속 화면(표지) ───── */
#cover{position:absolute;inset:0;background:#8fb8ff url(../images/cover.webp) center/cover no-repeat;overflow:hidden}
#cover::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(207,230,255,.78) 0,rgba(207,230,255,0) 52%)}
.cvwin{position:absolute;left:84px;top:96px;width:900px;border-radius:18px;background:rgba(255,255,255,.88);border:3px solid #fff;box-shadow:0 40px 60px -26px rgba(40,50,130,.7),0 0 0 2px #8fa2ff;overflow:hidden;backdrop-filter:blur(6px)}
.cvwin .wb{background:transparent;padding:38px 44px 40px}
.sys{font-weight:800;font-size:21px;color:var(--blue2);letter-spacing:.06em}
.ttl{font-size:118px;line-height:1.02;font-weight:900;letter-spacing:-.03em;margin:12px 0 10px;color:#4f73ff;text-shadow:0 4px 0 #fff,0 8px 0 #26324f,0 14px 18px rgba(40,60,160,.45)}
.ttl span{display:inline-block}.ttl span:nth-child(2){color:#ff6fb0}.ttl span:nth-child(3){color:#f2a100}
.sub{font-size:27px;line-height:1.6;color:var(--ink2);font-weight:700}
.lcd{display:inline-flex;gap:10px;align-items:center;font-weight:800;font-size:26px;padding:8px 16px;background:#9db89a;color:#1b2a1b;border:3px solid var(--ink);border-radius:6px}
.cvbtns{display:flex;gap:16px;margin-top:30px;flex-wrap:wrap}
.dial{margin-top:22px}
.dial .bar{height:30px;border-radius:99px;background:#e8edff;border:3px solid var(--ink);overflow:hidden}
.dial .bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(45deg,#6b8cff 0 18px,#8fa6ff 18px 36px);transition:width .35s linear}
.dial .log{margin-top:14px;font-size:24px;line-height:1.6;color:var(--ink2);min-height:104px;font-weight:700}
.field{display:block;width:100%;height:68px;border-radius:12px;border:3px solid var(--blue);background:#fff;padding:0 20px;font-size:28px;font-weight:700;outline:none;margin-top:12px;user-select:text}
.field:focus{box-shadow:0 0 0 5px rgba(107,140,255,.3)}

.opts{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.opt{width:100%;text-align:left;padding:16px 22px;border-radius:14px;background:#fff;border:3px solid var(--line);font-size:24px;font-weight:700;line-height:1.45;display:flex;gap:14px;align-items:flex-start;box-shadow:0 5px 0 #e2e8ff;transition:transform .1s,border-color .15s,background .15s}
.opt:hover:not([disabled]){border-color:var(--blue);transform:translateY(-2px)}
.opt .n{flex:none;width:36px;height:36px;border-radius:50%;background:#e8edff;color:var(--blue2);display:grid;place-items:center;font-size:20px;font-weight:800;margin-top:1px}
.opt.sel{border-color:var(--blue);background:#eef2ff}
.opt.right{border-color:#4cb584;background:var(--okl);box-shadow:0 5px 0 #b8e5cd}.opt.right .n{background:var(--ok);color:#fff}
.opt.wrong{border-color:#ea8575;background:var(--nol);box-shadow:0 5px 0 #f5cbc3}.opt.wrong .n{background:var(--no);color:#fff}


/* ═════ 이야기 속으로, 감상 탐험대: 시안 1 (탐험대 본부 컴퓨터) 전용 스타일 ═════ */
html,body{background:#cfe6ff}
#stage{background:#bcdcff}

/* ───── 바탕화면: 오로라 빛 + 구름 흐름 (효과 23) ───── */
#desk{background:#bcdcff url(../images/wallpaper.webp) center/cover}
#desk::before{content:"";position:absolute;inset:-10%;pointer-events:none;z-index:0;background:radial-gradient(40% 36% at 18% 28%,rgba(180,140,255,.38),transparent 70%),radial-gradient(38% 34% at 82% 20%,rgba(255,143,194,.30),transparent 70%),radial-gradient(44% 40% at 62% 80%,rgba(127,214,166,.30),transparent 70%);filter:blur(30px);animation:aurora 16s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate(-3%,-2%) scale(1)}100%{transform:translate(4%,3%) scale(1.12)}}
#icons,#hello,#layer,.deskdoor{position:absolute;z-index:2}
#layer{inset:0;z-index:20}

/* 작업표시줄: 열쇠 칸 */
.tray .keyrow{display:flex;gap:8px;align-items:center;padding-right:4px}
.tray .kslot{width:38px;height:38px;position:relative;display:grid;place-items:center}
.tray .kslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.tray .kslot .k{opacity:0;transform:scale(.2) rotate(-60deg);transition:all .5s cubic-bezier(.2,1.4,.4,1)}
.tray .kslot.on .k{opacity:1;transform:none}
.tray .kslot.on .s{opacity:.25}
.tray .klbl{font-size:18px;font-weight:800;color:var(--ink2)}

/* 바탕화면 아이콘 (효과 34: 3D 카드 기울기) */
#icons{left:70px;top:50px;display:grid;grid-template-columns:repeat(3,270px);grid-template-rows:repeat(2,330px);gap:10px 26px;perspective:900px}
.ic{width:270px;padding:10px 6px}
.ic .tile{width:170px;height:170px;border-radius:40px;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(226,233,255,.85));border:3px solid #fff;box-shadow:0 16px 24px -12px rgba(40,60,160,.7),inset 0 -6px 0 rgba(100,120,220,.2);transition:transform .12s ease-out;transform-style:preserve-3d}
.ic .tile img{width:132px;height:132px;object-fit:contain;filter:drop-shadow(0 6px 4px rgba(40,50,110,.3));transform:translateZ(30px)}
.ic b{font-size:29px;line-height:1.25;text-align:center;margin-top:2px}
.ic small{font-size:21px}
.ic:hover:not(.lock){transform:none}
.ic.lock .tile::after{display:none}
.ic.lock .tile{position:relative}
.ic.lock .tile img{filter:grayscale(1) brightness(.85);opacity:.6}
.ic .lk{display:none}
.ic.lock .lk{display:grid;position:absolute;right:-6px;top:-6px;width:46px;height:46px;border-radius:50%;background:var(--ink);place-items:center;z-index:2}
.ic .lk svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round}
.ic.done::before{content:"";right:34px;top:20px;width:48px;height:48px;border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/28px no-repeat;border:3px solid #fff;display:block;position:absolute;z-index:3}
.ic.next .tile{animation:bob 1.6s ease-in-out infinite}
.deskdoor{right:70px;bottom:104px;width:330px;text-align:center}
.deskdoor img{width:100%;height:auto;filter:drop-shadow(0 18px 14px rgba(30,40,100,.45))}
.deskdoor.open img{animation:glow 2s ease-in-out infinite alternate}
@keyframes glow{from{filter:drop-shadow(0 0 10px rgba(255,220,120,.6))}to{filter:drop-shadow(0 0 34px rgba(255,220,120,1))}}

/* 글래스모피즘 창 (효과 21) */
.win,.cvwin{background:rgba(255,255,255,.62);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)}
.win .wb{background:linear-gradient(180deg,rgba(247,249,255,.7),rgba(238,241,255,.78))}
.win.full{background:rgba(247,249,255,.88)}
.deskhello{width:640px;left:auto!important;right:70px;top:46px;bottom:auto!important;height:auto}
.hellobody{display:flex;gap:16px;align-items:center;padding:16px 22px!important}
.hellobody img{flex:none;width:150px;height:auto;filter:drop-shadow(0 8px 6px rgba(40,50,110,.3))}
.hellobody .tx{font-size:26px;font-weight:800;line-height:1.5}
.hellobody .tx .dim{font-size:21px;font-weight:700}

/* ───── 표지 ───── */
#cover{background:#bcdcff url(../images/cover.webp) center/cover no-repeat}
#cover::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(207,230,255,.7) 0,rgba(207,230,255,0) 54%)}
.cvwin{left:76px;top:88px;width:920px;z-index:2}
.cvwin .wb{padding:26px 44px 38px;align-items:center;background:transparent}
.titleimg{width:740px;height:auto;margin:0 auto;filter:drop-shadow(0 10px 8px rgba(40,50,130,.35));animation:tpop .9s cubic-bezier(.2,1.4,.4,1)}
@keyframes tpop{from{opacity:0;transform:scale(.7) translateY(30px)}}
.sub{margin-top:10px;font-size:27px;font-weight:700;text-align:center;color:var(--ink2);min-height:44px}
.cvbtns{justify-content:center}
.coverCat{position:absolute;right:70px;bottom:50px;width:380px;z-index:3;filter:drop-shadow(0 16px 12px rgba(30,40,100,.35))}
.coverCat img{width:100%;height:auto}
.caret::after{content:"";display:inline-block;width:3px;height:1em;margin-left:3px;background:currentColor;vertical-align:-.12em;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.logoTop{position:absolute;right:46px;top:34px;z-index:3}

/* ───── 활동 공통: 왼쪽 안내(달무리), 오른쪽 활동 ───── */
.act2{flex:1;min-height:0;display:grid;grid-template-columns:440px 1fr;gap:22px;padding:20px 24px 22px}
.gside{display:flex;flex-direction:column;gap:14px;min-height:0}
.gcat{flex:1;min-height:0;display:grid;place-items:end center;position:relative;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(226,233,255,.7));border:3px solid #fff;box-shadow:0 14px 22px -14px rgba(60,80,200,.55);overflow:hidden}
.gcat img{height:92%;width:auto;max-width:90%;object-fit:contain;margin-bottom:6px;transform-origin:50% 100%}
.gcat .tag{position:absolute;left:16px;top:14px}
.sq{animation:squash .7s ease-out}
@keyframes squash{0%{transform:scale(1,1)}25%{transform:scale(1.12,.86)}55%{transform:scale(.92,1.12) translateY(-22px)}80%{transform:scale(1.04,.96)}100%{transform:none}}
.gsay{flex:none;min-height:176px;padding:20px 24px;border-radius:20px;background:#fff;border:3px solid var(--line);font-size:25px;font-weight:700;line-height:1.55;color:var(--ink2);box-shadow:0 12px 20px -14px rgba(60,80,200,.5);position:relative}
.gsay.good{background:var(--okl);border-color:#9fdcbc;color:#1f6f4a}.gsay.bad{background:var(--nol);border-color:#f3b4a9;color:#a3382a}
.gsay b{color:var(--blue2)}.gsay.good b{color:#17633f}.gsay.bad b{color:#a3382a}
.gmain{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0}
.stepbar{flex:none;display:flex;align-items:center;gap:10px}
.stepbar .sp1{padding:6px 16px;border-radius:99px;background:rgba(255,255,255,.8);border:2px solid var(--line);font-size:20px;font-weight:800;color:var(--mut)}
.stepbar .sp1.on{background:var(--blue);border-color:var(--blue);color:#fff}
.stepbar .sp1.dn{background:var(--okl);border-color:#9fdcbc;color:var(--ok)}
.stepbar .cnt2{margin-left:auto;font-size:22px;font-weight:800;color:var(--ink2)}
.gbody{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;position:relative}
.gfoot{flex:none;display:flex;justify-content:flex-end;gap:14px;min-height:62px}

/* 화면 전환 와이프 (효과 37) */
#wipe{position:absolute;inset:0;z-index:60;pointer-events:none;background:linear-gradient(100deg,#8fa6ff,#b48cff 55%,#ff9bd0);transform:translateX(-101%)}
#wipe.go{animation:wipe .62s cubic-bezier(.7,0,.3,1)}
@keyframes wipe{0%{transform:translateX(-101%)}45%,55%{transform:translateX(0)}100%{transform:translateX(101%)}}
#fx{position:absolute;inset:0;z-index:80;pointer-events:none}

/* 물결 (효과 32) */
.btn,.opt,.bk,.ic{overflow:hidden}
.ic{overflow:visible}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);pointer-events:none;animation:rip .6s ease-out forwards}
@keyframes rip{to{transform:scale(4);opacity:0}}

/* ───── 책 읽기 (펼침면) ───── */
.reader{position:absolute;inset:0;display:flex;flex-direction:column;background:#faf7f1}
.rtop{flex:none;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;color:#6a6256;font-weight:700;font-size:21px;border-bottom:1.5px solid #eadfcb}
.rtop b{font-size:24px;color:#4a3a1e;font-weight:800}
.spread{flex:1;min-height:0;background:#fffefb;display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden}
.spread::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(120,90,40,0),rgba(120,90,40,.16),rgba(120,90,40,0))}
.lpg{padding:26px 26px 26px 30px;display:flex;align-items:center;justify-content:center;background:#f4eddc}
.lpg .ph{width:100%;height:100%;border-radius:12px;overflow:hidden;box-shadow:0 12px 20px -12px rgba(60,40,10,.5);border:6px solid #fffefb;background:#fff}
.lpg img{width:100%;height:100%;object-fit:cover;object-position:center;animation:kb 9s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.07)}}
.rpg{padding:34px 54px 22px;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.rpg .pn{font-size:19px;font-weight:800;color:#a08a5a;letter-spacing:.14em}
.rpg h2{font-size:40px;color:#4a3a1e;margin:6px 0 16px}
.rpg .tx{font-size:34px;line-height:1.95;color:#2c2417;font-weight:500}
.rpg .tx p{margin:0 0 .5em}
.rpg .tx q{quotes:none}
.rbot{flex:none;height:92px;display:flex;align-items:center;gap:22px;padding:0 40px;background:#faf7f1;border-top:1.5px solid #eadfcb}
.rbot .btn{background:#fffefb;color:#7a5a2a;box-shadow:0 0 0 2px #cdb98f,0 5px 0 #cdb98f;height:56px;font-size:22px;padding:0 28px}
.rbot .btn.go{background:#7a5a2a;color:#fff;box-shadow:0 5px 0 #4a3a1e}
.rbot .btn[disabled]{opacity:.4}
.rprog{flex:1;height:8px;border-radius:9px;background:#eadfcb;overflow:hidden}.rprog i{display:block;height:100%;background:#7a5a2a;border-radius:9px;transition:width .3s}
/* 극본 형식 */
.pl{display:flex;flex-direction:column;gap:12px}
.pl .hd{font-size:23px;font-weight:700;color:#6a6256;line-height:1.6;padding:10px 16px;border-radius:10px;background:#f1efe9;border-left:6px solid #a8a391}
.pl .hd i{font-style:normal;font-weight:800;color:#6a6256;margin-right:8px}
.pl .dl{font-size:29px;line-height:1.7;color:#2c2417;font-weight:600}
.pl .dl .who{display:inline-block;min-width:96px;font-weight:800;color:#c23d86;margin-right:6px}
.pl .dl .dr{color:#3c5fd0;font-weight:700;margin-right:4px}
.pl .info{font-size:22px;color:#6a6256;font-weight:700;line-height:1.6;padding:10px 16px;border-radius:12px;background:#fff7d6;border:2px solid #f0d36a}

/* ───── 분류 활동 ───── */
.cz{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
.curcard{flex:none;min-height:140px;display:grid;place-items:center;padding:16px 34px;border-radius:22px;background:#fff;border:3px solid var(--blue);font-size:38px;font-weight:800;line-height:1.4;text-align:center;box-shadow:0 0 0 6px rgba(107,140,255,.2),0 16px 26px -16px rgba(60,80,200,.6);touch-action:none;cursor:grab;position:relative;z-index:6;animation:cin .35s cubic-bezier(.2,1.3,.4,1)}
@keyframes cin{from{opacity:0;transform:translateY(-22px) scale(.95)}}
.curcard.drag{cursor:grabbing;transition:none;box-shadow:0 30px 40px -18px rgba(40,50,130,.6)}
.chint{flex:none;font-size:23px;font-weight:700;color:var(--ink2);text-align:center}
.buckets{flex:1;min-height:0;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.bk{display:flex;flex-direction:column;min-height:0;border-radius:18px;background:#fff;border:3px solid var(--bc);box-shadow:0 12px 18px -14px rgba(60,80,200,.55);text-align:left;transition:transform .15s,background .15s;position:relative}
.bk header{padding:12px 16px;background:var(--bc);color:#fff;font-weight:800;font-size:29px;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.bk header small{display:block;font-size:19px;font-weight:700;opacity:.95;margin-top:2px}
.bk .in{flex:1;min-height:0;overflow:hidden;padding:10px;display:flex;flex-direction:column;gap:8px}
.bk.hot{background:#f1f5ff;transform:scale(1.02)}
.bk .key{position:absolute;right:12px;top:12px;font-size:19px;font-weight:800;color:#fff;background:rgba(0,0,0,.18);border-radius:8px;padding:0 9px}
.fc{padding:10px 14px;border-radius:12px;background:var(--okl);border:3px solid #8fd9b0;font-size:21px;font-weight:700;line-height:1.35;animation:cin .3s}

/* ───── 선택지·말풍선 ───── */
.qbox{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;padding:6px 4px}
.qbox h2{font-size:35px;line-height:1.45}
.qbox .opts{flex:1;min-height:0;margin:0;gap:14px;display:flex;flex-direction:column}
.qbox .opt{flex:1;min-height:0;align-items:center;font-size:29px;padding:0 26px;border-radius:18px}
.qbox .opt .n{width:46px;height:46px;font-size:25px;margin-top:0}
.evpick{flex:1;min-height:0;display:grid;grid-template-columns:1.1fr 1fr;gap:20px}
.evpick .col2{display:flex;flex-direction:column;gap:10px;min-height:0}
.ev2{padding:14px 18px;border-radius:14px;background:#fff;border:3px solid var(--line);font-size:25px;font-weight:700;line-height:1.4;text-align:left;box-shadow:0 5px 0 #e2e8ff;transition:transform .1s;display:block;width:100%}
.ev2:hover:not([disabled]){transform:translateY(-2px);border-color:var(--blue)}
.ev2[disabled]{opacity:.3;cursor:default}
.slot2{display:flex;gap:12px;min-height:84px}
.slot2 .no{flex:none;width:56px;border-radius:14px;background:var(--blue);color:#fff;font-size:30px;font-weight:900;display:grid;place-items:center;box-shadow:0 4px 0 var(--blue2)}
.slot2 .bx{flex:1;border-radius:14px;border:3px solid var(--line);background:rgba(255,255,255,.7);display:flex;align-items:center;padding:6px 16px;color:var(--mut);font-size:22px;font-weight:700}
.slot2 .bx.f{border-color:#8fd9b0;background:var(--okl);color:var(--ink);font-size:23px;line-height:1.35}
.slot2 .bx.f.bad{border-color:#ea8575;background:var(--nol)}
.bub3{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-content:stretch}
.bub{padding:20px 24px;border-radius:24px;background:#fff;border:3px solid var(--line);font-size:28px;font-weight:700;line-height:1.5;text-align:left;position:relative;box-shadow:0 8px 0 #e2e8ff;display:flex;flex-direction:column;gap:10px;justify-content:center}
.bub:hover:not(.lockd){transform:translateY(-2px)}
.bub.pick{border-color:var(--blue);background:#eef2ff}
.bub.bad{border-color:#ea8575;background:var(--nol)}
.bub.fixed{border-color:#8fd9b0;background:var(--okl)}
.bub .fx2{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.bub .fx2 .opt{font-size:23px;padding:10px 14px;min-height:0;flex:none}

/* ───── 극본 바꿔 쓰기 ───── */
.cv{flex:1;min-height:0;display:grid;grid-template-columns:560px 1fr;gap:18px}
.cvl{display:flex;flex-direction:column;gap:12px;min-height:0}
.cvl .pic{flex:none;height:250px;border-radius:16px;overflow:hidden;border:3px solid #fff;box-shadow:0 12px 20px -12px rgba(60,80,200,.5)}
.cvl .pic img{width:100%;height:100%;object-fit:cover}
.cvl .src{flex:1;min-height:0;overflow:hidden;padding:16px 20px;font-size:25px;line-height:1.7;font-weight:600;background:#fff;border-radius:16px;border:3px solid var(--line)}
.cvl .src q{quotes:none;color:#7a3f1a;font-weight:700}
.cvr{display:flex;flex-direction:column;gap:10px;min-height:0}
.tip3{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tip3 div{padding:8px 12px;border-radius:12px;background:#fff7d6;border:2px solid #f0d36a;font-size:19px;line-height:1.4;font-weight:700}
.tip3 b{display:block;font-size:21px;color:#9a6a00}
.form{flex:1;min-height:0;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.frow{display:flex;gap:8px;align-items:stretch}
.frow .tg{flex:none;width:108px;border-radius:12px;font-size:20px;font-weight:800;color:#fff;display:grid;place-items:center;text-align:center;line-height:1.3;padding:4px}
.ti{flex:1;min-width:0;font-size:23px;line-height:1.45;border-radius:12px;border:3px solid var(--blue);padding:8px 14px;background:#fff;outline:none;user-select:text;font-weight:600}
.ti:focus{box-shadow:0 0 0 5px rgba(107,140,255,.3)}
.ti.s{flex:none;width:250px}
textarea.ti{resize:none;height:80px}
.rolebtn{flex:none;width:108px;display:flex;flex-direction:column;gap:4px}
.rolebtn button{flex:1;border-radius:10px;border:2.5px solid var(--line);background:#fff;font-size:20px;font-weight:800;color:var(--ink2)}
.rolebtn button.on{background:#ff8fb8;border-color:#ff8fb8;color:#fff}
.rolebtn button.on.r2{background:#7aa2ff;border-color:#7aa2ff}
.mlines{display:flex;flex-direction:column;gap:8px}
.preview{padding:12px 16px;border-radius:14px;background:#fff;border:3px dashed var(--line)}

/* ───── 마지막 문 ───── */
.askbox{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stb{padding:12px 10px;border-radius:14px;background:#fff;border:3px solid var(--line);font-size:22px;font-weight:800;line-height:1.35;text-align:center;box-shadow:0 5px 0 #e2e8ff}
.stb.on{border-color:var(--blue);background:#eef2ff}
.kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kb{padding:12px;border-radius:14px;background:#fff;border:3px solid var(--line);font-size:23px;font-weight:800;box-shadow:0 5px 0 #e2e8ff}
.kb.on{color:#fff;border-color:transparent}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chp{padding:8px 14px;border-radius:99px;background:#fff;border:2.5px solid var(--line);font-size:20px;font-weight:700;color:var(--ink2)}
.chp.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.scgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.sc{position:relative;border-radius:12px;overflow:hidden;border:4px solid #fff;box-shadow:0 8px 14px -10px rgba(60,80,200,.6);aspect-ratio:16/10;background:#fff}
.sc img{width:100%;height:100%;object-fit:cover;display:block}
.sc span{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;font-size:16px;font-weight:800;color:#fff;background:rgba(38,50,79,.72);text-align:center;line-height:1.25}
.sc.on{border-color:var(--blue);box-shadow:0 0 0 4px rgba(107,140,255,.45)}
.lbl2{font-size:21px;font-weight:800;color:var(--blue2);margin:2px 0 4px}
.doorstage{flex:1;min-height:0;display:grid;place-items:center;position:relative;overflow:hidden;border-radius:20px;background:radial-gradient(60% 70% at 50% 60%,#fff6d8,#d9e3ff)}
.doorstage img.door{height:92%;width:auto;position:relative;z-index:2}
.doorstage .kk{position:absolute;z-index:3;width:90px;height:90px;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.35))}

/* 증서 */
.how li{margin:0 0 12px 24px;font-size:24px;line-height:1.6}
.note3{font-size:21px;color:var(--mut);font-weight:700}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 열쇠 뒤집기 (효과 35) */
.flip{width:300px;height:300px;margin:0 auto;perspective:900px}
.flip .in{position:relative;width:100%;height:100%;transition:transform 1s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}
.flip.on .in{transform:rotateY(180deg)}
.flip .face{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip .face img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 12px 10px rgba(40,50,110,.4))}
.flip .frontf{transform:rotateY(180deg)}
.flip .back{border-radius:50%}
.evpick .col2{justify-content:stretch}.evpick .col2 .ev2,.evpick .col2 .slot2{flex:1;min-height:0;display:flex;align-items:center}
.evpick .col2 .ev2{font-size:27px}
.cv{grid-template-columns:minmax(360px,32%) 1fr}
textarea.ti#hd{height:98px}
.win.full{background:#f3f5ff;backdrop-filter:none;-webkit-backdrop-filter:none}
.win.full .wb{background:linear-gradient(180deg,#f7f9ff,#eef1ff)}
.win.full .wb.paper{background:#faf7f1}

/* 모든 글자는 페이퍼로지 */
html,body,button,input,textarea,select,option,.field,.ti,.ta,.lcd,.log,#printsheet{font-family:'Paperlogy','Malgun Gothic',sans-serif!important}
/* 이야기의 시작 */
#pro{position:absolute;inset:0;background:#0d1230;overflow:hidden}
#pro .pimgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
#pro .pimgs img.on{opacity:1;animation:kb2 14s ease-out forwards}
@keyframes kb2{from{transform:scale(1.02)}to{transform:scale(1.12)}}
#pro .pvig{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,44,.25) 0,rgba(10,14,44,0) 30%,rgba(10,14,44,.55) 100%);pointer-events:none}
#pro .pskip{position:absolute;right:46px;top:34px;z-index:4}
.pcap{position:absolute!important;left:150px!important;right:150px!important;bottom:44px!important;top:auto!important;z-index:3;background:rgba(255,255,255,.8)!important;backdrop-filter:blur(14px);animation:none}
.pcap .ptx{padding:18px 40px 4px;font-size:34px;line-height:1.6;font-weight:600;color:var(--ink);min-height:0}
.pcap .ptx b{color:var(--blue2);font-weight:800}
.pcap .pbtns{display:flex;justify-content:flex-end;gap:14px;padding:4px 28px 16px}
.pcap .pdots{display:flex;gap:8px;align-items:center;padding-right:6px}
.pcap .pdots i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.45)}
.pcap .pdots i.on{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.4)}.pcap .pdots i.dn{background:#cfe0ff}

/* ═════ 선택 막힘 해결 + 가독성·디자인 보완 ═════ */
/* 활동 창을 담는 빈 층이 바탕화면 전체를 덮어 아이콘 클릭을 막던 문제 */
#layer{pointer-events:none}
#layer>*{pointer-events:auto}
:root{--mut:#55618a;--ink2:#34416a;--line:#b9c6f5}
.dim{color:#4f5b85}
:focus-visible{outline:5px solid #ffb02e;outline-offset:3px}
/* 바탕화면 아이콘: 이름표를 흰 판 위에 올려 어떤 배경에서도 또렷하게 */
.ic b{display:block;max-width:268px;padding:5px 16px;border-radius:14px;background:rgba(255,255,255,.95);color:var(--ink);text-shadow:none;font-size:29px;box-shadow:0 5px 0 rgba(70,90,180,.28)}
.ic small{background:rgba(38,50,79,.88);color:#fff;font-size:22px;padding:3px 14px}
.ic.lock{filter:none;opacity:1;cursor:not-allowed}
.ic.lock b{color:#5a6486;background:rgba(255,255,255,.88)}
.ic.lock small{background:rgba(70,80,110,.78)}
.ic.lock .tile{background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(222,228,246,.8))}
.ic.lock .tile img{filter:grayscale(.85) brightness(.98);opacity:.72}
.ic.next b{background:#fff6c9;box-shadow:0 5px 0 #e0b400}
.ic.next .tile{box-shadow:0 0 0 6px rgba(255,200,60,.85),0 16px 24px -12px rgba(40,60,160,.7)}
.hellobody .tx{font-size:30px}.hellobody .tx .dim{font-size:23px}
/* 글자 키우기 */
.btn{height:66px;font-size:26px}.btn.sm{height:54px;font-size:22px}
.gsay{font-size:27px;min-height:190px;line-height:1.6}
.stepbar .sp1{font-size:22px;padding:8px 18px;color:#46527a;border-color:#b8c4f0}
.stepbar .sp1.on{color:#fff}.stepbar .sp1.dn{color:#17633f}
.stepbar .cnt2{font-size:26px}
.curcard{font-size:42px}.chint{font-size:25px}
.bk header{font-size:31px}.bk header small{font-size:21px}.fc{font-size:23px}
.qbox h2{font-size:38px}.qbox .opt{font-size:31px}.qbox .opt .n{width:50px;height:50px;font-size:27px}
.ev2{font-size:27px}.slot2 .bx{font-size:24px}.slot2 .bx.f{font-size:25px}
.bub{font-size:30px}.bub .fx2 .opt{font-size:25px}
.rtop b{font-size:27px}.rtop{font-size:22px}
.rpg .tx{font-size:36px}.pl .dl{font-size:31px}.pl .hd{font-size:25px}.pl .info{font-size:23px}
.lbl2{font-size:23px;color:#2b46b0}
.chp{font-size:22px;padding:9px 16px}.stb{font-size:24px}.kb{font-size:25px}
.ti{font-size:25px}.frow .tg{font-size:21px}.rolebtn button{font-size:21px}
.tip3 div{font-size:21px}.tip3 b{font-size:23px}
.cvl .src{font-size:27px}
.sc span{font-size:18px}
.sub{font-size:29px}
.pop .pb{font-size:27px}.pop .pb h2{font-size:38px}
.how li{font-size:26px}
.note3{font-size:22px;color:#4f5b85}
.tray .klbl{font-size:20px}.tkt{font-size:21px}
/* 카드와 칸에 입체감 */
.gsay,.gcat,.bk,.bub,.ev2,.opt,.stb,.kb,.sc{box-shadow:0 8px 0 rgba(80,100,190,.18),0 14px 22px -14px rgba(60,80,200,.5)}
.opt:hover:not([disabled]),.stb:hover,.kb:hover,.bub:hover:not(.lockd),.ev2:hover:not([disabled]),.chp:hover{border-color:var(--blue);transform:translateY(-3px)}
.opt:active,.stb:active,.kb:active,.chp:active{transform:translateY(2px)}
.opt.right{box-shadow:0 5px 0 #b8e5cd}.opt.wrong{box-shadow:0 5px 0 #f5cbc3}
.stb.on,.kb.on,.chp.on,.sc.on{box-shadow:0 0 0 4px rgba(107,140,255,.35),0 8px 0 rgba(80,100,190,.2)}
/* 버튼 글자 대비 높이기 */
.btn{background:linear-gradient(180deg,#7893ff,#4f6fe6);box-shadow:0 6px 0 #3a52b8,0 16px 22px -12px rgba(60,80,200,.7),inset 0 2px 0 rgba(255,255,255,.4)}
.btn:active{box-shadow:0 1px 0 #3a52b8,0 6px 10px -8px rgba(60,80,200,.6),inset 0 2px 0 rgba(255,255,255,.4)}
.btn.green{background:linear-gradient(180deg,#4fbf84,#2d9a63);box-shadow:0 6px 0 #1f7449,0 16px 22px -12px rgba(40,140,90,.6),inset 0 2px 0 rgba(255,255,255,.4)}
.btn.pink{background:linear-gradient(180deg,#ff86bd,#e8559f);box-shadow:0 6px 0 #b83c7c,0 16px 22px -12px rgba(220,80,150,.65),inset 0 2px 0 rgba(255,255,255,.4)}
.btn.line{background:#fff;color:var(--ink);box-shadow:0 0 0 2.5px var(--ink),0 6px 0 var(--ink)}
.rbot .btn{background:#fffefb;color:#7a5a2a;box-shadow:0 0 0 2px #cdb98f,0 5px 0 #cdb98f}
.rbot .btn.go{background:#7a5a2a;color:#fff;box-shadow:0 5px 0 #4a3a1e}
.btn[disabled]{background:#cfd5ea;box-shadow:0 6px 0 #aab2d0}

/* 도움·복습·교사용 */
.gcat .help{position:absolute;right:14px;top:10px;z-index:3;height:46px;font-size:20px;padding:0 18px}
.ic .bdg{position:absolute;right:52px;top:14px;min-width:46px;height:46px;border-radius:23px;background:#e8473a;color:#fff;border:3px solid #fff;font-size:24px;font-weight:800;display:grid;place-items:center;z-index:3;box-shadow:0 4px 0 rgba(0,0,0,.2)}
#smenu{position:absolute;left:14px;bottom:76px;z-index:46;width:340px;padding:10px;border-radius:18px;background:rgba(255,255,255,.96);border:3px solid #fff;box-shadow:0 0 0 2px #8fa2ff,0 24px 40px -16px rgba(40,50,130,.7);display:flex;flex-direction:column;gap:6px;animation:fade .15s}
#smenu button{height:58px;border-radius:12px;font-size:25px;font-weight:700;text-align:left;padding:0 18px;color:var(--ink)}
#smenu button:hover{background:#e8edff}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.spg img{width:100%;height:170px;object-fit:cover;border-radius:12px;border:3px solid #fff;box-shadow:0 8px 14px -10px rgba(60,80,200,.6)}
.spg h3{font-size:27px;margin:10px 0 6px;color:var(--blue2)}
.stx{font-size:24px;line-height:1.65;font-weight:500}.stx p{margin:0 0 .4em}
.stx.pl2 .dl{font-size:23px}.stx.pl2 .hd{font-size:21px}
.tv{display:grid;grid-template-columns:1fr 1fr;gap:26px;height:660px}
.tcol{overflow:auto;padding-right:10px;font-size:23px}
.tcol h3{font-size:31px;margin-bottom:8px}.tcol h4{font-size:25px;color:var(--blue2);margin:14px 0 6px}
.tchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tbox{padding:10px 16px;border-radius:14px;background:#fff;border:2px solid var(--line);font-size:23px;line-height:1.55}
.trow{display:grid;grid-template-columns:200px 1fr 70px;gap:10px;align-items:center;font-size:22px;margin:4px 0}
.trow b{text-align:right}
.tbar{height:20px;border-radius:10px;background:#e4e9ff;overflow:hidden}.tbar i{display:block;height:100%;background:linear-gradient(90deg,#7893ff,#4f6fe6);border-radius:10px}
.tml{margin:0 0 0 24px;font-size:22px;line-height:1.6}
.trbtn{display:flex;gap:12px;margin:10px 0}
.ttb{width:100%;border-collapse:collapse;font-size:21px}.ttb th,.ttb td{border:2px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}.ttb th{background:#eef2ff}

.scgrid{grid-template-columns:repeat(5,1fr)}
.sc{aspect-ratio:16/9}
.sc span{font-size:19px;padding:4px 6px}

.buckets.dense .in{gap:6px;padding:8px}
.buckets.dense .fc{font-size:20px;padding:6px 11px;line-height:1.28;border-width:2px}
.bk .in{overflow:auto}

/* 전체화면 버튼 */
.fsfloat{position:absolute;left:24px;top:22px;z-index:60}
.tray .fsb{min-width:132px}

/* 전체화면 버튼은 오른쪽 위, 이야기의 시작에서는 건너뛰기 버튼을 그 왼쪽으로 */
.fsfloat{left:auto;right:46px;top:30px}
#pro .pskip{right:290px;top:30px}