@charset "UTF-8";
/* 헤더 */
#header {background-color: #fff; position: absolute; top: 0; left: 0; z-index: 99; width: 100%;}
#header .header_wrap {display: flex; justify-content: space-between; align-items: center;height: 100px;}
#header .header_wrap .gnb {display: flex; justify-content: center; align-items: center; height: 100%;}
#header .header_wrap .gnb .menuDepth1 {height: 100%; position: relative;}
#header .header_wrap .gnb .menuDepth1::after {position: absolute; left: 0; bottom: 0; width: 0; background: var(--color1); content: ''; height: 3px; border-radius: 100%; transition: 0.15s ease;}
#header .header_wrap .gnb .menuDepth1 > a {font-size: 1.125rem; font-weight: 600; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 3rem; transition: 0.15s ease;}
#header .header_wrap .gnb .menuDepth1:hover > a {color: var(--color1); transition: 0.15s ease;}
#header .header_wrap .gnb .menuDepth1:hover::after {width: 100%; transition: 0.15s ease;}
#header .header_wrap .gnb .menuDepth1 .ulDepth2 {opacity: 0; visibility:hidden;position: absolute; z-index: 99; top: 100%; width: 100%; padding: 1rem 0;}
#header .header_wrap .gnb .menuDepth1 .ulDepth2 .menuDepth2 > a {text-align: center; padding:.5rem 1rem; box-sizing: border-box; font-weight: 500; font-size: 1.125rem; transition: 0.15s ease;}
#header .header_wrap .gnb .menuDepth1 .ulDepth2 .menuDepth2:hover > a {color: var(--color1); transition: 0.15s ease;}
#header .header_wrap .gnb .ulDepth2.is-active {opacity: 1; visibility: visible; transition: 0.3s ease;}
#m_gnb a {padding: 0; width: 48px; position: relative;}
#m_gnb a .line {position: absolute; width: 24px; transform: translateX(-50%); left: 50%; background: #fff; border-radius: 4px; height: 2px;}
#m_gnb a .line1 {top: 14px;}
#m_gnb a .line2 {top: 50%; transform:translateX(-50%) translateY(-50%);}
#m_gnb a .line3 {bottom: 14px;}
.m_bg {position: absolute; top: 100px; background: #fff; left: 0; width: 100%; z-index: 9; height: 0; opacity: 0; visibility:hidden; transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;}
.m_bg.is-active {opacity: 1; visibility: visible;}

.m_menu {position: fixed; left: 0; top: 0px; width: 100%; height: 100%; background: #fff; z-index: 999; padding:.4rem 0; box-sizing: border-box; display: none;}
.m_menu .gnb {display: flex; justify-content: space-between; gap: 2rem;}
.m_menu .gnb .menuDepth1 {flex: 1;}
.m_menu .gnb .menuDepth1 .ulDepth2 li {margin-top: .5rem;}
.m_menu .gnb a {border: 1px solid var(--gray8); padding: 1.25rem 1.5rem; font-size: 1.25rem; font-weight: 500; border-radius: var(--border-s);}
.m_menu .gnb .menuDepth1 > a {font-weight: 700; background: var(--color1); color: #fff; border-color: var(--color1);}
.m_menu .gnb .menuDepth2 > a {font-size: 1rem; background: var(--bg1); border-color: var(--bg1); transition: 0.15s ease; position: relative;}
.m_menu .gnb .menuDepth2 > a:hover {background: var(--color2); color: #fff; transition: 0.15s ease;}
.m_menu .gnb .menuDepth2 > a::after {transition: 0.15s ease;position: absolute; content: ''; background: url(/design/default/icon/Chevron_Right_MD.svg) no-repeat; width: 24px; height: 24px; right: 1rem; top: 50%; transform: translateY(-50%);}
.m_menu .gnb .menuDepth2 > a:hover::after {background: url(/design/default/icon/Chevron_Right_MD_wh.svg) no-repeat; transition: 0.15s ease;}
.m_menu .top-wr {justify-content: space-between; align-items: center; margin-bottom: 3rem;}
.m_menu #m_gnb a .line2 {display: none;}
.m_menu #m_gnb a .line1 {transform: translateX(-50%) translateY(-50%) rotate(-45deg); top: 50%;}
.m_menu #m_gnb a .line3 {bottom: auto;transform: translateX(-50%) translateY(-50%) rotate(45deg); top: 50%;}

/* 푸터 */
#footer {background-color: #222; padding-bottom: 3rem;}
#footer .top-wr {gap: 1.5rem; padding-top: 1rem;}
#footer .top-wr a {color: #fff; font-weight: 500; padding: 1rem 0; transition: 0.15s ease;}
#footer .top-wr a:hover {color:var(--color1); transition: 0.15s ease;}
#footer .bot-wr {justify-content: space-between; align-items: flex-end;}
#footer .bot-wr .left-wr h3 {font-size: 2rem; color: #fff; margin:2.5rem 0 1rem;}
#footer .bot-wr .left-wr address {color: #fff; margin-bottom: .5rem;}
#footer .bot-wr .left-wr ul  {gap: 1.5rem;}
#footer .bot-wr .left-wr ul span {margin-left: .5rem; color: var(--gray8);}
#footer .bot-wr .left-wr ul li {position: relative;}
#footer .bot-wr .left-wr ul li+li::after {position: absolute; content: ''; left: -0.75rem; border-left: 1px solid rgba(255,255,255,0.25); width: 1px; height: 70%; top: 4px;}
#footer .bot-wr .right-wr ul {gap: 10px;}
#footer .bot-wr .right-wr ul li a { transition: 0.15s ease;width: 48px; height: 48px; border-radius: 100%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center;}
#footer .bot-wr .right-wr ul li:hover a {background: rgba(255,255,255,0.2); transition: 0.15s ease;}

/* 서브 탭 */
.sub-tab-nav{display:flex;flex-wrap:wrap;gap:0;border-bottom:2px solid #C7DCFF;margin:24px 0 0}
.sub-tab-btn{padding:10px 20px;font-size:13px;font-weight:600;color:#6B7280;cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;white-space:nowrap}
.sub-tab-btn:hover{color:var(--blue-bright)}
.sub-tab-btn.active{color:var(--blue-bright);border-bottom-color:var(--blue-bright);background:#F7FAFF;border-radius:4px 4px 0 0}
.sub-tab-panel{display:none;padding-top:24px}
.sub-tab-panel.active{display:block}

/* ══════════════════════════════════════════
   콘텐츠 바 (주요사업 타이틀 하단 구분선)
══════════════════════════════════════════ */
.content-bar{width:36px;height:3px;background:var(--blue-bright);margin:10px 0 24px}

/* ══════════════════════════════════════════
   카테고리 섹션 / 헤더
══════════════════════════════════════════ */
.cat-section{margin-bottom:48px}
.cat-header{display:flex;align-items:center;gap:12px;background:var(--navy);color:#fff;padding:12px 20px;border-radius:6px;margin-bottom:24px}
.cat-dot{width:8px;height:8px;border-radius:50%;background:var(--blue-bright);flex-shrink:0}
.cat-name{font-size:15px;font-weight:700;letter-spacing:.05em}

/* ══════════════════════════════════════════
   장비 카드 (equip-item)
══════════════════════════════════════════ */
.equip-item{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start;padding:24px;background:#FAFBFD;border:1px solid #E9EDF5;border-radius:10px;margin-bottom:16px;transition:box-shadow .2s}
.equip-item:hover{box-shadow:0 6px 24px rgba(19,84,163,0.08)}
.equip-item:last-child{margin-bottom:0}
.equip-model{font-size:20px;font-weight:800;color:var(--navy);margin-bottom:2px}
.equip-maker{font-size:12px;color:var(--blue-bright);font-weight:700;letter-spacing:.06em;margin-bottom:16px;display:flex;align-items:center;gap:6px}
.equip-maker::before{content:'';display:inline-block;width:16px;height:2px;background:var(--blue-bright)}

/* 이미지 영역 */
.img-area{width:100%;aspect-ratio:4/3;background:#F0F4FA;border:2px dashed #C5D3E8;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#9DAFC9;font-size:12px;position:relative;overflow:hidden}
.img-area svg{opacity:.4}
.img-area .img-label{font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.img-area img{width:100%;height:100%;object-fit:cover;border-radius:6px;position:absolute;inset:0}

/* ══════════════════════════════════════════
   스펙 블록
══════════════════════════════════════════ */
.spec-block{margin-bottom:14px}
.spec-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:#EEF4FF;display:inline-block;padding:2px 8px;border-radius:3px;margin-bottom:7px}
.spec-list{list-style:none;padding:0}
.spec-list li{font-size:13px;color:#4B5563;line-height:1.75;padding-left:14px;position:relative}
.spec-list li::before{content:'–';position:absolute;left:0;color:#9CA3AF}

/* 개요 박스 */
.overview-box{background:#F7FAFF;border-left:4px solid var(--blue-bright);border-radius:0 8px 8px 0;padding:20px 24px;margin-bottom:32px;font-size:13px;line-height:1.9;color:#374151}
.overview-box strong{color:var(--navy);font-weight:700}

/* 피처 넘버 리스트 */
.feature-num{display:grid;gap:12px;margin-top:12px}
.feature-item{display:flex;gap:14px;align-items:flex-start;padding:14px;background:#F9FAFB;border-radius:8px}
.feature-num-badge{background:var(--blue);color:#fff;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;margin-top:1px}
.feature-item h4{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:3px}
.feature-item p{font-size:12px;color:#6B7280;line-height:1.6;margin:0}

/* 단계 플로우 */
.step-flow{display:grid;gap:10px;margin:16px 0}
.step-item{display:flex;gap:14px;align-items:flex-start;padding:12px 16px;background:#F9FAFB;border-radius:8px;border-left:3px solid var(--blue-bright)}
.step-num{background:var(--blue-bright);color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0}
.step-txt{font-size:13px;font-weight:700;color:var(--navy)}
.step-desc{font-size:12px;color:#6B7280;line-height:1.6}

/* 결과 그리드 */
.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
.result-grid figure{border:1px solid #E5EAF2;border-radius:8px;overflow:hidden}
.result-grid figcaption{font-size:12px;color:#6B7280;padding:8px 12px;text-align:center}

@media(max-width:768px){
  .equip-item{grid-template-columns:1fr}
  .result-grid{grid-template-columns:1fr}
  .tab-btn{font-size:12px;padding:9px 12px}
  .sub-tab-btn{font-size:12px;padding:8px 12px}
}


/* 태그 칩(콘텐츠/게시판 공용) */
.bd-tags{display:flex;flex-wrap:wrap;gap:8px}
.bd-tag{display:inline-flex;align-items:center;padding:6px 13px;border:1px solid #e6eaf1;border-radius:999px;background:#f7f9fc;color:#1D6FE8;font-size:13px;font-weight:500;text-decoration:none;transition:.15s}
.bd-tag:hover{background:#1D6FE8;color:#fff;border-color:#1D6FE8}
.bd-view-tags{margin:18px 0 4px}

/* 헤더 인증(로그인/회원가입) 버튼 */
.nav-right{display:flex;align-items:center;gap:10px}
.nav-auth{display:flex;align-items:center;gap:14px}
.nav-auth-name{font-size:13px;color:#0B1F40;font-weight:700;white-space:nowrap}
.nav-auth-link{font-size:14px;color:#374151;text-decoration:none;font-weight:500;transition:color .15s;white-space:nowrap}
.nav-auth-link:hover{color:var(--blue-bright)}
.nav-auth-join{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:4px;background:#0B1F40;color:#fff !important;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .15s}
.nav-auth-join:hover{background:var(--blue-bright)}
@media(max-width:900px){.nav-auth{display:none}}

/* ===== 회원 페이지(가입/로그인) ===== */
.member-page{max-width:560px;margin:0 auto;padding:120px 20px 80px;font-family:'Pretendard','Malgun Gothic',sans-serif}
.member-card{background:#fff;border:1px solid #e6eaf1;border-radius:16px;padding:44px 40px;box-shadow:0 10px 40px rgba(11,31,64,.06)}
.member-head{text-align:center;margin-bottom:32px}
.member-head h1{font-size:26px;font-weight:800;color:#0B1F40;margin:0 0 8px}
.member-head p{font-size:14px;color:#9aa6bb;margin:0}
.mf-field{margin-bottom:18px}
.mf-field>label{display:block;font-size:13px;font-weight:700;color:#374151;margin-bottom:7px}
.mf-field .req{color:#1D6FE8;margin-left:3px}
.mf-input{width:100%;height:48px;box-sizing:border-box;border:1px solid #d4dbe6;border-radius:10px;padding:0 15px;font-size:15px;color:#1f2937;transition:border-color .15s,box-shadow .15s;background:#fff}
.mf-input:focus{outline:none;border-color:#1D6FE8;box-shadow:0 0 0 3px rgba(29,111,232,.12)}
.mf-row{display:flex;gap:8px}
.mf-row .mf-input{flex:1}
.mf-btn-sub{flex-shrink:0;height:48px;padding:0 16px;border:1px solid #0B1F40;border-radius:10px;background:#fff;color:#0B1F40;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s}
.mf-btn-sub:hover{background:#0B1F40;color:#fff}
.mf-hint{font-size:12px;color:#9aa6bb;margin-top:6px}
.mf-strength{height:5px;border-radius:3px;background:#eef2f8;margin-top:8px;overflow:hidden}
.mf-strength>i{display:block;height:100%;width:0;transition:width .2s,background .2s}
.mf-msg{font-size:12px;margin-top:6px;min-height:15px}
.mf-msg.ok{color:#16a34a}.mf-msg.err{color:#dc2626}
/* 약관 */
.mf-terms{border:1px solid #e6eaf1;border-radius:12px;padding:6px 16px;margin:22px 0}
.mf-terms .mf-all{display:flex;align-items:center;gap:9px;padding:12px 0;border-bottom:1px solid #eef2f8;font-weight:700;color:#0B1F40;font-size:15px}
.mf-terms .mf-term{display:flex;align-items:center;gap:9px;padding:11px 0;font-size:14px;color:#374151}
.mf-terms input[type=checkbox]{width:18px;height:18px;accent-color:#1D6FE8;flex-shrink:0}
.mf-terms .opt{color:#9aa6bb;font-size:12px;margin-left:2px}
.mf-terms a{margin-left:auto;font-size:12px;color:#1D6FE8;text-decoration:underline}
.mf-submit{width:100%;height:54px;border:0;border-radius:10px;background:#0B1F40;color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:background .15s;margin-top:8px}
.mf-submit:hover{background:#1D6FE8}
.mf-foot{text-align:center;margin-top:20px;font-size:14px;color:#6b7280}
.mf-foot a{color:#1D6FE8;font-weight:600;text-decoration:none}
.mf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:560px){.member-card{padding:32px 22px}}

/* 20261016: popup close-bar flush to image + styled */
[id^="layerPopup"]{ height:auto !important; background:#fff !important; border-radius:10px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.28); }
[id^="layerPopup"] > a{ display:block; font-size:0; line-height:0; }
[id^="layerPopup"] > a img.layerPopup,[id^="layerPopup"] img.layerPopup{ display:block; width:100%; border:0 !important; }
[id^="layerPopup"] > p:not(.tp-pop){ display:none !important; margin:0 !important; }
[id^="layerPopup"] .tp-pop{ margin:0; display:flex; align-items:center; gap:6px; background:#20302a; color:#fff; padding:11px 16px; font-size:14px; line-height:1; letter-spacing:-.01em; }
[id^="layerPopup"] .tp-pop input[type=checkbox]{ width:16px; height:16px; margin:0 2px 0 0; accent-color:#2f9e6e; cursor:pointer; vertical-align:middle; }
[id^="layerPopup"] .tp-pop > a{ margin-left:auto; background:transparent !important; color:#fff; font-weight:600; text-decoration:none; padding:5px 16px; border:1px solid rgba(255,255,255,.55); border-radius:5px; transition:background .15s,border-color .15s; }
[id^="layerPopup"] .tp-pop > a:hover{ background:#fff; color:#20302a; border-color:#fff; }