/* [HOME-PACK 2026-10-21] 기관 홈페이지 팩 — 공개 페이지 틀·게시판·메인 배너·팝업·머리글/바닥글 모양 + 운영자 테마 화면.
   색은 기관 주색(--brand)·보조색(--brand2)만 쓴다 → 색만 바꿔도 그 기관 것이 됨. 팩이 켜진 기관에서만 불러옴(_Layout). */
.hp-crumb{ font-size:.85rem; color:var(--nl-muted); margin:.4rem 0 .2rem; }
.hp-crumb a{ color:inherit; text-decoration:none; }
.hp-crumb a:hover{ color:var(--brand); text-decoration:underline; }
.hp-page{ max-width:980px; padding-bottom:3rem; }
.hp-body{ line-height:1.8; color:#2b3242; font-size:1.02rem; }
.hp-body h2{ font-size:1.3rem; margin:1.6rem 0 .6rem; padding-left:.6rem; border-left:4px solid var(--brand); }
.hp-body h3{ font-size:1.1rem; margin:1.2rem 0 .5rem; }
.hp-body img{ max-width:100%; height:auto; border-radius:8px; }
.hp-body table{ width:100%; border-collapse:collapse; margin:1rem 0; }
.hp-body th, .hp-body td{ border:1px solid var(--nl-line); padding:.5rem .7rem; }
.hp-body th{ background:color-mix(in srgb, var(--brand) 7%, #fff); }

/* 인사말 */
.hp-greeting{ display:grid; grid-template-columns:260px 1fr; gap:2rem; align-items:start; }
.hp-greeting.no-img{ grid-template-columns:1fr; }
.hp-greeting-photo{ margin:0; }
.hp-greeting-photo img{ width:100%; border-radius:16px; box-shadow:var(--nl-shadow); }
.hp-sign{ margin-top:1.6rem; text-align:right; font-size:1.05rem; }
.hp-sign span{ color:var(--nl-muted); margin-right:.4rem; }
@media (max-width:760px){ .hp-greeting{ grid-template-columns:1fr; } .hp-greeting-photo{ max-width:260px; } }

/* 연혁 */
.hp-timeline{ list-style:none; margin:1.4rem 0 0; padding:0 0 0 1.2rem; border-left:3px solid color-mix(in srgb, var(--brand) 30%, #fff); }
.hp-timeline li{ position:relative; display:flex; gap:1.2rem; padding:.55rem 0; }
.hp-timeline li::before{ content:""; position:absolute; left:calc(-1.2rem - 9.5px); top:.95rem; width:16px; height:16px; border-radius:50%; background:var(--brand); border:3px solid #fff; box-shadow:0 0 0 2px var(--brand); }
.hp-year{ flex:none; min-width:5.5rem; font-weight:800; color:var(--brand); }
.hp-what{ color:#2b3242; }

/* 조직도·표 */
.hp-org-img{ margin:0 0 1.4rem; text-align:center; }
.hp-org-img img{ max-width:100%; height:auto; }
.hp-table{ background:#fff; border:1px solid var(--nl-line); border-radius:12px; overflow:hidden; }
.hp-table thead th{ background:color-mix(in srgb, var(--brand) 8%, #fff); font-size:.88rem; }
.hp-table tbody th{ white-space:nowrap; color:color-mix(in srgb, var(--brand) 80%, #000); }
.hp-table a{ color:var(--nl-ink); text-decoration:none; font-weight:600; }
.hp-table a:hover{ color:var(--brand); }

/* 오시는 길 */
.hp-dl{ display:grid; grid-template-columns:8rem 1fr; gap:.55rem 1rem; background:#fff; border:1px solid var(--nl-line); border-radius:14px; padding:1.2rem 1.4rem; margin:0 0 1rem; }
.hp-dl dt{ color:var(--nl-muted); font-weight:700; }
.hp-dl dd{ margin:0; }
@media (max-width:560px){ .hp-dl{ grid-template-columns:1fr; } .hp-dl dd{ margin-bottom:.4rem; } }

/* 사업 안내 카드 */
.hp-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1rem; margin-top:1.2rem; }
.hp-card{ background:#fff; border:1px solid var(--nl-line); border-top:4px solid var(--brand2, var(--brand)); border-radius:14px; padding:1.2rem 1.3rem; box-shadow:var(--nl-shadow); display:flex; flex-direction:column; gap:.4rem; }
.hp-card h2{ font-size:1.08rem; margin:0; font-weight:800; }
.hp-card p{ margin:0; color:#3b4254; font-size:.95rem; }
.hp-card a{ margin-top:auto; font-weight:800; color:var(--brand); text-decoration:none; }

/* 갤러리 */
.hp-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; }
.hp-gal-item{ display:flex; flex-direction:column; gap:.3rem; text-decoration:none; color:var(--nl-ink); background:#fff; border:1px solid var(--nl-line); border-radius:14px; overflow:hidden; padding-bottom:.7rem; }
.hp-gal-item img, .hp-gal-noimg{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:color-mix(in srgb, var(--brand) 10%, #fff); }
.hp-gal-t{ font-weight:700; padding:0 .8rem; }
.hp-gal-item small{ color:var(--nl-muted); padding:0 .8rem; }
.hp-gal-item:hover{ border-color:var(--brand); }
.hp-post{ max-width:900px; }
.hp-post-img{ margin:0 0 1rem; }
.hp-post-img img{ max-width:100%; height:auto; border-radius:12px; }
.hp-post-body{ white-space:pre-line; line-height:1.8; }

/* 메인 배너(홈) */
.hp-banner{ position:relative; margin:.3rem 0 1.6rem; border-radius:20px; overflow:hidden; }
.hp-slides{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
.hp-slides::-webkit-scrollbar{ display:none; }
.hp-slide{ flex:0 0 100%; scroll-snap-align:start; min-height:300px; display:flex; align-items:center; color:#fff; text-decoration:none;
  background:radial-gradient(900px 280px at 80% -20%, rgba(255,255,255,.18), transparent 70%), linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 50%, #000)); }
.hp-slide.has-img{ background:linear-gradient(90deg, color-mix(in srgb, var(--brand) 85%, #000) 0%, color-mix(in srgb, var(--brand) 45%, transparent) 60%, transparent 100%), var(--hp-img) center/cover no-repeat; }
.hp-slide-in{ padding:3rem 2.6rem; max-width:720px; }
.hp-slide h2{ color:#fff; font-size:2.1rem; font-weight:900; letter-spacing:-1px; margin:0 0 .6rem; }
.hp-slide p{ color:rgba(255,255,255,.92); font-size:1.08rem; margin:0; }
.hp-slide .hp-go{ display:inline-block; margin-top:1.2rem; background:#fff; color:color-mix(in srgb, var(--brand) 82%, #000); padding:.6rem 1.3rem; border-radius:12px; font-weight:800; }
.hp-slide:hover{ color:#fff; }
.hp-bn-ctl{ position:absolute; right:1rem; bottom:1rem; display:flex; gap:.4rem; align-items:center; }
.hp-bn-ctl button{ border:0; width:2.2rem; height:2.2rem; border-radius:50%; background:rgba(255,255,255,.85); color:#1e2838; font-weight:900; }
.hp-bn-ctl span{ color:#fff; font-weight:700; font-size:.9rem; text-shadow:0 1px 3px rgba(0,0,0,.4); min-width:3rem; text-align:center; }
@media (max-width:640px){ .hp-slide{ min-height:220px; } .hp-slide-in{ padding:2rem 1.3rem; } .hp-slide h2{ font-size:1.5rem; } }
/* 협회·회원형 디자인은 바로가기 타일이 첫 화면 아래에 걸쳐 올라옴 → 배너 아래 여백·단추 위치를 그만큼 올림 */
.hd-assoc .hp-banner .hp-slide-in{ padding-bottom:4.6rem; }
.hd-assoc .hp-banner .hp-bn-ctl{ bottom:3.6rem; }

/* 팝업(홈) */
.hp-pops{ position:fixed; z-index:1080; left:1rem; top:5rem; display:flex; gap:1rem; flex-wrap:wrap; max-width:calc(100vw - 2rem); }
.hp-pop{ width:360px; max-width:100%; background:#fff; border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.28); overflow:hidden; display:flex; flex-direction:column; }
.hp-pop-h{ display:flex; justify-content:space-between; align-items:center; padding:.7rem 1rem; background:var(--brand); color:#fff; font-weight:800; }
.hp-pop-h button{ border:0; background:transparent; color:#fff; font-size:1.3rem; line-height:1; }
.hp-pop-b{ padding:1rem; max-height:60vh; overflow:auto; white-space:pre-line; }
.hp-pop-b img{ width:100%; height:auto; border-radius:8px; margin-bottom:.6rem; }
.hp-pop-f{ display:flex; justify-content:space-between; gap:.5rem; padding:.55rem 1rem; border-top:1px solid var(--nl-line); background:#f7f8fa; font-size:.88rem; }
.hp-pop-f button{ border:0; background:transparent; color:#475069; }
@media (max-width:560px){ .hp-pops{ top:auto; bottom:1rem; } }

/* 머리글 모양 — 가운데 로고 / 색 띠 (기본은 지금 모양 그대로) */
@media (min-width:992px){
  .hp-hd-center header .navbar > .container{ flex-wrap:wrap; justify-content:center; }
  .hp-hd-center header .navbar .navbar-brand{ width:100%; display:flex; justify-content:center; margin:0 0 .3rem; }
  .hp-hd-center header .navbar .nl-brand-logo{ max-height:56px; }
  .hp-hd-center header .navbar .navbar-collapse{ justify-content:center !important; gap:1rem; }
  .hp-hd-center header .navbar .navbar-nav.flex-grow-1{ flex-grow:0 !important; }
}
.hp-hd-solid header .navbar{ background:var(--brand) !important; border-bottom-color:color-mix(in srgb, var(--brand) 70%, #000) !important; }
.hp-hd-solid header .navbar .navbar-brand, .hp-hd-solid header .navbar .nl-brand-name{ color:#fff !important; }
.hp-hd-solid header .navbar > .container > .navbar-collapse > .navbar-nav > .nav-item > .nav-link,
.hp-hd-solid header .navbar > .container > .navbar-collapse > .navbar-nav > .nav-item > .nav-link.text-dark{ color:#fff !important; }
.hp-hd-solid header .navbar .nav-link.active{ background:rgba(255,255,255,.16) !important; color:#fff !important; }
.hp-hd-solid header .navbar .navbar-toggler-icon{ filter:invert(1); }
.hp-hd-solid header .navbar .nl-myroom-btn{ background:#fff; color:var(--brand); border-color:#fff; }

/* 바닥글 모양 — 안내형(진한 바탕 + 주요 메뉴 줄) */
.hp-ft-wide .site-footer{ background:color-mix(in srgb, var(--brand) 38%, #0b1220); color:rgba(255,255,255,.86); }
.hp-ft-wide .site-footer a{ color:#fff; }
/* [2026-10-22 대표 지시] 바닥글 사이트맵(_HpSitemap) — 머리글 메뉴 2단 전체를 열 단위로. 바닥글 모양(기본·안내형) 공통, 색은 바닥글 글자색을 따름 */
.hp-sitemap{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:1.2rem 1.6rem; padding:.6rem 0 1.3rem; margin:0 0 1rem; border-bottom:1px solid rgba(255,255,255,.15); }
.hp-sm-top{ display:block; font-weight:800; font-size:1rem; color:inherit; text-decoration:none; margin-bottom:.55rem; padding-bottom:.45rem; border-bottom:1px solid rgba(255,255,255,.18); }
.hp-sitemap ul{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.hp-sitemap ul a{ color:inherit; opacity:.85; text-decoration:none; font-size:.94rem; }
.hp-sitemap a:hover{ text-decoration:underline; opacity:1; }
@media (max-width:640px){ .hp-sitemap{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
/* [2026-10-22 대표 지시] 기관 홈페이지 앞면 작은 글씨 키움(13px 이하 → 14~15px) — 바닥글 기관 정보·상담 전화 */
.hp-front .site-footer-biz{ font-size:.9rem; line-height:1.7; }
.hp-front .site-footer-legal{ font-size:.95rem; }

/* ── 운영자 테마 화면 ── */
.hp-palettes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.5rem; }
.hp-pal{ display:flex; gap:.5rem; align-items:center; text-align:left; border:1px solid var(--nl-line); background:#fff; border-radius:10px; padding:.45rem .6rem; }
.hp-pal:hover, .hp-pal:focus-visible{ border-color:var(--brand); }
.hp-pal-sw{ display:flex; flex:none; }
.hp-pal-sw i{ width:18px; height:30px; display:block; }
.hp-pal-sw i:first-child{ border-radius:6px 0 0 6px; } .hp-pal-sw i:last-child{ border-radius:0 6px 6px 0; }
.hp-pal-t{ font-size:.85rem; font-weight:700; line-height:1.2; }
.hp-pal-t small{ display:block; font-weight:400; color:var(--nl-muted); font-size:.75rem; }
.hp-logo-out{ display:flex; flex-direction:column; gap:.4rem; align-items:flex-start; }
.hp-logo-sw{ display:flex; gap:.5rem; align-items:center; }
.hp-logo-chip{ width:30px; height:30px; border-radius:8px; border:1px solid var(--nl-line); display:inline-block; }
.hp-choices{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:.5rem; }
.hp-choice{ display:flex; gap:.6rem; align-items:center; border:1px solid var(--nl-line); border-radius:10px; padding:.55rem .7rem; cursor:pointer; background:#fff; }
.hp-choice:has(input:checked){ border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); }
.hp-choice small{ display:block; color:var(--nl-muted); font-size:.78rem; }
.hp-thumb{ flex:none; width:54px; height:38px; border-radius:6px; border:1px solid var(--nl-line); background:#f4f6f9; position:relative; overflow:hidden; }
.hp-thumb i, .hp-thumb b{ position:absolute; display:block; }
.hp-thumb-hd-basic i{ left:5px; top:6px; width:14px; height:6px; background:var(--brand); border-radius:2px; } .hp-thumb-hd-basic b{ right:5px; top:7px; width:22px; height:4px; background:#9aa3b5; }
.hp-thumb-hd-center i{ left:20px; top:4px; width:14px; height:6px; background:var(--brand); border-radius:2px; } .hp-thumb-hd-center b{ left:12px; top:13px; width:30px; height:3px; background:#9aa3b5; }
.hp-thumb-hd-solid i{ left:0; top:0; width:100%; height:14px; background:var(--brand); } .hp-thumb-hd-solid b{ right:5px; top:5px; width:20px; height:3px; background:#fff; }
.hp-thumb-ft-basic i{ left:0; bottom:0; width:100%; height:10px; background:#e3e7ee; } .hp-thumb-ft-basic b{ left:5px; bottom:3px; width:20px; height:3px; background:#9aa3b5; }
.hp-thumb-ft-wide i{ left:0; bottom:0; width:100%; height:16px; background:#1e2838; } .hp-thumb-ft-wide b{ left:5px; bottom:9px; width:36px; height:3px; background:#fff; }

/* ── [2026-10-21 납품 64곳 채굴] 팩 블록: 과정 검색 · 알림 탭 · 상담 전화 · 협력기관 로고 / 머리글 검색 · 바닥글 안내 ── */
.hp-blk-t{ font-size:1.25rem; font-weight:800; margin:0 0 .8rem; }
.hp-search-blk{ background:color-mix(in srgb, var(--brand) 7%, #fff); border:1px solid color-mix(in srgb, var(--brand) 18%, #fff); border-radius:16px; padding:1.4rem 1.5rem; }
.hp-msearch{ display:flex; gap:.5rem; max-width:720px; }
.hp-msearch input{ flex:1; min-width:0; border:1px solid var(--nl-line); border-radius:10px; padding:.7rem .9rem; font-size:1rem; }
.hp-tabs{ background:#fff; border:1px solid var(--nl-line); border-radius:14px; padding:1rem 1.1rem; }
.hp-tab-list{ display:flex; gap:.3rem; border-bottom:2px solid var(--nl-line); margin-bottom:.8rem; flex-wrap:wrap; }
.hp-tab-list button{ border:0; background:transparent; padding:.55rem 1rem; font-weight:800; color:var(--nl-muted); border-bottom:3px solid transparent; margin-bottom:-2px; }
.hp-tab-list button[aria-selected="true"]{ color:var(--brand); border-bottom-color:var(--brand); }
.hp-tabs .hd-list{ border:0; }
.hp-more{ font-weight:700; color:var(--brand); text-decoration:none; font-size:.9rem; }
.hp-contact{ display:grid; grid-template-columns:minmax(200px, 1fr) 2fr auto; gap:1rem 1.6rem; align-items:center; background:linear-gradient(135deg, color-mix(in srgb, var(--brand) 92%, #000), color-mix(in srgb, var(--brand) 60%, #000)); color:#fff; border-radius:16px; padding:1.3rem 1.6rem; }
.hp-contact h2{ color:#fff; font-size:1.2rem; margin:0 0 .2rem; }
.hp-contact-head p{ margin:0; color:rgba(255,255,255,.85); font-size:.95rem; }
.hp-contact-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; }
.hp-contact-list span{ display:block; font-size:.92rem; color:rgba(255,255,255,.8); }
.hp-contact-list a, .hp-contact-list b{ color:#fff; font-size:1.25rem; font-weight:900; text-decoration:none; letter-spacing:-.3px; }
.hp-contact-go{ display:flex; flex-direction:column; gap:.3rem; }
.hp-contact-go a{ color:#fff; font-weight:700; text-decoration:none; white-space:nowrap; }
@media (max-width:760px){ .hp-contact{ grid-template-columns:1fr; } .hp-contact-go{ flex-direction:row; gap:1rem; } }
.hp-roll{ overflow:hidden; background:#fff; border:1px solid var(--nl-line); border-radius:14px; padding:.9rem 0; }
.hp-roll-track{ list-style:none; margin:0; padding:0 1rem; display:flex; gap:2.2rem; align-items:center; width:max-content; animation:hp-roll 40s linear infinite; }
.hp-roll:hover .hp-roll-track, .hp-roll:focus-within .hp-roll-track{ animation-play-state:paused; }
.hp-roll-track li{ flex:none; }
.hp-roll-track img{ height:44px; width:auto; max-width:180px; object-fit:contain; filter:grayscale(.2); }
.hp-roll-track span{ display:inline-block; padding:.5rem 1rem; border:1px solid var(--nl-line); border-radius:999px; font-weight:700; color:#3b4254; }
.hp-roll-track a{ text-decoration:none; }
@keyframes hp-roll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .hp-roll-track{ animation:none; flex-wrap:wrap; width:auto; } }
.hp-hsearch{ display:flex; align-items:center; gap:.25rem; margin:0 .6rem 0 0; }
.hp-hsearch input{ width:9rem; border:1px solid var(--nl-line); border-radius:999px; padding:.3rem .8rem; font-size:.88rem; }
.hp-hsearch button{ border:0; background:var(--brand); color:#fff; border-radius:999px; padding:.3rem .8rem; font-size:.85rem; font-weight:700; white-space:nowrap; flex:none; }
.hp-hd-solid .hp-hsearch input{ border-color:rgba(255,255,255,.6); }
.hp-hd-solid .hp-hsearch button{ background:#fff; color:var(--brand); }
@media (max-width:991.98px){ .hp-hsearch{ margin:.4rem 0; } .hp-hsearch input{ flex:1; width:auto; } }
.hp-ft-extra{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; padding-bottom:.9rem; margin-bottom:.9rem; border-bottom:1px solid rgba(255,255,255,.15); }
.hp-ft-contact{ display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; align-items:baseline; font-size:.95rem; }
.hp-ft-contact a{ color:#fff; font-weight:800; text-decoration:none; }
.hp-ft-hours{ opacity:.8; }
.hp-family{ position:relative; min-width:220px; }
.hp-family summary{ cursor:pointer; list-style:none; border:1px solid rgba(255,255,255,.35); border-radius:8px; padding:.4rem .8rem; font-size:.88rem; }
.hp-family summary::after{ content:" ▾"; }
.hp-family ul{ position:absolute; right:0; bottom:calc(100% + .3rem); z-index:5; list-style:none; margin:0; padding:.4rem 0; background:#fff; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.3); min-width:100%; max-height:260px; overflow:auto; }
.hp-family li a{ display:block; padding:.35rem .9rem; color:#1e2838 !important; text-decoration:none; font-size:.88rem; white-space:nowrap; }
.hp-family li a:hover{ background:#f1f4f9; }
/* [2026-10-21 Claude 다듬기] 기관 메뉴가 많을 때 머리글이 두 줄로 넘어가지 않게 — 넓은 화면에서 메뉴 간격·글자 크기를 단계적으로 줄이고, 항목은 줄바꿈 금지 */
@media (min-width:992px){
  body.hp-front header .navbar-nav.flex-grow-1 > .nav-item > .nav-link{ white-space:nowrap; padding-left:.55rem; padding-right:.55rem; }
}
@media (min-width:992px) and (max-width:1399.98px){
  body.hp-front header .navbar-nav.flex-grow-1 > .nav-item > .nav-link{ padding-left:.4rem; padding-right:.4rem; font-size:.93rem; }
  body.hp-front .hp-hsearch input{ width:7rem; }
}
@media (min-width:992px){
  body.hp-front header .navbar-collapse > .navbar-nav:not(.flex-grow-1){ flex-wrap:nowrap; }
  body.hp-front header .navbar-collapse > .navbar-nav:not(.flex-grow-1) > li{ white-space:nowrap; }
}

/* ── [2026-10-22 대표 지시 "A 시안으로 실제 블록"] 기관 홈페이지 풀 배치 블록(.hb-*) — 공통 기본 모양.
   색·글꼴은 아래 --hp-* 변수만 씀 → 맞춤 테마(예: tools/qa/css/aiv2/A_full.css)가 변수와 장식만 바꿔 같은 블록을 다른 모양으로.
   기본값 = 기관 주색(--brand)·보조색(--brand2). 영문 눈썹(.hb-eyebrow)·금선(.hb-rule)은 기본 숨김 — 테마가 켬. */
.hd{ --hp-primary:var(--brand); --hp-accent:var(--brand2, color-mix(in srgb, var(--brand) 60%, #f59e0b));
  --hp-dark:color-mix(in srgb, var(--hp-primary) 82%, #000); --hp-ink:#1c2333; --hp-muted:#5a6273; --hp-line:var(--nl-line, #e5e7eb);
  --hp-soft:color-mix(in srgb, var(--hp-primary) 5%, #fff); --hp-accent-soft:color-mix(in srgb, var(--hp-accent) 16%, #fff);
  --hp-accent-ink:color-mix(in srgb, var(--hp-accent) 70%, #000); --hp-accent-on-dark:color-mix(in srgb, var(--hp-accent) 55%, #fff);
  --hp-head-font:inherit; --hp-radius:14px; }
.hb{ margin:0 0 2.4rem; }
.hb-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.hb-eyebrow, .hb-rule{ display:none; }
.hb-title{ font-size:1.45rem; font-weight:800; margin:0; color:var(--hp-ink); letter-spacing:-.4px; font-family:var(--hp-head-font); }
.hb-desc{ color:var(--hp-muted); margin:.35rem 0 0; font-size:.95rem; }
.hb-more{ font-weight:700; color:var(--hp-primary); text-decoration:none; white-space:nowrap; font-size:.92rem; }
.hb-more::after{ content:" →"; }
.hb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:46px; padding:0 1.3rem; font-weight:700; border:1px solid transparent; border-radius:10px; text-decoration:none; white-space:nowrap; cursor:pointer; font-size:.95rem; }
.hb-btn.gold{ background:var(--hp-accent); color:#fff; }
.hb-btn.navy{ background:var(--hp-primary); color:#fff; }
.hb-btn.line{ border-color:currentColor; color:inherit; background:transparent; }
.hb-btn.outline{ border-color:var(--hp-primary); color:var(--hp-primary); background:#fff; }
.hb-btn:hover{ filter:brightness(1.08); }
/* 상단 이벤트 띠 */
.hb-eventbar{ position:relative; display:flex; justify-content:center; align-items:center; background:var(--hp-dark); color:#fff; font-size:.9rem; border-radius:12px; padding:.55rem 2.6rem; margin:.3rem 0 .8rem; }
.hb-eventbar[hidden]{ display:none; }
.hb-eb-in{ display:flex; gap:.7rem; align-items:center; color:#fff; text-decoration:none; }
.hb-eb-in:hover{ color:#fff; }
.hb-eb-chip{ background:var(--hp-accent); color:#111; font-weight:800; font-size:.75rem; padding:.1rem .5rem; border-radius:4px; flex:none; }
.hb-eb-go{ color:var(--hp-accent-on-dark); }
.hb-eb-x{ position:absolute; right:.6rem; top:50%; transform:translateY(-50%); background:none; border:0; color:rgba(255,255,255,.6); font-size:1.2rem; line-height:1; }
/* 기관 소개 */
.hb-about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.6rem; align-items:center; }
.hb-about-grid.one{ grid-template-columns:1fr; }
.hb-quote{ font-size:1.35rem; line-height:1.6; font-weight:700; color:var(--hp-primary); margin:1rem 0 0; font-family:var(--hp-head-font); }
.hb-about-body{ color:var(--hp-muted); margin:.9rem 0 0; }
.hb-sign{ display:flex; align-items:center; gap:.8rem; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--hp-line); flex-wrap:wrap; }
.hb-seal{ width:48px; height:48px; border-radius:50%; border:1.5px solid #b8322a; outline:1px solid #b8322a; outline-offset:-5px; color:#b8322a; display:grid; place-items:center; font-size:.55rem; font-weight:800; line-height:1.15; text-align:center; padding:7px; flex:none; word-break:break-all; overflow:hidden; }
.hb-sign-t{ color:var(--hp-muted); font-size:.92rem; }
.hb-sign-t b{ color:var(--hp-ink); margin-left:.4rem; font-size:1.05rem; font-family:var(--hp-head-font); }
.hb-sign .hb-more{ margin-left:auto; }
.hb-about-links{ display:flex; gap:.4rem 1.2rem; flex-wrap:wrap; margin-top:1rem; }
.hb-about-links a{ color:var(--hp-muted); font-size:.9rem; text-decoration:none; }
.hb-about-links a::before{ content:"·"; color:var(--hp-accent-ink); margin-right:.35rem; }
.hb-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hp-line); border:1px solid var(--hp-line); border-radius:var(--hp-radius); overflow:hidden; }
.hb-stat{ background:#fff; padding:1.6rem 1.4rem; min-height:150px; position:relative; overflow:hidden; }
.hb-stat .lb{ color:var(--hp-muted); font-size:.9rem; font-weight:600; }
.hb-stat .num{ font-size:2.3rem; font-weight:800; color:var(--hp-primary); line-height:1.15; margin-top:.6rem; letter-spacing:-1px; font-family:var(--hp-head-font); }
.hb-stat .num small{ font-size:1rem; margin-left:.2rem; color:var(--hp-muted); font-weight:500; }
.hb-stat .sub{ font-size:.8rem; color:var(--hp-muted); margin-top:.3rem; }
/* 과정 카드 */
.hb-chips{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.hb-chips button{ height:36px; padding:0 1rem; border:1px solid var(--hp-line); background:#fff; border-radius:18px; font-size:.88rem; color:var(--hp-muted); }
.hb-chips button.on{ background:var(--hp-primary); border-color:var(--hp-primary); color:#fff; }
.hb-course-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.1rem; }
.hb-course{ background:#fff; border:1px solid var(--hp-line); border-radius:var(--hp-radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.hb-course[hidden]{ display:none; }
.hb-course:hover{ transform:translateY(-3px); box-shadow:0 18px 36px -24px rgba(15,23,42,.45); }
.hb-course-th{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg, var(--hp-primary), color-mix(in srgb, var(--hp-primary) 55%, #000)); }
.hb-th-G{ background:linear-gradient(135deg, color-mix(in srgb, var(--hp-primary) 70%, #fff), var(--hp-primary)); }
.hb-th-H{ background:linear-gradient(135deg, var(--hp-accent), color-mix(in srgb, var(--hp-accent) 60%, #000)); }
.hb-course-th::before{ content:""; position:absolute; right:-30px; top:50%; width:140px; height:140px; transform:translateY(-50%); border-radius:50%; border:1px solid rgba(255,255,255,.28); box-shadow:0 0 0 22px rgba(255,255,255,.06), 0 0 0 44px rgba(255,255,255,.04); }
.hb-course-th img{ position:relative; width:100%; height:100%; object-fit:cover; display:block; }
.hb-th-label{ position:absolute; left:1rem; bottom:.8rem; color:rgba(255,255,255,.85); font-size:.75rem; letter-spacing:.2em; font-weight:600; }
.hb-badge{ position:absolute; top:.7rem; left:.7rem; background:#fff; color:var(--hp-primary); font-size:.72rem; font-weight:800; padding:.15rem .55rem; border-radius:4px; }
.hb-badge.hot{ left:auto; right:.7rem; background:#b8322a; color:#fff; }
.hb-course-bd{ padding:1.1rem 1.1rem 1.2rem; display:flex; flex-direction:column; flex:1; }
.hb-cat{ font-size:.78rem; color:var(--hp-accent-ink); font-weight:600; }
.hb-course h3{ font-size:1.05rem; line-height:1.45; margin:.3rem 0 0; font-weight:800; min-height:3em; font-family:var(--hp-head-font); }
.hb-course h3 a{ color:var(--hp-primary); text-decoration:none; }
.hb-course dl{ display:grid; grid-template-columns:auto 1fr; gap:.25rem .7rem; margin:.8rem 0 0; font-size:.84rem; color:var(--hp-muted); }
.hb-course dt{ color:var(--hp-ink); font-weight:600; }
.hb-course dd{ margin:0; }
.hb-seat{ margin-top:auto; padding-top:.9rem; }
.hb-seat-top{ display:flex; justify-content:space-between; font-size:.8rem; color:var(--hp-muted); gap:.5rem; }
.hb-seat-top b{ color:var(--hp-primary); }
.hb-seat-top b.red{ color:#b8322a; }
.hb-seat-bar{ height:4px; background:var(--hp-line); margin-top:.4rem; overflow:hidden; }
.hb-seat-bar i{ display:block; height:100%; background:var(--hp-accent); }
.hb-seat-bar i.red{ background:#b8322a; }
/* 자격 검정(어두운 띠) */
.hb-dark{ background:var(--hp-dark); color:#fff; border-radius:20px; padding:2.2rem 2rem; }
.hb-dark .hb-title{ color:#fff; }
.hb-dark .hb-desc{ color:rgba(255,255,255,.7); }
.hb-dark .hb-more{ color:#fff; }
.hb-exam-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:1.4rem; position:relative; }
.hb-dday{ border:1px solid rgba(255,255,255,.18); border-radius:var(--hp-radius); padding:1.8rem; background:rgba(255,255,255,.04); }
.hb-dday-top{ display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
.hb-tag{ display:inline-block; font-size:.78rem; color:var(--hp-accent-on-dark); border:1px solid currentColor; padding:.1rem .55rem; }
.hb-dday h3{ font-size:1.4rem; font-weight:800; margin:.6rem 0 0; color:#fff; line-height:1.4; font-family:var(--hp-head-font); }
.hb-dday h3 small{ font-size:.85rem; color:rgba(255,255,255,.7); font-weight:500; white-space:nowrap; }
.hb-dday p{ font-size:.9rem; color:rgba(255,255,255,.65); margin:.3rem 0 0; }
.hb-dcircle{ width:120px; height:120px; border-radius:50%; border:1px solid var(--hp-accent); display:grid; place-items:center; text-align:center; flex:none; position:relative; }
.hb-dcircle::before{ content:""; position:absolute; inset:7px; border-radius:50%; border:1px dashed color-mix(in srgb, var(--hp-accent) 55%, transparent); }
.hb-dcircle small{ display:block; font-size:.72rem; color:rgba(255,255,255,.65); letter-spacing:.1em; }
.hb-dcircle b{ display:block; font-size:2rem; color:var(--hp-accent); line-height:1; font-weight:800; font-family:var(--hp-head-font); }
.hb-timeline{ list-style:none; padding:0; margin:2rem 0 0; display:grid; grid-template-columns:repeat(4, 1fr); position:relative; }
.hb-timeline::before{ content:""; position:absolute; left:8px; right:8px; top:7px; height:1px; background:color-mix(in srgb, var(--hp-accent) 45%, transparent); }
.hb-timeline li{ position:relative; padding:28px 10px 0 0; }
.hb-timeline li::before{ content:""; position:absolute; top:0; left:0; width:15px; height:15px; border-radius:50%; background:var(--hp-dark); border:1px solid var(--hp-accent); }
.hb-timeline li.now::before{ background:var(--hp-accent); box-shadow:0 0 0 5px color-mix(in srgb, var(--hp-accent) 25%, transparent); }
.hb-timeline li.done::before{ background:color-mix(in srgb, var(--hp-accent) 45%, var(--hp-dark)); }
.hb-timeline b{ display:block; font-size:.8rem; color:rgba(255,255,255,.62); font-weight:500; }
.hb-timeline span{ display:block; font-size:1rem; font-weight:700; margin-top:.2rem; font-family:var(--hp-head-font); }
.hb-timeline em{ display:inline-block; font-style:normal; font-size:.72rem; color:#111; background:var(--hp-accent); padding:0 .4rem; margin-top:.3rem; }
.hb-dday-cta{ display:flex; gap:.6rem; margin-top:1.8rem; flex-wrap:wrap; }
.hb-dark .hb-btn.line{ color:#fff; border-color:rgba(255,255,255,.5); }
.hb-verify{ background:#fff; color:var(--hp-ink); border-radius:var(--hp-radius); padding:1.8rem 1.6rem; position:relative; }
.hb-verify h3{ font-size:1.25rem; font-weight:800; color:var(--hp-primary); margin:0; font-family:var(--hp-head-font); }
.hb-verify p{ font-size:.85rem; color:var(--hp-muted); margin:.3rem 0 0; }
.hb-field{ margin-top:.9rem; }
.hb-field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.3rem; }
.hb-field input{ width:100%; height:46px; border:1px solid var(--hp-line); border-radius:8px; padding:0 .8rem; font-size:.95rem; background:#fff; }
.hb-field input:focus{ outline:2px solid color-mix(in srgb, var(--hp-accent) 60%, transparent); border-color:var(--hp-accent); }
.hb-verify .hb-btn{ width:100%; margin-top:1.1rem; }
.hb-items{ display:flex; gap:.35rem; flex-wrap:wrap; margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--hp-line); }
.hb-items span{ font-size:.78rem; color:var(--hp-muted); background:var(--hp-soft); padding:.15rem .55rem; border-radius:4px; }
/* 회원 안내 */
.hb-tiers{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; align-items:stretch; }
.hb-tiers.n1{ grid-template-columns:minmax(0, 420px); }
.hb-tiers.n2{ grid-template-columns:repeat(2, 1fr); }
.hb-tiers.n4{ grid-template-columns:repeat(4, 1fr); }
.hb-tier{ border:1px solid var(--hp-line); background:#fff; border-radius:var(--hp-radius); padding:1.8rem 1.5rem 1.5rem; display:flex; flex-direction:column; position:relative; }
.hb-tier.best{ background:var(--hp-primary); color:#fff; border-color:var(--hp-primary); box-shadow:0 26px 50px -30px rgba(15,23,42,.6); }
.hb-ribbon{ position:absolute; top:-1px; right:1.4rem; background:var(--hp-accent); color:#111; font-size:.75rem; font-weight:800; padding:.45rem .7rem .6rem; clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.hb-tier .tname{ font-size:1.35rem; font-weight:800; color:var(--hp-primary); font-family:var(--hp-head-font); }
.hb-tier .tfor{ font-size:.85rem; color:var(--hp-muted); margin-top:.2rem; }
.hb-tier .price{ margin:1.1rem 0 1rem; padding-bottom:1rem; border-bottom:1px solid var(--hp-line); min-height:3.6rem; font-family:var(--hp-head-font); }
.hb-tier .price b{ font-size:1.9rem; font-weight:800; color:var(--hp-primary); }
.hb-tier .price b.txt{ font-size:1.3rem; }
.hb-tier .price small{ margin-left:.35rem; font-size:.85rem; color:var(--hp-muted); font-family:var(--nl-font, inherit); }
.hb-tier ul{ list-style:none; padding:0; margin:0 0 1.4rem; }
.hb-tier li{ display:flex; justify-content:space-between; gap:.6rem; font-size:.88rem; padding:.5rem 0; border-bottom:1px dashed var(--hp-line); }
.hb-tier li span{ color:var(--hp-muted); }
.hb-tier li b{ font-weight:600; text-align:right; color:var(--hp-accent-ink); }
.hb-tier .hb-btn{ margin-top:auto; width:100%; }
.hb-tier.best .tname{ color:#fff; }
.hb-tier.best .tfor, .hb-tier.best .price small, .hb-tier.best li span{ color:rgba(255,255,255,.72); }
.hb-tier.best .price, .hb-tier.best li{ border-color:rgba(255,255,255,.18); }
.hb-tier.best .price b, .hb-tier.best li b{ color:var(--hp-accent-on-dark); }
.hb-join-note{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.6rem; padding:1.1rem 1.4rem; background:var(--hp-soft); border-left:3px solid var(--hp-accent); flex-wrap:wrap; }
.hb-join-note p{ margin:0; font-size:.9rem; color:var(--hp-muted); }
.hb-join-note b{ color:var(--hp-ink); }
.hb-join-steps{ display:flex; gap:.5rem; align-items:center; font-size:.85rem; font-weight:600; color:var(--hp-primary); flex-wrap:wrap; }
.hb-join-steps i{ font-style:normal; color:var(--hp-accent-ink); }
/* 교육지원센터 + 나의 강의실 */
.hb-sup-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:1.4rem; align-items:stretch; }
.hb-board{ background:#fff; border:1px solid var(--hp-line); border-radius:var(--hp-radius); padding:1.4rem 1.5rem; }
.hb-board-top{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--hp-ink); gap:.5rem; }
.hb-tabs{ display:flex; flex-wrap:wrap; }
.hb-tabs button{ background:none; border:0; padding:.7rem 1rem .8rem; font-size:1rem; font-weight:600; color:var(--hp-muted); position:relative; font-family:var(--hp-head-font); }
.hb-tabs button[aria-selected="true"]{ color:var(--hp-ink); font-weight:800; }
.hb-tabs button[aria-selected="true"]::after{ content:""; position:absolute; left:.7rem; right:.7rem; bottom:-1px; height:3px; background:var(--hp-accent); }
.hb-plus{ width:32px; height:32px; border:1px solid var(--hp-line); border-radius:50%; display:grid; place-items:center; color:var(--hp-ink); text-decoration:none; flex:none; }
.hb-posts{ list-style:none; margin:0; padding:0; }
.hb-posts li a{ display:grid; grid-template-columns:62px 1fr auto; gap:.9rem; align-items:center; padding:.85rem .2rem; border-bottom:1px solid var(--hp-line); color:var(--hp-ink); text-decoration:none; font-size:.95rem; }
.hb-posts li a:hover .t{ color:var(--hp-accent-ink); }
.hb-posts .k{ font-size:.72rem; text-align:center; padding:.1rem 0; border:1px solid var(--hp-line); color:var(--hp-muted); white-space:nowrap; }
.hb-posts .k.n{ border-color:var(--hp-primary); color:var(--hp-primary); font-weight:800; }
.hb-posts .t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.hb-posts .new{ display:inline-block; font-size:.6rem; color:#fff; background:#b8322a; border-radius:50%; width:16px; height:16px; line-height:16px; text-align:center; vertical-align:2px; font-weight:800; }
.hb-posts .d{ font-size:.8rem; color:#8a909c; }
.hb-panel-more{ text-align:right; margin-top:.6rem; }
.hb-panel-more a{ font-size:.85rem; font-weight:700; color:var(--hp-primary); text-decoration:none; }
.hb-empty{ color:var(--hp-muted); padding:1.2rem .2rem; margin:0; }
.hb-help-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.6rem; margin-top:1.1rem; }
.hb-help-row a{ display:flex; align-items:center; gap:.6rem; padding:.8rem; background:var(--hp-soft); border-radius:10px; font-size:.88rem; font-weight:700; color:var(--hp-ink); text-decoration:none; }
.hb-help-row i{ width:32px; height:32px; border-radius:50%; border:1px solid var(--hp-accent); display:grid; place-items:center; font-style:normal; flex:none; }
.hb-help-row small{ display:block; font-size:.75rem; color:var(--hp-muted); font-weight:400; }
.hb-myroom{ background:var(--hp-primary); color:#fff; border-radius:var(--hp-radius); padding:1.6rem 1.5rem; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.hb-myroom.solo{ margin:0 0 2.4rem; }
.hb-myroom::before{ content:""; position:absolute; left:-90px; bottom:-110px; width:280px; height:280px; border:1px solid rgba(255,255,255,.15); border-radius:50%; pointer-events:none; }
.hb-myroom h3{ font-size:1.35rem; font-weight:800; margin:0; color:#fff; position:relative; font-family:var(--hp-head-font); }
.hb-myroom > p{ font-size:.88rem; color:rgba(255,255,255,.72); margin:.3rem 0 0; position:relative; }
.hb-preview{ position:relative; margin-top:1.1rem; background:#fff; color:var(--hp-ink); padding:1rem; border-radius:10px; display:grid; grid-template-columns:92px 1fr; gap:1rem; align-items:center; }
.hb-ring{ width:92px; height:92px; border-radius:50%; background:conic-gradient(var(--hp-accent) 0 var(--p, 0%), var(--hp-accent-soft) var(--p, 0%) 100%); display:grid; place-items:center; }
.hb-ring > div{ width:72px; height:72px; border-radius:50%; background:#fff; display:grid; place-items:center; text-align:center; line-height:1.1; }
.hb-ring b{ font-size:1.25rem; color:var(--hp-primary); font-family:var(--hp-head-font); }
.hb-ring small{ display:block; font-size:.65rem; color:var(--hp-muted); }
.hb-preview .pv-t{ font-size:.75rem; color:var(--hp-accent-ink); font-weight:700; }
.hb-preview .pv-h{ font-size:.95rem; font-weight:800; color:var(--hp-primary); line-height:1.4; margin-top:.1rem; font-family:var(--hp-head-font); }
.hb-preview .pv-bar{ height:4px; background:var(--hp-line); margin-top:.5rem; }
.hb-preview .pv-bar i{ display:block; height:100%; background:var(--hp-primary); }
.hb-preview .pv-s{ font-size:.75rem; color:var(--hp-muted); margin-top:.3rem; }
.hb-preview .pv-stats{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--hp-line); padding-top:.8rem; text-align:center; }
.hb-preview .pv-stats div{ border-right:1px solid var(--hp-line); }
.hb-preview .pv-stats div:last-child{ border:0; }
.hb-preview .pv-stats b{ display:block; font-size:1.15rem; color:var(--hp-primary); font-family:var(--hp-head-font); }
.hb-preview .pv-stats small{ font-size:.75rem; color:var(--hp-muted); }
.hb-lock{ position:absolute; inset:0; background:rgba(255,255,255,.55); backdrop-filter:blur(2.5px); -webkit-backdrop-filter:blur(2.5px); display:grid; place-items:center; border-radius:10px; }
.hb-lock span{ background:var(--hp-primary); color:#fff; font-size:.8rem; padding:.45rem .9rem; border-radius:18px; box-shadow:0 10px 24px -10px rgba(0,0,0,.5); }
.hb-my-btns{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:1.1rem; position:relative; }
.hb-myroom .hb-btn.line{ color:#fff; border-color:rgba(255,255,255,.55); }
.hb-find{ font-size:.8rem; color:rgba(255,255,255,.62); margin:.8rem 0 0; text-align:center; position:relative; }
.hb-find a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
/* 소식·이벤트 */
.hb-events{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; }
.hb-ev{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--hp-line); border-radius:var(--hp-radius); overflow:hidden; color:var(--hp-ink); text-decoration:none; transition:box-shadow .2s; }
.hb-ev:hover{ box-shadow:0 18px 36px -24px rgba(15,23,42,.45); color:var(--hp-ink); }
.hb-ev .th{ aspect-ratio:2/1; position:relative; overflow:hidden; display:grid; place-items:center; background:var(--hp-primary); }
.hb-ev .th.hb-ev-1{ background:linear-gradient(180deg, color-mix(in srgb, var(--hp-primary) 78%, #fff), var(--hp-dark)); }
.hb-ev .th.hb-ev-2{ background:var(--hp-accent-soft); }
.hb-ev .th img{ width:100%; height:100%; object-fit:cover; }
.hb-ev-date{ width:108px; height:108px; border-radius:50%; border:1px solid var(--hp-accent); display:grid; place-content:center; text-align:center; color:#fff; box-shadow:0 0 0 12px color-mix(in srgb, var(--hp-accent) 14%, transparent); }
.hb-ev-date b{ font-size:1.6rem; line-height:1; font-family:var(--hp-head-font); }
.hb-ev-date small{ font-size:.72rem; letter-spacing:.15em; opacity:.8; margin-top:.25rem; }
.hb-ev .th.hb-ev-2 .hb-ev-date{ color:var(--hp-primary); background:#fff; }
.hb-ev .st{ position:absolute; left:1rem; top:1rem; font-size:.72rem; font-weight:800; padding:.15rem .55rem; background:var(--hp-accent); color:#111; }
.hb-ev .bd{ padding:1.2rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.hb-ev .k{ font-size:.78rem; color:var(--hp-accent-ink); font-weight:600; }
.hb-ev .h{ font-size:1.1rem; font-weight:800; color:var(--hp-primary); margin-top:.3rem; line-height:1.45; font-family:var(--hp-head-font); }
.hb-ev .p{ font-size:.88rem; color:var(--hp-muted); margin:.4rem 0 .8rem; }
.hb-ev .when{ display:flex; align-items:center; gap:.4rem; margin-top:auto; padding-top:.8rem; border-top:1px solid var(--hp-line); font-size:.8rem; }
/* 포토 갤러리 */
.hb-gal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; gap:1rem; }
.hb-gal-head h2{ font-size:1.25rem; font-weight:800; margin:0; color:var(--hp-ink); font-family:var(--hp-head-font); }
.hb-gal-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; }
.hb-photo{ position:relative; display:block; overflow:hidden; border-radius:10px; aspect-ratio:3/2; background:var(--hp-soft); }
.hb-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; display:block; }
.hb-photo:hover img{ transform:scale(1.04); }
.hb-photo .cap{ position:absolute; left:0; right:0; bottom:0; padding:2rem .9rem .8rem; background:linear-gradient(transparent, rgba(11,19,36,.85)); color:#fff; font-size:.88rem; font-weight:600; }
.hb-photo .cap small{ display:block; font-size:.72rem; opacity:.85; font-weight:400; }
.hb-hint{ border:1px dashed var(--hp-line); border-radius:10px; padding:.8rem 1rem; color:var(--hp-muted); font-size:.9rem; background:#fff; }
@media (max-width:1100px){ .hb-course-grid, .hb-tiers.n4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:960px){
  .hb-about-grid, .hb-exam-grid, .hb-sup-grid{ grid-template-columns:1fr; }
  .hb-tiers, .hb-tiers.n2, .hb-tiers.n4{ grid-template-columns:1fr; }
  .hb-tier.best{ order:-1; }
  .hb-events{ grid-template-columns:1fr 1fr; }
  .hb-gal-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .hb-title{ font-size:1.3rem; }
  .hb-head{ flex-direction:column; align-items:flex-start; }
  .hb-eventbar{ justify-content:flex-start; font-size:.82rem; padding-left:1rem; }
  .hb-quote{ font-size:1.15rem; }
  .hb-stat{ padding:1.1rem 1rem; min-height:120px; }
  .hb-stat .num{ font-size:1.7rem; }
  .hb-chips{ flex-wrap:nowrap; overflow-x:auto; }
  .hb-chips button{ flex:none; }
  .hb-course-grid{ grid-template-columns:1fr; gap:.8rem; }
  .hb-course{ display:grid; grid-template-columns:110px 1fr; }
  .hb-course-th{ aspect-ratio:auto; height:100%; min-height:140px; }
  .hb-th-label{ display:none; }
  .hb-badge{ top:.4rem; left:.4rem; font-size:.66rem; }
  .hb-badge.hot{ top:auto; bottom:.4rem; left:.4rem; right:auto; }
  .hb-course-bd{ padding:.8rem .9rem; }
  .hb-course h3{ min-height:0; font-size:.98rem; }
  .hb-dark{ padding:1.6rem 1rem; }
  .hb-dday{ padding:1.3rem 1rem; }
  .hb-dday-top{ flex-direction:column-reverse; }
  .hb-dcircle{ width:96px; height:96px; }
  .hb-dcircle b{ font-size:1.6rem; }
  .hb-timeline{ grid-template-columns:1fr; }
  .hb-timeline::before{ left:7px; right:auto; top:8px; bottom:8px; width:1px; height:auto; }
  .hb-timeline li{ padding:0 0 1rem 2rem; display:flex; gap:.7rem; align-items:baseline; flex-wrap:wrap; }
  .hb-timeline b{ min-width:72px; }
  .hb-timeline span, .hb-timeline em{ margin:0; }
  .hb-dday-cta .hb-btn{ flex:1; }
  .hb-verify{ padding:1.4rem 1rem; }
  .hb-join-note{ flex-direction:column; align-items:flex-start; }
  .hb-board{ padding:1rem .9rem; }
  .hb-tabs button{ padding:.6rem .6rem .7rem; font-size:.92rem; }
  .hb-posts li a{ grid-template-columns:52px 1fr; }
  .hb-posts .d{ display:none; }
  .hb-help-row{ grid-template-columns:1fr; }
  .hb-preview{ grid-template-columns:80px 1fr; }
  .hb-ring{ width:80px; height:80px; }
  .hb-ring > div{ width:64px; height:64px; }
  .hb-events{ grid-template-columns:1fr; }
  .hb-gal-grid{ gap:.5rem; }
}
/* ── [2026-10-22 대표 지시] 홈페이지 팩 방문자 화면 공통 ──
   ⑤ 머리글 한 줄: 넓은 화면에서 머리글 폭을 화면 가장자리 쪽으로 넓히고(로고는 더 왼쪽·검색·로그인은 더 오른쪽) 대메뉴 전체를 한 줄로.
      1600 미만에서는 메뉴 간격·글자를 줄이고 검색칸은 접어 둠(검색 단추를 누르거나 칸에 초점이 가면 펼침). 992 미만은 기존 메뉴 단추 그대로.
   ⑥ 글씨 한 단계 크게: 기본 16 → 17px(rem 기준이라 카드·목록·바닥글·안내 글씨가 비율대로 함께 커짐, px로 정한 큰 제목은 그대로). */
:root:has(body.hp-front){ font-size:17px; }
@media (min-width:992px){
  body.hp-front header .navbar > .container{ max-width:min(1480px, 100%); padding-left:clamp(16px, 2vw, 32px); padding-right:clamp(16px, 2vw, 32px); }
  body.hp-front header .navbar-brand{ margin-right:1.2rem; }
  body.hp-front header .navbar-nav.flex-grow-1{ flex-wrap:nowrap; }
  body.hp-front header .navbar-nav.flex-grow-1 > .nav-item > .dropdown-toggle::after{ margin-left:.22em; border-top-width:.28em; border-right-width:.24em; border-left-width:.24em; }
}
@media (min-width:992px) and (max-width:1599.98px){
  body.hp-front header .navbar-nav.flex-grow-1 > .nav-item > .nav-link{ padding-left:.42rem; padding-right:.42rem; font-size:15px; }
  body.hp-front .hp-hsearch input{ width:0; padding-left:0; padding-right:0; border-color:transparent; transition:width .2s; }
  body.hp-front .hp-hsearch:focus-within input{ width:8rem; padding:.3rem .8rem; border-color:var(--nl-line); }
}
/* [2차 #76-② 2026-10-29] 따라다니는 퀵메뉴(오른쪽) — 넓은 화면에서만, 휴대폰은 숨김(본문 가림 방지) */
.hp-quick { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 1030; display: flex; flex-direction: column;
  width: 92px; background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.10); overflow: hidden; }
.hp-quick-h { display: block; padding: 8px 0; text-align: center; font-size: .72rem; letter-spacing: .08em; color: #fff; background: var(--brand, #343484); }
.hp-quick a { display: block; padding: 9px 6px; text-align: center; font-size: .8rem; line-height: 1.25; color: inherit; text-decoration: none; border-top: 1px solid rgba(0,0,0,.06); word-break: keep-all; }
.hp-quick a:hover, .hp-quick a:focus-visible { background: rgba(0,0,0,.04); }
.hp-quick a.hp-quick-top { font-size: .74rem; color: #666; }
@media (max-width: 991.98px) { .hp-quick { display: none; } }
@media print { .hp-quick { display: none; } }

/* [2차 #76-④ 2026-10-29] 수강 후기 캐러셀 — 가로로 밀어 넘김(스크롤 스냅, 자바스크립트 없음) */
.hp-rv-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.hp-rv-card { flex: 0 0 280px; scroll-snap-align: start; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 14px 16px; }
.hp-rv-body { margin: 6px 0 8px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
/* [대표 지적 11-04] 조직도 = 박스 그림(위 조직 → 아래 조직을 선으로 이음 · 감사처럼 옆 조직은 세로줄 옆) · 넓으면 가로 스크롤 */
.hp-orgchart{ --org-line:color-mix(in srgb, var(--brand) 45%, #fff); overflow-x:auto; margin:1.4rem 0 .5rem; padding-bottom:.5rem; }
.hp-orgchart ul{ display:flex; justify-content:center; position:relative; margin:0; padding:22px 0 0; list-style:none; }
.hp-orgchart > ul{ padding-top:0; min-width:max-content; margin:0 auto; }
.hp-orgchart ul ul::before{ content:""; position:absolute; top:0; left:50%; height:22px; border-left:2px solid var(--org-line); }
.hp-orgchart li{ position:relative; display:flex; flex-direction:column; align-items:center; padding:22px .45rem 0; text-align:center; }
.hp-orgchart li::before, .hp-orgchart li::after{ content:""; position:absolute; top:0; right:50%; width:50%; height:22px; border-top:2px solid var(--org-line); }
.hp-orgchart li::after{ right:auto; left:50%; border-left:2px solid var(--org-line); }
.hp-orgchart li:first-child::before, .hp-orgchart li:last-child::after{ border:0 none; }
.hp-orgchart li:last-child::before{ border-right:2px solid var(--org-line); border-radius:0 6px 0 0; }
.hp-orgchart li:first-child::after{ border-radius:6px 0 0 0; }
.hp-orgchart li:only-child::before{ display:none; }
.hp-orgchart li:only-child::after{ border:0 none; border-left:2px solid var(--org-line); border-radius:0; width:0; }   /* 아래 조직이 하나 = 곧은 세로줄 */
.hp-orgchart > ul > li{ padding-top:0; }
.hp-orgchart > ul > li::before, .hp-orgchart > ul > li::after{ display:none; }
.hp-org-side{ display:grid; grid-template-columns:1fr 2px 1fr; align-items:center; min-width:30rem; }
.hp-org-side .hp-org-vline{ align-self:stretch; background:var(--org-line); min-height:2.6rem; }
.hp-org-side-r{ display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; padding:.7rem 0 .7rem 1.6rem; position:relative; }
.hp-org-side-r::before{ content:""; position:absolute; left:0; top:50%; width:1.6rem; border-top:2px dashed var(--org-line); }
.hp-org-box{ display:inline-flex; flex-direction:column; gap:.15rem; min-width:7.5rem; max-width:13rem; padding:.6rem .85rem; background:#fff; border:2px solid var(--brand); border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.hp-org-box b{ font-size:1rem; color:var(--brand); }
.hp-org-box span{ font-size:.8rem; line-height:1.35; color:#555; }
.hp-org-box-side{ border-style:dashed; }
.hp-orgchart > ul > li > .hp-org-box{ background:var(--brand); }
.hp-orgchart > ul > li > .hp-org-box b, .hp-orgchart > ul > li > .hp-org-box span{ color:#fff; }