/* ============================================
   REMOTAX Mobile Responsive Overrides
   Tailwind breakpoints: sm:640 / md:768 / lg:1024 / xl:1280
   ============================================ */

/* ---------- 1. 공통 hero·section 패딩 축소 ---------- */
@media (max-width: 767px) {
  /* 메인 콘텐츠 좌우 패딩 통일 */
  .max-w-7xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* 히어로 큰 텍스트 살짝 축소 */
  h1.text-5xl, h1.text-4xl { font-size: 26px !important; line-height: 1.3 !important; }
  h2.text-4xl, h2.text-3xl { font-size: 22px !important; line-height: 1.35 !important; }
  /* 섹션 상하 여백 (inline style: padding-top/bottom 100px) */
  section[style*="padding-top: 100px"], section[style*="padding-top:100px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

/* ---------- 2. Fixed 닌자 위젯 — 모바일에서 줄임 ---------- */
@media (max-width: 767px) {
  .fixed.z-40 {
    bottom: 16px !important;
    right: 16px !important;
    gap: 8px !important;
  }
  .fixed.z-40 .float-soft img {
    width: 56px !important;
    height: 56px !important;
  }
  .fixed.z-40 [class*="float-delay-1"] > a > div {
    width: 168px !important;
    padding: 8px 12px !important;
  }
  .fixed.z-40 [class*="float-delay-1"] p {
    font-size: 10px !important;
  }
}

/* ---------- 3. 모바일 햄버거 드로어 ---------- */
.mobile-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-drawer-overlay.open {
  display: block;
  opacity: 1;
}
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 80%;
  max-width: 320px;
  background: #fff;
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: -8px 0 24px rgba(0,0,0,0.12);
}
.mobile-drawer.open {
  transform: translateX(0);
}
.mobile-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid #f0f0f0;
}
.mobile-drawer-close {
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: #e94624;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}
.mobile-drawer nav {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
}
.mobile-drawer nav a {
  padding: 14px 24px;
  font-size: 15px;
  color: #333;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  border-bottom: 1px solid #fafafa;
  transition: background-color 0.15s;
}
.mobile-drawer nav a:hover {
  background: #fff5f2;
  color: #e94624;
}
.mobile-drawer-cta {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mobile-drawer-cta a {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.mobile-drawer-cta .btn-outline {
  border: 1.5px solid #e94624;
  color: #e94624;
  background: #fff;
}
.mobile-drawer-cta .btn-fill {
  background: #e94624;
  color: #fff;
}

/* ---------- 4. apply-step 폼 — 모바일 ---------- */
@media (max-width: 767px) {
  /* 스텝 인디케이터 폰트 축소 */
  .steps .step { padding: 12px 16px 12px 22px !important; font-size: 11px !important; }
  .steps .step .num { font-size: 10px !important; }
  .steps .step .lbl { font-size: 11px !important; }

  /* 폼 필드 row 세로 스택 */
  .field-row { flex-direction: column !important; gap: 8px !important; padding: 8px 0 !important; }
  .field-label { min-width: 100% !important; padding-top: 4px !important; font-size: 13px !important; }
  .field-input { min-width: 100% !important; }
  .field-input.row-2 { flex-direction: column !important; gap: 8px !important; }
  .field-input.row-2 input { min-width: 100% !important; }
  input.in, select.in, textarea.in { font-size: 14px !important; padding: 10px 12px !important; }
  input.in[style*="max-width: 240px"] { max-width: 100% !important; }

  /* yellow-box 패딩 축소 */
  .yellow-box { padding: 20px 16px !important; }
  /* 가운데 정렬 라디오 일렬 그리드 → 세로 */
  .radio-inline { flex-direction: column !important; gap: 10px !important; }

  /* agree-box 세로 */
  .agree-box { flex-direction: column !important; gap: 12px !important; padding: 16px !important; }
  .agree-label { min-width: 100% !important; }

  /* 액션 버튼 */
  .actions { flex-direction: column !important; gap: 10px !important; }
  .btn-primary, .btn-secondary { width: 100% !important; padding: 14px !important; box-sizing: border-box; }

  /* apply-wrap 패딩 */
  .apply-wrap { padding: 32px 16px 48px !important; }
  .apply-title { font-size: 22px !important; }
  .done-title { font-size: 20px !important; }
  .done-msg { font-size: 13px !important; }

  /* confirm 페이지 (apply-step3) info-list */
  .info-list .row { flex-direction: column !important; gap: 4px !important; padding: 12px 0 !important; }
  .info-list .lbl { min-width: 100% !important; font-size: 12px !important; color: #888 !important; }
  .info-list .val { min-width: 100% !important; font-size: 14px !important; gap: 8px !important; }
  .info-list .val span { min-width: auto !important; }
  .yellow-list .row { padding: 12px 16px !important; }
  .edit-btn-wrap { margin: 6px 0 8px !important; }
  .edit-btn { font-size: 11px !important; padding: 6px 14px !important; }
  .section-head { font-size: 16px !important; margin: 28px 0 12px !important; }
}

/* ---------- 4-1. 스텝 인디케이터 — 매우 좁은 화면 ---------- */
@media (max-width: 480px) {
  .steps { gap: 4px !important; margin-bottom: 32px !important; }
  .steps .step {
    clip-path: none !important;
    border-radius: 6px !important;
    margin-left: 0 !important;
    padding: 8px 4px !important;
    font-size: 10px !important;
  }
  .steps .step .num { font-size: 9px !important; }
  .steps .step .lbl { font-size: 10px !important; }
}

/* ---------- 5. terms / privacy 페이지 ---------- */
@media (max-width: 767px) {
  .terms-wrap { padding: 32px 16px 56px !important; }
  .terms-title { font-size: 20px !important; }
  h2.chapter { font-size: 16px !important; }
  h3.section { font-size: 14px !important; }
  p.body, ol.body, ul.body { font-size: 13px !important; }
}

/* ---------- 6. 컬럼/블로그 상세 article ---------- */
@media (max-width: 767px) {
  .article-h1 { font-size: 22px !important; }
  .article-h2 { font-size: 18px !important; margin-bottom: 24px !important; }
  .article-callout { font-size: 15px !important; margin: 24px 0 !important; }
  .article-p { font-size: 14px !important; line-height: 1.85 !important; text-indent: 0 !important; }
  .article-section-title { font-size: 15px !important; margin: 32px 0 12px !important; }
  .article-callout-img-wrap { margin: 20px 0 28px !important; }
  .article-img-caption {
    position: static !important;
    margin-top: 12px;
    max-width: 100% !important;
    text-align: center !important;
    font-size: 12px !important;
  }
  .article-back-btn { padding: 12px 32px !important; font-size: 13px !important; width: 100%; box-sizing: border-box; text-align: center; }
}

/* ---------- 7. 비교 테이블 가로 스크롤 ---------- */
@media (max-width: 767px) {
  .compare-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .compare-table-wrap table { min-width: 560px !important; }
  table.responsive-scroll { display: block; overflow-x: auto; white-space: nowrap; }
}

/* digitalization.html — 3컬럼 비교표 모바일 스택형으로 재구성 */
@media (max-width: 767px) {
  /* 헤더 행(項目/現在/変更後) 숨김 — 각 항목 안에 인라인 라벨로 대체 */
  .rounded-3xl > .grid.grid-cols-3.bg-\[\#f9fafb\] {
    display: none !important;
  }
  /* 각 데이터 행 — 3컬럼을 블록으로 풀어 세로 스택 */
  .rounded-3xl > .grid.grid-cols-3:not(.bg-\[\#f9fafb\]) {
    display: block !important;
    padding: 18px 16px !important;
    background: #fff !important;
    border-top: 1px solid #f3f4f6 !important;
  }
  /* 첫번째: 아이콘 + 항목명 (예: 購入時の支払い) */
  .rounded-3xl > .grid.grid-cols-3 > div:nth-child(1) {
    padding: 0 0 12px 0 !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    background: transparent !important;
    gap: 10px !important;
  }
  .rounded-3xl > .grid.grid-cols-3 > div:nth-child(1) .bg-\[\#eff6ff\] {
    padding: 6px !important;
    border-radius: 8px !important;
  }
  .rounded-3xl > .grid.grid-cols-3 > div:nth-child(1) svg {
    width: 18px !important; height: 18px !important;
  }
  .rounded-3xl > .grid.grid-cols-3 > div:nth-child(1) > span {
    font-size: 14px !important;
  }
  /* 2·3번째: 현재 / 변경 후 — 라벨 prefix 자동 삽입 */
  .rounded-3xl > .grid.grid-cols-3 > div:nth-child(2),
  .rounded-3xl > .grid.grid-cols-3 > div:nth-child(3) {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 8px 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    gap: 10px !important;
  }
  .rounded-3xl > .grid.grid-cols-3 > div:nth-child(2)::before {
    content: "現在";
    flex-shrink: 0;
    background: #fef2f2;
    color: #e7000b;
    font-weight: 700;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 999px;
    line-height: 1.6;
    margin-top: 1px;
  }
  .rounded-3xl > .grid.grid-cols-3 > div:nth-child(3)::before {
    content: "変更後";
    flex-shrink: 0;
    background: #fdf6f0;
    color: #e94624;
    font-weight: 700;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 999px;
    line-height: 1.6;
    margin-top: 1px;
  }
  .rounded-3xl > .grid.grid-cols-3 > div:nth-child(2) > span,
  .rounded-3xl > .grid.grid-cols-3 > div:nth-child(3) > span {
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
}

/* digitalization.html — STEP 01~04 배지를 제목 위로 분리 */
@media (max-width: 767px) {
  /* STEP 카드 자체 — 가로 flex를 세로로 */
  .bg-white.rounded-3xl.flex.gap-6.items-start {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px !important;
    align-items: stretch !important;
  }
  /* 아이콘 영역 줄임 */
  .bg-white.rounded-3xl.flex .bg-\[\#E94624\].rounded-2xl.w-16.h-16 {
    width: 48px !important;
    height: 48px !important;
    padding: 10px !important;
  }
  .bg-white.rounded-3xl.flex .bg-\[\#E94624\].rounded-2xl.w-16.h-16 svg {
    width: 24px !important; height: 24px !important;
  }
  /* STEP 01 배지 + 제목 — 세로 스택 (배지 위, 제목 아래) */
  .bg-white.rounded-3xl .flex.items-center.gap-3.mb-2 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  /* 제목 폰트 축소 */
  .bg-white.rounded-3xl h3.text-lg {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
}

/* ---------- 8. 풋터 그리드 → 세로 ---------- */
@media (max-width: 767px) {
  footer .grid.md\:grid-cols-4 { gap: 24px !important; }
  footer .flex-wrap.gap-3 { gap: 8px !important; }
  footer h4 { font-size: 14px !important; margin-bottom: 12px !important; }
  footer ul li a { font-size: 13px !important; }
  footer .flex.flex-col.md\:flex-row { gap: 12px !important; text-align: center; }
}

/* ---------- 9. FAQ 아코디언 ---------- */
@media (max-width: 767px) {
  details summary { font-size: 14px !important; padding: 14px 16px !important; }
  details > div, details p { font-size: 13px !important; padding: 12px 16px !important; }
}

/* ---------- 10. service-overview 워크플로우 ---------- */
@media (max-width: 767px) {
  .workflow-2col { grid-template-columns: 1fr !important; gap: 16px !important; }
  .workflow-arrow-right { transform: rotate(90deg) !important; }
}

/* ---------- 11. 통계 카드 그리드 ---------- */
@media (max-width: 640px) {
  .grid.md\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .grid.md\:grid-cols-3 { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ---------- 12. 텍스트 줄바꿈 안전장치 ---------- */
@media (max-width: 767px) {
  .whitespace-nowrap { white-space: normal !important; }
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  /* 컨테이너 가로 강제 제한 */
  .max-w-\[1282px\], .max-w-\[832px\], .max-w-\[672px\] { max-width: 100% !important; }
}

/* ---------- 13. home.html 료금 플랜 카드 ---------- */
@media (max-width: 767px) {
  /* 둥근 카드 컨테이너 — 라운드 줄임·min-height 해제 */
  .rounded-\[2\.5rem\] {
    border-radius: 20px !important;
    min-height: auto !important;
  }
  /* 手数料の仕組み — absolute 해제하여 정상 흐름 */
  .rounded-\[2\.5rem\] > .absolute.bottom-0 {
    position: static !important;
    left: auto !important; right: auto !important;
    padding: 20px 20px 24px !important;
    border-top: 1px solid rgba(255,255,255,0.15) !important;
  }
  /* 2개 카드 그리드 — padding 축소, pb-48 해제 */
  .rounded-\[2\.5rem\] .grid.md\:grid-cols-2 {
    padding: 32px 20px !important;
    gap: 24px !important;
  }
  /* 좌·우 카드 padding·border 해제 (라인 제거) */
  .rounded-\[2\.5rem\] .grid.md\:grid-cols-2 > div {
    padding: 0 !important;
    border: none !important;
    text-align: center;
  }
  /* 가격 숫자 줄바꿈 + 폰트 축소 */
  .rounded-\[2\.5rem\] .grid .text-\[48px\] {
    font-size: 40px !important;
  }
  .rounded-\[2\.5rem\] .grid .flex.items-baseline {
    justify-content: center;
    flex-wrap: nowrap;
  }
  .rounded-\[2\.5rem\] .grid .text-xl {
    font-size: 14px !important;
  }
  .rounded-\[2\.5rem\] .grid p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .rounded-\[2\.5rem\] .grid h3 {
    text-align: center;
  }
}

/* ---------- 14. お申込み 버튼 — 풀폭 중앙정렬 ---------- */
@media (max-width: 767px) {
  .flex.flex-col.sm\:flex-row a.inline-flex {
    width: 100% !important;
    justify-content: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* CTA 섹션 텍스트도 축소 */
  section .text-\[48px\].font-black {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }
}

/* ---------- 15. fixed 닌자 위젯 — JS 외에 인라인 !important 회피 ---------- */
@media (max-width: 480px) {
  /* 위젯 라벨이 닌자보다 너무 큰 문제 — 더 축소 */
  body .fixed.z-40 [class*="float-delay-1"] > a > div {
    width: 148px !important;
    padding: 6px 10px !important;
  }
  body .fixed.z-40 .float-soft img {
    width: 48px !important;
    height: 48px !important;
  }
}

/* ---------- 16. 레거시 변환 블로그 상세(.legacy-article) 모바일 대응 ---------- */
@media (max-width: 767px) {
  /* 본문 래퍼 풀폭 */
  .legacy-article { max-width: 100% !important; }

  /* 내부 고정폭 컨테이너(width:1110px 등) 풀폭화 */
  .legacy-article .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* 이미지 래퍼 좌우 큰 패딩 제거 */
  .legacy-article .container .mb-5,
  .legacy-article .container [class*="pl-5"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* 고정폭 이미지(width:984px/615px 등) 풀폭 */
  .legacy-article img {
    width: 100% !important;
    height: auto !important;
  }
  /* 큰 인라인 폰트(제목) 모바일 축소 */
  .legacy-article font[size="6"],
  .legacy-article font[style*="font-size: 24pt"] { font-size: 20px !important; }
  .legacy-article font[style*="font-size: 16pt"] { font-size: 17px !important; }
  .legacy-article font[style*="font-size: 13pt"] { font-size: 15px !important; }
  /* 본문 가독성 */
  .legacy-article p { font-size: 15px !important; }
  /* 표 가로 스크롤 */
  .legacy-article table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  /* 들여쓰기(in 단위) 과도한 경우 축소 */
  .legacy-article p[style*="text-indent"] { text-indent: 0 !important; }
  .legacy-article p[style*="margin-left"] { margin-left: 0 !important; }
}

/* ---------- 17. 블로그 상세(.legacy-article) — 모바일은 스크롤 애니메이션 끄고 즉시 표시 ---------- */
@media (max-width: 767px) {
  .legacy-article[data-animate],
  .legacy-article [data-animate],
  .legacy-article ~ [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* Hero 배경 인물(점원 얼굴)이 모바일에서 잘리지 않도록 우측으로 정렬 */
@media (max-width: 767px) {
  #hero-bg-img { object-position: 70% center !important; }
}

/* 모바일에서 우측 닌자 심볼 + 말풍선 블록 숨김 (배경 사진 더 노출) */
@media (max-width: 767px) {
  #hero-ninja-block { display: none !important; }
}

/* 모바일 hero 상단 여백 축소 (142px -> 96px, 헤더 h-20=80px 아래 여유 확보) */
@media (max-width: 767px) {
  #hero-section { padding-top: 64px !important; padding-bottom: 64px !important; }
}

/* 모바일: 오렌지 상단 박스(hero) 바로 아래 본문 시작 여백 축소 (각 메뉴 페이지 공통) */
@media (max-width: 767px) {
  section.relative.w-full.overflow-hidden + div,
  section.relative.w-full.overflow-hidden + section {
    padding-top: 32px !important;
  }
}

/* 모바일: 오렌지 상단 박스 내부 상하 패딩 축소 → 제목/콘텐츠 위로 올림 (각 메뉴 페이지) */
@media (max-width: 767px) {
  section.relative.w-full.overflow-hidden .py-14,
  section.relative.w-full.overflow-hidden .py-20 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* 모바일: 페이지별 상단 여백 개별 조정 */
@media (max-width: 767px) {
  #tr-body { padding-top: 32px !important; }   /* tax-reform: 96px -> 32px (여백 축소) */
  #svc-body { padding-top: 72px !important; }  /* service: 32px -> 72px (여백 확대) */
}

/* 모바일: 홈 대형 섹션 상하 여백 축소 (130/124/101px -> 56px) */
@media (max-width: 767px) {
  .py-\[130px\], .py-\[124px\], .py-\[101px\] {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

/* 모바일: 홈 소개영상 블록(영상 아래 여백 + 3개 선택 카드) 촘촘하게 */
@media (max-width: 767px) {
  .aspect-video.mb-8 { margin-bottom: 16px !important; }
  [class*="sm:grid-cols-3"] { gap: 10px !important; }
  [class*="sm:grid-cols-3"] > button { padding: 12px !important; }
}

/* 모바일: .py-24 섹션 상하 여백 축소 (96px -> 28px) */
@media (max-width: 767px) {
  .py-24 { padding-top: 28px !important; padding-bottom: 28px !important; }
}