/* ───────── 디자인 토큰 : 색·간격·타이포를 한 곳에서 관리한다 ───────── */
:root{
  --blue:#1F6FEB; --blue-dk:#1552BC; --green:#00A86B; --green-tx:#00734C;
  --ink:#1A1F26; --body:#4A545E; --mute:#626C77;
  --line:#E5EAF0; --soft:#F5F8FA; --tint:#E8F1FF; --dark:#121710;
  --wrap:min(1180px, calc(100% - 48px));
  --r:14px; --shadow:0 2px 4px rgba(26,31,38,.04), 0 12px 32px rgba(26,31,38,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; background:#fff}

/* 같은 사이트의 다른 문서로 이동할 때 흰 화면이 번쩍이지 않게 연결한다. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:page-out .10s ease both}
::view-transition-new(root){animation:page-in .16s ease both}
@keyframes page-out{to{opacity:.82}}
@keyframes page-in{from{opacity:.82}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
body{
  margin:0; background:#fff; color:var(--body);
  font-family:Pretendard,"Pretendard Variable",-apple-system,"Malgun Gothic","맑은 고딕",sans-serif;
  font-size:17px; line-height:1.6; word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{color:var(--ink); margin:0; line-height:1.35; font-weight:700; letter-spacing:-.02em}
p{margin:0}
.wrap{width:var(--wrap); margin-inline:auto}
.sec{padding:96px 0}
.sec--soft{background:var(--soft)}
.eyebrow{font-size:14px; font-weight:700; color:var(--blue); letter-spacing:.08em; text-transform:uppercase}
.sec-head{margin-bottom:44px; max-width:760px}
.sec-head h2{font-size:34px; margin-top:10px}
.sec-head p{margin-top:14px; font-size:17px; color:var(--body)}

/* ───────── 버튼 : 사이트 전체에서 같은 모양을 재사용한다 ───────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:56px; padding:0 28px; border-radius:10px; font-size:17px; font-weight:700;
  border:1.5px solid transparent; cursor:pointer; transition:.15s; white-space:nowrap}
.btn--primary{background:var(--blue); color:#fff}
.btn--primary:hover{background:var(--blue-dk)}
.btn--ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--blue); color:var(--blue)}
.btn--sm{height:44px; padding:0 20px; font-size:15px; border-radius:8px}
.btn:focus-visible{outline:3px solid rgba(31,111,235,.4); outline-offset:2px}

/* ───────── H-01 GNB ───────── */
.gnb{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.gnb__in{display:flex; align-items:center; gap:36px; height:74px}
.logo{font-size:19px; font-weight:800; color:var(--ink); letter-spacing:-.03em; display:flex; align-items:center; gap:9px}
.logo .logo-symbol{height:32px; width:auto}
.gnb nav{display:flex; gap:30px; font-size:16px; font-weight:600; color:var(--ink)}
.gnb nav a:hover{color:var(--blue)}
.gnb__cta{margin-left:auto; display:flex; align-items:center; gap:14px}
.gnb__tel{font-size:15px; font-weight:700; color:var(--ink)}
.gnb__tel span{color:var(--mute); font-weight:600; margin-right:6px}

/* ───────── H-02 Hero ───────── */
.hero{background:linear-gradient(180deg,#F7FAFF 0%, #fff 78%); padding:76px 0 64px; overflow:hidden}
.hero--full{display:grid; align-content:center; min-height:calc(100vh - 74px); min-height:calc(100svh - 74px)}
.hero__in{display:grid; grid-template-columns:1.06fr .94fr; gap:48px; align-items:center}
.hero h1{font-size:43px; line-height:1.28; margin-top:14px}
.hero__sub{margin-top:20px; font-size:18px; max-width:520px}
.hero__cta{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap}
.hero__note{margin-top:22px; font-size:14px; color:var(--mute)}
.hero__img{position:relative}
.hero__img img{width:100%}
.hero__badge{position:absolute; left:0; bottom:6px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:12px 18px; box-shadow:var(--shadow); font-size:14px; font-weight:700; color:var(--ink)}
.hero__badge b{color:var(--blue)}

/* ───────── 신뢰 수치 밴드 ───────── */
.band{border-block:1px solid var(--line); background:#fff}
.band ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr)}
.band li{padding:30px 24px; text-align:center; border-left:1px solid var(--line)}
.band li:first-child{border-left:0}
.band b{display:block; font-size:32px; font-weight:800; color:var(--ink); letter-spacing:-.03em}
.band span{display:block; margin-top:4px; font-size:15px; color:var(--mute)}

/* ───────── 카드 공통 ───────── */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}

/* ───────── H-03 후기 ───────── */
.quote{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px}
.quote p{font-size:18px; font-weight:700; color:var(--ink); line-height:1.5}
.quote footer{margin-top:16px; font-size:14px; color:var(--mute)}
.quote i{display:block; width:26px; height:3px; background:var(--blue); border-radius:2px; margin-bottom:18px}

/* ───────── H-04 문제 ───────── */
.prob{padding:26px 24px; background:#fff; border:1px solid var(--line); border-radius:var(--r)}
.prob b{display:block; font-size:17px; color:var(--ink); font-weight:700}
.prob span{display:block; margin-top:8px; font-size:15px; color:var(--body)}

/* ───────── 선택 기준 3단계 ───────── */
.step{position:relative; padding:30px 26px; background:var(--soft); border-radius:var(--r); border:1px solid var(--line)}
.step em{font-style:normal; display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:var(--blue); color:#fff; font-weight:800; font-size:16px; margin-bottom:16px}
.step b{display:block; font-size:19px; color:var(--ink)}
.step p{margin-top:10px; font-size:15px}

/* ───────── H-06 대표 제품 ───────── */
.hero-prod{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
  background:var(--tint); border-radius:20px; padding:40px}
.tag{display:inline-block; background:var(--blue); color:#fff; font-size:13px; font-weight:700;
  padding:6px 12px; border-radius:999px}
.hero-prod h3{font-size:30px; margin-top:16px}
.spec{list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px}
.spec li{font-size:15px; color:var(--body); display:flex; gap:10px}
.spec li b{min-width:76px; color:var(--mute); font-weight:600}
.price{margin-top:24px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.price strong{font-size:30px; color:var(--ink); letter-spacing:-.03em}
.price span{font-size:15px; color:var(--mute)}

/* 나머지 모델 카드 */
.model{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px; text-align:center}
.model img{margin:0 auto 12px}
.model b{display:block; font-size:18px; color:var(--ink)}
.model span{display:block; font-size:14px; color:var(--mute); margin-top:2px}
.model em{display:block; font-style:normal; margin-top:10px; font-size:15px; font-weight:700; color:var(--blue)}

/* ───────── H-07 비교표 ───────── */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff}
table{border-collapse:collapse; width:100%; min-width:820px; font-size:15px}
th,td{padding:15px 16px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
thead th{background:var(--soft); color:var(--ink); font-weight:700; font-size:14px}
tbody tr:last-child td{border-bottom:0}
tbody tr.is-rec{background:#F4F9FF}
tbody tr.is-rec td{font-weight:700; color:var(--ink)}
td .pill{display:inline-block; background:var(--blue); color:#fff; font-size:12px; font-weight:700;
  padding:3px 9px; border-radius:999px; margin-left:8px}

/* ───────── H-08 업종별 ───────── */
.ind{padding:26px; background:#fff; border:1px solid var(--line); border-radius:var(--r)}
.ind b{display:block; font-size:19px; color:var(--ink)}
.ind i{font-style:normal; display:block; margin-top:6px; font-size:28px; font-weight:800; color:var(--blue); letter-spacing:-.03em}
.ind span{display:block; margin-top:10px; font-size:15px}

/* ───────── H-10 설치 사례 ───────── */
.case{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff}
.case img{aspect-ratio:4/3; object-fit:cover; width:100%}
/* site4.jpg 는 세로로 긴 원본이라 중앙 기준 크롭이면 기기 뚜껑이 잘린다. 위쪽 기준으로 자른다 */
.case img[src$="site4.jpg"]{object-position:top}
.case div{padding:16px 18px}
.case b{display:block; font-size:16px; color:var(--ink)}
.case span{display:block; margin-top:3px; font-size:14px; color:var(--mute)}

/* ───────── 증거 · 인증 ───────── */
.proof{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.proof div{padding:24px; background:#fff; border:1px solid var(--line); border-radius:var(--r)}
.proof b{display:block; font-size:16px; color:var(--ink)}
.proof span{display:block; margin-top:8px; font-size:14px; color:var(--body)}
.logos{margin-top:30px; padding:22px 0; border-top:1px solid var(--line)}
.logos img{width:100%; max-width:900px; margin-inline:auto; opacity:.85}

/* ───────── H-11 최종 CTA ───────── */
.final{background:var(--dark); color:#fff; text-align:center; padding:84px 0}
.final h2{color:#fff; font-size:34px}
.final p{margin-top:16px; color:#B9C2C8; font-size:17px}
.final .btns{margin-top:34px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.final .btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.final .btn--ghost:hover{border-color:#fff; color:#fff}

/* ───────── F-01 푸터 ───────── */
footer.site{background:#0D1114; color:#8B959D; font-size:14px; padding:56px 0 40px}
.foot{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px}
.foot h4, .foot .foot__h{color:#fff; font-size:15px; margin-bottom:14px}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
/* 푸터 링크도 터치 44px 를 채운다 */
.foot li a{display:inline-flex; align-items:center; min-height:44px}
.foot a:hover{color:#fff}
.foot .biz{margin-top:16px; line-height:1.9}
.foot .biz b{color:#C6CFD5; font-weight:600}
.foot__bar{margin-top:36px; padding-top:22px; border-top:1px solid #1E262B;
  display:flex; gap:18px; flex-wrap:wrap; align-items:center}
.foot__bar a{font-weight:700; color:#C6CFD5}
.foot__bar span{margin-left:auto}

/* 모바일 하단 고정 CTA — 모바일에서만 보인다 */
.dock{display:none}

/* ───────── 반응형 ───────── */
@media (max-width:1024px){
  .hero__in{grid-template-columns:1fr; gap:34px}
  .hero h1{font-size:38px}
  .grid-4,.proof{grid-template-columns:repeat(2,1fr)}
  .hero-prod{grid-template-columns:1fr; padding:30px}
  /* 태블릿·모바일에서는 메뉴를 로고 아래 한 줄로 내린다.
     전에는 display:none 이라 메뉴가 아예 사라졌고 햄버거도 없어서 이동 경로가 없었다 */
  .gnb__in{flex-wrap:wrap; height:auto; padding:12px 0; gap:14px 24px}
  .gnb nav{order:3; width:100%; display:flex; gap:22px; overflow-x:auto;
    padding-bottom:2px; -webkit-overflow-scrolling:touch}
  .gnb nav a{white-space:nowrap}
  .gnb__cta{margin-left:auto}
}
@media (max-width:767px){
  body{font-size:16px}
  :root{--wrap:calc(100% - 36px)}
  .sec{padding:60px 0}
  .sec-head h2{font-size:26px}
  .hero{padding:44px 0 40px}
  .hero h1{font-size:30px}
  .hero__sub{font-size:16px}
  .hero__cta .btn{width:100%}
  .band ul{grid-template-columns:repeat(2,1fr)}
  .band li{border-left:0; border-top:1px solid var(--line); padding:22px 12px}
  .band li:nth-child(-n+2){border-top:0}
  .band b{font-size:26px}
  .grid-3,.grid-2,.grid-4,.proof{grid-template-columns:1fr}
  .spec{grid-template-columns:1fr}
  .final{padding:60px 0 96px}
  .final h2{font-size:26px}
  .gnb__tel,.gnb__cta .btn{display:none}
  .foot{grid-template-columns:1fr}
  /* 모바일 하단 고정 CTA */
  .dock{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; gap:8px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96);
    border-top:1px solid var(--line); backdrop-filter:blur(8px)}
  .dock .btn{flex:1; height:52px; font-size:16px}
  .dock .btn--ghost{flex:0 0 108px}
  /* 하단 고정 CTA 가 푸터 마지막 줄(개인정보처리방침·저작권)을 가리지 않게 자리를 비운다 */
  footer.site{padding-bottom:calc(40px + 72px + env(safe-area-inset-bottom))}
}


/* ═════════════════════════════════════════════════════════
   여기서부터 서브 페이지(랜딩 · 제품상세 · 견적문의) 전용
   ═════════════════════════════════════════════════════════ */

/* ───────── 서브 페이지 공통 — 상단 타이틀 띠 · 현재위치 ───────── */
.subhead{background:linear-gradient(180deg,#F7FAFF 0%,#fff 100%); border-bottom:1px solid var(--line); padding:40px 0 44px}
.crumb{font-size:14px; color:var(--mute); display:flex; gap:8px; align-items:center}
.crumb a:hover{color:var(--blue)}
.subhead h1{font-size:36px; margin-top:14px}
.subhead p{margin-top:12px; font-size:17px; max-width:720px}

/* ───────── L-02 고민 말풍선 ───────── */
.bubbles{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.bubble{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:24px 26px; font-size:18px; font-weight:700; color:var(--ink); line-height:1.5}
.bubble:after{content:""; position:absolute; left:32px; bottom:-9px; width:16px; height:16px;
  background:#fff; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transform:rotate(45deg)}
.bubble span{display:block; margin-top:14px; font-size:14px; font-weight:600; color:var(--mute)}

/* ───────── L-05 절감계산기 ───────── */
.calc{display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:start}
.calc__in{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px}
.calc__out{background:var(--tint); border:1px solid #CFE0FF; border-radius:var(--r); padding:28px}
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
.field label{display:block; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:8px}
.field input,.field select,.field textarea{width:100%; height:52px; padding:0 14px; font:inherit; font-size:16px;
  color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:10px}
.field textarea{height:110px; padding:12px 14px; line-height:1.5; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue)}
/* 키보드 포커스는 반드시 테두리 외에 표시를 남긴다 (색 변화만으로는 접근성 미달) */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--blue); outline-offset:2px}
.field .hint{margin-top:7px; font-size:13px; color:var(--mute)}
/* 파일 첨부 — 브라우저 기본 버튼이 다른 입력창과 안 어울려서 버튼만 사이트 스타일로 맞춘다 */
.field input[type=file]{display:flex; align-items:center; gap:12px; padding:0 8px; color:var(--mute); font-size:14px}
.field input[type=file]::file-selector-button,
.field input[type=file]::-webkit-file-upload-button{
  height:36px; padding:0 18px; border-radius:8px; border:1.5px solid var(--line); background:#fff;
  color:var(--ink); font:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:.15s}
.field input[type=file]::file-selector-button:hover,
.field input[type=file]::-webkit-file-upload-button:hover{border-color:var(--blue); color:var(--blue)}
.calc__row{display:flex; justify-content:space-between; align-items:baseline; padding:13px 0; border-bottom:1px dashed #C9DCFB; font-size:15px}
.calc__row:last-of-type{border-bottom:0}
.calc__row b{font-size:17px; color:var(--ink)}
.calc__big{margin-top:16px; padding-top:18px; border-top:2px solid #BFD5F8}
.calc__big span{font-size:15px; color:var(--body)}
.calc__big strong{display:block; margin-top:6px; font-size:34px; color:var(--green-tx); letter-spacing:-.03em}
.calc__note{margin-top:16px; font-size:13px; color:var(--mute); line-height:1.6}

/* ───────── 폼 · 동의 (랜딩 L-11 · 견적문의 Q-08) ───────── */
.form{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px}
.form__grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px}
.form__grid--2{grid-template-columns:1fr 1fr}
.form__full{grid-column:1/-1}
.agree{margin-top:24px; padding:20px 22px; background:var(--soft); border:1px solid var(--line); border-radius:10px}
.agree label{display:flex; gap:10px; align-items:flex-start; font-size:15px; font-weight:700; color:var(--ink); cursor:pointer}
.agree input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--blue); flex:0 0 auto}
.agree .terms{margin-top:12px; padding-left:30px; font-size:13px; color:var(--mute); line-height:1.7}
.agree .terms a{color:var(--body); text-decoration:underline}
.form__submit{margin-top:24px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.form__submit .btn{min-width:220px}
.form__submit p{font-size:14px; color:var(--mute)}
.req{color:var(--blue-dk)}

/* ───────── 폼 옆 안내 박스 ───────── */
.aside{background:var(--dark); color:#D5DDD8; border-radius:var(--r); padding:28px}
.aside h3{color:#fff; font-size:20px}
.aside ul{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px; font-size:15px}
.aside li{display:flex; gap:10px}
.aside li i{font-style:normal; color:#5BD6A0; flex:0 0 auto}
.aside .tel{margin-top:22px; padding-top:18px; border-top:1px solid #2A322B; font-size:15px}
.aside .tel b{display:block; color:#fff; font-size:22px; margin-top:4px; letter-spacing:-.02em}

/* ───────── Q-10 완료 화면 ───────── */
.done{max-width:680px; margin-inline:auto; text-align:center; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); padding:48px 32px; box-shadow:var(--shadow)}
.done i{display:grid; place-items:center; width:64px; height:64px; margin:0 auto 22px; border-radius:50%;
  background:var(--green); color:#fff; font-style:normal; font-size:30px; font-weight:800}
.done h1, .done h2{font-size:28px}
.done p{margin-top:14px; font-size:16px}
.done .next{margin-top:26px; padding-top:22px; border-top:1px solid var(--line); text-align:left;
  display:grid; gap:10px; font-size:15px}

/* ───────── 제품 상세 — 모델 헤드 · 사양 ───────── */
.phead{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
.phead h1, .phead h2{font-size:32px; margin-top:14px}
.pgallery{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px}
.pgallery img{border:1px solid var(--line); border-radius:10px}
.ptabs{display:flex; gap:8px; border-bottom:1px solid var(--line); margin-bottom:32px; flex-wrap:wrap}
.ptabs a{padding:14px 20px; font-size:16px; font-weight:700; color:var(--mute)}
.ptabs a.is-on{color:var(--blue); box-shadow:inset 0 -3px 0 var(--blue)}
.spec-table th{width:190px; background:var(--soft); color:var(--ink)}
.spec-table td,.spec-table th{white-space:normal}
.install{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.install div{padding:24px; background:#fff; border:1px solid var(--line); border-radius:var(--r)}
.install b{display:block; font-size:16px; color:var(--ink)}
.install span{display:block; margin-top:8px; font-size:15px}
.pricebox{display:grid; grid-template-columns:1fr 1fr auto; gap:20px; align-items:center;
  background:var(--tint); border:1px solid #CFE0FF; border-radius:var(--r); padding:28px}
.pricebox div span{display:block; font-size:14px; color:var(--mute)}
.pricebox div strong{display:block; margin-top:6px; font-size:28px; color:var(--ink); letter-spacing:-.03em}
.pricebox div.is-rec strong{color:var(--blue)}

/* ───────── 서브 페이지 반응형 ───────── */
@media (max-width:1024px){
  .calc,.phead{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr 1fr}
  .install{grid-template-columns:repeat(2,1fr)}
  .pricebox{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .subhead h1{font-size:27px}
  .bubbles,.form__grid,.form__grid--2,.install{grid-template-columns:1fr}
  .pricebox{grid-template-columns:1fr; text-align:center}
  .calc__big strong{font-size:28px}
  .form__submit .btn{width:100%}
  .ptabs a{padding:12px 14px; font-size:15px}
}

/* ───────── 폼 + 안내 2단 (랜딩 · 견적문의) ─────────
   인라인 style 로 열 폭을 주면 아래 미디어쿼리를 이겨서 모바일에서 가로가 넘친다 */
.formrow{display:grid; grid-template-columns:1.35fr .65fr; gap:24px; align-items:start}
@media (max-width:1024px){ .formrow{grid-template-columns:1fr} }

/* ───────── FAQ 아코디언 — <details> 로 만든다. JS 없이 열고 닫힌다 ───────── */
.faq{border:1px solid var(--line); border-radius:var(--r); background:#fff; overflow:hidden}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none; cursor:pointer; padding:22px 26px; font-size:17px; font-weight:700;
  color:var(--ink); display:flex; gap:14px; align-items:flex-start; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"Q"; flex:0 0 auto; width:26px; height:26px; border-radius:7px;
  background:var(--tint); color:var(--blue); font-size:14px; font-weight:800; display:grid; place-items:center}
.faq summary:after{content:"+"; margin-left:auto; color:var(--mute); font-size:22px; font-weight:400; line-height:1}
.faq details[open] summary:after{content:"−"}
.faq summary:hover{color:var(--blue)}
.faq .a{padding:0 26px 24px 66px; font-size:16px; color:var(--body); line-height:1.65}

/* ───────── 미확정 수치 — 승인 전에는 확정처럼 보이면 안 된다 ───────── */
.pending{color:var(--mute); border-bottom:1px dashed #B6BFC8; cursor:help}
.note-pending{margin-top:14px; padding:14px 18px; background:#FFF7E6; border:1px solid #F0DCB4;
  border-radius:10px; font-size:14px; color:#7A5B1E; line-height:1.6}
.badge-hold{display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  background:#F0DCB4; color:#5C4411; font-size:12px; font-weight:700; white-space:nowrap}
tbody tr.is-hold td{color:var(--mute)}

/* ───────── 제품 영상 ───────── */
.videos{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.video{position:relative; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#000}
.video img{width:100%; aspect-ratio:16/9; object-fit:cover; opacity:.72}
.video i{position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); width:56px; height:56px;
  border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; font-style:normal;
  color:var(--ink); font-size:18px; padding-left:4px}
.video b{position:absolute; left:0; right:0; bottom:0; padding:14px 18px; color:#fff; font-size:15px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.72) 100%)}

/* ───────── 판매채널 연결 ───────── */
.channels{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.channel{display:flex; align-items:center; gap:16px; padding:22px 24px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r)}
.channel i{flex:0 0 auto; width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  background:var(--soft); font-style:normal; font-size:18px; font-weight:800; color:var(--blue)}
.channel b{display:block; font-size:16px; color:var(--ink)}
.channel span{display:block; margin-top:3px; font-size:14px; color:var(--mute)}
.channel em{margin-left:auto; font-style:normal; color:var(--mute); font-size:20px}

/* ───────── 자료 다운로드 ───────── */
.downloads{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.dl{display:flex; align-items:center; gap:14px; padding:18px 20px; background:#fff;
  border:1px solid var(--line); border-radius:12px}
.dl i{flex:0 0 auto; width:38px; height:38px; border-radius:9px; background:var(--tint); color:var(--blue);
  display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:800}
.dl b{display:block; font-size:15px; color:var(--ink)}
.dl span{display:block; font-size:13px; color:var(--mute); margin-top:2px}

/* ───────── 핵심 특징 · 운영 관리 ───────── */
.feat{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.feat div{padding:26px 24px; background:#fff; border:1px solid var(--line); border-radius:var(--r)}
.feat em{font-style:normal; display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:var(--tint); color:var(--blue); font-weight:800; font-size:15px; margin-bottom:14px}
.feat b{display:block; font-size:17px; color:var(--ink)}
.feat span{display:block; margin-top:8px; font-size:15px}

@media (max-width:1024px){
  .videos,.channels,.feat{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .videos,.channels,.feat,.downloads{grid-template-columns:1fr}
  .faq summary{padding:18px; font-size:16px}
  .faq .a{padding:0 18px 20px 58px; font-size:15px}
}

/* 그리드 칸 안에 표처럼 넓은 요소가 들어가면 칸이 안 줄어들어 가로가 넘친다.
   min-width:0 을 줘야 칸이 화면 폭에 맞춰 줄어들고, 표는 tablewrap 안에서만 옆으로 넘어간다 */
.phead > *, .calc > *, .formrow > *,
.grid-2 > *, .grid-3 > *, .grid-4 > *{min-width:0}

/* ═════ 화면 톤 — 카드 나열에서 벗어나기 위한 규칙 ═════ */

/* 1) Hero — 실적 숫자를 본문 안에 크게 박는다 */
.hero{background:linear-gradient(160deg,#EEF4FF 0%,#F8FBFF 46%,#fff 100%)}
.hero__in{grid-template-columns:1.12fr .88fr}
.hero h1{font-size:46px}
.hero__stats{display:grid; grid-template-columns:repeat(4,auto); gap:34px; margin-top:36px;
  padding-top:26px; border-top:1px solid #D8E4F7}
.hero__stats div b{display:block; font-size:30px; font-weight:800; color:var(--ink); letter-spacing:-.03em}
.hero__stats div span{display:block; margin-top:2px; font-size:13px; color:var(--mute)}
.hero__stats div b{color:var(--ink)}

/* 2) 다크 구간 — 흰 화면이 이어지지 않게 끊어준다 */
.sec--dark{background:var(--dark); color:#C8D2CC}
.sec--dark h2{color:#fff}
.sec--dark .sec-head p{color:#9AA79F}
.sec--dark .eyebrow{color:#5BD6A0}
.sec--dark .card,.sec--dark .ind,.sec--dark .prob,.sec--dark .install div,.sec--dark .proof div{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12)}
.sec--dark .ind b,.sec--dark .prob b,.sec--dark .install b,.sec--dark .proof b,
.sec--dark .card b{color:#fff}
.sec--dark .ind span,.sec--dark .prob span,.sec--dark .install span,.sec--dark .proof span,
.sec--dark .card p{color:#AFBBB4}
.sec--dark .logos{border-top-color:rgba(255,255,255,.14)}

/* 3) 업종 비중 — 숫자 옆에 막대를 둔다 */
.ind i{display:flex; align-items:baseline; gap:8px}
.ind .bar{display:block; height:6px; margin-top:14px; border-radius:99px; background:rgba(31,111,235,.16)}
.ind .bar em{display:block; height:100%; border-radius:99px; background:var(--blue)}
.sec--dark .ind i{color:#5BD6A0}
.sec--dark .ind .bar{background:rgba(91,214,160,.2)}
.sec--dark .ind .bar em{background:#5BD6A0}

/* 4) 제품 누끼가 흰 배경에 뜨지 않게 뒤를 깐다 */
.model img{background:var(--soft); border-radius:10px; padding:10px}  /* 장식용 그라데이션 제거 — 단색 (2026-09-16) */
.hero-prod img{background:#fff; border-radius:16px}

/* 5) 비교표 — 헤더를 다크로, 대표 행에 색 바 */
thead th{background:#1B2430; color:#fff; font-size:13px; letter-spacing:.01em}
tbody tr.is-rec{background:#F1F7FF; position:relative}
tbody tr.is-rec td:first-child{box-shadow:inset 3px 0 0 var(--blue)}

/* 6) 미확정 표기 — 큰 박스 대신 각주 톤으로 */
.note-pending{margin-top:14px; padding:0; background:none; border:0;
  font-size:13px; color:var(--mute); line-height:1.6}
.note-pending:before{content:"※ "; color:#C08A2B}

/* 7) 섹션 사이 호흡 — 다크 구간은 조금 더 넉넉하게 */
.sec--dark{padding:104px 0}

@media (max-width:767px){
  .hero h1{font-size:30px}
  .hero__stats{grid-template-columns:1fr 1fr; gap:20px}
  .hero__stats div b{font-size:24px}
  .sec--dark{padding:64px 0}
}

/* 다크 구간에 들어간 후기 카드 */
.sec--dark .quote{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12)}
.sec--dark .quote p{color:#fff}
.sec--dark .quote footer{color:#9AA79F}
.sec--dark .quote i{background:#5BD6A0}

/* ═════ 페이지별 얼굴 — 같은 화면이 반복되지 않게 ═════ */

/* 상단 띠 변형 */
.subhead--blue{background:linear-gradient(120deg,#1F6FEB 0%,#1552BC 100%); border-bottom:0}
.subhead--blue .crumb,.subhead--blue .crumb a{color:rgba(255,255,255,.72)}
.subhead--blue h1{color:#fff}
.subhead--blue p{color:rgba(255,255,255,.86)}
.subhead--dark{background:var(--dark); border-bottom:0}
.subhead--dark .crumb,.subhead--dark .crumb a{color:#8A968E}
.subhead--dark h1{color:#fff}
.subhead--dark p{color:#AFBBB4}
.subhead--green{background:linear-gradient(120deg,#0A3F2C 0%,#0E7A54 100%); border-bottom:0}
.subhead--green .crumb,.subhead--green .crumb a{color:rgba(255,255,255,.72)}
.subhead--green h1{color:#fff}
.subhead--green p{color:rgba(255,255,255,.88)}
.subhead--photo{position:relative; border-bottom:0; background:#0D1114; overflow:hidden}
.subhead--photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.34}
.subhead--photo .wrap{position:relative}
.subhead--photo .crumb,.subhead--photo .crumb a{color:rgba(255,255,255,.7)}
.subhead--photo h1{color:#fff}
.subhead--photo p{color:rgba(255,255,255,.84)}
.subhead--plain{background:var(--soft)}

/* products — 배출량 구간 축 */
.scale{margin-top:30px; padding:26px 28px; background:#fff; border:1px solid var(--line); border-radius:var(--r)}
.scale__bar{position:relative; height:10px; border-radius:99px;
  background:linear-gradient(90deg,#DCE9FF 0%,#1F6FEB 100%)}
.scale__ticks{display:grid; grid-template-columns:repeat(7,1fr); margin-top:14px; gap:8px}
.scale__ticks div{text-align:center}
.scale__ticks b{display:block; font-size:14px; color:var(--ink)}
.scale__ticks span{display:block; font-size:12px; color:var(--mute); margin-top:2px}
.scale__ticks div.on b{color:var(--blue)}

/* industry — 업종 지그재그 */
.zig{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
.zig--flip .zig__txt{order:2}
.zig__img img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r)}
.zig__list{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; font-size:15px}
.zig__list li{display:flex; gap:10px}
.zig__list li b{flex:0 0 92px; color:var(--mute); font-weight:600}
.sec--dark .zig__list li b{color:#8A968E}

/* company — 흐름도 */
.flow{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:18px}
.flow__box{padding:26px 24px; background:#fff; border:1px solid var(--line); border-radius:var(--r)}
.flow__box b{display:block; font-size:17px; color:var(--ink)}
.flow__box span{display:block; margin-top:8px; font-size:15px}
.flow__arrow{font-size:22px; color:var(--blue)}

/* privacy — 좌측 목차 2단 */
.doc{display:grid; grid-template-columns:220px 1fr; gap:44px; align-items:start}
.doc__nav{position:sticky; top:98px; display:grid; gap:8px; font-size:15px}
.doc__nav a{padding:9px 12px; border-radius:8px; color:var(--body)}
.doc__nav a:hover{background:var(--soft); color:var(--blue)}
.doc__nav a.on{background:var(--tint); color:var(--blue-dk); font-weight:700}

@media (max-width:1024px){
  .flow{grid-template-columns:1fr}
  .flow__arrow{display:none}
  .zig,.doc{grid-template-columns:minmax(0,1fr)}
  .zig--flip .zig__txt{order:0}
  .doc__nav{position:static; grid-auto-flow:column; overflow-x:auto; min-width:0}
}
@media (max-width:767px){
  .scale__ticks{grid-template-columns:repeat(4,1fr); row-gap:12px}
}

/* ═════ 모바일 보정 — 위 '화면 톤' 블록의 .hero__in{1.12fr .88fr}(410행)이
   앞쪽 미디어쿼리(176행)를 덮어써서 모바일에서도 Hero 가 2열로 남는다.
   그 결과 375 에서 제품 이미지와 배지가 오른쪽으로 잘렸다. 파일 맨 끝에서 되돌린다 ═════ */
@media (max-width:1024px){
  .hero__in{grid-template-columns:1fr}
}
@media (max-width:767px){
  .hero__img{max-width:300px; margin-inline:auto}
  /* 배지를 이미지 위에 절대배치하면 좁은 화면에서 오른쪽이 잘린다 — 아래로 내린다 */
  .hero__badge{position:static; display:block; margin-top:14px; text-align:center}
}

/* 항목·값 표(.spec-table)는 모바일에서 가로 스크롤 대신 세로로 쌓는다.
   375 에서는 표 안 스크롤이 있어도 오른쪽이 잘린 것처럼 보여 대표·이메일 칸을 놓친다 */
@media (max-width:767px){
  .pgallery{grid-template-columns:repeat(2,1fr)}
  .spec-table{min-width:0}
  .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td{display:block; width:auto}
  .spec-table tr{border-bottom:1px solid var(--line); padding:10px 0}
  .spec-table tr:last-child{border-bottom:0}
  .spec-table th{background:none; border:0; padding:2px 16px; color:var(--mute); font-size:13px; font-weight:600}
  .spec-table td{border:0; padding:0 16px 8px; white-space:normal; font-size:15px}
}

/* ───────── 사업영역(business) — 사업부 블록 반복 ───────── */
.anchors{margin:0 0 30px}                      /* 사업부 간 이동 앵커 줄 */
.hero-prod + .hero-prod{margin-top:24px}       /* 사업부 블록이 이어질 때 간격 */
.hero-prod .hero__cta{margin-top:26px}
/* 자료가 아직 없는 이미지 자리 — 가짜 이미지를 넣지 않고 비어 있음을 그대로 보여준다 */
.holdbox{display:grid; place-content:center; text-align:center; min-height:132px;
  border:1px dashed #C5D3E6; border-radius:14px; background:#fff;
  color:var(--mute); font-size:15px; font-weight:700}
.holdbox span{display:block; margin-top:6px; font-size:13px; font-weight:600; color:#626C77}

/* ───────── L-04 계산기 — 구간·업종을 칩으로 고른다 ───────── */
.calc__label{margin:0 0 12px; font-size:15px; font-weight:700; color:var(--ink)}
.calc__in .calc__label + .chips + .calc__label{margin-top:24px}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{height:44px; padding:0 18px; border-radius:999px; background:#fff; cursor:pointer;
  border:1.5px solid var(--line); color:var(--body); font-size:15px; font-weight:700;
  font-family:inherit; transition:.15s}
.chip:hover{border-color:var(--blue); color:var(--blue)}
.chip.is-on{background:var(--tint); border-color:var(--blue); color:var(--blue)}
.chip:focus-visible{outline:3px solid rgba(31,111,235,.4); outline-offset:2px}
.calc__out > span{font-size:15px; color:var(--body)}
.calc__out strong{display:block; margin-top:6px; font-size:30px; color:var(--blue); letter-spacing:-.03em}
.calc__out > p{margin-top:10px; font-size:15px; color:var(--body)}
.calc__out .btn{width:100%}

/* 특징 카드 수에 맞춰 열을 바꾼다 */
.feat--6{grid-template-columns:repeat(3,1fr)}
.feat--5{grid-template-columns:repeat(5,1fr)}
.feat--5 .card{text-align:center; padding:18px 12px}
.feat + .feat, .hero-prod + .grid-2, .grid-2 + .feat, .grid-3 + .grid-2{margin-top:24px}
.grid--gap{margin-top:24px}
/* 인증·시험 자료 카드 */
.certs{margin-top:26px}
.certs .card{padding:16px; text-align:center}
.certs img{width:100%; border-radius:8px}
.certs b{display:block; margin-top:12px; font-size:15px; color:var(--ink)}

@media (max-width:1024px){
  .calc{grid-template-columns:1fr}
  .feat--5{grid-template-columns:repeat(3,1fr)}
  .feat--6{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  /* 특징 카드는 2열로 두면 폭이 160px 밖에 안 돼 여섯 줄로 쪼개진다 */
  .feat--5,.feat--6{grid-template-columns:1fr}
  .certs{grid-template-columns:1fr 1fr}
  .videos,.channels{grid-template-columns:1fr}
}

/* 다크 구간 카드 안의 h3 가 어두운 글자색을 그대로 물려받아 안 보였다 */
.sec--dark .card h3, .sec--dark .ind h3{color:#fff}
.grid-3 + .feat{margin-top:24px}

/* 계산기 - 안 쓰는 입력 줄을 감춘다 */
.calc__hide{display:none}

/* 키보드 사용자 — 탭을 누르면 본문 바로가기가 나타난다 */
.skip-link{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--blue); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; font-weight:700}
.skip-link:focus{left:0}

/* 키보드로 이동할 때 지금 어디에 있는지 보이게 한다 (마우스 클릭에는 안 나온다) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .chip:focus-visible{
  outline:3px solid var(--blue); outline-offset:2px; border-radius:4px}

/* 푸터 제목 — 태그는 h2 로 올리되(제목 계층) 크기는 그대로 둔다 */
.foot .foot__h{font-weight:700}

/* touch-safe — 모바일에서 손가락으로 누르는 영역을 44px 이상으로 잡는다 */
@media (max-width:1024px){
  .gnb nav a{display:inline-flex; align-items:center; min-height:44px}
}
@media (max-width:767px){
  .dock a{min-height:44px}
  .agree label{display:flex; align-items:flex-start; gap:8px; min-height:44px}
  .agree input[type=checkbox]{width:24px; height:24px; margin-top:10px; flex:0 0 auto}
}

/* 다크 구간 안의 밝은 카드는 글자색을 되돌린다 (밝은 배경 + 밝은 글자 방지) */
.sec--dark .step, .sec--dark .step p{color:var(--body)}
.sec--dark .step b{color:var(--ink)}

/* 다크 구간 안의 흰 카드 · 안내문도 글자색을 되돌린다 */
.sec--dark .channel, .sec--dark .channel em{color:var(--body)}
.sec--dark .note-pending{color:#B9C4BD}

/* 보류 배지는 어디에 놓여도 같은 색을 유지한다 (.model span 등 뒤 규칙에 덮이지 않게) */
.model .badge-hold, td .badge-hold, b .badge-hold{color:#5C4411}

/* ───────── 모바일 우선 손질 (2026-08-29) ─────────
   OPAL-B §7 — 첫 화면에서 가치제안 · 대표모델 TLT-90B · Primary CTA 가 보여야 한다.
   기존에는 사진이 CTA·수치 아래로 밀려 배지(TLT-90B)가 1,475px 지점에 있었다. */
@media (max-width:767px){
  /* mobile-hero : 순서를 제목 → 설명 → 사진 → 버튼 → 수치 로 바꾼다 */
  .hero{padding:28px 0 32px}
  .hero__in{display:flex; flex-direction:column; gap:14px}
  .hero__in > div:first-child{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2; font-size:28px}
  .hero__sub{order:3}
  .hero__img{order:4}
  .hero__cta{order:5; margin-top:0}
  .hero__stats{order:6; margin-top:4px}
  .hero__img img{width:100%; max-height:168px; object-fit:cover; border-radius:12px}
  /* 배지는 사진 위에 겹치지 않고 아래 한 줄로 */
  .hero__badge{position:static; margin-top:8px; display:block; text-align:center; font-size:14px; padding:8px 12px}
  .hero__stats{grid-template-columns:repeat(2,1fr); gap:14px}
  .hero__stats div b{font-size:22px}
  /* GNB 가 115px 이나 차지했다 — 줄인다 */
  .gnb__in{padding:8px 0; gap:8px 20px}
  .gnb nav{margin-top:2px; gap:18px}
  .gnb nav a{font-size:15px}
}

/* mobile-phead — 제품 상세는 모델명·사양이 먼저 보여야 한다.
   사진·갤러리가 위에 있으면 모델명이 1,300px 아래로 밀린다 */
@media (max-width:767px){
  .phead{display:flex; flex-direction:column; gap:20px}
  .phead > div:last-child{order:1}
  .phead > div:first-child{order:2}
  .phead h1{font-size:26px}
  .pgallery img{height:78px; object-fit:cover}
}

/* mobile-table — 8열 비교표가 940px 라 가로로 밀어야 했다.
   모바일에서는 표를 카드처럼 세로로 편다. 각 칸 앞에 항목 이름을 붙인다(data-label). */
@media (max-width:767px){
  .tablewrap table.mtable thead{display:none}
  .tablewrap table.mtable{min-width:0}
  .tablewrap table.mtable, .tablewrap table.mtable tbody,
  .tablewrap table.mtable tr, .tablewrap table.mtable td{display:block; width:100%}
  .tablewrap table.mtable tr{
    border:1px solid var(--line); border-radius:12px; padding:6px 14px; margin-bottom:12px; background:#fff}
  .tablewrap table.mtable td{
    display:flex; justify-content:space-between; gap:14px; align-items:baseline;
    border:0; border-bottom:1px dashed var(--line); padding:9px 0; text-align:right}
  .tablewrap table.mtable td:last-child{border-bottom:0}
  .tablewrap table.mtable td:before{
    content:attr(data-label); flex:0 0 auto; color:var(--mute); font-size:13px; font-weight:700; text-align:left}
  .tablewrap table.mtable td:first-child{
    font-weight:800; color:var(--ink); font-size:17px; text-align:left; display:block; padding-top:12px}
  .tablewrap table.mtable td:first-child:before{display:none}
}

/* 모바일 섹션 바로가기 — 긴 페이지에서만 쓴다. 데스크탑에서는 숨긴다 */
.jump{display:none}
@media (max-width:767px){
  .jump{display:block; position:sticky; top:103px; z-index:40;
    background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(6px)}
  .jump .wrap{display:flex; gap:8px; overflow-x:auto; padding:10px 0; min-width:0}
  .jump a{flex:0 0 auto; padding:8px 14px; border:1px solid var(--line); border-radius:999px;
    font-size:14px; font-weight:700; color:var(--ink); background:#fff; min-height:36px;
    display:inline-flex; align-items:center}
  .jump a:active{background:var(--tint); border-color:var(--blue)}
}

/* ───────── design-pass (2026-08-29) — 기획안 3장 원칙 적용 ─────────
   블루는 행동(버튼·링크), 그린은 숫자(절감·감량). 두 색을 같은 요소에 겹치지 않는다.
   밝은 구간과 어두운 구간을 교차한다. */

/* 히어로 수치 — 둘만 남기고 나머지는 아래 한 줄로 */
.hero__stats--2{grid-template-columns:repeat(2,auto); gap:40px}
.hero__meta{margin-top:18px; font-size:14px; color:var(--mute)}

/* 카드 번호 — 아이콘을 만들지 않고 순서만 보이게 한다 */
.card .num{
  display:block; margin-bottom:8px; font-size:12px; font-weight:800;
  color:var(--blue-dk); letter-spacing:.06em}

/* GNB 현재 위치 */
.gnb nav a.is-here{color:var(--blue-dk); position:relative}
.gnb nav a.is-here:after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--blue)}

/* 절감 구간을 어두운 띠로 — 밝은 구간만 이어지던 리듬을 끊는다 */
#save.sec--band{background:var(--dark); color:#C8D2CC}
#save.sec--band h2{color:#fff}
#save.sec--band .sec-head p{color:#AEB9B2}
#save.sec--band .card{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14)}
#save.sec--band .card h3{color:#fff}
#save.sec--band .card p{color:#C8D2CC}
#save.sec--band .note-pending{color:#AEB9B2}

@media (max-width:767px){
  .hero__stats--2{grid-template-columns:repeat(2,1fr); gap:16px}
  .hero__meta{margin-top:12px; font-size:13px}
  /* 제품 컷은 잘리면 안 된다 — 잘라내기(cover) 대신 맞춰넣기(contain) */
  .hero__img img{max-height:200px; object-fit:contain; background:#F4F7FB; padding:8px}
}

/* ───────── quality-pass (2026-08-29) ─────────
   1) 글자 위계를 벌린다  2) 카드에 깊이를 준다  3) 여백에 강약을 준다
   사진 원본이 600~700px 대라 전면 배경으로는 쓰지 않는다. */

/* 1) 타이포 — 제목과 본문 사이 단계가 없어 전부 비슷해 보였다 */
.hero h1{font-size:52px; line-height:1.22; letter-spacing:-.035em}
.hero__sub{font-size:19px; line-height:1.66; max-width:52ch}
.sec-head h2{font-size:34px; letter-spacing:-.03em}
.sec-head p{font-size:18px; max-width:60ch}
.final h2{font-size:38px; letter-spacing:-.03em}
.card h3{font-size:18px; letter-spacing:-.01em}

/* 2) 카드 — 테두리만 있어 납작했다. 옅은 그림자와 눌림 효과를 준다 */
.card, .step, .ind, .model, .channel{
  box-shadow:0 1px 2px rgba(26,31,38,.04), 0 8px 24px rgba(26,31,38,.05);
  transition:transform .16s ease, box-shadow .16s ease}
a.card:hover, a.model:hover, a.channel:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 6px rgba(26,31,38,.06), 0 16px 40px rgba(26,31,38,.10)}

/* 사진은 비율을 통일한다 — 지금은 원본 비율이 제각각이라 줄이 안 맞았다 */
.card > img, .ind > img, .case img, .grid-3 .card img{
  aspect-ratio:4/3; object-fit:cover; width:100%; height:auto; border-radius:10px;
  border:1px solid var(--line); background:var(--soft)}
/* case5.jpg 는 기기 3대가 나란히 찍힌 파노라마 원본(714×330)이라
   4:3 박스에 맞추면 양쪽 기기가 잘린다. 박스 비율을 원본 비율에 맞춰 3대 다 보이게 한다 */
.card > img[src$="case5.jpg"]{aspect-ratio:714/330}
/* 인증서 스캔본은 세로로 긴 원본이 많아서, 위 4:3 크롭을 쓰면 문서 위아래가 잘린다.
   증서는 잘리면 안 되는 원본이라 통비율 그대로 담는다 */
.certs .card > img{aspect-ratio:auto; object-fit:contain; height:auto}

/* 3) 여백 리듬 — 모든 섹션이 같은 높이라 스크롤이 단조로웠다 */
.sec{padding:88px 0}
.sec--soft{padding:96px 0}
.sec--dark, .sec--band{padding:104px 0}
.hero{padding:96px 0 84px}

/* 히어로 사진이 흰 바탕에 떠 있어 허전했다 — 옅은 판을 깔아준다 */
.hero__img{background:linear-gradient(180deg,#EEF3FA 0%,#F7FAFD 100%);
  border:1px solid #E2EAF3; border-radius:18px; padding:18px}
.hero__img img{border-radius:10px}
.hero__badge{left:18px; bottom:18px; box-shadow:0 6px 20px rgba(26,31,38,.10)}

/* 섹션 제목 위 얇은 강조선 — 색이 정보라는 원칙에 맞춰 파랑은 쓰지 않는다 */
.sec-head{position:relative}
.sec-head h2:before{
  content:""; display:block; width:34px; height:3px; background:var(--ink);
  border-radius:2px; margin-bottom:16px; opacity:.9}
.sec--dark .sec-head h2:before, .sec--band .sec-head h2:before{background:#fff; opacity:.7}
.final h2:before{display:none}

@media (max-width:1024px){
  .hero h1{font-size:42px}
  .sec-head h2{font-size:30px}
  .final h2{font-size:32px}
}
@media (max-width:767px){
  .hero h1{font-size:30px; line-height:1.28}
  .hero__sub{font-size:16px}
  .sec-head h2{font-size:26px}
  .final h2{font-size:26px}
  .sec{padding:56px 0}
  .sec--soft{padding:60px 0}
  .sec--dark, .sec--band{padding:64px 0}
  .hero{padding:24px 0 30px}
  .hero__img{padding:10px; border-radius:14px}
  .sec-head h2:before{width:28px; height:2px; margin-bottom:12px}
}

/* 마지막 줄에 한두 단어만 남는 것(고아 줄)을 브라우저가 알아서 막게 한다.
   지원 안 되는 브라우저에서는 그냥 무시된다 — 지금까지처럼 문구를 손대는 것보다 안전하다 */
h1, h2, h3, .hero__badge{text-wrap:balance}
p, li, figcaption{text-wrap:pretty}

/* ───────── theme-port (2026-08-29) ─────────
   별도 시안(alt-home)에서 통한 것만 본 사이트로 옮긴다.
   어두운 상단바 · 어두운 도입부 · 어두운 푸터 · 카드보다 선. 클래스 이름은 건드리지 않는다. */
:root{--navy:#0C1220; --navy-2:#151E2E}

/* 상단바 — 흰 바탕에서 어두운 바로 */
.gnb{background:rgba(12,18,32,.95); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.08)}
.gnb .logo{color:#fff}
.gnb nav{color:#C4CDD9}
.gnb nav a{color:#C4CDD9}
.gnb nav a:hover{color:#fff}
.gnb nav a.is-here{color:#fff}
.gnb nav a.is-here:after{background:#8FB6FF}
.gnb__tel{color:#93A0B1}
.gnb__tel span{color:#7C8797}

/* 사업영역 드롭다운 */
.has-sub{position:relative; display:inline-flex; align-items:center; gap:4px}
.subtoggle{all:unset; cursor:pointer; color:#8FB6FF; font-size:12px; padding:0 8px; line-height:1;
  display:inline-flex; align-items:center; min-height:44px}
.submenu{
  position:absolute; left:-14px; top:calc(100% + 10px); min-width:264px; display:none;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px;
  box-shadow:0 12px 40px rgba(12,18,32,.18); z-index:70}
.submenu a{display:block; padding:11px 12px; border-radius:8px; color:var(--ink); font-size:15px; font-weight:600}
.submenu a:hover{background:var(--soft); color:var(--blue-dk)}
.submenu a em{display:inline-block; margin-left:8px; font-style:normal; font-size:11px; font-weight:700;
  color:#7A5B1E; background:#F5E6C4; border-radius:999px; padding:2px 7px; vertical-align:1px}
.has-sub:hover .submenu, .has-sub:focus-within .submenu, .submenu.is-open{display:block}

/* 도입부 — 어두운 화면 하나에 메시지 하나 */
.hero{background:
    radial-gradient(1100px 460px at 78% 10%, rgba(15,98,254,.18), transparent 60%),
    linear-gradient(180deg,var(--navy) 0%, var(--navy-2) 100%);
  border-bottom:1px solid rgba(255,255,255,.08)}
.hero h1{color:#fff}
.hero__sub{color:#AEBACA}
.hero .eyebrow{color:#8FB6FF}
.hero__stats div b{color:#fff}
.hero__stats div span{color:#93A0B1}
.hero__stats{border-top:1px solid rgba(255,255,255,.12); padding-top:26px}
.hero__meta{color:#8B97A6}
.hero__img{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12)}
.hero__badge{background:#fff; border-color:transparent}
.hero .btn--ghost{border-color:rgba(255,255,255,.28); color:#fff; background:transparent}
.hero .btn--ghost:hover{background:rgba(255,255,255,.08)}

/* 안쪽 페이지 상단 띠도 같은 계열로 */
.subhead{background:linear-gradient(180deg,var(--navy) 0%, var(--navy-2) 100%); border-bottom:0}
.subhead h1{color:#fff}
.subhead p{color:#AEBACA}
.subhead .crumb{color:#93A0B1}
.subhead .crumb a{color:#C4CDD9}
.subhead--blue, .subhead--green{background:linear-gradient(180deg,var(--navy) 0%, var(--navy-2) 100%)}

/* 카드 — 그림자를 줄이고 선으로 정리 */
.card, .step, .ind, .model, .channel{box-shadow:none; border-color:var(--line)}
a.card:hover, a.model:hover, a.channel:hover{border-color:#C7D6EC; box-shadow:0 10px 30px rgba(12,18,32,.08)}

/* 푸터 — 더 어둡게 */
footer.site{background:#070B12}

@media (max-width:1024px){
  /* 좁은 화면에서는 눌러서 펴는 방식으로 */
  .submenu{position:static; display:none; min-width:0; box-shadow:none; margin:6px 0 2px}
  .has-sub{flex-wrap:wrap}
  .has-sub:hover .submenu{display:none}
  .submenu.is-open{display:block}
}

/* ───────── design-all (2026-08-29) — 카드 그리드를 줄 목록으로, 사진을 크게 ───────── */

/* 1) 가로줄 목록 : .rows 를 붙인 컨테이너는 카드 대신 선으로 나눈다 */
.rows{grid-template-columns:minmax(0,1fr); gap:0;
  border-top:1px solid var(--line); margin-top:36px}
.rows > *{
  border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; box-shadow:none;
  padding:26px 0; display:grid; grid-template-columns:220px minmax(0,1fr); gap:32px; align-items:start}
.rows > *:hover{transform:none; box-shadow:none}
.rows .eyebrow{grid-column:1; margin:0; align-self:start}
.rows h3, .rows b{grid-column:1; font-size:19px; color:var(--ink); margin:0}
.rows p, .rows span, .rows i{grid-column:2; margin:0; font-size:16px; color:var(--body); font-style:normal}
.rows .ind i{display:block; color:var(--mute); font-size:14px; margin-bottom:6px}
.rows > * > img{grid-column:1; grid-row:span 2; width:100%; border-radius:10px}
.sec--dark .rows{border-color:rgba(255,255,255,.12)}
.sec--dark .rows > *{border-color:rgba(255,255,255,.12)}
.sec--dark .rows h3, .sec--dark .rows b{color:#fff}
.sec--dark .rows p, .sec--dark .rows span{color:#C8D2CC}

/* 2) 설치 사례 — 사진 위에 설명을 얹는다 */
.case{position:relative; border:0; border-radius:14px; overflow:hidden; background:#0A0F18; box-shadow:none;
  aspect-ratio:4/3}
.case img{position:absolute; inset:0; height:100%}
.case img{width:100%; aspect-ratio:4/3; object-fit:cover; opacity:.94; border:0; border-radius:0}
.case > div{position:absolute; left:0; right:0; bottom:0; padding:16px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.8))}
.case b{color:#fff; font-size:16px; display:block}
.case span{color:#D6DEE8; font-size:13px; display:block; margin-top:2px}

/* 3) 비교표 — 대표 모델을 눈에 띄게, 줄을 짚기 쉽게 */
.tablewrap table thead th{position:sticky; top:0; background:#1B2430; color:#fff; z-index:2}
.tablewrap tbody tr:hover{background:#F7FAFF}
.tablewrap tbody tr.is-rec{background:var(--tint)}
.tablewrap tbody tr.is-rec td{font-weight:700; color:var(--ink)}
.tablewrap tbody tr.is-rec td:first-child{box-shadow:inset 3px 0 0 var(--blue)}

/* 4) 제품 상세 — 사양을 2열로, 가격을 크게 */
.spec{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px}
.spec li{display:flex; justify-content:space-between; gap:16px; padding:13px 0;
  border-bottom:1px solid var(--line)}
.spec li b{flex:0 0 auto; color:var(--mute); font-weight:700; font-size:14px}
.price{border:1px solid var(--line); border-radius:14px; padding:20px 22px; background:var(--soft)}
.price strong{font-size:30px; color:var(--ink); letter-spacing:-.03em}

/* 5) 견적 폼 — 단계 표시와 접기 */
.formstep{display:flex; gap:8px; align-items:center; font-size:14px; color:var(--mute); margin-bottom:18px}
.formstep b{color:var(--blue-dk); font-weight:800}
.formstep em{font-style:normal}
.formfold{margin-top:34px; border-top:1px solid var(--line); padding-top:22px}
.formfold > summary{cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:10px;
  font-size:20px; font-weight:700; color:var(--ink)}
.formfold > summary::-webkit-details-marker{display:none}
.formfold > summary:after{content:"접기"; margin-left:auto; font-size:14px; font-weight:600; color:var(--blue-dk)}
.formfold:not([open]) > summary:after{content:"펼치기"}
.formfold > summary em{font-style:normal; font-size:15px; font-weight:600; color:var(--mute)}
.formfold > summary + *{margin-top:18px}

/* 6) 푸터 4열 */
.foot{grid-template-columns:1.4fr 1fr 1fr 1fr}

@media (max-width:1024px){
  .rows > *{grid-template-columns:minmax(0,1fr); gap:8px}
  .rows h3, .rows b, .rows p, .rows span, .rows i{grid-column:1}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .rows{margin-top:26px}
  .rows > *{padding:20px 0}
  .spec{grid-template-columns:minmax(0,1fr)}
  .tablewrap table thead th{position:static}
  .foot{grid-template-columns:1fr}
}

/* 사례 목록 안의 상담 유도 카드 — 사진 카드와 달리 밝은 배경이라 글자색을 따로 준다 */
.case--cta{display:grid; place-content:center; text-align:center; padding:40px 24px;
  background:var(--tint); border:1px solid #CFE0FF; aspect-ratio:4/3}
.case--cta b{color:var(--blue-dk); font-size:17px}
.case--cta span{color:var(--body); margin-top:6px}

/* ───────── human-pass (2026-08-29) — 문답과 체크 목록 ───────── */
.qalist{margin-top:36px; border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa > summary{cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative;
  font-size:18px; font-weight:700; color:var(--ink)}
.qa > summary::-webkit-details-marker{display:none}
.qa > summary:after{content:"+"; position:absolute; right:6px; top:19px; font-size:22px; font-weight:400; color:var(--mute)}
.qa[open] > summary:after{content:"−"}
.qa > p{padding:0 44px 24px 0; font-size:16px; color:var(--body); max-width:72ch}

.tick{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px; font-size:15px}
.tick li{position:relative; padding-left:18px}
.tick li:before{content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%;
  background:var(--blue)}
.sec--dark .tick li:before, .sec--band .tick li:before{background:#8FB6FF}

/* gnb-slim — 태블릿에서 상단바가 129px 이나 됐다. 로고 줄과 메뉴 줄만 남기고 조인다 */
@media (max-width:1024px){
  .gnb__in{padding:8px 0; gap:6px 18px}
  .gnb nav{gap:20px; padding-bottom:2px}
  .gnb nav a{min-height:40px}
  .gnb__cta .btn{height:34px; min-height:44px; padding:0 14px}
}

/* ───────── card-air (2026-08-29) — 카드 안이 빽빽하다는 지적 반영 ─────────
   배지 → 제목 → 본문 → 버튼 사이가 붙어 있었다. 요소마다 숨 쉴 자리를 준다. */
.card{padding:32px}
.card > .tag{margin-bottom:16px}
.card > h3{margin-bottom:10px}
.card > h3 + p{margin-top:0}
.card > p + p{margin-top:14px}
.card > p:last-child:has(.btn){margin-top:22px}
.card .btn + .btn{margin-left:8px}
.card .badge-hold{margin-left:0; margin-top:12px}
.grid-2{gap:20px}
.grid-3{gap:18px}

/* 2사업부 카드가 내용이 적어 비어 보인다 — 최소 높이를 맞추고 배지를 아래에 붙인다 */
.grid-2 .card{min-height:100%}
.grid-2 .card > p:last-child{margin-top:auto}

@media (max-width:767px){
  .card{padding:24px}
  .grid-2, .grid-3{gap:14px}
  .card .btn + .btn{margin-left:0; margin-top:8px}
  .card > p:last-child:has(.btn) .btn{width:100%; justify-content:center}
}

/* ───────── audit-fix (2026-08-29) — 정적 분석 1~6 · 11~13 반영 ─────────
   빽빽함의 실제 원인은 셋이었다.
   ① 4열 카드 본문 폭이 216px 밖에 안 된다  ② 카드 사진과 제목이 0px 로 붙어 있다
   ③ 카드 제목(18)과 본문(17)의 차이가 1px 이라 위계가 없다 */

:root{--gap:24px; --gap-lg:40px}

/* 4) 그리드 간격을 한 값으로 — 지금은 14~24px 여섯 종류가 섞여 리듬이 끊겼다 */
.grid-2, .grid-3, .grid-4, .proof, .install, .videos, .channels, .feat, .downloads, .flow{gap:var(--gap)}
.zig, .phead, .doc{gap:var(--gap-lg)}

/* 1) 4열 카드가 제일 빽빽했다 — 좌우 여백을 줄여 글자 폭을 확보한다 */
.grid-4 .card{padding:24px 22px}
.grid-4 .card h3{font-size:18px}

/* 2) 카드 안 사진과 제목이 맞닿아 있었다 */
.card > img{margin-bottom:16px}

/* 3) 카드 제목과 본문의 위계 (34 / 20 / 16 계단) */
.card h3{font-size:20px}
.card p{font-size:16px}

/* 5) 목록 항목 간격이 줄간격보다 좁아 글자벽처럼 보였다 */
.tick, .zig__list, .done .next, .aside ul{gap:14px}
.foot ul{gap:12px}

/* 13) 제목 → 설명 간격이 2~10px 로 제각각이었다 */
.prob span, .feat .card p, .install div span, .flow__box span, .ind span{margin-top:12px}
.model span, .case span{margin-top:6px}

/* 12) 히어로 제목(52px) 아래가 20px 라 붙어 보였다 */
.hero__sub{margin-top:28px}
.sec > .wrap > .btn, .sec > .wrap > p > .btn{margin-top:24px}

/* 11) 표는 세로로 두껍고 가로로 좁았다 — 숫자 열이 눈으로 안 끊긴다 */
.tablewrap th, .tablewrap td{padding:13px 20px}

@media (max-width:767px){
  /* 6) 모바일에서 섹션 여백(56)과 머리말 여백(44)이 비슷해 경계가 안 보였다 */
  .sec-head{margin-bottom:28px}
  .grid-2, .grid-3, .grid-4, .proof, .install, .videos, .channels, .feat, .downloads, .flow{gap:20px}
  .hero__sub{margin-top:0}
  .card > img{margin-bottom:14px}
  .card h3{font-size:19px}
}

/* 각주 — 페이지마다 인라인으로 반복되던 것을 한 곳으로 모았다 */
.note{margin-top:16px; font-size:13px; color:var(--mute); line-height:1.6}
.sec--dark .note, .sec--band .note{color:#B9C4BD}
.done h1{font-size:28px}
@media (max-width:767px){ .done h1{font-size:22px} }

/* ───────── pad-token (2026-08-29) — 카드류 여백이 12종이라 여백선이 안 맞았다 ─────────
   작은 것 20 / 보통 24 / 큰 것 32 세 값으로 줄인다. */
:root{--pad-sm:20px; --pad:24px; --pad-lg:32px}
.model, .dl, .case > div{padding:var(--pad-sm)}
.prob, .ind, .feat div, .proof div, .install div, .flow__box, .channel, .step{padding:var(--pad)}
.form, .calc__in, .calc__out, .aside, .hero-prod{padding:var(--pad-lg)}
@media (max-width:767px){
  :root{--pad-sm:16px; --pad:20px; --pad-lg:24px}
}

/* 카드 제목 — 인라인으로 크기·색을 주던 것을 클래스로 */
.card__t{font-size:17px; color:var(--ink); margin-bottom:12px}
.card__t--on{color:#fff}

/* 위 간격 유틸리티 — 인라인 style 로 흩어져 있던 값을 모았다 (미디어쿼리로 조정 가능) */
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-14{margin-top:14px}.mt-16{margin-top:16px}
.mt-18{margin-top:18px}.mt-20{margin-top:20px}.mt-22{margin-top:22px}.mt-24{margin-top:24px}
.mt-26{margin-top:26px}

/* 반복되던 인라인 style 을 클래스로 (미디어쿼리로 조정할 수 있게) */
.tx-ink{color:var(--ink)}
.tx-blue{color:var(--blue-dk)}
.fs-14{font-size:14px}.fs-15{font-size:15px}.fs-20{font-size:20px}
.mt-56{margin-top:56px}
.center{justify-content:center}
.in-num{width:120px; text-align:right}
@media (max-width:767px){ .mt-56{margin-top:36px} }

/* gnb-align — ▾ 버튼(44px) 이 메뉴 줄 높이를 늘리면서, 늘어난 칸 안에서 다른 링크 글자가 위로 붙었다.
   결과적으로 사업영역만 아래로 내려간 것처럼 보였다. 모든 항목을 세로 가운데로 맞춘다. */
.gnb nav{align-items:center}
.gnb nav > a, .gnb .has-sub{display:inline-flex; align-items:center; min-height:44px}
.gnb .has-sub > a{display:inline-flex; align-items:center}
.subtoggle{min-height:44px; align-self:center}

/* ───────── card-ref (2026-08-29) — 레퍼런스 화면 톤 반영 ─────────
   번호를 알약 배지로 세우고, 본문 줄간격을 넓혀 읽기 편하게 한다. */
.card{border-radius:16px}
.card .num{
  display:inline-block; margin-bottom:14px; padding:6px 12px; border-radius:999px;
  background:var(--tint); color:var(--blue-dk); font-size:12px; font-weight:800; letter-spacing:.04em}
.sec--dark .card .num, .sec--band .card .num{background:rgba(143,182,255,.16); color:#8FB6FF}
.card h3{margin-bottom:12px}
.card p{line-height:1.75; color:var(--body)}
.rows p, .rows span{line-height:1.75}
.prob span, .ind span, .feat .card p, .step p{line-height:1.75}
@media (max-width:767px){
  .card{border-radius:14px}
  .card .num{margin-bottom:12px}
}

/* 연혁처럼 순서가 있는 목록 — .spec 을 1열로 */
.spec--1col{grid-template-columns:1fr}
.spec--1col li b{min-width:70px}

/* 폼 안의 기계 걸러내는 칸 — 사람 눈에는 보이지 않는다 (스팸 차단) */
.form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
/* 접수 진행·실패 안내 */
.form .formsend{margin-top:10px; font-size:15px}

/* 관리자에서 등록한 콘텐츠가 서버를 통해 채워지는 자리 (사례 · 후기) */
.cmslist:empty{display:none}
.cmslist{display:grid; gap:18px; width:min(1180px,calc(100% - 48px)); margin:0 auto}
.cmsitem{background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; word-break:keep-all}
.cmsitem h3{font-size:19px; letter-spacing:-.02em}
.cmsitem__meta{margin:6px 0 10px; font-size:14px; color:var(--mute)}
.cmsreviews{display:grid; gap:14px}
.cmsquote{background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; margin:0; word-break:keep-all}
.cmsquote blockquote{margin:0; font-size:16px; line-height:1.7}
.cmsquote figcaption{margin-top:10px; font-size:14px; color:var(--mute)}

/* 사진이 아직 없는 제품 카드 — 사진을 받으면 일반 카드로 바꾼다 */
.model--nophoto{display:grid; align-content:start; min-height:180px; background:var(--soft);
  border:1px dashed var(--line)}
.model--nophoto::before{content:"사진 준비 중"; display:grid; place-items:center;
  height:180px; font-size:13px; color:var(--mute); margin-bottom:12px}

/* 절감계산기 기준 안내 — 결과가 어떤 가정 위에 서 있는지 화면에 그대로 적는다 */
.calc__basis{margin:14px 0 6px; padding-left:18px; font-size:14px; color:var(--mute)}
.calc__basis li{margin:3px 0}

/* 제품 상세의 상담 종류 버튼 3개 — 좁은 화면에서 줄바꿈된다 */
.ctaset{display:flex; flex-wrap:wrap; gap:10px}
.ctaset .btn{flex:0 1 auto}
/* 관리자에서 판매채널 주소를 넣으면 채워지는 자리 */
.channels--cms:empty{display:none}

/* ───────── 모바일 줄바꿈 보정 (2026-09-07) ───────── */
/* 한 덩어리로 유지할 조각. 구분점이 줄 첫 글자로 떨어지는 것을 막는다 */
span.nb{display:inline; white-space:nowrap}   /* .case span 등 후손 span 을 블록으로 만드는 규칙에 지지 않게 한다 */
/* 동의 라벨의 문구와 (필수) 뱃지는 한 덩어리다. flex 항목으로 쪼개지면 뱃지만 줄 끝에 남는다 */
.agree__t{flex:1 1 auto; min-width:0}
/* 폼 단계 표시 — 구분점이 별개 flex 항목이 되지 않게 인라인 흐름으로 둔다 */
.formstep{display:block}
/* 모바일에서는 구분점을 숨기고 단계를 줄로 나눈다. 줄 끝에 매달린 점이 남지 않게 한다 */
@media (max-width:767px){
  .formstep__sep{display:none}
  .formstep .nb{display:block}
}
/* 방침 목차가 모바일에서 가로 스크롤이라 6~8번이 화면 밖으로 나갔다. 두 줄로 접는다 */
@media (max-width:767px){
  .doc__nav{grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible}
  .doc__nav a{padding:9px 10px; font-size:14px}
}
/* 목록 뒤 마무리 문장이 불릿 글자보다 왼쪽으로 튀어나와 보였다. 글줄을 맞춘다 */
.tick + p{padding-left:18px}
.req{white-space:nowrap}
/* 폼 단계 표시가 flex 라 조각이 제각각 떨어졌다. 줄바꿈을 허용하되 덩어리는 유지 */
.formstep{flex-wrap:wrap; row-gap:4px}
/* 가로 스크롤 칩 줄 — 마지막 칩이 화면 끝에서 잘려 보였다 */
.jump .wrap{scroll-padding-right:16px}
.jump .wrap::after{content:""; flex:0 0 8px}

/* ───────── 정렬 보정 (2026-09-07 검수) ───────── */
/* 업종별 2단 배치가 세로 가운데 정렬이라 왼쪽 글 위에 큰 빈 공간이 생겼다 */
.zig{align-items:start}
/* 라벨 + 값 줄이 flex 라 값 칸이 줄어들지 못해 375 에서 가로로 넘쳤다.
   grid 로 바꿔 값 칸에 minmax(0,1fr) 을 주면 안에서 줄바꿈된다 */
.zig__list li{display:grid; grid-template-columns:92px minmax(0,1fr)}
/* 값은 한 칸이다. 안에 span 이 있어도 쪼개지지 않게 감싼 .v 만 칸으로 잡는다 */
.zig__list li .v, .spec li .v{min-width:0}
.spec li{align-items:baseline}
@media (max-width:767px){
  .zig__list li{grid-template-columns:minmax(0,1fr); gap:2px}
}
/* 8개 모델 그리드 — 제품 사진 비율이 달라 모델명 줄이 카드마다 어긋났다. 사진 칸 높이를 맞춘다 */
.model img{height:180px; object-fit:contain}
@media (max-width:767px){ .model img{height:150px} }

/* ───────── 마감 보정 (2026-09-07 최종 검수) ───────── */
/* 2단 배치에서 짧은 쪽 카드가 긴 쪽 높이에 맞춰 늘어나 아래가 통째로 비었다 */
.grid-2{align-items:start}
/* 라벨 열(번호 배지 · 소제목)과 값 열이 서로 다른 행이라 32px 행간이 그대로 벌어졌다 */
.rows > *{column-gap:32px; row-gap:6px}
/* 자리표시자가 짧아 카드 아래가 비어 보였다. 카드 높이를 맞추는 규칙과 부딪히지 않게 박스를 채운다 */
.grid-2 .card .holdbox{min-height:200px}
/* 라벨 열(번호 배지 · 소제목)과 값 열이 서로 다른 행에 놓여 사이가 크게 벌어졌다 */
.rows .eyebrow + h3, .rows .eyebrow + b{margin-top:4px}
.rows .ind i{margin-bottom:2px}
/* 가로 스크롤 칩 줄 — 마지막 칩이 화면 끝에 잘려 보였다 */
.jump .wrap{padding-right:20px}
/* 사진 위 캡션·빵부스러기가 밝은 사진에서 안 읽혔다. 오버레이를 진하게 */
.case > div{background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.88))}
/* 표 값이 오른쪽 테두리에 닿았다 */
.spec-table td{padding-right:20px}
/* 영상 썸네일 비율이 제각각이라 아래에 검은 띠가 남았다 */
.video img{aspect-ratio:16/9; object-fit:cover}
@media (max-width:767px){
  /* 제목 옆 보조문구가 한 줄에 끼어 제목이 두 줄로 눌렸다. 아래로 내린다 */
  .formfold > summary{display:block}
  .formfold > summary em{display:block; margin-top:4px}
}

/* ───────── Hero 캡션 정리 (2026-09-08) ─────────
   문제 1 — 모바일은 picture 가 tlt90.jpg(90B 한 대)를 쓰는데
            캡션은 "전 8개 모델" 이라 사진과 어긋났다.
   문제 2 — 캡션이 "· 전 / 8개 모델" 로 갈라졌다.
   문제 3 — PC 에서 캡션 흰 박스가 제품 사진 위에 겹쳐 앉았다. */

/* 보이는 사진에 맞는 문구만 남긴다 */
.cap-pc{display:inline}
.cap-mo{display:none}
@media (max-width:767px){
  .cap-pc{display:none}
  .cap-mo{display:inline}
}

/* 한국어는 낱말 단위로 끊는다. 숫자·모델명이 줄 끝에서 갈라지지 않게 한다 */
.hero__badge{word-break:keep-all}

/* 캡션이 절대배치라 제품 사진 위에 올라탔다.
   판을 키우면(padding-bottom·margin-bottom) 캡션이 첫 화면 밖으로 밀려난다 —
   OPAL-B 7항이 "첫 화면에서 대표모델이 보여야 한다" 고 정해서 그렇게 하면 안 된다.
   대신 사진 왼쪽 위 빈 자리로 옮긴다. 제품이 없는 영역이라 가리지 않는다. */
@media (min-width:768px){
  .hero__badge{top:18px; bottom:auto}
}

/* 메인 제품 사진은 원본 비율 그대로 보여준다. 확대·크롭·겹침 효과를 쓰지 않는다. */
.hero__img{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
}
.hero__img img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  padding:0;
  background:#fff;
  border-radius:12px;
}
.hero__badge{
  position:static;
  margin-top:12px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:#AEBACA;
  text-align:center;
  font-size:13px;
}
@media (max-width:1024px){
  .hero__img{width:min(100%,620px); margin-inline:auto}
}


/* ═════ 2026-09-11 피그마 시안 반영 — 연출컷 풀페이지 히어로 + 고객사 로고 월 ═════
   홈(index) 전용. .hero--photo 가 붙은 히어로에만 적용되고 다른 페이지 히어로는 그대로다 */
.hero--photo{
  background:#E7ECDF url('../img/hero-banner.jpg') center right/cover no-repeat;
  border-bottom:0}
.hero--photo .hero__in{grid-template-columns:1fr}          /* 기기 사진은 배경에 있으므로 한 단 */
.hero--photo > .hero__in > div, .hero--photo .hero__in > div{max-width:640px}
.hero--photo h1{color:#121710}                              /* 시안 실측색 */
.hero--photo .hero__accent{font-style:normal; color:#2B0013}
.hero--photo .hero__sub{color:#3E463C}
.hero--photo .hero__meta{color:#6E7767}
.hero--photo .btn--primary{background:#00734C; border-color:#00734C}
.hero--photo .btn--primary:hover{background:#005C3D; border-color:#005C3D}
.hero--photo .btn--ghost{background:#fff; color:var(--ink); border-color:#D7DDCF}
.hero--photo .btn--ghost:hover{border-color:#00734C; color:#00734C; background:#fff}

/* 고객사 로고 월 — 시안 그대로 한 장 이미지 */
.clients{padding:36px 0 30px; background:#fff; border-bottom:1px solid var(--line)}
.clients img{display:block; width:100%; height:auto}

@media (max-width:767px){
  /* 모바일 — 기기가 사진 오른쪽에 있으므로 오른쪽을 잡아 첫 화면에 보이게 한다 (OPAL-B 7항) */
  .hero--photo{background-position:72% center}
  .hero--photo h1{font-size:28px}
  .clients{padding:24px 0 20px}
}

.logo .logo-type{height:34px; width:auto}
@media (max-width:767px){ .logo .logo-type{height:26px} }

/* 다크 GNB 위에서 네이비 워드마크가 안 보인다 — 흰색으로 반전 (로고 원본은 그대로 둔다) */
.gnb .logo-type{filter:brightness(0) invert(1)}

/* 모바일 히어로 — 배경사진 위에 글자가 겹쳐 읽기 어렵다.
   375 에서는 민트 단색 배경 + 텍스트 아래 전용 연출컷(hero__mo)으로 분리한다 */
.hero__mo{display:none}
@media (max-width:767px){
  .hero--photo{background-image:none}
  .hero--photo .hero__mo{display:block; order:4; width:100%; height:auto; border-radius:12px}
  .hero--photo .hero__meta{order:7; margin-top:10px}
}

/* 영상 후기 슬라이드 — 가로 스크롤 + 스냅. 클릭 전에는 포스터만 (preload=none) */
.vslider-h{margin:34px 0 14px; font-size:20px}
.vslider{display:grid; grid-auto-flow:column; grid-auto-columns:236px; gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 14px;
  -webkit-overflow-scrolling:touch}
.vslider .vcard{margin:0; scroll-snap-align:start}
.vslider video{display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover;
  border-radius:14px; background:#000; border:1px solid var(--line)}
.vslider figcaption{margin-top:8px; font-size:14px; line-height:1.45; color:var(--mute); word-break:keep-all}
@media (max-width:767px){
  .vslider{grid-auto-columns:200px; gap:12px}
}


.gnb{background:rgba(255,255,255,.94); border-bottom:1px solid var(--line)}
.gnb .logo{color:var(--ink)}
.gnb nav a{color:var(--ink)}
.gnb nav a:hover{color:var(--green-tx)}
/* 다크 GNB 시절 .is-here{color:#fff} 가 특이도로 살아남아 흰 배경에서 글자가 사라졌다 */
.gnb nav a.is-here{color:var(--blue-dk)}
.gnb .logo-type{filter:none}
.gnb__tel{color:var(--ink)}

/* 랜딩 v2 히어로 — 연출컷(민트 자연광) 배경 위 좌측 텍스트 */
.lp2-hero{background:#E7ECDF url('../img/hero-eco.jpg') center right/cover no-repeat; padding:86px 0 72px}
.lp2-hero .hero__in{grid-template-columns:1fr}
.lp2-hero .hero__in > div{max-width:620px}
.lp2-hero h1{color:#121710}
.lp2-hero .hero__sub{color:#3E463C; font-weight:600}
.lp2-hero .btn--primary{background:#00734C}
.lp2-hero .btn--primary:hover{background:#005C3D}
/* 다크 테마의 흰 글자가 남아 흰 버튼이 빈 박스가 됐다 — 글자색을 되돌린다 */
.lp2-hero .btn--ghost{background:#fff; border-color:#D7DDCF; color:var(--ink)}
.lp2-hero .btn--ghost:hover{border-color:#00734C; color:#00734C; background:#fff}
.lp2-brand{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:800; color:#121710; letter-spacing:.02em}
.lp2-brand img{height:30px; width:auto}
.lp2-meta{margin-top:18px; font-size:13.5px; color:#6E7767}
.lp2-chips{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap}
.lp2-chip{background:#fff; border:1px solid #D7DDCF; border-radius:12px; padding:12px 16px; text-align:center; box-shadow:var(--shadow)}
.lp2-chip b{display:block; font-size:20px; font-weight:800; color:#00734C; letter-spacing:-.02em}
.lp2-chip span{display:block; margin-top:2px; font-size:12.5px; color:var(--mute)}

/* 검증 카피 밴드 — 히어로 직하단 */
.lp2-intro{padding:46px 0 40px; text-align:center; border-bottom:1px solid var(--line)}
.lp2-intro p{margin:0; font-size:19px; font-weight:700; color:var(--ink); word-break:keep-all}
.lp2-intro p b{color:var(--green-tx)}
.lp2-intro .sub{margin-top:8px; font-size:16px; font-weight:600}
.lp2-intro .cnt{margin-top:10px; font-size:14.5px; color:var(--mute); font-weight:500}

.lp2-logos{overflow:hidden; display:grid; gap:14px; margin-top:26px}
.lp2-lrow{display:flex; width:max-content; animation:lp2-slide 46s linear infinite}
.lp2-lrow--rev{animation-duration:52s; animation-direction:reverse}
@keyframes lp2-slide{to{transform:translateX(-50%)}}
/* clients.jpg 셀 안에 원본 테두리가 이미 있다 — 우리 테두리를 빼서 이중선을 막는다 */
.lgo{flex:0 0 auto; width:186px; height:62px; margin-right:14px; border-radius:8px; overflow:hidden;
  background-color:#fff; background-image:url('../img/clients.jpg'); background-repeat:no-repeat; background-size:500% 600%}
.lgx0{background-position-x:0}.lgx1{background-position-x:25%}.lgx2{background-position-x:50%}.lgx3{background-position-x:75%}.lgx4{background-position-x:100%}
.lgy0{background-position-y:0}.lgy1{background-position-y:20%}.lgy2{background-position-y:40%}
.lgy3{background-position-y:60%}.lgy4{background-position-y:80%}.lgy5{background-position-y:100%}

.lp2-rvs{overflow:hidden; display:grid; gap:16px}
.lp2-rrow{display:flex; width:max-content; animation:lp2-slide 60s linear infinite}
.lp2-rrow--rev{animation-duration:68s; animation-direction:reverse}
.rvw{flex:0 0 auto; width:360px; margin-right:16px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:22px; box-shadow:var(--shadow); word-break:keep-all}
.rvw q{display:block; font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.6}
.rvw .who{display:block; margin-top:12px; font-size:13.5px; color:var(--mute)}
.rvw .hold{display:inline-block; margin-top:10px; font-size:12px; font-weight:700; color:var(--blue);
  background:var(--tint); border-radius:6px; padding:4px 8px}
/* 움직임 최소화 설정이면 슬라이드를 멈추고 그리드로 편다 */
@media (prefers-reduced-motion:reduce){ .lp2-lrow,.lp2-rrow{animation:none; flex-wrap:wrap; width:auto} }

/* 뉴스 클리핑(문제설정) — 기사 원문 캡처 수급 전, 텍스트로 재현 */
.lp2-news{display:grid; gap:16px; max-width:760px; margin-inline:auto}
.nws{background:#fff; border:2px solid var(--ink); padding:22px 26px; text-align:center}
.nws b{display:block; font-size:23px; color:var(--ink); letter-spacing:-.02em; word-break:keep-all}
.nws b .rd{color:#C81E1E; text-decoration:underline; text-underline-offset:4px}
.nws span{display:block; margin-top:6px; font-size:14.5px; color:var(--mute)}

/* 절감 결과 밴드 (피그마 L-05) */
.lp2-save{text-align:center}
.lp2-save .banner{max-width:700px; margin-inline:auto; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:34px 26px; box-shadow:var(--shadow)}
.lp2-save .banner b{display:block; font-size:32px; color:var(--ink); letter-spacing:-.02em; word-break:keep-all}
.lp2-save .banner b em{font-style:normal; color:#fff; background:#2447E0; padding:2px 12px; border-radius:6px; display:inline-block; margin-top:8px}
.lp2-save .banner span{display:block; margin-top:12px; font-size:14px; color:var(--mute)}
.lp2-stats{list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border:1px solid var(--line); border-radius:var(--r)}
.lp2-stats li{padding:26px 18px; border-left:1px solid var(--line)}
.lp2-stats li:first-child{border-left:0}
.lp2-stats b{display:block; font-size:26px; font-weight:800; color:var(--green-tx); letter-spacing:-.03em}
.lp2-stats li.warn b{color:#C81E1E}
.lp2-stats span{display:block; margin-top:4px; font-size:13.5px; color:var(--mute)}
.lp2-save .closing{margin-top:30px; font-size:20px; font-weight:800; color:var(--ink); word-break:keep-all}

/* 다크 섹션 안 제품 카드 */
.sec--dark .hero-prod{background:#fff; color:var(--body)}  /* 면을 칠했으니 글자색도 여기서 정한다 — 안 정하면 흰 카드에 다크섹션 밝은 글씨가 남아 대비 1.55 (2026-09-16) */
.sec--dark .model{border:0}

/* 제조사 A/S 직통 번호 */
.lp2-tel{font-size:24px; font-weight:800; margin:8px 0}
.lp2-tel a{color:var(--ink)}

/* 상담 신청 — 파란 배경 (피그마 L-10 구매폼) */
.sec--blue{background:var(--blue)}
.sec--blue .sec-head h2{color:#fff}
.sec--blue .sec-head p{color:#D7E5FF}
.sec--blue .note,.sec--blue .note-pending{color:#C9DBFF}

@media (max-width:767px){
  /* 배경사진 위 글자 대비가 1.67까지 떨어진다 — index 와 같이 375 는 민트 단색으로 분리 */
  .lp2-hero{padding:48px 0 44px; background-image:none}
  /* .hero__in > div 가 display:contents 라 새 요소들이 order:0 으로 H1 위로 올라갔다.
     브랜드 표기만 맨 위(1), 모델 각주·칩은 CTA(5) 뒤로 보낸다 */
  .lp2-brand{order:1}
  .lp2-meta,.lp2-chips{order:6}
  .lp2-chip{flex:1 1 40%}
  .lp2-intro p{font-size:16.5px}
  .lp2-intro .sub{font-size:14.5px}
  .lp2-stats{grid-template-columns:repeat(2,1fr)}
  .lp2-stats li{border-left:0; border-top:1px solid var(--line)}
  .lp2-stats li:nth-child(-n+2){border-top:0}
  .lp2-stats b{font-size:21px}
  .rvw{width:300px}
  .nws b{font-size:18px}
  .lp2-save .banner b{font-size:24px}
  .lp2-brand img{height:24px}
}

/* ───────── 영상 카드 — 피그마 v2 (node 2098-3099) 맞춤 (2026-09-14) ─────────
   시안: 캡션이 사진 위 그라데이션이 아니라 사진 아래 검은 띠.
   썸네일은 어둡게 깔지 않고 원본 밝기 그대로. 비율은 정방형에 가깝게.
   landing.html #video 에서만 쓰므로 #video 로 범위를 가둔다 */
#video .video{display:flex; flex-direction:column; background:#F4F4F4}
/* height 속성값(350·463·330)이 aspect-ratio 를 무시하게 만들어 카드 높이가 제각각이었다 */
#video .video img{aspect-ratio:1/1; opacity:1; height:auto}
#video .video i{top:44%}
#video .video b{position:static; background:#111; padding:16px 18px;
  background-image:none}

.lp2-photos{overflow:hidden}
.lp2-prow{display:flex; width:max-content; animation:lp2-slide 55s linear infinite}
.pht{flex:0 0 auto; width:360px; height:270px; object-fit:cover; margin-right:16px;
  border-radius:var(--r); border:1px solid var(--line); background:#fff}
@media (prefers-reduced-motion:reduce){ .lp2-prow{animation:none; flex-wrap:wrap; width:auto} }
@media (max-width:767px){ .pht{width:280px; height:210px} }

.lp2-intro p{font-size:24px}
.lp2-intro .sub{font-size:18px}
.lp2-intro .cnt{font-size:16px}
.lp2-save .banner b{font-size:40px}
.lp2-stats b{font-size:34px}
@media (max-width:767px){
  .lp2-intro p{font-size:19px}
  .lp2-intro .sub{font-size:15.5px}
  .lp2-save .banner b{font-size:27px}
  .lp2-stats b{font-size:24px}
}

.lp2-hero{background:#AEBE8C url('../img/hero-green.jpg') center right/cover no-repeat}

/* ① GNB 상담신청 버튼 + 상담폼 배경: 파랑 → 브랜드 초록 (피그마 L-10 배경 #66A357) */
.gnb__cta .btn--primary{background:#66A357; border-color:#66A357}
.gnb__cta .btn--primary:hover{background:#578C4A}
#form.sec--blue{background:#66A357}

/* ② 절감밴드 마무리 문구 — 피그마 텍스트 노드 30px Bold */
.lp2-save .closing{font-size:30px; line-height:1.35}
@media (max-width:767px){ .lp2-save .closing{font-size:21px} }

/* ③ 업종별 설치 사례 — 카드 6칸 + 게재 라벨 (피그마 L-08 편집) */
.lp2-caselist .card b{display:block; font-size:18px; color:var(--ink)}
.lp2-caselist .card em{display:inline-block; margin-top:8px; font-style:normal; font-size:13px; font-weight:700;
  color:var(--green-tx)}
.lp2-caselist .card span{display:block; margin-top:10px; font-size:15px; color:var(--body); word-break:keep-all}

.sec{padding:160px 0}  /* 제로스톤 실측 160px 에 맞춤 (2026-09-15) */
.sec-head{margin-bottom:56px}
.sec-head h2{font-size:42px; line-height:1.3}
.sec-head p{font-size:19px; margin-top:16px}
body{font-size:17px}
.lp2-hero{padding:120px 0 110px}
.lp2-intro{padding:72px 0 64px}
.faq summary{font-size:18px}
.faq .a{font-size:17px}
.rvw q{font-size:16.5px}
@media (max-width:767px){
  .sec{padding:76px 0}
  .sec-head{margin-bottom:34px}
  .sec-head h2{font-size:29px}
  .sec-head p{font-size:16px}
  .lp2-hero{padding:72px 0 64px}
}

/* 도입 매장 로고 — 제조사 제공 원본 24사 (2026-09-15). 스프라이트(.lgo)를 대체한다 */
.lgo2{flex:0 0 auto; height:64px; width:auto; margin-right:14px; border-radius:8px;
  border:1px solid var(--line); background:#fff}
@media (max-width:767px){ .lgo2{height:48px} }

/* 모바일 히어로 — cover 크롭이 오른쪽 나뭇잎만 남기고 기기를 잘랐다. 기기(원본 가운데)가 보이게 위치 보정 */
@media (max-width:767px){
  .lp2-hero{background-position:56% center}
}

/* ═════ 2026-09-15 히어로 제목 앞 브랜드 로고칸 — 피그마 네모칸의 의도(로고 3개 순차 교체) 실장 ═════ */
.hero-h1row{display:flex; align-items:flex-start; gap:18px}
.hero-h1row h1{margin-top:0}
/* 흰 카드 안에서 로고 3장이 겹쳐 있다가 9초 주기로 하나씩 페이드 교체된다 */
.hero-logobox{position:relative; flex:0 0 auto; width:64px; height:64px; margin-top:6px;
  background:#fff; border:1px solid #E3E8E0; border-radius:14px; box-shadow:0 2px 8px rgba(18,23,16,.08); overflow:hidden}
.hero-logobox img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:9px;
  opacity:0; animation:hero-logo-cycle 9s infinite}
.hero-logobox img:first-child{animation-delay:-.45s}
.hero-logobox img:nth-child(2){animation-delay:3s}
.hero-logobox img:nth-child(3){animation-delay:6s}
@keyframes hero-logo-cycle{
  0%{opacity:0} 5%{opacity:1} 30%{opacity:1} 38%{opacity:0} 100%{opacity:0}
}
/* 모션 최소화 설정이면 교체 없이 첫 로고 고정 */
@media (prefers-reduced-motion:reduce){
  .hero-logobox img{animation:none}
  .hero-logobox img:first-child{opacity:1}
}
@media (max-width:767px){
  /* .hero__in > div 가 display:contents 라 래퍼가 직접 order 를 받아야 h1 자리(2)에 남는다 */
  .lp2-hero .hero-h1row{order:2; gap:12px}
  .hero-logobox{width:44px; height:44px; margin-top:2px; border-radius:10px}
  .hero-logobox img{padding:6px}
}


/* ═════ 2026-09-15 섹션 알약 배지(eyebrow) — 제로스톤의 "라벨 + 큰 제목" 구조 도입 ═════ */
/* .sec-head p 규칙(색·크기)보다 세게 — p.sec-eyebrow 로 특이도 올림 */
.sec-head p.sec-eyebrow{display:inline-block; padding:7px 16px; margin:0 0 16px; border-radius:999px;
  background:#E8F3E4; color:#00734C; font-size:14px; font-weight:700; letter-spacing:-.01em}
/* 다크 섹션(업종별 선택 기준)과 초록 상담폼 섹션은 배경 대비로 뒤집는다 */
#products .sec-head p.sec-eyebrow{background:rgba(255,255,255,.13); color:#CDE8C2}
#form .sec-head p.sec-eyebrow{background:rgba(255,255,255,.18); color:#fff}

@media (min-width:768px){
  .lp2-chips{gap:16px}
  .lp2-chip{flex:1 1 0; min-width:0; height:104px; padding:12px 8px;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    text-align:center; border-radius:18px}
}

@media (min-width:768px){
  .grid-2,.grid-3{gap:32px}
  .grid-4,.proof,.videos,.channels,.certs{gap:28px}
  /* 후기·설치사진 슬라이드 카드 간격 16→24 */
  .rvw{margin-right:24px}
  .pht{margin-right:24px}
}

/* ═════ 2026-09-15 "슬라이드 느리다" — 마퀴 주기 약 1/3 단축 (로고 46/52 → 30/35, 후기 60/68 → 40/46, 설치사진 55 → 36) ═════ */
.lp2-lrow{animation-duration:30s}
.lp2-lrow--rev{animation-duration:35s}
.lp2-rrow{animation-duration:40s}
.lp2-rrow--rev{animation-duration:46s}
.lp2-prow{animation-duration:36s}

.hero-logobox{width:124px; height:58px; border-radius:8px}  
.hero-logobox img{padding:8px 12px}
/* ② 제목 정렬: 시안은 두 줄("…자동화 하셨습니다."까지 한 줄) — 넓은 화면에서 컬럼 넓히고 글자 비례 축소 */
@media (min-width:1025px){
  .lp2-hero .hero__in > div{max-width:860px}  /* % 는 wrap(1180) 기준이라 픽셀로 — 둘째 줄이 한 줄로 들어가는 폭 */
  .lp2-hero h1{font-size:clamp(34px, 2.35vw, 46px)}
}
/* ③ 수치 박스: 꽉 찬 흰색 → 반투명 + 라인 박스로 시선 분산 */
.lp2-chip{background:rgba(255,255,255,.38); border:1px solid rgba(18,23,16,.22); box-shadow:none}
@media (max-width:767px){
  .hero-logobox{width:78px; height:36px; border-radius:6px}  /* 모바일 h1 한 줄(38px)보다 낮아야 둘째 줄이 왼쪽으로 */
  .hero-logobox img{padding:5px 8px}
}
/* 칩 밴드가 넓어진 컬럼(860px)을 따라가면 4번째 칩이 기기 사진을 침범한다 — 밴드만 620 제한 */
@media (min-width:1025px){
  .lp2-chips{max-width:620px}
  .lp2-meta{max-width:620px}
}

.sec-head{text-align:center; margin-inline:auto}
.sec-head h2:before{margin-inline:auto}   /* 제목 위 짧은 막대 장식도 같이 가운데로 */
.sec-head p{margin-inline:auto}

.lp2-probs{overflow:hidden}
.lp2-probrow{display:flex; width:max-content; animation:lp2-slide 28s linear infinite}
.prob2{flex:0 0 auto; width:420px; margin-right:24px; padding:28px 26px; text-align:center;
  background:#fff; border:1px solid var(--line); border-radius:16px}
.prob2 b{display:block; font-size:20px; letter-spacing:-.02em}
.prob2 span{display:block; margin-top:10px; font-size:15.5px; color:var(--body); word-break:keep-all}
@media (max-width:767px){
  .prob2{width:300px; padding:22px 18px}
  .prob2 b{font-size:17px}
  .prob2 span{font-size:14px}
}

.lp2-stats{margin-top:48px}                      /* 총절감 카드 ↔ 수치 4칸: 26 → 48 */
.lp2-save .note-pending{margin-top:28px}         /* 수치 4칸 ↔ 각주 */
.lp2-save .closing{margin-top:44px; line-height:1.7}  /* 각주 ↔ 마무리 문구 + 줄간 */
.lp2-stats li{padding:32px 18px}                 /* 수치 칸 안쪽 여유 */

/* ① 수치 박스: 버튼과 비중이 비슷 → 전반적으로 축소 */
@media (min-width:768px){
  .lp2-chips{max-width:520px; gap:12px}
  .lp2-chip{height:74px; padding:10px 6px; border-radius:14px}
  .lp2-chip b{font-size:17px}
  .lp2-chip span{font-size:11.5px; margin-top:1px}
}
/* ② 제목 둘째 줄을 로고박스 왼쪽 라인에 맞춤 — flex 를 풀고 박스를 float 로,
   첫 줄만 박스 옆에 흐르고 둘째 줄은 왼쪽 끝에서 시작 (시안 동일) */
.hero-h1row{display:block}
.hero-logobox{float:left; margin-right:16px}
.hero-h1row::after{content:""; display:block; clear:both}   /* float 가 아랫줄로 새지 않게 */
@media (min-width:768px){
  .hero-logobox{height:44px; margin-top:0}   /* h1 한 줄보다 낮아야 둘째 줄이 왼쪽 끝으로 내려온다 — 768~1024 는 h1 42px(한 줄 50px)라 56 이면 들여쓰기 재발 (2026-09-16 실측 수리) */
}

/* ═════ 2026-09-15 "스크린샷(시안)처럼" — 히어로 텍스트 블록 전체를 시안 비례로 축소 (1920 실측: h1≈38 · 칩밴드≈440 · 버튼 컴팩트) ═════ */
@media (min-width:1025px){
  .lp2-hero h1{font-size:clamp(30px, 2vw, 38px)}
  .lp2-hero .hero__sub{font-size:16px; margin-top:14px}
  .lp2-hero .hero__cta{margin-top:24px}
  .lp2-hero .hero__cta .btn{padding:12px 22px; font-size:15px}
  .lp2-hero .lp2-meta{font-size:12.5px}
  .lp2-chips{max-width:440px; gap:10px}
  .lp2-chip{height:66px; border-radius:12px}
  .lp2-chip b{font-size:16px}
  .lp2-chip span{font-size:11px}
  .hero-logobox{width:clamp(77px, 5.54vw, 106px); height:clamp(32px, 2.3vw, 44px); margin-top:1px}  /* 2026-09-16 재발 수리: h1 이 clamp(30~38px) 라 1920 미만에선 한 줄이 44px 보다 낮아져 둘째 줄이 다시 들여쓰기됐다. 박스 높이도 같은 vw 비례로 — 항상 한 줄(글자×1.22)보다 낮게 */
}

/* ═════ 2026-09-15 "피그마 그대로" 전수 대조 반영 — 시안 프레임(1920×14960) 실측 3건 ═════ */
@media (min-width:768px){
  .lp2-news{display:block}
  .lp2-news .nws{width:min(640px, 92%); margin:0 auto 22px}
  .lp2-news .nws:last-child{margin-bottom:0}
}
/* ② 절감밴드: 회색 민무늬 → 시안의 연블루 사선 스트라이프, 총절감 카피는 카드 없이 직접 */
#save.lp2-save{background:#EAF3FC}  
.lp2-save .banner{background:transparent; border:0; box-shadow:none; padding:0}

.sec-head p.sec-eyebrow{display:none}  /* inline-block 규칙(.sec-head p.sec-eyebrow)보다 세거나 같아야 이긴다 */

/* ═════ 2026-09-15 줄바꿈 어색 교정 — 마지막 줄에 한두 단어만 남는 고아 줄을 text-wrap:balance 로 균형 배분
   (미지원 브라우저는 기존 줄바꿈 그대로 — 점진적 개선) ═════ */
.sec-head h2, .sec-head p, .prob2 span, .nws b, .nws span,
.lp2-save .closing, .lp2-intro p, .rvw q{text-wrap:balance}

#form.sec--blue{background:#2447E0}


/* ═════ 2026-09-16 자료(제조사 상세소스 · 비용절감 시뮬레이션 · 2026.03 가격표) 반영 ═════ */

/* 화면에는 안 보이고 스크린리더만 읽는 텍스트 */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* L-05 모델별 절감액 표 — .lp2-save 가 가운데 정렬이라 표만 왼쪽으로 되돌린다 */
.savetbl{margin-top:36px; text-align:left}
.savetbl h3{font-size:21px; margin-bottom:16px; color:var(--ink)}
.savetbl .note{margin-top:14px; text-align:left}
.savetbl .tablewrap{background:#fff}
td .v.plus{color:var(--green-tx); font-weight:700}
td .v.minus{color:var(--mute)}
td .v em{font-style:normal; display:inline-block; margin-left:7px; background:var(--blue); color:#fff;
  font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px; letter-spacing:0}

/* L-06b 처리 3단계 */
.flow3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.flow3 .stp{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column}
.flow3 .stp img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover}
.flow3 .stp .txt{padding:22px 24px 26px}
.flow3 .stp i{font-style:normal; display:inline-flex; width:34px; height:34px;
  align-items:center; justify-content:center; border-radius:999px;
  background:var(--blue); color:#fff; font-size:13.5px; font-weight:800; letter-spacing:0}
.flow3 .stp b{display:block; margin-top:14px; font-size:20px; color:var(--ink)}
.flow3 .stp span{display:block; margin-top:9px; font-size:15.5px; color:var(--body)}
/* 3단계는 사진이 없다 — 숫자 블록으로 채운다. 면을 칠하므로 글자색도 여기서 정한다 */
.flow3 .stp--last .ph{aspect-ratio:16/10; background:var(--green-tx); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px}
.flow3 .stp--last .ph b{margin:0; font-size:62px; font-weight:800; color:#fff; letter-spacing:-.04em; line-height:1}
.flow3 .stp--last .ph b small{font-size:22px; font-weight:700; margin-left:4px}
.flow3 .stp--last .ph span{margin:0; font-size:16px; font-weight:600; color:#fff}

/* L-09 인증 로고 모음 */
.certlogos{margin-top:26px; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; padding:22px; text-align:center}
.certlogos img{width:100%; max-width:820px; height:auto; margin-inline:auto}

@media (max-width:1023px){
  .flow3{grid-template-columns:1fr 1fr}
  .flow3 .stp--last{grid-column:1 / -1}
  .flow3 .stp--last .ph{aspect-ratio:auto; padding:34px 20px}
}
@media (max-width:767px){
  .flow3{grid-template-columns:1fr}
  .flow3 .stp--last{grid-column:auto}
  .flow3 .stp--last .ph b{font-size:48px}
  .savetbl h3{font-size:19px}
}

/* L-05/06 제품 라인업 6종 — 다크 섹션 위 흰 카드. 카드가 면을 칠하므로 글자색도 카드가 정한다 */
.lineup{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px}
.lineup .model{display:block; transition:.15s}
.lineup .model img{height:150px; width:auto; object-fit:contain}
.lineup .model:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.lineup .model:focus-visible{outline:3px solid rgba(31,111,235,.5); outline-offset:3px}
.lineup-note{margin-top:16px; font-size:15px; color:#AFBBB4}
.lineup-note a{color:#5BD6A0; font-weight:700; text-decoration:underline; text-underline-offset:3px}
.certlogos .note{margin-top:14px}

@media (max-width:1023px){ .lineup{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){
  .lineup{grid-template-columns:1fr 1fr; gap:12px}
  .lineup .model{padding:14px}
  .lineup .model img{height:100px}
  .lineup .model b{font-size:16px}
}

/* L-08 설치 실적 수치 — 카드가 아니라 한 줄 띠로. 숫자는 그린(기획안 3장 색 규칙) */
.covers{list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr);
  background:#fff; border:1px solid var(--line); border-radius:var(--r)}
.covers li{padding:24px 18px; border-left:1px solid var(--line); text-align:center}
.covers li:first-child{border-left:0}
.covers b{display:block; font-size:27px; font-weight:800; color:var(--green-tx); letter-spacing:-.03em}
.covers span{display:block; margin-top:4px; font-size:13.5px; color:var(--mute)}
@media (max-width:640px){
  .covers{grid-template-columns:1fr 1fr}
  .covers li:nth-child(3){border-left:0}
  .covers li:nth-child(n+3){border-top:1px solid var(--line)}
  .covers b{font-size:23px}
}

/* ── 2026-09-22 드림파트너스 로고 교체: PC는 가로형(문양 + DREAM PARTNERS), 모바일은 세로형(문양 위 · 글자 아래).
      기존 문양 위 DRPT 글자와 영문 슬로건은 쓰지 않는다. 작아져도 DREAM PARTNERS 가 읽히도록 높이를 넉넉히 준다 */
.logo picture{display:block; line-height:0}
.logo .logo-img{display:block; height:30px; width:auto}
@media (max-width:767px){ .logo .logo-img{height:46px} }