@charset "utf-8";
/* ==========================================================================
   관리자 «서브상단관리 / 서브하단관리» 반응형 보정
   /common/inc/shop_legacy_responsive.css        2026-08-23 정희찬(PRO4)

   왜 필요한가 —
     관리자 디자인템플릿으로 만든 서브상단/서브하단은 PC 고정폭으로 짜여 있다.
     endedit 실측(390px) : viewport 메타 없음 · .wrap_body 가 width/min-width 1300px
     · 문서 가로폭 1360px(화면 밖으로 980px 넘침).
     그 상·하단을 그대로 쓰면서 화면 폭에 맞게 «접히기만» 하도록 덧씌우는 파일이다.
     ⚠ 관리자 HTML 은 한 글자도 안 고친다 — 폭 제약만 푼다. 그래서 관리자에서
       내용을 바꿔도 이 파일은 계속 유효하다.

   짝이 되는 것 : 이 CSS 를 링크하는 쪽이 viewport 메타도 같이 내보내야 한다
     (레거시 헤더 /_include/header.asp 에는 viewport 가 없다).
     · /shop-legacy-pc.asp            ← 셸을 쓰는 화면 전부
     · /member/login·join·find_*.asp  ← 회원화면
     · /product/order.asp · /my/order_detail.asp

   되돌리기 : 이 파일을 링크하는 줄만 지우면 예전(고정폭) 상태로 돌아간다.
   ========================================================================== */

@media (max-width: 768px) {

	/* ── 1. 문서 전체 고정폭 해제 ─────────────────────────────────────────
	   .wrap_body 하나가 1300px 을 잡고 있어서 그 아래가 전부 딸려 나간다. */
	html, body { min-width: 0 !important; }
	.wrap_body { width: 100% !important; min-width: 0 !important; }

	/* topmenu.asp 가 찍는 «빈 폭맞춤 표»(width=1300) — 내용이 없으므로 그냥 뺀다 */
	#basisBody { display: none !important; }

	/* ── 2. 레거시 본문 골격 ──────────────────────────────────────────── */
	.location, .locationBox,
	.sub_contents, .sbc_width, .left_none,
	.PageWrapSize, .right_section, .right_cont {
		width: 100% !important; min-width: 0 !important; max-width: 100% !important;
		box-sizing: border-box !important; float: none !important;
	}
	.location, .locationBox { padding-left: 14px !important; padding-right: 14px !important; }

	/* ── 3. 서브상단(관리자 디자인) ───────────────────────────────────── */
	.rr-header-wrap, .rr-header, .rr-header-top, .rr-header-bottom,
	.rr-header-inner, .rr-header-category,
	.rr-search-layer, .rr-search-inner, .rr-search-form, .rr-search-content,
	.rr-top-banner {
		width: 100% !important; min-width: 0 !important; max-width: 100% !important;
		box-sizing: border-box !important; float: none !important;
	}
	.rr-header-inner { padding-left: 14px !important; padding-right: 14px !important; }

	/* 카테고리 줄은 항목이 많다 — 줄바꿈 대신 «옆으로 밀어» 보게 한다(모바일 관례) */
	.rr-header-category-inner {
		width: 100% !important; max-width: 100% !important;
		overflow-x: auto !important; -webkit-overflow-scrolling: touch;
		white-space: nowrap !important;
	}
	.rr-header-category-inner::-webkit-scrollbar { height: 0; }
	.rr-search-input, #sword { width: 100% !important; }

	/* 상단 한 줄(왼쪽 메뉴 · 로고 · 오른쪽 아이콘)이 좌우 300px 씩 고정이라 합이 화면을
	   넘겼다(실측 : 오른쪽 아이콘 묶음이 화면 밖 614px 지점). 셋을 한 줄에 나눠 갖게 한다.
	   로고는 원래 «절대배치 + transform 으로 가운데» 라서, 흐름 안으로 돌려 놓는다. */
	.rr-header-inner { height: auto !important; padding: 10px 12px !important; }
	.rr-header-left, .rr-header-right { width: auto !important; min-width: 0 !important; flex: 1 1 0 !important; }
	.rr-header-right { justify-content: flex-end !important; }
	.rr-header-logo { position: static !important; transform: none !important; flex: 0 0 auto !important; margin: 0 8px !important; }
	.rr-header-logo img { max-height: 26px; width: auto; }
	/* 로그인·회원가입·커뮤니티 «글자» 메뉴는 접는다 — 오른쪽 아이콘(사람/장바구니/검색)이 같은 일을 한다 */
	.rr-header-menu { display: none !important; }

	/* ── 6. 가로 스크롤 차단 ──────────────────────────────────────────
	   카테고리 줄의 2depth 항목처럼 «절대배치로 스크롤 상자 밖으로» 나가는 조각이 남는다
	   (실측 : 헤더에 overflow-x:clip 을 줘도 문서 폭 580px). 마지막 안전망으로 문서 자체의
	   가로 스크롤을 막는다 — 본문(아일랜드)은 이미 반응형이라 잘려서 곤란한 것이 없다. */
	.rr-header-wrap, .rr-header, .rr-header-category { overflow-x: clip; }
	html, body { overflow-x: hidden !important; }

	/* ── 4. 서브하단(관리자 디자인) ───────────────────────────────────── */
	[class^="footer__"], [class*=" footer__"] {
		max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important;
	}
	.footer__top-inner, .footer__bottom-inner,
	.footer__company, .footer__logo, .footer__info-wrap, .footer__info,
	.footer__menu, .footer__menu-inner, .footer__sns, .footer__copyright {
		width: 100% !important; float: none !important;
	}

	/* ── 5. 넘칠 만한 것들 공통 ───────────────────────────────────────── */
	img { max-width: 100%; height: auto; }
	table { max-width: 100% !important; }

	/* 이용안내의 입금계좌 표 — 4열이라 좁은 화면에서 min-content 가 화면을 넘긴다 */
	.ig-bankwrap { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; }
	table.ig-bank { width: 100% !important; min-width: 0 !important; }
	table.ig-bank td.acc { white-space: normal !important; word-break: break-all; }
}

/* ==========================================================================
   PC 반응형 (769px ~ 1439px) — «rroys 서브상단 / 서브하단»
   2026-08-24 정희찬(PRO4)

   왜 —
     위 블록(≤768px)은 «모바일» 만 풀어준 것이라, PC 로 창을 줄이면 그대로였다.
     실측(2026-08-24, 라이브 rroys 서브페이지) : 창을 1100px 로 줄이면
     문서 가로폭이 1360px 로 굳어 «가로 스크롤바» 가 생기고, 서브상단은 1300px
     자리에 그대로 붙어 있어 오른쪽 아이콘이 화면 밖으로 나갔다. 원인 두 가지 —
       ① common.css 의  html body { min-width:1300px }
       ② 서브하단 .footer__top-inner / .footer__bottom-inner 의 width:1360px
          (본문 1300px 보다도 넓어서 이것 하나가 문서를 1360px 로 벌린다)
     그래서 이 구간에서만 폭 제약을 풀어 «창 크기를 따라 접히게» 한다.

   ⚠ «rroys 에만» 걸리게 범위를 좁혔다 — html:has(.rr-header-wrap)
     이 파일은 rroys·pro2·pro3 서브페이지가 «같이» 링크한다. pro2·pro3 는
     자기 관리자 서브상단/서브하단이 따로라 .rr-header-wrap 이 없다(실측 확인).
     그래서 :has() 로 rroys 의 서브상단이 실제로 있는 문서에만 적용된다.
     :has() 를 모르는 옛 브라우저에서는 규칙이 통째로 무시되어 «지금 그대로»
     (고정폭) 로 동작한다 — 깨지지 않는다.
     rroys «메인» 은 이 파일을 링크하지 않으므로 영향 없다(실측 확인).

   ⚠ 관리자 HTML 은 한 글자도 안 고친다 — 폭 제약만 푼다.
   되돌리기 : 이 블록만 지우면 예전(고정폭) 상태로 돌아간다.
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1439px) {

	/* ── 1. 문서 전체 고정폭 해제 ───────────────────────────────────── */
	html:has(.rr-header-wrap),
	html:has(.rr-header-wrap) body { min-width: 0 !important; }
	html:has(.rr-header-wrap) .wrap_body { width: 100% !important; min-width: 0 !important; }
	/* topmenu.asp 가 찍는 «빈 폭맞춤 표»(width=1300) — 내용이 없으므로 그냥 뺀다 */
	html:has(.rr-header-wrap) #basisBody { display: none !important; }

	/* ── 2. 본문 골격(서브상단·하단이 줄어드는 만큼 같이 줄어야 한다) ── */
	html:has(.rr-header-wrap) .location,
	html:has(.rr-header-wrap) .locationBox,
	html:has(.rr-header-wrap) .sub_contents,
	html:has(.rr-header-wrap) .sub_contents > .inner,
	html:has(.rr-header-wrap) .sbc_width,
	html:has(.rr-header-wrap) .left_none,
	html:has(.rr-header-wrap) .PageWrapSize,
	html:has(.rr-header-wrap) .right_section,
	html:has(.rr-header-wrap) .right_cont,
	html:has(.rr-header-wrap) .member_wrap.width,
	html:has(.rr-header-wrap) .content_category {
		width: 100% !important; min-width: 0 !important; max-width: 1300px !important;
		box-sizing: border-box !important;
	}
	html:has(.rr-header-wrap) .location .locationBox,
	html:has(.rr-header-wrap) .sub_contents {
		padding-left: clamp(20px, 3.2vw, 40px) !important;
		padding-right: clamp(20px, 3.2vw, 40px) !important;
	}

	/* ── 3. 서브상단 ──────────────────────────────────────────────────
	   가로폭만 창에 맞춘다. 좌우 여백은 40px → 20px 로 «완만하게» 줄어들어
	   1440px 경계에서 모양이 튀지 않는다(clamp 의 최대값이 원래 값과 같다). */
	html:has(.rr-header-wrap) .rr-top-banner,
	.rr-header-wrap, .rr-header,
	.rr-header-top, .rr-header-bottom, .rr-header-inner, .rr-header-category {
		width: 100% !important; min-width: 0 !important; box-sizing: border-box !important;
	}
	.rr-header-inner, .rr-header-category {
		max-width: 1440px !important;
		padding-left: clamp(20px, 3.2vw, 40px) !important;
		padding-right: clamp(20px, 3.2vw, 40px) !important;
	}
	/* 좌(로그인·회원가입·커뮤니티) / 우(장바구니·마이·검색) 가 각각 300px 로
	   «고정» 이라 합이 창을 넘겼다. 내용만큼만 차지하게 푼다 — 가운데 로고는
	   원래 절대배치라 그대로 가운데에 남는다. */
	.rr-header-left, .rr-header-right { min-width: 0 !important; }
	.rr-header-left { flex: 1 1 auto !important; }
	.rr-header-right { flex: 0 0 auto !important; }
	/* 카테고리 줄 : 원래 «카테고리 영역의 80%». 1440px 에서의 실폭(1088px)을
	   상한으로 두고 그 아래에서는 100% 로 — 경계에서 값이 이어진다. */
	#rr-header-category-menu .icon_tit_list { width: 100% !important; max-width: 1088px !important; }
	/* 상단 띠배너 안의 «로고 흐름» 이 1360px 고정이라 가운데가 밀려 보인다 */
	.rr-top-banner .rr-top-banner-logo-roll { width: 100% !important; max-width: 1360px !important; }
	.rr-top-banner .rr-top-banner-content {
		padding-left: clamp(20px, 5vw, 70px) !important;
		padding-right: clamp(20px, 5vw, 70px) !important;
	}

	/* ── 4. 서브하단 ──────────────────────────────────────────────────
	   1360px 고정 → 창폭. 상한을 1440px + 좌우여백 40px 으로 두면 1440px
	   경계에서 «안쪽 폭이 정확히 1360px» 이라 지금과 같은 자리에 선다. */
	.footer__top-inner, .footer__bottom-inner {
		width: 100% !important; min-width: 0 !important; max-width: 1440px !important;
		padding-left: clamp(20px, 3.2vw, 40px) !important;
		padding-right: clamp(20px, 3.2vw, 40px) !important;
		box-sizing: border-box !important;
	}
	/* 회사정보 / 고객센터 / 서비스정보 3단 사이 간격(90px)도 같이 줄인다 */
	.footer__top-inner { gap: clamp(28px, 6.2vw, 90px) !important; }
}

/* 태블릿 폭(769~1023px) — 서브하단 3단이 너무 눌린다. 2단으로 접는다.
   회사정보 한 줄 → 그 아래 고객센터 · 서비스 정보. */
@media (min-width: 769px) and (max-width: 1023px) {
	.footer__top-inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
		gap: 34px 40px !important;
		min-height: 0 !important;
		padding-top: 48px !important;
		padding-bottom: 40px !important;
	}
	.footer__company { grid-column: 1 / -1 !important; grid-row: 1 !important; }
	.footer__cs      { grid-column: 1 !important; grid-row: 2 !important; }
	.footer__legal   { grid-column: 2 !important; grid-row: 2 !important; }
}