@charset "utf-8";
/**
 * ink 레이아웃 - 모바일 하단 고정 메뉴 (하단 내비게이션 바)
 *  아이콘(svg)이 문구 위에, 지금 보고 있는 메뉴는 --ink-tab-color 색
 *  --ink-tabbar-h : 바 높이 (지도 위젯 전체 화면 · 맨 위로 버튼이 이만큼 위로)
 */
:root { --ink-tab-color: #16a34a; --ink-tabbar-h: 0px; }
html.has_ink_tabbar { --ink-tabbar-h: calc(58px + env(safe-area-inset-bottom, 0px)); }
.ink_tabbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 98;
	display: flex; height: var(--ink-tabbar-h); padding-bottom: env(safe-area-inset-bottom, 0px);
	background: rgba(255, 255, 255, .97); border-top: 1px solid #e5e7eb;
	box-shadow: 0 -2px 12px rgba(15, 23, 42, .06);
	-webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px);
}
.ink_tabbar_space { height: var(--ink-tabbar-h); }
.ink_tab {
	flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	color: #6b7280 !important; text-decoration: none !important; font-size: 11px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em;
	-webkit-tap-highlight-color: transparent; transition: color .15s;
}
.ink_tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.ink_tab span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 2px; }
.ink_tab.is-on { color: var(--ink-tab-color) !important; font-weight: 800; }
.ink_tab.is-on svg { stroke-width: 2.2; }
.ink_tab:active svg { transform: scale(.9); }

/* 오른쪽 아래 버튼 (맨 위로 · 목록) 은 바 위로 */
html.has_ink_tabbar .layout_buttons { bottom: calc(var(--ink-tabbar-h) + 12px) !important; }

/* 다크모드 */
.darkmode .ink_tabbar, body.ink_pcframe_dark .ink_tabbar { background: rgba(24, 24, 27, .96); border-top-color: #2f2f35; box-shadow: none; }
.darkmode .ink_tab, body.ink_pcframe_dark .ink_tab { color: #9ca3af !important; }
.darkmode .ink_tab.is-on, body.ink_pcframe_dark .ink_tab.is-on { color: var(--ink-tab-color) !important; }

/* PC 고정 폭 틀: 틀 폭에 맞춤 (휴대폰 크기 틀은 body 기준이라 그대로) */
body.ink_pcframe .ink_tabbar { left: var(--ink-frame-side) !important; right: auto !important; width: var(--ink-frame-cw) !important; }
body.ink_pcframe_device .ink_tabbar { left: 0 !important; width: 100% !important; }