/* =========================================================
lab.css — 냥박사의 알레르기 연구소 (S00 ~ S38A) · 2026-11 새 그림 버전
1600×900 판을 화면에 맞춰 확대·축소 → 판 안의 크기는 모두 px(판 기준)
부품: 버튼 A 픽셀 블록 · 말풍선 B 픽셀+이름표 · 안내판 B 연구실 화면 · 결과 창 B 스캐너 모양
========================================================= */
.screen-lab { padding:0 !important; max-width:none !important; }
.lab { position:relative; height:100dvh; width:100%; overflow:hidden; background:var(--navy); }
body.tablet .lab { position:absolute; inset:0; height:900px; }
.lab-back { position:absolute; inset:-40px; background-size:cover; background-position:center; filter:blur(24px) brightness(.9); opacity:.85; }
.lab-board { position:absolute; left:0; top:0; width:1600px; height:900px; transform-origin:0 0; overflow:hidden; user-select:none; -webkit-user-select:none;
font-family:var(--font-body); color:var(--navy); }
.lab-bgimg { position:absolute; inset:0; width:1600px; height:900px; max-width:none; image-rendering:pixelated; pointer-events:none; }
.lab-dim { position:absolute; inset:0; pointer-events:none; }
.lab-dim.navy { background:rgba(30,42,90,.48); }
.lab-dim.cream { background:rgba(255,248,238,.58); }
.lab-dim.soft-r { background:linear-gradient(90deg,rgba(255,248,238,0) 35%,rgba(255,248,238,.4)); }
.lab-board > * { position:absolute; }
.lab-char { pointer-events:none; }
.lab-char img { width:100%; height:100%; image-rendering:pixelated; display:block; }
b.lb { color:var(--blue); font-weight:400; font-family:var(--font-head); }
b.lc { color:var(--coral-d); font-weight:400; font-family:var(--font-head); }
/* ---------- 부품: 버튼 A (픽셀 블록) ---------- */
.px-btn { position:absolute; border:0; background:var(--yellow); color:var(--navy); font-family:var(--font-head); font-size:30px; line-height:1.1; padding:16px 38px 12px; white-space:nowrap; overflow:hidden; cursor:pointer;
box-shadow:0 -5px 0 var(--navy),0 5px 0 var(--navy),-5px 0 0 var(--navy),5px 0 0 var(--navy),0 12px 0 var(--navy); transition:filter .15s; }
.px-btn > span { position:relative; z-index:1; }
.px-btn.w { background:#FFFDF5; } .px-btn.c { background:var(--coral); color:#fff; } .px-btn.b { background:var(--blue); color:#fff; }
.px-btn:active { filter:brightness(.92); }
.px-btn.off { background:#E9E7E0 !important; color:#8E95AD !important;
box-shadow:0 -3px 0 rgba(30,42,90,.22),0 3px 0 rgba(30,42,90,.22),-3px 0 0 rgba(30,42,90,.22),3px 0 0 rgba(30,42,90,.22) !important; } /* 잠긴 버튼: 옅은 회색, 뒤가 비치지 않게 (11/9 · 11/10 불투명) */
.px-btn.hide { opacity:0; pointer-events:none; }
.px-btn[hidden] { display:none; }
.px-btn.shine::after { content:''; position:absolute; top:-20%; left:-60%; width:40%; height:140%; background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0)); transform:skewX(-20deg); animation:pxshine 2.6s ease-in-out infinite; }
@keyframes pxshine { 0%,55% { left:-60%; } 85%,100% { left:130%; } }
.px-btn.beat { animation:pxbeat 1.6s ease-in-out infinite; }
@keyframes pxbeat { 0%,100% { scale:1; } 50% { scale:1.05; } }
/* 작은 칸 · 아이콘 버튼 */
.px-chip { background:#FFFDF5; font-family:var(--font-head); font-size:24px; padding:8px 16px 6px; box-shadow:0 -3px 0 var(--navy),0 3px 0 var(--navy),-3px 0 0 var(--navy),3px 0 0 var(--navy); }
.px-chip.big { font-size:32px; padding:10px 20px 8px; }
.px-icon { width:66px; height:66px; border:0; background:#FFFDF5; display:flex; align-items:center; justify-content:center; padding:0;
box-shadow:0 -4px 0 var(--navy),0 4px 0 var(--navy),-4px 0 0 var(--navy),4px 0 0 var(--navy),4px 7px 0 var(--navy); }
.px-icon.y { background:var(--yellow); } .px-icon svg { width:36px; height:36px; }
/* ---------- 부품: 말풍선 B (픽셀 + 이름표) ---------- */
.px-bub { background:#fff; padding:30px 30px 20px; line-height:1.5; letter-spacing:-.02em;
box-shadow:0 -5px 0 var(--navy),0 5px 0 var(--navy),-5px 0 0 var(--navy),5px 0 0 var(--navy),6px 11px 0 var(--navy); }
.px-bub-txt { min-height:1.5em; }
.px-name { position:absolute; left:20px; top:-24px; background:var(--yellow); font-family:var(--font-head); font-size:24px; padding:3px 14px 1px;
box-shadow:0 -3px 0 var(--navy),0 3px 0 var(--navy),-3px 0 0 var(--navy),3px 0 0 var(--navy); }
.px-name.s { background:var(--sky); }
.px-bub i { position:absolute; background:var(--navy); }
.px-bub.tail-bl .t1 { left:40px; bottom:-21px; width:20px; height:10px; } .px-bub.tail-bl .t2 { left:30px; bottom:-31px; width:10px; height:10px; }
.px-bub.tail-br .t1 { right:40px; bottom:-21px; width:20px; height:10px; } .px-bub.tail-br .t2 { right:30px; bottom:-31px; width:10px; height:10px; }
.px-bub.tail-l .t1 { left:-21px; top:40px; width:10px; height:20px; } .px-bub.tail-l .t2 { left:-31px; top:50px; width:10px; height:10px; }
.px-tag { display:inline-block; background:var(--blue); color:#fff; font-family:var(--font-head); padding:3px 16px 1px;
box-shadow:0 -3px 0 var(--navy),0 3px 0 var(--navy),-3px 0 0 var(--navy),3px 0 0 var(--navy),3px 6px 0 rgba(30,42,90,.25); }
/* ---------- 부품: 안내판 B ---------- */
.px-panel { background:var(--blue); padding:12px; box-shadow:0 -5px 0 var(--navy),0 5px 0 var(--navy),-5px 0 0 var(--navy),5px 0 0 var(--navy); }
.px-panel > div { background:var(--sky); padding:12px 32px; text-align:center; display:flex; flex-direction:column; gap:2px; }
.px-panel small { font-family:var(--font-head); font-size:22px; color:var(--blue); }
.px-panel b { font-family:var(--font-head); font-weight:400; white-space:nowrap; }
/* ---------- S00 ---------- */
.lab-sign { display:flex; align-items:center; justify-content:center; padding-top:22px; }
.lab-sign > div { position:relative; }
.lab-sign .px-tag { position:absolute; left:-10px; top:-44px; font-size:30px; }
.lab-sign b { font-family:var(--font-head); font-weight:400; font-size:96px; color:var(--navy); text-shadow:0 5px 0 rgba(30,42,90,.16); white-space:nowrap; }
/* 연구회 이름표 (11/11) — 모양: 오른쪽 위, 픽셀 테두리, [SENSE 남색 | 연구회 이름 크림] · 두 번 누르면 선생님 화면 (11/11) */
.lab-org { position:absolute; right:32px; top:22px; z-index:3; cursor:default; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; display:flex; align-items:stretch; font-family:var(--font-head); white-space:nowrap;
box-shadow:0 -3px 0 var(--navy),0 3px 0 var(--navy),-3px 0 0 var(--navy),3px 0 0 var(--navy),3px 6px 0 rgba(30,42,90,.22); }
.lab-org b, .lab-org span { display:flex; align-items:center; line-height:1; padding:8px 14px 5px; }
.lab-org b { font-weight:400; background:var(--navy); color:#fff; font-size:26px; letter-spacing:.06em; }
.lab-org span { background:#FFFDF5; color:var(--navy); font-size:24px; }
.lab-sign b em { font-style:normal; color:var(--coral-d); }
/* ---------- S05 ---------- */
.lab-choice { border:0; padding:24px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
box-shadow:0 -6px 0 var(--navy),0 6px 0 var(--navy),-6px 0 0 var(--navy),6px 0 0 var(--navy),8px 14px 0 var(--navy); }
.lab-choice.blue { background:var(--sky); } .lab-choice.coral { background:#FBE3D9; }
.lab-choice .ch-img { width:520px; height:375px; } .lab-choice .ch-img img { width:100%; height:100%; image-rendering:pixelated; }
.lab-choice b { font-family:var(--font-head); font-weight:400; font-size:50px; }
.lab-choice small { font-size:28px; color:var(--muted); }
.lab-choice .px-btn { position:relative; margin-top:16px; font-size:34px; }
/* ---------- 장소: 스캔할 곳 · 찾은 칸 ---------- */
.lab-spot { border:0; background:transparent; padding:0; cursor:pointer; }
.lab-spot > img { width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }
.lab-spot > i, .lab-lens > i { position:absolute; width:26px; height:26px; border:0 solid var(--coral-d); }
.lab-spot > .c1, .lab-lens > .c1 { left:-14px; top:-14px; border-left-width:6px; border-top-width:6px; }
.lab-spot > .c2, .lab-lens > .c2 { right:-14px; top:-14px; border-right-width:6px; border-top-width:6px; }
.lab-spot > .c3, .lab-lens > .c3 { left:-14px; bottom:-14px; border-left-width:6px; border-bottom-width:6px; }
.lab-spot > .c4, .lab-lens > .c4 { right:-14px; bottom:-14px; border-right-width:6px; border-bottom-width:6px; }
.lab-spot.done > i { border-color:var(--green); }
.lab-spot.pulse > i { animation:corner 1.4s ease-in-out infinite; }
@keyframes corner { 50% { transform:scale(1.25); } }
.lab-spot.glow { animation:spotglow .6s ease-in-out 5; }
/* 스캔할 곳 강조 (사용자 요청 11/8): 바닥 빛 + 퍼지는 물결 + 물건 테두리 빛 + 모서리 크게 */
.lab-spot.pulse { isolation:isolate; border-radius:22px; animation:spotripple 1.4s ease-out infinite; }
@keyframes spotripple { 0% { box-shadow:0 0 0 0 rgba(224,102,63,.75); } 100% { box-shadow:0 0 0 30px rgba(224,102,63,0); } }
.lab-spot.pulse.glow { animation:spotglow .6s ease-in-out 5; }
.lab-spot.pulse::before { content:''; position:absolute; inset:-34px; border-radius:50%; pointer-events:none; z-index:-1;
background:radial-gradient(closest-side, rgba(255,255,255,.98), rgba(255,226,90,.9) 52%, rgba(255,200,40,.45) 74%, rgba(255,200,40,0)); animation:spothalo 1.4s ease-in-out infinite; }
@keyframes spothalo { 0%,100% { opacity:.55; transform:scale(.88); } 50% { opacity:1; transform:scale(1.08); } }
.lab-spot.pulse > img { filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 0 10px #F5C842);
animation:spotlift 1.4s ease-in-out infinite; }
@keyframes spotlift { 50% { translate:0 -6px; } }
.lab-spot.pulse > i { width:34px; height:34px; border-color:#E0663F; filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 6px #fff); }
.lab-spot.pulse > .c1 { border-left-width:8px; border-top-width:8px; } .lab-spot.pulse > .c2 { border-right-width:8px; border-top-width:8px; }
.lab-spot.pulse > .c3 { border-left-width:8px; border-bottom-width:8px; } .lab-spot.pulse > .c4 { border-right-width:8px; border-bottom-width:8px; }
@keyframes spotglow { 50% { filter:drop-shadow(0 0 18px #F5C842) drop-shadow(0 0 6px #fff); } }
.stamp { position:absolute; right:-34px; top:-40px; width:92px; height:92px; border:6px solid var(--coral-d); border-radius:50%; color:var(--coral-d); background:rgba(255,253,245,.88);
display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:28px; transform:rotate(-12deg); }
.stamp-in { animation:stampin .35s cubic-bezier(.3,1.6,.6,1) both; }
@keyframes stampin { from { transform:rotate(-12deg) scale(2.4); opacity:0; } to { transform:rotate(-12deg) scale(1); opacity:1; } }
/* 진드기: 점 + 꾸물거리는 선 */
.mites { position:absolute; inset:0; }
.mites i { position:absolute; width:9px; height:9px; background:#6b4a2f; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.55); animation:mitewig 1.1s ease-in-out infinite; }
.mites em { position:absolute; width:46px; height:10px; border-top:4px dotted #6b4a2f; border-radius:50%; animation:mitewig 1.4s ease-in-out infinite; }
.mites em:nth-of-type(1) { left:20%; top:30%; } .mites em:nth-of-type(2) { left:58%; top:60%; animation-delay:.3s; } .mites em:nth-of-type(3) { left:35%; top:72%; animation-delay:.6s; }
@keyframes mitewig { 0%,100% { transform:translate(0,0) rotate(0); } 25% { transform:translate(4px,-3px) rotate(12deg); } 75% { transform:translate(-4px,2px) rotate(-10deg); } }
.lab-tray { display:flex; justify-content:space-around; align-items:center; background:rgba(255,253,245,.94);
box-shadow:0 -4px 0 var(--navy),0 4px 0 var(--navy),-4px 0 0 var(--navy),4px 0 0 var(--navy); }
.tray-slot { display:flex; flex-direction:column; align-items:center; gap:4px; }
.ts-box { width:96px; height:88px; background:#E8E1D3; display:flex; align-items:center; justify-content:center;
box-shadow:0 -3px 0 var(--navy),0 3px 0 var(--navy),-3px 0 0 var(--navy),3px 0 0 var(--navy); }
.ts-box span { font-family:var(--font-head); font-size:46px; color:#A8A08F; }
.ts-box img { width:80px; height:80px; image-rendering:pixelated; }
.tray-slot.done .ts-box { background:#fff; }
.tray-slot b { font-family:var(--font-head); font-weight:400; font-size:22px; color:#8A93AE; }
.tray-slot.done b { color:var(--navy); }
/* ---------- 관찰: 렌즈 ---------- */
.lab-lens { border:0; padding:40px; border-radius:50%; background:radial-gradient(circle,#fff 0 60%,var(--sky) 61%); cursor:pointer;
box-shadow:0 0 0 10px var(--navy),0 0 0 22px var(--yellow),0 0 0 28px var(--navy); }
.lab-lens img { width:100%; height:100%; image-rendering:pixelated; }
.lab-lens > i { border-color:var(--yellow); }
.lab-lens.pulse { animation:lens 1.8s ease-in-out infinite; }
@keyframes lens { 50% { scale:1.04; } }
.lab-lens.flash { animation:lensflash .5s ease-out 1; }
@keyframes lensflash { 30% { filter:brightness(1.8); scale:1.08; } }
/* ---------- 스캔 결과 창 B ---------- */
.lab-result { background:var(--yellow); border-radius:30px 30px 10px 10px; padding:20px 24px 16px; display:flex; flex-direction:column; align-items:center; gap:14px;
box-shadow:0 -5px 0 var(--navy),0 5px 0 var(--navy),-5px 0 0 var(--navy),5px 0 0 var(--navy),8px 13px 0 var(--navy); }
.rs-light { align-self:stretch; height:26px; margin:0 50px; background:#5BB8F0; border:5px solid var(--blue); border-radius:12px; }
.rs-screen { align-self:stretch; flex:1; background:var(--sky); border:5px solid var(--blue); padding:20px 26px; display:flex; flex-direction:column; gap:16px; }
.rs-head { display:flex; align-items:center; gap:22px; }
.rs-head img { width:150px; height:150px; background:#fff; border:4px solid var(--navy); image-rendering:pixelated; }
.rs-head small { display:block; font-family:var(--font-head); font-size:26px; color:var(--blue); }
.rs-head b { font-family:var(--font-head); font-weight:400; font-size:66px; }
.rs-box { background:#fff; border:4px solid var(--navy); padding:12px 20px; }
.rs-box h3 { font-family:var(--font-head); font-weight:400; font-size:28px; margin-bottom:8px; }
.rs-box h3.lg { color:inherit; } /* 두 칸 제목 같은 색 (11/9 점검) */
.rs-syms { display:flex; gap:40px; }
.rs-syms > div { display:flex; align-items:center; gap:14px; }
.rs-syms b { font-family:var(--font-head); font-weight:400; font-size:28px; }
.sym-c { width:140px; height:134px; border-radius:50%; background:#FBE3D9; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; flex:none; }
.sym-c img { height:134px; image-rendering:pixelated; }
.rs-box ul { list-style:none; display:flex; flex-direction:column; gap:6px; }
.rs-box li { font-size:28px; line-height:1.45; padding-left:30px; position:relative; opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s; }
.rs-box li.on { opacity:1; transform:none; }
.rs-box li { padding-left:40px; }
.rs-box li::before { content:'✓'; position:absolute; left:0; top:0; font-family:var(--font-head); font-size:30px; line-height:1.4; color:var(--green); }
.rs-dot { position:static !important; width:28px; height:28px; border-radius:50%; background:var(--blue); border:5px solid var(--navy); }
/* ---------- 완료 창 · 축하 ---------- */
.lab-pop { inset:0; background:rgba(30,42,90,.55); z-index:20; }
.lab-pop > * { position:absolute; }
.pop-card { left:50%; top:60px; width:760px; margin-left:-380px; background:#FFFDF5; padding:70px 40px 150px; text-align:center;
box-shadow:0 -6px 0 var(--navy),0 6px 0 var(--navy),-6px 0 0 var(--navy),6px 0 0 var(--navy),10px 16px 0 var(--navy); }
.pop-ribbon { position:absolute; left:50%; top:-34px; transform:translateX(-50%); background:var(--coral); color:#fff; font-family:var(--font-head); font-size:36px; padding:10px 34px 6px; white-space:nowrap;
box-shadow:0 -4px 0 var(--navy),0 4px 0 var(--navy),-4px 0 0 var(--navy),4px 0 0 var(--navy); }
.pop-trophy { width:220px; height:220px; image-rendering:pixelated; }
.pop-card p, .lab-cheer p { font-family:var(--font-head); font-size:46px; line-height:1.35; margin-top:10px; }
.lab-cheer { background:#FFFDF5; text-align:center; padding:30px; display:flex; flex-direction:column; align-items:center; justify-content:center;
box-shadow:0 -6px 0 var(--navy),0 6px 0 var(--navy),-6px 0 0 var(--navy),6px 0 0 var(--navy),10px 16px 0 var(--navy); }
.lab-cheer img { width:200px; height:200px; image-rendering:pixelated; }
.lab-cheer b.big { font-size:64px; }
.lab-cheer.guide p { font-size:44px; }
.lab-cheer small { display:block; margin-top:22px; font-size:30px; line-height:1.5; background:#FFF3C4; padding:12px 26px; }
/* ---------- 증상 카드 ---------- */
.lab-card { border:0; padding:0; background:transparent; cursor:pointer; perspective:900px; }
.lab-card > span { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; transition:transform .45s;
box-shadow:0 -5px 0 var(--navy),0 5px 0 var(--navy),-5px 0 0 var(--navy),5px 0 0 var(--navy),6px 10px 0 var(--navy); }
.cd-back { background:var(--blue); display:flex; align-items:center; justify-content:center; }
.cd-back span { width:150px; height:240px; border:5px dashed var(--sky); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:90px; color:var(--yellow); }
.cd-front { background:#fff; transform:rotateY(180deg); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; padding:12px 8px 8px; }
.cd-front .sym-c { width:152px; height:146px; } .cd-front .sym-c img { height:146px; }
.cd-front b { font-family:var(--font-head); font-weight:400; font-size:24px; text-align:center; line-height:1.2; word-break:keep-all; }
/* 그림을 먼저 보여 주고, 누르면 증상 이름 (팀 점검 11/8) */
.lab-card .cd-front { transform:none; }
.cd-name { height:66px; flex:none; display:flex; align-items:center; justify-content:center; width:100%; border-top:4px dashed var(--sky); padding-top:6px; }
.cd-name i { font-style:normal; font-size:40px; color:var(--blue); }
.cd-name em { font-style:normal; display:none; }
.lab-card.seen .cd-name i { display:none; } .lab-card.seen .cd-name em { display:block; animation:pxpop .35s ease-out; }
.lab-card.seen .cd-name { border-top-color:transparent; }
@keyframes pxpop { from { scale:.6; opacity:0; } to { scale:1; opacity:1; } }
/* 장소 미션 3가지 */
.px-steps { display:flex; gap:8px; margin-top:8px; }
.px-steps i { font-style:normal; font-family:var(--font-head); font-size:20px; padding:3px 10px 1px; background:#E8EEF8; color:var(--navy); border:3px solid var(--navy); opacity:.75; }
.px-steps i.cur { background:var(--yellow); opacity:1; }
.px-steps i.ok { background:#D8EED8; opacity:1; }
.lab-card:not(.seen) { animation:cardsoft 2.2s ease-in-out infinite; }
@keyframes cardsoft { 50% { translate:0 -6px; } }
.lab-card.sel > span { outline:6px solid var(--yellow); outline-offset:4px; }
.px-btn.did:not(.off)::before { content:'✓'; position:absolute; right:-6px; top:-14px; width:34px; height:34px; border-radius:50%; background:var(--green); color:#fff; font-size:22px; display:flex; align-items:center; justify-content:center; z-index:2; }
/* ---------- 대처 방법 ---------- */
.cope-band { white-space:nowrap; font-family:var(--font-head); font-size:44px; padding:14px 40px 10px; background:var(--yellow);
box-shadow:0 -5px 0 var(--navy),0 5px 0 var(--navy),-5px 0 0 var(--navy),5px 0 0 var(--navy); }
.lab-cope.severe .cope-band { background:var(--coral); color:#fff; }
.cope-band.sky { background:var(--sky-l, #D7ECFB); }
.lab-cope.severe .cope-band b.lc { color:var(--yellow); }
.cope-step { background:#fff; display:flex; flex-direction:column; align-items:center; gap:12px; padding:22px 16px;
box-shadow:0 -5px 0 var(--navy),0 5px 0 var(--navy),-5px 0 0 var(--navy),5px 0 0 var(--navy),8px 13px 0 var(--navy); }
.cope-step .num { width:62px; height:62px; background:var(--yellow); font-family:var(--font-head); font-size:38px; display:flex; align-items:center; justify-content:center;
box-shadow:0 -3px 0 var(--navy),0 3px 0 var(--navy),-3px 0 0 var(--navy),3px 0 0 var(--navy); }
.lab-cope.severe .cope-step .num { background:var(--coral); color:#fff; }
.cope-step img { width:330px; height:330px; image-rendering:pixelated; }
.cope-step b { font-family:var(--font-head); font-weight:400; font-size:34px; text-align:center; }
.cope-step.glow::after { content:''; position:absolute; inset:-14px; pointer-events:none; animation:stepglow .6s ease-in-out 2; }
@keyframes stepglow { 0%, 100% { box-shadow:none; } 50% { box-shadow:0 0 0 8px var(--yellow),0 0 30px 10px rgba(245,200,66,.75); } }
.quiz-arrow { font-family:var(--font-head); font-size:90px; color:var(--coral-d); }
.cope-arrow { width:34px; height:52px; font-size:0; background:var(--navy); clip-path:polygon(0 0, 100% 50%, 0 100%); }
.lab-cope.severe .cope-arrow { background:var(--coral-d); }
/* ---------- 기억 체크 ---------- */
.lab-quiz .lab-board { touch-action:none; }
.quiz-sub { text-align:center; font-family:var(--font-head); font-size:34px; }
.quiz-tray { background:rgba(232,225,211,.8); box-shadow:inset 0 0 0 4px #CFC2B0; }
.quiz-group { padding:12px 18px; }
.quiz-group span { display:inline-block; font-family:var(--font-head); font-size:30px; padding:4px 20px 2px; box-shadow:0 -3px 0 var(--navy),0 3px 0 var(--navy),-3px 0 0 var(--navy),3px 0 0 var(--navy); }
.quiz-group.light { background:rgba(255,243,196,.92); } .quiz-group.light span { background:var(--yellow); }
.quiz-group.severe { background:rgba(251,227,217,.95); } .quiz-group.severe span { background:var(--coral); color:#fff; }
.quiz-slot { border:5px dashed #8A93AE; background:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; }
.quiz-slot em { font-style:normal; font-family:var(--font-head); font-size:60px; color:#A8A08F; }
.quiz-slot.ok { border:5px solid var(--green); }
.quiz-slot.glow { animation:stepglow .6s ease-in-out 3; }
.quiz-piece { border:0; padding:10px 6px 8px; background:#fff; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:grab; touch-action:none; z-index:4;
transition:left .25s, top .25s, width .25s, height .25s;
box-shadow:0 -4px 0 var(--navy),0 4px 0 var(--navy),-4px 0 0 var(--navy),4px 0 0 var(--navy),5px 8px 0 var(--navy); }
.quiz-piece img { width:72%; flex:1; min-height:0; object-fit:contain; image-rendering:pixelated; pointer-events:none; }
.quiz-piece b { font-family:var(--font-head); font-weight:400; font-size:21px; line-height:1.15; text-align:center; word-break:keep-all; pointer-events:none; }
.quiz-piece.drag { transition:none; z-index:10; cursor:grabbing; scale:1.06; }
.quiz-piece.sel { outline:6px solid var(--yellow); outline-offset:3px; }
.quiz-piece.placed { cursor:default; z-index:3; box-shadow:0 0 0 5px var(--green); }
.quiz-piece:disabled { opacity:1; }
/* ---------- 공통 움직임 ---------- */
.bob { animation:bob 2.4s ease-in-out infinite; }
/* 숨쉬기: 그림 움직임이 없는 자세에도 살짝 (발끝 기준으로 위아래) */
.breathe img { transform-origin:50% 100%; animation:breathe 2.8s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform:scale(1,1); } 50% { transform:scale(1.012,.985); } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) {
.px-btn.shine::after, .px-btn.beat, .lab-spot.pulse, .lab-spot.pulse > i, .lab-spot.pulse::before, .lab-spot.pulse > img, .lab-lens.pulse, .mites i, .mites em, .lab-card:not(.seen), .bob, .breathe img { animation:none !important; }
.lab-card > span { transition:none; }
}
.lab-deco { pointer-events:none; z-index:1; }
.lab-spot { z-index:2; } /* 물건은 꾸밈 덤불 앞에 */
.lab-deco img { width:100%; height:100%; image-rendering:pixelated; display:block; }
/* 말풍선 줄바꿈 고르게 (증상 카드 2줄 배치, 11/9) */
.px-bub.bal .px-bub-txt { text-wrap:balance; word-break:keep-all; }
/* 증상 카드 화면 네모 줄이기 (11/9) */
.sym-title { white-space:nowrap; font-family:var(--font-head); font-size:46px; color:var(--navy); display:flex; align-items:baseline; gap:22px;
padding:10px 40px; background:radial-gradient(closest-side, rgba(255,250,240,.96) 70%, rgba(255,250,240,0)); /* 테두리 없이 뒤만 살짝 밝게 */ }
.sym-cnt { font-family:var(--font-head); font-size:30px; color:#fff; background:var(--navy); border-radius:999px; padding:8px 22px 6px; }
.sym-cnt b.lc { font-size:34px; color:var(--yellow); }
.screen-S36-3 .lab-card > span { border-radius:22px; box-shadow:0 0 0 3px rgba(30,42,90,.18), 0 8px 18px rgba(30,42,90,.12); }
.screen-S36-3 .cd-name { border-top:0; }
.screen-S36-3 .cd-name i { color:rgba(30,42,90,.35); }
.screen-S36-3 .lab-card.sel > span { outline:none; box-shadow:0 0 0 5px var(--yellow), 0 8px 18px rgba(30,42,90,.14); }
/* 말풍선: 계단 모양으로 둥근 픽셀 모서리 (11/9) — 연구소 말풍선 모두 */
.px-bub { background:none; box-shadow:none; border:25px solid transparent; padding:6px 6px 0;
border-image:url("data:image/svg+xml,") 5 fill / 25px stretch;
filter:drop-shadow(6px 7px 0 rgba(30,42,90,.22)); }
.px-bub .px-name { top:-44px; left:-4px; }
.px-bub.tail-bl .t1 { bottom:-41px; } .px-bub.tail-bl .t2 { bottom:-51px; }
.px-bub.tail-br .t1 { bottom:-41px; } .px-bub.tail-br .t2 { bottom:-51px; }
.px-bub.tail-l .t1 { left:-41px; } .px-bub.tail-l .t2 { left:-51px; }
/* 픽셀 말풍선 꼬리: 흰 바탕 + 남색 테두리 계단 세모, 말풍선과 이어지게 (11/9) */
.px-bub i.t2 { display:none; }
.px-bub.tail-bl i.t1, .px-bub.tail-br i.t1 { width:48px; height:48px; top:auto; bottom:-68px; background:url("data:image/svg+xml,") no-repeat center/100% 100%; }
.px-bub.tail-br i.t1 { transform:scaleX(-1); }
.px-bub.tail-l i.t1 { width:48px; height:48px; left:-68px; top:28px; bottom:auto; background:url("data:image/svg+xml,") no-repeat center/100% 100%; }
/* 대처 방법 카드: 증상 카드와 같은 둥근 카드 · 번호는 둥근 배지 (11/9) */
.lab-cope .cope-step { border-radius:24px; box-shadow:0 0 0 3px rgba(30,42,90,.18), 0 8px 18px rgba(30,42,90,.12); padding:20px 16px 18px; gap:6px; }
.lab-cope .cope-step .num { width:56px; height:56px; border-radius:50%; box-shadow:none; font-size:34px; padding-top:3px; }
.lab-cope .cope-step img { width:300px; height:300px; }
.lab-cope .cope-step b { font-size:32px; }
.lab-cope .cope-step.glow::after { border-radius:30px; }
/* 캐릭터 좌우 뒤집기 (11/9) */
.lab-char.flip img { transform:scaleX(-1); }
/* 가벼운 · 위급 구분 (11/9): 같은 틀, 카드 테두리·바탕 색만 다르게 + 위급은 응급 표시 */
.lab-cope.light .cope-step { background:#FFFBEA; box-shadow:0 0 0 4px #F2CF5B, 0 8px 18px rgba(30,42,90,.12); }
.lab-cope.severe .cope-step { background:#FFF3EF; box-shadow:0 0 0 4px #EE8A6E, 0 8px 18px rgba(201,87,58,.18); }
.cope-alert { display:flex; align-items:center; gap:8px; background:var(--coral-d); color:#fff; font-family:var(--font-head); font-size:30px; padding:10px 20px 8px 16px; border-radius:999px;
box-shadow:0 0 0 4px #fff, 0 6px 0 rgba(30,42,90,.18); animation:alertblink 1.4s ease-in-out infinite; }
.cope-alert svg { width:34px; height:34px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
@keyframes alertblink { 50% { filter:brightness(1.15); transform:scale(1.04); } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .cope-alert { animation:none; } }
/* 응급 표시 더 크게·진하게 (11/9) */
.cope-alert { font-size:44px; gap:12px; padding:14px 30px 12px 22px; background:#D93A25; box-shadow:0 0 0 5px #fff, 0 0 0 9px #D93A25, 0 10px 0 9px rgba(30,42,90,.2); animation:alertpulse 1.2s ease-in-out infinite; }
.cope-alert svg { width:48px; height:48px; stroke-width:2.6; }
@keyframes alertpulse { 0%,100% { box-shadow:0 0 0 5px #fff, 0 0 0 9px #D93A25, 0 10px 0 9px rgba(30,42,90,.2); } 50% { box-shadow:0 0 0 5px #fff, 0 0 0 9px #D93A25, 0 0 0 22px rgba(217,58,37,.28); } }
/* 위급 카드 위쪽에 빨간 띠 */
.lab-cope.severe .cope-step { overflow:hidden; padding-top:30px; }
.lab-cope.severe .cope-step::before { content:''; position:absolute; left:0; right:0; top:0; height:14px; background:repeating-linear-gradient(-45deg,#D93A25 0 16px,#F07A5E 16px 32px); }
/* 픽셀 경광등 (11/9) */
.cope-siren { width:128px; height:104px; }
.cope-siren svg { width:100%; height:100%; display:block; overflow:visible; }
.cope-siren .lamp { animation:sirenlamp .8s steps(1) infinite; }
.cope-siren .rays { animation:sirenrays .8s steps(1) infinite; }
.cope-siren.r .lamp, .cope-siren.r .rays { animation-delay:.4s; }
.cope-siren::after { content:''; position:absolute; left:50%; top:52%; width:150px; height:150px; margin:-75px 0 0 -75px; border-radius:50%;
background:radial-gradient(closest-side, rgba(229,64,43,.45), rgba(229,64,43,0)); animation:sirenglow .8s steps(1) infinite; pointer-events:none; }
.cope-siren.r::after { animation-delay:.4s; }
@keyframes sirenlamp { 0% { filter:none; } 50% { filter:brightness(1.35) saturate(1.2); } }
@keyframes sirenrays { 0% { opacity:1; } 50% { opacity:0; } }
@keyframes sirenglow { 0% { opacity:1; } 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .cope-siren .lamp, .cope-siren .rays, .cope-siren::after { animation:none; } }
/* 원인 결과 창 안쪽 네모 줄이기 (11/9): 안쪽 칸은 둥글고 옅은 테두리, 그림 칸도 둥글게 */
.rs-screen { border-radius:16px; }
.rs-box { border:0; border-radius:20px; box-shadow:0 0 0 3px rgba(30,42,90,.16); padding:16px 24px; }
.rs-head img { border:0; border-radius:22px; box-shadow:0 0 0 3px rgba(30,42,90,.16); }
/* 원인 결과 창: 그림 칸을 조금 줄여 아래 버튼 자리 확보 (11/9) */
.rs-head img { width:118px; height:118px; }
.rs-head b { font-size:60px; }
/* 원인 결과 창 콤팩트 (11/9): 폭 850, 증상 그림 작게, 아래에 아이 얼굴 + '알겠어요!' */
.lab-result { gap:12px; padding:18px 22px 14px; }
.rs-screen { padding:18px 22px; gap:12px; }
.rs-head { gap:18px; }
.rs-head img { width:104px; height:104px; }
.rs-head small { font-size:24px; }
.rs-head b { font-size:56px; line-height:1.05; }
.rs-box { padding:12px 20px 14px; }
.rs-box h3 { font-size:26px; margin-bottom:6px; }
.rs-syms { gap:28px; }
.rs-syms .sym-c { width:110px; height:106px; } .rs-syms .sym-c img { height:106px; }
.rs-syms b { font-size:27px; }
.rs-box li { font-size:26px; padding-left:36px; }
.rs-box li::before { font-size:28px; }
.rs-ok { margin-top:auto; align-self:flex-end; display:flex; align-items:center; gap:0; border:0; background:none; padding:0; cursor:pointer; }
.rs-ok[hidden] { display:none; }
.rs-kid { width:96px; height:96px; border-radius:50%; background:#FFF3C4; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; position:relative; z-index:1;
box-shadow:0 0 0 5px var(--navy); }
.rs-kid img { width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.rs-ok-btn { margin-left:-18px; padding:14px 30px 12px 38px; background:var(--yellow); color:var(--navy); font-family:var(--font-head); font-size:34px; white-space:nowrap;
box-shadow:0 -5px 0 var(--navy),0 5px 0 var(--navy),-5px 0 0 var(--navy),5px 0 0 var(--navy),0 11px 0 var(--navy); }
.rs-ok:active .rs-ok-btn { filter:brightness(.92); }
.rs-ok.show { animation:pxpop .35s ease-out; }
.lab-result { height:auto !important; top:50% !important; transform:translateY(-50%); }
.rs-ok { margin-top:2px; }
/* 증상 칸: 왼쪽 '증상' 배지 + 그림·글은 칸 너비에 맞춰 고르게 (11/9) */
.rs-symbox { display:flex; align-items:center; gap:18px; padding:12px 20px; }
.rs-badge { flex:none; font-family:var(--font-head); font-size:26px; color:#fff; background:var(--blue); border-radius:999px; padding:8px 18px 6px; }
.rs-symbox .rs-syms { flex:1; justify-content:space-evenly; gap:16px; }
/* '알겠어요!': 증상 아이 얼굴 + 픽셀 말풍선 (원인마다 여자·남자아이 번갈아, 11/9) */
.rs-ok { gap:46px; align-items:center; }
.rs-kid { width:110px; height:110px; background:#FFF3C4; box-shadow:0 0 0 5px var(--navy); }
.rs-kid img { image-rendering:pixelated; object-fit:cover; object-position:center top; }
.rs-say { position:relative; font-family:var(--font-head); font-size:34px; line-height:1.2; color:var(--navy); padding:2px 10px 0; }
.rs-say .t1 { top:14px !important; }
.rs-ok:hover .rs-say, .rs-ok:active .rs-say { filter:brightness(.97); }
.rs-ok .rs-ok-btn { display:none; }
/* 오른쪽 꼬리 말풍선 (아이가 오른쪽에 있을 때, 11/9) */
.px-bub.tail-r i.t2 { display:none; }
.px-bub.tail-r i.t1 { width:48px; height:48px; right:-68px; left:auto; top:28px; bottom:auto; transform:scaleX(-1); }
.px-bub.tail-r i.t1 { background:url("data:image/svg+xml,") no-repeat center/100% 100%; }
/* 대처 카드 안쪽 위아래 여백 맞추기 (11/9): 내용을 카드 세로 가운데로 */
.lab-cope .cope-step { justify-content:center; }
.lab-cope.severe .cope-step { padding-top:32px; padding-bottom:18px; }
/* ===== 기억 체크 새 구도 (11/9): 좌우 구분 · 둥근 카드 · 대처 화면과 같은 부품 ===== */
.lab-quiz .quiz-sub { width:auto; white-space:nowrap; font-size:30px; background:#FFFDF5; border-radius:999px; padding:8px 34px 6px;
box-shadow:0 0 0 3px rgba(30,42,90,.16), 0 4px 10px rgba(30,42,90,.08); }
.quiz-deck { background:rgba(255,253,245,.92); border-radius:24px; box-shadow:0 0 0 4px #A9C8EC, 0 8px 18px rgba(30,42,90,.10); }
.quiz-deck span, .lab-quiz .quiz-group span { position:absolute; left:22px; top:16px; font-family:var(--font-head); font-size:28px; padding:6px 22px 4px; border-radius:999px; box-shadow:none; }
.quiz-deck span { background:#D8EAFB; color:var(--navy); }
.lab-quiz .quiz-group { padding:0; border-radius:24px; }
.lab-quiz .quiz-group.light { background:#FFFBEA; box-shadow:0 0 0 4px #F2CF5B, 0 8px 18px rgba(30,42,90,.10); }
.lab-quiz .quiz-group.severe { background:#FFF3EF; box-shadow:0 0 0 4px #EE8A6E, 0 8px 18px rgba(201,87,58,.14); }
.lab-quiz .quiz-group.light span { background:var(--yellow); color:var(--navy); }
.lab-quiz .quiz-group.severe span { background:var(--coral); color:#fff; }
.lab-quiz .quiz-tray { background:transparent; border-radius:20px; box-shadow:inset 0 0 0 3px rgba(138,147,174,.35); }
.lab-quiz .quiz-slot { border:4px dashed #B5AE9E; border-radius:20px; background:rgba(255,255,255,.75); }
.lab-quiz .quiz-slot em { font-size:56px; color:#C4BBA8; }
.lab-quiz .quiz-slot.ok { border:4px solid var(--green); }
.quiz-arr { width:30px; height:46px; }
.quiz-arr.light { background:var(--navy); } .quiz-arr.severe { background:var(--coral-d); }
.lab-quiz .quiz-piece { border-radius:20px; background:#fff; padding:14px 8px 10px; gap:6px;
box-shadow:0 0 0 3px rgba(30,42,90,.20), 0 6px 14px rgba(30,42,90,.14); }
.lab-quiz .quiz-piece img { width:84%; }
.lab-quiz .quiz-piece b { font-size:23px; line-height:1.2; min-height:2.4em; display:flex; align-items:center; justify-content:center; }
.lab-quiz .quiz-piece.sel { outline:6px solid var(--yellow); outline-offset:3px; }
.lab-quiz .quiz-piece.placed { box-shadow:0 0 0 4px var(--green), 0 4px 10px rgba(30,42,90,.10); }
/* 기억 체크 묶음 상자 옅게 (11/9): 바탕은 더 투명하게, 테두리도 한 단계 옅게 */
.lab-quiz .quiz-group.light { background:rgba(255,251,234,.62); box-shadow:0 0 0 3px rgba(242,207,91,.75), 0 6px 14px rgba(30,42,90,.06); }
.lab-quiz .quiz-group.severe { background:rgba(255,243,239,.62); box-shadow:0 0 0 3px rgba(238,138,110,.6), 0 6px 14px rgba(201,87,58,.06); }
.quiz-deck { background:rgba(255,253,245,.62); box-shadow:0 0 0 3px rgba(169,200,236,.8), 0 6px 14px rgba(30,42,90,.06); }
.lab-quiz .quiz-slot { background:rgba(255,255,255,.72); }
/* 기억 체크 상자: 처음보다 살짝만 옅게 (11/9 다시) */
.lab-quiz .quiz-group.light { background:rgba(255,251,234,.86); box-shadow:0 0 0 4px rgba(242,207,91,.9), 0 8px 18px rgba(30,42,90,.08); }
.lab-quiz .quiz-group.severe { background:rgba(255,243,239,.86); box-shadow:0 0 0 4px rgba(238,138,110,.8), 0 8px 18px rgba(201,87,58,.1); }
.quiz-deck { background:rgba(255,253,245,.86); box-shadow:0 0 0 4px rgba(169,200,236,.9), 0 8px 18px rgba(30,42,90,.08); }
.lab-quiz .quiz-slot { background:rgba(255,255,255,.8); }
/* 기억 체크 완성 후 (11/9): 그림 카드 상자 사라짐 → 대처 칸 묶음을 가운데로 (0.86배) */
.lab-quiz .quiz-deck, .lab-quiz .quiz-tray { transition:opacity .45s; }
.lab-quiz .quiz-deck.out, .lab-quiz .quiz-tray.out { opacity:0; pointer-events:none; }
.lab-board > .quiz-wrap { left:0; top:0; width:1600px; height:900px; transform-origin:0 0; transition:transform .7s cubic-bezier(.3,.8,.3,1); pointer-events:none; z-index:3; }
.quiz-wrap > * { position:absolute; }
.quiz-wrap.go { transform:translate(-163px, 18px) scale(.86); }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .lab-board > .quiz-wrap { transition:none; } }
/* ===== 기억 체크 디자인 점검 반영 (11/9) ===== */
/* 이름표: 상자 위 테두리에 걸치기, 위급 이름표는 진한 코랄(글씨 대비) */
.quiz-deck span, .lab-quiz .quiz-group span { top:-22px; left:26px; font-size:26px; padding:6px 22px 4px; box-shadow:0 0 0 3px #FFFDF5; }
.lab-quiz .quiz-group.severe span { background:#C9573A; color:#fff; }
.quiz-deck span { background:#A9C8EC; }
/* 빈칸: 옅은 남색 회색 점선 */
.lab-quiz .quiz-slot { border-color:#A9B1C9; }
.lab-quiz .quiz-slot em { color:#B9C0D4; }
.lab-quiz .quiz-tray { box-shadow:inset 0 0 0 3px rgba(169,177,201,.45); }
/* 고른 카드: 남색 굵은 테두리 + 살짝 떠오르기 (노랑은 '가벼운 증상' 색이라 쓰지 않아요) */
.lab-quiz .quiz-piece.sel { outline:5px solid var(--navy); outline-offset:3px; translate:0 -8px; box-shadow:0 0 0 3px rgba(30,42,90,.2), 0 14px 22px rgba(30,42,90,.22); }
/* 맞힌 카드: 묶음 색 테두리 + 초록 ✓ 배지 */
.lab-quiz .quiz-piece.placed { overflow:visible; }
.lab-quiz .quiz-piece.placed.light { box-shadow:0 0 0 4px #F2CF5B, 0 4px 10px rgba(30,42,90,.10); }
.lab-quiz .quiz-piece.placed.severe { box-shadow:0 0 0 4px #EE8A6E, 0 4px 10px rgba(30,42,90,.10); }
.lab-quiz .quiz-piece.placed::after { content:'✓'; position:absolute; right:-12px; top:-12px; width:40px; height:40px; border-radius:50%; background:var(--green); color:#fff;
font-family:var(--font-head); font-size:26px; line-height:42px; text-align:center; box-shadow:0 0 0 3px #fff; }
.lab-quiz .quiz-slot.ok { border-color:transparent; }
/* 다 맞힌 뒤: 대처 칸 묶음을 오른쪽으로 모으고 0.92배 (왼쪽엔 냥박사) */
.quiz-wrap.go { transform:translate(78px, 2px) scale(.92); }
.lab-quiz .quiz-sub { transition:opacity .4s; }
.lab-quiz .quiz-sub.out { opacity:0; }
/* ===== 기억 체크 단순하게 (11/9): 상자 없애기 — 카드 6장 · 빈칸 6개 · 이름표 2개만 ===== */
.lab-quiz .quiz-deck { background:none; box-shadow:none; }
.lab-quiz .quiz-deck span { display:none; }
.lab-quiz .quiz-tray { box-shadow:inset 0 0 0 2px rgba(169,177,201,.28); background:rgba(255,255,255,.18); }
.lab-quiz .quiz-group.light, .lab-quiz .quiz-group.severe { background:none; box-shadow:none; }
.lab-quiz .quiz-group span { top:calc(50% - 160px); left:136px; box-shadow:none; }
.lab-quiz .quiz-group.light ~ .quiz-slot { }
.lab-quiz .quiz-slot { background:rgba(255,255,255,.7); }
.lab-quiz .quiz-slot.light { border-color:#E2BE4A; background:rgba(255,246,206,.88); }
.lab-quiz .quiz-slot.light em { color:#D9B84A; }
.lab-quiz .quiz-slot.severe { border-color:#E39780; background:rgba(253,231,223,.88); }
.lab-quiz .quiz-slot.severe em { color:#E0957F; }
.lab-quiz .lab-dim.cream { background:rgba(255,248,238,.74); } /* 상자가 없으니 배경을 조금 더 눌러요 */
.lab-quiz .quiz-group span { left:122px; }
.lab-quiz .quiz-slot.light { background:#FFF6D2; } .lab-quiz .quiz-slot.severe { background:#FDE8E0; }
.lab-quiz .quiz-tray { background:rgba(255,255,255,.35); }
/* ===== 기억 체크 (11/9 다시): 그림 카드 상자만 없애고 대처 칸 묶음 상자는 살려요 ===== */
.lab-quiz .quiz-group.light { background:rgba(255,251,234,.86); box-shadow:0 0 0 4px rgba(242,207,91,.9), 0 8px 18px rgba(30,42,90,.08); }
.lab-quiz .quiz-group.severe { background:rgba(255,243,239,.86); box-shadow:0 0 0 4px rgba(238,138,110,.8), 0 8px 18px rgba(201,87,58,.1); }
.lab-quiz .quiz-group span { top:-22px; left:26px; box-shadow:0 0 0 3px #FFFDF5; }
.lab-quiz .quiz-slot.light, .lab-quiz .quiz-slot.severe { background:rgba(255,255,255,.8); border-color:#A9B1C9; }
.lab-quiz .quiz-slot.light em, .lab-quiz .quiz-slot.severe em { color:#B9C0D4; }
.lab-quiz .lab-dim.cream { background:rgba(255,248,238,.66); }
/* 안내 문구: 그림 카드 위, 두 줄(큰 글 + 작은 도움말) */
.lab-quiz .quiz-sub { white-space:nowrap; text-align:center; font-size:28px; line-height:1.25; padding:8px 30px 7px; }
.lab-quiz .quiz-sub small { display:block; font-family:var(--font-body); font-size:18px; color:var(--muted); }
.lab-quiz .quiz-sub { font-size:30px; padding:10px 34px 8px; }
.lab-quiz .quiz-sub small { font-size:21px; margin-top:2px; color:#4A5578; }
.quiz-wrap.go { transform:translate(78px, -4px) scale(.92); }
/* ===== 기억 체크 시안: 두 판 (11/9) ===== */
.lab-quiz.rounds .lab-dim.cream { background:rgba(255,248,238,.62); }
.quiz-step { font-size:24px; }
.quiz-step b.lc { font-family:var(--font-head); color:var(--coral-d); }
.quiz-hint { text-align:center; font-family:var(--font-head); font-size:34px; color:var(--navy); text-shadow:0 2px 0 #FFFDF5, 0 0 12px #FFFDF5; transition:opacity .4s; }
.quiz-hint b.lc { color:var(--coral-d); font-weight:400; }
.quiz-hint.out, .quiz-step.out, .quiz-hand.out { opacity:0; transition:opacity .4s; }
.quiz-band { border-radius:28px; transform-origin:0 0; transition:transform .7s cubic-bezier(.3,.8,.3,1), opacity .4s; }
.quiz-band > * { position:absolute; }
.quiz-band.light { background:rgba(255,251,234,.9); box-shadow:0 0 0 4px #F2CF5B, 0 10px 22px rgba(30,42,90,.10); }
.quiz-band.severe { background:rgba(255,243,239,.9); box-shadow:0 0 0 4px #EE8A6E, 0 10px 22px rgba(201,87,58,.12); }
.qb-tag { top:-24px; left:30px; font-family:var(--font-head); font-size:28px; padding:6px 24px 4px; border-radius:999px; box-shadow:0 0 0 3px #FFFDF5; }
.quiz-band.light .qb-tag { background:var(--yellow); color:var(--navy); }
.quiz-band.severe .qb-tag { background:#C9573A; color:#fff; }
.quiz-band .quiz-slot { border:4px dashed #A9B1C9; border-radius:24px; background:rgba(255,255,255,.85); display:block; }
.quiz-band .quiz-slot.light { border-color:#E2BE4A; } .quiz-band .quiz-slot.severe { border-color:#E39780; }
.quiz-band .quiz-slot.ok { border-color:transparent; background:none; }
.quiz-band .quiz-slot.glow { animation:stepglow .6s ease-in-out 2; }
.qb-num { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-size:32px; padding-top:3px; z-index:6; box-shadow:0 0 0 4px #FFFDF5; }
.qb-num.light { background:var(--yellow); color:var(--navy); } .qb-num.severe { background:var(--coral); color:#fff; }
.quiz-band .quiz-arr { width:30px; height:46px; }
.quiz-hand { border-radius:30px; background:rgba(255,253,245,.7); box-shadow:inset 0 0 0 3px rgba(169,177,201,.35); }
.lab-quiz.rounds .quiz-piece { border-radius:22px; padding:16px 10px 12px; gap:8px; box-shadow:0 0 0 3px rgba(30,42,90,.18), 0 8px 16px rgba(30,42,90,.14); }
.lab-quiz.rounds .quiz-piece img { width:86%; }
.lab-quiz.rounds .quiz-piece b { font-size:26px; line-height:1.2; min-height:2.4em; display:flex; align-items:center; justify-content:center; }
.lab-quiz.rounds .quiz-piece.sel { outline:5px solid var(--navy); outline-offset:3px; translate:0 -10px; }
.lab-quiz.rounds .quiz-piece.placed { z-index:5; }
.lab-quiz.rounds .quiz-piece.placed b { font-size:30px; }
.lab-quiz.rounds .quiz-piece.placed.light { box-shadow:0 0 0 4px #F2CF5B, 0 4px 10px rgba(30,42,90,.10); }
.lab-quiz.rounds .quiz-piece.placed.severe { box-shadow:0 0 0 4px #EE8A6E, 0 4px 10px rgba(30,42,90,.10); }
.lab-quiz.rounds .quiz-piece.placed::after { content:none; }
.quiz-band.away { opacity:0; pointer-events:none; }
.quiz-band.sum-top { transform:translate(420px, -40px) scale(.8); }
.quiz-band.sum-bot { transform:translate(420px, 266px) scale(.8); }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .quiz-band { transition:none; } }
.quiz-band.sum-top { transform:translate(370px, -52px) scale(.8); }
.quiz-band.sum-bot { transform:translate(370px, 258px) scale(.8); }
.quiz-hand { background:rgba(255,253,245,.78); }
.quiz-hand { transition:left .35s, width .35s, opacity .4s; }
/* 기억 체크 시안 2 (11/9): 냥박사 왼쪽 · 오른쪽 칸 띠 + 카드 받침 */
.lab-quiz.rounds .quiz-piece { padding:12px 8px 10px; gap:6px; }
.lab-quiz.rounds .quiz-piece b { font-size:24px; }
.lab-quiz.rounds .quiz-piece.placed b { font-size:26px; }
.quiz-band.sum-top { transform:translate(80px, -10px) scale(.8); }
.quiz-band.sum-bot { transform:translate(80px, 290px) scale(.8); }
/* 기억 체크 시안 2 (11/9): 냥박사 왼쪽 · 오른쪽 칸 띠 + 카드 받침 */
.lab-quiz.rounds .quiz-piece { padding:12px 8px 10px; gap:6px; }
.lab-quiz.rounds .quiz-piece b { font-size:24px; }
.lab-quiz.rounds .quiz-piece.placed b { font-size:26px; }
.quiz-band.sum-top { transform:translate(80px, -10px) scale(.8); }
.quiz-band.sum-bot { transform:translate(80px, 290px) scale(.8); }
.lab-quiz.rounds .quiz-piece:not(.placed) { padding:12px 6px 10px; }
.lab-quiz.rounds .quiz-piece:not(.placed) b { font-size:22px; letter-spacing:-.03em; }
.quiz-band.sum-top { transform:translate(80px, -26px) scale(.8); }
.quiz-band.sum-bot { transform:translate(80px, 274px) scale(.8); }
/* 다 맞힌 뒤 (11/9): 두 띠 오른쪽 끝 = 화면 오른쪽 48px, 띠 사이 56px */
.quiz-band.sum-top { transform:translate(198px, -36px) scale(.8); }
.quiz-band.sum-bot { transform:translate(198px, 292px) scale(.8); }
.quiz-band.sum-top { transform:translate(90px, -36px) scale(.8); }
.quiz-band.sum-bot { transform:translate(90px, 292px) scale(.8); }
/* ===== 11/10 사용자 점검 반영 ===== */
/* 1 활동 고르기: 카드 작게 · 모서리 살짝 둥글게 */
.lab-choice { border-radius:28px; padding:22px 22px 26px; gap:4px; box-shadow:0 0 0 5px var(--navy), 0 10px 0 5px rgba(30,42,90,.22); }
.lab-choice .ch-img { width:420px; height:320px; }
.lab-choice b { font-size:44px; }
.lab-choice small { font-size:25px; }
.lab-choice .px-btn { margin-top:12px; font-size:30px; }
/* 2 찾은 원인 칸: 작게 · 둥글게 · 연회색 입체 칸 */
.lab-tray { display:flex; gap:22px; padding:14px 26px 10px; border-radius:22px; background:rgba(255,253,245,.95); box-shadow:0 0 0 4px var(--navy), 0 8px 0 4px rgba(30,42,90,.18); }
.tray-slot { gap:4px; width:100px; }
.ts-box { width:92px; height:86px; border-radius:16px; background:linear-gradient(#F6F7FA,#ECEEF3); box-shadow:inset 0 1px 0 #fff, 0 4px 0 #D3D7E0, 0 0 0 2px #DDE0E7; }
.ts-box span { font-size:44px; color:#B4BAC6; }
.ts-box img { width:74px; height:74px; }
.tray-slot.done .ts-box { background:#fff; box-shadow:0 0 0 3px var(--green), 0 4px 0 #CFE3D2; }
.tray-slot b { height:26px; font-size:20px; line-height:26px; white-space:nowrap; }
/* 3 급식실 게시판: 오늘의 급식 */
.lab-menu { background:#FFFDF5; border-radius:6px; padding:16px 26px 12px; transform:rotate(-1.2deg); box-shadow:0 0 0 3px rgba(30,42,90,.75), 4px 7px 0 rgba(30,42,90,.22); }
.lab-menu::before, .lab-menu::after { content:''; position:absolute; top:-10px; width:22px; height:22px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 3px var(--navy); }
.lab-menu::before { left:22px; } .lab-menu::after { right:22px; }
.lab-menu h4 { text-align:center; font-family:var(--font-head); font-weight:400; font-size:30px; color:var(--navy); margin:0 0 6px; }
.lab-menu ul { list-style:none; margin:0; padding:8px 0 0; border-top:3px dashed rgba(30,42,90,.25); display:grid; grid-template-columns:1fr 1fr; gap:4px 26px; }
.lab-menu li { display:flex; align-items:baseline; gap:6px; font-family:var(--font-head); font-size:26px; color:var(--navy); white-space:nowrap; }
.lab-menu li em { font-style:normal; font-family:var(--font-body); font-size:20px; font-weight:700; color:var(--coral-d); }
.lab-menu small { display:block; margin-top:6px; text-align:center; font-size:17px; color:var(--muted); white-space:nowrap; }
/* 4 12가지 완료: 상자 없이 우승컵 + 후광 · 꼬리 없는 말풍선 */
.lab-trophy { display:flex; align-items:center; justify-content:center; }
.lab-trophy img { position:relative; width:250px; height:250px; image-rendering:pixelated; z-index:2; animation:trophyfloat 2.4s ease-in-out infinite; }
.tr-halo { position:absolute; inset:-60px; border-radius:50%; z-index:0;
background:repeating-conic-gradient(from 0deg, rgba(255,214,90,.55) 0 10deg, rgba(255,214,90,0) 10deg 22deg);
-webkit-mask:radial-gradient(closest-side, #000 35%, transparent 100%); mask:radial-gradient(closest-side, #000 35%, transparent 100%); animation:halospin 12s linear infinite; }
.tr-glow { position:absolute; inset:20px; border-radius:50%; z-index:1; background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,226,110,.7) 55%, rgba(255,226,110,0)); animation:haloglow 2.4s ease-in-out infinite; }
@keyframes halospin { to { transform:rotate(360deg); } }
@keyframes haloglow { 50% { transform:scale(1.08); opacity:.85; } }
@keyframes trophyfloat { 50% { translate:0 -8px; } }
.px-bub.tail-n i { display:none; }
.cheer-say { white-space:nowrap; text-align:center; font-family:var(--font-head); font-size:44px; line-height:1.35; padding:4px 22px 0; }
.cheer-say b.big { font-size:60px; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .tr-halo, .tr-glow, .lab-trophy img { animation:none; } }
/* 6·7 약속 카드 시작 · 이름 쓰기 (연구소 판으로, 11/10) */
.name-px { display:flex; align-items:center; gap:14px; padding:0 30px 0 36px; background:#fff; border-radius:24px; cursor:text;
box-shadow:0 0 0 5px var(--navy), 0 10px 0 5px rgba(30,42,90,.18); transition:box-shadow .2s; }
.name-px:focus-within { box-shadow:0 0 0 5px var(--navy), 0 0 0 14px rgba(245,200,66,.55), 0 10px 0 5px rgba(30,42,90,.18); }
.name-px input { flex:1; min-width:0; border:0; outline:0; background:transparent; font-family:var(--font-head); font-size:52px; color:var(--navy); user-select:text; -webkit-user-select:text; }
.name-px input::placeholder { font-family:var(--font-body); font-size:34px; color:#B4BAC6; }
.name-px .count { flex:none; font-family:var(--font-head); font-size:26px; color:#9AA1B8; }
.name-px.filled .count { color:var(--navy); }
.name-px.shake { animation:shake .3s ease-in-out 1; }
/* 챌린지 다이어리 (11/10) */
.lab-board > .dy-host { left:0; top:0; width:1600px; height:900px; z-index:3; }
/* 이름 쓰기: 말풍선 안 이름 칸 (11/10 다시) */
.name-bub { font-size:40px; }
.name-bub .px-bub-txt { line-height:1.4; padding:0 6px; }
.name-bub .t1 { top:120px !important; }
.name-bub .name-px { position:relative; height:96px; margin:20px 4px 6px; border-radius:18px; background:#FFFBEA; box-shadow:0 0 0 4px var(--navy), inset 0 4px 0 rgba(30,42,90,.08); }
.name-bub .name-px:focus-within { box-shadow:0 0 0 4px var(--navy), 0 0 0 12px rgba(245,200,66,.55); }
.name-bub .name-px input { font-size:46px; }
.name-bub .name-px input::placeholder { font-size:30px; }
/* 장소 화면 찾은 원인: 알약 배지 (11/10) */
/* 장소 안내판: 연구 과제 · 장소 표시 알약 배지, 가운데 정렬 (11/10) */
.place-panel > div { align-items:center; gap:6px; padding:12px 28px 14px; }
.place-panel small { display:inline-block; font-size:20px; line-height:1; color:#fff; background:var(--blue); border-radius:999px; padding:7px 18px 5px; }
.place-panel .px-steps { justify-content:center; gap:10px; margin-top:4px; }
.place-panel .px-steps i { border:0; border-radius:999px; padding:5px 14px 3px; font-size:19px; opacity:.5; box-shadow:none; }
.place-panel .px-steps i.pl-home { background:#F7D667; }
.place-panel .px-steps i.pl-school { background:#A9D3F5; }
.place-panel .px-steps i.pl-ground { background:#B5DFA6; }
.place-panel .px-steps i.cur { opacity:1; box-shadow:0 0 0 3px var(--navy); }
.place-panel .px-steps i.ok { opacity:.85; }
.place-panel .px-steps i.pl-school { background:#8CC0F0; } /* 하늘색 안내판 위에서도 보이게 한 단계 진하게 */
.place-panel .px-steps i { opacity:.6; }
.place-panel .px-steps i.cur { opacity:1; } .place-panel .px-steps i.ok { opacity:.9; }
.place-panel small { color:var(--blue); background:#fff; box-shadow:0 0 0 2px rgba(47,77,168,.35); } /* 연구 과제 배지: 연하게 (11/10) */
/* ===== 약속 고르기 (11/10 다시): 다이어리 '실천한 약속' 칸과 같은 모양 ===== */
.lab-rules .rl-box { display:flex; flex-direction:column; gap:16px; }
.rl-list { flex:1; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 0 0 4px var(--navy), 0 10px 0 4px rgba(30,42,90,.18); display:flex; flex-direction:column; }
.rl-list h5 { margin:0; display:flex; align-items:center; padding:16px 26px; background:var(--sky); border-bottom:4px solid var(--navy); font-family:var(--font-head); font-weight:400; font-size:30px; color:var(--navy); }
.rl-list .hrule { margin-left:auto; font-size:24px; color:var(--blue); }
.rl-list .ti { position:relative; display:flex; align-items:center; gap:18px; width:100%; border:0; background:#fff; text-align:left; padding:22px 26px; border-bottom:3px dashed #E9DFC9; cursor:pointer; font:inherit; }
.rl-list .ti:last-of-type { border-bottom:0; }
.rl-list .ti.on { background:#FFF8EC; }
.rl-list .tt { flex:1; min-width:0; font-family:var(--font-head); font-size:30px; line-height:1.35; color:var(--navy); word-break:keep-all; }
.rl-list .cb { flex:none; position:relative; width:48px; height:48px; border:4px solid var(--navy); border-radius:10px; background:#fff; }
.rl-list .cb.on { background:var(--coral); }
.rl-list .cb.on::after { content:''; position:absolute; left:12px; top:2px; width:12px; height:24px; border:solid #fff; border-width:0 6px 6px 0; transform:rotate(45deg); }
.rl-list .ti.on .cb { animation:pxpop .3s ease-out; }
.rl-list .del { flex:none; width:40px; height:40px; border-radius:50%; border:3px solid var(--navy); background:#fff; color:var(--navy); font-size:20px; cursor:pointer; }
.rl-add { padding:20px 26px 6px; display:grid; grid-template-columns:1fr auto; gap:12px 16px; align-items:center; }
.rl-add p { grid-column:1/-1; margin:0; font-family:var(--font-head); font-size:24px; color:var(--blue); }
.rl-in { height:84px; padding:0 22px 0 26px; }
.rl-in input { font-size:30px; }
.rl-in input::placeholder { font-size:26px; }
.rl-addbtn { position:relative; font-size:30px; }
.rl-note { margin:auto 26px 18px; font-size:19px; color:var(--muted); display:flex; gap:10px; align-items:flex-start; }
.rl-note b { flex:none; width:26px; height:26px; border-radius:50%; background:var(--coral); color:#fff; font-family:var(--font-head); font-weight:400; display:grid; place-items:center; font-size:17px; }
.lab-rules input { user-select:text; -webkit-user-select:text; }
.rl-list { flex:none; }
.rl-note { margin:14px 26px 18px; }
/* 약속 고르기: 폴더 탭 + 목록 상자, 상자는 제목과 버튼 사이 가운데 (11/10) */
.lab-rules .rl-box { justify-content:center; gap:0; }
.rl-wrap { display:flex; flex-direction:column; }
.rl-list .hrule { color:var(--navy); }
.rl-list .ti { padding:24px 30px; }
/* 약속 고르기 탭: 색 채우기 빼고 같은 색으로 (11/10) — 고른 탭만 흰색으로 머리 줄과 이어져요 */
.rl-list h5 { font-size:26px; color:var(--blue); padding:14px 30px 10px; }
/* 약속 고르기 (11/10 다시): 상자는 처음 모양, 탭은 상자와 떨어져 살짝 뜬 알약 */
.rl-list h5 { background:var(--sky); border-bottom:4px solid var(--navy); font-size:30px; color:var(--navy); padding:16px 26px; }
/* 약속 고르기 (11/10): 약속 앞 번호 원형 배지 · 탭은 선생님 화면처럼 위 모서리만 둥근 탭, 상자와는 살짝 떨어지게 */
.rl-list .tno { flex:none; width:44px; height:44px; border-radius:50%; background:var(--sky); color:var(--navy); font-family:var(--font-head); font-size:26px; display:grid; place-items:center; padding-top:3px; }
.rl-list .ti.on .tno { background:var(--coral); color:#fff; }
/* 약속 고르기: 장소 고르기 2×2 그림 카드 → 누르면 그 장소 약속 상자 (11/10) */
/* 약속 고르기 — 순서대로 한 박스 (11/10): 위 장소 그림 + 아래 약속 목록 */
.lab-rules .rl-box { justify-content:flex-start; }
.rl-list { flex:none; }
.rl-pic { position:relative; height:150px; flex:none; background:center 60%/cover no-repeat; border-bottom:4px solid var(--navy); display:flex; align-items:flex-end; justify-content:space-between; padding:0 22px 16px; }
.rl-pic.pl-home { background-image:url(../assets/bg/bg_home.png); }
.rl-pic.pl-school { background-image:url(../assets/bg/bg_cafeteria.png); }
.rl-pic.pl-outside { background-image:url(../assets/bg/bg_playground.png); }
.rl-pic.pl-mine { background:#E6DAFA; }
.rl-pic.pl-mine::before { content:'⭐'; position:absolute; left:50%; top:12px; font-size:96px; opacity:.5; }
.rl-pic span { position:relative; background:#fff; border-radius:999px; padding:8px 26px 6px; font-family:var(--font-head); font-size:32px; color:var(--navy); box-shadow:0 0 0 4px var(--navy), 0 6px 0 4px rgba(30,42,90,.2); }
.rl-pic em { position:relative; font-style:normal; font-family:var(--font-head); font-size:24px; color:var(--navy); background:rgba(255,255,255,.85); border-radius:999px; padding:6px 18px 4px; }
.rl-list .ti { padding:22px 30px; }
/* 배경 누르기 통일 (11/10): 밝은 크림 대신 남색으로 살짝 어둡게 — 글·상자·캐릭터가 또렷하게.
장소 탐색(원본 그대로)과 스캔·결과(남색 .48)는 그대로 */
.lab-dim.cream, .lab-dim.soft-r, .lab-quiz .lab-dim.cream, .lab-quiz.rounds .lab-dim.cream { background:rgba(30,42,90,.38); }
/* 배경 3단계 (11/10 추천안): 이야기=밝게 그대로 · 활동=남색 .27 · 스캔·결과=남색 .55 */
.lab-dim.cream, .lab-quiz .lab-dim.cream, .lab-quiz.rounds .lab-dim.cream { background:rgba(30,42,90,.27); }
.lab-dim.soft-r { background:linear-gradient(90deg,rgba(255,248,238,0) 35%,rgba(255,248,238,.4)); }
.lab-dim.navy { background:rgba(30,42,90,.55); }
/* ===== 제목 상자 A-1 (11/10): 왼쪽 위 · 크림 바탕 · 남색-노랑-남색 두 겹 · 주아 진하게 · 파트 칩 ===== */
.px-panel { background:#FFFDF6 !important; padding:0 !important; border-radius:22px;
box-shadow:0 0 0 4px var(--navy),0 0 0 9px var(--yellow),0 0 0 13px var(--navy),0 12px 0 13px rgba(30,42,90,.28) !important; }
.px-panel > div { background:none !important; padding:14px 26px 12px 18px !important; flex-direction:row !important; align-items:center; gap:14px !important; text-align:left; }
.px-panel b { font-size:38px !important; color:var(--navy); -webkit-text-stroke:1.2px var(--navy); line-height:1.1; }
.px-panel small { font-size:20px !important; line-height:1; color:var(--navy) !important; background:var(--sky) !important; border-radius:999px; padding:7px 16px 5px !important; box-shadow:none !important; }
.px-panel:not(:has(small)) > div { padding-left:26px !important; }
/* 장소 탐색 과제 상자: 세로 배치 유지 */
.place-panel > div { flex-direction:column !important; align-items:center; gap:6px !important; padding:14px 26px 14px !important; }
.place-panel b { font-size:34px !important; }
.place-panel small { background:#fff !important; color:var(--blue) !important; box-shadow:0 0 0 2px rgba(47,77,168,.35) !important; }
/* 오른쪽 위 진행 숫자: 모두 같은 남색 알약 */
.top-cnt { font-size:28px; padding:8px 22px 6px; }
.top-cnt b.lc { font-size:32px; color:var(--yellow); }
.cope-siren.r { display:none; }
/* 미션 배지 (11/10): 번호 동그라미 + 장소 이름, 제목 폭보다 살짝 좁게 고르게 */
.place-panel .px-steps { align-self:stretch; display:flex; justify-content:space-between; gap:12px; margin:6px 26px 0; }
.place-panel .px-steps i { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; }
.place-panel .px-steps .no { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--navy); color:#fff; font-size:15px; line-height:1; padding-top:1px; }
.place-panel .px-steps i.ok .no { background:var(--green); }
/* 기억 체크 띠 이름표 크게 (11/10) */
.qb-tag { top:-32px; left:28px; font-size:36px; padding:9px 34px 6px; box-shadow:0 0 0 4px #FFFDF5, 0 0 0 7px rgba(30,42,90,.18); }
.qb-tag { top:-44px; } /* 이름표를 띠 위로 더 올림, 띠는 18px 내림 (11/10) */
/* 기억 체크 말풍선 강조어 (11/10): 띠 이름표와 같은 색 형광펜 */
.px-bub b.kw { font-weight:400; font-family:var(--font-head); padding:0 4px; color:var(--navy); }
.px-bub b.kw.light { background:linear-gradient(transparent 45%, #F5C842 45%, #F5C842 92%, transparent 92%); }
.px-bub b.kw.severe { color:#C9573A; background:linear-gradient(transparent 45%, #FFD9CC 45%, #FFD9CC 92%, transparent 92%); }
.px-bub b.kw { padding:0; }
/* 증상 카드 입체감 (11/10): 아래쪽 두꺼운 그림자 + 위쪽 밝은 빛 + 부드러운 바닥 그림자 */
.screen-S36-3 .lab-card > span { box-shadow:0 0 0 3px rgba(30,42,90,.22), 0 7px 0 3px rgba(30,42,90,.28), 0 16px 22px rgba(30,42,90,.22) !important;
background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 62%,#F3F6FB 100%) !important; }
.screen-S36-3 .lab-card > span::before { content:''; position:absolute; left:10px; right:10px; top:6px; height:5px; border-radius:4px; background:rgba(255,255,255,.9); }
.screen-S36-3 .lab-card:active > span { translate:0 4px; box-shadow:0 0 0 3px rgba(30,42,90,.22), 0 3px 0 3px rgba(30,42,90,.28), 0 8px 12px rgba(30,42,90,.18) !important; }
.screen-S36-3 .lab-card.sel > span { box-shadow:0 0 0 5px var(--yellow), 0 7px 0 5px #C79A1E, 0 16px 22px rgba(30,42,90,.22) !important; outline:none; }
/* 장소 완료 (11/10): 상자 없이 판 전체를 남색으로 눌러 뒤 화면(미션 상자·찾은 원인 칸)을 가림 */
.lab-pop.place-done { background:rgba(30,42,90,.62); }
.lab-board:has(.place-done) .place-panel, .lab-board:has(.place-done) .lab-tray { visibility:hidden; }
/* 다 맞힌 뒤 두 띠 (11/10): 이름표가 커져서 띠 사이를 벌리고 조금 작게 */
.quiz-band.sum-top { transform:translate(90px, -46px) scale(.78); }
.quiz-band.sum-bot { transform:translate(90px, 292px) scale(.78); }
/* 약속 고르기 정리 (11/10): 상자 입체감, 고른 줄 노랑 */
.lab-rules .rl-list { box-shadow:0 0 0 4px var(--navy), 0 9px 0 4px rgba(30,42,90,.3), 0 18px 24px rgba(30,42,90,.2); }
.rl-list .ti.on { background:#FFF3C8; }
.rl-list .ti.on .tno { background:var(--yellow); color:var(--navy); }
/* 약속 상자 머리 (11/10): 장소 그림 빼고 하늘색 띠에 장소 이름표만 */
.rl-pic, .rl-pic.pl-home, .rl-pic.pl-school, .rl-pic.pl-outside, .rl-pic.pl-mine { height:auto; background:#E3F0FC !important; align-items:center; padding:16px 22px 14px; }
.rl-pic.pl-mine::before { display:none; }
.rl-pic span { box-shadow:0 0 0 3px var(--navy); font-size:30px; padding:6px 22px 4px; }
/* 실천 약속 고르기 (11/10 다시): 상자 위 장소 배지 줄 — 누르면 그 장소, 상자 머리 문장에 장소 형광펜 */
.rl-stack { display:flex; flex-direction:column; gap:16px; }
.rl-badges { display:flex; gap:12px; padding-left:4px; }
.rl-badge { border:0; cursor:pointer; font-family:var(--font-head); font-size:26px; color:var(--navy); border-radius:999px; padding:9px 22px 7px; opacity:.6;
box-shadow:0 0 0 3px rgba(30,42,90,.25); transition:opacity .15s, transform .15s; }
.rl-badge.pl-home { background:#F7D667; } .rl-badge.pl-school { background:#A9D3F5; } .rl-badge.pl-outside { background:#B5DFA6; } .rl-badge.pl-mine { background:#D9C8F5; }
.rl-badge.ok { opacity:.85; } .rl-badge i { font-style:normal; color:var(--green); }
.rl-badge.cur { opacity:1; box-shadow:0 0 0 4px var(--navy), 0 6px 0 4px rgba(30,42,90,.25); transform:translateY(-2px); }
.rl-pic .rl-head { background:none !important; box-shadow:none !important; padding:0 !important; font-size:30px; color:var(--navy); }
.rl-head b.pw { font-weight:400; padding:0 2px; }
.rl-head b.pw.pl-home { background:linear-gradient(transparent 45%, #F7D667 45%, #F7D667 92%, transparent 92%); }
.rl-head b.pw.pl-school { background:linear-gradient(transparent 45%, #A9D3F5 45%, #A9D3F5 92%, transparent 92%); }
.rl-head b.pw.pl-outside { background:linear-gradient(transparent 45%, #B5DFA6 45%, #B5DFA6 92%, transparent 92%); }
.rl-head b.pw.pl-mine { background:linear-gradient(transparent 45%, #D9C8F5 45%, #D9C8F5 92%, transparent 92%); }
.lab-board:has(.place-done) .place-again { visibility:hidden; }
/* 장소 완료 (11/10 점검): 어두운 배경 뒤로 '발견' 도장이 비치지 않게 */
.lab-board:has(.place-done) .lab-spot { visibility:hidden; }
/* 장소 번호 배지 (11/10): 실제 글꼴(주아)에서 '운동장'이 두 줄로 꺾이지 않게 — 한 줄 고정, 폭은 글자에 맞춤 */
.place-panel .px-steps i { flex:1 1 auto; white-space:nowrap; }
/* 급식실 메뉴판 (11/10): 실제 글꼴에서 꽉 차 보여서 판·글씨를 한 단계 작게 (가운데 자리는 그대로) */
.lab-menu { padding:12px 22px 10px; }
.lab-menu::before, .lab-menu::after { width:18px; height:18px; top:-8px; }
.lab-menu h4 { font-size:24px; margin:0 0 4px; }
.lab-menu ul { padding-top:6px; gap:2px 20px; border-top-width:2px; }
.lab-menu li { font-size:21px; gap:5px; }
.lab-menu li em { font-size:16px; }
.lab-menu small { font-size:14px; margin-top:4px; }
/* 급식실 메뉴판 (11/10 다시): 한 단계 더 작게 — 줄 높이를 고정해 실제 글꼴에서도 아래가 게시판 안에 */
.lab-menu { padding:10px 18px 8px; line-height:1.2; }
.lab-menu h4 { font-size:21px; line-height:1.2; margin:0 0 3px; }
.lab-menu ul { padding-top:5px; gap:1px 16px; }
.lab-menu li { font-size:18px; line-height:1.25; gap:4px; }
.lab-menu li em { font-size:14px; }
.lab-menu small { font-size:12.5px; line-height:1.2; margin-top:3px; }
/* 급식실 메뉴판 (11/10 세 번째): 높이는 글에 맞추고, 게시판(코르크 안쪽 y 165~420)의 세로 가운데에 — 위아래 여백이 늘 같게 */
.lab-menu { height:auto !important; top:292px !important; transform:translateY(-50%) rotate(-1.2deg); padding:9px 16px 8px; }
.lab-menu h4 { font-size:19px; margin:0 0 2px; }
.lab-menu ul { padding-top:4px; gap:0 14px; }
.lab-menu li { font-size:16.5px; line-height:1.3; }
.lab-menu li em { font-size:13px; }
.lab-menu small { font-size:11.5px; margin-top:2px; }
.lab-menu small { white-space:normal; word-break:keep-all; letter-spacing:-.02em; } /* 넓은 글꼴에서도 판 밖으로 나가지 않게 */
/* '알겠어요!' 누르는 버튼처럼 보이게 (11/10): 노란 말풍선(지금 누를 버튼 = 노랑) + › + 살짝 두근두근 */
.rs-ok .rs-say { background:none; border-image:url("data:image/svg+xml,") 5 fill / 25px stretch; padding:4px 10px 0 12px; }
.rs-ok .rs-say .px-bub-txt::after { content:' ›'; }
.rs-ok .px-bub.tail-r i.t1 { background:url("data:image/svg+xml,") no-repeat center/100% 100%; }
.rs-ok.show { animation:pxpop .35s ease-out, pxbeat 1.6s ease-in-out .6s infinite; }
.rs-ok:hover .rs-say, .rs-ok:active .rs-say { filter:brightness(.94); }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .rs-ok.show { animation:none; } }
/* '알겠어요!' 누르라는 느낌 더 (11/10 다시): 크게 두근 + 노란 빛 퍼짐 + 픽셀 손가락이 톡톡 */
@keyframes rsbeat { 0%,55%,100% { scale:1; } 20% { scale:1.12; } 35% { scale:.98; } }
@keyframes rsring { 0% { opacity:.85; scale:.9; } 70%,100% { opacity:0; scale:1.35; } }
@keyframes rstap { 0%,55%,100% { translate:0 0; } 18% { translate:-8px -14px; } 30% { translate:0 0; } }
.rs-ok { position:relative; }
.rs-ok.show { animation:pxpop .35s ease-out; }
.rs-ok.show .rs-say { animation:rsbeat 1.4s ease-in-out .5s infinite; }
.rs-ok .rs-say::before { content:''; position:absolute; inset:-30px; border-radius:40px; box-shadow:0 0 0 8px rgba(255,214,80,.95), 0 0 36px 14px rgba(255,214,80,.75); opacity:0; pointer-events:none; }
.rs-ok.show .rs-say::before { animation:rsring 1.4s ease-out .5s infinite; }
.rs-tap { position:absolute; left:calc(100% - 196px); top:76px; width:60px; height:65px; z-index:3; pointer-events:none; opacity:0;
background:url("data:image/svg+xml,") no-repeat center/100% 100%; filter:drop-shadow(3px 4px 0 rgba(30,42,90,.3)); }
.rs-ok.show .rs-tap { opacity:1; transition:opacity .3s .5s; animation:rstap 1.4s ease-in-out .5s infinite; }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .rs-ok.show .rs-say, .rs-ok.show .rs-say::before, .rs-ok.show .rs-tap { animation:none; } }
/* 스캔 불빛을 결과 창 앞으로 (11/10): 냥박사 그림(불빛 포함)을 창보다 위에 — 몸은 창 밖이라 겹치지 않아요 */
.lab-char.scan-front { z-index:6; pointer-events:none; }
/* 선생님 미리 보기에서만 (11/11): 연구회 이름표 옆 '두 번 눌러 보세요' 말풍선 + 픽셀 손가락 톡톡(두 번) */
.lab-org.try { cursor:pointer; animation:orgglow 1.6s ease-in-out infinite; }
@keyframes orgglow { 0%,100% { filter:drop-shadow(0 0 0 rgba(245,200,66,0)); } 50% { filter:drop-shadow(0 0 10px rgba(245,200,66,.95)); } }
.lab-orgtip { position:absolute; right:40px; top:70px; z-index:3; pointer-events:none; width:400px; height:110px; }
.lab-orgtip .px-bub { position:absolute; right:96px; top:16px; padding:12px 20px 10px; }
.lab-orgtip .px-bub-txt { display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; white-space:nowrap; }
.lab-orgtip .px-bub-txt b { font-family:var(--font-head); font-weight:400; font-size:28px; color:var(--coral-d); }
.lab-orgtip .px-bub-txt small { font-size:20px; color:var(--navy); }
.lab-orgtip .rs-tap { left:auto; right:40px; top:0; opacity:1; animation:orgtap 1.6s ease-in-out infinite; }
@keyframes orgtap { 0%,60%,100% { translate:0 0; } 12% { translate:-6px -12px; } 22% { translate:0 0; } 34% { translate:-6px -12px; } 44% { translate:0 0; } }
@media (prefers-reduced-motion: reduce) and (min-width: 99999px) { .lab-org.try, .lab-orgtip .rs-tap { animation:none; } }