@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
    --docu-bg-gray : #f4f4f4; 
}
.docuMain.gray{ /* 회색 */
    --docu-line-dark: #7b7b7b;
    --docu-line-light: #bfbfbf; 
    --docu-bg-light: #f7f7f7;
    --docu-bg-dark: #e5e5e5;
    --docu-color-accent: #000000;
}
.docuMain.bule{ /* 청색 */
    --docu-line-dark: #035ea9;
    --docu-line-light: #9ab9d3; 
    --docu-bg-light: #eaf2fb;
    --docu-bg-dark: #d0e3f5;
    --docu-color-accent: #f05a00;
}
.docuMain.orange{ /* 주황 */
    --docu-line-dark: #ff7a00;
    --docu-line-light: #f0ceaf; 
    --docu-bg-light: #fbf5ed;
    --docu-bg-dark: #f4e3d3;
    --docu-color-accent: #ff0000;
}
.docuMain.green{ /* 녹색 */
    --docu-line-dark: #627f25;
    --docu-line-light: #d8decc; 
    --docu-bg-light: #f3f8e8;
    --docu-bg-dark: #d7e4bb;
    --docu-color-accent: #ff6000;
}
.docuMain.cyan{ /* 담청 */
    --docu-line-dark: #178eb2;
    --docu-line-light: #d5e0e3; 
    --docu-bg-light: #effbff;
    --docu-bg-dark: #d2eaf1;
    --docu-color-accent: #ff6000;
}
.docuMain.brown{ /* 갈색 */
    --docu-line-dark: #9a5333;
    --docu-line-light: #e8d8c5; 
    --docu-bg-light: #fcf9f2;
    --docu-bg-dark: #f5ede2;
    --docu-color-accent: #ff6000;
}
.docuMain.pink{ /* 분홍 */
    --docu-line-dark: #eb6877;
    --docu-line-light: #f3ccdd; 
    --docu-bg-light: #fdf3f4;
    --docu-bg-dark: #f1e0e2;
    --docu-color-accent: #fc1200;
}
.docuMain.purple{ /* 보라 */
    --docu-line-dark: #71368e;
    --docu-line-light: #d8c8de; 
    --docu-bg-light: #f8f1fb;
    --docu-bg-dark: #ece0f1;
    --docu-color-accent: #f30000;
}
.docuMain.hana{ /* 청록 */
    --docu-line-dark: #00907f;
    --docu-line-light: #d5e0e3; 
    --docu-bg-light: #e3f7f5;
    --docu-bg-dark: #c1efea;
    --docu-color-accent: #ff6000;
}

/* 공통 */
.docuMain { background-color: #FFF; border: 1px solid #E5EAF1; border-radius: 10px; padding: 15px; text-align: left; font-size: 13px; color: #333;  width: 100%; -webkit-font-smoothing: antialiased; backface-visibility: hidden; overflow: hidden;}
.docuMain .dualBox > div, .docuMain .tripleBox > div { display: inline-block; }
.docuMain .accent { color: var(--docu-color-accent); }
.docuMain table { font-size: 13px; width: 100%; border-spacing: 0; letter-spacing: -.5px; border-collapse: collapse; white-space: normal; } 
.docuMain .bgL {background-color: var(--docu-bg-light)}
.docuMain .bgD {background-color: var(--docu-bg-dark);} 
.docuMain .head::after, .docuMain .vehicle::after, .docuMain .body::after, .docuMain .foot::after { content: ''; display: table; clear: both;}

/* 상단 head */
.docuMain .head { border-bottom: 2px solid var(--docu-line-dark); margin-bottom: 15px; }
.docuMain .head.dualBox .left { width: 60%; float: left; text-align: left;}
.docuMain .head.dualBox .right { width: 40%; background: var(--docu-bg-gray); padding: 5px; border-radius: 2px; }
.docuMain .head.singleBox .title { text-align: center; }
.docuMain .head.singleBox .between { display: table; width: 100%; margin-bottom: 5px; }
.docuMain .head.singleBox .between > * { display: table-cell; vertical-align: middle; }
.docuMain .head.singleBox .date { text-align: right; }
.docuMain .head .title { font-size: 30px; letter-spacing: 5px; }
.docuMain .head .cmagInfo { border-top: 2px solid var(--docu-line-dark); }
.docuMain .head .cmagInfo > div { display: table; width: 100%; padding: 5px 10px; border-top: 1px solid var(--docu-line-light); }
.docuMain .head .cmagInfo > div:first-child { border-top: none; }
.docuMain .head .cmagInfo > div .item { display: table-cell; width: 60px; } 
.docuMain .head .photo > img { width: 100px; max-width: unset; display: block; } 
.docuMain .head table.card .colL { width: 30%; }
.docuMain .head table.photo .colR { width: 100%; }

/* 차량정보 */ 
.docuMain .vehicle.wImage { width: 100%; overflow: hidden; }
.docuMain .vehicle.wImage::after {content: ''; display: table; clear: both;}
.docuMain .vehicle.wImage .image { float: left; width: 45%; }
.docuMain .vehicle.wImage .choice { float: right; width: 55%; }
.docuMain .vehicle.wImage .image .desc { font-size: 12px; color: #999; text-align: center; }
.docuMain .vehicle.wImage .image img { margin: 0 auto; display: block; width: 260px; }
.docuMain .vehicle .choice > div { display: table; width: 100%; border-bottom: 1px solid var(--docu-line-light); padding: 5px; }
.docuMain .vehicle .choice > div:last-child {border: none;}
.docuMain .vehicle .choice > div .title { width: 60px; text-align: center; display: table-cell; vertical-align: middle; } 
.docuMain .vehicle .choice > div .data { display: table-cell; font-size: 12px; text-align: right; padding: 5px; }
.docuMain .vehicle .total { clear: both; padding-top: 5px; text-align: right; width: 100%; }

/* 견적 정보 */
.docuMain .body {margin: 5px 0 10px 0;}
.docuMain .body .subject { font-size: 15px; font-weight: 700; padding: 3px; /* border-bottom: 2px solid var(--docu-line-dark); */ }
.docuMain .body.dualBox, .docuMain .body.tripleBox { width: 100%; overflow: hidden;}
.docuMain .body.dualBox::after , .docuMain .body.tripleBox::after { content: ''; display: table; clear: both; }
.docuMain .body.dualBox > div {float: left; width: 50%;}
.docuMain .body.dualBox > div:first-child {padding-right: 7.5px;}
.docuMain .body.dualBox > div:last-child {padding-left: 7.5px;}
.docuMain .body table.half .colL { width: 30%; }
.docuMain .body table.half .colR { width: 70%; }
.docuMain .body table.full .colL { width: 16%; } 
.docuMain .body table.full.len13 .colD { width: 28%; }
.docuMain .body table.full.len12 .colD { width: 42%; }
.docuMain .body table.full.len11 .colL { width: 30%; }
.docuMain .body table.full.len11 .colD { width: 70%; } 

.docuMain .body.tripleBox > div {float: left;  width: 33.333%;}
.docuMain .body.tripleBox > div:nth-child(1) {padding-right: 10px;}
.docuMain .body.tripleBox > div:nth-child(2) {padding: 0 5px;}
.docuMain .body.tripleBox > div:nth-child(3) {padding-left: 10px;}
.docuMain .body table.sche .colL { width: 10%; }
.docuMain .body table.sche .colD { width: 22.5%; } 
.docuMain .body table.sche th {padding: 5px;}
.docuMain .body table.sche td {padding: 5px 3px; letter-spacing: -.5px; text-align: center;}
.docuMain .body td .right { text-align: right; }
.docuMain .body td .left { text-align: left; }
.docuMain .body td .between { display: table; width: 100%; }
.docuMain .body td .between > * { display: table-cell; word-break: break-all; vertical-align: middle;} 
.docuMain .body td .between .desc {text-align: left; vertical-align: top; word-break: keep-all;}
.docuMain .body td .between .price {text-align: right; vertical-align: top;}  
.docuMain .body td .between .name {text-align: right; } 
.docuMain .body td img {max-width: 100px; display: block; margin: 0 auto; }
.docuMain .body td.list > div:first-child { border: none; } 
.docuMain .body td.list > div:not(:first-child) { border-top : 1px solid var(--docu-line-light); }
.docuMain .body table {border-top: 1px solid var(--docu-line-light); } 
.docuMain .body table.half .colR, .docuMain .body table.full .colD { border-left: 1px solid var(--docu-line-light); } 
.docuMain .body table tr td { padding: 5px; border-bottom: 1px solid var(--docu-line-light); }  
.docuMain .body table tr td b {display: inline-block;}
.docuMain .body table tr.lineD td, .docuMain .body table tr.lineD th { border-bottom: 1px solid var(--docu-line-dark); }  
.docuMain .body table .diff .list { border-bottom: none;}
.docuMain .body table .diff .list li {padding: 30px 10px 10px 10px;}
.docuMain .body table .diff .list li:last-child {padding: 30px 10px 5px 10px;}
.docuMain .body .diff .choice { width: 100%; border: 1px solid var(--docu-line-light); border-left: none; border-right: none; } 
.docuMain .body .diff .choice li { display: table; width: 100%; border-top: 1px solid var(--docu-line-light); } 
.docuMain .body .diff .choice li:first-child { border: none; }
.docuMain .body .diff .choice li span { display: table-cell; vertical-align: middle; word-break: break-all;} 
.docuMain .body .diff .choice li .title { background: var(--docu-bg-light); width: 70px; text-align: center; padding: 5px; } 
.docuMain .body .diff .choice li .data {padding: 5px; width: calc(100% - 70px); -webkit-text-size-adjust:100%; } 
.docuMain .body .diff .choice li .data img { display: block; max-width: 80px;}
.docuMain .body .diff .choice li .data.between {display: table; width: 100%;} 
.docuMain .body .diff .choice li .data.between .price {text-align: right;}
.docuMain .body .diff.len1 .choice li{ width: 100%;} 
.docuMain .body .diff.len1.halbu .choice li{ width: 100%; } 
.docuMain .body .diff .list { border-bottom: 1px solid var(--docu-line-light); } 
.docuMain .body .diff .list li { position: relative; padding: 30px 10px 5px 10px; border-top: 1px solid var(--docu-line-light);}
.docuMain .body .diff .list li:first-child { border: none; }
.docuMain .body .diff .list .logo {position: absolute; top: 5px; left: 6px;}
.docuMain .body .diff .list .logo img { max-width: 80px; }
.docuMain .body .diff .list .name { font-size: 12px; letter-spacing: -.5px; font-weight: 600; word-break: keep-all; display: inline-block; width: 50%; text-align: left;}
.docuMain .body .diff .list .price { position: absolute; top: 7px; right: 10px; font-weight: 700;}
.docuMain .body .diff .list .price .sub { font-weight: 400; font-size: 12px; }
.docuMain .body .diff .list .info {text-align: right; display: inline-block; width: 50%;}
.docuMain .body .diff .list .info .extra { font-weight: 400; font-size: 12px; }
.docuMain .body .diff.len1 .list li { padding: 5px 10px 5px 120px; }
.docuMain .body .diff.len1 .list .price { right: auto; } 
.docuMain .body .summary { display: table; width: 100%; border-top: 1px solid var(--docu-line-light); border-bottom: 1px solid var(--docu-line-light); }
.docuMain .body .summary li { display: table-cell; }
.docuMain .body .summary .title { height: 50px; width: 15%; vertical-align: middle; display: table-cell; background: var(--docu-bg-light); padding: 5px; text-align: center; border-bottom: 1px solid var(--docu-line-light); }
.docuMain .body .summary .data { display: block;  text-align: center; padding: 5px; }

/* 하단 foot */
.docuMain .foot.dualBox, .docuMain .foot.singleBox { margin-top: 10px; border: 1px solid var(--docu-line-light); border-left: none; border-right: none; position: relative; }
.docuMain .foot > div { width: 100%; display: block; }
.docuMain .foot .box { display: table; width: 100%;border-top: 1px solid var(--docu-line-light); }
.docuMain .foot .box:first-child { border: none; }
.docuMain .foot .box .title { display: table-cell; vertical-align: middle; width: 50px; text-align: center; padding: 5px; background-color: var(--docu-bg-light); }
.docuMain .foot .box .data {width: 100%; padding: 5px; }
.docuMain .foot .right .box { border-top: 1px solid var(--docu-line-light); }
.docuMain .foot.descBox {margin-top: 10px;}
.docuMain .foot.descBox div {word-break: keep-all;}

/* 견적서 여러 페이지일 때 */
.estmDocu .break-before:not(:last-child) { margin: 20px 0; padding-bottom: 10px; border-bottom: 1px dashed var(--primary-orange); }
.estmDocu .docuList { width: 100%; margin-top: 15px; background-color: var(--bg-white); border-radius: 10px; border: 1px solid var(--gray-300);}
.estmDocu .docuList > .title { position: relative; padding: 15px; width: 100%; text-align: left; }
.estmDocu .docuList > .title::after {position: absolute; content: ''; top: 50%; right: 15px; transform: translateY(-50%); width: 24px; height: 24px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain; }
.estmDocu .docuList > .title.down::after {transform: translateY(-50%) rotate(180deg);}
.estmDocu .docuList.viewPage .docuPhoto, .estmDocu .docuList.viewPage .docuItem { border: 0 none; }
.estmDocu .docuList .docuPhoto, .estmDocu .docuList .docuItem {border: none; display: none; padding: 0 15px 15px 15px; text-align: left; font-size: 13px; color: #333;}
.estmDocu .docuList .docuPhoto.thumbs { text-align: center; margin-bottom: 20px; }
.estmDocu .docuList .docuPhoto.thumbs img { margin: 4px; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #bbb; border-right: 1px solid #bbb; cursor: pointer; }
.estmDocu .docuList .docuPhoto, .estmDocu .docuList .docuItem {border: none; display: none; padding: 15px; text-align: left; font-size: 13px; color: #333;}
/* 제원 */
.estmDocu .docuList .subject { position: relative; color: var(--navy-font); margin: 15px 0 5px;} 
.estmDocu .docuList .item dl .data dd {display: inline-block;}
.estmDocu .docuList .spec { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; } 
.estmDocu .docuList .spec > div {width: 100%;}
.estmDocu .docuList .spec .name {text-align: center; background-color: var(--gray-100); color: var(--navy-font); padding: 6px; font-weight: 700; border-radius: 10px; }
.estmDocu .docuList .spec dl {display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; padding: 0; gap: 0; color: var(--gray-500);}
.estmDocu .docuList .spec dl dt { font-size: 13px; text-align: center; border-bottom: 1px solid var(--gray-300); width: 40%; padding: 6px; word-break: keep-all; letter-spacing: -.5px;}
.estmDocu .docuList .spec dl dd { font-size: 13px; width: 60%; padding: 6px; text-align: center; border-bottom: 1px solid var(--gray-300);}
.estmDocu .docuList .spec .left dl:nth-of-type(1) {margin-bottom: 10px;} 

@media screen and (min-width: 600px) {
    .estmDocu .docuList .spec > div {width: calc(50% - 5px);}
}

 /* 모바일 견적서 */
@media (max-width: 770px) {
    .docuMain { zoom: calc(100vw / 770px);}
}

/*  아이폰 깨짐 대응 */
@supports (-webkit-touch-callout: none) {
    .docuBox {transform: scale(calc((100vw - 30px) / 770px)); width: 770px; transform-origin: top left;}
    .docuBox .docuMain { zoom : 1;} 
}

/* @media (max-width: 750px) {
    .docuBox .docuMain { zoom: .8; }
}

@media (max-width: 680px) {
    .docuBox .docuMain { zoom: .7; }
}

@media (max-width: 600px) {
    .docuBox .docuMain { zoom: .6; }
}

@media (max-width: 530px) {
    .docuBox .docuMain { zoom: .5; }
}

@media (max-width: 430px) {
    .docuBox .docuMain { zoom: .4; }
}  */