/* ============ 별을 부치는 우체국 ============ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; overflow:hidden; background:#05070f; }
body { font-family:'Gowun Dodum', 'Apple SD Gothic Neo', sans-serif; color:#f2ecdd; user-select:none; }

#app { position:fixed; inset:0; }

/* ---------- 스테이지 ---------- */
#stage { position:absolute; inset:0; overflow:hidden; background:#05070f; }
.layer { position:absolute; inset:0; pointer-events:none; }
#bg svg, #bg2 svg, #mid svg, #title-art svg, #cut-art svg { width:100%; height:100%; display:block; }
#bg2 { opacity:0; transition:opacity 1.1s ease; }
#bg2.show { opacity:1; }
#mid { opacity:0; transition:opacity .9s ease; z-index:6; background:rgba(3,5,12,.55); }
#mid.show { opacity:1; }
#vignette { z-index:7; background:radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(0,0,10,.5) 100%); }
#flash { z-index:12; background:#fff; opacity:0; }
#flash.go { animation:flashAnim .5s ease-out; }
@keyframes flashAnim { 0%{opacity:.95} 100%{opacity:0} }
#stage.shake { animation:shakeAnim .45s ease; }
@keyframes shakeAnim { 0%,100%{transform:none} 20%{transform:translate(-10px,4px)} 40%{transform:translate(9px,-5px)} 60%{transform:translate(-7px,3px)} 80%{transform:translate(5px,-2px)} }

/* ---------- 캐릭터 ---------- */
#chars { z-index:5; }
.portrait { position:absolute; bottom:0; height:88%; width:34%; min-width:300px; display:flex; align-items:flex-end; justify-content:center;
  transition:opacity .5s ease, transform .5s ease, filter .4s ease; opacity:0; transform:translateY(24px); }
.portrait svg { height:100%; width:auto; max-width:none; filter:drop-shadow(0 12px 28px rgba(0,0,10,.45)); }
.portrait.show { opacity:1; transform:translateY(0); }
.portrait.pos-l { left:2%; } .portrait.pos-c { left:50%; margin-left:-17%; } .portrait.pos-r { right:2%; }
.portrait.dim { filter:brightness(.55) saturate(.7); }

/* ---------- 효과 레이어 ---------- */
#fx { z-index:6; overflow:hidden; }
.fx-p { position:absolute; will-change:transform,opacity; }
.rain-drop { width:1.5px; height:70px; background:linear-gradient(rgba(200,220,255,0), rgba(190,215,255,.55)); animation:rainFall linear infinite; }
@keyframes rainFall { 0%{transform:translateY(-12vh)} 100%{transform:translateY(112vh)} }
.firefly { width:5px; height:5px; border-radius:50%; background:#ffe9a3; box-shadow:0 0 10px 3px rgba(255,233,160,.55); animation:flyWander ease-in-out infinite alternate, flyBlink 2.6s ease-in-out infinite; }
@keyframes flyWander { 0%{transform:translate(0,0)} 100%{transform:translate(60px,-46px)} }
@keyframes flyBlink { 0%,100%{opacity:.1} 50%{opacity:.95} }
.snow-p { border-radius:50%; background:rgba(255,255,255,.85); animation:snowFall linear infinite; }
@keyframes snowFall { 0%{transform:translateY(-8vh) translateX(0)} 100%{transform:translateY(110vh) translateX(6vw)} }
.petal-p { width:11px; height:8px; border-radius:60% 0 60% 0; background:#ffd7e2; opacity:.9; animation:petalFall linear infinite; }
@keyframes petalFall { 0%{transform:translateY(-8vh) rotate(0)} 100%{transform:translateY(110vh) rotate(540deg)} }
.meteor-p { width:150px; height:2px; background:linear-gradient(90deg, rgba(255,255,255,0), #fff); border-radius:2px; transform:rotate(-35deg); animation:meteorShoot ease-in infinite; opacity:0; }
@keyframes meteorShoot { 0%{opacity:0; transform:rotate(-35deg) translateX(0)} 4%{opacity:1} 12%{opacity:0; transform:rotate(-35deg) translateX(-46vw)} 100%{opacity:0; transform:rotate(-35deg) translateX(-46vw)} }
.dust-p { width:3px; height:3px; border-radius:50%; background:rgba(255,240,200,.5); animation:dustFloat ease-in-out infinite alternate; }
@keyframes dustFloat { 0%{transform:translateY(0); opacity:.15} 100%{transform:translateY(-40px); opacity:.6} }

/* ---------- 타이틀 카드 ---------- */
#titlecard { position:absolute; inset:0; z-index:14; display:none; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:rgba(4,6,14,.92); text-align:center; }
#titlecard.show { display:flex; animation:tcFade 2.8s ease forwards; }
@keyframes tcFade { 0%{opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{opacity:1} }
.tc-line { width:120px; height:1px; background:linear-gradient(90deg, transparent, #c9b370, transparent); }
.tc-num { font-family:'Nanum Myeongjo', serif; font-size:17px; letter-spacing:.5em; color:#c9b370; padding-left:.5em; }
.tc-name { font-family:'Nanum Myeongjo', serif; font-size:clamp(26px, 4.4vw, 44px); font-weight:700; color:#f4eedd; letter-spacing:.14em; }

/* ---------- 별조각 HUD ---------- */
#starhud { position:absolute; top:14px; left:16px; z-index:15; display:none; align-items:center; gap:7px;
  background:rgba(8,12,26,.55); border:1px solid rgba(201,179,112,.35); border-radius:20px; padding:5px 14px 5px 11px;
  font-size:14px; color:#ffe9a3; backdrop-filter:blur(4px); }
#starhud.show { display:flex; }
.star-ic { color:#ffd76a; text-shadow:0 0 8px rgba(255,215,106,.8); }
#starhud.pop .star-ic { animation:starPop .7s ease; }
@keyframes starPop { 0%{transform:scale(1)} 40%{transform:scale(1.7) rotate(20deg)} 100%{transform:scale(1)} }

/* ---------- 대화창 ---------- */
#dialog { position:absolute; left:50%; transform:translateX(-50%); bottom:2.6%; width:min(920px, 94%); z-index:10;
  background:linear-gradient(180deg, rgba(10,14,30,.88), rgba(6,9,20,.93));
  border:1px solid rgba(210,190,130,.28); border-radius:14px; padding:20px 30px 26px; min-height:132px;
  box-shadow:0 10px 40px rgba(0,0,10,.5); display:none; cursor:pointer; }
#dialog.show { display:block; }
#namebox { position:absolute; top:-16px; left:22px; display:none;
  background:linear-gradient(180deg, #4a4030, #2e2820); border:1px solid rgba(210,190,130,.5); color:#ffe9b0;
  font-size:15px; padding:5px 18px; border-radius:8px; letter-spacing:.08em; }
#namebox.show { display:block; }
#textbox { font-size:clamp(16px, 2.1vw, 19.5px); line-height:1.85; color:#f2ecdd; word-break:keep-all; min-height:72px; }
#textbox.narr { color:#cfd4e4; font-style:normal; }
#nextmark { position:absolute; right:18px; bottom:10px; font-size:12px; color:#c9b370; opacity:0; animation:blinkMark 1.1s ease-in-out infinite; }
#nextmark.show { opacity:1; }
@keyframes blinkMark { 0%,100%{transform:translateY(0); opacity:.9} 50%{transform:translateY(4px); opacity:.4} }

/* ---------- 선택지 ---------- */
#choices { position:absolute; inset:0; z-index:11; display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(4,6,14,.45); }
#choices.show { display:flex; }
#choices button { width:min(620px, 86%); padding:15px 26px; font-family:inherit; font-size:clamp(15px,2vw,18px); color:#f2ecdd;
  background:linear-gradient(180deg, rgba(20,26,50,.92), rgba(12,16,34,.94)); border:1px solid rgba(201,179,112,.4);
  border-radius:12px; cursor:pointer; transition:all .18s ease; word-break:keep-all; line-height:1.6; }
#choices button:hover { background:linear-gradient(180deg, rgba(45,52,88,.95), rgba(28,34,64,.95)); border-color:#e3cf8e; transform:translateY(-2px); }

/* ---------- 편지 ---------- */
#letterview { position:absolute; inset:0; z-index:11; display:none; align-items:center; justify-content:center;
  background:rgba(3,4,10,.72); cursor:pointer; }
#letterview.show { display:flex; animation:letterIn .7s ease; }
@keyframes letterIn { 0%{opacity:0} 100%{opacity:1} }
#letterpaper { width:min(660px, 92%); max-height:84%; overflow-y:auto; background:linear-gradient(175deg, #f7f0dc 0%, #efe5c8 60%, #e9dcb8 100%);
  border-radius:6px; padding:44px 52px 38px; color:#4a3b28; box-shadow:0 24px 70px rgba(0,0,0,.6), inset 0 0 60px rgba(160,130,80,.14);
  transform:rotate(-.5deg); position:relative; }
#letterpaper::before { content:''; position:absolute; top:16px; right:20px; width:54px; height:54px; border-radius:50%;
  border:2px solid rgba(150,60,50,.4); color:rgba(150,60,50,.4); }
#letterhead { font-family:'Nanum Pen Script', cursive; font-size:clamp(20px,3vw,26px); color:#7a5c34; margin-bottom:18px; border-bottom:1px dashed rgba(122,92,52,.35); padding-bottom:10px; }
#letterbody { font-family:'Nanum Pen Script', cursive; font-size:clamp(21px,3.2vw,28px); line-height:1.75; word-break:keep-all; white-space:pre-wrap; }
#lettersign { font-family:'Nanum Pen Script', cursive; font-size:clamp(20px,3vw,26px); text-align:right; margin-top:22px; color:#6b4f2e; }
.letter-hint { text-align:center; margin-top:18px; font-family:'Gowun Dodum'; font-size:12px; color:#a08650; animation:blinkMark 1.2s infinite; }
#letterpaper::-webkit-scrollbar { width:8px; } #letterpaper::-webkit-scrollbar-thumb { background:rgba(122,92,52,.35); border-radius:4px; }

/* ---------- 퀵메뉴 ---------- */
#quickmenu { position:absolute; top:12px; right:14px; z-index:15; display:none; gap:6px; }
#quickmenu.show { display:flex; }
#quickmenu button { font-family:inherit; font-size:12.5px; color:#d8cfb4; background:rgba(8,12,26,.55); border:1px solid rgba(201,179,112,.28);
  border-radius:8px; padding:6px 11px; cursor:pointer; backdrop-filter:blur(4px); transition:all .15s; }
#quickmenu button:hover { color:#ffe9b0; border-color:#c9b370; }
#quickmenu button.on { color:#0d1020; background:#e3cf8e; border-color:#e3cf8e; font-weight:bold; }

/* ---------- 타이틀 화면 ---------- */
#titlescreen { position:absolute; inset:0; z-index:30; display:flex; }
#titlescreen.hide { display:none; }
#title-art { position:absolute; inset:0; }
#title-inner { position:relative; z-index:2; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px;
  background:radial-gradient(ellipse at 50% 60%, rgba(2,4,12,.1), rgba(2,4,12,.55)); }
#game-title { text-align:center; animation:titleFloat 6s ease-in-out infinite alternate; }
@keyframes titleFloat { 0%{transform:translateY(0)} 100%{transform:translateY(-8px)} }
.gt-sub { font-size:14px; letter-spacing:.6em; padding-left:.6em; color:#9fb0d8; margin-bottom:14px; }
.gt-main { font-family:'Nanum Myeongjo', serif; font-weight:800; font-size:clamp(34px, 7vw, 64px); letter-spacing:.1em;
  color:#f6f0dd; text-shadow:0 0 30px rgba(255,230,160,.25), 0 4px 24px rgba(0,0,20,.7); }
.gt-eng { font-size:12px; letter-spacing:.52em; padding-left:.52em; color:#c9b370; margin-top:16px; }
#title-menu { display:flex; flex-direction:column; gap:12px; width:min(300px, 76%); }
#title-menu button { font-family:inherit; font-size:16.5px; letter-spacing:.2em; padding-left:.2em; color:#e8e0c8; padding:13px 0;
  background:rgba(10,16,36,.55); border:1px solid rgba(201,179,112,.35); border-radius:10px; cursor:pointer; transition:all .2s; backdrop-filter:blur(3px); }
#title-menu button:hover:not(:disabled) { background:rgba(50,58,100,.6); border-color:#e3cf8e; color:#fff; transform:translateY(-2px); }
#title-menu button:disabled { opacity:.35; cursor:default; }
#title-foot { font-size:12px; color:#8891ad; letter-spacing:.05em; }

/* ---------- 컷씬 ---------- */
#cutscene { position:absolute; inset:0; z-index:40; display:none; background:#000; }
#cutscene.show { display:block; }
#cut-art { position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease; }
#cut-art.show { opacity:1; }
#cut-caption { position:absolute; left:50%; transform:translateX(-50%); bottom:9%; width:min(860px,90%); text-align:center; z-index:3;
  font-family:'Nanum Myeongjo', serif; font-size:clamp(17px,2.6vw,24px); line-height:1.9; color:#f2ecdd;
  text-shadow:0 2px 14px rgba(0,0,10,.9); opacity:0; transition:opacity 1s ease; word-break:keep-all; }
#cut-caption.show { opacity:1; }
#cut-skip { position:absolute; top:16px; right:20px; z-index:4; font-size:13px; color:#a8a290; cursor:pointer; padding:6px 12px;
  border:1px solid rgba(200,190,150,.25); border-radius:8px; background:rgba(0,0,0,.3); }
#cut-skip:hover { color:#ffe9b0; }
.credits-roll { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; z-index:2; }
.credits-inner { text-align:center; font-family:'Nanum Myeongjo', serif; color:#e8e0c8; font-size:clamp(15px,2vw,19px); line-height:2.6;
  animation:creditsUp linear forwards; }
.credits-inner h2 { font-size:clamp(24px,4vw,38px); letter-spacing:.15em; margin:30px 0 8px; color:#f6f0dd; }
.credits-inner .cr-role { font-size:13px; letter-spacing:.4em; color:#c9b370; margin-top:34px; }
@keyframes creditsUp { 0%{transform:translateY(100%)} 100%{transform:translateY(-105%)} }

/* ---------- 모달 ---------- */
.modal { position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; background:rgba(2,3,8,.72); }
.modal.show { display:flex; }
.modal-box { width:min(760px, 94%); max-height:88vh; overflow-y:auto; background:linear-gradient(180deg,#141a30,#0c1022);
  border:1px solid rgba(201,179,112,.4); border-radius:16px; padding:28px 30px; box-shadow:0 30px 80px rgba(0,0,0,.7); }
.modal-box.wide { width:min(900px, 96%); }
.modal-box.small { width:min(420px, 90%); text-align:center; }
.modal-title { font-family:'Nanum Myeongjo', serif; font-size:22px; color:#f4eedd; letter-spacing:.2em; margin-bottom:20px; text-align:center; }
.modal-close { display:block; margin:22px auto 0; font-family:inherit; font-size:14px; color:#d8cfb4; background:rgba(255,255,255,.06);
  border:1px solid rgba(201,179,112,.35); border-radius:8px; padding:9px 34px; cursor:pointer; }
.modal-close:hover { color:#ffe9b0; border-color:#c9b370; }
.modal-tabs { display:flex; gap:8px; justify-content:center; margin-bottom:18px; }
.modal-tabs .tab { font-family:inherit; font-size:13.5px; padding:7px 20px; border-radius:8px; cursor:pointer;
  background:transparent; border:1px solid rgba(201,179,112,.3); color:#b9b096; }
.modal-tabs .tab.on { background:#e3cf8e; color:#0d1020; border-color:#e3cf8e; font-weight:bold; }

#slotgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:10px; }
.slot { border:1px solid rgba(201,179,112,.25); border-radius:10px; padding:12px 14px; cursor:pointer; background:rgba(255,255,255,.03);
  transition:all .15s; min-height:86px; position:relative; }
.slot:hover { border-color:#e3cf8e; background:rgba(227,207,142,.08); }
.slot .sl-no { font-size:11px; color:#c9b370; letter-spacing:.15em; }
.slot .sl-ch { font-size:14.5px; color:#f2ecdd; margin:5px 0 3px; }
.slot .sl-time { font-size:11px; color:#8891ad; }
.slot .sl-txt { font-size:11.5px; color:#a9a289; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.slot.empty { opacity:.55; } .slot.empty .sl-ch { color:#6b7086; }
.slot .sl-del { position:absolute; top:8px; right:9px; font-size:11px; color:#8d6b6b; cursor:pointer; padding:2px 6px; border-radius:4px; }
.slot .sl-del:hover { color:#ff9d9d; background:rgba(255,120,120,.12); }

.code-desc { font-size:13.5px; color:#b9c0d6; line-height:1.7; margin-bottom:12px; word-break:keep-all; }
#codearea { width:100%; height:110px; background:rgba(0,0,0,.35); color:#cfe0a8; border:1px solid rgba(201,179,112,.3); border-radius:8px;
  font-family:Consolas, monospace; font-size:12px; padding:10px; resize:none; }
.code-btns { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.code-btns button { font-family:inherit; font-size:13px; color:#e8e0c8; background:rgba(255,255,255,.06); border:1px solid rgba(201,179,112,.35);
  border-radius:8px; padding:8px 16px; cursor:pointer; }
.code-btns button:hover { color:#ffe9b0; border-color:#c9b370; }

.cfg-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 4px; border-bottom:1px solid rgba(255,255,255,.06); font-size:15px; color:#d8d4c4; }
.cfg-opts { display:flex; gap:6px; }
.cfg-opts button { font-family:inherit; font-size:13px; padding:7px 15px; border-radius:8px; cursor:pointer;
  background:transparent; border:1px solid rgba(201,179,112,.3); color:#b9b096; }
.cfg-opts button.on { background:#e3cf8e; color:#0d1020; border-color:#e3cf8e; font-weight:bold; }
.cfg-note { font-size:12px; color:#8891ad; margin-top:16px; text-align:center; line-height:1.8; }

#logbody { max-height:56vh; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:4px 6px; }
.log-item { font-size:14.5px; line-height:1.75; color:#cfd4e4; word-break:keep-all; }
.log-item b { color:#ffe9b0; font-weight:normal; margin-right:10px; }
.log-item.log-letter { color:#d9c9a0; }

#confirm-text { font-size:15.5px; line-height:1.8; color:#e8e0c8; margin-bottom:20px; word-break:keep-all; }
.confirm-btns { display:flex; gap:10px; justify-content:center; }
.confirm-btns button { font-family:inherit; font-size:14.5px; padding:10px 34px; border-radius:8px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(201,179,112,.35); color:#e8e0c8; }
.confirm-btns button:hover { border-color:#e3cf8e; color:#ffe9b0; }

/* ---------- 토스트 ---------- */
#toast { position:fixed; left:50%; transform:translateX(-50%) translateY(20px); bottom:26px; z-index:60; background:rgba(14,20,40,.92);
  border:1px solid rgba(201,179,112,.5); color:#ffe9b0; font-size:13.5px; padding:10px 24px; border-radius:24px; opacity:0;
  transition:all .35s ease; pointer-events:none; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- 배경 공통 (SVG 애니메이션) ---------- */
.tw { animation:twinkle ease-in-out infinite alternate; }
@keyframes twinkle { 0%{opacity:.15} 100%{opacity:1} }
.wave-a { animation:waveMove 7s ease-in-out infinite alternate; }
.wave-b { animation:waveMove 9s ease-in-out infinite alternate-reverse; }
.wave-c { animation:waveMove 12s ease-in-out infinite alternate; }
@keyframes waveMove { 0%{transform:translateX(-26px)} 100%{transform:translateX(26px)} }
.cloud-drift { animation:cloudDrift 60s linear infinite; }
@keyframes cloudDrift { 0%{transform:translateX(-6%)} 100%{transform:translateX(8%)} }
.beam-rot { transform-origin:center; animation:beamRot 9s linear infinite; }
@keyframes beamRot { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
.glow-pulse { animation:glowPulse 3.2s ease-in-out infinite alternate; }
@keyframes glowPulse { 0%{opacity:.35} 100%{opacity:.95} }
.bob { animation:bobUp 4.5s ease-in-out infinite alternate; }
@keyframes bobUp { 0%{transform:translateY(0)} 100%{transform:translateY(-7px)} }
.sway { transform-origin:bottom center; animation:swayLR 5.5s ease-in-out infinite alternate; }
@keyframes swayLR { 0%{transform:rotate(-2.4deg)} 100%{transform:rotate(2.4deg)} }
.lantern-f { animation:lanternFloat 8s ease-in-out infinite alternate; }
@keyframes lanternFloat { 0%{transform:translateY(0)} 100%{transform:translateY(-30px)} }

/* ---------- 반응형 ---------- */
@media (max-width:700px) {
  #dialog { padding:16px 18px 22px; min-height:118px; bottom:1.6%; }
  #textbox { line-height:1.75; }
  .portrait { height:78%; min-width:250px; width:56%; }
  .portrait.pos-c { margin-left:-28%; }
  #quickmenu { gap:4px; } #quickmenu button { font-size:11px; padding:5px 7px; }
  #letterpaper { padding:30px 26px 26px; }
  .cfg-row { flex-direction:column; align-items:flex-start; gap:8px; }
}