/* ===========================================================
   TAEKWANG GLASS · Shared design system
   Editorial premium · cinematic glass aesthetic
   =========================================================== */

:root {
  /* color */
  --paper: #f6f3ec;
  --paper-2: #ede8dd;
  --paper-3: #e1dbcc;
  --ink: #14181f;
  --ink-2: #2a2f38;
  --ink-3: #4a5260;
  --mute: #5f646d;        /* 2026-08-06: #7a7f88 은 paper-2 위에서 3.29:1.
                             16px 본문 설명문에도 쓰이는 색이라 4.87:1 로 낮췄습니다. */
  --line: rgba(20,24,31,0.12);
  --line-2: rgba(20,24,31,0.06);
  --night: #0d1117;
  --night-2: #161b22;
  --night-3: #1f2733;
  --night-line: rgba(246,243,236,0.13);
  --night-line-2: rgba(246,243,236,0.06);
  --night-mute: rgba(246,243,236,0.55);
  --gold: #9f7e46;        /* 2026-08-06: #c4a26b 은 밝은 배경 위 2.17:1 로 큰 글자 AA(3:1)도 미달.
                             제목의 이탤릭 강조가 9개 페이지에 걸려 있어 3.17:1 로 낮췄습니다.
                             어두운 배경 위에서는 5.17:1 로 여전히 통과합니다. */
  --gold-soft: #d4b783;
  --gold-deep: #7d6540;   /* 2026-08-06: #9a7d50 은 밝은 배경 위 작은 글자에서 3.17:1 (AA 4.5 미달).
                             태그·라벨·표 머리행에 널리 쓰여 4.5:1 을 넘도록 낮췄습니다. */
  /* 밝은 배경 위 작은 글자 전용 — #c4a26b 는 대비 2.17:1 로 AA 미달 */
  --gold-text: #7d6540;
  --sunset: #d49966;

  /* type
     ★ 세 글꼴 다 외부에서 받습니다 — Pretendard(jsDelivr) · 나머지(Google Fonts).
       넷 다 `font-display: swap` 이라 오기 전 몇 초 동안은 아래 대체 글꼴로 그려집니다.
       (2026-08-08 · 디자인 8회차에 실제 CSS 바이트를 받아 확인. FOIT 아님)

     'Apple SD Gothic Neo' 를 serif 계열에서 뺀 이유 (2026-08-08 · 8회차)
       이건 **산세리프**입니다. serif 스택 안에 있으면 글꼴 매칭이 글자 단위로 도는
       탓에, Cormorant·Noto Serif KR 이 아직 안 왔거나 Google Fonts 가 죽은 동안
       **라틴 표시 활자까지** 이 산세리프로 그려집니다 — macOS·iOS 는 이 글꼴이
       항상 있으므로 `serif` 제네릭에 닿기 전에 여기서 멈춥니다.
       즉 히어로 "TAEKWANG", 모든 이탤릭 강조, `.sec-h` 영문이 세리프가 아니게 됩니다.
       빼도 **한글은 달라지지 않습니다** — `serif` 제네릭에서 한글이 없으면 OS 가
       글자 단위로 같은 글꼴(Apple SD Gothic Neo / 바탕 / Noto Serif CJK)로 떨어집니다.
       저장소의 다른 정의 셋(`jmw.css` · `404.html` · `video/film.css`)은 이미
       이 형태(`… 'Noto Serif KR', serif`)입니다. tk.css 만 달랐습니다.
       ※ `*-cn.html` 8개는 자기 `<style>` 에 옛 형태가 남아 있습니다(다른 트랙 담당 파일). */
  --serif: 'Cormorant Garamond', 'Noto Serif KR', serif;
  --serif-ko: 'Noto Serif KR', serif;
  --sans: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* 고정 헤더(.topbar.solid) 아래에 무언가를 붙일 때 쓰는 값 — 실측 헤더 높이입니다.
     position: sticky 의 top 은 반드시 이 값으로 잡으세요. 0 으로 두면 헤더(z-index 90)
     뒤로 들어가 아예 안 보입니다(2026-08-08 · 7회차 실측).
     헤더 높이는 폭이 아니라 **포인터 종류**에도 걸립니다 — 터치에서는 언어 전환
     버튼이 44px 을 채우느라 35 → 51px 로 커집니다. 아래 두 미디어쿼리가 그것입니다. */
  --head-h: 76px;
}
@media (pointer: coarse) { :root { --head-h: 88px; } }
/* ≤768 은 자체 헤더 축소 규칙이 따로 있어 다시 78px 입니다. 순서가 중요합니다 —
   위 coarse 규칙과 특이도가 같아 뒤에 오는 이쪽이 이깁니다. */
@media (max-width: 768px) { :root { --head-h: 78px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* === Top Bar (transparent over dark hero / solid on subpages) === */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 40px;
  padding: 28px 48px;
  color: #fff;
  transition: background .4s ease, color .4s ease, padding .3s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
/* `[data-mode="solid"]` 를 함께 잡는 이유 (2026-08-08 · 7회차)
   `.solid` 는 tk.js 의 initTopbar() 가 붙입니다. 그런데 `pages/catalog(-cn).html` 은
   tk.js 를 로드하지 않아(CLAUDE.md 참조) 클래스가 영원히 안 붙었고, 헤더가
   투명 + `color: #fff` 상태로 남아 **흰 글자가 paper(#f6f3ec) 위에 1.06:1** 로
   찍히고 있었습니다 — 로고와 MENU 가 사실상 안 보입니다.
   JS 없이 마크업만으로 결정되도록 선택자를 하나 더 뒀습니다. tk.js 가 도는
   페이지에서는 같은 클래스를 즉시 붙이므로 결과가 동일합니다. */
.topbar.solid,
.topbar[data-mode="solid"] {
  background: rgba(246,243,236,0.95);
  backdrop-filter: blur(20px) saturate(120%);
  color: var(--ink);
  border-bottom-color: var(--line-2);
  padding: 18px 48px;
}

.tk-logo { display: flex; align-items: center; gap: 14px; line-height: 1; }
.tk-logo .mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
}
/* TK 마크는 면(fill)이라 예전 선 마크보다 무겁게 보입니다.
   38px 박스를 꽉 채우지 않고 79%(=30px)로 둬야 워드마크와 무게가 맞습니다. */
.tk-logo .mark svg { width: 79%; height: auto; display: block; }
.tk-logo .name {
  font-family: var(--serif);
  font-weight: 500; font-size: 22px;
  letter-spacing: 0.18em; line-height: 1;
}
.tk-logo .sub {
  font-family: var(--serif); font-weight: 500;
  font-size: 12px; letter-spacing: 0.32em;
  color: currentColor; opacity: 0.7;
  display: block; margin-top: 5px;
}

.menu-btn {
  display: flex; align-items: center; gap: 22px;
  background: transparent; border: 0; color: inherit;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  padding: 8px 4px; cursor: pointer;
}
.menu-btn .lines { display: flex; flex-direction: column; gap: 6px; }
.menu-btn .lines span {
  width: 28px; height: 1px; background: currentColor;
  transition: transform .25s ease, opacity .15s;
}
.menu-btn .lines span:nth-child(2) { width: 20px; }
.menu-btn:hover .lines span:nth-child(2) { width: 28px; }

.lang-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.15em;
  padding: 7px 10px;
  border: 1px solid currentColor;
  opacity: 0.85;
}
.lang-pill button {
  background: transparent; border: 0; color: inherit; cursor: pointer;
  padding: 0 4px; font: inherit; opacity: 0.5;
}
.lang-pill button.active { opacity: 1; }

/* === Menu drawer (fullscreen overlay) === */
.drawer {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(13,17,23,0.98);
  color: var(--paper);
  display: none;
  flex-direction: column;
  padding: 28px 48px 64px;
  overflow: auto;
  animation: fadeIn .35s ease;
}
.drawer.open { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.drawer-top { display: flex; align-items: center; justify-content: space-between; }
.drawer-close {
  background: transparent; border: 0; color: inherit;
  font-size: 28px; cursor: pointer; line-height: 1;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(246,243,236,0.25);
  border-radius: 50%; transition: background .15s;
}
.drawer-close:hover { background: rgba(246,243,236,0.08); }

.drawer-grid {
  flex: 1;
  display: grid; grid-template-columns: 0.6fr 1.4fr 1fr; gap: 80px;
  margin-top: 80px;
}
.drawer-aside {
  font-family: var(--serif); font-style: italic;
  font-size: 20px; color: rgba(246,243,236,0.55);
  line-height: 1.55;
}
.drawer-aside .dlbl {
  font-family: var(--sans); font-style: normal; font-weight: 600;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 18px 0;
}
.drawer-nav {
  list-style: none; padding: 0; margin: 0;
}
.drawer-nav > li {
  border-top: 1px solid rgba(246,243,236,0.13);
  padding: 22px 0 14px 0;
}
.drawer-nav > li:last-child { border-bottom: 1px solid rgba(246,243,236,0.13); }
.drawer-nav .link {
  display: flex; align-items: baseline; gap: 24px;
  font-family: var(--serif); font-weight: 400;
  font-size: 56px; line-height: 1; letter-spacing: -0.01em;
  cursor: pointer; transition: color .2s, padding-left .25s;
}
.drawer-nav .link .num {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: var(--gold); opacity: 0.7; letter-spacing: 0.15em;
  flex: 0 0 36px;
}
.drawer-nav .link .ko {
  font-family: var(--serif-ko); font-size: 28px; color: rgba(246,243,236,0.65);
  letter-spacing: -0.01em; line-height: 1;
}
.drawer-nav .link:hover { color: var(--gold); padding-left: 12px; }
.drawer-nav .link:hover .ko { color: var(--paper); }
.drawer-nav .sub {
  display: flex; flex-wrap: wrap; gap: 4px 24px;
  margin-top: 14px; padding-left: 60px;
  font-size: 13px; color: rgba(246,243,236,0.6);
}
.drawer-nav .sub span { cursor: pointer; padding: 2px 0; transition: color .15s; }
.drawer-nav .sub span:hover { color: var(--gold-soft); }

.drawer-contact {
  font-size: 13px; color: rgba(246,243,236,0.7); line-height: 1.8;
}
.drawer-contact .dlbl {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin: 0 0 18px 0;
}
.drawer-contact .num {
  font-family: var(--serif); font-size: 34px; color: var(--paper);
  font-weight: 400; letter-spacing: 0.02em;
  margin: 4px 0 24px 0;
}
.drawer-contact .addr { font-family: var(--serif-ko); line-height: 1.7; }

/* === Generic subpage chrome === */
.subpage-hero {
  position: relative;
  padding: 220px 64px 100px 64px;
  background: var(--ink); color: var(--paper);
  overflow: hidden;
  min-height: 480px;
  display: flex; flex-direction: column; justify-content: end;
}
.subpage-hero .bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.4;
  filter: contrast(1.05) saturate(0.85);
}
.subpage-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,17,23,0.85) 0%, rgba(13,17,23,0.5) 50%, var(--ink) 100%);
}
.subpage-hero > * { position: relative; z-index: 1; }
.crumbs {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(246,243,236,0.65);
  display: flex; gap: 14px; margin-bottom: 28px;
  align-items: center;
}
.crumbs .sep { opacity: 0.4; }
.crumbs .here { color: var(--gold-soft); }
.subpage-hero h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: 108px; line-height: 0.92; letter-spacing: -0.025em;
  margin: 0 0 14px 0;
}
/* 국문 디스플레이 부제는 사이트 전체가 32px / line-height 1.2 입니다
   (.sec-h .ko, .tech-banner h1 .ko, .product-hero h1 .ko).
   여기만 30px 이었고 line-height 도 h1 의 0.92 를 상속해, 390px 에서 3줄이
   27.6px 간격으로 붙었습니다. 2026-08-07 통일. */
.subpage-hero h1 .ko {
  display: block; font-family: var(--serif-ko); font-weight: 300;
  font-size: 32px; letter-spacing: -0.02em; color: rgba(246,243,236,0.7);
  margin-top: 18px; line-height: 1.2;
}
.subpage-hero h1 em { font-style: italic; color: var(--gold-soft); }

.subnav {
  /* top 은 0 이 아니라 헤더 높이입니다 — .topbar 가 z-index 90 으로 위에 떠 있어
     0 으로 두면 붙는 순간 통째로 헤더 뒤에 숨습니다. */
  position: sticky; top: var(--head-h); z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line-2);
}
.subnav-inner {
  display: flex; gap: 0; padding: 0 64px;
}
.subnav a {
  padding: 20px 24px;
  font-size: 14px; font-weight: 500; color: var(--mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: flex; align-items: center; gap: 8px;
  transition: color .15s, border-color .15s;
}
.subnav a .num { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.subnav a:hover { color: var(--ink); }
.subnav a.active { color: var(--ink); border-color: var(--gold); }
.subnav a.active .num { color: var(--gold-deep); }   /* --gold 는 11px 에서 3.42:1 */

/* --- 페이지 <style> 안에 있는 sticky 들의 top 보정 (2026-08-08 · 디자인 7회차) ---
   `pages/tech-status(-cn).html` 의 `.filter-bar` 와 `pages/contact(-cn).html` 의
   `.support-tabs` 는 둘 다 `top: 0` 입니다. overflow-x: clip 으로 sticky 가 살아난
   지금, 0 은 곧 **고정 헤더(z-index 90) 뒤** 라는 뜻입니다.
   ★ 왜 그 페이지가 아니라 여기서 고치나 — 그 네 파일은 다른 트랙이 동시에
     작업 중이라 이번 회차에 손대지 않기로 했습니다. 나중에 페이지 쪽을
     `top: var(--head-h)` 로 고치면 이 블록은 지워도 됩니다.
   ★ 선택자에 `body` 를 붙인 이유 — 페이지 <style> 이 tk.css 보다 **뒤에** 오므로
     같은 특이도(0,1,0)로는 집니다. (0,1,1)로 올려야 이깁니다. */
body .filter-bar,
body .support-tabs { top: var(--head-h); }

/* --- 폰에서는 붙이지 않는 두 개 (2026-08-08 · 디자인 7회차 실측) ---
   sticky 바는 **붙어 있는 내내 화면을 먹습니다.** 390×844 에서 헤더 78 을 더한 값:
     .subnav          59 → 137px = 16%   ← 붙임
     .support-tabs    49 → 127px = 15%   ← 붙임
     .plant-switch    68 → 146px = 17%   ← 붙임
     .catalog-toolbar 135 → 213px = 25%  ← 안 붙임
     .filter-bar      235 → 313px = 37%  ← 안 붙임 (칩 6개가 4줄로 접힘)
   기준은 '헤더 포함 20%'. 넘는 둘은 폰에서 화면의 1/4~1/3 을 영구히 차지해
   본문이 그만큼 사라집니다 — 붙기 전(=이번 회차 전) 동작이 더 나았습니다.
   810 에서는 각각 117 / 70px 이라 문제가 없어 그대로 붙습니다. */
@media (max-width: 768px) {
  /* static 이 아니라 relative + top:auto 인 이유 — 두 요소 다 `z-index: 50` 을 갖고
     있어 static 으로 만들면 쌓임 맥락이 사라집니다. relative 는 흐름 위치가
     같으면서 z-index 를 유지합니다. */
  body .filter-bar,
  body .catalog-toolbar { position: relative; top: auto; }
}

/* --- 대표이사 서명의 대체 글꼴이 `cursive` 였습니다 (2026-08-08 · 디자인 8회차) ---
   `pages/company(-cn).html` 의 `<style>` 이 `font-family: 'Cormorant Garamond', cursive`
   입니다. Cormorant 는 Google Fonts 라 **안 오는 동안(font-display: swap) 과 CDN 이
   죽었을 때** 40px 짜리 대표이사 서명 "J.W. Lee" 가 `cursive` 제네릭으로 그려집니다.
   `cursive` 가 무엇이 되는지는 OS·브라우저 설정이 정합니다 — 이 저장소에서 제네릭에
   기대는 자리는 전부 serif / sans-serif / monospace 이고, `cursive` 는 여기 2곳뿐입니다.
   실측(1440, Cormorant 없는 상태): 서명 폭 113 → 141.6px (+25%). 이 컨테이너에서는
   Liberation Serif 로 떨어졌고, 그 값이 `var(--serif)` 로 바꿨을 때와 **동일**합니다
   (Cormorant 가 있을 때도 첫 항목이 같아 렌더가 바이트 단위로 같습니다).
   ★ 여기서 고치는 이유 — `company-cn.html` 이 이번 회차 금지 파일이라 두 언어를
     한 번에 맞추려면 공용 파일이어야 합니다. 페이지 <style> 이 뒤에 오므로
     같은 (0,2,0) 으로는 집니다 — `body` 를 붙여 (0,2,1) 로 올려야 이깁니다.
     나중에 두 페이지의 `<style>` 을 직접 고치면 이 블록은 지워도 됩니다. */
body .greet-sign .signature { font-family: var(--serif); }

/* === SHARED footer === */
.tk-footer {
  background: var(--night);
  color: rgba(246,243,236,0.75);
  padding: 100px 64px 32px;
}
.tk-footer .row1 {
  display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(246,243,236,0.13);
}
.tk-footer .tk-logo .name, .tk-footer .tk-logo .sub { color: var(--paper); }
.tk-footer .tag-line {
  font-family: var(--serif); font-style: italic;
  font-size: 18px; color: rgba(246,243,236,0.65);
  margin: 28px 0 24px 0; line-height: 1.5;
  max-width: 280px;
}
.tk-footer .addr {
  font-size: 13px; line-height: 1.8;
  font-family: var(--serif-ko);
}
.tk-footer h2 {
  font-family: var(--sans); font-weight: 600;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 16px 0;
}
.tk-footer ul { list-style: none; padding: 0; margin: 0; line-height: 2; font-size: 13px; }
.tk-footer ul li { cursor: pointer; transition: color .15s; }
.tk-footer ul li:hover { color: var(--gold-soft); }
.tk-footer ul li a { color: inherit; text-decoration: none; display: inline-block; }
.tk-footer ul li a:hover { color: var(--gold-soft); }
.tk-footer .row2 {
  padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: rgba(246,243,236,0.62);
  font-family: var(--mono);
}

/* === Reveal === */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-1 { transition-delay: .08s; }
.reveal-2 { transition-delay: .16s; }
.reveal-3 { transition-delay: .24s; }
.reveal-4 { transition-delay: .32s; }

/* === Section heading === */
.sec { padding: 140px 64px; }
.sec-eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: var(--gold-text); letter-spacing: 0.24em; text-transform: uppercase;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}

/* 어두운 배경 위에서는 --gold-text(#7d6540)가 3.43:1 로 AA 미달입니다.
   섹션 배경이 어두운 곳에서는 밝은 금색으로 올립니다.
   (2026-08-06 — 밝은 배경 기준으로만 색을 맞추면 어두운 섹션이 안 보입니다.) */
.night .sec-eyebrow, .dark .sec-eyebrow,
[style*="--ink"] .sec-eyebrow,
section[style*="var(--night)"] .sec-eyebrow,
section[style*="var(--ink)"] .sec-eyebrow,
section[style*="background: var(--night)"] .sec-eyebrow,
.hero .sec-eyebrow, .cert-strip .sec-eyebrow,
.films-sec .sec-eyebrow, .cta-sec .sec-eyebrow,
.products-sec .sec-eyebrow, .loc-sec .sec-eyebrow, .tech-banner .sec-eyebrow {
  color: var(--gold-soft);
}

/* 위 목록으로 못 잡는 경우가 있어(인라인 배경 등) 마지막 안전망을 둡니다.
   어두운 섹션은 대부분 color 가 --paper 계열입니다. */
section[style*="color: var(--paper)"] .sec-eyebrow,
div[style*="color: var(--paper)"] .sec-eyebrow {
  color: var(--gold-soft);
}
.sec-eyebrow::before { content: ''; width: 40px; height: 1px; background: var(--gold); }
.sec-h {
  font-family: var(--serif); font-weight: 300;
  font-size: 88px; line-height: 0.96; letter-spacing: -0.025em;
  margin: 0;
}
.sec-h em { font-style: italic; color: var(--gold); }
.sec-h .ko {
  display: block; font-family: var(--serif-ko); font-weight: 300;
  font-size: 32px; letter-spacing: -0.02em;
  margin-top: 18px; color: var(--ink-2); line-height: 1.2;
}
.sec-lead {
  color: var(--ink-2); font-size: 17px; line-height: 1.8;
  max-width: 46em; margin-top: 28px;
}

/* button primitives */
.btn-line {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 24px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-line.dark { border-color: var(--paper); color: var(--paper); }
.btn-line.dark:hover { background: var(--paper); color: var(--ink); }
.btn-line.gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn-line.gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--paper); }

/* Cursor hover treatments */
.hov-fade { transition: opacity .2s; }
.hov-fade:hover { opacity: 0.55; }

/* ===========================================================
   MOBILE FINAL SAFETY NET
   =========================================================== */
/* Global overflow guard — prevents horizontal scroll on any page */
html, body { overflow-x: hidden; max-width: 100vw; }

/* ★★ 이 블록을 지우고 위의 hidden 만 남기면 안 됩니다 (2026-08-08 · 디자인 7회차)
   "가로 스크롤 막으려면 overflow-x: hidden 이지" 는 맞지만 대가가 있습니다 —
   `hidden` 은 **스크롤 컨테이너를 만듭니다.** 그러면 그 안에 있는 모든
   `position: sticky` 는 화면이 아니라 그 조상 상자를 기준으로 갇혀
   **한 번도 붙지 못합니다.** CSS 는 오류를 내지 않으므로 선언만 보면 붙는 줄 압니다.
   실측(6회차): 저장소의 sticky 14곳이 **전부** 죽어 있었습니다.
     · 1440 에서 .subnav 를 3000px 스크롤 → top = −2461 (문서와 함께 떠내려감)
     · .plant-switch · .filter-bar · .support-tabs · .catalog-toolbar · .tl-side 도 동일
   `clip` 은 잘라내되 스크롤 컨테이너를 만들지 않습니다. 가로 스크롤을 막는 효과는
   `hidden` 과 같으면서 sticky 가 삽니다 — 전후 실측으로 확인했습니다.
   @supports 로 감싼 이유: `overflow-x: clip` 미지원 브라우저(Safari 15 이하 등)에서는
   이 블록이 통째로 무시되고 위의 hidden 이 그대로 남아 **예전과 완전히 같게** 동작합니다.
   즉 잘림이 가로 스크롤로 바뀌는 일은 없습니다. */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

@media (max-width: 768px) {
  body, body * { max-width: 100%; }

  .pgrid {
    grid-template-columns: 1fr !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .pcard {
    border-right: 0 !important;
    padding: 26px 20px 32px 20px !important;
  }
  .pcard-img { height: 200px !important; }

  .featured-grid, .heritage-grid, .hero-news, .news-list, .index-row, .loc-grid {
    grid-template-columns: 1fr !important;
  }
  .loc-card { padding: 24px 20px !important; }
  .loc-info { grid-template-columns: 1fr !important; gap: 12px !important; }

  .prod-img-sub, .prod-img-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .prod-img-sub > * { max-width: 100% !important; }

  .film-stage, .film-stage iframe, .film-stage video {
    max-width: 100% !important; width: 100% !important;
  }
  iframe { max-width: 100% !important; }

  .compare-table, .compare-grid, table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }

  .ph-card, .v-card, .feat-card, .greet-card, .loc-card, .org-card {
    padding: 22px 18px !important;
  }
}

/* === hero 슬라이드 컨트롤 보정 === */
@media (max-width: 768px) {
  body:not(.force-desktop) .hero-slider-ctrl {
    left: 20px !important;
    right: 20px !important;
    top: auto !important;
    bottom: 24px !important;
    position: absolute !important;
    gap: 16px !important;
    width: calc(100% - 40px) !important;
    flex-wrap: wrap !important;
  }
  body:not(.force-desktop) .hero-slider-ctrl .count { font-size: 11px !important; }
  body:not(.force-desktop) .hero-slider-ctrl .count .cur { font-size: 16px !important; }
  body:not(.force-desktop) .hero-slider-ctrl .dots {
    gap: 8px !important;
    flex-wrap: wrap !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  body:not(.force-desktop) .hero-slider-ctrl .dots button {
    width: 24px !important;
    flex: 0 0 auto !important;
  }
  body:not(.force-desktop) .hero-slider-ctrl .play-btn {
    width: 28px !important; height: 28px !important;
    flex: 0 0 auto !important;
  }
  body:not(.force-desktop) .hero { padding-bottom: 80px !important; }
  body:not(.force-desktop) .hero-bottom { position: relative !important; }

  /* 연혁 페이지 단일 컬럼 */
  body:not(.force-desktop) .tl-year-group {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 24px 0 !important;
  }
  body:not(.force-desktop) .tl-year-group .yr { font-size: 36px !important; }
  body:not(.force-desktop) .tl-year-group .yr small {
    font-size: 10px !important; margin-top: 4px !important;
  }
  body:not(.force-desktop) .tl-year-group li {
    grid-template-columns: 50px 1fr !important;
    gap: 12px !important;
    padding: 8px 0 !important;
  }
  body:not(.force-desktop) .tl-year-group li .m { font-size: 10px !important; }
  body:not(.force-desktop) .tl-year-group li .e {
    font-size: 13px !important;
    line-height: 1.6 !important;
    word-break: keep-all;
  }
  body:not(.force-desktop) .tl-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-top: 32px !important;
  }
  body:not(.force-desktop) .tl-side {
    position: relative !important;
    top: auto !important;
    font-size: 44px !important;
  }

  /* hero content/cards 안전망 */
  body:not(.force-desktop) .hero-content {
    grid-template-columns: 1fr !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body:not(.force-desktop) .hero-cards {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    justify-self: stretch !important;
  }
  body:not(.force-desktop) .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
  }
  body:not(.force-desktop) .h-card {
    grid-template-columns: 56px 1fr 24px !important;
    padding: 20px 18px !important;
  }
  body:not(.force-desktop) .h-card-icon svg { width: 30px !important; height: 30px !important; }

  body:not(.force-desktop) {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  /* clip 인 이유는 이 파일 `MOBILE FINAL SAFETY NET` 절의 ★★ 주석. 이 규칙은 특이도 (0,2,1) 이라
     위쪽 `html, body { overflow-x: clip }`(0,0,1) 를 이깁니다 — 여기도 같이 안 바꾸면
     모바일에서만 sticky 가 죽습니다. */
  @supports (overflow-x: clip) {
    body:not(.force-desktop) { overflow-x: clip !important; }
  }
  body:not(.force-desktop) > * { max-width: 100vw !important; }
}

body.force-desktop { min-width: 1440px; }

/* ===========================================================
   PAGE-SPECIFIC MOBILE — 페이지별 그리드 처리
   =========================================================== */
@media (max-width: 768px) {
  /* 회사소개 */
  body:not(.force-desktop) .greet-sec,
  body:not(.force-desktop) .org-sec,
  body:not(.force-desktop) .loc-sec,
  body:not(.force-desktop) .tl-sec { padding: 56px 20px !important; }
  body:not(.force-desktop) .greet-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  body:not(.force-desktop) .org-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 사업소개 */
  body:not(.force-desktop) .prod-sec { padding: 56px 20px !important; }
  body:not(.force-desktop) .prod-row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  body:not(.force-desktop) .prod-info-table {
    grid-template-columns: 90px 1fr !important;
  }
  body:not(.force-desktop) .prod-chips {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  body:not(.force-desktop) .prod-img-stack {
    grid-template-columns: 1fr !important;
  }

  /* 방화유리 페이지 */
  body:not(.force-desktop) .fire-hero-content {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  body:not(.force-desktop) .fr-info-grid {
    grid-template-columns: 90px 1fr !important;
    gap: 8px 16px !important;
  }
  body:not(.force-desktop) .spec-sec { padding: 56px 20px !important; }
  body:not(.force-desktop) .why-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  body:not(.force-desktop) .comp-row {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  body:not(.force-desktop) .threat-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* 설비 */
  body:not(.force-desktop) .eq-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  body:not(.force-desktop) .eq-sec { padding: 56px 20px !important; }
  body:not(.force-desktop) .eq-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 기술현황 */
  body:not(.force-desktop) .tech-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  body:not(.force-desktop) .cert-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  body:not(.force-desktop) .tech-sec { padding: 56px 20px !important; }

  /* 영상 */
  body:not(.force-desktop) .films-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  body:not(.force-desktop) .films-sec { padding: 56px 20px !important; }

  /* 공통 hero */
  body:not(.force-desktop) .subpage-hero {
    padding: 64px 20px 36px 20px !important;
  }
  body:not(.force-desktop) .subpage-hero h1 {
    font-size: 48px !important;
  }
  /* 부제도 함께 줄여야 합니다. 이 규칙이 없어 h1 만 108→48 로 내려가고
     국문 부제는 30px 그대로여서 제목의 62% 크기였습니다.
     `.sec-h .ko` · `.product-hero h1 .ko` 의 모바일값과 같은 18px. */
  body:not(.force-desktop) .subpage-hero h1 .ko {
    font-size: 18px !important;
  }
  body:not(.force-desktop) .crumbs {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  body:not(.force-desktop) .crumbs > * {
    font-size: 11px !important;
  }


  /* 폼 */
  body:not(.force-desktop) .form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  body:not(.force-desktop) .form-step {
    padding: 24px 18px !important;
  }
  body:not(.force-desktop) .form-nav {
    flex-direction: column !important;
    gap: 8px !important;
  }
  body:not(.force-desktop) .form-nav button {
    width: 100% !important;
  }

  /* 푸터 */
  body:not(.force-desktop) .tk-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  body:not(.force-desktop) .tk-footer {
    padding: 48px 20px 24px !important;
  }
}

/* ===========================================================
   SUBPAGE INLINE-GRID OVERRIDES
   =========================================================== */
@media (max-width: 768px) {
  /* 인라인 grid -> 1단 */
  body:not(.force-desktop) section > .reveal,
  body:not(.force-desktop) section > div.reveal {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  body:not(.force-desktop) .index-row { grid-template-columns: repeat(2, 1fr) !important; }
  body:not(.force-desktop) .index-strip { padding: 48px 20px !important; }
  body:not(.force-desktop) .index-row a { padding: 18px 14px !important; }
  body:not(.force-desktop) .index-row .ko { font-size: 14px !important; }
  body:not(.force-desktop) .index-row .en { font-size: 11px !important; }

  body:not(.force-desktop) .prod-block { padding: 64px 20px !important; }
  body:not(.force-desktop) .prod-grid,
  body:not(.force-desktop) .prod-block.flip .prod-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  body:not(.force-desktop) .prod-img-sub {
    width: 140px !important;
    right: -12px !important; bottom: -12px !important;
    border-width: 6px !important;
  }
  body:not(.force-desktop) .prod-content h2 { font-size: 36px !important; line-height: 1.05 !important; word-break: keep-all !important; }
  body:not(.force-desktop) .prod-content .ko-h { font-size: 16px !important; line-height: 1.4 !important; }
  body:not(.force-desktop) .prod-content .desc { font-size: 13px !important; line-height: 1.7 !important; }
  body:not(.force-desktop) .prod-tags span { font-size: 10px !important; padding: 4px 8px !important; }
  body:not(.force-desktop) .prod-specs li {
    grid-template-columns: 90px 1fr !important;
    gap: 14px !important;
    padding: 10px 0 !important;
  }
  body:not(.force-desktop) .prod-specs .v { font-size: 13px !important; line-height: 1.55 !important; }
  body:not(.force-desktop) .prod-cta-row { flex-direction: column !important; gap: 8px !important; }
  body:not(.force-desktop) .prod-cta-row .btn-line { width: 100% !important; justify-content: center !important; }

  body:not(.force-desktop) .prod-content > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body:not(.force-desktop) .prod-content > div[style*="grid-template-columns: 1fr 1fr"] > div {
    padding: 18px 18px 20px 18px !important;
  }

  /* 사업소개 1fr 1.4fr / 1.2fr 등 인라인 grid -> 1단 */
  body:not(.force-desktop) section > div.reveal[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  body:not(.force-desktop) .prod-img-main { aspect-ratio: 4/3 !important; }

  /* 특수유리 (Type 01~04) 세로 정렬 보강 */
  body:not(.force-desktop) section[style*="background: var(--night)"] > div.reveal[style*="max-width"] > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* SPECIALTY 모바일 헤더: 영문/한글 본문 세로 나열 */
  body:not(.force-desktop) section[style*="background: var(--night)"] .sec-h { font-size: 48px !important; }
  body:not(.force-desktop) section[style*="background: var(--night)"] > div.reveal > div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Type 카드 내부 레이아웃 - 세로 나열, 좌우 잘림 방지 */
  body:not(.force-desktop) section[style*="background: var(--night)"] > div.reveal > div > div[style*="padding: 40px 36px"] {
    padding: 28px 22px !important;
  }
  body:not(.force-desktop) section[style*="background: var(--night)"] > div.reveal > div > div[style*="padding: 40px 36px"] > div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 12px !important;
  }
  body:not(.force-desktop) section[style*="background: var(--night)"] h3 {
    font-size: 34px !important;
    line-height: 1.05 !important;
  }
  body:not(.force-desktop) section[style*="background: var(--night)"] div[style*="font-size: 56px"] {
    font-size: 36px !important;
  }
  body:not(.force-desktop) section[style*="background: var(--night)"] li[style*="grid-template-columns: 100px 1fr"] {
    grid-template-columns: 80px 1fr !important;
    gap: 12px !important;
  }
  body:not(.force-desktop) section[style*="background: var(--night)"] li {
    word-break: keep-all !important;
  }

  /* 특수유리 비교표 → 모바일에서는 카드 스타일로 교체 */
  body:not(.force-desktop) section[style*="background: var(--night)"] > div.reveal > div[style*="margin-top: 56px"] table { display: none !important; }
  body:not(.force-desktop) section[style*="background: var(--night)"] > div.reveal > div[style*="margin-top: 56px"] > div[style*="padding: 16px 28px"] {
    padding: 16px 18px !important; font-size: 11px !important;
  }
  body:not(.force-desktop) section[style*="background: var(--night)"] > div.reveal > div[style*="margin-top: 56px"]::after {
    content: '';
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(246,243,236,0.12);
  }

  body:not(.force-desktop) div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  body:not(.force-desktop) div[style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  body:not(.force-desktop) div[style*="grid-template-columns: repeat(5, 1fr)"] > a:nth-child(5) {
    grid-column: span 1 !important;
  }

  /* 설비현황 */
  body:not(.force-desktop) .line-block {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 32px 20px !important;
  }
  body:not(.force-desktop) .ln-num { font-size: 36px !important; }
  body:not(.force-desktop) .ln-content h3 { font-size: 32px !important; }
  body:not(.force-desktop) .ln-content .ko-h { font-size: 15px !important; }
  body:not(.force-desktop) .ln-content p { font-size: 13px !important; }
  body:not(.force-desktop) .ln-machines { grid-template-columns: 1fr !important; }
  body:not(.force-desktop) .ln-machines li { border-right: 0 !important; }
  body:not(.force-desktop) .lines-sec { padding: 56px 20px !important; }
  body:not(.force-desktop) .gal-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  body:not(.force-desktop) .gal-sec { padding: 56px 20px !important; }

  /* 영상 갤러리 페이지 */
  body:not(.force-desktop) .film-row,
  body:not(.force-desktop) .film-row.reverse {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  body:not(.force-desktop) .film-row .film-meta,
  body:not(.force-desktop) .film-row.reverse .film-meta { order: 2 !important; }
  body:not(.force-desktop) .film-row .film-stage,
  body:not(.force-desktop) .film-row.reverse .film-stage { order: 1 !important; }
  body:not(.force-desktop) .film-meta h3 { font-size: 36px !important; }
  body:not(.force-desktop) .film-meta { position: static !important; padding-top: 0 !important; }
  body:not(.force-desktop) .films-sec { padding: 64px 20px 56px !important; }
  body:not(.force-desktop) .films-head { grid-template-columns: 1fr !important; gap: 18px !important; margin-bottom: 32px !important; flex-direction: column !important; align-items: stretch !important; }
  body:not(.force-desktop) .film-list { gap: 72px !important; }
  body:not(.force-desktop) .film-stage { box-shadow: 0 18px 40px -18px rgba(0,0,0,0.65), 0 0 0 1px rgba(196,162,107,0.28) !important; }

  /* 기술현황 */
  body:not(.force-desktop) .cert-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  body:not(.force-desktop) .group-sec { padding: 48px 20px !important; }
  /* 데스크톱은 이어지는 그룹의 상단을 절반으로 줄여(80→40) '한 줄기 목록'임을 표시합니다.
     위 shorthand + !important 가 그 관계를 지워 5개 그룹이 모두 48/48 이 됐습니다
     (그룹 사이 96px — 데스크톱 120px 의 80%. 다른 섹션은 40% 로 줄어듭니다).
     같은 절반 비율을 모바일에도 적용합니다. */
  body:not(.force-desktop) .group-sec + .group-sec { padding-top: 24px !important; }
  body:not(.force-desktop) .group-head { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  body:not(.force-desktop) .group-head h2 { font-size: 36px !important; }
  body:not(.force-desktop) .tech-banner { padding: 100px 20px 56px !important; }
  body:not(.force-desktop) .tech-banner h1 { font-size: 56px !important; }
  /* 부제 규칙이 없어 h1 만 124→56 으로 내려가고 국문 부제는 32px 그대로였습니다
     (390 에서 4줄 154px — 제목보다 큰 덩어리). 다른 디스플레이 부제와 같은 18px. */
  body:not(.force-desktop) .tech-banner h1 .ko { font-size: 18px !important; }
  body:not(.force-desktop) .tech-banner .row1 { grid-template-columns: 1fr !important; gap: 24px !important; }
  body:not(.force-desktop) .tech-stats { grid-template-columns: repeat(2, 1fr) !important; }
  body:not(.force-desktop) .tech-stat { padding: 18px 16px !important; }
  body:not(.force-desktop) .tech-stat .v { font-size: 40px !important; }

  /* 고객지원 */
  body:not(.force-desktop) .inq-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  body:not(.force-desktop) .inq-side, body:not(.force-desktop) .inq-form { padding: 32px 24px !important; }
  body:not(.force-desktop) .fld-grid { grid-template-columns: 1fr !important; }
  body:not(.force-desktop) .prod-chips { grid-template-columns: repeat(2, 1fr) !important; }
  body:not(.force-desktop) .stab { padding: 16px 18px !important; font-size: 13px !important; }
  body:not(.force-desktop) .support-tabs .stabs-inner { padding: 0 16px !important; overflow-x: auto !important; }

  /* 회사소개 하위 내비 — 모바일 규칙이 **아예 없었습니다** (2026-08-08 · 6회차).
     390 에서 `.subnav-inner` 가 데스크톱 `padding: 0 64px` 를 그대로 쓰고
     항목 5개가 flex 로 찌그러져, "인사말" 이 3줄로 끊기면서도 마지막 "05 오시는 길"
     은 화면 밖 +81px(중국어 +90px)에 있었습니다 — 스크롤도 안 되니 닿을 방법이
     없었습니다. 같은 모양인 `.stab`(고객지원 탭)이 이미 쓰는 방식
     (가로 스크롤 스트립 + nowrap + 축소금지)에 맞췄습니다.
     항목 자연폭 합이 390 에서 471px 이라 접거나 줄여서는 안 들어갑니다. */
  body:not(.force-desktop) .subnav-inner { padding: 0 16px !important; overflow-x: auto !important; }
  body:not(.force-desktop) .subnav a {
    padding: 16px 14px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  body:not(.force-desktop) .notice-sec,
  body:not(.force-desktop) .inq-sec,
  body:not(.force-desktop) .faq-sec { padding: 56px 20px !important; }
  body:not(.force-desktop) .notice-head { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; margin-bottom: 28px !important; }
  body:not(.force-desktop) .notice-table th, body:not(.force-desktop) .notice-table td { padding: 12px 6px !important; font-size: 12px !important; }
  body:not(.force-desktop) .notice-table .no, body:not(.force-desktop) .notice-table .views { display: none !important; }
  body:not(.force-desktop) .notice-table .title { font-size: 13px !important; }
  body:not(.force-desktop) .faq-q { grid-template-columns: 40px 1fr 24px !important; font-size: 14px !important; padding: 18px 0 !important; }
  body:not(.force-desktop) .faq-a { padding: 0 0 0 48px !important; font-size: 13px !important; }
  body:not(.force-desktop) .faq-item.open .faq-a { padding: 0 16px 22px 48px !important; }

  /* 회사소개 */
  body:not(.force-desktop) .greet-body { font-size: 16px !important; line-height: 1.75 !important; }
  body:not(.force-desktop) .greet-body p:first-of-type::first-line { font-size: 20px !important; }
  body:not(.force-desktop) .vision-grid { grid-template-columns: 1fr !important; gap: 1px !important; }
  body:not(.force-desktop) .vision-sec { padding: 56px 20px !important; }
  body:not(.force-desktop) .v-card { min-height: 200px !important; padding: 28px 22px !important; }
  body:not(.force-desktop) .timeline-sec { padding: 56px 20px !important; }
  body:not(.force-desktop) .tl-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  body:not(.force-desktop) .tl-side { position: static !important; font-size: 56px !important; line-height: 0.95 !important; }
  body:not(.force-desktop) .tl-side .small { font-size: 14px !important; margin-top: 16px !important; }
  body:not(.force-desktop) .tl-year-group { grid-template-columns: 80px 1fr !important; gap: 18px !important; padding: 20px 0 !important; }
  body:not(.force-desktop) .tl-year-group .yr { font-size: 28px !important; }
  body:not(.force-desktop) .tl-year-group li { grid-template-columns: 48px 1fr !important; gap: 12px !important; }
  body:not(.force-desktop) .tl-year-group li .e { font-size: 13px !important; }
  body:not(.force-desktop) .org-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  body:not(.force-desktop) .org-card { padding: 14px 16px !important; min-width: 0 !important; }
  body:not(.force-desktop) .org-card .name { font-size: 14px !important; }
  body:not(.force-desktop) .loc-info { grid-template-columns: 80px 1fr !important; gap: 6px 16px !important; }

  /* 방화유리 상세 페이지 */
  body:not(.force-desktop) .ph-grid { grid-template-columns: 1fr !important; gap: 32px !important; padding: 110px 20px 64px !important; }
  body:not(.force-desktop) .product-hero h1 { font-size: 52px !important; line-height: 0.96 !important; }
  body:not(.force-desktop) .product-hero h1 .ko { font-size: 18px !important; }
  body:not(.force-desktop) .ph-card { padding: 24px 22px !important; }
  body:not(.force-desktop) .ph-card .row { grid-template-columns: 80px 1fr !important; gap: 12px !important; padding: 10px 0 !important; }
  body:not(.force-desktop) .ph-card .v.big { font-size: 22px !important; }
  body:not(.force-desktop) .bene-sec { padding: 56px 20px !important; }
  body:not(.force-desktop) .bene-grid { grid-template-columns: 1fr 1fr !important; }
  body:not(.force-desktop) .bene-card { min-height: 0 !important; padding: 24px 18px !important; }
  body:not(.force-desktop) .bene-card h3 { font-size: 17px !important; }
  body:not(.force-desktop) .bene-card p { font-size: 12px !important; }
  body:not(.force-desktop) .spec-sec, body:not(.force-desktop) .compare-sec, body:not(.force-desktop) .use-sec { padding: 56px 20px !important; }
  body:not(.force-desktop) .spec-table th, body:not(.force-desktop) .spec-table td { padding: 10px 12px !important; font-size: 11px !important; }
  body:not(.force-desktop) .spec-table td:first-child { width: 60px !important; font-size: 14px !important; }
  body:not(.force-desktop) .compare-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  body:not(.force-desktop) .compare-card { padding: 18px 14px !important; gap: 10px !important; }
  body:not(.force-desktop) .cert-strip { padding: 56px 20px !important; grid-template-columns: 1fr !important; gap: 28px !important; }
  body:not(.force-desktop) .cert-strip h3 { font-size: 36px !important; }
  body:not(.force-desktop) .cert-list { grid-template-columns: repeat(2, 1fr) !important; }
  body:not(.force-desktop) .cert-item { padding: 16px 12px !important; }
  body:not(.force-desktop) .use-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* 가로 스크롤 차단 — `clip` 인 이유는 이 파일 `MOBILE FINAL SAFETY NET` 절의 ★★ 주석을 보세요.
     `hidden !important` 로 두면 모바일에서만 sticky 가 다시 전부 죽습니다
     (2026-08-08 · 7회차에 실제로 그랬습니다: 1440·810 은 붙는데 390 만 안 붙음). */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  @supports (overflow-x: clip) {
    html, body { overflow-x: clip !important; }
  }

  /* 사업소개 intro 등 인라인 padding 100px/64px 섹션 강제 모바일화 */
  body:not(.force-desktop) section[style*="padding: 100px 64px"],
  body:not(.force-desktop) section[style*="padding: 140px 64px"] {
    padding: 56px 20px !important;
  }
  /* 같은 규칙에서 좁은 스트립 섹션 2종이 빠져 있었습니다 (2026-08-07 실측).
     [style*=] 는 인라인 문자열을 그대로 맞추므로 값이 하나만 달라도 통과합니다.
     빠진 6곳(business #films 2 · equipment intro 2 · fire-rated intro 2)은 390 에서
     · 좌우 64px 가 그대로 남아 본문 폭 262px — 같은 페이지 다른 섹션은 350px
     · 세로도 안 줄어(60→60 / 80→80) 본문 섹션(140→56)보다 오히려 헐거워짐 = 관계 역전
     48px 은 이미 .index-strip · .group-sec 이 쓰는 '좁은 스트립' 모바일 값입니다. */
  body:not(.force-desktop) section[style*="padding: 60px 64px"],
  body:not(.force-desktop) section[style*="padding: 80px 64px"] {
    padding: 48px 20px !important;
  }
  /* 사업소개 intro: h2 sec-h 인라인 폰트 60px 등 강제 축소 */
  body:not(.force-desktop) section .sec-h[style*="font-size"] {
    font-size: 38px !important;
    line-height: 1.05 !important;
  }
  /* 인트로 그리드 1단 강제 (1fr 1.4fr 등 어떤 비율이든) */
  body:not(.force-desktop) section > div.reveal {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    /* 데스크톱 인라인의 align-items:end / center 는 두 칸을 '아래끝 맞춤 / 가운데
       맞춤'하려는 것인데, 세로 flex 로 바뀌면 교차축이 가로가 되어 그대로
       오른쪽 붙임 / 가운데 붙임이 됩니다 (2026-08-07 실측 — 768 에서 18곳,
       390 에서 7곳). 메인 '02 — Catalogue' 제목 블록이 310px 칸에서 90px 밀려
       바로 아래 문단·필터칩과 왼쪽 선이 어긋났고, 사업소개 '갤러리 →' 버튼은
       오른쪽 끝(+256px)에 혼자 떠 있었습니다. flex 기본값으로 되돌립니다. */
    align-items: stretch !important;
  }
  /* ↑ 이 래퍼가 flex column + gap:24px 이 되면서, 안에 들어 있는 제목 블록의
     자기 margin 에 gap 이 그대로 더해집니다 (2026-08-07 실측).
     · .sec-eyebrow(margin-bottom:28) + gap 24 = 52px — 데스크톱 28px 의 186%
     · .sec-h 다음 본문(margin-top:56) + gap 24 = 80px — 데스크톱 56px 의 143%
     같은 화면에서 제목은 88→38px(43%), 섹션 패딩은 140→56px(40%) 로 줄어드는데
     이 두 간격만 커져 관계가 뒤집혔습니다.
     아래 값은 전부 'gap 24px 을 뺀 나머지'입니다 — 합계가 목표치가 됩니다.
     본문 그리드가 래퍼 밖 형제로 붙는 페이지(.bene-grid · .vision-grid 등)는
     gap 이 안 붙어 56px 그대로이므로, 래퍼 안쪽도 56px 에 맞춰야 같은 값이 됩니다.
     제목→본문 32+24=56 (22곳) / 제목→리드문 0+24=24 (2곳, 데스크톱 28) /
     eyebrow→제목 0+24=24 (22곳, 데스크톱 28). */
  body:not(.force-desktop) section > div.reveal > .sec-eyebrow { margin-bottom: 0 !important; }
  body:not(.force-desktop) section > div.reveal > .sec-h + * { margin-top: 32px !important; }
  body:not(.force-desktop) section > div.reveal > .sec-h + .sec-lead { margin-top: 0 !important; }
  /* 인라인 inline-grid 텍스트는 paragraph로 자연 줄바꿈 */
  body:not(.force-desktop) section > div.reveal p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    word-break: keep-all !important;
  }

  /* 제품 이미지 위 라벨(prod-meta 배지)이 세로로 깨지는 현상 해결 */
  body:not(.force-desktop) .prod-meta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    max-width: calc(100% - 28px) !important;
    top: 14px !important;
    left: 14px !important;
  }
  body:not(.force-desktop) .prod-meta .num,
  body:not(.force-desktop) .prod-meta .cert {
    display: inline-block !important;
    white-space: nowrap !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }
  /* cert 배지(KS · 비차열 E-RATED 등)는 모바일에서 숨김 — 본문에 이미 명시됨 */
  body:not(.force-desktop) .prod-meta .cert { display: none !important; }

  /* 방화유리 페이지의 차열 vs 비차열 비교 박스 1단으로 */
  body:not(.force-desktop) section[style*="background: var(--paper-2)"] > div.reveal > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* 그 박스 안의 카드 헤더(◉ 태광 제공 / ○ 다른 제품) — 카드는 정상 가로폭 확보 */
  body:not(.force-desktop) section[style*="background: var(--paper-2)"] > div.reveal > div[style*="grid-template-columns"] > div {
    padding: 22px 22px 24px 22px !important;
    width: 100% !important;
  }
  body:not(.force-desktop) section[style*="background: var(--paper-2)"] > div.reveal > div[style*="grid-template-columns"] :is(h3, h4) {
    font-size: 22px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }
}

/* ===========================================================
   HERO 거대 텍스트 — 모바일 강제 축소
   =========================================================== */
@media (max-width: 768px) {
  body:not(.force-desktop) .hero-h,
  body:not(.force-desktop) .hero-title,
  body:not(.force-desktop) h1.hero-h,
  body:not(.force-desktop) .hero-content h1 {
    font-size: 56px !important;
    line-height: 0.96 !important;
    letter-spacing: -0.02em !important;
    word-break: break-word !important;
  }
  body:not(.force-desktop) .hero-eyebrow {
    font-size: 12px !important;
  }
  body:not(.force-desktop) .hero-sub,
  body:not(.force-desktop) .hero-copy p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  /* 매우 작은 화면 */
  @media (max-width: 400px) {
    body:not(.force-desktop) .hero-h,
    body:not(.force-desktop) .hero-content h1 {
      font-size: 48px !important;
    }
  }
}

/* ===========================================================
   HOMEPAGE HERO + GLOBAL MOBILE FIX (Final)
   =========================================================== */
@media (max-width: 768px) {
  body:not(.force-desktop) .hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 90px !important;
  }
  body:not(.force-desktop) .hero-content {
    display: flex !important;
    flex-direction: column !important;
    padding: 110px 20px 60px 20px !important;
    height: auto !important;
    gap: 32px !important;
  }
  body:not(.force-desktop) .hero-copy {
    padding-left: 0 !important;
    max-width: 100% !important;
  }
  body:not(.force-desktop) .hero h1 {
    font-size: 56px !important;
    line-height: 1 !important;
    margin-bottom: 20px !important;
  }
  body:not(.force-desktop) .hero-eyebrow {
    font-size: 13px !important;
    margin-bottom: 16px !important;
  }
  body:not(.force-desktop) .hero-tagline {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  body:not(.force-desktop) .hero-cards {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-self: stretch !important;
  }
  body:not(.force-desktop) .h-card {
    padding: 16px 18px !important;
    grid-template-columns: 44px 1fr 24px !important;
  }
  body:not(.force-desktop) .h-card-icon svg {
    width: 28px !important; height: 28px !important;
  }
  body:not(.force-desktop) .h-card-text .en { font-size: 10px !important; }
  body:not(.force-desktop) .h-card-text .ko { font-size: 16px !important; }
  body:not(.force-desktop) .scroll-tag { display: none !important; }
  body:not(.force-desktop) .hero-bottom {
    position: static !important;
    grid-template-columns: 1fr !important;
  }
  body:not(.force-desktop) .hero-news {
    padding: 20px !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  body:not(.force-desktop) .hero-video {
    border-left: 0 !important;
    border-top: 1px solid rgba(246,243,236,0.12) !important;
    padding: 18px 20px !important;
  }

  /* Topbar */
  body:not(.force-desktop) .topbar {
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  body:not(.force-desktop) .tk-logo .name { font-size: 16px !important; letter-spacing: 0.12em !important; }
  body:not(.force-desktop) .tk-logo .sub { font-size: 9px !important; letter-spacing: 0.2em !important; }
  body:not(.force-desktop) .lang-pill { font-size: 10px !important; padding: 5px 7px !important; }
  body:not(.force-desktop) .menu-btn { font-size: 11px !important; gap: 10px !important; }

  /* Drawer */
  body:not(.force-desktop) .drawer { padding: 14px 20px 40px !important; }
  body:not(.force-desktop) .drawer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-top: 32px !important;
  }
  body:not(.force-desktop) .drawer-nav .link {
    font-size: 34px !important;
    gap: 12px !important;
  }
  body:not(.force-desktop) .drawer-nav .link .ko { font-size: 18px !important; }
  body:not(.force-desktop) .drawer-nav .sub {
    padding-left: 36px !important;
    font-size: 12px !important;
    gap: 4px 14px !important;
  }

  /* Section padding */
  body:not(.force-desktop) .sec,
  body:not(.force-desktop) .sec.about-sec,
  body:not(.force-desktop) .products-sec,
  body:not(.force-desktop) .featured,
  body:not(.force-desktop) .heritage-sec,
  body:not(.force-desktop) .work-sec {
    padding: 64px 20px !important;
  }
  body:not(.force-desktop) .sec-h {
    font-size: 38px !important;
    line-height: 1.05 !important;
  }
  body:not(.force-desktop) .sec-h .ko {
    font-size: 18px !important;
    margin-top: 14px !important;
  }
  body:not(.force-desktop) .sec-lead { font-size: 14px !important; }
  body:not(.force-desktop) .sec-eyebrow { font-size: 11px !important; }

  /* About figures */
  body:not(.force-desktop) .about-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  body:not(.force-desktop) .about-quote {
    font-size: 18px !important;
    line-height: 1.6 !important;
    margin: 18px 0 28px 0 !important;
  }
  body:not(.force-desktop) .about-figures {
    grid-template-columns: 1fr 1fr !important;
  }
  body:not(.force-desktop) .figure-num { font-size: 40px !important; }
  body:not(.force-desktop) .figure-cap { font-size: 12px !important; }

  /* Timeline */
  body:not(.force-desktop) .timeline li {
    grid-template-columns: 60px 1fr !important;
    gap: 12px !important;
    padding: 14px 0 !important;
  }
  body:not(.force-desktop) .timeline .year { font-size: 20px !important; }
  body:not(.force-desktop) .timeline .ev { font-size: 13px !important; line-height: 1.5 !important; }
  body:not(.force-desktop) .timeline .tag { display: none !important; }

  /* Work */
  body:not(.force-desktop) .work-rail {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 20px !important;
  }
  body:not(.force-desktop) .work-head {
    padding: 0 20px !important;
    flex-direction: column !important;
    align-items: start !important;
    gap: 18px !important;
    margin-bottom: 32px !important;
  }

  /* CTA — 3개 언어가 갈려 있었습니다 (2026-08-07 · 디자인 5회차).
     index.html 의 페이지 <style> 이 80px/1.0 로 덮고 있었고 cn·en 은 이 파일의
     64px/0.92 를 그대로 받아 390 에서 섹션 높이가 616 대 549 로 달랐습니다.
     80 이 맞습니다 — 데스크톱에서 .cta-sec 200 : 본문 섹션 160 = 1.25 배인
     '닫는 CTA' 인데, 64 로 내리면 본문 섹션과 같아져 그 관계가 사라집니다
     (80 : 64 = 1.25). 크기 축소율도 200→80 이 40% 로 본문(140→56 · 160→64)과 같습니다.
     line-height 도 index 쪽 1.0 을 씁니다 — 이 파일이 .sec-h 를 모바일에서
     1.05 로 푸는 것과 같은 원칙(표시 활자는 작아질수록 줄간격을 푼다)입니다. */
  body:not(.force-desktop) .cta-sec { padding: 80px 20px !important; }
  body:not(.force-desktop) .cta-sec h2 { font-size: 44px !important; line-height: 1 !important; }
  body:not(.force-desktop) .cta-ko { font-size: 16px !important; margin: 18px 0 32px 0 !important; }
  body:not(.force-desktop) .cta-btn-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  body:not(.force-desktop) .btn-line {
    padding: 14px 18px !important;
    font-size: 11px !important;
    justify-content: center !important;
  }

  /* Footer */
  body:not(.force-desktop) .tk-footer { padding: 56px 20px 24px !important; }
  body:not(.force-desktop) .tk-footer .row1 {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-bottom: 28px !important;
  }
  body:not(.force-desktop) .tk-footer .tag-line { font-size: 15px !important; }
  body:not(.force-desktop) .tk-footer .addr { font-size: 12px !important; }
  body:not(.force-desktop) .tk-footer .row2 {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: start !important;
    font-size: 11px !important;
  }
}


/* Threat card styles (mobile-only display via tk.css media block) */
.threat-cards { display: none; }
.threat-cards .tc-row {
  padding: 16px 18px;
  border-top: 1px solid rgba(246,243,236,0.10);
}
.threat-cards .tc-label {
  font-family: var(--serif-ko); font-weight: 500;
  font-size: 15px; color: var(--paper);
  margin-bottom: 12px; letter-spacing: -0.01em;
}
.threat-cards .tc-vals {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.threat-cards .tc-v {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; color: rgba(246,243,236,0.65);
  padding: 6px 8px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(246,243,236,0.08);
}
.threat-cards .tc-v.ok { color: var(--gold-soft); border-color: rgba(196,162,107,0.4); background: rgba(196,162,107,0.08); }
.threat-cards .tc-v.mid { color: rgba(246,243,236,0.85); }
.threat-cards .tc-v.no { opacity: 0.45; }

@media (max-width: 768px) {
  body:not(.force-desktop) .threat-table { display: none !important; }
  body:not(.force-desktop) .threat-cards { display: block !important; }
}


/* === 가독성 보정 (2026-07-31) ===
   밝은 배경(--paper) 위 작은 글자의 명도대비를 실측(WCAG AA 4.5:1)해 보정.
   어두운 배경 위 금색은 7.9:1 로 충분하므로 건드리지 않습니다.
   페이지별 <style>이 tk.css 뒤에 오므로, 확실한 항목만 !important 로 덮습니다. */

/* 본문 문단 줄길이 — 한글은 한 줄이 길면 다음 줄 찾기가 어려워집니다 */
.sec-lead, .prod-content .desc, .faq-a { max-width: 46em; }

/* 푸터 주소·링크가 13px 로 작아 14px 로 */
.tk-footer .addr, .tk-footer ul { font-size: 14px; }

/* ══ 터치 타깃 (2026-08-05 / 2026-08-07 확장) ══
   언어 전환·breadcrumb·푸터 링크가 높이 28px 미만이라 손가락으로 누르기
   어려웠습니다. 글자 크기는 그대로 두고 눌리는 영역만 넓힙니다.

   ★ 2026-08-07 (디자인 5회차) — 조건에 `(pointer: coarse)` 를 더했습니다.
     그전에는 `max-width: 768px` 하나뿐이라 **769px 부터 원상복귀**했습니다.
     아이패드 세로는 810·820·834 라 전부 그 바깥이고, 아이패드는 폭이 넓다고
     마우스를 쓰는 기기가 아닙니다. 실측(23개 페이지, 터치 에뮬레이션):
     810px 에서 44px 미만 타깃 628곳 → 431곳, 푸터 링크 333곳(45x21) → 94곳(28x44).
     **타깃 크기는 뷰포트 폭이 아니라 포인터 종류의 문제**라 이쪽이 정확합니다.
     `max-width` 항을 남긴 건 폭만 좁힌 데스크톱 브라우저(개발자도구 포함)에서
     예전과 같게 보이도록 하기 위해서입니다 — 1440 마우스는 전후 651곳 그대로.
     · `a[href^="tel:"]` 에 `:not(.tk-call)` 이 붙은 이유 — .tk-call 은 모바일
       전용 고정 버튼이라 평소 `display:none` 인데, 이 규칙이 더 구체적이라
       `inline-block` 으로 되살려 데스크톱 본문에 튀어나옵니다. */
@media screen and (max-width: 768px), screen and (pointer: coarse) {
  body:not(.force-desktop) .lang-pill { padding: 4px 6px; }
  body:not(.force-desktop) .lang-pill button { padding: 10px 9px; font-size: 12px; }
  body:not(.force-desktop) .crumbs { gap: 6px; }
  body:not(.force-desktop) .crumbs a,
  body:not(.force-desktop) .crumbs .here { display: inline-block; padding: 9px 5px; }
  body:not(.force-desktop) .tk-footer ul li a,
  body:not(.force-desktop) .tk-footer .row2 a { display: inline-block; padding: 8px 0; }
  body:not(.force-desktop) a[href^="tel:"]:not(.tk-call) { display: inline-block; padding: 6px 0; }
  body:not(.force-desktop) .view-all,
  body:not(.force-desktop) .hero-news .view-all { display: inline-block; padding: 10px 4px; }
}
@media screen and (max-width: 768px), screen and (pointer: coarse) {
  /* 페이지 고유 링크들도 최소 44px 확보 */
  body:not(.force-desktop) .loc-card a,
  body:not(.force-desktop) .privacy-toc a,
  body:not(.force-desktop) .pp-toc a,
  body:not(.force-desktop) .btn-write,
  body:not(.force-desktop) .board-write,
  body:not(.force-desktop) a.md-btn,
  body:not(.force-desktop) .write-btn,
  body:not(.force-desktop) .toc a,
  body:not(.force-desktop) .pp-index a,
  body:not(.force-desktop) .pv-toc a { display: inline-block; padding: 10px 6px; }
  /* 본문 안에 인라인으로 섞인 링크(개인정보처리방침 안내 등) */
  body:not(.force-desktop) .consent-note a,
  body:not(.force-desktop) p > a[target="_blank"] { display: inline-block; padding: 6px 2px; }
}

/* ══ 폰에서 헤더가 화면 밖으로 나가던 것 (2026-08-08 · 디자인 6회차) ══
   `.topbar` 는 `auto 1fr auto` 그리드입니다. 좌우 `auto` 칸의 min-content 합이
   화면보다 커지면 `1fr` 이 0 이 되고 **오른쪽 묶음이 통째로 밖으로 밀립니다.**
   `position: fixed` 라 scrollWidth 로도, 기존 넘침 검사로도 안 잡혔습니다.
   실측(390 · Pretendard 로드 · 하위 페이지): 필요 466 / 가용 390 → 76px 밖.
   "MENU" 가 M 한 글자만 보였고, 하위 페이지에는 다른 내비 진입점이 없습니다.

   ★ 원인의 절반은 2026-08-05 터치 규칙이었습니다.
     `.lang-pill button { padding: 10px 9px }` 가 가로로 54px 을 더했는데,
     그러고도 버튼은 34x41 이라 44px 에 **닿지 못했습니다**. 즉 폭은 다 쓰고
     기준은 못 넘긴 상태였습니다. 여기서는 가로 패딩을 빼고 그만큼을
     `::after` 히트 영역으로 돌립니다 — 히트는 커지고 레이아웃은 줄어듭니다.
       전 34x41 (레이아웃 34) → 후 32x47 (레이아웃 15)
     `::after` 확장폭 8px 은 버튼 사이 거리 17px(gap6+구분자5+gap6)에서 나온
     상한입니다. 더 넓히면 이웃 버튼과 **히트 영역이 겹칩니다**(실측 확인).

   로고·"MENU" 워드마크는 브랜드 판단이라 손대지 않았습니다. 대신 letter-spacing
   때문에 마지막 글자 뒤에 남는 **빈 자간**만 음수 마진으로 걷었습니다(글자 사이
   간격은 그대로, "MENU" 기준 −3.5px).

   범위를 `max-width: 768px` 로 좁힌 이유 — 태블릿(769~1024)은 헤더가 넘치지
   않고, 5회차가 그 폭에서 낸 수치가 기준선이라 흔들지 않기 위해서입니다.
   `screen and` 를 빼면 안 됩니다: A4 인쇄 뷰포트는 794px 이지만 미디어 타입을
   안 적으면 `all` 이 되어 인쇄 규칙과 뒤엉킵니다(5회차 교훈). */
@media screen and (max-width: 768px) {
  body:not(.force-desktop) .topbar { gap: 8px !important; }
  /* 묶음의 `gap: 24px` 는 HTML 인라인이라 !important 로만 이깁니다 */
  body:not(.force-desktop) .topbar > div:last-child { gap: 12px !important; }
  body:not(.force-desktop) .topbar .tk-logo { min-height: 44px; }

  body:not(.force-desktop) .lang-pill { padding: 0 6px !important; gap: 6px !important; }
  body:not(.force-desktop) .lang-pill button {
    position: relative;
    padding: 13px 0;            /* 세로만 — 44px 은 높이로 확보 */
    font-size: 12px;
  }
  body:not(.force-desktop) .lang-pill button::after {
    content: ''; position: absolute; inset: 0 -8px;   /* 히트 영역만 가로로 */
  }

  body:not(.force-desktop) .menu-btn { padding: 8px 0 !important; min-height: 44px; }
  body:not(.force-desktop) .menu-btn > span:first-child { margin-right: -0.32em; }

  /* ── 44px 에 몇 px 모자라던 것들 (2026-08-08 · 6회차) ──
     전부 **높이만** 모자랐고 폭은 이미 넉넉했습니다. 세로로 쌓인 자리라
     `min-height` 로 늘려도 가로 레이아웃이 안 움직입니다.
     범위를 `max-width: 768px` 로 좁힌 건 5회차가 810 에서 낸 419곳을
     기준선으로 남겨 두기 위해서입니다 — 태블릿까지 넓히려면 그 숫자를
     다시 재고 장부에 적으세요. */
  body:not(.force-desktop) .tk-footer .tk-logo { min-height: 44px; }
  body:not(.force-desktop) .tk-footer .row2 a { padding: 13px 0 !important; }
  body:not(.force-desktop) .crumbs a,
  body:not(.force-desktop) .crumbs .here { padding: 13px 5px !important; }
  body:not(.force-desktop) .view-toggle,
  body:not(.force-desktop) .filter-btn,
  body:not(.force-desktop) .ptab,
  body:not(.force-desktop) .cat-action-btn,
  body:not(.force-desktop) .loc-map-link,
  body:not(.force-desktop) .view-all { min-height: 44px; }
  /* .view-all·.loc-map-link 은 inline-block 이라 min-height 만으로는 글자가
     위로 붙습니다 — 세로 가운데로 */
  body:not(.force-desktop) .loc-map-link,
  body:not(.force-desktop) .view-all { display: inline-flex !important; align-items: center; }

  /* 푸터 링크 열 — 높이 44 는 이미 확보돼 있고 **폭이 24~36px** 입니다
     ("致辞" 2글자 = 24px). 왼쪽 정렬 열 안이라 오른쪽으로만 늘리면
     열 폭(155px)을 안 넘습니다. */
  body:not(.force-desktop) .tk-footer ul li a { min-width: 44px; }
}

/* ══ 중국어에는 `word-break: keep-all` 을 쓰면 안 됩니다 (2026-08-08 · 6회차) ══
   `keep-all` 은 국문 조판 관례입니다 — 어절(띄어쓰기 단위) 안에서 끊지 말라는 뜻이죠.
   그런데 중국어에는 띄어쓰기가 없어서, 같은 선언이 **한 문장을 통째로 못 끊게**
   만듭니다. 우리 모바일 규칙 네 곳이 이걸 언어 구분 없이 걸고 있었습니다.

   실측 — company-cn 연혁(390px):
     `11月"干式离子交换防火玻璃强化方法"专利获得` 한 줄의 min-content 305px
     → `.tl-body` min-content 390px → `.tl-grid` 의 `1fr` 트랙이 402.6px 로 굳어
       컨테이너(350px)를 33px 넘김. `word-break: normal` 로 풀면 같은 줄 155px,
       트랙 350px, 넘침 0.
   범위 — 390 에서 중국어 9페이지에 keep-all 이 106곳(한자 6자 이상을 직접 가진 것
     70곳) 걸립니다. 810·1440 에서는 5곳뿐이고 그 5곳(catalog-cn `.cat-cg-title`)은
     한자 연속 6자 미만이라 넘치지 않습니다 — 그래서 `max-width: 768px` 로 좁혀
     5회차가 잡아 둔 810·1440 기준선을 건드리지 않습니다.
   선택자를 네 줄로 늘어놓은 이유 — `!important` 끼리는 특이도로 갈립니다.
     원본 규칙이 (0,2,3)·(0,2,4)라 `html[lang^="zh"] body *`(0,2,2) 하나로는 집니다. */
@media screen and (max-width: 768px) {
  html[lang^="zh"] body:not(.force-desktop) *,
  html[lang^="zh"] body:not(.force-desktop) .prod-content h2,
  html[lang^="zh"] body:not(.force-desktop) section[style*="background: var(--night)"] li,
  html[lang^="zh"] body:not(.force-desktop) section > div.reveal p { word-break: normal !important; }
}

/* ══ 반대로 한국어에는 걸어야 합니다 (2026-08-08 · 6회차) ══
   국문은 어절 안에서 끊으면 읽는 순간 걸립니다 — `배강도유 / 리`, `02 공 / 장`,
   `발급 가 / 능`. 지금까지 `keep-all` 은 모바일 규칙 네 곳에만 있었고,
   **`index.html` 만 자기 `<style>` 에서 `body, body * { word-break: keep-all }` 로
   전면 적용**하고 있었습니다. 그래서 390 실측에서 index 만 이 문제가 0곳이었습니다.
   같은 규칙을 나머지 한국어 페이지에도 줍니다(선례를 따르는 것이지 새 방침이 아닙니다).
   실측(390, 23페이지 · 24자 이하 라벨 기준): 어절 중간 끊김 **16곳 → 0곳**,
   같은 조건에서 화면 밖 잘림은 5곳 그대로(전부 기존 마퀴·mobile-preview).

   ★ 2026-08-08 · 9회차 — 미디어쿼리를 걷어냈습니다. 폭에 따라 조판 규칙이
     달라질 이유가 없습니다. 6회차가 `max-width: 768px` 로 좁힌 것은 그 회차의
     주제가 폰이어서 810·1440 기준선을 건드리지 않으려던 것인데, 그 결과
     **810 에서 한글 어절 중간 끊김이 80곳** 그대로 남아 세 회차 내내 안 움직였습니다.
     원인 분류(810, 라벨 기준 80곳): 65곳이 "이 규칙이 없어서", 10곳이 "어절이
     칸보다 넓어서", 5곳이 "line-clamp 로 애초에 안 보이는 줄".
     실측 810 **80 → 0** · 1440 **6 → 0** · 390 5 → 5(남은 5는 tk.css 를
     로드하지 않는 mobile-preview).

   ★ 여기에 `overflow-wrap` 을 같이 쓰면 안 됩니다 — 세 가지를 실측으로 확인했습니다.
     · `break-word` 를 `*` 에 주면 **라틴 표시 활자가 쪼개집니다.** 메인 히어로
       "TAEKWANG"(152px Cormorant 800.8px, 칸 720px)이 1440 에서 두 줄이 됩니다
       — 이 글자가 카드 뒤로 넘치는 것은 설계값입니다(5회차). `.feat-bullets .k`
       "DESIGNATION"(칸 80px)도 `SIGNATIO / N` 으로 끊깁니다.
     · `break-word` 는 `pages/privacy.html` 의 `.pv-table td { overflow-wrap: anywhere }`
       를 특이도로 이깁니다((0,2,2) > (0,2,0)). 4회차가 표 칸 419px 넘침을 고친
       그 규칙이 무효가 되어 **390 문서 높이가 11024 → 8565px** 로 변했습니다.
     · `anywhere` 는 min-content 를 한 글자로 만들어 칸이 되레 좁아집니다 —
       같은 조건에서 810 의 끊김이 0 이 아니라 **22곳**이 됩니다.
     칸보다 넓은 어절(810 에 10곳)은 이 규칙만으로는 끊기지 않고 밖으로 흘러넘칩니다.
     넘침이 실제로 보이는 자리에만 아래에서 선택자별로 `break-word` 를 답니다. */
html[lang="ko"] body:not(.force-desktop) * { word-break: keep-all; }

/* ══ 캐러셀 조작부 — 레이아웃은 그대로 두고 히트 영역만 (2026-08-08 · 6회차) ══
   여기 있는 것들이 사이트에서 **유일하게 AA(24x24)도 못 넘는** 타깃이었습니다.
     · 설비 캐러셀 점 `.ln-dot`  24x2 (활성 24x3) — 40곳 / 2페이지
     · 메인 히어로 점 `#slideDots button`  24x12 — 14곳 / 3페이지
     · 재생·정지 `.play-btn` 28x28, 좌우 화살표 `.ln-prev/.ln-next` 38x38 — 31곳
   점을 굵히면 디자인(가는 선 표시자)이 바뀌고, 패딩을 주면 줄 높이가 변해
   위 사진이 밀립니다. 그래서 **보이는 상자는 1px 도 안 건드리고** 투명한
   `::after` 로 손가락이 닿는 범위만 넓혔습니다. 의사요소는 자기를 만든 요소로
   히트 테스트되므로 클릭은 버튼에 그대로 들어갑니다.
   확장 폭은 이웃과의 거리에서 나온 상한입니다 — 넘기면 히트 영역이 겹쳐
   오탭이 납니다(`.ln-dot` gap 6 → 좌우 2px, 히어로 점 gap 14 → 좌우 6px).
   ★ `.ln-carousel` 에 `overflow: hidden` 이 있어 **아래쪽 확장은 잘립니다.**
     점이 `bottom: 14px` 이라 아래로는 14px 이 한계이고, 나머지는 위로 폅니다.
   레이아웃 영향 0 — render-diff 1440/810 전수에서 움직인 요소 0개. */
.ln-dot { position: relative; }
.ln-dot::after { content: ''; position: absolute; inset: -28px -2px -14px; }   /* 24x2  → 28x44 */

.hero-slider-ctrl .dots button { position: relative; }
.hero-slider-ctrl .dots button::after { content: ''; position: absolute; inset: -16px -6px; }  /* 32x13 → 44x45 (gap 14) */
/* 390 에서는 점 폭 24 · gap 8 이라 좌우 6px 이면 이웃과 4px 겹칩니다(실측).
   겹친 히트 영역은 오탭을 만들므로 gap 의 절반보다 작게 잡습니다. */
@media screen and (max-width: 768px) {
  .hero-slider-ctrl .dots button::after { inset: -16px -3px; }                                /* 24x12 → 30x44 */
}

.hero-slider-ctrl .play-btn { position: relative; }
.hero-slider-ctrl .play-btn::after { content: ''; position: absolute; inset: -8px; }   /* 28x28(390) → 44x44 */

.ln-prev, .ln-next { position: absolute; }   /* 원래 absolute — 명시만 */
.ln-prev::after, .ln-next::after { content: ''; position: absolute; inset: -3px; }     /* 38x38 → 44x44 */

/* ══ 모션 축소 설정 존중 (2026-08-05 · 2026-08-08 전수 실측으로 갱신) ══
   전정기관 질환·멀미·주의력 문제로 기기에서 "동작 줄이기"를 켠 사용자가 있습니다.
   설정을 켠 사용자에게만 적용되며, 기본 동작은 그대로입니다.

   ★ 이 블록이 멈추는 것과 못 멈추는 것 (2026-08-08 · 디자인 10회차 실측, @1440)
     · CSS 전이가 걸린 요소 1,652곳 중 **1,622곳**을 멈춥니다(98.2%).
       못 멈추는 30곳은 전부 **tk.css 를 로드하지 않는 페이지**입니다 —
       404.html 10 · pages/mobile-preview.html 11 · 지명원.html 1 · video/*.html 2×4.
       그 파일들에는 각자 같은 블록을 넣어 두었습니다(2026-08-08).
     · CSS 애니메이션 3곳(메인 3판 `.scroll-tag i`) 전부 멈춥니다.
     · **CSS 로는 못 멈추는 것이 셋 있습니다.**
       ① setInterval 캐러셀 — 히어로(5.5초)·설비(4.5초). tk.js `initReducedMotion()` 과
          equipment(-cn).html 의 `start()` 가드가 멈춥니다.
       ② 영상 4편의 requestAnimationFrame 30초 루프 — video/animations.jsx 의 Stage.
       ③ JS `scrollTo({behavior:'smooth'})` — 아래 `scroll-behavior: auto` 로는 안 됩니다.
          CSSOM View 상 이 속성은 behavior:'auto' 일 때만 참조됩니다. 호출부에서 갈라야 합니다.
     · 저장소에 `scroll-behavior: smooth` 선언은 **0곳**입니다. 아래 한 줄은 보험입니다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* 넘어간 뒤의 잔상(크로스페이드)을 없앱니다.
     ★ 이 두 줄은 **넘김 자체를 멈추지 않습니다.** 넘김은 인라인 스크립트의
       setInterval 이고 위 ①이 담당합니다. 2026-08-08 이전 주석은 "첫 장에서 멈춘다"
       고 적고 있었지만, 설정을 켜고 12초를 기다리면 1장 → 3장으로 가 있었습니다(실측). */
  .hero-slide:not(.active), .ln-slide:not(.active) { opacity: 0 !important; }
  /* ★ 모션을 줄이려다 내용을 지우면 안 됩니다.
     `.reveal` 은 스크롤해 들어와야 opacity 가 1 이 되는데, 전이를 끄면 `in` 이 붙어도
     아무 일이 안 일어납니다. 그래서 처음부터 보이게 못박습니다.
     실측(2026-08-08): 설정을 켠 채 스크롤하지 않았을 때 화면 밖 `.reveal` 중
     opacity<0.05 인 것 — 메인 8→0 · 사업소개 9→0 · 설비 17→0 · 방화 11→0. */
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* 규격 표: 모바일에서 11px 은 읽기 힘들어 12.5px 로 올리고 여백을 줄여 폭을 맞춥니다 */
@media (max-width: 768px) {
  body:not(.force-desktop) .spec-table th,
  body:not(.force-desktop) .spec-table td { padding: 9px 8px !important; font-size: 12.5px !important; }
}

/* ══ 본문 바로가기 (2026-08-05) ══
   메가메뉴 링크가 많아 키보드 사용자가 매 페이지마다 20여 개를 지나야 본문에
   닿았습니다(WCAG 2.4.1 Bypass Blocks, Level A). 평소에는 화면 밖에 있다가
   Tab 을 처음 누르면 나타납니다. 마우스 사용자에게는 보이지 않습니다. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 9999;
  background: var(--ink); color: var(--paper);
  padding: 12px 20px; border: 2px solid var(--gold);
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  text-decoration: none; border-radius: 0;
  transition: top .15s;
}
.skip-link:focus { top: 12px; outline: 2px solid var(--gold-soft); outline-offset: 2px; }

/* ══ 배경이미지 지연 로딩 (2026-08-05) ══
   메인은 첫 화면에 116KB 만 필요한데 2012KB 를 받고 있었습니다. CSS 배경이미지는
   <img> 와 달리 loading="lazy" 가 없어 화면 밖 사진도 전부 즉시 내려받습니다.
   ★ html.lazybg 클래스는 JS 가 붙입니다 — JS 가 꺼져 있으면 이 규칙이 아예
     적용되지 않아 예전처럼 모든 이미지가 그대로 보입니다. 이 조건을 없애지 마세요. */
html.lazybg [data-lazybg]:not(.bg-on) { background-image: none !important; }

/* 푸터 연락처 — 공장별 전화/팩스를 한 줄로 묶어 읽기 쉽게 */
.tk-footer .addr { font-style: normal; }
.tk-footer .ft-tel { font-family: var(--mono); font-size: 13px; opacity: 0.85; }
.tk-footer .ft-tel a { color: inherit; text-decoration: none; }
.tk-footer .ft-tel a:hover { color: var(--gold-soft); }

/* ══ 바로걸기 버튼 (2026-08-06) ══
   현장에서 규격을 보다 바로 전화할 일이 많은데, 번호가 맨 아래 푸터에만 있어
   매번 끝까지 스크롤해야 했습니다. 헤더는 390px 에서 이미 꽉 차 버튼이 찌그러져,
   엄지로 닿는 화면 하단 고정으로 두었습니다. 모바일에서만 보입니다. */
.tk-call { display: none; }
@media (max-width: 768px) {
  body:not(.force-desktop) .tk-call {
    position: fixed; left: 16px; bottom: 16px; z-index: 90;   /* 오른쪽은 보기전환 버튼이 쓰고 있음 */
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 0 20px;          /* 장갑 끼고도 눌리도록 48px */
    background: var(--ink); color: var(--paper);
    border: 1px solid var(--gold);
    border-radius: 999px; text-decoration: none;
    font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
    box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  }
  body:not(.force-desktop) .tk-call svg { color: var(--gold-soft); flex: none; }
  body:not(.force-desktop) .tk-call:active { background: var(--gold); color: var(--ink); }
  body:not(.force-desktop) .tk-call:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 3px; }
}
@media print { .tk-call { display: none !important; } }

/* ══════════════════════════════════════════════════════════════════════════
   태블릿 세로 769~1024px (2026-08-07 · 디자인 5회차)

   이 파일의 레이아웃 미디어쿼리는 오랫동안 `max-width: 768px` 하나뿐이었습니다.
   즉 **769px 부터는 1440px 용 레이아웃이 그대로 걸립니다.** 실제 기기 폭은
   iPad mini 768 / iPad 10.2 810 / iPad Air 820 / iPad Pro 11 834 / iPad Pro 12.9 1024 라
   아이패드 세로가 전부 그 사각지대에 들어갔습니다.

   ★ 왜 아무도 못 봤는가 — `html, body { overflow-x: hidden }`(이 파일 390행) 때문에
     넘친 내용이 가로 스크롤바로 드러나지 않고 **그냥 잘려 나갔습니다.**
     그래서 `documentElement.scrollWidth > clientWidth` 로 재는 기존 점검은
     810px 에서 넘침 0 을 보고했습니다. 요소 rect 로 직접 재야 보입니다
     (rect.right > 뷰포트 폭). 실측: 잘림 있는 페이지 768px 2개 · 1440px 2개
     (둘 다 의도된 무한 흐름 마퀴) 인데 **810px 은 19개**였습니다.

   측정값 (810px, 수정 전 → 후)
     · 푸터 Resources 열       화면 밖 +61px  → 0    (19개 전 페이지)
     · 설비 .ln-content        +59px, 기계명 "샌드블라스트"가 26px 칸에서 6줄 → 0
     · 메인 히어로 .hero-cards x=848 로 **통째로 화면 밖** → x=40 전부 보임
     · 조직도 .org-row         +402px (오른쪽 2개 부서 안 보임) → 0
     · 사업소개 .index-row      7열 97px 칸, "방화유 / 리" 음절 중간 끊김 → 3열 219px
     · 음절 중간 줄바꿈 합계    18곳 → 6곳 (남은 6곳은 390px 에도 있는 기존 것)

   ※ 1440 · 390 은 이 블록에 걸리지 않습니다. 두 폭의 전후 렌더는 동일합니다.
   ★ `screen and` 를 빼지 마세요 — A4 인쇄 뷰포트가 794px 이라 이 구간 한가운데에
     들어옵니다. 미디어 타입을 안 적으면 `all` 이라 인쇄에도 걸려, 이 파일 맨 아래
     인쇄 규칙과 뒤엉킵니다. 기존 모바일 규칙이 `max-width:768px` 이라 인쇄에
     안 걸렸던 것은 우연이 아니라 794 > 768 이었기 때문입니다. */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* 푸터 — 데스크톱은 `1.6fr + 4×1fr + 4×64px gap` 이라 뷰포트 880px 이상을
     요구합니다. 브랜드 블록을 한 줄 전체로 내리고 링크만 4열로 둡니다. */
  body:not(.force-desktop) .tk-footer .row1 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 44px 32px !important;
  }
  body:not(.force-desktop) .tk-footer .row1 > div:first-child { grid-column: 1 / -1; }

  /* 설비 라인 블록 — 데스크톱 `100px 320px 1fr` + gap 64 는 870px 이상이 필요.
     번호와 사진을 윗줄에 두고 본문을 사진 아래(2열)로 흘립니다. */
  body:not(.force-desktop) .line-block {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 28px 32px !important;
  }
  body:not(.force-desktop) .line-block > .ln-content { grid-column: 2; }

  /* 히어로 — 왼쪽 카피(152px 표시활자)와 오른쪽 460px 카드가 `1fr 1fr` 이라
     왼쪽 칸의 min-content 가 그리드를 뷰포트 밖으로 밀어냅니다. 세로로 쌓습니다.
     `.hero` 는 height:100vh / max-height:980px / overflow:hidden 이라
     높이를 풀지 않으면 쌓은 만큼이 아래로 잘립니다. */
  body:not(.force-desktop) .hero {
    height: auto !important; min-height: 0 !important; max-height: none !important;
  }
  body:not(.force-desktop) .hero-content {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 150px 40px 210px 40px !important;
    gap: 44px !important;
  }
  body:not(.force-desktop) .hero-copy { padding-left: 0 !important; max-width: 100% !important; }
  body:not(.force-desktop) .hero h1 { font-size: 96px !important; }   /* 152 → 96 ("TAEKWANG" 522px / 칸 730px) */
  body:not(.force-desktop) .scroll-tag { display: none !important; }  /* bottom:220px 고정이라 카드 위에 겹침 */
  body:not(.force-desktop) .hero-cards {
    width: 100% !important; max-width: 100% !important;
    justify-self: stretch !important; margin: 0 !important;
  }
  /* 히어로 하단 띠 — 5회차가 `1fr 300px` 로 잡아 잘림은 없앴지만, 남은 510px 안에
     `60px + 3칸 + 100px + gap 32×4` 를 넣느라 뉴스 제목 칸이 **66px**(글자 4개)이
     되고 `VIEW ALL` 이 40px 잘려 "VIEW A" 로 보였습니다(9회차 실측).
     `.nh` 가 `-webkit-line-clamp: 1` 이라 넘친 줄은 화면에 안 나오고 …로 잘립니다 —
     즉 810 의 뉴스 스트립은 제목을 못 읽는 상태였습니다.
     세로로 쌓으면 같은 칸이 **137px**(10~12자)이 되고 넘침이 0 이 됩니다.
     영상 패널도 300 → 810px 이라 사진이 잘리지 않습니다. 높이 116 → 227px. */
  body:not(.force-desktop) .hero-bottom { grid-template-columns: minmax(0, 1fr) !important; }
  body:not(.force-desktop) .hero-news { grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto !important; }

  /* 기술현황 배너 — `1.4fr 1fr` 의 왼쪽 칸이 810 에서 351px 인데 h1 이 124px 라
     "기술현황." 한 어절만 484px 입니다. keep-all 전에는 `기술현 / 황.` 으로 끊겨
     줄간격 0.92 탓에 앞줄 받침과 뒷줄 자소가 겹쳤고, keep-all 뒤에는 왼쪽 칸이
     min-content 로 굳어 오른쪽 설명 칸을 56px 밖으로 밀어냅니다.
     ≤768 에 이미 있는 규칙(1열)을 이 구간에도 줍니다. */
  body:not(.force-desktop) .tech-banner .row1 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }

  /* 회사소개 연혁 — `320px 1fr` + gap 80 이 본문 칸을 min-content 아래로 눌러
     오른쪽이 21px 잘렸습니다. */
  body:not(.force-desktop) .tl-grid { grid-template-columns: 200px minmax(0, 1fr) !important; gap: 40px !important; }
  body:not(.force-desktop) .tl-side { font-size: 64px !important; }
  body:not(.force-desktop) .heritage-grid { gap: 48px !important; }   /* 96 → 48, 오른쪽 칸 8px 잘림 해소 */

  /* 고객지원 탭 — 네 탭의 자연폭 합이 688px 인데 좌우 64px 패딩을 빼면 810 에서
     682px 뿐이라, 네 탭 전부가 "공지사 / 항" "고객 게시 / 판" 처럼 끊겼습니다.
     816px 이상에서는 멀쩡합니다. 탭 자체의 좌우 패딩만 32→18px 로 줄이면
     합이 576px 이 되어 넉넉합니다 — .stabs-inner 의 64px 은 그대로 둬야
     본문 좌측선(64px)과 맞습니다.
     ※ 이 규칙은 tk.css 에 둡니다 — .stab 은 contact(-cn).html 의
       페이지 <style> 에 있어 여기 !important 가 필요합니다. */
  body:not(.force-desktop) .stabs-inner { overflow-x: auto !important; }
  body:not(.force-desktop) .stab { padding: 22px 18px !important; white-space: nowrap !important; flex-shrink: 0 !important; }

  /* 공지 머리줄 — `display:flex; justify-content:space-between` 인데 오른쪽 묶음이
     `min-width: 320px` + 버튼 두 개라 안 줄어듭니다. 810 에서 오른끝이 뷰포트를
     넘었습니다(터치 802 · 마우스 838 / 본문 오른쪽 경계는 746).
     ≤768 에 이미 있는 규칙(세로 쌓기)을 이 구간에도 줍니다 → 오른끝 746, 넘침 0.
     ※ `.notice-head` 는 contact(-cn).html 의 페이지 <style> 이라 !important 가 필요합니다. */
  body:not(.force-desktop) .notice-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
  }

  /* 다열 그리드 — 810 에서 한 칸이 100px 아래로 내려가 한글이 음절 중간에서 끊깁니다 */
  body:not(.force-desktop) .index-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }  /* 97 → 219px */
  body:not(.force-desktop) .index-row a:nth-child(3n) { border-right: 0 !important; }   /* 6열용 :last-child 대신 3열 기준으로 */
  body:not(.force-desktop) .gal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }   /* 104 → 160px */
}

/* 공지 검색 버튼 — .notice-search 는 flex 인데 input 만 `flex: 1` 이고 버튼에는
   축소 방지가 없어, 줄이 좁아지면 버튼이 먼저 찌그러집니다. 810px 에서 폭 49px
   (좌우 패딩 36px 을 빼면 글자 자리 13px)이 되어 "검 / 색" 으로 끊겼습니다.
   폭과 무관한 문제라 미디어쿼리 밖에 둡니다 — 1440·768·390 렌더는 전후 동일합니다.
   (.notice-search 는 contact(-cn).html 의 페이지 <style> 이라 !important 필요) */
.notice-search button { flex: none !important; }

/* ※ 태블릿 구간보다 넓은 데서도 잘리는 곳이 둘 더 있었습니다. 둘 다 페이지별
   <style> 에 정의돼 있어 이 파일에서 고치면 안 먹습니다 — 그 파일에서 고쳤습니다.
   · 조직도 `.org-row`      — pages/company(-cn).html   (1208px 미만에서 잘림)
   · 메인 히어로 `.hero-content` — index.html · homepage-cn.html · homepage-en.html
                                (1304px 미만에서 카드가 잘림) */

/* ══════════════════════════════════════════════════════════════════════════
   사진 슬롯 (2026-08-08 · 디자인 11회차)

   "슬롯 비율과 원본 비율을 맞추라"(CLAUDE.md)를 전수로 재다가 나온 세 가지입니다.
   측정 도구는 .claude/audit/scripts/img-fit-scan.mjs — 원본은 브라우저
   naturalWidth/Height 로, 슬롯은 background-origin 박스로 재고 "살아남은 비율"
   (보이는 원본 넓이 ÷ 원본 넓이)을 냅니다.
   ────────────────────────────────────────────────────────────────────────── */

/* ① 메인 히어로 첫 슬라이드가 폰·태블릿에서 **타일처럼 반복**되고 있었습니다.
      `.hero-slide` 는 `background-size: cover` 인데 첫 장만 인라인으로 `150%`
      입니다(항공사진을 확대해 회사 간판 글자를 읽히게 한 것 — 의도된 구도).
      cover 는 슬롯을 항상 채우니 반복이 드러나지 않지만, 150% 는 슬롯이 세로로
      길어지는 ≤1024 에서 **이미지보다 슬롯이 커집니다.** 그리고 이 저장소에는
      `background-repeat` 선언이 배경 627곳 중 6곳뿐이라 기본값 `repeat` 입니다.
      실측(전) — 390: 슬롯 390x1396.8 · 그린 585x436 → 세로 4번 반복
                 810: 슬롯 810x1338   · 그린 1215x907 → 세로 2번 반복
      ★ 이 슬라이드는 `active` 라 **첫 페인트에 그대로 보입니다.**
        index · homepage-cn · homepage-en 세 언어 전부입니다.
      1440 은 그린 크기가 2160x1612 로 슬롯(1440x900)보다 커서 반복이 없었고,
      그래서 데스크톱만 보던 지금까지 아무도 못 봤습니다.
      ≤1024 에서만 cover 로 되돌립니다 — 1440 렌더는 전후 동일합니다. */
.hero-slide { background-repeat: no-repeat; }        /* 폭과 무관한 보험 */
@media screen and (max-width: 1024px) {
  .hero-slide { background-size: cover !important; }
}

/* ② 설비 갤러리가 모바일에서 **1열**이었습니다 — 이 파일 897행이 2열을 지시하는데
      효과가 없었습니다. `.gal-grid` 의 마크업이 `<div class="gal-grid reveal">` 이고,
      이 파일 1040행의 `section > div.reveal { display: flex !important }` 가
      그리드를 세로 flex 로 바꿔 버려 `grid-template-columns` 가 무의미해집니다
      (gap 도 뒤에 오는 24px 이 이깁니다).
      실측(전) — 390: 타일 350x262.5 · 갤러리 높이 3,414px
                 768: 타일 728x546   · 갤러리 높이 7,079px  (1440 은 724px)
      평택 사진 원본이 260x172 라 768 에서 **3.17배 확대**로 그려지고 있었습니다.
      897행의 의도(2열 · gap 8)를 그대로 되살립니다. 인천 파노라마의 잘림 비율은
      타일이 4:3 그대로라 변하지 않습니다. */
@media (max-width: 768px) {
  body:not(.force-desktop) .gal-grid.reveal {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* ③ 사업소개 히어로가 390 에서 **설비 제조사 워드마크만** 남았습니다.
      원본 1400x542(2.583:1)가 390x480(0.813:1) 슬롯에 cover 로 들어가면 가로
      31.4%(원본 x 480~920)만 남는데, 사진 속 주황색 빔의 "Folga 富高" 글자가
      원본 x 25~62% 라 남는 자리 한가운데를 차지합니다. 실측 생존 31.5%.
      왼쪽으로 옮기면 같은 31.4% 안에 롤러·모터가 들어오고 상표 글자는 사라집니다.
      768 에서는 가로 59%가 남아 전후 모두 상표를 포함합니다 — 나빠지는 폭은 없습니다.
      (사진 파일은 건드리지 않았습니다. 되돌리려면 이 한 줄만 지우면 됩니다.) */
@media (max-width: 768px) {
  body[data-page="business"] .subpage-hero .bg { background-position: 15% 50%; }
}

/* ─────────────────────────────────────────────────────────────────────────
   고대비 모드 (forced-colors: active) — 2026-08-09 · 디자인 16회차

   윈도우 '대비 테마'(설정 → 접근성 → 대비 테마)를 켜면 브라우저가 사이트의
   색을 시스템 색으로 **강제 치환**합니다. 저시력 사용자가 실제로 씁니다.
   29페이지를 켠 상태/끈 상태로 각각 렌더해 대조한 결과, 이 저장소에서 실제로
   무너지는 것은 하나였습니다 — **어느 것이 선택돼 있는지 알 수 없습니다.**

   탭·칩 다섯 종이 선택 상태를 배경색·글자색·테두리색으로만 표시하는데
   그 셋이 전부 치환 대상입니다. 수치·전후 대조는 `.claude/audit/design.md` 16회차에
   있습니다(요소를 잘라 픽셀 평균 밝기로 활성 : 비활성 차 Δ 를 잰 표).
   고치기 전 Δ 는 다섯 종 모두 **2 미만**이었습니다 — 눈으로 못 가립니다.

   ★ 밑줄형 탭(.stab · .plant-tab)에는 반대 방향의 문제도 있습니다 —
     비활성 탭의 `border-bottom: 2px solid transparent` 가 CanvasText 로
     치환돼 **모든 탭에 똑같은 밑줄이 그어집니다.** 그래서 비활성은 Canvas 로
     되돌려 지우고 활성만 Highlight 로 긋습니다.

   ★★ 여기서 한 번 틀렸습니다 — 교과서대로 `background: Highlight;
      color: HighlightText` 를 줬더니 **글자가 통째로 사라졌습니다.**
      Chromium 은 고대비에서 **블록 컨테이너의 글자 뒤에 Canvas 색 판(backplate)을
      자동으로 깝니다.** `<button>`·`<div>` 가 그 대상이라, 남색 Highlight 칩 위에
      흰 판이 깔리고 그 위에 흰 HighlightText 글자가 앉아 흰 사각형만 남습니다.
      (인라인 `<span>` 에는 안 깔립니다. 그래서 최소 예제로는 재현이 안 됩니다.)
      실측 5안을 렌더해 비교한 뒤 **면을 칠하지 않고 테두리와 굵기로** 갔습니다:
        A `outline:3px Highlight` + `font-weight:700`  ← 채택. 두 테마 모두 읽힘
        B 채움 + CanvasText                            읽히지만 글자 자리에 흰 딱지
        C 채움 + `forced-color-adjust:none`            깔끔하지만 고대비를 무시함
        D `border-width:3px`                           읽히나 상자가 4px 커짐
        E 채움(Mark/MarkText)                          읽히나 B 와 같은 딱지
      `outline` 은 **레이아웃을 안 건드립니다**(`outline-offset:-1px` 로 안쪽에 그림).

   · `forced-color-adjust: none` 은 쓰지 않았습니다. 그건 "이 자리는 고대비를
     통째로 무시한다" 는 선언이라 브랜드 로고 같은 자리에만 씁니다.
     저장소 전체 선언 수는 지금도 **0곳**입니다.
   · `!important` 인 이유 — 이 다섯 규칙은 전부 **페이지별 `<style>`** 안에 있고
     문서 순서상 그쪽이 tk.css 를 이깁니다. 미디어쿼리 안이라 **끈 상태에는
     한 줄도 닿지 않습니다**(1~15회차 기준선이 전부 끈 상태입니다).
   · tk.css 를 로드하지 않는 8개 파일(404 · mobile-preview · 지명원 2 · 영상 4)
     에는 이런 상태 표시가 없어 대상이 아닙니다.
   · 사진 위 글자는 위의 backplate 가 오히려 구해 줍니다 — 5,504곳을 픽셀로
     확인했고 대비 미달 0곳이었습니다. 근거는 `.claude/audit/design.md` 16회차.
   ───────────────────────────────────────────────────────────────────────── */
@media (forced-colors: active) {
  /* 채움형이던 것 — 면 대신 굵은 Highlight 테두리 + 굵은 글씨 */
  .ptab.active,
  .filter-btn.active,
  .prod-chip.selected {
    outline: 3px solid Highlight !important;
    outline-offset: -1px !important;
    font-weight: 700 !important;
  }
  /* 자식에 굵기를 따로 박아 둔 것들은 함께 넘깁니다(.ko 는 500 고정) */
  .prod-chip.selected .ko,
  .prod-chip.selected .en,
  .prod-chip.selected .n { font-weight: 700 !important; }

  /* 밑줄형 — 비활성의 `border-bottom: 2px solid transparent` 가 CanvasText 로
     치환돼 모든 탭에 밑줄이 그어집니다. 비활성은 Canvas 로 지우고 활성만 긋습니다.
     ★ `margin-bottom` 을 0 으로 되돌리는 것이 함께 필요합니다 — 원래 -1px 이라
       탭이 탭줄 컨테이너의 1px 밑선 위에 겹쳐 그려지는데, 비활성 테두리가
       투명에서 **불투명 Canvas** 로 바뀌는 순간 그 밑선을 지웁니다(탭 구간만
       선이 끊깁니다). 0 이면 탭이 밑선 위에 얹히지 않아 선이 이어집니다.
       고대비에서만 탭줄이 1px 높아집니다. */
  .stab,
  .plant-tab { border-bottom-color: Canvas !important; margin-bottom: 0 !important; }
  .stab.active,
  .plant-tab.active {
    border-bottom-color: Highlight !important;
    font-weight: 700 !important;
  }
  .plant-tab.active .pt-ko,
  .plant-tab.active .pt-en { font-weight: 700 !important; }

  /* 헤더 언어 전환 — `opacity` 는 강제 치환 대상이 **아니라** 그대로 남습니다.
     비활성 버튼의 `opacity: 0.5` 가 글자와 그 뒤 backplate 를 함께 반투명하게
     만들어, 어두운 히어로 위에서 대비가 **4.18~4.24:1** 로 내려앉습니다
     (11~12px 은 4.5 필요 · 실측 fire-rated ko/cn @1440·@390, 구분자 "/" 는 3.81:1).
     밝기로 현재 언어를 표시하던 것이라, 고대비에서는 셋 다 불투명으로 두고
     현재 언어를 **밑줄**로 바꿉니다(밑줄은 폭을 안 바꿔 360px 헤더에 영향 없음). */
  .lang-pill { opacity: 1 !important; }
  .lang-pill button { opacity: 1 !important; }
  /* 구분자 "/" 는 HTML 인라인 `style="opacity:.4"` 라 !important 로만 이깁니다
     (21개 파일에 같은 인라인이 박혀 있어 CSS 로 한 번에 넘깁니다) */
  .lang-pill span { opacity: 1 !important; }
  /* ★ 밑줄을 글자에 바짝 붙입니다 — Chromium 의 backplate 는 **글자 줄상자만**
     덮습니다. `text-underline-offset: 3px` 로 띄우면 밑줄이 판 밖(사진 위)에
     떨어져 검은 밑줄이 검은 사진에 묻힙니다(실측: 안 보임). 1px + 두께 2px 이면
     판 안에 들어옵니다. 폭 변화 0 — 1440 pill 126.1px · 360 pill 97.1px 로 동일. */
  .lang-pill button.active {
    text-decoration: underline !important;
    text-underline-offset: 1px !important;
    text-decoration-thickness: 2px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   인쇄 (2026-08-06)

   사무실에서 제품 사양·설비 목록을 뽑아 회의·입찰에 들고 갑니다.
   그런데 이 사이트는 섹션 절반이 짙은 배경에 흰 글자입니다. 그대로 인쇄하면
   한 페이지에 40~50개 검은 판이 찍혀 토너를 먹고, 정작 흰 글자는 흰 종이에
   묻혀 안 보입니다. 사진은 전부 CSS background-image 라 브라우저가 기본값으로
   인쇄에서 빼기 때문에, 사진 자리에는 빈 상자만 남습니다.

   그래서 인쇄는 '문서'로 다시 짭니다 — 검은 글자, 흰 종이, 사진 자리는 접어
   없애고 표·사양·연락처만 남깁니다. 사진이 들어간 문서가 필요하면
   지명원-print.html 이 따로 있습니다.

   ★ 카탈로그(body[data-page="catalog"])는 제외합니다. 전면 컬러 A4 면으로
     자체 인쇄 설계가 있어서, 여기 규칙이 걸리면 표지 사진이 통째로 사라집니다.
     선택자에서 `body:not([data-page="catalog"])` 를 떼지 마세요.
   ★ 지명원 두 판은 tk.css 를 아예 로드하지 않습니다(jmw.css 전용).
   ───────────────────────────────────────────────────────────────────────── */
@media print {
  @page { size: A4; margin: 14mm 12mm 16mm; }

  /* ★ .reveal 은 화면에서 스크롤해 들어와야 opacity 가 1 이 됩니다(tk.js initReveal).
     스크롤하지 않고 바로 인쇄하면 화면 밖 블록이 전부 opacity:0 으로 찍힙니다 —
     사업소개 10개 중 8개가 백지였습니다. 이 줄을 지우지 마세요.
     (prefers-reduced-motion 블록에도 같은 이유로 같은 재설정이 들어 있습니다.) */
  .reveal, .reveal-1, .reveal-2, .reveal-3, .reveal-4 {
    opacity: 1 !important; transform: none !important;
  }

  html { background: #fff !important; }
  body:not([data-page="catalog"]) {
    background: #fff !important;
    color: #14181f !important;
    font-size: 10.5pt !important;
    line-height: 1.55 !important;
  }

  /* 배경 판·사진·그림자 제거. 글자는 전부 먹색으로. */
  body:not([data-page="catalog"]) *,
  body:not([data-page="catalog"]) *::before,
  body:not([data-page="catalog"]) *::after {
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
    color: #14181f !important;
    border-color: #b9b3a6 !important;
  }
  /* 강조는 색 대신 굵기로 — 사무실 프린터는 대개 흑백입니다. */
  body:not([data-page="catalog"]) :is(em, strong, b, .cert, .badge, .num, mark) {
    font-weight: 700 !important;
  }

  /* 화면 전용 조작부 — 종이에서는 의미가 없습니다. */
  body:not([data-page="catalog"]) :is(
    .print-hide, .topbar, .tk-header, .subnav, .crumbs, .ph-meta,
    .drawer, .drawer-top, .drawer-close, .drawer-grid, .drawer-aside,
    .drawer-nav, .drawer-contact, .menu-btn, .skip-link, .view-toggle,
    .tk-call, .lang-pill, .lang-switch, .breadcrumb,
    .ln-prev, .ln-next, .ln-dots, .ln-counter, .ln-img-cap,
    .hero-slider-ctrl, .hero-scroll, .scroll-tag, .hero-grain, .dots,
    .play-btn, .arrow, .h-card-arrow, .btn-line, .btn, .cta-btn-row,
    .prod-cta-row, .ph-cta-row, .cat-action-btn,
    .lightbox, .lightbox-nav, .lightbox-close,
    .filter-bar, .filter-btn, .ptab, .stab, .plant-tab, .form-nav,
    .products-tabs, .support-tabs, .stabs-inner, .subnav-inner,
    iframe, video, .film-stage, .hero-video
  ) { display: none !important; }

  /* 사진 자리 — 인쇄되지 않으니 자리도 차지하지 않게 접습니다.
     비워두면 빈 상자만 여러 장 찍혀 나옵니다. */
  body:not([data-page="catalog"]) :is(
    .hero-slides, .hero-slide, .pcard-img, .prod-img-main, .prod-img-sub,
    .prod-img-stack, .prod-fig-img, .feat-img, .ln-carousel, .ln-slide,
    .use-card .img, .imgbox, .gal-sec, .g, .bg, [data-lazybg]
  ) { display: none !important; }
  /* 인증서·성적서는 <img> 라 실제로 인쇄됩니다 — 남깁니다. */
  body:not([data-page="catalog"]) img { display: block !important; max-width: 100% !important; }

  /* 히어로는 표지가 아니라 제목 블록이면 됩니다.
     화면에서는 한 화면을 채우지만 종이에서는 첫 장을 통째로 잡아먹습니다. */
  /* ★ `max-height` 를 반드시 함께 풀어야 합니다 (2026-08-09 · 검증 16회차).
     메인 3판(index·homepage-cn·homepage-en)의 `.hero` 는 페이지 <style> 에서
     `height:100vh; min-height:820px; **max-height:980px**; overflow:hidden` 입니다.
     여기서 min-height·height 만 되돌리면 max-height 가 살아남아 **종이에서
     히어로가 980px 로 잘립니다** — 354px(en 219px)가 사라졌습니다.
     잘려 나가던 것: NEWS + 공지 3건(제목·날짜) · 히어로 카드 CATALOG·지명원 ·
     VIEW ALL. **화면에서는 멀쩡하고 손에 든 종이에만 구멍이 납니다.**
     실제 PDF 대조: 설날 ✗→O · 하계 ✗→O · 휴무 ✗→O · 지명원 ✗→O. */
  body:not([data-page="catalog"]) :is(
    .hero, .hero-sec, .subpage-hero, .product-hero, .pv-hero
  ) { min-height: 0 !important; height: auto !important; max-height: none !important;
      overflow: visible !important; display: block !important;
      padding: 0 0 6mm !important; }
  body:not([data-page="catalog"]) :is(
    .ph-grid, .ph-card, .hero-content, .hero-copy, .hero-bottom
  ) { display: block !important; width: auto !important; max-width: none !important;
      padding: 0 !important; margin: 0 !important; position: static !important; }
  body:not([data-page="catalog"]) .ph-card .row {
    display: grid !important; grid-template-columns: 32mm 1fr !important;
    gap: 3mm !important; padding: 2mm 0 !important;
    border-bottom: 1px solid #d8d3c7 !important;
  }

  /* 좌우 여백은 @page 가 줍니다. 화면용 64px 패딩은 종이에서 낭비입니다. */
  body:not([data-page="catalog"]) :is(
    section, .prod-block, .line-block, .bene-sec, .spec-sec, .compare-sec,
    .use-sec, .cert-strip, .featured, .heritage-sec, .pv-wrap
  ) { padding-left: 0 !important; padding-right: 0 !important;
      padding-top: 6mm !important; padding-bottom: 6mm !important; }
  body:not([data-page="catalog"]) :is(
    main, .prod-grid, .featured-grid, .heritage-grid, .line-block
  ) { display: block !important; max-width: none !important; width: auto !important; }

  /* 화면에서 3~4열인 카드 묶음은 A4 폭에서 한 칸이 너무 좁아 글자가 세로로 눕습니다. */
  body:not([data-page="catalog"]) :is(
    .bene-grid, .use-grid, .compare-grid, .pgrid, .hero-cards, .cert-list,
    .eq-grid, .cert-grid, .h-cards, .stat-row
  ) { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4mm !important; }

  /* 화면용 대형 표시 활자는 종이에서 한 단어가 한 줄을 먹습니다. */
  body:not([data-page="catalog"]) :is(
    .sec-h, .cat-h2, .prod-content h2, .feat-content h2,
    .figure-num, .yr, .signature, .cat-stat-n, .ic, .link, .ph-card .v.big
  ) { font-size: 13pt !important; line-height: 1.35 !important; }
  body:not([data-page="catalog"]) .ln-num { font-size: 11pt !important; line-height: 1.35 !important; }
  /* em / .v 를 위 목록에 넣으면 안 됩니다.
     · em 은 제목 안에 들어가는데, :is() 는 가장 구체적인 인자로 특이도가 잡혀
       h1(20pt) 을 이겨 "A glass that / holds" 가 20pt / 13pt 로 갈라졌습니다.
     · .v 는 사양표의 값 칸(15px 본문)이라 오히려 커집니다.
     제목 안 em 은 부모 크기를 그대로 물려받게 둡니다. */
  body:not([data-page="catalog"]) :is(h1, h2, h3, h4, .sec-h) em {
    font-size: inherit !important;
  }
  body:not([data-page="catalog"]) :is(.sec-h .ko, .prod-content .ko-h, h1 .ko, h2 .ko, h3 .ko) {
    font-size: 11pt !important; line-height: 1.5 !important;
    display: block !important; margin-top: 2mm !important;
  }

  /* 표는 문서의 본체입니다 — 쪼개지지 않게 */
  body:not([data-page="catalog"]) table { width: 100% !important; border-collapse: collapse !important; }
  body:not([data-page="catalog"]) :is(th, td) { border: 1px solid #b9b3a6 !important; padding: 4pt 6pt !important; }
  body:not([data-page="catalog"]) thead { display: table-header-group; }   /* 여러 장에 걸치면 머리행 반복 */
  body:not([data-page="catalog"]) :is(tr, img, figure, .compare-card, .cert-item, .bene-card, .line-block) { break-inside: avoid; }
  body:not([data-page="catalog"]) :is(h1, h2, h3, h4) { break-after: avoid; }

  /* ── 장과 장 사이 (2026-08-09 · 검증 18회차) ───────────────────────────
     여기까지의 규칙은 **한 장 안에서 무엇이 보이는가**를 다룹니다.
     아래 셋은 **나눔 자리**를 다룹니다. 진짜 page.pdf() 로 요소의 자리를
     되읽어(`.claude/audit/scripts/print-breaks.mjs`) 잰 결과,
     장 경계 141곳에서 **17곳**이 어긋나 있었습니다(고아 제목 2 · 제목 쪼개짐 4 ·
     라벨 고아 4 · 구조 행 쪼개짐 7). 아래 넷을 넣으면 **2** 가 됩니다.
     장수는 170 → **171** (영문 메인만 11→12장, 나머지 28페이지 그대로).
     빼면 그대로 돌아옵니다 — 되돌리기 전에 그 도구를 한 번 돌려 보세요.

     ★ ①②③만 넣으면 장수가 168 로 줄지만 **제목 쪼개짐이 4 → 12 로 늘어납니다.**
       장수·고아·구조행이 한꺼번에 좋아져서 좋아 보이는데, 실은 제목이 반으로
       갈린 것입니다. ④를 반드시 함께 두세요. */

  /* ① 섹션 라벨(eyebrow)이 장 끝에 혼자 남고 제목만 다음 장으로 넘어갔습니다.
        `h1~h4` 에는 break-after:avoid 가 있었지만 라벨은 <div> 라 빠져 있었습니다.
        실측 4곳: company "03 — Heritage" · business "06 / Interior" ·
        business-cn "02 / Tempered" · homepage-en "— Request a quote". */
  body:not([data-page="catalog"]) :is(
    .sec-eyebrow, .eyebrow, .hero-eyebrow, .ph-eyebrow, .cta-eyebrow
  ) { break-after: avoid; }

  /* ② 2~3열로 짜인 목록 행(연혁 `년/내용/태그`, 사양 `항목/값`)이 장 경계에서
        **반으로 갈렸습니다** — 앞장에 항목명만, 뒷장에 값만 찍힙니다.
        실측 7곳(index·homepage-cn 연혁 · company 2판 연혁 · business 사양).
        긴 글 목록은 한 장을 넘으면 브라우저가 알아서 이 규칙을 포기합니다. */
  body:not([data-page="catalog"]) li { break-inside: avoid; }

  /* ③ 카드 묶음(grid)은 **빈 껍데기만 앞장에 남길 수 있습니다.** 그러면
        제목이 장 끝에 혼자 남는데, 제목의 break-after:avoid 로는 안 막힙니다
        (나뉘는 자리가 제목과 grid 사이가 아니라 grid 안이기 때문입니다).
        첫 칸에 break-before:avoid 를 주면 껍데기까지 함께 넘어갑니다.
        실측: 방화유리 2판의 "Four reasons to specify it." 아래 254px 공백. */
  body:not([data-page="catalog"]) :is(
    .bene-grid, .use-grid, .compare-grid, .pgrid, .hero-cards,
    .cert-list, .eq-grid, .cert-grid, .h-cards, .stat-row
  ) > :first-child { break-before: avoid; }

  /* ④ 제목 **자체가 장 경계에서 반으로 갈리는 것.** 고아 제목과 다른 결함입니다 —
        "Four reasons / to specify it." 의 한국어 부제 한 줄(22px)만 다음 장으로
        넘어가는 식입니다. `break-after: avoid` 로는 안 막힙니다(그건 제목 '뒤' 의
        나눔만 막습니다). 실측 4곳 → 0곳. 이 규칙 하나가 장수를 +1 합니다. */
  body:not([data-page="catalog"]) :is(h1, h2, h3, h4, h5, h6, .sec-h) { break-inside: avoid; }
  body:not([data-page="catalog"]) h1 { font-size: 20pt !important; }
  body:not([data-page="catalog"]) h2 { font-size: 15pt !important; }
  body:not([data-page="catalog"]) h3 { font-size: 12.5pt !important; }
  body:not([data-page="catalog"]) :is(p, li, td, th) { orphans: 3; widows: 3; }

  /* A4 폭(≈186mm)을 넘어가 잘리던 것들 */
  body:not([data-page="catalog"]) :is(.hero-cards, .h-card-row, .h-card) {
    display: block !important; width: auto !important;
  }
  body:not([data-page="catalog"]) .org-chart {           /* 조직도는 1148px 고정폭 도형 */
    zoom: 0.66; margin-left: 0 !important;
  }
  /* 푸터 메뉴 4열은 종이에서 잘려 나갑니다. 종이에서 링크는 쓸모가 없으니
     주소·연락처만 남깁니다(.row1 의 첫 칸). */
  body:not([data-page="catalog"]) .tk-footer .row1 { display: block !important; }
  body:not([data-page="catalog"]) .tk-footer .row1 > div + div { display: none !important; }

  /* 링크 주소를 일일이 붙이면 사양표가 읽히지 않습니다. 대신 맨 끝에 출처 한 줄. */
  body:not([data-page="catalog"]) a { text-decoration: none !important; }
  body:not([data-page="catalog"]) .tk-footer {
    border-top: 1px solid #b9b3a6 !important; padding-top: 4mm !important;
  }
  body:not([data-page="catalog"]) .tk-footer :is(ul, .tag-line) { display: none !important; }
  body:not([data-page="catalog"]) .tk-footer::after {
    content: '(주)태광안전유리 · www.tk-safetyglass.com · 032-555-7392';
    display: block; margin-top: 3mm;
    font-size: 8.5pt; letter-spacing: 0.04em; color: #4a5260 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   메인 팝업 공지 (2026-08-12 신설 · 사용자 요청)

   옛 사이트(i-taekwang.com)에 있던 방화유리창 홍보 팝업을 옮긴 것입니다.
   내용은 같지만 **그림 한 장이 아니라 글자로** 짰습니다:
     · 폰에서 글씨가 뭉개지지 않습니다 (옛 것은 고정폭 이미지라 읽을 수 없었음)
     · 문구를 고칠 때 그래픽 작업이 필요 없습니다
     · 검색엔진이 내용을 읽습니다
     · 수백 KB → 0KB

   ★ 접근성 — 팝업은 잘못 만들면 키보드 사용자를 가둡니다. 그래서:
     · role="dialog" aria-modal + 포커스 가둠(tk.js)
     · Esc 로 닫힘 · 닫으면 원래 있던 곳으로 포커스 복귀
     · 배경 클릭으로도 닫힘
   ★ prefers-reduced-motion 을 존중합니다(맨 아래).
   ═══════════════════════════════════════════════════════════════════════ */
.pop-back {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(13,17,23,0.72);
  display: none; align-items: center; justify-content: center;
  padding: 24px 16px;
  overflow: auto;
  animation: popFade .28s ease;
}
.pop-back.open { display: flex; }
@keyframes popFade { from { opacity: 0; } to { opacity: 1; } }

.pop {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 24px 64px rgba(13,17,23,0.35);
  animation: popRise .32s cubic-bezier(.22,.61,.36,1);
}
@keyframes popRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 머리 — 짙은 배경에 금색. 사이트 히어로와 같은 어법입니다. */
.pop-head {
  background: var(--ink); color: var(--paper);
  padding: 30px 32px 26px;
}
.pop-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--gold-soft); margin-bottom: 14px;
}
.pop-head h2 {
  font-family: var(--serif-ko); font-weight: 600;
  font-size: clamp(21px, 5.2vw, 27px); line-height: 1.4; margin: 0;
  color: var(--paper);
}
.pop-head h2 em { font-style: normal; color: var(--gold-soft); }
.pop-lead {
  margin: 12px 0 0; font-size: 14px; line-height: 1.7;
  color: rgba(246,243,236,0.78);
}

.pop-body { padding: 26px 32px 8px; }
.pop-sec + .pop-sec { margin-top: 22px; }
.pop-sec > .t {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--gold-text); margin-bottom: 10px;
}
.pop-spec { list-style: none; margin: 0; padding: 0; }
.pop-spec li {
  position: relative; padding-left: 16px; margin-bottom: 12px;
  font-size: 14px; line-height: 1.7; color: var(--ink-2);
}
.pop-spec li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px; background: var(--gold); border-radius: 50%;
}
.pop-spec b { font-weight: 700; color: var(--ink); }
.pop-spec .sub { display: block; color: var(--mute); font-size: 13px; margin-top: 2px; }

.pop-items { font-size: 13.5px; line-height: 1.85; color: var(--ink-2); margin: 0; }
.pop-items strong { color: var(--ink); font-weight: 700; }

.pop-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pop-tags span {
  font-size: 12px; padding: 7px 12px;
  border: 1px solid var(--gold); color: var(--gold-text);
  background: rgba(159,126,70,0.06);
}

.pop-cta { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 32px 4px; }
.pop-cta a {
  flex: 1 1 160px; text-align: center; padding: 14px 18px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.pop-cta .go { background: var(--ink); color: var(--paper); }
.pop-cta .go:hover { background: var(--gold-deep); }
.pop-cta .tel { border: 1px solid var(--ink); color: var(--ink); }
.pop-cta .tel:hover { background: var(--ink); color: var(--paper); }

.pop-foot {
  margin-top: 20px; padding: 18px 32px 22px;
  border-top: 1px solid var(--line-2); background: var(--paper-2);
  font-size: 12.5px; line-height: 1.75; color: var(--mute);
}
.pop-foot b { color: var(--ink-2); font-weight: 600; }
.pop-foot a { color: var(--ink-2); }

/* 조작줄 — 터치 타깃 44px 을 채웁니다(WCAG 2.5.8). */
.pop-ctl {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 20px 12px 24px;
  border-top: 1px solid var(--line); background: var(--paper-3);
}
.pop-ctl label {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
  padding: 12px 4px; min-height: 44px;
}
.pop-ctl input { width: 16px; height: 16px; accent-color: var(--gold-deep); cursor: pointer; }
.pop-ctl .close {
  background: none; border: 1px solid var(--ink-3); color: var(--ink);
  font: inherit; font-size: 13px; cursor: pointer;
  padding: 12px 22px; min-height: 44px;
  transition: background .2s ease, color .2s ease;
}
.pop-ctl .close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* 오른쪽 위 X — 조작줄과 별개로, 익숙한 자리에도 하나 둡니다. */
.pop-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 44px; height: 44px; line-height: 1;
  background: none; border: 0; cursor: pointer;
  color: rgba(246,243,236,0.62); font-size: 22px;
  transition: color .2s ease;
}
.pop-x:hover { color: var(--paper); }

@media (max-width: 520px) {
  .pop-head { padding: 26px 22px 22px; }
  .pop-body { padding: 22px 22px 6px; }
  .pop-cta  { padding: 16px 22px 4px; }
  .pop-foot { padding: 16px 22px 20px; }
  .pop-ctl  { padding: 10px 14px 10px 18px; }
  .pop-ctl label { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .pop-back, .pop { animation: none !important; }
}
@media print { .pop-back { display: none !important; } }