/* ===========================================================
   블루웨일 공용 스타일 — 전 페이지 공유 (skeleton)
   =========================================================== */
:root{
  --navy:#0a1f3c; --navy2:#0d2a52;
  --blue:#1c5cc4; --blue-d:#1648a0;
  --ink:#1a2330; --gray:#6b7585; --line:#e6e9ef;
  --bg:#eef1f6; --up:#e23b3b; --down:#2f6fd0; --white:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:112px}
body{font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:var(--ink);background:#fff;line-height:1.5}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.sec-h{text-align:center;font-size:30px;font-weight:800;margin-bottom:6px}
.sec-sub{text-align:center;color:var(--gray);margin-bottom:34px}

/* ===== 상단 지수 티커 ===== */
.ticker{background:#07182f;color:#cdd7e6;font-size:13px;border-bottom:1px solid rgba(255,255,255,.06)}
.ticker .wrap{display:flex;gap:34px;height:40px;align-items:center;overflow:hidden;white-space:nowrap}
.ticker .it{display:flex;gap:8px;align-items:center}
.ticker .nm{color:#9fb0c8}
.ticker .up{color:#ff6b6b}.ticker .down{color:#5b9bff}

/* ===== 헤더 ===== */
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo img{height:64px}
nav.gnb{display:flex;gap:38px;font-weight:700;font-size:17px}
nav.gnb .gi{position:relative}
nav.gnb .gi>a{display:flex;align-items:center;height:84px}
nav.gnb a:hover,nav.gnb a.on,nav.gnb .gi:hover>a{color:var(--blue)}
nav.gnb .gsub{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:172px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 32px rgba(10,31,60,.16);padding:8px;display:none;z-index:60}
nav.gnb .gi:hover .gsub{display:block}
nav.gnb .gsub a{display:block;padding:11px 16px;font-size:14.5px;font-weight:600;color:#3a485e;white-space:nowrap;border-radius:7px}
nav.gnb .gsub a:hover{background:#eef5ff;color:var(--blue)}
.hd-ico{display:flex;align-items:center;gap:18px}
.hd-ico img{height:26px;cursor:pointer}
.hd-ico button{background:none;border:none;cursor:pointer;color:var(--ink);font-size:26px;line-height:1}
@media(max-width:900px){nav.gnb{display:none}}

/* ===== 사이트맵 ===== */
.sitemap{position:fixed;inset:0;background:#1c4fb0;color:#fff;z-index:100;display:none;overflow:auto}
.sitemap.open{display:block}
.sitemap .top{display:flex;justify-content:space-between;align-items:center;padding:30px 40px}
.sitemap .top h2{font-weight:400;letter-spacing:3px;font-size:30px}
.sitemap .x{background:none;border:none;color:#fff;font-size:34px;cursor:pointer}
.sitemap hr{border:none;border-top:1px solid rgba(255,255,255,.3);margin:0 40px}
.sm-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;padding:40px;max-width:1240px;margin:0 auto}
.sm-col h3{font-size:19px;margin-bottom:22px;font-weight:700}
.sm-col a{display:block;color:#dfe7f5;font-size:15px;margin-bottom:14px}
.sm-col a:hover{color:#fff;text-decoration:underline}
@media(max-width:900px){.sm-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== 서브페이지 헤더(페이지 타이틀 + 탭) ===== */
.sub-hero{background:linear-gradient(120deg,#0a1f3c,#13366e);color:#fff;text-align:center;padding:56px 20px 50px}
.sub-hero h1{font-size:34px;font-weight:800}
.sub-hero .bc{margin-top:12px;color:#bcd0f0;font-size:14px}
.subtabs{display:flex;justify-content:center;gap:6px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:84px;z-index:40}
.subtabs a{padding:18px 26px;font-weight:700;color:#6b7585;border-bottom:3px solid transparent;margin-bottom:-1px}
.subtabs a.on{color:var(--ink);border-bottom-color:var(--blue)}
.subtabs a:hover{color:var(--ink)}
/* 서브탭 클릭 시 헤더+탭바에 가리지 않도록 스크롤 위치 보정 + 섹션 구분 */
/* 각 섹션을 화면 높이만큼 확보 → 서브탭 클릭 시 해당 섹션만 화면에 꽉 차게 */
#greet,#biz,#vision,#o,#g,#f{scroll-margin-top:152px;min-height:calc(100vh - 170px)}
#biz,#vision,#g,#f{border-top:1px solid var(--line);padding-top:44px;margin-top:8px}
/* 섹션 내용을 세로 중앙에 배치(위에 붙지 않고 화면 가운데로) */
#biz,#vision,#o,#g,#f{display:flex;flex-direction:column;justify-content:center}
#greet{align-content:center}
.page{padding:54px 0 80px;min-height:40vh}
.page [id]{scroll-margin-top:120px}

/* ===== 게시판(목록형) ===== */
.board-tools{display:flex;justify-content:center;gap:8px;margin-bottom:26px}
.board-tools select,.board-tools input{height:44px;border:1px solid var(--line);border-radius:8px;padding:0 14px;font-size:14px}
.board-tools input{width:min(420px,60vw)}
.board-tools .sbtn{width:46px;border:none;background:var(--navy);color:#fff;border-radius:8px;cursor:pointer;font-size:16px}
.blist{border-top:2px solid var(--ink)}
.blist .row{display:flex;align-items:center;gap:18px;padding:20px 10px;border-bottom:1px solid #eef0f4}
.blist .row:hover{background:#f7f9fc}
.blist .tag{flex-shrink:0;width:48px;text-align:center;background:#6b7585;color:#fff;font-size:12px;border-radius:5px;padding:5px 0}
.blist .tag.notice{background:var(--blue)}
.blist .ti{flex:1;font-size:15.5px;color:#2a3445;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blist .dt{flex-shrink:0;color:#9aa6b8;font-size:13.5px}
.blist .total{padding:14px 4px;color:var(--gray);font-size:13.5px}
.pager{display:flex;justify-content:center;gap:6px;margin-top:34px}
.pager a{min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;color:#6b7585;font-size:14px}
.pager a.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ===== FAQ 아코디언 ===== */
.faq{max-width:920px;margin:0 auto}
.faq .q{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:hidden}
.faq .qh{display:flex;align-items:center;gap:14px;padding:20px 22px;cursor:pointer;font-weight:600;font-size:15.5px}
.faq .qh .Q{width:30px;height:30px;border-radius:7px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}
.faq .qh .cat{flex-shrink:0;color:var(--blue);font-size:13px;font-weight:700}
.faq .qh .arw{margin-left:auto;color:#b6bfcc;transition:.2s}
.faq .q.open .arw{transform:rotate(180deg)}
.faq .qb{display:none;padding:0 22px 22px 66px;color:#4a5566;font-size:14.5px;line-height:1.75}
.faq .q.open .qb{display:block}

/* ===== 이벤트 목록 그리드 ===== */
.ev-list{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ev-list .card{border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.2s}
.ev-list .card:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(13,42,82,.12)}
.ev-list .thumb{aspect-ratio:350/263;overflow:hidden}
.ev-list .thumb img{width:100%;height:100%;object-fit:cover}
.ev-list .b{padding:18px}
.ev-list .b .nm{font-weight:700;font-size:15px}
.ev-list .b .dt{color:#9aa6b8;font-size:13px;margin-top:10px}
@media(max-width:900px){.ev-list{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ev-list{grid-template-columns:1fr}}

/* ===== 다운로드 센터 ===== */
.dl-lead{font-size:15px;color:#4a5566;line-height:1.8;margin-bottom:26px}
.dl-lead .big{font-size:22px;font-weight:800;color:var(--ink);display:block;margin-bottom:10px}
.dl-box{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(120deg,#dbe7fb,#eaf1fc);padding:46px;display:flex;gap:40px;align-items:center;flex-wrap:wrap}
.dl-box .col{display:flex;flex-direction:column;gap:22px}
.dl-item .lab{font-weight:800;font-size:20px;margin-bottom:10px}
.dl-item .lab span{font-size:13px;font-weight:600;color:var(--gray);margin-left:6px}
.btn-dl{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;border-radius:8px;padding:14px 30px;font-weight:700;font-size:15px}
.btn-dl:hover{background:var(--blue-d)}
.dl-box .art{flex:1;min-width:240px}

/* ===== 원격지원 ===== */
.remote-acc{max-width:980px;margin:0 auto}
.remote-acc h3{font-size:20px;margin-bottom:8px}
.remote-acc .desc{color:var(--gray);margin-bottom:22px}
.r-item{display:flex;align-items:center;gap:14px;background:#3f6fd6;color:#fff;border-radius:10px;padding:18px 22px;margin-bottom:12px;font-weight:600}
.r-item .faqbtn{margin-left:auto;background:#fff;color:var(--blue);border-radius:6px;padding:7px 14px;font-size:13px;font-weight:700}
.work-time{margin-top:30px;color:#4a5566}
.work-time h4{font-size:18px;margin-bottom:8px;color:var(--ink)}

/* ===== 푸터 ===== */
footer{position:relative;color:#cdd9ee;padding:64px 0 40px;background:linear-gradient(rgba(8,21,40,.9),rgba(8,21,40,.95)),url('footer_bg.jpg') center/cover}
.f-tag{color:#5b9bff;font-weight:700;letter-spacing:2px;font-size:14px}
footer h2{color:#fff;font-size:27px;margin:14px 0 12px;font-weight:800}
footer .lead{color:#aebfd8;margin-bottom:26px}
.f-notice h4{color:#fff;font-size:15px;margin-bottom:10px}
.f-notice p{font-size:13px;color:#9fb0c8;line-height:1.7}
.f-menu{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0}
.f-menu a{border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:10px 18px;font-size:14px;color:#dce6f6;display:flex;gap:18px;align-items:center}
.f-menu a:hover{background:rgba(255,255,255,.08)}
.f-bot{display:flex;align-items:center;gap:40px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:26px}
.f-bot .flogo{height:50px}
.f-bot .col .k{color:#7e90ac;font-size:12px}
.f-bot .col .v{color:#dce6f6;font-weight:700;margin-top:4px;font-size:14px}

/* ===== 채팅 위젯 ===== */
.chat{position:fixed;right:24px;bottom:24px;z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.chat-card{background:#fff;border-radius:14px;box-shadow:0 12px 30px rgba(10,31,60,.22);padding:14px 16px;max-width:300px;position:relative;animation:pop .4s ease}
.chat-card .hdt{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.chat-card .hdt b{font-size:14px}.chat-card .hdt .ago{color:#9aa6b8;font-size:12px}
.chat-card .hdt .cx{margin-left:auto;border:none;background:none;color:#b6bfcc;font-size:16px;cursor:pointer}
.chat-card .ln{font-size:13.5px;color:#37414f;margin:5px 0}
.chat-card:after{content:"";position:absolute;right:26px;bottom:-9px;border:9px solid transparent;border-top-color:#fff;border-bottom:0}
.chat-btn{width:66px;height:66px;border-radius:50%;box-shadow:0 10px 24px rgba(28,92,196,.45);cursor:pointer;border:none;background:#fff;padding:0;overflow:hidden}
.chat-btn img{width:100%;height:100%;object-fit:cover}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}