/* ── 토큰 ─────────────────────────────────────── */
:root{
  --bg:#FBF7F2; --surface:#FFFFFF; --ink:#1E1B22; --ink-2:#5C5563; --ink-3:#8F8798;
  --line:#EBE3DA; --primary:#6D5BD0; --primary-ink:#FFFFFF;
  --good:#E2557B; --neutral:#6D5BD0; --caution:#C97A1E;
  --good-bg:#FDEDF1; --neutral-bg:#EFEBFC; --caution-bg:#FBF0DF;
  --r-s:10px; --r-m:16px; --r-l:22px;
  --shadow:0 1px 2px rgba(30,27,34,.05), 0 8px 24px rgba(30,27,34,.06);
  --font:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo",
         "Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#141217; --surface:#1E1B23; --ink:#F3EFF6; --ink-2:#B4ADBD; --ink-3:#837B8E;
    --line:#2E2935; --good-bg:#33202A; --neutral-bg:#262048; --caution-bg:#332714;
    --good:#F2809E; --neutral:#A292F0; --caution:#E0A852;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}   /* .myttI 의 display:flex 가 hidden 을 이겨서 필요하다 */
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
  line-height:1.65; letter-spacing:-.01em; word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
button,input{font:inherit; color:inherit}

#app{max-width:480px; margin:0 auto; padding:0 20px 64px}

/* ── 스텝 전환 ───────────────────────────────── */
.step{display:none; animation:rise .34s cubic-bezier(.2,.7,.3,1) both}
.step.is-active{display:block}
@keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .step{animation:none} }

/* ── 히어로 ─────────────────────────────────── */
.hero{padding:56px 4px 28px}
.hero__kicker{
  margin:0 0 12px; font-size:12px; font-weight:700; letter-spacing:.14em;
  color:var(--primary); text-transform:uppercase;
}
.hero__title{margin:0; font-size:38px; line-height:1.22; font-weight:800; letter-spacing:-.035em}
.hero__sub{margin:14px 0 0; color:var(--ink-2); font-size:16px}

/* ── 카드/폼 ────────────────────────────────── */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:22px; box-shadow:var(--shadow);
}
.field{display:block; margin-bottom:18px}
.field__label{display:block; margin-bottom:8px; font-size:13px; font-weight:600; color:var(--ink-2)}
.input,.yearpick__input{
  width:100%; padding:14px 16px; background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-m); font-size:17px;
}
.input:focus-visible,.yearpick__input:focus-visible{outline:2px solid var(--primary); outline-offset:1px}

.yearpick{display:flex; align-items:center; gap:8px}
.yearpick__input{min-width:0; text-align:center; font-size:24px; font-weight:700; letter-spacing:.02em;
  -moz-appearance:textfield}
.yearpick__input::-webkit-outer-spin-button,
.yearpick__input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.yearpick__step{
  flex:0 0 52px; height:52px; border:1px solid var(--line); border-radius:var(--r-m);
  background:var(--bg); font-size:22px; font-weight:600; color:var(--ink-2); cursor:pointer;
}
.yearpick__step:active{background:var(--line)}

.check{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-2); cursor:pointer}
.check input{width:18px; height:18px; accent-color:var(--primary)}
.reveal{margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}
.note{
  margin:10px 0 0; padding:10px 12px; background:var(--neutral-bg); color:var(--ink-2);
  border-radius:var(--r-s); font-size:13px; line-height:1.55;
}

.myttI{
  display:flex; align-items:center; gap:14px; margin-top:18px; padding:14px;
  background:var(--neutral-bg); border-radius:var(--r-m);
}
.myttI__img{width:56px; height:56px; object-fit:contain}
.myttI__label{margin:0; font-size:12px; color:var(--ink-3)}
.myttI__name{margin:2px 0 0; font-size:20px; font-weight:800}

.btn{
  width:100%; margin-top:18px; padding:16px; border:0; border-radius:var(--r-m);
  font-size:16px; font-weight:700; cursor:pointer; transition:opacity .15s, transform .1s;
}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.38; cursor:default}
.btn--primary{background:var(--primary); color:var(--primary-ink)}
.btn--ghost{background:transparent; color:var(--ink-2); border:1px solid var(--line)}
.legal{margin:16px 4px 0; font-size:12px; color:var(--ink-3); text-align:center}

/* ── 스텝바 ─────────────────────────────────── */
.stepbar{display:flex; align-items:center; gap:12px; padding:20px 0 18px}
.stepbar__back{
  flex:0 0 40px; height:40px; border:1px solid var(--line); border-radius:50%;
  background:var(--surface); font-size:18px; cursor:pointer;
}
.stepbar__title{font-size:17px; font-weight:700}

/* ── 12지신 그리드 ──────────────────────────── */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.tile{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 6px 12px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); cursor:pointer; transition:border-color .15s, transform .1s;
}
.tile:hover{border-color:var(--primary)}
.tile:active{transform:scale(.97)}
.tile img{width:60px; height:60px; object-fit:contain}
.tile__name{font-size:13px; font-weight:600}
.tile__years{font-size:10px; color:var(--ink-3); letter-spacing:-.02em}

/* ── 결과 ───────────────────────────────────── */
.stage{
  position:relative; display:flex; align-items:flex-end; justify-content:center; gap:0;
  min-height:190px; margin:4px 0 20px;
}
.stage__char{width:44%; max-width:170px; height:auto; object-fit:contain}
.stage__char--a{transform:translateX(9%) scaleX(-1)}
.stage__char--b{transform:translateX(-9%)}
.stage__badge{
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  padding:7px 16px; border-radius:999px; font-size:14px; font-weight:800; white-space:nowrap;
  background:var(--neutral); color:#fff; box-shadow:var(--shadow);
}
[data-tier="good"] .stage__badge{background:var(--good)}
[data-tier="caution"] .stage__badge{background:var(--caution)}

.trait{
  margin:0 0 12px; font-size:14px; line-height:1.6; text-align:center;
  color:var(--ink-3); letter-spacing:-.015em;
}
.headline{margin:0 0 10px; font-size:27px; line-height:1.32; font-weight:800; letter-spacing:-.03em; text-align:center}
.summary{margin:0 0 16px; color:var(--ink-2); font-size:15.5px; text-align:center}
.tags{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0 0 26px; padding:0; list-style:none}
.tags li{
  padding:5px 11px; border-radius:999px; background:var(--neutral-bg);
  color:var(--neutral); font-size:12.5px; font-weight:600;
}
[data-tier="good"] .tags li{background:var(--good-bg); color:var(--good)}
[data-tier="caution"] .tags li{background:var(--caution-bg); color:var(--caution)}

.panel{
  padding:16px 18px; margin-bottom:10px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-m);
}
.panel__label{margin:0 0 6px; font-size:12px; font-weight:700; color:var(--ink-3); letter-spacing:.02em}
.panel__body{margin:0; font-size:15px; line-height:1.7}
.panel--love{background:var(--good-bg); border-color:transparent}
.panel--love .panel__label{color:var(--good)}
.panel--tip{background:var(--neutral-bg); border-color:transparent}
.panel--tip .panel__label{color:var(--neutral)}
.panel--muted{background:transparent}
.actions{margin-top:26px}

/* ── 공유 시트 ──────────────────────────────── */
.sheet{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(20,18,23,.78); backdrop-filter:blur(6px);
}
.sheet[hidden]{display:none}
.sheet__panel{width:100%; max-width:320px}
#share-canvas{
  width:100%; height:auto; border-radius:var(--r-m); display:block;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.sheet__actions{display:flex; gap:10px}
.sheet__actions .btn{flex:1}

/* ── 신을 부르는 중 ─────────────────────────── */
.summon{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:76vh; gap:22px;
}
.summon__img{width:180px; height:auto; animation:bob 1.6s ease-in-out infinite}
.summon__text{margin:0; color:var(--ink-3); font-size:15px; letter-spacing:.02em}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){ .summon__img{animation:none} }

/* ── 오늘의 운세 ────────────────────────────── */
.todaybar{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:26px 2px 10px}
.todaybar__date{margin:0; font-size:12px; font-weight:600; color:var(--ink-3); letter-spacing:.04em}
.todaybar__who{margin:3px 0 0; font-size:19px; font-weight:800; letter-spacing:-.02em}
.todaybar__change{
  flex:0 0 auto; padding:8px 12px; border:1px solid var(--line); border-radius:999px;
  background:transparent; color:var(--ink-3); font-size:12px; cursor:pointer;
}

/* 신이 서 있는 자리. 뒤에 은은한 기운을 깐다. */
.shrine{position:relative; display:flex; justify-content:center; padding:12px 0 4px; margin-bottom:6px}
.shrine::before{
  content:''; position:absolute; top:14%; left:50%; transform:translateX(-50%);
  width:250px; height:250px; border-radius:50%; background:var(--glow);
  filter:blur(38px); z-index:0;
}
.shrine__god{position:relative; z-index:1; width:224px; max-width:64%; height:auto}
.shrine__badge{
  position:absolute; z-index:2; left:50%; bottom:0; transform:translateX(-50%);
  padding:8px 20px; border-radius:999px; font-size:15px; font-weight:800;
  background:var(--accent); color:#fff; box-shadow:var(--shadow);
}

/* 등급이 곧 신의 기분이다. 표정·배지·기운 색이 같이 움직인다. */
[data-grade]{--accent:var(--neutral); --glow:rgba(109,91,208,.20)}
[data-grade="대길"]{--accent:#E2557B; --glow:rgba(226,85,123,.24)}
[data-grade="길"]{--accent:#D9789B; --glow:rgba(217,120,155,.20)}
[data-grade="흉"]{--accent:#C97A1E; --glow:rgba(201,122,30,.18)}
[data-grade="대흉"]{--accent:#8C7C93; --glow:rgba(140,124,147,.20)}

.speech{margin:22px 2px 24px}
.speech p{
  margin:0 0 12px; font-size:18px; line-height:1.75; letter-spacing:-.02em;
  text-align:center; font-weight:500;
}
.speech p:first-child{font-size:21px; font-weight:800; color:var(--ink)}
.speech p:not(:first-child){color:var(--ink-2)}
/* 선언 → 설명 → 당부. 마지막은 내 신이 나한테 하는 말이라 다시 힘을 준다. */
.speech p:last-child{margin-bottom:0; color:var(--ink); font-weight:600}

.meta{
  display:flex; gap:10px; margin:0 0 4px; padding:0;
}
.meta div{
  flex:1; padding:12px 14px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-m);
}
.meta dt{margin:0 0 3px; font-size:11px; color:var(--ink-3)}
.meta dd{margin:0; font-size:15px; font-weight:700}
.meta dd small{margin-left:5px; font-size:11px; font-weight:500; color:var(--ink-3)}