/* HUDIUS 클러스터 운영 포털(cluster.ops.hudius.cloud) — www.hudius.com(site4.css) 의 토큰·구성 요소를 그대로 가져왔다.
   다크 헤더·히어로 / 화이트 콘텐츠 / 그린 액센트. 사이트 CSS 가 바뀌면 여기도 같이 맞춘다. 생성물 반영: scripts/portal-home-publish.py */
@font-face{font-family:'Pretendard Variable';font-weight:45 920;font-display:swap;src:url('/assets/fonts/PretendardVariable.woff2') format('woff2')}
:root{
  --green:#137A4C; --green-dark:#0F6640; --lime:#8DC63F; --lime-bright:#A9E15C;
  --ink:#1A1A1A; --body:#333; --muted:#666; --dim:#8A8A8A;
  --bg:#FFFFFF; --bg-gray:#F4F6F5; --line:#E2E6E4; --line2:#CDD4D0;
  --dark:#0E0E0E; --dark2:#161A18; --on-dark:#F2F4F2; --on-dark-muted:#A8B0AB;
  --mono:ui-monospace,'SF Mono',Consolas,monospace;
  --maxw:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--body); font-size:15.5px; line-height:1.65;
  font-family:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
  -webkit-font-smoothing:antialiased; word-break:keep-all; overflow-wrap:break-word}
a{color:var(--green); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--lime); outline-offset:2px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
h1,h2,h3{color:var(--ink); letter-spacing:-.01em; text-wrap:balance}
main [id]{scroll-margin-top:78px}

/* ---------- header (다크, www.hudius.com 과 같은 58px 띠) ---------- */
.hd{position:fixed; top:0; left:0; right:0; z-index:80; background:var(--dark); height:58px}
.hd-in{max-width:var(--maxw); margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; gap:8px}
.logo{display:flex; align-items:center; gap:12px; color:#fff; font-weight:800; font-size:17px; margin-right:18px}
.logo:hover{opacity:.9; text-decoration:none}
.logo-img{height:30px; width:auto; display:block; object-fit:contain}
.logo .div{width:1px; height:16px; background:rgba(255,255,255,.28)}
.logo .lab{font-size:14px; font-weight:600; letter-spacing:-.01em}
.gnb{display:flex; height:100%; margin:0; padding:0; list-style:none}
.gnb a{height:58px; padding:0 16px; display:flex; align-items:center; color:#E6E6E6; font-size:14.5px; font-weight:600}
.gnb a:hover{color:var(--lime-bright); box-shadow:inset 0 -3px 0 var(--lime); text-decoration:none}
.hd-actions{margin-left:auto; display:flex; align-items:center; gap:8px}
.btn{display:inline-flex; align-items:center; gap:7px; font:inherit; font-weight:700; font-size:14px;
  padding:9px 20px; border-radius:4px; border:1.5px solid transparent; cursor:pointer; text-decoration:none}
.btn:hover{text-decoration:none}
.btn-lime{background:var(--lime); color:#101800; border-color:var(--lime)}
.btn-lime:hover{background:var(--lime-bright)}
.btn-ghost-d{background:transparent; color:#fff; border-color:#555}
.btn-ghost-d:hover{border-color:#fff}
.btn-ghost{background:transparent; color:var(--green); border-color:var(--line2)}
.btn-ghost:hover{border-color:var(--green)}
main{padding-top:58px}

/* ---------- 페이지 히어로(다크 밴드, 서브페이지 phero4) ---------- */
.phero4{background:linear-gradient(120deg,var(--dark) 0%,#12291C 100%); color:var(--on-dark); padding:64px 0 48px}
.phero4 .crumb{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--lime-bright); margin-bottom:14px}
.phero4 h1{color:#fff; font-size:clamp(26px,3.6vw,40px); margin:0 0 10px}
.phero4 p{color:var(--on-dark-muted); max-width:62ch; margin:0; font-size:15.5px}
.phero4 .meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.phero4 .meta span{font-family:var(--mono); font-size:11px; letter-spacing:.05em; border:1px solid #3A4A40; border-radius:4px; padding:3px 9px; color:var(--on-dark-muted)}
.phero4 .meta span b{color:var(--lime-bright); font-weight:600}

/* ---------- 섹션 공통 ---------- */
section.cat{padding:64px 0}
section.cat.gray{background:var(--bg-gray)}
.cat-head{display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; margin-bottom:8px}
.cat-head h2{font-size:clamp(24px,3vw,34px); margin:0}
.cat-head .more{margin-left:auto; font-weight:700; font-size:14px; white-space:nowrap}
.cat-lead{color:var(--muted); max-width:70ch; margin:0 0 20px}
/* 바로가기 스트립 */
.quick{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 28px; padding:0}
.quick a{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line2); border-radius:999px;
  padding:7px 16px; font-size:13.5px; font-weight:600; color:var(--ink); background:#fff}
.quick a::after{content:'›'; color:var(--green); font-weight:800}
.quick a:hover{border-color:var(--green); color:var(--green); text-decoration:none}
/* 카드 그리드 */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:20px}
.card{background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease; position:relative}
.card:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(20,40,30,.13)}
.card .cb{padding:20px 20px 20px; display:flex; flex-direction:column; flex:1; border-top:4px solid var(--green)}
.card .kind{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--green); margin-bottom:8px}
.card h3{font-size:16.5px; margin:0 0 8px; line-height:1.4}
.card p{font-size:13.5px; color:var(--muted); margin:0 0 14px; flex:1}
.card .cta{font-size:13.5px; font-weight:700}
.card a.stretch::before{content:''; position:absolute; inset:0}
.badge{display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; border:1px solid var(--line2); border-radius:4px; padding:2px 8px; color:var(--muted); background:var(--bg-gray)}

/* ---------- 플랫폼 도구 타일(site4 .tool 확장) ---------- */
.tgroup{margin-top:26px}
.tgroup h3{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--green); margin:0 0 10px; font-weight:600}
.tools{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px}
.tool{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:8px; padding:12px 14px; background:#fff; color:var(--ink);
  transition:border-color .18s, box-shadow .18s}
.tool:hover{border-color:var(--green); text-decoration:none; box-shadow:0 8px 22px rgba(20,40,30,.10)}
.tool .mb{width:34px; height:34px; border-radius:6px; color:#fff; font:700 11px var(--mono); letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center; flex:none; background:var(--dark)}
.tool .mb.g{background:var(--green)} .tool .mb.l{background:var(--lime); color:#101800} .tool .mb.d{background:#2B3A33}
.tool b{display:block; font-size:14px; line-height:1.3}
.tool small{display:block; font-size:12px; color:var(--muted); line-height:1.4}
.tool .ext{margin-left:auto; color:var(--dim); font-size:12px; flex:none}
.tool:hover .ext{color:var(--green)}

/* ---------- 다크 CTA 스트립 ---------- */
.cta-strip{background:linear-gradient(120deg,var(--dark) 0%,#12291C 100%); color:var(--on-dark); padding:48px 0}
.cta-strip .wrap{display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.cta-strip h2{color:#fff; font-size:clamp(20px,2.6vw,28px); margin:0; flex:1; min-width:280px}
.cta-strip p{color:var(--on-dark-muted); margin:6px 0 0; font-size:14.5px}

/* ---------- 푸터(메가, www.hudius.com) ---------- */
footer{background:var(--dark); color:#BDBDBD; font-size:13.5px; margin-top:0}
.f-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:34px; padding:44px 0 30px}
.f-cols b{display:block; color:#fff; margin-bottom:12px; font-size:13px}
.f-cols a{display:block; color:#BDBDBD; padding:4px 0; font-size:13px}
.f-cols a:hover{color:var(--lime-bright); text-decoration:none}
.f-legal{border-top:1px solid #2A2A2A; padding:20px 0 30px; font-size:12px; color:#8A8A8A; line-height:1.9}
.f-legal a{color:#8A8A8A; margin-right:16px}
.f-legal a:hover{color:var(--lime-bright)}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .card{transition:none} }
@media (max-width:860px){
  .gnb{display:none}
  .logo{margin-right:0}
  .phero4{padding:44px 0 36px}
  section.cat{padding:48px 0}
}
@media (max-width:520px){
  .logo .lab{display:none}
  .hd-actions .btn{padding:7px 12px; font-size:13px}
  .hd-actions .site{display:none}
}