.container.center { display: flex; flex-direction: column; align-items: center; gap: 4rem; } 
.w200 { width: 20rem; } 
/* 서브페이지 공통 상단 */

/* breadcrumb */
.breadcrumb-wrap > .breadcrumb { display: flex; height: 6rem; /* padding: 0 24rem; */
gap: 2rem; } 
.breadcrumb-wrap > .breadcrumb li { display: flex; /* width: 20rem; */
padding: 1rem; align-items: center; gap: 4rem; color: #202020; font-size: 1.6rem; font-weight: 500; line-height: normal; letter-spacing: -0.064rem; } 
.breadcrumb-wrap > .breadcrumb li::after { content: ""; display: flex; width: 2px; height: 2rem; background: #E8E8E8; } 
.breadcrumb-wrap > .breadcrumb li:last-child:after { content: ""; display: none; } 
.breadcrumb .home a { width: 3rem; height: 3rem; } 

@media (max-width:768px){
 .breadcrumb-wrap > .breadcrumb { display: flex; height: 4rem; gap: 0rem; } 
.breadcrumb-wrap > .breadcrumb li { gap: 2rem; } 
 }
/* -------- Layout -------- */
.subtop { width: 100%; margin: 8rem auto 4rem; border-bottom: 1px solid var(--color-eeeeee); /* 임시 */
 padding-top: 8rem; } 
.subtop__inner { display: flex; width: 100%; max-width: var(--containerWidth); margin: 0 auto; flex-direction: column; align-items: flex-start; gap: 4rem; /* padding-bottom: 4rem; */ } 
.subtop__overline { font-size: clamp(1.6rem, 1.2vw, 2rem); color: var(--color-999); font-size: 2rem; font-weight: 600; line-height: 100%; /* 2rem */
 letter-spacing: -0.08rem; } 
.subtop__title { margin:0 0 18px; font-weight:800; color:var(--txt); line-height:1.1; font-size: clamp(28px, 4.2vw, 44px); } 
.subtop__inner__title { display: flex; flex-direction: column; align-items: flex-start; gap: 3rem; align-self: stretch; } 
/* -------- Sub Nav Tabs -------- */
.subnav { position:relative; } 
.subnav__scroller { position:relative; display:flex; gap: 4rem; overflow:auto hidden; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:10px; /* 밑줄 여백 */ } 
.subnav__scroller::-webkit-scrollbar { display:none; } 

.subnav__item { position:relative; flex:0 0 auto; padding: 8px 0; font-weight:300; text-decoration:none; color:var(--color333); white-space:nowrap; font-size: clamp(1.6rem, 1.6vw, 2rem); outline-offset:4px; padding: 2rem 0; justify-content: center; align-items: center; gap: 1rem; margin-bottom: 1rem; } 
.subnav__item:hover { color:#000; } 
.subnav__item.is-active,
.subnav__item[aria-current="page"] { color:#000; font-weight:600; border-bottom: 2px solid #999; } 

/* 밑줄 인디케이터 */
.subnav__underline { position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--color-999); transition:left .25s ease, width .25s ease; } 

/* 가로 스크롤 페이드(옵션) */
.subnav__fade { content:""; position:absolute; top:0; bottom:0; width:32px; pointer-events:none; } 
.subnav__fade--left { left:0; display:none; } 
.subnav__fade--right { right:0; } 

/* -------- Responsive -------- */
@media (max-width:768px){
 .contents > .filters { } 
 .subtop { padding: 4rem 2rem 0; /* 추가됨 */
 margin: 8rem auto 0; } 
 .subtop__inner { gap: 4rem; padding: 0 2rem; } 
 .subnav__fade--left { display:block; } 
 .subnav__scroller { gap: 1rem; padding: 0; display: flex; flex-wrap: nowrap; overflow-x: scroll; width: calc(100vw - 4rem); } 
 .subnav__scroller { padding: 0; } 
 .filters.sub .container .filters-box { flex-direction: column !important; gap: 2rem !important; } 
 .filters.sub .chip-row.single .chip { padding: 1rem; } 
 .filters.sub .container { padding: 2rem !important; } 
.breadcrumb-wrap > .breadcrumb { display: flex; height: 4rem; gap: 0rem; } 
.breadcrumb-wrap > .breadcrumb li { gap: 2rem; } 
 }

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce){
 .subnav__underline { transition:none; } 
 }





/* 서브페이지 필터 */
.filters.sub .filters-box { } 
.filters.sub .container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 2rem; align-self: stretch; width: 100%; background-color: #fff; padding: 3rem; border: 1px solid var(--line); border-radius: 1.2rem; } 
.filters.sub .container .rt__service.filter { width: auto; } 
.filters.sub .container .filters-box { display: flex; flex-direction: row; align-items: center; gap: 4rem; max-width: 100%; justify-content: center; } 
.filters.sub .chip-row.single .chip { min-width: auto; text-align: center; } 
.filters.sub .chip-row { padding: 1rem; flex-wrap: nowrap; } 
@media (max-width:1310px){
 .filters.sub .chip-row { flex-wrap: wrap; } 
 }
/* 필터 라디오, 체크박스 */
.chip-row .chip input { display: none; } 
.contents-detail { max-width: var(--contentWidth); margin: 0 auto; width: 100%; } 
.contents-detail span { font-size: clamp(1.5rem, 1.35rem + 0.4vw, 1.8rem); } 
.product-hero { display: flex; padding: 4rem 0; align-items: flex-start; gap: 4rem; align-self: stretch; } 

.product-hero .hero-img { position:relative; flex:1 1 60%; height:clamp(24rem, 50vw, 60rem); border-radius:0.8rem; overflow:hidden; } 
.hero-img > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; } 
.hero-info { width: 50%; min-height: 60rem; height: 100%; display: flex; padding: 4rem; flex-direction: column; gap: 1rem; border-radius: 2rem; border: 1px solid #E8E8E8; align-items: center; } 
.hero-info > div { width: 100%; } 
.hero-info h2 { color: #303030; font-size: clamp(2.4rem, 1.6rem + 1.5vw, 4.8rem); font-weight: 700; letter-spacing: -0.144rem; } 

.hero-spec { /* display: grid; */
padding: 3rem; /* align-items: flex-start; justify-content: space-between; */
display: grid; /* grid-template-columns: 1fr 1fr; */
grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; align-self: stretch; flex-wrap: wrap; border-radius: 2rem; background: #F7F7F7; } 

.hero-spec li { display: flex; padding: 1rem 0; align-items: center; /* gap: 4rem; */
/* width: calc(50% - 4rem); */ } 
@media (max-width:1280px){
 .hero-spec { padding: 2.4rem; } 
.hero-info { padding: 2.4rem; } 
 }
.hero-spec li p { width: 5rem; flex-shrink: 0; color: #000; font-size: clamp(1.5rem, 1.35rem + 0.4vw, 1.8rem); font-weight: 600; letter-spacing: -0.072rem; } 
.hero-spec li span { } 
.btn-orange { display: flex; max-width: 24rem; height: 6rem; padding: 1.6rem 6.4rem; align-items: center; justify-content: center; gap: 2rem; flex-shrink: 0; cursor: pointer; border-radius: 9.9rem; background: linear-gradient(90deg, var(--Color_EE6811, #EE6811) 0%, #FF914A 100%); box-shadow: 0 20px 40px 0 rgba(255, 162, 101, 0.50); color: #FFF; font-size: clamp(1.5rem, 1.35rem + 0.4vw, 1.8rem); font-weight: 700; text-align: center; transition: transform 0.2s ease; } 
.btn-orange:hover { transform: translateY(-10px); } 
.product-intro,
.product-spec,
.product-video,
.product-gallery,
.product-spec-detail { margin-top: 8rem; } 
.product-intro h3,
.product-spec h3,
.product-video h3,
.product-gallery h3,
.product-spec-detail h3 { color: #303030; font-size: clamp(2.4rem, calc(24px + (100vw - 768px) * 0.017857), 3.6rem); font-weight: 700; letter-spacing: -0.144rem; } 
.intro-img img,
.gallery-main img,
.gallery-thumbs img,
.floor-plan img { width: 100%; border-radius: 2rem; } 
.intro-img { } 
.detail__title { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; margin-bottom: 4rem; width: 100%; text-align: left; } 
.detail__title p { font-size: clamp(1.5rem, calc(15px + (100vw - 768px) * 0.00446), 1.8rem); line-height: 150%; } 
.gallery-thumbs { display: flex; gap: 1.2rem; /* 12px */
margin-top: 1.6rem; /* 16px */ } 

.gallery-thumbs img { width: 23%; cursor: pointer; border-radius: 0.6rem; /* 6px */ } 
.product-gallery { display: flex; padding: 4rem 0; flex-direction: column; align-items: center; gap: 4rem; align-self: stretch; } 
.product-gallery .detail__title { margin-bottom: 0; } 
.product-gallery .pg-set{width: 100%;}
.tab-menu { display: flex; align-items: center; gap: 1rem; } 
.tab-menu button { cursor: pointer; display: flex; padding: 1.2rem; justify-content: center; align-items: center; gap: 1rem; border-radius: 9.9rem; background: #F3F4F6; font-size: clamp(1.6rem, calc(16px + (100vw - 768px) * 0.00595), 2rem); width: auto; } 
.tab-menu .active { background: var(--colotEE6811); color: #fff; border: none; font-weight: 300; font-family: 'SUIT','Malgun Gothic','맑은 고딕',Dotum,'돋움',sans-serif !important;font-weight: 400; } 
.tab-menu.style2 .chip { min-width: 10rem; } 
.tab-menu.style2 .active { color: var(--color-333); border-radius: 1rem; background: #FFF; font-weight: 400;} 
.video-box iframe { border-radius: 0.8rem; /* 8px */ } 

.product-spec ul { display: flex; justify-content: space-between; align-items: center; } 
.product-spec ul li { display: flex; width: 30rem; flex-direction: column; align-items: flex-start; gap: 1.7rem; flex-shrink: 0; } 
.product-spec ul p { color: #303030; font-size: clamp(1.6rem, calc(16px + (100vw - 768px) * 0.00595), 2rem); font-weight: 600; line-height: 100%; /* 2rem */
letter-spacing: -0.08rem; } 
.product-spec-detail .spec-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns: 1fr 1fr; /* 좌우 두 칼럼 */
gap:2.4rem 6rem; } 
.product-spec-detail .spec-list li { display: flex; width: 28rem; flex-direction: column; align-items: flex-start; gap: 2rem; } 
.product-spec-detail .spec-list p { color: #303030; font-size: 2rem; font-weight: 500; line-height: 100%; /* 2rem */
letter-spacing: -0.08rem; } 
.product-spec-detail .spec-list span { color: #303030; font-size: 1.5rem; font-weight: 300; line-height: 100%; /* 1.5rem */
letter-spacing: -0.06rem; } 
.product-spec-detail > div { display: flex; align-items: flex-start; gap: 4rem; align-self: stretch; } 
.spec-viewer { width: 100%; max-width: 80rem; } 
.spec-viewer .chip-row.single { width: 100%; margin-bottom: 2rem; } 

.viewer .panel { padding: 0 !important; border-radius: 2rem; background: none; } 
.spec-viewer .viewer { position: relative; border: 1px solid #EAEAEA; border-radius: 12px; overflow: hidden; } 
.spec-viewer .viewer .panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; } 
.spec-viewer .viewer .panel[hidden] { display: none !important; } 
.spec-viewer .viewer .panel img { width: 100%; height: 100%; object-fit: cover; object-position: center; image-rendering: auto; -webkit-user-drag: none; user-select: none; } 

.house-product[hidden] { display: none !important; } 
.d-flex.flex-sb { width: 100%; justify-content: space-between; align-items: center; } 


@media (max-width:960px){
 .product-hero { flex-direction:column; gap:2rem; } 
.hero-img { height:clamp(22rem, 56vw, 40rem); } 
.hero-img > img { position: static; } 
.hero-info { width: 100%; padding: 2.4rem; gap: 2rem; min-height: auto; } 
.detail__title { gap: 2rem; margin-bottom: 2rem; } 
.product-spec ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; align-items: start; } 
.product-spec ul li { display: flex; width: auto; flex-direction: column; align-items: flex-start; gap: 1rem; flex-shrink: 0; min-width: 8rem; } 
.product-spec-detail > div { flex-direction: column; } 



.contents-detail { padding: 0 2rem; width: auto; } 

.product-spec-detail .spec-list li { width: 10rem; } 



/* Product Detail 반응형 */
.hero-spec li p { width: auto; font-size: 1.4rem; line-height: 150%; margin-right: .8rem; } 
.contents-detail span { line-height: 150%; font-size: 1.4rem; } 
.hero-spec { padding: 1.6rem; justify-content: flex-start; gap: 0rem; border-radius: 1rem; } 
.hero-spec li { padding: 1rem 0; gap: 0rem; /* width: calc(50% - 1rem); */
 align-items: center; } 
.btn-orange { max-width: 22rem; height: 5rem; padding: 1.6rem 6rem; font-size: 1.6rem; font-weight: 600; } 
.product-gallery { gap: 2rem; } 
.tab-menu.style2 .chip-row.single .chip { min-width: auto; padding: 0.4rem 2rem; border-radius: 6px !important; font-family: suit; } 
.spec-viewer .viewer { height: auto; } 
 }
@media (max-width:440px){
 .product-spec ul { gap: 1rem; } 
 }
@media (max-width:360px){
 .product-spec ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } 
 }
/* 유튜브 영상 비율 */
.video-box { position: relative; width: 100%; aspect-ratio: 16 / 9; /* 16:9 비율 고정 */
overflow: hidden; } 

.video-box iframe { width: 100%; height: 100%; border: 0; } 
/* swiper */
.product-gallery .gallery-thumbs { display: grid; gap: 2rem; position: relative; } 

.swiper-slide { background-size: cover; background-position: center; } 
.product-gallery .mySwiper2 , .product-gallery .mySwiper3 { height: clamp(24rem, 42vw, 48rem); /* 모바일~PC */
 width: 100%; border-radius: 0.8rem; overflow: hidden; max-width: 70% !important; padding: 0 6rem; } 
.product-gallery .swiper-button-prev,
.product-gallery .swiper-button-next { width: 42px; height: 42px; background-size: contain; background-repeat: no-repeat; z-index: 10 !important; --swiper-navigation-size: 42px; /* 버튼 크기 */
 --swiper-navigation-sides-offset: 20px; /* 양옆 여백(음수가 아니어야 함) */
 top: 50%; transform: translateY(-50%); margin-top: 0; } 

 .product-gallery .swiper-button-prev { background-image: url("/img/house/icon-left-arr.png"); left: -0px; /* 위치 조정 */ } 
.product-gallery .swiper-button-next { background-image: url("/img/house/icon-right-arr.png"); right: -0px; /* 위치 조정 */ } 
.product-gallery .swiper-button-prev2,
.product-gallery .swiper-button-next2 { width: 42px; height: 42px; background-size: contain; background-repeat: no-repeat; z-index: 10 !important; --swiper-navigation-size: 42px; /* 버튼 크기 */
 --swiper-navigation-sides-offset: 20px; /* 양옆 여백(음수가 아니어야 함) */
 top: 50%; transform: translateY(-50%); margin-top: 0; } 

 .product-gallery .swiper-button-prev2 { background-image: url("/img/house/icon-left-arr.png"); left: -0px; /* 위치 조정 */ } 
.product-gallery .swiper-button-next2 { background-image: url("/img/house/icon-right-arr.png"); right: -0px; /* 위치 조정 */ } 
/* Swiper 기본 before content 없애기 */
.product-gallery .swiper-button-prev::after,
.product-gallery .swiper-button-next::after { display: none; } 
/* Swiper 기본 before content 없애기 */
.product-gallery .swiper-button-prev2::after,
.product-gallery .swiper-button-next2.acc__btn[aria-expanded="true"] { display: none; } 


/* 섬네일 슬라이더: 고정 높이 */
.mySwiper, .mySwiper4 { height: 10rem; /* = 100px */
 box-sizing: border-box; padding: 1rem 0; } 

.mySwiper .swiper-slide , .mySwiper4 .swiper-slide { width: auto; height: 100%; opacity: .4; } 
.mySwiper .swiper-slide-thumb-active,.mySwiper4 .swiper-slide-thumb-active { opacity: 1; } 

.swiper-slide img { display:block; width:100%; height:100%; object-fit: contain; object-position:center; max-height: 40rem;} 
.product-gallery,
.product-gallery .gallery-thumbs,
.product-gallery .swiper { max-width:100%; overflow-x:hidden; min-width:0; } 
.mySwiper .swiper-wrapper { box-sizing:border-box; } 

@media (max-width:768px){
 .product-gallery .mySwiper2 , .product-gallery .mySwiper3 { max-width: 100% !important; } 
 .intro-img img, .gallery-main img, .gallery-thumbs img, .floor-plan img { border-radius: 1rem; } 
.product-intro, .product-spec, .product-video, .product-gallery, .product-spec-detail { margin-top: 4rem; } 
 }

/* 브랜드스토리 */
.bs-container { display: flex; padding: 8rem 0; justify-content: space-between; align-items: flex-start; align-self: stretch; flex-direction: column; width: 100%; } 
/* 타이포 */
.bs-h1 { font-weight: 600; font-size: clamp(3.2rem, calc(16px + (100vw - 768px) * 0.00595),4.8rem); } 
.bs-h2 { font-size: clamp(2.2rem, 1.2rem + 1.5vw, 4rem); font-weight: 700; line-height: 130%; /* 5.2rem */
letter-spacing: -0.16rem; width: 100%; } 
.bs-h3 { font-weight:800; font-size: clamp(1.25rem, .9rem + .8vw, 1.6rem); } 
.section-title { font-size: clamp(2.4rem, 1.2rem + 1.5vw, 4rem); font-weight:700; } 
.section-title.center { text-align:center; } 
.section-title.left { text-align:left; } 
.cta-sub { } 

/* 인트로 */
.bs-intro { width: 100%; } 
.bs-intro > div { width: 100%; } 
.bs-intro .intro-desc { font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem); font-weight: 400; line-height: 130%; /* 2.6rem */
 width: 100%; } 
.d-flex { display: flex; } 
.d-flex.col { flex-direction: column; } 
.g20 { gap: 2rem; } 
/* 히어로 */
.bs-hero { width: 100%; background: url(/img/house/img-bs-thum.png) center center no-repeat; background-size: cover; border-radius: 3rem; overflow: hidden; } 
.bs-hero > .bs-container { display: flex; flex-direction: column; align-items: center; justify-content: center; } 
.bs-hero .kicker { color: #FFF; text-align: center; font-size: clamp(2.4rem, 1.2rem + 1vw, 3.6rem); font-weight: 300; line-height: 100%; /* 3.6rem */
letter-spacing: -0.144rem; } 
.bs-hero .headline { /* font-size: clamp(3.2rem, .9rem + .9vw, 4.8rem); */
color: #FFF; font-size: clamp(2.4rem, 1.6rem + 1.5vw, 4.8rem); font-weight: 800; letter-spacing: -0.192rem; margin: 2rem 0 4rem; } 

/* 문제 카드 4 */
.card4 { display: flex; justify-content: center; align-items: center; gap: 2rem; align-self: stretch; } 
.mini-card { display: flex; max-width: 26.6rem; width: 100%; padding: 5rem 3rem; flex-direction: column; align-items: center; gap: 2rem; border-radius: 3rem; /* border: 1px solid #E8E8E8; */
background: #F3F4F6; /* box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.05); */ } 
.mini-card .ic { width: 12rem; height: 12rem; } 
.mini-card h4 { text-align: center; font-size: 1.6rem; font-weight: 400; line-height: 130%; /* 2.08rem */ } 

/* 약속 3가지 */
.bs-promises { display: flex; flex-direction: column; align-items: center; gap: 4rem; align-self: stretch; } 
.bs-promises .promise3 { display: flex; align-items: center; gap: 4rem; } 
.promise3 .circle { display: flex; width: clamp(24rem, calc(26.67vw + 14.67rem), 36rem); height: clamp(24rem, calc(26.67vw + 14.67rem), 36rem); flex-direction: column; justify-content: center; align-items: center; gap: 2rem; border-radius: 99.9rem; border: 2px solid #E8E8E8; background: #FFF; } 
.promise3 .circle span { text-align: center; font-size: clamp(2.4rem, 1.6rem + 2vw, 3.2rem); font-weight: 700; line-height: 130%; /* 4.16rem */ } 
.promise3 h4 { text-align: center; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); font-weight: 600; line-height: 130%; /* 3.12rem */ } 
.promise3 p { font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.6rem); } 

/* 포인트 리스트 */
.points-card { display: block; width: 100%; } 
.section-sub-title { font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem); font-weight: 400; line-height: 100%; /* 2rem */
letter-spacing: -0.08rem; margin-top: 2rem; } 
.points-card .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; padding: 4rem 0; } 
.points-card .steps li { display: flex; padding: 2.4rem; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2rem; align-self: stretch; border-radius: 1.2rem; border: 1px solid #E8E8E8; } 
.points-card em { color: var(--colotEE6811); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); font-weight: 900; line-height: 100%; /* 2.4rem */
letter-spacing: -0.096rem; } 
.points-card p { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); font-weight: 500; line-height: 130%; /* 3.12rem */
letter-spacing: -0.096rem; } 
/* 회사 지표 */
.company-head { text-align:center; margin-bottom: 16px; } 
.company-head .sub { margin-top:10px; color:var(--muted); } 
.metrics { display: flex; } 
.metric { width: 30rem; height: 30rem; background: url(/img/house/img-cir-bg.png) center center no-repeat; background-size: contain; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; } 
.metric .badge { display: flex; width: 8rem; height: 8rem; justify-content: center; align-items: center; } 
.metric strong { text-align: center; font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem); font-weight: 700; line-height: 130%; /* 2.6rem */
letter-spacing: -0.08rem; } 
p.sub { text-align: center; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); font-weight: 300; line-height: 130%; /* 3.12rem */
letter-spacing: -0.096rem; } 
p.sub strong { font-weight: 700; } 
/* CTA */
.bs-cta { padding-bottom: 56px; } 
.cta-head { text-align:center; } 
.cta-sub { color:var(--muted); margin-top:6px; } 
.cta-feats { display: flex; align-items: center; gap: 2rem; } 
.feat { display: flex; /* width: 100%; */
width: 35.3rem; padding: 2rem; /* flex-direction: column; */
align-items: flex-end; border-radius: 1.2rem; background: #F3F4F6; flex-direction: column-reverse; } 
.feat p { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); font-weight: 600; line-height: 130%; /* 3.12rem */
width: 100%; text-align: left; } 
.feat .ic { display: flex; width: 8rem; height: 8rem; /* padding: 0.1rem 0.4rem 0.1rem 0.3rem; */
justify-content: center; align-items: center; } 
.cta-select { margin-top:14px; border:1px solid var(--line); border-radius:12px; overflow:hidden; } 
.cta-select > summary { list-style:none; cursor:pointer; padding:14px; position:relative; } 
.cta-select > summary::marker { display:none; } 
.cta-select > summary::after { content:""; position:absolute; right:16px; top:50%; width:10px; height:10px; border-right:2px solid #9CA3AF; border-bottom:2px solid #9CA3AF; transform: translateY(-60%) rotate(45deg); } 
.cta-select[open] > summary::after { transform: translateY(-40%) rotate(225deg); } 
.cta-select .panel { padding: 14px; border-top:1px solid var(--line); color:var(--muted); } 

/* 구역 여백 */
.bs-intro, .bs-hero, .bs-problems, .bs-promises, .bs-points, .bs-company, .bs-cta { padding: 8rem 0; display: flex; flex-direction: column; align-items: center; gap: 4rem; align-self: stretch; } 
.bs-problems, .bs-company { /* display: flex; flex-direction: column; align-items: center; gap: 4rem; align-self: stretch; */ } 
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } 

/* ===== 아코디언 컨테이너 ===== */
.acc--brand { display: flex; padding: 4rem; flex-direction: column; align-items: flex-end; gap: 4rem; align-self: stretch; border-radius: 1.2rem; border: 1px solid #DCDDDD; position:relative; } 

/* 헤더 버튼 (우상단 화살표) */
.acc__btn { width:100%; display:flex; align-items:center; justify-content: space-between; gap:8px; background:transparent; border:0; cursor:pointer; color:var(--color333); padding:6px 6px 0; } 
.acc__label { /* 필요하면 좌측 라벨 노출용 */
pointer-events:none; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); font-weight: 300; line-height: 130%; /* 3.12rem */
letter-spacing: -0.096rem; } 
.acc__label strong { font-weight: 600; } 
.acc__chev { transition: transform .2s ease; } 

/* 펼쳐진 상태 아이콘 회전 */
.acc__btn[aria-expanded="true"] .acc__chev { transform: rotate(180deg); } 

/* 패널 (부드러운 높이 애니메이션) */
.acc__panel { overflow:hidden; transition: grid-template-rows .28s ease, opacity .18s ease; opacity: 0; padding: 0 8px 0; } 
.acc__panel.is-open { opacity: 1; padding-bottom: 12px; } 

/* ===== 로고 그리드 ===== */
.logo-grid { display: flex; flex-direction: column; align-items: flex-start; gap: 4rem; width: 100%; } 
.logo-grid > div { display: flex; justify-content: space-between; align-items: flex-start; gap: 4rem; width: 100%; align-self: stretch; } 
.logo-grid h3 { font-size: clamp(2.4rem, 1.6rem + 2vw, 3.2rem); width: 100%; max-width: 18rem; } 
.logo_img_wrap { display: flex; align-items: center; gap: 4rem; } 
/* 카드 */
.logo-card { background:#fff; border-radius:16px; min-height: 160px; padding: 22px; display:flex; align-items:center; justify-content:center; box-shadow: 0 12px 30px rgba(0,0,0,.18); } 
.logo-card img { max-width: 88%; height:auto; display:block; } 

/* 고스트 카드: 회색 + 얇은 그리드 패턴 */
.logo-card--ghost { background:
 linear-gradient(transparent,transparent),
 repeating-linear-gradient(0deg, #F1F3F5 0 1px, transparent 1px 24px),
 repeating-linear-gradient(90deg, #F1F3F5 0 1px, transparent 1px 24px),
 #fff; box-shadow: 0 12px 30px rgba(0,0,0,.12); } 

.logo-card--ghost img { filter: grayscale(1); opacity:.6; } 

/* 반응형 */
@media (max-width: 640px){
 .logo-grid { grid-template-columns: 1fr; } 
.logo-card { min-height: 140px; } 
 }
/* map card */
.map-card { position:relative; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff; } 
.map-embed { height:420px; /* 그리드형 플레이스홀더 */
background:
 repeating-linear-gradient(0deg, #f2f4f6 0 1px, transparent 1px 24px),
 repeating-linear-gradient(90deg, #f2f4f6 0 1px, transparent 1px 24px),
 #fff; } 

/* action buttons (top-right) */
.map-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.4rem; align-self: stretch; } 
.mapbtn { height:34px; padding:0 12px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.86rem; border:1px solid transparent; text-decoration:none; margin-bottom: 2rem; } 
.mapbtn svg { margin-top: 6px; } 
.mapbtn--kakao { display: flex; width: 100%; max-width: 18rem; height: 4.5rem; padding: 0 1.4rem; justify-content: center; align-items: center; border-radius: 0.6rem; background: var(--kakao-bg, #FEE500); font-size: 1.6rem; font-weight: 400; gap: 1.5rem; line-height: 150%; /* 2.4rem */ } 
.mapbtn--naver { display: flex; width: 100%; max-width: 18rem; height: 4.5rem; padding: 0 2rem; justify-content: center; align-items: center; gap: 1.5rem; border-radius: 0.4rem; background: var(--naver-bg, #03C75A); color: var(--colorfff); font-size: 1.6rem; font-weight: 400; line-height: 150%; /* 2.4rem */ } 

/* place list */
.way-places { margin:10px 2px 0; padding-left:0; list-style:none; } 
.way-places li { display: flex; align-items: center; } 
.way-places li::before { content: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='19' height='25' viewBox='0 0 19 25' fill='none'><g clip-path='url(%23clip0_327_6957)'><path d='M8.48922 0.925859C4.3319 1.36623 0.963564 4.63166 0.451486 8.71438C0.155619 11.0767 0.800458 13.2785 2.05979 15.0251L8.20473 23.4704C8.84198 24.3437 10.1582 24.3437 10.7955 23.4704L16.9404 15.0251C17.9949 13.5622 18.6208 11.7783 18.6208 9.84889C18.6208 4.56448 13.9779 0.343679 8.48922 0.925859ZM9.50199 13.189C7.40816 13.189 5.70882 11.5171 5.70882 9.45704C5.70882 7.39702 7.40816 5.72511 9.50199 5.72511C11.5958 5.72511 13.2952 7.39702 13.2952 9.45704C13.2952 11.5171 11.5958 13.189 9.50199 13.189Z' fill='%23007DFD'/></g><defs><clipPath id='clip0_327_6957'><rect width='19' height='24' fill='white' transform='translate(0 0.5)'/></clipPath></defs></svg>"); display: inline-block; display: flex; width: 3rem; height: 3rem; padding: 0.35rem 0.5rem 0.25rem 0.6rem; justify-content: center; align-items: center; aspect-ratio: 1/1; } 
.way-places .title { color: #007DFD; font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 600; line-height: 130%; /* 2.6rem */
letter-spacing: -0.08rem; margin-right: 1rem; } 
.way-places address { font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 300; line-height: 130%; /* 2.6rem */
letter-spacing: -0.08rem; } 


/* 여기부터 복붙 */
/* 사업분야 */
.business .business_intro { width: 100%; display: flex; padding: 8rem 0; justify-content: space-between; align-items: flex-start; align-self: stretch; max-width: var(--contentWidth); margin: 0 auto; } 
.business_intro__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; align-self: stretch; } 
.business_intro__inner h2 { font-size: clamp(2.4rem, 1.2rem + 1.5vw, 4rem); font-weight: 700; letter-spacing: -0.16rem; } 
.business_intro__inner p { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 400; letter-spacing: -0.08rem; } 

.business_intro__image { width: 100%; max-width: 90rem; } 
.business_intro__image img { width: 100%; height: auto; object-fit: contain; } 
.mt80 { margin-top: 8rem; } 
/* 공간 선택 */
.space-type { max-width: var(--contentWidth); margin: 0 auto; display: flex; flex-direction: column; align-items: center; padding: 4rem 0; gap: 2rem; } 
.space-type__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; padding: 8rem 0; } 
.space-type > h3 { font-size: clamp(2.4rem, 1.2rem + 1.5vw, 4rem); font-weight: 700; line-height: 130%; /* 5.2rem */
letter-spacing: -0.16rem; } 
.space-card { display: flex; height: 36rem; padding: 4rem; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 1rem; flex: 1 0 0; aspect-ratio: 1/1; } 
.space-card p { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); font-weight: 700; color: #FFF; letter-spacing: -0.096rem; } 
.space-card span { color: #FFF; font-size: 1.6rem; font-weight: 300; line-height: 150%; /* 2.4rem */
letter-spacing: -0.064rem; } 
.house-product .section-header { width: 100%; height: 42rem; position: relative; } 
.house-product .section-header .sec__header__bg { height: 42rem; background-size: cover; background-repeat: no-repeat; } 
.house-product.module-house .section-header .sec__header__bg { background: url(/img/house/bs-product-secBG-1.png); } 
.house-product.shelter .section-header .sec__header__bg { background: url(/img/house/bs-product-secBG-2.png); } 
.house-product.passive-house .section-header .sec__header__bg { background: url(/img/house/bs-product-secBG-3.png); } 

/* Section Header */
.house-product .section-header .highlight { display: flex; width: 44rem; height: 38rem; padding: 6rem 4rem; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4rem; flex-shrink: 0; background: linear-gradient(122deg, #EE7222 0%, #FA9D40 100%); box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.15); position: absolute; right: 21rem; top: 12rem; } 
.house-product .section-header p { color: #FFF; font-size: 2rem; font-weight: 700; line-height: 100%; /* 2rem */
letter-spacing: -0.08rem; } 
.house-product .section-header .text { display: flex; flex-direction: column; align-items: flex-start; gap: 8rem; width: var(--contentWidth); margin: 0 auto; padding: 11rem 0 0 4rem; } 
.house-product .section-header .text h3 { color: #FFF; font-size: clamp(2.4rem, 1.6rem + 1.5vw, 4.8rem); font-weight: 800; line-height: 150%; letter-spacing: -0.192rem; margin-bottom: 2rem; } 
.house-product .section-header .text span { color: #FFF; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 300; line-height: 150%; /* 3.6rem */
letter-spacing: -0.096rem; } 
.highlight span { color: #FFF; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); font-weight: 300; line-height: 130%; /* 3.12rem */
letter-spacing: -0.096rem; } 
.highlight h2 { color: #FFF; font-size: clamp(2.4rem, 1.2rem + 1.5vw, 4rem); font-weight: 700; line-height: 130%; /* 5.2rem */
letter-spacing: -0.16rem; } 
.bs-points { max-width: var(--containerWidth); margin: 0 auto; } 
.bs-points .section-sub-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 300; line-height: 100%; /* 2rem */
letter-spacing: -0.08rem; } 
.bs-points .steps .d-flex { display: flex; align-items: center; gap: 2rem; } 
.bs-points .steps span { font-size: clamp(1.5rem, 1.35rem + 0.4vw, 1.8rem); font-weight: 300; letter-spacing: -0.072rem; } 
/* Feature List */
.feature-list { list-style:none; padding:0; margin:2rem 0; display:grid; gap:1rem; } 
.feature-list li strong { color:#F97316; margin-right:0.5rem; } 

/* Case Grid */
.p0 { padding: 0 !important; } 
.case-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* 2열 */
grid-template-rows: repeat(2, 1fr); /* 2행 */
gap: 2rem; /* 카드 간격 */
max-width: 80rem; /* 원하는 전체 폭 */
width: 100%; } 
.case-grid .case { display: flex; max-width: 40rem; width: 100%; height: 25rem; padding: 2rem; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 1rem; flex-shrink: 0; background-repeat: no-repeat; background-size: cover; border-radius: 1rem; overflow: hidden; width: 100%; } 
.case-flex .case span, .case-grid .case span { color: #FFF; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); font-weight: 500; } 
.case-flex { display: flex; display: flex; width: 88rem; align-items: flex-start; gap: 2rem; } 
.case-flex .case { display: flex; height: 25rem; padding: 2rem; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 1rem; border-radius: 2rem; overflow: hidden; width: 100%; } 
/* borad CSS 추가 */
.board { /* padding: 4rem 0; */
width: 100%; } 
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0 } 

/* Tabs */
.board-tabs { margin-top:1rem } 
.tabs { display:flex; gap:1.25rem; border-bottom:1px solid var(--line) } 
.tabs a { display:inline-block; padding:1rem 0.25rem; font-weight:600; color:#6B7280; position:relative } 
.tabs .is-active a,
.tabs a:hover { color:var(--ink) } 
.tabs .is-active a::after,
.tabs a:hover::after { content:""; position:absolute; left:0; bottom:-1px; height:3px; width:100%; background:var(--ink); } 
.tabs .is-active a::after { background:var(--primary) } 

/* CTA */
.board-cta { display:flex; padding:2.5rem 0 } 
.btn-cta { display: flex; width: 37.9rem; height: 12rem; padding: 0 4rem; justify-content: space-between; align-items: center; flex-shrink: 0; border-radius: 1.2rem; background: var(--colotEE6811); transition: transform 0.3s ease; } 
.btn-cta span { color: #FFF; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); font-weight: 300; line-height: 130%; /* 3.12rem */
letter-spacing: -0.096rem; } 
.btn-cta span strong { color: #FFF; font-weight: 600; } 
.btn-cta:hover { transform: translateX(-1rem); } 
.btn-cta img { width: 4rem; height: 4rem; } 
/* Table */
.table-wrap
 {
 } 
.table { width:100%; border-spacing:0 } 
.table thead th { font-size: 1.6rem; font-weight: 500; line-height: 130%; /* 2.34rem */
padding: 1.6rem; vertical-align: middle; } 
thead tr { border-bottom: 1px solid #E8E8E8; background: var(--color-sub02); } 
.table tbody td { padding: 1.6rem; border-bottom: 1px solid var(--line); font-size: 1.6rem; font-weight: 300; line-height: 130%; /* 2.34rem */
letter-spacing: -0.072rem; text-align: center; vertical-align: middle; /* display: table-cell !important; */ } 
.table tbody tr { cursor: pointer; } 
.table tbody tr:hover td { background:#FAFAFB } 
.table .title a { } 
.badge { } 
.status { font-size: 1.6rem; font-weight: 700; } 
.status--wait { color:var(--colotEE6811) } 
.status--done { color:var(--color999) } 

/* Pagination */
.pagination { display:flex; justify-content:center; align-items:center; gap:.8rem; margin: 2rem auto; } 
.pagination .page { display: flex; width: 4rem; height: 4rem; flex-direction: column; justify-content: center; align-items: center; border-radius: .6rem; background: var(--colorfff); font-size: 1.7rem; } 
.pagination .page:hover { background:var(--color-sub02); } 
.pagination .is-current { background:var(--colotEE6811); color:#fff } 
.pagination .is-current:hover { background:var(--colotEE6811); color:#fff } 
.pagination .prev,.pagination .next { font-weight:700 } 
.pagination .more { padding:0 .25rem; color:#94A3B8 } 
.pagination a { display: flex; width: 4rem; height: 4rem; flex-direction: column; justify-content: center; align-items: center; border-radius: .6rem; background: var(--colorfff); font-size: 1.7rem; } 
.pagination a:hover { background:var(--color-sub02); } 
.pagination a.pageNow { background:var(--colotEE6811); color:#fff } 
.pagination a.pageNow:hover { background:var(--colotEE6811); color:#fff } 
@media (max-width:420px){
 .btn-cta { width: 100%; height: 8rem; } 
 }



/* 갤러리형 게시판 */
.gallery-board { width: 100%; margin:0 auto; } 
.gallery-board > .bs-container { padding: 2rem 0; /* gap: 2rem; */ } 
/* Grid */
.gallery-list .flex { display: flex; align-items: center; gap: 8rem; align-self: stretch; flex-wrap: wrap; } 
.gallery-list .card { max-width: 42rem; /* flex: 1 0 0; */
padding: 0; border: 0; display: flex; flex-direction: column; gap: 2rem; width: 100%; } 
.card a { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; } 
.thumb { position:relative; border-radius:.75rem; overflow:hidden; aspect-ratio:16/9; background:#ccc; } 
.thumb img { width:100%; height:100%; object-fit:cover; } 
.meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; } 
.meta .writer { font-size: 1.6rem; font-weight: 200; line-height: 100%; /* 1.4rem */
letter-spacing: -0.056rem; } 
.meta .title { font-size: clamp(1.5rem, 1.35rem + 0.4vw, 1.8rem); font-weight: 600; line-height: 100%; /* 1.8rem */
letter-spacing: -0.072rem; } 

/* contents 반응형 */
.contents { padding-bottom: 8rem; } 
@media (max-width:960px){
 .contents { padding: 0 2rem; gap: 1rem; } 
.bs-intro, .bs-hero, .bs-problems, .bs-promises, .bs-points, .bs-company, .bs-cta { padding: 2rem 0; gap: 1rem; } 
.sec.results { padding: 0 !important; } 
.filters.sub .chip-row.single { padding: 0; } 
.way-places li::before { padding: 0; width: 2rem; height: 2rem; background-size: contain; } 
.way-places li { padding: 1rem 0; } 
.business .business_intro { padding: 4rem 2rem; flex-direction: column; } 
.business_intro__inner { margin-bottom: 2rem; } 
.points-card { display: flex; padding: 4rem 2rem; gap: 2rem; flex-direction: column; } 
.points-card .steps li { padding: 2.4rem; gap: 1rem; } 
.house-product .section-header .text { width: 100%; gap: 4rem; padding: 6rem 0; } 
.case-grid .case { height: 16rem; } 
.house-product .section-header .highlight { display: flex; width: calc(100% - 4rem); height: 24rem; padding: 3rem; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2rem; flex-shrink: 0; background: linear-gradient(122deg, #EE7222 0%, #FA9D40 100%); box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.15); position: absolute; right: 2rem; top: 32rem; } 
.house-product .section-header { margin-bottom: 14rem; } 
.house-product .section-header .sec__header__bg { padding: 0 2rem; } 
.house-product .section-header .text span br { display: none; } 
.case-flex { width: 100%; flex-direction: column; } 
.case-flex .case { width: 100%; background-size: cover !important; background-repeat: no-repeat !important; } 
.bs-hero .headline { font-size: clamp(2rem, 1.6rem + 1.5vw, 4.8rem); font-weight: 600; letter-spacing: -0.192rem; margin: 2rem; text-align: center; line-height: 150%; } 
.bs-hero > .bs-container { padding: 4rem 0; } 
.section-title { font-size: clamp(2rem, 1.2rem + 1.5vw, 4rem); font-weight: 700; line-height: 150%; } 
.card4 { flex-direction: column; } 
.bs-promises .promise3 { gap: 2rem; flex-direction: column; } 
.promise3 p { width: 72%; text-align: center; line-height: 150%; } 
.promise3 .circle { gap: 1rem; } 
.promise3 .circle img { width: 5rem; height: 5rem; } 
.bs-points .points-card { padding: 0 2rem; } 
.metrics { flex-direction: column; } 
.metric { width: 24rem; height: 24rem; gap: .4rem; } 
p.sub br { display: none; } 
.cta-feats { flex-direction: column; width: 100%; } 
.bs-h2 { font-size: clamp(2.2rem, 1.2rem + 1.5vw, 4rem); } 
.feat { width: 100%; } 
.acc--brand { padding: 2rem; gap: 2em; align-items: flex-start; height: max-content; } 
.logo-grid { width: 100%; } 
.logo_img_wrap { flex-direction: column; gap: 2rem; width: 100%; } 
.logo_img_wrap img { width: 100%; } 
.logo-grid > div { flex-direction: column; gap: 2rem; } 
.logo-grid h3 { font-size:2rem; width: 100%; max-width: 18rem; } 
.filters.sub #filters .filters-box .filter { flex-direction: column; gap: 10px; justify-content: flex-start; align-items: flex-start; } 
.filters.sub #filters .filters-box .filter .chip-row.multi .chip label { min-width: auto; } 
.filters.sub #filters.none .filters-box .chip-row.multi { padding: 0 !important; } 
.filters.sub #filters.active .cta-wrap .cta-btn { height: 48px; width: auto; padding: 0 10px; } 
 }
@media (max-width:440px){
 .way-places address { font-size: 1.4rem; } 
.way-places .title { display: block; min-width: 7rem; } 

.way-places li::before { content: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 19 25' fill='none'><g clip-path='url(%23clip0_327_6957)'><path d='M8.48922 0.925859C4.3319 1.36623 0.963564 4.63166 0.451486 8.71438C0.155619 11.0767 0.800458 13.2785 2.05979 15.0251L8.20473 23.4704C8.84198 24.3437 10.1582 24.3437 10.7955 23.4704L16.9404 15.0251C17.9949 13.5622 18.6208 11.7783 18.6208 9.84889C18.6208 4.56448 13.9779 0.343679 8.48922 0.925859ZM9.50199 13.189C7.40816 13.189 5.70882 11.5171 5.70882 9.45704C5.70882 7.39702 7.40816 5.72511 9.50199 5.72511C11.5958 5.72511 13.2952 7.39702 13.2952 9.45704C13.2952 11.5171 11.5958 13.189 9.50199 13.189Z' fill='%23007DFD'/></g><defs><clipPath id='clip0_327_6957'><rect width='19' height='24' fill='white' transform='translate(0 0.5)'/></clipPath></defs></svg>"); display: inline-block; display: flex; width: 2rem; height: 2rem; } 
 }



/* FAQ 아코디언 형식 게시판 */
.faq-board { width: 100%; } 
/* Accordion */
.accordion { list-style:none; margin:0; padding:0; border-top:2px solid #303030; } 
.accordion-item { width: 100%; } 
.accordion-header { display: flex; width: 100%; padding: 2rem 0; justify-content: space-between; align-items: center; font-size: clamp(1.5rem, 1.35rem + 0.4vw, 1.8rem); font-weight: 600; line-height: 100%; /* 1.8rem */
letter-spacing: -0.072rem; cursor:pointer; transition:background .2s; padding: 2rem 0; border-bottom: 1px solid var(--line); } 
.accordion-header:hover { background:#FAFAFA; } 
.accordion-header .icon { transition:transform .3s ease; } 
.accordion-item.active .accordion-header .icon { transform:rotate(180deg); } 
.accordion-body { max-height:0; overflow:hidden; transition:max-height 0.3s ease-in-out; } 
.accordion-body p { font-size: 1.6rem; font-weight: 400; line-height: 150%; /* 2.4rem */
 letter-spacing: -0.064rem; padding: 0.3rem 0; } 
.accordion-item.active .accordion-body { max-height:500px; } 

/* *표 */
.req { color: var(--colorFF4B4B); margin-left: .4rem; } 
/* 상담신청 폼 */
.fieldset-title { display: flex; height: 7rem; align-items: center; gap: 1rem; border-bottom: 2px solid #303030; font-size: 2rem; font-weight: 600; line-height: 130%; /* 2.6rem */
letter-spacing: -0.08rem; margin-bottom: 2rem; } 
.field-group { display: flex; align-items: center; gap: 1.6rem; width: 100%; } 
.field-group .form-conts , .field-group .input-wrap { width: 100%; } 
.field-group .form-tit { min-width: 10rem; } 
.field-group .form-select { width: 100%; } 
.grid-2 > .row { display: flex; align-items: center; gap: 1.6rem; } 
.editor-group { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.6rem; align-self: stretch; } 
.custom-group { padding: 2rem 0; } 
.custom_checkbox label , .custom_radio label { font-size: 1.6rem; } 
.consult-viewer { border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; background: #fff; } 
#c-viewer { width: 100%; } 
.my20 { margin: 2rem 0; } 
.input-file ~ label { display: flex; width: 16rem; height: 4.8rem; justify-content: center; align-items: center; gap: 1rem; border-radius: 0.4rem; border: 1px solid #303030; background: #303030; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10); color: #FFF; opacity: 1; transition: opacity 0.2s ease; } 

.input-file ~ label:hover { opacity: 0.9; } 
.consult-file { display: flex; gap: .4rem; } 
.consult-file input[type="text"] { width: 32rem; height: 4.8rem; } 
.btn-add { display: flex; width: 4.8rem; height: 4.8rem; justify-content: center; align-items: center; gap: 1rem; border-radius: 0.4rem; border: 1px solid #303030; background: #FFF; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10); } 
.bt-btn-wrap { display: flex; align-items: flex-start; gap: 2rem; } 
.label_btn { display: flex; height: 2.4rem; padding: 1rem; justify-content: center; align-items: center; gap: 1rem; border-radius: 0.4rem; border: 1px solid #999; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10); font-size: 1.3rem; font-weight: 500; line-height: 100%; /* 1.3rem */
letter-spacing: -0.052rem; } 
.custom_checkbox label strong { font-weight: 600; } 
.confirm { width: 100%; display: flex; padding: 4rem 0; flex-direction: column; align-items: center; gap: 2rem; } 
.confirm .consult-actions button { width: 20rem; } 
.d-flex.center { align-items: center; justify-content: center; } 
.add-file-wrap { display: flex; flex-direction: column; gap: 1rem; } 
@media (max-width:960px){
 .grid-2 > .row { flex-direction: column; gap: 1rem; } 
.custom-group { flex-wrap: wrap; } 
.field-group { gap: 1rem; align-items: flex-start; } 
.field-group .form-tit { min-width: 8rem; padding: 2rem 0; } 
.consult-file input[type="text"] { width: 100%; height: 4.8rem; } 
.input-file ~ label { width: 100%; max-width: 10rem; font-size: 1.4rem; padding: 0 1rem; } 
.confirm .consult-actions button { width: 100%; } 
 }


.terms__content { font-size: 1.4rem; line-height: 150%; } 
.terms__content h3 { font-size: 1.6rem; font-weight: 600; margin: 1rem 0; } 
.popup-contents { max-height: 60vh; overflow-y: scroll; } 



/* 이용안내 */
.consult-process { width: 100%; } 

/* Hero */
.hero_sub { border-radius: 1.6rem; overflow: hidden; } 
.hero_sub img { width: 100%; height: auto; display: block; } 

/* Intro */
.intro { margin: 4rem auto; padding: 0 1rem; text-align: center; width: 100%; max-width: var(--contentWidth); } 

.intro h2 { color: #EE6811; font-size: clamp(1.6rem, 2.4vw, 2.4rem); font-weight: 700; line-height: 130%; /* 3.12rem */
 letter-spacing: -0.096rem; } 
.intro .subtitle { font-size: clamp(2rem, 2.4vw, 4rem); font-weight: 700; line-height: 130%; /* 5.2rem */
letter-spacing: -0.16rem; } 
.intro .desc { font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 300; line-height: 130%; /* 2.34rem */
letter-spacing: -0.072rem; } 
.consult-process .intro { } 
.consult-process .intro > div { } 
.t-left { text-align: left; } 
/* Steps */
.consult-process .steps { display: grid; grid-template-columns: repeat(4, 1fr); padding: 4rem 0; gap: 1rem; } 
.consult-process .step { display: flex; padding: 2.4rem; flex-direction: column; align-items: flex-start; gap: 2rem; align-self: stretch; border-radius: 1.2rem; background: #F7F7F7; overflow: hidden; } 
.consult-process .step-num { color: #EE6811; text-align: right; font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 700; line-height: 130%; /* 2.6rem */
letter-spacing: -0.08rem; width: 100%; } 
.steps .step h3 { font-size: clamp(1.8rem, 2.4vw, 2.4rem); font-weight: 700; line-height: 130%; /* 3.12rem */
letter-spacing: -0.096rem; } 
.steps .step p { color: #303030; font-size: 1.5rem; font-weight: 300; line-height: 150%; /* 2.25rem */
letter-spacing: -0.075rem; text-align: left; } 
/* Principle Section */
.principle { /* background: #fafafa; */
padding: 4rem 1rem; text-align: center; width: var(--contentWidth); margin: 0 auto; } 
.principle h3 { font-size: clamp(2rem, 2.4vw, 4rem); font-weight: 700; line-height: 130%; /* 5.2rem */
letter-spacing: -0.16rem; } 
.principle span { font-size: clamp(1.6rem, 2.4vw, 1.8rem); font-weight: 300; line-height: 130%; /* 2.34rem */
letter-spacing: -0.072rem; } 
.principle .cards { display: flex; justify-content: center; align-items: center; gap: 2rem; align-self: stretch; /* height: 32rem; */ } 
.principle .cards .card { width: 100%; max-width: 32rem; aspect-ratio: 1 / 1; padding: clamp(1.6rem, 4vw, 4rem); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: clamp(1rem, 2.5vw, 2rem); border-radius: 1.2rem; background-size: cover; overflow: hidden; background-repeat: no-repeat; background-position: center; } 
.principle .card img { width: 8rem; height: 8rem; } 
.principle .card p { color: #FFF; font-size: clamp(1.5rem, 1.35rem + 0.4vw, 1.8rem); font-weight: 400; line-height: 130%; /* 2.34rem */
text-align: left; } 




/* Base */
.purchase-process { color: #303030; line-height: 1.65; } 

/* Hero */
.purchase-process .hero_sub img { display:block; width:100%; height:auto; object-fit:cover; } 

/* Title */
.title-block { max-width:var(--contentWidth); width: 100%; margin: 2rem auto 2rem; } 
.title-block h1 { font-weight: 800; letter-spacing:-0.02em; margin: 0 auto; font-size: clamp(2.4rem, 1.6rem + 1.5vw, 4.8rem); font-weight: 700; line-height: 130%; /* 5.2rem */
letter-spacing: -0.16rem; text-align: left; margin-bottom: 2rem; } 
.title-block .lead { font-size: clamp(1.6rem, 1.3rem + 0.6vw, 2rem); } 

/* Flow */
.flow { max-width:1200px; margin:2rem auto 4rem; padding:0 1rem; } 
.flow__title { font-size: clamp(1.25rem, 2.3vw, 1.6rem); font-weight: 800; margin:0 0 1.25rem; } 
.flow__title .q { display:block; color:#EE6811; font-size:.9rem; font-weight:700; margin-bottom:.25rem; } 

.flow__grid { display:grid; grid-template-columns: 1fr; gap:2rem; padding: 4rem 0; } 
@media (min-width: 960px){
 .flow__grid { grid-template-columns: 1fr 1fr; gap:1.25rem; } 
 }

.flow-card { display: flex; /* width: 74rem; */
padding: 3rem; align-items: center; gap: 4rem; border-radius: 1.2rem; border: 1px solid #E8E8E8; background: #FFF; } 
.flow-card__head { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; flex: 1 0 0; } 
.flow-card .icon { display: flex; width: 10rem; height: 10rem; justify-content: center; align-items: center; flex-shrink: 0; aspect-ratio: 1/1; border-radius: 99.9rem; background: #F3F4F6; overflow: hidden; } 
.flow-card .icon img { width: 100%; } 
.flow-card .step { color: var(--color-main); font-size: clamp(1.6rem, 1.3rem + 0.6vw, 2rem); font-weight: 700; line-height: 130%; /* 2.6rem */
letter-spacing: -0.08rem; } 
.flow-card__title { color: #303030; font-size: 2.4rem; font-weight: 700; line-height: 130%; /* 3.12rem */
letter-spacing: -0.096rem; } 
/* .flow-card__list { } */
.flow-card__list li { font-size: 1.5rem; font-weight: 300; line-height: 150%; /* 2.25rem */
letter-spacing: -0.075rem; text-align: left; display: flex; align-items: center; gap: 1rem; } 
.flow-card__list li::before { content: ""; display: flex; width: 0.4rem; height: 0.4rem; border-radius: 4rem; background: #999; } 
/* Highlights band */
.highlights { background: #F3F4F6; padding: 8rem 0; } 
.highlights > .container { width: 100%; max-width: var(--contentWidth); margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 4rem; } 
.highlights .subtitle { font-size: clamp(2.4rem, 1.6rem + 1.5vw, 4rem); font-weight: 700; line-height: 130%; /* 5.2rem */
letter-spacing: -0.16rem; } 
.highlights__grid { width: 100%; margin:0 auto; display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; } 
@media (min-width: 960px){
 .highlights__grid { grid-template-columns: repeat(4, 1fr); gap:1.25rem; } 
 }
.hi-card { display: flex; padding: 3rem; flex-direction: column-reverse; align-items: flex-end; flex: 1 0 0; border-radius: 1.2rem; background: #FFF; border: var(--colorEAEDF4) 1px solid; } 
p.subtitle { font-size: clamp(1.5rem, 1.35rem + 0.4vw, 2.4rem); font-weight: 600; margin-bottom: 2rem; } 
.hi-card img { width: 8rem; height:8rem; object-fit:contain; } 
.hi-card p { width: 100%; font-size: clamp(1.5rem, 1.35rem + 0.4vw, 1.8rem); font-weight: 500; line-height: 140%; /* 2.8rem */
text-align: left; } 
/* Utilities */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } 
.contract-processs { color: #303030; line-height: 1.6; } 


/* Steps */
.contract-process .steps { width: 100%; max-width: var(--contentWidth); margin: 0 auto; padding: 4rem 0; display: flex; gap: 2rem; flex-wrap: wrap; } 

.contract-process .step-card { display: flex; width: 100%; max-width: 38rem; /* height: 28rem; */
padding: 3rem; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2rem; border-radius: 2rem; border: 1px solid #E8E8E8; background: #FFF; } 
.contract-process .step-card .num { color: #FFF; text-align: center; font-size: 2rem; font-weight: 900; line-height: 130%; /* 2.6rem */
letter-spacing: -0.08rem; display: flex; width: 4rem; height: 4rem; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; flex-shrink: 0; border-radius: 9.9rem; background: var(--color-main); } 
.contract-process .step-card h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); font-weight: 700; line-height: 130%; /* 3.12rem */
letter-spacing: -0.096rem; } 
.contract-process .step-card p { color: #303030; font-size: clamp(1.4rem, 1.3rem + 0.3vw, 1.6rem); font-style: normal; font-weight: 300; line-height: 150%; /* 2.25rem */
letter-spacing: -0.075rem; } 
.contract-process .visual { width: 100%; max-width: var(--contentWidth); height: 32rem; margin: 0 auto; border-radius: 2rem; background: url(/img/house/img-contract.png); overflow: hidden; background-size: cover; background-repeat: no-repeat; } 
.contract-process .highlights { background: #FFF; display: flex; width: 100%; max-width: var(--contentWidth); justify-content: center; align-items: center; gap: 2rem; margin: 0 auto; } 
.contract-process .highlights > .highlight { display: flex; padding: 3rem; flex-direction: column; justify-content: center; align-items: flex-end; gap: 1rem; flex: 1 0 0; border-radius: 2rem; border: 1px solid var(--line); background: #FFF; } 
.contract-process .highlights > .highlight .num { color: #505050; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); font-weight: 700; width: 100%; text-align: left; } 
.contract-process .highlights > .highlight p { font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem); font-weight: 500; width: 100%; text-align: left; line-height: 130%; } 
.contract-process .highlights > .highlight .icon { width: 6rem; } 

.rental-service .process { display: flex; padding: 4rem 0; align-items: flex-start; width: 100%; max-width: var(--contentWidth); margin: 0 auto; flex-direction: column; } 
.principle .intro { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; align-self: stretch; } 


/* Process */

.rental-service .process .process__grid { display: grid; grid-template-columns: repeat(5 , 1fr); gap: 1rem; width: 100%; } 
.rental-service .process .process__grid .p-card { display: block; padding: 2rem; border-radius: 1.2rem; background: #F7F7F7; } 
.p-card__head { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1rem; align-self: stretch; } 
.p-card .ico { max-width: 6rem; max-height: 6rem; } 
.p-card .ico img { width: 100%; } 
.p-card .step { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); font-weight: 700; line-height: 130%; /* 3.12rem */
letter-spacing: -0.096rem; } 
.p-card__list li { color: #303030; font-size: clamp(1.4rem, 1.3rem + 0.3vw, 1.6rem); font-weight: 300; line-height: 150%; /* 2.25rem */
letter-spacing: -0.075rem; } 

/* Keypoints */
.keypoints { width: 100%; margin: 0 auto; max-width: var(--contentWidth); } 
.keypoints__grid { width: 100%; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; } 
@media(max-width:960px){
 .keypoints__grid { grid-template-columns:repeat(2,1fr); gap: 1rem; } 
 
.intro { margin: 2rem auto; padding: 0 2rem; text-align: center; width: 100%; max-width: var(--contentWidth); } 
 }
.kp { display: flex; padding: 2.4rem; flex-direction: column; align-items: flex-end; gap: 2rem; flex: 1 0 0; border-radius: 1.2rem; border: 1px solid var(--color-main); background: #FFF; } 
.kp img { display: flex; width: 7.2rem; height: 7.2rem; justify-content: center; align-items: center; } 
.kp p { color: #303030; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); font-weight: 700; line-height: 130%; /* 3.12rem */
letter-spacing: -0.096rem; text-align: left; width: 100%; } 

/* Target (photo + table) */
.rental-service .target { width: 100%; padding: 4rem 0; max-width: var(--contentWidth); } 
.rental-service .target__grid { display: flex; gap: clamp(2rem, 4vw, 6rem); align-items: flex-start; } 
.rental-service .target__table { display:flex; flex-direction: column; align-items: flex-start; gap: 2.5rem; padding: clamp(2rem, 3vw, 5rem) 0; flex: 1 1 0; min-width: 0; } 
.rental-service .target__photo { flex: 0 1 clamp(24rem, 40vw, 80rem); aspect-ratio: 1 / 1; overflow: hidden; min-width: 0; } 
.rental-service .target__photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; } 
.eyebrow { color: #EE6811; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); font-weight: 700; line-height: 130%; /* 1.95rem */
letter-spacing: -0.06rem; } 
.rental-service .target__title { font-size: clamp(2.4rem, 1.6rem + 1.5vw, 3.2rem); font-weight: 700; line-height: 130%; /* 2.6rem */
letter-spacing: -0.08rem; } 

.rental-service .table { border-radius: 1.2rem; border: 1px solid #E8E8E8; } 
.rental-service .table .tr { display: flex; width: 100%; } 
.rental-service .table .tr > div { padding:2rem 0; border-top:1px solid var(--line); font-size: 1.6rem; font-weight: 400; line-height: 130%; /* 2.08rem */
letter-spacing: -0.064rem; text-align: center; width: 100%; } 
.rental-service .table .tr.th { background:#F7F9FB; font-weight:700; height: 7rem; display: flex; align-items: center; justify-content: center; } 
.rental-service .table .tr.th > div { border-top:none; width: 100%; font-size: clamp(1.8rem, 1.3rem + 0.6vw, 2rem); line-height: 130%; /* 2.6rem */
letter-spacing: -0.08rem; text-align: center; font-weight: 700; } 
.rental-service .table .ok { color:#14a44d; font-weight:700 !important; } 
.rental-service .table .limit { color:var(--color-main); font-weight:700 !important; } 

/* Benefits */
.rental-service .benefits { display: flex; width: 100%; max-width: var(--contentWidth); padding: 8rem 0; margin: 0 auto; justify-content: space-between; align-items: flex-start; } 
.benefits h3 { font-size:clamp(1.1rem,2.2vw,1.4rem); font-weight:800; margin:0 0 1rem; } 
.benefits__grid { display:grid; grid-template-columns:repeat(2,2fr); gap:2rem; } 

.b-card { display: flex; width: 40rem; height: 30rem; padding: 4rem; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 2rem; flex-shrink: 0; border-radius: 1.2rem; background-size: cover; overflow: hidden; background-repeat: no-repeat; } 
.b-card img { width:100%; aspect-ratio: 4/3; object-fit:cover; display:block; } 
.b-card__body { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 2rem; } 
.b-card__body .no { color: #FFF; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem); font-weight: 900; letter-spacing: -0.096rem; } 
.b-card__body p { color: #FFF; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.4rem); font-weight: 700; line-height: 130%; /* 3.12rem */
letter-spacing: -0.096rem; } 

/* A11y */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } 



.consult-process .hero_sub { height: 48rem; overflow: hidden; } 




/* 이용안내 반응형 */
/* Responsive */
@media (max-width: 960px){
 .hero_sub { border-radius: 0; } 
 .rental-service .process .process__grid .p-card { padding: 1.6rem; border-radius: 1rem; } 
.option-intro .desc { margin-top: 2rem; } 
.b-card__body { gap: 1rem; } 
 .consult-process { margin-top: 2rem; } 
.contract-process .hero_sub img, .rental-service .hero_sub img ,
 .consult-process .hero_sub img , .purchase-process .hero_sub img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } 
.contract-process .hero_sub , .rental-service .hero_sub,
.consult-process .hero_sub ,.purchase-process .hero_sub { position: relative; max-width: 100vw; height: 24rem; min-height: 24rem; overflow: hidden; border-radius: 0; } 
.consult-process .intro, .purchase-process .intro { flex-direction: column; width: 100%; gap: 2rem; } 
.consult-process .intro > div.steps { width: 100%; margin: 0; padding: 0 1rem; display: grid; grid-template-columns: 1fr; gap: 1rem; } 
.principle { /* background: #fafafa; */
 padding: 0; width: 100%; } 
.principle .cards { flex-wrap: wrap; gap: 1rem; } 
.principle .cards .card { padding: 1.6rem; } 
.principle .card img { width: 5rem; height: 5rem; } 
.highlights { background: #F3F4F6; padding: 8rem 2rem; } 
.contract-process .steps { padding: 4rem 2rem; } 
.contract-process .highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 2rem; } 
.contract-process .highlights > .highlight { padding: 2rem; } 
.contract-process .visual { height: 24rem; border-radius: 0rem; background: url(/img/house/img-contract.png) center center; } 
.contract-process .highlights > .highlight { width: 100%; } 
.title-block { padding: 0 2rem; } 
.flow__grid { gap: 1rem; padding: 0rem 0; grid-template-columns: repeat(2, 1fr); } 
.flow-card .icon { width: 6rem; height: 6rem; } 
.rental-service .process { padding: 4rem 2rem; flex-direction: column; } 
.rental-service .process .process__grid { padding: 0; grid-template-columns: repeat(2, 1fr); } 
.points-card .steps { grid-template-columns: repeat(2, 1fr); padding: 2rem 0; } 
.keypoints { padding: 0 2rem; } 
.kp { padding: 1.6rem; gap: 1rem; border-radius: 1rem; } 
.kp img { display: flex; width: 4rem; height: 4rem; justify-content: center; align-items: center; } 
.rental-service .target__grid { flex-direction: column; gap: 2rem; padding: 0 2rem; } 
.rental-service .target__table { padding: 2rem 0; gap: 2rem; } 
.rental-service .benefits { padding: 0 2rem; flex-direction: column; } 
.benefits__grid { display: grid; grid-template-columns: repeat(2,2fr); gap: 1rem; } 

.b-card { width: 100%; height: auto; max-height: auto; aspect-ratio: 4 / 3; padding: 2rem; gap: 1rem; } 
.rental-service .target__photo { width: 100%; } 
.rental-service .target__table { width: 100%; } 

.filters.sub .container { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 2rem; align-self: stretch; width: 100%; background-color: #fff; padding: 3rem; border: 1px solid var(--line); border-radius: 1.2rem; } 
 }
@media (max-width:440px){
 .principle .card p { font-size: 1.4rem; } 
 .principle .cards .card { display: flex; width: 16rem; height: 16rem; padding: 1.6rem; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 2rem; border-radius: 1.2rem; background-size: cover; overflow: hidden; background-repeat: no-repeat; } 
 .principle .card img { width: 4rem; height: 4rem; } 
 .highlights__grid { grid-template-columns: repeat(2, 1fr); padding: 0 2rem; } 
.flow-card { padding: 1.6rem; gap:2rem; flex-direction: column; } 
.flow-card__head { width: 100%; } 
.hi-card img { width: 5rem; height: 5rem; object-fit: contain; } 
.flow-card__title { font-size: 1.8rem; text-align: left; } 
.flow-card__list li { font-size: 1.3rem; } 
p.subtitle { margin-bottom: 1rem; padding: 0 2rem; } 
.hi-card { padding: 2rem; } 
.table-wrap { overflow-x: scroll; } 
.table { min-width: 100rem; } 
.board-cta { padding: 0; margin-bottom: 1rem; } 
 }




/* 게시판 뷰어 */
.board-viewer { width: 100%; } 

.board-btn-list { display: flex; align-items: center; align-items: .8rem; padding: 2rem; transition: transform 0.3s ease; } 
.board-btn-list:hover { transform: translateX(-10px); } 
.board-btn-list::before { content: ""; display: flex; width: 2.4rem; height: 2.4rem; background: url(/img/house/icon-prev.svg) center center no-repeat; } 
.board-btn-list span { font-size: clamp(1.5rem, 1.35rem + 0.4vw, 1.8rem); } 
.board-view-info { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 3.2rem 1.6rem; border-bottom: 1px solid var(--line); border-top: 2px solid var(--color333); } 
.board-view-info .board-view-title { font-size: clamp(1.6rem, 1.3rem + 0.6vw, 2.4rem); font-weight: 600; } 
.board-view-date { font-size: clamp(1.4rem, 1.3rem + 0.3vw, 1.6rem); font-weight: 500; color: var(--color-sub03); } 
.board-view-contents { padding: 3.2rem 1.6rem; line-height: 150%; font-size: clamp(1.5rem, 1.41vw, 1.8rem); border-bottom: 1px solid var(--line); } 
.board-view-nav.board-view-container { padding: 3.2rem 0; } 
.board-view-nav.board-view-container .layout-inner { display: flex; align-items: center; justify-content: space-between; font-size: 1.6rem; } 
.ds-btn.outlined { padding: 1.6rem 3.2rem; font-size: clamp(1.6rem, 1.3rem + 0.6vw, 2rem); font-weight: 600; } 
.board-view-nav .nav-link { display: flex; align-items: center; gap: 1rem; font-size: clamp(1.5rem, 1.35rem + 0.4vw, 1.8rem); } 
.board-view-nav .nav-link svg { margin-top: -4px; } 
.view-more-btn { width: 24rem; text-align: center; } 
.flex-center { width: 100%; display: flex; align-items: center !important; justify-content: center !important; } 




/* 상담 상세 */
/* ===== 상세 공통 ===== */
.consult-detail .detail-head { display: flex; justify-content: space-between; padding: 3rem 0; /* border-bottom: 2px solid var(--color-sub03); */
 border-top: 1px solid #333; /* margin-bottom: 2rem; */
 align-items: center; } 
.consult-detail .detail-head .viewer { font-size: clamp(1.6rem, 1.4rem + 0.6vw, 2.2rem); font-weight: 600; display: flex; align-items: center; gap: 1rem; } 
.detail-meta { display: flex; gap: 1.2rem; color: var(--color666, #666); font-size: 1.6rem; } 
.detail-meta .meta-item b { margin-right: .6rem; color:#333; font-weight:600; } 
.meta-label { font-size: 1.5rem; font-weight: 700; padding: 0.4rem 1rem; border-radius: 99rem; color: #FFF; background: var(--color-sub03); } 
.meta-label.style2 { background: var(--color428AF6); } 
.meta-label.style1 { background: var(--colotEE6811); } 
/* ===== 표(View) ===== */
.board-view { border-top: 1px solid #222; } 
.table-view { width:100%; border-collapse: collapse; table-layout: fixed; } 
.table-view th,
.table-view td { border-bottom:1px solid #EAEAEA; padding: 2rem; vertical-align: top; } 
.table-view th { background:#FBFBFC; color:#303030; text-align:left; font-weight:600; font-size: clamp(1.5rem, 1.41vw, 1.8rem); } 
.table-view td { font-weight: 400; font-size: 1.7rem; } 

/* 칩/리스트 */
.chip-list { display:flex; flex-wrap:wrap; gap:.8rem; } 
.chip-list li { padding:.4rem .9rem; border-radius:999px; background:#F4F4F4; font-size:1.6rem; } 

/* 뷰어 컨텐츠(본문) */
.viewer-content { line-height:1.7; } 
.viewer-content h3 { font-size:1.8rem; margin: .2rem 0 1rem; } 
.viewer-content p + p { margin-top:.6rem; } 
.viewer-content ul { padding-left:1.4rem; list-style:disc; } 
.viewer-content .viewer-img { margin-top:1.2rem; } 
.viewer-content .viewer-img img { display:block; width:100%; height:auto; border-radius:.6rem; } 
.viewer-content .viewer-img figcaption { margin-top:.4rem; font-size:1.3rem; color:#666; } 

/* 파일 리스트 */
.file-list { display:flex; flex-direction:column; gap:2rem; } 
.file { display:inline-flex; align-items:center; gap:1rem; text-decoration: none; } 
.file:hover { text-decoration: underline; } 
.file-ic { width: 2rem; height: 2rem; display: inline-block; background: url("data:image/svg+xml; utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M15.0002 2.40002V6.00002C15.0002 6.66277 15.5375 7.20002 16.2002 7.20002H19.8002M8.4002 7.20002H10.8002M8.4002 10.8H15.6002M8.4002 14.4H15.6002M18.0002 4.20002C17.4661 3.72217 16.9119 3.1554 16.5621 2.7873C16.3292 2.54236 16.0076 2.40002 15.6696 2.40002H6.59992C5.27444 2.40002 4.19993 3.47453 4.19992 4.80001L4.19983 19.2C4.19982 20.5254 5.27433 21.6 6.59982 21.6L17.3999 21.6C18.7253 21.6 19.7998 20.5255 19.7999 19.2001L19.8002 6.47786C19.8002 6.17102 19.6831 5.87606 19.4702 5.65516C19.0764 5.24667 18.4188 4.57454 18.0002 4.20002Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; } 


/* 약관 표시 라인 */
.agree-line { display:flex; align-items:center; gap:1.2rem; margin:2.4rem 0 0; } 
.agree-chip { padding:.6rem 1rem; border-radius:.6rem; background:#F7F8FA; font-size:1.4rem; color:#333; } 
.label_btn { font-size:1.4rem; color:#5670EF; text-decoration:underline; } 

/* 버튼/액션 */
.detail-actions { display:flex; align-items:center; justify-content:flex-end; gap:1rem; margin-top:2.4rem; } 
.detail-actions .gap { flex:1; } 
/* .btn { display:inline-flex; align-items:center; justify-content:center; padding:1.2rem 1.8rem; border-radius:999px; font-weight:600; } 
.btn--lg { padding:1.4rem 2.2rem; } 
.btn--primary { background:#D42A54; color:#fff; } 
.btn--secondary { background:#F4F4F4; color:#303030; } 
.btn--line { background:#fff; color:#303030; border:1px solid #E0E0E0; } */



/* ===== 반응형 ===== */
@media (max-width: 960px){
 .table-view colgroup { display:none; } 
 .table-view th, .table-view td { display:block; width:100%; padding: 2rem; border-bottom:none; } 
 .table-view tr { border-bottom:1px solid #EEE; } 
 .table-view th { background:#fff; color:#333; padding-bottom:.4rem; } 
 .detail-actions { flex-wrap:wrap; } 
 .pn-nav { grid-template-columns:1fr; } 
 }







.product-gallery .swiper { width: 100%; } 
.product-gallery .gallery-thumbs { width: 100%; min-width: 0; } 
 .product-gallery .mySwiper .swiper-wrapper.thumbs-centered,
 .product-gallery .mySwiper4 .swiper-wrapper.thumbs-centered { justify-content: center; width: 100%; } 

.swiper.mySwiper3 .swiper-slide { width: 100% !important; } 


/* 툴바 */
/* 컨테이너 (상단 검은 바 느낌) */
.board-toolbar { border-bottom: 1px solid #E8E8E8; display: flex; height: 10rem; padding: 3.9rem 0; flex-direction: column; align-items: flex-end; gap: 1rem; align-self: stretch; } 
.board-toolbar .sort-group { width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 2rem; } 

/* 탭 버튼 */
.sort-tab { color: #999; font-size: clamp(1.5rem, 1.41vw, 1.8rem); font-weight: 400; line-height: 100%; /* 1.8rem */
 letter-spacing: -0.072rem; font-family: suit; } 
.sort-tab:is(:hover,:focus-visible) { color:var(--color-main); outline:none; } 
.sort-tab.is-active { color: #303030; font-size: clamp(1.5rem, 1.41vw, 1.8rem); font-weight: 400; line-height: 100%; /* 1.8rem */
 letter-spacing: -0.072rem; } 

/* 가격 드롭다운 */
.sort-dropdown { position:relative; } 
.sort-tab.has-caret { display:inline-flex; align-items:center; gap:6px; } 
.sort-tab.has-caret .caret { transition:transform .2s ease; color:#EE6811; /* 주황 포인트 */ } 
.sort-dropdown[aria-open="true"] .caret { transform:rotate(180deg); } 

/* 메뉴 */
.menu_tool { position:absolute; right:0; top:100%; margin-top:8px; min-width:140px; background:#111; border:1px solid rgba(255,255,255,.08); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.28); padding:6px; display:none; z-index:20; } 
.sort-dropdown[aria-open="true"] .menu { display:block; } 

.menu_tool li { list-style:none; padding:10px 12px; border-radius:8px; color:#D0D0D0; cursor:pointer; } 
.menu_tool li[aria-selected="true"] { color:#FFF; background:rgba(238,104,17,.12); } 
.menu_tool li:hover, .menu li:focus { background:rgba(255,255,255,.06); outline:none; } 

/* 포커스 링 */
.sort-tab:focus-visible,
.menu_tool li:focus { outline:2px solid #EE6811; outline-offset:2px; } 

/* 스크롤바 미니 */
.board-toolbar .sort-group::-webkit-scrollbar { height:6px; } 
.board-toolbar .sort-group::-webkit-scrollbar-thumb { background:rgba(255,255,255,.16); border-radius:4px; } 

/* 축약 반응형 (선택) */
@media (max-width: 480px){
 .sort-group { gap:12px; padding:8px 12px; } 
 .sort-tab { font-size:13px; } 
 }



/* 부가옵션 */
.option-intro { display: flex; } 
.option-intro .desc { margin-top: 4rem; } 
.auto__list { display: flex; align-items: flex-start; gap: 2rem; align-self: stretch; margin-top: 4rem; } 
.auto__list li { width: 100%; display: flex; padding: 3rem; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2rem; flex: 1 0 0; border-radius: 2rem; border: 1px solid #E8E8E8; background: #FFF; } 
.auto__list li span { display: flex; width: 4rem; height: 4rem; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; border-radius: 9.9rem; background:#EE6811; color: #FFF; text-align: center; font-size: clamp(1.5rem, 1.41vw, 1.8rem); font-weight: 900; line-height: 130%; /* 2.6rem */
 letter-spacing: -0.08rem; } 
.auto__list li strong { font-size: clamp(1.8rem, 1.41vw, 2.4rem); font-weight: 700; line-height: 130%; /* 3.12rem */
 letter-spacing: -0.096rem; } 
@media (max-width:768px){
 .option-intro { flex-direction: column; } 
 .auto__list li { padding: 2rem; align-items: center; gap: 2rem; } 
.auto__list li span { width: 3rem; height: 3rem; } 
 }
.consult-process .intro > div { margin-bottom: 1rem; } 

/* 렌트가 설명 */
.contents-detail .pd_subtxt { font-size: 1.5rem !important; color: var(--color999); margin-top: 1rem; } 
.contents-detail .product-price ul { display: grid; grid-template-columns: repeat(2, 1fr); padding: 2rem; } 
.contents-detail .product-price ul li p { font-size: 1.6rem; } 
.contents-detail .product-price ul span { display: flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-size: 2.2rem; font-weight:700; letter-spacing: -1px; } 
.contents-detail .product-price ul span .pd_subtxt { font-size: 1.4rem !important; color: var(--color999); margin-top: 0rem; font-weight: 400; } 
.contents-detail .product-price ul .rentalPrice-txt { color: var(--color-main); } 
.contents-detail .product-price > p { font-size: clamp(1.5rem, 1.41vw, 1.8rem); font-weight: 500; margin-bottom: 1rem; } 
.contents-detail .price-txt { font-size: clamp(1.8rem, 1.41vw, 2.4rem); font-weight: 800; } 
.contents-detail .price-txt .co-red { font-size: clamp(1.7rem, 1.41vw, 2.1rem); color: var(--color-main); font-weight: 600; } 
@media (max-width:768px){
 .contents-detail .product-price ul { grid-template-columns: repeat(1, 1fr); padding: 0; gap: 1rem; } 
.hero-info { padding: 2rem; gap: 1rem; } 
.option-intro .desc { margin-top: 2rem; } 
.gallery-list .flex { gap: 4rem; } 
.board-toolbar { height: auto; padding: 1rem 0; } 
 }
 
 @media (max-width : 350px){
 .contents-detail .product-price ul span { flex-direction: column; align-items: flex-start; } 
 }
 

 /* 유튜브 추가 시 */
 .video_box {
    width: 100%;
    max-width: 1300px; /* PC에서 최대 넓이 */
    margin: 0 auto;

    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율 */
    height: 0;
    margin-top: 4rem;
}

.video_box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}