@charset "utf-8";

/* 전체 레이아웃 기준 폭 및 패딩 통일 */
#hd_comm_inner { 
    max-width: 1280px !important; 
    margin: 10px auto 0 !important; 
    padding: 0 10px !important;
    box-sizing: border-box !important;
}

/* 게시판 상단 타이틀 */
.f9_box01 {
    background-color: #fff;
    border: 1px solid #dfdfdf;
    margin-top: 5px;
    margin-bottom: 30px;
    box-sizing: border-box;
}

.main_link_tit {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    padding: 0 20px;
    font-size: 18px; /* 16px -> 18px 확대 */
    font-weight: 900;
    line-height: 1.4;
}

.main_link_tit img {
    display: block;
    max-height: 24px;
    width: auto;
}

@media (max-width: 768px){
    #motelegram { text-align:center; width:100%; margin:0 auto 10px; padding:10px; background:#f4f4f4; border:1px solid #dfdfdf; }
    #motelegram a { font-size:16px; font-family:'Noto Sans KR'; font-weight:900; } /* 14px->16px, 굵기 강화 */
    #motelegram img { width:22px; height:auto; }
}

/* =========================
   배너 공통
========================= */

.main_banner_title {text-align:center; margin:20px 0;}
.main_banner_title h2 {display:inline-block;font-size:28px;font-weight:900;letter-spacing:-0.08rem;line-height: 34px;vertical-align: middle; margin: 5px 0;} /* 24px -> 28px 확대 */
.main_banner_title .icon_main_banner_title {display:inline-block;vertical-align: middle;margin-top:-2px;}
.main_banner_title .icon_main_banner_title img {width:34px}
.main_banner_title .icon_main_banner_title:first-child {margin-right:5px;}
.main_banner_title .icon_main_banner_title:last-child {margin-left:5px;}
.main_banner_title h2 span {color:#00bfff;}
.main_banner_title2 {color:#444; font-size:16px; font-weight:700; text-align:center; margin-top:6px; margin-bottom:35px;} /* 서브 타이틀 폰트 추가 및 키움 */

@media (max-width: 767px) {
    .main_banner_title {margin:10px 0 0px}
    .main_banner_title h2 {font-size:21px;} /* 모바일 타이틀 확대 */
    .main_banner_title .icon_main_banner_title:first-child {margin-right:0;}
    .main_banner_title .icon_main_banner_title:last-child {margin-left:0;}
    .main_banner_title .icon_main_banner_title img {width:22px;}
}

.main-banners{
    display:grid;
    gap:10px;
    justify-content:center;
    margin-bottom:10px;
}

.main-banner{
    display:block;
    width:100%;
    overflow:hidden;
    background:#f4f4f4;
}

.main-banner img{
    display:block;
    width:100%;
}

/* =========================
   PC 전용 레이아웃 (769px 이상)
========================= */
@media (min-width: 769px) {
    .main-banners-long {
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3px !important;
    }

    .main-banners-long .main-banner-long {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 2px !important;
    }

    .main-banners-long .main-banner-long img {
        width: 100% !important;
        height: 100px !important;
        object-fit: fill !important;
    }

    .main-banners-basic {
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 3px !important;
    }

    .main-banner-basic {
        width: 100% !important;
        max-width: 100% !important;
    }

    .main-banners-basic .main-banner-basic img {
        width: 100% !important;
        height: 100px !important;
        object-fit: fill !important;
    }
}

/* ===============================
   TOP10 GRID (시작선 정렬 맞춤)
================================ */

.rank10-grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:10px;
    width: 100%;
    box-sizing: border-box;
}

.rank10-card{
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:12px;
    overflow:hidden;
    min-width:0;
    box-sizing: border-box;
}

.rank10-head{
    padding:0;
    border-bottom:1px solid #e6e6e6;
}

.rank10-head-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 12px 10px;
    text-decoration:none;
    color:#111;
}

.rank10-head-link:hover .rank10-title-text{
    color:#d30000;
}

.top10-badge{
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.top10-badge img{
    display:block;
    width:100%;
    height:auto;
}

.rank10-title{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:18px; /* 16px -> 18px 확대 */
    font-weight:900;
    color:#111;
    margin:0;
    min-width:0;
    flex:1 1 auto;
}

.rank10-title-text{
    display:block;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.rank10-more{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.rank10-more img{
    display:block;
    width:100%;
    height:auto;
}

.rank10-list{
    list-style:none;
    margin:0;
    padding:10px 8px 10px;
    display:grid;
    gap:6px 6px; /* 간격 살짝 넓힘 */
}

.rank10-list li{
    margin:0;
    padding:0;
    overflow:hidden;
}

/* =========================================================
   TOP10 1위~10위 시작선 및 규격 통일 설정
========================================================= */

.rank10-list li a {
    pointer-events: none;
    cursor: default;
}

.rank10-list li a .rank10-name {
    pointer-events: auto;
    cursor: pointer;
}

.rank10-list li:nth-child(1),
.rank10-list li:nth-child(2),
.rank10-list li:nth-child(3) {
    position: relative;
    overflow: hidden;
    border-radius: 4px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    margin-bottom: 5px !important;
}

.rank10-list li:nth-child(1) {
    border: 1px solid #d4af37 !important;
    background: linear-gradient(135deg, #fffbe6 0%, #ffffff 100%) !important;
    box-shadow: 0 0 4px rgba(212, 175, 55, 0.2) !important;
}

.rank10-list li:nth-child(2) {
    border: 1px solid #95a5a6 !important;
    background: linear-gradient(135deg, #f0f3f4 0%, #ffffff 100%) !important;
    box-shadow: 0 0 4px rgba(149, 165, 166, 0.2) !important;
}

.rank10-list li:nth-child(3) {
    border: 1px solid #b86b36 !important;
    background: linear-gradient(135deg, #faece1 0%, #ffffff 100%) !important;
    box-shadow: 0 0 4px rgba(184, 107, 54, 0.2) !important;
}

.rank10-list li:nth-child(1) a,
.rank10-list li:nth-child(1) .rank10-empty,
.rank10-list li:nth-child(2) a,
.rank10-list li:nth-child(2) .rank10-empty,
.rank10-list li:nth-child(3) a,
.rank10-list li:nth-child(3) .rank10-empty,
.rank10-list li:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) a,
.rank10-list li:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) .rank10-empty {
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 26px !important; /* 높이 여유 확대 */
    min-width: 0;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: clip !important;
    font-size: 14.5px !important; /* 13px -> 14.5px로 크게 확대 */
    font-weight: 900 !important; /* 굵기 최상단 고정 */
    font-family: 'yg-jalnan', sans-serif;
    padding: 0 !important;
    box-sizing: border-box;
    text-decoration: none;
    color: #000; /* 글자 색상 진하게(가독성 향상) */
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.rank10-list li:nth-child(1) .rank10-name,
.rank10-list li:nth-child(2) .rank10-name,
.rank10-list li:nth-child(3) .rank10-name {
    font-weight: 900 !important;
    color: #000 !important;
}

.rank10-list li:nth-child(1)::after, 
.rank10-list li:nth-child(2)::after, 
.rank10-list li:nth-child(3)::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        60deg,
        transparent 35%,
        rgba(255, 255, 255, 0.95) 50%,
        transparent 65%
    );
    transform: rotate(30deg);
    pointer-events: none;
    animation: metalShimmer 2s infinite linear;
}

@keyframes metalShimmer {
    0% { transform: translateX(-100%) rotate(30deg); }
    100% { transform: translateX(100%) rotate(30deg); }
}

.rank10-list li a:hover .rank10-name{
    text-decoration:underline;
}

.rank10-name{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-weight: 900 !important; /* 이름 부분도 무조건 굵게 */
}

.rank10-list .rk{
    min-width:32px;
    display:inline-block;
    text-align:center;
    flex:0 0 auto;
}

.rank10-list .rk img{
    width:22px; /* 순위 아이콘도 살짝 키움 */
    height:22px;
    object-fit:cover;
    border-radius:4px;
}

.rank10-list .rk-top img{
    width:28px;
    height:28px;
    border-radius:6px;
}

.rank10-empty{
    color:#777; /* 안 보이지 않게 색상 진하게 변경 */
}

.rank10-list li.rk-4 a{ color:#4a0072; } /* 색상 대비 극대화 */
.rank10-list li.rk-5 a{ color:#005c7a; }

.rainbow-text{
    display:inline-block;
    font-weight:900;
    color:#0066ff !important;
}

#dvhidden{text-align: center; border: 1px solid #dfdfdf; width: 100%; background: #ffffff; cursor: pointer; padding-top: 16px; padding-bottom: 14px; font-size: 19px; font-weight: 900; margin: 0 auto 10px; border-radius: 10px; box-sizing: border-box;} /* 토글 버튼 글씨 대폭 확대 및 굵게 */

/* =========================================
   상단 주소 박스 및 SNS 아이콘 영역
========================================= */
#hd_comm_inner .address-box {
    background: #fff !important;
    border: 1px solid #dfdfdf !important;
    border-radius: 6px !important;
    padding: 14px 16px !important;
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

#hd_comm_inner .address-box .addr-left{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
}
#hd_comm_inner .address-box .addr-ico{ font-size: 20px !important; line-height: 1 !important; }
#hd_comm_inner .address-box .addr-text{ font-size: 18px !important; font-weight: 800 !important; color: #111 !important; } /* 주소 안내 글씨 키움 */
#hd_comm_inner .address-box .addr-domain{ font-size: 20px !important; font-weight: 900 !important; color: #e60023 !important; } /* 핵심 도메인 주소 대폭 확대 및 굵게 */

#hd_comm_inner .address-box .addr-right{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
}

#hd_comm_inner .address-box .sns{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 8px !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

#hd_comm_inner .address-box .sns-txt{ 
    display: inline-block !important; 
    font-size: 15px !important; /* SNS 이름 글씨 키움 */
    font-weight: 900 !important;
    color: #111 !important;
}

#hd_comm_inner .address-box .sns::before{
    content: "" !important;
    width: 26px !important;
    height: 26px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    flex-shrink: 0 !important;
}

#hd_comm_inner .address-box .sns-google::before{    background-image: url('/theme/basic/img/sns/i_google.png') !important; }
#hd_comm_inner .address-box .sns-naver::before{     background-image: url('/theme/basic/img/sns/i_naver.jpg') !important; }
#hd_comm_inner .address-box .sns-daum::before{      background-image: url('/theme/basic/img/sns/i_daum.jpg') !important; }
#hd_comm_inner .address-box .sns-kakao::before{     background-image: url('/theme/basic/img/sns/i_kakao.jpg') !important; }
#hd_comm_inner .address-box .sns-band::before{      background-image: url('/theme/basic/img/sns/i_band.jpg') !important; }
#hd_comm_inner .address-box .sns-youtube::before{    background-image: url('/theme/basic/img/sns/i_youtube.jpg') !important; }
#hd_comm_inner .address-box .sns-instagram::before{ background-image: url('/theme/basic/img/sns/icon_instagram.png') !important; }
#hd_comm_inner .address-box .sns-facebook::before{  background-image: url('/theme/basic/img/sns/icon_facebook.png') !important; }

#hd_comm_inner .address-box .sns:hover{ opacity: 0.7 !important; background: transparent !important; }

@media (max-width: 1280px){
    #hd_comm_inner { padding: 0 !important; }
}

@media (max-width: 768px){
    #dvhidden { font-size: 17px !important; }

    #hd_comm_inner .address-box{
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 10px !important;
        background: #fff !important;
        border: 1px solid #dfdfdf !important;
    }

    #hd_comm_inner .address-box .addr-left {
        justify-content: center !important;
        width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
    }

    #hd_comm_inner .address-box .addr-right{
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    #hd_comm_inner .address-box .sns{
        display: inline-flex !important;
        background: transparent !important;
        border: none !important;
        padding: 4px !important;
    }

    #hd_comm_inner .address-box .sns-txt{
        display: none !important;
    }

    #hd_comm_inner .address-box .sns::before {
        width: 28px !important;
        height: 28px !important;
    }
}

/* =========================
   큐브 배너
========================= */
#banner-cube-stage{
    position: fixed;
    right: 40px;
    bottom: 140px;
    width: 200px;
    height: 200px;
    z-index: 999999 !important;
    perspective: 1000px;
    perspective-origin: 50% 50%;
}

.cube-close-wrap {
    position: absolute;
    top: -30px;
    right: 0;
    width: 100%;
    height: 30px;
    z-index: 1000000 !important;
}

#banner-cube-close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background: #222 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    padding: 4px 8px !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    z-index: 1000000 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
}

#banner-cube-close:hover {
    background: #000 !important;
    border-color: #00bfff !important;
}

#banner-cube-shape{
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform-origin: 100px 100px 0;
    animation: cubeRotateY 12s linear infinite;
}

#banner-cube-shape:hover{
    animation-play-state: paused;
}

#banner-cube-stage .cube-side{
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ddd;
    backface-visibility: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    box-sizing: border-box;
}

#banner-cube-stage .cube-side:nth-child(1){ transform: rotateY(0deg) translateZ(100px); }
#banner-cube-stage .cube-side:nth-child(2){ transform: rotateY(90deg) translateZ(100px); }
#banner-cube-stage .cube-side:nth-child(3){ transform: rotateY(180deg) translateZ(100px); }
#banner-cube-stage .cube-side:nth-child(4){ transform: rotateY(270deg) translateZ(100px); }

#banner-cube-stage .cube-side a,
#banner-cube-stage .cube-side img{
    display: block;
    width: 100%;
    height: 100%;
}

#banner-cube-stage .cube-side img{
    object-fit: cover;
}

@keyframes cubeRotateY{
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(360deg); }
}

@media (max-width: 1024px){
    #banner-cube-stage{
        right: 20px;
        bottom: 140px;
        width: 160px;
        height: 160px;
        perspective: 800px;
    }

    #banner-cube-shape{
        width: 160px;
        height: 160px;
        transform-origin: 80px 80px 0;
    }

    #banner-cube-stage .cube-side{
        width: 160px;
        height: 160px;
    }

    #banner-cube-stage .cube-side:nth-child(1){ transform: rotateY(0deg) translateZ(80px) !important; }
    #banner-cube-stage .cube-side:nth-child(2){ transform: rotateY(90deg) translateZ(80px) !important; }
    #banner-cube-stage .cube-side:nth-child(3){ transform: rotateY(180deg) translateZ(80px) !important; }
    #banner-cube-stage .cube-side:nth-child(4){ transform: rotateY(270deg) translateZ(80px) !important; }
}

@media (max-width: 768px){
    #banner-cube-stage{
        display: block !important;
        right: 10px !important;
        bottom: 128px !important;
        width: 90px !important;
        height: 90px !important;
        perspective: 400px !important;
        perspective-origin: 50% 50% !important;
    }

    #banner-cube-shape{
        width: 90px !important;
        height: 90px !important;
        transform-origin: 45px 45px 0 !important;
    }

    #banner-cube-stage .cube-side{
        width: 90px !important;
        height: 90px !important;
    }

    #banner-cube-stage .cube-side:nth-child(1){ transform: rotateY(0deg) translateZ(45px) !important; }
    #banner-cube-stage .cube-side:nth-child(2){ transform: rotateY(90deg) translateZ(45px) !important; }
    #banner-cube-stage .cube-side:nth-child(3){ transform: rotateY(180deg) translateZ(45px) !important; }
    #banner-cube-stage .cube-side:nth-child(4){ transform: rotateY(270deg) translateZ(45px) !important; }
    
    #banner-cube-close {
        top: -5px !important;
        font-size: 11px !important;
        padding: 6px 12px !important;
    }
}

/* =========================================================
   모바일 전용 배너 수정 (768px 이하)
========================================================= */
@media (max-width: 768px) {
    .main-banners-long,
    div.main-banners-long {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2px !important;
        width: 100% !important;
        margin-bottom: 2px !important;
    }

    .main-banners-long .main-banner-long {
        width: 100% !important;
        margin: 0 !important;
    }

    .main-banners-long .main-banner-long img {
        width: 100% !important;
        height: 10vw !important;
        object-fit: fill !important;
    }

    .main-banners-basic,
    div.main-banners-basic {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2px !important;
        width: 100% !important;
    }

    .main-banners-basic .main-banner-basic {
        width: 100% !important;
        margin: 0 !important;
    }

    .main-banners-basic .main-banner-basic img {
        width: 100% !important;
        height: 10vw !important;
        object-fit: fill !important;
    }
}

/* =========================================================
   팝업 레이어 모바일 반응형 완벽 예외 처리
========================================================= */
.hd_pops {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10000 !important;
    width: 88vw !important;
    max-width: 360px !important;
    max-height: 80vh !important;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    overflow: hidden;
}

.hd_pops_con {
    width: 100% !important;
    height: auto !important;
    max-height: calc(80vh - 45px) !important;
    overflow-y: auto;
}

.hd_pops img,
.hd_pops .hd_pops_con img,
.hd_pops_con a img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

.hd_pops_footer {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    background: #111;
    color: #fff;
    padding: 8px 12px;
}

.hd_pops_footer button {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

/* 반응형 (화면 폭 별 랭킹 그리드 컬럼 제어 및 폰트 유지) */
@media (max-width: 1200px){
    .rank10-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px){
    .rank10-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px){
    .rank10-title{ font-size: 16px !important; letter-spacing: -0.05rem; } /* 모바일 타이틀 키움 */
    
    .rank10-list {
        padding: 6px 6px 8px !important;
        gap: 4px !important;
    }
    
    .rank10-list li {
        margin-bottom: 2px !important;
    }

    .rank10-list li:nth-child(1),
    .rank10-list li:nth-child(2),
    .rank10-list li:nth-child(3) {
        padding: 0 !important;
        margin-bottom: 3px !important;
    }

    .rank10-list li a,
    .rank10-empty{ 
        font-size: 13.5px !important; /* 모바일 순위 목록 글씨 대폭 확대 (12px -> 13.5px) */
        line-height: 25px !important;
        font-weight: 900 !important; /* 굵기 최대로 고정 */
    }

    .rank10-list .rk img {
        width: 20px !important;
        height: 20px !important;
    }
    .rank10-list .rk-top img {
        width: 24px !important;
        height: 24px !important;
    }
}