@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
:root {
    --primary-navy: #223B49;
    --primary-darknavy: #1E323D;
    --primary-lightnavy: #24516B;
    --primary-orange: #F37B2C;
    --primary-darkorange: #EC6A2A;
    --primary-blue: #3A80F2;
    --primary-red: #EF4444;
    --main-font: #333333; 
    --navy-font: #223B49;  
    --bg-white: #FFFFFF;
    --white: #FFFFFF;
    --bg: #F3F5F8;
    --gray-50: #F9FAFC;
    --gray-100: #F5F5F8;
    --gray-200: #EFEFF2;
    --gray-300: #E5EAF1;   
    --gray-400: #9CA3AF;   
    --gray-500: #6B7280;   
    --orange-100: #FFF7ED;   
    --orange-200: #FFE8CC;   
    --orange-300: #FDEBE0;
    --dim-rgb: rgba(0,0,0,0.6); 
}


/* 공통 요소 */
* { box-sizing: border-box; }
*::-webkit-scrollbar { width: 8px; height: 8px;}
*::-webkit-scrollbar-track { background: transparent;}
*::-webkit-scrollbar-thumb {  background: #D1D5DB;  border-radius: 30px; border: 2px solid transparent;background-clip: padding-box;}
*::-webkit-scrollbar-thumb:hover {background: #9CA3AF;border: 2px solid transparent; background-clip: padding-box;}
html { width: 100%; height: 100%; margin: 0; padding: 0; scroll-behavior: smooth;}
body { height: 100%; margin: 0; padding: 0; font-size: 14px; line-height: 1.5; font-weight: 400; background-color: var(--bg); color: var(--main-font); font-family: 'Pretendard'; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
ul, li, dl, dd { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; color: inherit; transition: all 0.2s; cursor: pointer; }
em { color: var(--primary-orange); word-break: keep-all; font-style: normal; }
i, address, cite { font-style: normal; }
h1 { font-size: 0; line-height: 0; height: 0; overflow: hidden; text-indent: -9999px; }
h2, h3, h4, h5 { margin: 0; font-size: 18px; color: var(--main-font); }
form { margin-bottom: 0; }
button { padding: 0; border: 0; background: transparent; color: var(--main-font); font-weight: 500; font-size: 14px; line-height: 1.5; cursor: pointer; font-family: 'Pretendard'; transition: all 0.1s; }
input, textarea, select {font-family:'Pretendard'; font-size:14px; color:var(--main-font); border-radius:7px; border: 1px solid var(--gray-100); padding: 8px; background:var(--gray-100); -webkit-appearance:none; appearance:none;}
input[type="text"], input[type="password"], input[type="number"], textarea {width:100%;}
input[type="text"].price{text-align:right;}
input[type="text"][class*="rate"]{text-align:center;}
input[type="text"]:disabled, input[type="text"]:read-only {opacity:.5; pointer-events:none;}
input[type="checkbox"], input[type="radio"], input[type="file"] {position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);}
input[type="checkbox"] + span, input[type="radio"] + span{position:relative; display:flex; align-items: center; padding-left:24px; cursor:pointer; gap:3px; word-break:keep-all; color: var(--gray-500);}
input[type="checkbox"] +span::before{content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:20px; height:20px; border-radius:3px; background:url(../images/icons/icon_checkBox_outline.svg) no-repeat center/contain;}
input[type="checkbox"]:checked + span::before{background:url(../images/icons/icon_checkBox_on.svg) no-repeat center/contain;}
input[type="checkbox"]:disabled + span::before{background:url(../images/icons/icon_checkBox_disabled.svg) no-repeat center/contain;}
input[type="radio"] + span::before { content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:20px; height:20px; background:url(../images/icons/icon_radio_outline.svg) no-repeat center/contain;}
input[type="radio"]:checked + span::before {background:url(../images/icons/icon_radio_on.svg) no-repeat center/contain;}
input[type="radio"]:disabled + span::before {background:url(../images/icons/icon_radio_disabled.svg) no-repeat center/contain;}
input[type="date"]{background:var(--gray-100) url(../images/icons/icon_date.svg) no-repeat right 8px center/16px; min-height:30px;}
input[type="date"]::-webkit-calendar-picker-indicator {opacity:0; cursor:pointer;}
input[type="date"]::-webkit-date-and-time-value{text-align:left;}
input[type="range"]{-webkit-appearance:none; border:none; width:100%; height:3px; border-radius:5px; background:var(--gray-100); cursor:pointer;}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:25px; height:25px; border-radius:50%; background:var(--primary-orange); border:5px solid var(--primary-orange); cursor:pointer; transition:.3s;}
input[type="range"]::-moz-range-thumb{width:30px;height:18px;border-radius:50%;background:var(--primary-orange);cursor:pointer;}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
input:-webkit-autofill{-webkit-text-fill-color:var(--main-font);-webkit-box-shadow:0 0 0 1000px transparent inset;box-shadow:0 0 0 1000px transparent inset; transition:background-color 5000s;}
input:focus,textarea:focus,select:focus{outline:none;}
textarea { width: 100%; min-height: 100px; padding: 10px;  border-radius: 5px; background-color: var(--gray-100); resize: none;}
textarea::-webkit-scrollbar { display: none; }
select { padding: 8px 24px 8px 8px; background: var(--gray-100) url(../images/icons/icon_arrow_dropdown.svg) no-repeat center right 2px; appearance: none; cursor: pointer; }
select option { background-color: var(--bg); color: var(--main-font); }
label { display: inline-block; cursor: pointer; color: var(--main-font);}
.inner { position: relative; max-width: 600px; padding: 0 15px; margin: 0 auto; }
.hide { display: none; }
.wrapper { min-height: 100%; background-color: var(--bg); }
.wrapper .container main .inner { min-height: calc(100vh - 60px); background-color: var(--bg-white);}
img {max-width: 100%; border-radius: 2px;}
.through {opacity: 0.3; text-decoration: line-through;}
.profileBox {position: relative;}
.profileBox input {position: absolute; bottom: 0; right: -5px; width: 33px; height: 33px; text-indent: -9999px; font-size: 0; line-height: 0; clip: auto; background: #C9CED3 url(../images/icons/icon_add_photo.svg) no-repeat center; background-size: 63%; border: 3px solid var(--bg-white); border-radius: 50%; cursor: pointer;}

/* 토글 버튼 */
.switchBox label { display:flex; align-items:center; }
.switchBox .switch { width:60px; height: 30px; border-radius: 30px; position:relative; cursor:pointer; background:linear-gradient(180deg,#E5EAF1 0%,#d9dde5 100%); box-shadow:inset 0 0 0 rgba(255,255,255,.9), inset 0 -2px 4px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.08); transition:.3s;}
.switchBox .switch::before { content:""; position:absolute; top: 5px; left:5px; width: 19px; height: 19px; border-radius:50%; background:linear-gradient(180deg,#ffffff 0%,#f2f3f6 100%); box-shadow:inset 0 2px 2px rgba(255,255,255,.95), inset 0 -1px 2px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.18); transition:.3s; }
.switchBox input:checked ~ .switch { background:linear-gradient(180deg,#ff9d47 0%,#ff7f1f 55%,#f56a00 100%); }
.switchBox input:checked ~ .switch::before { transform:translateX(30px); background:linear-gradient(180deg,#ffffff 0%,#f7f7f7 100%);}
.switchBox .text { display:inline-block; white-space:nowrap; color:var(--gray-500); }
.switchBox input:checked ~ .text { color:var(--primary-orange); font-weight:700; }
.switchBox input[type="checkbox"] + span::before { display:none; }
.switchBox .switch::after { content:"OFF"; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:11px; font-weight:700; color:var(--gray-500); opacity:.7; transition:.3s; line-height: 1; }
.switchBox input:checked ~ .switch::after { content:"ON"; left:12px; right:auto; color:#fff; opacity:1; }
/* 닫기 아이콘 */
.close {background: url(../images/icons/icon_close_dark.svg) no-repeat center; background-size: 50%; width: 30px; height: 30px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}

/* 별 아이콘 */
button.star {width: 30px; height: 30px; background: url(../images/icons/icon_star_outline.svg) no-repeat center; background-size: 90%; z-index: 10; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
button.star.on {background: url(../images/icons/icon_star_on.svg) no-repeat center; background-size: 90%; }

/* 테이블 */
table { font-size: 13px; width: 100%; border-collapse: collapse; text-align: center; transition: all 0.3s ease; border-spacing: 0;}
.tableBox { overflow-x: auto;}
.tableBox table tr th { color: var(--main-font); background-color: var(--gray-50); border: 1px solid var(--gray-300); font-weight: 600; padding: 5px; word-break: keep-all; }
.tableBox table tr td { background-color: var(--bg-white); padding: 5px; border: 1px solid var(--gray-300); word-break: keep-all; color: var(--main-font); transition: background-color 0.2s ease; color: var(--gray-500);}
.tableBox table tr td a {text-decoration: underline; color: var(--primary-orange);}
.tableBox table tr td b {color: var(--main-font);}
.tableBox table tr td .necessary { color: var(--primary-orange); font-weight: 700; }
.tableBox table tr td .buttonBox { display: flex; justify-content: center; align-items: center; padding-top: 5px; }
.tableBox table tr td .buttonBox a { max-width: fit-content; text-decoration: none; padding: 4px 12px; border-radius: 5px; font-size: 13px; }
.tableBox table .title { color: var(--main-font); font-weight: 700; background-color: var(--gray-50); }
.tableBox table input { background-color: var(--gray-50); border: 1px solid var(--gray-300); padding: 8px; width: 100%; border-radius: 5px; font-size: 14px; color: #4a5568; }
.tableBox table tr td .btnDel { width: 25px; height: 25px; background: url(../images/icons/icon_close_dark.svg) no-repeat center; background-size: 50%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; cursor: pointer; transition: background 0.3s ease; } 

/* 메뉴 */ 
.header .inner .menuHome { position: absolute; top: 11px; left: 15px; width: 40px; height: 40px; top: 13px; background: url(../images/logo/ch_logo.svg) no-repeat center; background-size: 53%; z-index: 45; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.header .inner .menuDesk { display: none; }
.header .menuMain {display: none;}
.menuFixed:not(.hide).ch { display: flex; align-items: center; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; position: fixed; width: 100%; max-width: 600px; height: 60px; left: 50%; bottom: 0; transform: translateX(-50%); border: 1px solid var(--gray-300); border-bottom: 0; background: var(--white); z-index: 49;}
.menuFixed.ch ul { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;}
.menuFixed.ch ul li {width: 25%; height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center;}
.menuFixed.ch ul li a, .menuFixed.ch ul li button {display: flex; width: 100%; height: 100%; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 1px;}
.menuFixed.ch ul li div {width: 24px; height: 24px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.menuFixed.ch ul li div.home {background: url(../images/icons/navigation/icon_home.svg) no-repeat center/contain;}
.menuFixed.ch ul li .guide {background: url(../images/icons/navigation/icon_guide.svg) no-repeat center/contain;} 
.menuFixed.ch ul li .estimate {background: url(../images/icons/navigation/icon_estimate.svg) no-repeat center/contain;}
.menuFixed.ch ul li .chatting {background: url(../images/icons/navigation/icon_chatting.svg) no-repeat center/contain;} 
.menuFixed.ch ul li .setting {background: url(../images/icons/navigation/icon_setting.svg) no-repeat center/contain;}
.menuFixed.ch ul li.on .home {background: url(../images/icons/navigation/icon_home_on.svg) no-repeat center/contain;} 
.menuFixed.ch ul li.on .guide {background: url(../images/icons/navigation/icon_guide_on.svg) no-repeat center/contain;} 
.menuFixed.ch ul li.on .estimate {background: url(../images/icons/navigation/icon_estimate_on.svg) no-repeat center/contain;}
.menuFixed.ch ul li.on .chatting {background: url(../images/icons/navigation/icon_chatting_on.svg) no-repeat center/contain;} 
.menuFixed.ch ul li.on .setting {background: url(../images/icons/navigation/icon_setting_on.svg) no-repeat center/contain;}
.menuFixed.ch ul li span {font-size: 12px; color: var(--main-font);}
.menuFixed.ch ul li.on span {color: var(--primary-orange);}

/* mainTop */
.mainTop { position: relative; padding: 15px 0 0 40px; margin-bottom: 30px; }
.mainTop::after { content: ''; display: block; clear: both; height: 0; visibility: hidden; }
.mainTop .left:not(.hide) { float: left; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 35px; }
.mainTop .left h2 {font-size: 16px;}
.mainTop .left h2 em { font-size: 13px; margin-left: 3px; } 
.mainTop .right:not(.hide) { float: right; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; min-height: 35px; gap: 10px;}
.mainTop .right button { position: relative; color: var(--gray-500);}
.mainTop button:not(.hide), .mainTop a:not(.hide) { position: relative; display: block; color: var(--gray-500); width: 30px; height: 30px; font-size: 0; text-indent: -9999px; }
.mainTop button::before, .mainTop a::before { position: absolute; content: ''; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px;}
.mainTop .back {transform: rotate(90deg);} 
/* mainTop - 아이콘 */
.mainTop .custom::before { background: url(../images/icons/icon_custom.svg) no-repeat center/contain; }
.mainTop .list::before { background: url(../images/icons/icon_list.svg) no-repeat center/contain; }
.mainTop .list.open::before { width: 12px; height: 12px; background: url(../images/icons/icon_listup.svg) no-repeat center/contain; }
.mainTop .list .count { display: flex; justify-content: center; align-items: center; position: absolute; left: 10px; top: 0; font-size: 9px; background-color: var(--primary-orange); width: 16px; height: 16px; color: var(--white); border-radius: 30px; }
.mainTop .setting::before { background: url(../images/icons/icon_setting.svg) no-repeat center/contain; }
.mainTop .channel::before { background: url(../images/logo/ch_logo.svg) no-repeat center/contain; }
.mainTop .del::before { background: url(../images/icons/icon_del_dark.svg) no-repeat center/contain; }
.mainTop .custoList::before { background: url(../images/icons/icon_customerList_line.svg) no-repeat center/contain; }
.mainTop .back::before { width: 30px; height: 30px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain;}
.mainTop .share::before {background: url(../images/icons/icon_share_dark.svg) no-repeat center/contain;}
.mainTop button:not(.hide).live {font-size: 12px; text-indent: inherit; width: auto; border: 1px solid var(--gray-300); display: flex; align-items: center; padding: 5px; border-radius: 3px; gap: 5px;}
.mainTop button:not(.hide).live::before {background: url(../images/icons/modeP.png) no-repeat center/contain; position: unset; transform: unset;}

/* Tab */
.tablist { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; border-bottom: 1px solid var(--gray-300); background-color: var(--bg);}
.tablist button {position: relative; color: var(--gray-400); font-weight: 700; padding: 7px;}
.tablist button.on {color: var(--primary-navy);} 
.tablist button.on::after {position: absolute; content: ''; width: 100%; height: 2px; left: 0; bottom: 0; background-color: var(--primary-navy);} 
.wrapper[path^="channel"] .tablist {background-color: transparent; gap: 0;}
.wrapper[path^="channel"] .tablist button {flex: 1;}
.wrapper[path^="channel"] .tablist button:hover {color: var(--primary-orange);}
.wrapper[path^="channel"] .tablist button.on {color: var(--primary-orange);}
.wrapper[path^="channel"] .tablist button.on::after {background-color: var(--primary-orange);}

/* 탭 버튼 */
.tabButton {overflow-x: auto;}
.tabButton .list {display: flex; justify-content: flex-start; gap: 10px; margin-bottom: 5px;}
.tabButton .list li button, .tabButton .list li a { display: block; padding: 5px 10px; white-space: nowrap; border: 1px solid var(--gray-300); font-size: 13px; background-color: var(--bg-white); color: var(--gray-500); border-radius: 30px;}
.tabButton .list li.on button, .tabButton .list li.on a {border-color: var(--primary-navy);color: var(--primary-navy); font-weight: 700;}

/* 체크박스버튼 */  
.btnCheck { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 10px;}
.btnCheck label input[type="checkbox"] + span {padding: 5px 15px; color: var(--gray-500); border: 1px solid var(--gray-300); font-size: 13px; background-color: var(--bg-white); border-radius: 30px; font-weight: 500; white-space: nowrap; }
.btnCheck label input[type="checkbox"] + span:before {background: none;}
.btnCheck label input[type="checkbox"]:checked + span {color: var(--primary-orange); background-color: var(--orange-100); border-color: var(--primary-orange);}

/* 공지사항 */
.noticeBox { width: 100%; border-radius: 0 10px 10px 0; margin: 10px 0; background-color: var(--gray-50); padding: 15px; font-weight: 500; color: var(--gray-500); word-break: keep-all; gap: 3px; border-left: 4px solid transparent; color: var(--main-font);}
.noticeBox > * {display: block;}
.noticeBox.alert {border-color: var(--primary-orange);}
.noticeBox.comment {border-color: var(--navy-font);}
.noticeBox.notice {border-color: var(--gray-400);}

/* 공통 버튼 */
.buttonBox:not(.hide) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;}
.buttonBox button, .buttonBox a { color: var(--white); flex: 1; padding: 8px; white-space: nowrap; background-color: var(--primary-orange); border: 1px solid var(--primary-orange); border-radius: 10px; text-align: center; }
.buttonBox button.navy, .buttonBox a.navy {background-color: var(--primary-navy); border-color: var(--primary-navy); color: var(--white);}
.buttonBox button.navyLine, .buttonBox a.navyLine {background-color: transparent; border-color: var(--navy-font); color: var(--navy-font);}
.buttonBox button.orangeLine, .buttonBox a.orangeLine {background-color: transparent; border-color: var(--primary-orange); color: var(--primary-orange);}
.buttonBox button.gray, .buttonBox a.gray {background-color: var(--gray-100); border-color: var(--gray-100); color: var(--gray-500);}
.buttonBox button.dis, .buttonBox a.dis {background-color: var(--gray-100); border-color: var(--gray-100); color: var(--gray-500); pointer-events: none; opacity: .5;}
.buttonBox button.more span {position: relative; padding-right: 24px;}
.buttonBox button.more span::after {position: absolute; content: ''; top: 50%; right: 0; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center / contain;}
.buttonBox button.more.down span::after {transform: translateY(-50%) rotate(180deg);}
/* 라인 버튼 */
.buttonBoxLine:not(.hide) {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; }
.buttonBoxLine button, .buttonBoxLine a { position: relative; color: var(--gray-500); flex: 1; font-size: 13px; white-space: nowrap; font-weight: 700; text-align: center; padding: 5px;} 
.buttonBoxLine button:not(.hide) + button:not(.hide)::after, .buttonBoxLine a:not(.hide) + a:not(.hide)::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 40%;  background-color: var(--gray-300);}

/* 전체삭제 / 전체선택 */
.blockWork:not(.hide) { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 10px 10px 10px;}
.blockWork span {white-space: nowrap;} 
.blockWork .buttonBox {justify-content: flex-end; margin-left: auto;} 
.blockWork .buttonBox button {flex: none; padding: 3px 9px; border-radius: 5px; font-size: 12px;}
.blockWork .buttonBox .gray {background-color: var(--gray-200);}

/* orderList */
.orderList { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin: 15px 0;}
.orderList button {color: var(--gray-400); white-space: nowrap; font-weight: 500; border-bottom: 1px solid transparent;}
.orderList button.on {color: var(--navy-font); font-weight: 700; color: var(--primary-orange); font-weight: 700; border-color: var(--primary-orange);}

/* 데이터 없을 때 */  
.nodata:not(.hide), .no:not(.hide) { background-color: transparent; border: none; width: 100%; display: flex; min-height: 20vh; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; font-weight: 700; color: var(--gray-500); word-break: keep-all;} 
.nodata::before, .no::before { content: ''; width: 40px; height: 40px; background: url(../images/icons/icon_blank.svg) no-repeat center / contain;}
.nodata:hover, .no:hover {background-color: transparent;}

/* 공통 dl */
dl {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: stretch; color: var(--main-font); gap: 15px;}
dl .data:not(.hide) { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 5px;}
dl .data dt { width: 100%; font-weight: 700; color: var(--navy-font); font-size: 15px;}
dl .data dt .necessary {color: var(--primary-orange); font-weight: 700; padding-left: 3px;}
dl .data dd { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 500;}
dl .data dd .desc {font-size: 12px; color: var(--gray-500); font-weight: 500;}
dl .data dd.sel2 input {width: calc(50% - 5px);} 
dl .data dd.sel2 select {width: calc(50% - 5px);} 
dl .data dd.mark span { padding: 5px 10px; background-color: var(--white); color: var(--gray-500); border: 1px solid var(--gray-100); border-radius: 7px; font-weight: 500; white-space: nowrap; cursor: pointer; }
dl .data dd.mark span.on { background-color: var(--primary-orange); border-color: var(--primary-orange); color: var(--white); }
dl .data dd.mark span.none { background-color: var(--gray-50); border-color: var(--gray-50); color: var(--gray-400); pointer-events: none; }
dl .data .searchBox { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px;}
dl .data .searchBox button { position: absolute; right: 10px; width: 45px; padding: 2px 8px; font-size: 12px; background-color: var(--primary-navy); border: 1px solid var(--primary-navy); color: var(--white); border-radius: 5px; white-space: nowrap;}
dl .data.len dd {flex-wrap: nowrap; align-items: center; white-space: nowrap;}
dl .data.full {width: 100%;} 
dl .data.colRow dd {flex-direction: column;}
dl input, dl select {flex: 1; width: 100%;}
dl.borderType {align-items: stretch; background-color: var(--bg-white); border: 1px solid var(--gray-300); border-radius: 10px; padding: 15px;} 
dl.borderType .desc {letter-spacing: -1px;}
dl.borderType .data { display: block; padding: 0 10px 15px 10px; border-bottom: 1px solid var(--gray-300);}
dl.borderType .data dt {margin-bottom: 3px;}
dl.row .data {width: calc(50% - 15px);}

/* 라이브 스케치 */
.liveNotice { position: fixed; left: 50%; transform: translateX(-50%); top: 40px; white-space: nowrap; z-index: 10; display:flex; align-items:center; gap: 10px; width:fit-content; margin:0 auto; padding: 2px 8px; background:rgba(255,255,255,.72); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.8); border-radius:30px; box-shadow:0 8px 24px rgba(0,0,0,.08), inset 0 1px 1px rgba(255,255,255,.9); }
.liveNotice .live { display:flex; align-items:center; justify-content:center; padding: 2px 10px; border-radius: 30px; background:linear-gradient(180deg,#7bf36d 0%,#32d652 55%,#18c84b 100%); color:#fff; font-size:10px; font-weight:700; letter-spacing:.3px; /* box-shadow:inset 0 2px 4px rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.12), 0 4px 10px rgba(39,205,84,.35); */ }
.liveNotice .text { position:relative; padding-left:18px; font-size:12px; font-weight:600;}
.liveNotice .text::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; background:#0DCC47; box-shadow:0 0 8px rgba(24,214,77,.55); }
.liveNotice .close { width: 30px; height:30px; background: url(../images/icons/icon_close_dark.svg) no-repeat center; background-size: 55%; font-size:0; }

/* 브랜드리스트 */
.brandBox { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px; width: 100%;}
.brandBox .title { position: relative; color: var(--navy-font); font-weight: 600; padding-left: 10px; font-size: 12px; }
.brandBox .title::before { position: absolute; content: ''; background-color: var(--navy-font); top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 65%; border-radius: 2px; }
.brandList { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 10px;}
.brandList li {width: calc(25% - 7.5px);}
.brandList li button, .brandList li a {width: 100%; padding: 5px; border: 1px solid transparent; border-radius: 10px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 3px;}
.brandList li button .name, .brandList li a .name {font-size: 13px; color: var(--gray-500);}
.brandList li.on button, .brandList li.on a {color: var(--primary-orange); border: 1px solid var(--primary-orange); background-color: var(--orange-100);}
.brandList li.on button .name, .brandList li.on a .name {color: var(--primary-orange);}
.brandList .logo {display: flex; max-width: 50px;}
.brandList .logo img { width: 100%; }
@media screen and (max-width: 360px) {
    .brandList li {width: calc(33.3% - 10px);}
}

/* 모델 리스트 */ 
.modelBox { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px; width: 100%;}
.modelBox .title {position: relative; color: var(--primary-navy); font-weight: 600; padding-left: 10px; font-size: 12px;}
.modelBox .title::before { position: absolute; content: ''; background-color: var(--primary-navy); top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 60%; border-radius: 2px;}
.modelList { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: 15px;}
.modelList li {position: relative; width: calc(50% - 7.5px);}
.modelList li button, .modelList li a {width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; border-radius: 10px; border: 1px solid transparent; padding-bottom: 10px;}
.modelList li.on button { border: 1px solid var(--primary-orange); background-color: var(--orange-100);}
.modelList li.on button .name {color: var(--primary-orange);}
.modelList li.on button .car, .modelList li.on a .car {background-color: var(--orange-100);}
.modelList li button .car, .modelList li a .car { width: 100%; display: flex; justify-content: center; padding: 30px 10px 5px 10px; border-radius: 10px;}
.modelList li button .car img, .modelList li a .car img {max-width: 130px;}
.modelList li button img, .modelList li a img {width: 100%;}
.modelList li button .logo, .modelList li a .logo { position: absolute; top: 5px; left: 5px; display: flex; max-width: 35px;}
.modelList li.e::before {position: absolute; content: 'EV'; top: 5px; right: 5px; padding: 3px 20px 3px 10px; font-weight: 700; font-size: 10px; color: var(--main-font); background: var(--gray-100) url(../images/icons/icon_electronic.png) no-repeat center right -1px;border-radius: 30px;}
.modelList li.x::before {position: absolute; content: 'HEV'; top: 5px; right: 5px; padding: 3px 20px 3px 10px; font-weight: 700; font-size: 10px; color: var(--main-font); background: var(--gray-100) url(../images/icons/icon_eco.png) no-repeat center right -1px;border-radius: 30px;}
.modelList li.state3::after { content: "재고 한정"; position: absolute; top: 5px; left: 5px; background-color: var(--gray-100); padding: 3px 9px; border-radius: 30px; font-size: 10px; font-weight: 500; color: var(--gray-500);} 
.modelList li button .name, .modelList li a .name { color: var(--gray-500); text-align: center; font-size: 13px;}
.modelList li button .name .cnt, .modelList li a .name .cnt {font-size: 12px; color: var(--primary-orange); font-weight: 700; margin-left: 3px; word-break: keep-all;}
/* .modelList li.add::after {position: absolute; content: '추가됨'; top: 5px; right: 5px; padding: 3px 10px; background-color: var(--orange-100); font-weight: 700; font-size: 10px; color: var(--primary-orange); border-radius: 30px;} */

/* 옵션리스트 */
.optionList {display: flex; flex-wrap: wrap; gap: 15px;}
.optionList li {position: relative; width: 100%;}
.optionList li button { width: 100%; display: flex; align-items: stretch; padding: 10px; border-radius: 7px; border: 1px solid var(--gray-300); gap: 10px; }
.optionList li button .image {position: relative; display: flex; justify-content: center; height: 100px;}
.optionList li button .image img { width: 140px; height: 100px; object-fit: cover; border-radius: 7px; display: block;}
/* .optionList li button .icons {position: absolute; top: 82px; left: 15px; }
.optionList li button .icons a { display: block; width: 25px; height: 25px; background:rgba(0,0,0,0.19) url(../images/icons/icon_fullscreen.svg) no-repeat center; background-size: 75%; border-radius: 5px;} */
.optionList li button .image .photo {display: flex;}
.optionList li button .image .count {position: absolute; bottom: 5px; right: 5px; padding: 2px 6px; font-size: 12px; color: #fff; background-color: rgba(0,0,0,.65); border-radius: 5px; min-height: 25px; display: flex; align-items: center;}
.optionList li button .data {display: flex; flex-direction: column-reverse; flex: 1;}
.optionList li button .data .name {text-align: left; font-size: 15px; }
.optionList li button .data .info {color: var(--sub-font); text-align: left; font-weight: 400; font-size: 13px; letter-spacing: -.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; word-break: break-word;}
.optionList li button .data .price {margin-top: auto; text-align: right; font-weight: 700; font-size: 16px; }
.optionList li button:not(:has(.image)) .icons {bottom: 8px; top: unset; }
.optionList li.on button {border-color: var(--primary-orange);}
.optionList li.dis button {opacity: .7; padding: 10px 10px 20px 10px; background-color: var(--gray-100); }
.optionList li.dis button::after { position: absolute; right: 10px; bottom: 5px; font-size: 11px; color: var(--main-color);}
.optionList li.dis[dis='sub'] button::after, .optionList li.dis[dis='sub'] label::after { content: '연계된 옵션 선택 필요';}
.optionList li.dis[dis='sub2'] button::after, .optionList li.dis[dis='sub2'] label::after { content: '선택된 옵션 선택 필요';}
.optionList li.dis[dis='anti'] button::after, .optionList li.dis[dis='anti'] label::after { content: '선택된 옵션 조합 불가';}
.optionList li.dis[dis='intNot'] button::after, .optionList li.dis[dis='intNot'] label::after { content: '선택된 내장 조합 불가';}
.optionList li.dis[dis='extNot'] button::after, .optionList li.dis[dis='extNot'] label::after { content: '선택된 외장 조합 불가';}
.optionList li.default button {padding-bottom: 20px; }
.optionList li.default button::after { position: absolute; right: 10px; bottom: 5px; font-size: 12px; color: #0B2C6E; content: '필수 선택 옵션';}
.optionList li.state3::after {content: "재고 한정"; position: absolute; top: 0; right: 0; background-color: rgba(0,0,0,0.05); padding: 3px 9px; border-radius: 5px; font-size: 10px; font-weight: 500; color: var(--sub-font);}
.optionList li button::before, .optionList li label::before {content: unset;}

/* 고객 - 로그인화면 */
.applyBox .noticeBox {align-items: center;}
.applyBox .noticeBox .title {font-weight: 700; font-size: 15px; }
.applyBox .inputField {margin-top: 15px;} 
.applyBox .inputField .title { font-weight: 700; font-size: 18px; }
.applyBox .inputField dl {margin: 15px 0;} 
.applyBox .inputField input {background-color: var(--bg-white);}

/* 채널리스트 */ 
.channelList .list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 15px;}
.channelList .list li { position: relative; width: 100%; border-radius: 10px; background-color: var(--white); border: 1px solid var(--gray-300);}
.channelList .list li::before {position: absolute; content: ''; top: 0; left: 0; width: 8px; height: 100%; background-color: var(--primary-navy); border-radius: 10px 0 0 10px;}
.channelList .list li a { padding: 10px 10px 10px 20px; height: 100%; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; gap: 5px;}
.channelList .list li a .box {width: 100%;}    
.channelList .list li a .box .info {width: 100%; display: flex; align-items: baseline; gap: 10px; padding-right: 30px; margin-bottom: 5px;}
.channelList .list li a .box .info .close {position: absolute; top: 5px; right: 3px; z-index: 1;}
.channelList .list li a .box .info .situation {padding: 2px 8px; font-size: 12px; font-weight: 700; border: 1px solid transparent; border-radius: 30px; white-space: nowrap;}
.channelList .list li a .box .info .situation.wait { background-color: var(--orange-100); color: var(--primary-orange);} 
.channelList .list li a .box .info .situation.expire {background-color: var(--gray-100); color: var(--gray-500);} 

.channelList .list li a .box .info .situation.end {border-color: var(--gray-300); color: var(--gray-500);} 
.channelList .list li a .box .info .name {color: var(--primary-navy); font-weight: 700;}
.channelList .list li a .box .info label { position: absolute; top: 0; right: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;}
.channelList .list li a .box .title {width: 100%;}
.channelList .list li a .state {width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
.channelList .list li a .state .date {font-size: 12px; color: var(--gray-500);}
.channelList .list li a .state .onOff span { position: relative; padding-left: 15px; font-size: 12px; color: var(--gray-300); font-weight: 500;}
.channelList .list li a .state .onOff span::before {position: absolute; content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: var(--gray-300); top: 50%; left: 0; transform: translateY(-50%); }
.channelList .list li a .state .onOff span.active {color: var(--primary-orange);}  
.channelList .list li a .state .onOff span.active::before {background-color: var(--primary-orange); color: var(--primary-orange);}

/* 채널홈 */
.channelBox { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 30px; }
.channelBox h3 {position: relative; padding-left: 10px; font-size: 16px; color: var(--navy-font);}
.channelBox h3::before {position: absolute; content: ''; top: 50%; left: 0; width: 4px; height: 60%; transform: translateY(-50%); background-color: var(--navy-font); border-radius: 2px;}
.channelBox .profile {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 15px;}
.channelBox .profile .imgBox { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }
.channelBox .profile .imgBox img { max-width: 100px; width: 100px; height: 100px; border-radius: 50%; }
.channelBox .profile .imgBox .settingImg { position: absolute; bottom: 0; right: 0; text-indent: -9999px; font-size: 0; line-height: 0; width: 25px; height: 25px; background: url(../images/icons/icon_setting_white.svg) no-repeat center; background-size: 68%; border-radius: 50%; background-color: var(--primary-navy); }
.channelBox .profile .infoBox { position: relative; width: calc(100% - 115px); border: 1px solid var(--navy-font); padding: 10px; color: var(--navy-font); font-weight: 600; border-radius: 7px;}
.channelBox .profile .infoBox .desc {height: 100px; overflow-y: auto; }
.channelBox .profile .infoBox .settingGreet { width: 25px; height: 25px; position: absolute; bottom: 5px; right: 10px; text-indent: -9999px; font-size: 0; background: url(../images/icons/icon_edit.svg) no-repeat center; background-size: 60%; background-color: var(--primary-navy); border-radius: 50%;}
.channelBox .title { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
.channelBox .title a { position: relative; color: var(--primary-navy); padding-left: 10px; font-size: 12px; font-weight: 500; padding-right: 18px;}
.channelBox .title .more::after {position: absolute; content: ''; top: 50%; right: 0; transform: translateY(-50%) rotate(-90deg); width: 18px; height: 18px; background: url(../images/icons/icon_arrowdown_navy.svg) no-repeat center/contain;}
.channelBox .title .plus::after {position: absolute; content: ''; top: 50%; right: 0; transform: translateY(-50%) rotate(-90deg); width: 18px; height: 18px; background: url(../images/icons/icon_more_navy.svg) no-repeat center/contain;}
.channelBox .estmBox { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 5px;}
.channelBox .estmBox .list { width: 100%; }
.channelBox .estmBox .list ul {overflow-x: auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 15px; padding-bottom: 10px;}
.channelBox .estmBox .list ul li:not(.no, .nodata) {display: flex; border-radius: 10px; width: fit-content; min-height: 164px;}
.channelBox .estmBox .list ul li .box { width: 150px; border-radius: 10px; display: flex; flex-direction: column;}
.channelBox .estmBox .list ul li .box .model {background: var(--bg-white); border: 1px solid var(--gray-300); padding: 12px; border-radius: 10px; margin-bottom: 10px;}
.channelBox .estmBox .list ul li .box .name {font-weight: 700; color: var(--main-font); text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.channelBox .estmBox .list ul li .box .date {font-size: 12px; color: var(--gray-400); text-align: left; margin-top: auto;}
.channelBox .estmBox .list ul li .box .price {font-weight: 700; color: var(--primary-orange); font-size: 15px;}
.channelBox .estmBox .list ul li .box .thumb {padding: 10px; height: 100%; border-radius: 10px; border: 1px solid var(--gray-300); text-align: center;}
.channelBox .estmBox .list ul li .box.add {background-color: var(--bg-white);}
.channelBox .estmBox .list ul li .box.add .addModel { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 10px; height: 100%; border: 1px solid var(--gray-300); border-radius: 10px; }
.channelBox .estmBox .list ul li .box.add .addModel span {color: var(--primary-orange); font-weight: 700;}
.channelBox .estmBox .list ul li .box.add .addModel .image { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; gap: 10px;}
.channelBox .estmBox .list ul li .box.add .addModel .image::before { width: 40px; height: 40px; content: ''; background-color: var(--primary-orange); border-radius: 50%;}
.channelBox .estmBox .list ul li .box.add .addModel .image::after { position: absolute; width: 25px; height: 25px; content: ''; top: 8px; left: 50%; transform: translate(-50%, 0); background: url(../images/icons/icon_more_white.svg) no-repeat center/contain;}
.channelBox .estmBox .list ul li.nodata {width: 100%;}

/* 가격표, 카탈로그 */
.priceCatalBox {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 5px;}
.priceCatalBox ul {display: flex; flex-wrap: wrap; gap: 15px;}
.priceCatalBox ul li { width: calc(50% - 7.5px); position: relative; background-color: var(--bg-white); padding: 35px 10px 10px 10px; border-radius: 10px; border: 1px solid var(--gray-300);} 
.priceCatalBox ul li label {position: absolute; top: 20px; left: 10px; }
.priceCatalBox ul li .box {  display: flex; flex-direction: column; justify-content: space-between; height: 100%; align-items: center; gap: 5px;} 
.priceCatalBox ul li .top {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; gap: 3px;}
.priceCatalBox ul li .top .logo {display: flex;}
.priceCatalBox ul li .top .logo img {max-width: 30px;}
.priceCatalBox ul li .top .name {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.priceCatalBox ul li .thumb { display: flex; flex-direction: column; height: 100%; justify-content: flex-start; align-items: flex-start; gap: 7px; cursor: pointer;}
.priceCatalBox ul li .thumb img {margin: auto 0;}
.priceCatalBox ul li .date {font-size: 12px; color: var(--gray-400);}
.priceCatalBox ul li a {display: block; text-align: center;}
.priceCatalBox ul li a .thumb {height: auto; align-items: center;}
.priceCatalBox .list {width: 100%;}
.priceCatalBox ul li form {height: 100%;}
/* 가격표, 카탈로그 홈 예외처리 */
.priceCatalBox.home ul li {background-color: transparent; padding: 0; border: 0; border-radius: 0; width: auto;}
/* 가격표 카탈로그 리스트 페이지 */
.wrapper[path="channel_priceCatal"] h3 {margin-bottom: 10px;}
.wrapper[path="channel_priceCatal"] .header {position: sticky; top: 0; background-color: var(--bg-white); z-index: 2;}
.wrapper[path="channel_priceCatal"] .mainTop {position: sticky; top: 0; background-color: var(--bg-white); padding-bottom: 10px; z-index: 1;}
.wrapper[path="channel_priceCatal"] .catalList {display: flex; flex-wrap: wrap; gap: 15px;}
.wrapper[path="channel_priceCatal"] .catalList img {width: calc(50% - 7.5px); border-radius: 10px; cursor: pointer;}
.catalogPopup button, .priceCatalViewer button { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 35px; height: 35px; border-radius: 30px; background: #fff url(../images/icons/icon_arrowdown_navy.svg) no-repeat center; background-size: 65%; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); text-indent: -9999px; font-size: 0;}
.catalogPopup .prev, .priceCatalViewer .prev {left: -2px; transform: translateY(-50%) rotate(90deg); }
.catalogPopup .next, .priceCatalViewer .next {transform: translateY(-50%) rotate(-90deg); right: -2px;}

/* 추천모델 */
.pickModelBox .pickModelList {display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px;}
.pickModelBox .pickModelList li {width: 100%; background-color: var(--bg-white); border-radius: 10px; padding: 10px; border: 1px solid var(--gray-300);}
.pickModelBox .pickModelList li .model {text-align: center;}
.pickModelBox .pickModelList li .model img { width: 100%; max-width: 180px;}
.pickModelBox .pickModelList li .name {font-size: 15px; font-weight: 500;}
.pickModelBox .pickModelList li .price { font-size: 16px; font-weight: 700; color: var(--primary-orange);}  
/* 추천모델 상세페이지 */
.pickModelBox .infoBox {display: flex; flex-direction: column; width: 100%;}
.pickModelBox .infoBox h3 { position: relative; margin: 30px 0 10px; font-size: 16px;}  
.pickModelBox .infoBox h3:first-child {margin-top: 0;}
.pickModelBox .infoBox h3 span {font-size: 13px; color: var(--gray-400); font-weight: 500; margin-right: 5px;}
.pickModelBox .infoBox h3 em {font-size: 13px; color: var(--gray-400); font-weight: 500;}
.pickModelBox .infoBox h3 a, .pickModelBox .infoBox h3 button {display: inline-block; padding: 3px 9px; background-color: var(--primary-navy); color: var(--white); border-radius: 5px; font-size: 12px;} 
.pickModelBox .infoBox .gradeList .list {display: flex; flex-direction: row ; flex-wrap: wrap; gap: 15px;}
.pickModelBox .infoBox .gradeList .list li { position: relative; width: calc(50% - 7.5px); background-color: var(--bg-white); border-radius: 7px; border: 1px solid var(--gray-300);}
.pickModelBox .infoBox .gradeList .list li .item {width: 100%; text-align: left; z-index: 1; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
.pickModelBox .infoBox .gradeList .list li.disabled { background-color: var(--bg); border: 1px solid var(--gray-200); opacity: .4; pointer-events: none; box-shadow: none;}
.pickModelBox .infoBox .gradeList .list li .like { z-index: 2; position: absolute; top: 3px; right: 3px; background: url(../images/icons/icon_like.svg) no-repeat center; background-size: 50%; width: 40px; height: 40px; text-indent: -9999px; line-height: 0; font-size: 0;}
.pickModelBox .infoBox .gradeList .list li .like.on {background: url(../images/icons/icon_like_on.svg) no-repeat center; background-size: 50%;} 
.pickModelBox .infoBox .gradeList .list li .info { width: 100%; display: flex; flex-direction: column; justify-content: flex-start;}
.pickModelBox .infoBox .gradeList .list li .info .trim {font-weight: 500; color: var(--main-font);}
.pickModelBox .infoBox .gradeList .list li .info .fuel { font-size: 13px; color: var(--gray-400)}
.pickModelBox .infoBox .gradeList .list li .price {font-weight: 700; font-size: 16px; color: var(--primary-orange); white-space: nowrap; margin-top: auto; text-align: right;}
.pickModelBox .infoBox .gradeList .list li.oLink:not(.disabled)::before { content: "옵션 선택 필요"; position: absolute; font-size: 11px; right: 10px; bottom: 2px; color: var(--navy-font);}
.pickModelBox .infoBox .gradeList .list li.on {border-color: var(--primary-orange);}
 
/* 내 견적함 */  
.estimateBox {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
.estimateBox form {width: 100%;}
.estimateBox .tablist,.estimateBox .tabButton {margin-bottom: 10px;}
.estimateBox .list { width: 100%;}
.estimateBox .list ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 15px; }
.estimateBox .list ul li { position: relative; background-color: var(--white); border-radius: 10px; display: flex; flex-direction: column; width: 100%; border: 1px solid var(--gray-300);}
.estimateBox .list ul li .selBox {width: 100%; display: flex; align-items: center; padding: 10px; }
.estimateBox .list ul li .selBox input[type="checkbox"] + span {font-size: 12px;}
.estimateBox .list ul li .selBox b { font-size: 11px; background-color: var(--gray-100); padding: 2px 6px; border-radius: 30px; margin-left: 5px;}
.estimateBox .list ul li .date {font-size: 11px; color: var(--gray-400); margin-left: auto; }
.estimateBox .list ul li a {width: 100%; display: flex; flex-direction: column; justify-content: space-between; flex: 1;}
.estimateBox .list ul li .box {width: 100%;display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px; padding: 0 10px 10px 10px;}
.estimateBox .list ul li .box .info {width: 100%}
.estimateBox .list ul li .box .info .name {width: 100%; font-size: 15px; font-weight: 700;}
.estimateBox .list ul li .box .info .trim {font-size: 13px; color: var(--gray-500);}
.estimateBox .list ul li .box .image {display: flex; width: 100%; justify-content: center; }
.estimateBox .list ul li .box .image img { width: 100%; max-width: 180px;}
.estimateBox .list ul li .price { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 0 10px 10px 10px;}
.estimateBox .list ul li .price .cost {font-size: 15px; font-weight: 700; color: var(--primary-orange); } 
.estimateBox .list ul li.no, .estimateBox .list ul li.nodata {width: 100%; border: 0;}
/* 내 견적함 → 상담신청 팝업 */
.estimateBox .detail {width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 15px; margin-bottom: 20px; border:1px solid var(--gray-300); border-radius: 10px;}
.estimateBox .detail .info {width: 100%;} 
.estimateBox .detail .info b {font-size: 20px;}
.estimateBox .detail .info .grade {display: block; margin-top: 1px;}
.estimateBox .detail .option {display: block; color: var(--gray-500); padding-left: 55px; text-indent: -55px; margin: 10px 0;} 
.estimateBox .detail .option::before {content: '옵션 '; padding: 3px 7px; border-radius: 5px; font-weight: 600; color: var(--main-font); margin-right: 17px; background-color: var(--gray-300); font-size: 12px;}
.estimateBox .detail .model {width: 100%; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.estimateBox .detail .num {display: block ; font-size:24px; font-weight:700; color:var(--primary-orange); text-align: right;}



/* 사용안함 */
/* 내 견적함 - 간편견적 1 */ 
/* .estimateBox .infoBox {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px;}
.estimateBox .infoBox .info {width: 100%}
.estimateBox .infoBox .info .name {width: 100%; font-size: 15px; font-weight: 700;}
.estimateBox .infoBox .info .method {width: 100%; font-size: 13px; color: var(--gray-500);}
.estimateBox .infoBox .info .method span {font-weight: 700; color: var(--primary-navy);}
.estimateBox .infoBox .info .docu { display: inline-block; padding: 3px 9px; color: var(--white); background: var(--primary-navy); font-size: 10px; font-weight: 700; border-radius: 30px;}
.estimateBox .infoBox .imgBox {display: flex; width: 100%; justify-content: center; }
.estimateBox .infoBox .imgBox img { width: 100%; max-width: 180px;}
.estimateBox .detailBox {width: 100%; background-color: var(--white); border-radius: 10px;}
.estimateBox .detailBox .detail {padding: 10px;}
.estimateBox .detailBox .detail > div { padding: 10px; font-size: 15px; border-bottom: 1px dashed var(--gray-300);}
.estimateBox .detailBox .detail > div .title {font-weight: 700;}
.estimateBox .detailBox .detail .between {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between;}
.estimateBox .detailBox .detail > div:first-child {padding-top: 0;}
.estimateBox .detailBox .detail > div:last-child {border-bottom: none; padding-bottom: 0;}
.estimateBox .detailBox .detail .selectPrice {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; margin-bottom: 7px;}
.estimateBox .detailBox .detail .num {font-weight: 700; color: var(--primary-orange);}
.estimateBox .detailBox .list {margin-top: 0; display: flex; flex-direction: column; flex-wrap: nowrap; }
.estimateBox .detailBox .list li { position: relative; padding-left: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; justify-content: space-between;}
.estimateBox .detailBox .list li::before {position: absolute; top: 2px; left: -2px; content: '+'; line-height: 1;}
.estimateBox .detailBox .list li span {font-size: 13px; color: var(--gray-500);}
.estimateBox .detailBox .list li .name {width: 65%; letter-spacing: -.5px;}
.estimateBox .detailBox .list li .price { width: 45%; text-align: right; }
.estimateBox .detailBox .detail .taxBox span {font-size: 14px;}
.estimateBox .detailBox .totalPrice {background-color: var(--primary-orange); border-radius: 0 0 10px 10px; padding: 10px 20px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between;}
.estimateBox .detailBox .totalPrice span {font-size: 16px; font-weight: 700; color: var(--white);} */
/* 내 견적함 - 간편견적 3 (탭 형식) */
/* .estimateBox .tabCont { width: 100%; background-color: var(--white); border-radius: 10px; padding: 10px; margin-top: 10px;}
.estimateBox .tabCont .tabList {display: flex; flex-direction: column; flex-wrap: nowrap;}
.estimateBox .tabCont .tabList > li {display: flex; flex-direction: row; flex-wrap: wrap; border-bottom: 1px dashed var(--gray-300); gap: 5px; padding: 10px;}
.estimateBox .tabCont .tabList > li:first-child {padding-top: 0;}
.estimateBox .tabCont .tabList > li:last-child { border-bottom: 0;}
.estimateBox .tabCont .tabList li .title {width: 100%; font-weight: 500;}
.estimateBox .tabCont .tabList li .choiced {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between;}
.estimateBox .tabCont .tabList li .choiced .name {font-size: 13px; color: var(--gray-500); width: 70%;}
.estimateBox .tabCont .tabList li .choiced .price {width: 30%; font-weight: 700;text-align: right;}
.estimateBox .tabCont .tabList li .choiced > div {width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; justify-content: space-between;}
.estimateBox .tabCont .tabList li .choiced > div .ttl {color: var(--gray-500);}
.estimateBox .tabCont .tabList li .choiced .sub { width: 100%; margin-top: 5px; background-color: var(--gray-50); border-radius: 10px; padding: 10px;}
.estimateBox .tabCont .tabList li .choiced .sub li { position: relative; padding-left: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; justify-content: space-between; color: var(--gray-500); font-size: 12px;}
.estimateBox .tabCont .tabList li .choiced .sub li::before { position: absolute; top: 2px; left: -2px; content: '+'; line-height: 1;}
.estimateBox .tabCont .tabList li .choiced .sum .title {color: var(--gray-500); font-weight: 400;}
.estimateBox .tabCont .totalPrice {font-size: 15px; font-weight: 700; border-top: 3px dashed var(--gray-300); padding: 10px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between;}
.estimateBox .tabCont .totalPrice .price { color: var(--primary-orange);} */

/* 채팅 */
.wrapper[path="channel_chatting"] .footer {display: none;}
.chatBox { display: flex; flex-direction: column; gap: 15px; padding: 15px; background:var(--bg); border-radius: 10px; height: calc(100vh - 155px); }
.chatBox .liveSetting:not(.hide) { display:flex; justify-content:space-between; align-items:center; padding: 15px; background:var(--white); border-radius: 10px; box-shadow:0 8px 24px rgba(0,0,0,.04); }
.chatBox .liveSetting .info { display:flex; flex-direction:column; }
.chatBox .liveSetting .info strong { font-size: 16px; }
.chatBox .liveSetting .info p { color:var(--gray-500); margin: 0; font-size: 13px; }
.chatBox .chatState { position:relative; display:flex; justify-content:space-between; align-items:center; color: var(--gray-400);}
.chatBox .chatState::before { content: ''; width: 10px; height: 10px; margin-right: 10px; border-radius:50%; background-color: var(--gray-400); }
.chatBox .chatState .badge { display:flex; align-items:center; justify-content:center; gap: 10px; padding: 5px 12px; margin-left:auto; border:1px solid var(--gray-300); font-size: 13px; border-radius:30px; background-color:var(--white); color: var(--gray-400); font-weight:700; }
.chatBox .chatState .badge::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: var(--gray-400); }
.chatBox .chatState.on {color: var(--main-font);}
.chatBox .chatState.on::before {background-color: #0DCC47;}
.chatBox .chatState.on .badge{color: #0DCC47;}
.chatBox .chatState.on .badge::before {background-color: #0DCC47;}
.chatBox .chatBody { flex: 1; min-height: 0; /* height: 500px;  */}
.chatBox .chatBody ul { display: flex; flex-direction: column; gap: 20px; height:100%; overflow-y:auto; overflow-x:hidden; }
.chatBox .chatBody ul::-webkit-scrollbar { display:none; }
.chatBox .chatBody ul li { position: relative; width: fit-content; max-width: 70%; padding: 7px 18px; font-weight:500; word-break:break-word; }
.chatBox .chatBody ul li .date { position: absolute; bottom: 4px; font-size: 12px; color:var(--gray-400); font-weight: 300; white-space:nowrap; }
.chatBox .chatBody ul li.left { align-self:flex-start; background-color: var(--white); border-radius: 30px 30px 30px 5px; box-shadow: 0 4px 18px rgba(0,0,0,.05); }
.chatBox .chatBody ul li.left .date { right: -45px; }
.chatBox .chatBody ul li.right { align-self: flex-end; margin-left: auto; background-color: var(--primary-navy); color:var(--white); border-radius: 30px 30px 5px 30px; box-shadow:0 6px 20px rgba(0,0,0,.08); }
.chatBox .chatBody ul li.right .date { left: -45px; }
.chatBox .liveGuide:not(.hide) { display:flex; flex-wrap: wrap; align-items:center; gap: 15px; padding: 15px; border:1px solid var(--gray-300); background-color: var(--white); border-radius: 10px; }
.chatBox .liveGuide::before { content: ''; width: 40px; height: 40px; border-radius:50%; border: 1px solid var(--gray-300); background: url(../images/icons/modeP.png) no-repeat center/contain; }
.chatBox .liveGuide .text { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.chatBox .liveGuide .text strong { font-size: 16px; }
.chatBox .liveGuide .text p { font-size: 13px; color:var(--gray-500); margin: 0; }
.chatBox .liveGuide button { width: 100%; padding: 7px 10px; border-radius: 7px; background-color: var(--primary-navy); color: var(--white); font-size: 12px;}
.chatBox .chatInput form { display:flex; align-items:center; gap: 15px; }
.chatBox .chatInput input { flex:1; height: 50px; padding: 0 15px; border:1px solid var(--gray-300); border-radius: 10px; background:var(--white); box-shadow:0 8px 24px rgba(0,0,0,.04); } 
.chatBox .chatInput .send { width: 50px; height: 50px; border:none; border-radius: 10px; background-color: var(--primary-navy); display: flex; align-items: center; justify-content: center; text-indent:-9999px; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.chatBox .chatInput .send img { width:22px; height:22px;}


/* 이용가이드 */
.purchaseTipBox .tabButton {margin: 10px 0;}
.purchaseTipBox .purchaseTipList ul {display: flex;flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 15px;}
.purchaseTipBox .purchaseTipList ul li { position: relative; width: 100%; border-radius: 10px; background-color: var(--bg-white); border: 1px solid var(--gray-300);}
.purchaseTipBox .purchaseTipList ul li::after {position: absolute; content: ''; top: 16px; right: 10px; width: 20px; height: 20px; transform: rotate(-90deg); background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain; pointer-events: none;} 
.purchaseTipBox .purchaseTipList ul li a {display: flex; flex-direction: column; flex-wrap: wrap; gap: 10px; justify-content: flex-start; height: 100%; padding: 15px; }
.purchaseTipBox .purchaseTipList ul li .theme { position: relative; width: fit-content; letter-spacing: -.5px; font-size: 13px; font-weight: 600; color: var(--navy-font); padding: 0 8px;}
.purchaseTipBox .purchaseTipList ul li .theme::before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 2px; height: 60%; background-color: var(--navy-font);}
.purchaseTipBox .purchaseTipList ul li .theme::after {position: absolute; content: ''; top: 50%; right: 0; transform: translateY(-50%); width: 2px; height: 60%; background-color: var(--navy-font);}
.purchaseTipBox .purchaseTipList ul li .titleBox { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 5px; color: var(--main-font);}
.purchaseTipBox .purchaseTipList ul li .titleBox label { position: relative; z-index: 2; font-weight: 500; } 
.purchaseTipBox .purchaseTipList ul li .titleBox label input[type="checkbox"] + span:before {transform: none; top: 0; left: -4px;}
.purchaseTipBox .purchaseTipList ul li.nodata {width: 100%; background-color: transparent; border: 0}
.purchaseTipBox .purchaseTipList ul li.nodata::after {content: none;}
.purchaseTipBox .purchaseTipList button.more {margin-top: 15px;}
.purchaseTipBox > .buttonBox {margin-top: 15px; position: sticky; bottom: 70px; z-index: 2; box-shadow: 0 10px 0 10px #fff;}
.purchaseTipBox > .buttonBox button:disabled { opacity: .4; pointer-events: none;}
/* 이용가이드 홈 예외처리 */
.purchaseTipBox.home .purchaseTipList ul {gap: 5px;}
.purchaseTipBox.home .purchaseTipList ul li {background-color: transparent; border-radius: 0; border: 0;}
.purchaseTipBox.home .purchaseTipList ul li a {flex-direction: row; flex-wrap: nowrap; gap: 5px; padding: 0;}
.purchaseTipBox.home .purchaseTipList ul li a .titleBox { display: block; flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.purchaseTipBox.home .purchaseTipList ul li a .date {white-space: nowrap; font-size: 12px; color: var(--gray-400); text-align: right;}
.purchaseTipBox.home .purchaseTipList ul li::after {content: none;}
/* 이용가이드 슬라이드 팝업 예외처리 */
.popupSlide .frame .panelContent .purchaseTipBox .purchaseTipList ul li {border: 1px solid var(--gray-300); padding: 10px; border-radius: 10px;}
.popupSlide .frame .panelContent .purchaseTipBox .purchaseTipList ul li .theme { margin-bottom: 10px;}
.popupSlide .frame .panelContent .purchaseTipBox .purchaseTipList ul li::after {content: none;}

/* 구매가이드 매뉴얼 */
.manualBox { max-width: 740px; margin: 0 auto; word-break: keep-all; background-color: var(--bg-white); padding: 15px; border-radius: 15px;}
.manualBox section {margin: 15px 0;}
.manualBox h3 { font-size: 20px; padding: 10px;} 
.manualBox h4 {font-size: 18px;}
.manualBox h5 { font-size: 16px; margin: 10px 0; }
.manualBox h6 { font-size: 15px; margin: 10px 0; }
.manualBox p {color: var(--gray-500); line-height: 1.8;}
.manualBox b {color: var(--main-font);}
.manualBox img {border-radius: 2px;}
.manualBox a {text-decoration: underline; font-weight: 500;}
.manualBox [class^="highLight-"] {width: fit-content; font-weight: 700; padding: 0 4px; border-radius: 1px; }
.manualBox [class^="highLight-"] b {color: #333;}
.manualBox .highLight-yellow {background-color: #FFF59C; color: #333;}
.manualBox .highLight-orange {background-color: #FFDAB1; color: #333;}
.manualBox .highLight-green {background-color: #CFF5B7; color: #333;}
.manualBox .listBox {padding: 0 0 15px 15px;}
.manualBox .listBox h6 {margin: 0 0 5px 0;}
.manualBox .listBox p {line-height: 1.5; margin: 5px;}
.manualBox .manualList ul {display: flex; flex-direction: column; flex-wrap: nowrap;}
.manualBox .manualList ul li {color: var(--gray-500); line-height: 1.8;}
.manualBox .manualList ul li[class^="highLight-"] {color: #333;}
.manualBox .manualList ul li[class^="highLight-"] b {color: #333;}
.manualBox .manualList ul:not(:last-child), .manualBox .manualList ol:not(:last-child) {margin-bottom: 10px;}
.manualBox .summaryBox { text-align: left; padding: 15px; border: 2px solid #BCCDA1; border-radius: 10px; margin: 15px 0; }
.manualBox .summaryBox p {line-height: 1.5; margin: 5px 0;}
.manualBox .summaryBox h5 {margin: 0;}
.manualBox .summaryBox.tip { border-color: #C3D3E3;}
.manualBox .summaryBox.alert { border-color: #CD8D80;}
.manualBox .tableBox {margin: 15px 0;}
.manualBox .tableBox table .title td { background-color: var(--gray-50);}
.manualBox .photo {text-align: center;}
.manualBox .photo .caption {color: var(--gray-500); font-size: 13px; }
.manualBox .file {padding: 0 15px;}
.manualBox .file a { color: var(--primary-blue); font-weight: 500; text-decoration: underline; }
.manualBox .file:before {content:"[파일]"; font-weight: 500; margin-right: 5px; font-size: 13px; color: var(--main-font);}
.manualBox .youtube { position: relative; width: 100%; padding-bottom: 75%; margin-bottom: 60px; margin-top: 20px; overflow: hidden;}
.manualBox .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.manualBox .youtube .caption { position: absolute; width: 100%; bottom: -30px; left: 0; text-align: center; }

/* 상담 신청 목록 */
.consultBox .consultList li { position: relative; border: 1px solid var(--gray-300);}
.consultBox .consultList li .state {border: 1px solid transparent; width: fit-content; padding: 3px 9px; border-radius: 30px; font-size: 12px; font-weight: 700; }
.consultBox .consultList li .state.progress {background-color: var(--orange-100); color: var(--primary-orange);}
.consultBox .consultList li .state.complete {background-color: var(--gray-100); color: var(--gray-500);}
.consultBox .consultList li .state.cancel {border-color: var(--gray-300); color: var(--gray-500);}
.consultBox .consultList li .state.request {background-color: #F2F5FF; color: #627FEA }

/* 상담 신청 홈 예외처리 */
.consultBox.home .consultList li {background-color: transparent; padding: 0; border-radius: 0; border: 0;}
.consultBox.home .consultList li .state {position: unset}
.consultBox.home .consultList li .name {font-size: 14px; margin-bottom: 0;}
.consultBox.home .consultList li button {padding: 0;}
/* 상담 신청 목록 전체보기 */
.consultBox .tabButton {margin-bottom: 10px;}
.consultBox .consultList ul {display: flex; flex-wrap: wrap; gap: 15px;}
.consultBox .consultList li { position: relative; width: 100%; background-color: var(--bg-white);border-radius: 10px;}
.consultBox .consultList li button { width: 100%; padding: 10px; display: flex; flex-direction: column; height: 100%;}
.consultBox .carInfo .model {display: flex; align-items: center; justify-content: center;}
.consultBox .carInfo .model img {max-width: 80%;}
.consultBox .carInfo .top {display: flex; align-items: center; justify-content: space-between;} 
.consultBox .carInfo .top .date {font-size: 12px; color: var(--gray-400); font-weight: 400;}
.consultBox .carInfo .name {font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--main-font); text-align: left;}
.consultBox dl { gap: 5px; }
.consultBox dl .data {gap: 0;}
.consultBox dl .data dt {width: 70px; font-size: 13px; color: var(--gray-500); font-weight: 400; text-align: left;}
.consultBox dl .data dd {width: calc(100% - 70px); font-size: 13px; color: var(--gray-500); font-weight: 400; text-align: left; }
.consultBox:not(.detail) dl .data dd { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
/* 상담 신청 상세보기 팝업 */
.consultBox.detail .detailBox {padding: 15px; border: 1px solid var(--gray-300); border-radius: 10px;}
.consultBox.detail .detailBox .carInfo .top {margin-bottom: 10px;}
.consultBox.detail .requestBox {margin-top: 15px;}
.consultBox.detail .requestBox h4 {margin-bottom: 10px;}
.consultBox.detail .requestBox .box {padding: 20px; border-radius: 10px; background-color: var(--gray-100);}
.consultBox.detail dl .data dt {font-size: 14px;}
.consultBox.detail dl .data dd {font-size: 14px;}



/* 설정 */
.setBox {background-color: var(--white); border-radius: 10px;}
.setBox .buttonBox {margin-top: 15px;}
.setBox .copyUrl {margin-top: 20px; display: flex; align-items: center;}
.setBox .copyUrl .title {width: 70px; font-weight: 700;}
.setBox .copyUrl .url {position: relative; width: calc(100% - 70px); border-bottom: 1px solid var(--gray-300); border-radius: 0; padding: 5px 30px 5px 5px; background-color: transparent;}
.setBox .copyUrl .url span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.setBox .copyUrl .url button {position: absolute; top: -4px; right: 0; width: 35px; height: 35px; background: url(../images/icons/icon_copy_navy.svg) no-repeat center; background-size: 50%; text-indent: -9999px; font-size: 0;}

/* 기본 팝업 공통*/
.popup { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 78;} 
.popup .dimBg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--dim-rgb); z-index: 79; }
.popup .frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--bg-white); border-radius: 10px; z-index: 80; }
.popup .frame > .head { position: relative; text-align: center; padding: 15px 40px 15px 15px; min-height: 50px; display: flex; align-items: center;}
.popup .frame > .head h3 { font-size: 16px; text-align: left; word-break: keep-all;}
.popup .frame > .head .back { width: 30px; height: 30px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center bottom; background-size: 80%; transform: rotate(90deg); font-size: 0; text-indent: -9999px;}
.popup .frame > .head .list {background: url(../images/icons/icon_widget.svg) no-repeat center; background-size: 50%;}
.popup .frame > .buttonBox {gap: 15px; padding: 15px;}
.popup .frame > .buttonBox[btnlen="0"] {padding: 0;}
.popup .frame > .buttonBox button, .popup .frame > .buttonBox a {padding: 10px;}
.popup .frame .close { width: 48px; height: 48px; background-size: 40%; position: absolute; top: 3px; right: 1px; z-index: 1;}
.popup .content { padding: 0 15px 15px 15px; word-break: keep-all; color: var(--main-font);}
.popup .content h3 {font-size: 15px; margin: 10px 0;} 
/* 팝업- 알림창 */
.popup .content .noticeBox {margin: 10px 0;} 
.popup.noticePopup {z-index: 81;} 
.popup.noticePopup .frame > .buttonBox {padding: 0 15px 15px 15px;}
.popup.noticePopup .content {padding: 15px; text-align: center;}

/* 연결 요청 알림 팝업 */
.popup .content .connectBox {display: flex; flex-direction: column; gap:20px;}
.popup .content .connectBox .alarm {display:flex; align-items:center; gap: 5px; color: var(--gray-500);}
.popup .content .connectBox .alarm::before {content:''; width: 20px; height: 20px; background: url(../images/icons/icon_notification.svg) no-repeat center/contain;}
.popup .content .connectBox .connectInfo {display: flex; align-items: center; gap: 15px; padding: 15px; border: 1px solid var(--gray-300); border-radius: 10px; }
.popup .content .connectBox .connectInfo .thumb {width: 80px;height:80px; flex-shrink:0; border-radius:50%; overflow:hidden; }
.popup .content .connectBox .connectInfo .thumb img {display: block; width: 100%; height: 100%; object-fit:cover;}
.popup .content .connectBox .connectInfo .info {flex:1;}
.popup .content .connectBox .connectInfo .info .title {display: block; margin-bottom: 5px; font-size: 16px; font-weight: 700; }
.popup .content .connectBox .connectInfo .info p {color: var(--gray-500); margin: 0; font-size: 13px;}
.popup .content .connectBox .box {padding: 15px; border:1px solid var(--gray-300); border-radius: 10px; }
.popup .content .connectBox .box .title { margin-bottom: 10px; margin-top: 0;}
.popup .content .connectBox .box dl {gap: 5px;}
.popup .content .connectBox .box dl dt {width: 70px; font-weight: 400; color: var(--gray-500); font-size: 14px; }
.popup .content .connectBox .box dl dd {width: calc(100% - 75px);}
.popup .content .connectBox .requestMsg {padding: 15px; border-radius: 10px;background-color: var(--orange-100); color: var(--primary-orange);}

/* 슬라이드 팝업 */
.popupSlide { overflow: hidden; touch-action: none; width: 100%; max-width: 600px; transform: translate(-50%, 100%); position: fixed; bottom: 0; left: 50%; background-color: var(--bg-white); z-index: 50; transition: transform .3s ease-out; border-radius: 20px 20px 0 0; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 20px;}
.popupSlide.active { transform: translate(-50%, 0);}
.popupSlide.content {transform: translate(-50%, calc(100% - 60px));}
.popupSlide .frame {display: flex; flex-direction: column; flex-wrap: nowrap;}
.popupSlide .frame > .head { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; padding: 20px;}
.popupSlide .frame > .head .title {color: var(--primary-navy);}
.popupSlide .frame > .head .back { width: 30px; height: 30px; background: url(../images/icons/icon_arrowdown_navy.svg) no-repeat center 10px; background-size: 80%; transform: rotate(90deg); font-size: 0; text-indent: -9999px;}
.popupSlide .frame > .head h3:not(.hide) {display: flex; align-items: center; flex-wrap: wrap; gap: 5px;}
.popupSlide .frame > .head h3 span {font-size: 12px; color: var(--primary-orange); font-weight: 500;}
.popupSlide .frame > .head .updown { position: absolute; right: 10px; display: none; width: 30px; height: 30px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center; transform: rotate(180deg); background-size: 90%; font-size: 0; text-indent: -9999px;}
.popupSlide .frame > .head .updown.open {transform: none;}
.popupSlide .frame .closeBtn {position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 15%; height: 4px; border-radius: 3px; background-color: var(--gray-300); font-size: 0; text-indent: -9999px; }
.popupSlide .frame .panelContent { display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; max-height: 65vh; padding: 0 20px;}
.popupSlide .frame .panelContent.open .likeList ul {max-height: unset;}
.popupSlide .frame > .buttonBox { background-color: var(--bg-white); padding: 15px 20px; gap: 20px; justify-content: center; }
.popupSlide .frame > .buttonBox a, .popupSlide .frame > .buttonBox button {flex: 1; max-width: unset;}

/* 슬라이드팝업 - 프로필 사진선택 */
.popupSlide .panelContent .photoBox .list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 15px;}
.popupSlide .panelContent .photoBox .list li { width: calc(33.3% - 10px);}
.popupSlide .panelContent .photoBox .list li .box { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 5px;}
.popupSlide .panelContent .photoBox .list li .box img { width: 80px; height: 80px; border-radius: 50%; }

/* 슬라이드팝업 - 인삿말 */
.popupSlide .panelContent .greetingBox { display: flex; flex-direction: column; align-items: center; flex-wrap: flex-start; gap: 15px;}
.popupSlide .panelContent .greetingBox .dataBox {width: 100%;}
.popupSlide .panelContent .greetingBox .dataBox input { width: 100%; background-color: transparent; border: 1px solid var(--primary-navy); margin-bottom: 10px;}
.popupSlide .panelContent .greetingBox .saveBox { width: 100%;} 
.popupSlide .panelContent .greetingBox .saveBox .title { display: inline-block; margin-bottom: 10px; font-size: 16px; font-weight: 700; color: var(--primary-orange); border-bottom: 2px solid var(--primary-orange);}
.popupSlide .panelContent .greetingBox .saveBox .list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 15px;}
.popupSlide .panelContent .greetingBox .saveBox .list li { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;}
.popupSlide .panelContent .greetingBox .saveBox .list li .box { height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; background-color: var(--gray-50); padding: 10px; gap: 5px; border-radius: 10px;}
.popupSlide .panelContent .greetingBox .saveBox .list li .box .subject {width: 100%;font-size: 15px; font-weight: 700; color: var(--main-font); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.popupSlide .panelContent .greetingBox .saveBox .list li .box .desc {color: var(--gray-500); font-size: 13px;} 

@media screen and (max-width:360px){
    .wrapper .popupSlide .frame > .head h3:not(.hide) {flex-direction: row; align-items: center;}
}
@media screen and (min-width:430px){
    .popupSlide .panelContent .photoBox .list li {width: calc(25% - 11.25px);}
    .popupSlide .panelContent .greetingBox .saveBox .list li {width: calc(50% - 7.5px);}
    .pickModelBox .pickModelList li {width: calc(50% - 7.5px);}
    .estimateBox .list ul li {width: calc(50% - 7.5px);}
    .wrapper.thumb .catalList img {width: calc(33.3% - 10px);}
    .chatBox .liveGuide button { width: fit-content;}
    .consultBox .consultList li { width: calc(50% - 7.5px);}
}
@media screen and (min-width:600px){
    .modelList li {width: calc(33.3% - 10px);}
    .popupSlide .panelContent .photoBox .list li {width: calc(20% - 12px);}
    .popupSlide .panelContent .greetingBox .saveBox .list {gap: 15px;}
    .channelList .list li {width: calc(50% - 7.5px);}
    .priceCatalBox ul li {width: calc(33.3% - 10px);}
    .purchaseTipBox .purchaseTipList ul li {width: calc(50% - 7.5px);}
    .purchaseTipBox.home .purchaseTipList ul li {width: 100%;}
    .estimateBox .detail .model {width: calc(45% - 5px);}
    .estimateBox .detail .info {width: calc(55% - 5px);} 
    
}
@media screen and (min-width:1000px){
    .catalogPopup button, .priceCatalViewer button {width: 50px; height: 50px;}
    .catalogPopup .prev, .priceCatalViewer .prev {left: 10px;} 
    .catalogPopup .next, .priceCatalViewer .next {right: 10px;}
    .popup .content .specBox dl .data {gap: 5px;}
    .popup .content .specBox dl .data dd {width: 100%;}
}
@media (hover: hover) and (pointer: fine) {
    .orderList button:hover {color: var(--primary-orange);}
    .buttonBox button:hover, .buttonBox a:hover {background-color: var(--primary-darkorange); border-color: var(--primary-darkorange);}
    .buttonBox button.navy:hover, .buttonBox a.navy:hover {background-color: var(--primary-darknavy); border-color: var(--primary-darknavy);}
    .buttonBox button.gray:hover, .buttonBox a.gray:hover {background-color: var(--gray-200); border-color: var(--gray-200); color: var(--main-font);}
    .buttonBox button.navyLine:hover, .buttonBox a.navyLine:hover {background-color: transparent; border-color: var(--primary-navy); color: var(--navy-font);}
    .buttonBox button.orangeLine:hover, .buttonBox a.orangeLine:hover {background-color: var(--orange-100); border-color: var(--primary-orange); color: var(--primary-orange);}
    .buttonBoxLine button:hover, .buttonBoxLine a:hover {color: var(--primary-orange);}
    .tabButton .list li button:hover, .tabButton .list li a:hover {background-color: var(--gray-50); color: var(--main-font);}
    .tabButton .list li.on button:hover, .tabButton .list li.on a:hover {background-color: var(--white);}
    .brandList li:hover {border-radius: 7px; background-color: var(--bg);}
    .brandList li.on:hover button { border-color: var(--primary-orange); }
    .modelList li:hover {border-radius: 10px; background-color: var(--bg);}
    .modelList li.on:hover button { border-color: var(--primary-orange); }
    .purchaseTipBox.home .purchaseTipList ul li:hover .titleBox {text-decoration: underline;}
}

/* 푸터 */ 
.footer { background-color: var(--bg); color: var(--main-font);}
.footer .inner { padding: 30px 15px 75px 15px; text-align: center; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; background-color: var(--bg-white);}
.footer .inner .company { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px;}
.footer .inner .company span { text-align: center; word-break: keep-all; font-size: 13px; color: var(--gray-500);}
.footer .inner .info {text-align: center; word-break: keep-all;}
.footer .inner .info a {text-decoration: underline; color: var(--gray-500);}
.footer .inner .info .btnInquiry { margin-right: 10px; padding: 3px 9px; background-color: var(--gray-200); border-radius: 5px; font-size: 13px;}
.footer .inner .info .counsel { display: inline-block; margin-left: 10px; font-size: 15px;}
.footer .inner .info .counsel a {color: var(--main-font);}
.footer .topButton {position: fixed; bottom: 75px; right: 15px; background: var(--bg-white) url(../images/icons/icon_arrow_upward.svg) no-repeat center; background-size: 50%; width: 50px; height: 50px; box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 5px; border-radius: 50%; z-index: 10; font-size: 0; text-indent: -9999px;}
@media screen and (min-width:1000px){
    .footer .inner { align-items: flex-start; gap: 5px 15px; }
    .footer .inner .info {width: 100%;}
    .footer .inner .company {width: calc(50% - 7.5px); justify-content: flex-start;}
    .footer .inner .company span {text-align: left;}
    .footer .inner .topButton {bottom: 15px;}
}

/* 스플래쉬화면 */
.splash { text-align: center; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.logoBox img { width: 100px; margin-bottom: 30px;}
.functions { width: 200px; height: 120px; overflow: hidden; position: relative;}
.functions ul {  padding: 0; margin: 0; position: relative; width: 100%; height: 100%;}
.functions ul li { position: absolute; width: 100%; height: 100%; top: 0; opacity: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all 0.6s ease;}
.functions ul li img { width: 48px; height: 48px; margin-bottom: 6px;}
.functions ul li span { font-size: 16px; color: #FF6A05; font-weight: 700;}
.functions ul li.show { opacity: 1; z-index: 2; }
.functions ul li.hide {z-index: 1;}

/* 에러페이지 */
.wrapper[path="error"] .inner { max-width: 100%; padding: 0; display: flex; align-items: center; justify-content: center; }
.errorBox { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 420px; width: 100%; margin: 0 auto; padding: 40px 15px; height: calc(100vh - 60px);}
.errorBox .icon {width: 150px;height: 150px; background:url(../images/icons/icon_error.svg) no-repeat center/contain;}
.errorBox .title { font-size: 20px; margin-bottom: 15px;}
.errorBox .message { position: relative; margin-bottom: 15px; padding-left: 15px; font-weight: 700; color: var(--primary-orange);}
.errorBox .message::before { position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 6px; height: 60%; background-color: var(--primary-orange); border-radius: 5px;}
.errorBox .notice {text-align: center; color: var(--gray-500); font-weight: 500; letter-spacing: -.5px; font-size: 13px; word-break: keep-all;}
@media screen and (min-width:800px){
    .wrapper[path="error"] .inner {background-color: var(--gray-50);}
    .errorBox { padding: 40px 30px; border-radius: 20px;}
}

/* 스케치 */
/* 스케치 - 모바일 툴바 */
.miniToolbar { position:fixed; left:50%; bottom: 20px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:8px 10px; background:#fff; border:1px solid var(--gray-300); border-radius: 30px; box-shadow:0 4px 20px rgba(0,0,0,.12); z-index:49;}
.miniToolbar button {position:relative; width:36px; height:36px; border:1px solid var(--gray-300); border-radius:50%; background:#fff; font-size:0; flex-shrink:0;}
.miniToolbar .currentPen {background: url(../images/icons/modeP.png) no-repeat center/contain;}
.miniToolbar .currentSize::before {content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--main-font); border-radius:30px;}
.miniToolbar .currentSize.size1::before {width:18px; height:2px;}
.miniToolbar .currentSize.size2::before {width:18px; height:5px;}
.miniToolbar .currentSize.size3::before {width:18px; height:8px;}
.miniToolbar .currentColor{ --current-color: var(--current-color);}
.miniToolbar .currentColor::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:18px;height:18px;border-radius:50%;background:var(--current-color);}
.miniToolbar .toggleSketch {background:#fff url(../images/icons/icon_arrowdown.svg) no-repeat center/22px; transform: rotate(180deg);}
.miniToolbar .toggleSketch.on {transform:rotate(180deg);}
.miniToolbar #endSketch {position:relative; top:auto; right:auto; width:36px; height:36px; border:1px solid var(--gray-300); border-radius:50%; background:#fff url(../images/icons/icon_close_dark.svg) no-repeat center/18px; background-size:14px; text-indent:-9999px;}

/* 스케치 모바일 웹 공통 */
#endSketch { position: absolute; right: 10px; top: 10px; width: 35px; height: 35px; background: url(../images/icons/icon_close_dark.svg) no-repeat center; background-size: 60%; font-size: 0; z-index: 52; text-indent: -9999px;}
.sketchWrap { position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--white); border-left: 1px solid var(--gray-300); box-shadow:-8px 0 20px rgba(0,0,0,.08); border-left: 1px solid var(--gray-300); z-index: 60; border-radius: 30px 30px 0 0;}
.sketchWrap .pen { position: absolute; bottom: 75px; right: 15px; width: 50px; height: 50px; border-radius: 50%; background: url(../images/icons/sketchPen.png) no-repeat center/contain; font-size:0; box-shadow:0 4px 20px rgba(0,0,0,.12); }
.sketchWrap .modeP{background-image:url(../images/icons/modeP.png);}
.sketchWrap .modeH{background-image:url(../images/icons/modeH.png);}
.sketchBox { position: relative; z-index: 51; background-color: var(--white); width: 100%; margin-top: 15px; display: flex; flex-direction: column; gap: 20px; padding: 20px;} 
.sketchBox .currentPen {display: none;}
.sketchBox .closeSketch { position: absolute; top: -6px; right: 16px; width:36px; height:36px;background: url(../images/icons/icon_close_dark.svg) no-repeat center; background-size: 55%; text-indent:-9999px; font-size: 0;}
.sketchBox .lineSize, .sketchBox .penColorBox, .sketchBox .btnAction {display: flex; align-items: center; gap:10px; position:relative;}
.sketchBox .lineSize button {width: 50px; height: 35px; border:1px solid var(--gray-300); border-radius: 10px; background-color:#fff; position:relative; } 
.sketchBox .lineSize button.on {border-color: #5383E5;}
.sketchBox .lineSize #size1, .sketchBox .lineSize #size2, .sketchBox .lineSize #size3{font-size:0;}
.sketchBox .lineSize #size1::after, .sketchBox .lineSize #size2::after, .sketchBox .lineSize #size3::after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: var(--main-font); border-radius: 30px;}
.sketchBox .lineSize #size1::after {width: 24px; height: 2px;}
.sketchBox .lineSize #size2::after {width: 24px; height: 5px;}
.sketchBox .lineSize #size3::after {width: 24px; height: 8px;}
.sketchBox .penColor { width:50px; height: 35px; border:1px solid var(--gray-300);border-radius: 10px; background-color: #fff; position: relative; }
.sketchBox .penColor::after {content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width: 18px;height: 18px; border-radius: 50%;}
.sketchBox .penColor[value="#fdca16"]::after{background-color:#fdca16;}
.sketchBox .penColor[value="#55cc28"]::after{background-color:#55cc28;}
.sketchBox .penColor[value="#e52885"]::after{background-color:#e52885;} 
.sketchBox .penColor[value="#1593fe"]::after{background-color:#1593fe;}
.sketchBox .penColor[value="#fd6215"]::after{background-color:#fd6215;}
.sketchBox .penColor[value="#8300f8"]::after{background-color:#8300f8;}
.sketchBox .penColor.on {border-color: #5383E5;}
.sketchBox .btnAction button {position:relative; width: 50px; height: 35px; border: 1px solid var(--gray-300); flex: 1; border-radius:10px; margin-bottom: 20px; background:#fff no-repeat center/20px;font-size:0;overflow:visible;transition:.2s;}
.sketchBox .btnAction .undo{background-image:url(../images/icons/icon_undo.svg);}
.sketchBox .btnAction .redo{background-image:url(../images/icons/icon_redo.svg);}
.sketchBox .btnAction .eraser{background-image:url(../images/icons/icon_del_dark.svg);}
.sketchBox .btnAction .undo::after{content:"이전";}
.sketchBox .btnAction .redo::after{content:"되돌리기";}
.sketchBox .btnAction .eraser::after{content:"전체 삭제";}
.sketchBox .btnAction button::after{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);width:max-content;font-size:11px;line-height:1;color:var(--gray-500);white-space:nowrap;}
 
@media screen and (min-width:430px){
    .sketchBox .penColorBox::before{content:"색상"; font-size:12px; color:var(--gray-500);}
    .sketchBox .lineSize::before {content: '굵기'; font-size:12px; color:var(--gray-500);}
    
}
@media screen and (min-width:600px){
    .sketchWrap .pen {margin-left: 235px; right: unset; left: 50%;}
    
}
@media screen and (min-width:800px){
    .sketchWrap { top:50%; left:50%; bottom:auto; width: 80px; transform:translateY(-50%); margin-left:300px; padding:0;background:transparent;border:0;border-radius:0;box-shadow:none; height: 100%; }
    .sketchWrap .pen {border-left: 1px solid var(--gray-300); margin-right: 85px; margin-left: unset; left: unset; right: 15px;}
    .sketchBox { align-items: center; width:80px;margin:0;padding:0; padding: 15px 0; border-radius: 0; height: 100%; border-left: 1px solid var(--gray-300); }
    .sketchBox .currentPen {display: block; width: 50px; height: 50px; border-radius:10px; font-size:0; background: url(../images/icons/modeP.png) no-repeat center/contain; background-repeat:no-repeat; background-size: contain; background-position:center;}
    .sketchBox .currentPen.modeH {background-image:url(../images/icons/modeH.png);}
    .sketchBox .currentPen.modeP {background-image:url(../images/icons/modeP.png);}
    .sketchBox .closeSketch {position: unset; }
    .sketchBox .btnAction::before{content:"지우기";font-size:12px; color:var(--gray-500);}
    .sketchBox .lineSize, .sketchBox .penColorBox, .sketchBox .btnAction {flex-direction: column;}
    .sketchBox .btnAction {margin-top: auto;}
    .sketchBox .btnAction button {flex: auto;}
}