/************************************************************
 *  SITE GLOBAL LAYOUT (상단·중앙·하단 3단 레이아웃)
 ************************************************************/
/* 사이트 전체를 감싸는 구조 */
.site-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 중앙부(스크롤되는 영역) */
.site-main {
    flex: 1;
    background: #f4f5f7 !important; /* 홈 배경과 통일 */
    padding-bottom: 15px;
}

/* 내용 폭 통일 */
.layout-inner {
    max-width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 12px;
}

/************************************************************
 *  1) 최상단 검정색 정보 바
 * ⬇⬇ 상단 얇게 보이도록 패딩 줄이기 ⬇⬇ *
 ************************************************************/
.top-info-bar {
    background: #0d1117;                /* 완전 검정 */
    color: #ced4da;
    font-size: 12px;
    border-bottom: 1px solid #1a1f24;
}
.top-info-inner {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;                     /* ✅ 기존 6px → 4px 로 줄여서 더 얇게 */
}
/* `.top-info-left` 클래스를 가진 요소에 적용되는 스타일 */
.top-info-left {
    float: left;        /* 요소를 왼쪽에 배치 */
    padding-left: 10px; /* 왼쪽 간격을 15px 띄움 (글씨의 좌측 간격 조정) */
}
.top-info-right { }

/************************************************************
 *  2) 메인 헤더 (로고 + 제목)
 ************************************************************/
/* 메인 헤더 높이 */
.main-header {
    background: #111827;              /* 검정+남색 */
    color: white;
    padding: 3px 0 3px 0;             /* ✅ 기존 16px 0 18px → 10px  0 16px 로 글씨 잘림 해결 핵심 */
    border-bottom: 1px solid #1f2937;
}
.main-header-inner {
    display: flex;
    align-items: center;
    gap: 12px;                        /* 필요하면 여기 간격도 줄일 수 있음 12px → 10px */
}

/* 오늘 날짜 pill */
.header-today {
    display: flex;
    align-items: center;
}

.header-today-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.65);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.55);
    font-size: 11px;
    color: #e5e7eb;
}

.header-today-label {
    opacity: 0.8;
}

.header-today-value {
    font-weight: 500;
}

.site-logo-circle {
    width: 38px;
    height: 38px;
    background: #1d4ed8;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 640;
    font-size: 20px;
}

.site-title-block {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* ⭐ 세로 중앙 정렬 */
}
.site-title-block span {
    margin-top: 1px;   /* 글씨 잘림 방지 */
}

.site-title {
    margin: 0;
    font-size: 22px;
    font-weight: 640;
}
.site-subtitle {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 1px;
}

/************************************************************
 *  3) 네비게이션 메뉴(검정 계열 + 드롭다운)
 ************************************************************/
/* ▣ 중단(메뉴바) 줄이기 */
/* 상단 네비게이션 바 전체 배경을 더 진하게 */
.main-nav {
    background: #020617;            /* 거의 검정에 가까운 남색 */
    border-bottom: 1px solid #1f2937;
/* 네비게이션과 드롭다운이 다른 요소 위로 올라오도록 */
    position: relative;
    z-index: 40;
}

/* 안쪽 정렬용 래퍼 (있다면 살짝 높이 여유) */
.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;    /* 🎯 자동 공간 분배 */
    min-height: 34px;
}

/*메뉴 링크(버튼) 높이 줄이기*/
.main-nav a {
    padding: 3px 6px;   /* 기존 8~12px 수준 → 3px로 축소 */
    font-size: 14px;     /* 텍스트 줄여서 전체 높이 감소 */
    line-height: 1.2;    /* 버튼 높이를 더 줄임 */
}

/* 네비게이션 전체 레이아웃 (좌: 메뉴, 우: 날짜) */
.main-nav .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* PC 메뉴 ul */
.main-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
    align-items: center;
}

/* 네비 전체 줄을 flex 로 */
.nav-inner {
    display: flex;
    align-items: center;
}

/* 오른쪽 영역(날짜 박스) */
.nav-extra-right {
    margin-left: auto;           /* ← 메뉴 오른쪽 끝으로 밀기 */
    display: flex;
    align-items: center;
}

/* 날짜 pill 모양 */
.top-date-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    border: 1px solid rgba(148, 163, 184, 0.7);
}

/* PC용 햄버거 버튼 숨김 */
.nav-toggle {
    display: none;
}

/* 기본 메뉴 항목 */
/* 각 상단 메뉴(li)를 드롭다운 기준으로 사용 */
.main-menu > li {
    position: relative;
}

/* 1차 메뉴 텍스트 – 더 밝게 + 약간 두껍게 */
.main-menu > li > a {
    display: block;
    padding: 6px 4px 8px 4px;     /* ← 여기 줄이면 바 전체 높이가 줄어듭니다 */
    font-size: 14px;
    font-weight: 500;             /* 글자 조금 두껍게 */
    color: #f9fafb;               /* 거의 흰색 */
    text-decoration: none;
    white-space: nowrap;
}

/* 마우스를 올렸을 때: 배경 띠가 보이도록 */
.main-menu > li > a:hover {
    color: #60a5fa;          /* #f9fafb  */
    background: rgba(30, 64, 175, 0.9);  /* 진한 파란색 */
    border-radius: 6px;
}

/* 드롭다운 박스 (기본: 숨김) */
.main-menu .dropdown .dropdown-content {
    position: absolute;
    top: 100%;        /* 부모 li 바로 아래 */
    left: 0;
    min-width: 180px;
    margin-top: 0px;  /*  ←--  값을 주면 중간에 틈이 생깁니다 */
    padding: 6px 0;
    border-radius: 8px;

/*    background: #0f172a;         헤더보다 한 단계 밝은 남색   당초 #020617; 
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.85);
    display: none;    기본은 숨김 
    z-index: 60;      헤더 위에 올라오도록 */

/* Glassmorphism 핵심 */
    background: rgba(15, 23, 42, 0.78);              /* 어두운 남색 + 투명도 */
    backdrop-filter: blur(16px);                     /* 블러 효과 */
    -webkit-backdrop-filter: blur(16px);             /* Safari 대응 */

    border: 1px solid rgba(148, 163, 184, 0.5);      /* 연한 회색 테두리 */
    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.65),
        0 0 0 1px rgba(15, 23, 42, 0.85);
    overflow: hidden;
    z-index: 40;                                     /* 다른 요소 위에 오도록 */

}

/* 드롭다운 항목 텍스트 색상 & 패딩 */
.main-menu .dropdown .dropdown-content a {
    display: block;
    padding: 4px 8px;
    font-size: 11.5px;
    color: #e5e7eb;                                  /* 밝은 회색 글씨 */
    text-decoration: none;
    white-space: nowrap;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        padding-left 0.12s ease;
}

/* hover 시 오히려 더 Glass한 느낌 + 좌측 아이콘 공간 느낌 */
.main-nav .dropdown .dropdown-content a:hover {
    background: radial-gradient(
        circle at top left,
        rgba(59, 130, 246, 0.5),
        rgba(15, 23, 42, 0.9)
    );
    color: #f9fafb;
    padding-left: 18px;
}

/* 섹션 제목 (예: “가정별 사진첩”, “관리” 등) */
.main-nav .dropdown .dropdown-content .dropdown-section-title {
    padding: 6px 14px 4px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;                                   /* 연한 회색 */
    opacity: 0.9;
}

/* ▣ 드롭다운 메뉴 표시용 작은 역삼각형 (▼) */
.main-menu > li.dropdown > a::after {
    content: " ▾";              /* 또는 " ▼" 로 바꾸고 싶으면 여기만 변경 */
    font-size: 14px;
    margin-left: 0px;
    vertical-align: middle;
    opacity: 0.85;
}

/* ▣ 핵심: 여기 한 줄이 있어야 내려옵니다 */
.main-menu .dropdown:hover .dropdown-content {
    display: block;
}

/* 호버 시 살짝 내려가는 느낌 */
.main-menu > li.dropdown:hover > a::after {
    transform: translateY(1px);
}


/* ################################################################################# */
/* ▣ 업로드 메뉴(관리 기능 포함) 강조 스타일 */
/* 상단 네비게이션 공통 스타일 정의 이후에 추가해 주세요. */

/* 기본 상태: 높이를 최소화한 pill 버튼 스타일 */
.main-nav .main-menu > li.nav-upload > a.dropdown-toggle {
    position: relative;
    display: inline-flex;          /* 정렬 최적화 */
    align-items: center;           /* 글씨 수직 중앙 */
    border-radius: 999px;
    
    /* 1. 패딩을 더 줄이고 line-height를 1로 고정하여 불필요한 공백 제거 */
    padding: 0px 10px;             /* 상하 여백 0으로 설정 가능 */
    line-height: 1;                /* 줄 높이를 글자 크기에 딱 맞춤 */
    min-height: 12px;              /* 원하는 최소 높이값이 있다면 숫자로 고정 */
    
    font-size: 13px;               /* 글자 크기를 살짝 줄이면 더 슬림해 보임 */
    font-weight: 500;
    border: 1px solid rgba(96, 165, 250, 0.6);
    background: linear-gradient(
        135deg,
        rgba(59, 130, 246, 0.18),
        rgba(37, 99, 235, 0.32)
    );
    color: #f9fafb;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.7),
        0 10px 20px rgba(15, 23, 42, 0.45);
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.12s ease,
        border-color 0.18s ease;
}

/* hover / focus 시 조금 더 강조 */
.main-nav .main-menu > li.nav-upload > a.dropdown-toggle:hover,
.main-nav .main-menu > li.nav-upload > a.dropdown-toggle:focus {
    background: linear-gradient(
        135deg,
        rgba(59, 130, 246, 0.15),
        rgba(37, 99, 235, 0.28)
    );
    border-color: rgba(147, 197, 253, 0.7);          /* 인디고톤 */
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.60),
        0 8px 18px rgba(15, 23, 42, 0.32);
    transform: translateY(-1px);
}

/* ############################################################################# */

/* 섹션 제목(가정별 사진첩 등) */
.dropdown-section-title {
    padding: 6px 12px 4px 12px;
    font-size: 11px;
    color: #9ca3af;
    border-top: 1px solid rgba(30, 64, 175, 0.6);
    margin-top: 4px;
}


/* 드롭다운 공통 */
.dropdown {
    position: relative;
}
.dropdown-toggle {
    cursor: pointer;
}

/* 드롭다운 내용 */
.dropdown-content {
    display: none;
    position: absolute;
    top: 36px;
    left: 0;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    min-width: 170px;
    padding: 6px 0;
    z-index: 20;
}
.dropdown.open .dropdown-content {
    display: block;
}

.dropdown-content a {
    display: block;
    padding: 8px 14px;
    text-decoration: none;
    color: #e5e7eb;
    font-size: 13px;
}
.dropdown-content a:hover {
    background: #334155;
}

/* 구분선 제목 */
.dropdown-section-title {
    padding: 6px 14px;
    font-size: 11px;
    color: #9ca3af;
    border-top: 1px solid #475569;
    margin-top: 4px;
}

/************************************************************
 *  4) MOBILE NAV
 ************************************************************/
@media (max-width: 768px) {

    /* 햄버거 버튼 표시 */
    .nav-toggle {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px 0;
        margin-right: 10px;
    }
    .nav-toggle-bar {
        width: 24px;
        height: 3px;
        background: #e5e7eb;
        margin: 4px 0;
        transition: 0.3s;
    }

    /* 메뉴 숨기기 */
    .main-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #0f172a;
        border-top: 1px solid #1f2937;
        padding: 10px 0px 14px 0;
    }

    /* .main-menu.open 상태 */
    .main-menu.open {
        display: flex;
    }

    /* 모바일 드롭다운 */
    .dropdown-content {
        position: static;
        border: none;
        background: #1e293b;
        padding: 4px 0 8px 0;
    }

/* 모바일에서 Glass 효과는 살짝 줄이기 (성능 & 가독성 고려) */
    .main-nav .dropdown .dropdown-content {
        margin-top: 4px;
        border-radius: 10px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.7);
    }

/* 모바일에서 too-강조 방지를 위한 살짝 줄이기 (선택사항) */
    .main-nav .main-menu > li.nav-upload > a.dropdown-toggle {
        padding: 2px 10px;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.4);
    }

}

/************************************************************
 *  FOOTER (Professional Minimal Style)
 *  Footer layout (2행 · 2열 구조)
 *   - 1행: 좌측(3줄 정보) · 우측(3줄 정보)
 *   - 2행: 좌측 저작권 · 우측 비어 있음 (또는 향후 사용)
 ************************************************************/

/* ------------------------------
   1) 전체 푸터 높이 줄이기
------------------------------ */
.site-footer {
    background: #020617;           /* 진한 남색/검정 배경 */
    color: #9ca3af;                /* 기본 글자색(회색)    */
    padding: 2px 0 3px 0;           /* 높이 조정  */ 
    border-top: 1px solid #111827; /* 상단 경계선          */
    font-size: 10px;
    margin-top: 6px;              /* 본문과의 간격        */
}

.site-footer-inner {
    max-width: 1200px;             /* 헤더/본문과 동일 폭  */
    margin: 0 auto;
    padding: 10px 16px 12px 16px;  /* 위/좌우/아래 여백     */
    box-sizing: border-box;
    font-size: 12px;
}

/* 1행 : 좌/우 정보 영역 전체를 flex 로 배치 */
.footer-main-row {
    display: flex;
    justify-content: space-between;  /* 좌/우 끝으로 배치   */
    align-items: flex-start;
    gap: 20px;                       /* 좌우 간격           */
    margin-bottom: 2px;              /* 행 사이 여유 */
}

/* 좌측 정보 박스는 넓게, 우측은 고정폭 느낌 */
.footer-main-left {
    flex: 1 1 auto;                  /* 남는 공간 대부분 차지 */
}
.footer-main-right {
    flex: 0 0 260px;                 /* 대략 260px 정도 폭    */
    text-align: right;
}

/* 좌측 첫 줄(Lee Family Homepage) 강조 */
.footer-main-left .footer-line:first-child {
    font-size: 13px;          /* 글씨크기 13px */
    font-weight: 600;         /* 약간 굵게 */
    color: #e5e7eb;           /* 더 밝게 */
    margin-bottom: 0px;
}

/* 각 줄 기본 스타일 */
/* 나머지 footer-line 들은 기본 12px 정도로 유지 */
.footer-line {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 1px;              /* 줄 간격               */
}

/* 링크 색상 & hover 효과 */
.footer-line a {
    color: #60a5fa;
    text-decoration: none;
}
.footer-line a:hover {
    text-decoration: underline;
}

/* "맨 위로" 링크 전용 */
.footer-top-link-wrap {
    margin-top: 0px;
}
.footer-top-link {
    font-weight: 500;
}

/* 2행 : 저작권 한 줄 (좌측만 사용, 우측은 여유 영역) */
.footer-bottom-row {
    display: grid;
    grid-template-columns: 1fr auto; /* 좌측: 가변, 우측: 내용 있으면 우측 정렬 */
    align-items: center;
    margin-top: 3px;
    padding-top: 3px;
    border-top: 1px solid #111827;  /* 메인 정보와 구분선   */
    color: #6b7280;
}
.footer-bottom-left {
    text-align: left;
}
.footer-bottom-right {
    text-align: right;
}


/* ===============================================================================================
   %%%%%%%%%%%%%%%%% 1.공통 레이아웃 & 배경 (PC, 태블릿, 모바일 공통)%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 
   =========================================
   0) 공통 레이아웃 & 타이포
   - 화면 전체는 다크 배경
   - 안쪽 컨텐츠는 1200px 중앙 정렬
   ========================================= */

body.site-body {
    margin: 0;
    background: #020617;              /* 전체 검정+남색 배경 */
    color: #e5e7eb;
    font-family: "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 전체 사이트 래퍼 (header + main + footer) */
.site-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 가운데 본문 영역은 늘어나는 부분 */
.site-main {
    flex: 1;
}

/* 공통 내부 폭: 최대 1200px, 양쪽 여백 16px */
.layout-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}


/* %%%%%%%%%%%%%%%%%%% 2. 상단바 + 헤더 (로고 , 제목) 스타일 %%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* =========================================
   1) 상단 얇은 바 (Private Family Site)
========================================= */
.top-info-bar {
    background: #000000;
    border-bottom: 1px solid #111827;
    font-size: 11px;
    color: #9ca3af;
}

.top-info-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 24px;
}

/* =========================================
   2) 메인 헤더 (로고 + 사이트 제목)
========================================= */

.main-header {
    background: #020617;
    border-bottom: 1px solid #1f2937;
    padding: 4px 0 6px 0;                 /* 헤더 높이 축소 */
}

.main-header-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 동그란 로고 */
.site-logo-circle {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #1d4ed8;
    color: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.7);
}

/* 제목/부제 */
.site-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.site-subtitle {
    font-size: 11px;
    color: #cbd5f5;
    margin-top: 2px;
}

/* %%%%%%%%%%%%%%%%%% 3. 네비게이션 바 (PC, 태블릿, 모바일 반응형) $$$$$$$$$$$$$$$$$$$ */
/* =========================================
   3) NAV BAR (상단 메뉴)
   - PC: 가로 메뉴 + 드롭다운
   - 태블릿/모바일: 햄버거 버튼 + 세로 메뉴
========================================= */

/* 3-1. 햄버거 버튼 (모바일 전용, PC에서는 숨김) */
.nav-toggle {
    display: none;              /* 기본은 PC/태블릿에서 숨김 */
    width: 34px;
    height: 28px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.nav-toggle-bar {
    display: block;
    width: 100%;
    height: 3px;
    margin: 4px 0;
    border-radius: 999px;
    background: #e5e7eb;
}

/* 3-2. 상단 1차 메뉴 */

.main-menu > li {
    position: relative;   /* 드롭다운 기준 */
}

.main-menu > li > a {
    display: block;
    padding: 8px 10px !important;  /*  8px 6px;  기본 8px 4px 10px 4px; */
    font-size: 14px;
    color: #e5e7eb;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
}

.main-menu > li > a:hover {
    color: #60a5fa;
}

/* 3-3. 드롭다운 박스 (기본 숨김) */
.main-menu .dropdown .dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    margin-top: 0x;
    padding: 6px 0;
    background: #020617;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.85);
    display: none;
    z-index: 60;  /* 이미 있다면 숫자만 확인 */
}

/* 드롭다운 내부 링크 */
.main-menu .dropdown .dropdown-content a {
    display: block;
    padding: 4px 8px;
    font-size: 12px;
    color: #e5e7eb;
    text-decoration: none;
    white-space: nowrap;
}

.main-menu .dropdown .dropdown-content a:hover {
    background: rgba(30, 64, 175, 0.9);
}

/* 섹션 제목 (가정별 사진첩 등) */
.dropdown-section-title {
    padding: 6px 12px 4px 12px;
    font-size: 11px;
    color: #9ca3af;
    border-top: 1px solid rgba(30, 64, 175, 0.6);
    margin-top: 4px;
}

/* ▣ PC/태블릿에서 :hover 시 드롭다운 오픈 */
.main-menu .dropdown:hover .dropdown-content {
    display: block;
}

/* %%%%%%%%%%%%%%%% 4. 푸터 1200px 중앙 정렬 + 다크 테마 %%%%%%%%%%%%%$$$$$ */
/* =========================================
   4) FOOTER (하단)
========================================= */

.site-footer {
    background: #020617;
    border-top: 1px solid #1f2937;
    margin-top: 5px;
    color: #9ca3af;
    font-size: 12px;
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 26px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 1행: 좌측 정보 + 우측 정보 */
/* 첫 줄 */
.footer-main-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.footer-main-left,
.footer-main-right {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-line a {
    color: #e5e7eb;
    text-decoration: none;
}

.footer-line a:hover {
    text-decoration: underline;
}

/* 2행: 저작권 + 맨 위로 버튼 */
/* 가장 아래 줄 */
.footer-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #1f2937;
    padding-top: 3px;
    margin-top: 2px;
}

.footer-top-link-wrap {
    text-align: right;
}

.footer-top-link {
    font-size: 12px;
    color: #60a5fa;
    text-decoration: none;
}

.footer-top-link:hover {
    text-decoration: underline;
}

/************************************************************
 * Breadcrumb
 ************************************************************/
/* 브레드크럼 영역 */
/* 페이지 전체 배경색과 동일(예: #f4f6f8) */
.breadcrumb-wrap {
    background: #f4f6f8;                 /* 페이지 바탕색과 동일 */
    padding: 2px 0 0px 0;               /* 상하 여백 */
}

/* 브레드크럼 전체 글자 크기 및 색상 */
.breadcrumb-inner {
    font-size: 13px;
    color: #1e293b;                      /* 거의 검정에 가까운 진한 slate */
    font-weight: 500;
}

.breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 2px 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.breadcrumb-item a {
    color: #1e293b !important;         /* 선명한 글씨색 */
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
    color: #1d4ed8 !important;           /* hover 시 파란색 강조 */
}
/* 구분 기호(›) 크게 + 간격 넓게 */
.breadcrumb-separator {
    font-size: 16px;       /* 기호만 더 크게 */
    margin: 0 6px;         /* 좌우 여백 조금 더 */
    color: #64748b !important;           /* slate-500 정도로 보기 쉽도록 */
}

.breadcrumb-current {
    color: #1e293b !important; */
    font-size: 13px;
    font-weight: 600;          /* 굵게 */
    opacity: 1;                  /* 혹시 상위 opacity 상속 막기 위한 안정 조치 */
}

/* %%%%%%%%%%%%%%%%%%% 5. PC , 태블릿 , 모바일 반응형 구분 %%%%%%%%%%%%%%%%%$$ */


/* 홈 메인 */
.home-main {
    background: #020617;
}

/* 공지·일정 메인 – 홈과 완전 동일하게 */
.notice-main {
    padding: 18px 0 32px 0;
    background: #020617;   /* ← 홈과 같은 값 */
}


/* =========================================
   5) 반응형: 태블릿 / 모바일
========================================= */

/* 1023px 이하: 햄버거 버튼 노출, 메뉴는 접어서 세로 */
@media (max-width: 1023px) {

    .nav-inner {
        height: auto;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .nav-toggle {
        display: block;              /* 모바일에서 보이게 */
    }

    .main-menu {
        display: none;               /* 기본 숨김, nav-open 클래스에서만 보이게 */
        flex-direction: column;
        width: 100%;
        gap: 0;
        margin-top: 6px;
        padding-bottom: 6px;
    }

    .main-menu > li > a {
        padding: 8px 0;
        border-top: 1px solid #1f2937;
    }

    /* body.nav-open 일 때 메뉴 열기 */
    body.nav-open .main-menu {
        display: flex;
    }

    /* 드롭다운은 모바일에서는 항상 펼쳐진 리스트처럼 보이도록 처리 */
    .main-menu .dropdown .dropdown-content {
        position: static;
        border: none;
        box-shadow: none;
        margin-top: 0;
        padding: 0 0 4px 12px;
        display: block;  /* dropdown:hover 대신 항상 보이게 */
    }

    .main-menu .dropdown .dropdown-content a {
        padding: 4px 0;
        font-size: 13px;
    }

    .dropdown-section-title {
        border-top: none;
        margin-top: 4px;
        padding-left: 0;
    }

    /* 푸터는 세로 정렬 */
    .footer-main-row {
        flex-direction: column;
        gap: 6px;
    }

    .footer-bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* 640px 이하: 조금 더 타이트하게 */
@media (max-width: 640px) {
    .layout-inner {
        padding: 0 10px;
    }
    .site-title {
        font-size: 15px;
    }
    .site-subtitle {
        font-size: 11px;
    }
    .nav-list > li > a {
        padding: 8px 10px;
        font-size: 12px;
    }
    .breadcrumb {
        padding: 0 10px;
        font-size: 11px;
    }
}


/* $$$$$$$$$$$$$$$$$$$$$$$$$$   - E   N   D -   %%%%%%%%%%%%%%%%%%%%%%%% */


/* ▼▼ 중앙 스크롤 영역(메인 콘텐츠) 배경 최종 설정 ▼▼ */
main.site-main,
.site-main.home-main {
    background: #f4f5f7 !important;   /* 홈 포함 모든 페이지 중앙부 연한 회색 */
}