:root {
    --primary-color: #0056b3; /* 기존 파란색 유지 */
    --secondary-color: #007bff; /* 밝은 파란색 (호버 등) */
    --accent-color: #ffc107; /* 노란색 (포인트) */
    --text-color: #333333;
    --light-text-color: #555555;
    --bg-color: #f8f9fa; /* 더 밝은 회색 배경 */
    --card-bg-color: #ffffff;
    --border-color: #dee2e6;
    --font-family-base: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    --font-family-heading: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    --spacing-unit: 8px;
}

/* Basic Reset & Base Styles */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    line-height: 1.7;
    color: var(--text-color);
    background-color: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.2s ease;
}

a:hover {
    /* color: var(--secondary-color); */
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: 600; /* 약간 더 두껍게 */
    line-height: 1.3;
    margin-bottom: calc(var(--spacing-unit) * 2); /* 16px */
}

h1 { font-size: 2.2em; }
/* h2, h3 등은 각 컴포넌트 CSS에서 정의하는 것이 더 좋을 수 있음 */

p {
    margin-bottom: calc(var(--spacing-unit) * 2); /* 16px */
    color: var(--light-text-color);
}

/* 기본 컨테이너 - 좀 더 넓게 */
.container {
    max-width: 1280px; /* 최대 너비 증가 */
    margin: 0 auto; /* 중앙 정렬 */
    padding: 0 calc(var(--spacing-unit) * 3); /* 24px 좌우 여백 */
}
@media (max-width: 768px) {
    .container {
        padding: 0; /* 16px 좌우 여백 */
    }
}

/* 서브 페이지 공통 */
.sub_section {
    max-width: 1100px; /* 약간 더 넓게 */
    margin: calc(var(--spacing-unit) * 4) auto; /* 상하 여백 */
    padding: calc(var(--spacing-unit) * 5); /* 40px 내부 여백 */
    background-color: var(--card-bg-color);
    border-radius: 12px; /* 좀 더 부드럽게 */
    border: 1px solid var(--border-color); /* 옅은 테두리 추가 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* 그림자 약간 조정 */
}

.sub_section h2 {
    font-size: 1.5em; /* 약간 줄임 */
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 1.5); /* 12px */
    color: var(--primary-color);
}

.sub_tit_line {
    width: 60px; /* 약간 줄임 */
    height: 4px; /* 두께 증가 */
    background-color: var(--primary-color);
    margin: 0 auto calc(var(--spacing-unit) * 4); /* 32px 하단 여백 */
    border-radius: 2px;
}

/* 버튼 공통 스타일 - 조금 더 세련되게 */
.btn {
    display: inline-block;
    padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2.5); /* 10px 20px */
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    font-weight: 500;
    font-size: 0.95em;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn:hover {
    background-color: var(--secondary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 보조 버튼 스타일 */
.btn-secondary {
    background-color: #6c757d; /* Gray */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.btn-secondary:hover {
    background-color: #5a6268;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* 위험 버튼 스타일 */
.btn-danger {
    background-color: #dc3545; /* Red */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-danger:hover {
    background-color: #c82333;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 기타 유틸리티 클래스 (필요시 추가) */
.text-center { text-align: center; }
.mb-1 { margin-bottom: var(--spacing-unit); } /* 8px */
.mb-2 { margin-bottom: calc(var(--spacing-unit) * 2); } /* 16px */
.mb-3 { margin-bottom: calc(var(--spacing-unit) * 3); } /* 24px */
.mt-1 { margin-top: var(--spacing-unit); }
.mt-2 { margin-top: calc(var(--spacing-unit) * 2); }
.mt-3 { margin-top: calc(var(--spacing-unit) * 3); }

/* Sub Top Banner Styles */
.sub-top-banner {
    padding: 60px 0; /* Adjust vertical padding as needed */
    background-image: url('../img/sub_top.webp'); /* Path relative to CSS file */
    background-size: cover; /* Cover the entire area */
    background-position: center center; /* Center the image */
    background-repeat: no-repeat;
    position: relative; /* For potential overlay */
    text-align: center; /* Center title */
    color: white; /* Default text color */
}

/* Optional: Add a semi-transparent overlay for better text readability */
.sub-top-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Adjust darkness (0.4 = 40% black) */
    z-index: 1;
}

/* Ensure container is positioned above the overlay */
.sub-top-banner .container {
    position: relative;
    z-index: 2;
}

.sub-top-title {
    font-size: 2.5em; /* Adjust title size */
    font-weight: 600;
    color: #ffffff; /* White text */
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Add text shadow for readability */
}

/* Keywords below sub top title */
.sub-top-keywords {
    font-size: 1.1em; /* Adjust size relative to title */
    margin-top: 15px; /* Space below title */
    color: rgba(255, 255, 255, 0.85); /* Slightly transparent white */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Slightly softer shadow */
    font-weight: 400; /* Lighter weight than title */
    letter-spacing: 0.5px; /* Add slight letter spacing */
}

/* Responsive adjustments for title AND keywords */
@media (max-width: 768px) {
    .sub-top-banner {
        padding: 40px 0;
    }
    .sub-top-title {
        font-size: 2em;
    }
    .sub-top-keywords {
        font-size: 1em;
        margin-top: 10px;
    }
    .sub_section{
        margin: 0;
    }
    .sub_section h2{
        font-size: 1.2em;
    }
}

@media (max-width: 480px) {
    .sub-top-banner {
        padding: 30px 0;
    }
    .sub-top-title {
        font-size: 1.6em;
    }
    .sub-top-keywords {
        font-size: 0.9em;
        line-height: 1.5;
        margin-top: 8px;
    }
}

/* Breadcrumb Navigation Styles */
.breadcrumb-nav {
    background-color: #f8f9fa; /* Light grey background */
    padding: 12px 0;
    border-bottom: 1px solid #dee2e6;
    display: none; /* Hidden by default on desktop */
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
}

.breadcrumb-item {
    display: flex; /* Align items with separator */
    align-items: center;
}

/* Separator */
.breadcrumb-item + .breadcrumb-item::before {
    content: ">"; /* Use > as separator */
    display: inline-block;
    padding: 0 10px;
    color: #6c757d; /* Separator color */
    font-size: 0.85em;
}

.breadcrumb-item a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--primary-color-dark);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: #495057; /* Darker color for active item */
    font-weight: 500;
}

/* Home Icon */
.breadcrumb-item a i.fa-home {
    font-size: 1.1em;
}

/* Dropdown Styles */
.breadcrumb-item.has-dropdown {
    position: relative; /* For dropdown positioning */
}

.breadcrumb-item.has-dropdown > a.dropdown-toggle {
    cursor: pointer; /* Indicate it's clickable */
    display: inline-flex;
    align-items: center;
}
.breadcrumb-item.has-dropdown > a.dropdown-toggle:hover {
     text-decoration: none; /* No underline on toggle hover */
}

.breadcrumb-item.has-dropdown .dropdown-icon {
    margin-left: 5px;
    font-size: 0.7em;
    transition: transform 0.3s ease;
}

.breadcrumb-item.has-dropdown.open > a.dropdown-toggle .dropdown-icon {
    transform: rotate(180deg);
}

.breadcrumb-dropdown-menu {
    display: none; /* Initially hidden for slideToggle */
    position: absolute;
    top: calc(100% + 5px); /* Position below the parent item */
    left: 0;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
    min-width: 160px;
    z-index: 1010; /* Ensure it's above other elements */
}

.breadcrumb-dropdown-menu li a {
    display: block;
    padding: 8px 15px;
    color: #343a40;
    font-size: 0.9em;
    white-space: nowrap;
}

.breadcrumb-dropdown-menu li a:hover {
    background-color: #f1f3f5;
    text-decoration: none;
}

/* Responsive adjustments for breadcrumbs - Show on mobile */
@media (max-width: 1024px) { /* Same breakpoint as mobile menu */
    .breadcrumb-nav {
        display: block; /* Show on screens 1024px and below */
        padding: 20px;
    }
    /* Optional: Adjust padding/font-size for mobile breadcrumbs if needed */
    .breadcrumb-list {
        font-size: 0.85em; /* Slightly smaller on mobile */
    }
    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 8px; /* Reduce separator padding */
    }
}

/* Common Fixed Action Button (FAB) Styles */
.fab-btn {
    position: fixed;
    right: 30px; /* Adjust distance from right */
    width: 60px; /* Adjust button size */
    height: 60px;
    background-color: transparent; /* Or a background color if needed */
    border-radius: 50%;
    display: none; /* Hide by default on desktop */
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 999; /* Ensure it's above most content but below modals if any */
    transition: transform 0.2s ease;
}

.fab-btn:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
}

.fab-btn img {
    width: 100%; /* Make image fill the button */
    height: 100%;
    object-fit: cover; /* Ensure image covers the area nicely */
    border-radius: 50%; /* Keep image rounded if button is round */
}

/* Specific FAB positions */
.sms-fab {
    bottom: 30px; /* Position SMS button at the bottom */
}

.tel-fab {
    /* Position Tel button above SMS button (sms_bottom + sms_height + margin) */
    bottom: calc(30px + 60px + 15px); /* 30px + 60px + 15px = 105px */
}

/* Show FABs on mobile screens */
@media (max-width: 1024px) { /* Same breakpoint as mobile menu */
    .fab-btn {
        display: flex; /* Show FABs on mobile */
    }
    /* Optional: Adjust position slightly for mobile if needed */
    /*
    .fab-btn { right: 20px; }
    .sms-fab { bottom: 20px; }
    .tel-fab { bottom: calc(20px + 60px + 10px); } 
    */
}

/* Pagination Styles */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: calc(var(--spacing-unit) * 4); /* 32px */
}

.pagination ul {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
    gap: calc(var(--spacing-unit) * 0.5); /* 4px */
}

.pagination li {
    /* margin: 0 2px; */ /* Replaced by gap */
}

.pagination li a,
.pagination li span {
    display: block;
    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1.25); /* 6px 10px */
    line-height: 1.25;
    color: var(--primary-color);
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px; /* Rounded corners */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.pagination li a:hover {
    color: #fff;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    text-decoration: none;
}

.pagination li.active a,
.pagination li.active span {
    z-index: 3;
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.pagination li.disabled span {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}