/* Hallmark · tokens · 통합안 D · ㈜사운드플레이스 홈 · 2026-09-07
   어제 홈의 따뜻한 무채색 + 브랜드 레드·골드를 유지하되, L-Acoustics 홈처럼 종이를 더 희게, 타일은 거의 흰색으로.
   어두운 면(히어로·문의 띠)은 L-A 의 rgb(12,13,13) 을 브랜드 색상각(30°) 쪽으로 데운 값. 골드 띠는 L-A 홈의 rgb(99,75,29) 계열. */
:root {
  --color-paper:      oklch(97% 0.008 70);
  --color-surface:    oklch(99.2% 0.004 80);
  --color-paper-2:    oklch(94% 0.010 68);
  --color-paper-3:    oklch(90% 0.012 65);
  --color-rule:       oklch(83% 0.012 62);
  --color-rule-2:     oklch(90% 0.010 64);
  --color-muted:      oklch(47% 0.014 45);
  --color-ink-2:      oklch(33% 0.014 40);
  --color-ink:        oklch(20% 0.012 35);

  --color-dark:       oklch(14% 0.010 30);
  --color-dark-2:     oklch(19% 0.012 30);
  --color-dark-rule:  oklch(30% 0.012 30);
  --color-dark-ink:   oklch(95% 0.008 70);
  --color-dark-ink-2: oklch(78% 0.010 60);

  --color-accent:     #AA1F24;                 /* 로고 레드 (픽셀 실측) */
  --color-accent-on-dark: #E4565B;            /* 어두운 바탕용 로고 레드 (logo-64-dark.png 픽셀 실측, 2026-09-17) */
  --color-accent-ink: oklch(97% 0.008 70);
  --color-gold:       #B4975A;                 /* L-Acoustics 공식 로고에서 추출한 금색 (2026-09-16) */
  --color-gold-band:  oklch(36% 0.075 78);     /* L-A 홈 골드 띠 rgb(99,75,29) 계열 */
  --color-gold-ink:   oklch(96% 0.02 85);
  --color-focus:      oklch(50% 0.20 27);
  --color-scrim-0:    oklch(14% 0.010 30 / 0);
  --color-scrim-1:    oklch(14% 0.010 30 / 0.45);
  --color-scrim-2:    oklch(14% 0.010 30 / 0.92);
  --color-backdrop:   oklch(14% 0.010 30 / 0.45);
  --shadow-panel:     0 24px 48px -24px oklch(14% 0.01 30 / 0.35);

  /* 2026-09-15 대표님: 한글은 애플 한글 서체(Apple SD Gothic Neo). 애플 기기는 시스템 서체 그대로,
     애플 서체를 쓸 수 없는 윈도·안드로이드는 같은 계열로 만든 Pretendard 로 대신한다 */
  --font-display: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-outlier: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, "Malgun Gothic", "Noto Sans KR", sans-serif;   /* 영문도 애플 서체(SF Pro) — 라벨의 고정폭(SF Mono) 폐지 */

  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-base: 1rem;   --text-md: 1.125rem;
  --text-lg: 1.375rem; --text-xl: 1.75rem;  --text-2xl: 2.25rem; --text-3xl: 2.875rem;
  --text-display: clamp(2.6rem, 4.4vw + 1rem, 5rem);

  --space-3xs: .125rem; --space-2xs: .25rem; --space-xs: .5rem;  --space-sm: .75rem; --space-md: 1rem;
  --space-lg: 1.5rem;   --space-xl: 2.5rem;  --space-2xl: 4rem;  --space-3xl: 6rem;  --space-4xl: 9rem;
  --page-gutter: clamp(1rem, 4vw, 3rem);
  --max: 1280px;
  --measure: 62ch;

  --radius-card: 8px; --radius-input: 6px; --radius-pill: 999px; --radius-chip: 3px;
  --rule-hair: 1px; --rule-thick: 3px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;

  --banner-height: 64px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 700;
}

/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4 */
/* Hallmark · verb: redesign (어제 홈 + 제안 B 의 병합, 사용자 지정) · genre: modern-minimal · macrostructure: Bento Grid (사용자 재요청 → 노브 변경: tiles=7, spans=irregular, photo-lead top-left, border=hairline-all)
 * theme: custom · vibe: "어제의 따뜻한 종이를 더 희게, L-A 식 제품 타일과 스토리 칩, 골드 띠 하나" · paper: oklch(97% 0.008 70) · accent: #AA1F24 (브랜드 레드)
 * display: Gothic A1 800 · body: IBM Plex Sans KR 400 · outlier: IBM Plex Mono (수치 역할: 칩 · 카운트 · 사양표) · axes: light / geometric-sans / warm
 * nav: N13 inline ⌘K search pill + N11 mega-menu (제품 패널) 하이브리드 · footer: Ft1 mast-headed (2-line link stack) · hero: H6 photographic fold (전면 영상 · 왼쪽 하단 앵커 · 어제 구조 유지)
 * studied: yes · DNA-source: url https://www.l-acoustics.com/ · observed-fonts: PP Neue Montreal 100–900 (단일 계열) · observed-paper: #fff / rgb(242,242,243) · observed-dark: rgb(12,13,13) · observed-band: rgb(99,75,29)
 * carried over from L-A: 메가메뉴 · 제품 타일(이름+태그라인) · 스토리 카드 칩(분류·규모) · 분야(Applications) 타일 · 골드 띠 · 한 계열 서체 굵기 대비 · READ MORE 식 소문자 링크
 * enrichment: real media only · motion: count-up · CTA hover lift · mega/cmdk open (3 primitives)
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 * context: user-provided (어제 홈 내용 전부 유지 · B안 장점 · L-A 장점 · "이 회사와 일하고 싶다") · 2026-09-07 */

*, *::before, *::after { box-sizing: border-box; }
/* display 를 준 요소도 hidden 이면 확실히 숨는다 — 시트가 안 닫히던 원인 (2026-09-17) */
[hidden] { display: none !important; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; background: var(--color-paper); scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: clip;
  background: var(--color-paper); color: var(--color-ink);
  font: 400 var(--text-base)/1.65 var(--font-body);
  word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 800; font-style: normal; line-height: 1.12; letter-spacing: -.02em; min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-md); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.wrap { width: min(100% - var(--page-gutter) * 2, var(--max)); margin-inline: auto; }
kbd { font: 500 var(--text-xs)/1 var(--font-body); border: var(--rule-hair) solid var(--color-rule); border-radius: 4px; padding: var(--space-3xs) var(--space-2xs); background: var(--color-paper-2); color: var(--color-ink-2); }

/* ---------- 버튼 · 링크 · 칩 ---------- */
.btn { display: inline-grid; place-items: center; min-height: 44px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); font: 500 var(--text-sm)/1 var(--font-body); white-space: nowrap; border: var(--rule-hair) solid var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn--fill { background: var(--color-ink); color: var(--color-paper); }
.btn--fill:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--color-ink); }
.btn--outline:hover { background: var(--color-paper-2); }
.btn--light { background: var(--color-dark-ink); border-color: var(--color-dark-ink); color: var(--color-dark); }
.btn--light:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.link { color: var(--color-accent); white-space: nowrap; font-weight: 500; border-bottom: 1px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.link:hover { border-bottom-color: var(--color-accent); }
.link:active { color: var(--color-ink-2); }
.link--light { color: var(--color-dark-ink); border-bottom-color: var(--color-dark-rule); }
.link--light:hover { border-bottom-color: var(--color-dark-ink); }
.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-chip); font: 500 var(--text-xs)/1 var(--font-outlier); letter-spacing: .04em; color: var(--color-ink-2); white-space: nowrap; }
.chip--gold { border-color: var(--color-gold-band); color: var(--color-gold-band); }

/* ---------- 상단 바 · N13 검색 필 + N11 메가메뉴 ---------- */
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklch, var(--color-paper) 88%, transparent); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.bar__inner { display: flex; align-items: center; gap: var(--space-lg); min-height: var(--banner-height); }
.bar__brand { display: inline-grid; place-items: center; border-radius: var(--radius-input);
  transition: opacity var(--dur-short) var(--ease-out); }
.bar__brand:hover { opacity: .68; }
.bar__brand:active { opacity: .5; }
.bar__brand:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.bar__brand img { height: 26px; width: auto; }
.pill { display: flex; align-items: center; gap: var(--space-sm); height: 40px; padding: 0 var(--space-xs) 0 var(--space-sm); flex: 1 1 auto; max-width: 460px; background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); color: var(--color-muted); font: 400 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.pill:hover { border-color: var(--color-ink-2); }
.pill:active { background: var(--color-paper-2); }
.pill svg { width: 16px; height: 16px; flex: none; }
.pill__text { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill__kbd { display: flex; gap: var(--space-3xs); }
.bar__nav { display: none; align-items: center; gap: var(--space-lg); margin-left: auto; }
.bar__link { display: inline-flex; align-items: center; gap: var(--space-2xs); font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-ink-2); white-space: nowrap; padding: var(--space-sm) 0; border: 0; background: none; cursor: pointer; border-bottom: 2px solid transparent; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.bar__link:hover, .bar__link[aria-expanded="true"] { color: var(--color-ink); border-bottom-color: var(--color-rule); }
.bar__link:active { color: var(--color-muted); }
.bar__link svg { width: 12px; height: 12px; transition: transform var(--dur-short) var(--ease-out); }
.bar__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.bar__cta { display: none; }
.bar__toggle { margin-left: auto; min-height: 40px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.bar__toggle:hover { background: var(--color-paper-2); }
.bar__toggle:active { background: var(--color-paper-3); }
@media (min-width: 60rem) { .bar__nav { display: flex; } .bar__cta { display: inline-grid; } .bar__toggle { display: none; } }
@media (max-width: 59.99rem) { .pill { flex: none; width: 40px; padding: 0; justify-content: center; } .pill__text, .pill__kbd { display: none; } }
.bar__toggle { flex: none; white-space: nowrap; }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-surface); border-bottom: var(--rule-hair) solid var(--color-rule); box-shadow: var(--shadow-panel); }
.mega__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }
.mega__head { font: 500 var(--text-xs)/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); margin-bottom: var(--space-sm); }
.mega__col ul { display: grid; grid-template-columns: minmax(0, 1fr); }
.mega__col a { display: flex; justify-content: space-between; gap: var(--space-md); align-items: baseline; padding: var(--space-xs) 0; font-size: var(--text-sm); border-radius: var(--radius-input); transition: color var(--dur-short) var(--ease-out); }
.mega__col a:hover { color: var(--color-accent); }
.mega__col a:active { color: var(--color-ink-2); }
.mega__col a span { color: var(--color-muted); font: 400 var(--text-xs)/1.5 var(--font-outlier); white-space: nowrap; }
.mega__feature { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-md); align-items: center; padding: var(--space-md); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); transition: border-color var(--dur-short) var(--ease-out); }
.mega__feature:hover { border-color: var(--color-ink-2); }
.mega__feature:active { background: var(--color-paper-2); }
.mega__feature img { width: 120px; height: 120px; object-fit: contain; }
.mega__feature b { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); letter-spacing: -.02em; }
.mega__feature em { display: block; font-style: normal; color: var(--color-ink-2); font-size: var(--text-sm); margin-top: var(--space-2xs); }
.mega__feature span { display: block; color: var(--color-muted); font: 400 var(--text-xs)/1.5 var(--font-outlier); margin-top: var(--space-xs); }
.scrim { position: fixed; inset: 0; z-index: var(--z-sticky); background: var(--color-backdrop); }
/* 메뉴 — 페이지 위로 떠서 덮는 판 (2026-09-17 대표님)
   밀어내지 않고 덮기 때문에 뒤가 비쳐 투명 효과가 제 몫을 한다. */
.sheet { position: fixed; left: 0; right: 0; top: var(--banner-height); z-index: var(--z-sticky-nav);
  max-height: calc(100svh - var(--banner-height)); overflow-y: auto; overscroll-behavior: contain;
  background: color-mix(in oklch, var(--color-dark) 72%, transparent); color: var(--color-dark-ink);
  backdrop-filter: blur(24px) brightness(0.28) saturate(120%); -webkit-backdrop-filter: blur(24px) brightness(0.28) saturate(120%);
  border-bottom: 0; box-shadow: 0 24px 60px -20px rgb(0 0 0 / .55); }
/* 바탕은 화면 가로 끝까지, 내용은 본문과 같은 폭 (2026-09-17 대표님) */
.sheet__inner { padding-block: var(--space-lg) var(--space-2xl); display: grid; gap: var(--space-xl); }
.sheet ul { list-style: none; margin: 0; padding: 0; }
.sheet__main { display: grid; }
.sheet__main a { display: flex; align-items: center; min-height: 52px;
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); letter-spacing: -.025em;
  color: var(--color-dark-ink); border-bottom: var(--rule-hair) solid var(--color-dark-rule);
  transition: color var(--dur-short) var(--ease-out); }
.sheet__main li:last-child a { border-bottom: 0; }
.sheet__main a:hover, .sheet__main a:focus-visible { color: var(--color-accent-on-dark); }
.sheet__label { font: 500 var(--text-xs)/1 var(--font-outlier); letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-dark-ink-2); margin-bottom: var(--space-sm); opacity: .8; }
.sheet__brands { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.sheet__brands a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-dark-rule); border-radius: var(--radius-pill);
  font-size: var(--text-sm); color: var(--color-dark-ink-2); white-space: nowrap;
  transition: border-color var(--dur-short) var(--ease-out); }
.sheet__brands a:hover, .sheet__brands a:focus-visible { border-color: var(--color-accent-on-dark); }
.sheet__act { margin: 0; }
.sheet__act .btn { width: 100%; background: var(--color-dark-ink); border-color: var(--color-dark-ink); color: var(--color-dark); }
.sheet__act .btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
/* 메뉴가 열리면 머리막대도 같이 어두워진다 — 막대와 메뉴가 한 판으로 (2026-09-17 대표님) */
.bar.is-menu { background: color-mix(in oklch, var(--color-dark) 52%, transparent); border-bottom-color: transparent;
  backdrop-filter: blur(16px) brightness(0.32) saturate(120%); -webkit-backdrop-filter: blur(16px) brightness(0.32) saturate(120%); }
.bar.is-menu .bar__logo { display: none; }
.bar.is-menu .bar__logo--onvideo { display: block; }
.bar.is-menu .bar__toggle { border-color: color-mix(in oklch, var(--color-dark-ink) 50%, transparent); color: var(--color-dark-ink); background: transparent; }
.bar.is-menu .pill { border-color: color-mix(in oklch, var(--color-dark-ink) 50%, transparent); background: color-mix(in oklch, var(--color-dark-ink) 10%, transparent); color: var(--color-dark-ink); }
.bar.is-menu .pill__text { color: var(--color-dark-ink-2); }
.bar.is-menu .pill__kbd kbd { border-color: var(--color-dark-rule); color: var(--color-dark-ink-2); background: transparent; }
@media (min-width: 60rem) { .sheet { display: none; } }

/* ---------- ⌘K 스포트라이트 ---------- */
.cmdk { position: fixed; inset: 0; z-index: var(--z-modal); opacity: 0; visibility: hidden; transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short); }
.cmdk.is-open { opacity: 1; visibility: visible; }
.cmdk__backdrop { position: absolute; inset: 0; background: var(--color-backdrop); }
.cmdk__panel { position: absolute; top: 12vh; left: 50%; transform: translateX(-50%) translateY(-6px); width: min(600px, calc(100% - 2rem)); background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-radius: 12px; box-shadow: var(--shadow-panel); overflow: hidden; transition: transform var(--dur-short) var(--ease-out); }
.cmdk.is-open .cmdk__panel { transform: translateX(-50%) translateY(0); }
.cmdk__field { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.cmdk__field:focus-within { border-bottom-color: var(--color-ink); }
.cmdk__field svg { width: 18px; height: 18px; color: var(--color-muted); flex: none; }
.cmdk__field input { flex: 1; min-width: 0; min-height: 44px; border: 1px solid transparent; background: transparent; font: 400 var(--text-md)/1 var(--font-body); color: var(--color-ink); outline: 2px solid transparent; }
.cmdk__field input::placeholder { color: var(--color-muted); }
.cmdk__field input:disabled { opacity: .55; cursor: not-allowed; }
.cmdk__results { max-height: min(52vh, 440px); overflow: auto; padding: var(--space-xs); }
.cmdk__group { font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); padding: var(--space-sm) var(--space-sm) var(--space-2xs); }
.cmdk__item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-sm); border-radius: var(--radius-input); min-height: 44px; font-size: var(--text-sm); }
.cmdk__item span { color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
.cmdk__item.is-active, .cmdk__item:hover { background: var(--color-paper-2); }
.cmdk__item:active { background: var(--color-paper-3); }
.cmdk__empty { padding: var(--space-lg) var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.cmdk__foot { display: flex; gap: var(--space-lg); padding: var(--space-xs) var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }
.cmdk__foot span { display: inline-flex; align-items: center; gap: var(--space-2xs); }

/* ---------- 히어로 · 어제의 전면 영상 구조 ---------- */
.hero { position: relative; min-height: min(88svh, 760px); display: grid; align-content: end; background: var(--color-dark); color: var(--color-dark-ink); isolation: isolate; padding-block: var(--space-2xl) var(--space-3xl); }
.hero video, .hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--color-scrim-2) 0%, var(--color-scrim-1) 46%, var(--color-scrim-0) 100%); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.hero h1 { font-size: var(--text-display); line-height: 1.04; letter-spacing: -.035em; max-width: 14ch; color: var(--color-dark-ink); }
/* 2026-09-09 대표님 결정: 히어로 영상 위에 슬로건을 띄우지 않는다.
   h1 은 검색엔진·화면낭독기용으로 코드에는 남기고 화면에서만 감춘다.
   (문구 세션에서 넣음. 되돌리려면 이 블록만 지우면 된다.) */
#hero-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero__lede { max-width: 46ch; font-size: var(--text-md); font-weight: 300; color: var(--color-dark-ink-2); }
/* 2026-09-16 대표님: 「전문공연장, 교회…」 한 줄도 화면에서 감춘다. 나중에 필요하면 이 블록만 지우면 다시 나온다.
   (h1 과 같은 방식 — 코드에는 남아 검색엔진·화면낭독기가 읽는다.) */
.hero__lede { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.creds { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-dark-rule); }
.creds .chip { border-color: var(--color-dark-rule); color: var(--color-dark-ink-2); }
/* 하단으로 내린 자격 칩 — 밝은 바탕이라 기본 칩 색으로 되돌린다 (2026-09-16 대표님) */
.creds--foot { margin-top: var(--space-xl); border-top-color: var(--color-rule-2); }
.creds--foot .chip { border-color: var(--color-rule); color: var(--color-ink-2); }
.creds--foot .chip--gold { border-color: var(--color-gold-band); color: var(--color-ink); }
.creds .chip--gold { border-color: var(--color-gold); color: var(--color-gold); }

/* ---------- 골드 띠 · L-A 파트너십 한 줄 ---------- */
/* L-Acoustics 줄 — 첫 화면 영상 위에 얹는다 (2026-09-16 대표님) */
.hero__partner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg);
  padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-dark-rule); }
.hero__partner img { height: 16px; width: auto; }   /* 2026-09-16 대표님: 공식 컬러 로고 그대로 — 금색 마크 #B4975A + 회색 글자 #84898B */
.hero__partner b { font: 500 var(--text-xs)/1 var(--font-outlier); letter-spacing: .12em; text-transform: uppercase; color: var(--color-gold); margin-left: calc(-1 * var(--space-md)); }
.hero__partner span { font-size: var(--text-sm); color: var(--color-dark-ink-2); }

/* ---------- 무엇을 하는가 · 설계에서 완벽한 사운드까지 ---------- */
.about { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.about__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 60rem) { .about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); } .about__lead { position: sticky; top: calc(var(--banner-height) + var(--space-lg)); align-self: start; } }
.about__grid > * { min-width: 0; }
.about__lead p { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 40ch; }
.about__lead .link { display: inline-block; margin-top: var(--space-lg); }
.caps { display: grid; }
.cap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-lg) 0; border-top: var(--rule-hair) solid var(--color-ink); }
@media (min-width: 40rem) { .cap { grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-md); } }
.cap .k { font: 500 var(--text-xs)/1.6 var(--font-outlier); letter-spacing: .12em; color: var(--color-accent); text-transform: uppercase; }
.cap h3 { font-size: var(--text-lg); color: var(--color-ink); }   /* 2026-09-16 대표님: 다섯 칸 제목을 회색으로(조금 진하게) */
.cap p { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.75; margin-top: var(--space-xs); max-width: var(--measure); }
.caps .cap:last-child { border-bottom: var(--rule-hair) solid var(--color-ink); }

/* ---------- 한눈에 · 벤토 ---------- */
@media (min-width: 60rem) {
  .tile--cta { grid-column: 1 / 13; grid-row: 2 / 3; }
}
.tile { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); background: var(--color-surface); display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: var(--space-md); min-width: 0; }
.tile h3 { font-size: var(--text-md); }
.tile--num .num { font: 500 clamp(2.5rem, 4.5vw, 3.75rem)/1 var(--font-outlier); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tile--creds, .tile--reg { align-content: start; }
.tile--creds li.empty, .tile--reg li.empty { color: transparent; }   /* 두 칸 높이를 맞추는 빈 줄 */
.tile--reg ul { display: grid; gap: var(--space-2xs); }
.tile--reg li { font-size: var(--text-sm); padding: var(--space-2xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.tile--since .num { font: 500 var(--text-3xl)/1 var(--font-outlier); letter-spacing: -.04em; }
/* 2026-09-16 견적 칸 손질 — 시간·전화가 설명 문장 꼬리에 붙어 읽기 나빴다. 단추 쪽으로 옮기고 여백을 늘린다. */
.tile--cta { background: var(--color-dark-2); border: 0; color: var(--color-dark-ink); grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-xl); align-items: center; }
@media (min-width: 48rem) { .tile--cta { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xl); } }
.tile--cta .cta__t { display: grid; gap: var(--space-2xs); }
.tile--cta b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; letter-spacing: -.02em; color: var(--color-dark-ink); }
.tile--cta p { font-size: var(--text-md); color: var(--color-dark-ink-2); max-width: 46ch; }
.tile--cta .cta__act { display: grid; justify-items: start; gap: var(--space-xs); }
@media (min-width: 48rem) { .tile--cta .cta__act { justify-items: end; } }
.tile--cta .cta__meta { font-size: var(--text-sm); color: var(--color-dark-ink-2); font-variant-numeric: tabular-nums; }
.tile--cta .cta__meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 어두운 바탕에서는 단추도 뒤집는다 — 기본 채움 단추는 검정이라 안 보인다 */
.tile--cta .btn--fill { background: var(--color-dark-ink); color: var(--color-dark); border-color: transparent; }
.tile--cta .btn--fill:hover { background: var(--color-accent); color: var(--color-accent-ink); }
@media (max-width: 39.99rem) { .tile--cta { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 섹션 머리 (어제 구조: 제목 + 설명 + 오른쪽 링크) ---------- */
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-bottom: var(--space-xl); }
.head__t { flex: 1 1 24ch; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); min-width: 0; }
.head__t p { color: var(--color-ink-2); max-width: 56ch; }

/* ---------- 제품 · L-A 식 타일 + 사양표 + 브랜드 ---------- */
.products { padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: var(--rule-hair) solid var(--color-rule); }
.family { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-width: 0; background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; transition: border-color var(--dur-short) var(--ease-out); }
.family:hover { border-color: var(--color-ink-2); }
.family:active { background: var(--color-paper-2); }
.family__img { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: var(--space-lg); background: var(--color-surface); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.family__img img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.family__body { padding: var(--space-md) var(--space-lg) var(--space-lg); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); align-content: start; }
.family__body b { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); letter-spacing: -.02em; }
.family__body em { font-style: normal; color: var(--color-ink-2); font-size: var(--text-sm); }
.family__body span { color: var(--color-muted); font: 400 var(--text-xs)/1.5 var(--font-outlier); margin-top: var(--space-xs); }
.spec { margin-top: var(--space-2xl); display: grid; gap: var(--space-sm); }
.spec h3 { font-size: var(--text-lg); }
.spec > p { color: var(--color-muted); font-size: var(--text-sm); max-width: var(--measure); }
.spec__table td.model, .spec__table td.desc { font-family: var(--font-body); }
.spec__table td.desc { color: var(--color-ink-2); }
.model a { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); }
.model a:hover { color: var(--color-accent); }
.model a:active { color: var(--color-ink-2); }
.model img { width: 40px; height: 40px; object-fit: contain; mix-blend-mode: multiply; }
.brands { margin-top: var(--space-2xl); }
.brands ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--rule-hair) solid var(--color-rule); border-left: var(--rule-hair) solid var(--color-rule); }
@media (min-width: 40rem) { .brands ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .brands ul { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.brands a { display: grid; gap: var(--space-2xs); align-content: center; justify-items: center; text-align: center; padding: var(--space-lg) var(--space-xs); min-height: 108px; border-right: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); transition: background-color var(--dur-short) var(--ease-out); }
.brands a:hover { background: var(--color-surface); }
.brands a:active { background: var(--color-paper-2); }
.brands b { font-family: var(--font-display); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: var(--text-sm); white-space: nowrap; }
.brands img { height: auto; max-width: 100%; opacity: .92; transition: opacity var(--dur-short) var(--ease-out); }   /* 폭은 생성기가 로고 비율로 계산해 inline 으로 넣는다 */
.brands a:hover img { opacity: 1; }
.brands small { font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.brands .num { font: 500 var(--text-xs)/1 var(--font-outlier); color: var(--color-ink-2); }

/* ---------- 시공사례 · L-A 스토리 카드 ---------- */
.stories { padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: var(--rule-hair) solid var(--color-rule); }
.stories__grid { display: grid; gap: var(--space-lg) var(--space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 60rem) { .stories__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stories__grid li:first-child { grid-column: span 2; grid-row: span 2; } .stories__grid li:first-child .story__shot { aspect-ratio: auto; height: 100%; } .stories__grid li:first-child .story { grid-template-rows: minmax(0, 1fr) auto; height: 100%; } }
.story { display: grid; gap: var(--space-sm); }
.story__shot { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-2); }
.story__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.story:hover .story__shot img { transform: scale(1.02); }
.story__meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
.story__meta h3 { font-size: var(--text-md); }
.story:hover h3 { color: var(--color-accent); }
.story:active h3 { color: var(--color-ink-2); }
.story__chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.index { margin-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-ink); }
.index summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-md) 0; font: 500 var(--text-md)/1.3 var(--font-body); min-height: 44px; }
.index summary::-webkit-details-marker { display: none; }
.index summary span { font: 400 var(--text-xs)/1 var(--font-outlier); color: var(--color-muted); white-space: nowrap; }
.index summary:hover { color: var(--color-accent); }
.index[open] summary { border-bottom: var(--rule-hair) solid var(--color-rule); }
.index__year { break-inside: avoid; display: grid; grid-template-columns: 4ch minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) 0; }
.index__year b { font: 500 var(--text-md)/1.5 var(--font-outlier); }
.index__year a { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-2xs) 0; font-size: var(--text-sm); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.index__year a:hover { color: var(--color-accent); }
.index__year a:active { color: var(--color-ink-2); }
.index__year a span { color: var(--color-muted); white-space: nowrap; }

/* ---------- 분야 · L-A Applications ---------- */
.apps { padding-block: 0 var(--space-3xl); }
.apps__grid li, .families li, .stories__grid li { min-width: 0; }
.app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-width: 0; border-radius: var(--radius-card); overflow: hidden; border: var(--rule-hair) solid var(--color-rule); background: var(--color-surface); transition: border-color var(--dur-short) var(--ease-out); }
.app:hover { border-color: var(--color-ink-2); }
.app:active { background: var(--color-paper-2); }
.app__shot { aspect-ratio: 4 / 3; background: var(--color-paper-2); }
.app__shot img { width: 100%; height: 100%; object-fit: cover; }
.app__shot--text { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--space-md); }
.app__shot--text p { max-width: 100%; min-width: 0; }
.app__shot--text p { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.6; }
.app__body { padding: var(--space-md); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); align-content: start; }
.app__body h3 { font-size: var(--text-md); }
.app__body p { font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- 왜 사운드플레이스인가 · 문의 (어두운 띠) ---------- */
.why { background: var(--color-dark); color: var(--color-dark-ink); padding-block: var(--space-3xl); }
/* 2026-09-10 대표님 결정: 「함께 일하면 다른 점」 블록 삭제 → 이 구역은 문의만 남는다.
   두 칸 격자를 한 칸으로 되돌리고 폭만 제한한다. (되돌리려면 아래 한 줄을 원래 규칙으로) */
.why h2 { color: var(--color-dark-ink); max-width: 18ch; }

/* ---------- 푸터 · Ft1 (어제의 내용 전부) ---------- */
.foot { background: var(--color-surface); border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-2xl) var(--space-xl); }
/* 좁은 화면에선 회사명과 주소가 한 덩어리로 붙고, 넓은 화면에선 두 칸이 더 벌어지게 (2026-09-17 대표님) */
.foot__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md) var(--space-2xl); }
@media (min-width: 60rem) { .foot__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.foot__brand img { height: 30px; width: auto; }
.foot__name { margin-top: var(--space-lg); font: 400 var(--text-base)/1.5 var(--font-outlier); color: var(--color-ink-2); letter-spacing: -.01em; }   /* 기본 크기로 (2026-09-17 대표님) */
.foot__tag { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 40ch; font-size: var(--text-sm); }
.foot address { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.7; }
.foot__copy { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .cmdk__panel { transform: translateX(-50%); }
}

/* ==================== 하위 페이지 공통 (시공사례 · 제품 · 자료실 · 회사소개) ==================== */
:root {
  /* 구 토큰 별칭 — gen_site.py 하위 페이지의 inline style 호환 */
  --ground: var(--color-paper); --surface: var(--color-surface); --raise: var(--color-paper-2); --line: var(--color-rule);
  --ink: var(--color-ink); --muted: var(--color-muted); --brand: var(--color-accent); --brand-in: var(--color-accent-ink); --gold: var(--color-gold-band);
  --font: var(--font-body); --mono: var(--font-outlier);
  --step--1: var(--text-xs); --step-0: var(--text-base); --step-1: var(--text-md); --step-2: var(--text-xl); --step-3: var(--text-2xl); --step-4: var(--text-display);
  --pad: var(--page-gutter); --radius: var(--radius-card); --shadow: var(--shadow-panel);
}
/* 섹션 간격 통일 — 고정 96px → clamp(2.5rem, 5vw, 4.5rem) (2026-09-16 대표님) */
.section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section + .section { border-top: var(--rule-hair) solid var(--color-rule); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-bottom: var(--space-xl); }
.section-head .t { flex: 1 1 24ch; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); min-width: 0; }
.section-head p { color: var(--color-ink-2); max-width: 56ch; }
.eyebrow { font: 500 var(--text-xs)/1.5 var(--font-outlier); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.more { color: var(--color-accent); font-weight: 500; white-space: nowrap; border-bottom: 1px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.more:hover { border-bottom-color: var(--color-accent); }
.more:active { color: var(--color-ink-2); }
.num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.lede { color: var(--color-ink-2); }

.page-head { padding-block: clamp(2.4rem, 6vw, 4rem) 0; }
.page-head h1 { font-size: var(--text-3xl); }
.crumb { display: flex; flex-wrap: wrap; gap: var(--space-2xs); font: 400 var(--text-sm)/1.5 var(--font-outlier); color: var(--color-muted); margin-bottom: var(--space-md); }
.crumb a { color: var(--color-ink-2); border-bottom: var(--rule-hair) solid var(--color-rule); }   /* 링크로 보이게 (2026-09-17 대표님) */
.crumb a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-lg) 0 var(--space-xl); }
.filters button { font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; background: var(--color-surface); color: var(--color-ink-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); padding: 0 var(--space-md); min-height: 40px; display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.filters button:hover { color: var(--color-ink); border-color: var(--color-ink-2); }
.filters button:active { background: var(--color-paper-2); }
.filters button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.filters button:disabled { opacity: .55; cursor: not-allowed; }
.filters .num { font-size: var(--text-xs); }
.searchbox { display: flex; gap: var(--space-xs); margin: var(--space-lg) 0 var(--space-xl); flex-wrap: wrap; }
.searchbox input { flex: 1 1 260px; min-height: 44px; font: 400 var(--text-base)/1 var(--font-body); color: var(--color-ink); background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); padding: 0 var(--space-md); outline: 2px solid transparent; outline-offset: 1px; transition: border-color var(--dur-short) var(--ease-out); }
.searchbox input::placeholder { color: var(--color-muted); }
.searchbox input:hover { border-color: var(--color-ink-2); }
.searchbox input:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink); }
.searchbox input:disabled { opacity: .55; cursor: not-allowed; }

.grid { display: grid; gap: var(--space-md); }
.grid.ref  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grid.cap  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.grid.prod { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
@media (min-width: 40rem) { .grid.prod { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); } }
@media (max-width: 39.99rem) { .grid.prod { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); } }
.grid > * { min-width: 0; }
.card { display: flex; flex-direction: column; background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; min-width: 0; transition: border-color var(--dur-short) var(--ease-out); }
.card:hover { border-color: var(--color-ink-2); }
.card:active { background: var(--color-paper-2); }
.card .shot { aspect-ratio: 4 / 3; background: var(--color-paper-2); overflow: hidden; }
.card .shot.product { aspect-ratio: 1; background: var(--color-surface); padding: var(--space-sm); display: grid; place-items: center; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.card .shot.product img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.card .shot.product:empty { display: none; }
.card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.card:hover .shot img { transform: scale(1.02); }
.card .body { padding: var(--space-md) var(--space-md) var(--space-lg); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); flex: 1; align-content: start; }
.card .body h3 { font-size: var(--text-md); }
.card .meta { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); align-items: center; color: var(--color-muted); font: 400 var(--text-xs)/1.5 var(--font-outlier); }
.tag { display: inline-block; font: 500 var(--text-xs)/1 var(--font-outlier); letter-spacing: .04em; border: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); padding: var(--space-xs) var(--space-xs); border-radius: var(--radius-chip); }

.capability { border-top: 2px solid var(--color-ink); padding-top: var(--space-md); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); align-content: start; }
.capability h3 { font-size: var(--text-md); }
.capability p { color: var(--color-ink-2); font-size: var(--text-sm); }
.capability .k { font: 500 var(--text-base)/1.45 var(--font-outlier); color: var(--color-accent); letter-spacing: .06em; text-transform: uppercase; }

.specwrap { overflow-x: auto; }

/* 홈 첫 화면 — 영상 위로 머리막대를 투명하게 얹는다 (2026-09-16 대표님, 폰·PC 모두)
   영상 위에서는 로고와 검색만 보이고, 영상을 지나면 JS 가 .is-solid 를 붙여 원래 막대로 돌아온다. */
.bar__logo--onvideo { display: none; }
/* 첫 화면 단추를 더 아래로 — 아래 여백 96px → 16px (2026-09-16 대표님) */
.home .hero { padding-bottom: var(--space-md); }
.home .bar { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.home .bar:not(.is-solid) .bar__logo { display: none; }
.home .bar:not(.is-solid) .bar__logo--onvideo { display: block; }
/* 홈에서는 메뉴 줄을 쓰지 않는다 — 로고와 검색만. 길은 「메뉴」 단추로 (2026-09-16 대표님) */
.home .bar__nav, .home .bar__cta { display: none; }
.home .bar__toggle { display: inline-grid; place-items: center; }
.home .bar:not(.is-solid) .bar__toggle { border-color: color-mix(in oklch, var(--color-dark-ink) 50%, transparent); color: var(--color-dark-ink); background: transparent; }
.home .bar:not(.is-solid) .pill { border-color: color-mix(in oklch, var(--color-dark-ink) 50%, transparent); background: color-mix(in oklch, var(--color-dark-ink) 10%, transparent); color: var(--color-dark-ink); }
.home .bar:not(.is-solid) .pill__text { color: var(--color-dark-ink-2); }
.home .bar.is-solid { background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  border-bottom-color: var(--color-rule-2); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); }

/* 대표 인사말 (2026-09-16 대표님) */
.greet { max-width: 68ch; }
.greet p { color: var(--color-ink-2); }
.greet p + p { margin-top: var(--space-md); }
.greet .greet__lead + p { margin-top: var(--space-xl); }   /* 큰 첫 문장 아래를 더 띄운다 (2026-09-16 대표님) */
.greet__lead { font-size: var(--text-xl); font-weight: 300; line-height: 1.5; color: var(--color-ink); }
.greet .greet__sign { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.greet__sign b { color: var(--color-ink); font-size: var(--text-base); font-weight: 500; }

/* 연혁 — 「공공사업 자격」과 같은 칸 안에, 넘치면 칸 안에서 스크롤 (2026-09-16 대표님)
   아래쪽을 흐리게 해서 더 있다는 걸 보이게 하고, 폰에서는 스크롤을 풀어 전부 펼친다. */
.histwrap { position: relative; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); padding: var(--space-lg); }
.histwrap::after { content: none; }
.hist { display: grid; }   /* 칸 안 스크롤 없음 — 연도 단위로 끊는다 (2026-09-17) */

.hist__more { display: block; width: 100%; margin-top: var(--space-md); padding: var(--space-sm); position: relative; z-index: 1;
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper);
  font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-ink-2); cursor: pointer; }
.hist__more:hover { border-color: var(--color-ink-2); color: var(--color-ink); }
.histwrap.is-open::after { opacity: 0; }
.hist__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs);
  padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
@media (min-width: 40rem) { .hist__row { grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-md); } }
.hist__row:first-child { padding-top: 0; }
.hist__row:last-child { border-bottom: 0; padding-bottom: 0; }
.hist .hist__row--more { display: none; }   /* .hist__row 의 display:grid 보다 뒤·위 (2026-09-17) */
.histwrap.is-open .hist .hist__row--more { display: grid; }
.hist__y { font: 500 var(--text-base)/1.45 var(--font-outlier); color: var(--color-accent); letter-spacing: .06em; }
.hist__items { display: grid; gap: var(--space-2xs); min-width: 0; }
.hist__items li { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.7; }
/* 폰·태블릿: 칸 안 스크롤을 쓰지 않는다 — 페이지 스크롤과 부딪힌다 */


/* 시공사례 분류 칸 — 비활성화 상태 (2026-09-17 대표님) */
.filters button[disabled] { opacity: .38; cursor: default; pointer-events: none; }

/* 오시는 길 — 연락처 + 지도 (2026-09-16 대표님) */
.contact { display: grid; gap: var(--space-xl); align-items: start; }
.contact__act { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; }
.contact__act .btn { min-height: 38px; font-size: var(--text-xs); }
.contact__map { min-width: 0; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-2); }
.contact__map iframe { display: block; width: 100%; height: 340px; border: 0; }
@media (min-width: 60rem) { .contact__map iframe { height: 400px; } }
table.spec { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.spec caption { text-align: left; font: 500 var(--text-base)/1.4 var(--font-outlier); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); padding-bottom: var(--space-sm); }
table.spec th, table.spec td { text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
table.spec th { font-weight: 500; color: var(--color-muted); width: 15rem; }
table.spec td { font-variant-numeric: tabular-nums; white-space: pre-line; }

.docs { display: grid; gap: var(--space-xs); }
.docs li { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); }
.docs .ext { font: 600 var(--text-xs)/1 var(--font-outlier); letter-spacing: .06em; text-transform: uppercase; padding: var(--space-xs) var(--space-xs); border-radius: var(--radius-chip); background: var(--color-paper-2); color: var(--color-muted); }
.docs .name { flex: 1; min-width: 0; }
.docs .name b { display: block; font-weight: 500; font-size: var(--text-sm); }
.docs .name span { color: var(--color-muted); font: 400 var(--text-xs)/1.5 var(--font-outlier); }
.docs a { color: var(--color-accent); font-weight: 500; font-size: var(--text-sm); white-space: nowrap; }
.docs a:hover { text-decoration: underline; text-underline-offset: 3px; }

.gallery { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.gallery figure { background: var(--color-paper-2); border-radius: var(--radius-card); overflow: hidden; min-width: 0; }
.gallery img { width: 100%; height: auto; }   /* 원본 비율 그대로 — 사진마다 비율이 다르다 */
.gallery figure.wide { grid-column: span 2; }
@media (max-width: 45rem) { .gallery figure.wide { grid-column: span 1; } }

/* 제품 상세 머리: 모바일 = 제목 → 큰 사진 → 수치·설명, PC = 왼쪽 제목·설명 / 오른쪽 큰 사진 (2026-09-08) */
.product-head { display: grid; gap: var(--space-lg); align-items: start; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "visual" "details"; }
.product-title { grid-area: title; } .product-visual { grid-area: visual; } .product-details { grid-area: details; }
@media (min-width: 60rem) { .product-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; grid-template-areas: "title visual" "details visual"; column-gap: var(--space-2xl); row-gap: var(--space-md); }
  .product-head--media { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "title" "visual" "details"; row-gap: var(--space-md); } }
.product-head > * { min-width: 0; }
.product-hero { display: grid; place-items: center; background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-md); aspect-ratio: 4 / 3; min-height: 240px; cursor: zoom-in; }
@media (min-width: 60rem) { .product-hero { aspect-ratio: 4 / 3; max-height: 560px; padding: var(--space-lg); } }
.product-hero img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* 2026-09-15 대표님 지적 「제품 사진이 칸을 넘친다」 — 사진 칸이 display:grid 인데 줄 높이가 auto 라서
   max-height:100% 가 칸이 아니라 사진 자신의 크기를 기준으로 계산됐다(L2 정사각 사진이 4:3 칸 아래로 PC 91px·폰 70px 넘침,
   세로·가로로 긴 갤러리 사진은 정사각 썸네일에서 잘림). 칸 안 격자를 칸 크기 그대로 한 칸으로 고정해 사진이 칸 안에서 줄어들게 한다. */
.product-hero, .gallery-strip figure, .family__img, .card .shot.product, .acc-list .thumb { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.product-hero { min-height: 0; }   /* 4:3 비율 + min-height 240px 이면 폭이 240×4/3=320px 로 커져 320px 화면에서 칸이 오른쪽으로 31px 넘쳤다. 폭 320 이상에선 비율만으로 240 이상이라 최소 높이가 필요 없다 */
/* 2026-09-15 대표님: 제품 상세 제목 위 영문 브랜드명 → 브랜드 로고. 시리즈 표기는 로고 오른쪽에 그대로 */
.product-brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-bottom: var(--space-sm); }
.product-brand img { height: auto; max-width: 100%; }
.product-brand b { font-weight: 600; letter-spacing: .04em; color: var(--color-ink-2); }
.empty { color: var(--color-muted); padding: var(--space-xl) 0; }

/* ---------- 제품 전체 페이지: 브랜드 › 제품군 › 제품 ---------- */
.brandbar .num { margin-left: 0; }
.pbrand { margin-top: var(--space-2xl); scroll-margin-top: calc(var(--banner-height) + var(--space-md)); }
.pbrand__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); border-top: var(--rule-thick) solid var(--color-ink); padding-top: var(--space-lg); margin-bottom: var(--space-md); }
.pbrand__id { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); }
.pbrand__id h2 { font-size: var(--text-xl); }
.pbrand__head p { color: var(--color-ink-2); max-width: 70ch; }
.pgroup { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); margin-top: var(--space-sm); }
.pgroup summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); min-height: 48px; }
.pgroup summary::-webkit-details-marker { display: none; }
.pgroup summary::before { content: "›"; color: var(--color-muted); font-size: var(--text-lg); line-height: 1; transition: transform var(--dur-short) var(--ease-out); }
.pgroup[open] summary::before { transform: rotate(90deg); }
.pgroup summary:hover .pgroup__name { color: var(--color-accent); }
.pgroup__name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); }
.pgroup .grid { padding: 0 var(--space-md) var(--space-md); }
.pgroup .card { background: var(--color-paper); }
@media (prefers-reduced-motion: reduce) { .pgroup summary::before { transition: none; } }


/* ---------- 제품 상세: 자료 묶음 · 갤러리 · 액세서리 · 상위 제품 (2026-09-08) ---------- */
.count { display: inline-block; margin-left: .5em; font: 500 var(--text-xs)/1 var(--font-outlier); color: var(--color-muted); vertical-align: middle; letter-spacing: .04em; }
.docgroup { margin-top: var(--space-lg); }
.docgroup h3 { font: 500 var(--text-sm)/1.3 var(--font-outlier); letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-2); margin-bottom: var(--space-xs); padding-bottom: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
.docs .name > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs .lang { font: 500 var(--text-xs)/1 var(--font-outlier); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-chip); padding: 2px 5px; color: var(--color-muted); letter-spacing: .04em; }
.product-visual { min-width: 0; }
.product-hero.drawing img { mix-blend-mode: normal; }
.figcap { margin-top: var(--space-xs); font: 400 var(--text-xs)/1.4 var(--font-outlier); color: var(--color-muted); }
.gallery-strip { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.gallery-strip a { display: block; width: min(72px, calc((100% - 4 * var(--space-xs)) / 5)); }
@media (min-width: 60rem) { .gallery-strip a { width: 96px; } }
.gallery-strip a.is-active figure { border-color: var(--color-ink); }
.gallery-strip figure { aspect-ratio: 1; background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); display: grid; place-items: center; padding: var(--space-xs); overflow: hidden; margin: 0; }
.gallery-strip img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.keystats { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); margin-top: var(--space-lg); }
.keystats div { display: grid; gap: 2px; }
.keystats b { font-size: var(--text-md); font-weight: 500; font-variant-numeric: tabular-nums; }
.keystats span { font: 400 var(--text-xs)/1.3 var(--font-outlier); color: var(--color-muted); letter-spacing: .06em; text-transform: uppercase; }
.acc-list { display: grid; gap: var(--space-xs); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.acc-list a { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-sm); align-items: center; padding: var(--space-sm); background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); color: inherit; text-decoration: none; min-width: 0; }
.acc-list a:hover { border-color: var(--color-ink); }
.acc-list .thumb { width: 56px; height: 56px; display: grid; place-items: center; background: var(--color-paper-2); border-radius: var(--radius-input); overflow: hidden; padding: 4px; }
.acc-list .thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; mix-blend-mode: multiply; }
.acc-list .txt { min-width: 0; }
.acc-list b { display: block; font-weight: 500; font-size: var(--text-sm); }
.acc-list .txt > span { display: block; color: var(--color-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sysnote { margin-top: var(--space-xl); padding: var(--space-sm) var(--space-md); border-left: 2px solid var(--color-ink); background: var(--color-surface); font-size: var(--text-sm); }
.sysnote a { text-decoration: underline; text-underline-offset: 3px; }
.card .shot.product.empty { display: grid; }
.card .shot.product .noimg { color: var(--color-muted); font: 400 var(--text-xs)/1.5 var(--font-outlier); text-align: center; letter-spacing: .04em; }
.card .shot.product.drawing img { mix-blend-mode: normal; }
/* 2026-09-16 배경 있는 사진(소프트웨어·시스템 칸)은 곱하기 합성을 끄고 칸을 꽉 채운다 — 띠가 생기던 것을 정사각 크롭으로 바꾸면서 */
.card .shot--photo img, .product-hero.shot--photo img, .gallery-strip .shot--photo img { mix-blend-mode: normal; }
/* 2026-09-16 배경 있는 사진은 칸을 꽉 채운다 — 정사각 사진이 4:3 틀에 들어가 양옆이 비던 것 (소프트웨어 12종) */
/* 소프트웨어·공간 음향 솔루션: 사진이 배너라 테두리 없이 칸을 꽉 채운다 (2026-09-16 대표님).
   사진 종류(shot--photo)는 재생성 때 바뀔 수 있어 제품 분류로 판단한다. */
.product-head--media .product-hero { padding: 0; background: none; border: 0; }
.product-head--media .product-hero img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; mix-blend-mode: normal; }
.card.pcard--media { border-color: transparent; }
.pcard.pcard--media .shot.product { border-bottom: 0; }
.pcard.pcard--media .shot.product img { object-fit: cover; mix-blend-mode: normal; }
.product-hero.shot--photo { padding: 0; background: none; }
/* 소프트웨어·공간 음향 솔루션 쪽: 사진이 배너라 제목을 사진 아래에 작고 연하게 둔다 (2026-09-16 대표님) */
.product-head--media { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "visual" "details"; }
/* 2026-09-16 제조사 쪽 구조 — 인용문 · 소개 문단 · 절 제목 */
.pquote { margin: 0 0 var(--space-lg); padding-left: var(--space-md); border-left: 2px solid var(--color-rule-2); max-width: 62ch; }
.pquote blockquote { margin: 0; font: 300 var(--text-lg)/1.55 var(--font-outlier); color: var(--color-ink-2); }
.pquote blockquote::before { content: "\201C"; }
.pquote blockquote::after { content: "\201D"; }
.pquote figcaption { margin-top: .6rem; font-size: var(--text-sm); color: var(--color-muted); letter-spacing: .02em; }
.pgloss { margin: .7rem 0 0; font-size: var(--text-sm); line-height: 1.7; color: var(--color-muted); }
.pintro { max-width: 68ch; margin: 0 0 var(--space-lg); font-size: var(--text-md); line-height: 1.75; color: var(--color-ink-2); }
h2.psec { margin-top: var(--space-2xl); font-size: var(--text-lg); letter-spacing: .01em; color: var(--color-ink); font-weight: 500; }
h2.psec:first-child { margin-top: 0; }
.product-head--media .product-details h1 { font: 500 var(--text-lg)/1.25 var(--font-outlier); color: var(--color-ink); letter-spacing: .01em; margin-bottom: .3rem; }
.product-hero.shot--photo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.card .meta .ndocs { margin-left: auto; color: var(--color-ink-2); }

/* ---------- 자료실 문서 색인 (2026-09-08) ---------- */
.pdoc summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.pdoc .pdoc__range { color: var(--color-muted); font: 400 var(--text-xs)/1.4 var(--font-outlier); }
.pdoc .pdoc__link { margin-left: auto; font: 500 var(--text-xs)/1 var(--font-outlier); color: var(--color-accent); white-space: nowrap; }
.pdoc .pdoc__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pdoc__body { padding: var(--space-xs) 0 var(--space-md); }
.pdoc__body h4 { font: 500 var(--text-xs)/1.4 var(--font-outlier); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); margin: var(--space-sm) 0 var(--space-2xs); }

/* 2026-09-10 홈 브랜드 타일 — 구 사이트 방식(현장 사진 위 로고)을 그대로 옮김.
   로고만 늘어놓으면 남의 브랜드를 파는 회사로 보인다는 대표님 지적. */
/* 브랜드 칸 — 시공사례 사진 카드와 같은 크기·형식으로 (2026-09-16 대표님) */
.brandwall { margin-top: var(--space-2xl); }
.brandwall ul { list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--space-lg) var(--space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 60rem) { .brandwall ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.brandwall li { min-width: 0; }
.brandwall a { display: grid; gap: var(--space-sm); color: inherit; text-decoration: none; }
.brandwall__shot { display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius-card); background: var(--color-dark); }
.brandwall__shot img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-long) var(--ease-out); }
.brandwall a:hover .brandwall__shot img, .brandwall a:focus-visible .brandwall__shot img { transform: scale(1.02); }
.brandwall small { display: block; font-size: var(--text-sm); color: var(--color-muted); }   /* 글자는 원래 크기로 (2026-09-17 대표님) */
.brandwall a:hover small { color: var(--color-ink-2); }
.brandwall a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* ---------- 제품 카탈로그: 브랜드 탭 → 제품군 → 시리즈 · 균일한 제품 카드 (2026-09-15) ---------- */
.ptabs { position: sticky; top: var(--banner-height); z-index: 5; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--page-gutter) * -1); padding: var(--space-sm) var(--page-gutter); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); scroll-snap-type: x proximity; }
.ptabs::-webkit-scrollbar { display: none; }
.ptabs button { flex: none; scroll-snap-align: start; min-height: 40px; }
.ptabs button .num { margin-left: var(--space-2xs); opacity: .7; }
.ptabs button.is-dim[aria-pressed="true"] { background: var(--color-surface); color: var(--color-ink-2); border-color: var(--color-rule); }
.plist__count { color: var(--color-muted); margin-top: var(--space-md); }
.pbrand { margin-top: var(--space-xl); }
.pbrand-page .pbrand { margin-top: 0; }
.pbrand-page .pbrand__head { border-top: 0; padding-top: 0; }
.pbrand-page .pbrand__id, .pbrand-page .pbrand__head > p { display: none; }
.pbrand__nav { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: var(--space-xs); margin-top: var(--space-sm); padding-bottom: 2px; }
.pbrand__nav::-webkit-scrollbar { display: none; }
.pbrand__nav a { flex: none; display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 36px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink-2); font-size: var(--text-sm); white-space: nowrap; }
.pbrand__nav a:hover { border-color: var(--color-ink-2); color: var(--color-ink); }
.pbrand__nav .num, .pcat__title .num, .pseries__title .num, .pseries--fold .num { font: 400 var(--text-xs)/1 var(--font-outlier); color: var(--color-muted); margin-left: var(--space-2xs); }
.pcat { margin-top: var(--space-2xl); scroll-margin-top: calc(var(--banner-height) + 72px); }
.pcat__title { display: flex; align-items: baseline; gap: var(--space-2xs); font-size: var(--text-lg); padding-bottom: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
.pcat__note { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-xs); }
.pseries { margin-top: var(--space-lg); }
.pseries__title { display: flex; align-items: baseline; font: 600 var(--text-sm)/1.3 var(--font-outlier); letter-spacing: .04em; color: var(--color-ink-2); margin-bottom: var(--space-sm); }
.pseries--fold { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-surface); margin-top: var(--space-xs); }
.pseries--fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-md); font-weight: 500; }
.pseries--fold summary::-webkit-details-marker { display: none; }
.pseries--fold summary::after { content: "+"; margin-left: auto; font: 400 var(--text-md)/1 var(--font-outlier); color: var(--color-muted); }
.pseries--fold[open] summary::after { content: "−"; }
.pseries--fold .grid { padding: 0 var(--space-sm) var(--space-sm); }

/* 카드 격자: 모바일 2열 · 태블릿 3열 · PC 4열 · 넓은 화면 5열 */
.grid.prod { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
@media (min-width: 40rem) { .grid.prod { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); } }
@media (min-width: 64rem) { .grid.prod { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 88rem) { .grid.prod { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* 제품 사진: 모든 카드가 같은 정사각 틀. 사진 파일 자체가 같은 여백으로 정규화돼 있어 틀을 꽉 채운다 */
.pcard .shot.product { aspect-ratio: 1; padding: 0; background: #fff; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.pcard .shot.product img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; mix-blend-mode: normal; }
.pcard .shot--photo img { object-fit: cover; }
.pcard .shot.product .noimg { color: var(--color-muted); font: 400 var(--text-xs)/1.4 var(--font-outlier); }
.pcard .body { padding: var(--space-sm) var(--space-sm) var(--space-md); gap: 2px; }
@media (min-width: 40rem) { .pcard .body { padding: var(--space-sm) var(--space-md) var(--space-md); } }
.pcard h3 { font-size: var(--text-base); line-height: 1.3; overflow-wrap: anywhere; }
@media (min-width: 40rem) { .pcard h3 { font-size: var(--text-md); } }
.pcard__desc { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard:hover .shot img { transform: none; }
.pcard:hover { border-color: var(--color-ink); }
/* 브랜드 머리: 모바일에서는 짧게 (로고 숨김 · 소개 두 줄) */
@media (max-width: 39.99rem) {
  .pbrand__id img { max-width: 100%; }
  .pbrand__id h2 { font-size: var(--text-lg); }
  .pbrand__head > p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--text-sm); }
  .pcat { margin-top: var(--space-xl); }
}

/* 제품 목록 브랜드 머리: 로고만 크게 (이름은 화면 낭독용으로만 남김) — 2026-09-15 */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pbrand__id { min-height: 64px; }
.pbrand__id img { height: auto; max-width: 100%; max-height: none; }

/* 라벨·숫자: 고정폭 서체를 없앤 대신 숫자 폭만 고르게 */
.num, .count, .eyebrow, .pcard__series, .pseries__title, .docs .ext, table.spec td { font-variant-numeric: tabular-nums; }

/* 404 — 없는 주소 (2026-09-17 대표님 지시). Cloudflare Pages 가 어느 깊이에서든 이 한 장을 내준다. */
.nf { padding-block: clamp(4rem, 14vh, 9rem) clamp(3rem, 8vh, 6rem); }
.nf__inner { max-width: 60ch; }
.nf__code { font: 500 var(--text-sm)/1 var(--font-outlier); letter-spacing: .14em; color: var(--color-muted); margin-bottom: var(--space-md); }
.nf__title { font-size: var(--text-3xl); margin: 0 0 var(--space-md); }
.nf__lede { font-size: var(--text-md); color: var(--color-ink-2); margin: 0 0 var(--space-xl); }
.nf__links { list-style: none; margin: 0 0 var(--space-xl); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-lg); }
.nf__links a { font: 500 var(--text-base)/1.4 var(--font-body); color: var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nf__links a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.nf__cta { margin: 0; }