/* [Client] theme/Weblease-Simple/css/ggongday_promo.css
   Version: v3.0.0 (Stable)
   Date: 2026-03-19
   Author: Web-lease_Claude_Code
   [변경 이력]
   - v1.0.0 : 최초 생성 - CPA 카드 프로모션 허브
   - v2.0.0 : 전면 재구축 - 고밀도 링크 디렉토리(주소꼬마 스타일)
   - v3.0.0 : BetPromo 특별 강조 / 이미지 배너 / CSS 그라데이션 아바타 Fallback
   [기능 요약]
   1. 프리미엄 스폰서 배너존 (Full Width) — 이미지형 / 아바타형 분기
   2. Sticky 퀵 카테고리 네비게이션바
   3. 고밀도 링크 박스 4단 그리드 (모바일 1~2단)
   4. BetPromo 네온 강조 + 펄스 USP 텍스트
*/

/* =========================================================
   BASE RESET
   ========================================================= */
#ld-wrap * { box-sizing: border-box; }
#ld-wrap a { text-decoration: none; color: inherit; }
#ld-wrap ul { list-style: none; margin: 0; padding: 0; }

/* =========================================================
   WRAPPER
   ========================================================= */
#ld-wrap {
    background: #0e0e0e;
    min-height: 100vh;
    font-family: 'Malgun Gothic', '맑은 고딕', -apple-system, sans-serif;
    color: #ddd;
}

/* =========================================================
   1. PREMIUM SPONSOR BANNER ZONE
   ========================================================= */
#ld-sponsor {
    width: 100%;
    background: #111;
    padding: 10px 0;
    border-bottom: 2px solid #222;
}

.ld-sponsor-banner {
    width: 100%;
    height: 80px;
    background: linear-gradient(90deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    border: 1px solid #2a2a3e;
    cursor: pointer;
    transition: border-color 0.15s;
    position: relative;
    overflow: hidden;
}
.ld-sponsor-banner:last-child { margin-bottom: 0; }
.ld-sponsor-banner:hover { border-color: #e8a020; }

.ld-sponsor-banner::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 4px; height: 100%;
    background: #e8a020;
}

.ld-sponsor-banner-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    width: 100%;
    max-width: 1200px;
}

.ld-sponsor-tag {
    background: #e8a020;
    color: #000;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ld-sponsor-text {
    font-size: 0.85rem;
    color: #aaa;
    font-style: italic;
    letter-spacing: 0.03em;
}

.ld-sponsor-arrow {
    margin-left: auto;
    font-size: 0.75rem;
    color: #555;
    flex-shrink: 0;
}

/* =========================================================
   2. QUICK CATEGORY NAV (STICKY)
   ========================================================= */
#ld-quicknav {
    position: sticky;
    top: 0;
    z-index: 900;
    background: #181818;
    border-bottom: 2px solid #e8a020;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#ld-quicknav::-webkit-scrollbar { display: none; }

.ld-quicknav-inner {
    display: flex;
    align-items: stretch;
    min-width: max-content;
    padding: 0 8px;
}

.ld-quicknav-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #bbb;
    white-space: nowrap;
    border-right: 1px solid #2a2a2a;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}
.ld-quicknav-item:first-child { border-left: none; }
.ld-quicknav-item:hover,
.ld-quicknav-item.active { background: #222; color: #e8a020; }
.ld-quicknav-item .nav-icon { font-size: 0.88rem; }

/* =========================================================
   3. MAIN GRID CONTAINER
   ========================================================= */
#ld-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 12px 40px;
}

.ld-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* =========================================================
   4. LINK BOX (카테고리 박스)
   ========================================================= */
.ld-box {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    overflow: hidden;
}

/* Box Header */
.ld-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #2a2a2a;
}

.ld-box-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
}
.ld-box-title .box-icon { font-size: 0.95rem; }

.ld-box-more {
    font-size: 0.68rem;
    color: #666;
    border: 1px solid #333;
    padding: 2px 7px;
    border-radius: 3px;
    transition: all 0.15s;
    white-space: nowrap;
}
.ld-box-more:hover { color: #e8a020; border-color: #e8a020; }

/* Color accent bar per category */
.ld-box.cat-major   .ld-box-head { border-top: 3px solid #e74c3c; }
.ld-box.cat-casino  .ld-box-head { border-top: 3px solid #9b59b6; }
.ld-box.cat-muktu   .ld-box-head { border-top: 3px solid #27ae60; }
.ld-box.cat-score   .ld-box-head { border-top: 3px solid #3498db; }
.ld-box.cat-sports  .ld-box-head { border-top: 3px solid #e67e22; }
.ld-box.cat-adult   .ld-box-head { border-top: 3px solid #e84393; }
.ld-box.cat-webtoon .ld-box-head { border-top: 3px solid #1abc9c; }
.ld-box.cat-ggong   .ld-box-head { border-top: 3px solid #f1c40f; }
.ld-box.cat-etc     .ld-box-head { border-top: 3px solid #7f8c8d; }

/* Box List */
.ld-box-list { padding: 4px 0; }

.ld-item {
    display: flex;
    align-items: center;
    padding: 5px 12px;
    gap: 7px;
    border-bottom: 1px solid #222;
    transition: background 0.12s;
    cursor: pointer;
}
.ld-item:last-child { border-bottom: none; }
.ld-item:hover { background: #222; }

/* Rank Number */
.ld-rank {
    font-size: 0.68rem;
    font-weight: 800;
    color: #555;
    min-width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.ld-item:nth-child(1) .ld-rank { color: #e8a020; }
.ld-item:nth-child(2) .ld-rank { color: #aaa; }
.ld-item:nth-child(3) .ld-rank { color: #cd7f32; }

/* Site Name */
.ld-name {
    font-size: 0.78rem;
    color: #ccc;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.12s;
}
.ld-item:hover .ld-name { color: #fff; }
.ld-item:nth-child(1) .ld-name { font-weight: 700; color: #eee; }

/* Labels */
.ld-labels {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.lbl {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
    white-space: nowrap;
    line-height: 1.5;
}
.lbl-hot    { background: #c0392b; color: #fff; }
.lbl-bonus  { background: #d4ac0d; color: #000; }
.lbl-safe   { background: #1e8449; color: #fff; }
.lbl-new    { background: #2980b9; color: #fff; }
.lbl-vip    { background: #6c3483; color: #fff; }
.lbl-free   { background: #d35400; color: #fff; }
.lbl-live   { background: #c0392b; color: #fff; }

/* =========================================================
   5. BETPROMO 특별 강조
   ========================================================= */

/* 배너 — 네온 그린 테두리 + 글로우 */
.ld-sponsor-banner.betpromo-banner {
    border-color: #00e676;
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.25), inset 0 0 20px rgba(0, 230, 118, 0.04);
}
.ld-sponsor-banner.betpromo-banner::before {
    background: #00e676;
}
.ld-sponsor-banner.betpromo-banner:hover {
    border-color: #69f0ae;
    box-shadow: 0 0 18px rgba(0, 230, 118, 0.4), inset 0 0 30px rgba(0, 230, 118, 0.07);
}

/* BetPromo USP 펄스 텍스트 */
@keyframes usp-pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

.ld-betpromo-usp {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #00e676;
    margin-top: 5px;
    letter-spacing: 0.03em;
    animation: usp-pulse 2s ease-in-out infinite;
}

/* 리스트 아이템 — 좌측 그린 바 */
.ld-item.betpromo-item {
    border-left: 3px solid #00e676;
    padding-left: 9px;
    background: rgba(0, 230, 118, 0.04);
}
.ld-item.betpromo-item:hover {
    background: rgba(0, 230, 118, 0.09);
}

/* 아이템 USP 인라인 태그 */
.ld-item-usp {
    font-size: 0.6rem;
    font-weight: 700;
    color: #00e676;
    background: rgba(0, 230, 118, 0.12);
    border: 1px solid rgba(0, 230, 118, 0.3);
    padding: 1px 5px;
    border-radius: 2px;
    white-space: nowrap;
    flex-shrink: 0;
    animation: usp-pulse 2s ease-in-out infinite;
}

/* =========================================================
   6. 배너 이미지형 & CSS 아바타형 Fallback
   ========================================================= */

/* 이미지 배너 */
.ld-sponsor-banner .ld-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0; left: 0;
    opacity: 0.85;
    transition: opacity 0.18s;
}
.ld-sponsor-banner:hover .ld-banner-img { opacity: 1; }

.ld-banner-img-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);
}

.ld-banner-img-name {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* CSS 그라데이션 아바타 (Fallback) */
.ld-banner-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 14px;
    position: absolute;
    inset: 0;
}

.ld-avatar-char {
    font-size: 2rem;
    font-weight: 900;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    flex-shrink: 0;
    line-height: 1;
}

.ld-avatar-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.ld-avatar-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   DISCLAIMER FOOTER
   ========================================================= */
#ld-disclaimer {
    border-top: 1px solid #1e1e1e;
    padding: 16px 12px;
    text-align: center;
    max-width: 1280px;
    margin: 0 auto;
}
#ld-disclaimer p {
    font-size: 0.68rem;
    color: #444;
    line-height: 1.7;
    margin: 0;
}

/* =========================================================
   7. 클릭수 뱃지 (go.php 트래킹 연동)
   ========================================================= */

/* 기본 조회수 */
.ld-click-cnt {
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
    white-space: nowrap;
    line-height: 1.5;
    background: rgba(255, 255, 255, 0.06);
    color: #666;
    border: 1px solid #2a2a2a;
}

/* 100회 이상 — 핫 표시 */
.ld-click-hot {
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
    white-space: nowrap;
    line-height: 1.5;
    background: rgba(232, 96, 0, 0.15);
    color: #e86000;
    border: 1px solid rgba(232, 96, 0, 0.25);
    animation: click-pulse 3s ease-in-out infinite;
}

@keyframes click-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .ld-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .ld-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    #ld-main { padding: 10px 8px 32px; }
    .ld-sponsor-banner { height: 60px; }
    .ld-box-title { font-size: 0.78rem; }
    .ld-name { font-size: 0.74rem; }
    .ld-item { padding: 5px 9px; }
}

@media (max-width: 479px) {
    .ld-grid { grid-template-columns: 1fr; }
    .ld-sponsor-banner { height: 54px; }
}