/* RECOVERIC 업체 홈페이지 3차 디자인 CSS (2026-10-30 · 영화 포스터 히어로 + 잡지 지면 리듬 · site/vendor/home2.html · pipeline/vendor_home.py ui_view · 브리프 docs/20261030_업체홈_3차_브리프.md)
   색: 웜 화이트 · 잉크 블랙 · 네이비 #1B2438 · 업종 포인트 하나(--acc). 글자: Bodoni Moda(숫자·영문) + Noto Serif KR(제목·인용) + Noto Sans KR(본문).
   본문 사진은 원본 비율(aspect-ratio = w/h). 히어로·풀블리드·타일은 잘라 채우되(object-fit) 늘이지 않는다. 단추는 둥근 토큰(--rv-btn-*). */
html,body{word-break:keep-all}
.h2{--ink:#15161b;--ink2:#5d5d62;--hair:#e4e0d8;--paper:#faf8f4;--navy:var(--rv-btn-navy,#1B2438);--acc:#4a5a70;
  --serif:'Bodoni Moda','Noto Serif KR',serif;--kr:'Noto Serif KR','Bodoni Moda',serif;--sans:'Noto Sans KR',sans-serif;--col:1080px;--pad:40px;
  margin:0;background:#fff;color:var(--ink);font:400 15px/1.8 var(--sans);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;counter-reset:sec}
.h2[data-layout="factory"]{--acc:#4a5a70}.h2[data-layout="studio"]{--acc:#7a3a48}.h2[data-layout="craft"]{--acc:#94583a}.h2[data-layout="material"]{--acc:#5b6140}.h2[data-layout="brand"]{--acc:#86703f}
.h2 *,.h2 *::before,.h2 *::after{box-sizing:border-box}
.h2 :where(h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote){margin:0;padding:0}
.h2 :where(ul,ol){list-style:none}
.h2 a{color:inherit;text-decoration:none}
.h2 img{display:block;width:100%;height:100%;object-fit:cover}

/* 단추: 네이비 채움 알약 · 가는 윤곽 알약 */
.h2-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 20px;border:1px solid var(--navy);border-radius:var(--rv-btn-r-pill,999px);background:var(--navy);color:#fff;font:500 12.5px/1 var(--sans);letter-spacing:.06em;white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.h2 a.h2-btn{color:#fff}.h2 a.h2-btn.is-line{color:var(--ink)}
.h2-btn:hover{background:#2c3a58;border-color:#2c3a58}.h2-btn:active{transform:var(--rv-btn-press,scale(.97))}
.h2-btn.is-lg{height:44px;padding:0 28px;font-size:13px}
.h2-btn.is-line{background:transparent;color:var(--ink);border-color:rgba(20,21,26,.3)}.h2-btn.is-line:hover{background:transparent;border-color:var(--navy)}
.h2-btn:focus-visible,.h2 a:focus-visible{outline:0;box-shadow:var(--rv-btn-focus,0 0 0 2px #fff,0 0 0 4px #1B2438)}

/* 맨 위 줄 · 고정 머리(히어로 위에 겹치고, 스크롤하면 흰 막대로 따라온다) */
.h2-strip{position:relative;z-index:21;display:flex;justify-content:space-between;gap:16px;margin:0;padding:7px var(--pad);background:#0d0f14;color:rgba(255,255,255,.72);font:400 10.5px/1.5 var(--sans);letter-spacing:.08em}
.h2-strip b{font-weight:500;color:#fff;letter-spacing:.24em;margin-right:8px}
.h2-strip .h2-back{display:inline-block;margin-left:14px;padding:4px 0;color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}   /* 첫 방문 동선(2026-10-31): 목록에서 들어온 업체 홈의 돌아갈 길 · 카드 docs/액션카드/20261031_첫방문_업체홈_업체찾기로.md */
.h2-bar{position:sticky;top:0;z-index:20;height:64px;margin-bottom:-64px;color:#fff;transition:background .3s,color .3s,border-color .3s;border-bottom:1px solid transparent}
.h2-bar.is-on{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);border-bottom-color:var(--hair)}
.h2-bar-in{display:flex;align-items:center;gap:30px;height:64px;padding:0 var(--pad)}
.h2-logo{font:500 16px/1.2 var(--kr);letter-spacing:.02em;margin-right:auto}
.h2-bar nav{display:flex;gap:26px;font-size:12.5px;letter-spacing:.08em;opacity:.86}
.h2-bar .h2-btn{height:30px;padding:0 16px;font-size:12px;background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.h2 .h2-bar a.h2-btn{color:#fff}
.h2-bar.is-on .h2-btn,.h2 .h2-bar.is-on a.h2-btn{background:var(--navy);border-color:var(--navy);color:#fff}

/* 첫 화면: 영화 포스터 */
.h2-hero{position:relative;height:78vh;min-height:560px;max-height:900px;overflow:hidden;background:#101218;color:#fff;display:flex;flex-direction:column;justify-content:flex-end}
.h2-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h2-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,9,13,.5) 0,rgba(8,9,13,0) 22%,rgba(8,9,13,.3) 42%,rgba(8,9,13,.9) 100%)}
.h2-hero-in{position:relative;z-index:2;padding:0 var(--pad) 36px;max-width:var(--col);margin:0 auto;width:100%}
.h2-en{font:500 11.5px/1.5 var(--sans);letter-spacing:.34em;text-transform:uppercase;opacity:.92;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.h2-en span{margin-left:18px;letter-spacing:.14em;text-transform:none;font-weight:400;opacity:.86}
.h2-hero h1{margin-top:14px;font:500 clamp(48px,6.4vw,92px)/1.1 var(--kr);letter-spacing:-.01em;text-wrap:balance;text-shadow:0 2px 28px rgba(0,0,0,.4)}
.h2-one{margin-top:18px;max-width:640px;font:italic 400 19px/1.75 var(--kr);opacity:.96;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.h2-facts{position:relative;z-index:2;display:grid;grid-template-columns:repeat(var(--fn,4),minmax(0,1fr));border-top:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.13);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.h2-facts[data-n="3"]{--fn:3}.h2-facts[data-n="5"]{--fn:5}
.h2-facts>div{padding:20px var(--pad) 22px;border-left:1px solid rgba(255,255,255,.22)}
.h2-facts>div:first-child{border-left:0}
.h2-facts dt{font:500 10.5px/1.4 var(--sans);letter-spacing:.2em;opacity:.82}
.h2-facts dd{margin-top:6px;display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.h2-facts dd b{font:500 44px/1.05 var(--serif);font-feature-settings:"lnum";-webkit-text-stroke:.35px currentColor;letter-spacing:-.01em}
.h2-facts dd small{font:400 14px/1 var(--kr);opacity:.9}
.h2-facts dd.is-tx b{font:500 24px/1.3 var(--kr);-webkit-text-stroke:0;letter-spacing:0}
.h2-facts{padding-inline:max(0px,calc((100vw - var(--col))/2))}
.h2-facts dt{white-space:nowrap;word-break:keep-all}

/* 본문: 구역 제목은 작게(번호 + 가는 선), 글은 좁은 단 */
.h2-main{display:block}
.h2-sec{max-width:var(--col);margin:0 auto;padding:50px var(--pad) 0}
.h2-head{display:flex;align-items:baseline;gap:14px;margin-bottom:26px}
.h2-no{counter-increment:sec;font:500 13px/1 var(--serif);letter-spacing:.1em;color:var(--acc);font-style:normal}
.h2-no::before{content:counter(sec,decimal-leading-zero)}
.h2-head::after{content:"";order:2;flex:1;height:1px;background:var(--hair);align-self:center}
.h2-head h2{order:1;font:500 15px/1.4 var(--kr);letter-spacing:.04em}
.h2-head em{order:3;font:italic 400 12px/1 var(--serif);letter-spacing:.14em;color:var(--ink2)}
.h2-narrow{max-width:640px}
.h2-lead{font:400 17px/2 var(--kr);color:#22232a}
.h2-co{margin-top:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;border-top:1px solid var(--hair);max-width:760px}
.h2-co>div{display:block;padding:12px 0;border-bottom:1px solid var(--hair)}
.h2-co dt{width:auto;font:500 10.5px/2.1 var(--sans);letter-spacing:.14em;color:var(--ink2)}
.h2-co dd{font:400 14.5px/1.8 var(--kr)}

/* 풀 쿼트 */
.h2-pull{max-width:var(--col);margin:0 auto;padding:60px var(--pad) 0}
.h2-pull p{font:400 clamp(30px,3.8vw,48px)/1.5 var(--kr);letter-spacing:-.01em;max-width:820px;text-wrap:balance}
.h2-pull p::before{content:"";display:block;width:56px;height:2px;background:var(--acc);margin-bottom:30px}

/* 풀블리드 사진 */
.h2-bleed{position:relative;margin:50px 0 0;height:min(44vh,420px);min-height:340px;overflow:hidden;background:var(--paper)}
.h2-bleed figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px var(--pad) 18px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.5));color:#fff;font:italic 400 13px/1.5 var(--kr);letter-spacing:.02em}
.h2-look{margin-top:68px}
.h2-look .h2-head{max-width:var(--col);margin:0 auto 34px;padding:0 var(--pad)}
.h2-look .h2-bleed{margin:0;height:min(54vh,500px)}

/* 사진 콜라주: 큰 1 + 작은 2, 원본 비율 */
.h2-ph{display:block;position:relative;overflow:hidden;background:var(--paper);width:100%}
.h2-ph img{position:absolute;inset:0}

.h2-col{display:flex;gap:12px;align-items:flex-start}
.h2-col.is-flip{flex-direction:row-reverse}
.h2-col figure{flex:var(--r) 1 0;min-width:0}
.h2-col figcaption{margin-top:10px;font:italic 400 13px/1.6 var(--kr);color:var(--ink2)}
.h2-col.n1{max-width:640px}

/* 거대한 숫자 */
.h2-strsec{padding-top:60px}
.h2-str{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;border-top:1px solid var(--ink)}
.h2-str[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.h2-str p{padding:22px 0 8px}
.h2-str b{display:block;font:500 clamp(84px,8.6vw,120px)/1 var(--serif);font-feature-settings:"lnum";-webkit-text-stroke:.8px currentColor;letter-spacing:-.02em;color:var(--ink)}
.h2-str span{display:block;margin-top:14px;font:500 17px/1.6 var(--kr);padding-bottom:12px}

/* 공정 타임라인(봉제·설비 시그니처) */
.h2-steps{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0;position:relative}
.h2-steps li{position:relative;padding-top:6px;padding-right:20px}
.h2-steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink)}
.h2-steps li::after{content:"";position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.h2-steps b{display:block;margin-top:12px;font:500 clamp(56px,6.2vw,88px)/1 var(--serif);font-feature-settings:"lnum";-webkit-text-stroke:.7px currentColor;letter-spacing:-.02em}
.h2-steps span{display:block;margin-top:10px;font:500 17px/1.5 var(--kr)}
.h2-steps.is-sm b{font-size:40px;-webkit-text-stroke:.4px currentColor}.h2-steps.is-sm span{font-size:15px}
.h2-note{margin-top:22px;font:italic 400 13px/1.6 var(--kr);color:var(--ink2)}

/* 보유 설비 · 취급 품목 */
.h2-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px 48px}
.h2-spec h3{font:500 10.5px/1.4 var(--sans);letter-spacing:.2em;color:var(--ink2);padding-bottom:10px;border-bottom:1px solid var(--ink);margin-bottom:4px}
.h2-spec li{padding:9px 0;border-bottom:1px solid var(--hair);font:400 15.5px/1.6 var(--kr)}
.h2-spec small{font:500 10px/1 var(--sans);letter-spacing:.12em;color:var(--acc);margin-left:6px}

/* 스케치→샘플 좌우 비교 슬라이드(패턴·디자인) */
.h2-cmp{position:relative;aspect-ratio:21/9;overflow:hidden;background:var(--paper);touch-action:pan-y}
.h2-cmp img{position:absolute;inset:0}
.h2-cmp .b{clip-path:inset(0 0 0 var(--p))}
.h2-cmp .bar{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.h2-cmp .bar::after{content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.25)}
.h2-cmp .l1,.h2-cmp .l2{position:absolute;bottom:16px;padding:5px 13px;border-radius:999px;background:rgba(255,255,255,.88);font:500 10.5px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.h2-cmp .l1{left:16px}.h2-cmp .l2{right:16px}
.h2-cmp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}

/* 접사 타일 벽(자수·프린트) */
.h2-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.h2-tiles figure{aspect-ratio:3/2;overflow:hidden;background:var(--paper)}

/* 스와치 월(원단·부자재) */
.h2-swatch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 16px}
.h2-swatch span{display:block;aspect-ratio:1;overflow:hidden;background:var(--paper)}
.h2-swatch figcaption{margin-top:10px;font:500 11px/1.4 var(--sans);letter-spacing:.16em;color:var(--ink2)}

/* 후기 */
.h2-rv-sum{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.h2-rv-sum b{font:500 64px/1 var(--serif);font-feature-settings:"lnum";-webkit-text-stroke:.6px currentColor}
.h2-star{color:var(--acc);font-size:20px}
.h2-rv-sum span:last-child{margin-left:14px;font:italic 400 12.5px/1.6 var(--kr);color:var(--ink2)}
.h2-rv ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:26px}
.h2-rv li p{font:italic 400 17px/1.85 var(--kr)}
.h2-rv li small{display:block;margin-top:10px;font:500 10.5px/1.4 var(--sans);letter-spacing:.14em;color:var(--ink2)}

/* 연락 */
.h2-contact-in{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.h2-contact-tx{align-self:stretch}
.h2-contact-tx p{display:flex;gap:18px;padding:11px 0;border-bottom:1px solid var(--hair);font:400 16px/1.6 var(--kr)}
.h2-contact-tx p:first-child{border-top:1px solid var(--hair)}
.h2-contact-tx small{flex:none;width:6.5em;font:500 10.5px/2.2 var(--sans);letter-spacing:.14em;color:var(--ink2)}
.h2-acts{display:flex;flex-wrap:wrap;gap:10px}

/* 함께 보면 좋은 곳 = 연관 업체 광고 카드 3(사진 4:5) */
.h2-lb{display:inline-block;padding:2px 7px;border:1px solid currentColor;font:500 10px/1.3 var(--sans);letter-spacing:.2em;color:var(--ink)}
.h2-more{padding-bottom:20px}
.h2-more ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.h2-more a{display:flex;flex-direction:column;gap:5px}
.h2-adph{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--paper);margin-bottom:10px}
.h2-adph img{transition:transform 1.1s cubic-bezier(.2,.6,.2,1)}
@media (hover:hover){.h2-more a:hover .h2-adph img{transform:scale(1.04)}}
.h2-more small{display:flex;align-items:center;gap:10px;font:500 10.5px/1.4 var(--sans);letter-spacing:.14em;color:var(--ink2)}
.h2-more small .h2-lb{padding:1px 6px;font-size:9.5px}
.h2-more strong{font:500 19px/1.45 var(--kr)}
.h2-more a>span:last-child{font:400 13.5px/1.7 var(--kr);color:var(--ink2)}
.h2-adnote{margin-top:26px;font:400 11.5px/1.8 var(--sans);color:var(--ink2)}
.h2-adnote a{text-decoration:underline;text-underline-offset:3px}

/* 바닥글 · 휴대폰 하단 고정 바 */
.h2-foot{margin-top:70px;border-top:1px solid var(--hair);padding:24px 0 34px;font-size:11px;line-height:1.8;color:var(--ink2)}
.h2-foot-in{max-width:var(--col);margin:0 auto;padding:0 var(--pad)}
.h2-foot p+p{margin-top:2px}
.h2-fix{display:none}
@media (hover:hover){.h2-bleed img,.h2-tiles img{transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}.h2-tiles figure:hover img{transform:scale(1.04)}}

@media (max-width:760px){
  .h2{--pad:20px;font-size:14.5px}
  .h2-strip{flex-direction:column;gap:0;padding:6px var(--pad);font-size:10px}
  .h2-bar,.h2-bar-in{height:56px}.h2-bar{margin-bottom:-56px}
  .h2-bar nav{display:none}.h2-bar .h2-btn{display:none}
  .h2-bar-in{gap:12px}
  .h2-hero{height:70vh;min-height:520px}
  .h2-hero-in{padding-bottom:26px}
  .h2-hero h1{font-size:clamp(34px,10.4vw,44px);margin-top:10px}
  .h2-one{font-size:15.5px;margin-top:12px}
  .h2-en span{display:block;margin:4px 0 0}
  .h2-facts{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:0}
  .h2-facts>div,.h2-facts>div:first-child{padding:12px var(--pad) 13px;border-left:0}
  .h2-facts>div:nth-child(even){border-left:1px solid rgba(255,255,255,.22)}
  .h2-facts>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.22)}
  .h2-facts[data-n="3"]>div:last-child,.h2-facts[data-n="5"]>div:last-child{grid-column:1/-1;border-left:0}
  .h2-facts dd b{font-size:30px}.h2-facts dd.is-tx b{font-size:19px}.h2-facts dd small{font-size:12px}
  .h2-sec{padding-top:64px}
  .h2-head{margin-bottom:24px}
  .h2-lead{font-size:15.5px;line-height:1.95}
  .h2-pull{padding-top:72px}.h2-pull p{font-size:26px}
  .h2-bleed{margin-top:64px;height:52vh;min-height:300px}
  .h2-look{margin-top:64px}.h2-look .h2-bleed{height:62vh}
  .h2-col{flex-wrap:wrap;gap:8px}.h2-col.is-flip{flex-direction:row}
  .h2-col .c0{flex:1 1 100%}.h2-col .c1,.h2-col .c2{flex:var(--r) 1 0}
  .h2-strsec{padding-top:72px}
  .h2-str{grid-template-columns:minmax(0,1fr)}.h2-str[data-n="2"]{grid-template-columns:minmax(0,1fr)}
  .h2-str p{display:flex;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid var(--hair)}
  .h2-str b{font-size:72px;flex:none;min-width:2ch}.h2-str span{margin-top:0;padding-bottom:0;font-size:16px}
  .h2-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
  .h2-steps b{font-size:60px}.h2-steps.is-sm b{font-size:36px}
  .h2-cmp{aspect-ratio:4/3}
  .h2-co{grid-template-columns:minmax(0,1fr)}
  .h2-tiles figure{aspect-ratio:1}
  .h2-tiles{gap:3px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .h2-swatch{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px}
  .h2-rv ul{grid-template-columns:minmax(0,1fr);gap:22px}
  .h2-more ul{grid-template-columns:minmax(0,1fr);gap:30px}
  .h2-more a{display:grid;grid-template-columns:34% minmax(0,1fr);column-gap:16px;align-items:start}
  .h2-more .h2-adph{grid-row:1/5;margin:0}
  .h2-more strong{font-size:17px}
  .h2-contact-tx p{flex-direction:column;gap:0}
  body.h2{padding-bottom:68px}
  .h2-fix{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:10px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--hair)}
  .h2-fix .h2-btn{flex:1;height:44px}
}

/* ───────── 업종별 상세 지면(2026-10-30 · site/vendor/home2_x.html) ───────── */
.h2[data-layout="trims"]{--acc:#5b6140}.h2[data-layout="fabric"]{--acc:#3e5c76}.h2[data-layout="label"]{--acc:#94583a}.h2[data-layout="promo"]{--acc:#86703f}
.h2-btn.is-off{cursor:not-allowed;background:#e9e7e2;border-color:#e9e7e2;color:#7a7a80;opacity:1}
.h2-btn.is-off:hover{background:#e9e7e2;border-color:#e9e7e2}
/* 문자(sms:)는 휴대폰에서만: 마우스 PC 에서는 눌러도 열 앱이 없다(액션 카드 docs/액션카드/20261031_전화_문자_길찾기.md) */
@media (hover:hover) and (pointer:fine){.h2 [data-ev="sms"]{display:none}}
.h2 .h2-bar .h2-btn.is-off,.h2 .h2-bar.is-on .h2-btn.is-off{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.85)}
.h2 .h2-bar.is-on .h2-btn.is-off{background:#e9e7e2;border-color:#e9e7e2;color:#6a6a70}
.hx-off{margin-top:12px;font:400 12.5px/1.7 var(--kr);color:var(--ink2)}
.hx-off.is-contact{flex-basis:100%;margin:0}
.h2-contact-in{flex-wrap:wrap}
.hx-tile{display:block;position:relative;overflow:hidden;background:var(--paper);width:100%}
.hx-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-h3{font:500 10.5px/1.4 var(--sans);letter-spacing:.2em;color:var(--ink2);padding-bottom:10px;border-bottom:1px solid var(--ink);margin-bottom:14px}
.hx-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 56px;align-items:start}
.hx-two.is-one{grid-template-columns:minmax(0,760px)}   /* 두 칸 중 하나만 입력한 지면(예: 샘플 상자 없는 수량별 납기)은 한 칸으로 */
.hx-box{border:1px solid var(--ink);padding:26px 28px}
.hx-box h3{font:500 10.5px/1.4 var(--sans);letter-spacing:.2em;color:var(--ink2)}
.hx-big{display:flex;align-items:baseline;gap:6px;margin-top:8px}
.hx-big b{font:500 64px/1 var(--serif);font-feature-settings:"lnum";-webkit-text-stroke:.6px currentColor}
.hx-big small{font:400 16px/1 var(--kr)}
.hx-line{margin-top:10px;font:400 14.5px/1.8 var(--kr)}
.hx-box p:not(.hx-big):not(.hx-line){font:400 14px/1.7 var(--kr);color:var(--ink2)}

/* 설비 보드 */
.hx-eq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;border-top:1px solid var(--ink)}
.hx-eq li{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:baseline;padding:18px 0 16px;border-bottom:1px solid var(--hair)}
.hx-eq b{grid-row:1/3;font:500 56px/1 var(--serif);font-feature-settings:"lnum";-webkit-text-stroke:.6px currentColor;letter-spacing:-.02em;min-width:2ch}
.hx-eq strong{font:500 17px/1.5 var(--kr)}
.hx-eq span{font:400 13px/1.6 var(--kr);color:var(--ink2)}
/* 칩 */
.hx-chips{display:flex;flex-wrap:wrap;gap:10px}
.hx-chips li{padding:8px 16px;border:1px solid rgba(20,21,26,.28);border-radius:999px;font:400 14.5px/1.5 var(--kr)}
.hx-chips.is-item li{display:flex;align-items:baseline;gap:8px;padding:10px 18px}
.hx-chips.is-item li.is-main{background:var(--navy);border-color:var(--navy);color:#fff}
.hx-chips li strong{font-weight:500}
.hx-chips li small{font:400 12px/1.4 var(--kr);opacity:.7}
.hx-dot{display:inline-block;width:9px;height:9px;border-radius:50%;border:1px solid var(--ink);margin:0 6px 0 14px;vertical-align:-1px}
.hx-dot:first-child{margin-left:0}.hx-dot.is-main{background:var(--navy);border-color:var(--navy);margin-left:0}
/* 공정·단계 레일 */
.hx-flow{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0 22px}
.hx-flow li{position:relative;padding-top:14px;border-top:1px solid var(--ink)}
.hx-flow li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.hx-flow b{display:block;font:500 40px/1 var(--serif);font-feature-settings:"lnum";-webkit-text-stroke:.5px currentColor;letter-spacing:-.02em;color:var(--acc)}
.hx-flow strong{display:block;margin-top:12px;font:500 17px/1.5 var(--kr)}
.hx-flow em{display:block;font:italic 400 13.5px/1.6 var(--serif);color:var(--ink2);letter-spacing:.04em}
.hx-flow span{display:block;margin-top:8px;font:400 13.5px/1.75 var(--kr);color:#3a3b42}
/* 표 */
.hx-tbl{width:100%;border-collapse:collapse;font:400 14.5px/1.6 var(--kr)}
.hx-tbl th{padding:0 14px 10px 0;text-align:left;font:500 10.5px/1.4 var(--sans);letter-spacing:.18em;color:var(--ink2);border-bottom:1px solid var(--ink);white-space:nowrap}
.hx-tbl td{padding:12px 14px 12px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.hx-tbl b{font:500 17px/1.4 var(--serif);font-feature-settings:"lnum";-webkit-text-stroke:.3px currentColor}
.hx-tbl td strong{font-weight:500}
.hx-tbl.is-sm td{padding:9px 14px 9px 0}
.hx-list{counter-reset:l}
.hx-list li{counter-increment:l;display:grid;grid-template-columns:34px 1fr;padding:11px 0;border-bottom:1px solid var(--hair);font:400 14.5px/1.7 var(--kr)}
.hx-list li::before{content:counter(l,decimal-leading-zero);font:500 13px/1.9 var(--serif);color:var(--acc)}
.hx-list li strong{grid-column:2;font-weight:500}
.hx-list li span{grid-column:2;color:#3a3b42}
.hx-list li:has(> span:only-child) span{grid-column:2}
/* 사례 카드(봉제) */
.hx-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}
.hx-cases h3{margin-top:14px;font:500 19px/1.5 var(--kr)}
.hx-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:6px;font:400 13.5px/1.7 var(--kr);color:var(--ink2)}
.hx-meta b{font:500 22px/1.2 var(--serif);font-feature-settings:"lnum";-webkit-text-stroke:.4px currentColor;color:var(--ink)}
.hx-note{margin-top:8px;font:400 14px/1.8 var(--kr);color:#3a3b42}
/* 부자재 카탈로그 */
.hx-cat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:34px;padding:30px 0;border-top:1px solid var(--hair)}
.hx-cat:first-of-type{border-top:1px solid var(--ink)}
.hx-cat header,.hx-fab header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.hx-cat h3,.hx-fab h3{font:500 24px/1.4 var(--kr)}
.hx-badge{display:inline-block;padding:3px 11px;border:1px solid var(--acc);border-radius:999px;font:500 11px/1.5 var(--sans);letter-spacing:.06em;color:var(--acc);white-space:nowrap}
.hx-kv{display:flex;flex-wrap:wrap;gap:6px 34px;margin:14px 0 4px}
.hx-kv dt{font:500 10.5px/1.6 var(--sans);letter-spacing:.16em;color:var(--ink2)}
.hx-kv dd{font:400 14.5px/1.6 var(--kr)}
.hx-kv dd b{font:500 30px/1.1 var(--serif);font-feature-settings:"lnum";-webkit-text-stroke:.4px currentColor;margin-right:3px}
.hx-sw{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 10px;margin:16px 0 20px}
.hx-sw li{text-align:center;min-width:0}
.hx-sw i{display:block;width:30px;height:30px;margin:0 auto;border-radius:50%;border:1px solid rgba(20,21,26,.18)}
.hx-sw span{display:block;margin-top:5px;font:400 11px/1.4 var(--kr);color:var(--ink2);overflow-wrap:anywhere}
.hx-cat .hx-tbl{margin-top:6px}
/* 샘플·시안·견적 상자 */
.hx-sample{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--ink)}
.hx-sample dl{display:flex;flex-wrap:wrap;align-content:flex-start;gap:22px 40px;padding:28px 32px;border-right:1px solid var(--hair)}
.hx-sample dt{font:500 10.5px/1.6 var(--sans);letter-spacing:.16em;color:var(--ink2)}
.hx-sample dd{font:400 15px/1.7 var(--kr)}
.hx-sample dd b{font:500 52px/1.05 var(--serif);font-feature-settings:"lnum";-webkit-text-stroke:.5px currentColor;margin-right:4px}
.hx-sample .is-tx{flex-basis:100%}
.hx-sample-tx{padding:28px 32px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hx-sample-tx p:first-child{font:400 15.5px/1.9 var(--kr)}
.hx-sample-tx .hx-off{margin-top:0}
/* 원단 도감 */
.hx-range{margin:-8px 0 18px;font:italic 400 14px/1.6 var(--serif);color:var(--ink2);letter-spacing:.04em}
.hx-fab{display:grid;grid-template-columns:260px minmax(0,1fr);gap:36px;padding:28px 0;border-top:1px solid var(--hair)}
.hx-fab:first-of-type{border-top:1px solid var(--ink)}
.hx-weave{margin-top:2px;font:400 14px/1.7 var(--kr);color:var(--ink2)}
.hx-kv.is-4{gap:6px 30px}
.hx-comp-wrap{margin-top:16px}
.hx-comp-wrap small,.hx-price small{display:block;font:500 10.5px/1.6 var(--sans);letter-spacing:.16em;color:var(--ink2);margin-bottom:6px}
.hx-comp{display:flex;height:34px;border:1px solid rgba(20,21,26,.2);overflow:hidden}
.hx-comp i{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;overflow:hidden;font-style:normal;color:#fff;white-space:nowrap}
.hx-comp i:nth-child(1){background:#1B2438}.hx-comp i:nth-child(2){background:#6f7f95}.hx-comp i:nth-child(3){background:#aab4c2;color:#1B2438}.hx-comp i:nth-child(4){background:#d8dde4;color:#1B2438}
.hx-comp b{font:500 14px/1 var(--serif);font-feature-settings:"lnum"}
.hx-comp small{margin:0;letter-spacing:0;font:400 11px/1 var(--kr);color:inherit}
.hx-comp i[style*="flex:5 "] small,.hx-comp i[style*="flex:6 "] small{display:none}
.hx-price{margin-top:14px;font:500 18px/1.5 var(--kr)}
.hx-seasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 34px;border-top:1px solid var(--ink)}
.hx-seasons li{padding:20px 0 6px}
.hx-seasons b{font:500 46px/1 var(--serif);font-feature-settings:"lnum";-webkit-text-stroke:.6px currentColor;letter-spacing:-.01em}
.hx-seasons em{margin-left:12px;font:italic 400 14px/1 var(--serif);color:var(--acc)}
.hx-seasons span{display:block;margin-top:12px;font:400 14.5px/1.8 var(--kr)}
/* 라벨 종류 */
.hx-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
.hx-kinds header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:14px}
.hx-kinds h3{font:500 18px/1.5 var(--kr)}
.hx-kv.is-col{flex-direction:column;gap:2px;margin:10px 0 0}
.hx-kv.is-col>div{display:flex;gap:12px;align-items:baseline}
.hx-kv.is-col dt{flex:0 0 64px}
.hx-kv.is-col dd b{font-size:19px}
/* 프로모션 사례 */
.hx-case{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:44px;align-items:center;padding:34px 0;border-top:1px solid var(--hair)}
.hx-case:first-of-type{border-top:1px solid var(--ink)}
.hx-case.is-flip{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.hx-case.is-flip figure{order:2}
.hx-case figure .hx-tile{max-height:520px}
.hx-eyebrow{font:500 11px/1.6 var(--sans);letter-spacing:.2em;color:var(--ink2)}
.hx-eyebrow b{font:500 15px/1 var(--serif);color:var(--acc);margin-right:12px;letter-spacing:.06em}
.hx-case h3{margin-top:10px;font:500 26px/1.45 var(--kr);text-wrap:balance}
.hx-story{margin-top:16px;border-top:1px solid var(--hair)}
.hx-story>div{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--hair)}
.hx-story dt{font:500 11px/2 var(--sans);letter-spacing:.14em;color:var(--acc)}
.hx-story dd{font:400 14.5px/1.85 var(--kr)}
.hx-scope{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.hx-scope>div{padding:18px 18px 10px 0}
.hx-scope h3{font:500 18px/1.4 var(--kr);color:var(--acc)}
.hx-scope li{padding:6px 0;border-bottom:1px solid var(--hair);font:400 14px/1.6 var(--kr)}
/* 운영자가 더한 칸 '상세 정보'(detail.extra · 2026-11-01): 이름: 값 목록 · PC 두 줄, 휴대폰 한 줄 */
.hx-kvlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;margin:0;border-top:1px solid var(--ink)}
.hx-kvlist>div{display:grid;grid-template-columns:minmax(92px,34%) minmax(0,1fr);gap:16px;padding:15px 0;border-bottom:1px solid var(--hair);word-break:keep-all;overflow-wrap:anywhere}
.hx-kvlist dt{font:500 12.5px/1.75 var(--kr);color:var(--ink2)}
.hx-kvlist dd{margin:0;font:400 15px/1.7 var(--kr)}

@media (max-width:1000px){
  .hx-eq{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px}
  .hx-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-scope{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .hx-two{grid-template-columns:minmax(0,1fr);gap:28px}
  .hx-kvlist{grid-template-columns:minmax(0,1fr)}
  .hx-kvlist>div{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:13px 0}
  .hx-eq{grid-template-columns:minmax(0,1fr)}
  .hx-eq b{font-size:48px}
  .hx-flow{grid-template-columns:minmax(0,1fr);gap:22px}
  .hx-flow li{display:grid;grid-template-columns:54px 1fr;column-gap:12px;padding-top:12px}
  .hx-flow b{grid-row:1/4;font-size:32px}
  .hx-flow strong{margin-top:0}
  .hx-flow em,.hx-flow span,.hx-flow strong{grid-column:2}
  .hx-cases{grid-template-columns:minmax(0,1fr)}
  .hx-cat{grid-template-columns:minmax(0,1fr);gap:18px;padding:24px 0}
  .hx-sw{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hx-sample{grid-template-columns:minmax(0,1fr)}
  .hx-sample dl{padding:22px 20px;border-right:0;border-bottom:1px solid var(--hair);gap:18px 30px}
  .hx-sample-tx{padding:22px 20px}
  .hx-sample dd b{font-size:42px}
  .hx-fab{grid-template-columns:minmax(0,1fr);gap:16px}
  .hx-fab-ph{max-width:240px}
  .hx-seasons{grid-template-columns:minmax(0,1fr)}
  .hx-kinds{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
  .hx-kinds h3{font-size:16px}
  .hx-case,.hx-case.is-flip{grid-template-columns:minmax(0,1fr);gap:20px;padding:26px 0}
  .hx-case.is-flip figure{order:0}
  .hx-case h3{font-size:22px}
  .hx-scope{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-big b{font-size:52px}
  /* 표 → 카드(가로 스크롤 없음) */
  .hx-tbl thead{display:none}
  .hx-tbl,.hx-tbl tbody,.hx-tbl tr,.hx-tbl td{display:block;width:100%}
  .hx-tbl tr{padding:10px 0;border-bottom:1px solid var(--hair)}
  .hx-tbl td{display:grid;grid-template-columns:78px 1fr;gap:10px;padding:3px 0;border:0}
  .hx-tbl td.is-nil{display:none}   /* 휴대폰 세로 목록에서 빈 칸(-) 줄은 숨김: '비운 칸은 지면에 보이지 않는다' */
  .hx-tbl td::before{content:attr(data-l);font:500 10.5px/2 var(--sans);letter-spacing:.12em;color:var(--ink2)}
  .hx-tbl.is-sm td{padding:3px 0}
}
.hx-cat .hx-tbl{table-layout:fixed}
.hx-cat .hx-tbl th,.hx-cat .hx-tbl td{padding-right:10px}
@media (max-width:760px){.hx-cat .hx-tbl{table-layout:auto}}
.hx-comp i:nth-child(2){background:#4d5d75}.hx-comp i:nth-child(3){background:#8d9bb0;color:#1B2438}
.hx-comp small{opacity:1}
@media (max-width:760px){.hx-kv.is-col>div{flex-direction:column;gap:0;margin-bottom:4px}.hx-kv.is-col dt{flex:none}}
/* 라벨 종류: 사진 있는 카드 수에 맞춘 격자 · 사진 없는 종류는 아래 표 */
.hx-kinds[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 20px}
.hx-kinds[data-n="5"]{grid-template-columns:repeat(6,minmax(0,1fr))}.hx-kinds[data-n="5"]>article{grid-column:span 2}.hx-kinds[data-n="5"]>article:nth-child(-n+2){grid-column:span 3}
.hx-more-h{margin-top:44px}
/* 광고 안내 줄: 점(·) 없이 항목 사이 간격으로 나눈다(줄바꿈 때 점이 홀로 남지 않게) */
.h2-adnote{display:flex;flex-wrap:wrap;gap:4px 18px}
.h2-adnote>*{white-space:nowrap}
@media (max-width:1000px){.hx-kinds[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.hx-kinds[data-n="5"]{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-kinds[data-n="5"]>article,.hx-kinds[data-n="5"]>article:nth-child(-n+2){grid-column:auto}.hx-kinds[data-n="5"]>article:first-child{grid-column:1/-1}}
/* 업체홈 디자인 점검(2026-11-01): 첫 화면 '믿을 근거' 한 줄(업력·규모·후기·확인된 인증) */
.h2-trust{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:20px;font:500 12.5px/1.6 var(--sans);letter-spacing:.08em;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.h2-trust span{white-space:nowrap;padding:0 16px;border-left:1px solid rgba(255,255,255,.45)}
.h2-trust span:first-child{padding-left:0;border-left:0}
.h2-hero.no-ph .h2-trust span{border-left-color:var(--hair)}
@media (max-width:760px){
  .h2-trust{margin-top:12px;font-size:11.5px;letter-spacing:.04em}
  .h2-trust span{padding:0 10px}
  /* 원단 도감: 사진을 폭 가득(3:2)으로, 숫자 4칸을 한 줄에 — 빈 오른쪽 여백과 홀로 남는 '최소 주문' 줄을 없앤다 */
  .hx-fab-ph{max-width:none}
  .hx-fab-ph .hx-tile{aspect-ratio:3/2 !important}
  .hx-kv.is-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 10px}
  .hx-kv.is-4 dd b{font-size:24px}
  .hx-kv.is-4 dd{font-size:12.5px;white-space:nowrap}
  /* 부자재 규격표: 한 규격 = 이름 한 줄 + 크기·소재·마감 3칸(4줄 → 2줄) */
  .hx-cat .hx-tbl tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 12px}
  .hx-cat .hx-tbl td{display:block;padding:0}
  .hx-cat .hx-tbl td::before{display:block;line-height:1.7}
  .hx-cat .hx-tbl td:first-child{grid-column:1/-1;font-weight:500;margin-bottom:2px}
  .hx-cat .hx-tbl td:first-child::before{display:none}
  .hx-cat .hx-tbl td.is-nil{display:none}
  /* 혼용률 막대: 휴대폰 폭에서 15% 미만 칸은 섬유 이름을 숨기고 숫자만(잘린 글자 방지 · 이름은 아래 스펙 표와 aria-label 에 있음) */
  .hx-comp i[style^="flex:7 "] small,.hx-comp i[style^="flex:8 "] small,.hx-comp i[style^="flex:9 "] small,.hx-comp i[style^="flex:10 "] small,.hx-comp i[style^="flex:11 "] small,.hx-comp i[style^="flex:12 "] small,.hx-comp i[style^="flex:13 "] small,.hx-comp i[style^="flex:14 "] small{display:none}
  /* 두 칸 표(수량별 납기·공임 범위)는 휴대폰에서도 표 그대로(한 줄 = 두 값 · 4줄 카드 → 1줄) */
  .hx-tbl.is-2c{display:table;width:100%}
  .hx-tbl.is-2c thead{display:table-header-group}
  .hx-tbl.is-2c tbody{display:table-row-group}
  .hx-tbl.is-2c tr{display:table-row;padding:0}
  .hx-tbl.is-2c th,.hx-tbl.is-2c td{display:table-cell;width:50%;padding:10px 10px 10px 0;border-bottom:1px solid var(--hair)}
  .hx-tbl.is-2c td::before{content:none}
  /* 후기 요약: 설명 줄이 다음 줄로 내려가면 왼쪽 들여쓰기 없이 평점 숫자와 맞춘다 */
  .h2-rv-sum span:last-child{flex-basis:100%;margin-left:0}
}