/*
 * 러닝 도구(tools.php) 전용 스타일 — design.css 뒤에 싣는다.
 * 원본: web/design/tools.html 의 <style>. 시안을 고치면 이 파일도 같이 옮길 것.
 * PHP 이관 추가분(시안의 인라인 style 을 옮긴 것)은 맨 아래에 모았다.
 */
    /* ── 러닝 도구 전용 ─────────────────────────────────────────────── */
    .page-head { padding: calc(var(--header-h) + 40px) 0 0; }
    .crumb { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-3); margin-bottom: 12px; }
    .crumb a:hover { color: var(--text); }
    .page-head h1 { font-size: 40px; line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; }
    .page-head p { color: var(--text-2); margin-top: 8px; }
    .tool-seg { margin-top: 24px; }
    .tool-seg button i { font-size: 16px; vertical-align: -2px; margin-right: 2px; }

    .tool-area { padding-block: 24px 0; }
    .panel-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px; }
    .panel-lead { font-size: 15px; color: var(--text-2); margin-bottom: 16px; }

    /* 계산기 — 메인 ⑤ 와 같은 모양 (main.html <style> 에서 옮김) */
    .calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .calc-grid > * { min-width: 0; }
    .calc-form, .calc-result { padding: 28px; border-radius: var(--radius-lg); }
    .calc-form h3, .calc-result h3 { font-size: 16px; font-weight: 700; color: var(--text-2); margin-bottom: 16px; }
    .calc-form .field + .field { margin-top: 20px; }
    .calc-form hr { margin: 24px 0 20px; border: 0; border-top: 1px solid var(--border); }
    .time-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .time-inputs.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .time-inputs label { position: relative; }
    .time-inputs .input { padding-right: 36px; text-align: right; }
    .time-inputs em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 14px; color: var(--text-3); pointer-events: none; }
    .unit-input { position: relative; }
    .unit-input .input { padding-right: 56px; text-align: right; }
    .unit-input em { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 14px; color: var(--text-3); pointer-events: none; }
    .calc-big { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
    .calc-big small { display: block; font-size: 13px; color: var(--text-2); }
    .calc-big strong { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
    .calc-big .unit { font-size: 16px; color: var(--text-2); font-weight: 600; margin-left: 2px; }
    .calc-big .sub strong { font-size: 28px; }
    .pred { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
    .pred div { background: var(--bg-2); border-radius: var(--radius-md); padding: 12px; min-width: 0; }
    .pred small { display: block; font-size: 12px; color: var(--text-2); }
    .pred strong { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
    .pred.is-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .calc-result .btn { margin-top: 20px; }
    .calc-note { margin-top: 14px; font-size: 13px; color: var(--text-3); line-height: 1.6; }

    /* 스플릿 표 — 균등 페이스 기준 누적 기록 */
    .splits-wrap { margin-top: 20px; max-height: 280px; overflow: auto; border-radius: var(--radius-md); background: var(--bg-2); }
    .splits { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
    .splits th, .splits td { padding: 9px 14px; text-align: right; }
    .splits th:first-child, .splits td:first-child { text-align: left; }
    .splits thead th { position: sticky; top: 0; background: var(--bg-2); font-size: 12px; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--border); }
    .splits tbody tr + tr td { border-top: 1px solid var(--border); }
    .splits tbody tr:last-child td { color: var(--primary); font-weight: 700; }

    /* 훈련 페이스 행 */
    .zones { display: grid; gap: 8px; margin-top: 20px; }
    .zone {
      display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px;
      padding: 14px; border-radius: var(--radius-md); background: var(--bg-2);
    }
    .zone > i { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tint); color: var(--primary); font-size: 20px; }
    .zone-name { min-width: 0; }
    .zone-name strong { font-size: 15px; }
    .zone-name small { display: block; font-size: 13px; color: var(--text-2); }
    .zone-pace { text-align: right; white-space: nowrap; }
    .zone-pace strong { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
    .zone-pace span { font-size: 12px; color: var(--text-2); margin-left: 2px; }
    .zone-meta { grid-column: 2 / 4; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .zone-meta .bar { flex: 1; min-width: 80px; }
    .zone-meta .tag { background: var(--surface-2); }
    .vdot-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--tint); color: var(--primary); font-weight: 700; }
    .vdot-chip strong { font-size: 20px; font-variant-numeric: tabular-nums; }

    /* 설명 · 다음 단계 */
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .explain { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
    .explain > i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--tint); color: var(--primary); font-size: 22px; }
    .explain h3 { font-size: 18px; font-weight: 700; }
    .explain p, .explain li { font-size: 15px; color: var(--text-2); line-height: 1.7; }
    .explain ul { display: grid; gap: 6px; }
    .explain li { display: flex; gap: 8px; }
    .explain li i { flex-shrink: 0; color: var(--primary); margin-top: 4px; }
    .explain b { color: var(--text); }
    .explain code { font-size: 13px; color: var(--text); background: var(--bg-2); border-radius: 6px; padding: 1px 6px; }
    .next { display: flex; align-items: center; gap: 16px; padding: 24px; }
    .next > i { flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--tint); color: var(--primary); font-size: 26px; }
    .next div { flex: 1; min-width: 0; }
    .next strong { display: block; font-size: 18px; }
    .next p { font-size: 14px; color: var(--text-2); margin-top: 2px; }
    .next .go { font-size: 22px; color: var(--text-3); }
    a.next:hover .go { color: var(--primary); }

    @media (max-width: 1024px) {
      .calc-grid { grid-template-columns: minmax(0, 1fr); }
      .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .explain:last-child { grid-column: 1 / -1; }
    }
    @media (max-width: 768px) {
      .page-head { padding-top: calc(var(--header-h) + 28px); }
      .page-head h1 { font-size: 30px; }
      .calc-form, .calc-result { padding: 20px; }
      .calc-big strong { font-size: 36px; }
      .calc-big .sub strong { font-size: 24px; }
      .pred, .pred.is-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 640px) {
      .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 560px) {
      /* 도구 탭 4개 — 가로 스크롤로 숨기면 뒤의 두 도구를 못 찾는다. 2×2 로 모두 보이게 */
      .tool-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 20px; }
      .tool-seg button { min-width: 0; padding: 0 8px; font-size: 14px; }
    }
    @media (max-width: 480px) {
      /* 거리 탭 5개가 한 줄에 들어오도록 칸을 균등하게 (main.html 390px 수정과 같은 처리) */
      .calc-form .seg { display: flex; width: 100%; }
      .calc-form .seg button { flex: 1; min-width: 0; padding: 0 4px; font-size: 13px; }
      .zone { grid-template-columns: 40px minmax(0, 1fr); }
      .zone-pace { grid-column: 2; text-align: left; }
      .zone > i { grid-row: 1 / 2; }
      .zone-meta { grid-column: 1 / -1; }
      .next { padding: 20px; }
    }

/* ── PHP 이관 추가분 (시안 인라인 style) ─────────────────────────── */
.zones-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.explain .explain-note { font-size: 14px; }
#about { padding-top: 88px; }
.next-steps { padding-bottom: 96px; }