/* ==========================================
   eats GO - Design System
   바이크는 안전하게 렌탈비는 편리하게
   ========================================== */

/* Eats Pay default font: Pretendard. Loaded from index.html for faster first paint. */

/* === CSS Variables === */
:root {
  --green-primary: #03c75a;
  --green-dark: #3a9430;
  --green-light: #eaf7e8;
  --green-btn: #03c75a;
  --green-accent: #5dc950;

  --text-primary: #1a1a1a;
  --text-secondary: #555555;
  --text-muted: #999999;
  --text-light: #bbbbbb;

  --border-color: #d8d8d8;
  --border-light: #eeeeee;
  --bg-white: #ffffff;
  --bg-light: #f7f7f7;
  --bg-gray: #f0f0f0;

  --font: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --card-border: #d8e7d4;
  --card-shadow: 0 5px 14px rgba(28,81,27,.045);
  --card-shadow-active: 0 4px 10px rgba(28,81,27,.06);
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.12);

  --header-height: 80px;
  --bottom-nav-height: 60px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --system-nav-bottom: 4px;
  --app-bottom-inset: max(var(--safe-area-bottom), var(--system-nav-bottom));
}

/* === Reset === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--green-primary) #eef8f0;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #eef8f0;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: var(--green-primary);
  border: 2px solid #eef8f0;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #02ad4e;
}

*::-webkit-scrollbar-corner {
  background: #eef8f0;
}

.svg-symbol-defs {
  display: none;
}

html, body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  background: #e8e8e8;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#app-shell,
#app-shell *,
.app-dialog,
.app-dialog *,
.photo-sheet,
.photo-sheet * {
  font-family: var(--font) !important;
}

input,
button,
select,
textarea {
  font-family: var(--font) !important;
}

input::placeholder,
textarea::placeholder {
  font-family: var(--font) !important;
}

/* === Unified Logo Component === */
.eatsgo-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.eatsgo-mark {
  width: 44px;
  margin-left: 1px;
  margin-bottom: -5px; /* Overlap with text */
  z-index: 1;
}
.eatsgo-text {
  display: grid;
  grid-template-columns: repeat(var(--bottom-nav-count, 3), minmax(0, 1fr));
  align-items: baseline;
  gap: 3px;
  font-size: 26px;
}
/* Small variant for headers */
.eatsgo-logo.sm .eatsgo-mark {
  width: 34px;
  margin-bottom: -4px;
}
.eatsgo-logo.sm .eatsgo-text {
  font-size: 21px;
}
/* Medium variant for splash */
.eatsgo-logo.md .eatsgo-mark {
  width: 50px;
  margin-bottom: -6px;
}
.eatsgo-logo.md .eatsgo-text {
  font-size: 30px;
}

/* === App Shell === */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#app-shell {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d0d0d0;
  z-index: 0;
}

#app-shell[hidden] {
  display: none !important;
}

.phone-frame {
  width: 390px;
  height: min(844px, 100vh);
  background: var(--bg-white);
  border-radius: 40px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(0,0,0,0.15);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* Status bar */
.status-bar {
  height: 44px;
  background: var(--bg-white);
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  flex-shrink: 0;
  z-index: 100;
}

.status-bar .time {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.status-bar .icons {
  display: flex;
  gap: 6px;
  align-items: center;
}

.status-bar .icons svg {
  height: 12px;
  width: auto;
}

html.native-app,
html.native-app body {
  background: var(--bg-white);
}

html.native-app #app-shell {
  display: block;
  background: var(--bg-white);
}

html.native-app .phone-frame {
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  box-shadow: none;
}

html.native-app .status-bar {
  display: none;
}

html.native-app .screen-container {
  height: 100vh;
  height: 100dvh;
}

/* === Screen Container === */
.screen-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg-white);
  display: none;
  flex-direction: column;
}

.scrollable-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  padding-bottom: calc(var(--bottom-nav-height) + var(--app-bottom-inset) + 8px);
}

#screen-my > .scrollable-content,
#screen-cs-main > .scrollable-content {
  min-height: 0;
  flex: 1 1 auto;
}

.scrollable-content::-webkit-scrollbar {
  display: none;
}

.screen::-webkit-scrollbar { display: none; }

.screen.active {
  display: flex;
}

/* === Transitions === */
.screen.slide-in-right {
  animation: slideInRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.screen.slide-in-left {
  animation: slideInLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.screen.slide-out-right {
  animation: slideOutRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

/* ==========================================
   SPLASH SCREEN
   ========================================== */
#screen-splash {
  background: var(--bg-white);
  align-items: center;
  justify-content: center;
}

.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 60px;
}

.splash-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.logo-icon {
  width: 52px;
  height: 44px;
}

.logo-wordmark {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.logo-wordmark .eats {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -1px;
}

.logo-wordmark .pay {
  font-size: 36px;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -1px;
}

.splash-tagline {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
  font-weight: 400;
}

.splash-brand {
  font-size: 18px;
  font-weight: 700;
  color: var(--green-primary);
  margin-top: 4px;
}

.splash-footer {
  position: absolute;
  bottom: 40px;
  font-size: 12px;
  color: var(--text-muted);
}

.splash-screen-premium {
  background: linear-gradient(135deg, #fbfdfb 0%, #eaf7e8 100%);
}

.splash-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px 54px;
}

.splash-stack {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.splash-img-main {
  display: block;
  width: min(42vw, 144px) !important;
  max-width: 144px !important;
  height: auto !important;
  max-height: 74px !important;
  object-fit: contain;
  margin: 0 auto 8px;
}

.splash-bike-stage {
  width: min(52vw, 196px);
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  margin: 0 auto;
}

.splash-bike-hero {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.splash-tagline-main {
  font-size: 16px;
  color: #323832;
  line-height: 1.55;
  font-weight: 700;
  margin-top: 2px;
}

.splash-footer-main {
  text-align: center;
  padding: 24px 24px 28px;
  font-size: 12px;
  color: #aaa;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media (max-height: 680px) {
  .splash-center {
    padding-top: 24px;
    padding-bottom: 40px;
  }

  .splash-stack {
    gap: 6px;
  }

  .splash-img-main {
    width: min(36vw, 124px) !important;
    margin-bottom: 2px;
  }

  .splash-bike-stage {
    width: min(42vw, 152px);
  }

  .splash-tagline-main {
    font-size: 15px;
    line-height: 1.45;
  }

  .splash-footer-main {
    padding-bottom: 18px;
  }
}

.location-setup-screen {
  background: linear-gradient(135deg, #fbfdfb 0%, #eef8ec 100%);
}

.location-setup-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 24px;
}

.location-setup-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 24px 20px;
  text-align: center;
}

.location-setup-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 20px;
  background: #e9f8e7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-primary);
  font-size: 30px;
}

.location-setup-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.35;
  margin: 0 0 8px;
}

.location-setup-copy {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 18px;
}

.location-setup-summary {
  display: none;
  margin: 0 0 16px;
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  background: #f7fff6;
  color: var(--green-dark);
  padding: 11px 12px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.5;
  text-align: left;
}

.location-setup-summary.is-visible {
  display: block;
}

.location-setup-summary-muted {
  color: var(--text-muted);
}

.location-setup-request {
  width: 100%;
  height: 48px;
  font-size: 14px;
  font-weight: 900;
}

.location-setup-recheck {
  margin-top: 10px;
  width: 100%;
  height: 42px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: #fff;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 900;
}

.location-setup-skip {
  margin-top: 8px;
  width: 100%;
  min-height: 42px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.location-setup-status {
  min-height: 38px;
  margin: 14px 0 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ==========================================
   COMMON HEADER (eats GO header)
   ========================================== */
.app-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.header-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header-logo .logo-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.header-logo .logo-row .eats {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.header-logo .logo-row .pay {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-primary);
}

.header-logo .logo-icon-sm {
  width: 32px;
  height: 26px;
  margin-right: 4px;
}

.header-logo .tagline {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 400;
}

/* Page header with back */
.page-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.back-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  margin-right: 8px;
  color: var(--text-primary);
  transition: background 0.15s;
}

.back-btn:hover { background: var(--bg-gray); }

.page-title {
  font-size: 17px;
  font-weight: 600;
}

/* ==========================================
   HOME SCREEN
   ========================================== */
#screen-home {
  background: var(--bg-white);
}

.home-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px;
  flex-shrink: 0;
}

.home-logo-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.home-logo-row .logo-icon-sm {
  width: 28px;
  height: 22px;
}

.home-logo-row .logo-text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.home-logo-row .logo-text .pay { font-weight: 900; }

/* Login banner */
.login-banner {
  margin: 0 16px 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login-banner-text {
  flex: 1;
}

.login-banner-text .main {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.login-banner-text .sub {
  font-size: 12px;
  color: var(--text-muted);
}

.promo-card {
  margin: 0 16px 12px;
  padding: 10px 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-white);
}

.promo-badge {
  background: #1a1a5e;
  color: white;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
}

.promo-text {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
}

.btn-promo {
  background: var(--green-primary);
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
}

/* Quick menu */
.quick-menu {
  display: flex;
  justify-content: space-around;
  padding: 12px 8px 16px;
  border-bottom: 6px solid var(--bg-light);
}

.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.quick-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.2s;
  background: var(--bg-white);
}

.quick-item:hover .quick-icon {
  background: var(--green-light);
  border-color: var(--green-primary);
}

.quick-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Banner */
.home-banner {
  margin: 16px 16px 0;
  border-radius: var(--radius);
  overflow: hidden;
  height: 100px;
  background: linear-gradient(135deg, #ff6b35, #f7c59f);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  cursor: pointer;
  position: relative;
}

.banner-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,0.9);
  color: #e53935;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}

.banner-text {
  color: white;
}

.banner-text .logo {
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,0.25);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  display: inline-block;
}

.banner-text .main {
  font-size: 15px;
  font-weight: 700;
}

@keyframes eatsgo-shine {
  0% { transform: translateX(-80%) rotate(18deg); opacity: 0; }
  35% { opacity: .8; }
  65% { opacity: .8; }
  100% { transform: translateX(340%) rotate(18deg); opacity: 0; }
}

.metal-benefit-banner {
  border: 1.5px solid rgba(106, 184, 124, .58);
  background:
    linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.82) 12%, rgba(255,255,255,.18) 24%, transparent 36%),
    linear-gradient(135deg, #eefaf1 0%, #ffffff 34%, #e7f3ff 67%, #f5fff7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(95, 150, 110, .12),
    0 5px 16px rgba(30, 95, 52, .08);
}

.metal-benefit-glow {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.36), transparent),
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.78), transparent 32%),
    radial-gradient(circle at 88% 100%, rgba(170,211,255,.35), transparent 36%);
  opacity: .82;
  pointer-events: none;
}

.metal-benefit-sheen {
  position: absolute;
  inset: -45% auto auto -42%;
  width: 46%;
  height: 190%;
  background: linear-gradient(105deg, transparent 15%, rgba(255,255,255,.25) 32%, rgba(255,255,255,.92) 48%, rgba(194,218,255,.38) 58%, transparent 78%);
  filter: blur(.2px);
  transform: rotate(17deg);
  animation: metallicSweep 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes metallicSweep {
  0% { transform: translateX(-60%) rotate(17deg); opacity: 0; }
  18% { opacity: .9; }
  58% { opacity: .9; }
  100% { transform: translateX(370%) rotate(17deg); opacity: 0; }
}

.installment-slide-enter {
  animation: installmentSlideIn .42s ease both;
}

@keyframes installmentSlideIn {
  0% {
    opacity: 0;
    transform: translateX(18px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.app-notice-ticker {
  width: calc(100% - 32px);
  height: 38px;
  margin: 0 16px 10px;
  border: 1.5px solid var(--card-border);
  border-radius: 10px;
  background: linear-gradient(135deg, #f8fff6 0%, #eef9ec 100%);
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  overflow: hidden;
  cursor: pointer;
}

.app-notice-ticker-label {
  flex: 0 0 auto;
  border-radius: 7px;
  background: var(--green-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 6px 8px;
}

.app-notice-ticker-track {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 18px;
  overflow: hidden;
  white-space: nowrap;
  color: #12351b;
  font-size: 12px;
  font-weight: 900;
}

.app-notice-ticker-text {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  padding-right: 34px;
  animation: appNoticeTicker 9s linear infinite;
}

.app-notice-ticker-text + .app-notice-ticker-text {
  animation-delay: 4.5s;
}

@keyframes appNoticeTicker {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .app-notice-ticker-text {
    position: static;
    animation: none;
  }
  .app-notice-ticker-text + .app-notice-ticker-text {
    display: none;
  }
}

/* Long-form fields stay in place while their content scrolls. */
textarea.form-input.talk-body-input {
  height: 150px;
  min-height: 150px;
  max-height: 150px;
  overflow-y: auto;
  resize: none;
}

/* lease-calendar-status-v2: 예정 / 완료 / 미납 */
.lease-calendar-legend .is-scheduled::before{background:#5f8fd8}
.lease-calendar-legend .is-unpaid::before{background:#d85c5c}
.lease-calendar-legend .is-insurance::before{background:#7895ad}.lease-calendar-day.is-insurance{background:#f4f8fb}.lease-calendar-day.is-insurance .lease-calendar-status{background:#e1ebf3;color:#47657e}
.lease-calendar-day.is-scheduled{background:#f6f9fe}
.lease-calendar-day.is-scheduled .lease-calendar-status{background:#e4edfb;color:#2b5f9e}
.lease-calendar-day.is-unpaid{background:#fff7f7}
.lease-calendar-day.is-unpaid .lease-calendar-status{background:#fee2e2;color:#b42b2b}

/* Talk section */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 8px;
}

.section-title {
  font-size: 15px;
  font-weight: 700;
}

.section-more {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: none;
  font-family: var(--font);
}

.btn-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.bottom-nav {
  z-index: 30;
}

/* === 1st refactor: home/common app sections === */
.app-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 12px;
  flex-shrink: 0;
}

.app-header-logo {
  height: 28px;
  width: auto;
}

.app-logo-home-link {
  cursor: pointer;
}

.app-back-btn {
  border: none;
  background: none;
  font-weight: 800;
  cursor: pointer;
  color: #333;
}

.app-back-icon {
  width: 18px;
  height: 18px;
}

.home-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 8px;
  flex-shrink: 0;
}

.home-identity-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.home-auth-action {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.home-scroll {
  padding: 16px 0 calc(var(--bottom-nav-height) + var(--app-bottom-inset) + 8px);
}

.home-charge-card {
  margin: 0 16px 8px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
}

.home-charge-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 30px;
  margin: 0;
  border: none;
  border-radius: 5px;
  background: #fff;
  color: #2e8d23;
  font-size: 13px;
  font-weight: 900;
  box-shadow: none;
  cursor: pointer;
}

.home-charge-main {
  min-height: 60px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #49a92e;
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  box-shadow: 0 5px 12px rgba(73, 169, 46, .2);
}

.home-charge-main > span {
  min-width: 0;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0;
}

.home-installment-banner {
  display: none;
}

.home-installment-slide {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  min-height: 40px;
}

.home-banner-card-logos {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
}

.home-installment-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
  text-align: left;
}

.home-installment-name,
.home-installment-subtitle {
  color: #1e2520;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-installment-name {
  font-size: 13px;
  font-weight: 900;
}

.home-installment-subtitle {
  font-size: 12px;
  font-weight: 900;
}

.home-coway-banner {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 8px 10px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #ffffff 0%, #f7fff8 100%);
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 5px 14px rgba(3, 199, 90, .08);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.home-coway-banner.is-hidden {
  display: none;
}

.home-partner-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 10px;
  font-weight: 900;
  color: #17833a;
  line-height: 1.05;
  white-space: nowrap;
}

.home-partner-brand img {
  width: 54px;
  height: 20px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}

.home-partner-flip-stage {
  position: relative;
  display: flex;
  align-items: center;
  height: 32px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  margin-left: 0;
  box-sizing: border-box;
}

.home-partner-flip-item {
  position: static;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  opacity: 1;
  transform: none;
  transition: opacity .2s ease, transform .2s ease;
  border-radius: 4px;
  animation: partnerFlipIn .24s cubic-bezier(.2, .78, .25, 1) both;
}

.home-partner-flip-item.partner-flip-replay {
  animation: partnerFlipIn .24s cubic-bezier(.2, .78, .25, 1) both;
}

.home-partner-flip-item.is-changing {
  opacity: 0;
  transform: translateY(-12px);
}

.home-partner-flip-item strong {
  color: #1f6f2d;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-partner-flip-item em {
  color: #5e6b62;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 360px) {
  .home-coway-banner {
    grid-template-columns: 88px minmax(0, 1fr);
    padding: 10px;
    column-gap: 7px;
  }

  .home-partner-brand img {
    width: 54px;
    height: 23px;
  }

  .home-partner-brand {
    font-size: 9px;
  }

  .home-partner-flip-item strong {
    font-size: 11px;
  }

  .home-partner-flip-item em {
    font-size: 9px;
  }
}

/* Rider-news list: keep editorial content separate from customer notices. */
.worker-news-content {
  padding: 18px 18px calc(var(--bottom-nav-height) + var(--app-bottom-inset) + 24px);
  background: #f6f8f5;
}

.worker-news-title-stack {
  margin-bottom: 14px;
}

.worker-news-list {
  overflow: hidden;
  border: 1px solid #dcebd9;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(26, 79, 28, .04);
}

.worker-news-card {
  display: grid;
  width: 100%;
  min-height: 86px;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 0;
  border-bottom: 1px solid #edf3eb;
  color: #172617;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.worker-news-card:last-child {
  border-bottom: 0;
}

.worker-news-card:focus-visible {
  outline: 3px solid rgba(70, 169, 40, .28);
  outline-offset: -3px;
}

.worker-news-card-thumb {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dcebd9;
  border-radius: 50%;
  background: #f4faf2;
}

.worker-news-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.worker-news-card-thumb.is-logo img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.worker-news-card-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.worker-news-card-copy strong,
.worker-news-card-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worker-news-card-copy strong {
  font-size: 14px;
  font-weight: 900;
}

.worker-news-card-copy span {
  color: #566456;
  font-size: 11px;
}

.worker-news-card-copy em {
  color: #899487;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.worker-news-empty {
  padding: 36px 18px;
  color: #727c70;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

/* lease-installment-calendar-v1 */
.manage-mini-btn.is-calendar{width:108px;min-height:28px;height:auto;padding:5px 7px;border-color:#8fcf83;color:#287a27;line-height:1.25}.manage-mini-btn.is-calendar:disabled{border-color:#d8e4d6;background:#f7f9f6;color:#899486;cursor:default}.lease-calendar-content-wrap{padding:18px 20px 96px}.lease-calendar-title-stack{display:grid;gap:4px;margin-bottom:14px}.lease-calendar-kicker{font-size:12px;font-weight:900;color:#23802c}.lease-calendar-title-stack strong{font-size:21px}.lease-calendar-title-stack>span:last-child{font-size:12px;color:#6e786d}.lease-calendar-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}.lease-calendar-summary>div{display:grid;gap:4px;padding:12px;border:1px solid #cfe4cb;border-radius:10px;background:#fbfefb}.lease-calendar-summary .wide{grid-column:1/-1}.lease-calendar-summary span{font-size:11px;color:#758074}.lease-calendar-summary strong{font-size:14px;color:#174f23}.lease-calendar-legend{display:flex;justify-content:flex-end;gap:12px;margin:8px 2px 10px;font-size:11px;font-weight:800}.lease-calendar-legend span::before{content:'';display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%}.lease-calendar-legend .is-paid::before{background:#46a928}.lease-calendar-legend .is-unpaid::before{background:#d85c5c}.lease-calendar-grid{display:grid;gap:10px}.lease-calendar-month{overflow:hidden;border:1px solid #cfe4cb;border-radius:12px;background:#fff}.lease-calendar-month h3{margin:0;padding:10px 12px;border-bottom:1px solid #dfecdd;background:#f3faf2;color:#226728;font-size:13px}.lease-calendar-day{display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center;padding:11px 12px;border-bottom:1px solid #edf3ec}.lease-calendar-day:last-child{border-bottom:0}.lease-calendar-day.is-paid{background:#f7fcf6}.lease-calendar-date{display:grid;place-items:center;gap:2px;min-height:50px;border:1px solid #d7e6d4;border-radius:9px;background:#fff}.lease-calendar-date strong{font-size:11px;font-weight:700;color:#748074}.lease-calendar-date span{font-size:15px;font-weight:900;color:#174f23}.lease-calendar-payment{display:grid;gap:3px}.lease-calendar-payment strong{font-size:14px}.lease-calendar-payment span{font-size:11px;color:#778176}.lease-calendar-status{min-width:42px;padding:5px 7px;border-radius:999px;background:#eef1ed;color:#7b847a;text-align:center;font-size:10px;font-weight:900}.lease-calendar-day.is-paid .lease-calendar-status{background:#ddf5df;color:#23802c}.lease-calendar-empty{padding:34px 18px;border:1px dashed #cbdcc8;border-radius:12px;background:#fafcf9;color:#727c70;text-align:center;font-size:13px;font-weight:700}
.lease-calendar-legend .is-pending::before{background:#f5a623}.lease-calendar-month-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;border:0;background:#f3faf2;padding:11px 12px;text-align:left}.lease-calendar-month-toggle>span{display:grid;gap:3px}.lease-calendar-month-toggle strong{color:#226728;font-size:13px}.lease-calendar-month-toggle small{color:#758074;font-size:10px}.lease-calendar-month-toggle.is-open{border-bottom:1px solid #dfecdd;background:#eaf7e8}.lease-calendar-month-days[hidden]{display:none}.lease-calendar-day.is-pending{background:#fffaf0}.lease-calendar-day.is-pending .lease-calendar-status{background:#fff0c7;color:#9a6500}

.home-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 16px 8px;
  gap: 8px;
}

.home-action-card {
  min-height: 146px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  text-align: center;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff 0%, #fbfff9 100%);
  cursor: pointer;
  padding: 10px 9px 5px;
  box-shadow: var(--card-shadow);
}

.home-action-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.home-action-title {
  font-size: 11px;
  font-weight: 900;
  color: #2f7d32;
  line-height: 1.2;
  letter-spacing: -.5px;
  text-align: center;
}

.home-action-title.danger {
  color: #d34b3f;
}

.home-action-desc {
  font-size: 10px;
  font-weight: 700;
  color: #7f877d;
  line-height: 1.34;
  letter-spacing: -.45px;
  text-align: center;
}

.home-action-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 22px;
  width: 100%;
  overflow: hidden;
}

.home-platform-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-platform-icon.hh {
  background: #68cbc8;
  box-shadow: 0 2px 5px rgba(46, 183, 178, .18);
}

.home-platform-icon.yogiyo {
  background: #d93655;
  box-shadow: 0 2px 5px rgba(217, 54, 85, .16);
}

.home-platform-icon.coupang {
  background: #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .06);
}

.home-platform-icon.ddangyo {
  background: #f15a24;
  box-shadow: 0 2px 5px rgba(241, 90, 36, .16);
}

.home-platform-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-action-button {
  height: 34px;
  border-radius: 8px;
  background: #03c75a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  margin-top: 6px;
  box-shadow: 0 5px 10px rgba(3, 199, 90, .22), inset 0 -1px 0 rgba(0, 0, 0, .12);
}

.home-action-card {
  position: relative;
  overflow: hidden;
  animation: homeCardRise .52s cubic-bezier(.2, .78, .25, 1) both, homeCardBreath 4.8s ease-in-out infinite;
  will-change: transform, box-shadow;
}

.home-action-card:nth-child(1) { animation-delay: .04s, .9s; }
.home-action-card:nth-child(2) { animation-delay: .14s, 1.15s; }
.home-action-card:nth-child(3) { animation-delay: .24s, 1.4s; }

.home-action-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(58, 148, 48, 0), rgba(58, 148, 48, .72), rgba(42, 193, 188, .48), rgba(58, 148, 48, 0));
  background-size: 220% 220%;
  opacity: .42;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: homeCardLine 3.2s ease-in-out infinite;
}

.home-action-card::after {
  content: "";
  position: absolute;
  inset: -45% -70%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .72) 50%, transparent 58%);
  transform: translateX(-70%) rotate(8deg);
  pointer-events: none;
  animation: homeCardSheen 4.6s ease-in-out infinite;
}

.home-action-card > * {
  position: relative;
  z-index: 1;
}

.home-action-card:active {
  transform: translateY(1px) scale(.985);
}

@keyframes homeCardRise {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes homeCardBreath {
  0%, 100% { box-shadow: var(--card-shadow); }
  50% { box-shadow: 0 7px 16px rgba(58, 148, 48, .09); }
}

@keyframes homeCardLine {
  0%, 100% { background-position: 0% 50%; opacity: .28; }
  50% { background-position: 100% 50%; opacity: .68; }
}

@keyframes homeCardSheen {
  0%, 55% { transform: translateX(-70%) rotate(8deg); opacity: 0; }
  68% { opacity: .48; }
  82%, 100% { transform: translateX(70%) rotate(8deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .home-action-card,
  .home-action-card::before,
  .home-action-card::after {
    animation: none;
  }
}

.home-weather-location {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0 16px 7px;
  color: #354139;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.home-weather-location-pin {
  position: relative;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--green-dark);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.home-weather-location-pin::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--green-dark);
}

#home-weather-location {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-weather-card {
  min-height: 126px;
  margin: 0 16px 16px;
  padding: 12px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.home-weather-card:hover,
.home-weather-card:focus-visible {
  border-color: rgba(3, 199, 90, .45);
  box-shadow: 0 8px 18px rgba(3, 199, 90, .12);
  transform: translateY(-1px);
}

.home-weather-icon {
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
}

.home-weather-current {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  line-height: 1.1;
}

.home-weather-copy {
  min-width: 0;
}

.home-weather-copy > strong {
  display: block;
  color: #334038;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-weather-desc {
  display: block;
  margin-top: 3px;
  color: #7c857d;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-weather-temp {
  color: #101814;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

.home-weather-now {
  display: flex;
  align-items: center;
  gap: 3px;
}

.home-weather-detail-label {
  align-self: start;
  color: var(--green-dark);
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.weather-art {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 44px;
  height: 34px;
  color: #aebbc4;
  animation: weather-art-float 5.5s ease-in-out infinite;
}

.weather-art-sun {
  position: absolute;
  top: 4px;
  left: 7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f7c948;
  box-shadow: 0 0 0 3px rgba(247, 201, 72, .18);
}

.weather-art-ray {
  position: absolute;
  top: 12px;
  left: 2px;
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: #f7c948;
}

.weather-art-ray-a { transform: rotate(45deg); }
.weather-art-ray-b { transform: rotate(-45deg); }

.weather-art-cloud {
  position: absolute;
  right: 3px;
  bottom: 5px;
  width: 29px;
  height: 12px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: -9px 2px 0 -1px currentColor;
  animation: weather-cloud-drift 7s ease-in-out infinite;
}

.weather-art-cloud::before,
.weather-art-cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: currentColor;
}

.weather-art-cloud::before {
  left: 5px;
  bottom: 5px;
  width: 13px;
  height: 13px;
}

.weather-art-cloud::after {
  right: 4px;
  bottom: 4px;
  width: 10px;
  height: 10px;
}

.weather-art-cloud-b {
  right: 11px;
  bottom: 2px;
  color: #d8e0e5;
  transform: scale(.72);
}

.weather-art-cloud-c {
  right: 0;
  bottom: 9px;
  color: #8f9ca6;
  transform: scale(.68);
}

.weather-art-rain,
.weather-art-snow {
  position: absolute;
  right: 5px;
  bottom: 0;
  width: 28px;
  height: 10px;
}

.weather-art-rain i,
.weather-art-snow i {
  position: absolute;
  left: calc(var(--i) * 4px);
  top: calc((var(--i) % 2) * 3px);
  display: block;
}

.weather-art-rain i {
  width: 2px;
  height: 6px;
  border-radius: 999px;
  background: #5aa7e8;
  transform: rotate(18deg);
  animation: weather-rain-fall 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.22s);
}

.weather-art-snow i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #84c9ef;
  animation: weather-snow-fall 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.26s);
}

.weather-art-bolt {
  position: absolute;
  right: 13px;
  bottom: -1px;
  width: 8px;
  height: 14px;
  background: #f0b429;
  clip-path: polygon(48% 0, 100% 0, 67% 43%, 100% 43%, 18% 100%, 37% 55%, 0 55%);
  animation: weather-lightning 7s ease-in-out infinite;
}

.weather-art-fog {
  position: absolute;
  right: 2px;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: #aebbc4;
  animation: weather-fog-drift 8s ease-in-out infinite;
}

.weather-art-fog-a { bottom: 8px; }
.weather-art-fog-b { right: 8px; bottom: 2px; width: 28px; }

.weather-art-sunny .weather-art-sun {
  top: 8px;
  left: 13px;
}

.weather-art-sunny .weather-art-ray {
  top: 16px;
  left: 8px;
}

.weather-art-rain i,
.weather-art-snow i {
  --i: 0;
}

.weather-art-particle-1 { --i: 0; }
.weather-art-particle-2 { --i: 1; }
.weather-art-particle-3 { --i: 2; }
.weather-art-particle-4 { --i: 3; }
.weather-art-particle-5 { --i: 4; }
.weather-art-particle-6 { --i: 5; }
.weather-art-particle-7 { --i: 6; }
.weather-art-particle-8 { --i: 7; }

@keyframes weather-art-float {
  50% { translate: 0 -2px; }
}

@keyframes weather-cloud-drift {
  50% { translate: 2px 0; }
}

@keyframes weather-rain-fall {
  50% { translate: 0 3px; opacity: .62; }
}

@keyframes weather-snow-fall {
  50% { translate: 1px 3px; opacity: .72; }
}

@keyframes weather-lightning {
  0%, 90%, 100% { opacity: 0; }
  92%, 94% { opacity: 1; }
}

@keyframes weather-fog-drift {
  50% { translate: 2px 0; opacity: .78; }
}

.home-weather-hourly {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  row-gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.home-weather-hourly::-webkit-scrollbar {
  display: none;
}

.home-weather-hourly-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(48px, 1fr));
  align-items: center;
  column-gap: 2px;
  min-width: 288px;
}

.home-weather-hourly-icon,
.home-weather-hourly-pop,
.home-weather-hourly-time {
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.home-weather-hourly-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  color: #aebbc4;
  font-size: 17px;
  line-height: 1;
}

.home-weather-hourly-pop {
  color: #9aa8ff;
  font-size: 8px;
  font-weight: 900;
}

.home-weather-hourly-time {
  color: #8b938c;
  font-size: 8px;
  font-weight: 800;
}

.weather-detail-dialog {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #1f2a22;
  line-height: 1;
  white-space: normal;
}

.weather-detail-hero {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f4fff6 0%, #ffffff 100%);
}

.weather-detail-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9f9ed;
  color: #03c75a;
  font-size: 20px;
  font-weight: 900;
}

.weather-detail-art .weather-art {
  transform: scale(.76);
  transform-origin: center;
}

.weather-detail-day-art {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.weather-detail-day-art .weather-art {
  zoom: .6;
  transform: none;
  transform-origin: center;
}

.weather-detail-hero strong,
.weather-detail-hero em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.weather-detail-hero strong {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
}

.weather-detail-hero em {
  margin-top: 1px;
  color: #607067;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
}

.weather-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.weather-detail-stat {
  padding: 5px 8px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: #fff;
}

.weather-detail-stat span,
.weather-detail-stat strong {
  display: block;
}

.weather-detail-stat span {
  color: #7c877e;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.05;
}

.weather-detail-stat strong {
  margin-top: 1px;
  color: #1f6f2d;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.05;
}

.weather-detail-title {
  color: #111;
  font-size: 12px;
  font-weight: 900;
}

.weather-detail-list {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.weather-detail-day {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 70px;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 4px 8px;
  border-bottom: 1px solid #edf3ed;
  line-height: 1;
  white-space: normal;
}

.weather-detail-day:last-child {
  border-bottom: none;
}

.weather-detail-day-icon {
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.weather-detail-day-main,
.weather-detail-day-sub {
  min-width: 0;
}

.weather-detail-day-main strong,
.weather-detail-day-main em,
.weather-detail-day-sub strong,
.weather-detail-day-sub em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.weather-detail-day-main strong,
.weather-detail-day-sub strong {
  color: #1f2a22;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.05;
}

.weather-detail-day-main em,
.weather-detail-day-sub em {
  color: #69756d;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.05;
}

.weather-detail-day-sub {
  text-align: right;
}

.weather-detail-empty {
  padding: 18px 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

@keyframes partnerFlipIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-header.compact {
  padding: 0 16px 8px;
}

.section-title.compact {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.home-talk-section-header {
  justify-content: space-between;
  padding: 4px 8px 0;
}

.home-talk-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.home-talk-list-badge {
  appearance: none;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.home-talk-list-badge:focus-visible {
  outline: 2px solid rgba(3, 199, 90, .28);
  outline-offset: 2px;
}

.section-more.compact {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  border: none;
  background: none;
  cursor: pointer;
}

.talk-list {
  padding: 0 16px;
  border-bottom: 6px solid var(--bg-light);
}

.talk-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}

.talk-item:last-child { border-bottom: none; }

.talk-item .talk-title {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 2px;
  font-weight: 400;
  line-height: 1.35;
  min-width: 0;
}

.talk-item .talk-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.talk-home-list {
  padding: 0 8px;
  margin-bottom: 18px;
  border-bottom: none;
}

.home-talk-board {
  border: none;
  border-radius: 0;
  background: #fff;
  overflow: visible;
}

.home-talk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  column-gap: 6px;
}

.home-talk-row {
  width: 100%;
  min-height: 36px;
  padding: 5px 0 6px;
  border: none;
  border-bottom: 1.5px solid #2f8a2f;
  background: #fff;
  text-align: left;
  font-family: var(--font);
  cursor: pointer;
}

.home-talk-row:last-child {
  border-bottom: none;
}

.home-talk-status {
  min-width: 0;
}

.home-talk-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.home-talk-main strong,
.home-talk-main em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.home-talk-main strong {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
}

.home-talk-main em {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
}

.home-talk-price {
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.3;
}

.home-talk-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f1f4f1;
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.home-talk-thumb.has-image {
  background: #fff;
}

.home-talk-thumb.is-logo {
  background: #f5fbf4;
}

.home-talk-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-talk-thumb.is-logo img {
  padding: 7px;
  object-fit: contain;
}

.home-talk-counts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 34px;
  min-height: 34px;
  border-radius: 9px;
  background: #f1f3f1;
  color: #2a2f2b;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.home-talk-counts strong {
  font-size: 12px;
  line-height: 1;
}

.home-talk-counts em {
  font-size: 8px;
  font-style: normal;
  color: var(--text-muted);
}

.home-talk-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 10px 0 0;
}

.home-talk-page {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1.5px solid var(--card-border);
  background: #fff;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.home-talk-page.active {
  border-color: #03c75a;
  background: #03c75a;
  color: #fff;
}

.talk-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-bottom: 2px;
}

.talk-title.strong {
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.talk-meta.strong {
  font-weight: 700;
}

.talk-empty {
  padding: 12px 0 18px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.talk-screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 16px;
}

.talk-screen-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.talk-screen-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0 0 4px;
}

.talk-screen-title-row .talk-screen-title {
  margin: 0;
}

.talk-screen-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid #c4efcd;
  border-radius: 999px;
  background: #e5f9e9;
  color: #067234;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.talk-screen-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
  margin: 0;
}

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

.talk-head-button {
  height: 38px;
  padding: 0 12px;
  font-size: 12px;
}

.talk-head-button.primary {
  width: auto;
  font-weight: 900;
}

.talk-filter-row {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.talk-status-filter-chip {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--card-border);
  background: #fff;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.talk-status-filter-chip.active {
  border-color: var(--green-primary);
  background: var(--green-primary);
  color: #fff;
}

.talk-status-filter-chip.muted {
  color: var(--text-muted);
}

.talk-status-filter-chip.heart {
  color: #ef4444;
  font-size: 15px;
}

.talk-board-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #232323;
  padding: 0 8px;
}

.talk-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 18px 0 4px;
}

.talk-board-card {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--border-light);
  padding: 12px 0;
  cursor: pointer;
}

.talk-board-row-card {
  display: block;
  padding: 12px 0;
}

.talk-board-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.talk-cafe-head {
  margin-bottom: 12px;
}

.talk-cafe-post {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto 50px;
  gap: 8px;
  align-items: center;
  min-height: 76px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}

.talk-cafe-post.is-sold {
  opacity: .68;
}

.talk-cafe-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff3b4f;
}

.talk-cafe-main {
  min-width: 0;
}

.talk-cafe-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.talk-cafe-title-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.talk-cafe-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #3f4742;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 7px;
  line-height: 1;
}

.talk-cafe-preview {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.talk-cafe-price {
  margin-top: 5px;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 900;
}

.talk-cafe-meta {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.talk-cafe-thumb {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: #f4f4f4;
}

.talk-cafe-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.talk-cafe-comment-box {
  width: 48px;
  height: 50px;
  border-radius: 13px;
  background: #f0f2f1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #242824;
  font-weight: 900;
}

.talk-cafe-comment-box strong {
  font-size: 15px;
  line-height: 1;
}

.talk-cafe-comment-box span {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 10px;
}

.talk-cafe-notice-empty {
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  padding: 30px 16px;
  text-align: center;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

.talk-cafe-notice-empty strong {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 900;
}

.talk-detail-cafe {
  padding-top: 4px;
}

.screen-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 12px;
  flex-shrink: 0;
}

.screen-back-text {
  border: none;
  background: none;
  font-weight: 800;
  cursor: pointer;
  color: #333;
}

.screen-logo-sm {
  height: 28px;
  width: auto;
}

.talk-detail-content {
  padding: 0 24px 150px;
  overflow-y: auto;
}

.talk-detail-title {
  margin: 0 0 16px;
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -1px;
}

.talk-detail-price {
  margin: -7px 0 16px;
  color: var(--green-dark);
  font-size: 22px;
  font-weight: 900;
}

.talk-detail-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.talk-detail-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e9f8e7;
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  flex: 0 0 auto;
}

.talk-detail-author-main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.talk-detail-author-main strong,
.talk-detail-author-main span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.talk-detail-author-main strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 900;
}

.talk-detail-author-main span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}

.talk-detail-status-row {
  display: flex;
  gap: 6px;
  margin: 14px 0 0;
}

.talk-detail-status-row .talk-trade-status-btn {
  height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: #fff;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
}

.talk-detail-body-text {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #222;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
  white-space: pre-wrap;
}

.talk-detail-images {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.talk-detail-images img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
}

.talk-detail-inline-stats {
  display: flex;
  gap: 10px;
  margin: 18px 0 14px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 900;
}

.talk-detail-actionbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60px;
  z-index: 5000;
  min-height: 56px;
  padding: 8px 14px calc(8px + var(--app-bottom-inset));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--border-light);
  display: grid;
  grid-template-columns: 1.2fr .72fr .72fr;
  gap: 6px;
  align-items: center;
}

.talk-detail-action {
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: #fff;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.talk-detail-action.like {
  color: #ef4444;
}

.talk-detail-action.like.liked {
  border-color: #f6b7c4;
  background: #fff1f4;
}

.talk-detail-action.chat {
  border-color: #03c75a;
  background: #03c75a;
  color: #fff;
}

.talk-detail-action:disabled {
  border-color: #d9ded9;
  background: #edf0ed;
  color: var(--text-muted);
}

.talk-trade-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid #cfe8c8;
  background: #eef8e8;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.talk-trade-chip-sold {
  border-color: #d8ded8;
  background: #eef0ee;
  color: #687268;
}

.talk-trade-chip-reserved {
  border-color: #f4df9c;
  background: #fff7dc;
  color: #a56a00;
}

.talk-write-floating {
  position: absolute;
  right: 24px;
  bottom: calc(var(--bottom-nav-height) + var(--app-bottom-inset) + 18px);
  z-index: 35;
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  background: #03c75a;
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 12px 26px rgba(3, 199, 90, .28);
  cursor: pointer;
  transition: background-color .05s ease, box-shadow .08s ease, transform .05s ease;
}

.talk-write-content,
.talk-chat-list-content {
  padding: 0 24px 90px;
  overflow-y: auto;
}

.talk-write-title,
.talk-chat-list-title {
  margin: 4px 0 20px;
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 900;
}

.talk-chat-list-title {
  margin-bottom: 16px;
}

.talk-write-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.talk-write-label {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 900;
}

.talk-write-label span {
  color: var(--text-muted);
  font-size: 11px;
}

.talk-price-input-wrap {
  position: relative;
}

.talk-price-input-wrap .form-input {
  width: 100%;
  padding-right: 38px;
  text-align: right;
  font-weight: 900;
}

.talk-price-input-wrap > span {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 900;
  pointer-events: none;
}

.talk-image-pick-btn {
  height: 48px;
  border: 1.5px dashed var(--card-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.talk-image-preview {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.talk-image-preview-empty {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.talk-image-preview-item {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: #f5f5f5;
  overflow: hidden;
}

.talk-image-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.talk-image-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.talk-body-input {
  height: 150px;
  min-height: 150px;
  max-height: 150px;
  padding: 14px;
  line-height: 1.5;
  overflow-y: auto;
  resize: none;
}

.talk-submit-btn {
  height: 52px;
  margin-top: 8px;
  font-weight: 900;
}

.talk-map-empty,
.talk-state-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
}

.talk-map-empty {
  height: 100%;
  padding: 14px;
}

.talk-page-btn {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--card-border);
  border-radius: 10px;
  background: #fff;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 900;
}

.talk-page-btn.active {
  border-color: var(--green-primary);
  background: var(--green-primary);
  color: #fff;
  box-shadow: 0 8px 16px rgba(47, 143, 47, .14);
}

.talk-screen-content {
  padding: 0 20px 96px;
  overflow-y: auto;
}

.talk-screen-head {
  padding: 0 2px;
}

.talk-screen-panel {
  border: 1.5px solid var(--card-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 22px rgba(27, 88, 31, .08);
  overflow: hidden;
}

.talk-screen-panel .talk-filter-row {
  margin: 0;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(180deg, #f7fff6 0%, #fff 100%);
}

.talk-screen-panel .talk-board-list {
  border-top: none;
  padding: 0;
  background: #fff;
}

.talk-screen-panel .talk-pagination {
  margin: 0;
  padding: 14px 0 16px;
  border-top: 1px solid var(--border-light);
}

.talk-status-filter-chip {
  height: 32px;
  padding: 0 13px;
  border-color: #d8ead7;
  background: #fff;
  box-shadow: 0 1px 0 rgba(27, 88, 31, .04);
}

.talk-cafe-post {
  grid-template-columns: minmax(0, 1fr) 54px 54px;
  gap: 10px;
  min-height: 88px;
  padding: 14px 14px;
  border-bottom: 1px solid #e3f0e1;
}

.talk-cafe-post:last-child {
  border-bottom: none;
}

.talk-cafe-title-row strong {
  font-size: 14px;
}

.talk-cafe-badge {
  background: #e5f9e9;
  color: #067234;
  border: 1px solid #c4efcd;
}

.talk-cafe-preview {
  margin-top: 6px;
  color: #48534a;
}

.talk-cafe-meta {
  margin-top: 5px;
}

.talk-cafe-stats {
  display: flex;
  gap: 5px;
  margin-top: 7px;
  min-width: 0;
  overflow: hidden;
}

.talk-cafe-stat {
  flex: 0 0 auto;
  max-width: 90px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #f2f7f2;
  color: #516053;
  font-size: 10px;
  font-weight: 900;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.talk-cafe-thumb {
  grid-column: 2;
  width: 54px;
  height: 54px;
  border-radius: 12px;
}

.talk-cafe-comment-box {
  grid-column: 3;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: #effaf1;
  color: #067234;
}

.talk-write-floating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 54px;
  min-width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 999px;
  font-size: 16px;
  overflow: hidden;
  transition: width .06s ease-out, min-width .06s ease-out, padding .06s ease-out, gap .06s ease-out, background-color .05s ease, box-shadow .08s ease, transform .05s ease;
}

.talk-write-floating span {
  font-size: 18px;
  line-height: 1;
}

.talk-write-floating strong {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  transition: max-width .06s ease-out, opacity .05s ease;
}

@media (hover: hover) and (pointer: fine) {
  .talk-write-floating:hover {
    width: 106px;
    min-width: 106px;
    height: 54px;
    padding: 0 15px;
    gap: 5px;
    background: #02a94d;
    box-shadow: 0 14px 28px rgba(2, 169, 77, .36);
  }

  .talk-write-floating:hover strong {
    max-width: 46px;
    opacity: 1;
  }
}

.home-talk-board {
  border: 1.5px solid var(--card-border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.home-talk-row.home-talk-row-card {
  min-height: 64px;
  padding: 10px 10px;
  grid-template-columns: minmax(0, 1fr) 42px 40px;
  column-gap: 8px;
}

.home-talk-row.home-talk-row-card:last-child {
  border-bottom: none;
}

.home-talk-row-card .home-talk-main strong {
  font-size: 14px;
}

.home-talk-row-card .home-talk-thumb {
  width: 42px;
  height: 42px;
  border-radius: 10px;
}

.home-talk-row-card .home-talk-counts {
  width: 40px;
  min-height: 40px;
  background: #effaf1;
  color: #067234;
}

.talk-board-empty,
.talk-empty {
  padding: 28px 12px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.talk-empty-card {
  align-items: center;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.talk-empty-action {
  align-items: center;
  background: #03c75a;
  border: none;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  height: 32px;
  justify-content: center;
  padding: 0 14px;
}

#screen-home .home-talk-section-header {
  width: auto;
  margin: 12px 16px 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

#screen-home .talk-home-list {
  width: auto;
  margin: 0 16px 12px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

#screen-home .home-talk-board {
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

#screen-home .home-talk-row {
  box-sizing: border-box;
  width: 100%;
  min-height: 32px;
  padding: 4px 0 5px;
  grid-template-columns: minmax(0, 1fr);
  border-bottom: 1.5px solid #2f8a2f;
  column-gap: 0;
}

#screen-home .home-talk-row.home-talk-row-card {
  min-height: 64px;
  padding: 5px 0;
  grid-template-columns: minmax(0, 1fr) 56px;
  column-gap: 10px;
}

#screen-home .home-talk-row-card .home-talk-thumb {
  width: 56px;
  height: 52px;
  border-radius: 8px;
}

/* News is editorial content, not a marketplace listing: lead with an avatar-style photo. */
#screen-home .home-talk-row.home-talk-row-card.home-worker-news-row {
  min-height: 72px;
  padding: 8px 0;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 10px;
}

#screen-home .home-worker-news-row .home-worker-news-thumb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

#screen-home .home-worker-news-row .home-worker-news-thumb.is-logo img {
  padding: 9px;
}

.home-worker-news-preview {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #667066;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#screen-home .home-talk-row .home-talk-main strong,
#screen-home .home-talk-row-card .home-talk-main strong {
  font-size: 12px;
  font-weight: 800;
}

#screen-home .home-talk-row .home-talk-main em {
  font-size: 10px;
  font-weight: 800;
}

#screen-home .talk-empty.talk-empty-card {
  min-height: 32px;
  padding: 5px 0 6px;
  align-items: flex-start;
  border: none;
  border-bottom: 1.5px solid #2f8a2f;
  border-radius: 0;
  box-shadow: none;
  gap: 4px;
  text-align: left;
}

#screen-home .talk-empty-action {
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--green-dark);
  font-size: 10px;
}

.talk-detail-chat-chip {
  flex: 0 0 auto;
  min-width: 52px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid #b8efc9;
  border-radius: 999px;
  background: #ecfff2;
  color: #039343;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(3, 199, 90, .08);
}

.talk-detail-chat-chip:active {
  transform: translateY(1px);
}

.talk-detail-chat-chip:disabled {
  border-color: #e3e8e1;
  background: #f4f7f3;
  color: #94a39a;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 390px) {
  .talk-cafe-post {
    grid-template-columns: minmax(0, 1fr) 52px 52px;
    gap: 8px;
    padding: 13px 12px;
  }

  .talk-cafe-thumb,
  .talk-cafe-comment-box {
    width: 52px;
    height: 52px;
  }

  .talk-write-floating {
    width: 52px;
    min-width: 52px;
    height: 52px;
  }

}

.talk-thumb {
  width: 92px;
  height: 92px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #e8f5e9, #d9f2d4);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-light);
  font-size: 28px;
}

.talk-thumb.has-image {
  background: #f5f5f5;
}

.talk-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.talk-board-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.talk-board-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.talk-board-title.is-sold {
  color: var(--text-muted);
}

.talk-board-meta,
.talk-board-distance {
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.talk-board-meta {
  color: var(--text-muted);
}

.talk-board-distance {
  color: var(--green-dark);
  font-weight: 900;
}

.talk-board-body {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.talk-board-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.talk-board-price {
  font-size: 15px;
  font-weight: 900;
  color: var(--text-primary);
}

.talk-board-stats-wrap {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

.talk-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 900;
}

.talk-board-empty {
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 800;
}

.talk-comments-card {
  border: none;
  border-top: 1px solid #222;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  padding: 16px 0 0;
  margin-bottom: 78px;
}

.talk-comments-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 14px;
}

.talk-comments-head strong {
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 900;
}

.talk-comments-head span {
  color: var(--text-secondary);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

.talk-comments-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.talk-comment-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: flex-start;
  border-bottom: 1px solid var(--border-light);
  padding: 12px 0;
}

.talk-comment-item.is-reply {
  margin-left: 34px;
  padding-left: 10px;
  border-left: 2px solid #e3f3e3;
}

.talk-comment-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef8e8;
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}

.talk-comment-main {
  min-width: 0;
}

.talk-comment-author-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}

.talk-comment-author-row strong {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.talk-comment-author-row span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #e8f7e7;
  color: var(--green-dark);
  font-size: 10px;
  font-weight: 900;
  padding: 2px 6px;
  line-height: 1.2;
}

.talk-comment-text {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-wrap;
}

.talk-comment-reply-target {
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
  margin: -1px 0 4px;
}

.talk-comment-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 7px;
}

.talk-comment-meta span,
.talk-comment-meta button {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}

.talk-comment-meta button {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font);
  cursor: pointer;
}

.talk-comment-meta .talk-comment-delete-btn {
  color: #d64a4a;
}

.talk-comment-heart {
  width: 30px;
  min-height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ef4444;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: color .12s ease, transform .12s ease;
}

.talk-comment-heart:hover,
.talk-comment-heart:focus-visible {
  background: transparent;
  color: #e11d48;
  outline: none;
  transform: translateY(-1px);
}

.talk-comment-heart.is-liked {
  background: transparent;
  color: #e11d48;
}

.talk-comment-heart:active {
  transform: scale(.94);
}

.talk-comment-heart em {
  color: #ef4444;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.talk-comment-heart.is-liked em {
  color: #be123c;
}

.talk-comment-empty {
  padding: 18px 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.talk-comment-form {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 6px 10px;
  border: 1.5px solid var(--card-border);
  border-radius: 4px;
  background: #fff;
  min-height: 48px;
}

.talk-reply-target {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  margin-bottom: -2px;
  padding: 0 2px 5px;
  border-bottom: 1px solid var(--border-light);
}

.talk-reply-target span {
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
}

.talk-reply-target button {
  width: auto;
  min-width: 0;
  height: 22px;
  padding: 0 7px;
  background: #f2f7f2;
  color: var(--text-muted);
}

.talk-comment-form-avatar {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: #e0e4e0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-dark);
  font-size: 0;
  overflow: hidden;
}

.talk-comment-form-avatar svg {
  width: 15px;
  height: 15px;
  display: block;
}

.talk-comment-form textarea {
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  resize: none;
  overflow: hidden;
  border: none;
  background: transparent;
  padding: 5px 0 0;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  outline: none;
}

.talk-comment-form button {
  border: none;
  border-radius: 4px;
  background: #03c75a;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  height: 30px;
  min-width: 42px;
  cursor: pointer;
}

.talk-comment-form .talk-reply-target button {
  width: auto;
  min-width: 0;
  height: 22px;
  padding: 0 7px;
  background: #f2f7f2;
  color: var(--text-muted);
}

.talk-comment-form button:disabled {
  background: #b8c4b8;
  cursor: default;
}

.talk-reply-target.is-hidden {
  display: none;
}

.talk-chat-list {
  display: flex;
  flex-direction: column;
}

.talk-chat-scroll {
  padding: 0 20px calc(76px + var(--app-bottom-inset));
  overflow-y: auto;
}

.talk-chat-title {
  margin: 4px 4px 2px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 900;
}

.talk-chat-peer {
  margin: 0 4px 12px;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
}

.talk-chat-peer.has-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.talk-chat-peer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.talk-chat-peer-btn {
  border: 1px solid #d8ead8;
  border-radius: 9px;
  background: #fff;
  color: var(--text-muted);
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 900;
}

.talk-chat-peer-btn.danger {
  border: none;
  background: #fff7f7;
  color: #c24141;
}

.talk-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.talk-chat-inputbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 10px 16px calc(12px + var(--app-bottom-inset));
  border-top: 1px solid var(--border-light);
  background: #fff;
}

.talk-chat-input {
  flex: 1;
  height: 42px;
}

.talk-chat-send-btn {
  width: 58px;
  height: 42px;
  font-weight: 900;
}

/* The shared primary button is full-width by default. Keep the market chat composer
   compact so the message field remains usable on every phone width. */
#screen-talk-chat .talk-chat-inputbar {
  align-items: center;
}

#screen-talk-chat .talk-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

#screen-talk-chat .talk-chat-send-btn {
  flex: 0 0 58px;
  width: 58px;
  min-width: 58px;
  max-width: 58px;
}

.talk-chat-picker-modal {
  position: absolute;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, .45);
}

.talk-chat-picker-sheet {
  width: 100%;
  max-width: 390px;
  max-height: 74%;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 18px 18px 12px 12px;
  background: #fff;
  box-shadow: 0 -10px 32px rgba(0, 0, 0, .18);
}

.talk-chat-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border-light);
}

.talk-chat-picker-title {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 900;
}

.talk-chat-picker-desc {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}

.talk-chat-picker-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 10px;
  background: #f4f8f2;
  color: var(--green-dark);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.talk-chat-picker-list {
  max-height: calc(74vh - 74px);
  overflow: auto;
  padding: 4px 18px 14px;
}

.talk-chat-picker-row {
  display: block;
  width: 100%;
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid var(--border-light);
  background: #fff;
  text-align: left;
}

.talk-chat-picker-row-main,
.talk-chat-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.talk-chat-picker-row-text {
  min-width: 0;
}

.talk-chat-picker-peer,
.talk-chat-row-title {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.talk-chat-row-title {
  font-size: 15px;
}

.talk-chat-picker-last,
.talk-chat-row-last {
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.talk-chat-picker-last.is-unread,
.talk-chat-row-last.is-unread {
  color: var(--text-primary);
  font-weight: 900;
}

.talk-chat-picker-meta,
.talk-chat-row-meta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
}

.talk-chat-picker-meta {
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.talk-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.talk-chat-time {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.talk-chat-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}

.talk-chat-row-peer {
  margin-top: 4px;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
}

.talk-message-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 5px;
}

.talk-message-row.is-mine {
  justify-content: flex-end;
}

.talk-message-read {
  margin-bottom: 3px;
  color: #ef8a00;
  font-size: 10px;
  font-weight: 900;
}

.talk-message-read.is-read {
  color: var(--green-dark);
}

.talk-message-bubble {
  max-width: 78%;
  border-radius: 16px;
  background: #f1f3f1;
  color: var(--text-primary);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-wrap;
}

.talk-message-row.is-mine .talk-message-bubble {
  background: var(--green-primary);
  color: #fff;
}

.benefit-screen-content {
  padding: 0 24px 24px;
}

.benefit-search-content,
.friendly-content {
  padding: 0 24px 110px;
}

.benefit-screen-head,
.friendly-head {
  margin-bottom: 18px;
}

.benefit-screen-title {
  margin: 0 0 6px;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 900;
}

.benefit-search-title,
.friendly-title {
  margin: 0 0 6px;
  color: var(--text-primary);
  font-size: 21px;
  font-weight: 900;
}

.benefit-screen-desc,
.friendly-status {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.benefit-card-list,
.friendly-delivery-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.benefit-empty-card {
  border: 1.5px dashed var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-white);
  padding: 28px 18px;
  text-align: center;
}

.benefit-empty-card.compact {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 800;
}

.benefit-empty-title {
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 900;
}

.benefit-empty-desc {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.benefit-installment-card,
.benefit-search-card,
.friendly-card {
  position: relative;
  overflow: hidden;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: linear-gradient(145deg, #ffffff, #f7fff6);
  padding: 16px;
  box-shadow: var(--card-shadow);
}

.benefit-installment-card {
  background: linear-gradient(135deg, #ffffff 0%, #f5fff6 100%);
}

.benefit-installment-shine {
  position: absolute;
  inset: -70% auto auto -40%;
  width: 50%;
  height: 220%;
  background: linear-gradient(110deg, transparent 15%, rgba(255, 255, 255, .8) 50%, transparent 82%);
  transform: rotate(18deg);
  animation: eatsgo-shine 3.6s ease-in-out infinite;
  pointer-events: none;
}

.benefit-card-select-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  border: none;
  border-radius: var(--radius);
  background: var(--green-primary);
  color: #fff;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.benefit-installment-content {
  position: relative;
  padding-right: 62px;
}

.benefit-installment-main {
  min-width: 0;
}

.benefit-logo-wrap {
  margin-bottom: 10px;
}

.benefit-logo-wrap.small {
  margin-bottom: 7px;
}

.benefit-installment-title,
.benefit-search-card-title,
.friendly-card-name {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
}

.benefit-installment-title {
  margin-bottom: 6px;
}

.benefit-months {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
  white-space: nowrap;
}

.benefit-month-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid #d7ead9;
  border-radius: 999px;
  background: #fff;
  color: var(--text-secondary);
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.benefit-installment-badge {
  margin-top: 6px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}

.benefit-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.benefit-search-input {
  flex: 1;
}

.benefit-search-btn {
  width: 58px;
  height: auto;
  font-weight: 900;
}

.benefit-search-source {
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.benefit-search-card-head,
.friendly-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.benefit-search-card-main,
.friendly-card-main {
  min-width: 0;
}

.benefit-rate-chip,
.friendly-distance-chip {
  flex-shrink: 0;
  border: 1px solid #bfe6b8;
  border-radius: var(--radius);
  background: #eaf7e8;
  color: #2e7d32;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 900;
}

.benefit-search-card-summary,
.friendly-card-desc {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.benefit-tag-row,
.friendly-tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.benefit-tag {
  border-radius: 4px;
  background: #eef6ff;
  color: #3a5f95;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 900;
}

.benefit-annual-fee,
.friendly-card-address {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.benefit-loading {
  padding: 24px;
  text-align: center;
}

.benefit-spinner {
  width: 26px;
  height: 26px;
  margin: 0 auto;
  border-top-color: var(--green-primary);
}

.friendly-kicker {
  margin-bottom: 6px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}

.friendly-location-summary {
  display: none;
  margin-top: 10px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: #f7fff6;
  color: var(--green-dark);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.45;
}

.friendly-location-summary.is-visible {
  display: block;
}

.friendly-location-summary-line {
  margin-top: 4px;
}

.friendly-location-summary-muted {
  color: var(--text-muted);
}

.friendly-location-btn {
  height: 48px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 900;
}

.friendly-card.is-disabled {
  border-color: var(--border-color);
  background: #f7f7f7;
  opacity: .62;
  box-shadow: none;
}

.friendly-card-area {
  margin-bottom: 3px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}

.friendly-map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #bfe6b8;
  border-radius: var(--radius);
  background: #fff;
  color: var(--green-dark);
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.friendly-map-loading,
.friendly-map-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6f7d6b;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.friendly-map-empty {
  padding: 16px;
  font-size: 13px;
  line-height: 1.45;
}

.friendly-map-fallback-message {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .94);
  color: #2f7d32;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
  box-shadow: var(--card-shadow);
}

.friendly-map-static-preview {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #dfeadd;
}

.friendly-map-static-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(64, 102, 71, .12) 1px, transparent 1px),
    linear-gradient(0deg, rgba(64, 102, 71, .12) 1px, transparent 1px),
    radial-gradient(circle at 58% 46%, rgba(126, 212, 106, .32), transparent 36%),
    #dfeadd;
  background-size: 34px 34px, 34px 34px, auto, auto;
}

.friendly-map-static-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: #e84646;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  transform: translate(-50%, -100%) rotate(-45deg);
  transform-origin: center;
}

.friendly-map-static-pin-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  transform: translate(-50%, -50%);
}

.friendly-map-static-label {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .94);
  color: #1f3d1e;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friendly-map-modal {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, .45);
}

.friendly-map-sheet {
  width: 100%;
  max-width: 330px;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}

.friendly-map-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid #e5eee2;
}

.friendly-map-title {
  color: #1f3d1e;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.3;
}

.friendly-map-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: #f1f7ef;
  color: #2f7d32;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.friendly-map-body {
  padding: 18px;
}

.friendly-kakao-map {
  position: relative;
  height: 220px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: #eef6ed;
}

.friendly-map-info {
  margin-bottom: 14px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: linear-gradient(145deg, #f8fff7, #ffffff);
  padding: 14px;
}

.friendly-map-info-label {
  margin-bottom: 8px;
  color: #2f7d32;
  font-size: 12px;
  font-weight: 900;
}

.friendly-map-info-address {
  color: #111;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.45;
}

.friendly-map-info-meta {
  margin-top: 8px;
  color: #6f7d6b;
  font-size: 12px;
  font-weight: 800;
}

.friendly-map-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.friendly-map-action-btn {
  height: 42px;
  font-size: 13px;
}

/* === 1st refactor: card/vaccount management === */
.manage-filter {
  padding: 0 0 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.manage-filter-chip {
  height: 34px;
  border-radius: var(--radius);
  border: 1.5px solid var(--card-border);
  background: #fff;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.manage-filter-chip.active {
  border-color: var(--green-primary);
  background: var(--green-primary);
  color: #fff;
}

.manage-empty-danger,
.manage-empty-muted {
  padding: 24px 16px;
  text-align: center;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 900;
}

.manage-empty-danger {
  border: 1.5px dashed #efb4ad;
  background: #fff7f5;
  color: #c24135;
}

.manage-empty-muted {
  border: 1.5px dashed var(--card-border);
  background: #fbfff8;
  color: #6b7280;
}

.manage-empty-action {
  background: #fff;
  border: 1.5px solid #c24135;
  color: #c24135;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 14px;
  border-radius: var(--radius);
  line-height: 1;
  cursor: pointer;
}

.manage-item {
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  padding: 12px 20px;
  background: var(--bg-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 88px;
  position: relative;
  box-shadow: var(--card-shadow);
}

.manage-item.is-disabled {
  border-color: #ddd;
  background: #f5f5f5;
  opacity: .62;
  box-shadow: none;
}

.manage-item.is-hidden {
  border-color: #ddd;
  background: #f5f5f5;
  opacity: .48;
  box-shadow: none;
}

.manage-view-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: none;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  flex: 1;
}

.manage-kicker {
  font-size: 11px;
  font-weight: 800;
  color: #888;
}

.manage-main-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.manage-agency-stack {
  align-items: center;
  display: inline-flex;
  flex: 0 0 48px;
  flex-direction: column;
  gap: 4px;
}

.manage-agency-logo {
  height: 42px;
  width: 42px;
}

.manage-text-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}

.manage-name-row {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  min-width: 0;
}

.manage-name {
  font-size: 14px;
  font-weight: 800;
  color: #333;
}

.manage-mono {
  font-size: 13px;
  font-weight: 700;
  color: #555;
  font-family: monospace;
}

.manage-sub {
  font-size: 12px;
  color: #777;
  font-weight: 700;
}

.manage-provider-warning {
  display: inline-flex;
  width: max-content;
  margin-top: 3px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #fff3dc;
  color: #9a5b00;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.manage-agency-badge {
  align-items: center;
  background: #fff7f5;
  border: 1.5px solid #efb4ad;
  border-radius: var(--radius);
  color: #c24135;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 900;
  height: 32px;
  justify-content: center;
  max-width: 74px;
  overflow: hidden;
  padding: 0 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 74px;
  line-height: 1;
}

.manage-status-chip {
  align-items: center;
  border-radius: var(--radius);
  display: inline-flex;
  font-size: 10px;
  font-weight: 900;
  height: 20px;
  justify-content: center;
  line-height: 1;
  margin-top: 0;
  padding: 0 7px;
  flex: 0 0 auto;
  width: fit-content;
}

.manage-status-chip.approved {
  background: #e1f8e7;
  color: #159c36;
}

.manage-status-chip.pending {
  background: #fff4cc;
  color: #b56a00;
}

.manage-status-chip.rejected {
  background: #ffe6e3;
  color: #c24135;
}

.manage-reject-reason {
  color: #c24135;
  display: block;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.manage-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-left: 10px;
  flex: 0 0 auto;
}

.manage-mini-btn {
  width: 48px;
  height: 25px;
  background: #fff;
  border: 1.3px solid var(--card-border);
  color: #777;
  font-size: 10px;
  font-weight: 900;
  padding: 0;
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 1;
  letter-spacing: -.4px;
}

.manage-mini-btn.is-active {
  border-color: #3a9430;
  color: #2e7d32;
}

.manage-mini-btn.is-danger {
  border-color: #efb4ad;
  color: #c24135;
}

.inline-status {
  padding: 32px 16px;
  text-align: center;
  color: #777;
  font-weight: 700;
}

.inline-status.error {
  color: #e53935;
}

.inline-spinner-wrap {
  padding: 32px 16px;
  text-align: center;
}

.inline-spinner-wrap.compact {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
}

.inline-spinner.green {
  border-top-color: var(--green-primary);
}

.inline-spinner.manage-loading {
  height: 28px;
  margin: 0 auto;
  width: 28px;
}

.spinner-on-primary {
  width: 16px;
  height: 16px;
  border-top-color: #fff;
}

.charge-empty-box {
  align-items: center;
  background: #fff7f5;
  border: 1.5px dashed #efb4ad;
  border-radius: var(--radius);
  color: #c24135;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 900;
  gap: 10px;
  justify-content: center;
  padding: 18px 14px;
}

.charge-empty-box.full-grid {
  grid-column: 1 / -1;
}

.charge-empty-action {
  background: #fff;
  border: 1.5px solid #c24135;
  border-radius: var(--radius);
  color: #c24135;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 7px 14px;
}

.charge-header {
  margin-bottom: 16px;
  padding: 20px 24px 8px;
  border-bottom: none;
}

.charge-content {
  padding: 0 24px 100px;
}

.charge-title {
  margin-bottom: 20px;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}

.charge-section {
  margin-bottom: 20px;
}

.charge-section-label {
  display: block;
  margin-bottom: 12px;
  color: #666;
  font-size: 14px;
  font-weight: 800;
}

.charge-section-label.compact {
  margin-bottom: 8px;
}

.charge-section-label.tight {
  margin-bottom: 4px;
}

.charge-card-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.charge-loading {
  padding: 18px 14px;
  color: #777;
  font-weight: 800;
  text-align: center;
}

.charge-loading.error {
  color: #e53935;
}

.charge-loading.full-grid {
  grid-column: 1 / -1;
}

.charge-amount-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.charge-amount-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.charge-amount-label {
  width: 76px;
  flex: 0 0 76px;
  color: #555;
  font-size: 13px;
  font-weight: 800;
}

.charge-amount-input {
  flex: 1 1 auto;
  height: 44px;
  min-width: 0;
  text-align: right;
  font-weight: 800;
}

.charge-amount-input.calculated {
  background: #e0e0e0;
  color: #555;
}

.charge-amount-unit {
  min-width: 14px;
  color: #555;
  font-size: 13px;
  font-weight: 800;
}

.charge-lease-stepper {
  display: grid;
  grid-template-columns: 42px minmax(52px, 1fr) 42px;
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-white);
}

.charge-lease-stepper button,
.charge-lease-stepper input {
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-weight: 900;
  text-align: center;
}

.charge-lease-stepper button {
  color: var(--green-dark);
  cursor: pointer;
  font-size: 20px;
}

.charge-lease-stepper button:first-child {
  border-right: 1px solid var(--card-border);
}

.charge-lease-stepper button:last-child {
  border-left: 1px solid var(--card-border);
}

.charge-lease-stepper button:disabled {
  background: #f4f6f4;
  color: #b7beb7;
  cursor: default;
}

.charge-lease-options-message {
  min-height: 18px;
  margin: -3px 0 0 84px;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.charge-lease-options-message.error {
  color: #d43b37;
}

.charge-vaccount-section {
  margin-bottom: 24px;
}

.charge-submit-btn {
  display: block;
  margin: 0 auto;
}

.charge-card-option,
.charge-vaccount-option {
  background: var(--bg-white);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: border-color .2s;
}

.charge-card-option.active,
.charge-vaccount-option.active {
  border-color: var(--green-dark);
}

.charge-card-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}

.charge-card-head {
  align-items: center;
  display: flex;
  gap: 4px;
}

.charge-card-dot {
  background: #bbb;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.charge-card-option.active .charge-card-dot {
  background: #3a9430;
}

.charge-card-alias {
  color: #777;
  font-size: 10px;
  font-weight: 700;
}

.charge-card-number {
  color: #555;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: .5px;
}

.card-company-logo-text,
.card-company-logo-image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  min-width: 76px;
  height: 32px;
  border: 1px solid #d7ead9;
  border-radius: 6px;
  background: #fff;
  vertical-align: middle;
}

.card-company-logo-text {
  padding: 0 8px;
  color: #1554a8;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.card-company-logo-image {
  overflow: hidden;
  padding: 1px 0 1px 3px;
}

.card-company-logo-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-company-logo-sm {
  width: 62px;
  min-width: 62px;
  height: 26px;
}

.card-company-logo-lg {
  width: 92px;
  min-width: 92px;
  height: 36px;
}

.card-company-logo-xl {
  width: 100px;
  min-width: 100px;
  height: 34px;
}

.card-company-logo-soft {
  border-radius: 7px;
}

.charge-installment-badge {
  align-self: flex-start;
  border: 1px solid #c9eee0;
  background: #effbf6;
  border-radius: 999px;
  color: #17833a;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 4px 7px;
}

.charge-installment-note {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-top: 7px;
  min-height: 18px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.charge-installment-note-badge {
  border: 1px solid #c9eee0;
  background: #effbf6;
  border-radius: 999px;
  color: #17833a;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.charge-installment-note-text {
  color: #5f6f60;
}

.charge-installment-note-muted {
  color: #8a9688;
}

.charge-installment-exclusions {
  width: 100%;
  border: 1px solid #d9e8d9;
  border-radius: 8px;
  background: #fbfffb;
  padding: 6px 8px;
}

.charge-installment-exclusions summary {
  cursor: pointer;
  color: #4f6a4f;
  font-size: 11px;
  font-weight: 900;
}

.charge-installment-exclusions div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.charge-installment-exclusions span {
  border-radius: 999px;
  background: #f3f7f3;
  color: #657464;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 800;
}

.charge-vaccount-option {
  align-items: center;
  display: flex;
  gap: 12px;
  padding: 12px 16px;
}

.charge-vaccount-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.charge-franchise-account-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: #fbfffb;
  box-shadow: var(--card-shadow);
}

.charge-franchise-account-card strong {
  color: var(--text-primary);
  font-size: 15px;
}

.charge-franchise-account-card > span:last-child {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.charge-franchise-account-kicker {
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 900;
}

.charge-vaccount-agency {
  align-items: center;
  display: flex;
  justify-content: center;
  flex: 0 0 44px;
  min-height: 44px;
  padding: 0;
  width: 44px;
}

.delivery-agency-square-logo {
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--card-border);
  border-radius: 9px;
  box-shadow: 0 4px 12px rgba(22, 72, 34, .07);
  display: inline-flex;
  flex: 0 0 auto;
  height: 44px;
  justify-content: center;
  overflow: hidden;
  padding: 3px;
  width: 44px;
}

.delivery-agency-square-logo img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.delivery-agency-square-logo.is-text > span {
  color: #d2382d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: -.4px;
  line-height: 1.12;
  text-align: center;
  word-break: keep-all;
}

.charge-vaccount-logo {
  height: 44px;
  width: 44px;
}

.charge-vaccount-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}

.charge-vaccount-bank {
  color: #333;
  font-size: 13px;
  font-weight: 800;
}

.charge-vaccount-number {
  color: #555;
  font-family: monospace;
  font-size: 12px;
  font-weight: 700;
  word-break: break-all;
}

.charge-vaccount-holder {
  color: #777;
  font-size: 11px;
  font-weight: 700;
}

.app-info-dialog {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.app-info-summary-card {
  background: #fbfff8;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}

.app-info-summary-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.app-info-type-chip {
  background: #3a9430;
  border-radius: 3px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 3px 7px;
}

.app-info-type-chip.danger {
  background: #e53935;
}

.app-info-state-chip {
  border: 1.5px solid currentColor;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 4px 9px;
}

.app-info-state-chip.is-active,
.app-info-state-text.is-active {
  color: #2e7d32;
}

.app-info-state-chip.is-inactive,
.app-info-state-text.is-inactive {
  color: #777;
}

.account-status-chip.is-login-required {
  background: #f0f0f0;
  color: #555;
}

.account-status-chip.is-pending,
.account-status-chip.is-approved {
  background: #eef8e8;
  color: #2e7d32;
}

.account-status-chip.is-rejected {
  background: #fff1f2;
  color: #be123c;
}

.app-info-title-row {
  align-items: center;
  color: #222;
  display: flex;
  font-size: 17px;
  font-weight: 900;
  gap: 8px;
  line-height: 1.25;
}

.app-info-agency-logo {
  height: 40px;
  width: 40px;
}

.app-info-subtitle {
  color: #555;
  font-size: 13px;
  font-weight: 800;
}

.app-info-mono {
  color: #333;
  font-family: monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
}

.app-info-mono.break,
.app-info-grid strong.break {
  word-break: break-all;
}

.app-info-grid {
  display: grid;
  font-size: 13px;
  gap: 8px 10px;
  grid-template-columns: 84px 1fr;
  line-height: 1.5;
}

.app-info-grid span {
  color: #888;
  font-weight: 800;
}

.app-info-grid strong {
  color: #333;
}

.app-info-reject-reason {
  color: #c24135;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.app-info-grid strong.mono {
  font-family: monospace;
}

.manage-list-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.manage-list-container.padded {
  padding: 16px 24px 0;
}

.manage-list-container.padded-flat {
  padding: 0 24px;
}

.card-list-header,
.payment-history-header,
.vaccount-list-header {
  border-bottom: none;
  margin-bottom: 16px;
  padding-bottom: 8px;
}

.card-list-content,
.payment-history-content,
.vaccount-list-content {
  padding-bottom: 100px;
}

.card-list-title-row,
.payment-history-title-row,
.vaccount-list-title-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 0 24px;
}

.card-list-title-row {
  margin-bottom: 8px;
}

.vaccount-list-title-row {
  margin-bottom: 16px;
}

.card-list-title-stack,
.payment-history-title-stack,
.vaccount-list-title-stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.payment-history-title-stack {
  min-width: 120px;
}

.card-list-title,
.payment-history-title,
.vaccount-list-title {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 2px;
}

.payment-history-title {
  white-space: nowrap;
}

.card-list-session-name,
.payment-history-owner-name,
.vaccount-list-session-name {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.card-list-add-btn,
.vaccount-list-add-btn {
  height: 34px;
  padding: 0 16px;
}

/* Keep the card action compact when the shared secondary CTA sets a 50px height. */
.btn-secondary.card-list-add-btn {
  height: 34px;
  min-height: 34px;
}

/* Keep the account action compact like the card-management action. */
.btn-secondary.vaccount-list-add-btn {
  height: 34px;
  min-height: 34px;
}

.payment-filter-box {
  background: var(--bg-white);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 24px 16px;
  padding: 14px 16px;
}

.payment-period-filter {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}

.payment-period-chip {
  background: #fff;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  color: var(--green-dark);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  height: 34px;
}

.payment-period-chip.active {
  background: var(--green-primary);
  border-color: var(--green-primary);
  color: #fff;
}

.payment-date-row {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.payment-date-label {
  color: #555;
  font-size: 13px;
  font-weight: 800;
  min-width: 40px;
}

.payment-date-input {
  flex: 1;
  font-size: 13px;
  height: 40px;
  padding: 0 8px;
}

.payment-date-search-btn {
  font-size: 14px;
  height: 40px;
  margin-top: 4px;
}

.payment-items-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px;
}

.payment-card {
  background: var(--bg-white);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
}

.payment-card-head {
  align-items: center;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  padding-bottom: 8px;
}

.payment-card-date {
  color: #333;
  font-size: 13px;
  font-weight: 800;
}

.payment-card-agency {
  color: #555;
  font-size: 13px;
  font-weight: 700;
}

.payment-card-bank {
  color: #777;
  font-size: 13px;
}

.payment-card-meta {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 800;
  gap: 6px;
}

.payment-card-meta span {
  background: var(--bg-soft, #f2f8f1);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 3px 7px;
}

.payment-card-deposit {
  color: #555;
  font-size: 13px;
}

.payment-card-deposit strong {
  font-weight: 800;
}

.payment-card-total-row {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}

.payment-card-total {
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 800;
}

.payment-card-receipt-label {
  color: #3a9430;
  font-size: 11px;
  font-weight: 900;
}

.payment-receipt-modal {
  align-items: center;
  background: rgba(0,0,0,.58);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: absolute;
  z-index: 60;
}

.payment-receipt-panel {
  background: #fff;
  border: 1px solid #bfe6c2;
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
  font-family: inherit;
  max-height: 88%;
  max-width: 340px;
  overflow: auto;
  width: 100%;
}

.payment-receipt-head {
  background: #339b31;
  color: #fff;
  padding: 20px 36px 18px;
  position: relative;
  text-align: center;
}

.payment-receipt-close {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  font-weight: 300;
  height: 28px;
  line-height: 1;
  position: absolute;
  right: 10px;
  top: 8px;
  width: 28px;
}

.payment-receipt-title {
  font-size: 18px;
  font-weight: 900;
}

.payment-receipt-subtitle {
  font-size: 12px;
  font-weight: 900;
  margin-top: 8px;
}

.payment-receipt-body {
  padding: 18px;
}

.payment-receipt-detail-list {
  font-size: 13px;
  line-height: 1.45;
}

.payment-receipt-row {
  align-items: center;
  border-bottom: 1px solid #e7efe7;
  display: grid;
  gap: 10px;
  grid-template-columns: 92px 1fr;
  min-height: 34px;
}

.payment-receipt-label {
  color: #7a8793;
  font-weight: 900;
}

.payment-receipt-value {
  color: #111;
  font-weight: 900;
  text-align: right;
  word-break: break-all;
}

.payment-receipt-divider {
  background: #bfe6c2;
  height: 1px;
  margin: 16px 0 12px;
}

.payment-receipt-tax-grid {
  align-items: center;
  display: grid;
  font-size: 13px;
  gap: 10px;
  grid-template-columns: 92px 1fr;
  min-height: 34px;
}

.payment-receipt-tax-value {
  font-weight: 900;
  text-align: right;
}

.payment-receipt-total-row {
  align-items: center;
  background: #eef9ee;
  border-radius: 4px;
  display: grid;
  gap: 10px;
  grid-template-columns: 92px 1fr;
  margin-top: 10px;
  padding: 11px 10px;
}

.payment-receipt-total-label {
  color: #111;
  font-size: 13px;
  font-weight: 900;
}

.payment-receipt-total-value {
  color: #20a83a;
  font-size: 18px;
  font-weight: 900;
  text-align: right;
}

.payment-receipt-footer {
  border-top: 1px solid #e7efe7;
  color: #9aa3ad;
  font-size: 10px;
  font-weight: 900;
  padding: 12px 8px;
  text-align: center;
}

.card-registration-check-guide,
.vaccount-approval-guide {
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: #fbfff8;
  box-shadow: var(--card-shadow);
  margin-top: 12px;
}

.card-registration-check-guide {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  margin-top: 0;
  padding: 10px 12px;
}

.card-registration-check-guide strong {
  color: var(--green-dark);
  font-size: 12.5px;
  font-weight: 900;
}

.card-registration-check-guide span {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.card-registration-check-guide em {
  color: var(--green-dark);
  font-style: normal;
  font-weight: 950;
}

.vaccount-approval-guide span,
.vaccount-approval-guide em {
  color: var(--text-secondary);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

.vaccount-approval-guide {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
}

.vaccount-approval-guide strong {
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}

.cs-inline-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-padding-inline: 12px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  scrollbar-width: none;
}

.cs-inline-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Product section */
.product-section {
  padding-bottom: 8px;
  border-bottom: 6px solid var(--bg-light);
}

.product-list {
  display: flex;
  gap: 10px;
  padding: 8px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

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

.product-card {
  flex-shrink: 0;
  width: 100px;
  cursor: pointer;
}

.product-img {
  width: 100px;
  height: 90px;
  border-radius: var(--radius);
  background: var(--bg-gray);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
  border: 1px solid var(--border-light);
}

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-name {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 4px;
}

.product-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.product-original {
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: line-through;
}

/* ==========================================
   BOTTOM NAVIGATION
   ========================================== */
.bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--bottom-nav-height) + var(--app-bottom-inset));
  padding-bottom: var(--app-bottom-inset);
  border-top: 1px solid var(--border-light);
  display: grid;
  grid-template-columns: repeat(var(--bottom-nav-count, 3), minmax(0, 1fr));
  background: var(--bg-white);
  z-index: 2147483647;
  isolation: isolate;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  caret-color: transparent;
}

.bottom-nav[data-nav-count="3"] {
  --bottom-nav-count: 3;
}

.bottom-nav[data-nav-count="4"] {
  --bottom-nav-count: 4;
}

.bottom-nav,
.bottom-nav .nav-item {
  pointer-events: auto !important;
}

.bottom-nav .nav-item,
.bottom-nav .nav-item *,
.bottom-nav .nav-item::before,
.bottom-nav .nav-item::after {
  cursor: pointer !important;
  -webkit-user-select: none;
  user-select: none;
  caret-color: transparent;
}

.bottom-nav .nav-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  display: block;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}

.bottom-nav .nav-item > * {
  pointer-events: none !important;
}

html.nav-cursor-pointer,
html.nav-cursor-pointer body,
html.nav-cursor-pointer body * {
  cursor: pointer !important;
}

#talk-seller-map,
#friendly-kakao-map {
  z-index: 0 !important;
  isolation: isolate;
}

#talk-seller-map .leaflet-pane,
#talk-seller-map .leaflet-top,
#talk-seller-map .leaflet-bottom,
#talk-seller-map .leaflet-control,
#friendly-kakao-map .leaflet-pane,
#friendly-kakao-map .leaflet-top,
#friendly-kakao-map .leaflet-bottom,
#friendly-kakao-map .leaflet-control {
  z-index: 1 !important;
}

.nav-item {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--bottom-nav-height);
  padding: 7px 0 6px;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font);
  color: var(--text-muted);
  text-align: center;
  -webkit-tap-highlight-color: rgba(3, 199, 90, .14);
  transition: color 0.18s ease, transform 0.18s ease;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  caret-color: transparent;
}

.nav-item.active,
.nav-item:hover,
.nav-item.nav-hover,
.nav-item:focus-visible {
  color: #03c75a;
}

.nav-item:hover,
.nav-item.nav-hover,
.nav-item:focus-visible {
  transform: translateY(-1px);
}

.nav-item:active {
  transform: translateY(0);
}

.bottom-nav-icon {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
  display: inline-block;
  color: currentColor;
  background: currentColor;
  opacity: .82;
  pointer-events: none !important;
  cursor: pointer !important;
  -webkit-user-select: none;
  user-select: none;
  caret-color: transparent;
  -webkit-mask: var(--bottom-nav-icon-mask) center / contain no-repeat;
  mask: var(--bottom-nav-icon-mask) center / contain no-repeat;
  transition: transform 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.bottom-nav-icon-home {
  --bottom-nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 3 10.2v9.7c0 .9.7 1.6 1.6 1.6h5.1v-6.4h4.6v6.4h5.1c.9 0 1.6-.7 1.6-1.6v-9.7L12 3z'/%3E%3C/svg%3E");
}

.bottom-nav-icon-agency {
  --bottom-nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 4.5C5 3.7 5.7 3 6.5 3h11c.8 0 1.5.7 1.5 1.5V21h-5v-4.5h-4V21H5V4.5zm3 3V10h2.5V7.5H8zm5.5 0V10H16V7.5h-2.5zM8 12.5V15h2.5v-2.5H8zm5.5 0V15H16v-2.5h-2.5z'/%3E%3C/svg%3E");
}

.bottom-nav-icon-my {
  --bottom-nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12.2a4.6 4.6 0 1 0 0-9.2 4.6 4.6 0 0 0 0 9.2zm0 2.1c-4.7 0-8.5 2.5-8.5 5.5 0 .8.7 1.4 1.5 1.4h14c.8 0 1.5-.6 1.5-1.4 0-3-3.8-5.5-8.5-5.5z'/%3E%3C/svg%3E");
}

.bottom-nav-icon-cs {
  --bottom-nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5.1 4h13.8c1.2 0 2.1.9 2.1 2.1v8.2c0 1.2-.9 2.1-2.1 2.1h-7.2l-5 4.1c-.7.5-1.7.1-1.7-.8v-3.3c-1.1-.1-2-.9-2-2.1V6.1C3 4.9 3.9 4 5.1 4zm3 5.4a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2zm3.9 0a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2zm3.9 0a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2z'/%3E%3C/svg%3E");
}

.nav-item svg {
  width: 22px;
  height: 22px;
  pointer-events: none !important;
  stroke: currentColor;
  transition: transform 0.18s ease, color 0.18s ease;
}

.nav-item.active .bottom-nav-icon,
.nav-item:hover .bottom-nav-icon,
.nav-item.nav-hover .bottom-nav-icon,
.nav-item:focus-visible .bottom-nav-icon,
.nav-item.active svg,
.nav-item:hover svg,
.nav-item.nav-hover svg,
.nav-item:focus-visible svg {
  color: #03c75a;
  opacity: 1;
  transform: translateY(-1px) scale(1.04);
}

.nav-label {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 650;
  pointer-events: none;
  cursor: pointer !important;
  -webkit-user-select: none;
  user-select: none;
  caret-color: transparent;
  transition: color 0.18s ease, font-weight 0.18s ease;
}

.nav-item.active .nav-label,
.nav-item:hover .nav-label,
.nav-item.nav-hover .nav-label,
.nav-item:focus-visible .nav-label {
  color: #03c75a;
  font-weight: 800;
}

.bottom-nav.nav-hovering .nav-item.active:not(.nav-hover):not(:hover):not(:focus-visible) {
  color: var(--text-muted);
  transform: none;
}

.bottom-nav.nav-hovering .nav-item.active:not(.nav-hover):not(:hover):not(:focus-visible) .bottom-nav-icon,
.bottom-nav.nav-hovering .nav-item.active:not(.nav-hover):not(:hover):not(:focus-visible) svg {
  color: var(--text-muted);
  opacity: .82;
  transform: none;
}

.bottom-nav.nav-hovering .nav-item.active:not(.nav-hover):not(:hover):not(:focus-visible) .nav-label {
  color: var(--text-muted);
  font-weight: 650;
}

.bottom-nav:has(.nav-item:hover) .nav-item.active:not(:hover):not(:focus-visible) {
  color: var(--text-muted);
  transform: none;
}

.bottom-nav:has(.nav-item:hover) .nav-item.active:not(:hover):not(:focus-visible) .bottom-nav-icon,
.bottom-nav:has(.nav-item:hover) .nav-item.active:not(:hover):not(:focus-visible) svg {
  color: var(--text-muted);
  opacity: .82;
  transform: none;
}

.bottom-nav:has(.nav-item:hover) .nav-item.active:not(:hover):not(:focus-visible) .nav-label {
  color: var(--text-muted);
  font-weight: 650;
}

.bottom-nav .nav-item.nav-hover,
.bottom-nav .nav-item.nav-hover .bottom-nav-icon,
.bottom-nav .nav-item.nav-hover svg,
.bottom-nav .nav-item.nav-hover .nav-label {
  color: #03c75a !important;
  opacity: 1;
}

.bottom-nav .nav-item.nav-hover .nav-label {
  font-weight: 800;
}

.my-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  margin-bottom: 16px;
  padding: 20px 24px 8px;
  border-bottom: none;
}

.my-header-logo {
  align-self: flex-start;
  width: auto;
  height: 36px;
}

.my-header-tagline {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.agency-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-bottom: 14px;
  padding: 20px 24px 8px;
  border-bottom: none;
}

.agency-header-title {
  margin-bottom: 4px;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 900;
}

.agency-header-name {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.agency-content {
  padding: 0 24px 100px;
}

.agency-filter-card {
  margin-bottom: 14px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-white);
  padding: 16px;
  box-shadow: var(--card-shadow);
}

.agency-search-btn {
  height: 46px;
}

.agency-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.agency-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.agency-section-title {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 900;
}

.agency-fee-rate {
  color: var(--green-primary);
  font-size: 11px;
  font-weight: 800;
}

.agency-summary-card {
  min-height: 78px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #ffffff 0%, #f3fbf2 100%);
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--card-shadow);
}

.agency-summary-card span {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
}

.agency-summary-card strong {
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 900;
}

.agency-summary-card #agency-summary-net {
  color: var(--green-dark);
}

.agency-range-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

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

.agency-date-grid > div {
  min-width: 0;
}

.agency-date-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 380px) {
  .agency-date-grid {
    grid-template-columns: 1fr;
  }
}

.agency-range-chip {
  height: 32px;
  padding: 0 12px;
  border: 1.5px solid var(--card-border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.agency-range-chip:hover {
  border-color: var(--green-primary);
  color: var(--green-dark);
}

.agency-range-chip.active {
  border-color: var(--green-primary);
  background: var(--green-primary);
  color: #ffffff;
  box-shadow: 0 6px 12px rgba(3, 199, 90, .16);
}

.my-agency-franchise-card {
  margin: 0 24px 12px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-white);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.my-agency-franchise-card[hidden],
.my-agency-franchise-panel[hidden] {
  display: none !important;
}

.my-agency-franchise-toggle {
  width: 100%;
  min-height: 86px;
  border: 0;
  background: linear-gradient(135deg, #ffffff 0%, #f5fff4 100%);
  padding: 15px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.my-agency-franchise-toggle:focus {
  outline: none;
}

.my-agency-franchise-toggle:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(3, 199, 90, .26);
}

.my-agency-franchise-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.my-agency-franchise-summary span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 850;
}

.my-agency-franchise-summary strong {
  color: var(--green-dark);
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}

.my-agency-franchise-summary small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}

.my-agency-franchise-arrow {
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--card-border);
  border-radius: 8px;
  background: #ffffff;
  position: relative;
  flex: 0 0 auto;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.my-agency-franchise-arrow::before,
.my-agency-franchise-arrow::after {
  content: "";
  position: absolute;
  top: 14px;
  width: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--green-dark);
}

.my-agency-franchise-arrow::before {
  left: 7px;
  transform: rotate(45deg);
}

.my-agency-franchise-arrow::after {
  right: 7px;
  transform: rotate(-45deg);
}

.my-agency-franchise-card.is-open .my-agency-franchise-arrow {
  border-color: var(--green-primary);
  background: #ecfff3;
  transform: rotate(180deg);
}

.my-agency-settle-card {
  margin: 0 24px 12px;
  border: 1.5px solid var(--card-border);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #f7fff6 100%);
  padding: 15px 16px;
  box-shadow: var(--card-shadow);
}

.my-agency-settle-card[hidden] {
  display: none !important;
}

.my-agency-settle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.my-agency-settle-head span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 850;
}

.my-agency-settle-head strong {
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  background: #fff7dd;
  color: #ad6b00;
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.my-agency-settle-head strong.is-ready {
  background: #dcfce7;
  color: var(--green-dark);
}

.my-agency-settle-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.my-agency-settle-body > span,
.my-agency-settle-body small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}

.my-agency-settle-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.my-agency-settle-line span {
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 950;
  flex: 0 0 auto;
}

.my-agency-settle-line strong {
  min-width: 0;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-agency-franchise-panel {
  border-top: 1px solid var(--border-light);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.my-agency-franchise-toolbar {
  display: flex;
  justify-content: flex-end;
}

.my-agency-franchise-toolbar button {
  height: 30px;
  border: 1.5px solid var(--card-border);
  border-radius: 8px;
  background: #f7fff6;
  color: var(--green-dark);
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.my-agency-franchise-board {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.my-agency-franchise-head-row,
.my-agency-franchise-row {
  display: grid;
  grid-template-columns: minmax(54px, 0.72fr) minmax(74px, 0.88fr) minmax(122px, 1.28fr);
  align-items: center;
  column-gap: 6px;
}

.my-agency-franchise-head-row {
  min-height: 32px;
  border-bottom: 1px solid #dff0dc;
  background: #f4fbf1;
  padding: 0 10px;
  color: var(--green-dark);
  font-size: 10px;
  font-weight: 950;
}

.my-agency-franchise-list {
  display: flex;
  flex-direction: column;
}

.my-agency-franchise-row {
  min-height: 50px;
  border-bottom: 1px solid #edf5eb;
  background: #ffffff;
  padding: 9px 10px;
}

.my-agency-franchise-row:last-child {
  border-bottom: none;
}

.my-agency-franchise-cell {
  min-width: 0;
}

.my-agency-franchise-cell strong,
.my-agency-franchise-cell span,
.my-agency-franchise-cell em,
.my-agency-franchise-cell small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-agency-franchise-cell strong {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 950;
  margin-bottom: 3px;
}

.my-agency-franchise-cell span {
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 850;
  margin-bottom: 3px;
}

.my-agency-franchise-cell small {
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 750;
}

.my-agency-franchise-cell.status {
  text-align: right;
}

.my-agency-franchise-cell.status em {
  color: var(--green-dark);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  margin-bottom: 3px;
  white-space: nowrap;
}

.my-agency-franchise-cell.status small {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.my-agency-franchise-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
}

.my-agency-franchise-page-btn {
  min-width: 28px;
  height: 28px;
  border: 1.5px solid var(--card-border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--green-dark);
  font-family: inherit;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.my-agency-franchise-page-btn.active {
  border-color: var(--green-primary);
  background: var(--green-primary);
  color: #ffffff;
}

.my-agency-franchise-page-btn:disabled {
  opacity: .45;
  cursor: default;
}

.my-agency-franchise-empty {
  padding: 20px 12px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.agency-settlement-card {
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-white);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agency-settlement-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary);
}

.agency-settlement-row strong {
  color: var(--text-primary);
  text-align: right;
}

.agency-table-wrap {
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-white);
  overflow-x: auto;
  box-shadow: var(--card-shadow);
}

.agency-settlement-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}

.agency-settlement-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f0faf0;
  color: var(--green-dark);
  font-weight: 900;
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1.5px solid var(--border-color);
  white-space: nowrap;
}

.agency-settlement-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  font-weight: 800;
  vertical-align: top;
}

.agency-settlement-table tbody tr:last-child td { border-bottom: none; }

.agency-table-empty {
  padding: 28px 10px;
  color: var(--text-muted);
  text-align: center;
}

.agency-table-loading {
  padding: 24px;
  text-align: center;
}

.agency-table-spinner {
  width: 28px;
  height: 28px;
  margin: 0 auto;
  border-top-color: var(--green-primary);
}

.agency-settlement-table th:first-child,
.agency-settlement-table td.agency-payment-date {
  width: 50px;
  padding-left: 6px;
  padding-right: 4px;
}

.agency-payment-date span,
.agency-payment-date em {
  display: block;
  line-height: 1.18;
  white-space: nowrap;
}

.agency-payment-date em {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.agency-settlement-table th:nth-child(2),
.agency-settlement-table td.agency-franchise-name {
  padding-left: 16px;
}

.agency-franchise-name-text {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agency-payment-amount {
  text-align: left;
  white-space: nowrap;
}

.agency-settlement-table td.agency-share-rate {
  text-align: left;
  color: var(--green-dark);
  font-weight: 900;
  white-space: nowrap;
}

.agency-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 14px 0 4px;
  flex-wrap: wrap;
}

.agency-page-btn {
  min-width: 30px;
  height: 30px;
  border: 1.5px solid var(--card-border);
  border-radius: 8px;
  background: var(--bg-white);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.agency-page-btn.active {
  background: var(--green-primary);
  border-color: var(--green-primary);
  color: #fff;
}

/* ==========================================
   AUTH PAGES (Login, Find ID, Reset PW)
   ========================================== */
.auth-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding-bottom: 80px;
}

.auth-content {
  flex: 1;
  padding: 28px 24px;
}

.login-header-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.login-header-logo {
  align-self: flex-start;
  width: auto;
  height: 32px;
}

.login-submit-btn {
  width: 100%;
  margin-bottom: 12px;
}

.login-register-btn {
  width: 100%;
}

.login-submit-spinner {
  width: 16px;
  height: 16px;
  border-top-color: #fff;
}

.delivery-agency-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-bottom: 16px;
  padding: 20px 24px 8px;
  border-bottom: none;
}

.delivery-agency-back {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  color: #555;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.delivery-agency-back-icon {
  width: 18px;
  height: 18px;
}

.delivery-agency-content {
  padding: 0 24px 100px;
}

.delivery-agency-title {
  margin-bottom: 6px;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
}

.delivery-agency-subtitle {
  margin-bottom: 16px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.delivery-agency-search-wrap {
  position: relative;
  margin-bottom: 18px;
}

.delivery-agency-search {
  padding-right: 42px;
}

.delivery-agency-search-clear {
  position: absolute;
  top: 50%;
  right: 10px;
  border: none;
  background: transparent;
  color: #3a5f95;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.delivery-agency-state {
  padding: 24px 20px;
  color: var(--text-secondary);
  font-weight: 700;
  text-align: center;
}

.delivery-agency-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius);
  background: #fff;
  padding: 14px 16px;
  text-align: left;
  cursor: not-allowed;
}

.delivery-agency-item.is-active {
  border-color: #cce8c8;
  background: #fbfff8;
  cursor: pointer;
}

.delivery-agency-item-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.delivery-agency-item-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.delivery-agency-item-name {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-agency-selected-badge {
  flex: 0 0 auto;
  border: 1px solid #bfe6b8;
  border-radius: 999px;
  background: #edf9ea;
  color: #3a9430;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
}

.delivery-agency-status {
  color: #b45309;
  font-size: 12px;
  font-weight: 800;
}

.delivery-agency-item.is-active .delivery-agency-status {
  color: #2e7d32;
}

.delivery-agency-action-label {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.auth-headline {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 28px;
}

.agency-invite-notice {
  margin: -8px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: #f4fff7;
}

.agency-invite-title {
  margin-bottom: 4px;
  color: var(--green-primary);
  font-size: 11px;
  font-weight: 900;
}

.agency-invite-body {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

/* Form elements */
.form-group {
  margin-bottom: 12px;
}

#edit-card-company-help {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.form-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: block;
}

.form-input {
  width: 100%;
  height: 48px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  padding: 0 14px;
  font-size: 14px;
  font-family: var(--font);
  color: #111827;
  -webkit-text-fill-color: #111827;
  caret-color: #111827;
  background: var(--bg-white);
  outline: none;
  font-weight: 700;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #111827;
  caret-color: #111827;
  box-shadow: 0 0 0 1000px var(--bg-white) inset;
}

.form-input.password-mask {
  color: #111827;
  -webkit-text-fill-color: #111827;
  -webkit-text-security: disc;
  caret-color: #111827;
}

.form-input::placeholder {
  color: #9ca3af;
  -webkit-text-fill-color: #9ca3af;
  opacity: 1;
}

.form-input.placeholder-select {
  color: #b8c0cc;
  -webkit-text-fill-color: #b8c0cc;
  font-weight: 700;
}

.form-input.placeholder-select option {
  color: #111827;
}

.form-input:focus {
  border-color: var(--green-primary);
  box-shadow: 0 0 0 3px rgba(58, 125, 68, 0.12);
}

.card-cvc-form-group {
  margin-bottom: 12px;
}

.card-cvc-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 165px;
  column-gap: 10px;
  row-gap: 6px;
  align-items: stretch;
}

.card-cvc-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.card-cvc-title {
  margin-bottom: 0;
}

.card-cvc-visual {
  position: relative;
  width: 165px;
  height: 100%;
  min-height: 88px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f7fff8 0%, #eef8ef 100%);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(3, 199, 90, 0.04);
}

.card-cvc-stripe {
  height: 16px;
  margin-top: 14px;
  background: #2f3b35;
}

.card-cvc-sign-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 14px 8px 0;
}

.card-cvc-sign {
  position: relative;
  flex: 1;
  height: 18px;
  border: 1px solid #d4e8d7;
  border-radius: 3px;
  background: repeating-linear-gradient(135deg, #eef4ef 0 5px, #dceade 5px 10px);
}

.card-cvc-sign::after {
  content: '123';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  color: #2d6d3f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2px;
  opacity: 0.82;
}

.card-cvc-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 20px;
  border: 1px solid var(--green-primary);
  border-radius: 4px;
  color: var(--green-dark);
  background: #ecfff3;
  font-size: 10px;
  font-weight: 900;
}

.card-cvc-input {
  width: 100%;
  height: 48px;
  text-align: center;
}

.card-cvc-help {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

@media (max-width: 360px) {
  .card-cvc-guide {
    grid-template-columns: minmax(0, 1fr) 150px;
    column-gap: 8px;
  }

  .card-cvc-visual {
    width: 150px;
    min-height: 86px;
  }
}
.password-field {
  position: relative;
}

.password-field .form-input {
  padding-right: 58px;
}

.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 40px;
  height: 30px;
  border: 0;
  border-radius: var(--radius);
  background: #eef8e8;
  color: var(--green-primary);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.input-row {
  display: flex;
  gap: 8px;
}

.input-row .form-input { flex: 1; }

.char-count {
  text-align: right;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Checkbox */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 20px;
  cursor: pointer;
}

.custom-checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--card-border);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  cursor: pointer;
}

.custom-checkbox.checked {
  background: var(--green-primary);
  border-color: var(--green-primary);
}

.custom-checkbox.checked::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}

.checkbox-label {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Buttons */
.btn-primary {
  width: 100%;
  height: 50px;
  background: var(--green-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 800;
  font-family: var(--font);
  cursor: pointer;
  letter-spacing: -0.3px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-primary:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(58, 125, 68, 0.22);
}

.btn-primary:active { transform: translateY(0); }

.btn-primary:disabled {
  background: var(--border-color);
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  height: 50px;
  background: var(--bg-white);
  color: var(--green-primary);
  border: 1.5px solid var(--green-primary);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font);
  cursor: pointer;
  padding: 0 16px;
  white-space: nowrap;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background: var(--green-light);
}

.btn-send {
  height: 48px;
  background: var(--green-dark);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font);
  cursor: pointer;
  padding: 0 14px;
  white-space: nowrap;
  transition: all 0.2s;
  min-width: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-send:hover { background: var(--green-primary); }

.btn-send.sent {
  background: var(--text-muted);
  cursor: default;
}

.edit-myinfo-action-btn {
  width: 112px;
  min-width: 112px;
  height: 48px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
  flex: 0 0 112px;
}

#edit-myinfo-sms-input.is-verified {
  border-color: #9fd59a;
  background: #f1fbef;
  color: var(--green-dark);
  font-weight: 900;
  -webkit-text-fill-color: var(--green-dark);
  opacity: 1;
}

.card-payer-consent-warning {
  display: grid;
  gap: 6px;
  margin: 2px 0 18px;
  padding: 14px 16px;
  border: 1px solid #efc7c2;
  border-radius: 10px;
  background: #fff8f7;
  color: #6b2d28;
  line-height: 1.55;
}

.card-payer-consent-warning strong {
  color: #b33a30;
  font-size: 14px;
}

.card-payer-consent-warning p {
  margin: 0;
  font-size: 13px;
}

.edit-myinfo-header {
  margin-bottom: 16px;
  padding: 20px 24px 8px;
  border-bottom: none;
}

.edit-myinfo-content {
  padding-bottom: 100px;
}

.edit-myinfo-title,
.edit-myinfo-section,
.edit-myinfo-actions {
  padding: 0 24px;
}

.edit-myinfo-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 20px;
}

.edit-myinfo-title-main {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
}

.edit-myinfo-store-name {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 700;
}

.edit-myinfo-section {
  margin-bottom: 20px;
}

.edit-myinfo-password-section {
  margin-bottom: 24px;
}

.edit-myinfo-label {
  font-size: 14px;
  font-weight: 800;
  color: #666;
  margin-bottom: 8px;
}

.edit-myinfo-sub-label {
  font-size: 12px;
  color: #888;
  font-weight: 700;
  margin-bottom: 6px;
}

.edit-myinfo-row {
  display: flex;
  gap: 8px;
}

.edit-myinfo-sms-row {
  margin-top: 8px;
}

.edit-myinfo-flex-input {
  flex: 1 1 auto;
  min-width: 0;
}

.edit-myinfo-sms-timer {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--green-primary);
  text-align: right;
}

.edit-myinfo-sms-timer.is-visible {
  display: block;
}

.edit-myinfo-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.edit-myinfo-form-group {
  margin-bottom: 0;
}

.edit-myinfo-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.edit-myinfo-withdraw-btn {
  background: none;
  border: none;
  color: #888;
  text-decoration: underline;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.vaccount-add-header {
  margin-bottom: 16px;
  padding: 20px 24px 8px;
  border-bottom: none;
}

.vaccount-add-content {
  padding: 0 24px 100px;
}

.vaccount-add-headline {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 24px;
}

.vaccount-add-group {
  margin-bottom: 20px;
}

.vaccount-photo-group {
  margin-bottom: 24px;
}

.vaccount-add-label {
  font-size: 14px;
  font-weight: 800;
  color: #666;
  margin-bottom: 12px;
}

.vaccount-add-label.compact {
  margin-bottom: 8px;
}

.vaccount-agency-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.btn-delivery-agency {
  height: 40px;
  background: var(--bg-white);
  border: 1.5px solid var(--card-border);
  color: var(--text-secondary);
  font-weight: 800;
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
}

.btn-delivery-agency.active {
  border-color: var(--green-dark);
  color: var(--green-dark);
}

.vaccount-selected-agency {
  margin-top: 10px;
  min-height: 18px;
  font-size: 12px;
  font-weight: 700;
  color: #2e7d32;
}

.vaccount-custom-agency {
  margin-top: 14px;
}

.form-select-wrap {
  position: relative;
}

.form-select-input {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-white);
  padding-right: 30px;
}

.form-select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #888;
  font-size: 10px;
}

.vaccount-photo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: #fbfffa;
  text-align: center;
  box-shadow: var(--card-shadow);
}

.vaccount-photo-guide {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  font-weight: 700;
}

.vaccount-photo-upload-btn {
  height: 38px;
  padding: 0 20px;
}

.vaccount-photo-preview {
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border: 1px dashed #c9e6c2;
  border-radius: var(--radius);
  background: var(--bg-white);
  text-align: left;
}

.vaccount-photo-preview-title {
  margin-bottom: 6px;
  font-size: 11px;
  color: #2e7d32;
  font-weight: 800;
}

.vaccount-photo-preview-img {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: var(--radius);
}

.vaccount-photo-preview-name {
  margin-top: 6px;
  font-size: 12px;
  color: #555;
  font-weight: 700;
}

/* Auth links */
.auth-links {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 16px 0;
}

.auth-link {
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 14px;
  background: none;
  border: none;
  font-family: var(--font);
  position: relative;
  transition: color 0.2s;
}

.auth-link:hover { color: var(--green-primary); }

.auth-link + .auth-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--border-color);
}

/* Social login */
.social-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}

.social-divider::before,
.social-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

.social-divider span {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.social-btns {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 8px;
}

.social-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  transition: all 0.2s;
  background: var(--bg-white);
}

.social-btn:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow);
}

.social-naver {
  background: #03c75a;
  color: white;
  border-color: #03c75a;
  font-size: 20px;
}

.social-kakao {
  background: #fee500;
  color: #3c1e1e;
  border-color: #fee500;
  font-size: 14px;
  font-weight: 700;
}

.social-google {
  background: #fff;
  border-color: var(--border-color);
}

/* ==========================================
   REGISTER FLOW
   ========================================== */
.register-page {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.register-content {
  flex: 1;
  padding: 28px 24px 20px;
}

.register-section {
  margin-bottom: 24px;
}

.register-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--green-primary);
}

.register-header {
  margin-bottom: 16px;
  padding: 20px 24px 8px;
  border-bottom: none;
}

.register-back-btn {
  padding: 0;
  color: #555;
}

.register-scroll-content {
  padding-bottom: 100px;
}

.register-auth-headline {
  font-size: 18px;
}

.register-franchise-context {
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-white);
}

.register-franchise-context[hidden] {
  display: none;
}

.register-franchise-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 44px;
  gap: 10px;
}

.register-franchise-label {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.register-franchise-name {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.register-franchise-lock {
  padding: 4px 7px;
  border: 1px solid #b9dbb2;
  border-radius: var(--radius-sm);
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 800;
}

.register-franchise-helper,
.register-franchise-status {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.register-franchise-helper {
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.register-franchise-status {
  min-height: 44px;
  margin-bottom: 12px;
  padding: 11px 12px;
  border-left: 3px solid var(--border-color);
  color: var(--text-secondary);
}

.register-franchise-status.is-success {
  border-left-color: var(--green-primary);
  color: var(--green-dark);
}

.register-franchise-status.is-error {
  border-left-color: #c5362c;
  color: #a1261e;
}

.register-franchise-retry {
  min-height: 44px;
  margin: -4px 0 12px;
  padding: 0 16px;
  border: 1px solid var(--green-primary);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  color: var(--green-dark);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.register-franchise-retry[hidden] {
  display: none;
}

@media (max-width: 480px) {
  .register-franchise-context {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 12px;
  }

  .register-franchise-identity {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .register-franchise-name {
    flex: 1 1 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

.register-scroll-content :is(button, input, [tabindex]):focus-visible {
  outline: 3px solid rgba(70, 169, 40, .3);
  outline-offset: 2px;
}

.register-help-text {
  margin-top: 6px;
  color: #777;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.register-sms-status-notice {
  margin-bottom: 14px;
  border: 1.5px solid #f3c6c6;
  border-radius: var(--radius);
  background: #fff7f7;
  color: #b42318;
  padding: 11px 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.register-sms-status-notice[hidden] {
  display: none;
}

.register-sms-disabled {
  opacity: .58;
  cursor: not-allowed;
}

.register-field-label {
  margin-bottom: 6px;
  color: #666;
  font-size: 13px;
  font-weight: 800;
}

.register-input-row {
  display: flex;
  gap: 8px;
}

.register-card-phone-same {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 14px;
  color: #344334;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.register-card-id-same {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 14px;
  color: #344334;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.register-card-id-same input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--green-primary);
  flex: 0 0 18px;
}

#reg-card-id-upload-group[hidden] {
  display: none;
}

.register-card-phone-same input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--green-primary);
  flex: 0 0 18px;
}

#reg-card-phone-verification[hidden] {
  display: none;
}

.register-flex-input {
  flex: 1;
}

.register-sms-timer {
  margin-top: 6px;
  color: var(--green-primary);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.register-id-upload-group {
  margin-bottom: 16px;
}

.register-hidden-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.register-id-upload-box {
  padding: 20px 16px;
}

.register-next-btn {
  margin-top: 8px;
}

.register-terms-content {
  padding: 0 24px 100px;
}

.register-terms-headline {
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
}

.register-term-all-row {
  margin-bottom: 16px;
}

.register-term-row {
  margin-bottom: 8px;
}

.register-term-label {
  color: #555;
  font-size: 15px;
  font-weight: 800;
}

.register-term-content {
  height: 120px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding: 12px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-white);
  color: #333;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}

.register-term-content-last {
  margin-bottom: 24px;
}

.register-submit-btn {
  width: 100%;
}

.auth-recovery-content {
  padding: 0 24px;
}

.auth-recovery-scroll-content {
  padding: 0 24px 100px;
}

.auth-recovery-headline {
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.4;
}

.recovery-field-label {
  font-size: 14px;
}

.auth-recovery-sms-container {
  margin-top: 12px;
}

.auth-recovery-submit-btn {
  width: 100%;
  margin-top: 20px;
}

.auth-recovery-result-list {
  font-weight: 800;
  line-height: 1.7;
}

.card-add-header {
  margin-bottom: 8px;
  padding: 14px 24px 6px;
  border-bottom: none;
}

.card-add-content {
  padding: 0 24px 100px;
}

.card-add-headline {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.card-hosted-registration-guide {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 0 0 20px;
  padding: 16px;
  border: 1px solid #cfe4cb;
  border-radius: 12px;
  background: #f5fbf3;
  color: #285d2b;
}

.card-hosted-registration-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #46a928;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.card-hosted-registration-guide strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 900;
}

.card-hosted-registration-guide p {
  margin: 0;
  color: #5c6c5b;
  font-size: 12px;
  line-height: 1.55;
}

.card-add-compact-group {
  margin-bottom: 14px;
}

.card-add-label {
  margin-bottom: 8px;
  color: #666;
  font-size: 14px;
  font-weight: 800;
}

.card-company-readonly {
  background: #f8faf8;
}

.card-company-custom-wrap {
  margin-top: 8px;
}

.card-password-row,
.card-expiry-row,
.card-type-row {
  display: flex;
  gap: 12px;
}

.card-password-row {
  align-items: center;
  gap: 8px;
}

.card-password-input {
  width: 100px;
  text-align: center;
}

.card-password-mask-hint {
  color: #555;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
}

.card-expiry-select-wrap {
  flex: 1;
}

.btn-card-type {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-white);
  color: var(--text-secondary);
  font-weight: 800;
  cursor: pointer;
}

.btn-card-type.active {
  border-color: #3a9430;
  color: #3a9430;
}

.card-type-arrow {
  font-size: 10px;
}

.card-add-alias-group {
  margin-bottom: 24px;
}

.form-input.field-error,
.form-select-input.field-error {
  border-color: #efb4ad;
  background: #fff7f5;
  box-shadow: 0 0 0 3px rgba(239, 180, 173, .22);
}

.control-frozen {
  pointer-events: none;
  background: #f8faf8;
  color: #6b7280;
}

.card-type-frozen {
  pointer-events: none;
  opacity: .72;
}

/* Upload button */
.upload-btn {
  width: 100%;
  height: 48px;
  border: 1.5px dashed var(--green-primary);
  border-radius: var(--radius);
  background: var(--green-light);
  color: var(--green-primary);
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}

.upload-btn:hover {
  background: #d0ebd4;
  border-color: var(--green-dark);
}

/* Terms */
.terms-group {
  margin-bottom: 16px;
}

.terms-check-all {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  background: var(--bg-light);
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 8px;
}

.terms-check-all .label {
  font-size: 15px;
  font-weight: 700;
}

.terms-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  margin-bottom: 8px;
  cursor: pointer;
}

.terms-item .label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.terms-item .content {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
  max-height: 60px;
  overflow-y: auto;
}

/* Step indicator */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 16px 24px 0;
}

.step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-white);
  flex-shrink: 0;
}

.step-dot.active {
  border-color: var(--green-primary);
  color: var(--green-primary);
  background: var(--green-light);
}

.step-dot.done {
  border-color: var(--green-primary);
  background: var(--green-primary);
  color: white;
}

.step-line {
  height: 2px;
  flex: 1;
  background: var(--border-color);
  max-width: 40px;
}

.step-line.done {
  background: var(--green-primary);
}

/* Address */
.address-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

/* ==========================================
   TOAST / SNACKBAR
   ========================================== */
.toast {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(30, 30, 30, 0.9);
  color: white;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.3s;
  z-index: 1000;
  backdrop-filter: blur(8px);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.in-app-notification {
  position: fixed;
  left: 50%;
  top: max(12px, env(safe-area-inset-top));
  width: min(390px - 28px, calc(100vw - 28px));
  max-width: 362px;
  min-height: 62px;
  transform: translateX(-50%) translateY(-120%);
  opacity: 0;
  pointer-events: none;
  z-index: 1600;
  border: 1.5px solid rgba(47, 140, 47, .22);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,255,246,.98)),
    radial-gradient(circle at top left, rgba(58,148,48,.16), transparent 44%);
  box-shadow: 0 18px 38px rgba(27, 60, 28, .18), 0 5px 12px rgba(47, 140, 47, .12);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(14px);
  transition: transform .34s cubic-bezier(.2,.9,.25,1), opacity .24s ease;
}

.in-app-notification.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.in-app-notification-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  flex: 0 0 auto;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12), 0 7px 13px rgba(47, 140, 47, .22);
}

.in-app-notification-icon img {
  display: block;
  height: 28px;
  object-fit: contain;
  width: 28px;
}

.in-app-notification-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.in-app-notification-copy strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.in-app-notification-copy small {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Photo Picker Sheet === */
.photo-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1100;
}

.photo-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.photo-sheet {
  position: fixed;
  left: 50%;
  bottom: 18px;
  width: min(390px - 24px, calc(100vw - 24px));
  max-width: 366px;
  transform: translateX(-50%) translateY(120%);
  background: #fff;
  border-radius: var(--radius);
  border: 1.5px solid var(--card-border);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  padding: 12px;
  transition: transform 0.22s ease;
  z-index: 1200;
}

.photo-sheet.show {
  transform: translateX(-50%) translateY(0);
}

.photo-sheet-handle {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: #d8d8d8;
  margin: 0 auto 10px;
}

.photo-sheet-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 10px;
}

.photo-sheet-option,
.photo-sheet-cancel {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  border: 1.5px solid var(--card-border);
  background: #fff;
  color: var(--text-primary);
}

.photo-sheet-option + .photo-sheet-option {
  margin-top: 8px;
}

.photo-sheet-cancel {
  margin-top: 10px;
  background: #f7f7f7;
  color: var(--text-secondary);
}

.charge-confirm-sheet {
  padding: 12px 12px 14px;
}

.charge-confirm-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 3px;
  text-align: left;
}

.charge-confirm-subtitle {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 12px;
}

.charge-confirm-summary {
  background: #f7f4ec;
  border: 1px solid #ece5d8;
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}

.charge-confirm-row {
  align-items: center;
  border-bottom: 1px solid #e8e1d4;
  display: grid;
  gap: 10px;
  grid-template-columns: 82px minmax(0, 1fr);
  min-height: 38px;
  padding: 9px 12px;
}

.charge-confirm-row:last-child {
  border-bottom: 0;
}

.charge-confirm-row-emphasis,
.charge-confirm-fee-total {
  background: #fff;
}

.charge-confirm-fee-detail {
  min-height: 30px;
  padding-block: 6px;
}

.charge-confirm-fee-detail .charge-confirm-label,
.charge-confirm-fee-detail .charge-confirm-value {
  color: #77746c;
  font-size: 11px;
}

.charge-confirm-row-total {
  background: #eff9ec;
  border-top: 1px solid #cfe7c9;
}

.charge-confirm-label {
  color: #66645e;
  font-size: 12px;
  font-weight: 800;
}

.charge-confirm-value {
  color: #141414;
  font-size: 12px;
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.charge-confirm-value.positive {
  color: #159c36;
  font-size: 14px;
}

.charge-confirm-account {
  color: #141414;
  display: flex;
  flex-direction: column;
  font-weight: 900;
  line-height: 1.25;
  min-width: 0;
  text-align: right;
}

.charge-confirm-account strong {
  color: #141414;
  font-size: 12px;
  font-weight: 900;
}

.charge-confirm-account em {
  color: #141414;
  font-family: monospace;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  word-break: break-all;
}

.charge-confirm-warning {
  align-items: flex-start;
  background: #fff6df;
  border: 1px solid #ffe3aa;
  border-radius: var(--radius);
  color: #a45d00;
  display: flex;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  margin: 10px 0 12px;
  padding: 10px 12px;
}

.charge-confirm-warning-icon {
  align-items: center;
  border: 1.5px solid #ff9f2f;
  border-radius: 50%;
  color: #ff8a00;
  display: inline-flex;
  flex: 0 0 14px;
  font-size: 10px;
  font-weight: 900;
  height: 14px;
  justify-content: center;
  line-height: 1;
  margin-top: 1px;
}

.charge-confirm-warning strong {
  color: #e53935;
  font-weight: 900;
}

.charge-confirm-pay {
  background: #35a832;
  border-color: #35a832;
  color: #fff;
  margin-top: 0;
}

.charge-confirm-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.charge-confirm-actions .photo-sheet-option,
.charge-confirm-actions .photo-sheet-cancel {
  height: 46px;
  margin: 0;
  min-height: 46px;
  width: 100%;
}

.charge-confirm-cancel {
  background: #fff;
  border: 1px solid #b9d8b3;
  color: #2f7f20;
  font-weight: 900;
}

/* ==========================================
   APP DIALOG
   ========================================== */
.app-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  background: rgba(0, 0, 0, 0.42);
}

.app-dialog-backdrop.show {
  display: block;
}

.app-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 10001;
  width: min(340px, calc(100vw - 48px));
  display: none;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-white);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  padding: 20px;
}

.app-dialog.show {
  display: block;
}

.app-dialog-title {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 10px;
}

.app-dialog-message {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  white-space: pre-line;
}

.app-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.app-dialog-btn {
  min-width: 76px;
  height: 40px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.app-dialog-btn-cancel {
  border: 1.5px solid var(--card-border);
  background: var(--bg-white);
  color: var(--text-secondary);
}

.app-dialog-btn-cancel.is-hidden {
  display: none;
}

.app-dialog-btn-confirm {
  border: 1.5px solid var(--green-primary);
  background: var(--green-primary);
  color: #fff;
}

/* ==========================================
   COUNTDOWN TIMER
   ========================================== */
.countdown {
  font-size: 13px;
  color: #e53935;
  font-weight: 600;
  margin-top: 6px;
  height: 18px;
}

/* ==========================================
   LOADING SPINNER
   ========================================== */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==========================================
   RESPONSIVE (Full screen on small devices)
   ========================================== */

/* 모바일 기기에서는 완전히 전체화면으로 */
@media (max-width: 480px) {
  #app-shell {
    position: fixed;
    inset: 0;
    background: var(--bg-white);
    display: block;
  }

  .phone-frame {
    width: 100vw;
    width: 100dvw;
    height: calc(100vh - 10px);
    height: calc(100dvh - 10px);
    margin-top: 6px;
    border-radius: 0;
    box-shadow: none;
  }

  .screen-container {
    height: 100%;
  }

  .bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2147483647;
  }

  .scrollable-content {
    padding-bottom: calc(var(--bottom-nav-height) + var(--app-bottom-inset) + 10px) !important;
  }
}

/* ==========================================
   SPLASH PREMIUM ANIMATIONS
   ========================================== */
.splash-img-premium {
  opacity: 0;
  animation: splashLogoEnter 600ms cubic-bezier(.22, 1, .36, 1) forwards;
}

.splash-bike-hero {
  opacity: 0;
  animation: splashBikeEnter 700ms cubic-bezier(.22, 1, .36, 1) 120ms forwards;
}

.splash-tagline-premium {
  opacity: 0;
  animation: splashFadeInUp 560ms cubic-bezier(.22, 1, .36, 1) 260ms forwards;
}

@keyframes splashLogoEnter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes splashBikeEnter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes splashFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash-img-premium,
  .splash-bike-hero,
  .splash-tagline-premium {
    animation-duration: 1ms;
    animation-delay: 0ms;
    transform: none;
  }
}

.signup-celebration {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.96), rgba(244,255,242,.86) 42%, rgba(234,247,232,.34) 78%);
  animation: signupCelebrationFade 1.85s ease both;
}

.signup-celebration-card {
  position: relative;
  z-index: 2;
  min-width: 238px;
  padding: 24px 22px 22px;
  border: 1.5px solid rgba(58,148,48,.2);
  border-radius: 26px;
  text-align: center;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 46px rgba(33,82,32,.18);
  transform-origin: center;
  animation: signupCelebrationPop 1.45s cubic-bezier(.2,.9,.2,1) both;
}

.signup-celebration-badge {
  width: 68px;
  height: 68px;
  margin: 0 auto 12px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  background: linear-gradient(135deg, #3db43a, #2ac1bc);
  box-shadow: 0 12px 22px rgba(58,148,48,.28);
  animation: signupBadgeBounce 1.25s ease both;
}

.signup-celebration-title {
  font-size: 21px;
  font-weight: 900;
  color: #163814;
  letter-spacing: -.5px;
  margin-bottom: 6px;
}

.signup-celebration-text {
  font-size: 13px;
  font-weight: 800;
  color: #5d6a59;
  line-height: 1.45;
}

.signup-confetti {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 9px;
  height: 15px;
  border-radius: 3px;
  background: var(--confetti-color, #3db43a);
  transform: translate(-50%, -50%) rotate(var(--confetti-rotate, 0deg));
  animation: signupConfettiBurst 1.55s cubic-bezier(.12,.78,.18,1) forwards;
  animation-delay: var(--confetti-delay, 0s);
  opacity: 0;
}

.signup-confetti.round {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.confetti-path-0 { --confetti-x: 114px; --confetti-y: 38px; }
.confetti-path-1 { --confetti-x: 136px; --confetti-y: 96px; }
.confetti-path-2 { --confetti-x: 76px; --confetti-y: 158px; }
.confetti-path-3 { --confetti-x: 0px; --confetti-y: 186px; }
.confetti-path-4 { --confetti-x: -92px; --confetti-y: 152px; }
.confetti-path-5 { --confetti-x: -142px; --confetti-y: 92px; }
.confetti-path-6 { --confetti-x: -128px; --confetti-y: 30px; }
.confetti-path-7 { --confetti-x: -92px; --confetti-y: -42px; }
.confetti-path-8 { --confetti-x: -22px; --confetti-y: -86px; }
.confetti-path-9 { --confetti-x: 52px; --confetti-y: -74px; }
.confetti-path-10 { --confetti-x: 122px; --confetti-y: -24px; }
.confetti-path-11 { --confetti-x: 156px; --confetti-y: 44px; }
.confetti-color-0 { --confetti-color: #3db43a; }
.confetti-color-1 { --confetti-color: #2ac1bc; }
.confetti-color-2 { --confetti-color: #ffd34d; }
.confetti-color-3 { --confetti-color: #ff6b6b; }
.confetti-color-4 { --confetti-color: #377dff; }
.confetti-color-5 { --confetti-color: #ffffff; }
.confetti-rotate-0 { --confetti-rotate: 0deg; }
.confetti-rotate-1 { --confetti-rotate: 34deg; }
.confetti-rotate-2 { --confetti-rotate: 68deg; }
.confetti-rotate-3 { --confetti-rotate: 104deg; }
.confetti-rotate-4 { --confetti-rotate: 142deg; }
.confetti-rotate-5 { --confetti-rotate: 178deg; }
.confetti-rotate-6 { --confetti-rotate: 216deg; }
.confetti-rotate-7 { --confetti-rotate: 252deg; }
.confetti-delay-0 { --confetti-delay: 0s; }
.confetti-delay-1 { --confetti-delay: .018s; }
.confetti-delay-2 { --confetti-delay: .036s; }
.confetti-delay-3 { --confetti-delay: .054s; }
.confetti-delay-4 { --confetti-delay: .072s; }
.confetti-delay-5 { --confetti-delay: .09s; }
.confetti-delay-6 { --confetti-delay: .108s; }
.confetti-delay-7 { --confetti-delay: .126s; }
.confetti-delay-8 { --confetti-delay: .144s; }

.signup-firework-ring {
  position: absolute;
  left: var(--ring-x, 50%);
  top: var(--ring-y, 42%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--ring-color, rgba(58,148,48,.55));
  transform: translate(-50%, -50%) scale(.2);
  animation: signupFireworkRing 1.15s ease-out forwards;
  animation-delay: var(--ring-delay, 0s);
  opacity: 0;
}

.signup-ring-0 { --ring-x: 50%; --ring-y: 44%; --ring-color: #3db43a; --ring-delay: 0s; }
.signup-ring-1 { --ring-x: 34%; --ring-y: 36%; --ring-color: #2ac1bc; --ring-delay: .08s; }
.signup-ring-2 { --ring-x: 66%; --ring-y: 38%; --ring-color: #ffd34d; --ring-delay: .14s; }
.signup-ring-3 { --ring-x: 45%; --ring-y: 57%; --ring-color: #ff6b6b; --ring-delay: .2s; }
.signup-ring-4 { --ring-x: 58%; --ring-y: 56%; --ring-color: #377dff; --ring-delay: .24s; }

.cs-faq-tab {
  flex: 0 0 auto;
  border: 1.5px solid #d7ead9;
  border-radius: 999px;
  background: #fff;
  color: #5a6b56;
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cs-faq-tab.active {
  border-color: var(--green-primary);
  background: linear-gradient(135deg, #3db43a, #2f9630);
  color: #fff;
  box-shadow: 0 8px 18px rgba(58,148,48,.2);
  transform: translateY(-2px);
}

.cs-faq-tab:active {
  transform: scale(.96);
}

.cs-faq-tab.active:active {
  transform: translateY(-1px) scale(.98);
}

.cs-faq-item {
  overflow: hidden;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--card-shadow);
}

.cs-faq-question {
  width: 100%;
  border: none;
  background: #fff;
  padding: 15px 14px;
  display: grid;
  grid-template-columns: 20px 1fr 18px;
  gap: 8px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}

.cs-faq-q,
.cs-faq-a {
  color: var(--green-primary);
  font-size: 13px;
  font-weight: 900;
}

.cs-faq-question-text {
  color: #172617;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
}

.cs-faq-chevron {
  justify-self: center;
  width: 7px;
  height: 7px;
  border-right: 1.8px solid #7d8b78;
  border-bottom: 1.8px solid #7d8b78;
  transform: rotate(45deg) translateY(-2px);
  transform-origin: center;
  transition: transform .24s cubic-bezier(.22,.72,.18,1), border-color .2s ease;
}

.cs-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  border-top: 1px solid transparent;
  transition: grid-template-rows .34s cubic-bezier(.22,.72,.18,1), border-color .24s ease;
}

.cs-faq-answer-inner {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  padding: 0 14px;
  color: #617061;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity .22s ease, transform .3s cubic-bezier(.22,.72,.18,1), padding .3s cubic-bezier(.22,.72,.18,1);
}

.cs-faq-item.open .cs-faq-answer {
  grid-template-rows: 1fr;
  border-top-color: #e6f2e4;
}

.cs-faq-item.open .cs-faq-answer-inner {
  padding: 13px 14px 15px;
  opacity: 1;
  transform: translateY(0);
}

.cs-faq-item.open .cs-faq-chevron {
  border-color: var(--green-primary);
  transform: rotate(225deg) translateY(-1px);
}

.cs-faq-answer-text {
  white-space: normal;
  word-break: keep-all;
}

.cs-faq-empty {
  border: 1.5px dashed #d5ead3;
  border-radius: var(--radius);
  background: #fbfffa;
  padding: 28px 18px;
  text-align: center;
}

.cs-empty-title {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 6px;
}

.cs-empty-desc {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.cs-empty-loading {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.cs-empty-spinner {
  border-top-color: var(--green-primary);
  height: 26px;
  margin: 0 auto 10px;
  width: 26px;
}

.cs-empty-retry {
  background: var(--green-primary);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 10px 14px;
}

.cs-main-content {
  min-height: 100%;
  padding: 0 24px 16px;
  display: flex;
  flex-direction: column;
}

.cs-main-hero,
.cs-main-card {
  border: 1.5px solid var(--card-border);
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.cs-main-hero {
  width: 100%;
  min-height: 88px;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background:
    radial-gradient(circle at 88% 16%, rgba(56, 180, 72, .16), transparent 34%),
    linear-gradient(145deg, #f3fbef 0%, #ffffff 100%);
  box-shadow: var(--card-shadow);
}

.cs-main-hero-kicker {
  color: var(--green-primary);
  font-size: 12px;
  font-weight: 900;
}

.cs-main-hero-title {
  color: #162516;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.4px;
}

.cs-main-hero-desc {
  color: #6c7b69;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  word-break: keep-all;
}

.cs-main-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.cs-main-card {
  min-height: 84px;
  border-radius: var(--radius);
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  box-shadow: var(--card-shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}

.cs-main-hero:active,
.cs-main-card:active {
  transform: translateY(1px) scale(.99);
  box-shadow: var(--card-shadow-active);
}

.cs-main-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 21px;
  padding: 0 7px;
  border-radius: 999px;
  background: #eef9eb;
  color: #2f8c2f;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.cs-main-card-icon.notice {
  background: #fff4e4;
  color: #c9781a;
}

.cs-main-card-icon.naver-talk {
  background: #e6fbef;
  color: #03a94d;
}

.cs-main-card-icon.faq {
  background: #eef6ff;
  color: #2a6ab3;
}

.cs-main-card-title {
  color: #1f2b1f;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

.cs-main-card-desc {
  color: #7a8877;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}

.cs-main-contact {
  margin: 2px 0 12px;
  padding: 10px 8px 11px;
  border-top: 1px solid #e2f0df;
  border-bottom: 1px solid #e2f0df;
  background: transparent;
}

.my-main-content {
  min-height: 100%;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.my-store-name {
  padding: 0 24px;
  margin-bottom: 16px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 800;
}

.my-menu-card {
  margin: 0 24px 12px;
  padding: 16px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-white);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.my-menu-card.is-hidden {
  display: none;
}

.my-menu-card:active {
  background: #fbfffa;
  transform: translateY(1px);
}

.my-menu-card-primary {
  border-color: #bfe8c0;
  background: #f8fdf8;
  box-shadow: var(--card-shadow);
}

.my-menu-title {
  margin-bottom: 4px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 900;
}

.my-menu-card-primary .my-menu-title {
  color: var(--green-dark);
}

.my-menu-desc {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.my-contact-info {
  margin: 14px 24px 0;
  padding-top: 16px;
  border-top: 1px solid #e5eee2;
}

.my-contact-info div {
  margin-bottom: 4px;
  color: var(--green-dark);
  font-size: 22px;
  font-weight: 900;
}

.my-contact-info span {
  color: var(--green-primary);
}

.my-contact-info small {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.eromnet-notice {
  margin: 14px 24px 0;
  padding: 11px 12px;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-white);
  color: var(--text-secondary);
  box-shadow: var(--card-shadow);
  display: grid;
  grid-template-columns: minmax(0, 112px) minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  text-align: left;
}

.screen > .eromnet-notice {
  flex-shrink: 0;
  margin: 0 24px 8px;
  z-index: 29;
}

.cs-main-content > .cs-eromnet-notice {
  margin: auto 0 8px;
}

#screen-my > .bottom-nav,
#screen-cs-main > .bottom-nav {
  position: relative;
  flex-shrink: 0;
}

.eromnet-logo {
  display: block;
  width: 100%;
  max-width: 112px;
  height: auto;
  margin: 0;
  grid-row: 1 / span 2;
}

.eromnet-notice strong,
.eromnet-notice span {
  display: block;
  grid-column: 2;
}

.eromnet-notice strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 900;
}

.eromnet-notice span {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 800;
}

.cs-eromnet-notice {
  margin: 0 24px 8px;
}

.contact-hours {
  color: var(--text-muted) !important;
  display: grid;
  grid-template-columns: max-content 34px max-content;
  column-gap: 4px;
  row-gap: 2px;
  align-items: baseline;
  text-align: left;
  width: fit-content;
}

.my-contact-info .contact-hours,
.cs-contact-footer .contact-hours,
.cs-main-contact-text .contact-hours {
  margin-left: auto;
  margin-right: auto;
}

.contact-hours span {
  color: var(--text-muted) !important;
  line-height: 1.35;
  white-space: nowrap;
}

.contact-hours-day {
  text-align: right;
}

.cs-contact-footer {
  margin-top: 16px;
  padding: 16px 8px 0;
  border-top: 1px solid #e5eee2;
}

.cs-contact-footer.centered {
  text-align: center;
}

.cs-contact-footer div {
  margin-bottom: 4px;
  color: var(--green-dark);
  font-size: 21px;
  font-weight: 900;
  line-height: 1.1;
}

.cs-contact-footer span {
  color: var(--green-primary);
}

.cs-phone-link {
  color: var(--green-primary);
  text-decoration: none;
  font: inherit;
  font-weight: inherit;
  -webkit-tap-highlight-color: rgba(58, 148, 48, .16);
}

.cs-phone-link:active {
  opacity: .72;
}

.cs-contact-footer small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.cs-main-contact-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.cs-main-contact-text > span:first-child {
  align-self: flex-start;
  text-align: left;
}

.cs-main-contact-text span {
  color: #536250;
  font-size: 12px;
  font-weight: 900;
}

.cs-main-contact-text strong {
  color: var(--green-dark);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.7px;
  line-height: 1.05;
}

.cs-main-contact-text small {
  color: #7a8877;
  font-size: 11px;
  font-weight: 800;
}

.cs-main-contact-text .contact-hours {
  align-self: flex-end;
  margin-left: 0;
  margin-right: 0;
}

.cs-main-help-title {
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cs-main-help-title strong {
  color: #1f2b1f;
  font-size: 15px;
  font-weight: 900;
}

.cs-main-help-title span {
  color: #7a8877;
  font-size: 11px;
  font-weight: 800;
}

.cs-main-header {
  border-bottom: none;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 4px;
  margin-bottom: 24px;
  padding: 20px 24px 8px;
}

.cs-main-logo {
  align-self: flex-start;
  height: 36px;
  width: auto;
}

.cs-main-tagline {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
}

.cs-sub-header {
  border-bottom: none;
  margin-bottom: 16px;
  padding-bottom: 8px;
}

.cs-sub-content {
  padding: 0 20px 100px;
}

.cs-sub-content.wide {
  padding-left: 24px;
  padding-right: 24px;
}

.cs-sub-title-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.cs-sub-kicker {
  color: var(--green-dark);
  font-size: 16px;
  font-weight: 900;
}

.cs-sub-title {
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 900;
}

.cs-sub-desc {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.cs-simple-title-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 20px;
}

.cs-simple-title {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 800;
}

.cs-installment-list {
  background: var(--bg-white);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  padding: 8px 16px;
}

.cs-installment-empty {
  padding: 26px 8px;
  text-align: center;
}

.cs-installment-empty-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 6px;
}

.cs-installment-empty-desc {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.cs-installment-row {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 15px 0;
}

.cs-installment-row:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}

.cs-installment-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cs-installment-company {
  align-items: center;
  color: var(--text-primary);
  display: flex;
  font-size: 14px;
  font-weight: 900;
  gap: 7px;
}

.cs-installment-max {
  color: var(--green-dark);
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 900;
}

.cs-installment-months {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 1px;
}

.cs-installment-label {
  flex: 0 0 auto;
  color: #7a8877;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  margin-right: 1px;
}

.cs-installment-chip {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 7px;
  border: 1px solid #d8ead8;
  background: #f7fbf6;
  color: #42613f;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.2px;
}

.cs-installment-chip.month-2 {
  border-color: #c9eee0;
  background: #effbf6;
  color: #27775d;
}

.cs-installment-chip.month-3 {
  border-color: #d5eacb;
  background: #f4fbef;
  color: #4f7339;
}

.cs-installment-chip.month-4 {
  border-color: #f0e5bd;
  background: #fffaf0;
  color: #80622a;
}

.cs-installment-chip.month-5 {
  border-color: #cfe8f4;
  background: #f2faff;
  color: #3f6f88;
}

.cs-installment-chip.month-6 {
  border-color: #f2d4d8;
  background: #fff5f6;
  color: #8a5660;
}

.cs-installment-chip.month-7,
.cs-installment-chip.month-8 {
  border-color: #e1d9f2;
  background: #faf7ff;
  color: #66588e;
}

.cs-installment-chip.month-9,
.cs-installment-chip.month-10,
.cs-installment-chip.month-11,
.cs-installment-chip.month-12 {
  border-color: #d9e3ef;
  background: #f6f9fd;
  color: #53677d;
}

.cs-installment-chip.partial {
  border-color: #f2d28a;
  background: #fffaf0;
  color: #8a5b00;
}

.cs-installment-common {
  border-top: 1px solid var(--border-light);
  padding: 14px 0 6px;
  margin-top: 4px;
}

.cs-installment-common-note {
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 8px;
}

.cs-installment-exclusion-title {
  color: #5f6f60;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 6px;
}

.cs-installment-exclusion-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cs-installment-exclusion-list span {
  border: 1px solid #d9e8d9;
  background: #f8fbf8;
  border-radius: 999px;
  color: #647064;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.cs-notice-table {
  overflow: hidden;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--card-shadow);
}

.cs-notice-table-head,
.cs-notice-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 78px;
  align-items: center;
  gap: 8px;
}

.cs-notice-table-head {
  min-height: 38px;
  padding: 0 12px;
  background: #f1fbef;
  border-bottom: 1px solid #dcefd8;
  color: #2f7d32;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.cs-notice-table-head span:nth-child(2) {
  text-align: left;
}

.cs-notice-row {
  width: 100%;
  min-height: 48px;
  border: none;
  border-bottom: 1px solid #edf5eb;
  background: #fff;
  padding: 9px 12px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.cs-notice-row:last-child {
  border-bottom: none;
}

.cs-notice-row:active {
  background: #f8fcf7;
}

.cs-notice-no {
  color: #7a8877;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.cs-notice-row-title {
  color: #172617;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-notice-row-date {
  color: #7a8877;
  font-size: 10px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.cs-notice-pagination {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cs-notice-page {
  width: 30px;
  height: 30px;
  border: 1.5px solid #d5ead3;
  border-radius: 9px;
  background: #fff;
  color: #52734d;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.cs-notice-page.active {
  border-color: var(--green-primary);
  background: var(--green-primary);
  color: #fff;
}

.cs-guide-pagination {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cs-guide-page {
  width: 30px;
  height: 30px;
  border: 1.5px solid #d5ead3;
  border-radius: 9px;
  background: #fff;
  color: #52734d;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.cs-guide-page.active {
  border-color: var(--green-primary);
  background: var(--green-primary);
  color: #fff;
}

.cs-notice-empty {
  border: 1.5px dashed #d5ead3;
  border-radius: var(--radius);
  background: #fbfffa;
  padding: 28px 18px;
  text-align: center;
}

.cs-notice-detail-meta {
  margin-bottom: 12px;
  color: #7a8877;
  font-size: 12px;
  font-weight: 800;
}

.cs-notice-detail-image {
  border-radius: 10px;
  display: block;
  height: 160px;
  margin-bottom: 14px;
  object-fit: cover;
  width: 100%;
}

.cs-notice-detail-body {
  color: #243324;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.75;
  text-align: left;
  word-break: keep-all;
}

.cs-guide-item {
  width: 100%;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #ffffff 0%, #fbfffa 100%);
  padding: 15px 14px;
  display: grid;
  grid-template-columns: 1fr 16px;
  gap: 10px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cs-guide-item:active {
  transform: scale(.985);
}

.cs-guide-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-guide-badge {
  width: fit-content;
  border: 1px solid #d5eacb;
  border-radius: 999px;
  background: #f4fbef;
  color: #4f7339;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.cs-guide-title {
  color: #172617;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
}

.cs-guide-meta {
  color: #7a8877;
  font-size: 11px;
  font-weight: 800;
}

.cs-guide-arrow {
  justify-self: center;
  width: 7px;
  height: 7px;
  border-right: 1.8px solid #7d8b78;
  border-bottom: 1.8px solid #7d8b78;
  transform: rotate(-45deg);
}

.cs-guide-empty {
  border: 1.5px dashed #d5ead3;
  border-radius: var(--radius);
  background: #fbfffa;
  padding: 28px 18px;
  text-align: center;
}

.cs-guide-detail-meta {
  margin-bottom: 12px;
  color: #7a8877;
  font-size: 12px;
  font-weight: 800;
}

.cs-guide-detail-body {
  color: #243324;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.75;
  text-align: left;
  word-break: keep-all;
}

.cs-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.cs-guide-card {
  position: relative;
  min-height: 132px;
  width: 100%;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: linear-gradient(145deg, #ffffff 0%, #fbfff9 100%);
  box-shadow: var(--card-shadow);
  padding: 15px 28px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cs-guide-card:active {
  transform: translateY(1px) scale(.99);
  box-shadow: var(--card-shadow-active);
}

.cs-guide-chip {
  border: 1px solid #cbe8c6;
  border-radius: 999px;
  background: #f4fbef;
  color: #2f8c2f;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
}

.cs-guide-card-title {
  color: #172617;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  word-break: keep-all;
}

.cs-guide-card-meta {
  margin-top: auto;
  color: #7a8877;
  font-size: 10px;
  font-weight: 800;
}

.cs-guide-card .cs-guide-arrow {
  position: absolute;
  right: 13px;
  top: 50%;
  margin-top: -4px;
}

@keyframes signupCelebrationFade {
  0% { opacity: 0; }
  10%, 82% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes signupCelebrationPop {
  0% { opacity: 0; transform: translateY(18px) scale(.86); }
  18% { opacity: 1; transform: translateY(0) scale(1.04); }
  36%, 84% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(.98); }
}

@keyframes signupBadgeBounce {
  0% { transform: scale(.55) rotate(-10deg); }
  42% { transform: scale(1.08) rotate(4deg); }
  70%, 100% { transform: scale(1) rotate(0deg); }
}

@keyframes signupConfettiBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.4) rotate(var(--confetti-rotate, 0deg));
  }
  12% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--confetti-x, 0px)), calc(-50% + var(--confetti-y, 0px))) scale(1) rotate(calc(var(--confetti-rotate, 0deg) + 360deg));
  }
}

@keyframes signupFireworkRing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  20% { opacity: .85; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(5.4); }
}

.friendly-map-marker-pulse {
  position: relative;
  width: 58px;
  height: 58px;
  pointer-events: none;
}

.friendly-map-pulse-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(46, 160, 58, .45);
  border-radius: 999px;
  background: rgba(46, 160, 58, .12);
  transform: translate(-50%, -50%) scale(.45);
  animation: friendlyMapPulse 1.9s ease-out infinite;
}

.friendly-map-pulse-ring-delay {
  animation-delay: .72s;
}

.friendly-map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: linear-gradient(145deg, #39b54a, #1f7f31);
  box-shadow: 0 8px 18px rgba(25, 100, 35, .28);
  transform: translate(-50%, -68%) rotate(-45deg);
  animation: friendlyMapPinFloat 1.9s ease-in-out infinite;
}

.friendly-map-pin::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

@keyframes friendlyMapPulse {
  0% {
    opacity: .72;
    transform: translate(-50%, -50%) scale(.38);
  }
  72% {
    opacity: .12;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.18);
  }
}

@keyframes friendlyMapPinFloat {
  0%, 100% { transform: translate(-50%, -68%) rotate(-45deg) scale(1); }
  50% { transform: translate(-50%, -76%) rotate(-45deg) scale(1.04); }
}

.app-managed-banner {
  position: relative;
}

.app-managed-banner-slot[hidden] {
  display: none !important;
}

.app-managed-banner-slot-image {
  width: calc(100% - 24px);
  height: auto;
  margin: 0 12px 8px;
  aspect-ratio: 45 / 8;
}

.app-managed-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: -42%;
  width: 34%;
  height: 100%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.48), rgba(255,255,255,0));
  transform: skewX(-18deg);
  animation: appManagedBannerShine 5.8s ease-in-out infinite;
  pointer-events: none;
}

.app-managed-banner-image-card {
  width: calc(100% - 32px);
  margin: 0 16px 16px;
  height: auto;
  aspect-ratio: 45 / 8;
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  padding: 0;
  box-sizing: border-box;
  display: block;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}

.app-managed-banner-slot-image .app-managed-banner-image-card {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
}

.app-managed-banner-debug-frame {
  border: 1.5px solid var(--card-border);
  background: rgba(3, 199, 90, .03);
}

.app-managed-banner-image-card::after {
  display: none;
}

.app-managed-banner-text-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 32px);
  margin: 0 16px 16px;
  padding: 13px 14px;
  overflow: hidden;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f8fff6 0%, #eaf8e8 100%);
  box-shadow: var(--card-shadow);
  text-align: left;
  cursor: pointer;
}

.app-managed-banner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 6px;
  border: 1px solid #dcebdc;
  border-radius: 8px;
  background: #fff;
}

.app-managed-banner-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.app-managed-banner-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.app-managed-banner-title {
  overflow: hidden;
  color: #12351b;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-managed-banner-subtitle {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.app-managed-banner-arrow {
  color: #3a9430;
  font-size: 18px;
  font-weight: 900;
}

.app-managed-banner-image {
  animation: appManagedBannerFloat 4.8s ease-in-out infinite;
}

.app-managed-banner-full-image {
  width: 100%;
  height: 100%;
  margin: 0;
  min-height: 0;
  max-height: 100%;
  aspect-ratio: auto;
  display: block;
  object-fit: cover;
  object-position: center center;
  animation: none;
}

.app-managed-banner.is-detail .app-managed-banner-image {
  animation: appManagedBannerFloat 4.8s ease-in-out infinite;
  filter: saturate(1.03);
}

.app-banner-detail-image {
  display: block;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 45 / 8;
  object-fit: contain;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  margin: 0 auto 10px;
}

.app-banner-detail-text {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
  text-align: center;
}

@keyframes appManagedBannerShine {
  0%, 28% { left: -42%; opacity: 0; }
  42% { opacity: .9; }
  58%, 100% { left: 108%; opacity: 0; }
}

@keyframes appManagedBannerFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .signup-celebration,
  .signup-celebration-card,
  .signup-celebration-badge,
  .signup-confetti,
  .signup-firework-ring,
  .friendly-map-pulse-ring,
  .friendly-map-pin,
  .weather-art,
  .weather-art-cloud,
  .weather-art-rain i,
  .weather-art-snow i,
  .weather-art-bolt,
  .weather-art-fog,
  .app-managed-banner::after,
  .app-managed-banner-image {
    animation-duration: .01ms !important;
  }
}











/* Eats GO one-line headline copy */
.header-logo .tagline,
.app-header .tagline,
.auth-headline {
  white-space: nowrap;
  word-break: keep-all;
}

.header-logo .tagline,
.app-header .tagline {
  font-size: 12px !important;
  letter-spacing: -0.2px;
}

.auth-headline {
  font-size: 18px !important;
  letter-spacing: -0.35px;
}

.login-approval-gate{margin-bottom:18px;padding:16px;border:1px solid #b9dfb1;border-radius:10px;background:#f3fbf1;text-align:left}.login-approval-gate[hidden]{display:none}.login-approval-gate strong{display:block;color:#206f20;font-size:16px}.login-approval-gate p{margin:7px 0 14px;color:#506050;font-size:13px;line-height:1.5}.login-approval-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.login-approval-actions button{min-height:42px;font-size:12px}.auth-content.is-approval-locked #login-id,.auth-content.is-approval-locked #login-pw,.auth-content.is-approval-locked #login-pw-toggle,.auth-content.is-approval-locked #login-submit-btn,.auth-content.is-approval-locked #keep-login-row{opacity:.48;pointer-events:none}.auth-content.is-approval-locked #to-register,.auth-content.is-approval-locked .auth-links{display:none}
.login-approval-gate .login-approval-live-status{margin:-5px 0 12px;color:#23832b;font-size:12px;font-weight:700}.vaccount-optional-label{display:inline-flex;margin-left:5px;padding:2px 6px;border-radius:999px;background:#eef8eb;color:#2f7f20;font-size:10px;font-weight:700;vertical-align:middle}

/* Payment history: keep the secondary header action compact beside the title. */
.payment-history-title-row {
  gap: 12px;
}

.payment-history-title-stack {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 360px) {
  .payment-history-title-row {
    gap: 8px;
    padding-inline: 18px;
  }

  .payment-history-title {
    font-size: 15px;
  }

}
.vaccount-list-add-btn,
#add-vaccount-submit {
  min-height: 44px;
}

/* === Member home: payment-first tile layout === */
#screen-home {
  --home-green: #46a928;
  --home-green-dark: #2f7f20;
  --home-green-soft: #eef8eb;
  --home-border: #dcebd9;
  --home-surface: #ffffff;
  --home-muted: #738071;
}

#screen-home .home-header {
  padding: 18px 20px 10px;
  background: #f6f8f5;
}

#screen-home .home-auth-action {
  min-height: 36px;
  padding: 0 4px;
}

.home-tile-layout {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 12px;
  padding: 8px 16px calc(var(--bottom-nav-height) + var(--app-bottom-inset) + 30px);
  background: #f6f8f5;
}

.home-tile {
  min-width: 0;
  border: 1px solid var(--home-border);
  border-radius: 16px;
  background: var(--home-surface);
  box-shadow: 0 8px 24px rgba(26, 79, 28, .055);
}

.home-payment-tile {
  padding: 20px;
  overflow: hidden;
  border-color: var(--home-green-dark);
  color: #fff;
  background:
    radial-gradient(circle at 94% 0%, rgba(255, 255, 255, .18), transparent 34%),
    linear-gradient(145deg, var(--home-green-dark) 0%, var(--home-green) 100%);
  box-shadow: 0 14px 28px rgba(47, 127, 32, .2);
}

.home-tile-heading,
.home-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.home-tile-heading h2 {
  margin-top: 4px;
  color: inherit;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.4px;
}

.home-tile-eyebrow {
  display: block;
  color: #6d7c6b;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .02em;
}

.home-payment-tile .home-tile-eyebrow {
  color: rgba(255, 255, 255, .76);
}

.home-status-chip {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 999px;
  color: #fff;
  background: rgba(14, 60, 12, .24);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
}

.home-status-chip.is-overdue,
.home-status-chip.is-error {
  color: #fff3f3;
  background: rgba(151, 28, 28, .5);
}

.home-status-chip.is-complete {
  color: #174814;
  background: rgba(255, 255, 255, .86);
}

.home-payment-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 20px;
}

.home-payment-amount strong {
  overflow: hidden;
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1.3px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-payment-amount span {
  font-size: 14px;
  font-weight: 900;
}

#home-payment-caption {
  margin: 8px 0 16px;
  color: rgba(255, 255, 255, .84);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.home-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  color: var(--home-green-dark);
  background: #fff;
  box-shadow: 0 6px 14px rgba(20, 66, 18, .14);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.home-primary-action:disabled {
  opacity: .65;
  cursor: default;
}

.home-payment-benefit {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.home-payment-benefit .home-installment-name,
.home-payment-benefit .home-installment-subtitle {
  color: #fff;
}

.home-payment-benefit .home-installment-subtitle {
  opacity: .74;
}

.home-tile-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.home-summary-tile {
  width: 100%;
  min-height: 128px;
  padding: 16px;
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-summary-tile:hover {
  border-color: #a9d6a0;
  background: #fbfefb;
}

.home-summary-tile:focus-visible {
  outline: 3px solid rgba(70, 169, 40, .22);
  outline-offset: 2px;
}

.home-summary-title {
  display: block;
  margin-top: 8px;
  overflow: hidden;
  color: #172617;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-progress-track {
  height: 7px;
  margin: 16px 0 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6eee4;
}

.home-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--home-green-dark), var(--home-green));
  transition: width .28s ease;
}

.home-bike-number {
  display: block;
  margin-top: 8px;
  overflow: hidden;
  color: var(--home-green-dark);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

    .home-summary-caption {
      display: block;
      margin-top: 8px;
  overflow: hidden;
  color: var(--home-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lease-progress-content-wrap {
      padding: 8px 20px calc(var(--bottom-nav-height) + var(--app-bottom-inset) + 28px);
      overflow-y: auto;
      overflow-x: hidden;
      background: #f6f8f5;
    }

    .lease-progress-title-stack {
      display: grid;
      gap: 5px;
      margin: 8px 0 18px;
    }

    .lease-progress-title-stack > span {
      color: #2f7f20;
      font-size: 11px;
      font-weight: 900;
    }

    .lease-progress-title-stack > strong {
      color: #172617;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -.4px;
    }

    .lease-progress-title-stack > p {
      margin: 0;
      color: var(--home-muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
    }

    #lease-progress-content {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    .lease-progress-hero {
      padding: 18px;
      border: 1px solid var(--home-border);
      border-radius: 16px;
      background: linear-gradient(145deg, #2f7f20 0%, #46a928 100%);
      box-shadow: 0 10px 24px rgba(47, 127, 32, .18);
      color: #fff;
    }

    .lease-progress-hero-heading {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
    }

    .lease-progress-hero-heading span {
      font-size: 12px;
      font-weight: 800;
      line-height: 1.45;
    }

    .lease-progress-hero-heading strong {
      flex: 0 0 auto;
      font-size: 26px;
      font-weight: 900;
      line-height: 1;
    }

    .lease-progress-track {
      display: block;
      width: 100%;
      height: 10px;
      margin: 15px 0 9px;
      overflow: hidden;
      appearance: none;
      border: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, .24);
    }

    .lease-progress-track::-webkit-progress-bar {
      border-radius: 999px;
      background: rgba(255, 255, 255, .24);
    }

    .lease-progress-track::-webkit-progress-value {
      border-radius: 999px;
      background: #fff;
    }

    .lease-progress-track::-moz-progress-bar {
      border-radius: 999px;
      background: #fff;
    }

    .lease-progress-hero small {
      color: rgba(255, 255, 255, .8);
      font-size: 10px;
      font-weight: 800;
    }

    .lease-progress-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .lease-progress-stats > div,
    .lease-progress-section,
    .lease-progress-contract,
    .lease-progress-empty {
      min-width: 0;
      border: 1px solid var(--home-border);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 6px 18px rgba(26, 79, 28, .045);
    }

    .lease-progress-stats > div {
      display: grid;
      align-content: center;
      gap: 5px;
      min-height: 76px;
      padding: 12px;
    }

    .lease-progress-stats span,
    .lease-progress-contract span {
      color: var(--home-muted);
      font-size: 10px;
      font-weight: 800;
    }

    .lease-progress-stats strong,
    .lease-progress-contract strong {
      overflow-wrap: anywhere;
      color: #172617;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.35;
    }

    .lease-progress-stats .is-overdue strong {
      color: #e44040;
    }

    .lease-progress-section {
      overflow: hidden;
    }

    .lease-progress-section > header {
      padding: 12px 14px;
      border-bottom: 1px solid #e6eee4;
      color: #172617;
      font-size: 13px;
      font-weight: 900;
    }

    .lease-progress-next {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, .7fr) minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      padding: 14px;
    }

    .lease-progress-next span {
      color: var(--home-muted);
      font-size: 11px;
      font-weight: 800;
    }

    .lease-progress-next strong,
    .lease-progress-next b {
      color: #172617;
      font-size: 13px;
      font-weight: 900;
      text-align: right;
    }

    .lease-progress-contract {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 4px 14px;
    }

    .lease-progress-contract > div {
      display: grid;
      gap: 4px;
      min-width: 0;
      padding: 12px 0;
      border-bottom: 1px solid #edf3eb;
    }

    .lease-progress-contract > div:nth-last-child(-n + 2) {
      border-bottom: 0;
    }

    .lease-progress-contract > div:nth-child(even) {
      padding-left: 14px;
      border-left: 1px solid #edf3eb;
    }

    .lease-progress-block-reason {
      margin: 0;
      padding: 11px 12px;
      border: 1px solid #f0d797;
      border-radius: 12px;
      color: #8a6414;
      background: #fffaf0;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.45;
    }

    .lease-progress-actions {
      display: grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
      gap: 8px;
    }

    .lease-progress-action,
    .lease-progress-empty button {
      min-height: 46px;
      padding: 0 14px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
    }

    .lease-progress-action.secondary,
    .lease-progress-empty button {
      border: 1px solid #bddfb6;
      color: #2f7f20;
      background: #fff;
    }

    .lease-progress-action.primary {
      border: 1px solid #03c75a;
      color: #fff;
      background: #03c75a;
    }

    .lease-progress-action:disabled {
      border-color: #d8ddd7;
      color: #9aa199;
      background: #ecefec;
      cursor: default;
    }

    .lease-progress-action:focus-visible,
    .lease-progress-empty button:focus-visible {
      outline: 3px solid rgba(3, 199, 90, .24);
      outline-offset: 2px;
    }

    .lease-progress-empty {
      display: grid;
      justify-items: center;
      gap: 8px;
      padding: 38px 20px;
      text-align: center;
    }

    .lease-progress-empty strong {
      color: #172617;
      font-size: 15px;
      font-weight: 900;
    }

    .lease-progress-empty span {
      color: var(--home-muted);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.5;
    }

    .lease-progress-empty.is-error strong {
      color: #d73535;
    }

.member-bike-content-wrap {
  padding: 8px 24px calc(var(--bottom-nav-height) + 28px);
  overflow-y: auto;
}

.member-bike-title-stack {
  display: grid;
  gap: 5px;
  margin: 8px 0 18px;
}

.member-bike-title-stack > span {
  color: #2f7f20;
  font-size: 11px;
  font-weight: 900;
}

.member-bike-title-stack > strong {
  color: #172617;
  font-size: 22px;
  font-weight: 900;
}

.member-bike-title-stack > p {
  margin: 0;
  color: var(--home-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.member-bike-card,
.member-bike-empty {
  border: 1px solid var(--home-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(26, 79, 28, .06);
}

.member-bike-card-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #e4eee2;
}

.member-bike-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: #eff9ec;
  font-size: 24px;
}

.member-bike-card-head > div { display: grid; gap: 3px; min-width: 0; }
.member-bike-card-head > div > span { color: var(--home-muted); font-size: 10px; font-weight: 800; }
.member-bike-card-head > div > strong { overflow: hidden; color: #172617; font-size: 17px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.member-bike-card-head > em { border: 1px solid #bde4b4; border-radius: 999px; padding: 5px 8px; background: #eff9ec; color: #2f7f20; font-size: 10px; font-style: normal; font-weight: 900; }
.member-bike-facts { margin: 0; padding: 4px 16px; }
.member-bike-facts > div { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #edf3eb; }
.member-bike-facts > div:last-child { border-bottom: 0; }
.member-bike-facts dt { color: var(--home-muted); font-size: 11px; font-weight: 800; }
.member-bike-facts dd { margin: 0; color: #172617; font-size: 13px; font-weight: 900; text-align: right; }
.member-bike-empty { display: grid; justify-items: center; gap: 7px; padding: 42px 20px; text-align: center; }
.member-bike-empty strong { color: #172617; font-size: 15px; font-weight: 900; }
.member-bike-empty span { color: var(--home-muted); font-size: 11px; font-weight: 700; line-height: 1.5; }

.home-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.home-quick-actions button {
  display: flex;
  min-width: 0;
  min-height: 68px;
  padding: 9px 4px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--home-border);
  border-radius: 14px;
  color: #314331;
  background: #fff;
  box-shadow: 0 6px 18px rgba(26, 79, 28, .04);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.home-quick-actions button span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 9px;
  color: var(--home-green-dark);
  background: var(--home-green-soft);
  font-size: 13px;
  font-weight: 900;
}

.home-content-section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--home-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(26, 79, 28, .04);
}

.home-section-heading {
  min-height: 48px;
  padding: 14px 16px 10px;
  align-items: center;
}

.home-section-heading h2,
#home-weather-section-title {
  color: #172617;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

.home-section-more {
  min-height: 32px;
  padding: 0 2px 0 10px;
  border: 0;
  color: var(--home-green-dark);
  background: transparent;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

#screen-home .home-weather-location {
  margin: 0;
  gap: 6px;
}

#screen-home #home-weather-location {
  max-width: 124px;
  overflow: hidden;
  color: var(--home-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#screen-home .home-weather-card {
  width: auto;
  margin: 0 12px 12px;
  border-radius: 13px;
  box-shadow: none;
}

#screen-home .home-talk-board {
  border-top: 1px solid #edf3eb;
}

#screen-home .home-talk-row.home-talk-row-card {
  margin: 0;
  padding-inline: 14px;
  border-radius: 0;
}

#screen-home .home-talk-row.home-talk-row-card:last-child {
  border-bottom: 0;
}

#screen-home .home-coway-banner {
  width: 100%;
  margin: 0;
  border-radius: 14px;
  box-shadow: none;
}

#screen-home .app-managed-banner-text-card {
  width: 100%;
  margin: 0;
}

.home-primary-action:focus-visible,
.home-quick-actions button:focus-visible,
.home-section-more:focus-visible {
  outline: 3px solid rgba(3, 199, 90, .28);
  outline-offset: 2px;
}

    @media (max-width: 380px) {
  .home-tile-layout {
    gap: 10px;
    padding-inline: 12px;
  }

  .home-payment-tile {
    padding: 18px;
  }

  .home-payment-amount strong {
    font-size: 32px;
  }

  .home-tile-pair {
    gap: 8px;
  }

  .home-summary-tile {
    min-height: 120px;
    padding: 14px;
  }

  .home-summary-title {
    font-size: 15px;
  }

  .home-quick-actions {
    gap: 6px;
  }

      .home-quick-actions button {
        min-height: 64px;
        font-size: 9px;
      }

      .lease-progress-content-wrap {
        padding-inline: 14px;
      }

      .lease-progress-stats {
        grid-template-columns: minmax(0, 1fr);
      }

      .lease-progress-stats > div {
        min-height: 62px;
      }

      .lease-progress-actions {
        grid-template-columns: minmax(0, 1fr);
      }
    }

@media (prefers-reduced-motion: reduce) {
  .home-tile-layout *,
  .home-progress-track span {
    scroll-behavior: auto;
    transition-duration: .01ms !important;
  }
}

/* organization invite registration */
.organization-invite-page{height:100dvh;min-height:100dvh;box-sizing:border-box;overflow-y:auto;padding:28px 18px 48px;background:linear-gradient(180deg,#f1f8f0 0,#fff 280px);color:#102a17;font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
.organization-invite-page[hidden]{display:none}
.organization-invite-page [hidden]{display:none!important}
.organization-invite-header{display:flex;align-items:center;justify-content:space-between;width:min(760px,100%);margin:0 auto 18px}
.organization-invite-header img{display:block;width:112px;height:auto;object-fit:contain}
.organization-invite-header p{margin:0;color:#2f7f20;font-size:13px;font-weight:800}
.organization-invite-main{width:min(760px,100%);margin:0 auto}
.organization-invite-form,.organization-invite-notice,.organization-invite-success{border:1px solid #cfe4cf;border-radius:12px;background:#fff;box-shadow:0 18px 50px rgba(20,70,27,.08)}
.organization-invite-notice{padding:48px 24px;text-align:center;color:#52655a}
.organization-invite-notice strong{display:block;margin-bottom:8px;color:#17351f;font-size:20px}
.organization-invite-notice p{margin:0 0 18px;line-height:1.6}
.organization-invite-notice.is-error{border-left:4px solid #dc5045}
.organization-invite-form{display:grid;gap:0;overflow:hidden}
.organization-invite-title-block{padding:28px 30px 24px;border-bottom:1px solid #e1ebe0}
.organization-invite-title-block p{margin:0 0 6px;color:#3d9b35;font-size:12px;font-weight:900}
.organization-invite-title-block h1{margin:0;color:#102a17;font-size:28px;letter-spacing:-.04em}
.organization-invite-title-block span{display:block;margin-top:9px;color:#64748b;font-size:12px;line-height:1.55}
.organization-invite-locked-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px 30px;background:#f7fbf7}
.organization-invite-form fieldset{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0;padding:22px 30px;border:0;border-bottom:1px solid #e1ebe0}
.organization-invite-form legend{grid-column:1/-1;padding:0;color:#17351f;font-size:15px;font-weight:900}
.organization-invite-form label{display:grid;align-content:start;gap:7px;min-width:0;color:#31503a;font-size:12px;font-weight:800}
.organization-invite-form label[hidden]{display:none}
.organization-invite-form .form-input,.organization-invite-form input[type="file"]{box-sizing:border-box;width:100%;min-height:44px;border:1px solid #c9dcc9;border-radius:8px;background:#fff;color:#102a17;font:inherit;font-weight:600}
.organization-invite-form .form-input{padding:0 12px}
.organization-invite-form input[readonly]{background:#eef6ed;color:#31503a}
.organization-invite-form input[type="file"]{padding:6px;background:#f8fbf8}
.organization-invite-form :is(input,select,button,a):focus-visible{outline:3px solid rgba(70,169,40,.25);outline-offset:2px;border-color:#46a928}
.organization-invite-field-error,.organization-invite-form-error{color:#c63830;font-size:11px;line-height:1.5}
.organization-invite-field-error:empty{display:none}
.organization-invite-form-error{margin:16px 30px 0;padding:10px 12px;border-radius:8px;background:#fff1f0}
.organization-invite-submit{min-height:48px;margin:20px 30px 28px}
.organization-invite-success{display:grid;justify-items:center;gap:11px;padding:52px 30px;text-align:center}
.organization-invite-success>span{display:grid;width:52px;height:52px;place-items:center;border-radius:50%;background:#46a928;color:#fff;font-size:26px;font-weight:900}
.organization-invite-success h1,.organization-invite-success p{margin:0}.organization-invite-success strong{color:#2f7f20;font-size:18px}.organization-invite-success p{max-width:480px;color:#52655a;line-height:1.65}.organization-invite-success a{display:grid;min-width:220px;min-height:48px;margin-top:8px;place-items:center;text-decoration:none}
@media(max-width:640px){.organization-invite-page{padding:18px 12px 32px}.organization-invite-header{margin-bottom:12px;padding-inline:4px}.organization-invite-title-block{padding:24px 20px 20px}.organization-invite-title-block h1{font-size:24px}.organization-invite-locked-grid,.organization-invite-form fieldset{grid-template-columns:1fr;padding:18px 20px}.organization-invite-submit{margin:18px 20px 24px}.organization-invite-form-error{margin-inline:20px}.organization-invite-success{padding:42px 20px}.organization-invite-success a{width:100%}}
@media(prefers-reduced-motion:reduce){.organization-invite-page *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Searchable bank selection */
.searchable-select{position:relative;width:100%;min-width:0}
.searchable-select-input{box-sizing:border-box;width:100%;min-height:44px;padding-right:38px;border:1px solid #c9dcc9;border-radius:8px;background:#fff;color:#102a17;font:inherit}
.searchable-select-input:focus-visible{border-color:#46a928;outline:3px solid rgba(70,169,40,.18);outline-offset:1px}
.searchable-select-input::-webkit-search-cancel-button{cursor:pointer}
.searchable-select-native{position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;border:0!important;opacity:0!important;pointer-events:none!important}
.searchable-select-listbox{position:absolute;z-index:1200;top:calc(100% + 5px);right:0;left:0;max-height:264px;overflow-y:auto;border:1px solid #b9dcb2;border-radius:8px;background:#fff;box-shadow:0 12px 28px rgba(25,76,27,.14)}
.searchable-select-option,.searchable-select-empty{display:flex;box-sizing:border-box;min-height:44px;padding:10px 12px;align-items:center;color:#203c26;font-size:13px;line-height:1.4}
.searchable-select-option{cursor:pointer}
.searchable-select-option+.searchable-select-option{border-top:1px solid #edf4eb}
.searchable-select-option:is(:hover,.is-active){color:#246f1b;background:#eef8eb}
.searchable-select-empty{justify-content:center;color:#718074}
.searchable-select-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.form-select-wrap.has-searchable-select .form-select-arrow{display:none}