/* ═══════════════════════════════════════════════════════════════════════
한창기전㈜ · HANCHANG INSTRUMENTS — Design System
Water Quality & Measurement Instruments · www.hme93.com
Global entry point. Link THIS one file:
Everything below is reached through @import (tokens → base → components).
Retune the look in tokens/ ; see readme.md for the full guide.
═══════════════════════════════════════════════════════════════════════ */
/* — Webfonts first (must precede all other rules) —
Barlow Condensed : Latin display, model codes, instrument readouts
IBM Plex Mono : spec values, part numbers, technical codes
Pretendard : Korean + Latin body/heading (substitutes the catalog's
original Korean face — see readme.md · flagged) */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");
/* — Tokens — */
/* ==== tokens/colors.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
COLORS — a mono steel-blue system on a technical paper ground.
The scheme is single-accent by design: steel is the only decorative
colour. The brand red lives ONLY inside the HME mark (see --color-brand-red),
never as UI accent. Each role carries a 100–900 tonal ramp generated in
OKLCH on one shared lightness scale, so the same step of any ramp reads at
the same visual weight. Light steps (100–300) = tinted fills / hairlines,
500 = base, 700–900 = ink on tints & pressed states.
═══════════════════════════════════════════════════════════════════════ */
:root {
/* ── Ground & ink ─────────────────────────────────────────── */
--color-bg: #f2f2f3; /* technical paper ground */
--color-surface: #e9e9ea; /* faint raised fill (used rarely) */
--color-text: #1d1f20; /* primary ink */
--color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
--color-line: var(--color-divider);
--color-muted: color-mix(in srgb, #1d1f20 55%, transparent);
/* ── Steel accent — the system's one decorative colour ────── */
--color-accent: #5980a6;
--color-accent-100:#eef6ff;
--color-accent-200:#d6ebff;
--color-accent-300:#b5d9fd;
--color-accent-400:#94bce3;
--color-accent-500:#749dc4;
--color-accent-600:#597ea3;
--color-accent-700:#416180;
--color-accent-800:#2c455d;
--color-accent-900:#1d2d3d; /* deep steel field (section grounds) */
/* accent-2 kept mirrored so any dual-accent usage resolves (mono system) */
--color-accent-2:#728fab;
--color-accent-2-100:#eef6ff; --color-accent-2-200:#d6ebff; --color-accent-2-300:#bdd8f2;
--color-accent-2-400:#9ebbd8; --color-accent-2-500:#7e9cb8; --color-accent-2-600:#627d98;
--color-accent-2-700:#486077; --color-accent-2-800:#314457; --color-accent-2-900:#1f2d3a;
/* ── Neutral ramp ─────────────────────────────────────────── */
--color-neutral-100:#f5f5f8; --color-neutral-200:#e7e7ea; --color-neutral-300:#d4d4d7;
--color-neutral-400:#b7b7ba; --color-neutral-500:#98989b; --color-neutral-600:#7a7a7d;
--color-neutral-700:#5d5d60; --color-neutral-800:#424244; --color-neutral-900:#2b2b2d;
/* ── Brand mark constant ──────────────────────────────────── */
/* The HME oval is this red. Use it ONLY inside the logo lockup or a rare
hard-alert; it is NOT a UI accent. */
--color-brand-red:#e30613;
/* ── Status (used sparingly, chrome only) ─────────────────── */
--color-ok: #1f8a5b;
--color-warn: #b8791d;
--color-alert:#c23b34;
/* ══ Semantic aliases ═════════════════════════════════════ */
--surface-page: var(--color-bg);
--surface-field: var(--color-accent-900); /* reversed steel section ground */
--surface-tint: var(--color-accent-100); /* faint steel wash */
--text-body: var(--color-text);
--text-muted: var(--color-muted);
--text-accent: var(--color-accent-700); /* accent at body sizes (contrast) */
--text-on-accent: var(--color-bg);
--text-on-field: var(--color-bg);
--border-hairline: var(--color-divider);
--border-strong: color-mix(in srgb, var(--color-text) 45%, transparent);
}
/* ==== tokens/typography.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
TYPOGRAPHY — three roles, each with a job.
· --font-display Barlow Condensed — Latin display, kickers, model codes,
instrument readouts (big numerals). Condensed & technical.
· --font-body Pretendard — Korean + Latin running text & headings.
· --font-mono IBM Plex Mono — spec values, part numbers, codes.
Faces are loaded in styles.css. Pretendard substitutes the catalog's
original Korean typeface (flagged in readme.md — supply the licensed face
to swap it here).
═══════════════════════════════════════════════════════════════════════ */
:root {
--font-display: "Barlow Condensed", "Pretendard", system-ui, sans-serif;
--font-heading: "Pretendard", "Barlow Condensed", system-ui, sans-serif;
--font-body: "Pretendard", "Barlow", system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
--font-heading-weight: 600;
/* Type scale (px) */
--text-hero: 54px;
--text-h1: 42px;
--text-h2: 32px;
--text-h3: 25px;
--text-h4: 20px;
--text-h5: 16px;
--text-body-lg: 17px;
--text-base: 15px;
--text-sm: 13px;
--text-xs: 11px;
--text-2xs: 10px;
/* Line height */
--leading-tight: 1.14; /* Latin display */
--leading-head: 1.24; /* Korean headings */
--leading-snug: 1.4;
--leading-body: 1.62; /* Korean running text */
/* Tracking */
--tracking-label: 0.12em; /* uppercase kickers */
--tracking-code: 0.04em; /* model codes / mono */
--tracking-tight: -0.015em; /* Latin display only */
}
/* ==== tokens/spacing.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
SPACING, RADIUS & GRID — a 0.85× density scale (baked in) on a square
4px radius. Prefer these variables over raw px. The system is a modular
grid: equal cells, strong horizontal & vertical rhythm.
═══════════════════════════════════════════════════════════════════════ */
:root {
--space-1: 3.4px;
--space-2: 6.8px;
--space-3: 10.2px;
--space-4: 13.6px;
--space-5: 17px;
--space-6: 20.4px;
--space-8: 27.2px;
--space-10: 34px;
--space-12: 40.8px;
--space-16: 54.4px;
--space-20: 68px;
--space-24: 81.6px;
--space-32: 108.8px;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 7px;
/* Layout */
--container: 1200px;
--container-wide: 1360px;
--container-text: 760px;
--gutter: var(--space-6);
--edge: var(--space-8); /* page edge padding */
}
/* ==== tokens/elevation.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
ELEVATION — this is a wireframe system; it prefers hairline frames and
whitespace to shadow. Use these soft ink-tinted shadows only for objects
that genuinely float (dialogs, sticky nav on scroll, menus).
═══════════════════════════════════════════════════════════════════════ */
:root {
--shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
--shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
--shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}
/* — Base layer + component classes — */
/* ==== css/base.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
BASE — resets, base typography, links, the blueprint frame + registration
marks, the duotone image treatment, and layout utilities.
═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--surface-page);
color: var(--text-body);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* — Headings: Korean in Pretendard; reach for .display for Latin display — */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: var(--font-heading-weight);
line-height: var(--leading-head);
letter-spacing: -0.01em;
margin: 0 0 var(--space-3);
color: var(--text-body);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
p { margin: 0 0 var(--space-3); text-wrap: pretty; }
a { color: var(--text-accent); text-decoration: none; text-underline-offset: 3px; transition: color .12s ease; }
a:hover { color: var(--color-accent-900); text-decoration: underline; }
strong, b { font-weight: 600; }
small { font-size: var(--text-sm); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
hr { height: 1px; border: 0; margin: var(--space-6) 0; background: var(--color-divider); }
::selection { background: color-mix(in srgb, var(--color-accent) 28%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* — Display + label helpers — */
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.mono { font-family: var(--font-mono); }
.kicker {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-xs);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-accent);
}
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--text-accent); }
.upper { text-transform: uppercase; letter-spacing: var(--tracking-label); }
.tabular { font-variant-numeric: tabular-nums; }
/* ── Blueprint frame — the wireframe object every card / figure / primary
button wears: square, hairline, with "+" registration marks.
Markup: …
*/
.blueprint {
position: relative;
border: 1px solid var(--color-divider);
border-radius: 0;
background: transparent;
}
.blueprint.duotone, .blueprint.is-plate { overflow: visible; }
.blueprint > .corner {
position: absolute; width: 11px; height: 11px;
color: color-mix(in srgb, var(--color-text) 55%, transparent);
pointer-events: none;
}
.blueprint > .corner::before,
.blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }
/* marks read light when the frame sits on a dark steel field */
.is-field .blueprint > .corner,
.blueprint.on-field > .corner { color: color-mix(in srgb, #fff 55%, transparent); }
/* ── Duotone — every content photograph goes through this: desaturated and
washed into the steel accent, like a screen print that re-colours with
the theme. Put the ![]()
inside a .duotone wrapper. */
.duotone { position: relative; overflow: hidden; }
.duotone > img { filter: grayscale(1) contrast(1.05); display: block; width: 100%; }
.duotone::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: var(--color-accent); mix-blend-mode: color;
}
.duotone.soft::after { opacity: .7; }
/* product cut-outs (transparent PNGs) should NOT be duotoned — they read as
real objects on the board. Use .product-shot instead. */
.product-shot { display: block; width: 100%; height: 100%; object-fit: contain; }
/* ── Dark steel field — reversed sections (dividers, hero grounds). Type and
marks flip to paper. */
.is-field {
background: var(--surface-field);
color: var(--text-on-field);
}
.is-field h1, .is-field h2, .is-field h3, .is-field h4, .is-field h5, .is-field h6 { color: var(--text-on-field); }
.is-field .kicker { color: var(--color-accent-300); }
.is-field .text-muted { color: color-mix(in srgb, #fff 60%, transparent); }
.is-field a { color: var(--color-accent-200); }
/* ══ Layout utilities ══ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--edge); }
.container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--edge); }
.container-text { width: 100%; max-width: var(--container-text); margin-inline: auto; padding-inline: var(--edge); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.grid { display: grid; gap: var(--gutter); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); }
.section { padding-block: var(--space-24); }
.section-sm { padding-block: var(--space-16); }
@media (max-width: 860px) {
.cols-4 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
}
/* ==== css/components.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
COMPONENTS — wireframe objects built from the tokens. Square corners,
hairline borders, registration marks. The primary button is the one solid
object on the board. Everything else stays a transparent line drawing.
═══════════════════════════════════════════════════════════════════════ */
/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
cursor: pointer; text-decoration: none; white-space: nowrap;
font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 1.2;
letter-spacing: .01em; color: var(--color-text);
background: transparent; border: 1px solid var(--color-divider); border-radius: 0;
padding: var(--space-3) var(--space-5);
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.btn svg { display: block; width: 16px; height: 16px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--text-on-accent); }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); border-color: var(--border-strong); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { border-color: transparent; color: var(--text-accent); padding-inline: var(--space-2); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 40px; height: 40px; padding: 0; }
.btn-block { width: 100%; }
.btn-lg { font-size: 15px; padding: var(--space-4) var(--space-8); }
.btn-sm { font-size: 13px; padding: var(--space-2) var(--space-4); }
/* on a dark steel field */
.is-field .btn { color: var(--text-on-field); border-color: color-mix(in srgb, #fff 30%, transparent); }
.is-field .btn-primary { background: var(--color-bg); border-color: var(--color-bg); color: var(--color-accent-900); }
.is-field .btn-primary:hover { background: var(--color-accent-200); border-color: var(--color-accent-200); }
/* ── Tags / badges ───────────────────────────────────────────── */
.tag {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-display); font-weight: 600;
font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
padding: 3px 9px; border-radius: 0;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-divider); color: var(--text-muted); }
/* certification chip — outlined, monospace, technical */
.tag-cert {
border: 1px solid var(--color-accent); color: var(--text-accent);
font-family: var(--font-mono); font-weight: 500; letter-spacing: var(--tracking-code);
text-transform: none; padding: 3px 8px;
}
/* measurement parameter chip (pH, DO, SS …) */
.tag-param {
background: var(--color-accent-900); color: var(--color-bg);
font-family: var(--font-mono); font-weight: 500; letter-spacing: .02em; text-transform: none;
}
.is-field .tag-accent { background: color-mix(in srgb, #fff 14%, transparent); color: var(--color-accent-100); }
/* ── Model code — instrument part number as a typographic chip ── */
.model-code {
font-family: var(--font-mono); font-weight: 500; letter-spacing: var(--tracking-code);
font-size: 13px; color: var(--text-accent);
}
/* ── Cards ───────────────────────────────────────────────────── */
.card {
position: relative; display: flex; flex-direction: column; gap: var(--space-3);
padding: var(--space-6); border: 1px solid var(--color-divider); border-radius: 0;
background: transparent;
}
.card-kicker { font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-accent); }
.card-title { font-family: var(--font-heading); font-weight: 600; font-size: 18px; line-height: 1.25; }
.card-body { margin: 0; font-size: 13px; color: var(--text-muted); flex: 1; }
.card-meta { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-muted); }
.elev-sm { box-shadow: var(--shadow-sm); } .elev-md { box-shadow: var(--shadow-md); } .elev-lg { box-shadow: var(--shadow-lg); }
/* ── Product card — image plate + model + name + parameter tags ── */
.product-card {
position: relative; display: flex; flex-direction: column;
border: 1px solid var(--color-divider); background: transparent;
transition: border-color .14s ease, transform .14s ease;
}
.product-card:hover { border-color: var(--border-strong); }
.product-card .shot {
position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center;
padding: var(--space-6); border-bottom: 1px solid var(--color-divider);
background: #fff;
}
.product-card .shot img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(29,45,61,.14)); }
.product-card .body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.product-card .name { font-family: var(--font-heading); font-weight: 600; font-size: 16px; line-height: 1.3; }
.product-card .desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.product-card .params { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: var(--space-2); }
/* ── Figure — blueprint-framed, duotoned photograph with caption ── */
.figure { position: relative; }
.figure .frame { position: relative; border: 1px solid var(--color-divider); overflow: hidden; }
.figure figcaption {
display: flex; align-items: baseline; gap: var(--space-3);
font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-code);
color: var(--text-muted); margin-top: var(--space-3);
}
.figure figcaption .idx { color: var(--text-accent); }
/* ── Stat / spec highlight — big readout number + unit + label ── */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .val { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: var(--text-body); font-variant-numeric: tabular-nums; }
.stat .val .unit { font-size: 18px; color: var(--text-accent); margin-left: 4px; letter-spacing: 0; }
.stat .label { font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); font-family: var(--font-display); font-weight: 600; }
.is-field .stat .val { color: var(--color-bg); }
.is-field .stat .val .unit { color: var(--color-accent-300); }
/* ── Spec table — the 사양 data table ─────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); }
.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); vertical-align: top; }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
/* spec = 2-column label/value definition list, the catalog's core artifact */
.spec { width: 100%; border-collapse: collapse; border-top: 2px solid var(--color-accent); }
.spec caption { text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-accent); padding: var(--space-3) 0; }
.spec th {
width: 34%; text-align: left; vertical-align: top;
font-family: var(--font-body); font-weight: 500; font-size: 12.5px; color: var(--text-muted);
padding: var(--space-3) var(--space-4) var(--space-3) 0;
border-bottom: 1px solid var(--color-divider);
}
.spec td {
font-size: 13.5px; color: var(--text-body); padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-divider);
}
.spec td .mono, .spec td.num { font-family: var(--font-mono); font-size: 12.5px; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: none; }
/* ── Forms ───────────────────────────────────────────────────── */
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); font-weight: 500; }
.input {
width: 100%; min-height: 40px; padding: 8px 11px; font: inherit; font-size: 14px;
color: var(--color-text); caret-color: var(--color-accent);
background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: 0;
transition: border-color .12s ease;
}
.input::placeholder { color: color-mix(in srgb, var(--color-text) 38%, transparent); }
.input:hover { border-color: var(--border-strong); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 104px; resize: vertical; line-height: 1.5; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-divider); }
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); }
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* ── Navigation — the header bar ──────────────────────────────── */
.nav { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4) 0; }
.nav-brand { display: flex; align-items: center; gap: var(--space-3); margin-right: auto; }
.nav-brand img { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav a { color: var(--color-text); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text-accent); }
.is-field .nav a { color: color-mix(in srgb, #fff 85%, transparent); }
.is-field .nav a:hover, .is-field .nav a[aria-current="page"] { color: #fff; }
/* ── Dialog ──────────────────────────────────────────────────── */
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-6); background: color-mix(in srgb, var(--color-neutral-900) 52%, transparent); }
.dialog { width: min(460px, 100%); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); background: var(--color-bg); border: 1px solid var(--color-divider); box-shadow: var(--shadow-lg); }
.dialog-title { font-family: var(--font-heading); font-weight: 600; font-size: 21px; }
.dialog-body { font-size: 14px; color: var(--text-muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); }
/* ── Eyebrow rule — a labelled section marker ─────────────────── */
.eyebrow { display: flex; align-items: center; gap: var(--space-4); }
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--color-accent); flex: none; }
/* ── Instrument status — the TMS operating states ──────────────
정상 / 교정중 / 점검중 / 동작불량 / 통신불량. A square pip (never a
round "pill badge") plus a monospace label: the same vocabulary the
instrument's own display uses. Colour is chrome only — the label
carries the meaning, so it survives greyscale printing. */
.status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: var(--tracking-code); color: var(--text-muted); white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--color-neutral-400); }
.status-ok::before { background: var(--color-ok); }
.status-cal::before { background: var(--color-accent); }
.status-check::before { background: var(--color-warn); }
.status-fault::before { background: var(--color-alert); }
.status-offline::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--color-neutral-500); }
.status-ok { color: var(--color-ok); }
.status-check { color: var(--color-warn); }
.status-fault { color: var(--color-alert); }
/* live states blink at instrument cadence — 1s, no easing flourish */
.status-cal::before, .status-fault::before { animation: status-pip 1s steps(1, end) infinite; }
@keyframes status-pip { 50% { opacity: .28; } }
@media (prefers-reduced-motion: reduce) { .status-cal::before, .status-fault::before { animation: none; } }
.is-field .status { color: color-mix(in srgb, #fff 72%, transparent); }
/* ── Segmented control — the catalog's parameter / series switch ── */
.seg { display: inline-flex; border: 1px solid var(--color-divider); background: transparent; }
.seg-opt {
position: relative; display: inline-flex; align-items: center; justify-content: center;
padding: var(--space-2) var(--space-5); cursor: pointer;
font-family: var(--font-display); font-weight: 600; font-size: 12px;
letter-spacing: var(--tracking-label); text-transform: uppercase;
color: var(--text-muted); background: transparent; border: 0; border-left: 1px solid var(--color-divider);
transition: background .12s ease, color .12s ease;
}
.seg-opt:first-child { border-left: 0; }
.seg-opt:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--text-accent); }
.seg-opt[aria-selected="true"] { background: var(--color-accent); color: var(--text-on-accent); }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-opt input:checked ~ span, .seg-opt:has(input:checked) { background: var(--color-accent); color: var(--text-on-accent); }
.seg-opt input:focus-visible ~ span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* ── Tabs — flat underline, no chrome ─────────────────────────── */
.tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--color-divider); }
.tab {
padding: var(--space-3) 0; margin-bottom: -1px; cursor: pointer; text-decoration: none;
font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .04em;
color: var(--text-muted); border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--text-accent); }
.tab[aria-current="true"] { color: var(--color-text); border-bottom-color: var(--color-accent); }
/* ── Breadcrumbs ─────────────────────────────────────────────── */
.crumbs { display: flex; align-items: center; gap: var(--space-2); font-size: 12.5px; color: var(--text-muted); }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--text-accent); }
.crumbs .sep { color: var(--color-neutral-400); }
.crumbs [aria-current="page"] { font-family: var(--font-mono); letter-spacing: var(--tracking-code); color: var(--text-accent); }
/* ── Readout — a live measured value, as the instrument shows it ──
The one place a number gets display-scale type. Pairs a parameter
label, the value + unit, and a status line. */
.readout { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-5); border: 1px solid var(--color-divider); background: transparent; }
.readout .param { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-code); color: var(--text-accent); }
.readout .val { font-family: var(--font-display); font-weight: 600; font-size: 46px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--color-text); }
.readout .val .unit { font-size: 17px; margin-left: 5px; letter-spacing: 0; color: var(--text-muted); }
.readout .foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.is-field .readout { border-color: color-mix(in srgb, #fff 22%, transparent); }
.is-field .readout .val { color: var(--text-on-field); }
.is-field .readout .param { color: var(--color-accent-300); }
/* ── Note — a one-line aside (예비품·부대용품 같은 간단 언급) ───── */
.note { display: flex; gap: var(--space-3); font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }
.note::before { content: ""; width: 2px; flex: none; background: var(--color-accent); }
.note .k { font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-accent); }
/* ── Site footer ─────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--color-divider); padding: var(--space-10) 0 var(--space-8); font-size: 13px; }
.site-foot .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-10); }
.site-foot h6 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-accent); }
.site-foot a { display: block; color: var(--text-muted); text-decoration: none; padding: 3px 0; }
.site-foot a:hover { color: var(--text-accent); }
.site-foot .legal { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-code); color: var(--text-muted); }