:root {
  --bg: #F4F1EC;
  --bg2: #ECE7DF;
  --ink: #2F2A24;
  --ink2: #6B6258;
  --ink3: #9A9084;
  --line: rgba(47, 42, 36, .10);
  --card: rgba(255, 255, 255, .66);
  --accent: #B8792E;
  --accent2: #D49A4E;
  --accent-ink: #7E531E;
  --paper: #FFFDF8;
  --ok: #6F7F4E;
  --danger: #B5523B;
  --serif: 'Gowun Batang', 'AppleMyungjo', 'Nanum Myeongjo', serif;
  --sans: 'Gowun Dodum', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }

/* 병 뒤로 비치는 따뜻한 빛 */
.bg-light {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 42% at 50% 30%, rgba(255, 233, 196, .75), rgba(255, 233, 196, 0) 70%),
    radial-gradient(80% 60% at 50% 110%, rgba(226, 219, 207, .9), rgba(226, 219, 207, 0) 70%),
    var(--bg);
}

.top {
  max-width: 560px; margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top)) 16px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.over { margin: 0; font-size: 13px; letter-spacing: .02em; color: var(--ink2); }
.sound {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,255,255,.6); color: var(--ink2);
  display: grid; place-items: center; cursor: pointer;
}
.sound .off { display: none; }
.sound[aria-pressed="false"] .on { display: none; }
.sound[aria-pressed="false"] .off { display: block; }

main { max-width: 560px; margin: 0 auto; padding: 0 16px; }

.hero { text-align: center; padding: 6px 0 0; }
.kicker { margin: 4px 0 0; }
.kicker span {
  display: inline-block; padding: 3px 12px 2px; font-size: 13px; letter-spacing: .12em; color: var(--accent-ink);
  background: rgba(232,196,128,.38); transform: rotate(-1.5deg);
  -webkit-clip-path: polygon(2% 0, 98% 6%, 100% 50%, 97% 100%, 3% 94%, 0 50%); clip-path: polygon(2% 0, 98% 6%, 100% 50%, 97% 100%, 3% 94%, 0 50%);
}
.hero h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(36px, 11vw, 52px); line-height: 1.15; margin: 4px 0 8px;
  letter-spacing: -.01em;
}
.verse { margin: 0; font-family: var(--serif); font-size: 14px; color: var(--ink2); line-height: 1.7; }
.verse span { display: block; font-size: 12px; color: var(--ink3); margin-top: 2px; font-family: var(--sans); }

/* 유리병 */
.stage-wrap { display: flex; flex-direction: column; align-items: center; margin: 4px -16px 0; padding: 0 16px; overflow: hidden; }
.stage {
  position: relative;
  width: min(86vw, 380px, 50vh);
}
.stage::before {
  content: ''; position: absolute; left: -20%; right: -20%; top: 0; bottom: 0; z-index: -1;
  background: conic-gradient(from 180deg at 50% 45%, rgba(255,240,210,0) 0deg, rgba(255,240,210,.55) 20deg, rgba(255,240,210,0) 40deg, rgba(255,240,210,.4) 75deg, rgba(255,240,210,0) 100deg, rgba(255,240,210,.5) 140deg, rgba(255,240,210,0) 165deg, rgba(255,240,210,.45) 200deg, rgba(255,240,210,0) 225deg, rgba(255,240,210,.5) 265deg, rgba(255,240,210,0) 290deg, rgba(255,240,210,.4) 325deg, rgba(255,240,210,0) 360deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%);
  mask: radial-gradient(closest-side, #000 30%, transparent 100%);
  animation: rays 60s linear infinite;
  opacity: .9;
}
@keyframes rays { to { transform: rotate(360deg); } }
#jar { display: block; width: 100%; aspect-ratio: 1000 / 1250; cursor: pointer; touch-action: manipulation; }
@supports not (aspect-ratio: 1) { #jar { height: calc(min(86vw, 380px, 50vh) * 1.25); } }
.peek {
  display: block; margin: 2px auto 0; padding: 4px 10px;
  background: none; border: 0; color: var(--ink3); font-size: 12.5px; cursor: pointer;
}

.count { width: 100%; max-width: 360px; text-align: center; margin-top: 6px; }
.num { display: flex; align-items: baseline; justify-content: center; gap: 8px; font-family: var(--serif); }
.num b { font-size: 46px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.num span { font-size: 18px; color: var(--ink2); }
.num i { font-style: normal; }
.bar { height: 8px; border-radius: 99px; background: rgba(47,42,36,.08); margin: 12px 8px 10px; overflow: hidden; }
.bar i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #E8C27E, var(--accent));
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.meta { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.chip { padding: 3px 10px; border-radius: 99px; background: rgba(184,121,46,.12); color: var(--accent-ink); }
.mine { color: var(--ink2); }

/* 쓰기 카드 */
.compose {
  margin: 26px 0 0; padding: 22px 18px 18px;
  background: var(--card); border: 1px solid rgba(255,255,255,.9);
  border-radius: 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 12px 40px -18px rgba(80,60,30,.25);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.compose h2, .feed h2 { font-family: var(--serif); font-size: 21px; margin: 0 0 6px; }
.hint { margin: 0 0 14px; font-size: 14px; color: var(--ink2); line-height: 1.65; }
.hint b { color: var(--ink); font-weight: normal; border-bottom: 2px solid rgba(212,154,78,.45); }
.pad {
  border-radius: 14px; background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  padding: 6px 14px 6px 14px;
}
.pad:focus-within { border-color: rgba(184,121,46,.55); box-shadow: 0 0 0 3px rgba(212,154,78,.18); }
.items { list-style: none; margin: 0; padding: 2px 0 0; }
.items li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px dashed rgba(184,121,46,.28); cursor: text; }
.items .no {
  flex: 0 0 26px; height: 26px; margin-top: 3px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,154,78,.2); color: var(--accent-ink);
  font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1;
}
.items li.on .no { background: var(--accent); color: #fff; }
.items textarea {
  flex: 1; display: block; width: 100%; min-width: 0; height: 32px; min-height: 32px; resize: none; overflow: hidden;
  border: 0; outline: 0; background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 24px; padding: 4px 0;
}
.add {
  display: block; margin: 6px 0 4px 36px; padding: 6px 0; border: 0; background: none;
  color: var(--accent-ink); font-size: 14.5px; cursor: pointer;
}
textarea::placeholder { color: #B7AEA2; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.slips { font-size: 14px; color: var(--ink2); }
.slips.warn { color: var(--danger); }
.go {
  flex: 0 0 auto; min-width: 150px; height: 52px; padding: 0 26px;
  border: 0; border-radius: 99px; cursor: pointer;
  background: linear-gradient(180deg, var(--accent2), var(--accent));
  color: #fff; font-size: 17px; letter-spacing: .02em;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 8px 18px -8px rgba(126,83,30,.7);
  transition: transform .12s, opacity .2s, filter .2s;
}
.go:active { transform: scale(.96); }
.go:disabled { opacity: .45; cursor: default; box-shadow: none; }
.go.busy { filter: saturate(.6); }
.err { margin: 10px 2px 0; color: var(--danger); font-size: 14px; }
.closed { display: flex; flex-direction: column; gap: 4px; text-align: center; padding: 14px 6px 4px; }
.closed b { font-family: var(--serif); font-size: 18px; }
.closed span { font-size: 14px; color: var(--ink2); }
.compose.is-closed .pad, .compose.is-closed .row, .compose.is-closed .hint { display: none; }

/* 모두의 감사 */
.feed { margin: 34px 0 0; }
.feed h2 small { font-family: var(--sans); font-size: 14px; font-weight: normal; color: var(--ink3); margin-left: 4px; }
/* 가로 줄 순서: 맨 위 왼쪽이 가장 최신 → 오른쪽 → 다음 줄 */
#feed { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; align-items: start; }
#feed li {
  min-width: 0;
  margin: 0; padding: 18px 13px 10px;
  border-radius: 1px; font-size: 15px; line-height: 1.55;
  background-image: linear-gradient(170deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%, rgba(0,0,0,.035));
  box-shadow: 0 1px 1px rgba(60,40,20,.12), 0 8px 12px -10px rgba(60,40,20,.45);
  position: relative;
}
/* 쪽지를 붙인 마스킹 테이프 */
#feed li::before {
  content: ''; position: absolute; top: -9px; left: 50%; width: 58px; height: 20px;
  margin-left: -29px; transform: translateX(var(--tx, 0)) rotate(var(--tr, -3deg));
  background: var(--tape, rgba(232,196,128,.6));
  box-shadow: 0 1px 1px rgba(60,40,20,.08);
  -webkit-clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 0, 19% 8%, 81% 4%, 86% 12%, 91% 2%, 96% 10%, 100% 4%, 100% 92%, 95% 100%, 90% 90%, 85% 100%, 80% 92%, 20% 96%, 15% 88%, 10% 100%, 5% 90%, 0 98%);
  clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 0, 19% 8%, 81% 4%, 86% 12%, 91% 2%, 96% 10%, 100% 4%, 100% 92%, 95% 100%, 90% 90%, 85% 100%, 80% 92%, 20% 96%, 15% 88%, 10% 100%, 5% 90%, 0 98%);
}
/* 종이 게시판 바탕 */
.feed {
  padding: 20px 14px 22px; border-radius: 6px;
  background-color: #EDE5D6;
  background-image: radial-gradient(rgba(120,90,60,.07) 1px, transparent 1.4px), linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0));
  background-size: 7px 7px, 100% 100%;
  box-shadow: inset 0 0 0 1px rgba(120,90,60,.08), 0 10px 30px -18px rgba(80,60,30,.35);
}
#feed li.new { animation: pop .5s cubic-bezier(.2,1.4,.4,1); }
#feed li .n { display: block; font-size: 11px; color: rgba(47,42,36,.42); margin-top: 4px; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.more {
  display: block; margin: 6px auto 0; padding: 10px 26px; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(255,255,255,.7); cursor: pointer; color: var(--ink2);
}
.empty { color: var(--ink3); font-size: 14px; text-align: center; }

.foot { text-align: center; color: var(--ink3); font-size: 12px; padding: 40px 16px calc(28px + env(safe-area-inset-bottom)); }

/* 쪽지 접기·날리기 */
.flyer { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; -webkit-perspective: 700px; perspective: 700px; will-change: transform; }
.slip { position: absolute; inset: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; animation: slipIn .26s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes slipIn { from { transform: translateY(18px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.col { position: absolute; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.col.l { left: 0; }
.col.r { left: 50%; transform-origin: 0 50%; transition: transform .34s cubic-bezier(.5,0,.3,1); }
.q { position: absolute; left: 0; width: 100%; height: 50%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.q.t { top: 0; }
.q.b { top: 50%; transform-origin: 50% 0; transition: transform .32s cubic-bezier(.5,0,.3,1); }
.face { position: absolute; inset: -.3px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.face.f { background: var(--paper); }
.q.t .face.k { transform: rotateY(180deg); }
.q.b .face.k { transform: rotateX(180deg); }
.face.k { box-shadow: inset 0 0 0 1px rgba(120,90,60,.16); }
.face.k::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(80,50,20,.08)); }
.q.t .face.k::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(120,90,60,.22); }
.txt {
  position: absolute; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 16px; font-size: 15px; line-height: 1.45; color: var(--ink);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 23px, rgba(184,121,46,.13) 23px, rgba(184,121,46,.13) 24px), var(--paper);
}
.txt span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.slip { filter: drop-shadow(0 6px 10px rgba(60,40,20,.22)); }
.folded {
  position: absolute; left: 0; top: 0; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(120,90,60,.18), 0 6px 10px rgba(60,40,20,.22);
  background-image: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(80,50,20,.08));
}
.folded::before { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 1px; background: rgba(120,90,60,.25); }
.slip.f1 .q.b { transform: translateZ(1px) rotateX(180deg); }
.slip.f2 .col.r { transform: translateZ(2px) rotateY(-180deg); }

/* 쪽지 읽기 */
.reader { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; }
.reader[hidden] { display: none; }
.reader-bg { position: absolute; inset: 0; background: rgba(40,32,24,.38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade .25s both; }
@keyframes fade { from { opacity: 0; } }
.note-card {
  position: relative; width: min(100%, 360px); padding: 26px 22px 18px; border-radius: 8px;
  background: var(--paper);
  background-image: linear-gradient(to bottom, rgba(0,0,0,0) 49.6%, rgba(120,90,60,.10) 50%, rgba(0,0,0,0) 50.4%), linear-gradient(to right, rgba(0,0,0,0) 49.7%, rgba(120,90,60,.07) 50%, rgba(0,0,0,0) 50.3%);
  box-shadow: 0 30px 60px -20px rgba(40,25,10,.5);
  transform-origin: 50% 60%;
}
.note-card.open { animation: unfold .6s cubic-bezier(.2,.9,.25,1) both; }
@keyframes unfold {
  0% { transform: translateY(60px) scale(.18) rotate(-14deg); opacity: 0; }
  45% { transform: translateY(0) scale(.92, .5) rotate(3deg); opacity: 1; }
  75% { transform: scale(1.02, 1.04) rotate(-1deg); }
  100% { transform: none; }
}
.note-card .no { margin: 0 0 6px; font-size: 12px; color: var(--ink3); letter-spacing: .04em; }
.note-card .nt { margin: 0; font-family: var(--serif); font-size: 21px; line-height: 34px; min-height: 68px; white-space: pre-wrap; }
.note-actions { display: flex; gap: 8px; margin-top: 18px; }
.note-actions button { flex: 1; height: 46px; border-radius: 99px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 15px; }
.note-actions .again { background: linear-gradient(180deg, var(--accent2), var(--accent)); border: 0; color: #fff; }

.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 90;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: rgba(47,42,36,.92); color: #fff; padding: 11px 18px; border-radius: 99px; font-size: 14.5px;
  max-width: calc(100vw - 32px); text-align: center;
  transition: opacity .3s, transform .3s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.confetti { position: fixed; top: -20px; z-index: 70; width: 10px; height: 14px; border-radius: 2px; pointer-events: none; }

/* 100번째 감사 */
.ms { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ms-glow {
  position: absolute; left: 50%; top: 55%; width: 150%; padding-top: 150%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,214,140,.9), rgba(255,214,140,.4) 45%, rgba(255,214,140,0));
  transform: translate(-50%, -50%) scale(.3); opacity: 0; pointer-events: none;
  animation: msGlow 1.8s ease-out forwards;
}
@keyframes msGlow { 30% { opacity: 1; } 100% { opacity: .6; transform: translate(-50%, -50%) scale(1); } }
.ms-card {
  position: relative; width: 80%; padding: 22px 18px 18px; border-radius: 4px; text-align: center;
  background: var(--paper);
  box-shadow: 0 1px 1px rgba(60,40,20,.12), 0 24px 40px -18px rgba(60,40,20,.55);
  transform: rotate(-3deg);
  animation: msStamp .75s cubic-bezier(.2,1.5,.4,1) .12s both;
}
.ms-card::before {
  content: ''; position: absolute; top: -10px; left: 50%; width: 76px; height: 22px; margin-left: -38px;
  background: rgba(232,196,128,.7); transform: rotate(2deg);
}
@keyframes msStamp {
  0% { opacity: 0; transform: scale(2.3) rotate(-14deg); }
  60% { opacity: 1; transform: scale(.94) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(-3deg); }
}
.ms-num { margin: 0; font-family: var(--serif); color: var(--ink); }
.ms-num b { font-size: 50px; line-height: 1; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.ms-num span { font-size: 18px; margin-left: 4px; }
.ms-text {
  margin: 10px 0 0; font-family: var(--serif); font-size: 15.5px; line-height: 1.6; color: var(--ink2);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ms-own { display: inline-block; margin: 10px 0 0; padding: 2px 11px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 13px; }
.ms.big .ms-num b { font-size: 58px; }
.ms.out { animation: msOut .45s ease forwards; }
@keyframes msOut { to { opacity: 0; transform: scale(.97); } }

@media (min-width: 720px) {
  .stage { width: min(380px, 52vh); }
}
@media (prefers-reduced-motion: reduce) {
  .stage::before { animation: none; }
}