/*
 * Mobile-only user UI layer.
 * This file is loaded only by non-admin user/login layouts and every rule is
 * additionally scoped to html.mobile-user-ui-root plus mobile breakpoints.
 * Desktop and /admin pages must remain visually unchanged.
 */

@media (max-width: 1024px) {
	html.mobile-user-ui-root,
	html.mobile-user-ui-root body {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}

	/*
	 * The mobile script is deferred, so body.mobile-has-sidebar is added after
	 * the first HTML paint. Keep the user sidebar closed from the CSS layer
	 * as soon as the shell markup exists to prevent a reload/search flash.
	 */
	html.mobile-user-ui-root div.main-wrapper:not(.other-layout) {
		display: block !important;
		grid-template-columns: none !important;
		grid-template-rows: none !important;
		width: 100% !important;
		height: auto !important;
		min-height: 100dvh;
		overflow-x: hidden;
		background: #f7faf9;
	}

	html.mobile-user-ui-root div.main-wrapper:not(.other-layout) main.main {
		width: 100% !important;
		max-width: 100vw !important;
		min-width: 0 !important;
		min-height: 100dvh;
		overflow-x: hidden !important;
		overflow-y: visible !important;
		padding-bottom: calc(28px + env(safe-area-inset-bottom));
	}

	html.mobile-user-ui-root body:not(.mobile-sidebar-open) div.main-wrapper:not(.other-layout) > .side-bar {
		position: fixed !important;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1080;
		width: min(86vw, 320px) !important;
		max-width: 320px;
		height: 100dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: #fff;
		box-shadow: 18px 0 40px rgba(15, 35, 28, 0.18);
		transform: translateX(-105%) !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
		will-change: transform;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar {
		background: #f7faf9;
		color: #202820;
		-webkit-text-size-adjust: 100%;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar div.main-wrapper:not(.other-layout) {
		display: block !important;
		grid-template-columns: none !important;
		grid-template-rows: none !important;
		width: 100% !important;
		height: auto !important;
		min-height: 100dvh;
		overflow-x: hidden;
		background: #f7faf9;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main {
		width: 100% !important;
		max-width: 100vw !important;
		min-width: 0 !important;
		min-height: 100dvh;
		overflow-x: hidden !important;
		overflow-y: visible !important;
		padding-bottom: calc(28px + env(safe-area-inset-bottom));
	}

	html.mobile-user-ui-root body.mobile-user-ui-ready .footer {
		display: none !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar .side-bar {
		position: fixed !important;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1080;
		width: min(86vw, 320px) !important;
		max-width: 320px;
		height: 100dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: #fff;
		box-shadow: 18px 0 40px rgba(15, 35, 28, 0.18);
		transform: translateX(-105%);
		transition: transform 220ms ease;
		will-change: transform;
	}

	html.mobile-user-ui-root body.mobile-sidebar-open .side-bar {
		transform: translateX(0) !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	html.mobile-user-ui-root body.mobile-sidebar-open {
		overflow: hidden;
	}

	html.mobile-user-ui-root .mobile-sidebar-backdrop {
		position: fixed;
		inset: 0;
		z-index: 1070;
		display: none;
		background: rgba(0, 0, 0, 0.34);
		backdrop-filter: blur(2px);
	}

	html.mobile-user-ui-root body.mobile-sidebar-open .mobile-sidebar-backdrop {
		display: block;
	}

	html.mobile-user-ui-root body.mobile-sidebar-open .swal2-container {
		z-index: 12000 !important;
	}

	html.mobile-user-ui-root body.mobile-sidebar-open .sweet-overlay {
		z-index: 11990 !important;
	}

	html.mobile-user-ui-root body.mobile-sidebar-open .sweet-alert {
		z-index: 12000 !important;
	}

	html.mobile-user-ui-root .mobile-menu-toggle {
		position: fixed;
		top: calc(12px + env(safe-area-inset-top));
		left: 12px;
		z-index: 16005;
		width: 44px;
		height: 44px;
		display: none;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 5px;
		padding: 0;
		border: 1px solid rgba(0, 178, 122, 0.18);
		border-radius: 14px;
		background: rgba(255, 255, 255, 0.96);
		box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
		cursor: pointer;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar .mobile-menu-toggle {
		display: flex;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}

	html.mobile-user-ui-root .mobile-menu-toggle span {
		display: block;
		width: 18px;
		height: 2px;
		border-radius: 999px;
		background: var(--color-primary, #00b27a);
	}

	html.mobile-user-ui-root body.mobile-sidebar-open .mobile-menu-toggle {
		background: var(--color-primary, #00b27a);
	}

	html.mobile-user-ui-root body.mobile-sidebar-open .mobile-menu-toggle span {
		background: #fff;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar .side-bar .side-bar-info .logo {
		height: auto;
		min-height: 84px;
		padding: 22px 24px 14px;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar .side-bar .account-info {
		margin: 0 16px;
		padding: 14px;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar .side-bar .account-info .name {
		font-size: 16px;
		line-height: 22px;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar .side-bar .account-info .role {
		font-size: 13px;
		line-height: 18px;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar .side-bar .dropdown.select-area .dropdown-btn {
		min-height: 44px;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar .side-bar .side-bar-navs {
		padding: 22px 16px 28px;
		gap: 20px;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar .side-bar .side-bar-navs .nav-list {
		gap: 8px;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar .side-bar .side-bar-navs .nav-list > p {
		margin: 0 0 2px;
		font-size: 12px;
		letter-spacing: -0.02em;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar .side-bar .side-bar-navs .nav-list > button {
		min-height: 46px;
		padding: 10px 12px;
		border-radius: 12px;
		font-size: 15px;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar .side-bar .side-bar-navs .nav-list > button .icon {
		flex: 0 0 auto;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .header {
		width: 100%;
		height: auto !important;
		min-height: 74px;
		padding: calc(18px + env(safe-area-inset-top)) 16px 14px 66px !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: center !important;
		gap: 10px;
		background: linear-gradient(180deg, rgba(247, 250, 249, 0.98), rgba(247, 250, 249, 0.92));
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .header .title,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .header h1 {
		margin: 0;
		font-size: 24px !important;
		font-weight: 800 !important;
		line-height: 1.28 !important;
		letter-spacing: -0.04em;
		color: #202820;
		word-break: keep-all;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .header .lnb {
		width: 100%;
		max-width: 100%;
		display: flex;
		align-items: center;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .header .lnb::-webkit-scrollbar,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .tab-header::-webkit-scrollbar {
		display: none;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .contents {
		width: 100% !important;
		max-width: 100vw !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 14px 16px 24px !important;
		display: block !important;
		box-sizing: border-box;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .card {
		max-width: 100%;
		box-sizing: border-box;
		border-radius: 18px;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .card-body.tab-body {
		width: 100%;
		max-width: 100%;
		padding: 0 !important;
		background: transparent !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .tab-header {
		width: 100%;
		display: flex !important;
		flex-flow: row nowrap !important;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 0 10px !important;
		margin: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .tab-header .nav-item {
		flex: 0 0 auto;
		margin: 0;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .tab-header .nav-link,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .tab-header .tab-btn,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .lnb button,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .lnb .lnb-item {
		min-height: 40px;
		padding: 10px 14px !important;
		border-radius: 999px !important;
		white-space: nowrap;
		font-size: 14px !important;
		font-weight: 700;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-tabs,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-tabs,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-tabs,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-tabs {
		position: sticky !important;
		top: calc(10px + env(safe-area-inset-top)) !important;
		z-index: 28 !important;
		align-items: center !important;
		gap: 6px !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 56px;
		margin: 2px 0 16px !important;
		padding: 7px !important;
		border: 1px solid rgba(80, 175, 126, 0.18);
		border-radius: 22px;
		background: rgba(255, 255, 255, 0.94) !important;
		box-shadow: 0 10px 26px rgba(15, 35, 28, 0.08);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		scrollbar-width: none;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-tabs::before,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-tabs::before,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-tabs::before,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-tabs::before {
		content: "\AD6C\C5ED";
		flex: 0 0 auto;
		padding: 0 7px 0 5px;
		color: #6f7d78;
		font-size: 12px;
		font-weight: 800;
		line-height: 1;
		letter-spacing: -0.02em;
		white-space: nowrap;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-tabs .nav-item,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-tabs .nav-item,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-tabs .nav-item,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-tabs .nav-item {
		margin: 0 !important;
		max-width: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-tabs .nav-link,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-tabs .tab-btn,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-tabs .nav-link,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-tabs .tab-btn,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-tabs .nav-link,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-tabs .tab-btn,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-tabs .nav-link,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-tabs .tab-btn {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		min-height: 42px;
		padding: 0 14px !important;
		border: 0 !important;
		border-radius: 16px !important;
		background: #f5f8f6 !important;
		color: #4b5a55 !important;
		box-shadow: none !important;
		font-size: 15px !important;
		font-weight: 900;
		letter-spacing: -0.02em;
		line-height: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-tabs .nav-link.active,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-tabs .tab-btn.active,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-tabs .nav-link.active,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-tabs .tab-btn.active,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-tabs .nav-link.active,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-tabs .tab-btn.active,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-tabs .nav-link.active,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-tabs .tab-btn.active {
		background: linear-gradient(135deg, #00b27a 0%, #35c894 100%) !important;
		color: #fff !important;
		box-shadow: 0 8px 18px rgba(0, 178, 122, 0.24) !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-count-1,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-count-1,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-count-1,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-count-1 {
		justify-content: flex-start;
		min-height: 50px;
		padding-right: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-count-1 .nav-item,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-count-1 .nav-item,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-count-1 .nav-item,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-count-1 .nav-item {
		flex: 0 1 auto !important;
		min-width: 0;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-count-1 .tab-btn,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-count-1 .tab-btn,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-count-1 .tab-btn,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-count-1 .tab-btn {
		width: auto !important;
		min-width: 78px;
		max-width: 180px;
		min-height: 36px;
		padding: 0 14px !important;
		background: rgba(0, 178, 122, 0.11) !important;
		border: 1px solid rgba(0, 178, 122, 0.22) !important;
		color: #008f62 !important;
		box-shadow: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-count-1 .tab-btn.active::before,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-count-1 .tab-btn.active::before,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-count-1 .tab-btn.active::before,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-count-1 .tab-btn.active::before {
		content: "\D604\C7AC";
		margin-right: 6px;
		color: rgba(0, 143, 98, 0.7);
		font-size: 11px;
		font-weight: 800;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-count-2 .nav-item,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-count-3 .nav-item,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-count-2 .nav-item,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-count-3 .nav-item,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-count-2 .nav-item,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-count-3 .nav-item,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-count-2 .nav-item,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-count-3 .nav-item {
		flex: 1 1 0 !important;
		min-width: 74px;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-count-4,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-count-5,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-count-6,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-count-4,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-count-5,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-count-6,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-count-4,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-count-5,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-count-6,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-count-4,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-count-5,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-count-6 {
		justify-content: flex-start;
		overflow-x: auto !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-count-4 .nav-item,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-count-5 .nav-item,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-count-6 .nav-item,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-count-4 .nav-item,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-count-5 .nav-item,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-count-6 .nav-item,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-count-4 .nav-item,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-count-5 .nav-item,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-count-6 .nav-item,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-count-4 .nav-item,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-count-5 .nav-item,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-count-6 .nav-item {
		flex: 0 0 auto !important;
		min-width: 64px;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-count-4 .tab-btn,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-count-5 .tab-btn,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .tab-header.mobile-section-count-6 .tab-btn,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-count-4 .tab-btn,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-count-5 .tab-btn,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .tab-header.mobile-section-count-6 .tab-btn,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-count-4 .tab-btn,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-count-5 .tab-btn,
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-header.mobile-section-count-6 .tab-btn,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-count-4 .tab-btn,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-count-5 .tab-btn,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .tab-header.mobile-section-count-6 .tab-btn {
		min-width: 64px;
		max-width: 128px;
		padding: 0 12px !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .tab-content {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		border-radius: 18px !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .tab-content > .tab-pane.active,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .tab-content > .tab-pane.active.show {
		width: 100%;
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		padding: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .graph,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .plant-list,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .statistics,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .calendar-week,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .memo,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .list,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .setting {
		width: 100% !important;
		min-width: 0 !important;
		min-height: auto !important;
		padding: 18px !important;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .graph h2,
	html.mobile-user-ui-root body.mobile-dashboard-page main.main .plant-list h2,
	html.mobile-user-ui-root body.mobile-dashboard-page main.main .statistics h2,
	html.mobile-user-ui-root body.mobile-dashboard-page main.main .calendar-week h2 {
		display: flex !important;
		align-items: flex-start !important;
		justify-content: space-between !important;
		gap: 12px;
		font-size: 18px !important;
		line-height: 1.35 !important;
		word-break: keep-all;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .graph h2 > div {
		min-width: 0;
		flex-wrap: wrap;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .graph {
		justify-content: flex-start !important;
		gap: 14px !important;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .chart-legend {
		width: 100%;
		flex-wrap: wrap;
		gap: 8px !important;
		font-size: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .chart-container {
		width: 100% !important;
		flex: 0 0 208px !important;
		height: 208px !important;
		max-height: 208px !important;
		min-height: 196px;
		overflow: hidden;
		position: relative;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main canvas {
		max-width: 100% !important;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .chart-container canvas {
		width: 100% !important;
		height: 100% !important;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .plant-list .list-item {
		width: 100%;
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .plant-list .plant {
		width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .plant-list .plant img {
		width: 100% !important;
		height: 96px !important;
		object-fit: cover;
		border-radius: 14px;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .statistics-top,
	html.mobile-user-ui-root body.mobile-dashboard-page main.main .statistics-bottom {
		width: 100%;
		display: flex !important;
		flex-flow: row wrap !important;
		align-items: stretch !important;
		gap: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .statistics-row {
		width: 100%;
		display: flex !important;
		flex-flow: row wrap !important;
		gap: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .statistics-item {
		flex: 1 1 calc(50% - 6px) !important;
		min-width: 142px !important;
		max-width: none !important;
		min-height: 112px !important;
		padding: 14px !important;
		border-radius: 16px !important;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .statistics-item .name {
		font-size: 15px !important;
		line-height: 1.3 !important;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .statistics-item .value {
		font-size: 24px !important;
		line-height: 1.25 !important;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .statistics-item .state {
		font-size: 13px !important;
		gap: 6px;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .chip {
		min-height: 30px;
		padding: 6px 10px;
		border-radius: 999px;
		font-size: 13px;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .calendar-week #calendar {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .calendar-week table {
		min-width: 680px;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .mobile-table-card,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .card.list,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .list {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.mobile-scroll-table,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.dataTable,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.table {
		width: 100% !important;
		min-width: 720px;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_wrapper {
		width: 100% !important;
		max-width: 100%;
		overflow-x: visible;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_wrapper .row {
		display: block !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_wrapper [class*='col-'] {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_length,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_filter,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_info,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_paginate {
		width: 100%;
		margin: 0 0 10px !important;
		text-align: left !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_filter label,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_length label {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 6px;
		font-size: 13px;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_filter input,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_length select {
		width: 100% !important;
		max-width: 100%;
		min-height: 42px;
		margin-left: 0 !important;
		border-radius: 10px;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_paginate {
		display: flex;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .list-item,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .faq-list,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .noti-list {
		max-width: 100%;
		box-sizing: border-box;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .buttons,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .button-group,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .search,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .filter,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .list-bottom {
		max-width: 100%;
		flex-wrap: wrap !important;
		gap: 10px !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .buttons > button,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main button.save,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .card h2 > button,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main a.btn,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main button.btn {
		min-height: 42px;
		border-radius: 12px;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
	html.mobile-user-ui-root body.mobile-has-sidebar main.main select,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main textarea {
		max-width: 100%;
		min-height: 42px;
		font-size: 16px;
		border-radius: 10px;
		box-sizing: border-box;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main textarea {
		min-height: 120px;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar .modal,
	html.mobile-user-ui-root body.mobile-has-sidebar .mobile-safe-modal {
		padding: 16px !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar .modal .modal-wrapper,
	html.mobile-user-ui-root body.mobile-has-sidebar .modal-wrapper,
	html.mobile-user-ui-root body.mobile-has-sidebar .modal-dialog {
		width: calc(100vw - 32px) !important;
		max-width: calc(100vw - 32px) !important;
		max-height: calc(100dvh - 32px) !important;
		margin: 16px auto !important;
		overflow-y: auto;
		border-radius: 18px !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar .modal .modal-contents,
	html.mobile-user-ui-root body.mobile-has-sidebar .modal-body {
		max-height: calc(100dvh - 180px);
		overflow-y: auto;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar .modal .modal-btns,
	html.mobile-user-ui-root body.mobile-has-sidebar .modal-footer {
		position: sticky;
		bottom: 0;
		z-index: 1;
		display: flex !important;
		flex-wrap: wrap;
		gap: 8px;
		justify-content: stretch !important;
		background: #fff;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar .modal .modal-btns > button,
	html.mobile-user-ui-root body.mobile-has-sidebar .modal-footer > button {
		flex: 1 1 0;
		min-height: 44px;
	}

	html.mobile-user-ui-root body.mobile-login-page {
		min-height: 100dvh;
		background: #f7faf9;
		overflow-x: hidden;
	}

	html.mobile-user-ui-root body.mobile-login-page main.main {
		width: 100%;
		min-height: 100dvh;
		overflow-x: hidden;
	}

	html.mobile-user-ui-root body.mobile-login-page main.main .contents-wrapper {
		width: 100%;
		min-height: calc(100dvh - 72px);
		padding: calc(22px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom)) !important;
		box-sizing: border-box;
	}

	html.mobile-user-ui-root body.mobile-login-page main.main .contents.card {
		width: min(100%, 420px) !important;
		max-width: calc(100vw - 32px) !important;
		padding: 32px 22px !important;
		border-radius: 22px;
	}

	html.mobile-user-ui-root body.mobile-login-page main.main .logo {
		max-width: 240px;
		margin-left: auto;
		margin-right: auto;
	}

	html.mobile-user-ui-root body.mobile-login-page main.main .user {
		width: 100% !important;
		min-width: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-login-page main.main .user input:not([type='checkbox']) {
		width: 100% !important;
		min-height: 48px;
		font-size: 16px;
	}

	html.mobile-user-ui-root body.mobile-login-page main.main .user label {
		min-height: 36px;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;
	}

	html.mobile-user-ui-root body.mobile-login-page main.main #login-button,
	html.mobile-user-ui-root body.mobile-login-page main.main .signup-button,
	html.mobile-user-ui-root body.mobile-login-page main.main .password-reset-button {
		min-height: 48px;
		font-size: 15px;
	}

	html.mobile-user-ui-root body.mobile-login-page .signup-modal {
		padding: 16px;
	}

	html.mobile-user-ui-root body.mobile-login-page .signup-modal__panel {
		width: calc(100vw - 32px) !important;
		max-width: 480px !important;
		max-height: calc(100dvh - 32px) !important;
		border-radius: 20px;
	}

	html.mobile-user-ui-root body.mobile-login-page .signup-modal__body {
		max-height: calc(100dvh - 210px);
		overflow-y: auto;
	}

	html.mobile-user-ui-root body.mobile-login-page .signup-modal__footer {
		position: sticky;
		bottom: 0;
		background: #fff;
	}
}

@media (max-width: 768px) {
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .contents {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .header {
		padding-right: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .plant-list .list-item {
		grid-template-columns: 1fr 1fr;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.mobile-scroll-table,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.dataTable,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.table {
		min-width: 640px;
	}
}

@media (max-width: 430px) {
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .header .title,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .header h1 {
		font-size: 22px !important;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .statistics-item {
		flex-basis: 100% !important;
		min-width: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-dashboard-page main.main .plant-list .list-item {
		grid-template-columns: 1fr;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.mobile-scroll-table,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.dataTable,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.table {
		min-width: 560px;
	}
}

/*
 * Mobile UX redesign layer.
 * Keep this section route-scoped so desktop and /admin screens are unchanged.
 */
@media (max-width: 1024px) {
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .contents-wrapper {
		width: 100% !important;
		max-width: 100vw !important;
		min-width: 0 !important;
		padding: 0 !important;
		overflow-x: hidden !important;
		box-sizing: border-box;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .contents-wrapper > h2 {
		margin: 12px 16px 18px !important;
		color: var(--color-primary, #00b27a) !important;
		font-size: clamp(26px, 7vw, 38px) !important;
		font-weight: 800 !important;
		line-height: 1.22 !important;
		letter-spacing: -0.05em !important;
		word-break: keep-all;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .contents-wrapper > .row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .contents-wrapper > .row > [class*='col-'],
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .contents .row > [class*='col-'] {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .card.graph,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .card.list,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .card.setting,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .chat-card {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		border-radius: 22px !important;
		box-sizing: border-box;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .graph .buttons,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .graph .buttons .search,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .graph .buttons .date-range,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .graph .buttons .filters {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-width: 0 !important;
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: stretch !important;
		gap: 10px !important;
		box-sizing: border-box;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .graph .buttons .date-range {
		padding: 10px !important;
		border-radius: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .graph .buttons .date-range input[type='date'] {
		flex: 1 1 145px;
		min-width: 0;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .graph .buttons button.range,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .graph .buttons button.action,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main button.folder-open {
		min-height: 44px !important;
		border-radius: 12px !important;
		font-size: 15px !important;
		font-weight: 700 !important;
		white-space: nowrap;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .header-container,
	html.mobile-user-ui-root body.mobile-page-variety-list main.main .graph .header-container {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph {
		height: auto !important;
		min-height: 0 !important;
		padding: 18px !important;
		gap: 16px !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph h3,
	html.mobile-user-ui-root body.mobile-page-variety-list main.main .graph h3 {
		margin: 0 !important;
		font-size: 22px !important;
		line-height: 1.3 !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .chart-container {
		width: 100% !important;
		height: 240px !important;
		min-height: 220px !important;
		max-height: 280px !important;
		overflow: hidden;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph canvas {
		width: 100% !important;
		height: 100% !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .noti-list:empty::before {
		content: '알림 내역이 없습니다.';
		display: flex;
		min-height: 180px;
		align-items: center;
		justify-content: center;
		border-radius: 18px;
		background: #fff;
		color: #8a98ac;
		font-weight: 700;
	}
}

@media (max-width: 768px) {
	/* DataTables / plain tables become readable mobile cards. */
	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.mobile-card-table {
		width: 100% !important;
		min-width: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.mobile-card-table thead {
		display: none !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.mobile-card-table,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.mobile-card-table tbody,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.mobile-card-table tr,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.mobile-card-table td {
		display: block !important;
		box-sizing: border-box;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.mobile-card-table tbody tr {
		margin: 0 0 12px !important;
		padding: 12px !important;
		border: 1px solid #e8eef2 !important;
		border-radius: 16px !important;
		background: #fff !important;
		box-shadow: 0 8px 22px rgba(15, 35, 28, 0.06);
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.mobile-card-table tbody td {
		width: 100% !important;
		min-height: 38px;
		padding: 8px 0 !important;
		border: 0 !important;
		border-bottom: 1px solid #eef2f5 !important;
		color: #27313b !important;
		font-size: 15px !important;
		line-height: 1.35 !important;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.mobile-card-table tbody td:last-child {
		border-bottom: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.mobile-card-table tbody td:not([colspan]) {
		display: grid !important;
		grid-template-columns: minmax(90px, 38%) minmax(0, 1fr);
		gap: 10px;
		align-items: center;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.mobile-card-table tbody td:not([colspan])::before {
		content: attr(data-mobile-label);
		color: #7b8b9b;
		font-size: 13px;
		font-weight: 800;
		letter-spacing: -0.02em;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main table.mobile-card-table tbody td[colspan] {
		text-align: center !important;
		color: #8a98ac !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_wrapper .dataTables_length label,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_wrapper .dataTables_filter label {
		font-size: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_wrapper .dataTables_length label::before {
		content: '표시 개수';
		font-size: 14px;
		font-weight: 800;
		color: #27313b;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_wrapper .dataTables_filter label::before {
		content: '검색';
		font-size: 14px;
		font-weight: 800;
		color: #27313b;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_wrapper .dataTables_info {
		font-size: 13px !important;
		color: #7b8b9b !important;
	}

	html.mobile-user-ui-root body.mobile-has-sidebar main.main .dataTables_paginate .paginate_button {
		min-width: 44px !important;
		min-height: 44px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* FullCalendar must not inherit mobile table min-width rules. */
	html.mobile-user-ui-root body.mobile-has-sidebar main.main #calendar,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main #calendar .fc,
	html.mobile-user-ui-root body.mobile-has-sidebar main.main #calendar table {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .left-side {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 12px 10px !important;
		justify-content: flex-end !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .left-side button.save {
		min-height: 48px !important;
		padding: 0 18px !important;
		border-radius: 14px !important;
		font-size: 16px !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-calendar main.main #calendar {
		margin: 12px 0 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .fc .fc-toolbar.fc-header-toolbar {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		gap: 8px !important;
		margin-bottom: 14px !important;
		align-items: center !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .fc .fc-toolbar-chunk {
		display: flex !important;
		gap: 6px !important;
		justify-content: center !important;
		min-width: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .fc .fc-toolbar-title {
		margin: 0 !important;
		font-size: clamp(22px, 7vw, 30px) !important;
		line-height: 1.2 !important;
		white-space: nowrap;
	}

	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .fc .fc-button {
		min-width: 44px !important;
		min-height: 44px !important;
		padding: 8px 10px !important;
		border-radius: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .fc .fc-daygrid-day-frame {
		min-height: 70px !important;
		padding: 2px !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .fc .fc-col-header-cell-cushion,
	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .fc .fc-daygrid-day-number {
		font-size: 13px !important;
		line-height: 1.2 !important;
		padding: 4px !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .fc .event-title {
		font-size: 11px !important;
		line-height: 1.25 !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-daygrid-day-frame,
	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .fc .fc-daygrid-day-frame {
		position: relative !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-daygrid-day-top,
	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .fc .fc-daygrid-day-top {
		position: relative !important;
		z-index: 1;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-daygrid-day-events,
	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .fc .fc-daygrid-day-events {
		display: flex !important;
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		align-content: center !important;
		justify-content: center !important;
		gap: 2px !important;
		width: 42px !important;
		height: 20px !important;
		min-height: 20px !important;
		max-height: 20px !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-daygrid-event-harness,
	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .fc .fc-daygrid-event-harness {
		display: flex !important;
		flex: 0 0 20px !important;
		align-items: center !important;
		justify-content: center !important;
		width: 20px !important;
		height: 20px !important;
		min-height: 20px !important;
		margin: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-daygrid-event,
	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .fc .fc-daygrid-event {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 20px !important;
		min-width: 20px !important;
		max-width: 20px !important;
		height: 20px !important;
		min-height: 20px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		overflow: hidden !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-event-main,
	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .fc .fc-event-main,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-event-main > div,
	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .fc .fc-event-main > div {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 20px !important;
		height: 20px !important;
		gap: 0 !important;
		overflow: hidden !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .event-title,
	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .fc .event-title {
		display: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .event-icon,
	html.mobile-user-ui-root body.mobile-page-note-calendar main.main .fc .event-icon {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 20px !important;
		height: 20px !important;
		font-size: 14px !important;
		line-height: 1 !important;
	}

	/* Value setting: stack each module into a phone-friendly card. */
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .contents {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting {
		padding: 16px !important;
		gap: 16px !important;
		overflow: visible !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting .buttons {
		width: 100%;
		position: sticky;
		top: 74px;
		z-index: 8;
		padding: 6px 0 12px;
		background: linear-gradient(180deg, #fff 70%, rgba(255, 255, 255, 0));
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting .buttons .dropdown-unused {
		display: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting .buttons button.save {
		width: 100%;
		min-height: 48px !important;
		border-radius: 14px !important;
		font-size: 16px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item {
		width: 100% !important;
		min-width: 0 !important;
		padding: 18px !important;
		gap: 14px !important;
		border-radius: 18px !important;
		box-shadow: 0 8px 24px rgba(15, 35, 28, 0.05);
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item > .name {
		height: auto !important;
		min-height: 44px !important;
		font-size: 24px !important;
		line-height: 1.25 !important;
		word-break: keep-all;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item > .name > .name-icon {
		width: 32px !important;
		height: 32px !important;
		font-size: 14px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .radio-area {
		height: auto !important;
		min-height: 44px !important;
		padding: 8px 0 !important;
		gap: 12px !important;
		flex-wrap: wrap !important;
		align-items: center !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .radio-area > label {
		flex: 1 1 150px;
		min-width: 0;
		font-size: 17px !important;
		line-height: 1.35 !important;
		word-break: keep-all;
		white-space: normal;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item input[type='radio'] {
		width: 22px !important;
		height: 22px !important;
		flex: 0 0 auto;
		margin-right: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .common-list,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-list {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 8px 0 !important;
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 10px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .common-list > p,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-list > p {
		flex: 0 0 96px;
		margin: 0 !important;
		padding-left: 0 !important;
		font-size: 16px !important;
		font-weight: 800 !important;
		line-height: 1.35 !important;
		word-break: keep-all;
		white-space: normal;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .common-list > input[type='text'],
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-list > input[type='text'],
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .radio-area > input[type='text'] {
		flex: 1 1 130px !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: 190px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-list > .px-2 {
		flex: 0 0 100%;
		width: 100%;
		height: 0;
		min-height: 0;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .manual-list,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .custom-list {
		width: 100% !important;
		padding: 3px 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 5px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-item,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .manual-item,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .custom-item {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 8px 10px !important;
		gap: 5px !important;
		border-radius: 14px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .value,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .time-range {
		width: 100% !important;
		padding: 0 !important;
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 5px !important;
		transform: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-item .value,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .manual-item .value,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .custom-item .value {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-item p,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .manual-item p,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .custom-item p,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .custom-sub-item {
		width: 100% !important;
		max-width: 100% !important;
		writing-mode: horizontal-tb !important;
		text-orientation: mixed !important;
		word-break: keep-all !important;
		white-space: normal !important;
		line-height: 1.35 !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .custom-sub-item {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 5px !important;
		margin-bottom: 2px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .time-range > input[type='time'],
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .time-range > input[type='text'] {
		flex: 1 1 130px !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .value > button {
		min-height: 44px !important;
		font-size: 16px !important;
	}

	/* QNA page: scale banner and FAQ into readable mobile cards. */
	html.mobile-user-ui-root body.mobile-page-qna main.main .contents {
		gap: 22px !important;
		padding: 14px 12px 28px !important;
	}

	html.mobile-user-ui-root body.mobile-page-qna main.main .banner {
		padding: 24px 18px !important;
		display: block !important;
		overflow: hidden !important;
		border-radius: 22px !important;
	}

	html.mobile-user-ui-root body.mobile-page-qna main.main .banner img,
	html.mobile-user-ui-root body.mobile-page-qna main.main .banner picture {
		display: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-qna main.main .banner .banner-text {
		gap: 18px !important;
	}

	html.mobile-user-ui-root body.mobile-page-qna main.main .banner .text-area > :nth-child(1) {
		font-size: 16px !important;
		line-height: 1.45 !important;
		letter-spacing: -0.04em !important;
	}

	html.mobile-user-ui-root body.mobile-page-qna main.main .banner .text-area > :nth-child(2) {
		font-size: clamp(28px, 8vw, 38px) !important;
		line-height: 1.22 !important;
		letter-spacing: -0.06em !important;
	}

	html.mobile-user-ui-root body.mobile-page-qna main.main .banner .tel {
		width: 100% !important;
		min-height: 48px !important;
		max-width: 100% !important;
		padding: 10px 14px !important;
		box-sizing: border-box;
		font-size: 16px !important;
		line-height: 1.35 !important;
		white-space: normal !important;
	}

	html.mobile-user-ui-root body.mobile-page-qna main.main .buttons {
		width: 100%;
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-page-qna main.main .buttons > button {
		width: 100%;
		min-height: 56px !important;
		padding: 14px 18px !important;
		text-align: left;
		font-size: 20px !important;
	}

	html.mobile-user-ui-root body.mobile-page-qna main.main .faq .faq-list {
		padding: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-qna main.main .faq .faq-item {
		min-height: 0 !important;
		padding: 20px 4px !important;
		gap: 10px !important;
	}

	html.mobile-user-ui-root body.mobile-page-qna main.main .faq .faq-item .question {
		align-items: flex-start !important;
		gap: 12px !important;
		font-size: 20px !important;
		line-height: 1.28 !important;
		word-break: keep-all;
	}

	html.mobile-user-ui-root body.mobile-page-qna main.main .faq .faq-item .answer {
		font-size: 16px !important;
		line-height: 1.55 !important;
	}

	/* Variety and note forms/lists. */
	html.mobile-user-ui-root body.mobile-page-variety-list main.main .graph {
		padding: 18px !important;
		height: auto !important;
		min-height: 0 !important;
		gap: 14px !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-list main.main .graph h3 {
		width: 100%;
		margin: 0 0 2px !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-list main.main .graph .buttons .search {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 0 !important;
		gap: 10px !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-list main.main .graph .buttons .search > button.range {
		width: 100% !important;
		min-width: 0 !important;
		flex: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-list main.main .graph .buttons .date-range {
		grid-column: 1 / -1;
		width: 100% !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		padding: 10px !important;
		gap: 8px !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-list main.main .graph .buttons .date-range input[type='date'] {
		width: 100% !important;
		flex: 0 0 auto !important;
		text-align: center;
	}

	html.mobile-user-ui-root body.mobile-page-variety-list main.main .graph .buttons button.action {
		width: 100% !important;
		min-width: 0 !important;
		grid-column: span 1;
	}

	html.mobile-user-ui-root body.mobile-page-variety-list main.main .graph .buttons #openAddCropBtn {
		grid-column: span 2;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .form-row,
	html.mobile-user-ui-root body.mobile-page-variety-form main.main .form-row {
		display: block !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .contents-wrapper,
	html.mobile-user-ui-root body.mobile-page-note-form main.main .contents {
		height: auto !important;
		min-height: 0 !important;
		overflow: visible !important;
		box-sizing: border-box;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .contents {
		display: block !important;
		margin: 12px 16px 28px !important;
		width: auto !important;
		max-width: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .card.graph {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 16px !important;
		gap: 0 !important;
		overflow: visible !important;
		box-sizing: border-box;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .card.graph > .row,
	html.mobile-user-ui-root body.mobile-page-note-form main.main .card.graph .col-lg-12,
	html.mobile-user-ui-root body.mobile-page-note-form main.main .card.graph .card-body,
	html.mobile-user-ui-root body.mobile-page-note-form main.main #addForm {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		overflow: visible !important;
		box-sizing: border-box;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .contents-wrapper > .row.mx-0.mb-3 {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr);
		gap: 10px !important;
		margin: 0 16px 10px !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .contents-wrapper > .row.mx-0.mb-3 h2 {
		margin: 0 !important;
		font-size: 20px !important;
		line-height: 1.25 !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .card.graph .form-row:has(#inputDate),
	html.mobile-user-ui-root body.mobile-page-note-form main.main .card.graph .form-row:has(#inputTitle) {
		display: grid !important;
		grid-template-columns: minmax(118px, 0.8fr) minmax(0, 1.2fr);
		gap: 10px !important;
		align-items: start;
		margin-bottom: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .card.graph .form-row:has(#inputDate) .form-group,
	html.mobile-user-ui-root body.mobile-page-note-form main.main .card.graph .form-row:has(#inputTitle) .form-group {
		margin-bottom: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .form-label {
		display: block;
		margin-bottom: 5px !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		line-height: 1.3 !important;
		color: #3f4a45 !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .form-control,
	html.mobile-user-ui-root body.mobile-page-note-form main.main input[type='text'],
	html.mobile-user-ui-root body.mobile-page-note-form main.main input[type='date'],
	html.mobile-user-ui-root body.mobile-page-note-form main.main select,
	html.mobile-user-ui-root body.mobile-page-note-form main.main textarea {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		font-size: 15px !important;
		line-height: 1.35 !important;
		border-radius: 12px !important;
		box-sizing: border-box;
		background-color: #fff !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main input[type='text'],
	html.mobile-user-ui-root body.mobile-page-note-form main.main input[type='date'],
	html.mobile-user-ui-root body.mobile-page-note-form main.main select {
		min-height: 42px !important;
		padding: 8px 10px !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .flatpickr-input-with-icon {
		min-height: 42px !important;
		padding: 8px 34px 8px 10px !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main #inputDate,
	html.mobile-user-ui-root body.mobile-page-note-form main.main .flatpickr-input-with-icon {
		font-size: 13px !important;
		letter-spacing: -0.2px;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main input.form-control.flatpickr-input-with-icon[type='text'][readonly] {
		font-size: 13px !important;
		letter-spacing: -0.2px;
		padding-right: 30px !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main input#inputDate[type='date'] {
		padding-left: 8px !important;
		padding-right: 6px !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main h3 {
		margin: 16px 0 8px !important;
		font-size: 16px !important;
		line-height: 1.3 !important;
		color: #222 !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .form-group.col-md-12,
	html.mobile-user-ui-root body.mobile-page-note-form main.main .form-row.mt-1,
	html.mobile-user-ui-root body.mobile-page-note-form main.main .form-row.mb-2 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main textarea[name='inputNoteDesc'],
	html.mobile-user-ui-root body.mobile-page-note-form main.main textarea[name='inputMonitoringData'] {
		min-height: 92px !important;
		padding: 10px !important;
		resize: vertical;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .table-job-desc {
		min-height: 52px !important;
		padding: 7px 8px !important;
		font-size: 13px !important;
		line-height: 1.35 !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main #statistics-datatable_wrapper,
	html.mobile-user-ui-root body.mobile-page-note-form main.main #statistics-datatable {
		width: 100% !important;
		max-width: 100% !important;
		overflow: visible !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main #statistics-datatable_wrapper .row,
	html.mobile-user-ui-root body.mobile-page-note-form main.main #statistics-datatable_wrapper [class*='col-'] {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main #statistics-datatable th,
	html.mobile-user-ui-root body.mobile-page-note-form main.main #statistics-datatable td {
		padding: 7px !important;
		font-size: 12px !important;
		line-height: 1.35 !important;
		vertical-align: top !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main #statistics-datatable .dtr-details {
		width: 100% !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main #statistics-datatable .dtr-details > li {
		display: grid !important;
		grid-template-columns: minmax(76px, 0.38fr) minmax(0, 1fr);
		gap: 8px !important;
		align-items: start;
		padding: 6px 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main #statistics-datatable .dtr-title,
	html.mobile-user-ui-root body.mobile-page-note-form main.main #statistics-datatable .dtr-data {
		min-width: 0 !important;
		white-space: normal !important;
		word-break: keep-all;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .dataTables_info,
	html.mobile-user-ui-root body.mobile-page-note-form main.main .dataTables_paginate {
		font-size: 12px !important;
		line-height: 1.4 !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph {
		height: auto !important;
		min-height: 0 !important;
		padding: 18px !important;
		gap: 0 !important;
		overflow: visible !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main #addForm,
	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .buttons,
	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .buttons .search {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		display: block !important;
		overflow: visible !important;
		box-sizing: border-box;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .buttons .search {
		padding: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph h3 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		width: 100%;
		margin: 0 !important;
		font-size: 17px !important;
		line-height: 1.3 !important;
		color: #222 !important;
		white-space: nowrap;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph h3 .subtitle {
		display: inline-flex;
		flex: 0 1 auto;
		align-items: center;
		justify-content: flex-end;
		min-width: 0;
		margin-top: 0;
		margin-left: auto;
		font-size: 11px !important;
		font-weight: 600;
		line-height: 1.3 !important;
		text-align: right;
		word-break: keep-all;
		white-space: nowrap;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .search > .row.mb-3:nth-of-type(1) h3 .subtitle {
		font-size: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .search > .row.mb-3:nth-of-type(1) h3 .subtitle::after {
		content: "*기본 정보 입력란은 모두 필수";
		font-size: 11px !important;
		line-height: 1.3 !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .row.mb-3 {
		margin: 14px 0 8px !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .row.mb-3:first-child {
		margin-top: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .form-group,
	html.mobile-user-ui-root body.mobile-page-variety-form main.main .form-group {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-bottom: 14px !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .form-group > .px-2 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .form-label {
		display: block;
		margin-bottom: 5px !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		line-height: 1.3 !important;
		color: #3f4a45 !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .form-control,
	html.mobile-user-ui-root body.mobile-page-variety-form main.main input[type='text'],
	html.mobile-user-ui-root body.mobile-page-variety-form main.main input[type='number'],
	html.mobile-user-ui-root body.mobile-page-variety-form main.main input[type='date'] {
		width: 100% !important;
		min-width: 0 !important;
		min-height: 42px !important;
		padding: 8px 10px !important;
		font-size: 16px !important;
		line-height: 1.35 !important;
		border-radius: 12px !important;
		box-sizing: border-box;
		background-color: #fff !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .buttons .date-range,
	html.mobile-user-ui-root body.mobile-page-variety-form main.main .date-range {
		width: 100% !important;
		min-width: 0 !important;
		padding: 0 !important;
		display: block !important;
		border: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .buttons .date-range input[type='date'],
	html.mobile-user-ui-root body.mobile-page-variety-form main.main .date-range input[type='date'] {
		flex: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .form-row:has(#addStartDate),
	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .form-row:has(#addStage1) {
		display: grid !important;
		align-items: start;
		margin-bottom: 14px !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .form-row:has(#addStartDate) {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		column-gap: 10px;
		row-gap: 12px;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .form-row:has(#addStage1) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .form-row:has(#addEndDate) {
		margin-bottom: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .form-row:has(#addStartDate) .form-group,
	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .form-row:has(#addStage1) .form-group {
		margin-bottom: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .form-row:has(#addStartDate) .form-group:has(#addStartDate) {
		grid-column: 1;
		order: 1;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .form-row:has(#addStartDate) .form-group:has(#addQuantity) {
		grid-column: 2;
		order: 2;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .form-row:has(#addStartDate) .form-group:has(#addPlanName) {
		grid-column: 1 / -1;
		order: 3;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .card.graph .form-row:has(#addStartDate) .form-group:has(#addVarietyName) {
		grid-column: 1 / -1;
		order: 4;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .left-side,
	html.mobile-user-ui-root body.mobile-page-variety-form main.main .left-side {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 12px 12px !important;
		display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
		gap: 10px !important;
	}

	html.mobile-user-ui-root body.mobile-page-variety-form main.main .left-side {
		grid-template-columns: 1fr !important;
		padding: 0 0 14px !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .left-side button,
	html.mobile-user-ui-root body.mobile-page-variety-form main.main .left-side button {
		width: 100%;
		min-height: 48px !important;
		border-radius: 14px !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main #photoContainer {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px !important;
		margin: 0 !important;
		min-height: 0 !important;
		padding: 10px !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .photo-slot {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
		padding: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .photo-slot .add-area {
		height: 106px !important;
		min-height: 106px !important;
		border-radius: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-page-note-form main.main .photo-slot img {
		max-width: 100% !important;
		height: auto !important;
	}

	/* AI chat page: app-like chat viewport and stable composer. */
	html.mobile-user-ui-root body.mobile-page-ai main.main .contents {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-page-ai main.main .chat-card {
		margin: 0 !important;
		overflow: hidden !important;
	}

	html.mobile-user-ui-root body.mobile-page-ai main.main .chat-card .card-body {
		height: calc(100dvh - 244px) !important;
		min-height: 520px !important;
		max-height: none !important;
		padding: 14px !important;
		overflow: hidden !important;
	}

	html.mobile-user-ui-root body.mobile-page-ai main.main #chatBox {
		min-height: 0 !important;
		padding: 12px !important;
		border-radius: 18px !important;
	}

	html.mobile-user-ui-root body.mobile-page-ai main.main #chatBox.is-empty::before {
		background-size: min(46vw, 160px) auto !important;
		opacity: 0.16 !important;
	}

	html.mobile-user-ui-root body.mobile-page-ai main.main #chatBox.is-empty::after {
		width: calc(100% - 32px) !important;
		bottom: 18% !important;
		font-size: 18px !important;
		line-height: 1.45 !important;
		white-space: normal !important;
	}

	html.mobile-user-ui-root body.mobile-page-ai main.main .chat-input {
		flex: 0 0 auto !important;
		margin-top: 10px !important;
		padding-top: 0 !important;
		background: transparent !important;
	}

	html.mobile-user-ui-root body.mobile-page-ai main.main .composer {
		align-items: flex-end !important;
		gap: 8px !important;
		padding: 10px !important;
		border-radius: 24px !important;
	}

	html.mobile-user-ui-root body.mobile-page-ai main.main .composer-textarea {
		min-height: 48px !important;
		max-height: 120px !important;
		line-height: 1.45 !important;
		padding: 11px 0 !important;
		font-size: 16px !important;
	}

	html.mobile-user-ui-root body.mobile-page-ai main.main .btn-icon,
	html.mobile-user-ui-root body.mobile-page-ai main.main .send-btn {
		width: 48px !important;
		height: 48px !important;
		flex: 0 0 48px !important;
	}
}

@media (max-width: 430px) {
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .common-list > p,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-list > p {
		flex-basis: 84px;
		font-size: 15px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .common-list > input[type='text'],
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-list > input[type='text'],
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .radio-area > input[type='text'] {
		max-width: 160px !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .buttons button.action,
	html.mobile-user-ui-root body.mobile-page-variety-list main.main .graph .buttons button.action {
		flex-basis: 100%;
	}

	html.mobile-user-ui-root body.mobile-page-ai main.main .chat-card .card-body {
		height: calc(100dvh - 230px) !important;
		min-height: 500px !important;
	}
}

/* Approved mobile UX refinement pass. Desktop and /admin remain untouched by
   html.mobile-user-ui-root + mobile viewport scoping. */
@media (max-width: 1024px) {
	/* Dashboard: make numeric status readable as compact mobile rows/cards. */
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .card.statistics {
		padding: 16px !important;
		gap: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .card.statistics h2 {
		margin-bottom: 4px !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .statistics-top,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .statistics-bottom,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .statistics-row {
		gap: 8px !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .statistics-item {
		flex: 1 1 100% !important;
		width: 100% !important;
		min-width: 0 !important;
		min-height: 78px !important;
		padding: 12px 14px !important;
		display: grid !important;
		grid-template-columns: minmax(76px, 0.42fr) minmax(0, 1fr);
		grid-template-areas:
			"name value"
			"name state";
		align-items: center !important;
		column-gap: 12px !important;
		row-gap: 4px !important;
		border-radius: 16px !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .statistics-item .name {
		grid-area: name;
		margin: 0 !important;
		font-size: 15px !important;
		line-height: 1.2 !important;
		color: #34423a !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .statistics-item .value {
		grid-area: value;
		margin: 0 !important;
		font-size: clamp(22px, 6vw, 30px) !important;
		line-height: 1.12 !important;
		letter-spacing: -0.04em;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .statistics-item .state {
		grid-area: state;
		margin: 0 !important;
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 5px 8px !important;
		font-size: 12px !important;
		line-height: 1.25 !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .statistics-item.stat-type-actuator > div:not(.state) {
		grid-area: value;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 8px !important;
		min-width: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .statistics-item.stat-type-actuator .state {
		justify-content: flex-start !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .statistics-item .chip {
		min-height: 28px !important;
		padding: 5px 9px !important;
		font-size: 12px !important;
		line-height: 1 !important;
	}

	/* Dashboard weekly calendar: no inner horizontal scrolling, today beside title. */
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week {
		padding: 16px !important;
		overflow: hidden !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week h2 {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: center !important;
		gap: 8px !important;
		margin-bottom: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week h2 .mobile-calendar-today,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week h2 .mobile-calendar-more {
		position: static !important;
		width: auto !important;
		min-width: 54px !important;
		min-height: 38px !important;
		padding: 8px 12px !important;
		border: 0 !important;
		border-radius: 12px !important;
		font-size: 13px !important;
		font-weight: 800 !important;
		box-shadow: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week h2 .mobile-calendar-today {
		background: rgba(0, 178, 122, 0.16) !important;
		color: var(--color-primary, #00b27a) !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week #calendar {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		overflow-x: hidden !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week #calendar .fc,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week #calendar .fc-view-harness,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week #calendar .fc-scrollgrid,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week #calendar table {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-toolbar.fc-header-toolbar {
		margin: 0 0 10px !important;
		position: relative !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		min-height: 52px !important;
		padding: 0 56px !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-toolbar-chunk {
		display: flex !important;
		justify-content: center !important;
		min-width: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-toolbar-chunk:first-child {
		display: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-toolbar-chunk:last-child {
		display: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-toolbar-chunk:nth-child(2) {
		width: 100% !important;
		justify-content: center !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-prev-button,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-next-button {
		position: absolute !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-prev-button {
		left: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-next-button {
		right: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-toolbar-title {
		font-size: 20px !important;
		line-height: 1.2 !important;
		color: var(--color-primary, #00b27a) !important;
		white-space: nowrap;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-button {
		min-width: 44px !important;
		min-height: 44px !important;
		padding: 0 !important;
		border-radius: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-col-header-cell-cushion,
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-daygrid-day-number {
		display: block !important;
		width: 100% !important;
		padding: 4px 1px !important;
		text-align: center !important;
		font-size: clamp(10px, 3.1vw, 12px) !important;
		line-height: 1.15 !important;
		white-space: normal !important;
		word-break: keep-all !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week .fc .fc-daygrid-day-frame {
		min-height: 72px !important;
		padding: 0 !important;
	}

	/* Statistics: search flow, legend, chart, and data cards. */
	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .buttons .search {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .buttons .search > button.range {
		width: 100% !important;
		min-width: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .buttons .date-range {
		grid-column: 1 / span 2;
		width: 100% !important;
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"start start"
			"sep end";
		align-items: center !important;
		gap: 3px 6px !important;
		min-height: 72px !important;
		padding: 7px 10px !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .buttons .date-range input[type='date'] {
		width: 100% !important;
		min-width: 0 !important;
		height: 26px !important;
		min-height: 26px !important;
		padding: 0 2px !important;
		font-size: 12px !important;
		line-height: 24px !important;
		text-align: center;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .buttons .date-range input[type='date']:first-of-type {
		grid-area: start;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .buttons .date-range span {
		grid-area: sep;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .buttons .date-range input[type='date']:last-of-type {
		grid-area: end;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .buttons .search > button.action {
		width: 100% !important;
		min-width: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .buttons .search > button.action[onclick*='excelDownload'] {
		display: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .filters {
		display: flex !important;
		justify-content: flex-start !important;
		align-items: center !important;
		gap: 8px 12px !important;
		padding: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .filters > span,
	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .filters label .icon {
		display: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .filters label {
		display: inline-flex !important;
		align-items: center !important;
		min-height: 34px !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		color: #111 !important;
		font-size: 12px !important;
		font-weight: 800 !important;
		line-height: 1.2 !important;
		cursor: pointer;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .filters label input[type='checkbox'] {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .filters label:has(input[data-target='e']:checked) { color: #00b27a !important; }
	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .filters label:has(input[data-target='p']:checked) { color: #6f7bd9 !important; }
	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .filters label:has(input[data-target='c']:checked) { color: #555b66 !important; }
	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .filters label:has(input[data-target='t']:checked) { color: #ff7272 !important; }
	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .filters label:has(input[data-target='h']:checked) { color: #8ec9ff !important; }
	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .filters label:has(input[data-target='w']:checked) { color: #4aa3ff !important; }

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .chart-container {
		height: min(288px, 62vw) !important;
		min-height: 240px !important;
		max-height: 304px !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .card.list {
		padding: 16px !important;
		overflow: visible !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main #statistics-datatable_wrapper .dataTables_length label {
		display: grid !important;
		grid-template-columns: auto minmax(86px, 1fr) auto;
		align-items: center;
		gap: 8px;
		font-size: 12px !important;
		color: #6d7b73;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main #statistics-datatable_wrapper .dataTables_paginate,
	html.mobile-user-ui-root body.mobile-page-statistics main.main #statistics-datatable_wrapper .pagination {
		width: 100% !important;
		max-width: 100% !important;
		margin: 10px 0 0 !important;
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
		gap: 6px !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main #statistics-datatable_wrapper .pagination .page-item,
	html.mobile-user-ui-root body.mobile-page-statistics main.main #statistics-datatable_wrapper .pagination .paginate_button {
		margin: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main #statistics-datatable_wrapper .pagination .page-link {
		min-width: 40px !important;
		min-height: 40px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		border-radius: 10px !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main table#statistics-datatable.mobile-card-table tbody tr {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px !important;
		padding: 10px !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main table#statistics-datatable.mobile-card-table tbody td {
		display: block !important;
		min-height: 42px !important;
		padding: 7px 8px !important;
		border: 1px solid #eef3f1 !important;
		border-radius: 10px !important;
		background: #fbfdfc !important;
		font-size: 13px !important;
		font-weight: 800 !important;
		color: #203027 !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main table#statistics-datatable.mobile-card-table tbody td::before {
		display: block !important;
		margin: 0 0 2px !important;
		font-size: 9px !important;
		font-weight: 900 !important;
		letter-spacing: 0.03em;
		color: #829089 !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main table#statistics-datatable.mobile-card-table tbody td.mobile-stat-date-cell {
		grid-column: 1 / -1;
		min-height: 36px !important;
		display: flex !important;
		align-items: center !important;
		gap: 8px !important;
		padding: 7px 10px !important;
		font-size: 13px !important;
		line-height: 1.2 !important;
		background: #f4faf7 !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main table#statistics-datatable.mobile-card-table tbody td.mobile-stat-date-cell::before {
		display: inline-flex !important;
		margin: 0 !important;
		flex: 0 0 auto;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main table#statistics-datatable.mobile-card-table tbody td.mobile-stat-time-cell {
		display: none !important;
	}

	/* Notification: prevent off-canvas filters and make real alarm data readable. */
	html.mobile-user-ui-root body.mobile-page-notification main.main .tab-pane > div[style*='width'] {
		width: 100% !important;
		max-width: 100% !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .filters {
		width: 100% !important;
		max-width: 100% !important;
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 12px !important;
		margin: 18px 0 20px !important;
		overflow: visible !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .filters .dropdown,
	html.mobile-user-ui-root body.mobile-page-notification main.main .filters .dropdown2 {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		min-width: 0 !important;
		overflow: visible !important;
		z-index: 1 !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .filters .dropdown.open,
	html.mobile-user-ui-root body.mobile-page-notification main.main .filters .dropdown2.open {
		z-index: 20 !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .filters .normal-contents {
		width: 100% !important;
		min-height: 52px !important;
		padding: 0 18px !important;
		border-radius: 18px !important;
		background: #fff !important;
		box-shadow: 0 8px 24px rgba(15, 35, 28, 0.06);
		font-size: 17px !important;
		font-weight: 800 !important;
		color: #202820 !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .filters .dropdown-contents {
		display: none !important;
		position: relative !important;
		z-index: 2 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 8px !important;
		transform: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .filters .dropdown.open .dropdown-contents,
	html.mobile-user-ui-root body.mobile-page-notification main.main .filters .dropdown2.open .dropdown-contents {
		display: block !important;
		visibility: visible !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .filters .options {
		width: 100% !important;
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px !important;
		padding: 8px !important;
		border-radius: 16px !important;
		background: #fff !important;
		box-shadow: 0 8px 24px rgba(15, 35, 28, 0.06);
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .filters .select-box {
		position: static !important;
		width: 100% !important;
		min-height: 42px !important;
		padding: 8px 10px !important;
		border-radius: 12px !important;
		font-size: 14px !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .filters .select-box p {
		margin: 0 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .noti-wrapper,
	html.mobile-user-ui-root body.mobile-page-notification main.main .noti-list {
		width: 100% !important;
		max-width: 100% !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .noti-list {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .noti-list.mobile-noti-empty::before {
		content: '조회된 알림이 없습니다.';
		display: flex !important;
		min-height: 160px;
		align-items: center;
		justify-content: center;
		border: 1px dashed #d7eee5;
		border-radius: 18px;
		background: #fff;
		color: #7f9089;
		font-size: 15px;
		font-weight: 800;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .noti-item {
		width: 100% !important;
		min-height: 0 !important;
		padding: 14px !important;
		border: 1px solid #e6f6ee !important;
		border-radius: 18px !important;
		background: #fff !important;
		box-shadow: 0 8px 24px rgba(15, 35, 28, 0.06);
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .noti-contents {
		width: 100% !important;
		display: grid !important;
		grid-template-columns: 34px minmax(0, 1fr) auto;
		grid-template-areas:
			"icon name section"
			"icon desc desc"
			"icon time time";
		gap: 6px 10px !important;
		align-items: start !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .noti-contents .name-icon {
		grid-area: icon;
		width: 28px !important;
		height: 28px !important;
		margin-top: 2px;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .noti-contents .name {
		grid-area: name;
		font-size: 13px !important;
		font-weight: 900 !important;
		text-transform: uppercase;
		color: var(--color-primary, #00b27a) !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .noti-contents .section {
		grid-area: section;
		min-width: 0 !important;
		padding: 4px 8px !important;
		border-radius: 999px !important;
		background: #f0fbf6 !important;
		color: #0a7f5b !important;
		font-size: 12px !important;
		font-weight: 900 !important;
		white-space: nowrap !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .noti-contents .description {
		grid-area: desc;
		width: 100% !important;
		font-size: 15px !important;
		font-weight: 800 !important;
		line-height: 1.45 !important;
		color: #202820 !important;
		word-break: keep-all;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .noti-contents .description span {
		color: inherit !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .noti-item.mobile-noti-alert .description {
		color: #f06464 !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .noti-item.mobile-noti-recovered .description {
		color: #007aff !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .noti-contents .time {
		grid-area: time;
		color: #7b8882 !important;
		font-size: 12px !important;
		font-weight: 700 !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main h3 {
		margin: 12px 0 !important;
		font-size: 20px !important;
	}

	/* Value setting: keep save reachable and reduce remaining dense controls. */
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting .buttons {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		z-index: 20 !important;
		margin: -2px 0 10px !important;
		padding: 10px 0 14px !important;
		border-bottom: 1px solid #eaf3ef !important;
		background: linear-gradient(180deg, #fff 82%, rgba(255, 255, 255, 0.94)) !important;
		transform: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting.mobile-value-save-fixed main.main .setting .buttons {
		position: fixed !important;
		top: calc(58px + env(safe-area-inset-top)) !important;
		left: 50% !important;
		width: min(420px, calc(100vw - 64px)) !important;
		max-width: calc(100vw - 64px) !important;
		z-index: 60 !important;
		transform: translateX(-50%) !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting.mobile-value-save-fixed::before {
		content: "";
		position: fixed;
		top: 0;
		left: 50%;
		width: min(420px, calc(100vw - 64px));
		max-width: calc(100vw - 64px);
		height: calc(58px + env(safe-area-inset-top));
		z-index: 58;
		pointer-events: none;
		transform: translateX(-50%);
		background: linear-gradient(180deg, #fff 0%, #fff 74%, rgba(255, 255, 255, 0.96) 100%);
		box-shadow: 0 8px 18px rgba(15, 35, 28, 0.04);
	}

	html.mobile-user-ui-root body.mobile-page-value-setting.mobile-value-save-fixed main.main .tab-header.mobile-section-tabs {
		position: fixed !important;
		top: calc(12px + env(safe-area-inset-top)) !important;
		left: 64px !important;
		right: 12px !important;
		width: auto !important;
		max-width: calc(100vw - 76px) !important;
		min-height: 44px !important;
		height: 44px !important;
		margin: 0 !important;
		padding: 4px !important;
		z-index: 1088 !important;
		align-items: center !important;
		gap: 4px !important;
		border-radius: 14px !important;
		box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10) !important;
		overflow-x: auto !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting.mobile-value-save-fixed main.main .tab-header.mobile-section-tabs::before {
		display: none !important;
		content: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting.mobile-value-save-fixed main.main .tab-header.mobile-section-tabs .nav-item {
		min-width: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting.mobile-value-save-fixed main.main .tab-header.mobile-section-tabs .tab-btn,
	html.mobile-user-ui-root body.mobile-page-value-setting.mobile-value-save-fixed main.main .tab-header.mobile-section-tabs .nav-link {
		min-height: 36px !important;
		padding: 0 12px !important;
		border-radius: 12px !important;
		font-size: 14px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .mobile-value-save-spacer {
		display: none;
		width: 100%;
		height: 0;
		flex: 0 0 auto;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting .buttons button.save {
		min-height: 52px !important;
		box-shadow: 0 8px 18px rgba(0, 178, 122, 0.18);
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .setting-content {
		display: flex !important;
		flex-direction: column !important;
		gap: 3px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item.mobile-collapsed .mobile-hide-when-collapsed {
		display: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item {
		padding: 16px !important;
		gap: 10px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item > .name {
		position: relative;
		padding-right: 42px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .toggle-fold {
		position: absolute !important;
		right: 0 !important;
		top: 50% !important;
		transform: translateY(-50%);
		width: 44px !important;
		height: 44px !important;
		justify-content: center !important;
		border-radius: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .toggle-fold img {
		width: 18px !important;
		height: 18px !important;
		transition: transform 0.2s ease;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item.mobile-expanded .toggle-fold img {
		transform: rotate(180deg);
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item.mobile-collapsed .toggle-fold img {
		transform: rotate(0deg);
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .radio-area {
		min-height: 0 !important;
		padding: 2px 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .radio-area > label,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .mobile-touch-label {
		min-height: 40px !important;
		margin-bottom: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 6px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-list,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .common-list {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 3px 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 5px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-list > span:empty:not(.mobile-unit-placeholder),
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .common-list > span:empty:not(.mobile-unit-placeholder),
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-list > .px-2,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .common-list > .px-2 {
		display: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-list > p,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .common-list > p {
		width: 100% !important;
		margin: 0 !important;
		font-size: 13px !important;
		font-weight: 700 !important;
		line-height: 1.25 !important;
		white-space: nowrap !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-list > input[type='text'],
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .common-list > input[type='text'] {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .mobile-setting-field-row {
		width: 100% !important;
		display: grid !important;
		grid-template-columns: minmax(82px, 0.8fr) minmax(0, 1fr) !important;
		align-items: center !important;
		column-gap: 8px !important;
		row-gap: 5px !important;
		min-width: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .mobile-setting-field-row > p {
		grid-column: 1 !important;
		margin: 0 !important;
		min-width: 0 !important;
		font-size: 13px !important;
		font-weight: 700 !important;
		line-height: 1.25 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .mobile-setting-field-row > input[type='text'],
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .mobile-setting-field-row > .mobile-input-unit-wrap {
		grid-column: 2 !important;
		min-width: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .mobile-setting-field-row > input[type='text'].mobile-no-unit-input {
		width: 100% !important;
		max-width: 100% !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .mobile-input-unit-wrap {
		width: 100% !important;
		height: 44px !important;
		min-width: 0 !important;
		display: flex !important;
		align-items: center !important;
		overflow: hidden !important;
		box-sizing: border-box !important;
		border: 1px solid #00b27a !important;
		border-radius: 12px !important;
		background: #fff !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .mobile-input-unit-wrap > input[type='text'] {
		flex: 1 1 auto !important;
		width: 0 !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 100% !important;
		min-height: 0 !important;
		padding: 10px 8px 10px 12px !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		outline: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .mobile-input-unit-wrap > .mobile-unit-text {
		flex: 0 0 auto !important;
		height: 100% !important;
		display: inline-flex !important;
		align-items: center !important;
		padding: 0 12px 0 8px !important;
		border-left: 1px solid #d9eee7 !important;
		background: #f7fffb !important;
		color: #061f16 !important;
		font-size: 12px !important;
		font-weight: 800 !important;
		letter-spacing: -0.02em !important;
		line-height: 1 !important;
		white-space: nowrap !important;
		pointer-events: none !important;
		user-select: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .mobile-unit-helper-text {
		grid-column: 1 / -1 !important;
		color: #74847d !important;
		font-size: 11px !important;
		line-height: 1.3 !important;
		word-break: keep-all !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .mobile-time-row > p {
		grid-column: 1 / -1 !important;
		white-space: nowrap !important;
		overflow: visible !important;
		text-overflow: clip !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .mobile-time-row > .time-range {
		grid-column: 1 / -1 !important;
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto !important;
		grid-template-areas:
			"start divider"
			"end divider" !important;
		align-items: center !important;
		gap: 6px !important;
		white-space: nowrap !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .mobile-time-row > .time-range input[type='time'] {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .mobile-time-row > .time-range input[type='time']:first-of-type {
		grid-area: start !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .mobile-time-row > .time-range input[type='time']:last-of-type {
		grid-area: end !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .mobile-time-row > .time-range > span {
		grid-area: divider !important;
		justify-self: center !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item input[type='text'],
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item input[type='time'] {
		height: 44px !important;
		min-height: 40px !important;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		border-radius: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item input[type='time'] {
		background: #fff !important;
		background-color: #fff !important;
		background-image: none !important;
		box-shadow: inset 0 0 0 9999px #fff !important;
		color-scheme: light;
		-webkit-text-fill-color: currentColor;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item input[type='time']::-webkit-datetime-edit,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item input[type='time']::-webkit-datetime-edit-fields-wrapper,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item input[type='time']::-webkit-datetime-edit-hour-field,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item input[type='time']::-webkit-datetime-edit-minute-field,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item input[type='time']::-webkit-datetime-edit-ampm-field {
		background: transparent !important;
		background-color: transparent !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item input[type='time']::-webkit-calendar-picker-indicator {
		background-color: transparent !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .manual-item,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .custom-item,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-item {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 8px 10px !important;
		gap: 5px !important;
		border: 1px solid #edf5f1 !important;
		background: #fbfdfc !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .manual-item > label,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .custom-item > label,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-item > label {
		width: 100% !important;
		min-height: 30px !important;
		display: flex !important;
		align-items: center !important;
		gap: 8px !important;
		white-space: normal !important;
		word-break: keep-all !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .custom-item.mobile-checkbox-content-hidden {
		padding-top: 7px !important;
		padding-bottom: 7px !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .custom-item input[type='checkbox'] {
		width: 22px !important;
		height: 22px !important;
		flex: 0 0 22px !important;
		margin-right: 0 !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .custom-item input,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .manual-item input,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-item input,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .custom-item select,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .manual-item select,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-item select {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item.temperature .custom-item {
		overflow: hidden !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item.temperature .custom-item .custom-sub-item,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item.temperature .custom-item .time-range {
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item.temperature .custom-item .custom-sub-item input[type='text'],
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item.temperature .custom-item .custom-sub-item input.only-number {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item.temperature .custom-item .time-range {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto !important;
		grid-template-areas:
			"start divider"
			"end divider" !important;
		align-items: center !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item.temperature .custom-item .time-range input[type='time'] {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item.temperature .custom-item .time-range input[type='time']:first-of-type {
		grid-area: start !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item.temperature .custom-item .time-range input[type='time']:last-of-type {
		grid-area: end !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item.temperature .custom-item .time-range > span {
		grid-area: divider !important;
		justify-self: center !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .custom-item > label span {
		min-width: 0 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .value.mobile-binary-button-row {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 8px !important;
		width: 100% !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .value.mobile-binary-button-row > button {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0 !important;
		min-height: 42px !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
		white-space: nowrap !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .mobile-input-unit-wrap > input[type='text'] {
		flex: 1 1 auto !important;
		width: 0 !important;
		min-width: 0 !important;
		max-width: none !important;
		height: 100% !important;
		min-height: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .custom-item.mobile-checkbox-content-hidden .custom-sub-item,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .custom-item.mobile-checkbox-content-hidden .time-range,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .custom-item.mobile-checkbox-content-hidden .value {
		display: none !important;
	}
}

@media (max-width: 430px) {
	html.mobile-user-ui-root body.mobile-page-dashboard main.main .statistics-item {
		grid-template-columns: minmax(68px, 0.38fr) minmax(0, 1fr);
		padding: 11px 12px !important;
	}

	html.mobile-user-ui-root body.mobile-page-dashboard main.main .calendar-week {
		width: calc(100vw - 50px) !important;
		max-width: calc(100vw - 50px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box !important;
	}

	html.mobile-user-ui-root body.mobile-page-statistics main.main .graph .buttons .date-range input[type='date'] {
		font-size: 12px !important;
	}

	html.mobile-user-ui-root body.mobile-page-notification main.main .filters .options {
		grid-template-columns: 1fr 1fr;
	}

	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .default-list,
	html.mobile-user-ui-root body.mobile-page-value-setting main.main .setting-item .common-list {
		display: flex !important;
	}
}