:root{
  --bg1:#ffd9e8; --bg2:#ffb6d2; --accent:#ff5c8a; --accent-d:#e23e6e;
  --ink:#5a2a3a; --card:#ffffff; --muted:#9b6b7d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; min-height:100vh;
  display:flex; justify-content:center;
  /* 가운데 정렬하되, 내용이 화면보다 길면 위가 잘리지 않게(safe) */
  align-items:center;
  align-items:safe center;
  font-family:"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",system-ui,sans-serif;
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  color:var(--ink); overflow-x:hidden; padding:24px;
}
.card{
  position:relative; z-index:1;
  background:var(--card); border-radius:28px;
  padding:48px 36px; max-width:560px; width:100%;
  text-align:center; box-shadow:0 18px 50px rgba(226,62,110,.25);
  animation:pop .5s ease;
}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
h1{font-size:2rem; line-height:1.45; margin:0 0 10px}
.sub{color:var(--muted); margin:0 0 28px}

/* buttons */
.btn{
  display:inline-block; border:none; cursor:pointer; text-decoration:none;
  font-size:1.15rem; font-weight:800; padding:16px 30px; border-radius:999px;
  margin:8px; font-family:inherit; transition:transform .12s, box-shadow .12s;
}
.btn:active{transform:scale(.96)}
.btn-yes{background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(255,92,138,.45)}
.btn-yes:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(255,92,138,.55)}
.btn-no{background:#fff; color:var(--accent-d); border:2px solid var(--accent)}
.btn-row{display:flex; gap:8px; justify-content:center; align-items:center; min-height:74px; flex-wrap:wrap}
/* 도망가는 버튼: left/top 변화에 transition을 줘서 미끄러지듯 이동 */
#noBtn{position:relative; z-index:60; transition:left .18s ease-out, top .18s ease-out}

/* time page */
.chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:8px 0 18px}
.chip{
  border:1.5px solid var(--accent); background:#fff; color:var(--accent-d);
  border-radius:999px; padding:9px 16px; font-weight:700; cursor:pointer;
  font-family:inherit; font-size:.98rem; transition:transform .1s, background .1s;
}
.chip:hover{transform:translateY(-1px); background:#ffe0ea}
.chip.active{background:var(--accent); color:#fff}
.field{margin:6px 0}
.dt-input{
  font-family:inherit; font-size:1.15rem; padding:14px 16px; width:100%; max-width:320px;
  border:2px solid #f0b9cc; border-radius:16px; color:var(--ink); background:#fff; outline:none;
}
.dt-input:focus{border-color:var(--accent)}
.hint-msg{color:var(--accent-d); font-weight:700; min-height:22px; margin:8px 0 4px}

/* dice page */
.dice{
  font-size:96px; cursor:pointer; user-select:none; display:inline-block; line-height:1;
  filter:drop-shadow(0 10px 14px rgba(226,62,110,.3)); transition:transform .15s;
}
.dice:hover{transform:scale(1.06)}
.dice.rolling{animation:roll .7s ease-in-out}
@keyframes roll{
  0%{transform:rotate(0) scale(1)}
  25%{transform:rotate(180deg) scale(1.15)}
  50%{transform:rotate(360deg) scale(.92)}
  75%{transform:rotate(540deg) scale(1.12)}
  100%{transform:rotate(720deg) scale(1)}
}
.result{margin-top:24px; min-height:96px; display:flex; align-items:center; justify-content:center}
.result-card{
  width:100%; background:linear-gradient(135deg,#fff,#ffe9f1);
  border:2px dashed var(--accent); border-radius:20px; padding:22px; animation:pop .4s ease;
}
.result-emoji{font-size:48px; line-height:1}
.result-text{font-size:1.5rem; font-weight:800; margin-top:8px}
.hint{color:var(--muted); font-size:.95rem; margin:0}

/* floating hearts */
.heart{
  position:fixed; bottom:-40px; z-index:0; pointer-events:none; opacity:.75;
  animation:rise linear forwards;
}
@keyframes rise{to{transform:translateY(-112vh) rotate(40deg); opacity:0}}

/* admin */
.admin{max-width:660px; text-align:left}
.admin h1, .admin .sub{text-align:center}
.row{display:flex; gap:8px; margin-bottom:8px; align-items:center}
.row input{font-family:inherit; font-size:1rem; padding:11px 12px; border:1.5px solid #f0b9cc; border-radius:12px; outline:none}
.row input:focus{border-color:var(--accent)}
.row input.emoji{width:64px; text-align:center}
.row input.text{flex:1; min-width:0}
.icon-btn{border:none; background:#ffe0ea; color:var(--accent-d); border-radius:12px; padding:11px 14px; cursor:pointer; font-weight:800; font-family:inherit; font-size:1rem; text-decoration:none; display:inline-block}
.icon-btn:hover{background:#ffd0e0}
.toolbar{display:flex; gap:8px; flex-wrap:wrap; margin:18px 0; align-items:center}
.note{background:#fff6fa; border:1px solid #ffd0e0; border-radius:14px; padding:14px 16px; font-size:.92rem; color:#7a4658; line-height:1.7}
.note code{background:#ffe0ea; padding:1px 6px; border-radius:6px}
.backlink{display:inline-block; margin-top:16px; color:var(--accent-d); text-decoration:none; font-weight:700}
.backlink:hover{text-decoration:underline}

/* photos & sub-pages */
.photo{max-width:100%; width:320px; border-radius:18px; margin:4px auto 18px; display:block; box-shadow:0 8px 22px rgba(226,62,110,.25)}
.extra-nav{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:18px}
.extra-link{color:var(--accent-d); text-decoration:none; font-weight:700; font-size:.95rem; border:1.5px solid #ffd0e0; border-radius:999px; padding:7px 14px}
.extra-link:hover{background:#ffe0ea}
.page-text{font-size:1.05rem; line-height:1.8; color:var(--ink); white-space:pre-wrap; text-align:left; margin:0 0 16px}
.page-caption{color:var(--muted); font-size:.9rem; margin:-10px 0 18px; text-align:center}

/* admin extras */
.section{border:1px solid #ffd0e0; border-radius:16px; padding:16px; margin:14px 0; text-align:left}
.section h3{margin:0 0 6px; font-size:1.1rem}
.section label{display:block; font-weight:700; font-size:.9rem; margin:10px 0 4px; color:#7a4658}
.section input[type=text], .section textarea{width:100%; font-family:inherit; font-size:1rem; padding:10px 12px; border:1.5px solid #f0b9cc; border-radius:12px; outline:none}
.section textarea{min-height:90px; resize:vertical}
.section input:focus, .section textarea:focus{border-color:var(--accent)}
.section input[type=file]{margin-top:6px; font-family:inherit}
.muted{color:var(--muted); font-size:.85rem; line-height:1.6}
.block{border:1px dashed #f0b9cc; border-radius:12px; padding:10px; margin:8px 0}
.block-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-weight:700; color:#7a4658; font-size:.9rem}
.thumb{max-width:170px; border-radius:10px; display:block; margin:6px 0}
.icon-btn.danger{background:#ffe0e6; color:#c01f4f}
.icon-btn.danger:hover{background:#ffd0d8}
.savebar{position:sticky; bottom:0; background:#fff; padding:14px 0 4px; border-top:1px solid #ffd0e0; display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px}
.status{font-weight:700; font-size:.92rem}
.checkbox-row{display:flex; align-items:center; gap:8px; margin-top:8px}
.checkbox-row input{width:auto}
details.tokenbox{border:1px solid #ffd0e0; border-radius:14px; padding:12px 14px; margin:10px 0; background:#fff6fa}
details.tokenbox summary{cursor:pointer; font-weight:800; color:var(--accent-d)}
details.tokenbox a{color:var(--accent-d)}
details.tokenbox input[type=text]{width:100%; font-family:inherit; font-size:1rem; padding:10px 12px; border:1.5px solid #f0b9cc; border-radius:12px; outline:none; margin-top:4px}

/* flow container & steps */
#app{width:100%; display:flex; justify-content:center}
.step-card.disabled{opacity:.5}
.icon-btn:disabled{opacity:.4; cursor:default}