/* ================================================================
   sub-dark.css — 서브페이지(회사소개·사업소개·조달제품·고객지원)
   2026 전면 개편 · 모던 테크 다크 그린 재테마
   로드 순서: style.css → site.css → sub-dark.css (마지막)
   · style.css 의 컴포넌트 레이아웃은 유지, 색 토큰만 다크로 재정의
   · --navy 는 글자색으로 쓰인 곳이 많아 밝은색으로 바꾸고,
     배경으로 쓰인 선택자는 아래 [NAVY-BG] 에서 개별 덮어씀
   ================================================================ */

/* [TOKENS] style.css 변수 → 다크 값 ============================= */
:root{
  --navy:#eaf6ef;            /* 제목·본문 강조 글자 (원래 딥그린 → 밝게) */
  --blue:#1a6b3a;
  --blue-mid:#00e676;        /* 브랜드 그린 (링크·배지) */
  --blue-light:rgba(0,230,118,.10);
  --blue-line:rgba(0,230,118,.22);
  --accent:#00e676;
  --white:#0f2419;           /* 카드 배경 → 다크 패널 */
  --off-white:#0a1811;       /* 교차 섹션 배경 */
  --gray-100:#143022;        /* 연한 배경 → 조금 밝은 패널 */
  --gray-300:rgba(255,255,255,.09); /* 보더 */
  --gray-500:#9db8a8;        /* 보조 텍스트 */
  --gray-700:#d7e8de;        /* 본문·메뉴 텍스트 */
  --text:#e9f4ee;
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow-md:0 8px 28px rgba(0,0,0,.45);
  --shadow-lg:0 18px 50px rgba(0,0,0,.55);
}
body,.page-wrap{background:var(--bg);color:var(--text)}
::-webkit-scrollbar-track{background:#0a1811}
::-webkit-scrollbar-thumb{background:#1a6b3a}

/* [HEADER/MOBILE 충돌 정리] style.css 잔여 규칙 무력화 ============ */
.mob-menu{display:block}           /* style.css 의 display:none 해제 (site.css 는 transform 방식) */
.mob-menu.open{display:block}
#mainHeader{padding:0}
#mainHeader nav{flex:0 0 auto;height:auto;margin-left:auto;align-items:center}  /* 옛 nav{flex:1;height:68px} 무력화 */
.page-wrap{margin-top:0}                                                          /* 히어로가 자체 상단 여백 보유 */
.page-wrap .section{padding-left:8%;padding-right:8%}                             /* 옛 좌우 여백 복원 */
.sub-nav{height:auto;flex:none}                                                   /* 옛 nav 규칙이 서브내비에 걸리는 것 방지 */

/* [PAGE-HERO] 서브페이지 상단 배너 =============================== */
.page-hero{position:relative;min-height:380px;display:flex;align-items:flex-end;padding:150px 0 56px;margin-top:0;
  background:var(--bg);border-bottom:1px solid var(--line2);overflow:hidden;isolation:isolate}
.page-hero::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;background-size:cover;background-position:center 30%;filter:saturate(.7) brightness(.55)}
.page-hero.ph-about::before{background-image:url("../image/hq_building.webp");background-position:center 22%}
.page-hero.ph-services::before{background-image:url("../image/main/proj_01.webp")}
.page-hero.ph-procurement::before{background-image:url("../image/main/proj_02.webp")}
.page-hero.ph-support::before{background-image:url("../image/main/proj_03.webp")}
.page-hero::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:
  linear-gradient(90deg,rgba(7,15,11,.96) 0%,rgba(7,15,11,.82) 45%,rgba(7,15,11,.45) 100%),
  linear-gradient(0deg,var(--bg) 0%,transparent 45%),
  radial-gradient(700px 300px at 90% 0%,rgba(0,230,118,.18),transparent 60%)}
.page-hero-inner{width:min(1200px,calc(100% - 40px));margin:0 auto;text-align:left}
.breadcrumb{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-d);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:18px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(0,230,118,.05)}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--g)}
.breadcrumb span{color:var(--g)}
.breadcrumb strong{color:#fff;font-weight:700}
.page-hero h1{font-family:var(--ff-d);font-size:clamp(36px,5vw,60px);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:#fff;margin:0 0 14px}
.page-hero p{font-size:clamp(15px,1.3vw,18px);color:var(--muted);max-width:640px;margin:0}

/* [SUB-NAV] 스티키 서브 내비 ==================================== */
.sub-nav{position:sticky;top:66px;z-index:50;display:flex;gap:4px;justify-content:center;flex-wrap:wrap;padding:10px 20px;
  background:rgba(7,15,11,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line2);box-shadow:none}
.sub-nav a{padding:10px 18px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--muted);border:1px solid transparent;transition:all .2s}
.sub-nav a:hover{color:#fff;background:rgba(255,255,255,.05)}
.sub-nav a.active{color:#06120c;background:var(--g);border-color:var(--g);box-shadow:0 8px 22px rgba(0,230,118,.28)}

/* [SECTIONS] ===================================================== */
.section{background:transparent}
.section.bg-off{background:var(--bg2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.sec-h2{color:#fff}
.sec-h2 b{color:var(--g)}
.sec-sub{color:var(--muted)}
h1,h2,h3,h4,h5,h6{color:#fff}
p{color:inherit}
hr{border-color:var(--line2)}

/* [NAVY-BG] 원래 딥그린 배경이던 요소 → 다크 그린 패널/그라디언트 = */
.gg-core,.map-addr-card,.sdc-head,.ict-card .sdc-head,.ess-feature-head.feat,
.gc-thumb,.gc-thumb--empty,.form-head,.naramart-banner,.dm-head,
.sp-detail-head,.sp-detail-recruit .sp-detail-head,.recruit-apply-box,.case-modal-hd,.case-modal-img{
  background:linear-gradient(120deg,#143a25 0%,#0d2e1a 60%,#0b2216 100%)!important;color:#fff}
.ess-service-table th,.sp-table thead tr,.sp-table thead th{background:#123022!important;color:#fff!important}
.sdc-tag-accent,.cat-notice,.idx-notice-cat.cat-notice,.dm-btn-g2b{background:var(--g)!important;color:#06120c!important}
.gg-core *,.map-addr-card *,.sdc-head *,.form-head *,.dm-head *,.sp-detail-head h3,.case-modal-hd *{color:#fff}
.map-addr-card a,.sp-detail-head a{color:var(--g)}

/* [CARDS/TABLES/LISTS] 공통 다크 보정 ============================= */
[class*="card"],[class*="-box"],[class*="panel"]{border-color:var(--gray-300)}
table{color:var(--text)}
td,th{border-color:var(--gray-300)!important}
tbody tr:hover{background:rgba(0,230,118,.06)}
a{color:inherit}
.sp-table tbody td a,.sp-table tbody td button{color:var(--text)}

/* [FORMS] 등록/수정 모달 입력 요소 =============================== */
input[type="text"],input[type="number"],input[type="date"],input[type="search"],input[type="email"],input[type="tel"],input[type="url"],input[type="password"],textarea,select{
  background:#0b1a12!important;color:var(--text)!important;border:1px solid var(--gray-300)!important;border-radius:10px;caret-color:var(--g)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--g)!important;box-shadow:0 0 0 3px rgba(0,230,118,.18)}
input::placeholder,textarea::placeholder{color:var(--dim)}
select option{background:#0f2419;color:var(--text)}
label{color:var(--muted)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--g)}

/* [BUTTONS] 밝은색 하드코딩 버튼 → 다크 톤 ======================== */
.btn-naramart-lg{background:var(--g)!important;color:#06120c!important}
.dm-btn-del{background:rgba(255,80,80,.12)!important;color:#ff8a8a!important;border:1px solid rgba(255,80,80,.25)!important}
.status-always{background:rgba(255,196,0,.14)!important;color:#ffd166!important}
[class*="btn"]:not(.btn-primary):not(.btn-ghost):not(.btn-contact):not(.btn-naramart-lg):not(.dm-btn-del){color:inherit}

/* [MODALS/OVERLAYS] =============================================== */
[class*="overlay"]{background:rgba(3,8,5,.78)!important;backdrop-filter:blur(8px)}
[class*="modal"]:not([class*="overlay"]):not([class*="-hd"]):not([class*="-img"]){box-shadow:var(--shadow-lg)}

/* [LINE-ICONS] 이모지 대체 SVG — 컨테이너 font-size(1em)·색 자동 상속 ===== */
svg.li{width:1em;height:1em;display:inline-block;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
svg.li.li-inl{margin-right:.15em;vertical-align:-.15em}
.gg-bubble-ico svg.li,.transport-ico svg.li,.ess-core-ico svg.li,.proc-sum-ico svg.li,.rab-ico svg.li{stroke:var(--g);display:block;margin:auto}
.dm-thumb-ico svg.li{stroke:var(--muted);display:block;margin:auto}
.confirm-ico svg.li,#supportConfirmIco svg.li{stroke:var(--g);display:block;margin:auto}
h3 svg.li{stroke:var(--g)}

/* [MISC] ========================================================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}
img{filter:none}
iframe{border:0;border-radius:14px;filter:saturate(.85) contrast(1.05)}

@media (max-width:900px){
  .page-hero{min-height:300px;padding:120px 0 40px}
  .sub-nav{top:76px}
}

/* 앵커 진입 시 헤더(76)+서브내비(56) 만큼 여유 */
.page-wrap section[id]{scroll-margin-top:140px}

/* [FIX] 업/면허 현황 제목 가독성 (style.css 의 어두운 하드코딩 색 덮어쓰기) */
#license .sec-h2--license .sec-h2-ko{color:#fff!important}
#license .sec-hd--license .sec-sub{color:var(--muted)!important}
#license .sec-hd--license .sec-sub #licenseItemCount{color:var(--g)!important}

/* [FIX] 인증서/사례 모달: 이미지 잘리지 않게 전체 표시 (세로 문서 대응) */
.case-modal-img{height:auto!important;min-height:200px;max-height:72vh;padding:18px;background:#0b1a12!important;display:flex;align-items:center;justify-content:center}
.case-modal-img img{position:static!important;width:auto!important;max-width:100%;height:auto!important;max-height:calc(72vh - 36px);object-fit:contain!important;border-radius:6px;background:#fff}
.case-modal-img-badges{bottom:10px;left:12px}
@media (max-width:640px){.case-modal-img{max-height:60vh;padding:10px}.case-modal-img img{max-height:calc(60vh - 20px)}}