/* ROUND UI v4 — shared visual baseline before per-screen refinement. */
:root {
  --v4-gold: #d8ba7b;
  --v4-gold-bright: #ecd59f;
  --v4-ink: #080909;
  --v4-panel: rgba(15,17,17,.92);
  --v4-panel-soft: rgba(255,255,255,.027);
  --v4-line: rgba(255,255,255,.105);
  --v4-line-strong: rgba(216,186,123,.42);
  --v4-text: #ebe6dc;
  --v4-muted: #8f8b84;
  --v4-good: #9fc8a9;
  --v4-danger: #ee9d97;
  --v4-radius-lg: 22px;
  --v4-radius-md: 16px;
  --v4-shadow: 0 24px 70px rgba(0,0,0,.28);
}

html.round-v4,
html.round-v4 body,
html.round-v4 button,
html.round-v4 input,
html.round-v4 select,
html.round-v4 textarea { font-family: Arial, "Noto Sans KR", sans-serif; }

html.round-v4 body { background: var(--v4-ink); }
html.round-v4 button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
html.round-v4 button:focus-visible,
html.round-v4 input:focus-visible,
html.round-v4 select:focus-visible,
html.round-v4 textarea:focus-visible {
  outline: 2px solid rgba(216,186,123,.70);
  outline-offset: 2px;
}

html.round-v4 .screen-view:not(#homeView) {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  animation: v4-view-in .24s ease both;
}
@keyframes v4-view-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

html.round-v4 .panel,
html.round-v4 .rx-work-head,
html.round-v4 .rx-work-toolbar,
html.round-v4 .rx-board,
html.round-v4 .rx-connect-panel,
html.round-v4 .life-editor,
html.round-v4 .concierge-stage {
  border-color: var(--v4-line) !important;
  box-shadow: var(--v4-shadow);
}

html.round-v4 .eyebrow,
html.round-v4 .rx-kicker,
html.round-v4 .panel-title,
html.round-v4 .card-kicker,
html.round-v4 .booking-kicker {
  color: var(--v4-gold) !important;
  letter-spacing: .14em;
}

/* The wall keeps four reachable navigation choices; labels are readable from a distance. */
html.round-v4 .r3-nav {
  width: min(720px,calc(100vw - 84px));
  gap: 7px;
  padding: 8px;
  border-radius: 22px;
  background: rgba(8,9,9,.93);
}
html.round-v4 .r3-nav button {
  height: 68px;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 11px;
  padding: 0 15px;
  border-radius: 15px;
}
html.round-v4 .r3-nav-icon { width: 34px; height: 34px; border-radius: 11px; font-size: 14px; }
html.round-v4 .r3-nav-copy { min-width: 0; }
html.round-v4 .r3-nav-copy b { font-size: 11px; }
html.round-v4 .r3-nav-copy small { margin-top: 5px; overflow: hidden; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }

/* Whole-menu hierarchy: six categories first, details only after selection. */
html.round-v4 .r3-menu-surface {
  inset: 80px 46px 118px;
  border-radius: 28px;
  background: radial-gradient(circle at 82% 5%,rgba(216,186,123,.09),transparent 30%),linear-gradient(145deg,rgba(11,12,12,.985),rgba(7,8,8,.97));
}
html.round-v4 .r3-menu-inner { grid-template-rows: 94px minmax(0,1fr); }
html.round-v4 .r3-menu-head { padding: 0 30px; }
html.round-v4 .r3-menu-head h1 { font-size: 32px; }
html.round-v4 .r3-menu-head p { max-width: 520px; font-size: 10px; }
html.round-v4 .r3-hub-grid { gap: 12px; padding: 20px; }
html.round-v4 .r3-category-card { padding: 24px; border-radius: 21px; }
html.round-v4 .r3-category-copy b { font-size: 27px; }
html.round-v4 .r3-category-copy span { max-width: 470px; font-size: 10px; line-height: 1.55; }
html.round-v4 .r3-feature-view { grid-template-columns: 260px minmax(0,1fr); gap: 12px; padding: 20px; }
html.round-v4 .r3-feature-aside,
html.round-v4 .r3-feature-card { border-radius: 21px; }
html.round-v4 .r3-feature-card { padding: 24px; }
html.round-v4 .r3-card-copy b { font-size: 26px; }
html.round-v4 .r3-card-copy p { font-size: 10px; }
html.round-v4 .r3-feature-card::after { font-size: 9px; }

/* Home: ambient image stays primary, daily cards remain the only foreground layer. */
html.round-v4 .r2-ambient-media { filter: brightness(.76) saturate(.90); }
html.round-v4 .r2-home-cards { grid-template-columns: 1.08fr 1fr 1fr; gap: 12px; }
html.round-v4 .r2-home-card { min-height: 142px; padding: 19px 20px; border-radius: 18px; }
html.round-v4 .r2-home-card strong { font-size: 22px; }
html.round-v4 .r2-home-card p { font-size: 10px; }
html.round-v4 .r2-scene-recommend-actions button { min-height: 44px; }
html.round-v4 .r2-home-elevator { min-width: 248px; height: 58px; border-radius: 16px; }

/* Life Scene: one scene at a time with large, reachable controls. */
html.round-v4 #lifeView { gap: 12px !important; }
html.round-v4 #lifeView > .scene-strip,
html.round-v4 #lifeView .side-panel > .climate { border-radius: var(--v4-radius-lg) !important; }
html.round-v4 #lifeView .scene-card { min-height: 74px !important; border-radius: 16px !important; }
html.round-v4 #lifeView .scene-card strong { font-size: 13px !important; }
html.round-v4 #lifeView .scene-run,
html.round-v4 #lifeView button,
html.round-v4 #settingsView button { min-height: 44px; }

/* MapView remains room-first; this layer changes only visual consistency. */
html.round-v4 #mapView.rd-digital-twin-ready .map-stage { border-radius: var(--v4-radius-lg) !important; }
html.round-v4 #mapView.rd-digital-twin-ready .floor-plan { border-radius: 19px !important; }
html.round-v4 #mapView.rd-digital-twin-ready .rx-map-launchers.rd-map-tools { border-color: var(--v4-line); background: rgba(8,9,9,.88); }
html.round-v4 #mapView.rd-digital-twin-ready .rx-map-launchers.rd-map-tools button { min-height: 48px; }
html.round-v4 #mapView.rd-digital-twin-ready .rd-twin-control { min-height: 72px; }
html.round-v4 #mapView .rx-btn,
html.round-v4 #mapView .rx-product { min-height: 46px; }

/* Concierge retains its tab-first task separation. */
html.round-v4 #conciergeView.rd-concierge-v3 > .concierge-stage { border-radius: var(--v4-radius-lg) !important; }
html.round-v4 #conciergeView.rd-concierge-v3 .rd-concierge-tabs button { min-height: 54px; }
html.round-v4 #conciergeView.rd-concierge-v3 .notice-item,
html.round-v4 #conciergeView.rd-concierge-v3 .facility-card,
html.round-v4 #conciergeView.rd-concierge-v3 .service-btn { min-width: 0; overflow: hidden; }

/* Gallery and media: imagery leads, controls form one calm lower/side rail. */
html.round-v4 #galleryView,
html.round-v4 #appsView,
html.round-v4 #externalView { gap: 12px !important; }
html.round-v4 #galleryView .gallery-stage,
html.round-v4 #galleryView .gallery-thumb,
html.round-v4 #appsView .rd-detail-shell,
html.round-v4 #externalView .rd-detail-shell { border-radius: var(--v4-radius-lg) !important; }
html.round-v4 #galleryView .gallery-thumb { min-height: 78px !important; }
html.round-v4 #appsView button,
html.round-v4 #externalView button { min-height: 48px; }
html.round-v4 #appsView .rd-app-feature,
html.round-v4 #appsView .rd-atelier-panel { border-radius: 18px !important; }
html.round-v4 #externalView .rd-source-button { min-width: 0; }

/* Idea Wall and Connect share one working-surface grammar. */
html.round-v4 #workspaceView,
html.round-v4 #connectView { gap: 12px !important; }
html.round-v4 #workspaceView .rx-work-head,
html.round-v4 #workspaceView .rx-work-toolbar,
html.round-v4 #workspaceView .rx-board,
html.round-v4 #connectView .rx-presence-stage,
html.round-v4 #connectView .rx-connect-panel { border-radius: var(--v4-radius-lg) !important; }
html.round-v4 #workspaceView button,
html.round-v4 #connectView button { min-height: 44px; }
html.round-v4 #workspaceView .rx-work-toolbar { overflow-x: auto; overflow-y: hidden; }
html.round-v4 #workspaceView .rx-card,
html.round-v4 #connectView .rx-device { min-width: 0; overflow: hidden; }

/* Wake HUD and Departure Brief stay overlays, but use the same sizing and depth. */
html.round-v4 .rx-widget,
html.round-v4 .rx-panel-modal,
html.round-v4 .r2-departure-screen { border-radius: var(--v4-radius-lg) !important; }
html.round-v4 .rx-hud-actions button,
html.round-v4 .rx-scene-chip,
html.round-v4 .rx-departure-open,
html.round-v4 .r2-departure-screen button { min-height: 46px; }
html.round-v4 .r2-departure-screen .r2-destination-list button { min-height: 56px; }
html.round-v4 .r2-departure-screen .r2-actions button { min-height: 50px; }

/* Settings and Admin are deliberate workspaces, not resident home cards. */
html.round-v4 #settingsView > .life-editor,
html.round-v4 #adminView > .admin-console,
html.round-v4 #adminView .admin-office-view { border-radius: var(--v4-radius-lg) !important; }
html.round-v4 #settingsView input,
html.round-v4 #settingsView select,
html.round-v4 #adminView input,
html.round-v4 #adminView select,
html.round-v4 #adminView textarea,
html.round-v4 #adminView button { min-height: 44px; }
html.round-v4 #adminView .office-card,
html.round-v4 #adminView .admin-card,
html.round-v4 #adminView .admin-panel { min-width: 0; overflow-wrap: anywhere; }

/* Light mode is warm glass, not a white office dashboard. */
html.round-v4[data-theme="light"] {
  --v4-panel: rgba(250,248,242,.94);
  --v4-panel-soft: rgba(255,255,255,.68);
  --v4-line: rgba(39,72,66,.14);
  --v4-text: #293c38;
  --v4-muted: #74827e;
  --v4-shadow: 0 20px 54px rgba(49,71,65,.10);
}
html.round-v4[data-theme="light"] .r3-nav { border-color: rgba(39,72,66,.17); background: rgba(246,244,238,.94); }
html.round-v4[data-theme="light"] .r3-menu-surface { border-color: rgba(39,72,66,.15); background: rgba(244,242,236,.97); color: #293c38; }
html.round-v4[data-theme="light"] .r3-category-card,
html.round-v4[data-theme="light"] .r3-feature-card,
html.round-v4[data-theme="light"] .r3-feature-aside { border-color: rgba(39,72,66,.14); background-color: rgba(255,255,255,.58); color: #293c38; }

@media (max-width: 1240px), (max-height: 720px) {
  html.round-v4 .r3-menu-surface { inset: 70px 28px 104px; }
  html.round-v4 .r3-menu-inner { grid-template-rows: 76px minmax(0,1fr); }
  html.round-v4 .r3-hub-grid,
  html.round-v4 .r3-feature-view { padding: 12px; gap: 8px; }
  html.round-v4 .r3-category-card,
  html.round-v4 .r3-feature-card { padding: 16px; }
  html.round-v4 .r3-category-copy b,
  html.round-v4 .r3-card-copy b { font-size: 21px; }
  html.round-v4 .r3-feature-view { grid-template-columns: 210px minmax(0,1fr); }
  html.round-v4 .r3-nav { width: min(640px,calc(100vw - 56px)); bottom: 10px; padding: 6px; }
  html.round-v4 .r3-nav button { height: 58px; grid-template-columns: 28px minmax(0,1fr); padding: 0 10px; }
  html.round-v4 .r3-nav-icon { width: 28px; height: 28px; }
  html.round-v4 .r2-home-card { min-height: 112px; padding: 14px; }
  html.round-v4 .r2-home-card strong { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html.round-v4 .screen-view:not(#homeView) { animation: none; }
}