/* 새 디자인 — html[data-ui="renewal"][data-design="modern"]
   리뉴얼 팔레트(--rn-accent 등) 위에 레이아웃만 덧씌움 */

/* ── 공통: 새 디자인 전용 요소는 기본 숨김 ── */
.admin-brand,
.admin-tab-ico,
.admin-top-event {
  display: none;
}

/* 로고 + 이름 (사이드바·설정 미리보기 공용) */
.brand-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-logo-svg {
  width: 24px;
  height: 24px;
}

.brand-name {
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1.3;
  color: #fff;
  word-break: keep-all;
}

/* 색상 설정 → 로고 이미지 */
.brand-logo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.brand-logo-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #1b2433;
}

.brand-logo-inputs {
  flex: 1;
  min-width: 240px;
  display: grid;
  gap: 8px;
}

.brand-logo-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html .brand-logo-setting .brand-logo-preview .brand-name {
  color: #fff;
  font-weight: 800;
}

.brand-logo-btns .btn.btn-sm {
  padding: 6px 12px;
  border: 1px solid #d0d7e2;
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.brand-logo-btns .btn.btn-sm:hover {
  border-color: #94a3b8;
}

html[data-design='modern'] .ui-theme-picker.ui-theme-grid {
  max-width: 54rem;
}

/* ── 새 디자인 변수 ── */
html[data-design='modern'] {
  --md-side-w: 236px;
  --md-side-bg: #1b2433;
  --md-side-text: #c3ccda;
  --md-bg: #f3f5f9;
  --md-line: #e2e7ef;
  --md-title: #111827;
  --md-box-line: #1e3a8a;
  --md-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 8px rgba(16, 24, 40, 0.04);
  --rn-font-display: Pretendard, 'Manrope', system-ui, sans-serif;
  --rn-font-body: Pretendard, 'Manrope', system-ui, sans-serif;
}

/* ── 관리자 ── */
html[data-design='modern'] body.admin-mode {
  background: var(--md-bg);
}

html[data-design='modern'] body.admin-mode .app-shell:has(.admin-tabs) {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 0 0 var(--md-side-w);
}

html[data-design='modern'] .admin-panel {
  max-width: none;
  margin: 0;
  padding: 0 0 48px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* 왼쪽 사이드바 */
html[data-design='modern'] .admin-tabs {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--md-side-w);
  margin: 0;
  padding: 18px 12px 24px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-y: auto;
  background: var(--md-side-bg);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html[data-design='modern'] .admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-design='modern'] .admin-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--md-side-text);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
}

html[data-design='modern'] .admin-tab-ico {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
}

html[data-design='modern'] .admin-tab:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

html[data-design='modern'] .admin-tab.active {
  background: var(--rn-accent);
  color: var(--rn-on-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* 상단 바 */
html[data-design='modern'] .admin-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  margin: 0 0 24px;
  padding: 8px clamp(16px, 2.4vw, 36px);
  background: #fff;
  border-bottom: 1px solid var(--md-line);
}

html[data-design='modern'] .admin-header .btn-ghost {
  padding: 8px 12px;
  border: 1px solid var(--md-line);
  border-radius: 8px;
  background: #fff;
  color: var(--md-title);
  font-weight: 600;
}

html[data-design='modern'] .admin-top-event {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  font-size: 0.92rem;
  color: var(--rn-muted);
}

html[data-design='modern'] .admin-top-event:empty {
  visibility: hidden;
}

html[data-design='modern'] .admin-top-event strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 7px 14px;
  border: 1px solid var(--md-line);
  border-radius: 8px;
  background: #fff;
  color: var(--md-title);
  font-weight: 700;
}

/* 본문 */
html[data-design='modern'] .admin-panel > h2,
html[data-design='modern'] .admin-panel > .hint,
html[data-design='modern'] .admin-panel > .admin-tab-panel,
html[data-design='modern'] .admin-panel > .status {
  max-width: 1280px;
  margin-left: clamp(16px, 2.4vw, 36px);
  margin-right: clamp(16px, 2.4vw, 36px);
}

html[data-design='modern'] .admin-panel > h2 {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: clamp(1.45rem, 2.2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--md-title);
}

html[data-design='modern'] .admin-panel > .hint {
  margin-bottom: 20px;
}

html[data-design='modern'] .admin-section {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 18px;
  padding: 22px 24px 20px;
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: 14px;
  box-shadow: var(--md-card-shadow);
}

html[data-design='modern'] .admin-section-title {
  font-family: var(--rn-font-body);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--md-title);
}

html[data-design='modern'] .admin-section-desc {
  font-size: 0.88rem;
}

html[data-design='modern'] .admin-section h3:not(.admin-section-title) {
  font-family: var(--rn-font-body);
  color: var(--md-title);
}

/* ── 메인(행사 목록) ── */
html[data-design='modern'] .home-page.home-renewal {
  background: var(--md-bg);
  padding-bottom: 56px;
}

html[data-design='modern'] .home-page.home-renewal.has-bg .home-page-bg {
  opacity: 0.08;
}

html[data-design='modern'] .home-page.home-renewal .home-page-scrim {
  background: linear-gradient(180deg, rgba(243, 245, 249, 0.82), rgba(243, 245, 249, 0.96));
}

/* 상단 바: 컨테이너 밖까지 흰 배경 */
html[data-design='modern'] .rn-topbar {
  align-items: center;
  padding: 12px 0;
  background: #fff;
  border-bottom: 1px solid var(--md-line);
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
}

html[data-design='modern'] .rn-logo .brand-logo {
  background: var(--md-side-bg);
}

html[data-design='modern'] .rn-logo .brand-name {
  color: var(--md-title);
  font-size: 1.02rem;
}

html[data-design='modern'] .rn-nav-admin {
  padding: 8px 14px;
  border: 1px solid var(--md-line);
  border-radius: 8px;
  background: #fff;
  color: var(--md-title);
  box-shadow: none;
}

html[data-design='modern'] .rn-event-stack {
  gap: 28px;
  margin-top: 28px;
}

html[data-design='modern'] .rn-event-shell {
  --md-tone: var(--rn-accent);
  --md-tone-soft: color-mix(in srgb, var(--md-tone) 10%, #fff);
  padding: 28px;
  background: #fff;
  border: 1px solid var(--md-line);
  border-top: 4px solid var(--md-tone);
  border-radius: 16px;
  box-shadow: var(--md-card-shadow);
}

html[data-design='modern'] .rn-event-shell.tone-pink { --md-tone: #db2777; }
html[data-design='modern'] .rn-event-shell.tone-mint { --md-tone: #0d9488; }
html[data-design='modern'] .rn-event-shell.tone-sky { --md-tone: #2563eb; }
html[data-design='modern'] .rn-event-shell.tone-lavender { --md-tone: #7c3aed; }

html[data-design='modern'] .rn-event-shell.tone-pink,
html[data-design='modern'] .rn-event-shell.tone-mint,
html[data-design='modern'] .rn-event-shell.tone-sky,
html[data-design='modern'] .rn-event-shell.tone-lavender {
  background: #fff;
  border-color: var(--md-line);
  border-top-color: var(--md-tone);
}

html[data-design='modern'] .rn-event-glow {
  display: none;
}

html[data-design='modern'] .rn-event-shell[class*='tone-'] .rn-event-badge {
  border: 0;
  border-radius: 6px;
  background: var(--md-tone-soft);
  color: var(--md-tone);
  font-size: 0.8rem;
}

html[data-design='modern'] .rn-hero-copy h1 {
  margin-bottom: 14px;
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--md-title);
}

html[data-design='modern'] .rn-invite {
  margin-bottom: 22px;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 600;
  color: var(--rn-muted);
  text-align: left;
}

html[data-design='modern'] .rn-period div {
  padding: 12px 0;
  border-top-color: var(--md-line);
}

html[data-design='modern'] .rn-period small {
  font-size: 1rem;
  font-weight: 600;
}

html[data-design='modern'] .rn-period strong {
  font-size: 1.05rem;
  color: var(--md-title);
}

html[data-design='modern'] .rn-summary {
  padding: 22px;
  background: #f8fafc;
  border: 1px solid var(--md-line);
  border-radius: 14px;
  box-shadow: none;
}

html[data-design='modern'] .rn-event-shell[class*='tone-'] .rn-summary-kicker {
  color: var(--md-tone);
}

html[data-design='modern'] .rn-summary-top h2 {
  font-family: var(--rn-font-body);
  font-size: clamp(1.35rem, 2.2vw, 1.6rem);
  font-weight: 800;
  color: var(--md-title);
}

html[data-design='modern'] .rn-dday {
  font-family: var(--rn-font-body);
  font-size: 0.95rem;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--md-tone, var(--rn-accent));
  color: #fff;
}

html[data-design='modern'] .rn-quick {
  min-height: 4.6rem;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: 12px;
}

html[data-design='modern'] .rn-quick:hover {
  border-color: color-mix(in srgb, var(--md-tone) 45%, transparent);
}

html[data-design='modern'] .rn-quick-icon {
  border-radius: 10px;
  background: var(--md-tone-soft);
  color: var(--md-tone);
}

html[data-design='modern'] .rn-event-shell[class*='tone-'] .rn-quick.is-primary {
  background: var(--md-tone);
  border-color: transparent;
  color: #fff;
}

html[data-design='modern'] .rn-event-shell[class*='tone-'] .rn-quick.is-primary .rn-quick-icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

html[data-design='modern'] .rn-quick b {
  font-size: clamp(1.1rem, 2vw, 1.28rem);
}

html[data-design='modern'] .rn-footer {
  margin-top: 56px;
  border-top-color: var(--md-line);
}

/* ── 신청·수정 화면 ── */
.roster-only-hint {
  display: none;
}

html[data-design='modern'] .roster-only-hint {
  display: block;
}

html[data-design='modern'] .grid-only-hint {
  display: none;
}

html[data-design='modern'] body:not(.admin-mode) {
  background: var(--md-bg);
}

html[data-design='modern'] .panel.ui-public-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

html[data-design='modern'] .ui-public-panel > .panel-header {
  margin: 0;
  padding: 18px 22px;
  background: #fff;
  border: 3px solid var(--md-box-line);
  border-radius: 14px;
  box-shadow: var(--md-card-shadow);
}

html[data-design='modern'] .ui-public-panel .panel-header h2 {
  font-family: var(--rn-font-body);
  font-weight: 800;
  color: var(--md-title);
}

html[data-design='modern'] .ui-public-panel .meta-form-box,
html[data-design='modern'] .ui-public-panel .fee-bundle,
html[data-design='modern'] .ui-public-panel .grid-shell,
html[data-design='modern'] .ui-public-panel .verify-box,
html[data-design='modern'] .ui-public-panel .fee-log-panel {
  margin: 0;
  padding: 20px 22px;
  background: #fff;
  border: 3px solid var(--md-box-line);
  border-radius: 14px;
  box-shadow: var(--md-card-shadow);
}

html[data-design='modern'] .ui-public-panel .grid-shell.is-fullscreen {
  border-radius: 0;
}

.edit-church-box .edit-church-head {
  margin-bottom: 14px;
}

.edit-church-box .edit-church-head h3 {
  margin: 0 0 4px;
  font-family: var(--rn-font-body, inherit);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--md-title, inherit);
}

.edit-church-box .edit-church-head .hint {
  margin: 0;
}

.edit-church-box .meta-grid {
  margin-bottom: 0;
}

html[data-design='modern'] #edit-area:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.grid-shell > .roster-form {
  min-width: 0;
  max-width: 100%;
}

html[data-design='modern'] .ui-public-panel .toolbar h3 {
  font-family: var(--rn-font-body);
  font-weight: 800;
  color: var(--md-title);
}

html[data-design='modern'] .ui-public-panel .btn-primary {
  background: var(--rn-accent);
  border-radius: 10px;
}

html[data-design='modern'] .ui-public-panel .toolbar-actions > .btn-secondary {
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #d0d7e2;
  border-radius: 8px;
  color: var(--md-title);
}

html[data-design='modern'] .ui-public-panel .toolbar-actions > .btn-secondary:hover {
  border-color: var(--rn-accent);
  color: var(--rn-accent-2);
}

html[data-design='modern'] .ui-public-panel .toolbar-actions > [data-action='add-row'] {
  background: var(--rn-accent);
  border-color: var(--rn-accent);
  color: var(--rn-on-accent);
}

/* 명단: 한 사람 한 줄 */
.roster-form {
  --rf-line: #e2e7ef;
  font-size: 14px;
  background: #fff;
  border: 1px solid var(--rf-line);
  border-radius: 12px;
  overflow: hidden;
}

.rf-scroll {
  overflow-x: auto;
}

.rf-table {
  min-width: var(--rf-min, 0);
}

.rf-head,
.rf-row {
  display: grid;
  grid-template-columns: var(--rf-cols);
  column-gap: 0.5em;
  align-items: center;
  padding: 0.45em 0.75em;
}

.rf-head {
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  background: #f8fafc;
  border-bottom: 1px solid var(--rf-line);
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}

.rf-hcell {
  font-size: 0.88em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.rf-hcell.rf-no {
  overflow: visible;
}

.rf-hcell em,
.rf-label em {
  margin-left: 2px;
  font-style: normal;
  color: #dc2626;
}

.rf-row {
  background: var(--ag-background-color, #fff);
  border-bottom: 1px solid var(--rf-line);
}

.rf-row:nth-child(even) {
  background: var(--ag-odd-row-background-color, #f8fafc);
}

.rf-row:last-child {
  border-bottom: 0;
}

.rf-row.is-selected {
  background: color-mix(in srgb, var(--rn-accent, #2563eb) 10%, #fff);
}

.rf-no {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 700;
  color: #475569;
}

.roster-form .rf-no input[type='checkbox'] {
  width: 1.05em;
  height: 1.05em;
  margin: 0;
  accent-color: var(--rn-accent, #2563eb);
}

.rf-cell {
  min-width: 0;
}

.rf-label {
  display: none;
}

.roster-form .rf-cell input,
.roster-form .rf-cell select {
  width: 100%;
  min-width: 0;
  height: 2.5em;
  box-sizing: border-box;
  padding: 0 0.7em;
  font: inherit;
  font-size: 1em;
  color: #0f172a;
  background: #fff;
  border: 1px solid #c5ccd8;
  border-radius: 8px;
}

.roster-form .rf-cell input:focus,
.roster-form .rf-cell select:focus {
  border-color: var(--rn-accent, #2563eb);
  outline: 2px solid color-mix(in srgb, var(--rn-accent, #2563eb) 28%, transparent);
  outline-offset: 0;
}

.roster-form .rf-scroll {
  position: relative;
}

.roster-form .rf-fill-handle {
  z-index: 8;
}

.roster-form .rf-cell select {
  padding-right: 1.6em;
}

.roster-form .rf-cell.is-locked input,
.roster-form .rf-cell.is-locked select {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

.rf-auto {
  display: inline-block;
  max-width: 100%;
  padding: 0.3em 0.6em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 6px;
  background: #f1f5f9;
  color: #94a3b8;
  font-size: 0.88em;
}

.rf-auto.is-filled {
  color: #334155;
}

.rf-del-btn {
  width: 2em;
  height: 2em;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  font-size: 1.2em;
  line-height: 1;
  cursor: pointer;
}

.rf-del-btn:hover,
.rf-del-btn:focus-visible {
  background: #fee2e2;
  color: #dc2626;
}

.grid-shell.is-fullscreen .roster-form {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

@media (max-width: 720px) {
  .roster-form {
    background: #f8fafc;
  }

  .rf-head {
    display: none;
  }

  .rf-table {
    min-width: 0;
  }

  .rf-row {
    position: relative;
    grid-template-columns: 1fr 1fr;
    gap: 0.6em;
    margin: 0.6em;
    padding: 0.8em;
    border: 1px solid var(--rf-line);
    border-radius: 12px;
  }

  .rf-row:last-child {
    border-bottom: 1px solid var(--rf-line);
  }

  .rf-no,
  .rf-cell-name {
    grid-column: 1 / -1;
  }

  .rf-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
  }

  .rf-label {
    display: block;
    font-size: 0.8em;
    font-weight: 600;
    color: #64748b;
  }

  .rf-del-btn {
    position: absolute;
    top: 0.45em;
    right: 0.45em;
  }
}

@media (max-width: 900px) {
  html[data-design='modern'] .rn-event-shell {
    padding: 18px 16px 20px;
    border-radius: 14px;
  }

  html[data-design='modern'] body.admin-mode .app-shell:has(.admin-tabs) {
    padding-left: 0;
  }

  html[data-design='modern'] .admin-tabs {
    position: sticky;
    inset: auto;
    top: 0;
    width: auto;
    margin: 0 0 16px;
    padding: 8px;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  html[data-design='modern'] .admin-brand {
    display: none;
  }

  html[data-design='modern'] .admin-tab {
    width: auto;
    flex: none;
    gap: 8px;
    padding: 9px 12px;
    font-size: 0.88rem;
    white-space: nowrap;
  }

  html[data-design='modern'] .admin-tab-ico {
    width: 18px;
    height: 18px;
  }

  html[data-design='modern'] .admin-header {
    position: static;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  html[data-design='modern'] .admin-top-event {
    order: 3;
    flex-basis: 100%;
  }

  html[data-design='modern'] .admin-section {
    padding: 16px 14px;
  }
}

/* ── 신청·수정: 안내 8칸 카드 · 고정 제출바 · 수량 스테퍼 ── */
html[data-design='modern'] .notice-box.notice-rich,
html[data-design='modern'] .notice-preview-live .notice-box {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

html[data-design='modern'] .notice-cols {
  max-width: none;
  width: 100%;
  gap: 12px;
}

html[data-design='modern'] .notice-cols-1,
html[data-design='modern'] .notice-cols-2,
html[data-design='modern'] .notice-cols-3,
html[data-design='modern'] .notice-cols-4,
html[data-design='modern'] .notice-cols-5,
html[data-design='modern'] .notice-cols-6,
html[data-design='modern'] .notice-cols-7,
html[data-design='modern'] .notice-cols-8,
html[data-design='modern'] .notice-cols-9,
html[data-design='modern'] .notice-cols-10,
html[data-design='modern'] .notice-cols-11,
html[data-design='modern'] .notice-cols-12 {
  max-width: none;
}

html[data-design='modern'] .notice-col {
  margin: 0;
  padding: 16px 18px;
  background: #fff;
  border: 3px solid var(--md-box-line);
  border-radius: 14px;
  box-shadow: var(--md-card-shadow);
  min-height: 100%;
  box-sizing: border-box;
}

/* 공개 안내 카드의 자동 아이콘·제목만 숨김 (관리자 편집 헤더는 유지) */
html[data-design='modern'] .notice-col > .notice-col-head,
html[data-design='modern'] .notice-preview-live .notice-col > .notice-col-head {
  display: none !important;
}

html[data-design='modern'] .notice-col .notice-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #334155;
}

html[data-design='modern'] .notice-preview-live {
  padding: 14px;
  background: var(--md-bg, #f3f5f9);
  border: 1px solid var(--md-line, #e2e7ef);
  border-radius: 14px;
  box-sizing: border-box;
}

html[data-design='modern'] .ui-public-panel .notice-slot:not([hidden]) {
  margin: 0;
}

/* 신청·저장 바: 명단 바로 아래 문서 흐름. 화면을 내려야 보임 */
html[data-design='modern'] .form-actions-sticky {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 16px;
  width: 100%;
  max-width: none;
  background: #fff;
  border: 3px solid var(--md-box-line);
  border-radius: 14px;
  box-shadow: var(--md-card-shadow);
  box-sizing: border-box;
}

html[data-design='modern'] .form-actions-drag-handle {
  display: none !important;
}

html[data-design='modern'] .form-actions-sticky .btn-primary {
  width: 100%;
  min-height: 48px;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 12px;
}

html[data-design='modern'] .form-actions-sticky .apply-status-inline {
  margin: 0;
  text-align: center;
}

html[data-design='modern'] .fee-package-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

html[data-design='modern'] .fee-pkg-step {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #d0d7e2;
  border-radius: 8px;
  background: #fff;
  color: var(--md-title);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

html[data-design='modern'] .fee-pkg-step:hover {
  border-color: var(--rn-accent);
  color: var(--rn-accent);
}

html[data-design='modern'] .fee-package-stepper input[type='number'] {
  width: 3.2em;
  text-align: center;
}

html[data-design='modern'] .ui-public-panel .panel-header .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rn-accent) 14%, #fff);
  color: var(--rn-accent-2);
  font-weight: 700;
  font-size: 0.78rem;
}

html[data-design='modern'] .fee-settle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

html[data-design='modern'] .fee-settle-card {
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid var(--md-line);
  border-radius: 12px;
}

/* classic/renewal: 스테퍼 버튼은 숨기고 숫자 입력만 */
html:not([data-design='modern']) .fee-pkg-step {
  display: none;
}

/* 입력·선택 칸: 얇은 테두리 (굵은선은 섹션 박스에) */
html[data-design='modern'] .meta-grid .field input,
html[data-design='modern'] .meta-grid .field select,
html[data-design='modern'] .verify-box .field input,
html[data-design='modern'] .verify-box .field select,
html[data-design='modern'] .edit-church-box .field input,
html[data-design='modern'] .edit-church-box .field select,
html[data-design='modern'] .headcount-field input,
html[data-design='modern'] .fee-package-qty input,
html[data-design='modern'] .fee-package-stepper input,
html[data-design='modern'] .ui-public-panel input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']),
html[data-design='modern'] .ui-public-panel select {
  border: 1px solid #c5ccd8;
  border-radius: 10px;
}

html[data-design='modern'] .meta-grid .field input:focus,
html[data-design='modern'] .meta-grid .field select:focus,
html[data-design='modern'] .verify-box .field input:focus,
html[data-design='modern'] .verify-box .field select:focus,
html[data-design='modern'] .edit-church-box .field input:focus,
html[data-design='modern'] .edit-church-box .field select:focus,
html[data-design='modern'] .ui-public-panel input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']):focus,
html[data-design='modern'] .ui-public-panel select:focus {
  border-color: var(--rn-accent);
  outline: 2px solid color-mix(in srgb, var(--rn-accent) 28%, transparent);
  outline-offset: 0;
}

/* 상단 입력: 4칸 고정 → 교회주소가 연락처 끝선과 맞춤 */
html[data-design='modern'] .ui-public-panel .meta-grid,
html[data-design='modern'] .edit-church-box .meta-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 16px;
}

html[data-design='modern'] .ui-public-panel .meta-grid .field.full,
html[data-design='modern'] .edit-church-box .meta-grid .field.full {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  html[data-design='modern'] .ui-public-panel .meta-grid,
  html[data-design='modern'] .edit-church-box .meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  html[data-design='modern'] .ui-public-panel .meta-grid,
  html[data-design='modern'] .edit-church-box .meta-grid {
    grid-template-columns: 1fr;
  }
}

/* 안내 카드: 아이콘 제목 + 일정 썸네일 */
html[data-design='modern'] .notice-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

html[data-design='modern'] .notice-col-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--rn-accent) 12%, #fff);
  font-size: 1rem;
  flex: none;
}

html[data-design='modern'] .notice-col-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--md-title);
  letter-spacing: -0.02em;
}

html[data-design='modern'] .notice-col--has-schedule .notice-figure--schedule {
  margin-top: 10px;
  max-width: 132px;
  padding: 6px;
  background: #f8fafc;
  border: 1px solid var(--md-line);
  border-radius: 12px;
  cursor: zoom-in;
}

html[data-design='modern'] .notice-col--has-schedule .notice-figure--schedule img {
  max-height: 96px;
  border-radius: 8px;
}

/*
  등록비 레이아웃:
  [ 숙소 수량 ] [ 외부숙소 ]
  [ 합계      ] [ 입금 | 환불 | 납부 ]
*/
html[data-design='modern'] .ui-public-panel .fee-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

html[data-design='modern'] .ui-public-panel .fee-layout-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px 16px;
  align-items: stretch;
}

html[data-design='modern'] .ui-public-panel .fee-layout-pkg {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

html[data-design='modern'] .ui-public-panel .fee-layout-pkg .fee-paid-section,
html[data-design='modern'] .ui-public-panel .fee-layout-pkg .fee-main-card {
  flex: 1 1 auto;
  min-height: 0;
}

/* 등록비 옆 안내 + 관리자 미리보기 공통 (신청 화면과 동일 비율) */
html[data-design='modern'] .fee-layout--admin-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 1120px;
}

html[data-design='modern'] .fee-layout--admin-preview .fee-layout-top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px 16px;
  align-items: start;
}

html[data-design='modern'] .fee-preview-standin-box {
  margin: 0;
  padding: 16px 18px;
  min-height: 120px;
  background: #f8fafc;
  border: 1px dashed #94a3b8;
  border-radius: 14px;
  box-sizing: border-box;
  color: #64748b;
}

html[data-design='modern'] .fee-preview-standin-box strong {
  display: block;
  margin-bottom: 6px;
  color: var(--md-title);
  font-weight: 800;
}

html[data-design='modern'] .fee-unit-preview:not(.notice-preview-empty) {
  padding: 12px;
  background: var(--md-bg, #f3f5f9);
  border: 1px solid var(--md-line);
  border-radius: 14px;
  box-sizing: border-box;
}

html[data-design='modern'] .ui-public-panel .fee-unit-aside:not([hidden]),
html[data-design='modern'] .fee-layout--admin-preview .fee-unit-aside,
html[data-design='modern'] .fee-unit-aside--preview {
  width: 100%;
  min-width: 16rem;
  max-width: 100%;
  align-self: start;
  justify-self: stretch;
  margin: 0;
  padding: 16px 18px;
  background: #fff;
  border: 3px solid var(--md-box-line);
  border-radius: 14px;
  box-shadow: var(--md-card-shadow);
  box-sizing: border-box;
}

html[data-design='modern'] .ui-public-panel .fee-unit-aside .notice-cols,
html[data-design='modern'] .fee-layout--admin-preview .fee-unit-aside .notice-cols {
  display: block;
  width: 100%;
  max-width: none;
  gap: 0;
}

html[data-design='modern'] .ui-public-panel .fee-unit-aside .notice-col,
html[data-design='modern'] .ui-public-panel .fee-unit-aside .notice-box,
html[data-design='modern'] .ui-public-panel .fee-unit-aside .fee-unit-hint-box,
html[data-design='modern'] .fee-layout--admin-preview .fee-unit-aside .notice-col,
html[data-design='modern'] .fee-layout--admin-preview .fee-unit-aside .notice-box,
html[data-design='modern'] .fee-layout--admin-preview .fee-unit-aside .fee-unit-hint-box {
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  min-height: 0;
}

html[data-design='modern'] .ui-public-panel .fee-unit-aside .notice-text,
html[data-design='modern'] .fee-layout--admin-preview .fee-unit-aside .notice-text,
html[data-design='modern'] .fee-unit-aside--preview .notice-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #334155;
  width: 100%;
  word-break: keep-all;
  overflow-wrap: normal;
  white-space: normal;
}

@media (max-width: 900px) {
  html[data-design='modern'] .fee-layout--admin-preview .fee-layout-top {
    grid-template-columns: 1fr;
  }
}

html[data-design='modern'] .ui-public-panel .fee-layout-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px 16px;
  align-items: stretch;
}

html[data-design='modern'] .ui-public-panel .fee-layout-bottom .fee-total-block {
  margin: 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--md-line);
  border-radius: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

html[data-design='modern'] .fee-settle-panel.fee-settle-inline {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}

html[data-design='modern'] .fee-settle-title-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html[data-design='modern'] .fee-settle-inline .fee-settle-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  height: 100%;
}

html[data-design='modern'] .fee-settle-inline .fee-settle-summary .fee-settle-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 12px 12px;
  min-height: 0;
  background: #f8fafc;
  border: 1px solid var(--md-line);
  border-radius: 12px;
  box-shadow: none;
}

html[data-design='modern'] .fee-settle-summary .fee-settle-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
}

html[data-design='modern'] .fee-settle-summary strong,
html[data-design='modern'] #apply-refund-deadline-date,
html[data-design='modern'] #edit-refund-deadline-date {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--md-title);
  letter-spacing: -0.02em;
}

html[data-design='modern'] .fee-settle-card--pay strong {
  color: var(--rn-accent-2);
}

html[data-design='modern'] .fee-settle-card--status .deposit-status-banner {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.9rem;
  color: inherit;
}

html[data-design='modern'] .fee-settle-card--status .deposit-status-banner strong {
  display: inline;
  font-size: 1.05rem;
  color: var(--rn-accent-2);
}

html[data-design='modern'] .fee-settle-panel > #apply-deposit-requests,
html[data-design='modern'] .fee-settle-panel > #edit-deposit-requests,
html[data-design='modern'] .fee-settle-panel > .fee-settle-grid {
  display: none !important;
}

html[data-design='modern'] .ui-public-panel .grid-shell {
  width: 100%;
  max-width: none;
}

html[data-design='modern'] .ui-public-panel > .panel-header,
html[data-design='modern'] .ui-public-panel .meta-form-box,
html[data-design='modern'] .ui-public-panel .fee-bundle,
html[data-design='modern'] .ui-public-panel .notice-slot,
html[data-design='modern'] .ui-public-panel .fee-log-panel,
html[data-design='modern'] .ui-public-panel .verify-box,
html[data-design='modern'] .ui-public-panel .edit-church-box,
html[data-design='modern'] #edit-area > .meta-form-box,
html[data-design='modern'] #edit-area > .fee-bundle,
html[data-design='modern'] #edit-area > .fee-log-panel,
html[data-design='modern'] #edit-area > .notice-slot {
  width: min(100%, 1120px);
  max-width: 1120px;
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

html[data-design='modern'] .ui-public-panel .grid-shell,
html[data-design='modern'] .ui-public-panel .form-actions-sticky {
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

/* 단체 수정 입장: 제목·본인확인·안내문을 같은 가운데 열로 */
html[data-design='modern'] .ui-public-panel > .edit-gate {
  width: min(100%, 1120px);
  max-width: 1120px;
  justify-self: center;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

html[data-design='modern'] .edit-gate .verify-box,
html[data-design='modern'] .edit-gate .notice-slot,
html[data-design='modern'] .edit-gate .notice-slot:not([hidden]) {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  justify-self: stretch;
}

@media (max-width: 900px) {
  html[data-design='modern'] .ui-public-panel .fee-layout-top,
  html[data-design='modern'] .ui-public-panel .fee-layout-bottom {
    grid-template-columns: 1fr;
  }

  html[data-design='modern'] .fee-settle-inline .fee-settle-summary {
    grid-template-columns: 1fr;
  }
}