/* [대표 결정 2026-10-17 · 디자인 변경 룰] 사용자 메인(바깥 화면) 디자인 4종 — Views/Home/Index.cshtml 전용.
   색은 기관 대표색(--brand)·보조색(--brand2, 없으면 대표색 기반)만 쓴다 → 로고·색만 바꿔도 4종 모두 그 기관 것이 됨.
   hd-assoc 협회·회원형 / hd-mall 교육몰형 / hd-public 공공·기관형 / hd-hrd 사내교육형 */
.hd{ --hd-acc:var(--brand2, color-mix(in srgb, var(--brand) 70%, #f59e0b)); padding-bottom:4.5rem; }
.hd .hd-sec{ margin:0 0 2rem; }

/* ---- 첫 화면(hero) 공통 ---- */
.hd-hero{ position:relative; overflow:hidden; border-radius:20px; margin:.3rem 0 1.6rem; color:#fff;
  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)); }
.hd-hero.has-img{ background:linear-gradient(90deg, color-mix(in srgb, var(--brand) 88%, #000) 0%, color-mix(in srgb, var(--brand) 55%, transparent) 60%, transparent 100%), var(--hd-img) center/cover no-repeat; }
.hd-hero-in{ position:relative; padding:3rem 2.4rem; max-width:680px; }
.hd-eyebrow{ display:inline-block; font-size:.8rem; font-weight:800; letter-spacing:.3px; padding:.2rem .7rem; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); margin-bottom:.8rem; }
.hd-hero .hh-title{ color:#fff; font-size:2.2rem; font-weight:900; letter-spacing:-1px; line-height:1.25; margin:0 0 .7rem; }
.hd-hero p{ color:rgba(255,255,255,.92); font-size:1.05rem; margin:0 0 1.4rem; }
.hd-hero .btns{ display:flex; gap:.6rem; flex-wrap:wrap; }
.hd-hero .cta-w{ background:#fff; color:color-mix(in srgb, var(--brand) 82%, #000); padding:.75rem 1.5rem; border-radius:12px; font-weight:800; text-decoration:none; box-shadow:0 10px 24px rgba(0,0,0,.18); }
.hd-hero .cta-o{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.45); padding:.75rem 1.5rem; border-radius:12px; font-weight:800; text-decoration:none; }
@media (max-width:640px){ .hd-hero-in{ padding:2rem 1.3rem; } .hd-hero .hh-title{ font-size:1.6rem; } }

/* ---- 바로가기 공통 ---- */
.hd-quick{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:.8rem; margin:0 0 2rem; }
.hd-q{ display:flex; align-items:center; gap:.6rem; background:#fff; border:1px solid var(--nl-line); border-radius:14px; padding:1rem 1.1rem; text-decoration:none; color:var(--nl-ink); box-shadow:var(--nl-shadow); transition:border-color .15s, transform .15s; }
.hd-q:hover{ border-color:var(--brand); transform:translateY(-2px); color:var(--nl-ink); }
.hd-q .ic{ font-size:1.4rem; width:2.4rem; height:2.4rem; display:grid; place-items:center; border-radius:10px; background:color-mix(in srgb, var(--hd-acc) 16%, #fff); flex:none; }
.hd-q b{ font-size:.98rem; font-weight:800; letter-spacing:-.2px; }

/* ---- 목록·표·자유 안내 공통 ---- */
.hd-list{ list-style:none; margin:0; padding:0; background:#fff; border:1px solid var(--nl-line); border-radius:14px; overflow:hidden; }
.hd-list li{ display:flex; justify-content:space-between; gap:1rem; padding:.8rem 1.1rem; border-top:1px solid var(--nl-line); }
.hd-list li:first-child{ border-top:0; }
.hd-list a{ color:var(--nl-ink); text-decoration:none; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hd-list a:hover{ color:var(--brand); }
.hd-list span{ color:var(--nl-muted); font-size:.85rem; flex:none; }
.hd-table{ background:#fff; border:1px solid var(--nl-line); border-radius:14px; overflow:hidden; }
.hd-table thead th{ background:color-mix(in srgb, var(--brand) 8%, #fff); font-size:.85rem; }
.hd-table a{ color:var(--nl-ink); font-weight:600; text-decoration:none; }
.hd-table a:hover{ color:var(--brand); }
.hd-custom{ background:#fff; border:1px solid var(--nl-line); border-left:5px solid var(--hd-acc); border-radius:14px; padding:1.3rem 1.4rem; }
.hd-custom h2{ font-size:1.25rem; margin:0 0 .4rem; }
.hd-custom p{ color:#3b4254; margin:0 0 .8rem; white-space:pre-line; }

/* ---- 교육몰형 카드·검색 ---- */
.hd-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
@media (max-width:900px){ .hd-cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .hd-cards{ grid-template-columns:1fr; } }
.hd-card{ display:flex; flex-direction:column; gap:.35rem; background:#fff; border:1px solid var(--nl-line); border-top:4px solid var(--brand); border-radius:14px; padding:1.1rem 1.2rem; text-decoration:none; color:var(--nl-ink); box-shadow:var(--nl-shadow); min-height:150px; }
.hd-card:hover{ border-color:var(--brand); color:var(--nl-ink); }
.hd-card-top{ display:flex; gap:.4rem; align-items:center; }
.hd-card b{ font-size:1.05rem; font-weight:800; letter-spacing:-.3px; line-height:1.4; }
.hd-card small{ color:var(--nl-muted); }
.hd-card .cr-tag{ font-size:.7rem; font-weight:700; padding:.12em .55em; border-radius:6px; background:color-mix(in srgb, var(--brand) 10%, #fff); color:color-mix(in srgb, var(--brand) 80%, #000); }
.hd-card .cr-status{ font-size:.72rem; font-weight:800; padding:.12em .6em; border-radius:999px; }
.hd-card .cr-status.open{ background:#e9f8ef; color:#15803d; }
.hd-card .cr-status.closed{ background:#fdecea; color:#b42318; }
.hd-card-go{ margin-top:auto; font-weight:800; color:var(--brand); font-size:.9rem; }
.hd-search{ display:flex; gap:.5rem; max-width:560px; margin:0 auto; background:#fff; border-radius:14px; padding:.4rem; box-shadow:0 12px 28px rgba(0,0,0,.2); }
.hd-search input{ flex:1; min-width:0; border:0; outline:0; padding:.7rem .9rem; font-size:1rem; border-radius:10px; color:var(--nl-ink); }
.hd-search:focus-within{ outline:2px solid var(--brand,#0d6efd); outline-offset:2px; }
.hd-search button{ border:0; background:var(--brand); color:#fff; font-weight:800; padding:.7rem 1.3rem; border-radius:10px; }

/* ========== 1. 협회·회원형 — 왼쪽 정렬 첫 화면 + 바로가기 타일이 첫 화면에 걸쳐 올라옴 ========== */
.hd-assoc .hd-hero{ margin-bottom:0; border-radius:20px 20px 0 0; }
.hd-assoc .hd-hero-in{ padding-bottom:4.2rem; }
.hd-assoc .hd-quick{ position:relative; margin:-2.6rem 1.2rem 2rem; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); }
/* [HOME-PACK 2026-10-21] 바로가기가 첫 화면 바로 아래가 아닐 때(블록 순서를 바꾼 경우)는 겹치지 않게 */
.hd-assoc .hd-sec + .hd-quick{ margin-top:0; }
.hd-assoc .hd-q{ flex-direction:column; text-align:center; padding:1.1rem .8rem; }
.hd-assoc .hd-q .ic{ background:color-mix(in srgb, var(--brand) 12%, #fff); }
.hd-assoc .hd-quick:first-child{ margin-top:0; }   /* 첫 화면 블록을 뺐을 때 */

/* ========== 2. 교육몰형 — 가운데 정렬 + 검색창, 과정 카드 그리드 ========== */
.hd-mall .hd-hero{ text-align:center; }
.hd-mall .hd-hero-in{ margin:0 auto; padding:3.4rem 1.6rem; max-width:760px; }
.hd-mall .hd-hero.has-img{ background:linear-gradient(0deg, color-mix(in srgb, var(--brand) 78%, transparent), color-mix(in srgb, var(--brand) 78%, transparent)), var(--hd-img) center/cover no-repeat; }
.hd-mall .hd-q{ border-radius:999px; padding:.7rem 1rem; justify-content:center; box-shadow:none; }
.hd-mall .hd-q .ic{ width:auto; height:auto; background:none; font-size:1.1rem; }

/* ========== 3. 공공·기관형 — 밝은 첫 화면·정돈된 목록, 공지와 일정 나란히 ========== */
.hd-public .hd-hero{ background:#fff; color:var(--nl-ink); border:1px solid var(--nl-line); border-top:6px solid var(--brand); border-radius:14px; box-shadow:var(--nl-shadow); }
.hd-public .hd-hero.has-img{ background:linear-gradient(90deg, #fff 0%, #fff 48%, rgba(255,255,255,.2) 75%, transparent 100%), var(--hd-img) right center/cover no-repeat; }
.hd-public .hd-eyebrow{ background:color-mix(in srgb, var(--brand) 10%, #fff); border-color:color-mix(in srgb, var(--brand) 30%, #fff); color:var(--brand); }
.hd-public .hd-hero .hh-title{ color:var(--nl-ink); font-size:1.9rem; }
.hd-public .hd-hero p{ color:#3b4254; }
.hd-public .hd-hero .cta-w{ background:var(--brand); color:#fff; box-shadow:none; }
.hd-public .hd-hero .cta-o{ background:#fff; color:var(--brand); border-color:var(--brand); }
.hd-public .hd-q{ box-shadow:none; border-radius:10px; }
.hd-public .home-sec-head h2{ font-size:1.2rem; padding-left:.6rem; border-left:4px solid var(--brand); }
@media (min-width:992px){
  .hd-public{ display:grid; grid-template-columns:1fr 1fr; column-gap:1.4rem; align-items:start; }
  .hd-public > .hd-hero, .hd-public > .hd-quick, .hd-public > .hd-courses, .hd-public > .hd-custom{ grid-column:1 / -1; }
  /* [HOME-PACK 2026-10-22 결함 수정] 메인 배너·협력기관 띠도 전체 폭(배너가 왼쪽 칸만 차지하고 오른쪽이 비던 문제).
     배너 바로 뒤가 '과정 검색'(검색 중심형)일 때만 둘이 나란히 */
  .hd-public > .hp-banner, .hd-public > .hp-partners{ grid-column:1 / -1; }
  .hd-public > .hp-banner:has(+ .hp-search-blk){ grid-column:auto; }
  /* 옆 칸 짝이 없는 반쪽 블록(앞·뒤가 전체 폭 블록이거나 처음·끝)은 전체 폭 — 오른쪽 빈칸 방지 */
  .hd-public > :is(.hd-notice, .hd-schedule, .hp-search-blk, .hp-tabs, .hp-contact):is(:first-child, :is(.hd-hero, .hd-quick, .hd-courses, .hd-custom, .hp-partners, .hp-banner:not(:has(+ .hp-search-blk))) + *):is(:last-child, :has(+ :is(.hd-hero, .hd-quick, .hd-courses, .hd-custom, .hp-partners))){ grid-column:1 / -1; }
}

/* ========== 4. 사내교육형 — 작은 첫 화면, 큰 '내 필수교육' 버튼, 여백 많은 미니멀 ========== */
.hd-hrd .hd-hero{ background:linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, #fff), #fff 70%); color:var(--nl-ink); border:1px solid var(--nl-line); }
.hd-hrd .hd-hero.has-img{ background:linear-gradient(90deg, #fff 0%, #fff 50%, rgba(255,255,255,.1) 80%), var(--hd-img) right center/cover no-repeat; }
.hd-hrd .hd-hero-in{ padding:2.2rem 2rem; }
.hd-hrd .hd-eyebrow{ background:#fff; border-color:var(--nl-line); color:var(--nl-muted); }
.hd-hrd .hd-hero .hh-title{ color:var(--nl-ink); font-size:1.75rem; }
.hd-hrd .hd-hero p{ color:var(--nl-muted); }
.hd-hrd .hd-hero .cta-w{ background:var(--brand); color:#fff; font-size:1.05rem; padding:.9rem 1.8rem; }
.hd-hrd .hd-quick{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
.hd-hrd .hd-q{ box-shadow:none; background:#fafbfc; }

/* ---- 디자인 바(운영자·기관 관리자 전용) ---- */
.hd-bar{ position:fixed; left:50%; bottom:12px; transform:translateX(-50%); z-index:1040; display:flex; align-items:center; gap:.3rem; flex-wrap:nowrap; overflow-x:auto; white-space:nowrap;
  background:#111827; color:#fff; padding:.4rem .5rem; border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.35); font-size:.8rem; max-width:calc(100vw - 24px); }
.hd-bar-t{ font-weight:800; margin-right:.2rem; }
.hd-bar-b{ color:#e5e7eb; text-decoration:none; padding:.28rem .55rem; border-radius:9px; border:1px solid #374151; white-space:nowrap; }
.hd-bar-b:hover{ color:#fff; border-color:#9ca3af; }
.hd-bar-b.on{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:800; }
.hd-bar-save{ border:0; background:#16a34a; color:#fff; font-weight:800; padding:.3rem .65rem; border-radius:9px; white-space:nowrap; }
.hd-bar-pv{ font-size:.72rem; font-weight:800; color:#fde68a; }
.hd-bar-more{ color:#93c5fd; text-decoration:none; margin-left:.2rem; white-space:nowrap; }
@media print{ .hd-bar{ display:none; } }