/* ============================================================
   LIFE-BOT LAB — 생활 탐정단의 발명 연구소
   페이퍼(아이보리) × 잉크 × 라임 #9AE942 · 모바일 우선
   ============================================================ */
:root{
  /* 쿼카 에셋 팔레트: 코발트(반바지)·그린(포켓)·레드(스웨터)·버터(전구) */
  --ground:#FAF6F0; --paper:#FFFFFF; --ink:#25211C; --ink-soft:#5C5A52;
  --accent:#2B5FC7; --accent-tint:#E9EFFA; --accent-soft:#A9C6FF;
  --pos:#2E9E63; --pos-tint:#E6F4EC;
  --coral:#D9453A; --coral-tint:#FBE9E7;
  --pink:#F5A09B; --butter:#F0B429; --butter-tint:#FBF1DA;
  /* 구 라임 토큰은 액센트로 별칭 처리 */
  --lime:var(--accent); --lime-tint:var(--accent-tint);
  --line:2px solid var(--ink);
  --r:16px; --r-s:12px;
  --tap:48px;
  --font:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink); font-family:var(--font);
  font-size:16px; line-height:1.6; min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}

#app{max-width:520px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column;
     position:relative}
.screen{flex:1; padding:16px 18px calc(96px + env(safe-area-inset-bottom)); }

/* ---------- 공통 요소 ---------- */
.h-disp{font-weight:900; letter-spacing:-.02em; line-height:1.22; margin:0}
.eyebrow{display:inline-flex; align-items:center; gap:7px; background:var(--ink); color:#fff;
  font-size:11.5px; font-weight:800; letter-spacing:.12em; padding:5px 12px; border-radius:999px}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--pos)}
.card{background:var(--paper); border:var(--line); border-radius:var(--r); padding:16px}
.card+.card{margin-top:12px}
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:var(--tap); padding:12px 18px; border-radius:999px;
  background:var(--ink); color:#fff; border:var(--line);
  font-size:16.5px; font-weight:800; cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn.lime{background:var(--accent); color:#fff}
.btn.ghost{background:var(--paper); color:var(--ink)}
.btn.small{min-height:40px; padding:8px 14px; font-size:14px; width:auto}
.btn[disabled]{opacity:.35; cursor:not-allowed}
.row{display:flex; gap:10px}
.row>.btn{flex:1}
.stack{display:flex; flex-direction:column; gap:12px}
.muted{color:var(--ink-soft)}
.center{text-align:center}
.chip{display:inline-block; font-size:12px; font-weight:800; border:1.5px solid var(--ink);
  border-radius:7px; padding:2px 9px; background:var(--paper)}
.chip.lime{background:var(--lime)}
.chip.butter{background:var(--butter)}
.chip.coral{background:var(--coral); color:#fff}

/* ---------- 상단 동기화 상태바 ---------- */
.syncbar{
  margin:10px 18px 0; padding:9px 14px; border-radius:12px; border:var(--line);
  font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:9px;
}
.syncbar.ok{background:var(--pos-tint)}
.syncbar.wait{background:var(--butter-tint)}
.syncbar .dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);flex:none}
.syncbar.ok .dot{background:var(--pos)}
.syncbar.wait .dot{background:var(--butter)}
.syncbar .sb-act{margin-left:auto; font-size:12.5px; font-weight:800; text-decoration:underline;
  background:none; border:none; cursor:pointer; color:var(--ink); min-height:32px}

/* ---------- 하단 탭바 ---------- */
.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:520px; display:flex; gap:10px;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--ground); border-top:var(--line); z-index:30;
}
.tab{
  flex:1; min-height:56px; border:var(--line); border-radius:16px; background:var(--paper);
  font-size:13px; font-weight:800; cursor:pointer; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
}
.tab.on{background:var(--accent); color:#fff}
.tab-cta{background:var(--ink); color:#fff}
.tab-cta.on{background:var(--accent); color:#fff}
.t-ic svg{width:20px; height:20px; display:block}

/* ---------- 스플래시 ---------- */
.splash{display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:calc(100dvh - 40px); text-align:center; gap:18px; padding:24px 0}
.splash .logo-fig{width:min(52vw,210px)}
.splash h1{font-size:clamp(30px,9vw,40px)}
.splash .sub{max-width:26em}
.soundpick{width:100%; display:flex; flex-direction:column; gap:10px; margin-top:6px}

/* ---------- 입장 ---------- */
.join-code{display:flex; gap:8px; justify-content:center}
input[type=text],input[type=number],textarea,select{
  width:100%; border:var(--line); border-radius:var(--r-s); background:var(--paper);
  font-family:inherit; font-size:17px; padding:13px 14px; color:var(--ink);
}
textarea{min-height:110px; line-height:1.6; resize:vertical}
input.big-code{font-size:26px; font-weight:900; text-align:center; letter-spacing:.35em}
label.f-label{display:block; font-size:13.5px; font-weight:800; margin:0 0 7px}
.f-help{font-size:12.5px; color:var(--ink-soft); margin-top:6px}

/* ---------- 홈 ---------- */
.home-head{display:flex; align-items:center; gap:12px; margin:6px 0 14px}
.home-head .hh-fig{width:64px; flex:none}
.home-head .hh-t h2{margin:2px 0 0; font-size:21px; font-weight:900; letter-spacing:-.02em}
.mission-big{background:var(--ink); color:#fff; border-radius:var(--r); padding:18px;
  border:var(--line)}
.mission-big .mb-day{color:var(--accent-soft); font-weight:900; font-size:13px; letter-spacing:.1em}
.mission-big h3{margin:6px 0 4px; font-size:20px; font-weight:900; line-height:1.3}
.mission-big p{margin:0 0 14px; font-size:13.5px; color:#D8D6CC}
.daymap{display:flex; gap:10px; margin-top:12px}
.daymap .d{flex:1; border:var(--line); border-radius:14px; background:var(--paper);
  padding:10px 8px; text-align:center}
.daymap .d.now{background:var(--accent); color:#fff}
.daymap .d.done{background:var(--pos-tint)}
.daymap .d.todo{background:var(--paper); color:var(--ink-soft)}
.daymap .d b{display:block; font-size:12px; letter-spacing:.06em}
.daymap .d .paw{font-size:15px; font-weight:900; margin-top:2px; display:block}
.statline{display:flex; gap:10px; margin-top:12px}
.stat{flex:1; background:var(--paper); border:var(--line); border-radius:14px; padding:10px 12px}
.stat b{display:block; font-size:22px; font-weight:900; font-variant-numeric:tabular-nums}
.stat span{font-size:12px; color:var(--ink-soft); font-weight:700}
.locked-list{margin-top:14px}
.locked{display:flex; align-items:center; gap:10px; padding:11px 14px; border:2px dashed #C9C4B2;
  border-radius:14px; color:var(--ink-soft); font-size:13.5px; font-weight:700; background:none}
.locked+.locked{margin-top:8px}
.locked .no{font-family:ui-monospace,monospace; font-size:11px; border:1.5px solid #C9C4B2;
  border-radius:6px; padding:1px 7px; flex:none}

/* ---------- 기록 위저드 ---------- */
.wiz-top{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.wiz-back{width:44px; height:44px; border:var(--line); background:var(--paper); border-radius:12px;
  font-size:18px; font-weight:900; cursor:pointer; flex:none}
.wiz-prog{flex:1; height:14px; border:var(--line); border-radius:999px; background:var(--paper);
  overflow:hidden}
.wiz-prog i{display:block; height:100%; background:var(--accent); border-right:2px solid var(--ink);
  transition:width .25s}
@media (prefers-reduced-motion:reduce){.wiz-prog i{transition:none}}
.wiz-step{font-size:12.5px; font-weight:800; color:var(--ink-soft); flex:none;
  font-variant-numeric:tabular-nums}
.q-title{font-size:21px; font-weight:900; letter-spacing:-.02em; margin:4px 0 3px; line-height:1.35}
.q-sub{font-size:13.5px; color:var(--ink-soft); margin:0 0 16px}
.opts{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.opts.one{grid-template-columns:1fr}
.opt{
  min-height:var(--tap); border:var(--line); border-radius:14px; background:var(--paper);
  font-size:15.5px; font-weight:800; cursor:pointer; padding:12px 10px; color:var(--ink);
  display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
}
.opt.on{background:var(--accent); color:#fff}
.opt .o-ic{display:flex}
.opt .o-ic svg{width:20px;height:20px}
.wiz-foot{position:sticky; bottom:calc(10px + env(safe-area-inset-bottom)); margin-top:18px}
.exa-toggle{background:none; border:none; font-size:13px; font-weight:800; text-decoration:underline;
  color:var(--ink-soft); cursor:pointer; padding:6px 0; min-height:36px}
.exa{background:var(--butter-tint); border:1.5px dashed var(--ink); border-radius:12px;
  padding:10px 14px; font-size:13.5px; margin-top:8px}

/* 표정 슬라이더 */
.faces{display:flex; gap:8px; justify-content:space-between}
.face{flex:1; aspect-ratio:1; max-width:76px; border:var(--line); border-radius:16px;
  background:var(--paper); cursor:pointer; display:flex; align-items:center; justify-content:center;
  padding:8px}
.face.on{background:var(--accent-tint); border-width:3px}
.face svg{width:100%; height:auto}
.face-cap{display:flex; justify-content:space-between; font-size:11.5px; font-weight:700;
  color:var(--ink-soft); margin-top:6px}

/* 완료 피드백 */
.done-fig{width:130px; margin:8px auto 0}
.fb-card{background:var(--pos-tint); border:var(--line); border-radius:var(--r); padding:16px;
  font-size:15.5px; line-height:1.7}
.fb-card b{font-weight:900}
.savestate{display:flex; align-items:center; gap:8px; justify-content:center; font-size:13px;
  font-weight:800; color:var(--ink-soft); margin-top:10px}
.savestate .dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--ink)}
.savestate.ok .dot{background:var(--pos)}
.savestate.wait .dot{background:var(--butter)}

/* ---------- 보드 ---------- */
.board-sec{margin-top:18px}
.board-sec h3{font-size:16px; font-weight:900; margin:0 0 10px; display:flex; gap:8px; align-items:center}
.board-sec h3::before{content:""; width:12px; height:12px; background:var(--lime);
  border:2px solid var(--ink); border-radius:4px}
.bars{display:flex; flex-direction:column; gap:8px}
.bar{display:grid; grid-template-columns:92px 1fr 34px; align-items:center; gap:10px; font-size:13.5px}
.bar b{font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar .track{height:16px; border:var(--line); border-radius:999px; background:var(--paper); overflow:hidden}
.bar .track i{display:block; height:100%; background:var(--accent)}
.bar .n{font-weight:900; font-variant-numeric:tabular-nums; text-align:right}
.obs-card{border:var(--line); border-radius:14px; background:var(--paper); padding:13px 14px}
.obs-card+.obs-card{margin-top:10px}
.obs-meta{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px}
.obs-scene{font-size:14.5px; margin:0}
.obs-again{font-size:11.5px; font-weight:900; color:var(--ink); background:var(--butter);
  border:1.5px solid var(--ink); border-radius:7px; padding:2px 8px}
.thermo{display:flex; gap:8px}
.th-seg{flex:1; border:var(--line); border-radius:12px; padding:10px; text-align:center;
  background:var(--paper); font-size:12px; font-weight:800}
.th-seg.hot{background:var(--pos-tint)}
.th-seg.warm{background:var(--butter-tint)}
.th-seg b{display:block; font-size:18px; font-weight:900; font-variant-numeric:tabular-nums}
.empty-state{text-align:center; padding:26px 10px; color:var(--ink-soft)}
.empty-state .ef{width:110px; margin:0 auto 10px}

/* ---------- 튜토리얼 ---------- */
.sdal-line{display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-height:56px;
  border:2px dashed #C9C4B2; border-radius:14px; padding:8px}
.sdal-slot{font-size:12px; font-weight:800; color:var(--ink-soft)}
.sdal-pick{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.sdal-card{border:var(--line); border-radius:14px; background:var(--paper); padding:12px;
  cursor:pointer; text-align:left; font-family:inherit}
.sdal-card[disabled]{opacity:.3; cursor:default}
.sdal-card b{display:block; font-size:15px; font-weight:900}
.sdal-card span{font-size:12px; color:var(--ink-soft)}
.sdal-chip{display:inline-flex; align-items:center; gap:6px; background:var(--accent-tint);
  border:var(--line); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:900}

/* ---------- 교사 ---------- */
.kv{display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:7px 0;
  border-bottom:1.5px dashed #DDD8C8}
.kv:last-child{border-bottom:none}
.kv b{font-weight:900; font-variant-numeric:tabular-nums}
.teach-link{font-size:12px; font-weight:800; color:var(--ink-soft); text-align:center;
  margin-top:16px}
.teach-link button{background:none;border:none;text-decoration:underline;font-weight:800;
  color:var(--ink-soft);cursor:pointer;font-size:12px;min-height:36px}

/* ---------- 토스트 ---------- */
.toast{position:fixed; left:50%; bottom:calc(104px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none;
  background:var(--ink); color:#fff; border:2px solid var(--accent-soft); border-radius:999px;
  padding:10px 18px; font-size:13.5px; font-weight:800; z-index:90; transition:.22s;
  max-width:86vw; text-align:center}
.toast.on{transform:translateX(-50%) translateY(0); opacity:1}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* ---------- 미션 지도 (개념기반탐구 단계 해금) ---------- */
.mmap{display:flex; flex-direction:column; gap:9px; margin-top:14px}
.mrow{display:flex; align-items:center; gap:11px; border:var(--line); border-radius:14px;
  background:var(--paper); padding:12px 14px; cursor:pointer; text-align:left;
  font-family:inherit; font-size:14.5px; color:var(--ink); width:100%}
.mrow:active{transform:translateY(1px)}
.mrow[disabled]{border:2px dashed #CFC9BB; background:none; color:var(--ink-soft); cursor:default}
.mrow[disabled]:active{transform:none}
.mrow .no{width:32px; height:32px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:900; font-size:15px; border:2px solid var(--ink);
  background:var(--paper); flex:none}
.mrow.isdone .no{background:var(--accent); color:#fff; border-color:var(--ink)}
.mrow[disabled] .no{border-color:#CFC9BB; background:none}

/* LIFEBOT 스펠링 진행 스트립 */
.lb-spell{display:flex; gap:6px; margin-top:14px}
.lb-spell .ls{flex:1; aspect-ratio:1; max-width:54px; display:flex; align-items:center;
  justify-content:center; border:2px dashed #CFC9BB; border-radius:13px; font-weight:900;
  font-size:19px; background:none; color:#C8C2B4}
.lb-spell .ls.open{border:2px solid var(--ink); background:var(--paper); color:var(--ink)}
.lb-spell .ls.done{border:2px solid var(--ink); background:var(--accent); color:#fff}
.mrow .mt{flex:1; min-width:0}
.mrow .mt b{display:block; font-weight:900}
.mrow .mt span{display:block; font-size:11.5px; color:var(--ink-soft); margin-top:1px}
.cbi{flex:none; font-size:10.5px; font-weight:900; letter-spacing:.02em;
  background:var(--accent-tint); border:1.5px solid var(--ink); border-radius:999px; padding:3px 9px}
.mrow[disabled] .cbi{background:none; border-color:#CFC9BB}
.mstate{flex:none; font-size:12px; font-weight:900}
.mstate.done{color:var(--pos)}
.mstate.open{color:var(--accent)}
.admin-band{margin-top:10px; font-size:12px; font-weight:800; color:#fff; background:var(--ink);
  border-radius:10px; padding:7px 12px; display:inline-flex; align-items:center; gap:7px}
.admin-band i{width:8px; height:8px; border-radius:50%; background:var(--butter)}

/* ---------- 미션 공통 ---------- */
.mhead{display:flex; align-items:center; gap:10px; margin:4px 0 4px}
.mhead .wiz-back{flex:none}
.mhead h2{font-size:21px; font-weight:900; letter-spacing:-.02em; margin:0; flex:1}
.mnote{background:var(--butter-tint); border:1.5px dashed var(--ink); border-radius:12px;
  padding:10px 14px; font-size:13px; margin:10px 0}
.pick-card{display:block; width:100%; text-align:left; border:var(--line); border-radius:14px;
  background:var(--paper); padding:12px 14px; font-family:inherit; font-size:14px; color:var(--ink);
  cursor:pointer}
.pick-card.on{background:var(--accent-tint); border-width:3px}
.pick-card .pc-meta{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:5px}
.pick-card p{margin:0}
.light{display:flex; gap:8px; margin:10px 0}
.light .l{flex:1; text-align:center; border:var(--line); border-radius:12px; padding:9px 6px;
  font-size:12.5px; font-weight:900; background:var(--paper); opacity:.35}
.light .l.on{opacity:1}
.light .l.green.on{background:var(--pos-tint)}
.light .l.yellow.on{background:var(--butter-tint)}
.light .l.grey.on{background:#EFEBE2}
.timerbox{display:flex; align-items:center; gap:12px; border:var(--line); border-radius:14px;
  background:var(--paper); padding:12px 16px}
.timerbox b{font-size:26px; font-variant-numeric:tabular-nums; font-weight:900}
.idea-list{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.idea-item{display:flex; align-items:center; gap:9px; border:var(--line); border-radius:12px;
  background:var(--paper); padding:9px 12px; font-size:14px}
.idea-item .ino{flex:none; width:24px; height:24px; border-radius:50%; background:var(--accent);
  color:#fff; font-size:12px; font-weight:900; display:flex; align-items:center; justify-content:center}
.idea-item button{margin-left:auto; background:none; border:none; font-weight:900; cursor:pointer;
  color:var(--ink-soft); min-width:36px; min-height:36px}
.jump-card{background:var(--accent-tint); border:var(--line); border-radius:14px; padding:13px 16px;
  font-size:14.5px; font-weight:800; margin-top:10px}
.filter-block{border:var(--line); border-radius:14px; background:var(--paper); padding:13px 14px}
.filter-block+.filter-block{margin-top:10px}
.filter-block .fh{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.filter-block .fh b{font-size:14.5px; font-weight:900; flex:1}
.score3{display:flex; gap:6px}
.score3 button{width:40px; height:40px; border:var(--line); border-radius:10px; background:var(--paper);
  font-weight:900; font-size:14px; cursor:pointer; color:var(--ink)}
.score3 button.on{background:var(--accent); color:#fff}
.filter-block input{margin-top:8px; font-size:14px; padding:9px 12px}
.rule-preview{background:var(--ink); color:#fff; border-radius:14px; padding:14px 16px;
  font-size:14.5px; line-height:1.7; margin:12px 0}
.rule-preview b{color:var(--accent-soft)}
.design-grid{display:flex; flex-direction:column; gap:12px}
.design-grid label{display:block}
.test-card{border:var(--line); border-radius:14px; background:var(--paper); padding:12px 14px;
  font-size:13.5px}
.test-card+.test-card{margin-top:9px}
.test-card .tc-h{display:flex; gap:7px; align-items:center; margin-bottom:5px; flex-wrap:wrap}
.gooddata{background:var(--butter-tint); border:var(--line); border-radius:14px; padding:14px 16px;
  font-size:14.5px; font-weight:800; margin-top:12px}
.report{background:var(--paper); border:var(--line); border-radius:16px; padding:20px}
.report h3{font-size:15px; font-weight:900; margin:16px 0 6px; display:flex; gap:8px; align-items:center}
.report h3::before{content:""; width:11px; height:11px; background:var(--accent);
  border:2px solid var(--ink); border-radius:4px}
.report p{margin:0; font-size:14px}
@media print{.tabbar,.syncbar,.toast,.no-print{display:none !important} body{background:#fff}}

/* 캐릭터 이미지 슬롯: assets/…jpg 있으면 그걸, 없으면 svg 폴백 */
.figslot{position:relative}
.figslot img{width:100%; display:block}
.figslot .fb{width:100%}
.figslot.has-img .fb{display:none}
.hh-fig .figslot img{width:auto; height:84px}
.mb-banner{width:100%; aspect-ratio:2.3/1; object-fit:cover; object-position:50% 74%;
  border-radius:12px; display:block; margin-bottom:13px; background:var(--ground)}
.splash .logo-fig{width:min(88vw,400px); border-radius:18px; overflow:hidden}