@charset "utf-8";

/* ═══════════════════════════════════════════════
 *  메인 페이지 (index)
 * ═══════════════════════════════════════════════ */

/* 섹션 공통 헤더 */
.m_live .head, .m_cates .head, .m_feature .head, .m_box .head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}
.m_live .title, .m_rarities .title, .m_cates .title, .m_feature .title, .m_box .title {
    font-size: 22px;
    font-weight: 600;
    color: #000;
    letter-spacing:-0.3px;
}
.m_live .more, .m_rarities .more, .m_feature .more, .m_box .more {
    font-size: 15px;
    color: #898989;
}
.m_live .more:hover, .m_feature .more:hover, .m_box .more:hover { color:#4834d4; }

/* ═══════════ 1. HERO 슬라이더 ═══════════ */
/* .m_hero {margin-bottom: 30px;}
.m_hero .swiper { overflow:hidden; }
.m_hero .swiper .track {
    gap:10px;
    padding:0 24px;
    scroll-snap-type:x mandatory;
    scroll-padding:0 24px;
}
.m_hero .swiper .item {
    flex:0 0 calc(100% - 58px);
    scroll-snap-align:center;
    border-radius:20px;
    overflow:hidden;
    position:relative;
    padding:30px 26px 32px;
    min-height: 300px;
    color:#fff;
}
*/
/* 배경은 인라인 style 로 지정됨 (DB) — fallback */
/*
.m_hero .item { background:linear-gradient(135deg,#7c5cff 0%,#4834d4 100%); }

.m_hero .item::before {
    content:''; position:absolute; top:-50px; right:-50px;
    width:200px; height:200px;
    background:radial-gradient(circle,rgba(255,255,255,0.2),transparent 70%);
}
.m_hero .item::after {
    content:''; position:absolute; bottom:-80px; left:-30px;
    width:180px; height:180px;
    background:radial-gradient(circle,rgba(255,255,255,0.12),transparent 70%);
}

.m_hero .content {position:relative;z-index:2;}
.m_hero .badge {display:inline-block;padding:4px 12px;background:rgba(255,255,255,0.22);border-radius:20px;font-size: 12px;font-weight: 600;margin-bottom:14px;backdrop-filter:blur(4px);}
.m_hero .title { font-size:22px; line-height:1.35; font-weight:900; margin-bottom:8px; letter-spacing:-0.4px; }
.m_hero .desc { font-size:13px; opacity:0.92; margin-bottom:20px; line-height:1.5; }
.m_hero .btn { display:inline-block; padding:11px 22px; background:#fff; border-radius:30px; font-size:13.5px; font-weight:800; box-shadow:0 6px 16px rgba(0,0,0,0.18); border:0; cursor:pointer; text-decoration:none; }

.m_hero .deco {
    position:absolute; right:18px; top:50%; transform:translateY(-50%);
    font-size:90px; opacity:0.35; z-index:1;
    text-shadow:0 8px 24px rgba(0,0,0,0.2);
} */

.m_hero {margin-bottom: 30px;overflow: hidden;}
.m_hero .swiper {max-width: 534px;overflow: visible;}
.m_hero .item {flex: none;}
.m_hero .item a {display: block;width: 100%;border-radius: 20px;overflow: hidden;}
.m_hero .item a img {display: block;width: 100%;}

/* ═══════════ 2. 빠른 메뉴 ═══════════ */
.m_quick {margin-bottom: 30px;}
.m_quick ul {display:grid;grid-template-columns:repeat(4,1fr);gap: 7px;}
.m_quick li a {display:flex;flex-direction:column;align-items:center;padding:14px 4px;background: #fff;border: 1px solid #F4F4F4;border-radius: 20px;transition:transform 0.15s, box-shadow 0.15s;}
.m_quick li a:hover { transform:translateY(-2px); box-shadow:0 6px 14px rgba(72,52,212,0.12); }
.m_quick .ico {width: 86px;}
.m_quick .lbl {font-size: 17px;font-weight: 600;}

@media (max-width: 480px){
    .m_quick ul {grid-template-columns:repeat(2,1fr);}
    .m_quick .lbl {font-size: 15px;}
}


/* ═══════════ 프로모션 배너 ═══════════ */
.m_promotion {margin-bottom: 40px;}
.m_promotion .swiper-slide a img {border-radius: 15px;overflow: hidden;transition: .2s ease;}
.m_promotion .swiper-slide a:hover img {opacity: .85;}
.m_promotion .swiper-pagination-bullet {background: #fff;}

/* ═══════════ 3. LIVE 티커 ═══════════ */
.m_live {margin-bottom: 45px;}
.m_live .head .title { display:flex; align-items:center; gap:8px; position: relative;}
.m_live .head .title::before {flex-shrink: 0;content: '';display:inline-block;width:8px;height:8px;background:#ff3d7f;border-radius:50%;animation:livedot 1s infinite;}
@keyframes livedot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(1.4); } }

.m_live .ticker {padding:14px 18px;background:linear-gradient(135deg,#1e1a4a 0%,#2d1f9e 100%);border-radius:14px;overflow:hidden;position:relative;}
.m_live .ticker::before {content:'';position:absolute;left:0;top:0;bottom:0;width: 32px;background-color: #1e1a4a;background-image: url("data:image/svg+xml,%3Csvg width='12' height='20' viewBox='0 0 12 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.14061 0.388292C7.26154 0.210201 7.42969 0.0840802 7.61864 0.0297399C7.80759 -0.0246004 8.00665 -0.00408081 8.18453 0.0880755C8.36242 0.180232 8.50906 0.338803 8.60142 0.538881C8.69377 0.738959 8.72662 0.969207 8.69479 1.19346L7.76843 7.69221H11.1218C11.2868 7.69217 11.4486 7.74648 11.5884 7.84891C11.7282 7.95134 11.8405 8.09773 11.9124 8.27131C11.9843 8.44488 12.0128 8.6386 11.9947 8.83025C11.9766 9.0219 11.9127 9.20372 11.8102 9.35484L4.85851 19.6117C4.73759 19.7898 4.56944 19.9159 4.38048 19.9703C4.19153 20.0246 3.99248 20.0041 3.81459 19.9119C3.6367 19.8198 3.49006 19.6612 3.39771 19.4611C3.30535 19.261 3.2725 19.0308 3.30433 18.8065L4.2307 12.3078H0.877356C0.712371 12.3076 0.550761 12.2532 0.411047 12.1507C0.271334 12.0482 0.159169 11.9018 0.0874085 11.7282C0.0156479 11.5547 -0.0128056 11.3611 0.00530909 11.1695C0.0234237 10.9779 0.0873736 10.7962 0.18983 10.6452L7.14061 0.388292Z' fill='%23FFE100'/%3E%3C/svg%3E%0A");background-repeat: no-repeat;background-position: center;z-index:2;}
.m_live .ticker::after  { content:''; position:absolute; right:0; top:0; bottom:0; width:30px; background:linear-gradient(270deg,#2d1f9e,transparent); z-index:2; }
.m_live .ticker_track {display:flex;gap: 25px;white-space:nowrap;animation:ticker 30s linear infinite;}
.m_live .ticker_track li {color:#fff;font-size: 14px;font-weight: 500;display:inline-flex;align-items:center;gap: 4px;position: relative;}
.m_live .ticker_track li:not(:last-child) {padding-right: 25px;}
.m_live .ticker_track li:not(:last-child)::after {content: '';display: block;width: 1px;height: 10px;background: rgba(255,255,255,.3);position: absolute;top: 0;right: 0;bottom: 0;margin: auto;}
.m_live .ticker_track li .grade_badge { vertical-align:middle; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.m_live .ticker_track li .new {padding: 2px 4px;border-radius: 2px;background: #fff;color: #000;font-size: 9px;font-weight: 600;}
.m_live .ticker_track .who {}
.m_live .ticker_track strong { color:#fff; font-weight:700; }
@keyframes ticker { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

/* ═══════════ 4. 카테고리 그리드 ═══════════ */
/* ═══════════ 4. 등급별 상품 보기 ═══════════ */
.m_rarities {}
.m_rarities .head {display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}

/* 한 줄에 5개 — 모든 화면 (모바일은 좁아도 5개 유지, 셀이 작아짐) */
.m_rarities .grid {
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:8px;
}

.m_rarities .cate {
    position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; padding:14px 4px 12px;
    background:#fff;
    border:1.5px solid var(--rar, #888);
    border-radius:12px;
    transition:transform 0.18s, box-shadow 0.18s;
    text-align:center;
    box-shadow:0 3px 10px rgba(0,0,0,0.04);
}
.m_rarities .cate:hover { transform:translateY(-2px); box-shadow:0 8px 16px var(--rar, rgba(0,0,0,0.18)); }
.m_rarities .cate::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, var(--rar, transparent) 0%, transparent 70%);
    opacity:0.08; border-radius:11px;
    pointer-events:none;
}

.m_rarities .ic {
    display:flex;
    align-items:center;
    justify-content:center;
    max-width: 72px;
    width: 100%;
    aspect-ratio: 1 / 1;
    color:var(--rar, #888);
    filter:drop-shadow(0 4px 10px var(--rar, rgba(0,0,0,0.22)));
}
.m_rarities .ic svg,
.m_rarities .ic img { width:100%; height:100%; object-fit:contain; }

.m_rarities .name {
    font-size: 14px;
    font-weight: 600;
    color:var(--rar, #333);
    letter-spacing:-0.3px;
    line-height:1.2;
}
/* 화면 매우 좁을 때 (≤360px) — 글자/아이콘 약간 축소 */
@media (max-width:360px) {
    .m_rarities .grid {gap:6px;}
    .m_rarities .cate { padding:12px 2px 10px; border-radius:10px; }
    .m_rarities .ic {/* width:56px; *//* height:56px; */}
    .m_rarities .name { font-size:11px; }
}

/* ═══════════ 5. MD 추천 FEATURE 카드 ═══════════ */
.m_feature { padding:30px 0 8px; }
.m_feature .feat_card { display:flex; margin:0 18px; padding:24px; background:linear-gradient(135deg,#fff5d6 0%,#ffe066 50%,#ffc94d 100%); border-radius:20px; overflow:hidden; position:relative; box-shadow:0 8px 22px rgba(255,160,0,0.25); }
.m_feature .feat_card::before { content:''; position:absolute; top:-40px; right:-40px; width:160px; height:160px; background:radial-gradient(circle,rgba(255,255,255,0.5),transparent 70%); }
.m_feature .left { flex:1; min-width:0; position:relative; z-index:1; }
.m_feature .tag { display:inline-block; padding:3px 9px; background:#1e1a4a; color:#fff; border-radius:6px; font-size:10px; font-weight:800; letter-spacing:1px; margin-bottom:10px; }
.m_feature .name { font-size:18px; font-weight:900; color:#1e1a4a; line-height:1.3; margin-bottom:8px; letter-spacing:-0.3px; }
.m_feature .desc { font-size:12.5px; color:#5a4a00; line-height:1.5; margin-bottom:14px; }
.m_feature .price { margin-bottom:14px; }
.m_feature .price .from { font-size:11px; color:#7a5d00; margin-right:6px; }
.m_feature .price .amt { font-size:22px; font-weight:900; color:#c94176; }
.m_feature .cta { display:inline-block; padding:8px 16px; background:#1e1a4a; color:#fff; border-radius:24px; font-size:12px; font-weight:800; }
.m_feature .right { flex:0 0 100px; position:relative; z-index:1; display:flex; align-items:center; justify-content:center; }
.m_feature .cube { width:100px; height:100px; border-radius:20px; background:linear-gradient(135deg,#1e1a4a,#4834d4); display:flex; align-items:center; justify-content:center; font-size:50px; transform:perspective(400px) rotateY(-12deg) rotateX(8deg); box-shadow:0 14px 28px rgba(30,26,74,0.4); }

/* ═══════════ 6. 박스 캐러셀 ═══════════ */
.m_box { padding:30px 0 8px;overflow: hidden;}
.m_box .swiper {overflow: visible;}
.m_box .item {flex: none;}
.m_box .item a { display:block; background:#fff; border:1px solid #eee; border-radius:14px; overflow:hidden; transition:transform 0.18s, box-shadow 0.18s; }
.m_box .item a:hover { transform:translateY(-3px); box-shadow:0 8px 18px rgba(72,52,212,0.12); }
.m_box .item .thumb { width:100%; aspect-ratio:1/1; background:linear-gradient(135deg,#f4f2ff,#e6e1ff); position:relative; overflow:hidden; }
.m_box .item .thumb::after { content:'📦'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:42px; opacity:0.45; }
.m_box .item .thumb.has_img::after { content:none; }
.m_box .item .thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.m_box .item .rank { position:absolute; top:8px; left:8px; z-index:2; padding:3px 8px; background:rgba(30,26,74,0.85); color:#fff; border-radius:6px; font-size:10.5px; font-weight:800; }
.m_box .item .info {padding: 14px 14px 18px;}
.m_box .item .price {font-size:14px;font-weight: 600;color: #0037BF;text-decoration:line-through;margin-bottom: 2px;}
.m_box .item .name {font-size: 15px;font-weight:600;color:#222;line-height:1.4;min-height: calc(1.4rem * 2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}


/* ═══════════ 7. 공지 배너 ═══════════ */
.m_notice_banner { padding:24px 18px 12px; }
.m_notice_banner a { display:flex; align-items:center; gap:14px; padding:16px 18px; background:#f8f7ff; border:1px solid #ece9ff; border-radius:14px; transition:background 0.15s; }
.m_notice_banner a:hover { background:#f0eeff; }
.m_notice_banner .ic { font-size:24px; }
.m_notice_banner .txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.m_notice_banner .txt .title { font-size:13.5px; font-weight:700; color:#1e1a4a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m_notice_banner .txt .desc { font-size:11.5px; color:#888; }
.m_notice_banner .arrow { color:#4834d4; font-weight:800; font-size:16px; }