/* ═════════ 디자인 정리 : 가독성과 세련됨 ═════════
   굵은 테두리·딱딱한 그림자를 줄이고, 면·여백·글자 위계로 정돈한다. */
:root{--ink:#2a2958;--line:rgba(42,41,88,.9);--soft:0 12px 30px rgba(42,41,88,.16);--soft2:0 5px 14px rgba(42,41,88,.13);--paper:#fffdf9;--tint:#f5f1ff;--sh:rgba(42,41,88,.28)}
html,body{font-weight:500;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#stage{line-height:1.5;letter-spacing:-.012em}

/* 상단 바 */
#hdr{height:84px;background:rgba(255,253,249,.93);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:3px solid var(--line);box-shadow:0 8px 24px rgba(42,41,88,.14);padding:0 26px 0 20px;gap:20px}
.brand .bi{height:58px}
#pips{gap:10px}
.pip{height:50px;padding:0 24px 0 12px;border:2px solid var(--line);border-radius:25px;background:#f1eefc;box-shadow:none;font-size:22px;color:#6a68a0;gap:10px}
.pip i{width:32px;height:32px;border:2px solid var(--line);font-size:19px;background:#fff}
.pip.done{background:#e2f7ee;color:#1d7a5a}.pip.done i{background:#7fe0bd}
.pip.cur{background:linear-gradient(180deg,#ff9fcb,#ff6aa8);color:#fff;transform:none;box-shadow:0 4px 12px rgba(255,106,168,.45);text-shadow:0 1px 0 rgba(42,41,88,.35)}
.pip.cur i{background:#ffd75e}
.pip:hover{transform:translateY(-2px)}
.hb{height:46px;padding:0 18px;border:2px solid var(--line);border-radius:23px;background:#fff;box-shadow:none;font-size:21px;font-weight:700}
.hb:hover{background:var(--tint);transform:none;box-shadow:none}
.hb:active{transform:scale(.97)}

/* 본문 패널 */
#app{top:90px}
.pan{border:3px solid var(--line);border-right-width:0;border-bottom-width:0;border-radius:36px 0 0 0;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,246,255,.98));box-shadow:-10px 0 34px rgba(42,41,88,.12)}
.band{height:74px;padding:0 34px;border-bottom:3px solid var(--line);background:linear-gradient(90deg,#8466f0,#4f93ff)}
.band h3{font-size:38px;text-shadow:0 2px 0 rgba(42,41,88,.35);letter-spacing:-.025em}
.band .tag{height:44px;padding:0 22px;border:2px solid var(--line);font-size:24px;box-shadow:none;background:#ffe27a}
.pbody{padding:22px 36px 18px}

/* 말랑이 말풍선 */
.bubble{border:3px solid var(--line);border-radius:28px;font-size:28px;box-shadow:var(--soft2);background:#fffefb}
.bubble:after{border-right-width:3px;border-bottom-width:3px;box-shadow:none}
.nt{border:2px solid var(--line);box-shadow:none;background:linear-gradient(180deg,#b79bff,#8466f0)}
.xpbox{border:2px solid var(--line);box-shadow:var(--soft2);background:#fffefb}

/* 카드류 : 얇은 선 + 부드러운 그림자 */
.cardq,.fb,.sitc,.ad,.box,.tip,.stl li,.pl,.fix,.card,.cap,.say,.sl,.chip,.tg,.skip{border-width:3px;border-color:var(--line)}
.cardq,.sitc,.box,.tip,.fix,.fb{box-shadow:var(--soft2)}
.card{box-shadow:0 24px 60px rgba(42,41,88,.3)}
.cap,.talk .say{box-shadow:0 18px 44px rgba(42,41,88,.3)}
.stmt .cardq{background:#fff;border-radius:32px;font-size:52px}
.stmt .cardq small,.card .cs,.ctag{border-width:2px;box-shadow:none;font-size:24px;height:46px}
.sl,.chip,.tg{border-width:2px;box-shadow:none}
.sl{background:#ece6ff}
.chip{background:#fff}
.fb{border-radius:28px;padding:14px 38px}
.fbt b{font-size:31px}.fbt span{font-size:27px}

/* 눌러서 고르는 것들 : 낮은 입체감 */
.lane,.opt,.mc,.ck{border-width:3px;border-color:var(--line);box-shadow:0 6px 0 var(--line),0 14px 24px rgba(42,41,88,.14)}
.lane:active:not([disabled]),.opt:active:not([disabled]),.mc:active:not([disabled]),.ck:active:not([disabled]){transform:translateY(5px);box-shadow:0 1px 0 var(--line),0 4px 10px rgba(42,41,88,.14)}
.lane{border-radius:34px;font-size:44px}
.lane .key,.opt .key{border-width:2px;box-shadow:none;width:44px;height:44px;font-size:24px}
.opt{border-radius:32px;background:linear-gradient(180deg,#fff,#f6f1ff)}
.mc{border-radius:26px}
.mc .num{border-width:2px;box-shadow:none}
.ck{border-radius:30px;background:linear-gradient(180deg,#fff,#f8f5ff)}
.ck .bx{border-width:2px;box-shadow:none}
.ck.on{box-shadow:0 6px 0 var(--line),0 0 0 5px rgba(255,201,60,.6),0 14px 24px rgba(42,41,88,.14)}
.ck.right,.mc.right,.opt.right{background:linear-gradient(180deg,#f2fdf8,#d3f5e6)}
.ck.wrong,.mc.wrong,.opt.wrong{background:linear-gradient(180deg,#fff5f8,#ffdbe6)}

/* 버튼 */
.btn{height:80px;font-size:34px;border-radius:999px;--lip:#a82364}
.btn{box-shadow:0 6px 0 var(--lip),0 14px 22px var(--glow),inset 0 3px 0 rgba(255,255,255,.55),inset 0 -6px 10px rgba(0,0,0,.12)}
.btn:active:not([disabled]){transform:translateY(5px);box-shadow:0 1px 0 var(--lip),0 4px 10px var(--glow),inset 0 3px 0 rgba(255,255,255,.5)}
.btn.sm{height:62px;font-size:27px}
.row .btn,.act .btn,.row2 .btn,.nrow .btn,.crow .btn{height:80px;min-width:240px;font-size:32px}

/* 지도 핀 이름표 */
.pin .pl{border-width:2px;box-shadow:var(--soft2);background:rgba(255,253,249,.96);padding:6px 24px 8px;border-radius:26px}
.pin .pl b{font-size:32px}.pin .pl small{font-size:23px;color:#5b59a0}

/* 이야기·인증서 */
.cap{border-radius:32px;box-shadow:0 18px 44px rgba(42,41,88,.32);background:linear-gradient(180deg,rgba(255,254,250,.98),rgba(255,246,228,.98))}
.cttl{font-size:28px}
.cert{border-width:4px;box-shadow:0 24px 60px rgba(42,41,88,.3)}

/* 작은 글자 기준 : 어떤 글자도 읽기 어려울 만큼 작아지지 않게 */
.gauge span{font-size:24px}
.pin .pl small,.ck small,.fbt span,.thought label em,.nm,.nm span{font-size:max(1em,23px)}
.nm{font-size:23px}.nm span{font-size:21px}
.bub{font-size:30px;border-width:3px;box-shadow:var(--soft2)}
.phone{border-width:6px;box-shadow:0 0 0 4px #fff,0 18px 40px rgba(42,41,88,.22)}
.ptop{border-bottom-width:3px;height:72px}
.side .box{border-width:3px}

.pk{grid-auto-rows:minmax(132px,172px);align-content:center;gap:22px 26px}
.ck>span{font-size:32px;line-height:1.4}

/* 광고 카드 : 밝은 바탕 + 짙은 글자로 또렷하게 */
.ad{background:linear-gradient(135deg,#e2f1ff,#ebe4ff);color:var(--ink);border-width:3px;box-shadow:var(--soft2);justify-content:center;padding:16px 28px 16px 100px}
.ad:nth-child(2){background:linear-gradient(135deg,#ffe9f3,#fff0d8)}
.ad p{color:var(--ink);text-shadow:none;font-size:36px;font-weight:800;line-height:1.4;text-align:center;flex:1}
.adk{width:60px;height:60px;margin-top:-30px;font-size:32px;border-width:3px;box-shadow:var(--soft2);background:linear-gradient(180deg,#ffe27a,#ffc02e)}
/* 레인(분류 버튼) 글자 대비 */
.lane{text-shadow:0 2px 0 rgba(42,41,88,.55),0 0 12px rgba(42,41,88,.25)}
.lane small{text-shadow:0 1px 0 rgba(42,41,88,.5);font-size:25px;font-weight:700}

/* 구조대 안내 카드 : 어절 단위로 정돈 */
.fix{left:22px;right:22px;top:90px;padding:18px 26px 20px;text-align:center;border-radius:26px;display:flex;flex-direction:column;gap:6px;word-break:keep-all}
.fx-t{display:flex;align-items:center;justify-content:center;gap:12px}
.fx-t b{font-size:32px;line-height:1.3;color:#1c6b4f;font-weight:800}
.fx-t.no b{color:#b3265c}
.fx-t .ic{width:42px;height:42px;margin:0}
.fx-w{font-size:27px;font-weight:700;line-height:1.45;color:#b3265c;text-wrap:balance}
.fx-s{margin-top:6px;padding:10px 18px 12px;border-radius:18px;background:#f1ecff}
.fx-s span{display:block;font-size:22px;font-weight:700;color:#5b59a0;margin-bottom:2px}
.fx-s q{display:block;font-size:29px;font-weight:800;line-height:1.45;color:var(--ink);text-wrap:balance;quotes:"“" "”"}
.fix b{color:inherit}

/* 고르기 목록이 칸을 넘어 겹치지 않도록 : 남는 높이를 행이 나눠 갖는다 */
.pk{grid-auto-rows:minmax(0,1fr);align-content:stretch;overflow:hidden;padding:10px 6px 14px}
.pk .ck{min-height:0;max-height:172px;align-self:center;height:100%;padding-top:8px;padding-bottom:8px}
.pk.dense{gap:14px 24px}
.pk.dense .ck{padding:6px 28px 6px 112px}
.pk.dense .ck>span{font-size:29px;line-height:1.3}
.pk.dense .ck .bx{width:58px;height:58px;margin-top:-29px;font-size:30px}
.own{padding:4px 6px 8px}
.own .inp2{height:64px;font-size:28px}

/* ═════════ 2차 점검 : 여백 배분·읽기 편한 줄 길이 ═════════ */
.pbody{padding:24px 40px 30px}
/* 문제 풀기·토의 : 남는 높이를 고르게 나누고, 긴 문장은 두 줄로 균형 있게 */
.ads{padding:6px 4px 14px}
.ad{min-height:150px}
.ad p{font-size:38px}
.qq{font-size:36px;padding:16px 24px 18px}
.qq.sm{font-size:32px}
.mcs{justify-content:space-evenly;gap:16px;padding:6px 4px 10px}
.mc{min-height:124px;padding:16px 40px 16px 112px;font-size:33px;line-height:1.45}
.mc .num{left:30px;width:56px;height:56px;margin-top:-28px;font-size:30px}
.mc>span{max-width:1040px;text-wrap:balance}
.sitc{padding:20px 36px;gap:30px}
.sitc .li{width:128px;height:128px}
.sitc h4{font-size:40px}
.sitc p{font-size:32px}
/* 분류 퀴즈 */
.lanes{height:248px;padding-bottom:6px}
.stmt{padding:0 0 8px}
/* 비어 있는 상자 안내 */
.tags:empty:before{content:"구조한 문제가 여기에 모여요.";color:#9a98c4;font-size:25px;font-weight:700}
/* 입력 */
.thought{padding:10px 4px 6px}
.pk{padding:10px 6px 26px;overflow:visible}
.pk .ck{max-height:164px}

/* 이야기 설명 상자 : 낮고 가로로 넓게, 그림이 더 많이 보이도록 */
.cap{display:flex;align-items:center;gap:40px;bottom:34px;padding:38px 56px 20px 64px;border-radius:30px}
.cttl{display:none}
.ctx{flex:1;min-height:0;font-size:40px;line-height:1.5;gap:0;padding:2px 0}
.crow{flex:none;flex-direction:column;align-items:center;gap:14px;margin:0}
.crow .btn{min-width:210px;height:72px;font-size:30px}
.ctag{left:40px;top:-28px;height:50px;font-size:26px;padding:0 26px}

/* ── 잠긴 단계 ── */
.pin.lock .bd{filter:grayscale(.9) brightness(.9) drop-shadow(0 8px 0 rgba(42,41,88,.3))}
.pin.lock .lk{position:absolute;right:-18px;bottom:-12px;width:68px;filter:drop-shadow(0 4px 0 rgba(42,41,88,.35))}
.pin.lock .pl{opacity:.88}
.pin.lock .pl small{color:#7a78a8}
.pip.lock{opacity:.8;background:#ece9f7;color:#8a88b3}
.pip.lock i{background:#fff}
.pip.lock i img{width:22px;height:22px;object-fit:contain}
.nope{animation:nope .45s}
@keyframes nope{20%{translate:-10px 0}40%{translate:10px 0}60%{translate:-6px 0}80%{translate:6px 0}}
.ctx{font-size:38px}
.ctx .ln{white-space:nowrap}

/* ═════════ 말랑이 안내 : 하단 중앙 가로 막대 + 프로필 동그라미(튀어나온 입체) ═════════ */
#dock,body[data-scene=map] #dock{left:50%;right:auto;top:auto;bottom:16px;width:min(1260px,calc(100% - 64px));height:auto;transform:translateX(-50%);z-index:12;pointer-events:none}
#dock:before{display:none}
.guide{display:flex;align-items:flex-end;gap:22px;pointer-events:auto}
.gav{position:relative;flex:none;width:128px;height:150px}
.gc{position:absolute;left:5px;bottom:0;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#eaf5ff,#bfdcff 62%,#9cc2fb);border:4px solid #fff;box-shadow:0 0 0 3px var(--line),0 10px 20px rgba(42,41,88,.32),inset 0 -8px 14px rgba(70,110,200,.28)}
.ga,.gb{position:absolute;left:-11px;bottom:2px;width:150px;max-width:none;pointer-events:none}
.ga{clip-path:circle(56px at 75px 90px)}
.gb{clip-path:inset(0 0 calc(100% - 90px) 0);filter:drop-shadow(0 5px 3px rgba(42,41,88,.28))}
.gtx{position:relative;flex:1;min-height:100px;display:flex;align-items:center;justify-content:center;padding:26px 40px 16px;background:linear-gradient(180deg,#fffefb,#fff6e8);border:3px solid var(--line);border-radius:30px;box-shadow:0 12px 28px rgba(42,41,88,.22);font-size:30px;line-height:1.45;font-weight:700}
.gtx:before{content:"";position:absolute;left:-13px;bottom:34px;width:24px;height:24px;background:#fffbf3;border-left:3px solid var(--line);border-bottom:3px solid var(--line);transform:rotate(45deg);border-radius:0 0 0 6px}
.gtx .nt{left:30px;top:-19px;height:36px;font-size:21px;padding:0 18px}
.gtx #bt{display:block;min-height:0;text-align:center;text-wrap:balance}
.gtx #bt .ln{display:inline}
.gtx em{font-style:normal;background:linear-gradient(transparent 56%,#ffe07a 56%);padding:0}
.guide .xpbox{position:static;align-self:center;flex:none;height:64px;margin:0 0 0 4px;pointer-events:auto}
#app{bottom:150px}
#app.full{bottom:0}
.pan{border-bottom-width:3px;border-bottom-color:var(--line)}
.endbtn{bottom:190px}

/* ── 점검 버전 표시 ── */
#simbar{position:fixed;left:12px;top:96px;z-index:60;font-size:16px}
#simbar .sb-t{height:34px;padding:0 14px;border:2px solid #2a2958;border-radius:17px;background:#ffe27a;font-weight:800;font-size:15px;cursor:pointer}
#simbar .sb-p{margin-top:6px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:8px;border:2px solid #2a2958;border-radius:14px;background:#fffdf9;box-shadow:0 8px 20px rgba(42,41,88,.25)}
#simbar .sb-p button{height:30px;padding:0 8px;border:2px solid #2a2958;border-radius:10px;background:#fff;font-size:14px;font-weight:700;cursor:pointer}
#simbar .sb-p button:hover{background:#ece6ff}
.lane.hint,.mc.hint{box-shadow:0 6px 0 var(--line),0 0 0 6px rgba(52,199,154,.75),0 14px 24px rgba(42,41,88,.14)}
.lane.hint:before,.mc.hint:before{content:"정답";position:absolute;right:16px;top:-14px;height:30px;padding:0 14px;display:flex;align-items:center;border-radius:15px;background:#34c79a;color:#fff;font-size:18px;font-weight:800;text-shadow:none;z-index:2}

/* 상황 해설 : 두 칸으로 나눠 깔끔하게 (내 선택 | 다른 방법) */
.fb.two{width:100%;max-width:min(1560px,98%);display:grid;grid-template-columns:1fr 3px 1fr;gap:34px;align-items:center;text-align:left;padding:14px 34px}
.fb.two .cell{display:flex;align-items:center;gap:18px;min-width:0}
.fb.two .vr{align-self:stretch;width:3px;background:rgba(42,41,88,.18);border-radius:2px}
.fb.two .fbt{text-align:left}
.fb.two .fbt b{font-size:29px}
.fb.two .fbt span{font-size:25px;line-height:1.4}
.fb.two .fbt.alt b{color:#5b3fc4}
.fb.two .fi{width:58px;height:58px}

/* ═════════ 하단 안내 막대에 맞춘 높이 다이어트 ═════════ */
.pbody{padding:18px 38px 22px}
.sh{min-height:54px}
.sl{height:48px;font-size:25px}
/* 해설 + 다음 버튼 한 줄 */
.fbrow{flex:none;display:flex;align-items:center;gap:22px;margin:2px 0 8px;min-height:96px}
.fbrow .fb{flex:1;margin:0;max-width:none;width:auto;min-height:92px}
.fbrow .fb:empty{visibility:hidden}
.fbrow .btn{flex:none;min-width:230px;height:76px;font-size:31px}
.fb{min-height:92px;padding:10px 32px;margin:2px 6px 8px}
.fbt b{font-size:29px}.fbt span{font-size:25px;line-height:1.4}
.fb .fi{width:56px;height:56px}
.act{min-height:84px;padding-bottom:2px}
/* 분류 퀴즈 */
.hud2{height:58px}.gauge{height:46px}
.tbar{height:18px;margin:4px 4px 0}
.lanes{height:206px;gap:22px}
.lane{font-size:40px;border-radius:30px;margin-bottom:12px}
.lane .li{width:84px;height:84px}
.lane small{font-size:23px}
.stmt .cardq{min-height:170px;padding:26px 56px;font-size:48px;border-radius:30px}
.stmt .fog{width:190px;top:-34px}
.stmt.s2{min-height:190px}
.stmt.s2 .cardq{min-height:150px;font-size:44px}
/* 상황 고르기 */
.opts{min-height:170px;max-height:230px;gap:20px}
.opt{min-height:170px;font-size:34px}
.opt .li{width:84px;height:84px}
/* 문제 풀기 */
.ads{padding:4px 4px 10px;gap:20px}
.ad{min-height:112px;padding:12px 26px 12px 96px}
.ad p{font-size:34px}
.adk{width:54px;height:54px;margin-top:-27px;font-size:28px}
.qq{font-size:32px;padding:8px 24px 10px}
.mcs{gap:12px;padding:4px 4px 8px}
.mc{min-height:92px;padding:10px 36px 10px 104px;font-size:30px;margin-bottom:4px}
.mc .num{width:50px;height:50px;margin-top:-25px;font-size:27px}
/* 토의 */
.sitc{padding:14px 30px;gap:24px}
.sitc .li{width:96px;height:96px}
.sitc h4{font-size:34px}.sitc p{font-size:28px}
.sit .mcs{gap:10px}
.sit .mc{min-height:84px;font-size:28px;padding:8px 32px 8px 100px}
.thought{padding:6px 4px 4px}.thought .inp2{height:60px;font-size:27px}
.qq.sm{font-size:28px;padding:6px 20px}
/* 고르기 */
.pk{grid-auto-rows:minmax(0,1fr)}
.pk .ck{max-height:148px}
/* 구조대 */
.rescue{gap:26px}
.phone{margin:2px 8px 12px}
.side{gap:14px}
.hearts img{width:56px}
.score b{font-size:54px}
/* 포스터 */
.pside{gap:14px}
.pside .pnote{font-size:23px}
.pside .btn{height:68px;font-size:29px}

/* ── 공익광고 미리 보기 ── */
.ad{cursor:pointer;transition:transform .15s,box-shadow .15s}
.ad:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(42,41,88,.2)}
.adh{position:absolute;right:16px;bottom:10px;display:flex;align-items:center;gap:6px;padding:3px 14px 3px 8px;border-radius:16px;background:rgba(255,255,255,.9);border:2px solid var(--line);font-size:20px;font-weight:800;line-height:1.2;color:#5b3fc4}
.adh .ic{width:26px;height:26px;margin:0}
#adpop{position:absolute;z-index:50;width:640px;pointer-events:none;opacity:0;transform:translateY(10px) scale(.97);transition:opacity .18s,transform .18s}
#adpop.on{opacity:1;transform:none}
.adposter{position:relative;border:4px solid var(--line);border-radius:26px;overflow:hidden;background:linear-gradient(135deg,#9fd0ff,#c9b6ff);aspect-ratio:3/2;box-shadow:0 26px 54px rgba(42,41,88,.38)}
.adposter img{display:block;width:100%;height:100%;object-fit:cover}
.adcap{position:absolute;left:0;right:0;bottom:0;padding:54px 28px 22px;background:linear-gradient(0deg,rgba(24,22,66,.86),rgba(24,22,66,0));color:#fff;font-size:34px;font-weight:800;line-height:1.4;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.5);text-wrap:balance}
.adposter.big .adcap{font-size:46px;padding:80px 40px 30px}
.card.adbig{width:min(1180px,92%);padding:26px 26px 30px}
.card.adbig .adposter{box-shadow:none}
.card.adbig .row{margin-top:20px;justify-content:center}

.tip .ln{white-space:nowrap}
.tip{font-size:25px}

/* ── 해결 방법 생각하기 : 한 줄 선택지 · 상황 카드 · 생각 입력 카드 ── */
.sitc{position:relative;padding:14px 34px 14px 26px;gap:26px;border-radius:30px;background:linear-gradient(100deg,#fff7de 0%,#fffdf6 62%);overflow:hidden}
.sitc:before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:linear-gradient(180deg,#ffc736,#ff9f1c)}
.sib{flex:none;width:104px;height:104px;margin-left:8px;display:grid;place-items:center;border-radius:28px;background:#fff;border:3px solid var(--line);box-shadow:var(--soft2)}
.sib .li{width:80px;height:80px}
.sit-t{min-width:0}
.sit-t h4{font-size:36px;line-height:1.25}
.sit-t p{font-size:28px;line-height:1.45;color:#3e3c78}
.sit .mc{min-height:70px;font-size:29px;padding:8px 32px 8px 96px}
.sit .mc>span{max-width:none;white-space:nowrap}
.sit .mc .num{width:46px;height:46px;margin-top:-23px;left:28px;font-size:25px}
.thought{display:flex;align-items:center;gap:16px;margin:8px 4px 4px;padding:10px 16px 10px 20px;border:3px solid var(--line);border-radius:26px;background:linear-gradient(180deg,#f6f1ff,#efe8ff);overflow:hidden}
.thought .ic{width:46px;height:46px;margin:0;flex:none}
.thought label{flex:none;font-size:27px;font-weight:800;color:#4a2fb0}
.thought .inp2{flex:1;height:58px;border-width:2px;font-size:27px}
.pin2{left:10.5%;right:10.5%;top:31.5%;bottom:9.5%}
.pin2 ol{gap:1.4cqw}

/* ── 본문 블록 : 좌우 모두 둥글게 마무리하고 왼쪽 빈자리를 없앰 ── */
#app{left:28px;right:28px;top:96px;bottom:150px}
#app.full{left:0;right:0;top:0;bottom:0}
.pan{border:3px solid var(--line);border-radius:36px;box-shadow:0 14px 40px rgba(42,41,88,.2)}
.band{border-radius:0}
#simbar{top:auto;bottom:18px;left:14px}
#simbar .sb-p{position:absolute;bottom:42px;left:0;width:250px;margin:0}

/* ── 마지막 약속은 학생이 직접 쓴다 ── */
.own{flex:none;display:flex;align-items:center;gap:16px;margin:2px 4px 6px;padding:10px 18px 10px 22px;border:3px solid var(--line);border-radius:26px;background:linear-gradient(180deg,#fff7e0,#ffeeb8)}
.own .ic{width:46px;height:46px;margin:0;flex:none}
.own label{flex:none;font-size:27px;font-weight:800;color:#8a4b00}
.own .inp2{flex:1;height:58px;border-width:2px;font-size:27px}
.pin2 li.mine{background:linear-gradient(180deg,#fff7d8,#ffefaa);border-color:#c27a00}
.pin2 li.mine:after{content:"내가 쓴 약속";position:absolute;right:1.4cqw;top:-1.3cqw;padding:.1cqw 1.2cqw;border-radius:1.2cqw;background:#ff7aa8;color:#fff;font-size:1.7cqw;font-weight:800;line-height:1.5}
.spl li.mine{background:#fff3c4}
.spl li.mine:after{content:"내가 쓴 약속";position:absolute;right:4mm;top:-2.6mm;padding:.3mm 3mm;border-radius:3mm;background:#ff7aa8;color:#fff;font-size:9pt;font-weight:800;line-height:1.5}

/* ═════════ 불러오는 화면 ═════════ */
#loading{position:fixed;inset:0;z-index:200;overflow:hidden;background:#b9b7f5;transition:opacity .8s ease,transform .8s ease}
#loading.out{opacity:0;transform:scale(1.06);pointer-events:none}
#loading .lbg{position:absolute;inset:-3%;background:url(../img/loading.webp) center/cover no-repeat;animation:lzoom 7s ease-out forwards}
@keyframes lzoom{from{transform:scale(1.12)}to{transform:scale(1)}}
#loading .lglow{position:absolute;inset:0;background:radial-gradient(60% 50% at 82% 52%,rgba(255,236,170,.5),rgba(255,236,170,0) 70%);animation:lglow 2.6s ease-in-out infinite}
@keyframes lglow{50%{opacity:.55}}
#loading .lfx{position:absolute;inset:0;pointer-events:none}
#loading .lfx i{position:absolute;bottom:-60px;width:34px;height:34px;background:url(../img/r_star.webp) center/contain no-repeat;opacity:0;animation:lrise linear infinite}
#loading .lfx i.h{background-image:url(../img/r_heart.webp)}
@keyframes lrise{0%{transform:translateY(0) translateX(0) scale(.7);opacity:0}15%{opacity:.95}100%{transform:translateY(-115vh) translateX(var(--dx)) scale(1.1);opacity:0}}
#loading .lbox{position:absolute;left:50%;bottom:9%;width:min(980px,82vw);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:18px}
#loading .lbrand{height:clamp(54px,9vh,92px);width:auto;filter:drop-shadow(0 6px 10px rgba(42,41,88,.35))}
#loading .lbar{position:relative;width:100%;height:clamp(24px,4vh,36px);border:3px solid rgba(42,41,88,.9);border-radius:999px;background:rgba(255,255,255,.82);box-shadow:0 10px 26px rgba(42,41,88,.28),inset 0 3px 6px rgba(42,41,88,.12)}
#loading .lbf{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:repeating-linear-gradient(135deg,#ff8fc0 0 22px,#ffb3d6 22px 44px);background-size:62px 100%;animation:lstripe 1s linear infinite}
@keyframes lstripe{to{background-position:62px 0}}
#loading .lst{position:absolute;top:50%;left:0;width:clamp(44px,7vh,64px);margin:calc(clamp(44px,7vh,64px) / -2) 0 0 calc(clamp(44px,7vh,64px) / -2);filter:drop-shadow(0 4px 4px rgba(42,41,88,.4));animation:lspin 2.4s linear infinite}
@keyframes lspin{to{transform:rotate(360deg)}}
#loading .lrow{width:100%;display:flex;justify-content:space-between;align-items:center;padding:8px 22px;border-radius:999px;background:rgba(255,253,249,.9);border:2px solid rgba(42,41,88,.9);font-size:clamp(18px,2.8vh,28px);font-weight:800;color:#2a2958;box-shadow:0 6px 16px rgba(42,41,88,.2)}
#loading .lpc b{font-size:1.25em;color:#d6458a}
@media (prefers-reduced-motion:reduce){#loading .lbg,#loading .lfx i,#loading .lst,#loading .lbf,#loading .lglow{animation:none}}