@charset "utf-8";

:root{
    --color-main : #EA5504;
    --color-snd : #26B7BC;
    --color-snd7 : #5BC9CD;
    --color-snd2 : #D4F1F2;
    --color-thd : #AF52DE;


    --color-sub : #2E323B;
    --color-red : #EC171E;
    --color-yel : #E8B931;
    --color-bk1 : #111;
    --color-bk3 : #333;
    --color-bk6 : #666;
    --color-bk9 : #999;
    --color-gra : #aaa;
    --color-grb : #bbb;
    --color-grc : #ccc;
    --color-grd : #ddd;
    --color-gre : #eee;
    --color-wh4 : #f4f4f4;
    --color-wh8 : #f8f8f8;
    --color-whf : #fff;
}

* { letter-spacing: -0.05em; }

.swal2-styled.swal2-confirm {
    font-size: 16px !important;
    background: var(--color-sub) !important;
}

body { overflow:hidden;overflow-y:scroll;}

/* - 코드 초기화 - */
div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,form,fieldset,legend,input,textarea,button,select { border:0px;padding:0px; margin:0px; font-family:'Pretendard', sans-serif;font-size:13px;line-height:160%; letter-spacing:-0.05em;font-weight:400; word-wrap: break-word; word-break: keep-all; }
img {  display:inline-block;border:0px;padding:0px; margin:0px; }
ul,ol,li,dl,dt,dd   { list-style:none;}
table,tr,td,th  { border:0px;padding:0px; margin:0px;border-spacing:0px;}
i,em				{ font-style:normal;vertical-align:middle; }
select { -webkit-appearance:none;appearance:none; -moz-appearance:none; text-indent: 1px; text-overflow: ''; }
input, textarea, button, select {-webkit-appearance:none; -moz-appearance:none; appearance:none;font-family:'Pretendard', sans-serif !important;outline: none;-webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; border-radius:0;background: transparent; box-sizing:border-box;}
button[type=button] { cursor:pointer;outline: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
a                   { text-decoration:none; color:#111;outline:none; cursor:pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
a:visited           { color:#111; }
a:active            { color:#111; }
a:hover             { color:#111; text-decoration:none; }
.clear { float:none;clear:both; }
/* - @코드 초기화 - */

body.renew {display: block;}
body.renew .wrap { background-color: var(--color-whf);min-height:100dvh;height: auto;margin: 0 auto; }
body > .wrap.renew.chat > main.chatWrap { padding: 0rem 2rem 2rem; }

.flat_lg_warp { display: block;padding:20px 0px; }
.flat_lg_warp > hgroup { display: block; padding:100px 80px; margin:0 auto; }
.flat_lg_warp > hgroup > h1 { display:block; font-size:0px; height:104px; background-image:url(../images/sco_bi.svg); background-position: center; background-repeat: no-repeat; background-size: contain; } 
.flat_lg_warp > hgroup > h2 { display:block; font-size:20px; line-height: 30px; margin-top:5px; font-family:"Paperlogy"; font-weight: 900; text-align:center; color:var(--color-main); text-decoration:underline;letter-spacing: -0.05em;}

.flat_lg_warp > .lg_method { padding:10px 40px; }
.flat_lg_warp > .lg_method > .login_btns { display: block;padding:0px 0px; text-align: center;font-size:0px; }
.flat_lg_warp > .lg_method > .login_btns > button { position: relative; display: block;width:100%;border: 2px solid var(--color-main); color:var(--color-main); line-height: 44px;height:48px;font-size:16px;font-weight: 400;margin-top:0px;letter-spacing: -0.05em; border-radius: 5px; vertical-align: bottom; }
.flat_lg_warp > .lg_method > .login_btns > button::before { width:24px;height:24px;content: '';position: absolute;top:10px;left:20px;background-position: center; background-repeat: no-repeat; background-size: contain; }
.flat_lg_warp > .lg_method > .login_btns > button + button { margin-top:4px; }
.flat_lg_warp > .lg_method > .login_btns > button > b { font-weight: 600; }
.flat_lg_warp > .lg_method > .login_btns > button[name='kakao'] { border: 2px solid #FAE300; background-color:#FAE300; color:var(--color-bk1); }
.flat_lg_warp > .lg_method > .login_btns > button[name='kakao']::before {  background-image:url(../images/ico_social_kakao.svg); }
.flat_lg_warp > .lg_method > .login_btns > button[name='naver'] { border: 2px solid #03C75A; background-color:#03C75A; color:var(--color-whf); }
.flat_lg_warp > .lg_method > .login_btns > button[name='naver']::before {  background-image:url(../images/ico_social_naver.svg); }
.flat_lg_warp > .lg_method > .login_btns > button[name='google'] { border: 2px solid var(--color-grd); background-color:var(--color-whf); color:var(--color-bk1); }
.flat_lg_warp > .lg_method > .login_btns > button[name='google']::before {  background-image:url(../images/ico_social_google.svg); }
.flat_lg_warp > .lg_method > .login_btns > button[name='apple'] { border: 2px solid var(--color-bk1); background-color:var(--color-bk1); color:var(--color-whf); }
.flat_lg_warp > .lg_method > .login_btns > button[name='apple']::before {  background-image:url(../images/ico_social_apple.svg); }

.flat_lg_warp > .lg_method > p { position: relative;height:26px;line-height: 26px; margin-top:30px; }
.flat_lg_warp > .lg_method > p::before { content:'';position: absolute;top:12px;left:0px;right:0px;height:2px;background-color:var(--color-gre);display:block;z-index: 9; }
.flat_lg_warp > .lg_method > p > b { display: block;line-height: 26px;height: 26px;color:var(--color-grb);margin:0 auto;width:70px;text-align: center;background-color: var(--color-whf);position:relative;z-index: 10; }
.flat_lg_warp > .lg_method > .goto_btns { display: block; margin-top:30px;padding:0px 0px; text-align: center;font-size:0px; }
.flat_lg_warp > .lg_method > .goto_btns > button { display: inline-block;width:120px;border: 2px solid var(--color-main); color:var(--color-main); line-height: 44px;height:48px;font-size:16px;font-weight: 600;margin-top:0px;letter-spacing: -0.05em; border-radius: 5px; vertical-align: bottom;; }
.flat_lg_warp > .lg_method > .goto_btns > button[name='login'] { width:calc( 100% - 124px );background-color: var(--color-main); color:var(--color-whf); margin-left:4px; }
.flat_lg_warp > .lg_method > .goto_btns > a { display: inline-block; line-height: 30px;padding:0px 10px;font-size:15px;position: relative;}
.flat_lg_warp > .lg_method > .goto_btns > a + a { margin-left:2px; }
.flat_lg_warp > .lg_method > .goto_btns > a + a::before { content: '';display: block;position: absolute;background-color: var(--color-grd);width:2px;height:10px;top:10px;left:-2px; }
.flat_lg_warp > .lg_method > .goto_btns > a.join { font-weight: 600; }

.flat_lg_warp > .lg_form { padding:0px 40px; }
.flat_lg_warp > .lg_form > h4 { font-size:22px; font-family:"Paperlogy"; font-weight: 700; color:var(--color-sub);margin-bottom: 5px;letter-spacing: -0.05em; }
.flat_lg_warp > .lg_form > form {  }
.flat_lg_warp > .lg_form > form > span { display: block;background-color: var(--color-gre);position: relative;padding-left:46px;border-radius: 5px; }
.flat_lg_warp > .lg_form > form > span + span {margin-top:10px;}
.flat_lg_warp > .lg_form > form > span > input[type=text],
.flat_lg_warp > .lg_form > form > span > input[type=password] { display:block;width:100%;line-height: 46px; height:46px; border: 0px;font-size:15px;padding:0px 15px;letter-spacing: -0.05em; }
.flat_lg_warp > .lg_form > form > span > input::placeholder { color:var(--color-grb); }
.flat_lg_warp > .lg_form > form > span::before { content: '';display: block;position: absolute; top:8px;left:0px; height: 30px;line-height: 30px;font-size:24px;vertical-align: bottom;width: 46px;margin-right: 0px;font-family: 'xeicon' !important; color:var(--color-bk9);text-align:center; border-right: 1px solid var(--color-grd);}
.flat_lg_warp > .lg_form > form > span.id::before { content:'\e9f5'; }
.flat_lg_warp > .lg_form > form > span.pw::before { content:'\e966'; }
.flat_lg_warp > .lg_form > form > button { display: block;width:100%;background-color: var(--color-main); line-height: 52px;height:52px;font-size:18px;font-weight: 600;margin-top:10px;letter-spacing: -0.05em;color:var(--color-whf);border-radius: 5px; }
.flat_lg_warp > .lg_form > .checkbox { display:block;margin-top:20px;padding:10px 0px; }

.flat_lg_warp > .lg_form > .checkbox > label { position:relative; display:inline-block;margin-right:0px; padding:0px 0px;padding-left:22px; height:22px; color:var(--color-bk9); text-align:left; line-height:22px; vertical-align:bottom; cursor:pointer; overflow:hidden; font-size:0px;}
.flat_lg_warp > .lg_form > .checkbox > label > input[type=checkbox] { display:none; }
.flat_lg_warp > .lg_form > .checkbox > label > input[type=checkbox] + span  { display:inline-block;line-height:22px;vertical-align:bottom;font-size:15px;margin-left:7px; }
.flat_lg_warp > .lg_form > .checkbox > label > input[type=checkbox] + span:before { background: var(--color-whf);position:absolute; top:0px; left:0px; width:22px;height:22px; border-radius: 50%; background:var(--color-gre); content: '';border:0px; font-size:22px;text-align:center;line-height:20px;font-family: 'xeicon' !important; color:var(--color-whf); content: "\e928"; }
.flat_lg_warp > .lg_form > .checkbox > label > input[type=checkbox]:checked + span  { color:var(--color-bk1); -webkit-tap-highlight-color:transparent;font-weight: 600; }
.flat_lg_warp > .lg_form > .checkbox > label > input[type=checkbox]:checked + span:before {  background: var(--color-whf); font-size:20px;text-align:center;line-height:22px; font-family: 'xeicon' !important; display: inline-block; background:var(--color-main);color:var(--color-whf); content: "\e928"; }

.flat_lg_warp > .lg_form > .goto_btns { display: block; margin-top:40px;padding:10px 0px; text-align: center;font-size:0px; }
.flat_lg_warp > .lg_form > .goto_btns > a { display: inline-block; line-height: 30px;padding:0px 10px;font-size:15px;position: relative;}
.flat_lg_warp > .lg_form > .goto_btns > a + a { margin-left:2px; }
.flat_lg_warp > .lg_form > .goto_btns > a + a::before { content: '';display: block;position: absolute;background-color: var(--color-grd);width:2px;height:10px;top:10px;left:-2px; }
.flat_lg_warp > .lg_form > .goto_btns > a.join { font-weight: 600; }

.flat_lg_warp > .copy { display: block; margin-top:80px;padding:10px 0px; text-align: center;font-size:14px;line-height: 20px;color: var(--color-bk9); }

header.flat { display:block;height:70px;position: sticky;top:0px;right:0px;left:0px;padding:10px 10px;background:var(--color-whf);box-shadow:none;}
header.flat > .btns { display:block;position:absolute;top:10px;height:50px; }
header.flat > h1 { display: block; padding:0px 35px;font-size:20px;font-weight:600;color:var(--color-bk3);line-height:50px;height:50px;overflow: hidden;font-family:"Paperlogy";letter-spacing: -0.05em;}
header.flat > span.search { display: none;background-color: var(--color-gre);position: relative;border-radius: 25px;border: 1px solid var(--color-grc);margin:0px 35px; }
header.flat > span.search > input[type=text] { display:block;width:100%;line-height: 48px; height:48px; border: 0px;font-size:15px;padding:0px 20px;letter-spacing: -0.05em; }
header.flat > span.search > button { display: block;width:40px;line-height: 48px;height:48px;font-size:20px;color:var(--color-bk1);position: absolute; top:0px;right:5px; }
header.flat > span.search > button::before { content: '\e97a';font-family: 'xeicon' !important;}

header.flat > .btns.lt { left:5px; }
header.flat > .btns.rt { right:5px; }
header.flat > .btns > button { display: inline-block;width:40px;line-height: 50px;height:50px;font-size:20px;color:var(--color-bk1); }
header.flat > .btns > button.history_backward::before { content: '\e93b';font-family: 'xeicon' !important;}
header.flat > .btns > button.search_cancel { display: none; }
header.flat > .btns > button.search_cancel::before { content: '\e921';font-family: 'xeicon' !important;}
header.flat > .btns > button.search_cancel.show { display: block; }
.login_flat > header.flat { display:none; }
.academy_search > header.flat > h1 { display:none; }
.academy_search > header.flat > span.search { display:block; }
.app_install > header.flat { display:none; }

.main > header.flat { padding:10px 15px; }
.main > header.flat > .btns.lt { display:none; }
.main > header.flat > h1 { padding-left:10px; }
.main > header.flat > .btns.rt { right:15px; }
.main > header.flat > h1 > a { display:inline-block; vertical-align: middle; font-size:0px; width:130px;height:50px; background-image:url(../images/sco_top_bi_temp.svg); background-position: center 4px; background-repeat: no-repeat; background-size: contain; }
header.flat > .btns > button { width:40px; }
header.flat > .btns > button.add::before { content: '\e9f8';font-size:28px;font-family: 'xeicon' !important;display:block;}
header.flat > .btns > button.menu::before { content: '\e91c';font-size:28px;font-family: 'xeicon' !important;display:block;}

.flat_jn_warp { padding:0px;min-height: calc( 100dvh - 140px );position: relative;  }
.flat_jn_warp > hgroup { padding:40px 30px; }
.flat_jn_warp.landing { min-height: calc( 100dvh - 70px ); }
.flat_jn_warp.landing > hgroup { padding-top:30px; }
.flat_jn_warp > hgroup > h1 { display:block; font-size:0px; height:34px; background-image:url(../images/sco_parent_bi.svg); background-position: center left; background-repeat: no-repeat; background-size: contain; margin-top:8px; margin-bottom:70px;} 
.flat_jn_warp > hgroup > h3 { display:block; font-size:28px; line-height: 34px; font-family:"Paperlogy"; font-weight: 700; text-align:left; color:var(--color-sub); letter-spacing: -0.05em; }
.flat_jn_warp > hgroup > h3 > b { font-weight: 700;color:var(--color-main); }
.flat_jn_warp > hgroup > h4 { display:block; font-size:24px; line-height: 30px; font-family:"Paperlogy"; font-weight: 700; text-align:left; color:var(--color-sub); letter-spacing: -0.05em; }
.flat_jn_warp > hgroup > h4 > b { font-weight: 700;color:var(--color-main); }
.flat_jn_warp > hgroup.completed { padding:140px 30px 60px 30px; }
.flat_jn_warp > hgroup.completed.student { padding:90px 30px 20px 30px; }
.flat_jn_warp > hgroup.completed::before { display:block;content:""; width:110px;height:110px;margin:0 auto 50px auto;background-image:url(../images/ico_completed.svg);background-position: center;background-size: cover;background-repeat: no-repeat; }
.flat_jn_warp > hgroup.completed > h3 { text-align: center; }
.flat_jn_warp > hgroup.completed > h3 > strong { font-weight: 600;font-size:32px;letter-spacing: 0.05em; }
.flat_jn_warp > hgroup.completed > h4 { text-align: center; }
.flat_jn_warp > div.academy_msg  { text-align: center; margin-bottom: 70px;}
.flat_jn_warp > div.academy_msg > p { display:block; font-size:14px; line-height: 20px; text-align:center; margin-top:10px; margin-bottom: 20px; }
.flat_jn_warp > div.academy_msg > button { font-family:"Pretendard", sans-serif !important;font-size:13px;line-height:36px;height:36px;padding:0px 10px;border-radius: 1px;background: var(--color-main);color:var(--color-whf);}
.flat_jn_warp > div.academy_msg > button.btnSearchAcademy { width:100px;padding:0px; background: var(--color-sub); }

.flat_jn_warp > hgroup.install { padding:160px 30px 60px 30px; }

.flat_jn_warp > hgroup.install > h1 { display:block; font-size:0px; height:104px; background-image:url(../images/sco_bi.svg); background-position: center; background-repeat: no-repeat; background-size: contain; margin-top:0px; margin-bottom:0px;} 
.flat_jn_warp > hgroup.install > h2 { display:block; font-size:20px; line-height: 30px; margin-top:5px; font-family:"Paperlogy"; font-weight: 900; text-align:center; color:var(--color-main); text-decoration:underline;letter-spacing: -0.05em;}
.flat_jn_warp > hgroup.install > h3 { text-align: center;margin-top:100px; }
.flat_jn_warp > hgroup.install > h3 > strong { font-weight: 600;font-size:32px;letter-spacing: 0.05em; }
.flat_jn_warp > hgroup.install > h4 { text-align: center; }

.flat_jn_warp > .terms_form { padding:0px 30px; }
.flat_jn_warp > .terms_form label { position:relative; display:block;margin-right:0px; padding:0px 0px;padding-left:22px; height:22px; color:var(--color-bk9); text-align:left; line-height:22px; vertical-align:bottom; cursor:pointer; overflow :visible; font-size:0px;}
.flat_jn_warp > .terms_form label > input[type=checkbox] { display:none; }
.flat_jn_warp > .terms_form label > input[type=checkbox] + span  { display:inline-block;line-height:22px;vertical-align:bottom;font-size:15px;margin-left:7px; }
.flat_jn_warp > .terms_form label > input[type=checkbox] + span:before { background: var(--color-whf);position:absolute; top:0px; left:0px; width:22px;height:22px;border-radius: 50%; background:var(--color-gre); content: '';border:0px; font-size:20px;font-weight: 400; text-align:center;line-height:22px;font-family: 'xeicon' !important; color:var(--color-whf); content: "\e928"; }
.flat_jn_warp > .terms_form label > input[type=checkbox]:checked + span  { color:var(--color-bk1); -webkit-tap-highlight-color:transparent;font-weight: 600; }
.flat_jn_warp > .terms_form label > input[type=checkbox]:checked + span:before {  background: var(--color-whf); font-size:20px;text-align:center;line-height:22px; font-family: 'xeicon' !important; display: inline-block; background:var(--color-sub);color:var(--color-whf); content: "\e928"; }
.flat_jn_warp > .terms_form > .all { padding:20px 0px;border-bottom: 1px solid var(--color-grd); }
.flat_jn_warp > .terms_form > .all > label > input[type=checkbox] + span { font-size:16px;font-weight: 600;color:var(--color-bk1); }
.flat_jn_warp > .terms_form > .terms_list { padding:20px 0px; }
.flat_jn_warp > .terms_form > .terms_list > p { display:block;padding:10px 0px;position: relative; }
.flat_jn_warp > .terms_form > .terms_list > p > label { display:inline-block; }
.flat_jn_warp > .terms_form > .terms_list > p > label > input[type=checkbox] + span { color:var(--color-bk1); }
.flat_jn_warp > .terms_form > .terms_list > p > label + label { margin-top:20px; }
.flat_jn_warp > .terms_form > .terms_list > p > a { display: block;position: absolute; top:50%;margin-top:-20px;right:0px;width:30px;height:40px;line-height:40px;font-size:0px;text-align: center; }
.flat_jn_warp > .terms_form > .terms_list > p > a::before { content: '\e93f';font-family: 'xeicon' !important;font-size:20px;color:var(--color-bk9);}

.flat_jn_warp > .choice_form { padding:0px 30px; }
.flat_jn_warp > .choice_form label { position:relative; display:block;margin-right:0px; padding:0px 0px;padding-left:0px; height:auto; color:var(--color-bk9); text-align:left; line-height:22px; vertical-align:bottom; cursor:pointer; overflow :visible; font-size:0px;}
.flat_jn_warp > .choice_form label + label { margin-top:10px; }
.flat_jn_warp > .choice_form label > input[type=radio] { display:none; }
.flat_jn_warp > .choice_form label > input[type=radio] + span  { display:block;line-height:18px;font-size:13px;margin-left:0px;color:var(--color-grb);padding:30px 25px 30px 95px;background: var(--color-gre);border-radius: 10px; }
.flat_jn_warp > .choice_form label > input[type=radio] + span > b { display:block;line-height:24px;font-size:18px;color:var(--color-bk1);margin-bottom:5px; }
.flat_jn_warp > .choice_form label > input[type=radio] + span:before { position: absolute; top:50%;margin-top:-25px;left:25px; width:50px;height:50px; display:block; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain;border: 0px;border-radius: 0px;}
.flat_jn_warp > .choice_form label.me > input[type=radio] + span:before { background-image:url(../images/ico_user_check.svg); }
.flat_jn_warp > .choice_form label.parent > input[type=radio] + span:before { background-image:url(../images/ico_users.svg); }
.flat_jn_warp > .choice_form label > input[type=radio]:checked + span  { color:var(--color-whf); font-weight: 400; background: var(--color-sub); }
.flat_jn_warp > .choice_form label > input[type=radio]:checked + span > b { color:var(--color-whf); }
.flat_jn_warp > .choice_form label > input[type=radio]:checked + span:before { display:block;content: "";filter: brightness(0) invert(1);}

.flat_jn_warp > .info_form { padding:0px 30px 30px 30px; }
.flat_jn_warp > .info_form > form {  }
.flat_jn_warp > .info_form > form > p { display:block; font-size:0px; }
.flat_jn_warp > .info_form > form > p.auth_no { display: none; }
.flat_jn_warp > .info_form > form > p.auth_no.show { display: block; }
.flat_jn_warp > .info_form > form > p.auth_no.hide { display: none; }
.flat_jn_warp > .info_form > form > p > label { display: block;background-color: transparent;color:var(--color-bk3);font-size:14px;padding:0px;line-height:22px;height:auto;margin:0px;margin-bottom:2px; }
.flat_jn_warp > .info_form > form > p > label.required::after { display:inline-block;content: '*';vertical-align: bottom;margin-left:2px;color:var(--color-red); }
.flat_jn_warp > .info_form > form > p > span { display: block;background-color: var(--color-gre);position: relative;border-radius: 5px;border: 1px solid var(--color-gre); }
.flat_jn_warp > .info_form > form > p > span.readonly { display: block;background-color: var(--color-whf);position: relative;border-radius: 5px; }
.flat_jn_warp > .info_form > form > p + p {margin-top:25px;}
.flat_jn_warp > .info_form > form > p > span > input[type=text],
.flat_jn_warp > .info_form > form > p > span > input[type=password],
.flat_jn_warp > .info_form > form > p > span > input[type=number] { display:block;width:100%;line-height: 44px; height:44px; border: 0px;font-size:15px;padding:0px 10px;letter-spacing: -0.05em; }
.flat_jn_warp > .info_form > form > p > span > input::placeholder { color:var(--color-grb); }
.flat_jn_warp > .info_form > form > p > span.readonly > input { font-weight: 600; }
.flat_jn_warp > .info_form > form > p > span > i { font-family:"Pretendard", sans-serif !important;font-size:13px;line-height:28px;height:28px;padding:0px 10px;border-radius: 3px;background: var(--color-sub);color:var(--color-whf);position: absolute;top:8px;right:8px; }
.flat_jn_warp > .info_form > form > p > span > i.countdown { font-size:14px;font-weight:600; line-height:28px;height:28px;padding:0px 0px;border-radius: 0px;background: transparent;color:var(--color-bk1); }
.flat_jn_warp > .info_form > form > p > span > i.countdown.right { right:115px; }
.flat_jn_warp > .info_form > form > p > span > button { font-family:"Pretendard", sans-serif !important;font-size:13px;line-height:36px;height:36px;padding:0px 10px;border-radius: 1px;background: var(--color-main);color:var(--color-whf);position: absolute;top:4px;right:4px; }
.flat_jn_warp > .info_form > form > p > span > button.send { width:100px;padding:0px; }
.flat_jn_warp > .info_form > form > p > span > button.send::before { content:'인증번호 받기'; }
.flat_jn_warp > .info_form > form > p > span > button.send.re::before { content:'다시 받기'; }
.flat_jn_warp > .info_form > form > p > span > button.send.re { background: var(--color-bk9); }

.flat_jn_warp > .info_form > form > p > span > button.verify { width:100px;padding:0px; }
.flat_jn_warp > .info_form > form > p > span > button.verify::before { content:'인증하기'; }
.flat_jn_warp > .info_form > form > p > span > button.verify.completed::before { content:'인증완료'; }
.flat_jn_warp > .info_form > form > p > span > button.verify.completed { background: var(--color-sub); }

.flat_jn_warp > .info_form > form > p > span.student_id_info { height: 25px; line-height: 25px; background: none; border: none; font-size: 13px; }

.flat_jn_warp > .info_form > form > p > span.social { display: block;background-color: transparent;position: relative;border-radius: 5px;border: 1px solid transparent; line-height: 44px;font-size:0px; }
.flat_jn_warp > .info_form > form > p > span.social > i { width:42px;height:42px;display:inline-block;position: relative;top:auto;right:auto; background-position: center; background-repeat: no-repeat; background-size: 24px;vertical-align: bottom;border-radius: 8px; }
.flat_jn_warp > .info_form > form > p > span.social > i.kakao { border: 2px solid #FAE300; background-color:#FAE300; background-image:url(../images/ico_social_kakao.svg); }
.flat_jn_warp > .info_form > form > p > span.social > i.naver { border: 2px solid #03C75A; background-color:#03C75A;background-image:url(../images/ico_social_naver.svg); }
.flat_jn_warp > .info_form > form > p > span.social > i.google { border: 2px solid var(--color-grd); background-color:var(--color-whf); background-image:url(../images/ico_social_google.svg); }
.flat_jn_warp > .info_form > form > p > span.social > i.apple { border: 2px solid var(--color-bk1); background-color:var(--color-bk1);background-image:url(../images/ico_social_apple.svg); }
.flat_jn_warp > .info_form > form > p > span.social > b { line-height:42px;height:42px;display:inline-block;margin-left:8px;font-size:16px;font-weight: 600;vertical-align: bottom; }

.flat_jn_warp > .info_form > form > p > span.sel { position:relative;outline: none;display:inline-block;width:49%;margin-top:6px;overflow: hidden;}
.flat_jn_warp > .info_form > form > p > span.sel:after { font-family: 'xeicon' !important; content:"\e942";vertical-align: middle;position:absolute;top:0px;right:12px;display:block;color:var(--color-bk9);font-size:15px;height:46px;line-height:46px;z-index:1;}
.flat_jn_warp > .info_form > form > p > span.sel > select { display:block;width:120%;line-height: 44px; height:44px; border: 0px;font-size:15px;padding:0px 10px;letter-spacing: -0.05em;color:var(--color-bk9);z-index:2;position: relative; }
.flat_jn_warp > .info_form > form > p > span.sel + span.sel { margin-left:2%; }

.flat_jn_warp > .info_form > form > p > em {display:block;font-size:14px;line-height:22px;height:auto;margin-top:2px;color:var(--color-red);}
.flat_jn_warp > .info_form > form > p > em:empty { display:none; }
.flat_jn_warp > .info_form > form > p > b {display:block;font-size:13px;line-height:22px;height:auto;margin-top:2px;color:var(--color-bk9);font-weight: 400;}
.flat_jn_warp > .info_form > form > p > b:empty { display:none; }

.flat_jn_warp > .info_form > .guide_msg { display:block;padding:70px 0px 40px 0px; }
.flat_jn_warp > .info_form > .guide_msg > h5 { display:block; font-size:22px; line-height: 28px; font-family:"Paperlogy"; font-weight: 700; text-align:center; color:var(--color-sub); letter-spacing: -0.05em; }
.flat_jn_warp > .info_form > .guide_msg > p { display:block; font-size:16px; line-height: 20px; text-align:center; color:var(--color-bk9);margin-top:10px; }
.flat_jn_warp > .info_form > .guide_msg > a { display: block; margin: 40px auto 0px auto;width:180px;text-align: center;line-height: 26px;text-decoration: underline;color:var(--color-main);font-weight: 600;font-size:15px;; }

.flat_jn_warp > .waiting_msg { display:block; }
.flat_jn_warp > .waiting_msg.hide > p { display:none; }
.flat_jn_warp > .waiting_msg > .roll { display:none;width:100px;height:10px;overflow: hidden;margin:0 auto;position: relative; }
.flat_jn_warp > .waiting_msg.hide > .roll { display:block; }
.flat_jn_warp > .waiting_msg > .roll > .dots { display:block;position: absolute;width:500px;right:0px;top:0px;font-size: 0px;text-align: right;animation: rolling 1s steps(5) infinite; will-change: transform, opacity; }
.flat_jn_warp > .waiting_msg > .roll > .dots > i { display: inline-block;content:'';width:10px;height:10px;background: var(--color-grb);border-radius: 50%;margin:0px 5px;opacity: 0.4; }
.flat_jn_warp > .waiting_msg > .roll > .dots > i:nth-child(3),
.flat_jn_warp > .waiting_msg > .roll > .dots > i:nth-child(7) {opacity: 0.8;}
.flat_jn_warp > .waiting_msg > .roll > .dots > i:nth-child(4),
.flat_jn_warp > .waiting_msg > .roll > .dots > i:nth-child(6) {opacity: 1;}
.flat_jn_warp > .waiting_msg > .roll > .dots > i:nth-child(5) { background-color: var(--color-bk1);opacity: 1 }
	@keyframes rolling {
        0% { right:0px; }
        100% { right:-100px; }
	}
.flat_jn_warp > .waiting_msg > h5 { display:block; font-size:22px; line-height: 28px; font-family:"Paperlogy"; font-weight: 700; text-align:center; color:var(--color-sub); letter-spacing: -0.05em; }
.flat_jn_warp > .waiting_msg > p { display:block; font-size:16px; line-height: 20px; text-align:center; color:var(--color-bk9);margin-top:10px; }
.flat_jn_warp > .waiting_msg > a { display: block; margin: 40px auto 0px auto;width:180px;text-align: center;line-height: 26px;text-decoration: underline;color:var(--color-main);font-weight: 600;font-size:15px;; }


.flat_acdm_warp { padding:0px;min-height: calc( 100dvh - 70px );position: relative;  }
.flat_acdm_warp > .search_academy { display:block;padding:20px 30px; }
.flat_acdm_warp > .search_academy > .guide { display:block;padding:80px 0px; }
.flat_acdm_warp > .search_academy > .guide > h3 { display:block; font-size:28px; line-height: 34px; font-family:"Paperlogy"; font-weight: 700; text-align:center; color:var(--color-sub); letter-spacing: -0.05em; }
.flat_acdm_warp > .search_academy > .guide > h4 { display:block; font-size:24px; line-height: 30px; font-family:"Paperlogy"; font-weight: 700; text-align:center; color:var(--color-sub); letter-spacing: -0.05em; }
.flat_acdm_warp > .search_academy > .guide > h4 > b { font-weight: 700;color:var(--color-main); }
.flat_acdm_warp > .search_academy > .guide > p { display:block; font-size:16px; line-height: 20px; text-align:center; color:var(--color-bk9);margin-top:10px;letter-spacing: -0.05em; }
.flat_acdm_warp > .search_academy > .guide > p > b { font-weight: 600; }
.flat_acdm_warp > .search_academy > .guide > a { display: block; margin: 40px auto 0px auto;width:100px;text-align: center;line-height: 26px;text-decoration: underline;color:var(--color-main);font-weight: 600;font-size:15px;; }

.flat_acdm_warp > .search_academy > .results { display:none;padding:0px 0px; }
.flat_acdm_warp > .search_academy > .results > p { display:block;font-size:14px;color:var(--color-bk9);line-height: 20px;margin-bottom:10px;letter-spacing: -0.05em; }
.flat_acdm_warp > .search_academy > .results > ul { display:block;font-size:0px; }
.flat_acdm_warp > .search_academy > .results > ul > li { display:block;padding:20px 12px;border-top: 1px solid var(--color-gre);position: relative; }
.flat_acdm_warp > .search_academy > .results > ul > li > h5 { display:block;font-size:18px; line-height: 24px; font-family:"Paperlogy"; font-weight: 700;position: relative;color:var(--color-bk1); }
.flat_acdm_warp > .search_academy > .results > ul > li > h5 > b { color:var(--color-main);font-weight: 700;  line-height: 24px; font-family: "Paperlogy";}
.flat_acdm_warp > .search_academy > .results > ul > li > h5 > em { position:absolute; display:block;font-size:14px; line-height: 18px; font-family:"Pretendard"; font-weight: 600;top:0px;right:0px; }
.flat_acdm_warp > .search_academy > .results > ul > li > p { display:block;font-size:14px; line-height: 20px; color:var(--color-bk6);letter-spacing: -0.05em; }
.flat_acdm_warp > .search_academy > .results > ul > li > i { display: block; position:absolute;bottom:20px;right:10px;background: var(--color-bk9);color: var(--color-whf);height:20px;line-height:20px;font-size:11px;width:60px;text-align: center;border-radius: 3px; }
.flat_acdm_warp > .search_academy > .results > ul > li > i.pending { background: var(--color-bk9); }
.flat_acdm_warp > .search_academy > .results > ul > li > i.pending::before { content:'등록대기'; }
.flat_acdm_warp > .search_academy > .results > ul > li > i.completed { background: var(--color-main); }
.flat_acdm_warp > .search_academy > .results > ul > li > i.completed::before { content:'등록완료'; }

.flat_acdm_warp > .search_academy.result > .guide { display:none; }
.flat_acdm_warp > .search_academy.result > .results { display:block; }

.flat_acdm_warp > .search_academy > .results > .nodata { display:block;padding:80px 0px; }
.flat_acdm_warp > .search_academy > .results > .nodata::before { font-family: 'xeicon' !important;content:'\e9ab';width:120px;height:120px;line-height:120px;color:var(--color-grb);text-align: center;font-size:100px;margin:0 auto;display:block;padding:0px 0px;margin-bottom:20px; }
.flat_acdm_warp > .search_academy > .results > .nodata > h4 { display:block; font-size:24px; line-height: 30px; font-family:"Paperlogy"; font-weight: 700; text-align:center; color:var(--color-sub); letter-spacing: -0.05em; }
.flat_acdm_warp > .search_academy > .results > .nodata > h4 > b { font-weight: 700;color:var(--color-main); }
.flat_acdm_warp > .search_academy > .results > .nodata > p { display:block; font-size:16px; line-height: 20px; text-align:center; color:var(--color-bk9);margin-top:10px;letter-spacing: -0.05em; }

.flat_acdm_warp > .me { display:block;padding:0px 30px;margin-top:50px; }
.flat_acdm_warp > .me > p { display:block;font-size:14px;color:var(--color-bk9);line-height: 20px;margin-bottom:10px;letter-spacing: -0.05em; }
.flat_acdm_warp > .me > div { display:block;font-size:0px;background: var(--color-wh8);padding:15px 12px;position: relative; }
.flat_acdm_warp > .me > div + div { margin-top:8px; }
.flat_acdm_warp > .me > div > h5 { display:block;font-size:18px; line-height: 24px; font-family:"Paperlogy"; font-weight: 700;position: relative;color:var(--color-bk1); }
.flat_acdm_warp > .me > div > h5 > b { color:var(--color-main);font-weight: 700; }
.flat_acdm_warp > .me > div > h5 > em { position:absolute; display:block;font-size:14px; line-height: 18px; font-family:"Pretendard"; font-weight: 600;top:0px;right:0px; }
.flat_acdm_warp > .me > div > p { display:block;font-size:14px; line-height: 20px; color:var(--color-bk6);letter-spacing: -0.05em; }
.flat_acdm_warp > .me > div > i { display: block; background: var(--color-bk9);color: var(--color-whf);height:20px;line-height:20px;font-size:11px;width:60px;text-align: center;border-radius: 3px;margin-top:5px; }
.flat_acdm_warp > .me > div > i.pending { background: var(--color-bk9); }
.flat_acdm_warp > .me > div > i.pending::before { content:'등록대기'; }
.flat_acdm_warp > .me > div > i.completed { background: var(--color-main); }
.flat_acdm_warp > .me > div > i.completed::before { content:'등록완료'; }



.footer_btns { display:block;height:70px;position: sticky;bottom:0px;right:0px;left:0px;background:var(--color-whf);box-shadow:none;padding:11px 20px;z-index: 10;}
.footer_btns.hide { display:none; }
.footer_btns > button { display: block;width:100%;background-color: var(--color-main); line-height: 48px;height:48px;font-size:16px;font-weight: 600;letter-spacing: -0.05em;color:var(--color-whf);border-radius: 5px; }
.footer_btns > button:disabled { background:var(--color-grb); }
.footer_btns > button.waiting { background:var(--color-bk9); }

.footer_btns.gdn_req > button { display: inline-block; }
.footer_btns.gdn_req > button[name='reject'] { width: 30%; background:var(--color-bk9); margin-right: 4px; }
.footer_btns.gdn_req > button { width: 100%; }  /* 거절 버튼 사용 시 68% */

.pop.full > .popup { max-width:720px;min-height:100dvh;height:auto;width:100%; }
.pop.full > .popup > header { position:relative;display:block;padding-bottom:0px;background:var(--color-whf);padding:10px 20px;border:0px; height:auto;box-shadow:none; }
.pop.full > .popup > header h1 { font-size:20px;font-weight:600;color:var(--color-bk3);line-height:50px;height:50px;overflow: hidden;font-family:"Paperlogy";letter-spacing: -0.05em;}
.pop.full > .popup > header .btns { display:block;position:absolute;top:10px;right:5px;height:50px; }
.pop.full > .popup > header .btns > button { display: inline-block;width:50px;line-height: 50px;height:50px;font-size:20px;color:var(--color-bk1);position: relative;top:auto;right:auto; }
.pop.full > .popup > header .btns > button::before { content: '\e921';font-family: 'xeicon' !important;}
.pop.full > .popup > section { height:calc( 100dvh - 140px ) !important;max-height: 100dvh !important;width:100%; }
.pop.full > .popup > section article > .terms { padding:20px;font-size:14px;color:var(--color-bk1);white-space: pre-wrap; }
.pop.full > .popup > section article > .terms > b { font-size:15px;font-weight: 600; }

.pop.full > .popup > footer { display:block;padding:11px 20px;border:0px;background:var(--color-whf); }
.pop.full > .popup > footer > .btns { display:block; }
.pop.full > .popup > footer > .btns > button { display: block;width:100%;background-color: var(--color-sub); line-height: 48px;height:48px;font-size:16px;font-weight: 600;letter-spacing: -0.05em;color:var(--color-whf);border-radius: 5px; }

.pop > .btsheet { max-width:720px;min-height:auto;height:auto;width:100%;background: var(--color-whf);position: absolute;left:0px;right:0px;bottom:0px;border-radius: 20px 20px 0px 0px;left: 50%;transform: translateX(-50%);overflow: hidden; }
.pop > .btsheet > header { position:relative;display:block;padding-bottom:0px;padding:10px 20px;border:0px; height:auto;box-shadow:none;background: transparent; }
.pop > .btsheet > header h1 { font-size:20px;font-weight:600;color:var(--color-bk3);line-height:50px;height:50px;overflow: hidden;font-family:"Paperlogy";letter-spacing: -0.05em;}
.pop > .btsheet > header .btns { display:block;position:absolute;top:10px;right:5px;height:50px; }
.pop > .btsheet > header .btns > button { display: inline-block;width:50px;line-height: 50px;height:50px;font-size:20px;color:var(--color-bk1);position: relative;top:auto;right:auto; }
.pop > .btsheet > header .btns > button::before { content: '\e921';font-family: 'xeicon' !important;}
.pop > .btsheet > section { height:auto;max-height: auto;width:100%; }

.pop > .btsheet > section > .selected { display:block;padding:30px 20px 10px 20px; }
.pop > .btsheet > section > .selected > h4 { display:block; font-size:22px; line-height: 28px; font-family:"Paperlogy"; font-weight: 700; text-align:center; color:var(--color-sub); letter-spacing: -0.05em; }
.pop > .btsheet > section > .selected > h4 > b { font-weight: 700;color:var(--color-main); }
.pop > .btsheet > section > .selected > p { display:block; font-size:16px; line-height: 20px; text-align:center; color:var(--color-bk9);margin-top:10px;letter-spacing: -0.05em; }
.pop > .btsheet > section > .selected > .academy { display:block;padding:15px 12px;background:var(--color-wh8);position: relative;margin-top:30px; }
.pop > .btsheet > section > .selected > .academy > h5 { display:block;font-size:18px; line-height: 24px; font-family:"Paperlogy"; font-weight: 700;position: relative;color:var(--color-bk1); }
.pop > .btsheet > section > .selected > .academy > h5 > em { position:absolute; display:block;font-size:14px; line-height: 18px; font-family:"Pretendard"; font-weight: 600;top:0px;right:0px; }
.pop > .btsheet > section > .selected > .academy > p { display:block;font-size:14px; line-height: 20px; color:var(--color-bk6);letter-spacing: -0.05em; }

.pop > .btsheet > section > .request_wrap { display:block;padding:30px 40px 30px 40px; }
.pop > .btsheet > section > .request_wrap > h4 { display:block; font-size:22px; line-height: 28px; font-family:"Paperlogy"; font-weight: 700; text-align:left; color:var(--color-sub); letter-spacing: -0.05em; }
.pop > .btsheet > section > .request_wrap > h4 > b { font-weight: 700;color:var(--color-main); }
.pop > .btsheet > section > .request_wrap > p { display:block; font-size:16px; line-height: 20px; text-align:left; color:var(--color-bk9);margin-top:10px;letter-spacing: -0.05em; }

.pop > .btsheet > footer { padding:0px;border:0px; }
.pop > .btsheet > footer > .btns { display:block;font-size:0px;padding:11px 20px; }
.pop > .btsheet > footer > .btns > button { display: inline-block;width:120px;border: 2px solid var(--color-sub);background-color: var(--color-sub); color:var(--color-whf); line-height: 44px;height:48px;font-size:16px;font-weight: 600;margin-top:0px;letter-spacing: -0.05em; border-radius: 5px; vertical-align: bottom;; }
.pop > .btsheet > footer > .btns > button[name='reject'] { background-color: var(--color-grb);border: 2px solid var(--color-grb); }
.pop > .btsheet > footer > .btns > button[name='add'],
.pop > .btsheet > footer > .btns > button[name='approve'] { width:calc( 100% - 124px );background-color: var(--color-main);border: 2px solid var(--color-main); margin-left:4px; }
.pop > .btsheet > footer > .btns > button[name='request'] { width:100%;border: 2px solid var(--color-main);background-color: var(--color-main); }
.pop > .btsheet > footer > .btns > button[name='pay'] { width:100%;border: 2px solid var(--color-main);background-color: var(--color-main); }
.pop > .btsheet > footer > .btns > button[name='pay']:disabled { background:var(--color-grb); }

.dashoboard { display: block;padding:0 15px; }

.students_seleter { display: block;background-color: var(--color-snd2); border-radius: 15px; }
.students_seleter > dl { display: block; background-color: var(--color-snd2);border-radius: 15px;position: relative;padding:8px 0px; }
.students_seleter > dl:after { font-family: 'xeicon' !important; content:"\e942";vertical-align: middle;position:absolute;top:8px;right:20px;display:block;color:var(--color-bk9);font-size:20px;height:38px;line-height:38px;z-index:1;}
.students_seleter > dl.one:after {display:none;}
.students_seleter > dl > dt { display: block;line-height:38px;height:38px;padding: 0px 25px;font-size:17px;font-weight: 600;}
.students_seleter > dl > dt > span { color:#999;line-height:38px;margin-left:10px;font-size:12px;font-weight: 400;display: inline-block;vertical-align: bottom;; }
.students_seleter > dl > dd { display: none;line-height:38px;height:38px;padding: 0px 25px;font-size:17px;font-weight: 400;opacity: 0.5;}
.students_seleter > dl > dd.selected { display: block; }
.students_seleter > dl > dd > span { color:#999;line-height:38px;margin-left:10px;font-size:12px;font-weight: 400;display: inline-block;vertical-align: bottom;; }
.students_seleter > dl.opened > dd { display:block; }
.students_seleter > dl.opened:after { content:"\e945";}

.students_seleter > .cards { display: block;border-radius: 15px;position: relative;overflow: hidden;; }
.students_seleter > .cards .card { display:block;border-radius: 15px;position: relative;background-color: var(--color-snd7);padding:24px; }
.students_seleter > .cards .card > .academy { display: block;position: relative; }
.students_seleter > .cards .card > .academy > .btns { position: absolute; top:-6px;right:-6px;display:block;font-size:0px; }
.students_seleter > .cards .card > .academy > .btns > button { display:inline-block;width:36px;height:36px;line-height:36px;font-size:0px;position: relative; }
.students_seleter > .cards .card > .academy > .btns > button.card_chatting:before { font-family: 'xeicon' !important; content:"\ea15";color:rgba(255,255,255,0.8);font-size:24px;}

.students_seleter > .cards .card > .academy > .btns > button.card_chatting > em { display: block; position:absolute; top:0px;right:0px; background-color: var(--color-red);color:var(--color-whf); text-align: center; display: block; font-size: 10px;line-height:16px;min-width:12px;padding:0px 2px; font-weight: 400;box-sizing: unset;border-radius: 8px; }
.students_seleter > .cards .card > .academy > .btns > button.card_chatting > em::before { content: attr(data-cnt); }
.students_seleter > .cards .card > .academy > .btns > button.card_chatting > em[data-cnt='0']::before { display:none; }

.students_seleter > .cards .card > .academy > .btns > button.card_menu:before { font-family: 'xeicon' !important; content:"\e949";color:rgba(255,255,255,0.8);font-size:24px;}
.students_seleter > .cards .card > .academy > h2 { display:block; font-size:20px; line-height: 24px; font-family:"Paperlogy"; font-weight: 700; text-align:left; color:var(--color-whf); letter-spacing: -0.05em; }
.students_seleter > .cards .card > .academy > p { display:block; font-size:15px; line-height: 20px; font-family:"Paperlogy"; font-weight: 700; text-align:left; color:rgba(0,0,0,0.3); letter-spacing: -0.05em;margin-top:5px; }
.students_seleter > .cards .card > .academy > dl { display: block;font-size:0px;margin-top:5px; }
.students_seleter > .cards .card > .academy > dl > dd { display: inline-block;font-size:11px;background-color: rgba(46,50,59,0.25);color:var(--color-whf);width:18px;height:18px;line-height: 18px;text-align: center;; }
.students_seleter > .cards .card > .academy > dl > dd + dd { margin-left:1px; }
.students_seleter > .cards .card > .academy > dl > dd.on { background-color: rgba(46,50,59,0.8); }
.students_seleter > .cards .card > .academy > a.mod { position: absolute; bottom:0px;right:0px;display:block;font-size:13px;background-color: var(--color-sub);color:#fff;line-height:28px;padding:0px 10px;border-radius: 5px; }
.students_seleter > .cards .card > .academy > a.mod.btnReasonSet { display: none; }
.students_seleter > .cards .card > .academy > a.mod.btnReasonSet.view { display: block; }

.students_seleter > .cards .card > .ticket { background-color: var(--color-whf);border-radius: 5px;padding:12px;margin-top:10px;position: relative;padding-right:70px;min-height:82px; }
.students_seleter > .cards .card > .ticket > h3 { display:block; }
.students_seleter > .cards .card > .ticket > h3.nodata { padding-top:10px; }
.students_seleter > .cards .card > .ticket > h3 > b { display:block;font-size:16px;font-weight: 600;line-height: 20px;height: 20px; overflow:hidden; vertical-align: bottom;white-space: nowrap;text-overflow: ellipsis;margin-right:5px; }
.students_seleter > .cards .card > .ticket > h3 > span { display: block;font-size:12px;font-weight: 300;line-height: 20px;height: 20px;vertical-align: bottom;color:var(--color-bk9); }
.students_seleter > .cards .card > .ticket > p { display:block;font-size:0px;line-height: 18px;word-break : keep-all; }
.students_seleter > .cards .card > .ticket > p > span { display:inline-block;font-size:12px;color: var(--color-bk6);line-height: 18px;vertical-align: bottom;margin-right:8px; }
.students_seleter > .cards .card > .ticket > .rest_qty { position: absolute;top:50%;transform: translateY(-50%);right:12px;font-size:0px; }
.students_seleter > .cards .card > .ticket > .rest_qty > b { display:inline-block;vertical-align: bottom;font-size:35px; line-height: 40px; font-weight: 700;} 
.students_seleter > .cards .card > .ticket > .rest_qty > span { display:inline-block;vertical-align: bottom;padding-bottom:4px; margin-left:5px;} 
.students_seleter > .cards .card > .ticket > .rest_qty > span > em { display:block;vertical-align: bottom;font-size:10px; line-height: 14px; font-weight: 400;color:var(--color-grb);} 
.students_seleter > .cards .card > .ticket > .rest_qty > span > b { display:block;vertical-align: bottom;font-size:16px; line-height: 20px; font-weight: 400;} 

.students_seleter > .cards .dots { position: absolute;bottom:10px;height:4px;left:50%;transform: translateX(-50%);font-size:0px; }
.students_seleter > .cards .dots > i { width:40px;height:4px;display:inline-block;background-color: var(--color-whf);vertical-align: bottom; }
.students_seleter > .cards .dots > i.on { background-color: var(--color-snd); }
.students_seleter > .cards .dots > ul.slick-dots { display:block;font-size:0px; }
.students_seleter > .cards .dots > ul.slick-dots > li { width:40px;height:4px;display:inline-block;background-color: var(--color-whf);vertical-align: bottom; }
.students_seleter > .cards .dots > ul.slick-dots > li > button { display: none;; }
.students_seleter > .cards .dots > ul.slick-dots > li.slick-active { background-color: var(--color-snd); }
.students_seleter > .cards .slick-list { padding:0px !important; }

.dashoboard > .daily_plan { display:block; }
.dashoboard > .daily_plan > .nodata { display: block;padding:100px 0px; }
.dashoboard > .daily_plan > .nodata > h5 { display:block; font-size:28px; line-height: 34px; font-family:"Paperlogy"; font-weight: 700; text-align:center; color:var(--color-sub); letter-spacing: -0.05em; }
.dashoboard > .daily_plan > .nodata > h5 > b { font-weight: 700;color:var(--color-snd); }
.dashoboard > .daily_plan > .nodata > p { display:block; font-size:16px; line-height: 22px; text-align:center; margin-top:10px; color:var(--color-bk9); }
.dashoboard > .daily_plan > .nodata > a { display: block; margin: 40px auto 0px auto;width:180px;border-radius:6px;text-align: center;line-height: 48px;color:var(--color-whf);background-color:var(--color-bk6);font-weight: 600;font-size:16px; }
.dashoboard > .daily_plan > .nodata > a.btnReasonSet { display: none;  }
.dashoboard > .daily_plan > .nodata > a.btnReasonSet.view { display: block;  }

.dashoboard > .daily_plan > .study_status { display: block;position: relative;margin-top:20px;padding:2px 0px;padding-right:100px; }
.dashoboard > .daily_plan > .study_status > p { display: block;position: relative; text-align: right;font-size:17px;font-weight: 700;color:var(--color-bk1);line-height: 22px; }
.dashoboard > .daily_plan > .study_status > p > i { position: absolute;top:0px;left:0px;font-size:12px;font-weight: 400;display:block;width:70px;color:var(--color-whf);text-align: center;filter:saturate(80%);border-radius: 3px; }
.dashoboard > .daily_plan > .study_status > p > span { display: block;font-size:13px;font-weight: 400;color:var(--color-bk6); }

.dashoboard > .daily_plan > .study_status > dl { display: block;position: absolute;top:0px;right:0px;font-size:0px; }
.dashoboard > .daily_plan > .study_status > dl > dd { display: inline-block;font-size:0px;text-align: center;color:var(--color-whf);background-color: var(--color-bk9);width:42px;padding: 6px 0px;border-radius: 3px; }
.dashoboard > .daily_plan > .study_status > dl > dd > span { font-size:12px;line-height:14px;display: block; }
.dashoboard > .daily_plan > .study_status > dl > dd > b { font-size:20px;line-height:22px;display: block;font-weight: 600; }
.dashoboard > .daily_plan > .study_status > dl > dd + dd { margin-left:2px; }
.dashoboard > .daily_plan > .study_status > dl > dd:first-child { background-color: var(--color-red); }
.dashoboard > .daily_plan > .study_status > dl > dd:last-child { background-color: var(--color-yel); }

.dashoboard > .daily_plan > .monitoring { display:block;margin-top:15px;border-radius: 15px;overflow: hidden;position: relative; }
/*.dashoboard > .daily_plan > .monitoring.view { display:block;margin-top:15px;border-radius: 15px;overflow: hidden;position: relative; }*/
/*.dashoboard > .daily_plan > .studyNowPlanInfo { display:none;margin-top:15px;border-radius: 15px;overflow: hidden;position: relative; }*/
/*.dashoboard > .daily_plan > .studyNowPlanInfo.view { display:block;margin-top:15px;border-radius: 15px;overflow: hidden;position: relative; }*/
.dashoboard > .daily_plan > .monitoring > div { display:block;padding-top:75%;background-position: center;background-repeat: no-repeat;background-size: cover; }
.dashoboard > .daily_plan > .monitoring > i { display: none;position: absolute;bottom:20px;right:20px;width:24px;height:24px;text-align: center;line-height: 24px;font-size:22px;color:var(--color-whf);text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) }
.dashoboard > .daily_plan > .monitoring > i::before { font-family: 'xeicon' !important; content:"\eb79";}
.dashoboard > .daily_plan > .monitoring.disconn > div { filter: blur(10px); }
.dashoboard > .daily_plan > .monitoring.disconn i { display:block; }

.dashoboard > .daily_plan > .daily_status { display: block;border: 1px solid var(--color-grd);border-radius: 15px;padding:25px;margin-top:15px; padding-left:125px; position: relative; }
.dashoboard > .daily_plan > .daily_status > .rate { position: absolute;top:50%;left:20px;width:90px;transform: translateY(-50%); }
.dashoboard > .daily_plan > .daily_status > .rate > .graph { background-color: var(--color-gre);width:90px;height:90px;border-radius: 50%;position: relative;overflow: hidden; }
.dashoboard > .daily_plan > .daily_status > .rate > .graph > i { position: absolute;top:0px;left:0px;right:0px;bottom:0px;background-color: #999; }
.dashoboard > .daily_plan > .daily_status > .rate > .graph.progress > i { background: conic-gradient(var(--color-snd) 0deg, var(--color-gre) 50deg);  }
.dashoboard > .daily_plan > .daily_status > .rate > .graph.achievement > i { background: conic-gradient(var(--color-thd) 0deg, var(--color-gre) 50deg); }
.dashoboard > .daily_plan > .daily_status > .rate > .graph + .graph { margin-top:15px; }
.dashoboard > .daily_plan > .daily_status > .rate > .graph > .label { position: absolute;top:14px;left:14px;right:14px;bottom:14px;background-color: var(--color-whf);border-radius: 50%;text-align: center;padding:13px 0px; }
.dashoboard > .daily_plan > .daily_status > .rate > .graph > .label > span { display: block;font-size:11px;line-height: 14px;color:var(--color-bk9); }
.dashoboard > .daily_plan > .daily_status > .rate > .graph > .label > b { display: block;font-size:20px;line-height: 22px;color:var(--color-bk1); }

.dashoboard > .daily_plan > .daily_status > .context { display: block;position: relative; }
.dashoboard > .daily_plan > .daily_status > .context > div { display:block;padding:10px 0px; }
.dashoboard > .daily_plan > .daily_status > .context > div > h5 { display:block; font-size:28px; line-height: 34px; font-weight: 700; text-align:right;position: relative;margin-bottom:5px; }
.dashoboard > .daily_plan > .daily_status > .context > div > h5 > b { display:block; font-size:28px; line-height: 34px; font-weight: 700; text-align:right; color:var(--color-bk6); }
.dashoboard > .daily_plan > .daily_status > .context > div > h5 > span { position: absolute;top:0px;left:0px;font-size:15px;line-height: 18px;display:block;text-align: left; color:var(--color-bk1);; }
.dashoboard > .daily_plan > .daily_status > .context > div > h5 > span > em { font-size:12px;line-height: 16px;display:block; }
.dashoboard > .daily_plan > .daily_status > .context > div > p { display:block; font-size:16px; line-height: 20px; text-align:right; color:var(--color-bk9);position: relative; }
.dashoboard > .daily_plan > .daily_status > .context > div > p > b { display:block; font-size:14px; line-height: 20px; font-weight: 700; text-align:right; color:var(--color-bk9); }
.dashoboard > .daily_plan > .daily_status > .context > div > p > span { position: absolute;top:0px;left:0px;font-size:12px;line-height: 20px;display:block;text-align: left; color:var(--color-bk9);; }
.dashoboard > .daily_plan > .daily_status > .context > div.breaktime { border-top:1px solid var(--color-gre);padding-top:10px; }
.dashoboard > .daily_plan > .daily_status > .context > div.breaktime > p { color:var(--color-bk1); }
.dashoboard > .daily_plan > .daily_status > .context > div.breaktime > p > b { color:var(--color-bk1); }
.dashoboard > .daily_plan > .daily_status > .context > div.breaktime > p > span { color:var(--color-bk1); }

.dashoboard > .daily_plan > ul.daily_summary { display:block;vertical-align: top;padding:0px;margin-left:-2px;font-size:0px;overflow: hidden;border-radius: 15px;margin-top:15px;}
.dashoboard > .daily_plan > ul.daily_summary > li { display:inline-block;width:calc(33.3333% - 2px);vertical-align: top;padding:0px;margin-left:2px;background: #eee;margin-top:2px;}
.dashoboard > .daily_plan > ul.daily_summary > li > div { display:block;padding:15px 5px; }
.dashoboard > .daily_plan > ul.daily_summary > li > div > span { display: block;line-height:14px;font-size:12px;color:var(--color-bk9);text-align: center;margin-bottom:5px;}
.dashoboard > .daily_plan > ul.daily_summary > li > div > b { display: block;line-height:22px;font-size:18px;font-weight: 700;text-align: center;color:var(--color-bk1);}
.dashoboard > .daily_plan > ul.daily_summary > li > div > em { display: block;line-height:18px;font-size:14px;font-weight: 400;color:var(--color-bk9);;text-align: center;margin-top:2px;}
.dashoboard > .daily_plan > ul.daily_summary > li > div > i { display: block;line-height:14px;font-size:11px;font-weight: 400;color:var(--color-grb);text-align: center;margin-top:2px;}

.dashoboard > .daily_plan > .daily_detail { margin-top:15px; }


.request_wrap > .info_form { padding:0px;margin-top:30px; }
.request_wrap > .info_form > p { display:block; font-size:0px; }
.request_wrap > .info_form > p > label { display: block;background-color: transparent;color:var(--color-bk3);font-size:14px;padding:0px;line-height:22px;height:auto;margin:0px;margin-bottom:2px; }
.request_wrap > .info_form > p > label.required::after { display:inline-block;content: '*';vertical-align: bottom;margin-left:2px;color:var(--color-red); }
.request_wrap > .info_form > p > span { display: block;background-color: var(--color-gre);position: relative;border-radius: 5px;border: 1px solid var(--color-gre); }
.request_wrap > .info_form > p > span.readonly { display: block;background-color: var(--color-whf);position: relative;border-radius: 5px; }
.request_wrap > .info_form > p + p {margin-top:25px;}
.request_wrap > .info_form > p > span > input[type=text],
.request_wrap > .info_form > p > span > input[type=password],
.request_wrap > .info_form > p > span > input[type=number] { display:block;width:100%;line-height: 44px; height:44px; border: 0px;font-size:15px;padding:0px 10px;letter-spacing: -0.05em; }
.request_wrap > .info_form > p > span > input::placeholder { color:var(--color-grb); }
.request_wrap > .info_form > p > span.readonly > input { font-weight: 600; }


.dashoboard .labels[data-type=c0] { background: #fa3457; }
.dashoboard .labels[data-type=c0]::before { content:'지각'; }

.dashoboard .labels[data-type=c1] { background: #00ccff; }
.dashoboard .labels[data-type=c1]::before { content:'계획수정'; }

.dashoboard .labels[data-type=c2] { background: #a04dff; }
.dashoboard .labels[data-type=c2]::before { content:'외출중'; }

.dashoboard .labels[data-type=c3] { background: #00d98b; }
.dashoboard .labels[data-type=c3]::before { content:'학습중'; }

.dashoboard .labels[data-type=c4] { background: #bbb; }
.dashoboard .labels[data-type=c4]::before { content:'하원'; }

.dashoboard .labels[data-type=c5] { background: #666; }
.dashoboard .labels[data-type=c5]::before { content:'등원대기'; }

.dashoboard .labels[data-type=c6] { background: #fe7c1c; }
.dashoboard .labels[data-type=c6]::before { content:'수면중'; }

.dashoboard .labels[data-type=c7] { background: #fa3457; }
.dashoboard .labels[data-type=c7]::before { content:'외출지각'; }

.dashoboard .labels[data-type=c8] { background: #757bf6; }
.dashoboard .labels[data-type=c8]::before { content:'관리보류'; }

.dashoboard .labels[data-type=c9] { background: #757bf6; }
.dashoboard .labels[data-type=c9]::before { content:'결석예정'; }

.dashoboard .labels[data-type=c10] { background: #828282; }
.dashoboard .labels[data-type=c10]::before { content:'무단결석'; }

.dashoboard .labels[data-type=c11] { background: #00ccff; }
.dashoboard .labels[data-type=c11]::before { content:'일시정지'; }

.dashoboard .labels[data-type=c12] { background: #757bf6; }
.dashoboard .labels[data-type=c12]::before { content:'등원예정'; }

.dashoboard .labels[data-type=c13] { background: #ffcb2a; }
.dashoboard .labels[data-type=c13]::before { content:'쉬는시간'; }

.dashoboard .labels[data-type=c14] { background: #ffcb2a; }
.dashoboard .labels[data-type=c14]::before { content:'지각'; }

.dashoboard .labels[data-type=c15] { background: #b98e2c; }
.dashoboard .labels[data-type=c15]::before { content:'수업중'; }

.dashoboard .labels[data-type=c16] { background: #b98e2c; }
.dashoboard .labels[data-type=c16]::before { content:'수업지각'; }


/* 전체 레이아웃 */
.wrap.onlink.dashboard {
    background-color: #fff;
    min-height: 100vh;
}

.wrap.onlink.dashboard > section {
    padding: 0;
    margin: 0;
    padding-top: 0px;
    position: relative;
}

/* 헤더 스타일 */
.wrap.onlink.dashboard > header.flat {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    height: 70px;
    width: 100%;
    max-width: 720px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 스크롤 시 헤더 스타일 */
.wrap.onlink.dashboard > header.flat.scrolled {
    background-color: #fff;
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
}

.wrap.onlink.dashboard > header.flat.scrolled > h1 > a {
    background-image: url('../img/logo_onlink_dark.svg');
}

.wrap.onlink.dashboard > header.flat.scrolled > .btns.rt > button {
    color: #2e323b;
}

.wrap.onlink.dashboard > header.flat.scrolled > .btns.rt > button.push::before {
    color: #2e323b;
}

.wrap.onlink.dashboard > header.flat.scrolled > .btns.rt > button.gnb::before {
    color: #2e323b;
}

.wrap.onlink.dashboard > header.flat > h1 {
    margin: 0;
    padding: 0;
    line-height: normal;
    height: auto;
    flex: 0 0 auto;
}

.wrap.onlink.dashboard > header.flat > h1 > a {
    display: inline-block;
    width: 99px;
    height: 35px;
    background-image: url('../img/logo_onlink.svg');
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    vertical-align: middle;
}

.wrap.onlink.dashboard > header.flat > .btns.rt {
    display: block;
    margin-left: auto;
    font-size:0px;
}

.wrap.onlink.dashboard > header.flat > .btns.rt > button {
    width: 44px;
    height: 50px;
    display: inline-block;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    color: #fff;
    vertical-align: middle;
    text-align: center;
    margin-left: 0px;
}

.wrap.onlink.dashboard > header.flat > .btns.rt > button:first-child {
    margin-left: 0;
}

.wrap.onlink.dashboard > header.flat > .btns.rt > button.push {
    margin-right: 0;
}

.wrap.onlink.dashboard > header.flat > .btns.rt > button.push > em {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #ec171e;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    min-width: 16px;
    height: 16px;
    padding: 0 2px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    box-sizing: border-box;
}

/* 헤더 버튼 아이콘 */
.wrap.onlink.dashboard > header.flat > .btns.rt > button.push::before {
    content: '\e99d';
    font-size: 28px;
    font-family: 'xeicon' !important;
    display: block;
    color: #fff;
}

.wrap.onlink.dashboard > header.flat > .btns.rt > button.gnb::before {
    content: '\e91c';
    font-size: 28px;
    font-family: 'xeicon' !important;
    display: block;
    color: #fff;
}

.wrap.onlink.dashboard > header.flat.scrolled > .btns.rt > button.push::before {
    color: #2e323b;
}

.wrap.onlink.dashboard > header.flat.scrolled > .btns.rt > button.gnb::before {
    color: #2e323b;
}

/* 오버뷰 섹션 */
.wrap.onlink.dashboard .overview {
    position: relative;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 440 580" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><rect x="0" y="0" height="100%" width="100%" fill="url(%23grad)" opacity="1"/><defs><radialGradient id="grad" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="10" gradientTransform="matrix(-44 -58 44 -63.89 440 580)"><stop stop-color="rgba(234,85,6,1)" offset="0"/><stop stop-color="rgba(210,97,29,1)" offset="0.125"/><stop stop-color="rgba(185,110,52,1)" offset="0.25"/><stop stop-color="rgba(161,122,74,1)" offset="0.375"/><stop stop-color="rgba(136,134,97,1)" offset="0.5"/><stop stop-color="rgba(87,159,143,1)" offset="0.75"/><stop stop-color="rgba(63,171,165,1)" offset="0.875"/><stop stop-color="rgba(38,183,188,1)" offset="1"/></radialGradient></defs></svg>');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0 0 60px 60px;
    padding: 0;
    margin-top: 0;
    margin-bottom: 21px;
    min-height: 480px;
    height: 530px;
    overflow: hidden;
    z-index: 1;
}

/* 날짜 선택기 */
.wrap.onlink.dashboard .overview > .seleter {
    position: absolute;
    top: 75px;
    left: 19px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    opacity: 0.5;
    cursor: pointer;
    z-index: 10;
}

.wrap.onlink.dashboard .overview > .seleter > dt {
    font-family: 'Paperlogy', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: #fff;
    letter-spacing: -0.54px;
    width: 78px;
    text-align: center;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
}

.wrap.onlink.dashboard .overview > .seleter > dt::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('../img/icon_chevron_down.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    filter: brightness(0) invert(1);
    opacity: 0.5;
}

.wrap.onlink.dashboard .overview > .seleter.opened > dt::after {
    transform: translateY(-50%) rotate(180deg);
}

.wrap.onlink.dashboard .overview > .seleter > dd {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 8px 0;
    margin-top: 8px;
    min-width: 116px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    flex-direction: column;
    gap: 4px;
    white-space: nowrap;
}

.wrap.onlink.dashboard .overview > .seleter.opened > dd {
    display: flex;
}

.wrap.onlink.dashboard .overview > .seleter > dd > span {
    font-family: 'Paperlogy', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: #2e323b;
    letter-spacing: -0.54px;
    padding: 8px 16px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s;
    white-space: nowrap;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.wrap.onlink.dashboard .overview > .seleter > dd > span:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* 정산 예정 금액 */
.wrap.onlink.dashboard .overview > .payout {
    position: absolute;
    left: 50%;
    top: 137px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 203px;
}

.wrap.onlink.dashboard .overview > .payout > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    letter-spacing: -0.8px;
    margin-bottom: 5px;
}

.wrap.onlink.dashboard .overview > .payout > b {
    font-family: 'Paperlogy', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: normal;
    color: #fff;
    letter-spacing: -2.1px;
    margin-bottom: 5px;
}

.wrap.onlink.dashboard .overview > .payout > em {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    color: #fff;
    letter-spacing: -0.7px;
}

/* 결제청구/완료 정보 */
.wrap.onlink.dashboard .overview > .spec {
    position: absolute;
    left: 50%;
    top: 306px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 320px;
}

.wrap.onlink.dashboard .overview > .spec > p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    letter-spacing: -0.8px;
}

.wrap.onlink.dashboard .overview > .spec > p > b {
    font-weight: 400;
}

.wrap.onlink.dashboard .overview > .spec > p > span {
    font-size: 18px;
    text-align: right;
    letter-spacing: -0.9px;
}

.wrap.onlink.dashboard .overview > .spec > p > span > b {
    font-weight: 700;
}

/* 메인 네비게이션 */
.wrap.onlink.dashboard .overview > .main_nav {
    position: absolute;
    left: 50%;
    top: 390px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding-top: 15px;
    padding-bottom: 0;
    width: 100%;
    max-width: 350px;
    justify-content: space-between;
    flex-wrap: nowrap !important;
    overflow: visible;
}

.wrap.onlink.dashboard .overview > .main_nav > a {
    flex: 1 1 0%;
    min-width: 0;
    max-width: 25%;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 15px 5px 10px;
    color: #fff;
    text-decoration: none;
    font-family: 'Paperlogy', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 26px;
    letter-spacing: -0.75px;
    text-align: center;
    border-radius: 10px;
    transition: background-color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.wrap.onlink.dashboard .overview > .main_nav > a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.wrap.onlink.dashboard .overview > .main_nav > a::before {
    content: '';
    width: 30px;
    height: 30px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 5px;
}

/* 메인 네비게이션 아이콘 */
.wrap.onlink.dashboard .overview > .main_nav > a:nth-child(1)::before {
    background-image: url('../img/icon_payment_request.svg');
}

.wrap.onlink.dashboard .overview > .main_nav > a:nth-child(2)::before {
    background-image: url('../img/icon_bill_history.svg');
}

.wrap.onlink.dashboard .overview > .main_nav > a:nth-child(3)::before {
    background-image: url('../img/icon_payment_history.svg');
}

.wrap.onlink.dashboard .overview > .main_nav > a:nth-child(4)::before {
    background-image: url('../img/icon_settlement_history.svg');
}

/* 공지사항 섹션 */
.wrap.onlink.dashboard .notice {
    margin-top: 21px;
    padding: 0 20px;
}

.wrap.onlink.dashboard .notice > .lists {
    background-color: #2e323b;
    border-radius: 22px;
    padding: 10px 20px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    position: relative;
}

.wrap.onlink.dashboard .notice > .lists > p {
    display: none;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    letter-spacing: -0.7px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wrap.onlink.dashboard .notice > .lists > p.active {
    display: block;
}

.wrap.onlink.dashboard .notice > .lists > p > span {
    color: #bbb;
    margin-left: 8px;
}

.wrap.onlink.dashboard .notice > .lists::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* 푸터 */
.wrap.onlink.dashboard > footer {
    padding: 20px 0;
    text-align: center;
    margin-top: 40px;
}

.wrap.onlink.dashboard > footer > p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.65px;
    margin: 0;
}

/* 정산정보 섹션 */
.wrap.onlink.dashboard .biz {
    display: block;
    background-color: #eee;
    border-radius: 10px;
    padding: 20px;
    margin: 21px 20px 0;
}

.wrap.onlink.dashboard .biz > p {
    font-size: 14px;
    line-height: 26px;
    color: #999;
    margin-bottom: 6px;
    letter-spacing: -0.7px;
}

/* 정산정보 없을 때 */
.wrap.onlink.dashboard .biz .nodata {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.wrap.onlink.dashboard .biz .nodata.hide {
    display: none;
}

.wrap.onlink.dashboard .biz .nodata > h5 {
    font-family: 'Paperlogy', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: #2e323b;
    text-align: center;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 0;
    letter-spacing: -0.9px;
    white-space: nowrap;
}

.wrap.onlink.dashboard .biz .nodata > p {
    font-size: 14px;
    line-height: normal;
    color: #999;
    text-align: center;
    margin: 0;
    padding-top: 0;
    padding-bottom: 10px;
    letter-spacing: -0.7px;
}

.wrap.onlink.dashboard .biz .nodata > button {
    background-color: #26b7bc;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    padding: 15px 25px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    letter-spacing: -0.7px;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 정산정보 있을 때 */
.wrap.onlink.dashboard .biz .info {
    display: block;
}

.wrap.onlink.dashboard .biz .info > * {
    margin-bottom: 10px;
}

.wrap.onlink.dashboard .biz .info > *:last-child {
    margin-bottom: 0;
}

.wrap.onlink.dashboard .biz .info.hide {
    display: none;
}

.wrap.onlink.dashboard .biz .info > h4 {
    display: block;
    font-family: 'Paperlogy', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 26px;
    color: #2e323b;
    margin: 0;
    letter-spacing: -1.3px;
    white-space: nowrap;
}

.wrap.onlink.dashboard .biz .info > h4 > * {
    display: inline-block;
    margin-right: 15px;
}

.wrap.onlink.dashboard .biz .info > h4 > *:last-child {
    margin-right: 0;
}

.wrap.onlink.dashboard .biz .info > h4 > b {
    font-family: 'Paperlogy', sans-serif;
    font-weight: 700;
}

.wrap.onlink.dashboard .biz .info > h4 > span {
    font-family: 'Paperlogy', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #2e323b;
    letter-spacing: -0.8px;
}

.wrap.onlink.dashboard .biz .info > .detail {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wrap.onlink.dashboard .biz .info > .detail > p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    line-height: 24px;
    color: #2e323b;
    margin: 0;
    letter-spacing: -0.75px;
}

.wrap.onlink.dashboard .biz .info > .detail > p > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    white-space: nowrap;
}

.wrap.onlink.dashboard .biz .info > .detail > p > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #2e323b;
    text-align: right;
    letter-spacing: -0.8px;
}

.wrap.onlink.dashboard .biz .info > .detail > p > span > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
}

/* 사이드 메뉴 오버레이 */
body.renew::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(17, 17, 17, 0.75);
    backdrop-filter: blur(7.5px);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

body.renew.gnb-open::after {
    opacity: 1;
    pointer-events: auto;
}

/* 오버레이 클릭 시 메뉴 닫기 */
body.renew.gnb-open::after {
    cursor: pointer;
}

/* 사이드 메뉴 (GNB) */
aside.gnb {
    display: block !important;
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    background-color: #fff;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
}

aside.gnb.view {
    transform: translateX(0);
}

aside.gnb > header {
    background-color: #eee;
    padding: 20px;
    display: block;
    width: 280px;
}

aside.gnb > header > .profile {
    display: block;
    margin-bottom: 0;
    position: relative;
    width: 100%;
}

aside.gnb > header > .profile > i {
    width: 42px;
    height: 42px;
    background-color: #04c75b;
    border-radius: 6px;
    display: inline-block;
    padding: 10px;
    box-sizing: border-box;
    vertical-align: top;
    margin-right: 8px;
}

aside.gnb > header > .profile > i.naver {
    background-color: #04c75b;
    background-image: url('../img/icon_naver.svg');
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
}

aside.gnb > header > .profile > div {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 50px - 30px);
}

aside.gnb > header > .profile > div > p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: #2e323b;
    margin: 0;
    letter-spacing: -0.9px;
    white-space: nowrap;
}

aside.gnb > header > .profile > div > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: #999;
    margin: 0;
    letter-spacing: -0.6px;
    white-space: nowrap;
}

aside.gnb > header > .profile > button {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    display: block;
}

aside.gnb > header > .profile > button::before {
    content: '';
    width: 30px;
    height: 30px;
    background-image: url('../img/icon_close.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

aside.gnb > header > .btns {
    display: block;
    margin-top: 0;
    width: 280px;
    margin:10px -20px 0px -20px;
    border-bottom: 1px solid #ddd;
    font-size:0px;
    overflow: hidden;
}

aside.gnb > header > .btns > a {
    background-color: #fff;
    height: 40px;
    padding: 0px 25px;
    display: inline-block;
    width:50%;
    margin-left:-1px;
    border-left: 1px solid #ddd;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #999;
    letter-spacing: -0.65px;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: top;
    text-align: center;
    line-height: 40px;
}

aside.gnb > section {
    padding: 30px;
    padding-top:140px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 280px;
    box-sizing: border-box;
}

/* 사이드 메뉴 nav - layout.css의 .nav 스타일 오버라이드 */
aside.gnb > section > div.nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 100% !important;
    padding: 0 !important;
    height: auto !important;
    overflow-y: visible !important;
    overflow-Y: visible !important;
}

aside.gnb > section > div.nav > p {
    font-family: 'Pretendard', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: normal !important;
    color: #999 !important;
    margin: 0 !important;
    letter-spacing: -0.6px !important;
    width: 100% !important;
}

aside.gnb > section > div.nav > div {
    display: flex !important;
    gap: 10px !important;
    font-family: 'Pretendard', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 32px !important;
    color: #2e323b !important;
    letter-spacing: -0.75px !important;
    width: 100% !important;
}

aside.gnb > section > div.nav > div > a {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    color: #2e323b !important;
    text-decoration: none !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* layout.css의 ul, li 스타일 오버라이드 */
aside.gnb > section > div.nav > ul {
    display: none !important;
}

aside.gnb > section > div.nav > ul > li {
    padding: 0 !important;
    border: none !important;
}

/* 고객센터 섹션 특별 처리 */
aside.gnb > section > div.nav:last-child > div {
    flex-wrap: wrap !important;
    gap: 10px !important;
}

aside.gnb > section > div.nav:last-child > div > a {
    flex: 1 1 0% !important;
    min-width: calc(50% - 5px) !important;
}

aside.gnb > section > div.nav:last-child > div > a:first-child {
    display: flex !important;
    flex-direction: column !important;
    line-height: 32px !important;
}

aside.gnb > section > div.nav:last-child > div > a:nth-child(2) {
    flex-basis: calc(50% - 5px) !important;
}

aside.gnb > section > div.nav:last-child > div > a:last-child {
    flex-basis: 100% !important;
    margin-top: 0 !important;
}

/* 반응형 처리 */
@media (max-width: 440px) {
    .wrap.onlink.dashboard .overview {
        padding: 70px 15px 40px;
        min-height: auto;
    }

    .wrap.onlink.dashboard .overview > .seleter {
        left: 15px;
    }

    .wrap.onlink.dashboard .overview > .payout {
        width: 100%;
        max-width: 203px;
    }

    .wrap.onlink.dashboard .overview > .spec {
        width: 100%;
        max-width: 320px;
    }

    .wrap.onlink.dashboard .overview > .main_nav {
        width: 100%;
        max-width: 350px;
        flex-wrap: wrap;
    }

    .wrap.onlink.dashboard .overview > .main_nav > a {
        flex: 0 0 calc(50% - 5px);
        margin: 0px;
    }

    .wrap.onlink.dashboard .biz {
        margin-left: 20px;
        margin-right: 20px;
    }
}

/* 정산정보 팝업 (바텀시트) 오버레이 */
body.renew.pop-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(17, 17, 17, 0.75);
    backdrop-filter: blur(7.5px);
    z-index: 1999;
    opacity: 1;
    pointer-events: auto;
}

.pop.obj_pop.bottomsheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: none;
    background-color: transparent;
}

.pop.obj_pop.bottomsheet[data-role="payment"] {
    background: rgba(0, 0, 0, 0.6);
    display: block;
}

.pop[data-role="refund_policy"] {
    z-index: 2001;
}


body.renew.pop-open .pop.obj_pop.bottomsheet {
    display: block;
}

.pop.obj_pop.bottomsheet > .btsheet {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 440px !important;
    min-height: auto !important;
    height: auto !important;
    background-color: #fff !important;
    border-radius: 20px 20px 0 0 !important;
    overflow: hidden !important;
    z-index: 2001;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(100%);
    }
    to {
        transform: translateX(-50%) translateY(0);
    }
}


.pop.obj_pop.bottomsheet > .btsheet > section {
    height: auto !important;
    max-height: auto !important;
    width: 100% !important;
    padding: 0 20px 18px !important;
    display: block !important;
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap {
    padding: 0 !important;
    display: block !important;
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form {
    display: block;
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division {
    display: flex;
    gap: 5px;
    align-items: flex-start;
    margin-bottom: 25px;
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division:last-child {
    margin-bottom: 0;
    align-items: flex-end;
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division > p {
    display: block;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division > p.dv2-3 {
    flex: 0 0 calc(66.666% - 2.5px);
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division > p.dv1-3 {
    flex: 0 0 calc(33.333% - 2.5px);
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division > p.dv1-2 {
    flex: 0 0 calc(50% - 2.5px);
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division > p.dv1-4 {
    flex: 0 0 100px;
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division > p.dv2-4 {
    flex: 1;
    min-width: 0;
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division > p > label {
    display: block;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #333;
    letter-spacing: -0.7px;
    margin-bottom: 5px;
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division > p > label.required::after {
    content: '*';
    color: #ec161d;
    margin-left: 2px;
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division > p > span {
    display: block;
    background-color: #eee;
    border-radius: 3px;
    height: 46px;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division > p > span > input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: normal;
    color: #111;
    letter-spacing: -0.75px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division > p > span > input::placeholder {
    color: #999;
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division > p > span.select_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 5px;
    border: none !important;
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division > p > span.select_box > select {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: normal;
    color: #111;
    letter-spacing: -0.75px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division > p > span.select_box::after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-image: url('../img/icon_chevron_down.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    filter: brightness(0) saturate(100%) invert(75%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.pop.obj_pop.bottomsheet > .btsheet > footer {
    padding: 0 20px 20px !important;
    border: 0px !important;
    display: block !important;
    position: relative !important;
}

.pop.obj_pop.bottomsheet > .btsheet > footer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 5px;
    background-color: #111;
    border-radius: 10px;
    margin-bottom: -10px;
}

.pop.obj_pop.bottomsheet > .btsheet > footer > .btns {
    display: block !important;
    font-size: 0px !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.pop.obj_pop.bottomsheet > .btsheet > footer > .btns > button {
    display: inline-block !important;
    height: 48px !important;
    padding: 15px 25px !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-family: 'Pretendard', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: normal !important;
    letter-spacing: -0.8px !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
    margin-top: 0px !important;
}

.pop.obj_pop.bottomsheet > .btsheet > footer > .btns > button[name="cancel"],
.pop.obj_pop.bottomsheet > .btsheet > footer > .btns > button.btn_cancel {
    width: 100px !important;
    background-color: #999 !important;
    color: #fff !important;
    margin-right: 7px !important;
    border: none !important;
}

.pop.obj_pop.bottomsheet > .btsheet > footer > .btns > button.btn_submit {
    width: calc(100% - 107px) !important;
    background-color: #26b7bc !important;
    color: #fff !important;
    border: none !important;
    margin-left: 0 !important;
}

/* 정산계좌 필드 레이아웃 */
.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division:last-child > p.dv1-4 {
    flex: 0 0 100px;
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division:last-child > p.dv2-4 {
    flex: 1;
    min-width: 0;
}

.pop.obj_pop.bottomsheet > .btsheet > section > .request_wrap > .info_form > .division:last-child > p.dv1-4:last-child {
    flex: 0 0 100px;
}

/* 청구서 상세내역 팝업 (pop_details.html) */
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section {
    padding: 0 20px 18px !important;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    padding: 20px;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .qrcode > img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    background-color: #fff;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .invoice,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .paid,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .refund {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #eee;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .invoice > .tit,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .paid > .tit {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .invoice > .tit > h4,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .paid > .tit > h5 {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.8px;
    margin: 0;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .invoice > .tit > h4 > i,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .paid > .tit > h5 > i {
    width: 60px;
    height: 28px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: normal;
    color: #fff;
    letter-spacing: -0.5px;
    text-align: center;
    font-style: normal;
    margin-left: auto;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .invoice > .tit > h4 > i.issued::before {
    content: '발송완료';
    background-color: #13ae5c;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .paid > .tit > h5 > i.approval::before {
    content: '정상승인';
    background-color: #26b7bc;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .invoice > .tit > p,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .paid > .tit > p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.7px;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .invoice > .tit > p > b,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .paid > .tit > p > b {
    font-weight: 400;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .invoice > .tit > p > span,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .paid > .tit > p > span {
    font-weight: 700;
    font-size: 16px;
    color: #111;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .invoice > .spec,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .paid > .spec,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .refund > .spec {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .invoice > .spec > p,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .paid > .spec > p,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .refund > .spec > p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.7px;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .invoice > .spec > p > b,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .paid > .spec > p > b,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .refund > .spec > p > b {
    font-weight: 400;
    color: #999;
    flex-shrink: 0;
    width: 100px;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .invoice > .spec > p > span,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .paid > .spec > p > span,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .refund > .spec > p > span {
    font-weight: 400;
    color: #111;
    text-align: right;
    flex: 1;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .invoice > .spec > p > span > b,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .paid > .spec > p > span > b,
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .refund > .spec > p > span > b {
    font-weight: 700;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .refund {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #eee;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .guide {
    margin-bottom: 20px;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .guide > p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #666;
    letter-spacing: -0.6px;
    margin: 0;
    margin-bottom: 8px;
    position: relative;
    padding-left: 10px;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .guide > p::before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    background-color: #999;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 7px;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > section > .guide > p:last-child {
    margin-bottom: 0;
}

/* 청구서 상세내역 팝업 footer (pop_details.html) */
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer {
    padding: 20px 20px !important;
    border: 0px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    position: relative !important;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 5px;
    background-color: #111;
    border-radius: 10px;
    margin-bottom: -10px;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    font-size: 0px !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns:not(:last-child) {
    margin-bottom: 0;
}

/* 단일 버튼 (청구서 재발송, 결제취소, 닫기) */
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns:has(> button[name="resend"]:only-child),
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns:has(> button[name="pay_cancel"]:only-child),
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns:has(> button[name="cancel"]:only-child) {
    width: 100%;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > button[name="resend"],
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > button[name="pay_cancel"],
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > button[name="cancel"] {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    padding: 15px 25px !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-family: 'Pretendard', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: normal !important;
    letter-spacing: -0.8px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > button[name="resend"] {
    background-color: #26b7bc !important;
    color: #fff !important;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > button[name="pay_cancel"] {
    background-color: #ea5506 !important;
    color: #fff !important;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > button[name="cancel"] {
    background-color: #999 !important;
    color: #fff !important;
}

/* 부분환불/전액환불 버튼 (2개 버튼) */
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns:has(> button[name="partial"]) {
    width: 100%;
    gap: 7px !important;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > button[name="partial"],
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > button[name="refund"] {
    display: inline-block !important;
    height: 48px !important;
    padding: 15px 25px !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-family: 'Pretendard', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: normal !important;
    letter-spacing: -0.8px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > button[name="partial"] {
    width: 130px !important;
    background-color: #999 !important;
    color: #fff !important;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > button[name="refund"] {
    flex: 1 !important;
    min-width: 0 !important;
    background-color: #ea5506 !important;
    color: #fff !important;
}

/* 환불금액 입력 영역 */
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > .input {
    display: none;
    width: 100%;
    flex-basis: 100%;
    margin-top: 0;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > .input.show {
    display: block;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > .input > span {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > .input > span > input[name="refund_amount"] {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    color: #111;
    letter-spacing: -0.8px;
    box-sizing: border-box;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > .input > span > input[name="refund_amount"]::placeholder {
    color: #999;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > .input > span > button[name="partial_request"],
.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > .input > span > button[name="partial_cancel"] {
    display: inline-block;
    height: 48px;
    padding: 15px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    letter-spacing: -0.8px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > .input > span > button[name="partial_request"] {
    width: 80px;
    background-color: #26b7bc;
    color: #fff;
}

.pop.obj_pop.bottomsheet[data-role="details"] > .btsheet > footer > .btns > .input > span > button[name="partial_cancel"] {
    width: 49px;
    background-color: #999;
    color: #fff;
}

/* 결제청구 페이지 (request.html) */
.wrap.onlink.sub {
    background-color: #fff;
    min-height: 100vh;
}

.wrap.onlink.sub > header.flat {
    background-color: #fff;
    box-shadow: none;
    padding: 10px 10px;
    position: sticky;
    top: 0;
    z-index: 100;
    height: 70px;
}

.wrap.onlink.sub.notice_list > header.flat,
.wrap.onlink.sub.faq > header.flat { background-color: #eee; }

.wrap.onlink.sub > header.flat > h1 {
    font-family: 'Paperlogy', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 50px;
    height: 50px;
    padding: 0px 35px;
    color: #333;
    letter-spacing: -1px;
    overflow: hidden;
}

.wrap.onlink.sub > header.flat > .btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wrap.onlink.sub > header.flat > .btns > button {
    color: #111;
    width: 44px;
    height: 50px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    position: relative;
}

.wrap.onlink.sub > header.flat > .btns > button.history_backward::before {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url('../img/icon_chevron_left.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wrap.onlink.sub > header.flat > .btns > button.gnb::before {
    content: '\e91c';
    font-size: 28px;
    font-family: 'xeicon' !important;
    display: block;
    color: #2e323b;
}

.wrap.onlink.sub > section {
    padding: 0;
    margin: 0;
}

.wrap.onlink.sub > section > .flat_info_warp {
    padding: 0;
    min-height: calc(100dvh - 140px);
    position: relative;
}

.wrap.onlink.sub > section > .flat_info_warp > hgroup {
    padding: 40px 30px;
    display: block;
}

.wrap.onlink.sub > section > .flat_info_warp > hgroup > h3 {
    font-family: 'Paperlogy', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 34px;
    color: #2e323b;
    letter-spacing: -1.4px;
    margin: 0;
    text-align: left;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form {
    padding: 10px 30px 0 30px;
    margin-top: 0;
    display: block;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form {
    display: block;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p {
    display: block;
    font-size: 0px;
    margin-bottom: 25px;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p:last-child {
    margin-bottom: 0;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > label {
    display: block;
    background-color: transparent;
    color: #333;
    font-size: 14px;
    padding: 0;
    line-height: 22px;
    height: auto;
    margin: 0;
    margin-bottom: 5px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    letter-spacing: -0.7px;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > label.required::after {
    display: inline-block;
    content: '*';
    vertical-align: bottom;
    margin-left: 2px;
    color: #ec161d;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span {
    display: block;
    background-color: #eee;
    position: relative;
    border-radius: 3px;
    border: none;
    height: 46px;
    padding: 0 10px;
    box-sizing: border-box;
}

/* 발신번호 필드 (readonly) */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p:first-child > span {
    background-color: #f8f8f8;
    border: 1px solid #eee;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p:first-child > span > input {
    font-weight: 600;
    color: #111;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span > input {
    display: block;
    width: 100%;
    line-height: 46px;
    height: 46px;
    border: 0px;
    font-size: 15px;
    padding: 0;
    letter-spacing: -0.75px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    color: #111;
    background: transparent;
    box-sizing: border-box;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span > input::placeholder {
    color: #bbb;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.readonly > input {
    font-weight: 600;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > b {
    display: block;
    font-size: 13px;
    line-height: 17px;
    height: auto;
    margin-top: 5px;
    color: #999;
    font-weight: 400;
    font-family: 'Pretendard', sans-serif;
    letter-spacing: -0.65px;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > b:empty {
    display: none;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > em {
    display: block;
    font-size: 14px;
    line-height: 22px;
    height: auto;
    margin-top: 2px;
    color: #ec161d;
    font-family: 'Pretendard', sans-serif;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > em:empty {
    display: none;
}

/* 제목 필드 아래 설명 텍스트 (피그마에 있지만 마크업에는 없음 - b 태그로 처리) */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p:nth-child(4) > b {
    display: block;
    font-size: 13px;
    line-height: 17px;
    height: auto;
    margin-top: 5px;
    color: #999;
    font-weight: 400;
    font-family: 'Pretendard', sans-serif;
    letter-spacing: -0.65px;
}

/* 결제금액 필드 */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.price {
    display: flex;
    align-items: center;
    gap: 0;
    padding-right: 10px;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.price > input {
    flex: 1;
    min-width: 0;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.price::after {
    content: '원';
    display: block;
    font-size: 13px;
    line-height: 46px;
    color: #111;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    letter-spacing: -0.65px;
    flex-shrink: 0;
}

/* 발송구분 라디오 버튼 */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.checkbox {
    display: flex;
    gap: 20px;
    align-items: center;
    background-color: transparent;
    border: none;
    padding: 0;
    height: auto;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.checkbox > label {
    position: relative;
    display: inline-block;
    margin-right: 0;
    padding: 0;
    padding-left: 30px;
    height: 46px;
    color: #333;
    text-align: left;
    line-height: 46px;
    vertical-align: bottom;
    cursor: pointer;
    overflow: visible;
    font-size: 0px;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.checkbox > label > input[type=radio] {
    display: none;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.checkbox > label > input[type=radio] + span {
    display: inline-block;
    line-height: 46px;
    vertical-align: bottom;
    font-size: 15px;
    margin-left: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    color: #999;
    letter-spacing: -0.75px;
}

/* 라디오 버튼 텍스트 변경 - "즉시" → "즉시발송", "예약" → "예약발송" */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.checkbox > label:first-child > input[type=radio] + span::after {
    content: '발송';
    margin-left: 0;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.checkbox > label:last-child > input[type=radio] + span::after {
    content: '발송';
    margin-left: 0;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.checkbox > label > input[type=radio] + span::before {
    background: #ddd;
    position: absolute;
    top: 12px;
    left: 0;
    width: 22px;
    height: 22px;
    border-radius: 12px;
    content: '';
    border: none;
    box-sizing: border-box;
    background-image: url('../img/icon_check_unchecked.svg');
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.checkbox > label > input[type=radio]:checked + span {
    color: #111;
    font-weight: 400;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.checkbox > label > input[type=radio]:checked + span::before {
    background: #2e323b;
    background-image: url('../img/icon_check.svg');
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
}

/* 예약 발송 섹션 */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .rev_section.division {
    display: none;
    margin-top: -20px;
    margin-bottom: 0;
    gap: 5px;
    align-items: flex-start;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .rev_section.division.show {
    display: flex;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .rev_section.division > p {
    display: block;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .rev_section.division > p.dv2-4 {
    flex: 0 0 calc(50% - 2.5px);
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .rev_section.division > p.dv1-4 {
    flex: 0 0 calc(25% - 2.5px);
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .rev_section.division > p > span {
    display: block;
    background-color: #eee;
    position: relative;
    border-radius: 3px;
    border: none;
    height: 46px;
    padding: 0 10px;
    box-sizing: border-box;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .rev_section.division > p > span.date {
    padding-right: 5px;
    display: flex;
    align-items: center;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .rev_section.division > p > span.date::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url('../img/icon_calendar.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    margin-left: auto;
    filter: brightness(0) saturate(100%) invert(75%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .rev_section.division > p > span.select_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 5px;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .rev_section.division > p > span.select_box > select {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: normal;
    color: #111;
    letter-spacing: -0.75px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    line-height: 46px;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .rev_section.division > p > span.select_box::after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-image: url('../img/icon_chevron_down.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    filter: brightness(0) saturate(100%) invert(75%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .rev_section.division > p > span > input {
    display: block;
    width: 100%;
    line-height: 46px;
    height: 46px;
    border: 0px;
    font-size: 15px;
    padding: 0;
    letter-spacing: -0.75px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    color: #111;
    background: transparent;
    box-sizing: border-box;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .rev_section.division > p > span > input::placeholder {
    color: #999;
}

/* 하단 버튼 - request.html용 (단일 버튼, !important 사용) */
.wrap.onlink.sub > section > .footer_btns {
    display: block !important;
    height: auto !important;
    position: sticky !important;
    bottom: 0px !important;
    right: 0px !important;
    left: 0px !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 20px !important;
    z-index: 10;
}

.wrap.onlink.sub > section > .footer_btns > button {
    display: block !important;
    width: 100% !important;
    background-color: #ea5506 !important;
    line-height: normal !important;
    height: 48px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.8px !important;
    color: #fff !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    font-family: 'Pretendard', sans-serif !important;
}

.wrap.onlink.sub > section > .footer_btns > button:disabled {
    background: #bbb !important;
}

.wrap.onlink.sub > section > .footer_btns > button.waiting {
    background: #999 !important;
}

/* 청구내역 페이지 (invoice.html) */
.wrap.onlink.sub > section {
    padding: 0;
    margin: 0;
}

.wrap.onlink.sub > section > .topper {
    padding: 20px 20px 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

/* 날짜 선택기 (invoice용) */
.wrap.onlink.sub > section > .topper > .seleter {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    position: relative;
}

.wrap.onlink.sub > section > .topper > .seleter > dt {
    font-family: 'Paperlogy', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: #2e323b;
    letter-spacing: -0.54px;
    width: 78px;
    text-align: center;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
}

.wrap.onlink.sub > section > .topper > .seleter > dt::after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('../img/icon_chevron_down.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    filter: brightness(0) saturate(100%) invert(75%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.wrap.onlink.sub > section > .topper > .seleter.opened > dt::after {
    transform: translateY(-50%) rotate(180deg);
}

.wrap.onlink.sub > section > .topper > .seleter > dd {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 8px 0;
    margin-top: 8px;
    min-width: 116px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    flex-direction: column;
    gap: 4px;
    white-space: nowrap;
    z-index: 10;
}

.wrap.onlink.sub > section > .topper > .seleter.opened > dd {
    display: flex;
}

.wrap.onlink.sub > section > .topper > .seleter > dd > span {
    font-family: 'Paperlogy', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    color: #2e323b;
    letter-spacing: -0.54px;
    padding: 8px 16px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s;
    white-space: nowrap;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.wrap.onlink.sub > section > .topper > .seleter > dd > span:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* 총액 표시 */
.wrap.onlink.sub > section > .topper > .total {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    width: 100%;
}

.wrap.onlink.sub > section > .topper > .total > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 26px;
    color: #999;
    letter-spacing: -0.8px;
    text-align: center;
    width: 100%;
}

.wrap.onlink.sub > section > .topper > .total > b {
    font-family: 'Paperlogy', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: normal;
    color: #2e323b;
    letter-spacing: -1.8px;
    text-align: center;
    width: 100%;
    white-space: nowrap;
}

/* 탭 필터 */
.wrap.onlink.sub > section > .tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background-color: #eee;
    border-radius: 30px;
    margin: 0px 15px;
}

.wrap.onlink.sub > section > .tabs > a {
    flex: 1 1 0%;
    min-width: 0;
    height: 42px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    color: #bbb;
    letter-spacing: -0.75px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
    cursor: pointer;
}

.wrap.onlink.sub > section > .tabs > a.on {
    background-color: #2e323b;
    color: #fff;
}

/* 청구 내역 리스트 */
.wrap.onlink.sub > section > .invoice_lists {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
    border-top: 1px solid #ddd;
}

.wrap.onlink.sub > section > .invoice_lists > li {
    border-bottom: 1px solid #ddd;
    padding: 15px 10px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 15px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.wrap.onlink.sub > section > .invoice_lists > li > h4 {
    grid-row: 1;
    grid-column: 1;
}

/* p와 span을 같은 행(2행)에 배치 */
.wrap.onlink.sub > section > .invoice_lists > li > p {
    grid-row: 2;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
    gap: 6px;
    min-width: 0;
    width: auto;
    max-width: calc(100% - 150px);
    justify-self: start;
}

.wrap.onlink.sub > section > .invoice_lists > li > span:last-child {
    grid-row: 2;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: right;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    color: #111;
    letter-spacing: -0.65px;
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0;
    justify-self: end;
    align-self: start;
}

.wrap.onlink.sub > section > .invoice_lists > li > i {
    position: absolute;
    top: 20px;
    right: 10px;
    width: 60px;
    height: 28px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: normal;
    color: #fff;
    letter-spacing: -0.5px;
    text-align: center;
    z-index: 1;
    font-style: normal;
}

.wrap.onlink.sub > section > .invoice_lists > li > i.reservation::before {
    content: '발송예약';
    background-color: #999;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

.wrap.onlink.sub > section > .invoice_lists > li > i.issued::before {
    content: '발송완료';
    background-color: #13ae5c;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

.wrap.onlink.sub > section > .invoice_lists > li > h4 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    margin: 0;
    flex: 1 1 0%;
    min-width: 0;
    padding-right: 70px;
    box-sizing: border-box;
}

.wrap.onlink.sub > section > .invoice_lists > li > h4 > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #999;
    letter-spacing: -0.6px;
}

.wrap.onlink.sub > section > .invoice_lists > li > h4 > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.9px;
    white-space: nowrap;
}

/* 두 번째 행: 상품명/금액/결제상태 (왼쪽) | 연락처 (오른쪽) */
.wrap.onlink.sub > section > .invoice_lists > li > p {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
    gap: 4px 10px;
    min-width: 0;
    width: auto;
    max-width: calc(100% - 150px);
}

.wrap.onlink.sub > section > .invoice_lists > li > p > em {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 15px;
    color: #111;
    letter-spacing: -0.7px;
    white-space: nowrap;
    display: block;
    width: 100%;
    flex-basis: 100%;
}

/* 금액과 결제상태를 같은 행에 배치 */
.wrap.onlink.sub > section > .invoice_lists > li > p > span:first-of-type {
    display: inline-flex;
    align-items: center;
    margin-right: 0;
    flex-shrink: 0;
}

.wrap.onlink.sub > section > .invoice_lists > li > p > span.pending,
.wrap.onlink.sub > section > .invoice_lists > li > p > span.paid {
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    flex-shrink: 0;
}

.wrap.onlink.sub > section > .invoice_lists > li > p > span:first-of-type {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.65px;
}

.wrap.onlink.sub > section > .invoice_lists > li > p > span:first-of-type > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 20px;
    color: #111;
    letter-spacing: -1.05px;
}

.wrap.onlink.sub > section > .invoice_lists > li > p > span.pending {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.65px;
    margin-left: 0;
    white-space: nowrap;
}

.wrap.onlink.sub > section > .invoice_lists > li > p > span.pending::before {
    content: '결제대기';
}

.wrap.onlink.sub > section > .invoice_lists > li > p > span.paid {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    color: #ea5506;
    letter-spacing: -0.65px;
    margin-left: 0;
    white-space: nowrap;
}

.wrap.onlink.sub > section > .invoice_lists > li > p > span.paid::before {
    content: '결제완료';
}

/* 연락처 정보 (오른쪽) - 스타일은 위의 grid 섹션에 이미 정의됨 */

.wrap.onlink.sub > section > .invoice_lists > li > span:last-child > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 15px;
    color: #111;
    letter-spacing: -0.75px;
    white-space: nowrap;
    display: block;
}

/* 결제내역 페이지 (paid.html) */
/* 차트 영역 */
.wrap.onlink.sub > section > .topper > .week_result {
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0;
    position: relative;
    background-color: #eee;
    border-radius: 10px;
    padding: 20px 15px;
    padding-top: 24px;
}

.wrap.onlink.sub > section > .topper > .week_result > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.6px;
    position: absolute;
    top: 24px;
    right: 15px;
    text-align: right;
}

.wrap.onlink.sub > section > .topper > .week_result > .chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-top: 20px;
}

.wrap.onlink.sub > section > .topper > .week_result > .chart::-webkit-scrollbar {
    display: none;
}

.wrap.onlink.sub > section > .topper > .week_result > .chart > p {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    position: relative;
    min-width: 50px;
}

.wrap.onlink.sub > section > .topper > .week_result > .chart > p > i {
    width: 12px;
    background-color: #26b7bc;
    border-radius: 10px 10px 0 0;
    min-height: 1px;
    display: block;
    flex-shrink: 0;
}

.wrap.onlink.sub > section > .topper > .week_result > .chart > p > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 20px;
    color: #666;
    letter-spacing: -0.55px;
}

.wrap.onlink.sub > section > .topper > .week_result > .chart > p > span {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #2e323b;
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 13px;
    white-space: nowrap;
    z-index: 10;
}

.wrap.onlink.sub > section > .topper > .week_result > .chart > p > span > b {
    font-weight: 700;
    font-size: 12px;
}

.wrap.onlink.sub > section > .topper > .week_result > .chart > p:hover > span {
    display: block;
}

/* detail 섹션 */
.wrap.onlink.sub > section > .topper > .detail {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    position: relative;
    padding: 20px;
    background-color: #eee;
    border-radius: 0px;
}

.wrap.onlink.sub > section > .topper > .detail > .total {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    flex: 0 0 140px;
}

.wrap.onlink.sub > section > .topper > .detail > .total > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.7px;
}

.wrap.onlink.sub > section > .topper > .detail > .total > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: normal;
    color: #2e323b;
    letter-spacing: -1.05px;
    white-space: nowrap;
}

.wrap.onlink.sub > section > .topper > .detail > .total > b > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
}

.wrap.onlink.sub > section > .topper > .detail > .divider {
    position: absolute;
    left: calc(140px + 10px);
    top: 20px;
    bottom: 20px;
    width: 1px;
    background-color: #ccc;
}

.wrap.onlink.sub > section > .topper > .detail > .spec {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.wrap.onlink.sub > section > .topper > .detail > .spec > p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}

.wrap.onlink.sub > section > .topper > .detail > .spec > p > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.7px;
}

.wrap.onlink.sub > section > .topper > .detail > .spec > p > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #2e323b;
    letter-spacing: -0.7px;
    text-align: right;
}

.wrap.onlink.sub > section > .topper > .detail > .spec > p > b > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
}

.wrap.onlink.sub > section > .topper > .detail > .spec > p > b > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #999;
}

/* 결제 내역 리스트 */
.wrap.onlink.sub > section > .paid_lists {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
    border-top: 1px solid #ddd;
}

.wrap.onlink.sub > section > .paid_lists > li {
    border-bottom: 1px solid #ddd;
    padding: 15px 10px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 15px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.wrap.onlink.sub > section > .paid_lists > li > h4 {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    margin: 0;
    flex: 1 1 0%;
    min-width: 0;
    padding-right: 70px;
    box-sizing: border-box;
}

.wrap.onlink.sub > section > .paid_lists > li > h4 > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #999;
    letter-spacing: -0.6px;
}

.wrap.onlink.sub > section > .paid_lists > li > h4 > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.9px;
    white-space: nowrap;
}

/* p와 span을 같은 행(2행)에 배치 */
.wrap.onlink.sub > section > .paid_lists > li > p {
    grid-row: 2;
    grid-column: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
    gap: 4px 10px;
    min-width: 0;
    width: auto;
    max-width: calc(100% - 150px);
    justify-self: start;
}

.wrap.onlink.sub > section > .paid_lists > li > p > em {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 15px;
    color: #111;
    letter-spacing: -0.7px;
    white-space: nowrap;
    display: block;
    width: 100%;
    flex-basis: 100%;
}

.wrap.onlink.sub > section > .paid_lists > li > p > span:first-of-type {
    display: inline-flex;
    align-items: center;
    margin-right: 0;
    flex-shrink: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.65px;
}

.wrap.onlink.sub > section > .paid_lists > li > p > span:first-of-type > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 20px;
    color: #111;
    letter-spacing: -1.05px;
}

.wrap.onlink.sub > section > .paid_lists > li > p > span.refund {
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    flex-shrink: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    color: #ec161d;
    letter-spacing: -0.65px;
    white-space: nowrap;
}

.wrap.onlink.sub > section > .paid_lists > li > p > span.partial {
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    flex-shrink: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    color: #ea5506;
    letter-spacing: -0.65px;
    white-space: nowrap;
}

/* 결제취소 항목의 금액에 취소선 추가 - JavaScript로 li에 cancel 클래스 추가 필요 */
.wrap.onlink.sub > section > .paid_lists > li.cancel > p > span:first-of-type {
    text-decoration: line-through;
    color: #999;
}

.wrap.onlink.sub > section > .paid_lists > li.cancel > p > span:first-of-type > b {
    text-decoration: line-through;
    color: #999;
}

.wrap.onlink.sub > section > .paid_lists > li > span:last-child {
    grid-row: 2;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: right;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    color: #111;
    letter-spacing: -0.65px;
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0;
    justify-self: end;
    align-self: start;
}

.wrap.onlink.sub > section > .paid_lists > li > span:last-child > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 15px;
    color: #111;
    letter-spacing: -0.75px;
    white-space: nowrap;
    display: block;
}

.wrap.onlink.sub > section > .paid_lists > li > i {
    position: absolute;
    top: 20px;
    right: 10px;
    width: 60px;
    height: 28px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: normal;
    color: #fff;
    letter-spacing: -0.5px;
    text-align: center;
    z-index: 1;
    font-style: normal;
}

.wrap.onlink.sub > section > .paid_lists > li > i.cancel::before {
    content: '결제취소';
    background-color: #999;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

.wrap.onlink.sub > section > .paid_lists > li > i.approval::before {
    content: '정상승인';
    background-color: #26b7bc;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

.wrap.onlink.sub > section > .paid_lists > li > i.refund::before {
    content: '전액환불';
    background-color: #ec161d;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

.wrap.onlink.sub > section > .paid_lists > li > i.partial::before {
    content: '부분환불';
    background-color: #ea5506;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

/* 정산내역 페이지 (payout.html) */
/* 차트 영역 - payout.html용 */
.wrap.onlink.sub > section.has-payout-lists > .topper > .week_result {
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0;
    position: relative;
    background-color: #eee;
    border-radius: 10px;
    padding: 20px 15px;
    padding-top: 24px;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .week_result > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.6px;
    position: absolute;
    top: 24px;
    right: 15px;
    text-align: right;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .week_result > .chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 5px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-top: 20px;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .week_result > .chart::-webkit-scrollbar {
    display: none;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .week_result > .chart > p {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    position: relative;
    min-width: 50px;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .week_result > .chart > p > i {
    width: 12px;
    background-color: #1d80e4;
    border-radius: 10px 10px 0 0;
    min-height: 1px;
    display: block;
    flex-shrink: 0;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .week_result > .chart > p > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 20px;
    color: #666;
    letter-spacing: -0.55px;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .week_result > .chart > p > span {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #2e323b;
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 13px;
    white-space: nowrap;
    z-index: 10;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .week_result > .chart > p > span > b {
    font-weight: 700;
    font-size: 12px;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .week_result > .chart > p:hover > span {
    display: block;
}

/* 정산(예정)금액 섹션 */
.wrap.onlink.sub > section.has-payout-lists > .topper > .payout {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    width: 100%;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .payout > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 26px;
    color: #999;
    letter-spacing: -0.8px;
    text-align: center;
    width: 100%;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .payout > b {
    font-family: 'Paperlogy', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: normal;
    color: #2e323b;
    letter-spacing: -1.8px;
    text-align: center;
    width: 100%;
    white-space: nowrap;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .payout > em {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    color: #999;
    letter-spacing: -0.7px;
    text-align: center;
    width: 100%;
}

/* detail 섹션 - payout.html용 */
.wrap.onlink.sub > section.has-payout-lists > .topper > .detail {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    position: relative;
    padding: 20px;
    background-color: #eee;
    border-radius: 0px;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .detail > .total {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    flex: 0 0 140px;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .detail > .total > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.7px;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .detail > .total > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: normal;
    color: #2e323b;
    letter-spacing: -1.05px;
    white-space: nowrap;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .detail > .total > span > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .detail > .divider {
    position: absolute;
    left: calc(140px + 10px);
    top: 20px;
    bottom: 20px;
    width: 1px;
    background-color: #ccc;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .detail > .spec {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .detail > .spec > p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .detail > .spec > p > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.7px;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .detail > .spec > p > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #2e323b;
    letter-spacing: -0.7px;
    text-align: right;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .detail > .spec > p > b > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
}

.wrap.onlink.sub > section.has-payout-lists > .topper > .detail > .spec > p > b > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #999;
}

/* 정산 내역 리스트 */
.wrap.onlink.sub > section.has-payout-lists > .payout_lists {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
    border-top: 1px solid #ddd;
}

.wrap.onlink.sub > section.has-payout-lists > .payout_lists > li {
    border-bottom: 1px solid #ddd;
    padding: 15px 10px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 15px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.wrap.onlink.sub > section.has-payout-lists > .payout_lists > li > h4 {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    margin: 0;
    flex: 1 1 0%;
    min-width: 0;
    padding-right: 70px;
    box-sizing: border-box;
}

.wrap.onlink.sub > section.has-payout-lists > .payout_lists > li > h4 > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #999;
    letter-spacing: -0.6px;
}

.wrap.onlink.sub > section.has-payout-lists > .payout_lists > li > h4 > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.9px;
    white-space: nowrap;
}

/* p와 span을 같은 행(2행)에 배치 */
.wrap.onlink.sub > section.has-payout-lists > .payout_lists > li > p {
    grid-row: 2;
    grid-column: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
    gap: 4px 10px;
    min-width: 0;
    width: auto;
    max-width: calc(100% - 150px);
    justify-self: start;
}

.wrap.onlink.sub > section.has-payout-lists > .payout_lists > li > p > em {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 15px;
    color: #111;
    letter-spacing: -0.7px;
    white-space: nowrap;
    display: block;
    width: 100%;
    flex-basis: 100%;
}

.wrap.onlink.sub > section.has-payout-lists > .payout_lists > li > p > span:first-of-type {
    display: inline-flex;
    align-items: center;
    margin-right: 0;
    flex-shrink: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.65px;
}

.wrap.onlink.sub > section.has-payout-lists > .payout_lists > li > p > span:first-of-type > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 20px;
    letter-spacing: -1.05px;
}

/* 금액 색상: +는 파란색, -는 빨간색 (JavaScript로 클래스 추가 필요) */
.wrap.onlink.sub > section.has-payout-lists > .payout_lists > li > p > span:first-of-type.positive > b {
    color: #1d80e4;
}

.wrap.onlink.sub > section.has-payout-lists > .payout_lists > li > p > span:first-of-type.negative > b {
    color: #ec161d;
}

.wrap.onlink.sub > section.has-payout-lists > .payout_lists > li > span:last-child {
    grid-row: 2;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: right;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    color: #111;
    letter-spacing: -0.65px;
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0;
    justify-self: end;
    align-self: start;
}

.wrap.onlink.sub > section.has-payout-lists > .payout_lists > li > span:last-child > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 15px;
    color: #111;
    letter-spacing: -0.75px;
    white-space: nowrap;
    display: block;
}

.wrap.onlink.sub > section.has-payout-lists > .payout_lists > li > i {
    position: absolute;
    top: 20px;
    right: 10px;
    width: 60px;
    height: 28px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: normal;
    color: #fff;
    letter-spacing: -0.5px;
    text-align: center;
    z-index: 1;
    font-style: normal;
}

.wrap.onlink.sub > section.has-payout-lists > .payout_lists > li > i.approved::before {
    content: '승인';
    background-color: #1d80e4;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

.wrap.onlink.sub > section.has-payout-lists > .payout_lists > li > i.returned::before {
    content: '반송';
    background-color: #ec161d;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

/* 공지사항 목록 페이지 (notice_list.html) */
/* 검색창 (공지사항 기본 스타일) */
.wrap.onlink.sub > section > .search {
    padding: 20px 0px 40px 0px;
    margin-top: 0;
    margin-bottom: 10px;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrap.onlink.sub > section > .search > span {
    display: flex;
    align-items: center;
    gap: 0px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    height: 44px;
    width: 280px;
    padding: 0 15px;
    padding-right: 5px;
    box-sizing: border-box;
    position: relative;
}

.wrap.onlink.sub > section > .search > span > input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.7px;
    padding: 0;
    margin: 0;
    outline: none;
}

.wrap.onlink.sub > section > .search > span > input::placeholder {
    color: #999;
}

.wrap.onlink.sub > section > .search > span > .btn_cancel {
    display: none;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    font-size: 0;
    flex-shrink: 0;
    background-image: url('../img/icon_x.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5;
    order: 2;
    margin-right: 5px;
}

.wrap.onlink.sub > section > .search > span > .btn_search {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    font-size: 0;
    flex-shrink: 0;
    background-image: url('../img/icon_search.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5;
    order: 3;
}

/* 총 건수 (공지사항, FAQ, QNA 공통) */
.wrap.onlink.sub > section > .board_top {
    padding: 10px 20px;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
}

.wrap.onlink.sub > section > .board_top > p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.7px;
    margin: 0;
}

.wrap.onlink.sub > section > .board_top > p > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
}

/* 공지사항 리스트 */
.wrap.onlink.sub > section > .board_lists {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 0;
    margin-left: 20px;
    margin-right: 20px;
    border-top: 1px solid #ddd;
}

.wrap.onlink.sub > section > .board_lists > li {
    border-bottom: 1px solid #ddd;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    cursor: pointer;
    transition: background-color 0.2s;
}

.wrap.onlink.sub > section > .board_lists > li:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.wrap.onlink.sub > section > .board_lists > li > h5 {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.75px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
}

.wrap.onlink.sub > section > .board_lists > li > p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.65px;
    margin: 0;
}

.wrap.onlink.sub > section > .board_lists > li > span.caterory {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.65px;
    display: inline-block;
    align-self: flex-start;
}

.wrap.onlink.sub > section > .board_lists > li > span.caterory.blue {
    color: #26b7bc;
}

.wrap.onlink.sub > section > .board_lists > li > span.caterory.red {
    color: #ea5506;
}

/* 날짜와 상태가 같은 줄에 있는 경우 (QNA 등) */
.wrap.onlink.sub > section > .board_lists > li > div {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.wrap.onlink.sub > section > .board_lists > li > div > p {
    margin: 0;
    flex: 1;
    color: #999;
}

.wrap.onlink.sub > section > .board_lists > li > div > span.caterory {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.65px;
    margin: 0;
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0px !important;
}

.wrap.onlink.sub > section > .board_lists > li > div > span.caterory.blue {
    color: #26b7bc;
}

.wrap.onlink.sub > section > .board_lists > li > div > span.caterory.red {
    color: #ea5506;
}

.wrap.onlink.sub > section > .board_lists > li > div > span.caterory.gray {
    color: #999;
}

.wrap.onlink.sub > section > .board_lists > li > div > span.caterory.green {
    color: #13ae5c;
}

/* QNA 목록 - gap 조정 */

/* nodata 상태 */
.wrap.onlink.sub > section > .board_lists > li.nodata {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    border-bottom: none;
    cursor: default;
}

.wrap.onlink.sub > section > .board_lists > li.nodata:hover {
    background-color: transparent;
}

.wrap.onlink.sub > section > .board_lists > li.nodata::before {
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23999" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 10px;
}

.wrap.onlink.sub > section > .board_lists > li.nodata > p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.8px;
    text-align: center;
    margin: 0;
}

/* 공지사항/QNA 상세 페이지 (notice_view.html, qna_view.html) */
.wrap.onlink.sub > section > .title {
    border-bottom: 1px solid #ddd;
    padding: 20px 5px;
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.wrap.onlink.sub > section > .title > h5 {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.8px;
    margin: 0;
    white-space: normal;
    word-wrap: break-word;
}

.wrap.onlink.sub > section > .title > p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.7px;
    margin: 0;
}

.wrap.onlink.sub > section > .title > span.caterory {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.7px;
    display: inline-block;
    align-self: flex-start;
}

.wrap.onlink.sub > section > .title > span.caterory.blue {
    color: #26b7bc;
}

.wrap.onlink.sub > section > .title > span.caterory.red {
    color: #ea5506;
}

.wrap.onlink.sub > section > .title > span.caterory.gray {
    color: #999;
}

.wrap.onlink.sub > section > .title > span.caterory.green {
    color: #13ae5c;
}

/* 날짜와 상태가 같은 줄에 있는 경우 (QNA 등) */
.wrap.onlink.sub > section > .title > div {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.wrap.onlink.sub > section > .title > div > p {
    margin: 0;
    flex: 1;
    color: #999;
}

.wrap.onlink.sub > section > .title > div > span.caterory {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.7px;
    margin: 0;
    width: auto;
    flex-shrink: 0;
}

.wrap.onlink.sub > section > .title > div > span.caterory.blue {
    color: #26b7bc;
}

.wrap.onlink.sub > section > .title > div > span.caterory.red {
    color: #ea5506;
}

.wrap.onlink.sub > section > .title > div > span.caterory.gray {
    color: #999;
}

.wrap.onlink.sub > section > .title > div > span.caterory.green {
    color: #13ae5c;
}

/* 내용 영역 (공지사항, QNA 공통) */
.wrap.onlink.sub > section > .contents {
    padding: 18px 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* QNA 상세 페이지 - padding 조정 */
.wrap.onlink.sub > section > .contents:has(+ .attachment),
.wrap.onlink.sub > section > .contents:has(+ .answer) {
    padding: 0;
    margin: 0 20px;
}

.wrap.onlink.sub > section > .contents > img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    display: block;
    background-color: #d9d9d9;
    min-height: 232px;
    object-fit: cover;
}

.wrap.onlink.sub > section > .contents > p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.7px;
    margin: 0;
    margin-bottom: 0;
    white-space: normal;
    word-wrap: break-word;
}

.wrap.onlink.sub > section > .contents > p:last-child {
    margin-bottom: 0;
}

/* 첨부파일 */
.wrap.onlink.sub > section > .attachment {
    background-color: #f8f8f8;
    padding: 5px 15px;
    margin: 20px 20px 0px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wrap.onlink.sub > section > .attachment > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.wrap.onlink.sub > section > .attachment > a:last-child {
    border-bottom: none;
}

.wrap.onlink.sub > section > .attachment > a:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.wrap.onlink.sub > section > .attachment > a > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #111;
    letter-spacing: -0.6px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wrap.onlink.sub > section > .attachment > a > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #111;
    letter-spacing: -0.6px;
    text-align: right;
    width: 60px;
    flex-shrink: 0;
    margin-left: 10px;
}

/* FAQ 페이지 검색창 (탭이 있는 경우 - 공지사항 스타일 오버라이드) */
.wrap.onlink.sub > section > .search:has(> .tabs) {
    background: #eee;
    padding: 20px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

/* 탭 필터 - FAQ용 */
.wrap.onlink.sub > section > .search > .tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    height: 44px;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0 20px;
}

.wrap.onlink.sub > section > .search > .tabs > a {
    flex: 1 1 0%;
    min-width: 0;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.65px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
    cursor: pointer;
    background-color: #ddd;
    border: none;
}

.wrap.onlink.sub > section > .search > .tabs > a.on {
    background-color: #2e323b;
    color: #fff;
    font-weight: 700;
}

/* FAQ 리스트 */
.wrap.onlink.sub > section > .board_lists.faq {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 0;
    margin-left: 20px;
    margin-right: 20px;
    border-top: 1px solid #ddd;
}

.wrap.onlink.sub > section > .board_lists.faq > li {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.wrap.onlink.sub > section > .board_lists.faq > li:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* 질문 영역 래퍼 */
.wrap.onlink.sub > section > .board_lists.faq > li > .question_wrap {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    width: 100%;
    position: relative;
    justify-content: flex-start;
}

/* Q 아이콘 */
.wrap.onlink.sub > section > .board_lists.faq > li > .question_wrap::before {
    content: 'Q';
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    letter-spacing: -0.7px;
    background-color: #bbb;
    border-radius: 20px;
    flex-shrink: 0;
    z-index: 1;
}

/* chevron-right 아이콘 */
.wrap.onlink.sub > section > .board_lists.faq > li > .question_wrap::after {
    content: '';
    width: 14px;
    height: 14px;
    background-image: url('../img/icon_chevron_down.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: auto;
}

.wrap.onlink.sub > section > .board_lists.faq > li.active > .question_wrap::after {
    transform: rotate(180deg);
}

/* 질문 내용 영역 */
.wrap.onlink.sub > section > .board_lists.faq > li > .question_wrap > * {
    flex: 1;
    min-width: 0;
}

/* 질문 내용 래퍼 */
.wrap.onlink.sub > section > .board_lists.faq > li > .question_wrap > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
    align-items: flex-start;
    justify-content: center;
}

/* 제목 */
.wrap.onlink.sub > section > .board_lists.faq > li > .question_wrap > div > h5,
.wrap.onlink.sub > section > .board_lists.faq > li > .question_wrap > h5 {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.75px;
    margin: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 카테고리 */
.wrap.onlink.sub > section > .board_lists.faq > li > .question_wrap > div > p,
.wrap.onlink.sub > section > .board_lists.faq > li > .question_wrap > p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.65px;
    margin: 0;
    width: 100%;
}

/* 답변 영역 (기본 숨김) */
.wrap.onlink.sub > section > .board_lists.faq > li > .answer {
    display: none;
    margin-top: 0;
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
    position: relative;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    padding: 15px 10px;
    background-color: #eee;
}

/* A 아이콘 */
.wrap.onlink.sub > section > .board_lists.faq > li > .answer::before {
    content: 'A';
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    letter-spacing: -0.7px;
    background-color: #26b7bc;
    border-radius: 20px;
    flex-shrink: 0;
    margin-top: 0;
}

/* 답변 텍스트 */
.wrap.onlink.sub > section > .board_lists.faq > li.active > .answer {
    display: flex;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.7px;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    margin-left:40px;
    margin-top:10px;
    width: calc(100% - 40px);
}

/* 답변 텍스트 내용 (A 아이콘 다음에 오는 텍스트) */
.wrap.onlink.sub > section > .board_lists.faq > li.active > .answer > * {
    flex: 1;
    min-width: 0;
}

/* nodata 상태 */
.wrap.onlink.sub > section > .board_lists.faq > li.nodata {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    border-bottom: none;
    cursor: default;
}

.wrap.onlink.sub > section > .board_lists.faq > li.nodata:hover {
    background-color: transparent;
}

.wrap.onlink.sub > section > .board_lists.faq > li.nodata::before {
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    background-image: url('../img/icon_info.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 20px;
}

.wrap.onlink.sub > section > .board_lists.faq > li.nodata::after {
    display: none;
}

.wrap.onlink.sub > section > .board_lists.faq > li.nodata > p {
    margin-left: 0;
    padding-right: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.8px;
    text-align: center;
}

/* 1:1 문의 목록 페이지 (qna_list.html) */
/* 문의하기 버튼 */
.wrap.onlink.sub > section > .board_top > button.btn_question {
    background-color: #2e323b;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: normal;
    padding: 15px 25px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    letter-spacing: -0.65px;
    white-space: nowrap;
    flex-shrink: 0;
}

.wrap.onlink.sub > section > .contents > img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    display: block;
    background-color: #d9d9d9;
    min-height: 232px;
    object-fit: cover;
}

.wrap.onlink.sub > section > .contents > p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.7px;
    margin: 0;
    white-space: normal;
    word-wrap: break-word;
}

/* 답변 영역 */
.wrap.onlink.sub > section > .answer {
    background-color: #eee;
    border-radius: 0;
    padding: 15px;
    margin: 20px 20px 0px 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    position: relative;
}

.wrap.onlink.sub > section > .answer::before {
    content: 'A';
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    letter-spacing: -0.7px;
    background-color: #13ae5c;
    border-radius: 20px;
    flex-shrink: 0;
    margin-top: 0;
}

.wrap.onlink.sub > section > .answer > div {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wrap.onlink.sub > section > .answer > div > h6 {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.6px;
    width: 100%;
}

.wrap.onlink.sub > section > .answer > div > h6 > b {
    font-weight: 700;
}

.wrap.onlink.sub > section > .answer > div > h6 > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.55px;
}

.wrap.onlink.sub > section > .answer > div > p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.65px;
    margin: 0;
    white-space: normal;
    word-wrap: break-word;
    width: 100%;
}

/* 1:1 문의 작성 페이지 (qna_form.html) */
/* textarea 스타일 */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.textarea { height:auto;padding:10px; }
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span > textarea {
    display: block;
    width: 100%;
    min-height: 186px;
    border: 0px;
    font-size: 15px;
    padding: 0px;
    letter-spacing: -0.75px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    color: #111;
    background: transparent;
    box-sizing: border-box;
    resize: vertical;
    line-height: 20px;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span > textarea::placeholder {
    color: #bbb;
}

/* 파일 첨부 필드 */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.file {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    border: none;
    padding: 0;
    height: auto;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.file > input[type="file"] {
    display: none;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.file > button.btn_attach {
    background-color: #2e323b;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: normal;
    padding: 15px 25px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    letter-spacing: -0.65px;
    white-space: nowrap;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 첨부파일 목록 (form 내부) */
.wrap.onlink.sub > section > .flat_info_warp > .info_form .attachment {
    background-color: #f8f8f8 !important;
    border-radius: 5px !important;
    padding: 5px 15px !important;
    margin: 8px 0 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form .attachment:empty { display: none !important; }

.wrap.onlink.sub > section > .flat_info_warp > .info_form .attachment > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-top: 1px solid #eee;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form .attachment > a:first-child {
    border-top: none;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form .attachment > a:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* 파일명 스타일 (피그마 디자인에 맞춤) */
.wrap.onlink.sub > section > .flat_info_warp > .info_form .attachment > a > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #111;
    letter-spacing: -0.6px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form .attachment > a > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #111;
    letter-spacing: -0.6px;
    text-align: right;
    width: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* 첨부파일 삭제 버튼 (form 내부) */
.wrap.onlink.sub > section > .flat_info_warp > .info_form .attachment > a > button.btn_delete {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form .attachment > a > button.btn_delete::before,
.wrap.onlink.sub > section > .flat_info_warp > .info_form .attachment > a > button.btn_delete::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1px;
    background-color: #999;
    transform: translate(-50%, -50%) rotate(45deg);
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form .attachment > a > button.btn_delete::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form .attachment > a > button.btn_delete:hover::before,
.wrap.onlink.sub > section > .flat_info_warp > .info_form .attachment > a > button.btn_delete:hover::after {
    background-color: #111;
}

/* 하단 버튼 영역 - qna_view, qna_form 공통 (request.html용은 1731줄 참고, pop_biz_info.html 스타일 참고) */
.wrap.onlink.sub > section > .footer_btns {
    display: block;
    height: auto;
    position: sticky;
    bottom: 0px;
    right: 0px;
    left: 0px;
    background: #fff;
    box-shadow: none;
    padding: 0 20px 20px 20px;
    z-index: 10;
    font-size:0;
    margin-top: auto;
    border-radius: 20px 20px 0 0;
    position: relative;
}

/* request.html용 footer_btns는 1731줄의 !important 스타일이 우선 적용됨 */

/* 하단 바 (pop_biz_info.html 스타일 참고) */
.wrap.onlink.sub > section > .footer_btns > button {
    display: inline-block;
    height: 48px;
    padding: 15px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    letter-spacing: -0.8px;
    box-sizing: border-box;
    vertical-align: top;
    margin-top: 0px;
}

.wrap.onlink.sub > section > .footer_btns > button[name="cancel"],
.wrap.onlink.sub > section > .footer_btns > button[name="delete"] {
    display: inline-block !important;
    width: 130px !important;
    background-color: #999 !important;
    color: #fff;
    margin-right: 7px;
    line-height: normal !important;
}

.wrap.onlink.sub > section > .footer_btns > button[name="save"],
.wrap.onlink.sub > section > .footer_btns > button[name="modify"] {
    display: inline-block !important;
    width: calc(100% - 137px) !important;
    background-color: #26b7bc !important;
    color: #fff;
    margin-left: 0;
    line-height: normal !important;
}

/* 내 계정관리 페이지 (account.html) */
/* 간편로그인 플랫폼/계정 섹션의 p 태그 */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p:has(> span.social) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 0;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p:has(> span.social) > label {
    margin-bottom: 5px;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.social {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px;
    background-color: transparent;
    border: none;
    padding: 0;
    height: auto;
    margin-top: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    align-self: flex-start !important;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.social > i {
    width: 42px;
    height: 42px;
    background-color: #04c75b;
    border-radius: 6px;
    display: inline-block;
    padding: 10px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.social > i.naver {
    background-color: #04c75b;
    background-image: url('../img/icon_naver.svg');
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span.social > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    color: #111;
    letter-spacing: -0.8px;
}

/* 휴대폰번호 변경 버튼 */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span > i.btn_phone_change {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: normal;
    color: #2e323b;
    letter-spacing: -0.65px;
    text-decoration: underline;
    text-underline-position: from-font;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
}

/* 휴대폰번호 필드 (readonly) */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p:has(> span > input[readonly][value*="+"]) > span {
    background-color: #f8f8f8;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 10px;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p:has(> span > input[readonly][value*="+"]) > span > input {
    flex: 1;
    min-width: 0;
    font-weight: 700;
}

/* 이름 필드의 본인인증완료 아이콘 */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > span > i:not(.btn_phone_change):not(.countdown) {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: normal;
    color: #999;
    letter-spacing: -0.65px;
    flex-shrink: 0;
    margin-left: auto;
}

/* 휴대폰번호 변경 섹션 (hp_section) */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .hp_section {
    display: none;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .hp_section.show {
    display: block;
}

/* 비밀번호 변경 섹션 (pw_section) */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .pw_section {
    display: none;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .pw_section.show {
    display: block;
}

/* 비밀번호 변경 섹션 내부 입력창 스타일 (기존 입력창과 동일) */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .pw_section > p {
    display: block;
    font-size: 0px;
    margin-bottom: 25px;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .pw_section > p:last-child {
    margin-bottom: 0;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .pw_section > p > label {
    display: block;
    background-color: transparent;
    color: #333;
    font-size: 14px;
    padding: 0;
    line-height: 22px;
    height: auto;
    margin: 0;
    margin-bottom: 5px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    letter-spacing: -0.7px;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .pw_section > p > label.required::after {
    display: inline-block;
    content: '*';
    vertical-align: bottom;
    margin-left: 2px;
    color: #ec161d;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .pw_section > p > span {
    display: block;
    background-color: #eee;
    position: relative;
    border-radius: 3px;
    border: none;
    height: 46px;
    padding: 0 10px;
    box-sizing: border-box;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .pw_section > p > span > input {
    display: block;
    width: 100%;
    line-height: 46px;
    height: 46px;
    border: 0px;
    font-size: 15px;
    padding: 0;
    letter-spacing: -0.75px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    color: #111;
    background: transparent;
    box-sizing: border-box;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .pw_section > p > span > input::placeholder {
    color: #bbb;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .pw_section > p > em {
    display: block;
    font-size: 14px;
    line-height: 22px;
    height: auto;
    margin-top: 2px;
    color: #ec161d;
    font-family: 'Pretendard', sans-serif;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > .pw_section > p > em:empty {
    display: none;
}

/* 비밀번호 변경하기 버튼 (기본 상태) */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p > button.btn_pw_chg {
    background-color: #2e323b;
    border: none;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: normal;
    letter-spacing: -0.65px;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    text-decoration: none;
    width: 120px;
    height: 46px;
    border-radius: 1px;
    display: inline-block;
}

/* 비밀번호 변경 섹션이 열렸을 때 p 태그 레이아웃 조정 */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p:has(+ .pw_section.show) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 25px;
}

.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p:has(+ .pw_section.show) > label {
    margin-bottom: 5px;
}

/* 비밀번호 변경 섹션이 열렸을 때 버튼 스타일 (변경취소 버튼) */
.wrap.onlink.sub > section > .flat_info_warp > .info_form > form > p:has(+ .pw_section.show) > button.btn_pw_chg {
    background-color: #999;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: normal;
    letter-spacing: -0.65px;
    text-decoration: none;
    width: 120px;
    height: 46px;
    padding: 0;
    margin-top: 0;
    margin-left: 0;
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    align-self: flex-start;
}

/* account.html 하단 버튼 (단일 저장 버튼) */
.wrap.onlink.sub > section > .footer_btns:has(> button[name="save"]:only-child) {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: 20px 20px 0 0;
}

.wrap.onlink.sub > section > .footer_btns:has(> button[name="save"]:only-child) > button[name="save"] {
    display: block;
    width: 100%;
    background-color: #ea5506;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    letter-spacing: -0.8px;
    height: 48px;
    padding: 15px 25px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
}

/* 하단 바 (account.html용) */
.wrap.onlink.sub > section > .footer_btns:has(> button[name="save"]:only-child)::after {
    content: '';
    display: block;
    width: 120px;
    height: 5px;
    background-color: #111;
    border-radius: 10px;
    margin: 0 auto;
}

/* 알림 페이지 (push.html) */
/* 카테고리 탭 */
.wrap.onlink.sub > section > .categories {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 15px;
    margin-top: 0;
    margin-bottom: 20px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wrap.onlink.sub > section > .categories::-webkit-scrollbar {
    display: none;
}

.wrap.onlink.sub > section > .categories > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 10px 20px;
    border: 2px solid #bbb;
    border-radius: 20px;
    background-color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #bbb;
    letter-spacing: -0.7px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s;
    box-sizing: border-box;
}

.wrap.onlink.sub > section > .categories > a.on {
    border-color: #26b7bc;
    color: #26b7bc;
    font-weight: 700;
}

/* 알림 리스트 */
.wrap.onlink.sub > section > .push_lists {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 4px;
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wrap.onlink.sub > section > .push_lists > li {
    background-color: #eee;
    border-radius: 5px;
    padding: 15px;
    position: relative;
}

.wrap.onlink.sub > section > .push_lists > li > h4 {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.75px;
    padding-right:28px;
    margin: 0;
    margin-bottom:4px;
    white-space: normal;
    word-wrap: break-word;
}

.wrap.onlink.sub > section > .push_lists > li > span {
    display: block;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.6px;
    margin: 0;
}

.wrap.onlink.sub > section > .push_lists > li > p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    margin-top:8px;
}

.wrap.onlink.sub > section > .push_lists > li > p > b {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    color: #26b7bc;
    letter-spacing: -0.65px;
    flex-shrink: 0;
}

.wrap.onlink.sub > section > .push_lists > li > p > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.65px;
    text-align: right;
    flex-shrink: 0;
}

/* 삭제 버튼 */
.wrap.onlink.sub > section > .push_lists > li > a.delete {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 24px;
    height: 24px;
    background-image: url('../img/icon_x.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 1;
}

.wrap.onlink.sub > section > .push_lists > li > a.delete:hover {
    opacity: 0.7;
}

/* 결제하기 페이지 (payment.html) */
.wrap.onlink.payment {
    background-color: #fff;
    min-height: 100vh;
    position: relative;
    padding:30px;
}

.wrap.onlink.payment > header.flat {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    height: 70px;
    width: 100%;
    max-width: 440px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}

.wrap.onlink.payment > header.flat > .btns.lt > button {
    width: 44px;
    height: 50px;
    display: inline-block;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    color: #111;
    vertical-align: middle;
    text-align: center;
}

.wrap.onlink.payment > header.flat > .btns.lt > button.history_backward::before {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url('../img/icon_chevron_left.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wrap.onlink.payment > header.flat > h1 {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 50px;
    color: #111;
    letter-spacing: -0.9px;
    margin: 0;
    padding: 0;
}

.wrap.onlink.payment > header.flat > .btns.rt > button {
    width: 44px;
    height: 50px;
    display: inline-block;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    color: #111;
    vertical-align: middle;
    text-align: center;
}

.wrap.onlink.payment > header.flat > .btns.rt > button.gnb::before {
    content: '\e91c';
    font-size: 28px;
    font-family: 'xeicon' !important;
    display: block;
    color: #2e323b;
}

.wrap.onlink.payment > section {
    margin: 0px;
    padding: 30px 30px;
    min-height: calc(100vh - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 380 769.72" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><rect x="0" y="0" height="100%" width="100%" fill="url(%23grad)" opacity="1"/><defs><radialGradient id="grad" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="10" gradientTransform="matrix(-38 -76.972 38 -84.789 380 769.72)"><stop stop-color="rgba(234,85,6,1)" offset="0"/><stop stop-color="rgba(210,97,29,1)" offset="0.125"/><stop stop-color="rgba(185,110,52,1)" offset="0.25"/><stop stop-color="rgba(161,122,74,1)" offset="0.375"/><stop stop-color="rgba(136,134,97,1)" offset="0.5"/><stop stop-color="rgba(87,159,143,1)" offset="0.75"/><stop stop-color="rgba(63,171,165,1)" offset="0.875"/><stop stop-color="rgba(38,183,188,1)" offset="1"/></radialGradient></defs></svg>');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 40px;
}

.wrap.onlink.payment > section > .payment_info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 380px;
    position: relative;
}

/* 브랜딩 텍스트 영역 */
.wrap.onlink.payment > section > .payment_info > h1 {
    text-indent: -9999px;
    overflow: hidden;
    width: 100%;
    height: 150px;
    margin: 0 auto 0px;
    padding: 0;
    background-image: url('../img/logo_onlinkbysco.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
}

.wrap.onlink.payment > section > .payment_info > i.cross {
    display: block;
    margin: 0 auto;
    width: 50px;
    height: 50px;
    cursor: pointer;
    font-style: normal;
    background-image: url('../img/icon_cross.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


.wrap.onlink.payment > section > .payment_info > h2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.15);
    padding: 10px 0;
    margin: 0;
}

.wrap.onlink.payment > section > .payment_info > h2 > b {
    font-family: 'Paperlogy', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: normal;
    color: #fff;
    letter-spacing: -1.2px;
    text-align: center;
    width: 100%;
}

.wrap.onlink.payment > section > .payment_info > h2 > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    color: #fff;
    letter-spacing: -0.8px;
    text-align: center;
    width: 100%;
    margin-top: 0;
}

.wrap.onlink.payment > section > .payment_info > p.price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    font-size: 0;
    margin-bottom: -20px;
}

.wrap.onlink.payment > section > .payment_info > p.price > b {
    font-family: 'Paperlogy', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: normal;
    color: #fff;
    letter-spacing: -2.1px;
    display: inline-block;
}

.wrap.onlink.payment > section > .payment_info > p.price::after {
    content: '원을';
    font-family: 'Paperlogy', sans-serif;
    font-weight: 400;
    font-size: 21px;
    line-height: normal;
    color: #fff;
    letter-spacing: -1.05px;
    margin-left: 0;
}

.wrap.onlink.payment > section > .payment_info > p:not(.price) {
    font-family: 'Paperlogy', sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: normal;
    color: #fff;
    letter-spacing: -1.7px;
    text-align: center;
    margin: 0;
}

.wrap.onlink.payment > section > .payment_info > .spec {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    max-width: 200px;
    margin: 0;
    padding:30px 0px;
}

.wrap.onlink.payment > section > .payment_info > .spec > p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    color: #fff;
    letter-spacing: -0.7px;
}

.wrap.onlink.payment > section > .payment_info > .spec > p > b {
    font-weight: 400;
}

.wrap.onlink.payment > section > .payment_info > .spec > p > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    letter-spacing: -0.8px;
    text-align: right;
    flex: 1;
    min-width: 0;
}

.wrap.onlink.payment > section > .payment_info > button.pay {
    width: 100%;
    height: 52px;
    border: 2px solid #fff;
    border-radius: 50px;
    background-color: transparent;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    letter-spacing: -0.9px;
    cursor: pointer;
    padding: 15px 25px;
    box-sizing: border-box;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, border-color 0.2s;
}

.wrap.onlink.payment > section > .payment_info > button.pay:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 결제완료 페이지 (payment_completed.html) */
.wrap.onlink.payment_completed {
    background-color: #eee;
    min-height: 100vh;
    position: relative;
}

.wrap.onlink.payment_completed > header.flat {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    height: 70px;
    width: 100%;
    max-width: 440px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}

.wrap.onlink.payment_completed > header.flat > .btns.lt {
    width: 44px;
    height: 50px;
}

.wrap.onlink.payment_completed > header.flat > h1 {
    margin: 0;
    padding: 0;
    line-height: normal;
    height: auto;
    flex: 0 0 auto;
}

.wrap.onlink.payment_completed > header.flat > h1 > a {
    display: inline-block;
    width: 99px;
    height: 35px;
    background-image: url('../img/logo_onlink.svg');
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    vertical-align: middle;
    filter: brightness(0) invert(1);
}

.wrap.onlink.payment_completed > header.flat > .btns.rt {
    width: 44px;
    height: 50px;
}

.wrap.onlink.payment_completed > section {
    padding: 0;
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 60px 30px;
    box-sizing: border-box;
}

.wrap.onlink.payment_completed > section::before {
    padding: 0;
    margin: 0;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 360px;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 440 387" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><rect x="0" y="0" height="100%" width="100%" fill="url(%23grad)" opacity="1"/><defs><radialGradient id="grad" gradientUnits="userSpaceOnUse" cx="0" cy="0" r="10" gradientTransform="matrix(-44 -38.7 44 -42.63 440 387)"><stop stop-color="rgba(234,85,6,1)" offset="0"/><stop stop-color="rgba(210,97,29,1)" offset="0.125"/><stop stop-color="rgba(185,110,52,1)" offset="0.25"/><stop stop-color="rgba(161,122,74,1)" offset="0.375"/><stop stop-color="rgba(136,134,97,1)" offset="0.5"/><stop stop-color="rgba(87,159,143,1)" offset="0.75"/><stop stop-color="rgba(63,171,165,1)" offset="0.875"/><stop stop-color="rgba(38,183,188,1)" offset="1"/></radialGradient></defs></svg>');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.wrap.onlink.payment_completed > section > .payment_completed {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 50px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
    max-width: 360px;
    position: relative;
}

.wrap.onlink.payment_completed > section > .payment_completed > hgroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    width: 100%;
}

.wrap.onlink.payment_completed > section > .payment_completed > hgroup > i.icon_check {
    width: 80px;
    height: 80px;
    background-image: url('../img/icon_check_completed.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    flex-shrink: 0;
}

.wrap.onlink.payment_completed > section > .payment_completed > hgroup > h2 {
    font-family: 'Paperlogy', sans-serif;
    font-weight: 700;
    font-size: 38px;
    line-height: normal;
    color: #2e323b;
    letter-spacing: -1.9px;
    margin: 0;
    text-align: center;
}

.wrap.onlink.payment_completed > section > .payment_completed > .spec {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    width: 100%;
}

.wrap.onlink.payment_completed > section > .payment_completed > .spec + .spec {
    margin-top: -45px;
}
.wrap.onlink.payment_completed > section > .payment_completed > .spec:first-of-type {
    margin-bottom: 15px;
}

.wrap.onlink.payment_completed > section > .payment_completed > .spec:first-of-type::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #ddd;
    margin-top: 15px;
    margin-bottom: 0;
}

.wrap.onlink.payment_completed > section > .payment_completed > .spec > p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    color: #111;
    letter-spacing: -0.7px;
}

.wrap.onlink.payment_completed > section > .payment_completed > .spec > p > b {
    font-weight: 400;
    color: #111;
    flex-shrink: 0;
}

.wrap.onlink.payment_completed > section > .payment_completed > .spec > p > span {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #111;
    letter-spacing: -0.8px;
    text-align: right;
    flex: 1;
    min-width: 0;
}

.wrap.onlink.payment_completed > section > .payment_completed > .spec > p > span > b {
    font-weight: 700;
}

.wrap.onlink.payment_completed > section > .footer_btns {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto !important;
    max-width: 440px;
    background: transparent;
    box-shadow: none;
    padding: 20px;
    z-index: 10;
    font-size: 0;
    border-radius: 20px 20px 0 0;
}

.wrap.onlink.payment_completed > section > .footer_btns > button {
    display: block;
    width: 100%;
    height: 48px;
    padding: 15px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    letter-spacing: -0.8px;
    box-sizing: border-box;
    background-color: #26b7bc;
    color: #fff;
    margin: 0;
}

.wrap.onlink.payment > footer {
    padding: 20px 0 0px 0;
    text-align: center;
    margin-top: 0px;
}

.wrap.onlink.payment > footer > p {
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #999;
    letter-spacing: -0.65px;
    margin: 0;
}


section.payments > .tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background-color: #eee;
    border-radius: 30px;
    margin: 0px 15px;
}

section.payments > .tabs > a {
    flex: 1 1 0%;
    min-width: 0;
    height: 42px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    color: #bbb;
    letter-spacing: -0.75px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
    cursor: pointer;
}

section.payments > .tabs > a.on {
    background-color: #2e323b;
    color: #fff;
}

section.payments > .payment_lists {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
    border-top: 1px solid #ddd;
}

section.payments > .payment_lists > li {
    border-bottom: 1px solid #ddd;
    padding: 15px 10px;
    display: block;
    position: relative;
    width: 100%;
}

section.payments > .payment_lists > li > h4 {
    display: block;
    margin: 0;
    padding-right: 70px;
}

section.payments > .payment_lists > li > h4 > span {
    display:block;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #999;
    letter-spacing: -0.6px;
}

section.payments > .payment_lists > li > h4 > b {
    display:block;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.9px;
    white-space: nowrap;
}

section.payments > .payment_lists > li > h6 {
    display: block;
    font-size:15px;
    margin-top:10px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.9px;
}

section.payments > .payment_lists > li > span {
    display:block;
    font-size:13px;
    margin-top:0px;
    line-height: 20px;
}

section.payments > .payment_lists > li > p {
    display:block;
    font-size:13px;
    margin-top:8px;
    line-height: 24px;
    position:relative;
}

section.payments > .payment_lists > li > p > em {
    position:absolute;
    bottom:0px;
    right:0px;
    font-weight: 400;
    font-size: 13px;
    line-height: 30px;
    height: 24px;
    color: #999;
    letter-spacing: -0.7px;
    display: block;
}

section.payments > .payment_lists > li > p > span {
    display: inline-block;
    vertical-align:bottom;
    margin-right: 0;
    font-weight: 400;
    font-size: 13px;
    line-height: 30px;
    height:24px;
    color: #111;
    letter-spacing: -0.65px;
}

section.payments > .payment_lists > li > p > span > b {
    display:inline-block;
    vertical-align:top;
    font-weight: 700;
    font-size: 21px;
    line-height: 24px;
    color: #111;
    letter-spacing: -1.05px;
}

section.payments > .payment_lists > li > p > span.refund {
    display: inline-block;
    vertical-align:bottom;
    margin-left: 10px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 30px;
    height: 24px;
    color: #ec161d;
    letter-spacing: -0.65px;
    white-space: nowrap;
}

section.payments > .payment_lists > li > p > span.partial {
    display: inline-block;
    vertical-align:bottom;
    margin-left: 10px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 30px;
    height: 24px;
    color: #ea5506;
    letter-spacing: -0.65px;
    white-space: nowrap;
}

/* 결제취소 항목의 금액에 취소선 추가 - JavaScript로 li에 cancel 클래스 추가 필요 */
section.payments > .payment_lists > li.cancel > p > span {
    text-decoration: line-through;
    color: #999;
}

section.payments > .payment_lists > li.cancel > p > span > b {
    text-decoration: line-through;
    color: #999;
}

section.payments > .payment_lists > li > i {
    position: absolute;
    top: 20px;
    right: 10px;
    width: 60px;
    height: 28px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: normal;
    color: #fff;
    letter-spacing: -0.5px;
    text-align: center;
    z-index: 1;
    font-style: normal;
}

section.payments > .payment_lists > li > i.pending::before {
    content: '결제대기';
    background-color: #999;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

section.payments > .payment_lists > li > i.cancel::before {
    content: '결제취소';
    background-color: #333;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

section.payments > .payment_lists > li > i.paid::before {
    content: '결제완료';
    background-color: #26b7bc;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

section.payments > .payment_lists > li > i.refund::before {
    content: '전액환불';
    background-color: #ec161d;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

section.payments > .payment_lists > li > i.partial::before {
    content: '부분환불';
    background-color: #ea5506;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

.btsheet > section > .invoice {
    margin-bottom: 10px;
    padding: 20px;
    background-color: #eee;
}

.btsheet > section > .invoice > .tit {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
    position:relative;
}

.btsheet > section > .invoice > .tit > h4 {
    display: block;
    margin: 0;
    padding-right: 70px;
}

.btsheet > section > .invoice > .tit > h4 > span {
    display:block;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #999;
    letter-spacing: -0.6px;
}

.btsheet > section > .invoice > .tit > h4 > b {
    display:block;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.9px;
    white-space: nowrap;
}

.btsheet > section > .invoice > .tit > h6 {
    display: block;
    font-size:15px;
    margin-top:15px;
    line-height: 24px;
    color: #111;
    letter-spacing: -0.9px;
}

.btsheet > section > .invoice > .tit > p {
    display:block;
    font-size:13px;
    margin-top:8px;
    line-height: 24px;
    position:absolute;
    bottom:15px;right:0px;
}

.btsheet > section > .invoice > .tit > p > span {
    display: inline-block;
    vertical-align:bottom;
    margin-right: 0;
    font-weight: 400;
    font-size: 13px;
    line-height: 30px;
    height:24px;
    color: #111;
    letter-spacing: -0.65px;
}

.btsheet > section > .invoice > .tit > p > span > b {
    display:inline-block;
    vertical-align:top;
    font-weight: 700;
    font-size: 21px;
    line-height: 24px;
    color: #111;
    letter-spacing: -1.05px;
}

.btsheet > section > .invoice > .tit > i {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 60px;
    height: 28px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: normal;
    color: #fff;
    letter-spacing: -0.5px;
    text-align: center;
    z-index: 1;
    font-style: normal;
}

.btsheet > section > .invoice > .tit > i.pending::before {
    content: '결제대기';
    background-color: #999;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

.btsheet > section > .invoice > .tit > i.cancel::before {
    content: '결제취소';
    background-color: #333;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

.btsheet > section > .invoice > .tit > i.paid::before {
    content: '결제완료';
    background-color: #26b7bc;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

.btsheet > section > .invoice > .tit > i.refund::before {
    content: '전액환불';
    background-color: #ec161d;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

.btsheet > section > .invoice > .tit > i.partial::before {
    content: '부분환불';
    background-color: #ea5506;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    line-height: 28px;
}

.btsheet > section > .paid {
    margin-bottom: 10px;
    padding: 20px;
    background-color: #eee;
}

.btsheet > section > .paid > .tit,
.btsheet > section > .refund > .tit {
    margin-bottom: 10px;
    position:relative;
}

.btsheet > section > .paid > .tit > h5,
.btsheet > section > .refund > .tit > h5 {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #111;
    letter-spacing: -0.8px;
    margin: 0;
    margin-bottom: 8px;
}

.btsheet > section .spec {
    display: block;
    font-size:0px;
}

.btsheet > section .spec > p {
    display: block;
    margin: 0;
    margin-top:2px;
    font-weight: 400;
    font-size: 0px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.7px;
}

.btsheet > section .spec > p > b {
    display:inline-block;
    text-align:left;
    vertical-align:bottom;
    width:100px;
    font-size: 14px;
    line-height:20px;
    font-weight: 400;
    color: #999;
    flex-shrink: 0;
}

.btsheet > section .spec > p > span {
    display:inline-block;
    vertical-align:bottom;
    font-weight: 400;
    font-size: 14px;
    color: #111;
    width:calc( 100% - 100px );
    text-align: right;
    flex: 1;
}

.btsheet > section .spec > p > span > b {
    font-weight: 700;
}

.btsheet > section > .refund {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #eee;
}

.btsheet > section > .policy {
    margin-bottom: 0px;
    padding: 0px;
}


.btsheet > section > .policy > h2 {
    display:block;
    position:relative;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #111;
    letter-spacing: -0.8px;
    margin: 0;
    margin-bottom: 8px;
    align-items: center;
}

.btsheet > section > .policy > h2 > a { display: block;position: absolute; top:0px;right:0px;width:auto;height:24px;line-height:24px;font-size:13px;text-align: left;padding-right:20px;font-weight:400; text-decoration:underline;color:var(--color-bk9); }
.btsheet > section > .policy > h2 > a::before { content: '\e93f';font-family: 'xeicon' !important;font-size:20px;color:var(--color-bk9);display:block; position:absolute; right:0px; top:0px; height:24px;line-height:24px;text-align:center;}

.btsheet > section > .policy label { position:relative; display:block;margin-right:0px; padding:0px 0px;padding-left:22px; height:22px; color:var(--color-bk9); text-align:left; line-height:22px; vertical-align:bottom; cursor:pointer; overflow :visible; font-size:0px;}
.btsheet > section > .policy label > input[type=checkbox] { display:none; }
.btsheet > section > .policy label > input[type=checkbox] + span  { display:inline-block;line-height:22px;vertical-align:bottom;font-size:15px;margin-left:7px; }
.btsheet > section > .policy label > input[type=checkbox] + span:before { background: var(--color-whf);position:absolute; top:0px; left:0px; width:22px;height:22px;border-radius: 50%; background:var(--color-gre); content: '';border:0px; font-size:20px;font-weight: 400; text-align:center;line-height:22px;font-family: 'xeicon' !important; color:var(--color-whf); content: "\e928"; }
.btsheet > section > .policy label > input[type=checkbox]:checked + span  { color:var(--color-bk1); -webkit-tap-highlight-color:transparent;font-weight: 600; }
.btsheet > section > .policy label > input[type=checkbox]:checked + span:before {  background: var(--color-whf); font-size:20px;text-align:center;line-height:22px; font-family: 'xeicon' !important; display: inline-block; background:var(--color-sub);color:var(--color-whf); content: "\e928"; }


.flat_jn_warp > .spec {
    display: block;
    font-size:0px;
    margin: 0 auto;
    width:230px;
}

.flat_jn_warp > .spec > p {
    display: block;
    margin: 0;
    margin-top:2px;
    font-weight: 400;
    font-size: 0px;
    line-height: 20px;
    color: #111;
    letter-spacing: -0.7px;
}

.flat_jn_warp > .spec > p > b {
    display:inline-block;
    text-align:left;
    vertical-align:bottom;
    width:100px;
    font-size: 14px;
    line-height:20px;
    font-weight: 400;
    color: #999;
    flex-shrink: 0;
}

.flat_jn_warp > .spec > p > span {
    display:inline-block;
    vertical-align:bottom;
    font-weight: 400;
    font-size: 14px;
    color: #111;
    width:calc( 100% - 100px );
    text-align: right;
    flex: 1;
}

.flat_jn_warp > .spec > p > span > b {
    font-weight: 700;
}