/* =========================================
   샷시국가대표 - 공통 + 모바일 스타일
   ========================================= */

/* ---- reset.css의 html,body { height:100%; overflow-x:hidden } 부작용 차단 ----
   html에 height:100% + overflow-x:hidden이 걸리면 overflow-y가 auto로 강제 변환되어
   html 자체가 스크롤 컨테이너가 됨 → window.pageYOffset = 0 → 헤더 스크롤 감지 불가.
   height:auto로 덮어써서 viewport가 스크롤하도록 복구. */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

html {
  height: auto;
}
body {
  overflow: visible;
}

/* ---- 모바일 최대 너비 ---- */
.mo {
  max-width: 390px;
  margin: 0 auto;
  box-shadow: 0 4.678px 58.472px 0 rgba(63, 57, 119, 0.3);
}

/* ---- 변수 ---- */
:root {
  --blue: #0E6CD3;
  --gold: #C7AD58;
  --dark: #00020B;
  --black: #000000;
  --near-black: #00000A;
  --dark-blue: #00326C;
  --deep-blue: #042D57;
  --grey-bg: #EBEBEB;
  --dark-grey: #222222;
  --text-grey: #CCCCCC;
  --sub-grey: #666666;
  --white: #FFFFFF;
  --radius: 10px;
}

/* =========================================
   헤더
   ========================================= */
.header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 390px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
  box-sizing: border-box;
  background: transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}

.header--scrolled {
  background: var(--white);
  border-bottom-color: #F4F4F4;
}

.header__logo {
  height: 30px;
  width: auto;
}

.header__logo--color {
  display: none;
}

.header--scrolled .header__logo--white {
  display: none;
}

.header--scrolled .header__logo--color {
  display: block;
}

.header__right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.header__call {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.header__call img {
  width: 100%;
  height: 100%;
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

.header--scrolled .header__call img {
  filter: brightness(0);
}

.header__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  border: 1px solid var(--white);
  border-radius: 50px;
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  background: none;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.header--scrolled .header__cta {
  border-color: var(--black);
  color: var(--black);
}

/* =========================================
   하단 고정 CTA 버튼
   ========================================= */
.cta-fixed {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 310px;
  padding: 20px 0;
  background: var(--blue);
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.28);
  z-index: 100;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: normal;
}

/* =========================================
   히어로 섹션
   ========================================= */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  box-sizing: border-box;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 35, 0.88) 0%, rgba(10, 14, 35, 0.5) 50%, rgba(10, 14, 35, 0.85) 100%);
  display: none;
}

/* 상단 콘텐츠 */
.hero__content {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 75px 6px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 별점 + 만족보장 */
.hero__stars {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

.hero__stars-bar {
  flex: 1;
  height: 1px;
  background: #fff;
  max-width: 50px;
  position: relative;
  top: 28px;
}

.hero__stars-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.hero__stars-icons {
  font-size: 14px;
  color: #FFD700;
  letter-spacing: 2px;
}

.hero__stars-text {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}

/* 타이틀 */
.hero__title {
  font-size: 28px;
  font-weight: 300;
  line-height: 1.35;
  color: var(--white);
  text-align: center;
}

.hero__title b {
  font-weight: 700;
  color: #fff;
}

.hero__title--gradient {
  display: inline-block;
  background: linear-gradient(270deg, #FF565E 0%, #50AAFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* 설명 박스 */
.hero__desc-box {
  padding: 14px 20px;
  background: linear-gradient(93deg, #18407B 0%, #082755 96.63%);
}

.hero__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #FFFFFFCC;
  text-align: center;
}

/* =========================================
   파트너사 (브랜드 그리드)
   ========================================= */
.partners {
  background: rgba(40, 40, 47, 0.80);
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 72px 20px ;
  position: relative;
  margin-top: 423px;
}

.partners_brand {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-bottom: 88px;
}

.brand_list {
  justify-content: center;
}
.brand_list li {
  position: relative;
}

.brand_list li .moving_dash {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.brand_list li .moving_dash path {
  animation: flowDown 1.5s linear infinite;
}

@keyframes flowDown {
  0%   { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0 0 0% 0); }
}

.brand_list.first {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0 9px;
}
.brand_list.first img {
  width: auto;
  height: 45px;
}
.brand_list.second {
  display: flex;
  gap: 0 40px;
}

.brand_list.second img {
  height: 30px;
  width: auto;
  margin: 0 auto;
}

.partners__connector {
  flex: 0 0 16px;
  height: 2px;
  border-bottom: 2px dashed rgba(14, 108, 211, 0.55);
}

.custom-sash {
  max-width: 205px;
  margin: 0 auto;
  padding: 20px 50px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  border-radius: 50px;
  border: 1px solid #96B9E0;
  background: #202028;
  box-shadow: 0 0 4px 0 #619EE2;
  display: block;
  width: fit-content;
}

/* =========================================
   섹션2: 좋은 업체를 선택하는 방법
   ========================================= */
.why {
  position: relative;
  overflow: hidden;
  background: #00020B;
  padding: 0 10px;
}

.why__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why__content {
  position: relative;
  z-index: 1;
  border-radius: 10px;
  background-color: #EBEBEB;
  overflow: hidden;
  padding-bottom: 60px;
}

.why__label {
  font-size: 28px;
  font-weight: 700;
  color: #000;
  margin-bottom: 31px;
  text-align: center;
}

.why__title-wrap {
  text-align: center;
}

.why__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--black);
}

.why__title--gradient {
  display: inline-block;
  background: linear-gradient(270deg, #ED222C 0%, #1180E8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.why__list {
  display: flex;
  flex-direction: column;
  padding: 0 22px;
  margin-bottom: 66px;
}

.why__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  padding: 20px;
  border-bottom: 0.5px solid #CCC;
}

.why__check {
  width: 16px;
  height: 16px;
  border: 2px solid #0E6CD3;
  min-width: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================
   섹션3: 브랜드 강점
   ========================================= */
.brand {
  background: #0a0a0a;
  padding: 144px 27px 150px;
}

.brand__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand__sub {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  text-align: center;
  border: 1px solid var(--white);
  border-radius: 100px;
  padding: 8px 13px;
  margin-bottom: 20px;
}

.brand__title {
  font-size: 36px;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  line-height: 1.4;
  width: 100%;
  margin-bottom: 80px;
}

.brand__items {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
}

.brand__item {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

.brand__item-text {
  flex: 1;
}

.brand__item-text h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.4;
  margin-bottom: 15px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand__item-text p {
  font-size: 14px;
  font-weight: 400;
  color: #CCCCCC;
  line-height: 1.6;
}

.brand__item-img {
  width: 100%;
  min-width: 130px;
  flex: 1;
}

.brand__item-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-width: 170px;
}

.c-red  {background: linear-gradient(90deg, #F5323B 0%, #FFF 90%);}
.c-blue {background: linear-gradient(90deg, #0084FF 0%, #FFF 90%);}
.c-gold {background: linear-gradient(90deg, #FFAD14 0%, #FFF 90%);}

/* =========================================
   섹션4: 시공후기
   ========================================= */
@keyframes scrollLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes scrollRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.reviews {
  background:#000;
  overflow: hidden;
}

/* -- 이미지 배너 -- */
.reviews__banner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  contain: paint; /* repaint 범위를 이 요소 내부로 한정 */
}

.reviews__banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #0a0a0a);
  pointer-events: none;
}

.reviews__banner-row {
  overflow: hidden;
  will-change: transform; /* overflow 클리핑을 컴포지터 스레드로 이동 */
}

.reviews__banner-track {
  display: flex;
  gap: 6px;
  width: max-content;
  will-change: transform;
}

.reviews__banner-track--left  { animation: scrollLeft  30s linear infinite; }
.reviews__banner-track--right { animation: scrollRight 30s linear infinite; }

.reviews__banner-track img {
  width: 123px;
  height: 92px; /* aspect-ratio 대신 명시적 크기로 레이아웃 재계산 방지 */
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border-radius: 5px;
}

/* -- 타이틀 + 슬라이더 영역 -- */
.reviews__inner {
  display: flex;
  flex-direction: column;
  margin-top: -50px;
  position: relative;
  z-index: 1;
}

.reviews__header {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.reviews__title {
  font-size: 36px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.5;
  margin-bottom: 30px;
}

.reviews__title .bg-blue {
  background-color: #0E6CD3;
  padding: 0 5px;
  color: #fff;
  display: block;
  width: fit-content;
  margin: 0 auto;
}

.reviews__desc {
  font-size: 16px;
  color: #CCCCCC;
  line-height: 22px;
  margin-bottom: 60px;
}

/* -- Swiper 슬라이더 -- */
.reviews-swiper {
  overflow: visible;
  padding: 0 30px !important;
  box-sizing: border-box;
  width: 100%;
}

.reviews-swiper .swiper-wrapper { align-items: stretch; transition-timing-function: linear !important;}

.reviews__slide {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
}

.reviews__slide-img {
  width: 100%;
  aspect-ratio: 1/0.75;
  border-radius: 20px;
  overflow: hidden;
}

.reviews__slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reviews__slide-info { flex: 1; width: 100%;}
.reviews_slide-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reviews__stars {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.reviews__star   { color: #E8B425; font-size: 14px; }
.reviews__rating { font-size: 14px; font-weight: 700; color: var(--white); }

.reviews__location {
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
}

.reviews__comment {
  margin-top: 15px;
  font-size: 14px;
  color: var(--text-grey);
  line-height: normal;
}

/* Swiper 페이지네이션 dot 커스텀 */
.reviews-swiper .swiper-pagination { position: static; margin-top: 16px; }

.reviews-swiper .swiper-pagination-bullet {
  background: rgba(255,255,255,0.3);
  opacity: 1;
}

.reviews-swiper .swiper-pagination-bullet-active { background: var(--white); }

/* -- 더 많은 후기보기 버튼 -- */
.reviews__more {
  display: block;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid #AAA;
  background: #00000A;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.28);
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  width: fit-content;
  margin: 60px auto 0;
}

/* =========================================
   이벤트
   ========================================= */
.event {
  background: #00000A;
  padding: 200px 0 80px;
  position: relative;
  overflow: hidden;
}

.event::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 516px;
  background :url(./image/img/event_section_top_bg.png) no-repeat center / cover;
  pointer-events: none;
}

.event__inner {
  position: relative;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.event__label {
  font-size: 18px;
  font-weight: 700;
  color: #1B6FFF;
}

.event__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  line-height: normal;
}

.event__sub {
  font-size: 14px;
  color: #ccc;
  font-weight: 400;
}
.event__sub strong {font-weight: 700; color: #fff;}

.event__benefits {
  display: flex;
  flex-direction: column;
  gap: 73px;
  width: 100%;
  margin-top: 32px;
  text-align: left;
}

.event__benefit {
  border-radius: 10px;
  background: linear-gradient(180deg, #313131 0%, #00000A 100%);
  position: relative;
}

.event__benefit-hd {
  width: fit-content;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -12px;
}

.event__benefit-badge {
  display: inline-block;
  background: linear-gradient(135deg, #1B6FFF 0%, #FF3B3B 100%);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 100px;
}

.event__benefit-body {
  padding: 40px 30px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.event__benefit-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.4;
  text-align: center;
}

.event__benefit-img {
  width: 100%;
  height: auto;
}

.event__notices {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event__notices li {
  font-size: 12px;
  color: #fff;
  font-weight: 400;
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}

.event__notices li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #fff;
}

/* =========================================
   섹션6: 원데이 시공
   ========================================= */
.oneday {
  background: var(--white);
  padding: 120px 10px 60px;
}

.oneday__big-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--black);
  line-height: 30px;
  text-align: center;
  margin-bottom: 40px;
  line-height: 37px;
}

.txt-gradient {
  background: linear-gradient(270deg, #ED222C 0%, #1180E8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* 카드 */
.oneday__cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oneday__card {
  position: relative;
  min-height: 203px;
  padding: 25px;
  background: #F5F8FB;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
}

.oneday__card:nth-child(2) {
  background-color: #FBF5F5;
}

.oneday__card-icon {
  position: absolute;
  top: 25px;
  right: 25px;
  width: auto;
  height: 55px;
  object-fit: contain;
}

.oneday__card-content h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
  line-height: 25px;
  margin-bottom: 13px;
}

.oneday__card-content p {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #666666;
}

/* 타임라인 */
.oneday__timeline {
  margin-top: 70px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.oneday__timeline-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--black);
  text-align: center;
  margin-bottom: 40px;
}

.oneday__timeline-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  position: relative;
}

.oneday__timeline-row:not(:first-child) {
  margin-top: 42px;
}

.oneday__timeline-row:first-child:after {
  content: "▼";
  position: absolute;
  font-size: 13px;
  color: #CEDDEB;
  top: 140px;
  right: 13%;
}

.oneday__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.oneday__step-time {
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  margin-bottom: 10px;
}

.oneday__step-icon {
  width: 74px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 1px solid #F4F4F4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.oneday__step-icon img {
  width: 100%;
  height: 33px;
  object-fit: contain;
}

.oneday__step-label {
  font-size: 14px;
  color: #888;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
}

.oneday__arrow {
  font-size: 13px;
  color: #CEDDEB;
  flex-shrink: 0;
  position: relative;
  top: 35px;
  height: fit-content;
}

.oneday__arrow.bottom {
  position: relative;
  right: 55px;
  margin-left: auto;
}

/* =========================================
   섹션7: 제품 특성
   ========================================= */
.features__top {
  background: #042D57;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.features__photo-wrap {
  position: relative;
  width: 100%;
}

.features__photo {
  width: 100%;
  display: block;
}

.features__title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 60px;
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  line-height: 37px;
  text-align: center;
}

.features__icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 30px;
  width: 100%;
  padding: 30px 60px;
  justify-content: center;
  box-sizing: border-box;
}

.features__icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.features__icon-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.features__icon-circle img {
  width: 45px;
  aspect-ratio: 1/1;
  object-fit: contain;
}

.features__icon-item span {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
}

.features__bottom {
  padding: 50px 16px;
  background: #F5F5F5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  text-align: center;
}

.features__brand-logos {
  display: grid;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
}

.features__brand-logos img {
  height: auto;
  width: 100%;
  object-fit: contain;
}

.features__brand-text {
  font-size: 14px;
  color: #666666;
  line-height: 20px;
  font-weight: 400;
}

.features__cert-img {
  width: 100%;
  height: auto;
  padding: 0 29px;
  box-sizing: border-box;
}

/* =========================================
   섹션8: 양심선언
   ========================================= */

/* 상단: 배경 이미지 + fadeout */
.declaration__hero {
  position: relative;
  height: 265px;
  background: url('./image/img/declaration_bg.png') top/cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.declaration__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  pointer-events: none;
}

.declaration__en-img {
  position: relative;
  z-index: 1;
  height: 30px;
  width: auto;
  margin-bottom: 10px;
  display: block;
}

.declaration__title {
  position: relative;
  z-index: 1;
  font-size: 36px;
  font-weight: 700;
  color: var(--white);
}

/* 하단: 검정 텍스트 영역 */
.declaration__content {
  background: #000000;
  padding: 5px 20px 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.declaration__name {
  font-size: 18px;
  color: var(--white);
  font-weight: 400;
  margin-bottom: 5px;
}

.declaration__highlight {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  background: linear-gradient(to right, #1B6FFF, #FF3B3B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 26px;
}

.txt-red { color: #FF3B3B; }

.declaration__body {
  font-size: 14px;
  color: #ccc;
  line-height: 19px;
  font-weight: 400;
}

.declaration__signer {
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  margin-top: 26px;
}

/* =========================================
   섹션9: FAQ
   ========================================= */
.faq {
  background: #fff;
  padding: 120px 20px 60px;
}

.faq__inner {
  display: flex;
  flex-direction: column;
}

.faq__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--black);
  text-align: center;
  line-height: 37px;
  margin-bottom: 20px;
}

.faq__title--blue {
  color: #0E6CD3;
}

.faq__desc {
  font-size: 14px;
  color: #666666;
  line-height: 2;
  text-align: center;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 50px;
}

.faq__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #E0E0E0;
}

.faq__item {
  border-bottom: 1px solid #E0E0E0;
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  line-height: 1.4;
  word-break: keep-all;
  appearance: none;
}

.faq__arrow {
  width: 20px;
  height: 20px;
  min-width: 20px;
  transition: transform 0.3s ease;
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  background: #f5f5f5;
}

.faq__answer p {
  padding: 16px 20px;
  font-size: 14px;
  color: #000;
  line-height: 20px;
  font-weight: 400;
}

.faq__item--open .faq__answer {
  max-height: 200px;
  border-top: 1px solid #E0E0E0;
}

.faq__item--open .faq__arrow {
  transform: rotate(180deg);
}

/* =========================================
   견적 문의 / 푸터
   ========================================= */
.contact {
  background: #222222;
  padding-bottom: 0;
}

.contact__inner {
  padding: 50px 0 0;
  display: flex;
  flex-direction: column;
}

.contact__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  margin-bottom: 15px;
}

.contact__desc {
  font-size: 14px;
  color: #ccc;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
}

.contact__btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 50px 0;
  padding: 0 40px;
}

.contact__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 18px ;
  background: var(--white);
  border-radius: 10px;
  color: var(--black);
}

.contact__btn-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.contact__btn-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.contact__btn-text {
  font-size: 18px;
  font-weight: 400;
  color: var(--black);
}

.contact__btn-arrow {
  transform: rotate(-90deg);
  margin-left: 10px;
}

/* 푸터 */
.footer {
  padding: 0px 0px 60px;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer__sns {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
  padding: 12px;
  gap: 50px;
  box-sizing: border-box;
}

.footer__sns img {
  width: auto;
  height: 28px;
  filter: brightness(0) invert(0.5);
}

.footer__info {
  font-size: 14px;
  font-weight: 400;
  color:#ccc;
  line-height: 20px;
  text-align: center;
  margin: 50px 0;
}

.footer__logo {
  height: 30px;
  width: auto;
}

/* =========================================
   PC 레이아웃 (min-width: 1024px)
   ========================================= */

/* 모바일 기본: pc-left 숨김, pc-layout은 블록 */
.pc-left { display: none; }

.contents {
  background: url(./image/img/pc_bg.png) no-repeat center bottom / contain;
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
}

@media (min-width: 1024px) {
  html, body { height: 100%; overflow: hidden; }


  .pc-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
    max-width: 986px;
    margin: 0 auto;
    gap: 50px;
  }

  /* ── 왼쪽 패널 ── */
  .pc-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 50px 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .pc-left__mid > img {
    width: 100%;
    max-width: 234px;
    display: block;
    margin-top: 80px;
  }

  .pc-left__logo {
    height: 40px;
    width: auto;
  }

  .pc-left__mid {
    display: flex;
    flex-direction: column;
  }

  .pc-left__sub {
    font-size: 18px;
    color: var(--sub-grey);
    font-weight: 400;
    margin-bottom: 40px;
  }

  .pc-left__grad {
    font-size: 38px;
    font-weight: 700;
    background: linear-gradient(270deg, #ED222C 50%, #1180E8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    display: inline-block;
  }

  .pc-left__bold {
    font-size: 38px;
    font-weight: 700;
    color: #333;
  }

  .pc-left__img {
    position: absolute;
    right: 0;
    bottom: 90px;
    width: 58%;
    max-width: 300px;
    object-fit: contain;
  }

  .pc-left__bot {
    position: relative;
    z-index: 1;
  }

  .pc-left__bot-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }

  .pc-left__biz {
    font-size: 12px;
    color: #C5E3FF;
    font-style: normal;
    line-height: 18px;
  }

  .pc-left__biz strong {
    font-weight: 700;
    color: #C5E3FF;
    font-size: 12px;
  }

  .pc-left__sns-list {
    display: flex;
    gap: 20px;
    flex-shrink: 0;
  }

  .pc-left__sns-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
  }

  .pc-left__sns-btn img {
    width: 32px;
    aspect-ratio: 1/1;
    object-fit: contain;
  }

  /* ── 오른쪽: 모바일 뷰 ── */
  .pc-right {
    width: 390px;
    flex-shrink: 0;
    height: 100vh;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4.678px 58.472px 0 rgba(63, 57, 119, 0.3);
  }

  /* PC에서 헤더: pc-right 기준 absolute로 항상 상단 고정 */
  .header {
    position: absolute;
    top: 0;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 390px;
    z-index: 100;
  }

  /* mo: pc-right 꽉 채우며 단독 스크롤 */
  .mo {
    height: 100%;
    max-width: 390px;
    overflow: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
  }
  .mo::-webkit-scrollbar { display: none; }

  /* PC에서 cta-fixed: pc-right 기준 absolute로 항상 하단 고정 */
  .cta-fixed {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* =========================================
   모달 오버레이 (공통)
   ========================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal-overlay--center {
  align-items: center;
}

.modal-overlay--bottom {
  align-items: flex-end;
}

/* =========================================
   모달 1: 고객 문의폼 (bottom sheet)
   ========================================= */
.modal-form {
  width: 100%;
  max-width: 390px;
  max-height: 92vh;
  background: var(--white);
  border-radius: 20px 20px 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.modal-overlay.is-open .modal-form {
  transform: translateY(0);
}

.modal-form__header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--white);
  display: flex;
  align-items: center;
  height: 60px;
  padding:10px;
  border-bottom: 1px solid #F4F4F4;
  box-sizing: border-box;
}

.modal-form__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  padding: 0;
  border: 0;
}

.modal-form__title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--black);
  padding-right: 30px;
}

.modal-form__intro {
  padding: 25px 0 ;
  text-align: center;
}

.modal-form__intro-sub {
  font-size: 16px;
  color: #555;
  font-weight: 400;
  margin-bottom: 15px;
}

.modal-form__intro-main {
  font-size: 24px;
  font-weight: 400;
  color: var(--black);
  line-height: 32px;
}

/* .modal-form__promo styles moved to bottom additions */

.modal-form__review {
  position: absolute;
  left: 20px;
  top: 21px;
  background: var(--white);
  border-radius: 10px;
  border: 0.5px solid #17579D;
  box-shadow: 0 0 10px rgba(0,0,0,0.09);
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 185px;
}

.modal-form__review-name {
  font-size: 12px;
  color: #709BCC;
}

.modal-form__review-text {
  font-size: 14px;
  color: #111;
  line-height: 1.3;
}

/* .modal-form__worker — see bottom additions */

.modal-form__body {
  padding: 0;
}

.modal-form__fields {
  padding: 0 35px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  gap: 8px;
}

.modal-form__label {
  width: 70px;
  min-width: 70px;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
}

.modal-form__input,
.modal-form__select {
  flex: 1;
  height: 48px;
  border: 1px solid #CCC;
  border-radius: 7px;
  padding: 0 15px;
  font-size: 15px;
  color: var(--black);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.modal-form__input::placeholder {
  color: #888;
}

.modal-form__input:focus {
  border-color: #0E6CD3;
}

.modal-form__select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  color: var(--black);
}

.modal-form__select:focus {
  border-color: #17579D;
}

.modal-form__agree {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 25px 10px 0;
  padding: 20px 25px;
  background: #F5F5F5;
  border-radius: 7px;
}

.modal-form__agree-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-form__checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--blue);
  margin: 0;
}

.modal-form__agree-label {
  font-size: 16px;
  color: #333;
  cursor: pointer;
  line-height: 1.4;
}

.modal-form__agree-view {
  font-size: 14px;
  font-weight: 600;
  color: #888;
  background: none;
  cursor: pointer;
  text-decoration: underline;
  flex-shrink: 0;
  white-space: nowrap;
  appearance: none;
  border: 0;
}

.modal-form__submit {
  display: block;
  width: calc(100% - 20px);
  margin: 25px 10px 10px;
  padding: 20px;
  background: #0E6CD3;
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  appearance: none;
  border: 0;
}

.modal-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================================
   모달 2: 개인정보 처리방침 (center card)
   ========================================= */
.modal-privacy {
  position: relative;
  width: 350px;
  max-height: 570px;
  background: var(--white);
  border-radius: 20px;
  padding: 23px 20px 27px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: scale(0.92) translateY(12px);
  transition: transform 0.3s ease;
}

.modal-overlay--center.is-open .modal-privacy {
  transform: translateY(0);
}

.modal-privacy__close {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 25px;
  height: 25px;
  padding: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 0;
}

.modal-privacy__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 18px;
}

.modal-privacy__body {
  font-size: 13px;
  color: #555;
  line-height: 20px;
  font-weight: 400;
}

.modal-privacy__body p {
  color: #555;
}

.modal-privacy__body strong {
  font-size: 14px;
  color: #333;
  font-weight: 400;
}

/* =========================================
   모달 3: 견적 신청 완료 (bottom sheet)
   ========================================= */
.modal-complete {
  position: relative;
  width: 100%;
  max-width: 390px;
  background: linear-gradient(180deg, rgba(225,236,248,1) 0%, rgba(255,255,255,1) 60%);
  border-radius: 20px 20px 0 0;
  padding: 0px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.modal-overlay--bottom.is-open .modal-complete {
  transform: translateY(0);
}

.modal-complete__handle {
  width: 50px;
  height: 4px;
  background: #fff;
  border-radius: 50px;
  position: absolute;
  top: -20px;
}

.modal-complete__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 25px;
  height: 25px;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 0;
  padding: 0;
}

.modal-complete__icon {
  width: 55px;
  height: 55px;
  object-fit: contain;
  margin: 50px 0 20px;
}

.modal-complete__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--black);
  text-align: center;
  line-height: 37px;
  margin-bottom: 30px;
}

.modal-complete__summary {
  width: 100%;
  background: var(--white);
  border-radius: 10px;
  padding: 0 15px;
  margin-bottom: 30px;
  box-sizing: border-box;
}

.modal-complete__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 15px 5px;
  border-bottom: 1px solid #EEE;
  gap: 16px;
}

.modal-complete__row--last {
  border-bottom: none;
}

.modal-complete__key {
  font-size: 14px;
  color: #888;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 23px;
}

.modal-complete__val {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-align: right;
  word-break: break-all;
  line-height: 23px;
}

.modal-complete__home {
  display: block;
  width: 100%;
  padding: 20px 0;
  background: #0E6CD3;
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.2s;
  appearance: none;
  border: 0;
}

.modal-complete__home:hover {
  opacity: 0.88;
}

/* =========================================
   [추가] 스크롤 진입 애니메이션 (IntersectionObserver) [1]
   ========================================= */
[data-aos="fade-up"] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-aos="fade-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   [추가] 파트너 연결선 애니메이션 [3]
   ========================================= */
.partners__line {
  width: 2px;
  height: 36px;
  background: rgba(14, 108, 211, 0.15);
  margin: 10px auto;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.partners__line-fill {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #0E6CD3, #50AAFF);
  border-radius: 2px;
}
.partners__line.is-animated .partners__line-fill {
  animation: lineFlow 1s ease forwards;
}
@keyframes lineFlow {
  from { top: -100%; }
  to   { top: 0; }
}

/* 우리집 맞춤 샷시 글로우 [3] */
@keyframes customSashGlow {
  0%, 100% { filter: drop-shadow(0 0 0px rgba(14, 108, 211, 0)); }
  50%       { filter: drop-shadow(0 0 15px rgba(14, 108, 211, 0.8)); }
}
.custom-sash.is-animated {
  animation: customSashGlow 2s ease-in-out infinite;
}

/* =========================================
   [추가] Frame 5 — 고객 후기 slide-up 슬라이더 (피그마 2148:1145)
   ========================================= */

/* Frame 5 전체: 370×136, 그라디언트 bg */
.modal-form__promo {
  position: relative;
  height: 136px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(210deg, rgba(253, 231, 232, 1) 0%, rgba(225, 236, 248, 1) 100%);
  margin: 0 10px 25px;
  padding: 0 20px;
}

/* 누끼 1: x=223, w=152, h=228 (아래로 넘침, 부모 overflow:hidden으로 클립) */
.modal-form__worker {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 152px;
  object-fit: cover;
  object-position: top center;
}

/* 카드 스택 컨테이너
   left = 그룹x(20) + 카드 offset(11) = 31px, width = 202-22 = 180px */
.review-card-stack {
  position: absolute;
  width: 202px;
  height: 94px;
  top: 57%;
  transform: translateY(-50%);
}

/* 카드 3장을 같은 자리에 겹쳐 쌓기 */
.review-card-stack .review-slider__card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  transition: transform 0.45s cubic-bezier(0, 0, 0.2, 1),
              opacity   0.45s cubic-bezier(0, 0, 0.2, 1);
  will-change: transform, opacity;
}

/* active: 맨 앞, 전체 크기, opacity 1 */
.review-card-stack .review-slider__card.is-active {
  transform: scale(1) translateY(0);
  opacity: 1;
  z-index: 3;
}

/* next: 아직 활성화 안된 카드 — 아래에서 대기 */
.review-card-stack .review-slider__card.is-next {
  transform: scale(0.90) translateY(16px);
  opacity: 1;
  z-index: 2;
  background: #FBFBFB;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.10);
  filter: blur(0.5px);
  border: 0;
}

/* hidden: 지나간 카드 — 위로 */
.review-card-stack .review-slider__card.is-hidden {
  transform: scale(0.90) translateY(-16px);
  opacity: 1;
  z-index: 1;
  background: #FBFBFB;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.10);
  filter: blur(0.5px);
  border: 0;
}

/* Frame 8: 흰 카드 — padding 13px 15px, border #17579D 0.5px, shadow */
.review-slider__card {
  background: #FFFFFF;
  border: 0.5px solid #17579D;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09);
  padding: 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Frame 7: 상단 행 — row, center, gap 8px */
.review-slider__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 이름 텍스트: Pretendard 12px, #709BCC */
.review-slider__name {
  font-size: 12px;
  font-weight: 400;
  color: #709BCC;
  white-space: nowrap;
}

/* 세로 구분선 (Vector 3): width=0, height=10px, stroke #709BCC 0.5px */
.review-slider__divider {
  display: inline-block;
  width: 0;
  height: 10px;
  border-left: 0.5px solid #709BCC;
  flex-shrink: 0;
}

/* 별점 컨테이너: row, gap 3px, 각 별 10×9px */
.review-slider__stars {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

/* 후기 본문: Pretendard 14px, #111111 */
.review-slider__text {
  font-size: 14px;
  font-weight: 400;
  color: #111111;
  line-height: normal;
}

/* =========================================
   [추가] 타이핑 커서 [4]
   ========================================= */
#typingText::after {
  content: '|';
  font-weight: 300;
  animation: blink 0.7s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}