@charset "UTF-8";

.red-chart-container {
	width:100%;
}

.side-list .select_box .box01 {
	width: 100px;
	margin: 10px 5px 0 0;
}

.side-list .select_box .box02 {
	width: 115px;
	margin-top: 10px;
}

.figure-search-result ul li .relation {
	width: 200px;
	position: absolute;
	right: 0px;
	top: 40px;
	bottom: -20px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	color: #0e4194;
	display: block;
}

/* =========================================================================
 * template1 반응형 오버라이드 — RED 공통 UI (body.tmplat1 스코프 한정)
 * -------------------------------------------------------------------------
 * 공통 CSS(red/red.css)의 고정폭 규칙을 template1 스코프에서만 완화한다.
 * graphDetail 등 graphList 이외 페이지에도 공통적으로 영향을 주는 요소만
 * 여기서 다루고, graphList 전용 규칙은 red-graphList-custom.css에 둔다.
 * ========================================================================= */

/* graphDetail 등 .red-wrapper 사용 페이지 — 고정폭(1200px) → 유동(max-width:1200px).
 * 공통 red.css 의 width:1200px 를 template1 스코프에서만 완화.
 * 목록(.ptg-w1200) 과 동일한 max-width 1200 + 좌우 16px 패딩으로 정합.
 * 상하 패딩(50px 0)은 공통 규칙 상속 — longhand 만 지정해 캐스케이드 충돌 회피. */
body.tmplat1 .red-wrapper {
	width: 100%;
	max-width: 1200px;
	box-sizing: border-box;
	padding-left: 16px;
	padding-right: 16px;
}

/* 차트 컨테이너 — 원본 규칙(width:100%)에 그리드/하이차트 reflow 보조.
 * M13 (2026-05-28): 가로 스크롤 제거.
 *   기존 overflow-x:auto 는 컨테이너 내용이 1px 라도 넘치면 가로 스크롤바를 노출했다.
 *   - 차트(#chart-area.in-area)는 Highcharts 가 명시 width 없이 컨테이너 폭에 reflow → 넘침 없음.
 *   - 데이터 그리드(.red-chart-container .chart .grid)는 공용 red.css(L324)에서 자체
 *     overflow:auto 로 테이블 가로 넘침을 그리드 내부에 이미 격리 → 컨테이너 레벨 스크롤 불필요.
 *   따라서 컨테이너의 overflow-x 는 clip 으로 바꿔(잔여 자식 미세 넘침은 잘라내고)
 *   페이지 가로 스크롤을 차단한다. clip 은 스크롤 컨테이너를 만들지 않아 그리드 자체 스크롤과 무간섭.
 *   (scrollbar-gutter 미사용)
 *
 *   [M13 보정 2026-05-28] overflow-x:clip 단독 → hidden 폴백 + clip 2줄(progressive enhancement).
 *     clip 은 Chrome 90+/FF 81+/Safari 16+ 지원. 미지원 구형 브라우저(공공/지자체 다운스트림 포함)는
 *     첫 줄 hidden 으로 폴백되어 가로 스크롤 차단 목적을 동일하게 달성한다(스크롤 컨테이너가 생기지만
 *     이 컨테이너는 자식 .grid 가 자체 overflow:auto 로 가로 넘침을 이미 격리하므로 간섭 없음).
 *     동일 파일 layout-tmplat1.css(L1115·L1132)의 확립된 hidden→clip 패턴과 정합. */
@media (max-width: 1200px) {
	body.tmplat1 .red-chart-container {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;        /* 폴백: clip 미지원 구형 브라우저 */
		overflow-x: clip;          /* clip 지원 시: 스크롤 컨테이너 미생성으로 자식 스크롤 무간섭 */
	}
}

/* 사이드 리스트 셀렉트 박스 — 좁은 화면에서 가로 스택 유지, 넘치면 줄바꿈 */
@media (max-width: 768px) {
	body.tmplat1 .side-list .select_box {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}
	body.tmplat1 .side-list .select_box .box01,
	body.tmplat1 .side-list .select_box .box02 {
		width: auto;
		flex: 1 1 48%;
		margin: 0;
	}

	/* figure-search-result 의 .relation 절대 배치 해제 — 모바일에서 가독성 확보 */
	body.tmplat1 .figure-search-result ul li {
		position: relative;
		padding-bottom: 40px;
	}
	body.tmplat1 .figure-search-result ul li .relation {
		width: auto;
		position: static;
		display: block;
		text-align: left;
		font-size: 15px;
		margin-top: 8px;
	}
}

/* =========================================================================
 * graphDetail.jsp / relayGraphDetail.jsp (v2 승격본) 반응형 보강 (1차, 2026-05-22)
 * -------------------------------------------------------------------------
 * 정식 파일: graphDetail.jsp / relayGraphDetail.jsp (v2 승격본, 현재 운영본)
 * v1 원본 백업: graphDetail-old.jsp / relayGraphDetail-old.jsp
 *   (구 graphDetail2.jsp / relayGraphDetail2.jsp 변형본이 정식명으로 승격되어 더 이상 존재하지 않음)
 * 라우팅: /template1/graph/detail/{graphId}, /template1/relay/graph/detail/{graphId}/{trans}
 *   (구 detail2 컨트롤러는 제거되어 정식 /detail/ 경로로 통합됨)
 * 스코프: body.tmplat1 .red-wrapper--v2 ... (원본 .red-wrapper 단독 화면 미영향 보장)
 * 브레이크포인트: 1200 / 768 / 480 (v1.0 baseline 준수)
 * 금지: scrollbar-gutter, body.tmplat1 스코프 이탈, !important(회귀 한정 제외)
 * ========================================================================= */

/* M1: detail2 전용 wrapper — 데스크톱 외양은 .red-wrapper 와 동일 (max-width 1200 상속).
 *     모바일 반응형 보강은 모두 이 마커 클래스로 한정. */

/* 차트 메뉴 모바일 토글 라벨 — 기본은 숨김 (데스크톱은 메뉴 아이콘이 항상 노출되는 기존 동작 유지) */
body.tmplat1 .tmplat1-chart-menu-toggle {
	position: absolute;
	left: -9999px;
}
body.tmplat1 .tmplat1-chart-menu-toggle-label {
	display: none;
}

/* M4: 그래프 도구 행 wrapper — 데스크톱 기본은 블록 흐름 유지 */
body.tmplat1 .red-wrapper--v2 .red-graph-toolbar {
	display: block;
}

/* M8 (2026-05-27): AI 분석 모델 토글(.btn-ai-group) 데스크톱 base 정렬.
 *   공통 red.css 의 `.red-ai .title { display:flex }` 는 .title 의 직속 자식만
 *   가로 배치한다. detail2 는 M5 보강으로 .btn-ai 들을 .btn-ai-group 으로 감쌌고,
 *   그 wrapper 의 flex 선언은 @media (max-width:768px/480px) 에만 있어
 *   데스크톱(>768px)에서 .btn-ai 들이 세로로 쌓이던 문제를 base 규칙으로 해소한다.
 *   (모바일 미디어쿼리는 gap 만 조정하므로 이 base 의 flex/wrap 을 상속한다.) */
body.tmplat1 .red-wrapper--v2 .red-ai .title {
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
body.tmplat1 .red-wrapper--v2 .red-ai .btn-ai-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-left: 15px; /* M16 (2026-05-28): 토글 묶음을 제목 "AI 분석" 으로부터 15px 띄움.
	                    *   (이전 M9 의 margin-left:0 → 15px. 라벨 개별 margin-left:15px 를 그룹 단위 간격으로 이관)
	                    *   .title 의 gap:6px(L139)도 함께 제목-그룹 간격에 더해진다. */
}

/* M16 (2026-05-28): AI 토글 라벨 개별 margin-left 무력화.
 *   공용 red.css 의 .red-ai .title .btn-ai label { margin-left:15px }(L2236)는
 *   라벨마다 좌측 15px 를 줘 .btn-ai-group 의 gap:8px 과 합쳐져 간격이 과해진다.
 *   간격 관리를 그룹(margin-left:15px + gap:8px) 단위로 일원화하기 위해 라벨 개별 margin 을
 *   template1 한정으로 0 으로 덮는다. (공용 red.css 직접 수정 금지 — template2/RED본/adm 등
 *   다른 AI 화면의 라벨 간격은 그대로 유지). 본 선택자 명시도가 공용보다 높아 !important 불필요. */
body.tmplat1 .red-wrapper--v2 .red-ai .title .btn-ai label {
	margin-left: 0;
}

@media (max-width: 1200px) {
	body.tmplat1 .red-wrapper--v2 .red-data-info table {
		width: 100%;
	}
	body.tmplat1 .red-wrapper--v2 .red-button-group {
		gap: 8px;
	}
}

@media (max-width: 768px) {
	/* 차트 영역 / 사이드 검색 stack 전환 */
	body.tmplat1 .red-wrapper--v2 .chart-wrapper {
		flex-direction: column;
	}

	/* M3: 차트 메뉴 모바일 토글 — 라벨 표시, 메뉴는 기본 접힘, 체크 시 펼침 */
	body.tmplat1 .red-wrapper--v2 .tmplat1-chart-menu-toggle-label {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 6px 12px;
		margin: 6px 0;
		border: 1px solid #d0d6df;
		border-radius: 20px;
		font-size: 14px;
		background: #fff;
		color: #333;
		cursor: pointer;
		user-select: none;
	}
	/* M3-fix (2026-05-28): 모바일 토글 OFF 기본 접힘 강제.
	 *   graphDetail.js 가 exportingChartEnabled 시 jQuery `.show()` 로 #ui-chartMenu-wrapper 에
	 *   인라인 `display:block` 을 직접 박는다. 인라인은 클래스 미디어쿼리 규칙을 이기므로,
	 *   OFF 강제 규칙이 없으면 모바일에서 토글을 닫아도 메뉴가 펼쳐진 채 남는다(권한 보유 계정).
	 *   따라서 OFF 기본을 !important 로 접고, :checked(토글 ON)일 때만 다시 !important 로 펼친다.
	 *   두 규칙 모두 !important 이므로 명시도 동률 → 후행(:checked) 규칙이 ON 시 이긴다. */
	body.tmplat1 .red-wrapper--v2 #ui-chartMenu-wrapper {
		display: none !important;
	}
	body.tmplat1 .red-wrapper--v2 .tmplat1-chart-menu-toggle:checked ~ #ui-chartMenu-wrapper {
		display: block !important;
	}

	/* RED 메뉴 — 좁은 폭에서 줄바꿈 */
	body.tmplat1 .red-wrapper--v2 .red-menu {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	/* M4: 그래프 도구(swiper + 색약 토글) — 모바일은 세로 스택 */
	body.tmplat1 .red-wrapper--v2 .red-graph-toolbar {
		display: flex;
		flex-direction: column;
		row-gap: 8px;
	}

	/* M2: 메타 테이블 → 카드 stack
	 *   colgroup 의 col width 가 모바일에서 무시되도록 모든 셀을 block 화.
	 *   <th> 는 숨기고 <td> 의 ::before 가 data-mobile-label 을 출력. */
	body.tmplat1 .red-wrapper--v2 .red-data-info table,
	body.tmplat1 .red-wrapper--v2 .red-data-info tbody,
	body.tmplat1 .red-wrapper--v2 .red-data-info tr,
	body.tmplat1 .red-wrapper--v2 .red-data-info td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	body.tmplat1 .red-wrapper--v2 .red-data-info colgroup,
	body.tmplat1 .red-wrapper--v2 .red-data-info col {
		display: none;
	}
	body.tmplat1 .red-wrapper--v2 .red-data-info th {
		display: none;
	}
	body.tmplat1 .red-wrapper--v2 .red-data-info td {
		padding: 12px 14px;
		border-top: 1px solid #e6e8ee;
	}
	body.tmplat1 .red-wrapper--v2 .red-data-info td::before {
		content: attr(data-mobile-label);
		display: block;
		font-weight: 600;
		margin-bottom: 4px;
		color: #555;
		font-size: 13px;
	}

	/* 버튼 그룹 — 풀폭 세로 스택 */
	body.tmplat1 .red-wrapper--v2 .red-button-group {
		flex-direction: column;
	}
	body.tmplat1 .red-wrapper--v2 .red-button-group > button {
		width: 100%;
	}

	/* M5/M8: AI 라디오 — 모바일은 gap 만 조정.
	 *   display:flex / flex-wrap:wrap 은 M8 데스크톱 base(L127)에서 상속하므로
	 *   여기서 재선언하지 않는다(중복 제거, 2026-05-27). */
	body.tmplat1 .red-wrapper--v2 .red-ai .btn-ai-group {
		gap: 8px;
	}

	/* 데이터 팝업 모달 — 모바일 풀스크린 */
	body.tmplat1 #ui-chartData {
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		max-height: 100vh;
		left: 0;
		top: 0;
		transform: none;
		border-radius: 0;
	}

	/* M7: adInfo 광고 클립 — 모바일에서 숨김 (태블릿 이상 ≥769px 에서만 노출) */
	body.tmplat1 .red-ad-clip-wrapper {
		display: none;
	}

	/* M10 (2026-05-28): 검색 영역(사이드 그래프 리스트) — 모바일에서 숨김.
	 *   대상 DOM: subGraphList.jsp 의 .side-list-wrapper (graphDetail.jsp L226 /
	 *   relayGraphDetail.jsp L202 에서 <!-- 검색 영역 --> 으로 include).
	 *   두 화면 모두 동일 클래스이므로 v2 스코프 단일 규칙으로 함께 커버.
	 *   480px 블록은 별도 .side-list-wrapper 규칙이 없어 이 768px 선언을 그대로 상속. */
	body.tmplat1 .red-wrapper--v2 .side-list-wrapper {
		display: none;
	}

	/* M11 (2026-05-28): 수치검색 버튼 박스 — 모바일에서 숨김.
	 *   대상 DOM: graphDetail.jsp L318 의 .figure-search (수치검색 안내문구 + 버튼).
	 *   relayGraphDetail.jsp(template1)에는 .figure-search 가 없어 graphDetail.jsp 단독 적용.
	 *   부모는 .red-wrapper 직속 자식(.red-data-info 는 L285 에서 닫히는 별개 형제 블록).
	 *   부모 .red-wrapper 는 flex/grid 가 아닌 일반 block 흐름이라 숨김 시 빈 트랙/gap 없음
	 *   (.figure-search 베이스 margin:60px 0 도 display:none 으로 함께 소거).
	 *   480px 블록은 별도 .figure-search 규칙이 없어 이 768px 선언을 그대로 상속. */
	body.tmplat1 .red-wrapper--v2 .figure-search {
		display: none;
	}
}

@media (max-width: 480px) {
	body.tmplat1 .red-wrapper--v2 .red-chart-container h2 {
		font-size: 1.25rem;
	}
	body.tmplat1 .red-wrapper--v2 .red-data-info td {
		padding: 10px 12px;
	}
	body.tmplat1 .red-wrapper--v2 .red-data-info td::before {
		font-size: 12px;
	}
	body.tmplat1 .red-wrapper--v2 .red-ai .btn-ai-group {
		gap: 6px;
	}
}

/* =========================================================================
 * M12 (2026-05-28): 그래프 모양 선택(.red-graph-option) Swiper 폭 보정.
 * -------------------------------------------------------------------------
 * 짝이 되는 JS: js/template/template1/chart.ui.js 의 setChartList() 오버라이드
 *   (차트 아이콘 1개 = swiper-slide 1개 + slidesPerView:'auto'). 두 변경은 세트로 동작.
 * 동작: Swiper 8.4.7 watchOverflow 가 콘텐츠 폭으로 isLocked 를 판정한다.
 *   - 데스크톱(콘텐츠가 폭에 들어옴): lock → 화살표 자동 숨김(번들 .swiper-button-lock{display:none})
 *     + 스와이프 잠금 = 한 페이지.
 *   - 모바일(넘침): unlock → 스와이프 + 좌우 화살표.
 *   따라서 화살표 표시/숨김·페이지 판정은 Swiper 에 위임하고, CSS 는 뷰포트 분기를 두지 않는다.
 * CSS 역할: ① 공용 928px 고정폭 해제(유동) ② 슬라이드 세로 정렬
 *   ③ (M13 갱신) 화살표 positioned 조상을 .swiper 로 고정 + 슬라이드 영역 좌우 인셋(겹침 방지).
 * 스코프: body.tmplat1 .red-wrapper--v2 한정 → 공용 red.css/타 화면/다운스트림 미영향.
 *   공용 red.css 의 .red-graph-option(0,0,1,0) 등 단일 클래스보다 명시도가 높아
 *   override 에 !important 불필요(append-only, scrollbar-gutter 미사용).
 * ========================================================================= */

/* ① 폭 맞춤 — 공용 red.css 의 .red-graph-option width:928px 고정 해제 → 컨테이너 폭에 유동 맞춤 */
body.tmplat1 .red-wrapper--v2 .red-graph-option {
	width: 100%;
	box-sizing: border-box;
}

/* ② 개별 슬라이드(아이콘 1개) 세로 정렬 — 슬라이드 폭은 콘텐츠(auto), 높이 정렬만 보정 */
body.tmplat1 .red-wrapper--v2 .red-graph-option .swiper-slide {
	width: auto;
	align-items: center;
}
body.tmplat1 .red-wrapper--v2 .red-graph-option .swiper-slide ul {
	margin: 0;
}

/* ③ M13 (2026-05-28): 화살표 겹침 수정 — positioned 조상을 .swiper 로 고정 + 슬라이드 영역 인셋.
 *
 *   [원인] 공용 red.css 의 .swiper-button-prev-m/next-m 은 position:absolute(좌:0 / right:0)인데,
 *     .swiper(red.css L836)·.red-graph-option(L797) 모두 position 미지정(static)이라
 *     화살표의 기준점이 더 상위의 positioned 조상인 .red-chart-container .chart(red.css L314 relative)
 *     가 되어 화살표가 차트 영역 좌우 끝(슬라이드 위)으로 떠 아이콘과 겹쳤다.
 *     M12 의 .red-graph-option padding:44px 는 화살표 기준점이 아니어서 무효였으므로 폐기.
 *
 *   [수정 1] .swiper 를 relative 로 만들어 화살표가 swiper 박스의 좌우 끝에 정확히 붙도록 고정.
 *   [수정 2] 슬라이드 가시 영역을 화살표 폭(공용 red.css 60px, L812/L826)만큼 좌우 인셋.
 *     인셋은 swiper-wrapper(트랙, transform 이동 대상)가 아니라 .swiper(컨테이너, overflow:hidden
 *     영역) 의 padding 으로 준다. Swiper 8.4.7 은 컨테이너 padding 을 가시 슬라이드 영역으로
 *     존중하므로 슬라이드 translate 와 충돌하지 않는다(wrapper 에 padding 을 주면 transform 과
 *     어긋남). 화살표는 .swiper 박스 기준 절대배치이므로 padding 영역(좌우 끝) 위에 놓여
 *     슬라이드와 절대 겹치지 않는다.
 *     ※ 60px 풀 폭 대신 48px(화살표 시각폭 + 클릭 여유) 만 확보해 좁은 모바일에서 아이콘
 *       표시 영역을 과하게 줄이지 않는다.
 *
 *   [데스크톱 정합] lock(데스크톱 한 페이지) 상태에서는 화살표가 번들 .swiper-button-lock{display:none}
 *     으로 숨겨져 좌우 48px 가 빈 여백이 된다. 이때 슬라이드(아이콘)들의 가로 분포는
 *     실제 flex 트랙인 .swiper-wrapper 가 결정하는데, 번들 CSS 의 .swiper-wrapper 에는
 *     justify-content 가 없어(기본 flex-start) 슬라이드가 좌측으로 쏠리고 우측에 큰 여백이 남는다.
 *     ※ 공용 red.css 의 .swiper-slide{justify-content:center}(L853)는 "슬라이드 1개 내부 ul"
 *       을 중앙 정렬할 뿐, 여러 슬라이드를 트랙 안에서 중앙으로 모으지 못한다(아래 [수정 3] 으로 보정).
 *     (CSS 만으로 Swiper lock 상태를 분기할 수 없어 인셋을 항상 적용한다.) */
body.tmplat1 .red-wrapper--v2 .red-graph-option .swiper {
	position: relative;
	padding-left: 48px;
	padding-right: 48px;
	box-sizing: border-box;
}

/* [수정 3] M13 보정(2026-05-28): 데스크톱 lock 시 슬라이드 가로 가운데 정렬.
 *   대상은 .swiper 가 아니라 실제 flex 트랙인 .swiper-wrapper 다(슬라이드는 wrapper 의 flex 아이템).
 *   - 데스크톱(lock, 콘텐츠 < 폭): justify-content:center 가 빈 공간을 좌우로 분배 → 아이콘 묶음 가운데 정렬.
 *   - 모바일(unlock, 콘텐츠 > 폭): 분배할 양(+)의 여백이 없어 center 는 무효과(flex-start 처럼 동작).
 *     Swiper 는 슬라이드 위치를 wrapper 의 transform(translate3d)으로 직접 제어하므로 슬라이드 이동·스와이프
 *     계산에 영향 없음(번들 updateSlides 는 wrapper 의 justify 를 읽지 않고 $el 폭·슬라이드 폭만 사용).
 *   - overflow(콘텐츠가 폭 초과) 시 'center' 만 쓰면 첫 슬라이드가 음수 오프셋으로 잘릴 수 있어
 *     'safe center' 폴백을 둔다(safe 미지원 구형 브라우저는 첫 줄 center 적용 — 단 overflow 상태는
 *     모바일이고 거기선 어차피 transform 으로 시작점이 덮어써져 잘림이 사실상 발생하지 않는다). */
body.tmplat1 .red-wrapper--v2 .red-graph-option .swiper .swiper-wrapper {
	justify-content: center;        /* 폴백: safe 미지원 브라우저 */
	justify-content: safe center;   /* overflow 시 start 폴백으로 첫 슬라이드 잘림 방지 */
}

/* [수정 4] M13 보정(2026-05-28): 왼쪽 화살표 left:0 명시 — 오른쪽(right:0)과 좌우 대칭 고정.
 *   [원인] 공용 red.css 의 .swiper-button-next-m(L825)은 right:0 이 명시돼 .swiper 박스 우측 끝
 *     (padding-right:48px 영역 위)에 정확히 붙지만, .swiper-button-prev-m(L809~820)은 left 값이
 *     전혀 없다. absolute 요소에 left/right 둘 다 미지정이면 '정적 위치(static position)' = 흐름상
 *     원래 자리에 떠 있는데, prev-m 은 .swiper 의 첫 자식이라 그 자리가 padding-left:48px 안쪽
 *     (슬라이드 시작 지점 근처)이다. 그래서 왼쪽 화살표가 좌측 패딩 영역 끝에 못 붙고 첫 아이콘과
 *     겹치거나 어긋나 안 보였다(오른쪽만 정상으로 보인 증상).
 *   [수정] left:0 을 주면 [수정 1]에서 .swiper 를 relative 로 만든 박스 기준으로 좌측 끝에 붙어
 *     right:0 인 next-m 과 좌우 대칭이 된다. 시각 아이콘은 배경 svg 50% 50%(중앙)이고 화살표 폭은
 *     공용 60px 인데 패딩이 48px 라 좌측으로 12px 더 넓지만, 이는 next-m(right:0) 도 동일하게
 *     12px 초과하는 대칭 상태이며 아이콘 중심(박스 30px 지점)은 48px 패딩 영역 안에 들어와
 *     슬라이드와 겹치지 않는다. 따라서 next-m 의 right:0 은 손대지 않고 prev-m 만 보정한다.
 *   [명시도] 본 선택자(0,0,4,1)가 공용 .swiper-button-prev-m(0,0,1,0)보다 높아 !important 불필요.
 *   [데스크톱 lock] left:0 은 위치만 잡으며, lock 시 표시 여부는 번들 .swiper-button-lock
 *     {display:none} 이 제어하므로 화살표 숨김 상태에 영향 없다. */
body.tmplat1 .red-wrapper--v2 .red-graph-option .swiper-button-prev-m {
	left: 0;
}

/* =========================================================================
 * M14 (2026-05-28): .red-menu(차트 하단 이력/차원·계층변경/범례 메뉴) 정렬·줄바꿈 보정.
 * -------------------------------------------------------------------------
 * 대상 마크업: WEB-INF/view/svc/template/template1/graphDetail.jsp 의 .red-menu
 *   .red-menu (공용 red.css L630: display:flex; align-items:end; justify-content:space-between)
 *     ├ .red-menu-wrap  ← 이력 묶음(prev/next/origin 버튼 + 이력 select). 본 차수에서 무명 div 에 클래스 부여.
 *     │                   (relayGraphDetail.jsp 는 이미 동일 클래스 보유 → 두 화면 일관.
 *     │                    공용 red.css L637 `.red-menu .red-menu-wrap{display:flex}` 재활용)
 *     ├ .change         ← 차원변경/계층변경 버튼 + 속성변경 select + 팝업(#ui-mLayerSelector)
 *     └ .regend         ← 범례 3버튼(공용 red.css L764 이미 display:flex)
 *
 * 요구: ① 세 직속 자식을 gap 10px 으로 배치하고 줄바꿈 시 가운데 정렬
 *       ② 각 묶음(.red-menu-wrap / .change / .regend) 내부 자식은 줄바꿈 금지(한 줄 유지).
 *
 * 스코프: body.tmplat1 .red-wrapper--v2 한정 → 공용 red.css / 타 화면 / 다운스트림 미영향.
 *   공용 단일 클래스(.red-menu = 0,0,1,0)보다 본 선택자 명시도가 높아 override 에 !important 불필요.
 *   (append-only, scrollbar-gutter 미사용)
 * ========================================================================= */

/* [요구 ①] .red-menu 직속 3자식 — gap 10px + 줄바꿈 시 가운데 정렬.
 *   공용 red.css 의 justify-content:space-between 을 center 로 교체하고 gap 을 부여한다.
 *   flex-wrap:wrap 은 기존 768px 미디어쿼리(L200~203)에서 모바일에만 켜지므로 그대로 둔다 →
 *   데스크톱(>=769px)은 한 줄(nowrap) 유지, 모바일은 wrap 되며 wrap 된 줄이 center 정렬된다.
 *   [데스크톱(>=769px) 영향] space-between → center 변경으로, 한 줄일 때 세 묶음이 좌우 끝으로
 *     벌어지지 않고 gap 10px 간격으로 가운데 모인다(요구 ① 의도대로). 양끝 밀착 배치를 의도했던
 *     기존 데스크톱 룩과는 정렬이 달라지므로 실기기 확인 권장. */
body.tmplat1 .red-wrapper--v2 .red-menu {
	gap: 10px;
	justify-content: space-around;
	flex-wrap: wrap;
}

/* [요구 ②-1] 이력 묶음 — 한 줄 유지(줄바꿈 금지).
 *   공용 .red-menu .red-menu-wrap 은 display:flex 만 지정(wrap 미지정=기본 nowrap)이나,
 *   내부 버튼/select 가 한 줄에 머물도록 nowrap 을 명시 보장한다. */
body.tmplat1 .red-wrapper--v2 .red-menu .red-menu-wrap {
	flex-wrap: nowrap;
	align-items: center;
}

/* [요구 ②-2] .change 묶음 — 한 줄 유지(줄바꿈 금지).
 *   공용 .red-menu .change(red.css L792)는 position:relative 만 있고 display 미지정(block)이라
 *   차원변경/계층변경 버튼과 속성변경 select 가 세로로 쌓인다. flex+nowrap 으로 가로 한 줄 정렬.
 *   [#ui-mLayerSelector 처리] 이 팝업은 공용 red.css L1013~1015 에서 display:none; position:absolute
 *     이다. absolute 요소는 부모가 flex 여도 flex 흐름(아이템)에서 빠져나가므로, .change 를 flex 로
 *     바꿔도 팝업 위치/표시에는 영향이 없다(평소 숨김, JS 토글 시 absolute 로 떠오름). 따라서 팝업은
 *     그대로 두고 나머지 표시 자식(버튼 2개 + 속성변경 select 묶음)만 한 줄에 정렬된다. */
body.tmplat1 .red-wrapper--v2 .red-menu .change {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

/* [요구 ②-3] 범례 묶음 — 한 줄 유지(줄바꿈 금지).
 *   공용 .red-menu .regend(red.css L764)는 이미 display:flex 이나 wrap 미지정 → nowrap 명시 보강. */
body.tmplat1 .red-wrapper--v2 .red-menu .regend {
	flex-wrap: nowrap;
}

/* =========================================================================
 * M15 (2026-05-28): 데스크톱(≥769px) 차트 컨테이너 폭을 검색영역 폭만큼 축소.
 * -------------------------------------------------------------------------
 * 대상 마크업: graphDetail.jsp / relayGraphDetail.jsp(v2)
 *   .red-wrapper--v2
 *     └ .chart-wrapper            (공용 red.css L38: display:flex; justify-content:space-between)
 *         ├ #chart-container.red-chart-container   ← 공용 red.css L162: width:930px 고정 (문제 원인)
 *         └ .side-list-wrapper                      ← 안에 .side-list
 *                                                     (공용 red.css L372~378: width:250 + margin-left:20)
 *
 * [문제] .chart-wrapper(flex) 의 가용 내용폭은 .red-wrapper--v2(max-width:1200, 좌우 padding 16
 *   → 내용폭 약 1168px)이고, 1200px 캡 상황의 그보다 좁은 데스크톱(769~1199px)에서도
 *   부모 내용폭이 그만큼 줄어든다. 그런데 자식 두 개의 점유폭 합은
 *   차트 930px + 검색영역 270px(side-list 250 + margin-left 20) = 1200px 로 고정이라
 *   flex 컨테이너 내용폭(≈1168px 이하)을 항상 초과 → 차트가 검색영역을 밀어내거나 overflow.
 *
 * [수정] 769px 이상에서 .red-chart-container 를 고정 930px 대신 검색영역 점유폭(270px)을 뺀
 *   유동폭 calc(100% - 270px) 로 둔다. 여기서 100% 는 flex 컨테이너 .chart-wrapper 의 폭이고,
 *   270px = side-list width(250) + margin-left(20). side-list 가 공용 red.css 에서 고정 250+20 이라
 *   상수로 두되 출처를 위 주석에 명시한다. side-list 가 변경되면 이 상수도 함께 갱신해야 한다.
 *   → 차트 + 검색영역 합이 정확히 컨테이너 폭(100%)이 되어 .chart-wrapper 를 넘지 않는다.
 *
 * [flex 아이템 안전장치] flex 아이템은 기본 min-width:auto 라 콘텐츠(차트 내부 그리드/스와이퍼 등)가
 *   계산폭보다 넓으면 축소되지 않고 overflow 를 유발할 수 있다. min-width:0 을 함께 주어
 *   calc 폭을 실제 한계로 강제한다(차트 내부는 자체 overflow 처리로 격리됨 — M12/M13 참고).
 *
 * [768px 이하 미적용] 검색영역(.side-list-wrapper)은 768px 이하에서 display:none(L280) 이고
 *   차트가 풀폭이어야 하므로, 본 규칙은 반드시 @media (min-width: 769px) 한정으로만 적용한다.
 *   (모바일에 calc(100% - 270px) 가 새면 차트가 270px 만큼 불필요하게 좁아진다.)
 *
 * [M13(L65~72) 과의 공존] M13 의 `.red-chart-container { overflow-x }` 는 @media (max-width:1200px)
 *   범위라 본 규칙(min-width:769px)과 769~1200px 구간이 겹친다. 단, M13 은 overflow-x 만,
 *   본 규칙은 width/min-width 만 지정 → 같은 셀렉터의 서로 다른 속성이라 충돌 없이 공존한다.
 *   오히려 본 규칙이 폭을 컨테이너에 맞춰 정렬하므로 M13 의 잔여 넘침 차단과 상호 보완된다.
 *
 * [차트 reflow] CSS 초기 폭 변경이라 최초 렌더 시점에 컨테이너가 이미 좁은 폭이면 Highcharts 는
 *   해당 폭으로 reflow 되어 추가 JS 불필요. 다만 등록자/관리자 계정에서 차트 메뉴·차원변경 등
 *   런타임 동작으로 컨테이너 폭이 바뀌는 시나리오가 있다면 chart.reflow() 호출이 필요할 수 있는데,
 *   이는 JS(graphDetail.js / chart.ui.js) 영역이므로 본 CSS 변경 범위 밖이다(pytha-red-manager 에스컬레이션 대상).
 *
 * 스코프: body.tmplat1 .red-wrapper--v2 한정 → 공용 red.css / 타 화면 / 다운스트림 미영향.
 *   본 선택자(0,0,3,1)가 공용 .red-chart-container(0,0,1,0)보다 명시도가 높아 override 에 !important 불필요.
 *   (append-only, scrollbar-gutter 미사용)
 * ========================================================================= */
@media (min-width: 769px) {
	body.tmplat1 .red-wrapper--v2 .red-chart-container {
		width: calc(100% - 270px); /* 270px = side-list width 250 + margin-left 20 (공용 red.css L373/L376) */
		min-width: 0;              /* flex 아이템 min-width:auto 로 인한 overflow 방지 */
	}
}