:root{
  --bg:#f6f8ff;
  --ink:#0f172a;
  --muted:#64748b;
  --card:#ffffff;
  --line:#e2e8f0;
  --shadow: 0 12px 30px rgba(15,23,42,.08);
  --accent:#6366f1;
  --accent2:#22c55e;
  --danger:#ef4444;

  --keypad-h: 220px;
  --keypad-gap: 14px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  padding-bottom: calc(var(--keypad-h) + var(--keypad-gap) + env(safe-area-inset-bottom));
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 600px at 15% 20%, rgba(99,102,241,.16), transparent 55%),
    radial-gradient(900px 600px at 85% 25%, rgba(34,197,94,.12), transparent 55%),
    linear-gradient(180deg, #ffffff, #f6f8ff 60%, #ffffff);
}

.container{
  width:min(980px, 92vw);
  margin: 18px auto 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.topbar{ margin-bottom:12px; }

/* top navigation */
.site-nav{
  width:min(980px, 92vw);
  margin: 0 0 10px;
  font-size:13px;
  color:var(--muted);
}

.site-nav a{
  color:#334155;
  text-decoration:none;
  font-weight:700;
}

.site-nav a:hover{
  text-decoration:underline;
}

.brand .sub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

.brand-title{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:26px;
  letter-spacing:-0.3px;
}

.logo{
  width:34px; height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.22);
  color: var(--accent);
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
}
.logo svg{ width:20px; height:20px; display:block; }
.title-text{ font-weight:900; }

/* nav */
.langbar{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.pill-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  text-decoration:none;
  font-size:12px;
  font-weight:900;
}
.pill-link:hover{ background:#f8fafc; color:var(--ink); }
.pill-link.on{
  border-color: rgba(99,102,241,.35);
  background: rgba(99,102,241,.10);
  color: var(--ink);
}
.sep{ color: var(--muted); font-weight:900; }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
}

.panel{ padding:12px; width:min(980px, 92vw); }

.row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.row.spread{ justify-content:space-between; align-items:flex-start; gap:12px; }

.group{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  cursor:pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ background:#f8fafc; }
.btn:active{ transform: translateY(1px); }
.btn.primary{
  border-color: transparent;
  background: linear-gradient(135deg, rgba(99,102,241,1), rgba(139,92,246,1));
  color:#fff;
}
.btn.ghost{ background: transparent; }
.btn.on{
  border-color: rgba(34,197,94,.45);
  background: rgba(34,197,94,.10);
}

.field{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.field label{ font-size:12px; color:var(--muted); white-space:nowrap; }
.field input, .field select{
  border:none; outline:none; background:transparent;
  color:var(--ink); font-weight:700;
}
.field.small input{ width: 160px; }

.stats{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.pill{
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#f8fafc;
  font-size:12px;
  color:var(--muted);
}
.pill b{ color:var(--ink); font-variant-numeric: tabular-nums; }

/* Board */
.board-wrap{ margin-top:14px; width:min(980px, 92vw); display:flex; justify-content:center; }
.board-shell{ padding:14px; width:100%; display:flex; justify-content:center; }

#boardWrap{ width:fit-content; margin: 0 auto; }

.board{
  display:grid;
  grid-template-columns: repeat(9, 46px);
  grid-template-rows: repeat(9, 46px);
  border:3px solid var(--ink);
  border-radius:14px;
  overflow:hidden;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  background:#fff;
}

.cell{
  width:46px; height:46px;
  border:1px solid #cbd5e1;
  position:relative;
  background:#fff;
  cursor:pointer;
}
.cell:nth-child(3n):not(:nth-child(9n)){ border-right: 3px solid var(--ink); }
.cell:nth-child(n+19):nth-child(-n+27),
.cell:nth-child(n+46):nth-child(-n+54){ border-bottom: 3px solid var(--ink); }

.cell.fixed{ background:#f1f5f9; }
.cell.selected{
  outline: 3px solid rgba(99,102,241,.85);
  outline-offset:-3px;
  z-index:2;
}
.cell.related{ background: rgba(99,102,241,.08); }
.cell.same-number{ background: rgba(34,197,94,.10); }
.cell.error{ background: rgba(239,68,68,.18); }

.value{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:900;
}

.notes{
  position:absolute; inset:4px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  align-items:center; justify-items:center;
  font-size:10px;
  color:#334155;
  pointer-events:none;
}
.note{ opacity:0; }
.note.on{ opacity:1; }
.cell.has-value .notes{ display:none; }

/* overlay */
.overlay{
  position:absolute; inset:0;
  background: rgba(15,23,42,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:50;
}
.overlay.hidden{ display:none; }

.overlay-card{
  width:min(420px, 90%);
  background:#fff;
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  padding:16px 18px;
  text-align:center;
}
.overlay-card .title{ font-size:18px; font-weight:900; }
.overlay-card .desc{ margin-top:8px; font-size:12px; color:var(--muted); line-height:1.45; }

/* msg/hint */
.msg{
  margin-top:10px;
  min-height:22px;
  text-align:center;
  font-weight:900;
  width:min(980px, 92vw);
}

/* keypad */
.keypad{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 9999;

  width: min(520px, 92vw);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;

  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);

  max-height: var(--keypad-h);
  overflow: hidden;
}
.keypad .k{
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 12px 0;
  font-weight: 900;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.keypad .key-note.on{
  border-color: rgba(34,197,94,.45);
  background: rgba(34,197,94,.10);
}
.keypad .key-erase{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
}

.bottom-spacer{
  height: calc(var(--keypad-h) + env(safe-area-inset-bottom) + 10px);
}

/* daily */
#dailyPanel{ width:min(980px, 92vw); }
.daily-panel .daily-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.daily-toggle{ display:flex; align-items:center; gap:8px; font-weight:900; }
.daily-toggle .chev{ transition: transform .15s ease; }
.daily-panel:not(.is-collapsed) .daily-toggle .chev{ transform: rotate(180deg); }
.daily-head-hint{ font-size:12px; color: var(--muted); white-space: nowrap; }

.daily-panel.is-collapsed .daily-content{ display:none; }
.daily-panel .daily-content{
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.daily-toolbar{ margin-bottom: 10px; }
.daily-help{ font-size:12px; color: var(--muted); font-weight: 800; }

#calLabel{ min-width: 96px; text-align:center; font-variant-numeric: tabular-nums; font-weight: 900; }

.cal-weekdays{
  width:100%;
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.cal-weekdays > div{
  text-align:center;
  font-size: 11px;
  color: var(--muted);
  font-weight: 800;
}

#calGrid{
  width:100%;
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.cal-day{
  appearance:none;
  border:1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  padding: 10px 8px;
  min-height: 56px;
  cursor: pointer;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;

  transition: transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
}
.cal-day:hover{ background:#f8fafc; }
.cal-day:active{ transform: translateY(1px); }
.cal-day .d{ font-weight:900; font-size:14px; }
.cal-day .meta{ font-size:11px; color:var(--muted); }
.cal-day.empty{ visibility:hidden; pointer-events:none; }
.cal-day.today{ border-color: rgba(99,102,241,.45); background: rgba(99,102,241,.08); }
.cal-day.selected{ border-color: rgba(99,102,241,.85); background: rgba(99,102,241,.10); box-shadow: 0 10px 24px rgba(99,102,241,.18); }
.cal-day.locked{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.cal-day.done{ border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.10); }
.cal-day.done .meta{ color: rgba(34,197,94,1); font-weight: 900; }
.cal-footnote{ margin-top:10px; font-size:12px; color:var(--muted); line-height:1.45; }

/* content section */
.content h2{ margin: 4px 0 8px; font-size: 16px; }
.content h3{ margin: 14px 0 6px; font-size: 14px; }
.content p, .content li{ color: var(--ink); line-height: 1.6; }
.content ul{ margin: 6px 0 0 18px; }
.content details{ margin-top:10px; }
.content summary{ cursor:pointer; font-weight:900; }
.content-foot{ margin-top: 12px; color: var(--muted); }
.content-foot a{ color: var(--muted); font-weight:900; text-decoration:none; }
.content-foot a:hover{ color: var(--ink); text-decoration:underline; }

.ad-wrap{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

/* leaderboard box */
.lbBox{ padding:12px; }
.lbBox .head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.lbBox ol{ margin:10px 0 0 18px; padding:0; line-height:1.7; }

@media (max-width:520px){
  :root{ --keypad-h: 206px; }
  .board{ grid-template-columns: repeat(9, 40px); grid-template-rows: repeat(9, 40px); }
  .cell{ width:40px; height:40px; }
  .value{ font-size:20px; }
  .notes{ font-size:9px; }
  .daily-head{ flex-direction:column; align-items:flex-start; gap:6px; }
  .daily-head-hint{ white-space: normal; }
  .cal-day{ min-height: 50px; border-radius: 12px; padding: 9px 6px; }
}

@media (max-height: 740px){
  :root{ --keypad-h: 196px; }
}