/* styles/responsive.css — 모바일 레이아웃
   html.m-on 클래스가 붙을 때 적용 (JS가 폭 860px 이하에서 토글) */

@media (max-width: 1100px) {
  #root section, #root footer { padding-left: 32px !important; padding-right: 32px !important; }
  #root header { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ── 헤더 ───────────────────────────────── */
html.m-on #root header {
  padding: 12px 18px !important;
  grid-template-columns: auto 1fr !important;
  gap: 12px !important; align-items: center;
}
html.m-on #root header > div:first-child { display: none !important; }
html.m-on #root header > a { text-align: left !important; }
html.m-on #root header > a > div:first-child { font-size: 18px !important; letter-spacing: 0.1em !important; }
html.m-on #root header > a > div:last-child { font-size: 7px !important; }
html.m-on #root header nav { gap: 15px !important; flex-wrap: wrap; }
html.m-on #root header nav a { font-size: 11.5px !important; }

/* ── 섹션 여백 ──────────────────────────── */
html.m-on #root section, html.m-on #root footer {
  padding-left: 20px !important; padding-right: 20px !important;
}
html.m-on #root section { padding-top: 56px !important; padding-bottom: 56px !important; }
html.m-on #root footer { padding-top: 48px !important; padding-bottom: 28px !important; }

/* ── 그리드 1단화 ───────────────────────── */
html.m-on #root [style*="grid-template-columns"]:not(.r-keep) { grid-template-columns: 1fr !important; }
html.m-on #root [style*="gap: 80px"], html.m-on #root [style*="gap: 64px"],
html.m-on #root [style*="gap: 60px"], html.m-on #root [style*="gap: 56px"],
html.m-on #root [style*="gap: 48px"] { gap: 28px !important; }
html.m-on #root [style*="border-right"] { border-right: none !important; }
html.m-on #root [style*="direction: rtl"] { direction: ltr !important; }
html.m-on #root [style*="min-height: 88vh"] { min-height: 0 !important; }
html.m-on #root [style*="order: 1"], html.m-on #root [style*="order: 2"] { order: 0 !important; }
html.m-on #root [style*="position: sticky"] { position: static !important; }
html.m-on #root img { max-width: 100%; }

/* ── 세로쓰기: 장식 라벨 숨김, 히어로 제목은 가로쓰기로 ── */
html.m-on #root [style*="vertical-lr"]:not(.r-hero-title),
html.m-on #root [style*="vertical-rl"] { display: none !important; }
html.m-on #root .r-hero-title {
  writing-mode: horizontal-tb !important;
  font-size: clamp(38px, 10.5vw, 56px) !important;
  letter-spacing: 0.005em !important; line-height: 1.32 !important;
  text-align: left; padding-top: 0 !important;
}

/* ── 히어로 ─────────────────────────────── */
html.m-on #root .r-hero-left { padding: 40px 20px 36px !important; }
html.m-on #root .r-hero-center { display: block !important; padding: 28px 0 !important; }
html.m-on #root .r-hero-img { aspect-ratio: 4 / 3; }

/* ── 큰 제목 축소 (인라인 px 값 오버라이드) ── */
html.m-on #root [style*="font-size: 120px"], html.m-on #root [style*="font-size: 110px"],
html.m-on #root [style*="font-size: 108px"], html.m-on #root [style*="font-size: 96px"],
html.m-on #root [style*="font-size: 88px"], html.m-on #root [style*="font-size: 84px"] { font-size: 38px !important; line-height: 1.25 !important; letter-spacing: 0 !important; }
html.m-on #root [style*="font-size: 80px"], html.m-on #root [style*="font-size: 76px"],
html.m-on #root [style*="font-size: 72px"], html.m-on #root [style*="font-size: 68px"],
html.m-on #root [style*="font-size: 64px"] { font-size: 33px !important; line-height: 1.3 !important; }
html.m-on #root [style*="font-size: 60px"], html.m-on #root [style*="font-size: 56px"],
html.m-on #root [style*="font-size: 54px"] { font-size: 29px !important; line-height: 1.35 !important; }
html.m-on #root [style*="font-size: 48px"], html.m-on #root [style*="font-size: 44px"],
html.m-on #root [style*="font-size: 42px"] { font-size: 26px !important; line-height: 1.4 !important; }
html.m-on #root [style*="font-size: 38px"], html.m-on #root [style*="font-size: 36px"],
html.m-on #root [style*="font-size: 34px"], html.m-on #root [style*="font-size: 32px"] { font-size: 23px !important; line-height: 1.45 !important; }
html.m-on #root h1 { font-size: clamp(30px, 8.5vw, 42px) !important; }
html.m-on #root h2 { font-size: clamp(23px, 6.6vw, 30px) !important; }

/* ── 메뉴 섹션: 모바일은 아코디언 ────────── */
.r-menu-inline { display: none; }
html.m-on #root .r-menu-grid { display: flex !important; flex-direction: column; gap: 0 !important; }
html.m-on #root .r-menu-photo { display: none !important; }
html.m-on #root .r-menu-inline {
  display: block; overflow: hidden;
  grid-template-columns: none !important;
  max-height: 0; opacity: 0;
  transition: max-height .42s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
html.m-on #root .r-menu-inline[data-open="1"] { max-height: 620px; opacity: 1; }
html.m-on #root .r-menu-inline-in { padding: 4px 0 26px; }
html.m-on #root .r-menu-row { padding: 20px 0 !important; gap: 12px !important; }
html.m-on #root .r-menu-row.r-keep { grid-template-columns: 34px 1fr auto !important; }
html.m-on #root .r-menu-item[data-x] { }

/* ── WHY 섹션 ───────────────────────────── */
html.m-on #root .r-why-tail { display: none !important; }
html.m-on #root .r-why-row { padding: 36px 0 !important; }

/* ── 여백 축소 ──────────────────────────── */
html.m-on #root [style*="margin-bottom: 80px"] { margin-bottom: 30px !important; }
html.m-on #root [style*="margin-bottom: 56px"] { margin-bottom: 28px !important; }
html.m-on #root [style*="padding-top: 24px"][style*="border-top"] { padding-top: 18px !important; }
/* 히어로 하단 메타 행: 문장 + 링크 세로 정렬 */
html.m-on #root .r-hero-left > div:last-child { flex-direction: column !important; align-items: flex-start !important; gap: 20px; }

/* ── 가맹문의 페이지 ─────────────────────── */
html.m-on #root [style*="gap: 40px"][style*="display: flex"] { flex-wrap: wrap; gap: 14px 20px !important; }
html.m-on #root [style*="padding: 48px 32px"] { padding: 28px 0 !important; border-left: none !important; min-height: 0 !important; }
html.m-on #root [style*="padding: 80px 0"] { padding: 36px 0 !important; }
html.m-on #root [style*="padding: 80px 40px"] { padding: 40px 20px !important; }
html.m-on #root [style*="min-height: 280px"] { min-height: 0 !important; }

/* ── 푸터 ───────────────────────────────── */html.m-on #root footer [style*="grid-template-columns"] { gap: 32px !important; }
html.m-on #root footer > div > div:last-child { flex-direction: column; gap: 8px; }

@media (max-width: 400px) {
  html.m-on #root header nav { gap: 12px !important; }
  html.m-on #root header nav a { font-size: 10.5px !important; }
}

/* ── 모바일에서 PC용 강제 줄바꿈(<br>) 해제 ── */
html.m-on #root [style*="max-width: 560px"] br,
html.m-on #root [style*="max-width: 500px"] br { display: none; }