/******************************************
   name :  dcm_web.css
   auth :  Dconnect
   date :  2026.01.04
   desc :  DCM WEB
*******************************************/

/*
main, inner,  wrap, area, list , info , box
*/

/*------------------------------- NotoSansKR -------------------------------------*/


.disp_main{
    width:100%;height:100%;
    background:#fcfcfc;
    background-image:linear-gradient(#f5f5f5 1px, transparent 1px), linear-gradient(90deg,#f5f5f5 1px, transparent 1px); background-size: 40px 40px;
}

.disp_main .editor_wrap{
    position:relative;
    width:calc(100% - 400px); height:100%; overflow:hidden;
}
.disp_main .editor_wrap.view_mode{width:100% !important;}

.disp_main .editor_wrap .btn_home{position:absolute; display:flex; align-items:center; z-index:15; padding:5px 15px; border-radius:15px; box-shadow:0px 0px 3px #aaaaaa; font-size:12px; font-weight:700; background:#ffffff; cursor:pointer; }
.disp_main .editor_wrap .btn_home:hover{background:#000000;color:#ffffff;}
.disp_main .editor_wrap .btn_home:hover img{filter:brightness(0) invert(1);}

/*
.disp_main .editor_wrap .btn_home button{border:0; border-radius:8px; background:#ffffff; box-shadow:0px 0px 3px #aaaaaa; transition-duration:0.2s; font-size:13px; cursor:pointer;}
*/

.disp_main .editor_wrap .btn_info01{position:absolute; display:flex; align-items:center; z-index:15; }
.disp_main .editor_wrap .btn_info01 button{width:42px; height:42px; border:0; border-radius:8px; background:#ffffff; padding:3px 0 0 0; box-shadow:0px 0px 3px #aaaaaa; transition-duration:0.2s; cursor:pointer; font-size:12px;}
.disp_main .editor_wrap .btn_info01 button.black{background:#000000;}
.disp_main .editor_wrap .btn_info01 > .text {
    font-size:11px; margin-left:10px; color:#ffffff; background:#000000; padding:2px 9px; border-radius:4px; transition-duration:0.2s; display:none;
}
.disp_main .editor_wrap .btn_info01:hover > .text{display:initial;}
.disp_main .editor_wrap .btn_info01:hover button img{ transform: scale(1.03, 1.03);}

.disp_main .editor_wrap .btn_info02{position:absolute; display:flex; align-items:center; z-index:15; }
.disp_main .editor_wrap .btn_info02 button{width:30px; height:30px; border:0; border-radius:6px; background:#ffffff; padding:3px 0 0 0; box-shadow:0px 0px 3px #aaaaaa; transition-duration:0.2s; font-size:10px; cursor:pointer;}

.disp_main .editor_wrap .btn_info03{ position:absolute; font-size:11px; color:#777777; background:#ffffff; border-radius:20px; border:1px solid #f0f0f0; text-align:center; padding:1px 17px; z-index:12; }
.disp_main .editor_wrap .btn_info04{ position:absolute; display:flex; align-items:center; font-size:13px; background:#ffffff; border-radius:20px; border:1px solid #f0f0f0; text-align:center; padding:7px 20px; cursor:pointer; z-index:12; }
.disp_main .editor_wrap .btn_info04 img{margin-right:5px;}

.disp_main .editor_wrap .opt_height{position:absolute; z-index:12000; background:#ffffff; width:350px; bottom:-140px; left:50%; transform:translate(-50%, 0); padding:10px 20px; transition-duration:0.2s;}
.disp_main .editor_wrap .opt_height .top_area{ display:flex; align-items:center; justify-content:space-between; padding-bottom:5px;}
.disp_main .editor_wrap .opt_height .title{font-size:14px; color:#000000;font-weight:600;text-align:left; }
.disp_main .editor_wrap .opt_height .close { width:10px; cursor:pointer; }
.disp_main .editor_wrap .opt_height .close img{ width:100%; }

.disp_main .editor_wrap .editor{position:absolute;z-index:10; margin:0; padding:0; box-sizing:border-box; width:100%; height:100%; overflow:hidden;}

.aside_main{ position:fixed; top:0; right:0; width:400px;height:100%; background:#ffffff; z-index:100;}

.mnu_wrap{ display:flex; align-items:center; justify-content:space-around; width:100%; height:80px; }
.mnu_wrap .btn_mnu{ width:95px; font-size:11px; font-weight:700; text-align:center; opacity:0.5; cursor:pointer;}
.mnu_wrap .btn_mnu .thumb{width:30px;height:30px; background:rgb(243,244,246); border-radius:5px; margin:auto; line-height:42px; font-weight:400;}
.mnu_wrap .btn_mnu p{ line-height:13px; padding-top:7px;}
.mnu_wrap .btn_mnu:hover{ opacity:0.7;}
.mnu_wrap .btn_mnu.active{opacity:1;}

/*
background-image:linear-gradient(rgb(0, 0, 0) 1px, transparent 1px), linear-gradient(90deg, rgb(0, 0, 0) 1px, transparent 1px); background-size: 40px 40px;
*/

.cts_wrap{ position:relative; border-top:1px solid #e5e7eb; overflow-y:auto; flex: 1 1 0%; height:calc(100vh - 200px);}

.cts_wrap::-webkit-scrollbar { width:5px; }
.cts_wrap::-webkit-scrollbar-thumb { background-color: #e5e7eb; border-radius:20px; }
.cts_wrap::-webkit-scrollbar-track { }

.cts_wrap .cts_area{ position:absolute; left:0; top:10px; padding:20px 20px; transition:top 0.4s; width:100%;}


.cts_wrap .main_title{font-size:15px; padding-bottom:15px; color:#000000;font-weight:600; }
.cts_wrap .main_title .sub_name{padding-left:5px; font-size:12px; font-weight:400; color:#9CA3AF !important;}
.cts_wrap .sub_title{font-size:13px; padding-bottom:5px; color:#000000; font-weight:600; }
.cts_wrap .sub_title .sub_name{padding-left:5px; font-size:12px; font-weight:400; color:#9CA3AF !important;}

.cts_wrap .cts_list{ display:flex; flex-wrap:wrap; justify-content:space-between; }

.cts_wrap .cts_list .cts_box_01{
    position:relative; width:170px; height:170px; margin-bottom:10px; border-radius:10px; border:1px solid #E5E7EB; cursor:pointer;
}

.cts_wrap .cts_list .cts_box_01 .thumb{ display:flex; align-items:center; justify-content:center; width:155px; height:130px; margin:auto;}
.cts_wrap .cts_list .cts_box_01 .thumb img{ object-fit:contain; max-width:100%; max-height:100%; transition-duration:0.2s;}
.cts_wrap .cts_list .cts_box_01 .info{ text-align:center;font-size:13px; line-height:15px;}
.cts_wrap .cts_list .cts_box_01 .info .desc{ text-align:center; font-size:11px; color:#888888; line-height:15px;}
.cts_wrap .cts_list .cts_box_01.active{ border:2px solid #111111; }
.cts_wrap .cts_list .cts_box_01:hover .thumb img{ transform:scale(1.05, 1.05); }

.cts_wrap .cts_list .cts_box_01 .info_alert{
    position:absolute; align-items:center; justify-content:center; text-align:center; width:100%; height:100%; color:#CC3D3D; font-weight:500; font-size:12px; 
    /* text-shadow:-1px -1px 0 #ffffff, 1px -1px 0 #ffffff,-1px  1px 0 #ffffff, 1px  1px 0 #ffffff; */ 
    background:#AAAAAA11; border-radius:10px; display:none; z-index:1;
}

/* opacity:0.1; */
.cts_wrap .cts_list .cts_box_01.disabled{ border:1px solid #fafafa; }
.cts_wrap .cts_list .cts_box_01.disabled .thumb{ opacity:0.2; }
.cts_wrap .cts_list .cts_box_01.disabled .info{ opacity:0.2; }
.cts_wrap .cts_list .cts_box_01.disabled .info_alert{ display:flex; }

.cts_wrap .cts_list .cts_box_02{ margin-bottom:10px; width:170px; height:200px; border-radius: 10px; border:1px solid #E5E7EB; cursor:pointer;}
.cts_wrap .cts_list .cts_box_02 .thumb{ display:flex; align-items:center; justify-content:center; width:155px;height:145px;margin:auto;}
.cts_wrap .cts_list .cts_box_02 .thumb img{object-fit:contain; max-width:100%; max-height:100%; transition-duration:0.2s;}
.cts_wrap .cts_list .cts_box_02 .info{text-align:center;font-size:13px; line-height:15px;}
.cts_wrap .cts_list .cts_box_02 .info .desc{text-align:center;font-size:11px;color:#888888; line-height:15px;}
.cts_wrap .cts_list .cts_box_02.active{ border:2px solid #111111; }
.cts_wrap .cts_list .cts_box_02:hover .thumb img{ transform: scale(1.05, 1.05); }

.cts_wrap .cts_list .cts_box_03{ display:flex; align-items:center; justify-content:start; margin-bottom:10px; width:100%; height:95px; border-radius:10px; border:1px solid #E5E7EB; padding:0 10px; cursor:pointer;}
.cts_wrap .cts_list .cts_box_03 .thumb{ display:flex; align-items:center; justify-content:center; width:88px; height:88px;}
.cts_wrap .cts_list .cts_box_03 .thumb img{object-fit:contain; max-width:100%; max-height:100%; transition-duration:0.2s;}
.cts_wrap .cts_list .cts_box_03 .info{ margin-left:10px;}
.cts_wrap .cts_list .cts_box_03 .info > .title{font-size:14px;color:#000000; font-weight:700;}
.cts_wrap .cts_list .cts_box_03 .info > .desc{font-size:12px; color:#687280;}
.cts_wrap .cts_list .cts_box_03 .info > .load{font-size:11px; color:#2563EB; visibility:hidden;}
.cts_wrap .cts_list .cts_box_03.active{ border:2px solid #111111; }

.cts_wrap .cts_list .cts_box_03:hover .thumb img{ transform: scale(1.05, 1.05); }
.cts_wrap .cts_list .cts_box_03:hover .info > .load{font-size:11px; color:#2563EB; visibility:visible;}


.radio_info01{ display:flex; align-items:center; justify-content:space-around; width:100%; background:#F3F4F6; border-radius:8px; padding:4px 5px; }
.radio_info01 .radio_box{ border-radius:8px; width:100%; height:32px; background:#F3F4F6; border:0; cursor:pointer; }
.radio_info01 .radio_box.active{ background:#ffffff; }

.color_info01 {display:flex; flex-wrap:wrap; justify-content:start;}
.color_info01 .color_box{ width:50px; height:50px; border-radius:100%; text-align:center; border:0; margin:5px 10px 10px 10px; cursor:pointer; }
.color_info01 .color_box:hover .circle{transform: scale(1.05, 1.05); }
.color_info01 .color_box .circle{ width:42px; height:42px; border-radius:100%; margin:0 auto 0 auto; line-height:46px;transition-duration:0.2s; }
.color_info01 .color_box .circle img{ display:none;}
.color_info01 .color_box.active{border:2px solid #000000;}
.color_info01 .color_box.active .circle img{ display:inline;}
.color_info01 .color_box:hover .circle{transform: scale(1.05, 1.05); }

/* TIP */
.tip_pop{ position:absolute; left:50%; top:100px; z-index:890; display:none;}
.tip_pop .info{ position:relative; background:#ffffff; box-shadow:0px 0px 3px #aaaaaa; transform:translate(-50%, -50%); border-radius:8px; display:flex; align-items:center; justify-content:center; padding:10px 10px 10px 20px;  }
.tip_pop .info .text{ padding:5px 20px 5px 0;}
.tip_pop .info img{ width:20px; margin-right:10px;}
.tip_pop .info .btn_close{ width:10px; margin-left:10px;}

/*
text-indent
background:#f9fafa;
*/
.summary_wrap{padding:0 20px; background:#f9fafa; height:120px; }
.summary_wrap .text_box{display:flex; justify-content:space-between; padding:10px 0;}
.summary_wrap .text_box > .title{font-size:12px; color:#687280;}
.summary_wrap .text_box > .price{font-size:17px;color:#000000;font-weight:700;}
.summary_wrap .btn_cart{border:0;font-size:14px; border-radius:8px;width:100%;height:45px;color:#ffffff; font-weight:700; background:#000000; cursor:pointer; }

.tbl_confirm{ border-collapse:collapse; border-spacing:0; border:0; width:100%; margin:10px 0; }
.tbl_confirm td{ text-align:left; border-bottom:1px solid #dddddd; padding:10px 0 3px 0; }

.bar_hor{background:#E5E7EB;height:1px;width:100%;margin:20px 0;}
.bar_mnu_shadow{ box-shadow: -15px 0px 20px -10px rgb(0 0 0 / 0.25);}
.bar_space{height:1px;width:100%;margin:15px 0 0 0;}
.bar_space2{height:1px;width:100%;margin:30px 0 0 0;}


.modal_report{width:100%;height:100%;}
.modal_report .desc{font-size:14px;text-align:center;margin:0 20px; padding:0;overflow-y:auto;max-height:460px;}
.modal_report .tbl_list{width:100%;border-collapse:collapse;}
.modal_report .tbl_list thead td{font-size:14px;font-weight:700;background:#000000;color:#ffffff;text-align:center;padding:10px 0;}
.modal_report .tbl_list tbody td{font-size:13px;padding:5px 0;text-align:center;}
.modal_report .tbl_list tbody tr{border-bottom:1px solid #000000;}


/* BASKET */

.basket_main{}
.basket_main .section_title{font-family:JetBrainsMono; font-size:10px;font-weight:500; letter-spacing:.18em;text-transform:uppercase; color:#B40023; display:flex;align-items:center;gap:12px; margin-bottom:10px; }
.basket_main .section_title .tag_barv{ width:1px; height:10px;background:#e8e4db; }
.basket_main .section_title .brand_mark{ font-family:Inter; font-weight:700; letter-spacing:.16em;color:#4a4a4a;}
.basket_main .section_title .brand_mark{ font-family:Inter; font-weight:700; letter-spacing:.16em;color:#4a4a4a;}
.basket_main .top_title .main_title{ font-size:22px;font-weight:700; letter-spacing:-.02em; color:#2B2B2B;margin-bottom:8px;line-height:1.3; }
.basket_main .top_title .sub_desc{ font-size:12px; color:#7a7a7a; line-height:1.55; margin-bottom:5px; }

.basket_main .notice{
    border-radius:6px; padding:10px 14px; margin-bottom:8px; font-size:11px; line-height:1.55; display:flex; gap:10px; align-items:flex-start;
}
.basket_main .notice .tag{
    font-family:"JetBrainsMono"; font-size:9px; font-weight:600; letter-spacing:.16em;text-transform:uppercase;
    padding:3px 6px;border-radius:3px; flex-shrink:0;line-height:1.4; margin-top:1px;
}

.basket_main .notice.info{ background:#f4ecd8;color:#2B2B2B }
.basket_main .notice.info .tag{ background:rgba(43,43,43,.08);color:#2B2B2B }

.basket_main .notice.critical{ background:#2B2B2B;color:#e8dcc0; margin-bottom:20px; }
.basket_main .notice.critical .tag{ background:#B40023;color:#ffffff; }

.basket_main .form_main{margin-bottom:12px}

.basket_main .form_main .form_label{
    font-family:"JetBrainsMono"; display:block; font-size:10px;font-weight:500; letter-spacing:.14em; text-transform:uppercase;
    color:#7a7a7a; margin-bottom:1px;
}

.basket_main .form_main .form_input{
    width:100%; padding:7px 0; font:inherit;
    font-size:13px;color:#2B2B2B; background:transparent; border:0; border-bottom:1px solid #e8e4db;
    transition:border-color .2s cubic-bezier(.2,.8,.2,1); border-radius:0;
}
.basket_main .form_main .form_input::placeholder{color:#aaaaaa;font-weight:400;font-size:13px;}
.basket_main .form_main .form_input:focus{outline:none;border-bottom-color:#2B2B2B; }

.basket_main .terms_main{ display:flex;justify-content:space-between; font-size:12px; margin-bottom:5px; }

.basket_main .agree_box{position:absolute;background:#ffffff;top:0;left:0;width:100%;height:100%;border-radius:10px;padding:20px 40px;box-sizing:border-box;display:none;}
.basket_main .agree_box .close{ position:absolute; top:20px; right:20px; z-index:3; cursor:pointer;}
.basket_main .agree_box .close img { width:20px;height:20px;}

.basket_main .btns{}
.basket_main .btns .txt_err{padding:5px 0;color:#DB0000;height:25px;text-align:center;font-size:11px;}


.view_web{}
.view_mo{display:none !important;}



@media (max-width: 768px){
    .disp_main .editor_wrap{ width:100%; height:55vh; }

    .aside_main{ top:initial; right:initial; bottom:0; width:100%; min-width:350px; height:45%; border-top-left-radius:20px; border-top-right-radius:20px;}
    
    .mnu_wrap{ height:70px; }
    .cts_wrap{ height:calc(40vh - 130px); }
    .cts_wrap .cts_list{ justify-content:space-around; }

    .summary_wrap{height:95px; }
    .summary_wrap .text_box{ align-items:center; padding:7px 0;}

    .bar_mnu_shadow{ box-shadow: 0 -10px 20px -10px rgb(0 0 0 / 0.25); }
    .view_web{display:none !important; }
    .view_mo{display:initial !important; }
}

/*
@media(max-width:600px){

}
*/