/* ---------- 색 토큰 ---------- */
:root {
  --ink: #1f2328;
  --ink-sub: #5b6370;
  --line: #c5cbd2;
  --primary: #2f6f9f;
  --primary-soft: #e3edf5;
  --primary-ink: #1d4a6b;
  --surface: #ffffff;
  --horizon: 30%;
}

/* 낮 06~17시 */
#app[data-time="day"] {
  --sky-top: #dfe7ef;
  --sky-bottom: #eef2f6;
  --sea-1: #d3dde6;
  --sea-2: #c9d5e0;
  --sea-3: #bfcdda;
  --sea-4: #b4c4d3;
  --city: #b9c5d0;
  --city-window: transparent;
  --wave-line: rgba(255, 255, 255, .55);
  --rod: #2b333c;
  --rod-grip: #6b5644;
  --fishing-line: rgba(31, 35, 40, .55);
  --btn-icon-bg: rgba(255, 255, 255, .6);
  --ink: #1f2328;
  --ink-sub: #4f5763;
}

/* 노을 17~19시 */
#app[data-time="dusk"] {
  --sky-top: #a7a2bd;
  --sky-bottom: #f1c9a8;
  --sea-1: #d6b9b0;
  --sea-2: #c6aeb0;
  --sea-3: #b5a4ac;
  --sea-4: #a89caa;
  --city: #8e7f92;
  --city-window: transparent;
  --wave-line: rgba(255, 236, 214, .5);
  --rod: #2a2730;
  --rod-grip: #5e4a3f;
  --fishing-line: rgba(31, 35, 40, .55);
  --btn-icon-bg: rgba(255, 255, 255, .45);
  --ink: #1f2328;
  --ink-sub: #3b4250;
}

/* 밤 19~06시 */
#app[data-time="night"] {
  --sky-top: #1b1f26;
  --sky-bottom: #262b33;
  --sea-1: #36404c;
  --sea-2: #313a45;
  --sea-3: #2c353f;
  --sea-4: #272f38;
  --city: #1d2229;
  --city-window: rgba(240, 214, 150, .55);
  --wave-line: rgba(214, 219, 225, .18);
  --rod: #0f1216;
  --rod-grip: #3c3129;
  --fishing-line: rgba(214, 219, 225, .5);
  --btn-icon-bg: rgba(255, 255, 255, .08);
  --line: #4a5461;
  --ink: #d6dbe1;
  --ink-sub: #aab2bc;
}

/* ---------- 기본 ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: #15181d;
  font-family: "Noto Sans KR", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#app {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  color: var(--ink);
  background: var(--sky-top);
}

/* 데스크톱: 가운데 폰 화면처럼 */
@media (min-width: 520px) {
  body { display: grid; place-items: center; }
  #app {
    width: 410px;
    height: min(calc(100dvh - 48px), 880px);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  }
}

h1, h2, p { margin: 0; }

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.screen[hidden] { display: none; }

/* ---------- 버튼 ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  height: 52px;
  border: 0;
  background: var(--primary);
  color: #fff;
}

.btn-primary:active { background: var(--primary-ink); }

.btn-secondary {
  height: 48px;
  border: 1px solid #c5cbd2;
  background: var(--surface);
  color: var(--ink-on-light, #1f2328);
}

.icon-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--btn-icon-bg);
  color: inherit;
  cursor: pointer;
}

.icon-btn svg { width: 22px; height: 22px; }

[aria-pressed="true"] .icon-sound-off,
[aria-pressed="false"] .icon-sound-on { display: none; }

/* 아이콘 + 아래 작은 글자 라벨 (누르는 영역은 둘 다 포함) */
.tool {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.tool .icon-btn { position: relative; }

.tool-label {
  font-size: 11px;
  line-height: 1;
  color: var(--ink-sub);
}

.count-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: #c2453a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.news-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--sky-top);
  border-radius: 50%;
  background: #c2453a;
}

.count-badge[hidden], .news-dot[hidden] { display: none; }

:focus-visible {
  outline: 3px solid #7fb2e0;
  outline-offset: 2px;
}

/* ---------- 01 바다 ---------- */
.topbar {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: max(12px, env(safe-area-inset-top)) 16px 10px;
  background: var(--sky-top);
}

.topbar-title { flex: 1; min-width: 0; padding-top: 3px; }

.topbar-sub {
  font-size: 12px;
  color: var(--ink-sub);
  letter-spacing: .02em;
}

.topbar h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.scene {
  position: relative;
  flex: 1;
  overflow: hidden;
  isolation: isolate;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.sky {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--horizon);
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
}

.sun, .moon {
  position: absolute;
  display: none;
  border-radius: 50%;
}

#app[data-time="day"] .sun {
  display: block;
  right: 18%;
  top: 22%;
  width: 40px;
  height: 40px;
  background: #fbf6e6;
  box-shadow: 0 0 0 10px rgba(251, 246, 230, .35), 0 0 40px 12px rgba(251, 246, 230, .5);
}

#app[data-time="dusk"] .sun {
  display: block;
  left: 22%;
  bottom: -14px;
  width: 52px;
  height: 52px;
  background: #f7a979;
  box-shadow: 0 0 50px 18px rgba(247, 169, 121, .55);
}

#app[data-time="night"] .moon {
  display: block;
  right: 20%;
  top: 20%;
  width: 30px;
  height: 30px;
  background: #e9e4d2;
  box-shadow: inset -8px -3px 0 0 #cfc8b0, 0 0 24px 6px rgba(233, 228, 210, .18);
}

.stars { position: absolute; inset: 0; display: none; }
#app[data-time="night"] .stars { display: block; }

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #e8ecf1;
  animation: twinkle 4s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: .9; }
  50% { opacity: .35; }
}

.city {
  position: absolute;
  left: 0;
  width: 100%;
  height: 7%;
  bottom: calc(100% - var(--horizon));
  fill: var(--city);
}

.city .window { fill: var(--city-window); }

.sea {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--horizon);
  bottom: 0;
  background: linear-gradient(var(--sea-1), var(--sea-2));
}

/* 물결: 물결 모양 마스크를 좌우로 흘려보낸다 */
.wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q20 2 40 10 T80 10 T120 10 T160 10 V20 H0Z'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--wave), linear-gradient(#000, #000);
  mask-image: var(--wave), linear-gradient(#000, #000);
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  animation: wave-flow linear infinite;
}

.wave::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--wave-line);
  filter: blur(1px);
}

.wave-1 {
  top: 8%;
  background: linear-gradient(var(--sea-2), var(--sea-3));
  --w: 120px; --h: 6px;
  animation-duration: 14s;
}

.wave-2 {
  top: 32%;
  background: linear-gradient(var(--sea-3), var(--sea-4));
  --w: 220px; --h: 10px;
  animation-duration: 11s;
}

.wave-3 {
  top: 62%;
  background: var(--sea-4);
  --w: 380px; --h: 16px;
  animation-duration: 9s;
}

.wave {
  -webkit-mask-size: var(--w) var(--h), 100% calc(100% - var(--h) + 1px);
  mask-size: var(--w) var(--h), 100% calc(100% - var(--h) + 1px);
  -webkit-mask-position: 0 0, 0 calc(var(--h) - 1px);
  mask-position: 0 0, 0 calc(var(--h) - 1px);
}

@keyframes wave-flow {
  from {
    -webkit-mask-position: 0 0, 0 calc(var(--h) - 1px);
    mask-position: 0 0, 0 calc(var(--h) - 1px);
  }
  to {
    -webkit-mask-position: var(--w) 0, 0 calc(var(--h) - 1px);
    mask-position: var(--w) 0, 0 calc(var(--h) - 1px);
  }
}

.floaters { position: absolute; inset: 0; }

.floater {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 120px;
  padding: 0;
  border: 0;
  background: none;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  cursor: pointer;
}

/* 아래쪽이 물에 살짝 잠긴 것처럼 */
.floater svg {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(#000 74%, rgba(0, 0, 0, .25) 86%, transparent 96%);
  mask-image: linear-gradient(#000 74%, rgba(0, 0, 0, .25) 86%, transparent 96%);
}

/* ---------- 바다가 보낸 병: 일반 병엔 절대 없는 효과 ---------- */
.floater.special { overflow: visible; }
.floater.special svg { position: relative; z-index: 2; }

/* 병 뒤 따뜻한 금빛 후광 (2.5초 주기) */
.sea-halo {
  position: absolute;
  left: 50%;
  top: 70%;
  width: 170%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 222, 140, .75) 0%, rgba(255, 196, 100, .35) 38%, rgba(255, 190, 90, 0) 68%);
  transform: translate(-50%, -50%) scale(.85);
  animation: sea-halo 2.5s ease-in-out infinite;
  pointer-events: none;
}

#app[data-time="night"] .sea-halo {
  background: radial-gradient(circle, rgba(255, 230, 160, 1) 0%, rgba(255, 200, 110, .6) 38%, rgba(255, 190, 90, 0) 70%);
  width: 210%;
}

@keyframes sea-halo {
  0%, 100% { transform: translate(-50%, -50%) scale(.82); opacity: .75; }
  50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

/* 병 위로 희미한 빛줄기 */
.sea-beam {
  position: absolute;
  left: 50%;
  bottom: 62%;
  width: 34%;
  height: 150%;
  background: linear-gradient(to top, rgba(255, 236, 180, .55), rgba(255, 236, 180, 0));
  filter: blur(5px);
  transform: translateX(-50%);
  animation: sea-beam 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sea-beam {
  0%, 100% { opacity: .45; }
  50% { opacity: .9; }
}

/* 위로 떠오르는 반짝이는 입자 */
.sea-spark {
  position: absolute;
  left: var(--x);
  bottom: 30%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff6cf;
  box-shadow: 0 0 8px 3px rgba(255, 220, 130, .8);
  transform: scale(var(--s));
  opacity: 0;
  animation: sea-spark 3.6s linear infinite;
  animation-delay: var(--d);
  pointer-events: none;
}

@keyframes sea-spark {
  0% { transform: translateY(0) scale(var(--s)); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-140px) scale(calc(var(--s) * .4)); opacity: 0; }
}

/* 수면에 길게 비치는 금빛 반사광 */
.sea-reflect {
  position: absolute;
  left: 50%;
  top: 90%;
  width: 70%;
  height: 90%;
  background: linear-gradient(rgba(255, 214, 120, .7), rgba(255, 214, 120, 0));
  filter: blur(3px);
  transform: translateX(-50%);
  -webkit-mask-image: repeating-linear-gradient(#000 0 5px, rgba(0, 0, 0, .25) 8px, #000 11px);
  mask-image: repeating-linear-gradient(#000 0 5px, rgba(0, 0, 0, .25) 8px, #000 11px);
  pointer-events: none;
}

/* 건질 때: 금빛 물보라 + 화면 전체가 잠깐 따뜻하게 */
.drop.gold { background: #ffd978; box-shadow: 0 0 6px 2px rgba(255, 210, 110, .7); }

.warm-flash {
  position: absolute;
  inset: 0;
  z-index: 65;
  background: radial-gradient(ellipse at 50% 65%, rgba(255, 220, 150, .75), rgba(255, 190, 110, .35) 55%, rgba(255, 170, 90, .15));
  pointer-events: none;
}

/* 등장 안내 */
.sea-notice {
  position: absolute;
  left: 50%;
  top: calc(max(12px, env(safe-area-inset-top)) + 72px);
  z-index: 57;
  padding: 10px 18px;
  border-radius: 22px;
  background: rgba(40, 32, 18, .82);
  color: #ffe9b0;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.sea-notice[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sea-halo, .sea-beam { animation: none; }
  .sea-spark { display: none; }
}

.rod {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.rod-shaft { fill: var(--rod); }
.rod-grip { fill: var(--rod-grip); }
.rod-rings circle, .rod-tip { fill: none; stroke: var(--rod); stroke-width: 1.4; }
.rod-line { fill: none; stroke: var(--fishing-line); stroke-width: 1.1; }

.sea-empty {
  position: absolute;
  left: 16px;
  right: 16px;
  top: calc(var(--horizon) + 18%);
  text-align: center;
  font-size: 15px;
  color: var(--ink);
}

.sea-empty[hidden] { display: none; }

.bottom {
  position: relative;
  z-index: 20;
  padding: 14px 16px max(16px, env(safe-area-inset-bottom));
  background: var(--sea-4);
}

.bottom-idle {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 낚시 중에는 높이는 그대로 두고 위로 겹쳐 띄운다 (바다 크기가 바뀌지 않게) */
.bottom.fishing .bottom-idle { visibility: hidden; }

.bottom-fish {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 16px max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--sea-4) 26px);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.bottom-fish[hidden] { display: none; }

.fish-title {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

.hint {
  text-align: center;
  font-size: 14px;
  color: var(--ink-sub);
}

.reel { margin: 4px 0 2px; }
.reel.idle { visibility: hidden; }

.reel-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .5);
  overflow: hidden;
}

#app[data-time="night"] .reel-bar { background: rgba(255, 255, 255, .14); }

.reel-fill {
  width: 0%;
  height: 100%;
  border-radius: 4px;
  background: var(--primary);
}

.reel-text {
  margin-top: 6px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-sub);
  font-variant-numeric: tabular-nums;
}

.btn-hold {
  touch-action: none;
  -webkit-touch-callout: none;
}

/* 걸려 있는 동안엔 화면 아무 데나 꾹 누를 수 있게: 스크롤·확대·길게 누르기 메뉴·글자 선택을 막는다 */
#app.fishing {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.btn-hold:disabled { opacity: .55; cursor: default; }
.btn-hold.holding { background: var(--primary-ink); transform: scale(.98); }

.btn-text {
  align-self: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--ink-sub);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* 낚시 효과 */
.effects { position: absolute; inset: 0; pointer-events: none; z-index: 1500; }

.ripple {
  position: absolute;
  width: 26px;
  height: 8px;
  margin: -4px 0 0 -13px;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
}

.hook-bubble {
  position: absolute;
  padding: 6px 12px;
  border-radius: 14px;
  background: #fff;
  color: #1d4a6b;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.hook-bubble.quiet {
  padding: 5px 10px;
  background: rgba(255, 255, 255, .88);
  color: #4f5763;
  font-size: 13px;
  font-weight: 500;
}

.hook-bubble.quiet::after { background: rgba(255, 255, 255, .88); }

.hook-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: #fff;
  transform: rotate(45deg);
}

.drop {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
}

.rod-hook { fill: none; stroke: var(--rod); stroke-width: 1.4; stroke-linecap: round; }

/* 상단 바 메뉴 */
.menu-wrap { position: relative; }

.menu {
  position: absolute;
  right: 0;
  top: 52px;
  z-index: 40;
  min-width: 190px;
  padding: 6px;
  border: 1px solid #c5cbd2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20, 26, 34, .18);
}

.menu[hidden] { display: none; }

.menu-item {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #1f2328;
  font: inherit;
  font-size: 15px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.menu-item:hover, .menu-item:focus-visible { background: #eef2f6; }

/* ---------- 사용법 안내: 말풍선 · 소식 · 날아가는 편지 ---------- */
.coach {
  position: absolute;
  z-index: 55;
  max-width: 250px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #1d4a6b;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 8px 22px rgba(20, 26, 34, .25);
  pointer-events: none;
}

.coach[hidden] { display: none; }

/* 꼬리: 위(대상이 위에 있음) 또는 아래(대상이 아래에 있음) */
.coach::before {
  content: "";
  position: absolute;
  left: var(--arrow-x, 50%);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: inherit;
  transform: rotate(45deg);
}

.coach.below::before { top: -5px; }
.coach.above::before { bottom: -5px; }

.news-banner {
  position: absolute;
  left: 50%;
  top: calc(max(12px, env(safe-area-inset-top)) + 70px);
  z-index: 56;
  max-width: calc(100% - 32px);
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: 22px;
  background: #fff;
  color: #1d4a6b;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(20, 26, 34, .22);
  transform: translateX(-50%);
  cursor: pointer;
}

.news-banner[hidden] { display: none; }

.fly {
  position: absolute;
  z-index: 58;
  pointer-events: none;
}

.fly svg { display: block; width: 100%; height: 100%; }

.archive-empty .btn { margin: 16px auto 0; width: auto; padding: 0 28px; }

/* ---------- 00 인트로 ---------- */
.story {
  position: absolute;
  inset: 0;
  z-index: 70;
  overflow: hidden;
  color: #1f2328;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}

.story[hidden] { display: none; }

.story-world {
  position: absolute;
  inset: 0;
  --story-horizon: 42%;
}

.story-sky {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--story-horizon);
  background: linear-gradient(#a7a2bd 0%, #d9b2a6 62%, #f3cfae 100%);
  overflow: hidden;
}

.story-sun {
  position: absolute;
  left: 22%;
  bottom: -22px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f7a979;
  box-shadow: 0 0 60px 24px rgba(247, 169, 121, .55);
}

.story-city {
  position: absolute;
  left: 0;
  width: 100%;
  height: 6%;
  top: calc(var(--story-horizon) - 6%);
  fill: #8e7f92;
}

.story-sea {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--story-horizon);
  bottom: 0;
  background: linear-gradient(#d6b9b0 0%, #b5a4ac 45%, #8f8798 100%);
  overflow: hidden;
}

/* 수평선 아래로 길게 비치는 노을 */
.story-glow {
  position: absolute;
  left: calc(22% - 18px);
  top: 0;
  width: 100px;
  height: 70%;
  background: linear-gradient(rgba(255, 214, 170, .55), rgba(255, 214, 170, 0));
  filter: blur(5px);
  -webkit-mask-image: repeating-linear-gradient(#000 0 5px, rgba(0, 0, 0, .35) 8px, #000 12px);
  mask-image: repeating-linear-gradient(#000 0 5px, rgba(0, 0, 0, .35) 8px, #000 12px);
}

.story-boat {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 120px;
  height: 80px;
  margin: -64px 0 0 -60px;
  animation: story-bob 4.2s ease-in-out infinite;
  transform-origin: 50% 80%;
}

.story-boat svg { display: block; width: 100%; height: 100%; fill: #2e2833; }

.story-wake {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 240, 225, .5);
  filter: blur(2px);
}

.story-bottles { position: absolute; inset: 0; }

.story-bottle {
  position: absolute;
  width: 20px;
  height: 40px;
  margin: -40px 0 0 -10px;
  transition-property: left, top;
  transition-timing-function: linear; /* 해류를 따라 일정하게 흐른다 */
}

.story-bottle > div {
  width: 100%;
  height: 100%;
  animation: story-bob 3.4s ease-in-out infinite;
  transform-origin: 50% 90%;
}

.story-bottle svg {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(#000 74%, transparent 96%);
  mask-image: linear-gradient(#000 74%, transparent 96%);
}

@keyframes story-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(4px) rotate(2deg); }
}

.story-text {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 13%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
  pointer-events: none;
}

.story-line {
  min-height: 3.2em;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
  word-break: keep-all;
}

.story-line.first { font-size: 28px; font-weight: 700; letter-spacing: .02em; }

.story-start {
  width: auto;
  padding: 0 32px;
  pointer-events: auto;
  box-shadow: 0 8px 24px rgba(29, 74, 107, .3);
}

.story-start[hidden] { display: none; }

.story-skip {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 16px;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 22px;
  background: rgba(255, 255, 255, .55);
  color: #1f2328;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* 인트로가 덮고 있는 동안 1인칭 바다의 상단 바·낚싯대는 숨겨 둔다 (끝날 때 나타남) */
#app.story-on .topbar { opacity: 0; }
#app.story-on .rod { transform: translate(140px, 200px); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .story-boat, .story-bottle > div { animation-duration: 12s; }
}

/* ---------- 준비 중 화면 ---------- */
.screen-soon { background: #eef2f6; color: #1f2328; }

.subbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(12px, env(safe-area-inset-top)) 16px 10px;
  --line: #c5cbd2;
  --btn-icon-bg: #fff;
}

.subbar h2 { font-size: 18px; }

.soon-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 16px;
  color: #5b6370;
}

/* ---------- 04 편지 · 04-b 쓰레기 ---------- */
.screen-page {
  background: #eef2f6;
  color: #1f2328;
  --ink: #1f2328;
  --ink-sub: #5b6370;
  --line: #c5cbd2;
  --btn-icon-bg: #fff;
}

.page-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 16px max(16px, env(safe-area-inset-bottom));
  overflow-y: auto;
}

.letter-bottle, .found-item {
  display: grid;
  place-items: center;
  height: 190px;
  margin-top: 4px;
  border-radius: 20px;
  background: linear-gradient(#e3edf5, #d3dde6);
}

.letter-bottle svg, .found-item svg { width: 76px; height: 152px; }

.letter-card {
  padding: 22px 20px 12px;
  border: 1px solid #e0d6bf;
  border-radius: 16px;
  background: #fbf7ec;
  box-shadow: 0 2px 10px rgba(31, 35, 40, .05);
}

.letter-text {
  min-height: 72px;
  color: #2a2620;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.font-pen { font-family: "Nanum Pen Script", cursive; font-size: 28px; line-height: 1.35; }
.font-round { font-family: "Gaegu", cursive; font-size: 22px; line-height: 1.5; }
.font-mono { font-family: "Nanum Gothic Coding", monospace; font-size: 17px; line-height: 1.7; }

.letter-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  padding-top: 6px;
  border-top: 1px dashed #d9cfb8;
  font-size: 13px;
  color: #5b6370;
}

.btn-report { font-size: 13px; padding: 0 4px; }
.btn-report[hidden] { display: none; }

/* 별표 (마음에 남은 편지) */
.star-btn { margin-left: auto; color: #8a6d1f; }
.star-btn svg { fill: none; }
.star-btn[aria-pressed="true"] { background: #fff6dc; border-color: #e3c46a; }
.star-btn[aria-pressed="true"] svg { fill: #e3b23c; }
.star-btn[hidden] { display: none; }

/* 바다가 보낸 병: 바랜 종이 */
.letter-card.from-sea {
  border-color: #d5c3a1;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(255, 255, 255, .5), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(176, 140, 90, .18), transparent 60%),
    #efe3c8;
  box-shadow: inset 0 0 40px rgba(150, 115, 60, .18), 0 2px 10px rgba(31, 35, 40, .06);
}

.letter-card.from-sea .letter-text { color: #4a3b26; }
.letter-card.from-sea .letter-text span { display: block; }
.letter-card.from-sea .letter-meta { border-top-color: #cdb990; color: #6b5a40; }

.letter-from {
  margin-top: 10px;
  text-align: right;
  font-family: "Nanum Pen Script", cursive;
  font-size: 24px;
  color: #6b5a40;
}

.letter-from[hidden] { display: none; }

.letter-bottle.from-sea svg { filter: drop-shadow(0 0 10px rgba(255, 226, 150, .9)); }

.page-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.btn-row { display: flex; gap: 10px; }
.page-actions.btn-row { flex-direction: row; }
.page-body > * { flex-shrink: 0; }
.btn-row .btn { flex: 1; font-size: 15px; }

.found-copy { text-align: center; }
.found-title { font-size: 18px; font-weight: 700; }
.found-sub { margin-top: 6px; font-size: 14px; color: #5b6370; }

.collect-progress {
  padding: 14px 16px;
  border: 1px solid #c5cbd2;
  border-radius: 14px;
  background: #fff;
}

.collect-progress .reel-bar { background: #e3edf5; }

.collect-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.unlock-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #e3edf5;
  color: #1d4a6b;
}

.unlock-card[hidden] { display: none; }
.unlock-bottle svg { width: 30px; height: 60px; display: block; }
.unlock-title { font-weight: 700; }
.unlock-name { font-size: 14px; }

/* ---------- 05 글귀 쓰기 ---------- */
.subbar .step {
  margin-left: auto;
  font-size: 13px;
  color: #5b6370;
  font-variant-numeric: tabular-nums;
}

.field-label {
  display: block;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
}

.paper {
  position: relative;
  border: 1px solid #e0d6bf;
  border-radius: 16px;
  background: #fbf7ec;
}

.paper:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 111, 159, .18); }

.paper textarea {
  display: block;
  width: 100%;
  min-height: 150px;
  padding: 18px 18px 32px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #2a2620;
  resize: none;
  outline: none;
}

.paper textarea::placeholder { color: #8d8676; }

.counter {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 12px;
  color: #5b6370;
  font-variant-numeric: tabular-nums;
}

.font-pick { margin: 0; padding: 0; border: 0; }
.font-pick legend { margin-bottom: 8px; }

.font-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.font-option {
  min-height: 52px;
  padding: 4px;
  border: 1px solid #c5cbd2;
  border-radius: 12px;
  background: #fff;
  color: #1f2328;
  cursor: pointer;
}

.font-option.font-pen { font-size: 24px; }
.font-option.font-round { font-size: 19px; }
.font-option.font-mono { font-size: 15px; }

.font-option[aria-pressed="true"],
.deco-option[aria-pressed="true"],
.tab[aria-selected="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-ink);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.notice {
  font-size: 13px;
  line-height: 1.6;
  color: #5b6370;
}

.form-error {
  padding: 10px 14px;
  border-radius: 12px;
  background: #fbeceb;
  color: #8a2c22;
  font-size: 14px;
}

.form-error[hidden] { display: none; }

.crisis {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-size: 15px;
  line-height: 1.6;
}

.crisis[hidden] { display: none; }
.crisis a[href^="tel"] { color: inherit; font-weight: 700; }

/* ---------- 06 병 꾸미기 ---------- */
.deco-preview {
  display: grid;
  place-items: center;
  flex: none;
  height: 200px;
  border-radius: 20px;
  background: linear-gradient(#e3edf5, #d3dde6);
}

.deco-preview svg { width: 80px; height: 160px; }

.deco-summary {
  margin-top: -6px;
  text-align: center;
  font-size: 14px;
  color: #5b6370;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.tab {
  min-height: 44px;
  padding: 0 4px;
  border: 1px solid #c5cbd2;
  border-radius: 12px;
  background: #fff;
  color: #1f2328;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.deco-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.deco-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 8px 12px;
  border: 1px solid #c5cbd2;
  border-radius: 14px;
  background: #fff;
  color: #1f2328;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.deco-option svg { flex: none; width: 28px; height: 56px; }
.deco-option .swatch {
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid #8a98a5;
  border-radius: 50%;
}

.deco-option small { display: block; margin-top: 2px; font-size: 12px; color: #5b6370; }

.deco-option:disabled {
  cursor: not-allowed;
  background: #f3f5f7;
  color: #5b6370;
}

.deco-option:disabled svg { opacity: .4; }

/* ---------- 07 띄우기 완료 ---------- */
.sent-body { gap: 14px; padding-top: max(16px, env(safe-area-inset-top)); }

.sent-scene {
  position: relative;
  flex: none;
  height: 150px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(#eef2f6 0 40%, #d3dde6 40%);
}

.sent-sea {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  height: 2px;
  background: rgba(255, 255, 255, .8);
}

.sent-bottle {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 50px;
  height: 100px;
  margin-left: -25px;
  transform-origin: 50% 100%;
}

.sent-bottle svg { width: 100%; height: 100%; }

.sent-copy { text-align: center; }
.sent-copy h2 { font-size: 20px; }
.sent-copy p { margin-top: 4px; font-size: 14px; color: #5b6370; }

.share-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.share-card {
  position: relative;
  flex: none;
  width: 126px;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(#eef2f6 0 32%, #d3dde6 32%, #b4c4d3);
  box-shadow: 0 4px 14px rgba(31, 35, 40, .12);
}

.share-sky {
  position: absolute;
  left: 0;
  right: 0;
  top: 27%;
  height: 5%;
  background: linear-gradient(transparent, #b9c5d0);
  -webkit-mask: linear-gradient(90deg, #000 0 8%, transparent 8% 11%, #000 11% 20%, transparent 20% 26%, #000 26% 40%, transparent 40% 44%, #000 44% 58%, transparent 58% 63%, #000 63% 80%, transparent 80% 84%, #000 84%);
  mask: linear-gradient(90deg, #000 0 8%, transparent 8% 11%, #000 11% 20%, transparent 20% 26%, #000 26% 40%, transparent 40% 44%, #000 44% 58%, transparent 58% 63%, #000 63% 80%, transparent 80% 84%, #000 84%);
}

.share-bottle {
  position: absolute;
  left: 50%;
  top: 36%;
  width: 30px;
  height: 60px;
  margin-left: -15px;
}

.share-bottle svg { width: 100%; height: 100%; }

.share-text {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 74%;
  color: #1f2328;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.share-text.font-pen { font-size: 13px; line-height: 1.2; }
.share-text.font-round { font-size: 11px; line-height: 1.3; }
.share-text.font-mono { font-size: 9px; line-height: 1.4; }

.share-brand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  text-align: center;
  font-size: 7px;
  color: #1d4a6b;
}

.share-notes {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: #1f2328;
}

.info-card {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-size: 14px;
}

/* ---------- 09 보관함 ---------- */
.banner {
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff6e0;
  color: #6b4e12;
  font-size: 13px;
  line-height: 1.5;
}

.tabs-3 { grid-template-columns: repeat(3, 1fr); }

.archive-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}

.archive-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 76px;
  padding: 10px 14px;
  border: 1px solid #c5cbd2;
  border-radius: 14px;
  background: #fff;
  color: #1f2328;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

button.archive-item { cursor: pointer; }

.archive-thumb { flex: none; width: 28px; height: 56px; }
.archive-thumb svg { width: 100%; height: 100%; display: block; }

.archive-main { flex: 1; min-width: 0; }

.archive-text, .archive-date { display: block; }

.archive-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
}

.archive-date {
  margin-top: 4px;
  font-size: 12px;
  color: #5b6370;
  font-variant-numeric: tabular-nums;
}

.badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f6;
  color: #5b6370;
  font-size: 12px;
}

.badge.reached { background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; }

.archive-empty {
  padding: 32px 8px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: #5b6370;
}

.archive-empty .btn { margin-top: 16px; }

.collect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.collect-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px 12px;
  border: 1px solid #c5cbd2;
  border-radius: 14px;
  background: #fff;
  font-size: 13px;
  text-align: center;
}

.collect-cell svg { width: 32px; height: 64px; }
.collect-cell.unknown svg { filter: brightness(0) opacity(.18); }
.collect-cell strong { font-size: 15px; font-variant-numeric: tabular-nums; }

.unlock-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.unlock-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #c5cbd2;
  font-size: 14px;
}

.unlock-list li.done { background: var(--primary-soft); border-color: transparent; color: var(--primary-ink); }
.unlock-list span:last-child { flex: none; font-size: 13px; color: inherit; }

.section-title { margin-top: 6px; font-size: 15px; font-weight: 700; }

/* 보관함: 나의 바다 기록 입구 */
.record-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary-ink);
  text-decoration: none;
}

.record-entry > svg { flex: none; width: 24px; height: 24px; }
.record-entry-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.record-entry-text strong { font-size: 15px; }
.record-entry-text small { font-size: 12px; color: #3d5f78; }

/* 건진 편지: 목록/선반 전환 */
.view-toggle {
  display: flex;
  gap: 4px;
  align-self: flex-end;
  padding: 3px;
  border-radius: 12px;
  background: #e3e8ee;
}

.view-toggle button {
  min-width: 56px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: #4f5763;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.view-toggle button[aria-pressed="true"] { background: #fff; color: #1f2328; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

.archive-item.from-sea { background: #f6efdf; border-color: #d9c79f; }
.archive-item.from-sea .archive-thumb svg { filter: drop-shadow(0 0 4px rgba(255, 220, 140, .9)); }
.archive-star { flex: none; width: 18px; height: 18px; fill: #e3b23c; }

/* 나의 바다 선반 */
.shelf {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 14px 10px 10px;
  border-radius: 16px;
  background: linear-gradient(#e9edf1, #dfe5eb);
}

.shelf-row { position: relative; }

.shelf-items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  min-height: 84px;
  padding: 0 4px;
}

.shelf-bottle {
  position: relative;
  justify-self: center;
  width: 44px;
  height: 80px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.shelf-bottle svg { display: block; width: 100%; height: 100%; }
.shelf-bottle:active { transform: translateY(-3px); }

.shelf-bottle .shelf-star {
  position: absolute;
  top: -4px;
  right: -2px;
  width: 16px;
  height: 16px;
  fill: #e3b23c;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}

/* 나무 선반 */
.shelf-plank {
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(#b98b5e, #9a6f47 70%, #7f5a39);
  box-shadow: 0 6px 8px -4px rgba(60, 40, 20, .45);
}

/* 나의 바다 기록 화면 */
.record-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
}

.record-list div {
  padding: 14px;
  border: 1px solid #c5cbd2;
  border-radius: 14px;
  background: #fff;
}

.record-list dt { font-size: 12px; color: #5b6370; }
.record-list dd { margin: 6px 0 0; font-size: 20px; font-weight: 700; color: #1d4a6b; word-break: keep-all; }

.record-quote {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid #e0d6bf;
  border-radius: 14px;
  background: #fbf7ec;
}

.record-quote[hidden] { display: none; }
.record-quote figcaption { font-size: 12px; color: #6b5a40; }
.record-quote blockquote { margin: 6px 0 0; color: #2a2620; }

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(150px + env(safe-area-inset-bottom));
  z-index: 60;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(31, 35, 40, .88);
  color: #fff;
  font-size: 14px;
  text-align: center;
  transform: translateX(-50%);
}

.toast[hidden] { display: none; }

.demo-badge {
  position: absolute;
  left: 12px;
  bottom: calc(132px + env(safe-area-inset-bottom));
  z-index: 40;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(31, 35, 40, .62);
  color: #fff;
  font-size: 11px;
  pointer-events: none;
}

.demo-badge[hidden] { display: none; }

/* 움직임 줄이기 */
@media (prefers-reduced-motion: reduce) {
  .wave { animation-duration: 60s !important; }
  .star { animation: none; }
}

/* 익명 통계 안내 (인트로 마지막·보관함 맨 아래) */
.story-privacy {
  max-width: 300px;
  font-size: 11px;
  line-height: 1.5;
  color: #3b4250;
  pointer-events: auto;
}

.story-privacy[hidden] { display: none; }

.privacy-note {
  margin-top: 8px;
  padding: 0 4px 8px;
  font-size: 11px;
  line-height: 1.5;
  color: #5b6370;
  text-align: center;
}

/* 수면의 반짝임: 해류 방향(왼쪽 → 오른쪽, sea.js의 FLOW_DIR)으로 흐른다 */
.glints {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1px at 20px 30px, rgba(255, 255, 255, .8), transparent),
    radial-gradient(2px 1px at 90px 80px, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1.5px 1px at 150px 20px, rgba(255, 255, 255, .6), transparent),
    radial-gradient(2.5px 1px at 60px 140px, rgba(255, 255, 255, .7), transparent),
    radial-gradient(2px 1px at 170px 110px, rgba(255, 255, 255, .6), transparent);
  background-size: 200px 160px;
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 85%, transparent);
  mask-image: linear-gradient(transparent, #000 25%, #000 85%, transparent);
  animation: glint-flow 18s linear infinite, glint-twinkle 3.2s ease-in-out infinite;
}

#app[data-time="night"] .glints { opacity: .45; }

@keyframes glint-flow {
  from { background-position: 0 0; }
  to { background-position: 200px 0; }
}

@keyframes glint-twinkle {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(.6); }
}

@media (prefers-reduced-motion: reduce) {
  .glints { animation: glint-flow 36s linear infinite; }
}

.shelf-label { margin: 0 4px 4px; font-size: 12px; color: #6b5a40; }
.shelf-bottle.sea { width: 52px; height: 96px; }
.shelf-bottle.sea svg { filter: drop-shadow(0 0 6px rgba(255, 220, 140, .9)); }

/* ---------- 10 내 병의 여정 ---------- */
.hide-text-btn {
  margin-left: auto;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #c5cbd2;
  border-radius: 12px;
  background: #fff;
  color: #1f2328;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.hide-text-btn[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-ink); }

.journey-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(#e3edf5, #d3dde6);
}

.journey-bottle { flex: none; width: 56px; height: 112px; }
.journey-bottle svg { width: 100%; height: 100%; display: block; }

.journey-text {
  flex: 1;
  color: #2a2620;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.journey-text.font-pen { font-size: 24px; }
.journey-text.font-round { font-size: 19px; }
.journey-text.font-mono { font-size: 15px; }
.journey-text.hidden-text { font-size: 14px; color: #5b6370; font-style: italic; }

.journey-loading { text-align: center; color: #5b6370; font-size: 14px; }
.journey-body { display: flex; flex-direction: column; gap: 14px; }
.journey-body[hidden] { display: none; }

.journey-big {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  color: #1d4a6b;
  word-break: keep-all;
}

.journey-sub { margin-top: -8px; text-align: center; color: #5b6370; }
.journey-sub[hidden] { display: none; }

.journey-facts {
  margin: 0;
  padding: 14px 16px 14px 32px;
  border: 1px solid #c5cbd2;
  border-radius: 14px;
  background: #fff;
  font-size: 14px;
  line-height: 1.9;
}

.journey-tod { display: flex; flex-direction: column; gap: 8px; }
.journey-tod[hidden] { display: none; }

.tod-row { display: grid; grid-template-columns: 36px 1fr 40px; gap: 10px; align-items: center; font-size: 13px; }
.tod-track { height: 10px; border-radius: 5px; background: #e3e8ee; overflow: hidden; }
.tod-fill { height: 100%; border-radius: 5px; }
.tod-day .tod-fill { background: #e3b23c; }
.tod-sunset .tod-fill { background: #d9826a; }
.tod-night .tod-fill { background: #3d5f8c; }
.tod-num { text-align: right; font-variant-numeric: tabular-nums; color: #5b6370; }

.journey-timeline { padding: 18px 10px 4px; }

.tl-track {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #9fb7cc, #2f6f9f);
}

.tl-dot {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  background: #e3b23c;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transform: translate(-50%, -50%);
}

.tl-labels { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: #5b6370; }
.tl-note { margin-top: 6px; font-size: 12px; color: #5b6370; }

button.archive-item[data-journey] .badge { pointer-events: none; }

/* ---------- 병 띄우기 1인당 10개 ---------- */
.quota {
  text-align: center;
  font-size: 12px;
  color: var(--ink-sub);
  font-variant-numeric: tabular-nums;
}

.quota[hidden] { display: none; }
.bottom-idle .quota { margin-top: -4px; }

.quota-top {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-ink);
}

.quota-archive {
  font-size: 13px;
  color: #5b6370;
  font-variant-numeric: tabular-nums;
}

.last-one {
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff6e0;
  color: #6b4e12;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.last-one[hidden] { display: none; }

.full-body { justify-content: center; }

.full-shelf {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 6px;
  padding: 18px 12px 12px;
  border-radius: 20px;
  background: linear-gradient(#e3edf5, #d3dde6);
}

.full-shelf svg { width: 30px; height: 60px; }

.full-copy { text-align: center; line-height: 1.7; color: #5b6370; }
.full-title { font-size: 19px; font-weight: 700; color: #1f2328; }

/* ---------- 꿈꾸기 버튼 (상단 바) ---------- */
.dream-btn[hidden] { display: none; }
.dream-btn .icon-btn { color: #c9973a; }
[data-time="night"] .dream-btn .icon-btn { color: #f1cf86; }

/* 해금 후 아직 안 눌렀으면 아주 천천히 커졌다 작아지며 은은하게 빛난다 */
.dream-btn.fresh .icon-btn { animation: dream-pulse 2.4s ease-in-out infinite; }

@keyframes dream-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 210, 130, 0); }
  50% { transform: scale(1.06); box-shadow: 0 0 14px 3px rgba(255, 210, 130, .55); }
}

@keyframes dream-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 130, 0); }
  50% { box-shadow: 0 0 14px 3px rgba(255, 210, 130, .55); }
}

/* 버튼이 하나 늘어서 좁은 화면에선 제목 줄이 넘치지 않게 */
.topbar-sub, .topbar h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 꿈 장면 ---------- */
.dream {
  position: absolute;
  inset: 0;
  z-index: 72;
  overflow: hidden;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}

.dream[hidden] { display: none; }
.dream.after { pointer-events: none; cursor: auto; }

.dream-stage, .dream-shade, .dream-world, .dream-flash, .dream-tint { position: absolute; inset: 0; }
.dream-shade { background: #0b0f18; }
.dream-world { overflow: hidden; }

.dream-sky-night {
  position: absolute;
  inset: 0 0 50% 0;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 28% 8%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 44% 24%, #fff, transparent),
    radial-gradient(1px 1px at 61% 12%, #fff, transparent),
    radial-gradient(1px 1px at 83% 28%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 92% 9%, #fff, transparent),
    radial-gradient(1px 1px at 6% 34%, #fff, transparent),
    linear-gradient(#141a2a, #27304a 70%, #39425c);
}

.dream-moon {
  position: absolute;
  right: 20%;
  top: 14%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f3ecd2;
  box-shadow: 0 0 30px 8px rgba(243, 236, 210, .35);
}

.dream-sky-day {
  position: absolute;
  inset: 0 0 40% 0;
  opacity: 0;
  background:
    radial-gradient(circle at 76% 30%, rgba(255, 246, 214, .95) 0 26px, rgba(255, 220, 150, .5) 40px, rgba(255, 220, 150, 0) 130px),
    linear-gradient(#f2bf8c 0%, #f8d8ac 55%, #fce8c6 100%);
  transition-property: opacity;
  transition-timing-function: ease-in-out;
}

.dream-town {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dream-water {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateY(42%);
  background: linear-gradient(#61788f 0%, #46586d 30%, #313f51 100%);
  transition-property: transform;
  transition-timing-function: cubic-bezier(.45, 0, .4, 1);
}

/* 수면의 반짝이는 선 */
.dream-water::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26px;
  background: repeating-linear-gradient(rgba(255, 255, 255, .28) 0 2px, transparent 2px 8px);
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask-image: linear-gradient(#000, transparent);
}

.dream-boat { transition-property: opacity; }
.dream-boat svg g { transition: opacity .8s ease-in-out; }
.dream-boat .pose-lie { opacity: 0; }
.dream-boat.lying .pose-lie { opacity: 1; }
.dream-boat.lying .pose-sit { opacity: 0; }

.dream-tint {
  pointer-events: none;
  background-color: rgba(14, 20, 38, .5);
  transition-property: background-color;
  transition-timing-function: ease-in-out;
}

.dream-flash {
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 55%, #f6fbff 0%, #d6eaf6 55%, #a9cde6 100%);
}

/* 거리의 움직임: 버스·걷는 사람·새 */
.dream-bus { animation: dream-bus 17s linear -6s infinite; }
@keyframes dream-bus { from { transform: translateX(-130px); } to { transform: translateX(430px); } }

.dream-walker.w1 { animation: dream-walk-r 34s linear -10s infinite; }
.dream-walker.w2 { animation: dream-walk-l 40s linear -22s infinite; }
.dream-walker.w3 { animation: dream-walk-r 46s linear -32s infinite; }
@keyframes dream-walk-r { from { transform: translate(-20px, 696px); } to { transform: translate(420px, 696px); } }
@keyframes dream-walk-l { from { transform: translate(420px, 692px); } to { transform: translate(-20px, 692px); } }
.dream-step { animation: dream-step .55s ease-in-out infinite alternate; }
@keyframes dream-step { from { transform: translateY(0); } to { transform: translateY(-1.2px); } }

.dream-bird.b1 { animation: dream-fly 26s linear -4s infinite; }
.dream-bird.b2 { animation: dream-fly2 32s linear -14s infinite; }
.dream-bird.b3 { animation: dream-fly 29s linear -20s infinite; }
@keyframes dream-fly { from { transform: translate(-20px, 150px); } 50% { transform: translate(200px, 120px); } to { transform: translate(420px, 140px); } }
@keyframes dream-fly2 { from { transform: translate(-20px, 196px); } 50% { transform: translate(200px, 214px); } to { transform: translate(420px, 180px); } }
.dream-wing { transform-box: fill-box; transform-origin: center; animation: dream-flap .5s ease-in-out infinite alternate; }
@keyframes dream-flap { from { transform: scaleY(1); } to { transform: scaleY(-.4); } }

/* 문장 (손글씨, 흰 글씨 + 은은한 그림자) */
.dream-text {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 14%;
  text-align: center;
  pointer-events: none;
}

.dream.centered .dream-text { top: 50%; transform: translateY(-50%); }

.dream-line {
  min-height: 2.8em;
  font-family: 'Nanum Pen Script', cursive;
  font-size: 31px;
  line-height: 1.35;
  color: #fff;
  word-break: keep-all;
  text-shadow: 0 1px 2px rgba(24, 28, 44, .6), 0 0 18px rgba(24, 28, 44, .45);
}

.dream.centered .dream-line { min-height: 0; }
/* 바다로 돌아온 뒤 마지막 한 줄은 수평선 바로 아래 (빈 바다 문구와 겹치지 않게) */
.dream.after .dream-text { top: 36%; }
.dream-skip { z-index: 2; }

/* 꿈을 꾸는 동안 1인칭 바다의 상단 바·낚싯대는 숨겨 둔다 (깨어날 때 나타남) */
#app.dream-on .topbar, #app.dream-on .rod { opacity: 0; transition: opacity .6s; }
#app.dream-on .rod { transform: translate(140px, 200px); transition: opacity .6s, transform .8s ease-in; }

@media (prefers-reduced-motion: reduce) {
  .dream-btn.fresh .icon-btn { animation-name: dream-glow; }
  .dream-bus, .dream-walker, .dream-bird { animation-duration: 90s; }
  .dream-step, .dream-wing { animation: none; }
}

/* 좁은 폰(360px 안팎)에서 꿈꾸기 버튼이 생겨도 해수면 표기가 잘리지 않게 */
@media (max-width: 374px) {
  .topbar { gap: 4px; padding-left: 12px; padding-right: 12px; }
  .topbar-sub { letter-spacing: 0; }
}