:root {
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --hud-bg: rgba(10, 18, 28, 0.20);
  --hud-bg-hover: rgba(10, 18, 28, 0.30);
  --hud-whisper: rgba(10, 18, 28, 0.14);
  --hud-border: rgba(255, 255, 255, 0.22);
  --hud-border-soft: rgba(255, 255, 255, 0.15);
  --hud-active-fill: rgba(255, 255, 255, 0.22);
  --hud-active-border: rgba(255, 255, 255, 0.44);
  --modal-backdrop: rgba(4, 10, 18, 0.44);
  --modal-surface: rgba(12, 20, 32, 0.76);
  --modal-card-sub: rgba(255, 255, 255, 0.08);
  --modal-card-border: rgba(255, 255, 255, 0.14);
  --text-white: #ffffff;
  --text-sub: rgba(255, 255, 255, 0.76);
  --text-muted: rgba(255, 255, 255, 0.56);
  --text-shadow-crisp: 0 1px 3px rgba(0, 0, 0, 0.48);
  --accent-cyan: #5eead4;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.02em;
  background: #6ebef0;
  color: var(--text-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .title-font, button, input, textarea {
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
}

button {
  touch-action: manipulation;
  color: var(--text-white);
  background: none;
  border: none;
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden {
  display: none !important;
}

/* 공용 흰색 단색 선 아이콘 */
.hud-line-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.36));
}

/* 3차원 바다 캔버스 */
#canvas-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  touch-action: none;
}

/* 바닷속 잠수 시 시야 중심은 100% 투명·선명하게 유지하고 화면 맨 위·외곽 테두리에만 은은한 깊이감을 더하는 수중 필터 */
#underwater-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.85s ease;
  background:
    radial-gradient(ellipse 78% 28% at 50% 0%, rgba(188, 240, 255, 0.055) 0%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle at 50% 52%, rgba(0, 0, 0, 0) 78%, rgba(18, 58, 104, 0.09) 100%);
}

#underwater-overlay.mood-sunset {
  background:
    radial-gradient(ellipse 76% 26% at 50% 0%, rgba(252, 222, 198, 0.055) 0%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 78%, rgba(24, 48, 88, 0.10) 100%);
}

#underwater-overlay.mood-moonlight {
  background:
    radial-gradient(ellipse 74% 26% at 50% 0%, rgba(162, 214, 248, 0.045) 0%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 76%, rgba(8, 24, 52, 0.13) 100%);
}

#underwater-overlay.active {
  opacity: 1;
}

/* 공간·화면 전환 시 속도는 그대로 빠르게 유지하면서 뻑뻑한 끊김만 실크처럼 감싸는 바다 빛안개 베일 */
#scene-transition-veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 28;
  opacity: 0;
  will-change: opacity;
  background:
    radial-gradient(circle at 50% 38%, rgba(238, 251, 255, 0.54) 0%, rgba(142, 212, 240, 0.42) 52%, rgba(38, 102, 156, 0.44) 100%);
  transition: opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

#scene-transition-veil.mood-sunset {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 238, 222, 0.54) 0%, rgba(226, 158, 138, 0.42) 52%, rgba(46, 102, 154, 0.46) 100%);
}

#scene-transition-veil.mood-moonlight {
  background:
    radial-gradient(circle at 50% 38%, rgba(186, 228, 255, 0.42) 0%, rgba(44, 104, 168, 0.48) 54%, rgba(14, 38, 76, 0.56) 100%);
}

#scene-transition-veil.instant-flash {
  transition: none !important;
  opacity: 0.78;
}

/* 수면 경계를 넘나들 때(약 0.7초) 시야를 실크처럼 스쳐 지나가는 수면 굴절·물막 전환 베일 */
#water-crossing-veil {
  position: fixed;
  left: -6%;
  right: -6%;
  top: -35%;
  bottom: -35%;
  pointer-events: none;
  z-index: 2;
  opacity: var(--veil-op, 0);
  transform: translate3d(0, var(--veil-y, 44%), 0) scaleY(var(--veil-scale, 1));
  will-change: transform, opacity;
  background:
    radial-gradient(ellipse 72% 16% at 50% 50%, rgba(226, 253, 255, 0.42) 0%, rgba(132, 230, 252, 0.18) 46%, rgba(56, 189, 248, 0.0) 100%),
    linear-gradient(
      180deg,
      rgba(165, 243, 252, 0.0) 0%,
      rgba(186, 246, 255, 0.12) 41%,
      rgba(232, 254, 255, 0.34) 49.5%,
      rgba(88, 204, 242, 0.22) 56%,
      rgba(24, 118, 188, 0.08) 68%,
      rgba(14, 74, 134, 0.0) 100%
    );
}

#water-crossing-veil.mood-sunset {
  background:
    radial-gradient(ellipse 72% 16% at 50% 50%, rgba(255, 236, 214, 0.40) 0%, rgba(255, 198, 174, 0.16) 48%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(
      180deg,
      rgba(255, 224, 198, 0.0) 0%,
      rgba(255, 228, 206, 0.12) 41%,
      rgba(255, 244, 230, 0.32) 49.5%,
      rgba(122, 196, 232, 0.20) 57%,
      rgba(32, 92, 152, 0.0) 100%
    );
}

#water-crossing-veil.mood-moonlight {
  background:
    radial-gradient(ellipse 72% 16% at 50% 50%, rgba(196, 236, 255, 0.34) 0%, rgba(112, 192, 245, 0.15) 48%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(
      180deg,
      rgba(140, 205, 255, 0.0) 0%,
      rgba(165, 222, 255, 0.10) 41%,
      rgba(214, 244, 255, 0.28) 49.5%,
      rgba(64, 148, 214, 0.20) 57%,
      rgba(12, 46, 92, 0.0) 100%
    );
}

/* =========================================================================
   캐릭터 머리 위 이름표 & 말풍선 (스윔픽 스타일 깔끔한 어두운 반투명 캡슐)
   ========================================================================= */
#labels-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.char-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(-999px, -999px, 0) translate(-50%, -100%);
  will-change: transform;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.char-name-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(10, 18, 28, 0.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.94);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-shadow: var(--text-shadow-crisp);
  white-space: nowrap;
}

.char-name-tag.me {
  background: rgba(10, 18, 28, 0.50);
  border-color: rgba(255, 255, 255, 0.44);
  color: #ffffff;
  padding: 3px 9px 3px 5px;
}

.char-me-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.25;
  color: #072638;
  background: linear-gradient(135deg, #a5f3fc 0%, #72efdd 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  text-shadow: none;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.speech-bubble {
  background: rgba(10, 18, 28, 0.64);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  max-width: 195px;
  text-align: center;
  word-break: keep-all;
  text-shadow: var(--text-shadow-crisp);
  animation: popBubble 0.28s cubic-bezier(0.34, 1.45, 0.64, 1);
  position: relative;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: rgba(10, 18, 28, 0.64) transparent transparent;
}

@keyframes popBubble {
  0% { transform: scale(0.75) translateY(6px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* =========================================================================
   가상 조이스틱 완전 비활성화 + 전 화면 부드러운 다각도 카메라 커서
   ========================================================================= */
#canvas-container canvas {
  cursor: grab;
}

#canvas-container canvas.camera-orbiting {
  cursor: grabbing !important;
}

#joystick-zone,
#joystick-base {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#joystick-knob {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  pointer-events: none !important;
}

/* =========================================================================
   후보 1: 상단 한 줄 통합 바 (접속자·내정보 + 맵 이동)
   ========================================================================= */
#top-bar {
  position: fixed;
  top: calc(10px + var(--safe-top));
  left: calc(12px + var(--safe-left));
  right: calc(12px + var(--safe-right));
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

#top-bar > * {
  pointer-events: auto;
}

.hud-glass-pill {
  height: 38px;
  background: var(--hud-bg);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--hud-border);
  border-radius: 999px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-white);
  font-size: 13px;
  font-weight: 500;
  text-shadow: var(--text-shadow-crisp);
  white-space: nowrap;
  transition: transform 0.12s ease, background 0.15s ease;
}

.hud-glass-pill:active {
  transform: scale(0.96);
  background: var(--hud-bg-hover);
}

.top-left-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.presence-pill {
  padding: 0 12px;
  min-width: 0;
}

.account-pill {
  padding: 0 5px;
  flex-shrink: 0;
}

.friends-top-label {
  color: rgba(214, 250, 245, 0.96);
  font-size: 12.5px;
  font-weight: 600;
}

.live-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 2.5px rgba(74, 222, 128, 0.28);
  animation: pulseLive 2.2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes pulseLive {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.72; }
}

.presence-counts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.88);
}

.presence-counts strong {
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
}

.presence-divider {
  opacity: 0.36;
  font-size: 11px;
}

.auth-mini-badge {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.auth-mini-badge.linked {
  background: rgba(94, 234, 212, 0.22);
  border-color: rgba(94, 234, 212, 0.55);
}

.map-move-pill {
  padding: 0 13px;
  font-weight: 600;
  gap: 6px;
  flex-shrink: 0;
}

.map-move-pill .hud-line-icon {
  width: 17px;
  height: 17px;
}

/* =========================================================================
   상단 바로 아래 은은한 보조 위치·수심 및 기적 상태 줄
   ========================================================================= */
#second-bar {
  position: fixed;
  top: calc(54px + var(--safe-top));
  left: calc(12px + var(--safe-left));
  max-width: calc(100vw - 82px - var(--safe-left) - var(--safe-right));
  z-index: 18;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

#second-bar > * {
  pointer-events: auto;
}

.hud-whisper-pill {
  height: 27px;
  background: var(--hud-whisper);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hud-border-soft);
  border-radius: 999px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 11.5px;
  font-weight: 500;
  text-shadow: var(--text-shadow-crisp);
  white-space: nowrap;
}

.zone-whisper-pill {
  min-width: 0;
  overflow: hidden;
}

#zone-name {
  font-weight: 600;
  color: #ffffff;
  font-size: 11.5px;
}

.whisper-sep {
  opacity: 0.45;
}

.depth-sub {
  color: rgba(255, 255, 255, 0.80);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zone-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #fde047;
  box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.26);
}

.zone-dot.surface {
  background: #7dd3fc;
  box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.28);
}

.zone-dot.shallow {
  background: #5eead4;
  box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.28);
}

.zone-dot.deep {
  background: #93c5fd;
  box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.28);
}

.zone-dot.hotspring {
  background: #f9a8d4;
  box-shadow: 0 0 0 2px rgba(249, 168, 212, 0.32);
}

.miracle-whisper-btn {
  flex-shrink: 0;
  transition: transform 0.12s ease, background 0.16s ease;
}

.miracle-whisper-btn:active {
  transform: scale(0.95);
}

.miracle-whisper-btn.active-miracle {
  background: rgba(56, 189, 248, 0.30);
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}

.miracle-mini-icon {
  font-size: 11px;
  line-height: 1;
}

.buddy-whisper-btn {
  flex-shrink: 0;
  background: rgba(244, 114, 182, 0.24);
  border-color: rgba(249, 168, 212, 0.55);
  color: #ffffff;
  transition: transform 0.12s ease, background 0.16s ease;
}

.buddy-whisper-btn:active {
  transform: scale(0.95);
  background: rgba(244, 114, 182, 0.38);
}

.buddy-dismiss-sub {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.85);
}

/* 독립 공간(4대 비밀 명소 · 내 산호 아지트) 상단 복귀 바 */
.space-return-bar {
  position: fixed;
  top: calc(86px + var(--safe-top));
  left: calc(12px + var(--safe-left));
  z-index: 22;
  background: rgba(10, 18, 28, 0.64);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  border: 1px solid rgba(94, 234, 212, 0.50);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 82px - var(--safe-left) - var(--safe-right));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.space-return-badge {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.space-exit-btn {
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.space-exit-btn:active {
  transform: scale(0.95);
}

.spot-theme-inline-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 34, 52, 0.72);
  border: 1px solid rgba(153, 246, 228, 0.36);
  flex-shrink: 0;
}

.spot-theme-inline-ctrl.hidden {
  display: none !important;
}

.spot-theme-inline-label {
  font-size: 11px;
  font-weight: 700;
  color: #99f6e4;
  white-space: nowrap;
}

#spot-theme-inline-slider {
  width: 68px;
  height: 4px;
  accent-color: #5eead4;
  cursor: pointer;
}

.spot-theme-inline-val {
  font-size: 10.5px;
  font-weight: 700;
  min-width: 28px;
  text-align: right;
  color: #e0f2fe;
}

@media (max-width: 520px) {
  .space-return-bar {
    flex-wrap: wrap;
    border-radius: 16px;
    padding: 5px 8px;
    gap: 5px;
  }
  #spot-theme-inline-slider {
    width: 56px;
  }
}

/* 왼쪽 상단 '오늘의 바다' 감성 체류·흔적 정보 카드 */
.today-sea-card {
  position: fixed;
  top: calc(86px + var(--safe-top));
  left: calc(12px + var(--safe-left));
  z-index: 18;
  background: rgba(10, 18, 28, 0.22);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 14px;
  padding: 7px 11px 8px;
  min-width: 156px;
  max-width: min(215px, calc(100vw - 84px - var(--safe-left) - var(--safe-right)));
  color: #ffffff;
  text-shadow: var(--text-shadow-crisp);
  transition: opacity 0.28s ease, transform 0.28s ease, background 0.18s ease;
}

body.in-subspace .today-sea-card,
body.in-secret-spot .today-sea-card,
body.in-sanctuary-space .today-sea-card,
body:has(#space-return-bar:not(.hidden)) .today-sea-card {
  top: calc(126px + var(--safe-top));
  transition: opacity 0.28s ease, transform 0.28s ease, background 0.18s ease;
}

.today-sea-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-shadow: var(--text-shadow-crisp);
}

.today-sea-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.today-sea-title::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.24);
}

.today-sea-fold-mark {
  font-size: 10px;
  opacity: 0.72;
  transition: transform 0.2s ease;
}

.today-sea-card.collapsed {
  padding: 5px 10px;
  border-radius: 999px;
  min-width: 0;
}

.today-sea-card.collapsed .today-sea-fold-mark {
  transform: rotate(180deg);
}

.today-sea-body {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.today-sea-card.collapsed .today-sea-body {
  display: none;
}

.today-sea-date {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1px;
}

.today-sea-metric {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.32;
  white-space: nowrap;
}

/* 초기 한 줄 조작 안내 (중앙 대화 입력 바 바로 위에 표시 후 자연스럽게 사라짐) */
#control-hint {
  position: fixed;
  bottom: calc(118px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 148px - var(--safe-left) - var(--safe-right));
  z-index: 15;
  background: var(--hud-whisper);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hud-border-soft);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: var(--text-shadow-crisp);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#control-hint.fade-out {
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
}

/* =========================================================================
   후보 1: 오른쪽 접이식 세로 원형 아이콘 메뉴 줄 (스윔픽 스타일)
   ========================================================================= */
.right-icon-rail {
  position: fixed;
  top: calc(58px + var(--safe-top));
  right: calc(12px + var(--safe-right));
  z-index: 19;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.right-rail-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-height: 520px;
  opacity: 1;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease, transform 0.24s ease;
  overflow: visible;
}

.right-icon-rail.collapsed .right-rail-items {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  overflow: hidden;
}

.right-icon-rail.collapsed #rail-fold-svg {
  transform: rotate(180deg);
}

.rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  min-width: 46px;
}

.rail-btn:active .rail-circle {
  transform: scale(0.92);
  background: var(--hud-bg-hover);
}

.rail-circle {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hud-bg);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--hud-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.14s ease, background 0.16s ease, border-color 0.16s ease;
}

.rail-circle.small {
  width: 36px;
  height: 36px;
}

.rail-circle.small .hud-line-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.24s ease;
}

.rail-caption {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.1;
  color: #ffffff;
  text-shadow: var(--text-shadow-crisp);
  white-space: nowrap;
}

.attend-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fb7185;
  border: 1.5px solid #ffffff;
}

/* =========================================================================
   하단 좌·우 대칭 원형 보조 버튼 (왼쪽: 내 공간·채팅 / 오른쪽: 수심 위·아래)
   ========================================================================= */
.left-quick-rail {
  position: fixed;
  left: calc(12px + var(--safe-left));
  bottom: calc(74px + var(--safe-bottom));
  z-index: 19;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

#action-pad {
  position: fixed;
  right: calc(12px + var(--safe-right));
  bottom: calc(74px + var(--safe-bottom));
  z-index: 19;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.depth-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.quick-circle-btn {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--hud-bg);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--hud-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #ffffff;
  text-shadow: var(--text-shadow-crisp);
  transition: transform 0.14s ease, background 0.16s ease, border-color 0.16s ease;
}

.quick-circle-btn:active,
.quick-circle-btn.active {
  transform: scale(0.93);
  background: var(--hud-active-fill);
  border-color: var(--hud-active-border);
}

.quick-circle-btn .hud-line-icon {
  width: 17px;
  height: 17px;
}

.quick-circle-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
}

/* 왼쪽 하단 세로형 바다 보물(바다유리 · 무지개 자개 · 별모래) 보유 현황 캡슐 */
.hud-treasure-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  min-width: 52px;
  padding: 6px 7px;
  border-radius: 18px;
  background: var(--hud-bg);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  border: 1px solid var(--hud-border);
  box-shadow: 0 6px 18px rgba(4, 14, 28, 0.22);
  cursor: pointer;
  user-select: none;
  transition: transform 0.14s ease, border-color 0.16s ease, background 0.16s ease;
}

.hud-treasure-stack:active {
  transform: scale(0.95);
  background: var(--hud-active-fill);
  border-color: var(--hud-active-border);
}

.hud-treasure-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 2.5px 2px;
  border-radius: 9px;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), background 0.18s ease;
}

.hud-treasure-row + .hud-treasure-row {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: 4px;
}

.hud-treasure-row.bump {
  transform: scale(1.12);
  background: rgba(94, 234, 212, 0.22);
}

.hud-gem-svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.36));
}

.hud-treasure-num {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  text-shadow: var(--text-shadow-crisp);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   화면 하단 정중앙 고정 즉시 대화 입력 바 & 중앙 모션 팝오버
   ========================================================================= */
.chat-popover.hud-exposed-chat {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(68px + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: 20;
  background: rgba(10, 18, 28, 0.56);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  height: 42px;
  padding: 4px 5px 4px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(328px, calc(100vw - 156px - var(--safe-left) - var(--safe-right)));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  transition: opacity 0.24s ease, transform 0.24s ease, border-color 0.16s ease, background 0.16s ease;
}

.chat-popover.hud-exposed-chat:focus-within {
  transform: translateX(-50%);
  background: rgba(10, 18, 28, 0.78);
  border-color: rgba(153, 246, 228, 0.62);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30);
}

body.observe-panel-open #chat-popover,
body.observe-panel-open #control-hint,
body:has(#creature-observe-panel:not(.hidden)) #chat-popover,
body:has(#creature-observe-panel:not(.hidden)) #control-hint,
body.diver-card-open #chat-popover,
body.diver-card-open #control-hint,
body:has(#diver-card-popover:not(.hidden)) #chat-popover,
body:has(#diver-card-popover:not(.hidden)) #control-hint,
body.in-sanctuary-space.sanctuary-decorating #chat-popover,
body.in-sanctuary-space.sanctuary-decorating #control-hint,
body:has(#sanctuary-deco-bar:not(.hidden)) #chat-popover,
body:has(#sanctuary-deco-bar:not(.hidden)) #control-hint {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

.chat-bar-icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.78);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.social-popover-dock {
  position: fixed;
  bottom: calc(118px + var(--safe-bottom));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 23;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px - var(--safe-left) - var(--safe-right));
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.emote-pill-bar {
  background: rgba(10, 18, 28, 0.56);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid var(--hud-border);
  border-radius: 999px;
  padding: 4px 5px;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}

.emote-pill-bar::-webkit-scrollbar {
  display: none;
}

.emote-btn {
  height: 33px;
  padding: 0 7.5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  font-size: 11.5px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
  text-shadow: var(--text-shadow-crisp);
  transition: background 0.14s ease, transform 0.12s ease;
}

.emote-btn:active {
  transform: scale(0.94);
  background: var(--hud-active-fill);
}

.emote-svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.emote-btn.chat-toggle {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.26);
  font-weight: 600;
}

.chat-popover {
  background: rgba(10, 18, 28, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  padding: 6px 8px;
  display: flex;
  gap: 6px;
  width: min(82vw, 290px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

/* 아이폰 화면 자동 줌인 방지를 위해 입력창 글자 크기 16px 고정 */
.chat-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 4px 2px;
  font-size: 16px;
  color: #ffffff;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}

.chat-input::placeholder {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
}

.chat-input:focus {
  background: transparent;
}

.chat-send-btn {
  height: 32px;
  background: rgba(94, 234, 212, 0.24);
  border: 1px solid rgba(153, 246, 228, 0.56);
  color: #ffffff;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 12.5px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.12s ease;
}

.chat-send-btn:active {
  transform: scale(0.95);
  background: rgba(94, 234, 212, 0.38);
}

/* =========================================================================
   후보 1: 하단 중앙 통합 캡슐 독 (영법 4종·잠수 / 해변 조개·타올 자동 전환)
   ========================================================================= */
.bottom-capsule-dock {
  position: fixed;
  bottom: calc(12px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 26;
  height: 48px;
  max-width: calc(100vw - 18px - var(--safe-left) - var(--safe-right));
  background: var(--hud-bg);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  border: 1px solid var(--hud-border);
  border-radius: 999px;
  padding: 4px 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  touch-action: manipulation;
  box-shadow: 0 8px 26px rgba(4, 14, 28, 0.22);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.bottom-capsule-dock::-webkit-scrollbar {
  display: none;
}

.dock-segment-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

#water-stroke-bar.hidden + #sand-play-bar.hidden + #sanctuary-dock-bar.hidden + .dock-divider {
  display: none;
}

.stroke-tab-btn,
.sand-tool-btn {
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: var(--text-shadow-crisp);
  white-space: nowrap;
  border: 1px solid transparent;
  touch-action: manipulation;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
}

.stroke-tab-btn:active,
.sand-tool-btn:active {
  transform: scale(0.95);
}

.stroke-tab-btn.active,
.sand-tool-btn.active {
  background: var(--hud-active-fill);
  border-color: var(--hud-active-border);
  color: #ffffff;
  font-weight: 700;
}

.dock-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.22);
  margin: 0 2px;
  flex-shrink: 0;
}

.dock-dive-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  text-shadow: var(--text-shadow-crisp);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.16s ease, transform 0.12s ease;
}

.dock-dive-btn:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.28);
}

.dock-dive-btn.float-mode {
  background: rgba(94, 234, 212, 0.22);
  border-color: rgba(94, 234, 212, 0.55);
}

/* 온천·아지트 방석 근처 앉기/일어나기 컨텍스트 캡슐 */
.hotspring-context-btn {
  position: fixed;
  bottom: calc(122px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 31;
  pointer-events: auto;
  touch-action: manipulation;
  background: rgba(10, 18, 28, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  text-shadow: var(--text-shadow-crisp);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
  transition: transform 0.15s ease, opacity 0.2s ease, background 0.18s ease, bottom 0.2s ease;
}

body.diver-card-open #hotspring-action-btn,
body:has(#diver-card-popover:not(.hidden)) #hotspring-action-btn {
  bottom: calc(194px + var(--safe-bottom));
}

body.social-open #hotspring-action-btn,
body:has(#social-dock:not(.hidden)) #hotspring-action-btn {
  bottom: calc(168px + var(--safe-bottom));
}

.sanctuary-rest-btn {
  background: rgba(94, 234, 212, 0.24);
  border-color: rgba(153, 246, 228, 0.62) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.sanctuary-rest-btn.standing {
  background: rgba(251, 191, 36, 0.26);
  border-color: rgba(253, 230, 138, 0.72) !important;
  color: #fffbeb !important;
}

.hotspring-context-btn.standing {
  background: rgba(12, 24, 36, 0.62);
  border-color: rgba(168, 244, 232, 0.56);
  color: #f4fffe;
}

.hotspring-context-btn:active {
  transform: translateX(-50%) scale(0.95);
}

/* 해저 온천 광장 24석 중 다른 좌석 클릭 시 뜨는 자리 옮기기 바 */
.hotspring-seat-move-bar {
  position: fixed;
  bottom: calc(168px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 23;
  background: rgba(10, 18, 28, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(94, 234, 212, 0.65);
  border-radius: 999px;
  padding: 5px 7px 5px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30);
  max-width: 92vw;
}

.hotspring-seat-label {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.seat-move-confirm-btn {
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(94, 234, 212, 0.28);
  border: 1px solid rgba(94, 234, 212, 0.72);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.seat-move-confirm-btn:active {
  transform: scale(0.95);
}

.seat-move-cancel-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 12px;
  flex-shrink: 0;
}

/* 내 산호 아지트(독립 개인 공간) 3차원 가구 꾸미기 팔레트 바 (모바일 세로에서도 7종 전체 한눈에 노출!) */
.sanctuary-deco-bar {
  position: fixed;
  bottom: calc(68px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 22;
  width: min(95vw, 680px);
  background: rgba(10, 18, 28, 0.74);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 20px;
  padding: 9px 11px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
}

.sanct-deco-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sanct-save-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sanct-deco-tools {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.sanct-tool-mini {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.sanct-tool-mini.active {
  background: rgba(248, 113, 113, 0.34);
  border-color: rgba(252, 165, 165, 0.75);
}

.sanct-tool-mini.done {
  background: rgba(94, 234, 212, 0.28);
  border-color: rgba(153, 246, 228, 0.74);
  color: #ffffff;
  font-weight: 700;
}

.sanct-deco-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: visible;
}

.sanct-deco-chip {
  height: 33px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.sanct-deco-chip.active {
  background: rgba(94, 234, 212, 0.28);
  border-color: rgba(94, 234, 212, 0.68);
  color: #ffffff;
  font-weight: 700;
}

/* 아지트 모래톱에 놓인 소품 클릭 시 소품 머리 위에 가볍게 떠오르는 2버튼 조작 바 */
.sanctuary-prop-popover {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 23;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 999px;
  background: rgba(12, 22, 34, 0.78);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  will-change: transform, opacity;
  transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: auto;
}

.sanctuary-prop-popover.hidden {
  display: none !important;
}

.sanct-pop-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.18s ease, border-color 0.18s ease;
}

.sanct-pop-btn.rotate {
  background: rgba(94, 234, 212, 0.28);
  border: 1px solid rgba(153, 246, 228, 0.72);
  color: #ffffff;
}

.sanct-pop-btn.rotate:hover {
  background: rgba(94, 234, 212, 0.40);
}

.sanct-pop-btn.stow {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: rgba(255, 255, 255, 0.94);
}

.sanct-pop-btn.stow:hover {
  background: rgba(255, 255, 255, 0.24);
}

.sanct-pop-btn:active {
  transform: scale(0.95);
}

body.in-sanctuary-space #hotspring-action-btn {
  bottom: calc(120px + var(--safe-bottom));
}

body.in-sanctuary-space.sanctuary-decorating #hotspring-action-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none !important;
}

body.in-sanctuary-space.sanctuary-decorating #control-hint,
body.observe-panel-open #control-hint,
body.diver-card-open #control-hint,
body.social-open #control-hint,
body:has(#social-dock:not(.hidden)) #control-hint,
body:has(#hotspring-action-btn:not(.hidden)) #control-hint {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none !important;
}

body.in-sanctuary-space.sanctuary-decorating #left-quick-rail,
body.in-sanctuary-space.sanctuary-decorating #action-pad {
  bottom: calc(196px + var(--safe-bottom));
}

body.in-sanctuary-space.sanctuary-decorating #chat-popover,
body.observe-panel-open #chat-popover,
body.diver-card-open #chat-popover {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none !important;
}

body.social-open #action-pad,
body:has(#social-dock:not(.hidden)) #action-pad {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none !important;
}

/* 옷장이 열려 있거나 물멍 모드일 때 주변 조작계 깔끔하게 숨김 */
body.wardrobe-open #top-bar,
body.wardrobe-open #labels-container,
body.wardrobe-open #joystick-zone,
body.wardrobe-open #action-pad,
body.wardrobe-open #left-quick-rail,
body.wardrobe-open #right-rail,
body.wardrobe-open #bottom-dock,
body.wardrobe-open #social-dock,
body.wardrobe-open #chat-popover,
body.wardrobe-open #second-bar,
body.wardrobe-open #today-sea-card,
body.wardrobe-open #diver-card-popover,
body.wardrobe-open #control-hint,
body.wardrobe-open #hotspring-action-btn,
body.wardrobe-open #hotspring-seat-move-bar,
body.wardrobe-open #space-return-bar,
body.wardrobe-open #sanctuary-deco-bar,
body.wardrobe-open #sanctuary-prop-popover {
  opacity: 0;
  pointer-events: none;
}

body.chill-mode #top-bar,
body.chill-mode #second-bar,
body.chill-mode #today-sea-card,
body.chill-mode #diver-card-popover,
body.chill-mode #right-rail,
body.chill-mode #left-quick-rail,
body.chill-mode #bottom-dock,
body.chill-mode #joystick-zone,
body.chill-mode #action-pad,
body.chill-mode #social-dock,
body.chill-mode #chat-popover,
body.chill-mode #control-hint,
body.chill-mode #labels-container,
body.chill-mode #hotspring-action-btn,
body.chill-mode #hotspring-seat-move-bar,
body.chill-mode #space-return-bar,
body.chill-mode #sanctuary-deco-bar,
body.chill-mode #sanctuary-prop-popover {
  opacity: 0;
  pointer-events: none;
}

/* 물멍 모드 전용 미니 하단 바 */
#chill-bar {
  position: fixed;
  bottom: calc(16px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 24;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--hud-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--hud-border);
  border-radius: 999px;
  padding: 4px 6px;
  max-width: 94vw;
}

body.chill-mode #chill-bar {
  display: inline-flex;
}

.chill-sub-btn,
.chill-exit-btn {
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.90);
  text-shadow: var(--text-shadow-crisp);
  white-space: nowrap;
}

.chill-exit-btn {
  background: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #ffffff;
  font-weight: 700;
}

/* =========================================================================
   알림 토스트 · 바다의 기적 배너 · 비밀 명소 발견 배너 · 시계 배너 · 로딩
   ========================================================================= */
#fish-toast {
  position: fixed;
  top: calc(90px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 32;
  background: rgba(10, 18, 28, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  padding: 9px 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
  width: max-content;
  max-width: min(88vw, 380px);
}

#fish-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast-icon {
  font-size: 20px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast-body-wrap {
  min-width: 0;
}

.toast-text-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1px;
}

.toast-text-desc {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.38;
  word-break: keep-all;
}

.miracle-event-banner,
.spot-discovery-banner {
  position: fixed;
  top: calc(90px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  background: rgba(10, 18, 30, 0.66);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 18px;
  padding: 8px 15px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #ffffff;
  max-width: min(86vw, 390px);
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
}

.spot-discovery-banner {
  top: calc(138px + var(--safe-top));
}

.miracle-banner-icon,
.spot-banner-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.miracle-banner-texts,
.spot-banner-texts {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.miracle-banner-texts strong,
.spot-banner-texts strong {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.miracle-banner-texts span,
.spot-banner-texts span {
  font-size: 11.5px;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.active-timer-banner {
  position: fixed;
  top: calc(178px + var(--safe-top));
  left: calc(12px + var(--safe-left));
  z-index: 21;
  background: rgba(10, 18, 28, 0.56);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  border: 1px solid rgba(94, 234, 212, 0.48);
  border-radius: 999px;
  padding: 5px 8px 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.timer-inline-stop {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
}

/* =========================================================================
   물섬(MULSEOM) 해변 로딩 화면 (부드러운 하늘 · 청록 바다 · 아이보리 모래)
   ========================================================================= */
#loading-indicator.mulseom-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  background: #f5ecdd;
  opacity: 1;
  transition: opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  -webkit-user-select: none;
}

#loading-indicator.mulseom-loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

#loading-indicator.mulseom-loading-screen.hidden {
  display: none !important;
}

.mulseom-scene-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 1) 부드러운 하늘색 영역 + 따스한 해변 햇살 기운 */
.mulseom-bg-sky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  background:
    radial-gradient(ellipse 68% 58% at 50% 24%, rgba(255, 252, 241, 0.78) 0%, rgba(255, 252, 241, 0) 70%),
    linear-gradient(180deg, #b6e0f6 0%, #d5effb 58%, #eaf7f8 100%);
}

/* 2) 청록색 바다 영역 (수면의 빛 + 작은 기포) */
.mulseom-bg-sea {
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  height: 31%;
  background:
    radial-gradient(ellipse 56% 42% at 50% 14%, rgba(255, 253, 242, 0.36) 0%, rgba(255, 253, 242, 0) 72%),
    linear-gradient(180deg, #4cc1cc 0%, #64d1d4 52%, #8ce2dc 100%);
  overflow: hidden;
}

.mulseom-bg-sea::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
}

/* 수면의 빛 (윤슬 반짝임) */
.mulseom-sunlight-layer {
  position: absolute;
  inset: 0;
}

.mulseom-glint {
  position: absolute;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 253, 244, 0.86);
  box-shadow: 0 0 10px rgba(255, 252, 236, 0.55);
  animation: mulseomGlintShimmer 4.4s ease-in-out infinite;
}

.mulseom-glint.g1 { top: 14%; left: 46%; width: 46px; animation-delay: 0s; }
.mulseom-glint.g2 { top: 23%; left: 39%; width: 30px; animation-delay: -1.1s; }
.mulseom-glint.g3 { top: 27%; left: 54%; width: 36px; animation-delay: -2.3s; }
.mulseom-glint.g4 { top: 38%; left: 44%; width: 52px; animation-delay: -0.7s; }
.mulseom-glint.g5 { top: 47%; left: 31%; width: 24px; animation-delay: -2.9s; }
.mulseom-glint.g6 { top: 49%; left: 61%; width: 28px; animation-delay: -1.7s; }
.mulseom-glint.g7 { top: 60%; left: 48%; width: 38px; animation-delay: -3.4s; }
.mulseom-glint.g8 { top: 19%; left: 63%; width: 22px; animation-delay: -0.4s; }

@keyframes mulseomGlintShimmer {
  0%, 100% {
    opacity: 0.22;
    transform: translateX(-4px) scaleX(0.84);
  }
  50% {
    opacity: 0.88;
    transform: translateX(4px) scaleX(1.12);
  }
}

/* 바닷속에서 수면으로 살며시 피어오르는 작은 기포 */
.mulseom-bubbles-layer {
  position: absolute;
  inset: 0;
}

.mulseom-bubble {
  position: absolute;
  bottom: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.16) 72%);
  border: 1px solid rgba(255, 255, 255, 0.56);
  opacity: 0;
  animation: mulseomBubbleRise 6.2s ease-in infinite;
}

.mulseom-bubble.b1 { left: 24%; width: 7px; height: 7px; animation-duration: 5.8s; animation-delay: -0.6s; }
.mulseom-bubble.b2 { left: 36%; width: 10px; height: 10px; animation-duration: 6.8s; animation-delay: -2.4s; }
.mulseom-bubble.b3 { left: 47%; width: 6px; height: 6px; animation-duration: 5.4s; animation-delay: -4.1s; }
.mulseom-bubble.b4 { left: 55%; width: 9px; height: 9px; animation-duration: 6.4s; animation-delay: -1.5s; }
.mulseom-bubble.b5 { left: 66%; width: 8px; height: 8px; animation-duration: 6.0s; animation-delay: -3.3s; }
.mulseom-bubble.b6 { left: 75%; width: 6px; height: 6px; animation-duration: 5.6s; animation-delay: -4.9s; }
.mulseom-bubble.b7 { left: 41%; width: 7px; height: 7px; animation-duration: 6.6s; animation-delay: -0.2s; }

@keyframes mulseomBubbleRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.75);
  }
  22% {
    opacity: 0.72;
  }
  78% {
    opacity: 0.58;
  }
  100% {
    opacity: 0;
    transform: translate3d(6px, -68px, 0) scale(1.06);
  }
}

/* 3) 잔잔하게 밀려오는 해안 파도 & 아이보리 모래사장 */
.mulseom-waves-layer {
  position: absolute;
  top: 63%;
  left: -8%;
  width: 116%;
  height: 18%;
}

.mulseom-wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.mulseom-wave.wave-back path {
  fill: rgba(92, 206, 209, 0.52);
}

.mulseom-wave.wave-back {
  animation: mulseomShoreSwayA 7.6s ease-in-out infinite;
}

.mulseom-wave.wave-mid path {
  fill: rgba(139, 227, 221, 0.68);
}

.mulseom-wave.wave-mid {
  animation: mulseomShoreSwayB 6.4s ease-in-out infinite;
}

.mulseom-wave.wave-foam path {
  fill: rgba(255, 253, 247, 0.86);
}

.mulseom-wave.wave-foam {
  animation: mulseomFoamBreath 5.6s ease-in-out infinite;
}

.mulseom-wave.wave-sand path {
  fill: #f6ede0;
}

@keyframes mulseomShoreSwayA {
  0%, 100% { transform: translate3d(-1.8%, 0px, 0); }
  50% { transform: translate3d(1.8%, 5px, 0); }
}

@keyframes mulseomShoreSwayB {
  0%, 100% { transform: translate3d(1.6%, 3px, 0); }
  50% { transform: translate3d(-1.6%, -3px, 0); }
}

@keyframes mulseomFoamBreath {
  0%, 100% { transform: translate3d(-1%, 2px, 0); opacity: 0.78; }
  50% { transform: translate3d(1%, -4px, 0); opacity: 0.96; }
}

.mulseom-bg-sand {
  position: absolute;
  top: 79%;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #f6ede0 0%, #f1e3cd 56%, #ead8bc 100%);
}

/* 4) 상단·중앙 물섬 브랜드 영역 & 하단 순환 안내 문구 */
.mulseom-content-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  padding: calc(36px + var(--safe-top)) 24px calc(44px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.mulseom-brand-wrap {
  margin-top: clamp(22px, 7vh, 68px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mulseom-logo-mark {
  width: clamp(168px, 24vw, 210px);
  aspect-ratio: 1 / 1;
  margin-bottom: 4px;
}

.mulseom-logo-mark svg,
.mulseom-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.mulseom-slogan {
  margin: 4px 0 0;
  font-size: clamp(16.5px, 2.1vw, 18.5px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: #1d5768;
}

.mulseom-intro {
  margin: 6px 0 0;
  font-size: clamp(13.5px, 1.7vw, 14.5px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: #3d6d7c;
  word-keep: keep-all;
  word-break: keep-all;
}

.mulseom-status-wrap {
  min-height: 138px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(4px, 1.4vh, 14px);
}

/* 심플하고 세련된 바다빛 원형 프로그레스 링 & 원 궤도를 따라 움직이는 퍼센트(%) */
.mulseom-ring-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
}

.mulseom-ring-wrap.is-complete {
  transform: scale(1.04);
}

.mulseom-ring-stage {
  position: relative;
  width: 124px;
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mulseom-ring-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 4px 12px rgba(38, 142, 155, 0.14));
}

.mulseom-ring-track {
  stroke: rgba(38, 142, 155, 0.17);
  stroke-width: 3.6;
}

.mulseom-ring-spinner {
  transform-origin: 66px 66px;
  animation: mulseomRingSpin 2.2s linear infinite;
}

.mulseom-ring-orbit {
  stroke: url(#mulseomSpinGrad);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 48 122;
}

@keyframes mulseomRingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.mulseom-ring-fill {
  stroke-width: 4.0;
  stroke-linecap: round;
  stroke-dasharray: 207.35;
  stroke-dashoffset: 207.35;
  transform: rotate(-90deg);
  transform-origin: 66px 66px;
  transition: stroke-dashoffset 0.08s linear;
}

.mulseom-ring-dot {
  fill: #268e9b;
  stroke: rgba(255, 253, 248, 0.96);
  stroke-width: 1.8;
}

.mulseom-ring-pct {
  position: absolute;
  left: 50%;
  top: 12.12%;
  transform: translate(-50%, -50%);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: #1f6375;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(255, 253, 246, 0.96);
  pointer-events: none;
  transition: left 0.08s linear, top 0.08s linear;
}

.mulseom-loading-msg {
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #4b636d;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.mulseom-loading-msg.is-fading {
  opacity: 0;
  transform: translateY(3px);
}

.mulseom-loading-error {
  font-size: 13.5px;
  font-weight: 500;
  color: #3e5863;
  line-height: 1.5;
}

.loader-retry-btn {
  display: inline-block;
  margin-left: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(29, 87, 104, 0.12);
  border: 1px solid rgba(29, 87, 104, 0.28);
  color: #164959;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

/* =========================================================================
   물고기 현장 관찰 & 친밀도 교감 카드 (어두운 반투명 유리)
   ========================================================================= */
.creature-observe-panel {
  position: fixed;
  bottom: calc(68px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 23;
  width: min(92vw, 396px);
  background: rgba(10, 18, 28, 0.68);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 20px;
  padding: 11px 13px 12px;
  color: #ffffff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

body.wardrobe-open .creature-observe-panel,
body.chill-mode .creature-observe-panel {
  opacity: 0;
  pointer-events: none;
}

.obs-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.obs-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.obs-rarity-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
  flex-shrink: 0;
}

.obs-rarity-badge.rarity-uncommon { background: rgba(52, 211, 153, 0.24); border-color: rgba(110, 231, 183, 0.45); }
.obs-rarity-badge.rarity-rare { background: rgba(56, 189, 248, 0.26); border-color: rgba(125, 211, 252, 0.50); }
.obs-rarity-badge.rarity-epic { background: rgba(192, 132, 252, 0.28); border-color: rgba(216, 180, 254, 0.55); }
.obs-rarity-badge.rarity-legend {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.36), rgba(244, 114, 182, 0.36), rgba(56, 189, 248, 0.36));
  border-color: rgba(254, 240, 138, 0.72);
}

.obs-fish-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
}

.obs-behavior-tag {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.10);
  padding: 2px 7px;
  border-radius: 999px;
}

.obs-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.obs-close-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 12px;
  flex-shrink: 0;
}

.obs-affinity-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.obs-affinity-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.obs-affinity-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7dd3fc, #5eead4, #ffffff);
  transition: width 0.22s ease;
}

.obs-affinity-text {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.90);
  white-space: nowrap;
}

.obs-fish-desc {
  font-size: 12px;
  line-height: 1.42;
  color: var(--text-sub);
  word-break: keep-all;
}

/* 쓰다듬기 · 함께유영 · 바다유리선물 3버튼 한 줄 나란히 고정 레이아웃 */
.obs-action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}

.obs-action-row.coral-two-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.obs-action-btn {
  min-width: 0;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  padding: 5px 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

.obs-action-btn .obs-btn-main {
  font-size: 11.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

.obs-action-btn .obs-btn-sub {
  font-size: 10px;
  font-weight: 600;
  color: rgba(214, 246, 255, 0.88);
  white-space: nowrap;
}

.obs-action-btn:active {
  transform: scale(0.96);
}

.obs-action-btn.pet {
  background: rgba(255, 255, 255, 0.13);
}

.obs-action-btn.swim {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(125, 211, 252, 0.42);
}

.obs-action-btn.swim.active {
  background: rgba(56, 189, 248, 0.36);
  border-color: rgba(125, 211, 252, 0.80);
}

.obs-action-btn.gift {
  background: rgba(94, 234, 212, 0.18);
  border-color: rgba(153, 246, 228, 0.44);
}

.obs-action-btn.buddy {
  min-height: 27px;
  height: 27px;
  flex-direction: row;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.50);
}

.obs-action-btn.buddy.dismiss {
  background: rgba(244, 114, 182, 0.26);
  border-color: rgba(249, 168, 212, 0.65);
}

/* =========================================================================
   공통 어두운 반투명 유리 모달 시스템 (옷장 · 도감 · 맵 이동 · 소리 · 시계 · 아지트 · 내정보 · 사진)
   ========================================================================= */
#book-modal,
#photo-modal,
#sound-mixer-modal,
#friends-modal,
#account-modal,
#sanctuary-modal,
#wardrobe-unlock-modal,
#timer-modal,
#spots-modal,
#shell-write-modal,
#shell-read-modal,
#shell-pickup-confirm-modal {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 42;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  transition: opacity 0.22s ease;
}

#wardrobe-unlock-modal {
  z-index: 52;
}

.glass-modal-card,
#wardrobe-panel {
  background: var(--modal-surface);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  color: #ffffff;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-header {
  padding: 15px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
  flex-shrink: 0;
}

.panel-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 3px;
}

.panel-header p {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.4;
}

.modal-head-flex,
.mixer-header-row,
.panel-header.wardrobe-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.glass-chip-btn,
.random-coordi-btn,
.sound-power-btn {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sound-power-btn.on {
  background: rgba(94, 234, 212, 0.24);
  border-color: rgba(94, 234, 212, 0.55);
}

.panel-footer {
  padding: 11px 16px calc(13px + var(--safe-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.start-big-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.42);
  color: #ffffff;
  border-radius: 15px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  transition: background 0.15s ease, transform 0.12s ease;
}

.start-big-btn:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.28);
}

.secondary-big-btn {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.90);
  border-radius: 15px;
  padding: 12px 16px;
  font-size: 14.5px;
  font-weight: 600;
}

/* =========================================================================
   게임 시작 전용 다이버 생성 스튜디오 배너 (#start-studio-hero) & 옷장 서랍 (#wardrobe-panel)
   ========================================================================= */
#start-studio-hero {
  position: fixed;
  top: calc(24px + var(--safe-top));
  left: calc(24px + var(--safe-left));
  z-index: 33;
  max-width: min(440px, calc(100vw - 430px));
  padding: 14px 18px 15px;
  border-radius: 22px;
  background: rgba(10, 22, 36, 0.34);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 14px 36px rgba(6, 18, 34, 0.20);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}

body.start-studio-mode.wardrobe-open #start-studio-hero {
  opacity: 1;
  transform: translateY(0);
}

.studio-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(94, 234, 212, 0.22);
  border: 1px solid rgba(153, 246, 228, 0.48);
  font-size: 11.5px;
  font-weight: 700;
  color: #f0fdfa;
  margin-bottom: 7px;
}

.studio-hero-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.32;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(4, 16, 30, 0.36);
  margin-bottom: 4px;
  word-break: keep-all;
}

.studio-hero-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 4px rgba(4, 16, 30, 0.34);
  word-break: keep-all;
}

#wardrobe-panel {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: min(92vw, 392px);
  max-height: 86dvh;
  z-index: 34;
  transition: opacity 0.26s ease, transform 0.26s ease;
}

.wardrobe-profile-strip {
  padding: 11px 15px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  flex-shrink: 0;
}

.wardrobe-nick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.wardrobe-nick-head label {
  font-size: 12.5px;
  font-weight: 700;
  color: #f0fdfa;
}

.wardrobe-account-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: rgba(255, 255, 255, 0.92);
  transition: background 0.15s ease, transform 0.12s ease;
}

.wardrobe-account-chip.linked {
  background: rgba(94, 234, 212, 0.22);
  border-color: rgba(153, 246, 228, 0.55);
  color: #ccfbf1;
}

.wardrobe-account-chip:active {
  transform: scale(0.96);
}

#wardrobe-panel #start-play-btn {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.42), rgba(45, 212, 191, 0.42));
  border-color: rgba(165, 243, 252, 0.68);
  box-shadow: 0 8px 22px rgba(14, 116, 144, 0.28);
}

.panel-drag-handle {
  display: none;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  margin: 8px auto 0;
  flex-shrink: 0;
}

.wardrobe-tabs {
  display: flex;
  gap: 5px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  flex-shrink: 0;
}

.w-tab {
  flex: 1;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 7px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sub);
  white-space: nowrap;
  transition: all 0.15s ease;
}

.w-tab.active {
  background: var(--hud-active-fill);
  border-color: var(--hud-active-border);
  color: #ffffff;
  font-weight: 700;
}

.panel-body {
  padding: 13px 15px;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.tab-pane {
  display: none;
  flex-direction: column;
  gap: 13px;
}

.tab-pane.active {
  display: flex;
}

.custom-section label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 6px;
}

.nickname-row {
  display: flex;
  gap: 6px;
}

.nickname-input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}

.random-btn {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
  flex-shrink: 0;
}

.option-chips.wardrobe-item-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.chip-btn.wardrobe-item-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px 7px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
  white-space: normal;
  transition: all 0.14s ease;
}

.chip-btn.wardrobe-item-card:active {
  transform: scale(0.96);
}

.chip-btn.wardrobe-item-card.selected {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.56);
  color: #ffffff;
  font-weight: 700;
}

.chip-btn.wardrobe-item-card.selected::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #ffffff;
  color: #0f172a;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}

.w-item-thumb {
  width: 100%;
  max-width: 72px;
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: 11px;
  pointer-events: none;
}

.w-item-label {
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  word-break: keep-all;
}

.w-item-lock {
  display: none;
  position: absolute;
  top: 4px;
  left: 5px;
  font-size: 12px;
}

.chip-btn.wardrobe-item-card.locked-treasure {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.24);
}

.chip-btn.wardrobe-item-card.locked-treasure .w-item-lock {
  display: block;
}

.chip-btn.wardrobe-item-card.locked-treasure .w-item-thumb {
  filter: grayscale(0.65);
  opacity: 0.58;
}

.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 2px 0;
}

.color-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease;
}

.color-swatch.selected {
  transform: scale(1.16);
  border-color: #ffffff;
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.45);
}

/* 캐릭터 꾸미기 잠금 한정 아이템 해금 팝업 (#wardrobe-unlock-modal) */
.wardrobe-unlock-card {
  width: min(92vw, 416px);
  max-height: 86dvh;
}

.wardrobe-unlock-body {
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  overflow-y: auto;
}

.unlock-item-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.unlock-item-thumb {
  width: 68px;
  height: 68px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  object-fit: cover;
}

.unlock-item-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.unlock-kicker {
  font-size: 11px;
  font-weight: 700;
  color: #99f6e4;
}

.unlock-item-copy strong {
  font-size: 15.5px;
  font-weight: 800;
  color: #ffffff;
  word-break: keep-all;
}

.unlock-need-line {
  font-size: 12px;
  line-height: 1.38;
  color: rgba(255, 255, 255, 0.86);
  word-break: keep-all;
}

.unlock-section-box {
  padding: 10px 12px 11px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.unlock-section-box.owned {
  background: rgba(20, 184, 166, 0.10);
  border-color: rgba(94, 234, 212, 0.28);
}

.unlock-section-caption {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.unlock-gem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.unlock-gem-chip {
  padding: 8px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

.unlock-gem-chip.insufficient {
  background: rgba(251, 113, 133, 0.16);
  border-color: rgba(253, 164, 175, 0.48);
}

.unlock-gem-chip.sufficient {
  background: rgba(45, 212, 191, 0.16);
  border-color: rgba(153, 246, 228, 0.44);
}

.unlock-gem-name {
  font-size: 11px;
  color: var(--text-sub);
  white-space: nowrap;
}

.unlock-gem-chip strong {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
}

.unlock-gem-chip.insufficient strong {
  color: #fecdd3;
}

.unlock-status-note {
  font-size: 11.8px;
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  word-break: keep-all;
}

#confirm-wardrobe-unlock-btn.ready {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.44), rgba(56, 189, 248, 0.44));
  border-color: rgba(153, 246, 228, 0.68);
}

#confirm-wardrobe-unlock-btn.short {
  opacity: 0.68;
}

/* =========================================================================
   [맵 이동] 통합 허브 모달 (#spots-modal)
   ========================================================================= */
.spots-card {
  width: min(94vw, 456px);
  max-height: 86dvh;
}

.spots-head-compact {
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
}

.spots-head-titles {
  min-width: 0;
}

.spots-head-titles h2 {
  font-size: 18px;
  line-height: 1.2;
}

.spots-head-titles p {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-sub);
  white-space: nowrap;
}

.spots-scroll-area {
  overflow-y: auto;
  padding: 11px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  -webkit-overflow-scrolling: touch;
}

.map-quick-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.section-caption-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.section-caption {
  font-size: 11.8px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.78);
}

.section-sub-note {
  font-size: 11px;
  font-weight: 500;
  color: rgba(186, 230, 253, 0.72);
}

.map-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.map-hub-tile {
  background: var(--modal-card-sub);
  border: 1px solid var(--modal-card-border);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  text-align: left;
  transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}

.map-hub-tile:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.16);
}

.map-hub-tile strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  word-break: keep-all;
}

.map-hub-tile span {
  font-size: 11.3px;
  color: var(--text-sub);
  line-height: 1.3;
  word-break: keep-all;
}

.map-hub-tile.sanctuary-hub-wide {
  grid-column: 1 / -1;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 11px 13px;
  gap: 4px;
  background: linear-gradient(145deg, rgba(20, 184, 166, 0.16), rgba(56, 189, 248, 0.10));
  border-color: rgba(153, 246, 228, 0.34);
}

.sanctuary-hub-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sanctuary-hub-title-group {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-wrap: nowrap;
}

.sanctuary-enter-cue {
  font-size: 12px !important;
  font-weight: 700;
  color: #99f6e4 !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.spots-sanctuary-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(94, 234, 212, 0.20);
  border: 1px solid rgba(153, 246, 228, 0.42);
  font-size: 10.8px !important;
  font-weight: 700;
  color: #ccfbf1 !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.spots-sanctuary-desc {
  margin: 0;
  font-size: 11.8px;
  line-height: 1.36;
  color: rgba(255, 255, 255, 0.86);
  word-break: keep-all;
}

.spots-sanctuary-visitors {
  font-size: 11.2px !important;
  font-weight: 600;
  color: #bae6fd !important;
  line-height: 1.34 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}

.spots-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.spot-item-card {
  background: var(--modal-card-sub);
  border: 1px solid var(--modal-card-border);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.spot-item-card.visited {
  border-color: rgba(94, 234, 212, 0.38);
  background: rgba(94, 234, 212, 0.07);
}

.spot-item-card.current-spot {
  border-color: rgba(125, 211, 252, 0.62);
  background: rgba(56, 189, 248, 0.13);
}

.spot-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spot-item-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.spot-item-title-row strong {
  font-size: 13.8px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

.spot-visit-pill {
  font-size: 10.2px;
  font-weight: 600;
  padding: 1.5px 6.5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  color: var(--text-sub);
  white-space: nowrap;
  flex-shrink: 0;
}

.spot-visit-pill.done {
  background: rgba(94, 234, 212, 0.20);
  color: #99f6e4;
}

.spot-item-info p {
  margin: 0;
  font-size: 11.7px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
  word-break: keep-all;
}

.spot-item-meta {
  font-size: 10.9px;
  line-height: 1.3;
  color: rgba(186, 230, 253, 0.80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spot-go-btn {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: #ffffff;
  border-radius: 11px;
  padding: 7px 11px;
  min-width: 72px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* =========================================================================
   120종 바다 생물 도감 (#book-modal) - 정사각형 격자 행 붕괴 방지 구조 유지
   ========================================================================= */
.book-card {
  position: relative;
  width: min(95vw, 720px);
  height: min(85dvh, 700px);
  max-height: 85dvh;
}

.book-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  overflow-x: visible;
  overflow-y: visible;
  flex-shrink: 0;
}

.book-tab {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11.8px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-sub);
  white-space: nowrap;
}

.book-tab.active {
  background: var(--hud-active-fill);
  border-color: var(--hud-active-border);
  color: #ffffff;
  font-weight: 700;
}

.book-grid {
  flex: 1 1 0%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-items: start;
  align-content: start;
  gap: 9px;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.fish-entry.fish-tile {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  border-radius: 15px;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 22, 38, 0.72);
  box-sizing: border-box;
}

.fish-entry.fish-tile.discovered {
  border-color: rgba(94, 234, 212, 0.62);
}

.fish-entry.fish-tile.discovered.rarity-legend {
  border-color: rgba(253, 224, 71, 0.85);
}

.fish-entry.fish-tile.discovered.rarity-epic {
  border-color: rgba(216, 180, 254, 0.75);
}

/* 한국 특별·보호종: 어느 폴더에서도 한눈에 구분되는 황금·비취 이중 테두리 (내부 3D 생물 색감은 선명하게 보존) */
.fish-entry.fish-tile.korea-special {
  border: 2px solid rgba(251, 191, 36, 0.82);
  box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.42), 0 4px 12px rgba(251, 191, 36, 0.16);
}

.fish-entry.fish-tile.discovered.korea-special {
  border: 2px solid rgba(253, 224, 71, 0.96);
  box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.65), 0 5px 14px rgba(251, 191, 36, 0.26);
}

.fish-tile-korea-tag {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
  padding: 1px 5.5px;
  border-radius: 999px;
  background: rgba(14, 28, 42, 0.82);
  border: 1px solid rgba(251, 191, 36, 0.75);
  color: #fde68a;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 14px;
  pointer-events: none;
}

.fish-entry.fish-tile.korea-special .fish-tile-affinity-mini {
  top: 23px;
}

.fish-entry.fish-tile:active {
  transform: scale(0.96);
}

.fish-tile-square {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  border-radius: 13.5px;
  background: #0a2034;
}

.fish-tile-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.fish-tile-status {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(10, 18, 28, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: #ffffff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.fish-tile-status.empty {
  display: none;
}

.fish-tile-affinity-mini {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(10, 18, 28, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
  font-size: 10px;
  line-height: 15px;
}

.fish-tile-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 15px 5px 5px;
  background: linear-gradient(to top, rgba(6, 14, 24, 0.88), rgba(6, 14, 24, 0));
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.fish-entry.fish-tile.undiscovered .fish-tile-name {
  color: rgba(255, 255, 255, 0.62);
}

.book-spotlight {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 10, 18, 0.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.book-detail-card {
  position: relative;
  width: min(100%, 396px);
  max-height: 100%;
  overflow-y: auto;
  background: rgba(14, 24, 38, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 20px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: #ffffff;
}

.book-detail-card .spotlight-illust {
  width: 100%;
  height: auto;
  aspect-ratio: 240 / 160;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.book-detail-card h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: #ffffff;
}

.book-detail-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.fish-badge-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.fish-zone-line {
  font-size: 11.5px;
  color: var(--text-sub);
}

.book-affinity-box {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.book-affinity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
}

.book-affinity-track {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.book-affinity-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7dd3fc, #5eead4, #ffffff);
}

.fish-edu-box {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 12.5px;
  color: var(--text-sub);
  line-height: 1.5;
  word-break: keep-all;
}

/* 한국 특별·보호종 상세카드 우측 하단 실제 사진 영역 */
.fish-edu-with-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 136px;
  gap: 8px;
  align-items: stretch;
}

.fish-edu-with-photo.photo-expanded {
  grid-template-columns: minmax(0, 1fr);
}

.korea-real-photo-card {
  background: rgba(8, 20, 34, 0.78);
  border: 1px solid rgba(153, 246, 228, 0.38);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.korea-real-photo-card.locked {
  cursor: default;
  border-style: dashed;
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(8, 20, 34, 0.62);
}

.korea-real-photo-lock-box {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(15, 38, 58, 0.92), rgba(8, 20, 34, 0.95));
  border: 1px solid rgba(251, 191, 36, 0.24);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  text-align: center;
}

.korea-real-photo-lock-icon {
  font-size: 18px;
  line-height: 1;
}

.korea-real-photo-lock-text {
  font-size: 10px;
  font-weight: 700;
  color: #fde68a;
  line-height: 1.28;
  word-break: keep-all;
}

.korea-real-photo-card:hover {
  border-color: rgba(153, 246, 228, 0.72);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.korea-real-photo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #99f6e4;
  line-height: 1.2;
}

.korea-real-photo-zoom-hint {
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(224, 242, 254, 0.76);
}

.korea-real-photo-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(15, 38, 58, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.fish-edu-with-photo.photo-expanded .korea-real-photo-frame {
  aspect-ratio: 16 / 10;
}

.korea-real-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.korea-real-photo-caption {
  font-size: 10.5px;
  line-height: 1.32;
  color: rgba(240, 249, 255, 0.90);
  word-break: keep-all;
}

.fish-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.touch-count-badge {
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(94, 234, 212, 0.16);
  color: #99f6e4;
  padding: 3px 9px;
  border-radius: 999px;
}

.buddy-summon-btn {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
}

.buddy-summon-btn.active {
  background: rgba(94, 234, 212, 0.28);
  border-color: rgba(94, 234, 212, 0.65);
}

.book-detail-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(10, 18, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: #ffffff;
  font-size: 14px;
}

/* =========================================================================
   소리 조절판 · 내 정보 · 산호 아지트 · 시계/출석 · 사진 모달 세부 스타일
   ========================================================================= */
.mixer-card {
  width: min(94vw, 420px);
  max-height: 85dvh;
}

.mixer-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.preset-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 7px 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sub);
  text-align: center;
  white-space: nowrap;
}

.preset-chip.active {
  background: var(--hud-active-fill);
  border-color: var(--hud-active-border);
  color: #ffffff;
  font-weight: 700;
}

.mixer-sliders {
  padding: 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.slider-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slider-label-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #ffffff;
}

.slider-pct {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
}

.sound-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  outline: none;
  touch-action: pan-x;
}

.sound-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.account-card,
.photo-card-dialog {
  width: min(94vw, 410px);
  max-height: 86dvh;
}

.sanctuary-card,
.timer-card {
  width: min(95vw, 470px);
  max-height: 86dvh;
}

.account-body,
.sanctuary-body,
.timer-body {
  padding: 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.my-profile-summary,
.sanctuary-stage-box,
.attendance-box,
.focus-timer-box,
.craft-item-row,
.treasure-pill {
  background: var(--modal-card-sub);
  border: 1px solid var(--modal-card-border);
  border-radius: 16px;
}

.my-profile-summary {
  padding: 12px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.profile-avatar-badge {
  width: 56px;
  height: 56px;
  border-radius: 38%;
  background: linear-gradient(145deg, rgba(125, 211, 252, 0.34), rgba(94, 234, 212, 0.24));
  border: 1.5px solid rgba(255, 255, 255, 0.44);
  box-shadow: 0 6px 16px rgba(4, 16, 30, 0.26);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-summary-info {
  flex: 1;
  min-width: 0;
}

.profile-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}

.profile-name-line strong {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.save-pill {
  font-size: 11px;
  font-weight: 600;
  background: rgba(94, 234, 212, 0.18);
  color: #99f6e4;
  padding: 2px 8px;
  border-radius: 999px;
}

.save-pill.guest {
  background: rgba(251, 191, 36, 0.18);
  color: #fde68a;
}

.account-auth-box {
  background: var(--modal-card-sub);
  border: 1px solid var(--modal-card-border);
  border-radius: 16px;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}

.auth-input::placeholder {
  color: rgba(255, 255, 255, 0.52);
}

.auth-action-row {
  display: flex;
  gap: 8px;
}

.auth-submit-btn {
  flex: 1;
  padding: 10px 12px;
  font-size: 13.5px;
  border-radius: 12px;
}

.profile-summary-info p {
  font-size: 12px;
  color: var(--text-sub);
}

.social-section-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 7px;
}

.social-btn-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.social-login-btn {
  width: 100%;
  border-radius: 13px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #ffffff;
}

.social-login-btn:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.18);
}

.logout-text-btn {
  margin-top: 6px;
  width: 100%;
  color: var(--text-muted);
  text-decoration: underline;
  font-size: 12px;
  padding: 4px;
}

.auth-guide-note {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 9px 11px;
  word-break: keep-all;
}

.photo-preview-wrap {
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

#photo-preview-img {
  max-width: 100%;
  max-height: 52dvh;
  border-radius: 12px;
  object-fit: contain;
  user-select: auto;
  -webkit-user-select: auto;
  -webkit-touch-callout: default;
}

.treasure-wallet-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.treasure-pill {
  padding: 8px 9px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.t-icon {
  font-size: 19px;
}

.t-name {
  display: block;
  font-size: 11px;
  color: var(--text-sub);
}

.treasure-pill strong {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.sanctuary-stage-box,
.attendance-box,
.focus-timer-box {
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.stage-head-row,
.attend-header-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.stage-lv-badge {
  background: rgba(94, 234, 212, 0.20);
  border: 1px solid rgba(94, 234, 212, 0.45);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}

.stage-head-row strong,
.attend-header-line strong {
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
}

.stage-desc {
  font-size: 12px;
  line-height: 1.46;
  color: var(--text-sub);
  word-break: keep-all;
}

.stage-cost-line {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(153, 246, 228, 0.22);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.48;
  color: #ffffff;
  text-align: center;
  word-break: keep-all;
}

.stage-action-btns {
  display: flex;
  gap: 8px;
}

.stage-action-btns button {
  flex: 1;
  font-size: 13.5px;
  padding: 10px;
}

.craft-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.craft-item-row {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.craft-item-info strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
}

.craft-item-info span {
  font-size: 11.5px;
  color: var(--text-sub);
}

.craft-action-btn {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.36);
  color: #ffffff;
  border-radius: 11px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.craft-action-btn.unlocked {
  background: rgba(94, 234, 212, 0.22);
  border-color: rgba(94, 234, 212, 0.55);
}

.attendance-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.attend-day-cell {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  padding: 6px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  color: var(--text-sub);
}

.attend-day-cell.stamped {
  background: rgba(94, 234, 212, 0.18);
  border-color: rgba(94, 234, 212, 0.52);
  color: #ffffff;
}

.attend-day-cell .stamp-emoji {
  font-size: 15px;
}

.attend-claim-btn {
  background: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.42);
  color: #ffffff;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 700;
}

.attend-claim-btn.claimed {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
  cursor: default;
}

.timer-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.timer-preset-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  padding: 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.timer-preset-btn:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.16);
}

.timer-preset-btn strong {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.timer-preset-btn span {
  font-size: 11px;
  color: var(--text-sub);
  line-height: 1.35;
}

/* =========================================================================
   핸드폰 세로 화면 최적화 미디어 쿼리
   ========================================================================= */
@media (min-width: 900px) {
  .option-chips.wardrobe-item-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .mulseom-content-inner {
    padding: calc(28px + var(--safe-top)) 20px calc(36px + var(--safe-bottom));
  }

  .mulseom-brand-wrap {
    margin-top: clamp(16px, 5.2vh, 44px);
  }

  .mulseom-logo-mark {
    width: clamp(154px, 44vw, 188px);
  }

  .mulseom-ring-stage {
    width: 116px;
    height: 116px;
  }

  .mulseom-slogan {
    margin-top: 3px;
    font-size: 16px;
  }

  .mulseom-intro {
    font-size: 13.5px;
  }

  .mulseom-loading-msg {
    font-size: 13.8px;
  }

  #start-studio-hero {
    top: calc(8px + var(--safe-top));
    left: calc(12px + var(--safe-left));
    right: calc(12px + var(--safe-right));
    max-width: none;
    padding: 7px 13px 8px;
    border-radius: 15px;
    text-align: center;
  }

  .studio-hero-kicker {
    display: none;
  }

  .studio-hero-title {
    font-size: 14.5px;
    margin-bottom: 1px;
  }

  .studio-hero-desc {
    font-size: 10.8px;
  }

  /* 핸드폰에서는 옷장이 하단 반투명 서랍으로 열려 위쪽 절반에서 캐릭터 전신이 선명하게 보임 */
  #wardrobe-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 55dvh;
    transform: translateY(0);
    border-radius: 24px 24px 0 0;
    border-bottom: none;
    border-left: none;
    border-right: none;
  }

  .panel-drag-handle {
    display: block;
  }

  .panel-header {
    padding: 10px 16px 9px;
  }

  .panel-header h2 {
    font-size: 16px;
  }

  .rail-circle {
    width: 42px;
    height: 42px;
  }

  .rail-circle.small {
    width: 34px;
    height: 34px;
  }

  .quick-circle-btn {
    width: 44px;
    height: 44px;
  }

  .stroke-tab-btn,
  .sand-tool-btn {
    padding: 0 8.5px;
    font-size: 12.5px;
  }

  .sand-play-bar .sand-tool-btn {
    padding: 0 7px;
    font-size: 12px;
  }

  .dock-dive-btn {
    padding: 0 11px;
    font-size: 12.5px;
  }

  .map-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .map-hub-tile {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 10px 11px;
  }

  .timer-preset-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .today-sep,
  .today-count-inline {
    display: none;
  }
  .book-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }
  .fish-tile-name {
    font-size: 11px;
    padding: 13px 4px 5px;
  }
}

@media (max-width: 380px) {
  .presence-pill {
    padding: 0 7px 0 10px;
  }
  .presence-counts {
    font-size: 11.5px;
    gap: 4px;
  }
  .presence-counts strong {
    font-size: 12px;
  }
  .stroke-tab-btn,
  .sand-tool-btn {
    padding: 0 8px;
    font-size: 12px;
  }
  .dock-dive-btn {
    padding: 0 10px;
    font-size: 12px;
  }
}


/* =========================================================================
   가리비 편지 쓰기·읽기 따뜻한 편지지 테마 (.shell-letter-card) & 다이버 친구 팝오버
   ========================================================================= */
.shell-modal-card.shell-letter-card {
  width: min(92vw, 424px);
  max-height: 86dvh;
  background: linear-gradient(180deg, #fffdf9 0%, #fcf5e8 58%, #f6ecda 100%);
  border: 1.5px solid rgba(206, 174, 136, 0.58);
  border-radius: 26px;
  color: #3f2f22;
  box-shadow:
    0 24px 56px rgba(24, 18, 12, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.shell-letter-header {
  padding: 20px 22px 13px;
  border-bottom: 1px dashed rgba(196, 164, 128, 0.45);
  text-align: center;
  flex-shrink: 0;
}

.shell-letter-seal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fdeee6, #fae3d4);
  border: 1px solid rgba(226, 168, 142, 0.56);
  color: #9c5238;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 9px;
}

.shell-letter-header h2 {
  font-size: 18px;
  font-weight: 800;
  color: #3a2a1e;
  margin-bottom: 6px;
  letter-spacing: -0.025em;
  word-break: keep-all;
}

.shell-letter-header p {
  font-size: 12.5px;
  line-height: 1.5;
  color: #755d49;
  word-break: keep-all;
}

.shell-modal-body {
  padding: 15px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  overflow-y: auto;
}

.shell-letter-paper {
  background-color: #fffefb;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 29px,
    rgba(212, 185, 152, 0.34) 29px,
    rgba(212, 185, 152, 0.34) 30px
  );
  background-position: 0 10px;
  border: 1px solid rgba(210, 180, 144, 0.62);
  border-radius: 18px;
  padding: 13px 15px 10px;
  box-shadow: inset 0 2px 8px rgba(168, 132, 92, 0.07);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shell-letter-paper.read-only {
  padding: 18px 16px;
}

.shell-letter-textarea {
  width: 100%;
  min-height: 88px;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: #3b2b1f;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 30px;
  user-select: text;
  -webkit-user-select: text;
}

.shell-letter-textarea::placeholder {
  color: #b09882;
  font-weight: 400;
}

.shell-letter-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(216, 190, 158, 0.34);
  font-size: 11.5px;
  color: #9c826b;
}

.shell-char-count {
  font-weight: 600;
  color: #8c6d53;
}

.shell-read-quote {
  margin: 0;
  padding: 4px 6px;
  color: #3a2a1e;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  word-break: keep-all;
}

.shell-wave-rule-note {
  font-size: 11.5px;
  line-height: 1.48;
  color: #7c6450;
  background: rgba(235, 220, 198, 0.42);
  border: 1px solid rgba(204, 178, 146, 0.44);
  border-radius: 13px;
  padding: 9px 12px;
  word-break: keep-all;
}

.shell-wave-rule-note.active-wash {
  background: rgba(214, 241, 248, 0.62);
  border-color: rgba(125, 196, 222, 0.56);
  color: #2c5b72;
}

.shell-letter-footer {
  padding: 11px 20px calc(15px + var(--safe-bottom));
  border-top: 1px solid rgba(210, 182, 148, 0.36);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.shell-btn-secondary {
  background: rgba(232, 218, 198, 0.65);
  border: 1px solid rgba(196, 168, 136, 0.58);
  color: #5c4634;
  border-radius: 15px;
  padding: 12px 15px;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.12s ease, background 0.15s ease;
}

.shell-btn-secondary:active {
  transform: scale(0.97);
  background: rgba(222, 205, 182, 0.85);
}

.shell-btn-primary {
  flex: 1;
  background: linear-gradient(135deg, #e78f74 0%, #db765b 100%);
  border: 1px solid rgba(204, 102, 76, 0.55);
  color: #ffffff;
  border-radius: 15px;
  padding: 12px 16px;
  font-size: 14.5px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(198, 104, 76, 0.24);
  transition: transform 0.12s ease, filter 0.15s ease;
}

.shell-btn-primary:active {
  transform: scale(0.98);
  filter: brightness(0.96);
}

/* 다이버 클릭 시 뜨는 반투명 프로필 · 친구 즐겨찾기 팝오버 */
.diver-card-popover {
  position: fixed;
  bottom: calc(68px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 24;
  width: min(90vw, 340px);
  background: rgba(10, 18, 28, 0.72);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 20px;
  padding: 11px 13px 12px;
  color: #ffffff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.diver-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.diver-card-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.diver-card-title-row strong {
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.diver-role-badge {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(236, 250, 255, 0.94);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.diver-role-badge.is-friend {
  background: rgba(94, 234, 212, 0.22);
  border-color: rgba(153, 246, 228, 0.62);
  color: #f0fdfa;
}

.diver-role-badge.is-pending {
  background: rgba(251, 191, 36, 0.20);
  border-color: rgba(253, 224, 71, 0.56);
  color: #fef3c7;
}

.diver-card-status {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.38;
}

.diver-card-actions {
  display: flex;
  gap: 7px;
  margin-top: 2px;
}

.diver-action-btn {
  flex: 1;
  height: 36px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  white-space: nowrap;
  transition: transform 0.12s ease, background 0.14s ease;
}

.diver-action-btn:active {
  transform: scale(0.96);
}

.diver-action-btn.fav.saved {
  background: rgba(250, 204, 21, 0.26);
  border-color: rgba(253, 224, 71, 0.72);
  color: #fef08a;
}

.diver-action-btn.fav.pending {
  background: rgba(125, 211, 252, 0.20);
  border-color: rgba(186, 230, 253, 0.60);
  color: #e0f2fe;
}

/* 전용 ‘내 친구 · 접속 다이버’ 모달 및 목록 스타일 */
.friends-modal-card {
  width: min(93vw, 440px);
  max-height: 86dvh;
}

#friends-today-pill,
#friends-online-badge,
#online-divers-summary-badge {
  white-space: nowrap;
  flex-shrink: 0;
}

.friends-modal-body {
  padding: 13px 16px 15px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  overflow-y: auto;
}

.friends-tab-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px;
  padding: 4px;
}

.friends-tab-btn {
  height: 36px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.friends-tab-btn.active {
  background: rgba(94, 234, 212, 0.20);
  border-color: rgba(94, 234, 212, 0.52);
  color: #ffffff;
}

.friends-tab-count {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}

.friends-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.friends-section-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.friends-head-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.friends-head-line strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
}

.friends-sub-guide {
  font-size: 11.5px;
  color: var(--text-sub);
  line-height: 1.38;
  word-break: keep-all;
}

.friends-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 158px;
  overflow-y: auto;
}

.friends-list.tall {
  max-height: min(46dvh, 330px);
}

.friend-empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 14px 8px 10px;
}

.friend-empty-note {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.48;
  word-break: keep-all;
  padding: 4px;
}

.friend-browse-online-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(94, 234, 212, 0.18);
  border: 1px solid rgba(94, 234, 212, 0.48);
  color: #f0fdfa;
  font-size: 12px;
  font-weight: 600;
}

.friend-row {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 13px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.friend-row.is-me {
  background: rgba(94, 234, 212, 0.10);
  border-color: rgba(94, 234, 212, 0.34);
}

.friend-row-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.friend-row-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.friend-zone-chip {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(230, 248, 255, 0.92);
  flex-shrink: 0;
}

.friend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
}

.friend-dot.away {
  background: rgba(255, 255, 255, 0.35);
}

.friend-row-where {
  font-size: 11.5px;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-row-btns {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.friend-fav-toggle-btn {
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.friend-fav-toggle-btn.saved {
  background: rgba(250, 204, 21, 0.22);
  border-color: rgba(253, 224, 71, 0.62);
  color: #fef08a;
}

.friend-join-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(94, 234, 212, 0.22);
  border: 1px solid rgba(94, 234, 212, 0.55);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.friend-remove-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.80);
  font-size: 11px;
}

.friends-guest-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11.5px;
  color: var(--text-sub);
}

.inline-link-chip {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(94, 234, 212, 0.18);
  border: 1px solid rgba(94, 234, 212, 0.48);
  color: #f0fdfa;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.account-friends-shortcut {
  margin-top: 6px;
  align-self: flex-start;
}

.friends-section-box.pending-box {
  background: rgba(125, 211, 252, 0.08);
  border-color: rgba(125, 211, 252, 0.28);
}

.friend-dot.pending {
  background: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.25);
}

.pending-cancel-btn {
  height: 27px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.88);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.16s ease, transform 0.12s ease;
}

.pending-cancel-btn:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.20);
}

/* =========================================================================
   가만히 쉬면 메뉴가 스르르 옅어지는 ‘자동 여백 호흡’ (타올·온천·의자·배영 7초 무조작)
   ========================================================================= */
#top-bar,
#second-bar,
#today-sea-card,
#right-rail,
#left-quick-rail,
#chat-popover,
#bottom-dock,
#action-pad,
#hotspring-action-btn,
#space-return-bar,
#active-timer-banner,
#sanctuary-deco-bar,
#sanctuary-prop-popover {
  transition:
    opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.28s ease,
    background 0.2s ease;
}

body.idle-breath-fade:not(.chill-mode):not(.wardrobe-open) #top-bar,
body.idle-breath-fade:not(.chill-mode):not(.wardrobe-open) #second-bar,
body.idle-breath-fade:not(.chill-mode):not(.wardrobe-open) #today-sea-card,
body.idle-breath-fade:not(.chill-mode):not(.wardrobe-open) #right-rail,
body.idle-breath-fade:not(.chill-mode):not(.wardrobe-open) #left-quick-rail,
body.idle-breath-fade:not(.chill-mode):not(.wardrobe-open) #chat-popover,
body.idle-breath-fade:not(.chill-mode):not(.wardrobe-open) #bottom-dock,
body.idle-breath-fade:not(.chill-mode):not(.wardrobe-open) #action-pad,
body.idle-breath-fade:not(.chill-mode):not(.wardrobe-open) #hotspring-action-btn:not(.standing),
body.idle-breath-fade:not(.chill-mode):not(.wardrobe-open) #space-return-bar,
body.idle-breath-fade:not(.chill-mode):not(.wardrobe-open) #active-timer-banner,
body.idle-breath-fade:not(.chill-mode):not(.wardrobe-open) #sanctuary-deco-bar,
body.idle-breath-fade:not(.chill-mode):not(.wardrobe-open) #sanctuary-prop-popover {
  opacity: 0.08;
  transition:
    opacity 1.95s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.95s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.28s ease,
    background 0.2s ease;
}

body.idle-breath-fade:not(.chill-mode):not(.wardrobe-open) #hotspring-action-btn.standing {
  opacity: 0.84;
}

body.idle-breath-fade:not(.chill-mode):not(.wardrobe-open) .char-name-tag {
  opacity: 0.30;
  transition: opacity 1.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.char-name-tag {
  transition: opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================================
   [v44] 내 계정 내부 [내 바다 친구] 메뉴 탭 · 프로필 사진 노출 안정화 · 조개 줍기 확인 모달
   ========================================================================= */
.presence-pill.static-pill {
  cursor: default;
}

.presence-pill.static-pill:active {
  transform: none;
}

.account-card {
  width: min(94vw, 438px);
  max-height: 87dvh;
}

.account-menu-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  padding: 10px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 22, 38, 0.28);
  flex-shrink: 0;
}

.account-menu-tab {
  height: 38px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(235, 248, 255, 0.80);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
}

.account-menu-tab:active {
  transform: scale(0.97);
}

.account-menu-tab.active {
  background: rgba(94, 234, 212, 0.24);
  border-color: rgba(153, 246, 228, 0.68);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.22);
}

.account-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #99f6e4;
  font-size: 11px;
  font-weight: 800;
}

.account-menu-tab.active .account-tab-badge {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.52);
  color: #ffffff;
}

.account-tab-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-avatar-badge {
  background: linear-gradient(145deg, rgba(56, 142, 188, 0.42), rgba(38, 116, 138, 0.34));
  border-color: rgba(226, 244, 255, 0.38);
}

.profile-avatar-img {
  filter: brightness(0.94) contrast(1.04) saturate(1.04);
}

.shell-pickup-dark-card {
  width: min(90vw, 390px);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: var(--modal-surface);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
  text-align: center;
}

.shell-pickup-dark-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.shell-pickup-dark-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(94, 234, 212, 0.16);
  border: 1px solid rgba(153, 246, 228, 0.46);
  color: #d9fdfa;
  font-size: 12px;
  font-weight: 700;
}

.shell-pickup-dark-title {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.shell-pickup-dark-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(235, 246, 255, 0.88);
  word-break: keep-all;
}

.shell-pickup-dark-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.shell-dark-btn {
  height: 41px;
  border-radius: 13px;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}

.shell-dark-btn:active {
  transform: scale(0.97);
}

.shell-dark-btn.secondary {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.90);
}

.shell-dark-btn.primary {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.38), rgba(45, 212, 191, 0.42));
  border: 1px solid rgba(153, 246, 228, 0.72);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(13, 148, 136, 0.25);
}

/* =========================================================================
   [v48] 대화입력창 중앙정렬 고정 & 아이폰 · 삼성 갤럭시 전 기종 화면 최적화
   ========================================================================= */
@media (max-width: 768px) {
  /* 1) 상단 바 & 2단 위치 바 & 독립 공간 복귀 바 & 오늘의 바다 카드 (노치·펀치홀 안전 영역 반영) */
  #top-bar {
    top: calc(8px + var(--safe-top));
    left: calc(10px + var(--safe-left));
    right: calc(10px + var(--safe-right));
    gap: 6px;
  }

  .hud-glass-pill {
    height: 35px;
    padding: 0 11px;
    font-size: 12.5px;
    gap: 6px;
  }

  .presence-pill {
    padding: 0 10px;
  }

  .account-pill {
    padding: 0 4px;
  }

  .auth-mini-badge {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .map-move-pill {
    padding: 0 11px;
    gap: 5px;
  }

  .map-move-pill .hud-line-icon {
    width: 16px;
    height: 16px;
  }

  #second-bar {
    top: calc(48px + var(--safe-top));
    left: calc(10px + var(--safe-left));
    max-width: calc(100vw - 66px - var(--safe-left) - var(--safe-right));
    gap: 5px;
  }

  .hud-whisper-pill {
    height: 25px;
    padding: 0 9px;
    font-size: 11px;
    gap: 4px;
  }

  #zone-name {
    font-size: 11px;
  }

  .depth-sub {
    font-size: 10.5px;
  }

  .space-return-bar {
    top: calc(78px + var(--safe-top));
    left: calc(10px + var(--safe-left));
    max-width: calc(100vw - 66px - var(--safe-left) - var(--safe-right));
    flex-wrap: nowrap;
    border-radius: 999px;
    padding: 3px 5px 3px 10px;
    gap: 5px;
  }

  .space-return-badge {
    font-size: 11.5px;
    max-width: 88px;
  }

  .spot-theme-inline-ctrl {
    padding: 2px 6px;
    gap: 4px;
  }

  .spot-theme-inline-label {
    font-size: 10px;
  }

  #spot-theme-inline-slider {
    width: 44px;
  }

  .spot-theme-inline-val {
    font-size: 10px;
    min-width: 25px;
  }

  .space-exit-btn {
    height: 24px;
    padding: 0 9px;
    font-size: 10.8px;
  }

  .today-sea-card {
    top: calc(78px + var(--safe-top));
    left: calc(10px + var(--safe-left));
    padding: 6px 10px 7px;
    border-radius: 13px;
    min-width: 142px;
    max-width: min(196px, calc(100vw - 70px - var(--safe-left) - var(--safe-right)));
  }

  body.in-subspace .today-sea-card,
  body.in-secret-spot .today-sea-card,
  body.in-sanctuary-space .today-sea-card,
  body:has(#space-return-bar:not(.hidden)) .today-sea-card {
    top: calc(118px + var(--safe-top));
    transition: opacity 0.28s ease, transform 0.28s ease, background 0.18s ease;
  }

  #fish-toast,
  .miracle-event-banner,
  .spot-discovery-banner {
    top: calc(158px + var(--safe-top));
    left: calc((100vw - 56px + var(--safe-left) - var(--safe-right)) / 2);
    max-width: calc(100vw - 76px - var(--safe-left) - var(--safe-right));
    padding: 7px 11px;
    border-radius: 15px;
    gap: 8px;
  }

  .spot-discovery-banner {
    top: calc(206px + var(--safe-top));
  }

  .toast-icon {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  .toast-text-title,
  .miracle-banner-texts strong,
  .spot-banner-texts strong {
    font-size: 12.2px;
  }

  .toast-text-desc,
  .miracle-banner-texts span,
  .spot-banner-texts span {
    font-size: 11px;
  }

  .today-sea-head {
    font-size: 11.5px;
  }

  .today-sea-date,
  .today-sea-metric {
    font-size: 10.5px;
  }

  .active-timer-banner {
    top: calc(164px + var(--safe-top));
    left: calc(10px + var(--safe-left));
    font-size: 11.5px;
    padding: 4px 7px 4px 10px;
  }

  /* 2) 우측 세로 아이콘 레일: 아이폰·갤럭시 세로 높이에 맞춰 하단 수심 버튼과 절대 겹치지 않도록 정렬 */
  .right-icon-rail {
    top: calc(50px + var(--safe-top));
    right: calc(10px + var(--safe-right));
    gap: 5px;
  }

  .right-rail-items {
    gap: 5px;
    max-height: 440px;
  }

  .rail-btn {
    gap: 2px;
    min-width: 42px;
  }

  .rail-circle {
    width: 38px;
    height: 38px;
  }

  .rail-circle .hud-line-icon {
    width: 17px;
    height: 17px;
  }

  .rail-circle.small {
    width: 31px;
    height: 31px;
  }

  .rail-caption {
    font-size: 10px;
  }

  /* 3) 하단 좌·우 원형 보조 버튼 + 정중앙 고정 대화 입력창 + 하단 캡슐 독 */
  .left-quick-rail {
    left: calc(10px + var(--safe-left));
    bottom: calc(64px + var(--safe-bottom));
    gap: 7px;
  }

  #action-pad {
    right: calc(10px + var(--safe-right));
    bottom: calc(64px + var(--safe-bottom));
  }

  .depth-controls {
    gap: 7px;
  }

  .quick-circle-btn {
    width: 42px;
    height: 42px;
  }

  .quick-circle-btn .hud-line-icon {
    width: 16px;
    height: 16px;
  }

  .quick-circle-label {
    font-size: 9.5px;
  }

  .bottom-capsule-dock {
    bottom: calc(10px + var(--safe-bottom));
    height: 46px;
    padding: 4px 5px;
    gap: 3px;
    max-width: calc(100vw - 16px - var(--safe-left) - var(--safe-right));
  }

  .stroke-tab-btn,
  .sand-tool-btn {
    height: 36px;
    padding: 0 8.5px;
    font-size: 12.2px;
  }

  .sand-play-bar .sand-tool-btn {
    padding: 0 7.5px;
    font-size: 11.8px;
  }

  .dock-dive-btn {
    height: 36px;
    padding: 0 11px;
    font-size: 12.2px;
  }

  /* 대화입력창: 모바일(아이폰·갤럭시)에서도 정중앙 정렬 고정 + 좌우 원형 버튼과 완벽한 대칭 여백 확보 */
  .chat-popover.hud-exposed-chat {
    left: 50%;
    right: auto;
    bottom: calc(64px + var(--safe-bottom));
    transform: translateX(-50%);
    height: 40px;
    padding: 3px 4px 3px 10px;
    gap: 5px;
    width: clamp(220px, calc(100vw - 116px - var(--safe-left) - var(--safe-right)), 312px);
  }

  .chat-popover.hud-exposed-chat:focus-within {
    transform: translateX(-50%);
  }

  .chat-send-btn {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }

  .social-popover-dock {
    left: 50%;
    right: auto;
    bottom: calc(110px + var(--safe-bottom));
    transform: translateX(-50%);
    align-items: center;
    max-width: calc(100vw - 20px - var(--safe-left) - var(--safe-right));
  }

  #control-hint {
    bottom: calc(112px + var(--safe-bottom));
    max-width: calc(100vw - 116px - var(--safe-left) - var(--safe-right));
    font-size: 10.5px;
  }

  .hotspring-context-btn,
  body.in-sanctuary-space #hotspring-action-btn {
    bottom: calc(114px + var(--safe-bottom));
    padding: 7px 15px;
    font-size: 12.8px;
  }

  body.diver-card-open #hotspring-action-btn,
  body:has(#diver-card-popover:not(.hidden)) #hotspring-action-btn {
    bottom: calc(184px + var(--safe-bottom));
  }

  body.social-open #hotspring-action-btn,
  body:has(#social-dock:not(.hidden)) #hotspring-action-btn {
    bottom: calc(156px + var(--safe-bottom));
  }

  .hotspring-seat-move-bar {
    bottom: calc(158px + var(--safe-bottom));
  }

  /* 4) 하단 컨텍스트 카드(물고기 친해지기 · 아지트 꾸미기 · 다이버 프로필) 열림 시 좌우 보조 버튼 및 우측 아이콘 열 겹침 방지 */
  body.observe-panel-open #left-quick-rail,
  body.observe-panel-open #action-pad,
  body.observe-panel-open #social-dock,
  body:has(#creature-observe-panel:not(.hidden)) #left-quick-rail,
  body:has(#creature-observe-panel:not(.hidden)) #action-pad,
  body:has(#creature-observe-panel:not(.hidden)) #social-dock,
  body.diver-card-open #left-quick-rail,
  body.diver-card-open #action-pad,
  body.diver-card-open #social-dock,
  body:has(#diver-card-popover:not(.hidden)) #left-quick-rail,
  body:has(#diver-card-popover:not(.hidden)) #action-pad,
  body:has(#diver-card-popover:not(.hidden)) #social-dock,
  body.in-sanctuary-space.sanctuary-decorating #left-quick-rail,
  body.in-sanctuary-space.sanctuary-decorating #action-pad,
  body.in-sanctuary-space.sanctuary-decorating #social-dock,
  body:has(#sanctuary-deco-bar:not(.hidden)) #left-quick-rail,
  body:has(#sanctuary-deco-bar:not(.hidden)) #action-pad,
  body:has(#sanctuary-deco-bar:not(.hidden)) #social-dock {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
  }

  body.observe-panel-open #right-rail .right-rail-items,
  body:has(#creature-observe-panel:not(.hidden)) #right-rail .right-rail-items,
  body.diver-card-open #right-rail .right-rail-items,
  body:has(#diver-card-popover:not(.hidden)) #right-rail .right-rail-items,
  body.in-sanctuary-space.sanctuary-decorating #right-rail .right-rail-items,
  body:has(#sanctuary-deco-bar:not(.hidden)) #right-rail .right-rail-items {
    display: none !important;
  }

  .sanctuary-deco-bar {
    bottom: calc(64px + var(--safe-bottom));
    width: calc(100vw - 16px - var(--safe-left) - var(--safe-right));
    padding: 8px 9px 9px;
    gap: 6px;
    border-radius: 18px;
  }

  .sanct-deco-head {
    flex-wrap: wrap;
    gap: 5px;
  }

  .sanct-save-hint {
    font-size: 10.5px;
    flex: 1 1 140px;
  }

  .sanct-deco-items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
  }

  .sanct-deco-chip {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 3px;
    border-radius: 11px;
    font-size: 11px;
    letter-spacing: -0.04em;
  }

  .creature-observe-panel {
    bottom: calc(64px + var(--safe-bottom));
    width: calc(100vw - 18px - var(--safe-left) - var(--safe-right));
    max-width: 404px;
    padding: 10px 10px 11px;
  }

  .diver-card-popover {
    bottom: calc(64px + var(--safe-bottom));
    width: calc(100vw - 22px - var(--safe-left) - var(--safe-right));
    max-width: 344px;
  }

  .obs-action-row {
    gap: 5px;
  }

  .obs-action-btn .obs-btn-main {
    font-size: 11px;
    letter-spacing: -0.03em;
  }

  .obs-action-btn .obs-btn-sub {
    font-size: 9.5px;
  }

  /* 5) 모달 다이얼로그: 아이폰 홈 바 및 갤럭시 하단 내비게이션 바 안전 영역 준수 */
  #book-modal,
  #photo-modal,
  #sound-mixer-modal,
  #friends-modal,
  #account-modal,
  #sanctuary-modal,
  #wardrobe-unlock-modal,
  #timer-modal,
  #spots-modal,
  #shell-write-modal,
  #shell-read-modal,
  #shell-pickup-confirm-modal {
    padding:
      calc(10px + var(--safe-top))
      calc(10px + var(--safe-right))
      calc(12px + var(--safe-bottom))
      calc(10px + var(--safe-left));
  }

  .glass-modal-card {
    max-height: calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));
  }

  /* 모바일 도감 모달: 가로 스크롤 없이 11개 카테고리가 한눈에 전부 보이도록 컴팩트 칩 래핑 배치 */
  .book-card {
    width: min(96vw, 720px);
    height: min(88dvh, 700px);
    max-height: calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));
  }

  .book-card .panel-header {
    padding: 10px 14px 6px;
  }

  .book-card .panel-header h2 {
    font-size: 16.5px;
  }

  .book-card .panel-header p {
    font-size: 11.2px;
  }

  .book-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
    overflow-x: visible;
  }

  .book-tab {
    flex: 1 1 auto;
    padding: 4.5px 6.5px;
    font-size: 10.9px;
    letter-spacing: -0.025em;
  }

  .book-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }
}

/* 삼성 갤럭시 기본형(360px~384px) 및 아이폰 미니·컴팩트 폭(375px) 정밀 튜닝 */
@media (max-width: 389px) {
  .hud-glass-pill {
    height: 34px;
    padding: 0 9px;
    font-size: 12px;
  }

  .quick-circle-btn {
    width: 40px;
    height: 40px;
  }

  .hud-treasure-stack {
    min-width: 44px;
    padding: 5px 5.5px;
    border-radius: 15px;
  }

  .hud-gem-svg {
    width: 13px;
    height: 13px;
  }

  .hud-treasure-num {
    font-size: 10.5px;
  }

  .chat-popover.hud-exposed-chat {
    left: 50%;
    transform: translateX(-50%);
    height: 39px;
    padding: 3px 4px 3px 9px;
    gap: 4px;
    width: clamp(216px, calc(100vw - 110px - var(--safe-left) - var(--safe-right)), 272px);
  }

  .chat-send-btn {
    height: 29px;
    padding: 0 9px;
    font-size: 11.8px;
  }

  .bottom-capsule-dock {
    height: 44px;
    padding: 3px 4px;
    gap: 2px;
  }

  .stroke-tab-btn,
  .sand-tool-btn {
    height: 34px;
    padding: 0 7.5px;
    font-size: 11.6px;
  }

  .sand-play-bar .sand-tool-btn {
    padding: 0 6.2px;
    font-size: 11.3px;
    letter-spacing: -0.03em;
  }

  .dock-dive-btn {
    height: 34px;
    padding: 0 9.5px;
    font-size: 11.8px;
  }

  .spot-theme-inline-label {
    font-size: 0;
  }

  .spot-theme-inline-label::before {
    content: '🎵';
    font-size: 11px;
  }

  .space-return-bar {
    max-width: calc(100vw - 68px - var(--safe-left) - var(--safe-right));
    padding: 3px 5px 3px 9px;
    gap: 4px;
  }

  .space-return-badge {
    max-width: 76px;
    font-size: 11px;
  }

  #spot-theme-inline-slider {
    width: 38px;
  }

  .space-exit-btn {
    padding: 0 8px;
    font-size: 10.4px;
  }

  .sanct-deco-chip {
    font-size: 10.2px;
    padding: 0 2px;
  }

  .obs-action-btn .obs-btn-main {
    font-size: 10.4px;
  }

  .fish-edu-with-photo {
    grid-template-columns: minmax(0, 1fr) 114px;
  }

  .book-filter-tabs {
    gap: 3.5px;
    padding: 5px 6px;
  }

  .book-tab {
    padding: 4px 5px;
    font-size: 10.2px;
    letter-spacing: -0.035em;
  }
}

/* 브라우저 주소창이 펼쳐진 단축 세로 화면(아이폰 SE 667px · 갤럭시 인터넷 640px~700px) 겹침 제로 보장 */
@media (max-width: 768px) and (max-height: 700px) {
  .right-icon-rail {
    top: calc(46px + var(--safe-top));
    gap: 2px;
  }

  .right-rail-items {
    gap: 2px;
  }

  .rail-btn {
    gap: 1px;
  }

  .rail-circle {
    width: 31px;
    height: 31px;
  }

  .rail-circle .hud-line-icon {
    width: 14.5px;
    height: 14.5px;
  }

  .rail-circle.small {
    width: 26px;
    height: 26px;
  }

  .rail-caption {
    font-size: 8.8px;
    line-height: 1;
  }

  .today-sea-card {
    padding: 5px 9px 6px;
  }

  body.observe-panel-open #right-rail .right-rail-items,
  body.in-sanctuary-space.sanctuary-decorating #right-rail .right-rail-items {
    display: none !important;
  }
}

/* 아이폰 · 갤럭시 가로 회전 모드 최적화 */
@media (max-height: 520px) and (orientation: landscape) {
  .right-icon-rail {
    top: calc(46px + var(--safe-top));
    gap: 4px;
  }

  .right-rail-items {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 4px 6px;
  }

  .rail-circle {
    width: 34px;
    height: 34px;
  }

  .today-sea-card {
    display: none;
  }

  .chat-popover.hud-exposed-chat {
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(58px + var(--safe-bottom));
    height: 36px;
  }

  .bottom-capsule-dock {
    bottom: calc(8px + var(--safe-bottom));
    height: 42px;
  }
}

/* =========================================================================
   [v88] 공개 운영 준비: 소셜 로그인 '준비 중' 비활성화 · 로컬 프로필 안내 문구
   ========================================================================= */
.social-login-btn.is-disabled,
.social-login-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.auth-guide-note.local-profile-note {
  margin-top: 0;
  margin-bottom: 8px;
}

/* =========================================================================
   [v90] 실시간 메타버스: 실제 접속 다이버 이름표 · 상단 실시간/오늘 누적 배지 · 친구 수락 버튼
   ========================================================================= */
.char-name-tag.remote-peer {
  background: rgba(8, 28, 38, 0.56);
  border-color: rgba(114, 239, 221, 0.58);
  color: #ffffff;
  padding: 3px 9px 3px 7px;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.18);
}

.char-peer-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.28);
  flex-shrink: 0;
}

.pending-accept-btn {
  height: 27px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.24);
  border: 1px solid rgba(110, 231, 183, 0.62);
  color: #ecfdf5;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.16s ease, transform 0.12s ease;
}

.pending-accept-btn:active {
  transform: scale(0.95);
  background: rgba(52, 211, 153, 0.38);
}

@media (max-width: 560px) {
  .today-sep,
  .today-count-inline {
    display: inline;
  }

  .presence-pill {
    padding: 0 9px;
  }

  .presence-counts {
    font-size: 11.5px;
    gap: 4px;
  }
}

/* =========================================================================
   [v91] 내 프로필 모달 3탭 구성 & [정보] 탭 (문의 · 약관 · 개인정보 · 저작권 안내)
   ========================================================================= */
.account-menu-tabs.three-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.account-menu-tabs.three-tabs .account-menu-tab {
  font-size: 12.2px;
  padding: 0 6px;
  gap: 4px;
  white-space: nowrap;
}

.account-menu-tabs.three-tabs .account-tab-badge {
  min-width: 24px;
  height: 19px;
  padding: 0 6px;
  font-size: 10.5px;
}

.info-inquiry-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 14px;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.24), rgba(45, 212, 191, 0.22));
  border: 1px solid rgba(153, 246, 228, 0.56);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.18);
  transition: transform 0.14s ease, background 0.16s ease, border-color 0.16s ease;
}

.info-inquiry-btn:hover {
  border-color: rgba(153, 246, 228, 0.85);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.32), rgba(45, 212, 191, 0.30));
}

.info-inquiry-btn:active {
  transform: scale(0.98);
}

.info-inquiry-left {
  font-size: 13.8px;
  font-weight: 800;
}

.info-inquiry-right {
  font-size: 11.5px;
  font-weight: 600;
  color: #ccfbf1;
  white-space: nowrap;
}

.info-legal-acc {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.info-legal-sum {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  font-size: 13.2px;
  font-weight: 700;
  color: #f0f9ff;
  user-select: none;
}

.info-legal-sum::-webkit-details-marker {
  display: none;
}

.info-acc-arrow {
  font-size: 12px;
  color: rgba(224, 242, 254, 0.78);
  transition: transform 0.18s ease;
}

.info-legal-acc[open] .info-acc-arrow {
  transform: rotate(180deg);
}

.info-legal-body {
  padding: 2px 14px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  line-height: 1.62;
  color: rgba(235, 246, 255, 0.88);
  word-break: keep-all;
}

.info-legal-body p {
  margin: 10px 0 0;
}

.info-legal-body a {
  color: #7dd3fc;
  text-decoration: underline;
}

.copyright-headline {
  color: #ffffff;
  font-size: 12.6px;
}

.info-copyright-list {
  margin: 8px 0 2px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-legal-ext-row {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

a.info-ext-link {
  display: inline-flex;
  align-items: center;
  height: 25px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #e0f2fe;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 400px) {
  .account-menu-tabs.three-tabs .account-menu-tab {
    font-size: 11.4px;
    padding: 0 4px;
  }

  .info-inquiry-btn {
    padding: 11px 12px;
  }
}