body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #222;
}

.headline {
    margin-top: 25px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    padding: 20px 0;
    background-color: #d4ecf5;
    color: #003b5c;
    border-top: 3px solid #3399cc;
    border-bottom: 3px solid #3399cc;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 도 버튼 */
.region-filter {
    max-width: 1200px;
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.region-filter button {
    padding: 10px 18px;
    border: 2px solid #3399cc;
    border-radius: 25px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
}
.region-filter button.active {
    background-color: #3399cc;
    color: #fff;
}
.region-filter button small {
    display: block;
    font-size: 11px;
    color: #555;
}

/* 광고 테이블 */
.list-container {
    max-width: 1200px;
    margin: 20px auto 30px auto;
}
.list-item {
    display: flex;
    align-items: flex-start;
    padding: 15px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    gap: 15px;
    flex-wrap: wrap;
    border-top: 2px solid #3399cc;
    border-bottom: 2px solid #3399cc;
}
.thumb {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #a3cbe3;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thumb .company-name-top {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
}
.list-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 200px;
}
.list-header, .list-body {
    display: flex;
    align-items: center;
    padding: 4px 0;
}
.list-header div {
    padding: 6px 8px;
    font-size: 14px;
    font-weight: 600;
    border-right: 2px solid #3399cc;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-body div {
    padding: 6px 8px;
    font-size: 15px;
    border-right: 2px solid #3399cc;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 칼럼 크기 및 정렬 조정 */
.list-header .col-name, .list-body .col-name {
    flex: 1.5;
    text-align: center;
    border-left: 2px solid #3399cc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 6px 8px;
}

/* 업체명 (윗줄) */
.col-name .company-name {
    font-weight: 600;
    font-size: 14px;
    color: #003b5c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* 제목 (아랫줄) */
.col-name .company-title {
    font-size: 13px;
    color: #555;
    text-align: left;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 4px;
}

/* 기타 컬럼 */
.list-header .col-content, .list-body .col-content {
    flex: 5;
    text-align: center;
}
.list-header .col-address, .list-body .col-address {
    flex: 2.5;
    text-align: center;
}
.list-header .col-region, .list-body .col-region {
    flex: 1;
    text-align: center;
    white-space: normal;
}
.list-header .col-subregion, .list-body .col-subregion {
    flex: 1;
    text-align: center;
    white-space: normal;
}
.list-header .col-comments, .list-body .col-comments {
    flex: 0.5;
    text-align: center;
    border-right: none;
}

.list-separator {
    height: 2px;
    background: #3399cc;
    margin: 4px 0;
    border-radius: 1px;
    display: block;
}



@media (max-width: 768px) {
    .list-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .thumb {
        width: 100%;
        height: 180px;
    }
    .list-header, .list-body {
        flex-direction: column;
        align-items: flex-start;
    }
    .list-header div, .list-body div {
        text-align: left;
        width: 100%;
        border-right: none;
        border-left: none;
    }
}

/* Flash 메시지 */
.alert-message {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 800px;
    padding: 14px 20px;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    animation: fadeIn 0.6s ease-out;
    transition: opacity 0.5s ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 9999;
    background-color: #e0f8ec;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
    white-space: nowrap;
}

/* ========================================================= */
/* ✅ 추가된 커스텀 스타일들 */
/* ========================================================= */

/* 🔹 리스트 크기 살짝 축소 */
.list-container {
    max-width: 1100px; /* 기존 1200px -> 살짝 줄임 */
    margin: 15px auto 25px auto;
}

/* 🔹 광고 아이템 크기 조정 */
.list-item {
    padding: 12px;
    border-radius: 6px;
    gap: 10px;
    font-size: 14px;
}

/* 🔹 이미지 관련 설정 */
.thumb {
    width: 70px; /* 기존 80px */
    height: 70px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid #a3cbe3;
    position: relative;
}

/* 이미지가 있을 때 company-name-top 숨기기 */
.thumb img[src*="storage"] ~ .company-name-top {
    display: none;
}

/* 기본 이미지 (placeholder) 처리 */
.thumb img[src*="via.placeholder.com"] {
    background-color: #f0f8fc;
    object-fit: contain;
    padding: 8px;
}

/* 🔹 글이 길어져도 칸 고정 + ... 처리 + 툴팁 표시 */
.list-header div,
.list-body div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px; /* 고정 폭 지정 */
    position: relative;
}

/* 마우스 올렸을 때 전체 내용 툴팁 */
.list-body div:hover {
    overflow: visible;
}

.list-body div[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: 50%;
    top: -30px;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 999;
    pointer-events: none;
}

/* ========================================================= */
/* ✅ 칼럼 폭 및 가독성 재조정 */
/* ========================================================= */

/* 업체명 — 짧게 (약 5~6글자) */
.list-header .col-name,
.list-body .col-name {
    flex: 1.2;
    max-width: 100px;
    min-width: 80px;
}

/* 제목 — 가장 길게 */
.list-header .col-content,
.list-body .col-content {
    flex: 4;
    max-width: 450px;
}

/* 주소 — 그다음으로 넓게 */
.list-header .col-address,
.list-body .col-address {
    flex: 2;
    max-width: 220px;
}

/* 지역 — 3~4글자 정도 */
.list-header .col-subregion,
.list-body .col-subregion {
    flex: 0.8;
    max-width: 80px;
}

/* 댓글 — 작게 표시 */
.list-header .col-comments,
.list-body .col-comments {
    flex: 0.4;
    max-width: 60px;
    font-size: 13px;
    color: #555;
}

/* ========================================================= */
/* ✅ 칼럼 폭 및 가독성 재조정 (PC 기준) */
/* ========================================================= */

/* 업체명 — 짧게 (약 5~6글자) */
.list-header .col-name,
.list-body .col-name {
    flex: 1.2;
    max-width: 100px;
    min-width: 80px;
}

/* 제목 — 가장 길게 */
.list-header .col-content,
.list-body .col-content {
    flex: 4;
    max-width: 450px;
}

/* 주소 — 그다음으로 넓게 */
.list-header .col-address,
.list-body .col-address {
    flex: 2;
    max-width: 220px;
}

/* 지역 — 3~4글자 정도 */
.list-header .col-subregion,
.list-body .col-subregion {
    flex: 0.8;
    max-width: 80px;
}

/* 댓글 — 작게 표시 */
.list-header .col-comments,
.list-body .col-comments {
    flex: 0.4;
    max-width: 60px;
    font-size: 13px;
    color: #555;
}

/* ========================================================= */
/* ✅ 반응형 (모바일·태블릿 대응) */
/* ========================================================= */
@media (max-width: 768px) {

    /* 리스트 레이아웃 */
    .list-item {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
    }

    .thumb {
        width: 100%;
        height: 180px;
        border-radius: 6px;
    }

    .list-header, 
    .list-body {
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
    }

    .list-header div,
    .list-body div {
        width: 100%;
        max-width: 100%;
        border-right: none;
        border-left: none;
        text-align: left;
        font-size: 14px;
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 4px 2px;
    }

    /* 각 항목 구분 */
    .list-body div + div {
        border-top: 1px dotted #c8e0ef;
    }

    /* 작은 화면에서는 글자 크기 통일 */
    .col-name,
    .col-content,
    .col-address,
    .col-subregion,
    .col-comments {
        font-size: 14px !important;
    }

    /* 업체명 강조 */
    .col-name {
        font-weight: 600;
        color: #003b5c;
    }

    /* 댓글은 맨 아래 작게 */
    .col-comments {
        font-size: 12px !important;
        color: #666;
    }

    /* 리스트 간격 줄이기 */
    .list-container {
        padding: 0 10px;
    }

    /* 제목 강조 (모바일에서는 한 줄만 보여줌) */
    .col-content {
        font-weight: 600;
        color: #005a8d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ========================================================= */
/* ✅ 수정 요청 반영 버전 (툴팁, 지역 ellipsis, 이미지 정렬 개선) */
/* ========================================================= */

/* 1️⃣ ...이 풀려서 내용이 튀어나오지 않게 */
.list-body div {
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
}

/* 2️⃣ 툴팁만 표시 (hover 시 내용 노출 금지, 대신 말풍선만) */
.list-body div:hover {
    overflow: hidden !important; /* 내용 안 풀림 */
}
.list-body div[title]:hover::after {
    content: attr(title);
    position: absolute;
    left: 50%;
    top: -30px;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 999;
    pointer-events: none;
}

/* 3️⃣ 지역 글자 길면 ... 처리 */
.list-header .col-subregion,
.list-body .col-subregion {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* 4️⃣ 이미지 정렬 개선 — 수직/수평 중앙 & 꽉 차게 */
.thumb {
    display: flex;
    align-items: center;     /* 세로 가운데 */
    justify-content: center; /* 가로 가운데 */
    overflow: hidden;
    border: 2px solid #a3cbe3;
    border-radius: 8px;
    margin: 5px;            /* 여백 10~15px */
    width: 80px;
    height: 80px;
    background: #f0f8fc;
}
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* 이미지 꽉 채우기 */
    display: block;
}

/* 5️⃣ placeholder 이미지도 정렬 유지 */
.thumb img[src*="via.placeholder.com"] {
    object-fit: contain;
    background-color: #f0f8fc;
    padding: 8px;
}



/* ============================= */
/* 업체명 + 제목 한 줄로 강제 적용 */
/* ============================= */
.list-body .col-name,
.list-header .col-name {
    display: flex !important;
    flex-direction: row !important; /* 가로 정렬 */
    flex-wrap: nowrap !important;   /* 줄바꿈 금지 */
    align-items: center !important; /* 수직 가운데 */
}

.col-name .company-name,
.col-name .company-title {
    white-space: nowrap !important;   /* 줄바꿈 금지 */
    overflow: hidden !important;      /* 넘치면 숨김 */
    text-overflow: ellipsis !important; /* ... 처리 */
    margin-right: 4px !important;     /* 글자 간 간격 */
    display: inline-block !important;
}

#region-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    font-family: 'Noto Sans KR', sans-serif;
}

#region-filter button {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    color: #333;
}

#region-filter button.active {
    background-color: #3498db;
    color: #fff;
    border-color: #3498db;
}

#region-filter button:hover {
    background-color: #2980b9;
    color: #fff;
}

.toggle-region-btn {
    font-weight: bold;
    background-color: #f0f0f0 !important;
    border-color: #aaa !important;
}

.region-box {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
}

.region-box .region-item {
    font-size: 13px;
    padding: 8px 14px;
}

#region-filter {
    position: relative; /* regionBox의 기준점 */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* ✅ 전국 / 지역 선택 버튼 공통 스타일 */
#region-filter button {
    background: #fff;
    border: 1px solid #3399cc;
    color: #003b5c;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    min-width: 80px;
}

#region-filter button:hover {
    background: #3399cc;
    color: white;
}

/* ✅ 활성화된 버튼 */
#region-filter button.active {
    background: #3399cc;
    color: #fff;
    font-weight: bold;
}

/* ✅ 지역 목록 (토글 시 열림) */
.region-box {
    position: absolute;
    top: 100%; /* 버튼 바로 아래 */
    left: 50%;
    transform: translateX(-50%);
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #3399cc;
    border-radius: 8px;
    padding: 10px;
    width: 85%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    z-index: 1000; /* 리스트보다 위 */
}

/* ✅ 지역 목록 안의 개별 버튼 */
.region-box .region-item {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

.region-box .region-item:hover {
    background: #3399cc;
    color: #fff;
}