*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0d1a;--card:#12172b;--line:#232b47;--ink:#e8ebf5;--dim:#8d96b5;--gold:#e6c15c;--gold2:#f3d98a}
body{background:radial-gradient(1200px 800px at 50% -10%,#141b38 0%,var(--bg) 60%);color:var(--ink);
  font-family:'Noto Sans KR',sans-serif;min-height:100vh;line-height:1.6}
.stars{position:fixed;inset:0;pointer-events:none;background-image:
  radial-gradient(1px 1px at 12% 22%,#fff8 0,transparent 100%),
  radial-gradient(1px 1px at 78% 12%,#fff6 0,transparent 100%),
  radial-gradient(1.5px 1.5px at 55% 38%,#ffd97a55 0,transparent 100%),
  radial-gradient(1px 1px at 30% 65%,#fff5 0,transparent 100%),
  radial-gradient(1px 1px at 88% 55%,#fff7 0,transparent 100%),
  radial-gradient(1.5px 1.5px at 8% 85%,#fff4 0,transparent 100%),
  radial-gradient(1px 1px at 65% 82%,#ffd97a44 0,transparent 100%);
  animation:tw 6s ease-in-out infinite alternate}
@keyframes tw{from{opacity:.5}to{opacity:1}}
.wrap{max-width:640px;margin:0 auto;padding:28px 18px 60px;position:relative}
.hidden{display:none!important}

.top{text-align:center;padding:16px 0 22px}
.hero{font-size:52px;filter:drop-shadow(0 0 18px #e6c15c66)}
h1{font-family:'Noto Serif KR',serif;font-size:34px;font-weight:700;letter-spacing:2px;margin:6px 0 10px}
.tg{color:var(--dim);font-size:14.5px}
.tg b{color:var(--gold2)}

.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 20px;box-shadow:0 12px 40px #0008}
.lb{display:block;font-size:13px;font-weight:700;color:var(--gold2);letter-spacing:1px;margin:18px 0 8px}
.lb:first-child{margin-top:0}
.opt{color:var(--dim);font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#0d1224;border:1px solid var(--line);color:var(--dim);border-radius:100px;
  padding:8px 14px;font-size:13.5px;cursor:pointer;font-family:inherit;transition:.15s}
.chip.on{background:#2a2410;border-color:var(--gold);color:var(--gold2);font-weight:700}
input,textarea{width:100%;background:#0d1224;border:1px solid var(--line);border-radius:12px;
  color:var(--ink);padding:12px 14px;font-size:15px;font-family:inherit;margin-top:8px}
textarea{font-family:'Noto Serif KR',serif;font-size:15.5px;line-height:1.9;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--gold)}
input[type=date]{color-scheme:dark}
.cnt{text-align:right;font-size:12px;color:var(--dim);margin-top:4px}
.openinfo{margin-top:10px;font-size:13.5px;color:var(--gold2);min-height:20px}
.seal{width:100%;margin-top:22px;background:linear-gradient(135deg,#e6c15c,#c9962e);color:#1a1405;
  border:none;border-radius:14px;padding:16px;font-size:17px;font-weight:800;font-family:inherit;cursor:pointer;
  box-shadow:0 6px 24px #e6c15c44;transition:.15s}
.seal:active{transform:scale(.98)}
.seal:disabled{opacity:.55}
.privacy{margin-top:12px;font-size:12px;color:var(--dim);text-align:center}
.how{margin-top:22px;display:flex;flex-direction:column;gap:8px}
.hitem{background:#10152a88;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:13.5px;color:var(--dim)}
.hitem b{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;background:var(--gold);
  color:#1a1405;border-radius:50%;font-size:12px;margin-right:8px}

/* 봉인 완료 / 잠김 / 개봉 공통 */
.sealscene,.lockscene,.openscene{text-align:center;padding:26px 0}
.capsule{font-size:74px;display:inline-block;filter:drop-shadow(0 0 22px #e6c15c55)}
.capsule.locked{animation:float 3.4s ease-in-out infinite}
.capsule.opening{animation:openpop .9s cubic-bezier(.2,1.6,.4,1) both}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes openpop{0%{transform:scale(.3) rotate(-18deg);opacity:0}60%{transform:scale(1.15) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
#capAnim{animation:sealdrop .8s cubic-bezier(.3,1.4,.5,1) both}
@keyframes sealdrop{0%{transform:translateY(-40px) scale(1.3);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
.wax{font-size:26px;margin-top:-10px}
.sealscene h2{font-family:'Noto Serif KR',serif;font-size:26px;margin:14px 0 6px;color:var(--gold2)}
.bless{font-family:'Noto Serif KR',serif;font-size:16px;color:var(--gold2);margin:10px 0;opacity:.95}
.sinfo{color:var(--dim);font-size:14px;margin-bottom:18px}
.linkbox{background:var(--card);border:1px solid var(--gold);border-radius:16px;padding:16px;margin:0 auto;max-width:480px}
.lb2{font-size:13px;font-weight:700;color:var(--gold2);margin-bottom:10px}
.linkrow{display:flex;gap:8px}
.linkrow input{margin:0;font-size:13px;color:var(--dim)}
.linkrow button,.share{background:#2a2410;border:1px solid var(--gold);color:var(--gold2);border-radius:10px;
  padding:10px 16px;font-family:inherit;font-weight:700;cursor:pointer;font-size:14px}
.share{width:100%;margin-top:10px;padding:13px}
.tip{margin-top:18px;font-size:13px;color:var(--dim);max-width:440px;margin-left:auto;margin-right:auto}
.again{margin-top:22px;background:none;border:1px solid var(--line);color:var(--dim);border-radius:100px;
  padding:10px 22px;font-family:inherit;cursor:pointer;font-size:14px}

/* 잠김 */
.lockto{font-size:26px;margin:16px 0 4px}
.lockmsg{color:var(--dim);font-size:15px}
.countdown{font-family:'Noto Serif KR',serif;font-size:54px;font-weight:700;color:var(--gold);
  margin:16px 0 2px;text-shadow:0 0 30px #e6c15c55}
.countdown small{font-size:22px;color:var(--gold2)}
.lockday{color:var(--dim);font-size:14px;margin-bottom:14px}
.lockfoot{margin-top:20px;font-size:12.5px;color:var(--dim)}
.mine{display:inline-block;margin-top:26px;color:var(--gold2);text-decoration:none;font-size:14.5px;
  border:1px solid var(--line);border-radius:100px;padding:10px 20px}
.mine.big{background:linear-gradient(135deg,#e6c15c,#c9962e);color:#1a1405;font-weight:800;border:none;padding:14px 26px;font-size:16px}

/* 개봉 */
.openlabel{letter-spacing:4px;font-size:12px;color:var(--gold);font-weight:700;margin-top:14px}
.openscene h1{font-size:28px;margin:4px 0 6px}
.meta{color:var(--dim);font-size:13.5px;margin-bottom:20px}
.letter{background:#f7f2e4;color:#2a2415;border-radius:14px;padding:26px 22px;text-align:left;
  font-family:'Noto Serif KR',serif;font-size:16px;line-height:2.05;white-space:pre-wrap;
  box-shadow:0 14px 44px #0009, inset 0 0 60px #d8cba955;
  background-image:repeating-linear-gradient(transparent,transparent 32px,#00000008 33px)}
.fromline{text-align:right;font-family:'Noto Serif KR',serif;color:var(--gold2);margin:12px 4px 26px;font-size:15px}
.worldbox,.replybox{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px;text-align:left;margin-bottom:16px}
.wh{font-size:14px;font-weight:700;color:var(--gold2);margin-bottom:10px}
.worldbox ul{list-style:none}
.worldbox li{padding:7px 0;border-bottom:1px dashed var(--line);font-size:14px;color:var(--ink)}
.worldbox li:last-child{border-bottom:none}
.worldbox li .d{color:var(--dim);font-size:12px;margin-right:8px}
.replybox p{font-size:14.5px;line-height:1.9}
.foot{text-align:center;color:#5a6280;font-size:11.5px;margin-top:40px}
@media(max-width:480px){h1{font-size:28px}.countdown{font-size:42px}}