/* 10-base — 공용 컴포넌트 (총괄 1번 소유). 사용법: components.md
   원칙: 흑/백/적, 둥근 모서리 없음, 값은 항상 HTML 텍스트, 동작은 transform/opacity·width만 + reduced-motion 정지 */

/* ── 상세 히어로: 사진 바로 다음 facts = 사진 아래 가로띠(기본 .hero) ── */
.hero .hero-img+.facts{grid-column:1/13;margin-top:0;border-top:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));column-gap:var(--gut)}
.hero .hero-img+.facts li{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px;padding:18px 0 20px;border-bottom:1px solid var(--line);border-top:2px solid var(--ink)}
.hero .hero-img+.facts b{text-align:left;font-size:clamp(18px,1.5vw,24px)}
.hero .hero-img+.facts span{line-height:1.5}

/* ── .hero.split : 1440 좌 텍스트(1~5열) / 우 사진(6~12열), ≤1024 한 단 ── */
.hero.split .grid{padding-top:clamp(40px,5vw,80px);padding-bottom:clamp(48px,6vw,96px);grid-template-rows:auto auto auto auto 1fr;align-items:start}
.hero.split .kicker,.hero.split h1,.hero.split .lead,.hero.split .hero-img+.facts,.hero.split .facts{grid-column:1/6}
.hero.split .lead{margin-top:28px;padding-top:20px}
.hero.split .hero-img{grid-column:6/13;grid-row:1/6;margin:0 0 0 var(--gut);align-self:start}
.hero.split .hero-img img{aspect-ratio:4/3}
.hero.split .hero-img+.facts{display:block;margin-top:32px;border-top:1px solid var(--ink)}
.hero.split .hero-img+.facts li{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;padding:13px 0;border-top:0}
.hero.split .hero-img+.facts b{text-align:right;font-size:clamp(16px,1.3vw,19px)}
@media (max-width:1024px){
  .hero.split .grid{grid-template-rows:none}
  .hero.split .kicker,.hero.split h1,.hero.split .lead,.hero.split .facts,.hero.split .hero-img+.facts{grid-column:1/13}
  .hero.split .hero-img{grid-column:1/13;grid-row:auto;margin:28px 0 0}
}

.sec.gray,.sec.dark{--sec-bg:var(--gray)} /* .flow.v 화살표 바탕 = 섹션 바탕 */
/* ── .flow : 공정 도식 (데스크톱 가로 + CSS 화살표, ≤760 세로, 6단계 이상은 ≤1024 세로) ── */
.flow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-top:2px solid var(--ink);counter-reset:fl}
.flow-step{counter-increment:fl;position:relative;padding:20px 36px 22px 0;border-bottom:1px solid var(--line)}
.flow-step::before{content:counter(fl,decimal-leading-zero);display:block;font-size:13.5px;font-weight:600;color:var(--red-t);margin-bottom:8px}
.flow-step:not(:last-child)::after{content:"";position:absolute;right:14px;top:26px;width:9px;height:9px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg)}
.flow-step>b{display:block;font-size:17px;font-weight:700;line-height:1.4;color:var(--ink)}
.flow-step>span{display:block;margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--t4)}
.flow-step>figure{margin-top:14px}
.flow-step>figure img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--gray);cursor:zoom-in}
.flow-step>figure figcaption{font-size:14px;line-height:1.5;color:var(--t4);padding-top:8px}
.flow.v{grid-auto-flow:row;grid-auto-columns:auto}
.flow.v .flow-step{display:grid;grid-template-columns:48px minmax(0,1fr);padding:16px 0}
.flow.v .flow-step::before{grid-row:1/span 3;margin:2px 0 0}
.flow.v .flow-step>*{grid-column:2}
.flow.v .flow-step:not(:last-child)::after{right:auto;left:8px;top:auto;bottom:-6px;transform:rotate(135deg);background:var(--sec-bg,#fff);z-index:1}
@media (max-width:1024px){
  .flow:has(>.flow-step:nth-child(6)){grid-auto-flow:row;grid-auto-columns:auto}
  .flow:has(>.flow-step:nth-child(6)) .flow-step{display:grid;grid-template-columns:48px minmax(0,1fr);padding:16px 0}
  .flow:has(>.flow-step:nth-child(6)) .flow-step::before{grid-row:1/span 3;margin:2px 0 0}
  .flow:has(>.flow-step:nth-child(6)) .flow-step>*{grid-column:2}
  .flow:has(>.flow-step:nth-child(6)) .flow-step:not(:last-child)::after{right:auto;left:8px;top:auto;bottom:-6px;transform:rotate(135deg);background:var(--sec-bg,#fff);z-index:1}
}
@media (max-width:760px){
  .flow{grid-auto-flow:row;grid-auto-columns:auto}
  .flow-step{display:grid;grid-template-columns:48px minmax(0,1fr);padding:16px 0}
  .flow-step::before{grid-row:1/span 3;margin:2px 0 0}
  .flow-step>*{grid-column:2}
  .flow-step:not(:last-child)::after{right:auto;left:8px;top:auto;bottom:-6px;transform:rotate(135deg);background:var(--sec-bg,#fff);z-index:1}
}

/* ── details.more : 사양·시험자료 펼침 (원문 삭제 대신) ── */
details.more{border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
details.more>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:14px 0;font-size:16px;font-weight:700;line-height:1.5;color:var(--ink)}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"+";flex:none;font-size:26px;font-weight:300;line-height:1;color:var(--red-t)}
details.more[open]>summary::after{content:"−"}
details.more>summary:hover{color:var(--red-t)}
details.more>:not(summary){margin-top:16px}
details.more[open]{padding-bottom:28px}

/* ── .figs 변형: duo(2열 같은 크기), strip(원 비율·업스케일 금지 소형 띠) ── */
.figs.duo{grid-template-columns:repeat(2,minmax(0,1fr))}
.figs.duo figure,.figs.duo figure:first-child{grid-column:span 1;grid-row:auto}
.figs.duo figure:first-child img{height:auto;aspect-ratio:4/3}
.figs.strip{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:end}
.figs.strip figure,.figs.strip figure:first-child{grid-column:auto;grid-row:auto}
.figs.strip img,.figs.strip figure:first-child img{width:auto;max-width:100%;height:auto;max-height:var(--strip-h,292px);aspect-ratio:auto;object-fit:contain;background:none;margin:0 auto}
@media (max-width:760px){
  .figs.duo figure:nth-child(n+2){grid-column:span 1}
  .figs.strip figure:nth-child(n+2){grid-column:auto}
}

/* ── figure.tall : 세로 장비·명판 사진 3:4, 크롭 없음 ── */
figure.tall img,.figs figure.tall:first-child img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;background:var(--gray)}

/* ── .stat-row + .src : 핵심 효과 수치 (조건·출처 캡션 필수) ── */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px var(--gut)}
.stat-row li{border-top:2px solid var(--ink);padding-top:16px}
.stat-row b{display:block;font-size:clamp(32px,2.8vw,46px);font-weight:600;letter-spacing:-.04em;line-height:1.1;color:var(--ink)}
.stat-row li>span{display:block;margin-top:8px;font-size:15px;line-height:1.5;color:var(--t2)}
p.src{font-size:14px;line-height:1.6;color:var(--t4)}
.stat-row+p.src,.sec-b>.stat-row+p.src{margin-top:12px}

/* ── .chart-grid : 그래프 2열 (모바일 1열) ── */
.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px var(--gut)}
.chart-grid img{width:100%;height:auto;background:#fff;cursor:zoom-in}
.chart-grid figcaption{font-size:14px;line-height:1.6;color:var(--t4);padding-top:10px}
@media (max-width:760px){.chart-grid{grid-template-columns:1fr;gap:28px}}

/* ── .ask : 핵심 효과 블록 뒤 '이 분야 도입 문의 →' 텍스트 링크 ── */
p.ask a{display:inline-flex;align-items:center;min-height:48px;font-size:16px;font-weight:700;color:var(--ink);border-bottom:2px solid var(--red)}
p.ask a:hover{color:var(--red-t)}

/* ── .bars : 막대 도식. 최종 폭이 기본값(no-JS·reduced-motion에서도 보임), 값은 옆 텍스트 ── */
.bars{border-top:1px solid var(--ink)}
.bars li{display:grid;grid-template-columns:minmax(6em,10em) minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.bars-l{font-size:15px;font-weight:600;line-height:1.4;color:var(--ink)}
.bars-t{height:12px;background:var(--gray)}
.bars-t i{display:block;height:100%;width:var(--v,0);background:var(--ink);transition:width 600ms var(--ease)}
.bars li.hl .bars-t i{background:var(--red)}
.bars li>b{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.bars.rv:not(.in) .bars-t i{width:0}}
@media (max-width:760px){
  .bars li{grid-template-columns:minmax(0,1fr) auto}
  .bars-t{grid-column:1/-1;grid-row:2}
}

/* ── 병합(총괄): 역할 간 공통 요청 ── */
/* facts 숫자 안 .nu 가 라벨 스타일(14px·회색·500)을 받지 않게 — 4·5·6·8번 요청, 70-type의 .hero .facts span보다 우선 */
.hero .facts b span{font:inherit;color:inherit;line-height:inherit}
/* strip 은 원 비율 소형 띠라 FIG 번호를 붙이지 않음(같은 섹션 .figs 카운터 재시작 방지) — 4번 요청 */
.figs.strip figcaption::before{content:none}
/* strip 은 모바일에서도 원 비율 유지 — 80-mobile .figs 4:3 cover 보다 우선(특이도 0,4,2 > 0,3,2) — 6번 요청 */
@media (max-width:760px){.figs.strip figure:not(.tall):not(:has(.chart)) img{aspect-ratio:auto;object-fit:contain;height:auto;max-height:var(--strip-h,292px)}}
.nu{white-space:nowrap} /* FAQ 숫자-단위 묶음 (layout.php JS) */
@media (max-width:760px){.foot .f-links{gap:0 10px}} /* 하단 메뉴 5개 한 줄 (360 포함) */