/* 몽돌 데스크(건의하기 · 관리) — 앱(iOS 몽돌) 설정에서 여는 페이지라 ENFP 웹판의 크림빛이 아니라 앱의 어둠 톤을 쓴다.
   토큰은 Color-Moments/DESIGN.md §2 그대로: 배경 #06070A, 흰색 네 단계(92/64/48/24 — 24 는 글자에 쓰지 말 것),
   글꼴은 ENFP 웹판과 같은 Google Fonts 세 벌(명조는 「몽돌」에만, 버튼만 IBM Plex Sans KR). */
:root {
  --base: #06070A;
  --primary: rgba(255, 255, 255, 0.92);
  --secondary: rgba(255, 255, 255, 0.64);
  --tertiary: rgba(255, 255, 255, 0.48);
  --hairline: rgba(255, 255, 255, 0.24);
  --fill: rgba(255, 255, 255, 0.06);
  --fill-2: rgba(255, 255, 255, 0.1);
  --warn: #FFB4A2;
  --serif: 'Nanum Myeongjo', 'AppleMyungjo', 'Batang', serif;
  --sans: 'Gowun Dodum', -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --btn: 'IBM Plex Sans KR', 'Gowun Dodum', -apple-system, 'Apple SD Gothic Neo', sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--base); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--base);
  color: var(--primary);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 첫날 화면처럼 아직 색이 없는 중성 번짐 하나 — 글 읽는 데 방해되지 않게 위쪽만. */
body::before {
  content: ""; position: fixed; inset: -20% -30% auto; height: 60vh; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 40%, rgba(214, 196, 186, 0.3), transparent 70%);
  filter: blur(90px); opacity: 0.5;
}
p, h1, h2 { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--secondary); outline-offset: 3px; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

.page {
  position: relative; z-index: 1;
  width: min(100%, 430px);
  margin: 0 auto;
  padding: max(28px, calc(var(--safe-t) + 20px)) 24px max(32px, calc(var(--safe-b) + 24px));
}
.wordmark { font-family: var(--serif); font-weight: 800; font-size: 30px; letter-spacing: -0.5px; line-height: 1.2; }
.lede { margin-top: 10px; font-size: 17.5px; line-height: 1.55; color: var(--secondary); }

.field { margin-top: 30px; border: 0; padding: 0; min-width: 0; }
.field + .field { margin-top: 26px; }
.label { display: block; padding: 0; margin-bottom: 10px; font-size: 14px; color: var(--tertiary); }
.optional { color: var(--tertiary); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 100px; border: 1px solid var(--hairline); background: var(--fill);
  font-size: 15px; color: var(--secondary);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  user-select: none; -webkit-user-select: none; cursor: pointer;
}
.chip input:checked + span { background: var(--primary); border-color: transparent; color: var(--base); }
.chip input:focus-visible + span { outline: 2px solid var(--secondary); outline-offset: 3px; }

.box {
  display: block; width: 100%;
  border: 1px solid var(--hairline); border-radius: 18px;
  background: var(--fill);
  padding: 14px 16px;
  font-size: 16px; /* 16 아래면 iOS 가 입력할 때 화면을 확대한다 */
  line-height: 1.6;
  color: var(--primary);
  transition: border-color 0.18s ease, background 0.18s ease;
  -webkit-appearance: none; appearance: none;
}
.box::placeholder { color: var(--tertiary); }
.box:focus { border-color: var(--tertiary); background: var(--fill-2); outline: none; }
textarea.box { min-height: 188px; resize: vertical; }
input.box { min-height: 50px; padding-top: 12px; padding-bottom: 12px; }
.under { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--tertiary); }
.count { margin-left: auto; flex: none; }
.count.near { color: var(--secondary); }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meta { margin-top: 26px; font-size: 13px; line-height: 1.5; color: var(--tertiary); }
.primary-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 54px; margin-top: 14px;
  border: 0; border-radius: 100px;
  background: var(--primary); color: var(--base);
  font-family: var(--btn); font-weight: 600; font-size: 17px;
  transition: opacity 0.2s ease, transform 0.12s ease;
}
.primary-btn:active:not(:disabled) { transform: scale(0.98); }
.primary-btn:disabled { opacity: 0.35; cursor: default; }
.primary-btn[aria-busy="true"] { opacity: 0.6; }
.error { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--warn); text-align: center; }
.privacy { margin-top: 18px; font-size: 13px; line-height: 1.6; color: var(--tertiary); text-align: center; }

/* 보낸 뒤 — 돌은 앱 아이콘 그림(img/pebble.jpg, 360px). 정사각 그림이라 둥근 마스크로 배경 모서리를 지우고(앱스토어 미리보기 .hero-pebble 과 같은 값),
   1:1 을 강제한다 — 눌리면 「알 같다·찌부됐다」(2026-10-08 Tabber). 세로는 가운데보다 살짝 위. */
.done {
  min-height: calc(100dvh - 140px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 24px 8px 14vh;
}
.done-pebble {
  display: block; flex: none;
  width: 150px; height: auto; aspect-ratio: 1; object-fit: contain;
  margin-bottom: 18px;
  -webkit-mask-image: radial-gradient(circle at 50% 51%, #000 44%, transparent 64%);
  mask-image: radial-gradient(circle at 50% 51%, #000 44%, transparent 64%);
  animation: roll-in 0.9s cubic-bezier(.2, 1.1, .3, 1) both;
}
.done-title { font-size: 24px; line-height: 1.4; }
.done-sub { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--secondary); }
.done-close { margin-top: 36px; font-size: 13px; color: var(--tertiary); }
.app-only { display: none; }
@keyframes roll-in { from { opacity: 0; transform: translateX(-36px) rotate(-40deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .done-pebble { animation: fade 0.4s ease both; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ── 관리(/admin) ── */
.admin .page { width: min(100%, 720px); }
.admin-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-head .wordmark { font-size: 24px; margin-right: auto; }
.ghost-btn {
  min-height: 40px; padding: 0 16px; border-radius: 100px;
  border: 1px solid var(--hairline); background: var(--fill);
  font-family: var(--btn); font-weight: 600; font-size: 14px; color: var(--secondary);
}
.ghost-btn:disabled { opacity: 0.4; }
.ghost-btn.danger { color: var(--warn); }
.sections { display: flex; gap: 6px; margin-top: 18px; border-bottom: 1px solid var(--hairline); }
.sections a { padding: 10px 4px; margin-bottom: -1px; font-size: 15px; color: var(--tertiary); text-decoration: none; border-bottom: 2px solid transparent; }
.sections a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }
.section-head { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.summary { margin-right: auto; font-size: 14px; color: var(--tertiary); }
.filters { margin-top: 18px; }
.filters .chip span { min-height: 38px; padding: 0 14px; font-size: 14px; }
.list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.item { border: 1px solid var(--hairline); border-radius: 18px; background: var(--fill); padding: 16px 18px; }
.item.read { opacity: 0.62; }
.item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--tertiary); }
.kind { padding: 3px 10px; border-radius: 100px; background: var(--fill-2); color: var(--primary); font-size: 12px; }
.kind.bug { background: rgba(255, 180, 162, 0.18); }
.kind.wish { background: rgba(160, 205, 255, 0.18); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.item-text { margin-top: 10px; font-size: 15px; line-height: 1.65; white-space: pre-wrap; user-select: text; -webkit-user-select: text; }
.item-contact { margin-top: 10px; font-size: 14px; color: var(--secondary); user-select: all; -webkit-user-select: all; }
.item-meta { margin-top: 6px; font-size: 13px; color: var(--tertiary); }
.item-actions { display: flex; gap: 8px; margin-top: 14px; }
.empty { margin-top: 40px; text-align: center; font-size: 15px; color: var(--tertiary); }
.more { margin: 18px auto 0; display: block; }
.login { max-width: 360px; margin: 18vh auto 0; }
.login .lede { font-size: 15px; }

/* ── 개인정보 처리방침(/privacy · tools/build-privacy.mjs 가 만든다) ── */
.doc-head { margin-bottom: 6px; }
.doc-title { margin-top: 6px; font-size: 20px; font-weight: 400; line-height: 1.4; color: var(--secondary); }
.doc { font-size: 16px; line-height: 1.8; color: var(--primary); }
.doc p, .doc ul, .doc .table-wrap { margin: 14px 0 0; }
.doc > p:first-child { margin-top: 18px; font-size: 14px; color: var(--tertiary); }
.doc h2 { margin: 38px 0 0; font-size: 18px; font-weight: 400; line-height: 1.45; }
.doc h3 { margin: 26px 0 0; font-size: 16px; font-weight: 400; color: var(--primary); }
.doc ul { padding-left: 1.1em; }
.doc li + li { margin-top: 8px; }
.doc li::marker { color: var(--tertiary); }
.doc strong { font-weight: 700; color: var(--primary); }
.doc a { color: var(--primary); text-decoration: underline; text-decoration-color: var(--tertiary); text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.88em; padding: 1px 6px; border-radius: 6px; background: var(--fill-2); }
/* 표는 폭 390 에서 줄이 넘치면 페이지가 아니라 표만 가로로 민다. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hairline); border-radius: 14px; background: var(--fill); }
.doc table { width: 100%; min-width: 340px; border-collapse: collapse; font-size: 14.5px; line-height: 1.6; }
.doc th, .doc td { padding: 10px 14px; text-align: left; vertical-align: top; }
.doc th { font-weight: 400; font-size: 13px; color: var(--tertiary); border-bottom: 1px solid var(--hairline); }
.doc td:first-child { white-space: nowrap; color: var(--secondary); }
.doc tbody tr + tr td { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.doc-foot { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--hairline); text-align: center; }
.doc-foot a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 100px;
  border: 1px solid var(--hairline); background: var(--fill);
  font-size: 15px; color: var(--secondary); text-decoration: none;
}

/* ── 앱 안(?app=1, html.in-app) — 앱이 시트 위에 「건의하기 · 닫기」 머리줄을 그린다 ──
   앱 머리줄과 이어지게 단색 배경(번짐 끔), 「몽돌」 머리 숨김, 보내기 버튼이 시트 아래 끝에 붙지 않게 아래 여백. */
.in-app body::before { display: none; }
.in-app .page-head { display: none; }
.in-app .page-head + .lede { margin-top: 0; }
.in-app .web-only { display: none; }
.in-app .app-only { display: inline; }
.in-app .done { min-height: calc(100dvh - 100px); }
.in-app .page { padding-top: max(16px, calc(var(--safe-t) + 8px)); padding-bottom: calc(var(--safe-b) + 48px); }

/* ── 지원(/support) — 처리방침의 .doc 를 같이 쓴다 ── */
.doc > p.doc-lede { margin-top: 18px; font-size: 16px; color: var(--secondary); }
.doc a.primary-btn { margin-top: 26px; color: var(--base); text-decoration: none; }
.doc .support-note { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--tertiary); text-align: center; }
.doc h3 + p { margin-top: 6px; color: var(--secondary); }
.doc a.get-appstore-top { margin-top: 22px; }
.doc img.get-shot { display: block; width: min(60%, 230px); height: auto; margin: 28px auto 0; border-radius: 34px; }

/* ── 생일 우리말(/birthday) — 결과 카드는 철마다 다른 번짐 하나(조약돌 빛처럼), 글자는 명조 ── */
.bd-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.bd-select select.box { min-height: 54px; font-size: 17px; text-align: center; text-align-last: center; }
.bd-result { margin-top: 28px; }
.bd-card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 56px 24px 52px; border-radius: 28px; border: 1px solid var(--hairline); background: var(--fill);
  text-align: center;
}
.bd-card::before {
  content: ""; position: absolute; inset: -30% -20%; z-index: -1; filter: blur(50px); opacity: 0.55;
  background: radial-gradient(45% 40% at 50% 42%, var(--bd-glow, rgba(214, 196, 186, 0.5)), transparent 70%);
}
.bd-card[data-season="spring"] { --bd-glow: rgba(244, 165, 190, 0.6); }
.bd-card[data-season="summer"] { --bd-glow: rgba(120, 200, 160, 0.55); }
.bd-card[data-season="autumn"] { --bd-glow: rgba(240, 170, 90, 0.55); }
.bd-card[data-season="winter"] { --bd-glow: rgba(150, 180, 240, 0.55); }
.bd-date { font-size: 15px; color: var(--secondary); letter-spacing: 0.04em; }
.bd-word { min-height: 1.2em; margin-top: 18px; font-family: var(--serif); font-weight: 800; font-size: clamp(44px, 14vw, 60px); line-height: 1.2; letter-spacing: 0.02em; }
.bd-meaning { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--secondary); }
.bd-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.bd-actions .ghost-btn { min-height: 44px; }
.bd-copied { margin-top: 10px; font-size: 13px; color: var(--tertiary); text-align: center; }
.bd-app { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.bd-app-lede { font-size: 15.5px; line-height: 1.6; color: var(--secondary); text-align: center; }
.bd-app a.primary-btn { text-decoration: none; }

/* 생일 — 앱으로 잇기: 방금 본 말에서 「오늘 사진엔?」으로, 앱 화면 한 장 */
.bd-app-row { display: flex; gap: 18px; align-items: center; }
.bd-app-shot { flex: none; width: 96px; height: auto; border-radius: 18px; border: 1px solid var(--hairline); }
.bd-app-text { min-width: 0; }
.bd-app-bridge { font-size: 16px; line-height: 1.55; color: var(--primary); }
.bd-app .bd-app-lede { margin-top: 6px; text-align: left; font-size: 14.5px; }
.bd-ios-note { white-space: pre-line; margin-top: 18px; font-size: 14px; line-height: 1.6; color: var(--secondary); text-align: center; }
.bd-app .bd-insta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 10px; text-decoration: none; }
.bd-app a.primary-btn.bd-insta { min-height: 54px; color: var(--base); }

/* 생일 — 움직임. 들어올 때 차례로 떠오르고, 낱말은 릴스처럼 흐림에서 한 글자씩. */
@keyframes bd-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bd-card { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes bd-bloom { from { opacity: 0; transform: scale(0.6); } to { opacity: 0.55; transform: none; } }
@keyframes bd-letter { from { opacity: 0; transform: translateY(12px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes bd-fade { from { opacity: 0; } to { opacity: 1; } }
.bd-page > * { animation: bd-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.bd-page > :nth-child(2) { animation-delay: 0.08s; }
.bd-page > :nth-child(4) { animation-delay: 0.16s; }
.bd-form, .bd-result { transition: opacity 0.26s ease, transform 0.26s ease; }
.bd-out { opacity: 0; transform: translateY(-8px); }
.bd-form.bd-play { animation: bd-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.bd-result.bd-play .bd-card { animation: bd-card 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.bd-result.bd-play .bd-card::before { animation: bd-bloom 1.4s 0.15s ease-out both; }
.bd-result.bd-play .bd-date { animation: bd-fade 0.6s 0.2s both; }
.bd-word span { display: inline-block; white-space: pre; }
.bd-result.bd-play .bd-word span { animation: bd-letter 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.4s + var(--i) * 0.14s); }
.bd-result.bd-play .bd-meaning { animation: bd-rise 0.7s 1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.bd-result.bd-play .bd-actions { animation: bd-rise 0.6s 1.25s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.bd-result.bd-play .bd-app { animation: bd-rise 0.7s 1.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .bd-page *, .bd-page *::before { animation: none !important; transition: none !important; }
}

/* 생일 — 두구두구. 도는 동안 낱말은 흐리게 빠르게 바뀌고 번짐이 숨 쉰다. 멈추면 카드가 한 번 튀고 제 말이 한 글자씩. */
@keyframes bd-breathe { from { opacity: 0.35; transform: scale(0.85); } to { opacity: 0.7; transform: scale(1.08); } }
@keyframes bd-pop { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } }
.bd-result.bd-rolling .bd-card { cursor: pointer; }
.bd-result.bd-rolling .bd-card::before { animation: bd-breathe 0.42s ease-in-out infinite alternate !important; }
.bd-result.bd-rolling .bd-word { opacity: 0.55; filter: blur(1.5px); }
.bd-result.bd-rolling .bd-meaning, .bd-result.bd-rolling .bd-more, .bd-result.bd-rolling .bd-actions, .bd-result.bd-rolling .bd-app { opacity: 0; animation: none !important; }
.bd-result.bd-landed .bd-card { animation: bd-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.bd-result.bd-landed .bd-card::before { animation: bd-bloom 0.9s ease-out both; }
.bd-result.bd-landed .bd-date { animation: bd-fade 0.4s both; }
.bd-result.bd-landed .bd-word span { animation-delay: calc(0.08s + var(--i) * 0.14s); }
.bd-result.bd-landed .bd-meaning { animation-delay: 0.6s; }
.bd-result.bd-landed .bd-more { animation-delay: 0.85s; }
.bd-result.bd-landed .bd-actions { animation-delay: 1.1s; }
.bd-result.bd-landed .bd-app { animation-delay: 1.3s; }

/* 생일 — 이날의 다른 말 두 개(곁말). 대표 말보다 작게, 카드 아래. */
.bd-more { margin-top: 18px; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--hairline); background: var(--fill); }
.bd-more-title { font-size: 13px; color: var(--tertiary); }
.bd-more-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.bd-more-list li { display: flex; gap: 10px; align-items: baseline; }
.bd-more-list b { flex: none; font-family: var(--serif); font-weight: 800; font-size: 19px; }
.bd-more-list span { font-size: 14px; line-height: 1.5; color: var(--secondary); }
.bd-result.bd-play .bd-more { animation: bd-rise 0.6s 1.15s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.bd-result.bd-landed .bd-more { animation-delay: 0.85s; }

/* 생일 — 버튼 바로 아래 안심 문구. 「개인정보 뜯어가네」 오해가 실제로 나와서 맨 아래에서 올렸다. */
.bd-safe { margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--secondary); text-align: center; }

/* 생일 — 「그냥 랜덤이에요?」에 답하는 접힌 설명. 결과 아래, 눌러야 펼쳐진다. */
.bd-how { margin-top: 14px; padding: 0 4px; font-size: 14px; line-height: 1.65; color: var(--secondary); }
.bd-how summary { cursor: pointer; list-style: none; text-align: center; color: var(--tertiary); }
.bd-how summary::-webkit-details-marker { display: none; }
.bd-how summary::after { content: ' ▾'; }
.bd-how[open] summary::after { content: ' ▴'; }
.bd-how p { margin-top: 10px; }
.bd-result.bd-play .bd-how { animation: bd-rise 0.6s 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.bd-result.bd-landed .bd-how { animation-delay: 0.95s; }
.bd-result.bd-rolling .bd-how { opacity: 0; animation: none !important; }

/* 생일 — 이미지를 띄워 길게 눌러 저장. 앱 안 브라우저(카톡 등)는 공유 시트·내려받기가 안 된다. */
.bd-sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(6, 7, 10, 0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bd-sheet[hidden] { display: none !important; }
.bd-sheet-box { width: min(100%, 380px); text-align: center; }
.bd-sheet img { display: block; width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--hairline);
  -webkit-touch-callout: default; user-select: auto; -webkit-user-select: auto; }
.bd-sheet p { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--secondary); }
.bd-sheet .ghost-btn { margin-top: 14px; min-height: 44px; }