:root{
  --bg:#F4F6F5; --surface:#FFFFFF; --surface-2:#E9F0EF; --surface-3:#DCE7E5;
  --ink:#16212A; --ink-soft:#5A5758; --ink-faint:#8A9694;
  --line:#D5E0DE; --line-strong:#B9C9C6;
  --accent:#173A79; --accent-ink:#FFFFFF; --accent-soft:#E4E9F3;
  --teal:#00698B; --lime:#3F8A16; --lime-soft:#EDF7E2;
  --logo-filter:none;
  --shadow:0 1px 2px rgba(22,33,42,.05), 0 8px 24px -12px rgba(22,33,42,.18);
  --maxw:1180px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1516; --surface:#15201F; --surface-2:#1C2B29; --surface-3:#243533;
    --ink:#E7EFEE; --ink-soft:#9AACAC; --ink-faint:#748584;
    --line:#2A3B39; --line-strong:#3A4E4B;
    --accent:#7AD2D0; --accent-ink:#0E1516; --accent-soft:#1E3A3A;
    --teal:#7AD2D0; --lime:#A9E06B; --lime-soft:#1B2D18;
    --logo-filter:invert(1) brightness(1.55);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1516; --surface:#15201F; --surface-2:#1C2B29; --surface-3:#243533;
  --ink:#E7EFEE; --ink-soft:#9AACAC; --ink-faint:#748584;
  --line:#2A3B39; --line-strong:#3A4E4B;
  --accent:#7AD2D0; --accent-ink:#0E1516; --accent-soft:#1E3A3A;
  --teal:#7AD2D0; --lime:#A9E06B; --lime-soft:#1B2D18;
  --logo-filter:invert(1) brightness(1.55);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em; word-break:keep-all; overflow-wrap:break-word;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:24px}
@media (max-width:640px){ .wrap{padding-inline:16px} }

/* ── 헤더 ── */
.site-head{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.head-in{display:flex; align-items:center; gap:28px; height:84px}
.brand{display:flex; align-items:center; gap:11px; flex-shrink:0}
.brand img.sym{width:42px; height:42px}
.brand img.word{height:32px; width:auto; filter:var(--logo-filter)}
.nav{display:flex; gap:26px; margin-left:auto; font-size:15px; font-weight:500}
.nav a{color:var(--ink-soft); padding:6px 0; border-bottom:2px solid transparent; transition:color .15s, border-color .15s}
.nav a:hover{color:var(--ink); border-color:var(--accent)}
.head-tel{font-size:14px; color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap}
@media (max-width:860px){ .nav{display:none} }

/* ── 공통 ── */
h1,h2,h3{font-family:"Gowun Batang","Nanum Myeongjo",serif; font-weight:700; text-wrap:balance; letter-spacing:-.02em; margin:0}
.eyebrow{
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); font-family:"IBM Plex Sans KR",sans-serif;
}
section{padding-block:clamp(56px,7vw,104px)}
.sec-head{display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 32px; margin-bottom:40px}
.sec-head h2{font-size:clamp(28px,3.4vw,40px); line-height:1.3}
.sec-head p{margin:0; color:var(--ink-soft); font-size:15.5px; max-width:44ch}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ── 히어로 ── */
.hero{padding-block:clamp(48px,6vw,88px) clamp(40px,5vw,72px)}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,72px); align-items:center}
.hero h1{font-size:clamp(38px,5.6vw,68px); line-height:1.22}
.hero h1 .thin{font-weight:400}
.hero-lede{margin:26px 0 0; font-size:clamp(16px,1.4vw,18.5px); color:var(--ink-soft); max-width:46ch; text-wrap:pretty}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}
.chip{
  font-size:13.5px; font-weight:500; padding:7px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft)
}
.chip.lic{background:var(--accent-soft); border-color:transparent; color:var(--accent)}
.hero-figure{position:relative}
.hero-figure img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:3px; box-shadow:var(--shadow)}
.hero-cap{
  position:absolute; left:0; right:0; bottom:0; padding:20px;
  background:linear-gradient(transparent, rgba(8,14,18,.82)); color:#fff; border-radius:0 0 3px 3px;
}
.hero-cap .aw{font-size:12px; letter-spacing:.1em; font-weight:600; color:#C2E577}
.hero-cap .nm{font-family:"Gowun Batang",serif; font-size:19px; font-weight:700; margin-top:3px}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; gap:36px}
  .hero-figure{order:-1}
  .hero-figure img{aspect-ratio:4/3}
}

/* ── 지표 ── */
.stats{border-block:1px solid var(--line); background:var(--surface-2)}
.stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); padding-inline:0}
.stat{background:var(--surface-2); padding:34px clamp(16px,2.4vw,32px)}
.stat dt{font-size:13px; color:var(--ink-soft); font-weight:500; margin-bottom:8px}
.stat dd{margin:0; font-family:"Gowun Batang",serif; font-weight:700; font-size:clamp(30px,3.6vw,44px);
  line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.stat dd small{font-size:.44em; font-weight:400; margin-left:3px; color:var(--ink-soft); font-family:"IBM Plex Sans KR",sans-serif}
.stat .sub{font-size:12.5px; color:var(--ink-faint); margin-top:6px}
@media (max-width:760px){ .stats .wrap{grid-template-columns:repeat(2,1fr)} }

/* ── 인사말 ── */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px)}
.greet{font-family:"Gowun Batang",serif; font-size:clamp(19px,1.9vw,23px); line-height:1.85}
.greet .slogan{color:var(--accent); font-weight:700}
.sign{margin-top:24px; font-size:15px; color:var(--ink-soft); text-align:right}
.sign b{font-family:"Gowun Batang",serif; font-size:17px; color:var(--ink)}
.policy{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:3px; overflow:hidden}
.policy li{background:var(--surface); padding:20px 22px; display:flex; gap:16px; align-items:baseline}
.policy .n{font-family:"Gowun Batang",serif; font-weight:700; color:var(--accent); font-size:15px; flex-shrink:0}
.policy .t{font-size:15.5px; line-height:1.6}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr} }

/* ── 사업분야 ── */
.biz{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.biz article{background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:0 0 3px 3px; padding:26px 22px 24px}
.biz article:nth-child(2){border-top-color:var(--teal)}
.biz article:nth-child(3){border-top-color:var(--lime)}
.biz article:nth-child(4){border-top-color:var(--line-strong)}
.biz h3{font-size:19px; margin-bottom:14px}
.biz ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.biz li{font-size:14.5px; color:var(--ink-soft); padding-left:13px; position:relative}
.biz li::before{content:""; position:absolute; left:0; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--line-strong)}
@media (max-width:900px){ .biz{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .biz{grid-template-columns:1fr} }

/* ── 주요작품 ── */
.works{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,30px)}
.work{display:flex; flex-direction:column; gap:0}
.work .ph{position:relative; overflow:hidden; border-radius:3px; background:var(--surface-3)}
.work .ph img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease}
.work:hover .ph img{transform:scale(1.03)}
.work .tags{position:absolute; top:12px; left:12px; display:flex; gap:6px; flex-wrap:wrap}
.tag{font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:2px; background:rgba(10,16,20,.72); color:#fff; letter-spacing:.02em}
.tag.award{background:#C2E577; color:#173A79}
.work .body{padding-top:18px}
.work .sub{font-size:13px; color:var(--teal); font-weight:500}
.work h3{font-size:21px; margin:4px 0 12px; line-height:1.35}
.work dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:14px}
.work dt{color:var(--ink-faint); white-space:nowrap}
.work dd{margin:0; color:var(--ink-soft)}
@media (max-width:900px){ .works{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .works{grid-template-columns:1fr} }

/* ── 현장·중창불사 ── */
.ongoing{background:var(--surface-2); border-block:1px solid var(--line)}
.two{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,64px)}
.site-list{list-style:none; margin:0; padding:0; display:grid; gap:0}
.site-list li{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline;
  padding:18px 0; border-bottom:1px solid var(--line)}
.site-list li:first-child{border-top:1px solid var(--line)}
.site-list .nm{font-size:16.5px; font-weight:500; flex:1 1 auto; min-width:min(100%,16ch)}
.site-list .pd{font-size:13.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.badge{font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:2px; letter-spacing:.03em}
.badge.on{background:var(--lime-soft); color:var(--lime)}
.badge.done{background:var(--surface-3); color:var(--ink-soft)}
.temple{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.temple li{display:flex; align-items:baseline; gap:12px; font-size:15.5px}
.temple .nm{font-family:"Gowun Batang",serif; font-weight:700; min-width:5.5em}
.temple .bar{flex:1; height:6px; border-radius:3px; background:var(--surface-3); position:relative; overflow:hidden}
.temple .bar span{position:absolute; top:0; bottom:0; background:var(--accent); border-radius:3px}
.temple .yr{font-size:13px; color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap}
.note-box{margin-top:22px; padding:18px 20px; background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:0 3px 3px 0; font-size:14.5px; color:var(--ink-soft)}
@media (max-width:860px){ .two{grid-template-columns:1fr} }

/* ── 연혁 ── */
.history{display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(32px,5vw,64px)}
.hrow{display:flex; gap:20px; padding:15px 0; border-bottom:1px solid var(--line); align-items:baseline}
.hrow .y{font-family:"Gowun Batang",serif; font-weight:700; font-size:15px; color:var(--accent);
  font-variant-numeric:tabular-nums; flex-shrink:0; min-width:5.2em}
.hrow .t{font-size:15px; color:var(--ink-soft)}
.hrow.key .t{color:var(--ink); font-weight:500}
.hrow.key .t b{color:var(--accent)}
@media (max-width:760px){ .history{grid-template-columns:1fr} }

/* ── 기업현황 ── */
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px)}
.info-table{width:100%; border-collapse:collapse; font-size:15px}
.info-table th,.info-table td{text-align:left; padding:13px 0; border-bottom:1px solid var(--line); vertical-align:top}
.info-table th{width:33%; color:var(--ink-faint); font-weight:500; white-space:nowrap}
.info-table td{color:var(--ink); font-variant-numeric:tabular-nums}
.lic-card{background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:26px; display:grid; gap:18px}
.lic{display:grid; gap:4px}
.lic .k{font-size:13px; color:var(--teal); font-weight:600; letter-spacing:.04em}
.lic .v{font-family:"Gowun Batang",serif; font-size:17.5px; font-weight:700; line-height:1.4}
.lic .n{font-size:13.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums}
@media (max-width:860px){ .info-grid{grid-template-columns:1fr} }

/* ── 푸터 ── */
.site-foot{background:var(--accent); color:var(--accent-ink); padding-block:44px 38px}
.foot-in{display:flex; flex-wrap:wrap; gap:28px 48px; align-items:flex-start}
.foot-brand{display:flex; align-items:center; gap:11px}
.foot-brand img{width:30px; height:30px}
.foot-brand .nm{font-family:"Gowun Batang",serif; font-size:19px; font-weight:700}
.foot-info{font-size:14px; line-height:1.9; opacity:.88}
.foot-info .sl{font-family:"Gowun Batang",serif; font-size:16px; opacity:1; margin-bottom:8px}
.foot-copy{margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,.18);
  font-size:12.5px; opacity:.7}
:root:not([data-theme="light"]) .foot-copy{border-top-color:rgba(0,0,0,.2)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .foot-copy{border-top-color:rgba(0,0,0,.25)} }

/* ── 드롭다운 (hover + focus-within, JS 없음) ── */
.dd{position:relative}
.dd>.dd-btn{appearance:none; background:none; border:0; padding:6px 0; cursor:pointer;
  font:inherit; font-size:15px; font-weight:500; color:var(--ink-soft);
  border-bottom:2px solid transparent; display:inline-flex; align-items:center; gap:5px;
  transition:color .15s, border-color .15s}
.dd>.dd-btn::after{content:""; width:5px; height:5px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.7;
  transition:transform .18s}
.dd:hover>.dd-btn,.dd:focus-within>.dd-btn{color:var(--ink); border-color:var(--accent)}
.dd:hover>.dd-btn::after,.dd:focus-within>.dd-btn::after{transform:rotate(225deg) translateY(-2px)}
.dd-menu{position:absolute; top:100%; left:-12px; z-index:60; min-width:270px; margin-top:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:3px;
  box-shadow:var(--shadow); padding:7px; display:none; gap:1px}
/* 버튼과 메뉴 사이 10px 틈을 덮어, 마우스가 내려오는 동안 닫히지 않게 함 */
.dd-menu::before{content:""; position:absolute; left:0; right:0; top:-11px; height:11px}
.dd:hover>.dd-menu,.dd:focus-within>.dd-menu{display:grid}
.dd-menu a{display:block; padding:10px 13px; font-size:14.5px; font-weight:400;
  color:var(--ink-soft); border-radius:2px; border-bottom:0!important}
.dd-menu a:hover{background:var(--surface-2); color:var(--ink)}
.dd-menu a .yr{font-size:12px; color:var(--ink-faint); display:block; margin-top:1px}

@media (max-width:860px){
  .head-in{height:auto; flex-wrap:wrap; padding-block:13px; gap:12px 20px}
  .nav{display:flex; width:100%; margin-left:0; gap:6px 16px; font-size:14px; flex-wrap:wrap}
  .head-tel{margin-left:auto}
  .dd-menu{left:0; right:0; min-width:0}
}

/* ── 실적 카드 링크 ── */
a.work{color:inherit}
a.work .body h3{transition:color .15s}
a.work:hover .body h3{color:var(--accent)}
.work .more{margin-top:12px; font-size:13.5px; font-weight:500; color:var(--accent);
  display:inline-flex; align-items:center; gap:5px}
.work .more::after{content:"→"; transition:transform .2s}
a.work:hover .more::after{transform:translateX(3px)}

/* ── 상세페이지 ── */
.crumb{font-size:13.5px; color:var(--ink-faint); padding-top:28px}
.crumb a:hover{color:var(--ink); text-decoration:underline}
.crumb span{margin-inline:7px; opacity:.5}
.detail-head{padding-block:22px clamp(32px,4vw,52px)}
.detail-head h1{font-size:clamp(30px,4.4vw,52px); line-height:1.24; margin-top:8px}
.detail-head .sub{font-size:clamp(16px,1.5vw,19px); color:var(--teal);
  font-family:"Gowun Batang",serif; margin:14px 0 0}
.detail-hero img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:3px; box-shadow:var(--shadow)}
.detail-hero figcaption{font-size:13px; color:var(--ink-faint); margin-top:10px}
.award-strip{display:grid; gap:10px; margin-top:clamp(32px,4vw,48px)}
.award{display:flex; gap:14px; align-items:baseline; padding:16px 20px;
  background:var(--lime-soft); border-left:3px solid var(--lime); border-radius:0 3px 3px 0}
.award .k{font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--lime); white-space:nowrap}
.award .v{font-size:15.5px; font-weight:500}
.spec{width:100%; border-collapse:collapse; font-size:15.5px}
.spec th,.spec td{text-align:left; padding:15px 0; border-bottom:1px solid var(--line); vertical-align:top}
.spec th{width:6.5em; color:var(--ink-faint); font-weight:500; white-space:nowrap}
.spec tr:first-child th,.spec tr:first-child td{border-top:1px solid var(--line)}
.ctx{background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:26px}
.ctx h3{font-size:18px; margin-bottom:12px}
.ctx p{margin:0; font-size:15px; color:var(--ink-soft); line-height:1.75; word-break:keep-all}
.ctx .span{margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
  font-size:14px; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.pager{display:flex; gap:16px; justify-content:space-between; border-top:1px solid var(--line);
  padding-top:26px; margin-top:clamp(40px,5vw,64px); flex-wrap:wrap}
.pager a{font-size:15px; max-width:46%}
.pager .lb{font-size:12.5px; color:var(--ink-faint); display:block; margin-bottom:3px}
.pager .nm{font-family:"Gowun Batang",serif; font-weight:700}
.pager a:hover .nm{color:var(--accent)}
.pager .next{text-align:right; margin-left:auto}

/* ── CI 색상 스와치 ── */
.swatches{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.sw{border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--surface)}
.sw .chipc{height:96px}
.sw .meta{padding:14px 16px}
.sw .pt{font-size:12.5px; font-weight:600; letter-spacing:.06em; color:var(--teal)}
.sw .hex{font-family:"IBM Plex Sans KR",monospace; font-size:15px; font-weight:600;
  font-variant-numeric:tabular-nums; margin-top:2px}
.sw .use{font-size:13px; color:var(--ink-faint); margin-top:3px}
@media (max-width:760px){ .swatches{grid-template-columns:repeat(2,1fr)} }
@media (max-width:440px){ .swatches{grid-template-columns:1fr} }
.logo-box{background:var(--surface); border:1px solid var(--line); border-radius:3px;
  padding:34px; display:grid; place-items:center; gap:16px}
.logo-box img{max-height:78px; width:auto}
.logo-box .cap{font-size:13px; color:var(--ink-faint); text-align:center}
.logo-box.inv{background:var(--accent)}
.logo-box.inv img{filter:invert(1) brightness(1.7)}
.logo-box.inv .cap{color:var(--accent-ink); opacity:.82}

/* ── 조직도 ── */
.org{display:grid; gap:14px; justify-items:center}
.org .top{background:var(--accent); color:var(--accent-ink); font-family:"Gowun Batang",serif;
  font-weight:700; font-size:18px; padding:14px 34px; border-radius:3px}
.org .stem{width:1px; height:22px; background:var(--line-strong)}
.org .row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; width:100%}
.org .unit{background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:0 0 3px 3px; padding:18px 16px; text-align:center}
.org .unit:nth-child(2){border-top-color:var(--teal)}
.org .unit:nth-child(3){border-top-color:var(--lime)}
.org .unit:nth-child(4){border-top-color:var(--line-strong)}
.org .unit h3{font-size:17px; margin-bottom:8px}
.org .unit p{margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.6}
@media (max-width:760px){ .org .row{grid-template-columns:repeat(2,1fr)} }

/* ── 인증·수상 ── */
.awgroup{margin-bottom:clamp(32px,4vw,48px)}
.awgroup h3{font-size:20px; margin-bottom:16px}
.awlist{list-style:none; margin:0; padding:0}
.awlist li{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--line)}
.awlist li:first-child{border-top:1px solid var(--line)}
.awlist .y{font-family:"Gowun Batang",serif; font-weight:700; font-size:14.5px; color:var(--accent);
  font-variant-numeric:tabular-nums; min-width:5em}
.awlist .t{flex:1 1 auto; font-size:15.5px; min-width:min(100%,18ch)}
.awlist .t b{color:var(--accent)}
.awlist .w{font-size:13px; color:var(--ink-faint)}

/* ── 오시는길 ── */
.addr-card{background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:30px}
.addr-card .big-addr{font-family:"Gowun Batang",serif; font-size:clamp(20px,2.2vw,26px);
  font-weight:700; line-height:1.5}
.addr-card .zip{font-size:14px; color:var(--ink-faint); margin-top:6px}
.contact{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:3px; overflow:hidden; margin-top:24px}
.contact div{background:var(--surface); padding:16px 20px; display:flex; gap:16px; align-items:baseline}
.contact .k{font-size:13px; color:var(--ink-faint); min-width:5em}
.contact .v{font-size:16px; font-variant-numeric:tabular-nums}

/* ══════ taste-skill 교정 ══════ */

/* 분할헤더 금지 → 헤드라인 위, 설명 아래 스택 */
.sec-head{display:block; margin-bottom:clamp(30px,3.4vw,44px)}
.sec-head p{margin:12px 0 0; max-width:58ch}

/* 액센트 락: 네이비 하나. 아이브로는 중립색 */
.eyebrow{color:var(--ink-faint); letter-spacing:.12em}
.work .sub{color:var(--ink-faint)}
.biz article,.biz article:nth-child(2),.biz article:nth-child(3),.biz article:nth-child(4){border-top-color:var(--accent)}

/* 촉각 피드백 */
a.work:active,.dd-menu a:active,.cta:active{transform:translateY(1px)}

/* 히어로 CTA */
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.cta{display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:3px;
  font-size:15.5px; font-weight:600; white-space:nowrap; transition:background .15s, transform .1s}
.cta.primary{background:var(--accent); color:var(--accent-ink)}
.cta.primary:hover{background:var(--ink)}
:root:not([data-theme="light"]) .cta.primary:hover{background:var(--surface-3); color:var(--ink)}
.cta.ghost{border:1px solid var(--line-strong); color:var(--ink)}
.cta.ghost:hover{background:var(--surface-2)}

/* 면허 스트립: 히어로 밖으로 */
.lic-strip{border-bottom:1px solid var(--line); background:var(--surface)}
.lic-strip .wrap{display:flex; flex-wrap:wrap; gap:14px 40px; padding-block:20px; align-items:baseline}
.lic-strip .lb{font-size:12.5px; color:var(--ink-faint); font-weight:600; letter-spacing:.1em}
.lic-strip .it{font-size:14.5px; color:var(--ink-soft)}
.lic-strip .it b{color:var(--ink); font-weight:600}

/* 사업분야: 균등 4카드 금지 → 비대칭 벤토 + 사진 셀 */
.bento{display:grid; grid-template-columns:2fr 1fr; gap:clamp(14px,1.6vw,20px)}
.bento .cell{border:1px solid var(--line); border-radius:3px; padding:clamp(24px,2.6vw,34px);
  background:var(--surface); display:flex; flex-direction:column; justify-content:flex-end; min-height:230px}
.bento .cell h3{font-size:clamp(21px,2.2vw,27px); margin-bottom:12px}
.bento .cell p{margin:0; font-size:15px; color:var(--ink-soft); line-height:1.65}
.bento .feature{position:relative; overflow:hidden; border:0; color:#fff; min-height:340px}
.bento .feature img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.bento .feature .veil{position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(10,18,30,.34) 10%, rgba(10,18,30,.88) 78%)}
.bento .feature .inner{position:relative}
.bento .feature h3{color:#fff}
.bento .feature p{color:rgba(255,255,255,.88)}
.bento .tinted{background:var(--accent-soft); border-color:transparent}
.bento .pair{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.6vw,20px); grid-column:1 / -1}
@media (max-width:820px){
  .bento{grid-template-columns:1fr}
  .bento .pair{grid-template-columns:1fr}
  .bento .cell{min-height:0}
  .bento .feature{min-height:280px}
}

/* 연혁: 전 행 하이라인 금지 → 3덩어리 묶음 */
.era{margin-bottom:clamp(30px,3.4vw,44px)}
.era-head{display:flex; align-items:baseline; gap:16px; padding-bottom:14px;
  border-bottom:2px solid var(--accent); margin-bottom:6px}
.era-head .r{font-family:"Gowun Batang",serif; font-weight:700; font-size:clamp(20px,2.2vw,26px);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.era-head .n{font-size:14px; color:var(--ink-faint)}
.era .hrow{border-bottom:0; padding:11px 0}
.era .hrow+.hrow{border-top:1px solid var(--line)}
.era .hrow .y{min-width:5.4em}

/* 공사개요: 하이라인 표 → 2열 스펙 카드 */
.specgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:3px; overflow:hidden}
/* 칸(> div)에만 여백. 안쪽 .k/.v까지 여백이 붙어 칸이 두 배로 커지던 문제 수정 */
.specgrid > div{background:var(--surface); padding:16px 20px}
.specgrid .k{font-size:12.5px; color:var(--ink-faint); font-weight:600; letter-spacing:.06em}
.specgrid .v{font-family:"Gowun Batang",serif; font-size:clamp(16px,1.5vw,18px); font-weight:700;
  line-height:1.5; margin-top:4px; word-break:keep-all; overflow-wrap:anywhere}
.specgrid .wide{grid-column:1 / -1}
@media (max-width:340px){ .specgrid{grid-template-columns:1fr} }

/* ══════ 메인 정리: 중복 → 진입점 ══════ */
.jump{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:3px; overflow:hidden}
.jump a{background:var(--surface); padding:18px 22px; display:flex; align-items:center;
  gap:14px; transition:background .15s}
.jump a:hover{background:var(--surface-2)}
.jump a:active{transform:translateY(1px)}
.jump .t{font-size:16px; font-weight:500}
.jump .d{font-size:13.5px; color:var(--ink-faint); margin-left:auto; text-align:right}
.jump a::after{content:"→"; color:var(--accent); font-size:15px; transition:transform .2s}
.jump a:hover::after{transform:translateX(3px)}
.more-link{display:inline-flex; align-items:center; gap:7px; margin-top:26px;
  font-size:15px; font-weight:600; color:var(--accent)}
.more-link::after{content:"→"; transition:transform .2s}
.more-link:hover::after{transform:translateX(3px)}
.sum-line{font-size:16.5px; color:var(--ink-soft); line-height:1.8; margin:0}
.sum-line b{color:var(--ink); font-weight:600}

/* 메인 연혁 요약은 5건 1열 (2열이면 끝에 빈 칸이 남음) */
.history{grid-template-columns:1fr}
.history .hrow:last-child{border-bottom:0}

/* ── 수주실적 전체 ───────────────────────────────── */
.rec-sum{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); margin-bottom:clamp(24px,3vw,36px)}
.rec-sum>div{background:var(--surface-2); padding:22px 24px}
.rec-sum dt{font-size:12.5px; color:var(--ink-soft); font-weight:500; margin-bottom:6px}
.rec-sum dd{margin:0; font-family:"Gowun Batang",serif; font-weight:700;
  font-size:clamp(26px,3vw,36px); line-height:1; font-variant-numeric:tabular-nums}
.rec-sum dd small{font-size:.42em; font-weight:400; margin-left:3px; color:var(--ink-soft);
  font-family:"IBM Plex Sans KR",sans-serif}
.rec-bar{display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center;
  padding-bottom:16px; border-bottom:1px solid var(--line)}
.rec-bar input{flex:0 0 260px; font:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:3px;
  padding:9px 12px; -webkit-appearance:none}
.rec-bar input:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent}
.rec-tabs{display:flex; flex-wrap:wrap; gap:4px}
.rec-tabs button{font:inherit; font-size:13.5px; color:var(--ink-soft); background:none;
  border:1px solid transparent; border-radius:3px; padding:5px 10px; cursor:pointer;
  font-variant-numeric:tabular-nums}
.rec-tabs button:hover{color:var(--ink); background:var(--surface-2)}
.rec-tabs button.on{color:var(--accent-ink); background:var(--accent); font-weight:600}
.rec-count{font-size:13.5px; color:var(--ink-faint); margin:14px 0 0}
.rec-count b{color:var(--ink); font-variant-numeric:tabular-nums}
.rec{width:100%; border-collapse:collapse; font-size:14.5px; margin-top:8px}
.rec th{text-align:left; font-size:12.5px; font-weight:600; letter-spacing:.06em;
  color:var(--ink-faint); padding:10px 14px 10px 0; border-bottom:1px solid var(--line-strong)}
.rec td{padding:13px 14px 13px 0; border-bottom:1px solid var(--line); vertical-align:top}
.rec tr:hover td{background:var(--surface-2)}
.rec .yr{width:4.5em; color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap}
.rec .nm{font-weight:500; line-height:1.5}
.rec .cl{width:22%; color:var(--ink-soft)}
.rec .pd{width:13em; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap}
.rec .na{color:var(--ink-faint)}
.tag{display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.04em;
  padding:1px 7px; border-radius:2px; vertical-align:2px; white-space:nowrap}
.tag.go{background:var(--lime-soft); color:var(--lime)}
.tag.ck{background:var(--surface-3); color:var(--ink-faint)}
.rec-note{font-size:13px; color:var(--ink-faint); margin:18px 0 0}
@media (max-width:760px){
  .rec-sum{grid-template-columns:1fr}
  .rec-bar input{flex:1 1 100%}
  .rec .pd{display:none}
  .rec .cl{width:32%; font-size:13.5px}
}

.rec-none{padding:40px 0; text-align:center; color:var(--ink-faint); font-size:14.5px}

/* ── 첫 화면 슬라이드 쇼 (2026-10-08) ── */
.hs-wrap{position:relative}
.hs{position:sticky; top:0; height:100svh; min-height:560px; padding:0; overflow:hidden; display:flex; flex-direction:column; color:#fff; background:#0B1526}
.hs-gap{height:75svh}
.hs-up{position:absolute; left:0; right:0; bottom:0; z-index:2; will-change:transform; background:rgba(8,16,32,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-top:1px solid rgba(255,255,255,.16); color:#fff}
.hs-band{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 40px; padding-block:18px}
.hs-nums{display:flex; flex-wrap:wrap; gap:8px 36px; margin:0}
.hs-nums dt{font-size:12.5px; color:#AFC3D6; margin:0}
.hs-nums dd{margin:0; font-family:"Gowun Batang",serif; font-weight:700; font-size:clamp(22px,2.2vw,28px); line-height:1.2}
.hs-nums dd small{font-family:"IBM Plex Sans KR",sans-serif; font-weight:400; font-size:.5em; margin-left:2px; color:#D7E2EC}
.hs-lic{margin:0; display:flex; flex-direction:column; gap:2px; font-size:13.5px; color:#D7E2EC; border-left:2px solid #A9E06B; padding-left:14px}
.hs-lic b{color:#fff; font-weight:600}
.hs-foot{will-change:transform}
.hs-media{position:absolute; inset:0}
.hs-slide{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; opacity:0; transition:opacity 1.4s ease}
.hs-slide.is-on{opacity:1}
.hs-veil{position:absolute; inset:0; background:#081020; opacity:.35; transition:opacity .4s ease}
.hs-body{position:relative; flex:1; will-change:transform,opacity; display:flex; flex-direction:column; justify-content:center; padding-block:calc(84px + clamp(40px,6vw,88px)) 24px}
.hs .eyebrow{color:#fff; font-size:clamp(18px,2vw,26px); font-weight:600; letter-spacing:.06em; margin:0 0 18px; padding-left:16px; border-left:3px solid #A9E06B; line-height:1.3}
.hs h1{font-size:clamp(42px,7vw,96px); line-height:1.12; color:#fff}
.hs .hero-lede{color:#E3EAF1; max-width:40ch}
.hs .cta.primary{background:#fff; color:#102A55}
.hs .cta.primary:hover{background:#DCE7F2; color:#102A55}
.hs .cta.ghost{border-color:rgba(255,255,255,.7); color:#fff}
.hs .cta.ghost:hover{background:rgba(255,255,255,.12)}
.hs-foot{position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; padding-block:0 28px}
.hs-ctl{display:flex; align-items:center; gap:4px}
.hs-dot{width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center}
.hs-dot span{display:block; width:18px; height:4px; background:rgba(255,255,255,.45); transition:width .4s, background .4s}
.hs-dot.is-on span{width:36px; background:#fff}
.hs-pp{margin-left:8px; min-width:44px; height:44px; padding:0 14px; border:1px solid rgba(255,255,255,.5); background:none; color:#fff; font:inherit; font-size:13px; cursor:pointer}
.hs-dot:focus-visible,.hs-pp:focus-visible{outline:2px solid #fff; outline-offset:2px}
.hs-cap{display:flex; flex-direction:column; font-size:14px; line-height:1.6; color:#D7E2EC; border-left:2px solid #3F8A16; padding-left:14px}
.hs-cap b{color:#fff; font-weight:600}
@media (prefers-reduced-motion:reduce){ .hs-slide,.hs-veil,.hs-dot span{transition:none} .hs{position:relative} .hs-gap{display:none} }

/* 메인: 머리글을 사진 위에 투명하게 겹침, 스크롤하면 원래 머리글로 */
.site-head.over{position:fixed; left:0; right:0; top:0; background:transparent; border-bottom-color:transparent; backdrop-filter:none; transition:background .3s, border-color .3s}
.site-head.over .brand img.word{filter:brightness(0) invert(1)}
.site-head.over .dd>.dd-btn,.site-head.over .head-tel{color:rgba(255,255,255,.88)}
.site-head.over .dd:hover>.dd-btn,.site-head.over .dd:focus-within>.dd-btn{color:#fff; border-color:#fff}
.site-head.over.scrolled{background:color-mix(in srgb, var(--bg) 92%, transparent); border-bottom-color:var(--line); backdrop-filter:blur(10px)}
.site-head.over.scrolled .brand img.word{filter:var(--logo-filter)}
.site-head.over.scrolled .dd>.dd-btn{color:var(--ink-soft)}
.site-head.over.scrolled .head-tel{color:var(--ink-faint)}
.site-head.over.scrolled .dd:hover>.dd-btn,.site-head.over.scrolled .dd:focus-within>.dd-btn{color:var(--ink); border-color:var(--accent)}

/* ── 휴대폰 ☰ 메뉴 (2026-10-08) ── */
.menu-btn{display:none}
@media (max-width:860px){
  .head-in{height:64px; flex-wrap:nowrap; padding-block:0}
  .brand img.sym{width:34px; height:34px}
  .brand img.word{height:26px}
  .head-tel{display:none}
  .nav{display:none}
  .menu-btn{display:flex; flex-direction:column; justify-content:center; gap:5px; margin-left:auto; width:44px; height:44px; padding:0 10px; border:0; background:none; color:var(--ink); cursor:pointer}
  .menu-btn span{display:block; height:2px; background:currentColor; transition:transform .2s, opacity .2s}
  .site-head.open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-head.open .menu-btn span:nth-child(2){opacity:0}
  .site-head.open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .site-head.open{background:var(--surface); backdrop-filter:none}
  .site-head.open .nav{display:flex; flex-direction:column; position:fixed; top:64px; left:0; right:0; bottom:0; overflow:auto;
    margin:0; padding:4px 16px 40px; gap:0; flex-wrap:nowrap; background:var(--surface); border-top:1px solid var(--line)}
  .site-head.open .dd{border-bottom:1px solid var(--line)}
  .site-head.open .dd>.dd-btn{width:100%; padding:16px 0 8px; font-size:17px; font-weight:600; color:var(--ink); border:0; pointer-events:none}
  .site-head.open .dd>.dd-btn::after{display:none}
  .site-head.open .dd-menu{display:grid; position:static; min-width:0; margin:0 0 10px; padding:0; border:0; box-shadow:none; background:none}
  .site-head.open .dd-menu::before{display:none}
  .site-head.open .dd-menu a{padding:9px 0; font-size:15.5px}
  /* 메인 첫 화면 */
  .site-head.over .menu-btn{color:#fff}
  .site-head.over.scrolled .menu-btn,.site-head.over.open .menu-btn{color:var(--ink)}
  .site-head.over.open .brand img.word{filter:var(--logo-filter)}
  .hs-body{padding-block:calc(64px + 28px) 16px}
  .hs .eyebrow{font-size:16px; margin-bottom:12px}
  .hs h1{font-size:clamp(36px,10vw,52px)}
  .hs .hero-lede{font-size:15px; margin-top:16px}
  .hs .hero-cta{margin-top:22px}
  .hs-foot{padding-block:0 14px}
  .hs-cap{font-size:12.5px}
  .hs-band{padding-block:14px; gap:10px}
  .hs-nums{display:grid; grid-template-columns:repeat(4,auto); justify-content:space-between; width:100%; gap:4px 14px}
  .hs-nums dt{font-size:11px}
  .hs-nums dd{font-size:20px}
  .hs-lic{font-size:12px}
}

/* 드롭다운 넉넉하게 (2026-10-08) */
@media (min-width:861px){
  .dd-menu{min-width:320px; padding:12px; margin-top:14px; border-radius:4px}
  .dd-menu::before{top:-15px; height:15px}
  .dd-menu a{padding:13px 16px; font-size:16px}
}
/* 공사명 설명: 밝은 사진 위에서도 읽히게 짙은 반투명 바탕 */
.hs-cap{background:rgba(8,16,32,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:10px 16px 10px 14px; border-radius:2px}
@media (min-width:861px){ .nav{gap:30px} .dd>.dd-btn{font-size:16.5px} }

/* 맨 아래 파란 띠: 내용을 좌우로 펼쳐 높이 줄임 (2026-10-08) */
.site-foot{padding-block:22px 20px}
.foot-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px}
.foot-brand .nm{font-size:17px}
.foot-brand .sl{font-family:"Gowun Batang",serif; font-size:14px; opacity:.75; margin-left:6px}
.site-foot .foot-copy{margin:0; padding:0; border:0; font-size:12.5px; opacity:.7}
.foot-list{list-style:none; margin:12px 0 0; padding:12px 0 0; border-top:1px solid rgba(255,255,255,.18);
  display:flex; flex-wrap:wrap; gap:4px 0; font-size:13.5px; line-height:1.6; opacity:.88}
.foot-list li+li::before{content:"·"; margin:0 10px; opacity:.6}
.foot-list2{margin-top:2px; padding-top:0; border-top:0}

/* 업무포털 바로가기 (오른쪽 위) */
.portal-btn{flex:none; font-size:14px; font-weight:600; color:var(--accent); border:1.5px solid var(--accent); border-radius:999px; padding:7px 16px; white-space:nowrap; transition:background .15s, color .15s}
.portal-btn:hover{background:var(--accent); color:#fff}
.site-head.over .portal-btn{color:#fff; border-color:rgba(255,255,255,.85)}
.site-head.over .portal-btn:hover{background:#fff; color:var(--ink)}
.site-head.over.scrolled .portal-btn,.site-head.over.open .portal-btn{color:var(--accent); border-color:var(--accent)}
@media (max-width:860px){
  .portal-btn{margin-left:auto; font-size:13px; padding:6px 12px}
  .portal-btn+.menu-btn{margin-left:4px}
}