/* Visual refresh only: existing layout, breakpoints and control sizes remain. */
:root {
  --ink: #15344a;
  --muted: #607787;
  --sea: #087f8c;
  --sea-dark: #07636e;
  --line: #dce7eb;
}
body {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  color: var(--ink);
  background: radial-gradient(ellipse 900px 550px at 95% 0%, #d2eeeb 0%, transparent 70%),
    radial-gradient(ellipse 700px 500px at 0% 500px, #e6ecf6 0%, transparent 75%), #f3f6fa;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
h1 { color: #14374d; letter-spacing: -1.4px; font-weight: 800; }
h1::before {
  content: "P";
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: 12px;
  vertical-align: 3px;
  border-radius: 13px;
  background: linear-gradient(145deg, #143e56, #0c8b8d);
  box-shadow: 0 5px 12px #087f8c24;
  color: white;
  font-size: 25px;
  letter-spacing: 0;
}
.subtitle, .location-help, .install-guide, .ai-help { color: var(--muted); }
button, input { font-family: inherit; }
button, .map-button {
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.search-box input, .ai-input-row input {
  border-color: #d3e0e6;
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 2px 4px #15344a03;
}
input::placeholder { color: #83949f; }
input:focus-visible {
  outline: 3px solid #0b899625;
  outline-offset: 2px;
  border-color: var(--sea);
}
button:focus-visible, a:focus-visible { outline: 3px solid #07889580; outline-offset: 3px; }
.search-box #searchButton, .install-button {
  background: linear-gradient(135deg, #194c64, #13364d);
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 3px 7px #173f5615;
}
.search-box #searchButton:hover, .install-button:hover { background: #0f3044; }
body .location-button, body .voice-button { background: var(--sea) !important; border-radius: 12px; }
body .location-button:hover, body .voice-button:hover { background: var(--sea-dark) !important; }
body .voice-button.listening { background: #c74747 !important; }
.install-box { background: #ffffff99; border-color: #ffffff; border-radius: 12px; box-shadow: 0 2px 12px #1e445504; }
.ai-box {
  background: radial-gradient(ellipse at 100% 0%, #196c74 0%, transparent 65%),
    linear-gradient(120deg, #15344b, #174a5b);
  border-color: #225466;
  border-radius: 22px;
  box-shadow: 0 12px 30px #173f5619, inset 0 1px 0 #ffffff12;
}
.ai-box h2 { color: #f3fbff; letter-spacing: -.7px; }
.ai-box h2::before { content: "✦"; color: #8ce4d8; margin-right: 8px; }
.ai-box .ai-help { color: #c3d8e1; }
.ai-box .ai-input-row input { border-color: #ffffff; box-shadow: 0 3px 10px #09233315; }
.ai-input-row #aiSendButton { background: #83e0cf; color: #123e48; border-radius: 12px; }
.ai-input-row #aiSendButton:hover { background: #a5eddf; }
.ai-box .voice-button { background: #ffffff19 !important; box-shadow: inset 0 0 0 1px #ffffff35; }
.ai-box .voice-button:hover { background: #ffffff2b !important; }
.ai-box .voice-button.listening { background: #c74747 !important; }
.ai-status { color: #c3d9e1; background: #072a3c40; border-radius: 10px; }
.ai-box .parking-card .ai-status { color: var(--muted); }
.ai-answer { border-left-color: var(--sea); border-radius: 0 12px 12px 0; color: #24495a; }
#summary { color: var(--muted); font-size: 14px; }
.sort-button, .refresh-button { border-color: #d3e0e6; border-radius: 10px; color: #496473; }
.sort-button:hover, .refresh-button:hover { background: #eaf3f4; border-color: #a6cbd0; }
.sort-button.active { background: #173f56; border-color: #173f56; color: #fff; }
.refresh-button { color: var(--sea-dark); background: #ffffffb3; }
.parking-card {
  border-radius: 20px;
  background: linear-gradient(155deg, #fff 75%, #f8fcfc);
  box-shadow: 0 6px 24px #1e445508, 0 0 0 1px #dfe8ed;
}
.parking-card h2 { color: #173f56; font-size: 21px; letter-spacing: -.6px; }
.available {
  display: inline-block;
  color: #087675;
  font-weight: 800;
  letter-spacing: -.7px;
  background: #eaf7f3;
  border-radius: 10px;
  padding: 4px 11px;
  font-variant-numeric: tabular-nums;
}
.info-item { border-bottom-color: #edf1f3; }
.label { color: #637b89; font-size: 13px; }
.value { color: #2d4a5a; font-weight: 600; overflow-wrap: anywhere; }
.address-notice { background: #f8f5ed; color: #80714f; border-radius: 10px; }
.map-button { background: #fae68b; color: #50451f; border-radius: 10px; box-shadow: 0 2px 5px #8a741010; }
.map-button:hover { background: #f2db5e; }
.distance-badge { background: #eaf5f5; border-color: #c7e2e3; color: var(--sea-dark); }
.no-result { border-radius: 16px; color: #748894; box-shadow: 0 0 0 1px var(--line); }
button:disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 600px) {
  h1 { font-size: 26px; }
  h1::before { width: 34px; height: 34px; font-size: 23px; margin-right: 9px; vertical-align: 2px; border-radius: 11px; }
  .ai-box h2 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Appearance switch, kept above the existing content. */
html { color-scheme: light; }
.theme-toolbar { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px; border: 1px solid #d8e5e9; border-radius: 999px; background: #ffffffb8; color: #718591; cursor: pointer; box-shadow: 0 2px 8px #173f5606; }
.theme-toggle svg { width: 30px; height: 30px; padding: 5px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; border-radius: 50%; }
.theme-sun { color: #9a631b; background: #fff1cf; }
html[data-theme="dark"] { color-scheme: dark; --ink: #deebf2; --muted: #a3b8c5; --line: #2b4454; }
html[data-theme="dark"] body { background: radial-gradient(ellipse 900px 550px at 95% 0%, #143b43, transparent 75%), #10202d; color: var(--ink); }
html[data-theme="dark"] h1 { color: #e5f0f5; }
html[data-theme="dark"] .theme-toggle { background: #1c3342; border-color: #38505f; color: #a6b8c4; }
html[data-theme="dark"] .theme-sun { background: transparent; color: inherit; }
html[data-theme="dark"] .theme-moon { background: #3b5668; color: #cce9f8; }
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .ai-box .ai-input-row input { background: #172e3d; border-color: #3c5969; color: #edf6fb; }
html[data-theme="dark"] input::placeholder { color: #a2b5c1; }
html[data-theme="dark"] .install-box { background: #1b324090; border-color: #2a4454; }
html[data-theme="dark"] .ai-box { background: radial-gradient(ellipse at 100% 0%, #175a63, transparent 70%), #143347; border-color: #32606c; box-shadow: 0 12px 30px #0000001a; }
html[data-theme="dark"] .parking-card { background: linear-gradient(145deg, #1b3242, #182d3b); box-shadow: 0 6px 24px #00000012, 0 0 0 1px #2b4656; }
html[data-theme="dark"] .parking-card h2 { color: #e0edf5; }
html[data-theme="dark"] .available { background: #173f42; color: #8be4cf; }
html[data-theme="dark"] .info-item { border-bottom-color: #304653; }
html[data-theme="dark"] .label { color: #a2b6c3; }
html[data-theme="dark"] .value { color: #e0ebf1; }
html[data-theme="dark"] .address-notice { background: #39372d; color: #d5cba9; }
html[data-theme="dark"] .sort-button,
html[data-theme="dark"] .refresh-button { background: #1b3242; border-color: #385362; color: #bed5df; }
html[data-theme="dark"] .sort-button.active { background: #78d9ca; border-color: #78d9ca; color: #103b43; }
html[data-theme="dark"] .sort-button:hover,
html[data-theme="dark"] .refresh-button:hover { border-color: #75b8bd; }
html[data-theme="dark"] .ai-answer,
html[data-theme="dark"] .no-result { background: #1b3242; color: #d6e6ef; }
html[data-theme="dark"] .distance-badge { background: #173f42; color: #8be4cf; border-color: #396269; }