/* ==========================================================================
   번쩍암산 — 디자인 토큰
   컨셉: 짙은 차콜 배경 + 플래시 옐로 액센트. 속도감 있는 암산 트레이닝 툴.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&family=Roboto+Mono:wght@500;700&display=swap');

:root{
  --bg: #14161F;
  --bg-panel: #1E212E;
  --bg-key: #262A3B;
  --bg-key-hover: #323749;
  --text: #F5F6FA;
  --text-muted: #9098B0;
  --text-faint: #5C6480;
  --accent: #FFD60A;
  --accent-text: #14161F;
  --success: #34D399;
  --success-soft: rgba(52,211,153,0.16);
  --error: #F87171;
  --error-soft: rgba(248,113,113,0.16);
  --border: rgba(245,246,250,0.10);
  --border-strong: rgba(245,246,250,0.22);

  --font-body: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-num: 'Roboto Mono', 'Noto Sans KR', monospace;
  --measure: 62ch;
  --radius-sm: 10px;
  --container: 1000px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-weight:900; line-height:1.25; margin:0 0 0.5em; letter-spacing:-0.01em; }
p{ margin:0 0 1em; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.prose p{ max-width:var(--measure); color:var(--text-muted); }

a:focus-visible, button:focus-visible, select:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

/* ---------- 헤더 ---------- */
.site-header{ border-bottom:1px solid var(--border); padding:18px 0; }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.logo{ font-weight:900; font-size:1.2rem; text-decoration:none; color:var(--text); }
.logo span{ color:var(--accent); }
.site-nav{ display:flex; gap:24px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.site-nav a{ text-decoration:none; color:var(--text-muted); font-size:0.92rem; font-weight:600; padding:6px 0; border-bottom:1px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"]{ color:var(--accent); border-color:var(--accent); }

/* ---------- 히어로 ---------- */
.hero{ padding:48px 0 8px; text-align:center; }
.hero-copy{ display:flex; flex-direction:column; align-items:center; }
.eyebrow{ font-size:0.8rem; font-weight:700; letter-spacing:0.12em; color:var(--accent); text-transform:uppercase; margin-bottom:12px; }
.hero-copy h1{ font-size:clamp(1.9rem,5vw,2.7rem); max-width:20ch; }
.hero-sub{ color:var(--text-muted); font-size:1.02rem; max-width:48ch; margin:0 auto 8px; }

/* ---------- 버튼 ---------- */
.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:800; font-size:0.95rem;
  padding:12px 22px; border-radius:8px; border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .1s ease, background .15s ease, border-color .15s ease; }
.btn:active{ transform:translateY(1px) scale(0.98); }
.btn-primary{ background:var(--accent); color:var(--accent-text); }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{ background:transparent; border-color:var(--border-strong); color:var(--text); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-sm{ padding:9px 16px; font-size:0.85rem; }
.btn:disabled{ opacity:0.4; cursor:not-allowed; }

/* ---------- 모드/설정 패널 ---------- */
.setup-panel{ background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-sm); padding:28px; max-width:560px; margin:32px auto; }
.mode-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-bottom:22px; }
.mode-btn{ background:var(--bg-key); border:2px solid transparent; border-radius:10px; padding:18px 10px; text-align:center; cursor:pointer; color:var(--text-muted); font-family:var(--font-body); font-weight:700; font-size:0.95rem; transition:border-color .12s ease, color .12s ease; }
.mode-btn .mode-symbol{ display:block; font-family:var(--font-num); font-size:1.6rem; color:var(--text); margin-bottom:6px; }
.mode-btn:hover{ border-color:var(--border-strong); }
.mode-btn.is-active{ border-color:var(--accent); color:var(--accent); }
.mode-btn.is-active .mode-symbol{ color:var(--accent); }

.digit-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.digit-row label{ font-size:0.9rem; color:var(--text-muted); font-weight:600; }
.digit-select{ background:var(--bg-key); color:var(--text); border:1px solid var(--border-strong); border-radius:8px; padding:8px 12px; font-family:var(--font-num); font-size:1rem; }

.setup-actions{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.setup-actions .btn{ flex:1; justify-content:center; }

.category-toggle{ display:flex; gap:8px; margin-bottom:20px; background:var(--bg-key); border-radius:10px; padding:4px; }
.category-toggle button{ flex:1; background:transparent; border:none; border-radius:8px; padding:10px 0; color:var(--text-muted); font-family:var(--font-body); font-weight:800; font-size:0.95rem; cursor:pointer; }
.category-toggle button.is-active{ background:var(--accent); color:var(--accent-text); }

.tier-row{ display:flex; gap:8px; margin-bottom:14px; }
.tier-row button{ flex:1; background:var(--bg-key); border:2px solid transparent; border-radius:8px; padding:10px 0; color:var(--text-muted); font-family:var(--font-body); font-weight:700; font-size:0.9rem; cursor:pointer; }
.tier-row button.is-active{ border-color:var(--accent); color:var(--accent); }

/* ---------- 연습 화면 ---------- */
.practice-panel{ max-width:420px; margin:0 auto; text-align:center; }
.practice-stats{ display:flex; justify-content:space-between; font-size:0.9rem; color:var(--text-muted); margin-bottom:18px; font-family:var(--font-num); }
.practice-stats b{ color:var(--text); }

.problem-column{ display:inline-block; text-align:right; font-family:var(--font-num); font-size:2.4rem; font-weight:700; margin:12px auto 20px; }
.problem-row{ display:flex; justify-content:flex-end; gap:14px; }
.problem-row .op-symbol{ color:var(--accent); width:1.2ch; text-align:left; }
.problem-rule{ border-top:3px solid var(--text); margin-top:6px; }

.problem-notation{ font-family:var(--font-num); font-size:2.6rem; font-weight:700; margin:18px auto 24px; }
.problem-notation .sym{ color:var(--accent); margin:0 6px; font-size:1.6rem; vertical-align:middle; }

.problem-prompt-text{ font-size:1.15rem; font-weight:700; line-height:1.5; margin:18px auto 24px; max-width:360px; }

.answer-display{
  background:var(--bg-panel); border:2px solid var(--border-strong); border-radius:10px;
  font-family:var(--font-num); font-size:2rem; font-weight:700; letter-spacing:0.05em;
  padding:16px; min-height:64px; margin-bottom:18px; text-align:right;
  transition:border-color .12s ease, background .12s ease;
}
.answer-display.is-correct{ border-color:var(--success); background:var(--success-soft); }
.answer-display.is-wrong{ border-color:var(--error); background:var(--error-soft); animation: shake 0.3s; }
.answer-display .placeholder{ color:var(--text-faint); }

@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }

.keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.keypad button{
  background:var(--bg-key); border:none; border-radius:10px; padding:18px 0; font-family:var(--font-num);
  font-size:1.3rem; font-weight:700; color:var(--text); cursor:pointer; transition:background .1s ease;
}
.keypad button:hover{ background:var(--bg-key-hover); }
.keypad button:active{ transform:scale(0.96); }
.keypad .key-enter{ background:var(--accent); color:var(--accent-text); }
.keypad .key-enter:hover{ filter:brightness(1.08); }

.practice-footer{ margin-top:22px; }

/* ---------- 결과 화면 ---------- */
.result-panel{ max-width:480px; margin:0 auto; text-align:center; }
.result-panel .big-num{ font-family:var(--font-num); font-size:3.4rem; font-weight:700; color:var(--accent); }
.result-panel .label{ color:var(--text-muted); margin-bottom:24px; }
.result-stats{ display:flex; justify-content:center; gap:32px; margin:20px 0 28px; }
.result-stats div{ text-align:center; }
.result-stats .stat-num{ font-family:var(--font-num); font-size:1.4rem; font-weight:700; color:var(--text); }
.result-stats .stat-label{ font-size:0.82rem; color:var(--text-muted); }
.new-record{ display:inline-block; background:var(--success-soft); color:var(--success); font-weight:800; padding:6px 16px; border-radius:999px; margin-bottom:16px; }

/* ---------- 섹션 공통 ---------- */
.section{ padding:44px 0; }
.section-alt{ background:var(--bg-panel); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.section-head h2{ font-size:clamp(1.3rem,3vw,1.7rem); margin:0; }
.section-head .link{ font-size:0.9rem; color:var(--accent); text-decoration:none; font-weight:700; white-space:nowrap; }

.article-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.article-card{ display:block; text-decoration:none; border:1px solid var(--border); border-radius:var(--radius-sm); padding:20px; background:var(--bg-panel); transition:border-color .15s ease; }
.section-alt .article-card{ background:var(--bg); }
.article-card:hover{ border-color:var(--accent); }
.article-card h3{ font-size:1.02rem; margin-bottom:6px; }
.article-card p{ color:var(--text-muted); font-size:0.86rem; margin:0; }

/* ---------- 아티클 ---------- */
.article-hero{ padding:44px 0 14px; }
.article-hero .kicker{ color:var(--accent); font-size:0.85rem; font-weight:700; margin-bottom:10px; }
.article-hero h1{ font-size:clamp(1.5rem,4vw,2.1rem); }
.tip-box{ background:var(--bg-panel); border-left:4px solid var(--accent); border-radius:4px; padding:16px 20px; margin:18px 0; }

/* ---------- 일반 페이지 ---------- */
.page-hero{ padding:44px 0 8px; }
.page-hero h1{ font-size:clamp(1.5rem,4vw,2.1rem); }
.content-block{ padding:20px 0 52px; }
.content-block h2{ font-size:1.1rem; margin-top:1.8em; }
.content-block ul{ color:var(--text-muted); padding-left:1.2em; max-width:var(--measure); }
.content-block li{ margin-bottom:0.5em; }
.contact-card{ background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-sm); padding:24px; max-width:440px; }
.contact-card dt{ color:var(--text-faint); font-size:0.85rem; margin-top:14px; font-weight:600; }
.contact-card dt:first-child{ margin-top:0; }
.contact-card dd{ margin:4px 0 0; }
.contact-card dd a{ color:var(--accent); text-decoration:none; }

/* ---------- 푸터 ---------- */
.site-footer{ border-top:1px solid var(--border); padding:30px 0; margin-top:36px; }
.site-footer .container{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer-links{ display:flex; gap:18px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.footer-links a{ color:var(--text-faint); text-decoration:none; font-size:0.85rem; font-weight:600; }
.footer-links a:hover{ color:var(--accent); }
.copyright{ color:var(--text-faint); font-size:0.85rem; }

@media (max-width:640px){
  .hero{ padding:34px 0 4px; }
  .setup-panel{ padding:20px; }
  .problem-column{ font-size:1.9rem; }
  .site-footer .container{ flex-direction:column; align-items:flex-start; }
}