/* NAVIS 허브 — 공통 스타일 (주제별 페이지 분리 리뉴얼) */
html{scroll-behavior:smooth}
:root{
  --navy:#1b3a5b; --navy2:#16314d; --navy-deep:#0f2238;
  --gold:#c9a227; --gold-soft:#f4ecd4; --gold-d:#a9841a;
  --ink:#20303f; --muted:#5c6b7a; --line:#e3e8ee; --bg:#f6f8fa;
  --panel:#ffffff; --blue-soft:#eef4fb; --green:#2e8b6f; --red:#c0504d;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Pretendard','Malgun Gothic','Apple SD Gothic Neo',sans-serif;color:var(--ink);background:var(--bg);line-height:1.62;font-size:16.5px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
[id]{scroll-margin-top:150px}
.btn{background:var(--gold);color:#1b2c3d;border:none;border-radius:9px;padding:11px 20px;font-size:15.5px;font-weight:700;cursor:pointer;font-family:inherit;display:inline-block}
.btn:hover{background:#d9b640}
.btn.ghost{background:transparent;border:1px solid #ffffff55;color:#fff}
.btn.sm{padding:8px 15px;font-size:14px}

/* ── 상단 바 ── */
header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 8px rgba(0,0,0,.12)}
.topbar{display:flex;align-items:center;gap:22px;min-height:68px;flex-wrap:wrap;padding:10px 0}
.logo{font-size:23px;font-weight:800;letter-spacing:.5px}
.logo b{color:var(--gold)}
.logo .sub{display:block;font-size:11.5px;font-weight:400;color:#9fc3e8;letter-spacing:.3px;margin-top:-2px}
nav.main{display:flex;gap:2px;margin-left:8px;flex-wrap:wrap;row-gap:6px}
nav.main a{padding:9px 14px;border-radius:8px;font-size:15.5px;font-weight:600;color:#dce8f4;transition:.15s;white-space:nowrap}
nav.main a:hover,nav.main a.on{background:#ffffff1a;color:#fff}
.topright{margin-left:auto;display:flex;gap:10px;align-items:center}
.searchbox{display:flex;align-items:center;gap:6px;background:#ffffff14;border:1px solid #ffffff2e;border-radius:9px;padding:0 12px;height:38px}
.searchbox .si{font-size:13px;opacity:.8}
.searchbox input{background:transparent;border:none;outline:none;color:#fff;font-size:14px;width:170px;font-family:inherit}
.searchbox input::placeholder{color:#9fc3e8}
@media(max-width:900px){.searchbox{display:none}}
@media(max-width:900px){
  .topbar{flex-wrap:wrap}
  nav.main{order:3;flex-basis:100%;width:100%;display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:0;background:var(--navy2);padding:4px 4px;margin:8px -20px 0;scrollbar-width:none;border-top:1px solid rgba(255,255,255,.1)}
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{padding:11px 14px;font-size:14.5px;white-space:nowrap;flex:none}
}

/* ── 히어로 (주제별 페이지 공통) ── */
.hero{position:relative;min-height:280px;display:flex;align-items:center;color:#fff;background-size:cover;background-position:center;background-color:var(--navy)}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(15,34,56,.94) 15%,rgba(27,58,91,.72) 60%,rgba(27,58,91,.5))}
.hero .wrap{position:relative;z-index:1;padding-top:38px;padding-bottom:38px}
.hero .eyebrow{font-size:13.5px;font-weight:700;letter-spacing:.06em;color:var(--gold);text-transform:uppercase}
.hero h1{font-size:clamp(28px,4.2vw,42px);font-weight:800;letter-spacing:-.01em;margin-top:8px;line-height:1.3}
.hero h1 .hl{color:var(--gold)}
.hero p{color:#dbe7f2;margin-top:12px;font-size:17px;max-width:640px;line-height:1.6}
.hero .quick{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.quick .qbtn{background:#ffffff14;border:1px solid #ffffff2e;color:#fff;border-radius:10px;padding:11px 17px;font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.quick .qbtn:hover{background:#ffffff24}
.hero .credit{margin-top:16px;font-size:13.5px;color:#9fc3e8}
.hero .credit b{color:var(--gold)}
.hero-stats{display:flex;align-items:center;gap:24px;margin-top:22px;flex-wrap:wrap}
.hero-stats>div:not(.sep){display:flex;flex-direction:column}
.hero-stats b{font-size:24px;color:#fff;letter-spacing:.3px}
.hero-stats span{font-size:12.5px;color:#9fc3e8;margin-top:2px}
.hero-stats .sep{width:1px;height:32px;background:#ffffff2e}
.hero-tags{display:flex;align-items:center;gap:8px;margin-top:18px;flex-wrap:wrap}
.hero-tags .ht-label{font-size:12.5px;color:#7e9cbb;font-weight:700}
.hero-tags a{font-size:13.5px;color:#dbe7f2;background:#ffffff12;border:1px solid #ffffff22;border-radius:14px;padding:4px 12px;cursor:pointer}
.hero-tags a:hover{background:#ffffff22;color:#fff}

/* 홈 전용: 통계 스트립 */
.stat-strip{background:var(--navy2);color:#fff;padding:16px 0}
.stat-strip .wrap{display:flex;justify-content:center;gap:36px;flex-wrap:wrap;text-align:center}
.stat-strip b{font-size:22px;color:var(--gold);display:block}
.stat-strip span{font-size:13px;color:#c3d3e2}

/* 공지 */
.notice{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:11px;padding:12px 20px;margin-top:20px;box-shadow:0 1px 3px rgba(27,58,91,.04)}
.notice .nt-label{flex:none;font-size:14px;font-weight:700;color:var(--navy)}
.notice .nt-list{flex:1;overflow:hidden}
.notice .nt-item{display:block;font-size:14px;color:#444;padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notice .nt-item:hover{color:var(--navy)}
.notice .nt-item:not(:first-child){display:none}
.notice .nt-new{font-size:10.5px;font-weight:700;color:#fff;background:var(--red);border-radius:4px;padding:1px 5px;margin-right:6px;vertical-align:middle}
.notice .nt-more{flex:none;font-size:13px;color:var(--muted);font-weight:600}
.notice .nt-more:hover{color:var(--navy)}

/* ── 섹션 공통 ── */
.section{padding:34px 0}
.section-head{margin-bottom:20px}
.section-head h2{font-size:24px;color:var(--navy);font-weight:800}
.section-head p{color:var(--muted);font-size:15.5px;margin-top:6px}

/* ── 레이아웃 ── */
.grid{display:grid;grid-template-columns:1fr 320px;gap:24px}
.col-main{display:flex;flex-direction:column;gap:20px}
.col-side{display:flex;flex-direction:column;gap:18px}
@media(max-width:900px){.grid{grid-template-columns:1fr}.col-side{order:-1}}

/* ── 카드 ── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:22px 24px;box-shadow:0 1px 3px rgba(27,58,91,.04)}
.side-card{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:18px 19px;box-shadow:0 1px 3px rgba(27,58,91,.04)}
.card-h{display:flex;align-items:center;gap:9px;margin-bottom:15px;flex-wrap:wrap}
.card-h h2{font-size:19.5px;color:var(--navy);letter-spacing:.2px}
.card-h .tag{font-size:12px;background:var(--gold-soft);color:#8a6d12;padding:3px 10px;border-radius:10px;font-weight:700}
.card-h .more{margin-left:auto;font-size:13.5px;color:var(--muted);font-weight:600}
.card-h .more:hover{color:var(--navy)}
.desc{font-size:15px;color:var(--muted)}

/* 홈: 주제 카드 그리드 */
.topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:980px){.topic-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.topic-grid{grid-template-columns:1fr}}
.topic-card{background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden;transition:.15s;display:flex;flex-direction:column}
.topic-card:hover{border-color:#cfe0f0;box-shadow:0 6px 18px rgba(27,58,91,.1);transform:translateY(-3px)}
.topic-card .thumb{height:110px;background-size:cover;background-position:center;position:relative}
.topic-card .thumb .ic{position:absolute;left:12px;bottom:-16px;width:38px;height:38px;border-radius:10px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.topic-card .tc-body{padding:24px 16px 16px}
.topic-card h3{font-size:16.5px;color:var(--navy);font-weight:800}
.topic-card p{font-size:13.5px;color:var(--muted);margin-top:5px;line-height:1.5;min-height:40px}
.topic-card .tag{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;color:#8a6d12;background:var(--gold-soft);padding:2px 8px;border-radius:8px}

/* 글쓰기 버튼 */
.write-btn{background:var(--navy);color:#fff;border:none;border-radius:8px;padding:8px 15px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit}
.write-btn:hover{background:var(--navy2)}

/* RSS 피드 */
.feed-item{display:block;padding:10px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.feed-item:first-child{border-top:none}
.feed-item:hover h4{color:var(--navy);text-decoration:underline}
.feed-item h4{font-size:15px;font-weight:600;color:#2b3742;margin:0 0 4px;line-height:1.5}
.feed-item .fmeta{font-size:12.5px;color:var(--muted)}
.feed-item .fcat{display:inline-block;font-size:11px;font-weight:700;background:#eef4fb;color:#2c5d8a;border-radius:4px;padding:2px 6px;margin-right:6px}
.feed-load{font-size:14px;color:var(--muted);padding:14px 0;text-align:center;line-height:1.6}
.feed-note{font-size:13.5px;color:var(--muted);margin-top:13px;padding-top:11px;border-top:1px dashed var(--line)}
.feed-note a{color:var(--navy);font-weight:600;text-decoration:none}

/* 큐레이션 채용 공고 */
.jobrow{display:flex;gap:14px;padding:17px 0;border-top:1px solid var(--line)}
.jobrow:first-of-type{border-top:none}
.jflag{flex:none;font-size:12px;font-weight:700;padding:4px 9px;border-radius:6px;height:fit-content;margin-top:2px}
.jflag.global{background:#eef4fb;color:#2c5d8a}
.jflag.kr{background:#fdeeed;color:#c0504d}
.jbody{flex:1;min-width:0}
.jbody h4{font-size:16.5px;color:var(--navy);font-weight:700;margin-bottom:4px;line-height:1.4}
.jmeta{font-size:13px;color:var(--muted);margin-bottom:8px}
.jtake{background:#eef4fb;border-left:3px solid var(--navy);padding:11px 14px;border-radius:0 7px 7px 0;font-size:14.5px;line-height:1.7;color:#33475b}
.jtake b{color:var(--navy)}
.jbg{font-size:14px;color:#5c6874;line-height:1.7;margin-bottom:9px;padding-left:12px;border-left:2px solid var(--line)}
.jhow{font-size:13px;color:var(--muted);margin-top:8px}
.jhow code{background:#f1f3f5;padding:2px 7px;border-radius:4px;font-size:13px;color:#33475b}

/* 뉴스 */
.newsrow{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line);align-items:flex-start}
.newsrow:first-child{border-top:none}
.ncat{flex:none;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:6px;margin-top:1px}
.ncat.customs{background:#fdeeed;color:var(--red)}
.ncat.logi{background:#eef4fb;color:#2c5d8a}
.ncat.trade{background:var(--gold-soft);color:#8a6d12}
.ncat.edu{background:#e9f5ec;color:#2c6e49}
.ncat.job{background:#f2ecfb;color:#6b46c1}
.ngroup{border-top:1px solid var(--line);padding-top:13px;margin-top:15px}
.ngroup:first-of-type{border-top:none;margin-top:6px;padding-top:0}
.ngroup-h{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.ngroup-h .ncat{font-size:13px;padding:5px 11px}
.ncount{font-size:12px;color:var(--muted);font-weight:600}
.ngroup .newsrow .ncat{background:#f1f3f5;color:#6b7785;font-weight:600;min-width:40px;text-align:center}
.more-btn{width:100%;margin-top:10px;padding:9px;background:#f6f8fa;border:1px solid var(--line);border-radius:8px;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;font-family:inherit}
.more-btn:hover{background:#eef2f6}
.nbody h4{font-size:15px;font-weight:600}
.nbody .nsum{font-size:13.5px;color:#3a4650;margin-top:5px;line-height:1.6}
.nbody .meta{font-size:12.5px;color:var(--muted);margin-top:5px}
.ai-note{background:var(--blue-soft);border:1px solid #d6e4f3;border-radius:8px;padding:10px 13px;font-size:13.5px;color:#2c5d8a;margin-bottom:14px}

/* 사이드 */
.side-card h3{font-size:16px;color:var(--navy);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.promo{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff}
.promo h3{color:#fff}
.promo p{font-size:13.5px;color:#cdddec;margin-bottom:13px}
.promo .btn{width:100%;text-align:center;display:block}
.rank li{display:flex;gap:10px;font-size:14px;padding:7px 0;border-top:1px dashed var(--line);align-items:baseline}
.rank li:first-child{border-top:none}
.rank .n{flex:none;width:20px;color:var(--gold);font-weight:800;font-style:italic}
.filebox li{display:flex;gap:9px;font-size:14px;padding:7px 0;border-top:1px dashed var(--line);align-items:center}
.filebox li:first-child{border-top:none}
.filebox .ext{flex:none;font-size:10.5px;font-weight:700;color:#fff;background:var(--navy);border-radius:4px;padding:2px 6px}
.filebox li:hover{background:#f6f8fa}
.filebox a{flex:1}

/* 운영자 프로필 카드 */
.profile{background:linear-gradient(160deg,#fafcfe,#fff)}
.pf-top{display:flex;gap:12px;align-items:center;margin-bottom:11px}
.pf-img{flex:none;width:50px;height:50px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.pf-name{font-size:16.5px;font-weight:700;color:var(--navy)}
.pf-badge{font-size:11px;background:var(--gold);color:#1b2c3d;padding:1px 8px;border-radius:9px;font-weight:700;vertical-align:middle}
.pf-role{font-size:12.5px;color:var(--muted);margin-top:1px}
.pf-desc{font-size:13.5px;color:#444;line-height:1.6;margin-bottom:12px}
.pf-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;text-align:center}
.pf-stats>div{background:var(--blue-soft);border-radius:8px;padding:8px 3px}
.pf-stats b{display:block;font-size:18px;color:var(--navy)}
.pf-stats b span{font-size:11px;font-weight:600}
.pf-stats>div>span{font-size:11px;color:var(--muted)}
.pf-sns{display:flex;gap:6px;margin-top:11px}
.pf-sns .sns{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:7px;padding:7px 4px;cursor:pointer}
.pf-sns .sns:hover{background:var(--blue-soft);border-color:#cfe0f0}

/* 자료실 */
.docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
@media(max-width:760px){.docs-grid{grid-template-columns:1fr}}
.cert-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 24px}
@media(max-width:760px){.cert-grid{grid-template-columns:1fr}}
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.guide-grid{grid-template-columns:1fr}}
.guide-card{text-decoration:none;background:#fafcfe;border:1px solid var(--line);border-radius:10px;padding:14px 15px;display:block}
.guide-card .chip{font-size:11px;font-weight:700;padding:2px 9px;border-radius:8px}
.guide-card .chip.face{color:var(--gold-d);background:var(--gold-soft)}
.guide-card .chip.ai{color:#2c6e49;background:#e9f5ec}
.guide-card h4{font-size:15px;color:var(--navy);font-weight:700;margin:8px 0 3px}
.guide-card p{font-size:13px;color:var(--muted)}
.dl-card{display:flex;align-items:center;gap:14px;text-decoration:none;background:var(--blue-soft);border:1px solid #cfe0ef;border-radius:10px;padding:14px 16px;margin-bottom:18px}
.dl-card .ico{font-size:26px}
.dl-card b{display:block;font-size:15.5px;font-weight:700;color:var(--navy)}
.dl-card span{display:block;font-size:13px;color:var(--muted)}
.dl-card .go{font-size:13.5px;font-weight:700;color:var(--navy)}

/* 갤러리 */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.gallery{grid-template-columns:1fr}}
.gallery img{width:100%;height:150px;object-fit:cover;border-radius:10px}

/* 교육/자격 표 */
.cert-table{display:grid;gap:10px}
.cert-group h4{font-size:14.5px;color:var(--navy);font-weight:800;margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
.cert-group:first-child h4{border-top:none;margin-top:0}
.cert-row{display:flex;justify-content:space-between;gap:10px;font-size:14.5px;padding:7px 0;border-top:1px dashed var(--line);color:#3a4650}
.cert-row:first-of-type{border-top:none}
.cert-row span{color:var(--muted);font-size:13px}

/* 하단 컨설팅 CTA */
.cta-block{background:linear-gradient(135deg,#1b3a5b,#16314d);padding:52px 0;color:#fff}
.cta-block .head{text-align:center;margin-bottom:30px}
.cta-block .bar{width:52px;height:3px;background:var(--gold);margin:0 auto 16px}
.cta-block h2{font-size:28px;margin-bottom:10px}
.cta-block .head p{color:#cdddec;font-size:16px}
.svc4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
@media(max-width:720px){.svc4{grid-template-columns:1fr 1fr}}
.svc4>div{background:#ffffff10;border:1px solid #ffffff26;border-radius:12px;padding:22px}
.svc4 .ic{font-size:26px;margin-bottom:9px}
.svc4 h4{color:#fff;font-size:16px;margin-bottom:7px}
.svc4 p{color:#9fc3e8;font-size:13.5px}

/* 문의 폼 */
.form-panel{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:38px}
.form-row{margin-bottom:17px}
.form-row label{display:block;font-size:14.5px;font-weight:600;color:var(--navy);margin-bottom:7px}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:9px;font-size:15px;font-family:inherit}
.form-row textarea{min-height:110px;resize:vertical}

footer{background:var(--navy);color:#9fc3e8;padding:28px 0;font-size:13.5px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer b{color:#fff}
footer a:hover{color:#fff}

@view-transition { navigation: auto; }
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:hubIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes hubIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}