/* ===========================
   components.css — 공통 컴포넌트
=========================== */

/* =========================================
   1) BUTTONS
========================================= */

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 16px 40px;
  border-radius: var(--radius-md);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
}

/* 기존 브랜드 단색 버튼 */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

/* 2번 버튼: 그라데이션 버전 */
.btn-gradient {
  background: linear-gradient(90deg, #13536b 20%, #26a1d1 100%);
  color: #ffffff;
}

/* 3번 버튼: 흰색/아웃라인 버전 */
.btn-outline {
  background: #ffffff;
  border: 2px solid #c7d8e0;
  color: #3c4f57;
}

/* 섹션 가로폭을 꽉 채우고 싶을 때 쓰는 유틸 */
.btn-block {
  width: 100%;
}


/* appstore (스토어 버튼) */

.btn__appstore {
  margin-top: 32px;
  display: flex;
  gap: 16px;
  justify-content: center;
}

/* PC 기본 배지 사이즈 */
.btn__appstore img {
  height: 36px;
  width: auto;
  display: block;
}

@media (max-width: 1023px) {

  .btn__appstore {
    align-items: center;
    gap: 12px;
    margin-top: 24px;            /* 간격 조금 줄이기 */
  }

  /* 모바일 배지 크기 조절 */
  .btn__appstore img {
    height: 28px;                /* PC보다 작은 높이 */
    max-width: 160px;            /* 너무 넓어지지 않게 */
    width: auto;
  }
}


/* =========================================
   2) FORM ELEMENTS
========================================= */

/* 2-1) form 기본 레이아웃 */
.form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 2-2) input / textarea / select 공통 */
.form-input,
.form-textarea,
select.form-input {
  width: 100%;
  height: 54px;
  padding: 14px 16px;
  font-size: 16px;
  letter-spacing: -0.2px;
  border: 1.5px solid #d0d5d8;
  border-radius: 10px;
  background-color: #fff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
}

/* select 전용: custom 화살표 */
select.form-input {
  background-image: url("../images/common/icon-caret.svg");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
}

/* textarea는 높이만 별도로 */
.form-textarea {
  min-height: 140px;
  height: auto;
  line-height: 1.5;
  padding: 16px;
  resize: vertical;
}

/* placeholder 스타일 */
.form-input::placeholder,
.form-textarea::placeholder,
select::placeholder {
  font-family: "Pretendard", sans-serif;
  color: #9aa4ab;
  letter-spacing: -0.1px;
}

/* 포커스 스타일 */
.form-input:focus,
.form-textarea:focus,
select.form-input:focus {
  border-color: #5D9DB6;
  box-shadow: 0 0 0 3px rgba(93, 157, 182, 0.18);
}

/* 선택(select) ↓ 화살표 보정 */
select.form-input:focus {
  background-image: url("../images/common/icon-caret-active.svg");
}

/* 2-3) 약관 스크롤 박스 */
.agreement-box {
  padding: 20px;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  height: 220px;
  overflow-y: auto;
  border: 1px solid var(--color-gray-200);
  font-size: 14px;
  line-height: 1.6;
}

/* 2-4) 체크박스 라벨 */
.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

.checkbox input {
  width: 20px;
  height: 20px;
}

/* ============================
  3) 공통 카드 컴포넌트 (단일 카드 스타일)
============================ */

.card-feature {
  background-color: #ffffff;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(13, 89, 120, 0.08);
  padding: 40px 24px;
  text-align: center;
}

.card-feature__title {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 700;
}

.card-feature__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.card-feature__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.card-feature__icon {
  width: 24px;
  height: 24px;
}

.card-feature__text {
  font-size: 15px;
  line-height: 1.7;
  color: #4f4f4f;
}

/* 모바일 버전*/
@media (max-width: 1023px) {
  .card-feature {
    padding: 32px 16px;
  }

  .card-feature__title {
    font-size: 20px;
  }

  .card-feature__text {
    font-size: 13px;
  }
}


/* =============================
   4) SECTION BLOCK COMPONENT
   - 아이콘+서브 / 대타이틀 / 컨텐츠 / 본문
   - base.css의 유틸리티 클래스(u-heading-lg 등)를 함께 사용
============================= */

.section-block {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;   /* ← 기본은 왼쪽 */
  padding: 0 48px;  
}

.section-block__content {
  text-align: center;
}

/* ------------------------------------
   1) EYEBROW (아이콘 + 서브 텍스트)
------------------------------------ */

.section-block__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: #2b7b9c;
}

.section-block__eyebrow-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* 🔹 u-eyebrow 유틸리티를 자동 적용시키기 위해 default 스타일 제공 */
.section-block__eyebrow-text {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}


/* ------------------------------------
   2) TITLE (대타이틀)
------------------------------------ */

.section-block__title {
  margin: 0 0 24px;
  font-size: var(--font-size-heading-lg);
  font-weight: var(--font-weight-heading);
  line-height: 1.4;
}

/* 그라데이션 타이틀 조합을 위해선
   HTML에서 .text-gradient-main 추가하면 됨 */


/* ------------------------------------
   3) CONTENT (카드/이미지/표 등이 들어가는 영역)
------------------------------------ */

.section-block__content {
  margin-bottom: 32px;
}


/* ------------------------------------
   4) BODY (본문)
------------------------------------ */

.section-block__body {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: #4a555b;
}


/* ------------------------------------
   반응형 (~1023px)
------------------------------------ */

@media (max-width: 1023px) {
  .section-block {
    max-width: 100%;
    padding: 24px;
  }

  .section-block__title {
    font-size: 28px; /* 모바일용 디폴트 */
    margin-bottom: 20px;
  }

  .section-block__content {
    margin-bottom: 24px;
  }

  .section-block__body {
    font-size: 16px;
  }
}



/* ===========================
   Tag / Chip component
   (components.css)
=========================== */

/* 기본 칩 */
.tag-pill {
  display: inline-flex;      /* 내용만큼만 차지 */
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;      /* 완전 동그란 pill */
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #3a3f45;
  white-space: nowrap;       /* 한 줄 유지 (필요하면 지워도 됨) */
}


/* 색상 variation – 필요한 곳에서 재사용 가능 */
.tag-pill--lavender {
  background-color: #e6ddff;
}

.tag-pill--peach {
  background-color: #ffe1d2;
}

.tag-pill--sky {
  background-color: #d9f1ff;
}

.tag-pill--butter {
  background-color: #ffeebe;
}

.tag-pill--mint {
  background-color: #dcf8d7;
}

.tag-pill--indigo {
  background: #e5e9ff;
  color: #374151;
}

.tag-pill--purple {
  background: #ece4ff;
  color: #374151;
}

.tag-pill--blue {
  background: #dff2ff;
  color: #374151;
}

.tag-pill--beige {
  background: #ffeecd;
  color: #374151;
}

.tag-pill--yellow {
  background: #ffeec7;
  color: #5b4215;
}

/* 작은 라벨형 (코어 기능 섹션 같은 곳에서 사용) */
.tag-pill--sm {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
}

/* 파란 라벨 – 텍스트만 파란색, 약간 옅은 배경 */
.tag-pill--outline-blue {
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #e2f0f6; /* Figma 배경색 */
  color: #2d91ff;            /* Figma 텍스트 색 */
  font-size: 12px;
  font-weight: 400;
}

.tag-pill--planned {
  background-color: #e0e0e0;
  color: #424242;
}