/* ============================================================
   hkkor.css — 하위 페이지 공통 셸 (에디토리얼 디자인 시스템)
   hkkor_about.html 의 디자인 언어를 SSOT로 추출.
   대상: greeting / org / branches / cert / location / support /
        quote / product_detail
   ※ 홈(index)은 자체 인라인 스타일 사용 — 이 파일과 무관.
   ============================================================ */

:root{
  --ink:#1a1613; --ink2:#2c2620; --paper:#faf7f2; --paper2:#f1ebe1;
  --copper:#b06a2c; --copper-d:#915518; --muted:#7a7066;
  --line:#e4dcd0; --line-d:#3a332b;
  --mono:'JetBrains Mono',monospace; --serif:'Noto Serif KR',serif; --pf:'Playfair Display',serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-gutter:stable}
body{font-family:'Pretendard',sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.label{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:2px;color:var(--copper);text-transform:uppercase}
.pf{font-family:var(--pf);font-style:italic;font-weight:500}
.mono{font-family:var(--mono)}

/* ── header ── */
header{position:sticky;top:0;z-index:60;background:rgba(250,247,242,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.brand{display:block;width:230px;height:34px;text-indent:-9999px;overflow:hidden;white-space:nowrap;background:url('http://hkkor.com/images/common/logo.webp') left center/contain no-repeat;flex:0 0 auto}
.brand small{display:none}
.menu{display:flex;gap:34px;font-weight:600;font-size:15px}
.menu a{position:relative;padding:4px 0;color:var(--ink2);transition:.18s}
.menu a.on,.menu a:hover{color:var(--copper)}
.menu a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--copper)}
.nav-right{display:flex;align-items:center;gap:16px}
.mini-chan{display:flex;gap:8px}
.mini-chan a{width:30px;height:30px;border-radius:7px;background:#efe9df;display:flex;align-items:center;justify-content:center;transition:.15s}
.mini-chan a:hover{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.mini-chan img{width:16px;height:16px}
.btn-q{background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:2px;font-weight:700;font-size:14px;letter-spacing:.3px;white-space:nowrap;transition:.2s}
.btn-q:hover{background:var(--copper)}

/* ── page banner (하위 페이지 상단) ── */
.pbanner{position:relative;background:var(--paper)}
.pbanner > .wrap{padding-top:62px;padding-bottom:44px}
/* 서브탭이 없는 페이지(견적의뢰·고객지원 등)는 배너 하단을 선으로 닫아준다.
   서브탭이 배너 안에 있는 페이지는 서브탭이 그 역할을 하므로 제외. */
.pbanner{border-bottom:1px solid var(--line)}
.pbanner:has(.subnav){border-bottom:0}
.pbanner .eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.pbanner .eyebrow span{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:2px;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.pbanner .eyebrow .ln{flex:1;height:1px;background:var(--line);min-width:20px}
.pbanner h1{font-size:62px;line-height:1.02;font-weight:900;letter-spacing:-2.4px;color:var(--ink)}
.pbanner h1 .pf{display:block;font-size:25px;font-weight:500;letter-spacing:0;color:var(--copper);margin-top:14px;line-height:1.2}
.pbanner .lead{margin-top:24px;font-size:17px;line-height:1.8;color:var(--muted);max-width:640px}

/* ── sub navigation ── */
.subnav{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.4)}
.subnav .wrap{display:flex;flex-wrap:wrap}
.subnav a{flex:1;text-align:center;padding:19px 8px;font-size:15px;font-weight:600;color:var(--muted);border-right:1px solid var(--line);transition:.2s;white-space:nowrap}
.subnav a:last-child{border-right:0}
.subnav a:hover{color:var(--ink);background:#fff}
.subnav a.on{color:var(--ink);font-weight:800;position:relative}
.subnav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--copper)}

/* ── CTA ── */
.cta{background:var(--ink);color:var(--paper);padding:88px 0;position:relative;overflow:hidden}
.cta::before{content:"한국산업";position:absolute;right:-14px;top:50%;transform:translateY(-50%);font-weight:900;font-size:148px;color:rgba(255,255,255,.022);letter-spacing:-6px;line-height:1;pointer-events:none;white-space:nowrap}
.cta .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px}
.cta h3{font-size:38px;font-weight:900;letter-spacing:-1.4px;line-height:1.22}
.cta h3 b{color:var(--copper)}
.cta p{color:#a89e92;margin-top:14px;font-size:16px}
.cta a{display:inline-flex;align-items:center;gap:12px;background:var(--copper);color:#fff;padding:19px 36px;border-radius:2px;font-weight:800;font-size:17px;white-space:nowrap;transition:.2s}
.cta a:hover{background:#fff;color:var(--ink)}

/* ── footer ── */
footer{background:#100d0a;color:#8c8378;padding:64px 0 38px;font-size:14px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;border-bottom:1px solid #2a241e;padding-bottom:44px}
.f-brand{color:#fff;font-weight:800;font-size:20px;letter-spacing:-.4px}
.f-brand small{display:block;font-family:var(--mono);font-size:10px;color:#6f665b;letter-spacing:1.5px;margin-top:6px;font-weight:500}
.f-brand .tel{margin-top:22px;font-family:var(--mono);font-size:22px;color:var(--copper);font-weight:700;letter-spacing:-.5px}
.f-col h5{color:#fff;font-size:14px;font-weight:700;margin-bottom:16px}
.f-col a{display:block;padding:7px 0;color:#8c8378;font-size:14px;transition:.15s}
.f-col a:hover{color:var(--copper)}
.f-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:26px;font-size:12.5px;color:#5e564c}
.f-bot .mono{font-family:var(--mono);letter-spacing:.5px}

/* ── responsive ── */
@media(max-width:980px){
  .menu,.mini-chan,.btn-q{display:none}
  .wrap{padding:0 22px}
  .pbanner > .wrap{padding-top:44px;padding-bottom:34px}
  .pbanner h1{font-size:40px;letter-spacing:-1.4px}
  .pbanner h1 .pf{font-size:19px}
  .pbanner .lead{font-size:15.5px;margin-top:18px}
  .subnav a{flex:0 0 33.333%;border-bottom:1px solid var(--line);padding:15px 6px;font-size:14px}
  .cta{padding:62px 0}
  .cta .wrap{grid-template-columns:1fr;gap:26px}
  .cta h3{font-size:28px}
  .cta::before{font-size:96px}
  .f-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:560px){
  .pbanner h1{font-size:33px}
  .subnav a{flex:0 0 50%}
  .f-grid{grid-template-columns:1fr}
  .f-bot{flex-direction:column;gap:8px}
}