@charset "utf-8";
/* ==========================================================================
   파나메딕(panamedic) PC 메인 반응형 CSS   2026-09-02 [PD2609020330]
   ---------------------------------------------------------------------------
   무엇 : PC 메인(main_template)을 폰(≤767px)에서 세로 1열 흐름으로 리플로우한다.
   방식 : endedit(rroys) 반응형을 «참고만» 했다 — endedit 파일은 .rr-header 전용
          마크업이라 그대로 못 쓰고, 파나메딕 자기 마크업(.utilWrap/.logoSearchWrap/
          .gnbWrap/.visualWrap/.PanaBest/.PanaRecom/.Temacon/.footer)에 맞춰 새로 썼다.
   로드 : /main/main_responsive_inc.asp 가 본문 «끝»에서 부른다(파일이 있으면 자동).
          그래서 디자인템플릿이 body 에 쏟아낸 인라인 <style>(min-width:1200 등)보다
          뒤에 와서 이긴다. 안전하게 html body 접두 + !important 로 못을 박는다.
   ★범위 : ≥768px(데스크톱·태블릿)은 «한 줄도 건드리지 않는다» — 회귀 위험 0.
           폰(≤767)에서만 반응형. 색은 파나메딕 테마(퍼플 #523787)를 그대로 승계.
   되돌리기 : 이 파일을 지우면 즉시 예전(폰에서도 1200px 고정) 메인으로 복귀.
   ========================================================================== */

/* 하단 탭바는 JS 가 body 에 항상 만들지만 데스크톱에선 숨긴다(폰에서만 노출) */
.pm-mo-gnb { display: none; }

@media all and (max-width:1199px) {

	/* ===== 0. 고정 1200 폭 해제 (템플릿 인라인 style 을 이긴다) ===== */
	html body { min-width: 0 !important; width: auto !important; }
	html body .wrap_body { min-width: 0 !important; width: 100% !important; overflow-x: hidden; }

	/* 안쪽 인라인 고정폭(width:1200/1000px) 컨테이너를 유동으로 */
	.wrap_body [style*="width:1200"], .wrap_body [style*="width: 1200"],
	.wrap_body [style*="width:1000"], .wrap_body [style*="width: 1000"],
	.wrap_body [style*="width:1220"], .wrap_body [style*="width: 1220"] {
		width: 100% !important; max-width: 100% !important;
	}
	.wrap_body img { max-width: 100%; height: auto; }
	/* 섹션 제목(h1 «인기상품 BEST» 등)이 width:1200 라 오른쪽으로 넘쳤다 → 유동화 */
	.wrap_body h1, .wrap_body h2, .wrap_body h3 { max-width: 100% !important; box-sizing: border-box; }

	/* ===== 1. 상단 유틸바 (로그인/회원가입/마이페이지/장바구니) ===== */
	.utilWrap { min-width: 0 !important; width: 100% !important; height: auto !important; box-sizing: border-box; }
	.utilBox {
		width: 100% !important; box-sizing: border-box; padding: 4px 12px;
		display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
		gap: 4px 14px; font-size: 12px; line-height: 1.4;
	}

	/* ===== 2. 로고 + 검색 (세로로 쌓기) ===== */
	/* ★2026-09-04 [PD2609040090] 예전 판은 이 줄을 «세로 스택» 으로 만들어 검색창이 로고 아래에
	   화면 폭 전체로 깔렸고, 그 안에서 input 에 width:100% 를 줘서 돋보기 버튼(.btn_search)이
	   «아랫줄로 밀려» 입력칸 왼쪽 아래에 따로 떨어져 보였다(사용자 캡처).
	   → 로고와 검색을 «한 줄»(로고 왼쪽 · 검색 오른쪽)로 되돌리고, 검색 폭을 줄인다.
	     input 과 돋보기 버튼은 form 을 flex 로 만들어 «붙은 한 덩어리»(왼쪽 둥근 입력 + 오른쪽
	     보라 버튼)로 유지한다. 자리가 모자라면 flex-wrap 이 검색만 아랫줄로 내린다. */
	.logoSearchWrap { min-width: 0 !important; width: 100% !important; height: auto !important; box-sizing: border-box; padding: 10px 12px; }
	.logoSearch {
		display: flex !important; flex-flow: row wrap; align-items: center; justify-content: space-between;
		gap: 8px 12px; width: 100% !important; height: auto !important; margin: 0 !important;
		overflow: visible !important; text-align: left;
	}
	.logoSearch .logo { float: none !important; flex: 0 0 auto; width: auto !important; margin: 0 !important; }
	.logoSearch .logo img { max-width: 170px; height: auto; display: block; }

	.logoSearch .search {
		position: static !important; float: none !important;
		flex: 1 1 150px; min-width: 0; width: auto !important; max-width: 340px;
		margin: 0 0 0 auto !important; overflow: visible !important; box-sizing: border-box;
	}
	.logoSearch .search form { display: flex !important; align-items: stretch; width: 100%; }
	.logoSearch .search input[type="text"], .logoSearch .search .inputTxt {
		float: none !important; flex: 1 1 auto; min-width: 0; width: auto !important;
		height: 40px; padding: 0 12px !important; font-size: 13px; box-sizing: border-box;
	}
	.logoSearch .search .btn_search {
		float: none !important; flex: 0 0 44px; width: 44px !important; height: 40px;
		padding: 0 !important; margin: 0 !important;
		display: flex !important; align-items: center; justify-content: center; box-sizing: border-box;
	}
	.logoSearch .search .btn_search .ftic-search { margin: 0 !important; }
	/* 삼성 인증 등 부수 배너는 폰에서 감춘다 */
	.logoSearchWrap .bannerBX { display: none !important; }

	/* ===== 3. GNB — 가로 스크롤 한 줄 ===== */
	/* ★2026-09-04 [PD2609040020] : 예전에는 이 줄을 «가로 스크롤 한 줄» 로 만들었는데,
	   「전체보기·회사소개·베스트…」 7칸이 390px 폰 폭을 넘겨 오른쪽이 잘린 채 나오고
	   옆으로 밀어야만 나머지가 보였다(스크롤 힌트도 없어 있는 줄도 모른다).
	   → 좌우 스크롤을 없애고 «줄바꿈 격자» 로 바꾼다. 「전체보기」는 한 줄을 다 쓰는
	     대표 버튼, 나머지는 3칸씩 접혀 «전부 한눈에» 보인다(잘림 0 · 가로 스크롤 0).
	   칸 수가 3의 배수가 아니어도 grid 가 알아서 채운다. */
	.gnbWrap { min-width: 0 !important; width: 100% !important; box-sizing: border-box; }
	.gnbBox {
		width: 100% !important; box-sizing: border-box;
		overflow: visible !important; white-space: normal !important;
		height: auto !important; line-height: normal !important;
	}
	.gnbBox > ul {
		display: grid !important; grid-template-columns: repeat(3, 1fr);
		gap: 1px; float: none !important; width: 100% !important; margin: 0 !important;
		white-space: normal !important; line-height: normal !important;
		background: #e6e6ee;                      /* 칸 사이 1px 실선을 대신한다 */
		border-top: 1px solid #e6e6ee; border-bottom: 1px solid #e6e6ee;
		box-sizing: border-box; overflow: hidden;
	}
	.gnbBox > ul:first-child { float: none !important; }
	.gnbBox > ul > li {
		float: none !important; display: block !important;
		width: auto !important; min-width: 0; padding: 0 !important; margin: 0 !important;
		background: #fff; text-align: center; box-sizing: border-box;
	}
	.gnbBox > ul > li > a {
		display: flex !important; align-items: center; justify-content: center;
		min-height: 44px; padding: 6px 4px; box-sizing: border-box;
		font-size: 13px !important; line-height: 1.25 !important; color: #33333b !important;
		word-break: keep-all; -webkit-tap-highlight-color: transparent;
	}
	/* 「전체보기」 = 한 줄을 다 쓰는 대표 버튼 */
	.gnbBox > ul > li.allMenu {
		grid-column: 1 / -1; width: auto !important; height: auto !important;
		background: #523787 !important; color: #fff !important;
	}
	.gnbBox > ul > li.allMenu > span {
		display: flex !important; align-items: center; justify-content: center;
		min-height: 46px; padding: 6px 4px; box-sizing: border-box;
		font-size: 15px !important; line-height: 1.25 !important; color: #fff !important;
	}
	.gnbBox > ul > li.allMenu > span .iconfont { margin-right: 8px; }
	/* 상품 카테고리가 여기 있다는 걸 알려주는 짧은 안내 */
	.gnbBox > ul > li.allMenu > span::after {
		content: "상품 카테고리 전체";
		margin-left: 8px; font-size: 12px; font-weight: normal; opacity: .78;
	}
	/* 폰에서 이미지 배너형 항목(li.img)은 격자에서 어색하므로 감춘다 */
	.gnbBox > ul > li.img { display: none !important; }

	/* ===== 4. 히어로 비주얼 =====
	   데스크톱 히어로는 고정 높이(예 390px)라, 폰 폭에서 와이드 배너가 얇은 띠(≈79px)로
	   줄면 아래에 큰 빈 흰 공간이 남는다. 높이를 이미지에 맞게 auto 로 접는다.
	   bxSlider 가 슬라이드를 absolute 로 겹쳐 쌓으므로, 현재 보이는 슬라이드(.on)만
	   relative 로 흐르게 해 컨테이너가 그 이미지 높이에 맞춰지게 한다. */
	.visualWrap, .visualWrap .bx-wrapper, .visualWrap .bx-viewport, .visual_img, .visual_img > li {
		min-width: 0 !important; width: 100% !important;
	}
	.visualWrap, .visualWrap .bx-wrapper, .visualWrap .bx-viewport, .visual_img { min-height: 0 !important; }
	/* ★bxSlider 가 슬라이드(ul/li)를 «로드 시점 폭» 기준으로 translate/left 이동시켜 놓아,
	   폭이 바뀌면 배너가 왼쪽으로 밀려 오른쪽이 흰색으로 남는다(582px 등에서 재현).
	   폰에서는 이동을 전부 0 으로 되돌려 현재 슬라이드를 왼쪽 끝에 맞춘다. */
	.visualWrap .visual_img { transform: none !important; left: 0 !important; margin-left: 0 !important; }
	.visual_img > li { position: relative !important; left: 0 !important; top: 0 !important; margin: 0 !important; }
	.visual_img > li:not(.on) { display: none !important; }
	/* 배너는 «비율 그대로» 폭에 맞춰 축소한다 — 크롭(object-fit)하지 않아 찌그러지거나
	   잘리지 않는다. 컨테이너 높이는 JS 가 이미지의 실제 높이에 맞춰 넣어준다
	   (bxSlider 가 .bx-viewport 에 인라인 height 를 박아 CSS 로 못 이기기 때문). */
	.visual_img > li img { width: 100% !important; height: auto !important; object-fit: fill !important; display: block; }
	/* 좌우 이동 화살표(span.prev/next)와 데스크톱용 텍스트 오버레이는 폰에서 감춘다
	   — 배너가 얇은 띠로 줄면 이 절대배치 요소들만 남아 빈 퍼플 공간처럼 보인다 */
	.visualWrap span.prev, .visualWrap span.next,
	.visualWrap .swiper_btn, .visualWrap .bx-controls,
	.visualWrap .TextCte, .visualWrap .visualPaging { display: none !important; }

	/* ===== 5. 인기상품 BEST : 4열 → 2열 ===== */
	.PanaBest { min-width: 0 !important; width: 100% !important; box-sizing: border-box; }
	.PanaBest ul { width: 100% !important; box-sizing: border-box; padding: 0 6px; }
	.PanaBest ul > li { float: left !important; width: 50% !important; box-sizing: border-box; padding: 6px !important; margin: 0 !important; }
	/* 카드 높이가 제각각이면 float 이 엇갈려 걸린다 → 홀수째마다 줄을 새로 시작해 2열을 반듯하게 */
	.PanaBest ul > li:nth-child(2n+1) { clear: left !important; }
	.PanaBest ul > li img { width: 100% !important; height: auto !important; }

	/* ===== 6. 추천상품 RECOMMENDED : 2열 → 1열 ===== */
	.PanaRecom { min-width: 0 !important; width: 100% !important; box-sizing: border-box; }
	.PanaRecom ul { width: 100% !important; box-sizing: border-box; padding: 0 8px; }
	.PanaRecom ul > li { float: none !important; width: 100% !important; box-sizing: border-box; padding: 6px !important; margin: 0 0 6px !important; }
	.PanaRecom ul, .PanaRecom ul > li { width: 100% !important; box-sizing: border-box; }
	.PanaRecom ul > li img { max-width: 100%; height: auto; }
	/* 가로 카드(이미지 왼쪽 190px 절대배치 + 텍스트/가격이 left:235 에서 시작)가 폰 폭을
	   넘어 오른쪽 텍스트·가격이 잘렸다 → 이미지를 96px 로 줄이고 텍스트 시작점을 108px 로
	   당겨 카드 안에 들어오게 한다. .GoodsBox 가 relative 기준. */
	.PanaRecom .GoodsBox { position: relative !important; }
	.PanaRecom .GoodsBox .img, .PanaRecom .GoodsBox .img > a { width: 96px !important; }
	.PanaRecom .GoodsBox .img img { width: 96px !important; height: auto !important; }
	.PanaRecom .GoodsBox .textBox { padding-left: 108px !important; box-sizing: border-box; width: 100% !important; }
	.PanaRecom .GoodsBox .tit, .PanaRecom .GoodsBox .subtit { left: 108px !important; }
	.PanaRecom .GoodsBox .dlposi { left: 108px !important; right: 8px !important; width: auto !important; box-sizing: border-box; }
	.PanaRecom .priceBox { width: auto !important; }

	/* ===== 7. 카테고리별 상품 : 탭 가로스크롤 + 상품 2열 ===== */
	.Temacon { min-width: 0 !important; width: 100% !important; box-sizing: border-box; padding: 0 10px; }
	/* 카테고리 탭 : 텍스트 링크가 붙어 겹쳐 보이던 것을 «둥근 칩»으로 만들어 줄바꿈 정렬 */
	.Temacon .TemaTab { display: flex !important; flex-wrap: wrap; gap: 7px; width: 100% !important; overflow: visible !important; white-space: normal !important; box-sizing: border-box; padding: 6px 0 10px; }
	.Temacon .TemaTab > li { float: none !important; width: auto !important; flex: 0 0 auto; margin: 0 !important; }
	.Temacon .TemaTab > li > a { display: block; padding: 7px 14px; border: 1px solid #dcdce2; border-radius: 18px; font-size: 13px; line-height: 1.1; color: #4b4b52; white-space: nowrap; text-decoration: none; background: #fff; }
	.Temacon .TemaTab > li > a.on { background: #523787; border-color: #523787; color: #fff; }
	.Temacon ul:not(.TemaTab) > li { float: left !important; width: 50% !important; box-sizing: border-box; padding: 6px !important; }
	.Temacon ul:not(.TemaTab) > li:nth-child(2n+1) { clear: left !important; }
	.Temacon ul:not(.TemaTab) { width: 100% !important; box-sizing: border-box; }
	.Temacon img { max-width: 100%; height: auto; }
	/* 카테고리 쇼케이스(큰이미지 왼쪽 + 작은이미지 그리드)가 고정폭이라 살짝 넘친다 → 유동화 */
	.Temacon .leftBigImg, .Temacon .rightSmallImg, .leftBigImg, .rightSmallImg {
		max-width: 100% !important; box-sizing: border-box;
	}
	.leftBigImg { position: relative !important; width: 100% !important; }
	.rightSmallImg { width: 100% !important; }

	/* ===== 8. 공통 1200 센터링 래퍼 (.contAuto) · 하단 퀵바(.bottom_con) =====
	   푸터·하단바 등이 이 1200px 고정 래퍼를 공유한다 → 유동화하지 않으면
	   폰에서 오른쪽으로 넘쳐 잘린다(사용자 지적 : 공지바·고객센터·주소 우측 잘림). */
	.contAuto, .bottom_con { min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; }

	/* ===== 9. 하단 퀵바 (공지사항/상품평보기/적립금조회/대량구매문의/온라인안내) =====
	   이 퍼플 바는 .fooTopLinks 안 «display:table ul»(1200px 고정)이라, 폰에서 왼쪽 2개만
	   보이고 나머지가 오른쪽으로 잘렸다(사용자 지적). .footer 밖(wrap_body 직속)이므로
	   .footer 접두 없이 잡는다. table → flex 가운데 정렬 줄바꿈으로 5개 모두 보이게 한다. */
	.fooTopLinks { min-width: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; overflow: hidden; }
	.fooTopLinks > ul, .fooTopLinks ul { width: 100% !important; display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 6px; box-sizing: border-box; padding: 6px 4px; }
	.fooTopLinks li { display: block !important; float: none !important; width: auto !important; }
	.fooTopLinks li > a { display: inline-flex !important; align-items: center; gap: 5px; padding: 6px 8px; white-space: nowrap; font-size: 12px; text-decoration: none; }
	.fooTopLinks li > a img { width: 18px; height: 18px; flex: none; vertical-align: middle; }

	/* 고객센터·입금계좌·공지 : «세로 스택». 예전 판이 flex-wrap 으로 만들어 각 컬럼이
	   108px 로 찌부러져 전화번호가 「02-763- / 5194」 처럼 잘려 보였다. */
	.bottom_con { min-width: 0 !important; width: 100% !important; box-sizing: border-box; display: block !important; padding: 14px 14px 6px; }
	.bottom_con > * { position: static !important; float: none !important; width: 100% !important; box-sizing: border-box; margin: 0 0 16px !important; }
	.bottom_con .QnA, .bottom_con .BankBox, .bottom_con .Notice, .bottom_con .SNS { width: 100% !important; text-align: center; }
	.bottom_con img { max-width: 100%; height: auto; }

	/* ===== 10. 푸터 ===== */
	.footer { min-width: 0 !important; width: 100% !important; box-sizing: border-box; overflow: hidden; }
	.footer .links, .footer .adrCopyright, .footer form { width: 100% !important; box-sizing: border-box; }
	.footer img { max-width: 100%; height: auto; }
	.footer [style*="width:1200"], .footer [style*="width:1000"] { width: 100% !important; max-width: 100% !important; }

	/* 푸터 링크바(1:1친절상담 · 이용약관 …) : 가운데 정렬 줄바꿈 */
	.footer .links .contAuto { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; padding: 10px 8px; text-align: center; }
	.footer .links .contAuto > a { position: static !important; float: none !important; }

	/* 고객센터 · 입금계좌안내 · NOTICE · SNS 컬럼 → 세로 스택 (플로트/절대배치 해제) */
	.footer .adrCopyright .contAuto { position: relative !important; padding: 0 12px; box-sizing: border-box; }
	.footer .QnA, .footer .BankBox, .footer .Notice, .footer .SNS,
	.footer .csCenter, .footer .CScenter, .footer .cscenter {
		position: static !important; float: none !important;
		width: 100% !important; left: auto !important; right: auto !important; top: auto !important;
		box-sizing: border-box; margin: 0 0 12px !important;
	}
	.footer .SNS { text-align: center; }
	/* 카피라이트/주소(절대배치라 오른쪽으로 넘쳐 잘렸다) */
	.footer .footCopyright { position: static !important; width: 100% !important; box-sizing: border-box; margin: 0 !important; padding: 10px 12px !important; text-align: center; }

	/* ===== 11. 하단 네비게이션 탭바 (endedit 방식 참고 · 파나메딕 퍼플 #523787) =====
	   endedit 은 .rr-mo-gnb(하단 고정 5탭)를 쓴다. 그 패턴을 참고해 파나메딕용 .pm-mo-gnb 를
	   JS 가 body 에 만들고, 여기서 스타일을 준다. 본문이 바 뒤에 가리지 않게 아래 여백 확보. */
	.wrap_body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; }
	.pm-mo-gnb {
		display: block !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
		background: #fff; border-top: 1px solid #e8e8ee; box-shadow: 0 -2px 10px rgba(20, 20, 40, .06);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.pm-mo-gnb ul { display: flex; margin: 0; padding: 0; list-style: none; }
	.pm-mo-gnb li { flex: 1 1 0; min-width: 0; }
	.pm-mo-gnb a {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
		height: 58px; color: #8a8a92; font-size: 11px; text-decoration: none; -webkit-tap-highlight-color: transparent;
	}
	.pm-mo-gnb a.is-active { color: #523787; }
	.pm-mo-gnb svg { display: block; width: 22px; height: 22px; }
	.pm-mo-gnb .pm-mo-badge {
		position: absolute; top: 7px; left: calc(50% + 6px); min-width: 15px; height: 15px; padding: 0 4px;
		border-radius: 8px; background: #e2483d; color: #fff; font-size: 10px; line-height: 15px; text-align: center; box-sizing: border-box;
	}
	.pm-mo-gnb a { position: relative; }
}

/* ==========================================================================
   폰 푸터 — 주소·사업자정보·에스크로 배너 잘림 수정   2026-09-04 [PD2609040030]
   ---------------------------------------------------------------------------
   문제 : 푸터 아래쪽 블록이 «데스크톱 1200px 절대배치» 그대로였다.
          <code>.footer .adrCopyright { height:250px; overflow:hidden }</code> 로 «높이가 250px 에
          못박혀» 있고, 그 안의 .footlogo / .footCopyright / .footlogo2 / .SNS 는 전부
          <code>position:absolute</code> + <code>margin-left:265px|730px</code> · <code>right:0</code> 이다.
          폰에서는 글이 여러 줄로 늘어 내용이 270px 이 되는데 상자는 250px 이라
          <b>구매안전(에스크로) 서비스 배너가 반쯤 잘려</b> 나왔다(사용자 캡처).
          서브페이지는 더 나쁘다 — 절대배치가 그대로라 .contAuto 높이가 0 이 되고
          로고·주소·배너가 서로 겹친 채 250px 상자 밖으로 잘려 나갔다.
   조치 : 폰(≤767px)에서만
          ① .footer / form / .adrCopyright / .contAuto 의 «고정 높이와 overflow:hidden» 해제
          ② 절대배치 4형제(.footlogo · .footCopyright · .footlogo2 · .SNS)를 흐름 배치로 되돌려
             위에서 아래로 가운데 정렬 스택
          ③ 하단 고정 탭바에 마지막 줄이 가리지 않도록 아래 여백을 60px → 78px 로 넓힘
   ★범위 : 폰에서만. 데스크톱(≥768px) 푸터는 전혀 건드리지 않는다.
   ========================================================================== */
@media all and (max-width:1199px) {
	/* ① 못박힌 높이·클리핑 해제 — 이게 「잘림」의 직접 원인이다 */
	.footer,
	.footer form,
	.footer .adrCopyright,
	.footer .adrCopyright .contAuto {
		height: auto !important; min-height: 0 !important;
		overflow: visible !important;
	}
	.footer .adrCopyright { padding: 18px 0 22px !important; box-sizing: border-box; }
	.footer .adrCopyright .contAuto {
		position: relative !important; display: block !important;
		padding: 0 14px !important; box-sizing: border-box; text-align: center;
	}

	/* ② 절대배치 4형제 → 세로 스택 (margin-left:265px·730px, right:0 을 모두 무효화) */
	.footer .adrCopyright .footlogo,
	.footer .adrCopyright .footlogo2,
	.footer .adrCopyright .footCopyright,
	.footer .adrCopyright .SNS {
		position: static !important;
		top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
		float: none !important; width: 100% !important; max-width: 100% !important;
		margin: 0 0 12px !important; padding: 0 !important;
		box-sizing: border-box; text-align: center;
	}
	.footer .adrCopyright .footlogo img,
	.footer .adrCopyright .footlogo2 img { max-width: 210px; height: auto; }
	.footer .adrCopyright .footCopyright {
		line-height: 1.65 !important; font-size: 12px; word-break: keep-all;
	}
	.footer .adrCopyright .SNS { margin-bottom: 0 !important; font-size: 0; }
	.footer .adrCopyright .SNS a { display: inline-block; margin: 0 !important; }
	.footer .adrCopyright .SNS img { margin: 0 !important; max-width: 100%; height: auto; }
	/* 사업자정보확인 버튼이 글줄 사이에서 눌리기 쉽게 */
	.footer .footCopyrightbtn { display: inline-block; margin: 4px 0; padding: 2px 8px !important; line-height: 20px !important; }

	/* ③ 하단 고정 탭바(59px)에 마지막 줄이 가리지 않도록 여백 확보.
	   ★.wrap_body 가 아니라 body 에 준다 — .wrap_body 로 감싸지 않는 페이지가 있다(실측). */
	html body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; }
	html body .wrap_body { padding-bottom: 0 !important; }
}

/* ==========================================================================
   폰 하단 「고객센터 · 입금계좌안내 · NOTICE」 블록 정렬 보정   2026-09-04 [PD2609040040]
   ---------------------------------------------------------------------------
   문제 (516px 실측) : .bottom_con 을 세로 스택으로 만들어 두긴 했지만 «칸 안» 은
     데스크톱 4단 그대로였다.
     · <code>.CScenter</code>(고객센터) 만 <code>text-align:left</code> — 옆 칸(입금계좌·NOTICE)은
       가운데인데 이 칸만 왼쪽에 붙어 보였다(사용자 캡처 빨간 박스).
     · <code>.QnA</code> 안의 1:1문의·Q&A·FAQ 동그라미가 <code>float:left</code> 라 가운데 정렬이
       먹지 않고 왼쪽에 몰렸다.
     · 네 칸 모두 <b>height:165px 고정</b> — 내용이 100px 남짓이라 칸마다 60px 안팎의
       빈 공간이 생겼다(캡처의 큰 여백).
     · <code>.BankBox</code>·<code>.Notice</code> 는 <code>padding-left:30px</code> 이라 가운데 정렬이
       15px 오른쪽으로 밀려 있었다.
     · 데스크톱 4단을 나누던 <b>세로 구분선</b>(border-left)이 세로 스택에서는 각 칸 왼쪽에
       엉뚱한 세로줄로 남아 있었다.
   조치 : 폰(≤767px)에서만 고정 높이·좌측정렬·float·비대칭 여백을 풀고, 칸 사이를
     가로 구분선으로 바꾼다.
   ★범위 : 폰에서만. 데스크톱(≥768px) 4단 배치는 전혀 건드리지 않는다.
   ========================================================================== */
@media all and (max-width:1199px) {
	/* 칸 공통 : 고정 165px 높이 해제 · 세로 구분선 → 가로 구분선 · 가운데 정렬 */
	.bottom_con > div {
		height: auto !important; min-height: 0 !important;
		padding: 16px 14px !important; border: 0 !important;
		text-align: center !important; box-sizing: border-box;
	}
	.bottom_con > div + div { border-top: 1px solid #ececf2 !important; }

	/* 고객센터 칸 — 이 칸만 왼쪽 정렬이었다 */
	.bottom_con .CScenter,
	.bottom_con .CScenter h1,
	.bottom_con .CScenter .Tell,
	.bottom_con .CScenter .Csnoti { text-align: center !important; }
	.bottom_con .CScenter h1 { margin: 0 0 6px !important; }
	.bottom_con .CScenter .Tell { padding-top: 0 !important; margin: 0 !important; line-height: 1.25 !important; }
	.bottom_con .CScenter .Csnoti { padding-top: 8px !important; }

	/* 1:1문의 · Q&A · FAQ 동그라미 — float:left 를 풀고 가운데로 */
	.bottom_con .QnA {
		display: flex !important; flex-wrap: wrap;
		justify-content: center; align-items: center; gap: 14px;
		padding-top: 4px !important;
	}
	.bottom_con .QnA > a { float: none !important; margin: 0 !important; flex: 0 0 auto; }

	/* 입금계좌안내 · NOTICE — padding-left:30px 때문에 가운데가 15px 밀려 있었다 */
	.bottom_con .BankBox,
	.bottom_con .Notice { padding-left: 14px !important; padding-right: 14px !important; }
}

/* 아주 좁은 폰(≤430px)에서는 로고를 조금 더 줄여 검색창이 로고 옆에 그대로 남게 한다.
   2026-09-04 [PD2609040090] */
@media all and (max-width:430px) {
	.logoSearch .logo img { max-width: 120px; }
	.logoSearch .search { flex: 1 1 140px; }
	.logoSearch .search input[type="text"], .logoSearch .search .inputTxt { font-size: 12px; padding: 0 10px !important; }
}

/* ==========================================================================
   메인 상품 섹션 — 좌우 여백 통일 + 상품카드 endedit 스타일   2026-09-04 [PD2609040100]
   ---------------------------------------------------------------------------
   ① 여백 : 「인기상품 BEST」(.PanaBest)·「추천상품 RECOMMENDED PRODUCTS」(.PanaRecom) 은
      섹션 좌우 여백이 «0» 이라 제목이 화면 왼쪽 경계선에 붙어 나왔다(실측 L=0px).
      「카테고리별 상품」(.Temacon) 만 padding:0 10px 을 갖고 있어(L=10px) 혼자 들여쓰기가
      돼 있었다 — 세 섹션을 모두 10px 로 맞춘다.
      ※ 메인의 굵은 제목을 전수 조사했다. 나머지(고객센터·입금계좌안내·NOTICE)는 자기들끼리
        이미 28px 로 가지런하고 «왼쪽에 붙는» 섹션은 이 셋뿐이었다.

   ② 카드 : https://endedit.com 의 상품목록 카드(.ee-ls-card)를 폰 390px 에서 실측해 맞춘다.
      endedit 실측값 — 격자 2열/세로36·가로24 · 카드 flex세로 gap12 · 썸네일 radius2 cover
                       · 본문 flex세로 gap6 · 상품명 14px/20px 2줄말줄임 rgba(46,47,51,.88)
                       · 가격 16px/700 #171717
      파나메딕 적용 — 좌우여백이 10px(카테고리별과 통일)이라 가로간격만 16px 로 좁혔고,
                     썸네일은 endedit(100/135 세로형)과 달리 «정사각 상품컷»(tmplSquareImg)
                     이라 1/1 로 잡았다(3/4 로 자르면 제품이 잘린다).

   ★2026-09-04 재작업분(같은 작업번호) — 처음 올린 판에서 실제로 깨졌던 3가지를 고쳤다.
     (가) 추천상품 «가격·별점이 아예 안 보이던» 것.
          원인 : 디자인템플릿 원본에 .PanaRecom ul { height:207px } 이 걸려 있다.
                 격자로 바꾸면서 ul 의 이 «고정 높이»를 풀지 않아, 카드(279px)가 ul(207px)
                 밖으로 넘치고 다음 ul 이 그 위에 겹쳐 그려져 가격줄을 덮어버렸다.
                 (elementFromPoint 로 가격 자리를 찍으면 다음 카드의 IMG 가 잡혔다.)
          조치 : ul 의 height 를 auto 로 푼다.
     (나) 「카테고리별 상품」이 «큰 빈 상자 하나»만 남던 것.
          원인 : 앞판의 .Temacon ul:not(.TemaTab) > li:not(:has(.GoodsBox)){display:none}
                 규칙이, 상품카드가 아니라 «그림 타일»로 짜인 .rightSmallImg 의 li 까지
                 전부 숨겨버렸다(카테고리별 상품엔 .GoodsBox 가 아예 없다).
                 남은 .leftBigImg 는 395x395 고정 + 테두리라 빈 사각형만 보였다.
          조치 : 카테고리별은 «그림 타일» 전용 규칙으로 따로 짠다(큰그림 1 + 작은그림 2열),
                 그림이 없는 칸·줄은 숨긴다.
     (다) BEST 번호 배지가 의도한 모양으로 안 붙던 것.
          원인 : 원본 .PanaBest ul li .GoodsBox .NumBox (특이도 0,4,2) 가 이겨서 53x53 사각형
                 그대로였다. → html body … ul li … 로 특이도를 올리고 !important 를 붙였다.
                 색은 사이트 고유색(#d74b47)을 그대로 두고 크기만 카드에 맞게 줄였다.

   ★범위 : 폰(≤767px)에서만. 데스크톱 메인은 전혀 건드리지 않는다.
   되돌리기 : 이 블록만 지우면 이전 배치로 돌아간다.
   ========================================================================== */
@media all and (max-width:1199px) {

	/* ── ① 섹션 좌우 여백 통일 (카테고리별 상품과 같은 10px) ───────────────── */
	.PanaBest, .PanaRecom, .Temacon {
		padding-left: 10px !important; padding-right: 10px !important;
		box-sizing: border-box;
	}

	/* ── ② 상품격자 = endedit .ee-ls-grid ─────────────────────────────────
	   ★ height:auto 를 반드시 함께 푼다 — 원본 .PanaRecom ul 에 height:207px 이 있다. */
	html body .PanaBest > ul,
	html body .PanaRecom > ul {
		display: grid !important; grid-template-columns: repeat(2, 1fr);
		gap: 32px 16px;
		width: 100% !important; height: auto !important; min-height: 0 !important;
		padding: 0 !important; margin: 0 0 32px !important;
		list-style: none; float: none !important; overflow: visible !important;
	}
	html body .PanaBest > ul:last-of-type,
	html body .PanaRecom > ul:last-of-type { margin-bottom: 0 !important; }

	html body .PanaBest > ul > li,
	html body .PanaRecom > ul > li {
		float: none !important; clear: none !important; display: block !important;
		width: auto !important; min-width: 0; height: auto !important;
		padding: 0 !important; margin: 0 !important;
	}
	/* 데스크톱 4열/2열을 채우려고 끼워둔 «상품 없는 칸» 은 격자에서 구멍이 된다 */
	html body .PanaBest > ul > li:not(:has(.img img)),
	html body .PanaRecom > ul > li:not(:has(.img img)) { display: none !important; }

	/* ── ③ 카드 = endedit .ee-ls-card (세로 flex · 썸네일↔본문 12px) ───────── */
	html body .PanaBest .GoodsBox,
	html body .PanaRecom .GoodsBox {
		display: flex !important; flex-direction: column; align-items: stretch; gap: 12px;
		position: relative !important; min-width: 0;
		width: auto !important; height: auto !important;
		padding: 0 !important; margin: 0 !important;
		border: 0 !important; border-radius: 0 !important;
		background: none !important; box-shadow: none !important;
	}

	/* 썸네일 = .ee-ls-th (radius 2px · object-fit:cover · 살짝 확대되는 hover) */
	html body .PanaBest .GoodsBox .img,
	html body .PanaRecom .GoodsBox .img {
		position: relative !important; display: block !important;
		left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
		width: 100% !important; height: auto !important; aspect-ratio: 1 / 1;
		margin: 0 !important; padding: 0 !important;
		border: 0 !important; border-radius: 2px; overflow: hidden; background: #fff;
	}
	html body .PanaBest .GoodsBox .img > a,
	html body .PanaRecom .GoodsBox .img > a { display: block !important; width: 100% !important; height: 100% !important; }
	html body .PanaBest .GoodsBox .img img,
	html body .PanaRecom .GoodsBox .img img {
		position: absolute !important; top: 0; left: 0;
		width: 100% !important; height: 100% !important; object-fit: cover; display: block;
		transition: transform .45s ease;
	}
	html body .PanaBest .GoodsBox:hover .img img,
	html body .PanaRecom .GoodsBox:hover .img img { transform: scale(1.04); }

	/* 본문 = .ee-ls-meta (세로 flex · 6px) */
	html body .PanaBest .GoodsBox .textBox,
	html body .PanaRecom .GoodsBox .textBox {
		display: flex !important; flex-direction: column; gap: 6px; min-width: 0;
		position: static !important; width: auto !important; text-align: left;
		padding: 0 !important; margin: 0 !important;
	}
	/* 추천상품은 별점·가격이 .dlposi 안에 «절대배치»돼 있다 → 흐름 안으로 되돌린다 */
	html body .PanaRecom .GoodsBox .textBox .dlposi {
		position: static !important;
		left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
		display: flex !important; flex-direction: column; gap: 6px;
		width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
	}

	/* 상품명 = .ee-ls-name : 14px/20px · 2줄까지 보이고 넘치면 …
	   ★원본이 white-space:nowrap 이라 «줄바꿈 자체»가 막혀 있었다 → normal 로 푼다 */
	html body .PanaBest .GoodsBox .textBox .tit,
	html body .PanaRecom .GoodsBox .textBox .tit,
	html body .PanaBest .GoodsBox .textBox .subtit,
	html body .PanaRecom .GoodsBox .textBox .subtit {
		position: static !important; left: auto !important;
		width: auto !important; height: auto !important;
		padding: 0 !important; margin: 0 !important;
		white-space: normal !important; text-overflow: clip !important; overflow: hidden !important;
	}
	html body .PanaBest .GoodsBox .textBox .tit,
	html body .PanaRecom .GoodsBox .textBox .tit { min-height: 40px; }
	html body .PanaBest .GoodsBox .textBox .tit a,
	html body .PanaRecom .GoodsBox .textBox .tit a {
		display: block !important; text-decoration: none; color: inherit;
		white-space: normal !important;
	}
	html body .PanaBest .GoodsBox .textBox .tit a span,
	html body .PanaRecom .GoodsBox .textBox .tit a span {
		display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
		overflow: hidden !important; white-space: normal !important; word-break: break-all !important;
		width: auto !important; max-width: 100% !important;
		font-size: 14px !important; line-height: 20px !important; font-weight: 400 !important;
		color: rgba(46, 47, 51, .88) !important;
	}
	/* 비어 있는 부제목/아이콘 줄이 gap 만 잡아먹지 않게 */
	html body .PanaBest .GoodsBox .subtit:empty,
	html body .PanaRecom .GoodsBox .subtit:empty,
	html body .PanaRecom .GoodsBox .priceBox dt.ICon:empty { display: none !important; }

	/* 가격 = .ee-ls-pr : 16px/700 한 줄 (구분선 없음) */
	html body .PanaBest .GoodsBox .priceBox,
	html body .PanaRecom .GoodsBox .priceBox {
		display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px;
		width: auto !important; height: auto !important;
		padding: 0 !important; margin: 0 !important;
		border: 0 !important; overflow: visible !important;
	}
	html body .PanaBest .GoodsBox .priceBox dt, html body .PanaBest .GoodsBox .priceBox dd,
	html body .PanaRecom .GoodsBox .priceBox dt, html body .PanaRecom .GoodsBox .priceBox dd {
		float: none !important; width: auto !important; height: auto !important;
		padding: 0 !important; margin: 0 !important; line-height: 19px !important;
	}
	html body .PanaBest .GoodsBox .priceBox dt,
	html body .PanaBest .GoodsBox .priceBox dt span,
	html body .PanaBest .GoodsBox .priceBox dt span.mwon,
	html body .PanaRecom .GoodsBox .priceBox dt.PRI,
	html body .PanaRecom .GoodsBox .priceBox dt.PRI span,
	html body .PanaRecom .GoodsBox .priceBox dt.PRI span.mwon {
		font-size: 16px !important; font-weight: 700 !important; color: #171717 !important;
		vertical-align: baseline !important;
	}
	/* 별점 줄은 가격 위에 얇게 */
	html body .PanaRecom .GoodsBox .appraisalstar { font-size: 12px; }
	html body .PanaRecom .GoodsBox .priceBox dd.star { margin-left: 0 !important; }
	html body .PanaRecom .GoodsBox .priceBox dd.star .score,
	html body .PanaRecom .GoodsBox .priceBox dd.star .review { font-size: 12px !important; }

	/* BEST 번호 배지 — 53x53 사각형에서 카드 왼쪽 위 작은 배지로 (색은 사이트 고유색 유지) */
	html body .PanaBest ul li .GoodsBox .NumBox {
		position: absolute !important; top: 6px !important; left: 6px !important; z-index: 2;
		width: auto !important; height: auto !important;
		display: flex !important; flex-direction: column; align-items: center;
		padding: 3px 7px !important; border-radius: 2px; background: #d74b47 !important;
	}
	html body .PanaBest ul li .GoodsBox .NumBox .Best {
		font-size: 9px !important; line-height: 12px !important; padding: 0 !important;
		letter-spacing: .04em; font-weight: 700 !important; color: #fff !important;
	}
	html body .PanaBest ul li .GoodsBox .NumBox .Num {
		font-size: 14px !important; line-height: 15px !important; padding: 0 !important;
		font-weight: 700 !important; color: #ffea00 !important;
	}

	/* ── ④ 카테고리별 상품 = «그림 타일»(큰그림 1 + 작은그림 8) ────────────────
	   상품카드(.GoodsBox)가 없는 구조다. 데스크톱은 큰그림을 왼쪽에 절대배치하고
	   작은그림 줄에 padding-left:400px 을 줘 옆에 붙인다 — 폰에서는 그 400px 때문에
	   작은그림이 «폭 0» 이 되어 사라졌다. 위아래로 쌓고 2열 격자로 편다. */
	html body .Temacon .GoodsImg { position: static !important; margin-top: 12px !important; overflow: visible !important; }
	html body .Temacon .GoodsImg .leftBigImg {
		position: static !important; width: 100% !important; height: auto !important;
		aspect-ratio: 1 / 1; margin: 0 !important; padding: 0 !important;
		border: 0 !important; border-radius: 2px; overflow: hidden;
	}
	html body .Temacon .GoodsImg .leftBigImg > span { display: block; width: 100%; height: 100%; }
	html body .Temacon .GoodsImg .leftBigImg img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }

	html body .Temacon .GoodsImg ul.rightSmallImg {
		display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 16px;
		width: 100% !important; height: auto !important;
		padding: 0 !important; margin: 16px 0 0 !important; overflow: visible !important; float: none !important;
	}
	html body .Temacon .GoodsImg ul.rightSmallImg > li {
		display: block !important; float: none !important; clear: none !important;
		width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important;
	}
	html body .Temacon .GoodsImg ul.rightSmallImg > li > span {
		display: block; width: 100%; height: auto !important; aspect-ratio: 1 / 1;
		border: 0 !important; border-radius: 2px; overflow: hidden;
	}
	html body .Temacon .GoodsImg ul.rightSmallImg > li img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }

	/* 그림이 없는 칸·줄·큰그림은 «빈 사각형»으로 남으므로 숨긴다
	   (탭 하나가 통째로 비어 있으면 그 탭은 아무것도 안 보이는 것이 맞다 —
	    관리자 「디자인관리」에서 그 카테고리에 그림을 등록하면 채워진다) */
	html body .Temacon .GoodsImg .leftBigImg:not(:has(img)) { display: none !important; }
	html body .Temacon .GoodsImg ul.rightSmallImg > li:not(:has(img)) { display: none !important; }
	html body .Temacon .GoodsImg ul.rightSmallImg:not(:has(img)) { display: none !important; }
}


/* ==========================================================================
   반응형 분기점 확장 보정 — 태블릿/좁은 데스크톱(768~1199px)   2026-09-04 [PD2609040120]
   ---------------------------------------------------------------------------
   왜 : 반응형이 폰(≤767px)까지만 걸려 있어, 768~1199px 로 창을 줄이면 데스크톱
        1200px 고정 레이아웃이 그대로 나와 «반응형이 작동하지 않았다»(가로 스크롤 +
        오른쪽이 잘림). 분기점을 1199px 로 넓혀 이 구간도 유동이 되게 했다.
   여기서는 : 폰용으로 짠 «2열» 격자가 넓은 창에서 카드가 지나치게 커지는 것만 보정한다.
   ========================================================================== */
@media all and (min-width:768px) and (max-width:1199px) {

	/* 섹션 좌우 여백은 화면이 넓어진 만큼 조금 더 */
	.PanaBest, .PanaRecom, .Temacon {
		padding-left: 20px !important; padding-right: 20px !important;
	}

	/* 상품격자 2열 → 4열 */
	html body .PanaBest > ul,
	html body .PanaRecom > ul {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 36px 20px !important;
	}

	/* 카테고리별 상품 : 큰그림은 절반 폭, 작은그림은 4열 */
	html body .Temacon .GoodsImg .leftBigImg {
		width: 48% !important; max-width: 480px !important;
	}
	html body .Temacon .GoodsImg ul.rightSmallImg {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}