/* DATACENTER_PRODUCT_V6_4_BUTTON_EXACT_LINKFIX_20260928 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

*{box-sizing:border-box}
html,body{
    margin:0;
    padding:0;
    background:#171b1d;
    color:#fff;
    font-family:'Pretendard','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}
a{text-decoration:none;color:inherit}

.product-page{
    width:1122px;
    margin:0 auto;
    background:#050708;
    overflow:hidden;
    box-shadow:0 0 60px rgba(0,0,0,.55);
}

/* 공통 헤더 */
.product-header{
    height:75px;
    display:flex;
    align-items:center;
    padding:0 28px;
    background:linear-gradient(180deg,#111517 0%,#07090b 100%);
    border-bottom:1px solid rgba(255,255,255,.15);
}
.product-header-logo{
    display:flex;
    align-items:center;
    gap:12px;
    width:275px;
    min-width:275px;
}
.product-crown{
    width:42px;
    height:34px;
    position:relative;
    filter:drop-shadow(0 0 10px rgba(255,193,56,.18));
}
.product-crown:before{
    content:'';
    position:absolute;
    left:0;right:0;bottom:0;
    height:28px;
    background:linear-gradient(180deg,#fff0b6,#d89b27 72%,#6e400e);
    clip-path:polygon(0 100%,7% 28%,24% 62%,42% 0,58% 62%,76% 28%,100% 100%);
}
.product-logo-text b{
    display:block;
    color:#f1c25c;
    font-size:30px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.07em;
}
.product-logo-text span{
    display:block;
    margin-top:8px;
    color:#e7dcc6;
    font-size:10px;
    letter-spacing:.55em;
}
.product-nav{
    flex:1;
    display:flex;
    justify-content:center;
    gap:46px;
}
.product-nav a{
    position:relative;
    color:#e9e9e9;
    font-size:15px;
    font-weight:700;
    letter-spacing:-.04em;
}
.product-nav a.active{color:#f1c45c}
.product-nav a.active:after{
    content:'';
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-22px;
    width:45px;
    height:2px;
    background:#f1c45c;
    box-shadow:0 0 8px rgba(242,196,92,.55);
}
.product-auth{
    display:flex;
    gap:10px;
}
.product-auth a{
    width:88px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    font-size:13px;
    font-weight:800;
}
.product-auth .login{
    border:1px solid rgba(255,255,255,.33);
    background:linear-gradient(180deg,#15191d,#07090b);
    color:#fff;
}
.product-auth .join{
    background:linear-gradient(180deg,#ffe6a1 0%,#e0a33c 100%);
    color:#1c1305;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
}

/* 사용자가 말한 '위에 추가' 영역 */
.product-extra{
    padding:34px 38px 36px;
    background:
        radial-gradient(circle at 78% 18%,rgba(242,196,92,.08),transparent 34%),
        linear-gradient(180deg,#070a0c 0%,#050708 100%);
    border-bottom:1px solid rgba(242,196,92,.18);
}
.product-extra-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:28px;
    margin-bottom:20px;
}
.product-extra-head h2{
    margin:0;
    font-size:30px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:-.07em;
}
.product-extra-head h2 b{color:#f3c75f}
.product-extra-head p{
    margin:0;
    color:#d9d3c7;
    font-size:14px;
    line-height:1.65;
    text-align:right;
}
.product-info-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}
.product-info-card{
    min-height:165px;
    padding:24px;
    border:1px solid rgba(242,196,92,.48);
    border-radius:12px;
    background:
        radial-gradient(circle at 78% 16%,rgba(242,196,92,.10),transparent 42%),
        linear-gradient(145deg,rgba(9,14,18,.98),rgba(4,8,10,.99));
}
.product-info-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#ffe6a1,#e0a33c);
    color:#1c1305;
    font-size:21px;
    font-weight:900;
    margin-bottom:14px;
    box-shadow:0 0 18px rgba(242,196,92,.18);
}
.product-info-card h3{
    margin:0 0 10px;
    font-size:21px;
    letter-spacing:-.06em;
}
.product-info-card p{
    margin:0;
    color:#d9d3c7;
    font-size:14px;
    line-height:1.65;
}
.product-wide{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:16px;
    margin-top:16px;
}
.product-panel{
    padding:24px;
    border:1px solid rgba(242,196,92,.42);
    border-radius:12px;
    background:linear-gradient(145deg,rgba(9,14,18,.98),rgba(4,8,10,.99));
}
.product-panel h3{
    margin:0 0 14px;
    font-size:24px;
    letter-spacing:-.06em;
}
.product-list{
    margin:0;
    padding:0;
    list-style:none;
}
.product-list li{
    display:flex;
    gap:14px;
    border-top:1px solid rgba(255,255,255,.08);
    padding:12px 0;
    color:#fff;
    font-size:14px;
    line-height:1.45;
}
.product-list li:first-child{border-top:0;padding-top:0}
.product-list b{
    color:#fbd064;
    min-width:92px;
}
.product-notice{
    color:#d9d3c7;
    font-size:14px;
    line-height:1.75;
}

/* 시안 본문: 공백 없도록 실제 표시 높이로 조정 */
.product-exact-hero{
    width:1122px;
    height:558px;
    position:relative;
    background:#050708 url('/images/dc/product/membership_body_mockup.png') no-repeat center top / 1122px auto;
}
.product-hotspot{
    position:absolute;
    display:block;
    z-index:20;
    background:transparent;
    text-indent:-9999px;
    overflow:hidden;
}
.product-royal{left:65px;top:315px;width:292px;height:42px;}
.product-vip{left:421px;top:315px;width:279px;height:42px;}
.product-first{left:762px;top:315px;width:300px;height:42px;}

/* 푸터 */
.product-footer{
    background:#060808;
    border-top:1px solid rgba(242,196,92,.22);
    padding:32px 38px 38px;
    color:#bcb6aa;
    font-size:12px;
    line-height:1.8;
}
.product-footer-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:30px;
    margin-bottom:18px;
}
.product-footer-brand{
    color:#f2c45c;
    font-size:22px;
    font-weight:800;
    letter-spacing:-.06em;
}
.product-footer-menu{
    display:flex;
    gap:20px;
    color:#e7dcc6;
    font-weight:700;
}
.product-footer-info{
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:18px;
}
.product-footer-info span{
    display:inline-block;
    margin-right:20px;
}
.product-copy{
    margin-top:10px;
    color:#79746d;
}


/* DATACENTER_PRODUCT_V6_4_BUTTON_EXACT_LINKFIX_20260928
   상품안내 시안 내 자세히보기 클릭 영역 확대 */
.product-hotspot{
    z-index:50!important;
    cursor:pointer!important;
}

/* 실제 버튼보다 조금 더 넓고 높게 잡아서 클릭 편하게 */
.product-royal{
    left:42px!important;
    top:300px!important;
    width:320px!important;
    height:76px!important;
}
.product-vip{
    left:397px!important;
    top:300px!important;
    width:320px!important;
    height:76px!important;
}
.product-first{
    left:738px!important;
    top:300px!important;
    width:330px!important;
    height:76px!important;
}


/* DATACENTER_PRODUCT_V6_4_BUTTON_EXACT_LINKFIX_20260928
   'xx 혜택 자세히 보기 ->' 실제 버튼 위치에 클릭영역 재정렬.
   이전 V6.2의 넓은 클릭영역이 카드 중간으로 올라간 문제 수정. */
.product-hotspot{
    z-index:50!important;
    cursor:pointer!important;
}

/* membership_body_mockup.png 기준 실제 하단 버튼 좌표 */
.product-royal{
    left:64px!important;
    top:416px!important;
    width:294px!important;
    height:47px!important;
}
.product-vip{
    left:410px!important;
    top:416px!important;
    width:292px!important;
    height:47px!important;
}
.product-first{
    left:752px!important;
    top:416px!important;
    width:296px!important;
    height:47px!important;
}


/* DATACENTER_AUTH_SECURITY_FOOTER_V1_20260928 */

.product-auth .logout,.pd-auth .logout{
    width:88px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    font-size:13px;
    font-weight:800;
    border:1px solid rgba(255,255,255,.33);
    background:linear-gradient(180deg,#15191d,#07090b);
    color:#fff;
}


/* DATACENTER_PRODUCT_CLEAN_V2_HEADER_FOOTER_FIX_20260928 */


/* DATACENTER_VIP_TEXT_FIX_V3_20260928 */


/* DATACENTER_PRODUCT_DETAIL_CLEAN_V4_20260928 */

/* 상세페이지 제공 항목 한줄 정렬 */
.pd-point-card ul{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    align-items:center!important;
    overflow-x:auto!important;
    padding-bottom:2px!important;
}
.pd-point-card li{
    white-space:nowrap!important;
    flex:0 0 auto!important;
    padding:8px 10px!important;
    border-radius:999px!important;
    background:rgba(242,196,92,.08)!important;
    border:1px solid rgba(242,196,92,.22)!important;
}


/* DATACENTER_PRODUCT_ITEMS_FULLROW_V5_20260928 */

/* 상품 상세 제공 항목: 한 줄 꽉 차게 */
.pd-items-wide{
    display:block!important;
}
.pd-items-wide .pd-panel{
    width:100%!important;
    max-width:none!important;
}
.pd-items-wide .pd-panel .pd-list{
    display:grid!important;
    grid-template-columns:repeat(6, 1fr)!important;
    gap:10px!important;
    width:100%!important;
    overflow:visible!important;
}
.pd-items-wide .pd-panel .pd-list li{
    min-width:0!important;
    width:auto!important;
    height:72px!important;
    padding:12px 10px!important;
    border-radius:12px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:normal!important;
    background:rgba(242,196,92,.08)!important;
    border:1px solid rgba(242,196,92,.22)!important;
}
.pd-items-wide .pd-panel .pd-list li b{
    display:block!important;
    margin:0 0 5px!important;
    font-size:14px!important;
    white-space:nowrap!important;
}
.pd-items-wide .pd-panel .pd-list li span{
    display:block!important;
    font-size:12px!important;
    line-height:1.25!important;
    white-space:normal!important;
}


/* DATACENTER_PRODUCT_ITEMS_FULLWIDTH_V6_20260928 */
.pd-provide-full{
    width:100%!important;
    margin:22px 0 20px!important;
    padding:28px 26px 30px!important;
    border:1px solid rgba(242,196,92,.55)!important;
    border-radius:14px!important;
    background:linear-gradient(180deg,rgba(7,11,13,.98),rgba(3,6,7,.98))!important;
    box-sizing:border-box!important;
}
.pd-provide-full h3{
    margin:0 0 20px!important;
    color:#fff!important;
    font-size:24px!important;
    line-height:1.2!important;
    font-weight:900!important;
}
.pd-provide-grid{
    display:grid!important;
    grid-template-columns:repeat(6, minmax(0, 1fr))!important;
    gap:12px!important;
    width:100%!important;
}
.pd-provide-item{
    min-width:0!important;
    height:92px!important;
    padding:14px 10px!important;
    border-radius:12px!important;
    border:1px solid rgba(242,196,92,.33)!important;
    background:rgba(242,196,92,.07)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    box-sizing:border-box!important;
}
.pd-provide-item b{
    display:block!important;
    margin:0 0 8px!important;
    color:#ffd35f!important;
    font-size:15px!important;
    font-weight:900!important;
    white-space:nowrap!important;
}
.pd-provide-item span{
    display:block!important;
    color:#fff!important;
    font-size:12px!important;
    line-height:1.28!important;
    word-break:keep-all!important;
}


/* DATACENTER_PRODUCT_ITEMS_FULLWIDTH_V7_FORCE_20260928 */
.pd-provide-force{
    width:100%!important;
    margin:22px 0 22px!important;
    padding:28px 26px 30px!important;
    border:1px solid rgba(242,196,92,.55)!important;
    border-radius:14px!important;
    background:linear-gradient(180deg,rgba(7,11,13,.98),rgba(3,6,7,.98))!important;
    box-sizing:border-box!important;
    clear:both!important;
}
.pd-provide-force h3{
    margin:0 0 20px!important;
    color:#fff!important;
    font-size:24px!important;
    line-height:1.2!important;
    font-weight:900!important;
}
.pd-provide-force-grid{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:12px!important;
    width:100%!important;
    box-sizing:border-box!important;
}
.pd-provide-force-item{
    min-width:0!important;
    height:92px!important;
    padding:14px 10px!important;
    border-radius:12px!important;
    border:1px solid rgba(242,196,92,.33)!important;
    background:rgba(242,196,92,.07)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    box-sizing:border-box!important;
}
.pd-provide-force-item b{
    display:block!important;
    margin:0 0 8px!important;
    color:#ffd35f!important;
    font-size:15px!important;
    font-weight:900!important;
    white-space:nowrap!important;
}
.pd-provide-force-item span{
    display:block!important;
    color:#fff!important;
    font-size:12px!important;
    line-height:1.28!important;
    word-break:keep-all!important;
}