@charset "utf-8";
/* ============================================================================
   (주)원석하이테크 — screen-ui.css  [단일 CSS 소스 · 2026 리뉴얼 · SIMPLE]
   무드: 딥 네이비 + 레드 포인트, 여백 넉넉한 심플·모던 (cubebio·enzcable·gwangjin 참고)
   규칙: 폭 1200px / 480px까지 반응형 / 1rem=10px / Noto Sans KR 단일
        폰트 4종(3.6·2.4·1.8·1.5rem) / 인라인스타일 지양
   ※ 하위호환: 기존 .hd-* 클래스 셀렉터 전량 유지 → 서브페이지 자동 리스킨
      토큰 별칭 유지: --navy=메인 레드 / --accent=포인트 네이비
   ========================================================================== */

/* ===== 00 RESET & BASE ==================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:62.5%; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Noto Sans KR','Noto Sans',sans-serif;
  font-size:1.8rem; font-weight:400; line-height:1.7;
  color:var(--text); background:#fff; min-height:100vh;
  display:flex; flex-direction:column; word-break:keep-all;
  letter-spacing:-.01em; -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; border:0; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,dl,dd,dt,figure{ margin:0; }
table{ border-collapse:collapse; border-spacing:0; }
button{ font-family:inherit; cursor:pointer; }
.blind{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; }
::selection{ background:var(--navy); color:#fff; }

/* ===== 01 TOKENS ========================================================== */
:root{
  /* 별칭 유지: --navy*=메인 레드 / --accent*=포인트 네이비 */
  --navy:#e1121f; --navy-2:#f5333f; --navy-ink:#b30f19; --navy-soft:#fdecec;
  --accent:#16235e; --accent-2:#233478; --accent-ink:#0f1a45;
  /* ink — 다크 섹션/헤더/히어로 */
  --ink:#0e1526; --ink-2:#16203a; --ink-line:rgba(255,255,255,.12);
  /* text */
  --strong:#141b28; --text:#3c4655; --muted:#6a7486; --faint:#9aa4b2;
  --line:#e6e9f0; --line-2:#d6dbe4; --bg-soft:#f5f7fb; --white:#fff;
  /* font */
  --fs-title:3.6rem; --fs-sub:2.4rem; --fs-body:1.8rem; --fs-cap:1.5rem;
  /* layout */
  --wrap:1200px; --gutter:2rem; --radius:1.2rem; --radius-s:.8rem;
  --shadow:0 1.2rem 3.2rem rgba(16,30,60,.08);
  --shadow-lg:0 1.8rem 4.6rem rgba(16,30,60,.13);
  --ease:cubic-bezier(.22,1,.36,1);
  --header-h:8rem;
}

/* ===== 02 LAYOUT ========================================================== */
.hd-wrap{ width:var(--wrap); max-width:100%; margin:0 auto; padding:0 2rem; }
main{ flex:1 0 auto; display:block; }
.hd-section{ padding:9rem 0; }
.hd-section--soft{ background:var(--bg-soft); }
.hd-section--tight{ padding:5rem 0; }

/* ===== 03 HEADER · GNB (다크) =========================================== */
#hd-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(14,21,38,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background .3s var(--ease),box-shadow .3s,height .3s;
}
#hd-header.is-scrolled{ background:rgba(11,16,30,.97); box-shadow:0 .6rem 2rem rgba(0,0,0,.28); }
body{ padding-top:var(--header-h); }
.hd-header__inner{
  position:relative; width:var(--wrap); max-width:100%; margin:0 auto; padding:0 2rem;
  height:var(--header-h); display:flex; align-items:center; justify-content:center; transition:height .3s var(--ease);
}
#hd-header.is-scrolled .hd-header__inner{ height:6.6rem; }
.hd-logo{ position:absolute; left:2rem; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; }
.hd-logo img{ height:3.8rem; width:auto; }
.hd-logo img.hd-logo--dark{ display:none; }
.hd-gnb{ display:flex; height:100%; }
.hd-gnb__item{ display:flex; align-items:center; }
.hd-gnb__link{
  position:relative; display:flex; align-items:center; height:100%;
  padding:0 2.6rem; font-size:1.7rem; font-weight:500; color:rgba(255,255,255,.8);
  white-space:nowrap; transition:color .18s;
}
.hd-gnb__link:hover,.hd-gnb__link.is-active{ color:#fff; }
.hd-gnb__link::after{
  content:''; position:absolute; left:2.6rem; right:2.6rem; bottom:2.4rem; height:.2rem;
  background:var(--navy); transform:scaleX(0); transform-origin:center; transition:transform .26s var(--ease);
}
.hd-gnb__link:hover::after,.hd-gnb__link.is-active::after{ transform:scaleX(1); }
#hd-header.is-scrolled .hd-gnb__link::after{ bottom:1.7rem; }
/* 2차 드롭다운 */
.hd-drop{
  display:none; position:fixed; top:var(--header-h); left:0; right:0; z-index:200;
  background:rgba(11,16,30,.98); border-top:.2rem solid var(--navy); box-shadow:0 1.4rem 3rem rgba(0,0,0,.3);
  justify-content:center; white-space:nowrap;
}
.hd-gnb__item:hover .hd-drop{ display:flex; }
#hd-header.is-scrolled .hd-drop{ top:6.6rem; } /* 스크롤 축소 헤더(6.6rem)와 드롭다운 사이 틈 방지 */
.hd-drop a{ display:flex; align-items:center; height:5.2rem; padding:0 2.8rem; font-size:var(--fs-cap); color:rgba(255,255,255,.68); transition:color .16s,background .16s; }
.hd-drop a:hover{ color:#fff; background:rgba(255,255,255,.05); }
.hd-drop a.is-active{ color:var(--navy-2); font-weight:700; }
/* 언어 스위처 (KO | EN pill) */
.hd-lang{
  position:absolute; right:2rem; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:.2rem; padding:.3rem;
  border:1px solid rgba(255,255,255,.18); border-radius:4rem; background:rgba(255,255,255,.05);
}
.hd-lang a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:3.6rem; height:2.6rem; padding:0 .8rem; border-radius:4rem;
  font-size:1.2rem; font-weight:700; letter-spacing:.08em;
  color:rgba(255,255,255,.55); transition:color .18s,background .18s;
}
.hd-lang a:hover{ color:#fff; }
.hd-lang a.is-active{ background:var(--navy); color:#fff; }

/* 햄버거 / 드로어 */
.hd-burger{ display:none; flex-direction:column; justify-content:center; gap:.5rem; width:4.4rem; height:4.4rem; background:none; border:0; padding:.4rem; }
.hd-burger span{ display:block; width:2.4rem; height:.2rem; background:#fff; border-radius:2px; transition:transform .3s var(--ease),opacity .2s,width .2s; }
.hd-burger.is-open span:nth-child(1){ transform:translateY(.7rem) rotate(45deg); }
.hd-burger.is-open span:nth-child(2){ opacity:0; width:0; }
.hd-burger.is-open span:nth-child(3){ transform:translateY(-.7rem) rotate(-45deg); }
.hd-nav-overlay{ display:none; position:fixed; inset:0; background:rgba(6,10,20,.5); z-index:90; }
.hd-nav-overlay.is-open{ display:block; }
.hd-drawer-close{ display:none; position:absolute; top:1.4rem; right:1.6rem; width:3.6rem; height:3.6rem; background:none; border:0; font-size:2rem; color:rgba(255,255,255,.7); line-height:1; z-index:1; }
/* 상단 스크롤 진행바 (얇게) */
#hd-progress{ position:fixed; top:0; left:0; height:.2rem; width:0; z-index:300; background:var(--navy); transition:width .1s linear; }

/* ===== 04 BREADCRUMB ===================================================== */
.hd-crumb{ display:none; }

/* ===== 05 SUB HERO (다크, 심플) ========================================= */
.sub-hero{ position:relative; overflow:hidden; background:linear-gradient(120deg,#0b1122 0%,var(--ink) 48%,#101d3c 100%); color:#fff; }
.sub-hero::before{ content:''; position:absolute; left:-12rem; bottom:-16rem; width:38rem; height:38rem; border-radius:50%; background:radial-gradient(circle,rgba(22,35,94,.55),transparent 70%); pointer-events:none; }
.sub-hero::after{ content:''; position:absolute; right:-10rem; top:-12rem; width:40rem; height:40rem; border-radius:50%; background:radial-gradient(circle,rgba(225,18,31,.16),transparent 70%); pointer-events:none; }
.sub-hero__inner{ position:relative; z-index:1; width:var(--wrap); max-width:100%; margin:0 auto; padding:6.6rem 2rem 8.6rem; }
.sub-hero__eyebrow{ font-size:1.4rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--navy-2); margin-bottom:1.8rem; }
.sub-hero__title{ font-size:4rem; font-weight:900; letter-spacing:-.02em; line-height:1.2; }
.sub-hero__desc{ margin-top:1.6rem; font-size:var(--fs-body); font-weight:300; line-height:1.7; color:rgba(255,255,255,.72); max-width:64rem; }
.sub-hero__crumb{ margin-top:2.6rem; font-size:1.35rem; letter-spacing:.02em; color:rgba(255,255,255,.5); display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.sub-hero__crumb span.cur{ color:rgba(255,255,255,.9); }

/* ===== 06 TAB MENU (히어로 하단 오버랩 pill 카드 — gwangjin pill-nav 응용) === */
.hd-subpage-title{ display:none; }
.hd-subnav{ position:relative; z-index:5; padding:0 2rem; margin-top:-3.2rem; }
.hd-subnav__inner{
  display:flex !important; flex-wrap:wrap; justify-content:center; gap:.5rem;
  width:fit-content; max-width:100%; margin:0 auto; padding:.8rem;
  background:#fff; border:1px solid var(--line); border-radius:1.6rem;
  box-shadow:0 1.4rem 3.6rem rgba(16,30,60,.14);
}
.hd-subnav__tab{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  height:4.8rem; padding:0 2.2rem; border-radius:1rem; white-space:nowrap;
  font-size:1.6rem; font-weight:500; color:var(--muted); line-height:1.3;
  transition:color .2s,background .2s,box-shadow .2s;
}
.hd-subnav__tab:hover{ color:var(--navy); background:var(--navy-soft); }
.hd-subnav__tab.is-active{ background:var(--navy); color:#fff; font-weight:700; box-shadow:0 .6rem 1.6rem rgba(225,18,31,.3); }

/* ===== 06.5 SECTION JUMP (제품 페이지 내 섹션 바로가기 탭) =============== */
/* 하단 9rem = '* + h2.hd-sectitle' 형제 마진과 겹침(collapse) — section 래핑 페이지(tempfire)도 동일 간격 보장 */
.hd-jump{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin:4.4rem 0 9rem; }
.hd-jump__tab{
  display:inline-flex; align-items:center; gap:.9rem;
  height:5rem; padding:0 2.6rem; border:1px solid var(--line-2); border-radius:1rem;
  background:#fff; font-size:1.7rem; font-weight:700; color:var(--strong); white-space:nowrap;
  transition:color .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.hd-jump__tab::before{ content:''; width:.7rem; height:.7rem; border-radius:2px; background:var(--navy); flex-shrink:0; }
.hd-jump__tab:hover{ color:var(--navy); border-color:var(--navy); box-shadow:0 .8rem 2rem rgba(225,18,31,.12); transform:translateY(-2px); }
/* 앵커 타깃 — 고정 헤더에 가리지 않도록 여유 */
.hd-jump-target{ scroll-margin-top:calc(var(--header-h) + 2.4rem); }

/* ===== 07 COMMON PARTS ================================================== */
.hd-content{ width:var(--wrap); max-width:100%; margin:0 auto; padding:7rem 2rem 9rem; }

/* ── 타이포 위계 (상세페이지형) ─────────────────────────────
   메인 타이틀(.hd-titlebox)  : 3rem/900 중앙 + 레드 언더바
   페이지 리드(p.hd-lead)     : 2rem 중앙 정렬
   서브 타이틀(h2.hd-sectitle): 2.4rem/800 좌측 레드바 + 헤어라인
   소제목(h3.hd-lead·h3.hd-sectitle): 1.9rem/800 + 스몰 레드스퀘어
   본문(.hd-text)             : 1.8rem/400
   ─────────────────────────────────────────────────────── */

/* 페이지 메인 타이틀 — 중앙 정렬 + 레드 언더바 */
.hd-titlebox{ margin:0 0 2.6rem; text-align:center; }
.hd-titlebox span{ position:relative; display:inline-block; padding-bottom:1.8rem; font-size:3rem; font-weight:900; color:var(--strong); line-height:1.3; letter-spacing:-.02em; }
.hd-titlebox span::after{ content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:4.4rem; height:.34rem; border-radius:2px; background:linear-gradient(90deg,var(--navy),var(--navy-2)); }

/* 서브 타이틀(h2) — 레드 마커 + 우측 헤어라인 (구역 시작: 위 여백 넉넉히) */
.hd-sectitle{ position:relative; display:flex; align-items:center; gap:1.1rem; font-size:var(--fs-sub); font-weight:800; color:var(--strong); margin:0 0 3rem; letter-spacing:-.02em; }
* + h2.hd-sectitle{ margin-top:9rem; }
.hd-sectitle::before{ content:''; width:.5rem; height:2.2rem; border-radius:3px; background:linear-gradient(180deg,var(--navy),var(--navy-2)); flex-shrink:0; }
.hd-sectitle::after{ content:''; flex:1; height:1px; background:var(--line); margin-left:.6rem; }
.hd-sectitle--line{ border-bottom:0; }

/* 소제목(h3) — 스몰 레드 스퀘어 라벨 (서브타이틀과 확실히 구분) */
h3.hd-sectitle{ font-size:1.9rem; margin:0 0 1.8rem; }
h3.hd-sectitle::before{ width:.8rem; height:.8rem; border-radius:2px; }
h3.hd-sectitle::after{ display:none; }
h3.hd-lead{ display:flex; align-items:center; gap:.9rem; font-size:1.9rem; font-weight:800; color:var(--strong); line-height:1.4; letter-spacing:-.01em; margin:0 0 1.6rem; }
h3.hd-lead::before{ content:''; width:.8rem; height:.8rem; background:var(--navy); border-radius:2px; flex-shrink:0; }
/* 콘텐츠 흐름 중 뒤따르는 소제목은 위 여백으로 블록 구분 (cubebio `* + .sec-title` 패턴) */
* + h3.hd-lead,* + h3.hd-sectitle{ margin-top:5.6rem; }

/* 본문 텍스트 */
.hd-text{ font-size:var(--fs-body); line-height:1.9; color:var(--text); }
.hd-text p{ margin:0 0 1.6rem; } .hd-text p:last-child{ margin-bottom:0; }
.hd-text strong{ font-weight:700; color:var(--strong); }
.hd-lead{ font-size:2rem; font-weight:500; line-height:1.65; color:var(--strong); letter-spacing:-.02em; }
p.hd-lead{ text-align:center; max-width:78rem; margin-left:auto; margin-right:auto; }
.hd-cap{ font-size:var(--fs-cap); color:var(--muted); }

/* 버튼 (fill / ghost / nav) */
.hd-btn{
  display:inline-flex; align-items:center; gap:.8rem; height:5.4rem; padding:0 3rem;
  font-size:var(--fs-body); font-weight:700; color:#fff; background:var(--navy);
  border:0; border-radius:4rem; transition:background .2s,box-shadow .2s,transform .2s var(--ease);
}
.hd-btn::after{ content:'→'; transition:transform .2s var(--ease); }
.hd-btn:hover{ background:var(--navy-ink); box-shadow:0 1rem 2.4rem rgba(225,18,31,.28); transform:translateY(-.2rem); }
.hd-btn:hover::after{ transform:translateX(.4rem); }
.hd-btn--ghost{ background:transparent; color:#fff; border:.12rem solid rgba(255,255,255,.5); }
.hd-btn--ghost:hover{ background:rgba(255,255,255,.1); border-color:#fff; box-shadow:none; }
.hd-btn--nav{ color:var(--navy); background:#fff; border:.12rem solid var(--line-2); box-shadow:none; }
.hd-btn--nav:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* 도면/사진 프레임 — 이미지는 원본 크기 기준(업스케일 금지), 중앙 배치 */
.hd-figure{ margin:0; text-align:center; }
.hd-figure img{ width:auto; max-width:100%; margin:0 auto; border:1px solid var(--line); border-radius:var(--radius); }
.hd-figure figcaption{ margin-top:1.2rem; font-size:var(--fs-cap); color:var(--muted); text-align:center; }
.hd-figure--plain img{ border:0; }
/* 제품 실물 사진 프레임 — 그라디언트 박스 + 코너 액센트 + 호버 줌 (enzcable prod-hero 무드) */
.hd-figure--shot{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem;
  padding:3.4rem 2.6rem; background:linear-gradient(160deg,#f8fafd 0%,#edf1f8 100%);
  border:1px solid var(--line); border-radius:var(--radius); min-height:24rem; overflow:hidden;
}
.hd-figure--shot::before{ content:''; position:absolute; left:1.4rem; top:1.4rem; width:2.4rem; height:2.4rem; border-left:.3rem solid var(--navy); border-top:.3rem solid var(--navy); }
.hd-figure--shot::after{ content:''; position:absolute; right:1.4rem; bottom:1.4rem; width:2.4rem; height:2.4rem; border-right:.3rem solid var(--line-2); border-bottom:.3rem solid var(--line-2); }
.hd-figure--shot img{ max-height:28rem; border:0; background:transparent; transition:transform .45s var(--ease); }
.hd-figure--shot:hover img{ transform:scale(1.05); }
.hd-photo-grid{ display:grid; gap:1.8rem; align-items:end; }
.hd-photo-grid img{ width:auto; max-width:100%; margin:0 auto; border-radius:var(--radius); }
.hd-photo-grid--2{ grid-template-columns:repeat(2,1fr); }
.hd-photo-grid--3{ grid-template-columns:repeat(3,1fr); }
.hd-photo-grid--4{ grid-template-columns:repeat(4,1fr); }
/* 도면+사진 페어 — 프레임 없이 이미지만, 좌우 동일 높이 정렬 */
.hd-figpair{ display:flex; justify-content:center; align-items:center; gap:20rem; }
.hd-figpair .hd-figure img{ height:24rem; width:auto; max-width:100%; border:0; }

/* 2컬럼 유틸 */
.hd-cols{ display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:start; }
.hd-cols--photo{ display:grid; grid-template-columns:1fr 1.15fr; gap:4.5rem; align-items:center; }
.hd-mt{ margin-top:8rem; } .hd-mt-s{ margin-top:2.8rem; } .hd-mb{ margin-bottom:6rem; }

/* ===== 08 TABLE (풀그리드 — 세로·가로 구분선 전부) ====================== */
/* 표 — 라운드 카드형 (수평 헤어라인만, 소프트 헤더) */
.hd-table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:#fff; border:1px solid var(--line); border-radius:1.2rem; box-shadow:0 2px 12px rgba(14,21,38,.05); }
.hd-table{ width:100%; min-width:60rem; font-size:1.6rem; }
.hd-table th,.hd-table td{ padding:1.4rem 1.8rem; border:0; border-top:1px solid var(--line); text-align:left; vertical-align:middle; line-height:1.6; }
.hd-table tr:first-child th,.hd-table tr:first-child td{ border-top:0; }
.hd-table thead th{ background:var(--bg-soft); color:var(--muted); font-weight:700; font-size:1.35rem; letter-spacing:.08em; text-transform:uppercase; text-align:center; }
.hd-table thead + tbody tr:first-child th,.hd-table thead + tbody tr:first-child td{ border-top:1px solid var(--line); }
.hd-table tbody th{ background:#fff; font-weight:700; color:var(--strong); width:16rem; border-right:1px solid var(--line); }
.hd-table tbody tr:nth-child(even) td{ background:var(--bg-soft); }
.hd-table tbody tr{ transition:background .16s; }
.hd-table tbody tr:hover td{ background:var(--navy-soft); }
.hd-table--center td,.hd-table--center th{ text-align:center; }

/* 회사정보형 info table — 라벨셀 배경 + 풀그리드 */
.hd-info{ width:100%; font-size:1.6rem; border:1px solid var(--line-2); border-top:.2rem solid var(--strong); }
.hd-info th{ width:16rem; padding:1.4rem 1.8rem; text-align:left; font-weight:700; color:var(--strong); vertical-align:middle; background:var(--bg-soft); border:1px solid var(--line-2); }
.hd-info td{ padding:1.4rem 1.8rem; color:var(--text); border:1px solid var(--line-2); }

/* ===== 09 HISTORY ======================================================= */
.hd-history{ display:grid; grid-template-columns:1fr 1fr; column-gap:5.5rem; row-gap:.5rem; }
.hd-history__row{ padding:2.4rem 0 2rem; border-bottom:1px solid var(--line); }
.hd-history__year{ display:flex; align-items:center; gap:1.6rem; font-size:3.2rem; font-weight:800; color:var(--navy); line-height:1.05; letter-spacing:-.02em; }
.hd-history__year::after{ content:''; flex:1; height:.1rem; background:var(--line); }
.hd-history__items{ display:flex; flex-direction:column; gap:.9rem; margin-top:1.6rem; }
.hd-history__item{ display:grid; grid-template-columns:1.2rem 3.4rem 1fr; gap:.9rem; font-size:var(--fs-body); align-items:start; line-height:1.5; }
.hd-history__item::before{ content:''; width:.7rem; height:.7rem; margin-top:1rem; border-radius:50%; background:var(--navy); }
.hd-history__mon{ color:var(--navy); font-weight:700; font-size:1.4rem; padding-top:.4rem; }
.hd-history__desc{ color:var(--text); }

/* ===== 10 ORG CHART ===================================================== */
.hd-org{ --oline:#c2ccd8; text-align:center; padding:2rem 0 1rem; }
.hd-org__node{ display:inline-flex; flex-direction:column; gap:.4rem; align-items:center; min-width:17rem; padding:1.5rem 2.2rem; border:.2rem solid var(--navy); border-radius:var(--radius); background:#fff; }
.hd-org__node .ko{ font-size:var(--fs-body); font-weight:700; color:var(--navy); }
.hd-org__node .en{ font-size:var(--fs-cap); color:var(--muted); }
.hd-org__node--top{ background:var(--navy); border-color:var(--navy); }
.hd-org__node--top .ko{ color:#fff; } .hd-org__node--top .en{ color:rgba(255,255,255,.72); }
.hd-org__node--staff{ border-color:var(--line-2); min-width:14rem; padding:1.2rem 2rem; }
.hd-org__stem{ position:relative; width:.2rem; height:9rem; background:var(--oline); margin:0 auto; }
.hd-org__staff{ position:absolute; top:2.4rem; left:.2rem; display:flex; align-items:center; }
.hd-org__staff::before{ content:''; width:5.5rem; height:.2rem; background:var(--oline); }
.hd-org__bar{ width:60rem; max-width:88%; height:.2rem; background:var(--oline); margin:0 auto; }
.hd-org__depts{ display:flex; justify-content:center; gap:2rem; }
.hd-org__dept{ position:relative; padding-top:3.5rem; }
.hd-org__dept::before{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:.2rem; height:3.5rem; background:var(--oline); }
@media (max-width:768px){
  .hd-org__stem{ height:6rem; }
  .hd-org__staff{ position:static; justify-content:center; margin:1.4rem 0; }
  .hd-org__staff::before{ display:none; } .hd-org__bar{ display:none; }
  .hd-org__depts{ flex-direction:column; align-items:center; gap:1.4rem; }
  .hd-org__dept{ padding-top:1.6rem; } .hd-org__dept::before{ height:1.6rem; }
}

/* ===== 11 CARDS / GRID ================================================== */
.hd-cards{ display:grid; gap:2.4rem; }
.hd-cards--3{ grid-template-columns:repeat(3,1fr); }
.hd-cards--4{ grid-template-columns:repeat(4,1fr); }
.hd-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; transition:transform .26s var(--ease),box-shadow .26s,border-color .26s;
}
.hd-card:hover{ transform:translateY(-.5rem); box-shadow:var(--shadow-lg); border-color:transparent; }
.hd-card__thumb{ aspect-ratio:4/3; overflow:hidden; background:var(--bg-soft); }
.hd-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.hd-card:hover .hd-card__thumb img{ transform:scale(1.05); }
.hd-card__body{ padding:2.2rem 2.4rem 2.6rem; }
.hd-card__title{ font-size:var(--fs-body); font-weight:700; color:var(--strong); }
.hd-card__desc{ margin-top:.8rem; font-size:var(--fs-cap); color:var(--muted); line-height:1.6; }
.hd-card__arrow{ margin-top:1.6rem; font-size:var(--fs-cap); font-weight:700; color:var(--navy); display:inline-flex; align-items:center; gap:.5rem; }
.hd-card__arrow::after{ content:'→'; transition:transform .2s var(--ease); }
.hd-card:hover .hd-card__arrow::after{ transform:translateX(.4rem); }

/* ===== 12 PRODUCT ======================================================= */
/* 스펙 리스트 — 2열 칩카드 (enzcable pfeature 무드) */
.hd-spec{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 1.6rem; }
.hd-spec__item{
  display:block; padding:1.3rem 1.8rem; font-size:1.6rem; line-height:1.65; color:var(--text);
  background:var(--bg-soft); border-left:.3rem solid var(--navy); border-radius:0 .8rem .8rem 0;
  transition:background .2s,transform .2s var(--ease);
}
.hd-spec__item:hover{ background:#eef2f8; transform:translateX(.3rem); }
.hd-cols .hd-spec,.hd-cols--photo .hd-spec{ grid-template-columns:1fr; }
.hd-record{ display:flex; flex-direction:column; gap:1.1rem; }
.hd-record__item{ display:grid; grid-template-columns:auto 1fr; gap:1.4rem; font-size:var(--fs-body); padding-bottom:1.1rem; border-bottom:1px dashed var(--line); }
.hd-record__date{ color:var(--navy); font-weight:600; white-space:nowrap; }
.hd-record__desc{ color:var(--text); }

/* ===== 13 CONTACT ======================================================= */
.hd-map{ width:100%; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.hd-map img{ width:100%; } .hd-map iframe{ display:block; width:100%; height:42rem; border:0; }
@media (max-width:768px){ .hd-map iframe{ height:32rem; } }
.hd-place{ display:inline-flex; align-items:center; gap:.7rem; margin-bottom:1.6rem; padding:.7rem 1.8rem; background:var(--navy-soft); color:var(--navy-ink); font-size:var(--fs-cap); font-weight:700; border-radius:4rem; }
.hd-place::before{ content:''; width:.7rem; height:.7rem; border-radius:50%; background:var(--navy); }

/* ===== 14 BOARD ========================================================= */
.sub-table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sub-table{ width:100%; min-width:64rem; font-size:var(--fs-body); border-top:.24rem solid var(--navy); }
.sub-table th,.sub-table td{ padding:1.6rem 1.2rem; border-bottom:1px solid var(--line); text-align:center; }
.sub-table thead th{ font-size:var(--fs-cap); font-weight:700; color:var(--strong); background:var(--bg-soft); }
.sub-table .col-subject{ text-align:left; }
.sub-table .col-subject a{ color:var(--text); transition:color .15s; }
.sub-table .col-subject a:hover{ color:var(--navy); text-decoration:underline; }
.sub-table tbody tr{ transition:background .15s; } .sub-table tbody tr:hover{ background:var(--bg-soft); }
.board-empty{ padding:6rem 0 !important; color:var(--muted); }
.board-paging{ display:flex; justify-content:center; gap:.6rem; margin-top:3rem; }
.board-paging .on{ display:inline-flex; align-items:center; justify-content:center; min-width:3.6rem; height:3.6rem; padding:0 .8rem; background:var(--navy); color:#fff; border-radius:var(--radius-s); font-size:var(--fs-cap); font-weight:600; }
.board-view{ border-top:.24rem solid var(--navy); }
.board-view-head{ padding:2.4rem .4rem; border-bottom:1px solid var(--line); }
.board-view-title{ font-size:var(--fs-sub); font-weight:700; color:var(--strong); line-height:1.4; }
.board-view-meta{ margin-top:1rem; display:flex; gap:1.6rem; font-size:var(--fs-cap); color:var(--muted); }
.board-view-content{ padding:3.2rem .4rem; font-size:var(--fs-body); line-height:1.85; min-height:20rem; }
.board-view-content img{ margin:1rem 0; }
.board-view-content a{ color:var(--navy); text-decoration:underline; }
.board-view-empty{ color:var(--muted); }
.board-view-foot{ padding:2rem 0; text-align:right; border-top:1px solid var(--line); }
.board-btn{ display:inline-flex; align-items:center; height:4.6rem; padding:0 2.6rem; background:var(--navy); color:#fff; font-size:var(--fs-cap); font-weight:600; border-radius:4rem; transition:background .18s; }
.board-btn:hover{ background:var(--navy-ink); }
.board-file{ display:inline-flex; align-items:center; gap:.8rem; margin:.4rem 0; padding:1rem 1.6rem; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-s); font-size:var(--fs-cap); color:var(--navy); font-weight:600; }
.board-file::before{ content:'⇩'; }
/* 첨부파일 (상세 다운로드 목록 · 목록 클립 아이콘) */
.board-view-files{ list-style:none; margin:0; padding:1.4rem .4rem; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:.6rem; }
.board-view-files li{ display:flex; align-items:center; gap:1rem; font-size:var(--fs-cap); }
.board-view-files a{ display:inline-flex; align-items:center; gap:.7rem; padding:.8rem 1.4rem; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-s); color:var(--strong); font-weight:600; transition:color .15s,border-color .15s; }
.board-view-files a:hover{ color:var(--navy); border-color:var(--navy); }
.board-view-files a svg{ flex-shrink:0; color:var(--navy); }
.board-view-files__size{ color:var(--faint); font-size:1.3rem; }
.board-attach-ico{ display:inline-block; margin-left:.6rem; color:var(--muted); vertical-align:middle; }

/* ===== 14.5 INQUIRY FORM (문의하기) ====================================== */
.inq-form{ max-width:78rem; margin:4.6rem auto 0; }
.inq-form__note{ margin:0 0 2.2rem; font-size:var(--fs-cap); color:var(--muted); text-align:right; }
.req{ color:var(--navy); font-weight:700; }
.inq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem 2.4rem; }
.inq-field{ margin-bottom:2rem; }
.inq-grid .inq-field{ margin-bottom:0; }
.inq-grid + .inq-field{ margin-top:2rem; }
.inq-field__label{ display:block; margin-bottom:.9rem; font-size:1.55rem; font-weight:700; color:var(--strong); }
.inq-field input[type=text],.inq-field input[type=tel],.inq-field input[type=email],.inq-field textarea{
  width:100%; padding:1.4rem 1.6rem; font:inherit; font-size:1.6rem; color:var(--strong);
  background:#fff; border:1px solid var(--line-2); border-radius:var(--radius-s);
  transition:border-color .2s,box-shadow .2s; -webkit-appearance:none; appearance:none;
}
.inq-field input:focus,.inq-field textarea:focus{ outline:0; border-color:var(--navy); box-shadow:0 0 0 .3rem rgba(225,18,31,.12); }
.inq-field textarea{ resize:vertical; min-height:18rem; line-height:1.7; }
/* 문의 구분 — 라디오 pill */
.inq-typeset{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.inq-type{ position:relative; cursor:pointer; }
.inq-type input{ position:absolute; opacity:0; pointer-events:none; }
.inq-type span{
  display:inline-flex; align-items:center; gap:.9rem; height:5.2rem; padding:0 2.8rem;
  font-size:1.6rem; font-weight:600; color:var(--muted);
  background:#fff; border:1px solid var(--line-2); border-radius:4rem; transition:all .18s;
}
.inq-type span::before{ content:''; width:1rem; height:1rem; border-radius:50%; border:.2rem solid var(--line-2); transition:all .18s; }
.inq-type:hover span{ color:var(--navy); border-color:var(--navy); }
.inq-type input:checked + span{ color:#fff; background:var(--navy); border-color:var(--navy); font-weight:700; box-shadow:0 .6rem 1.6rem rgba(225,18,31,.3); }
.inq-type input:checked + span::before{ border-color:#fff; background:#fff; box-shadow:inset 0 0 0 .25rem var(--navy); }
.inq-type input:focus-visible + span{ outline:.2rem solid var(--navy); outline-offset:.2rem; }
/* 개인정보 동의 */
.inq-agree{ margin-top:3rem; padding:2.4rem 2.6rem; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); }
.inq-agree__tit{ font-size:1.55rem; font-weight:700; color:var(--strong); margin-bottom:1rem; }
.inq-agree__desc{ font-size:1.4rem; line-height:1.8; color:var(--muted); }
.inq-agree__check{ display:flex; align-items:center; gap:1rem; margin-top:1.8rem; padding-top:1.8rem; border-top:1px dashed var(--line-2); font-size:1.55rem; font-weight:600; color:var(--strong); cursor:pointer; }
.inq-agree__check input{ width:1.9rem; height:1.9rem; accent-color:var(--navy); flex-shrink:0; }
.inq-submit{ margin-top:3.4rem; text-align:center; }
/* 접수 완료 / 오류 */
.inq-done{ max-width:78rem; margin:4.6rem auto 0; padding:6rem 3rem; text-align:center; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); }
.inq-done__ico{ display:inline-flex; width:7.2rem; height:7.2rem; color:var(--navy); margin-bottom:2rem; }
.inq-done__ico svg{ width:100%; height:100%; }
.inq-done__tit{ font-size:2.4rem; font-weight:800; color:var(--strong); }
.inq-done__desc{ margin:1.2rem 0 3rem; font-size:var(--fs-body); color:var(--muted); }
.inq-error{ max-width:78rem; margin:3rem auto 0; padding:1.5rem 2rem; border:1px solid #f0c0c0; background:#fff5f5; border-radius:var(--radius-s); color:#b23; font-size:1.5rem; }
@media (max-width:768px){
  .inq-grid{ grid-template-columns:1fr; gap:2rem; }
  .inq-grid .inq-field{ margin-bottom:0; }
  .inq-typeset{ gap:.8rem; }
  .inq-type span{ height:4.6rem; padding:0 2rem; font-size:1.5rem; }
}

/* SUB-TAB (페이지 내 카테고리 탭) */
.hd-subtab{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin:0 0 4rem; }
.hd-subtab__btn{ display:inline-flex; align-items:center; justify-content:center; height:5rem; padding:0 3rem; font-size:var(--fs-body); font-weight:600; color:var(--muted); background:#fff; border:1px solid var(--line-2); border-radius:4rem; transition:all .18s; }
.hd-subtab__btn:hover{ color:var(--navy); border-color:var(--navy); }
.hd-subtab__btn.is-active{ color:#fff; background:var(--navy); border-color:var(--navy); }
.hd-subpanel{ display:none; }
.hd-subpanel.is-active{ display:block; animation:hdFade .3s var(--ease); }
@keyframes hdFade{ from{ opacity:0; transform:translateY(.6rem); } to{ opacity:1; transform:none; } }

/* ===== 15 FOOTER ======================================================== */
#hd-footer{ margin-top:auto; background:var(--ink); color:rgba(255,255,255,.6); }
.hd-footer__inner{ width:var(--wrap); max-width:100%; margin:0 auto; padding:4.6rem 2rem; display:flex; align-items:flex-start; gap:4rem; }
.hd-footer__logo{ flex-shrink:0; padding-top:.4rem; }
.hd-footer__logo img{ height:3.8rem; width:auto; }
.hd-footer__info{ font-size:var(--fs-cap); line-height:2; color:rgba(255,255,255,.55); }
.hd-footer__info b{ color:rgba(255,255,255,.9); font-weight:700; }
.hd-footer__copy{ margin-top:1.2rem; font-size:1.3rem; color:rgba(255,255,255,.34); }

/* ===== 16 REVEAL (은은한 등장) ========================================= */
.reveal{ opacity:0; transform:translateY(2.8rem); transition:opacity .85s var(--ease),transform .85s var(--ease); will-change:opacity,transform; }
.reveal--left{ transform:translateX(-4rem); }
.reveal--right{ transform:translateX(4rem); }
.reveal--zoom{ transform:scale(.93); }
.reveal--pop{ transform:translateY(1.8rem) scale(.96); }
.reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* ===== 17 HOME (index) ================================================== */
.main-page{ overflow:clip; }

/* --- HERO (다크, 심플) --- */
.home-hero{ position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(100deg,rgba(9,14,28,.94) 0%,rgba(11,17,34,.8) 48%,rgba(13,22,50,.6) 100%),url('../images/main/bg_hero.jpg') center/cover no-repeat #0b1122; }
.home-hero::before{ content:''; position:absolute; left:-12rem; bottom:-14rem; width:40rem; height:40rem; border-radius:50%; background:radial-gradient(circle,rgba(22,35,94,.6),transparent 68%); pointer-events:none; }
.home-hero::after{ content:''; position:absolute; right:-8rem; top:-6rem; width:44rem; height:44rem; border-radius:50%; background:radial-gradient(circle,rgba(225,18,31,.2),transparent 66%); pointer-events:none; }
.home-hero__inner{ position:relative; z-index:2; width:var(--wrap); max-width:100%; margin:0 auto; padding:10.5rem 2rem 15rem; }
.home-hero__eyebrow{ display:inline-flex; align-items:center; gap:1.2rem; font-size:1.45rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--navy-2); margin-bottom:2.4rem; }
.home-hero__eyebrow::before{ content:''; width:2.8rem; height:.2rem; background:var(--navy); }
.home-hero__title{ font-size:5.4rem; font-weight:900; line-height:1.18; letter-spacing:-.03em; }
.home-hero__title b{ color:var(--navy-2); font-weight:900; }
.home-hero__sub{ margin-top:2.6rem; font-size:1.9rem; font-weight:300; line-height:1.75; color:rgba(255,255,255,.76); max-width:56rem; }
.home-hero__cta{ margin-top:4rem; display:flex; gap:1.4rem; flex-wrap:wrap; }

/* --- SECTION HEAD --- */
.home-sec__head{ margin-bottom:5.4rem; }
.home-sec__head--center{ text-align:center; }
.home-sec__label{ display:inline-flex; align-items:center; gap:1rem; font-size:1.4rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--navy); margin-bottom:1.6rem; }
.home-sec__label::before{ content:''; width:2.4rem; height:.2rem; background:var(--navy); }
.home-sec__head--center .home-sec__label::before{ display:none; }
.home-sec__title{ font-size:3.6rem; font-weight:900; color:var(--strong); letter-spacing:-.03em; line-height:1.28; }
.home-sec__title .em{ color:var(--navy); }
.home-sec__desc{ margin-top:1.8rem; font-size:var(--fs-body); line-height:1.8; color:var(--muted); }
.home-sec__head--center .home-sec__desc{ max-width:64rem; margin-left:auto; margin-right:auto; }

/* --- INTRO (Who We Are 에디토리얼 + 성과 2×2 카드) --- */
.home-introsec{ position:relative; overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#f4f7fc 100%); }
.home-introsec::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(22,35,94,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(22,35,94,.055) 1px,transparent 1px);
  background-size:4.6rem 4.6rem;
  -webkit-mask-image:radial-gradient(85rem 56rem at 50% 48%,#000 28%,transparent 76%);
  mask-image:radial-gradient(85rem 56rem at 50% 48%,#000 28%,transparent 76%); }
.home-introsec::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(42rem 42rem at 100% 0%,rgba(225,18,31,.07),transparent 68%),
             radial-gradient(38rem 38rem at 0% 100%,rgba(22,35,94,.08),transparent 68%); }
.home-introsec .hd-wrap{ position:relative; z-index:1; }
.home-intro{ display:grid; grid-template-columns:1fr 1.12fr; gap:7rem; align-items:center; }
.home-intro .home-sec__head{ margin-bottom:0; }
.home-intro__cta{ margin-top:3.4rem; }
.home-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.home-stat{
  position:relative; text-align:left; padding:3rem 2.6rem 2.8rem;
  background:#fff; border:1px solid var(--line); border-radius:1.4rem;
  box-shadow:0 1.2rem 3rem rgba(16,30,60,.07);
  transition:transform .26s var(--ease),box-shadow .26s;
}
.home-stat::before{ content:''; position:absolute; left:0; right:0; top:0; height:.3rem; border-radius:1.4rem 1.4rem 0 0;
  background:linear-gradient(90deg,var(--navy),var(--navy-2)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.home-stat:hover{ transform:translateY(-.4rem); box-shadow:var(--shadow-lg); }
.home-stat:hover::before{ transform:scaleX(1); }
.home-stat__num{ font-size:4.6rem; font-weight:900; color:var(--strong); line-height:1; letter-spacing:-.03em; }
.home-stat__num span{ color:var(--navy); font-size:2.6rem; font-weight:800; margin-left:.3rem; }
.home-stat__label{ margin-top:1.4rem; font-size:var(--fs-cap); color:var(--muted); line-height:1.6; }

/* --- PRODUCTS 슬라이더 (스크롤 스냅 + 좌우 화살표) --- */
/* 제품 섹션 — 다크 배경 이미지 (bg_products) + 헤드 화이트 반전 */
.home-prodsec{ position:relative; overflow:hidden;
  background:linear-gradient(rgba(11,17,32,.55),rgba(11,17,32,.66)),url('../images/main/bg_products.jpg') center/cover no-repeat var(--ink); }
.home-prodsec .home-sec__title{ color:#fff; }
.home-prodsec .home-sec__title .em{ color:var(--navy-2); }
.home-prodsec .home-sec__label{ color:var(--navy-2); }
.home-prodsec .home-sec__label::before{ background:var(--navy-2); }
.home-prodsec .home-sec__desc{ color:rgba(255,255,255,.68); }
.home-prodsec .home-prodnav button{ border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); }
.home-prodsec .home-prodnav button:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }
.home-prodhead{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:4.2rem; }
.home-prodhead .home-sec__head{ margin-bottom:0; }
.home-prodnav{ display:flex; gap:1rem; flex-shrink:0; }
.home-prodnav button{
  width:4.8rem; height:4.8rem; border-radius:50%; border:1px solid var(--line-2); background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  transition:background .2s,color .2s,border-color .2s;
}
.home-prodnav button svg{ width:2rem; height:2rem; }
.home-prodnav button:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }
.home-prod{
  display:flex; gap:2rem; overflow-x:auto; scroll-snap-type:x proximity;
  padding:.4rem 0 1rem;
  /* 양측 풀블리드 — 트랙이 부모(1200 wrap)를 넘어 뷰포트 양끝까지 이어져 보이게.
     패딩 보정으로 스냅 위치(시작·끝)는 wrap 좌·우측선에 정렬 */
  margin-left:calc(50% - 50vw);  padding-left:calc(50vw - 50%);
  margin-right:calc(50% - 50vw); padding-right:calc(50vw - 50%);
  /* 스냅 기준 = wrap 좌·우측선. scroll-padding의 %는 스크롤포트 기준이라 길이식으로 계산(58rem = wrap 내부폭 1160의 절반) */
  scroll-padding-left:max(2rem, 50vw - 58rem); scroll-padding-right:max(2rem, 50vw - 58rem);
  scrollbar-width:none; -ms-overflow-style:none;
}
.home-prod::-webkit-scrollbar{ display:none; }
/* 제품 카드 — 글래스 패널(반투명 + 블러, 다크 배경 이미지 위) */
.home-prodcard{
  flex:0 0 30rem; scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-radius:1.2rem; padding:2.6rem 2.4rem 2.4rem;
  transition:transform .28s var(--ease),box-shadow .28s,background .28s,border-color .28s;
}
.home-prodcard:hover{ transform:translateY(-.5rem); background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.26); box-shadow:0 1.8rem 3.6rem rgba(5,9,20,.45); }
.home-prodcard__no{ display:inline-flex; align-items:center; gap:.9rem; font-size:1.15rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.home-prodcard__no::before{ content:''; width:.7rem; height:.7rem; background:var(--navy-2); }
.home-prodcard__tit{ margin-top:1rem; font-size:2.2rem; font-weight:900; color:#fff; letter-spacing:-.03em; line-height:1.3; }
.home-prodcard__thumb{ height:15rem; margin:2rem 0 2.2rem; padding:1.2rem; background:rgba(255,255,255,.92); border-radius:.9rem; display:flex; align-items:center; justify-content:center; }
.home-prodcard__thumb img{ max-width:80%; max-height:100%; width:auto; height:auto; object-fit:contain; mix-blend-mode:multiply; transition:transform .4s var(--ease); }
.home-prodcard:hover .home-prodcard__thumb img{ transform:scale(1.05); }
.home-prodcard__desc{ font-size:1.4rem; color:rgba(255,255,255,.78); line-height:1.65; flex:1; }
.home-prodcard__desc::before{ content:'BEST FIT FOR'; display:block; font-size:1.05rem; font-weight:700; letter-spacing:.2em; color:rgba(255,255,255,.42); margin-bottom:.7rem; }
.home-prodcard__go{
  margin-top:2.2rem; align-self:flex-start; display:inline-flex; align-items:center; gap:1.1rem;
  height:4.4rem; padding:0 2rem; border-radius:.6rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.3);
  font-size:1.25rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  transition:border-color .2s,color .2s,background .2s;
}
.home-prodcard__go::after{ content:'→'; transition:transform .22s var(--ease); }
.home-prodcard:hover .home-prodcard__go{ border-color:var(--navy-2); color:#fff; background:var(--navy); }
.home-prodcard:hover .home-prodcard__go::after{ transform:translateX(.4rem); }
/* 데스크톱 — 카드가 뷰포트 끝에 걸쳐 보이도록(다음 카드 예고) 카드 폭 확대 */
@media (min-width:961px){ .home-prodcard{ flex-basis:34rem; } }

/* --- FLOW (라이트 계측그리드 배경 + 고스트 넘버 카드) --- */
.home-flowsec{ position:relative; overflow:hidden;
  background:linear-gradient(180deg,#f7f9fd 0%,#edf1f8 100%); }
.home-flowsec::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(22,35,94,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(22,35,94,.055) 1px,transparent 1px);
  background-size:4.6rem 4.6rem;
  -webkit-mask-image:radial-gradient(85rem 56rem at 50% 44%,#000 28%,transparent 76%);
  mask-image:radial-gradient(85rem 56rem at 50% 44%,#000 28%,transparent 76%); }
.home-flowsec::after{ content:''; position:absolute; right:-10rem; top:-10rem; width:38rem; height:38rem; border-radius:50%;
  background:radial-gradient(circle,rgba(225,18,31,.09),transparent 68%); pointer-events:none; }
.home-flowsec .hd-wrap{ position:relative; z-index:1; }
.home-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.4rem; }
.home-flowstep{ position:relative; text-align:center; padding:3.8rem 2.2rem 3.4rem;
  background:rgba(255,255,255,.9); border:1px solid #fff; border-radius:1.6rem;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 1.6rem 3.6rem rgba(16,30,60,.09);
  transition:transform .28s var(--ease),box-shadow .28s; }
.home-flowstep::before{ content:''; position:absolute; left:0; right:0; top:0; height:.3rem; border-radius:1.6rem 1.6rem 0 0;
  background:linear-gradient(90deg,var(--navy),var(--navy-2)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.home-flowstep:hover{ transform:translateY(-.6rem); box-shadow:0 2.2rem 4.6rem rgba(16,30,60,.15); }
.home-flowstep:hover::before{ transform:scaleX(1); }
.home-flowstep__no{ position:absolute; top:1.4rem; right:1.9rem; font-size:4.4rem; font-weight:900; line-height:1;
  letter-spacing:-.02em; color:rgba(22,35,94,.09); transition:color .3s; }
.home-flowstep:hover .home-flowstep__no{ color:rgba(225,18,31,.16); }
.home-flowstep__ico{ width:7rem; height:7rem; margin:.4rem auto 2rem; border-radius:1.8rem;
  background:linear-gradient(135deg,var(--navy),var(--navy-2)); box-shadow:0 1.2rem 2.6rem rgba(225,18,31,.32);
  display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease); }
.home-flowstep__ico svg{ width:3.4rem; height:3.4rem; stroke:#fff; }
.home-flowstep:hover .home-flowstep__ico{ transform:scale(1.08) rotate(-4deg); }
.home-flowstep__tit{ font-size:1.9rem; font-weight:800; color:var(--strong); }
.home-flowstep__desc{ margin-top:.8rem; font-size:var(--fs-cap); color:var(--muted); line-height:1.6; }
.home-flowstep__arrow{ position:absolute; right:-2.9rem; top:50%; transform:translateY(-50%); z-index:2;
  width:3.4rem; height:3.4rem; border-radius:50%; background:#fff; border:1px solid var(--line-2);
  color:var(--navy); box-shadow:0 .6rem 1.4rem rgba(16,30,60,.12);
  display:flex; align-items:center; justify-content:center; }
.home-flowstep__arrow svg{ width:1.6rem; height:1.6rem; }
.home-flowstep:last-child .home-flowstep__arrow{ display:none; }

/* --- FEATURES (강점, 다크) --- */
.home-feats{ display:grid; grid-template-columns:repeat(2,1fr); gap:2.2rem; }
.home-feat{ position:relative; overflow:hidden; display:flex; gap:2.2rem; align-items:flex-start; padding:3.4rem; background:rgba(255,255,255,.04); border:1px solid var(--ink-line); border-radius:var(--radius); transition:background .26s,border-color .26s,transform .26s var(--ease); }
.home-feat::after{ content:''; position:absolute; left:0; top:0; width:100%; height:.3rem; background:linear-gradient(90deg,var(--navy),var(--navy-2)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.home-feat:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.22); transform:translateY(-.3rem); }
.home-feat:hover::after{ transform:scaleX(1); }
.home-feat__ico{ flex-shrink:0; width:6rem; height:6rem; border-radius:50%; background:rgba(225,18,31,.14); display:flex; align-items:center; justify-content:center; }
.home-feat__ico svg{ width:3rem; height:3rem; }
.home-feat__no{ font-size:1.3rem; font-weight:800; letter-spacing:.12em; color:var(--navy-2); }
.home-feat__tit{ margin-top:.4rem; font-size:2.1rem; font-weight:800; color:#fff; }
.home-feat__desc{ margin-top:1rem; font-size:var(--fs-cap); color:rgba(255,255,255,.66); line-height:1.7; }

/* --- CTA 밴드 (그라디언트 + 글로우) --- */
.home-cta{ position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(120deg,rgba(15,26,69,.94) 0%,rgba(22,35,94,.86) 58%,rgba(34,57,143,.78) 100%),url('../images/main/bg_cta.jpg') center/cover no-repeat var(--accent-ink); }
.home-cta::before{ content:''; position:absolute; left:0; top:0; width:100%; height:.3rem; background:linear-gradient(90deg,var(--navy),var(--navy-2),transparent); }
.home-cta::after{ content:''; position:absolute; right:-8rem; bottom:-12rem; width:36rem; height:36rem; border-radius:50%; background:radial-gradient(circle,rgba(225,18,31,.28),transparent 70%); pointer-events:none; }
.home-cta__inner{ position:relative; z-index:1; width:var(--wrap); max-width:100%; margin:0 auto; padding:6.4rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:3rem; flex-wrap:wrap; }
.home-cta__tit{ font-size:3rem; font-weight:900; letter-spacing:-.03em; line-height:1.3; }
.home-cta__desc{ margin-top:1.2rem; font-size:var(--fs-body); color:rgba(255,255,255,.8); }
.home-cta .hd-btn{ background:#fff; color:var(--accent); }
.home-cta .hd-btn:hover{ background:var(--navy); color:#fff; }

/* 다크 섹션 공통 (코너 글로우) */
.hd-section--dark{ position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(rgba(14,21,38,.9),rgba(14,21,38,.92)),url('../images/main/bg_feats.jpg') center/cover no-repeat var(--ink); }
.hd-section--dark::before{ content:''; position:absolute; right:-12rem; top:-14rem; width:42rem; height:42rem; border-radius:50%; background:radial-gradient(circle,rgba(225,18,31,.12),transparent 70%); pointer-events:none; }
.hd-section--dark .hd-wrap{ position:relative; z-index:1; }
.hd-section--dark .home-sec__title{ color:#fff; }
.hd-section--dark .home-sec__label{ color:var(--navy-2); }
.hd-section--dark .home-sec__desc{ color:rgba(255,255,255,.66); }

/* ===== 18 RESPONSIVE ==================================================== */
@media (max-width:1240px){
  .hd-header__inner,.hd-footer__inner,.home-hero__inner,.home-cta__inner{ padding-left:2rem; padding-right:2rem; }
}
@media (max-width:960px){
  :root{ --header-h:6rem; }
  #hd-header.is-scrolled .hd-header__inner{ height:6rem; }
  .hd-header__inner{ justify-content:space-between; }
  .hd-logo{ position:static; transform:none; } .hd-logo img{ height:3.2rem; }
  .hd-burger{ display:flex; } .hd-drawer-close{ display:flex; align-items:center; justify-content:center; }
  .hd-lang{ right:7.2rem; }
  .hd-gnb{
    position:fixed; top:0; right:-100%; width:28rem; height:100vh; flex-direction:column;
    background:var(--ink); box-shadow:var(--shadow-lg); z-index:110; overflow-y:auto; padding:6rem 0 4rem; transition:right .34s var(--ease);
  }
  .hd-gnb.is-open{ right:0; }
  .hd-gnb__item{ display:block; border-bottom:1px solid rgba(255,255,255,.08); }
  .hd-gnb__link{ height:auto; padding:1.6rem 2.4rem; font-size:var(--fs-body); font-weight:600; }
  .hd-gnb__link::after{ display:none; }
  .hd-drop{ position:static; display:block; box-shadow:none; border-top:0; border-left:.3rem solid var(--navy);
    margin:0 2.4rem 1rem; background:rgba(255,255,255,.04); max-height:0; overflow:hidden; transition:max-height .34s var(--ease),padding .2s; }
  .hd-gnb__item.is-open .hd-drop{ max-height:44rem; padding:.8rem 0; }
  .hd-gnb__item:hover .hd-drop{ display:block; }
  .hd-drop a{ height:auto; padding:1rem 2rem; }
  .hd-subnav{ margin-top:-2.8rem; }
  .hd-subnav__inner{ border-radius:1.4rem; padding:.6rem; gap:.4rem; }
  .hd-subnav__tab{ height:4.2rem; padding:0 1.6rem; font-size:var(--fs-cap); }
  .hd-jump{ gap:.8rem; margin-top:3.4rem; }
  .hd-jump__tab{ height:4.4rem; padding:0 1.8rem; font-size:1.5rem; }
  .sub-hero__title{ font-size:3.2rem; }
  .sub-hero__inner{ padding-bottom:7.4rem; }
  .hd-cols,.hd-cols--photo{ grid-template-columns:1fr; gap:2.8rem; }
  .hd-cards--3,.hd-cards--4{ grid-template-columns:repeat(2,1fr); }
  .hd-content{ padding:5rem 2rem 6.5rem; }
  .hd-section{ padding:6rem 0; }
  .hd-footer__inner{ flex-direction:column; gap:1.8rem; padding:3rem 2rem; }
  .home-hero__title{ font-size:3.8rem; }
  .home-hero__inner{ padding:7rem 2rem 11rem; }
  .home-sec__title{ font-size:2.8rem; }
  .home-cta__tit{ font-size:2.6rem; }
  .home-intro{ grid-template-columns:1fr; gap:4.4rem; }
  .home-stat{ padding:2.4rem 2rem; }
  .home-prodhead{ flex-direction:column; align-items:flex-start; }
  .home-flow{ grid-template-columns:repeat(2,1fr); gap:3rem 2.6rem; }
  .home-flowstep__arrow{ right:-3rem; }
  .home-flowstep:nth-child(2) .home-flowstep__arrow{ display:none; }
  .home-feats{ grid-template-columns:1fr; }
  .hd-spec{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  .hd-photo-grid--3,.hd-photo-grid--4{ grid-template-columns:repeat(2,1fr); }
  .hd-history{ grid-template-columns:1fr; column-gap:0; }
  .hd-figpair{ flex-direction:column; gap:2.4rem; }
  .hd-figpair .hd-figure img{ height:auto; max-height:24rem; }
}
@media (max-width:480px){
  :root{ --fs-title:2.8rem; }
  .hd-cards--3,.hd-cards--4{ grid-template-columns:1fr; }
  .hd-photo-grid--2,.hd-photo-grid--3,.hd-photo-grid--4{ grid-template-columns:1fr; }
  .hd-titlebox{ margin-bottom:3.5rem; }
  .hd-history__item{ grid-template-columns:1rem 3rem 1fr; gap:.7rem; }
  .hd-info th{ width:9rem; }
  .hd-subnav__tab{ font-size:var(--fs-cap); padding:0 1rem; }
  .sub-hero__title{ font-size:2.7rem; } .sub-hero__inner{ padding:4.6rem 2rem 4.4rem; }
  .home-hero__title{ font-size:3rem; } .home-hero__inner{ padding:6rem 2rem 6.6rem; }
  .home-stats{ grid-template-columns:1fr; }
  .home-prodcard{ flex-basis:24rem; }
  .home-flow{ grid-template-columns:1fr; }
  .home-flowstep__arrow{ display:none !important; }
  .home-hero__cta{ flex-direction:column; } .home-hero__cta .hd-btn{ width:100%; justify-content:center; }
  .home-cta__inner{ flex-direction:column; align-items:flex-start; }
}