@charset "utf-8";
/* ============================================================
   대상 : 정보마당 > 섬유산업통계 > 품목별 수출 통계 (/info/stats/export)
   변경 : MTI 품목 트리 스타일만 추가
   이유 : 시안은 품목조회 자리가 `<iframe src="about:blank">` 였다(레거시 AXTree 자리).
          신규는 t_cst_ktdi_mti(193건) 기반 트리로 대체했는데,
          시안 CSS 에 `.mti_*` 정의가 없어 스타일이 없다.

   ✅ 나머지(.stats_sec/.stats_unit/.scroll_table/.table_st1/.chart_box)는
      시안 sub.css·common.css 가 이미 커버한다 → 여기서 다시 만들지 않는다.
   ⚠ 시안 원본 CSS 는 수정하지 않는다(개발규약).
   ============================================================ */

.mti_tree_wrap {
	max-height: 21.25rem;
	overflow-y: auto;
	border: 1px solid var(--line-color, #e7e7e7);
	border-radius: 0.6rem;
	padding: 1rem 1.2rem;
	background: #fff;
	/* height: 120px; */
}

.mti_tree,
.mti_tree ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 자식 목록은 들여쓴다 — 계층이 6단이라 구분이 필요하다 */
.mti_tree .mti_children {
	padding-left: 1.6rem;
	border-left: 1px dashed var(--line-color, #e7e7e7);
	margin-left: 0.8rem;
}

.mti_btn {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	width: 100%;
	padding: 0.45rem 0.4rem;
	background: none;
	border: 0;
	border-radius: 0.4rem;
	font-size: 0.9375rem;
	color: #333;
	text-align: left;
	cursor: pointer;
	line-height: 1.5;
}
.mti_btn:hover {
	background: #f0f1f4;
}
/* 선택된 품목 — 지금 보고 있는 통계의 대상 */
.mti_btn.on {
	background: var(--main-color, #cd000b);
	color: #fff;
	font-weight: 600;
}

/* 펼침 화살표 — 자식이 있을 때만 나온다 */
.mti_toggle {
	flex: 0 0 auto;
	font-size: 1.125rem;
	transition: transform 0.15s;
}
.mti_node.on > .mti_btn .mti_toggle {
	transform: rotate(90deg);
}

/* 말단 노드 표시점 — 화살표 자리를 맞춰 들쭉날쭉하지 않게 한다 */
.mti_dot {
	flex: 0 0 auto;
	width: 1.125rem;
	text-align: center;
}
.mti_dot::before {
	content: "·";
	color: #b9bec4;
}

.mti_label {
	flex: 1 1 auto;
	word-break: keep-all;
}

/* 차트 — 🔴 .chart_box 에 **고정 높이**가 없으면 Chart.js(maintainAspectRatio:false)가
   부모 높이를 반복 측정하며 hover/툴팁 리플로우마다 canvas 를 다시 키운다
   (마우스 올릴 때마다 차트가 커지는 현상). height 고정 + canvas 를 절대배치로 가둔다. */
.stats_export_wrap .chart_box {
	position: relative;
	height: 22.5rem !important;
	margin-top: 1.6rem;
	overflow: hidden;
}
.stats_export_wrap .chart_box canvas {
	position: absolute !important;
	top: 0; left: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
}

/* 월별 표는 컬럼이 많아(최대 14) 가로 스크롤이 필요하다 */
.stats_export_wrap .scroll_table {
	overflow-x: auto;
	margin-top: 1rem;
}
.stats_export_wrap .scroll_table table {
	min-width: 45rem;
}

@media (max-width: 768px) {
	.mti_tree_wrap { max-height: 16.25rem; }
	.mti_btn { font-size: 0.875rem; }
	.stats_export_wrap .chart_box { height: 15rem; }
}

/* ============================================================
   통계지표 탭 — 시안 11표를 5개 탭으로 분리(발주처 요청)

   디자인은 시안(ktdi_26)의 `.btn_wrap.tab_st3.btn_left.wide` 를 그대로 옮긴다.
     시안:     <div class="btn_wrap tab_st3 btn_left wide"><button class="btn btn_tab on">…
     카이누리: <div class="stat_tabs"><button class="stat_tab on">…   (stat-indicator.js 가 생성)
   → 클래스명만 다르고 구조(컨테이너 > 버튼)는 같아서 값을 1:1로 옮기면 된다.
     .stat_tabs = .btn_wrap(flex/gap) + .btn_left(왼쪽정렬) + .tab_st3.wide(회색 알약 바)
     .stat_tab  = .btn(inline-flex) + .tab_st3 .btn_tab
   ⚠ 시안 원본 CSS 는 수정하지 않는다(개발규약) — 값만 여기로 복사.
   ============================================================ */
.stat_tabs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-start; /* .btn_left */
	gap: 0.5rem;
	width: auto;
	max-width: 1660px;           /* .tab_st3.wide */
	height: 100px;
	/* 시안은 `margin: 6rem auto 0` — 아래 여백은 뒤따르는 섹션이 잡아 주지만
	   여긴 .stat_section 이 DB 본문이라 여백이 없을 수 있어 2.4rem 을 남긴다. */
	margin: 6rem auto 2.4rem;
	padding: 0.6rem;
	background: var(--bg-sub-light, #eceef6);
	border-radius: 12px;
}
.stat_tab {
	position: relative;
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0.6rem 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
	user-select: none;
	transition: all 0.2s;
	/* 글자색은 common.css 의 button 기본값(#666)을 그대로 쓴다 — 시안과 동일 */
}
.stat_tab.on {
	background-color: var(--main-color, #344DCF);
	color: #fff;
	font-weight: 500;
	border-radius: 12px;
	box-shadow: 0 4px 6px #00000020;
}

/* 시안 반응형 그대로 */
@media screen and (max-width: 1750px) {
	.stat_tabs { max-width: calc(100% - 6rem); }
}
@media screen and (max-width: 1400px) {
	/* 탭이 많으면(5개) 2열 그리드로 접힌다 */
	.stat_tabs {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		height: fit-content;
	}
	.stat_tab { height: 60px; }
}
/* 2열 구간(901~1400px)만: 버튼 사이 잔잔한 점선 */
@media screen and (min-width: 901px) and (max-width: 1400px) {
	.stat_tab {
		border-right: 1px dashed var(--line-color-dark, #c8cfdd);
		border-bottom: 1px dashed var(--line-color-dark, #c8cfdd);
	}
	.stat_tab:nth-child(2n) { border-right: 0; }      /* 오른쪽 열: 세로선 제거 */
	.stat_tab:last-child { border-right: 0; border-bottom: 0; }
	.stat_tab.on { border-color: transparent; }        /* 활성 알약 주변은 비움 */
}
@media screen and (max-width: 1200px) {
	.stat_tabs { max-width: calc(100% - 4rem); }
	.stat_tab { padding: 1.5rem; font-size: 1.2rem; }
}
@media screen and (max-width: 900px) {
	/* 1열 세로 + 버튼 사이 가로 점선 */
	.stat_tabs {
		display: block;
		width: calc(100% - 4rem);
		max-width: none;
		height: auto;
		margin-top: 4rem;
	}
	.stat_tab {
		display: block;
		width: 100%;
		height: auto;
		padding: 1.2rem;
		font-size: 1rem;
		border-top: 1px dashed var(--line-color-dark, #c8cfdd);
	}
	.stat_tab:first-child { border-top: 0; }
	.stat_tab.on { border-top-color: transparent; }
}
.stats_indicator_wrap .stat_section[hidden] { display: none; }
.stats_indicator_wrap .stats_bynation_block { margin-bottom: 3rem; }
.stats_indicator_wrap .stats_bynation_block .tit_m { display: block; margin-bottom: 1rem; }
.stats_indicator_wrap .scroll_table { overflow-x: auto; }
.stats_indicator_wrap .scroll_table table { min-width: 37.5rem; }