/* ============================================================
   화학 탐구실 — 공통 스타일
   이 파일 하나만 고치면 사이트 전체 디자인이 바뀝니다.
   ============================================================ */
:root{
  --bg:#f5f7fa; --panel:#fff; --line:#e3e6ea; --text:#1f2328; --muted:#667085;
  --accent:#2563eb; --accent-dark:#1d4ed8;
  --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --shadow-lg:0 8px 20px rgba(16,24,40,.10),0 2px 6px rgba(16,24,40,.06);
  --radius:12px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text); line-height:1.55;
  font-family:-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",
              "Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}
a{color:inherit}
.wrap{max-width:1180px; margin:0 auto; padding:0 16px}

/* ---------- 상단 네비게이션 (nav.js가 자동 삽입) ---------- */
.site-nav{
  background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;
}
.site-nav .inner{
  max-width:1180px; margin:0 auto; padding:0 16px; height:54px;
  display:flex; align-items:center; gap:14px;
}
.site-nav .brand{
  font-weight:700; font-size:15.5px; text-decoration:none; display:flex;
  align-items:center; gap:8px; white-space:nowrap;
}
.site-nav .brand .mark{
  width:24px;height:24px;border-radius:7px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800;
}
.site-nav .spacer{flex:1}
.site-nav select{
  font-family:inherit; font-size:13px; padding:6px 10px; border-radius:8px;
  border:1px solid var(--line); background:#fff; color:var(--text); max-width:52vw;
}
.site-nav .home{
  font-size:13px; color:var(--muted); text-decoration:none; white-space:nowrap;
}
.site-nav .home:hover{color:var(--accent)}

/* 좁은 화면(휴대폰)에서는 네비게이션이 넘치지 않게 줄인다 */
@media (max-width:480px){
  .site-nav .home{ display:none; }          /* 브랜드 로고가 이미 홈 링크 역할 */
  .site-nav select{ max-width:60vw; min-width:0; flex-shrink:1; }
  .site-nav .brand{ font-size:14px; }
  .site-nav .inner{ gap:10px; }
}

/* ---------- 공통 카드 ---------- */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; box-shadow:var(--shadow);
}
.card h2{
  font-size:14px; margin:0 0 10px; color:var(--muted); font-weight:600; letter-spacing:.02em;
}

/* ---------- 버튼 ---------- */
button{
  font-family:inherit; font-size:13px; padding:7px 13px; border-radius:8px;
  border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:500;
}
button.primary{background:var(--accent); color:#fff; border-color:var(--accent)}
@media (hover:hover){
  button:hover{background:#f3f4f6}
  button.primary:hover{background:var(--accent-dark)}
}

/* ---------- 표 ---------- */
table{width:100%; border-collapse:collapse; font-size:12.5px; margin-top:10px}
th,td{padding:6px 8px; text-align:right; border-bottom:1px solid var(--line);
      font-variant-numeric:tabular-nums}
th{color:var(--muted); font-weight:600; background:#f8fafc}
th:first-child,td:first-child{text-align:left}

/* ---------- 푸터 ---------- */
.site-foot{
  margin-top:48px; padding:24px 0 40px; border-top:1px solid var(--line);
  color:var(--muted); font-size:13px; text-align:center;
}

/* ============================================================
   터치 기기(태블릿·휴대폰) 대응
   - pointer:coarse = 손가락으로 조작하는 기기
   - iOS Safari는 입력창 글자가 16px 미만이면 탭할 때 화면을 확대해 버립니다
   - 애플/구글 접근성 지침 권장 터치 영역: 44×44 px
   ============================================================ */
html{ -webkit-text-size-adjust:100%; }
button, select, input, a, .chip{ -webkit-tap-highlight-color:transparent; }

/* 슬라이더 — 손가락으로 잡기 쉽게 직접 그린다 */
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:26px; background:transparent; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:3px; background:#e2e8f0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; margin-top:-7px;
  border-radius:50%; background:var(--accent); border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.28); cursor:pointer;
}
input[type=range]::-moz-range-track{ height:6px; border-radius:3px; background:#e2e8f0; }
input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--accent);
  border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.28); cursor:pointer;
}
input[type=range]:focus{ outline:none; }
input[type=range]:focus::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(37,99,235,.25); }

input[type=checkbox]{ width:20px; height:20px; accent-color:var(--accent); }

@media (pointer:coarse){
  /* html 을 앞에 붙여 우선순위를 높인다 —
     각 페이지의 <style> 이 나중에 오므로 이렇게 해야 실제로 적용된다 */
  html button{ min-height:44px; padding:10px 16px; font-size:14px; }
  html input[type=text], html select, html .site-nav select,
  html .search input{ font-size:16px; min-height:44px; }
  input[type=range]{ height:38px; }
  input[type=range]::-webkit-slider-runnable-track{ height:8px; border-radius:4px; }
  input[type=range]::-webkit-slider-thumb{ width:30px; height:30px; margin-top:-11px; }
  input[type=range]::-moz-range-track{ height:8px; border-radius:4px; }
  input[type=range]::-moz-range-thumb{ width:30px; height:30px; }
  input[type=checkbox]{ width:24px; height:24px; }
  .site-nav .inner{ height:60px; }
  th,td{ padding:10px 8px; font-size:13.5px; }
  summary{ padding:6px 0; }
}

/* ============================================================
   디자인 매뉴얼 v4.0 확장 토큰 (2026-07-28 추가)
   ── 아래는 전부 "추가"입니다. 위쪽 기존 규칙은 하나도 바꾸지 않았습니다.
   ── 자세한 사용 규칙은 프로젝트 폴더의 「디자인매뉴얼 v4.0」 참조.
   ============================================================ */
:root{
  /* ── 텍스트 3단계 (대비비는 흰 카드 기준 실측값) ── */
  --t1:#1f2328;      /* 제목·핵심 수치      15.80:1 */
  --t2:#454b52;      /* 본문·레이블          8.82:1 */
  --t3:#5b636b;      /* 소형(11px 이하) 레이블 6.10:1 */

  /* ── 데이터 컬러 (밝은 배경 = 카드·그래프·표 위) ──
     전부 흰 배경에서 WCAG AA(4.5:1) 이상. 괄호는 실측 대비비. */
  --d-blue:#1d4ed8;    /* 6.70:1  기본 계열 1 */
  --d-cyan:#0f5c8c;    /* 7.17:1  보조·수치 강조 */
  --d-green:#15803d;   /* 5.02:1  안정·정상·성공 */
  --d-amber:#b45309;   /* 5.02:1  주의·중간값 */
  --d-red:#b91c1c;     /* 6.47:1  경고·위험 */
  --d-violet:#6d28d9;  /* 7.10:1  특수 계열 */
  --d-gray:#5f6b7a;    /* 5.43:1  중성·비활성 */

  /* ── 어두운 무대(관찰영역) 위에서 쓰는 발광 계열 ──
     배경 --stage-dark 기준 실측 대비비. */
  --p-sky:#56b4e9;     /* 7.74:1 */
  --p-orange:#fb923c;  /* 7.89:1 */
  --p-yellow:#facc15;  /* 11.66:1 */
  --p-mint:#34d399;    /* 9.29:1 */
  --p-violet:#a78bfa;  /* 6.56:1 */
  --p-silver:#cbd5e1;  /* 12.02:1 */

  /* ── 무대(관찰 영역) 배경 ── */
  --stage-dark:#0f172a;    /* 입자·빛·궤적을 볼 때 */
  --stage-light:#ffffff;   /* 유리기구·용액·침전을 볼 때 */
  --stage-line:#94a3b8;    /* 무대 안 눈금·보조선 */
}

/* ---------- 무대(관찰 영역) ---------- */
.stage{
  border-radius:10px; overflow:hidden; position:relative;
  border:1px solid var(--line);
}
.stage canvas{ display:block; width:100%; }
.stage--dark { background:var(--stage-dark);  border-color:#1e293b; }
.stage--light{ background:var(--stage-light); border-color:#cbd5e1; }
/* 무대 안에 얹는 짧은 주석 (Mayer 공간 근접 원칙 — 설명은 대상 옆에) */
.stage-note{
  position:absolute; left:10px; bottom:8px; font-size:11px; pointer-events:none;
}
.stage--dark  .stage-note{ color:rgba(226,232,240,.62) }
.stage--light .stage-note{ color:rgba(40,46,54,.50) }

/* ---------- 측정값 표시 (readout) ---------- */
.readout{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px;
}
.readout .label{ font-size:11.5px; color:var(--t3); font-weight:600; letter-spacing:.02em }
.readout .value{
  font-size:22px; font-weight:600; color:var(--t1); line-height:1.2;
  font-variant-numeric:tabular-nums;   /* 숫자가 바뀌어도 폭이 흔들리지 않게 */
}
.readout .unit{ font-size:12px; font-weight:500; color:var(--t3); margin-left:3px }
.readout.is-ok   { border-color:#bbf7d0; background:#f0fdf4 }
.readout.is-warn { border-color:#fed7aa; background:#fff7ed }
.readout.is-bad  { border-color:#fecaca; background:#fef2f2 }

/* ---------- 물리량별 슬라이더 색 ----------
   같은 파란 슬라이더가 5개 있으면 무엇을 잡는지 매번 레이블을 읽어야 한다.
   물리량마다 색을 배정하면 위치만 봐도 안다.

   ⚠ 2026-07-31 수정 — 아래 선택자에 input[type=range] 를 반드시 앞에 붙인다.
     .rng-temp::-webkit-slider-thumb            → 특이도 (0,1,0)
     input[type=range]::-webkit-slider-thumb    → 특이도 (0,1,1)  ← 이쪽이 이긴다
   접두어가 없으면 위쪽의 공통 규칙이 이겨서 **색이 하나도 적용되지 않는다.**
   실제로 적용 안 되고 있던 것을 헤드리스 브라우저 스크린샷으로 확인해 고쳤다.   */
input[type=range].rng-temp::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,#93c5fd 0%,#cbd5e1 42%,#fdba74 74%,#dc2626 100%) }
input[type=range].rng-temp::-moz-range-track{
  background:linear-gradient(90deg,#93c5fd 0%,#cbd5e1 42%,#fdba74 74%,#dc2626 100%) }
input[type=range].rng-temp::-webkit-slider-thumb{ background:#b91c1c } input[type=range].rng-temp::-moz-range-thumb{ background:#b91c1c }

input[type=range].rng-vol::-webkit-slider-runnable-track{ background:linear-gradient(90deg,#dbeafe,#1d4ed8) }
input[type=range].rng-vol::-moz-range-track{ background:linear-gradient(90deg,#dbeafe,#1d4ed8) }
input[type=range].rng-vol::-webkit-slider-thumb{ background:#1d4ed8 } input[type=range].rng-vol::-moz-range-thumb{ background:#1d4ed8 }

input[type=range].rng-count::-webkit-slider-runnable-track{ background:linear-gradient(90deg,#ede9fe,#6d28d9) }
input[type=range].rng-count::-moz-range-track{ background:linear-gradient(90deg,#ede9fe,#6d28d9) }
input[type=range].rng-count::-webkit-slider-thumb{ background:#6d28d9 } input[type=range].rng-count::-moz-range-thumb{ background:#6d28d9 }

input[type=range].rng-time::-webkit-slider-runnable-track{ background:linear-gradient(90deg,#dcfce7,#15803d) }
input[type=range].rng-time::-moz-range-track{ background:linear-gradient(90deg,#dcfce7,#15803d) }
input[type=range].rng-time::-webkit-slider-thumb{ background:#15803d } input[type=range].rng-time::-moz-range-thumb{ background:#15803d }

/* ---------- 범례 (색만으로 정보를 전달하지 않기 위한 필수 장치) ---------- */
.legend{ display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--t2) }
.legend .item{ display:flex; align-items:center; gap:6px }
.legend .swatch{ width:12px; height:12px; border-radius:50%; flex:none;
                 border:1px solid rgba(0,0,0,.22) }
.legend .swatch.sq{ border-radius:3px }
.legend .swatch.tri{ border-radius:0; background:none!important; border:none;
                     width:0;height:0; border-left:6px solid transparent;
                     border-right:6px solid transparent; border-bottom:11px solid currentColor }

/* ---------- 키보드 포커스 표시 (마우스 클릭 때는 안 나옴) ---------- */
:focus-visible{ outline:3px solid rgba(37,99,235,.55); outline-offset:2px; border-radius:6px }

/* ---------- 애니메이션 최소화를 켠 사용자 존중 ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important;
     transition-duration:.001ms!important; scroll-behavior:auto!important }
}