/*
 * wani-component-mobile.css
 * 왔니 모바일 컴포넌트(/wani-component-mobile) 스타일 — 이음 모바일(/eum_mobile)이 원형이다.
 *
 * - 모든 클래스는 `wm-` 접두사다(데스크톱 컴포넌트 `wani-` 와 겹치지 않게).
 * - 색·모서리는 아래 토큰(--wm-*)에서만 고른다. :root 값은 문서 페이지·단독 사용을 위한 기본값이고,
 *   이음 모바일은 assets/css/eum_mobile.css 가 body.eum-mobile 에서 같은 토큰을 --eum-* 로 이어 준다.
 * - 뒤쪽 `#wcDocs*` / `.wm-docs-*` 는 문서 페이지 보정이다.
 */

:root {
	--wm-brand: #062e85;
	--wm-bg: #f4f6fa;
	--wm-card-bg: #fff;
	--wm-card-radius: 16px;
	--wm-tile-radius: 12px;
	--wm-card-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
	--wm-line: rgba(0, 0, 0, 0.06);
	--wm-max-width: 640px;
	/* 하단 액션 바가 붙는 높이 — 하단 탭이 있는 화면은 탭 높이를 넣는다 */
	--wm-bar-bottom: 0px;

	/* 안전영역(노치·제스처 바). 여백이 필요한 곳은 env() 를 직접 쓰지 말고 이 토큰을 쓴다 —
	   앱 웹뷰 안에서 한 번에 끄기 위해서다(바로 아래 html.in-app-webview). */
	--wm-safe-top: env(safe-area-inset-top);
	--wm-safe-bottom: env(safe-area-inset-bottom);

	--wm-blue-bg: #eef4ff;
	--wm-blue: #1d4ed8;
	--wm-green-bg: #ecfdf3;
	--wm-green: #047857;
	--wm-purple-bg: #f3f0ff;
	--wm-purple: #6d28d9;
	--wm-orange-bg: #fff6ed;
	--wm-orange: #c2410c;
	--wm-red-bg: #fef2f2;
	--wm-red: #dc2626;

	--wm-text-title: #111827;
	--wm-text: #374151;
	--wm-text-sub: #6b7280;
	--wm-text-muted: #9ca3af;
}

/* ── 앱(웹뷰) 안에서는 안전영역 여백을 끈다 ──────────────────────
   왔니·이음 앱은 웹뷰를 상태바·내비게이션 바를 피한 자리에 놓는다(Flutter SafeArea).
   그 안에서 env(safe-area-inset-*) 만큼 또 넣으면 위아래가 두 번 밀려 빈 띠가 생긴다.
   `in-app-webview` 클래스는 header_meta.php 의 인라인 스크립트가 붙인다. */
html.in-app-webview {
	--wm-safe-top: 0px;
	--wm-safe-bottom: 0px;
}

/* ── 1. 톤 — 배경은 옅게, 글자는 같은 계열 진하게(--wm-tone 으로 테두리·강조색을 물려준다) ── */

.wm-tone-blue { background: var(--wm-blue-bg); color: var(--wm-blue); --wm-tone: var(--wm-blue); }
.wm-tone-green { background: var(--wm-green-bg); color: var(--wm-green); --wm-tone: var(--wm-green); }
.wm-tone-purple { background: var(--wm-purple-bg); color: var(--wm-purple); --wm-tone: var(--wm-purple); }
.wm-tone-orange { background: var(--wm-orange-bg); color: var(--wm-orange); --wm-tone: var(--wm-orange); }
.wm-tone-red { background: var(--wm-red-bg); color: var(--wm-red); --wm-tone: var(--wm-red); }
.wm-tone-gray { background: #f3f4f6; color: var(--wm-text-sub); --wm-tone: var(--wm-text-sub); }

/* ── 2. 아바타 · 빈 상태 · 안내 콜아웃 (wani-m-ui.js) ── */

.wm-avatar {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	object-fit: cover;
	font-weight: 700;
}

.wm-avatar.wm-avatar-lg {
	width: 64px;
	height: 64px;
	flex-basis: 64px;
	font-size: 24px;
}

.wm-empty {
	padding: 40px 12px;
	text-align: center;
	font-size: 13px;
	color: var(--wm-text-sub);
}

.wm-empty > .bi {
	display: block;
	margin-bottom: 8px;
	font-size: 28px;
	color: #d1d5db;
}

.wm-callout {
	display: flex;
	gap: 10px;
	padding: 12px;
	border-radius: var(--wm-tile-radius);
	border-left: 3px solid var(--wm-tone);
	font-size: 12px;
}

/* ── 3. KPI 타일 (wani-m-ui.js 의 kpi) ── */

.wm-kpi {
	display: block;
	height: 100%;
	padding: 12px;
	border-radius: var(--wm-tile-radius);
	border: 1px solid rgba(0, 0, 0, 0.04); /* color-mix 를 모르는 옛 WebView 용 */
	border: 1px solid color-mix(in srgb, var(--wm-tone) 18%, transparent);
	text-decoration: none;
}

button.wm-kpi {
	font: inherit;
	color: inherit;
}

.wm-kpi:active {
	filter: brightness(0.97);
}

.wm-kpi-label {
	font-size: 12px;
	color: var(--wm-text-sub);
}

.wm-kpi-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}

.wm-kpi-value {
	margin-top: 6px;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.wm-kpi .wm-kpi-value,
.wm-kpi .wm-kpi-icon {
	color: var(--wm-tone);
}

.wm-kpi-caption {
	font-size: 12px;
	color: var(--wm-text-sub);
}

/* 타일 묶음 머리(예: '등록·결연') */
.wm-kpi-group {
	margin-top: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--wm-text-sub);
}

/* ── 4. 칩 줄 (wani-m-chip-row.js) ── */

.wm-chip-row {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.wm-chip-row::-webkit-scrollbar {
	display: none;
}

.wm-chip {
	--wm-chip-color: var(--wm-brand);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 32px;
	padding: 0 12px;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	background: #fff;
	font-size: 13px;
	color: var(--wm-text);
	white-space: nowrap;
}

.wm-chip.active {
	border-color: var(--wm-chip-color);
	background: var(--wm-chip-color);
	color: #fff;
	font-weight: 600;
}

.wm-chip-count {
	font-size: 11px;
	opacity: 0.7;
}

/* 걸려 있는 필터(누르면 해제) — 주황 */
.wm-chip.is-filter {
	border-color: var(--wm-orange);
	background: var(--wm-orange-bg);
	color: var(--wm-orange);
	font-weight: 600;
}

/* 색 점 — item.color 를 주면 칩 앞에 점을 찍고 켜졌을 때 그 색으로 칠한다 */
.wm-chip-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wm-chip-color);
}

.wm-chip.active .wm-chip-dot {
	background: #fff;
}

/* ── 5. 검색창 (wani-m-search-box.js) ── */

.wm-search-box {
	position: relative;
}

.wm-search-box > .bi-search {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wm-text-muted);
	pointer-events: none;
}

.wm-search-box .form-control {
	height: 44px;
	padding-left: 40px;
	border: 0;
	border-radius: var(--wm-tile-radius);
	box-shadow: var(--wm-card-shadow);
}

/* 흰 바탕(시트·전체화면 창) 안 — 그림자 대신 테두리 */
.wm-search-box.wm-search-box-bordered .form-control {
	height: 40px;
	border: 1px solid #e5e7eb;
	box-shadow: none;
}

/* 입력칸 오른쪽 지우기 버튼(값이 있을 때만) */
.wm-search-box .form-control {
	padding-right: 40px;
}

.wm-search-box-clear {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wm-text-muted);
}

/* 브라우저 기본 지우기(x)는 컴포넌트 버튼과 겹치므로 숨긴다 */
.wm-search-box input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* ── 6. 월 이동 (wani-m-month-nav.js) ── */

.wm-month-nav {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border-radius: 999px;
	background: var(--wm-bg);
}

.wm-month-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wm-text-sub);
	font-size: 13px;
}

.wm-month-nav-btn:active:not(:disabled) {
	background: #fff;
}

.wm-month-nav-btn:disabled {
	opacity: 0.3;
}

.wm-month-nav-label {
	min-width: 64px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--wm-text-title);
	font-variant-numeric: tabular-nums;
}

/* ── 7. 시트 — 아래(또는 위)에서 나오는 둥근 offcanvas (wani-m-action-sheet.js · 마크업 전용으로도 쓴다) ── */

.offcanvas-bottom.wm-sheet {
	--bs-offcanvas-height: auto;
	max-height: 80vh;
	max-width: var(--wm-max-width);
	margin: 0 auto;
	border-top-left-radius: var(--wm-card-radius);
	border-top-right-radius: var(--wm-card-radius);
	padding-bottom: var(--wm-safe-bottom);
}

.offcanvas-top.wm-sheet {
	--bs-offcanvas-height: auto;
	bottom: auto; /* 어딘가의 bottom:0 이 남아 있으면 높이 auto 여도 최대 높이까지 늘어난다 */
	max-height: 80vh;
	max-width: var(--wm-max-width);
	margin: 0 auto;
	border-bottom-left-radius: var(--wm-card-radius);
	border-bottom-right-radius: var(--wm-card-radius);
	padding-top: var(--wm-safe-top);
}

.wm-sheet .offcanvas-footer {
	flex-shrink: 0;
	background: #fff;
}

.wm-sheet-list .list-group-item.is-current,
.wm-sheet-list .list-group-item.active {
	font-weight: 700;
	color: var(--wm-brand);
	background: transparent;
	border-color: var(--bs-list-group-border-color);
}

.wm-sheet-list .list-group-item.is-muted {
	opacity: .55;
}

/* 시트 안 검색창은 목록을 내려도 위에 붙어 있다 */
.wm-sheet .wm-search-box {
	position: sticky;
	top: 0;
	z-index: 2;
	padding-bottom: 4px;
	background: #fff;
}

/* ── 8. 하단 액션 바 (wani-m-action-bar.js) ── */

.wm-action-bar {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(var(--wm-bar-bottom) + var(--wm-safe-bottom));
	width: 100%;
	max-width: var(--wm-max-width);
	z-index: 1025;
	background: #fff;
	border-top: 1px solid var(--wm-line);
	box-shadow: 0 -2px 8px rgba(16, 24, 40, 0.06);
}

/* 문서 데모처럼 화면에 고정하지 않고 흐름 안에 둘 때 */
.wm-action-bar.wm-action-bar-static {
	position: static;
	transform: none;
}

/* 바가 목록 끝을 가리지 않게 — padTarget 에 붙는다 */
.wm-action-bar-padded {
	padding-bottom: 56px;
}

/* ── 9. 슬라이드 (wani-m-slider.js) — scroll-snap, 라이브러리 없음 ── */

.wm-slider-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.wm-slider-track::-webkit-scrollbar {
	display: none;
}

.wm-slider-page {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
}

.wm-slider-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.wm-slider-dots:empty {
	display: none;
}

/* 점 모양은 데스크톱 .wani-slider-dots(wani-component.css)와 같게 맞춘다 — 8px 점, 현재 장은 24px 알약. */
.wm-slider-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, .2);
	transition: width .3s ease, background-color .3s ease;
}

.wm-slider-dot.active {
	width: 24px;
	background: var(--wm-brand);
}

/* ── 10. 막대 차트 (wani-m-bar-chart.js) — CSS 막대, 차트 라이브러리 없음 ── */

.wm-bar-chart {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: var(--wm-bar-chart-height, 170px);
}

.wm-bar-chart-col {
	flex: 1 1 0;
	min-width: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
}

.wm-bar-chart-stack {
	width: 100%;
	max-width: 28px;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column-reverse; /* 첫 구간이 맨 아래 */
	justify-content: flex-start;
	border-radius: 4px 4px 0 0;
	overflow: hidden;
}

.wm-bar-chart-seg {
	display: block;
	width: 100%;
	background: var(--wm-bar-color, #60a5fa);
}

.wm-bar-chart-value {
	font-size: 11px;
	font-weight: 700;
	color: var(--wm-text);
	font-variant-numeric: tabular-nums;
}

.wm-bar-chart-label {
	font-size: 11px;
	color: var(--wm-text-sub);
	white-space: nowrap;
}

.wm-bar-chart-legend {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 8px;
	font-size: 12px;
	color: var(--wm-text-sub);
}

.wm-bar-chart-swatch {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--wm-bar-color, #60a5fa);
}

/* ── 11. 페이지 이동 (wani-m-pager.js) — 데스크톱 wani-grid 하단 바 클래스를 함께 쓴다 ── */

.wm-pager {
	display: flex;
	justify-content: center;
}

.wm-pager .pagination {
	flex-wrap: nowrap;
	--bs-pagination-color: var(--wm-brand);
	--bs-pagination-active-bg: var(--wm-brand);
	--bs-pagination-active-border-color: var(--wm-brand);
}

.wm-pager .dropdown-menu {
	min-width: 0;
	--bs-dropdown-link-active-bg: var(--wm-brand);
}

/* fixed: 화면 아래 가운데(하단 탭 바로 위). 드롭다운이 Popper fixed 전략이라 transform 으로 가운데를 맞추지 않는다
   (transform 이 있으면 fixed 기준점이 이 요소로 바뀌어 메뉴가 엉뚱한 곳에 뜬다) — 좌우 0 + flex 가운데 정렬 */
.wm-pager.wm-pager-fixed {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(var(--wm-bar-bottom) + var(--wm-safe-bottom) + 10px);
	z-index: 1024; /* 하단 액션 바(1025) 아래 */
	pointer-events: none; /* 양옆 빈 곳은 아래 목록을 누를 수 있게 */
}

.wm-pager.wm-pager-fixed > * {
	pointer-events: auto;
	border-radius: var(--bs-border-radius);
	box-shadow: 0 4px 14px rgba(16, 24, 40, 0.14);
}

.wm-pager-padded {
	padding-bottom: 64px;
}

/* 하단 액션 바가 같은 화면에 떠 있으면 그 위로 올린다 */
.wm-action-bar-padded .wm-pager.wm-pager-fixed {
	bottom: calc(var(--wm-bar-bottom) + var(--wm-safe-bottom) + 66px);
}

.wm-pager-padded.wm-action-bar-padded {
	padding-bottom: 120px;
}

/* ── 문서 페이지(/wani-component-mobile) 보정 ── */

.wm-docs-phone {
	max-width: 420px;
	margin: 0 auto;
	padding: 16px;
	border-radius: 24px;
	background: var(--wm-bg);
	box-shadow: inset 0 0 0 1px var(--wm-line);
	font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	color: var(--wm-text);
}

.wm-docs-card {
	background: var(--wm-card-bg);
	border-radius: var(--wm-card-radius);
	box-shadow: var(--wm-card-shadow);
	padding: 16px;
	margin-bottom: 12px;
}

.wm-docs-log {
	min-height: 1.5em;
	font-size: 12px;
	color: var(--wm-text-sub);
}