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

/* 공통 */
.doc-tit {margin-bottom:var(--space-30); font-size:var(--font-size-24); font-weight:600; line-height:1.3em; letter-spacing:-.03em; color:#121212;}

/* 회사소개 */
.greetings-hero {width:100%; height:clamp(240px, calc(460 / var(--inner) * 100vw), 460px); margin-bottom:var(--space-60); border-radius:var(--radius-32); background:url('/images/sub/greetings.jpg') 50% 50% no-repeat; background-size:cover; display:flex; align-items:center; justify-content:center; padding:var(--space-40);}
.greetings-hero  p {font-size:var(--font-size-24); font-weight:800; line-height:1.5; letter-spacing:.2em; text-align:center; color:#fff;}
.greetings-body {display:flex; gap:var(--space-40) var(--space-100);}
.greetings-lead {flex-shrink:0; font-size:var(--font-size-36); font-weight:400; line-height:1.38em; letter-spacing:-.03em; color:#121212;}
.greetings-txt {flex:1; font-size:var(--font-size-18); font-weight:400; line-height:1.66em; letter-spacing:-.03em; color:#505050;}

.history-wrap {display:flex; flex-direction:column; gap:var(--space-120); width:100%;}
.history {display:flex; gap:var(--space-150); align-items:flex-start; width:100%;}
.history:nth-child(2) {position:relative;}
.history:nth-child(2) .image::before {left:auto; top:auto; right:calc(var(--space-container) * -1); bottom:calc(var(--space-container) * -1);}
.history .image {position:relative; z-index:1; flex-shrink:0; width:43%; max-width:600px;}
.history .image:before {content:""; position:absolute; left:calc(var(--space-container) * -1); top:calc(var(--space-container) * -1); z-index:0; width:clamp(100px, calc(300 / var(--inner) * 100vw), 300px); aspect-ratio:1/1; border-radius:8px; background:rgba(0,67,140,0.2); pointer-events:none;}
.history .image img {display:block; width:100%; border-radius:var(--radius-16); box-shadow:0 5px 6px rgba(0,0,0,0.15);}
.history .content {position:relative; z-index:1; display:flex; flex:1; flex-direction:column; gap:var(--space-36); min-width:0;}
.history .content h3 {padding:0 0 var(--space-36); border-bottom:1px solid #ddd; font-size:var(--font-size-32); font-weight:600; line-height:1.2em; letter-spacing:-.03em; color:#121212;}
.history .items {display:flex; flex-direction:column; gap:var(--space-40);}
.history .item {display:flex; align-items:flex-start; width:100%;}
.history .year {flex-shrink:0; width:clamp(80px, calc(108 / var(--inner) * 100vw), 108px); font-size:var(--font-size-20); font-weight:600; line-height:1.2em; letter-spacing:-.03em; color:var(--color-primary);}
.history .list {display:flex; flex:1; flex-direction:column; gap:var(--space-14);}
.history .list li {display:flex; align-items:flex-start; gap:10px; font-size:var(--font-size-18); font-weight:400; line-height:1.5em; letter-spacing:-.03em; color:#505050;}
.history .list li::before {content:""; flex-shrink:0; margin-top:.45em; width:6px; height:6px; border-radius:50%; background:var(--color-primary);}

.org-img {text-align:center; margin-bottom:var(--space-120);}

.org-table {overflow-x:auto;}
.org-table table {width:100%; border-collapse:collapse; border-spacing:0; border-top:2px solid var(--color-primary);}
.org-table table th,
.org-table table td {text-align:center; border:1px solid #ddd; padding:var(--space-18); font-size:var(--font-size-18); line-height:1.5em;}
.org-table table thead th {color:#121212; font-weight:600; background:#f9f9f9;}
.org-table table tbody td {color:#505050;}
.org-table table tr th:first-child,
.org-table table tr td:first-child {border-left:0;}
.org-table table tr th:last-child,
.org-table table tr td:last-child {border-right:0;}

.certifications {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-60) var(--space-20); text-align:center;}
.certifications .item {display:flex; flex-direction:column; gap:var(--space-15);}
.certifications .item .img {position:relative; width:100%; aspect-ratio:335/454;}
.certifications .item .img img {display:block; width:100%; height:100%; object-fit:contain;}
.certifications .item .img:after {content:""; position:absolute; inset:0; border:1px solid #ddd; pointer-events:none;}
.certifications .item .desc {font-size:var(--font-size-18); font-weight:400; line-height:1.5em; letter-spacing:-.03em; color:#121212;}

.directions-map {width:100%; height:clamp(250px, calc(500 / var(--inner) * 100vw), 500px); border-radius:16px; margin-bottom:var(--space-50); overflow:hidden; background:#eee;}
.directions-map .root_daum_roughmap {position:relative; width:100% !important; height:100% !important;}
.directions-map .root_daum_roughmap .wrap_map {position:absolute; top:0; left:0; width:100% !important; height:100% !important;}
.directions-map .root_daum_roughmap .map_border {display:none !important;}
.directions-map iframe {display:block; position:relative; width:100% !important; height:100% !important;}
.directions-info .addr-area {margin-bottom:var(--space-70); text-align:center; font-size:var(--font-size-24); font-weight:600; line-height:1.5em; letter-spacing:-.03em; color:#121212;}
.directions-info .addr-area img {vertical-align:middle; margin:-.2em 4px 0 0;}
.directions-info .info-areas {display:flex; justify-content:center; gap:var(--space-100);}
.directions-info .info-areas .vline {width:1px; height:50px; background:#ddd;}
.directions-info .info-areas .info-area {min-width:178px; font-size:var(--font-size-18); font-weight:400; line-height:1.5em; letter-spacing:-.03em; color:#505050;}
.directions-info .info-areas .info-area dl {display:flex; flex-direction:column; gap:var(--space-10);}
.directions-info .info-areas .info-area dl dt {color:#121212; font-weight:600;}
.directions-info .info-areas .info-area dl dt img {vertical-align:middle; margin:-.2em 4px 0 0;}
.directions-info .info-areas .info-area dl dd {text-align:left;}