/* ============================================================================
 * [UI-06] 판매자 사이트 반응형 개선  ·  2026-07-28
 *
 * 근거: 디자이너 수치 명세 "RESPONSIVE UI SPEC · DEVELOPER HANDOFF"
 *       (개발자_수치가이드.pdf 6p + 반응형 프로토타입 2종)
 * 대상: /cms/seller/main (판매자 메인) · /cms/seller/sellerGuideline (입점 가이드라인)
 * 범위: 원본 카피·디자인 유지. 화면 폭에 따른 레이아웃만 개선.
 *
 * ★ 왜 별도 파일인가
 *   기존 dwd_front_seller.css 는 172KB·미디어쿼리 269개이고 브레이크포인트가
 *   420/600/630/800/940/1100/1400/1480 로 뒤섞여 있다(픽셀 절대배치 desktop-first 잔재).
 *   그 안을 고치면 어디가 무너지는지 예측할 수 없다.
 *   이 파일은 **뒤에 로드되는 덮어쓰기 층**이다. 문제가 생기면 레이아웃에서 link 한 줄만
 *   빼면 즉시 원상복구된다. 전면 재구축은 이번 계약 범위가 아니다(계획서 명시).
 *
 * 브레이크포인트(명세): 1024 / 768 / 640 / 480
 * ==========================================================================*/

:root {
	--dwd-s-gold: #E4A23B;
	--dwd-s-ink: #1A1A1A;
	--dwd-s-text: #222222;
	--dwd-s-muted: #8A8A8A;
	--dwd-s-line: #E3E3E3;
	--dwd-s-pad: 48px;          /* 좌우 여백 — 아래에서 폭에 따라 줄인다 */
	--dwd-s-max: 1400px;        /* 헤더/히어로/푸터 inner 최대폭 */
	/* 본문(입점 가이드라인) 최대폭.
	 * 2026-07-29 1200px → 1330px. 절차 칩(회원가입 → … → 판매) 한 줄에 1098px 이 필요한데
	 * 1200px 에서는 좌우 패딩 96 + 콘텐츠 패딩 60 을 빼면 1044px 만 남아 '판매' 가 다음 줄로 접혔다.
	 * 1330px 은 임의 값이 아니라 **운영서버가 원래 쓰던 .l-center 폭**이다(가용 1174px, 여유 76px).
	 * 이 변수는 이 화면에서만 쓴다(정의 1곳·사용 1곳) — 다른 판매자 화면에는 영향이 없다. */
	--dwd-s-max-body: 1330px;
}
@media (max-width: 1024px) { :root { --dwd-s-pad: 32px; } }
@media (max-width: 768px)  { :root { --dwd-s-pad: 24px; } }

/* ── 0. 공통 안전장치 ────────────────────────────────────────────────────────
 * 좁은 폭에서 단어 중간이 잘리는 것(개인정보처리/방침, admin@dont/worrydesign.com)을 막는다.
 * 한국어는 어절 단위로 끊어야 읽힌다. 이메일·URL 은 break-word 로 따로 처리. */
.dwd-footer, .terms-page { word-break: keep-all; overflow-wrap: break-word; }

/* ── 1. 헤더 ─────────────────────────────────────────────────────────────────
 * 현행: max-width 1480 이하에서 GNB 를 숨기고 햄버거를 띄운다.
 *       → 1440px 데스크톱에서도 햄버거가 뜬다(실측 확인).
 * 명세: PC(>1024) GNB 노출 · ≤768 햄버거.
 * 공간 실측: 로고가 20~220px(200px)를 쓰고, GNB 4개(로그인·회원가입·입점가이드·공지사항)에
 *            필요한 폭은 gap 26px 기준 약 358px. 769px 화면에서 가용 528px → 겹치지 않는다.
 *            (숫자를 확인하고 낮춘 것이지 명세를 그대로 옮긴 것이 아니다) */
@media (min-width: 769px) {
	.header-side-menu-wrap.type-hide { display: block; }   /* GNB 노출 */
	.header-side-menu-wrap.type-show { display: none; }    /* 햄버거 숨김 */
	.layout-side-nav.type-show { display: none; }
}
@media (max-width: 768px) {
	.header-side-menu-wrap.type-hide { display: none; }
	.header-side-menu-wrap.type-show { display: block; }
	.layout-side-nav.type-show { display: block; }
}
/* GNB 항목 간격 — 명세 38px, ≤1024 26px */
@media (min-width: 1025px) {
	.header-side-menu-wrap.type-hide .header-gnb-grp .header-gnb-list { padding: 0 19px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
	.header-side-menu-wrap.type-hide .header-gnb-grp .header-gnb-list { padding: 0 13px; }
}
.dwd-header .header-inner {
	max-width: var(--dwd-s-max);
	padding-left: var(--dwd-s-pad);
	padding-right: var(--dwd-s-pad);
	box-sizing: border-box;
}
@media (max-width: 768px) { .dwd-header .header-inner { height: 72px; } }

/* ── 2. 히어로(판매자 메인) ──────────────────────────────────────────────────
 * 고정 폰트 크기를 clamp 로 바꿔 좁은 폭에서 줄바꿈이 깨지거나 넘치지 않게 한다.
 * 카피·색·배치는 그대로 둔다(명세: 원본 유지). */
.slider_one_big_picture .slide-txt-wrap {
	max-width: var(--dwd-s-max);
	padding-left: var(--dwd-s-pad);
	padding-right: var(--dwd-s-pad);
	box-sizing: border-box;
}
.slider_one_big_picture .slide-title {
	font-size: clamp(30px, 4.4vw, 54px);
	line-height: 1.22;
	word-break: keep-all;
}
.slider_one_big_picture .slide-txt {
	font-size: clamp(17px, 2vw, 26px);
	line-height: 1.5;
	word-break: keep-all;
}
@media (max-width: 768px) {
	.slider_one_big_picture .slide,
	.slider_one_big_picture .slides { min-height: 520px; }
}
/* ≤480: CTA 두 개를 세로 스택 + 전체폭 (명세 height 54 / font 16) */
@media (max-width: 480px) {
	.slide-btn-wrap.slide-btn-y {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
	}
	.slide-btn-wrap.slide-btn-y .slide-btn {
		width: 100%;
		height: 54px;
		font-size: 16px;
		margin: 0;
	}
}

/* ── 3. 푸터 ────────────────────────────────────────────────────────────────
 * 기존: 좌(로고+정보) / 우(SNS+저작권) 2분할이라 넓은 폭에서 가운데가 크게 비고,
 *       좁은 폭에서는 정보 3열이 그대로 유지돼 이메일이 글자 단위로 잘렸다.
 * 개선: flex-wrap 그리드로 재구성해 빈 공백을 없애고, 폭에 따라 자연스럽게 접는다. */
.dwd-footer .footer-inner {
	max-width: var(--dwd-s-max);
	padding-left: var(--dwd-s-pad);
	padding-right: var(--dwd-s-pad);
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px 44px;              /* 명세: 컬럼 간격 44px */
}
.dwd-footer .ft-left-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px 44px;
	flex: 1 1 auto;
	min-width: 0;                /* flex 자식이 줄바꿈 없이 삐져나가는 것 방지 */
}
.dwd-footer .ft-nav-info-wrap { min-width: 0; }
.dwd-footer .ft-info-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 44px;
}
.dwd-footer .ft-right-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	flex: 0 0 auto;
}
/* 상단 링크 줄이 '개인정보처리 / 방침' 처럼 갈라지지 않게 항목 단위 줄바꿈만 막는다.
 * ⚠️ .ft-nav-grp(ul) 자체는 건드리지 않는다 —
 *    원본에 이미 `display:flex; gap:29px` + `≤600 flex-wrap; gap:10px 17px` 가 있고,
 *    구분선이 `li::after { right:-14.5px }` 로 **바깥 여백에 걸쳐 그려진다.**
 *    여기서 gap 을 덮어쓰면 구분선이 사라지고 글자가 붙는다(1차 시도에서 실제로 발생:
 *    '개인정보처리방침이용약관공지사항자주묻는질문'). 원본 간격이 구분선의 전제다. */
.dwd-footer .ft-nav-list { white-space: nowrap; }
/* 이메일·주소는 어절이 없어 keep-all 로는 못 접는다 → 이 항목만 글자 단위 허용 */
.dwd-footer .ft-info-wrap a,
.dwd-footer .ft-info-wrap [class*="mail"] { overflow-wrap: anywhere; }

@media (max-width: 768px) {
	.dwd-footer .footer-inner { flex-direction: column; align-items: flex-start; }
	.dwd-footer .ft-right-wrap { align-items: flex-start; width: 100%; }
	.dwd-footer .ft-copyright { text-align: left; }
}
@media (max-width: 480px) {
	.dwd-footer .ft-info-wrap { flex-direction: column; gap: 14px; }
	.dwd-footer .ft-left-wrap { gap: 16px; }
}

/* ── 4. 입점 가이드라인 ──────────────────────────────────────────────────────
 * 본문 최대폭 1200px (명세) */
.terms-page .l-center {
	max-width: var(--dwd-s-max-body);
	padding-left: var(--dwd-s-pad);
	padding-right: var(--dwd-s-pad);
	box-sizing: border-box;
}
.terms-page .ttl-grp .ttl {
	font-size: clamp(26px, 3.4vw, 34px);
	line-height: 1.3;
}

/* 4-1. 플로우(단계 흐름) — 칩 + 자동 줄바꿈
 * 기존 마크업은 '회원가입 → 입점신청 및 자료제출 → …' 평문 한 줄이라
 * CSS 만으로는 칩을 만들 수 없어 템플릿에서 단계마다 span 으로 감쌌다.
 * 카피는 한 글자도 바꾸지 않았고(공백 제외 1761자 동일), 원문 전체는 aria-label 로 남겨
 * 스크린리더가 흐름을 한 문장으로 읽는다. 화살표는 시각 장식이라 aria-hidden 이다. */
.terms-article-title.dwd-flow {
	display: flex;
	flex-wrap: wrap;          /* 한 줄 고정 → 폭에 맞춰 접힘(가로 스크롤 제거) */
	align-items: center;
	gap: 9px 7px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
}
.dwd-flow .dwd-flow-step {
	display: inline-block;
	background: #F4F0E9;
	border-radius: 20px;
	padding: 7px 14px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--dwd-s-text);
	word-break: keep-all;
}
.dwd-flow .dwd-flow-arrow {
	color: var(--dwd-s-gold);
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1;
}
/* 아주 좁은 폭에서는 칩을 조금 줄여 한 줄에 두 개는 들어가게 */
@media (max-width: 480px) {
	.dwd-flow .dwd-flow-step { padding: 6px 11px; font-size: 13px; }
	.terms-article-title.dwd-flow { gap: 8px 6px; }
}

.terms-page .terms-contents-wrapper > p,
.terms-page .terms-contents-wrapper > div > p {
	word-break: keep-all;
	line-height: 1.9;
}

/* 4-2. 표 ─────────────────────────────────────────────────────────────────
 * 기존: width:950px 인라인 + table-layout:fixed + col 160px.
 *       좁은 폭에서 상세설명이 과도하게 압축돼 읽기 어렵다(640px 실측 확인).
 * 개선: ≤640px 에서 스택 카드로 전환. thead 숨김, 각 tr = 카드,
 *       단계 셀 = 카드 상단 다크 바, 상세 셀 = 하단 본문.
 * ※ width 에 !important 를 쓰는 이유: 템플릿에 width:950px 이 **인라인**으로 박혀 있어
 *    일반 규칙으로는 이길 수 없다. 인라인을 지우려면 템플릿 수정이 필요한데,
 *    이번 변경을 CSS 한 층으로 묶어 롤백을 단순하게 유지하려고 이 방법을 택했다. */
.terms-pers-table { border-collapse: collapse; }

@media (max-width: 640px) {
	.terms-pers-table {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		table-layout: auto !important;
	}
	.terms-pers-table colgroup,
	.terms-pers-table thead { display: none; }
	.terms-pers-table tbody { display: block; width: 100%; }

	.terms-pers-table tr {
		display: block;
		width: 100%;
		border: 1px solid #DEDEDE;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 12px;
		box-sizing: border-box;
	}
	.terms-pers-table td {
		display: block;
		width: auto !important;
		border: 0;
	}
	/* 단계 = 카드 상단 다크 바 */
	.terms-pers-table td:first-child {
		background: var(--dwd-s-ink);
		color: #fff;
		font-weight: 600;
		padding: 11px 14px;
		font-size: 14.5px;
	}
	/* 상세 설명 = 카드 본문 */
	.terms-pers-table td:last-child {
		padding: 14px 16px;
		line-height: 1.72;
		color: #454545;
		font-size: 14.5px;
	}
}

/* 641px 이상에서는 표를 그대로 두되, 컨테이너를 넘지 않게만 보장 */
@media (min-width: 641px) {
	.terms-pers-table { width: 100% !important; max-width: 100% !important; }
	.terms-pers-table th { background: var(--dwd-s-ink); color: #fff; padding: 13px 16px; text-align: center; }
	.terms-pers-table td { padding: 16px 18px; line-height: 1.72; color: #454545; border: 1px solid #E1E1E1; }
	.terms-pers-table td:first-child { background: #FBFBFB; font-weight: 600; color: var(--dwd-s-text); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * [UI-09] 판매자 메인 히어로 — 푸터가 CTA 를 가리던 것
 *
 *   발주처 지적(2026-08-07): "판매자 화면 푸터가 너무 뚱뚱해서 버튼을 가린다"
 *
 *   ★ 원인은 푸터가 아니라 **히어로 높이에 박아 둔 추정치**다.
 *     dwd_front_seller.css 의 SELLER-MAIN-HERO-FILL-20260722 블록:
 *         min-height: max(340px, calc(100svh - 340px));
 *     이 340px 는 "푸터가 이만큼일 것"이라고 손으로 적은 값이다.
 *     그런데 ≤480px 에서 푸터는 세로로 쌓여(로고/링크2줄/정보3항목/SNS/저작권)
 *     340px 를 훨씬 넘는다. 화면이 짧을수록 히어로는 하한 340px 에 붙고,
 *     그 안에 들어갈 내용(제목 2~3줄 + 설명 + 세로로 쌓인 CTA 2개)은 340px 를 넘는다.
 *
 *   ★ 더 근본은 **텍스트가 position:absolute 라 박스가 내용을 따라 못 큰다**는 것이다.
 *     .slide-txt-wrap{position:absolute; top:45%; transform:translate(-50%,-50%)}
 *     → 내용이 넘치면 그냥 박스 밖으로 나가고, 바로 아래 푸터가 그 자리를 차지한다.
 *
 *   실측(운영 사이트, 헤드리스 크롬)
 *     390×844  CTA 아래 여유 있음 (정상)
 *     360×640  CTA 두 개가 푸터에 딱 붙음 + 제목 오른쪽 잘림  ← 발주처가 본 화면
 *
 *   ★ 그래서 숫자를 하나 더 추가하지 않는다. 좁은 폭에서는 **흐름 배치로 바꿔
 *     박스가 내용을 따라 크게** 한다. 매직넘버가 사라지므로 카피가 길어져도 안 깨진다.
 *     · .slides 를 static 으로 (원래 absolute+height:100% 라 .slide 가 커져도 소용없다)
 *     · 이미지를 absolute 로 내려 배경 역할만 시킨다 (object-fit:cover 유지 → 왜곡 없음)
 *     · 텍스트를 흐름에 올리고 상하 여백을 준다
 *     · min-height 380px 은 "글이 짧을 때 사진이 너무 얇아지지 않게" 하는 하한일 뿐,
 *       내용이 길면 그 위로 자연히 늘어난다.
 *
 *   🚩 가로모드(max-height:520px) 축소 규칙은 건드리지 않는다 — IMG3977/3978 대응분이다.
 *      이 블록은 (max-width:600px) 에서만 걸리므로 가로모드(폭 넓음)와 겹치지 않는다.
 * ═══════════════════════════════════════════════════════════════════════════ */
/* ★ 폭이 좁을 때(세로 모드)와 **높이가 낮을 때(가로 모드)** 둘 다 같은 병이다 —
 *   절대배치 텍스트가 고정 높이 박스를 넘친다. 처방도 같으므로 한 블록으로 묶는다.
 *   실측(740x360): CTA 바닥 410 / 푸터 머리 391 → **-20px, 버튼이 푸터에 먹힌다.**
 *   ⚠️ 높이 조건에 (max-width:1024px) 를 함께 건다 — 이걸 빼면 **창을 낮게 줄인 데스크톱**도
 *      모바일 흐름 배치로 바뀌어 좌측 정렬이 된다. 가로모드 폰·태블릿만 잡는다. */
@media (max-width: 600px), (max-height: 560px) and (max-width: 1024px) {
	.main-page .slider_one_big_picture {
		height: auto;
		min-height: 0;          /* 340px 추정치 해제 */
		/* 🚩 min-height 만 풀면 히어로가 380px 로 쪼그라들고 푸터 위에 **흰 띠**가 생긴다
		     (page wrapper 가 min-height:100vh · flex column 이라 남는 공간이 빈다).
		     흰 띠 제거가 2026-07 SELLER-MAIN-HERO-FILL 의 목적이었다 — 되돌리면 안 된다.
		     flex-grow 로 남는 공간을 채우되 flex-basis 는 auto 로 둬서
		     **내용이 길면 그만큼 커진다**. 채우기와 자라기를 둘 다 얻는다. */
		flex: 1 0 auto;
	}
	.main-page .slider_one_big_picture .slides {
		position: static;       /* absolute + height:100% 였다 → 자식이 커도 안 늘어났다 */
		height: auto;
		/* 🚩 2026-08-08 — 어제 이 자리에서 **흰 띠**를 만들었다(발주처 재보고).
		     원본은 (max-width:768px) 에서
		         .slider_one_big_picture .slide,
		         .slider_one_big_picture .slides { min-height: 520px; }
		     처럼 **한 선언에 묶인 한 쌍**이었다. 어제 `.slide` 만 380 으로 낮추면서
		     `.slides` 는 520 그대로 뒀다 → 차이 **140px** 이 그대로 빈 띠가 됐다.
		     (390x844 · 360x640 · 430x932 · 740x360 **네 뷰포트 전부 정확히 140px** 실측)
		   ★ 숫자를 다시 맞추는 방식으로 고치지 않는다. 맞춰 놔도 다음에 한쪽만
		     바뀌면 또 어긋난다 — 어제가 바로 그 사고다.
		     자식이 부모를 **따라 크도록** 묶는다. 두 값이 무엇이든 틈이 안 생긴다. */
		display: flex;
		flex-direction: column;
	}
	.main-page .slider_one_big_picture .slide {
		display: flex;
		align-items: center;
		min-height: 380px;      /* 사진이 보일 최소 높이. 글이 길면 이 위로 늘어난다 */
		flex: 1 0 auto;         /* ★ .slides 가 커진 만큼 따라 큰다 — 위 주석의 140px 처방 */
	}
	.main-page .slider_one_big_picture .slide > img {
		position: absolute;
		top: 0; left: 0;
		width: 100%; height: 100%;
		object-fit: cover;      /* 배경 역할 — 비율 유지 */
		z-index: 0;
	}
	/* 🚩 이미지는 마크업에서 **텍스트보다 뒤**에 있다.
	     그냥 absolute 로 내리면 같은 쌓임 맥락에서 뒤 요소가 위에 그려져
	     **사진이 문구와 버튼을 통째로 덮는다**(2026-08-07 실제로 그렇게 만들었다가 잡음).
	     그래서 텍스트를 static 이 아니라 relative + z-index 로 올린다. */
	.main-page .slide-txt-wrap {
		position: relative;
		z-index: 1;
		transform: none;
		top: auto; left: auto;
		width: 100%;
		padding: 44px 24px;     /* 위아래 여백 = 푸터와 붙지 않게 */
	}
	/* 제목이 오른쪽으로 잘리던 것 — 절대배치를 풀면 폭이 정상이 되지만 확실히 못 박는다 */
	.main-page .slide-title,
	.main-page .slide-txt { max-width: 100%; }
}