/* ===================================================
   바둑 어드벤처 - 밝고 화사한 어린이·교육 친화 테마
   =================================================== */

:root {
  --theme-sky-1: #4aa6e8;
  --theme-sky-2: #6ec2f5;
  --theme-sky-3: #9dd7fb;
  --theme-meadow-1: #5eb73c;
  --theme-meadow-2: #489b2d;
  
  --theme-card-bg: #ffffff;
  --theme-card-subtle: #f8fafc;
  --theme-header-bg: #352c28; /* badukstudy.com 감성 웜 초콜릿 바 */
  
  --text-main: #1e293b;       /* 매우 선명한 슬레이트 차콜 */
  --text-muted: #64748b;      /* 부드럽고 가독성 뛰어난 슬레이트 그레이 */
  --text-dark: #0f172a;       /* 강렬한 타이틀 블랙 */
  --text-light: #ffffff;
  
  --accent-gold: #f59e0b;     /* 황금빛 앰버 골드 */
  --accent-gold-hover: #d97706;
  --accent-blue: #2563eb;     /* 활기찬 로열 블루 */
  --accent-sky: #0284c7;      /* 청명한 스카이 블루 */
  --accent-green: #10b981;    /* 싱그러운 에메랄드 그린 */
  --accent-red: #ef4444;      /* 생생한 코랄 레드 */
  
  --border-color: #e2e8f0;    /* 깨끗하고 맑은 라이트 보더 */
  --border-strong: #cbd5e1;
  --shadow-sm: 0 2px 6px rgba(15, 60, 100, 0.08);
  --shadow-md: 0 6px 18px rgba(15, 60, 100, 0.12);
  --shadow-lg: 0 14px 34px rgba(15, 60, 100, 0.16);

  /* 🌟 한 화면에 모든 메뉴와 바둑판이 100% 쏙 들어가도록 동적 계산된 최적 바둑판 크기 🌟 */
  --board-size: min(calc(100vh - 114px), calc(100vw - 520px));
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 모든 화면에서 세로/가로 스크롤 없이 한 화면에 온전히 표시 */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  background-color: #f1f5f9;
  background-image: 
    radial-gradient(at 15% 15%, rgba(224, 242, 254, 0.85) 0px, transparent 55%),
    radial-gradient(at 85% 20%, rgba(254, 243, 199, 0.6) 0px, transparent 50%),
    radial-gradient(at 50% 90%, rgba(220, 252, 231, 0.5) 0px, transparent 60%),
    linear-gradient(135deg, #eef2f6 0%, #e2e8f0 100%),
    radial-gradient(circle, rgba(100, 116, 139, 0.12) 1.2px, transparent 1.2px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 28px 28px;
  background-attachment: fixed;
  color: var(--text-main);
  height: 100vh;
  max-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 8px;
  box-sizing: border-box;
  overflow: hidden;
  transition: background 0.4s ease, background-color 0.4s ease;
}

/* 🌟 바탕화면 테마 1: 싱그러운 봄날의 초원과 호수 🌟 */
body.bg-theme-theme1,
body.bg-theme-clean {
  background-color: #79bf66;
  background-image: 
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.05) 100%),
    url('images/bg_theme_1.jpg?v=20261011_0746');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 🌟 바탕화면 테마 2: 노을빛 물든 따뜻한 호숫가 🌟 */
body.bg-theme-theme2,
body.bg-theme-sky {
  background-color: #fca5a5;
  background-image: 
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.05) 100%),
    url('images/bg_theme_2.jpg?v=20261011_0746');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 🌟 바탕화면 테마 3: 황금빛 단풍과 호수의 가을 풍경 🌟 */
body.bg-theme-theme3,
body.bg-theme-wood {
  background-color: #f59e0b;
  background-image: 
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.05) 100%),
    url('images/bg_theme_3.jpg?v=20261011_0746');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 🌟 바탕화면 테마 4: 포근한 눈 덮인 겨울 오두막 풍경 🌟 */
body.bg-theme-theme4,
body.bg-theme-night {
  background-color: #bae6fd;
  background-image: 
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.05) 100%),
    url('images/bg_theme_4.jpg?v=20261011_0746');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 🌟 바탕화면 테마 5: 동화 같은 야외 바둑 동산 풍경 🌟 */
/* 🌟 바탕화면 테마 6: 신비한 별빛 밤하늘과 유성 모션그래픽 🌟 */
body.bg-theme-theme6,
body.bg-theme-starry {
  background: #04060d !important;
}

#starfieldCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: none;
}

body.bg-theme-theme6 #starfieldCanvas,
body.bg-theme-starry #starfieldCanvas {
  display: block;
}

.app-container {
  position: relative;
  z-index: 5;
}

body.bg-theme-theme5 {
  background-color: #86efac;
  background-image: 
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.05) 100%),
    url('images/bg_theme_5.jpg?v=20261011_1009');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.app-container {
  width: fit-content;
  max-width: 100%;
  height: 100%;
  max-height: calc(100vh - 8px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

/* 9줄, 13줄, 19줄 공통: 컨테이너가 바둑판과 좌측 패널에 딱 맞게 정렬 */
.app-container.size-9,
.app-container.size-13, .app-container.size-11,
.app-container.size-19 {
  width: fit-content;
  max-width: 100%;
}

/* 🌟 상단 헤더: 전체를 아우르는 단일 긴 박스 (.app-header) 🌟 */
.app-header {
  width: calc(240px + 10px + var(--board-size) + 10px + 240px);
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 0 10px;
  height: 38px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 14px rgba(15, 60, 100, 0.08);
  gap: 8px;
  flex-shrink: 0;
}

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

/* 🎓 JH 바둑스쿨 시그니처 브랜드 배지 (진곤색 바탕 + 흰색 글씨, 클릭 시 홈 이동) */
.brand-logo-badge {
  background: #172554; /* 깊고 고급스러운 진곤색 (Deep Navy) */
  border: 1.5px solid #1e40af;
  padding: 3px 10px 3px 6px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  user-select: none;
  height: 28px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease;
}

.brand-logo-badge:hover {
  background: #1e3a8a;
  border-color: #38bdf8;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(56, 189, 248, 0.3);
}

.brand-logo-badge:active {
  transform: translateY(1px);
}

.brand-emblem-svg {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

.brand-title-text {
  font-size: 0.92rem;
  font-weight: 900;
  white-space: nowrap;
  letter-spacing: -0.3px;
  color: #ffffff; /* 깨끗하고 선명한 순백색 */
}

.chapter-badge {
  background: #ecfdf5;
  color: #059669;
  border: 1.5px solid #a7f3d0;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chapter-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.5px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 상단 헤더 메뉴 그룹 (밝고 깔끔한 화이트/슬레이트 필) */
.header-menu-group {
  display: flex;
  align-items: center;
  background: #f8fafc;
  padding: 4px 8px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  gap: 6px;
}

.menu-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: #2563eb; /* 선명하고 산뜻한 블루 라벨 */
  white-space: nowrap;
  user-select: none;
  padding-left: 2px;
}

.segmented-control {
  display: flex;
  gap: 3px;
  align-items: center;
}

.size-btn,
.stone-btn,
.bg-theme-btn,
.sound-type-btn {
  background: transparent;
  color: #475569;
  border: none;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.stone-btn,
.sound-type-btn,
.bg-theme-btn {
  min-width: 24px;
  padding: 5px 8px;
  font-size: 0.84rem;
}

.size-btn:hover,
.stone-btn:hover,
.bg-theme-btn:hover,
.sound-type-btn:hover {
  color: #0f172a;
  background: #e2e8f0;
}

.size-btn.active,
.stone-btn.active,
.bg-theme-btn.active,
.sound-type-btn.active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
  font-weight: 900;
}

/* 착수 소리 및 볼륨 그룹 */
.audio-menu-group {
  gap: 6px;
}

.volume-slider-box {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 2px;
}

.vol-icon {
  font-size: 0.82rem;
}

.vol-range {
  width: 58px;
  height: 6px;
  accent-color: #2563eb;
  cursor: pointer;
}

.sound-mute-btn {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #334155;
  padding: 4px 7px;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sound-mute-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* 🌟 긴 박스 안에 직접 들어가는 3대 모드 선택 버튼 그룹 (별도 2중 박스 없음) 🌟 */
.mode-selector-group {
  display: flex;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  gap: 4px;
  align-items: center;
}

.mode-select-btn {
  background: transparent;
  color: #475569;
  border: 1px solid transparent;
  padding: 4px 10px;
  height: 28px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.mode-select-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.mode-select-btn.active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  border-color: #f59e0b;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
  font-weight: 900;
}

/* 👨‍🏫 좌측 별도 강의 모드 버튼 전용 스타일 */
.lecture-solo-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #1e293b;
}

.lecture-solo-btn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.lecture-solo-btn.active {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
}

.header-btn {
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.header-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.header-btn.active {
  background: var(--accent-gold);
  color: #111;
  border-color: var(--accent-gold);
}

/* 메인 레이아웃 (바둑판과 좌측 패널이 빈틈없이 알맞게 정렬) */
.main-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
}

.story-panel {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.story-panel[style*="display: none"] {
  display: none !important;
}

.app-container.size-9 .main-content,
.app-container.size-13 .main-content,
.app-container.size-19 .main-content {
  justify-content: center;
  gap: 10px;
}

.app-container.size-9 .story-panel,
.app-container.size-13 .story-panel,
.app-container.size-19 .story-panel {
  width: 240px;
}

/* 🌟 순수 화이트 프리미엄 소프트 카드 (badukstudy.com 감성) 🌟 */
.card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 10px;
  box-shadow: 0 8px 20px rgba(15, 60, 100, 0.1), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.mission-card {
  border-left: 5px solid #f59e0b;
}

.mission-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 8px;
}

.mission-step {
  font-size: 0.85rem;
  font-weight: 800;
  color: #2563eb;
  line-height: 1.3;
}

.badge {
  background: #eff6ff;
  color: #2563eb;
  border: 1.5px solid #bfdbfe;
  font-size: 0.74rem;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 800;
}

.badge-action-btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: none;
  color: #ffffff;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3);
  transition: all 0.2s;
}

.badge-action-btn:hover {
  background: #1e40af;
  transform: translateY(-1px);
}

.mission-title {
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 4px;
  color: #0f172a;
  line-height: 1.35;
}

.mission-desc {
  font-size: 0.86rem;
  line-height: 1.45;
  color: #334155;
  margin-bottom: 8px;
  font-weight: 600;
}

/* 🌟 문제 번호 1~24 바로가기 그리드 (가로 4개씩 세로로 길게 정렬) 🌟 */
.problem-number-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 8px 0 10px 0;
  background: #f1f5f9;
  padding: 8px 6px;
  border-radius: 12px;
  border: 1.5px solid #cbd5e1;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  max-height: 250px;
  overflow-y: auto;
}

.prob-num-btn {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
  border: 1.5px solid #1e40af;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 6px 0;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.12s ease;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 #1e3a8a, 0 3px 5px rgba(37, 99, 235, 0.25);
  user-select: none;
}

.prob-num-btn:hover {
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 0 #1e3a8a, 0 5px 8px rgba(37, 99, 235, 0.35);
}

.prob-num-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3), 0 1px 0 #1e3a8a;
}

.prob-num-btn.active {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  border-color: #b45309;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 0 #92400e, 0 0 10px rgba(245, 158, 11, 0.65);
  font-weight: 900;
  transform: scale(1.04);
}

.prob-num-btn.solved {
  background: linear-gradient(180deg, #34d399 0%, #10b981 50%, #059669 100%);
  border-color: #047857;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 0 #065f46, 0 3px 5px rgba(16, 185, 129, 0.3);
}

/* 💡 힌트 카드 (청명하고 밝은 스카이 박스) */
.mission-hint-box {
  background: #f0f9ff;
  border: 1.5px solid #bae6fd;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.8rem;
  color: #0369a1;
  margin: 6px 0 10px 0;
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-weight: 600;
  line-height: 1.4;
}

.hint-label {
  font-weight: 900;
  color: #0284c7;
  white-space: nowrap;
}

/* 💬 캐릭터 대화창 (화사한 파스텔 말풍선) */
.character-dialog {
  display: flex;
  gap: 8px;
  background: #f8fafc;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
}

.char-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.char-avatar.black-fairy {
  background: radial-gradient(circle at 35% 35%, #475569, #0f172a);
  color: #ef4444;
  border: 2px solid #cbd5e1;
}

.char-avatar.white-fairy {
  background: radial-gradient(circle at 35% 35%, #fff, #e2e8f0);
  color: #3b82f6;
  border: 2px solid #94a3b8;
}

.char-speech {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.char-name {
  font-size: 0.82rem;
  font-weight: 900;
  color: #d97706;
  margin-bottom: 1px;
}

.char-speech p {
  font-size: 0.8rem;
  color: #1e293b;
  line-height: 1.35;
  font-weight: 700;
}


/* 🌟 미션 액션 버튼 (badukstudy.com 감성 웜레더/우드 & 비비드 버튼) 🌟 */
.mission-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.mission-act-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 5px;
  width: 100%;
}

.mission-act-row.sub-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  width: 100%;
}

.act-btn {
  height: 42px;
  box-sizing: border-box;
  padding: 0 4px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  border: 1.5px solid #7c542d;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  user-select: none;
  white-space: nowrap;
  word-break: keep-all;
}

.act-btn.primary {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  color: #ffffff;
  border: 1.5px solid #b45309;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 0 #92400e, 0 6px 8px rgba(217, 119, 6, 0.35);
}

.act-btn.primary:not(:disabled):hover {
  background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 50%, #f59e0b 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 5px 0 #92400e, 0 8px 12px rgba(245, 158, 11, 0.45);
}

.act-btn.primary:not(:disabled):active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 0 #92400e;
}

/* 🌟 이전/다음 버튼: badukstudy.com 100% 동일 3D 원목 블록 스타일 🌟 */
.act-btn.secondary {
  background: linear-gradient(180deg, #be9668 0%, #aa7e50 50%, #95693c 100%);
  color: #ffffff;
  border: 1.5px solid #7c542d;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 0 #624021, 0 6px 8px rgba(0, 0, 0, 0.25);
}

.act-btn.secondary:not(:disabled):hover {
  background: linear-gradient(180deg, #cca476 0%, #b78b5d 50%, #a27548 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 5px 0 #624021, 0 8px 12px rgba(0, 0, 0, 0.3);
}

.act-btn.secondary:not(:disabled):active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 0 #624021;
}

#btnResetMission {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  color: #ffffff;
  border: 1.5px solid #b45309;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 3px 0 #92400e, 0 5px 6px rgba(217, 119, 6, 0.35);
  font-size: 0.82rem;
  letter-spacing: -0.5px;
}

#btnResetMission:hover {
  background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 50%, #f59e0b 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 5px 0 #92400e, 0 8px 12px rgba(245, 158, 11, 0.45);
}

#btnResetMission:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 0 #92400e;
}

/* ✍️ 놓아보기 버튼 (3D 입체 블록) */
.act-btn.trial-btn {
  background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);
  color: #b45309;
  border: 2px solid #f59e0b;
  box-shadow: inset 0 1px 0 #ffffff, 0 4px 0 #d97706, 0 6px 8px rgba(245, 158, 11, 0.25);
}

.act-btn.trial-btn:hover {
  background: #fffbeb;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #ffffff, 0 5px 0 #d97706, 0 8px 12px rgba(245, 158, 11, 0.35);
}

.act-btn.trial-btn.active {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  color: #ffffff;
  border-color: #b45309;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 0 #92400e, 0 0 16px rgba(245, 158, 11, 0.65);
}

.act-btn.trial-btn:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 0 #d97706;
}

/* 🔍 정답보기 버튼 (3D 입체 블루 블록) */
.act-btn.answer-btn {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
  color: #ffffff;
  border: 1.5px solid #1e40af;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 0 #1e3a8a, 0 6px 8px rgba(37, 99, 235, 0.3);
}

.act-btn.answer-btn:hover {
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 5px 0 #1e3a8a, 0 8px 12px rgba(37, 99, 235, 0.4);
}

.act-btn.answer-btn:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 0 #1e3a8a;
}

.act-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.5);
  box-shadow: 0 2px 0 #7c542d;
  transform: none;
}

/* 🌟 좌측 놓아보기/정답보기 밑으로 이동된 설정 메뉴 패널 (.side-settings-panel) 🌟 */
.side-settings-panel {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #ffffff;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(15, 60, 100, 0.06);
  margin-top: 3px;
}

.side-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  padding: 4px 6px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  gap: 3px;
}

.side-setting-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: #2563eb;
  white-space: nowrap;
  user-select: none;
  min-width: 38px;
  letter-spacing: -0.4px;
}

.segmented-control.side-segmented {
  display: flex;
  gap: 1.5px;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.side-segmented .size-btn,
.side-segmented .stone-btn,
.side-segmented .bg-theme-btn,
.side-segmented .sound-type-btn {
  padding: 2px 3px;
  font-size: 0.74rem;
  min-width: 17px;
  height: 25px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.side-segmented .stone-btn {
  min-width: 16px;
  padding: 2px 2.5px;
}

.side-segmented .board-skin-btn {
  padding: 2px 7px;
  font-size: 0.74rem;
  min-width: 48px;
  white-space: nowrap;
  height: 25px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.15s ease;
}

.side-segmented .board-skin-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.side-segmented .board-skin-btn.active {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  border-color: #1e40af;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

.side-setting-row.side-audio-row {
  flex-direction: column;
  gap: 5px;
  align-items: stretch;
  padding: 5px 6px;
}

.side-audio-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.side-audio-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 3px;
  border-top: 1px dashed #e2e8f0;
  gap: 6px;
}

.side-audio-bottom .volume-slider-box {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.side-audio-bottom .vol-range {
  width: 100%;
  max-width: 105px;
  height: 5px;
}

.side-audio-bottom .sound-mute-btn {
  padding: 2px 6px;
  height: 24px;
  font-size: 0.78rem;
  border-radius: 6px;
}

/* 🌟 오른쪽: 바둑판 섹션 (바깥 테두리/회색 배경 없이 순수 바둑판만 노출) 🌟 */
.board-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: transparent;
  backdrop-filter: none;
  padding: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.board-status {
  width: 100%;
  max-width: 580px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  color: #1e293b;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.92rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: max-width 0.3s ease;
}

.app-container.size-13 .board-status {
  max-width: 740px;
}

.app-container.size-19 .board-status {
  max-width: 880px;
}

/* 바둑판 섹션 및 캔버스 래퍼 (황금빛 목판 테두리 - 가로/세로 최대로 확장) */
.board-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: fit-content;
  max-width: 100%;
  padding: 0;
}

.app-container.size-9 .board-section,
.app-container.size-13 .board-section,
.app-container.size-19 .board-section {
  width: fit-content;
  max-width: 100%;
  padding: 0;
}

.board-wrapper {
  position: relative;
  width: var(--board-size);
  height: var(--board-size);
  max-width: var(--board-size);
  max-height: var(--board-size);
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid #c99856;
  box-shadow: 0 16px 38px rgba(15, 60, 100, 0.22), inset 0 0 16px rgba(130, 80, 20, 0.15);
  cursor: pointer;
  touch-action: manipulation;
  background: #f2d69f;
  flex-shrink: 0;
  transition: width 0.25s ease, height 0.25s ease;
}

.board-wrapper.skin-green {
  border: 3px solid #22c55e;
  box-shadow: 0 16px 38px rgba(34, 197, 94, 0.25), inset 0 0 15px rgba(255, 255, 255, 0.6);
  background: #dcfce7;
}

.board-wrapper.skin-sky {
  border: 3px solid #38bdf8;
  box-shadow: 0 16px 38px rgba(56, 189, 248, 0.3), inset 0 0 15px rgba(255, 255, 255, 0.6);
  background: #e0f2fe;
}

/* 🌟 9줄, 13줄, 19줄 바둑판 모두 화면 비율에 맞추어 큼직하게 꽉 차게 확장 🌟 */
.app-container.size-9 .board-wrapper,
.app-container.size-13 .board-wrapper,
.app-container.size-19 .board-wrapper {
  width: var(--board-size);
  height: var(--board-size);
  max-width: var(--board-size);
  max-height: var(--board-size);
}

/* 🌟 바둑판 위 정답/오답 팝업 피드백 배지 & 자막 (딩동댕/땡) 🌟 */
.board-feedback-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 착수에 방해 없도록 클릭 통과 */
  z-index: 60;
  opacity: 0;
  transform: scale(0.65);
  transition: opacity 0.22s ease-out, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.2s ease, justify-content 0.2s ease, align-items 0.2s ease;
}

.board-feedback-overlay.pos-top {
  align-items: flex-start;
  padding-top: 8%;
}

.board-feedback-overlay.pos-bottom {
  align-items: flex-end;
  padding-bottom: 8%;
}

.board-feedback-overlay.pos-center {
  align-items: center;
}

.board-feedback-overlay.show {
  opacity: 1;
  transform: scale(1);
}

.feedback-badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.65));
  animation: feedbackBadgeBounce 0.45s ease-out;
}

@keyframes feedbackBadgeBounce {
  0% { transform: scale(0.4) rotate(-4deg); opacity: 0; }
  65% { transform: scale(1.12) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* 🌟 정답 시 단일 대형 정사각형 박스 (전체 사이즈 10% 확대된 320px, 박스 안에 이미지가 꽉 차게) 🌟 */
.feedback-dynamic-card.single-large-card {
  width: 320px !important;
  height: 320px !important;
  max-width: 86vmin !important;
  max-height: 86vmin !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 38px !important;
  border: 5px solid #ffffff !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.65), 0 0 30px rgba(251, 191, 36, 0.5) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

.feedback-dynamic-card.single-large-card::before {
  display: none !important;
}

.feedback-dynamic-card.single-large-card .feedback-large-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

/* 🌟 오답 시 다채롭고 귀여운 3D 캐릭터 피드백 카드 🌟 */
.feedback-dynamic-card {
  width: 220px;
  height: 232px;
  border-radius: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 4px solid #ffffff;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), inset 0 3px 8px rgba(255, 255, 255, 0.85);
  position: relative;
  overflow: hidden;
  user-select: none;
  padding: 12px;
}

.feedback-dynamic-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 32px 32px 60px 60px;
  pointer-events: none;
}

.feedback-char-img-wrap {
  width: 140px;
  height: 140px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  border: 3.5px solid rgba(255, 255, 255, 0.95);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: feedbackCharPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}

.feedback-char-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.feedback-card-text {
  font-size: 1.3rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), 0 0 12px rgba(255, 255, 255, 0.6);
  z-index: 2;
  text-align: center;
  line-height: 1.2;
}

@keyframes feedbackCharPop {
  0% { transform: scale(0.5) rotate(-6deg); }
  70% { transform: scale(1.12) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

#badukCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* 🌟 바둑판 내부 세련된 3D 알림 팝업 (.board-toast-notice) - 기존의 2배 크기 🌟 */
.board-toast-notice {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%) translateY(-20px) scale(0.92);
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 3.5px solid #f59e0b;
  color: #ffffff;
  padding: 18px 42px;
  border-radius: 40px;
  font-size: 2.05rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 0 32px rgba(245, 158, 11, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.24s ease-out, transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
}

.board-toast-notice.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.board-toast-icon {
  font-size: 2.4rem;
  line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

.board-toast-msg {
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

/* 🌟 O/X 및 객관식 선택지 전용 컨트롤 클러스터 (하단 긴 메뉴 박스 정가운데) 🌟 */
.toolbar-choice-cluster {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  margin: 0 4px;
}

.choice-btn {
  height: 30px;
  min-width: 52px;
  padding: 0 16px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
  border: 1.5px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 rgba(0, 0, 0, 0.25), 0 3px 5px rgba(0, 0, 0, 0.18);
  transition: all 0.12s ease;
  user-select: none;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.choice-btn:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 0 rgba(0, 0, 0, 0.25), 0 5px 8px rgba(0, 0, 0, 0.22);
}

.choice-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(0, 0, 0, 0.25);
}

/* O 버튼 (산뜻하고 기분 좋은 에메랄드 그린 배경 + 순백색 O) */
.choice-btn.choice-o {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  border-color: #047857;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 #065f46, 0 3px 5px rgba(0, 0, 0, 0.2);
}

.choice-btn.choice-o:hover {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  border-color: #059669;
}

/* X 버튼 (선명하고 뚜렷한 코랄 레드 배경 + 순백색 X) */
.choice-btn.choice-x {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  border-color: #b91c1c;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 #991b1b, 0 3px 5px rgba(0, 0, 0, 0.2);
}

.choice-btn.choice-x:hover {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
  border-color: #dc2626;
}

/* 일반 보기 버튼 (가, 나, 다 등 프리미엄 골드 원목 블록) */
.choice-btn.choice-text {
  background: linear-gradient(180deg, #c49968 0%, #aa7e50 50%, #95693c 100%);
  border-color: #7c542d;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 #624021, 0 3px 5px rgba(0, 0, 0, 0.2);
}

.choice-btn.choice-text:hover {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #0369a1 100%);
  border-color: #075985;
}

/* 🌟 선택지 버튼 정답/오답 인터랙티브 피드백 🌟 */
.choice-btn.correct-choice-btn {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
  border-color: #047857 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transform: scale(1.08) !important;
}

.choice-btn.wrong-choice-btn {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: #b91c1c !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  animation: choiceShake 0.4s ease;
}

@keyframes choiceShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

/* 🌟 강의·놓아보기 전용 컨트롤 툴바 (바둑판과 동일한 화사한 원목 플레이트) 🌟 */
.lecture-toolbar {
  width: var(--board-size);
  max-width: var(--board-size);
  height: 44px;
  box-sizing: border-box;
  display: none; /* 강의/학습 모드 시 활성화 */
  flex-direction: row;
  align-items: center;
  justify-content: space-between; /* 🌟 왼쪽 조작계와 오른쪽 보조표시 토글계 양측 정렬 🌟 */
  gap: 4px;
  background: #f2d69f; /* 🌟 바둑판과 100% 동일한 화사한 황금 비자목 플레이트 🌟 */
  border: 2px solid #c99856;
  box-shadow: 0 6px 18px rgba(100, 70, 40, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  padding: 0 8px;
  border-radius: 12px;
  flex-shrink: 0;
  transition: width 0.25s ease;
}

.app-container.size-9 .lecture-toolbar,
.app-container.size-13 .lecture-toolbar,
.app-container.size-19 .lecture-toolbar {
  width: var(--board-size);
  max-width: var(--board-size);
}

.toolbar-left-cluster {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.toolbar-right-cluster {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

/* 1. 착수 모드 선택 버튼 그룹 (기호 전용 3D 블록) */
.placement-mode-group {
  display: flex;
  align-items: center;
  gap: 3px;
}

.tool-btn.icon-only {
  width: 32px;
  height: 30px;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: linear-gradient(180deg, #c49968 0%, #aa7e50 50%, #95693c 100%);
  border: 1.5px solid #7c542d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 #624021, 0 3px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}

.tool-btn.icon-only:hover {
  background: linear-gradient(180deg, #d4a978 0%, #ba8e60 50%, #a5794c 100%);
  border-color: #624021;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 0 #624021, 0 5px 8px rgba(0, 0, 0, 0.25);
}

.tool-btn.icon-only:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 0 #624021;
}

/* 활성화 상태: 화사하고 눈부신 골드 3D 엠보싱 */
.tool-btn.icon-only.active {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  border: 1.5px solid #b45309;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 0 #92400e, 0 0 10px rgba(245, 158, 11, 0.65);
  transform: translateY(-1px);
}

/* 🌟 교차 착수 버튼의 흑돌과 백돌: 조금 더 크고 시원하게 떨어져서 교차되도록 디자인 🌟 */
.icon-stones-duo {
  position: relative;
  width: 24px;
  height: 18px;
  display: inline-block;
  pointer-events: none;
}

.icon-stones-duo .st-dot.black {
  position: absolute;
  left: 0px;
  top: 1px;
  z-index: 2;
}

.icon-stones-duo .st-dot.white {
  position: absolute;
  right: 0px;
  bottom: 1px;
  z-index: 1;
}

/* 미니 돌 그래픽 원형 (선명한 명암 대비 강화 & 조금 더 큼직한 직경) */
.st-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.st-dot.lg {
  width: 16px;
  height: 16px;
}

.st-dot.black {
  background: radial-gradient(circle at 35% 35%, #475569, #0f172a 70%, #000 100%);
  border: 1.5px solid #ffffff;
}

.st-dot.white {
  background: radial-gradient(circle at 35% 35%, #ffffff, #f8fafc 65%, #cbd5e1 100%);
  border: 1.5px solid #475569;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* 툴바 구분선 */
.toolbar-divider {
  width: 2px;
  height: 20px;
  background: rgba(120, 80, 40, 0.25);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.6);
  border-radius: 1px;
  margin: 0 2px;
}

/* 2. 수순 네비게이션 버튼 그룹 (3D 입체 원목 블록 & 선명 순백색 SVG) */
.nav-control-group {
  display: flex;
  align-items: center;
  gap: 3px;
}

.nav-btn.icon-only {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  padding: 0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #c49968 0%, #aa7e50 50%, #95693c 100%);
  border: 1.5px solid #7c542d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 #624021, 0 3px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}

/* 벡터 아이콘 (초고화질 선명 순백색 + 뚜렷한 드롭 섀도우) */
.nav-svg-icon {
  width: 15px;
  height: 15px;
  fill: #ffffff !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
  transition: transform 0.12s ease;
}

.nav-btn.icon-only:hover:not(:disabled) {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #0369a1 100%);
  border-color: #075985;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 3px 0 #075985, 0 5px 8px rgba(2, 132, 199, 0.35);
}

.nav-btn.icon-only:active:not(:disabled) {
  transform: translateY(2px);
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 0 #075985;
}

/* 비활성화 상태: 어둡거나 뭉개지지 않고 선명한 백색 아이콘 유지 */
.nav-btn.icon-only:disabled {
  background: linear-gradient(180deg, #aa855c 0%, #956f47 100%);
  border: 1.5px solid #634a31;
  cursor: not-allowed;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 0 #573a1e;
  transform: none;
  opacity: 0.65;
}

.nav-btn.icon-only:disabled .nav-svg-icon {
  fill: #ffffff !important;
  opacity: 0.75;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* 🌟 판 지우기 버튼: 옆의 버튼들과 동일한 3D 원목 블록 스타일로 통일 🌟 */
.nav-btn.danger.clear-btn {
  height: 30px;
  box-sizing: border-box;
  padding: 0 8px;
  margin-left: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: linear-gradient(180deg, #c49968 0%, #aa7e50 50%, #95693c 100%);
  border: 1.5px solid #7c542d;
  color: #ffffff;
  border-radius: 7px;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 #624021, 0 3px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.12s ease;
  user-select: none;
}

.clear-svg-icon {
  width: 14px;
  height: 14px;
  fill: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.nav-btn.danger.clear-btn:hover {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #0369a1 100%);
  border-color: #075985;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 3px 0 #075985, 0 6px 10px rgba(2, 132, 199, 0.4);
}

.nav-btn.danger.clear-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 0 #075985;
}

.step-indicator {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 800;
}

/* 🌟 상단 툴바 우측 컴팩트 로테이션 토글 버튼군 (.tb-toggle-btn) 🌟 */
.tb-toggle-btn {
  height: 30px;
  box-sizing: border-box;
  padding: 0 7px;
  border-radius: 7px;
  background: linear-gradient(180deg, #c49968 0%, #aa7e50 50%, #95693c 100%);
  border: 1.5px solid #7c542d;
  color: #f8fafc;
  font-size: 0.76rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 0 #624021, 0 3px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.12s ease;
  user-select: none;
  white-space: nowrap;
}

.tb-toggle-btn:hover {
  background: linear-gradient(180deg, #d4a978 0%, #ba8e60 50%, #a5794c 100%);
  border-color: #624021;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 0 #624021, 0 5px 8px rgba(0, 0, 0, 0.25);
}

.tb-toggle-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), 0 1px 0 #624021;
}

/* 활성화 상태 (ON 또는 모드 활성화): 선명하고 화사한 블루/골드 엠보싱 */
.tb-toggle-btn.active {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #0369a1 100%);
  border-color: #075985;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 0 #075985, 0 3px 6px rgba(2, 132, 199, 0.45);
}

/* 활로 표시 상태 미니 배지 */
.tb-btn-sub {
  font-size: 0.7rem;
  padding: 1px 3px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.25);
  color: #e2e8f0;
  margin-left: 1px;
}

.tb-toggle-btn.active .tb-btn-sub {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* 땀방울 전용 초소형 버튼 */
.tb-toggle-btn.icon-only-toggle {
  padding: 0 6px;
  min-width: 32px;
}

.tb-btn-icon {
  font-size: 0.95rem;
  line-height: 1;
}

/* 🌟 인문학·승리 축하 모달 (깨끗한 화이트 & 골드 테마) 🌟 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(6px);
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background: #ffffff;
  border: 2px solid #f59e0b;
  padding: 32px 28px;
  border-radius: 20px;
  text-align: center;
  max-width: 440px;
  width: 90%;
  transform: translateY(20px);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 25px 60px rgba(15, 60, 100, 0.25);
  color: #1e293b;
}

.modal-overlay.show .modal-box {
  transform: translateY(0);
}

.modal-badge {
  display: inline-block;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 10px;
  border: 1px solid #bfdbfe;
}

.scroll-icon {
  font-size: 2.8rem;
  margin-bottom: 4px;
}

.modal-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 16px;
}

.hanja-box {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  padding: 14px 18px;
  border-radius: 14px;
  margin-bottom: 16px;
  text-align: left;
}

.hanja-char {
  font-size: 2.8rem;
  font-weight: 900;
  color: #d97706;
  line-height: 1;
}

.hanja-sound {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1e293b;
}

.hanja-meaning {
  font-size: 0.85rem;
  color: #64748b;
  margin-top: 2px;
}

.wisdom-saying {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #78350f;
  font-style: italic;
  margin-bottom: 8px;
  font-weight: 600;
}

.wisdom-source {
  display: block;
  font-size: 0.82rem;
  color: #64748b;
  margin-bottom: 22px;
}

.modal-actions {
  display: flex;
  gap: 10px;
}

.modal-btn {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
}

.modal-btn.primary {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(217, 119, 6, 0.3);
}

.modal-btn.primary:hover {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  transform: translateY(-1px);
}

.modal-btn.secondary {
  background: #f1f5f9;
  color: #334155;
  border: 1.5px solid #cbd5e1;
}

.modal-btn.secondary:hover {
  background: #e2e8f0;
}

/* 🌟 온라인 대국 모달 스타일 (화사한 화이트 & 스카이블루) 🌟 */
.header-btn.online-btn {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
}

.header-btn.online-btn:hover {
  background: rgba(56, 189, 248, 0.35);
}

.online-modal-box {
  max-width: 480px;
  background: #ffffff;
  border: 2px solid #38bdf8;
  box-shadow: 0 25px 60px rgba(15, 60, 100, 0.25);
  color: #1e293b;
}

.full-width {
  width: 100%;
}

.divider-text {
  text-align: center;
  color: #64748b;
  font-size: 0.85rem;
  margin: 16px 0;
  position: relative;
}

.divider-text::before, .divider-text::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: #e2e8f0;
}
.divider-text::before { left: 0; }
.divider-text::after { right: 0; }

.join-input-group {
  display: flex;
  gap: 8px;
}

.join-input {
  flex: 1;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  color: #0f172a;
  font-size: 0.92rem;
  outline: none;
}
.join-input:focus {
  border-color: #2563eb;
  background: #ffffff;
}

/* 대국 돌 배정 (돌 가리기 / 흑돌 / 백돌) 선택 */
.stone-pick-group {
  margin-bottom: 14px;
  text-align: left;
}
.stone-pick-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: #334155;
  margin-bottom: 8px;
}
.stone-pick-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.stone-pick-btn {
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  color: #334155;
  padding: 9px 4px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.stone-pick-btn:hover {
  background: #e2e8f0;
}
.stone-pick-btn.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

/* 돌 가리기 토스트 알림 */
.nigiri-toast {
  position: fixed;
  top: 75px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 2px solid var(--accent-gold);
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 1.02rem;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  z-index: 2000;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nigiri-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===================================================
   🌟 실시간 1:1 대국실 전용 패널 & 액션 UI (밝고 세련된 화이트 카드) 🌟
   =================================================== */
.online-match-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.match-info-card {
  padding: 16px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 60, 100, 0.1);
}

.match-badge {
  display: inline-block;
  background: #eff6ff;
  color: #2563eb;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 6px;
  border: 1px solid #bfdbfe;
}

.match-room-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 8px;
}

.match-meta-info {
  display: flex;
  gap: 6px;
}

.meta-pill {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  font-size: 0.8rem;
  padding: 3px 8px;
  border-radius: 6px;
  color: #475569;
  font-weight: 700;
}

/* 대국자 대결 현황 카드 */
.player-vs-card {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 60, 100, 0.1);
}

.player-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  transition: all 0.2s;
}

.player-box.turn-active {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.2);
}

.player-stone-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.player-details {
  flex: 1;
}

.player-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.player-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
}

.player-role-badge {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.player-role-badge.me {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.player-capture-txt {
  font-size: 0.85rem;
  color: #475569;
  font-weight: 600;
}

.player-capture-txt b {
  color: #d97706;
}

.vs-divider {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 900;
  color: #d97706;
  letter-spacing: 2px;
}

/* 턴 상태 & 진행 상황 */
.turn-status-card {
  padding: 14px 16px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 60, 100, 0.1);
}

.current-turn-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  margin-bottom: 8px;
}

.turn-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  animation: pulseAnim 1.2s infinite ease-in-out;
}

.turn-pulse-dot.waiting {
  background: #94a3b8;
  animation: none;
}

.turn-desc-txt {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0f172a;
}

.match-timer-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: #64748b;
  font-weight: 600;
  padding: 0 4px;
}

.timer-value {
  color: #2563eb;
  font-size: 1.05rem;
  font-weight: 800;
}

/* 대국 조작 버튼 */
.match-action-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.match-act-btn {
  padding: 10px 8px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  transition: all 0.15s;
}

.match-act-btn:hover {
  background: #f1f5f9;
}

.match-act-btn.resign {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}

.match-act-btn.resign:hover {
  background: #fee2e2;
}

.match-act-btn.leave {
  grid-column: span 2;
  background: #f1f5f9;
  color: #64748b;
}

.match-act-btn.leave:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.created-box {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  padding: 16px;
  border-radius: 14px;
}

.room-code-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  font-weight: 900;
  font-size: 1rem;
  padding: 5px 14px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.share-guide {
  font-size: 0.88rem;
  color: #475569;
  margin-bottom: 8px;
  font-weight: 600;
}

.link-copy-box {
  display: flex;
  gap: 6px;
}

.share-input {
  flex: 1;
  padding: 8px 12px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  color: #0f172a;
  font-size: 0.88rem;
  outline: none;
}

.copy-btn {
  background: #2563eb;
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
}

.waiting-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.92rem;
  color: #d97706;
  font-weight: 800;
}

.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f59e0b;
  animation: pulseAnim 1.2s infinite ease-in-out;
}

@keyframes pulseAnim {
  0% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.5; }
}



/* ===================================================
   🌟 신규 대국실 기능 스타일 (아바타, 퀵채팅, 사석함, 계시기) 🌟
   =================================================== */

/* 1. 대국 시간 선택 버튼 */
.time-pick-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.time-pick-btn {
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  color: #475569;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.time-pick-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.time-pick-btn.active {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1d4ed8;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.2);
}

/* 2. 대국자 아바타 버튼 & 말풍선 */
.player-avatar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-avatar-btn {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.player-avatar-btn:hover {
  transform: scale(1.06);
  border-color: #f59e0b;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.35);
}

.avatar-icon {
  font-size: 1.65rem;
  line-height: 1;
}

.avatar-role-label {
  font-size: 0.6rem;
  font-weight: 800;
  color: #64748b;
  line-height: 1;
  margin-top: 1px;
}

.avatar-edit-icon {
  position: absolute;
  right: -2px;
  bottom: -2px;
  background: #f59e0b;
  color: #111;
  font-size: 0.65rem;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffffff;
}

.player-avatar-btn:hover .avatar-edit-icon {
  transform: scale(1.15);
}

/* 💬 말풍선 애니메이션 */
.speech-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.85);
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #78350f;
  padding: 8px 14px;
  border-radius: 14px;
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  opacity: 0;
  z-index: 100;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.speech-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #fde68a transparent transparent transparent;
}

.speech-bubble.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* 3. 대국자 디지털 계시기 */
.player-clock-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 6px 0;
  background: #f1f5f9;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  width: fit-content;
}

.clock-display {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.15rem;
  font-weight: 900;
  color: #0284c7;
  letter-spacing: 1px;
}

.byoyomi-display {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
}

.player-box.turn-active .clock-display {
  color: #10b981;
}

.player-box.turn-active.byoyomi-warning .clock-display {
  color: #dc2626 !important;
  animation: timerBlink 0.6s infinite alternate;
}

.player-box.turn-active.byoyomi-warning .byoyomi-display {
  color: #d97706;
  font-weight: 900;
}

@keyframes timerBlink {
  0% { opacity: 1; text-shadow: 0 0 8px rgba(239, 68, 68, 0.8); }
  100% { opacity: 0.4; }
}

/* 4. 사석 트레이 (보관함) */
.capture-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stone-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-height: 20px;
  padding: 4px 6px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  align-items: center;
}

.mini-stone {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mini-stone.black {
  background: radial-gradient(circle at 35% 35%, #555, #111 70%, #000);
  border: 1px solid #222;
}

.mini-stone.white {
  background: radial-gradient(circle at 35% 35%, #ffffff, #e2e8f0 70%, #cbd5e1);
  border: 1px solid #cbd5e1;
}

.stone-tray-empty {
  font-size: 0.75rem;
  color: #94a3b8;
  font-style: italic;
}

.stone-more-badge,
.stone-tray-count-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: #b45309;
  background: #fef3c7;
  padding: 1px 5px;
  border-radius: 4px;
}

/* 5. 매너 퀵 대화 카드 */
.quick-chat-card {
  padding: 16px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 60, 100, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quick-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 900;
  color: #0f172a;
}

.quick-chat-badge {
  font-size: 0.75rem;
  font-weight: 800;
  color: #059669;
  background: #d1fae5;
  border: 1px solid #a7f3d0;
  padding: 2px 8px;
  border-radius: 6px;
}

.quick-chat-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.chat-tab-btn {
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.chat-tab-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.chat-tab-btn.active {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.quick-chat-phrases {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 140px;
  overflow-y: auto;
  padding-right: 2px;
}

.phrase-btn {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  color: #1e293b;
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.phrase-btn:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
  transform: translateX(3px);
}

.phrase-btn:active {
  transform: scale(0.98);
}

/* 6. 아바타 모달 그리드 */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.avatar-card {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  padding: 12px 6px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  text-align: center;
}

.avatar-card:hover {
  border-color: #2563eb;
  background: #eff6ff;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(37, 99, 235, 0.2);
}

.avatar-card.active,
.avatar-card.selected {
  border-color: var(--accent-gold);
  background: rgba(245, 158, 11, 0.25);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.4);
}

.avatar-card-icon {
  font-size: 2.2rem;
  line-height: 1;
}

.avatar-card-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
}

.avatar-card-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ===================================================
   ⚪⚫ 오목 대전 전용 사이드 패널 스타일
   =================================================== */
.omok-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.omok-mode-card {
  padding: 12px;
}

.omok-mode-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.omok-mode-btn {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  transition: all 0.15s ease;
  text-align: left;
}

.omok-mode-btn strong {
  font-size: 0.88rem;
  color: #0f172a;
}

.omok-mode-btn span {
  font-size: 0.74rem;
  color: #64748b;
}

.omok-mode-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.omok-mode-btn.active {
  background: #eff6ff;
  border-color: #0284c7;
  box-shadow: 0 0 0 1px #0284c7;
}

.omok-mode-btn.active strong {
  color: #0369a1;
}

/* 2. AI 수읽기 난이도 세그먼트 박스 */
.omok-diff-box {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.omok-diff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.omok-diff-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #475569;
}

.omok-diff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.omok-diff-btn {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 7px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.omok-diff-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.omok-diff-btn.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1e40af;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

.omok-diff-btn.master.active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #b45309;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.45);
}

/* 3. AI 대전 시 흑/백 내 돌 선택 */
.omok-color-box {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.omok-sub-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: #475569;
}

.omok-color-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.omok-color-btn {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.omok-color-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.omok-color-btn.active {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1d4ed8;
  box-shadow: 0 0 0 1.5px #2563eb;
  font-weight: 900;
}

/* 4. 옵션 설정 카드 */
.omok-options-card {
  margin-top: 10px;
  padding: 10px;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.omok-rule-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  padding: 3px 2px;
}

.omok-rule-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #d97706;
  cursor: pointer;
}

.omok-rule-txt {
  font-size: 0.8rem;
  font-weight: 800;
  color: #92400e;
}

.omok-turn-card,
.omok-help-card {
  padding: 10px 12px;
}

/* ===================================================
   교재별 학습반 3단계 선택 모달 스타일
   =================================================== */

.badge-action-btn {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.badge-action-btn:hover {
  background: var(--accent-gold);
  color: #1e293b;
  transform: translateY(-1px);
}

.book-select-overlay {
  z-index: 2500;
}

.book-select-container {
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 20px;
  width: 95vw;
  max-width: 1050px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(15, 60, 100, 0.25);
  overflow: hidden;
  animation: modalScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.book-select-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #362e2a; /* 웜 초콜릿 바 */
  border-bottom: 2px solid #4a3e38;
  flex-shrink: 0;
}

.bs-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bs-logo-icon {
  font-size: 1.8rem;
}

.bs-main-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.5px;
}

.bs-total-pill {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
}

.bs-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mutation-control {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.mutation-label {
  font-size: 0.8rem;
  font-weight: 800;
  color: #fbbf24;
}

.mutation-select {
  background: #25201d;
  color: #ffffff;
  border: 1px solid #5a4b44;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}

.bs-close-btn {
  background: #ef4444;
  color: #fff;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.bs-close-btn:hover {
  background: #dc2626;
  transform: scale(1.05);
}

/* 3개 열 (STEP 1, 2, 3) 레이아웃 (밝고 화사한 화이트 카드 컬럼) */
.book-step-columns {
  display: flex;
  align-items: stretch;
  padding: 20px;
  gap: 12px;
  flex: 1;
  min-height: 480px;
  background: #f8fafc;
}

.step-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.step-header {
  padding: 12px 16px;
  background: #f1f5f9;
  border-bottom: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.col-step1 .step-header { background: #2563eb; border-color: #1d4ed8; }
.col-step2 .step-header { background: #0284c7; border-color: #0369a1; }
.col-step3 .step-header { background: #059669; border-color: #047857; }

.step-tag {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.step-title {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
}

.step-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 1.5rem;
  font-weight: 900;
  user-select: none;
}

.step-list-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 440px;
}

.empty-state-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #94a3b8;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
  padding: 40px 20px;
}

.selector-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  color: #1e293b;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  font-family: inherit;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.selector-item:hover {
  background: #f8fafc;
  border-color: #93c5fd;
  transform: translateX(3px);
}

.selector-item.active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #d97706;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
  font-weight: 900;
}

.selector-item.active .item-badge,
.selector-item.active .item-count,
.selector-item.active .item-title {
  color: #ffffff;
}

.item-badge {
  font-size: 1.15rem;
}

.item-title {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}

.item-count {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 700;
}

/* 하단 액션 버튼 (클린 화이트 푸터) */
.book-select-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 16px 24px;
  background: #f8fafc;
  border-top: 1.5px solid #e2e8f0;
}

.bs-btn {
  padding: 12px 28px;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.bs-btn-resume {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
}

.bs-btn-resume:hover {
  background: linear-gradient(135deg, #0369a1, #075985);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
}

.bs-btn-start {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
}

.bs-btn-start:hover:not(:disabled) {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.4);
}

.bs-btn-start:disabled {
  background: #cbd5e1;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.7;
}

/* ========================================================
   📱 🌟 스마트 반응형 레이아웃 시스템 (Responsive System) 🌟
   - 태블릿 (가로/세로), 노트북, 모바일 화면 완벽 지원
   ======================================================== */

/* ===================================================
   📱 모바일 & 태블릿 완벽 반응형 시스템 (max-width: 860px)
   =================================================== */
@media (max-width: 860px) {
  :root {
    --board-size: min(94vw, 480px);
  }

  html, body {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 6px 4px 50px !important;
    background-attachment: scroll !important;
  }

  .app-container {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .app-container.size-9,
  .app-container.size-13, .app-container.size-11,
  .app-container.size-19 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 상단 헤더: 모바일에서 가로폭에 맞춰 자연스러운 배치 */
  .app-header {
    width: 100% !important;
    max-width: min(94vw, 500px) !important;
    height: auto !important;
    min-height: 42px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 10px !important;
    gap: 6px !important;
    border-radius: 14px !important;
  }

  .header-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .chapter-badge {
    padding: 4px 8px !important;
    font-size: 0.8rem !important;
  }

  .btn-header-lock {
    padding: 3px 8px !important;
    font-size: 0.76rem !important;
  }

  .header-right {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .mode-selector-group {
    display: flex !important;
    gap: 3px !important;
  }

  .mode-select-btn {
    padding: 5px 8px !important;
    font-size: 0.78rem !important;
    min-height: 32px !important;
    border-radius: 8px !important;
  }

  /* 메인 컨텐츠 영역: 모바일 세로 스택 (바둑판 상단, 문제/메뉴 하단) */
  .main-content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    align-items: center !important;
    gap: 10px !important;
    position: static !important;
  }

  /* 🌟 바둑판 영역 (모바일 최우선 배치) 🌟 */
  .board-right-spacer {
    display: none !important;
  }

  .board-section {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 !important;
  }

  /* 🌟 바둑판 크기: 모바일 가로폭에 맞게 시원하고 큼직하게 꽉 참 (최소 94vw) 🌟 */
  .board-wrapper,
  .app-container.size-9 .board-wrapper,
  .app-container.size-13 .board-wrapper,
  .app-container.size-19 .board-wrapper {
    width: min(94vw, 500px) !important;
    height: min(94vw, 500px) !important;
    max-width: min(94vw, 500px) !important;
    max-height: min(94vw, 500px) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 24px rgba(15, 60, 100, 0.2) !important;
  }

  /* 강의 툴바 */
  .lecture-toolbar {
    width: min(94vw, 500px) !important;
    max-width: min(94vw, 500px) !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 4px 6px !important;
    gap: 4px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    margin-top: 6px !important;
  }
  .lecture-toolbar::-webkit-scrollbar {
    display: none !important;
  }

  .tool-btn.icon-only,
  .nav-btn.icon-only {
    width: 36px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
  }

  .nav-btn.danger.clear-btn {
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 0.78rem !important;
    flex-shrink: 0 !important;
  }

  .tb-toggle-btn {
    height: 34px !important;
    padding: 0 6px !important;
    font-size: 0.76rem !important;
    flex-shrink: 0 !important;
  }

  /* 🌟 문제 & 설정 패널 (바둑판 아래 배치되어 스크롤 가능) 🌟 */
  .story-panel {
    order: 2 !important;
    width: 100% !important;
    max-width: min(94vw, 500px) !important;
    flex: none !important;
  }

  .mission-card {
    width: 100% !important;
    padding: 14px 12px !important;
    box-sizing: border-box !important;
  }

  .mission-header {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .mission-step {
    font-size: 0.88rem !important;
  }

  .mission-title {
    font-size: 1.15rem !important;
    margin: 8px 0 4px !important;
  }

  .mission-desc {
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
  }

  .problem-number-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    max-height: 180px !important;
    overflow-y: auto !important;
    gap: 5px !important;
    margin: 10px 0 !important;
  }

  .prob-num-btn {
    height: 34px !important;
    font-size: 0.84rem !important;
  }

  .char-coach-box {
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .char-avatar-mini {
    width: 32px !important;
    height: 32px !important;
  }

  .char-speech p {
    font-size: 0.82rem !important;
  }

  .mission-act-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }

  .act-btn {
    height: 42px !important;
    font-size: 0.86rem !important;
  }

  /* 설정 메뉴 패널 모바일 정렬 */
  .side-settings-panel {
    width: 100% !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
  }

  .side-segmented .size-btn,
  .side-segmented .stone-btn,
  .side-segmented .bg-theme-btn,
  .side-segmented .sound-type-btn {
    min-width: 22px !important;
    height: 28px !important;
    font-size: 0.78rem !important;
  }

  /* 모바일 정답 팝업 배지 크기 */
  .feedback-dynamic-card.single-large-card {
    width: min(78vw, 300px) !important;
    height: min(78vw, 300px) !important;
    border-radius: 28px !important;
  }

  /* 비밀번호 모달 모바일 반응형 */
  .site-auth-card {
    max-width: 90vw !important;
    padding: 28px 20px 22px !important;
    border-radius: 24px !important;
  }

  #authPinInput {
    height: 52px !important;
    font-size: 1.5rem !important;
  }

  /* 교재 선택 모달 모바일 반응형 */
  .book-select-container {
    width: 96vw !important;
    max-height: 92vh !important;
    border-radius: 16px !important;
  }

  .book-step-columns {
    flex-direction: column !important;
    padding: 10px !important;
    gap: 10px !important;
    min-height: unset !important;
    overflow-y: auto !important;
  }

  .step-column {
    min-height: 180px !important;
  }
}

/* ===================================================
   🔒 선생님 전용 보안 인증 잠금 화면 (비밀번호: 5840)
   =================================================== */
body.site-locked .app-container {
  filter: blur(28px) brightness(0.65);
  pointer-events: none !important;
  user-select: none !important;
}

.site-auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  background: radial-gradient(circle at center, rgba(30, 41, 59, 0.94) 0%, rgba(15, 23, 42, 0.98) 100%);
  backdrop-filter: blur(32px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.site-auth-overlay.fade-out {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}

.site-auth-card {
  width: 100%;
  max-width: 390px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 30px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 0 35px rgba(245, 158, 11, 0.25);
  padding: 38px 30px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 4px solid #ffffff;
  position: relative;
  animation: authCardPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes authCardPop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.site-auth-card.shake {
  animation: authShake 0.42s ease-in-out;
}

@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-12px); }
  40%, 80% { transform: translateX(12px); }
}

.auth-icon-badge {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  font-size: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(217, 119, 6, 0.4);
  margin-bottom: 18px;
}

.auth-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}

.auth-subtitle {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 24px;
  word-break: keep-all;
}

#authPinForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.auth-input-wrap {
  width: 100%;
}

#authPinInput {
  width: 100%;
  height: 58px;
  font-size: 1.7rem;
  text-align: center;
  letter-spacing: 12px;
  font-weight: 800;
  border-radius: 18px;
  border: 2.5px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}

#authPinInput:focus {
  border-color: #f59e0b;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25);
}

.auth-error-msg {
  min-height: 22px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #ef4444;
  word-break: keep-all;
}

.auth-submit-btn {
  width: 100%;
  height: 54px;
  border-radius: 18px;
  border: none;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 24px rgba(217, 119, 6, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.auth-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(217, 119, 6, 0.45);
}

.auth-submit-btn:active {
  transform: translateY(0);
}

.auth-security-notice {
  margin-top: 18px;
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-header-lock {
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-header-lock:hover {
  background: rgba(239, 68, 68, 0.35);
  border-color: rgba(239, 68, 68, 0.6);
}

.btn-header-home {
  padding: 4px 12px;
  font-size: 0.88rem;
  font-weight: 800;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ffffff;
  border: 1px solid #15803d;
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 2px 0 #15803d, 0 3px 6px rgba(34, 197, 94, 0.3);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-header-home:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 #14532d, 0 4px 10px rgba(34, 197, 94, 0.4);
}

.btn-header-home:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #14532d;
}

/* ===================================================
   🌟 바둑스쿨 메인 포털 대문 (ChessKid 스타일 키즈 포털) 🌟
   =================================================== */

.main-portal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9990;
  background: #79cafc; /* 맑고 화사한 만화풍 하늘색 */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.main-portal-overlay.portal-hidden {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ===================================================
   1. 최상단 체스키드 딥그린 네비게이션 바 (.ck-navbar)
   =================================================== */
.ck-navbar {
  width: 100%;
  background: #256320; /* ChessKid 시그니처 딥 포레스트 그린 */
  border-bottom: 3px solid #1a4716;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.ck-nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 18px;
  height: 52px;
  box-sizing: border-box;
}

.ck-nav-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ck-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease;
}
.ck-brand:hover {
  transform: scale(1.03);
}

.ck-crown-icon {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.ck-brand-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: #fbbf24; /* 산뜻한 황금빛 옐로우 */
  letter-spacing: -0.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 2px 0 #92400e;
}

.ck-brand-badge {
  font-size: 0.72rem;
  font-weight: 800;
  background: #ea580c;
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 6px;
  text-shadow: none;
  border: 1px solid #c2410c;
}

/* 내 아바타 버튼 (My Avatar) */
.ck-avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  padding: 4px 12px 4px 6px;
  border-radius: 9999px;
  cursor: pointer;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.88rem;
  transition: all 0.2s ease;
}
.ck-avatar-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
  border-color: #fde047;
}

.ck-avatar-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-size: 1rem;
}

/* 드롭다운 네비 메뉴 */
.ck-dropdown-wrap {
  position: relative;
}

.ck-nav-item {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s ease;
}
.ck-nav-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.arrow-down {
  font-size: 0.75rem;
  opacity: 0.8;
}

.ck-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  border: 2px solid #e2e8f0;
  display: none;
  flex-direction: column;
  padding: 6px 0;
  z-index: 2000;
  animation: dropSlide 0.2s ease;
}
.ck-dropdown-menu.show {
  display: flex;
}
.ck-dropdown-menu a {
  padding: 10px 16px;
  color: #1e293b;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  display: block;
  transition: all 0.15s ease;
}
.ck-dropdown-menu a:hover {
  background: #f0fdf4;
  color: #16a34a;
  padding-left: 20px;
}

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

/* 네비게이션 우측 액션 (시작하기 오렌지 3D 버튼) */
.ck-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ck-btn-signup {
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
  color: #ffffff;
  font-weight: 900;
  font-size: 0.92rem;
  padding: 8px 20px;
  border-radius: 9999px;
  border: 1px solid #c2410c;
  box-shadow: 0 3px 0 #9a3412, 0 4px 8px rgba(234, 88, 12, 0.35);
  cursor: pointer;
  transition: all 0.15s ease;
}
.ck-btn-signup:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #9a3412, 0 6px 12px rgba(234, 88, 12, 0.45);
}
.ck-btn-signup:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #9a3412;
}

.ck-nav-text-btn {
  background: none;
  border: none;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 6px 10px;
  opacity: 0.9;
  transition: opacity 0.15s;
}
.ck-nav-text-btn:hover {
  opacity: 1;
  text-decoration: underline;
}

.ck-nav-lock-btn {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fca5a5;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}

/* ===================================================
   2. 메인 히어로 섹션 (원근감 바둑판 언덕 + 캐릭터 크루)
   =================================================== */
.ck-hero-section {
  position: relative;
  width: 100%;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  background: #79cafc;
  padding-bottom: 30px;
}

/* 배경: 푸른 하늘 + 뭉게구름 + 숲 + 원근감 바둑판 잔디 */
.ck-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* 뭉게구름 애니메이션 */
.ck-cloud {
  position: absolute;
  background: #ffffff;
  border-radius: 100px;
  opacity: 0.85;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.05));
}
.ck-cloud::before, .ck-cloud::after {
  content: '';
  position: absolute;
  background: #ffffff;
  border-radius: 50%;
}
.cloud-1 {
  width: 170px;
  height: 55px;
  top: 40px;
  left: 12%;
  animation: cloudFloat 35s infinite linear;
}
.cloud-1::before { width: 75px; height: 75px; top: -35px; left: 25px; }
.cloud-1::after { width: 55px; height: 55px; top: -22px; right: 28px; }

.cloud-2 {
  width: 220px;
  height: 65px;
  top: 75px;
  right: 14%;
  animation: cloudFloat 45s infinite linear reverse;
}
.cloud-2::before { width: 95px; height: 95px; top: -45px; left: 35px; }
.cloud-2::after { width: 70px; height: 70px; top: -30px; right: 35px; }

@keyframes cloudFloat {
  0% { transform: translateX(0); }
  50% { transform: translateX(40px); }
  100% { transform: translateX(0); }
}

/* 원경 산세 실루엣 */
.ck-mountain-silhouette {
  position: absolute;
  top: 140px;
  left: 0;
  width: 100%;
  height: 180px;
  background: radial-gradient(ellipse 70% 80% at 50% 100%, #bbf7d0 0%, transparent 80%),
              radial-gradient(ellipse 50% 60% at 20% 100%, #86efac 0%, transparent 75%),
              radial-gradient(ellipse 50% 60% at 80% 100%, #86efac 0%, transparent 75%);
  opacity: 0.7;
}

/* 좌우 커다란 만화 숲 나무들 (스크린샷 그대로) */
.ck-tree {
  position: absolute;
  bottom: 120px;
  width: 260px;
  height: 380px;
  z-index: 2;
}
.tree-left {
  left: -60px;
  background: radial-gradient(circle at 60% 40%, #22c55e 0%, #15803d 70%, #166534 100%);
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  box-shadow: inset -20px -20px 0 rgba(22, 101, 52, 0.4);
}
.tree-left::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: 110px;
  width: 50px;
  height: 120px;
  background: #78350f;
  border-radius: 12px;
  z-index: -1;
}

.tree-right {
  right: -60px;
  background: radial-gradient(circle at 40% 40%, #22c55e 0%, #15803d 70%, #166534 100%);
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  box-shadow: inset 20px -20px 0 rgba(22, 101, 52, 0.4);
}
.tree-right::after {
  content: '';
  position: absolute;
  bottom: -40px;
  right: 110px;
  width: 50px;
  height: 120px;
  background: #78350f;
  border-radius: 12px;
  z-index: -1;
}

/* 원근감 있게 펼쳐지는 바둑판 잔디 언덕 (ChessKid 초원 체스판 바닥) */
.ck-perspective-lawn {
  position: absolute;
  bottom: 0;
  left: -20%;
  width: 140%;
  height: 290px;
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 40%, #15803d 100%);
  transform: perspective(600px) rotateX(48deg);
  transform-origin: bottom center;
  box-shadow: 0 -10px 40px rgba(34, 197, 94, 0.35);
}

.ck-board-grid {
  width: 100%;
  height: 100%;
  background-size: 70px 70px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.3) 2px, transparent 2px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 2px, transparent 2px);
  opacity: 0.65;
}

/* 히어로 텍스트 & 캐릭터 전면 컨텐츠 */
.ck-hero-content {
  position: relative;
  z-index: 10;
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ck-title-badge {
  background: rgba(255, 255, 255, 0.95);
  color: #15803d;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 6px 18px;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 12px;
  border: 1.5px solid #86efac;
}

.ck-hero-title {
  font-size: 2.85rem;
  font-weight: 900;
  line-height: 1.25;
  color: #0f172a;
  letter-spacing: -1px;
  margin: 0 0 16px 0;
  text-shadow: 0 3px 0 rgba(255, 255, 255, 0.8), 0 8px 24px rgba(0, 0, 0, 0.08);
}

.ck-title-highlight {
  color: #0284c7;
  display: block;
  font-size: 2.2rem;
  background: linear-gradient(135deg, #0284c7 0%, #16a34a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 🌟 중앙 캐릭터 파티 크루 (ChessKid 마스코트 그룹 재현) 🌟 */
.ck-mascot-crew-wrapper {
  position: relative;
  width: 100%;
  max-width: 620px;
  height: 190px;
  margin: 10px auto 25px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.ck-character {
  position: absolute;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.22));
}
.ck-character:hover {
  transform: translateY(-8px) scale(1.08) !important;
  z-index: 25 !important;
}

/* 1. 황금 바둑돌 요정 (중앙) */
.char-hero-gold {
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 160px;
  z-index: 10;
  animation: heroBob 3s ease-in-out infinite alternate;
}

@keyframes heroBob {
  0% { transform: translateX(-50%) translateY(0); }
  100% { transform: translateX(-50%) translateY(-6px); }
}

/* 2. 핑크소녀 (왼쪽 앞) */
.char-girl-pink {
  bottom: 10px;
  left: 28%;
  width: 110px;
  height: 130px;
  z-index: 8;
}

/* 3. 파란소년 (오른쪽 앞) */
.char-boy-blue {
  bottom: 10px;
  right: 28%;
  width: 110px;
  height: 130px;
  z-index: 8;
}

/* 4. 안경 흑돌이 (왼쪽 뒤) */
.char-stone-glasses {
  bottom: 45px;
  left: 12%;
  width: 95px;
  height: 115px;
  z-index: 5;
}

/* 5. 킹 백돌이 (중앙 뒤) */
.char-king-white {
  bottom: 50px;
  left: 45%;
  transform: translateX(-50%);
  width: 115px;
  height: 135px;
  z-index: 6;
}

/* 6. 퀸 백돌이 (오른쪽 뒤) */
.char-queen-star {
  bottom: 45px;
  right: 14%;
  width: 95px;
  height: 115px;
  z-index: 5;
}

.char-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 3. 대형 3D 인터랙티브 버튼 2종 (체스키드 메인 CTA) */
.ck-cta-group {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 25px;
}

.ck-cta-btn {
  padding: 18px 38px;
  font-size: 1.25rem;
  font-weight: 900;
  border-radius: 9999px;
  cursor: pointer;
  letter-spacing: -0.3px;
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 주황색 Play Now 3D 버튼 */
.ck-btn-play {
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
  color: #ffffff;
  border: 2px solid #fdba74;
  box-shadow: 0 7px 0 #9a3412, 0 10px 24px rgba(234, 88, 12, 0.45);
}
.ck-btn-play:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 0 #9a3412, 0 14px 30px rgba(234, 88, 12, 0.55);
}
.ck-btn-play:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #9a3412;
}

/* 황금색 Learn Baduk 3D 버튼 */
.ck-btn-learn {
  background: linear-gradient(180deg, #facc15 0%, #d97706 100%);
  color: #ffffff;
  border: 2px solid #fef08a;
  box-shadow: 0 7px 0 #92400e, 0 10px 24px rgba(217, 119, 6, 0.45);
}
.ck-btn-learn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 0 #92400e, 0 14px 30px rgba(217, 119, 6, 0.55);
}
.ck-btn-learn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #92400e;
}

/* ===================================================
   4. 하단 순백의 신뢰도 지표 바 (.ck-stats-section)
   =================================================== */
.ck-stats-section {
  position: relative;
  z-index: 20;
  width: 100%;
  background: #ffffff;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  box-shadow: 0 -12px 35px rgba(0, 0, 0, 0.08);
  padding: 34px 20px 28px;
  box-sizing: border-box;
  margin-top: -24px;
}

.ck-stats-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  text-align: center;
}

.ck-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ck-stat-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.icon-kids { background: #eff6ff; }
.icon-school { background: #fef2f2; }
.icon-board { background: #f0fdf4; }
.icon-puzzle { background: #fff7ed; }
.icon-book { background: #faf5ff; }

.ck-stat-num {
  font-size: 1.65rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.5px;
}

.ck-stat-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
}

/* ===================================================
   5. 4대 핵심 활동 코너 그리드 (.ck-pillars-section)
   =================================================== */
.ck-pillars-section {
  background: #ffffff;
  padding: 20px 20px 30px;
  box-sizing: border-box;
}

.ck-pillars-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.ck-card {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 20px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}
.ck-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
}
.card-learn:hover { border-color: #38bdf8; background: #f0f9ff; }
.card-duel:hover { border-color: #fb923c; background: #fff7ed; }
.card-bots:hover { border-color: #4ade80; background: #f0fdf4; }
.card-coach:hover { border-color: #c084fc; background: #faf5ff; }

.card-badge {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 800;
  background: #e0f2fe;
  color: #0284c7;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.card-badge.hot { background: #ffedd5; color: #ea580c; }
.card-badge.green { background: #dcfce7; color: #16a34a; }
.card-badge.purple { background: #f3e8ff; color: #9333ea; }

.card-emoji {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.ck-card h3 {
  font-size: 1.15rem;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.ck-card p {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.45;
  margin: 0 0 16px 0;
  flex-grow: 1;
}

.card-link {
  font-size: 0.88rem;
  font-weight: 900;
  color: #0284c7;
}

/* ===================================================
   6. 아케이드 & 세이프가드 푸터
   =================================================== */
.ck-arcade-section {
  background: #ffffff;
  padding: 0 20px 25px;
}

.arcade-card-box {
  max-width: 1100px;
  margin: 0 auto;
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border: 2px dashed #93c5fd;
  border-radius: 18px;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.arcade-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: #1e3a8a;
}

.arcade-btn-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ck-sub-btn {
  padding: 9px 18px;
  font-size: 0.88rem;
  font-weight: 800;
  background: #ffffff;
  color: #1e293b;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 2px 0 #94a3b8;
  transition: all 0.15s;
}
.ck-sub-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 #94a3b8;
  background: #f8fafc;
}
.ck-sub-btn.special {
  background: #4338ca;
  color: #ffffff;
  border-color: #3730a3;
  box-shadow: 0 2px 0 #312e81;
}

.ck-footer {
  background: #ffffff;
  padding: 20px 20px 40px;
  text-align: center;
  border-top: 1px solid #e2e8f0;
}

.safe-badge-pill {
  display: inline-block;
  background: #ecfdf5;
  color: #065f46;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 6px 16px;
  border-radius: 9999px;
  border: 1px solid #a7f3d0;
  margin-bottom: 10px;
}

.ck-copy {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 0;
}

/* ===================================================
   7. 내 아바타 꾸미기 스튜디오 모달 (.ck-avatar-modal)
   =================================================== */
.ck-avatar-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100000;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.avatar-modal-card {
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  border-radius: 28px;
  padding: 28px 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  border: 4px solid #facc15;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

.avatar-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.avatar-modal-header h2 {
  font-size: 1.25rem;
  font-weight: 900;
  color: #0f172a;
  margin: 0;
}
.btn-close-modal {
  background: #f1f5f9;
  border: none;
  font-size: 1.1rem;
  font-weight: 900;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  color: #64748b;
}

.avatar-preview-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.avatar-big-canvas {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #e2e8f0 100%);
  border: 4px solid #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.3);
}

.avatar-name-input {
  width: 80%;
  padding: 8px 14px;
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  outline: none;
  color: #0f172a;
}
.avatar-name-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.avatar-custom-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.avatar-tab-row label {
  font-size: 0.82rem;
  font-weight: 800;
  color: #475569;
  display: block;
  margin-bottom: 6px;
}

.avatar-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.opt-btn {
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 800;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.opt-btn.active {
  background: #f0fdf4;
  border-color: #22c55e;
  color: #15803d;
  box-shadow: 0 2px 0 #15803d;
}

.btn-save-avatar {
  width: 100%;
  padding: 14px;
  font-size: 1.1rem;
  font-weight: 900;
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  color: #ffffff;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 4px 0 #15803d, 0 8px 18px rgba(34, 197, 94, 0.35);
  transition: all 0.15s;
}
.btn-save-avatar:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #15803d, 0 10px 22px rgba(34, 197, 94, 0.45);
}
.btn-save-avatar:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #15803d;
}

/* 반응형 모바일 대응 */
@media (max-width: 900px) {
  .ck-stats-container {
    grid-template-columns: repeat(3, 1fr);
  }
  .ck-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ck-hero-title {
    font-size: 2.1rem;
  }
  .ck-title-highlight {
    font-size: 1.7rem;
  }
  .tree-left, .tree-right {
    display: none;
  }
}

@media (max-width: 600px) {
  .ck-stats-container {
    grid-template-columns: 1fr;
  }
  .ck-pillars-grid {
    grid-template-columns: 1fr;
  }
  .ck-cta-group {
    flex-direction: column;
    gap: 12px;
  }
  .ck-cta-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 1.1rem;
  }
  .ck-dropdown-wrap {
    display: none;
  }
}


/* 🌟 문제 돌을 가리지 않는 바둑판 안 빈자리(빈 사분면) 스마트 배치 🌟 */
.board-feedback-overlay.pos-top-left {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 5% 0 0 5% !important;
}

.board-feedback-overlay.pos-top-right {
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: 5% 5% 0 0 !important;
}

.board-feedback-overlay.pos-bottom-left {
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: 0 0 5% 5% !important;
}

.board-feedback-overlay.pos-bottom-right {
  align-items: flex-end !important;
  justify-content: flex-end !important;
  padding: 0 5% 5% 0 !important;
}

/* 빈자리에 쏙 들어가도록 카드 크기 최적화 (돌 가림 완전 방지) */
.board-feedback-overlay[class*="pos-"] .feedback-dynamic-card.single-large-card {
  width: min(220px, 36vmin) !important;
  height: min(220px, 36vmin) !important;
  border-radius: 24px !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 24px rgba(251, 191, 36, 0.5) !important;
}

.board-feedback-overlay.pos-center .feedback-dynamic-card.single-large-card {
  width: min(260px, 45vmin) !important;
  height: min(260px, 45vmin) !important;
}


/* 🌟 바둑판 화면 정중앙 배치를 위한 우측 투명 밸런스 스페이서 (.board-right-spacer) 🌟 */
.board-right-spacer {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  flex: 0 0 240px !important;
  height: 1px !important;
  pointer-events: none !important;
  visibility: hidden !important;
}


/* 🌟 바탕화면 테마 7: 청명한 가을 하늘과 흘러가는 뭉게구름 모션그래픽 🌟 */
body.bg-theme-theme7,
body.bg-theme-autumn,
body.bg-theme-clouds {
  background: #0284c7 !important;
}

#cloudsCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: none;
}

body.bg-theme-theme7 #cloudsCanvas,
body.bg-theme-autumn #cloudsCanvas,
body.bg-theme-clouds #cloudsCanvas {
  display: block;
}

/* ========================================================
   ★ 로고 시안 실시간 선택기 (1~6종) 스타일 ★
   ======================================================== */
.logo-theme-btn {
  flex: 1;
  padding: 4px 0;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.logo-theme-btn:hover {
  color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
}

.logo-theme-btn.active {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.35);
}

/* 로고 시안 6종 렌더링 스타일 */
.logo-render-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.logo-render-wrap .logo-text-jua {
  font-family: 'Jua', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.05rem;
  color: #ffffff;
  letter-spacing: -0.3px;
  line-height: 1;
}

/* 1번: 3D 입체 흑백돌 듀오 */
.s1-stones-mini {
  position: relative;
  width: 28px;
  height: 20px;
  display: inline-flex;
  align-items: center;
}
.s1-stones-mini .s1-b {
  width: 17px; height: 17px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #475569 0%, #0f172a 75%, #020617 100%);
  position: absolute; left: 0; z-index: 1; border: 1px solid #64748b;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.s1-stones-mini .s1-w {
  width: 17px; height: 17px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f1f5f9 60%, #cbd5e1 100%);
  position: absolute; right: 0; z-index: 2; border: 1px solid #94a3b8;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.s1-stones-mini .s1-spark {
  position: absolute; top: -3px; right: 4px; width: 6px; height: 6px; background: #facc15;
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
  z-index: 3;
}

/* 2번: 미소 흑백돌 캐릭터 */
.s2-mascots-mini {
  display: inline-flex;
  align-items: center;
}
.s2-mascots-mini .s2-b {
  width: 18px; height: 18px; border-radius: 50%;
  background: #1e293b; color: white; border: 1px solid #64748b;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: bold; z-index: 1;
}
.s2-mascots-mini .s2-w {
  width: 18px; height: 18px; border-radius: 50%;
  background: #ffffff; color: #0f172a; border: 1px solid #94a3b8;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: bold; margin-left: -5px; z-index: 2;
}

/* 3번: 흑백돌 위트 타이포 */
.dot-stone-inline {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  vertical-align: middle; margin: 0 1px;
}
.dot-stone-inline.b { background: #0f172a; border: 1px solid #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.dot-stone-inline.w { background: #ffffff; border: 1px solid #0f172a; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }

/* 4번: 미니멀 바둑판 큐브 */
.s4-cube-mini {
  width: 20px; height: 20px; background: #f8fafc; border: 1.5px solid #0f172a;
  border-radius: 5px; position: relative; display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr; padding: 2px;
}
.s4-cube-mini .cube-line-h { position: absolute; top: 9px; left: 0; right: 0; height: 1px; background: #cbd5e1; }
.s4-cube-mini .cube-line-v { position: absolute; left: 9px; top: 0; bottom: 0; width: 1px; background: #cbd5e1; }
.s4-cube-mini .s4-b { width: 6px; height: 6px; border-radius: 50%; background: #0f172a; z-index: 2; align-self: center; justify-self: center; }
.s4-cube-mini .s4-w { width: 6px; height: 6px; border-radius: 50%; background: #ffffff; border: 1px solid #0f172a; z-index: 2; align-self: center; justify-self: center; }

/* 5번: 모던 흑백 듀얼 뱃지 */
.badge-black-mini {
  background: #0f172a; color: #ffffff; padding: 1px 6px; border-radius: 5px;
  font-size: 0.88rem; border: 1px solid #334155; display: inline-flex; align-items: center; gap: 3px;
}
.dot-w-mini { width: 5px; height: 5px; border-radius: 50%; background: #ffffff; }

/* 6번: 조화의 흑백 서클 */
.s6-circle-mini {
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, #0f172a 50%, #ffffff 50%);
  border: 1.5px solid #ffffff; position: relative;
}
.s6-circle-mini .s6-dot-b { position: absolute; top: 3px; right: 3px; width: 4px; height: 4px; background: #0f172a; border-radius: 50%; }
.s6-circle-mini .s6-dot-w { position: absolute; bottom: 3px; left: 3px; width: 4px; height: 4px; background: #ffffff; border-radius: 50%; }