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

.sub-tab {margin:calc(var(--space-40) * -1) -8px var(--space-40); text-align:center;}
.sub-tab ul {width:auto; max-width:100%;}
.sub-tab ul li {width:auto; padding:0 8px;}
.sub-tab ul li a {display:block; padding:var(--space-16) var(--space-24); border-radius:8px; background:#f4f4f4; color:#505050; font-size:var(--font-size-18); font-weight:500; letter-spacing:-0.03em; line-height:1.3em;}
.sub-tab ul li a:hover {background:var(--color-secondary); color:#fff;}
.sub-tab ul li.active a {background:var(--color-secondary); color:#fff;}

.sec-label {display:flex; align-items:center; gap:20px; color:var(--color-primary); font-size:var(--font-size-20); font-weight:700; letter-spacing:-0.03em; line-height:1.3em;}
.sec-label:after {content:""; flex:1 1 auto; max-width:400px; height:1px; background:var(--color-primary);}

.greet-wrap {display:grid; grid-template-columns:700fr 480fr; gap:100px; align-items:start;}
.greet-copy {padding-top:20px;}
.greet-copy h3 {margin:40px 0 80px; font-size:var(--font-size-40); font-weight:700; letter-spacing:-0.03em; line-height:1.4em;}
.greet-copy p {margin-bottom:30px; color:#505050; font-size:var(--font-size-18); font-weight:400; letter-spacing:-0.03em; line-height:1.6em;}
.greet-copy p:last-child {margin-bottom:0;}
.greet-copy .sec-label {margin:0; color:var(--color-primary); font-size:var(--font-size-20); font-weight:700; letter-spacing:-0.03em; line-height:1.3em;}
.greet-copy .sign {font-weight:700; color:var(--color-secondary);}
.greet-photo {overflow:hidden; width:100%; aspect-ratio:480 / 650; border-radius:24px; background:#f3f3f3;}
.greet-photo img {display:block; width:100%; height:100%; object-fit:cover;}

.history-wrap {display:grid; grid-template-columns:420fr 720fr; gap:140px; align-items:start; padding-top:60px;}
.history-intro {position:sticky; top:calc(var(--header-height) + 40px);}
.history-intro .since {margin-bottom:0; color:#eee; font-size:var(--font-size-80); font-weight:800; letter-spacing:-0.03em; line-height:1.3em;}
.history-intro h3 {margin:0 0 40px; font-size:var(--font-size-32); font-weight:600; letter-spacing:-0.03em; line-height:1.4em;}
.history-intro p {color:#505050; font-size:var(--font-size-18); font-weight:400; letter-spacing:-0.03em; line-height:1.6em;}
.history-list {position:relative; margin:0; padding:0; list-style:none;}
.history-list:before {content:""; position:absolute; top:10px; bottom:0; left:10px; width:1px; background:#ececec;}
.history-list > li {position:relative; margin:0 0 0 10px; padding:60px 0 60px 40px; border-bottom:1px solid #ececec;}
.history-list > li:last-child {padding-bottom:0; border-bottom:0;}
.history-list > li:before {content:""; position:absolute; top:68px; left:-10px; width:20px; height:20px; border:4px solid var(--color-primary); border-radius:50%; background:#fff; box-sizing:border-box;}
.history-list > li strong {display:block; margin-bottom:32px; font-size:var(--font-size-32); font-weight:700; letter-spacing:-0.03em; line-height:1.3em;}
.history-list > li ul {margin:0; padding:0; list-style:none;}
.history-list > li ul li {position:relative; padding-left:35px; color:#505050; font-size:var(--font-size-18); font-weight:400; letter-spacing:-0.03em; line-height:1.6em;}
.history-list > li ul li + li {margin-top:20px;}
.history-list > li ul li:before {content:""; position:absolute; top:0.65em; left:20px; width:5px; height:5px; border-radius:50%; background:#ccc;}

.dir-block + .dir-block {margin-top:100px;}
.dir-map {overflow:hidden; height:clamp(280px, calc(500 / 1280 * 100vw), 500px); background:#f4f4f4; border-radius:var(--radius-24);}
.dir-map iframe {display:block; width:100%; height:100%; border:0;}
.dir-block h3 {margin:40px 0 20px; font-size:var(--font-size-28); font-weight:700; letter-spacing:-0.03em; line-height:1.3em;}
.dir-info {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); margin:0; padding:0; list-style:none; border-top:1px solid #ececec; border-bottom:1px solid #ececec; background:#f4f4f4;}
.dir-info li {display:flex; flex-direction:column; justify-content:space-between; min-height:264px; padding:50px 40px; background:#fff;}
.dir-info li + li {border-left:1px solid #ececec;}
.dir-info-top {display:flex; align-items:flex-start; justify-content:space-between; gap:16px; min-height:48px; margin-bottom:60px;}
.dir-info .label {font-size:var(--font-size-24); font-weight:700; letter-spacing:-0.03em; line-height:1.3em; color:var(--color-secondary);}
.dir-info .icon {flex:0 0 48px; width:48px; height:48px;}
.dir-info .icon img {display:block; width:100%; height:100%;}
.dir-info li strong {display:block; color:#505050; font-size:var(--font-size-18); font-weight:400; letter-spacing:-0.03em; line-height:1.6em;}