/* 윤슬 — 노을이 내려앉은 밤 물가. 외부 CDN 없음(폰트 자가호스팅 = 외부 호출 0).
 * 차가운 다크가 아니라 포근한 밤: 잔광이 남은 하늘, 고요한 물, 달빛 한 줄(윤슬).
 * 글과 편지는 따뜻한 종이 위에 — 어두운 세상 속, 손에 쥔 것만 환하다. */

/* 한글 세리프(고운바탕, OFL) — 자가호스팅, 라틴/한글 분리 로드 */
@font-face {
  font-family: "Gowun Batang"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/gowun-batang-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Gowun Batang"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/gowun-batang-korean-400.woff2") format("woff2");
  unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+FF00-FFEF;
}

:root {
  color-scheme: dark;

  /* ── 색: 잔광의 하늘 · 고요한 물 · 달빛 · 종이 ── */
  --sky-1: #252038;          /* 밤하늘 윗단 */
  --sky-2: #3b2f4e;          /* 보랏빛 저녁 */
  --ember-1: #54394c;        /* 노을 잔광 */
  --ember-2: #5f4340;        /* 지평선의 온기 */
  --water-1: #1e2638;        /* 물 윗단 */
  --water-2: #131927;        /* 깊은 물(페이지 바닥) */

  --moon:   #efd7a4;         /* 달빛 — 강조·포커스 */
  --moon-2: #f6e7c4;         /* 밝은 달빛 */
  --ink:      #f1ead9;       /* 본문 (물 위 ≈13:1) */
  --ink-soft: #cdc4b1;       /* 보조 ≈8.5:1 */
  --ink-mute: #c2b9a6;       /* 약한 텍스트 — 노을 잔광 띠 위에서도 AA(≥4.5:1) 유지 */

  --card: rgba(16, 21, 35, 0.55);
  --card-line: rgba(239, 215, 164, 0.16);
  --card-line-2: rgba(239, 215, 164, 0.34);

  --paper: #f6efdf;          /* 손에 쥔 편지지 */
  --paper-ink: #41372a;      /* 종이 위 본문 ≈9:1 */
  --paper-ink-soft: #6c5f49; /* 종이 위 보조 ≈4.9:1 (AA) */
  --paper-line: #e3d7bf;

  --danger: #9d5240;         /* 지우는 행동 — 차분한 흙빛 (흰 글자 ≈5:1) */

  /* ── 형태 ── */
  --r-s: 10px; --r-m: 16px; --r-l: 22px;
  --serif: "Gowun Batang", "Noto Serif KR", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  --shadow: 0 10px 36px rgba(5, 7, 14, 0.45);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }  /* 모바일 탭 회색 플래시 제거(포커스는 :focus-visible로) */
html { height: 100%; overscroll-behavior-y: none; }  /* 당겨서 새로고침 전역 차단 — 모달이 열려 스크롤러가 바뀌어도(윤슬엔 새로고침할 게 없다) */
body {
  margin: 0; min-height: 100%;
  background: var(--water-2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* 한글은 어절(공백) 단위로만 줄바꿈 — 좁은 폰에서 '물가'가 '물/가'로 쪼개지지 않게.
   * 긴 토큰(URL 등)은 그래도 넘치지 않게 쪼갠다. */
  word-break: keep-all; overflow-wrap: anywhere;
  /* 당겨서 새로고침으로 쓰던 글이 날아가지 않게 — 윤슬엔 새로고침할 것이 없다(폴링·휘발) */
  overscroll-behavior-y: none;
}
::selection { background: rgba(239, 215, 164, 0.35); }

/* ───────── 장면: 밤 물가 ───────── */
.scene {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: linear-gradient(180deg,
    var(--sky-1) 0%, var(--sky-2) 30%, var(--ember-1) 42%, var(--ember-2) 49%,
    var(--water-1) 53%, var(--water-2) 100%);
}
.scene-moon {
  position: absolute; top: 9vh; right: 11vw;
  width: clamp(46px, 7vw, 80px); height: auto;
  color: #f4e3b8; opacity: 0.95;
  filter: drop-shadow(0 0 26px rgba(244, 227, 184, 0.4));
}
/* 윤슬 — 달빛이 물결에 부서진 한 줄 */
.moonglade {
  position: absolute; top: 53vh; bottom: 0;
  right: calc(11vw + clamp(46px, 7vw, 80px) * 0.18);
  width: clamp(34px, 5vw, 54px);
  /* 잔물결에 부서진 달빛 — 또렷한 막대(스크롤바 오독)가 아니라 흩어진 윤슬.
   * 대비를 낮추고 더 흐리게, 좌우 가장자리도 부드럽게 풀어 '반사'로 읽히게. */
  background: repeating-linear-gradient(180deg,
    rgba(244, 227, 184, 0.20) 0 4px, transparent 4px 16px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 92%), linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 92%), linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  filter: blur(1.6px);
  animation: glade 8s ease-in-out infinite alternate;
  opacity: 0.4;
}
@keyframes glade {
  from { transform: translateY(0) scaleX(1); }
  to   { transform: translateY(12px) scaleX(0.92); }
}

/* ───────── 공통 유틸 ───────── */
.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;
}
.skip {
  position: absolute; left: 12px; top: -48px; z-index: 30;
  background: var(--moon); color: var(--paper-ink);
  padding: 10px 16px; border-radius: var(--r-s); transition: top 0.15s;
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 10px); }
:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; border-radius: 4px; }
.quiet { color: var(--ink-mute); font-size: 0.92rem; }
.center { text-align: center; }
code {
  font-size: 0.88em; background: rgba(239, 215, 164, 0.1);
  padding: 2px 7px; border-radius: 6px; color: var(--moon-2);
}

/* ───────── 머리 ───────── */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) clamp(16px, 4vw, 28px) 12px;
  /* 스크롤 시 본문(제목·리드 등)이 헤더 아래로 또렷이 비쳐 겹쳐 보이지 않게 —
   * 프로스트 글래스(블러)+불투명 그라데이션으로 부드럽게 가린다. */
  background: linear-gradient(180deg, rgba(23, 20, 38, 0.94), rgba(23, 20, 38, 0.72));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.wordmark {
  font-family: var(--serif); font-size: 1.4rem; letter-spacing: 0.14em;
  color: var(--moon-2); text-decoration: none;
}
.bar-nav { display: flex; gap: 8px; }

/* ───────── 본문 틀 ───────── */
main {
  max-width: 680px; margin: 0 auto;
  padding: 12px clamp(16px, 5vw, 28px) calc(env(safe-area-inset-bottom, 0px) + 88px);
  outline: none;
}
.view-head { margin: 4px 0 18px; }
.back { color: var(--ink-soft); text-decoration: none; padding: 8px 0; display: inline-block; }
.back:hover { color: var(--moon-2); }
.view-title {
  font-family: var(--serif); font-weight: 400; font-size: 1.7rem;
  margin: 0 0 6px; color: var(--moon-2); letter-spacing: 0.06em; outline: none;
}
.sub-title {
  font-family: var(--serif); font-weight: 400; font-size: 1.12rem;
  color: var(--ink); margin: 28px 0 12px;
}
.lead { color: var(--ink-soft); margin: 0 0 20px; }

/* 화면 전환 — 물결처럼 잔잔히 떠오른다(움직임 줄이기 설정이면 자동 생략) */
.view:not([hidden]) { animation: view-in 0.45s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ───────── 물가(홈) ───────── */
.shore-title {
  font-family: var(--serif); font-size: clamp(1.9rem, 6vw, 2.7rem); line-height: 1.45;
  text-align: center; color: #f5edda; margin: 9vh 0 10px; letter-spacing: 0.04em;
  text-shadow: 0 2px 30px rgba(20, 16, 34, 0.6);
}
.shore-sub { text-align: center; color: var(--ink-soft); margin: 0 0 7vh; }

.onboard {
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--r-l); padding: 20px 22px; margin: 0 auto 26px;
  max-width: 32rem; text-align: center; backdrop-filter: blur(6px);
}
.onboard p { margin: 0 0 14px; color: var(--ink); }

/* 첫 도착 — 맞이·첫 띄우기 체험. 고요하게, 가운데로, 하나의 손짓만. */
.arrival { max-width: 32rem; margin: 0 auto 30px; }
.arrival[hidden] { display: none; }
.arrive-step { display: grid; gap: 18px; justify-items: center; text-align: center; }
.arrive-step[hidden] { display: none; }
.arrive-step:not([hidden]) { animation: arrive-in 0.6s ease both; }   /* 한 박씩, 물결처럼 잔잔히 떠오른다 */
@keyframes arrive-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.arrive-lead { color: var(--ink-soft); margin: 0; line-height: 1.85; font-size: 1.02rem; }
.arrive-after {
  font-family: var(--serif); color: var(--moon-2);
  font-size: 1.18rem; line-height: 1.95; margin: 0;
  text-shadow: 0 0 22px rgba(244, 227, 184, 0.28);
}
.arrive-promise {   /* '작아지지 않음'의 약속 — 종이가 아니라 밤하늘에 뜬 한 마디 */
  font-family: var(--serif); color: var(--ink-soft);
  font-size: 1.08rem; line-height: 1.95; margin: 0;
}
.arrive-promise b { font-weight: 400; color: var(--moon-2); text-shadow: 0 0 22px rgba(244, 227, 184, 0.3); }
.arrive-paper { width: 100%; text-align: left; }
.arrive-paper textarea { min-height: 5rem; }
#arriveHint { min-height: 1.2em; margin: 0; }

.doors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 30px; }  /* 네 문은 2×2 한 세트 — 어떤 폭에서도 외톨이(3+1) 없이 균형 */
.doors[hidden] { display: none; }   /* hidden 존중 — display:grid가 [hidden]을 덮어쓰지 않게(첫 도착 때 잠시 접음) */
.door {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--r-l); padding: 26px 22px;
  color: inherit; text-decoration: none; backdrop-filter: blur(6px);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.door:hover { transform: translateY(-3px); border-color: var(--card-line-2); }
.door-icon { width: 30px; height: 30px; color: var(--moon); }
.door strong {
  font-family: var(--serif); font-weight: 400; font-size: 1.3rem;
  color: var(--moon-2); letter-spacing: 0.05em;
}
.door span { color: var(--ink-soft); font-size: 0.95rem; }

.shore-links { display: flex; gap: 16px; flex-wrap: wrap; }
.shore-links[hidden] { display: none; }   /* hidden 존중 — 첫 도착 때 잠시 접음 */

/* 폰에 두기(PWA 설치) 권유 — 물가 한켠에 은은히, 강요 없이 */
.install-hint {
  margin: 18px 0 8px; padding: 14px 18px;
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--r-l); backdrop-filter: blur(6px);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.install-hint[hidden] { display: none; }   /* hidden 존중 — display:flex가 [hidden]을 덮어쓰지 않게 */
.install-hint p { margin: 0; flex: 1; min-width: 11rem; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; }
.install-actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* 다른 앱 안의 브라우저 안내 띠 — 화면을 적게 가리도록 한 줄로 컴팩트하게 */
.banner[hidden] { display: none; }   /* hidden 존중 — display:flex가 [hidden]의 display:none을 덮어쓰지 않게 */
.banner {
  position: relative; z-index: 19;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 auto; max-width: 680px;
  padding: 8px clamp(14px, 4vw, 28px);
  background: rgba(239, 215, 164, 0.1); border-bottom: 1px solid var(--card-line);
}
.banner p { margin: 0; flex: 1; min-width: 9rem; color: var(--ink-soft); font-size: 0.85rem; line-height: 1.5; word-break: keep-all; }
.banner b { color: var(--moon-2); font-weight: 600; }
.banner-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.banner .primary { min-height: 38px; padding: 6px 15px; font-size: 0.9rem; }
.banner-x { min-height: 38px; min-width: 38px; padding: 0; font-size: 1rem; line-height: 1; color: var(--ink-mute); border-color: var(--card-line); }

/* ───────── 버튼 ───────── */
button { font: inherit; cursor: pointer; touch-action: manipulation; }  /* 더블탭 줌 지연 제거 */
.btn-link { display: inline-flex; align-items: center; text-decoration: none; } /* a를 버튼처럼 */
.primary {
  background: #e9d2a0; color: #3a3122; border: none;
  border-radius: 999px; min-height: 44px; padding: 9px 24px; font-weight: 600;
  transition: background 0.15s ease, transform 0.15s ease;
}
.primary:hover { background: var(--moon-2); transform: translateY(-1px); }
.ghost {
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--card-line-2); border-radius: 999px;
  min-height: 44px; padding: 9px 18px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ghost:hover { color: var(--moon-2); border-color: var(--moon); }
.danger { background: var(--danger); color: #fff; border: none; border-radius: 999px; min-height: 44px; padding: 9px 22px; }
.danger:hover { background: #aa5d49; }
.linkish {
  background: none; border: none; color: var(--ink-mute);
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px;
  min-height: 44px; padding: 6px 8px;
}
.linkish:hover { color: var(--ink-soft); }

/* ───────── 종이(글·편지) ───────── */
.paper {
  background: var(--paper); color: var(--paper-ink);
  border-radius: var(--r-m); padding: 20px 20px 16px;
  box-shadow: var(--shadow);
}
.paper-title {
  font-family: var(--serif); font-weight: 400; font-size: 1.1rem;
  margin: 0 0 10px; color: var(--paper-ink);
}
.paper textarea {
  width: 100%; border: none; background: transparent; resize: vertical;
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.9;
  color: var(--paper-ink); min-height: 8rem; outline: none; padding: 0;
}
.paper textarea::placeholder { color: var(--paper-ink-soft); }
/* 모바일 키보드가 올라와도 입력칸·보내기 버튼이 가려지지 않게 — 스크롤 시 여유를 둔다 */
.paper textarea { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 108px); scroll-margin-bottom: 120px; }  /* 위: 스티키 헤더(≈98px+노치) 비움 — 겹침 방지 · 아래: 보내기 여백 */
.compose-row { scroll-margin-bottom: 120px; }  /* 키보드+툴바 위로 충분히 — 보내기 줄을 끌어올릴 때 여백 */
.compose-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 10px;
  border-top: 1px solid var(--paper-line); padding-top: 12px;
}
.keep { display: flex; align-items: center; gap: 8px; color: var(--paper-ink-soft); font-size: 0.93rem; min-height: 44px; }
/* 종이 위 체크박스 — 무거운 네이티브 사각형 대신 종이 톤의 가벼운 상자(체크는 클레이빛) */
.keep input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 18px; height: 18px; margin: 0; cursor: pointer; position: relative;
  border: 1.5px solid var(--paper-ink-soft); border-radius: 5px; background: transparent;
}
.keep input:checked { background: #8a6a3c; border-color: #8a6a3c; }
.keep input:checked::after {
  content: ""; position: absolute; left: 5px; top: 2px;
  width: 4px; height: 8px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.paper :focus-visible { outline-color: #8a6a3c; }
.paper .ghost { color: var(--paper-ink-soft); border-color: var(--paper-line); }
.paper .ghost:hover { color: var(--paper-ink); border-color: var(--paper-ink-soft); }
#sendStatus { color: var(--paper-ink-soft); margin: 10px 0 0; min-height: 1.2em; }
#floatDone { margin: 16px 0 0; min-height: 1.4em; }

/* 띄운 마음이 흘러가는 잔상 */
.float-ghost {
  position: fixed; z-index: 15; pointer-events: none;
  font-family: var(--serif); color: #f4e3b8; font-size: 1.05rem; line-height: 1.8;
  max-width: min(60vw, 30rem); white-space: pre-wrap; word-break: keep-all;
  text-shadow: 0 0 18px rgba(244, 227, 184, 0.5);
  animation: drift 3s ease-in forwards;
}
@keyframes drift {
  0%   { opacity: 0.95; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(7vw, 36vh) scale(0.9); filter: blur(3px); }
}

/* ───────── 접기(서랍·편지함·우체국) ───────── */
.fold { margin-top: 26px; border-top: 1px solid var(--card-line); }
.fold summary {
  cursor: pointer; color: var(--ink-soft); padding: 14px 4px;
  list-style-position: inside;
}
.fold summary:hover { color: var(--moon-2); }
.fold-body { padding: 2px 4px 14px; color: var(--ink-soft); font-size: 0.95rem; }
.fold-body strong { color: var(--moon); font-weight: 600; }
.fold-body p { margin: 0 0 10px; }

.plain-list { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 10px; }
.kept {
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--r-m); padding: 14px 16px;
}
.kept-text {
  font-family: var(--serif); color: var(--ink); white-space: pre-wrap;
  word-break: keep-all; margin: 0 0 8px; line-height: 1.85;
}
.kept-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kept-meta time { color: var(--ink-mute); font-size: 0.88rem; }

/* ───────── 물길 ───────── */
/* 항상 접근성 트리에 남는 live region — 비었을 땐 보이지 않지만 display:none은 쓰지 않는다
 * (낭독 누락 방지). 내용이 있을 때만 박스 스타일을 입힌다. */
.notice { color: var(--ink); margin: 0; }
.notice:not(:empty) {
  background: rgba(239, 215, 164, 0.08); border-left: 3px solid var(--moon);
  border-radius: var(--r-s); padding: 12px 16px; margin: 0 0 20px;
}
.invite-row { display: flex; gap: 10px; margin: 14px 0 8px; }
.invite-row input {
  flex: 1; min-width: 0; min-height: 44px;
  background: rgba(10, 14, 24, 0.6); color: var(--ink-soft);
  border: 1px solid var(--card-line); border-radius: var(--r-s);
  padding: 8px 12px; font-size: 1rem;   /* iOS 입력 자동 줌 방지(≥16px) */
}
#copyDone { min-height: 1.2em; margin: 0 0 6px; }

/* 초대장 그림 — 밤 물가 한 장에 QR로 초대를 담는다(딱딱한 링크 대신, 주 경로) */
.invite-make { display: grid; gap: 8px; justify-items: start; margin: 16px 0 18px; }
.invite-make .quiet { margin: 0; }
.invite-card { margin: 4px 0 22px; padding: 0; display: grid; gap: 14px; justify-items: center; }
.invite-card[hidden] { display: none; }
.invite-card canvas {
  width: 100%; max-width: 300px; height: auto; display: block;
  border-radius: var(--r-m); box-shadow: var(--shadow);
}
.card-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.invite-card figcaption { text-align: center; margin: 0; max-width: 22rem; }
.invite-or { margin: 18px 0 6px; }   /* 링크는 조용한 대안으로 */

.sky-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(59, 47, 78, 0.5), rgba(30, 38, 56, 0.5));
  border: 1px solid var(--card-line); border-radius: var(--r-l);
  padding: 16px 20px; margin-bottom: 20px;
}
.sky-label { color: var(--ink-mute); font-size: 0.9rem; }
.sky-now { color: var(--moon-2); display: inline-flex; align-items: center; gap: 8px; }
.sky-now svg { width: 21px; height: 21px; }

.weather-pick { border: none; margin: 0 0 24px; padding: 0; }
.weather-pick legend { color: var(--ink-soft); padding: 0; margin-bottom: 10px; }
.weather-row { display: flex; gap: 8px; flex-wrap: wrap; }
.weather-chip {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 62px; min-height: 64px; padding: 10px 8px;
  border: 1px solid var(--card-line); border-radius: 14px;
  color: var(--ink-soft); cursor: pointer; font-size: 0.88rem;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.weather-chip svg { width: 24px; height: 24px; }
.weather-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.weather-chip:hover { border-color: var(--card-line-2); color: var(--ink); }
.weather-chip:has(input:checked) {
  border-color: var(--moon); color: var(--moon-2); background: rgba(239, 215, 164, 0.08);
}
.weather-chip:has(input:focus-visible) { outline: 2px solid var(--moon); outline-offset: 2px; }

.boat {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--r-m); padding: 14px 16px; color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.boat:hover { border-color: var(--card-line-2); transform: translateY(-1px); }
.boat svg { width: 22px; height: 22px; color: var(--moon); flex: none; }

/* ───────── 우물가(여럿이) ───────── */
.name-row { display: flex; flex-direction: column; gap: 6px; margin: 18px 0 24px; }
.name-row label { color: var(--ink-soft); font-size: 0.95rem; }
.name-row input {
  min-height: 44px; background: rgba(10, 14, 24, 0.6); color: var(--ink);
  border: 1px solid var(--card-line); border-radius: var(--r-s); padding: 8px 14px;
  font-family: var(--serif); font-size: 1rem;
}
.name-row input::placeholder { color: var(--ink-mute); }

.feed { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 12px; }
.note {
  background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--r-m); padding: 14px 17px; max-width: 86%;
}
.note.mine {
  margin-left: auto; border-color: var(--card-line-2);
  background: rgba(239, 215, 164, 0.07);
}
.note-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.note-who { color: var(--moon-2); font-size: 0.92rem; }
.note.mine .note-who { color: var(--moon); }
.note-when { color: var(--ink-mute); font-size: 0.82rem; flex: none; }
.note-text {
  font-family: var(--serif); color: var(--ink); white-space: pre-wrap;
  word-break: keep-all; margin: 0; line-height: 1.8;
}

/* ───────── 먼바다(광장) ───────── */
/* 먼바다 — 한 병씩 소중히 꺼내 읽기(주르륵 리스트가 아니라, 떠밀려 온 병 하나) */
.sea-reader { margin: 10px 0 18px; min-height: 4rem; }
.sea-sealed { display: grid; gap: 13px; justify-items: center; text-align: center; padding: 18px 16px 6px; }
.sea-sealed-cap { margin: 0; }
.sea-bottle-icon {   /* #i-bottle 심볼 — stroke=currentColor */
  width: 46px; height: 46px; color: var(--moon-2); opacity: 0.92;
  filter: drop-shadow(0 0 18px rgba(244, 227, 184, 0.22));
}
.sea-note {   /* 펼친 쪽지 — 따뜻한 종이 위 한 사람의 말 */
  background: var(--paper); color: var(--paper-ink);
  border-radius: var(--r-l); padding: 22px 22px 14px; box-shadow: var(--shadow);
  animation: note-open 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sea-note-text {
  font-family: var(--serif); font-size: 1.06rem; line-height: 1.95;
  white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; margin: 0 0 14px;
}
.sea-note-actions { display: flex; gap: 18px; justify-content: flex-end; }
.sea-note-actions .linkish { color: var(--paper-ink-soft); min-height: 44px; }
.sea-note-actions .linkish:hover { color: var(--paper-ink); }
.sea-next { margin-top: 14px; }
@keyframes note-open { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }

.lock-note {
  color: var(--ink-mute); font-size: 0.88rem; margin: 26px 0 4px;
  display: flex; gap: 8px; align-items: baseline;
}
.inline-icon { width: 15px; height: 15px; flex: none; transform: translateY(2px); }

/* ───────── 다이얼로그 ───────── */
.dlg {
  border: 1px solid var(--card-line); border-radius: var(--r-l);
  background: #1f2638; color: var(--ink);
  padding: 26px 26px 22px; max-width: 27rem; width: calc(100vw - 44px);
  box-shadow: var(--shadow);
  overscroll-behavior: contain;   /* 다이얼로그 내부 스크롤이 페이지로 새지 않게(당겨서 새로고침 방지) */
}
.dlg::backdrop { background: rgba(7, 9, 16, 0.66); }
.dlg h2 {
  font-family: var(--serif); font-weight: 400; font-size: 1.3rem;
  margin: 0 0 12px; color: var(--moon-2);
}
.dlg p { margin: 0 0 14px; }
.dlg-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.dlg-paper { background: var(--paper); color: var(--paper-ink); max-width: 31rem; }
.dlg-paper h2 { color: var(--paper-ink); }
.dlg-paper .quiet { color: var(--paper-ink-soft); }
.dlg-paper .ghost { color: var(--paper-ink-soft); border-color: var(--paper-line); }
.dlg-paper .ghost:hover { color: var(--paper-ink); border-color: var(--paper-ink-soft); }
.letter-date { color: var(--paper-ink-soft); font-size: 0.9rem; margin: 0 0 12px; }
.letter-body {
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.95;
  white-space: pre-wrap; word-break: keep-all;
  max-height: 52vh; max-height: 52dvh; overflow-y: auto; margin: 0 0 14px;  /* dvh: 키보드 떠도 화면 안 */
}

.care-list, .absent-list { margin: 0 0 14px; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.care-list a { color: var(--moon-2); text-underline-offset: 4px; display: flex; align-items: center; min-height: 44px; }  /* 위기 상담 — 떨리는 손에도 닿게 44px */
.absent-list li { color: var(--ink-soft); }

.noscript {
  max-width: 32rem; margin: 20vh auto; padding: 0 24px;
  text-align: center; color: var(--ink);
}

@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ───────── 반응형·모션 ───────── */
@media (max-width: 580px) {
  .doors { grid-template-columns: 1fr 1fr; gap: 12px; }  /* 폰: 네 문을 2×2로 — 한눈에, 덜 스크롤 */
  .door { padding: 18px 15px; }
  /* 히어로 세로 공간을 줄여 네 문이 한 화면에 더 들어오게(우물가·먼바다까지) */
  .shore-title { margin-top: 3.5vh; line-height: 1.32; }
  .shore-sub { margin-bottom: 3vh; }
  /* 입력창을 모바일에선 짧게 — rows 속성보다 height가 우선이라 실제로 낮아진다.
   * 입력칸+보내기가 키보드 위에 함께 보이고, 길어지면 안에서 스크롤(필요하면 드래그로 확장). */
  .paper textarea { min-height: 0; height: 6rem; }
  .compose-row { justify-content: flex-end; }
  .scene-moon { top: 13vh; }   /* 좁은 화면 — 머리(힘들 땐·떠나기)와 겹치지 않게 */
  /* 다이얼로그 = 바텀시트: 화면 아래에서 올라오고, 윗모서리만 둥글게, 홈바 피해 */
  .dlg { width: 100%; max-width: none; inset: auto 0 0 0; margin: 0;
         border-radius: var(--r-l) var(--r-l) 0 0; border-bottom: 0;
         padding: 22px 20px; max-height: 88vh; max-height: 88dvh; overflow-y: auto;
         padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
         animation: sheet-up 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .dlg::before { content: ""; display: block; width: 36px; height: 4px;   /* 시트 그래버 — 어두운/종이 양쪽에서 은은히 */
         margin: 0 auto 14px; border-radius: 999px; background: currentColor; opacity: 0.25; }
  .dlg-paper::before { display: none; }   /* 편지는 제스처 닫기가 없어(간직/흘려보내기) 그래버도 두지 않는다 */
}
@media (max-width: 360px) {
  .doors { grid-template-columns: 1fr; } /* 아주 좁은 폰 — 한 줄씩 */
}
@media (prefers-reduced-motion: reduce) {
  .moonglade { animation: none; }
  .float-ghost { animation: drift-still 1.4s ease-out forwards; }
  .door, .boat, .primary { transition: none; }
  .view:not([hidden]) { animation: none; }   /* 화면 전환도 정지 */
  .arrive-step:not([hidden]) { animation: none; }   /* 맞이 박 전환도 정지 */
  .sea-note { animation: none; }                     /* 병 펼침도 정지 */
  .dlg { animation: none; }                   /* 바텀시트 슬라이드업도 정지 */
  @keyframes drift-still { to { opacity: 0; } }
}