/* (주)진영STS — 스틸 다크. 건메탈 + 남색 바탕, 브러시드 메탈, 몰텐 코퍼 포인트 */
:root{
  --bg:#10141a; --bg-2:#151a22; --surface:#1b212b; --surface-2:#232b36; --surface-3:#2c3542;
  --line:#2b3441; --line-2:#3b4655; --line-3:#4b5768;
  --ink:#e9eef4; --ink-2:#9dabbb; --ink-3:#6e7c8d;
  --steel:#c5d0dd; --steel-2:#93a1b2; --steel-hi:#f2f6fa;
  --copper:#e08a4e; --copper-d:#c26a30; --copper-soft:rgba(224,138,78,.13);
  --navy:#26354b; --blue:#5b8cba; --blue-soft:rgba(91,140,186,.14);
  --r:12px; --r-lg:18px; --r-sm:8px; --r-pill:999px;
  --sh-1:0 1px 0 rgba(255,255,255,.045) inset, 0 2px 6px rgba(0,0,0,.35);
  --sh-2:0 1px 0 rgba(255,255,255,.06) inset, 0 10px 30px rgba(0,0,0,.45);
  --sh-3:0 20px 60px rgba(0,0,0,.6);
  --brushed:repeating-linear-gradient(96deg,rgba(255,255,255,.030) 0 1px,rgba(255,255,255,0) 1px 3px);
  --plate:linear-gradient(158deg,#252e3a 0%,#1a212a 48%,#12171e 100%);
  --plate-2:linear-gradient(160deg,#2b3542 0%,#1e2630 60%,#161c24 100%);
  --wrap:1220px; --head-h:74px;
  --font:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --ease:cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px;background:var(--bg)}
body{margin:0;color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.7;
  word-break:keep-all;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;
  background:
    radial-gradient(1100px 600px at 78% -8%,rgba(38,53,75,.65) 0%,transparent 62%),
    radial-gradient(800px 500px at 6% 102%,rgba(30,42,60,.5) 0%,transparent 60%),
    var(--brushed),
    linear-gradient(180deg,#131820 0%,#10141a 48%,#0d1117 100%);
  background-attachment:fixed}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{margin:0;line-height:1.3;letter-spacing:-.024em;font-weight:700}
ul{list-style:none;margin:0;padding:0}
button{font-family:inherit}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:20px}
.muted{color:var(--ink-2);font-size:13.5px}
.ic{flex:0 0 auto;vertical-align:-3px}
mark{background:rgba(224,138,78,.3);color:var(--steel-hi);padding:0 2px;border-radius:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--copper);color:#12161c;padding:10px 16px;border-radius:var(--r-sm);font-weight:700}
:focus-visible{outline:2px solid var(--copper);outline-offset:2px;border-radius:4px}
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
@media (prefers-reduced-motion:reduce){.reveal,.reveal.in{opacity:1;transform:none;transition:none}}

/* ── 배경 장식 ── */
.deco{display:block;width:100%;height:100%;color:var(--steel)}
.dx{position:absolute;pointer-events:none;z-index:0;color:var(--steel)}
.page-head,.site-foot{position:relative;overflow:hidden}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinr{to{transform:rotate(-360deg)}}

/* 페이지 헤더·푸터에만 은은하게 */
.ph-rings{width:240px;height:240px;right:3%;top:-72px;opacity:.055}
.ph-gear{width:132px;height:132px;right:19%;bottom:-44px;opacity:.07;animation:spin 44s linear infinite}
.ph-pipe{width:300px;height:113px;left:-80px;bottom:-26px;opacity:.04}
.f-gear{width:340px;height:340px;right:-120px;bottom:-150px;opacity:.05;animation:spin 160s linear infinite reverse}
.f-beam{width:300px;height:120px;left:-70px;top:-22px;opacity:.04}
.site-foot .wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.dx,.g{animation:none !important}}


/* ── 상단 유틸 ── */
.topbar{background:#0b0f14;color:#7d8b9c;font-size:12.5px;border-bottom:1px solid #1b222c}
.topbar .wrap{display:flex;align-items:center;gap:12px;min-height:34px}
.tb-tag{white-space:nowrap}
.tb-right{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.tb-right a{display:inline-flex;align-items:center;gap:5px}
.topbar a:hover{color:var(--copper)}

/* ── 헤더 ── */
.site-head{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(27,33,43,.97) 0%,rgba(18,23,30,.95) 100%),var(--brushed);
  backdrop-filter:saturate(160%) blur(12px);transition:box-shadow .2s}
.site-head::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,138,78,.5),transparent)}
.site-head.stuck{box-shadow:0 10px 30px rgba(0,0,0,.55)}
.head-row{display:flex;align-items:center;gap:18px;min-height:var(--head-h)}

.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.logo .mark{display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));transition:transform .3s var(--ease)}
.logo:hover .mark{transform:translateY(-1px) rotate(-4deg)}
.logo-text{display:flex;flex-direction:column;line-height:1.12}
.logo-text strong{font-size:21px;letter-spacing:-.04em;font-weight:800;
  background:linear-gradient(180deg,#fff 0%,#b9c5d3 55%,#8e9cad 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-text strong b{color:var(--copper);-webkit-text-fill-color:var(--copper);font-weight:800}
.logo-text small{font-size:9px;letter-spacing:.19em;color:var(--ink-3);margin-top:3px}

.gnb{margin-left:4px}
.gnb-list{display:flex}
.gnb-item > a{display:block;padding:calc((var(--head-h) - 22px)/2) 12px;font-size:14.5px;font-weight:600;
  position:relative;white-space:nowrap;color:var(--ink)}
.gnb-item > a::after{content:'';position:absolute;left:12px;right:12px;bottom:14px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--copper),#f0a46a);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
.gnb-item:hover > a::after,.gnb-item.on > a::after{transform:scaleX(1)}
.gnb-item:hover > a,.gnb-item.on > a{color:var(--steel-hi)}

.mega{position:absolute;left:0;right:0;top:100%;border-top:1px solid var(--line-2);
  background:linear-gradient(180deg,#1d242e 0%,#161c24 100%),var(--brushed);
  box-shadow:var(--sh-3);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.18s var(--ease);z-index:70}
.gnb-item:hover .mega,.gnb-item:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega-inner{max-width:var(--wrap);margin:0 auto;padding:26px 20px 30px;display:grid;grid-template-columns:214px 1fr;gap:34px}
.mega-lead{padding-right:26px;border-right:1px solid var(--line)}
.mega-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;margin-bottom:10px;color:var(--copper);
  background:linear-gradient(145deg,#2c3644,#1a2028);border:1px solid var(--line-2);box-shadow:var(--sh-1)}
.mega-title{margin:0;font-size:17px;font-weight:700;color:var(--steel-hi)}
.mega-blurb{margin:6px 0 14px;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.mega-all{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--copper)}
.mega-all:hover{gap:8px}
.mega-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:6px 22px}
.mega-h{display:block;font-size:13.5px;font-weight:700;padding:5px 0;border-bottom:1px solid var(--line);margin-bottom:5px;color:var(--steel)}
.mega-h:hover{color:var(--copper)}
.mega-col ul li a{display:block;padding:3.5px 0;font-size:12.5px;color:var(--ink-2)}
.mega-col ul li a:hover{color:var(--copper);padding-left:3px}
.lk{font-size:9.5px;color:var(--ink-3);border:1px solid var(--line-2);border-radius:4px;padding:0 4px;vertical-align:1px}

.search{margin-left:auto;display:flex;align-items:center;gap:6px;padding:0 12px;height:38px;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:rgba(0,0,0,.3)}
.search:focus-within{border-color:var(--copper);color:var(--copper)}
.search input{width:160px;border:0;background:none;font:inherit;font-size:13px;color:var(--ink);outline:none}
.search input::placeholder{color:var(--ink-3)}
.head-cta{flex:0 0 auto;padding:9px 17px;border-radius:var(--r-pill);font-size:13px;font-weight:700;color:#14181e;
  background:linear-gradient(180deg,#f0a46a,#d9803f);box-shadow:0 2px 10px rgba(224,138,78,.28);transition:.15s}
.head-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* 모바일 메뉴 버튼 — 기본값(브라우저 흰 버튼)이 나오지 않게 항상 스타일을 갖고 있어야 함 */
.nav-toggle{display:none;flex:0 0 auto;margin-left:auto;align-items:center;gap:9px;
  height:40px;padding:0 15px 0 13px;cursor:pointer;
  border:1px solid var(--line-3);border-radius:var(--r-sm);
  background:linear-gradient(180deg,#2c3542 0%,#1c2430 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 2px 8px rgba(0,0,0,.45);
  color:var(--steel);font-size:13px;font-weight:700;letter-spacing:-.01em;-webkit-appearance:none;appearance:none}
.nav-toggle:hover{border-color:var(--copper);color:var(--steel-hi)}
.nav-toggle:active{transform:translateY(1px)}
.nav-toggle .bars{display:flex;flex-direction:column;justify-content:space-between;width:17px;height:12px}
.nav-toggle .bars i{display:block;height:2px;border-radius:2px;background:currentColor;
  transition:transform .22s var(--ease),opacity .18s var(--ease);transform-origin:center}
.nav-toggle .txt{line-height:1}
body.nav-open .nav-toggle{border-color:var(--copper);color:var(--copper)}
body.nav-open .nav-toggle .bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.nav-open .nav-toggle .bars i:nth-child(2){opacity:0}
body.nav-open .nav-toggle .bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ── 검색: 자동완성 · 서랍 내 걸러내기 ── */
.search{position:relative}
.sug{position:absolute;left:-1px;right:-1px;top:calc(100% + 8px);z-index:80;max-height:66vh;overflow:auto;
  border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--sh-3);
  background:linear-gradient(180deg,#1e2531 0%,#171d26 100%)}
.sug a{display:flex;align-items:baseline;gap:9px;padding:10px 13px;border-bottom:1px solid var(--line);font-size:13px}
.sug a:last-child{border-bottom:0}
.sug a:hover,.sug a.on{background:rgba(255,255,255,.05)}
.sug .sk{flex:0 0 auto;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill);border:1px solid}
.sug .sk.mn{background:var(--copper-soft);color:var(--copper);border-color:rgba(224,138,78,.3)}
.sug .sk.pg{background:var(--blue-soft);color:var(--blue);border-color:rgba(91,140,186,.3)}
.sug .sk.it{background:rgba(255,255,255,.06);color:var(--ink-2);border-color:var(--line-2)}
.sug .st{font-weight:600;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug .sw{margin-left:auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.sug .sug-all{justify-content:center;color:var(--copper);font-weight:600;font-size:12.5px;background:rgba(0,0,0,.25)}

.drawer-search{display:none;align-items:center;gap:8px;margin:10px 0 4px;padding:0 6px 0 14px;height:44px;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:rgba(0,0,0,.32)}
.drawer-search:focus-within{border-color:var(--copper);color:var(--copper)}
.drawer-search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14.5px;color:var(--ink);outline:none}
.drawer-search input::placeholder{color:var(--ink-3)}
.drawer-search button{flex:0 0 auto;padding:8px 16px;border:0;border-radius:var(--r-pill);font-weight:700;font-size:13px;
  cursor:pointer;color:#14181e;background:linear-gradient(180deg,#f0a46a,#d3782f)}
.drawer-hint{display:none;margin:10px 2px 0;font-size:12.5px;color:var(--ink-3)}
.drawer-hint strong{color:var(--copper)}
/* 걸러내는 동안에는 하위 목록을 펼쳐 보여 줌 */
.gnb.filtering .mega{display:block}
.gnb.filtering .mega-cols{grid-template-columns:1fr}
.gnb.filtering .gnb-item > a{color:var(--copper)}

@media (max-width:1040px){
  .drawer-search{display:flex}
  .drawer-hint{display:block}
}

/* ── 히어로 강판 + 맞물린 기어 장면 ── */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:#11161d;isolation:isolate}
.hero-plate{position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(178deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 16%),
    repeating-linear-gradient(97deg,rgba(255,255,255,.045) 0 1px,rgba(0,0,0,.05) 1px 2px,rgba(255,255,255,0) 2px 4px),
    linear-gradient(104deg,rgba(255,255,255,0) 18%,rgba(197,214,235,.10) 38%,rgba(255,255,255,0) 56%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.026) 0 2px,transparent 2px 26px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.026) 0 2px,transparent 2px 26px),
    radial-gradient(1200px 520px at 74% 6%,rgba(74,102,140,.32) 0%,transparent 64%),
    radial-gradient(760px 420px at 8% 96%,rgba(224,138,78,.15) 0%,transparent 60%),
    linear-gradient(158deg,#2b3644 0%,#1b232e 46%,#11161d 100%)}

/* 기계 장면 — 히어로 전체를 덮고 잘려 나감 */
.hero-scene{position:absolute;inset:0;z-index:1;overflow:hidden}
.hero-scene .scene{display:block;width:100%;height:100%}
.lay-pipe-far{opacity:.42}
.lay-pipe-mid{opacity:.5}
.lay-pipe-near{opacity:.55}
.lay-gears .g1{opacity:.6}
.lay-gears .g2{opacity:.82}
.lay-gears .g3{opacity:.7}

/* 기어 회전 — 주기는 잇수에 비례(SVG 생성 시 계산), 이웃끼리 방향 반대 */
@keyframes gspin{to{transform:rotate(360deg)}}
@keyframes gspinr{to{transform:rotate(-360deg)}}
.hero-scene .gr{transform-box:fill-box;transform-origin:center;
  animation:gspin var(--dur,60s) linear infinite;will-change:transform}
.hero-scene .gr.rev{animation-name:gspinr}
@media (prefers-reduced-motion:reduce){.hero-scene .gr{animation:none}}

/* 글자 뒤를 덮어 가독성 확보 */
.hero-fade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(92deg,rgba(11,15,20,.95) 0%,rgba(11,15,20,.9) 26%,rgba(11,15,20,.6) 46%,rgba(11,15,20,.24) 64%,rgba(11,15,20,.34) 100%),
    radial-gradient(150% 110% at 42% 46%,transparent 46%,rgba(6,9,13,.55) 100%)}

.hero-grid{position:relative;z-index:3;padding-block:52px 46px;max-width:var(--wrap)}
.hero-copy{max-width:620px}
.hero-eyebrow{margin:0 0 12px;font-size:11.5px;letter-spacing:.16em;color:var(--copper);font-weight:700;
  display:inline-flex;align-items:center;gap:8px}
.hero-eyebrow::before{content:'';width:26px;height:2px;background:linear-gradient(90deg,var(--copper),transparent);border-radius:2px}
.hero h1{font-size:clamp(25px,3.5vw,41px);line-height:1.24;letter-spacing:-.04em;margin-bottom:14px;
  background:linear-gradient(180deg,#fff 20%,#c2cddb 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 em{font-style:normal;-webkit-text-fill-color:var(--copper);color:var(--copper)}
.hero-lead{margin:0 0 22px;max-width:50ch;font-size:14.5px;line-height:1.72;color:var(--ink-2)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-bar{position:relative;z-index:5;background:rgba(0,0,0,.34);border-top:1px solid var(--line)}
.hero-bar dl{display:flex;gap:42px;margin:0;padding-block:14px;flex-wrap:wrap}
.hero-bar dt{font-size:11px;color:var(--ink-3);margin-bottom:2px;letter-spacing:.04em}
.hero-bar dd{margin:0;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--steel)}
.hero-bar dd.sm{font-size:13px;font-weight:500;color:var(--ink-2)}
.hero-bar a:hover{color:var(--copper)}

.btn{display:inline-flex;align-items:center;gap:7px;padding:12px 21px;border-radius:var(--r-sm);cursor:pointer;
  background:linear-gradient(180deg,#f0a46a,#d3782f);color:#14181e;font-weight:700;font-size:14px;border:1px solid #b8642a;
  box-shadow:0 2px 12px rgba(224,138,78,.28),0 1px 0 rgba(255,255,255,.25) inset;transition:.16s var(--ease)}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));color:var(--steel);
  border-color:var(--line-3);box-shadow:var(--sh-1)}
.btn.ghost:hover{border-color:var(--steel-2);color:var(--steel-hi)}
.btn.wide{width:100%;justify-content:center}

/* ── 공지 띠 ── */
.notice-bar{background:linear-gradient(180deg,#1b212b,#171d25);border-bottom:1px solid var(--line)}
.notice-bar .wrap{display:flex;align-items:center;gap:12px;padding-block:11px;font-size:13.5px}
.nb-tag{flex:0 0 auto;padding:2px 9px;border-radius:var(--r-pill);background:var(--copper-soft);color:var(--copper);
  font-size:11.5px;font-weight:700;border:1px solid rgba(224,138,78,.3)}
.notice-bar > .wrap > a:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--steel)}
.notice-bar a:hover{color:var(--copper)}
.nb-date{color:var(--ink-3);font-size:12px}
.nb-all{color:var(--ink-2);font-size:12.5px;border-left:1px solid var(--line);padding-left:12px}

/* ── 블록 ── */
.block{padding-block:62px}
.block-head{margin-bottom:26px}
.block-head.row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.block-head h2{font-size:clamp(21px,2.5vw,28px);letter-spacing:-.034em;color:var(--steel-hi)}
.block-head h2::after{content:'';display:block;width:40px;height:3px;border-radius:2px;margin-top:11px;
  background:linear-gradient(90deg,var(--copper),rgba(224,138,78,0))}
.block-head p{margin:11px 0 0;color:var(--ink-2);font-size:14px}
.more{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;color:var(--copper)}
.more:hover{gap:9px}

.panel{background:var(--plate);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.sec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:18px}
.sec-card{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  background:var(--plate);box-shadow:var(--sh-1);transition:.22s var(--ease);position:relative}
.sec-card::before{content:'';position:absolute;inset:0;border-radius:var(--r-lg);pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.09),transparent 42%);z-index:2}
.sec-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--copper)}
.sec-img{display:block;aspect-ratio:16/9;overflow:hidden;position:relative;background:#0e1218}
.sec-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,20,26,.15) 0%,rgba(16,20,26,.8) 100%)}
.sec-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease);filter:saturate(.85) contrast(1.06)}
.sec-card:hover .sec-img img{transform:scale(1.07)}
.sec-ic{position:absolute;left:14px;bottom:-18px;z-index:3;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  color:var(--copper);background:linear-gradient(145deg,#313c4b,#1b222b);border:1px solid var(--line-3);box-shadow:var(--sh-1)}
.sec-body{padding:28px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1;position:relative;z-index:1}
.sec-name{font-size:17px;font-weight:700;letter-spacing:-.025em;display:flex;align-items:baseline;gap:7px;color:var(--steel-hi)}
.sec-name em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--copper);background:var(--copper-soft);
  padding:1px 7px;border-radius:var(--r-pill);border:1px solid rgba(224,138,78,.25)}
.sec-blurb{font-size:13px;color:var(--ink-2);line-height:1.6}
.sec-sub{font-size:11.5px;color:var(--ink-3);line-height:1.55;margin-top:auto;padding-top:8px;border-top:1px dashed var(--line-2)}

.strip{position:relative;overflow:hidden;border-block:1px solid var(--line);padding-block:62px;
  background:linear-gradient(180deg,#151b23 0%,#111620 100%),var(--brushed)}
.strip > .wrap{position:relative;z-index:1}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.pick{display:flex;flex-direction:column;background:var(--plate-2);border:1px solid var(--line-2);border-radius:var(--r);
  overflow:hidden;transition:.2s var(--ease);box-shadow:var(--sh-1)}
.pick:hover{transform:translateY(-3px);border-color:var(--copper);box-shadow:var(--sh-2)}
.pick-img{display:block;aspect-ratio:1;overflow:hidden;background:#0e1218}
.pick-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s var(--ease);filter:saturate(.9)}
.pick:hover .pick-img img{transform:scale(1.08)}
.pick-cat{padding:11px 12px 0;font-size:11px;color:var(--copper);font-weight:700}
.pick-t{padding:2px 12px 13px;font-size:13px;font-weight:600;line-height:1.4;color:var(--steel)}

.proc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:12px}
.proc{display:flex;align-items:center;gap:12px;padding:18px 20px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--plate);font-weight:600;font-size:14.5px;transition:.2s var(--ease);color:var(--steel);box-shadow:var(--sh-1)}
.proc-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;flex:0 0 auto;color:var(--copper);
  background:linear-gradient(145deg,#2e3846,#1a2028);border:1px solid var(--line-2);transition:.2s}
.proc-name{flex:1;min-width:0}
.proc-go{color:var(--copper);display:flex}
.proc:hover{border-color:var(--copper);transform:translateY(-2px);color:var(--steel-hi)}
.proc:hover .proc-ic{background:linear-gradient(145deg,var(--copper),var(--copper-d));color:#14181e;border-color:var(--copper)}

.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:22px;align-items:start}
.tech-box,.cta-box{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:30px 28px;box-shadow:var(--sh-2)}
.tech-box{background:var(--plate)}
.cta-box{position:relative;overflow:hidden;
  background:radial-gradient(600px 300px at 90% 0%,rgba(224,138,78,.22),transparent 60%),linear-gradient(150deg,#26313f,#151b23)}
.tech-box h2,.cta-box h2{font-size:20px;letter-spacing:-.03em;margin-bottom:6px;color:var(--steel-hi)}
.cta-box p{margin:0 0 20px;font-size:13.5px;color:var(--ink-2);line-height:1.7}
.tech-links{margin-top:16px}
.tech-links li + li{border-top:1px solid var(--line)}
.tech-links a{display:flex;align-items:center;gap:10px;padding:11px 2px;font-size:14px;font-weight:600;color:var(--steel)}
.tech-links a .ic{color:var(--copper)}
.tech-links a em{font-style:normal;font-size:12px;color:var(--ink-3);font-weight:400;margin-left:auto;text-align:right}
.tech-links a:hover{color:var(--copper)}
.cta-rows{display:flex;flex-direction:column;gap:2px;margin-bottom:20px;position:relative;z-index:1}
.cta-rows a{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-weight:600;color:var(--steel)}
.cta-rows a span{display:flex;flex-direction:column;line-height:1.3}
.cta-rows a em{font-style:normal;font-size:11px;color:var(--ink-3);font-weight:400}
.cta-rows a .ic{color:var(--copper)}
.cta-rows a:hover{color:var(--copper)}

/* ── 페이지 헤더 ── */
.page-head{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#1a212b 0%,#12171f 100%),var(--brushed)}
.page-head.has-img{background-image:
  linear-gradient(96deg,rgba(13,17,23,.97) 0%,rgba(13,17,23,.9) 42%,rgba(13,17,23,.55) 72%,rgba(13,17,23,.35) 100%),
  var(--head-img);
  background-size:auto,cover;background-position:center,center 38%;background-repeat:no-repeat}
.page-head .wrap{padding-block:32px 28px;position:relative;z-index:1}
.crumb{font-size:12.5px;color:var(--ink-3);margin-bottom:11px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumb a:hover{color:var(--copper)}
.crumb span{color:var(--line-3)}
.crumb .cur{color:var(--ink-2)}
.page-head h1{font-size:clamp(22px,2.9vw,32px);letter-spacing:-.038em;
  background:linear-gradient(180deg,#fff 25%,#bcc8d7 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-blurb{margin:9px 0 0;color:var(--ink-2);font-size:14.5px;max-width:64ch}

/* ── 레이아웃 ── */
.layout{display:grid;grid-template-columns:238px minmax(0,1fr);gap:40px;padding-block:34px 72px;align-items:start;flex:1}
.layout.nosidebar{grid-template-columns:minmax(0,1fr)}
.side{position:sticky;top:calc(var(--head-h) + 16px)}
.side-head{margin:0 0 12px}
.side-head a{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:700;color:var(--steel-hi)}
.side-head a .ic{color:var(--copper)}
.side-list{background:var(--plate);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;margin-bottom:18px;box-shadow:var(--sh-1)}
.side-list > li + li{border-top:1px solid var(--line)}
.side-list > li > a{display:block;padding:11px 14px;font-size:13.5px;font-weight:600;color:var(--ink-2);transition:.14s}
.side-list > li > a:hover{background:rgba(255,255,255,.04);color:var(--steel-hi);padding-left:17px}
.side-list > li.on > a{background:linear-gradient(90deg,rgba(224,138,78,.2),transparent);color:var(--copper);
  box-shadow:inset 3px 0 0 var(--copper)}
.side-sub{background:rgba(0,0,0,.24);padding:5px 0;border-top:1px solid var(--line)}
.side-sub li a{display:block;padding:6px 14px 6px 26px;font-size:12.5px;color:var(--ink-3);position:relative}
.side-sub li a::before{content:'';position:absolute;left:15px;top:50%;width:4px;height:1px;background:var(--line-3)}
.side-sub li a:hover{color:var(--copper)}
.side-sub li.on a{color:var(--copper);font-weight:700}
.side-cta{border:1px solid var(--line-2);border-radius:var(--r);padding:18px 16px;text-align:center;box-shadow:var(--sh-1);
  background:radial-gradient(300px 160px at 50% 0%,rgba(224,138,78,.16),transparent 70%),var(--plate)}
.cta-label{margin:0;font-size:11px;letter-spacing:.12em;color:var(--ink-3)}
.cta-tel{margin:6px 0 4px;font-size:19px;font-weight:800;color:var(--copper);letter-spacing:-.02em}
.cta-note{margin:0 0 14px;font-size:12px;color:var(--ink-2)}
.cta-btn{display:block;padding:10px;border-radius:var(--r-sm);font-weight:700;font-size:13px;color:#14181e;
  background:linear-gradient(180deg,#f0a46a,#d3782f)}
.cta-btn:hover{filter:brightness(1.08)}
.main{min-width:0}
.bare-title{font-size:26px;margin-bottom:20px;color:var(--steel-hi)}

/* ── 하위 카드 ── */
.sub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:16px;margin-bottom:30px}
.sub-card{display:flex;flex-direction:column;background:var(--plate-2);border:1px solid var(--line-2);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-1);transition:.2s var(--ease)}
.sub-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--copper)}
.sub-img{display:block;aspect-ratio:4/3;background:#0e1218;overflow:hidden}
.sub-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s var(--ease);filter:saturate(.9)}
.sub-card:hover .sub-img img{transform:scale(1.07)}
.sub-name{padding:12px 13px 2px;font-size:14px;font-weight:700;line-height:1.4;color:var(--steel)}
.sub-count{padding:0 13px 13px;font-size:11.5px;color:var(--copper);font-weight:600}

/* ── 갤러리 ── */
.gal-wrap{margin:6px 0 30px}
.gal-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.gal-count{font-size:12.5px;color:var(--ink-2);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.chip{padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:rgba(255,255,255,.03);
  font-size:12.5px;color:var(--ink-2);cursor:pointer;transition:.14s;font-weight:500}
.chip span{opacity:.55;margin-left:3px;font-size:11px}
.chip:hover{border-color:var(--steel-2);color:var(--steel)}
.chip.on{background:linear-gradient(180deg,#f0a46a,#d3782f);border-color:#b8642a;color:#14181e;font-weight:700}
.chip.static{cursor:default;background:var(--copper-soft);border-color:rgba(224,138,78,.3);color:var(--copper);font-weight:600}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(174px,1fr));gap:16px}
.gi{display:flex;flex-direction:column;background:var(--plate-2);border:1px solid var(--line-2);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-1);transition:.2s var(--ease)}
.gi:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--copper)}
.gi-img{display:block;aspect-ratio:4/3;background:#0e1218;overflow:hidden}
.gi-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s var(--ease);filter:saturate(.9)}
.gi:hover .gi-img img{transform:scale(1.07)}
.gi-t{padding:11px 12px 3px;font-size:13px;font-weight:600;line-height:1.4;color:var(--steel)}
.gi-c{padding:0 12px 12px;font-size:11.5px;color:var(--ink-3);line-height:1.5}
.gal-empty{padding:30px;text-align:center;color:var(--ink-3);font-size:13.5px}

/* ── 품목 상세 ── */
.item-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:34px;align-items:start;margin-bottom:34px}
.item-figure{margin:0;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:#0e1218;position:relative;box-shadow:var(--sh-2)}
.item-figure a{display:block;position:relative}
.item-figure img{display:block;width:100%}
.zoom{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:5px;padding:7px 13px;
  border-radius:var(--r-pill);background:rgba(10,14,19,.88);border:1px solid var(--line-3);color:var(--steel);
  font-size:12px;font-weight:600;opacity:0;transition:.18s}
.item-figure:hover .zoom{opacity:1}
.item-where{margin:0 0 6px;font-size:12.5px;color:var(--copper);font-weight:600}
.item-meta h2{font-size:23px;letter-spacing:-.032em;margin-bottom:9px;color:var(--steel-hi)}
.item-caption{margin:0 0 14px;color:var(--ink-2)}
.item-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.item-spec{margin:22px 0 0;border-top:1px solid var(--line)}
.item-spec > div{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.item-spec dt{flex:0 0 74px;color:var(--ink-3)}
.item-spec dd{margin:0;font-weight:600;color:var(--steel)}
.item-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-bottom:38px}
.item-nav a{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--plate);border:1px solid var(--line-2);
  border-radius:var(--r);font-size:13px;font-weight:600;min-width:0;transition:.16s;color:var(--ink-2)}
.item-nav a:hover{border-color:var(--copper);color:var(--steel-hi)}
.item-nav a.next{justify-content:flex-end;text-align:right}
.item-nav a.list{grid-column:2;padding-inline:20px}
.item-nav img{width:44px;height:44px;object-fit:cover;border-radius:var(--r-sm);flex:0 0 auto}
.item-nav span{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.item-nav em{font-style:normal;font-size:11px;color:var(--ink-3);font-weight:400}
.item-nav a.prev span,.item-nav a.next span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.rel h3{font-size:16px;margin-bottom:14px;padding-bottom:9px;border-bottom:1px solid var(--line);color:var(--steel-hi)}

/* ── 검색 ── */
.search-big{display:flex;align-items:center;gap:9px;margin-bottom:20px;max-width:640px;padding:0 8px 0 16px;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:rgba(0,0,0,.3)}
.search-big:focus-within{border-color:var(--copper);color:var(--copper)}
.search-big input{flex:1;padding:13px 0;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);outline:none;min-width:0}
.search-big input::placeholder{color:var(--ink-3)}
.search-big button{padding:9px 20px;border:0;border-radius:var(--r-pill);font-weight:700;cursor:pointer;color:#14181e;
  background:linear-gradient(180deg,#f0a46a,#d3782f)}
.hit-group{font-size:14px;margin:24px 0 4px;color:var(--steel-hi);display:flex;align-items:center;gap:8px}
.hit-group span{font-size:11.5px;font-weight:700;color:var(--copper);background:var(--copper-soft);padding:1px 8px;border-radius:var(--r-pill)}
.hit-where{font-size:12px;color:var(--ink-3)}
.hit-kind.menu{background:var(--copper-soft);color:var(--copper);border-color:rgba(224,138,78,.3)}
.hit-kind.page{background:var(--blue-soft);color:var(--blue)}
.hit-kind.item{background:rgba(255,255,255,.06);color:var(--ink-2);border:1px solid var(--line-2)}
.hits li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:9px;align-items:baseline}
.hit-kind{font-size:11px;padding:2px 9px;border-radius:var(--r-pill);background:var(--blue-soft);color:var(--blue);
  font-weight:700;border:1px solid rgba(91,140,186,.28)}
.hit-kind.it{background:var(--copper-soft);color:var(--copper);border-color:rgba(224,138,78,.3)}
.hits a{font-weight:700;color:var(--steel)}
.hits a:hover{color:var(--copper)}
.hits .sn{flex:1 1 100%;font-size:12.5px;color:var(--ink-3);line-height:1.6}

/* ── 사이트맵 ── */
.sitemap{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:26px}
.sitemap section h2{display:flex;align-items:center;gap:7px;font-size:16px;color:var(--steel-hi);padding-bottom:8px;
  border-bottom:2px solid var(--copper);margin-bottom:12px}
.sitemap section h2 .ic{color:var(--copper)}
.sm-g{margin:12px 0 4px;font-weight:700;font-size:13.5px;color:var(--steel)}
.sitemap ul li a{display:block;padding:3px 0 3px 10px;font-size:12.5px;color:var(--ink-3);border-left:2px solid var(--line-2)}
.sitemap ul li a:hover{color:var(--copper);border-left-color:var(--copper)}

/* ── 문의 폼 ── */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:start}
.form-card{background:var(--plate);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-2)}
.form-card label{display:block;margin-bottom:14px;font-size:13px;font-weight:600;color:var(--ink-2)}
.form-card label span{color:var(--copper)}
.form-card input,.form-card textarea{width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  font:inherit;font-size:14px;background:rgba(0,0,0,.3);color:var(--ink);font-weight:400}
.form-card input::placeholder,.form-card textarea::placeholder{color:var(--ink-3)}
.form-card input:focus,.form-card textarea:focus{outline:none;border-color:var(--copper);background:rgba(0,0,0,.45)}
.form-card textarea{resize:vertical;line-height:1.7}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.form-msg{margin:0 0 18px;padding:12px 15px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;border:1px solid}
.form-msg.ok{background:rgba(91,140,186,.14);color:#8fbde8;border-color:rgba(91,140,186,.35)}
.form-msg.err{background:var(--copper-soft);color:#f0a46a;border-color:rgba(224,138,78,.35)}
.form-pre{margin:0 0 16px;padding:10px 14px;border-radius:var(--r-sm);background:rgba(0,0,0,.3);font-size:13px;
  border:1px solid var(--line);color:var(--ink-2)}
.form-pre strong{color:var(--steel)}
.form-note{margin:14px 0 0;font-size:12.5px;color:var(--ink-3)}
.form-note a{color:var(--copper);font-weight:600}
.contact-side{background:var(--plate);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:10px 22px;box-shadow:var(--sh-2)}
.ci{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.contact-side .ci:last-child{border-bottom:0}
.ci .ic{color:var(--copper);margin-top:3px}
.ci div{display:flex;flex-direction:column;font-size:14px;font-weight:600;min-width:0;word-break:break-all;color:var(--steel)}
.ci em{font-style:normal;font-size:11px;color:var(--ink-3);font-weight:400;margin-bottom:2px}
.ci a:hover{color:var(--copper)}

/* ── 공지 ── */
.notice-list{border-top:2px solid var(--copper)}
.notice-list li{border-bottom:1px solid var(--line)}
.notice-list a{display:flex;align-items:center;gap:11px;padding:15px 6px;font-size:14.5px}
.notice-list a:hover .nl-t{color:var(--copper)}
.nl-t{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--steel)}
.nl-d{font-size:12.5px;color:var(--ink-3)}
.pin-tag{padding:2px 8px;border-radius:var(--r-pill);background:linear-gradient(180deg,#f0a46a,#d3782f);color:#14181e;font-size:11px;font-weight:700}
.post{background:var(--plate);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:30px 30px 24px;margin-bottom:20px;box-shadow:var(--sh-2)}
.post-head{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px}
.post-head h2{font-size:21px;letter-spacing:-.03em;color:var(--steel-hi)}
.post-meta{margin:8px 0 0;font-size:12.5px;color:var(--ink-3)}
.post-nav{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.post-nav a{font-size:13px;color:var(--ink-2);font-weight:600}
.post-nav a:hover{color:var(--copper)}
.post-nav a.list{padding:9px 20px;background:var(--plate);border:1px solid var(--line-2);border-radius:var(--r-sm)}

.notice{padding:18px 20px;border:1px dashed var(--line-3);border-radius:var(--r);color:var(--ink-2);font-size:13.5px;
  background:rgba(255,255,255,.025);margin-bottom:22px}
.notice a{color:var(--copper);font-weight:600}

/* ── 원본 본문: 어두운 배경 위에 밝은 '자료 시트'로 올림 ──
   원본 HTML 에 검정 글씨가 인라인으로 박혀 있어 다크 위에 그냥 두면 안 보임 */
.content{margin-bottom:16px;background:linear-gradient(180deg,#f7f9fb,#eef2f6);color:#1d232b;
  border:1px solid #cfd8e2;border-radius:var(--r-lg);padding:24px 26px;box-shadow:var(--sh-2);overflow:hidden}
.content a{color:#b0561f;font-weight:600}
.post .content,.item-meta .content{background:none;border:0;padding:0;box-shadow:none;color:var(--ink-2);border-radius:0}
.post .content a,.item-meta .content a{color:var(--copper)}
.content .container{width:auto;max-width:none;margin:0;padding:0}
.content .row{display:flex;flex-wrap:wrap;margin:0 -8px}
.content [class*="col-"]{padding:0 8px;flex:0 0 100%;max-width:100%;min-width:0}
@media (min-width:576px){
  .content .col-sm-1{flex-basis:8.333%;max-width:8.333%}   .content .col-sm-2{flex-basis:16.666%;max-width:16.666%}
  .content .col-sm-3{flex-basis:25%;max-width:25%}         .content .col-sm-4{flex-basis:33.333%;max-width:33.333%}
  .content .col-sm-5{flex-basis:41.666%;max-width:41.666%} .content .col-sm-6{flex-basis:50%;max-width:50%}
  .content .col-sm-7{flex-basis:58.333%;max-width:58.333%} .content .col-sm-8{flex-basis:66.666%;max-width:66.666%}
  .content .col-sm-9{flex-basis:75%;max-width:75%}         .content .col-sm-10{flex-basis:83.333%;max-width:83.333%}
  .content .col-sm-11{flex-basis:91.666%;max-width:91.666%}.content .col-sm-12{flex-basis:100%;max-width:100%}
}
@media (min-width:900px){
  .content .col-md-1{flex-basis:8.333%;max-width:8.333%}   .content .col-md-2{flex-basis:16.666%;max-width:16.666%}
  .content .col-md-3{flex-basis:25%;max-width:25%}         .content .col-md-4{flex-basis:33.333%;max-width:33.333%}
  .content .col-md-5{flex-basis:41.666%;max-width:41.666%} .content .col-md-6{flex-basis:50%;max-width:50%}
  .content .col-md-7{flex-basis:58.333%;max-width:58.333%} .content .col-md-8{flex-basis:66.666%;max-width:66.666%}
  .content .col-md-9{flex-basis:75%;max-width:75%}         .content .col-md-10{flex-basis:83.333%;max-width:83.333%}
  .content .col-md-11{flex-basis:91.666%;max-width:91.666%}.content .col-md-12{flex-basis:100%;max-width:100%}
}
.content .text-center{text-align:center}.content .text-right{text-align:right}.content .text-left{text-align:left}
.content .img-responsive{display:block;max-width:100%;height:auto}
.content .clearfix::after{content:'';display:table;clear:both}
.content .pull-right{float:right}.content .pull-left{float:left}
.content hr{border:0;border-top:1px solid #d7dee6;margin:16px 0}
.content h2,.content h3,.content h4,.content h5{margin:0 0 10px;line-height:1.4}
.content img{border-radius:var(--r-sm)}
.content div:empty{display:none}
.content .blk{margin-bottom:10px;border-radius:var(--r);overflow:hidden}
.content [class*="fsize"]{line-height:1.6}
.content .fsize50,.content .fsize45,.content .fsize40{font-size:clamp(21px,3vw,29px);line-height:1.32}
.content .fsize35,.content .fsize30{font-size:clamp(18px,2.3vw,23px);line-height:1.4}
.content .fsize28,.content .fsize27,.content .fsize26,.content .fsize25,.content .fsize24,.content .fsize23,.content .fsize22{font-size:clamp(16px,1.9vw,18px)}
.content .fsize21,.content .fsize20,.content .fsize19,.content .fsize18,.content .fsize17{font-size:15.5px}
.content .fsize16,.content .fsize15,.content .fsize14{font-size:14.5px}
.content .fsize13,.content .fsize12,.content .fsize11,.content .fsize10{font-size:13px}
.content table{border-collapse:collapse;width:100%;font-size:13px;background:#fff}
.content td,.content th{border:1px solid #d7dee6;padding:7px 9px}
.content iframe{max-width:100%;border-radius:var(--r-sm)}

/* ── 푸터 ── */
.site-foot{margin-top:auto;color:#8996a6;border-top:1px solid var(--line);
  background:linear-gradient(180deg,#0e1218 0%,#0a0d12 100%),var(--brushed)}
.foot-top{display:grid;grid-template-columns:236px 1fr;gap:40px;padding-block:44px 32px}
.f-brand{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.f-brand strong{color:var(--steel);font-size:17px}
.f-brand small{font-size:9px;letter-spacing:.19em;color:var(--ink-3)}
.f-desc{margin:6px 0 0;font-size:12.5px;line-height:1.7;color:var(--ink-3)}
.f-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:22px}
.f-nav p{margin:0 0 9px;font-size:13.5px;font-weight:700;color:var(--steel)}
.f-nav li a{display:block;padding:2px 0;font-size:12.5px}
.f-nav li a:hover{color:var(--copper)}
.foot-info{border-top:1px solid var(--line);padding-block:22px;font-size:13px}
.foot-info p{margin:0 0 6px;display:flex;align-items:center;gap:8px}
.foot-info .ic{color:var(--ink-3)}
.foot-info a{color:#9dabbb}
.foot-info a:hover{color:var(--copper)}
.f-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px}
.f-copy{border-top:1px solid var(--line);padding:14px 20px;text-align:center;font-size:11.5px;color:var(--ink-3)}

.to-top{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-3);
  background:var(--plate);color:var(--steel);display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.2s var(--ease);z-index:50}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:var(--copper);color:var(--copper)}

/* ── 반응형 ── */
@media (max-width:1180px){.gnb-item > a{padding-inline:9px;font-size:13.5px}.search input{width:110px}}
@media (max-width:1040px){
  .search,.head-cta{display:none}
  .nav-toggle{display:flex}
  .head-row{flex-wrap:wrap;gap:12px}
  .gnb{display:none;order:9;flex-basis:100%;margin:0;max-height:calc(100vh - 160px);overflow-y:auto;padding-bottom:16px}
  body.nav-open .gnb{display:block}
  .gnb-list{flex-direction:column}
  .gnb-item > a{padding:13px 2px;border-bottom:1px solid var(--line);font-size:15px}
  .gnb-item > a::after{display:none}
  .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-top:0;background:transparent}
  .mega-inner{display:block;padding:8px 0 14px;max-width:none}
  .mega-lead{display:none}
  .mega-cols{grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:12px}
}
@media (max-width:960px){
  .head-row{min-height:62px}
  .hero-grid{padding-block:36px 32px}
    .layout{grid-template-columns:1fr;gap:26px}
  .side{position:static}
  .item-wrap,.two-col,.contact-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr;gap:26px}
  .item-nav{grid-template-columns:1fr;gap:8px}
  .item-nav a.list{grid-column:1}
  .page-head.has-img{background-position:center,center}
}
@media (max-width:560px){
  .topbar .wrap{flex-direction:column;align-items:flex-start;gap:1px;padding-block:6px}
  .tb-right{margin-left:0;gap:14px}
  .tb-tag{display:none}
  .block,.strip{padding-block:42px}
  .hero-bar dl{gap:22px}
  .f2{grid-template-columns:1fr;gap:0}
  .gal{grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:12px}
  .sub-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
  .pick-grid{grid-template-columns:repeat(auto-fill,minmax(142px,1fr))}
  .form-card,.post{padding:20px}
  .content{padding:18px 16px}
  .notice-bar .wrap{flex-wrap:wrap}
}