@charset "utf-8";
/* ═══════════════════════════════════════════════
   42 RAW — 모던 인더스트리얼 셀프빌딩/D2C 건자재 스토어 (리뉴얼)
   컨셉: 콘크리트 그레이 + 비비드 오렌지 + 그리드 라인 / 큰 산세리프 + 모노스페이스 액센트
        포털 종합몰을 탈피한 비주얼·콘텐츠 중심 D2C (기존 42 종합몰과 완전히 다른 구도)
   ═══════════════════════════════════════════════ */
:root{
  --conc:#e9e7e2;
  --conc-2:#ddd9d1;
  --paper:#f4f2ee;
  --ink:#1a1a18;
  --ink-2:#5c5a54;
  --ink-3:#8e8b82;
  --line:#cdc8bd;
  --line-2:#bbb5a8;
  --orange:#ff5b1e;
  --orange-deep:#e0440c;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif;color:var(--ink);background:var(--conc);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit}
.mono{font-family:'Space Mono','SFMono-Regular',ui-monospace,Menlo,Consolas,monospace}
.wrap{max-width:1320px;margin:0 auto;padding:0 32px}

html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.on{opacity:1;transform:none}

/* ── 상단 공지 바 ── */
.ticker{background:var(--ink);color:var(--conc);overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--ink)}
.ticker .track{display:inline-flex;gap:48px;padding:9px 0;animation:tick 30s linear infinite;font-size:12px;font-weight:600;letter-spacing:.04em}
.ticker .track .o{color:var(--orange)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ── 헤더 ── */
.hd{position:sticky;top:0;z-index:100;background:var(--conc);border-bottom:1px solid var(--ink)}
.hd-in{max-width:1320px;margin:0 auto;padding:0 32px;display:flex;align-items:stretch;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:900;letter-spacing:-.04em;padding-right:28px;border-right:1px solid var(--line);margin-right:8px}
.logo .sq{width:24px;height:24px;background:var(--orange);display:inline-block;clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%)}
.gnb{display:flex;align-items:stretch}
.gnb a{display:flex;align-items:center;padding:0 18px;font-size:13.5px;font-weight:600;color:var(--ink-2);position:relative;transition:color .2s}
.gnb a:hover,.gnb a.active{color:var(--ink)}
.gnb a.active::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:3px;background:var(--orange)}
.hd-r{margin-left:auto;display:flex;align-items:stretch}
.hd-r a,.hd-r button{display:flex;align-items:center;gap:7px;padding:0 18px;font-size:13px;font-weight:600;border-left:1px solid var(--line);color:var(--ink-2);position:relative}
.hd-r a:hover{color:var(--ink)}
.hd-r .n{position:absolute;top:18px;right:8px;background:var(--orange);color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:0;display:flex;align-items:center;justify-content:center;padding:0 4px}
.hd-r .cart-cta{background:var(--ink);color:var(--conc)}
.m-burger{display:none}

#mNav{position:fixed;inset:0;background:var(--conc);z-index:300;padding:80px 32px;transform:translateX(100%);transition:transform .35s cubic-bezier(.7,0,.2,1)}
#mNav.open{transform:none}
#mNav a{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;padding:14px 0;border-bottom:1px solid var(--line)}
#mNav .m-close{position:absolute;top:22px;right:26px;font-size:28px}

/* ── 히어로 ── */
.hero{border-bottom:1px solid var(--ink)}
.hero-grid{display:grid;grid-template-columns:1.15fr 1fr}
.hero-grid>*{min-width:0}
.hero .tx{padding:70px 56px 56px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--ink)}
.hero .tag{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--orange-deep);display:flex;align-items:center;gap:10px}
.hero .tag::before{content:"";width:28px;height:1px;background:var(--orange)}
.hero h1{font-size:clamp(40px,5.6vw,82px);font-weight:900;line-height:.98;letter-spacing:-.04em;margin:24px 0 0}
.hero h1 .o{color:var(--orange)}
.hero .sub{margin-top:24px;font-size:16px;color:var(--ink-2);max-width:440px;line-height:1.85}
.hero .cta{margin-top:34px;display:flex;gap:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:13.5px;font-weight:700;letter-spacing:.02em;padding:16px 30px;transition:.2s;border:1px solid var(--ink)}
.btn-ink{background:var(--ink);color:var(--conc)}
.btn-ink:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-line{background:transparent;color:var(--ink);border-left:0}
.btn-line:hover{background:var(--ink);color:var(--conc)}
.btn-orange{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-deep);border-color:var(--orange-deep)}
.hero .stats{margin-top:44px;display:flex;gap:0;border:1px solid var(--line)}
.hero .stats .s{flex:1;padding:16px 18px;border-right:1px solid var(--line)}
.hero .stats .s:last-child{border-right:0}
.hero .stats .s b{font-size:22px;font-weight:900;display:block;letter-spacing:-.02em}
.hero .stats .s span{font-size:11.5px;color:var(--ink-3);font-family:'Space Mono',monospace}
.hero .ph{position:relative;overflow:hidden;min-height:480px}
.hero .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .ph .badge{position:absolute;bottom:0;left:0;background:var(--orange);color:#fff;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;padding:10px 18px;letter-spacing:.04em}

/* ── 카테고리 스트립 (가로) ── */
.catrow{border-bottom:1px solid var(--ink);background:var(--paper)}
.catrow-in{max-width:1320px;margin:0 auto;display:flex;overflow-x:auto;scrollbar-width:none}
.catrow-in::-webkit-scrollbar{display:none}
.catrow-in a{flex:0 0 auto;padding:18px 26px;font-size:13.5px;font-weight:700;border-right:1px solid var(--line);display:flex;align-items:center;gap:9px;white-space:nowrap;transition:.2s}
.catrow-in a:hover{background:var(--ink);color:var(--conc)}
.catrow-in a .em{font-size:17px}

/* ── 섹션 헤더 ── */
.sec{padding:90px 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:44px;padding-bottom:20px;border-bottom:1px solid var(--ink)}
.sec-h .lab{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--orange-deep)}
.sec-h h2{font-size:clamp(28px,3.6vw,46px);font-weight:900;letter-spacing:-.03em;line-height:1.02;margin-top:10px}
.sec-h .more{font-family:'Space Mono',monospace;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:gap .25s}
.sec-h .more:hover{gap:14px;color:var(--orange-deep)}

/* ── 제품 그리드 (인더스트리얼) ── */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-bottom:0}
.pc{display:block;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);position:relative;transition:.2s}
.pc:hover{background:#fff;z-index:2;box-shadow:0 0 0 1px var(--ink)}
.pc .ph{aspect-ratio:1/1;overflow:hidden;position:relative;background:var(--conc-2)}
.pc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pc:hover .ph img{transform:scale(1.05)}
.pc .flag{position:absolute;top:0;left:0;background:var(--ink);color:var(--conc);font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;padding:5px 10px;letter-spacing:.04em;z-index:2}
.pc .flag.o{background:var(--orange);color:#fff}
.pc .bd{padding:18px 18px 20px}
.pc .br{font-family:'Space Mono',monospace;font-size:11px;color:var(--ink-3);letter-spacing:.04em}
.pc h3{font-size:15px;font-weight:700;line-height:1.4;margin:5px 0 0;min-height:42px}
.pc .pr{margin-top:12px;display:flex;align-items:baseline;gap:7px}
.pc .pr b{font-size:19px;font-weight:900;letter-spacing:-.02em}
.pc .pr .u{font-size:11.5px;color:var(--ink-3);font-family:'Space Mono',monospace}
.pc .pr .was{font-size:12px;color:var(--ink-3);text-decoration:line-through}
.pc .meta{margin-top:10px;font-size:11.5px;color:var(--ink-2);display:flex;justify-content:space-between;align-items:center}
.pc .meta .st{color:var(--orange-deep);font-weight:700}

/* ── 풀폭 비주얼 배너 (오렌지/다크) ── */
.fbn{position:relative;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden}
.fbn-grid{display:grid;grid-template-columns:1fr 1fr}
.fbn-grid>*{min-width:0}
.fbn .ph{position:relative;min-height:420px;overflow:hidden}
.fbn .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fbn .tx{padding:70px 60px;display:flex;flex-direction:column;justify-content:center;background:var(--ink);color:var(--conc)}
.fbn .tx.o{background:var(--orange);color:#fff}
.fbn .tx .lab{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;opacity:.85}
.fbn .tx h2{font-size:clamp(28px,3.6vw,48px);font-weight:900;letter-spacing:-.03em;line-height:1.04;margin:16px 0 16px}
.fbn .tx p{font-size:15px;opacity:.9;line-height:1.8;max-width:420px}
.fbn .tx .btn{margin-top:30px;width:fit-content;background:transparent;border-color:currentColor;color:inherit}
.fbn .tx .btn:hover{background:var(--conc);color:var(--ink);border-color:var(--conc)}
.fbn .tx.o .btn:hover{background:#fff;color:var(--orange)}

/* ── 가이드/저널 카드 ── */
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.jc{display:block;background:var(--paper);border:1px solid var(--line);transition:.2s}
.jc:hover{border-color:var(--ink);transform:translateY(-3px)}
.jc .ph{aspect-ratio:16/10;overflow:hidden;background:var(--conc-2)}
.jc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.jc:hover .ph img{transform:scale(1.04)}
.jc .bd{padding:22px 24px 26px}
.jc .cat{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--orange-deep)}
.jc h3{font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.35;margin:10px 0 8px}
.jc p{font-size:13.5px;color:var(--ink-2);line-height:1.7}
.jc .rt{margin-top:14px;font-family:'Space Mono',monospace;font-size:11.5px;color:var(--ink-3)}

/* ── 신뢰/혜택 그리드 ── */
.feats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ink)}
.feat{padding:34px 28px;border-right:1px solid var(--line)}
.feat:last-child{border-right:0}
.feat .num{font-family:'Space Mono',monospace;font-size:12px;color:var(--orange-deep)}
.feat h3{font-size:17px;font-weight:800;margin:12px 0 8px;letter-spacing:-.01em}
.feat p{font-size:13px;color:var(--ink-2);line-height:1.7}

/* ── 푸터 ── */
.footer{background:var(--ink);color:#a8a49b;border-top:1px solid var(--ink)}
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;border-bottom:1px solid #33312c}
.ft-top>div{padding:50px 32px;border-right:1px solid #33312c}
.ft-top>div:last-child{border-right:0}
.ft-top .lg{font-size:28px;font-weight:900;color:#fff;letter-spacing:-.03em}
.ft-top p{margin-top:14px;font-size:12.5px;line-height:1.8;color:#7c7970}
.ft-top h4{color:#fff;font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.06em;margin-bottom:14px}
.ft-top li{margin-bottom:9px;font-size:13.5px}
.ft-top li a:hover{color:var(--orange)}
.ft-top .tel{font-size:22px;font-weight:900;color:#fff;letter-spacing:-.02em}
.ft-bot{max-width:1320px;margin:0 auto;padding:22px 32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:#6b685f;font-family:'Space Mono',monospace}

/* ── 서브 헤드 ── */
.sub-head{border-bottom:1px solid var(--ink);background:var(--paper)}
.sub-head-in{max-width:1320px;margin:0 auto;padding:56px 32px 40px}
.sub-head .crumb{font-family:'Space Mono',monospace;font-size:12px;color:var(--ink-3)}
.sub-head h1{font-size:clamp(32px,4.4vw,58px);font-weight:900;letter-spacing:-.03em;margin-top:14px;line-height:1}
.sub-head p{margin-top:14px;color:var(--ink-2);font-size:15px;max-width:560px;line-height:1.8}

/* ── LIST(products) 필터 ── */
.shop{padding:40px 0 90px}
.fbar{display:flex;align-items:center;gap:0;border:1px solid var(--ink);margin-bottom:0;flex-wrap:wrap}
.fbar .fl{font-family:'Space Mono',monospace;font-size:12px;color:var(--ink-3);padding:0 18px;border-right:1px solid var(--line)}
.fbar button{padding:14px 18px;font-size:13px;font-weight:600;color:var(--ink-2);border-right:1px solid var(--line)}
.fbar button.on,.fbar button:hover{background:var(--ink);color:var(--conc)}
.fbar select{margin-left:auto;border:0;border-left:1px solid var(--line);padding:0 18px;height:48px;font-size:13px;background:var(--paper);font-weight:600}
.cnt{font-family:'Space Mono',monospace;font-size:12.5px;color:var(--ink-2);padding:18px 2px}
.cnt b{color:var(--ink)}
.paging{display:flex;justify-content:center;gap:0;margin-top:48px;border:1px solid var(--ink);width:fit-content;margin-left:auto;margin-right:auto}
.paging a{min-width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-size:13px;font-weight:700;border-right:1px solid var(--line)}
.paging a:last-child{border-right:0}
.paging a.on,.paging a:hover{background:var(--orange);color:#fff}

/* ── VIEW(product) ── */
.view{padding:0 0 90px}
.view-grid{display:grid;grid-template-columns:1.1fr 1fr;border:1px solid var(--ink);border-top:0}
.view-grid>*{min-width:0}
.vw-photo{position:relative;border-right:1px solid var(--ink);overflow:hidden;background:var(--conc-2)}
.vw-photo img{width:100%;aspect-ratio:1/1;object-fit:cover}
.vw-photo .flag{position:absolute;top:0;left:0;background:var(--orange);color:#fff;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;padding:7px 14px}
.vw{padding:48px 44px}
.vw .br{font-family:'Space Mono',monospace;font-size:12px;color:var(--ink-3)}
.vw h1{font-size:clamp(24px,2.8vw,34px);font-weight:900;letter-spacing:-.02em;margin-top:8px;line-height:1.15}
.vw .rate{margin-top:12px;font-size:13px;color:var(--ink-2)}
.vw .rate .st{color:var(--orange-deep);font-weight:700}
.vw-pr{margin:24px 0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vw-pr .now{font-size:34px;font-weight:900;letter-spacing:-.02em}
.vw-pr .u{font-size:13px;color:var(--ink-3);font-family:'Space Mono',monospace;margin-left:8px}
.vw-pr .sub{margin-top:6px;font-size:13px;color:var(--ink-2)}
.vw-spec{display:grid;gap:0;border:1px solid var(--line);font-size:13.5px}
.vw-spec .r{display:grid;grid-template-columns:120px 1fr;border-bottom:1px solid var(--line)}
.vw-spec .r:last-child{border-bottom:0}
.vw-spec .k{padding:11px 14px;background:var(--conc-2);font-weight:700;font-size:12.5px}
.vw-spec .v{padding:11px 14px;color:var(--ink-2)}
.qty-row{display:flex;align-items:center;gap:14px;margin-top:22px}
.qty{display:flex;border:1px solid var(--ink)}
.qty button{width:42px;height:46px;font-size:18px;background:var(--paper)}
.qty input{width:54px;text-align:center;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);font-size:15px;font-weight:800;background:var(--paper)}
.vw-cta{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:22px}
.vw-cta .btn{width:100%}
.vw-cta .btn+.btn{border-left:0}
.vw-tabs{border:1px solid var(--ink);border-top:0}
.vw-tabs .heads{display:flex;border-bottom:1px solid var(--ink)}
.vw-tabs .heads button{flex:1;padding:16px;font-size:13.5px;font-weight:700;color:var(--ink-2);border-right:1px solid var(--line)}
.vw-tabs .heads button:last-child{border-right:0}
.vw-tabs .heads button.on{background:var(--ink);color:var(--conc)}
.vw-tabs .pane{display:none;padding:34px 40px}
.vw-tabs .pane.on{display:block}
.vw-tabs .pane p{font-size:14px;color:var(--ink-2);line-height:1.9}
.vw-tabs .spec2{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:8px}
.vw-tabs .spec2 th,.vw-tabs .spec2 td{padding:12px 14px;border:1px solid var(--line);text-align:left}
.vw-tabs .spec2 th{background:var(--conc-2);font-weight:700;width:160px}
.rv{padding:18px 0;border-bottom:1px solid var(--line)}
.rv:last-child{border-bottom:0}
.rv .st{color:var(--orange-deep);font-weight:700;font-size:13px}
.rv p{font-size:14px;margin-top:6px}
.rv .who{font-size:12px;color:var(--ink-3);margin-top:6px;font-family:'Space Mono',monospace}

/* ── CART ── */
.cart{padding:40px 0 90px}
.cart-grid{display:grid;grid-template-columns:1fr 340px;gap:0;border:1px solid var(--ink)}
.cart-grid>*{min-width:0}
.ct-list{border-right:1px solid var(--ink)}
.ct-row{display:grid;grid-template-columns:84px 1fr 130px 130px 44px;gap:16px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.ct-row:last-child{border-bottom:0}
.ct-row img{width:84px;height:84px;object-fit:cover;background:var(--conc-2)}
.ct-row .nm{font-size:14px;font-weight:700}
.ct-row .op{font-size:12px;color:var(--ink-3);margin-top:3px;font-family:'Space Mono',monospace}
.ct-row .up{font-size:13.5px;color:var(--ink-2)}
.ct-row .ls{font-size:16px;font-weight:900}
.ct-row .rm{font-size:18px;color:var(--ink-3)}
.ct-side{padding:30px;background:var(--paper)}
.ct-side h3{font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.06em;margin-bottom:18px}
.ct-side .r{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-2);padding:8px 0}
.ct-side .r b{color:var(--ink);font-weight:700}
.ct-side .tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--ink);margin-top:12px;padding-top:16px}
.ct-side .tot .v{font-size:28px;font-weight:900;letter-spacing:-.02em}
.ct-side .btn{width:100%;margin-top:20px}

/* ── GUIDE / PROJECTS / JOURNAL 본문 ── */
.doc{padding:50px 0 90px}
.guide-steps{border:1px solid var(--ink)}
.gstep{display:grid;grid-template-columns:90px 1fr;border-bottom:1px solid var(--line)}
.gstep:last-child{border-bottom:0}
.gstep .no{padding:30px 0;text-align:center;font-family:'Space Mono',monospace;font-size:24px;font-weight:700;color:var(--orange);border-right:1px solid var(--line);background:var(--paper)}
.gstep .bd{padding:28px 32px}
.gstep h3{font-size:19px;font-weight:800;letter-spacing:-.01em}
.gstep p{margin-top:8px;font-size:14px;color:var(--ink-2);line-height:1.8}
.gstep .tools{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.gstep .tools span{font-family:'Space Mono',monospace;font-size:11.5px;border:1px solid var(--line);padding:4px 10px;color:var(--ink-2)}
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--ink);border-bottom:0}
.proj{position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;display:block}
.proj:nth-child(2n){border-right:0}
.proj .ph{aspect-ratio:16/10;overflow:hidden;background:var(--conc-2)}
.proj .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.proj:hover .ph img{transform:scale(1.05)}
.proj .bd{padding:24px 28px;background:var(--paper)}
.proj .cat{font-family:'Space Mono',monospace;font-size:11px;color:var(--orange-deep)}
.proj h3{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:8px 0 8px}
.proj p{font-size:13.5px;color:var(--ink-2);line-height:1.7}
.proj .used{margin-top:14px;display:flex;gap:7px;flex-wrap:wrap}
.proj .used span{font-size:11.5px;border:1px solid var(--line);padding:4px 10px;color:var(--ink-2)}

/* ── BULK(대량주문) ── */
.bulk-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid var(--ink)}
.bulk-grid>*{min-width:0}
.bulk-info{padding:48px 44px;border-right:1px solid var(--ink)}
.bulk-info h2{font-size:clamp(24px,3vw,38px);font-weight:900;letter-spacing:-.02em;line-height:1.1}
.bulk-info p{margin-top:16px;color:var(--ink-2);font-size:15px;line-height:1.85}
.bulk-info .perk{margin-top:28px;display:grid;gap:0;border:1px solid var(--line)}
.bulk-info .perk .p{display:flex;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);align-items:center}
.bulk-info .perk .p:last-child{border-bottom:0}
.bulk-info .perk .p .em{font-size:20px}
.bulk-info .perk .p b{font-size:14px;font-weight:700;display:block}
.bulk-info .perk .p span{font-size:12.5px;color:var(--ink-2)}
.bulk-form{padding:48px 44px;background:var(--paper)}
.fld{margin-bottom:18px}
.fld label{display:block;font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.04em;color:var(--ink-3);margin-bottom:8px}
.fld input,.fld select,.fld textarea{width:100%;background:var(--conc);border:1px solid var(--line);padding:13px 15px;font-size:14.5px;color:var(--ink);outline:0;transition:border-color .2s}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--orange)}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bulk-form .btn{width:100%;margin-top:4px}

/* ── ABOUT ── */
.about-hero{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);border-top:0}
.about-hero>*{min-width:0}
.about-hero .ph{overflow:hidden;border-right:1px solid var(--ink);min-height:420px;position:relative}
.about-hero .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-hero .tx{padding:56px 48px;display:flex;flex-direction:column;justify-content:center}
.about-hero .tx h2{font-size:clamp(26px,3.2vw,42px);font-weight:900;letter-spacing:-.02em;line-height:1.12}
.about-hero .tx p{margin-top:18px;color:var(--ink-2);font-size:15px;line-height:1.9}

/* ── 반응형 ── */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .hero .tx{border-right:0;border-bottom:1px solid var(--ink);padding:48px 32px}
  .hero .ph{min-height:320px}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .fbn-grid,.bulk-grid,.about-hero,.view-grid{grid-template-columns:1fr}
  .fbn .ph{min-height:280px}
  .vw-photo{border-right:0;border-bottom:1px solid var(--ink)}
  .jgrid{grid-template-columns:repeat(2,1fr)}
  .feats{grid-template-columns:1fr 1fr}
  .feat:nth-child(2n){border-right:0}
  .proj-grid{grid-template-columns:1fr}
  .proj{border-right:0}
  .cart-grid{grid-template-columns:1fr}
  .ct-list{border-right:0;border-bottom:1px solid var(--ink)}
  .ft-top{grid-template-columns:1fr 1fr}
  .bulk-info{border-right:0;border-bottom:1px solid var(--ink)}
  .about-hero .ph{border-right:0;border-bottom:1px solid var(--ink)}
}
@media (max-width:680px){
  .wrap{padding:0 18px}
  .gnb{display:none}
  .hd-r .lbl{display:none}
  .m-burger{display:flex;align-items:center;padding:0 16px;font-size:22px;border-left:1px solid var(--line)}
  .sec{padding:60px 0}
  .pgrid{grid-template-columns:1fr 1fr}
  .jgrid{grid-template-columns:1fr}
  .feats{grid-template-columns:1fr}
  .feat{border-right:0;border-bottom:1px solid var(--line)}
  .fr2{grid-template-columns:1fr}
  .ct-row{grid-template-columns:64px 1fr;gap:12px}
  .ct-row .up,.ct-row .ls{grid-column:2}
  .ct-row .rm{position:absolute;right:18px}
  .ft-top{grid-template-columns:1fr}
  .ft-top>div{border-right:0;border-bottom:1px solid #33312c}
  .gstep{grid-template-columns:60px 1fr}
}
@media (prefers-reduced-motion:reduce){ .reveal{transition:none}.ticker .track{animation:none} }