/* =========================================
   FONT
========================================= */
@font-face{
    font-family:"NanumGothic";
    src:url('/data/fonts/NanumGothic.eot'),
        url('/data/fonts/NanumGothic.eot?#iefix') format('embedded-opentype'),
        url('/data/fonts/NanumGothic.woff') format('woff'),
        url('/data/fonts/NanumGothic.ttf') format('truetype'),
        url('/data/fonts/NanumGothic.svg#NanumGothic') format('svg'),
        local(※), url('/data/fonts/NanumGothic.woff') format('woff');
}

/* =========================================
   기본 구조
========================================= */
html, body{
    min-height:100%;
    font-family:'NanumGothic';
    background-color:#353535;
}

body{
    margin:0;
}

section{
    padding-top:0;
    padding-bottom:1.9em;
}

section[data-device="mobile"][data-where="main"]{
    padding-top:0;
    padding-bottom:0;
}

section[data-device="mobile"][data-where="main"] nav.navbar.fixed-top{
    display:none;
}

.DefaultViewArea{
    color:#fff;
    min-height:80vmin;
}

.ViewFormArea{
    min-height:75vh;
    color:#fff;
}

.LoginBtnArea{
    z-index: 40;
}

/* =========================================
   네비게이션
========================================= */
nav .icon{
    width:34px;
    height:auto;
    aspect-ratio:1/1;
    border-radius:50%;
}

nav.TopNav{
    z-index:1040;
    color:#fff;
}

.navbar{
    color:#fff;
    background-color:#3b434b;
}

/* =========================================
   비디오 기본
========================================= */
.ChatVideo{
    width:100%;
    aspect-ratio:4/3;
    display:block;
    object-fit:cover;
    margin:0;
    padding:0;
    background-color:#696969;
}

/* =========================================
   화면 인터페이스 (WebRTC)
========================================= */
.video-box{
    overflow:hidden;
    background:#000;
    position:relative;
}

.video-controls-overlay{
    position:absolute;
    bottom:10px;
    right:10px;
    display:flex;
    gap:10px;
    align-items:center;
    z-index:20;
    opacity:0;
    transition:opacity .3s ease;
}

.video-box:hover .video-controls-overlay{
    opacity:1;
}

.video-controls-overlay button{
    background:rgba(255,255,255,0.9);
    border:none;
    border-radius:50%;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:18px;
}

.video-controls-overlay input[type="range"]{
    width:100px;
    height:4px;
    cursor:pointer;
    opacity:0;
    transition:opacity .3s ease;
}

.video-box:hover .video-controls-overlay input[type="range"]{
    opacity:1;
}

/* =========================================
   채팅창
========================================= */
.ChatBoxArea{
    height:100%;
}

.ChatTextView{
    padding-left:4px;
    padding-right:4px;
    padding-bottom:64px;
    height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    transition:opacity .5s ease;
}

.ChatTextView.hidden{
    opacity:0;
    pointer-events:none;
}

.ChatTextView div{
    text-shadow:1px 1px 2px rgba(0,0,0,0.4);
}

/* =========================================
   국가 선택 (Flags)
========================================= */
.flag-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:20px;
}

.flag-item{
    width:25px;
    aspect-ratio:1/1;
    cursor:pointer;
    border:2px solid transparent;
    border-radius:6px;
    background-color:#fff;
    transition:all .2s;
}

.flag-item:hover{
    border-color:#007bff;
    transform:scale(1.1);
}

.flag-icon-row.selected{
    border-color:#28a745;
    box-shadow:0 0 5px #28a745;
    background-color:#9ed3ff;
}

#selected-country{
    margin-top:20px;
    font-size:18px;
    font-weight:bold;
}

/* =========================================
   버튼 스타일
========================================= */
.btn-primary{
    --bs-btn-color:#fff;
    --bs-btn-bg:#385683;
    --bs-btn-border-color:#385683;
    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:#0b5ed7;
    --bs-btn-hover-border-color:#0a58ca;
    --bs-btn-focus-shadow-rgb:49,132,253;
    --bs-btn-active-color:#fff;
    --bs-btn-active-bg:#0a58ca;
    --bs-btn-active-border-color:#0a53be;
    --bs-btn-disabled-color:#fff;
    --bs-btn-disabled-bg:#385683;
    --bs-btn-disabled-border-color:#385683;
}

/* =========================================
   푸터
========================================= */
footer{
    color:#929292;
    background-color:#3b434b;
}

/* =========================================
   데스크탑 전용
========================================= */
@media(min-width:768px){
    section{
        padding-top:60px;
        padding-bottom:1.9em;
        min-height:90vh;
    }
    .ChatBoxArea{
        background-color:#818181;
    }
}

/* =========================================
   모바일 최적화
========================================= */
@media(max-width:767px){
    .ChatTextView div{
        color:#fff;
    }

    .video-container{
        padding:0;
    }

    .ChatBoxArea{
        position:absolute;
        top:0;
        left:0;
        width:100%;
    }

    .VideoAndChatArea{
        position:relative;
    }

    .TopCtlArea{
        border-bottom:0 !important;
    }

    .local-box .video-controls-overlay{
        top:140px;
    }

    .TextChatBtnArea{
        z-index:25;
    }

    .TextChatBtnArea .input-group{
        opacity:50%;
    }

    .TargeterGenderArea{
        color:#fff;
        text-shadow:1px 1px 2px rgba(0,0,0,0.4);
    }
}

/* =========================================
   INFORMATION SECTION (기본 스타일)
========================================= */

/* 전체 영역 */
.InfoSectionArea{
    color:#e5e5e5;    
    margin:0 auto;
}

/* 기본 박스 */
.info-block{
    background:#404040;
    border:1px solid #585858;
    border-radius:14px;
    padding:32px 28px;
    margin-bottom:48px;
    box-shadow:0 0 12px rgba(0,0,0,0.25);
}

/* 제목 */
.info-title{
    font-weight:700;
    font-size:1.45rem;
    color:#fff;
    margin-bottom:18px;
}

/* 텍스트 */
.info-text{
    font-size:1rem;
    color:#dcdcdc;
    line-height:1.75;
}

/* 리스트 */
.info-list li{
    margin-bottom:8px;
    line-height:1.7;
}

/* 전체 타이틀 */
.section-headline{
    font-size:1.8rem;
    font-weight:700;
    color:#fff;
    margin-bottom:20px;
    padding-bottom:10px;
    border-bottom:2px solid #515151;
}

/* 아이콘 */
.info-icon{
    font-size:2.4rem;
    color:#cfcfcf;
    margin-bottom:12px;
}

/* 3단 스텝 박스 */
.info-step-box{
    background:#474747;
    border-radius:12px;
    padding:22px 16px;
    border:1px solid #595959;
    transition:background .2s ease;
}

.info-step-box:hover{
    background:#525252;
}

/* 위험 박스 */
.info-danger{
    background:rgba(120,0,0,0.28);
    border:1px solid rgba(255,80,80,0.6);
}

/* 모바일 레이아웃 */
@media(max-width:767px){
    .section-headline{
        font-size:1.6rem;
    }
    .info-block{
        padding:24px 20px;
        margin-bottom:36px;
    }
    .info-title{
        font-size:1.3rem;
    }
}



/* =========================================
   BUTTON PROFESSIONAL UPGRADE
========================================= */

/* 기본 액션 버튼 (Primary) */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #3A6FB0;
    --bs-btn-border-color: #3A6FB0;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #325F99;
    --bs-btn-hover-border-color: #325F99;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #294F82;
    --bs-btn-active-border-color: #294F82;

    --bs-btn-disabled-bg: #3A6FB0;
    --bs-btn-disabled-border-color: #3A6FB0;
    opacity: 1;
}

/* 서브 버튼 (Secondary / Neutral) */
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #505050;
    --bs-btn-border-color: #505050;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5A5A5A;
    --bs-btn-hover-border-color: #5A5A5A;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4A4A4A;
    --bs-btn-active-border-color: #4A4A4A;

    --bs-btn-disabled-bg: #505050;
    --bs-btn-disabled-border-color: #505050;
}

/* 위험 버튼 (Delete / Warning) */
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #B24545;
    --bs-btn-border-color: #B24545;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #983B3B;
    --bs-btn-hover-border-color: #983B3B;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7F2F2F;
    --bs-btn-active-border-color: #7F2F2F;

    --bs-btn-disabled-bg: #B24545;
    --bs-btn-disabled-border-color: #B24545;
}

/* 라이트 버튼 (흰색 계열) */
.btn-light {
    --bs-btn-color: #333;
    --bs-btn-bg: #E0E0E0;
    --bs-btn-border-color: #E0E0E0;

    --bs-btn-hover-color: #333;
    --bs-btn-hover-bg: #D6D6D6;
    --bs-btn-hover-border-color: #D6D6D6;

    --bs-btn-active-color: #333;
    --bs-btn-active-bg: #C8C8C8;
    --bs-btn-active-border-color: #C8C8C8;
}

/* 아웃라인 버튼 */
.btn-outline-primary {
    --bs-btn-color: #7FADE0;
    --bs-btn-border-color: #7FADE0;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3A6FB0;
    --bs-btn-hover-border-color: #3A6FB0;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #325F99;
    --bs-btn-active-border-color: #325F99;
}

.btn-outline-secondary {
    --bs-btn-color: #D0D0D0;
    --bs-btn-border-color: #777;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5A5A5A;
    --bs-btn-hover-border-color: #5A5A5A;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4A4A4A;
    --bs-btn-active-border-color: #4A4A4A;
}


/* ===== Section 구간 라벨 ===== */
.section-label {
    display: inline-block;
    padding: 6px 14px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    background: #2f2f2f;
    border-left: 4px solid #4ea6ff;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

/* 큰 구간 간격 */
.section-block {
    margin-bottom: 60px;
}

/* info-block과 section-label 간 거리 조절 */
.section-block .info-block {
    margin-top: 12px;
}

/* 구간 사이 Divider */
.section-divider-line {
    border-top: 1px solid #4a4a4a;
    margin: 60px 0;
    opacity: 0.5;
}


/* 전체 영역 */
.MemberOutWrap {
    background: #2f2f2f;
    min-height: 90vh;
}

/* 경고 박스 */
.out-warning-box {
    background: #3b3b3b;
    border-left: 5px solid #c94545;
    padding: 28px 24px;
    border-radius: 12px;
    box-shadow: 0 0 14px rgba(0,0,0,0.25);
    color: #e0e0e0;
}

/* 제목 */
.out-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ff6363;
    margin-bottom: 16px;
}

/* 텍스트 */
.out-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #d5d5d5;
}

/* 이메일 강조 */
.out-email {
    background: #585858;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #fff;
}

/* 구분선 */
.out-divider {
    border-top: 1px solid #555;
    margin: 18px 0;
    opacity: 0.5;
}

/* 입력창 */
.out-input {
    background: #4a4a4a;
    border: 1px solid #5c5c5c;
    color: #fff;
}
.out-input:focus {
    background: #4a4a4a;
    border-color: #76b3ff;
    box-shadow: 0 0 6px rgba(118,179,255,0.5);
    color: #fff;
}

/* 탈퇴 버튼 (레드 강조) */
.btn-out-submit {
    background: #c94545;
    color: #fff;
    padding: 12px 14px;
    font-size: 1.05rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    transition: background 0.2s;
}
.btn-out-submit:hover {
    background: #b33b3b;
}
.btn-out-submit:active {
    background: #962f2f;
}