/* =============================================
   responsive.css — 공개 사이트 모바일 반응형 보강 (2026-07-20)
   screen-ui.css 뒤에 로드됨. 페이지별 프래그먼트 조립본.
   ============================================= */

/* ===== index.php (메인) ===== */
/* screen-ui.css 의 idx-* 반응형 보강 — 기존 @media(1200/1024/768/480) 커버리지에서 빠진 구간만.
   responsive.css 는 screen-ui.css 뒤에 로드되므로 동일 특이도면 이 파일이 이김. */

/* ── 공통 레이아웃: .idx-inner 는 기본 padding 0 → 1400px 미만에서 좌우 여백 필요 ── */
@media (max-width: 1024px) {
  .idx-inner { padding: 0 24px; }
}
@media (max-width: 768px) {
  .idx-body { overflow-x: hidden; } /* 100vw 캐러셀 소수점 오버플로 가드 */
  .idx-inner { padding: 0 20px; }
  .idx-section-head { margin-bottom: 26px; }
  .idx-section-desc { font-size: 1.1rem; }
}
@media (max-width: 480px) {
  .idx-inner { padding: 0 16px; }
  .idx-eyebrow { font-size: 0.9rem; letter-spacing: 0.1em; }
  .idx-section-desc { font-size: 1.02rem; }
}

/* ── ① 히어로 v2 (.idx-mb) — 배너 레터박스 제거 + 버튼/화살표 축소 ── */
@media (max-width: 768px) {
  .idx-mb__header { margin-bottom: 30px; }
  .idx-mb__title { margin-bottom: 22px; }
  .idx-mb__track { gap: 20px; } /* 기본 100px — 모바일에선 슬라이드 간격 축소 */
  .idx-mb__img,
  .idx-mb__placeholder {
    height: auto;               /* 기존 320px 고정 → 1400x540 비율 유지(상하 레터박스 제거) */
    aspect-ratio: 1400 / 540;
    border-radius: 16px;
  }
  .idx-mb__arrow { width: 38px; height: 38px; }
  .idx-mb .idx-btn-cta,
  .idx-mb .idx-btn-outline-white { height: 52px; padding: 0 24px; font-size: 1.05rem; }
}
@media (max-width: 480px) {
  .idx-mb { padding-bottom: 36px; }
  .idx-mb__title { gap: 6px; margin-bottom: 20px; }
  .idx-mb__title-sub { font-size: 1.25rem; }
  .idx-mb__title-main { font-size: 1.9rem; }
  .idx-mb__title-main em { font-size: 2.2rem; }
  .idx-mb__actions { flex-direction: column; align-items: center; gap: 10px; }
  .idx-mb .idx-btn-cta,
  .idx-mb .idx-btn-outline-white {
    width: 100%;
    max-width: 300px;
    height: 50px;
    justify-content: center;
    font-size: 1rem;
  }
  .idx-mb__slide { max-width: 90vw; }
  .idx-mb__arrow { width: 32px; height: 32px; }
  .idx-mb__arrow svg { width: 16px; height: 16px; }
  .idx-mb__arrow--prev { left: 8px; }
  .idx-mb__arrow--next { right: 8px; }
  .idx-mb__dots { margin-top: 14px; }
}

/* ── ② 도입 효과 (.idx-impact-*) — 카드 패딩/폰트 축소 ── */
@media (max-width: 768px) {
  .idx-impact-bento { gap: 16px; grid-auto-rows: auto; }
  .idx-impact-card__text { padding: 26px 24px; }
  .idx-impact-card__title { font-size: 1.4rem; margin-bottom: 10px; }
  .idx-impact-card__desc { font-size: 1.05rem; margin-bottom: 16px; }
  .idx-impact-card--feature .idx-impact-card__media { min-height: 200px; padding: 4px 22px 20px; }
}
@media (max-width: 480px) {
  .idx-impact-card__text { padding: 22px 20px; }
  .idx-impact-card__title { font-size: 1.3rem; }
  .idx-impact-card__desc { font-size: 1rem; }
  .idx-impact-card__more { font-size: 0.95rem; }
  .idx-impact-card--row .idx-impact-card__media { flex-basis: 140px; padding: 14px; }
  .idx-impact-card--row .idx-impact-card__media img { max-width: 130px; max-height: 130px; }
  .idx-impact-card--feature .idx-impact-card__media { min-height: 170px; }
  .idx-impact-card--feature .idx-impact-card__media img { max-height: 160px; }
}

/* ── ③ 왜 모리인가 (.idx-why-* / .idx-feature-row) ── */
@media (max-width: 768px) {
  .idx-why-layout { gap: 40px; }
  .idx-why__list li { font-size: 1.1rem; gap: 12px; }
  .idx-feature-row { padding: 16px 18px; gap: 14px; }
  .idx-feature-row__icon { width: 48px; height: 48px; }
  .idx-feature-row__icon svg { width: 24px; height: 24px; }
  .idx-feature-row__name { font-size: 1.3rem; }
}
@media (max-width: 480px) {
  .idx-why__label { margin-bottom: 16px; }
  .idx-why__list { gap: 12px; }
  .idx-why__list li { font-size: 1.02rem; }
  .idx-why__list-icon { width: 24px; height: 24px; border-radius: 6px; }
  .idx-feature-row { padding: 14px 16px; gap: 12px; border-radius: 10px; }
  .idx-feature-row__icon { width: 42px; height: 42px; border-radius: 10px; }
  .idx-feature-row__icon svg { width: 21px; height: 21px; }
  .idx-feature-row__name { font-size: 1.15rem; margin-bottom: 2px; }
  .idx-feature-row__sub { font-size: 0.92rem; }
}

/* ── ④ 추천 대상 (.idx-review-*) ── */
@media (max-width: 768px) {
  .idx-review-grid { gap: 16px; }
}
@media (max-width: 480px) {
  .idx-review-card { padding: 24px 20px; gap: 14px; }
  .idx-review-card__body::before,
  .idx-review-card__body::after { font-size: 2rem; }
}

/* ── ⑤ 보안 & 신뢰 (.idx-trust-*) ── */
@media (max-width: 768px) {
  .idx-trust-grid { gap: 16px; }
}
@media (max-width: 480px) {
  .idx-trust-card { padding: 26px 20px 24px; }
  .idx-trust-card__icon { width: 52px; height: 52px; margin-bottom: 14px; }
}

/* ── ⑦ 최신 소식 (.idx-news-*) — 고정 높이 400px 해제 ── */
@media (max-width: 768px) {
  .idx-news-grid { gap: 16px; }
  .idx-news-card { height: auto; min-height: 300px; }
}
@media (max-width: 480px) {
  .idx-news-card { padding: 24px 20px 20px; min-height: 0; }
  .idx-news-card__title { font-size: 1.2rem; margin-bottom: 12px; }
  .idx-news-card__excerpt { -webkit-line-clamp: 4; line-clamp: 4; margin-bottom: 16px; }
}

/* ── ⑧ 하단 CTA (.idx-cta) ── */
@media (max-width: 768px) {
  .idx-cta { padding: 72px 24px; }
}
@media (max-width: 480px) {
  .idx-cta { padding: 60px 16px; }
  .idx-cta__kicker { font-size: 0.9rem; }
  .idx-cta__desc { font-size: 0.95rem; margin-bottom: 32px; }
  .idx-cta__btns { flex-direction: column; gap: 10px; }
  .idx-cta__btns .idx-btn-cta-white,
  .idx-cta__btns .idx-btn-outline-white {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

/* ===== service-intro 4종 ===== */
/* service-intro-erp / -mini / -mypage / -setting 공통 (.ip-* + .si-cta-banner)
   screen-ui.css 기존 @media(1024/768) 커버 밖 보강분만 — 데스크톱 불변
   기준: 1rem = 16px (common.css html { font-size:16px }) */

/* ── 1024px — 히어로 여백 보정 ── */
@media (max-width: 1024px) {
  .ip-hero__title { margin-bottom: 40px; }
}

/* ── 768px — 타이틀·리드 축소 + 이중 패딩 제거 ── */
@media (max-width: 768px) {
  /* [ip-hero] 히어로 */
  .ip-hero__title { font-size: 1.75rem; margin-bottom: 28px; }
  .ip-hero__desc { font-size: 1.1rem; margin-bottom: 24px; }

  /* [공통] 섹션 타이틀·리드 (기본 clamp 하한 28.8px → 축소) */
  .ip-feature__title, .ip-tabs__title, .ip-detail__title { font-size: 1.55rem; }
  .ip-feature__lead, .ip-tabs__lead, .ip-detail__lead { font-size: 1.15rem; }
  .ip-feature__head { margin-bottom: 36px; }

  /* [ip-detail] zigzag — 1024px 룰(padding 0 24px)이 섹션 패딩과 겹쳐
     좌우 44px 이중 인셋이 되는 것 제거 */
  .ip-detail__head { margin-bottom: 48px; }
  .ip-detail__row { padding: 0; margin-bottom: 48px; }
  .ip-detail__headline { font-size: 1.35rem; }
  .ip-detail__desc { font-size: 1.15rem; margin-bottom: 20px; }

  /* [ip-tabs] 탭 상하 간격 */
  .ip-tabs__heads { margin-bottom: 32px; }
  .ip-tabs__images { margin-top: 32px; }

  /* [si-cta-banner] CTA 배너 */
  .si-cta-banner { padding: 56px 20px; }
}

/* ── 480px — 소형 화면 압축 ── */
@media (max-width: 480px) {
  /* [ip-hero] */
  .ip-hero { padding: 44px 16px 40px; }
  .ip-hero__eyebrow { font-size: 1.05rem; margin-bottom: 14px; }
  .ip-hero__title { font-size: 1.5rem; }
  .ip-hero__btn-primary, .ip-hero__btn-ghost { padding: 13px 20px; font-size: 1.1rem; }

  /* [공통] 섹션 패딩·타이틀 */
  .ip-feature, .ip-detail, .ip-tabs { padding: 44px 16px; }
  .ip-feature__title, .ip-tabs__title, .ip-detail__title { font-size: 1.35rem; }
  .ip-feature__lead, .ip-tabs__lead, .ip-detail__lead { font-size: 1.05rem; }

  /* [ip-feature] 카드 박스 */
  .ip-feature__box { border-radius: 16px; }
  .ip-feature__box-cont { padding: 24px 18px; }
  .ip-feature__box-tit { font-size: 1.2rem; }
  .ip-feature__box-des { font-size: 1.05rem; }

  /* [ip-promo] 미니배너 */
  .ip-promo { padding: 32px 0; }
  .ip-promo__title { font-size: 1.2rem; }
  .ip-promo__desc { font-size: 1.05rem; }
  .ip-promo__btn { padding: 13px 22px; font-size: 1.1rem; }

  /* [ip-tabs] 탭 nav(가로 스크롤 유지)·이미지 */
  .ip-tabs__nav-item { padding: 13px 16px; font-size: 1.1rem; }
  .ip-tabs__image, .ip-tabs__image img { border-radius: 12px; }

  /* [ip-detail] */
  .ip-detail__tag { font-size: 1.05rem; padding: 6px 14px; }
  .ip-detail__headline { font-size: 1.25rem; }
  .ip-detail__desc { font-size: 1.05rem; }
  .ip-detail__list li { font-size: 1.1rem; padding-left: 28px; }

  /* [si-cta-banner] */
  .si-cta-banner { padding: 48px 16px; }
  .si-cta-banner__title { font-size: 1.5rem; }
  .si-cta-banner__desc { font-size: 1.05rem; }
  .si-cta-banner__desc br { display: none; }
  .si-cta-btn { width: 100%; padding: 14px 24px; }
}

/* ===== payment-add ===== */
/* payment-add.php (pa-*) 모바일 반응형 보강 — screen-ui.css 뒤에 로드됨. 데스크톱 불변. */

@media (max-width: 1024px) {
  /* 비교 카드가 세로 스택되는 구간(≤960)에서 카드 간 간격 확보.
     961~1024 단일행 구간은 row-gap 이라 영향 없음 (기존 gap:0 유지) */
  .pa-compare__wrap { row-gap: 18px; }
}

@media (max-width: 768px) {
  /* 히어로 100vh 해제 — 모바일에서 과도한 여백 제거.
     idx-hero 페이지라 헤더(64px)가 히어로 위에 겹치므로 상단 패딩으로 클리어 */
  .pa-hero { min-height: auto; padding: 112px 24px 64px; }
  .pa-section { padding: 72px 20px; }
  .pa-hero__lead { margin-bottom: 40px; }
  .pa-hero__cta { margin-bottom: 40px; }
  .pa-pain__grid,
  .pa-services__grid,
  .pa-scope__grid { margin-top: 36px; gap: 16px; }
  .pa-compare__wrap { margin-top: 40px; }
}

@media (max-width: 480px) {
  .pa-hero { padding: 96px 16px 56px; }
  .pa-section { padding: 60px 16px; }

  /* CTA 버튼 풀폭 */
  .pa-hero__cta,
  .pa-cta__btns { flex-direction: column; align-items: stretch; }
  .pa-btn-primary,
  .pa-btn-secondary { justify-content: center; }

  /* 수식형 가격(박스 + 박스 = 합계) — 세로 스택 (box-name 이 nowrap 이라 좁은 화면에서 안전) */
  .pa-hero__price-wrap { width: 100%; padding: 22px 14px; }
  .pa-hero__price-eq { flex-direction: column; gap: 8px; width: 100%; }
  .pa-hero__price-box { width: 100%; min-width: 0; }
  .pa-cta__price-eq { flex-direction: column; gap: 8px; }
  .pa-cta__price-box { width: 100%; min-width: 0; }
  .pa-cta__price-big { margin-top: 4px; }

  /* 카드 패딩 축소 */
  .pa-service-card { padding: 28px 20px 32px; }
  .pa-compare__card { padding: 30px 20px; }
  .pa-scope__block { padding: 26px 18px; }
  .pa-highlight { flex-direction: column; align-items: flex-start; padding: 22px 18px; }

  /* 취소선 가격("2,000만원 +") — clamp 최소 2.8rem이 375px 카드 내부에서 빠듯 */
  .pa-compare__price-big { font-size: 2.4rem; }

  /* 가격 행 — 라벨 위 / 금액 아래 */
  .pa-service-card__price-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pa-service-card__price-note { text-align: left; }
}

/* ===== payment-complete / payment-cancelled ===== */
/* sc2-* (screen-ui.css 완료/취소 페이지) 모바일 보강 — @media 전용, 데스크톱 불변 */

@media (max-width: 768px) {
  /* 풀스크린 고정(overflow:hidden)이 작은 화면에서 CTA를 잘라먹지 않도록 스크롤 허용 */
  body.rc-fullscreen { overflow-y: auto; }

  .sc2-page--center { padding: 24px 16px 32px; }

  .sc2-subtotal-row__key,
  .sc2-subtotal-row__val { font-size: 15px; }
}

@media (max-width: 480px) {
  .sc2-page { padding: 36px 14px 48px; }

  .sc2-hero__title { font-size: 20px; }
  .sc2-page--center .sc2-hero__illust { width: 84px; height: 84px; }

  /* CTA — 모바일 풀폭 버튼 */
  .sc2-cta-btn { width: 100%; max-width: 320px; justify-content: center; }

  /* 영수증 카드 */
  .sc2-receipt-section { padding: 18px 14px; }
  .sc2-total-box { margin: 0 14px 16px; padding: 14px; }
  .sc2-total-box__price { font-size: 26px; }

  /* 긴 값(세금계산서 이메일·도메인 등)은 라벨 아래 줄로 떨어지도록 */
  .sc2-detail-row { flex-wrap: wrap; }

  .sc2-subtotal-row__key,
  .sc2-subtotal-row__val { font-size: 14px; }
}

/* ===== auth (login/find/change/complete) ===== */
/* login.php — screen-ui.css 에 1024/640/480 커버리지 기존 완비, 추가 없음.
   password-complete / register-complete (sc2-*) — 768/480 커버리지 기존 완비, 추가 없음.
   아래는 find-account.php / change-password.php 전용 보강
   (.find-content / .iq-hero--narrow 는 이 두 페이지에서만 사용됨). */

/* .page-wrap 좌우 패딩이 0 이라 콘텐츠(최대 800px)가
   좁은 화면에서 화면 끝에 붙는 문제 — 좌우 거터 보강 */
@media (max-width: 1024px) {
  .page-wrap > .find-content {
    padding-left: var(--sc-sp-base);
    padding-right: var(--sc-sp-base);
  }

  /* 히어로 배너: 가운데 정렬 유지한 채 좌우 여백 확보 (width:100% 이라 margin 사용 불가) */
  .iq-hero--narrow {
    max-width: min(800px, calc(100% - 2 * var(--sc-sp-base)));
  }
}

@media (max-width: 480px) {
  /* 폼 테이블: 라벨(th) 위 / 입력(td) 아래 1단 스택.
     [hidden] 인 인증번호 행(tr.row-code)이 켜지지 않도록 :not([hidden]) 가드 필수 */
  .find-content .sc-form-table,
  .find-content .sc-form-table tbody,
  .find-content .sc-form-table tr:not([hidden]),
  .find-content .sc-form-table th,
  .find-content .sc-form-table td {
    display: block;
    width: 100%;
  }

  .find-content .sc-form-table th {
    border-right: none;
    border-bottom: none;
    padding-bottom: var(--sc-sp-xs);
  }

  .find-content .sc-form-table td {
    padding-top: var(--sc-sp-sm);
  }

  /* 스택 상태에서 사업자등록번호 3분할 인풋 여유 확보 */
  .find-content .sc-split-group .sc-input {
    padding-left: var(--sc-sp-sm);
    padding-right: var(--sc-sp-sm);
  }

  /* 히어로 안 여백 소폭 축소 */
  .iq-hero--narrow {
    margin-top: var(--sc-sp-lg);
    margin-bottom: var(--sc-sp-lg);
  }
}

/* ===== support (notice/faq) ===== */
/* notice-list / notice-view / faq-list (+ iq-hero 공용 히어로) 모바일 보강
   모든 규칙 @media 한정 — 데스크톱 불변. screen-ui.css 뒤에 로드 전제. */

@media (max-width: 1024px) {
  /* 콘텐츠 좌우 여백 — 공지/FAQ/문의 페이지만 스코프 (page-wrap 자체는 공용이라 :has 로 한정) */
  .page-wrap--notice,
  .page-wrap--has-top,
  .page-wrap:has(.faq-cat-tabs),
  .page-wrap:has(.iq-layout) {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* 공지 상세 본문 — 어드민 입력 HTML 방어 */
  .nv-article__body img {
    max-width: 100%;
    height: auto;
  }
  .nv-article__body iframe,
  .nv-article__body video,
  .nv-article__body table {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .page-wrap--notice,
  .page-wrap--has-top,
  .page-wrap:has(.faq-cat-tabs),
  .page-wrap:has(.iq-layout) {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* 히어로 상하 여백 축소 */
  .iq-hero {
    margin: 24px auto;
  }

  /* 카운트 + 검색 툴바 — 세로 스택 (검색폼은 기존 768 규칙으로 풀폭) */
  .nb-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sc-sp-sm);
  }
  .nb-search-btn {
    flex-shrink: 0;
  }

  /* 기존 screen-ui 768 규칙(td:last-child 숨김)이 colspan=4 빈 행까지 숨기는 것 복구 */
  .nb-table td.nb-table__empty {
    display: table-cell;
  }

  /* 페이지네이션 줄바꿈 허용 */
  .nb-pagination {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* 상세 메타 (작성자|날짜|조회) 줄바꿈 */
  .nv-article__meta {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* 본문 넓은 콘텐츠(표 등)는 본문 내부 스크롤로 격리 */
  .nv-article__body {
    overflow-x: auto;
    overflow-wrap: break-word;
  }
}

@media (max-width: 480px) {
  .page-wrap--notice,
  .page-wrap--has-top,
  .page-wrap:has(.faq-cat-tabs),
  .page-wrap:has(.iq-layout) {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 히어로 — 375px 대응 */
  .iq-hero {
    margin: 16px auto;
    padding-top: var(--sc-sp-xl);
  }
  .iq-hero__title {
    font-size: var(--sc-fs-2xl);
  }
  .iq-hero__desc br {
    display: none;
  }

  /* 게시판 테이블 */
  .nb-table th {
    font-size: 14px;
  }
  .nb-table__title-link {
    overflow-wrap: anywhere; /* 긴 URL 등 미분리 문자열 오버플로 방지 */
  }

  /* 페이지네이션 축소 */
  .nb-pagination__btn,
  .nb-pagination__num {
    width: 30px;
    height: 30px;
  }

  /* 공지 상세 */
  .nv-article__header {
    padding: var(--sc-sp-lg) var(--sc-sp-base);
  }
  .nv-article__body {
    padding: var(--sc-sp-lg) var(--sc-sp-base);
  }
  .nv-article__title {
    font-size: var(--sc-fs-lg);
  }
  .nv-post-nav__item {
    padding: var(--sc-sp-md) var(--sc-sp-base);
  }

  /* FAQ 카테고리 탭 축소 */
  .faq-cat-tab {
    height: 32px;
    padding: 0 var(--sc-sp-sm);
    font-size: var(--sc-fs-xs);
  }
}