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

/* 공통 */
.sub-sec {margin-bottom:var(--space-150);}
.sub-sec:last-child {margin-bottom:0;}
.sub-sec.sm {margin-bottom:var(--space-70);}

.doc-tit {text-align:center; margin-bottom:var(--space-50);}
.doc-tit .en {margin-bottom:var(--space-20); font-size:var(--font-size-16); font-weight:600; line-height:1.3em; letter-spacing:-0.03em; color:var(--color-primary);}
.doc-tit h3 {font-size:var(--font-size-32); line-height:1.3em; color:#2c2c2c;}

.subtitle {margin-bottom:var(--space-16); font-size:var(--font-size-22); font-weight:600; line-height:1.3em; letter-spacing:-0.03em; color:#2c2c2c;}

.doc-sec-head {display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--space-8); margin-bottom:var(--space-40);}
.doc-sec-head .tit {margin:0; font-size:var(--font-size-24); font-weight:700; line-height:1.3em; letter-spacing:-0.03em; color:#242424;}
.doc-sec-head .dot {flex-shrink:0; width:10px; height:10px; border-radius:50%; background:var(--color-primary);}

.doc-steps {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-40);}
.doc-steps .item {display:flex; align-items:center; gap:var(--space-40); padding:clamp(20px, calc(50 / var(--inner) * 100vw), 50px) clamp(24px, calc(100 / var(--inner) * 100vw), 100px); border:1px solid #ddd; border-radius:var(--radius-8); background:#fff;}
.doc-steps .item .num {flex-shrink:0; font-size:var(--font-size-30); font-weight:600; line-height:1em; letter-spacing:-0.03em; color:var(--color-primary);}
.doc-steps .item .cont {display:flex; flex-direction:column; gap:var(--space-18); min-width:0; flex:1;}
.doc-steps .item .cont .tit {font-size:var(--font-size-24); font-weight:600; line-height:1.25em; letter-spacing:-0.03em; color:#2c2c2c;}
.doc-steps .item .cont .txt {font-size:var(--font-size-20); line-height:1.5em; letter-spacing:-0.03em; color:#454545;}

.doc-slogan {display:flex; flex-direction:column; text-align:center; gap:var(--space-24);}
.doc-slogan .tit-wrap {display:flex; justify-content:center; align-items:flex-start; gap:var(--space-40);}
.doc-slogan .tit-wrap .img {flex-shrink:0;}
.doc-slogan .tit {font-size:var(--font-size-40); font-weight:600; line-height:1.25em; letter-spacing:-0.03em; color:#2c2c2c;}
.doc-slogan .desc {display:flex; flex-direction:column; gap:var(--space-10); font-size:var(--font-size-18); line-height:1.5em; letter-spacing:-0.03em; color:#454545;}
.doc-slogan .desc .price {font-size:var(--font-size-32); font-weight:700; line-height:1.3em; letter-spacing:-0.03em; color:var(--color-primary);}
.doc-slogan .desc strong {color:#242424;}

.table-style table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #686868; font-size:var(--font-size-16); line-height:1.5em; letter-spacing:-.03em;}
.table-style table th {padding:var(--space-20); border:1px solid #ddd; border-top:0; font-weight:600; color:#242424;}
.table-style table td {padding:var(--space-20); border:1px solid #ddd; border-top:0; color:#454545; text-align:center;}
.table-style table td strong {font-weight:600;}
.table-style table thead th {background:#FAFAFA;}
.table-style tr th:first-child,
.table-style tr td:first-child {border-left:0;}
.table-style tr th:last-child,
.table-style tr td:last-child {border-right:0;}

/* 회사소개 */
.greetings {display:flex; align-items:center; gap:clamp(40px, calc(125 / var(--inner) * 100vw), 125px); margin-bottom:var(--space-150); overflow:hidden;}
.greetings:last-child {margin-bottom:0;}
.greetings .content {flex:1 1 0; min-width:0; max-width:645px; display:flex; flex-direction:column;}
.greetings .content .en {margin-bottom:var(--space-30); font-weight:600; line-height:1.25em; letter-spacing:-0.03em; color:var(--color-primary);}
.greetings .content h2 {margin-bottom:var(--space-40); font-size:var(--font-size-44); font-weight:400; line-height:1.22em; letter-spacing:-0.03em; color:#242424;}
.greetings .content .text {max-width:564px; line-height:1.875em; letter-spacing:-0.03em; color:#454545;}
.greetings .content .sign {margin-top:var(--space-70); display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-20); line-height:1.22em; color:#242424;}
.greetings .content .sign img {display:block; height:clamp(36px, calc(50 / var(--inner) * 100vw), 50px); width:auto;}
.greetings .image {flex-shrink:0; width:48%; max-width:630px; border-radius:var(--radius-16); overflow:hidden; aspect-ratio:630 / 764;}
.greetings .image img {display:block; width:100%; height:100%; object-fit:cover;}

.network .content {margin-bottom:var(--space-80);}
.network .content .en {margin-bottom:var(--space-30); font-weight:600; line-height:1.25em; letter-spacing:-0.03em; color:var(--color-primary);}
.network .content h2 {font-size:var(--font-size-40); font-weight:400; line-height:1.22em; letter-spacing:-0.03em; color:#242424;}
.network .image {text-align:center; width:62%; max-width:857px; margin:0 auto;}

.vision-hero {position:relative; height:clamp(280px, calc(460 / var(--inner) * 100vw), 460px); margin-bottom:var(--space-90); border-radius:var(--radius-50); overflow:hidden;}
.vision-hero .image {position:absolute; inset:0;}
.vision-hero .image img {display:block; width:100%; height:100%; object-fit:cover; object-position:20% 50%;}
.vision-hero .image:after {content:''; position:absolute; left:0; bottom:0; height:38%; min-height:130px; width:100%; background:linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.60) 100%);}
.vision-hero .content {position:relative; z-index:1; display:flex; flex-direction:column; justify-content:space-between; width:100%; height:100%; padding:var(--space-40) clamp(20px, calc(80 / var(--inner) * 100vw), 80px) var(--space-50); color:#fff;}
.vision-hero .content .en {font-weight:600; line-height:1.25em; letter-spacing:-0.03em;}
.vision-hero .content h2 {font-size:var(--font-size-28); font-weight:600; line-height:1.39em; letter-spacing:-0.03em;}

.vision-items {display:flex; flex-wrap:wrap; justify-content: space-evenly; align-items:flex-start; gap:clamp(20px, calc(80 / var(--inner) * 100vw), 80px);}
.vision-items .item {display:flex; flex-direction:column; align-items:center; width:100%; max-width:280px; text-align:center;}
.vision-items .item .num {margin-bottom:clamp(12px, calc(14 / var(--inner) * 100vw), 14px); font-size:var(--font-size-24); font-weight:600; line-height:1.16em; letter-spacing:-0.03em; color:var(--color-primary);}
.vision-items .item .title {font-size:var(--font-size-24); line-height:1.3em; letter-spacing:-0.03em; color:#242424;}
.vision-items .item .icon {margin:var(--space-40) auto;}
.vision-items .item .icon img {width:80px;}
.vision-items .item .desc {font-weight:500; line-height:1.68em; letter-spacing:-0.03em; color:#454545;}

.history-hero {position:relative; height:clamp(260px, calc(400 / var(--inner) * 100vw), 400px); margin-bottom:var(--space-120); overflow:hidden;}
.history-hero img {display:block; position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
.history-hero .text {position:relative; z-index:2; display:flex; align-items:center; justify-content:center; height:100%; padding:var(--space-40) var(--space-container); text-align:center;}
.history-hero .text p {font-size:var(--font-size-28); font-weight:700; line-height:1.393em; letter-spacing:-0.03em; color:#fff;}
.history-items {border-top:2px solid #242424;}
.history-item {display:flex; flex-wrap:wrap; align-items:flex-start; padding:var(--space-56) 0; border-bottom:1px solid #8F8F8F;}
.history-item .year {flex-shrink:0; width:clamp(140px, calc(295 / var(--inner) * 100vw), 295px);}
.history-item .year p {font-size:var(--font-size-32); font-weight:700; line-height:1.1em; letter-spacing:-0.03em; color:#242424;}
.history-item .content {flex:1; min-width:0;}
.history-item .content ul {display:flex; flex-direction:column; gap:var(--space-12);}
.history-item .content ul li {position:relative; padding-left:0.75em; line-height:1.5em; letter-spacing:-0.03em; color:#454545;}
.history-item .content ul li:before {content:'·'; position:absolute; left:0; top:0;}

.directions {display:flex; justify-content:space-between; align-items:center; gap:var(--space-80); overflow:hidden;}
.directions .content {flex-shrink:0;}
.directions .content h3 {margin-bottom:var(--space-60); font-size:var(--font-size-28); line-height:1.3em; letter-spacing:-0.03em; color:var(--color-primary);}
.directions .content .info {display:flex; flex-direction:column; gap:var(--space-20); color:#454545; font-weight:500; line-height:1.5em;}
.directions .content .info .item {display:flex; gap:10px;}
.directions .content .info .item .icon {flex-shrink:0;}
.directions .content .info .item p {line-height:1.5em; letter-spacing:-0.03em; color:#454545;}
.directions .map-area {width:65%; max-width:900px; aspect-ratio:900/450; border-radius:var(--radius-40); overflow:hidden;}

/* 서비스 */
.postpaid {display:flex; align-items:center; gap:clamp(40px, calc(140 / var(--inner) * 100vw), 140px); overflow:hidden;}
.postpaid .image {flex-shrink:0; width:48%; max-width:625px; height:clamp(220px, calc(360 / var(--inner) * 100vw), 360px); border-radius:9999px; overflow:hidden;}
.postpaid .image img {display:block; width:100%; height:100%; object-fit:cover;}
.postpaid .content {flex:1; display:flex; flex-direction:column; gap:var(--space-30); min-width:0;}
.postpaid .content h3 {display:flex; align-items:center; gap:var(--space-15); margin:0; font-size:var(--font-size-28); font-weight:700; line-height:1.286em; letter-spacing:-0.03em; color:#242424;}
.postpaid .content h3:before {content:''; flex-shrink:0; width:3px; height:26px; border-radius:var(--radius-2); background:var(--color-primary);}
.postpaid .content ul {display:flex; flex-direction:column; gap:var(--space-10);}
.postpaid .content ul li {position:relative; padding-left:0.75em; font-size:var(--font-size-18); font-weight:500; line-height:1.5em; letter-spacing:-0.03em; color:#454545;}
.postpaid .content ul li:before {content:'·'; position:absolute; left:0; top:0;}

/* 상품안내 */
.doc-block-tit {padding-bottom:var(--space-30); margin-bottom:var(--space-50); border-bottom:1px solid #ddd;}
.doc-block-tit .tit {font-size:var(--font-size-32); font-weight:700; line-height:1.3em; letter-spacing:-0.03em; color:#242424;}

.prd-feature-list {display:flex; flex-direction:column; gap:var(--space-40);}
.prd-feature-list .item {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-40); width:100%; padding:clamp(20px, calc(50 / var(--inner) * 100vw), 50px) clamp(24px, calc(100 / var(--inner) * 100vw), 100px); border:1px solid #ddd; border-radius:var(--radius-8); background:#fff;}
.prd-feature-list .item .inner {display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-40); flex:1; min-width:0;}
.prd-feature-list .item .num {flex-shrink:0; font-size:var(--font-size-30); font-weight:600; line-height:1em; letter-spacing:-0.03em; color:var(--color-primary);}
.prd-feature-list .item .cont {display:flex; flex-direction:column; gap:var(--space-18); min-width:0;}
.prd-feature-list .item .cont .tit {font-size:var(--font-size-24); font-weight:600; line-height:1.25em; letter-spacing:-0.03em; color:#2c2c2c;}
.prd-feature-list .item .cont .txt {font-size:var(--font-size-20); line-height:1.5em; letter-spacing:-0.03em; color:#454545;}
.prd-feature-list .item .img {flex-shrink:0; width:68px; line-height:0;}

.prd-detail-wrap {display:flex; flex-direction:column; gap:var(--space-100); width:100%;}
.prd-detail-sec {width:100%;}
.prd-spec-frame {width:100%; overflow-x:auto;}
.prd-spec-table {width:100%; min-width:280px; border-collapse:collapse; border-spacing:0; line-height:1.5em; letter-spacing:-0.03em;}
.prd-spec-table thead th {padding:var(--space-30) var(--space-24); background:#fafafa; font-weight:600; color:#242424; border:1px solid #ddd; text-align:center; vertical-align:middle;}
.prd-spec-table tbody th {padding:var(--space-20) var(--space-24); font-weight:600; color:#242424; border:1px solid #ddd; text-align:left; vertical-align:top;}
.prd-spec-table tbody td {padding:var(--space-20) var(--space-24); color:#454545; border:1px solid #ddd; text-align:left; vertical-align:top;}

.doc-notice-head {margin-bottom:var(--space-40);}
.doc-notice-head .tit {position:relative; padding-left:10px; font-size:var(--font-size-24); font-weight:700; line-height:1.3em; letter-spacing:-0.03em; color:#242424;}
.doc-notice-head .tit:before {content:''; position:absolute; left:0; top:.15em; width:3px; height:var(--font-size-26); background:var(--color-primary);}

.prd-notice-wrap {display:flex; flex-direction:column; gap:var(--space-100); width:100%;}
.prd-notice-block {width:100%;}
.prd-notice-box {padding:clamp(24px, calc(50 / var(--inner) * 100vw), 50px) clamp(24px, calc(70 / var(--inner) * 100vw), 70px); border:1px solid #ddd; border-radius:var(--radius-8); background:#fff; align-items:start; line-height:1.5em;}
.prd-notice-box dl {display:flex; gap:var(--space-12) var(--space-40); margin:10px 0;}
.prd-notice-box dl dt {flex-shrink:0; width:120px; font-weight:600; color:#242424;}
.prd-notice-box dl dd {flex:1; min-width:0; color:#454545;}
.prd-notice-box ul {display:flex; flex-direction:column; gap:var(--space-10);}
.prd-notice-box ul li {position:relative; padding-left:14px;}
.prd-notice-box ul li:before {content:'·'; position:absolute; left:0; top:0; font-weight:800; color:var(--color-primary);}
.prd-notice-box.caution {padding:clamp(20px, calc(32 / var(--inner) * 100vw), 32px) clamp(24px, calc(70 / var(--inner) * 100vw), 70px);}

.doc-process {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-30);}
.doc-process .item {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; aspect-ratio:1/1; text-align:center; background:#FAFAFA; border-radius:50%; padding:16px;}
.doc-process .item .icon {width:clamp(40px, calc(72 / var(--inner) * 100vw), 72px); line-height:0; margin-bottom:var(--space-32);}
.doc-process .item .icon img {display:block; width:100%;}
.doc-process .item .tit {margin-bottom:var(--space-15); font-size:var(--font-size-24); font-weight:700; line-height:1.42em; letter-spacing:-0.03em; color:#242424;}
.doc-process .item .txt { line-height:1.375em; letter-spacing:-0.03em; color:#454545;}