/* 전역 변수 */
:root {--media-tablet: 960px; --media-mobile: 600px; --scroll-thumb-color: #999; --main-color: #0d62ff; --sub-color: #AFDDFF; --gray-color: #DBDBDB; --alret-color: #f8d7da; --alret-txt-color: #fc1a2d; --fff: #fff; --btn-txt-color: #fff; --txt-color: #333; --curvature: 5px; --bsh: 0 0 10px #00000020; } 

/* 라이트 모드 */
:root[color-theme='light'] {--color: #333; --surface-default: #fff; --mode-btn-default: #FFFFFF; --btn-svg-hover: #FFA500; } 

/* 다크 모드 */
:root[color-theme='dark'] {--color: #fff; --surface-default: #17171C; --mode-btn-default: #23232B; --btn-svg-hover: gold; } 

/* */

body {color: var(--color); transition: .3s; background: var(--surface-default); } 
/* body { height: 150vh; } */
.bx { box-shadow: var(--bsh); height: fit-content; padding: 24px; border-radius: var(--curvature); background: #fff; display: flex; width: fit-content; } 
.ds_bbx { align-content: flex-start; padding: 20px; display: flex; gap: 20px; flex-wrap: wrap; } 

/*  */
/*  */
/*  */

/* icon start */
.icon { width: 16px; height: 16px; } 
.icon.arrow.left { transform: rotate(180deg); } 
.icon.arrow.top { transform: rotate(-90deg); } 
.icon.arrow.bottom { transform: rotate(90deg); } 
.icon img { width: 100%; height: 100%; object-fit: contain; object-position: center; } 
/* icon end */

/* btn start */
.btn_bbx { display: flex; gap: 10px; flex-wrap: wrap; } 
button,
.btn {height: 40px; justify-content: center; background: var(--main-color); border: 2px solid var(--main-color); width: fit-content; user-select: none; cursor: pointer; transition: .2s; display: flex; align-items: center; padding: 10px 12px; border-radius: var(--curvature); gap: 8px; } 
button:hover,
.btn:hover { filter: contrast(120%); } 
button,
.btn,
.btn .txt {white-space: nowrap; font-size: 16px; font-weight: 500; color: var(--btn-txt-color); } 
.btn.min {height: 34px; padding: 8px 10px; gap: 6px; } 
.btn.min .txt { font-size: 14px; font-weight: 400; } 
.btn.min .icon { width: 14px; height: 14px; } 
.btn.big { padding: 12px 14px; gap: 10px; } 
.btn.big .txt { font-size: 18px; } 
.btn.big .icon { width: 18px; height: 18px; } 
.btn.line { background: var(--fff); } 
.btn.line:hover{filter: contrast(0.9);}
.btn.line .txt { color: var(--txt-color); } 
.btn.tp { background: transparent; border: 2px solid transparent; } 
.btn.tp:hover{filter: contrast(0.5);}
.btn.tp .txt { color: var(--txt-color); } 
.btn.disable {background: var(--gray-color); border: 2px solid var(--gray-color); color: var(--btn-txt-color-reverse); pointer-events: none; } 
.btn.disable .icon{filter: grayscale(1);}

.btn.alert { background: var(--alret-color); border: 2px solid var(--alret-color); } 
.btn.alert .txt { color: var(--alret-txt-color); } 
/* btn end */

/* drop start */
.drop_bbx { display: flex; flex-wrap: wrap; gap: 10px; height: fit-content; } 
.drop_bx { position: relative; user-select: none; } 
.drop_bx .tit_bx { border: 2px solid #eee; justify-content: space-between; min-width: 200px; display: flex; align-items: center; gap: 20px; background: #fff; padding: 10px; border-radius: var(--curvature); } 
.drop_bx.on .tit_bx { border: 2px solid var(--sub-color); box-shadow: var(--bsh); } 
.drop_bx .arrow { transition: .3s; } 
.drop_bx.on .arrow { transform: rotate(-90deg); } 
.drop_bx .tit_bx .tit { display: flex; align-items: center; gap: 6px; } 
.drop_bx .tit_bx .tit .txt { font-size: 16px; } 
.drop_bx .drop_menu_bx { box-shadow: var(--bsh); display: none; padding: 5px 0; border-radius: var(--curvature); overflow: hidden; width: 100%; position: absolute; top: calc(100% + 5px); flex-direction: column; background: #fff; } 
.drop_bx.on .drop_menu_bx { display: flex; } 
.drop_bx .drop_menu_bx .menu { padding: 10px 11px; display: flex; align-items: center; gap: 6px; } 
.drop_bx .drop_menu_bx .menu:hover { background: #eee; } 
.drop_bx .drop_menu_bx .menu .icon { width: 14px; height: 14px; } 
.drop_bx .drop_menu_bx .menu .txt { font-size: 14px; } 
/* drop end */

/* toast start */
.toast_bbx { pointer-events: none; user-select: none; z-index: 99999; position: absolute; width: 100%; display: flex; justify-content: center; } 
.toast_bbx .toast_bx { opacity: 0; position: fixed; bottom: 20px; transition: .3s ease-in-out; } 
.toast_bbx.on .toast_bx { bottom: 50px; opacity: 1; } 
.toast_bbx .toast { border-radius: var(--curvature); display: flex; align-items: center; gap: 10px; padding: 10px; background: #fff; border: 2px solid var(--sub-color); } 
.toast_bbx .toast .icon { width: 14px; height: 14px; } 
.toast_bbx .toast .txt { font-size: 14px; font-weight: 500; } 
/* toast end */

/* toggle start */
.toggle_bbx { display: flex; flex-wrap: wrap; gap: 10px; } 
.toggle_bbx .toggle_bx { overflow: hidden;position: relative;} 
.toggle_bbx .toggle_bx input{cursor: pointer; opacity: 0; position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.toggle_bbx .toggle { border-radius: 100px; background: var(--main-color); width: 34px; height: 20px; position: relative; } 
.toggle_bbx .toggle .cir { transition: .1s ease-in-out; left: 3px; top: 3px; position: relative; height: calc(100% - 6px); aspect-ratio: 1/1; background: #fff; border-radius: 50%; } 
.toggle_bbx .toggle_bx:has(input:checked) .cir { left: 17px; } 
/* toggle end */

/* check_bx start */
.check_bbx { display: flex; gap: 10px; } 
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--main-color); margin: 0; padding: 0; } 
/* check_bx end */

/* radio start */
.radio_bbx { display: flex; gap: 10px; } 
input[type='radio'] { margin: 0; padding: 0; flex-shrink:0; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 16px; height: 16px; border: 1px solid #767676; border-radius: 50%; outline: none; cursor: pointer; } 
input[type='radio']:hover { border: 1px solid #444; } 
input[type='radio']:checked { background-color: var(--main-color); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--main-color); } 
/* radio end */

/* dark-light btn start */
.dark_light_bbx { z-index: 999; position: fixed; right: 20px; bottom: 20px; } 
.dark_light_bbx .dark-light-toggle { box-shadow: var(--bsh); display: flex; justify-content: center; align-items: center; position: relative; width: 56px; height: 56px; background-color: var(--mode-btn-default); border: none; border-radius: 10px; overflow: hidden; cursor: pointer; transition: background-color 0.5s; } 
.dark_light_bbx .icon30 { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; position: absolute; } 
.dark_light_bbx .icon30>svg { transition: fill 0.5s, transform 0.5s ease; } 
.dark_light_bbx .sun { animation: rise-animation 1s forwards; transform-origin: 50% 200% } 
.dark_light_bbx .moon { animation: set-animation 1s forwards; transform-origin: 50% 200%; } 
[color-theme='dark'] .dark-light-toggle .sun { animation: set-animation 1s forwards; } 
[color-theme='dark'] .dark-light-toggle .moon { animation: rise-animation 1s forwards; } 
.dark_light_bbx .dark-light-toggle:hover svg { fill: var(--btn-svg-hover); transform: scale(1.2); } 
@keyframes rise-animation { 
 from { transform: rotate(180deg); } 
 to { transform: rotate(360deg); } 
 } 
@keyframes set-animation { 
 from { transform: rotate(0deg); } 
 to { transform: rotate(180deg); } 
 } 
/* dark-light btn end */

/* modal start */
.modal_bbx { opacity: 0; pointer-events: none; transition: .3s; display: flex; align-items: center; justify-content: center; z-index: 99999; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; } 
.modal_bbx.on { opacity: 1; pointer-events: all; } 
body:has(.modal_bbx.on) { overflow: hidden; } 
.modal_bbx .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #00000033; } 
.modal_bbx .modal_bx { position: relative; padding: 20px; width: 300px; max-width: calc(100% - 32px); height: fit-content; box-shadow: var(--bsh); background: #fff; border-radius: var(--curvature); position: relative; z-index: 1; } 
.modal_bbx .tbx { display: flex; flex-direction: column; gap: 10px; } 
.modal_bbx .tit { font-size: 24px; font-weight: 600; line-height: 1.4; } 
.modal_bbx .desc { font-size: 15px; font-weight: 500; line-height: 1.4; } 
.modal_bbx .btn_bbx { margin-top: 24px; flex-wrap: nowrap; } 
.modal_bbx .btn_bbx .btn { width: 100%; } 
.modal_bbx .modal_bx .x_btn { cursor: pointer; display: flex; align-items: center; justify-content: center; width: 24px; aspect-ratio: 1/1; position: absolute; right: 7px; top: 7px; } 
.modal_bbx .modal_bx .x_btn span { background: #333; transform: rotate(45deg); position: absolute; width: 2px; height: 16px; border-radius: 10px; } 
.modal_bbx .modal_bx .x_btn span:last-child { transform: rotate(-45deg); } 
/* modal end */

/* input start */
textarea,
input[type="tel"],
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"] {color: var(--txt-color); line-height: 1.4; width: 100%; border: none; font-size: 16px;font-family: "Pretendard"; height: 100%; padding-block: 0; padding-inline: 0; padding: 10px;} 
textarea::-webkit-scrollbar { width: 4px;height:0;} 
textarea::-webkit-scrollbar-thumb {border-radius: 20px; background-color: var(--scroll-thumb-color);} 
textarea::-webkit-scrollbar-track { background-color: transparent;} 
textarea,
input:focus{outline: none;}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus {outline: none;}
input::placeholder {color: var(--txt-color); font-size: 16px;font-family: "Pretendard";} 
textarea,
.input_bx{height: 40px; border: 2px solid #eee; transition: .2s; width: 100%; position: relative; overflow: hidden; display: flex;align-items: center;border-radius: var(--curvature);}
textarea{resize: none;height: 100px;overflow-y: auto;}
.input_bx .eye_bx{padding: 10px;padding-left: 0; right: 0;cursor: pointer;}
.input_bx .eye_bx img:last-child{display: none;}
textarea:focus,
.input_bx:has(input:focus) {border: 2px solid var(--sub-color);}
.input_bx .icon{flex-shrink: 0;}
.input_bx .search_icon{width: 20px;height: 20px;margin: 10px 0 10px 10px;}

.input_bbx{display: flex;flex-direction: column;gap: 5px;width: 100%;}
.input_bbx .alert_txt{display: none; font-size: 12px;color:var(--alret-txt-color);}
.input_bbx.alert .alert_txt{display: flex;}
.input_bbx .alert_txt::before{content: '*';margin-right: 3px;top: 1px;position: relative;}
/* input end */

/* search_bbx start */
.search_bbx{display: flex;align-items: center;gap: 10px;}
.search_bbx .input_bx{width: 200px;flex-shrink: 0;}
.search_bbx input{}
/* search_bbx end */

/* form start */
.form_bbx{padding: 20px; width: 100%;background: #fff;border-radius: var(--curvature);display: flex;flex-direction: column;gap: 10px;}
.form_bbx .btn{width: 100%;}
/* form end */

/* comment_bbx start */
.comment_bbx{display: none;flex-direction: column; gap: 20px; margin-top: 10px; padding: 20px; width: 100%;background: #fff;border-radius: var(--curvature);}
.comment_bbx:has(.comment_bx){display: flex;}
.comment_bbx .comment_bx{display: flex;gap: 8px;flex-direction: column;}
.comment_bbx .user_info{display: flex;align-items: center;gap: 10px;}
.comment_bbx .user_info .icon{width: 24px; height: 24px;}
.comment_bbx .comment_bx .date,
.comment_bbx .user_info .txt{font-size: 14px;font-weight: 500;color: #333;}
.comment_bbx .content{color: #333; line-height: 1.4; word-break: break-all; font-size: 14px; padding: 10px;border: 1px solid #eee;border-radius: var(--curvature);}

.comment_bbx .comment_bx .btn_bbx{flex-wrap: nowrap;justify-content: end;}
.comment_bbx .comment_bx .btn_bbx .input_bbx{width: 200px;}
.comment_bbx .comment_bx .x_btn{cursor: pointer; width: 14px;height: 14px;position: relative;}
.comment_bbx .comment_bx .x_btn span{border-radius: var(--curvature); width: 2px;height: 14px;background: var(--txt-color);position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(45deg);}
.comment_bbx .comment_bx .x_btn span:last-child{transform: translate(-50%,-50%) rotate(-45deg);}
/* comment_bbx end */

/* txtarea_bbx start */
.txtarea_bbx {display: flex;flex-direction: column;gap: 5px;}
.txtarea_bbx .info_bx{display: flex;align-items: center;justify-content: space-between;}
.txtarea_bbx .info_bx .txt_num{color: var(--txt-color); display: flex;align-items: center;font-size: 12px;font-weight: 500;}
.txtarea_bbx .info_bx .txt_num.red{color: var(--alret-txt-color);}
/* txtarea_bbx end */

/* tbx start */
.tbx { color: var(--txt-color); } 
/* tbx end */

/* public start */
.fbx{gap: 10px; width: 100%;display: flex;}
.fdc{flex-direction: column;}
.jcsb{justify-content: space-between;}
.aic{align-items: center;}
.w100p{width: 100%;}
/* public end */









/* 
@media (max-width: var(--media-tablet)){

};

@media (max-width: var(--media-mobile)){

} */