@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

:root{
  --bg:#fdf3e3; --surface:#ffffff; --ink:#3a2a1c; --muted:#8a7360; --faint:#b6a595;
  --border:#efe2cf; --jar:#fff9ee; --jar-edge:#e9d6b8; --accent:#e8503f; --accent-2:#3a9d5d;
  --shadow:0 12px 34px -16px rgba(90,55,20,.34),0 3px 8px -4px rgba(90,55,20,.16);
  --maxw:420px;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#1c160f; --surface:#251d14; --ink:#f2e9de; --muted:#b3a493;
    --faint:#7c6d5c; --border:#352a1d; --jar:#221a11; --jar-edge:#4a3925; --accent:#f26a56; --accent-2:#54b877;
    --shadow:0 16px 40px -18px rgba(0,0,0,.7); }
}
:root[data-theme="light"]{ --bg:#fdf3e3; --surface:#fff; --ink:#3a2a1c; --muted:#8a7360; --faint:#b6a595;
  --border:#efe2cf; --jar:#fff9ee; --jar-edge:#e9d6b8; --accent:#e8503f; --accent-2:#3a9d5d; }
:root[data-theme="dark"]{ --bg:#1c160f; --surface:#251d14; --ink:#f2e9de; --muted:#b3a493; --faint:#7c6d5c;
  --border:#352a1d; --jar:#221a11; --jar-edge:#4a3925; --accent:#f26a56; --accent-2:#54b877; }

*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); overflow-x:hidden;
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Malgun Gothic",sans-serif;
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
a{ color:var(--accent); text-decoration:none; } a:hover{ text-decoration:underline; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 16px; }

header.site{ }
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; height:56px; }
.brand{ display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:19px; letter-spacing:-.03em; color:var(--ink); }
.brand:hover{ text-decoration:none; } .brand .mk{ font-size:22px; }
nav.top{ display:flex; gap:16px; } nav.top a{ color:var(--muted); font-size:13.5px; font-weight:600; }
nav.top a:hover{ color:var(--accent); text-decoration:none; }

.scorebar{ display:flex; gap:10px; margin:6px 0 10px; }
.score{ flex:1; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:10px 14px; }
.score .k{ font-size:11.5px; font-weight:700; color:var(--faint); letter-spacing:.04em; text-transform:uppercase; }
.score .v{ font-size:26px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.1; }
.score.next{ flex:none; width:78px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.score.next .emo{ font-size:26px; line-height:1; margin-top:2px; }

.stage{ position:relative; margin:0 auto; }
.jar{ position:relative; width:100%; background:linear-gradient(180deg,var(--jar) 0%,color-mix(in srgb,var(--jar) 82%,var(--jar-edge)) 100%);
  border:2px solid var(--jar-edge); border-top:none; border-radius:0 0 26px 26px; box-shadow:var(--shadow); overflow:hidden; touch-action:none; }
.jar canvas{ display:block; width:100%; height:auto; }
.hint{ text-align:center; color:var(--faint); font-size:12.5px; margin:10px 0 0; }

.controls{ display:flex; gap:9px; margin:14px 0 6px; }
.btn{ padding:11px 16px; border-radius:11px; font-family:inherit; font-weight:700; font-size:14px; cursor:pointer;
  border:1.5px solid var(--border); background:var(--surface); color:var(--ink); }
.btn:hover{ border-color:var(--accent); } .btn:active{ transform:translateY(1px); }

.over{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; z-index:5;
  background:color-mix(in srgb,var(--ink) 42%,transparent); backdrop-filter:blur(2px); border-radius:0 0 24px 24px; }
.over.show{ display:flex; animation:fade .25s ease; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.card{ background:var(--surface); border-radius:18px; padding:22px 20px; width:84%; max-width:280px; text-align:center; box-shadow:var(--shadow); }
.card h2{ margin:0 0 2px; font-size:21px; letter-spacing:-.03em; }
.card .fin{ font-size:40px; font-weight:800; color:var(--accent); letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin:6px 0; }
.card .best{ color:var(--muted); font-size:13px; margin-bottom:14px; }
.card .share{ width:100%; padding:13px; border:none; border-radius:12px; background:var(--accent); color:#fff; font-weight:800; font-size:15px; font-family:inherit; cursor:pointer; }
.card .again{ width:100%; margin-top:8px; padding:12px; border:1.5px solid var(--border); border-radius:12px; background:transparent; color:var(--ink); font-weight:700; font-size:14px; font-family:inherit; cursor:pointer; }
.card .msg{ color:var(--muted); font-size:12.5px; margin-top:10px; min-height:16px; }

footer.site{ border-top:1px solid var(--border); margin-top:30px; }
footer.site .wrap{ padding:22px 16px 32px; text-align:center; }
.foot-top{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; }
.foot-top a{ color:var(--muted); font-size:13px; font-weight:600; }
.foot-note{ color:var(--faint); font-size:12px; margin-top:10px; }

.crumb{ font-size:13px; color:var(--faint); margin:20px 0 0; } .crumb a{ color:var(--muted); }
.prose h1{ font-size:25px; letter-spacing:-.03em; margin:14px 0 4px; }
.prose .lead{ color:var(--muted); font-size:16px; margin:0 0 8px; }
.prose h2{ font-size:18px; margin:24px 0 6px; letter-spacing:-.02em; }
.prose p{ color:var(--muted); font-size:15px; margin:0 0 12px; } .prose p strong{ color:var(--ink); }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; } }