@charset "utf-8";

.dot-list li {text-indent: -.8em; padding-left: .8em;}
.dot-list li:not(:last-child) {margin-bottom: 5px;}
.dot-list li:before {content: '•'; margin-right: 5px; color: var(--secondary-color);}

.page-service .sec:not(:last-child) {margin-bottom: var(--space-50);}
.page-service .sec-underline {border-bottom: 1px solid #ddd; padding-bottom: var(--space-50);}
.concept-elaborate-box {position: relative; border-radius: var(--radius-16); overflow: hidden;}
.concept-elaborate-box .wrap {position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-30);}
.service-process {display: flex; justify-content: center; gap: var(--space-20);}
.service-process .item {display: flex; flex-direction: column; align-items: center; gap: var(--space-10); width: 65px;}
.service-process .item .icon {display: flex; align-items: center; justify-content: center; padding: var(--space-15); background-color: #f0f6fb; border-radius: var(--radius-16);}
.service-process .arrow {width: 6px; height:calc(33px + var(--space-15) * 2); display: flex; align-items: center;}

.range-box {padding: var(--space-30); border: 1px solid #ddd; border-radius: 8px;}
.range-box:not(:last-child) {margin-bottom: var(--space-20);}
.range-box .wrap {display: flex; gap: 20px clamp(12px, calc(18 / var(--inner) * 100vw), 18px); }
.range-box h3 {margin-bottom: 2px;}
.range-box .wrap {margin-bottom: 0;}
.range-box>.dot-list {display: none;}
.range-img {position: relative; max-width: 136px; width: 23.6%; height: fit-content; border-radius: 8px; overflow: hidden;}
.range-img:before {content: ''; display: block; width: 100%; padding-bottom: 100%;}
.range-img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.service-review-gallery ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;}
.service-review-gallery ul li:nth-child(n+5) {display: none;} /* 260204 - PC에서 4개까지 노출 */
.service-review-gallery a {position: relative; display: block; width: 100%; padding-bottom: 100%; border-radius: 8px; overflow: hidden;}
.service-review-gallery a img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.sec-blue-box {padding: var(--space-50) var(--space-30); background: var(--primary-color);}
.wide .sec-blue-box {max-width: 640px; margin-left: auto; margin-right: auto; padding-left: var(--container-space); padding-right: var(--container-space); }
.cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px;}
.cards:not(:last-child) {margin-bottom: 11px;}
.cards.type2 {grid-template-columns: repeat(2, 1fr); gap: 12px;}
.card {display: flex; flex-direction: column; border-radius: 8px; overflow: hidden;}
.card-img {position: relative; display: block; width: 100%; padding-bottom: 86.022%; overflow: hidden;}
.cards.type2 .card-img {padding-bottom: 56.3385%;}
.card-img img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.card-txt {flex: 1; padding: 14px; background: #fff;}

.sec-chk-box {padding: var(--space-50) var(--space-30); background: rgba(3, 110, 183, .06);}
.chk-boxes {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;}
.chk-boxes li {display: flex; align-items: center; padding: var(--space-25) var(--space-20); background:rgba(3, 110, 183, .08); border-radius: var(--radius-16);}
.chk-boxes li:before {content: ''; display: inline-block; width: 20px; height: 20px; margin-right: 10px; background: url('/images/sub/box-chk.png') no-repeat center center / contain;}

.sec-steps {gap: 30px var(--space-20); background-color: #fff; border: 1px solid #ddd; border-radius: 8px; padding: var(--space-30);}
.step-items {gap: 30px var(--space-20); }
.sec-steps .icon {width: fit-content; height: fit-content; margin: 0 auto var(--space-10); padding: var(--space-20); background-color: #f9f9f9; border-radius: 8px;}

.sec-consult {padding: var(--space-50) var(--space-30); background: #F0F6FB; border-radius:var(--radius-16);}
.btns {gap: 10px;}
.btns a {display: block; padding: var(--space-20); border-radius: 8px;}
.btns a.flex-mid {display: flex;}
.btns a:hover {box-shadow:4px 4px 8px rgba(0, 0, 0, 0.10);}
.btns a.type1 {background: var(--primary-color); color: #fff;}
.btns a.type2 {background: #fff; color: var(--primary-color);}

.sec-bottom-banner {position: sticky; bottom: 0; z-index: 10; padding: var(--space-30) 0; background: url('/images/sub/bg-bottom-banner.jpg') no-repeat center center / cover;}
.sec-bottom-banner a {width: 50%; padding: var(--space-10); background: var(--primary-color); border-radius: 8px; color: #fff; font-size: var(--font-size-15); font-weight: 600; line-height: 1.33335em; text-align: center;}
.compare-items {display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-20);}

.page-service-appliance h2 {gap: 12px;}

.internet-rental-list ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-20);}
.internet-rental-item {position: relative; border-radius: var(--radius-16); overflow: hidden;}
.internet-rental-item:after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--radius-16); border: 1px solid #ddd; pointer-events: none;}
.internet-rental-thumb {position: relative; display: block; width: 100%; padding-bottom: 67.742%; overflow: hidden;}
.internet-rental-thumb .tag {position: absolute; z-index: 1; top: var(--space-10); left: var(--space-10); padding: 6px 10px; background: var(--primary-color); color: #fff; font-size: var(--font-size-12); font-weight: 600; line-height: 1.33335em; text-align: center; border-radius:100px;}
.internet-rental-thumb img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.internet-rental-txt {padding: var(--space-20); background: #fff;}
.internet-brand {padding-bottom: var(--space-15); margin-bottom: var(--space-15); border-bottom: 1px solid #ddd;}
.internet-rental-txt dl {display: flex; justify-content: space-between; gap: 15px;}
.internet-rental-txt dl:not(:last-child) {margin-bottom: 5px;}

.sec-rental {padding: var(--space-50) 0; background: rgba(3, 110, 183, .03);}
.rental-list ul {display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-25) var(--space-20);}
.rental-list-thumb {position: relative; width: 100%; padding-bottom: 100%; border-radius: 8px; overflow: hidden;}
.rental-list-thumb:after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 8px; border: 1px solid #ddd; pointer-events: none;}
.rental-list-thumb img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.telecom-plan-list ul {display: grid; grid-template-columns: repeat(4, 1fr); gap:var(--space-20);}
.telecom-plan-item {height: 100%; padding: var(--space-25) 5px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden;}
.telecom-plan-thumb {position: relative; width: 100%; padding-bottom: 31.579%; border-radius: 8px; overflow: hidden;}
.telecom-plan-thumb img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}

.greeting-banner {padding: var(--space-25); border-radius: 8px; background: #E6F1F8;}
.greeting-cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20);}
.greeting-card {padding: var(--space-30) var(--space-20); border: 1px solid #ddd;}
.greeting-card .icon {width: fit-content; padding: var(--space-10); background-color: #f0f6fb; border-radius: 100%;}

.direction-info li {display: flex; align-items: center; gap: 10px;}
.direction-map {height: clamp(250px, calc(360 / var(--inner) * 100vw), 360px);}
.root_daum_roughmap .cont {display: none;}
.root_daum_roughmap .wrap_map, .root_daum_roughmap {width: 100% !important; height: 100% !important;}

.review-list {display: flex; flex-direction: column; gap: var(--space-50);}
.review-list-item {padding: var(--space-40) var(--space-20); border-radius: var(--radius-16); background: #fff; border: 1px solid #ddd;}
.review-list-item>div:not(:first-child) {margin-top: var(--space-30);}
.review-list-item .best, .review-rating .box {padding: 3px 10px; border-radius: 8px; width: fit-content;}
.review-list-item .best {background: var(--primary-color); color: #fff;}
.review-rating .box {background: #F2F6FA;}
.review-rating {display: flex; gap: 8px;}
.review-txt .txt {overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: keep-all;}
.review-txt.active .txt {display: block; line-clamp: unset; -webkit-line-clamp: unset;}
.review-arrow {gap: 8px; margin-top: 10px; cursor: pointer;}
.review-arrow:before {content: '더보기';}
.review-txt.active .review-arrow:before {content: '접기';}
.review-txt.active .review-arrow img {transform: scaleY(-1);}
.review-img-cnt {display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;}
.review-img-cnt .review-photo {position: relative; width: 100%; padding-bottom: 100%; border-radius: 8px; overflow: hidden;}
.review-img-cnt .review-photo img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.review-writer-info {display: flex; justify-content: space-between; border-top: 1px solid #ddd; padding-top: var(--space-10); color: #828282;}
.review-apply {padding: var(--space-20); border-radius: 8px; background: #F7F8FA;}


/* estimate form (cleaning) */
.estimate-page {display: flex; flex-direction: column; gap: var(--space-50);}
.estimate-page .primary {color: var(--primary-color); font-weight: 700;}

.estimate-page .estimate-banner { background: #f0f6fb; border-radius: var(--radius-16); padding:var(--space-50); display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.estimate-page .estimate-banner.type2 {padding: var(--space-30) var(--space-20); background: var(--primary-color); display: block;}
.estimate-page .estimate-banner.type2 p.fz14 {color: #ddd;}
.estimate-page .estimate-banner__headline {font-size: var(--font-size-18); font-weight: 700; color: var(--dark-color);}
.estimate-page .estimate-banner__checks {display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;}
.estimate-page .estimate-banner__checks li {position: relative; padding-left: 26px; font-size: var(--font-size-14);}
.estimate-page .estimate-banner__checks li:before {content: ''; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 999px; background: var(--secondary-color) url('/images/bbs/checkbox.png') no-repeat center center;}
.estimate-page .estimate-banner__summary {color: #454545; font-size: var(--font-size-14); line-height: 1.4em;}

.estimate-page .estimate-form {display: flex; flex-direction: column; gap: 20px;}
.estimate-page .estimate-row {display: flex; gap: 20px 40px; align-items: center; width: 100%;}
.estimate-page .estimate-row--between {justify-content: space-between; gap: 20px;}
.estimate-page .estimate-field {display: flex; gap: 10px; align-items: center; width: 100%; flex: 1; min-width: 1%;}
.estimate-page .estimate-field--column {flex-direction: column; align-items: flex-start; gap: 10px;}
.estimate-page .estimate-field--column:not(:last-child) {margin-bottom: var(--space-20);}
.estimate-page .estimate-field--compact {width: auto;}
.estimate-page .estimate-label {width: 91px; flex: 0 0 auto; font-size: var(--font-size-16); font-weight: 600; color: var(--dark-color); line-height: 1.25em;}

.estimate-page .estimate-chip-group {display: flex; flex-wrap: wrap; gap: 8px; width: 100%;}
.estimate-page .estimate-chip {border: 1px solid #ddd; background: #fff; border-radius: 8px; padding: 8px; font-size: var(--font-size-12); color: #242424; cursor: pointer;}
.estimate-page .type2 .estimate-chip {padding: 20px 10px; flex: 1; min-width: 0;}
.estimate-page .estimate-chip.is-active {background: #f7fafc; border-color: var(--primary-color); color: var(--primary-color);}
.estimate-page .estimate-chip:focus-visible {outline: 2px solid rgba(3,110,183,.25); outline-offset: 2px;}

.estimate-page .estimate-note {background: var(--primary-color); color: #fff; border-radius: 8px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-16); font-weight: 600; text-align: center; padding: 0 16px;}

.estimate-page .estimate-accordion {width: 100%; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff;}
.estimate-page .estimate-accordion__header {width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; background: #fff; text-align: left;}
.estimate-page .estimate-accordion__title {flex:1; display: flex; align-items: center; gap: 12px; color: #242424; font-size: var(--font-size-16); font-weight: 700; min-width: 0; cursor: pointer;}
.estimate-page .estimate-accordion__plus {display: flex; align-items: center; justify-content: center; appearance: none; -webkit-appearance: none; position: relative; width: clamp(22px, calc(26 / var(--inner) * 100vw), 26px); height: clamp(22px, calc(26 / var(--inner) * 100vw), 26px); border-radius: 4px; background: #fff; outline: 1px solid #036EB7; outline-offset: -1px; flex: 0 0 auto; cursor: pointer;}
.estimate-page .estimate-accordion__plus:after{content: ''; display: block; width: 14px; height: 14px; background: url('/images/sub/icon_check.png') no-repeat center center / contain;}
.estimate-page .estimate-accordion__plus:checked {background: #036EB7; outline: none;}
.estimate-page .estimate-accordion__plus:checked::after {filter: grayscale(1) brightness(0) invert(1);}
.estimate-page .estimate-accordion__toggle {padding: 8px; margin: -8px -8px -8px 0; border: 0; background: transparent; cursor: pointer;}
.estimate-page .estimate-accordion__chev {display: block; width: 10px; height: 10px; border-right: 2px solid var(--primary-color); border-bottom: 2px solid var(--primary-color); transform: rotate(45deg); flex: 0 0 auto; transition: transform .15s ease;}
.estimate-page .estimate-accordion__content {display: none; padding: 24px 20px; border-top: 1px solid #ddd;}
.estimate-page .estimate-accordion__content input:disabled,
.estimate-page .estimate-accordion__content select:disabled,
.estimate-page .estimate-accordion__content textarea:disabled,
.estimate-page .estimate-accordion__content button:disabled {background: #f5f5f5; color: #999; cursor: not-allowed; opacity: .7;}
.estimate-page .estimate-accordion.is-open .estimate-accordion__content {display: block;}
.estimate-page .estimate-accordion.is-open .estimate-accordion__chev {transform: rotate(-135deg);}

.estimate-page .estimate-chip-group--cards {gap: 10px;}
.estimate-page .estimate-cardchip {flex: 1; min-width: 0; border: 1px solid #ddd; border-radius: 8px; background: #fff; padding: 12px; display: flex; flex-direction: column; gap: 10px; text-align: left; cursor: pointer;}
.estimate-page .type2 .estimate-cardchip {padding: 30px 10px;}
.estimate-page .estimate-cardchip--logo {align-items: center; justify-content: center; text-align: center; gap: 0;}
.estimate-page .estimate-cardchip--logo img {max-width: 90px; width: 100%; height: auto; object-fit: contain;}
.estimate-page .estimate-cardchip strong {font-size: var(--font-size-14); color: #242424; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.estimate-page .estimate-cardchip span {font-size: var(--font-size-12); color: #777; line-height: 1.4em;}
.estimate-page .estimate-cardchip .badge {display: inline-block; background: var(--secondary-color); color: #fff; font-size: 10px; line-height: 1.5em; padding: 4px 8px; border-radius: 8px; font-style: normal; font-weight: 500;}
.estimate-page .estimate-cardchip.is-active {border-color: var(--primary-color); background: #f7fafc;}

.estimate-page .estimate-cta {display: flex; align-items: center; justify-content: center; margin-bottom: 20px; background: rgba(3, 110, 183, .10); border-radius: var(--radius-16); padding: 20px 40px; color: var(--primary-color); font-weight: 600;}
.estimate-cta .checkbox label:before {width: clamp(20px, calc(28 / var(--inner) * 100vw), 28px); height: clamp(20px, calc(28 / var(--inner) * 100vw), 28px); border-radius: 100%;}
.estimate-cta .checkbox, .estimate-cta .checkbox label {width: 100%; text-align: center; cursor: pointer;}
.estimate-accordion__content .estimate-cta {display: none; margin-top: 20px;}

.estimate-page .estimate-privacy {display: flex; flex-direction: column; gap: 20px; align-items: center; width: 100%; max-width: 640px; margin-top: 30px;}
.estimate-page .estimate-privacy__title {width: 100%; font-size: var(--font-size-18); font-weight: 700; color: #242424;}
.estimate-page .estimate-privacy__box {width: 100%; background: #fafafa; border: 1px solid #ddd; padding: 12px 10px; color: #454545; font-size: var(--font-size-14);}
.estimate-page .estimate-privacy__actions {width: 100%; display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap;}
.estimate-page .estimate-check {display: flex; align-items: center; gap: 10px; font-size: var(--font-size-16); color: #454545;}
.estimate-page .estimate-check input {width: 20px; height: 20px;}
.estimate-page .estimate-privacy__more {display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 24px; border: 1px solid #ddd; background: #fff; font-size: 12px; color: #454545;}

.estimate-page .estimate-submit {display: flex; justify-content: center; width: 100%; margin-top: 10px;}
.estimate-page .estimate-submit__btn {background: var(--primary-color); color: #fff; border: 0; border-radius: 8px; padding: 24px 50px; min-width: 160px; font-size: 15px; font-weight: 600; cursor: pointer;}
.estimate-page .estimate-submit__btn:hover {filter: brightness(0.98);}

.estimate-page .estimate-modal {max-width: 640px;}

.rental-extra-service .estimate-accordion {margin-top: 20px;}

/* 260204 - 메인 페이지 개선 작업 */
/* 인스타그램: 모바일 6개, 데스크톱 5개 노출 (layout.css, responsive.css에서 제어) */
/* 고객후기: 이미지 추가 완료 (index.php에서 첫 번째 이미지 자동 연결) */