@charset "UTF-8";
/* ===== Breadcrumb Container ===== */
.page_title {
    padding: 0; /* ✅ 패딩 제거 */
    margin-bottom: 0;
    background: transparent; /* ✅ 배경 투명 */
    border-bottom: none; /* ✅ 하단 보더 제거 */
    box-shadow: none;
}

.breadcrumb-container {
    display: flex;
    flex-direction: column;
    gap: 0; /* ✅ 간격 제거 */
}

/* ===== Breadcrumb Section ===== */
.breadcrumb-section {
    margin-top: 0;
    padding: 10px 25px; /* ✅ 좌우 패딩만 */
    background: #f8f9fa; /* ✅ 연한 회색 배경 */
    border-bottom: 1px solid #e8ecef; /* ✅ 하단 보더만 */
}

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

.breadcrumb-list-item {
    display: flex;
    align-items: center;
    font-size: 13px;
    line-height: 1.6;
}

/* ===== Separators ===== */
.breadcrumb-separator {
    margin: 0 8px;
    color: #cbd5e0;
    font-size: 11px; /* ✅ 12px → 11px 더 작게 */
    font-weight: 300;
}

/* ===== Breadcrumb Items ===== */
.breadcrumb-link-text {
    padding: 2px 0;
    transition: color 0.2s ease;
    cursor: default;
    line-height: 1.5;
}

.breadcrumb-current {
    padding: 2px 0;
    font-weight: 600;
    line-height: 1.5;
}

/* ===== Depth별 스타일 (더 세련되게) ===== */
.depth-0 {
    color: #64748b; /* ✅ 연한 회색 */
    font-size: 13px;
    font-weight: 400; /* ✅ 500 → 400 더 가볍게 */
}


.depth-1 {
    color: #3498db; /* ✅ 파란색 강조 */
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase; /* ✅ 대문자 (STORE) */
    letter-spacing: 0.5px; /* ✅ 자간 */
}

.depth-2 {
    color: #475569; /* ✅ 중간 회색 */
    font-size: 13px;
    font-weight: 500;
}

.depth-3 {
    color: #1e293b; /* ✅ 진한 회색 (현재 페이지) */
    font-size: 13px;
    font-weight: 600;
}

.depth-4 {
    color: #1e293b;
    font-size: 13px;
    font-weight: 600;
}

.depth-5 {
    color: #1e293b;
    font-size: 13px;
    font-weight: 600;
}

.depth-6 {
    color: #1e293b;
    font-size: 13px;
    font-weight: 600;
}

/* ===== 홈 아이콘 스타일 (선택사항) ===== */
.depth-0::before {
    content: '\1F3E0'; /* 🏠 홈 이모지 — 인코딩 독립 유니코드 이스케이프 (S3/CDN charset 문제 방지) */
    margin-right: 4px;
    font-size: 12px;
}

/* ===== Debug Section ===== */
.breadcrumb-debug {
    margin: 10px 25px;
    padding: 15px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    font-size: 13px;
    color: #856404;
}

.breadcrumb-debug strong {
    color: #533f03;
}

.breadcrumb-debug pre {
    background: #fff;
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;
}

.breadcrumb-debug table {
    width: 100%;
    margin-top: 10px;
    background: #fff;
}

.breadcrumb-debug th {
    background: #f8f9fa;
    font-weight: 600;
}

/* ===== 검색 영역과의 간격 ===== */
.page_tit + * {
    margin-top: 0 !important;
}

/* ===== 반응형 디자인 ===== */
@media (max-width: 768px) {
    .breadcrumb-section {
        padding: 8px 20px;
    }

    .breadcrumb-list-item {
        font-size: 12px;
    }

    .breadcrumb-separator {
        margin: 0 6px;
        font-size: 10px;
    }

    .depth-0,
    .depth-1,
    .depth-2,
    .depth-3,
    .depth-4,
    .depth-5,
    .depth-6 {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .breadcrumb-section {
        padding: 6px 15px;
    }

    .breadcrumb-list {
        font-size: 11px;
    }

    .breadcrumb-separator {
        margin: 0 4px;
        font-size: 9px;
    }

    .depth-0,
    .depth-1,
    .depth-2,
    .depth-3,
    .depth-4,
    .depth-5,
    .depth-6 {
        font-size: 11px;
    }

    /* 모바일에서 홈 아이콘 제거 */
    .depth-0::before {
        display: none;
    }
}

/* ===== 다크모드 지원 ===== */
@media (prefers-color-scheme: dark) {
    .breadcrumb-section {
        background: #2d2d2d;
        border-bottom-color: #333;
    }

    .depth-0 {
        color: #94a3b8;
    }

    .depth-1 {
        color: #5dade2;
    }

    .depth-2 {
        color: #94a3b8;
    }

    .depth-3,
    .depth-4,
    .depth-5,
    .depth-6 {
        color: #e0e0e0;
    }

    .breadcrumb-separator {
        color: #555;
    }
}


.depth-0 {
    color: #64748b;
    font-size: 13px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.depth-0::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f015"; /* 깔끔한 홈 아이콘 */
    font-size: 11px;
    color: #3498db;
}

/* 또는 Unicode 심볼로 더 심플하게 */
.depth-0::before {
    content: '\2302'; /* ⌂ 홈 심볼 — 인코딩 독립 유니코드 이스케이프 */
    margin-right: 4px;
    font-size: 22px;
    color: #3498db;
    font-weight: 400;
}


#content {
    margin-left: 0 !important; /* app.css 의 sidebar 210px 잔재 제거 */
}

.top-menu-layout #content {
    margin-top: 105px !important; /* PC: 60px header-top + 45px header-nav */
    padding: 0 !important;
}

.innter_wrap {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 768px) {
    .top-menu-layout #content {
        margin-top: 56px !important; /* 모바일: header-top 높이만 */
    }
}

/* 검색 영역 등 */
.search_box,
.filter-box,
.search-area {
    padding: 20px 25px;
}