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

/* 공통 */
.point {color: var(--color-primary);}
.real-cont article {line-height: 1.2;}

/* about 공통 */
.about > section + section {margin-top: var(--space-150);}
.about .head {display: flex; align-items: flex-start; gap: var(--space-10); position: relative; padding-left: 20px; line-height: 1.2;}
.about .head::before {content: ''; position: absolute; top: .15em; left: 0; width: 10px; height: 10px; background: var(--color-primary);}
.about .head .tit {font-size: var(--font-size-40); font-weight: 600; color: #121212;}
.about header .num {display: inline-flex; align-items: center; justify-content: center; width: clamp(32px, calc(40 / var(--inner) * 100vw), 40px); height: clamp(32px, calc(40 / var(--inner) * 100vw), 40px); flex-shrink: 0; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: var(--font-size-16); font-weight: 600;}
.about .card-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-20); margin-bottom: 0;}
.about .card-list .card {display: flex; flex-direction: column; align-items: center; gap: var(--space-20); padding: var(--space-40); border: 1px solid #ddd; text-align: center;}
.about .card-list .icon {display: block; width: clamp(28px, calc(32 / var(--inner) * 100vw), 32px); height: clamp(28px, calc(32 / var(--inner) * 100vw), 32px);}
.about .card-list .icon img {width: 100%; height: 100%; object-fit: contain;}
.about .card-list .tit {font-size: var(--font-size-22); color: #121212;}
.about .box {display: flex; align-items: center; justify-content: center; min-height: 80px; padding: var(--space-30); background: #fff; box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.16); font-size: var(--font-size-22); font-weight: 600; color: var(--color-primary); text-align: center;}
.about .list {display: flex; flex-direction: column; gap: var(--space-100); margin-top: var(--space-30);}
.about .item {display: flex; flex-direction: column;}
.about .item-head {display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; gap: var(--space-20) var(--space-30); align-items: center;}
.about .item-head .info {display: contents;}
.about .item-head .num {grid-column: 1; grid-row: 1; align-self: center;}
.about .item-head .name {grid-column: 2; grid-row: 1; font-weight: 600; color: #121212;}
.about .item-head .sub {grid-column: 2; grid-row: 2; align-self: start; font-size: var(--font-size-22); font-weight: 600; color: #121212;}
.about .item-head .desc {grid-column: 2; grid-row: 3; align-self: start; font-size: var(--font-size-18); line-height: 1.67;}
.about .img img {width: 100%; height: 100%; object-fit: cover;}
.about .band {position: relative; margin-top: var(--space-30); padding: var(--space-120) 0; overflow: hidden;}
.about .band .txt-wrap {position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-40); text-align: center; color: #fff;}
.about .band .desc {font-size: var(--font-size-20); line-height: 1.6;}
.about .band .lead {font-size: var(--font-size-28); font-weight: 600; color: #fff;}
.about .band .txt {font-size: var(--font-size-20);}
.about .flow-list {display: flex; align-items: center;}
.about .flow-list .oval {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-20); flex: 1; min-width: 0; height: clamp(140px, calc(210 / var(--inner) * 100vw), 210px); margin-right: calc(clamp(15px, calc(25 / var(--inner) * 100vw), 25px) * -1); padding: var(--space-30) var(--space-50); border: 1px solid var(--color-primary); border-radius: 200px; text-align: center;}
.about .flow-list .oval:last-child {margin-right: 0;}
.about .flow-list .step {font-size: var(--font-size-18); color: var(--color-primary);}
.about .flow-list .label {font-size: var(--font-size-22); color: #121212;}
.about .note {display: flex; align-items: center; justify-content: center; min-height: 80px; padding: var(--space-30); background: #f8f7f5; font-size: var(--font-size-22); font-weight: 600; color: var(--color-primary); text-align: center;}
.about .band {background: url('/images/sub/about-vision.jpg') no-repeat center / cover;}

/* 브랜드스토리 */
.story .sec1 .img {display: block; width: 100%; height: clamp(180px, calc(363 / var(--inner) * 100vw), 363px); overflow: hidden;}
.story .sec1 .intro {display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-40); margin-top: var(--space-50);}
.story .sec1 .intro .head {padding-left: 0;}
.story .sec1 .intro .head::before {content: none;}
.story .sec1 .intro .head .tit {font-size: var(--font-size-40); font-weight: 600; line-height: 1.4; color: #121212;}
.story .sec1 .intro .desc {width: 53.572%; display: flex; flex-direction: column; gap: var(--space-30);}
.story .sec1 .intro .desc .txt {font-size: var(--font-size-18); line-height: 1.67;}
.story .sec1 .intro .desc .lead {font-size: var(--font-size-24); font-weight: 700; color: var(--color-primary); letter-spacing: -0.03em;}
.story .sec2 .item-head .name {font-size: var(--font-size-32);}
.story .sec2 .item:nth-child(n+2) .item-head .name {font-size: var(--font-size-28);}
.story .sec2 .item .card-list {margin-top: var(--space-30);}
.story .sec2 .item .box {margin-top: var(--space-40);}
.story .sec3 .value-list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-50); margin-top: var(--space-30);}
.story .sec3 .value-list .item {display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-60) var(--space-50); border-top: 1px solid #878787;}
.story .sec3 .value-list .item:nth-child(n+3) {border-bottom: 1px solid #878787;}
.story .sec3 .value-list .num {width: clamp(40px, calc(50 / var(--inner) * 100vw), 50px); height: clamp(16px, calc(19 / var(--inner) * 100vw), 19px); border-radius: 0;}
.story .sec3 .value-list .tit {font-size: var(--font-size-22); font-weight: 600; color: #121212;}
.story .sec3 .value-list .desc {font-size: var(--font-size-18); line-height: 1.56;}

/* Safety-61 */
.safety .sec1 .head {padding-left: 0; justify-content: center; text-align: center;}
.safety .sec1 .head::before {content: none;}
.safety .sec1 .head .tit {font-size: var(--font-size-28);}
.safety .sec1 .desc {display: flex; flex-direction: column; gap: 0; margin-top: var(--space-30); text-align: center;}
.safety .sec1 .desc .txt {font-size: var(--font-size-18); line-height: 1.78;}
.safety .sec2 .visual {position: relative; margin-top: var(--space-30);}
.safety .sec2 .visual .img {display: block; width: 100%; height: clamp(180px, calc(307 / var(--inner) * 100vw), 307px); overflow: hidden;}
.safety .sec2 .visual .card {display: flex; flex-direction: column; gap: var(--space-30); width: 85.715%; padding: var(--space-50) var(--space-30); background: #fff; text-align: center; margin: 0 auto; margin-top: calc(clamp(40px, calc(94 / var(--inner) * 100vw), 94px) * -1); position: relative;}
.safety .sec2 .visual .card .lead {font-size: var(--font-size-28); font-weight: 600; color: #121212;}
.safety .sec2 .visual .card .txt {font-size: var(--font-size-18); line-height: 1.67;}
.safety .sec3 .item {gap: var(--space-50);}
.safety .sec3 .item-head .name {font-size: var(--font-size-28);}
.safety .sec4 .band .txt-wrap {gap: var(--space-20);}
.safety .sec4 .band .txt {font-size: var(--font-size-18); line-height: 1.67;}
.safety .sec4 .band .lead {font-size: var(--font-size-24); line-height: 1.75; font-weight: 400;}

/* 인증 및 자격과 기술 */
.cert .head {flex-direction: column; gap: var(--space-15); align-items: flex-start;}
.cert .head .en {font-size: var(--font-size-18); color: #121212;}
.cert .head .desc {margin-top: var(--space-10); font-size: var(--font-size-18); line-height: 1.78;}
.cert .head .lead {margin-top: var(--space-10); font-size: var(--font-size-22); font-weight: 600; color: #121212;}
.cert .sec1 .head {padding-left: 0; align-items: center; text-align: center;}
.cert .sec1 .head::before {content: none;}
.cert .sec1 .head .tit {font-size: var(--font-size-28);}
.cert .sec1 .desc {margin-top: var(--space-30); text-align: center;}
.cert .sec1 .desc .txt {font-size: var(--font-size-18); line-height: 1.78;}
.cert .sub-tit {margin-top: var(--space-50); font-size: var(--font-size-32); font-weight: 600; color: #121212;}
.cert .sec2 .sub-tit {margin-top: var(--space-100);}
.cert .cert-list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-30); margin-top: var(--space-30);}
.cert .cert-list .item {display: flex; flex-direction: row; gap: var(--space-30); padding: var(--space-20) var(--space-50); background: #fff; box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.1); align-items: center;}
.cert .cert-list .num {font-size: var(--font-size-56); font-weight: 600; color: rgba(163, 139, 119, 0.25); font-variant-numeric: tabular-nums; letter-spacing: -0.03em;}
.cert .cert-list .label {font-size: var(--font-size-22); color: #121212;}
.cert .info {display: flex; gap: var(--space-10); margin-top: var(--space-30); padding: var(--space-40) var(--space-30); background: #f8f7f5; justify-content: center;}
.cert .info .icon {display: block; width: clamp(24px, calc(28 / var(--inner) * 100vw), 28px); height: clamp(24px, calc(28 / var(--inner) * 100vw), 28px); margin-top: -0.25em;}
.cert .info .icon img {width: 100%; height: 100%; object-fit: contain;}
.cert .info p {font-size: var(--font-size-18);}
.cert .patent-box {margin-top: var(--space-30); padding: var(--space-50); background: #f4f4f4;}
.cert .patent-box p {font-size: var(--font-size-18); line-height: 1.67; margin-bottom: var(--space-30);}
.cert .patent-box p strong {font-weight: 600; color: #121212;}
.cert .patent-box p:last-child {margin-bottom: 0;}
.cert .license-list {display: flex; gap: 30px; margin-top: var(--space-30);}
.cert .license-list .item {display: flex; flex-direction: column; text-align: center; align-items: center;}
.cert .license-list .thumb {display: block; width: clamp(200px, calc(300 / var(--inner) * 100vw), 300px); overflow: hidden; position: relative; margin-bottom: var(--space-30);}
.cert .license-list .thumb::after {content: ''; position: absolute; inset: 0; z-index: 1; border: 1px solid #ddd;}
.cert .license-list .thumb img {width: 100%; height: 100%; object-fit: contain;}
.cert .license-list .num {font-size: var(--font-size-18); color: #121212; margin-bottom: var(--space-10);}
.cert .license-list .name {font-size: var(--font-size-18); font-weight: 600; color: #121212;}
.cert .list {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-60); margin-top: var(--space-50);}
.cert .list li {display: flex;}
.cert .list .item {display: flex; flex: 1; min-width: 0;}
.cert .list .thumb {display: block; width: clamp(200px, calc(300 / var(--inner) * 100vw), 300px); overflow: hidden; position: relative;}
.cert .list .thumb::after {content: ''; position: absolute; inset: 0; z-index: 1; border: 1px solid #ddd;}
.cert .list .thumb img {width: 100%; height: 100%; object-fit: contain;}
.cert .list .txt-wrap {display: flex; flex: 1; padding: var(--space-50) var(--space-30); background: #f4f4f4; align-items: center; justify-content: center; text-align: center;}
.cert .list .txt-wrap p {font-size: var(--font-size-18); line-height: 1.56;}
.cert .list li:last-child .item {max-width: 670px;}

/* 전문가 그룹 */
.group .list {display: flex; flex-direction: column; gap: var(--space-120);}
.group .item {display: flex; gap: var(--space-80); align-items: center;}
.group .img {display: block; flex: 1; min-width: 0; height: clamp(280px, calc(481 / var(--inner) * 100vw), 481px); overflow: hidden; position: relative;}
.group .img::after {content: ''; position: absolute; inset: 0; z-index: 1; border: 1px solid #ddd;}
.group .img img {width: 100%; height: 100%; object-fit: cover;}
.group .info {display: flex; flex-direction: column; gap: var(--space-20); flex: 1; min-width: 0;}
.group .head {display: flex; gap: var(--space-18); padding-bottom: var(--space-20); border-bottom: 1px solid #ddd; align-items: center;}
.group .head .tit {font-size: var(--font-size-40); font-weight: 700; color: #121212;}
.group .head .en {font-size: var(--font-size-18); color: var(--color-primary);}
.group .role {font-size: var(--font-size-28); font-weight: 600; color: var(--color-primary); line-height: 1.43;}
.group .desc {display: flex; flex-direction: column; gap: var(--space-16);}
.group .desc li {display: flex; gap: var(--space-10); font-size: var(--font-size-22); line-height: 1.45; align-items: flex-start; padding-left: 15px; position: relative;}
.group .desc li::before {content: ''; position: absolute; width: 5px; height: 5px; top: 0.55em; left: 0; border-radius: 50%; background: var(--color-primary);}

/* service 공통 */
.service > section + section {margin-top: var(--space-80);}
.service .sec2 {margin-top: var(--space-80);}
.service .sec1 .head .tit {font-size: var(--font-size-32); font-weight: 600; color: #121212; text-align: center;}
.service .sec1 .desc {margin-top: var(--space-30); line-height: 1.78; text-align: center;}
.service .sec1 .desc .txt {font-size: var(--font-size-18);}
.service .card-list {display: flex; gap: var(--space-25);}
.service .card-list .item {display: flex; flex-direction: column; gap: var(--space-20); flex: 1; min-width: 0; padding: var(--space-50) var(--space-40); border: 1px solid #ddd; align-items: flex-end;}
.service .card-list .head {display: flex; flex-direction: column; gap: var(--space-20); width: 100%;}
.service .card-list .num {display: inline-flex; width: clamp(40px, calc(50 / var(--inner) * 100vw), 50px); height: clamp(16px, calc(19 / var(--inner) * 100vw), 19px); background: var(--color-primary); color: #fff; font-size: var(--font-size-16); font-weight: 600; align-items: center; justify-content: center;}
.service .card-list .tit {font-size: var(--font-size-22); font-weight: 600; color: #121212; text-align: left;}
.service .card-list .txt {font-size: var(--font-size-18); line-height: 1.56; width: 100%; margin-bottom: auto;}
.service .card-list .note {font-size: var(--font-size-16); line-height: 1.625;}
.service .card-list .note strong {font-weight: 600; color: var(--color-primary);}
.service .card-list .img {display: block; width: clamp(64px, calc(80 / var(--inner) * 100vw), 80px); aspect-ratio: 1/1; margin-top: var(--space-30);}
.service .card-list .img img {width: 100%; height: 100%; object-fit: contain;}

/* 드론 외벽 세척 */
.clean .card-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-30);}
.clean .sec3 .head {margin-bottom: var(--space-30);}
.clean .sec3 .tit {font-size: var(--font-size-32); font-weight: 700; color: #121212; text-align: left;}
.clean .compare {display: grid; grid-template-columns: repeat(2, 1fr);}
.clean .compare .box {display: grid; grid-template-rows: repeat(5, minmax(var(--space-100), auto));}
.clean .compare .label {display: flex; align-items: center; justify-content: center; min-height: var(--space-100); padding: var(--space-10); border-bottom: 1px solid #ddd; background: #fafafa; font-size: var(--font-size-22); font-weight: 700; text-align: center;}
.clean .compare .txt {display: flex; align-items: center; justify-content: center; min-height: var(--space-100); padding: var(--space-10); border-bottom: 1px dashed #ddd; background: #fafafa; font-size: var(--font-size-18); text-align: center;}
.clean .compare .box.point {border: 2px solid var(--color-primary); box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25);}
.clean .compare .box.point .label {background: #fff; color: var(--color-primary);}
.clean .compare .box.point .txt {background: #fff; font-weight: 600; color: #121212;}
.clean .compare .box .txt:last-child {border-bottom: 0;}

/* 특수시설관리 */
.facility .card-list {margin-top: var(--space-60);}
.facility .band {position: relative; padding: var(--space-100) 0; overflow: hidden; background: url('/images/sub/facility-bg.jpg') no-repeat center / cover;}
.facility .band .txt-wrap {position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-30); text-align: center; color: #fff;}
.facility .band .lead {font-size: var(--font-size-32); font-weight: 700; color: #fff;}
.facility .band .desc {font-size: var(--font-size-20); line-height: 1.6;}
.facility .band .btn {display: inline-flex; align-items: center; justify-content: center; gap: var(--space-20); height: var(--space-60); padding: var(--space-20) var(--space-30); border: 1px solid #121212; border-radius: var(--radius-50); background: #fff; font-size: var(--font-size-18); font-weight: 600; color: #121212; text-decoration: none;}
.facility .band .btn .arrow {display: flex; align-items: center; justify-content: center; width: 6px; height: 11px; transition: .2s;}
.facility .band .btn svg {width: 100%; height: 100%; object-fit: contain;}
.facility .band .btn:hover .arrow {transform: translateX(5px);}

/* 드론 도입 효과 */
.effect .cost {display: flex; align-items: stretch; gap: var(--space-40);}
.effect .cost .box {flex: 1; min-width: 0;}
.effect .cost .label {display: flex; align-items: center; justify-content: center; min-height: var(--space-100); padding: var(--space-30); font-size: var(--font-size-22); font-weight: 600; color: #fff; text-align: center;}
.effect .cost .box.old .label {background: #878787;}
.effect .cost .box.point .label {background: var(--color-primary);}
.effect .cost .item {display: grid; grid-template-columns: 1fr auto; gap: var(--space-18) var(--space-10); padding: var(--space-30) var(--space-20); border-bottom: 1px dashed #ddd; background: #fff;}
.effect .cost .name {font-size: var(--font-size-18);}
.effect .cost .stat {font-size: var(--font-size-18);}
.effect .cost .stat.bad {color: #ba3939;}
.effect .cost .stat.good {color: #4fba39;}
.effect .cost .bar {display: block; grid-column: 1 / -1; width: 100%; height: var(--space-16); border-radius: var(--radius-30); background: #eee; overflow: hidden;}
.effect .cost .fill {display: block; height: 100%; border-radius: 30px; width: 0; transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1) .3s;}
.effect .cost .fill.bad {background: #ba3939;}
.effect .cost .fill.good {background: #4fba39;}
.effect .cost.is-visible .old .item1 .fill {width: 84.1%;}
.effect .cost.is-visible .old .item2 .fill {width: 84.1%;}
.effect .cost.is-visible .old .item3 .fill {width: 93.6%;}
.effect .cost.is-visible .old .item4 .fill {width: 93.6%;}
.effect .cost.is-visible .point .item1 .fill {width: 53%;}
.effect .cost.is-visible .point .item2 .fill {width: 23.4%;}
.effect .cost.is-visible .point .item3 .fill {width: 10%;}
.effect .cost.is-visible .point .item4 .fill {width: 3.4%;}
.effect .cost .img.arrow {display: flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: center; width: 18px; aspect-ratio: auto;}
.effect .cost .img.arrow img {width: 100%; height: auto; object-fit: contain;}

.effect .note {display: flex; gap: var(--space-60); padding: var(--space-40); background: #f9f9f9;}
.effect .note .img {display: block; width: clamp(80px, calc(100 / var(--inner) * 100vw), 100px); aspect-ratio: 1/1; flex-shrink: 0; margin-bottom: auto;}
.effect .note .img img {width: 100%; height: 100%; object-fit: contain;}
.effect .note .txt-wrap {display: flex; flex-direction: column; gap: var(--space-20); flex: 1;}
.effect .note .lead {font-size: var(--font-size-28); font-weight: 600; color: var(--color-primary);}
.effect .note .txt {font-size: var(--font-size-18); line-height: 1.67;}

/* 상담안내 */
.guide .info {margin-bottom: var(--space-50); display: flex; gap: var(--space-20);}
.guide .info .item {display: flex; flex-direction: column; flex: 1; min-width: 0; padding: var(--space-20) var(--space-30); background: #f8f7f5;}
.guide .info .icon {display: flex; align-items: center; justify-content: center; align-self: flex-end; width: clamp(40px, calc(48 / var(--inner) * 100vw), 48px); height: clamp(40px, calc(48 / var(--inner) * 100vw), 48px); margin-bottom: var(--space-20); border-radius: 80px; background: var(--color-primary);}
.guide .info .icon img {width: clamp(20px, calc(24 / var(--inner) * 100vw), 24px); height: clamp(20px, calc(24 / var(--inner) * 100vw), 24px); object-fit: contain; user-select: none;}
.guide .info .tit {margin-bottom: var(--space-20); font-size: var(--font-size-28); font-weight: 600; color: #121212; line-height: 1;}
.guide .info .desc {font-size: var(--font-size-18); color: #505050; line-height: 1.56;}