:root{
  --cream:#FFF8EE;
  --ink:#5A4636;
  --ink-soft:#8B7561;
  --pink:#F5A3A3;
  --mint:#8ED6C0;
  --sun:#FFD48A;
  --shadow:0 4px 0 rgba(120,95,70,.18), 0 10px 24px rgba(120,95,70,.16);
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{
  height:100%;
  overflow:hidden;
  background:#EFE3D2;
  font-family:"Apple SD Gothic Neo","Pretendard","Noto Sans KR",system-ui,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

#stage{position:fixed;inset:0;}

#cv{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
}

/* ---------- 공통 패널 ---------- */
.panel{
  position:absolute;
  background:var(--cream);
  border:3px solid #E4D2BA;
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:10px 16px;
  font-size:14px;
  font-weight:700;
  letter-spacing:-.2px;
  pointer-events:none;
}

/* ---------- 현재 방 ---------- */
#roomTag{
  top:18px; left:18px;
  display:flex; align-items:center; gap:9px;
  font-size:16px;
  padding:11px 20px;
}
#roomTag .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 4px rgba(142,214,192,.28);
}

/* ---------- 퀘스트 ---------- */
#questBox{ top:18px; right:18px; min-width:186px; padding:14px 18px; }
.q-title{ font-size:12px; color:var(--ink-soft); margin-bottom:8px; letter-spacing:.3px; }
#questList{ list-style:none; display:flex; flex-direction:column; gap:7px; }
#questList li{
  display:flex; align-items:center; gap:8px;
  font-size:14px; line-height:1.2;
  transition:opacity .25s;
}
#questList li .box{
  width:18px;height:18px;flex:0 0 18px;
  border:2.5px solid #E0CDB4; border-radius:6px;
  display:grid; place-items:center;
  font-size:12px; color:#fff;
  transition:background .25s,border-color .25s,transform .25s;
}
#questList li.done{ opacity:.5; }
#questList li.done .box{
  background:var(--mint); border-color:var(--mint);
  transform:scale(1.08);
}
#questList li.done .label{ text-decoration:line-through; }

/* ---------- 하단 도움말 ---------- */
#help{
  bottom:18px; left:50%; transform:translateX(-50%);
  font-weight:600; font-size:13px; color:var(--ink-soft);
  white-space:nowrap;
}
#help b{ color:var(--ink); }

/* ---------- 토스트 ---------- */
#toast{
  position:absolute; left:50%; top:76px;
  transform:translate(-50%,-14px);
  background:var(--ink); color:#fff;
  padding:12px 22px; border-radius:16px;
  font-size:15px; font-weight:700;
  box-shadow:0 8px 22px rgba(90,70,54,.3);
  opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s;
  white-space:nowrap;
}
#toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- 줌 ---------- */
#zoomBox{
  position:absolute; left:18px; top:74px;
  display:flex; flex-direction:column; gap:8px;
}
#zoomBox button{
  width:40px;height:40px;border-radius:13px;
  background:var(--cream); border:3px solid #E4D2BA;
  box-shadow:var(--shadow);
  font-size:17px; font-weight:800; color:var(--ink);
  cursor:pointer; line-height:1;
}
#zoomBox button:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(120,95,70,.18); }

/* ---------- 클릭 유도 ---------- */
#clickHint{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:rgba(90,70,54,.9); color:#fff;
  padding:13px 24px; border-radius:16px;
  font-size:15px; font-weight:700;
  box-shadow:0 8px 24px rgba(90,70,54,.3);
  pointer-events:none;
  transition:opacity .3s;
}
#clickHint.hide{ opacity:0; }

/* ---------- 모바일 컨트롤 ---------- */
#stick,#actBtn{ display:none; }
#stick{
  position:absolute; left:26px; bottom:26px;
  width:132px;height:132px;border-radius:50%;
  background:rgba(255,248,238,.62);
  border:3px solid rgba(228,210,186,.85);
  touch-action:none;
}
#stickKnob{
  position:absolute; left:50%; top:50%;
  width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;
  background:var(--cream);
  border:3px solid #E4D2BA;
  box-shadow:var(--shadow);
}
#actBtn{
  position:absolute; right:26px; bottom:34px;
  width:86px;height:86px;border-radius:50%;
  background:var(--sun); border:3px solid #E9B95E;
  box-shadow:var(--shadow);
  font-size:32px; line-height:1;
  cursor:pointer;
}
#actBtn:active{ transform:translateY(3px); }

body.touch #stick,body.touch #actBtn{ display:block; }
body.touch #help{ display:none; }

/* ---------- 공간 사진 뷰어 ---------- */
#photoView{
  position:absolute; inset:0; z-index:40;
  display:none; place-items:center;
  background:rgba(46,36,26,.72);
  backdrop-filter:blur(3px);
  padding:24px;
}
#photoView.show{ display:grid; animation:pvIn .22s ease-out; }
@keyframes pvIn{ from{opacity:0} to{opacity:1} }

.pv-box{
  position:relative;
  max-width:min(1000px, 92vw);
  background:var(--cream);
  border:4px solid #E4D2BA;
  border-radius:22px;
  box-shadow:0 18px 50px rgba(40,30,22,.45);
  overflow:hidden;
  animation:pvPop .26s cubic-bezier(.2,1.3,.5,1);
}
@keyframes pvPop{ from{transform:scale(.92) translateY(10px)} to{transform:none} }

.pv-box img{ display:block; width:100%; height:auto; max-height:70vh; object-fit:cover; }
.pv-box img[hidden]{ display:none; }

/* 영상 — 사진과 같은 틀에 16:9 로 앉힌다 */
#pvVideo{ display:block; width:min(880px, 88vw); aspect-ratio:16/9; background:#000; }
#pvVideo[hidden]{ display:none; }
#pvVideo iframe{ display:block; width:100%; height:100%; border:0; }

.pv-txt{ padding:14px 20px 16px; }
#pvTitle{ font-size:18px; font-weight:800; letter-spacing:-.3px; }
#pvCap{ margin-top:5px; font-size:13.5px; font-weight:600; color:var(--ink-soft); line-height:1.5; }

#pvClose{
  position:absolute; top:12px; right:12px;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,248,238,.94); border:3px solid #E4D2BA;
  font-size:15px; font-weight:800; color:var(--ink);
  cursor:pointer; line-height:1;
}
#pvClose:active{ transform:translateY(2px); }

/* 여러 장 넘기기 — 손님 사진 액자벽 */
#pvNav[hidden]{ display:none; }
#pvPrev, #pvNext{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,248,238,.94); border:3px solid #E4D2BA;
  font-size:22px; font-weight:800; color:var(--ink);
  cursor:pointer; line-height:1;
}
#pvPrev{ left:12px; }
#pvNext{ right:12px; }
#pvPrev:active, #pvNext:active{ transform:translateY(calc(-50% + 2px)); }

.pv-hint{
  margin-top:14px; color:#F0E6D8; font-size:13px; font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.pv-hint b{ color:#fff; }

/* ---------- 부팅 ---------- */
#boot{
  position:absolute; inset:0;
  background:#EFE3D2;
  display:grid; place-items:center;
  z-index:50;
  transition:opacity .45s;
}
#boot.hide{ opacity:0; pointer-events:none; }
.boot-inner{ text-align:center; }
.boot-house{ font-size:56px; animation:bob 1.1s ease-in-out infinite; }
.boot-text{ margin-top:14px; font-size:19px; font-weight:800; }
.boot-sub{ margin-top:5px; font-size:13px; color:var(--ink-soft); font-weight:600; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

@media (max-width:640px){
  #questBox{ min-width:0; padding:10px 13px; }
  #questBox .q-title{ margin-bottom:6px; }
  #questList li{ font-size:12.5px; }
  #roomTag{ font-size:14px; padding:9px 15px; }
}

/* ---------- 이불 배치 모드 ---------- */
#futonBar{
  left:50%; bottom:18px; transform:translateX(-50%);
  display:grid; gap:10px;
  padding:14px 18px;
  pointer-events:auto;
  max-width:min(560px, calc(100vw - 32px));
}
#futonBar[hidden]{ display:none; }

.fb-top{ display:grid; gap:3px; text-align:center; }
.fb-count{ font-size:17px; font-weight:800; letter-spacing:-.3px; }
.fb-count b{ color:#2E86BC; font-size:21px; }
.fb-hint{ font-size:12.5px; font-weight:600; color:var(--ink-soft); line-height:1.4; }

.fb-btns{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.fb-btns button{
  padding:10px 16px; border-radius:999px;
  border:3px solid #E4D2BA; background:#fff;
  font-size:13.5px; font-weight:800; color:var(--ink);
  cursor:pointer; box-shadow:0 3px 0 rgba(120,95,70,.16);
}
.fb-btns button:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(120,95,70,.16); }
#fbAll{ background:var(--sun); border-color:#E9B95E; }
.fb-close{ background:var(--ink); border-color:var(--ink); color:#fff; }

body.futon-mode #help{ display:none; }

@media (max-width:520px){
  .fb-hint{ font-size:11.5px; }
  .fb-btns button{ padding:9px 13px; font-size:12.5px; }
}