/* ===== SitePick Top10 Widget v4 ===== */

.sp-top10-widget{
    position:relative;
    overflow:hidden;
    border:1px solid #dfe7f1;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 26px rgba(15,23,42,.055);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sp-top10-widget:hover{
    transform:translateY(-2px);
    border-color:#c9daf0;
    box-shadow:0 14px 34px rgba(15,23,42,.085);
}

.sp-top10-head{
    min-height:54px;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border-bottom:1px solid #e9eef5;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

.sp-top10-title{
    display:flex;
    align-items:center;
    min-width:0;
    gap:10px;
}

.sp-top10-emoji{
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #d9e7fb;
    border-radius:11px;
    background:#edf5ff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
    font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
    font-size:20px;
    line-height:1;
}

.sp-top10-title strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#111827;
    font-size:17px;
    font-weight:850;
    letter-spacing:-.45px;
}

.sp-top10-more{
    width:30px;
    height:30px;
    flex:0 0 30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    color:#7f8da1!important;
    background:#fff;
    border:1px solid #e5ebf3;
    font-size:19px;
    font-weight:800;
    line-height:1;
    text-decoration:none!important;
    transition:.18s ease;
}
.sp-top10-more:hover{
    color:#1677ff!important;
    border-color:#bad5fa;
    background:#eef6ff;
}

.sp-top10-list{
    list-style:none;
    margin:0;
    padding:8px 12px 10px;
}

.sp-top10-item{
    min-height:33px;
    padding:0 7px;
    display:flex;
    align-items:center;
    gap:9px;
    border-radius:10px;
    transition:background .15s ease;
}
.sp-top10-item:hover{
    background:#f6f9fd;
}

.sp-top10-rank{
    width:25px;
    height:25px;
    flex:0 0 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    color:#718096;
    background:#f4f6f9;
    font-size:11px;
    font-weight:850;
    line-height:1;
}

/* 1~3위 강조 */
.sp-top10-item:nth-child(1) .sp-top10-rank{
    color:#7a4b00;
    background:linear-gradient(135deg,#ffe7a3,#ffd36a);
    box-shadow:0 2px 7px rgba(226,157,26,.18);
}
.sp-top10-item:nth-child(2) .sp-top10-rank{
    color:#4f5c6c;
    background:linear-gradient(135deg,#eef2f6,#dce3ea);
    box-shadow:0 2px 7px rgba(90,105,122,.12);
}
.sp-top10-item:nth-child(3) .sp-top10-rank{
    color:#7b431e;
    background:linear-gradient(135deg,#f1c2a0,#dea276);
    box-shadow:0 2px 7px rgba(164,96,48,.14);
}

.sp-top10-link{
    min-width:0;
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#1f2937!important;
    font-size:14px;
    font-weight:750;
    letter-spacing:-.2px;
    text-decoration:none!important;
    transition:color .15s ease;
}
.sp-top10-link:hover{
    color:#1677ff!important;
}

.sp-top10-empty{
    color:#a2adbb!important;
    font-weight:650;
}

.sp-top10-status{
    width:48px;
    flex:0 0 48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:18px;
    padding:0 4px;
    border-radius:5px;
    font-size:9px;
    font-weight:800;
    line-height:1;
    letter-spacing:-.1px;
    white-space:nowrap;
}
.sp-status-new{
    background:#eaf3ff;
    color:#1677ff;
}
.sp-status-changed{
    background:#fff4df;
    color:#b86b00;
}
.sp-status-offline{
    background:#fff0f1;
    color:#c43d4b;
}
.sp-top10-widget .btn-wset{
    padding:0 14px 10px;
    text-align:right;
}

/* 모바일 2열에서도 정보 밀도 유지 */
@media(max-width:575px){
    .sp-top10-widget{
        border-radius:13px;
        box-shadow:0 5px 16px rgba(15,23,42,.05);
    }
    .sp-top10-widget:hover{
        transform:none;
    }
    .sp-top10-head{
        min-height:45px;
        padding:0 9px;
    }
    .sp-top10-title{
        gap:6px;
    }
    .sp-top10-emoji{
        width:28px;
        height:28px;
        flex-basis:28px;
        border-radius:8px;
        font-size:15px;
    }
    .sp-top10-title strong{
        font-size:13px;
        letter-spacing:-.25px;
    }
    .sp-top10-more{
        width:24px;
        height:24px;
        flex-basis:24px;
        border-radius:7px;
        font-size:15px;
    }
    .sp-top10-list{
        padding:6px 6px 8px;
    }
    .sp-top10-item{
        min-height:28px;
        padding:0 4px;
        gap:5px;
        border-radius:7px;
    }
    .sp-top10-rank{
        width:20px;
        height:20px;
        flex-basis:20px;
        border-radius:6px;
        font-size:9px;
    }
    .sp-top10-link{
        font-size:11.5px;
        font-weight:750;
    }
    .sp-top10-status{
        width:40px;
        flex-basis:40px;
        height:15px;
        padding:0 3px;
        border-radius:4px;
        font-size:7px;
    }
    .sp-top10-widget .btn-wset{
        padding:0 8px 7px;
    }
}

/* ===== SitePick Top20 Modal v5 ===== */
.sp-top10-more{
    appearance:none;
    -webkit-appearance:none;
    padding:0;
    cursor:pointer;
    font-family:inherit;
}

.sp-modal-lock{
    overflow:hidden!important;
}

.sp-top20-modal{
    position:fixed;
    inset:0;
    z-index:99999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:22px;
}
.sp-top20-modal.is-open{
    display:flex;
}
.sp-top20-backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.52);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}
.sp-top20-dialog{
    position:relative;
    z-index:1;
    width:min(640px,100%);
    max-height:min(760px,88vh);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid #dbe5ef;
    border-radius:20px;
    background:#fff;
    box-shadow:0 28px 70px rgba(15,23,42,.22);
    animation:spTop20Pop .18s ease-out;
}
@keyframes spTop20Pop{
    from{opacity:0;transform:translateY(8px) scale(.985)}
    to{opacity:1;transform:none}
}

.sp-top20-modal-head{
    min-height:70px;
    padding:14px 16px 14px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border-bottom:1px solid #e8eef5;
    background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
}
.sp-top20-modal-title{
    min-width:0;
    display:flex;
    align-items:center;
    gap:11px;
}
.sp-top20-modal-emoji{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #d9e7fb;
    border-radius:12px;
    background:#edf5ff;
    font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
    font-size:21px;
}
.sp-top20-modal-title strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#172033;
    font-size:18px;
    font-weight:900;
    letter-spacing:-.45px;
}
.sp-top20-modal-title span:not(.sp-top20-modal-emoji){
    display:block;
    margin-top:3px;
    color:#8a98aa;
    font-size:10.5px;
}
.sp-top20-close{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:10px;
    background:#f2f5f9;
    color:#6e7d90;
    font-family:Arial,sans-serif;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    transition:.15s ease;
}
.sp-top20-close:hover{
    background:#e9eef5;
    color:#26364a;
}

.sp-top20-search-wrap{
    position:relative;
    padding:12px 16px;
    border-bottom:1px solid #edf1f5;
    background:#fff;
}
.sp-top20-search-icon{
    position:absolute;
    left:29px;
    top:50%;
    width:16px;
    height:16px;
    color:#8b99aa;
    transform:translateY(-50%);
    pointer-events:none;
}
.sp-top20-search-icon svg{
    width:100%;
    height:100%;
    display:block;
}
.sp-top20-search{
    width:100%;
    height:42px;
    padding:0 14px 0 38px;
    border:1px solid #dce5ef;
    border-radius:11px;
    outline:0;
    background:#f8fbff;
    color:#1f2937;
    font-size:12px;
    transition:.15s ease;
}
.sp-top20-search:focus{
    border-color:#9cc7ff;
    background:#fff;
    box-shadow:0 0 0 3px rgba(22,119,255,.08);
}
.sp-top20-search::placeholder{
    color:#9ba7b5;
}

.sp-top20-list{
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:8px 12px 12px;
}
.sp-top20-row{
    min-height:48px;
    padding:6px 8px;
    display:flex;
    align-items:center;
    gap:10px;
    border-bottom:1px solid #f0f3f7;
    border-radius:9px;
    color:inherit!important;
    text-decoration:none!important;
    transition:background .14s ease;
}
.sp-top20-row:hover{
    background:#f5f9fe;
}
.sp-top20-row[hidden]{
    display:none!important;
}
.sp-top20-rank{
    width:28px;
    height:28px;
    flex:0 0 28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#f2f5f8;
    color:#6f7f92;
    font-size:10.5px;
    font-weight:900;
}
.sp-top20-row:nth-of-type(1) .sp-top20-rank{
    color:#7a4b00;
    background:linear-gradient(135deg,#ffe7a3,#ffd36a);
}
.sp-top20-row:nth-of-type(2) .sp-top20-rank{
    color:#4f5c6c;
    background:linear-gradient(135deg,#eef2f6,#dce3ea);
}
.sp-top20-row:nth-of-type(3) .sp-top20-rank{
    color:#7b431e;
    background:linear-gradient(135deg,#f1c2a0,#dea276);
}
.sp-top20-site{
    min-width:0;
    flex:1;
    display:flex;
    align-items:center;
    gap:10px;
}
.sp-top20-site strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#1c2738;
    font-size:13px;
    font-weight:800;
}
.sp-top20-site small{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#93a0b0;
    font-size:10.5px;
}
.sp-top20-status{
    width:48px;
    flex:0 0 48px;
    height:18px;
    padding:0 4px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
    font-size:8px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
}.sp-top20-go{
    width:27px;
    height:27px;
    flex:0 0 27px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #e2e9f1;
    border-radius:8px;
    background:#fff;
    color:#75859a;
    font-size:13px;
}
.sp-top20-empty,
.sp-top20-noresult{
    padding:42px 15px;
    text-align:center;
    color:#8f9bab;
    font-size:12px;
}

@media(max-width:575px){
    .sp-top20-modal{
        align-items:flex-end;
        padding:0;
    }
    .sp-top20-dialog{
        width:100%;
        max-height:88vh;
        border-radius:19px 19px 0 0;
        border-bottom:0;
    }
    .sp-top20-modal-head{
        min-height:64px;
        padding:12px 12px 12px 14px;
    }
    .sp-top20-modal-emoji{
        width:36px;
        height:36px;
        flex-basis:36px;
        border-radius:10px;
        font-size:18px;
    }
    .sp-top20-modal-title strong{
        font-size:16px;
    }
    .sp-top20-modal-title span:not(.sp-top20-modal-emoji){
        font-size:9.5px;
    }
    .sp-top20-close{
        width:32px;
        height:32px;
        flex-basis:32px;
    }
    .sp-top20-search-wrap{
        padding:10px 12px;
    }
    .sp-top20-search-icon{
        left:25px;
    }
    .sp-top20-search{
        height:40px;
        font-size:16px; /* iOS Safari input focus auto-zoom 방지 */
    }
    .sp-top20-list{
        padding:6px 8px 14px;
    }
    .sp-top20-row{
        min-height:45px;
        padding:5px 6px;
        gap:7px;
    }
    .sp-top20-rank{
        width:25px;
        height:25px;
        flex-basis:25px;
        border-radius:7px;
        font-size:9.5px;
    }
    .sp-top20-site{
        display:block;
    }
    .sp-top20-site strong{
        display:block;
        font-size:12px;
    }
    .sp-top20-site small{
        display:block;
        margin-top:1px;
        font-size:9px;
    }
    .sp-top20-status{
        width:40px;
        flex-basis:40px;
        height:16px;
        padding:0 3px;
        font-size:7px;
    }
    .sp-top20-go{
        width:25px;
        height:25px;
        flex-basis:25px;
        font-size:12px;
    }
}


/* ===== SitePick Top20 Modal scroll fix v7 ===== */

/* 블러는 PC에서도 스크롤 합성 비용이 커질 수 있어 제거 */
.sp-top20-backdrop{
    background:rgba(15,23,42,.56) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

/* 모달 자체는 고정 높이 안에서 header/search/list를 정확히 분리 */
.sp-top20-dialog{
    height:min(760px, calc(100dvh - 44px));
    max-height:min(760px, calc(100dvh - 44px)) !important;
    overflow:hidden !important;
}

/* 실제 스크롤은 목록 영역만 담당 */
.sp-top20-list{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    scroll-behavior:auto !important;
    scrollbar-gutter:stable;
}

/* PC 스크롤바도 조금 다루기 쉽게 */
.sp-top20-list::-webkit-scrollbar{
    width:9px;
}
.sp-top20-list::-webkit-scrollbar-track{
    background:transparent;
}
.sp-top20-list::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border:2px solid #fff;
    border-radius:999px;
}
.sp-top20-list::-webkit-scrollbar-thumb:hover{
    background:#aebdce;
}

/* 헤더와 검색은 줄어들지 않게 고정 */
.sp-top20-modal-head,
.sp-top20-search-wrap{
    flex:0 0 auto;
}

@media(max-width:575px){
    .sp-top20-dialog{
        height:88dvh;
        max-height:88dvh !important;
    }

    .sp-top20-list{
        padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important;
    }
}


/* ===== SitePick Top20 row touch-scroll fix v8 ===== */

/* 행 전체는 링크가 아니라 일반 스크롤 영역 */
.sp-top20-row{
    touch-action:pan-y;
    -webkit-user-select:none;
    user-select:none;
}

/* 가운데 정보 영역은 스크롤 제스처를 방해하지 않음 */
.sp-top20-site{
    pointer-events:none;
}

/* 상태 배지도 터치 스크롤을 가로채지 않음 */
.sp-top20-status{
    pointer-events:none;
}

/* 오른쪽 화살표만 실제 링크 */
.sp-top20-go{
    text-decoration:none!important;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
}

/* URL 없는 항목 */
.sp-top20-go-disabled{
    opacity:.35;
    cursor:default;
    pointer-events:none;
}

/* 모바일에서 빈 공간을 잡고 움직여도 목록 스크롤 우선 */
@media(max-width:575px){
    .sp-top20-row{
        touch-action:pan-y;
    }

    .sp-top20-site{
        pointer-events:none;
    }
}


/* ===== SitePick Top10 준비중 화면 v12 ===== */
.sp-top10-preparing{
    min-height:340px;
    padding:28px 20px 34px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

.sp-top10-preparing-icon{
    width:58px;
    height:58px;
    margin-bottom:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #dbe8f8;
    border-radius:18px;
    background:#f1f7ff;
    font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
    font-size:29px;
    line-height:1;
}

.sp-top10-preparing-image{
    width:min(170px,70%);
    height:92px;
    margin-bottom:16px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sp-top10-preparing-image img{
    display:block;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.sp-top10-preparing strong{
    color:#1d2939;
    font-size:15px;
    font-weight:850;
    letter-spacing:-.3px;
}

.sp-top10-preparing p{
    max-width:260px;
    margin:8px 0 0;
    color:#8a98aa;
    font-size:11px;
    line-height:1.6;
}

/* 준비중일 때 화살표가 없어도 헤더 균형 유지 */
.sp-top10-head:has(+ .sp-top10-preparing){
    padding-right:16px;
}

@media(max-width:575px){
    .sp-top10-preparing{
        min-height:285px;
        padding:22px 12px 26px;
    }

    .sp-top10-preparing-icon{
        width:48px;
        height:48px;
        margin-bottom:12px;
        border-radius:14px;
        font-size:24px;
    }

    .sp-top10-preparing-image{
        width:min(120px,72%);
        height:68px;
        margin-bottom:12px;
    }

    .sp-top10-preparing strong{
        font-size:12px;
    }

    .sp-top10-preparing p{
        max-width:180px;
        margin-top:6px;
        font-size:9.5px;
        line-height:1.55;
    }
}

/* ===== SitePick Top10 준비중 안내 v15 ===== */
.sp-top10-preparing{
    min-height:338px;
    padding:0 18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:#fff;
}
.sp-top10-preparing-note{
    padding:0;
    border:0;
    background:transparent;
}
.sp-top10-preparing-note strong{
    display:block;
    color:#1f2937;
    font-size:14px;
    font-weight:800;
    letter-spacing:-.35px;
}
.sp-top10-preparing-note p{
    margin:7px 0 0;
    color:#94a3b8;
    font-size:11px;
    line-height:1.55;
}
.sp-top10-preparing-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:24px;
    margin-top:14px;
    padding:0 10px;
    border:1px solid #dbeafe;
    border-radius:999px;
    background:#f4f8ff;
    color:#3b82f6;
    font-size:10px;
    font-weight:700;
    line-height:1;
}
.sp-top10-head:has(+ .sp-top10-preparing){padding-right:16px;}
@media(max-width:575px){
    .sp-top10-preparing{min-height:320px;padding:0 14px;}
    .sp-top10-preparing-note strong{font-size:13px;}
    .sp-top10-preparing-note p{font-size:10px;}
    .sp-top10-preparing-badge{height:23px;margin-top:12px;font-size:9.5px;}
}


/* ===== SitePick 카테고리 고유 설명 ===== */
.sp-top20-description{
    flex:0 0 auto;
    margin:0;
    padding:11px 18px;
    border-bottom:1px solid #edf1f5;
    background:#fbfdff;
    color:#718096;
    font-size:11px;
    line-height:1.65;
    letter-spacing:-.15px;
    word-break:keep-all;
}

@media(max-width:575px){
    .sp-top20-description{
        padding:9px 14px;
        font-size:10px;
        line-height:1.6;
    }
}