/* ROBERIN wind chill calculator - The New severity scale layer (20260716d)
 * Dependency-free accessible visual: 실제 온도 vs 바람 반영 체감 온도 markers across
 * 쾌적→위험 zones + wind-drop gap bar. Renders a frame (zones/axis/legend) on empty
 * load (추가 필수 확인 #10); markers/gap hidden until computed. Scheme tokens for dark
 * (#8); no decorative left rail (#30); distinct marker shapes per compared category (#27).
 * Loaded after the base 20260716a tool CSS. */

.tn-wcc-scale {
  --wcc-z-comfort: #d7e7d2;
  --wcc-z-chilly: #dfe6ec;
  --wcc-z-cold: #c4d3e6;
  --wcc-z-verycold: #a9bfe0;
  --wcc-z-danger: #8fa8d6;
  display: grid;
  gap: 7px;
}

.tn-wcc-scale-track {
  position: relative;
  display: flex;
  height: 18px;
  border: 1px solid var(--wcc-line);
  overflow: visible; /* markers never clip at scale edges */
}

.tn-wcc-zone { height: 100%; }
.tn-wcc-zone--danger { flex: 0 0 38.462%; background: var(--wcc-z-danger); }
.tn-wcc-zone--verycold { flex: 0 0 23.077%; background: var(--wcc-z-verycold); }
.tn-wcc-zone--cold { flex: 0 0 15.385%; background: var(--wcc-z-cold); }
.tn-wcc-zone--chilly { flex: 0 0 15.385%; background: var(--wcc-z-chilly); }
.tn-wcc-zone--comfort { flex: 0 0 7.692%; background: var(--wcc-z-comfort); }

.tn-wcc-scale-gap {
  position: absolute;
  top: 50%;
  height: 4px;
  inline-size: 0;
  transform: translateY(-50%);
  background: var(--wcc-accent);
  opacity: 0.4;
  transition: left 0.25s ease, inline-size 0.25s ease;
}

.tn-wcc-scale-mark {
  position: absolute;
  top: 50%;
  left: 0;
  inline-size: 14px;
  block-size: 14px;
  margin: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left 0.25s ease;
}

.tn-wcc-scale-mark--actual {
  border: 2px solid var(--wcc-ink);
  background: var(--wcc-paper);
  z-index: 1;
}

.tn-wcc-scale-mark--feels {
  border: 2px solid var(--wcc-paper);
  background: var(--wcc-accent);
  box-shadow: 0 0 0 1px var(--wcc-line);
  z-index: 2;
}

.tn-wcc-scale.is-empty .tn-wcc-scale-mark,
.tn-wcc-scale.is-empty .tn-wcc-scale-gap {
  opacity: 0;
}

.tn-wcc-scale-axis {
  position: relative;
  height: 13px;
}

.tn-wcc-scale-axis span {
  position: absolute;
  transform: translateX(-50%);
  color: var(--wcc-muted);
  -webkit-text-fill-color: var(--wcc-muted);
  font: 600 10px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: nowrap;
}

.tn-wcc-scale-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.tn-wcc-scale-legend .tn-wcc-legend {
  display: inline-flex;
  align-items: center;
  color: var(--wcc-muted);
  -webkit-text-fill-color: var(--wcc-muted);
  font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.tn-wcc-scale-legend .tn-wcc-legend::before {
  content: "";
  inline-size: 12px;
  block-size: 12px;
  margin-inline-end: 6px;
  border-radius: 50%;
}

.tn-wcc-scale-legend .tn-wcc-legend--actual::before {
  border: 2px solid var(--wcc-ink);
  background: var(--wcc-paper);
}

.tn-wcc-scale-legend .tn-wcc-legend--feels::before {
  border: 2px solid var(--wcc-paper);
  background: var(--wcc-accent);
  box-shadow: 0 0 0 1px var(--wcc-line);
}

@media (prefers-reduced-motion: reduce) {
  .tn-wcc-scale-mark,
  .tn-wcc-scale-gap {
    transition: none;
  }
}

/* ---- Dark / inverse / auto-dark zone washes (#8) ---- */
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-d="dark"], [data-scheme="auto"][data-l="dark"]):not([data-scheme="light"]) .tn-wcc-scale,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-wcc-scale,
html[data-scheme="inverse"] body:not([data-scheme="light"]) .tn-wcc-scale {
  --wcc-z-comfort: #33402f;
  --wcc-z-chilly: #2f3945;
  --wcc-z-cold: #35435a;
  --wcc-z-verycold: #3c4f6e;
  --wcc-z-danger: #445a86;
}

@media (prefers-color-scheme: dark) {
  body[data-scheme="auto"]:not([data-scheme="light"]) .tn-wcc-scale {
    --wcc-z-comfort: #33402f;
    --wcc-z-chilly: #2f3945;
    --wcc-z-cold: #35435a;
    --wcc-z-verycold: #3c4f6e;
    --wcc-z-danger: #445a86;
  }
}