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

.sub-tab {margin-bottom:var(--space-80); text-align:center;}
.sub-tab ul {display:inline-flex; flex-wrap:wrap; justify-content:center; gap:var(--space-8); margin:0 auto; background:#f9f9f9; padding:var(--space-12); border-radius:50px;}
.sub-tab ul li a {display:block; padding:var(--space-16) var(--space-32); font-size:var(--font-size-18); font-weight:600; line-height:1.2em; letter-spacing:-.03em; border-radius:40px; text-align:center; color:#999;}
.sub-tab ul li a:hover {color:var(--color-primary);}
.sub-tab ul li.active a {background:var(--color-primary); color:#fff;}

.greetings {display:flex; max-width:1360px; margin:0 auto; gap:var(--space-80); align-items:center; overflow:hidden;}
.greetings .image {flex-shrink:0; width:55%; max-width:700px;}
.greetings .image figure {margin:0; border-radius:var(--radius-24); overflow:hidden; aspect-ratio:700/480;}
.greetings .image img {display:block; width:100%; height:100%; object-fit:cover;}
.greetings .content {flex:1; min-width:0; font-size:var(--font-size-28); line-height:1.5em; letter-spacing:-.03em;}

.about-divider {height:1px; background:#ddd; margin:var(--space-80) 0;}

.company-info h3 {margin-bottom:var(--space-80); font-size:var(--font-size-40); line-height:1.3em;}
.company-info .card-wrap {display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.company-info .card {display:flex; flex-direction:column; justify-content: space-between; min-height:clamp(260px, calc(300 / var(--inner) * 100vw), 300px); padding:clamp(30px, calc(50 / var(--inner) * 100vw), 50px) clamp(24px, calc(48 / var(--inner) * 100vw), 48px) clamp(24px, calc(48 / var(--inner) * 100vw), 48px) clamp(32px, calc(56 / var(--inner) * 100vw), 56px); background:#fff; gap:20px; border:1px solid #ddd; border-radius:var(--radius-24);}
.company-info .card .txt {display:flex; flex-direction:column; gap:12px;}
.company-info .card .label {font-size:var(--font-size-16); font-weight:700; line-height:1.3em; color:var(--color-primary);}
.company-info .card .value {font-size:var(--font-size-24); font-weight:600; line-height:1.5em;}
.company-info .card .value-sm {font-size:var(--font-size-18); line-height:1.5em;}
.company-info .card .icon-wrap {display:flex; justify-content:flex-end;}
.company-info .card .icon-wrap svg {display:block; width:clamp(80px, calc(100 / var(--inner) * 100vw), 100px); height:auto;}

.license ul {display:flex; flex-wrap:wrap; margin:calc(var(--space-20) * -1);}
.license ul li {width:20%; padding:var(--space-20);}
.license ul li img {display:block; aspect-ratio:256/362; width:100%; border-radius:var(--radius-16); overflow:hidden;}
.license.center ul {justify-content:center;}

.root_daum_roughmap {width:100% !important; border-radius:var(--radius-24); overflow:hidden;}
.root_daum_roughmap .wrap_map {height:clamp(240px, calc(480 / var(--inner) * 100vw), 480px) !important;}
.root_daum_roughmap .cont {display:none !important;}

.directions-info {display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-60); margin:var(--space-40) var(--space-30) 0;}
.directions-info .addr {display:flex; align-items:center; gap:var(--space-8);}
.directions-info .addr .icon-wrap {flex-shrink:0; width:24px; height:24px; color:var(--color-primary);}
.directions-info .addr .icon-wrap svg {display:block; width:100%; height:100%;}
.directions-info .addr .txt {font-size:var(--font-size-20); font-weight:600; line-height:1.5; letter-spacing:-0.03em; color:#484848;}
.directions-info .info {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-20) var(--space-80); font-size:var(--font-size-18); line-height:1.5; letter-spacing:-0.03em; color:#484848;}
.directions-info .info .item {display:flex; align-items:center; gap:var(--space-16);}
.directions-info .info .label {font-weight:600; color:var(--color-primary);}
.directions-info .info .value {font-weight:400;}