/* --- 기본 스타일 및 변수 정의 --- */
:root {
    --primary-color: #0A2342;    /* 딥 네이비 (Deep Navy) */
    --secondary-color: #81C784; /* 모란디 그린 (Morandi Green) */
    --hover-accent-color: #6aa86d; /* 약간 어두운 모란디 그린 */
    --text-color: #333;
    --text-light-color: #666;
    --bg-color: #f8f8f8;
    --content-bg-color: #ffffff;
    --border-color: #e0e0e0;
    --table-border-color: #ccc; /* 테이블 내부 선 */
    --border-light-color: #eee; /* 더 밝은 선 */
    --shadow-color: rgba(0, 0, 0, 0.08);
    --font-family: 'Noto Sans KR', 'Noto Sans SC', sans-serif;
    --base-font-size: 12px; /* 기본 폰트 크기 */
    --base-padding: 15px; /* 기본 패딩 */
    --border-radius: 8px; /* 둥근 모서리 */
    --nav-height: 60px; /* 하단 네비게이션 높이 */
    --danger-color: #dc3545; /* 위험/삭제 */
    --danger-dark-color: #bb2d3b;
    --success-color: #198754; /* 성공/완료 */
    --warning-color: #ffc107; /* 경고/주의 */
    --primary-light-color: #e7f0f7; /* 버튼 호버 등 */
}

/* 기본 스타일 초기화 및 설정 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; } /* 부드러운 스크롤 */
body {
    font-family: var(--font-family);
    font-size: var(--base-font-size);
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
    padding-bottom: calc(var(--nav-height) + 10px); /* 하단 네비게이션 공간 확보 */
}
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--hover-accent-color);
    text-decoration: underline;
}
button, input[type="submit"], input[type="button"] {
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit; /* 버튼 폰트 상속 */
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    opacity: 0.85;
}
button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: scale(0.98);
}
img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius); /* 이미지에도 기본 둥근 모서리 */
}
hr {
    border: none;
    border-top: 1px solid var(--border-light-color);
    margin: 30px 0;
}
h1, h2, h3, h4 {
    margin-bottom: 0.8em;
    line-height: 1.3;
    font-weight: 500;
}
h1 { font-size: 1.8em; color: var(--primary-color); }
h2 { font-size: 1.4em; color: var(--primary-color); }
h3 { font-size: 1.15em; font-weight: 700; color: var(--text-color); }
h4 { font-size: 1.05em; font-weight: 500; color: var(--text-color); }
ul, ol {
    padding-left: 20px;
    margin-bottom: 1em;
}
li { margin-bottom: 0.5em; }
p { margin-bottom: 1em; }
i { /* FontAwesome 아이콘 기본 스타일 */
    color: var(--text-light-color);
    margin-right: 6px;
    text-align: center;
    vertical-align: middle;
    width: 1.2em; /* 아이콘 너비 고정 (정렬 도움) */
}
h1 i, h2 i, h3 i, h4 i {
    color: inherit; /* 제목 아이콘은 제목 색상 상속 */
    width: auto; /* 제목 아이콘 너비는 자동 */
}

/* --- 레이아웃 및 섹션 스타일 --- */
.content-area {
    padding: var(--base-padding);
}
.content-section {
    background-color: var(--content-bg-color);
    padding: calc(var(--base-padding) * 1.5);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    margin-bottom: var(--base-padding);
}
.content-section h1 {
    border-bottom: 1px solid var(--border-light-color);
    padding-bottom: 0.5em;
    margin-bottom: 1.2em;
}

/* --- 공통 UI 요소 --- */

/* 기본 버튼 스타일 */
.button-primary {
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}
.button-primary:hover {
    opacity: 0.85;
}
.button-secondary {
    padding: 10px 20px;
    background-color: #ccc;
    color: #333;
    border: none;
    border-radius: 4px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.button-secondary:hover {
    background-color: #bbb;
}
.button-danger {
    padding: 10px 20px;
    background-color: var(--danger-color);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.button-danger:hover {
    background-color: var(--danger-dark-color);
}
.button-small { /* 작은 버튼 (예: 프로젝트 관리) */
    padding: 4px 8px !important;
    font-size: 0.8em !important;
    line-height: 1.2 !important;
}
.button-small i {
    margin-right: 3px;
}

/* 입력 필드 스타일 */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="email"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1em;
    font-family: inherit;
    background-color: var(--content-bg-color);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
    box-sizing: border-box;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
input[type="number"] {
    text-align: right;
    -moz-appearance: textfield; /* Firefox */
    appearance: textfield; /* Standard */
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
textarea {
    resize: vertical;
    min-height: 60px;
}
input::placeholder, textarea::placeholder {
    color: #aaa;
    font-size: 0.9em;
    font-style: italic;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(129, 199, 132, 0.25); /* Morandi Green focus */
    outline: none;
}
/* Form Group (라벨 + 입력 필드) */
.form-group {
    margin-bottom: 1em;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 0.9em;
}

/* 체크리스트 스타일 */
ul.check-list {
    list-style: none;
    padding-left: 0;
}
ul.check-list li {
    padding-left: 1.8em;
    position: relative;
    margin-bottom: 0.48em;
}
ul.check-list li > i[class*="fa-"] {
    position: absolute;
    left: 0;
    top: 0.25em;
    color: var(--primary-color);
    font-size: 1em;
    width: 1.2em;
    text-align: center;
}
ul.check-list li strong {
    color: var(--text-color);
}

/* --- 하단 네비게이션 바 스타일 --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background-color: var(--content-bg-color);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    z-index: 1000;
}
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    text-decoration: none;
    color: var(--text-light-color);
    font-size: 11px;
    padding: 5px 0;
    transition: color 0.3s ease, transform 0.1s ease;
}
.nav-item i {
    font-size: 22px;
    margin-bottom: 3px;
    color: inherit;
    width: auto; /* 아이콘 너비 자동 */
    margin-right: 0;
}
.nav-item span {
    display: block;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.nav-item.active {
    color: var(--primary-color);
}
.nav-item:hover {
    color: var(--hover-accent-color);
    text-decoration: none;
}
.nav-item:active {
    transform: scale(0.95);
    background-color: transparent;
}

/* --- 홈 버튼 스타일 --- */
.home-button {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1010;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--primary-color);
    border: 1px solid var(--border-light-color);
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.home-button i {
    margin: 0;
    font-size: 1.1em;
    color: inherit;
    line-height: 1;
    width: auto; /* 아이콘 너비 자동 */
}
.home-button:hover {
    background-color: #fff;
    color: var(--hover-accent-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    text-decoration: none;
}

/* --- 공통 테이블 스타일 --- */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5em;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
.table-responsive > table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    font-size: 0.95em;
    background-color: #fff;
}
.table-responsive th,
.table-responsive td {
    border: 1px solid var(--border-color);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top; /* 기본 상단 정렬 */
}
.table-responsive thead th {
    background-color: #f8f9fa;
    font-weight: 500;
    vertical-align: middle; /* 헤더는 중간 정렬 */
    border-bottom: 2px solid var(--border-color);
    position: sticky; /* 테이블 스크롤 시 헤더 고정 */
    top: 0;
    z-index: 1;
}
.table-responsive tfoot th,
.table-responsive tfoot td {
    background-color: #f8f9fa;
    font-weight: bold;
    border-top: 2px solid var(--border-color);
}

/* --- 공통 경고/알림 메시지 스타일 --- */
.app-warning-message, .tts-warning-message {
    padding: 12px 18px;
    margin: 0 var(--base-padding) var(--base-padding) var(--base-padding);
    border-radius: var(--border-radius);
    background-color: #fff3cd; /* 노란색 경고 */
    color: #664d03;
    border: 1px solid #ffecb5;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    font-size: 0.9em;
    z-index: 1100;
    position: relative; /* 필요 시 */
    display: none; /* 기본 숨김 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.app-warning-message.error, .tts-warning-message.error {
    background-color: #f8d7da; /* 빨간색 에러 */
    color: #842029;
    border-color: #f5c2c7;
}
.app-warning-message.disappearing, .tts-warning-message.disappearing {
    opacity: 0;
}

/* --- 반응형 조정 --- */
@media (min-width: 768px) {
    :root {
        --base-font-size: 13px; /* 데스크탑 폰트 크기 약간 증가 */
    }
    .content-area {
        max-width: 960px;
        margin: 0 auto;
        padding: calc(var(--base-padding) * 2);
    }
    .bottom-nav {
        max-width: 960px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 1px solid var(--border-color);
        border-right: 1px solid var(--border-color);
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
    }
}
@media (max-width: 767px) {
    .table-responsive th,
    .table-responsive td {
        padding: 8px 10px;
        font-size: 0.9em;
        white-space: nowrap; /* 모바일에서 기본적으로 줄바꿈 방지 */
        border: 1px solid #bbb; /* 모바일에서 선 더 진하게 */
        vertical-align: middle; /* 모바일에서는 중간 정렬 기본 */
    }
    /* 특정 테이블 셀만 줄바꿈 허용 (필요 시 각 페이지 CSS에서 재정의) */
    .table-responsive .allow-wrap {
        white-space: normal;
        vertical-align: top;
    }
    .home-button {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
    }
    .home-button i {
        font-size: 1em;
    }
}/* --- 카드 UI 스타일 (공통) --- */
.card-container { /* 카드 그리드 레이아웃 */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--base-padding);
    margin-bottom: 1.5em;
}
.card {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 6px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 이미지 등 내용 넘침 방지 */
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--secondary-color); /* 호버 시 테두리 강조 */
}
.card-image { /* 카드 상단 이미지 */
    width: 100%;
    height: 180px; /* 이미지 높이 고정 */
    object-fit: cover; /* 이미지 비율 유지하며 채우기 */
    border-bottom: 1px solid var(--border-light-color);
    border-top-left-radius: calc(var(--border-radius) - 1px); /* 테두리 안쪽으로 둥글게 */
    border-top-right-radius: calc(var(--border-radius) - 1px);
}
img.card-image[src=""], img.card-image:error { /* 이미지 없을 때 */
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: small;
    text-align: center;
    border-bottom: 1px solid #ddd;
}
img.card-image[src=""]::after, img.card-image:error::after {
    content: "이미지 준비중";
}
.card-content { /* 카드 내용 영역 */
    padding: var(--base-padding);
    flex-grow: 1; /* 남은 공간 채우기 */
    display: flex;
    flex-direction: column;
}
.card h3, .card h4 { /* 카드 제목 */
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 0.6em;
    color: var(--text-color);
    margin-top: 0;
}
.card h3 i, .card h4 i {
    color: var(--primary-color);
    margin-right: 6px;
}
.card p { /* 카드 본문 텍스트 */
    margin-bottom: 0.8em;
    font-size: 0.95em;
    color: var(--text-light-color);
    flex-grow: 1; /* 설명이 버튼 위 공간 차지하도록 */
}
.card-details { /* 상세 정보 (접기/펴기) */
    margin-top: auto; /* 버튼 위로 밀착 */
}
.card-details summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--primary-color);
    padding: 8px 0;
    outline: none;
    display: inline-block;
    transition: color 0.3s ease;
    list-style: none; /* 기본 마커 제거 */
    font-size: 0.9em;
}
.card-details summary::-webkit-details-marker { display: none; } /* Webkit 마커 제거 */
.card-details summary:hover {
    text-decoration: underline;
    color: var(--hover-accent-color);
}
.card-details summary::before { /* 커스텀 마커 */
    content: '+ ';
    font-weight: bold;
    margin-right: 4px;
}
.card-details[open] > summary::before {
    content: '− ';
}
.card-details div { /* 상세 정보 내용 */
    margin-top: 0.8em;
    font-size: 0.9em;
    color: var(--text-light-color);
    border-top: 1px dashed var(--border-light-color);
    padding-top: 0.8em;
}

/* --- 가로 스크롤 컨테이너 --- */
.horizontal-scroll-wrapper {
    margin-bottom: 2em;
    position: relative; /* 스크롤 힌트용 */
}
.horizontal-scroll-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0 20px 10px; /* 아래쪽 패딩으로 스크롤바 공간 확보 */
    gap: var(--base-padding, 15px);
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #ccc #f0f0f0; /* Firefox */
    scroll-behavior: smooth; /* 부드러운 스크롤 (휠 스크롤 제외) */
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
}
/* 웹킷 스크롤바 스타일 */
.horizontal-scroll-container::-webkit-scrollbar { height: 8px; }
.horizontal-scroll-container::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 4px; }
.horizontal-scroll-container::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 4px; }
.horizontal-scroll-container::-webkit-scrollbar-thumb:hover { background-color: #aaa; }
/* 가로 스크롤 컨테이너 내 카드 */
.horizontal-scroll-container .card {
    flex: 0 0 auto; /* 카드 크기 고정 */
    width: 290px; /* 카드 너비 지정 */
    margin-right: 0; /* gap 사용으로 불필요 */
}
/* 가로 스크롤 힌트 (선택적) */
.horizontal-scroll-wrapper::after {
    content: '>';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    color: rgba(0,0,0,0.2);
    pointer-events: none; /* 클릭 방지 */
    animation: scrollHint 1.5s infinite ease-in-out;
    opacity: 0; /* 기본 숨김 */
}
/* 스크롤 가능할 때만 힌트 표시 (JS로 클래스 추가 필요) */
.horizontal-scroll-wrapper.scrollable::after {
    opacity: 1;
}
@keyframes scrollHint {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(5px); }
}

/* --- 검색창 스타일 --- */
.search-container {
    margin-top: 1.5em;
    padding: var(--base-padding);
    background-color: #f8f9fa;
    border: 1px solid var(--border-light-color);
    border-radius: var(--border-radius);
    display: flex;
    gap: 10px;
    align-items: center;
}
.search-container input[type="search"] {
    flex-grow: 1;
    /* 기본 스타일 상속 */
}
.search-container button {
    padding: 8px 15px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease;
}
.search-container button:hover {
    background-color: var(--hover-accent-color); /* 다른 색으로 변경 */
    opacity: 1; /* 호버 시 투명도 제거 */
}
.card.highlight { /* 검색 결과 하이라이트 */
    outline: 3px solid var(--secondary-color);
    outline-offset: -3px;
    transition: outline 0.1s ease-in-out;
}

/* --- 접기/펴기 상세 정보 (텍스트 전용) --- */
.collapsible-text-only > summary {
    list-style: none;
    cursor: pointer;
    display: inline-block;
    padding: 5px 0;
    color: var(--primary-color);
    font-weight: 500;
    margin-top: 1em; /* 위쪽 여백 */
    transition: color 0.2s ease;
}
.collapsible-text-only > summary::-webkit-details-marker { display: none; }
.collapsible-text-only > summary:hover {
    color: var(--secondary-color);
}
.collapsible-text-only > summary > h3 { /* summary 안의 제목 */
    display: inline;
    margin: 0;
    font-size: 1.15em;
    color: inherit;
}
.collapsible-text-only > ul.check-list { /* 펼쳐진 내용 */
    padding-left: 1.5em;
    margin-top: 0.5em;
}

/* --- 정보 박스 스타일 (logistics.html 등) --- */
.info-box {
    padding: var(--base-padding);
    margin-bottom: 1.5em;
    border-radius: 4px;
    border-left-width: 5px;
    border-left-style: solid;
}
.info-box h3, .info-box h4 { margin-top: 0; }
.info-box ul { padding-left: 15px; list-style: disc; }
/* 정보 박스 색상 테마 */
.info-box.accent-hotpot { background-color: #fff8e1; border-left-color: #ffc107; }
.info-box.accent-xiaomian { background-color: #e9f7ef; border-left-color: #28a745; }
.info-box.accent-local { background-color: #f4f6f8; border-left-color: #6c757d; }
.info-box.accent-night { background-color: #fff3cd; border-left-color: #ffc107; }
.info-box.accent-snack { background-color: #e9ecef; border-left-color: #6c757d; }

/* --- 숙소 지역 분석 스타일 (logistics.html) --- */
.location-analysis {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--base-padding);
    margin-bottom: var(--base-padding);
    background-color: #fff;
}
.location-analysis h3, .location-analysis h4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8em;
}
.location-analysis .rating { /* 평점 표시 */
    font-size: 0.9em;
    color: var(--warning-color);
    font-weight: bold;
    white-space: nowrap;
}
.location-analysis .rating i { color: inherit; margin-right: 2px; width: auto; }
.location-analysis ul { list-style: none; padding-left: 0; margin-top: 10px; }
.location-analysis li { margin-bottom: 0.5em; padding-left: 1.8em; position: relative; }
.location-analysis li > i { width: 1.3em; margin-right: 4px; position: absolute; left: 0; top: 0.25em; }
/* 장단점 아이콘 색상 */
.positive-icon { color: var(--success-color) !important; }
.negative-icon { color: var(--danger-color) !important; }
.warning-icon { color: var(--warning-color) !important; }

/* --- 모달 공통 스타일 --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: none; /* 기본 숨김 */
    justify-content: center;
    align-items: center;
    z-index: 1050; /* 다른 요소 위에 표시 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.modal-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}
.modal-content {
    background-color: var(--content-bg-color);
    padding: 1.5em 2em; /* 패딩 조정 */
    border-radius: var(--border-radius);
    max-width: 90%;
    width: 500px; /* 기본 너비 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.3s ease-out;
    max-height: 85vh; /* 최대 높이 */
    overflow-y: auto; /* 내용 많으면 스크롤 */
}
.modal-overlay.active .modal-content {
    transform: translateY(0); /* 활성화 시 부드럽게 나타남 */
}
.modal-content h3, .modal-content h4 { /* 모달 제목 */
    margin-top: 0;
    margin-bottom: 1.5em;
    color: var(--primary-color);
    text-align: center;
}
.modal-content h3 i, .modal-content h4 i { margin-right: 8px; }
.close-modal-btn { /* 모달 닫기 버튼 */
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.8em;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
}
.close-modal-btn:hover { color: #333; }
.modal-actions { /* 모달 하단 버튼 영역 */
    margin-top: 1.5em;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.modal-actions button {
    /* 기본 버튼 스타일 상속 */
    padding: 10px 20px;
    font-size: 1em;
}
/* 모달 내 폼 스타일 */
.modal-content form .form-group { margin-bottom: 1em; }
.modal-content form label { display: block; margin-bottom: 5px; font-weight: 500; font-size: 0.9em; }
.modal-content form input,
.modal-content form select,
.modal-content form textarea {
    /* 기본 입력 필드 스타일 상속 */
    font-size: 1em;
}

/* --- 프로젝트 선택 모달 (index.html) --- */
.project-select-modal-content { /* 기본 모달 콘텐츠 스타일 상속 */
    width: 350px; /* 너비 조정 */
}
#project-select-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 50vh; /* 목록 최대 높이 */
    overflow-y: auto;
}
#project-select-list li {
    margin-bottom: 8px;
}
#project-select-list button {
    width: 100%;
    padding: 10px 15px;
    font-size: 1em;
    text-align: left;
    background-color: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
#project-select-list button:hover {
    background-color: var(--primary-light-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* --- 금액 분할 모달 (settle.html) --- */
.split-modal-content { /* 기본 모달 콘텐츠 스타일 상속 */
    width: 400px; /* 너비 조정 */
}
.split-modal-content .total-amount-display {
    text-align: center;
    margin-bottom: 1.5em;
    font-size: 0.9em;
    color: var(--text-light-color);
}
.split-modal-content .total-amount-display strong {
    font-size: 1.2em;
    color: var(--text-color);
}
.split-modal-content .split-list {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5em;
}
.split-modal-content .split-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.split-modal-content .split-item label {
    flex-basis: 30%;
    text-align: right;
    font-size: 0.9em;
    color: var(--text-color);
    margin-bottom: 0;
}
.split-modal-content .split-item input {
    flex-grow: 1;
    padding: 6px 10px;
    font-size: 0.95em;
    text-align: right;
}
.split-modal-content .split-validation-message {
    text-align: center;
    color: var(--danger-color);
    font-size: 0.85em;
    min-height: 1.2em;
    margin-bottom: 1em;
}
.split-modal-actions button { /* 기본 모달 액션 버튼 스타일 상속 */
    padding: 8px 18px;
    font-size: 0.95em;
}/* --- 접기/펴기 섹션 (Collapsible Sections) --- */
details.collapsible-main-section,
details.collapsible-subsection,
details.collapsible-schedule {
    margin-bottom: 1.5em;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--content-bg-color);
    overflow: hidden;
}
details > summary {
    display: block;
    cursor: pointer;
    outline: none;
    padding: var(--base-padding);
    background-color: #f8f9fa;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
    list-style: none; /* 기본 마커 제거 */
}
details > summary::-webkit-details-marker { display: none; } /* Webkit 마커 제거 */
details > summary:hover { background-color: #e9ecef; }
details[open] > summary { border-bottom-color: var(--border-color); }

/* 메인 섹션 제목 */
details.collapsible-main-section > summary > h2 {
    display: inline-block;
    margin: 0;
    font-size: 1.4em;
    color: var(--primary-color);
    vertical-align: middle;
    max-width: calc(100% - 45px); /* +/- 기호 공간 확보 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
details.collapsible-main-section > summary > h2 i { margin-right: 8px; }
/* 메인 섹션 +/- 기호 */
details.collapsible-main-section > summary::after {
    content: '+';
    position: absolute;
    right: var(--base-padding);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8em;
    font-weight: bold;
    color: var(--primary-color);
    line-height: 1;
}
details[open].collapsible-main-section > summary::after {
    content: '\2212'; /* Minus Sign */
}
/* 메인 섹션 내용 */
details.collapsible-main-section > .section-content {
    padding: var(--base-padding);
}

/* 서브 섹션 제목 (예: 예산 하위 항목) */
details.collapsible-subsection > summary.subsection-summary {
    padding: calc(var(--base-padding) * 0.6) var(--base-padding);
    background-color: #f7f7f7;
    border-bottom: 1px solid var(--border-light-color);
}
details.collapsible-subsection > summary.subsection-summary:hover { background-color: #f0f0f0; }
details.collapsible-subsection > summary.subsection-summary > h3 {
    display: inline-block;
    margin: 0;
    font-size: 1.15em;
    color: var(--text-color);
    font-weight: 500;
}
details.collapsible-subsection > summary.subsection-summary > h3 i { color: var(--primary-color); margin-right: 6px; }
details[open].collapsible-subsection > summary.subsection-summary { border-bottom-color: #ddd; }
/* 서브 섹션 내용 */
.subsection-content {
    padding: 0.8em var(--base-padding) 0.5em var(--base-padding);
    margin-top: 0;
}
/* 예산 섹션 내부 스타일 초기화 */
.subsection-content .cost-section,
.subsection-content .user-budget-input-section {
    padding: 0; border: none; box-shadow: none; background: none; height: auto; margin-bottom: 0;
}

/* 스케줄 섹션 제목 (예: 2박 3일 코스) */
details.collapsible-schedule > summary.schedule-summary {
    padding: calc(var(--base-padding) * 0.8) var(--base-padding);
    font-size: 1.2em;
    font-weight: 500;
    color: var(--text-color);
}
details.collapsible-schedule > summary.schedule-summary i { color: var(--primary-color); margin-right: 8px; width: auto; }
details[open] > summary.schedule-summary { border-bottom: 1px solid transparent; }
/* 스케줄 섹션 화살표 기호 */
details.collapsible-schedule > summary.schedule-summary::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f078"; /* chevron-down */
    position: absolute;
    right: var(--base-padding);
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    transition: transform 0.2s ease;
    color: var(--primary-color);
}
details[open].collapsible-schedule > summary.schedule-summary::after {
    content: "\f077"; /* chevron-up */
}
/* 스케줄 섹션 내용 (테이블 포함) */
details.collapsible-schedule .table-responsive {
    padding: var(--base-padding);
    background-color: var(--content-bg-color);
    border-top: 1px solid var(--border-light-color);
}
details.collapsible-schedule .table-responsive > table { margin-bottom: 0; }

/* --- 유틸리티 클래스 --- */
.small-note { /* 작은 안내 문구 */
    font-size: 0.9em;
    color: var(--text-light-color);
    margin-top: 0.5em;
    padding-left: 1.8em;
    position: relative;
    line-height: 1.5;
}
.small-note i {
    position: absolute;
    left: 0;
    top: 0.3em; /* 아이콘 위치 미세 조정 */
    color: var(--text-light-color);
}
.rate-disclaimer-inline { /* 환율 표시 (인라인) */
    font-size: 0.8em;
    color: var(--text-light-color);
    margin-left: 10px;
}
.city-name-placeholder { /* 도시 이름 강조 (선택적) */
    font-weight: 500;
    /* color: var(--secondary-color); */ /* 색상 강조 필요 시 */
}

/* --- SortableJS 헬퍼 스타일 --- */
.sortable-ghost { /* 드래그 중인 요소의 원래 위치 표시 */
    opacity: 0.4;
    background-color: var(--primary-light-color);
}
.sortable-chosen { /* 드래그 중인 요소 자체 */
    cursor: grabbing !important;
}