/* Pretendard·Material Symbols는 index.vite.html 에서 non-blocking 1회 로드 */

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

:root {
  /* Stitch Premium Co-Living design tokens */
  --stitch-bg: #faf9f8;
  --stitch-surface: #ffffff;
  --stitch-surface-container-lowest: #ffffff;
  --stitch-surface-container-low: #f4f3f2;
  --stitch-surface-container: #eeeeed;
  --stitch-surface-container-high: #e9e8e7;
  --stitch-surface-variant: #e3e2e1;
  --stitch-primary: #031632;
  --stitch-primary-container: #1a2b48;
  --stitch-on-primary: #ffffff;
  --stitch-primary-fixed: #d7e2ff;
  --stitch-primary-fixed-dim: #b6c7eb;
  --stitch-secondary: #a73925;
  --stitch-secondary-fixed: #ffdad3;
  --stitch-secondary-container: #fd795f;
  --stitch-tertiary: #0b1726;
  --stitch-tertiary-fixed: #d7e3f7;
  --stitch-on-surface: #1a1c1c;
  --stitch-on-surface-variant: #44474d;
  --stitch-outline: #75777e;
  --stitch-outline-variant: #c5c6ce;
  --stitch-error: #ba1a1a;
  --stitch-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  --stitch-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --stitch-radius: 0.5rem;
  --stitch-radius-lg: 1rem;
  --stitch-radius-xl: 0.75rem;

  /* Legacy aliases (mapped to Stitch) */
  --bg: var(--stitch-surface);
  --surface: var(--stitch-surface-container-low);
  --surface-hover: var(--stitch-surface-container);
  --border: var(--stitch-outline-variant);
  --text: var(--stitch-on-surface);
  --text-muted: var(--stitch-on-surface-variant);
  --primary: var(--stitch-primary);
  --primary-hover: var(--stitch-primary-container);
  --success: #4a7c59;
  --warning: #b8860b;
  --danger: var(--stitch-error);
  --vacant: var(--stitch-on-surface-variant);
  --occupied: var(--success);
  --reserved: var(--warning);
  --radius: var(--stitch-radius-lg);
  --shadow: var(--stitch-shadow);
  /* Pretendard */
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-nav: var(--font);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  background: var(--stitch-bg);
  color: var(--stitch-on-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.is-file-protocol .file-protocol-warning {
  display: block;
}

.file-protocol-warning {
  display: none;
  margin: 0;
  padding: 1rem 1.25rem;
  background: #7f1d1d;
  color: #fecaca;
  border-bottom: 2px solid #ef4444;
  font-size: 0.92rem;
  line-height: 1.55;
}

.file-protocol-warning strong {
  display: block;
  margin-bottom: 0.35rem;
  color: #fff;
  font-size: 1rem;
}

.file-protocol-warning p {
  margin: 0 0 0.5rem;
}

.file-protocol-warning ol {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.file-protocol-warning code {
  background: rgba(0, 0, 0, 0.25);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85em;
}

.file-protocol-warning a {
  color: #fde68a;
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--stitch-bg) 82%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: none;
  box-shadow: var(--stitch-shadow);
}

.header-inner {
  max-width: none;
  margin: 0 auto;
  width: 100%;
  padding: 0.85rem 1.25rem;
  min-height: 4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-sizing: border-box;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-icon {
  font-size: 2rem;
}

.brand-logo {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
}

.brand-logo-sm {
  width: 1.75rem;
  height: 1.75rem;
}

.contract-hub-icon-img {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}

.brand-home-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  border-radius: var(--stitch-radius-lg);
  line-height: 1;
  padding: 0.35rem;
  background: color-mix(in srgb, var(--stitch-primary-fixed) 35%, transparent);
  transition: background 0.15s ease, transform 0.15s ease;
}

.brand-home-link:hover {
  background: color-mix(in srgb, var(--stitch-primary-fixed) 55%, transparent);
  transform: translateY(-1px);
  opacity: 1;
}

.brand-home-link:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}

.brand h1 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--stitch-primary);
}

.subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.brand-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.5rem;
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  font-family: var(--font-nav);
}

.brand-nav-link {
  position: relative;
  color: var(--stitch-on-surface-variant);
  text-decoration: none;
  font-weight: 500;
  font-family: inherit;
  border-radius: 0;
  padding: 0.35rem 0.5rem 0.45rem;
  transition: color 0.15s ease;
}

.brand-nav-link:hover {
  color: var(--stitch-primary);
}

.brand-nav-link.is-active {
  color: var(--stitch-primary);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--stitch-primary);
}

.header .btn:not(.header-notify-btn):not(.super-admin-nav-link),
.header .export-menu,
.header .export-option,
.header .top-menu-preview,
.header .brand-nav-link,
.header .brand-home-link,
.main > .tabs .top-menu-preview {
  border-radius: 0;
}

.header .super-admin-nav-link,
.header .header-notify-btn {
  border-radius: 8px;
}

.top-menu-preview {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 50%;
  z-index: 130;
  width: max-content;
  max-width: min(15.5rem, calc(100vw - 1.5rem));
  overflow-wrap: anywhere;
  word-break: break-word;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  text-align: left;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s ease;
}

.top-menu-preview::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--bg);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: translateX(-50%) rotate(45deg);
}

.top-menu-preview-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.top-menu-preview-desc {
  display: block;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--text-muted);
}

.top-menu-preview-meta {
  display: block;
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--border);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--primary);
}

@media (hover: hover) and (pointer: fine) {
  .brand-nav-link:hover .top-menu-preview,
  .brand-nav-link:focus-visible .top-menu-preview,
  .tab:hover .top-menu-preview,
  .tab:focus-visible .top-menu-preview {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  #tabCalendar .top-menu-preview,
  .main > .tabs > .tab[data-tab="finance"] .top-menu-preview,
  .tab-board-group > .tab .top-menu-preview {
    left: auto;
    right: 0;
    transform: translateY(6px);
  }

  #tabCalendar:hover .top-menu-preview,
  #tabCalendar:focus-visible .top-menu-preview,
  .main > .tabs > .tab[data-tab="finance"]:hover .top-menu-preview,
  .main > .tabs > .tab[data-tab="finance"]:focus-visible .top-menu-preview,
  .tab-board-group > .tab:hover .top-menu-preview,
  .tab-board-group > .tab:focus-visible .top-menu-preview {
    transform: translateY(0);
  }

  #tabCalendar .top-menu-preview::before,
  .main > .tabs > .tab[data-tab="finance"] .top-menu-preview::before,
  .tab-board-group > .tab .top-menu-preview::before {
    left: auto;
    right: 1.1rem;
    transform: rotate(45deg);
  }
}

.brand-nav-sep {
  color: var(--text-muted);
  opacity: 0.55;
  user-select: none;
}

.brand-nav-guest {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

.header-actions-placeholder {
  display: none;
  flex: 0 1 22rem;
  width: 22rem;
  max-width: 38vw;
  min-height: 2.5rem;
}

html[data-page="sms-notice"] .header-actions-placeholder,
html[data-page="sms-link"] .header-actions-placeholder {
  display: block;
}

.google-account-btn #googleAccountLabel {
  display: inline-flex;
  align-items: center;
  max-width: 11rem;
  min-width: 0;
  overflow: hidden;
  vertical-align: bottom;
}

.google-account-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.google-account-email.google-account-no-business {
  color: var(--text-muted);
  font-size: 0.92em;
}

.google-account-building-name {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84em;
  color: var(--text-muted);
  max-width: 6.5rem;
}

.google-account-building-name:not(.hidden)::before {
  content: "쨌";
  margin: 0 0.3rem;
  color: var(--text-muted);
}

.google-account-label-preview {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.55rem);
  z-index: 140;
  width: max-content;
  max-width: min(16rem, calc(100vw - 1.5rem));
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  text-align: left;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) translateX(-6px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s ease;
}

.google-account-label-preview::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  width: 8px;
  height: 8px;
  background: var(--bg);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: translateY(-50%) rotate(45deg);
}

.google-account-label-preview.hidden {
  display: none;
}

.google-account-label-preview-desc {
  display: block;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--text-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (hover: hover) and (pointer: fine) {
  .google-account-dropdown.google-account-default-hint:hover
    .google-account-label-preview:not(.hidden),
  .google-account-dropdown.google-account-default-hint:focus-within
    .google-account-label-preview:not(.hidden) {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
  }
}

.export-dropdown {
  position: relative;
}

.import-dropdown {
  position: relative;
}

.import-file-option {
  cursor: pointer;
  display: block;
}

.export-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 180px;
  max-width: min(22rem, calc(100vw - 1.5rem));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.35rem;
  z-index: 200;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.top-menu-preview.is-viewport-positioned {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  opacity: 1;
  visibility: visible;
  z-index: 350;
  pointer-events: none;
  left: max(12px, env(safe-area-inset-left, 0px));
  max-width: min(15.5rem, calc(100vw - 24px)) !important;
}

.top-menu-preview.is-viewport-positioned::before {
  left: var(--preview-arrow-x, 50%);
  transform: translateX(-50%) rotate(45deg);
}

.export-menu.is-viewport-positioned,
#googleAccountMenu.is-viewport-positioned,
.header-notify-panel.is-viewport-positioned,
.header-notify-panel.is-mobile-dropdown-anchor {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  z-index: 350;
}

.export-menu.hidden {
  display: none;
}

/* body 포털 계정 메뉴: hidden인데 fixed 클래스·좌표가 남아 화면에 남는 경우 차단 */
#googleAccountMenu.export-menu.hidden,
#googleAccountMenu.export-menu.hidden.is-viewport-positioned,
#googleAccountMenu.export-menu.hidden.is-mobile-dropdown-anchor,
#googleAccountMenu.export-menu.hidden.is-body-mounted {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  left: -9999px !important;
  top: -9999px !important;
}

.export-option {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.export-option:hover {
  background: var(--surface-hover);
}

.export-menu-divider {
  height: 1px;
  margin: 0.35rem 0.25rem;
  background: var(--border);
}

.export-option-google {
  color: #4285f4;
  font-weight: 500;
}

.export-option-danger {
  color: #dc2626;
  font-weight: 600;
}

.export-option-danger:hover {
  background: rgba(220, 38, 38, 0.08);
}

#buildingToolsHeaderSlot {
  display: contents;
}

/* Signed-in: keep building tools out of the header row (menu slot only) */
.header-actions:has(.google-account-btn.signed-in) #buildingToolsHeaderSlot {
  display: none !important;
}

#buildingToolsMenuSlot {
  display: block;
}

.google-account-submenu-toggle {
  font-weight: 500;
}

#googleAccountMenu {
  min-width: 220px;
}

@media (hover: hover) and (pointer: fine) {
  .google-account-dropdown > #googleAccountMenu.export-menu {
    top: 100%;
    margin-top: 0;
    padding-top: 0.35rem;
    box-sizing: border-box;
  }
}

#googleAccountMenu .export-submenu {
  position: static;
  top: auto;
  right: auto;
  min-width: 0;
  margin: 0 0 0.15rem;
  padding: 0.15rem 0 0.15rem 0.5rem;
  border: none;
  border-left: 2px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

#googleAccountMenu .export-submenu:not(.hidden) {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 0.15rem;
  padding: 0.25rem 0 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-left: 2px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

#googleAccountMenu .export-submenu .export-option {
  font-size: 0.86rem;
  padding: 0.45rem 0.65rem;
}

@media (hover: hover) and (pointer: fine) {
  #googleAccountMenu .export-dropdown:hover > .export-menu.hidden,
  #googleAccountMenu .import-dropdown:hover > .export-menu.hidden {
    display: none !important;
  }

  .google-account-submenu-wrap:hover > .export-submenu:not(.hidden),
  .google-account-submenu-wrap:focus-within > .export-submenu:not(.hidden) {
    display: block;
  }
}

.google-account-btn {
  max-width: 220px;
  gap: 0.45rem;
}

.header-auth-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.demo-trial-btn {
  white-space: nowrap;
  flex-shrink: 0;
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}

.google-start-btn:not(.signed-in) {
  white-space: nowrap;
}

.google-account-btn.signed-in {
  max-width: min(320px, 42vw);
}

.google-account-btn.signed-in .google-dot {
  background: #4285f4;
}

.google-account-btn.signed-in #googleAccountLabel {
  max-width: none;
}

.google-account-btn .google-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.google-account-dropdown {
  position: relative;
}

/* React ?쒕툕?섏씠吏€ ??Google 怨꾩젙 ?쒕∼?ㅼ슫 (?덇굅??#googleAccountMenu?€ 遺꾨━) */
.react-google-account-menu {
  min-width: 220px;
}

.google-account-dropdown.is-mobile-menu-open > .react-google-account-menu.export-menu:not(.hidden),
.google-account-dropdown.is-mobile-menu-open > #reactGoogleAccountMenu.export-menu:not(.hidden) {
  position: static !important;
  display: block !important;
  width: 100% !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin-top: 0.35rem;
  max-height: none;
  overflow: visible;
  box-shadow: var(--shadow);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 0.45rem;
  z-index: 1;
  transform: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .google-account-dropdown:has(#reactGoogleAccountMenu):hover > .export-menu.hidden,
  .google-account-dropdown:has(#reactGoogleAccountMenu):focus-within > .export-menu.hidden {
    display: none !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .google-account-dropdown::before,
  .export-dropdown::before,
  .import-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.45rem;
    z-index: 199;
  }

  .google-account-dropdown:has(.google-account-btn.signed-in):hover > .export-menu,
  .google-account-dropdown:has(.google-account-btn.signed-in):focus-within > .export-menu,
  .export-dropdown:not(.building-tools-export):hover > .export-menu,
  .export-dropdown:not(.building-tools-export):focus-within > .export-menu,
  .import-dropdown:not(.building-tools-import):hover > .export-menu,
  .import-dropdown:not(.building-tools-import):focus-within > .export-menu {
    display: block;
  }
}

.building-tools-export > .export-menu.hidden,
.building-tools-import > .export-menu.hidden {
  display: none !important;
}

.building-tools-export > .export-menu.is-viewport-positioned,
.building-tools-import > .export-menu.is-viewport-positioned {
  z-index: 360;
}

#buildingToolsMenuSlot .building-tools-export .export-submenu:not(.hidden) {
  margin-bottom: 0.45rem;
}

#buildingToolsMenuSlot .building-tools-import .export-submenu:not(.hidden) {
  margin-bottom: 0.35rem;
}

.embedded-browser-login-modal {
  max-width: 420px;
}

.embedded-browser-login-lead {
  margin: 0 0 0.75rem;
  line-height: 1.55;
  font-size: 0.95rem;
}

.embedded-browser-login-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0 0.75rem;
}

.embedded-browser-login-actions .btn {
  width: 100%;
  justify-content: center;
}

.embedded-browser-manual-hint {
  margin: 0;
}

.embedded-browser-samsung-btn.hidden {
  display: none;
}

.room-contract-actions {
  padding-top: 0.25rem;
  border-top: 1px dashed var(--border);
}

#roomModal .room-contract-actions {
  margin-top: 0;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface, #fff));
}

#roomModal .modal-header {
  padding: 0.75rem 1.15rem;
}

#roomModal .modal-body {
  gap: 0.5rem;
  padding: 0.85rem 1.15rem;
}

#roomModal .modal-footer {
  padding: 0.65rem 1.15rem;
}

#roomModal .form-row label {
  margin-bottom: 0.22rem;
  font-size: 0.8rem;
}

#roomModal .form-row input,
#roomModal .form-row select,
#roomModal .form-row textarea {
  padding: 0.48rem 0.65rem;
  font-size: 0.9rem;
}

#roomModal .form-row-2 {
  gap: 0.45rem;
}

#roomModal .form-row-status-maintenance {
  grid-template-columns: minmax(5.5rem, 36%) 1fr;
}

#roomModal .form-hint {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
}

#roomModal .date-segments input,
#roomModal .date-segments--select select {
  padding: 0.42rem 1.55rem 0.42rem 0.35rem;
  font-size: 0.9rem;
  min-height: 2.55rem;
}

#roomModal .date-segments-picker-btn,
#roomModal .date-segments-clear-btn {
  min-height: 2.55rem;
}

#roomModal .rent-paid-toggle-face {
  min-height: 2.55rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.95rem;
  border-radius: 10px;
  border-width: 2px;
  justify-content: flex-start;
  text-align: left;
}

.rent-paid-layout {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.rent-paid-controls-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}

.rent-paid-controls-row .rent-paid-toggle {
  flex: 1 1 auto;
  min-width: 0;
}

.btn-rent-monthly-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  width: auto;
  min-width: 7.25rem;
  min-height: 2.35rem;
  padding: 0.48rem 0.75rem;
  white-space: nowrap;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 0.5rem;
  background: var(--surface, #fff);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text, #374151);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-rent-monthly-toggle:hover {
  background: rgba(37, 99, 235, 0.04);
  border-color: rgba(37, 99, 235, 0.35);
}

.btn-rent-monthly-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.btn-rent-monthly-toggle-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.btn-rent-monthly-toggle.is-expanded {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.28);
}

.btn-rent-monthly-toggle.is-expanded .btn-rent-monthly-toggle-icon {
  transform: rotate(180deg);
}

.rent-monthly-panel {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface, #fff) 92%, var(--primary) 8%);
}

.rent-monthly-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.rent-monthly-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.rent-monthly-year-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.rent-monthly-year-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.rent-monthly-year-btn:hover {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.35);
  color: var(--text);
}

.rent-monthly-year-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.rent-monthly-year {
  min-width: 4.2rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}

.rent-monthly-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.28rem;
}

@media (max-width: 480px) {
  .rent-monthly-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rent-month-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  min-height: 2.1rem;
  padding: 0.18rem 0.1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.rent-month-cell:hover:not(.is-na) {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}

.rent-month-cell.is-paid {
  background: color-mix(in srgb, var(--success) 16%, var(--surface, #fff));
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  color: color-mix(in srgb, var(--success) 85%, var(--text));
}

.rent-month-cell.is-unpaid {
  background: color-mix(in srgb, #ef4444 8%, var(--surface, #fff));
  border-color: color-mix(in srgb, #ef4444 22%, var(--border));
  color: color-mix(in srgb, #b91c1c 75%, var(--text-muted));
}

.rent-month-cell.is-current {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}

.rent-month-cell.is-na {
  opacity: 0.45;
  cursor: default;
}

.rent-month-num {
  font-size: 0.74rem;
  font-weight: 700;
}

.rent-month-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.85;
}

.rent-month-cell.is-unpaid .rent-month-dot {
  opacity: 0.55;
}

.rent-monthly-legend {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.35rem;
}

.rent-monthly-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.68rem;
  color: var(--text-muted);
}

.rent-monthly-legend-item::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: currentColor;
}

.rent-monthly-legend-item.is-paid {
  color: color-mix(in srgb, var(--success) 85%, var(--text));
}

.rent-monthly-legend-item.is-unpaid {
  color: color-mix(in srgb, #b91c1c 75%, var(--text-muted));
}

#roomModal .room-contract-section-label {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.btn-contract {
  width: 100%;
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

.btn-contract:hover {
  background: rgba(59, 130, 246, 0.08);
}

.room-contract-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#roomModal .room-contract-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 0.35rem;
}

#roomModal .room-contract-buttons.room-contract-buttons--completed {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

#roomModal .room-contract-buttons--completed #btnResidenceConfirmation {
  justify-self: stretch;
}

#roomModal .room-contract-buttons--completed #btnAdminSignContract {
  justify-self: stretch;
}

#roomModal .room-contract-buttons.room-contract-buttons--completed-office {
  grid-template-columns: 1fr;
  justify-items: stretch;
}

.room-contract-buttons .btn-contract {
  width: auto;
  flex: 1;
  min-width: 140px;
}

#roomModal .btn-room-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

#roomModal .room-modal-btn-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

#roomModal .room-modal-btn-icon svg {
  width: 100%;
  height: 100%;
}

#roomModal .btn-room-sms {
  padding: 0.42rem 0.65rem;
  font-size: 0.82rem;
  background: color-mix(in srgb, var(--success) 14%, var(--surface, #fff));
  color: #15803d;
  border: 1px solid color-mix(in srgb, var(--success) 45%, var(--border));
}

#roomModal .btn-room-sms:hover {
  background: color-mix(in srgb, var(--success) 24%, var(--surface, #fff));
}

#roomModal .btn-room-sms-auto {
  padding: 0.42rem 0.65rem;
  font-size: 0.82rem;
  background: color-mix(in srgb, #111827 6%, var(--surface, #fff));
  color: #111827;
  border: 1px solid color-mix(in srgb, #111827 35%, var(--border));
}

#roomModal .btn-room-sms-auto:hover {
  background: color-mix(in srgb, #111827 12%, var(--surface, #fff));
  color: #111827;
  border-color: color-mix(in srgb, #111827 48%, var(--border));
}

#roomModal .btn-room-sms-auto.is-on {
  background: #dc2626;
  color: #fff;
  border-color: #b91c1c;
  box-shadow: none;
}

#roomModal .btn-room-sms-auto.is-on:hover {
  background: #b91c1c;
  color: #fff;
  border-color: #991b1b;
}

#roomModal .btn-room-sms-auto .room-sms-auto-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.15rem;
  padding: 0.05rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#roomModal .btn-room-sms-auto .room-sms-auto-badge.is-off {
  color: #111827;
  background: color-mix(in srgb, #111827 12%, var(--surface, #fff));
}

#roomModal .btn-room-sms-auto .room-sms-auto-badge.is-on {
  color: #991b1b;
  background: #fee2e2;
}

#roomModal .btn-room-contract-preview {
  padding-block: 1.1rem;
  min-height: 3.25rem;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface, #fff));
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border));
}

#roomModal .btn-room-contract-preview:hover {
  background: color-mix(in srgb, var(--primary) 20%, var(--surface, #fff));
}

#roomModal .btn-room-contract-sign {
  padding-block: 1.1rem;
  min-height: 3.25rem;
  background: color-mix(in srgb, #8b5cf6 12%, var(--surface, #fff));
  color: #6d28d9;
  border: 1px solid color-mix(in srgb, #8b5cf6 42%, var(--border));
}

#roomModal .btn-room-contract-sign:hover {
  background: color-mix(in srgb, #8b5cf6 20%, var(--surface, #fff));
}

#roomModal .btn-room-contract-residence {
  background: color-mix(in srgb, #0d9488 12%, var(--surface, #fff));
  color: #0f766e;
  border: 1px solid color-mix(in srgb, #0d9488 42%, var(--border));
}

#roomModal .btn-room-contract-residence:hover {
  background: color-mix(in srgb, #0d9488 20%, var(--surface, #fff));
}

#roomModal .btn-room-contract-residence-link {
  background: color-mix(in srgb, #0284c7 12%, var(--surface, #fff));
  color: #0369a1;
  border: 1px solid color-mix(in srgb, #0284c7 42%, var(--border));
}

#roomModal .btn-room-contract-residence-link:hover {
  background: color-mix(in srgb, #0284c7 20%, var(--surface, #fff));
}

#roomModal .btn-room-contract-admin {
  background: var(--stitch-primary, #031632);
  color: var(--stitch-on-primary, #fff);
  border: 1px solid var(--stitch-primary, #031632);
  opacity: 1;
  visibility: visible;
}

#roomModal .btn-room-contract-admin:hover {
  background: var(--stitch-primary-container, #1a2b48);
  border-color: var(--stitch-primary-container, #1a2b48);
  color: var(--stitch-on-primary, #fff);
}

#roomModal .btn-room-contract-admin .room-contract-btn-label,
#roomModal .btn-room-contract-admin .room-modal-btn-icon {
  color: inherit;
  opacity: 1;
}

#roomModal .btn-room-delete {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface, #fff));
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
}

#roomModal .btn-room-delete:hover {
  background: color-mix(in srgb, var(--danger) 18%, var(--surface, #fff));
}

#roomModal .btn-room-move-out {
  background: color-mix(in srgb, var(--warning) 16%, var(--surface, #fff));
  color: #b45309;
  border: 1px solid color-mix(in srgb, var(--warning) 48%, var(--border));
}

#roomModal .btn-room-move-out:hover {
  background: color-mix(in srgb, var(--warning) 26%, var(--surface, #fff));
}

#roomModal .btn-room-cancel {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

#roomModal .btn-room-cancel:hover {
  background: var(--surface-hover);
  color: var(--text);
}

#roomModal .btn-room-save {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  min-width: 5.5rem;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.28);
}

#roomModal .btn-room-save:hover {
  background: var(--primary-hover);
}

.room-contract-feedback {
  margin: 0.65rem 0 0;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.45;
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary);
}

.room-contract-feedback-error {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.attachment-contract-feedback {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.45;
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary);
}

.attachment-contract-feedback-error {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

#attachmentContractModal .attachment-contract-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  flex-shrink: 0;
}

#attachmentContractModal .attachment-contract-phone-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

#attachmentContractModal .attachment-contract-phone-bar label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
}

#attachmentContractModal .attachment-contract-phone-bar input {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 280px;
}

#attachmentContractModal .attachment-contract-footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

#attachmentContractModal .attachment-contract-footer-tools,
#attachmentContractModal .attachment-contract-footer-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#attachmentContractModal .attachment-contract-footer-primary {
  margin-left: auto;
}

#attachmentContractModal.modal-wide form {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2rem);
  min-height: 0;
}

#attachmentContractModal.modal-wide .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

#attachmentContractModal.modal-wide .modal-body:has(.attachment-layout-section:not(.hidden)) {
  overflow: hidden;
}

#attachmentContractModal.modal-wide .attachment-layout-section:not(.hidden) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

#attachmentContractModal.modal-wide .attachment-layout-stage {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

html.is-contract-editor-popup[data-editor-mode="attachment"] #attachmentContractModal:open .attachment-contract-footer {
  flex-shrink: 0;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  border-top: 1px solid var(--border);
  box-shadow: none;
}

html.is-contract-editor-popup[data-editor-mode="attachment"] #attachmentContractModal:open .modal-body:has(.attachment-layout-section:not(.hidden)) {
  overflow: hidden;
  gap: 0.45rem;
}

html.is-contract-editor-popup[data-editor-mode="attachment"] #attachmentContractModal:open .modal-body:has(.attachment-layout-section:not(.hidden)) .attachment-contract-guide,
html.is-contract-editor-popup[data-editor-mode="attachment"] #attachmentContractModal:open .modal-body:has(.attachment-layout-section:not(.hidden)) .attachment-contract-guide-wrap {
  display: none;
}

html.is-contract-editor-popup[data-editor-mode="attachment"] #attachmentContractModal:open .modal-body:has(.attachment-layout-section:not(.hidden)) #attachmentLayoutPresetSection {
  flex-shrink: 0;
  margin: 0;
}

html.is-contract-editor-popup[data-editor-mode="attachment"] #attachmentContractModal:open .modal-body:has(.attachment-layout-section:not(.hidden)) #attachmentLayoutPresetPanel {
  max-height: 5.5rem;
  overflow: auto;
}

html.is-contract-editor-popup[data-editor-mode="attachment"] .attachment-layout-section:not(.hidden) {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  margin: 0;
}

html.is-contract-editor-popup[data-editor-mode="attachment"] .attachment-layout-toolbar {
  flex-shrink: 0;
  margin-bottom: 0.45rem;
}

html.is-contract-editor-popup[data-editor-mode="attachment"] .attachment-layout-toolbar-hint {
  display: none;
}

html.is-contract-editor-popup[data-editor-mode="attachment"] .attachment-layout-stage {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

@media (min-width: 720px) {
  html.is-contract-editor-popup[data-editor-mode="attachment"] #attachmentContractModal:open .attachment-contract-footer {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    grid-template-areas:
      "feedback feedback"
      "phone actions";
    align-items: center;
    column-gap: 0.75rem;
  }

  html.is-contract-editor-popup[data-editor-mode="attachment"] #attachmentContractModal:open .attachment-contract-feedback {
    grid-area: feedback;
  }

  html.is-contract-editor-popup[data-editor-mode="attachment"] #attachmentContractModal:open .attachment-contract-phone-bar {
    grid-area: phone;
  }

  html.is-contract-editor-popup[data-editor-mode="attachment"] #attachmentContractModal:open .attachment-contract-footer-actions {
    grid-area: actions;
  }
}

.room-phone-sms-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}

.room-phone-sms-row input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.room-phone-sms-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 8.5rem;
}

.room-phone-sms-actions .btn {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

.room-extra-toggle-row {
  margin: 0;
}

.btn-room-extra-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.48rem 0.8rem;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 0.5rem;
  background: var(--surface, #fff);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text, #374151);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-room-extra-toggle:hover {
  background: rgba(37, 99, 235, 0.04);
  border-color: rgba(37, 99, 235, 0.35);
}

.btn-room-extra-toggle-label {
  line-height: 1.2;
}

.btn-room-extra-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.btn-room-extra-toggle-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.btn-room-extra-toggle.is-expanded {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.28);
}

.btn-room-extra-toggle.is-expanded .btn-room-extra-toggle-icon {
  transform: rotate(180deg);
}

.room-extra-fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.room-extra-fields .form-hint-block {
  margin: 0;
}

.room-phone-sms-row .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  align-self: stretch;
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.85rem 0 0.5rem;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: var(--stitch-text-body-size, 0.9375rem);
  font-weight: 500;
  line-height: var(--stitch-text-body-leading, 1.45);
  color: var(--stitch-text-title-color, #4a4c52);
  cursor: pointer;
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-check input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-fields {
  margin-top: 0.35rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--surface, #fff) 92%, #f3f4f6);
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-fields.is-disabled {
  opacity: 0.55;
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-days-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-days-row input[type="number"] {
  width: 5rem;
  max-width: 100%;
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-hint {
  margin: 0;
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-hint strong {
  font-weight: 600;
  color: var(--stitch-text-title-color, #4a4c52);
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-steps {
  list-style: none;
  margin: 0.75rem 0 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, #111827 4%, #fff);
  border: 1px solid color-mix(in srgb, #111827 8%, #fff);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: var(--stitch-text-body-size, 0.9375rem);
  font-weight: var(--stitch-text-body-weight, 400);
  line-height: var(--stitch-text-body-leading, 1.45);
  color: var(--stitch-text-body-color, #75777e);
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-step-num {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: #4a4c52;
  line-height: 1;
  margin-top: 0.1rem;
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-notice-link {
  display: inline;
  margin-left: 0.15rem;
  color: #b91c1c;
  font-weight: 600;
  text-decoration: underline !important;
  text-decoration-line: underline !important;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1.5px;
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-notice-link:hover {
  color: #991b1b;
  text-decoration: underline !important;
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-repeat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 0.85rem;
}

.unpaid-auto-sms-settings-modal #unpaidAutoSmsMessageCard {
  width: 100%;
  max-width: 100%;
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-card-preview {
  margin: 0.45rem 0 0;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border, #e5e7eb);
  background: color-mix(in srgb, var(--surface, #fff) 88%, #f3f4f6);
  color: var(--stitch-text-body-color, #75777e);
  white-space: pre-wrap;
  word-break: break-word;
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-card-preview.is-empty {
  color: #b91c1c;
  border-color: color-mix(in srgb, #dc2626 35%, var(--border, #e5e7eb));
  background: color-mix(in srgb, #fee2e2 45%, var(--surface, #fff));
}

.unpaid-auto-sms-settings-modal #unpaidAutoSmsRepeatInterval {
  width: 100%;
  max-width: 12rem;
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-time-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 10.5rem;
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-time-label {
  margin: 0;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--stitch-text-title-color, #4a4c52);
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-time-selects {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.unpaid-auto-sms-settings-modal .unpaid-auto-sms-time-selects .field-input {
  width: auto;
  min-width: 4.75rem;
  max-width: 5.5rem;
  min-height: 2.4rem;
}

.unpaid-auto-sms-settings-modal .modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.unpaid-auto-sms-settings-modal .modal-footer .btn-unpaid-auto-sms-force {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: 0.55rem;
  border: 1px solid color-mix(in srgb, #dc2626 45%, var(--border, #e5e7eb));
  background: color-mix(in srgb, #dc2626 12%, var(--surface, #fff));
  color: #b91c1c;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
}

.unpaid-auto-sms-settings-modal .modal-footer .btn-unpaid-auto-sms-force:hover:not(:disabled) {
  background: color-mix(in srgb, #dc2626 22%, var(--surface, #fff));
  border-color: color-mix(in srgb, #dc2626 60%, var(--border, #e5e7eb));
}

.unpaid-auto-sms-settings-modal .modal-footer .btn-unpaid-auto-sms-force:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  #roomModal .room-contract-buttons {
    grid-template-columns: 1fr;
  }

  #roomModal .modal-footer-split {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  #roomModal .modal-footer-left,
  #roomModal .modal-footer-actions {
    width: 100%;
    justify-content: stretch;
  }

  #roomModal .modal-footer-left .btn-room-action,
  #roomModal .modal-footer-actions .btn-room-action {
    flex: 1 1 auto;
  }

  #roomModal .modal-footer-actions {
    flex-direction: row-reverse;
  }
}

.profile-section-title {
  margin: 1.25rem 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.profile-section-title:first-of-type {
  margin-top: 0;
}

.profile-contract-link-section {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.profile-contract-link {
  margin-top: 0.75rem;
  display: inline-flex;
}

.sms-notice-hub {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.25rem 0 1.5rem;
}

html[data-page="sms-notice"] .main,
html[data-page="sms-link"] .main,
html[data-page="contracts"] .main {
  background: var(--stitch-bg);
}

.sms-notice-hero,
.sms-link-hero,
.stitch-subpage-hero,
.contract-hub-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.25rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-page="sms-notice"] .sms-notice-hero {
  flex-direction: column;
  align-items: stretch;
}

.sms-notice-hero-main,
.sms-link-hero-main,
.stitch-subpage-hero-main,
.contract-hub-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1 1 18rem;
  min-width: 0;
}

.sms-notice-hero-icon,
.sms-link-hero-icon,
.stitch-subpage-hero-icon,
.contract-hub-hero-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  color: var(--stitch-primary);
  background: color-mix(in srgb, var(--stitch-primary-fixed) 30%, transparent);
}

.sms-notice-hero-icon .material-symbols-outlined,
.sms-link-hero-icon .material-symbols-outlined,
.stitch-subpage-hero-icon .material-symbols-outlined,
.contract-hub-hero-icon .material-symbols-outlined {
  font-size: 1.75rem;
}

.sms-notice-hero-text h2,
.sms-link-hero-text h2,
.stitch-subpage-hero-text h2,
.contract-hub-hero-text h2 {
  margin: 0.15rem 0 0.5rem;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--stitch-on-surface);
}

.sms-notice-eyebrow,
.sms-link-eyebrow,
.stitch-subpage-eyebrow,
.contract-hub-eyebrow {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--stitch-on-surface-variant);
}

.sms-notice-hero-desc,
.sms-link-hero-desc,
.stitch-subpage-hero-desc,
.contract-hub-hero-desc {
  margin: 0 0 0.5rem;
  color: var(--stitch-on-surface-variant);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.sms-notice-cost-hint {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--stitch-radius, 0.5rem);
  background: color-mix(in srgb, var(--stitch-secondary-fixed, #ffdad3) 55%, #fff);
  border: 1px solid color-mix(in srgb, var(--stitch-secondary, #a73925) 18%, transparent);
  color: var(--stitch-on-surface, #1a1c1c);
  font-size: 0.84rem;
  line-height: 1.5;
  font-weight: 500;
}

.sms-notice-hero-desc--link a {
  color: var(--stitch-primary);
  font-weight: 500;
  text-decoration: none;
}

.sms-notice-hero-desc--link a:hover,
.sms-link-hero-desc--link a:hover {
  text-decoration: underline;
}

.sms-link-hero-desc--link a {
  color: var(--stitch-primary);
  font-weight: 500;
  text-decoration: none;
}

.sms-notice-account-hint-wrap,
.stitch-subpage-account-hint,
.contract-page-account-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin-top: 0.35rem;
}

.sms-notice-account-hint-wrap--need-profile,
.stitch-subpage-account-hint--need-profile,
.contract-page-account-hint--need-profile {
  padding: 0.65rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--stitch-secondary) 35%, transparent);
  border-radius: var(--stitch-radius-lg);
  background: color-mix(in srgb, var(--stitch-secondary-fixed) 25%, var(--stitch-surface));
}

.sms-notice-account-hint-text,
.stitch-subpage-account-hint-text,
.contract-page-account-hint-text {
  margin: 0;
  flex: 1 1 12rem;
  color: var(--stitch-on-surface-variant);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
}

.sms-notice-account-hint-wrap--need-profile .sms-notice-account-hint-text,
.stitch-subpage-account-hint--need-profile .stitch-subpage-account-hint-text,
.contract-page-account-hint--need-profile .contract-page-account-hint-text {
  color: var(--stitch-on-surface);
}

.sms-notice-steps,
.sms-link-steps,
.stitch-subpage-steps,
.contract-hub-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 1 auto;
}

.sms-notice-steps li,
.sms-link-steps li,
.stitch-subpage-steps li,
.contract-hub-steps li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: var(--stitch-surface-container-lowest);
  border: 1px solid var(--stitch-surface-variant);
  color: var(--stitch-on-surface);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--stitch-shadow);
}

.sms-notice-step-num,
.sms-link-step-num,
.stitch-subpage-step-num,
.contract-hub-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--stitch-primary);
  color: var(--stitch-on-primary);
  font-size: 0.6875rem;
  font-weight: 700;
}

.sms-notice-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sms-notice-recipient-card {
  flex: 1 1 22rem;
  max-width: 28rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--stitch-radius-xl);
  background: var(--stitch-surface-container-lowest);
  border: 1px solid transparent;
  box-shadow: var(--stitch-shadow);
}

.sms-notice-recipient-card--inline {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
  margin-top: 1rem;
  box-sizing: border-box;
}

.sms-notice-recipient-layout {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 1rem 1.25rem;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.sms-notice-recipient-col--search,
.sms-notice-recipient-col--send {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sms-notice-recipient-col--search {
  padding: 0.85rem 0.95rem;
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-surface-container-lowest);
  border: 1px solid var(--stitch-outline-variant);
}

.sms-notice-recipient-col--send {
  padding: 0.85rem 0.95rem;
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-surface-container-low);
  border: 1px solid var(--stitch-outline-variant);
}

.sms-notice-recipient-arrow {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--stitch-primary, #3b5bdb);
  opacity: 0.85;
  pointer-events: none;
}

.sms-notice-recipient-arrow .material-symbols-outlined {
  font-size: 1.75rem;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.sms-notice-search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem 0.35rem 0.75rem;
  border-radius: var(--stitch-radius);
  border: 1px solid var(--stitch-outline-variant);
  background: var(--stitch-surface-container-low);
}

.sms-notice-search-icon {
  position: static;
  order: 2;
  flex: 0 0 auto;
  color: var(--stitch-on-surface-variant);
  font-size: 1.25rem;
  pointer-events: none;
}

.sms-notice-search-label {
  display: none;
}

.sms-notice-search-input {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 0.45rem 0.15rem 0.45rem 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.9375rem;
  font-weight: 500;
}

.sms-notice-search-input:focus {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}

.sms-notice-search-field:focus-within {
  border-color: var(--stitch-primary);
  background: var(--stitch-surface-container-lowest);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stitch-primary) 15%, transparent);
}

.sms-notice-recipient-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
}

.sms-notice-recipient-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--stitch-radius);
  color: var(--stitch-secondary);
  background: color-mix(in srgb, var(--stitch-secondary-fixed) 30%, transparent);
}

.sms-notice-recipient-icon .material-symbols-outlined {
  font-size: 1.25rem;
}

.sms-notice-recipient-head label {
  display: block;
  margin: 0 0 0.15rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--stitch-on-surface);
}

.sms-notice-recipient-hint {
  margin: 0;
  color: var(--stitch-on-surface-variant);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.sms-notice-phone-input {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.7rem 0.85rem;
  border-radius: var(--stitch-radius);
  border: 1px solid var(--stitch-outline-variant);
  background: var(--stitch-surface-container-low);
}

.sms-notice-phone-input:focus {
  background: var(--stitch-surface-container-lowest);
  border-color: var(--stitch-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stitch-primary) 15%, transparent);
  outline: none;
}

.sms-notice-search-wrap {
  position: relative;
  margin-bottom: 0.9rem;
}

.sms-notice-search-results {
  position: static;
  z-index: auto;
  margin: 0.55rem 0 0;
  padding: 0.35rem;
  list-style: none;
  max-height: 14rem;
  overflow: auto;
  border-radius: var(--stitch-radius-lg);
  border: 1px solid var(--stitch-outline-variant);
  background: var(--stitch-surface-container-lowest);
  box-shadow: none;
}

.sms-notice-search-empty {
  padding: 0.75rem 0.85rem;
  color: var(--stitch-on-surface-variant);
  font-size: 0.8125rem;
}

.sms-notice-search-result {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: none;
  border-radius: var(--stitch-radius);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--stitch-on-surface);
}

.sms-notice-search-result:hover:not(:disabled) {
  background: color-mix(in srgb, var(--stitch-primary) 8%, transparent);
}

.sms-notice-search-result.is-added {
  opacity: 0.72;
  cursor: pointer;
}

.sms-notice-search-result.is-disabled,
.sms-notice-search-result:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sms-notice-search-result-line {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sms-notice-search-result-action {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--stitch-primary);
  white-space: nowrap;
}

.sms-notice-send-list-block {
  margin-bottom: 0;
  padding-top: 0;
}

.sms-notice-send-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.sms-notice-send-list-head h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--stitch-on-surface);
}

.sms-notice-send-list-head span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--stitch-on-surface-variant);
}

.sms-notice-send-list-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
}

.sms-notice-send-list-clear {
  margin: 0;
  padding: 0.2rem 0.55rem;
  min-height: 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--stitch-error, #b3261e);
  border: 1px solid color-mix(in srgb, var(--stitch-error, #b3261e) 28%, transparent);
  border-radius: var(--stitch-radius, 0.5rem);
  background: color-mix(in srgb, var(--stitch-error, #b3261e) 6%, transparent);
}

.sms-notice-send-list-clear:hover {
  background: color-mix(in srgb, var(--stitch-error, #b3261e) 12%, transparent);
}

.sms-notice-send-list-empty {
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-radius: var(--stitch-radius);
  background: var(--stitch-surface-container-low);
  color: var(--stitch-on-surface-variant);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.sms-notice-send-list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sms-notice-send-list > li {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  border-radius: var(--stitch-radius);
  border: 1px solid var(--stitch-outline-variant);
  background: var(--stitch-surface-container-lowest);
  overflow: hidden;
}

.sms-notice-send-chip {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--stitch-on-surface);
}

.sms-notice-send-chip.is-active {
  background: color-mix(in srgb, var(--stitch-primary) 12%, transparent);
}

.sms-notice-send-chip-label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: normal;
  word-break: keep-all;
}

.sms-notice-send-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  border: none;
  border-left: 1px solid var(--stitch-outline-variant);
  background: transparent;
  color: var(--stitch-on-surface-variant);
  cursor: pointer;
}

.sms-notice-send-chip-remove:hover {
  color: var(--stitch-on-surface);
  background: color-mix(in srgb, var(--stitch-on-surface) 6%, transparent);
}

.sms-notice-send-chip-remove .material-symbols-outlined {
  font-size: 1rem;
}

.sms-notice-send-list-hint {
  margin: 0.5rem 0 0;
  color: var(--stitch-on-surface-variant);
  font-size: 0.75rem;
  line-height: 1.4;
}

.sms-notice-manual-label {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--stitch-on-surface);
}

.sms-notice-manual-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.sms-notice-manual-row .sms-notice-phone-input {
  flex: 1 1 10rem;
  min-width: 0;
}

.sms-notice-manual-add {
  flex: 0 0 auto;
  white-space: nowrap;
}

.sms-notice-templates-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.15rem 0 0;
}

.sms-notice-templates-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--stitch-on-surface);
}

.sms-notice-templates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.sms-notice-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.15rem 1.2rem 1rem;
  border-radius: var(--stitch-radius-xl);
  background: var(--stitch-surface-container-lowest);
  border: 1px solid transparent;
  box-shadow: var(--stitch-shadow);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.2s ease;
}

.sms-notice-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--stitch-shadow-lg);
  border-color: var(--stitch-surface-variant);
}

.sms-notice-card--welcome,
.sms-notice-card--directions,
.sms-notice-card--movein,
.sms-notice-card--unpaid,
.sms-notice-card--custom {
  border-top: none;
}

.sms-notice-custom-list {
  display: contents;
}

.sms-notice-card-head--custom {
  align-items: center;
}

.sms-notice-card-titles--custom {
  flex: 1 1 auto;
  min-width: 0;
}

.sms-notice-custom-name {
  width: 100%;
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: none;
  background: transparent;
  padding: 0;
}

.sms-notice-custom-name:focus {
  outline: none;
  box-shadow: none;
}

.sms-notice-custom-desc {
  margin: 0;
  color: var(--stitch-on-surface-variant);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.sms-notice-card-icon--custom {
  color: var(--stitch-tertiary);
  background: color-mix(in srgb, var(--stitch-tertiary-fixed) 50%, transparent);
}

.btn-sms-custom-delete {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 999px;
  color: var(--stitch-on-surface-variant);
}

.btn-sms-custom-delete .material-symbols-outlined {
  font-size: 1.125rem;
}

.btn-sms-custom-delete:hover {
  color: var(--stitch-secondary);
  background: var(--stitch-surface-container-low);
}

.sms-notice-add-wrap {
  display: flex;
  justify-content: center;
  margin-top: 0.15rem;
  padding: 0.25rem 0;
}

.btn-sms-add-message {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.15rem;
  border: 1px dashed var(--stitch-outline-variant);
  border-radius: var(--stitch-radius-xl);
  color: var(--stitch-on-surface-variant);
  font-weight: 600;
  background: var(--stitch-surface-container-lowest);
  box-shadow: var(--stitch-shadow);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.btn-sms-add-message:hover {
  border-color: var(--stitch-primary);
  color: var(--stitch-primary);
  background: var(--stitch-surface-container-low);
}

.sms-notice-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.sms-notice-card-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
}

.sms-notice-card-icon .material-symbols-outlined {
  font-size: 1.375rem;
}

.sms-notice-card-icon--welcome {
  color: var(--stitch-secondary);
  background: color-mix(in srgb, var(--stitch-secondary-fixed) 30%, transparent);
}

.sms-notice-card-icon--directions {
  color: var(--stitch-primary);
  background: color-mix(in srgb, var(--stitch-primary-fixed) 30%, transparent);
}

.sms-notice-card-icon--movein {
  color: var(--stitch-tertiary);
  background: color-mix(in srgb, var(--stitch-tertiary-fixed) 50%, transparent);
}

.sms-notice-card-icon--unpaid {
  color: var(--stitch-error);
  background: color-mix(in srgb, var(--stitch-error) 12%, var(--stitch-surface));
}

.sms-notice-card.is-sms-guide-focus {
  outline: 2px solid #dc2626;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, #dc2626 22%, transparent);
}

.sms-notice-card-titles h3 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--stitch-on-surface);
}

.sms-notice-card-titles p {
  margin: 0;
  color: var(--stitch-on-surface-variant);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.sms-notice-textarea {
  width: 100%;
  flex: 1 1 auto;
  min-height: 9rem;
  resize: vertical;
  line-height: 1.6;
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--stitch-radius);
  border: 1px solid var(--stitch-outline-variant);
  background: var(--stitch-surface-container-low);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.sms-notice-textarea:focus {
  background: var(--stitch-surface-container-lowest);
  border-color: var(--stitch-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stitch-primary) 12%, transparent);
  outline: none;
}

.sms-notice-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--stitch-surface-variant);
}

.sms-notice-char-count {
  color: var(--stitch-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sms-notice-char-count.is-near-limit {
  color: var(--stitch-secondary);
}

.sms-notice-card-buttons {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.sms-notice-btn-icon {
  font-size: 1.125rem !important;
}

.btn-sms-send {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.btn-sms-save {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sms-notice-save-hint {
  margin: 0.6rem 0 0;
  color: var(--stitch-on-surface-variant);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.btn-sms-save--card {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .sms-notice-templates {
    grid-template-columns: 1fr;
  }

  .sms-notice-recipient-layout {
    flex-direction: column !important;
  }

  .sms-notice-recipient-arrow .material-symbols-outlined {
    transform: rotate(90deg);
  }

  .sms-notice-steps,
  .contract-hub-steps {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .sms-notice-hero-main,
  .contract-hub-hero-main {
    flex-direction: column;
    gap: 0.75rem;
  }

  .sms-notice-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sms-notice-card-buttons {
    flex-direction: column;
    width: 100%;
  }

  .btn-sms-save--card,
  .btn-sms-send {
    width: 100%;
    justify-content: center;
  }

  .btn-sms-add-message {
    width: 100%;
    justify-content: center;
  }
}

.contract-hub {
  margin-bottom: 1rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

html[data-page="contracts"] .contracts-page-shell .legacy-page-root {
  max-width: 80rem;
  margin: 0 auto;
}

html[data-page="contracts"] .contract-hub {
  padding: 0.25rem 0 0;
}

.contract-page-account-hint.hidden {
  display: none;
}

.contracts-page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0.85rem 0 0.65rem;
  padding-bottom: 0;
  border-bottom: 1px solid var(--stitch-surface-variant);
}

.contracts-page-tab {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--stitch-on-surface-variant);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.6rem 1.15rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.contracts-page-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--stitch-secondary);
  color: var(--stitch-on-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

.contracts-page-tab-badge.hidden {
  display: none;
}

.contracts-page-tab:hover {
  color: var(--stitch-primary);
}

.contracts-page-tab.active {
  border-bottom-color: var(--stitch-primary);
  background: transparent;
  color: var(--stitch-primary);
  font-weight: 600;
}

.contract-list-section {
  margin: 0;
  padding: 0.35rem 0 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.contract-list-section.hidden {
  display: none;
}

.contract-list-login-hint {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-surface-container-low);
  border: 1px dashed var(--stitch-outline-variant);
  color: var(--stitch-on-surface-variant);
  font-size: 0.875rem;
}

.contract-list-login-hint.hidden {
  display: none;
}

.contract-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.65rem;
}

.contract-hub-room-stack,
.contract-hub-open-stack,
.contract-hub-attach-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}

.contract-hub-room-stack {
  background: transparent;
  border: none;
}

.contract-hub-open-stack {
  background: transparent;
  border: none;
}

.contract-hub-attach-stack {
  background: transparent;
  border: none;
}

.contract-hub-room-stack .contract-hub-preset-panel {
  background: var(--stitch-surface-container-lowest);
  border-color: var(--stitch-surface-variant);
}

.contract-hub-open-stack .contract-hub-preset-panel,
.contract-hub-open-stack .contract-hub-preset-panel--open {
  background: var(--stitch-surface-container-lowest);
  border-color: var(--stitch-surface-variant);
}

.contract-hub-attach-stack .contract-hub-sample-panel {
  background: var(--stitch-surface-container-lowest);
  border-color: var(--stitch-surface-variant);
}

.contract-hub-room-stack > .contract-hub-card:hover {
  border-color: var(--stitch-surface-variant);
}

.contract-hub-open-stack > .contract-hub-card:hover {
  border-color: var(--stitch-surface-variant);
}

.contract-hub-attach-stack > .contract-hub-card:hover {
  border-color: var(--stitch-surface-variant);
}

.contract-hub-sample-panel {
  padding: 0.85rem 0.95rem;
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-surface-container-low);
  border: 1px solid var(--stitch-surface-variant);
  box-shadow: none;
}

.contract-hub-sample-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.58rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--stitch-secondary) 25%, transparent);
  border-radius: var(--stitch-radius);
  background: var(--stitch-surface-container-lowest);
  color: var(--stitch-secondary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--stitch-shadow);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.contract-hub-sample-btn .material-symbols-outlined {
  font-size: 1.125rem;
}

.contract-hub-sample-btn:hover {
  border-color: var(--stitch-secondary);
  box-shadow: var(--stitch-shadow);
}

.contract-hub-sample-btn:active {
  transform: translateY(1px);
}

.contract-hub-sample-btn--preset {
  margin-top: 0.55rem;
}

.contract-hub-sample-hint {
  margin: 0.55rem 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.contract-hub-sample-hint--preset {
  margin-top: 0.35rem;
}

.attachment-sample-demo-lead {
  margin-top: 0;
}

.attachment-sample-demo-layout {
  margin-top: 0.75rem;
}

.contract-hub-preset-panel--open {
  background: var(--stitch-surface-container-low);
  border-color: var(--stitch-surface-variant);
}

.contract-hub-preset-panel--open .contract-hub-preset-label {
  color: var(--stitch-secondary);
}

.open-contract-body-item--default {
  border-color: color-mix(in srgb, var(--stitch-secondary) 22%, transparent);
  background: color-mix(in srgb, var(--stitch-secondary-fixed) 35%, var(--stitch-surface));
}

.contract-hub-preset-panel {
  padding: 0.65rem 0.75rem;
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-surface-container-lowest);
  border: 1px solid var(--stitch-surface-variant);
  box-shadow: none;
}

.contract-hub-preset-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.contract-hub-preset-head-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

.contract-hub-preset-head-action {
  flex-shrink: 0;
}

.contract-hub-standard-form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid rgba(3, 22, 50, 0.18);
  border-radius: 999px;
  background: #fff7f5;
  color: #031632;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
}

.contract-hub-standard-form-btn:hover {
  background: #ffece7;
  border-color: rgba(3, 22, 50, 0.28);
}

.contract-hub-preset-label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--stitch-on-surface-variant);
}

.contract-hub-preset-kind-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.4rem;
  border-radius: 0.3rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #eeeeed;
  color: #5c6675;
}

.contract-hub-preset-kind-tag--room,
.contract-hub-preset-panel--tone-room .contract-hub-preset-kind-tag {
  background: #d7e2ff;
  color: #031632;
}

.contract-hub-preset-kind-tag--open,
.contract-hub-preset-panel--tone-open .contract-hub-preset-kind-tag {
  background: #ffdad3;
  color: #a73925;
}

.contract-hub-preset-kind-tag--attach,
.contract-hub-preset-panel--tone-attach .contract-hub-preset-kind-tag {
  background: #e4e2e1;
  color: #44474d;
}

.contract-hub-preset-panel--tone-room {
  border-color: rgba(3, 22, 50, 0.18);
  border-top: 3px solid #031632;
}

.contract-hub-preset-panel--tone-open,
.contract-hub-preset-panel--open {
  border-color: rgba(167, 57, 37, 0.22);
  border-top: 3px solid #a73925;
}

.contract-hub-preset-panel--tone-attach,
.contract-hub-preset-panel--attach {
  border-color: rgba(68, 71, 77, 0.22);
  border-top: 3px solid #5c6675;
}

.contract-hub-preset-icon--room {
  background: #d7e2ff !important;
  color: #031632 !important;
}

.contract-hub-preset-icon--open {
  background: #ffdad3 !important;
  color: #a73925 !important;
}

.contract-hub-preset-icon--attach {
  background: #e4e2e1 !important;
  color: #44474d !important;
}

.contract-hub-preset-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 11.5rem;
  overflow-y: auto;
  border: none;
  border-radius: var(--stitch-radius-xl);
  background: var(--stitch-surface-container-lowest);
  box-shadow: var(--stitch-shadow);
}

.contract-hub-preset-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.65rem;
  padding: 0.65rem 0.85rem;
  border: 1px dashed rgba(68, 71, 77, 0.35);
  border-radius: 0.85rem;
  background: #fff;
  color: #031632;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.contract-hub-preset-more:hover {
  background: #f4f7ff;
  border-color: rgba(3, 22, 50, 0.35);
}

.contract-hub-preset-more .material-symbols-outlined {
  font-size: 1.1rem;
}

.contract-hub-preset-more-count {
  color: #75777e;
  font-weight: 600;
}

.contract-hub-preset-panel--popup .contract-hub-preset-list {
  max-height: none;
  overflow: visible;
}

.contract-hub-presets-popup {
  min-height: 100dvh;
  padding: 1.25rem 1.25rem 2rem;
  background: #f4f3f2;
  box-sizing: border-box;
}

.contract-hub-presets-popup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.contract-hub-presets-popup-titles {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}

.contract-hub-presets-popup-titles h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #031632;
}

.contract-hub-presets-popup-titles p {
  margin: 0.3rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #5c6675;
}

.contract-hub-presets-popup-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.8rem;
  flex-shrink: 0;
}

.contract-hub-presets-popup-icon--room {
  background: #d7e2ff;
  color: #031632;
}

.contract-hub-presets-popup-icon--open {
  background: #ffdad3;
  color: #a73925;
}

.contract-hub-presets-popup-icon--attach {
  background: #e4e2e1;
  color: #44474d;
}

.contract-hub-presets-popup-body .contract-hub-preset-panel {
  margin: 0;
}

.contract-hub-presets-popup--empty {
  display: grid;
  place-content: center;
  gap: 1rem;
  text-align: center;
}

html.is-contract-presets-popup body {
  background: #f4f3f2;
}

.contract-hub-preset-item {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  border-bottom: 1px solid var(--stitch-surface-variant);
}

.contract-hub-preset-item:last-child {
  border-bottom: none;
}

.contract-hub-preset-open {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  padding: 0.85rem 1rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.contract-hub-preset-open:hover {
  background: var(--stitch-surface-container-low);
}

.contract-hub-preset-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--stitch-radius);
  background: var(--stitch-surface-variant);
  color: var(--stitch-on-surface-variant);
}

.contract-hub-preset-icon .material-symbols-outlined {
  font-size: 1.25rem;
}

.contract-hub-preset-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.contract-hub-room-stack .contract-hub-preset-item--default .contract-hub-preset-open {
  background: color-mix(in srgb, var(--stitch-primary-fixed) 14%, transparent);
}

.contract-hub-preset-panel--open .contract-hub-preset-item--default .contract-hub-preset-open {
  background: color-mix(in srgb, var(--stitch-secondary-fixed) 18%, transparent);
}

.contract-hub-preset-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--stitch-on-surface);
}

.contract-hub-preset-open:hover .contract-hub-preset-name {
  color: var(--stitch-primary);
}

.contract-hub-preset-meta {
  color: var(--stitch-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 600;
}

.contract-hub-preset-delete {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: auto 0.65rem auto 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--stitch-on-surface-variant);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.contract-hub-preset-rename {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: auto 0 auto 0.15rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--stitch-on-surface-variant);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.contract-hub-preset-rename .material-symbols-outlined {
  font-size: 1.125rem;
}

.contract-hub-preset-rename:hover {
  color: var(--stitch-primary);
  background: var(--stitch-surface-container);
}

.contract-hub-preset-delete .material-symbols-outlined {
  font-size: 1.125rem;
}

.contract-hub-preset-delete:hover {
  color: var(--stitch-secondary);
  background: var(--stitch-surface-container);
}

.contract-hub-preset-empty {
  margin: 0.15rem 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.contract-hub-preset-empty.hidden {
  display: none;
}

.contract-hub-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--stitch-radius-xl);
  background: var(--stitch-surface-container-lowest);
  color: inherit;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: var(--stitch-shadow);
  transition:
    transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    border-color 0.2s ease;
}

.contract-hub-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--stitch-shadow-lg);
  border-color: var(--stitch-surface-variant);
}

.contract-hub-card:hover .contract-hub-action-icon {
  transform: scale(1.08);
}

.contract-hub-card:active {
  transform: translateY(0);
  box-shadow: var(--stitch-shadow);
}

.contract-hub-card:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--stitch-primary) 20%, transparent),
    var(--stitch-shadow-lg);
  border-color: var(--stitch-outline-variant);
}

.contract-hub-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  min-height: auto;
  padding: 1.75rem 1.15rem 1.5rem;
}

.contract-hub-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  min-height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: transform 0.2s ease;
}

.contract-hub-card:hover .contract-hub-action {
  box-shadow: none;
}

.contract-hub-action-icon--room {
  background: color-mix(in srgb, var(--stitch-primary-fixed) 30%, transparent);
  color: var(--stitch-primary);
}

.contract-hub-action-icon--open {
  background: color-mix(in srgb, var(--stitch-secondary-fixed) 30%, transparent);
  color: var(--stitch-secondary);
}

.contract-hub-action-icon--attach {
  background: color-mix(in srgb, var(--stitch-tertiary-fixed) 50%, transparent);
  color: var(--stitch-tertiary);
}

.contract-hub-action-icon .material-symbols-outlined {
  font-size: 1.875rem;
}

.contract-hub-action-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
  background: var(--stitch-surface-container);
  color: var(--stitch-primary);
  box-shadow: none;
  transition: transform 0.25s ease;
}

.contract-hub-card:hover .contract-hub-action-icon {
  transform: scale(1.06);
}

.contract-hub-room-stack .contract-hub-action-label,
.contract-hub-open-stack .contract-hub-action-label,
.contract-hub-attach-stack .contract-hub-action-label {
  color: var(--stitch-on-surface);
}

.contract-hub-room-stack .contract-hub-desc,
.contract-hub-open-stack .contract-hub-desc,
.contract-hub-attach-stack .contract-hub-desc {
  color: var(--stitch-on-surface-variant);
}

.contract-hub-action-label {
  flex: 0 0 auto;
  min-width: 0;
  margin-top: 1rem;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-align: center;
}

.contract-hub-action-chevron {
  display: none;
}

.contract-hub-icon-wrap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: #f2f2f7;
  color: #1d1d1f;
}

.contract-hub-icon-wrap--room {
  background: color-mix(in srgb, var(--stitch-primary-fixed) 35%, transparent);
  color: var(--stitch-primary);
}

.contract-hub-icon-wrap--open {
  background: color-mix(in srgb, var(--stitch-secondary-fixed) 35%, transparent);
  color: var(--stitch-secondary);
}

.contract-hub-icon-wrap--attach {
  background: color-mix(in srgb, var(--stitch-tertiary-fixed) 50%, transparent);
  color: var(--stitch-tertiary);
}

.contract-hub-icon-svg {
  display: block;
  width: 1.3rem;
  height: 1.3rem;
}

.contract-hub-card-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.contract-hub-card-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--text);
}

.contract-hub-desc {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--stitch-on-surface-variant);
  line-height: 1.55;
  letter-spacing: 0;
  padding: 0;
  text-align: center;
}

.contract-hub-card-chevron {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.1rem;
  border-right: 2px solid #c7c7cc;
  border-bottom: 2px solid #c7c7cc;
  transform: rotate(-45deg);
  opacity: 0.85;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.contract-hub-card:hover .contract-hub-card-chevron {
  border-color: #8e8e93;
  transform: rotate(-45deg) translate(1px, -1px);
}

.contract-hub-icon {
  font-size: 1.35rem;
  line-height: 1;
}

.contract-hub-card strong {
  font-size: 0.98rem;
}

.open-contract-type {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
}

.attachment-contract-preview {
  margin: 0.75rem 0 1rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
}

.attachment-contract-guide {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.45rem;
}

.attachment-contract-guide li {
  line-height: 1.5;
}

.attachment-layout-section {
  margin: 0.75rem 0 1rem;
}

.attachment-layout-section.hidden {
  display: none;
}

.attachment-layout-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.65rem;
}

.attachment-layout-toolbar--edit {
  position: sticky;
  top: 0;
  z-index: 12;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: var(--radius, 0.75rem);
  background: var(--surface, #fff);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.attachment-layout-toolbar--edit .attachment-layout-edit-btn {
  min-height: 2.4rem;
  padding: 0.45rem 0.9rem;
  border: 1.5px solid var(--primary, #031632);
  border-radius: 0.65rem;
  background: #fff;
  color: var(--primary, #031632);
  font-size: 0.875rem;
  font-weight: 700;
}

.attachment-layout-toolbar--edit .attachment-layout-edit-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary, #031632) 8%, #fff);
}

.attachment-layout-toolbar--edit .attachment-layout-edit-btn--save,
.attachment-layout-toolbar--edit .attachment-layout-edit-btn.btn-primary {
  background: var(--primary, #031632);
  border-color: var(--primary, #031632);
  color: #fff;
}

.attachment-layout-toolbar--edit .attachment-layout-edit-btn--save:hover:not(:disabled),
.attachment-layout-toolbar--edit .attachment-layout-edit-btn.btn-primary:hover:not(:disabled) {
  opacity: 0.92;
  color: #fff;
}

.attachment-layout-toolbar-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
  margin-right: 0.15rem;
}

.attachment-layout-toolbar-hint {
  margin: 0;
  flex: 1 1 100%;
}

.attachment-layout-select.is-active {
  border-color: var(--primary);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.attachment-layout-select.is-signature-missing {
  border-style: dashed;
  opacity: 0.82;
}

.attachment-layout-stage.is-attachment-write-mode {
  cursor: text;
}

.attachment-layout-stage.is-attachment-write-mode .attachment-layout-image {
  cursor: text;
}

/* 글씨쓰기 OFF — 기본 검정 화살표 */
.attachment-layout-stage:not(.is-attachment-write-mode):not(
    .is-attachment-pan-mode
  ):not(.is-attachment-red-write-cursor) {
  cursor: default;
}

.attachment-layout-stage:not(.is-attachment-write-mode):not(
    .is-attachment-pan-mode
  ):not(.is-attachment-red-write-cursor)
  .attachment-layout-image {
  cursor: default;
}

/* 글씨쓰기 ON — DOM 빨간 I-beam (Windows CSS cursor url 대체) */
.attachment-layout-stage.is-attachment-red-write-cursor,
.attachment-layout-stage.is-attachment-red-write-cursor .attachment-layout-image,
.attachment-layout-stage.is-attachment-red-write-cursor .attachment-layout-doc {
  cursor: none;
}

.attachment-write-red-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 80;
  width: 16px;
  height: 24px;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9));
}

.attachment-write-red-cursor.is-visible {
  opacity: 1;
}

.attachment-write-red-cursor svg {
  display: block;
}

.attachment-layout-stage.is-attachment-pan-mode {
  cursor: grab;
}

.attachment-layout-stage.is-attachment-pan-mode .attachment-layout-image {
  cursor: grab;
}

.attachment-layout-stage.is-attachment-pan-mode.is-layout-dragging,
.attachment-layout-stage.is-attachment-pan-mode:active {
  cursor: grabbing;
}

@media (pointer: coarse), (max-width: 767px) {
  /*
   * pan-x pan-y 만 쓰면 핀치 줌이 막힘.
   * manipulation(= pan + pinch-zoom) 으로 글씨쓰기·팬 모드에서도 2손가락 확대/축소 허용.
   */
  .attachment-layout-stage.is-attachment-write-mode,
  .attachment-layout-stage.is-attachment-pan-mode {
    cursor: grab;
    touch-action: manipulation;
  }

  .attachment-layout-stage.is-attachment-write-mode .attachment-layout-image,
  .attachment-layout-stage.is-attachment-pan-mode .attachment-layout-image {
    cursor: grab;
    touch-action: manipulation;
  }

  /* 작성된 글씨: 한 손가락 드래그로 이동 */
  .attachment-layout-stage.is-attachment-write-mode
    .attachment-layout-marker--static-text,
  .attachment-layout-stage.is-attachment-pan-mode
    .attachment-layout-marker--static-text,
  .attachment-layout-stage.is-attachment-write-mode
    .attachment-layout-marker--static-text
    > .attachment-layout-static-input,
  .attachment-layout-stage.is-attachment-pan-mode
    .attachment-layout-marker--static-text
    > .attachment-layout-static-input {
    touch-action: none;
  }

  .attachment-layout-stage.is-layout-dragging {
    touch-action: none;
  }
}

.attachment-layout-stage {
  position: relative;
  display: block;
  width: 100%;
  max-height: min(75vh, 780px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #cbd5e1;
  padding: 8px;
}

.attachment-write-cursor-hint {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 45;
  pointer-events: none;
  max-width: min(280px, 78%);
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.9);
  color: #f8fafc;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.28);
  opacity: 1;
  transition: opacity 0.28s ease;
  white-space: normal;
  will-change: transform;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
    sans-serif;
}

/* 모바일 글씨쓰기 ON — 문서 하단 중앙 (두 번 터치 영역을 가리지 않음) */
.attachment-write-cursor-hint.is-mobile-double-tap-hint {
  left: 50%;
  top: auto;
  bottom: 0.85rem;
  right: auto;
  max-width: min(22rem, calc(100% - 1.5rem));
  padding: 0.7rem 0.95rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  transform: translate(-50%, 0);
  will-change: auto;
  background: rgba(3, 22, 50, 0.94);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.32);
}

.attachment-write-cursor-hint.is-hiding {
  opacity: 0;
}

.attachment-layout-stage.is-layout-dragging {
  touch-action: none;
  user-select: none;
  overscroll-behavior: contain;
}

.attachment-layout-doc {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  line-height: 0;
  container-type: inline-size;
  --attachment-field-font-scale: min(1.12, max(0.32, calc(100cqw / 720)));
  --attachment-field-font-size: 12px;
}

.attachment-layout-page-count {
  margin: 0;
  flex: 1 1 100%;
  color: var(--primary);
  font-weight: 600;
}

.attachment-layout-image {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.attachment-layout-marker {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px dashed;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: grab;
  touch-action: none;
  user-select: none;
  opacity: 0.92;
  z-index: 1;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.attachment-layout-marker > span:not(.attachment-layout-resize) {
  pointer-events: none;
  padding: 0.08rem 0.22rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.88);
  font-size: 0.62rem;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attachment-layout-marker--tenant {
  border-color: #2563eb;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.12);
}

.attachment-layout-marker--admin {
  border-color: #16a34a;
  color: #15803d;
  background: rgba(22, 163, 74, 0.12);
}

.attachment-layout-marker--broker {
  border-color: #d97706;
  color: #b45309;
  background: rgba(217, 119, 6, 0.12);
}

.attachment-layout-marker--signature-field {
  z-index: 2;
}

.attachment-layout-marker--input {
  border-color: #7c3aed;
  color: #6d28d9;
  background: rgba(124, 58, 237, 0.1);
  z-index: 1;
  /* 이름·연락처 등 입력칸: 최종 문서와 동일하게 보통 굵기·비례 글자
   * zoom은 마커(절대배치)에 걸면 getBoundingClientRect·미리보기 위치가 틀어짐 → 안쪽 텍스트에만 */
  align-items: center;
  justify-content: flex-start;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  font-family: "Pretendard", sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  --attachment-input-fit-scale: 1;
  overflow: hidden;
}

.attachment-layout-marker--input > span:not(.attachment-layout-resize) {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  padding: 0 4px 0 0;
  background: transparent;
  border-radius: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 문서 너비 비례 × 입력란 상자 fit */
  zoom: calc(
    var(--attachment-field-font-scale, 1) * var(--attachment-input-fit-scale, 1)
  );
}

.attachment-layout-marker--input > .attachment-layout-prefill-input {
  zoom: calc(
    var(--attachment-field-font-scale, 1) * var(--attachment-input-fit-scale, 1)
  );
}

.attachment-layout-marker--static-text {
  border: none;
  background: transparent;
  box-shadow: none;
  justify-content: flex-start;
  /* 여러 줄일 때 위에서부터 쌓여 위아래가 밀리지 않도록 */
  align-items: flex-start;
  padding: 0;
  cursor: text;
  opacity: 1;
  overflow: visible;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

.attachment-layout-marker--static-text.is-static-editing {
  padding: 0;
}

.attachment-layout-marker--static-text > .attachment-layout-static-input {
  pointer-events: auto;
  display: block;
  /* zoom이 레이아웃 크기를 줄이므로 역수 보정 — 상자가 글씨 높이에 딱 맞게 */
  width: calc(100% / var(--attachment-field-font-scale, 1));
  max-width: none;
  min-width: 0;
  min-height: 0;
  height: calc(100% / var(--attachment-field-font-scale, 1));
  border: 0;
  background: transparent;
  color: #111827;
  /* 최종 문서 attachment-field-value 와 동일 메트릭 — 12px + zoom(scale) */
  font-size: 12px;
  font-weight: 400;
  font-synthesis: none;
  font-family: "Pretendard", sans-serif;
  line-height: 1.2;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  zoom: var(--attachment-field-font-scale, 1);
  /* em: 글자 크기·측정(fontPx*1.35)과 맞춤 — rem이면 긴 글에서 오른쪽이 잘림 */
  padding: 0 1.35em 0 0;
  margin: 0;
  outline: none;
  cursor: text;
  user-select: text;
  touch-action: manipulation;
  resize: none;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: anywhere;
  white-space: pre;
  box-sizing: border-box;
  vertical-align: top;
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
  -webkit-text-decoration-skip: none;
}

.attachment-layout-marker--static-text
  > .attachment-layout-static-input.is-static-multiline {
  white-space: pre-wrap;
}

.attachment-layout-marker--static-text > .attachment-layout-static-input::placeholder {
  color: #94a3b8;
  opacity: 1;
}

.attachment-layout-marker--static-text.is-static-editing
  > .attachment-layout-static-input::placeholder {
  color: #cbd5e1;
}

.attachment-layout-marker--static-text.is-static-editing,
.attachment-layout-marker--static-text.is-static-move-ready.is-active {
  background: rgba(255, 255, 255, 0.22);
  /* 점선 outline은 한 줄일 때 밑줄처럼 보여서 제거 */
  outline: none;
  border-radius: 2px;
  box-shadow: none;
}

.attachment-layout-marker--static-text.is-static-editing {
  cursor: text;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.22);
}

.attachment-layout-marker--static-text.is-static-move-ready {
  cursor: grab;
}

.attachment-layout-marker--static-text.is-static-moving {
  cursor: grabbing;
  background: rgba(255, 255, 255, 0.18);
  outline: none;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.28);
}

.attachment-layout-marker--static-text.is-static-editing > .attachment-layout-static-input,
.attachment-layout-marker--static-text.is-static-move-ready.is-active > .attachment-layout-static-input {
  background: transparent;
}

.attachment-layout-stage.is-attachment-write-mode .attachment-layout-marker--static-text {
  border: none;
  background: transparent;
}

.attachment-layout-marker--static-text .attachment-layout-resize {
  display: none !important;
}

/* 글씨쓰기 X: 기본 숨김. 입력 직후·마우스 재진입(is-static-remove-visible)일 때만 표시 */
.attachment-layout-marker--static-text .attachment-layout-marker-remove {
  display: none !important;
  top: -0.55rem;
  right: -0.55rem;
}

.attachment-layout-marker--static-text.is-static-remove-visible
  .attachment-layout-marker-remove {
  display: inline-flex !important;
}

.attachment-layout-marker--input > .attachment-layout-prefill-input {
  pointer-events: none;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #111827;
  font-size: 12px;
  font-weight: 400;
  font-family: "Pretendard", sans-serif;
  line-height: 1.2;
  text-align: left;
  padding: 0 4px 0 0;
  margin: 0;
  outline: none;
  cursor: default;
  user-select: none;
}

.attachment-layout-toolbar .attachment-input-field-chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  flex: 0 1 auto;
}

.attachment-layout-select--input.is-active {
  border-color: #7c3aed;
  color: #6d28d9;
  background: rgba(124, 58, 237, 0.1);
}

.attachment-layout-select--input {
  border-color: #c4b5fd;
  color: #6d28d9;
}

.attachment-input-field-section {
  margin-top: 0.35rem;
}

.attachment-input-field-toolbar {
  margin-top: 0;
}

.attachment-input-field-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  width: 100%;
}

.attachment-input-field-chip-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.attachment-input-field-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.attachment-input-field-chip.is-active {
  border-color: #7c3aed;
  color: #6d28d9;
  background: rgba(124, 58, 237, 0.08);
}

.attachment-input-field-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  font-size: 0.95rem;
  line-height: 1;
  color: #64748b;
  background: transparent;
  cursor: pointer;
}

.attachment-input-field-chip-remove:hover {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}

.attachment-layout-marker-remove {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1;
  color: #64748b;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.attachment-layout-marker--input:not(.attachment-layout-marker--static-text).is-active
  .attachment-layout-marker-remove,
.attachment-layout-marker--input:not(.attachment-layout-marker--static-text):hover
  .attachment-layout-marker-remove {
  display: inline-flex;
}

.attachment-layout-marker--cover.is-active .attachment-layout-marker-remove,
.attachment-layout-marker--cover:hover .attachment-layout-marker-remove,
.attachment-layout-marker--cover.is-static-editing .attachment-layout-marker-remove {
  display: inline-flex;
}

/* 가리기 위 글씨: 상자 채움 + 글자만 문서 스케일 (zoom 역수 보정 금지 — overflow에 잘림) */
.attachment-layout-marker--cover > .attachment-layout-cover-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  padding: 2px 4px;
  margin: 0;
  border: 0;
  box-sizing: border-box;
  background: transparent;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
  caret-color: #0f172a;
  font-family: "Pretendard", sans-serif;
  font-size: calc(12px * var(--attachment-field-font-scale, 1));
  font-weight: 400;
  line-height: 1.2;
  zoom: unset;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  resize: none;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

.attachment-layout-marker--tenant.is-active .attachment-layout-marker-remove,
.attachment-layout-marker--tenant:hover .attachment-layout-marker-remove,
.attachment-layout-marker--admin.is-active .attachment-layout-marker-remove,
.attachment-layout-marker--admin:hover .attachment-layout-marker-remove {
  display: inline-flex;
}

.attachment-layout-marker.is-removed {
  display: none !important;
}

.attachment-layout-marker-remove:hover {
  color: #dc2626;
  border-color: #fca5a5;
  background: #fef2f2;
}

.attachment-input-field-toolbar-hint {
  width: 100%;
  margin: 0;
}

#attachmentContractForm {
  position: relative;
}

.attachment-input-field-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.attachment-input-field-overlay.hidden {
  display: none !important;
}

#attachmentInputFieldModalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(248, 250, 252, 0.72);
  z-index: 0;
}

#attachmentInputFieldModal.attachment-input-field-modal {
  position: relative;
  z-index: 1;
  max-height: min(85vh, 640px);
  overflow: auto;
  margin: 0;
  width: min(480px, 100%);
  flex-shrink: 0;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.attachment-input-field-panel {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid var(--stitch-outline-variant, #c5c6ce);
  border-radius: var(--stitch-radius-xl, 0.75rem);
  background: var(--stitch-surface-container-low, #f4f3f2);
  box-shadow: var(--stitch-shadow, 0 4px 20px rgba(0, 0, 0, 0.04));
}

.attachment-input-field-panel.hidden {
  display: none !important;
}

.attachment-input-field-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.attachment-input-field-panel-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.attachment-input-field-panel-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.attachment-input-field-panel-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.sign-card .tenant-attachment-inputs {
  margin-bottom: 1rem;
}

.sign-card.is-attachment-sign .tenant-attachment-inputs + h2 {
  margin-top: 0.25rem;
}

.attachment-preview-host .attachment-field-overlay {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.attachment-preview-host .attachment-field-overlay--cover,
.attachment-preview-host .attachment-field-overlay--static {
  align-items: flex-start;
}

.attachment-preview-host
  .attachment-field-overlay:not(.attachment-field-overlay--cover):not(
    .attachment-field-overlay--static
  )
  > .attachment-field-value,
.attachment-preview-host
  .attachment-field-overlay:not(.attachment-field-overlay--cover):not(
    .attachment-field-overlay--static
  )
  > .attachment-field-placeholder {
  display: flex;
  align-items: center;
  align-self: center;
  box-sizing: border-box;
  max-height: 100%;
  margin: 0;
  zoom: unset;
  transform: scale(
    calc(
      var(--attachment-field-font-scale, 1) *
        var(--attachment-input-fit-scale, 1)
    )
  );
  transform-origin: left center;
  width: calc(
    100% /
      calc(
        var(--attachment-field-font-scale, 1) *
          var(--attachment-input-fit-scale, 1)
      )
  );
}

.attachment-preview-host .attachment-field-value,
.attachment-preview-host .attachment-field-placeholder {
  font-size: 12px;
  line-height: 1.2;
  font-family: "Pretendard", sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  zoom: calc(
    var(--attachment-field-font-scale, 1) * var(--attachment-input-fit-scale, 1)
  );
}

@supports not (zoom: 1) {
  .attachment-preview-host .attachment-field-value,
  .attachment-preview-host .attachment-field-placeholder,
  .attachment-layout-marker--input > span:not(.attachment-layout-resize),
  .attachment-layout-marker--input > .attachment-layout-prefill-input {
    zoom: unset;
    transform: scale(
      calc(
        var(--attachment-field-font-scale, 1) *
          var(--attachment-input-fit-scale, 1)
      )
    );
    transform-origin: left center;
  }

  .attachment-layout-marker--static-text > .attachment-layout-static-input {
    zoom: unset;
    transform: scale(var(--attachment-field-font-scale, 1));
    transform-origin: top left;
  }

  .attachment-preview-host .attachment-field-value,
  .attachment-preview-host .attachment-field-placeholder {
    width: calc(
      100% /
        calc(
          var(--attachment-field-font-scale, 1) *
            var(--attachment-input-fit-scale, 1)
        )
    );
  }

  .attachment-layout-marker--static-text > .attachment-layout-static-input {
    width: calc(100% / var(--attachment-field-font-scale, 1));
    height: calc(100% / var(--attachment-field-font-scale, 1));
  }
}

.attachment-preview-host .attachment-field-value {
  font-weight: 400;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

.attachment-preview-host .attachment-sign-overlay {
  overflow: hidden;
}

.attachment-preview-host .attachment-sign-overlay .overlay-stamp,
.attachment-preview-host .attachment-sign-overlay--stamp-only .overlay-stamp,
.attachment-preview-host .attachment-sign-overlay .overlay-stamp:only-child {
  flex: 0 0 auto;
  flex-shrink: 1;
  width: auto;
  height: auto;
  max-width: min(51pt, 100%);
  max-height: min(51pt, 100%);
  object-fit: contain;
  object-position: center center;
  filter: contrast(1.08) saturate(1.05);
  mix-blend-mode: normal;
}

.attachment-preview-host .attachment-sign-overlay .overlay-sign {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.attachment-preview-host .attachment-sign-overlay .overlay-placeholder {
  max-width: 100%;
  box-sizing: border-box;
  padding: 2px 6px;
  font-size: 0.72rem;
  zoom: var(--attachment-field-font-scale, 1);
}

@media print {
  .attachment-preview-host .attachment-sign-overlay {
    overflow: visible !important;
    z-index: 20 !important;
    isolation: isolate;
  }

  .attachment-preview-host .attachment-sign-overlay .overlay-stamp,
  .attachment-preview-host .attachment-sign-overlay--stamp-only .overlay-stamp,
  .attachment-preview-host .attachment-sign-overlay .overlay-stamp:only-child {
    flex-shrink: 0;
    width: 51pt;
    height: 51pt;
    max-width: 51pt;
    max-height: 51pt;
    position: relative !important;
    z-index: 1 !important;
  }

  .attachment-preview-host .attachment-sign-overlay .overlay-placeholder {
    zoom: 1;
  }
}

.attachment-preview-host .attachment-sign-overlay--stamp-only,
.attachment-preview-host .attachment-sign-overlay:has(.overlay-stamp:only-child),
.attachment-preview-host .attachment-sign-overlay:has(.overlay-stamp) {
  justify-content: flex-end;
  align-items: center;
  padding: 0;
}

.attachment-preview-host .attachment-sign-overlay:has(.overlay-stamp) .overlay-sign {
  flex: 1 1 auto;
  max-height: none;
  max-width: 100%;
}

.attachment-layout-marker.is-active {
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.12);
  opacity: 1;
  z-index: 2;
}

.attachment-layout-marker:active {
  cursor: grabbing;
}

.attachment-layout-resize {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 14px;
  height: 14px;
  border-radius: 0 0 6px 0;
  background: currentColor;
  opacity: 0.55;
  cursor: nwse-resize;
  touch-action: none;
}

.attachment-layout-resize--w {
  left: -2px;
  right: auto;
  top: 4px;
  bottom: 4px;
  transform: none;
  width: 3px;
  height: auto;
  border-radius: 2px;
  background: #94a3b8;
  opacity: 0.25;
  cursor: ew-resize;
}

.attachment-layout-marker--cover:hover .attachment-layout-resize--w,
.attachment-layout-marker--cover.is-active .attachment-layout-resize--w {
  opacity: 0.55;
}

.attachment-layout-marker.is-active .attachment-layout-resize {
  opacity: 0.9;
}

/* 가리기란 우측하단 크기조절: 마우스 떼면 거의 투명 */
.attachment-layout-marker--cover > .attachment-layout-resize:not(.attachment-layout-resize--w) {
  opacity: 0.12;
}

.attachment-layout-marker--cover:hover > .attachment-layout-resize:not(.attachment-layout-resize--w),
.attachment-layout-marker--cover.is-active:hover > .attachment-layout-resize:not(.attachment-layout-resize--w) {
  opacity: 0.75;
}

.attachment-layout-marker--cover.is-active > .attachment-layout-resize:not(.attachment-layout-resize--w) {
  opacity: 0.18;
}

.attachment-preview-frame {
  width: 100%;
  min-height: 280px;
  border: 0;
  border-radius: 6px;
  background: #fff;
}

.attachment-preview-img {
  display: block;
  max-width: 100%;
  max-height: 280px;
  margin: 0 auto;
  object-fit: contain;
}

.stamp-preview--form img {
  width: 68px;
  height: 68px;
  min-width: 68px;
  min-height: 68px;
  max-height: 68px;
  max-width: 68px;
}

.stamp-preview img {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-height: 48px;
  max-width: 48px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  background: #fff;
}

.stamp-preview--residence img {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-height: 48px;
  max-width: 48px;
}

@media (max-width: 900px) {
  .contract-hub-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .contract-hub-card-inner {
    padding: 1.35rem 1rem 1.15rem;
  }

  .contract-action-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "icon"
      "main";
  }

  .contract-action-card-main {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "status"
      "meta"
      "date"
      "actions";
  }

  .contract-action-status {
    justify-self: start;
  }
}

.contract-hub-card.is-active {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--stitch-primary) 45%, transparent),
    var(--stitch-shadow-lg);
  border-color: var(--stitch-outline-variant);
  background: var(--stitch-surface);
}

.contract-hub-card.is-active .contract-hub-action {
  box-shadow: none;
}

.contract-hub-card.is-active .contract-hub-action-chevron {
  border-color: var(--stitch-primary);
}

html[data-page="contracts"] :where(
  .open-contract-type,
  .attachment-contract-preview,
  .contract-tenant-signed-alert-card,
  .open-contract-body-saved,
  .open-contract-body-item,
  .open-contract-body-saved-status,
  .open-contract-body-editing,
  .contract-page,
  .contract-template-room-btn,
  .open-contracts-panel,
  .open-contract-card,
  .open-contract-status,
  .attachment-layout-stage,
  .attachment-layout-marker,
  .attachment-preview-frame,
  .contract-preview-panel,
  .contract-preview-toolbar,
  .contract-preview-viewport,
  .modal
) {
  border-radius: 0;
}

html[data-page="contracts"] .contract-hub :where(
  .contract-hub-card,
  .contract-hub-preset-panel,
  .contract-hub-sample-panel,
  .btn
) {
  border-radius: var(--stitch-radius-lg);
}

html[data-page="contracts"] .contract-hub .btn {
  border-radius: var(--stitch-radius);
}

html[data-page="contracts"] .contract-hub .contract-hub-action-icon {
  border-radius: 999px;
}

html[data-page="contracts"] .main .btn,
html[data-page="contracts"] .main .field-input,
html[data-page="contracts"] .main textarea,
html[data-page="contracts"] .main select {
  border-radius: 0;
}

.contract-action-panel {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.contract-action-panel.hidden {
  display: none;
}

.contract-action-panel-head .profile-section-title {
  margin: 0 0 0.15rem;
}

.contract-action-panel-head .field-hint {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--stitch-on-surface-variant);
}

.contract-action-panel-head {
  margin-bottom: 0.45rem;
}

#contractActionPendingIntro .field-hint + .field-hint,
#contractActionCompletedIntro .field-hint + .field-hint {
  margin-top: 0.2rem;
}

.contract-action-panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}

.contract-action-panel-toolbar .contract-action-tabs {
  margin-bottom: 0;
  border-bottom: none;
  flex: 1;
  min-width: 0;
}

.contract-action-tabs .contract-action-tab-refresh {
  margin-bottom: -1px;
  margin-left: 0.15rem;
  align-self: center;
  flex-shrink: 0;
  padding: 0.48rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.contract-action-tabs .contract-action-tab-refresh:hover {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
  border-color: var(--primary);
}

.contract-action-tabs .contract-action-tab-refresh:disabled {
  opacity: 0.65;
  cursor: wait;
}

.contract-action-tab-refresh-icon {
  display: inline-block;
  margin-right: 0.3rem;
  font-size: 1.08rem;
  line-height: 1;
  vertical-align: -0.06em;
}

.contract-action-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.35rem;
  margin-bottom: 0.45rem;
  padding-bottom: 0;
  border-bottom: 1px solid var(--stitch-surface-variant);
}

.contract-action-tab {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.45rem 0.75rem;
  background: transparent;
  color: var(--stitch-on-surface-variant);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.contract-action-tab:hover {
  color: var(--stitch-primary);
}

.contract-action-tab.active {
  color: var(--stitch-primary);
  border-bottom-color: var(--stitch-primary);
  font-weight: 600;
}

.contract-action-pane.hidden {
  display: none;
}

.contract-action-empty {
  margin: 0.45rem 0 0;
  padding: 0.75rem;
  border: 1px dashed var(--stitch-outline-variant);
  border-radius: var(--stitch-radius-lg);
  text-align: center;
  color: var(--stitch-on-surface-variant);
  font-size: 0.875rem;
}

.contract-action-loading {
  margin: 0.45rem 0 0;
  padding: 0.75rem;
  text-align: center;
  color: var(--stitch-on-surface-variant);
  font-size: 0.875rem;
}

.contract-action-auto-reject-hint {
  margin-top: 0.2rem;
  color: var(--stitch-secondary);
  font-weight: 600;
  font-size: 0.8125rem;
}

.contract-action-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.35rem;
  border: none;
  border-radius: var(--stitch-radius-xl);
  overflow: hidden;
  background: var(--stitch-surface-container-lowest);
  box-shadow: var(--stitch-shadow);
}

.contract-action-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon main";
  align-items: start;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  border: none;
  border-bottom: 1px solid var(--stitch-surface-variant);
  border-radius: 0;
  background: transparent;
  transition: background 0.15s ease;
}

.contract-action-card:last-child {
  border-bottom: none;
}

.contract-action-card:hover {
  background: var(--stitch-surface-container-low);
}

.contract-action-card-icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--stitch-radius);
  background: var(--stitch-surface-variant);
  color: var(--stitch-on-surface-variant);
}

.contract-action-card-icon .material-symbols-outlined {
  font-size: 1.25rem;
}

.contract-action-card-main {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title status"
    "meta meta"
    "date date"
    "actions actions";
  gap: 0.15rem 0.5rem;
  min-width: 0;
}
.contract-action-card-top {
  grid-area: title;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  min-width: 0;
}

.contract-action-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex: 1 1 auto;
}

.contract-action-card-title strong {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
  color: var(--stitch-on-surface);
}

.contract-action-type {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--stitch-primary) 10%, var(--stitch-surface));
  color: var(--stitch-primary);
  white-space: nowrap;
}

.contract-action-badges,
.stitch-action-badges {
  grid-area: status;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  justify-self: end;
  align-self: start;
}

.contract-action-device-auth,
.stitch-action-device-auth {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #1f4e79 35%, transparent);
  font-family: var(--font-sans, "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  background: color-mix(in srgb, #1f4e79 16%, var(--stitch-surface, #fff));
  color: #1f4e79;
}

.contract-action-status {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}

.contract-action-status--tenant_signed {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
}

.contract-action-status--pending {
  background: color-mix(in srgb, var(--warning) 14%, var(--surface));
  color: color-mix(in srgb, var(--warning) 85%, var(--text));
}

.contract-action-status--completed {
  background: color-mix(in srgb, #22c55e 14%, var(--surface));
  color: #15803d;
}

.contract-action-status--terminated {
  background: color-mix(in srgb, var(--text-muted) 12%, var(--surface));
  color: var(--stitch-on-surface-variant);
}

.contract-action-trash-hint {
  color: var(--warning);
  font-size: 0.75rem;
}

.contract-action-meta {
  grid-area: meta;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--stitch-on-surface-variant);
  line-height: 1.4;
  word-break: break-word;
}

.contract-action-date {
  grid-area: date;
  margin: 0;
  font-size: 0.75rem;
  color: var(--stitch-outline);
}

.contract-action-date-row {
  grid-area: date;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  margin: 0;
  min-width: 0;
}

.contract-action-date-row .contract-action-date {
  grid-area: unset;
}

.contract-action-list-memo {
  flex: 1 1 7.5rem;
  min-width: 5.5rem;
  max-width: 14rem;
  box-sizing: border-box;
  margin: 0;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border, #c6c6cd);
  border-radius: 0.45rem;
  background: var(--surface, #fff);
  color: var(--stitch-on-surface-variant, #44474d);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
    sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
}

.contract-action-list-memo::placeholder {
  color: var(--stitch-outline, #9a9ca3);
}

.contract-action-list-memo:focus {
  outline: none;
  border-color: var(--stitch-primary, #5b6cff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--stitch-primary, #5b6cff) 20%, transparent);
}

.contract-action-buttons {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.contract-action-buttons .btn-sm {
  padding: 0.32rem 0.55rem;
  font-size: 0.8125rem;
}

.contract-tenant-signed-alert {
  max-width: 440px;
  width: calc(100% - 2rem);
}

.contract-tenant-signed-alert-lead {
  margin: 0 0 1rem;
  color: var(--text);
  line-height: 1.55;
  font-size: 0.95rem;
}

.contract-tenant-signed-alert-card {
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.contract-tenant-signed-alert-card strong {
  display: block;
  font-size: 1rem;
  line-height: 1.45;
  word-break: break-word;
}

.contract-tenant-signed-alert-card .contract-action-meta {
  margin-top: 0.35rem;
}

.contract-tenant-signed-alert-card .contract-action-date {
  margin-top: 0.25rem;
}

.header-notify-item-meta--success {
  color: var(--success);
  font-weight: 600;
}

.auto-deposit-alert {
  max-width: 28rem;
}

.auto-deposit-alert-lead {
  margin: 0 0 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.auto-deposit-alert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.auto-deposit-alert-item-btn {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 0.65rem 0.75rem;
  cursor: pointer;
}

.auto-deposit-alert-item-btn:hover {
  border-color: var(--success);
  background: rgba(22, 163, 74, 0.06);
}

.auto-deposit-alert-item-btn strong {
  display: block;
  margin-bottom: 0.2rem;
}

.auto-deposit-alert-item-meta {
  display: block;
  font-size: 0.84rem;
  color: var(--success);
}

.rent-overdue-alert {
  max-width: 480px;
  width: calc(100% - 2rem);
}

.rent-overdue-alert-lead {
  margin: 0 0 1rem;
  color: var(--text);
  line-height: 1.55;
  font-size: 0.95rem;
}

.rent-overdue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: min(50vh, 320px);
  overflow-y: auto;
}

.rent-overdue-item-btn {
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.9rem;
  border: 1px solid color-mix(in srgb, #dc2626 25%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, #dc2626 5%, var(--surface));
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.rent-overdue-item-btn:hover {
  border-color: color-mix(in srgb, #dc2626 45%, var(--border));
  background: color-mix(in srgb, #dc2626 8%, var(--surface));
}

.rent-overdue-item-btn strong {
  display: block;
  font-size: 0.98rem;
  line-height: 1.45;
  word-break: break-word;
}

.rent-overdue-item-meta {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.88rem;
  color: #b91c1c;
  line-height: 1.4;
}

.open-contract-body-save-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}

.open-contract-body-save-row .field-input {
  flex: 1 1 12rem;
  min-width: 0;
}

.open-contract-body-saved.hidden {
  display: none;
}

.open-contract-body-section {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.open-contract-body-saved {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, #f8fafc);
}

.open-contract-body-saved-title {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.open-contract-body-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.open-contract-body-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg, #fff);
}

.open-contract-body-item-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 8rem;
}

.open-contract-body-item-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.open-contract-body-item-saved-at {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.open-contract-body-saved-status {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: color-mix(in srgb, #22c55e 12%, var(--surface));
  color: #15803d;
  font-size: 0.88rem;
  font-weight: 600;
}

.open-contract-body-saved-status.hidden {
  display: none;
}

.open-contract-body-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.attachment-layout-save-mode-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

@media (min-width: 520px) {
  .attachment-layout-save-mode-options {
    grid-template-columns: 1fr 1fr;
  }
}

.attachment-layout-save-mode-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  padding: 0.9rem 0.95rem;
  border: 2px solid #c9cdd4;
  border-radius: 14px;
  background: #f3f4f6;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.04);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.attachment-layout-save-mode-option:hover:not(.attachment-layout-save-mode-option--disabled) {
  border-color: #8b93a1;
  background: #fff;
}

.attachment-layout-save-mode-option:active:not(.attachment-layout-save-mode-option--disabled) {
  transform: translateY(1px);
}

.attachment-layout-save-mode-option:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

.attachment-layout-save-mode-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.attachment-layout-save-mode-option__check {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  border: 2px solid #8b93a1;
  border-radius: 999px;
  background: #fff;
  box-sizing: border-box;
}

.attachment-layout-save-mode-option__copy {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

.attachment-layout-save-mode-option__title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #32363e;
  line-height: 1.3;
}

.attachment-layout-save-mode-option__desc {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #6b7280;
}

.attachment-layout-save-mode-option--selected {
  border-color: #2563eb;
  background: #fff;
  box-shadow:
    0 0 0 1px #2563eb,
    0 6px 16px rgba(37, 99, 235, 0.14);
}

.attachment-layout-save-mode-option--selected .attachment-layout-save-mode-option__check {
  border-color: #2563eb;
  background: #2563eb;
  box-shadow: inset 0 0 0 3px #fff;
}

.attachment-layout-save-mode-option--selected .attachment-layout-save-mode-option__title {
  color: #1d4ed8;
}

.attachment-layout-save-mode--new .attachment-layout-save-mode-option--selected {
  border-color: #0f766e;
  box-shadow:
    0 0 0 1px #0f766e,
    0 6px 16px rgba(15, 118, 110, 0.14);
}

.attachment-layout-save-mode--new
  .attachment-layout-save-mode-option--selected
  .attachment-layout-save-mode-option__check {
  border-color: #0f766e;
  background: #0f766e;
}

.attachment-layout-save-mode--new
  .attachment-layout-save-mode-option--selected
  .attachment-layout-save-mode-option__title {
  color: #0f766e;
}

.attachment-layout-save-mode--update .attachment-layout-save-mode-option--selected {
  border-color: #c2410c;
  box-shadow:
    0 0 0 1px #c2410c,
    0 6px 16px rgba(194, 65, 12, 0.14);
}

.attachment-layout-save-mode--update
  .attachment-layout-save-mode-option--selected
  .attachment-layout-save-mode-option__check {
  border-color: #c2410c;
  background: #c2410c;
}

.attachment-layout-save-mode--update
  .attachment-layout-save-mode-option--selected
  .attachment-layout-save-mode-option__title {
  color: #c2410c;
}

.attachment-layout-save-mode-option--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

.attachment-layout-save-preset-wrap {
  margin-top: 0.25rem;
  padding: 0.75rem 0.85rem;
  border: 1px dashed #d6c7b6;
  border-radius: 12px;
  background: #fbf8f4;
}

.attachment-layout-save-preset-wrap.is-update-mode {
  border-style: solid;
  border-color: color-mix(in srgb, #c2410c 35%, #d6c7b6);
  background: color-mix(in srgb, #c2410c 5%, #fff);
}

.attachment-layout-save-preset-list {
  max-height: min(240px, 40vh);
  overflow: auto;
}

.attachment-layout-save-preset-item {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.attachment-layout-save-preset-item.is-selected {
  border-color: #c2410c;
  background: color-mix(in srgb, #c2410c 10%, var(--bg, #fff));
}

.attachment-layout-save-preset-wrap:not(.is-update-mode)
  .attachment-layout-save-preset-item:not(.is-selected) {
  opacity: 0.88;
}

.open-contract-body-empty {
  margin: 0;
}

.open-contract-body-empty.hidden {
  display: none;
}

.open-contract-body-editing {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
  font-size: 0.88rem;
  font-weight: 600;
}

.open-contract-body-editing.hidden {
  display: none;
}

.open-sign-content-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.open-sign-content-head label {
  margin: 0;
}

.open-sign-content {
  min-height: 240px;
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
}

#contractContent {
  min-height: 420px;
  font-family: inherit;
  line-height: 1.55;
}

.contract-page {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.contract-page-form {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 12rem);
}

.contract-page-intro {
  padding: 1.25rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.contract-page-intro h2 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}

.contract-page-intro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.contract-page-intro-head h2 {
  margin: 0;
}

html.is-contract-editor-popup .header,
html.is-contract-editor-popup .subpage-nav,
html.is-contract-editor-popup .contract-hub,
html.is-contract-editor-popup .contracts-page-tabs,
html.is-contract-editor-popup #contractListSection,
html.is-contract-editor-popup #fileProtocolWarning {
  display: none !important;
}

html.is-contract-editor-popup-pending body {
  background: #f8fafc;
}

html.is-contract-editor-popup-pending .legacy-page-root {
  visibility: hidden;
}

html.is-contract-editor-popup-pending .legacy-page-loading {
  display: flex;
}

html.is-contract-editor-popup .main {
  max-width: none;
  padding: 0.5rem 0.75rem 1rem;
}

html.is-contract-editor-popup .contract-editor-popup-close.hidden {
  display: inline-flex !important;
}

html.is-contract-editor-popup[data-editor-mode="template"] #contractTemplateSection {
  display: block !important;
}

html.is-contract-editor-popup[data-editor-mode="template"] #contractTemplateSection.hidden {
  display: block !important;
}

html.is-contract-editor-popup[data-editor-mode="open"] #contractTemplateSection,
html.is-contract-editor-popup[data-editor-mode="attachment"] #contractTemplateSection {
  display: none !important;
}

html.is-contract-editor-popup[data-editor-mode="template"] .contract-page {
  border: none;
  border-radius: 0;
}

html.is-contract-editor-popup[data-editor-mode="template"] .contract-page-form {
  min-height: calc(100vh - 1.5rem);
}

html.is-contract-editor-popup[data-editor-mode="template"] #contractContent {
  min-height: 52vh;
}

@media (max-width: 1023px) {
  html.is-contract-editor-popup[data-editor-mode="template"] #contractContent,
  html[data-editor-mode="template"] #contractContent {
    min-height: min(58dvh, 30rem);
    height: min(58dvh, 30rem);
  }
}

html.is-contract-editor-popup[data-editor-mode="open"] #openSignLinkCreateModal:open,
html.is-contract-editor-popup[data-editor-mode="attachment"] #attachmentContractModal:open {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
}

html.is-contract-editor-popup[data-editor-mode="open"] #openSignLinkCreateModal::backdrop,
html.is-contract-editor-popup[data-editor-mode="attachment"] #attachmentContractModal::backdrop,
html[data-editor-mode="open"] #openSignLinkCreateModal::backdrop,
html[data-editor-mode="attachment"] #attachmentContractModal::backdrop {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.is-contract-editor-popup[data-editor-mode="open"] #openSignLinkCreateModal:open form,
html.is-contract-editor-popup[data-editor-mode="attachment"] #attachmentContractModal:open form {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100vh;
  min-height: 0;
}

html.is-contract-editor-popup[data-editor-mode="open"] #openSignLinkCreateModal:open .modal-body,
html.is-contract-editor-popup[data-editor-mode="attachment"] #attachmentContractModal:open .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

html.is-contract-editor-popup[data-editor-mode="attachment"] #attachmentContractModal:open .modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

html.is-contract-editor-popup[data-editor-mode="open"] #openSignLinkContent {
  min-height: 42vh;
}

html.is-contract-editor-popup[data-editor-mode="attachment"] .attachment-layout-doc {
  max-width: 794px;
  margin-left: auto;
  margin-right: auto;
}

html.is-contract-admin-popup .header,
html.is-contract-admin-popup .subpage-nav,
html.is-contract-admin-popup .contract-hub,
html.is-contract-admin-popup .contracts-page-tabs,
html.is-contract-admin-popup #contractListSection,
html.is-contract-admin-popup #fileProtocolWarning {
  display: none !important;
}

html.is-contract-admin-popup-pending body {
  background: #f8fafc;
}

html.is-contract-admin-popup-pending .header,
html.is-contract-admin-popup-pending .subpage-nav,
html.is-contract-admin-popup-pending .main,
html.is-contract-admin-popup-pending .legacy-page-root,
html.is-contract-admin-popup-pending .legacy-page-loading,
html.is-contract-admin-popup-pending #fileProtocolWarning {
  visibility: hidden;
}

html.is-contract-admin-popup .main {
  padding: 0;
  max-width: none;
}

html.is-contract-admin-popup #contractAdminModal,
html.is-contract-admin-popup #contractAdminModal[open] {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
}

html.is-contract-admin-popup #contractAdminModal::backdrop {
  background: transparent;
}

html.is-contract-admin-popup #contractAdminModal.modal-wide {
  max-height: none;
}

html.is-contract-admin-popup #contractAdminModal.modal-wide form {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100vh;
  min-height: 0;
}

html.is-contract-admin-popup #contractAdminModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

html.is-contract-admin-popup #contractAdminModal .modal-footer,
#contractAdminModal.modal-wide .modal-footer,
#contractAdminModal .contract-admin-modal-footer {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

#contractAdminModal .contract-admin-modal-footer .btn {
  pointer-events: auto;
}

.btn.is-busy {
  cursor: wait;
  opacity: 0.75;
}

.contracts-admin-sign-shell.is-legacy-page-busy .main {
  pointer-events: none;
}

html.is-contract-admin-popup #contractAdminModal .contract-admin-preview .contract-preview-viewport {
  min-height: 42vh;
}

.contract-template-intro-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.35rem;
}

.contract-template-intro-desc {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.contract-template-room-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  min-width: 10.5rem;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.contract-template-room-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: color-mix(in srgb, var(--primary) 11%, var(--surface));
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.12);
}

.contract-template-room-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.contract-template-room-btn-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
}

.contract-template-room-btn-label {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  line-height: 1.2;
  min-width: 0;
}

.contract-template-room-btn-label strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary);
}

.contract-template-room-btn-sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
}

.contract-template-room-btn-arrow {
  flex-shrink: 0;
  margin-left: 0.1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1;
}

.contract-template-room-hint {
  margin-top: 0.65rem;
}

@media (max-width: 640px) {
  .contract-template-intro-row {
    flex-wrap: wrap;
  }

  .contract-template-room-btn {
    width: 100%;
    justify-content: flex-start;
  }
}

.contract-page-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem 1rem;
  max-height: calc(100vh - 14rem);
}

.contract-page-sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: auto;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 96%, var(--bg));
  backdrop-filter: blur(8px);
}

.contract-template-saved-panel {
  padding: 0.65rem 1.25rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

.contract-template-saved-label {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.contract-dispatch-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--border);
}

.open-contracts-panel {
  margin-top: 1rem;
}

.open-contracts-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.open-contract-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  background: var(--bg);
}

.open-contract-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.open-contract-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.open-contract-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.open-contract-status {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--surface-hover);
  color: var(--text-muted);
}

.open-contract-status-tenant_signed {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
}

.open-contract-status-completed {
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
  color: color-mix(in srgb, var(--success) 80%, var(--text));
}

.contract-page-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.85rem 1.25rem;
  background: transparent;
}

.contract-template-saved-panel .contract-template-preset-buttons {
  max-height: 5.5rem;
  overflow-y: auto;
}

.contract-page-footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.contract-save-status {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.contract-save-status.is-dirty {
  color: var(--primary);
  font-weight: 600;
}

#btnSaveContractTemplate:not(:disabled) {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}

.business-profile-body {
  max-height: 70vh;
  overflow-y: auto;
}

.contract-template-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.contract-template-preset-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.contract-template-preset-chip {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface, #fff);
}

.contract-template-preset-btn {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: none;
  border-radius: 0;
}

.contract-template-preset-delete {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  padding: 0 0.35rem;
  border: none;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--muted, #888);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.contract-template-preset-delete:hover {
  background: rgba(220, 53, 69, 0.08);
  color: #c0392b;
}

.add-room-count-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.5rem;
}

.number-stepper {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.number-stepper-btn {
  min-width: 2.25rem;
  padding-inline: 0.5rem;
  font-size: 1.1rem;
  line-height: 1;
}

.number-stepper-input {
  width: 4rem;
  text-align: center;
  padding: 0.45rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
}

.number-stepper-input:focus {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  border-color: var(--primary);
}

.number-stepper-floor-label {
  min-width: 5.5rem;
  text-align: center;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  background: var(--surface);
}

.add-room-count-preview {
  margin: 0.85rem 0 0;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.15);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--primary);
}

.signature-pad-wrap {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 0.5rem;
  background: #fff;
}

.signature-pad {
  display: block;
  width: 100%;
  height: 140px;
  touch-action: none;
  cursor: crosshair;
  background: transparent;
  border-radius: 6px;
}

.signature-pad-wrap + .sign-actions {
  justify-content: center;
}

.sign-page .sign-actions--end {
  justify-content: flex-end;
}

.sign-preview > .contract-preview-toolbar {
  justify-content: center;
}

.sign-preview .contract-preview-print {
  margin-left: 0;
}

.signature-pad-wrap + #btnClearAdminSign {
  display: block;
  width: fit-content;
  margin-left: auto;
}

.contract-preview-panel {
  margin-top: 0.35rem;
}

/* ?꾩옄怨꾩빟??誘몃━蹂닿린 ??A4 ?몃줈(210횞297mm) ?⑹? 媛€濡쒗룺??留욎땄 */
#contractAdminModal {
  --contract-a4-preview-width: min(100%, 210mm);
}

#contractAdminModal .contract-admin-preview {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

#contractAdminModal .contract-admin-preview .contract-preview-viewport {
  width: var(--contract-a4-preview-width, min(100%, 210mm));
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

#contractAdminModal .contract-admin-preview > .contract-preview-toolbar {
  justify-content: flex-end;
  padding-right: 0.15rem;
}

.sign-preview.contract-preview-panel {
  width: var(--contract-a4-preview-width, min(100%, 210mm));
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

html.is-contract-admin-popup #contractAdminModal #contractAdminSignSection,
html.is-contract-admin-popup #contractAdminModal #contractAdminConfirmSection,
html.is-contract-admin-popup #contractAdminModal #contractAdminActionSection {
  width: var(--contract-a4-preview-width);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

html[data-page="sign"] .sign-page,
html.is-tenant-sign-popup .sign-page {
  --contract-a4-preview-width: min(100%, 210mm);
  max-width: 210mm;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

html[data-page="sign"] body,
html.is-tenant-sign-popup body {
  overflow-x: hidden;
}

html[data-page="sign"] .sign-preview.contract-preview-panel,
html[data-page="sign"] #tenantSignForm,
html[data-page="sign"] #signMain > .sign-card,
html[data-page="sign"] #signViewOnly > .sign-card,
html[data-page="sign"] #signLoading,
html[data-page="sign"] #signError,
html.is-tenant-sign-popup .sign-preview.contract-preview-panel,
html.is-tenant-sign-popup #tenantSignForm {
  width: var(--contract-a4-preview-width);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.contract-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
}

.contract-preview-toolbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  margin-left: auto;
  flex: 0 0 auto;
}

.contract-preview-print {
  margin-left: 0;
  flex: 0 0 auto;
}

.contract-preview-print.hidden {
  display: none;
}

.contract-preview-toolbar--print-only:not(:has(.contract-preview-print:not(.hidden))) {
  display: none;
}

.contract-preview-viewport {
  overflow-x: hidden;
  overflow-y: auto;
  height: min(70vh, 720px);
  max-height: min(70vh, 720px);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  position: relative;
}

.contract-preview-viewport.contract-preview-zoomed {
  overflow-x: auto !important;
  overflow-y: auto !important;
  touch-action: pan-x pan-y;
  overscroll-behavior: contain;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}

.contract-preview-viewport.contract-preview-panning {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

#contractAdminModal .contract-admin-preview .contract-preview-viewport.contract-preview-zoomed {
  overflow: auto !important;
  flex-shrink: 0;
  touch-action: pan-x pan-y !important;
  overscroll-behavior: contain;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}

#contractAdminModal .contract-admin-preview .contract-preview-viewport.contract-preview-zoomed.contract-preview-panning {
  cursor: grabbing;
}

.contract-preview-panel > .contract-preview-toolbar {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0 0 0.5rem;
  padding: 0.35rem 0 0.5rem;
  background: var(--surface, #fff);
  box-shadow: 0 4px 8px -4px rgba(15, 23, 42, 0.12);
}

.contract-preview-viewport > .contract-preview-toolbar {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  width: 100%;
  box-sizing: border-box;
}

.contract-preview-zoom-label {
  min-width: 3rem;
  text-align: center;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted, #64748b);
}

.contract-preview-scaler {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  max-width: none;
}

.contract-preview-scaler iframe {
  width: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
  display: block;
}

#contractAdminModal .contract-admin-preview .contract-preview-viewport:not(.has-attachment-preview):not(.contract-preview-zoomed) {
  height: auto;
  max-height: none;
  flex-shrink: 0;
  overflow: visible;
  overscroll-behavior: auto;
  touch-action: auto;
}

#contractAdminModal .contract-admin-preview .contract-preview-viewport.has-attachment-preview:not(.contract-preview-zoomed) {
  height: auto;
  max-height: none;
  flex-shrink: 0;
  overflow: visible;
  overscroll-behavior: auto;
  touch-action: auto;
}

#contractAdminModal .contract-admin-preview .contract-preview-viewport.has-attachment-preview .attachment-doc-frame {
  pointer-events: none;
}

#contractAdminModal .contract-admin-preview .contract-preview-viewport.has-attachment-preview .attachment-preview-host img.attachment-doc-img {
  width: 100%;
  height: auto;
  display: block;
}

#contractAdminModal .contract-admin-preview .contract-preview-scaler {
  display: block;
  width: 100%;
}

#contractAdminModal .contract-admin-preview .contract-preview-viewport.contract-preview-zoomed .contract-preview-scaler {
  width: auto;
  max-width: none;
}

#contractAdminModal .contract-admin-preview .contract-preview-scaler iframe {
  width: 100%;
  min-height: 0;
  touch-action: auto;
}

#contractAdminModal .contract-admin-preview .contract-preview-viewport.contract-preview-zoomed .contract-preview-scaler iframe {
  pointer-events: none;
}

#contractAdminModal .contract-admin-preview .contract-preview-viewport:not(.has-attachment-preview):not(.contract-preview-zoomed) .contract-preview-scaler iframe {
  pointer-events: auto;
}

#contractAdminModal .contract-admin-preview .contract-preview-viewport.has-attachment-preview .contract-preview-scaler iframe {
  pointer-events: none;
  touch-action: auto;
}

.sign-preview.contract-preview-panel .contract-preview-viewport:not(.contract-preview-zoomed) {
  height: auto;
  max-height: none;
  overflow: visible;
}

.sign-preview.contract-preview-panel .contract-preview-viewport.contract-preview-zoomed {
  overflow: auto !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  touch-action: pan-x pan-y;
  overscroll-behavior: contain;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}

.sign-preview.contract-preview-panel .contract-preview-viewport.contract-preview-zoomed.contract-preview-panning {
  cursor: grabbing;
}

.sign-preview.contract-preview-panel .contract-preview-viewport.contract-preview-zoomed .contract-preview-scaler {
  width: auto;
  max-width: none;
}

.sign-preview.contract-preview-panel .contract-preview-scaler iframe {
  min-height: 0;
  /* Preview is view-only: let wheel/touch pass through to the page so it
     scrolls natively at full speed (no JS bridge needed). */
  pointer-events: none;
}

.contract-view-lock {
  margin: 0.75rem 0 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt, #f8fafc);
}

.contract-view-lock-action {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.15rem;
}

.contract-view-lock-error {
  color: #dc2626;
  margin-top: 0.5rem;
}

.contract-admin-preview.contract-preview-locked iframe {
  min-height: 120px;
  opacity: 0.35;
  pointer-events: none;
  filter: blur(2px);
}

.sign-link-copy-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.sign-link-copy-row .field-input {
  flex: 1;
  min-width: 0;
}

.sign-link-copy-row .btn {
  flex-shrink: 0;
}

.sign-link-sms-row {
  margin-top: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.sign-link-sms-actions {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-top: 0.85rem;
}

.sign-link-sms-btn {
  width: 100%;
  min-height: 2.75rem;
  font-family: var(--font-sans, "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sign-link-sms-btn-webauthn {
  background: #1f4e79;
  border-color: #1f4e79;
}

.sign-link-sms-btn-webauthn:hover:not(:disabled) {
  background: #163a5c;
  border-color: #163a5c;
}

.sign-link-tenant-phone {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}

.sign-link-sms-row .btn {
  width: 100%;
}

.sign-link-sms-row .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.contract-status-badge {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
}

.contract-status-waiting {
  background: rgba(234, 179, 8, 0.12);
  color: #a16207;
  border: 1px solid rgba(234, 179, 8, 0.35);
}

.contract-status-tenant-done {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.contract-status-completed {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.contract-status-rejected {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.contract-admin-action-section {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}

.contract-admin-action-section .profile-section-title {
  margin-top: 0;
}

.contract-admin-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.contract-admin-status {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}

.contract-admin-status-tenant-done {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.contract-admin-status-pending {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.contract-admin-status-completed {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.contract-admin-confirm-section {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.contract-admin-confirm-section .field-hint {
  margin: 0;
}

.contract-completed-panel {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.contract-completed-message {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1d4ed8;
}

.contract-completed-actions {
  margin-top: 0.85rem;
}

.main {
  max-width: none;
  margin: 0 auto;
  width: 100%;
  padding: 1.25rem;
  box-sizing: border-box;
}

.stats {
  --stat-gap: clamp(0.45rem, 0.55vw, 0.85rem);
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--stat-gap);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  width: 100%;
  align-items: stretch;
}

@media (min-width: 1281px) {
  .stats {
    --stat-gap: 0.35rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--stat-gap);
  }

  .stat-card-count {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    padding: 0.32rem 0.42rem;
    border-top-width: 2px;
    padding-top: calc(0.32rem + 2px);
    white-space: nowrap;
  }

  .stat-card-count .stat-label {
    font-size: 0.6875rem;
    line-height: 1.15;
  }

  .stat-card-count .stat-value {
    font-size: 0.9375rem;
    line-height: 1.1;
  }

  .stat-card:not(.stat-card-count) {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.32rem 0.42rem;
    gap: 0.08rem;
  }

  .stat-card:not(.stat-card-count) .stat-label {
    font-size: 0.6875rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .stat-card:not(.stat-card-count) .stat-value {
    font-size: clamp(0.75rem, 0.55vw + 0.45rem, 0.9375rem);
    line-height: 1.15;
  }
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(0.55rem, 0.35rem + 0.55vw, 1rem)
    clamp(0.5rem, 0.25rem + 0.45vw, 1.05rem);
  box-shadow: var(--shadow);
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.15rem, 0.25vw, 0.3rem);
}

.stat-card-count {
  text-align: center;
  border-top: 3px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  padding-top: clamp(0.5rem, 0.3rem + 0.4vw, 0.75rem);
}

.stat-card-count.stat-occupied {
  border-top-color: var(--occupied);
}

.stat-card-count.stat-vacant {
  border-top-color: var(--vacant);
}

.stat-card-count .stat-label {
  font-size: clamp(0.625rem, 0.28vw + 0.56rem, 0.78rem);
  line-height: 1.25;
}

.stat-card-count .stat-value {
  font-size: clamp(1.05rem, 0.65vw + 0.72rem, 1.55rem);
}

.stat-label {
  display: block;
  font-size: clamp(0.625rem, 0.32vw + 0.54rem, 0.8125rem);
  color: var(--text-muted);
  line-height: 1.3;
  margin-bottom: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.stat-value {
  font-size: clamp(0.8125rem, 0.45vw + 0.58rem, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-occupied .stat-value { color: var(--occupied); }
.stat-vacant .stat-value { color: var(--vacant); }
.stat-revenue .stat-value { color: var(--primary); }
.stat-paid .stat-value { color: var(--success); }
.stat-arrears .stat-value { color: var(--danger); }
.stat-deposit .stat-value { color: var(--warning); }
.stat-unpaid .stat-value { color: var(--danger); }

@media (max-width: 1280px) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-value {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-all;
  }
}

@media (max-width: 420px) {
  .stats {
    grid-template-columns: 1fr;
  }

  .stat-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
  }

  .stat-card-count {
    text-align: left;
  }

  .stat-label {
    flex: 1 1 auto;
    min-width: 0;
  }

  .stat-value {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    word-break: normal;
  }
}

.room-card.unpaid {
  --room-card-inner-start: rgba(239, 68, 68, 0.16);
  --room-card-inner-end: rgba(254, 242, 242, 0.72);
  --room-card-inner-glow: rgba(239, 68, 68, 0.08);
}

.room-card.rent-overdue {
  --room-card-inner-start: rgba(239, 68, 68, 0.18);
  --room-card-inner-end: rgba(254, 242, 242, 0.78);
  --room-card-inner-glow: rgba(239, 68, 68, 0.1);
  border: 1px solid #dc2626;
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.12);
}

.room-rent-overdue {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--danger);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.room-card-auto-sms-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.35rem;
  border-radius: 0.25rem;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.room-card-auto-sms-badge.is-on {
  color: #166534;
  background: #dcfce7;
}

.room-card-auto-sms-badge.is-off {
  color: #44474d;
  background: color-mix(in srgb, #111827 10%, #fff);
}

.room-card-overdue-with-sms {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.room-card-rent-day {
  flex-shrink: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.room-card-rent-day.is-due-today {
  color: #b45309;
}

.room-unpaid-countdown {
  color: #2563eb;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.room-card.rent-paid {
  --room-card-inner-start: rgba(59, 130, 246, 0.18);
  --room-card-inner-end: rgba(239, 246, 255, 0.78);
  --room-card-inner-glow: rgba(59, 130, 246, 0.1);
}

.room-card.has-arrears {
  --room-card-inner-start: rgba(245, 158, 11, 0.16);
  --room-card-inner-end: rgba(255, 251, 235, 0.72);
  --room-card-inner-glow: rgba(245, 158, 11, 0.08);
}

.rent-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-weight: 600;
  margin-top: 0.35rem;
  display: inline-block;
}

.rent-badge.paid {
  background: rgba(34, 197, 94, 0.2);
  color: var(--success);
}

.rent-badge.unpaid {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger);
}

.rent-badge.na {
  background: rgba(100, 116, 139, 0.2);
  color: var(--vacant);
}

.room-list-quick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.room-quick-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  font-family: inherit;
}

button.room-quick-badge {
  cursor: pointer;
}

button.room-quick-badge:hover {
  filter: brightness(0.96);
}

.room-quick-badge.rent.paid {
  background: rgba(34, 197, 94, 0.2);
  color: var(--success);
}

.room-quick-badge.rent.unpaid {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger);
}

.room-quick-badge.rent.na {
  background: rgba(100, 116, 139, 0.2);
  color: var(--vacant);
}

.room-quick-badge.rent.pending {
  background: rgba(148, 163, 184, 0.16);
  color: var(--text-muted);
}

.room-quick-badge.contract.draft {
  background: rgba(59, 130, 246, 0.18);
  color: #1d4ed8;
}

.room-quick-badge.contract.pending {
  background: rgba(168, 85, 247, 0.18);
  color: #7e22ce;
}

.room-quick-badge.contract.admin-pending {
  background: rgba(234, 179, 8, 0.22);
  color: #a16207;
}

.room-quick-badge.contract.complete {
  background: rgba(34, 197, 94, 0.18);
  color: #15803d;
}

.room-quick-badge.contract.tenant-signed {
  background: rgba(234, 179, 8, 0.22);
  color: #a16207;
}

.col-rent-quick {
  white-space: nowrap;
}

.col-rent-quick .room-list-quick-actions {
  margin-top: 0;
}

.room-unpaid-manual {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--warning);
  margin-top: 0.35rem;
  line-height: 1.3;
}

.col-unpaid {
  font-size: 0.85rem;
  color: var(--warning);
  white-space: nowrap;
}

.form-hint-block {
  margin: -0.5rem 0 0.25rem;
  padding-left: 0.1rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text);
}

.checkbox-label input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--primary);
}

.form-hint {
  margin: 0.35rem 0 0 1.6rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.rent-paid-row.hidden {
  display: none;
}

.rent-paid-toggle {
  display: block;
  cursor: pointer;
  margin: 0;
}

.rent-paid-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.rent-paid-toggle-face {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  border: 2px solid #c5c6ce;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: left;
  background: #ffffff;
  color: #031632;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s,
    transform 0.12s;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.rent-paid-toggle-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.45rem;
  height: 1.45rem;
  border: 2px solid #8793a6;
  border-radius: 0.35rem;
  background: #ffffff;
  color: #ffffff;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.rent-paid-toggle-check {
  display: none;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}

.rent-paid-toggle-label {
  min-width: 0;
  line-height: 1.25;
}

.rent-paid-toggle-face.is-unpaid,
.rent-paid-toggle-input:not(:checked) + .rent-paid-toggle-face {
  border-color: #e67e22;
  background: #fff7ef;
  color: #9a3412;
  box-shadow: inset 0 0 0 1px rgba(230, 126, 34, 0.12);
}

.rent-paid-toggle-face.is-unpaid .rent-paid-toggle-box,
.rent-paid-toggle-input:not(:checked) + .rent-paid-toggle-face .rent-paid-toggle-box {
  border-color: #e67e22;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.18);
}

.rent-paid-toggle-face.is-unpaid:hover,
.rent-paid-toggle-input:not(:checked) + .rent-paid-toggle-face:hover {
  border-color: #d35400;
  background: #ffedd5;
  color: #7c2d12;
}

.rent-paid-toggle-face:active {
  transform: scale(0.985);
}

.rent-paid-toggle-input:focus-visible + .rent-paid-toggle-face {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.rent-paid-toggle-input:checked + .rent-paid-toggle-face,
.rent-paid-toggle-face.is-paid {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, #ffffff);
  color: #14532d;
  box-shadow: none;
}

.rent-paid-toggle-input:checked + .rent-paid-toggle-face .rent-paid-toggle-box,
.rent-paid-toggle-face.is-paid .rent-paid-toggle-box {
  border-color: var(--success);
  background: var(--success);
  color: #ffffff;
}

.rent-paid-toggle-input:checked + .rent-paid-toggle-face .rent-paid-toggle-check,
.rent-paid-toggle-face.is-paid .rent-paid-toggle-check {
  display: inline-block;
}

.rent-paid-toggle-input:checked + .rent-paid-toggle-face:hover,
.rent-paid-toggle-face.is-paid:hover {
  border-color: color-mix(in srgb, var(--success) 85%, #000);
  background: color-mix(in srgb, var(--success) 18%, #ffffff);
  color: #14532d;
}

.rent-paid-hint {
  margin-left: 0;
  text-align: left;
}

.hidden {
  display: none !important;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--stitch-surface-variant);
  padding-bottom: 0;
  font-family: var(--font-nav);
}

.tab-board-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 10rem;
  min-width: 0;
  max-width: 100%;
  min-height: 2.35rem;
  --board-ticker-width-ratio: 0.8;
}

.board-notice-ticker {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc((100% - 5rem) * var(--board-ticker-width-ratio));
  margin-left: auto;
  cursor: pointer;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.98) 0%, rgba(241, 245, 249, 0.94) 100%);
  border: 1px solid rgba(123, 147, 168, 0.22);
  box-shadow: 0 1px 3px rgba(90, 110, 130, 0.06);
  padding: 0.25rem 0.65rem 0.25rem 0.45rem;
  height: 2.125rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.main-notice-ticker-bar {
  display: flex;
  width: 100%;
  margin: 0 0 0.85rem;
}

.main-notice-ticker-bar .board-notice-ticker {
  flex: 1 1 auto;
  max-width: 100%;
  margin-left: 0;
  width: 100%;
}

.board-notice-ticker:hover {
  border-color: rgba(123, 147, 168, 0.34);
  box-shadow: 0 2px 8px rgba(90, 110, 130, 0.1);
}

.board-notice-marquee {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 1.35rem;
  line-height: 1.35rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #5c6b7a;
  vertical-align: middle;
  overflow: hidden;
}

.board-notice-ticker-badge {
  flex-shrink: 0;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #9eb3c4 0%, #7b93a8 100%);
  border: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

@media (max-width: 720px) {
  .tab-board-group {
    width: 100%;
    justify-content: flex-start;
  }

  .board-notice-ticker {
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc((100% - 4.5rem) * var(--board-ticker-width-ratio, 0.8));
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-notice-marquee {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.tab {
  position: relative;
  padding: 0.65rem 1.25rem;
  border: none;
  background: transparent;
  color: var(--stitch-on-surface-variant);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.tab:hover {
  color: var(--stitch-primary);
}

.tab.active {
  color: var(--stitch-primary);
  border-bottom-color: var(--stitch-primary);
  font-weight: 600;
}

.panel.hidden {
  display: none !important;
}

main > .panel {
  display: none !important;
}

main > .panel.active {
  display: block !important;
}

#panelBoard:not(.active) {
  display: none !important;
}

.room-order {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0;
  font-weight: 600;
}

.col-order {
  color: var(--text-muted);
  font-weight: 600;
  width: 1%;
  white-space: nowrap;
  padding-left: 0.45rem;
  padding-right: 0.35rem;
}

.room-table th:first-child {
  width: 1%;
  white-space: nowrap;
  padding-left: 0.45rem;
  padding-right: 0.35rem;
}

.room-table-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.2rem;
  padding: 0.12rem;
  color: var(--text-muted);
  opacity: 0.55;
  cursor: grab;
  user-select: none;
  vertical-align: middle;
  touch-action: none;
}

.room-table-drag-grip {
  display: grid;
  grid-template-columns: repeat(2, 2.5px);
  grid-template-rows: repeat(3, 2.5px);
  gap: 2px;
}

.room-table-drag-grip span {
  display: block;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: currentColor;
}

.room-table-drag-handle:hover {
  opacity: 1;
  color: var(--accent, #2563eb);
}

.room-table-drag-handle:active {
  cursor: grabbing;
}

.room-table-order-num {
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

tr.room-table-row-dragging {
  opacity: 0.45;
}

tr.room-table-row-drag-over td {
  box-shadow: inset 0 2px 0 var(--accent, #2563eb);
}

.modal-footer-split {
  justify-content: space-between;
  align-items: center;
}

.modal-footer-left {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.modal-footer-actions {
  display: flex;
  gap: 0.5rem;
}

.finance-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.finance-month-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.finance-tax-btn {
  align-self: flex-end;
  box-sizing: border-box;
  height: calc(0.6rem * 2 + 1em + 2px);
  padding: 0 0.85rem;
  font-size: 0.875rem;
  line-height: 1;
  white-space: nowrap;
}

.finance-period-query-btn {
  align-self: flex-end;
  box-sizing: border-box;
  height: calc(0.6rem * 2 + 1em + 2px);
  padding: 0 1rem;
  font-size: 0.875rem;
  line-height: 1;
  white-space: nowrap;
}

.month-picker-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.month-picker-label input {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}

.finance-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.finance-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

.finance-card h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.finance-card.income h3 { color: var(--success); }
.finance-card.expense h3 { color: var(--danger); }
.finance-card.net h3 { color: var(--primary); }

.finance-card dl {
  margin: 0;
}

.finance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(45, 58, 79, 0.5);
}

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

.finance-row dt {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.finance-row dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

.finance-row.editable dd {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.finance-row.editable input {
  width: 120px;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  text-align: right;
}

.finance-row.total {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  border-bottom: none;
}

.finance-row.total dt,
.finance-row.total dd {
  font-size: 1rem;
  color: var(--text);
  font-weight: 700;
}

.tag-auto {
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.2);
  color: var(--primary);
  font-weight: 600;
  vertical-align: middle;
}

.unit {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.net-label {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.net-value {
  margin: 0.35rem 0;
  font-size: 2rem;
  font-weight: 800;
  color: var(--success);
  letter-spacing: -0.02em;
}

.net-value.negative {
  color: var(--danger);
}

.net-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.finance-card-memo {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(45, 58, 79, 0.5);
}

.finance-card-memo label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.finance-card-memo textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  min-height: 3.5rem;
}

.finance-recurring-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(45, 58, 79, 0.5);
}

.finance-recurring-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.finance-recurring-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.finance-recurring-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.finance-recurring-hint {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.finance-recurring-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.finance-recurring-empty {
  margin: 0;
  padding: 0.5rem 0;
}

.finance-recurring-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 140px) auto;
  gap: 0.5rem;
  align-items: center;
}

.finance-recurring-name {
  min-width: 0;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.3;
}

.finance-recurring-amount-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.finance-recurring-amount {
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.78rem;
  text-align: right;
}

.finance-recurring-remove {
  min-width: 1.75rem;
  padding: 0.25rem 0.4rem;
  font-size: 1rem;
  line-height: 1;
}

.finance-save-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 1rem;
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: sticky;
  bottom: 0.75rem;
  z-index: 6;
}

.finance-save-bar .btn-primary {
  min-width: 9rem;
  padding: 0.65rem 1.25rem;
  font-size: 0.95rem;
}

.finance-save-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.finance-memo-row {
  margin-bottom: 1.5rem;
}

.finance-memo-row label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.finance-memo-row textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  resize: vertical;
}

.finance-paid-list h3 {
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  color: var(--text-muted);
}

.paid-rooms-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 280px;
  overflow-y: auto;
}

.paid-room-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

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

.paid-room-order {
  color: var(--text-muted);
  font-weight: 600;
  min-width: 3rem;
}

.paid-room-month {
  color: var(--text-muted);
  font-size: 0.82rem;
  min-width: 4.5rem;
  font-variant-numeric: tabular-nums;
}

.paid-room-name {
  flex: 1;
}

.paid-room-departed-tag {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-muted, rgba(0, 0, 0, 0.06));
  vertical-align: middle;
}

.paid-room-item--departed .paid-room-name {
  color: var(--text-muted);
}

.paid-room-months {
  color: var(--text-muted);
  font-size: 0.82rem;
  min-width: 3.2rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.paid-room-fee {
  font-weight: 600;
  color: var(--success);
}

.empty-inline {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-muted);
  margin: 0;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.rooms-toolbar {
  margin-bottom: 1.25rem;
}

.rooms-toolbar-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.rooms-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.rooms-sticky-bar {
  display: flex;
  flex: 1 1 auto;
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
}

.rooms-sticky-spacer {
  display: none;
}

@media (min-width: 769px) {
  #panelRooms > .rooms-toolbar {
    grid-column: 1 / -1;
    margin-bottom: 1.25rem;
  }

  #panelRooms .rooms-toolbar-main {
    flex-wrap: nowrap;
    gap: 0.55rem;
    width: 100%;
  }

  #panelRooms .rooms-sticky-bar {
    flex: 1 1 auto;
    min-width: 0;
  }

  #panelRooms .rooms-sticky-bar #btnAddRoom {
    flex-shrink: 0;
    white-space: nowrap;
  }

  #panelRooms .search-wrap {
    flex: 1 1 auto;
    min-width: 8.5rem;
    max-width: none;
  }

  #panelRooms .filters {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 0.4rem;
  }

  #panelRooms .filters select {
    max-width: 8.25rem;
    padding: 0.55rem 0.6rem;
    font-size: 0.88rem;
  }

  #panelRooms .rooms-toolbar-actions {
    flex: 0 0 auto;
    gap: 0.55rem;
    margin-left: auto;
  }

  #panelRooms .departed-link-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.search-wrap {
  flex: 1;
  min-width: 200px;
}

.search-wrap input {
  width: 100%;
  padding: 0.65rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
}

.search-wrap input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.filters {
  display: flex;
  gap: 0.5rem;
}

.filters select {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
}

.view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.view-btn {
  padding: 0.55rem 0.85rem;
  border: none;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.15s, color 0.15s;
}

.view-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.view-btn.active {
  background: var(--primary);
  color: #fff;
}

.legacy-page-shell {
  position: relative;
  min-height: 0;
}

.legacy-page-shell.is-legacy-page-busy .legacy-page-root .main > *:not(.tabs) {
  opacity: 0.35;
  pointer-events: none;
}

.legacy-page-shell.is-legacy-page-busy .legacy-page-root > *:not(.main) {
  visibility: hidden;
  pointer-events: none;
}

.legacy-page-loading {
  padding: 1rem;
  text-align: center;
  color: var(--text-muted, #64748b);
  pointer-events: none;
}

.legacy-page-shell.is-legacy-page-busy .main > .tabs,
.legacy-page-shell.is-legacy-page-busy .main > .tabs .tab,
.legacy-page-shell.is-legacy-page-busy .tab-board-group,
.legacy-page-shell.is-legacy-page-busy .tab-board-group .tab {
  visibility: visible;
  pointer-events: auto;
  max-height: none;
  overflow: visible;
}

/* 방관리 콜드 부트: 헤더·탭은 바로, 배너만 가볍게 */
.main-page-shell.main-page-shell--booting .legacy-page-loading.main-page-boot-banner {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}
.main-page-shell.main-page-shell--booting.is-legacy-page-busy
  .legacy-page-root
  .main
  > *:not(.tabs) {
  opacity: 0.72;
}
.main-page-shell.main-page-shell--booting .main-legacy-root--booting {
  min-height: 40vh;
}

.legacy-page-error {
  padding: 1rem;
  color: #b91c1c;
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}

.room-card {
  --room-card-inner-start: rgba(248, 250, 252, 0.9);
  --room-card-inner-end: rgba(255, 255, 255, 0.35);
  --room-card-inner-glow: rgba(148, 163, 184, 0.06);
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  text-align: left;
  font-family: inherit;
  color: inherit;
  width: 100%;
  contain: layout style paint;
  position: relative;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.room-card--status-vacant {
  --room-card-inner-start: rgba(100, 116, 139, 0.14);
  --room-card-inner-end: rgba(241, 245, 249, 0.45);
  --room-card-inner-glow: rgba(100, 116, 139, 0.07);
}

.room-card--status-occupied {
  --room-card-inner-start: rgba(34, 197, 94, 0.15);
  --room-card-inner-end: rgba(240, 253, 244, 0.5);
  --room-card-inner-glow: rgba(34, 197, 94, 0.08);
}

.room-card--status-reserved {
  --room-card-inner-start: rgba(245, 158, 11, 0.16);
  --room-card-inner-end: rgba(255, 251, 235, 0.52);
  --room-card-inner-glow: rgba(245, 158, 11, 0.08);
}

.room-card--status-emergency {
  --room-card-inner-start: rgba(6, 182, 212, 0.15);
  --room-card-inner-end: rgba(236, 254, 255, 0.52);
  --room-card-inner-glow: rgba(6, 182, 212, 0.08);
}

.room-card--status-repair {
  --room-card-inner-start: rgba(249, 115, 22, 0.16);
  --room-card-inner-end: rgba(255, 247, 237, 0.52);
  --room-card-inner-glow: rgba(249, 115, 22, 0.08);
}

.room-card--status-office {
  --room-card-inner-start: rgba(99, 102, 241, 0.16);
  --room-card-inner-end: rgba(238, 242, 255, 0.52);
  --room-card-inner-glow: rgba(99, 102, 241, 0.08);
}

.room-card--status-shop {
  --room-card-inner-start: rgba(217, 119, 6, 0.16);
  --room-card-inner-end: rgba(255, 251, 235, 0.52);
  --room-card-inner-glow: rgba(217, 119, 6, 0.08);
}

.room-card-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0.38rem 0.7rem;
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
}

.room-card-topbar-status {
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.room-card-topbar-number {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.room-card--status-vacant .room-card-topbar {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #475569;
}

.room-card--status-occupied .room-card-topbar {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
}

.room-card--status-reserved .room-card-topbar {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  color: #1f2937;
}

.room-card--status-emergency .room-card-topbar {
  background: linear-gradient(180deg, #06b6d4 0%, #0891b2 100%);
}

.room-card--status-repair .room-card-topbar {
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
}

.room-card--status-office .room-card-topbar {
  background: linear-gradient(180deg, #818cf8 0%, #4f46e5 100%);
}

.room-card--status-shop .room-card-topbar {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  color: #1f2937;
}

.room-card-body {
  padding: 0.65rem 0.85rem 0.9rem;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, var(--room-card-inner-glow), transparent 58%),
    linear-gradient(180deg, var(--room-card-inner-start) 0%, var(--room-card-inner-end) 100%);
}

.room-card-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.room-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.1),
    inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.room-card.rent-paid:hover,
.room-card.unpaid:hover,
.room-card.has-arrears:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.1),
    inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.room-card.rent-overdue:hover {
  transform: translateY(-2px);
  border-color: #b91c1c;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.16);
}

.room-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.room-card-header-end {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.room-card-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.room-card-more:hover,
.room-card-more:focus-visible {
  color: var(--text);
  border-color: var(--border);
  background: rgba(148, 163, 184, 0.12);
}

.room-options-preview {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-modal-options-summary {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--stitch-surface-variant, #e3e2e1);
}

.room-modal-options-summary-label {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.room-modal-options-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.room-modal-options-summary-head .room-modal-options-summary-label {
  margin: 0;
}

.room-modal-options-summary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.room-modal-options-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--stitch-on-surface, #1a1c1c);
  background: rgba(3, 22, 50, 0.06);
  border: 1px solid rgba(3, 22, 50, 0.08);
}

.room-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.75rem;
}

.room-option-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  cursor: pointer;
  user-select: none;
}

.room-option-check input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex-shrink: 0;
}

@media (max-width: 420px) {
  .room-options-grid {
    grid-template-columns: 1fr;
  }
}

.room-number {
  font-size: 1.1rem;
  font-weight: 700;
}

.status-badge {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.status-vacant {
  background: rgba(100, 116, 139, 0.25);
  color: #94a3b8;
}

.status-occupied {
  background: rgba(34, 197, 94, 0.2);
  color: var(--occupied);
}

.status-reserved {
  background: rgba(245, 158, 11, 0.2);
  color: var(--reserved);
}

.status-emergency {
  background: rgba(239, 68, 68, 0.22);
  color: #f87171;
}

.status-repair {
  background: rgba(249, 115, 22, 0.2);
  color: #ea580c;
}

.status-office {
  background: rgba(99, 102, 241, 0.2);
  color: #4f46e5;
}

.status-shop {
  background: rgba(217, 119, 6, 0.2);
  color: #b45309;
}

.room-fee {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.room-preview {
  margin: 0.35rem 0 0.25rem;
  min-height: 2.25rem;
}

.room-tenant-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-tenant-name .no-tenant {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.85rem;
  opacity: 0.55;
}

.room-tenant-phone,
.room-tenant-dates {
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--text-muted);
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-tenant-dates--sort-focus {
  font-weight: 600;
  color: var(--primary);
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed rgba(59, 130, 246, 0.35);
}

.room-card--stay-date-sort .room-preview {
  min-height: 3.5rem;
}

.room-card--stay-date-sort .room-tenant-name {
  opacity: 0.88;
}

.room-payment-day {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: 0.35rem;
}

.room-payment-day--sort-focus {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px dashed rgba(59, 130, 246, 0.35);
}

.room-payment-day--sort-focus .room-payment-day-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.room-payment-day--sort-focus .room-payment-day-value {
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
  letter-spacing: -0.03em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.room-payment-day--sort-focus .room-payment-day-value small {
  font-size: 0.48em;
  font-weight: 700;
  margin-left: 0.05em;
}

.room-card--movein-sort .room-preview {
  min-height: 3.5rem;
}

.room-card--movein-sort .room-tenant-name,
.room-card--movein-sort .room-tenant-phone,
.room-card--movein-sort .room-tenant-dates {
  opacity: 0.88;
}

.room-move-out-day {
  font-size: 0.82rem;
  font-weight: 600;
  color: #f59e0b;
  margin-top: 0.25rem;
}

.room-card-hero .room-move-out-day {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  right: auto;
  z-index: 2;
  margin-top: 0;
  font-size: 0.58rem;
  color: #b45309;
  background: rgba(255, 255, 255, 0.92);
  padding: 0.1rem 0.38rem;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.panel-title {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
}

.panel-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.departed-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.departed-link-btn {
  font-size: 0.82rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.departed-link-btn:hover {
  border-color: rgba(245, 158, 11, 0.45);
  color: #f59e0b;
}

.departed-link-count {
  font-weight: 700;
  color: #f59e0b;
}

.subpage-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.subpage-nav-title {
  font-size: 1.05rem;
  font-weight: 700;
}

.departed-page-desc {
  margin: 0 0 1rem;
}

.departed-page .departed-table-wrap {
  max-height: none;
}

.departed-embed {
  margin-top: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.departed-embed-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: none;
  background: rgba(245, 158, 11, 0.06);
  color: inherit;
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
}

.departed-embed-toggle:hover {
  background: rgba(245, 158, 11, 0.1);
}

.departed-embed-title {
  font-weight: 600;
  color: var(--text-muted);
}

.departed-embed-chevron {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.departed-embed.is-open .departed-embed-chevron {
  transform: rotate(180deg);
}

.departed-embed-body {
  padding: 0 0.85rem 0.85rem;
  border-top: 1px solid var(--border);
}

.departed-embed-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.65rem 0 0.5rem;
}

.departed-search-wrap {
  flex: 1;
  min-width: 140px;
}

.departed-search-wrap input {
  padding: 0.45rem 0.65rem;
  font-size: 0.82rem;
}

.departed-embed-toolbar select {
  font-size: 0.82rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
}

.departed-table-wrap--embed {
  max-height: 220px;
  overflow: auto;
}

.departed-table-wrap--embed .room-table {
  font-size: 0.8rem;
}

.departed-table-wrap--embed .room-table th,
.departed-table-wrap--embed .room-table td {
  padding: 0.4rem 0.5rem;
}

.departed-count {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.departed-toolbar {
  margin-bottom: 1rem;
}

.departed-auto-delete-warning {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(180, 120, 20, 0.35);
  background: #fff8e8;
  color: #6b4e12;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: var(--stitch-text-body-size, 0.9375rem);
  font-weight: var(--stitch-text-body-weight, 400);
  line-height: var(--stitch-text-body-leading, 1.45);
}

.departed-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}

.departed-selected-count {
  font-size: 0.875rem;
  color: var(--muted);
  white-space: nowrap;
}

.departed-table .col-departed-restore,
.departed-table .col-departed-check {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

.departed-table .col-departed-restore .btn {
  min-width: 3.25rem;
}

.departed-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-start;
}

.departed-table .col-departed-check {
  width: 2.75rem;
  min-width: 2.75rem;
  text-align: center;
  vertical-align: middle;
  padding-left: 0.35rem;
  padding-right: 0.5rem;
}

.departed-table .col-departed-check input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary);
}

.departed-table tbody tr:has(.departed-row-checkbox:checked) {
  background: rgba(37, 99, 235, 0.06);
}

.departed-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.col-actions {
  white-space: nowrap;
}

.col-actions .btn + .btn {
  margin-left: 0.35rem;
}

.btn-move-out {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.btn-move-out:hover {
  background: rgba(245, 158, 11, 0.25);
}

.modal-wide {
  max-width: 560px;
}

.modal-wide .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}

#contractAdminModal.modal-wide {
  max-height: calc(100dvh - 2rem);
}

#contractAdminModal.modal-wide form {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2rem);
  min-height: 0;
}

#contractAdminModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.room-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.room-table-wrap.hidden {
  display: none;
}

.room-grid.hidden {
  display: none;
}

.room-calendar-wrap.hidden {
  display: none;
}

.room-calendar-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
}

.room-calendar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.room-calendar-head-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.room-calendar-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  min-height: 1.35rem;
}

.room-calendar-day-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.room-calendar-day-more:hover,
.room-calendar-day-more:focus-visible {
  color: var(--text);
  border-color: var(--border);
  background: rgba(148, 163, 184, 0.12);
}

.room-calendar-title-wrap {
  text-align: center;
  flex: 1;
}

.room-calendar-title {
  margin: 0;
  font-size: 1.15rem;
  color: var(--text);
}

.room-calendar-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .room-calendar-subtitle-deposit {
    display: none !important;
  }
}

html.has-mobile-app-nav .room-calendar-subtitle-deposit {
  display: none !important;
}

.room-calendar-day-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.room-calendar-day-paid {
  display: block;
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--success);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-calendar-finance-footer {
  margin-top: 0.85rem;
  padding: 0.8rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.05),
    rgba(16, 185, 129, 0.04)
  );
}

.room-calendar-finance-footer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.room-calendar-finance-footer-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.room-calendar-finance-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem 1rem;
}

.room-calendar-finance-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.room-calendar-finance-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.room-calendar-finance-value {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
}

.room-calendar-finance-stat.income .room-calendar-finance-value {
  color: var(--success);
}

.room-calendar-finance-stat.expense .room-calendar-finance-value {
  color: var(--danger);
}

.room-calendar-finance-stat.net .room-calendar-finance-value {
  color: var(--primary);
}

.room-calendar-finance-stat.net.negative .room-calendar-finance-value {
  color: var(--danger);
}

.room-calendar-finance-detail {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.35;
  word-break: keep-all;
}

.room-calendar-finance-edit {
  flex-shrink: 0;
  white-space: nowrap;
}

.room-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.room-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.room-calendar-legend-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  display: inline-block;
}

.room-calendar-legend-dot.paid {
  background: var(--success);
}

.room-calendar-legend-dot.unpaid {
  background: var(--danger, #ef4444);
}

.room-calendar-legend-dot.amount {
  background: #0d9488;
}

.room-calendar-legend-dot.todo {
  background: #8b5cf6;
}

.room-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.45rem;
}

.room-calendar-weekday {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.35rem 0;
}

.room-calendar-weekday--sun {
  color: #ef4444;
}

.room-calendar-weekday--sat {
  color: var(--primary);
}

.room-calendar-cell {
  min-height: 5.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.room-calendar-cell--blank {
  min-height: 0;
  border: none;
  background: transparent;
  padding: 0;
}

.room-calendar-cell.is-today {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent);
  background: color-mix(in srgb, var(--primary) 5%, var(--bg));
}

.room-calendar-cell--sun .room-calendar-day-num {
  color: #ef4444;
}

.room-calendar-cell--sat .room-calendar-day-num {
  color: var(--primary);
}

.room-calendar-day-num {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.room-calendar-rooms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-content: flex-start;
}

.room-calendar-room {
  border: none;
  border-radius: 6px;
  padding: 0.18rem 0.42rem;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.3;
  transition: transform 0.12s, box-shadow 0.12s;
}

.room-calendar-room.paid {
  background: color-mix(in srgb, var(--success) 16%, var(--surface));
  color: color-mix(in srgb, var(--success) 80%, var(--text));
}

.room-calendar-room.unpaid {
  background: color-mix(in srgb, var(--danger, #ef4444) 14%, var(--surface));
  color: color-mix(in srgb, var(--danger, #ef4444) 85%, var(--text));
}

.room-calendar-room:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.room-calendar-todo {
  border: none;
  border-radius: 6px;
  padding: 0.18rem 0.42rem;
  font-size: 0.68rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: color-mix(in srgb, #8b5cf6 14%, var(--surface));
  color: color-mix(in srgb, #7c3aed 85%, var(--text));
}

.room-calendar-todo:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.calendar-todo-list-section {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.calendar-todo-list-title {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
}

.calendar-todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 12rem;
  overflow: auto;
}

.calendar-todo-list-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.calendar-todo-list-edit {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.calendar-todo-list-edit:hover {
  background: var(--surface-hover);
}

.calendar-todo-list-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.calendar-todo-list-meta {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.calendar-todo-custom {
  margin-top: 0.45rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8f9fb;
  box-sizing: border-box;
  max-width: 100%;
  overflow: visible;
}

.calendar-todo-custom-head {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.calendar-todo-custom-label {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

.calendar-todo-custom-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.calendar-todo-custom-preview-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-transform: none;
}

.calendar-todo-custom-preview strong {
  font-weight: 700;
  color: var(--stitch-primary, #031632);
}

.calendar-todo-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  padding: 0.25rem;
  border-radius: 10px;
  background: #e8eaef;
}

.calendar-todo-mode-tab {
  appearance: none;
  border: 0;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.calendar-todo-mode-tab.is-active {
  background: #fff;
  color: var(--stitch-primary, #031632);
  box-shadow: 0 1px 2px rgba(3, 22, 50, 0.08);
}

.calendar-todo-custom-mode {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  margin-bottom: 0.75rem;
}

.calendar-todo-custom-mode.hidden {
  display: none !important;
}

.calendar-todo-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  cursor: pointer;
}

.calendar-todo-custom-steps {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.calendar-todo-step {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: stretch;
  padding: 0.7rem 0.75rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border);
  box-sizing: border-box;
  min-width: 0;
}

.calendar-todo-step-label {
  padding-top: 0;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
    sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.2;
}

.calendar-todo-step-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  width: 100%;
}

.calendar-todo-step-controls > .field-input,
.calendar-todo-step-controls > select,
.calendar-todo-step-controls > input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.calendar-todo-interval-step {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.calendar-todo-interval-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  width: 100%;
}

.calendar-todo-interval-input,
.calendar-todo-interval-step .calendar-todo-interval-input {
  flex: 0 0 3.4rem;
  width: 3.4rem;
  min-width: 3.4rem;
  max-width: 3.4rem;
  box-sizing: border-box;
  padding: 0.45rem 0.35rem;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(3, 22, 50, 0.06);
  -moz-appearance: textfield;
  appearance: textfield;
}

.calendar-todo-interval-input::-webkit-outer-spin-button,
.calendar-todo-interval-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calendar-todo-unit-tabs {
  display: flex;
  flex: 1 1 12rem;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.18rem;
  border-radius: 10px;
  background: #e8eaef;
  box-sizing: border-box;
}

.calendar-todo-unit-tab {
  appearance: none;
  border: 0;
  border-radius: 8px;
  flex: 1 1 auto;
  min-width: 2.4rem;
  padding: 0.45rem 0.5rem;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}

.calendar-todo-unit-tab.is-active {
  background: #fff;
  color: var(--stitch-primary, #031632);
  box-shadow: 0 1px 2px rgba(3, 22, 50, 0.08);
}

.calendar-todo-interval-step .calendar-todo-interval-unit.hidden,
.calendar-todo-step-controls > .calendar-todo-interval-unit.hidden,
.calendar-todo-step-controls > .field-input.hidden {
  display: none !important;
}

.calendar-todo-custom-suffix {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.calendar-todo-custom-prefix {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.calendar-todo-custom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.calendar-todo-week-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
  width: 100%;
  min-width: 0;
  padding: 0.18rem;
  border-radius: 10px;
  background: #e8eaef;
  box-sizing: border-box;
}

.calendar-todo-week-tab {
  appearance: none;
  border: 0;
  border-radius: 8px;
  min-width: 0;
  padding: 0.5rem 0.25rem;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}

.calendar-todo-week-tab.is-active {
  background: #fff;
  color: var(--stitch-primary, #031632);
  box-shadow: 0 1px 2px rgba(3, 22, 50, 0.08);
}

.calendar-todo-weekday-chips {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
  min-width: 0;
  width: 100%;
}

.calendar-todo-weekday-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  max-width: none;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 1px solid #c9ced6;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%);
  color: var(--text-muted);
  font-size: clamp(0.72rem, 2.6vw, 0.84rem);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(3, 22, 50, 0.06);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.calendar-todo-weekday-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.calendar-todo-weekday-chip.is-selected {
  border-color: var(--stitch-primary, #031632);
  background: var(--stitch-primary, #031632);
  color: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}

.calendar-todo-interval-unit {
  width: 100%;
  min-width: 0;
}

.calendar-todo-end-step .calendar-todo-end-controls {
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
}

.calendar-todo-end-date-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
}

.calendar-todo-end-date-fields {
  flex: 1 1 auto;
  min-width: 0;
}

.calendar-todo-end-date-fields .date-segments {
  width: 100%;
}

.calendar-todo-end-extend-btn {
  flex: 0 0 auto;
  align-self: stretch;
  min-height: 2.75rem;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.calendar-todo-end-hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.calendar-todo-end-step .date-segments-picker-btn {
  min-height: 2.75rem;
}

@media (max-width: 768px) {
  #calendarTodoModal.modal {
    width: calc(100% - 1rem);
    max-width: none;
    max-height: min(92dvh, 92vh);
  }

  #calendarTodoModal .modal-header,
  #calendarTodoModal .modal-body,
  #calendarTodoModal .modal-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #calendarTodoModal .modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .calendar-todo-custom {
    padding: 0.75rem;
  }

  .calendar-todo-mode-tab {
    min-height: 44px;
    font-size: 0.9rem;
  }

  .calendar-todo-step {
    padding: 0.65rem 0.7rem;
  }

  .calendar-todo-interval-input,
  .calendar-todo-interval-step .calendar-todo-interval-input {
    min-height: 44px;
    font-size: 16px;
  }

  .calendar-todo-unit-tab {
    min-height: 40px;
    font-size: 0.84rem;
  }

  .calendar-todo-step-controls > .field-input,
  .calendar-todo-step-controls > select,
  .calendar-todo-step-controls > input[type="number"],
  .calendar-todo-end-step .date-segments input,
  .calendar-todo-end-step .date-segments-picker-btn,
  .calendar-todo-end-extend-btn {
    min-height: 44px;
    font-size: 16px;
  }

  .calendar-todo-week-tab {
    min-height: 40px;
    font-size: 0.78rem;
  }

  .calendar-todo-end-date-row {
    flex-wrap: wrap;
  }

  .calendar-todo-end-date-fields {
    flex: 1 1 100%;
  }

  .calendar-todo-end-extend-btn {
    flex: 1 1 auto;
    width: 100%;
  }

  .calendar-todo-custom-preview {
    font-size: 0.84rem;
  }
}

@media (max-width: 520px) {
  .calendar-todo-week-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-todo-interval-input,
  .calendar-todo-interval-step .calendar-todo-interval-input {
    flex-basis: 3rem;
    width: 3rem;
    min-width: 3rem;
    max-width: 3rem;
  }
}

.room-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.room-table th,
.room-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.room-table th {
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.room-table tbody tr {
  cursor: pointer;
  transition: background 0.12s;
}

.room-table tbody tr:hover {
  background: var(--surface-hover);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.55;
}

.btn-primary {
  background: var(--stitch-primary);
  color: var(--stitch-on-primary);
  border: 1px solid var(--stitch-primary);
}

.btn-primary:hover {
  background: var(--stitch-primary-container);
  border-color: var(--stitch-primary-container);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-ghost:hover {
  background: var(--surface-hover);
}

.btn-danger-outline {
  background: transparent;
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.5);
}

.btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.15);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-danger:hover {
  background: #dc2626;
}

.btn-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-sm {
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
}

.file-label {
  cursor: pointer;
}

.cloud-sync-status {
  display: none !important;
}

.header-notify-dropdown {
  position: relative;
}

.header-notify-btn {
  position: relative;
  padding: 0.45rem 0.55rem;
  line-height: 0;
}

.header-notify-icon {
  display: block;
  color: var(--text);
}

.header-notify-btn--active .header-notify-icon {
  color: var(--primary);
}

.header-notify-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
  color: #fff;
  background: var(--danger);
  pointer-events: none;
}

.header-notify-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 130;
  width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(28rem, calc(100vh - 5rem));
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s ease;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.header-notify-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  z-index: 350;
}

.header-notify-panel.is-body-mounted,
.header-notify-panel.is-body-mounted.is-open,
.header-notify-panel.is-body-mounted.is-viewport-positioned,
.header-notify-panel.is-body-mounted.is-mobile-dropdown-anchor {
  z-index: 10000 !important;
}

#googleAccountMenu.is-body-mounted,
#googleAccountMenu.is-body-mounted.is-viewport-positioned,
#googleAccountMenu.is-body-mounted.is-mobile-dropdown-anchor,
body > #googleAccountMenu.export-menu {
  z-index: 2147483646 !important;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
}

/* Desktop + mobile: React body-portaled menu must show when not .hidden
   (mobile stitch overrides still supply full-bleed geometry below 1024px). */
html.has-stitch-sidebar #googleAccountMenu.export-menu.is-body-mounted.hidden,
html.has-stitch-sidebar body > #googleAccountMenu.export-menu.hidden,
html.has-app-header #googleAccountMenu.export-menu.is-body-mounted.hidden,
html.has-app-header body > #googleAccountMenu.export-menu.hidden,
#googleAccountMenu.export-menu.hidden,
body > #googleAccountMenu.export-menu.hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  left: -9999px !important;
  top: -9999px !important;
  right: auto !important;
  bottom: auto !important;
}

html.has-stitch-sidebar #googleAccountMenu.export-menu.is-body-mounted:not(.hidden),
html.has-stitch-sidebar body > #googleAccountMenu.export-menu:not(.hidden),
html.has-app-header #googleAccountMenu.export-menu.is-body-mounted:not(.hidden),
html.has-app-header body > #googleAccountMenu.export-menu:not(.hidden) {
  display: block !important;
  position: fixed !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483646 !important;
}

#googleAccountMenu #googleAccountLogout {
  margin-bottom: 0.1rem;
}

.header-notify-panel.is-body-mounted.is-open.is-viewport-positioned::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.header-notify-head {
  padding: 0.75rem 1rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

.header-notify-head strong {
  font-size: 0.92rem;
}

.header-notify-body {
  padding: 0.35rem 0;
}

.header-notify-empty {
  margin: 0;
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.header-notify-section {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
}

.header-notify-section:last-child {
  border-bottom: none;
}

.header-notify-section-title {
  margin: 0;
  padding: 0.35rem 1rem 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.header-notify-count {
  color: var(--primary);
  font-weight: 700;
}

.header-notify-items {
  display: flex;
  flex-direction: column;
}

.header-notify-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  padding: 0.55rem 1rem;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font: inherit;
}

.header-notify-item:hover,
.header-notify-item:focus-visible {
  background: rgba(59, 130, 246, 0.1);
  outline: none;
}

.header-notify-item-title {
  font-size: 0.88rem;
  font-weight: 600;
}

.header-notify-item-meta {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.header-notify-item-meta--warn {
  color: var(--danger);
  font-weight: 600;
}

.header-notify-item-meta--info {
  color: #0071e3;
  font-weight: 600;
}

.header-notify-item-meta--move-out {
  color: #5856d6;
  font-weight: 600;
}

.header-notify-more {
  display: block;
  width: 100%;
  padding: 0.45rem 1rem 0.65rem;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 0.78rem;
  color: var(--primary);
  cursor: pointer;
}

.header-notify-more:hover,
.header-notify-more:focus-visible {
  text-decoration: underline;
  outline: none;
}

.cloud-sync-status.cloud-synced {
  color: #34a853;
  border-color: rgba(52, 168, 83, 0.45);
  background: rgba(52, 168, 83, 0.12);
}

.cloud-sync-status.cloud-syncing,
.cloud-sync-status.cloud-saving {
  color: var(--primary);
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.12);
}

.cloud-sync-status.cloud-offline {
  color: var(--text-muted);
}

.cloud-sync-status.cloud-error {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
}

#signLinkModal.is-nested-overlay-fallback[open] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2147483647;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  margin: 0;
}

#signLinkModal.is-nested-overlay-fallback[open]::backdrop {
  display: none;
}

#signLinkModal.is-nested-overlay-fallback[open]::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: -1;
}

.modal {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  max-width: 480px;
  width: calc(100% - 2rem);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

#calendarTodoModal.modal {
  max-width: 560px;
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  margin: 0;
  font-size: 1.15rem;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
}

.modal-close:hover {
  color: var(--text);
}

.modal-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
}

.modal-footer.modal-footer-split {
  flex-wrap: wrap;
}

.form-row label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.date-segments {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  width: 100%;
}

.date-segments input {
  padding: 0.65rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  min-height: 2.75rem;
  box-sizing: border-box;
}

.date-segments input:focus {
  outline: none;
  border-color: var(--primary);
}

.date-segments .date-year {
  flex: 1.6 1 0;
  min-width: 4.5rem;
}

.date-segments .date-month,
.date-segments .date-day {
  flex: 1 0 0;
  width: 3.5rem;
  min-width: 3.25rem;
  max-width: 4.25rem;
}

.date-sep {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 1rem;
  user-select: none;
  flex: 0 0 auto;
}

.date-segments--select {
  flex-wrap: wrap;
}

.date-segments--select select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.65rem 1.75rem 0.65rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--bg);
  background-image: linear-gradient(45deg, transparent 50%, #75777e 50%),
    linear-gradient(135deg, #75777e 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 2px),
    calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--text);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
    sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  min-height: 2.85rem;
  box-sizing: border-box;
  cursor: pointer;
}

.date-segments--select select:focus {
  outline: none;
  border-color: var(--primary);
}

.date-segments--select .date-year {
  flex: 1.5 1 5.5rem;
  min-width: 5.5rem;
}

.date-segments--select .date-month,
.date-segments--select .date-day {
  flex: 1 1 4.25rem;
  min-width: 4.25rem;
  max-width: none;
  width: auto;
}

.date-segments-picker {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

.date-segments-picker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 2.75rem;
  min-height: 2.85rem;
  padding: 0 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  box-sizing: border-box;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
    sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
}

.date-segments-picker-btn-label {
  line-height: 1;
}

.date-segments-picker-btn:hover {
  color: var(--text);
  border-color: var(--primary);
}

.date-segments-picker-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.date-segments-picker-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* 모바일에서 달력 영역을 바로 터치해 네이티브 피커가 열리게 */
  pointer-events: auto;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.date-segments-clear-btn {
  flex: 0 0 auto;
  min-height: 2.85rem;
  padding: 0 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--stitch-text-body-color, #75777e);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
    sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.date-segments-clear-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

@media (max-width: 560px) {
  .date-segments--select {
    gap: 0.4rem;
  }

  .date-segments--select .date-year,
  .date-segments--select .date-month,
  .date-segments--select .date-day {
    flex: 1 1 calc(33.33% - 0.5rem);
    min-width: 0;
  }

  .date-segments-picker,
  .date-segments-clear-btn {
    flex: 1 1 calc(50% - 0.25rem);
  }

  .date-segments-picker-btn {
    width: 100%;
  }
}

.toast,
#toast.toast {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top, 0px));
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(calc(-100% - 1rem));
  padding: 0.75rem 1.25rem;
  background: var(--stitch-surface, var(--surface, #fff));
  color: var(--stitch-on-surface, var(--text, #1a1c1c));
  border: 1px solid var(--stitch-outline-variant, var(--border, #c5c6ce));
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
  z-index: 2147483647 !important;
  pointer-events: none;
  margin: 0;
  max-width: min(92vw, 28rem);
  width: max-content;
  box-sizing: border-box;
  text-align: center;
  isolation: isolate;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

@media (max-width: 768px) {
  .toast,
  #toast.toast {
    max-width: min(72vw, 16.5rem);
    padding: 0.65rem 0.85rem;
    font-size: 0.88rem;
    line-height: 1.45;
  }
}

.toast[popover],
.toast:popover-open,
#toast.toast[popover],
#toast.toast:popover-open {
  inset: unset;
  position: fixed;
  top: max(1rem, env(safe-area-inset-top, 0px)) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  z-index: 2147483647 !important;
}

.toast.show,
.toast.visible,
.toast:popover-open,
#toast.toast.show,
#toast.toast.visible,
#toast.toast:popover-open {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.saving-block-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  margin: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  border: none;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  color: inherit;
  box-sizing: border-box;
  pointer-events: auto;
}

.saving-block-overlay::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
}

.saving-block-overlay.hidden,
.saving-block-overlay[hidden] {
  display: none !important;
}

.saving-block-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 22rem;
  width: min(100%, 22rem);
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
  text-align: center;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .saving-block-panel {
    max-width: min(72vw, 15.5rem);
    width: min(72vw, 15.5rem);
    padding: 1.1rem 1rem;
    gap: 0.75rem;
  }

  .saving-block-message {
    font-size: 0.9rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }
}

.saving-block-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: saving-block-spin 0.8s linear infinite;
}

.saving-block-message {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}

@keyframes saving-block-spin {
  to {
    transform: rotate(360deg);
  }
}

.goshiwon-smart-tooltip {
  position: fixed;
  z-index: 2147483645;
  box-sizing: border-box;
  max-width: min(20rem, calc(100vw - 20px));
  padding: 0.45rem 0.65rem;
  border-radius: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, #0f172a);
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: keep-all;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.goshiwon-smart-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.goshiwon-smart-tooltip[hidden] {
  display: none !important;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
}

.field-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.field-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}

.contract-room-sync-input::placeholder {
  color: var(--text);
  opacity: 0.5;
}

.field-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.contract-token-panel {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.contract-token-panel-lead {
  margin: 0 0 0.75rem;
}

.contract-token-hint {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
}

.contract-token-hint-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.contract-token-hint-grid li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-hover);
}

@media (max-width: 900px) {
  .contract-token-hint-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .contract-token-hint-grid {
    grid-template-columns: 1fr;
  }
}

.contract-token-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.8rem;
}

.contract-token-hint code {
  font-size: 0.78rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  word-break: break-all;
}

.backup-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
  max-height: 280px;
  overflow-y: auto;
}

.backup-list-item--default {
  position: sticky;
  top: 0;
  z-index: 2;
  order: -1;
  background: var(--surface, #fff);
  border-color: var(--primary, #2563eb);
  box-shadow: 0 1px 0 var(--border, #e5e7eb);
  /* sticky 행에서도 수정 버튼이 잘리지 않게 */
  overflow: visible;
  align-items: flex-start;
  flex-wrap: wrap;
}

.backup-list-item--default .backup-list-item-actions {
  width: 100%;
  justify-content: flex-end;
  padding-left: 1.75rem;
  margin-top: 0.15rem;
}

.backup-saved-list-wrap {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.backup-list-item--pickable {
  width: 100%;
  text-align: left;
  background: var(--surface);
  font: inherit;
  color: inherit;
}

.backup-list-item--pickable:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.backup-list-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.backup-list-item--editing {
  cursor: default;
}

.backup-list-item:hover {
  border-color: var(--primary);
  background: rgba(59, 130, 246, 0.05);
}

.backup-list-item input[type="radio"] {
  margin-top: 0;
  flex-shrink: 0;
}

.backup-list-item-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}

.backup-list-item-actions {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

@media (max-width: 560px) {
  .backup-list-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .backup-list-item-actions {
    width: 100%;
    justify-content: flex-end;
    padding-left: 1.75rem;
  }
}

.backup-list-item-rename {
  flex-shrink: 0;
}

.backup-list-item-delete {
  flex-shrink: 0;
}

.backup-list-item-rename-input {
  width: 100%;
  padding: 0.35rem 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.backup-list-item-name {
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}

.backup-list-item-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.backup-history-panel {
  flex: 1 0 100%;
  width: 100%;
  margin-top: 0.15rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(197, 198, 206, 0.45);
  background: #faf9f8;
}

.backup-history-panel__empty {
  margin: 0;
}

.backup-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.backup-history-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
}

.backup-history-list__meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.backup-history-list__when {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
    sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--stitch-text-title-color, #4a4c52);
}

.backup-delete-confirm-message {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
}

.feedback-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.feedback-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.feedback-form textarea {
  width: 100%;
  min-height: 120px;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  resize: vertical;
}

.feedback-form-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.feedback-list-section {
  margin-top: 0.5rem;
}

.feedback-list-title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
}

.feedback-count {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.feedback-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.15rem;
}

.feedback-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.feedback-item-id {
  font-weight: 600;
  color: var(--primary);
}

.feedback-item-content {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
  color: var(--text);
}

.feedback-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
}

.feedback-empty.hidden,
.feedback-list:empty {
  display: none;
}

.feedback-admin-badge {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--primary);
  font-weight: 600;
}

.feedback-reply {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.feedback-reply-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.35rem;
}

.feedback-reply-content {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
  color: var(--text);
}

.feedback-reply-form {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border);
}

.feedback-reply-form textarea {
  width: 100%;
  min-height: 88px;
  margin-top: 0.35rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
}

.feedback-reply-form-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* ?€?€ 寃뚯떆??쨌 Muted palette ?€?€ */
#panelBoard.board-panel {
  --board-bg: #f7f8fa;
  --board-surface: #ffffff;
  --board-text: #2f3438;
  --board-text-secondary: #6f7780;
  --board-text-tertiary: #949ca3;
  --board-accent: #6b8499;
  --board-accent-soft: rgba(107, 132, 153, 0.1);
  --board-divider: rgba(47, 52, 56, 0.06);
  --board-radius: 16px;
  --board-radius-sm: 12px;
  --board-shadow: 0 1px 2px rgba(47, 52, 56, 0.04), 0 4px 14px rgba(47, 52, 56, 0.05);
  --board-font: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-family: var(--board-font);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}

.board-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

#panelBoard .board-header {
  padding: 1rem 1.15rem;
  border-radius: var(--board-radius-sm);
  background:
    radial-gradient(ellipse 120% 90% at 50% -20%, var(--board-header-glow, rgba(0, 113, 227, 0.12)), transparent 58%),
    linear-gradient(180deg, var(--board-header-start, rgba(0, 113, 227, 0.12)) 0%, var(--board-header-end, rgba(255, 255, 255, 0.72)) 100%);
}

#panelBoard[data-board-category="notice"],
.board-column[data-board="notice"],
.board-expanded-bar[data-board="notice"] {
  --board-accent: #6b8499;
  --board-accent-soft: rgba(107, 132, 153, 0.12);
  --board-header-start: rgba(158, 179, 196, 0.2);
  --board-header-end: rgba(248, 250, 252, 0.96);
  --board-header-glow: rgba(123, 147, 168, 0.14);
  --board-header-title: #4a6275;
  --board-col-head-start: #b3c4d2;
  --board-col-head-end: #7b93a8;
}

#panelBoard[data-board-category="faq"],
.board-column[data-board="faq"],
.board-expanded-bar[data-board="faq"] {
  --board-accent: #687b8f;
  --board-accent-soft: rgba(104, 123, 143, 0.12);
  --board-header-start: rgba(148, 163, 180, 0.2);
  --board-header-end: rgba(247, 248, 250, 0.96);
  --board-header-glow: rgba(104, 123, 143, 0.14);
  --board-header-title: #525f6e;
  --board-col-head-start: #a8b5c4;
  --board-col-head-end: #687b8f;
}

#panelBoard[data-board-category="tips"],
.board-column[data-board="tips"],
.board-expanded-bar[data-board="tips"] {
  --board-accent: #a68b6b;
  --board-accent-soft: rgba(166, 139, 107, 0.12);
  --board-header-start: rgba(201, 181, 154, 0.22);
  --board-header-end: rgba(252, 250, 247, 0.96);
  --board-header-glow: rgba(166, 139, 107, 0.14);
  --board-header-title: #7d6750;
  --board-col-head-start: #d4c4ad;
  --board-col-head-end: #a68b6b;
}

#panelBoard[data-board-category="qna"],
.board-column[data-board="qna"],
.board-expanded-bar[data-board="qna"] {
  --board-accent: #8b7da8;
  --board-accent-soft: rgba(139, 125, 168, 0.12);
  --board-header-start: rgba(181, 170, 201, 0.2);
  --board-header-end: rgba(250, 248, 252, 0.96);
  --board-header-glow: rgba(139, 125, 168, 0.14);
  --board-header-title: #6b6082;
  --board-col-head-start: #c4b9d4;
  --board-col-head-end: #8b7da8;
}

#panelBoard[data-board-category="feature"],
.board-column[data-board="feature"],
.board-expanded-bar[data-board="feature"] {
  --board-accent: #6d947f;
  --board-accent-soft: rgba(109, 148, 127, 0.12);
  --board-header-start: rgba(155, 181, 168, 0.2);
  --board-header-end: rgba(246, 250, 248, 0.96);
  --board-header-glow: rgba(109, 148, 127, 0.14);
  --board-header-title: #556b5f;
  --board-col-head-start: #a8c4b6;
  --board-col-head-end: #6d947f;
}

#panelBoard[data-board-category="archive"],
.board-column[data-board="archive"],
.board-expanded-bar[data-board="archive"] {
  --board-accent: #7a7d84;
  --board-accent-soft: rgba(122, 125, 132, 0.12);
  --board-header-start: rgba(168, 171, 176, 0.18);
  --board-header-end: rgba(248, 249, 250, 0.96);
  --board-header-glow: rgba(122, 125, 132, 0.12);
  --board-header-title: #5e6168;
  --board-col-head-start: #b8bbc0;
  --board-col-head-end: #7a7d84;
}

#panelBoard .panel-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--board-header-title, var(--board-text));
  line-height: 1.15;
}

#panelBoard .panel-desc {
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--board-text-secondary);
}

#panelBoard .board-header .btn-ghost {
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--board-accent);
  background: var(--board-accent-soft);
  border: none;
  padding: 0.45rem 0.95rem;
}

#panelBoard .board-header .btn-ghost:hover {
  background: var(--board-accent-soft);
}

.board-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 4px;
  margin-bottom: 1.5rem;
  background: rgba(100, 116, 139, 0.07);
  border-radius: var(--board-radius-sm);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.board-tabs::-webkit-scrollbar {
  display: none;
}

.board-tab {
  flex: 1 0 auto;
  min-width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.125rem;
  padding: 0.45rem 0.85rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--board-text-secondary);
  font-family: var(--board-font, inherit);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.22s cubic-bezier(0.25, 0.1, 0.25, 1),
    color 0.22s ease, box-shadow 0.22s ease;
}

.board-tab:hover:not(.active) {
  color: var(--board-text);
}

.board-tab.active {
  background: var(--board-surface, #fff);
  color: var(--board-header-title, var(--board-accent, #1d1d1f));
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0.5px 1px rgba(0, 0, 0, 0.04);
}

.board-write-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.board-write-btn {
  border-radius: 0.85rem;
  padding: 0.65rem 1.45rem;
  font-weight: 700;
  font-size: 0.95rem;
  background: #031632;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(3, 22, 50, 0.28);
}

.board-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.board-form-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--board-text, var(--text));
}

.board-form {
  background: var(--board-surface, var(--surface));
  border: none;
  border-radius: var(--board-radius, 16px);
  box-shadow: var(--board-shadow);
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.75rem;
}

#panelBoard .board-form .field-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--board-text-secondary, var(--text-muted));
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

#panelBoard .board-form .field-input,
.board-form textarea {
  width: 100%;
  min-height: 120px;
  padding: 0.8rem 0.95rem;
  border: none;
  border-radius: var(--board-radius-sm, 12px);
  background: var(--board-bg, #f5f5f7);
  color: var(--board-text, var(--text));
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  resize: vertical;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

#panelBoard .board-form .field-input {
  min-height: auto;
}

#panelBoard .board-form .field-input:focus,
.board-form textarea:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.22);
}

.board-form-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--board-divider, var(--border));
}

#panelBoard .board-form-footer .btn-primary {
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  background: var(--board-accent, var(--primary));
  border-color: var(--board-accent, var(--primary));
}

.board-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.board-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--board-accent, var(--primary));
  background: var(--board-accent-soft, rgba(0, 113, 227, 0.1));
}

.board-list-section {
  margin-top: 0.25rem;
}

.board-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.board-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  background: var(--board-surface, var(--surface));
  border: none;
  border-radius: var(--board-radius, 16px);
  box-shadow: var(--board-shadow);
  overflow: hidden;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.board-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
  padding: 0.72rem 1rem;
  border: 0;
  border-bottom: none;
  background: linear-gradient(135deg, var(--board-col-head-start, #94a3b8) 0%, var(--board-col-head-end, #64748b) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.board-column-header:hover {
  filter: brightness(1.03);
}

.board-column-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #fff;
}

.board-column[data-board="notice"] .board-column-title::before,
.board-column[data-board="faq"] .board-column-title::before,
.board-column[data-board="tips"] .board-column-title::before,
.board-column[data-board="qna"] .board-column-title::before,
.board-column[data-board="feature"] .board-column-title::before,
.board-column[data-board="archive"] .board-column-title::before {
  display: none;
}

.board-column-header .board-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.board-column.active {
  box-shadow: 0 6px 18px rgba(47, 52, 56, 0.08), 0 0 0 2px color-mix(in srgb, var(--board-col-head-end, var(--board-accent)) 35%, transparent);
}

.board-column.active .board-column-header .board-count {
  background: rgba(255, 255, 255, 0.32);
  color: #fff;
}

.board-column-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  flex: 1;
}

.board-column-empty {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
    sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  color: #75777e;
}

.board-column-more {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  border-top: 1px solid var(--board-divider, var(--border));
  background: transparent;
  color: var(--board-accent, var(--primary));
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s ease;
}

.board-column-more:hover {
  background: var(--board-accent-soft, rgba(0, 113, 227, 0.06));
}

.board-expanded-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.72rem 1rem;
  border-bottom: none;
  border-radius: var(--board-radius-sm);
  background: linear-gradient(135deg, var(--board-col-head-start, #94a3b8) 0%, var(--board-col-head-end, #64748b) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #fff;
}

.board-expanded-bar.hidden {
  display: none;
}

#panelBoard .board-expanded-bar .btn-ghost {
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--board-col-head-end, var(--board-accent));
  background: rgba(255, 255, 255, 0.92);
  border: none;
}

#panelBoard .board-expanded-bar .btn-ghost:hover {
  background: #fff;
}

.board-expanded-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: #fff;
}

.board-list-title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
}

.board-count {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

.board-list-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 0.35rem;
}

.board-preview-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.board-ticker-pin,
.board-show-main-label,
.board-edit-show-main {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--board-text-secondary, var(--text-muted));
  cursor: pointer;
  user-select: none;
}

.board-ticker-pin {
  padding: 0.15rem 0.5rem 0.15rem 0;
}

.board-show-main-field {
  margin-top: 0.35rem;
}

.board-show-main-field .field-hint {
  margin: 0.35rem 0 0;
}

.board-badge-ticker {
  color: #627484;
  border-color: rgba(123, 147, 168, 0.24);
  background: rgba(179, 196, 210, 0.22);
}

/* 遺꾪븷 蹂닿린 쨌 而щ읆 ??紐⑸줉 ??*/
.board-column-list .board-preview-card-wrap {
  border-bottom: 1px solid var(--board-divider, rgba(0, 0, 0, 0.06));
}

.board-column-list .board-preview-card-wrap:last-child {
  border-bottom: none;
}

.board-preview-card--compact {
  min-height: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  text-align: left;
}

.board-preview-card--compact:hover {
  background: rgba(0, 0, 0, 0.025);
  transform: none;
  box-shadow: none;
}

.board-preview-card--compact .board-preview-thumb {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  border-radius: 0.4rem;
  border: 1px solid var(--board-divider, var(--border));
  overflow: hidden;
}

.board-preview-card--compact .board-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.board-preview-card--compact .board-preview-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.22rem 0.4rem 0.22rem 0;
  gap: 0.08rem;
}

.board-preview-card--compact .board-preview-title {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
    sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  color: #4a4c52;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

.board-preview-card--compact .board-preview-text {
  display: none;
}

.board-preview-card--compact .board-preview-footer {
  display: none;
}

.board-preview-card--compact .board-preview-badges {
  gap: 0.2rem;
  margin-top: 0;
  margin-left: auto;
}

.board-preview-card--compact .board-badge {
  font-size: 0.625rem;
  padding: 0.05rem 0.3rem;
}

/* ?뺤옣 洹몃━??쨌 移대뱶 */
.board-preview-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 140px;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--board-surface, var(--surface));
  border: none;
  border-radius: var(--board-radius-sm, 12px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.22s ease, transform 0.22s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.board-preview-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.board-preview-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.35);
}

.board-preview-thumb {
  position: relative;
  width: 100%;
  height: 9rem;
  min-height: 9rem;
  overflow: hidden;
  background: var(--board-bg, var(--bg)) center / cover no-repeat;
  border-bottom: 1px solid var(--board-divider, var(--border));
}

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

.board-preview-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  padding: 1rem 1.05rem 1.05rem;
}

.board-preview-title-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
}

.board-preview-title {
  margin: 0;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
    sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.45;
  color: #4a4c52;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-preview-text {
  display: none;
}

.board-preview-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--board-text-tertiary, var(--text-muted));
}

.board-preview-badges {
  display: flex;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  margin-top: 0;
  margin-left: auto;
}

.board-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--board-bg, var(--bg));
  color: var(--board-text-secondary, var(--text-muted));
  border: none;
}

.board-badge-reply {
  color: #7a6f92;
  background: rgba(139, 125, 168, 0.12);
}

.board-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
}

.board-pagination.hidden {
  display: none;
}

#panelBoard .board-pagination .btn {
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.board-pagination-info {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--board-text-secondary, var(--text-muted));
}

.board-detail-close-form {
  display: none;
}

.board-detail-body {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.modal.board-detail-modal {
  max-width: calc(100vw - 2rem);
  border: none;
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  letter-spacing: -0.011em;
}

.board-detail-modal:not([open]) {
  display: none !important;
}

.board-detail-modal[open] {
  display: flex;
  flex-direction: column;
  width: min(40rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  min-width: min(18rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: hidden;
  margin: auto;
  border: none;
  padding: 0;
  background: #fff;
}

.board-detail-modal[open].board-detail-modal--compact {
  width: min(28rem, calc(100vw - 2rem));
}

.board-detail-modal[open].board-detail-modal--wide {
  width: min(52rem, calc(100vw - 2rem));
}

.board-detail-modal .modal-body {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.5rem 1.75rem 1.5rem;
}

.board-detail-header {
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.35rem 1.75rem 0.75rem;
  border-bottom: none;
}

.board-detail-header h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.35;
  word-break: break-word;
  color: #1d1d1f;
}

.board-detail-header .modal-close {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #f5f5f7;
  color: #6e6e73;
  font-size: 1.25rem;
  line-height: 1;
  border: none;
  transition: background 0.15s ease;
}

.board-detail-header .modal-close:hover {
  background: #e8e8ed;
}

.board-detail-modal .modal-footer {
  flex-shrink: 0;
  padding: 0.85rem 1.75rem 1.35rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.board-detail-modal .modal-footer .btn {
  border-radius: 999px;
  font-weight: 500;
}

.board-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: #86868b;
  background: transparent;
  border: none;
  border-radius: 0;
}

.board-detail-article {
  background: #f5f5f7;
  border: none;
  border-radius: 14px;
  padding: 1.35rem 1.5rem;
}

.board-detail-content {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.65;
  font-size: 1rem;
  letter-spacing: -0.015em;
  color: #1d1d1f;
  max-width: 42em;
  margin: 0 auto;
}

.board-detail-body .board-attachments {
  margin-top: 0;
  padding: 1rem 1.15rem;
  background: #f5f5f7;
  border: none;
  border-radius: 14px;
}

.board-detail-body .board-attachment-thumb {
  max-width: 100%;
  max-height: 280px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}

.board-detail-body .board-attachments-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.board-detail-body .board-reply {
  margin-top: 0;
  border-radius: 14px;
  background: rgba(0, 113, 227, 0.06);
  border: none;
}

.board-detail-body .board-item-actions {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

@media (max-width: 640px) {
  .board-detail-modal[open],
  .board-detail-modal[open].board-detail-modal--compact,
  .board-detail-modal[open].board-detail-modal--wide {
    width: calc(100vw - 1.25rem) !important;
    min-width: 0;
    border-radius: 16px;
  }

  .board-detail-modal .modal-body {
    padding: 0.35rem 1.15rem 1.25rem;
  }

  .board-detail-header {
    padding: 1.15rem 1.15rem 0.65rem;
  }

  .board-detail-header h2 {
    font-size: 1.2rem;
  }

  .board-detail-article {
    padding: 1.1rem 1.15rem;
  }
}

.board-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.board-edit-textarea {
  width: 100%;
  min-height: 180px;
  padding: 0.85rem 0.95rem;
  border: none;
  border-radius: 12px;
  background: #f5f5f7;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.55;
  white-space: pre-wrap;
  resize: vertical;
}

.board-edit-textarea:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.22);
}

.board-form textarea,
.board-reply-form textarea {
  white-space: pre-wrap;
}

.board-item {
  background: var(--surface);
  border: none;
  border-radius: 14px;
  padding: 1rem 1.15rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.board-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  margin-bottom: 0.65rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.board-item-title {
  width: 100%;
  font-size: 1rem;
  color: var(--text);
}

.board-item-id {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.board-item-content {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

.board-attachments {
  margin-top: 0.85rem;
}

.board-attachments-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.board-attachments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.board-attachments-list a,
.board-attachments-list .board-attachment-download {
  color: #0071e3;
  text-decoration: none;
  font-size: 0.875rem;
}

.board-attachments-list .board-attachment-download {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.board-attachments-list .board-attachment-download:hover {
  text-decoration: underline;
}

.board-attachments-list .board-attachment-download:disabled {
  opacity: 0.6;
  cursor: wait;
}

.board-auth-image-failed {
  display: block;
  min-height: 4rem;
  background: repeating-linear-gradient(
    -45deg,
    #f0f1f4,
    #f0f1f4 6px,
    #e4e6eb 6px,
    #e4e6eb 12px
  );
}

.board-auth-image-pending {
  display: block;
  min-width: 6rem;
  min-height: 4rem;
  background: #f4f5f7;
  border-radius: 10px;
}

.board-attachment-thumb {
  display: block;
  max-width: 240px;
  max-height: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 0.35rem;
  border-radius: 10px;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.board-pending-files {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.board-pending-file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  padding: 0.45rem 0.65rem;
  background: var(--board-bg, #f5f5f7);
  border-radius: 8px;
}

.board-reply {
  margin-top: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: rgba(0, 113, 227, 0.06);
  border: none;
}

.board-reply-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #0071e3;
  margin-bottom: 0.45rem;
}

.board-reply-content {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.55;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: #1d1d1f;
}

.board-reply-form {
  margin-top: 0.85rem;
}

.board-reply-form textarea {
  width: 100%;
  min-height: 88px;
  padding: 0.75rem 0.9rem;
  border: none;
  border-radius: 12px;
  background: #f5f5f7;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  resize: vertical;
}

.board-reply-form textarea:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.22);
}

.board-item-actions {
  margin-top: 0.65rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.board-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--board-text-secondary, var(--text-muted));
  font-size: 0.9375rem;
  line-height: 1.5;
}

.board-empty.hidden {
  display: none;
}

@media (max-width: 900px) {
  #panelBoard .board-tabs {
    display: flex;
  }

  .board-tab {
    min-height: 2rem;
    font-size: 0.78rem;
    padding: 0.4rem 0.7rem;
  }
}

@media (max-width: 1100px) {
  .board-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .board-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
}

@media (max-width: 600px) {
  #panelBoard .panel-title {
    font-size: 1.5rem;
  }

  .board-header {
    flex-direction: column;
    align-items: stretch;
  }

  .board-header .btn {
    align-self: flex-end;
  }

  #panelBoard .panel-desc {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .board-tabs {
    display: flex;
    margin-bottom: 1.25rem;
  }

  .board-column {
    border-radius: 14px;
  }

  .board-column-header {
    padding: 0.9rem 1rem;
  }

  .board-column-title {
    font-size: 0.9375rem;
  }

  .board-expanded-bar {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .board-expanded-title {
    flex: 1 1 100%;
    font-size: 1rem;
    line-height: 1.35;
  }

  .board-preview-card--compact .board-preview-title {
    font-size: 0.9375rem;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: unset;
  }

  .board-columns {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .board-list-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .form-row-2 {
    grid-template-columns: 1fr;
  }

  .room-calendar-panel {
    padding: 0.75rem;
  }

  .room-calendar-cell {
    min-height: 4.25rem;
    padding: 0.3rem;
  }

  .room-calendar-room {
    font-size: 0.66rem;
    padding: 0.12rem 0.3rem;
  }

  .room-calendar-title {
    font-size: 1rem;
  }

  .room-calendar-day-paid {
    font-size: 0.58rem;
  }

  .room-calendar-finance-footer-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .room-calendar-finance-footer-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .room-calendar-finance-edit {
    align-self: flex-end;
  }
}

/* ---- iPhone / mobile header ---- */
@media (max-width: 768px) {
  html {
    overflow-x: clip;
    max-width: 100%;
  }

  body {
    overflow-x: clip;
    max-width: 100%;
  }

  .header {
    position: static;
    padding-top: env(safe-area-inset-top, 0);
  }

  .header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.65rem max(0.85rem, env(safe-area-inset-right)) 0.75rem
      max(0.85rem, env(safe-area-inset-left));
  }

  .brand:has(.brand-nav) {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.5rem;
    width: 100%;
  }

  .brand:not(:has(.brand-nav)) {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
  }

  .brand:has(.brand-nav) .brand-home-link {
    grid-row: 1;
    grid-column: 1;
    align-self: start;
  }

  .brand:has(.brand-nav) > div {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .brand-logo {
    width: 2.35rem;
    height: 2.35rem;
  }

  .brand h1 {
    font-size: 1.05rem;
    line-height: 1.25;
  }

  .brand:not(:has(.brand-nav)) h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .subtitle {
    font-size: 1rem;
    margin-top: 0.1rem;
  }

  .brand-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
    margin: 0;
    padding: 0.28rem;
    background: color-mix(in srgb, var(--text) 5%, var(--surface));
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  .brand-nav-sep {
    display: none;
  }

  .brand-nav-link {
    min-height: 48px;
    padding: 0.45rem 0.5rem;
    border-radius: 9px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .brand-nav-link.is-active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
  }

  .brand-nav-guest {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 1rem;
    line-height: 1.35;
    padding: 0.2rem 0.35rem 0.05rem;
  }

  .header-actions {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    align-items: stretch;
    overflow: visible;
  }

  .header-actions-placeholder {
    display: none !important;
  }

  .google-account-dropdown,
  .export-dropdown,
  .import-dropdown,
  .header-auth-group {
    min-width: 0;
  }

  .header-auth-group {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
    padding-right: 3.35rem;
    box-sizing: border-box;
  }

  .header-auth-group .google-account-dropdown {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding-right: 0;
    display: flex;
    align-items: stretch;
  }

  .header-auth-group .demo-trial-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 4.75rem;
    align-self: stretch;
    pointer-events: auto;
    position: relative;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .header-auth-group .google-account-btn {
    pointer-events: auto;
    position: relative;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .google-account-dropdown {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    padding-right: 3.35rem;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
  }

  .header-actions > .header-auth-group ~ .google-account-dropdown {
    grid-column: auto;
    grid-row: auto;
    padding-right: 0;
  }

  .google-account-btn,
  .google-account-btn.signed-in {
    max-width: none;
    width: 100%;
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 48px;
    justify-content: flex-start;
    text-align: left;
    align-items: center;
    box-sizing: border-box;
  }

  .google-account-btn.signed-in.is-demo-account,
  .header-auth-group .google-account-btn.signed-in.is-demo-account {
    width: auto !important;
    max-width: 5.25rem !important;
    flex: 0 0 auto !important;
    justify-content: center;
    text-align: center;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-size: 0.7rem;
  }

  .header-auth-group:has(.google-account-btn.signed-in.is-demo-account) {
    width: auto !important;
    max-width: 5.5rem !important;
    padding-right: 0 !important;
    justify-content: flex-end;
  }

  .header-auth-group:has(.google-account-btn.signed-in.is-demo-account)
    .google-account-dropdown {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 5.25rem !important;
  }

  .google-account-dropdown:has(.google-account-btn.signed-in.is-demo-account) {
    width: auto !important;
    max-width: 5.25rem !important;
    padding-right: 0 !important;
    justify-content: flex-end;
  }

  .google-account-btn.signed-in.is-demo-account #googleAccountLabel,
  .google-account-btn.signed-in.is-demo-account .google-account-email {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 3.75rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .google-account-btn #googleAccountLabel {
    max-width: none;
    flex: 1;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    line-height: 1.25;
  }

  .google-account-btn #googleAccountLabel .google-account-email {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .google-account-btn #googleAccountLabel .google-account-building-name {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .google-account-btn #googleAccountLabel .google-account-building-name:not(.hidden)::before {
    content: "쨌";
    margin: 0 0.3rem;
  }

  .google-account-label-preview {
    display: none !important;
  }

  .export-dropdown {
    grid-column: 1 / 2;
  }

  .import-dropdown {
    grid-column: 2 / 3;
  }

  .header-actions > .super-admin-nav-link:not(.hidden) {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .header-actions > .super-admin-nav-link:not(.hidden) ~ .header-auth-group,
  .header-actions > .super-admin-nav-link:not(.hidden) ~ .google-account-dropdown {
    grid-row: 2;
  }

  .header-actions > .super-admin-nav-link:not(.hidden) ~ .header-notify-dropdown {
    top: calc(3.35rem + 0.4rem);
  }

  .header-actions:not(:has(.header-notify-dropdown)) .header-auth-group,
  .header-actions:not(:has(.header-notify-dropdown)) .google-account-dropdown {
    padding-right: 0;
  }

  .header-actions .btn,
  .header-actions .file-label {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
    line-height: 1.25;
    padding: 0.55rem 0.65rem;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .header-auth-group .google-account-btn,
  .header-auth-group .demo-trial-btn {
    width: auto;
  }

  #btnReloadServer:not([hidden]) {
    grid-column: 1 / -1;
  }

  #btnReset {
    grid-column: 1 / -1;
  }

  .header-notify-dropdown {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    width: auto;
    overflow: visible;
    display: flex;
    align-items: center;
    min-height: 48px;
  }

  .header-notify-dropdown.is-notify-open {
    z-index: 360;
  }

  .header-notify-btn {
    width: auto;
    min-width: 48px;
    min-height: 48px;
    padding: 0.55rem;
    justify-content: center;
  }

  .header-notify-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    left: auto;
    bottom: auto;
    width: min(22rem, calc(100vw - max(1.5rem, env(safe-area-inset-left) + env(safe-area-inset-right))));
    max-height: min(52vh, 440px);
    z-index: 340;
    transform: translateY(6px);
  }

  .cloud-sync-status {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 2.35rem;
    justify-content: center;
  }

  .export-menu {
    position: fixed;
    left: max(0.75rem, env(safe-area-inset-left));
    right: max(0.75rem, env(safe-area-inset-right));
    top: max(0.85rem, env(safe-area-inset-top));
    bottom: auto;
    max-height: min(52vh, 440px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    border-radius: 14px;
    padding: 0.45rem;
    z-index: 300;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.2);
  }

  .google-account-dropdown > #googleAccountMenu.export-menu,
  .google-account-dropdown > #googleAccountMenu.export-menu.is-mobile-dropdown-anchor,
  #googleAccountMenu.export-menu.is-body-mounted.is-mobile-dropdown-anchor {
    bottom: auto;
    max-height: min(70vh, calc(100dvh - 5rem - env(safe-area-inset-bottom, 0px)));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    z-index: 340;
  }

  #googleAccountMenu .export-option,
  #googleAccountMenu .import-file-option {
    overflow: visible;
    white-space: nowrap;
    text-overflow: clip;
  }

  #googleAccountMenu.is-body-mounted,
  body > #googleAccountMenu.export-menu {
    position: fixed !important;
    left: max(0.75rem, env(safe-area-inset-left)) !important;
    right: max(0.75rem, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    z-index: 2147483646 !important;
  }

  #googleAccountMenu.is-body-mounted.hidden {
    display: none !important;
  }

  .google-account-dropdown.is-mobile-menu-open > #googleAccountMenu.export-menu:not(.hidden),
  body > #googleAccountMenu.export-menu:not(.hidden) {
    position: fixed !important;
    display: block !important;
    left: max(0.75rem, env(safe-area-inset-left)) !important;
    right: max(0.75rem, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    width: auto !important;
    margin-top: 0;
    max-height: min(70vh, calc(100dvh - 5rem));
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.22);
    border-radius: 14px;
    border: 1px solid var(--border);
    padding: 0.45rem;
    z-index: 2147483646 !important;
    background: #fff;
  }

  @media (hover: none), (pointer: coarse) {
    .google-account-dropdown:has(.google-account-btn.signed-in):hover > .export-menu.hidden,
    .google-account-dropdown:has(.google-account-btn.signed-in):focus-within > .export-menu.hidden {
      display: none !important;
    }
  }

  .google-account-dropdown > #googleAccountMenu.export-menu {
    top: auto;
    margin-top: 0;
    padding-top: 0.45rem;
  }

  .export-option,
  .import-file-option {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 0.65rem 0.85rem;
    font-size: 1rem;
  }

  .main {
    padding: 1rem max(0.85rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom))
      max(0.85rem, env(safe-area-inset-left));
  }

  #panelRooms {
    overflow: visible;
  }

  #panelRooms .rooms-toolbar-main {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  #panelRooms .rooms-sticky-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
    transition:
      transform 0.22s ease,
      opacity 0.22s ease,
      box-shadow 0.22s ease;
  }

  #panelRooms .rooms-sticky-bar.is-mobile-float-visible {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    z-index: 86;
    margin: 0;
    padding: 0.55rem max(0.85rem, env(safe-area-inset-right)) 0.6rem
      max(0.85rem, env(safe-area-inset-left));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  #panelRooms .rooms-sticky-bar.is-mobile-float-hiding {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    z-index: 86;
    margin: 0;
    padding: 0.55rem max(0.85rem, env(safe-area-inset-right)) 0.6rem
      max(0.85rem, env(safe-area-inset-left));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    transform: translateY(calc(-100% - 0.35rem));
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
  }

  #panelRooms > .rooms-sticky-spacer.is-mobile-float-active {
    display: block;
    height: var(--rooms-sticky-height, 3.75rem);
    flex-shrink: 0;
  }

  #panelRooms .rooms-toolbar-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
  }

  #panelRooms .rooms-toolbar-actions .view-toggle {
    flex: 0 0 auto;
  }

  #panelRooms .departed-link-btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    max-width: none;
  }

  #panelRooms .filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    width: 100%;
  }

  #panelRooms .filters select {
    width: 100%;
    min-width: 0;
    padding: 0.45rem 0.3rem;
    font-size: 0.78rem;
    min-height: 44px;
  }

  #panelRooms .rooms-sticky-bar #btnAddRoom {
    flex-shrink: 0;
    min-height: 48px;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    white-space: nowrap;
  }

  #panelRooms .rooms-sticky-bar .search-wrap {
    flex: 1;
    min-width: 0;
  }

  #panelRooms .rooms-sticky-bar .search-wrap input {
    min-height: 48px;
    font-size: 1rem;
  }

  #panelRooms .rooms-sticky-bar .search-wrap input::placeholder,
  #panelRooms #searchInput::placeholder {
    color: transparent !important;
    opacity: 0 !important;
  }

  html.is-mobile-room-table-view #panelRooms.panel-rooms-stitch {
    overflow: visible;
    overflow-x: visible;
    min-width: 0;
    max-width: 100%;
  }

  html.is-mobile-room-table-view #panelRooms .room-table-wrap:not(.hidden) {
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
  }

  html.is-mobile-room-table-view #panelRooms .room-table-wrap:not(.hidden) .room-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
  }

  html.is-mobile-room-table-view #panelRooms .room-table-wrap:not(.hidden) .room-table thead th {
    position: sticky;
    top: var(--rooms-table-sticky-top, 0px);
    z-index: 5;
    background: #fff;
    box-shadow: 0 1px 0 var(--border);
  }

  html.is-mobile-room-table-view #panelRooms .room-table-wrap:not(.hidden) .room-table thead th:nth-child(1),
  html.is-mobile-room-table-view #panelRooms .room-table-wrap:not(.hidden) .room-table thead th:nth-child(2),
  html.is-mobile-room-table-view #panelRooms .room-table-wrap:not(.hidden) .room-table tbody td:nth-child(1),
  html.is-mobile-room-table-view #panelRooms .room-table-wrap:not(.hidden) .room-table tbody td:nth-child(2) {
    position: sticky;
    background: #fff;
  }

  html.is-mobile-room-table-view #panelRooms .room-table-wrap:not(.hidden) .room-table thead th:nth-child(1),
  html.is-mobile-room-table-view #panelRooms .room-table-wrap:not(.hidden) .room-table tbody td:nth-child(1) {
    left: 0;
    min-width: 0;
    width: max-content;
    z-index: 6;
    box-shadow: 1px 0 0 var(--border);
  }

  html.is-mobile-room-table-view #panelRooms .room-table-wrap:not(.hidden) .room-table thead th:nth-child(2),
  html.is-mobile-room-table-view #panelRooms .room-table-wrap:not(.hidden) .room-table tbody td:nth-child(2) {
    left: var(--room-table-sticky-left-2, 3.25rem);
    min-width: 4.25rem;
    z-index: 5;
    box-shadow: 2px 0 6px rgba(15, 23, 42, 0.08);
  }

  html.is-mobile-room-table-view #panelRooms .room-table-wrap:not(.hidden) .room-table thead th:nth-child(1) {
    z-index: 10;
  }

  html.is-mobile-room-table-view #panelRooms .room-table-wrap:not(.hidden) .room-table thead th:nth-child(2) {
    z-index: 9;
  }

  html.is-mobile-room-table-view #panelRooms .room-table-wrap:not(.hidden) .room-table tbody td.col-order {
    width: auto;
    min-width: 0;
    white-space: nowrap;
    overflow: visible;
    padding-left: 0.45rem;
    padding-right: 0.3rem;
  }

  html.is-mobile-room-table-view
    #panelRooms
    .room-table-wrap:not(.hidden)
    .room-table
    tbody
    tr:hover
    td:nth-child(-n + 2) {
    background: var(--surface-hover);
  }

  #panelRooms.active:has(#roomCalendarWrap.hidden) #statsPanel.stats--bottom {
    display: flex !important;
  }

  /* 蹂몃Ц 理쒖냼 16px, ?곗튂 理쒖냼 48px */
  html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    font-size: 1rem;
  }

  .main,
  .main .panel {
    font-size: 1rem;
  }

  .tabs .tab {
    min-height: 48px;
    font-size: 1rem;
  }

  .main > .tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem 0.3rem;
    align-items: stretch;
  }

  .main > .tabs > .tab {
    width: 100%;
    padding: 0.55rem 0.3rem;
    font-size: 0.92rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .main > .tabs > .tab-board-group {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    flex: none;
    min-width: 0;
    margin-top: 0;
    min-height: 0;
  }

  .tab-board-group > .tab {
    flex: 0 0 auto;
    max-width: 42%;
    padding-inline: 0.65rem;
  }

  .tab-board-group .board-notice-ticker {
    margin-left: auto;
  }

  .btn,
  .btn-sm,
  .view-btn,
  .modal-close,
  .departed-link-btn,
  .filters select,
  .field-input,
  .search-wrap input,
  textarea,
  .backup-list-item-rename,
  .backup-list-item-delete {
    min-height: 48px;
    font-size: max(16px, 1rem);
  }

  .view-btn,
  .modal-close {
    min-width: 48px;
  }

  #panelRooms .filters select {
    font-size: 0.78rem;
    min-height: 44px;
    padding: 0.45rem 0.3rem;
  }

  #panelRooms .rooms-toolbar-actions .view-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0.45rem 0.55rem;
    font-size: 1rem;
  }

  #panelRooms .departed-link-btn {
    min-height: 44px;
    font-size: 0.88rem;
    padding: 0.45rem 0.75rem;
  }

  .stat-label,
  .stat-value {
    font-size: 1rem;
  }

  .main :where(
    p,
    li,
    td,
    th,
    label,
    .field-label,
    .field-hint,
    .empty-state,
    .room-rent-overdue,
    .room-order,
    .room-card-body,
    .room-card-tenant,
    .room-card-fee,
    .room-card-meta,
    .room-card-topbar-status,
    .room-table,
    .room-table th,
    .room-table td,
    .paid-room-item,
    .finance-save-hint,
    .backup-list-item-name,
    .backup-list-item-meta,
    .modal-body,
    .modal-body p,
    .toolbar,
    .room-calendar-subtitle,
    .room-calendar-day-paid,
    .finance-summary-label,
    .finance-summary-value,
    .calendar-todo-meta,
    .board-list-meta,
    .board-post-snippet,
    .cloud-sync-status
  ) {
    font-size: 1rem;
  }

  /* ?꾩옄怨꾩빟?????쒕툕 ?섏씠吏€ 蹂몃Ц */
  html[data-page="contracts"] .main,
  html[data-page="sms-notice"] .main,
  html[data-page="sms-link"] .main {
    font-size: 1rem;
  }

  html[data-page="contracts"] .main :where(
    p,
    li,
    td,
    th,
    label,
    .field-label,
    .field-hint,
    .contracts-page-tab,
    .contract-hub-action-desc,
    .contract-hub-action-label,
    .contract-action-type,
    .contract-action-status,
    .contract-action-empty,
    .contract-list-login-hint,
    .contract-page-account-hint,
    .open-contract-body-saved-status,
    .contract-tenant-signed-alert-card,
    .contract-action-card,
    .open-contract-card,
    .contract-hub-card
  ),
  html[data-page="sms-notice"] .main :where(
    p,
    li,
    td,
    th,
    label,
    .field-label,
    .field-hint
  ) {
    font-size: 1rem;
  }

  html[data-page="contracts"] :where(
    .btn,
    .field-input,
    select,
    textarea,
    .contracts-page-tab
  ) {
    min-height: 48px;
    font-size: max(16px, 1rem);
  }

  /* 紐⑤컮??硫붾돱 ?덈궡쨌?쒕∼?ㅼ슫 ?붾㈃ ?덉そ ?쒖떆 */
  .header,
  .header-inner,
  .header-actions,
  .header-notify-dropdown,
  .brand,
  .brand-nav,
  .tabs,
  .tab-board-group {
    overflow: visible;
  }

  .header .top-menu-preview,
  .main > .tabs .top-menu-preview,
  .tab-board-group > .tab .top-menu-preview {
    position: fixed;
    left: max(0.75rem, env(safe-area-inset-left));
    right: max(0.75rem, env(safe-area-inset-right));
    top: max(0.85rem, env(safe-area-inset-top));
    bottom: auto;
    width: auto;
    max-width: none;
    transform: none;
    z-index: 350;
    background: color-mix(in srgb, var(--bg) 30%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: color-mix(in srgb, var(--border) 45%, transparent);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.1);
  }

  .top-menu-preview::before {
    display: none;
  }

  .top-menu-preview-title,
  .top-menu-preview-desc,
  .top-menu-preview-meta {
    font-size: 1rem;
  }

  .is-mobile-preview-open > .top-menu-preview {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
  }

  .header .export-dropdown:not(.building-tools-export) > .export-menu:not(.hidden),
  .header .import-dropdown:not(.building-tools-import) > .export-menu:not(.hidden) {
    position: fixed;
    left: max(0.75rem, env(safe-area-inset-left));
    right: max(0.75rem, env(safe-area-inset-right));
    top: max(0.85rem, env(safe-area-inset-top));
    bottom: auto;
    z-index: 340;
    max-width: none;
  }

  .header .building-tools-export > .export-menu.is-mobile-dropdown-anchor:not(.hidden),
  .header .building-tools-import > .export-menu.is-mobile-dropdown-anchor:not(.hidden) {
    position: fixed !important;
    width: auto;
    max-width: none;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.2);
    z-index: 360;
  }

  .google-account-dropdown.is-mobile-menu-open {
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .export-menu.is-viewport-positioned.is-mobile-dropdown-anchor,
  .google-account-dropdown > #googleAccountMenu.is-mobile-dropdown-anchor,
  .header-notify-panel.is-mobile-dropdown-anchor {
    right: max(0.75rem, env(safe-area-inset-right)) !important;
    transform: none !important;
  }

  .header-notify-panel.is-open,
  .header-notify-panel.is-mobile-dropdown-anchor {
    position: fixed;
    z-index: 350;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.2);
  }

  .header-notify-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  #googleAccountMenu .export-submenu:not(.hidden) {
    position: static;
    display: block;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 390px) {
  .brand-nav-link {
    font-size: 1rem;
    padding: 0.4rem 0.35rem;
  }

  .header-actions .btn {
    font-size: 1rem;
    padding: 0.5rem 0.45rem;
  }

  #btnExportToggle,
  #btnImportToggle {
    letter-spacing: -0.02em;
  }
}

/* ?붴€?愿€由ъ옄 ?묒냽 ?듦퀎 ?붴€?*/
.super-admin-nav-link {
  white-space: nowrap;
}

.admin-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1rem 2.5rem;
}

.admin-access-denied,
.admin-loading {
  text-align: center;
  padding: 3rem 1rem;
}

.admin-access-denied h2 {
  margin: 0 0 0.75rem;
}

.admin-access-denied p {
  margin: 0 0 1.25rem;
  color: var(--muted);
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.admin-range-label {
  font-size: 0.9rem;
  color: var(--muted);
}

.admin-range-select {
  width: auto;
  min-width: 9rem;
}

.admin-updated-at {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--muted);
}

.admin-stats {
  margin-bottom: 1.25rem;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  min-width: 0;
}

.admin-panel-wide {
  margin-top: 0.25rem;
}

.admin-panel-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.admin-panel-hint {
  margin: -0.45rem 0 0.65rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.admin-stat-duration {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table-wrap-scroll {
  max-height: 28rem;
  overflow: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 1;
}

.admin-count-cell {
  width: 4.5rem;
  text-align: right !important;
  white-space: nowrap;
}

.admin-empty-cell,
.admin-empty-note {
  color: var(--muted);
  text-align: center;
}

.admin-page-title,
.admin-subtext {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: var(--muted);
  word-break: break-all;
}

.admin-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  min-height: 9rem;
  padding-top: 0.5rem;
}

.admin-bar-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  height: 9rem;
}

.admin-bar-fill {
  width: 100%;
  max-width: 2.5rem;
  background: linear-gradient(180deg, #60a5fa, var(--primary));
  border-radius: 6px 6px 2px 2px;
  min-height: 8px;
}

.admin-bar-label,
.admin-bar-count {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .admin-updated-at {
    margin-left: 0;
    width: 100%;
  }
}

.admin-section-heading {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.admin-stats-wide {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.admin-stat-delta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.admin-stat-delta.up {
  color: var(--success);
}

.admin-stat-delta.down {
  color: var(--danger);
}

.admin-check-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  color: var(--muted);
  cursor: pointer;
}

.admin-traffic-alert {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  background: var(--surface);
}

.admin-traffic-alert--high {
  border-color: #f87171;
  background: #fef2f2;
  color: #b91c1c;
}

.admin-traffic-alert--elevated {
  border-color: #fbbf24;
  background: #fffbeb;
  color: #b45309;
}

.admin-traffic-alert--low {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}

.admin-board-alert {
  max-width: 520px;
  width: calc(100% - 2rem);
}

.admin-board-alert-lead {
  margin: 0 0 1rem;
  line-height: 1.55;
  color: var(--text);
}

.admin-board-alert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: min(50vh, 320px);
  overflow-y: auto;
}

.admin-board-alert-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0.2rem 0.55rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}

.admin-board-alert-item strong {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.95rem;
  line-height: 1.45;
  word-break: break-word;
}

.admin-board-alert-item time {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.admin-board-alert-badge {
  grid-row: 1 / span 2;
  align-self: start;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  white-space: nowrap;
}

.admin-funnel {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.admin-funnel-step {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.admin-funnel-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  font-size: 0.9rem;
}

.admin-funnel-meta {
  font-size: 0.8rem;
  color: var(--muted);
}

.admin-funnel-bar-track {
  height: 0.55rem;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.admin-funnel-bar {
  height: 100%;
  background: linear-gradient(90deg, #60a5fa, var(--primary));
  border-radius: 999px;
  min-width: 4px;
}

.admin-heatmap {
  overflow-x: auto;
}

.admin-heatmap-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.admin-heatmap-table th,
.admin-heatmap-table td {
  padding: 0.2rem;
  text-align: center;
  border: 1px solid var(--border);
}

.admin-heatmap-table thead th {
  font-weight: 500;
  color: var(--muted);
  background: var(--bg);
}

.admin-heatmap-table tbody th {
  font-weight: 600;
  background: var(--surface);
}

.admin-heatmap-cell {
  background: rgba(37, 99, 235, calc(var(--heat, 0) * 0.85));
  color: var(--text);
  min-width: 1.6rem;
}

.admin-table-wrap-short {
  max-height: 14rem;
}

.admin-table-recent {
  min-width: 52rem;
}

.admin-table-recent th,
.admin-table-recent td {
  word-break: break-word;
}

.admin-table-recent .admin-visit-time,
.admin-table-recent .admin-visit-duration {
  white-space: nowrap;
}

.admin-table-recent .admin-visit-ip {
  white-space: nowrap;
  font-size: 0.84rem;
}

.admin-table-recent code,
.admin-table-recent .admin-visit-referrer {
  display: inline-block;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

.admin-table-recent .admin-visit-keyword {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-table-recent th:nth-child(1),
.admin-table-recent td:nth-child(1) {
  width: 5.5rem;
}

.admin-table-recent th:nth-child(7),
.admin-table-recent td:nth-child(7) {
  width: 4rem;
}

/* ?붴€??낃툑 臾몄옄?곕룞 (sms-link) ?붴€?*/
.sms-link-hub {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.25rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sms-link-guest,
.sms-link-loading {
  max-width: 28rem;
  margin: 2rem auto;
  padding: 1.75rem 1.5rem;
  text-align: center;
  color: var(--stitch-on-surface-variant);
  border-radius: var(--stitch-radius-xl);
  background: var(--stitch-surface-container-lowest);
  box-shadow: var(--stitch-shadow);
}

.sms-link-guest-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  border-radius: 999px;
  color: var(--stitch-primary);
  background: color-mix(in srgb, var(--stitch-primary-fixed) 30%, transparent);
}

.sms-link-guest-icon .material-symbols-outlined {
  font-size: 1.75rem;
}

.sms-link-guest p {
  margin: 0 0 1.15rem;
  line-height: 1.55;
  font-size: 0.9375rem;
}

.sms-link-guest .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.sms-link-loading .saving-block-spinner {
  margin: 0 auto 0.75rem;
}

.sms-link-btn-icon {
  font-size: 1.125rem !important;
}

.sms-link-sync-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--stitch-radius-xl);
  background: var(--stitch-surface-container-lowest);
  border: 1px solid var(--stitch-outline-variant);
  box-shadow: var(--stitch-shadow);
}

.sms-link-sync-status-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.sms-link-sync-status-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  color: var(--stitch-primary);
  background: var(--stitch-surface-container-high);
}

.sms-link-sync-status-icon .material-symbols-outlined {
  font-size: 1.375rem;
}

.sms-link-sync-status-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--stitch-on-surface);
}

.sms-link-sync-status-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--stitch-on-surface-variant);
}

.sms-link-sync-status--connected .sms-link-sync-status-label {
  color: #15803d;
}

.sms-link-sync-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #f59e0b;
}

.sms-link-sync-status--connected .sms-link-sync-dot {
  background: #22c55e;
}

.sms-link-sync-resync {
  flex: 0 0 auto;
  border-radius: var(--stitch-radius) !important;
  border: 1px solid var(--stitch-outline-variant) !important;
}

.sms-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.sms-link-card {
  padding: 1.15rem 1.25rem;
  border-radius: var(--stitch-radius-xl);
  background: var(--stitch-surface-container-lowest);
  border: 1px solid transparent;
  box-shadow: var(--stitch-shadow);
}

.sms-link-card-wide {
  grid-column: 1 / -1;
}

.sms-link-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.sms-link-card-head-text {
  min-width: 0;
  flex: 1 1 auto;
}

.sms-link-card-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
}

.sms-link-card-icon .material-symbols-outlined {
  font-size: 1.375rem;
}

.sms-link-card-icon--qr {
  color: var(--stitch-primary);
  background: color-mix(in srgb, var(--stitch-primary-fixed) 30%, transparent);
}

.sms-link-card-icon--devices {
  color: var(--stitch-secondary);
  background: color-mix(in srgb, var(--stitch-secondary-fixed) 30%, transparent);
}

.sms-link-card-icon--messages {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--stitch-tertiary);
  background: color-mix(in srgb, var(--stitch-tertiary-fixed) 50%, transparent);
}

.sms-link-card-icon--messages .material-symbols-outlined {
  font-size: 1.125rem;
}

.sms-link-card-title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--stitch-on-surface);
}

.sms-link-card-desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--stitch-on-surface-variant);
}

.sms-link-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  padding: 0.85rem;
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-surface-container-low);
  border: 1px solid var(--stitch-outline-variant);
}

.sms-link-qr-hint,
.sms-link-qr-expiry {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--stitch-on-surface-variant);
  text-align: center;
}

.sms-link-qr-expiry {
  font-weight: 600;
  color: var(--warning);
}

.sms-link-qr-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  justify-content: center;
}

.sms-link-device-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sms-link-device-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--stitch-outline-variant);
}

.sms-link-device-item:last-child {
  border-bottom: none;
}

.sms-link-card-devices {
  display: flex;
  flex-direction: column;
}

.sms-link-device-exclude {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--stitch-outline-variant);
}

.sms-link-device-exclude-title {
  margin: 0 0 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--stitch-on-surface);
}

.sms-link-device-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.sms-link-device-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
}

.sms-link-device-title-row strong {
  font-size: 0.9375rem;
  white-space: nowrap;
  color: var(--stitch-on-surface);
}

.sms-link-device-alias {
  flex: 1 1 8rem;
  min-width: 0;
  max-width: 14rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--stitch-outline-variant);
  border-radius: var(--stitch-radius);
  background: var(--stitch-surface-container-low);
  color: var(--stitch-on-surface);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.sms-link-device-alias:focus {
  outline: none;
  border-color: var(--stitch-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stitch-primary) 15%, transparent);
  background: var(--stitch-surface-container-lowest);
}

.sms-link-device-alias:disabled {
  opacity: 0.65;
}

.sms-link-device-alias::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

.sms-link-exclude-hint {
  margin: 0.45rem 0 0.65rem;
  line-height: 1.45;
  font-size: 0.8125rem;
  color: var(--stitch-on-surface-variant);
}

.sms-link-exclude-hint strong {
  font-weight: 600;
  color: var(--stitch-on-surface);
}

.sms-link-exclude-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.35rem 0 0.55rem;
}

.sms-link-exclude-suggest {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--stitch-outline-variant);
  border-radius: 999px;
  background: var(--stitch-surface-container-low);
  color: var(--stitch-on-surface-variant);
  font-size: 0.75rem;
  line-height: 1.25;
  cursor: pointer;
  font-family: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.sms-link-exclude-suggest:hover:not(:disabled),
.sms-link-exclude-suggest:focus-visible:not(:disabled) {
  border-color: var(--stitch-primary);
  color: var(--stitch-primary);
  background: color-mix(in srgb, var(--stitch-primary-fixed) 25%, transparent);
}

.sms-link-exclude-suggest.is-added,
.sms-link-exclude-suggest:disabled {
  opacity: 0.45;
  cursor: default;
}

.sms-link-exclude-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
}

.sms-link-exclude-input {
  flex: 1 1 8rem;
  min-width: 0;
  width: 100%;
  max-width: none;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--stitch-outline-variant);
  border-radius: var(--stitch-radius);
  background: var(--stitch-surface-container-low);
  color: var(--stitch-on-surface);
  font-size: 0.875rem;
  line-height: 1.4;
}

.sms-link-exclude-input:focus {
  outline: none;
  border-color: var(--stitch-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stitch-primary) 15%, transparent);
  background: var(--stitch-surface-container-lowest);
}

.sms-link-exclude-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.sms-link-exclude-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.35rem 0.28rem 0.65rem;
  border: 1px solid var(--stitch-outline-variant);
  border-radius: 999px;
  background: var(--stitch-surface-container);
}

.sms-link-exclude-word {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--stitch-on-surface);
}

.sms-link-exclude-remove {
  min-height: 1.75rem;
  padding: 0.15rem 0.45rem;
  font-size: 0.78rem;
}

.sms-link-exclude-empty {
  width: 100%;
  color: var(--stitch-on-surface-variant);
  font-size: 0.8125rem;
}

.sms-link-device-meta {
  font-size: 0.75rem;
  color: var(--stitch-on-surface-variant);
}

.sms-link-sender-hint {
  margin-top: 0.65rem;
  font-size: 0.8125rem;
  color: var(--stitch-on-surface-variant);
}

.sms-link-empty {
  color: var(--stitch-on-surface-variant);
  font-size: 0.875rem;
  text-align: center;
}

.sms-link-messages-head {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.sms-link-messages-head-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.sms-link-messages-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.sms-link-messages-title-row .sms-link-card-title {
  margin: 0;
}

.sms-link-match-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.sms-link-match-option--center {
  justify-content: center;
  width: 100%;
  padding: 0.65rem 1rem;
  border: 1px solid var(--stitch-outline-variant);
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-surface-container-low);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--stitch-on-surface);
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sms-link-match-option--center:has(input:checked) {
  border-color: color-mix(in srgb, var(--stitch-primary) 35%, transparent);
  background: color-mix(in srgb, var(--stitch-primary-fixed) 35%, var(--stitch-surface-container-lowest));
  color: var(--stitch-primary);
}

.sms-link-match-option input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--stitch-primary);
}

.sms-link-messages-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sms-link-filter {
  display: inline-flex;
  padding: 0.2rem;
  border-radius: 999px;
  background: var(--stitch-surface-container-low);
  border: 1px solid var(--stitch-outline-variant);
}

.sms-link-filter-btn {
  border: none;
  background: transparent;
  padding: 0.35rem 0.75rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--stitch-on-surface-variant);
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.sms-link-filter-btn.is-active {
  background: var(--stitch-primary);
  color: var(--stitch-on-primary);
}

.sms-link-hub .btn-primary {
  border-radius: var(--stitch-radius);
  background: var(--stitch-primary);
}

.sms-link-hub .btn-primary:hover {
  background: var(--stitch-primary-container);
}

.sms-link-hub .btn-ghost {
  border-radius: var(--stitch-radius);
}

.sms-link-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--stitch-outline-variant);
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-surface-container-low);
}

.sms-link-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.sms-link-table th,
.sms-link-table td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--stitch-outline-variant);
  text-align: left;
  white-space: nowrap;
}

.sms-link-table th {
  background: var(--stitch-surface-container);
  font-size: 0.75rem;
  color: var(--stitch-on-surface-variant);
  font-weight: 600;
}

.sms-link-table tbody tr:last-child td {
  border-bottom: none;
}

.sms-link-table tbody tr:hover td {
  background: color-mix(in srgb, var(--stitch-primary-fixed) 12%, transparent);
}

.sms-link-table td:nth-child(3) {
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sms-link-messages-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.sms-link-messages-meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--stitch-on-surface-variant);
  text-align: center;
}

.sms-link-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  background: var(--stitch-surface-container-high);
  color: var(--stitch-on-surface-variant);
}

.sms-link-badge--ok {
  background: #dcfce7;
  color: #15803d;
}

.sms-link-badge--wait {
  background: #fef3c7;
  color: #b45309;
}

.sms-link-method {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.6875rem;
  color: var(--stitch-on-surface-variant);
}

.sms-link-amount-match {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.6875rem;
  font-weight: 600;
}

.sms-link-amount-match--ok {
  color: #15803d;
}

.sms-link-amount-match--warn {
  color: #b45309;
}

.sms-link-suggest {
  color: #b45309;
  font-size: 0.8125rem;
}

.sms-link-msg-cell {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--stitch-on-surface-variant);
}

.sms-link-muted {
  color: var(--stitch-on-surface-variant);
}

.export-option.is-active {
  font-weight: 700;
  color: var(--primary);
  cursor: default;
}

@media (max-width: 640px) {
  .sms-link-hero,
  .sms-notice-hero {
    flex-direction: column;
  }

  .sms-link-steps,
  .sms-notice-steps {
    flex-wrap: wrap;
  }

  .sms-link-sync-status {
    flex-direction: column;
    align-items: stretch;
  }

  .sms-link-sync-resync {
    width: 100%;
    justify-content: center;
  }
}

/* ?€?€ Stitch premium main rooms panel ?€?€ */
.panel-rooms-stitch {
  --stitch-bg: #faf9f8;
  --stitch-surface: #ffffff;
  --stitch-primary: #031632;
  --stitch-primary-container: #1a2b48;
  --stitch-on-surface-variant: #44474d;
  --stitch-outline-variant: #c5c6ce;
  --stitch-surface-container-low: #f4f3f2;
  --stitch-card-width: 168px;
  --stitch-card-width-desktop: 188px;
  --stitch-floor-card-width: 172px;
  --stitch-floor-card-width-desktop: 220px;
  --stitch-card-hero-height: 3.75rem;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.panel-rooms-stitch .rooms-toolbar--stitch {
  margin-bottom: 1rem;
}

.panel-rooms-stitch .rooms-toolbar-single-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.panel-rooms-stitch .rooms-toolbar-single-row::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.panel-rooms-stitch .rooms-sticky-bar {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.panel-rooms-stitch .btn-add-room-stitch {
  background: var(--stitch-primary-container);
  border-color: var(--stitch-primary-container);
  border-radius: 999px;
  padding: 0.42rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.panel-rooms-stitch .btn-add-room-stitch:hover {
  background: var(--stitch-primary);
  border-color: var(--stitch-primary);
}

.panel-rooms-stitch .search-wrap--stitch {
  flex: 1 1 8rem;
  min-width: 5.5rem;
}

.panel-rooms-stitch .search-wrap--stitch input {
  width: 100%;
  padding: 0.42rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--stitch-outline-variant) 50%, transparent);
  border-radius: 999px;
  background: var(--stitch-surface);
  color: var(--stitch-primary-container);
  font-size: 0.82rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.panel-rooms-stitch .search-wrap--stitch input:focus {
  outline: none;
  border-color: var(--stitch-primary-container);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}

.panel-rooms-stitch .view-toggle--stitch {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--stitch-outline-variant) 60%, transparent);
  border-radius: 999px;
  overflow: hidden;
  background: var(--stitch-surface);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

.panel-rooms-stitch .view-toggle--stitch .view-btn {
  padding: 0.38rem 0.62rem;
  background: transparent;
  color: var(--stitch-on-surface-variant);
  font-size: 0.9rem;
  line-height: 1;
}

.panel-rooms-stitch .view-toggle--stitch .view-btn.active {
  background: var(--stitch-primary-container);
  color: #fff;
}

.panel-rooms-stitch .filters--stitch {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 0.35rem;
  min-width: 0;
}

.panel-rooms-stitch .filters--stitch select {
  flex: 0 1 auto;
  width: auto;
  min-width: 4.75rem;
  max-width: 7.5rem;
  padding: 0.38rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--stitch-outline-variant) 50%, transparent);
  border-radius: 0.55rem;
  background: var(--stitch-surface);
  color: var(--stitch-primary-container);
  font-size: 0.78rem;
}

.panel-rooms-stitch .departed-link-btn--compact {
  flex-shrink: 0;
  border-radius: 999px;
  white-space: nowrap;
  padding: 0.38rem 0.55rem;
  font-size: 0.78rem;
}

.panel-rooms-stitch .stats--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0;
  width: 100%;
  grid-template-columns: none;
}

.panel-rooms-stitch .stats--inline .stat-card {
  flex: 1 1 0;
  min-width: 5.5rem;
  border: 1px solid color-mix(in srgb, var(--stitch-outline-variant) 40%, transparent);
  border-radius: 1rem;
  border-top: none;
  padding: 0.75rem 1rem;
  background: var(--stitch-surface);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  text-align: center;
}

.panel-rooms-stitch .stats--inline .stat-card-count {
  border-top: none;
  padding-top: 0.75rem;
}

.panel-rooms-stitch .stats--inline .stat-label {
  color: var(--stitch-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 500;
}

.panel-rooms-stitch .stats--inline .stat-value {
  color: var(--stitch-primary-container);
  font-size: 1.35rem;
  font-weight: 700;
}

.panel-rooms-stitch .stats--inline .stat-occupied .stat-value {
  color: #16a34a;
}

.panel-rooms-stitch .stats--inline .stat-vacant .stat-value {
  color: #64748b;
}

.panel-rooms-stitch .departed-link-btn {
  border-radius: 999px;
  white-space: nowrap;
}

.panel-rooms-stitch .room-grid--floors {
  display: flex;
  flex-direction: column;
  gap: 0;
  grid-template-columns: none;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.panel-rooms-stitch .floor-section {
  min-width: 0;
  max-width: 100%;
}

.panel-rooms-stitch .floor-section + .floor-section {
  margin-top: 0.05rem;
}

.panel-rooms-stitch .floor-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.05rem;
}

.panel-rooms-stitch .floor-heading {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--stitch-primary-container);
  letter-spacing: -0.01em;
}

.panel-rooms-stitch .floor-heading-meta {
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--stitch-on-surface-variant);
}

.panel-rooms-stitch .floor-room-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.55rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.panel-rooms-stitch .floor-room-track::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.panel-rooms-stitch .floor-room-track .room-card--stitch {
  flex: 0 0 auto;
  flex-shrink: 0;
  scroll-snap-align: start;
  width: var(--stitch-floor-card-width);
  min-width: var(--stitch-floor-card-width);
  max-width: var(--stitch-floor-card-width);
  border-radius: 0.65rem;
  border: 1px solid transparent;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  contain: none;
}

.panel-rooms-stitch .floor-room-track .room-card--stitch:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  border-color: color-mix(in srgb, var(--stitch-outline-variant) 40%, transparent);
}

.panel-rooms-stitch .room-card--stitch .room-card-topbar {
  display: none;
}

.panel-rooms-stitch .room-card-hero {
  position: relative;
  height: var(--stitch-card-hero-height);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0.4rem 0.5rem;
  overflow: hidden;
}

.panel-rooms-stitch .room-card--status-vacant .room-card-hero {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 52%, #cbd5e1 100%);
  border-bottom: 1px solid color-mix(in srgb, var(--stitch-outline-variant) 30%, transparent);
}

.panel-rooms-stitch .room-card--status-vacant .room-card-hero-number {
  color: #475569;
  text-shadow: none;
}

.panel-rooms-stitch .room-card--status-vacant .room-card-badge {
  background: rgba(255, 255, 255, 0.92);
  color: #64748b;
  border: 1px solid rgba(148, 163, 184, 0.32);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.panel-rooms-stitch .room-card--status-occupied .room-card-hero {
  background: linear-gradient(135deg, #1a2b48 0%, #031632 55%, #0b1726 100%);
}

.panel-rooms-stitch .room-card--status-reserved .room-card-hero {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
}

.panel-rooms-stitch .room-card--status-emergency .room-card-hero {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.panel-rooms-stitch .room-card--status-repair .room-card-hero {
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
}

.panel-rooms-stitch .room-card--status-office .room-card-hero {
  background: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%);
}

.panel-rooms-stitch .room-card--status-shop .room-card-hero {
  background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
}

.panel-rooms-stitch .room-card-badge {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  left: auto;
  padding: 0.1rem 0.38rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--stitch-primary-container);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.panel-rooms-stitch .room-card--status-occupied .room-card-badge {
  background: rgba(215, 226, 255, 0.95);
  color: #081b38;
}

.panel-rooms-stitch .room-card-hero-number {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.panel-rooms-stitch .room-card--stitch .room-card-body {
  padding: 0.38rem 0.5rem 0.45rem;
  background: var(--stitch-surface);
}

.panel-rooms-stitch .room-card-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.2rem;
  margin-bottom: 0.08rem;
}

.panel-rooms-stitch .room-card-fee-block {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.2rem;
  min-width: 0;
}

.panel-rooms-stitch .room-card-head-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  margin-left: auto;
  min-width: 0;
}

.panel-rooms-stitch .room-card--stitch .room-fee {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--stitch-primary-container);
}

.panel-rooms-stitch .room-fee-unit {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--stitch-on-surface-variant);
}

.panel-rooms-stitch .room-card--stitch .room-card-more {
  flex-shrink: 0;
  border: none;
  background: var(--stitch-surface-container-low);
  color: var(--stitch-on-surface-variant);
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1;
}

.panel-rooms-stitch .room-card--stitch:not(.room-card--floor) .room-card-hero-corner .room-card-more {
  width: 1.45rem;
  height: 1.45rem;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 0.85rem;
}

.panel-rooms-stitch .room-card--stitch:not(.room-card--floor).room-card--status-vacant .room-card-hero-corner .room-card-more {
  background: rgba(100, 116, 139, 0.14);
  color: #475569;
}

.panel-rooms-stitch .room-card-meta {
  margin-bottom: 0.08rem;
}

.panel-rooms-stitch .room-card--stitch .room-order {
  font-size: 0.62rem;
  color: var(--stitch-on-surface-variant);
}

.panel-rooms-stitch .room-card--stitch .room-tenant-name {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--stitch-primary-container);
  line-height: 1.25;
}

.panel-rooms-stitch .room-card--stitch .room-preview {
  margin: 0.08rem 0 0.05rem;
  min-height: 0;
  font-size: 0.65rem;
  line-height: 1.2;
}

.panel-rooms-stitch .room-card--stitch .room-tenant-phone,
.panel-rooms-stitch .room-card--stitch .room-tenant-dates {
  font-size: 0.62rem;
  margin-top: 0.05rem;
  line-height: 1.2;
}

.panel-rooms-stitch .room-card--stitch .room-payment-day {
  font-size: 0.62rem;
  margin-top: 0.08rem;
  line-height: 1.2;
}

.panel-rooms-stitch .room-card--stitch .room-options-preview,
.panel-rooms-stitch .room-card--stitch .room-unpaid-manual,
.panel-rooms-stitch .room-card--stitch .room-rent-overdue {
  margin-top: 0.12rem;
  font-size: 0.6rem;
  line-height: 1.2;
}

.panel-rooms-stitch .room-card--stitch .room-rent-overdue strong {
  font-size: 0.72rem;
}

.panel-rooms-stitch .room-card--stitch .room-list-quick-actions {
  margin-top: 0.2rem;
  gap: 0.18rem;
}

.panel-rooms-stitch .room-card--stitch .room-quick-badge {
  font-size: 0.58rem;
  padding: 0.1rem 0.3rem;
  line-height: 1.15;
}

.panel-rooms-stitch .room-card--stitch.room-card--stay-date-sort .room-preview {
  min-height: 0;
}

.panel-rooms-stitch .room-card--stitch .room-tenant-dates--sort-focus {
  margin-top: 0.12rem;
  padding-top: 0.12rem;
}

.panel-rooms-stitch .room-card--stitch .room-payment-day--sort-focus {
  margin-top: 0.12rem;
  padding-top: 0.12rem;
  gap: 0.05rem;
}

.panel-rooms-stitch .room-card--stitch .room-payment-day--sort-focus .room-payment-day-label {
  font-size: 0.58rem;
}

.panel-rooms-stitch .room-card--stitch .room-payment-day--sort-focus .room-payment-day-value {
  font-size: 1.15rem;
}

.panel-rooms-stitch .room-card--stitch .room-payment-day--sort-focus .room-payment-day-value small {
  font-size: 0.55rem;
}

.panel-rooms-stitch .room-card--stitch .no-tenant {
  font-family: "Pretendard", sans-serif;
  color: var(--stitch-on-surface-variant);
  font-weight: 400;
  opacity: 0.55;
}

.panel-rooms-stitch .empty-state {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--stitch-on-surface-variant);
}

.panel-rooms-stitch .stats--bottom {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--stitch-outline-variant) 35%, transparent);
}

.panel-rooms-stitch .stats--bottom .stat-card {
  flex: 1 1 calc(33.333% - 0.5rem);
  min-width: 6.5rem;
}

@media (min-width: 769px) {
  .panel-rooms-stitch .floor-room-track .room-card--stitch {
    width: var(--stitch-floor-card-width-desktop);
    min-width: var(--stitch-floor-card-width-desktop);
    max-width: var(--stitch-floor-card-width-desktop);
    flex-basis: var(--stitch-floor-card-width-desktop);
  }

  .panel-rooms-stitch .stats--bottom .stat-card {
    flex: 1 1 calc(12.5% - 0.6rem);
    min-width: 5.5rem;
  }
}

@media (max-width: 768px) {
  #panelRooms.panel-rooms-stitch .rooms-toolbar-single-row {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.15rem;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  #panelRooms.panel-rooms-stitch .rooms-toolbar-single-row::-webkit-scrollbar {
    display: none;
  }

  #panelRooms.panel-rooms-stitch .rooms-sticky-bar #btnAddRoom {
    min-height: auto;
    padding: 0.42rem 0.75rem;
    font-size: 0.82rem;
  }

  #panelRooms.panel-rooms-stitch .rooms-sticky-bar .search-wrap input {
    min-height: auto;
    font-size: 0.82rem;
    padding: 0.42rem 0.85rem;
  }

  #panelRooms.panel-rooms-stitch .filters--stitch {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    width: auto;
  }

  .panel-rooms-stitch .search-wrap--stitch {
    flex: 1 1 6rem;
    min-width: 4.5rem;
  }

  .panel-rooms-stitch .filters--stitch select {
    min-width: 4.25rem;
    max-width: 6rem;
    font-size: 0.72rem;
    padding: 0.35rem 0.35rem;
  }

  .panel-rooms-stitch .floor-room-track .room-card--stitch {
    width: var(--stitch-floor-card-width);
    min-width: var(--stitch-floor-card-width);
    max-width: var(--stitch-floor-card-width);
  }
}

@media (max-width: 640px) {
  .panel-rooms-stitch .stats--inline .stat-card {
    flex: 1 1 calc(33.333% - 0.5rem);
    min-width: 0;
    padding: 0.6rem 0.5rem;
  }

  .panel-rooms-stitch .stats--inline .stat-value {
    font-size: 1.1rem;
  }
}

.panel-rooms-stitch .view-toggle--stitch .view-btn[data-view="floor"].is-floor-desc {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--stitch-primary-container) 35%, transparent);
}

.panel-rooms-stitch .view-toggle--stitch .view-btn[data-view="floor"].is-floor-desc::after {
  content: "??;
  margin-left: 0.12rem;
  font-size: 0.62rem;
  font-weight: 700;
  vertical-align: super;
}

.panel-rooms-stitch .room-grid:not(.room-grid--floors) {
  display: grid;
  /* 모바일: 한 줄 2장 고정 (minmax 168px면 좁은 화면에서 1열로 떨어짐) */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  flex-direction: unset;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .panel-rooms-stitch .room-grid:not(.room-grid--floors) {
    grid-template-columns: repeat(
      auto-fill,
      minmax(var(--stitch-card-width), 1fr)
    );
  }
}

@media (min-width: 1024px) {
  .panel-rooms-stitch .room-grid:not(.room-grid--floors) {
    grid-template-columns: repeat(
      auto-fill,
      minmax(var(--stitch-card-width-desktop), 1fr)
    );
  }
}

.panel-rooms-stitch .room-grid:not(.room-grid--floors) .room-card--stitch {
  width: 100%;
  min-width: 0;
  max-width: none;
  flex: unset;
}

.panel-rooms-stitch .room-grid:not(.room-grid--floors) .room-list-quick-actions {
  flex-wrap: nowrap;
  width: 100%;
  justify-content: center;
}

.panel-rooms-stitch .view-toggle--stitch .view-btn[data-view="floor"] {
  letter-spacing: -0.04em;
}

#panelRooms.panel-rooms-stitch {
  overflow: visible;
  overflow-x: clip;
  min-width: 0;
  max-width: 100%;
}

.main-page-shell .panel-rooms-stitch {
  background: var(--stitch-bg, #faf9f8);
  border-radius: 1rem;
  padding: 0.25rem 0 1rem;
}

/* ?€?€ Stitch room detail modal (102???곸꽭 愿€由? ?€?€ */
.modal.modal-room-stitch:not([open]) {
  display: none;
}

.modal.modal-room-stitch[open] {
  display: flex;
  flex-direction: column;
  max-width: min(960px, calc(100vw - 1.25rem));
  width: min(720px, calc(100% - 1.25rem));
  min-width: min(100%, 20rem);
  max-height: min(92vh, 100%);
  overflow: hidden;
  background: var(--stitch-bg, #faf9f8);
  border-radius: var(--stitch-radius-xl, 0.75rem);
  box-shadow: var(--stitch-shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.08));
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

#roomModal.modal-room-stitch .room-modal-stitch-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.modal.modal-room-stitch::backdrop {
  background: rgba(26, 28, 28, 0.35);
  backdrop-filter: blur(6px);
}

#roomModal.modal-room-stitch .room-modal-stitch-header {
  flex-shrink: 0;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--stitch-surface-variant, #e3e2e1);
  background: color-mix(in srgb, var(--stitch-surface, #fff) 88%, transparent);
  backdrop-filter: blur(12px);
}

#roomModal.modal-room-stitch .room-modal-stitch-head-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  min-width: 0;
}

#roomModal.modal-room-stitch .room-modal-stitch-head-main h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--stitch-primary, #031632);
  line-height: 1.25;
}

.room-modal-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--stitch-primary-fixed, #d7e2ff);
  color: var(--stitch-primary, #031632);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.room-modal-status-badge::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: currentColor;
  flex: 0 0 auto;
}

.room-modal-status-badge--occupied {
  background: var(--stitch-primary-fixed, #d7e2ff);
  color: var(--stitch-primary, #031632);
}

.room-modal-status-badge--vacant {
  background: var(--stitch-surface-container, #eeeeed);
  color: var(--stitch-on-surface-variant, #44474d);
}

.room-modal-status-badge--reserved {
  background: #fef3c7;
  color: #92400e;
}

.room-modal-status-badge--repair,
.room-modal-status-badge--emergency {
  background: var(--stitch-secondary-fixed, #ffdad3);
  color: var(--stitch-secondary, #a73925);
}

#roomModal.modal-room-stitch .room-modal-stitch-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.85rem 1rem 1rem;
  gap: 0.65rem;
  background: var(--stitch-surface-container-low, #f4f3f2);
}

.room-modal-stitch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

@media (min-width: 640px) {
  .room-modal-stitch-grid {
    grid-template-columns: minmax(9.5rem, 0.68fr) minmax(13rem, 1.32fr);
    align-items: start;
  }

  .room-modal-stitch-card--basic {
    grid-column: 1;
  }

  .room-modal-stitch-card--tenant {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .room-modal-stitch-card--contract {
    grid-column: 1 / -1;
  }
}

.room-modal-tenant-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--stitch-surface-variant, #e3e2e1);
}

.room-modal-tenant-qr-hit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.room-modal-tenant-qr-hit:disabled {
  cursor: default;
}

.room-modal-tenant-qr-hit:not(:disabled):active .room-modal-tenant-qr-frame {
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.room-modal-tenant-qr-frame {
  position: relative;
  display: block;
  width: 136px;
  height: 136px;
  border-radius: 0.45rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(197, 198, 206, 0.65);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.room-modal-tenant-qr-canvas {
  display: block;
  width: 136px;
  height: 136px;
}

.room-modal-tenant-qr-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--stitch-on-surface-variant, #74777f);
  background: #f8f9fb;
}

.room-modal-tenant-qr.is-empty .room-modal-tenant-qr-canvas {
  opacity: 0;
}

.room-modal-tenant-qr-label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--stitch-on-surface, #1a1c1c);
}

.room-modal-tenant-qr-hint {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: var(--stitch-on-surface-variant, #74777f);
}

.room-modal-stitch-card {
  background: var(--stitch-surface-container-lowest, #fff);
  border-radius: var(--stitch-radius-xl, 0.75rem);
  box-shadow: var(--stitch-shadow, 0 4px 20px rgba(0, 0, 0, 0.04));
  padding: 0.85rem 0.95rem 0.95rem;
}

.room-modal-stitch-card-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.65rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--stitch-surface-variant, #e3e2e1);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--stitch-on-surface, #1a1c1c);
  line-height: 1.3;
}

.room-modal-stitch-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--stitch-primary, #031632);
}

.room-modal-stitch-card-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.room-modal-stitch-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#roomModal.modal-room-stitch .form-row label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--stitch-on-surface-variant, #44474d);
  margin-bottom: 0.12rem;
}

#roomModal.modal-room-stitch .form-row input,
#roomModal.modal-room-stitch .form-row select,
#roomModal.modal-room-stitch .form-row textarea {
  border: none;
  border-bottom: 1px solid var(--stitch-outline-variant, #c5c6ce);
  border-radius: 0;
  background: transparent;
  padding: 0.42rem 0 0.48rem;
  font-size: 0.92rem;
}

#roomModal.modal-room-stitch .form-row input:focus,
#roomModal.modal-room-stitch .form-row select:focus,
#roomModal.modal-room-stitch .form-row textarea:focus {
  border-bottom-color: var(--stitch-primary, #031632);
  box-shadow: none;
}

#roomModal.modal-room-stitch .form-row textarea {
  border: 1px solid var(--stitch-outline-variant, #c5c6ce);
  border-radius: 8px;
  padding: 0.48rem 0.6rem;
  background: var(--stitch-surface-container-low, #f4f3f2);
}

#roomModal.modal-room-stitch .date-segments input,
#roomModal.modal-room-stitch .date-segments--select select {
  border: 1px solid var(--stitch-outline-variant, #c5c6ce);
  border-radius: 8px;
  background: var(--stitch-surface-container-low, #f4f3f2);
  padding: 0.4rem 1.55rem 0.4rem 0.35rem;
}

#roomModal.modal-room-stitch .date-segments-picker-btn,
#roomModal.modal-room-stitch .date-segments-clear-btn {
  border: 1px solid var(--stitch-outline-variant, #c5c6ce);
  border-radius: 8px;
  background: var(--stitch-surface-container-low, #f4f3f2);
}

#roomModal.modal-room-stitch .rent-paid-row {
  margin-top: 0.15rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: var(--stitch-surface-container, #eeeeed);
}

#roomModal.modal-room-stitch .rent-paid-toggle-face {
  min-height: 2.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  justify-content: flex-start;
  text-align: left;
}

#roomModal.modal-room-stitch .rent-paid-toggle-face.is-unpaid,
#roomModal.modal-room-stitch
  .rent-paid-toggle-input:not(:checked)
  + .rent-paid-toggle-face {
  border-color: #e67e22;
  background: #fff7ef;
  color: #9a3412;
  box-shadow: inset 0 0 0 1px rgba(230, 126, 34, 0.12);
}

#roomModal.modal-room-stitch .rent-paid-toggle-face.is-unpaid:hover,
#roomModal.modal-room-stitch
  .rent-paid-toggle-input:not(:checked)
  + .rent-paid-toggle-face:hover {
  border-color: #d35400;
  background: #ffedd5;
  color: #7c2d12;
}

#roomModal.modal-room-stitch .rent-paid-toggle-input:checked + .rent-paid-toggle-face,
#roomModal.modal-room-stitch .rent-paid-toggle-face.is-paid {
  border-color: #1b7f4a;
  background: color-mix(in srgb, #1b7f4a 12%, #ffffff);
  color: #14532d;
  box-shadow: none;
}

#roomModal.modal-room-stitch .rent-paid-toggle-input:checked + .rent-paid-toggle-face:hover,
#roomModal.modal-room-stitch .rent-paid-toggle-face.is-paid:hover {
  border-color: #14633a;
  background: color-mix(in srgb, #1b7f4a 18%, #ffffff);
  color: #14532d;
}

#roomModal.modal-room-stitch .rent-paid-toggle-box {
  width: 1.35rem;
  height: 1.35rem;
}

#roomModal.modal-room-stitch .rent-paid-toggle-input:checked + .rent-paid-toggle-face .rent-paid-toggle-box,
#roomModal.modal-room-stitch .rent-paid-toggle-face.is-paid .rent-paid-toggle-box {
  border-color: #1b7f4a;
  background: #1b7f4a;
}

#roomModal.modal-room-stitch .rent-paid-toggle-check {
  display: none;
}

#roomModal.modal-room-stitch .rent-paid-toggle-input:checked + .rent-paid-toggle-face .rent-paid-toggle-check,
#roomModal.modal-room-stitch .rent-paid-toggle-face.is-paid .rent-paid-toggle-check {
  display: inline-block;
}

#roomModal.modal-room-stitch .btn-rent-monthly-toggle,
#roomModal.modal-room-stitch .btn-room-extra-toggle {
  border-color: var(--stitch-outline-variant, #c5c6ce);
  background: var(--stitch-surface-container-lowest, #fff);
}

#roomModal.modal-room-stitch .rent-monthly-panel {
  background: var(--stitch-surface-container-lowest, #fff);
  border-color: var(--stitch-outline-variant, #c5c6ce);
}

#roomModal.modal-room-stitch .room-contract-actions {
  margin-top: 0;
  padding: 0.85rem 0.95rem 0.95rem;
  border: none;
  border-radius: var(--stitch-radius-xl, 0.75rem);
  background: var(--stitch-surface-container-lowest, #fff);
  box-shadow: var(--stitch-shadow, 0 4px 20px rgba(0, 0, 0, 0.04));
}

#roomModal.modal-room-stitch .room-contract-actions .room-modal-stitch-card-title {
  margin-bottom: 0.55rem;
}

#roomModal.modal-room-stitch .room-contract-section-label {
  display: none;
}

#roomModal.modal-room-stitch .room-modal-stitch-footer {
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--stitch-surface-variant, #e3e2e1);
  background: color-mix(in srgb, var(--stitch-surface, #fff) 92%, transparent);
  backdrop-filter: blur(10px);
}

#roomModal.modal-room-stitch .btn-room-delete {
  background: transparent;
  border: none;
  color: var(--stitch-error, #ba1a1a);
  box-shadow: none;
  font-weight: 600;
}

#roomModal.modal-room-stitch .btn-room-delete:hover {
  background: color-mix(in srgb, var(--stitch-error, #ba1a1a) 8%, transparent);
}

#roomModal.modal-room-stitch .btn-room-move-out,
#roomModal.modal-room-stitch .btn-room-cancel {
  background: var(--stitch-surface-container-lowest, #fff);
  border: 1px solid var(--stitch-outline-variant, #c5c6ce);
  color: var(--stitch-on-surface, #1a1c1c);
}

#roomModal.modal-room-stitch .btn-room-save {
  background: var(--stitch-primary, #031632);
  border-color: var(--stitch-primary, #031632);
  color: var(--stitch-on-primary, #fff);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(3, 22, 50, 0.18);
}

#roomModal.modal-room-stitch .btn-room-save:hover {
  background: var(--stitch-primary-container, #1a2b48);
  border-color: var(--stitch-primary-container, #1a2b48);
}

@media (max-width: 639px) {
  /* 蹂몃Ц留??ㅽ겕濡ㅽ븯怨??명꽣(??젣/?댁떎/?リ린/?€??????긽 ?붾㈃???④? */
  .modal.modal-room-stitch[open] {
    width: calc(100% - 1rem);
    max-width: none;
    height: calc(
      100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) -
        1rem
    );
    max-height: calc(
      100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) -
        1rem
    );
    margin: auto;
  }

  #roomModal.modal-room-stitch .room-modal-stitch-form {
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  #roomModal.modal-room-stitch .room-modal-stitch-body {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  #roomModal.modal-room-stitch .room-modal-stitch-footer {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 480px) {
  #roomModal.modal-room-stitch .room-modal-stitch-footer {
    flex-direction: column;
    align-items: stretch;
  }

  #roomModal.modal-room-stitch .modal-footer-left,
  #roomModal.modal-room-stitch .modal-footer-actions {
    width: 100%;
    justify-content: stretch;
  }

  #roomModal.modal-room-stitch .modal-footer-actions .btn-room-save {
    order: -1;
  }
}


/* Google Translate top bar / banner — always hidden */
.goog-te-banner-frame,
iframe.goog-te-banner-frame,
.goog-te-balloon-frame,
body > .skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-l4eHX-hJNdkd,
#goog-gt-tt,
.goog-te-spinner-pos,
.goog-tooltip,
iframe.skiptranslate {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  border: 0 !important;
}
html.translated-ltr body,
html.translated-rtl body,
html.has-goshiwon-auto-translate body,
body {
  top: 0 !important;
  position: static !important;
}
.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/* 계약서 인쇄: 전용 창 실패 시 폴백 — iframe은 측정 높이 유지(height:auto면 Android에서 잘림) */
@media print {
  html.is-contract-document-printing,
  html.is-contract-document-printing body {
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  html.is-contract-document-printing body > *:not([data-contract-print-frame]) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  html.is-contract-document-printing iframe[data-contract-print-frame] {
    display: block !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 210mm !important;
    min-width: 0 !important;
    height: var(--contract-print-frame-height, 297mm) !important;
    min-height: var(--contract-print-frame-height, 297mm) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1 !important;
    border: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html.is-contract-document-printing [data-contract-print-host] {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #contractDocToolbar,
  .print-actions,
  .contract-completed-panel,
  .contract-completed-message,
  .contract-admin-modal-footer,
  .modal-footer,
  .contract-preview-toolbar,
  .sign-notice,
  .sign-notice-completed,
  .sign-actions,
  .sign-card > h1,
  .sign-card > .field-hint,
  .modal-close,
  .modal-header {
    display: none !important;
    visibility: hidden !important;
  }
}