/*
  tokens.css — 업소용싱크대설치 리뉴얼 v2
  INDUSTRIAL EDITORIAL / STAINLESS KITCHEN CATALOGUE — 색상·타이포·간격 기준.
  둥근 카드/필 버튼/동일 그림자 반복 없음. 선·번호·여백·비대칭 그리드가 핵심 UI.
*/

@font-face{
  font-family: "Pretendard Variable";
  src: url("/assets/fonts/PretendardVariable.woff2") format("woff2-variations"),
       url("/assets/fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root{
  /* 면 */
  --carbon: #111315;
  --graphite: #24272A;
  --steel: #AEB4B7;
  --brushed: #D8DBDC;
  --off: #F3F3F0;
  --white: #FFFFFF;

  --paper: var(--white);
  --mist: var(--off);
  --line: #DEDDD7;
  --line-on-dark: rgba(255,255,255,.16);

  /* 글자 */
  --ink: #26282A;
  --ink-2: #45484A;
  --muted: #74787A;

  /* 포인트 — 전체 면적 5~8% 이하로만 사용 */
  --accent: #B59A78;
  --accent-deep: #94795D;

  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --container: 1360px;
  --container-narrow: 660px;
  --gutter: 24px;

  --sh-1: 0 1px 3px rgba(17,19,21,.08);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow-x: hidden;
}
@media (min-width: 1024px){ body{ font-size: 17px; } }

h1, h2, h3, h4{
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.18;
  color: var(--ink);
}
h1{ font-weight: 800; letter-spacing: -0.02em; font-size: clamp(34px, 6.4vw, 84px); line-height: 1.05; }
h2{ font-size: clamp(26px, 4.6vw, 46px); line-height: 1.1; }
h3{ font-size: clamp(18px, 2.4vw, 23px); }
h4{ font-size: 16px; }

p{ margin: 0 0 16px; }
p:last-child{ margin-bottom: 0; }
@media (min-width: 1024px){ p{ margin-bottom: 18px; } }

.lead{ font-size: clamp(16px, 2.2vw, 20px); line-height: 1.7; color: var(--ink-2); }
.muted{ color: var(--muted); }

a{ color: var(--ink); }
strong{ font-weight: 700; }
table{ border-collapse: collapse; width: 100%; }

/* ===== Editorial 라벨 시스템 (카드 대신 선/번호) ===== */
.label{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-weight: 600; font-size: 11.5px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--muted);
}
.label::before{ content:""; width: 26px; height: 1px; background: var(--accent); flex: none; }
.label--on-dark{ color: #B9BCBE; }
.label--on-dark::before{ background: var(--accent); }

.num-xl{
  font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--accent-deep); letter-spacing: -0.02em;
}

.display{ font-weight: 800; letter-spacing: -0.03em; line-height: .92; text-transform: uppercase; }

/* ===== 레이아웃 그리드 ===== */
.container{ max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow{ max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.bleed{ width: 100%; }

.section{ padding-block: 72px; border-top: 1px solid var(--line); }
@media (min-width: 900px){ .section{ padding-block: 120px; } }
.section--tight{ padding-block: 48px; }
@media (min-width: 900px){ .section--tight{ padding-block: 72px; } }
.section--mist{ background: var(--mist); }
.section--dark{ background: var(--carbon); color: var(--white); border-top-color: var(--line-on-dark); }
.section--dark h2, .section--dark h3{ color: var(--white); }
.section--noline{ border-top: none; }

/* split ratio grids (12칼럼 기반 비대칭) */
.split{ display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 900px){
  .split{ gap: 0 56px; align-items: start; }
  .split--8-4{ grid-template-columns: 2fr 1fr; }
  .split--4-8{ grid-template-columns: 1fr 2fr; }
  .split--7-5{ grid-template-columns: 7fr 5fr; }
  .split--5-7{ grid-template-columns: 5fr 7fr; }
  .split--6-6{ grid-template-columns: 1fr 1fr; }
  .split--3-9{ grid-template-columns: 3fr 9fr; }
  .split--9-3{ grid-template-columns: 9fr 3fr; }
}
.split--align-center{ align-items: center; }

/* ===== 사진 비율 유틸 (1:1 강제 금지, 원본 구도에 맞춰 선택) ===== */
.ph{ position: relative; overflow: hidden; background: var(--mist); }
.ph img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ph--16-9{ aspect-ratio: 16/9; }
.ph--4-3{ aspect-ratio: 4/3; }
.ph--3-4{ aspect-ratio: 3/4; }
.ph--2-3{ aspect-ratio: 2/3; }
.ph--1-1{ aspect-ratio: 1/1; }
.ph--3-2{ aspect-ratio: 3/2; }
.ph--auto{ aspect-ratio: auto; }

/* ===== 버튼 — 최대 3종 (필형 없음) ===== */
a, button{ font-family: inherit; }
.btn-arrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 15px; letter-spacing: -.005em; color: var(--ink);
  text-decoration: none; padding-bottom: 3px; border-bottom: 1.5px solid var(--ink);
  cursor: pointer; background: none; border-top: none; border-left: none; border-right: none;
}
.btn-arrow:hover{ border-color: var(--accent); color: var(--accent-deep); }
.btn-arrow--on-dark{ color: var(--white); border-color: var(--white); }
.btn-arrow--on-dark:hover{ color: var(--accent); border-color: var(--accent); }

.text-link{ display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.text-link:hover{ color: var(--accent-deep); }

.btn-border{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 30px; border: 1px solid var(--ink); color: var(--ink);
  font-weight: 700; font-size: 14.5px; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; background: none; cursor: pointer;
}
.btn-border:hover{ background: var(--ink); color: var(--white); }
.btn-border--on-dark{ border-color: var(--white); color: var(--white); }
.btn-border--on-dark:hover{ background: var(--white); color: var(--carbon); }

:where(a, button, summary):focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

/* ===== 표 — 산업 카탈로그 사양표 (헤더 색 과다 금지, 얇은 rule) ===== */
.spec-table{ width: 100%; border-collapse: collapse; }
.spec-table caption{ text-align: left; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; }
.spec-table th, .spec-table td{ text-align: left; padding: 16px 12px; border-bottom: 1px solid var(--line); font-size: 15px; vertical-align: top; }
.spec-table thead th{ font-family: var(--font-mono); font-weight: 600; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); background: none; }
.spec-table td:first-child, .spec-table th:first-child{ font-weight: 700; padding-left: 0; }
.spec-table td:last-child, .spec-table th:last-child{ padding-right: 0; }
@media (max-width: 640px){
  .spec-table th, .spec-table td{ padding: 11px 8px; font-size: 13px; }
}

/* ===== FAQ — 얇은 선 Full Width Accordion ===== */
.faq-list{ border-top: 1px solid var(--ink); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item summary{
  list-style: none; cursor: pointer; padding: 24px 0; font-weight: 700; font-size: 17px;
  display: flex; align-items: baseline; gap: 20px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary .num-xl{ font-size: 14px; flex: none; width: 30px; }
.faq-item summary .faq-q{ flex: 1; }
.faq-item summary .faq-toggle{ flex: none; font-family: var(--font-mono); font-size: 18px; color: var(--accent-deep); }
.faq-item[open] summary .faq-toggle{ transform: rotate(45deg); display: inline-block; }
.faq-a{ padding: 0 0 28px 50px; color: var(--ink-2); font-size: 15.5px; line-height: 1.8; max-width: 720px; }

/* ===== 브레드크럼 ===== */
.breadcrumb{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; color: var(--muted); margin-bottom: 20px; text-transform: uppercase; }
.breadcrumb a{ color: var(--muted); text-decoration: none; }
.breadcrumb a:hover{ color: var(--accent-deep); }
.breadcrumb .sep{ margin: 0 8px; }

.dateline{ font-size: 13px; color: var(--muted); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}