/**
 * theme.css — 퍼즐 플랫폼 공통 디자인 토큰 확장
 * ─────────────────────────────────────────────────────────────────
 * css/style.css       : 앱 전역 기본 변수 (--primary, --bg, --border …)
 * css/puzzle-shell.css: 퍼즐 Shell 변수   (--ps-blue, --ps-gray …)
 * css/theme.css       : 두 시스템 브리지 + 타이머 위젯 + 추가 토큰
 *
 * 우선 로드 순서: style.css → theme.css → puzzle-shell.css
 *
 * 규칙
 *   • JS 파일 내 인라인 color 값은 최소화 — CSS 변수로 참조
 *   • 퍼즐별 accent 색상은 --puzzle-accent 로 override
 *   • 타이머 상태: normal / warn(70%↓) / danger(30%↓)
 */

/* ═══════════════════════════════════════════════════════════════
   1. 글로벌 토큰 확장 — style.css 변수 보완
═══════════════════════════════════════════════════════════════ */
:root {
  /* ── 퍼즐별 accent (기본값; 각 퍼즐 섹션에서 override 가능) ── */
  --puzzle-accent:       var(--primary);
  --puzzle-accent-light: var(--primary-light);
  --puzzle-accent-dark:  var(--primary-dark);

  /* ── 타이머 상태 색상 ── */
  --timer-bg:            #f8fafc;
  --timer-border:        #e2e8f0;
  --timer-text:          #1e293b;
  --timer-btn-bg:        #f1f5f9;
  --timer-btn-hover:     #e2e8f0;
  --timer-warn-color:    #d97706;   /* 70% 이하 남음 */
  --timer-warn-bg:       #fef3c7;
  --timer-danger-color:  #dc2626;   /* 30% 이하 남음 */
  --timer-danger-bg:     #fee2e2;

  /* ── 공통 퍼즐 카드 ── */
  --card-bg:             #ffffff;
  --card-border:         #e2e8f0;
  --card-radius:         12px;
  --card-shadow:         0 2px 8px rgba(0,0,0,.07);
  --card-shadow-hover:   0 6px 20px rgba(0,0,0,.12);

  /* ── 사이드바 dbtn (difficulty button) ── */
  --dbtn-bg:             #f1f5f9;
  --dbtn-border:         #e2e8f0;
  --dbtn-active-bg:      var(--puzzle-accent);
  --dbtn-active-text:    #ffffff;

  /* ── 퍼즐 그리드 공통 ── */
  --grid-border:         #374151;
  --grid-cell-bg:        #ffffff;
  --grid-black-bg:       #1f2937;
  --grid-hint-bg:        #dbeafe;
  --grid-solved-bg:      #dcfce7;
  --grid-error-bg:       #fee2e2;

  /* ── 프린트 ── */
  --print-accent:        var(--print-color);   /* style.css --print-color: #7C3AED */
  --print-light:         var(--print-light);

  /* ── 난이도 배지 ── */
  --diff-easy-bg:        #dcfce7;
  --diff-easy-text:      #15803d;
  --diff-normal-bg:      #dbeafe;
  --diff-normal-text:    #1d4ed8;
  --diff-hard-bg:        #fef3c7;
  --diff-hard-text:      #b45309;
  --diff-expert-bg:      #fee2e2;
  --diff-expert-text:    #b91c1c;

  /* ── 퍼즐 개별 accent 팔레트 ── */
  --accent-minesweeper:  #ef5350;
  --accent-sudoku:       #2563eb;
  --accent-nonogram:     #7c3aed;
  --accent-crossmath:    #d97706;
  --accent-kakuro:       #0891b2;
  --accent-magic-square: #9333ea;
  --accent-skyscrapers:  #0d9488;
  --accent-tangram:      #ea580c;
  --accent-truth-lie:    #16a34a;
  --accent-flow-connect: #2563eb;
  --accent-stacking:     #7c3aed;
  --accent-logic-arrange:#b45309;
  --accent-maze:         #1d4ed8;
  --accent-formula-maze: #0891b2;
  --accent-land-divide:  #16a34a;
  --accent-weighing:     #d97706;
  --accent-mirror:       #9333ea;
  --accent-yajilin:      #0f766e;
  --accent-battleship:   #1e40af;
  --accent-kenken:       #c026d3;
  --accent-hakamari:     #15803d;
  --accent-make10:       #b45309;
  --accent-akari:        #d97706;
}


/* ═══════════════════════════════════════════════════════════════
   2. 타이머 위젯 스타일
═══════════════════════════════════════════════════════════════ */
.timer-widget {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--timer-bg);
  border: 1px solid var(--timer-border);
  border-radius: 8px;
  padding: 3px 8px;
  flex-shrink: 0;
  user-select: none;
}

.timer-icon {
  font-size: 14px;
  line-height: 1;
}

.timer-display {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--timer-text);
  min-width: 46px;
  text-align: center;
  transition: color .2s, background .2s;
  border-radius: 4px;
  padding: 1px 4px;
}

/* 카운트다운 모드 표시 */
.timer-display.timer-countdown {
  color: var(--primary);
}

/* 경고 (70% 이하) */
.timer-display.timer-warn {
  color: var(--timer-warn-color);
  background: var(--timer-warn-bg);
}

/* 위험 (30% 이하) */
.timer-display.timer-danger {
  color: var(--timer-danger-color);
  background: var(--timer-danger-bg);
  animation: timer-pulse 1s ease-in-out infinite;
}

@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .65; }
}

.timer-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 5px;
  background: var(--timer-btn-bg);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  padding: 0;
  flex-shrink: 0;
}

.timer-btn:hover {
  background: var(--timer-btn-hover);
}

.timer-btn-reset {
  font-size: 14px;
  font-weight: 900;
}


/* ═══════════════════════════════════════════════════════════════
   3. 공통 퍼즐 카드 스타일 보완
═══════════════════════════════════════════════════════════════ */

/* 퍼즐 카드 — 기존 .puzzle-card 에 변수 적용 */
.puzzle-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: box-shadow .2s, transform .2s;
}

.puzzle-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

/* 난이도 배지 — .diff-badge + data-level */
.diff-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}

.diff-badge[data-level="easy"],
.diff-badge[data-level="입문"],
.diff-badge[data-level="쉬움"] {
  background: var(--diff-easy-bg);
  color: var(--diff-easy-text);
}

.diff-badge[data-level="normal"],
.diff-badge[data-level="보통"] {
  background: var(--diff-normal-bg);
  color: var(--diff-normal-text);
}

.diff-badge[data-level="hard"],
.diff-badge[data-level="어려움"] {
  background: var(--diff-hard-bg);
  color: var(--diff-hard-text);
}

.diff-badge[data-level="expert"],
.diff-badge[data-level="전문가"],
.diff-badge[data-level="도전"] {
  background: var(--diff-expert-bg);
  color: var(--diff-expert-text);
}


/* ═══════════════════════════════════════════════════════════════
   4. 사이드바 dbtn — 변수 기반 통일
═══════════════════════════════════════════════════════════════ */
.dbtn {
  background: var(--dbtn-bg);
  border: 1.5px solid var(--dbtn-border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  color: var(--text);
}

.dbtn:hover {
  border-color: var(--puzzle-accent);
  color: var(--puzzle-accent);
}

.dbtn.active {
  background: var(--dbtn-active-bg);
  border-color: var(--dbtn-active-bg);
  color: var(--dbtn-active-text);
}


/* ═══════════════════════════════════════════════════════════════
   5. 퍼즐 그리드 공통 변수 적용
═══════════════════════════════════════════════════════════════ */

/* 모든 .grid-cell 기본 (각 퍼즐이 override 가능) */
.grid-cell {
  background: var(--grid-cell-bg);
  border: 1px solid var(--grid-border);
  box-sizing: border-box;
  transition: background .1s;
}

.grid-cell.cell-black  { background: var(--grid-black-bg); }
.grid-cell.cell-hint   { background: var(--grid-hint-bg);  }
.grid-cell.cell-solved { background: var(--grid-solved-bg); }
.grid-cell.cell-error  { background: var(--grid-error-bg);  }


/* ═══════════════════════════════════════════════════════════════
   6. puzzle-shell.css 변수 ↔ style.css 변수 브리지
      (ps-blue = primary 계열로 자동 매핑)
═══════════════════════════════════════════════════════════════ */
:root {
  /* puzzle-shell.css 의 --ps-* 를 style.css 토큰과 연결 */
  --ps-blue:      var(--primary,       #4f46e5);
  --ps-blue-l:    var(--primary-light, #eef2ff);
  --ps-purple:    var(--print-color,   #7c3aed);
  --ps-green:     var(--success,       #10b981);
  --ps-green-l:   var(--success-light, #d1fae5);
  --ps-red:       var(--danger,        #ef4444);
  --ps-red-l:     var(--danger-light,  #fef2f2);
  --ps-amber:     var(--warning,       #f59e0b);
  --ps-amber-l:   var(--warning-light, #fffbeb);
  --ps-text:      var(--text,          #1e293b);
  --ps-text-sub:  var(--text-muted,    #475569);
  --ps-gray-l:    var(--bg,            #f3f4f6);
  --ps-gray-b:    var(--border,        #e5e7eb);
  --ps-radius:    var(--border-radius, 8px);
  --ps-radius-lg: var(--border-radius-lg, 12px);
  --ps-header-h:  var(--header-height, 56px);
}


/* ═══════════════════════════════════════════════════════════════
   7. 인쇄 공통 스타일 (no-print 클래스)
═══════════════════════════════════════════════════════════════ */
@media print {
  .timer-widget,
  .no-print {
    display: none !important;
  }
}