@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

/* 공통 */
.sub-section:not(:last-child) {margin-bottom: var(--space-120);}

.doc-tit {margin-bottom:var(--space-50); font-weight:600; font-size:var(--font-size-38); line-height:1.3em; color:#2c2c2c; letter-spacing:-.03em;}

/* ABOUT */
.greetings {color:#454545; font-size:var(--font-size-20); line-height:1.5em; letter-spacing:-.03em;}
.greetings h2 {margin-bottom:var(--space-40); color:#2c2c2c; font-size:var(--font-size-46);  font-weight:600; line-height:1.4em; letter-spacing:-.03em;}

.process {display:grid; grid-template-columns: repeat(3, 1fr); gap:var(--space-70) var(--space-40);}
.process .item {position:relative; padding:var(--space-40) var(--space-70); border-top:3px solid #ddd;}
.process .item .line {position:absolute; top:-3px; left:10px; right:10px; height:3px;}
.process .item .line span {position:absolute; top:0; left:0; height:100%; background:var(--color-primary);}
.process .item .line.step1 span {width:11%;}
.process .item .line.step2 span {width:22%;}
.process .item .line.step3 span {width:33%;}
.process .item .line.step4 span {width:44%;}
.process .item .line.step5 span {width:55%;}
.process .item .line.step6 span {width:66%;}
.process .item .line.step7 span {width:77%;}
.process .item .line.step8 span {width:88%;}
.process .item .line.step9 span {width:100%;}
.process .item .icon {margin-bottom:var(--space-10);}
.process .item .tit {margin-bottom:var(--space-20); font-weight:600; font-size:var(--font-size-26); line-height:1.3em; color:#2c2c2c; letter-spacing:-.03em;}
.process .item .desc {font-size:var(--font-size-20); line-height:1.5em; color:#454545; letter-spacing:-.03em;}

.direction-map .root_daum_roughmap {width:100% !important;}
.direction-map .root_daum_roughmap .wrap_map {height:clamp(240px, calc(440 / var(--inner) * 100vw), 440px) !important;}
.direction-map .root_daum_roughmap .cont {display:none !important;}

.direction-info {display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:30px; gap:var(--space-40);}
.direction-info .address {font-weight:600; font-size:var(--font-size-24); line-height:1.3em; color:#373737;}
.direction-info .contact {display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-20) var(--space-60);}
.direction-info .contact .item {color:#454545; line-height:1.5em;}
.direction-info .contact .item .label {font-weight:600; font-size:var(--font-size-18); color:var(--color-primary); margin-right:var(--space-30);}
.direction-info .contact .item .label:before {content:''; display:inline-block; vertical-align:middle; width:6px; height:6px; background:var(--color-primary); margin:-.2em var(--space-16) 0 0;}

/* 프로젝트 */
.project-list {display:grid; grid-template-columns: repeat(3, 1fr); gap:var(--space-40); margin-bottom:var(--space-80);}
.project-list .none {grid-column: 1 / -1; width:100%; padding:var(--space-100) 0; margin:0; text-align:center; color:#767676;}
.project-list .link-item {position:relative; border:1px solid #ddd; overflow:hidden;}
.project-list .link-item .thumb {position:relative; aspect-ratio:253/178; overflow:hidden;}
.project-list .link-item .thumb img {width:100%; height:100%; object-fit:cover; transition:.4s;}
.project-list .link-item .hover {position:absolute; inset:0; background:rgba(255, 255, 255, 0.8); display:flex; justify-content:center; align-items:center; opacity:0; transition:.2s;}
.project-list .link-item .more {color:var(--color-primary); border:1px solid var(--color-primary); padding:var(--space-15) var(--space-30); border-radius:60px; font-size:var(--font-size-16); line-height:1.3em;}
.project-list .link-item:hover .thumb img {transform:scale(1.1);}
.project-list .link-item:hover .hover {opacity:1;}

.project-heading {text-align:center; padding:var(--space-60) 0; display:flex; flex-direction:column; align-items:center; gap:var(--space-30);}
.project-heading .tit {font-weight:600; font-size:var(--font-size-34); line-height:1.4em; color:#2c2c2c; letter-spacing:-.03em;}
.project-heading .txt {font-size:var(--font-size-20); line-height:1.5em; color:#454545; letter-spacing:-.03em;}

.project-content {margin-bottom:var(--space-80);}

/* 문의폼 */
.inquiry-section {display:flex; flex-direction:column; align-items:center; gap:var(--space-60); max-width:900px; margin:0 auto;}
.inquiry-heading {text-align:center;}
.inquiry-heading h2 {font-weight:600; font-size:var(--font-size-46); line-height:1.3em; color:#2c2c2c; margin-bottom:var(--space-50);}
.inquiry-heading p {font-size:var(--font-size-20); line-height:1.5em; color:#454545;}
.inquiry-form {display:flex; flex-direction:column; gap:var(--space-32); width:100%;}
.inquiry-form .form-group {display:flex; flex-direction:column; gap:var(--space-20);}
.inquiry-form .form-group label {font-weight:600; font-size:var(--font-size-20); color:#2c2c2c;}
.inquiry-form .form-group label .required {color:#454545;}
.inquiry-form .form-group .input {width:100%; height:44px; padding:0 var(--space-16); border:1px solid #dddddd; border-radius:var(--radius-8); font-size:var(--font-size-16); line-height:1.5em; color:#2c2c2c; background:#fff;}
.inquiry-form .form-group textarea.input {height:clamp(180px, calc(300 / var(--inner) * 100vw), 300px); padding:var(--space-16); resize:none;}
.inquiry-form .form-group .captcha-wrap {display:flex; gap:var(--space-20); align-items:center;}
.inquiry-form .form-group .captcha-wra p .captcha-btn {width:140px; height:44px; padding:0; border:none; background:#e0e0e0; border-radius:var(--radius-8); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.inquiry-form .form-group .captcha-wrap .captcha-btn img {width:100%; height:100%; object-fit:contain;}
.inquiry-form .form-group .captcha-wrap .input {flex:1; width:auto;}
.inquiry-form .form-submit {display:flex; justify-content:center; margin-top:var(--space-20);}
.inquiry-form .form-agree {margin:0;}
.inquiry-form .btn-submit {width:160px; height:60px; border:1px solid var(--color-primary); border-radius:var(--radius-8); background:transparent; font-weight:700; font-size:var(--font-size-16); color:var(--color-primary); cursor:pointer; transition:.2s;}
.inquiry-form .btn-submit:hover {background:var(--color-primary); color:#fff;}