/* ============================================================
   PUZZLE PLATFORM - Main Stylesheet
   ============================================================ */

/* 구글 폰트 font-display 오버라이드: 폰트 로드 대기 없이 즉시 렌더 */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans KR Regular'), local('NotoSansKR-Regular');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Noto Sans KR Bold'), local('NotoSansKR-Bold');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Noto Sans KR Black'), local('NotoSansKR-Black');
}

:root {
  /* Brand colors */
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-light: #DBEAFE;
  --secondary: #64748B;
  --success: #16A34A;
  --success-light: #DCFCE7;
  --danger: #DC2626;
  --danger-light: #FEE2E2;
  --warning: #D97706;
  --warning-light: #FEF3C7;
  --print-color: #7C3AED;
  --print-light: #EDE9FE;

  /* Neutral */
  --bg: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-sidebar: #F1F5F9;
  --border: #E2E8F0;
  --border-dark: #CBD5E1;
  --text: #1E293B;
  --text-muted: #64748B;
  --text-light: #94A3B8;

  /* Layout */
  --header-height: 56px;
  --gamebar-height: 0px;  /* 게임 선택 탭바 제거 — 항상 0 */
  --sidebar-width: 280px;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06);
}

/* ==================== RESET & BASE ==================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  /* 폰트 로드 전에도 시스템 폰트로 즉시 렌더링 (FOUT 최소화) */
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
}

/* ==================== LAYOUT ==================== */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main-content {
  flex: 1;
  padding-top: calc(var(--header-height) + var(--gamebar-height));
  overflow-x: hidden;
}

/* ==================== HEADER ==================== */
#app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: #FFFFFF;
  border-bottom: 1px solid var(--border);
  z-index: 100;
  box-shadow: var(--shadow);
}

/* ==================== FOOTER ==================== */
#app-footer {
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  text-align: center;
}

/* ── 사이트 하단 푸터 (신규 페이지 링크) ── */
#site-footer {
  background: #111827;
  border-top: 1px solid #1f2937;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0; /* flex column 안에서 높이 유지 */
}
.site-footer-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.site-footer-links a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  transition: color 0.15s;
}
.site-footer-links a:hover { color: #a78bfa; }
.site-footer-copy {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
}
.site-footer-sep {
  margin: 0 6px;
  opacity: 0.4;
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copy {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.footer-desc {
  font-size: 12px;
  color: var(--text-muted);
}

@media print {
  #app-footer { display: none; }
  /* print-root 내 크로스수학 인쇄 스타일 */
  .print-page {
    page-break-after: always;
    break-after: page;
  }
  .print-page:last-child {
    page-break-after: avoid;
    break-after: avoid;
  }
}

.header-inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--border-radius);
  transition: background 0.15s;
}

.brand-logo:hover { background: var(--primary-light); }

.brand-logo i { font-size: 20px; }

.header-version {
  font-size: 11px;
  color: var(--text-light);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 800;
  transition: all 0.15s;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: max-content;
}

.nav-btn:hover { background: var(--bg); color: var(--text); border-color: var(--border); }
.nav-btn.active {
  background: #ffffff;
  border-color: #c7d2fe;
  color: #3156d4;
}

/* ── 헤더 아이콘 버튼 (소개·FAQ·문의) ── */
.header-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 15px;
  text-decoration: none;
  transition: all 0.15s;
  flex-shrink: 0;
}
.header-icon-btn:hover { background: var(--bg); color: var(--primary); }

.header-actions { flex-shrink: 0; display: flex; align-items: center; gap: 4px; margin-left: auto; }

.service-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.service-switch-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
}
.service-switch-home {
  color: #4f46e5;
  border-color: #c7d2fe;
  background: #eef2ff;
}

/* ════════════════════════════════════════
   헤더 구분선
════════════════════════════════════════ */
.nav-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
}

/* ════════════════════════════════════════
   카테고리 탭 네비게이션 (.cat-tabs)
════════════════════════════════════════ */
.cat-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 0;
}

/* 탭 래퍼 (position: relative 기준점) */
.cat-tab-wrap {
  position: relative;
}

/* 탭 버튼 */
.cat-tab-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid #dbe5f1;
  background: #ffffff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
  height: 36px;
  flex: 0 0 auto;
  min-width: max-content;
}
.cat-tab-btn:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border);
}
.cat-tab-btn.open,
.cat-tab-btn.active-cat {
  background: #ffffff;
  border-color: #dbe5f1;
  color: var(--text-muted);
  box-shadow: none;
}

.cat-tab-icon {
  font-size: 15px;
  line-height: 1;
}
.cat-tab-label {
  font-size: 13px;
  font-weight: 700;
}
.cat-chev {
  font-size: 9px;
  opacity: .5;
  transition: transform 0.15s;
  margin-left: 1px;
}
.cat-tab-btn.open .cat-chev {
  transform: rotate(180deg);
  opacity: .8;
}

/* ── 드롭다운 패널 ── */
.cat-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(15,23,42,.16);
  z-index: 600;
  padding: 10px;
  min-width: 260px;
  width: min(480px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - var(--header-height, 56px) - 18px);
  max-height: calc(100dvh - var(--header-height, 56px) - 18px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  animation: catDropIn .15s ease;
}
/* 에디터 탭은 오른쪽 정렬 */
.cat-dropdown-right {
  left: auto;
  right: 0;
}
.cat-dropdown.open { display: block; }

@keyframes catDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 드롭다운 내부 그리드 ── */
.cat-dd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 4px;
}

/* ── 아이템 ── */
.cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px 8px;
  border: 1.5px solid transparent;
  background: var(--bg);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: all 0.13s;
  text-align: center;
  line-height: 1.2;
}
.cat-item:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
.cat-item.active {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
.cat-item-icon {
  font-size: 20px;
  line-height: 1;
  display: block;
}
.cat-item-name {
  font-size: 11px;
  font-weight: 700;
  display: block;
  word-break: keep-all;
}

/* 탑바 드롭다운은 빠른 실행 메뉴이므로 베타 준비중 항목은 숨긴다. */
.cat-dropdown .puzzlo-beta-hidden {
  display: none !important;
}
/* 링크형 아이템 색상 */
.cat-item-link {
  color: var(--text-muted);
}
.cat-item-link:hover {
  color: var(--primary);
}
/* 비활성(준비중) */
.cat-item-disabled {
  opacity: 0.45;
  cursor: not-allowed !important;
  pointer-events: none;
}
/* 준비중 배지 */
.cat-badge-soon {
  display: inline-block;
  font-size: 9px;
  background: #94a3b8;
  color: #fff;
  padding: 1px 5px;
  border-radius: 99px;
  margin-left: 3px;
  font-weight: 700;
  vertical-align: middle;
}

/* ── 교과연계 pill 버튼 ── */
.hact-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: #7c3aed;
  color: #fff !important;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
  flex-shrink: 0;
}
.hact-pill:hover { background: #6d28d9; }
.hact-pill span { font-size: 12px; }

/* ── cat-tab-btn a태그 호환 (독립 퍼즐 링크형 탭) ── */
a.cat-tab-btn {
  text-decoration: none;
}

/* 화면이 좁으면 라벨 숨기기 */
@media (max-width: 1100px) {
  .cat-tab-label { display: none; }
  .cat-tab-btn { padding: 6px 9px; }
}
@media (max-width: 900px) {
  .nav-btn-extra { display: none; }
  .hact-pill span { display: none; }
  .hact-pill { padding: 6px 9px; border-radius: 50%; }
}
@media (max-width: 700px) {
  .cat-tabs { gap: 0; }
  .cat-tab-btn { padding: 6px 7px; }
}
/* 더 좁으면 헤더 아이콘 버튼도 축소 */
@media (max-width: 600px) {
  .header-icon-btn { width: 28px; height: 28px; font-size: 13px; }
}

/* ── 헤더 로그인 버튼 ── */
#auth-header-area { display: flex; align-items: center; gap: 8px; }

.auth-login-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: var(--primary); color: #fff;
  border: none; border-radius: 20px;
  cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600;
  transition: background 0.15s;
}
.auth-login-btn:hover { background: var(--primary-dark); }

.auth-signup-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary-light);
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.auth-signup-btn:hover {
  background: #EEF2FF;
  border-color: var(--primary);
}

.auth-avatar-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary); color: #fff;
  border: 2px solid var(--primary-light);
  cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s;
}
.auth-avatar-btn:hover { border-color: var(--primary); }

/* ── 드롭다운 ── */
.auth-dropdown {
  position: fixed; z-index: 500;
  background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 200px; padding: 8px 0;
}
.auth-dropdown-email {
  padding: 8px 16px 6px;
  font-size: 12px; color: var(--text-muted);
  word-break: break-all;
}
.auth-dropdown-hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.auth-dropdown-item {
  width: 100%; text-align: left; background: none; border: none;
  padding: 9px 16px; cursor: pointer; font-family: inherit;
  font-size: 14px; color: var(--text);
  display: flex; align-items: center; gap: 8px;
  transition: background 0.1s;
}
.auth-dropdown-item:hover { background: var(--bg); }

/* ── 모달 오버레이 ── */
.auth-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.auth-modal-box {
  background: #fff; border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  width: 100%; max-width: 560px;
  padding: 32px 32px 28px;
  position: relative;
  max-height: 90vh; overflow-y: auto;
}
.auth-modal-close {
  position: absolute; top: 16px; right: 16px;
  background: var(--bg); border: none; border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer;
  font-size: 14px; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.auth-modal-close:hover { background: var(--border); color: var(--text); }

/* ── 탭 ── */
.auth-tabs {
  display: flex; gap: 0;
  background: var(--bg); border-radius: 10px;
  padding: 4px; margin-bottom: 24px;
}
.auth-tab {
  flex: 1; padding: 8px 0; border: none; background: none;
  border-radius: 8px; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 600; color: var(--text-muted);
  transition: all 0.15s;
}
.auth-tab.active { background: #fff; color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,.1); }

/* ── 패널 ── */
.auth-title { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.auth-desc  { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; line-height: 1.6; }

.auth-hero {
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.auth-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.auth-connect-card,
.auth-consent-card,
.auth-note-box {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f8fafc;
  padding: 14px;
  margin-bottom: 14px;
}
.auth-connect-title,
.auth-consent-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
}
.auth-connect-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.auth-connect-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}
.auth-connect-pill.active {
  border-color: var(--primary-light);
  background: #eef2ff;
  color: var(--primary);
}
.auth-connect-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}
.auth-btn-outline {
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  border: 1.5px solid var(--primary);
  border-radius: 10px;
  background: #fff;
  color: var(--primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.auth-btn-outline:hover { background: #eef2ff; }
.auth-collapsible-panel { padding-top: 14px; }
.auth-collapsible-panel[hidden] { display: none; }
.auth-guide-link {
  display: block;
  margin: -2px 0 16px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}
.auth-guide-link:hover { text-decoration: underline; }

.auth-consent-card {
  background: #fff;
}
.auth-consent-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.auth-consent-item input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex: none;
}
.auth-consent-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 8px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
}
.auth-consent-links a {
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.auth-consent-links a:hover { text-decoration: underline; }

.auth-note-box strong {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}
.auth-note-box ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.65;
}

/* ── Google 버튼 ── */
.auth-btn-google {
  width: 100%; padding: 11px 16px;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 10px; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background 0.15s; margin-bottom: 16px;
}
.auth-btn-google:hover { background: var(--bg); }

/* ── 구분선 ── */
.auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; color: var(--text-muted); font-size: 12px;
}
.auth-divider::before,
.auth-divider::after { content:''; flex:1; height:1px; background: var(--border); }

/* ── 입력 필드 ── */
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
.auth-field input,
.auth-field select {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: 14px; color: var(--text);
  background: #fff; transition: border-color 0.15s;
  box-sizing: border-box;
}
.auth-field input:focus,
.auth-field select:focus { outline: none; border-color: var(--primary); }

/* ── 기본 버튼 ── */
.auth-btn-primary {
  width: 100%; padding: 12px;
  background: var(--primary); color: #fff; border: none;
  border-radius: 10px; cursor: pointer; font-family: inherit;
  font-size: 15px; font-weight: 700; margin-top: 4px;
  transition: background 0.15s;
}
.auth-btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.auth-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── 에러·성공 메시지 ── */
.auth-error {
  font-size: 13px; color: var(--danger);
  background: var(--danger-light); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 10px;
  display: none;
}
.auth-success {
  font-size: 13px; color: var(--success);
  background: #F0FDF4; border-radius: 8px;
  padding: 8px 12px; margin-bottom: 10px;
}

/* ── 텍스트 링크 ── */
.auth-link {
  display: block; width: 100%; text-align: center;
  margin-top: 12px; background: none; border: none;
  cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--text-muted);
  text-decoration: underline;
}
.auth-link:hover { color: var(--primary); }

/* 모바일 */
@media (max-width: 480px) {
  .auth-modal-box { padding: 24px 20px 20px; }
  .auth-login-btn span { display: none; }
  .auth-signup-btn span { display: none; }
}

/* ==================== BUTTONS ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }

.btn-secondary { background: var(--bg-sidebar); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--border); }

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover:not(:disabled) { background: #15803D; }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #B91C1C; }

.btn-print { background: var(--print-color); color: #fff; }
.btn-print:hover:not(:disabled) { background: #6D28D9; }

/* 관리자 버튼 */
#btn-admin {
  background: linear-gradient(135deg, #ff4757, #c0392b);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: none; /* JS에서 관리자 확인 후 표시 */
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}
#btn-admin:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,71,87,0.4); }
@media (max-width: 480px) { .admin-btn-label { display: none; } }

.btn-large { padding: 10px 24px; font-size: 15px; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }

.btn-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  transition: all 0.15s;
}

.btn-icon:hover { background: var(--bg); color: var(--text); }

/* ==================== VIEWS ==================== */
.view { display: none; }
.view.active { display: block; }

/*
 * ★ STANDALONE VIEW 공통 규칙 ★
 * 게임바 없이 독립 화면으로 표시되는 뷰에 .standalone-view 클래스를 추가하면
 * JS의 #main-content padding-top 값과 무관하게 항상 헤더 바로 아래에 고정됩니다.
 * 새 게임 추가 시 해당 섹션에 class="view standalone-view" 추가만 하면 됩니다.
 */
.standalone-view {
  position: fixed !important;
  top: var(--header-height) !important;
  left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  background: var(--bg);
  z-index: 10;
  display: none;
  flex-direction: column;
}
.standalone-view.active {
  display: flex;
}

/* ── standalone-view 공통 탑바 ── */
.sv-topbar {
  width: 100%;
  background: #fff;
  border-bottom: 2px solid #e5e7eb;
  padding: 0 10px;
  height: var(--ps-topbar-h, 46px);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
}
.sv-topbar::-webkit-scrollbar { display: none; }
.sv-topbar strong {
  color: #4f46e5;
  font-size: 14px;
  white-space: nowrap;
}
.sv-seed-disp {
  font-family: monospace;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  background: #f1f5f9;
  border: 2px solid #e5e7eb;
  border-radius: 5px;
  padding: 0 8px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  min-width: 80px;
}
.sv-badge-unique {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #065f46;
  background: #d1fae5;
  border: 1.5px solid #6ee7b7;
  border-radius: 99px;
  padding: 2px 10px;
}

/* ── standalone-view 공통 사이드바 ── */
.sv-side {
  width: 220px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── SEED 입력 공통 ── */
.sv-seed-input {
  width: 100%;
  height: 34px;
  border: 2px solid #e5e7eb;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 0 8px;
  outline: none;
  margin-bottom: 5px;
  color: #1e293b;
  font-family: monospace;
  box-sizing: border-box;
}
.sv-seed-input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px #eef2ff;
}
.sv-seed-action-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
}
.sv-seed-regen-btn {
  width: 100%;
  padding: 8px 4px;
  border-radius: 7px;
  border: 2px solid #fb923c;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  background: #fff7ed;
  color: #ea580c;
  white-space: nowrap;
  font-family: inherit;
  transition: all .15s;
}
.sv-seed-regen-btn:hover {
  background: #ffedd5;
  border-color: #ea580c;
}

/* ==================== GENERATOR LAYOUT ==================== */
.generator-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: calc(100vh - var(--header-height) - var(--gamebar-height));
  align-items: start;
}

/* ==================== SIDEBAR ==================== */
#sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 16px;
  overflow-y: auto;
  height: calc(100vh - var(--header-height) - var(--gamebar-height));
  position: sticky;
  top: calc(var(--header-height) + var(--gamebar-height));
}

/* 사이드바 현재 게임 헤더 */
#sidebar-game-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--primary);
  border-radius: var(--border-radius);
  margin-bottom: 16px;
}

.sidebar-game-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.sidebar-game-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar-game-name {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.sidebar-game-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar-section {
  margin-bottom: 20px;
}

.sidebar-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==================== GAME TABS (구 사이드바용 — 미사용) ==================== */
.game-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.game-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: all 0.15s;
  text-align: left;
  position: relative;
}

.game-tab:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.game-tab.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.game-tab:disabled { opacity: 0.5; cursor: not-allowed; }

.game-tab small {
  margin-left: auto;
  font-size: 10px;
  background: var(--warning-light);
  color: var(--warning);
  padding: 2px 5px;
  border-radius: 3px;
}

/* ==================== DIFFICULTY CARDS ==================== */
.difficulty-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.diff-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.15s;
  width: 100%;
}

.diff-card:hover { border-color: var(--primary); }
.diff-card.active { border-color: var(--primary); background: var(--primary-light); }

.diff-icon { font-size: 20px; flex-shrink: 0; }

.diff-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.diff-info strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 5px;
}

.diff-lv {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 3px;
}

/* 난이도 태그 (크기, 지뢰 수) */
.diff-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 1px 0;
}

.diff-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

.diff-info small {
  font-size: 10px;
  color: var(--text-muted);
  display: block;
  line-height: 1.3;
}

/* 사용 규칙 표시 */
.diff-rules {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}

/* ==================== SEED INPUT ==================== */
.seed-input-group {
  display: flex;
  gap: 6px;
  align-items: center;
}

.seed-input-group input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}

.seed-input-group input:focus { border-color: var(--primary); }

.hint-text {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 4px;
}

/* ==================== STATUS MSG ==================== */
.status-msg {
  padding: 8px 12px;
  border-radius: var(--border-radius);
  font-size: 12px;
  margin-top: 8px;
}

.status-loading { background: var(--primary-light); color: var(--primary); }
.status-success { background: var(--success-light); color: var(--success); }
.status-error { background: var(--danger-light); color: var(--danger); }

/* ==================== ACTION BTNS ==================== */
.action-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

/* 퍼즐 생성 전 안내 문구 */
.actions-placeholder {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-sidebar);
  border: 1px dashed var(--border-dark);
  border-radius: var(--border-radius);
  padding: 7px 10px;
  margin-bottom: 8px;
}
.actions-placeholder i { color: var(--primary); }

/* ==================== PUZZLE META ==================== */
.puzzle-meta {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.meta-row {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}

.meta-row:last-child { border-bottom: none; }

.meta-label {
  color: var(--text-muted);
  width: 70px;
  flex-shrink: 0;
}

.meta-value {
  color: var(--text);
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seed-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

/* ==================== BOARD AREA ==================== */
.board-area {
  padding: 24px;
  overflow-y: auto;
  overflow-x: auto;   /* 큰 그리드(20×20)가 잘리지 않도록 */
  min-width: 0;        /* flex/grid 자식에서 overflow 허용 */
}

/* ==================== EMPTY STATE ==================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center;
  gap: 12px;
  padding: 40px;
}

.empty-icon {
  font-size: 64px;
  opacity: 0.15;
}

.empty-state h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

.empty-state p {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 320px;
}

.empty-state .hint {
  font-size: 12px;
  color: var(--text-light);
}

/* ==================== EMPTY STATE STEP GUIDE ==================== */
.empty-steps {
  display: flex;
  gap: 0;
  align-items: stretch;
  margin-top: 4px;
  max-width: 480px;
  width: 100%;
}

.empty-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

/* 스텝 사이 연결선 */
.empty-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 20px;
  right: -28px;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--border-dark), var(--border));
  z-index: 0;
}

.empty-step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-light);
  border: 2px solid var(--primary);
  color: var(--primary);
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: all 0.2s;
}

.empty-step:nth-child(3) .empty-step-num {
  background: var(--print-light);
  border-color: var(--print-color);
  color: var(--print-color);
}

.empty-step-icon {
  font-size: 16px;
  margin-top: 8px;
  color: var(--text-muted);
}

.empty-step-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
}

.empty-step-sub {
  font-size: 10px;
  color: var(--text-light);
  margin-top: 2px;
  text-align: center;
  line-height: 1.3;
}

/* 첫 번째 단계 강조 (지금 해야 할 것) */
.empty-step:first-child .empty-step-num {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
  animation: pulse-step 2s ease-in-out infinite;
}

@keyframes pulse-step {
  0%, 100% { box-shadow: 0 0 0 4px rgba(37,99,235,.15); }
  50%       { box-shadow: 0 0 0 8px rgba(37,99,235,.05); }
}

/* ==================== PUZZLE CONTAINER ==================== */
.puzzle-container {
  max-width: 900px;
  margin: 0 auto;
}

.minesweeper-play-container {
  max-width: min(100%, 1180px);
  padding: 14px 16px 120px;
  box-sizing: border-box;
}

.minesweeper-play-container #ms-play-answer-wrap {
  justify-content: center;
  overflow: visible;
}

.minesweeper-play-container #play-board-section {
  max-width: 100%;
  overflow: auto;
  padding: 4px 8px 96px;
  box-sizing: border-box;
}

.minesweeper-play-container #play-board {
  margin: 0 auto;
}

/* Minesweeper Shell v2: electronic-board first layout */
body.minesweeper-shell-v2 #puzzle-common-topbar,
body.minesweeper-shell-v2 #play-topbar {
  display: none !important;
}

body.minesweeper-shell-v2 {
  padding-top: 0 !important;
}

body.minesweeper-shell-v2 #main-content {
  padding-top: var(--header-height, 56px) !important;
}

body.minesweeper-shell-v2 #app-footer,
body.minesweeper-shell-v2 #site-footer {
  display: none !important;
}

body.minesweeper-shell-v2 .generator-layout {
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: calc(100dvh - var(--header-height, 56px));
}

body.minesweeper-shell-v2 #view-generator #sidebar {
  top: 0 !important;
  height: calc(100dvh - var(--header-height, 56px)) !important;
  overflow: visible !important;
  z-index: 25;
}

body.minesweeper-shell-v2 #section-minesweeper-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.minesweeper-shell-v2 #section-minesweeper-controls #section-ms-print-qty,
body.minesweeper-shell-v2 #section-minesweeper-controls #section-generate,
body.minesweeper-shell-v2 #section-minesweeper-controls #puzzle-actions .action-btns,
body.minesweeper-shell-v2 #section-minesweeper-controls #puzzle-actions #puzzle-actions-placeholder,
body.minesweeper-shell-v2 #mw-board-actions,
body.minesweeper-shell-v2 .pz-board-actions-proxy {
  display: none !important;
}

.mw-difficulty-section {
  position: relative;
  z-index: 40;
}

.mw-select-trigger {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 2px solid #dbe4ff;
  border-radius: 8px;
  background: #f8fbff;
  color: #1e3a8a;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.mw-difficulty-popover {
  display: none !important;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: min(420px, calc(100dvh - 170px));
  overflow-y: auto;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .18);
}

.mw-difficulty-section.open .mw-difficulty-popover {
  display: flex !important;
}

.mw-seed-actions,
.mw-output-actions {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.mw-seed-actions {
  grid-template-columns: 1fr 1fr;
}

.mw-output-actions {
  grid-template-columns: 1fr 1fr;
}

.mw-output-actions #mw-btn-print {
  grid-column: 1 / -1;
}

.mw-seed-actions #mw-btn-print {
  grid-column: 1 / -1;
}

.mw-side-btn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid #dbe4ff;
  border-radius: 8px;
  background: #fff;
  color: #1e3a8a;
  padding: 7px 8px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 850;
  cursor: pointer;
}

.mw-side-btn-primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.mw-side-btn-secondary {
  background: #fff7ed;
  border-color: #fb923c;
  color: #c2410c;
}

.mw-side-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

body.minesweeper-shell-v2 .minesweeper-play-container {
  width: min(100%, var(--pz-compare-max));
  max-width: none;
  margin: 0 auto;
  padding: 20px 14px 18px;
}

body.minesweeper-shell-v2 .minesweeper-play-container .board-header {
  display: none;
}

body.minesweeper-shell-v2 #ms-play-answer-wrap {
  gap: 16px !important;
  margin: 20px auto 0;
  width: 100%;
}

body.minesweeper-shell-v2 .mw-board-compare {
  justify-content: center;
  align-items: flex-start !important;
  flex-wrap: wrap;
  gap: 16px !important;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.mw-play-column {
  flex: 0 0 auto;
  min-width: 0;
  width: max-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

body.minesweeper-shell-v2 .mw-rule-details {
  display: none !important;
}

.mw-rule-details {
  width: min(100%, 680px);
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  background: #f8fbff;
  color: #1e3a8a;
}

.mw-rule-details summary {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.mw-rule-details .mine-how-to {
  margin: 0;
  border: 0;
  border-top: 1px solid #dbe4ff;
  border-radius: 0 0 8px 8px;
  box-shadow: none;
}

body.minesweeper-shell-v2 .mw-legacy-how-to {
  display: none !important;
}

body.minesweeper-shell-v2 #play-board-section {
  width: max-content;
  max-width: 100%;
  padding: 0 !important;
  overflow: visible !important;
}

.mw-control-dock {
  width: 260px;
  flex: 0 0 260px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #dbe4ff;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
}

.mw-dock-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
}

.mw-dock-title-row {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mw-dock-title {
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.mw-help-trigger {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #fff;
  color: #4f46e5;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(79, 70, 229, .12);
}

.mw-help-trigger:hover,
.mw-help-trigger.is-open {
  background: #eef2ff;
  border-color: #818cf8;
  color: #3730a3;
}

.mw-help-popover {
  position: absolute;
  top: 48px;
  right: 12px;
  z-index: 30;
  width: 260px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  background: #fff;
  color: #1e293b;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
}

.mw-help-popover[hidden] {
  display: none !important;
}

.mw-help-title {
  color: #312e81;
  font-size: 13px;
  font-weight: 900;
}

.mw-help-row {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
}

.mw-help-row strong {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 900;
}

.mw-dock-difficulty {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 12px;
  font-weight: 900;
}

.mw-dock-total {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 6px;
  padding: 8px 10px 7px;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  font-weight: 900;
}

.mw-dock-total span {
  align-self: center;
  font-size: 12px;
}

.mw-dock-total strong {
  color: #c2410c;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 40px;
  line-height: .9;
  text-align: center;
}

.mw-dock-status {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f1f5f9;
  color: #334155;
  font-weight: 900;
  font-family: 'JetBrains Mono', Consolas, monospace;
}

.mw-dock-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 2px solid #c7d2fe;
  border-radius: 8px;
  background: #fff;
  color: #1e3a8a;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}

.mw-dock-btn-primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.mw-dock-btn-danger {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}

.mw-dock-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.mw-dock-hint {
  margin: 2px 0 0;
  color: #64748b;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

body.minesweeper-shell-v2 #answer-panel {
  width: 260px;
  max-width: 260px;
}

.mw-confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9998;
}

.mw-confetti-piece {
  position: absolute;
  top: -18px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  background: var(--mw-confetti-color);
  animation: mw-confetti-fall 1.35s cubic-bezier(.2, .65, .25, 1) forwards;
}

@keyframes mw-confetti-fall {
  from { transform: translate3d(0, -20px, 0) rotate(0deg); opacity: 1; }
  to { transform: translate3d(var(--mw-confetti-x), calc(100dvh + 40px), 0) rotate(var(--mw-confetti-r)); opacity: 0; }
}

.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid #e5e7eb;
  flex-wrap: wrap;
}

/* 왼쪽: 제목 + 뱃지들 */
.board-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.board-header h2 {
  font-size: 17px;
  font-weight: 800;
  color: #1e1b4b;
  margin: 0;
}

/* Seed 표시 (오른쪽) */
.board-header-seed {
  font-size: 12px;
  font-weight: 700;
  font-family: monospace;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  padding: 2px 8px;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.badge {
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  background: #e0e7ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}

/* 난이도 뱃지 색상 */
.badge-easy    { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.badge-medium  { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.badge-hard    { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.badge-expert  { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }

.badge-mines {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}

.board-section {
  margin-bottom: 20px;
}

.board-section-label {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-muted);
}

/* 폭탄 카운팅 팁 */
.bomb-counting-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #FFF8E1;
  border: 1px solid #FFE082;
  border-left: 4px solid #FFC107;
  border-radius: 6px;
  padding: 9px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #5D4037;
  line-height: 1.5;
  max-width: 600px;
}
.bomb-counting-tip i {
  color: #FFA000;
  margin-top: 2px;
  flex-shrink: 0;
}
.bomb-counting-tip strong {
  color: #E65100;
}

/* ── 지뢰찾기 풀이법 안내 배너 ── */
.mine-how-to {
  background: linear-gradient(135deg, #FFF8E1 0%, #E8F5E9 100%);
  border: 1px solid #C8E6C9;
  border-left: 4px solid #4CAF50;
  border-radius: 8px;
  padding: 11px 14px;
  margin-bottom: 14px;
  max-width: 640px;
}
.mine-how-to-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #2E7D32;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.mine-how-to-title i {
  color: #FFA000;
}
.mine-how-to-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mine-step {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 7px;
  padding: 7px 11px 7px 8px;
  flex: 1;
  min-width: 130px;
}
.mine-step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}
.safe-icon {
  background: #E3F2FD;
  color: #1565C0;
  font-size: 17px;
  font-weight: 900;
}
.mine-icon {
  background: #FCE4EC;
  color: #C62828;
  font-size: 15px;
}
.count-icon {
  background: #F3E5F5;
  color: #6A1B9A;
  font-size: 11px;
  font-weight: 900;
  width: 36px;
  border-radius: 8px;
}
.mine-step-text {
  font-size: 11.5px;
  color: #424242;
  line-height: 1.45;
}
.mine-step-text strong {
  color: #212121;
  font-size: 12px;
}
.mine-step-text em {
  color: #1565C0;
  font-style: normal;
  font-weight: 600;
}
.mine-step-arrow {
  font-size: 18px;
  color: #bdbdbd;
  flex-shrink: 0;
  font-weight: 700;
  margin: 0 -2px;
}

/* ==================== SUDOKU GRID (SCREEN) ==================== */

/* 공통 스도쿠 팁 박스 */
.sudoku-tip-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #E3F2FD;
  border: 1px solid #90CAF9;
  border-left: 4px solid #1565C0;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #1A237E;
  line-height: 1.5;
  max-width: 700px;
}
.sudoku-tip-box i { color: #1565C0; margin-top: 2px; flex-shrink: 0; }
.sudoku-tip-box strong { color: #B71C1C; }

/* 스도쿠 게임 영역: 보드 + 오른쪽 사이드패널 가로 배치, 화면 가운데 */
#sudoku-play-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  width: 100%;
  flex-wrap: wrap;          /* 정답 패널이 넘칠 때 다음 줄로 (좁은 화면 대비) */
}

/* 왼쪽: 보드 컬럼 */
#sudoku-board-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* 가운데: 키패드 + 버튼 패널 */
#sudoku-side-panel {
  flex: 0 0 auto;
  width: 132px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 28px;   /* 팁박스 높이만큼 내려서 보드와 정렬 */
}

/* 오른쪽: 정답 패널 — 기본 숨김, toggleAnswer 시 flex 전환 */
.sudoku-answer-col {
  display: none;           /* 기본 숨김 */
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .25s ease, transform .25s ease;
}
.sudoku-answer-col.sd-answer-visible {
  display: flex !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}
/* 정답 패널 상단 레이블 */
.sudoku-answer-label {
  font-size: 11px;
  font-weight: 800;
  color: #059669;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #d1fae5;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 팁박스 컴팩트 버전 (왼쪽에 작게) */
.sudoku-tip-compact {
  font-size: 11px;
  color: #475569;
  line-height: 1.55;
  padding: 5px 9px;
  background: #EFF6FF;
  border-left: 3px solid #1565C0;
  border-radius: 5px;
  margin-bottom: 0;
}
.sudoku-tip-compact strong { color: #1565C0; }

/* 오른쪽 키패드: 2열 그리드 */
#sudoku-side-kp-nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
#sudoku-side-kp-nums button {
  width: 100%;
  height: 42px;          /* aspect-ratio 제거 → 고정 높이로 콤팩트 */
  border-radius: 8px;
  border: 2px solid #E2E8F0;
  background: #F8FAFC;
  font-size: 17px;       /* 20px → 17px */
  font-weight: 800;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
#sudoku-side-kp-nums button:hover  { background: #DBEAFE; border-color: #3B82F6; transform: scale(1.06); }
#sudoku-side-kp-nums button:active { transform: scale(0.94); filter: brightness(0.9); }
#sudoku-side-kp-nums button.erase-btn { background: #FFF1F2; border-color: #FDA4AF; font-size: 14px; }
#sudoku-side-kp-nums button.erase-btn:hover { background: #FFE4E6; border-color: #F43F5E; }

/* 제출 버튼 (오른쪽 패널 안) */
/* 제출·채점 버튼 — kk-std-btn-submit 사양 통일 */
#sudoku-side-submit {
  width: 100%;
  padding: 14px 8px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #1565C0, #1976D2);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: 0 3px 10px rgba(21,101,192,0.35);
  transition: opacity 0.15s, transform 0.1s;
  font-family: inherit;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
}
#sudoku-side-submit:hover  { opacity: 0.88; }
#sudoku-side-submit:active { transform: scale(0.97); }


/* 입력힌트 */
.sudoku-kb-hint { font-size: 10px; color: #94a3b8; text-align: center; line-height: 1.5; }

/* 통계 바 */
.sudoku-stat-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
  box-shadow: 0 1px 6px rgba(0,0,0,0.10);
  border: 1.5px solid #e5e7eb;
}
.sudoku-stat-count {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: 14px;
}
.sudoku-stat-label { font-size: 12px; color: #64748b; font-weight: 600; }
.sudoku-stat-value { font-family: monospace; font-size: 15px; font-weight: 800; color: #1565C0; min-width: 50px; }
.sudoku-stat-track { flex: 1; min-width: 80px; height: 7px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.sudoku-stat-fill  { height: 100%; width: 0%; background: linear-gradient(90deg, #22C55E, #0EA5E9); border-radius: 99px; transition: width 0.4s ease; }

/* 기존 board-section 여백 정리 */
#sudoku-container .board-section { margin-bottom: 6px; }
#sudoku-container .board-section-label { margin-bottom: 4px; font-size: 12px; }

/* 기존 아래쪽 키패드/제출줄 숨김 (오른쪽으로 이동) */
#sudoku-keypad-wrap { display: none !important; }
.pi-submit-row { display: none !important; }

/* 스도쿠 제출 버튼 — 터치 타겟 최소 44px 보장 */
#sudoku-side-submit {
  min-height: 44px;
  touch-action: manipulation;
}

/* 반응형: 작은 화면 — 사이드패널 아래로 */
@media (max-width: 680px) {
  #sudoku-play-layout { flex-direction: column; align-items: center; }
  #sudoku-side-panel  { width: 100%; max-width: 400px; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  #sudoku-side-kp-nums { grid-template-columns: repeat(5, 1fr); width: 100%; }
  #sudoku-side-kp-nums button { font-size: 15px; height: 44px; }  /* 모바일: 터치 영역 확대 */
  #sudoku-side-submit { max-width: 100%; width: 100%; flex: 1 1 100%; min-height: 44px; }
  #sudoku-keypad-wrap { display: none !important; }
  /* 모바일: 보드가 화면 너비에 맞게 축소 */
  .sudoku-9 { width: min(468px, calc(100vw - 48px)); height: min(468px, calc(100vw - 48px)); }
  .sudoku-6 { width: min(318px, calc(100vw - 48px)); height: min(318px, calc(100vw - 48px)); }
  .sudoku-4 { width: min(260px, calc(100vw - 48px)); height: min(260px, calc(100vw - 48px)); }
  /* 보드 셀 폰트도 비례 축소 */
  .sudoku-9 .sd-cell { font-size: clamp(14px, 4.5vw, 22px); }
  .sudoku-6 .sd-cell { font-size: clamp(16px, 5.5vw, 26px); }
  .sudoku-4 .sd-cell { font-size: clamp(20px, 7vw, 32px); }
  /* 정답 패널 — 세로 모드에서 전체 너비 */
  .sudoku-answer-col.sd-answer-visible {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ══════════════════════════════════════════
   스도쿠 그리드 — 깔끔한 게임판 디자인
   border 방식: 셀에 직접 얇은 선 / 박스 경계에 굵은 선
   ══════════════════════════════════════════ */
.sudoku-grid {
  display: inline-grid;
  gap: 0;
  border: none;        /* 외곽 border는 JS가 외곽 셀에 직접 주입 */
  background: #fff;
  box-sizing: content-box;
  overflow: visible;
  border-radius: 3px;
  box-shadow: 0 8px 32px rgba(21,50,100,0.20), 0 2px 8px rgba(0,0,0,0.10);
  touch-action: manipulation;   /* 더블탭 줌 방지, 터치 즉각 반응 */
  -webkit-tap-highlight-color: transparent;
}

/* ── 크기별 그리드 열/행 정의 ── */
.sudoku-4 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); }
.sudoku-6 { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); }
.sudoku-9 { grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); }

/* ── 크기별 보드 전체 크기 (셀 크기 = 보드÷N) ── */
.sudoku-4  { width: 260px; height: 260px; }
.sudoku-6  { width: 318px; height: 318px; }
.sudoku-9  { width: 468px; height: 468px; }

/* ── 셀 폰트 크기 ── */
.sudoku-4  .sd-cell { font-size: 32px; }
.sudoku-6  .sd-cell { font-size: 26px; }
.sudoku-9  .sd-cell { font-size: 22px; }

/* ── 개별 셀 기본 ── */
/* border는 JS _applyBorder()가 r,c 위치에 따라 inline으로 직접 주입 */
/* CSS에서 border 지정 안 함 → 이중선/간격 문제 원천 차단 */
.sd-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  box-sizing: border-box;
  background: #ffffff;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  transition: background 0.12s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── 주어진 숫자(힌트) ── */
.sd-cell.given {
  background: #EBF0FA;
  font-weight: 900;
}

/* 정답 보드: 풀린 칸 */
.sd-cell.answer-filled {
  background: #EDE7F6;
  font-weight: 700;
  opacity: 0.92;
}

/* ── 메모(후보 숫자) 그리드 ── */
.sd-memo {
  display: grid;
  position: absolute;
  inset: 2px;
  gap: 0;
  pointer-events: none;
  z-index: 1;
}
.sd-memo span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
  color: #6B7280;   /* 기본: 짙은 회색 */
  transition: color 0.1s;
}
/* 셀 크기별 메모 폰트 조정 */
.sudoku-4  .sd-memo span { font-size: 16px; }
.sudoku-6  .sd-memo span { font-size: 13px; }
.sudoku-9  .sd-memo span { font-size: 11px; }

/* 메모 모드 활성화 시 셀 배경 힌트 */
.sudoku-grid.memo-mode .sd-input:not(.given) {
  background: #FFFDE7;
}
.sudoku-grid.memo-mode .sd-input:not(.given):hover {
  background: #FFF9C4;
}

/* 메모 모드에서 선택된 셀 강조 */
.sd-cell.sd-memo-selected {
  background: #FFF8E1 !important;
  outline: 2px solid #F9A825;
  outline-offset: -2px;
  z-index: 2;
}
.sd-cell.sd-memo-selected .sd-memo span {
  color: #6D4C41;
}

/* 메모 모드 버튼 활성 상태 */
#sudoku-tb-memo.memo-active {
  background: rgba(255, 235, 59, 0.35) !important;
  border-color: #FFD600 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px #FFD60055;
}

/* 인터랙티브 입력 가능 셀 */
.sd-cell.sd-input {
  cursor: pointer !important;
  background: #FAFAFA;
}
.sd-cell.sd-input:hover {
  background: #EFF6FF !important;
}
/* 선택된 스도쿠 입력 셀 (pi-selected 위에 스도쿠 전용 강조) */
.sd-cell.sd-input.pi-selected {
  background: #DBEAFE !important;
  box-shadow: inset 0 0 0 2.5px #3B82F6 !important;
  z-index: 2;
}
/* 채점 후 정답 셀 */
.sd-cell.sd-input.pi-cell-correct {
  background: #F0FDF4 !important;
  box-shadow: inset 0 0 0 2px #22C55E !important;
}
.sd-cell.sd-input.pi-cell-correct .pi-user-val { color: #15803D; }
/* 채점 후 오답 셀 */
.sd-cell.sd-input.pi-cell-wrong {
  background: #FFF1F2 !important;
  box-shadow: inset 0 0 0 2px #F43F5E !important;
}
.sd-cell.sd-input.pi-cell-wrong .pi-user-val { color: #BE123C; }

/* 스도쿠 힌트 패널 */
.sudoku-hints {
  margin-top: 16px;
  padding: 12px 16px;
  background: #F8F9FA;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 500px;
}
.hint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.hint-label { color: var(--text-muted); }
.hint-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.hint-tag {
  background: #E3F2FD;
  color: #1565C0;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 600;
}
.hint-tip {
  font-size: 12px;
  color: #5D4037;
  background: #FFF8E1;
  border: 1px solid #FFE082;
  border-radius: 4px;
  padding: 6px 8px;
  line-height: 1.5;
}

/* 스도쿠 컨테이너 */
#sudoku-container {
  max-width: none !important;
  padding: 0 4px;
}
/* 보드는 inline-grid라 overflow 불필요 — 스크롤 제거 */
#sudoku-board {
  overflow: visible;
}

/* 반응형: 중간 화면 */
@media (max-width: 860px) {
  .sudoku-9 { width: 414px; height: 414px; }
  .sudoku-9 .sd-cell { font-size: 20px; }
  .sudoku-9 .sd-memo span { font-size: 10px; }
}

/* 반응형: 작은 화면 (~600px) */
@media (max-width: 600px) {
  .sudoku-4 { width: 220px; height: 220px; }
  .sudoku-6 { width: 276px; height: 276px; }
  .sudoku-9 { width: 342px; height: 342px; }
  .sudoku-4 .sd-cell { font-size: 26px; }
  .sudoku-6 .sd-cell { font-size: 21px; }
  .sudoku-9 .sd-cell { font-size: 17px; }
  .sudoku-4 .sd-memo span { font-size: 13px; }
  .sudoku-6 .sd-memo span { font-size: 11px; }
  .sudoku-9 .sd-memo span { font-size: 9px; }
}
/* 셀 터치 피드백 */
.sd-cell.sd-input:active {
  background: #E8F4FF !important;
  transform: scale(0.95);
  transition: transform 0.08s ease;
}
/* 모바일 키패드 버튼 터치 피드백 */
#sudoku-kp-nums button:active,
#sudoku-memo-keys button:active {
  transform: scale(0.92);
  filter: brightness(0.88);
}
/* 통계 바 */
#sudoku-stat-bar-wrap {
  border-radius: 10px;
}
@media (max-width: 480px) {
  #sudoku-stat-bar-wrap { padding: 7px 10px; gap: 8px; }
  #sudoku-stat-timer { font-size: 13px; }
  #sudoku-stat-answers { font-size: 13px; }
}

/* ==================== PUZZLE GRID ==================== */
.puzzle-grid {
  display: grid;
  gap: 0;
  border: none;
  /*
   * 외곽 테두리를 box-shadow로 그림.
   * 셀 border(1px)가 컨테이너 border와 겹쳐 오른쪽·아래가 얇아 보이는 문제 해결:
   * box-shadow는 레이아웃 밖에 그려지므로 셀 border와 절대 겹치지 않음 → 항상 2px 균일
   */
  box-shadow: 0 0 0 2px #222;
  /* width/height는 JS에서 inline으로 명시 설정 */
  overflow: visible;
  flex-shrink: 0;
}

.grid-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #888;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  box-sizing: border-box;
  user-select: none;
  overflow: hidden;
  /* width/height는 JS에서 inline으로 명시 설정 (fallback만) */
}

/* Grid sizes — fallback (JS inline style 우선, 여기서는 font-size만 실질 역할) */
.grid-4  .grid-cell { width: 80px; height: 80px; font-size: 36px; }
.grid-6  .grid-cell { width: 70px; height: 70px; font-size: 32px; }
.grid-8  .grid-cell { width: 60px; height: 60px; font-size: 27px; }
.grid-10 .grid-cell { width: 54px; height: 54px; font-size: 24px; }
.grid-15 .grid-cell { width: 46px; height: 46px; font-size: 21px; }
.grid-20 .grid-cell { width: 40px; height: 40px; font-size: 18px; }

.grid-cell.revealed {
  background: #FAFAFA;
}

/* 미공개 빈칸 — 흰색 배경 */
.grid-cell.cell-hidden {
  background: #ffffff;
  border-color: #ccc;
}

/* Answer cells */
.answer-cell.mine-cell {
  background: #FFF0F0;
}

.answer-cell.safe-cell {
  background: #FAFAFA;
}

.mine-icon { font-size: 0.85em; }

/* ══════════════════════════════════════════════════════
   인터랙티브 풀이 보드 — 셀 상태별 스타일
   blank → safe(X) → mine(🔴순번) 3단계 토글
   ══════════════════════════════════════════════════════ */

/* 풀이 보드 컨테이너 */
.play-board {
  cursor: pointer;
}

/* blank: 클릭 가능한 빈 칸 */
.play-board .grid-cell.cell-blank {
  background: #ffffff;
  border-color: #ccc;
  cursor: pointer;
  transition: background 0.12s;
}
.play-board .grid-cell.cell-blank:hover {
  background: #f0f7ff;
  border-color: #90caf9;
}
.play-board .grid-cell.cell-blank:active {
  background: #dbeafe;
}

/* safe: X 표시 (안전 확정 칸) */
.play-board .grid-cell.cell-safe {
  background: #f0fdf4;
  border-color: #86efac;
  color: #16a34a;
  font-weight: 900;
  font-size: 0.85em;
  cursor: pointer;
}
.play-board .grid-cell.cell-safe:hover {
  background: #dcfce7;
}

/* mine: 지뢰 마킹 (빨간 원 + 순번) */
.play-board .grid-cell.cell-mine {
  background: #fff0f0;
  border-color: #fca5a5;
  cursor: pointer;
  position: relative;
}
.play-board .grid-cell.cell-mine:hover {
  background: #fee2e2;
}

/* 빨간 원 배지 */
.mine-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64%;
  height: 64%;
  min-width: 20px;
  min-height: 20px;
  background: #dc2626;
  color: #fff;
  border-radius: 50%;
  font-size: 0.78em;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
  pointer-events: none;
  flex-shrink: 0;
}

/* 작은 그리드(15×15, 20×20)에서 배지 크기 조정 */
.grid-15 .mine-badge { font-size: 0.72em; }
.grid-20 .mine-badge { font-size: 0.66em; min-width: 16px; min-height: 16px; }

/* ── 모바일 터치 최적화 ─────────────────────────────────── */
/* 터치 활성 피드백 */
.play-board .grid-cell.touch-active {
  background: #bfdbfe !important;
  border-color: #3b82f6 !important;
  transform: scale(0.93);
  transition: transform 0.08s, background 0.08s;
}

/* 모바일 보드: 중앙 정렬 + 가로 스크롤 허용 */
.mobile-board {
  margin: 0 auto;
}

/* 모바일에서 보드 래퍼 가로 스크롤 */
@media (max-width: 600px) {
  /* 풀이 보드 영역 가로 스크롤 허용 */
  #play-board-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  /* 셀 터치 영역 최소 보장 (44px) */
  .play-board .grid-cell.cell-blank,
  .play-board .grid-cell.cell-safe,
  .play-board .grid-cell.cell-mine {
    min-width: 36px;
    min-height: 36px;
  }

  /* 정답 확인 결과 토스트 — 모바일 폭 조정 */
  .play-result-toast {
    width: calc(100vw - 40px) !important;
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }
  .play-result-toast .result-emoji { font-size: 44px !important; }
  .play-result-toast .result-msg   { font-size: 20px !important; }
  .play-result-toast .result-sub   { font-size: 13px !important; }
  .play-result-toast .result-actions {
    flex-direction: column;
  }
  .play-result-toast .result-close,
  .play-result-toast .result-submit {
    width: 100%;
    justify-content: center;
  }

  /* 탑바 지뢰 카운터 크기 조정 */
  #play-mine-counter {
    font-size: 13px;
  }
}

/* ══════════════════════════════════════════════════════
   지뢰찾기 — 모바일 터치 최적화 (직접 풀기 섹션)
   #ms-play-answer-wrap: 보드 + 정답 패널 flex row 래퍼
   ══════════════════════════════════════════════════════ */

/* 채점 및 제출 버튼 — 44px 터치 타겟 */
#btn-play-check {
  min-height: 44px;
  touch-action: manipulation;
}

/* 정답 보기 / 초기화 버튼도 동일 터치 타겟 */
#btn-play-answer,
#btn-play-reset {
  min-height: 44px;
  touch-action: manipulation;
}

/* 모바일 세로 레이아웃 (640px 이하) */
/* 야지린 사이드바: 스도쿠 사이드바와 비슷한 가독성으로 보정 */
#yj-side.sv-side {
  width: 220px;
  padding: 12px;
  gap: 12px;
}
#yj-side .stit {
  font-size: 11.5px;
  padding-bottom: 5px;
  margin-bottom: 7px;
  letter-spacing: .4px;
}
#yj-side .dbtn {
  min-width: 48px;
  padding: 8px 5px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.25;
  color: #555;
}
#yj-side .sv-seed-input {
  height: 34px;
  border-radius: 7px;
  font-size: 13px;
}
#yj-side .sv-seed-regen-btn {
  padding: 10px 6px;
  font-size: 12px;
}

@media (max-width: 640px) {
  /* 보드 + 정답 패널: row → column 전환 */
  #ms-play-answer-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  /* 풀이 보드 영역 — 가로 스크롤 대응 */
  #play-board-section {
    width: 100% !important;
    flex: none !important;
  }
  #play-board {
    max-width: calc(100vw - 32px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 정답 패널도 전체 너비 */
  #answer-panel {
    flex: none !important;
    width: 100% !important;
  }

  /* 채점 버튼 모바일: 전체 너비 + 두껍게 */
  #btn-play-check {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
    justify-content: center;
  }

  /* 탑바에서 풀이 버튼 그룹 줄바꿈 허용 */
  #play-mine-counter {
    font-size: 12px;
  }
}

/* 초소형 화면 (400px 이하) */
@media (max-width: 400px) {
  #play-board {
    max-width: calc(100vw - 16px);
  }

  /* 풀이 방법 안내 배너 압축 */
  .mine-how-to {
    padding: 8px 10px;
    font-size: 11px;
  }
  .mine-how-to-steps {
    gap: 6px;
  }
}

/* ══════════════════════════════════════════════
   tbtn 공통 정의 (puzzle-standard.css와 동기화)
   app.html 내 탑바 버튼에 적용
══════════════════════════════════════════════ */
.tbtn {
  padding: 0 14px;
  height: 40px;
  border-radius: 6px;
  border: 2px solid #d1d5db;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  color: #555;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
  font-family: inherit;
}
.tbtn:hover { background: #eff6ff; border-color: #6366f1; color: #6366f1; }
.tbtn:disabled { opacity: .4; cursor: not-allowed; }

.tbtn-new  { background: linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff!important; border-color:transparent!important; box-shadow:0 2px 8px rgba(99,102,241,.35); }
.tbtn-new:hover { opacity:.88; }
.tbtn-regen  { background:#fff7ed; border-color:#fb923c!important; color:#ea580c!important; }
.tbtn-regen:hover  { background:#ffedd5; }
.tbtn-new    { background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff!important; border-color:transparent!important; box-shadow:0 2px 8px rgba(79,70,229,.35); }
.tbtn-new:hover    { opacity:.88; }
.tbtn-regen  { background:#fff7ed; border-color:#fb923c!important; color:#ea580c!important; }
.tbtn-regen:hover  { background:#ffedd5; border-color:#ea580c!important; }
.tbtn-hint   { background:#fefce8; border-color:#fbbf24!important; color:#b45309!important; }
.tbtn-hint:hover   { background:#fef9c3; }
.tbtn-check  { background:#f0fdf4; border-color:#34d399!important; color:#065f46!important; }
.tbtn-check:hover  { background:#dcfce7; }
.tbtn-submit { background:#EFF6FF; border-color:#3B82F6!important; color:#1D4ED8!important; font-weight:700; }
.tbtn-submit:hover { background:#DBEAFE; }
.tbtn-reveal { background:#f0f9ff; border-color:#38bdf8!important; color:#0369a1!important; }
.tbtn-reveal:hover { background:#e0f2fe; }
.tbtn-save   { background:#faf5ff; border-color:#a78bfa!important; color:#6d28d9!important; }
.tbtn-save:hover   { background:#ede9fe; }
.tbtn-reset  { background:#fff1f2; border-color:#fca5a5!important; color:#dc2626!important; }
.tbtn-reset:hover  { background:#fee2e2; }
.tbtn-print  { background:#eff6ff; border-color:#6366f1!important; color:#4338ca!important; font-weight:800; }
.tbtn-print:hover  { background:#e0e7ff; }
.tbtn-qr     { background:#faf5ff; border-color:#a78bfa!important; color:#6d28d9!important; }
.tbtn-qr:hover     { background:#ede9fe; }

/* Make10 slot-based expression builder */
.m10-free-board {
  min-height: 86px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m10-free-board .m10-free-line,
.m10-free-board.has-items .m10-free-empty {
  display: none !important;
}
.m10-free-items.m10-slot-row {
  position: static !important;
  inset: auto !important;
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
}
.m10-slot {
  pointer-events: auto;
  width: 48px;
  height: 48px;
  border: 2px dashed #bfdbfe;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.m10-slot.filled {
  border-style: solid;
  border-color: #2563eb;
  background: #eff6ff;
}
.m10-slot.op,
.m10-slot.paren {
  color: #1e3a8a;
}
.m10-slot.selected {
  outline: 3px solid #f97316;
  outline-offset: 2px;
}
.tbtn-submit { background: linear-gradient(135deg,#f59e0b,#d97706); color:#fff!important; border-color:transparent!important; box-shadow:0 2px 8px rgba(245,158,11,.35); }
.tbtn-submit:hover { opacity:.88; }

/* ═══════════════════════════════════════════
   크로스수학 타일풀 (app.html 내)
═══════════════════════════════════════════ */
#cm-tile-pool-wrap {
  margin: 14px 0 4px;
  background: #1e2340;
  border-radius: 14px;
  padding: 12px 14px 14px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.25);
}
.cm-tile-pool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cm-tile-pool-label {
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.cm-tile-blank-badge {
  font-size: 12px;
  color: #94a3b8;
  background: rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 2px 10px;
}
.cm-tile-blank-badge strong {
  color: #f59e0b;
  font-weight: 900;
}
#cm-tile-pool.cm-tile-pool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
/* 타일 기본 스타일 (인라인 스타일로도 처리되지만 CSS 병행) */
.cm-num-tile {
  min-width: 44px;
  height: 44px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 12px;
  border: 2.5px solid transparent;
  box-sizing: border-box;
  transition: all .15s;
  background: #fff;
  color: #1a1f3a;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  font-family: inherit;
}
.cm-num-tile.selected {
  background: #f59e0b;
  color: #fff;
  border-color: #d97706;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 6px 16px rgba(245,158,11,0.5);
}
.cm-num-tile.used {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.2);
  cursor: not-allowed;
  box-shadow: none;
}
/* 그리드 테이블 공백 셀 */
.cm-tc-empty {
  background: transparent !important;
  border: none !important;
}
/* 결과값 긴 텍스트 */
.cm-tc-res.small-txt { font-size: 12px !important; }
/* 그리드 래퍼 */
.cm-tile-grid {
  overflow-x: auto;
  display: flex;
  justify-content: center;
  padding: 4px 0;
}

/* ── 풀이 탑바 — puzzle-standard.css #topbar와 동일 표준 적용 ── */
#play-topbar {
  display: flex;   /* 항상 표시 */
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 10px;
  height: 46px;
  /* 헤더 바로 아래 fixed 고정 */
  position: fixed;
  top: var(--header-height, 56px);
  left: 0;
  right: 0;
  z-index: 100;
  /* 표준 흰색 탑바 스타일 */
  background: #fff;
  border-bottom: 2px solid var(--border, #e5e7eb);
}
/* play-topbar(fixed 46px)가 표시될 때 — main-content 패딩으로 밀어내기 */
body.has-play-topbar #main-content {
  padding-top: calc(var(--header-height) + 46px);
}
body.has-play-topbar #view-generator #sidebar {
  top: calc(var(--header-height, 56px) + 46px);
  height: calc(100vh - var(--header-height, 56px) - 46px);
}
#play-topbar::-webkit-scrollbar { display: none; }

#play-topbar strong {
  font-size: 15px;
  font-weight: 900;
  color: #4f46e5;
  white-space: nowrap;
  flex-shrink: 0;
}

#play-topbar .sep {
  width: 1px;
  height: 24px;
  background: #e5e7eb;
  flex-shrink: 0;
}
/* play-topbar 내 모든 버튼은 flex 직접 자식으로 관리 */

/* ══════════════════════════════════════════════════════════════
   게임별 표준 fixed 탑바 — 지뢰찾기(#play-topbar)와 동일한 표준
   공통 베이스: .game-topbar
   ══════════════════════════════════════════════════════════════ */
.game-topbar {
  display: none;          /* 기본: 숨김 — switchGame에서 flex로 전환 */
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 10px;
  height: 46px;
  position: fixed;
  top: var(--header-height, 56px);
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 2px solid var(--border, #e5e7eb);
  box-sizing: border-box;
}
.game-topbar::-webkit-scrollbar { display: none; }

/* 탑바 제목 */
.game-topbar strong {
  font-size: 15px;
  font-weight: 900;
  color: #4f46e5;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 탑바 구분선 */
.game-topbar .sep {
  width: 1px;
  height: 24px;
  background: #e5e7eb;
  flex-shrink: 0;
}

/* 탑바 난이도 배지 (공통) */
.game-topbar .diff-badge-tb {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: #eef2ff;
  color: #4f46e5;
  border: 1.5px solid #c7d2fe;
  white-space: nowrap;
  flex-shrink: 0;
  display: none;          /* 퍼즐 생성 후 inline-flex */
  align-items: center;
}

.game-topbar .ps-seed-badge,
#puzzle-common-topbar .ps-seed-badge {
  max-width: 168px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}

#puzzle-common-topbar .tbtn {
  flex: 0 0 auto;
}

/* body.has-XXX-topbar: main-content 패딩 + 사이드바 top/height 보정 */
body.has-game-topbar #main-content {
  padding-top: 46px !important;
}
body.has-game-topbar #view-generator #sidebar {
  top: var(--header-height, 56px);
  height: calc(100vh - var(--header-height, 56px));
}

/* QR/student mobile play mode.
   Applied only when a student opens a puzzle directly from QR/paper links. */
@media (max-width: 760px) {
  html.puzzlelo-mobile-play,
  body.puzzlelo-mobile-play {
    width: 100%;
    min-width: 0 !important;
    overflow-x: hidden !important;
    background: #f8fafc;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }

  body.puzzlelo-mobile-play #app-header {
    display: none !important;
  }

  body.puzzlelo-mobile-play #main-content {
    padding-top: 0 !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.puzzlelo-mobile-play.has-game-topbar #main-content,
  body.puzzlelo-mobile-play.has-play-topbar #main-content {
    padding-top: 82px !important;
  }

  body.puzzlelo-mobile-play #puzzle-common-topbar,
  body.puzzlelo-mobile-play .game-topbar.pz-topbar {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;
    padding: 7px 8px !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    align-content: center !important;
    overflow: visible !important;
    border-bottom: 1px solid #dbe4f0 !important;
    box-shadow: 0 6px 18px rgba(15,23,42,.08) !important;
  }

  body.puzzlelo-mobile-play #puzzle-common-topbar strong,
  body.puzzlelo-mobile-play .game-topbar.pz-topbar strong {
    flex: 1 1 100%;
    min-width: 0;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.puzzlelo-mobile-play #puzzle-common-topbar .sep,
  body.puzzlelo-mobile-play .game-topbar.pz-topbar .sep,
  body.puzzlelo-mobile-play #btn-common-print,
  body.puzzlelo-mobile-play #btn-common-qr,
  body.puzzlelo-mobile-play #btn-common-save {
    display: none !important;
  }

  body.puzzlelo-mobile-play #puzzle-common-topbar .tbtn,
  body.puzzlelo-mobile-play .game-topbar.pz-topbar .tbtn {
    min-height: 34px !important;
    padding: 7px 9px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
  }

  body.puzzlelo-mobile-play .standalone-view.active {
    top: 0 !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.puzzlelo-mobile-play.has-game-topbar .standalone-view.active {
    top: 82px !important;
  }

  body.puzzlelo-mobile-play .pz-main-standard,
  body.puzzlelo-mobile-play .standalone-main,
  body.puzzlelo-mobile-play .sv-main {
    padding: 10px 8px 88px !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body.puzzlelo-mobile-play .puzzle-container,
  body.puzzlelo-mobile-play .pz-board-stage,
  body.puzzlelo-mobile-play .board-header,
  body.puzzlelo-mobile-play .board-section,
  body.puzzlelo-mobile-play .pz-board-frame {
    max-width: 100% !important;
  }

  body.puzzlelo-mobile-play button,
  body.puzzlelo-mobile-play input,
  body.puzzlelo-mobile-play select {
    min-height: 34px;
  }
}

#play-mine-counter,
.ms-mine-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #1e5a9c;
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  padding: 2px 10px;
  border-radius: 6px;
  min-width: 60px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.2s;
}

/* ── 정답 확인 결과 토스트 ──────────────────────────── */
.play-result-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  background: #fff;
  border-radius: 20px;
  padding: 32px 40px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.play-result-toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.play-result-toast .result-emoji {
  font-size: 56px;
  display: block;
  margin-bottom: 12px;
}
.play-result-toast .result-msg {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 8px;
}
.play-result-toast .result-sub {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 20px;
}
.play-result-toast .result-close {
  padding: 10px 28px;
  border-radius: 10px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: #1e5a9c;
  transition: background 0.15s;
}
.play-result-toast .result-close:hover {
  background: #1a3a5c;
}
/* 결과 버튼 그룹 */
.play-result-toast .result-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
/* 선생님께 제출 버튼 */
.play-result-toast .result-submit {
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: #7c3aed;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.play-result-toast .result-submit:hover {
  background: #6d28d9;
}
.play-result-toast .result-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* 정답 / 오답 상태별 토스트 테두리 */
.play-result-toast.correct {
  border-top: 5px solid #16a34a;
}
.play-result-toast.correct .result-msg {
  color: #15803d;
}
.play-result-toast.correct .result-close {
  background: #16a34a;
}
.play-result-toast.correct .result-close:hover {
  background: #15803d;
}
.play-result-toast.wrong {
  border-top: 5px solid #dc2626;
}
.play-result-toast.wrong .result-msg {
  color: #b91c1c;
}
.play-result-toast.wrong .result-close {
  background: #dc2626;
}
.play-result-toast.wrong .result-close:hover {
  background: #b91c1c;
}
.play-result-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.play-result-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* ==================== ANSWER PANEL ==================== */
.answer-panel {
  border: 2px solid var(--border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  margin-top: 20px;
}

.answer-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-sidebar);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  transition: background 0.15s;
}

.answer-toggle:hover { background: var(--border); }

.answer-toggle i {
  margin-right: auto;
  margin-left: auto;
  order: 3;
}

.answer-toggle span { flex: 1; text-align: left; }

.answer-content {
  padding: 16px;
  display: block;
}

.answer-panel.collapsed .answer-content { display: none; }
.answer-panel.collapsed .answer-toggle i { transform: rotate(0deg); }
.answer-panel:not(.collapsed) .answer-toggle i { transform: rotate(180deg); }

/* ==================== HINTS CARD ==================== */
.hints-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 16px;
  margin-top: 16px;
}

.hints-card h4 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

.hints-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.hint-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg);
  padding: 8px 12px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border);
}

.hint-label { font-size: 11px; color: var(--text-muted); }
.hint-value { font-size: 14px; font-weight: 700; }

.hints-tips {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.hints-tips h5 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.hints-tips p {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
  line-height: 1.6;
}

/* ==================== LIBRARY ==================== */
#view-library {
  padding: 20px 24px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ════════════════════════════════════
   쌓기나무 시뮬레이터
   position:fixed 로 헤더·게임바 바로 아래 고정
════════════════════════════════════ */

/* #view-stacking-blocks 는 항상 position:fixed —
   헤더(56px) + 게임바(44px) 아래, 화면 꽉 채움 */
#view-stacking-blocks {
  position: fixed !important;
  top: 56px !important;   /* header 56px만 (gamebar는 쌓기나무 뷰에서 숨김) */
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 50;
  display: none !important; /* 기본 숨김 — .active 에서 덮어씀 */
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  background: #F1F5F9;
}
/* active 클래스가 붙으면 flex로 표시 */
#view-stacking-blocks.active {
  display: flex !important;
}

/* 쌓기나무 뷰 활성화 시 body/html 스크롤 방지 */
body.sb-active { overflow: hidden !important; }
body.sb-active #main-content { overflow: hidden !important; }

.sb-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.sb-canvas-wrap {
  flex: 1;
  position: relative;
  background: #F1F5F9;
  cursor: crosshair;
  overflow: hidden;
  min-height: 0;  /* flex 자식이므로 부모 높이 따름 */
}
#sb-canvas { display: block; width: 100%; height: 100%; }
.sb-panel {
  width: 232px; flex-shrink: 0;
  background: #fff;
  border-left: 1px solid #E2E8F0;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.sb-panel-group {
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 10px;
}
.sb-panel-label {
  font-size: 10px; font-weight: 800;
  color: #94A3B8; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 8px;
}
.sb-tool-row { display: flex; gap: 6px; }
.sb-tool-btn {
  flex: 1; padding: 8px 6px;
  border-radius: 8px; border: 1.5px solid #E2E8F0;
  background: #F8FAFC; color: #475569;
  font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 38px;
}
.sb-tool-btn:hover { background: #EFF6FF; border-color: #4F6EF7; color: #4F6EF7; }
.sb-tool-btn.active { background: #4F6EF7; border-color: #4F6EF7; color: #fff; }
.sb-tool-btn-danger:hover { background: #FEE2E2; border-color: #EF4444; color: #EF4444; }

.sb-view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.sb-view-btn {
  padding: 10px 4px; border-radius: 8px;
  border: 1.5px solid #E2E8F0; background: #F8FAFC;
  color: #475569; font-size: 12px; font-weight: 800;
  cursor: pointer; transition: all 0.15s;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 52px;
}
.sb-view-btn i { font-size: 16px; }
.sb-view-btn span { font-size: 11px; }
.sb-view-btn:hover { background: #EFF6FF; border-color: #4F6EF7; color: #4F6EF7; }
.sb-view-btn.active { background: #4F6EF7; border-color: #4F6EF7; color: #fff; }

.sb-mini-views { display: flex; gap: 4px; justify-content: space-between; }
.sb-mini-view-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
.sb-mini-label { font-size: 11px; font-weight: 800; color: #64748B; }
.sb-mini-canvas {
  border: 1.5px solid #CBD5E1;
  border-radius: 6px;
  background: #F8F5EE;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;   /* 입체 ISO 렌더링에 맞게 */
  display: block;
}

.sb-meta-group { display: flex; flex-direction: column; gap: 6px; }
.sb-meta-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.sb-meta-key { color: #94A3B8; }
.sb-meta-val { font-weight: 700; color: #1E293B; }
.sb-seed-val { font-family: monospace; font-size: 11px; color: #4F6EF7; }
.sb-action-btns { display: flex; flex-direction: column; }

.sb-print-options { display: flex; gap: 16px; flex-wrap: wrap; }
.sb-print-opt { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.sb-print-opt input { cursor: pointer; }

/* ── 모드 탭 바 ── */
.sb-mode-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  flex-shrink: 0;
}
.sb-mode-btn {
  padding: 6px 14px; border-radius: 20px;
  border: 1.5px solid #CBD5E1; background: #fff;
  color: #64748B; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.18s;
  display: flex; align-items: center; gap: 5px;
}
.sb-mode-btn:hover { border-color: #4F6EF7; color: #4F6EF7; }
.sb-mode-btn.active {
  background: linear-gradient(135deg,#4F6EF7,#6366F1);
  border-color: #4F6EF7; color: #fff;
}
.sb-mode-hint {
  font-size: 11px; color: #94A3B8;
  margin-left: 6px; flex: 1;
}

/* ── 학생 풀기 영역 ── */
.sb-quiz-inner {
  max-width: 780px; margin: 0 auto;
  padding: 20px 16px; display: flex;
  flex-direction: column; gap: 20px;
}
.sb-quiz-problem {
  background: #fff; border-radius: 14px;
  border: 1px solid #E2E8F0;
  padding: 16px; display: flex;
  flex-direction: column; align-items: center; gap: 12px;
}
.sb-quiz-section-title {
  font-size: 14px; font-weight: 800; color: #1E293B;
  display: flex; align-items: center; gap: 6px;
}
.sb-quiz-3d-canvas {
  border-radius: 10px; background: #F8F4EC;
  max-width: 100%; display: block;
}
.sb-quiz-grids {
  display: flex; gap: 12px;
  flex-wrap: wrap; justify-content: center;
}
.sb-quiz-grid-box {
  background: #fff; border-radius: 12px;
  border: 1.5px solid #E2E8F0;
  padding: 12px; display: flex;
  flex-direction: column; align-items: center; gap: 8px;
  min-width: 120px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sb-quiz-grid-box.correct {
  border-color: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,0.15);
}
.sb-quiz-grid-box.wrong {
  border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
}
.sb-quiz-grid-title {
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; gap: 4px;
}
.sb-quiz-grid-canvas {
  border: 1px solid #CBD5E1; border-radius: 6px;
  background: #FAFAFA; cursor: pointer; display: block;
}
.sb-quiz-grid-label {
  font-size: 10px; font-weight: 700; color: #94A3B8;
}
.sb-quiz-count-box {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 12px;
}
.sb-quiz-count-input {
  width: 72px; height: 48px;
  font-size: 22px; font-weight: 900; text-align: center;
  border: 2px solid #CBD5E1; border-radius: 10px;
  color: #1E293B; background: #F8FAFC;
  outline: none; transition: border-color 0.18s;
}
.sb-quiz-count-input:focus { border-color: #4F6EF7; }
.sb-quiz-count-unit { font-size: 12px; color: #64748B; font-weight: 700; }

.sb-quiz-result {
  border-radius: 14px; padding: 16px 20px;
  font-size: 15px; font-weight: 700; text-align: center;
  line-height: 1.7;
}
.sb-quiz-result.all-correct {
  background: #F0FDF4; border: 2px solid #22C55E; color: #15803D;
}
.sb-quiz-result.partial {
  background: #FFFBEB; border: 2px solid #F59E0B; color: #92400E;
}
.sb-quiz-result.wrong-all {
  background: #FFF1F2; border: 2px solid #EF4444; color: #991B1B;
}

.sb-quiz-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.sb-quiz-check-btn {
  background: linear-gradient(135deg,#22C55E,#16A34A);
  color: #fff; border: none; padding: 12px 28px;
  font-size: 15px; font-weight: 800; border-radius: 12px;
  cursor: pointer; transition: opacity 0.2s;
}
.sb-quiz-check-btn:hover { opacity: 0.88; }

@media (max-width: 700px) {
  .sb-layout { flex-direction: column; }
  .sb-panel { width: 100%; border-left: none; border-top: 1px solid #E2E8F0; flex-direction: row; flex-wrap: wrap; overflow-x: auto; max-height: 200px; }
  .sb-panel-group { flex: 1; min-width: 140px; }
  .sb-canvas-wrap { flex: none; height: 300px; }
  .sb-mode-hint { display: none; }
  .sb-quiz-grids { gap: 8px; }
  .sb-quiz-grid-box { min-width: 100px; }
}

.library-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.library-header h2 {
  font-size: 20px;
  font-weight: 700;
}

.library-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.select-sm {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  font-family: inherit;
  font-size: 13px;
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  cursor: pointer;
}

.lib-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.lib-empty, .lib-loading, .lib-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 8px;
  color: var(--text-muted);
}

.lib-empty i, .lib-loading i { font-size: 40px; opacity: 0.3; margin-bottom: 8px; }

.lib-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s;
}

.lib-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.lib-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border);
}

.lib-diff {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
}

.lib-actions {
  display: flex;
  gap: 4px;
}

.lib-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  transition: all 0.15s;
}

.lib-btn:hover { background: var(--bg); color: var(--text); }
.lib-btn-favorite.active { color: #F59E0B; border-color: #FDE68A; background: #FFFBEB; }
.lib-btn-delete:hover { color: var(--danger); border-color: var(--danger); }

.lib-card-body {
  padding: 12px;
}

.lib-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--primary);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lib-stats {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.lib-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lib-seed {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.lib-date {
  font-size: 11px;
  color: var(--text-light);
}

.lib-card-footer {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
}

.lib-card-footer .btn { flex: 1; justify-content: center; }

/* ── 보관함 v2 - 신규 카드 구조 ── */
.lib-login-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 10px;
  padding: 10px 16px;
  margin: 0 0 16px;
  font-size: 13px;
  color: #1E40AF;
  flex-wrap: wrap;
}
.lib-login-banner i { font-size: 16px; }
.lib-login-banner span { flex: 1; min-width: 160px; }
.lib-login-link {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.lib-login-link:hover { background: var(--primary-dark); }

.lib-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
}
.lib-game-badge {
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}
.lib-card-actions { display: flex; gap: 4px; }

.lib-diff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.lib-diff-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
}
.lib-print-count {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.lib-extra {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.lib-extra span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.lib-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-light);
  flex-wrap: wrap;
}
.lib-seed {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}
.lib-date { white-space: nowrap; }
.lib-empty-sub { font-size: 12px; color: var(--text-light); }

/* ── 보관함 v3 — 다중 게임 카드 ── */
.lib-game-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.lib-summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 8px 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lib-summary i { color: var(--text-muted); font-size: 11px; }
.lib-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-light);
  margin-top: 6px;
  flex-wrap: wrap;
}
.lib-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==================== LOGIC ARRANGE (논리 배열) ==================== */
/* #view-logic-arrange는 .standalone-view 클래스로 처리됨 (위 공통 규칙 참조) */
#view-logic-arrange {
  padding: 0;
}

.la-wrap {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
}

/* 컨트롤 바 */
.la-ctrl-bar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 10px 20px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.la-ctrl-label { font-size: 0.83rem; color: var(--text-muted); font-weight: 500; }
.la-select {
  border: 1.5px solid var(--border);
  border-radius: 8px; padding: 6px 10px;
  font-size: 0.85rem; font-family: inherit;
  color: var(--text); background: #fff; cursor: pointer;
}
.la-select:focus { outline: none; border-color: #5B6EF5; }

/* SEED 입력 그룹 */
.la-seed-group {
  display: flex; align-items: center; gap: 4px;
  background: #F8FAFC; border: 1.5px solid var(--border);
  border-radius: 8px; padding: 4px 8px;
}
.la-seed-input {
  border: none; background: transparent; outline: none;
  font-size: 0.82rem; font-family: inherit; color: #5B6EF5;
  font-weight: 700; width: 84px;
}
.la-seed-input::placeholder { color: #CBD5E1; font-weight: 400; }
.la-seed-clear {
  border: none; background: none; cursor: pointer;
  font-size: 0.75rem; color: #94A3B8; padding: 0 2px;
  line-height: 1; transition: color 0.15s;
}
.la-seed-clear:hover { color: #EF4444; }

.la-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border: none; border-radius: 8px;
  font-size: 0.83rem; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.la-btn:active { transform: scale(0.96); }
.la-btn-primary { background: #5B6EF5; color: #fff; }
.la-btn-primary:hover { background: #4558e0; }
.la-btn-success { background: #10B981; color: #fff; }
.la-btn-success:hover { background: #059669; }
.la-btn-outline { background: #fff; color: #5B6EF5; border: 1.5px solid #5B6EF5; }
.la-btn-outline:hover { background: #EEF0FF; }
.la-btn-gray { background: #F1F5F9; color: #64748B; }
.la-btn-gray:hover { background: #E2E8F0; }

/* 메인 레이아웃 — 퍼즐 영역 넓게, 단서 패널 적절하게 */
.la-main {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  /* overflow·flex는 la-main-wrap(부모 main)에서 담당 */
}
@media (max-width: 960px) { .la-main { grid-template-columns: 1fr 300px; } }
@media (max-width: 760px) { .la-main { grid-template-columns: 1fr; } }

.la-puzzle-col, .la-side-col {
  display: flex; flex-direction: column; gap: 16px;
}

/* 카드 */
.la-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  padding: 20px;
}
.la-card-title {
  font-size: 0.95rem; font-weight: 700;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}

/* ══════════════════════════════════
   논리 배열 — SVG 구슬 기반 스타일
══════════════════════════════════ */

/* 구슬 개수 패널 */
.la-count-panel {
  background: #F8FAFF; border: 1.5px solid #E0E7FF;
  border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
}
.la-count-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.la-marble-count {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.la-count-row {
  display: flex; align-items: center; gap: 6px;
}
.la-count-balls {
  display: flex; gap: 3px; align-items: center;
}
.la-count-label {
  font-size: 0.78rem; font-weight: 700; color: #475569; white-space: nowrap;
}
.la-count-text {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.la-chip-sm {
  display: inline-flex; align-items: center; gap: 3px;
  color: #fff; border-radius: 99px; padding: 2px 9px;
  font-size: 0.78rem; font-weight: 700;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* 토글 스위치 */
.la-toggle-wrap {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 600; color: #64748B; cursor: pointer;
}
.la-toggle-wrap input[type=checkbox] { display: none; }
.la-toggle-slider {
  width: 32px; height: 18px; background: #5B6EF5; border-radius: 99px;
  position: relative; transition: background 0.2s; flex-shrink: 0;
}
.la-toggle-slider::after {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
  transition: transform 0.2s;
}
.la-toggle-wrap input:checked ~ .la-toggle-slider { background: #10B981; }
.la-toggle-wrap input:checked ~ .la-toggle-slider::after { transform: translateX(14px); }

/* 팔레트 */
.la-palette-area, .la-track-area { margin-bottom: 18px; }
.la-area-label { font-size: 0.78rem; color: #94A3B8; font-weight: 500; margin-bottom: 10px; }
.la-palette { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; justify-content: center; }
.la-palette-item { display: flex; flex-direction: column; align-items: center; }

/* 팔레트 구슬 래퍼 */
.la-palette-marble {
  position: relative; cursor: grab; transition: transform 0.15s;
  border-radius: 50%; user-select: none;
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.la-palette-marble:hover:not(.la-exhausted) { transform: scale(1.1); }
.la-palette-marble.la-selected {
  transform: scale(1.12);
  outline: 4px solid #5B6EF5; outline-offset: 4px; border-radius: 50%;
}
.la-palette-marble.la-exhausted { opacity: 0.35; cursor: not-allowed; filter: grayscale(30%); }

/* 남은 개수 뱃지 */
.la-remain-badge {
  position: absolute; top: -4px; right: -4px;
  color: #fff; font-size: 0.62rem; font-weight: 800;
  border-radius: 99px; padding: 1px 5px;
  pointer-events: none; white-space: nowrap;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* 트랙 구슬 래퍼 */
.la-track-marble {
  cursor: pointer; transition: transform 0.15s;
  border-radius: 50%; user-select: none;
}
.la-track-marble:hover { transform: scale(1.08); }

/* 기존 .la-marble 하위 호환 유지 */
.la-marble {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: #fff;
  cursor: grab; user-select: none; flex-shrink: 0;
  position: relative; transition: transform 0.15s, box-shadow 0.15s;
}
.la-marble-label {
  position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%);
  font-size: 0.72rem; font-weight: 700; color: var(--text); white-space: nowrap;
}

/* 배치 트랙 */
.la-track {
  display: flex; gap: 0; align-items: center;
  padding: 20px 20px 40px; min-height: 140px;
  background: linear-gradient(to bottom, #F8FAFF, #EDF0FF);
  border: 2px dashed #C7D0F8; border-radius: 14px;
  overflow-x: auto;
  justify-content: center; flex-wrap: wrap; row-gap: 36px;
}
.la-slot {
  width: 92px; height: 92px; border-radius: 50%;
  border: 3px dashed #C7D0F8;
  display: flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s; cursor: pointer;
}
.la-slot + .la-slot { margin-left: 20px; }
.la-slot + .la-slot::before {
  content: ''; position: absolute;
  left: -22px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 3px;
  background: #C7D0F8; border-radius: 2px;
}
.la-slot-num {
  position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%);
  font-size: 0.78rem; font-weight: 700; color: #94A3B8; white-space: nowrap;
}
.la-slot.la-drag-over { border-color: #5B6EF5; background: rgba(91,110,245,0.08); }
.la-slot.la-slot-filled { border-style: solid; border-color: transparent; }
.la-dir-row {
  display: flex; justify-content: space-between;
  padding: 0 16px; margin-top: 28px;
  font-size: 0.78rem; color: #94A3B8; font-weight: 500;
}

/* 단서 */
.la-clue-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: #F8FAFF; border: 1.5px solid #E8ECFF;
  margin-bottom: 8px; transition: all 0.2s;
}
.la-clue-item.la-clue-ok  { background: #F0FDF4; border-color: #86EFAC; }
.la-clue-item.la-clue-err { background: #FFF5F5; border-color: #FCA5A5; }
.la-clue-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: #5B6EF5; color: #fff;
  font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.la-clue-item.la-clue-ok  .la-clue-num { background: #10B981; }
.la-clue-item.la-clue-err .la-clue-num { background: #EF4444; }
.la-clue-text { font-size: 0.86rem; line-height: 1.5; flex: 1; }
.la-clue-check { font-size: 0.95rem; flex-shrink: 0; margin-top: 1px; }
.la-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700; padding: 1px 6px; border-radius: 20px;
  color: #fff; font-size: 0.8rem; vertical-align: middle;
}

/* 상태 / 힌트 / 정답 */
.la-status { margin-top: 16px; padding: 12px 16px; border-radius: 10px; font-size: 0.88rem; font-weight: 700; display: none; }
.la-status.show { display: flex; align-items: center; gap: 8px; }
.la-status.la-correct { background: #ECFDF5; color: #065F46; border: 1.5px solid #6EE7B7; }
.la-status.la-wrong   { background: #FFF5F5; color: #991B1B; border: 1.5px solid #FCA5A5; }
.la-status.la-partial { background: #FFFBEB; color: #92400E; border: 1.5px solid #FCD34D; }
.la-hint { margin-top: 12px; padding: 12px 16px; border-radius: 10px; background: #FFF7ED; border: 1.5px solid #FED7AA; font-size: 0.84rem; line-height: 1.5; color: #92400E; display: none; }
.la-hint.show { display: block; }
.la-answer-reveal { margin-top: 12px; border-radius: 12px; overflow: hidden; }
.la-answer-reveal.show {
  background: #F0FDF4; border: 1.5px solid #86EFAC;
  padding: 14px 16px;
}
.la-answer-header {
  font-size: 0.82rem; font-weight: 800; color: #065F46;
  margin-bottom: 12px;
}
.la-answer-marbles {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
}
.la-answer-marble-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.la-answer-marble-num {
  font-size: 0.72rem; font-weight: 700; color: #065F46;
}

/* 난이도 뱃지 */
.la-diff-badge { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-left: 6px; }
.la-diff-easy      { background: #DCFCE7; color: #166534; }
.la-diff-mid       { background: #FEF3C7; color: #92400E; }
.la-diff-hard      { background: #FFE4E6; color: #9F1239; }
.la-diff-challenge { background: #1E1B4B; color: #A5B4FC; }

/* 인쇄 모달 */
.la-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.la-modal-overlay.hidden { display: none; }
.la-modal {
  background: #fff; border-radius: 18px; padding: 24px;
  max-width: 500px; width: 100%;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}
.la-modal-title { font-size: 1rem; font-weight: 800; margin-bottom: 16px; }

/* 인쇄 */
@media print {
  body > *:not(#la-print-area) { visibility: hidden; }
  #la-print-area { visibility: visible; position: fixed; inset: 0; padding: 20mm; }
  .la-marble { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
#la-print-area { display: none; }

/* ==================== SETTINGS ==================== */
#view-settings {
  padding: 20px 24px 40px;
}

.settings-container {
  max-width: 600px;
  margin: 0 auto;
}

.settings-container > h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
}

.settings-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}

.settings-group h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.settings-row:last-child { border-bottom: none; }

/* 설정 - 설명 텍스트 */
.settings-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* 설정 - 값 표시 */
.settings-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* 설정 - 그룹 헤더 아이콘 */
.settings-group h3 i {
  margin-right: 6px;
  color: var(--primary);
  font-size: 13px;
}

/* 로고 업로드 영역 */
.logo-upload-area {
  border: 2px dashed var(--border);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.logo-upload-area:hover,
.logo-upload-area.dragover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb, 25,118,210), 0.04);
}

/* 로고 미리보기 */
.logo-preview-area {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  background: var(--bg);
  margin-bottom: 10px;
}
.logo-preview-img {
  max-height: 56px;
  max-width: 160px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #fff;
  padding: 4px;
}
.logo-preview-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.logo-preview-name {
  font-size: 12px;
  color: var(--text-muted);
  word-break: break-all;
}

.settings-row select {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  font-family: inherit;
  font-size: 13px;
  background: var(--bg-card);
  outline: none;
}

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  cursor: pointer;
}

.toggle input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border-dark);
  border-radius: 22px;
  transition: background 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: var(--shadow);
}

.toggle input:checked + .toggle-slider { background: var(--primary); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

/* ==================== PRINT MODAL ==================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal.is-open {
  display: flex;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.modal-box {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(560px, 95vw);
  max-height: 90vh;
  overflow: auto;
  z-index: 1;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 { font-size: 16px; font-weight: 700; }

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--border-radius);
  transition: background 0.15s;
}

.modal-close:hover { background: var(--bg-sidebar); color: var(--text); }

.modal-body { padding: 20px; }

.modal-footer {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
}

.print-option-group {
  margin-bottom: 20px;
}

.print-option-group > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text);
}

/* Layout selector */
.layout-selector {
  display: flex;
  gap: 8px;
}

.layout-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-muted);
  transition: all 0.15s;
}

.layout-btn:hover { border-color: var(--primary); }
.layout-btn.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.print-option-group.auto-layout-fixed-group,
.ps-modal-group.auto-layout-fixed-group {
  display: none !important;
}
.layout-selector.auto-layout-locked button[class*="layout-btn"],
.ps-layout-btns.auto-layout-locked .ps-layout-btn {
  cursor: default;
  pointer-events: none;
}
.layout-selector.auto-layout-locked button[class*="layout-btn"]:not(.active),
.ps-layout-btns.auto-layout-locked .ps-layout-btn:not(.active) {
  opacity: 0.42;
}
.puzzlo-duplex-print-hint {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.layout-preview {
  width: 48px;
  height: 36px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  display: grid;
  gap: 2px;
  padding: 3px;
}

.layout-preview div { background: var(--border-dark); border-radius: 2px; }
.layout-preview.l1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.layout-preview.l2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.layout-preview.l4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.layout-preview.l6 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }

.auto-recommend {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--warning-light);
  color: var(--warning);
  border-radius: var(--border-radius);
  font-size: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Radio & Checkbox groups */
.radio-group, .checkbox-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.radio-label, .check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

/* Quantity input */
.quantity-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.qty-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-sidebar);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 18px;
  color: var(--text);
  transition: background 0.15s;
}

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

.quantity-input input {
  width: 60px;
  text-align: center;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.qty-label { font-size: 13px; color: var(--text-muted); }

.print-preview-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--border-radius);
  font-size: 12px;
  font-weight: 500;
}

/* ==================== TOAST ==================== */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--border-radius);
  background: var(--text);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  transform: translateX(120%);
  transition: transform 0.3s ease;
  max-width: 320px;
}

.toast.show { transform: translateX(0); }
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast-info { background: var(--primary); }
.toast-warning { background: var(--warning); }

/* ==================== PRINT ROOT (hidden on screen) ==================== */
/* 화면에서는 완전히 숨기고, 인쇄 시에만 표시 */
#print-root {
  display: none;
}
@media print {
  #print-root {
    display: block !important;
    position: static !important;
    width: 100% !important;
    visibility: visible !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0;
    padding: 0;
  }
  body > *:not(#print-root) {
    display: none !important;
  }
}

/* ==================== NONOGRAM BOARD ==================== */

/* 전체 보드 래퍼 */
.ng-board {
  display: grid;
  border: 2.5px solid #222;
  background: #fff;
  flex-shrink: 0;
  overflow: visible;
}

/* 코너 (빈 공간) */
.ng-corner {
  background: #f5f5f5;
  box-sizing: border-box;
}

/* 힌트 셀 공통 */
.ng-col-clue,
.ng-row-clue {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ECEFF1;
  border: 1px solid #B0BEC5;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #263238;
  box-sizing: border-box;
  font-size: 13px;
  user-select: none;
}

.ng-clue-num {
  color: #1565C0;
}

/* 퍼즐 셀 */
.ng-cell {
  box-sizing: border-box;
  border: 1px solid #B0BEC5;
  user-select: none;
}

.ng-unknown {
  background: #fff;
}

/* 5칸 경계 굵은 선 */
.ng-thick-top    { border-top:    2.5px solid #444 !important; }
.ng-thick-left   { border-left:   2.5px solid #444 !important; }
.ng-thick-bottom { border-bottom: 2.5px solid #444 !important; }
.ng-thick-right  { border-right:  2.5px solid #444 !important; }

/* 정답 보드 */
.ng-filled {
  background: #263238;
}
.ng-empty-ans {
  background: #fff;
}

/* 보드 스크롤 컨테이너 */
#ng-board-wrap {
  overflow-x: auto;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px;
}

/* 정답 보드 패널 */
#ng-answer-board-wrap {
  overflow-x: auto;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px;
}

/* 노노그램 섹션 전체 */
#nonogram-area {
  display: none;
  flex-direction: column;
  gap: 16px;
}
#nonogram-area.active-game {
  display: flex;
}

/* 노노그램 사이드바 난이도 카드 색상 */
.diff-card[data-ng-difficulty="easy"]   .diff-icon { color: #4CAF50; }
.diff-card[data-ng-difficulty="normal"] .diff-icon { color: #FF9800; }
.diff-card[data-ng-difficulty="hard"]   .diff-icon { color: #F44336; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  .generator-layout {
    grid-template-columns: 1fr;
  }

  #sidebar {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .nav-btn span { display: none; }

  .grid-4  .grid-cell { width: 62px; height: 62px; font-size: 28px; }
  .grid-6  .grid-cell { width: 54px; height: 54px; font-size: 24px; }
  .grid-8  .grid-cell { width: 46px; height: 46px; font-size: 21px; }
  .grid-10 .grid-cell { width: 40px; height: 40px; font-size: 18px; }
  .grid-15 .grid-cell { width: 32px; height: 32px; font-size: 14px; }
  .grid-20 .grid-cell { width: 26px; height: 26px; font-size: 12px; }

  .library-controls { width: 100%; }
}

/* 시드 재생성 버튼 */
.btn-reseed {
  background: linear-gradient(135deg, #37474F, #263238);
  color: #fff;
  border: none;
  margin-top: 6px;
}
.btn-reseed:hover {
  background: linear-gradient(135deg, #455A64, #37474F);
  color: #fff;
}
.btn-reseed i {
  font-size: 13px;
}
.hidden {
  display: none !important;
}

/* ============================================================
   SUDOKU STYLES
   ============================================================ */

/* ── 스도쿠 팁 박스 ── */
.sudoku-tip-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #E3F2FD;
  border: 1px solid #90CAF9;
  border-left: 4px solid #1565C0;
  border-radius: 6px;
  padding: 9px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #0D47A1;
  line-height: 1.5;
  max-width: 600px;
}
.sudoku-tip-box i { color: #1565C0; margin-top: 2px; flex-shrink: 0; }
.sudoku-tip-box strong { color: #B71C1C; }

/* ── 스도쿠 그리드 기본 ── */
.sudoku-grid {
  display: grid;
  width: fit-content;
  border: 3px solid #222;
  background: #fff;
}

/* ── 셀 기본 ── */
.sd-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #bbb;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  background: #fff;
  user-select: none;
  box-sizing: border-box;
}

/* ── 박스 경계 굵은 선 ── */
.sd-cell.box-top    { border-top: 2.5px solid #333; }
.sd-cell.box-left   { border-left: 2.5px solid #333; }
.sd-cell.box-bottom { border-bottom: 2.5px solid #333; }
.sd-cell.box-right  { border-right: 2.5px solid #333; }

/* ── 주어진 숫자 (힌트) ── */
.sd-cell.given {
  background: #F5F5F5;
  font-weight: 900;
}

/* ── 정답 채워진 칸 ── */
.sd-cell.answer-filled {
  background: #E8F5E9;
  font-weight: 700;
}

/* ── 크기별 셀 사이즈 ── */
.sudoku-4  { grid-template-columns: repeat(4, 1fr); }
.sudoku-6  { grid-template-columns: repeat(6, 1fr); }
.sudoku-9  { grid-template-columns: repeat(9, 1fr); }

.sudoku-4  .sd-cell { width: 60px; height: 60px; font-size: 26px; }
.sudoku-6  .sd-cell { width: 52px; height: 52px; font-size: 22px; }
.sudoku-9  .sd-cell { width: 48px; height: 48px; font-size: 20px; }

/* ── 힌트 패널 ── */
.sudoku-hints {
  margin-top: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 12px 14px;
}
.hint-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
.hint-label { color: var(--text-muted); min-width: 80px; }
.hint-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.hint-tag {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 600;
}
.hint-tip {
  margin-top: 8px;
  padding: 8px 10px;
  background: #FFF8E1;
  border-left: 3px solid #FFC107;
  border-radius: 4px;
  font-size: 12px;
  color: #5D4037;
  line-height: 1.5;
}

/* ── 반응형 스도쿠 ── */
@media (max-width: 768px) {
  .sudoku-4  .sd-cell { width: 50px; height: 50px; font-size: 22px; }
  .sudoku-6  .sd-cell { width: 42px; height: 42px; font-size: 18px; }
  .sudoku-9  .sd-cell { width: 36px; height: 36px; font-size: 15px; }
}

/* ============================================================
   NONOGRAM EXTENDED STYLES
   ============================================================ */

/* 보드 스크롤 래퍼 */
.ng-board-scroll {
  overflow-x: auto;
  overflow-y: visible;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 8px 0;
  max-width: 100%;
}

/* 노노그램 팁 박스 */
.ng-tip-box {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #E8F5E9;
  border: 1px solid #A5D6A7;
  border-left: 4px solid #2E7D32;
  border-radius: 6px;
  padding: 9px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #1B5E20;
  line-height: 1.5;
  max-width: 680px;
}
.ng-tip-box i { color: #2E7D32; margin-top: 2px; flex-shrink: 0; }
.ng-tip-box strong { color: #B71C1C; }

/* 노노그램 보드 공통 폰트 크기 조정 */
.ng-board .ng-col-clue,
.ng-board .ng-row-clue {
  font-size: 11px;
}
.ng-5 .ng-col-clue,
.ng-5 .ng-row-clue {
  font-size: 14px;
}
.ng-10 .ng-col-clue,
.ng-10 .ng-row-clue {
  font-size: 12px;
}
.ng-15 .ng-col-clue,
.ng-15 .ng-row-clue {
  font-size: 10px;
}

/* ng-area 전체 래퍼 */
#ng-area {
  width: 100%;
}

/* ==================== 노노그램 사이드바 새 UI ==================== */

/* 난이도 탭 */
.ng-diff-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.ng-diff-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.ng-diff-tab:hover {
  border-color: #A5D6A7;
  background: #F1F8E9;
}
.ng-diff-tab.active {
  border-color: #2E7D32;
  background: #E8F5E9;
}
.ng-diff-tab-emoji { font-size: 18px; line-height: 1; }
.ng-diff-tab-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.ng-diff-tab-info strong {
  font-size: 11px;
  color: var(--text);
}
.ng-diff-tab-info small {
  font-size: 10px;
  color: var(--text-muted);
}
.ng-diff-tab.active .ng-diff-tab-info strong { color: #1B5E20; }

/* 패턴 갤러리 */
.ng-pattern-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-height: 380px;
  overflow-y: auto;
  padding: 2px;
}
.ng-pattern-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  min-width: 0;
}
.ng-pattern-card:hover {
  border-color: #81C784;
  background: #F9FBE7;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.ng-pattern-card.active {
  border-color: #2E7D32;
  background: #E8F5E9;
  box-shadow: 0 0 0 1px #2E7D32;
}
.ng-pc-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ng-pc-name {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  word-break: keep-all;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 0 2px;
}
.ng-pattern-card.active .ng-pc-name { color: #1B5E20; font-weight: 700; }
.ng-pattern-random .ng-pc-preview { font-size: 24px; }
.ng-pattern-random .ng-pc-name { font-size: 10px; font-weight: 600; }


.ng-subject-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
  border: 1.5px solid #A5D6A7;
  border-left: 5px solid #2E7D32;
  border-radius: 10px;
  padding: 12px 18px;
  margin-bottom: 14px;
  max-width: 680px;
}

.ng-subject-emoji {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.ng-subject-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.ng-subject-label {
  font-size: 11px;
  color: #558B2F;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ng-subject-name {
  font-size: 18px;
  font-weight: 700;
  color: #1B5E20;
}

.ng-subject-hint {
  font-size: 12px;
  color: #81C784;
  font-style: italic;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 주제 배지 */
.badge-subject {
  background: #E8F5E9;
  color: #2E7D32;
  border: 1px solid #A5D6A7;
  font-weight: 700;
}

/* ==================== 일반 노노그램 (NR) ==================== */

/* 일반 노노그램 diff 탭 — 4개이므로 더 컴팩트 */
.nr-diff-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.nr-diff-tab:hover {
  border-color: #90CAF9;
  background: #E3F2FD;
}
.nr-diff-tab.active {
  border-color: #1565C0;
  background: #E3F2FD;
}
.nr-diff-tab.active .ng-diff-tab-info strong { color: #0D47A1; }

/* 게임 탭 아이콘 컬러 */
.game-tab[data-game="nonogram-random"] i { color: #1565C0; }
.game-tab[data-game="nonogram-random"].active { border-color: #1565C0; background: #E3F2FD; color: #1565C0; }
.game-tab[data-game="nonogram-random"]:hover:not(:disabled) { border-color: #1565C0; color: #1565C0; }

/* ============================================================
   크로스수학 (CrossMath) 스타일  — Game Style
   ============================================================ */

/* ── 게임 탭 ── */
.game-tab[data-game="crossmath"] i { color: #2E7D32; }
.game-tab[data-game="crossmath"].active {
  border-color: #2E7D32;
  background: #E8F5E9;
  color: #2E7D32;
}
.game-tab[data-game="crossmath"]:hover:not(:disabled) {
  border-color: #43A047;
  color: #2E7D32;
}

/* ── 난이도 탭 ── */
.cm-diff-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
}

.cm-diff-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  text-align: center;
  box-shadow: 0 2px 0 var(--border-dark);
}
.cm-diff-tab:hover {
  border-color: #81C784;
  background: #F1F8E9;
  transform: translateY(-1px);
  box-shadow: 0 3px 0 #81C784;
}
.cm-diff-tab.active {
  border-color: #2E7D32;
  background: #E8F5E9;
  box-shadow: 0 2px 0 #1B5E20;
}
.cm-diff-tab.active .cm-diff-info strong { color: #1B5E20; }

.cm-diff-emoji { font-size: 18px; line-height: 1; }
.cm-diff-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.cm-diff-info strong {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.cm-diff-info small {
  font-size: 9px;
  color: var(--text-muted);
}

/* ── 팁 배너 ── */
.cm-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: linear-gradient(135deg, #F1F8E9, #E8F5E9);
  border: 1px solid #A5D6A7;
  border-left: 4px solid #2E7D32;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #1B5E20;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(46,125,50,0.08);
}
.cm-info-banner i {
  color: #2E7D32;
  margin-top: 2px;
  flex-shrink: 0;
  font-size: 14px;
}

/* ── 보드 래퍼: 연두 배경 위에 퍼즐 그리드 ── */
.cm-board-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 10px;
  overflow-x: auto;
  border-radius: 16px;
  margin-bottom: 8px;
}

/* 정답 보드 배경 */
.cm-board-wrap.answer-mode {
  /* answer mode는 board wrapper 자체에서 구분하지 않고 JS에서 처리 */
}

/* ── 격자 fallback ── */
.cm-grid {
  display: grid;
  width: fit-content;
}

/* ── 분수 표시 ── */
.cm-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  font-size: 0.85em;
}
.cm-frac-num {
  border-bottom: 1.5px solid currentColor;
  padding: 0 3px;
  line-height: 1.3;
}
.cm-frac-den {
  padding: 0 3px;
  line-height: 1.3;
}

/* ── 빈칸(숨겨진 숫자) 애니메이션 ── */
@keyframes cm-pulse {
  0%, 100% { box-shadow: inset 0 1px 4px rgba(0,0,0,0.06), 0 0 0 0 rgba(102,187,106,0); }
  50%       { box-shadow: inset 0 1px 4px rgba(0,0,0,0.06), 0 0 0 4px rgba(102,187,106,0.25); }
}
.cm-cell.cm-hidden {
  animation: cm-pulse 2.2s ease-in-out infinite;
}

/* ── 정답 칸 등장 애니메이션 ── */
@keyframes cm-pop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.cm-cell.cm-result {
  animation: cm-pop 0.30s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── 빈 상태 아이콘 ── */
#cm-empty-state .empty-icon {
  font-size: 56px;
  line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

/* ── 인쇄 카드 ── */
.cm-print-card {
  border: 1.5pt solid #555;
  border-radius: 2mm;
  overflow: hidden;
  background: #fff;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* ── 크로스수학 메타 ── */
#cm-meta-ops {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

/* ==================== MOBILE RESPONSIVE (보완) ==================== */

/* ── 태블릿 (768px 이하) ── */
@media (max-width: 768px) {
  /* 헤더 */
  .header-brand .header-version { display: none; }
  .header-inner { padding: 0 12px; gap: 8px; }
  .service-switch-btn span { display: none; }
  .service-switch-btn { width: 32px; padding: 0; justify-content: center; }
  /* 소개·FAQ·문의 아이콘 숨김 → 공간 확보 (설정 버튼 항상 표시) */
  .header-icon-btn { display: none; }

  /* 보관함 컨트롤 줄바꿈 */
  .library-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
  }
  .library-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .library-controls .select-sm { flex: 1; min-width: 100px; }

  /* 보관함 카드 그리드 */
  .lib-cards {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  /* 뷰 패딩 */
  .view { padding: 12px; }

  /* 설정 섹션 */
  .settings-section { padding: 16px; }
}

/* ── 소형 모바일 (480px 이하) ── */
@media (max-width: 480px) {
  /* 헤더 액션 버튼 텍스트 숨김 */
  #btn-print-current span { display: none; }
  #btn-print-current { padding: 6px 10px; }

  /* 사이드바 완전 펼침 */
  #sidebar { padding: 12px; }

  /* 보관함 카드 1열 */
  .lib-cards { grid-template-columns: 1fr; }
  .lib-login-banner { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* 버튼 그룹 세로 정렬 */
  .puzzle-actions-group { flex-direction: column; }
  .puzzle-actions-group .btn { width: 100%; justify-content: center; }

  /* 인쇄 모달 */
  .print-modal-inner { margin: 8px; border-radius: 12px; }
  .print-modal-body { padding: 16px; }

  /* 빈 상태 */
  .empty-state { padding: 24px 16px; }
  .empty-steps { flex-direction: column; gap: 12px; }

  /* 로그인 모달 */
  .auth-modal-box { margin: 12px; }
}

/* ── 초소형 (360px 이하) ── */
@media (max-width: 360px) {
  .nav-btn { padding: 4px 8px; }
  .header-inner { padding: 0 8px; }
}

/* ── 보드 섹션 타이틀에 게임 스타일 아이콘 ── */
#cm-container .board-section-label {
  font-size: 15px;
  font-weight: 700;
  color: #1B5E20;
}


/* ==================== 크로스수학 (CrossMath) ==================== */

/* 탭 버튼 */
.game-tab[data-game="crossmath"] i { color: #E65100; }
.game-tab[data-game="crossmath"].active { border-color: #E65100; background: #FFF3E0; color: #E65100; }
.game-tab[data-game="crossmath"]:hover:not(:disabled) { border-color: #E65100; color: #E65100; }

/* ── 크로스수학 모드 전환 탭 ── */
.cm-mode-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 2px;
}
.cm-mode-tab {
  flex: 1;
  padding: 7px 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.cm-mode-tab.active {
  background: #fff;
  color: #2E7D32;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.cm-mode-tab:hover:not(.active) { color: #2E7D32; }

/* ── 교과 키워드 검색 ── */
.cm-keyword-search { margin-bottom: 12px; }
.cm-keyword-input-wrap {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 0 10px;
  gap: 6px;
  transition: border-color 0.15s;
}
.cm-keyword-input-wrap:focus-within { border-color: #43A047; }
.cm-keyword-icon { color: #9E9E9E; font-size: 12px; flex-shrink: 0; }
#cm-keyword-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 12px;
  padding: 9px 0;
  outline: none;
  font-family: inherit;
  color: var(--text);
  min-width: 0;
}
#cm-keyword-input::placeholder { color: #BDBDBD; }
.cm-keyword-btn {
  background: none;
  border: none;
  color: #43A047;
  cursor: pointer;
  padding: 4px;
  font-size: 13px;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.cm-keyword-btn:hover { transform: translateX(2px); }

.cm-keyword-result {
  margin-top: 6px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.4;
}
.cm-keyword-found {
  background: #E8F5E9;
  border: 1.5px solid #A5D6A7;
  border-radius: 10px;
  padding: 10px;
}
.cm-keyword-found-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.cm-keyword-found-emoji { font-size: 20px; flex-shrink: 0; }
.cm-keyword-found-label {
  font-size: 12px; font-weight: 700; color: #1B5E20; line-height: 1.3;
}
.cm-keyword-found-tip {
  font-size: 10px; color: #555; margin-top: 2px; line-height: 1.3;
}
.cm-keyword-found-ops {
  display: flex;
  gap: 8px;
  font-size: 10px;
  color: #2E7D32;
  background: rgba(255,255,255,0.6);
  border-radius: 5px;
  padding: 4px 7px;
  margin-bottom: 8px;
}
.cm-keyword-select-btn {
  width: 100%;
  padding: 7px;
  background: linear-gradient(135deg, #43A047, #2E7D32);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.12s;
}
.cm-keyword-select-btn:hover { opacity: 0.88; }
.cm-keyword-notfound {
  background: #FFF3E0;
  border: 1.5px solid #FFCC80;
  color: #E65100;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
}
.cm-keyword-error {
  background: #FFEBEE;
  border: 1.5px solid #EF9A9A;
  color: #C62828;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
}

/* ── 학년 탭 ── */
.cm-grade-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.cm-grade-tab {
  padding: 4px 8px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
  transition: all 0.12s;
}
.cm-grade-tab:hover { border-color: #81C784; color: #2E7D32; }
.cm-grade-tab.active {
  border-color: #43A047;
  background: #E8F5E9;
  color: #1B5E20;
}

/* ── 단원 목록 ── */
.cm-unit-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
}
.cm-unit-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
  width: 100%;
}
.cm-unit-btn:hover { border-color: #81C784; background: #F1F8E9; }
.cm-unit-btn.active { border-color: #43A047; background: #E8F5E9; }
.cm-unit-emoji { font-size: 16px; flex-shrink: 0; }
.cm-unit-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cm-unit-info strong { font-size: 11px; color: var(--text); line-height: 1.2; }
.cm-unit-info small { font-size: 9px; color: var(--text-muted); }
/* 단원명/연산 표시 */
.cm-unit-name { font-size: 11px; font-weight: 600; color: var(--text); line-height: 1.3; }
.cm-unit-ops {
  font-size: 10px;
  color: #43A047;
  font-weight: 700;
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
}
/* 학년 탭 이모지/레이블 */
.cm-grade-emoji { font-size: 14px; }
.cm-grade-label { font-size: 10px; font-weight: 700; }

/* ── 선택된 단원 배지 ── */
.cm-selected-unit {
  margin: 8px 0;
  padding: 8px 10px;
  background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
  border: 1.5px solid #A5D6A7;
  border-radius: 10px;
}
.cm-selected-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cm-selected-badge > span { font-size: 22px; flex-shrink: 0; }

/* ── 그리드 크기 선택 ── */
.cm-gridsize-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
}
.cm-gridsize-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.cm-gridsize-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.cm-gridsize-btn {
  padding: 4px 8px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
  transition: all 0.12s;
}
.cm-gridsize-btn:hover { border-color: #81C784; color: #2E7D32; }
.cm-gridsize-btn.active { border-color: #43A047; background: #E8F5E9; color: #1B5E20; }

/* 난이도 탭 컨테이너 */
.cm-diff-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 개별 난이도 탭 버튼 */
.cm-diff-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
.cm-diff-tab:hover {
  border-color: #FFCC80;
  background: #FFF8E1;
}
.cm-diff-tab.active {
  border-color: #E65100;
  background: #FFF3E0;
}
.cm-diff-tab.active .cm-diff-info strong { color: #BF360C; }

.cm-diff-emoji { font-size: 20px; line-height: 1; flex-shrink: 0; }
.cm-diff-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cm-diff-info strong {
  font-size: 12px;
  color: var(--text);
  line-height: 1.2;
}
.cm-diff-info small {
  font-size: 10px;
  color: var(--text-muted);
}

/* 정보 배너 */
.cm-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #FFF3E0;
  border: 1px solid #FFCC80;
  border-left: 4px solid #E65100;
  border-radius: 6px;
  padding: 9px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #E65100;
  line-height: 1.5;
}
.cm-info-banner i { margin-top: 2px; flex-shrink: 0; }

/* 보드 래퍼 */
.cm-board-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
}

/* 격자 (JS에서 column-gap:0으로 덮어씌움) */
.cm-grid {
  display: grid;
  width: fit-content;
  margin: 0 auto;
}

/* 셀 기본 */
.cm-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: background 0.1s;
  user-select: none;
  font-family: 'Noto Sans KR', 'JetBrains Mono', sans-serif;
}

/* 비활성(null) 셀: 연두 배경에 흡수 */
.cm-cell.cm-inactive {
  background: transparent;
}

/* 숫자 셀 */
.cm-cell.cm-num {
  background: #fff;
  font-weight: 700;
  color: #111;
}

/* 빈칸 (숨겨진 숫자) */
.cm-cell.cm-num.cm-hidden {
  background: #fff;
  cursor: default;
}

/* 가로 연산자: 수식 행 안에서 흰색 */
.cm-cell.cm-hop {
  background: #fff;
  font-weight: 900;
  color: #333;
}

/* 세로 연산자: 흰 배경 박스 */
.cm-cell.cm-vop {
  background: #fff;
  font-weight: 900;
  color: #333;
  border-radius: 6px;
}

/* 가로 = */
.cm-cell.cm-heq {
  background: #fff;
  font-weight: 800;
  color: #2E7D32;
}

/* 세로 = */
.cm-cell.cm-veq {
  background: #fff;
  font-weight: 800;
  color: #2E7D32;
  border-radius: 6px;
}

/* 결과값 셀 */
.cm-cell.cm-result {
  background: #E8F5E9;
  font-weight: 800;
  color: #1B5E20;
}

/* pass 셀 (세로 연결) */
.cm-cell.cm-pass {
  background: rgba(255,255,255,0.3);
  font-weight: 700;
  color: #555;
}

/* ── 크로스수학 모바일 대응 ── */
@media (max-width: 640px) {
  .cm-board-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px; }
  #cm-container .puzzle-container { padding: 12px 10px; }
  .cm-tile-pool-row { flex-wrap: wrap; }
}

/* ============================================================
   가쿠로 (Kakuro) 스타일
   ============================================================ */

/* ── 난이도 탭 ── */
.kk-diff-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kk-diff-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
.kk-diff-tab:hover {
  border-color: #90CAF9;
  background: #E3F2FD;
}
.kk-diff-tab.active {
  border-color: #1565C0;
  background: #E3F2FD;
}
.kk-diff-tab.active .kk-diff-info strong { color: #0D47A1; }

.kk-diff-emoji {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.kk-diff-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.kk-diff-info strong {
  font-size: 12px;
  color: var(--text);
  line-height: 1.2;
}
.kk-diff-info small {
  font-size: 10px;
  color: var(--text-muted);
}

/* ── 정보 배너 ── */
.kk-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #E3F2FD;
  border: 1px solid #90CAF9;
  border-left: 4px solid #1565C0;
  border-radius: 6px;
  padding: 9px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #1565C0;
  line-height: 1.5;
}
.kk-info-banner i { margin-top: 2px; flex-shrink: 0; }

/* ── 보드 래퍼 ── */
.kk-board-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
}

/* ── 그리드 ── */
.kk-grid {
  display: grid;
  width: fit-content;
  margin: 0 auto;
}

/* ── 보드 래퍼 (외곽) ── */
.kk-board-wrapper {
  display: inline-block;
  background: #fff;
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.13);
}

/* ── 카쿠로 모바일 터치 최적화 ── */

/* 제출/확인 버튼 최소 44px 터치 타겟 */
#kk-btn-submit {
  min-height: 44px;
  touch-action: manipulation;
}
#kk-btn-check {
  min-height: 44px;
  touch-action: manipulation;
}

/* 탑바 버튼 */
#btn-kk-tb-check,
#btn-kk-tb-submit,
#btn-kk-tb-answer,
#btn-kk-tb-regen {
  min-height: 40px;
  touch-action: manipulation;
}

/* 카쿠로 입력 셀 터치 타겟 */
.kk-board-wrap .pi-input {
  touch-action: manipulation;
}
.kk-board-wrap .pi-input.kk-active-cell {
  outline: 3px solid #2563eb;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 2px rgba(37,99,235,0.22);
}
.kk-board-wrap .pi-input .pi-user-val {
  font-weight: 950;
  color: #b45309;
  line-height: 1;
}
.kk-number-pad {
  width: min(100%, 520px);
  margin: 14px auto 0;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  box-shadow: 0 6px 16px rgba(15,23,42,0.08);
}
.kk-number-pad-label {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 850;
  color: #334155;
  text-align: center;
}
.kk-number-pad-buttons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.kk-num-btn {
  min-height: 44px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #fff;
  color: #1d4ed8;
  font-size: 20px;
  font-weight: 950;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.kk-num-btn:hover,
.kk-num-btn:focus-visible {
  border-color: #2563eb;
  background: #eff6ff;
}
.kk-clear-btn {
  grid-column: span 1;
  color: #b91c1c;
  border-color: #fecaca;
  background: #fff7f7;
  font-size: 14px;
}

/* 모바일 세로 레이아웃 (640px 이하) */
@media (max-width: 640px) {
  /* 문제 + 정답 패널 세로 전환 */
  #kk-play-layout {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* 문제 컬럼 전체 너비 */
  #kk-play-layout > div:first-child {
    width: 100% !important;
  }

  /* 보드 가로 스크롤 허용 */
  .kk-board-wrap {
    max-width: calc(100vw - 32px);
    overflow-x: auto;
  }

  /* 제출/확인 버튼 더 두껍게 */
  #kk-btn-submit {
    min-height: 48px;
    font-size: 15px !important;
    width: 100%;
  }
  #kk-btn-check {
    min-height: 44px;
    font-size: 14px !important;
  }

  /* 채점 결과 패널 */
  #kk-grade-result {
    font-size: 13px !important;
  }

  /* 정답 패널 전체 너비 */
  #kk-answer-panel.sd-answer-visible {
    width: 100% !important;
    min-width: 0 !important;
    transform: translateY(0) !important;
    max-height: none !important;
  }

  /* 팁 배너 압축 */
  .kk-info-banner {
    padding: 7px 10px;
    font-size: 12px;
  }
}

/* 초소형 화면 (400px 이하) */
@media (max-width: 400px) {
  .kk-board-wrap {
    max-width: calc(100vw - 16px);
    padding: 4px;
  }
  #kk-btn-submit {
    font-size: 14px !important;
  }
}

/* ============================================================
   마방진 (Magic Square) 스타일
   ============================================================ */

/* ── 마방진 문제 설정 ── */
#section-magic-square-controls {
  max-height: none;
  overflow: visible;
  padding-right: 4px;
}

#section-magic-square-controls .sidebar-title {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}

.ms-setting-block {
  margin-bottom: 9px;
}
.ms-setting-label {
  font-size: 11px;
  font-weight: 900;
  color: #64748b;
  margin: 0 0 5px 1px;
}
.ms-setting-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ms-setting-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 30px;
  padding: 5px 8px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  color: #334155;
  line-height: 1.15;
  white-space: nowrap;
}
.ms-setting-chip strong {
  display: block;
  font-size: 12px;
  line-height: 1.15;
}
.ms-setting-chip small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.18;
}
.ms-setting-chip.active small {
  color: #6d28d9;
}
.ms-setting-chip:hover { border-color: #c084fc; background: #faf5ff; }
.ms-setting-chip.active {
  border-color: #7c3aed;
  background: #f3e8ff;
  color: #5b21b6;
  box-shadow: inset 0 0 0 1px rgba(124,58,237,.14);
}
.ms-setting-chip.disabled,
.ms-setting-chip:disabled {
  opacity: .35;
  cursor: not-allowed;
  background: #f8fafc;
}
.ms-preset-row .ms-setting-chip {
  flex: 1 1 100%;
  min-height: 42px;
}
#ms-grid-options .ms-setting-chip {
  flex: 1 1 calc(33.333% - 5px);
}
#ms-sum-options .ms-setting-chip {
  flex: 1 1 calc(50% - 5px);
}
.ms-hidden-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ms-hidden-stepper input {
  width: 52px;
  height: 30px;
  text-align: center;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  color: #4c1d95;
}
.ms-setting-summary {
  margin-top: 6px;
  padding: 7px 8px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.ms-board-wrap .pi-input .pi-user-val {
  color: #C2410C;
  font-weight: 900;
  font-size: inherit;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

body.has-game-topbar #app-footer {
  display: none;
}

/* ── 정보 배너 ── */
.ms-info-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #F3E5F5;
  border: 1px solid #CE93D8;
  border-left: 4px solid #6A1B9A;
  border-radius: 6px;
  padding: 9px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #6A1B9A;
  line-height: 1.5;
}
.ms-info-banner i { margin-top: 2px; flex-shrink: 0; }

/* ── 보드 래퍼 ── */
.ms-board-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
}
.ms-board-wrapper {
  display: inline-block;
  background: #fff;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.13);
}

/* ── 마방진 모바일 터치 최적화 ── */

/* 제출 버튼 최소 44px 터치 타겟 */
#ms-btn-submit {
  min-height: 44px;
  touch-action: manipulation;
}

/* 탑바 버튼 */
#btn-ms-tb-submit,
#btn-ms-tb-answer,
#btn-ms-tb-regen {
  min-height: 40px;
  touch-action: manipulation;
}

/* 마방진 셀 입력 터치 타겟 */
.ms-board-wrap .pi-input {
  touch-action: manipulation;
}

/* 모바일 세로 레이아웃 (640px 이하) */
@media (max-width: 640px) {
  /* 문제 + 정답 패널 세로 전환 */
  #ms-play-layout {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* 문제 컬럼 전체 너비 */
  #ms-play-layout > div:first-child {
    width: 100% !important;
  }

  /* 보드 스크롤 대응 */
  .ms-board-wrap {
    max-width: calc(100vw - 32px);
    overflow-x: auto;
  }

  /* 제출 버튼 더 두껍게 */
  #ms-btn-submit {
    min-height: 48px;
    font-size: 15px !important;
    width: 100%;
  }

  /* 채점 결과 패널 */
  #ms-grade-result {
    font-size: 13px !important;
  }

  /* 정답 패널 전체 너비 */
  #ms-answer-panel.sd-answer-visible {
    width: 100% !important;
    min-width: 0 !important;
    transform: translateY(0) !important;
    max-height: none !important;
  }

  /* 팁 배너 압축 */
  .ms-info-banner {
    padding: 7px 10px;
    font-size: 12px;
  }
}

/* 초소형 화면 (400px 이하) */
@media (max-width: 400px) {
  .ms-board-wrap {
    max-width: calc(100vw - 16px);
    padding: 4px;
  }
  #ms-btn-submit {
    font-size: 14px !important;
  }
}

/* ── 일반 노노그램 모바일 터치 최적화 ── */

/* 제출 버튼 최소 44px 터치 타겟 */
#nr-btn-submit {
  min-height: 44px;
  touch-action: manipulation;
}

/* 탑바 버튼 */
#btn-nr-tb-answer,
#btn-nr-tb-regen {
  min-height: 40px;
  touch-action: manipulation;
}

/* 노노그램 셀 터치 타겟 (클릭/드래그) */
#nr-board td,
#nr-board .nr-cell {
  touch-action: none;
}

/* 모바일 세로 레이아웃 (640px 이하) */
@media (max-width: 640px) {
  /* 문제 + 정답 패널 세로 전환 */
  #nr-play-layout {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* 문제 컬럼 전체 너비 */
  #nr-play-layout > div:first-child {
    width: 100% !important;
  }

  /* 보드 가로 스크롤 허용 */
  #nr-board {
    max-width: calc(100vw - 32px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 제출 버튼 더 두껍게 */
  #nr-btn-submit {
    min-height: 48px;
    font-size: 15px !important;
    width: 100%;
  }

  /* 채점 결과 패널 */
  #nr-grade-result {
    font-size: 13px !important;
  }

  /* 정답 패널 전체 너비 */
  #nr-answer-panel.sd-answer-visible {
    width: 100% !important;
    min-width: 0 !important;
    transform: translateY(0) !important;
    max-height: none !important;
  }
}

/* 초소형 화면 (400px 이하) */
@media (max-width: 400px) {
  #nr-board {
    max-width: calc(100vw - 16px);
  }
  #nr-btn-submit {
    font-size: 14px !important;
  }
}

/* ═══════════════════════════════════════════════
   건물보기 (Skyscrapers)
═══════════════════════════════════════════════ */

/* ── 난이도 탭 ── */
.sk-diff-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sk-diff-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 2px solid #E0E0E0;
  border-radius: 10px;
  background: #FAFAFA;
  cursor: pointer;
  transition: all 0.18s;
  text-align: left;
  width: 100%;
}
.sk-diff-tab:hover  { border-color: #90CAF9; background: #E3F2FD; }
.sk-diff-tab.active { border-color: #1565C0; background: #E3F2FD; }
.sk-diff-tab.active .sk-diff-info strong { color: #0D47A1; }

.sk-diff-emoji { font-size: 22px; flex-shrink: 0; }
.sk-diff-info  { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sk-diff-info strong { font-size: 12px; color: var(--text); }
.sk-diff-info small  { font-size: 10px; color: var(--text-muted); }

/* ── 보드 컨테이너 ── */
.sk-board-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
}

.sk-board-wrap {
  background: #fff;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.13);
  display: inline-block;
}

#sk-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.sk-board-wrap .pi-input {
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.sk-board-wrap .pi-input:hover,
.sk-board-wrap .pi-input.pi-selected {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  transform: translateY(-1px);
}

.sk-board-wrap .pi-user-val {
  font-size: clamp(24px, 5vw, 42px) !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  line-height: 1 !important;
}

.sk-empty-hint {
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 800;
  color: #94a3b8;
}

.sk-number-palette {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #f8fbff;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
}

.sk-number-tile {
  min-width: 46px;
  height: 46px;
  border: 2px solid #bfdbfe;
  border-radius: 12px;
  background: #fff;
  color: #1d4ed8;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}

.sk-number-tile.active {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
  box-shadow: 0 5px 14px rgba(37, 99, 235, 0.28);
}

.sk-number-clear {
  min-width: 72px;
  color: #b91c1c;
  border-color: #fecaca;
}

.sk-number-clear.active {
  background: #ef4444;
  border-color: #dc2626;
}

/* ── 정보 배너 ── */
.sk-info-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #E3F2FD;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #1565C0;
  border: 1px solid #BBDEFB;
}
.sk-info-banner i { flex-shrink: 0; color: #1976D2; }

/* ── 건물보기 모바일 대응 ── */
@media (max-width: 640px) {
  #sk-container.puzzle-container { padding: 12px 10px; }
  .sk-board-container { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px; }
  .sk-board-wrap { padding: 4px; }
  .pi-submit-row { flex-direction: column; }
  .pi-btn-submit { width: 100%; min-height: 48px; font-size: 15px; }
}

/* ==================== TANGRAM (칠교놀이) ==================== */

/* 카테고리 버튼 */
.tg-cat-btns {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px;
}
.tg-cat-btn {
  padding: 5px 12px; border-radius: 20px; border: 1.5px solid #FFCCBC;
  background: #fff; color: #E64A19; font-size: 13px; cursor: pointer;
  transition: all .18s;
}
.tg-cat-btn:hover  { background: #FFF3E0; border-color: #FF7043; }
.tg-cat-btn.active { background: #FF7043; color: #fff; border-color: #FF7043; }

/* 힌트 레벨 버튼 */
.tg-hint-btns { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tg-hint-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  border: 1.5px solid #e0e0e0; background: #fafafa;
  cursor: pointer; transition: all .18s; text-align: left;
}
.tg-hint-btn:hover  { border-color: #FF7043; background: #FFF3E0; }
.tg-hint-btn.active { border-color: #FF7043; background: #FFF3E0; }
.tg-hint-btn.active .tg-hint-info strong { color: #E64A19; }
.tg-hint-emoji { font-size: 14px; flex-shrink: 0; min-width: 36px; }
.tg-hint-info  { display: flex; flex-direction: column; }
.tg-hint-info strong { font-size: 13px; color: #333; }
.tg-hint-info small  { font-size: 11px; color: #888; margin-top: 1px; }

/* 도안 갤러리 */
.tg-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  padding: 4px 0;
}
.tg-gallery-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 4px 4px; border-radius: 10px;
  border: 2px solid #f0f0f0; background: #fafafa;
  cursor: pointer; transition: all .18s;
}
.tg-gallery-card:hover  { border-color: #FF7043; background: #FFF3E0; transform: translateY(-2px); }
.tg-gallery-card.active { border-color: #FF7043; background: #FFF3E0; box-shadow: 0 0 0 2px #FF704355; }
.tg-gallery-thumb { line-height: 0; border-radius: 6px; overflow: hidden; }
.tg-gallery-name  { font-size: 11px; color: #555; margin-top: 4px; text-align: center; }
/* 내 도안 배지 */
.tg-gallery-badge {
  font-size: 9px; font-weight: 700; color: #fff;
  background: #FF7043; border-radius: 8px;
  padding: 1px 6px; margin-top: 2px; text-align: center;
  display: inline-block;
}

/* Admin 모드 갤러리 카드 선택 스타일 */
.tg-gallery.admin-mode .tg-gallery-card {
  cursor: pointer;
  position: relative;
}
.tg-gallery.admin-mode .tg-gallery-card:hover {
  border-color: #fca5a5;
  background: #fff0f0;
  transform: translateY(-2px);
}
.tg-gallery.admin-mode .tg-gallery-card.admin-selected {
  border-color: #dc2626;
  background: #fff0f0;
  box-shadow: 0 0 0 2px rgba(220,38,38,.25);
}
.tg-gallery.admin-mode .tg-gallery-card.admin-selected::after {
  content: '✓';
  position: absolute;
  top: 3px; right: 5px;
  font-size: 12px;
  font-weight: 900;
  color: #dc2626;
  line-height: 1;
}
/* admin 토글 버튼 unlocked 상태 */
#btn-tg-admin-toggle.unlocked {
  border-color: #fca5a5;
  background: #fff0f0;
  color: #dc2626;
}

/* 칠교 보드 래퍼 */
.tg-board-wrap {
  display: flex; justify-content: center; align-items: center;
  padding: 16px; background: #FAFAFA; border-radius: 12px;
  border: 1.5px solid #F0F0F0;
}
.tg-board-wrap.answer-mode { background: #F1F8E9; border-color: #C8E6C9; }

/* 인쇄 도안 선택기 */
.tg-print-selector {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-height: 200px; overflow-y: auto;
  padding: 8px; background: #fafafa;
  border: 1px solid #eee; border-radius: 8px;
  margin-top: 6px;
}
.tg-print-check-label {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; cursor: pointer; padding: 6px;
  border: 1.5px solid #eee; border-radius: 8px;
  background: #fff; transition: all .15s;
  position: relative;
}
.tg-print-check-label:hover { border-color: #FF7043; background: #FFF3E0; }
.tg-print-check-label input[type="checkbox"] {
  position: absolute; top: 4px; left: 4px;
  width: 14px; height: 14px; cursor: pointer;
}
.tg-print-check-label input:checked + .tg-print-check-thumb {
  outline: 2px solid #FF7043; border-radius: 4px;
}
.tg-print-check-thumb { line-height: 0; border-radius: 4px; overflow: hidden; }
.tg-print-check-name  { font-size: 10px; color: #555; text-align: center; }

/* 미니 갤러리 (보드 하단 도안 재선택용) */
.tg-gallery-mini {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
  padding: 4px 0;
}
.tg-gallery-mini .tg-gallery-card {
  padding: 4px 3px 3px;
}
.tg-gallery-mini .tg-gallery-name {
  font-size: 10px;
}

/* 카테고리 필터 버튼 */
.tg-cat-filter-btn.active {
  border-color: #FF7043 !important;
  background: #FFF3E0 !important;
  color: #E64A19 !important;
}

/* 보드 래퍼 - 반응형 */
#tg-board, #tg-answer-board {
  background: #fff;
  border-radius: 10px;
  border: 1.5px solid #f0e8e4;
  box-shadow: 0 2px 12px rgba(230, 74, 25, 0.06);
}

/* 교구 크기 버튼 */
.tg-size-btn {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 14px; border-radius: 10px;
  border: 1.5px solid #e0e0e0; background: #fafafa;
  cursor: pointer; transition: all .18s; font-size: 12px;
  gap: 4px;
}
.tg-size-btn:hover  { border-color: #FF7043; background: #FFF3E0; }
.tg-size-btn.active { border-color: #FF7043; background: #FFF3E0; color: #E64A19; font-weight: 700; }
.tg-size-btn small  { font-size: 10px; color: #888; }

/* ==================== PATTERN BLOCK (패턴블록) ==================== */

/* 힌트 버튼 */
.pb-hint-btns { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pb-hint-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  border: 1.5px solid #e0e0e0; background: #fafafa;
  cursor: pointer; transition: all .18s; text-align: left;
}
.pb-hint-btn:hover  { border-color: #10b981; background: #f0fdf4; }
.pb-hint-btn.active { border-color: #10b981; background: #f0fdf4; }
.pb-hint-btn.active .pb-hint-info strong { color: #065f46; }
.pb-hint-emoji { font-size: 14px; flex-shrink: 0; min-width: 28px; }
.pb-hint-info  { display: flex; flex-direction: column; }
.pb-hint-info strong { font-size: 13px; color: #333; }
.pb-hint-info small  { font-size: 11px; color: #888; margin-top: 1px; }

/* 갤러리 */
.pb-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  padding: 4px 0;
}
.pb-gallery-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 4px 4px; border-radius: 10px;
  border: 2px solid #f0f0f0; background: #fafafa;
  cursor: pointer; transition: all .18s;
}
.pb-gallery-card:hover  { border-color: #10b981; background: #f0fdf4; transform: translateY(-2px); }
.pb-gallery-card.active { border-color: #10b981; background: #f0fdf4; box-shadow: 0 0 0 2px #10b98155; }
.pb-gallery-thumb { line-height: 0; border-radius: 6px; overflow: hidden; }
.pb-gallery-name  { font-size: 11px; color: #555; margin-top: 4px; text-align: center; }
.pb-gallery-badge {
  font-size: 9px; font-weight: 700; color: #fff;
  background: #10b981; border-radius: 8px;
  padding: 1px 6px; margin-top: 2px; text-align: center;
  display: inline-block;
}

/* Admin 모드 */
.pb-gallery.admin-mode .pb-gallery-card { cursor: pointer; position: relative; }
.pb-gallery.admin-mode .pb-gallery-card:hover { border-color: #fca5a5; background: #fff0f0; }
.pb-gallery.admin-mode .pb-gallery-card.admin-selected {
  border-color: #dc2626; background: #fff0f0;
  box-shadow: 0 0 0 2px rgba(220,38,38,.25);
}
.pb-gallery.admin-mode .pb-gallery-card.admin-selected::after {
  content: '✓'; position: absolute; top: 3px; right: 5px;
  font-size: 12px; font-weight: 900; color: #dc2626; line-height: 1;
}
#btn-pb-admin-toggle.unlocked {
  border-color: #fca5a5; background: #fff0f0; color: #dc2626;
}

/* 미니 갤러리 */
.pb-gallery-mini {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
  padding: 4px 0;
}
.pb-gallery-mini .pb-gallery-card { padding: 4px 3px 3px; }
.pb-gallery-mini .pb-gallery-name { font-size: 10px; }

/* 보드 래퍼 */
#pb-board, #pb-answer-board {
  background: #fff;
  border-radius: 10px;
  border: 1.5px solid #d1fae5;
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.06);
}

/* ==================== TRUTH & LIE (진실과 거짓) ==================== */

/* 퍼즐 보드 컨테이너 */
.tl-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 헤더 */
.tl-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  border-radius: 12px;
  border: 1px solid #A5D6A7;
}
.tl-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #1B5E20;
}
.tl-emoji { font-size: 20px; }
.tl-level-name { font-size: 14px; }
.tl-person-count {
  font-size: 12px;
  color: #388E3C;
  background: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid #C8E6C9;
  margin-left: auto;
}
.tl-tip {
  font-size: 12px;
  color: #2E7D32;
  line-height: 1.5;
}

/* 본문 */
.tl-body { display: flex; flex-direction: column; gap: 12px; }

/* 장면 설명 */
.tl-intro {}
.tl-scene {
  font-size: 13px;
  color: #555;
  line-height: 1.65;
  padding: 10px 14px;
  background: #F9FBE7;
  border-radius: 8px;
  border-left: 4px solid #827717;
  margin: 0;
}
.tl-scene strong { color: #1B5E20; }

/* 발언 목록 */
.tl-speeches {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 개인 발언 카드 */
.tl-speech-card {
  background: #FAFAFA;
  border: 1.5px solid #E0E0E0;
  border-radius: 12px;
  padding: 12px 14px;
  transition: box-shadow .2s;
}
.tl-speech-card:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,0.09);
  border-color: #BDBDBD;
}

/* 이름 행 */
.tl-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.tl-avatar {
  font-size: 22px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F5F5F5;
  border: 1.5px solid #E0E0E0;
  flex-shrink: 0;
}
.tl-name {
  font-size: 15px;
  font-weight: 700;
  color: #222;
}
.tl-role-blank {
  font-size: 11px;
  color: #9E9E9E;
  margin-left: auto;
  border: 1px dashed #BDBDBD;
  padding: 2px 10px;
  border-radius: 12px;
}
.tl-role-badge {
  font-size: 11px;
  font-weight: 700;
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 12px;
  border: 1.5px solid currentColor;
}

/* 말풍선 */
.tl-bubbles {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 44px;
}
.tl-bubble {
  font-size: 13.5px;
  color: #333;
  background: #fff;
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  padding: 7px 12px;
  line-height: 1.55;
  position: relative;
}
.tl-bubble::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #E8E8E8;
}
.tl-bubble::after {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-right-color: #fff;
}
.tl-quote {
  color: #4CAF50;
  font-weight: 700;
  font-size: 16px;
  line-height: 0;
  vertical-align: -2px;
}

/* 정답 영역 */
.tl-answer-section {
  margin-top: 8px;
  border-top: 2px solid #C8E6C9;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tl-answer-title {
  font-size: 14px;
  font-weight: 700;
  color: #2E7D32;
}
.tl-answer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tl-answer-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid;
  font-size: 13px;
  text-align: center;
  min-width: 90px;
}
.tl-answer-chip strong { font-size: 14px; }

/* 풀이 설명 */
.tl-explanation {
  background: #F1F8E9;
  border: 1px solid #C8E6C9;
  border-radius: 8px;
  padding: 12px 14px;
}
.tl-explanation pre {
  white-space: pre-wrap;
  font-size: 12px;
  color: #333;
  line-height: 1.7;
  font-family: inherit;
  margin: 0;
}

/* 답안 작성 칸 */
.tl-blank-section { margin-top: 8px; }
.tl-blank-title {
  font-size: 13px;
  font-weight: 700;
  color: #555;
  margin-bottom: 8px;
}
.tl-blank-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid #E0E0E0;
  background: #fff;
  font-size: 13px;
  min-width: 100px;
}
.tl-blank-line {
  color: #BDBDBD;
  font-size: 12px;
  margin-top: 3px;
}

/* 시드 표시 */
.tl-seed {
  font-size: 11px;
  color: #BDBDBD;
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
  margin-top: 4px;
}

/* ── 진실과거짓 모바일 대응 ── */
@media (max-width: 640px) {
  .tl-board { gap: 10px; }
  .tl-bubbles { padding-left: 28px; }
  .tl-answer-grid { gap: 6px; }
  .tl-answer-chip { min-width: 76px; padding: 6px 10px; font-size: 12px; }
  #btn-tl-generate-top,
  #btn-tl-answer-top { min-height: 44px; touch-action: manipulation; }
}

/* ── 쌓기나무 모바일 44px 터치 대응 ── */
#sb-quiz-check,
#sb-quiz-reveal,
#sb-quiz-retry { min-height: 44px; touch-action: manipulation; }
@media (max-width: 640px) {
  .sb-mode-bar { flex-wrap: wrap; gap: 6px; }
  .sb-mode-btn { flex: 1; min-width: 120px; justify-content: center; }
  .sb-quiz-actions { flex-direction: column; align-items: stretch; }
  #sb-quiz-check,
  #sb-quiz-reveal,
  #sb-quiz-retry { width: 100%; min-height: 48px; font-size: 15px; }
}

/* ============================================================
   흐름 잇기 (Flow Connect) — 전용 스타일
   ============================================================ */

/* 보드 래퍼 */
#fc-board,
#fc-answer-board {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 8px;
  overflow: hidden;            /* auto → hidden: 스크롤바 제거, 흔들림 방지 */
  max-width: 100%;
  /* 모바일 드래그 중 페이지 스크롤 방지 */
  touch-action: none;
  overscroll-behavior: contain;
}

#fc-play-layout > div:first-child > .board-section {
  min-width: min(100%, 560px);
}

#fc-board {
  min-width: min(100%, 500px);
}

#fc-answer-board {
  touch-action: auto;          /* 정답 보드는 스크롤 허용 */
  overflow: visible;
}

#fc-board svg,
#fc-answer-board svg {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

/* 인터랙티브 보드 — 터치 스크롤 완전 차단 */
#fc-board svg {
  touch-action: none;
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
}

/* 흑백 모드 활성화 버튼 */
#btn-fc-bw.btn-active {
  background: #37474F;
  color: #fff;
  border-color: #37474F;
}

/* ── 흑백 인쇄 전용 범례 안내 ── */
.fc-bw-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  padding: 8px 12px;
  background: #F5F5F5;
  border-radius: 8px;
  border: 1px dashed #BDBDBD;
  font-size: 12px;
  color: #444;
}

.fc-bw-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 알파벳 레이블 원 */
.fc-label-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  font-family: Arial, sans-serif;
  background: white;
  flex-shrink: 0;
}

/* ── 배지 스타일 (fc 전용) ── */
#fc-badge-difficulty {
  background: #E3F2FD;
  color: #1565C0;
}
#fc-badge-size {
  background: #E8F5E9;
  color: #2E7D32;
}

/* ── 팁 배너 ── */
.fc-info-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #E3F2FD;
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #1565C0;
  border-left: 3px solid #1976D2;
}

/* ── 인쇄 모달 — 흑백 선택지 강조 ── */
.fc-bw-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: #FFF8E1;
  border-radius: 8px;
  border-left: 3px solid #FFC107;
  font-size: 12px;
  color: #555;
  margin-top: 6px;
}

/* ── 흑백 구분 원리 안내박스 ── */
.fc-bw-guide {
  margin-top: 8px;
  padding: 10px 12px;
  background: #F9FBE7;
  border-radius: 8px;
  border: 1px dashed #C5E1A5;
  font-size: 12px;
  color: #444;
  line-height: 1.7;
}

.fc-bw-guide strong {
  color: #33691E;
}

/* ── fc-container 레이아웃: 보드를 최대한 크게 ── */
#fc-container {
  max-width: 700px;
  margin: 0 auto;
}

#fc-container .board-section {
  width: 100%;
}

/* ── 흐름잇기 모바일 터치 최적화 ── */

/* 제출 버튼 최소 터치 타겟 */
#btn-fc-submit {
  min-height: 44px;
  touch-action: manipulation;
}
#btn-fc-reset-play {
  min-height: 40px;
  padding: 8px 14px !important;
  touch-action: manipulation;
}
/* 사이드바 흐름잇기 버튼 */
#btn-fc-generate,
#btn-fc-regenerate,
#btn-fc-answer,
#btn-fc-bw,
#btn-fc-save,
#btn-fc-print-current {
  min-height: 40px;
  touch-action: manipulation;
}

/* 모바일 대응 */
@media (max-width: 600px) {
  #fc-board,
  #fc-answer-board {
    padding: 4px;
    border-radius: 8px;
  }
  #fc-board svg,
  #fc-answer-board svg {
    max-width: calc(100vw - 24px);
    width: 100%;
  }
}

/* ── 흐름잇기 모바일 세로 레이아웃 (640px 이하) ── */
@media (max-width: 640px) {
  /* fc-play-layout: 가로 → 세로 */
  #fc-play-layout {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* 문제 보드 컬럼 — 전체 너비 */
  #fc-play-layout > div:first-child {
    width: 100% !important;
  }

  /* 보드를 화면 너비에 맞게 */
  #fc-board {
    width: 100%;
    padding: 6px;
  }
  #fc-board svg {
    max-width: calc(100vw - 32px) !important;
    width: 100% !important;
    height: auto !important;
  }

  /* 제출 영역 — 더 두꺼운 버튼 */
  #fc-submit-area {
    margin: 8px 0 0 !important;
  }
  #btn-fc-submit {
    min-height: 48px;
    font-size: 15px !important;
  }

  /* 완성 메시지 */
  #fc-complete-msg {
    font-size: 0.9rem !important;
    padding: 10px 12px !important;
  }

  /* 진행바 */
  #fc-progress-wrap {
    padding: 0 2px !important;
  }

  /* 정답 패널 — 세로 배치 시 전체 너비로 */
  #fc-answer-panel.sd-answer-visible {
    width: 100% !important;
    min-width: 0 !important;
    transform: translateY(0) !important;
    max-height: none !important;
  }

  /* 초기화 버튼 터치 타겟 */
  #btn-fc-reset-play {
    min-height: 44px !important;
    font-size: 13px !important;
  }

  /* 팁 배너 압축 */
  .fc-info-banner {
    padding: 6px 10px;
    font-size: 12px;
  }
}

@media (max-width: 400px) {
  #fc-board svg {
    max-width: calc(100vw - 16px) !important;
  }
  #fc-board {
    padding: 2px;
  }
}

/* ============================================================
   전함배치 모바일 터치 최적화
   ============================================================ */

/* 제출/초기화 버튼 최소 44px 터치 타겟 */
#pn-bs-submit-area .dbtn {
  min-height: 44px;
  touch-action: manipulation;
}

/* 전함배치 셀 터치 타겟 — 조작 최적화 */
.bs-interact-cell {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 모바일 레이아웃 (640px 이하) */
@media (max-width: 640px) {
  /* 보드 가로 스크롤 허용 */
  #bs-interact-board {
    max-width: calc(100vw - 40px);
    overflow-x: auto;
    display: block;
  }

  /* 제출/초기화 버튼 더 두껍게 */
  #pn-bs-submit-area {
    padding: 0 12px 14px !important;
  }
  #pn-bs-submit-area > div:first-child {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  #pn-bs-submit-area .dbtn {
    flex: 1 1 auto;
    min-height: 48px;
    font-size: 14px !important;
    justify-content: center;
  }

  /* 채점 결과 패널 */
  #pn-bs-grade-result {
    font-size: 13px !important;
  }
}

/* 초소형 화면 (400px 이하) */
@media (max-width: 400px) {
  #bs-interact-board {
    max-width: calc(100vw - 24px);
  }
  #pn-bs-submit-area {
    padding: 0 8px 12px !important;
  }
  #pn-bs-submit-area .dbtn {
    font-size: 13px !important;
  }
}

/* ============================================================
   필로미노 모바일 터치 최적화
   ============================================================ */

/* 필로미노 제출/초기화 버튼 — 최소 44px 터치 타겟 */
#pn-hk-submit-area .dbtn {
  min-height: 44px;
  touch-action: manipulation;
}

/* 필로미노 edge 터치 타겟 — 모바일에서 넓게 */
.hk-edge-h,
.hk-edge-v {
  touch-action: manipulation;
}

/* 필로미노 보드 모바일 레이아웃 (640px 이하) */
@media (max-width: 640px) {
  /* 보드 전체 너비 사용 */
  #hk-interact-board {
    max-width: calc(100vw - 40px) !important;
    overflow-x: auto;
  }

  /* 제출/초기화 버튼 영역 */
  #pn-hk-submit-area {
    padding: 0 12px 14px !important;
  }
  #pn-hk-submit-area > div:first-child {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  #pn-hk-submit-area .dbtn {
    flex: 1 1 auto;
    min-height: 48px;
    font-size: 14px !important;
    justify-content: center;
  }

  /* 채점 결과 패널 */
  #pn-hk-grade-result {
    font-size: 13px !important;
  }
}

/* 필로미노 보드 초소형 화면 (400px 이하) */
@media (max-width: 400px) {
  #hk-interact-board {
    max-width: calc(100vw - 24px) !important;
  }
  #pn-hk-submit-area {
    padding: 0 8px 12px !important;
  }
  #pn-hk-submit-area .dbtn {
    font-size: 13px !important;
  }
}

/* ============================================================
   LAND DIVIDE PUZZLE — 탑바 버튼 (검정 텍스트 통일)
   ============================================================ */

/* 땅나누기 전용 tbtn: 흰 배경 + 검정 텍스트 + 초록 포인트 */
.ld-tbtn {
  background: #fff !important;
  color: #1e293b !important;
  border-color: #d1d5db !important;
  font-weight: 700 !important;
}
.ld-tbtn:hover {
  background: #f0fdf4 !important;
  border-color: #16a34a !important;
  color: #14532d !important;
}

/* ============================================================
   LAND DIVIDE PUZZLE — 모바일 터치 최적화
   ============================================================ */

/* Canvas 터치 스크롤 방지 (JS에서도 설정하지만 CSS 보강) */
#ld-grid-canvas {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: contain;
  display: block;
  cursor: crosshair;
}

/* 격자 래퍼 — 모바일에서 넘침 방지 */
#ld-grid-wrap {
  overflow: hidden;
  max-width: 100%;
}
#ld-grid-wrap canvas {
  max-width: 100%;
  height: auto;
}

/* 보드 아래 버튼 — 44px 터치 타겟 */
#ld-board-submit,
#ld-board-show-ans {
  min-height: 44px;
  touch-action: manipulation;
}

/* 탑바 버튼 — 터치 조작 개선 */
.ld-tbtn {
  min-height: 40px;
  touch-action: manipulation;
}

/* 정답확인 & 제출 버튼 */
#ld-side-submit {
  white-space: normal;
  word-break: keep-all;
  line-height: 1.3;
}

/* 타이머 표시 */
#ld-tb-timer {
  flex-shrink: 0;
}

/* 모바일 세로 레이아웃 (640px 이하) */
@media (max-width: 640px) {
  /* 사이드바 + 메인 세로 전환 */
  #view-land-divide > div[style] {
    flex-direction: column !important;
    overflow-y: auto !important;
  }
  #ld-side.sv-side {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-right: none !important;
    border-bottom: 1.5px solid #e5e7eb !important;
  }
  #ld-side.sv-side > div {
    flex: 1 1 auto;
    min-width: 130px;
  }
  #ld-main {
    padding: 12px 14px !important;
  }

  /* 보드 버튼 전체 너비 */
  #ld-board-actions {
    flex-direction: column;
  }
  #ld-board-submit,
  #ld-board-show-ans {
    min-height: 48px;
    width: 100%;
  }
}

/* 모바일: 캔버스 크기 동적 조정 */
@media (max-width: 680px) {
  #ld-grid-canvas {
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
  }
  #ld-grid-wrap {
    padding: 10px;
    width: 100%;
    align-items: center;
  }
  /* 사이드바 최소폭 축소 */
  #ld-side.sv-side {
    min-width: 160px;
    width: 160px;
  }
}

/* ============================================================
   YAJILIN (루프퍼즐) — 모바일 터치 최적화
   ============================================================ */

/* Canvas — 터치 조작 (JS에서 touch-action:none 동적 설정 + CSS 보강) */
#yj-grid-canvas {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: contain;
  display: block;
  cursor: pointer;
}

/* 격자 래퍼 — 모바일 넘침 방지 */
#yj-grid-wrap {
  overflow: hidden;
  max-width: 100%;
}
#yj-grid-wrap canvas {
  max-width: 100%;
  height: auto;
}

/* 탑바 버튼 — 44px 터치 타겟 */
#yj-topbar .tbtn {
  min-height: 44px;
  touch-action: manipulation;
}

#yj-grid-wrap.pz-board-frame[style*="display:inline-flex"],
#yj-grid-wrap.pz-board-frame[style*="display: inline-flex"],
#yj-grid-wrap.pz-board-frame[style*="display:flex"],
#yj-grid-wrap.pz-board-frame[style*="display: flex"] {
  grid-template-areas:
    "head head"
    "result result"
    "board actions" !important;
}

#yj-result-area {
  min-height: 0;
}

#yj-result-area .result-banner {
  width: 100%;
  border-radius: 12px;
  border: 2px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}

#yj-result-area .result-banner.correct {
  border-color: #86efac;
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
  color: #065f46;
  font-size: 17px;
  padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(16, 185, 129, .20);
}

#yj-result-area .result-banner.yj-complete {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "icon sub";
  align-items: center;
  justify-content: center;
  column-gap: 12px;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 24px;
  text-align: left;
}

#yj-result-area .yj-complete-icon {
  grid-area: icon;
  font-size: 34px;
  line-height: 1;
}

#yj-result-area .yj-complete-title {
  grid-area: title;
  font-size: 24px;
  font-weight: 900;
  color: #047857;
  line-height: 1.15;
}

#yj-result-area .yj-complete-sub {
  grid-area: sub;
  font-size: 14px;
  font-weight: 800;
  color: #065f46;
  line-height: 1.45;
}

#yj-result-area .result-banner.wrong {
  border-color: #fecaca;
  background: #fff1f2;
  color: #b91c1c;
}

#yj-result-area .result-banner.hint {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

/* 도구 버튼 — 충분한 터치 영역 */
.tool-btn {
  min-height: 40px;
  touch-action: manipulation;
}

/* 모바일 세로 레이아웃 (640px 이하) */
@media (max-width: 640px) {
  /* yj-wrap: 사이드+메인 flex → column */
  #yj-wrap {
    flex-direction: column !important;
    overflow-y: auto !important;
  }
  #yj-side.sv-side {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-right: none !important;
    border-bottom: 1.5px solid #e5e7eb !important;
    overflow: visible !important;
  }
  #yj-side.sv-side > div {
    flex: 1 1 auto;
    min-width: 120px;
  }
  #yj-main {
    padding: 12px 14px !important;
  }

  /* 캔버스 가로 스크롤 대응 */
  #yj-grid-canvas {
    max-width: calc(100vw - 28px) !important;
    height: auto !important;
  }
  #yj-grid-wrap {
    padding: 10px;
    width: 100%;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 초소형 화면 (400px 이하) */
@media (max-width: 400px) {
  #yj-grid-canvas {
    max-width: calc(100vw - 16px) !important;
  }
}

/* ============================================================
   GAME GUIDE VIEW
   ============================================================ */

/* ── 가이드 뷰 전체 래퍼 ── */
#view-guide {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 20px 60px;
}

/* ── 가이드 페이지 헤더 ── */
.guide-page-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.guide-page-header h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
}
.guide-page-header p {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 3px;
}
.guide-page-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

/* ── 게임 카드 목록 ── */
#guide-game-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guide-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.15s;
  width: 100%;
}
.guide-card:hover {
  border-color: var(--card-color, var(--primary));
  background: var(--card-light, var(--primary-light));
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
}
.guide-card.active {
  border-color: var(--card-color, var(--primary));
  background: var(--card-light, var(--primary-light));
}

.guide-card-emoji {
  font-size: 32px;
  flex-shrink: 0;
  width: 44px;
  text-align: center;
}
.guide-card-body {
  flex: 1;
  min-width: 0;
}
.guide-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.guide-card-tagline {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.guide-card-arrow {
  font-size: 13px;
  color: var(--text-light);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.guide-card:hover .guide-card-arrow {
  transform: translateX(3px);
  color: var(--card-color, var(--primary));
}

/* ── 뒤로가기 버튼 ── */
#btn-guide-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-sidebar);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.15s;
  margin-bottom: 24px;
}
#btn-guide-back:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

/* ── 상세 뷰 ── */
#guide-detail-view { display: none; }

/* ── 히어로 헤더 ── */
.gd-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  border-radius: 18px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.gd-hero-emoji {
  font-size: 56px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
.gd-hero-text {
  flex: 1;
  min-width: 200px;
}
.gd-hero-title {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.gd-hero-tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}
.btn-guide-generate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 20px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-guide-generate:hover {
  background: rgba(255,255,255,0.35);
  border-color: #fff;
  transform: translateY(-1px);
}

/* ── 섹션 공통 ── */
.gd-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 20px;
}
.gd-section-last { margin-bottom: 0; }

.gd-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* ── 역사 본문 ── */
.gd-history-body {
  font-size: 14px;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 24px;
}
.gd-history-body strong { color: var(--primary-dark); }
.gd-history-body em { color: var(--text-muted); font-style: italic; }

/* ── 타임라인 ── */
.gd-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.gd-tl-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 14px;
  row-gap: 0;
  padding-bottom: 0;
}
.gd-tl-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-top: 3px;
  flex-shrink: 0;
  grid-column: 1;
  grid-row: 1;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.gd-tl-line {
  width: 2px;
  min-height: 20px;
  margin: 2px auto 2px;
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
}
.gd-tl-year {
  font-size: 12px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  grid-column: 2;
  grid-row: 1;
  line-height: 1.2;
}
.gd-tl-text {
  font-size: 13px;
  color: var(--text-muted);
  grid-column: 2;
  grid-row: 2;
  padding-bottom: 14px;
  line-height: 1.5;
}

/* ── 학습 효과 그리드 ── */
.gd-effects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) {
  .gd-effects-grid { grid-template-columns: 1fr; }
}

.gd-effect-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  background: var(--bg);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.gd-effect-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.gd-effect-body { flex: 1; }
.gd-effect-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 4px;
}
.gd-effect-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── 교육과정 표 ── */
.gd-curriculum-table {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.gd-curr-header {
  display: grid;
  grid-template-columns: 140px 80px 1fr;
  gap: 0;
  background: var(--bg-sidebar);
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gd-curr-row {
  display: grid;
  grid-template-columns: 140px 80px 1fr;
  gap: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  align-items: center;
  font-size: 13px;
  transition: background 0.1s;
}
.gd-curr-row:hover { background: var(--bg); }
.gd-curr-grade { font-weight: 600; color: var(--text); }
.gd-curr-subject {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}
.gd-curr-link { color: var(--text-muted); line-height: 1.5; }

/* ── 팁 목록 ── */
.gd-tips { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.gd-tip-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
}
.gd-tip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

/* ── 하단 CTA ── */
.gd-cta {
  text-align: center;
  padding: 32px 20px;
  margin-top: 28px;
  background: var(--primary-light);
  border-radius: 16px;
  border: 1px solid var(--primary);
}
.gd-cta p {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 14px;
}
.gd-cta p strong { color: var(--primary); }
.btn-guide-generate-bottom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── 모바일 반응형 ── */
@media (max-width: 600px) {
  #view-guide { padding: 12px 14px 40px; }
  .gd-hero { padding: 20px 18px; gap: 14px; }
  .gd-hero-emoji { font-size: 40px; }
  .gd-hero-title { font-size: 20px; }
  .gd-section { padding: 18px 16px; }
  .gd-curr-header,
  .gd-curr-row { grid-template-columns: 120px 64px 1fr; }
  .guide-page-header h1 { font-size: 20px; }
}

/* ════════════════════════════════════════════════════════
   조건 미로 퍼즐 (Maze Puzzle)
════════════════════════════════════════════════════════ */

#view-maze-puzzle { padding: 0; }

/* ── 전체 래퍼 ── */
.mz-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  background: #f8fafc;
  overflow: hidden;   /* 하단 border 잘림 방지 */
}

/* ── 컨트롤 바 ── */
.mz-ctrl-bar {
  background: #fff;
  border-bottom: 1.5px solid #e2e8f0;
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.mz-ctrl-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mz-ctrl-label {
  font-size: 11px;
  font-weight: 800;
  color: #6b7280;
  white-space: nowrap;
}
.mz-select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
  background: #fff;
  cursor: pointer;
  outline: none;
  min-width: 200px;
  max-width: 280px;
}
.mz-select:focus { border-color: #6d28d9; }

/* 학년/크기 탭 */
.mz-grade-tabs,
.mz-size-tabs {
  display: flex;
  gap: 4px;
}
.mz-grade-tab,
.mz-size-tab {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  transition: all .15s;
}
.mz-grade-tab:hover,
.mz-size-tab:hover { border-color: #6d28d9; color: #6d28d9; }
.mz-grade-tab.active,
.mz-size-tab.active {
  background: #6d28d9;
  border-color: #6d28d9;
  color: #fff;
}

/* 버튼 */
.mz-btn {
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.mz-btn:hover { opacity: .88; transform: translateY(-1px); }
.mz-btn:active { transform: scale(0.97); }
.mz-btn-primary { background: #6d28d9; color: #fff; box-shadow: 0 2px 8px rgba(109,40,217,.3); }
.mz-btn-gray    { background: #f3f4f6; color: #374151; }
.mz-btn-success { background: #10b981; color: #fff; }
.mz-btn-save    { background: #f59e0b; color: #fff; }
.mz-btn-save:disabled { background: #6b7280 !important; cursor: default; opacity: 1; transform: none; }
.mz-btn-regen   { background: #e0e7ff; color: #4338ca; border: 1.5px solid #c7d2fe; }
.mz-btn-regen:hover { background: #c7d2fe; }

/* SEED 입력 그룹 */
.mz-seed-group { gap: 4px; }
.mz-seed-input {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  font-family: monospace;
  color: #1f2937;
  background: #fff;
  outline: none;
  width: 130px;
  letter-spacing: 0.05em;
  transition: border-color .15s;
}
.mz-seed-input:focus { border-color: #6d28d9; }
.mz-seed-input::placeholder { color: #9ca3af; font-weight: 400; font-family: inherit; }
.mz-seed-clear {
  background: none;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  color: #9ca3af;
  font-size: 11px;
  padding: 4px 7px;
  cursor: pointer;
  transition: all .15s;
  line-height: 1;
}
.mz-seed-clear:hover { border-color: #ef4444; color: #ef4444; }

/* ── 조건 배너 ── */
.mz-condition-banner {
  background: linear-gradient(135deg, #ede9fe, #faf5ff);
  border-bottom: 1.5px solid #c4b5fd;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mz-cond-icon { font-size: 22px; flex-shrink: 0; }
.mz-cond-text { flex: 1; min-width: 200px; }
.mz-cond-unit {
  font-size: 10.5px;
  font-weight: 700;
  color: #6d28d9;
  margin-bottom: 2px;
}
.mz-cond-desc {
  font-size: 13px;
  font-weight: 800;
  color: #1f2937;
}
.mz-legend {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
}
.mz-legend-item { display: flex; align-items: center; gap: 5px; }
.mz-legend-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid #374151;
}
.mz-legend-dot.mz-pass { background: #d1fae5; }
.mz-legend-dot.mz-fail { background: #f3f4f6; }

/* ── 빈 상태 ── */
.mz-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  flex: 1;
  text-align: center;
}
.mz-empty-icon { font-size: 52px; margin-bottom: 12px; }
.mz-empty-title {
  font-size: 20px;
  font-weight: 900;
  color: #1f2937;
  margin-bottom: 6px;
}
.mz-empty-desc {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.7;
  margin-bottom: 24px;
}
.mz-empty-examples {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.mz-ex-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  min-width: 120px;
  transition: all .15s;
}
.mz-ex-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-2px); }
.mz-ex-icon { font-size: 28px; margin-bottom: 6px; }
.mz-ex-text { font-size: 11px; color: #374151; line-height: 1.6; }
.mz-ex-text strong { font-size: 12px; color: #1f2937; }

/* ── 퍼즐 영역 ── */
.mz-puzzle-area {
  padding: 20px;
  overflow: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;   /* 미로 수평 중앙 정렬 */
}
.mz-board-wrap {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;   /* 각 섹션(문제/정답)도 중앙 */
  width: 100%;
}
.mz-board-section {
  display: flex;
  flex-direction: column;
  align-items: center;   /* 레이블·보드 모두 중앙 */
  width: 100%;
}
.mz-board-label {
  font-size: 12px;
  font-weight: 800;
  color: #374151;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mz-ans-label { color: #059669; }
.mz-board-hint {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  color: #6d28d9;
  background: #ede9fe;
  padding: 2px 8px;
  border-radius: 10px;
}

/* 미로 그리드 셀 공통 */
.mz-board .mz-grid {
  border: 2.5px solid #1f2937;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.mz-cell-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: -0.3px;
}
.mz-cell-num {
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
}
.mz-cell-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.05;
  font-size: 0.68em;
  letter-spacing: 0;
  white-space: nowrap;
}
.mz-cell-frac-pair {
  gap: 0;
  font-size: 0.62em;
}
.mz-cell-frac-pair > span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.mz-fraction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 12px;
  line-height: 1;
  vertical-align: middle;
}
.mz-fraction i {
  display: block;
  width: 100%;
  min-width: 11px;
  border-top: 1.5px solid currentColor;
  margin: 1px 0;
}
.mz-path-dot {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 4px rgba(245,158,11,.6);
}

/* 반응형 */
@media (max-width: 640px) {
  .mz-ctrl-bar { padding: 8px 10px; gap: 8px; }
  .mz-select { min-width: 150px; }
  .mz-puzzle-area { padding: 12px; }
  .mz-board-wrap { gap: 16px; }
  .mz-empty-examples { gap: 8px; }
}

/* ════════════════════════════════════════════════════════
   식 미로 (Formula Maze) — fm- 접두사
   테마색: 보라(#7c3aed) — 수 미로(#6d28d9)와 유사하나 구분
════════════════════════════════════════════════════════ */
#view-formula-maze { padding: 0; }

.fm-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  background: #faf5ff;
  overflow: hidden;   /* 하단 border 잘림 방지 */
}

/* 컨트롤 바 */
.fm-ctrl-bar {
  background: #fff;
  border-bottom: 1.5px solid #e2e8f0;
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.fm-ctrl-group { display: flex; align-items: center; gap: 6px; }
.fm-ctrl-label {
  font-size: 11px;
  font-weight: 800;
  color: #6b7280;
  white-space: nowrap;
}
.fm-select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
  background: #fff;
  cursor: pointer;
  outline: none;
  min-width: 220px;
  max-width: 300px;
}
.fm-select:focus { border-color: #7c3aed; }

/* 학년/크기 탭 */
.fm-grade-tabs, .fm-size-tabs { display: flex; gap: 4px; }
.fm-grade-tab, .fm-size-tab {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  transition: all .15s;
}
.fm-grade-tab:hover, .fm-size-tab:hover { border-color: #7c3aed; color: #7c3aed; }
.fm-grade-tab.active, .fm-size-tab.active {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

/* 버튼 */
.fm-btn {
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.fm-btn:hover { opacity: .88; transform: translateY(-1px); }
.fm-btn:active { transform: scale(0.97); }
.fm-btn-primary { background: #7c3aed; color: #fff; box-shadow: 0 2px 8px rgba(124,58,237,.3); }
.fm-btn-gray    { background: #f3f4f6; color: #374151; }
.fm-btn-success { background: #10b981; color: #fff; }
.fm-btn-save    { background: #f59e0b; color: #fff; }
.fm-btn-save:disabled { background: #6b7280 !important; cursor: default; opacity: 1; transform: none; }
.fm-btn-regen   { background: #e0e7ff; color: #4338ca; border: 1.5px solid #c7d2fe; }
.fm-btn-regen:hover { background: #c7d2fe; }
.fm-btn-answer  { background: #f0fdf4; color: #059669; border: 1.5px solid #bbf7d0; }
.fm-btn-answer:hover { background: #dcfce7; }

/* SEED 입력 */
.fm-seed-group { gap: 4px; }
.fm-seed-input {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  font-family: monospace;
  color: #1f2937;
  background: #fff;
  outline: none;
  width: 130px;
  letter-spacing: 0.05em;
  transition: border-color .15s;
}
.fm-seed-input:focus { border-color: #7c3aed; }
.fm-seed-input::placeholder { color: #9ca3af; font-weight: 400; font-family: inherit; }
.fm-seed-clear {
  background: none;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  color: #9ca3af;
  font-size: 11px;
  padding: 4px 7px;
  cursor: pointer;
  transition: all .15s;
  line-height: 1;
}
.fm-seed-clear:hover { border-color: #ef4444; color: #ef4444; }

/* 조건 배너 */
.fm-condition-banner {
  background: linear-gradient(135deg, #f5f3ff, #faf5ff);
  border-bottom: 1.5px solid #c4b5fd;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.fm-cond-icon { font-size: 22px; flex-shrink: 0; }
.fm-cond-text { flex: 1; min-width: 200px; }
.fm-cond-unit { font-size: 10.5px; font-weight: 700; color: #7c3aed; margin-bottom: 2px; }
.fm-cond-desc { font-size: 13px; font-weight: 800; color: #1f2937; }
.fm-legend { display: flex; gap: 12px; align-items: center; font-size: 11px; font-weight: 700; }
.fm-legend-item { display: flex; align-items: center; gap: 5px; }

/* 빈 상태 */
.fm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  flex: 1;
  text-align: center;
}
.fm-empty-icon { font-size: 52px; margin-bottom: 12px; }
.fm-empty-title { font-size: 20px; font-weight: 900; color: #1f2937; margin-bottom: 6px; }
.fm-empty-desc { font-size: 13px; color: #6b7280; line-height: 1.7; margin-bottom: 24px; }
.fm-empty-examples { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.fm-ex-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  min-width: 100px;
  transition: all .15s;
}
.fm-ex-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-2px); }
.fm-ex-icon { font-size: 26px; margin-bottom: 6px; }
.fm-ex-text { font-size: 11px; color: #374151; line-height: 1.7; }
.fm-ex-text strong { font-size: 12px; color: #7c3aed; }

/* 퍼즐 영역 */
.fm-puzzle-area {
  padding: 20px;
  overflow: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;   /* 미로 수평 중앙 정렬 */
}
.fm-board-wrap {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;   /* 각 섹션(문제/정답)도 중앙 */
  width: 100%;
}
.fm-board-section {
  display: flex;
  flex-direction: column;
  align-items: center;   /* 레이블·보드 모두 중앙 */
  width: 100%;
}
.fm-board-label {
  font-size: 12px;
  font-weight: 800;
  color: #374151;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fm-board-hint {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  color: #7c3aed;
  background: #f5f3ff;
  padding: 2px 8px;
  border-radius: 10px;
}
/* 식 미로 그리드 */
.fm-board .fm-grid {
  border: 2.5px solid #1f2937;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}

/* 반응형 */
@media (max-width: 640px) {
  .fm-ctrl-bar { padding: 8px 10px; gap: 8px; }
  .fm-select { min-width: 160px; }
  .fm-puzzle-area { padding: 12px; }
  .fm-board-wrap { gap: 16px; }
}

/* ============================================================
   지뢰찾기 사이드바 인쇄 페이지 수 UI
   ============================================================ */

/* 수량 input (사이드바 전용) */
.ms-qty-input {
  width: 48px;
  text-align: center;
  border: 2px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 0;
  font-family: inherit;
}

/* 총 문제 수 정보 */
#ms-sidebar-total-info {
  margin-top: 5px !important;
  font-size: 11px;
  color: var(--text-muted);
}
#ms-sidebar-total-info strong {
  color: var(--primary);
  font-size: 12px;
}

/* ============================================================
   PuzzleInteract — 공통 인터랙티브 입력 UI
   ============================================================ */

/* ── 입력 가능 셀 기본 ── */
.pi-input {
  position: relative;
  cursor: pointer !important;
  transition: background 0.12s, box-shadow 0.12s;
}
.pi-input:hover {
  background: #EFF6FF !important;
}

/* ── 선택된 셀 (파란 테두리 + 하이라이트) ── */
.pi-selected {
  background: #DBEAFE !important;
  box-shadow: inset 0 0 0 2.5px #3B82F6 !important;
  z-index: 2;
}

/* ── 셀 내 사용자 입력 값 ── */
.pi-user-val {
  font-size: inherit;
  font-weight: 700;
  color: #1D4ED8;
  line-height: 1;
  pointer-events: none;
}

/* ── 채점 후 정오 표시 ── */
.pi-cell-correct {
  background: #F0FDF4 !important;
  box-shadow: inset 0 0 0 2px #22C55E !important;
}
.pi-cell-correct .pi-user-val { color: #15803D; }

.pi-cell-wrong {
  background: #FFF1F2 !important;
  box-shadow: inset 0 0 0 2px #F43F5E !important;
}
.pi-cell-wrong .pi-user-val { color: #BE123C; }

/* ── 노노그램 셀 상태 ── */
.ng-cell { cursor: pointer; transition: background 0.1s; user-select: none; }
.ng-cell.ng-user-empty  { background: #fff; }
.ng-cell.ng-user-filled { background: #1e293b !important; }
.ng-cell.ng-user-cross  {
  background: #f8fafc !important;
  position: relative;
}
.ng-cell.ng-user-cross::before,
.ng-cell.ng-user-cross::after {
  content: '';
  position: absolute;
  inset: 20%;
  border-top: 2px solid #94a3b8;
  transform-origin: center;
}
.ng-cell.ng-user-cross::before { transform: rotate(45deg); }
.ng-cell.ng-user-cross::after  { transform: rotate(-45deg); }

/* 노노그램 채점 마킹 */
.ng-cell.pi-cell-wrong   { background: #FFF1F2 !important; box-shadow: inset 0 0 0 2px #F43F5E !important; }
.ng-cell.pi-cell-correct { background: inherit; }

/* ── 제출 버튼 행 ── */
.pi-submit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 4px;
  flex-wrap: wrap;
}
.pi-btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(59,130,246,0.35);
  transition: transform 0.1s, box-shadow 0.1s;
  white-space: nowrap;
}
.pi-btn-submit:hover  { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(59,130,246,0.4); }
.pi-btn-submit:active { transform: translateY(0); }

/* 입력 초기화 버튼 (켄켄 등) */
.pi-btn-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #64748b, #475569);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(100,116,139,0.3);
  transition: transform 0.1s, box-shadow 0.1s;
  white-space: nowrap;
}
.pi-btn-reset:hover  { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(100,116,139,0.4); }
.pi-btn-reset:active { transform: translateY(0); }

.pi-input-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── 채점 결과 패널 ── */
.pi-grade-result {
  margin: 10px 0;
  padding: 14px 18px;
  border-radius: 14px;
  border: 2px solid transparent;
  animation: pi-fadein 0.25s ease;
}
@keyframes pi-fadein { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.pi-grade-perfect { background: #F0FDF4; border-color: #86EFAC; }
.pi-grade-good    { background: #FFFBEB; border-color: #FCD34D; }
.pi-grade-try     { background: #FFF1F2; border-color: #FDA4AF; }

/* 카쿠로 정답확인/제출 결과 패널 */
.pi-grade-correct {
  display: flex; flex-direction: column; gap: 4px;
  background: #F0FDF4; border-radius: 10px; padding: 12px 14px;
  border-left: 4px solid #10B981;
}
.pi-grade-wrong {
  display: flex; flex-direction: column; gap: 4px;
  background: #FFF1F2; border-radius: 10px; padding: 12px 14px;
  border-left: 4px solid #F43F5E;
}
.pi-grade-correct .pi-grade-emoji,
.pi-grade-wrong   .pi-grade-emoji { font-size: 22px; line-height: 1; margin-bottom: 2px; }
.pi-grade-correct .pi-grade-msg  { font-size: 14px; font-weight: 700; color: #065F46; }
.pi-grade-wrong   .pi-grade-msg  { font-size: 14px; font-weight: 700; color: #9F1239; }
.pi-grade-correct .pi-grade-meta,
.pi-grade-wrong   .pi-grade-meta { font-size: 12px; color: #64748B; }

/* 카쿠로 셀 오류/정답 표시 */
.pi-cell-error {
  outline: 2.5px solid #F43F5E !important;
  background: #FFF1F2 !important;
}
.pi-cell-ok {
  outline: 2px solid #10B981 !important;
  background: #F0FDF4 !important;
}

.pi-grade-score {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pi-grade-emoji { font-size: 26px; line-height: 1; }
.pi-grade-num   { font-size: 26px; font-weight: 900; color: #1e293b; line-height: 1; }
.pi-grade-sep   { font-size: 18px; font-weight: 400; color: #94a3b8; margin: 0 2px; }
.pi-grade-msg   { font-size: 14px; font-weight: 600; color: #475569; }

.pi-grade-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pi-btn {
  padding: 7px 16px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.pi-btn:hover { opacity: 0.85; }
.pi-btn-retry     { background: #F1F5F9; color: #475569; }
.pi-btn-answer    { background: #E0F2FE; color: #0369A1; }
/* 선생님께 제출 버튼 */
.pi-btn-submit-hw {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 2px 8px rgba(16,185,129,0.35);
}
.pi-btn-submit-hw:hover { opacity: 0.9; }
.pi-btn-submit-hw:disabled {
  background: #d1fae5;
  color: #065f46;
  cursor: default;
  box-shadow: none;
  opacity: 1;
}

/* ── 키패드 (플로팅) ── */
.pi-keypad {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  width: fit-content;
  margin: 10px 0;
}
.pi-key {
  width: 44px;
  height: 44px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  color: #1e293b;
  transition: background 0.1s, transform 0.08s;
  user-select: none;
}
.pi-key:hover  { background: #DBEAFE; border-color: #93C5FD; }
.pi-key:active { transform: scale(0.93); }
.pi-key-del    { background: #FFF1F2; color: #BE123C; border-color: #FDA4AF; font-size: 18px; }
.pi-key-del:hover { background: #FFE4E6; }

/* ============================================================
   지뢰찾기 인트로 — 난이도 한눈에 보기 테이블
   ============================================================ */

/* 난이도 행: 레이블 + 바 + 정보 텍스트 */
.ms-diff-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

/* 레이블 셀 */
.ms-diff-label {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 바 */
.ms-diff-bar-wrap {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
  min-width: 40px;
}
.ms-diff-bar {
  height: 100%;
  border-radius: 3px;
}

/* 정보 셀 (크기·지뢰·배치) — 줄바꿈 금지, 넉넉한 너비 */
.ms-diff-info {
  color: #94a3b8;
  white-space: nowrap;
  text-align: right;
  min-width: 0;
  font-size: 11px;
}

/* ── 진실과 거짓 제출 영역 ── */
.tl-submit-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tl-submit-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.tl-submit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  flex-wrap: wrap;
}
.tl-submit-name {
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  min-width: 60px;
}
.tl-submit-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tl-role-btn {
  padding: 5px 14px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
}
.tl-btn-t {
  border-color: #bbf7d0;
  color: #15803d;
}
.tl-btn-t:hover, .tl-btn-t.tl-role-selected {
  background: #dcfce7;
  border-color: #4ade80;
  color: #15803d;
}
.tl-btn-l {
  border-color: #fecaca;
  color: #b91c1c;
}
.tl-btn-l:hover, .tl-btn-l.tl-role-selected {
  background: #fee2e2;
  border-color: #f87171;
  color: #b91c1c;
}
.tl-role-selected {
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.tl-submit-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tl-submit-btn {
  padding: 9px 22px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 3px 10px rgba(79,70,229,.35);
  transition: transform 0.12s;
}
.tl-submit-btn:hover { transform: scale(1.03); }
.tl-submit-reset {
  padding: 9px 16px;
  background: #f1f5f9;
  color: #475569;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}
.tl-submit-reset:hover { background: #e2e8f0; }
.tl-grade-result { margin-top: 10px; animation: pi-fadein 0.25s ease; }
.tl-grade-box {
  padding: 16px 18px;
  border-radius: 14px;
  border: 2px solid transparent;
}
.tl-grade-emoji { font-size: 28px; line-height: 1; margin-bottom: 4px; }
.tl-grade-score { font-size: 28px; font-weight: 900; line-height: 1.2; }
.tl-grade-msg   { font-size: 14px; font-weight: 700; margin-top: 4px; }
.tl-grade-detail { font-size: 12px; color: #64748b; margin-top: 2px; }
.tl-grade-wrong-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.tl-wrong-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.6);
  border-radius: 8px;
  flex-wrap: wrap;
}
.tl-wrong-name   { font-weight: 700; color: #1e293b; }
.tl-wrong-user   { color: #dc2626; }
.tl-wrong-correct { color: #16a34a; }

/* ============================================================
   ██████████████████████████████████████████████████████████
   표준 레이아웃 시스템 — PuzzleApp 공통 인터페이스
   ██████████████████████████████████████████████████████████
   
   .pz-topbar  — 모든 퍼즐의 탑바를 가리키는 표준 별칭
                  (game-topbar / standalone-topbar / sv-topbar / #play-topbar 모두 이 클래스 가짐)
   .pz-side    — 모든 퍼즐의 사이드바를 가리키는 표준 별칭
                  (standalone-side / sv-side / #sidebar 모두 이 클래스 가짐)
   .pz-main    — 메인 콘텐츠 영역 표준 별칭
   
   사용법: 공통 스타일을 여기에 작성하면 모든 퍼즐에 동시 적용됨.
   기존 클래스(game-topbar 등)는 제거하지 않음 — 병기(竝記) 방식.
   ============================================================ */

/* ── 표준 탑바 공통 속성 ── */
.pz-topbar {
  /* 모든 탑바에 공통 적용되는 시각 표준 */
  /* 현재는 기존 클래스(game-topbar 등)가 외형을 정의하고
     .pz-topbar는 행동(JS 훅)·확장 스타일용으로 사용 */
}

/* 탑바 구분선 통일 (.sep 공통) */
.pz-topbar .sep,
.pz-topbar .standalone-topbar-sep {
  width: 1px;
  height: 24px;
  background: #e5e7eb;
  flex-shrink: 0;
}

/* 탑바 제목 통일 */
.pz-topbar > strong,
.pz-topbar > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border: 2px solid #c7d2fe;
  border-radius: 8px;
  background: linear-gradient(135deg, #eef2ff, #fff);
  box-shadow: 0 1px 5px rgba(79, 70, 229, .14);
  font-size: 16px;
  font-weight: 900;
  color: #3730a3;
  letter-spacing: 0;
  white-space: nowrap;
  flex-shrink: 0;
  position: sticky;
  left: 0;
  z-index: 3;
}

/* ── 표준 사이드바 공통 속성 ── */
.pz-side {
  /* 모든 사이드바에 공통 적용되는 시각 표준 */
  /* 섹션 제목 */
}

/* 사이드바 섹션 제목 통일 */
.pz-side .stit {
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* 사이드바 기본 버튼 통일 */
.pz-side .ps-gen-btn,
.pz-side .pn-sb-btn {
  width: 100%;
  padding: 9px 6px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
}

/* ── 표준 탑바 버튼 공통 스타일 ── */
/* 이미 .tbtn으로 통일되어 있으므로 여기서는 추가 규칙만 */
.pz-topbar .tbtn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── 표준 메인 영역 ── */
.pz-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

/* ── 퍼즐 레이아웃 래퍼 (사이드바 + 메인) ── */
.pz-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── 표준 보드 영역 ── */
.pz-board-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* ── 표준 액션 영역 (정답확인/제출/정답보기 버튼) ── */
.pz-action-area {
  display: flex;
  gap: 8px;
  padding: 10px 20px 16px;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
}

/* ── 난이도 배지 통일 ── */
.pz-diff-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: #eef2ff;
  color: #4f46e5;
  border: 1.5px solid #c7d2fe;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 모바일: 사이드바 숨김/탑바 압축 ── */
@media (max-width: 640px) {
  .pz-side {
    display: none !important;
  }
  .pz-topbar {
    gap: 4px;
    padding: 0 8px;
  }
}

/* ============================================================
   켄켄(KenKen) 인터랙티브 보드 — 모바일 터치 최적화
   ============================================================ */

/* 보드 테이블 스크롤/터치 방지 */
#kk-interact-board table {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: contain;
}

/* 인터랙티브 셀 터치 영역 최적화 */
.kk-interact-cell {
  touch-action: none !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* puzzle-grid-wrap: 모바일에서 최대폭 활용 */
#pn-content-area .puzzle-grid-wrap {
  max-width: 100%;
  overflow: visible;
}

/* 보드 아래 액션 버튼 (정답확인/정답보기) */
#kk-board-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  box-sizing: border-box;
}

/* 채점 결과 인라인 표시 */
#kk-inline-result {
  width: 100%;
  margin-top: 10px;
  box-sizing: border-box;
}

/* 켄켄 섹션 max-width 제거 (보드 크기에 맞게) */
#view-puzzle-new .pn-section {
  max-width: 100%;
}
#view-puzzle-new .pn-meta-bar,
#view-puzzle-new .pn-nav-bar,
#view-puzzle-new .pn-kk-brief {
  max-width: min(520px, 100%);
}

/* 모바일 반응형 */
@media (max-width: 600px) {
  #kk-board-actions button {
    font-size: 13px !important;
    padding: 10px 6px !important;
  }
  #pn-content-area {
    padding: 0 !important;
  }
  .pn-view-wrap {
    padding: 12px 10px;
  }
}

/* ============================================================
   Sidebar Standardization V1
   기능 연결은 그대로 두고, 퍼즐 사이드바의 외형만 먼저 통일한다.
   ============================================================ */
:root {
  --sidebar-width: 260px;
  --pz-side-width: 260px;
  --pz-side-pad: 12px;
  --pz-side-gap: 12px;
  --pz-side-border: #e5e7eb;
  --pz-side-muted: #94a3b8;
  --pz-side-text: #374151;
  --pz-side-blue: #4f46e5;
  --pz-side-blue-soft: #eef2ff;
}

#sidebar.pz-side,
#sidebar,
.sv-side.pz-side,
.standalone-side.pz-side,
#side.pz-side {
  width: var(--pz-side-width) !important;
  min-width: var(--pz-side-width) !important;
  max-width: var(--pz-side-width) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border-right: 1px solid var(--pz-side-border) !important;
  padding: var(--pz-side-pad) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--pz-side-gap) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
}

.pz-side .stit,
#sidebar .sidebar-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--pz-side-muted) !important;
  letter-spacing: .04em !important;
  line-height: 1.35 !important;
  border-bottom: 1px solid var(--pz-side-border) !important;
  padding-bottom: 5px !important;
  margin: 0 0 7px !important;
  text-transform: none !important;
}

.pz-side .drow,
.pz-side .ps-diff-group,
.pz-side .ps-seed-row,
.pz-side .sv-seed-action-row,
.pz-side .stat-row {
  gap: 6px !important;
}

.pz-side .dbtn,
.pz-side .pss-diff-btn,
.pz-side .pss-type-btn,
.pz-side .pn-sb-btn,
.pz-side .ps-gen-btn,
.pz-side .sv-seed-regen-btn,
#sidebar .diff-card,
#sidebar .btn:not(.btn-icon):not(.qty-btn) {
  min-height: 34px !important;
  padding: 8px 7px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

.pz-side .dbtn.on,
.pz-side .pss-diff-btn.on,
.pz-side .pss-type-btn.on,
#sidebar .diff-card.active {
  background: var(--pz-side-blue) !important;
  border-color: var(--pz-side-blue) !important;
  color: #fff !important;
}

.pz-side .sv-seed-input,
.pz-side .ps-seed-input,
#sidebar #seed-input,
#side.pz-side #side-seed {
  width: 100% !important;
  height: 34px !important;
  border-radius: 8px !important;
  border: 2px solid var(--pz-side-border) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  box-sizing: border-box !important;
}

.pz-side .sv-seed-input:focus,
.pz-side .ps-seed-input:focus,
#sidebar #seed-input:focus,
#side.pz-side #side-seed:focus {
  border-color: var(--pz-side-blue) !important;
  box-shadow: 0 0 0 3px var(--pz-side-blue-soft) !important;
}

.pz-side .hint-text,
.pz-side .seed-lbl,
.pz-side .stat-l {
  font-size: 11px !important;
  line-height: 1.55 !important;
}

.pz-side .stat-n {
  font-size: 18px !important;
  line-height: 1.1 !important;
}

.pz-side .rule-box {
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  padding: 10px 12px !important;
  border-radius: 9px !important;
}

@media (max-width: 640px) {
  #sidebar.pz-side,
  #sidebar,
  .sv-side.pz-side,
  .standalone-side.pz-side,
  #side.pz-side {
    display: none !important;
  }
}

/* ============================================================
   Dedicated Screen Readability V1
   Applies only to standalone manipulation screens.
   ============================================================ */
#view-stacking-blocks,
#view-tangram,
#view-pattern-block {
  font-size: 15px;
  line-height: 1.45;
}

#view-tangram .sv-topbar,
#view-pattern-block .sv-topbar {
  min-height: 52px !important;
  height: 52px !important;
  gap: 8px !important;
  padding: 7px 12px !important;
}

#view-tangram .sv-topbar strong,
#view-pattern-block .sv-topbar strong {
  font-size: 16px !important;
  font-weight: 900 !important;
}

#view-tangram .sv-topbar button,
#view-tangram .sv-topbar a,
#view-tangram .sv-topbar select,
#view-pattern-block .sv-topbar button,
#view-pattern-block .sv-topbar a,
#view-pattern-block .sv-topbar select {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 9px !important;
  border-width: 2px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}

#view-tangram .sv-topbar select,
#view-pattern-block .sv-topbar select {
  padding-right: 30px !important;
}

#view-tangram .sv-side.pz-side,
#view-pattern-block .sv-side.pz-side {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  padding: 14px 12px !important;
  gap: 12px !important;
  font-size: 13.5px !important;
}

#view-tangram .sv-side div[style*="font-size:10px"],
#view-pattern-block .sv-side div[style*="font-size:10px"] {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

#view-tangram .sv-side div[style*="font-size:11px"],
#view-pattern-block .sv-side div[style*="font-size:11px"] {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

#view-tangram .sv-side button,
#view-tangram .sv-side a,
#view-tangram .sv-side select,
#view-tangram .sv-side input,
#view-pattern-block .sv-side button,
#view-pattern-block .sv-side a,
#view-pattern-block .sv-side select,
#view-pattern-block .sv-side input {
  min-height: 36px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
}

#view-tangram .tg-hint-btn,
#view-pattern-block .pb-hint-btn {
  min-height: 54px !important;
  padding: 10px 12px !important;
  border-width: 2px !important;
}

#view-tangram .tg-hint-emoji,
#view-pattern-block .pb-hint-emoji {
  font-size: 18px !important;
}

#view-tangram .tg-hint-info strong,
#view-pattern-block .pb-hint-info strong {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

#view-tangram .tg-hint-info small,
#view-pattern-block .pb-hint-info small {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

#view-tangram .tg-gallery,
#view-pattern-block .pb-gallery {
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)) !important;
  gap: 10px !important;
}

#view-tangram .tg-gallery-card,
#view-pattern-block .pb-gallery-card {
  min-height: 86px !important;
  padding: 8px 6px 7px !important;
  border-radius: 10px !important;
}

#view-tangram .tg-gallery-name,
#view-pattern-block .pb-gallery-name {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

#view-tangram .tg-gallery-badge,
#view-pattern-block .pb-gallery-badge,
#view-tangram .sv-side span[style*="font-size:10px"],
#view-pattern-block .sv-side span[style*="font-size:10px"] {
  font-size: 11.5px !important;
}

#view-stacking-blocks .sb-mode-bar {
  min-height: 52px !important;
  padding: 8px 14px !important;
  gap: 10px !important;
}

#view-stacking-blocks .sb-mode-btn {
  min-height: 38px !important;
  padding: 8px 16px !important;
  border-radius: 22px !important;
  border-width: 2px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

#view-stacking-blocks .sb-mode-hint {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

#view-stacking-blocks .sb-panel {
  width: 260px !important;
  padding: 14px 12px !important;
  gap: 10px !important;
  font-size: 13.5px !important;
}

#view-stacking-blocks .sb-panel-group {
  padding: 12px !important;
  border-radius: 11px !important;
}

#view-stacking-blocks .sb-panel-label {
  font-size: 12px !important;
  line-height: 1.35 !important;
  letter-spacing: .06em !important;
}

#view-stacking-blocks .sb-tool-btn,
#view-stacking-blocks .sb-view-btn,
#view-stacking-blocks .sb-action-btns button,
#view-stacking-blocks .sb-panel select {
  min-height: 40px !important;
  border-radius: 9px !important;
  border-width: 2px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
}

#view-stacking-blocks .sb-view-btn {
  min-height: 60px !important;
  padding: 11px 5px !important;
}

#view-stacking-blocks .sb-view-btn i {
  font-size: 18px !important;
}

#view-stacking-blocks .sb-view-btn span,
#view-stacking-blocks .sb-mini-label,
#view-stacking-blocks .sb-meta-row {
  font-size: 12.5px !important;
}

@media (max-width: 900px) {
  #view-tangram .sv-side.pz-side,
  #view-pattern-block .sv-side.pz-side {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
  }

  #view-stacking-blocks .sb-panel {
    width: 240px !important;
  }
}

/* ============================================================
   Dedicated Screen Structure V2
   Left controls / center workspace / right list or tools.
   ============================================================ */
:root {
  --dedicated-left-w: 260px;
  --dedicated-right-w: 310px;
  --dedicated-panel-bg: #fff;
  --dedicated-panel-border: #e5e7eb;
}

#view-tangram .sv-side.pz-side,
#view-pattern-block .sv-side.pz-side {
  width: var(--dedicated-left-w) !important;
  min-width: var(--dedicated-left-w) !important;
  max-width: var(--dedicated-left-w) !important;
}

#view-tangram.dedicated-has-board #tg-area,
#view-pattern-block.dedicated-has-board #pb-area {
  display: grid !important;
  grid-template-columns: minmax(420px, 1fr) var(--dedicated-right-w);
  grid-template-rows: minmax(0, 1fr);
  gap: 16px !important;
  align-items: stretch !important;
  overflow: hidden !important;
  padding: 16px 18px !important;
}

#view-tangram.dedicated-has-board #tg-board-area,
#view-pattern-block.dedicated-has-board #pb-board-area {
  grid-column: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 0 4px 28px 0 !important;
}

#view-tangram.dedicated-has-board #tg-gallery-section,
#view-pattern-block.dedicated-has-board #pb-gallery-section {
  grid-column: 2;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--dedicated-panel-bg);
  border: 1px solid var(--dedicated-panel-border);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

#view-tangram.dedicated-has-board #tg-intro,
#view-pattern-block.dedicated-has-board #pb-intro {
  grid-column: 1 / -1;
}

#view-tangram.dedicated-has-board .tg-gallery,
#view-pattern-block.dedicated-has-board .pb-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start;
}

#view-tangram.dedicated-has-board .tg-gallery-card,
#view-pattern-block.dedicated-has-board .pb-gallery-card {
  min-height: 92px !important;
}

#view-stacking-blocks .sb-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--dedicated-right-w);
}

#view-stacking-blocks .sb-canvas-wrap {
  min-width: 0;
}

#view-stacking-blocks .sb-panel {
  width: var(--dedicated-right-w) !important;
  min-width: var(--dedicated-right-w) !important;
  max-width: var(--dedicated-right-w) !important;
  border-left: 1px solid var(--dedicated-panel-border) !important;
}

@media (max-width: 1100px) {
  :root {
    --dedicated-left-w: 238px;
    --dedicated-right-w: 286px;
  }

  #view-tangram.dedicated-has-board #tg-area,
  #view-pattern-block.dedicated-has-board #pb-area {
    grid-template-columns: minmax(360px, 1fr) var(--dedicated-right-w);
    gap: 12px !important;
    padding: 14px !important;
  }
}

@media (max-width: 920px) {
  #view-tangram.dedicated-has-board #tg-area,
  #view-pattern-block.dedicated-has-board #pb-area {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
  }

  #view-tangram.dedicated-has-board #tg-gallery-section,
  #view-pattern-block.dedicated-has-board #pb-gallery-section {
    max-height: 260px;
  }

  #view-stacking-blocks .sb-layout {
    display: flex !important;
    flex-direction: column !important;
  }
}

.pz-success-spotlight,
.result-banner.pz-success-spotlight,
.pz-result-banner.pz-success-spotlight,
.pn-result.pz-success-spotlight,
.pi-grade-result.pz-success-spotlight {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: min(780px, 100%);
  margin: 16px auto 0;
  padding: 22px 24px;
  border: 2.5px solid #86efac;
  border-radius: 18px;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  color: #14532d;
  text-align: center;
  box-shadow: 0 18px 42px rgba(22, 101, 52, 0.16);
  scroll-margin-top: 160px;
  position: relative;
  z-index: 5;
}

.pz-success-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pz-success-icon {
  display: block;
  font-size: 42px;
  line-height: 1;
}

.pz-success-title {
  display: block;
  font-size: 30px;
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.pz-success-sub {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: #166534;
}

.pi-grade-result.pz-success-spotlight .pi-grade-score {
  justify-content: center;
  margin-top: 6px;
}

.pi-grade-result.pz-success-spotlight .pi-grade-actions {
  justify-content: center;
}

.pz-success-live-banner {
  position: fixed;
  top: 96px;
  left: 50%;
  z-index: 99980;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: min(560px, calc(100vw - 32px));
  max-width: min(760px, calc(100vw - 32px));
  padding: 20px 24px;
  border: 2.5px solid #86efac;
  border-radius: 18px;
  background: rgba(240, 253, 244, 0.98);
  color: #14532d;
  text-align: center;
  box-shadow: 0 24px 52px rgba(20, 83, 45, 0.22);
  transform: translate(-50%, -18px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.pz-success-live-banner.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.pz-success-live-icon {
  flex: 0 0 auto;
  font-size: 44px;
  line-height: 1;
}

.pz-success-live-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.pz-success-live-copy strong {
  font-size: 28px;
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.pz-success-live-copy span {
  font-size: 15px;
  font-weight: 750;
  line-height: 1.35;
  color: #166534;
}

@media (max-width: 640px) {
  .pz-success-live-banner {
    top: 82px;
    min-width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    padding: 16px 16px;
  }
  .pz-success-live-copy strong {
    font-size: 24px;
  }
  .pz-success-icon {
    font-size: 38px;
  }
  .pz-success-title {
    font-size: 26px;
  }
}

/* Sudoku: classic newspaper-style grid with strong 3x3 box boundaries */
.sudoku-grid.sudoku-classic-grid {
  display: inline-grid !important;
  gap: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
  overflow: visible !important;
}

.sudoku-grid.sudoku-classic-grid .sd-cell {
  box-sizing: border-box !important;
  background: #ffffff;
  box-shadow: none;
}

.sudoku-grid.sudoku-classic-grid .sd-cell.given {
  background: #f8fafc !important;
  color: #0f172a !important;
  font-weight: 900;
}

.sudoku-grid.sudoku-classic-grid .sd-cell.answer-filled {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

.sudoku-grid.sudoku-classic-grid .sd-cell.pi-selected,
.sudoku-grid.sudoku-classic-grid .sd-cell.sd-selected {
  background: #e0f2fe !important;
  box-shadow: inset 0 0 0 2px #2563eb !important;
}

.mz-question-card {
  width: min(860px, 100%);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto 18px;
  padding: 14px 16px;
  border: 2px solid #10b981;
  border-radius: 14px;
  background: linear-gradient(135deg, #ecfdf5, #f0f9ff);
  box-shadow: 0 8px 22px rgba(15, 118, 110, .12);
}

.mz-question-badge {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: #059669;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.2px;
}

.mz-question-main {
  flex: 1;
  min-width: 0;
  color: #064e3b;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.35;
  word-break: keep-all;
}

.mz-question-sub {
  flex: 0 0 auto;
  color: #047857;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}