/* ═══════════════════════════════════════════════════════════
   DONE Shell CSS v2 — 좌석 헌법 집행 (2026-07-08, Diana)
   ①하단 완전 고정·스크롤 독립  ②기본=쉼(낮게 상주)
   ③문턱선 1px  ④숨쉬는 점  ⑤DONE의 말=명조
   ⑥색은 집주인 것(변수 상속), 라운드·그라데이션 없음
   ⑦한국어 닻: 좌석 부제에 한국어 상시 노출
   호환: done-shell.js가 setPanel(vh)로 승격 — CSS 기본=쉼.
   ═══════════════════════════════════════════════════════════ */
:root{
  --dsh-ink:    var(--ink, #20303B);
  --dsh-sub:    var(--label, #6B7780);
  --dsh-accent: var(--accent, #3E5C6B);
  --dsh-rule:   var(--rule-line, #DED9CC);
  --dsh-serif:  'Cormorant Garamond','Noto Serif KR',serif;
  --dsh-sans:   'Noto Sans KR',-apple-system,sans-serif;
}

/* ── 좌석: 하단 고정 + 문턱선 + 쉼 높이 ── */
#done-panel{
  position:fixed; left:0; right:0; bottom:0; z-index:9000;
  height:118px;                        /* 쉼 — JS가 말함/집중 시 vh로 키움 */
  background:#fff;
  border-top:1px solid var(--dsh-ink); /* 문턱선 — DONE의 영토 */
  box-shadow:0 -6px 24px rgba(32,48,59,.08);
  display:flex; flex-direction:column;
  font-family:var(--dsh-sans); color:var(--dsh-ink);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(105%);
  transition:transform .5s cubic-bezier(.32,.72,0,1),
             height .45s cubic-bezier(.32,.72,0,1);
}
#done-panel.show{ transform:translateY(0); }

/* ── 드래그 핸들 ── */
.panel-drag-wrap{ padding:6px 0 2px; text-align:center; cursor:grab; flex-shrink:0; }
.panel-drag{ width:36px; height:3px; background:var(--dsh-rule); margin:0 auto; }
.panel-handle-hint{ font-size:9px; letter-spacing:.14em; color:var(--dsh-sub); opacity:.55; margin-top:3px; }

/* ── 헤더: 숨쉬는 점 + DONE 서명 + 한국어 닻 부제 ── */
.panel-header{ display:flex; align-items:center; padding:2px 16px 6px; flex-shrink:0; }
.panel-who{ display:flex; align-items:center; gap:9px; flex:1; min-width:0; }
.done-av{
  width:12px; height:12px; border-radius:50%;
  background:var(--dsh-accent);
  font-size:0;                          /* 'D' 글자 숨김 — 점이 서명 */
  animation:dsh-breathe 3.2s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes dsh-breathe{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(.78); opacity:.55; }
}
.done-name{ font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--dsh-ink); }
.done-sub{ font-size:11px; color:var(--dsh-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── 언어 전환 (매크로 lang_sw — 절대 유지) ── */
.lang-sw{ position:relative; flex-shrink:0; }
.lang-sw-btn{ border:1px solid var(--dsh-rule); background:#fff; color:var(--dsh-ink);
  font-size:11px; padding:4px 8px; cursor:pointer; display:flex; gap:4px; align-items:center; }
.lang-sw-arr{ font-size:8px; color:var(--dsh-sub); }
.lang-sw-menu{ position:absolute; right:0; bottom:calc(100% + 4px);
  background:#fff; border:1px solid var(--dsh-rule); box-shadow:0 4px 16px rgba(32,48,59,.12);
  min-width:110px; z-index:9100; }
.lang-sw-menu button{ display:block; width:100%; text-align:left; border:0; background:#fff;
  padding:8px 12px; font-size:12px; color:var(--dsh-ink); cursor:pointer; }
.lang-sw-menu button:hover{ background:#F2F6F9; }

/* ── 바디: 스테이지 무대 ── */
.panel-body{ flex:1; overflow-y:auto; padding:0 16px 12px; -webkit-overflow-scrolling:touch; }
.stage{ display:none; }
.stage.active{ display:block; }

/* ── 인트로: peek·상태점 ── */
.intro-peek-text{ font-family:var(--dsh-serif); font-size:15px; color:var(--dsh-ink);
  padding:2px 0 4px; transition:opacity .26s; }
.intro-peek-text.hidden{ opacity:0; }
#intro-status{ display:none; align-items:center; gap:8px; padding:2px 0 4px;
  opacity:0; transition:opacity .3s; }
#intro-status.visible{ opacity:1; }
.status-dot{ width:8px; height:8px; border-radius:50%; background:var(--dsh-accent);
  animation:dsh-think .9s ease-in-out infinite; }
@keyframes dsh-think{ 0%,100%{opacity:.35} 50%{opacity:1} }
#intro-status.done .status-dot{ animation:none; opacity:1; }
.status-text{ font-size:12px; color:var(--dsh-sub); }

/* ── 말풍선: DONE의 말 = 명조 (지호 승인 2026-07-08) ── */
#chat-bubbles{ display:flex; flex-direction:column; gap:8px; }
.done-bubble{
  font-family:var(--dsh-serif);
  font-size:15.5px; line-height:1.6; color:var(--dsh-ink);
  background:#F2F6F9;
  border-left:2px solid var(--dsh-accent);   /* 발화 단위 문턱선 */
  padding:10px 13px; max-width:92%;
  opacity:0; transform:translateY(6px);
  transition:opacity .35s, transform .35s;
  word-break:keep-all;
}
.done-bubble.in{ opacity:1; transform:translateY(0); }

/* ── 답변부 (journey_front #jv-answer 포함): 손님의 말 = 고딕 ── */
#jv-answer{ padding:6px 0 2px; }
#jv-answer .jv-opt{
  display:flex; align-items:center; width:100%; text-align:left;
  border:1px solid var(--dsh-rule); background:#fff; color:var(--dsh-ink);
  padding:11px 13px; margin:5px 0; font-size:14px; font-family:var(--dsh-sans);
  cursor:pointer; border-radius:0;
}
#jv-answer .jv-opt:active{ border-color:var(--dsh-accent); }
#jv-answer .jv-opt .n{ color:var(--dsh-accent); margin-right:9px; font-weight:600; }

/* ── 접근성·모션 배려 ── */
@media (prefers-reduced-motion: reduce){
  .done-av,.status-dot{ animation:none; }
  #done-panel,.done-bubble{ transition:none; }
}