/* (주)세광석재 — Stone White · 왼쪽 세로 메뉴 레이아웃 (이성·이성산업과 다른 구조) */
:root{
  --side:268px;
  --bg:#fbfaf8; --paper:#f4f1ed; --paper-2:#ebe6e0; --stone:#d9d2c9;
  --ink:#1e1c1a; --ink-2:#55504a; --muted:#8d867f; --line:#e2dcd5;
  --acc:#e8590c; --acc-d:#c84a07;
  --char:#1e1c1a; --char-2:#2a2724; --char-line:#3a3632;
  --pad:clamp(20px,5vw,72px);
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  --serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman","Noto Serif KR",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);font-size:16px;line-height:1.7;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{line-height:1.25;letter-spacing:-.025em}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
button{font:inherit;cursor:pointer;color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:var(--char);color:#fff;padding:8px 14px;z-index:300}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.serif{font-family:var(--serif)}
em.o{font-style:normal;color:var(--acc)}

/* ============ 왼쪽 세로 메뉴 ============ */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--side);z-index:100;background:var(--paper);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:34px 30px 28px;overflow-y:auto}
.rail .brand img{width:148px;height:auto}
.rail .brand small{display:block;margin-top:10px;font-size:12px;color:var(--muted);letter-spacing:.02em}
.rail nav{margin-top:52px}
.rail nav li a{display:grid;grid-template-columns:30px 1fr;align-items:baseline;padding:9px 0;font-weight:600;font-size:16px;color:var(--ink-2);transition:color .15s}
.rail nav li a i{font-family:var(--serif);font-style:italic;font-weight:500;font-size:15px;color:var(--muted)}
.rail nav li a:hover{color:var(--ink)}
.rail nav li a[aria-current="page"]{color:var(--acc)}
.rail nav li a[aria-current="page"] i{color:var(--acc)}
.rail-foot{margin-top:auto;padding-top:34px;font-size:13px;color:var(--muted)}
.rail-foot .tel{display:block;font-family:var(--serif);font-size:25px;font-weight:600;color:var(--ink);letter-spacing:.01em;line-height:1.2}
.rail-foot .tel:hover{color:var(--acc)}
.rail-foot .mail{display:block;margin-top:2px}
.rail-foot .mail:hover{color:var(--ink)}
.rail-group{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.rail-group b{display:block;font-family:var(--serif);font-style:italic;font-weight:500;font-size:14px;color:var(--muted);margin-bottom:6px}
.rail-group a{display:flex;justify-content:space-between;align-items:center;padding:4px 0;color:var(--ink-2);font-weight:500}
.rail-group a:hover{color:var(--acc)}
.rail-group svg{width:12px;height:12px}
.topbar{display:none}
.main,.site-foot{margin-left:var(--side)}

/* ============ 공통 ============ */
.sec{padding:128px var(--pad)}
.sec.paper{background:var(--paper)}
.sec.dark{background:var(--char);color:#f4f1ed}
.inner{max-width:1240px}
.s-head{display:flex;align-items:baseline;gap:14px;padding-top:18px;border-top:1px solid var(--ink);margin-bottom:56px}
.dark .s-head{border-top-color:rgba(255,255,255,.6)}
.s-head .ix{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--acc)}
.s-head .lb{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.s-head .rt{margin-left:auto;font-size:14px}
.h-xl{font-size:clamp(30px,3.2vw,46px);font-weight:700;letter-spacing:-.035em;line-height:1.25}
.lead{font-size:18px;color:var(--ink-2);max-width:40em}
.arrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.arrow::after{content:"";width:34px;height:1px;background:currentColor;transition:width .2s}
.arrow:hover{color:var(--acc)}
.arrow:hover::after{width:52px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;font-weight:600;font-size:15px;border:1px solid var(--ink);transition:.18s}
.btn svg{width:16px;height:16px}
.btn:hover{background:var(--ink);color:#fff}
.btn.acc{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.acc:hover{background:var(--acc-d);border-color:var(--acc-d)}
.btn.w{border-color:rgba(255,255,255,.5);color:#fff}
.btn.w:hover{background:#fff;color:var(--ink)}

/* ============ 메인 히어로 (전체화면 슬라이드) ============ */
.hero{position:relative;height:100vh;min-height:640px;max-height:1040px;overflow:hidden;background:#2a2724;color:#fff}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.hero .slide.on{opacity:1}
.hero .slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 9s linear}
.hero .slide.on img{transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.32) 0%,rgba(20,18,16,.08) 30%,rgba(20,18,16,.35) 58%,rgba(20,18,16,.86) 100%);pointer-events:none}
.hero .top{position:absolute;z-index:2;left:var(--pad);right:var(--pad);top:36px;display:flex;justify-content:space-between;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.hero .count{font-family:var(--serif);font-style:italic;letter-spacing:.04em;text-transform:none;font-size:16px}
.hero .count b{font-weight:600;color:#fff}
.hero .in{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:48px}
.display{font-family:var(--serif);font-weight:500;font-size:clamp(52px,7.4vw,118px);line-height:.96;letter-spacing:-.015em}
.display em{font-style:italic;font-weight:400;color:#ffb48a}
.hero h1{margin-top:26px;font-size:clamp(18px,1.6vw,23px);font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:14px}
.hero h1::before{content:"";width:40px;height:2px;background:var(--acc)}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:44px;border-top:1px solid rgba(255,255,255,.32)}
.hero-stats li{padding:18px 18px 0 0}
.hero-stats b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(30px,3vw,46px);line-height:1}
.hero-stats b small{font-family:var(--sans);font-size:14px;font-weight:500;margin-left:4px;color:rgba(255,255,255,.75)}
.hero-stats span{display:block;font-size:13.5px;color:rgba(255,255,255,.72);margin-top:8px}
.hero .cap{position:absolute;z-index:2;right:var(--pad);bottom:calc(48px + 132px);font-size:12.5px;color:rgba(255,255,255,.7);text-align:right}

/* ============ 01 소개 ============ */
.intro{display:grid;grid-template-columns:repeat(12,1fr);gap:40px}
.intro .stmt{grid-column:3/13;font-size:clamp(23px,2.35vw,34px);font-weight:600;line-height:1.55;letter-spacing:-.03em;color:var(--muted)}
.intro .stmt b{color:var(--ink);font-weight:700}
.intro .meta{grid-column:3/13;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:20px;padding-top:36px;border-top:1px solid var(--line)}
.intro .meta dt{font-family:var(--serif);font-style:italic;color:var(--acc);font-size:16px}
.intro .meta dd{margin:6px 0 0;color:var(--ink-2);font-size:15.5px}
.intro .act{grid-column:3/13;margin-top:8px}

/* ============ 02 품목 목록 + 미리보기 ============ */
.plist{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:start}
.plist ol{border-bottom:1px solid var(--line)}
.plist li a{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:12px;padding:20px 8px 20px 0;border-top:1px solid var(--line);transition:padding .25s,background .25s}
.plist li a .n{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--muted)}
.plist li a .t{font-size:clamp(20px,1.9vw,27px);font-weight:700;letter-spacing:-.03em}
.plist li a .t small{display:block;font-family:var(--serif);font-style:italic;font-weight:500;font-size:16px;color:var(--muted);letter-spacing:0;margin-top:2px}
.plist li a .go{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.2s}
.plist li a .go svg{width:15px;height:15px}
.plist li a .th{display:none}
.plist li a:hover,.plist li a.on{padding-left:14px}
.plist li a:hover .t,.plist li a.on .t{color:var(--acc)}
.plist li a:hover .go,.plist li a.on .go{background:var(--acc);border-color:var(--acc);color:#fff}
.preview{position:sticky;top:40px;margin:0}
.preview .ph{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.preview img{width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.preview figcaption{display:flex;justify-content:space-between;margin-top:14px;font-size:14px;color:var(--muted)}
.preview figcaption b{color:var(--ink);font-weight:600}

/* ============ 마키 ============ */
.marquee{background:var(--char);color:#f4f1ed;overflow:hidden;padding:30px 0;border-block:1px solid var(--char-line)}
.marquee .track{display:flex;width:max-content;animation:mq 60s linear infinite}
.marquee span{font-family:var(--serif);font-style:italic;font-size:clamp(28px,3vw,44px);white-space:nowrap;padding-right:28px}
.marquee span::after{content:"◆";font-style:normal;font-size:.4em;color:var(--acc);margin-left:28px;vertical-align:middle}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============ 03 석종 라이브러리 ============ */
.lib-head{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:end;margin-bottom:44px}
.big-n{font-family:var(--serif);font-weight:400;font-size:clamp(110px,14vw,210px);line-height:.8;letter-spacing:-.04em;color:var(--ink)}
.big-n sup{font-size:.22em;font-style:italic;color:var(--acc);vertical-align:top;margin-left:6px;letter-spacing:0}
.lib{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;margin:0 calc(var(--pad) * -1)}
.lib figure{position:relative;margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--paper-2)}
.lib img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.lib figure:hover img{transform:scale(1.08)}
.lib figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;font-size:13px;font-weight:600;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);opacity:0;transition:opacity .25s}
.lib figure:hover figcaption{opacity:1}
.lib-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:30px;color:var(--muted);font-size:14.5px}

/* ============ 04 공정 ============ */
.proc{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.proc article{display:flex;flex-direction:column}
.proc .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.proc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.proc article:hover .ph img{transform:scale(1.04)}
.proc .ph i{position:absolute;left:22px;bottom:12px;font-family:var(--serif);font-style:normal;font-weight:400;font-size:96px;line-height:1;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.proc h3{font-size:23px;font-weight:700;margin-top:24px}
.proc p{color:var(--ink-2);font-size:15.5px;margin-top:8px}
.proc .fact{margin-top:auto;padding-top:20px;display:flex;align-items:baseline;gap:8px;border-top:1px solid var(--line);margin-top:22px}
.proc .fact b{font-family:var(--serif);font-size:34px;font-weight:600;line-height:1}
.proc .fact span{font-size:14px;color:var(--muted)}

/* ============ 05 시공사례 ============ */
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(160px,auto);gap:12px}
.mosaic .case{grid-column:span 4}
.mosaic .case:nth-child(1){grid-column:span 7;grid-row:span 2}
.mosaic .case:nth-child(2),.mosaic .case:nth-child(3){grid-column:span 5}
.case{position:relative;margin:0;overflow:hidden;background:var(--paper-2)}
.case button{all:unset;display:block;width:100%;height:100%;cursor:zoom-in}
.case .ph{height:100%;min-height:240px}
.case img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.case:hover img{transform:scale(1.04)}
.case figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 16px;background:linear-gradient(to top,rgba(20,18,16,.72),transparent);color:#fff;pointer-events:none}
.case .cat{display:block;font-family:var(--serif);font-style:italic;font-size:15px;color:#ffc19c}
.case .ttl{display:block;font-weight:600;font-size:15.5px}
.case[hidden]{display:none}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cgrid .case .ph{aspect-ratio:4/3;min-height:0;height:auto}

/* ============ 06 실적 (다크) ============ */
.recs{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:start}
.recs .big-n{color:#f4f1ed}
.recs .unit{display:block;margin-top:18px;font-size:17px;color:rgba(255,255,255,.7)}
.clients{margin-top:44px;font-size:clamp(17px,1.5vw,21px);font-weight:600;line-height:1.9;color:rgba(255,255,255,.5)}
.clients b{color:#f4f1ed;font-weight:600}
.clients i{font-style:normal;color:var(--acc);margin:0 10px;font-weight:400}
.recs .act{margin-top:40px;display:flex;gap:10px;flex-wrap:wrap}
.rlist li{display:grid;grid-template-columns:76px 1fr auto;gap:16px;align-items:baseline;padding:18px 0;border-top:1px solid var(--char-line)}
.rlist li:last-child{border-bottom:1px solid var(--char-line)}
.rlist .d{font-family:var(--serif);font-style:italic;font-size:17px;color:#ffb48a}
.rlist .n{font-weight:600}
.rlist .n small{display:block;font-weight:400;font-size:13.5px;color:rgba(255,255,255,.55)}
.rlist .k{font-size:13px;color:rgba(255,255,255,.5);white-space:nowrap}

/* ============ 07 그룹사 (큰 행) ============ */
.grows li a,.grows li div{display:grid;grid-template-columns:54px 1.1fr 1fr auto;gap:16px;align-items:center;padding:28px 0;border-top:1px solid var(--line)}
.grows li:last-child>*{border-bottom:1px solid var(--line)}
.grows .n{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--muted)}
.grows .t{font-size:clamp(24px,2.4vw,34px);font-weight:700;letter-spacing:-.03em}
.grows .d{color:var(--ink-2);font-size:15px}
.grows .d b{display:block;color:var(--ink);font-weight:600}
.grows .go{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;white-space:nowrap}
.grows .go svg{width:14px;height:14px}
.grows a:hover .t{color:var(--acc)}
.grows .here .go{color:var(--acc)}

/* ============ 문의 ============ */
.talk{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:end}
.talk .display{color:var(--ink);font-size:clamp(64px,8vw,132px)}
.talk .display em{color:var(--acc)}
.talk p.k{margin-top:24px;font-size:17px;color:var(--ink-2)}
.talk dl{border-top:1px solid var(--ink)}
.talk dl div{display:grid;grid-template-columns:90px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.talk dt{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:16px}
.talk dd{margin:0;font-weight:500}
.talk dd.tel a{font-family:var(--serif);font-size:38px;font-weight:600;line-height:1}
.talk dd.tel a:hover{color:var(--acc)}
.talk .act{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

/* ============ 푸터 ============ */
.site-foot{background:var(--char);color:rgba(255,255,255,.6);font-size:14px;padding:72px var(--pad) 40px}
.site-foot .fg{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px;padding-bottom:44px;border-bottom:1px solid var(--char-line)}
.site-foot .logo img{width:170px}
.site-foot .fg p{margin-top:18px;line-height:1.85}
.site-foot h4{font-family:var(--serif);font-style:italic;font-weight:500;font-size:17px;color:#f4f1ed;margin-bottom:12px}
.site-foot .fg li a{display:inline-flex;align-items:center;gap:6px;padding:3px 0}
.site-foot .fg li a:hover{color:#fff}
.site-foot .fg svg{width:12px;height:12px}
.site-foot .bt{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;font-size:13px;color:rgba(255,255,255,.4)}
.site-foot .bt a:hover{color:#fff}

/* ============ 서브 페이지 머리 ============ */
.ph-head{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:end;padding:120px var(--pad) 64px;background:var(--bg)}
.ph-head .en{font-family:var(--serif);font-weight:400;font-size:clamp(64px,9vw,148px);line-height:.85;letter-spacing:-.03em}
.ph-head .en em{font-style:italic;color:var(--acc)}
.ph-head h1{font-size:clamp(26px,2.5vw,36px);font-weight:700}
.ph-head p{margin-top:12px;color:var(--ink-2);font-size:16.5px}
.crumb{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;font-size:13px;color:var(--muted)}
.crumb li+li::before{content:"—";margin-right:8px;opacity:.6}
.crumb a:hover{color:var(--ink)}
.banner{margin:0;height:min(58vh,620px);overflow:hidden;background:var(--paper-2)}
.banner img{width:100%;height:100%;object-fit:cover}
.tabs{position:sticky;top:0;z-index:20;background:rgba(251,250,248,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:0 var(--pad)}
.tabs ul{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none}
.tabs a{display:block;padding:18px 0;font-size:14.5px;font-weight:600;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--acc)}

/* ============ 품목 상세 ============ */
.pd{display:grid;grid-template-columns:repeat(12,1fr);gap:40px}
.pd .txt{grid-column:1/8}
.pd .txt p{font-size:19px;line-height:1.75;color:var(--ink-2)}
.pd .txt p+p{margin-top:16px}
.pd .side{grid-column:9/13}
.pd .side dl{border-top:1px solid var(--ink)}
.pd .side dt{font-family:var(--serif);font-style:italic;color:var(--acc);font-size:16px;padding-top:16px}
.pd .side dd{margin:4px 0 0;padding-bottom:16px;border-bottom:1px solid var(--line);font-weight:500;font-size:15px}
.pd .side .btn{margin-top:24px;width:100%;justify-content:center}
.pd-img{grid-column:1/13;margin-top:20px}
.pd-img img{width:100%;max-height:640px;object-fit:cover}
.items{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
.items figure{margin:0;background:#fff;padding:22px 18px 18px}
.items .ph{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.items .ph img{max-width:94%;max-height:94%;object-fit:contain}
.items .ph.cover img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.items figcaption{margin-top:14px;font-weight:600;font-size:15px;display:flex;justify-content:space-between;gap:8px}
.items figcaption small{font-family:var(--serif);font-style:italic;font-weight:500;font-size:15px;color:var(--muted)}
.swatch-all{display:grid;grid-template-columns:repeat(8,1fr);gap:18px 10px}
.swatch-all figure{margin:0}
.swatch-all .sw{aspect-ratio:1/1;overflow:hidden;background:var(--paper-2)}
.swatch-all img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.swatch-all figure:hover img{transform:scale(1.07)}
.swatch-all figcaption{font-size:13px;margin-top:8px;color:var(--ink-2);line-height:1.35}
.spec-wrap{overflow-x:auto}
.spec{border-top:1px solid var(--ink);font-size:15px;min-width:420px;background:#fff}
.spec th,.spec td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:center}
.spec thead th{font-weight:600;background:var(--paper)}
.spec td.l{text-align:left;font-weight:600}
.spec-note{font-size:14px;color:var(--muted);margin-top:14px}
.spec-2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.spec-2 h3{font-size:17px;margin-bottom:10px}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gal .case .ph{aspect-ratio:4/3;min-height:0;height:auto}
.faq li{display:grid;grid-template-columns:54px 1fr;gap:12px;padding:26px 0;border-top:1px solid var(--line)}
.faq li:last-child{border-bottom:1px solid var(--line)}
.faq .q{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--acc);line-height:1}
.faq b{font-size:18px}
.faq p{color:var(--ink-2);margin-top:6px}
.note{font-size:14px;color:var(--muted);margin-top:26px}
.note a{text-decoration:underline;text-underline-offset:3px}

/* ============ 회사소개 ============ */
.philo{font-size:clamp(28px,3.4vw,50px);font-weight:700;line-height:1.35;letter-spacing:-.04em}
.philo em{font-style:normal;color:var(--acc)}
.values{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:64px}
.values li{padding:28px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:64px 1fr;gap:12px}
.values .n{font-family:var(--serif);font-size:40px;line-height:1;color:var(--acc)}
.values b{font-size:19px}
.values p{color:var(--ink-2);margin-top:4px}
.two{display:grid;grid-template-columns:1fr 2.4fr;gap:56px}
.two h2{font-size:28px;font-weight:700}
.info-table{border-top:1px solid var(--ink)}
.info-table th,.info-table td{padding:17px 16px 17px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:16px}
.info-table th{width:170px;font-weight:500;color:var(--muted)}
.info-table td small{color:var(--muted)}
.tl li{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line)}
.tl li:last-child{border-bottom:1px solid var(--line)}
.tl .t{font-family:var(--serif);font-size:34px;line-height:1;font-weight:500}
.tl .e{font-weight:700;font-size:18px}
.tl .s{color:var(--muted);font-size:15px;margin-top:4px}
.org{display:flex;flex-direction:column;align-items:center}
.org .top{padding:16px 40px;background:var(--acc);color:#fff;font-weight:700;font-size:17px}
.org .vl{width:1px;height:34px;background:var(--stone)}
.org .mid{display:grid;grid-template-columns:1fr 1fr;gap:72px;position:relative;padding-top:34px}
.org .mid::before{content:"";position:absolute;top:0;left:25%;right:25%;height:1px;background:var(--stone)}
.org .grp{display:flex;flex-direction:column;align-items:center;position:relative}
.org .grp::before{content:"";position:absolute;top:-34px;left:50%;width:1px;height:34px;background:var(--stone)}
.org .grp>b{padding:14px 34px;background:var(--char);color:#fff;font-size:16px}
.org .teams{display:flex;gap:10px;margin-top:22px}
.org .teams span{padding:14px 18px;border:1px solid var(--stone);background:#fff;font-weight:600;font-size:14.5px;white-space:nowrap}

/* ============ 사업분야 ============ */
.chap{display:grid;grid-template-columns:repeat(12,1fr);gap:40px;align-items:start}
.chap .num{grid-column:1/3;font-family:var(--serif);font-size:clamp(80px,8vw,130px);line-height:.8;color:var(--acc)}
.chap .body{grid-column:3/9}
.chap .body h2{font-size:clamp(26px,2.6vw,38px);font-weight:700}
.chap .body p{margin-top:16px;font-size:17.5px;color:var(--ink-2)}
.chap dl{grid-column:9/13;border-top:1px solid var(--ink)}
.chap dl div{padding:14px 0;border-bottom:1px solid var(--line)}
.chap dt{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:15px}
.chap dd{margin:2px 0 0;font-weight:600}
.chap-img{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-top:56px}
.chap-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.chap-img img:first-child{aspect-ratio:auto}

/* ============ 실적 페이지 ============ */
.rsum{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-bottom:64px}
.rsum li{border-top:1px solid var(--ink);padding-top:18px}
.rsum b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(44px,4.4vw,68px);line-height:1}
.rsum b small{font-family:var(--sans);font-size:15px;font-weight:500;margin-left:4px;color:var(--muted)}
.rsum span{display:block;margin-top:8px;font-size:14px;color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;gap:4px 28px;border-bottom:1px solid var(--line);margin-bottom:40px}
.filters button{border:0;background:none;padding:15px 0;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--muted);font-weight:600;font-size:15px}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--acc)}
.filters .c{font-family:var(--serif);font-style:italic;font-weight:500;margin-left:5px;font-size:15px}
.rec-table{border-top:1px solid var(--ink);font-size:15px}
.rec-table th{font-weight:500;color:var(--muted);padding:14px 12px 14px 0;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.rec-table td{padding:15px 12px 15px 0;border-bottom:1px solid var(--line)}
.rec-table td.no{font-family:var(--serif);font-style:italic;color:var(--muted);white-space:nowrap}
.rec-table td.dt{font-family:var(--serif);font-size:17px;white-space:nowrap}
.rec-table td.cl{color:var(--ink-2)}
.rec-table td.nm{font-weight:600}
.rec-table td.kd{color:var(--muted);white-space:nowrap}
.rec-year td{font-family:var(--serif);font-size:30px;font-weight:500;padding:36px 0 10px;border-bottom:1px solid var(--ink)}
.rec-row[hidden],.rec-year[hidden]{display:none}

/* ============ 오시는 길 ============ */
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}
.contact dl{border-top:1px solid var(--ink)}
.contact dl div{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.contact dt{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:16px}
.contact dd{margin:0;font-weight:500}
.contact dd.tel a{font-family:var(--serif);font-size:40px;font-weight:600;line-height:1}
.map-box{background:var(--paper-2)}
.map-box iframe{display:block;width:100%;height:460px;border:0;filter:grayscale(.35)}
.map-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.map-links .btn{padding:12px 18px;font-size:14px}
.ask{margin-top:44px}
.ask h3{font-size:18px;margin-bottom:10px}
.ask li{display:grid;grid-template-columns:28px 1fr;padding:10px 0;border-top:1px solid var(--line);color:var(--ink-2)}
.ask li i{font-family:var(--serif);color:var(--acc)}

/* ============ 라이트박스 ============ */
.lightbox{position:fixed;inset:0;z-index:400;background:rgba(14,12,11,.95);display:none;align-items:center;justify-content:center;padding:56px 72px}
.lightbox.open{display:flex}
.lightbox figure{margin:0;max-width:1200px;width:100%;text-align:center}
.lightbox img{max-height:80vh;width:auto;max-width:100%;margin:0 auto}
.lightbox figcaption{color:#fff;margin-top:14px;font-weight:600}
.lightbox figcaption small{display:block;color:rgba(255,255,255,.6);font-weight:400;font-family:var(--serif);font-style:italic;font-size:15px}
.lb-btn{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;width:50px;height:50px;border-radius:50%;font-size:22px;display:flex;align-items:center;justify-content:center}
.lb-btn:hover{background:var(--acc)}
.lb-close{top:18px;right:18px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}

.nf{min-height:70vh;display:flex;flex-direction:column;justify-content:center;padding:80px var(--pad)}
.nf .display{color:var(--ink)}
.nf p{color:var(--muted);margin:16px 0 30px}

/* 스크롤 등장 */
html.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
html.js .rv.in{opacity:1;transform:none}

/* ============ 반응형 ============ */
@media (max-width:1280px){
  :root{--side:236px}
  .rail{padding:30px 24px 24px}
  .rail .brand img{width:132px}
  .lib{grid-template-columns:repeat(6,1fr)}
  .lib figure:nth-child(n+13){display:none}
}
@media (max-width:1100px){
  .main,.site-foot{margin-left:0}
  .topbar{display:flex;position:sticky;top:0;z-index:110;height:64px;align-items:center;gap:12px;padding:0 20px;background:rgba(244,241,237,.97);border-bottom:1px solid var(--line)}
  .topbar .brand img{width:118px}
  .topbar .tel{margin-left:auto;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%}
  .topbar .tel svg{width:17px;height:17px}
  .menu-btn{width:42px;height:42px;border:0;background:var(--ink);color:#fff;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
  .menu-btn span{display:block;width:16px;height:1.5px;background:#fff;transition:.2s}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(2.75px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-2.75px) rotate(-45deg)}
  .rail{top:64px;width:100%;border-right:0;padding:24px 24px 32px;transform:translateX(-100%);transition:transform .3s ease;visibility:hidden}
  .rail.open{transform:none;visibility:visible}
  .rail .brand{display:none}
  .rail nav{margin-top:0}
  .rail nav li a{font-size:24px;padding:12px 0;grid-template-columns:44px 1fr;border-bottom:1px solid var(--line)}
  .rail nav li a i{font-size:18px}
  body.nav-open{overflow:hidden}
  .hero{height:calc(100vh - 64px);min-height:600px}
  .hero .top{top:24px}
  .tabs{top:64px}
  .preview{display:none}
  .plist{grid-template-columns:1fr}
  .plist li a{grid-template-columns:40px 1fr 72px}
  .plist li a .go{display:none}
  .plist li a .th{display:block;width:72px;height:56px;object-fit:cover}
  .recs,.talk,.contact,.ph-head{grid-template-columns:1fr;gap:40px}
  .site-foot .fg{grid-template-columns:1fr 1fr}
  .site-foot .fg>div:first-child{grid-column:1/3}
  .pd .txt,.pd .side{grid-column:1/13}
  .items{grid-template-columns:repeat(3,1fr)}
  .swatch-all{grid-template-columns:repeat(6,1fr)}
  .chap .num,.chap .body,.chap dl{grid-column:1/13}
  .two{grid-template-columns:1fr;gap:28px}
}
@media (max-width:860px){
  .proc{grid-template-columns:1fr 1fr}
  .proc article:last-child{grid-column:1/3}
  .proc article:last-child .ph{aspect-ratio:16/9}
  .intro .stmt,.intro .meta,.intro .act{grid-column:1/13}
  .mosaic .case,.mosaic .case:nth-child(n){grid-column:span 6;grid-row:auto}
  .mosaic .case:nth-child(1){grid-column:span 12}
  .cgrid,.gal{grid-template-columns:1fr 1fr}
  .lib{grid-template-columns:repeat(4,1fr)}
  .lib figure:nth-child(n+9){display:none}
  .lib figcaption{opacity:1;font-size:12px;padding:20px 8px 6px}
  .values{grid-template-columns:1fr}
  .tl li{grid-template-columns:1fr;gap:8px}
  .rsum{grid-template-columns:1fr 1fr}
  .grows li a,.grows li div{grid-template-columns:40px 1fr auto}
  .grows .d{grid-column:2/4;grid-row:2}
  .lib-head{grid-template-columns:1fr;gap:16px}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .sec{padding:84px var(--pad)}
  .s-head{margin-bottom:36px}
  .hero{min-height:560px}
  .hero .in{bottom:28px}
  .hero-stats{grid-template-columns:1fr 1fr;margin-top:28px}
  .hero-stats li{padding:12px 10px 4px 0}
  .hero .cap{display:none}
  .display{font-size:clamp(42px,12vw,60px)}
  .intro .meta{grid-template-columns:1fr;gap:18px}
  .proc{grid-template-columns:1fr}
  .proc article:last-child{grid-column:auto}
  .proc .ph{aspect-ratio:4/3}
  .proc article:last-child .ph{aspect-ratio:4/3}
  .mosaic .case,.mosaic .case:nth-child(n){grid-column:span 12}
  .case .ph{min-height:220px}
  .cgrid,.gal{grid-template-columns:1fr}
  .lib{grid-template-columns:repeat(3,1fr)}
  .lib figure:nth-child(n+10){display:none}
  .rlist li{grid-template-columns:64px 1fr}
  .rlist .k{display:none}
  .grows .go span{display:none}
  .talk .display{font-size:64px}
  .site-foot .fg{grid-template-columns:1fr}
  .site-foot .fg>div:first-child{grid-column:auto}
  .ph-head{padding:64px var(--pad) 40px;gap:20px}
  .banner{height:38vh}
  .items{grid-template-columns:1fr 1fr}
  .items figure{padding:14px 10px 12px}
  .swatch-all{grid-template-columns:repeat(3,1fr)}
  .spec-2{grid-template-columns:1fr}
  .chap-img{grid-template-columns:1fr 1fr}
  .chap-img img:first-child{grid-column:1/3;aspect-ratio:16/10}
  .org .mid{gap:16px}
  .org .teams{flex-direction:column;gap:6px}
  .org .teams span{text-align:center;padding:10px 12px}
  .org .grp>b{padding:12px 20px}
  .info-table th{width:96px;font-size:14.5px}
  .rec-table thead{display:none}
  .rec-table,.rec-table tbody,.rec-table tr,.rec-table td{display:block}
  .rec-table tr.rec-row{display:grid;grid-template-columns:auto 1fr;column-gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
  .rec-table tr.rec-row[hidden]{display:none}
  .rec-table td{padding:0;border:0}
  .rec-table td.no{display:none}
  .rec-table td.dt{grid-row:1;grid-column:1;font-size:15px}
  .rec-table td.cl{grid-row:1;grid-column:2;font-size:13.5px;align-self:center}
  .rec-table td.nm{grid-column:1/3;margin-top:4px}
  .rec-table td.kd{grid-column:1/3;font-size:13px}
  .rec-year td{font-size:26px;padding-top:28px}
  .contact dd.tel a{font-size:32px}
  .map-box iframe{height:320px}
  .lightbox{padding:56px 8px}
  .lb-prev,.lb-next{top:auto;bottom:16px;transform:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .marquee .track{animation:none}
  html.js .rv{opacity:1;transform:none}
  .hero .slide img{transform:none}
}
.nw{white-space:nowrap}
/* 좁은 화면: 12칸 그리드 해제 */
@media (max-width:1100px){
  .pd{display:flex;flex-direction:column;gap:40px}
}
@media (max-width:860px){
  .intro,.chap{display:flex;flex-direction:column;gap:28px}
  .intro .meta{margin-top:0}
  .chap .num{line-height:1;margin-bottom:-8px}
  .chap-img{margin-top:36px}
}
@media (max-width:640px){
  .lib-foot{flex-direction:column;align-items:flex-start}
  .hero .top span:first-child{font-size:11px}
}
.recs>*,.talk>*,.contact>*,.plist>*,.two>*{min-width:0}
.spec-2 .spec{min-width:0}
@media (max-width:1100px){.recs{display:flex;flex-direction:column;align-items:stretch;gap:48px}}
@media (max-width:860px){.spec-2{grid-template-columns:1fr}}
@media (max-width:1366px) and (min-width:1101px){.rlist li{grid-template-columns:70px 1fr}.rlist .k{display:none}}

/* 2026-11-09 현장 사진: 시공사례 메이슨리 */
.masonry{columns:3;column-gap:12px}
.masonry .case{break-inside:avoid;margin:0 0 12px}
.masonry .case .ph{height:auto;min-height:0}
.masonry .case img{height:auto;display:block}
@media (max-width:1100px){.masonry{columns:2}}
@media (max-width:520px){.masonry{columns:1}}
.gal .case figcaption{padding:36px 16px 12px}

/* 2026-11-09 흰 배경 제품 이미지 */
.preview .ph.white{background:#fff;border:1px solid var(--line)}
.preview .ph.white img{object-fit:contain;padding:6%}
.side-ph{margin:0 0 24px}
.side-ph.white{background:#fff;border:1px solid var(--line)}