/* ============================================================
   테마 정의
   :root[data-theme="..."] 는 각 페이지의 :root 보다 명시도가 높아
   인라인 <style> 에 있는 기본값을 덮어쓴다.
   ============================================================ */

/* ---------- 어둡게 ---------- */
:root[data-theme="dark"]{
  --paper:      #141A16;
  --surface:    #1C2420;
  --ink:        #E4E8E2;
  --ink-soft:   #97A29A;
  --rule:       #2E3A33;
  --accent:     #4ADE80;

  /* 2048 · 지뢰찾기 판 */
  --board:      #2A332D;
  --cell:       #222B26;
  --closed:     #3A4649;
  --closed-2:   #455255;
  --open:       #1E2523;
  --led:        #FF6B5E;

  /* 타자연습 */
  --wrong:      #E2685C;

  /* 반응속도 신호 */
  --sig-wait:   #6E241D;
  --sig-go:     #4ADE80;
  --sig-early:  #B57623;
}

/* 지뢰찾기 숫자는 밝은 배경 기준이라 어둡게에서 다시 잡는다 */
:root[data-theme="dark"] .cell[data-n="1"]{ color:#6FA8E8; }
:root[data-theme="dark"] .cell[data-n="2"]{ color:#5FC98A; }
:root[data-theme="dark"] .cell[data-n="3"]{ color:#F08A80; }
:root[data-theme="dark"] .cell[data-n="4"]{ color:#B39DE8; }
:root[data-theme="dark"] .cell[data-n="5"]{ color:#D9A56B; }
:root[data-theme="dark"] .cell[data-n="6"]{ color:#5FC6C6; }
:root[data-theme="dark"] .cell[data-n="7"]{ color:#D8D8D8; }
:root[data-theme="dark"] .cell[data-n="8"]{ color:#A0A0A0; }

/* 어둡게에서는 썸네일이 너무 튀지 않게 살짝 낮춘다 */
:root[data-theme="dark"] .card-thumb{ filter:brightness(.92); }

/* ---------- 밝게 ---------- */
:root[data-theme="sheet"]{
  --paper:      #FFFFFF;
  --surface:    #F5F5F5;
  --ink:        #1A1A1A;
  --ink-soft:   #5F6368;
  --rule:       #D0D7DE;
  --accent:     #217346;

  --board:      #D8DDE2;
  --cell:       #EDF0F2;
  --closed:     #E1E6EA;
  --closed-2:   #D3DAE0;
  --open:       #FAFBFC;
  --led:        #C0392B;

  --wrong:      #C0392B;

  --sig-wait:   #A03A30;
  --sig-go:     #2FBF67;
  --sig-early:  #D9952F;
}

/* ============================================================
   테마 전환 버튼
   ============================================================ */
.theme-btn{
  font-family:inherit;
  font-size:.8rem;
  padding:4px 12px;
  border-radius:999px;
  border:1px solid var(--rule);
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  line-height:1.5;
}
.theme-btn:hover{ border-color:var(--ink); color:var(--ink); }

/* ============================================================
   슬라이드 메뉴
   ============================================================ */
.menu-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border:1px solid var(--rule); border-radius:9px;
  background:transparent; color:var(--ink-soft);
  cursor:pointer; padding:0;
}
.menu-btn:hover{ border-color:var(--ink); color:var(--ink); }

.menu-backdrop{
  position:fixed; inset:0; z-index:90;
  background:rgba(20,26,22,.42);
  opacity:0; transition:opacity .18s ease;
}
.menu-backdrop.is-open{ opacity:1; }

.menu-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:91;
  width:min(300px, 84vw);
  background:var(--surface);
  border-left:1px solid var(--rule);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .2s ease;
  overflow-y:auto;
  padding-bottom:env(safe-area-inset-bottom);
}
.menu-panel.is-open{ transform:translateX(0); }

.menu-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--rule);
  position:sticky; top:0; background:var(--surface);
}
.menu-title{ font-size:.9rem; font-weight:700; letter-spacing:-.01em; }
.menu-close{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0;
  border:1px solid var(--rule); border-radius:8px;
  background:transparent; color:var(--ink-soft); cursor:pointer;
}
.menu-close:hover{ border-color:var(--ink); color:var(--ink); }

.menu-body{ padding:8px 0 24px; }
.menu-sec{ padding:10px 0; border-bottom:1px solid var(--rule); }
.menu-sec:last-child{ border-bottom:none; }

.menu-label{
  font-size:.72rem; font-weight:600;
  color:var(--ink-soft);
  padding:6px 18px 8px;
  letter-spacing:.02em;
}

.menu-sec a{
  display:block;
  padding:11px 18px;
  font-size:.93rem;
  color:var(--ink);
  text-decoration:none;
}
.menu-sec a:hover{ background:var(--paper); }
.menu-sec a[aria-current="page"]{
  font-weight:700;
  box-shadow:inset 3px 0 0 var(--accent);
}
.menu-sec a.menu-all{ color:var(--ink-soft); font-size:.86rem; }

.menu-themes{ display:flex; gap:6px; padding:2px 18px 8px; }
.menu-themes button{
  flex:1;
  font-family:inherit; font-size:.8rem;
  padding:8px 4px; border-radius:8px; cursor:pointer;
  border:1px solid var(--rule);
  background:transparent; color:var(--ink-soft);
}
.menu-themes button:hover{ border-color:var(--ink); color:var(--ink); }
.menu-themes button[aria-pressed="true"]{
  background:var(--ink); border-color:var(--ink);
  color:var(--paper); font-weight:600;
}

@media (prefers-reduced-motion:reduce){
  .menu-panel, .menu-backdrop{ transition:none; }
}

/* ============================================================
   메뉴 · 계정
   ============================================================ */
.menu-acc{ padding:2px 18px 10px; }
.menu-dim{ font-size:.82rem; color:var(--ink-soft); display:block; margin-bottom:10px; }

.menu-who{ margin-bottom:10px; }
.menu-who b{ display:block; font-size:1rem; }
.menu-who span{ font-size:.76rem; color:var(--ink-soft); }

.menu-login{
  display:block !important;
  padding:11px 14px !important;
  margin-bottom:8px;
  border:1px solid var(--rule); border-radius:9px;
  font-size:.88rem; font-weight:600; text-align:center;
  text-decoration:none; color:var(--ink);
}
.menu-login:hover{ border-color:var(--ink); background:var(--paper); }
.menu-login.k{ background:#FEE500; border-color:#FEE500; color:#191600; }
.menu-login.k:hover{ background:#F2DA00; border-color:#F2DA00; }

.menu-btn-line{
  width:100%; font-family:inherit; font-size:.86rem;
  padding:9px 12px; border-radius:8px; cursor:pointer;
  border:1px solid var(--rule); background:transparent; color:var(--ink-soft);
}
.menu-btn-line:hover{ border-color:var(--ink); color:var(--ink); }

/* ============================================================
   결과 창 닫기 버튼
   ============================================================ */
.result{ position:relative; }
.overlay-close{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--rule); border-radius:8px;
  background:transparent; color:var(--ink-soft);
  cursor:pointer; line-height:1;
}
.overlay-close:hover{ border-color:var(--ink); color:var(--ink); }

.menu-mypage{
  display:block !important;
  padding:10px 12px !important;
  margin-bottom:8px;
  border:1px solid var(--rule); border-radius:8px;
  font-size:.86rem; font-weight:600; text-align:center;
  text-decoration:none; color:var(--ink);
}
.menu-mypage:hover{ border-color:var(--ink); background:var(--paper); }