html, body {
    height: 100%;
}

body {
    background: linear-gradient(135deg, #e0f7f4 0%, #0098b2 100%);
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-x: hidden;
}

.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    background: transparent;
}

.container.py-5 {
    padding-top: 0 !important;
}

.card-outer {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 4px 32px rgba(0,120,200,0.10);
    margin: 6vw 0 4vw 0;
    padding: 4vw 0 2vw 0;
    width: 340px;
    max-width: 96vw;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-title {
    font-size: 0.97rem;
    font-weight: 900;
    color: #0f5f7f;
    letter-spacing: -0.02em;
    text-align: left;
}

.main-desc {
    font-size: 0.89rem;
    color: #376777;
    text-align: left;
    margin-bottom: 1.2rem;
}

.header-block {
    width: 100%;
    max-width: 96vw;
    padding: 0 0.7rem;
}

.header-title {
    font-size: 1.7rem;
    font-weight: 900;
    color: #0098b2;
    background: linear-gradient(120deg, #006a7a 0%, #0098b2 5%, #00b0c8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
    margin: 0.2rem 0 0.45rem;
    text-align: left;
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
}

.header-title:hover {
    color: #008aa1;
    background: linear-gradient(120deg, #005a68 0%, #008aa1 5%, #00a4ba 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.visit-stats-inline {
    align-self: flex-end;
    margin: -0.2rem 0.6rem 0.6rem 0;
    text-align: right;
    color: #5a7c8a;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}


.campaign-card {
    box-shadow: 0 4px 24px rgba(33,150,243,0.10);
    border-radius: 16px;
    margin-bottom: 10px;
    background: #e8f2fc;
    padding: 0.7rem 0.7rem;
    max-width: 340px;
    min-width: 180px;
    margin-left: auto;
    margin-right: auto;
    min-height: unset;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    transition: box-shadow 0.2s, background 0.2s;
    flex-wrap: nowrap;
    gap: 10px;
}

.campaign-card:hover {
    box-shadow: 0 8px 32px rgba(33,150,243,0.16);
    background: #d0e3fa;
}

.card-left-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;
    flex-shrink: 0;
    gap: 4px;
}

.card-logo {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
}

.platform-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.55rem;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    min-width: 40px;
    text-align: center;
    white-space: nowrap;
}

.sns-chip {
    min-width: 44px;
    width: 44px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    white-space: nowrap;
}


.platform-dinnerqueen {
    background: #f96aa7;
}

.platform-gangnam {
    background: #ff8a00;
}

.platform-reviewnote {
    background: #2ec4b6;
}

.platform-fourblog {
    background: #c9a7ff;
}

.platform-seoulouba {
    background: #67a7f8;
}

.platform-unknown {
    background: #9e9e9e;
}

.card-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-width: 0;
}

.campaign-title {
    font-size: 0.91rem;
    font-weight: 600;
    color: #1565c0;
    margin: 0 0 2px 0;
    word-break: break-all;
    text-align: left;
    width: 100%;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campaign-title:hover {
    color: #1976d2;
    text-decoration: underline;
}

/* 툴팁 관련 코드 제거됨 */

.card-meta {
    font-size: 0.72rem;
    color: #7b8fa6;
    margin: 0 0 0 0;
    line-height: 1.2;
    font-weight: 400;
    white-space: nowrap;
}

/* possibleDaysTimes 스타일 */
.possible-days-times {
    color: #2e7d32 !important;
    font-size: 0.68rem;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 280px;
    position: relative;
}

.footer {
    text-align: center;
    margin-top: 3.5rem;
    color: #90caf9;
    font-size: 0.98rem;
}

.sns-label {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.55rem;
    font-weight: 600;
    color: white;
    line-height: 1;
    min-width: 40px;
    text-align: center;
    white-space: nowrap;
}

.sns-label i {
    font-size: 0.5rem;
}

.sns-clip {
    background: #30aff2;
    box-shadow: 0 2px 8px rgba(48, 175, 242, 0.2);
}

.sns-blog {
    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%); /* 연한 연두색 그라데이션 */
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
}

.sns-shorts {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%); /* 쇼츠 그라데이션 */
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
    font-size: 0.55rem; /* 다른 라벨들과 동일한 크기 */
    padding: 2px 6px; /* 다른 라벨들과 동일한 패딩 */
}

.sns-reels {
    background: #8830f2;
    box-shadow: 0 2px 8px rgba(136, 48, 242, 0.3);
}

.sns-insta {
    background: #b02bca;
    box-shadow: 0 2px 8px rgba(176, 43, 202, 0.2);
}

.sns-youtube {
    background: #ee5858;
    box-shadow: 0 2px 8px rgba(238, 88, 88, 0.25);
}

.sns-etc {
    background: #9aa7b2;
    box-shadow: 0 2px 8px rgba(154, 167, 178, 0.25);
}

@media (max-width: 600px) {
    .container { 
        max-width: 100%; 
        min-width: unset; 
        padding: 12px 0 8px 0; 
    }
    .card-outer { 
        width: 98vw; 
        min-width: unset; 
        max-width: 99vw; 
        padding: 18px 0 12px 0; 
    }
    .campaign-card { 
        max-width: 95vw; 
        min-width: 0; 
        padding: 0.9rem 0.7rem; 
    }
    .filter-section {
        padding: 0.9rem 0.1rem;
        margin-bottom: 0.8rem;
        width: 95vw;
        margin-left: auto;
        margin-right: auto;
    }
    .search-container {
        padding: 0.4rem 0.6rem;
    }
    .filter-buttons {
        gap: 0.4rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 0 0.6rem;
    }
    .sort-buttons {
        gap: 0.4rem;
    }
    .filter-btn {
        padding: 0.25rem 0.6rem;
        font-size: 0.68rem;
        min-width: 0;
        width: 100%;
    }
    .filter-btn i {
        font-size: 0.65rem;
    }
    .result-count {
        font-size: 0.68rem;
        padding: 0.4rem;
    }
    .result-count i {
        font-size: 0.65rem;
    }
    .visit-stats-inline {
        font-size: 0.66rem;
    }
}

@media (min-width: 601px) {
    .card-outer {
        width: 95vw;
        max-width: 1600px;
        min-width: 0;
        padding: 1.5vw 0 1vw 0;
    }
    .campaign-card {
        max-width: 98%;
        min-width: 0;
        padding: 1.2rem 1.5rem;
    }
    .campaign-title {
        font-size: 1.1rem;
        white-space: normal;
        line-height: 1.5;
    }
    .card-meta {
        font-size: 0.9rem;
    }
    .filter-section {
        width: 98%;
        max-width: 1600px;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
    }
    .filter-buttons {
        gap: 1rem;
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    .sort-buttons {
        gap: 0.8rem;
    }
    .filter-buttons {
        justify-content: start;
    }
    .possible-days-times {
        font-size: 1.0rem;
        max-width: 700px;
    }
}

@media (min-width: 1200px) {
    .card-outer {
        width: 98vw;
        max-width: 1800px;
        min-width: 1000px;
    }
    .campaign-card {
        min-width: 980px;
        padding: 1.5rem 2rem;
    }
    .campaign-title {
        font-size: 1.2rem;
    }
    .card-meta {
        font-size: 1rem;
    }
    .possible-days-times {
        max-width: 1200px;
    }
}

/* 필터 및 검색 스타일 */
.filter-section {
    background: #e8f2fc;
    border-radius: 16px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 24px rgba(33,150,243,0.10);
    transition: box-shadow 0.2s, background 0.2s;
    box-sizing: border-box;
}

/* 검색/필터 섹션은 호버 효과 제거 */

.search-section {
    margin-bottom: 0.8rem;
}

.search-container {
    margin: 0.5rem;
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 16px;
    padding: 0.5rem 0.7rem;
    box-shadow: 0 4px 24px rgba(33,150,243,0.10);
    transition: box-shadow 0.2s, background 0.2s;
    border: 1px solid transparent;
}

.search-container:focus-within {
    box-shadow: 0 8px 32px rgba(33,150,243,0.16);
    background: #f8fbff;
    border-color: #1976d2;
}

/* 검색 아이콘 제거됨 */

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: #1565c0;
    font-size: 0.91rem;
    font-weight: 600;
    outline: none;
    padding: 0.3rem 0;
    width: 100%;
    min-width: 0;
}

.search-input::placeholder {
    color: #7b8fa6;
    font-weight: 400;
}

.clear-search {
    background: none;
    border: none;
    color: #7b8fa6;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.3rem;
    margin-right: 0.3rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.clear-search:hover {
    background: rgba(25, 118, 210, 0.1);
    color: #1976d2;
}

.search-btn {
    background: #1976d2;
    border: none;
    color: white;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.5rem;
    margin-right: 0.3rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.search-btn:hover {
    background: #1565c0;
    transform: scale(1.05);
}

.filter-title {
    font-size: 0.72rem;
    font-weight: 400;
    color: #7b8fa6;
    margin-bottom: 0.8rem;
    text-align: center;
    line-height: 1.2;
}

.filter-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(32px, auto);
    gap: 0.5rem 0.6rem;
    justify-content: start;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.8rem;
    margin: 0.6rem 0 0.8rem;
}

@media (min-width: 601px) {
    .filter-buttons {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-template-rows: 1fr;
    }
}

.sort-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.sort-btn {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid #1976d2;
    background: #e8f2fc;
    color: #1976d2;
    font-size: 0.72rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.sort-btn:hover {
    background: #1976d2;
    color: #fff;
}

.sort-btn.active {
    background: #1976d2;
    color: #fff;
}

.sort-icons {
    display: inline-flex;
    flex-direction: column;
    font-size: 0.8rem;
    gap: 0;
}

.sort-icon {
    opacity: 0.4;
    line-height: 0.6;
    margin: -1px 0;
}

.sort-icon.active {
    opacity: 1;
}

.filter-btn {
    padding: 0.3rem 0.8rem;
    border: 1px solid #cfe3fb;
    border-radius: 16px;
    background: #e8f2fc;
    color: #1565c0;
    font-size: 0.72rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.08);
    min-width: 60px;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}

.filter-btn:hover {
    background: #dbeafb;
    border-color: #1976d2;
    box-shadow: 0 4px 16px rgba(25, 118, 210, 0.12);
}

.filter-btn.active {
    background: #1976d2;
    color: white;
    border-color: #1976d2;
    box-shadow: 0 4px 16px rgba(25, 118, 210, 0.2);
}

.filter-btn i {
    font-size: 0.7rem;
}

.filter-btn.sns-filter-btn {
    border-radius: 999px;
    font-weight: 600;
    border-color: currentColor;
    box-shadow: none;
}

.filter-btn.sns-filter-btn:hover,
.filter-btn.sns-filter-btn.active {
    background: var(--sns-color);
    border-color: var(--sns-color);
    color: #fff;
    box-shadow: none;
}

.sns-all-btn {
    --sns-color: #6c757d;
    color: #6c757d;
}

.sns-clip-btn {
    --sns-color: #30aff2;
    color: #30aff2;
}

.sns-blog-btn {
    --sns-color: #4caf50;
    color: #4caf50;
}

.sns-shorts-btn {
    --sns-color: #ff8a4d;
    color: #ff8a4d;
}

.sns-reels-btn {
    --sns-color: #8830f2;
    color: #8830f2;
}

.sns-insta-btn {
    --sns-color: #b02bca;
    color: #b02bca;
}

.sns-youtube-btn {
    --sns-color: #ee5858;
    color: #ee5858;
}

.sns-etc-btn {
    --sns-color: #9aa7b2;
    color: #9aa7b2;
}

.result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
}

.result-count {
    text-align: left;
    font-size: 0.72rem;
    color: #7b8fa6;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
    padding: 0;
}

.result-bar .sort-buttons {
    margin-left: auto;
}

.pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0.8rem 0 0.6rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
}

.page-btn {
    color: #9aa7b2;
    background: transparent;
    border: none;
    padding: 2px 4px;
    min-width: 20px;
    text-align: center;
    text-decoration: none;
    line-height: 1.4;
    font-size: 0.86rem;
    font-weight: 600;
    transition: color 0.15s ease;
}

.page-btn:hover {
    color: #1976d2;
}

.page-btn.active {
    color: #1976d2;
    font-weight: 700;
}

.page-btn.disabled {
    pointer-events: none;
    color: #c0c7ce;
}

.page-ellipsis {
    color: #b0bac5;
    padding: 0 2px;
}

.page-status {
    color: #98a4af;
    font-weight: 600;
    font-size: 0.72rem;
    margin-right: 0.2rem;
}

.pagination-status {
    text-align: center;
    color: #98a4af;
    font-weight: 600;
    font-size: 0.72rem;
    margin: 0.2rem 0 0.6rem;
}

.page-blank {
    min-width: 20px;
    display: inline-block;
    height: 1em;
}

.result-count i {
    color: #1565c0;
    font-size: 0.7rem;
}

.no-results {
    text-align: center;
    color: #7b8fa6;
    padding: 2rem 1rem;
    background: #e8f2fc;
    border-radius: 16px;
    margin: 1rem 0;
    box-shadow: 0 4px 24px rgba(33,150,243,0.10);
    transition: box-shadow 0.2s, background 0.2s;
}

/* 검색 결과 없음 섹션도 호버 효과 제거 */

.no-results-icon {
    font-size: 2rem;
    margin-bottom: 0.8rem;
    opacity: 0.8;
}

.no-results-title {
    font-size: 0.91rem;
    font-weight: 600;
    color: #1565c0;
    margin-bottom: 0.3rem;
}

.no-results-desc {
    font-size: 0.72rem;
    color: #7b8fa6;
    line-height: 1.2;
}

@media (min-width: 1600px) {
    .card-outer {
        width: 100%;
        max-width: 2000px;
        min-width: 1200px;
    }
    .campaign-card {
        min-width: 1180px;
    }
    .campaign-title {
        font-size: 1.3rem;
    }
    .card-meta {
        font-size: 1.1rem;
    }
}