/* ============================================================
   components.css — 여러 페이지 공용 컴포넌트
   적용: introduction / plm_service / curriculum / gmtc_registration 등
         (바로가기·안내 카드를 쓰는 모든 페이지)
   로드: base.html 에서 페이지별 CSS 뒤에 <link>
   포함: 1) 관련 서비스 바로가기  .quicklinks-*
         2) 권한 등록 안내 카드    .guide-*
   메모: business.css 의 .service-section/.service-icon(핵심역량 카드)와
         충돌해 전용 네임스페이스로 분리함.
   ============================================================ */

/* ============================================================
   0. 팔레트
   ============================================================ */

/* 두 컴포넌트 공용 색 (래퍼 없는 페이지에서도 색 적용되도록 자체 보유) */
.quicklinks-section,
.guide-section {
    --c-blue: var(--brand);
    --c-ink:  #1f2a37;
    --c-gray: #5b6572;
    --c-line: #e2e6eb;
}

/* ============================================================
   1. 관련 서비스 바로가기  (.quicklinks-*)
   ============================================================ */

/* 바로가기 섹션 컨테이너 */
.quicklinks-section {
    padding: 64px 24px;
}

/* ---------- 1.1 섹션 헤더 ---------- */

/* 헤더 블록 (가운데 정렬) */
.quicklinks-section .section-header {
    max-width: var(--content);
    margin: 0 auto 44px;
    text-align: center;
}

/* 헤더 제목 */
.quicklinks-section .section-header h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--c-ink);
    margin-bottom: 12px;
}

/* 헤더 설명문 */
.quicklinks-section .section-header p {
    font-size: 15px;
    color: var(--c-gray);
}

/* ---------- 1.2 카드 그리드 ---------- */

/* 카드 배치 그리드 (기본 4열) */
.quicklinks-grid {
    max-width: var(--content);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* 개별 바로가기 카드 */
.quicklinks-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 26px 22px;

    border: 1px solid var(--c-line);
    border-radius: 12px;
    background: #fff;
    color: var(--c-ink);
    text-decoration: none;

    transition: box-shadow .18s ease, transform .18s ease;
}

/* 카드 아이콘 */
.quicklinks-icon  { flex: 0 0 auto; color: var(--c-blue); line-height: 0; }
/* 카드 이름 */
.quicklinks-name  { font-size: 15px; font-weight: 700; line-height: 1.4; }
/* 카드 오른쪽 화살표 */
.quicklinks-arrow { margin-left: auto; color: #b6bec8; line-height: 0; }

/* ---------- 1.3 상태 ---------- */

/* 카드 hover (살짝 떠오름) */
.quicklinks-card:hover {
    box-shadow: 0 8px 22px rgba(20, 30, 50, .09);
    transform: translateY(-2px);
}

/* 현재 페이지 카드 강조 (파란 배경) */
.quicklinks-card.active {
    background: var(--c-blue);
    border-color: var(--c-blue);
    color: #fff;
}
/* 강조 카드 안 아이콘·화살표는 흰색 */
.quicklinks-card.active .quicklinks-icon,
.quicklinks-card.active .quicklinks-arrow { color: #fff; }

/* ---------- 1.4 열 수 옵션 ---------- */

/* 섹션에 cols-3 → 3열 */
.quicklinks-section.cols-3 .quicklinks-grid { grid-template-columns: repeat(3, 1fr); }
/* 섹션에 cols-5 → 5열 */
.quicklinks-section.cols-5 .quicklinks-grid { grid-template-columns: repeat(5, 1fr); }

/* ============================================================
   2. 권한 등록 안내 카드  (.guide-*)
   ============================================================ */

/* 안내 섹션 컨테이너 (연회색 배경) */
.guide-section {
    padding: 64px 24px;
    background: #fafbfc;
}

/* ---------- 2.1 섹션 헤더 ---------- */

/* 헤더 블록 (가운데 정렬) */
.guide-section .section-header {
    max-width: var(--content);
    margin: 0 auto 44px;
    text-align: center;
}

/* 헤더 제목 */
.guide-section .section-header h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--c-ink);
    margin-bottom: 12px;
}

/* ---------- 2.2 카드 ---------- */

/* 카드 배치 그리드 (기본 4열) */
.guide-grid {
    max-width: var(--content);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* 개별 안내 카드 (세로: 헤더 + 목록) */
.guide-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 20px;

    border: 1px solid var(--c-line);
    border-radius: 12px;
    background: #fff;
}

/* 카드 상단: 아이콘 + 제목 한 줄 */
.guide-head { display: flex; align-items: center; gap: 10px; }
/* 카드 아이콘 */
.guide-icon { flex: 0 0 auto; color: var(--c-blue); line-height: 0; }

/* 카드 제목 */
.guide-card h3 { font-size: 15px; font-weight: 700; color: var(--c-ink); margin: 0; }
/* 카드 목록 */
.guide-card ul { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--c-gray); }
/* 목록 항목 (불릿 자리 확보) */
.guide-card li { position: relative; padding-left: 12px; margin-bottom: 4px; line-height: 1.5; }
/* 커스텀 불릿(•) */
.guide-card li::before { content: "\2022"; position: absolute; left: 0; color: #a7b0bb; }

/* ============================================================
   3. 공통 서비스 카드 기본형
   ------------------------------------------------------------
   components.css 가 페이지별 CSS 뒤에 로드되므로 :where() 를 사용해
   specificity를 0으로 유지합니다. 페이지별/모바일 규칙이 항상 우선합니다.
   ============================================================ */

:where(.service-section) {
    background: #f8fafc;
    border-radius: 20px;
    padding: 30px;
}

:where(.service-section) :where(.business-service-card, .service-card) {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
}

:where(.service-section) :where(.business-service-card, .service-card) .service-header {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 16px;
    margin-bottom: 20px;
}

/* ============================================================
   4. 반응형 (바로가기·안내 카드)
   ============================================================ */

/* 태블릿: 4·3·5열 → 2·2·3열 */
@media (max-width: 1024px) {
    .guide-grid      { grid-template-columns: repeat(2, 1fr); }
    .quicklinks-grid { grid-template-columns: repeat(2, 1fr); }
    .quicklinks-section.cols-3 .quicklinks-grid { grid-template-columns: repeat(2, 1fr); }
    .quicklinks-section.cols-5 .quicklinks-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 모바일: 대부분 1열 (cols-5만 2열) + 섹션 여백 축소 */
@media (max-width: 768px) {
    .guide-grid      { grid-template-columns: 1fr; }
    .quicklinks-grid { grid-template-columns: 1fr; }
    .quicklinks-section.cols-3 .quicklinks-grid { grid-template-columns: 1fr; }
    .quicklinks-section.cols-5 .quicklinks-grid { grid-template-columns: repeat(2, 1fr); }
    .quicklinks-section,
    .guide-section { padding: 48px 20px; }
    .quicklinks-section .section-header h2,
    .guide-section .section-header h2{
        font-size:20px;
    }

    .quicklinks-section .section-header p,
    .guide-section .section-header p{
        font-size:15px;
    }

    .quicklinks-name{
        font-size:14px;
    }

    .guide-card h3{
        font-size:16px;
    }

    .guide-card ul{
        font-size:13px;
    }
}

/* 소형: cols-5도 1열 */
@media (max-width: 480px) {
    .quicklinks-section.cols-5 .quicklinks-grid { grid-template-columns: 1fr; }
}