/* =========================================================
   FitMirror Mobile Compact Overrides
   적용 범위: 사용자 웹 전체 모바일 밀도/가로 넘침/큰 카드 보정
   PC 화면은 기존 디자인을 유지하고 980px 이하에서만 동작한다.
========================================================= */

@media (max-width: 980px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100% !important;
  }

  .wrap,
  .content > .wrap,
  .page-top-gap {
    width: min(100% - 24px, 1180px) !important;
    max-width: 100% !important;
  }

  .content {
    padding-top: 14px !important;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .site-header {
    padding: 8px 0 !important;
  }

  .header-brand-row,
  .topbar,
  .brand-area,
  .cta-row,
  .card-actions,
  .shop-actions,
  .product-actions,
  .mypage-actions,
  .fm-profiles-actions,
  .an-actions,
  .wallet-actions,
  .wallet-charge-actions,
  .fitroom-hero-actions,
  .fitroom-head-actions,
  .fitroom-request-actions,
  .special-fitting-actions,
  .fit-result-actions {
    gap: 8px !important;
  }

  .brand-mark {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
    border-radius: 14px !important;
  }

  .brand-logo {
    width: 34px !important;
    height: 34px !important;
  }

  .brand-name {
    font-size: 16px !important;
  }

  .brand-sub {
    max-width: 190px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10.5px !important;
  }

  .mobile-menu-toggle {
    min-height: 36px !important;
    padding: 0 11px !important;
  }

  .btn,
  .wallet-btn,
  .fitroom-btn,
  .special-fitting-btn,
  .dress-mobile-step-button,
  .dress-affiliate-btn,
  .suit-render-btn,
  .fit-result-btn,
  .shop-view-btn,
  .product-similar-view-btn,
  .fm-login-social-btn,
  .fm-complete-submit-btn,
  .fm-complete-view-btn,
  .an-btn-start,
  .an-btn-manual {
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .btn-sm,
  .fitroom-small-btn,
  .special-fitting-small-link,
  .wallet-charge-btn {
    min-height: 36px !important;
    padding: 0 11px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  .badge-pill,
  .eyebrow,
  .meta-chip,
  .shop-chip,
  .product-chip,
  .res-chip,
  .fitroom-badge,
  .special-fitting-badge,
  .wallet-badge,
  .an-badge,
  .fit-result-badge,
  .dress-selected-chip {
    min-height: 28px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .hero-grid,
  .fm-home-hero-grid,
  .shop-hero-grid,
  .product-hero-grid,
  .mypage-top-grid,
  .fm-profiles-hero-grid,
  .fm-login-grid,
  .fm-complete-hero-grid,
  .fm-complete-layout,
  .an-hero-row,
  .res-result-hero,
  .fitroom-hero,
  .fitroom-grid,
  .special-fitting-hero,
  .special-fitting-grid,
  .suit-builder-grid,
  .dress-choice-layout,
  .wallet-grid,
  .wallet-charge-grid,
  .fit-result-main,
  .fit-result-hero,
  .product-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .fm-home-grid-2,
  .fm-home-grid-3,
  .fm-home-stat-grid,
  .fm-profiles-stat-grid,
  .fm-profiles-kpi-grid,
  .mypage-basic-grid,
  .mypage-profile-grid,
  .mypage-product-grid,
  .res-grid-2,
  .res-grid-3,
  .res-grid-4compact,
  .product-meta-grid,
  .product-profile-color-grid,
  .special-fitting-notice-grid,
  .wallet-stat-grid,
  .fit-result-purchase-grid,
  .fit-result-item-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .hero-shell,
  .surface-card,
  .mini-card,
  .empty-card,
  .fm-home-hero,
  .fm-home-section-card,
  .fm-home-cta-card,
  .fm-home-profile-card,
  .fm-home-feature-card,
  .fm-home-step-card,
  .fm-home-side-card,
  .fm-login-hero,
  .fm-login-card,
  .fm-login-help-card,
  .fm-complete-card,
  .fm-complete-side-card,
  .fm-profiles-hero,
  .fm-profiles-section-card,
  .fm-profiles-empty-card,
  .mypage-selected-card,
  .mypage-summary-box,
  .mypage-empty-card,
  .shop-hero,
  .shop-summary-card,
  .shop-new-section,
  .product-hero,
  .product-gallery-card,
  .product-info-card,
  .product-section-card,
  .product-profile-card,
  .an-hero-card,
  .an-card,
  .an-form-card,
  .an-upload-card,
  .res-result-hero,
  .res-card,
  .res-section,
  .fitroom-card,
  .fitroom-hero,
  .fitroom-hero-panel,
  .fitroom-usage-card,
  .fitroom-request-card,
  .fitroom-results-card,
  .special-fitting-card,
  .special-fitting-hero,
  .special-fitting-mini-card,
  .suit-control-card,
  .suit-viewer-card,
  .wallet-card,
  .wallet-hero,
  .wallet-charge-card,
  .fit-result-panel,
  .fit-result-loading-card,
  .fit-result-purchase-card {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .hero-title,
  .fm-home-title,
  .shop-hero-title,
  .product-title,
  .mypage-selected-title,
  .fm-profiles-title,
  .fm-login-title,
  .fm-complete-title,
  .an-title,
  .proc-title,
  .res-result-hero h1,
  .fitroom-hero h1,
  .special-fitting-hero h1,
  .wallet-balance-amount,
  .wallet-charge-hero h1,
  .fit-result-hero h1 {
    font-size: clamp(24px, 7vw, 31px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.04em !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }

  .hero-lead,
  .fm-home-lead,
  .shop-hero-lead,
  .fm-profiles-lead,
  .fm-login-lead,
  .fm-complete-lead,
  .an-sub,
  .an-hero-sub,
  .res-result-hero p,
  .fitroom-hero p,
  .special-fitting-hero p,
  .wallet-muted,
  .wallet-charge-list,
  .fit-result-hero p,
  .product-reason,
  .shop-reason,
  .fm-home-product-reason,
  .mypage-product-reason,
  .dress-item-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  .card-title,
  .section-head h2,
  .shop-section-head-inline h2,
  .product-section-head h2,
  .fitroom-card-head h2,
  .special-fitting-card-head h2,
  .res-section-title,
  .an-card-title-lg,
  .wallet-section h2,
  .fit-result-panel-head h2 {
    font-size: 18px !important;
    line-height: 1.28 !important;
  }

  .selected-profile-strip {
    margin: 10px 0 12px !important;
  }

  .selected-profile-shell {
    padding: 12px !important;
    border-radius: 18px !important;
    gap: 10px !important;
  }

  .selected-profile-title,
  .selected-profile-meta,
  .selected-profile-summary-chips,
  .profile-meta {
    gap: 6px !important;
  }

  .selected-profile-name {
    font-size: 18px !important;
    margin: 6px 0 !important;
  }

  .selected-profile-summary-chip,
  .header-profile-kpi-card {
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .selected-profile-kpi-grid {
    display: none !important;
  }

  .field,
  .an-field,
  .fitroom-field,
  .fm-complete-field {
    gap: 7px !important;
  }

  .input,
  .an-input,
  .an-textarea,
  .fm-complete-input,
  select,
  textarea,
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="password"] {
    min-height: 42px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }

  .an-form-grid,
  .fm-complete-grid,
  .checkbox-grid,
  .option-grid,
  .suit-option-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media (max-width: 768px) {
  .cta-row,
  .card-actions,
  .shop-actions,
  .product-actions,
  .mypage-actions,
  .fm-profiles-actions,
  .an-actions,
  .wallet-actions,
  .wallet-charge-actions,
  .fitroom-hero-actions,
  .fitroom-head-actions,
  .special-fitting-actions,
  .fit-result-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .cta-row > *,
  .card-actions > *,
  .shop-actions > *,
  .product-actions > *,
  .mypage-actions > *,
  .fm-profiles-actions > *,
  .an-actions > *,
  .wallet-actions > *,
  .wallet-charge-actions > *,
  .fitroom-hero-actions > *,
  .fitroom-head-actions > *,
  .special-fitting-actions > *,
  .fit-result-actions > *,
  .product-save-form,
  .shop-inline-form,
  .js-shop-save-form {
    width: 100% !important;
    max-width: none !important;
  }

  .shop-grid,
  .shop-grid-new,
  .fm-home-product-grid,
  .mypage-product-grid,
  .mypage-product-grid-compact,
  .product-similar-grid,
  .my-items-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .shop-card,
  .shop-card-new,
  .fm-home-product-card,
  .mypage-product-card,
  .product-similar-card,
  .my-items-product-card {
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .shop-body,
  .fm-home-product-head,
  .fm-home-product-footer,
  .mypage-product-body,
  .product-similar-body,
  .product-similar-bottom,
  .my-items-card-actions {
    padding: 10px !important;
  }

  .shop-thumb,
  .shop-thumb-empty,
  .fm-home-product-thumb,
  .fm-home-product-thumb-empty,
  .mypage-product-thumb,
  .mypage-product-thumb-empty,
  .product-similar-thumb,
  .product-similar-thumb-empty,
  .my-items-product-card img {
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 210px !important;
    object-fit: cover !important;
  }

  .shop-title,
  .fm-home-product-title,
  .mypage-product-title,
  .product-similar-title,
  .my-items-product-card h3 {
    font-size: 13px !important;
    line-height: 1.35 !important;
    min-height: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .shop-reason,
  .fm-home-product-reason,
  .mypage-product-reason,
  .product-similar-note,
  .my-items-summary-note {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .shop-badges,
  .product-similar-badges,
  .mypage-product-badges,
  .fm-home-product-badge {
    gap: 5px !important;
  }

  .shop-badges span,
  .product-similar-badges span,
  .mypage-product-badges span,
  .shop-option-pill,
  .product-option-pill,
  .product-similar-option-pill {
    font-size: 10px !important;
    min-height: 24px !important;
    padding: 0 7px !important;
  }

  .shop-price,
  .fm-home-product-price,
  .mypage-product-price,
  .product-similar-price,
  .product-price {
    font-size: 15px !important;
  }

  .shop-filter-bar,
  .my-items-filter-bar {
    display: flex !important;
    gap: 7px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .shop-filter-bar::-webkit-scrollbar,
  .my-items-filter-bar::-webkit-scrollbar {
    display: none;
  }

  .shop-filter-chip,
  .my-items-filter-chip {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    font-size: 12px !important;
    padding: 0 12px !important;
  }

  .product-main-image,
  .product-main-empty,
  .product-main-image-wrap {
    max-height: 430px !important;
    border-radius: 20px !important;
  }

  .product-gallery-strip,
  .product-variant-list,
  .product-color-list {
    max-height: none !important;
  }

  .product-gallery-thumb,
  .product-variant-row,
  .product-color-row {
    min-height: 48px !important;
    border-radius: 14px !important;
  }

  .product-profile-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .an-upload-top,
  .fitroom-card-head-row,
  .special-fitting-card-head-row,
  .shop-section-head-inline,
  .product-section-head,
  .section-head,
  .mypage-section-head,
  .my-items-section-head,
  .fit-result-panel-head {
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .an-preview-list,
  .fitroom-photo-rail,
  .dress-photo-rail {
    display: flex !important;
    overflow-x: auto !important;
    gap: 10px !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
  }

  .an-preview-list > *,
  .fitroom-photo-rail > *,
  .dress-photo-rail > * {
    flex: 0 0 132px !important;
    max-width: 132px !important;
  }

  .fitroom-photo-list,
  .fitroom-closet-list,
  .dress-dress-grid,
  .suit-photo-grid,
  .suit-fabric-scroll {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .fitroom-photo-card,
  .fitroom-closet-card,
  .dress-item-card,
  .dress-photo-card,
  .suit-photo-choice,
  .suit-fabric-btn,
  .fit-result-item-card {
    border-radius: 18px !important;
    padding: 9px !important;
  }

  .fitroom-photo-thumb,
  .fitroom-thumb-empty,
  .fitroom-closet-card img,
  .fitroom-closet-image-button img,
  .dress-item-thumb,
  .dress-photo-card img,
  .suit-photo-choice img,
  .suit-fabric-thumb,
  .fit-result-item-thumb {
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    max-height: 190px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
  }

  .fitroom-try-slots,
  .fitroom-floating-body,
  .dress-selected-accessory-list,
  .fit-result-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .fitroom-try-slot,
  .fitroom-try-slot-photo,
  .dress-selected-strip,
  .fit-result-current-tag {
    min-height: 0 !important;
    padding: 9px !important;
    border-radius: 16px !important;
  }

  .fitroom-try-slot img,
  .fitroom-try-slot-photo img,
  .fitroom-floating-body img,
  .dress-selected-strip img,
  .fit-result-current-tag img {
    width: 52px !important;
    height: 68px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }

  .fitroom-floating-try-panel,
  .dress-bottom-bar {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 20px !important;
    padding: 10px !important;
  }

  .fitroom-floating-try-panel.is-docked,
  .dress-bottom-bar.is-docked {
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    bottom: 10px !important;
    width: 100% !important;
    margin: 12px 0 !important;
  }

  .dress-bottom-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .dress-step-flow,
  .dress-step-nav {
    display: flex !important;
    overflow-x: auto !important;
    gap: 7px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none;
  }

  .dress-step-flow::-webkit-scrollbar,
  .dress-step-nav::-webkit-scrollbar {
    display: none;
  }

  .dress-step-pill,
  .dress-step-nav button {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }

  .special-fitting-photo-preview,
  .suit-viewer-canvas {
    height: 360px !important;
    min-height: 320px !important;
    max-height: 55vh !important;
    border-radius: 20px !important;
  }

  .suit-render-panel {
    grid-template-columns: 1fr !important;
    padding: 0 12px 12px !important;
  }

  .suit-render-actions {
    grid-template-columns: 1fr !important;
  }

  .suit-render-preview img {
    height: 180px !important;
  }

  .fit-result-image-box,
  .fit-result-placeholder {
    min-height: 0 !important;
    height: auto !important;
    border-radius: 20px !important;
  }

  .fit-result-image-box img,
  .fit-result-placeholder img {
    max-height: 62vh !important;
    width: 100% !important;
    object-fit: contain !important;
  }

  .fit-result-thumbs {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
  }

  .fit-result-thumb {
    flex: 0 0 104px !important;
    width: 104px !important;
    border-radius: 16px !important;
    padding: 7px !important;
  }

  .fit-result-thumb img,
  .fit-result-thumb-empty {
    height: 118px !important;
    border-radius: 13px !important;
  }

  .fit-result-purchase-thumb {
    width: 72px !important;
    height: 96px !important;
    border-radius: 14px !important;
  }

  .wallet-table-wrap,
  .wallet-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .wallet-price-row,
  .wallet-charge-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .mobile-side-menu {
    width: min(88vw, 360px) !important;
  }

  .mobile-side-nav-link,
  .mobile-side-action {
    min-height: 40px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 520px) {
  .wrap,
  .content > .wrap,
  .page-top-gap {
    width: calc(100% - 18px) !important;
  }

  .content {
    padding-top: 10px !important;
  }

  .brand-sub {
    display: none !important;
  }

  .hero-shell,
  .surface-card,
  .mini-card,
  .empty-card,
  .fm-home-hero,
  .fm-home-section-card,
  .fm-home-cta-card,
  .fm-home-profile-card,
  .fm-home-feature-card,
  .fm-home-step-card,
  .fm-home-side-card,
  .fm-login-hero,
  .fm-login-card,
  .fm-login-help-card,
  .fm-complete-card,
  .fm-complete-side-card,
  .fm-profiles-hero,
  .fm-profiles-section-card,
  .fm-profiles-empty-card,
  .mypage-selected-card,
  .mypage-summary-box,
  .mypage-empty-card,
  .shop-hero,
  .shop-summary-card,
  .shop-new-section,
  .product-hero,
  .product-gallery-card,
  .product-info-card,
  .product-section-card,
  .product-profile-card,
  .an-hero-card,
  .an-card,
  .an-form-card,
  .an-upload-card,
  .res-result-hero,
  .res-card,
  .res-section,
  .fitroom-card,
  .fitroom-hero,
  .fitroom-hero-panel,
  .fitroom-usage-card,
  .fitroom-request-card,
  .fitroom-results-card,
  .special-fitting-card,
  .special-fitting-hero,
  .special-fitting-mini-card,
  .suit-control-card,
  .suit-viewer-card,
  .wallet-card,
  .wallet-hero,
  .wallet-charge-card,
  .fit-result-panel,
  .fit-result-loading-card,
  .fit-result-purchase-card {
    padding: 13px !important;
    border-radius: 18px !important;
  }

  .shop-grid,
  .shop-grid-new,
  .fm-home-product-grid,
  .mypage-product-grid,
  .mypage-product-grid-compact,
  .product-similar-grid,
  .my-items-product-grid,
  .fitroom-photo-list,
  .fitroom-closet-list,
  .dress-dress-grid,
  .suit-photo-grid,
  .suit-fabric-scroll,
  .fitroom-try-slots,
  .fitroom-floating-body,
  .dress-selected-accessory-list,
  .fit-result-items {
    gap: 8px !important;
  }

  .shop-body,
  .fm-home-product-head,
  .fm-home-product-footer,
  .mypage-product-body,
  .product-similar-body,
  .product-similar-bottom,
  .my-items-card-actions {
    padding: 8px !important;
  }

  .shop-thumb,
  .shop-thumb-empty,
  .fm-home-product-thumb,
  .fm-home-product-thumb-empty,
  .mypage-product-thumb,
  .mypage-product-thumb-empty,
  .product-similar-thumb,
  .product-similar-thumb-empty {
    max-height: 180px !important;
  }

  .fitroom-photo-thumb,
  .fitroom-thumb-empty,
  .fitroom-closet-card img,
  .fitroom-closet-image-button img,
  .dress-item-thumb,
  .dress-photo-card img,
  .suit-photo-choice img,
  .suit-fabric-thumb,
  .fit-result-item-thumb {
    max-height: 160px !important;
  }

  .shop-title,
  .fm-home-product-title,
  .mypage-product-title,
  .product-similar-title {
    font-size: 12.5px !important;
  }

  .shop-reason,
  .fm-home-product-reason,
  .mypage-product-reason,
  .product-similar-note,
  .dress-item-desc,
  .product-reason {
    font-size: 12px !important;
  }

  .shop-price,
  .fm-home-product-price,
  .mypage-product-price,
  .product-similar-price,
  .product-price {
    font-size: 14px !important;
  }

  .product-main-image,
  .product-main-empty,
  .product-main-image-wrap {
    max-height: 380px !important;
  }

  .fitroom-floating-try-panel,
  .dress-bottom-bar {
    left: 9px !important;
    right: 9px !important;
    border-radius: 18px !important;
  }

  .special-fitting-photo-preview,
  .suit-viewer-canvas {
    height: 310px !important;
    min-height: 280px !important;
  }

  .fit-result-thumb {
    flex-basis: 92px !important;
    width: 92px !important;
  }

  .fit-result-thumb img,
  .fit-result-thumb-empty {
    height: 104px !important;
  }
}

@media (max-width: 380px) {
  .shop-grid,
  .shop-grid-new,
  .fm-home-product-grid,
  .mypage-product-grid,
  .mypage-product-grid-compact,
  .product-similar-grid,
  .my-items-product-grid,
  .fitroom-photo-list,
  .fitroom-closet-list,
  .dress-dress-grid,
  .suit-photo-grid,
  .suit-fabric-scroll {
    grid-template-columns: 1fr !important;
  }

  .shop-thumb,
  .shop-thumb-empty,
  .fm-home-product-thumb,
  .fm-home-product-thumb-empty,
  .mypage-product-thumb,
  .mypage-product-thumb-empty,
  .product-similar-thumb,
  .product-similar-thumb-empty,
  .fitroom-photo-thumb,
  .fitroom-thumb-empty,
  .fitroom-closet-card img,
  .fitroom-closet-image-button img,
  .dress-item-thumb,
  .dress-photo-card img,
  .suit-photo-choice img,
  .suit-fabric-thumb {
    max-height: 260px !important;
  }
}
