/* ─────────────────────────────────────────────
   심심할 땐 — 공통 스타일
   색이나 모양을 바꾸고 싶으면 이 파일만 고치면
   이 파일을 쓰는 모든 페이지가 같이 바뀝니다.
   ───────────────────────────────────────────── */

:root{
  --ink:#16110C;
  --paper:#EDE6FA;
  --card:#FFFFFF;
  --pink:#FF4D9D;
  --yellow:#FFD93D;
  --blue:#3D7BFF;
  --mint:#25D6A4;
  --line:4px solid var(--ink);
  --shadow:6px 6px 0 var(--ink);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
  background-color:var(--paper);
  background-image:radial-gradient(var(--ink) 1.2px, transparent 1.2px);
  background-size:22px 22px;
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:620px;margin:0 auto;padding:20px 18px 60px}
.wrap.wide{max-width:760px}

/* ── 뒤로가기 ─────────────────────────── */
.back{
  display:inline-block;text-decoration:none;color:inherit;
  font-size:13px;font-weight:700;background:var(--card);
  border:3px solid var(--ink);border-radius:999px;padding:5px 14px;
  box-shadow:3px 3px 0 var(--ink);margin-bottom:24px;
}
.back:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* ── 제목 ─────────────────────────────── */
h1{
  font-family:'Black Han Sans',sans-serif;font-weight:400;
  font-size:clamp(30px,9vw,46px);line-height:1.15;letter-spacing:-1.5px;
}
.sub{margin-top:10px;font-size:14px;font-weight:500;opacity:.75}
.hl{background:linear-gradient(transparent 58%, var(--pink) 58%, var(--pink) 92%, transparent 92%)}

.eyebrow{
  display:inline-block;font-size:12px;font-weight:900;letter-spacing:1px;
  background:var(--ink);color:var(--paper);padding:4px 12px;border-radius:999px;
  margin-bottom:14px;
}

/* ── 패널(카드) ───────────────────────── */
.panel{
  background:var(--card);border:var(--line);border-radius:22px;
  box-shadow:var(--shadow);padding:22px 18px;margin-top:24px;
}
.panel-title{
  font-family:'Black Han Sans',sans-serif;font-size:17px;margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}

/* ── 버튼 ─────────────────────────────── */
.btn{
  width:100%;cursor:pointer;font-family:'Black Han Sans',sans-serif;font-size:18px;
  border:var(--line);border-radius:18px;padding:15px;box-shadow:var(--shadow);
  color:inherit;background:var(--yellow);text-align:center;text-decoration:none;
  display:block;
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--shadow)}
.btn:focus-visible{outline:4px solid var(--blue);outline-offset:4px}
.btn.mint{background:var(--mint)}
.btn.white{background:var(--card)}
.btn.pink{background:var(--pink)}
.btn-row{display:flex;gap:10px;margin-top:12px}
.btn-row .btn{font-size:15px;padding:13px}

/* ── 입력칸 ───────────────────────────── */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:900;opacity:.65;margin-bottom:6px}
input[type=text],input[type=number],input[type=date],select,textarea{
  width:100%;font-family:inherit;font-size:16px;font-weight:700;color:inherit;
  background:var(--paper);border:3px solid var(--ink);border-radius:14px;
  padding:12px 14px;
}
textarea{resize:vertical;min-height:110px;line-height:1.7}
input:focus,select:focus,textarea:focus{outline:4px solid var(--blue);outline-offset:2px}

/* ── 결과 ─────────────────────────────── */
.result-card{
  background:var(--card);border:var(--line);border-radius:24px;
  box-shadow:var(--shadow);padding:30px 22px;text-align:center;
}
.emoji{font-size:64px;line-height:1}
.big{font-family:'Black Han Sans',sans-serif;font-size:44px;line-height:1.1;letter-spacing:-1px;margin-top:6px}
.nickname{
  display:inline-block;font-family:'Black Han Sans',sans-serif;font-size:20px;
  background:var(--yellow);border:3px solid var(--ink);border-radius:999px;
  padding:5px 18px;margin:12px 0 16px;
}
.desc{font-size:15px;font-weight:500;text-align:left}
.desc p+p{margin-top:10px}

/* ── 통계 상자 ────────────────────────── */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.stat{border:3px solid var(--ink);border-radius:14px;padding:10px 12px;background:var(--paper)}
.stat .label{font-size:11px;font-weight:900;opacity:.65}
.stat .value{font-family:'Black Han Sans',sans-serif;font-size:22px;line-height:1.2;letter-spacing:-.5px}
.stat.wide{grid-column:1 / -1}

/* ── 진행바 ───────────────────────────── */
.bar{flex:1;height:16px;background:var(--card);border:3px solid var(--ink);border-radius:999px;overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--pink);transition:width .3s ease}
.progress-row{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.step{font-family:'Black Han Sans',sans-serif;font-size:15px;white-space:nowrap}

/* ── 선택지 버튼 ──────────────────────── */
.choice{
  display:block;width:100%;text-align:left;cursor:pointer;
  font-family:'Noto Sans KR',sans-serif;font-size:16px;font-weight:700;line-height:1.5;
  background:var(--card);border:var(--line);border-radius:18px;
  padding:18px 20px;box-shadow:var(--shadow);margin-bottom:14px;color:inherit;
  transition:transform .08s ease, box-shadow .08s ease, background .08s ease;
}
.choice:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink);background:var(--yellow)}
.choice:focus-visible{outline:4px solid var(--blue);outline-offset:4px}

/* ── 태그 ─────────────────────────────── */
.tag{font-size:11px;font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:1px 9px}
.meta{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}

.note{margin-top:12px;font-size:11px;opacity:.55;line-height:1.5}
.hidden{display:none!important}

/* ── 토스트 ───────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,120%);
  background:var(--ink);color:var(--paper);font-size:14px;font-weight:700;
  padding:12px 22px;border-radius:999px;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.2);z-index:50;
}
.toast.on{transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}