/* =================================================================
    기본 레이아웃 및 공통 스타일
   ================================================================= */

body {
    background-color: #f8f9fa;
}

body.location-ready #location-permission-alert {
    display: none !important;
}

.container {
    max-width: 500px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 12px;
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

/* =================================================================
    네비게이션 바 & 탭
   ================================================================= */
.navbar>.container {
    position: relative;
    justify-content: center;
}

.navbar>.container>div {
    position: absolute;
    right: 1rem;
}

.navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.nav-tabs .nav-item {
    flex-grow: 1;
    text-align: center;
}

.tab-content {
    padding-top: 0;
}

/* =================================================================
    홈 탭 UI 요소
   ================================================================= */
.slider-container {
    margin-top: 1rem;
}

.slider-label {
    margin-bottom: 0.5rem;
}

.slider-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#price-display-tag {
    visibility: hidden;
}

.price-display-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #f1f3f5;
    border-radius: 8px;
    margin-top: 1rem;
}

.price-label-group {
    display: flex;
    flex-direction: column;
}

#price-update-time {
    white-space: nowrap;
    font-size: 0.75rem;
}

#calculation-result {
    margin: 0.3rem 0 1rem;
    padding: 0.5rem 0;
}

#selected-station-name {
    font-weight: bold;
    font-size: 1.2rem;
    padding: 0.5rem;
}

/* =================================================================
    유종 태그 공통 스타일 (홈 & 환경설정 통합)
   ================================================================= */

/* --- 데스크톱 기본 스타일 (한 줄 가로) --- */
#home #fuel-tags-container {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    /* -- 아래는 상하 여백 높이 */
    gap: 0.0rem;
    margin-top: 0rem;
    overflow-x: none;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

#home .fuel-tags-row {
        display: flex;
        justify-content: flex-start;
        gap: 0.4rem;
}

/* --- 태그 기본 모양 --- */
.price-tag,
.select-btn {
    padding: 0.5rem 0.85rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
    user-select: none;
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- 태그 배경색 --- */
.price-tag.gasoline,
.select-btn.gasoline {
    background-color: #ffc107;
}

.price-tag.diesel,
.select-btn.diesel {
    background-color: #198754;
}

.price-tag.premium-gasoline,
.select-btn.premium-gasoline {
    background-color: #dc3545;
}

.price-tag.kerosene,
.select-btn.kerosene {
    background-color: #0dcaf0;
}

.price-tag.lpg,
.select-btn.lpg {
    background-color: #6f42c1;
}

/* --- 글자 테두리 --- */
.price-tag.gasoline,
.select-btn.gasoline.is-selected,
.price-tag.kerosene,
.select-btn.kerosene.is-selected {
    color: #000 !important;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.price-tag.premium-gasoline,
.select-btn.premium-gasoline.is-selected,
.price-tag.diesel,
.select-btn.diesel.is-selected,
.price-tag.lpg,
.select-btn.lpg.is-selected {
    color: #fff !important;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* --- 선택/미선택 상태 --- */
.select-btn:not(.is-selected) {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    text-shadow: none !important;
}

/* =================================================================
    검색 결과, 즐겨찾기, 가격 비교 탭 등
   ================================================================= */
.list-group-item {
    cursor: pointer;
}

.search-result-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.station-name {
    font-size: 0.9rem;
    font-weight: bold;
    display: block;
    margin-bottom: 0.25rem;
}

.address-distance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

.station-address {
    color: #495057;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.station-distance {
    font-size: 0.9rem;
    color: #d9480f;
    font-weight: bold;
    flex-shrink: 0;
}

.favorites-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.station-info {
    flex-grow: 1;
    margin-right: 1rem;
}

.station-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    white-space: nowrap;
}

.compare-item {
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: box-shadow 0.2s ease-in-out;
}

.compare-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.compare-item.border-primary {
    border-width: 2px;
    border-color: #0d6efd !important;
}

.compare-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.compare-item-name {
    font-weight: bold;
    font-size: 1.1rem;
    color: #212529;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #6c757d;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.detail-row .item-distance {
    font-weight: 500;
    color: #0d6efd;
}

.compare-item-total-cost {
    display: flex;
    flex-direction: row;
    /* 👈 세로 정렬(column)을 가로 정렬(row)로 변경 */
    justify-content: center;
    /* 👈 양 끝으로 정렬 */
    align-items: baseline;
    /* 👈 텍스트 기준선 정렬 */
    gap: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    /* 좌우 패딩을 조금 더 줌 */
    margin-top: 0.75rem;
    border: 1px solid #dee2e6;
}

.total-cost-label {
    font-size: 0.9rem;
    color: #495057;
    font-weight: 500;
    flex-shrink: 0;
    /* 글자가 찌그러지지 않도록 함 */
}

.total-cost-value {
    display: inline-flex;
    /* 내부 요소들을 정렬하기 위해 flex 사용 */
    align-items: baseline;
    justify-content: flex-end;
    /* 오른쪽 끝으로 정렬 */
    gap: 0.5rem;
    flex-wrap: nowrap;
    /* 줄바꿈 방지 */
}

.price-total {
    font-size: 1.3rem;
    /* 글자 크기 약간 조정 */
    font-weight: bold;
    color: #d9480f;
}

.price-diff {
    color: #dc3545;
    font-size: 0.9rem;
    /* 글자 크기 약간 조정 */
    font-weight: 500;
}

/* =================================================================
    광고 영역
   ================================================================= */
.ad-container {
    width: 100%;
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f1f3f5;
    border: 1px dashed #ced4da;
}

/* =================================================================
    모바일 화면 (768px 미만) 반응형 스타일
   ================================================================= */
@media (max-width: 767.98px) {
    .container {
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
    }

    /* --- 모바일 홈 탭 3행 3열 그리드 스타일 --- */
    #home #fuel-tags-container {
        display: flex;
        flex-direction: column;
        /* 행들을 세로로 쌓음 */
        overflow-x: hidden;
        /* 가로 스크롤 숨김 */
    }

    #home .fuel-tags-row {
        display: flex;
        gap: 0.2rem;
        /* 태그 사이의 가로 간격 */
    }

    /* 👇 [신규] 2행(여백)의 높이를 0.3rem으로 설정 */
    #home .fuel-tags-spacer-row {
        height: 0.2rem;
    }

    #home .fuel-tags-row .select-btn,
    #home .fuel-tags-row .fuel-tag-placeholder {
        flex: 1;
        /* 모든 칸이 동일한 너비를 갖도록 설정 */
        padding: 0.5rem 0.2rem;
        font-size: 0.75rem;
    }

    /* --- [수정] 끝 --- */

    /* 환경설정 탭 모바일 스타일 */
    #settings .select-btn {
        transform: scale(0.85);
        transform-origin: left center;
    }
}