/* Sign 메뉴(로그인, 회원가입 등) 전용 CSS */
@media (max-width: 991.98px) {
    .stepper-aside { display: none !important; }
    .mobile-logo { display: block !important; }
    .signup-content-container { padding-top: 100px !important; }
}
.mobile-logo { display: none; position: absolute; top: 0; left: 0; padding: 2.5rem; }

/* 🕘 **여기 있던 `.dropzone .dz-preview .dz-progress { display:none }` 을 지웠다**
      (2026-09-09 · 업로드 4가지 표준 마무리).
   🔬 그 규칙은 특이도 **(0,3,0)** 이라 통합 규격 `.ds-upload-files .dz-progress`(0,2,0)를
      **순서와 무관하게 이겨** 이 화면에서만 진행 막대가 통째로 사라져 있었다.
   🔑 진행 막대 규격은 `design-system.css` 15절 한 곳이 쥔다(`display:block` · 3px · `--ds-fill`).
      가입 화면은 사업자등록증을 올리는 자리라 큰 파일에서 반응이 없어 보이면 안 된다.
   🔥 여기에 다시 적지 말 것 — 화면별 CSS 가 통합 규격을 이기는 구조 자체가 결함이었다. */

/* -------------------------------------------------------------
   약관 아코디언 헤더 — **줄바꿈을 허용**한다 (2026-07-23 사용자 지적)

   🐛 증상: 모바일에서 약관 제목이 글자 단위로 쪼개지고 `(필수)` 까지 `(필 수)` 로 갈라졌다.
   원인: 헤더가 `d-flex` 한 줄인데 줄바꿈이 막혀 있어, 제목과 배지가 좁은 폭을 서로 밀어냈다.
   ⚠️ 간격은 `ms-2` 가 아니라 `gap` 이 준다 — 줄이 바뀌었을 때 좌측 여백이 어색해지기 때문이다.
   ⚠️ `(필수)`/`(선택)` 은 **한 덩어리**라 `nowrap` 이다. 이것만은 쪼개지면 안 된다.
   ------------------------------------------------------------- */
#kt_accordion_terms .accordion-button { align-items: flex-start; }
/* ↔️ 제목 끝과 펼침 화살표 사이 최소 간격 (2026-09-18 여행사 2회차 A2-12 · 영문 1200px [회귀]).
   🔬 「Travel Product Terms and Conditions (Mandatory)」 의 오른끝과 화살표(`::after`, `margin-left:auto`) 사이가 **1px** —
      긴 제목이 남는 폭을 다 먹으면 auto 여백이 0 이 되어 글자가 화살표에 붙었다.
   🔑 `column-gap` 은 **짧은 제목에서는 아무 일도 안 한다**(auto 여백이 더 크다) — 긴 제목일 때만 바닥을 준다.
   📌 이 앱에는 지금 이 아코디언을 쓰는 화면이 없다(세 앱 사본을 맞춰 둔다). */
#kt_accordion_terms .accordion-button { column-gap: .75rem; }
#kt_accordion_terms .accordion-button .form-check { flex: 0 0 auto; }
/* flex 아이템은 `min-width:0` 이 없으면 내용 폭 아래로 못 줄어든다 — 넘침의 흔한 원인 */
#kt_accordion_terms .term-head-wrap { flex: 1 1 auto; min-width: 0; }
#kt_accordion_terms .term-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .4rem;
    line-height: 1.35;
}
#kt_accordion_terms .term-head .term-req { white-space: nowrap; }

/* 좁은 화면에서는 제목 크기·여백을 줄인다(기본 fs-4 = 16.3px 는 375px 에서 과하다) */
@media (max-width: 767.98px) {
    #kt_accordion_terms .accordion-button { padding: .85rem 1rem; font-size: 1rem; }
    #kt_accordion_terms .accordion-button .form-check { margin-right: .75rem !important; }
    #kt_accordion_terms .accordion-body { padding: 0 1rem 1rem; }
}

/* 체크박스를 아코디언 버튼 **밖**으로 꺼내면서 헤더가 두 칸이 됐다 (2026-07-23).
   ⚠️ 버튼이 남는 폭을 다 쓰게 하지 않으면 클릭 영역이 글자 폭으로 줄어든다. */
/* 🐛 **펼친 항목의 배경이 체크박스 칸에만 없었다** (2026-07-23 사용자 지적).
   Bootstrap 은 활성 배경을 `.accordion-button` 에 칠하는데, 체크박스를 버튼 **밖으로** 꺼내면서
   그 칸만 흰색으로 남아 헤더가 반으로 갈라져 보였다.
   → 배경을 **행(.term-header)** 이 갖고 버튼은 투명하게 둔다. 두 칸이 한 덩어리로 보인다.
   ⚠️ 색은 버튼의 활성 배경과 **같은 값**이어야 한다 — `--ds-fill`(gray-100) 이 그 값이다(실측 #F5F8FA).
      직접 hex 를 쓰지 말 것(다크모드에서 굳는다).
   ⚠️ `:has()` 를 쓴다(이 프로젝트는 이미 쓴다 — design-system 14절). 지원 확인: `CSS.supports('selector(:has(*))')`. */
#kt_accordion_terms .term-header { background-color: transparent; }
#kt_accordion_terms .term-header:has(> .accordion-button:not(.collapsed)) {
    background-color: var(--ds-fill);
}
/* 배경이 행으로 올라갔으니 버튼 자신은 투명해야 한다 — 안 그러면 색이 두 겹이 된다(모서리에서 티가 난다) */
#kt_accordion_terms .term-header > .accordion-button,
#kt_accordion_terms .term-header > .accordion-button:not(.collapsed) {
    background-color: transparent;
}
/* 모서리: 첫/마지막 항목은 카드 모서리를 따라간다 — 행이 배경을 가지므로 행이 둥글어야 한다 */
#kt_accordion_terms .accordion-item:first-of-type .term-header { border-top-left-radius: inherit; border-top-right-radius: inherit; }
#kt_accordion_terms .accordion-item:last-of-type .term-header { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
#kt_accordion_terms .term-check { flex: 0 0 auto; padding-left: 1.25rem; }
#kt_accordion_terms .term-header > .accordion-button { flex: 1 1 auto; min-width: 0; }
@media (max-width: 767.98px) {
    #kt_accordion_terms .term-check { padding-left: 1rem; }
}

/* -------------------------------------------------------------
   약관 본문 줄바꿈 보존 (2026-07-23 사용자 지적: "줄바꿈이 적용되도록 되어 있나?")

   🔥 DB 의 약관 본문은 **평문 + 개행**이다(`<br>`·`<p>` 0건, 실측). 그냥 렌더하면
   브라우저가 개행을 공백으로 접어 **조문이 한 덩어리로** 붙어 나온다.
   ⚠️ **본문 요소에만** 건다. 스크롤 컨테이너에 걸면 템플릿의 들여쓰기·줄바꿈까지 렌더돼
      본문 앞에 빈 줄이 깔린다(약관 전문 화면에서 실측으로 겪었다).
   ⚠️ 규칙이 `Term.css` 에도 같은 이름으로 있다 — 가입 화면은 그 CSS 를 로드하지 않아 여기 둔다.
      **문구가 두 화면에서 다르게 보이면 안 되므로 값을 맞춰 둘 것.**
   ------------------------------------------------------------- */
.term-content-text {
    white-space: pre-wrap;
    word-break: keep-all;
}