/* ============================================================
   반응형 — PC(1200+) / 태블릿(768~1199) / 모바일(~767)
   애매한 폭은 모바일 쪽으로 붙인다(1023px 이하 = 모바일 배치).
   ============================================================ */

/* ---- 공통 : 좌우 여백 ---- */
@media (max-width: 1199px) { :root { --wrap-pad: 32px; } }
@media (max-width: 767px)  { :root { --wrap-pad: 20px; } }

/* ---- 헤더 : 모바일에서는 한 줄 + 메뉴는 가로 스크롤 ---- */
@media (max-width: 1023px) {
  .st-rail {
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand cta" "menu menu";
    align-items: center;
    gap: 10px 12px !important;
    height: auto !important;
    padding: 10px var(--wrap-pad) !important;
  }
  .st-rail__brand { grid-area: brand; }
  .st-rail__cta   { grid-area: cta; justify-self: end; min-height: 48px; padding: 0 16px; }
  .st-rail__list {
    grid-area: menu;
    display: flex !important; flex-wrap: nowrap !important;
    gap: 18px !important;
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--wrap-pad) * -1) !important;
    padding: 0 var(--wrap-pad) 2px !important;
    scrollbar-width: none;
  }
  .st-rail__list::-webkit-scrollbar { display: none; }
  .st-rail__list a { min-height: 44px; }
  /* 그리드 항목의 자동 최소 크기를 끄지 않으면 UL 이 내용 폭까지 늘어나
     가로 스크롤 상자가 되지 못하고 화면을 밀어낸다 */
  .st-rail__list { min-width: 0; width: 100%; box-sizing: border-box; justify-self: stretch; }
  .st-rail__brand img { height: 38px; }
  .st-rail__place { font-size: 17px; }
}
@media (max-width: 767px) {
  /* 모바일: CTA 는 감추고 로고를 가운데로 */
  .st-rail { grid-template-columns: 1fr !important; grid-template-areas: "brand" "menu" !important; }
  .st-rail__cta { display: none !important; }
  .st-rail__brand { justify-self: center !important; }
  .st-rail__list { justify-content: flex-start !important; }
}

/* ---- 태블릿·모바일 메뉴 : 넘치지 않으면 가운데, 넘치면 왼쪽부터 스크롤 ---- */
@media (max-width: 1023px) {
  .st-rail__list { justify-content: center !important; justify-content: safe center !important; }
}

/* ---- 임시저장 복원 바 : 두 버튼은 좁은 화면에서도 한 줄로 ---- */
@media (max-width: 1023px) {
  .ik-restore { flex-direction: column; align-items: stretch; }
  .ik-restore .st-btns {
    flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; gap: 8px !important;
  }
  .ik-restore .st-btns .st-btn {
    flex: 1 1 0; width: auto !important; min-width: 0;
    padding: 0 12px !important; font-size: 16px !important; white-space: nowrap;
  }
}
/* ---- 로고 락업 정본 : 페이지마다 로드하는 CSS 세트가 달라 크기가 갈리던 문제를
       마지막에 로드되는 이 파일에서 한 값으로 고정한다 ---- */
.st-rail__brand img { height: 52px !important; }
.st-rail__brand { gap: 12px !important; align-items: center !important; }
.st-rail__brand .st-rail__place,
.st-rail__place { line-height: 1 !important; display: inline-flex !important; align-items: center !important; }
.st-rail__brand .st-rail__in,
.st-rail__in { height: 22px !important; font-size: 11px !important; padding: 0 7px !important; }
.st-rail__brand .st-rail__place,
.st-rail__place { font-size: 20px !important; }
@media (max-width: 1023px) {
  .st-rail__brand img { height: 40px !important; }
  .st-rail__brand .st-rail__in,
  .st-rail__in { height: 20px !important; font-size: 10px !important; padding: 0 6px !important; }
  .st-rail__brand .st-rail__place,
  .st-rail__place { font-size: 18px !important; }
}
@media (max-width: 767px) {
  .st-rail__brand img { height: 36px !important; }
  .st-rail__brand .st-rail__place,
  .st-rail__place { font-size: 17px !important; }
}
@media (max-width: 480px) {
  .st-rail { padding: 8px var(--wrap-pad) !important; gap: 8px 10px !important; }
  .st-rail__brand img { height: 32px !important; }
  .st-rail__brand .st-rail__place,
  .st-rail__place { font-size: 16px !important; }
  .st-rail__list { gap: 14px !important; }
  .st-rail__txt { font-size: 16px; }
}

/* ---- 안내 띠 ---- */
@media (max-width: 767px) {
  .st-notice__inner { flex-wrap: wrap; gap: 8px; }
}

/* ---- 페이지 머리 ---- */
@media (max-width: 1023px) {
  .a-head__inner, .pv-head__inner, .st-pagehead__inner { padding: 40px var(--wrap-pad) 32px; }
  .a-head__mark { display: none; }
}

/* ---- 입력 화면 ---- */
@media (max-width: 1199px) {
  .ik-body__inner { grid-template-columns: 1fr; }
  .ik-rail { position: static; }
}
@media (max-width: 1023px) {
  .st-fields { grid-template-columns: 1fr !important; }
  .st-progress--3 { grid-template-columns: 1fr; gap: 8px; }
  .st-progress__item { min-height: 52px; }
  /* 진행 막대는 모바일에서도 헤더 아래 전폭 고정 — 높이만 줄인다 */
  .ik-meter { gap: 10px !important; padding: 8px var(--wrap-pad) !important; }
  .ik-meter__t { font-size: 16px; white-space: nowrap; }
  .ik-meter__sub { display: none; }
  .ik-meter__bar { height: 8px; }
  .ik-step > .st-btns {
    position: sticky; bottom: 0;
    display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 8px;
    padding: 10px var(--wrap-pad) calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 calc(var(--wrap-pad) * -1) !important;
  }
  /* .st-btn 은 height 가 고정값이라 min-height 만 낮추면 그대로 남는다 — height 를 함께 지정한다 */
  .ik-step > .st-btns .st-btn {
    height: 54px !important; min-height: 54px !important;
    padding: 0 14px !important; font-size: 17px !important;
    flex: 1 1 0; min-width: 0;
  }
  .ik-left { display: none; }
  .ik-group__state { margin-left: 0; }
}
@media (max-width: 767px) {
  /* 진행 순서 : 번호 + 제목 + 라벨을 한 줄에 두고 본문은 카드 전체 폭을 쓴다.
     제목이 안쪽 div 에 있어 display:contents 로 격자에 직접 올린다. */
  .a-flow .st-step-row {
    display: grid !important; grid-template-columns: 38px minmax(0, 1fr) auto !important;
    align-items: center; column-gap: 12px; row-gap: 10px;
  }
  .a-flow .st-step-row > .st-num { grid-row: 1; grid-column: 1; align-self: center; }
  .a-flow .st-step-row > div { display: contents; }
  .a-flow .st-step-row > div > :first-child { grid-row: 1; grid-column: 2; margin: 0; }
  .a-flow .st-step-row > div > :first-child + * { grid-column: 1 / -1; }
  .a-flow .st-step-row > div > * { max-width: none; }
  .a-flow .a-state { grid-row: 1; grid-column: 3; margin: 0 !important; text-align: right; white-space: nowrap; }

  .ik-photos { grid-template-columns: repeat(2, 1fr); }
  .ik-howto li { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .ik-howto li::before { width: 32px; height: 32px; font-size: 16px; }
}

/* ---- 안내 화면(입점 신청 안내) ---- */
@media (max-width: 1023px) {
  .st-grid--4, .st-grid--3, .st-grid--2 { grid-template-columns: 1fr !important; }
  /* .a-flow 는 위 ≤767 바로 아래 3열 규칙이 주장하니 여기서 덮지 않는다 */
  .st-step-row:not(.a-flow .st-step-row) { grid-template-columns: 38px 1fr !important; }
  .a-state:not(.a-flow .a-state) { grid-column: 2; justify-self: start; }
}

/* ---- 시안 확인 ---- */
@media (max-width: 1199px) {
  .pv-side { position: static !important; max-height: none !important; overflow: visible !important; }
  /* 미리보기를 화면 높이 안의 스크롤 상자로 둔다 — 구역을 눌러도 페이지가 튀지 않는다 */
  .pv-stage { max-height: 68vh !important; overflow-y: auto !important; overscroll-behavior: contain; }
}
@media (max-width: 767px) {
  .pv-tools { flex-wrap: wrap; }
  .pv-tabs { gap: 6px; }
  .pv-2btn { grid-template-columns: 1fr; }
  .pv-look__form { grid-template-columns: 1fr; }
}

/* ---- 표는 가로 스크롤로 ---- */
@media (max-width: 767px) {
  .st-table { overflow-x: auto; }
}

/* ---- 푸터 ---- */
@media (max-width: 767px) {
  .st-footer__brand img { height: 42px; }
  .st-footer__place { font-size: 19px; }
}