.chat-ai-notice { margin: 0 0 16px; font-size: 12px; line-height: 1.6; color: #526477; overflow-wrap: anywhere; }
:root {
  --app-width: 760px;
  --app-gutter: 24px;
  --nav-height: 86px;
  color-scheme: light;
  font-family: Inter, "Segoe UI", "Noto Sans KR", Arial, sans-serif;
  background: #eaf5ff;
  color: #132238;
  line-height: 1.45;
}

.translation-workspace { max-width: 100%; }
.translation-modes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 20px 0; }
.translation-modes button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; background: #eef4fb; color: #496178; border-radius: 8px; }
.translation-modes button[aria-selected="true"] { background: #0877ff; color: white; }
.translation-modes svg { width: 24px; height: 24px; }
.translation-languages { display: grid; grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr); gap: 8px; align-items: end; margin: 20px 0; }
.translation-languages label span { display: block; font-size: 12px; color: #64748b; margin-bottom: 6px; }
.translation-languages select { width: 100%; padding: 10px 4px; border: 1px solid #d5dfe9; border-radius: 6px; background: white; font: inherit; }
.translation-languages button { height: 42px; background: transparent; color: #0877ff; font-size: 25px; }
.translation-workspace textarea { width: 100%; resize: vertical; min-height: 150px; padding: 16px; font: inherit; border: 1px solid #cbd7e4; border-radius: 8px; background: white; color: inherit; }
.translation-submit { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.translation-workspace button:disabled { opacity: .5; cursor: not-allowed; }
.translation-notice { font-size: 14px; color: #536d83; }
.translation-output { border-block: 1px solid #dbe5ef; padding: 16px 0; }
.translation-output p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 20px; }
.translation-output > div { display: flex; gap: 12px; }
.translation-output button { display: inline-flex; gap: 6px; align-items: center; padding: 10px 14px; border-radius: 6px; background: #edf4ff; color: #0668dd; }
.translation-history button { display: block; text-align: left; width: 100%; padding: 16px 0; background: transparent; border-bottom: 1px solid #dbe5ef; color: inherit; }
.translation-history span,.translation-history strong { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.translation-history span { color: #64748b; font-size: 13px; margin-bottom: 6px; }
.translation-privacy { font-size: 12px; margin: 20px 0; color: #64748b; }
.translation-capture { display: grid; justify-items: center; gap: 12px; padding: 16px; background: #eef5fc; border-radius: 8px; margin-bottom: 16px; }
.translation-capture img { width: 100%; max-height: 240px; object-fit: contain; }
.translation-capture p,.translation-voice p { font-size: 13px; color: #64748b; }
.photo-picker { position: relative; padding: 12px 18px; background: #0877ff; color: white; border-radius: 6px; cursor: pointer; overflow: hidden; }
.photo-picker input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.photo-picker:focus-within { outline: 3px solid #132238; outline-offset: 3px; }
.translation-photo-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%; }
.translation-photo-actions .photo-picker { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; font-size: 14px; }
.translation-photo-actions .photo-picker:last-child { color: #0668dd; background: white; border: 1px solid #bcd5f5; }
.translation-photo-actions svg { width: 18px; height: 18px; flex-shrink: 0; }
.translation-voice { text-align: center; padding: 20px 0; }
.translation-voice button { display: inline-flex; align-items: center; gap: 8px; }

.theme-results h1 { font-size: 22px; }
.theme-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; }
.theme-tabs button { white-space: nowrap; padding: 10px 12px; border-radius: 6px; background: #eef3f8; color: #31445c; }
.theme-tabs button[aria-pressed="true"] { background: #0877ff; color: white; }
.theme-source { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; margin: 12px 0; }
.theme-source strong { color: #0877ff; }
.theme-source span, .theme-note { color: #63758a; }
.theme-note { font-size: 12px; }
.theme-result { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid #e1e8ef; align-items: flex-start; }
.theme-result > img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.theme-result > div { min-width: 0; }
.theme-result h2 { font-size: 16px; margin: 0 0 6px; overflow-wrap: anywhere; }
.theme-result p, .theme-result small { font-size: 12px; color: #63758a; overflow-wrap: anywhere; }
.theme-result a { color: #006bdc; font-size: 13px; display: inline-block; padding: 8px 0; }
.theme-results [role="alert"] button { background: #0877ff; color: white; padding: 12px 18px; border-radius: 6px; }

/* Busan home: responsive version of the supplied mobile composition. */
.home-content { color: #14203b; }
.home-content h2 { font-size: 18px; line-height: 1.4; }
.home-banners { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; position: relative; }
.home-banners > section { flex: 0 0 79%; scroll-snap-align: start; min-height: 290px; border-radius: 16px; overflow: hidden; position: relative; }
.welcome-banner { background: #dcefff; }
.welcome-copy { position: relative; z-index: 1; width: 57%; padding: 30px 0 0 24px; }
.welcome-copy small { font-size: 15px; font-weight: 700; }
.welcome-copy h1 { font-size: 29px; margin: 8px 0 12px; line-height: 1.2; color: #076bfa; overflow-wrap: anywhere; }
.welcome-copy p { font-size: 15px; max-width: 180px; }
.nubi-avatar.home-mascot { position: absolute; right: 14px; bottom: 42px; width: 40%; height: 205px; margin: 0; background: none; }
.nubi-avatar.home-mascot { display: block; }
.nubi-avatar.home-mascot img { height: 100%; width: 100%; max-height: 100%; object-fit: contain; }
.welcome-cta { position: relative; z-index: 2; margin: 30px 20px 20px; border-radius: 28px; padding: 14px 18px; background: white; color: #0877ff; max-width: calc(100% - 40px); font-weight: 700; display: flex; gap: 18px; align-items: center; text-align: left; }
.discover-banner { background: #def4ed; padding: 30px 24px; }
.discover-banner small { color: #007d62; font-weight: 800; }
.discover-banner h2 { max-width: 220px; font-size: 26px; }
.discover-banner button { background: white; border-radius: 24px; padding: 12px 18px; color: #007d62; }
.banner-dots { display: flex; gap: 8px; justify-content: center; padding: 14px; }
.banner-dots button { width: 7px; height: 7px; padding: 0; border-radius: 50%; background: #d6dce7; }
.banner-dots button.selected { background: #0877ff; }
.home-shortcuts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 12px 0 30px; }
.home-shortcuts button { padding: 18px 6px; background: #f3f8ff; border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.home-shortcuts button:nth-child(2) { background: #f0faf5; color: #099666; }
.home-shortcuts button:nth-child(3) { background: #f6f2ff; color: #9256df; }
.home-shortcuts button:nth-child(4) { background: #fff9eb; color: #e8a117; }
.home-shortcuts .svg-icon { width: 34px; height: 34px; }
.home-shortcuts b { font-size: 13px; color: #14203b; overflow-wrap: anywhere; }
.home-shortcuts small { font-size: 11px; color: #758098; }
.home-section { margin: 24px 0; }
.home-content .section-head { margin: 0 0 16px; gap: 12px; align-items: center; }
.home-content .section-head h2 { margin: 0; }
.home-content .section-head button { background: transparent; color: #0877ff; padding: 5px 0; flex-shrink: 0; font-size: 13px; }
.home-places { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 4); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.home-places:has(> p) { display: block; }
.home-shortcuts button:first-child { color: #0877ff; }
.home-place { position: relative; background: white; border: 1px solid #e9eef4; border-radius: 8px; overflow: hidden; min-width: 0; }
.place-open { padding: 0; background: transparent; width: 100%; text-align: left; color: inherit; }
.home-photo { aspect-ratio: 1.1; background: #e7eff4; }
.home-photo img { width: 100%; height: 100%; object-fit: cover; }
.home-place h3 { font-size: 13px; margin: 12px 10px 6px; overflow-wrap: anywhere; }
.home-place p { font-size: 11px; color: #758098; margin: 0 32px 14px 10px; height: 32px; overflow: hidden; }
.save-place { position: absolute; right: 4px; bottom: 7px; padding: 7px; background: transparent; color: #94a1b5; }
.save-place.saved { color: #0877ff; }
.save-place.saved svg { fill: #dcecff; }
.home-weather { padding: 20px 0; border-block: 1px solid #e8eef4; }
.weather-values { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 12px; align-items: center; font-size: 12px; color: #758098; }
.weather-values > div { display: flex; flex-direction: column; gap: 4px; }
.weather-values strong { font-size: 29px; color: #14203b; }
.weather-values b { font-size: 15px; color: #14203b; }
.weather-credit { display: block; color: #758098; font-size: 10px; margin-top: 14px; }
.weather-credit a { color: inherit; }
.weather-forecast p { display: flex; justify-content: space-between; font-size: 13px; }
.home-themes { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.home-themes button { display: flex; align-items: center; flex-direction: column; gap: 12px; padding: 18px 4px; border-radius: 8px; background: #edf5ff; color: #1683de; }
.home-themes button:nth-child(2) { background: #fff5ed; color: #c77637; }
.home-themes button:nth-child(3) { background: #eef8f5; color: #138174; }
.home-themes button:nth-child(4) { background: #f4efff; color: #9563d7; }
.home-themes button:nth-child(5) { background: #fff0f6; color: #da508b; }
.home-themes svg { width: 30px; height: 30px; }
.home-themes b { color: #14203b; font-size: 12px; overflow-wrap: anywhere; }
.bottom-nav .nav-nubi { background: #0877ff; border-radius: 50%; color: white; width: 76px; height: 76px; justify-self: center; transform: translateY(-12px); }
.bottom-nav .nav-nubi img { height: 32px; width: 30px; object-fit: cover; object-position: top; }
.bottom-nav .nav-nubi small { font-size: 10px; }
.nubi-chat .chat p { white-space: pre-wrap; overflow-wrap: anywhere; }
.nubi-chat .ask-box { position: sticky; bottom: 90px; display: flex; background: white; }
.nubi-chat .ask-box input { width: 100%; min-width: 0; }
.nubi-chat .ask-box button { white-space: nowrap; }
button:focus-visible, a:focus-visible { outline: 3px solid #0877ff; outline-offset: 3px; }
@media(max-width: 560px) {
  .home-banners > section { flex-basis: 90%; min-height: 260px; }
  .welcome-copy { padding: 22px 0 0 18px; }
  .welcome-copy h1 { font-size: 24px; }
  .welcome-copy p { font-size: 13px; }
  .nubi-avatar.home-mascot { height: 160px; right: 4px; bottom: 70px; }
  .welcome-cta { font-size: 12px; margin: 24px 14px 16px; }
  .home-shortcuts { gap: 6px; }
  .home-shortcuts b { font-size: 11px; }
  .home-shortcuts small { font-size: 10px; }
  .home-places { grid-auto-columns: 43%; }
  .home-content h2 { font-size: 16px; }
  .home-themes { gap: 6px; }
  .home-themes b { font-size: 10px; }
  .weather-values { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(255, 195, 41, 0.22), transparent 32rem),
    linear-gradient(145deg, #e9f6ff 0%, #f7fbff 48%, #eef3ff 100%);
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.svg-icon {
  width: 1.15em;
  height: 1.15em;
  display: block;
}

#app {
  min-height: 100vh;
}

.phone-shell,
.mobile-stage {
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 0;
}

.phone-screen,
.splash-screen {
  width: min(100%, var(--app-width));
  min-height: 100dvh;
  background: #fbfdff;
  border: 1px solid rgba(8, 119, 255, 0.14);
  border-radius: 0;
  box-shadow: 0 24px 70px rgba(23, 91, 163, 0.18);
  overflow: hidden;
  position: relative;
}

.phone-screen {
  padding: var(--app-gutter) var(--app-gutter) calc(var(--nav-height) + 30px + env(safe-area-inset-bottom, 0px));
}

.phone-screen.plain {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 28px;
}

.splash-screen {
  padding: 0;
  text-align: center;
  display: grid;
  place-items: center;
  background: #fff;
  border: 0;
  box-shadow: none;
  text-decoration: none;
}

.brand-stage {
  background: #fff;
}

.splash-screen:focus-visible {
  outline: 2px solid #0877ff;
  outline-offset: -6px;
}

.splash-logo {
  display: grid;
  justify-items: center;
  align-content: center;
  padding: 24px;
  width: 100%;
}

.splash-logo .brand-wordmark {
  width: min(300px, 100%);
  margin: 0;
}

.splash-screen h1 {
  color: #0877ff;
  font-size: 60px;
  margin: 0;
  letter-spacing: 0;
  line-height: 0.96;
}

.splash-screen p,
.lead {
  margin: 0;
  color: #5e6b7f;
  font-size: 16px;
}

.splash-screen strong {
  color: #0877ff;
  font-size: 15px;
  margin-top: 18px;
}

.splash-landscape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 72px;
  height: 260px;
  overflow: hidden;
}

.splash-landscape::before {
  content: "";
  position: absolute;
  inset: auto -12% 0;
  height: 88px;
  background: #b6dcff;
  border-radius: 50% 50% 0 0;
}

.splash-landscape::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 54px;
  height: 76px;
  background: linear-gradient(90deg, #c4e3ff, #f6fbff 48%, #bddfff);
  clip-path: polygon(0 72%, 12% 46%, 24% 62%, 38% 32%, 54% 64%, 70% 38%, 86% 58%, 100% 36%, 100% 100%, 0 100%);
}

.tower,
.palace,
.bridge,
.island {
  position: absolute;
  display: block;
  background: #8fc8fb;
  z-index: 1;
}

.tower {
  left: 78px;
  bottom: 110px;
  width: 18px;
  height: 92px;
  border-radius: 999px 999px 4px 4px;
}

.palace {
  left: 105px;
  bottom: 94px;
  width: 88px;
  height: 38px;
  clip-path: polygon(0 40%, 50% 0, 100% 40%, 90% 40%, 90% 100%, 10% 100%, 10% 40%);
}

.bridge {
  left: 176px;
  bottom: 90px;
  width: 118px;
  height: 44px;
  border: 6px solid #96cdfc;
  border-top: 0;
  border-radius: 0 0 80px 80px;
  background: transparent;
}

.island {
  right: 10px;
  bottom: 78px;
  width: 110px;
  height: 92px;
  border-radius: 58% 42% 0 0;
  background: #a9d7ff;
}

.loading-dots {
  align-self: end;
  z-index: 2;
  padding-bottom: 46px;
  color: #2a8cff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a8cff;
  animation: bounce 1s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
  animation-delay: 0.16s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0.32s;
}

.loading-dots small {
  flex-basis: 100%;
  margin-top: 6px;
  color: #2a8cff;
  font-size: 12px;
}

@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
  40% { transform: translateY(-5px); opacity: 1; }
}

.skip-button {
  position: absolute;
  top: 22px;
  right: 22px;
  background: transparent;
  color: #8390a3;
  font-weight: 800;
}

.language-screen {
  justify-content: flex-start;
  padding-top: 86px;
}

.language-screen .brand {
  display: block;
  margin-bottom: 32px;
}

.topbar {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.brand {
  color: #0877ff;
  font-size: 24px;
  font-weight: 900;
}

.brand.large {
  font-size: 54px;
}

.brand-wordmark {
  display: block;
  width: 104px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 12 / 5;
  object-fit: contain;
}

.language-screen .brand-wordmark,
.brand.large .brand-wordmark {
  width: 168px;
}

.screen-title {
  font-weight: 800;
  font-size: 15px;
}

.top-actions {
  display: flex;
  gap: 6px;
}

.icon-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f2f7ff;
  color: #0877ff;
  display: grid;
  place-items: center;
  font-size: 24px;
}

.icon-button .svg-icon {
  width: 18px;
  height: 18px;
}

.hero-card {
  min-height: 154px;
  border-radius: 24px;
  padding: 18px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.92), rgba(218, 239, 255, 0.58)),
    linear-gradient(135deg, #bfe5ff, #f0f8ff);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.hero-card h1,
.page-heading,
.plain h1,
.detail-body h1 {
  margin: 4px 0 6px;
  font-size: 25px;
  letter-spacing: 0;
}

.hero-card p,
.hero-card small {
  color: #607189;
}

.nubi-avatar {
  width: 48px;
  height: 64px;
  margin: 0;
  display: grid;
  place-items: end center;
  flex: 0 0 auto;
}

.nubi-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(19, 61, 117, 0.12));
}

.nubi-avatar.hero {
  width: 126px;
  height: 168px;
  align-self: end;
  margin-right: -8px;
  margin-bottom: -18px;
}

.soft-button,
.ghost,
.primary,
.text-button {
  min-height: 44px;
  border-radius: 14px;
  padding: 0 16px;
  font-weight: 800;
}

.primary {
  background: #0877ff;
  color: #fff;
}

.ghost,
.soft-button {
  background: #eef6ff;
  color: #0877ff;
}

.wide {
  width: 100%;
}

.small {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.quick-grid button,
.theme-grid button,
.language-list button {
  background: #f5f9ff;
  border: 1px solid #e2efff;
  border-radius: 18px;
  padding: 14px 10px;
  color: #1b2b42;
  display: grid;
  gap: 4px;
}

.quick-grid strong {
  color: #0877ff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 2px;
  background: #e6f2ff;
  font-size: 24px;
}

.quick-grid strong .svg-icon {
  width: 24px;
  height: 24px;
}

.quick-grid .selected strong {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.quick-grid span,
.language-list span {
  font-weight: 800;
}

.quick-grid small,
.language-list small,
.place-card small,
.settings-list span {
  color: #718199;
  font-size: 12px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 18px 0 10px;
}

.section-head h2,
.detail-body h2,
.sheet h2,
.phone-screen h2 {
  margin: 0;
  font-size: 18px;
}

.section-head button,
.text-button {
  color: #0877ff;
  background: transparent;
  font-weight: 800;
}

.horizontal-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}

.horizontal-list::-webkit-scrollbar {
  display: none;
}

.place-list {
  display: grid;
  gap: 12px;
}

.place-card {
  background: #fff;
  border: 1px solid #e4eefb;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(51, 101, 163, 0.08);
}

.place-card.compact {
  min-width: 0;
}

.place-image {
  height: 112px;
  background-size: cover;
  background-position: center;
}

.place-card.compact .place-image {
  height: 92px;
}

.place-body {
  padding: 12px;
}

.place-body h3 {
  margin: 7px 0 5px;
  font-size: 16px;
}

.place-body p {
  margin: 0;
  color: #5d6b80;
  font-size: 13px;
}

.tag-row,
.meta-row,
.chips,
.date-row,
.segmented {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pill,
.crowd {
  border-radius: 999px;
  padding: 5px 9px;
  background: #eef6ff;
  color: #0877ff;
  font-size: 12px;
  font-weight: 800;
}

.crowd {
  color: #f07530;
  background: #fff3ec;
}

.crowd.calm {
  color: #0a956b;
  background: #e9fbf4;
}

.crowd.busy {
  color: #e04444;
  background: #fff0f0;
}

.meta-row {
  margin-top: 9px;
  color: #52627a;
  font-size: 13px;
}

.card-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 12px;
}

.card-actions button:first-child {
  width: 38px;
  border-radius: 12px;
  background: #fff3f3;
  color: #e04444;
  font-size: 18px;
}

.weather-card,
.trip-summary,
.profile-card,
.audio-card,
.api-status,
.mascot-row {
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e4eefb;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
}

.api-status {
  display: block;
  margin: 6px 0 14px;
  background: #fff8e8;
  border-color: #ffe1a1;
}

.api-status.live {
  background: #eafbf5;
  border-color: #bcefdc;
}

.api-status strong {
  display: block;
  color: #172941;
  margin-bottom: 4px;
}

.api-status p {
  margin: 0 0 4px;
  color: #5f6f85;
  font-size: 13px;
}

.api-status small {
  color: #0877ff;
  font-weight: 800;
}

.api-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.api-checks span {
  border-radius: 999px;
  background: #fff;
  border: 1px solid #f4d28c;
  color: #7d5a10;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
}

.api-checks .ok {
  border-color: #9de3c8;
  color: #0b7c5b;
}

.api-checks .waiting {
  border-color: #d8e3f3;
  color: #64748b;
}

.weather-card {
  justify-content: space-between;
}

.weather-card span {
  font-size: 34px;
}

.weather-card small,
.trip-summary small,
.profile-card p,
.mascot-row p {
  display: block;
  margin: 0;
  color: #6d7b90;
}

.theme-grid,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.theme-grid button {
  min-height: 56px;
  font-weight: 800;
}

.language-list {
  display: grid;
  gap: 10px;
  margin: 8px 0 18px;
}

.language-list button {
  grid-template-columns: 1fr auto;
  text-align: left;
}

.language-list .selected,
.quick-grid .selected,
.chips .selected,
.date-row .selected,
.segmented .selected {
  background: #0877ff;
  color: #fff;
}

.language-list .selected small,
.quick-grid .selected small {
  color: rgba(255, 255, 255, 0.82);
}

.guide-screen {
  justify-content: flex-start;
  gap: 0;
  padding: 16px 16px 24px;
  background:
    radial-gradient(circle at 85% 16%, rgba(255, 255, 255, 0.96) 0 28px, transparent 29px),
    radial-gradient(circle at 14% 29%, rgba(255, 255, 255, 0.8) 0 22px, transparent 23px),
    linear-gradient(180deg, #f4fbff 0%, #eaf6ff 48%, #f7fbff 100%);
  overflow: hidden;
}

.status-bar,
.guide-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.status-bar {
  min-height: 24px;
  color: #111827;
  font-size: 14px;
}

.status-bar span {
  color: #111827;
  font-size: 12px;
  font-weight: 800;
}

.guide-top {
  min-height: 48px;
}

.guide-back,
.guide-skip {
  min-width: 42px;
  min-height: 42px;
  border-radius: 14px;
  background: transparent;
  color: #0877ff;
  font-weight: 900;
}

.guide-back {
  color: #162967;
  font-size: 28px;
  justify-self: start;
}

.guide-skip {
  justify-self: end;
  font-size: 15px;
}

.guide-copy {
  position: relative;
  z-index: 2;
  margin-top: 18px;
}

.guide-copy h1 {
  margin: 0;
  color: #061b5f;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: 0;
}

.guide-copy h1 em {
  color: #0877ff;
  font-style: normal;
}

.guide-copy p {
  max-width: 260px;
  margin: 16px 0 0;
  color: #637092;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 700;
}

.guide-step-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 18px;
  padding: 0 10px;
  border-radius: 999px;
  background: #dcebff;
  color: #0877ff;
  font-weight: 900;
  font-size: 13px;
}

.guide-hero-art {
  position: relative;
  flex: 1;
  min-height: 412px;
  margin-top: 14px;
}

.skyline-scene {
  position: absolute;
  inset: 82px -16px 122px;
  background:
    linear-gradient(90deg, rgba(122, 193, 255, 0.18), rgba(255, 255, 255, 0.15)),
    linear-gradient(180deg, transparent 36%, rgba(94, 173, 231, 0.18) 36% 100%);
  clip-path: polygon(0 68%, 12% 54%, 20% 62%, 30% 48%, 42% 60%, 54% 42%, 66% 57%, 78% 38%, 92% 58%, 100% 49%, 100% 100%, 0 100%);
}

.skyline-scene span {
  position: absolute;
  bottom: 44px;
  width: 34px;
  height: 140px;
  border-radius: 18px 18px 6px 6px;
  background: linear-gradient(180deg, #f74343, #f7fbff 12%, #6fc3ff 34%, #f7fbff 42%, #0877ff 58%, #f7fbff 64%);
}

.skyline-scene span:nth-child(1) {
  left: 58px;
}

.skyline-scene span:nth-child(2) {
  right: 54px;
  bottom: 28px;
  width: 88px;
  height: 76px;
  border-radius: 42px 42px 8px 8px;
  background: linear-gradient(180deg, #173c8f 0 16px, #ff6c6c 16px 24px, #dff3ff 24px);
}

.skyline-scene span:nth-child(3) {
  left: 16px;
  bottom: 24px;
  width: 118px;
  height: 58px;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(135deg, #a7dfbd, #8bc7ff);
}

.guide-nubi {
  position: absolute;
  width: 166px;
  height: 224px;
  left: 50%;
  bottom: 74px;
  transform: translateX(-50%);
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 18px 28px rgba(31, 80, 139, 0.14));
}

.guide-nubi.waving {
  left: 52%;
  bottom: 74px;
}

.guide-nubi.holding {
  left: 86px;
  bottom: 8px;
  width: 132px;
  height: 178px;
  transform: none;
}

.guide-nubi.map,
.guide-nubi.camera {
  right: 6px;
  left: auto;
  top: 42px;
  bottom: auto;
  width: 142px;
  height: 192px;
  transform: none;
  z-index: 1;
}

.phone-prop {
  position: absolute;
  left: 188px;
  bottom: 76px;
  width: 36px;
  height: 78px;
  border-radius: 10px;
  background: #20252f;
  transform: rotate(8deg);
  z-index: 5;
}

.guide-feature-panel,
.guide-info-list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  z-index: 4;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e8f1ff;
  box-shadow: 0 22px 50px rgba(29, 85, 150, 0.12);
}

.guide-feature-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 18px 10px;
}

.guide-feature-panel article {
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e7f2ff;
  color: #0877ff;
  font-size: 20px;
  font-weight: 900;
}

.feature-icon .svg-icon,
.guide-info-list article > span .svg-icon {
  width: 22px;
  height: 22px;
}

.guide-feature-panel strong,
.guide-info-list strong {
  color: #102567;
  font-size: 12px;
  line-height: 1.3;
}

.guide-feature-panel small,
.guide-info-list small {
  color: #6a7798;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 700;
}

.scan-card,
.speech-card {
  position: absolute;
  z-index: 3;
  border: 1px solid #e0eeff;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 14px 32px rgba(33, 92, 155, 0.13);
}

.scan-card {
  top: 16px;
  left: 8px;
  width: 212px;
  height: 146px;
  padding: 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0, 120, 255, 0.84), rgba(111, 200, 255, 0.76));
  color: #fff;
}

.scan-card strong {
  display: block;
  font-size: 26px;
}

.scan-card em {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  font-style: normal;
  font-weight: 900;
}

.scan-card small {
  display: inline-block;
  margin-top: 20px;
  padding: 8px 10px;
  border-radius: 12px;
  color: #3263b7;
  background: #fff;
  font-weight: 900;
}

.scan-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: rgba(255, 255, 255, 0.86);
}

.scan-corner.c1 {
  top: 12px;
  left: 12px;
  border-top: 5px solid;
  border-left: 5px solid;
}

.scan-corner.c2 {
  right: 12px;
  bottom: 12px;
  border-right: 5px solid;
  border-bottom: 5px solid;
}

.speech-card {
  max-width: 178px;
  padding: 14px 16px;
  border-radius: 18px;
}

.speech-card.voice {
  right: 0;
  top: 94px;
}

.speech-card.text {
  right: 4px;
  top: 210px;
}

.speech-card strong {
  display: block;
  color: #182a63;
  font-size: 13px;
}

.speech-card small {
  display: block;
  margin-top: 5px;
  color: #687595;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
}

.guide-info-list {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.guide-info-list article {
  display: grid;
  grid-template-columns: 48px 1fr 116px;
  gap: 12px;
  align-items: center;
}

.guide-info-list article > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #e7f2ff;
  color: #0877ff;
  font-size: 22px;
  font-weight: 900;
}

.mini-widget {
  height: 70px;
  border-radius: 14px;
  background: #f2f7ff;
  border: 1px solid #e3efff;
}

.widget-1 {
  background:
    linear-gradient(90deg, #0877ff 0 4px, transparent 4px 100%) 20px 14px / 48px 16px no-repeat,
    linear-gradient(90deg, #84bfff 0 4px, transparent 4px 100%) 20px 36px / 64px 16px no-repeat,
    #f6fbff;
}

.widget-2 {
  background:
    linear-gradient(180deg, transparent 34px, #0877ff 35px 38px, transparent 39px),
    repeating-linear-gradient(90deg, transparent 0 13px, #0877ff 13px 18px, transparent 18px 24px),
    #f6fbff;
}

.widget-3 {
  background:
    radial-gradient(circle at 28px 42px, #0877ff 0 7px, transparent 8px),
    radial-gradient(circle at 86px 24px, #0877ff 0 7px, transparent 8px),
    linear-gradient(135deg, transparent 47%, #0877ff 48% 52%, transparent 53%),
    #f6fbff;
}

.guide-footer {
  display: grid;
  gap: 20px;
}

.guide-next {
  position: relative;
  min-height: 58px;
  border-radius: 16px;
  font-size: 17px;
  box-shadow: 0 12px 26px rgba(8, 119, 255, 0.24);
}

.guide-next span {
  position: absolute;
  right: 22px;
  font-size: 30px;
  line-height: 1;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 8px 0;
}

.dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c9d7ea;
}

.dots .on {
  width: 24px;
  background: #0877ff;
}

.login {
  text-align: center;
}

.chips,
.date-row,
.segmented {
  margin: 12px 0;
}

.chips button,
.date-row button,
.segmented button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #eff6ff;
  color: #35506f;
  font-weight: 800;
  font-size: 13px;
}

.chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 12px 0;
}

.chat p {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 14px;
}

.chat > .user,
.chat > .bot {
  width: max-content;
  min-width: 0;
  max-width: 100%;
}

.chat .user {
  justify-self: end;
  min-width: min(240px, calc(100% - 24px));
  max-width: calc(100% - 24px);
  word-break: keep-all;
  background: #e9e3ff;
}

.chat .bot {
  justify-self: start;
  background: #f1f7ff;
}

.recommend-strip {
  display: grid;
  gap: 10px;
}

.ask-box,
.search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 14px 0;
}

.ask-box input,
.search-row input {
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid #d9e8fb;
  padding: 0 14px;
  outline: none;
}

.ask-box button,
.search-row button {
  min-width: 48px;
  border-radius: 14px;
  background: #0877ff;
  color: #fff;
  font-weight: 900;
}

.map-panel,
.mini-map {
  height: 280px;
  border-radius: 22px;
  background:
    linear-gradient(90deg, transparent 49%, rgba(8, 119, 255, 0.12) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(8, 119, 255, 0.12) 50%, transparent 51%),
    #dff1ff;
  background-size: 92px 92px;
  position: relative;
  overflow: hidden;
}

.map-panel::before,
.mini-map::before {
  content: "";
  position: absolute;
  inset: 50px -20px;
  border-top: 22px solid rgba(255, 255, 255, 0.8);
  transform: rotate(-18deg);
}

.pin {
  position: absolute;
  border-radius: 999px;
  background: #fff;
  color: #0877ff;
  box-shadow: 0 8px 20px rgba(0, 55, 120, 0.16);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
}

.p1 { left: 58%; top: 23%; }
.p2 { left: 42%; top: 47%; background: #0877ff; color: #fff; }
.p3 { left: 18%; top: 36%; }
.p4 { right: 12%; bottom: 18%; }

.detail-photo {
  height: 300px;
  margin: -18px -16px 0;
  background-size: cover;
  background-position: center;
  position: relative;
}

.floating {
  position: absolute;
  top: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #263d5b;
  font-size: 24px;
}

.floating.back { left: 16px; }
.floating.save { right: 16px; color: #e04444; }

.detail-body {
  padding: 18px 0 0;
}

.meta-grid,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0;
}

.meta-grid span,
.stats-grid article {
  min-height: 58px;
  border-radius: 14px;
  background: #f5f9ff;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.audio-card button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #7c4dff;
  color: #fff;
}

.api-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.api-list span {
  border-radius: 999px;
  background: #edf6ff;
  color: #0877ff;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
}

.crowd-bars {
  height: 120px;
  display: flex;
  align-items: end;
  gap: 10px;
  margin: 12px 0 86px;
}

.crowd-bars span {
  flex: 1;
  height: var(--h);
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #ffc329, #0877ff);
  position: relative;
}

.crowd-bars small {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  color: #687891;
}

.fixed-actions {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 86px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1fr;
  gap: 8px;
}

.sheet {
  background: #fff;
  border-radius: 26px 26px 0 0;
  min-height: calc(100vh - 120px);
  margin: 18px -16px -96px;
  padding: 22px 16px 110px;
  box-shadow: 0 -16px 40px rgba(42, 92, 148, 0.12);
}

.close {
  float: right;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f4f7fb;
}

.mini-place {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.mini-place .place-image {
  height: 82px;
  border-radius: 16px;
}

.time-scale {
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #14b885, #ffc329, #f07530, #df3f5f);
  margin: 18px 0;
}

.slot-list,
.translation-list,
.notice-list,
.settings-list {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.slot-list li,
.translation-list li,
.settings-list li,
.notice-list article {
  background: #f7fbff;
  border: 1px solid #e4eefb;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.route-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 12px;
}

.route-card p {
  margin: 0 0 10px;
  display: grid;
  grid-template-columns: 44px 12px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.route-card span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0877ff;
}

.route-card .green { background: #14b885; }
.route-card .orange { background: #f07530; }
.route-card .purple { background: #7c4dff; }

.mini-map {
  height: 220px;
}

.translate-card {
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e4eefb;
  padding: 14px;
  margin: 14px 0;
}

.language-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.sign-preview {
  min-height: 210px;
  border-radius: 18px;
  background: linear-gradient(135deg, #eef6ff, #ffffff);
  border: 1px solid #d7e8fa;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  place-items: center;
  padding: 18px;
  text-align: center;
}

.camera-button {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #7c4dff;
  color: #fff;
  display: block;
  margin: -29px auto 0;
  font-size: 24px;
}

.notice-list article {
  display: grid;
  grid-template-columns: 1fr auto;
}

.notice-list p {
  margin: 3px 0 0;
  color: #6a788d;
  font-size: 13px;
}

.profile-card {
  align-items: center;
}

.profile-card h1 {
  margin: 0;
  font-size: 22px;
}

.profile-card button {
  margin-top: 8px;
  border-radius: 999px;
  background: #eef6ff;
  color: #0877ff;
  min-height: 34px;
  padding: 0 12px;
  font-weight: 800;
}

.stats-grid {
  grid-template-columns: repeat(4, 1fr);
}

.stats-grid article {
  min-height: 86px;
}

.stats-grid strong {
  font-size: 24px;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--app-width));
  z-index: 10;
  bottom: 0;
  height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid #e3edf8;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 8px 10px calc(12px + env(safe-area-inset-bottom, 0px));
  backdrop-filter: blur(14px);
}

.bottom-nav button {
  border-radius: 16px;
  background: transparent;
  color: #728198;
  display: grid;
  place-items: center;
  gap: 2px;
}

.bottom-nav span {
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
}

.bottom-nav .svg-icon {
  width: 21px;
  height: 21px;
}

.bottom-nav small {
  font-size: 11px;
  font-weight: 800;
}

.bottom-nav .active {
  background: #0877ff;
  color: #fff;
}

@media (max-width: 520px) {
  :root { --app-gutter: 16px; }
  .phone-shell,
  .mobile-stage {
    padding: 0;
  }

  .phone-screen,
  .splash-screen {
    min-height: 100vh;
    width: 100%;
    border-radius: 0;
    border: 0;
  }

  .horizontal-list {
    grid-auto-columns: 78%;
  }
}
.policy-actions { flex-direction: column; align-items: flex-start; gap: 6px; }
.policy-actions small { font-size: 12px; line-height: 1.5; color: #596476; }
.forecast-page { padding: 8px 20px 32px; min-width: 0; }
.forecast-page h1 { font-size: 24px; margin: 12px 0; }
.forecast-page h2 { font-size: 18px; overflow-wrap: anywhere; }
.forecast-disclaimer { padding: 12px 0; border-top: 1px solid #dce5ee; border-bottom: 1px solid #dce5ee; font-size: 13px; line-height: 1.6; color: #4d5e71; }
.forecast-search { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 10px; align-items: end; margin: 20px 0 10px; }
.forecast-search label { display: grid; gap: 6px; min-width: 0; font-size: 13px; }
.forecast-search input, .forecast-search select { width: 100%; min-width: 0; height: 44px; border: 1px solid #cad5df; border-radius: 6px; padding: 8px; background: #fff; color: #172b3a; font: inherit; }
.forecast-search .primary { min-height: 44px; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.forecast-target, .forecast-choice { display: flex; gap: 12px; justify-content: space-between; align-items: center; border-bottom: 1px solid #e0e7ef; padding: 12px 0; overflow-wrap: anywhere; }
.forecast-target { color: #126150; }
.forecast-target button, .forecast-choice button { flex-shrink: 0; }
.forecast-value { display: grid; gap: 8px; padding: 24px 0 18px; }
.forecast-value strong { font-size: 32px; color: #126150; }
.forecast-series { border-block: 1px solid #dce5ee; padding: 12px 0; }
.forecast-series summary { cursor: pointer; }
.forecast-series table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.forecast-series th, .forecast-series td { text-align: left; padding: 9px 6px; border-bottom: 1px solid #e8edf2; }
.forecast-series td:last-child, .forecast-series th:last-child { text-align: right; }
.forecast-series tr.selected { background: #eaf6f1; font-weight: 700; }
.reminder-settings { padding: 20px 0 0; margin-top: 20px; border-top: 1px solid #dce5ee; }
.reminder-settings p { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.reminder-toggle { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.reminder-toggle input { width: 20px; height: 20px; flex-shrink: 0; accent-color: #126150; }
.visit-forecast { margin: 10px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; }
.visit-forecast p { width: 100%; margin: 0; }
.visit-forecast small { color: #596476; }
.visit-forecast button { display: inline-flex; align-items: center; gap: 5px; }
.visit-forecast svg { width: 16px; height: 16px; }
.today-visit-row { padding-bottom: 12px; border-bottom: 1px solid #e3eaf1; }
@media (max-width: 520px) {
  .forecast-page { padding-inline: 16px; }
  .forecast-search { grid-template-columns: minmax(0, 1fr) auto; }
  .forecast-search label:first-child { grid-column: 1 / -1; }
  .forecast-target, .forecast-choice { align-items: flex-start; flex-wrap: wrap; }
}