*, *::before, *::after { box-sizing: border-box; }
:root {
  --bg-base: #f5f2eb;
  --panel-bg: #fcfbfa;
  --panel-border: #dedbd3;
  --text-main: #30372f;
  --text-sub: #6c7567;
  --accent: #4f6848;
  --accent-hover: #40543a;
  --accent-light: #e6ede3;
  --focus-ring: #557750;
  --chip-bg: #ece9e0;
  --hud-bg: rgba(26, 32, 24, 0.72);
  --hud-border: rgba(255, 255, 255, 0.2);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-base);
  color: var(--text-main);
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 전체 앱 레이아웃: 브라우저 높이에 정확히 맞추어 전체 페이지 스크롤 방지 */
.app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: #fbf9f4;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
  z-index: 20;
}
.brand-sub {
  font-size: 10px;
  letter-spacing: 2.5px;
  color: #6d7b63;
  font-weight: 700;
  text-transform: uppercase;
}
.title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
h1 {
  font-size: 19px;
  font-weight: 700;
  margin: 2px 0 0 0;
  color: #273024;
}
.view-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}
.header-tools {
  display: flex;
  gap: 8px;
}
.tool-btn {
  background: #f4f2ea;
  border: 1px solid var(--panel-border);
  color: var(--text-main);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tool-btn:hover:not(:disabled) {
  background: #eae5d7;
  border-color: #c4c2b7;
}
.tool-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 2열 구조: 왼쪽 3D 가용 화면 + 오른쪽 독립 스크롤 설정 패널 */
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.viewport-pane {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  min-height: 0;
  background: #d6ded2;
  overflow: hidden;
}

#stage {
  flex: 1 1 0%;
  min-height: 0;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #cbd6c5;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
  display: block;
}

#vignette-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.nameplate {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9;
  display: none;
  transform: translate(-50%, -100%);
  transition: opacity 0.2s ease;
}
.nameplate span {
  background: rgba(255, 255, 255, 0.92);
  color: #273123;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.8);
}

.toast-msg {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: rgba(26, 32, 24, 0.88);
  backdrop-filter: blur(8px);
  color: #f7f6f0;
  padding: 9px 18px;
  border-radius: 20px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 20;
  white-space: nowrap;
}
.toast-msg.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* P0: 3D 우상단 카메라 조작기 (게임식 D-Pad 및 줌) */
.camera-hud {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 15;
  background: var(--hud-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--hud-border);
  border-radius: 18px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  user-select: none;
  -webkit-user-select: none;
}
.hud-mode-row {
  display: flex;
  gap: 4px;
  width: 100%;
}
.hud-mode-chip {
  flex: 1;
  padding: 4px 6px;
  font-size: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.1);
  color: #d8ded5;
  cursor: pointer;
  white-space: nowrap;
}
.hud-mode-chip.active {
  background: #5b7952;
  color: #ffffff;
  font-weight: 700;
  border-color: rgba(255,255,255,0.4);
}

.dpad {
  display: grid;
  grid-template-columns: repeat(3, 36px);
  grid-template-rows: repeat(3, 36px);
  gap: 4px;
  justify-content: center;
  align-items: center;
}
.dpad-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.14);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: background 0.1s, transform 0.1s;
}
.dpad-btn:hover { background: rgba(255,255,255,0.28); }
.dpad-btn:active, .dpad-btn.pressed {
  background: #688c5e;
  transform: scale(0.93);
}
.dpad-up    { grid-column: 2; grid-row: 1; }
.dpad-left  { grid-column: 1; grid-row: 2; }
.dpad-center{ grid-column: 2; grid-row: 2; background: rgba(255,255,255,0.22); font-size: 14px; }
.dpad-right { grid-column: 3; grid-row: 2; }
.dpad-down  { grid-column: 2; grid-row: 3; }

.hud-zoom-row {
  display: flex;
  gap: 4px;
  width: 100%;
}
.hud-icon-btn {
  flex: 1;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.14);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hud-icon-btn:hover { background: rgba(255,255,255,0.28); }
.hud-icon-btn:active, .hud-icon-btn.pressed { background: #688c5e; }
.hud-view-btn {
  flex: 2;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.18);
  color: #f0f4ef;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.hud-view-btn:hover { background: rgba(255,255,255,0.3); }

/* 하단 시점 프리셋 + 행동 바 */
.viewport-bottom-controls {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 12;
  pointer-events: none;
  width: 95%;
  max-width: 580px;
}
.viewport-bottom-controls > * {
  pointer-events: auto;
}
.view-presets-bar {
  display: flex;
  gap: 6px;
  background: rgba(24, 30, 22, 0.72);
  backdrop-filter: blur(10px);
  padding: 4px 8px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.18);
  overflow-x: auto;
  max-width: 100%;
}
.view-chip-btn {
  background: transparent;
  border: 0;
  color: #d6e0d3;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.view-chip-btn:hover {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
}
.view-chip-btn.active {
  background: #516f49;
  color: #ffffff;
  font-weight: 600;
}

.action-bar {
  display: flex;
  gap: 8px;
  background: rgba(24, 30, 22, 0.8);
  backdrop-filter: blur(10px);
  padding: 6px 12px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.action-btn {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 24px;
  color: #ffffff;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.action-btn:hover { background: rgba(255,255,255,0.26); transform: translateY(-1px); }
.action-btn:active { transform: translateY(0); }
.act-icon { font-size: 14px; }

.view-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px;
  background: #e9e6dd;
  border-top: 1px solid var(--panel-border);
  font-size: 11px;
  color: var(--text-sub);
  flex-shrink: 0;
}
.hint { margin: 0; }
#status { margin: 0; font-weight: 600; color: #43543d; }

/* 우측 독립 스크롤 패널 (Desktop) */
.control-panel {
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border-left: 1px solid var(--panel-border);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  z-index: 10;
}

.tabs-nav {
  display: flex;
  border-bottom: 1px solid var(--panel-border);
  background: #f7f5ef;
  flex-shrink: 0;
}
.tab-btn {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.tab-btn:hover {
  color: var(--text-main);
  background: #f0eee7;
}
.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--panel-bg);
}

.panel-content {
  flex: 1 1 0%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 20px;
  min-height: 0;
}

.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
h2 {
  font-size: 15px;
  font-weight: 700;
  color: #354231;
  margin: 0;
}
.tab-reset-btn {
  background: none;
  border: 0;
  color: #7b8874;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}
.tab-reset-btn:hover { color: #3b4c37; }

.section-desc {
  font-size: 12px;
  color: var(--text-sub);
  margin: 0 0 14px 0;
  line-height: 1.5;
}

.field {
  margin-bottom: 14px;
}
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #495444;
  margin-bottom: 6px;
}
.field-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #d5d8cc;
  background: #ffffff;
  color: var(--text-main);
  font-size: 13px;
}

.colors-group {
  background: #f7f5ed;
  border: 1px solid #e5e3d7;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.group-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #63705d;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.colors-row {
  display: flex;
  gap: 12px;
}
.color-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-sub);
}
input[type="color"] {
  -webkit-appearance: none;
  width: 44px;
  height: 32px;
  border: 1px solid #c9cdbe;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  padding: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }

.preset-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pill-btn {
  background: #f0eee6;
  border: 1px solid #d8d6c8;
  border-radius: 14px;
  padding: 6px 10px;
  font-size: 11px;
  color: #3b4637;
  cursor: pointer;
}
.pill-btn:hover {
  background: #e3decfa4;
  border-color: #b5b19e;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: #f7f5ed;
  border: 1px solid #e5e3d7;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.checkbox-grid label, .checkbox-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-main);
  cursor: pointer;
}
.checkbox-row {
  margin-bottom: 10px;
}
input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}

/* 정밀 슬라이더 항목 컴포넌트 */
.slider-control-item {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e8e6dc;
}
.slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 4px;
}
.slider-title {
  color: #3f4a3b;
  font-weight: 500;
}
.slider-val-box {
  display: flex;
  align-items: center;
  gap: 4px;
}
.num-input {
  width: 58px;
  padding: 2px 4px;
  font-size: 11px;
  text-align: right;
  border: 1px solid #d8dcd0;
  border-radius: 4px;
  background: #ffffff;
  color: #333d30;
}
.num-unit {
  font-size: 10px;
  color: #7f8979;
}
.item-reset-btn {
  background: none;
  border: 0;
  font-size: 11px;
  color: #929d8d;
  cursor: pointer;
  padding: 0 2px;
}
.item-reset-btn:hover { color: #43543d; }
.slider-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.range-bound-desc {
  font-size: 10px;
  color: #98a192;
  white-space: nowrap;
}
input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  height: 5px;
}

.advanced-box {
  margin-top: 14px;
  border: 1px solid #dedcd1;
  border-radius: 10px;
  background: #faf9f5;
  overflow: hidden;
}
.advanced-box summary {
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #556350;
  cursor: pointer;
  user-select: none;
}
.advanced-body {
  padding: 12px;
  border-top: 1px solid #dedcd1;
}

/* 탭 5: 저장 패널 */
.save-actions-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.text-input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #d5d9cc;
  font-size: 12px;
}
.primary-btn {
  background: var(--accent);
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.primary-btn:hover { background: var(--accent-hover); }

.io-btn-row {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.sub-btn {
  flex: 1;
  text-align: center;
  background: #f2eee3;
  border: 1px solid #d8d4c5;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
  color: #495444;
  cursor: pointer;
}
.sub-btn:hover { background: #e6e0d3; }
.file-btn { display: inline-flex; align-items: center; justify-content: center; }

.ab-compare-box {
  background: #f5f2e8;
  border: 1px solid #e1ded0;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 14px;
}
.compare-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #636f5d;
  margin-bottom: 6px;
}
.compare-btn-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.chip-btn {
  background: #ffffff;
  border: 1px solid #d5d9cc;
  border-radius: 6px;
  padding: 5px 2px;
  font-size: 10px;
  color: #3b4638;
  cursor: pointer;
}
.chip-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.card-item {
  background: #ffffff;
  border: 1px solid #dedcd3;
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.card-thumb-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
}
.card-thumb-btn img {
  width: 100%;
  aspect-ratio: 1.6;
  object-fit: cover;
  display: block;
}
.card-info {
  padding: 6px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fcfbf8;
  border-top: 1px solid #f0eee6;
}
.card-title {
  font-size: 11px;
  font-weight: 600;
  color: #364232;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-sub {
  font-size: 10px;
  color: #838e7f;
}
.card-del-btn {
  background: none;
  border: 0;
  color: #a87f7f;
  font-size: 13px;
  cursor: pointer;
  padding: 0 4px;
}
.card-del-btn:hover { color: #d03030; }

.sheet-handle-bar {
  display: none;
}

/* 둘러보기(투어) 모드 */
body.tour-mode .workspace {
  grid-template-columns: 1fr;
}
body.tour-mode .control-panel,
body.tour-mode .sheet-handle-bar {
  display: none !important;
}

/* 모바일 및 좁은 화면 최적화 (하단 접이식 바텀 시트) */
@media (max-width: 920px) {
  .app-header {
    padding: 10px 14px;
  }
  h1 { font-size: 16px; }
  .view-chip { display: none; }
  .header-tools .tool-btn:nth-child(2) { display: none; } /* redo 숨김 */

  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .sheet-handle-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fbfaf5;
    border-top: 1px solid var(--panel-border);
    padding: 8px 14px 10px;
    z-index: 25;
    cursor: pointer;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
  }
  .handle-pill {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: #bec5b8;
    margin-bottom: 4px;
  }
  .sheet-title {
    font-size: 12px;
    font-weight: 700;
    color: #4f5a4a;
  }

  .control-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60vh;
    border-left: 0;
    border-top: 1px solid var(--panel-border);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.22);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 30;
    padding-bottom: var(--safe-bottom);
  }
  .control-panel.open {
    transform: translateY(0);
  }

  .camera-hud {
    top: 10px;
    right: 10px;
    transform: scale(0.9);
    transform-origin: top right;
  }

  .viewport-bottom-controls {
    bottom: 50px;
  }
  .view-presets-bar {
    display: none; /* 모바일 하단 공간 확보 */
  }
}

/* v16 6차(제미나이): 화면 전체에 따뜻한 피치·핑크 덮개(부드러운 빛 섞기) */
#warm-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at 50% 35%, rgba(255, 214, 196, 0.22), rgba(246, 200, 206, 0.16));
  mix-blend-mode: soft-light;
}

/* v16 7차(제미나이): 화면 전체 채도 +15% */
#stage canvas {
  filter: saturate(1.35);   /* 8차: +15%에서 +35%로 */
}

/* 익명 방명록(우리집 배포본) */
#gb-open { position: fixed; right: 16px; bottom: calc(76px + var(--safe-bottom)); z-index: 90; display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px; border: 2px solid #fff; background: linear-gradient(135deg, #ff8fb1, #c58cff); color: #fff; font: inherit; font-size: 17px; font-weight: 800; letter-spacing: -0.2px; cursor: pointer; box-shadow: 0 8px 24px rgba(197, 140, 255, .55); animation: gb-bob 2.4s ease-in-out infinite; }
#gb-open:hover { filter: brightness(1.06); animation-play-state: paused; }
#gb-open span { font-size: 20px; }
@keyframes gb-bob { 0%, 100% { transform: translateY(0); box-shadow: 0 8px 24px rgba(197,140,255,.55); } 50% { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(255,143,177,.65); } }
@media (prefers-reduced-motion: reduce) { #gb-open { animation: none; } }
#gb-panel { position: fixed; right: 16px; bottom: calc(140px + var(--safe-bottom)); z-index: 90; width: min(360px, calc(100vw - 32px)); max-height: min(70vh, 560px); display: flex; flex-direction: column; background: var(--panel-bg); color: var(--text-main); border: 1px solid var(--panel-border); border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,.18); overflow: hidden; }
#gb-panel[hidden] { display: none; }
.gb-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 4px; }
.gb-top h2 { margin: 0; font-size: 16px; }
#gb-close { border: 0; background: none; font-size: 16px; color: var(--text-sub); cursor: pointer; }
#gb-form { display: flex; flex-direction: column; gap: 8px; padding: 8px 14px 12px; border-bottom: 1px solid var(--panel-border); }
#gb-form input, #gb-form textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--panel-border); border-radius: 10px; background: #fff; color: var(--text-main); resize: vertical; }
.gb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gb-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#gb-note { font-size: 12px; color: var(--text-sub); }
#gb-list { list-style: none; margin: 0; padding: 4px 14px 14px; overflow-y: auto; }
#gb-list li { padding: 10px 0; border-bottom: 1px solid var(--chip-bg); }
#gb-list li:last-child { border-bottom: 0; }
.gb-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-sub); }
.gb-head b { color: var(--text-main); }
#gb-list p { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.gb-empty { color: var(--text-sub); font-size: 13px; text-align: center; }
@media (max-width: 760px) { #gb-open { bottom: calc(150px + var(--safe-bottom)); padding: 12px 18px; font-size: 16px; } #gb-panel { bottom: calc(210px + var(--safe-bottom)); max-height: min(60vh, 520px); } }
#hit-tag { position: fixed; left: 12px; bottom: calc(12px + var(--safe-bottom)); z-index: 90; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.85); color: #6b4f63; font-size: 13px; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.12); pointer-events: auto; }   /* 방문 수: 주인 브라우저에만 */
/* 방문자 화면(11-01 전하): 설정판·시트 손잡이·되돌리기 숨기고 방을 넓게. 주인 브라우저(열쇠 있음)는 그대로 */
html.visitor #panel, html.visitor #sheet-handle, html.visitor #btn-undo, html.visitor #btn-redo { display: none !important; }
html.visitor .workspace { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { html.visitor #gb-open { bottom: calc(140px + var(--safe-bottom)); } html.visitor #gb-panel { bottom: calc(200px + var(--safe-bottom)); } }

/* 39차(11-01 전하 "이 메뉴 모바일에서 안 잘리게"): 폰에선 화면 폭 안 한 줄, 손가락으로 옆으로 밀기(여러 줄은 방명록 버튼과 겹침) */
@media (max-width: 760px) {
  .action-bar { max-width: calc(100vw - 32px); box-sizing: border-box; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding: 6px 8px; gap: 6px;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .action-bar::-webkit-scrollbar { display: none; }
  .action-btn { flex: none; scroll-snap-align: start; padding: 5px 10px; gap: 4px; }
}

/* 40차(11-01 전하): 같이 놀기 고르기 창 · 놀고 간 친구 기록 · 사진 크게 보기 · 왼쪽 위 버튼 폰에서 작게 */
html.visitor #photo-upload { display: none !important; }   /* 사진 올리기는 주인 브라우저만 */
#play-toggle { background: linear-gradient(135deg, rgba(255, 228, 240, .92), rgba(236, 222, 255, .92)) !important; }
@media (max-width: 760px) {
  html #exterior-ui { top: 90px; left: 10px; gap: 6px; }
  html #exterior-ui button { font-size: 12px; padding: 7px 11px; }
  html .toast-msg { position: fixed; top: 300px; z-index: 95; width: max-content; box-sizing: border-box; max-width: calc(100vw - 32px); white-space: normal; text-align: center; }   /* 폰: 알림은 카메라 조작판 밑(왼쪽 위 버튼과 안 겹치게) */
  html #play-log { top: 182px; bottom: auto; max-width: min(220px, calc(100% - 170px)); }   /* 폰: 왼쪽 위 버튼 줄 밑(아래는 행동 줄·방명록 버튼 자리) */
}
#play-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(60, 40, 70, .38); backdrop-filter: blur(3px); }
#play-modal[hidden] { display: none; }
.pm-card { width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box; padding: 16px 16px 18px; border-radius: 20px; background: #fffaf5; color: #5b4636; box-shadow: 0 16px 40px rgba(80, 50, 90, .3); font-family: system-ui, -apple-system, sans-serif; }
.pm-top { display: flex; justify-content: space-between; align-items: center; }
.pm-top h2 { margin: 0; font-size: 18px; }
.pm-x { border: 0; background: none; font-size: 18px; color: #8a7466; cursor: pointer; padding: 6px; }
.pm-sub { margin: 4px 0 10px; font-size: 13px; color: #8a7466; }
.pm-sec { margin-top: 12px; }
.pm-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.pm-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; }
.pm-opts button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; border: 2px solid #efe2d6; background: #fff; color: #5b4636; font: 600 13px/1.2 system-ui, -apple-system, sans-serif; cursor: pointer; }
.pm-emo { font-size: 26px; line-height: 1.1; }
.pm-opts button.on { border-color: #c58cff; background: #f7efff; }
.pm-sw { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-sw button { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #e4d6c8; cursor: pointer; padding: 0; }
.pm-sw button span { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font-size: 10px; color: #8a7466; white-space: nowrap; margin-top: 1px; }
.pm-sw { padding-bottom: 14px; }
.pm-sw button.pm-base { background: conic-gradient(#3a3438 0 25%, #c9a27e 0 50%, #fbf5ea 0 75%, #9d9ca2 0); }
.pm-sw button.on { box-shadow: 0 0 0 3px #c58cff; }
.pm-name-row { display: flex; gap: 6px; }
.pm-name-row input { flex: 1; min-width: 0; font: 16px system-ui, -apple-system, sans-serif; padding: 9px 12px; border: 1px solid #e4d6c8; border-radius: 12px; background: #fff; color: #5b4636; }
.pm-dice { border: 1px solid #e4d6c8; background: #fff; border-radius: 12px; font-size: 18px; padding: 0 12px; cursor: pointer; }
.pm-go { margin-top: 16px; width: 100%; padding: 13px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #ff8fb1, #c58cff); color: #fff; font: 800 16px system-ui, -apple-system, sans-serif; cursor: pointer; box-shadow: 0 6px 18px rgba(197, 140, 255, .45); }
#play-log { position: absolute; left: 12px; bottom: 104px; z-index: 14; max-width: min(260px, calc(100% - 24px)); font: 12px/1.35 system-ui, -apple-system, sans-serif; color: #5b4636; }
#play-log[hidden] { display: none; }
#play-log .pl-head { border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 248, 240, .85); color: #6b4f63; border-radius: 999px; padding: 5px 10px; font: 700 12px system-ui, -apple-system, sans-serif; cursor: pointer; box-shadow: 0 2px 8px rgba(80, 50, 90, .14); }
#play-log .pl-list { list-style: none; margin: 6px 0 0; padding: 6px 10px; border-radius: 12px; background: rgba(255, 248, 240, .82); box-shadow: 0 2px 10px rgba(80, 50, 90, .12); backdrop-filter: blur(4px); }
#play-log.collapsed .pl-list { display: none; }
#play-log li { padding: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#play-log li span { color: #a08b7d; margin-left: 6px; font-size: 11px; }
#photo-lightbox { position: fixed; inset: 0; z-index: 210; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; box-sizing: border-box; background: rgba(30, 20, 35, .82); }
#photo-lightbox[hidden] { display: none; }
#photo-lightbox img { max-width: 100%; max-height: calc(100dvh - 100px); object-fit: contain; border: 8px solid #fbf5ea; border-bottom-width: 22px; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
#photo-lightbox .lb-row { display: flex; gap: 10px; }
#photo-lightbox button { border: 0; border-radius: 999px; padding: 9px 16px; background: rgba(255, 248, 240, .92); color: #5b4636; font: 700 14px system-ui, -apple-system, sans-serif; cursor: pointer; }
/* 40차(11-01 전하): 흑화 모드 — 번쩍임·말풍선 */
#dark-toggle { background: linear-gradient(135deg, rgba(70, 30, 80, .88), rgba(150, 30, 70, .85)) !important; color: #fff !important; }
#dark-flash { position: fixed; inset: 0; z-index: 150; pointer-events: none; background: #fff; opacity: 0; }
#dark-flash.f1 { animation: dark-f1 .35s ease-out; }
#dark-flash.f2 { animation: dark-f2 .7s ease-out; }
@keyframes dark-f1 { 0% { opacity: .85; } 100% { opacity: 0; } }
@keyframes dark-f2 { 0% { opacity: .9; } 25% { opacity: 0; } 45% { opacity: .75; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #dark-flash.f1, #dark-flash.f2 { animation-duration: .01s; } }
.dark-bubble { position: absolute; left: 0; top: 0; z-index: 16; max-width: 220px; padding: 8px 12px; border-radius: 16px; background: #2a1428; color: #ffd9ec; font: 700 13px/1.35 system-ui, -apple-system, sans-serif; box-shadow: 0 4px 14px rgba(40, 0, 30, .35); pointer-events: none; white-space: normal; text-align: center; }
.dark-bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #2a1428; }
.dark-bubble.small { background: #fff; color: #6b4f63; font-size: 12px; padding: 4px 9px; }
.dark-bubble.small::after { border-top-color: #fff; }
.dark-bubble[hidden] { display: none; }
@media (max-width: 760px) { .dark-bubble { max-width: 170px; font-size: 12px; } }

/* 44차(11-01 전하 집 빼앗기): 하얀 가림·보라 번쩍·큰 자막·외계인 말풍선, 모드 중 회색 버튼, 행동 버튼 줄은 컴퓨터에서도 넘치면 옆으로 밀기(되찾기 버튼이 잘리지 않게) */
.action-bar { max-width: 100%; box-sizing: border-box; overflow-x: auto; scrollbar-width: none; }
.action-bar::-webkit-scrollbar { display: none; }
.action-btn { flex: none; }
.action-btn[hidden] { display: none; }
.action-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.action-btn.tk-retake { background: rgba(255, 214, 120, .28); border-color: rgba(255, 224, 160, .6); }
#tk-stop { background: rgba(255, 255, 255, .2); }
#exterior-ui button:disabled { opacity: .45; pointer-events: none; }
#tk-wipe { position: fixed; inset: 0; z-index: 140; background: #fffaf4; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
#tk-wipe.on { opacity: 1; }
#tk-flash { position: fixed; inset: 0; z-index: 150; pointer-events: none; background: #8a3cc8; opacity: 0; }
#tk-flash.f1 { animation: dark-f1 .45s ease-out; }
#tk-caption { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); z-index: 17; pointer-events: none; font: 900 34px/1.2 system-ui, -apple-system, sans-serif; color: #fff; text-shadow: 0 2px 0 #7a5a8c, 0 4px 14px rgba(60, 20, 70, .45); white-space: nowrap; }
#tk-caption.sub { font-size: 20px; font-weight: 800; padding: 6px 14px; border-radius: 14px; background: rgba(40, 24, 50, .55); text-shadow: none; }
#tk-caption[hidden] { display: none; }
.dark-bubble.small.tk-alien { background: #d8f5c6; color: #2f5a2a; }
.dark-bubble.small.tk-alien::after { border-top-color: #d8f5c6; }
@media (max-width: 760px) { #tk-caption { font-size: 26px; top: 26%; } #tk-caption.sub { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { #tk-wipe { transition-duration: .01s; } #tk-flash.f1 { animation-duration: .01s; } }
.action-bar.tk-on .tk-retake { order: -1; }   /* 44차: 집 빼앗기 중엔 되찾기 버튼이 줄 맨 앞 */

/* 45차UI(11-01 전하 명세 + 제미나이 UX 검토): 아래 행동 줄은 '🎈 놀기' 하나로 접고, 밖에선 시점 칩을 '📷 시점'으로 접음. 왼쪽 위 버튼 줄은 같은 간격·흰 반투명 기본, 켜졌을 때만 색, 옅은 그림자, 역할별 묶음 */
.viewport-bottom-controls { pointer-events: none; }
.fold-btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 250, 245, .8); color: #5b4636; font: 700 13px/1 system-ui, -apple-system, sans-serif; box-shadow: 0 2px 6px rgba(80, 50, 90, .12); backdrop-filter: blur(6px); cursor: pointer; white-space: nowrap; }
.fold-btn.on { background: rgba(255, 236, 214, .92); }
.fold-btn.small { padding: 5px 12px; font-size: 12px; }
.action-bar.folded { display: none !important; }
#vp-fold { display: none; }
html.ext-on #vp-fold { display: inline-flex; }
html.ext-on .view-presets-bar { display: none; }
html.ext-on.vp-open .view-presets-bar { display: flex; }
#exterior-ui { pointer-events: none; gap: 6px; }
#exterior-ui button { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; line-height: 1; border: 1px solid rgba(255, 255, 255, .8); background: rgba(255, 250, 245, .78); color: #5b4636; box-shadow: 0 2px 6px rgba(80, 50, 90, .12); }
#exterior-ui button[hidden] { display: none !important; }
#exterior-ui .pi { display: inline-block; width: 1.2em; text-align: center; }
#exterior-ui .grp-start { margin-top: 8px; }
#exterior-ui button#play-toggle, #exterior-ui button#dark-toggle, #exterior-ui button#act-takeover { background: rgba(255, 250, 245, .78) !important; color: #5b4636 !important; }
#exterior-ui button#play-toggle.mode-on { background: linear-gradient(135deg, rgba(255, 228, 240, .95), rgba(236, 222, 255, .95)) !important; }
#exterior-ui button#dark-toggle.mode-on { background: linear-gradient(135deg, rgba(70, 30, 80, .9), rgba(150, 30, 70, .88)) !important; color: #fff !important; }
#exterior-ui button.tk-retake { background: linear-gradient(135deg, rgba(220, 250, 232, .95), rgba(196, 240, 218, .93)) !important; color: #2f5a3a !important; }
#exterior-ui button#tk-stop { background: rgba(255, 250, 245, .85) !important; color: #5b4636 !important; }
#exterior-ui.tk-mode #play-toggle, #exterior-ui.tk-mode #dark-toggle { display: none !important; }
@media (max-width: 760px) {
  html #exterior-ui { gap: 5px; }
  html #exterior-ui button { font-size: 12px; padding: 6px 10px; gap: 5px; }
  html #exterior-ui .grp-start { margin-top: 6px; }
  .fold-btn { padding: 7px 14px; font-size: 12px; }
  #vp-fold, html.ext-on #vp-fold { display: none; }
}
@media (max-width: 760px) { html #play-log { top: auto; bottom: 112px; max-width: min(200px, calc(100% - 24px)); } }   /* 45차UI: 왼쪽 위 버튼 줄이 길어져 놀고 간 친구 기록은 아래 왼쪽(행동 줄을 접어 자리가 남)으로 */

/* 47차(11-01 전하 "산사템플처럼 방문자 시점"): 방문자 화면은 왼쪽 위 줄·시점 칩·설정판을 숨기고 놀기·방명록·방문 기록·나가기만. 근접 버튼은 캐릭터 머리 위를 따라다니는 둥근 아이콘(44px 이상) */
html.vis-on #exterior-ui:not(.tk-mode), html.vis-on #exterior-ui.tk-mode #ext-sky, html.vis-on #exterior-ui.tk-mode #photo-upload, html.vis-on #exterior-ui.tk-mode #vis-trial, html.vis-on .view-presets-bar, html.vis-on #vp-fold, html.vis-on #panel, html.vis-on #sheet-handle, html.vis-on .view-footer .hint, html.vis-on #btn-undo, html.vis-on #btn-redo, html.vis-on #btn-tour, html.vis-on .camera-hud { display: none !important; }
html.vis-on .workspace { grid-template-columns: minmax(0, 1fr); }
html.vis-on .action-bar .action-btn:not(.vis-emote) { display: none !important; }
.action-bar .action-btn.vis-emote[hidden] { display: none !important; }
#vis-top { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 95; display: none; }
html.vis-on #vis-top { display: block; }
#vis-exit { font: 700 13px/1 system-ui, -apple-system, sans-serif; padding: 10px 14px; min-height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .8); background: rgba(255, 250, 245, .82); color: #5b4636; box-shadow: 0 2px 8px rgba(80, 50, 90, .12); backdrop-filter: blur(6px); cursor: pointer; }
#vis-near { position: absolute; left: 0; top: 0; z-index: 17; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 999px; background: rgba(255, 250, 245, .55); backdrop-filter: blur(4px); box-shadow: 0 4px 14px rgba(80, 50, 90, .14); pointer-events: auto; animation: vis-in .18s ease-out; }
#vis-near[hidden] { display: none; }
@keyframes vis-in { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }
.vis-nb-name { font: 700 12px/1 system-ui, -apple-system, sans-serif; color: #6b4f63; padding: 0 2px 0 4px; }
.vis-nb { position: relative; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #fff; background: radial-gradient(circle at 35% 30%, #fffaf3, #ffe3ef); font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(197, 140, 255, .35); cursor: pointer; padding: 0; touch-action: manipulation; }
.vis-nb:disabled, .vis-nb.busy { opacity: .45; cursor: default; }
.vis-nb.pop { animation: vis-pop .35s ease-out; }
@keyframes vis-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22) translateY(-4px); } 100% { transform: scale(1); } }
.vis-nb.cool::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(rgba(197, 140, 255, .85) var(--a, 0deg), transparent 0); -webkit-mask: radial-gradient(circle, transparent 27px, #000 28px); mask: radial-gradient(circle, transparent 27px, #000 28px); animation: vis-cool 3s linear forwards; pointer-events: none; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
@keyframes vis-cool { from { --a: 360deg; } to { --a: 0deg; } }
#vis-fade { position: fixed; inset: 0; z-index: 120; background: #fff8f0; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
#vis-fade.on { opacity: 1; pointer-events: auto; }
#vis-tap-hint { position: absolute; left: 0; top: 0; z-index: 15; font-size: 34px; pointer-events: none; animation: vis-tap 1.1s ease-in-out infinite; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
@keyframes vis-tap { 0%, 100% { margin-top: 0; } 50% { margin-top: 10px; } }
#vis-swipe-hint { position: absolute; left: 50%; top: 52%; z-index: 15; font-size: 38px; pointer-events: none; animation: vis-swipe 1.4s ease-in-out infinite; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); }
@keyframes vis-swipe { 0%, 100% { transform: translateX(-70px); } 50% { transform: translateX(40px); } }
#vis-tap-hint[hidden], #vis-swipe-hint[hidden] { display: none; }
#gb-open.vis-sparkle { animation: vis-spark 0.9s ease-in-out 6; }
@keyframes vis-spark { 0%, 100% { box-shadow: 0 8px 24px rgba(197, 140, 255, .55); filter: none; } 50% { box-shadow: 0 0 0 6px rgba(255, 233, 140, .75), 0 0 28px 8px rgba(255, 210, 120, .8); filter: brightness(1.12); } }
@media (max-width: 760px) { .vis-nb { width: 48px; height: 48px; font-size: 23px; } #vis-exit { font-size: 12px; padding: 9px 12px; } }
@media (prefers-reduced-motion: reduce) { #vis-tap-hint, #vis-swipe-hint, .vis-nb.pop, #gb-open.vis-sparkle { animation: none; } #vis-fade { transition-duration: .05s; } }

/* 51차(11-01 코덱스 UX P1): 방문 끝 화면·첫 안내 글·근접 버튼 글·터치 44px·폰 아래 줄 한 묶음·짧은 가로 화면 방명록 */
#vis-exit { min-height: 44px; }
html.vis-bye #exterior-ui, html.vis-bye #play-log, html.vis-bye .viewport-bottom-controls, html.vis-bye .view-presets-bar, html.vis-bye #vp-fold, html.vis-bye #panel, html.vis-bye #sheet-handle, html.vis-bye .camera-hud, html.vis-bye .view-footer .hint, html.vis-bye #btn-undo, html.vis-bye #btn-redo, html.vis-bye #btn-tour { display: none !important; }
#vis-bye { position: fixed; left: 50%; bottom: calc(24px + var(--safe-bottom, 0px)); transform: translateX(-50%); z-index: 96; width: min(320px, calc(100vw - 32px)); box-sizing: border-box; padding: 16px 18px; border-radius: 20px; background: rgba(255, 250, 245, .94); color: #5b4636; text-align: center; box-shadow: 0 10px 30px rgba(80, 50, 90, .25); font-family: system-ui, -apple-system, sans-serif; }
#vis-bye[hidden] { display: none; }
#vis-bye .vb-t { margin: 0; font-size: 17px; font-weight: 800; }
#vis-bye .vb-s { margin: 4px 0 12px; font-size: 13px; color: #8a7466; }
#vis-bye .vb-go { width: 100%; min-height: 48px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #ff8fb1, #c58cff); color: #fff; font: 800 16px system-ui, -apple-system, sans-serif; cursor: pointer; box-shadow: 0 6px 18px rgba(197, 140, 255, .45); }
html.vis-bye #gb-open { bottom: calc(170px + var(--safe-bottom, 0px)); }
#vis-guide { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 15; max-width: calc(100% - 24px); box-sizing: border-box; padding: 8px 14px; border-radius: 14px; background: rgba(255, 250, 245, .9); color: #5b4636; font: 700 13px/1.5 system-ui, -apple-system, sans-serif; text-align: left; white-space: pre-line; box-shadow: 0 3px 12px rgba(80, 50, 90, .16); pointer-events: none; }
#vis-guide[hidden] { display: none; }
#vis-near { padding-bottom: 22px; border-radius: 26px; }
.vis-nb-lb { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); white-space: nowrap; font: 700 12px/1 system-ui, -apple-system, sans-serif; color: #5b4636; text-shadow: 0 0 3px #fff, 0 0 3px #fff; pointer-events: none; }
#gb-close { min-width: 44px; min-height: 44px; }
#gb-list { min-height: 0; }
@media (max-width: 760px) {
  html.vis-on .view-footer { display: none; }   /* 방문자 폰: '준비 완료' 줄 숨기고 아래 공간을 놀기·방명록에 */
  html.vis-on .viewport-bottom-controls { bottom: calc(12px + var(--safe-bottom, 0px)); left: 12px; transform: none; width: calc(100% - 24px); align-items: flex-start; }   /* 놀기는 왼쪽, 방명록은 오른쪽(360폭에서도 안 겹침) */
  html.vis-on .fold-btn { min-height: 44px; padding: 0 18px; font-size: 14px; }
  html.vis-on .action-bar { padding: 6px 8px 6px 8px; scroll-padding-right: 40px; }
  html.vis-on .action-bar .action-btn.vis-emote { min-height: 44px; padding: 0 12px; font-size: 13px; }
  html.vis-on .action-bar .action-btn.vis-emote:last-child { margin-right: 32px; }   /* 마지막 꾸벅까지 밀어서 보이게 */
  html.vis-on #gb-open { bottom: calc(12px + var(--safe-bottom, 0px)); right: 12px; min-height: 44px; padding: 0 16px; font-size: 15px; gap: 6px; animation: none; }
  html.vis-on #gb-open span { font-size: 17px; }
  html.vis-on #play-log { top: auto; bottom: calc(68px + var(--safe-bottom, 0px)); left: 12px; max-width: calc(100% - 24px); }
  html.vis-on #play-log .pl-head { min-height: 40px; padding: 0 14px; }
  html.vis-on:has(#play-fold.on) #gb-open, html.vis-on:has(#play-fold.on) #play-log { display: none; }   /* 놀기 펼치면 아래 줄은 놀기만 */
  html.vis-on:has(#gb-panel:not([hidden])) .viewport-bottom-controls, html.vis-on:has(#gb-panel:not([hidden])) #play-log, html #gb-open[aria-expanded="true"] { display: none; }   /* 방명록 열면 아래 줄 숨김 */
  html #gb-panel, html.visitor #gb-panel { left: 8px; right: 8px; width: auto; bottom: calc(8px + var(--safe-bottom, 0px)); max-height: calc(100dvh - 90px); z-index: 100; }
}
@media (max-height: 520px) {   /* 폰 가로 등 낮은 화면: 방명록은 위아래 여백 안에 통째로, 안쪽만 스크롤 */
  html #gb-panel, html.visitor #gb-panel { top: calc(8px + env(safe-area-inset-top, 0px)); bottom: calc(8px + var(--safe-bottom, 0px)); max-height: none; z-index: 100; overflow-y: auto; }
  #gb-panel #gb-list { overflow: visible; flex: none; }
  #gb-panel .gb-top { position: sticky; top: 0; z-index: 1; background: var(--panel-bg); padding-top: 6px; }
  #gb-open[aria-expanded="true"] { display: none; }
  #vis-bye { bottom: calc(8px + var(--safe-bottom, 0px)); padding: 10px 14px; width: min(280px, calc(100vw - 32px)); }   /* 52차(검토 제미나이6): 낮은 화면에서 끝 패널 작게(끌 자리 남김) */
  #vis-bye .vb-t { font-size: 15px; }   /* 52차(검토 제미나이6) */
  #vis-bye .vb-s { margin: 2px 0 8px; font-size: 12px; }   /* 52차(검토 제미나이6) */
  #vis-bye .vb-go { min-height: 38px; font-size: 14px; }   /* 52차(검토 제미나이6) */
  html.vis-bye #gb-open { bottom: calc(118px + var(--safe-bottom, 0px)); }   /* 52차(검토 제미나이6): 작아진 패널 위로 */
}
#vis-in { display: none; position: fixed; right: 16px; bottom: calc(148px + var(--safe-bottom, 0px)); z-index: 91; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid #fff; background: linear-gradient(135deg, #7fd6a8, #5fb8e8); color: #fff; font: 800 15px/1 system-ui, -apple-system, sans-serif; box-shadow: 0 6px 18px rgba(80, 150, 200, .4); cursor: pointer; touch-action: manipulation; }   /* 52차(전하 지시): 바로 들어가기(방문자 바깥에서만) */
html.vis-on.ext-on #vis-in { display: inline-flex; }   /* 52차(전하 지시) */
@media (max-width: 760px) { html.vis-on.ext-on #vis-in { bottom: calc(68px + var(--safe-bottom, 0px)); right: 12px; font-size: 14px; padding: 0 16px; } html.vis-on:has(#play-fold.on) #vis-in, html.vis-on:has(#gb-panel:not([hidden])) #vis-in { display: none; } }   /* 52차(전하 지시): 폰 세로는 방명록 버튼 바로 위, 놀기·방명록 펼치면 숨김 */
@media (max-height: 520px) { html.vis-on.ext-on #vis-in { bottom: calc(12px + var(--safe-bottom, 0px)); right: auto; left: 16px; } html.vis-on:has(#gb-panel:not([hidden])) #vis-in { display: none; } }   /* 52차(전하 지시): 낮은 가로 화면은 왼쪽 아래(놀기 버튼·놀고 간 친구와 안 겹침) */
html.vis-on:has(#play-fold.on) #vis-in { display: none; }   /* 52차(전하 지시): 놀기 펼치면 숨김(행동 줄과 안 겹치게) */