:root{
  --black:#0f0f0f;
  --blue:#4A7CFF;
  --bg-gray:#F5F6F8;
  --bg-blue:#EAF2FF;
  --footer-gray:#F2F2F2;
  --footer-line:#D9D9D9;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color:var(--black);
  background:#fff;
}
img{display:block;}

.wrap{width:100%;}

.container{
  width:100%;
  max-width: 957px; /* PC 기준 원본 폭 */
  margin:0 auto;
  padding:0 24px;
}

/* HERO */
.hero{
  width:100%;
  background: url("../images/bg_01.png") center top / cover no-repeat;
}
.hero-inner{
  height:1443px; /* 원본 세로 */
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:175px; /* 원본: 01.png 위 여백 */
}
.img-hero{
  width:auto;
  height:auto;
  max-width:none; /* PC 원본 크기 유지 */
}

/* SECTIONS */
.sec{width:100%;}
.sec-issue{background:var(--bg-gray); padding: 80px 0;}
.sec-price{background:#fff; padding: 80px 0;}
.sec-benefit{background:var(--bg-blue); padding: 130px 0;}
.sec-table{background:#fff; padding: 90px 0;}
.sec-faq{background:#fff; padding: 70px 0 90px;}

.img-block{
  width:auto;
  height:auto;
  max-width:none; /* PC 원본 유지 */
  margin:0 auto;
}

.issue-grid{
  display:flex;
  justify-content:center;
  gap: 34px;
  align-items:flex-start;
}
.img-card{
  width:auto;
  height:auto;
  max-width:none; /* PC 원본 유지 */
}

/* FAQ */
.faq-title{
  margin:0 0 28px;
  text-align:center;
  font-weight:800;
  font-size:48px;
  color: var(--blue);
}

/*수정전
.faq-list{max-width: 760px; margin: 0 auto;}*/
.faq-list{
  max-width: 876px;
  margin-left: auto;
  margin-right: auto;
}
.faq-item{margin:0 0 15px;} /* 질문/답변 덩어리 간격 기본 */

.faq-q{
  width:100%;
  border:0;
  background: var(--blue);
  color:#fff;
  font-weight:700; /* Bold */
  font-size:38px; /* 요청값에서 1~2px 축소 */
  line-height:1.2;
  border-radius:10px;
  padding: 0 22px 0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  height:96px; /* 1줄 */
}
.faq-q.is-two-line{height:153px;}
.faq-q-text{display:block; text-align:left;}
.faq-arrow{
  width:38px;
  height:30px;
  flex:0 0 auto;
  transition: transform .2s ease;
}

.faq-a{
  margin-top:17px; /* 질문-답변 사이 여백 */
  background:#F5F5F5;
  border-radius:10px;
}
.faq-a-inner{
  padding: 26px 28px;
  font-size:31px; /* 요청값에서 1px 축소 */
  font-weight:400;
  line-height:1.45;
  color: var(--black);
}
.faq-a-inner p{margin:0;}

/* open state */
.faq-item.is-open .faq-arrow{transform: rotate(180deg);}

/* FOOTER */
.footer{width:100%;}
.footer-top{
  background:#fff;
  padding: 20px 0 34px;
}
.footer-top-inner{
  text-align:center;
}
.footer-logo{
  width:275px;
  height:auto;
  margin:0 auto 14px;
  max-width:none;
}
.footer-desc{
  margin:0 0 10px;
  font-size:24px;
  font-weight:400;
  color: var(--black);
}
.footer-copy{
  margin:0;
  font-size:24px;
  font-weight:400;
  color: var(--black);
}

.footer-bottom{
  background: var(--footer-gray);
  border-top: 1px solid var(--footer-line);
}
.footer-bottom-inner{
  display:flex;
  gap: 40px;
  padding: 28px 24px 30px;
  align-items:flex-start;
}
.cs{flex:0 0 420px;}
.company{flex:1 1 auto;}

.cs-title{
  display:flex;
  align-items:baseline;
  gap:12px;
  font-size:42px;
  font-weight:800;
  margin:0 0 10px;
  color: var(--black);
}
.cs-label{font-weight:800;}
.cs-tel{
  font-weight:800;
  color: var(--black);
  text-decoration:none;
}
.cs-info{
  margin:0;
  font-size:24px;
  font-weight:600; /* SemiBold */
  line-height:1.35;
  color: var(--black);
}
.footer-link{
  color: inherit;
  text-decoration: none;
}
.footer-link:hover{ text-decoration: underline; }

.company p{
  margin:0;
  font-size:19px;
  font-weight:400;
  line-height:1.45;
  color: var(--black);
}

/* RESPONSIVE */
@media (max-width: 1024px){
  .container{max-width: 100%;}
  .hero-inner{height:auto; padding-top: 90px; padding-bottom: 40px;}
  .img-hero, .img-block, .img-card{max-width:100%; height:auto;}
  .sec-issue{padding: 40px 0;}
  .issue-grid{flex-direction:column; gap: 18px;}
  .faq-title{font-size:40px;}
  .faq-q{font-size:34px; height:auto; padding: 18px 18px 18px 22px;}
  .faq-q.is-two-line{height:auto;}
  .faq-a-inner{font-size:28px;}
  .footer-bottom-inner{flex-direction:column; gap: 22px;}
  .cs{flex:1 1 auto;}
  .cs-title{font-size:36px;}
}

@media (max-width: 480px){
  .container{padding:0 16px;}
  .faq-title{font-size:36px;}
  .faq-q{font-size:32px;}
  .faq-a-inner{font-size:26px;}
  .footer-desc, .footer-copy{font-size:20px;}
  .cs-info{font-size:20px;}
}

/* === Footer from v6_final_real (locked) === */
/* 푸터 - 원본 구조 매칭 */
.footer{
  padding: 0;
  background: #fff;
  text-align: center;
}
.footer .container{ max-width: 1000px; }

/* 상단(흰영역) */
.footer__assurant{
  padding: 40px 0 28px;
  background: #fff;
}
.footer__assurant-inner .footer__logo{
  margin: 0 auto 18px;
  max-width: none; /* 로고 줄이지 않기 */
}
.footer__assurant-desc{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: #7a7a7a;
  margin: 0 auto 82px;
  max-width: 980px;
}
.footer__copyright{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: #9a9a9a;
  margin: 0;
}

/* 하단(회색 고객센터 영역) - 양쪽 끝까지 */
.footer__cs{
  background: #f2f2f2;
  border-top: 1px solid #d6d6d6; /* 상단 회색 라인 */
  padding: 74px 0 76px;
  text-align: left;
}
.footer__cs-inner{
  display: block;
}
.footer__cs-title{
  font-family: var(--font-family);
  font-weight: 700; /* Bold */
  font-size: 42px;
  line-height: 1.2;
  color: #0f0f0f;
  margin: 0 0 14px;
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
}
.footer__cs-phone{
  display: inline-block;
   font-weight: 700; }
.footer__cs-meta{
  font-family: var(--font-family);
  font-weight: 600; /* SemiBold */
  font-size: 24px;
  line-height: 1.5;
  color: #0f0f0f;
  margin: 0 0 26px;
}
.footer__company{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.6;
  color: #666;
}



/* 링크 스타일(디자인 유지) */
.footer a,
.tel-link{
  color: inherit;
  text-decoration: none;
}
.footer a:hover,
.tel-link:hover{
  text-decoration: underline;
}

/* 푸터 모바일 조정 */
@media (max-width: 768px){
  .footer__assurant-desc,
  .footer__copyright{ font-size: 16px; }
  .footer__cs-title{ font-size: 26px; }
  .footer__cs-meta{ font-size: 16px; }
  .footer__company{ font-size: 13px; }
  .footer__cs{ padding: 26px 0 28px; }
}

/* FAQ width & tracking override (request) */
.faq-list{max-width: 876px;}
.faq-q-text{letter-spacing:-0.03em;}
.faq-a-inner{letter-spacing:-0.03em;}


/* =========================
   MOBILE ONLY PATCH (final)
   - FAQ: Q 24px / A 18px
   - Hero: 이미지 잘림 방지
   - Issue cards: 2개 가로 배치
   ========================= */

@media (max-width: 480px){

  /* 1) HERO: 손 부분 잘림/답답함 방지
     - 이미지는 항상 전체가 보이도록 width:100%, height:auto
     - 위/아래 패딩을 모바일에 맞게 줄여서 화면 안에 자연스럽게 들어오게 */
  .hero-inner{
    padding-top: 56px !important;
    padding-bottom: 0px !important;
    height: auto !important;
  }
  .img-hero{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* 2) 문제제기 카드: 모바일에서도 2개 옆으로 */
  .sec-issue{ padding: 42px 0 !important; }
  .issue-grid{
    flex-direction: row !important;      /* 기존엔 column으로 떨어지게 되어있음 :contentReference[oaicite:1]{index=1} */
    gap: 12px !important;
    justify-content: center !important;
  }
  .img-card{
    width: calc(50% - 6px) !important;   /* gap 12px의 절반 */
    max-width: calc(50% - 6px) !important;
    height: auto !important;
  }

  /* 3) FAQ: 모바일 폰트 크기 + 자간 + 버튼 높이 자연스럽게 */
  .faq-list{
    max-width: 100% !important;          /* PC 876px 고정 유지하되 모바일은 풀로 :contentReference[oaicite:2]{index=2} */
  }

  .faq-q{
    font-size: 20px !important;
    height: auto !important;             /* 모바일은 고정 높이보다 패딩으로 */
    padding: 18px 16px 18px 18px !important;
    border-radius: 10px !important;
  }
  .faq-q.is-two-line{ height: auto !important; }

  .faq-q-text{
    letter-spacing: -0.04em !important;  /* “조금 더 좁게” */
  }

  .faq-arrow{
    width: 20px !important;
    height: auto !important;
  }

  .faq-a-inner{
    font-size: 18px !important;
    letter-spacing: -0.04em !important;
    padding: 18px 18px !important;
  }
  
  .footer__logo{
	transform: scale(0.85);
    transform-origin: center top;
    margin-bottom: -6px;
  }
}