:root {
	--bottom-bar-h: 220px;
	--panel-w: 420px;
	--g8: 8px;
	--g12: 12px;
	--ctrl-h: 40px;
	--ctrl-h-sm: 36px;
	--font-sm: 13px;
	--font-md: 14px;
	--ctrl-w: calc(8ch + 24px); /* 3자리 + 여유 패딩 포함 공통 폭 */
}

/* global */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #000; color: #fff; }
#app { max-width: 100%; padding: 12px 0 calc(var(--bottom-bar-h) + 16px); }

/* top nav */
.topnav { position: sticky; top: 0; background: #0a0a0a; border-bottom: 1px solid #1d1d1d; z-index: 100; }
.topnav-inner { max-width: var(--panel-w); width: calc(100% - 32px); margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: var(--g12); }
.brand { font-weight: 800; }
.brand.grad { background: linear-gradient(90deg, #0bbcf3 0%, #16a1ff 35%, #48c8ff 65%, #d9d9d9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.home-label .white { color: #fff; }
.home-label .sky { color: #36c2ff; }

.tabs { display: flex; gap: var(--g8); }
.tab-btn { background: #1c1c1c; color: #eee; border: 1px solid #2a2a2a; border-radius: 999px; padding: 8px 12px; cursor: pointer; font-size: var(--font-sm); }
.tab-btn.active { background: #2e2e2e; color: #ffd700; border-color: #3a3a3a; }

/* panel */
.panel { width: min(var(--panel-w), 100% - 32px); margin: 12px auto; background: #0b0b0b; border: 1px solid #191919; border-radius: 14px; padding: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.panel .header { padding: 4px 0 10px; display: flex; align-items: center; justify-content: space-between; }
.title { font-size: 16px; margin: 0; }
.icon-button { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: #555; color: #bbb; border: none; cursor: pointer; }
.icon-button.active { background: #333; color: #ffd700; }

/* controls - responsive grid */
.controls { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--g12); align-items: end; }
.actions { display: flex; gap: var(--g8); align-items: center; flex-wrap: nowrap; }
.btn { white-space: nowrap; }

/* summary single-line with ellipsis */
.summary { color: #aaa; font-size: var(--font-sm); margin: 12px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* field */
.field { display: grid; gap: 6px; }
.field label { color: #ccc; font-size: var(--font-sm); }
.input, .select, .btn { height: var(--ctrl-h); font-size: var(--font-md); padding: 8px 12px; border-radius: 10px; border: 1px solid #333; background: #1f1f1f; color: #fff; }
.select { appearance: none; padding-right: 28px; }
.btn { cursor: pointer; border: none; }
.btn.primary { background: #4caf50; border: none; }
.btn.secondary { background: #2c2c2c; border: 1px solid #3a3a3a; color: #eee; }
.btn.quick { background: #6f42c1; color: #fff; border: 1px solid #5a34a3; }
.btn.quick:hover { filter: brightness(1.05); }

/* equal widths for input/select */
#drivingMinutes.input, #movingMinutes.select { width: var(--ctrl-w); }

/* list */
.list { display: grid; gap: 10px; }
.rate-row { display: flex; align-items: center; justify-content: space-between; background: #2c2c2c; border-radius: 12px; padding: 12px; }
.rate-left { display: flex; align-items: center; gap: 10px; }
.rate-label { font-weight: 700; font-size: 13px; }
.rate-hour { color: #aaa; font-size: 11px; }
.rate-right { display: flex; align-items: center; gap: 6px; }
.rate-total { font-weight: 800; font-size: 14px; color: #4caf50; }
.rate-total.selected { color: #ffd700; text-decoration: underline; text-underline-offset: 3px; }

/* chips bar */
.chips-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--bottom-bar-h)); padding: 10px 16px; background: rgba(0,0,0,0.9); border-top: 1px solid #222; z-index: 950; }
.chips-bar.hidden { display: none; }
.chips-bar .chips-wrap { max-width: var(--panel-w); width: calc(100% - 32px); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--g8); }
.chips-bar .chip { background: #2a2a2a; color: #eee; border: 1px solid #3a3a3a; border-radius: 999px; padding: 6px 10px; font-size: 12px; white-space: nowrap; cursor: pointer; }

/* keypad */
.keypad.fixed { position: fixed; left: 0; right: 0; bottom: 0; height: var(--bottom-bar-h); background: #0b0b0b; border-top: 1px solid #1a1a1a; backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 900; }
.keypad-grid { max-width: var(--panel-w); width: calc(100% - 32px); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g8); }
.key { background: #1e1e1e; color: #eee; border: 1px solid #2a2a2a; border-radius: 10px; padding: 12px 0; font-size: 16px; cursor: pointer; }

/* 강조 색상: C(초기화), ←(백스페이스) */
.key[data-action="clear"] { background: #3a1f1f; color: #ffffff; border-color: #5a2a2a; }
.key[data-action="back"]  { background: #1f2f3a; color: #ffffff; border-color: #294657; }
.key[data-action="clear"]:hover { filter: brightness(1.1); }
.key[data-action="back"]:hover  { filter: brightness(1.1); }

/* mobile tweaks */
@media (max-width: 480px) {
	.controls { grid-template-columns: 1fr 1fr auto; gap: var(--g8); align-items: center; }
	.field label { display: none; }
	.input, .select, .btn { height: var(--ctrl-h-sm); }
	.btn { padding: 8px 10px; }
	.summary { font-size: 11px; }
}

@media (max-width: 380px), (max-height: 640px) {
	:root { --bottom-bar-h: 180px; }
	#app { padding-bottom: calc(var(--bottom-bar-h) + 8px + env(safe-area-inset-bottom)); }
	.keypad.fixed { padding-bottom: calc(env(safe-area-inset-bottom) + 8px); }
	.keypad-grid { gap: 6px; }
	.key { padding: 10px 0; }
	.panel .header { padding: 0 0 4px; }
	.title { font-size: 14px; }
	.controls { gap: 6px; }
	.input, .select, .btn { height: 34px; padding: 6px 8px; font-size: 13px; }
	.summary { margin: 6px 0; font-size: 10.5px; }
	.list { gap: 6px; }
	.rate-row { padding: 8px 10px; }
	.rate-label { font-size: 12px; }
	.rate-hour { font-size: 10px; }
	.rate-total { font-size: 13px; }
	.footer { display: none; }
}

/* hide number input spinners for drivingMinutes */
#drivingMinutes { -moz-appearance: textfield; appearance: textfield; }
#drivingMinutes::-webkit-outer-spin-button,
#drivingMinutes::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.brand-kk { color: #ff9500; font-weight: 800; }
.brand-dot { color: #36c2ff; font-weight: 800; }

.footer { max-width: var(--panel-w); width: calc(100% - 32px); margin: 24px auto; text-align: center; color: #888; font-size: 12px; }
.footer img { width: 140px; height: auto; opacity: 0.95; margin-bottom: 8px; }

.hidden { display: none !important; }

.tip { max-width: var(--panel-w); width: calc(100% - 32px); margin: 12px auto; background: #111; border: 1px solid #222; border-radius: 12px; padding: 12px 14px; box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
.tip h3 { margin: 0 0 8px; font-size: 14px; color: #ffd700; }
.tip p, .tip li { color: #cfcfcf; font-size: 13px; line-height: 1.6; }
.tip .tip-actions { margin-top: 10px; display: flex; justify-content: flex-end; }
.tip .close-tip { background: #2c2c2c; color: #eee; border: 1px solid #3a3a3a; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
