/*** 인트로 ***/
.layer_intro {position: fixed; top: 0; left: 50%; display: block; width: 100%; height: 100vh; background: var(--WT); overflow: hidden; transform: translateX(-50%); z-index: 9999;}  /* 2026-02-25 Q11924 100% -> 100vh 로 수정 */
.layer_intro.show {background: var(--WT);}
.layer_intro.complete {display: none;}
.layer_intro .box_wrap {position: absolute; top: 0; left: 50%; width: 100%; max-width: 768px; height: 100%; z-index: 1; transform: translateX(-50%);}
.layer_intro .box_wrap .title {position: absolute; top: 95px; left: 0; width: 100%; z-index: 2;}
.layer_intro .box_wrap .title > .h3_eb {display: block; line-height: 36px; text-align: center;}
.layer_intro .box_wrap .logo {position: absolute; bottom: 100px; left: 50%; width: 150px; z-index: 2; transform: translateX(-50%);}
.layer_intro .card_box {position: absolute; top: 50%; left: 50%; width: 184px; height: 237px; z-index: 2; transform: translate(-50%, -50%);}
.layer_intro .card_box .card { width: 150px; margin: 0 auto;}
.layer_intro .card_box .card.act {display: block;}
.layer_intro .intro_box {position: absolute; top: 0; left: 50%; display: block; width: calc(100% - 24px); height: calc((100vh + 20px) / 2); background: var(--BK_a8); border-radius: 16px; transform: translate(-50%, -16px); z-index: 1; max-width: 768px;} /* 2026-02-25 Q11924 100% -> 100vh 로 수정 */
.layer_intro .intro_box.box_bottom {top: 50%; transform: translate(-50%, 6px);}
.layer_intro .bg_header {position: relative; width: 100%; height: 64px; background: var(--WT_20_ex); opacity: 1;}
.layer_intro .bg_body {position: relative; width: 100%; height: calc(100% - 64px); background: var(--WT_20_ex); opacity: 1;}
.layer_intro .box_top.animate {animation: topmotion 0.8s ease-in-out forwards;}
.layer_intro .box_bottom.animate {animation: botmotion 1s ease-in-out forwards;}
.layer_intro .box_bottom.fadeout {animation: botfadeout 1s ease-in-out forwards;}
.layer_intro .bg_header.fadeout {animation: fadeout 1s ease-in-out forwards;}
.layer_intro .bg_body.fadeout {animation: fadeout 1s ease-in-out forwards;}
.layer_intro.fadeout {animation: fadeout 1s ease-in-out forwards;}



@keyframes topmotion {
    0% {top: 0; width: calc(100% - 24px);}
    30% {opacity: 1;}
    100% {top: -40%; width: 100%; opacity: 0;}
}
@keyframes botmotion {
    0% {width: calc(100% - 24px); top: 50%; height: calc((100% + 20px) / 2);}
    80% {width: calc(100% - 15px); top: 158px; height: 326px; background: var(--BK_8);}
    100% {width: calc(100% - 15px); top: 158px; height: 326px; background: var(--BK_12);}
}
@keyframes botfadeout {
    0% {width: calc(100% - 15px); top: 158px; height: 326px; background: var(--BK_12); opacity: 1;}
    100% {width: calc(100% - 15px); top: 158px; height: 326px; background: var(--BK_12); opacity: 0;}
}
@keyframes fadeout {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

.intro_gate {margin-top: 86px; text-align: center;}
.intro_gate .gate_list {display: flex; flex-direction: column; margin-top: 20px; border-top: 1px solid #000;}
.intro_gate .gate_list > li {border-bottom: 1px solid #000;}
.intro_gate .gate_list .chk_label {display: block; padding: 26px 0;}

/* 인트로 */
.intro_gate { margin: 64px 40px; margin-top: clamp(64px, 9vh, 84px); text-align: left; }
.intro_gate .gate_list { display: block; margin-top: 16px; margin-bottom: 48px; margin-bottom: clamp(48px, 5.7vh, 56px); border-top: 0;}
.intro_gate .gate_list.list2 { margin-bottom: clamp(72px, 8.5vh, 80px) + env(safe-area-inset-bottom); }
.intro_gate .gate_list .chk_label { padding: 26px 16px 24px; background: url(/officiallounge/images/ico_arrowB_forward_bk.svg) no-repeat center right; }
.intro_gate .gate_list input:checked + .chk_label {color: #000; background-color: #F2F1EE; /*background-image: url(/officiallounge/images/ico_arrowB_forward_wh.svg);*/ }
 
.intro_gate .gate_list > li { border-top: 1px solid #000; border-bottom: 0; }
.layer_intro .box_wrap .logo { height: 35px; }
.layer_intro .box_wrap .logo .white { display: block; }
.layer_intro .box_wrap .logo .dark { display: none; }
/* 인트로 간격 배치 수정 */
.layer_intro .box_wrap .title { top: calc(clamp(80px, 11.3vh, 110px) + env(safe-area-inset-top)); }
/* .layer_intro .card_box { top: clamp(80px, 11.3vh, 110px); } */
.layer_intro .box_wrap .logo { bottom: calc(clamp(48px, 10vh, 112px) + env(safe-area-inset-bottom)); }

/* 인트로 카드 에니메이션 수정 */
.layer_intro .card_box {width: 150px;}
.layer_intro .card_box .card { position: absolute; left: 0; top: 0; opacity:0; transition: opacity 0.15s linear; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); will-change: opacity;}
.layer_intro .card_box .card.active { opacity: 1; }

/* card main */
.cardmain-content { padding: 24px 24px 24px 28px; top: auto;}
.cardmain-content .card-tit.dpfx,
.cardmain-content .card-tit .dpfx {position: relative; display: flex; align-items: center; gap: 8px;}

/* selectbox */
.cardmain-content .ui-select.select_type2 .select-btn {width: auto; height: 24px; padding: 3px 5px 3px 9px; border: 1px solid var(--BK_a12); border-radius: 14px;}
.cardmain-content .ui-select.select_type2 .select-btn > span {font-size: 12px; line-height: 16px; color: var(--BK_a64);}
.cardmain-content .ui-select.select_type2 .select-btn.on > span {font-weight: 500; color: var(--BK_a64);}
.ui-select-dropdown {position: absolute; top: 0; left: 0; display: none; padding: 16px 0; background: var(--WT); border-radius: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 998;}
.ui-select-dropdown > .select_list.w140 {width: 140px;}
.ui-select-dropdown li + li,
.ui-select-dropdown li + li {margin-top: 20px;}
.ui-select-dropdown .cd_chk {position: relative;}
.ui-select-dropdown .cd_chk .chk_label {display: flex; justify-content: space-between; align-items: center; padding: 0 16px;}
.ui-select-dropdown .cd_chk .chk_label > span {display: block; height: 20px; word-break: keep-all;}
.ui-select-dropdown .cd_chk .chk_label .bul_chk {display: block; width: 24px; height: 24px; background: url(/officiallounge/images/ico_select_chk.svg) no-repeat 0 0/24px; opacity: 0;}
.ui-select-dropdown .cd_chk input:checked + .chk_label {font-weight: 700;}
.ui-select-dropdown .cd_chk input:checked + .chk_label .bul_chk {opacity: 1;}

/* tooltip */
.cardmain-content .wrap_tooltip {position: static;}
.cardmain-content .btn_tooltip {display: flex; align-items: center; height: 22px; padding: 3px 0;}
.cardmain-content .btn_tooltip > span {position: relative; padding-left: 13px; font-size: 10px; font-weight: 500; line-height: 12px;}
.cardmain-content .btn_tooltip > span::before {content: ''; position: absolute; top: 50%; left: 0; display: block; width: 13px; height: 13px; background: url(/officiallounge/images/ico_alert_tooltip.svg) no-repeat 0 0 / 13px; transform: translateY(-50%);}
.cardmain-content .box_tooltip {position: absolute; top: 100%; bottom: auto; left: -4px; right: auto; display: none; width: 292px; margin-top: 6px; padding: 0; background: var(--WT_20_ex); border-radius: 8px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.16); z-index: 100;}
.cardmain-content .box_tooltip::after {display: none;}
.cardmain-content [class^="btn_tooltip"]:focus + .box_tooltip,
.cardmain-content [class^="btn_tooltip"]:hover + .box_tooltip {display:none;}
.cardmain-content .btn_tooltip.on + .box_tooltip {display: block;}
.cardmain-content .box_tooltip > .bullet {position: absolute; top: -3px; width: 6px; height: 6px; margin-left: -3px;}
.cardmain-content .box_tooltip > .bullet::before {content: ''; position: absolute; top: 50%; left: 50%; display: block; width: 6px; height: 6px; background: var(--WT_20_ex); border: 1px solid var(--BK_a8); transform: translate(-50%, -50%) rotate(45deg);}
.cardmain-content .box_tooltip > .bullet::after {content: ''; position: absolute; bottom: -3px; left: 50%; display: block; width: 7px; height: 6px; background:var(--WT_20_ex); transform: translateX(-50%); z-index: 1;}
.cardmain-content .box_tooltip .inner_tooltip {position: relative; padding: 16px 16px 8px; border: 1px solid var(--BK_a8); border-radius: 8px;}
.cardmain-content .box_tooltip .inner_tooltip .box {margin-top: 8px;}
.cardmain-content .box_tooltip .inner_tooltip .box + .box {margin-top: 16px;}
.cardmain-content .box_tooltip .btn_close_tooltip {position: absolute; top: 12px; right: 12px; display: block; width: 20px; height: 20px; background:url(/officiallounge/images/ico_close_tooltip.svg) no-repeat 0 0/20px;}
.cardmain-content .box_tooltip [class^="bul_"][class*="list02"] > li {padding: 4px 0 4px 8px; font-size: 12px; line-height: 16px; word-break: keep-all;}
.cardmain-content .box_tooltip [class^="bul_"][class*="list02"] > li::before {top: 11px;}
.cardmain-content .box_tooltip [class^="bul_"][class*="list02"] > li + li {margin: 0;}

/*** 다크모드 ***/
@media (prefers-color-scheme: dark) {
    
    /* root: { --WT: #333; } */
    /*** 인트로 ***/
    /* .layer_intro {background: #333;} */
    /* .layer_intro .intro_box, 
    .layer_intro .intro_box.box_bottom { background: var(--BK_a8); } */
    .svg * { fill: #fff; }
    .intro_gate .gate_list > li { border-color: #fff; }
    .intro_gate .gate_list .chk_label { background-image: url(/officiallounge/images/ico_arrowB_forward_wh.svg);}
    .intro_gate .gate_list input:checked + .chk_label {color: #fff; background-color: rgba(0, 0, 0, 0.88); /*background-image: url(/officiallounge/images/ico_arrowB_forward_bk.svg);*/ }
    .layer_intro .box_wrap .logo .white { display: none; }
    .layer_intro .box_wrap .logo .dark { display: block; }

    /* selectbox */
    .ui-select .select-btn .bul {background: url(/officiallounge/images/ico_arrowB_down_whta40_w20.svg) no-repeat 0 0/20px;}
    .ui-select-dropdown {background: rgba(92,92,92,1);}
    .ui-select-dropdown .cd_chk .chk_label .bul_chk {background: url(/officiallounge/images/ico_select_chk_wht.svg) no-repeat 0 0/24px;}

    /* Tooltip */
    .cardmain-content .btn_tooltip > span::before {background: url(/officiallounge/images/ico_alert_tooltip_wht.svg) no-repeat 0 0 / 13px;}
    .cardmain-content .box_tooltip .btn_close_tooltip {background:url(/officiallounge/images/ico_close_tooltip_bk.svg) no-repeat 0 0/20px;}
}