/*
 * Sellerway mobile shell v2
 *
 * Older route-specific responsive rules remain in place for product cards and
 * detail panels.  This final, deliberately small layer owns the shared shell:
 * header, tabs, page gutters and the four high-traffic workspace surfaces.
 */

@media (max-width: 768px) {
  :root {
    --sw-mobile-gutter: 16px;
    --sw-mobile-header-height: 62px;
  }

  html, body { width: 100%; overflow-x: clip; }
  body {
    min-width: 0 !important;
    background: #fff !important;
    color: #1e2b24;
    font-size: 15px !important;
    line-height: 1.58 !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  /* Shared header: balanced 44px touch targets with the mark truly centered. */
  .hd {
    position: sticky !important;
    top: 0;
    z-index: 300 !important;
    min-height: var(--sw-mobile-header-height);
    border-bottom: 1px solid #edf0ee !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 1px 10px rgba(21, 55, 37, .035) !important;
  }
  .hd .hd-inner {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center !important;
    width: 100%;
    min-height: var(--sw-mobile-header-height) !important;
    height: var(--sw-mobile-header-height) !important;
    padding: 0 var(--sw-mobile-gutter) !important;
    gap: 0 !important;
  }
  .hd .hd-inner::after { content: none !important; }
  .hd .hf-burger {
    display: flex !important;
    grid-column: 1;
    grid-row: 1;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0 !important;
    padding: 10px !important;
    order: initial !important;
    border-radius: 12px;
  }
  .hd .hf-burger span {
    display: block;
    width: 23px !important;
    height: 2px !important;
    flex: 0 0 2px;
    border-radius: 999px;
    background: #344054 !important;
  }
  .hd .logo {
    position: static !important;
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    min-width: 0;
    margin: 0 !important;
    transform: none !important;
  }
  .hd .hf-logo-img {
    position: static !important;
    top: auto !important;
    width: auto !important;
    max-width: 150px !important;
    height: 27px !important;
  }
  .hd .nav,
  .hd .hd-right { display: none !important; }

  /* Horizontal route tabs retain a visible rhythm instead of cutting labels. */
  .subnav {
    position: relative;
    display: flex !important;
    min-height: 54px;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 6px var(--sw-mobile-gutter) !important;
    border-bottom: 1px solid #eef1ef !important;
    background: #fff;
    scroll-padding-inline: var(--sw-mobile-gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav .stab {
    min-height: 40px !important;
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #56615b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -.35px;
    line-height: 1;
    white-space: nowrap;
  }
  .subnav .stab.on {
    background: #1a7a4a !important;
    color: #fff !important;
    font-weight: 850 !important;
  }

  /* One predictable horizontal rhythm for pages that use the public wrapper. */
  .wrap {
    width: 100% !important;
    max-width: none !important;
    padding: 20px var(--sw-mobile-gutter) 44px !important;
    gap: 16px !important;
  }
  .wrap.col { gap: 0 !important; }
  .wrap > .ct,
  .wrap > main.ct { min-width: 0; }

  /* Membership: keep its editorial hero and controls readable on every phone. */
  .mp-page { padding: 0 var(--sw-mobile-gutter) 44px !important; }
  .mp-hero { margin: 30px 0 24px !important; padding: 0 !important; }
  .mp-kicker { margin-bottom: 12px !important; font-size: 10px !important; }
  .mp-hero h1 { font-size: 29px !important; line-height: 1.23 !important; letter-spacing: -.055em !important; }
  .mp-hero-copy > p:not(.mp-kicker) { margin-top: 16px !important; font-size: 15px !important; line-height: 1.65 !important; }
  .mp-trust { gap: 7px 11px !important; margin-top: 19px !important; font-size: 12px !important; }
  .mp-section-heading { margin: 28px 2px 14px !important; }
  .mp-section-heading h2 { font-size: 25px !important; line-height: 1.3 !important; }
  .mp-section-heading p { font-size: 13px !important; }
  .mp-billing-toolbar { margin: 0 0 18px !important; gap: 10px !important; }
  .mp-billing-toolbar-copy { align-items: flex-start !important; flex-direction: column; gap: 4px !important; }
  .mp-billing-toolbar-copy strong { overflow: visible !important; font-size: 12px !important; text-align: left !important; white-space: normal !important; }
  .mp-billing-toolbar .mp-billing { width: 100% !important; }
  .mp-page .plans, .mp-savings, .calc-grid { grid-template-columns: 1fr !important; }
  .mp-page .mp-plan { padding: 23px 20px !important; border-radius: 17px !important; }
  .mp-page .mb-point-grid { grid-template-columns: 1fr !important; }
  .calc { padding: 21px 18px !important; }
  .calc-grid { gap: 18px !important; }
  .calc-result { min-width: 0 !important; }
  .splans { grid-template-columns: 1fr !important; }

  /* Seller workspace: content never starts at the viewport edge. */
  .seller-workspace-shell {
    width: calc(100% - (var(--sw-mobile-gutter) * 2)) !important;
    min-height: auto !important;
    margin: 20px auto 48px !important;
  }
  .seller-workspace-head { min-height: 48px !important; padding: 0 1px 12px !important; }
  .seller-workspace-head h1 { font-size: 17px !important; line-height: 1.35 !important; }
  .seller-workspace-plan { padding: 7px 9px !important; font-size: 11px !important; }
  .seller-workspace-nav { margin-bottom: 18px !important; border-radius: 14px !important; }
  .seller-workspace-nav a { min-height: 54px !important; gap: 5px !important; font-size: 12px !important; }
  .seller-workspace-nav a svg { width: 16px !important; height: 16px !important; }
  .seller-application-summary { margin-bottom: 14px !important; border-radius: 14px !important; }
  .seller-application-head { min-height: 0 !important; padding: 17px 16px !important; }
  .seller-application-head h2 { font-size: 18px !important; }
  .seller-application-head p { font-size: 13px !important; line-height: 1.5 !important; }
  .seller-application-row, .seller-application-empty { padding: 14px 16px !important; }
  .seller-status-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }
  .seller-status-card { min-height: 132px !important; padding: 16px !important; }
  .seller-status-card > span { font-size: 13px !important; }
  .seller-status-card strong { margin: 6px 0 10px !important; font-size: 26px !important; }
  .seller-status-card em { font-size: 12px !important; }

  /* Quick-order listing: use the same gutters and preserve two useful cards. */
  .wrap:has(.qo-main-stack) { padding-top: 20px !important; }
  .qo-type-tabs { margin-bottom: 18px !important; }
  .qo-type-tabs a { min-height: 42px; padding: 0 14px !important; display: inline-flex; align-items: center; }
  .qo-section-head .hf-section-title { font-size: 23px !important; line-height: 1.32 !important; }
  .qo-section-head .hf-section-sub { margin-top: 6px !important; font-size: 13px !important; line-height: 1.55 !important; }
  .qo-main-stack .sortbar { min-height: 48px; margin-bottom: 14px; }
  .qo-main-stack .pgrid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }
  .qo-card .pbody { padding: 11px !important; }
  .qo-card .ptitle { font-size: 14px !important; line-height: 1.4 !important; }
  .qo-bulk-terms { grid-template-columns: 1fr !important; }

  /* My workspace / source quest gets the same page gutter and card scale. */
  .role-home { width: calc(100% - (var(--sw-mobile-gutter) * 2)) !important; margin: 24px auto 52px !important; }
  .seller-quest { padding: 24px 20px !important; border-radius: 20px !important; }
  .seller-quest h1 { font-size: 27px !important; }
  .seller-quest-description { font-size: 14px !important; }
  .seller-quest-step { min-height: 156px !important; padding: 20px 18px 40px !important; border-radius: 16px !important; }
  .seller-step-copy b { font-size: 18px !important; }
  .role-home-heading { margin-bottom: 22px !important; }
  .role-home-heading h1 { font-size: 29px !important; }
  .account-role-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .account-role-card { padding: 23px 20px !important; border-radius: 17px !important; }
  .account-role-card h2 { font-size: 22px !important; line-height: 1.35 !important; }

  /* Footer stays legible rather than inheriting page-specific narrow columns. */
  footer { padding-inline: var(--sw-mobile-gutter); }
}

@media (max-width: 390px) {
  .mp-hero h1 { font-size: 27px !important; }
  .subnav .stab { padding-inline: 13px !important; }
  .seller-workspace-nav a { font-size: 11.5px !important; }
  .qo-section-head .hf-section-title { font-size: 21px !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet keeps the full desktop navigation; showing it with a duplicate
     hamburger wastes the exact space the links need. */
  .hf-burger { display: none !important; }
  .hd .hd-inner { padding-inline: 20px !important; }
  .wrap { padding-inline: 20px !important; }
}

@media (min-width: 1025px) and (max-width: 1180px) {
  .hf-burger { display: none !important; }
}

/* 모바일 메인 상품 사진의 겹친 여백을 줄인다. */
@media (max-width: 768px) {
  .wrap.home-catalog { padding-inline: 12px !important; }
  .home-catalog .pgrid:not(.list-mode) { gap: 8px !important; }
  .home-catalog .pgrid:not(.list-mode) .pcard { padding: 0 !important; }
}