@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap');

* {margin: 0; padding: 0; box-sizing: border-box;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td, tr {margin: 0; padding: 0;}
img {border: 0; vertical-align: middle;}
ol, ul, li {list-style: none;}
h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight:normal;}
body {font-size: 16px; font-family: 'Noto Sans KR', sans-serif;}
fieldset {border: medium none;}
a {text-decoration: none; cursor: pointer;}
em {font-style: normal;}
html {height:100%; overflow-x: auto; overflow-y: auto;}
body {height:100%; background:#181838;}
button {border:none; cursor: pointer; font-family:inherit;}
button:hover,
button:active {transition: all 0s;}
input:focus,
select:focus,
textarea:focus {outline: none;}
table {border-collapse:collapse; border-spacing:0;}

/* 팝업 컨테이너 */
.pop-guide-usdt-notice {
    width:100%;
    max-width:600px;
    background:#1e1e40;
    border:1px solid #2e2e58;
    overflow:hidden;
}

/* 타이틀 영역 */
.pop-guide-usdt-title {
    padding:36px 20px 30px;
    text-align:center;
    background-color:#181838;
    background-image:
        linear-gradient(180deg, rgba(24,24,56,0.5) 0%, rgba(20,20,48,0.7) 50%, rgba(18,18,40,0.85) 100%),
        url('../images/bg-guide-usdt.jpg');
    background-size:cover, cover;
    background-position:center, center top;
    background-repeat:no-repeat, no-repeat;
    border-bottom:1px solid #2e2e58;
}

.pop-guide-usdt-title h2 {
    display:inline-block;
    font-size:26px;
    font-weight:900;
    color:#ffffff;
    -webkit-text-fill-color:#ffffff;
    letter-spacing:-0.025em;
    line-height:1.45;
    text-shadow:0 1px 2px rgba(0,0,0,0.3);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.pop-guide-usdt-title p {
    display:inline-block;
    margin-top:10px;
    font-size:16px;
    font-weight:700;
    color:#9098b8;
    -webkit-text-fill-color:#9098b8;
    letter-spacing:0.02em;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* 탭 영역 */
.pop-guide-usdt-tab {
    display:flex;
    background:#1a1a3c;
    border-bottom:1px solid #2e2e58;
}

.pop-guide-usdt-tab button {
    flex:1;
    padding:14px 0;
    font-size:13px;
    font-weight:700;
    color:#606888;
    background:#1c1c3e;
    border:none;
    border-bottom:2px solid transparent;
    cursor:pointer;
    transition:all 0.25s;
    letter-spacing:-0.025em;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.pop-guide-usdt-tab button + button {
    border-left:1px solid #2a2a52;
}

.pop-guide-usdt-tab button:hover {
    color:#b0b8d0;
    background:#222248;
}

.pop-guide-usdt-tab button.active {
    color:#ffffff;
    background:#222248;
    border-bottom:2px solid #4a7adc;
}

.pop-guide-usdt-tab button:not(.active) {
    border-bottom:2px solid transparent;
}

/* 컨텐츠 (영상) 영역 */
.pop-guide-usdt-content {
    padding:16px 20px 20px;
    background:#141432;
}

.pop-guide-usdt-content video {
    width:100%;
    border:1px solid #2a2a52;
    border-radius:2px;
    background:#0e0e22;
}

/* 하단 닫기 / 오늘 하루 그만보기 */
.pop-guide-usdt-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
    height:40px;
    background:#181838;
    border-top:1px solid #2e2e58;
}

.pop-guide-usdt-bottom .btn-close {
    padding:5px 18px;
    font-size:12px;
    font-weight:bold;
    color:#c0c8e0;
    background:linear-gradient(180deg, #2a2a54 0%, #222248 100%);
    border:1px solid #3a3a68;
    border-radius:3px;
    cursor:pointer;
    transition:all 0.2s;
}

.pop-guide-usdt-bottom .btn-close:hover {
    background:linear-gradient(180deg, #343460 0%, #2a2a54 100%);
    border-color:#4a4a78;
}

.pop-guide-usdt-bottom label {
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:#707898;
    font-size:11px;
    cursor:pointer;
}

.pop-guide-usdt-bottom label:hover {
    color:#9098b8;
}

/* 반응형 - 모바일 */
@media screen and (max-width:480px) {
    .pop-guide-usdt-title {
        padding:24px 14px 20px;
    }
    .pop-guide-usdt-title h2 {
        font-size:20px;
    }
    .pop-guide-usdt-title p {
        font-size:13px;
    }
    .pop-guide-usdt-tab button {
        padding:11px 0;
        font-size:12px;
    }
    .pop-guide-usdt-content {
        padding:12px 14px 14px;
    }
    .pop-guide-usdt-bottom {
        padding:0 10px;
        height:36px;
    }
    .pop-guide-usdt-bottom .btn-close {
        padding:4px 14px;
        font-size:11px;
    }
    .pop-guide-usdt-bottom label {
        font-size:10px;
    }
}