@charset "UTF-8";
/* =========================================================================
 * responsive.css - 메인 레이아웃 모바일 반응형
 *
 * 모든 규칙은 body.mobileResponsive 하위로 스코프되어 있으므로,
 * 반응형 opt-in 된 페이지(layout.jsp 의 mobileResponsiveViews 화이트리스트)
 * 에서만 동작한다. 그 외 페이지에는 어떤 영향도 주지 않는다.
 *
 * 기준점(breakpoint): 768px 이하 = 모바일 레이아웃
 * ========================================================================= */

/* 햄버거 버튼은 기본적으로 숨김 (데스크탑 / 비반응형 페이지) */
.mobileMenuToggle { display: none; }
.mobileMenuBackdrop { display: none; }

@media (max-width: 768px) {

	/* ----- 전체 골격: 좌우(메뉴+본문) → 상하 스택 ----- */
	body.mobileResponsive {
		display: block;
		width: 100%;
		/* 공통 가로 스크롤 방지 백스톱: body 의 overflow-x:hidden 은 (html 이 visible 이므로)
		   뷰포트로 전파되어, body 가 스크롤 컨테이너가 되지 않는다 → sticky 헤더를 깨지 않으면서
		   컴포넌트별 잔여 가로 넘침을 모두 잘라낸다. (clip 미지원 브라우저까지 안전) */
		overflow-x: hidden;
	}

	/* =====================================================================
	 * 가로 스크롤 전역 차단 — "페이지마다 재발"의 근본 원인 제거.
	 *  (원인: .grid 를 .results/.gridContainer 같은 특정 부모 안에서만 제약해서,
	 *   다른 부모의 .grid/표는 매번 새로 넘쳤음. → 부모 무관 전역 규칙으로 일괄 처리.)
	 *  · 데이터 표(.grid)는 어떤 부모 안에 있든 줄어들고 자기 안에서 가로 스크롤
	 *  · 래퍼 없는 표(table.grid, 예: 경쟁분석 목록)도 블록 스크롤로
	 *  · 상단 탭메뉴(.tabMenu/.tabType2, #contents 밖)도 넘치면 스크롤
	 * ===================================================================== */
	/* 표 래퍼(div.grid): flex 자식이어도 줄어들고 자기 안에서 가로 스크롤.
	   (table.grid 처럼 일부러 넓게 스크롤시키는 표의 min-width 는 건드리지 않음) */
	body.mobileResponsive div.grid {
		min-width: 0;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* 래퍼 없이 .analysis 에 직접 들어간 표(경쟁분석 목록/기록)는 표 자체를 스크롤 블록으로.
	   (.tableContainer 등으로 감싼 표는 매칭 안 됨 → 기존 동작 유지) */
	body.mobileResponsive .analysis > table.grid {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	body.mobileResponsive .tabMenu,
	body.mobileResponsive .tabType2 {
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* ----- 좌측 메뉴 → 오프캔버스 드로어 ----- */
	body.mobileResponsive #menu {
		z-index: 1000;
		position: fixed;
		top: 0;
		left: 0;
		width: 260px !important;
		height: 100vh;
		min-height: 100vh;
		padding: 18px 15px 30px !important;
		overflow-y: auto;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
	}
	body.mobileResponsive.mobileMenuOpen #menu {
		transform: translateX(0);
	}
	/* 데스크탑 접기/펼치기 상태(menuClosed)를 모바일에서는 무력화 (항상 풀 메뉴) */
	body.mobileResponsive.menuClosed #menu {
		width: 260px !important;
		padding: 18px 15px 30px !important;
	}
	body.mobileResponsive.menuClosed #menu .info,
	body.mobileResponsive.menuClosed #menu .info > *,
	body.mobileResponsive.menuClosed #menu .menu a span {
		display: block;
	}
	body.mobileResponsive.menuClosed #menu .menu a {
		text-indent: 0;
	}
	/* 데스크탑용 접기 토글 버튼은 숨김 */
	body.mobileResponsive #menu button.toggle {
		display: none;
	}

	/* ----- 드로어 배경(backdrop) ----- */
	body.mobileResponsive .mobileMenuBackdrop {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		background: rgba(0, 0, 0, 0.4);
	}
	body.mobileResponsive.mobileMenuOpen .mobileMenuBackdrop {
		display: block;
	}

	/* ----- 헤더 ----- */
	body.mobileResponsive #header {
		min-width: 0;
		width: 100%;
		height: 60px;
		padding: 0 12px;
		gap: 8px;
	}
	body.mobileResponsive.scrolling #header {
		height: 56px;
	}
	body.mobileResponsive #header h1 {
		display: flex;
		align-items: center;
		flex: 1 1 auto;
		min-width: 0;
	}
	body.mobileResponsive #header h1 a {
		width: 130px;
		height: 30px;
		background-size: contain;
	}
	/* 연동 상태 배지 / 도움말 툴팁 / 배너 / 바로가기는 모바일에서 숨김 */
	body.mobileResponsive #header #naverStatus,
	body.mobileResponsive #header #coupangStatus,
	body.mobileResponsive #header #wingStatus,
	body.mobileResponsive #header h1 .tooltip,
	body.mobileResponsive #header .swiper,
	body.mobileResponsive #header .shortcut {
		display: none;
	}

	/* ----- 햄버거 버튼 ----- */
	body.mobileResponsive .mobileMenuToggle {
		display: inline-flex;
		flex: 0 0 auto;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 40px;
		height: 40px;
		padding: 9px;
		margin-right: 4px;
		border: 0;
		background: transparent;
		cursor: pointer;
	}
	body.mobileResponsive .mobileMenuToggle span {
		display: block;
		width: 100%;
		height: 2px;
		border-radius: 2px;
		background: #333;
		transition: transform 0.3s, opacity 0.3s;
	}
	/* 열린 상태에서 X 형태로 변형 */
	body.mobileResponsive.mobileMenuOpen .mobileMenuToggle span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	body.mobileResponsive.mobileMenuOpen .mobileMenuToggle span:nth-child(2) {
		opacity: 0;
	}
	body.mobileResponsive.mobileMenuOpen .mobileMenuToggle span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* ----- 본문 컨테이너 ----- */
	body.mobileResponsive #container {
		width: 100%;
		min-width: 0;
	}
	body.mobileResponsive #contents {
		min-width: 0;
		width: 100%;
		padding: 0 16px 60px;
	}
	body.mobileResponsive #contents .subtitle {
		max-width: 100%;
		padding-top: 30px;
		font-size: 20px;
	}

	/* ----- 푸터 ----- */
	body.mobileResponsive #footer {
		min-width: 0;
		width: 100%;
		height: auto;
		padding: 24px 16px;
		text-align: center;
	}
	body.mobileResponsive #footer > div {
		flex-wrap: wrap;
	}
	body.mobileResponsive #footer p {
		font-size: 12px;
		line-height: 1.6;
		word-break: keep-all;
	}

 	/* ----- 맨 위로 스크롤 버튼(sticky) 위치 보정 ----- */
	body.mobileResponsive .jumpToTop {
		max-width: 100%;
		padding-right: 16px;
		bottom: 16px;
	}

	/* ----- 마이페이지/강의실 영역 ----- */
	body.mobileResponsive section.mypage {
		max-width: 100%;
	}

	/* ----- 라벨|값 정보 리스트(예: 강의 상세 기본정보) -----
	   데스크탑은 li=593px / p,div=500px 고정폭이라 모바일에서 넘치고 잘린다.
	   폭을 유동화하고, 라벨은 그대로 두되 값은 남는 폭에서 줄바꿈되게 한다. */
	body.mobileResponsive section.mypage > ul {
		padding: 18px 16px;
	}
	body.mobileResponsive section.mypage > ul li {
		width: 100%;
		gap: 8px 12px;
		align-items: center;
		justify-content: flex-start;
	}
	/* 라벨에 최소 고정폭 부여 → 짧은 라벨들이 같은 폭으로 정렬되어 값 시작 위치(줄)가 맞는다 */
	body.mobileResponsive section.mypage > ul li > span,
	body.mobileResponsive section.mypage > ul li > label {
		flex: 0 0 auto;
		min-width: 76px;
		white-space: nowrap;
	}
	/* 값은 라벨 컬럼 다음부터 좌측 정렬 → 행끼리 시작점이 맞음 */
	body.mobileResponsive section.mypage > ul li > p {
		width: auto;
		min-width: 0;
		flex: 1 1 auto;
		text-align: left;
		word-break: break-word;
	}
	body.mobileResponsive section.mypage > ul li > div {
		width: auto;
		min-width: 0;
		flex: 1 1 auto;
	}
	/* 입력칸(input)이 flex:1 1 0 이지만 기본 min-width:auto 라 value 텍스트만큼 안 줄어
	   '변경' 버튼이 박스 밖으로 밀린다 → min-width:0 으로 줄어들게 */
	body.mobileResponsive section.mypage > ul li > div input {
		min-width: 0;
	}

	/* 넓은 데이터 테이블(예: 강의실 수강내역)은 '줄이지 않고' 데스크탑 자연폭 그대로 두고
	   컨테이너만 가로 스크롤시킨다. 좁은 폭에 욱여넣으면 칼럼이 짓눌려 겹치거나 글자가
	   세로로 떨어지므로, 아예 줄이지 않는 것이 가장 안전하다. */
	body.mobileResponsive section.mypage .tableContainer {
		/* section.mypage 가 flex 라 이 컨테이너(flex 자식)가 기본 min-width:auto 로
		   내용(920px 표)만큼 부풀어 페이지를 넘친다. min-width:0 + max-width:100% 로 막아
		   넘침은 내부 스크롤로만 처리되게 한다. */
		min-width: 0;
		max-width: 100%;
		padding: 0 0 0 16px; /* 스크롤 시작 지점에 왼쪽 여백 */
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	body.mobileResponsive section.mypage .tableContainer .grid.table {
		width: 920px;      /* 칼럼 고정폭 합(250+250+150+50+나머지)을 충분히 수용 */
		min-width: 920px;
		max-width: none;
		overflow: visible; /* 스크롤은 컨테이너가 담당 */
	}
	/* 셀은 정상 줄바꿈만. word-break/overflow-wrap 으로 글자단위 분해는 하지 않는다
	   (한글이 한 글자씩 세로로 떨어지는 현상의 원인). */
	body.mobileResponsive section.mypage .tableContainer .grid.table th,
	body.mobileResponsive section.mypage .tableContainer .grid.table td {
		white-space: normal;
		word-break: keep-all;
	}
	/* 마이페이지 하단 기능 버튼(탈퇴/로그아웃): 데스크탑 gap:85px 축소 */
	body.mobileResponsive .mypageFunction {
		max-width: 100%;
		gap: 16px;
	}

	/* ----- 강의 신청 폼(lecture) 입력 필드 유동화 ----- */
	body.mobileResponsive .analysisWord {
		width: 100% !important;
		margin-left: 0 !important;
	}
	body.mobileResponsive .filters li {
		padding-left: 0;
	}
	body.mobileResponsive #area_description {
		padding: 16px !important;
	}
	/* 상세 설명(에디터 HTML) 및 본문 내 이미지가 화면 폭을 넘지 않도록 */
	body.mobileResponsive #contents img,
	body.mobileResponsive #area_description img {
		max-width: 100%;
		height: auto;
	}

	/* ===========================================================
	 * /item : 필터 UI (카테고리/기간/필터) + 결과 + 팝업
	 * =========================================================== */

	/* 카테고리 드롭다운: flex:1 1 0 으로 4개가 한 줄에 욱여져 으스러짐 → 2개씩 줄바꿈 */
	body.mobileResponsive .filterGroup .selects,
	body.mobileResponsive .filterGroup .keywords {
		gap: 8px;
		padding: 12px;
	}
	body.mobileResponsive .filterGroup .selects .select,
	body.mobileResponsive .filterGroup .selects .textfield,
	body.mobileResponsive .filterGroup .keywords .select,
	body.mobileResponsive .filterGroup .keywords .textfield {
		flex: 1 1 calc(50% - 8px);
		min-width: calc(50% - 8px);
	}

	/* 필터 행: 데스크탑은 calc(100%-420px)/390px 고정폭이라 모바일에서 음수/넘침 발생.
	   전부 풀폭으로 만들고 라벨은 위, 옵션은 아래로 스택. */
	body.mobileResponsive .filterGroup .filters {
		gap: 16px;
		padding: 18px 14px 28px;
	}
	body.mobileResponsive .filterGroup .filters li,
	body.mobileResponsive .filterGroup .filters li:first-child,
	body.mobileResponsive .filterGroup .filters li:nth-child(2),
	body.mobileResponsive .filterGroup .filters li:nth-child(3),
	body.mobileResponsive .filterGroup .filters li:nth-child(4) {
		width: 100% !important;
		align-items: flex-start;
	}
	body.mobileResponsive .filterGroup .filters li > span {
		width: 100%;
		margin-bottom: 8px;
	}
	body.mobileResponsive .filterGroup .filters li > div {
		width: 100%;
		flex: 1 1 100%;
	}
	/* radioTab 고정폭(94px) 해제 → 내용폭으로, 좁으면 줄바꿈 */
	body.mobileResponsive .filterGroup .filters li:not(:first-child) .radioTab {
		width: auto;
		padding: 0 12px;
	}

	/* 기간 선택: 라디오 + 날짜범위가 한 줄에 안 들어가면 줄바꿈 */
	body.mobileResponsive .filterGroup .choose {
		width: 100%;
	}
	body.mobileResponsive .dateRange {
		flex-wrap: wrap;
	}

	/* 검색 버튼 풀폭 */
	body.mobileResponsive #contents > section .buttons .search {
		width: 100%;
	}

	/* 결과 테이블(.grid > table, min-width:1500px)은 이미 가로 스크롤. 터치 스크롤만 보강 */
	body.mobileResponsive .results .grid,
	body.mobileResponsive .gridContainer .grid {
		/* .grid 는 .gridContainer(flex)의 자식이라 min-width:auto 로 1500px 표만큼 부풀어
		   페이지를 넘친다. min-width:0 으로 막아 .grid 자체 overflow:auto 가 스크롤하게 한다. */
		min-width: 0;
		max-width: 100%;
		-webkit-overflow-scrolling: touch;
	}

	/* 세로 고정 헤더의 top 오프셋을 모바일 헤더 높이에 맞춰 55px 로 */
	body.mobileResponsive *:not(.popup) .grid.fixedTop thead {
		top: 55px;
	}
	/* 모바일: 좌우 스크롤 시 좌측 열(순위/키워드) 틀고정 제거 → 표 전체가 함께 스크롤.
	   (ui.js 가 붙인 .sticky 의 position:sticky 를 무력화) */
	body.mobileResponsive .grid thead th.sticky,
	body.mobileResponsive .grid tbody th.sticky {
		position: static !important;
		left: auto !important;
	}

	/* 도움말 툴팁 박스(inline width:490px 등)가 화면을 넘지 않도록 */
	body.mobileResponsive .filterGroup .tooltip > div {
		width: auto !important;
		max-width: 86vw;
		left: 0 !important;
	}

	/* ----- 팝업: 모바일 화면에 맞춤 ----- */
	body.mobileResponsive .popup {
		min-width: 0;
		padding: 16px;
	}
	body.mobileResponsive .popup > section,
	body.mobileResponsive .popup > section.type1,
	body.mobileResponsive .popup > section.type2,
	body.mobileResponsive .popup > section.type3,
	body.mobileResponsive .popup > section.type4,
	body.mobileResponsive .popup > section.alert {
		width: 100% !important;
		max-width: 100%;
		max-height: 88vh;
		overflow-y: auto;
		padding: 20px;
	}

	/* ===========================================================
	 * /tracking : 추적상품 카드(.listProducts.case) — 로그인 화면
	 * thumb / stat / utilities 가 모두 absolute(고정 right 오프셋)라
	 * 좁은 화면에서 서로 겹친다(찌그러짐). 썸네일만 좌측에 작게 유지하고
	 * 제목·상점·마지막분석은 세로 흐름으로 재배치한다.
	 * (확장 의존 버튼 .btnRequestTracking 은 tracking.jsp 에서 숨김)
	 * =========================================================== */
	/* .analysis 는 데스크탑 #contents(패딩 30px) 기준 풀블리드(margin:0 -30px; padding:0 30px)라
	   모바일(#contents 패딩 16px)에선 양쪽 14px 씩 삐져나와 가로 스크롤을 만든다. → 0 으로 */
	body.mobileResponsive .analysis {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}
	body.mobileResponsive .listProducts.case > li {
		padding: 14px 14px 14px 90px;
		min-height: 0;
	}
	/* 썸네일: 좌측 상단에 작게 고정 */
	body.mobileResponsive .listProducts.case > li .thumb {
		width: 64px;
		height: 64px;
		top: 14px;
		bottom: auto;
		left: 14px;
	}
	/* 클릭영역 <a> 의 음수마진/패딩을 축소된 썸네일 폭에 맞추고, 우측은 더보기 버튼 공간 확보.
	   align-items:stretch 로 자식(.con 등)을 카드 폭에 맞춰 → 메모 input(800px) 때문에
	   .con 이 가로로 늘어나 화면을 넘기던 문제 해결 */
	body.mobileResponsive .listProducts.case > li > a {
		margin: -14px -14px -14px -90px;
		padding: 14px 52px 14px 90px;
		min-height: 64px;
		gap: 4px;
		align-items: stretch;
	}
	body.mobileResponsive .listProducts.case > li > a .con {
		min-width: 0;
	}
	/* 제목 인라인 고정폭(style="width:600px") 해제 + 긴 상품명은 2줄로 제한(말줄임) */
	body.mobileResponsive .listProducts.case > li .con > strong,
	body.mobileResponsive .listProducts.case > li strong {
		width: auto !important;
		max-width: 100%;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		word-break: break-word;
		line-height: 1.35;
	}
	/* 마지막 분석(stat): absolute(right:270px) → 정상 흐름으로 내려 con 아래 표시 */
	body.mobileResponsive .listProducts.case > li .stat {
		position: static !important;
		align-items: flex-start;
		margin-top: 6px;
	}
	/* 순위추적 카드의 순위(.rank): absolute(right:195px)라 .con 과 겹침 → 정상 흐름으로 */
	body.mobileResponsive .listProducts.case > li .rank {
		position: static !important;
		height: auto;
		margin-top: 8px;
	}
	body.mobileResponsive .listProducts.case > li .rank span,
	body.mobileResponsive .listProducts.case > li .rank > p {
		text-align: left;
	}
	/* 액션(utilities): 우상단에 작게 고정 */
	body.mobileResponsive .listProducts.case > li .utilities {
		top: 12px;
		bottom: auto;
		right: 12px;
	}
	/* 더보기 드롭다운(functionLayer)이 화면 밖으로 나가지 않도록 */
	body.mobileResponsive .listProducts.case > li .functionLayer {
		right: 0 !important;
		top: 36px !important;
	}

	/* ===========================================================
	 * 분석 상세 (trackingDetail / *Coupang / *Place)
	 * header.analysDetailHeader + .productOverview + .tableOverview 구성.
	 * (확장 의존 버튼 .btnRequestTracking/.btnSetReview/.btnKeyword 는 각 JSP 에서 숨김)
	 * =========================================================== */
	/* 상세 헤더: '이전' 버튼이 absolute(top:40)라 최종분석시간(p)과 겹친다.
	   버튼을 정상 흐름으로 바꾸고 상단 패딩 제거. (.rankingDetailHeader = 순위 상세도 동일 그룹) */
	body.mobileResponsive .analysDetailHeader,
	body.mobileResponsive .rankingDetailHeader {
		max-width: 100%;
		padding-top: 0;
	}
	body.mobileResponsive .analysDetailHeader button.back,
	body.mobileResponsive .rankingDetailHeader button.back {
		position: relative; /* static 이면 ::before 화살표가 헤더 기준으로 튀므로 relative 유지 */
		top: auto;
		left: auto;
		margin-bottom: 6px;
	}
	/* 순위 상세 헤더: 이전/순위유형/주소/최종분석시간을 한 줄에 욱여넣어 찌그러짐 → 각각 줄로(세로) */
	body.mobileResponsive .rankingDetailHeader {
		flex-direction: column;
		align-items: stretch;
	}
	/* 이전 버튼: stretch 로 풀폭이 되면 text-align:center 라 '이전'이 중앙으로 감 →
	   내용폭으로 줄여 화살표 바로 옆에 붙임 */
	body.mobileResponsive .rankingDetailHeader button.back {
		align-self: flex-start;
	}
	/* 순위유형+주소 줄: input width:345px 고정 → 유동화, 줄바꿈 허용 */
	body.mobileResponsive .rankingDetailHeader > div {
		flex: 0 0 auto;
		flex-wrap: wrap;
	}
	body.mobileResponsive .rankingDetailHeader > div input {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
		max-width: 100%;
	}
	/* 상품 개요: 썸네일이 absolute(좌측 160px 거터)라 좁은 화면에서 겹친다.
	   static 으로 흐르게 하고 맨 위(order:-1)로 보낸 뒤 거터 패딩 제거. */
	body.mobileResponsive .productOverview {
		width: 100%;
		padding: 16px 14px;
		gap: 6px 10px;
	}
	body.mobileResponsive .productOverview .thumb {
		position: static;
		order: -1;
		width: 90px;
		height: 90px;
	}
	body.mobileResponsive .productOverview > strong {
		width: 100%;
		word-break: break-word;
	}
	/* 연관 태그: margin-left:-140px / width:calc(100%+140px) 가 썸네일 거터(140px)를 메우려는
	   트릭인데, 모바일엔 거터가 없어 왼쪽으로 140px 화면 밖으로 나간다 → 정상화. */
	body.mobileResponsive .productOverview .tags {
		margin-left: 0;
		width: 100%;
	}
	/* AI 리뷰 분석 영역: padding 30px 47px 가 커서 차트가 과하게 인셋된다 → 축소 + 차트 세로 스택 */
	body.mobileResponsive .reviewAnalysis {
		flex-wrap: wrap;
		padding: 16px 12px;
	}
	body.mobileResponsive .reviewAnalysis > section {
		flex: 1 1 100%;
	}
	/* 분석기록/AI리뷰 표(.tableOverview): 전역 table-layout:fixed + 다칼럼이라 좁으면 찌그러짐.
	   가로 스크롤 블록으로 만들고, 셀 좌우 패딩(15px/.left 30px)을 축소. (3개 상세 공통) */
	body.mobileResponsive .tableOverview {
		display: block;
		width: 100%;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	body.mobileResponsive .tableOverview th,
	body.mobileResponsive .tableOverview td {
		padding-left: 8px;
		padding-right: 8px;
	}
	body.mobileResponsive .tableOverview th.left,
	body.mobileResponsive .tableOverview td.left {
		padding-left: 12px;
	}
	/* 순위 상세 표(div.tableOverview): 키워드(첫칼럼) + 순위(.rank)가 둘 다 좌측 고정이라
	   합쳐 ~310px → 모바일에선 스크롤해도 값이 안 보임.
	   → 키워드만 좁게 고정(84px, 줄바꿈), 순위 칼럼은 고정 해제해 함께 스크롤되게. */
	body.mobileResponsive div.tableOverview col:first-child {
		width: 110px !important;
	}
	body.mobileResponsive div.tableOverview th:first-child,
	body.mobileResponsive div.tableOverview td:first-child {
		width: 110px;
		max-width: 110px;
	}
	body.mobileResponsive div.tableOverview th.left,
	body.mobileResponsive div.tableOverview td.left {
		padding-left: 10px;
		white-space: normal;
		word-break: break-word;
	}
	body.mobileResponsive div.tableOverview th.rank,
	body.mobileResponsive div.tableOverview td.rank {
		position: static;
		left: auto;
		width: auto;
	}
	/* 엑셀 다운로드 등 aside 버튼: 글자가 길어 2줄로 떨어져 찌그러지는 것 방지 */
	body.mobileResponsive .aside.excel,
	body.mobileResponsive .btnExcel {
		white-space: nowrap;
	}

	/* ===========================================================
	 * 광고 경쟁분석 (strategy) — PC/모바일 비교 카드(.listProducts.compare)
	 * (검색/갱신은 strategy.jsp 에서 isMobile 게이트로 숨김)
	 * =========================================================== */
	/* li 가 직접 컨테이너(<a> 없음): 썸네일/월예상광고비(absolute) 겹침 → 세로 스택 */
	body.mobileResponsive .listProducts.compare > li {
		flex-direction: column;
		align-items: stretch;
		padding: 14px;
	}
	body.mobileResponsive .listProducts.compare > li .thumb {
		position: static;
		order: -1;
		width: 72px;
		height: 72px;
		top: auto;
		left: auto;
		background-size: cover;
		background-position: center;
	}
	/* 월 예상광고비(> p): absolute(우측 200px 거터) → 흐름, 전체폭 */
	body.mobileResponsive .listProducts.compare > li > p {
		position: static;
		width: 100%;
		text-align: left;
		margin-top: 6px;
	}
	/* 상점정보 dl(상점명/등록일/구매건수/리뷰/찜/가격): 라벨|값 한 쌍씩 줄로 */
	body.mobileResponsive .listProducts.compare > li dl.type2 {
		flex: none;
		flex-flow: row wrap;
		width: 100%;
		gap: 4px 6px;
	}
	body.mobileResponsive .listProducts.compare > li dl.type2 dt {
		flex: 0 0 56px;
	}
	body.mobileResponsive .listProducts.compare > li dl.type2 dd {
		flex: 1 1 calc(100% - 70px);
		min-width: 0;
		margin-right: 0 !important;
		word-break: break-word;
	}
	body.mobileResponsive .listProducts.compare > li dl.type2 dd::after {
		display: none !important;
	}

	/* 예산수립(estimate) 결과 지표(.analysisContent > li.type1): 4개 가로(min-width:25%) → 2개씩 */
	body.mobileResponsive .analysisContent > li.type1 {
		min-width: 50%;
	}

	/* 광고 경쟁분석 상세(strategyHistory): #contents 없이 .analysis 가 .tabMenu 바로 뒤 최상위라
	   #contents 의 좌우 패딩(16px)을 못 받아 내용이 화면 가장자리에 붙음 → 직접 좌우 패딩 부여.
	   (strategy 등은 #contents 안에 중첩이라 .tabMenu+.analysis 로는 매칭되지 않음) */
	body.mobileResponsive .tabMenu + .analysis {
		padding-left: 16px;
		padding-right: 16px;
	}
	/* 제목 옆 분석시간(.date)을 한 줄 내림 */
	body.mobileResponsive .tabMenu + .analysis > .title .date {
		display: block;
		margin-top: 2px;
	}
	/* 모바일: 입찰관리(/bid) 미지원 → 광고 탭메뉴에서 숨김 */
	body.mobileResponsive .tabMenu a[href="/bid"] {
		display: none;
	}

	/* ===========================================================
	 * 키워드 분석 (keyword) — 5개 탭
	 * =========================================================== */
	/* 탭바(.tabType2): 5탭 각 200px(총 1000px) nowrap → 가로 스크롤 + 탭 축소 */
	body.mobileResponsive .tabType2 {
		max-width: 100%;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin-top: 20px;
	}
	body.mobileResponsive .tabType2 > * {
		flex: 0 0 auto;
		width: auto;
		height: 46px;
		padding: 0 12px;
		font-size: 13px;
		white-space: nowrap;
	}
	body.mobileResponsive .tabType2 .btnKeyword {
		white-space: nowrap;
	}
	/* 탭 안의 도움말 툴팁은 모바일에선 숨겨 탭을 좁게 (도움말은 부가기능) */
	body.mobileResponsive .tabType2 .tooltip {
		display: none;
	}
	/* 본문 도움말 툴팁(hover 팝업, inline width:320~655px)이 화면을 넘지 않게 */
	body.mobileResponsive .analysis .tooltip > div,
	body.mobileResponsive .analysisHeader .tooltip > div,
	body.mobileResponsive .analysisDetail .tooltip > div {
		width: auto !important;
		max-width: 86vw;
		left: 0 !important;
	}
	/* 종합분석 헤더: 썸네일 거터(padding-left:240px)+썸네일 200px → 축소 */
	body.mobileResponsive .analysisHeader {
		max-width: 100%;
		margin-top: 16px;
		padding-left: 96px;
	}
	body.mobileResponsive .analysisHeader .thumb {
		width: 80px;
		height: 80px;
	}
	/* 섹션 헤더(제목+툴팁+버튼) nowrap → 줄바꿈 */
	body.mobileResponsive .analysis > header {
		flex-wrap: wrap;
		gap: 6px 8px;
	}
	/* 차트 컨트롤 행(li.type3, inline width:430px nowrap) → 풀폭+줄바꿈 */
	body.mobileResponsive .analysisContent > li.type3 {
		flex-wrap: wrap;
		width: 100% !important;
	}
	/* 데이터 표(.grid)가 flex 자식으로 부풀지 않게 (내부 overflow:auto 스크롤) */
	body.mobileResponsive .keywordSection .grid {
		min-width: 0;
		max-width: 100%;
	}
	/* 종합분석 헤더: 썸네일 거터(240px) 제거 → 썸네일을 흐름 배치, 본문 풀폭 */
	body.mobileResponsive .analysisHeader {
		padding-left: 0;
	}
	/* 상품 이미지: 화면 폭 꽉 채우고 가운데 정렬 */
	body.mobileResponsive .analysisHeader .thumb {
		position: static;
		width: 100%;
		height: 240px;
		margin: 0 auto 12px;
		background-size: contain;
		background-position: center;
	}
	/* 도매/쇼핑/SNS 로고: #contents img{height:auto} 가 height:20px 을 덮어써 커졌음 → 복구 */
	body.mobileResponsive .analysisHeader > dl dd p img {
		height: 20px !important;
		width: auto !important;
		max-width: none !important;
	}
	/* 지표 리스트(.analysisContent): 2열 간격 + 셀 패딩으로 여유 */
	body.mobileResponsive .analysisContent {
		gap: 10px 12px;
	}
	body.mobileResponsive .analysisContent > li.type1 {
		min-width: calc(50% - 6px);
		padding: 10px 8px;
	}
	/* 섹션 버튼(엑셀/AI복사): 줄바꿈 허용 + 버튼 글자 nowrap */
	body.mobileResponsive .analysis > header .buttons {
		flex-wrap: wrap;
	}
	body.mobileResponsive .aside.excel,
	body.mobileResponsive .aside.btnAiCopy,
	body.mobileResponsive .btnAiCopy {
		white-space: nowrap;
	}
	/* 상위노출 상품 리스트(.keywordSection .listProducts, plain): 각 상품을 세로 카드로 */
	body.mobileResponsive .keywordSection .listProducts > li {
		flex-direction: column;
		align-items: flex-start;   /* stretch → flex-start: 뱃지(<b>)가 줄 전체로 늘어나지 않게(글자에만 배경) */
		padding: 16px 14px 14px;
	}
	/* 상품 뱃지(가격비교/핫딜/스마트스토어/윈도/자사몰): 글자 폭만 배경, 상품명 위로 */
	body.mobileResponsive .keywordSection .listProducts > li > b {
		order: -1;
		align-self: flex-start;
		width: auto;
	}
	/* 스마트스토어(type3): 녹색 표기 */
	body.mobileResponsive .keywordSection .listProducts > li > b.type3 {
		background: #03C75A;
	}
	body.mobileResponsive .keywordSection .listProducts > li .thumb {
		position: static;
		order: -3;
		width: 80px;
		height: 80px;
		top: auto;
		left: auto;
		background-size: cover;
		background-position: center;
	}
	body.mobileResponsive .keywordSection .listProducts > li > strong,
	body.mobileResponsive .keywordSection .listProducts > li > span {
		width: 100% !important;   /* 쿠팡 strong 인라인 width:830px 오버플로 해제 */
		word-break: break-word;
	}
	/* 카테고리(span)는 뱃지 위에 유지 */
	body.mobileResponsive .keywordSection .listProducts > li > span {
		order: -2;
	}
	/* 쿠팡 카드 키워드 버튼(.utilities): 데스크탑 absolute(right:20px) → 정상 흐름(맨 아래), 우측정렬 */
	body.mobileResponsive .keywordSection .listProducts > li .utilities {
		position: static !important;
		top: auto;
		bottom: auto;
		right: auto;
		margin: 8px 0 0;
		width: 100%;
		justify-content: flex-end;
	}
	/* 분석 헤더: 정렬버튼 한 줄 / 엑셀·AI복사 한 줄(우측정렬) 로 줄바꿈 */
	body.mobileResponsive .keywordSection .analysis > header {
		flex-wrap: wrap;
	}
	/* 정렬버튼 묶음(.sortButtons): 분석 헤더·키워드 팝업 공통 — 단독 한 줄 */
	body.mobileResponsive .sortButtons {
		display: flex;
		flex: 1 1 100%;
		flex-wrap: wrap;
		gap: 5px;
	}
	body.mobileResponsive .keywordSection .analysis > header .buttons {
		flex: 1 1 100%;       /* 엑셀·AI복사 단독 한 줄 */
		justify-content: flex-end;   /* 우측정렬 */
	}

	/* ===== 유입 키워드 팝업(#keywordListPopup) ===== */
	/* 엑셀·AI복사 버튼: 데스크탑 인라인 margin-top:-44px(헤더로 끌어올림) 해제 → 다음 줄 우측정렬 */
	body.mobileResponsive #keywordListPopup .buttons.caseRight {
		margin-top: 8px !important;
		flex-wrap: wrap;
		justify-content: flex-end;
	}
	/* 키워드 표: 컬럼 고정폭이 좁은 폭에 눌려 텍스트가 겹침 → 자연폭 유지 + 가로 스크롤 */
	body.mobileResponsive #keywordListPopup .grid {
		overflow-x: auto;
	}
	body.mobileResponsive #keywordListPopup .grid table,
	body.mobileResponsive #keywordListPopup table.grid {
		width: auto;
		min-width: 100%;
		white-space: nowrap;
	}
	/* 상점명/가격/등록일 등 라벨-값: 2열 grid 로 칼정렬 + 균일한 줄간격 */
	body.mobileResponsive .keywordSection .listProducts > li dl {
		display: grid;
		grid-template-columns: 90px 1fr;   /* 라벨열 고정폭(긴 라벨 "1개월 판매금액"까지 한 줄), 값열 나머지 */
		align-items: baseline;
		gap: 6px 8px;                      /* 행간 6px 균일 */
		width: 100%;
		margin: 0;                         /* 브라우저 기본 dl 여백 제거 → 그룹 간 간격 일정 */
		padding-right: 0;
	}
	body.mobileResponsive .keywordSection .listProducts > li dl dt {
		margin: 0;
		white-space: nowrap;
	}
	body.mobileResponsive .keywordSection .listProducts > li dl dd {
		min-width: 0;
		margin: 0 !important;
		word-break: break-word;
	}
	body.mobileResponsive .keywordSection .listProducts > li dl dd::after,
	body.mobileResponsive .keywordSection .listProducts > li dl dt::after {
		display: none !important;
	}
	/* 차트 섹션들: 데스크탑 width:333px 고정 → 모바일 풀폭 스택 */
	body.mobileResponsive .analysisContent > li.graphs > section:not(.full) {
		width: 100%;
	}
	/* 트렌드 차트(Chart.js)만 block + 고정높이 → maintainAspectRatio:false 와 함께 정상 렌더.
	   (도넛/바 차트의 .graph 는 건드리지 않아 flex 중앙정렬 유지) */
	body.mobileResponsive .keyword_chart section.full .graph {
		display: block;
		width: 100%;
		height: 240px;
	}
	/* 일자 행: 라벨/셀렉트는 윗줄, 날짜범위(from-to)는 자기 줄 전체 차지 → 화면 밖으로 안 나가게 */
	body.mobileResponsive .keyword_chart li.type3 > strong {
		flex: 0 0 100%;
		margin-bottom: 4px;
	}
	body.mobileResponsive .keyword_chart .dateRange {
		flex: 1 1 100%;      /* 자기 줄 전체 → 셀렉트 아래로 내려옴 */
		flex-wrap: nowrap;   /* from - to 는 한 줄 유지 */
		min-width: 0;
		gap: 6px;
	}
	body.mobileResponsive .keyword_chart .dateRange .textfield {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		padding-left: 8px;
		padding-right: 22px;   /* 오른쪽 달력 아이콘 공간 확보 */
		font-size: 12px;       /* 날짜 텍스트 짤림 방지 */
		text-align: left;      /* 왼쪽정렬 → 아이콘 안 가림 */
	}
	/* 라디오/체크박스 줄맞춤: 한 줄에 3개씩 (기본 .radio 마진 제거 후 gap 사용) */
	body.mobileResponsive .keyword_chart li.type3 {
		align-items: flex-start;
		gap: 6px 8px;
	}
	body.mobileResponsive .keyword_chart li.type3 .radio {
		flex: 0 0 calc(33.333% - 8px);
		min-width: 0;
		margin: 0;
	}

	/* ===========================================================
	 * 상점명 순위추적 상세 (sRankHistory / sRankHistoryNo)
	 * =========================================================== */
	/* 상점명/키워드/상품수/메모 요약(.detailKeyword): flex-nowrap + dd 80px 패딩 → 한 쌍씩 줄로 */
	body.mobileResponsive .detailKeyword {
		flex-wrap: wrap;
		gap: 4px 8px;
		max-width: 100%;
		padding: 16px 0;
	}
	body.mobileResponsive .detailKeyword dt {
		flex: 0 0 64px;
	}
	body.mobileResponsive .detailKeyword dd {
		flex: 1 1 calc(100% - 72px);
		min-width: 0;
		word-break: break-word;
	}
	body.mobileResponsive .detailKeyword dd:not(:last-of-type) {
		padding-right: 0;
		margin-right: 0;
		border-right: none;
	}
	/* 상품 목록 카드(.analysisDetail 안, <a> 없이 li 가 직접 컨테이너): 세로 스택으로 풀기 */
	body.mobileResponsive .analysisDetail .listProducts.case > li {
		flex-direction: column;
		align-items: stretch;
		padding: 14px;
	}
	body.mobileResponsive .analysisDetail .listProducts.case > li .thumb {
		position: static;
		order: -1;
		width: 72px;
		height: 72px;
		top: auto;
		left: auto;
		background-size: cover;
		background-position: center;
	}
	body.mobileResponsive .analysisDetail .listProducts.case > li .con {
		width: 100%;
		min-width: 0;
	}
	body.mobileResponsive .analysisDetail .listProducts.case > li .rank {
		order: 1;
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		gap: 4px 8px;
		width: 100%;
		height: auto;
	}
	body.mobileResponsive .analysisDetail .listProducts.case > li .rank > span {
		width: auto;
		text-align: left;
	}
	body.mobileResponsive .analysisDetail .listProducts.case > li dl.type2 {
		flex: none;
		flex-flow: row wrap;
		width: 100%;
		gap: 4px 6px;
	}
	body.mobileResponsive .analysisDetail .listProducts.case > li dl.type2 dt {
		flex: 0 0 56px;
	}
	body.mobileResponsive .analysisDetail .listProducts.case > li dl.type2 dd {
		flex: 1 1 calc(100% - 70px);
		min-width: 0;
		margin-right: 0 !important;
		word-break: break-word;
	}
	body.mobileResponsive .analysisDetail .listProducts.case > li dl.type2 dd::after {
		display: none !important;
	}
	/* 추적 기록 표(sRankHistoryNo, .analysis > table.grid.table): 가로 스크롤 */
	body.mobileResponsive section.analysis > table.grid.table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	body.mobileResponsive section.analysis > table.grid.table .functionLayer {
		right: 0 !important;
	}

	/* 평가 점수(.scores .items ul / ul.scores): 데스크탑은 6칸 한 줄(flex:1) →
	   모바일에선 한 줄에 다 욱여넣어 찌그러진다. 3칸씩 줄바꿈으로 풀어준다. */
	body.mobileResponsive .analysisDetail .scores .items ul,
	body.mobileResponsive .analysisDetail ul.scores {
		flex-wrap: wrap;
	}
	body.mobileResponsive .analysisDetail .scores .items ul > li,
	body.mobileResponsive .analysisDetail ul.scores > li {
		flex: 0 0 33.333%;
		max-width: 33.333%;
		box-sizing: border-box;
		padding: 10px 4px;
	}
	/* 줄바꿈된 격자에 맞춰 구분선 정리: 각 행 첫 칸은 좌측선 제거, 2번째 행부터 상단선 */
	body.mobileResponsive .analysisDetail .scores .items ul > li:nth-child(3n+1),
	body.mobileResponsive .analysisDetail ul.scores > li:nth-child(3n+1) {
		border-left: 0;
	}
	body.mobileResponsive .analysisDetail .scores .items ul > li:nth-child(n+4),
	body.mobileResponsive .analysisDetail ul.scores > li:nth-child(n+4) {
		border-top: 1px solid #EAEAEA;
	}
	/* 점수(점) + n/5 가 좁은 칸에서 겹치지 않게 세로로 */
	body.mobileResponsive .analysisDetail .scores .items ul > li > p,
	body.mobileResponsive .analysisDetail ul.scores > li > p {
		flex-direction: column;
		align-items: center;
		gap: 2px;
	}

	/* ===========================================================
	 * /clip 추천영상
	 * .vodList(2열, li=530px) → 1열 풀폭, 유튜브 iframe(560×315 고정) → 반응형 16:9
	 * =========================================================== */
	body.mobileResponsive .vodList {
		max-width: 100%;
		gap: 24px;
	}
	body.mobileResponsive .vodList > li {
		width: 100%;
	}
	/* iframe 을 감싼 <a>(클래스 없음, .channel 아님)를 16:9 반응형 박스로 */
	body.mobileResponsive .vodList > li > a:not(.channel) {
		display: block;
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 56.25%; /* 16:9 */
		overflow: hidden;
		border-radius: 15px;
	}
	body.mobileResponsive .vodList > li > a:not(.channel) iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	/* 페이징(공용): flex-nowrap + 큰 gap(40/20px)이라 페이지 번호가 많으면 가로로 넘친다.
	   → 줄바꿈 허용 + gap 축소 */
	body.mobileResponsive .pagination:not(.swiper-pagination-clickable) {
		flex-wrap: wrap;
		gap: 8px 12px;
		max-width: 100%;
	}
	body.mobileResponsive .pagination:not(.swiper-pagination-clickable) > div {
		flex-wrap: wrap;
		gap: 8px 10px;
	}

	/* ===========================================================
	 * 로그인/회원가입 (single 레이아웃)
	 * section.login/join 이 width:400px 고정이라 좁은 폰(360~390px)에서 가로 넘침
	 * =========================================================== */
	body.mobileResponsive section.login,
	body.mobileResponsive section.join {
		width: 100%;
		max-width: 400px;
		padding: 24px 16px;
	}
	/* 아이디/비번 찾기 팝업 입력칸이 width:432px 고정이라 좁은 화면을 넘침 → 풀폭 */
	body.mobileResponsive .popup .find .textfield {
		width: 100%;
	}
	/* 인증번호 입력 행(input flex:1 + 버튼)의 input 이 안 줄어드는 것 방지 */
	body.mobileResponsive section.join .certify input {
		min-width: 0;
	}

	/* ===========================================================
	 * /optimize 최적화 목록
	 * .analysis > table.grid.column (키워드 | 현재단계+버튼)
	 * (최적화 시작 컨트롤은 optimize.jsp 에서 isMobile 게이트로 숨김)
	 * =========================================================== */
	/* 셀 위아래 패딩 축소 (데스크탑 28px → 12px) */
	body.mobileResponsive section.analysis table.grid.column tbody td {
		padding-top: 12px;
		padding-bottom: 12px;
	}
	/* 현재단계 셀: 단계 버튼 + 더보기를 한 줄 유지(더보기가 아래로 안 떨어지게) */
	body.mobileResponsive section.analysis table.grid.column td .buttons {
		flex-wrap: nowrap;
		justify-content: flex-end;
		align-items: center;
		gap: 6px;
	}
	/* 단계 버튼은 줄어들 수 있게(min-width:0) + 텍스트만 셀 안에서 줄바꿈 → 더보기는 옆에 고정 */
	body.mobileResponsive section.analysis table.grid.column .btnRequestStrategy {
		flex: 1 1 auto;
		min-width: 0;
	}
	body.mobileResponsive section.analysis table.grid.column .btnRequestStrategy,
	body.mobileResponsive section.analysis table.grid.column .btnRequestStrategy span {
		white-space: normal;
		text-align: right;
	}
	body.mobileResponsive section.analysis table.grid.column td .buttons .more {
		flex: 0 0 auto;
	}
	/* 더보기 드롭다운(inline right:-40px)이 화면 밖으로 나가지 않게 */
	body.mobileResponsive section.analysis table.grid td .functionLayer {
		right: 0 !important;
	}

	/* ===========================================================
	 * 순위 페이지 (rank 네이버일반 / fast 빠른 / coupang 쿠팡)
	 * (추적 추가 폼은 rank/coupang JSP 에서 isMobile 게이트로 숨김, fast 는 유지)
	 * =========================================================== */
	/* 상단 탭바: 데스크탑 헤더(68px) 기준 sticky → 모바일 헤더 높이에 맞춰 55px, 크기 축소 */
	body.mobileResponsive .tabMenu {
		top: 55px;
		gap: 0 28px;
		height: 50px;
		font-size: 16px;
	}
	body.mobileResponsive .tabMenu a {
		line-height: 47px;
	}
	/* 랭킹 헤더: margin:18px -30px (풀블리드)가 모바일 패딩(16px)과 안 맞아 넘침 → 좌우 0 */
	body.mobileResponsive .rankingHeader {
		margin-left: 0;
		margin-right: 0;
	}
	/* 추적 입력칸(flex:1)이 내용만큼 안 줄어 버튼을 밀어내는 것 방지 (fast 유지 케이스) */
	body.mobileResponsive .rankingHeader .analysisWord {
		flex-wrap: wrap;
	}
	body.mobileResponsive .rankingHeader .analysisWord input.word,
	body.mobileResponsive .rankingHeader .analysisWord input.key {
		min-width: 0;
	}
	/* 메모 입력칸: width:800px 고정 → 컨테이너 폭에 맞춰 줄어들게 (화면 밖 넘침 방지) */
	body.mobileResponsive .memoBox {
		width: 100%;
	}
	/* "메모" 라벨이 눌려 글자가 세로로 떨어지는 것 방지 */
	body.mobileResponsive .memoBox > span {
		flex: 0 0 auto;
		white-space: nowrap;
	}
	body.mobileResponsive .memoBox .memoInput {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
		max-width: 100%;
	}
	/* 네이버 일반: 그룹 패널(좌 300px) + 목록(우) 좌우분할 → 세로 스택(그룹 위 / 목록 아래) */
	body.mobileResponsive .myAd {
		flex-direction: column;
		min-height: 0;
	}
	body.mobileResponsive .myAd > header {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #EAEAEA;
		padding: 16px 0;
	}
	body.mobileResponsive .myAd > ul {
		width: 100%;
	}
	/* ===== 네이버 일반 순위추적 카드: 복합 레이아웃을 통째로 단순 세로 스택으로 재구성 =====
	   (썸네일/순위/액션이 모두 absolute 라 좁은 화면에서 겹치고 찌그러짐 → 전부 흐름으로) */
	body.mobileResponsive .myAd .listProducts.case > li {
		padding: 14px;
	}
	/* 클릭영역: 썸네일 거터(음수마진/좌패딩) 제거, 세로 스택 */
	body.mobileResponsive .myAd .listProducts.case > li > a {
		margin: 0;
		padding: 0;
		align-items: stretch;
		gap: 6px;
		min-height: 0;
	}
	/* 썸네일: absolute → 정상 흐름, 맨 위 작은 사각형 */
	body.mobileResponsive .myAd .listProducts.case > li .thumb {
		position: static;
		order: -1;
		width: 72px;
		height: 72px;
		top: auto;
		left: auto;
		background-size: cover;
		background-position: center;
	}
	/* 순위: absolute(right:195px) → 흐름. "현재 순위 N위"를 한 줄 가로로 (숫자가 오른쪽 끝으로
	   밀려 돋보기/더보기를 떨어뜨리던 문제 해결) */
	body.mobileResponsive .myAd .listProducts.case > li .rank {
		position: static !important;
		order: 1;
		width: 100%;
		height: auto;
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		gap: 4px 8px;
		margin-top: 6px;
	}
	body.mobileResponsive .myAd .listProducts.case > li .rank > span {
		width: auto;
		text-align: left;
	}
	body.mobileResponsive .myAd .listProducts.case > li .rank > p {
		margin-top: 0;
	}
	/* 미리보기(돋보기): absolute → 흐름, 순위 뒤에 인라인 */
	body.mobileResponsive .myAd .listProducts.case > li .rank .preview {
		position: static;
		order: 3;
	}
	/* 액션(더보기): 우상단에 작게 고정 (혼자 한 줄 차지하지 않게) */
	body.mobileResponsive .myAd .listProducts.case > li .utilities {
		top: 12px;
		right: 12px;
		bottom: auto;
		width: auto;
		margin-top: 0;
		justify-content: flex-end;
	}
	/* 라벨+추적시간 줄바꿈 허용 */
	body.mobileResponsive .myAd .listProducts.case > li .con > p {
		flex-wrap: wrap;
	}
	/* 정보 dl(키워드/상품수/몰이름 등): 라벨|값 한 쌍씩 한 줄로, 구분점 제거 */
	body.mobileResponsive .myAd .listProducts.case > li dl.type2 {
		flex: none;
		flex-flow: row wrap;
		width: 100%;
		gap: 4px 6px;
	}
	body.mobileResponsive .myAd .listProducts.case > li dl.type2 dt {
		flex: 0 0 56px;
	}
	/* dd basis 를 줄 전체로 줘야 한 쌍(dt+dd)씩 줄바꿈됨 (basis:0 이면 다 한 줄에 몰림) */
	body.mobileResponsive .myAd .listProducts.case > li dl.type2 dd {
		flex: 1 1 calc(100% - 70px);
		min-width: 0;
		margin-right: 0 !important;
		word-break: break-word;
	}
	body.mobileResponsive .myAd .listProducts.case > li dl.type2 dd::after {
		display: none !important;
	}

	/* ===========================================================
	 * /home (랜딩/대시보드)
	 *  · home 은 #contents 래퍼가 없어 좌우 패딩이 없다 → 섹션마다 직접 패딩.
	 *  · 내부 가로(flex-row) 묶음이 모바일에서 부분폭(≈60%)으로 찌그러지던 것 세로화.
	 *  (.analysisHeader / .analysisContent / .tableOverview / 도넛(.scores) 은
	 *   기존 전역 규칙도 함께 적용됨)
	 * =========================================================== */

	/* 1) 히어로: 검색 박스 제거(모바일), 패딩/제목 정리 */
	body.mobileResponsive .mainIntro { padding: 24px 16px; }
	body.mobileResponsive .mainIntro h2 { font-size: 20px; line-height: 1.35; }
	body.mobileResponsive .mainIntro > div { display: none; }

	/* 2) 홈 섹션 공통: 풀폭 + 좌우 패딩(데스크탑 30~120px 과대 패딩 축소) */
	body.mobileResponsive .articles,
	body.mobileResponsive .mainKeyword,
	body.mobileResponsive .mainMarketing,
	body.mobileResponsive .mainStrategy {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding-left: 16px;
		padding-right: 16px;
	}
	body.mobileResponsive .articles { padding-top: 28px; }
	body.mobileResponsive .articles + .articles { padding-bottom: 40px; }
	body.mobileResponsive .mainKeyword { padding-top: 36px; }
	body.mobileResponsive .mainMarketing { padding-top: 32px; padding-bottom: 32px; }

	/* 3) 공지/문의 버튼: 2열 그리드로 균일 크기 정렬(삐뚤거림 제거).
	   header 가 flex 라 h2 가 내용폭만큼만 잡혀 넓은 폰에서 우측이 비던 것 → flex:1 로 풀폭 강제 */
	body.mobileResponsive .articles > header h2 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}
	body.mobileResponsive .articles > header h2 > a {
		width: 100%;
		height: 38px;
		margin: 0 !important;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		padding: 0 10px;
		box-sizing: border-box;
		font-size: 13px;
		white-space: nowrap;
	}
	body.mobileResponsive .articles > header h2 > a svg {
		width: 16px;
		height: 16px;
		flex: 0 0 auto;
	}

	/* 4) 추천 영상: 1개만, 풀폭. li 는 데스크탑처럼 row-wrap 유지(썸네일 위 / 아바타+텍스트 아래).
	   (이전에 넣었던 flex-direction:column 이 아바타·텍스트를 따로 떨어뜨려서 제거) */
	body.mobileResponsive .vodList { flex-wrap: wrap; }
	body.mobileResponsive .vodList > li {
		width: 100%;   /* 530px 고정 → 100% */
	}
	body.mobileResponsive .vodList > li:not(:first-child) { display: none; }  /* 1개만 노출 */
	body.mobileResponsive .vodList .thumb {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 56.25%;
	}
	body.mobileResponsive .vodList .thumb iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
	}

	/* 5) 종합 진단 도넛(.scores 안 4개): 가운데 정렬 + 2개씩 */
	body.mobileResponsive .mainMarketing .totalScores .scores {
		justify-content: center;
	}
	body.mobileResponsive .mainMarketing .totalScores .scores > section {
		flex: 0 0 calc(50% - 12px);
		max-width: calc(50% - 12px);
	}

	/* 6) 키워드 분석최적화: 내부 묶음 풀폭 + 제목/카테고리 경로의 inline nowrap 해제(가로 넘침 방지) */
	body.mobileResponsive .mainKeyword > div,
	body.mobileResponsive .mainKeyword .analysis {
		width: 100%;
		max-width: 100%;
	}
	body.mobileResponsive .mainKeyword .analysisHeader h3.title,
	body.mobileResponsive .mainKeyword .analysisHeader .categories p,
	body.mobileResponsive .mainKeyword .analysisHeader .categories li {
		white-space: normal !important;
		word-break: break-word;
	}
	/* 안쪽 좌우 패딩 축소(내용 찌부 방지): 섹션 12px 만, 내부 묶음은 0 */
	body.mobileResponsive .mainKeyword {
		padding-left: 12px;
		padding-right: 12px;
	}
	body.mobileResponsive .mainKeyword > div,
	body.mobileResponsive .mainKeyword .analysisContent {
		padding-left: 0;
		padding-right: 0;
	}

	/* 7) 마케팅 2단 그리드(1fr 1fr) → 1단 + 광고관리 내부 2단 세로 */
	body.mobileResponsive .mainMarketing {
		padding-left: 12px;
		padding-right: 12px;
	}
	body.mobileResponsive .mainMarketing > div {
		grid-template-columns: 1fr;
	}
	/* grid 자식(min-width:auto)이 큰 표/차트만큼 부풀어 화면을 넘기는 것 방지 */
	body.mobileResponsive .mainMarketing > div > * {
		min-width: 0;
		max-width: 100%;
	}
	body.mobileResponsive .mainMarketing .reviewGraph > div {
		min-width: 0;
		max-width: 100%;
		overflow-x: auto;
	}
	body.mobileResponsive .mainMarketing .ad > div {
		grid-template-columns: 1fr;
		display: block;
	}
	body.mobileResponsive .mainMarketing .ad > div > section + section {
		margin-top: 16px;
	}

	/* 8) 리뷰 추이 차트 고정폭(420px) → 가변 */
	body.mobileResponsive .multiChartType2 {
		width: 100%;
		max-width: 100%;
	}
}

/* 아주 작은 화면(폰 세로) 추가 보정 */
@media (max-width: 480px) {
	body.mobileResponsive #header h1 a {
		width: 110px;
	}
	body.mobileResponsive #menu {
		width: 84vw !important;
	}
	body.mobileResponsive #contents .subtitle {
		font-size: 18px;
	}
}