/* =========================================================
   KB 가상과학실 공통 스타일시트
   - 모든 페이지(index.html, grade4.html 등)에서 함께 사용
   - 색상/폰트는 :root 변수로 모아두어 한 곳에서 테마 변경 가능
   ========================================================= */

/* ---------- 1. 테마 변수 ---------- */
:root {
  /* 메인 색상 (밝고 산뜻한 하늘/민트 톤) */
  --color-primary: #3b82f6;        /* 버튼/강조 색 */
  --color-primary-dark: #2563eb;   /* 호버 시 진한 색 */
  --color-accent: #10b981;         /* 보조 강조 색 (초록) */
  --color-bg: #f5f9ff;             /* 페이지 배경 */
  --color-card: #ffffff;           /* 카드 배경 */
  --color-text: #1f2937;           /* 본문 텍스트 */
  --color-text-soft: #4b5563;      /* 부제목/설명 텍스트 */
  --color-border: #e5e7eb;         /* 연한 경계선 */

  /* 학년별 포인트 색상 (카드 구분용) */
  --grade-3: #f59e0b;  /* 주황 */
  --grade-4: #3b82f6;  /* 파랑 */
  --grade-5: #10b981;  /* 초록 */
  --grade-6: #8b5cf6;  /* 보라 */

  /* 공통 수치 */
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 6px 18px rgba(59, 130, 246, 0.10);
  --shadow-hover: 0 10px 24px rgba(59, 130, 246, 0.18);
  --max-width: 1100px;
}

/* ---------- 2. 기본 리셋 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  /* 한글 우선 시스템 폰트 스택 (Windows/Mac/모바일에서 자연스럽게 표시) */
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic",
    "맑은 고딕", "Noto Sans KR", system-ui, -apple-system, Segoe UI,
    Roboto, sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
  /* 부드러운 그라디언트 배경으로 산뜻한 분위기 연출 */
  background-image:
    radial-gradient(circle at 10% 10%, #e0f2fe 0%, transparent 40%),
    radial-gradient(circle at 90% 20%, #dcfce7 0%, transparent 40%),
    radial-gradient(circle at 50% 100%, #ede9fe 0%, transparent 45%);
  background-attachment: fixed;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all; /* 한글 단어 중간에서 줄바꿈되지 않게 */
}

/* 링크 기본 스타일 */
a {
  color: inherit;
  text-decoration: none;
}

/* ---------- 3. 공통 레이아웃 ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- 4. 헤더(페이지 상단 타이틀 영역) ---------- */
.site-header {
  text-align: center;
  padding: 64px 20px 32px;
}

.site-header .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-card);
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  font-weight: 700;
  color: var(--color-primary);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.site-header .logo .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
}

.site-header h1 {
  font-size: clamp(1.8rem, 4vw + 1rem, 3rem);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.site-header .subtitle {
  font-size: clamp(1rem, 1vw + 0.8rem, 1.2rem);
  color: var(--color-text-soft);
  margin: 0;
}

/* ---------- 5. 학년 카드 그리드 ---------- */
.grade-grid {
  display: grid;
  gap: 20px;
  /* PC: 4열, 태블릿: 2열, 모바일: 1열 자동 */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding: 24px 0 64px;
}

.grade-card {
  /* <button> 기본 스타일 제거 */
  appearance: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;

  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;

  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  position: relative;
  overflow: hidden;
}

.grade-card:hover,
.grade-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  outline: none;
}

/* 카드 상단 컬러 바 (학년별 포인트 색) */
.grade-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--card-color, var(--color-primary));
}

.grade-card .grade-number {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--card-color, var(--color-primary));
  line-height: 1;
}

.grade-card .grade-label {
  font-size: 1.1rem;
  font-weight: 700;
}

.grade-card .grade-desc {
  font-size: 0.9rem;
  color: var(--color-text-soft);
  margin-top: auto; /* 카드 아래쪽에 배치 */
}

/* 학년별 포인트 색을 카드에 주입 */
.grade-card.grade-3 { --card-color: var(--grade-3); }
.grade-card.grade-4 { --card-color: var(--grade-4); }
.grade-card.grade-5 { --card-color: var(--grade-5); }
.grade-card.grade-6 { --card-color: var(--grade-6); }

/* "준비 중" 표시 배지 */
.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
}

.badge.ready {
  background: #dbeafe;
  color: var(--color-primary-dark);
}

/* ---------- 6. 둥근 버튼 (공용) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  text-decoration: none;
}

.btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

.btn.secondary {
  background: #fff;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

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

/* ---------- 7. 푸터 ---------- */
.site-footer {
  text-align: center;
  padding: 24px 20px 40px;
  color: var(--color-text-soft);
  font-size: 0.85rem;
}

/* =========================================================
   학년 페이지(grade4.html 등)에서 쓰는 스타일
   ========================================================= */

/* 서브 페이지 상단 바 */
.page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}

.page-nav .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.95rem;
}

.page-nav .back-link:hover {
  text-decoration: underline;
}

/* 학년 페이지 히어로 영역 */
.grade-hero {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 28px;
  border-top: 6px solid var(--grade-4);
}

.grade-hero h2 {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.2rem);
}

.grade-hero p {
  margin: 0;
  color: var(--color-text-soft);
}

/* 섹션 공통 타이틀 */
.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 28px 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 22px;
  border-radius: 3px;
  background: var(--grade-4);
}

/* 단원/실험 카드 그리드 (grade4에서 사용) */
.content-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-bottom: 32px;
}

.content-card {
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

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

.content-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.content-card p {
  margin: 0 0 14px;
  font-size: 0.9rem;
  color: var(--color-text-soft);
}

/* 아직 비어있는 상태를 안내하는 자리 표시자 */
.empty-placeholder {
  background: var(--color-card);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-soft);
}

.empty-placeholder strong {
  color: var(--color-text);
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
}

/* =========================================================
   실험 페이지 전용 스타일
   - experiments/*.html 에서 공통으로 사용
   - 캔버스(무대) + 컨트롤 + 상태 표시 + 설명 박스로 구성
   ========================================================= */

/* 실험 페이지 레이아웃 */
.experiment-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-bottom: 40px;
}

@media (min-width: 900px) {
  .experiment-layout.with-sidebar {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
}

/* 무대(캔버스/시각화 영역) 카드 */
.stage {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-soft);
  border-top: 6px solid var(--grade-4);
  position: relative;
  overflow: hidden;
}

.stage-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #eaf4ff 0%, #f7fbff 100%);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.stage-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 좌우 분할 무대 (실험 2 에서 사용) */
.stage-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stage-split .stage-canvas-wrap {
  aspect-ratio: 3 / 4;
}

.stage-split .split-label {
  text-align: center;
  font-weight: 700;
  padding: 8px 0 4px;
  color: var(--color-text-soft);
}

.stage-split .split-sub {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin-bottom: 6px;
}

/* 컨트롤 패널 */
.controls {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.controls h3 {
  margin: 0;
  font-size: 1.05rem;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.control-label {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  font-weight: 600;
}

/* 버튼 그룹 (한 줄 가로 정렬) */
.btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn.small {
  padding: 8px 16px;
  font-size: 0.88rem;
}

.btn.ghost {
  background: #f1f5f9;
  color: var(--color-text);
}

.btn.ghost:hover {
  background: #e2e8f0;
  transform: none;
}

.btn.danger {
  background: #ef4444;
}

.btn.danger:hover {
  background: #dc2626;
}

.btn.warm {
  background: #f97316;
}

.btn.warm:hover {
  background: #ea580c;
}

.btn.cool {
  background: #0ea5e9;
}

.btn.cool:hover {
  background: #0284c7;
}

/* 상태 표시(고체/액체/기체 등) */
.status-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: #f8fafc;
  border: 1px solid var(--color-border);
  gap: 12px;
}

.status-display .status-label {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  font-weight: 600;
}

.status-display .status-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-primary-dark);
}

/* 상태별 색상 힌트 */
.status-value.state-solid  { color: #0ea5e9; }
.status-value.state-liquid { color: #2563eb; }
.status-value.state-gas    { color: #7c3aed; }

/* 슬라이더 */
.slider {
  width: 100%;
  accent-color: var(--color-primary);
}

/* 범위 표시 (예: 온도계) */
.range-display {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-text-soft);
}

/* 짧은 설명 박스 */
.info-box {
  background: #ecfeff;
  border-left: 4px solid #06b6d4;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #164e63;
}

.info-box strong {
  color: #0e7490;
}

.info-box.warn {
  background: #fff7ed;
  border-left-color: #f97316;
  color: #7c2d12;
}

.info-box.warn strong {
  color: #c2410c;
}

/* 학습 포인트 리스트 */
.learn-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.92rem;
  color: var(--color-text);
  line-height: 1.7;
}

/* 토글 버튼 그룹 (탭처럼 동작) */
.toggle-group {
  display: inline-flex;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 4px;
}

.toggle-group button {
  appearance: none;
  border: none;
  background: transparent;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--color-text-soft);
  transition: background 0.15s ease, color 0.15s ease;
}

.toggle-group button.active {
  background: var(--color-primary);
  color: #fff;
}

/* 실험 페이지 히어로 */
.exp-hero {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 24px;
  border-top: 6px solid var(--grade-4);
}

.exp-hero h2 {
  margin: 0 0 6px;
  font-size: clamp(1.3rem, 2vw + 0.8rem, 1.8rem);
}

.exp-hero p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.95rem;
}

/* 단원 내 실험 이동(이전/다음) 버튼 */
.exp-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* ---------- 8. 반응형 보정 ---------- */
@media (max-width: 640px) {
  .site-header {
    padding: 40px 16px 24px;
  }
  .grade-hero {
    padding: 24px 20px;
  }
  .stage-split {
    grid-template-columns: 1fr;
  }
  .stage-split .stage-canvas-wrap {
    aspect-ratio: 4 / 3;
  }
}