/* 공통 컴포넌트: 섹션 테마·패딩, 버튼, 탭, 도면 격자. 값은 tokens.css의 변수만 읽는다. */

/* 섹션 — 어두운(.s-dark) / 밝은(.s-light) / 헤더·푸터·하단 바(.s-chrome). 변수는 tokens.css */
.s-dark, .s-light, .s-chrome { background: var(--bg); color: var(--ink); }
.sec { position: relative; padding: var(--sp) 0; overflow: hidden; }
.sec > .wrap { position: relative; z-index: 1; }


/* 도면 격자 배경 (섹션 안 첫 자식) */
.grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-1) 1px, transparent 1px),
    linear-gradient(var(--grid-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-2) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}

/* 버튼 — PC 60px / 모바일 54px, 하단 바 52px */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  height: var(--btn-h); padding: 0 var(--btn-px);
  font-size: var(--fs-btn); font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  border: var(--bw) solid transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.btn-pri { background: var(--accent); color: var(--on-accent); }
.btn-pri:hover { background: color-mix(in oklab, var(--accent) 85%, var(--ink)); }
.btn-sec { border-color: var(--line-3); color: var(--ink); }
.btn-sec:hover { border-color: var(--accent); color: var(--accent); }
.btn-bar { height: var(--bar-btn-h); }

/* 탭 (분류 필터) — 높이 44px, 모바일은 줄바꿈(가로 스크롤 아님 — 끝 항목이 잘리지 않게) */
.tabs { display: flex; gap: var(--s-2); }
.tab {
  display: inline-flex; align-items: center; height: var(--tab-h); padding: 0 calc(var(--s-4) + var(--s-1));
  border: var(--bw) solid var(--line-2); color: var(--ink-2);
  font-size: var(--fs-small); font-weight: 500; white-space: nowrap;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.tab:hover { border-color: var(--accent); color: var(--accent); }
.tab[aria-current="page"], .tab.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }

@media (max-width: 760px) {
  .tabs { flex-wrap: wrap; }
  .tab { padding: 0 var(--s-4); }
}

/* ───────── 공통 요소 ───────── */
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: calc(var(--z-bar) + 1); padding: var(--s-3) var(--s-4); background: var(--white); color: var(--ink-on-light); font-weight: 600; }
.skip:focus { top: var(--s-4); }

.badge { display: inline-block; padding: 2px var(--s-2); border: var(--bw) solid var(--accent); color: var(--accent); font-size: var(--fs-small); font-weight: 600; line-height: 1.5; vertical-align: middle; }

/* 사진 자리: 회색 + 사선 해칭 + 용도 라벨 */
.ph { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 120px; background: var(--ph); overflow: hidden; }
.ph::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--ph-hatch) 0 1px, transparent 1px 14px); }
.ph span { position: relative; padding: var(--s-2) var(--s-3); background: var(--ph-label-bg); border: var(--bw) solid var(--line-dark-2); color: var(--ink-on-dark); font-size: var(--fs-small); font-weight: 500; text-align: center; }

/* 카드: 1px 테두리 + 네 모서리 크롭마크 */
.card { position: relative; border: var(--bw) solid var(--line); background: color-mix(in oklab, var(--bg) 55%, var(--white)); }
.s-dark .card { background: color-mix(in oklab, var(--bg) 80%, var(--chrome)); }
.crop { position: absolute; width: var(--crop); height: var(--crop); border: 0 solid var(--accent); pointer-events: none; z-index: 2; }
.crop.tl1 { top: -1px; left: -1px; border-top-width: var(--crop-w); border-left-width: var(--crop-w); }
.crop.tr1 { top: -1px; right: -1px; border-top-width: var(--crop-w); border-right-width: var(--crop-w); }
.crop.bl1 { bottom: -1px; left: -1px; border-bottom-width: var(--crop-w); border-left-width: var(--crop-w); }
.crop.br1 { bottom: -1px; right: -1px; border-bottom-width: var(--crop-w); border-right-width: var(--crop-w); }

/* 섹션 경계: 위쪽 1px 선 + 다음 도면 번호 라벨 ("A-03 →"). 그라데이션 띠 없음 */
.edge { position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 0; border-top: var(--bw) solid var(--line-3); pointer-events: none; }
.edge span { position: absolute; top: var(--s-3); right: var(--gut); color: var(--ink-3); }

/* 시트바: 도면 번호 · 영문 섹션명 · 한글 섹션명 · 치수선 */
.sheetbar { display: flex; align-items: center; gap: var(--s-5); margin-bottom: calc(var(--sp) * .45); color: var(--ink-3); }
.sheetbar .no { color: var(--accent); }
.sheetbar .ko { font-size: var(--fs-small); }
.sheetbar .rule { position: relative; flex: 1; height: var(--bw); background: var(--line-2); }
.sheetbar .rule::before, .sheetbar .rule::after { content: ""; position: absolute; top: -5px; width: var(--bw); height: 11px; background: var(--line-3); }
.sheetbar .rule::before { left: 0; }
.sheetbar .rule::after { right: 0; }
h2 em { font-style: normal; color: var(--accent); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink-2); }

/* ───────── 헤더 ───────── */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); }
/* 배경은 ::before의 opacity로만 바꾼다(헤더 상자 높이·본문 위치 불변). 켜진 상태는 항상 남색 불투명 */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--chrome); border-bottom: var(--bw) solid var(--line); transition: opacity .4s var(--ease); }
.js .site-header:not(.solid):not(.scrolled):not(.open)::before { opacity: 0; }
.logo { transform-origin: left center; transition: transform .4s var(--ease); }
.site-header.scrolled .logo { transform: scale(.9); }
/* 로고 비교안 color: 항상 흰 바탕(헤더 자체 바탕도 흰색), 스크롤해도 로고 크기·바탕 불변. 글자·선·초점색은 s-light 변수 */
.site-header--color, .site-header--color::before { background: var(--white); }
.site-header--color::before { border-bottom-color: var(--line-3); } /* --line(.14)은 밝은 섹션(종이색)과 맞닿을 때 안 보여 --line-3 사용 */
.site-header--color.scrolled .logo { transform: none; }
.hdr-in { display: flex; align-items: center; gap: var(--s-7); height: var(--header-h); }
.logo { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.logo-tile { display: block; flex: none; width: 44px; height: 44px; padding: 2px; background: var(--paper); border: var(--bw) solid var(--line-3); }
.logo-tile img { display: block; width: 100%; height: 100%; }
.logo-mark { display: block; flex: none; width: 44px; height: 44px; }
.logo--white .logo-txt b, .logo--white .logo-txt i, .foot-top .foot-brand--white .brand, .foot-top .foot-brand--white .brand-en { color: var(--white); }
.logo-txt { display: flex; flex-direction: column; line-height: 1; }
.logo-txt b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.logo-txt i { font-style: normal; font-size: 10px; letter-spacing: .32em; color: var(--ink-3); margin-top: 5px; }
.gnb { display: flex; gap: 44px; margin-left: auto; }
.gnb a { position: relative; padding: var(--s-2) 0; font-size: 16px; font-weight: 500; color: var(--ink-2); transition: color .25s var(--ease); }
.gnb a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: var(--bw); background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.gnb a:hover { color: var(--ink); }
.gnb a:hover::after { transform: scaleX(1); }
.hdr-call { display: flex; align-items: center; gap: 10px; flex-shrink: 0; height: 46px; padding: 0 20px 0 var(--s-4); border: var(--bw) solid var(--line-2); font-size: var(--fs-small); font-weight: 600; white-space: nowrap; transition: border-color .25s var(--ease), background .25s var(--ease); }
.hdr-call:hover { border-color: var(--accent); background: var(--acc-soft); }
.hdr-call svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.6; }
.hdr-call small { font-size: var(--fs-label); font-weight: 500; color: var(--ink-3); margin-right: 2px; }
.hdr-menu { display: none; }

/* 모바일 메뉴 (전체 화면) */
.mnav { position: fixed; inset: 0; z-index: var(--z-mnav); display: none; flex-direction: column; padding: calc(var(--header-h) + var(--s-5)) var(--s-5) 120px; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.mnav .grid-bg { position: absolute; }
.mnav .mi { position: relative; z-index: 1; display: flex; align-items: baseline; gap: var(--s-4); padding: 20px 0; border-bottom: var(--bw) solid var(--line); font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.mnav .mi span { color: var(--accent); }
.mnav-info { position: relative; z-index: 1; margin-top: auto; color: var(--ink-2); line-height: 1.8; }
.mnav-info b { display: block; font-size: 20px; color: var(--ink); }
.mnav.open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; } /* 열 때는 바로 보이게(곧바로 첫 메뉴에 초점), 닫을 때는 페이드 */

/* ───────── 푸터 ───────── */
.site-footer { padding: var(--s-8) 0 56px; border-top: var(--bw) solid var(--line); color: var(--ink-2); }
.site-footer ul { display: grid; gap: var(--s-3); line-height: 1.6; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); padding-bottom: 44px; border-bottom: var(--bw) solid var(--line); }
.foot-top .brand { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.foot-brand { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.foot-top .brand-en { color: var(--ink-3); letter-spacing: .28em; margin: var(--s-2) 0 0; }
.foot-top .slogan { font-size: var(--fs-body); color: var(--ink-2); }
.foot-h { font-size: var(--fs-small); font-weight: 600; color: var(--ink); margin-bottom: var(--s-4); letter-spacing: 0; }
.branches b { display: inline-block; min-width: 3.6em; color: var(--ink); font-weight: 600; }
.foot-contact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); margin-top: 40px; }
.foot-contact li { display: flex; flex-direction: column; gap: 6px; }
.foot-contact span { color: var(--ink-3); font-size: var(--fs-small); }
.foot-contact a { color: var(--ink); font-weight: 600; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-5); padding-top: 28px; margin-top: 40px; border-top: var(--bw) solid var(--line); color: var(--ink-3); }
.foot-legal { font-size: var(--fs-small); }
.foot-links { display: flex; align-items: center; gap: var(--s-5); }
.foot-links a { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink-2); transition: color .25s var(--ease); }
.foot-links a:hover { color: var(--accent); }
.foot-links svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.foot-links .dot { fill: currentColor; stroke: none; }

/* ───────── 모바일 하단 고정 바 (노출은 site.js) ───────── */
.m-bar { display: none; }

/* ───────── 폼 ───────── */
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.field input:not([type="checkbox"]), .field select { width: 100%; height: var(--input-h); padding: 0 var(--s-4); font-size: var(--fs-body); background: var(--bg); color: var(--ink); border: var(--bw) solid var(--line-3); }
/* R9 [Q4] 처음 3줄(rows="3"과 같은 높이), 입력하면 8줄까지 늘어남. field-sizing 없는 브라우저(Safari)는 3줄 고정 + 칸 안 스크롤 */
.field textarea { width: 100%; field-sizing: content; min-height: calc(3lh + var(--s-3) * 2 + var(--bw) * 2); max-height: calc(8lh + var(--s-3) * 2 + var(--bw) * 2); padding: var(--s-3) var(--s-4); font: inherit; font-size: var(--fs-body); line-height: 1.6; background: var(--bg); color: var(--ink); border: var(--bw) solid var(--line-3); resize: vertical; }
.field-hint { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field.check { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.field.check input { width: 24px; height: 24px; flex: none; accent-color: var(--accent); }
.field.check label { font-weight: 500; }
.field.check a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.form-error { padding: var(--s-3) var(--s-4); border-left: 4px solid var(--accent); background: var(--acc-soft); color: var(--err); font-weight: 700; }

@media (max-width: 760px) {
  .hdr-in { gap: var(--s-3); }
  .logo-tile, .logo-mark { width: 38px; height: 38px; }
  .logo-txt b { font-size: 16px; }
  .gnb, .hdr-call { display: none; }
  .hdr-menu { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 7px; margin-left: auto; width: 44px; height: 44px; padding-right: 2px; }
  .hdr-menu span { display: block; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), width .3s var(--ease); }
  .hdr-menu span:first-child { width: 24px; }
  .hdr-menu span:last-child { width: 16px; }
  .hdr-menu.open span:first-child { transform: translateY(4.25px) rotate(45deg); width: 22px; }
  .hdr-menu.open span:last-child { transform: translateY(-4.25px) rotate(-45deg); width: 22px; }
  .mnav { display: flex; }
  /* JS가 없으면 햄버거 대신 메뉴 링크를 헤더 아래 줄에 둔다 */
  html:not(.js) .hdr-menu, html:not(.js) .mnav { display: none; }
  html:not(.js) .hdr-in { flex-wrap: wrap; height: auto; padding-bottom: var(--s-2); }
  html:not(.js) .gnb { display: flex; flex-basis: 100%; gap: var(--s-5); margin: 0; }
  .sheetbar { gap: var(--s-3); margin-bottom: 36px; }
  .sheetbar .ko { display: none; }
  .site-footer { padding: 48px 0 calc(var(--bar-btn-h) + var(--s-6) + env(safe-area-inset-bottom)); line-height: 1.7; }
  .foot-top { grid-template-columns: 1fr; gap: 36px; padding-bottom: var(--s-6); }
  .foot-contact { grid-template-columns: 1fr; gap: var(--s-5); margin-top: 28px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }

  .m-bar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); padding: 10px var(--s-3) calc(10px + env(safe-area-inset-bottom)); border-top: var(--bw) solid var(--line-2); transform: translateY(110%); visibility: hidden; transition: transform .5s var(--ease), visibility .5s; }
  .m-bar.show { transform: none; visibility: visible; }
  .m-bar .btn { padding: 0 var(--s-3); }
}

.btn .mono { font-size: inherit; letter-spacing: 0; }
.form-ok { display: grid; gap: var(--s-3); font-size: var(--fs-body); line-height: 1.7; color: var(--ink); }
.form-ok p { margin: 0; }
.form-ok a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form-ok:focus { outline: none; }
.consent-note { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); border: var(--bw) solid var(--line-2); font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); }
.consent-note p { margin: 0; }
.consent-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.form-ok[hidden], .quote-form[hidden], .form-error[hidden] { display: none; }
.quote-form .btn[disabled] { opacity: .6; cursor: progress; }
.field [aria-invalid="true"] { border-color: var(--accent); outline: 2px solid var(--accent); }