:root{
  --bg:#f5f4f0; --surface:#fbfbf9; --panel:#ffffff; --panel-soft:#f7f6f2;
  --ink:#1c1c1a; --ink-hover:#3a3935; --ink-2:#55534d; --sub:#7a776f; --muted:#8a877f;
  --line:#e3e1db; --line-2:#dcdad3; --line-3:#efeee9; --hover:#efeee9; --soft:#f3f2ee; --track:#ebe9e3;
  --accent:#6a3df5;
  --night:#1b1538; --night-2:#2a2152; --gold:#f5b800; --gold-soft:#ffe9a8;
  --font:"IBM Plex Sans KR",sans-serif; --mono:"JetBrains Mono",monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
.mono-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.app{min-height:calc(100vh - 48px);display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:14px;min-width:0;flex-wrap:wrap}
.home{font-size:13px;color:var(--ink-2);text-decoration:none}
.home:hover{color:var(--ink)}
.brand-title{font-size:17px;font-weight:700;letter-spacing:-.01em}
.btn{height:36px;padding:0 14px;background:transparent;border:1px solid var(--line-2);border-radius:999px;font-size:13px;cursor:pointer}
.btn:hover{background:var(--hover)}
.btn--solid{background:var(--ink);color:#fff;border:none;font-weight:500}
.btn--solid:hover{background:var(--ink-hover)}
.text-input{height:40px;padding:0 12px;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;font:inherit;font-size:14px;color:var(--ink)}
@media (max-width:640px){ .topbar{padding:14px 16px} }

/* ---------- 운세 ---------- */
.main{flex:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0;align-items:stretch}
.col{padding:44px 44px 56px;min-width:0;display:flex;flex-direction:column;gap:22px}
.col--cookie{border-left:1px solid var(--line);background:var(--panel);align-items:stretch}
.sec-head{display:flex;flex-direction:column;gap:6px}
.sec-title{margin:0;font-size:30px;font-weight:700;letter-spacing:-.03em}
.sec-desc{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}

.form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:13px;color:var(--ink-2)}
.field .text-input{width:100%;height:46px;background:#fff;font-size:15px}
.text-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.go{height:46px;padding:0 24px;background:var(--accent);color:#fff;border:none;border-radius:999px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,transform .1s}
.go:hover{background:#5a2fe0}
.go:active{transform:scale(.97)}
.form-msg{margin:-10px 0 0;font-size:13px;color:#d6402a;min-height:0}
.form-msg:empty{display:none}

/* 결과 카드: 밤하늘 */
.result{position:relative;overflow:hidden;border-radius:20px;padding:28px;color:#f3efff;background:
  radial-gradient(1.5px 1.5px at 12% 18%,#fff8 50%,transparent 51%),
  radial-gradient(1px 1px at 78% 12%,#fff9 50%,transparent 51%),
  radial-gradient(1.5px 1.5px at 88% 62%,#fff6 50%,transparent 51%),
  radial-gradient(1px 1px at 32% 82%,#fff7 50%,transparent 51%),
  radial-gradient(1px 1px at 58% 40%,#fff5 50%,transparent 51%),
  radial-gradient(120% 80% at 100% 0%,#4b2fb3 0%,transparent 55%),
  linear-gradient(160deg,var(--night-2),var(--night));
  box-shadow:0 24px 60px rgba(40,24,110,.25);animation:rise .55s cubic-bezier(.2,.9,.3,1) both}
.result .mono-label{color:#b7aee0}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.result-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.result-name{margin:6px 0 0;font-size:22px;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.total{display:flex;align-items:baseline;gap:2px;color:var(--gold)}
.total-num{font-family:var(--mono);font-size:64px;font-weight:500;line-height:.9;letter-spacing:-.04em}
.total-unit{font-size:16px;font-weight:700}
.total-stars{margin-top:14px;font-size:22px;letter-spacing:4px;color:var(--gold)}
.total-stars .off{color:#ffffff2a}
.total-text{margin:6px 0 0;font-size:14px;line-height:1.6;color:#d9d2f7}

.cats{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;border-top:1px solid #ffffff1f}
.cat{display:grid;grid-template-columns:52px auto minmax(0,1fr);align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid #ffffff1f;animation:rise .5s both;animation-delay:calc(var(--i) * 90ms + 150ms)}
.cat-name{font-size:14px;font-weight:700}
.stars{font-size:16px;letter-spacing:2px;color:var(--gold);white-space:nowrap}
.stars .off{color:#ffffff2a}
.cat-text{font-size:13px;line-height:1.5;color:#d9d2f7}

.lucky{margin-top:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lucky-item{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:12px;background:#ffffff12;border:1px solid #ffffff1a;min-width:0}
.lucky-item b{font-size:15px;overflow-wrap:anywhere}
.lucky-color{display:flex;align-items:center;gap:8px}
.swatch{width:20px;height:20px;border-radius:999px;flex-shrink:0;box-shadow:0 0 0 2px #ffffff40}
.lucky-num{font-family:var(--mono);font-size:28px !important;font-weight:500;color:var(--gold);line-height:1}
.advice{margin:16px 0 0;padding:16px 18px;border-radius:12px;background:var(--gold);color:var(--night)}
.advice .mono-label{color:#6b5300}
.advice p{margin:6px 0 0;font-size:16px;font-weight:700;line-height:1.5;letter-spacing:-.01em}

.result-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:260px;padding:28px;border-radius:20px;border:1px dashed #cfc6f2;background:linear-gradient(160deg,#f4f0ff,#faf8ff);text-align:center}
.result-empty p{margin:0;font-size:14px;line-height:1.6;color:#6a5fa0}
.empty-moon{width:56px;height:56px;border-radius:999px;box-shadow:-12px 6px 0 0 var(--accent);transform:translateX(8px);opacity:.85}

/* ---------- 포춘쿠키 ---------- */
.cookie-stage{position:relative;overflow:hidden;flex:1;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:20px;background:radial-gradient(circle at 50% 45%,#fff3d1 0%,#fbf3e2 40%,var(--panel-soft) 75%);border:1px solid var(--line-3)}
.cookie{position:relative;width:220px;height:140px;padding:0;background:none;border:none;cursor:pointer;animation:bob 2.6s ease-in-out infinite}
.cookie:focus-visible{outline:2px solid var(--accent);outline-offset:10px;border-radius:20px}
.half{position:absolute;top:0;width:110px;height:140px;transition:transform .7s cubic-bezier(.2,1.2,.4,1),opacity .7s;filter:drop-shadow(0 10px 12px rgba(150,90,20,.22))}
.half--l{left:2px;transform-origin:100% 80%}
.half--r{right:2px;transform-origin:0% 80%}
.half-svg{display:block;width:100%;height:100%;overflow:visible}
.half--r .half-svg{transform:scaleX(-1)}
.ck-body{fill:url(#ckGrad)}
.ck-crease{fill:none;stroke:#a85f12;stroke-width:3;stroke-linecap:round;opacity:.55}
.ck-shine{fill:#fff;opacity:.28}
.cookie:hover .half--l{transform:rotate(-3deg)}
.cookie:hover .half--r{transform:rotate(3deg)}
.cookie.is-shaking{animation:shake .35s linear}
.cookie.is-open{animation:none;cursor:default}
.cookie.is-open .half--l{transform:translate(-70px,30px) rotate(-38deg)}
.cookie.is-open .half--r{transform:translate(70px,30px) rotate(38deg)}
.crumbs i{position:absolute;left:50%;top:60%;width:7px;height:7px;border-radius:2px;background:#d98a26;opacity:0}
.cookie.is-open .crumbs i{animation:crumb .8s ease-out forwards}
.crumbs i:nth-child(1){--x:-60px;--y:70px}.crumbs i:nth-child(2){--x:50px;--y:80px}.crumbs i:nth-child(3){--x:-20px;--y:95px}
.crumbs i:nth-child(4){--x:80px;--y:50px;width:5px;height:5px}.crumbs i:nth-child(5){--x:-90px;--y:45px;width:5px;height:5px}.crumbs i:nth-child(6){--x:15px;--y:110px;width:4px;height:4px}
@keyframes crumb{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(200deg)}}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}

.slip{position:absolute;left:50%;top:50%;width:min(300px,calc(100% - 32px));padding:18px 20px 16px;background:#fffdf7;border-radius:4px;box-shadow:0 10px 30px rgba(120,80,20,.18),0 0 0 1px #efe3c4;text-align:center;
  transform:translate(-50%,-50%) scaleX(.05) scaleY(.6);opacity:0;pointer-events:none;transition:transform .55s cubic-bezier(.2,1.3,.4,1) .25s,opacity .3s .25s}
.slip::before,.slip::after{content:"";position:absolute;top:0;bottom:0;width:6px;background:repeating-linear-gradient(180deg,#f0dfb5 0 4px,transparent 4px 8px)}
.slip::before{left:0}.slip::after{right:0}
.slip.is-show{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.slip-no{color:#c08a1a}
.slip-text{margin:8px 0 0;font-size:17px;font-weight:700;line-height:1.55;letter-spacing:-.02em;color:#3a2a08;word-break:keep-all}
.cookie-actions{display:flex;justify-content:center;align-items:center;min-height:36px}
.cookie-hint{font-size:13px;color:var(--muted)}

.note{padding:18px 28px;border-top:1px solid var(--line);background:var(--surface);font-size:13px;color:var(--ink-2);text-align:center}

@media (max-width:900px){
  .main{grid-template-columns:minmax(0,1fr)}
  .col--cookie{border-left:none;border-top:1px solid var(--line)}
}
@media (max-width:640px){
  #todayLabel{display:none}
  .col{padding:28px 16px 36px}
  .form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .go{grid-column:1 / -1}
  .result{padding:22px 18px;border-radius:16px}
  .total-num{font-size:52px}
  .cat{grid-template-columns:44px minmax(0,1fr);row-gap:4px;column-gap:10px}
  .cat-text{grid-column:2}
  .lucky{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lucky-item:last-child{grid-column:1 / -1}
  .note{padding:16px}
  .cookie.is-open .half--l{transform:translate(-44px,34px) rotate(-34deg)}
  .cookie.is-open .half--r{transform:translate(44px,34px) rotate(34deg)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.01ms !important;transition-delay:0s !important}
}

/* 다크 모드 (인쇄는 라이트 그대로) — 밤하늘 결과 카드는 원래 어두움, 운세 쪽지(종이)는 밝게 유지 */
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#141318; --surface:#1a1920; --panel:#1f1e26; --panel-soft:#24232c;
    --ink:#ecebf0; --ink-hover:#ffffff; --ink-2:#c9c7d1; --sub:#a09eab; --muted:#8a8895;
    --line:#2e2d36; --line-2:#393843; --line-3:#26252d; --hover:#2a2932; --soft:#26252d; --track:#34333d;
    --accent:#a08cff;
  }
  :root[data-theme="dark"] .btn--solid,:root[data-theme="dark"] .tb-presets button[aria-pressed="true"]{color:var(--bg)}
  :root[data-theme="dark"] .field .text-input{background:var(--surface)}
  :root[data-theme="dark"] .go{background:#6a3df5}
  :root[data-theme="dark"] .go:hover{background:#7c55ff}
  :root[data-theme="dark"] .form-msg{color:#ff8a78}
  :root[data-theme="dark"] .result{box-shadow:0 0 0 1px #2f2858,0 24px 60px rgba(0,0,0,.45)}
  :root[data-theme="dark"] .result-empty{border-color:#3d3566;background:linear-gradient(160deg,#211c38,#1b1829)}
  :root[data-theme="dark"] .result-empty p{color:#b4a9e8}
  :root[data-theme="dark"] .cookie-stage{background:radial-gradient(circle at 50% 45%,#3d3220 0%,#2a2419 40%,var(--panel-soft) 75%)}
  :root[data-theme="dark"] .half{filter:drop-shadow(0 10px 12px rgba(0,0,0,.4))}
}