* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: 'Pretendard', sans-serif; 
  letter-spacing: -0.03em; 
}

/* 배경 및 중앙 정렬  */
body { 
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5; 
  display: flex; 
  justify-content: center; 
  align-items: flex-start; 
}

/*모바일 화면 고정 (컨테이너)*/
.container { 
  width: 100%; 
  max-width: 480px;
  min-height: 100vh;
  background-color: #fff; 
  position: relative; 
  display: flex; 
  flex-direction: column; 
  box-shadow: 0 0 30px rgba(0,0,0,0.1); 
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Header--- */
.header { display: flex; justify-content: space-between; padding: 15px 20px; align-items: center; }
.logo { font-size: 20px; font-weight: 500; color: #000; }
.btn-intro { padding: 6px 12px; border: 1px solid #eee; border-radius: 8px; font-size: 12px; background: #fff; color: #666; cursor: pointer; }

/* --- Main slider --- */
.hero-section { padding: 10px 20px 20px; }
.hero-card-fixed {
  width: 100%; aspect-ratio: 1 / 1; background-color: #F5F7FE; 
  border-radius: 10px; position: relative; overflow: hidden;
}
.hero-swiper { width: 100%; height: 100%; }
.hero-content { padding-top: 48px; text-align: center; position: relative; z-index: 10; }
.hero-title { font-size: 20px; font-weight: 500; line-height: 1.35; color: #0F172B; }
.hero-desc { font-size: 13px; color: #0F172B; padding: 0 10px; line-height: 1.5; word-break: keep-all; margin-top: 8px; }

.hero-visual { 
    position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%);
    width: 75%; display: flex; justify-content: center; z-index: 1;
}
.hero-visual img { width: 100%; height: auto; object-fit: contain; }

.page-indicator {
    position: absolute; top: 16px; right: 24px; z-index: 50;
    font-size: 11px; color: #888; background: rgba(255,255,255,0.6); padding: 3px 10px; border-radius: 12px;
}
.btn-primary {
  width: calc(100% - 48px); background-color: #0A41ED; color: white; padding: 14px; border-radius: 10px;
  font-size: 15px; font-weight: 500; border: none; position: absolute; bottom: 24px; left: 24px; z-index: 50; cursor: pointer;
}

/* --- 공통 섹션 스타일 --- */
.section { padding: 35px 20px 0; }
.section-title { font-size: 17px; font-weight: 500; margin-bottom: 20px; color: #111; }

/* --- Process --- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; }
.process-icon { height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.process-icon img { height: 100%; width: auto; object-fit: contain; }
.process-item span { font-size: 13px; color: #444; }

/* --- 다른 서비스 카드 --- */
.service-grid { display: flex; gap: 12px; }
.service-card { 
  flex: 1; padding: 22px; border-radius: 18px; height: 105px; 
  position: relative; overflow: hidden; background-color: #F5F7FE; color: #0F172B; 
}
.service-card p { font-size: 15px; font-weight: 700; }
.card-icon-right { position: absolute; bottom: 12px; right: 12px; width: 44px; height: 44px; }
.card-icon-right img { width: 100%; height: auto; object-fit: contain; }

/* --- 리기브 스토리 --- */
.story-list { display: flex; flex-direction: column; gap: 10px; }
.story-item { background-color: #fff; border: 0.5px solid #e0e0e0; border-radius: 16px; padding: 24px 20px; }
.story-item h4 { color: #0A41ED; font-size: 16px; font-weight: 500; margin-bottom: 8px; }
.story-item p { color: #0F172B; font-size: 14px; font-weight: 400; line-height: 1.5; }


/* --- FAQ --- */
.faq-list {
  display: flex;
  flex-direction: column; 
  margin: 0 -20px; 
  width: calc(100% + 40px); 
}

.faq-list li {
  display: flex;
  flex-direction: column;
  padding: 24px 20px; 
  background-color: #fff;
  border: none; 
  border-bottom: 1px solid #F0F0F0; 
}

/* 질문 영역 레이아웃 */
.faq-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.faq-question {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #111;
}

/* 답변 영역 */
.faq-answer {
  display: none;
  padding-top: 15px;
  margin-top: 15px; 
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
  border-top: 1px solid #F0F0F0;
  font-size: 13px;
  color: #45556C;
}

.faq-list li.active .faq-answer {
  display: block;
}

.faq-arrow-btn { background: none; border: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.faq-arrow-btn img { width: 14px; height: auto; }

/* --- 푸터 --- */
.footer {
  width: 100%;
  padding: 50px 0;  
  display: flex;
  justify-content: center;
  align-items: center;
  clear: both;  
}

.btn-more {
  background: none;
  border: none;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.btn-more img {
  width: 32px;  
  height: 32px;
  object-fit: contain;  
}


/* --- Footer--- */
.footer {
  width: 100%;
  padding: 60px 0;  
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;  
}
.btn-more { background: none; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; }
.btn-more img { width: 32px; height: auto; }