:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --line: #e7e9ee;
  --text: #15171c;
  --muted: #777d89;
  --soft: #f7f8fa;
  --accent: #16181d;
  --accent-2: #f0c36a;
  --radius: 16px;
  --shadow: 0 18px 50px rgba(16, 24, 40, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

button, input, textarea { font: inherit; }

button { cursor: pointer; }

.studio-shell {
  min-height: 100vh;
  overflow: hidden;
}

.topbar {
  height: 68px;
  display: grid;
  grid-template-columns: 240px 1fr auto;
  align-items: center;
  padding: 0 18px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 10;
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #16181d;
  color: white;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.brand-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
}

.brand-sub {
  color: var(--muted);
  font-size: 11px;
  margin-top: 1px;
}

.topbar-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.project-switcher {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 11px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #33b46e;
}

.chevron { color: var(--muted); }

.save-status {
  color: var(--muted);
  font-size: 12px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn {
  border: 0;
  border-radius: 10px;
  padding: 10px 15px;
  font-weight: 700;
}

.btn-ghost {
  background: #f3f4f6;
  color: #4c515c;
}

.btn-dark {
  background: #17191e;
  color: white;
}

.btn-outline {
  border: 1px solid var(--line);
  background: white;
  color: var(--text);
}

.btn-small {
  padding: 8px 11px;
  font-size: 12px;
}

.workspace {
  height: calc(100vh - 68px);
  display: grid;
  grid-template-columns: 220px minmax(390px, 480px) 1fr;
}

.sidebar {
  background: #111318;
  color: #f6f7f8;
  padding: 22px 13px 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sidebar-label {
  padding: 0 12px 8px;
  color: #737984;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.sidebar-label.small { margin-top: 3px; }

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: #a9adb6;
  border-radius: 10px;
  padding: 10px 11px;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 7px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
}

.nav-item:hover { background: #1b1e24; color: #fff; }

.nav-item.active {
  background: #24272e;
  color: #fff;
  box-shadow: inset 3px 0 0 #f2c66b;
}

.nav-icon {
  color: #8e949f;
  text-align: center;
}

.nav-item.active .nav-icon { color: #f4ca78; }

.nav-badge {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #343842;
  color: #dfe2e7;
  font-size: 10px;
  text-align: center;
}

.nav-badge.muted { opacity: .45; }

.sidebar-divider {
  height: 1px;
  background: #262930;
  margin: 12px 8px;
}

.sidebar-bottom {
  margin-top: auto;
}

.ai-card {
  width: 100%;
  border: 1px solid #31343c;
  background: linear-gradient(145deg, #1a1d23, #14161a);
  color: white;
  border-radius: 13px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.ai-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #f1c36c;
  color: #16181d;
  font-weight: 800;
}

.ai-card strong, .ai-card small {
  display: block;
}

.ai-card strong { font-size: 12px; }

.ai-card small {
  margin-top: 3px;
  color: #7f8590;
  font-size: 10px;
}

.editor-column {
  background: white;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: width .2s ease, opacity .2s ease;
}

.editor-header {
  min-height: 110px;
  border-bottom: 1px solid var(--line);
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.eyebrow {
  color: #a4a9b3;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 800;
}

.editor-header h1 {
  margin: 6px 0 4px;
  font-size: 24px;
}

.editor-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.icon-button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 9px;
  color: #666c77;
}

.editor-scroll {
  overflow: auto;
  padding: 24px;
}

.editor-panel { display: none; }
.editor-panel.active { display: block; }

.field-group {
  margin-bottom: 19px;
}

.field-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
}

.field-group input,
.field-group textarea {
  width: 100%;
  border: 1px solid #dfe2e7;
  background: #fff;
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--text);
  outline: none;
  transition: border .15s ease, box-shadow .15s ease;
}

.field-group textarea {
  resize: vertical;
  line-height: 1.55;
}

.field-group input:focus,
.field-group textarea:focus {
  border-color: #aeb4bf;
  box-shadow: 0 0 0 3px rgba(22, 24, 29, 0.06);
}

.field-group small {
  display: block;
  color: #9a9fa9;
  font-size: 11px;
  margin-top: 7px;
  line-height: 1.45;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.slug-input {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  border: 1px solid #dfe2e7;
  border-radius: 10px;
  overflow: hidden;
}

.slug-input span {
  padding: 11px 0 11px 12px;
  color: #9398a2;
  background: #fafbfc;
}

.slug-input input {
  border: 0;
  border-radius: 0;
  padding-left: 4px;
}

.section-heading {
  margin-bottom: 18px;
}

.section-heading.split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.section-heading h2 {
  margin: 0 0 5px;
  font-size: 16px;
}

.section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.theme-grid {
  display: grid;
  gap: 12px;
}

.theme-card {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: white;
  padding: 10px;
  text-align: left;
}

.theme-card.selected {
  border-color: #17191e;
  box-shadow: 0 0 0 2px rgba(23, 25, 30, 0.08);
}

.theme-card.disabled { opacity: .55; cursor: default; }

.theme-preview {
  height: 74px;
  border-radius: 9px;
  display: block;
  margin-bottom: 9px;
}

.theme-preview.premium { background: linear-gradient(135deg, #10131a 0 65%, #d9ae58 65%); }
.theme-preview.midnight { background: linear-gradient(135deg, #101a32, #2c4d75); }
.theme-preview.medical { background: linear-gradient(135deg, #eff9f7, #6bb8aa); }

.theme-card strong, .theme-card small { display: block; }
.theme-card strong { font-size: 12px; }
.theme-card small { margin-top: 3px; color: var(--muted); font-size: 10px; }

.repeater-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.repeater-card {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fafbfc;
  padding: 14px;
}

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

.repeater-index {
  font-size: 11px;
  color: #8a909b;
  font-weight: 800;
}

.remove-button {
  border: 0;
  background: transparent;
  color: #a3a8b1;
  font-size: 16px;
}

.empty-state {
  min-height: 310px;
  border: 1px dashed #d9dce2;
  background: #fafbfc;
  border-radius: 16px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  color: #969ca6;
}

.empty-state span {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: white;
  border: 1px solid var(--line);
  color: #5e646f;
}

.empty-state h3 { margin: 12px 0 4px; color: #464b55; font-size: 15px; }
.empty-state p { margin: 0; font-size: 12px; }

.preview-column {
  min-width: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.9), rgba(255,255,255,0) 35%),
    #eef0f3;
  display: flex;
  flex-direction: column;
}

.preview-toolbar {
  height: 54px;
  border-bottom: 1px solid #dde0e5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
}

.device-tabs {
  display: flex;
  background: #e5e8ec;
  border-radius: 9px;
  padding: 3px;
}

.device-tab {
  border: 0;
  background: transparent;
  color: #7f8590;
  border-radius: 7px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 700;
}

.device-tab.active {
  background: white;
  color: #262a31;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.preview-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8a909a;
  font-size: 11px;
}

.preview-stage {
  flex: 1;
  overflow: auto;
  padding: 28px;
  display: grid;
  place-items: start center;
}

.phone-frame {
  width: 390px;
  height: min(844px, calc(100vh - 178px));
  min-height: 620px;
  background: white;
  border: 10px solid #15171b;
  border-radius: 37px;
  box-shadow: 0 30px 70px rgba(24, 30, 42, 0.18);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: width .25s ease, height .25s ease, border-radius .25s ease;
}

.phone-frame.desktop {
  width: min(920px, calc(100vw - 770px));
  min-width: 640px;
  height: min(760px, calc(100vh - 178px));
  min-height: 580px;
  border-width: 8px;
  border-radius: 20px;
}

.phone-top {
  height: 29px;
  flex: 0 0 29px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  font-size: 9px;
  font-weight: 700;
  position: relative;
  z-index: 3;
}

.phone-frame.desktop .phone-top,
.phone-frame.desktop .phone-home { display: none; }

.landing-preview {
  flex: 1 1 auto;
  min-height: 0;
  background: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #aeb3bc transparent;
}

.landing-preview::-webkit-scrollbar {
  width: 7px;
}

.landing-preview::-webkit-scrollbar-track {
  background: transparent;
}

.landing-preview::-webkit-scrollbar-thumb {
  background: #aeb3bc;
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.landing-preview::-webkit-scrollbar-thumb:hover {
  background: #858b95;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.preview-hero {
  min-height: 520px;
  position: relative;
  color: white;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,12,16,.28), rgba(10,12,16,.88));
}

.preview-brand {
  position: relative;
  z-index: 1;
  padding: 22px 24px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.preview-hero-content {
  position: absolute;
  z-index: 1;
  left: 24px;
  right: 24px;
  bottom: 38px;
}

.preview-badge {
  display: inline-block;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.13);
  border-radius: 999px;
  padding: 6px 9px;
  margin-bottom: 18px;
  font-size: 9px;
  backdrop-filter: blur(8px);
}

.preview-eyebrow {
  margin: 0 0 9px;
  color: #e4bd6f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.preview-hero h2 {
  margin: 0;
  font-size: 31px;
  line-height: 1.23;
  letter-spacing: -.04em;
}

.preview-hero-content > p:not(.preview-eyebrow) {
  margin: 14px 0 21px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.65;
}

.preview-hero button,
.preview-footer-cta button {
  border: 0;
  border-radius: 10px;
  padding: 12px 18px;
  background: #f1c56f;
  color: #17191d;
  font-weight: 800;
  font-size: 11px;
}

.preview-section {
  padding: 48px 23px;
}

.section-kicker {
  margin: 0 0 7px;
  color: #b58b3b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

.preview-section h3 {
  margin: 0 0 22px;
  font-size: 22px;
  letter-spacing: -.03em;
}

.benefit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.phone-frame.desktop .benefit-grid {
  grid-template-columns: repeat(3, 1fr);
}

.benefit-card {
  background: #f7f7f7;
  border-radius: 13px;
  padding: 17px;
}

.benefit-card span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #17191d;
  color: #f2c56e;
  font-size: 12px;
  margin-bottom: 13px;
}

.benefit-card strong {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
}

.benefit-card p {
  margin: 0;
  color: #838893;
  font-size: 10px;
  line-height: 1.55;
}

.faq-section { background: #fafafa; }

.faq-item {
  border-bottom: 1px solid #e4e5e7;
  padding: 13px 0;
}

.faq-item strong {
  display: block;
  font-size: 12px;
}

.faq-item p {
  margin: 8px 0 0;
  color: #858a94;
  font-size: 10px;
  line-height: 1.55;
}

.preview-footer-cta {
  padding: 44px 24px 58px;
  background: #15171c;
  color: white;
}

.preview-footer-cta p {
  margin: 0 0 7px;
  color: #8f959f;
  font-size: 10px;
}

.preview-footer-cta h3 {
  margin: 0 0 18px;
  font-size: 21px;
}

.phone-home {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 110px;
  height: 4px;
  border-radius: 999px;
  background: #17191d;
  opacity: .9;
  z-index: 4;
  pointer-events: none;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: #17191e;
  color: white;
  border-radius: 10px;
  padding: 11px 15px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: all .2s ease;
  z-index: 50;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

body.editor-collapsed .workspace {
  grid-template-columns: 220px 0 1fr;
}

body.editor-collapsed .editor-column {
  opacity: 0;
  overflow: hidden;
  border-right: 0;
}

@media (max-width: 1120px) {
  .workspace {
    grid-template-columns: 190px 390px 1fr;
  }
  .save-status { display: none; }
}

@media (max-width: 850px) {
  .topbar {
    grid-template-columns: 1fr auto;
  }
  .topbar-center { display: none; }
  .workspace {
    grid-template-columns: 72px minmax(330px, 1fr);
  }
  .sidebar { padding-left: 8px; padding-right: 8px; }
  .sidebar-label, .nav-item span:not(.nav-icon), .sidebar-bottom { display: none; }
  .nav-item {
    grid-template-columns: 1fr;
    place-items: center;
    padding: 11px;
  }
  .preview-column { display: none; }
}

/* =========================================================
   JOINUP Studio Sprint 2.3
   Preview ↔ Editor section interaction styles
   ========================================================= */

[data-preview-section] {
  position: relative;
  cursor: pointer;
  transition:
    box-shadow .18s ease,
    outline-color .18s ease,
    filter .18s ease;
  outline: 2px solid transparent;
  outline-offset: -2px;
}

[data-preview-section]::after {
  content: attr(data-section-label);
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  padding: 5px 8px;
  border-radius: 999px;
  background: #f1c56f;
  color: #17191d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .16);
}

[data-preview-section]:hover {
  outline-color: #f1c56f;
  box-shadow: inset 0 0 0 2px rgba(241, 197, 111, .2);
}

[data-preview-section]:hover::after {
  opacity: 1;
  transform: translateY(0);
}

[data-preview-section].preview-section-selected {
  outline-color: #f1c56f;
  box-shadow:
    inset 0 0 0 2px rgba(241, 197, 111, .28),
    0 0 0 3px rgba(241, 197, 111, .14);
}

[data-preview-section].preview-section-selected::after {
  opacity: 1;
  transform: translateY(0);
}

.preview-hero[data-preview-section]::after {
  top: 38px;
}

.phone-frame.desktop [data-preview-section]::after {
  top: 14px;
  right: 14px;
  font-size: 10px;
}

.preview-click-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  color: #9298a2;
  font-size: 10px;
}

.preview-click-hint::before {
  content: "↖";
  color: #b58b3b;
  font-weight: 800;
}

@media (hover: none) {
  [data-preview-section]:hover {
    outline-color: transparent;
    box-shadow: none;
  }

  [data-preview-section]:hover::after {
    opacity: 0;
  }

  [data-preview-section].preview-section-selected {
    outline-color: #f1c56f;
    box-shadow:
      inset 0 0 0 2px rgba(241, 197, 111, .28),
      0 0 0 3px rgba(241, 197, 111, .14);
  }

  [data-preview-section].preview-section-selected::after {
    opacity: 1;
  }
}

/* =========================================================
   JOINUP Studio Sprint 2.4.1
   Editor Scroll + Collapse/Expand Recovery
   ========================================================= */

html,
body,
.studio-app {
  height: 100%;
  overflow: hidden;
}

.workspace {
  min-height: 0;
  overflow: hidden;
}

.sidebar,
.editor-column,
.preview-column {
  min-height: 0;
}

.editor-column {
  overflow: hidden;
}

.editor-header {
  flex: 0 0 auto;
}

.editor-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-bottom: 56px;
}

.editor-scroll::-webkit-scrollbar {
  width: 10px;
}

.editor-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.editor-scroll::-webkit-scrollbar-thumb {
  background: #d7dbe1;
  border: 3px solid #fff;
  border-radius: 999px;
}

.editor-scroll::-webkit-scrollbar-thumb:hover {
  background: #bfc4cc;
}

.preview-column {
  overflow: hidden;
}

.preview-canvas {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.editor-expand-button {
  position: fixed;
  top: 86px;
  left: 220px;
  z-index: 40;
  width: 34px;
  height: 42px;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: #fff;
  color: #4f5560;
  font-size: 24px;
  line-height: 1;
  display: none;
  place-items: center;
  box-shadow: 0 8px 24px rgba(20, 24, 32, .12);
}

.editor-expand-button:hover {
  background: #f6f7f9;
  color: #17191d;
}

body.editor-collapsed .editor-expand-button {
  display: grid;
}

body.editor-collapsed .workspace {
  grid-template-columns: 220px 0 minmax(0, 1fr);
}

body.editor-collapsed .editor-column {
  pointer-events: none;
}

@media (max-width: 1120px) {
  .editor-expand-button {
    left: 190px;
  }
}

@media (max-width: 850px) {
  .editor-expand-button {
    left: 72px;
  }
}

/* =========================================================
   JOINUP Studio Sprint 2.4.2
   Hero Layout Controls Restored
   ========================================================= */

.hero-layout-heading {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.option-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px;
  border: 1px solid #dfe2e7;
  border-radius: 11px;
  background: #f4f5f7;
}

.option-button {
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #777d89;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.option-button:hover {
  color: #30343b;
}

.option-button.active {
  background: #fff;
  color: #17191d;
  box-shadow: 0 2px 7px rgba(20, 24, 32, .09);
}

.range-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.range-label-row label {
  margin-bottom: 0;
}

.range-label-row span {
  min-width: 42px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #686e79;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.field-group input.range-input {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  accent-color: #17191d;
}

.preview-hero-content {
  top: auto;
  bottom: 38px;
  left: 24px;
  right: auto;
  width: calc(100% - 48px);
  max-width: calc(100% - 48px);
  transition: top .18s ease, bottom .18s ease, left .18s ease,
              right .18s ease, transform .18s ease, text-align .18s ease;
}

.preview-hero-content[data-horizontal="left"] {
  left: 24px;
  right: auto;
  transform: translateX(0);
}

.preview-hero-content[data-horizontal="center"] {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.preview-hero-content[data-horizontal="right"] {
  left: auto;
  right: 24px;
  transform: translateX(0);
}

.preview-hero-content[data-vertical="top"] {
  top: 76px;
  bottom: auto;
}

.preview-hero-content[data-vertical="center"] {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.preview-hero-content[data-horizontal="center"][data-vertical="center"] {
  transform: translate(-50%, -50%);
}

.preview-hero-content[data-vertical="bottom"] {
  top: auto;
  bottom: 38px;
}

.preview-hero-content[style*="text-align: center"] .preview-badge {
  margin-left: auto;
  margin-right: auto;
}

.preview-hero-content[style*="text-align: right"] .preview-badge {
  margin-left: auto;
}

.phone-frame.desktop .preview-hero-content {
  width: min(560px, calc(100% - 96px));
  max-width: min(560px, calc(100% - 96px));
}

.phone-frame.desktop .preview-hero-content[data-horizontal="left"] {
  left: 48px;
}

.phone-frame.desktop .preview-hero-content[data-horizontal="right"] {
  right: 48px;
}

.phone-frame.desktop .preview-hero-content[data-vertical="top"] {
  top: 94px;
}

.phone-frame.desktop .preview-hero-content[data-vertical="bottom"] {
  bottom: 58px;
}

/* =========================================================
   JOINUP Studio Sprint 2.4.3
   Unified Text Alignment
   ========================================================= */

.section-align-field {
  margin-bottom: 20px;
}

/* Hero: 텍스트 정렬 버튼 하나가 글자 묶음의 가로 위치와 내부 정렬을 함께 담당 */
.preview-hero-content[data-align="left"] {
  left: 24px;
  right: auto;
  transform: translateX(0);
}

.preview-hero-content[data-align="center"] {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.preview-hero-content[data-align="right"] {
  left: auto;
  right: 24px;
  transform: translateX(0);
}

.preview-hero-content[data-align="center"][data-vertical="center"] {
  transform: translate(-50%, -50%);
}

.preview-hero-content[data-align="left"][data-vertical="center"],
.preview-hero-content[data-align="right"][data-vertical="center"] {
  transform: translateY(-50%);
}

.preview-hero-content[data-align="center"] .preview-badge {
  margin-left: auto;
  margin-right: auto;
}

.preview-hero-content[data-align="right"] .preview-badge {
  margin-left: auto;
  margin-right: 0;
}

.phone-frame.desktop .preview-hero-content[data-align="left"] {
  left: 48px;
}

.phone-frame.desktop .preview-hero-content[data-align="right"] {
  right: 48px;
}

/* 혜택 */
[data-preview-section][data-panel="benefits"][data-text-align="left"] {
  text-align: left;
}

[data-preview-section][data-panel="benefits"][data-text-align="center"] {
  text-align: center;
}

[data-preview-section][data-panel="benefits"][data-text-align="right"] {
  text-align: right;
}

[data-preview-section][data-panel="benefits"][data-text-align="center"] .benefit-card span {
  margin-left: auto;
  margin-right: auto;
}

[data-preview-section][data-panel="benefits"][data-text-align="right"] .benefit-card span {
  margin-left: auto;
  margin-right: 0;
}

/* FAQ */
[data-preview-section][data-panel="faq"][data-text-align="left"] {
  text-align: left;
}

[data-preview-section][data-panel="faq"][data-text-align="center"] {
  text-align: center;
}

[data-preview-section][data-panel="faq"][data-text-align="right"] {
  text-align: right;
}

/* CTA */
[data-preview-section][data-panel="cta"][data-text-align="left"] {
  text-align: left;
}

[data-preview-section][data-panel="cta"][data-text-align="center"] {
  text-align: center;
}

[data-preview-section][data-panel="cta"][data-text-align="right"] {
  text-align: right;
}

[data-preview-section][data-panel="cta"][data-text-align="center"] .preview-button {
  margin-left: auto;
  margin-right: auto;
}

[data-preview-section][data-panel="cta"][data-text-align="right"] .preview-button {
  margin-left: auto;
  margin-right: 0;
}

.empty-state.compact {
  margin-top: 18px;
  min-height: 180px;
}

/* =========================================================
   JOINUP Studio Sprint 2.4.4
   Hero Alignment Control Position
   ========================================================= */

.section-align-field-first {
  margin-top: 0;
  margin-bottom: 22px;
}

/* =========================================================
   JOINUP Studio Sprint 2.4.5
   Hero Layout Controls First
   ========================================================= */

.editor-panel[data-editor="hero"] > .hero-layout-heading {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.editor-panel[data-editor="hero"] > .section-align-field-first {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* =========================================================
   JOINUP Studio Sprint 2.5
   Benefit + FAQ Drag Reorder
   ========================================================= */

.reorder-guide {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -4px 0 16px;
  padding: 10px 12px;
  border: 1px dashed #d7dbe2;
  border-radius: 10px;
  background: #fafbfc;
  color: #747b87;
  font-size: 11px;
  font-weight: 600;
}

.reorder-guide span {
  color: #17191d;
  font-size: 15px;
  font-weight: 900;
}

.reorder-card {
  position: relative;
  cursor: grab;
  transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease;
}

.reorder-card:active {
  cursor: grabbing;
}

.repeater-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drag-handle {
  width: 27px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: #eef0f3;
  color: #747b86;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  cursor: grab;
}

.drag-handle:hover {
  background: #e2e5ea;
  color: #17191d;
}

.reorder-card.is-dragging {
  opacity: .4;
  transform: scale(.985);
}

.reorder-card.drag-over-before::before,
.reorder-card.drag-over-after::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 4px;
  right: 4px;
  height: 3px;
  border-radius: 999px;
  background: #f0b84a;
  box-shadow: 0 0 0 2px rgba(240, 184, 74, .16);
}

.reorder-card.drag-over-before::before {
  top: -9px;
}

.reorder-card.drag-over-after::after {
  bottom: -9px;
}

/* =========================================================
   JOINUP Studio Sprint 3.0
   Integrated Studio + Premium Template Upgrade
   ========================================================= */

:root {
  --brand-primary: #17191d;
  --brand-accent: #f0c36a;
  --brand-surface: #ffffff;
  --brand-text: #15171c;
}

/* Studio controls */
.studio-subheading {
  margin-top: 30px;
  padding-top: 25px;
  border-top: 1px solid var(--line);
}

.section-manager {
  display: grid;
  gap: 8px;
}

.section-manager-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #e2e5ea;
  border-radius: 12px;
  background: #fff;
  cursor: grab;
  transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}

.section-manager-row.is-disabled {
  opacity: .52;
  background: #f7f8fa;
}

.section-manager-row.is-dragging {
  opacity: .35;
  transform: scale(.985);
}

.section-manager-row.is-drop-target {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 20%, transparent);
}

.section-drag-handle {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: #f0f2f5;
  color: #737a86;
  font-weight: 900;
  cursor: grab;
}

.section-manager-name {
  font-size: 12px;
  font-weight: 750;
}

.toggle-switch {
  position: relative;
  width: 42px;
  height: 24px;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
}

.toggle-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d7dbe2;
  transition: .18s ease;
}

.toggle-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.16);
  transition: .18s ease;
}

.toggle-switch input:checked + span {
  background: var(--brand-primary);
}

.toggle-switch input:checked + span::after {
  transform: translateX(18px);
}

.nav-item.section-disabled {
  opacity: .38;
}

.color-control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.color-control {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e1e4e9;
  border-radius: 12px;
  background: #fafbfc;
}

.color-control > span {
  font-size: 11px;
  font-weight: 700;
}

.color-control > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-control input[type="color"] {
  width: 38px;
  height: 34px;
  padding: 2px;
  border: 1px solid #d7dbe2;
  border-radius: 8px;
  background: #fff;
}

.color-control code {
  color: #666d79;
  font-size: 10px;
}

.image-upload-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.upload-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.upload-status {
  overflow: hidden;
  color: #8a909b;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sub-label {
  display: block;
  margin-top: 13px;
  color: #6f7682;
  font-size: 10px;
}

/* AI modal */
.modal-backdrop[hidden] {
  display: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 12, 16, .62);
  backdrop-filter: blur(8px);
}

.ai-modal {
  width: min(540px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 34px 90px rgba(0,0,0,.34);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 25px 26px 20px;
  border-bottom: 1px solid var(--line);
}

.modal-head h2 {
  margin: 5px 0 7px;
  font-size: 22px;
}

.modal-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.modal-body {
  padding: 23px 26px 8px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px 26px 25px;
}

.ai-notice {
  padding: 12px 14px;
  border-radius: 11px;
  background: #f5f2e9;
  color: #75633e;
  font-size: 10px;
  line-height: 1.55;
}

body.modal-open {
  overflow: hidden;
}

/* Premium landing template */
.landing-preview {
  background: var(--brand-surface);
  color: var(--brand-text);
}

.preview-hero {
  min-height: 540px;
  background-size: cover;
}

.preview-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 36%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.16));
  pointer-events: none;
}

.preview-brand {
  z-index: 3;
  top: 24px;
  left: 24px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(10,12,16,.24);
  backdrop-filter: blur(12px);
  font-size: 10px;
  letter-spacing: .04em;
}

.preview-hero-content {
  z-index: 3;
}

.preview-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

.preview-eyebrow,
.section-kicker,
.cta-eyebrow {
  color: var(--brand-accent) !important;
  font-weight: 800;
  letter-spacing: .16em;
}

.preview-hero-content h2 {
  max-width: 12ch;
  margin-top: 10px;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.preview-hero-content > p:not(.preview-eyebrow) {
  max-width: 34ch;
  margin-top: 13px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  line-height: 1.65;
}

.preview-hero-content button,
.preview-footer-cta button {
  min-height: 43px;
  padding: 0 17px;
  border: 0;
  border-radius: 12px;
  background: var(--brand-accent);
  color: color-mix(in srgb, var(--brand-primary) 90%, #000);
  font-weight: 800;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-accent) 28%, transparent);
}

.preview-section {
  padding: 58px 24px;
  background: var(--brand-surface);
}

.preview-section + .preview-section {
  border-top: 1px solid color-mix(in srgb, var(--brand-text) 8%, transparent);
}

.preview-section > h3 {
  margin: 8px 0 26px;
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -.035em;
}

.benefit-grid {
  display: grid;
  gap: 12px;
}

.benefit-card {
  position: relative;
  overflow: hidden;
  min-height: 154px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--brand-text) 9%, transparent);
  border-radius: 19px;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--brand-surface) 96%, var(--brand-accent)),
      var(--brand-surface));
  box-shadow: 0 15px 35px color-mix(in srgb, var(--brand-text) 7%, transparent);
}

.benefit-card::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-accent) 16%, transparent);
}

.benefit-card > span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 10px;
  background: var(--brand-primary);
  color: var(--brand-accent);
  font-size: 10px;
  font-weight: 800;
}

.benefit-card strong {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 16px;
}

.benefit-card p {
  position: relative;
  z-index: 1;
  margin: 8px 0 0;
  color: color-mix(in srgb, var(--brand-text) 60%, transparent);
  font-size: 11px;
  line-height: 1.62;
}

.faq-section {
  background: color-mix(in srgb, var(--brand-surface) 96%, var(--brand-primary));
}

.faq-item {
  padding: 18px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-text) 12%, transparent);
}

.faq-item strong {
  display: block;
  padding-right: 22px;
  font-size: 13px;
  line-height: 1.45;
}

.faq-item p {
  margin: 8px 0 0;
  color: color-mix(in srgb, var(--brand-text) 58%, transparent);
  font-size: 10px;
  line-height: 1.65;
}

.preview-footer-cta {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  display: flex;
  align-items: flex-end;
  padding: 38px 24px;
  background:
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--brand-accent) 27%, transparent), transparent 34%),
    var(--brand-primary);
  color: #fff;
}

.cta-glow {
  position: absolute;
  top: -80px;
  right: -70px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 42%, transparent);
  box-shadow:
    0 0 0 38px color-mix(in srgb, var(--brand-accent) 7%, transparent),
    0 0 0 80px color-mix(in srgb, var(--brand-accent) 4%, transparent);
}

.cta-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.preview-footer-cta h3 {
  max-width: 13ch;
  margin: 10px 0 13px;
  color: #fff;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.cta-description {
  max-width: 32ch;
  margin: 0 0 23px;
  color: rgba(255,255,255,.63);
  font-size: 11px;
  line-height: 1.65;
}

.section-is-hidden {
  display: none !important;
}

/* Desktop preview becomes a real landing layout */
.phone-frame.desktop .landing-preview {
  width: 100%;
}

.phone-frame.desktop .preview-hero {
  min-height: 650px;
}

.phone-frame.desktop .preview-brand {
  top: 34px;
  left: 48px;
}

.phone-frame.desktop .preview-hero-content h2 {
  max-width: 13ch;
  font-size: clamp(46px, 5vw, 72px);
}

.phone-frame.desktop .preview-hero-content > p:not(.preview-eyebrow) {
  max-width: 44ch;
  font-size: 15px;
}

.phone-frame.desktop .preview-section {
  padding: 92px clamp(48px, 8vw, 120px);
}

.phone-frame.desktop .preview-section > h3 {
  max-width: 650px;
  font-size: 40px;
}

.phone-frame.desktop .benefit-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.phone-frame.desktop .benefit-card {
  min-height: 225px;
  padding: 28px;
}

.phone-frame.desktop .preview-footer-cta {
  min-height: 460px;
  padding: 72px clamp(48px, 8vw, 120px);
}

.phone-frame.desktop .preview-footer-cta h3 {
  font-size: 58px;
}

@media (max-width: 520px) {
  .color-control-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   JOINUP Studio Sprint 3.1
   Extended Sections + Benefit Styles + CTA Background
   ========================================================= */

.toggle-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 14px;
  border: 1px solid #e2e5ea;
  border-radius: 12px;
  background: #fafbfc;
}

.toggle-field small {
  display: block;
  margin-top: 4px;
}

[data-preview-section][data-panel="benefits"][data-benefit-border="off"] .benefit-card {
  border-color: transparent;
}

[data-preview-section][data-panel="benefits"][data-benefit-style="line"] .benefit-grid {
  gap: 0;
}

[data-preview-section][data-panel="benefits"][data-benefit-style="line"] .benefit-card {
  min-height: auto;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-text) 12%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-preview-section][data-panel="benefits"][data-benefit-style="line"] .benefit-card::after {
  display: none;
}

[data-preview-section][data-panel="benefits"][data-benefit-style="minimal"] .benefit-card {
  min-height: auto;
  padding: 10px 0 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-preview-section][data-panel="benefits"][data-benefit-style="minimal"] .benefit-card::after {
  display: none;
}

[data-preview-section][data-panel="benefits"][data-benefit-style="minimal"] .benefit-card > span {
  width: auto;
  height: auto;
  margin-bottom: 12px;
  background: transparent;
  color: var(--brand-accent);
  font-size: 11px;
}

.number-section {
  background: var(--brand-primary);
  color: #fff;
}

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

.number-card {
  padding: 18px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.05);
}

.number-card strong {
  display: block;
  color: var(--brand-accent);
  font-size: 23px;
  line-height: 1;
}

.number-card span {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.65);
  font-size: 9px;
  line-height: 1.45;
}

.company-section {
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  background:
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 30%),
    color-mix(in srgb, var(--brand-surface) 96%, var(--brand-primary));
}

.company-copy {
  width: 100%;
}

.company-copy > p:last-child {
  max-width: 42ch;
  color: color-mix(in srgb, var(--brand-text) 62%, transparent);
  font-size: 12px;
  line-height: 1.75;
}

.review-grid {
  display: grid;
  gap: 12px;
}

.review-card {
  padding: 23px;
  border: 1px solid color-mix(in srgb, var(--brand-text) 10%, transparent);
  border-radius: 18px;
  background: var(--brand-surface);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--brand-text) 6%, transparent);
}

.review-mark {
  display: block;
  color: var(--brand-accent);
  font-size: 32px;
  line-height: .8;
}

.review-card > p {
  margin: 15px 0 20px;
  color: color-mix(in srgb, var(--brand-text) 78%, transparent);
  font-size: 12px;
  line-height: 1.7;
}

.review-card div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
}

.review-card div span {
  color: color-mix(in srgb, var(--brand-text) 50%, transparent);
}

.question-preview-list {
  display: grid;
  gap: 9px;
}

.question-preview-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--brand-text) 10%, transparent);
  border-radius: 14px;
  background: var(--brand-surface);
}

.question-preview-item > span {
  color: var(--brand-accent);
  font-size: 10px;
  font-weight: 800;
}

.question-preview-item strong {
  font-size: 11px;
  line-height: 1.45;
}

.question-preview-item em {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--brand-primary);
  color: #fff;
  font-size: 8px;
  font-style: normal;
}

.question-preview-item em.optional {
  background: #eceff3;
  color: #727985;
}

.preview-footer-cta[data-background-type="solid"] {
  background: var(--cta-bg);
}

.preview-footer-cta[data-background-type="gradient"] {
  background:
    radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--brand-accent) 27%, transparent), transparent 34%),
    linear-gradient(135deg, var(--cta-bg), var(--cta-bg-secondary));
}

.preview-footer-cta[data-background-type="image"] {
  background-size: cover;
  background-position: center;
}

[data-preview-section][data-panel="reviews"][data-text-align="center"] .review-card div,
[data-preview-section][data-panel="reviews"][data-text-align="center"] .review-card {
  text-align: center;
  justify-content: center;
}

[data-preview-section][data-panel="reviews"][data-text-align="right"] .review-card div,
[data-preview-section][data-panel="reviews"][data-text-align="right"] .review-card {
  text-align: right;
  justify-content: flex-end;
}

[data-preview-section][data-panel="numbers"][data-text-align="center"],
[data-preview-section][data-panel="company"][data-text-align="center"],
[data-preview-section][data-panel="questions"][data-text-align="center"] {
  text-align: center;
}

[data-preview-section][data-panel="numbers"][data-text-align="right"],
[data-preview-section][data-panel="company"][data-text-align="right"],
[data-preview-section][data-panel="questions"][data-text-align="right"] {
  text-align: right;
}

.phone-frame.desktop .number-grid {
  gap: 18px;
}

.phone-frame.desktop .number-card {
  padding: 34px 24px;
}

.phone-frame.desktop .number-card strong {
  font-size: 48px;
}

.phone-frame.desktop .review-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.phone-frame.desktop .question-preview-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* JOINUP Sprint 3.2 — precise ordering */
.repeater-top-advanced { align-items:flex-start; gap:12px; }
.card-actions { display:flex; align-items:center; justify-content:flex-end; gap:5px; flex-wrap:wrap; }
.position-control { display:inline-grid; grid-template-columns:24px 38px 24px; overflow:hidden; border:1px solid #dfe3e8; border-radius:9px; background:#f7f8fa; }
.position-arrow { width:24px; height:28px; padding:0; border:0; background:transparent; color:#747b86; font-size:8px; cursor:pointer; }
.position-arrow:hover:not(:disabled) { background:#eceff3; color:#17191d; }
.position-arrow:disabled { opacity:.25; cursor:default; }
.position-select { width:38px; height:28px; padding:0 2px; border:0; border-left:1px solid #e1e4e9; border-right:1px solid #e1e4e9; border-radius:0; background:#fff; color:#17191d; font-size:10px; font-weight:800; text-align:center; cursor:pointer; }
.card-tool-button,.featured-button { display:inline-grid; width:29px; height:29px; place-items:center; padding:0; border:1px solid #dfe3e8; border-radius:8px; background:#fff; color:#747b86; cursor:pointer; }
.featured-button.active { border-color:var(--brand-accent); background:color-mix(in srgb,var(--brand-accent) 20%,#fff); color:#a87000; }
[data-preview-section][data-panel="benefits"][data-benefit-shadow="off"] .benefit-card { box-shadow:none; }
[data-preview-section][data-panel="benefits"][data-benefit-icon="off"] .benefit-card>span { display:none; }
.benefit-card.is-featured { border-color:color-mix(in srgb,var(--brand-accent) 62%,transparent); box-shadow:0 18px 42px color-mix(in srgb,var(--brand-accent) 17%,transparent),0 0 0 2px color-mix(in srgb,var(--brand-accent) 12%,transparent); }
.benefit-card.is-featured::before { content:"BEST"; position:absolute; top:14px; right:14px; z-index:2; padding:5px 8px; border-radius:999px; background:var(--brand-accent); color:var(--brand-primary); font-size:7px; font-weight:900; letter-spacing:.12em; }
@media(max-width:560px){ .repeater-top-advanced{align-items:stretch;flex-direction:column}.card-actions{justify-content:flex-start} }

/* =========================================================
   JOINUP Studio Sprint 3.3
   Complete Section Manager
   ========================================================= */

.section-manager-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 9px;
  padding: 0 2px;
  color: #747b87;
  font-size: 10px;
  font-weight: 700;
}

.section-manager-summary strong {
  display: inline-grid;
  min-width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 999px;
  background: #17191d;
  color: #fff;
  font-size: 10px;
}

.section-manager {
  counter-reset: joinup-section;
}

.section-manager-row {
  counter-increment: joinup-section;
}

.section-manager-name::before {
  content: counter(joinup-section, decimal-leading-zero);
  display: inline-block;
  min-width: 24px;
  margin-right: 7px;
  color: #9aa0aa;
  font-size: 9px;
  font-weight: 800;
}

/* =========================================================
   JOINUP Studio Sprint 3.4
   Detailed Alignment System
   ========================================================= */

/* 공통 섹션 제목과 본문 */
.landing-preview [data-preview-section].align-left {
  text-align: left !important;
}

.landing-preview [data-preview-section].align-center {
  text-align: center !important;
}

.landing-preview [data-preview-section].align-right {
  text-align: right !important;
}

.landing-preview [data-preview-section].align-center > .section-kicker,
.landing-preview [data-preview-section].align-center > h3,
.landing-preview [data-preview-section].align-center .company-copy,
.landing-preview [data-preview-section].align-center .cta-content {
  margin-left: auto !important;
  margin-right: auto !important;
}

.landing-preview [data-preview-section].align-right > .section-kicker,
.landing-preview [data-preview-section].align-right > h3,
.landing-preview [data-preview-section].align-right .company-copy,
.landing-preview [data-preview-section].align-right .cta-content {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Hero: 글자 묶음 위치 + 내부 요소 정렬을 동일하게 적용 */
.preview-hero-content.align-left {
  align-items: flex-start !important;
  text-align: left !important;
}

.preview-hero-content.align-center {
  align-items: center !important;
  text-align: center !important;
}

.preview-hero-content.align-right {
  align-items: flex-end !important;
  text-align: right !important;
}

.preview-hero-content.align-left > *,
.preview-hero-content.align-center > *,
.preview-hero-content.align-right > * {
  flex-shrink: 0;
}

.preview-hero-content.align-center h2,
.preview-hero-content.align-center > p {
  margin-left: auto !important;
  margin-right: auto !important;
}

.preview-hero-content.align-right h2,
.preview-hero-content.align-right > p {
  margin-left: auto !important;
  margin-right: 0 !important;
}

.preview-hero-content.align-left .preview-badge,
.preview-hero-content.align-left button {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.preview-hero-content.align-center .preview-badge,
.preview-hero-content.align-center button {
  margin-left: auto !important;
  margin-right: auto !important;
}

.preview-hero-content.align-right .preview-badge,
.preview-hero-content.align-right button {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* 혜택 카드 */
[data-panel="benefits"].align-left .benefit-card {
  text-align: left !important;
}

[data-panel="benefits"].align-center .benefit-card {
  text-align: center !important;
}

[data-panel="benefits"].align-right .benefit-card {
  text-align: right !important;
}

[data-panel="benefits"].align-left .benefit-card > span {
  margin-left: 0 !important;
  margin-right: auto !important;
}

[data-panel="benefits"].align-center .benefit-card > span {
  margin-left: auto !important;
  margin-right: auto !important;
}

[data-panel="benefits"].align-right .benefit-card > span {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* 숫자 */
[data-panel="numbers"].align-left .number-card {
  text-align: left !important;
}

[data-panel="numbers"].align-center .number-card {
  text-align: center !important;
}

[data-panel="numbers"].align-right .number-card {
  text-align: right !important;
}

/* 회사 */
[data-panel="company"].align-left .company-copy {
  text-align: left !important;
}

[data-panel="company"].align-center .company-copy {
  text-align: center !important;
}

[data-panel="company"].align-right .company-copy {
  text-align: right !important;
}

[data-panel="company"].align-center .company-copy > p:last-child {
  margin-left: auto !important;
  margin-right: auto !important;
}

[data-panel="company"].align-right .company-copy > p:last-child {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* 후기 */
[data-panel="reviews"].align-left .review-card {
  text-align: left !important;
}

[data-panel="reviews"].align-center .review-card {
  text-align: center !important;
}

[data-panel="reviews"].align-right .review-card {
  text-align: right !important;
}

[data-panel="reviews"].align-left .review-card > div {
  justify-content: flex-start !important;
}

[data-panel="reviews"].align-center .review-card > div {
  justify-content: center !important;
}

[data-panel="reviews"].align-right .review-card > div {
  justify-content: flex-end !important;
}

/* FAQ */
[data-panel="faq"].align-left .faq-item,
[data-panel="faq"].align-left .faq-item strong,
[data-panel="faq"].align-left .faq-item p {
  text-align: left !important;
}

[data-panel="faq"].align-center .faq-item,
[data-panel="faq"].align-center .faq-item strong,
[data-panel="faq"].align-center .faq-item p {
  text-align: center !important;
}

[data-panel="faq"].align-right .faq-item,
[data-panel="faq"].align-right .faq-item strong,
[data-panel="faq"].align-right .faq-item p {
  text-align: right !important;
}

[data-panel="faq"].align-center .faq-item strong {
  padding-left: 22px;
}

[data-panel="faq"].align-right .faq-item strong {
  padding-left: 22px;
  padding-right: 0;
}

/* 지원 질문 */
[data-panel="questions"].align-left .question-preview-item {
  text-align: left !important;
}

[data-panel="questions"].align-center .question-preview-item {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  text-align: center !important;
}

[data-panel="questions"].align-right .question-preview-item {
  grid-template-columns: auto 1fr 32px !important;
  text-align: right !important;
}

[data-panel="questions"].align-right .question-preview-item > span {
  grid-column: 3;
  grid-row: 1;
}

[data-panel="questions"].align-right .question-preview-item > strong {
  grid-column: 2;
  grid-row: 1;
}

[data-panel="questions"].align-right .question-preview-item > em {
  grid-column: 1;
  grid-row: 1;
}

/* CTA */
[data-panel="cta"].align-left .cta-content {
  align-items: flex-start !important;
  text-align: left !important;
}

[data-panel="cta"].align-center .cta-content {
  align-items: center !important;
  text-align: center !important;
}

[data-panel="cta"].align-right .cta-content {
  align-items: flex-end !important;
  text-align: right !important;
}

[data-panel="cta"].align-center .cta-content h3,
[data-panel="cta"].align-center .cta-description {
  margin-left: auto !important;
  margin-right: auto !important;
}

[data-panel="cta"].align-right .cta-content h3,
[data-panel="cta"].align-right .cta-description {
  margin-left: auto !important;
  margin-right: 0 !important;
}

[data-panel="cta"].align-left button {
  margin-left: 0 !important;
  margin-right: auto !important;
}

[data-panel="cta"].align-center button {
  margin-left: auto !important;
  margin-right: auto !important;
}

[data-panel="cta"].align-right button {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* flex 정렬이 실제로 적용되도록 보장 */
.preview-hero-content,
.cta-content {
  display: flex !important;
  flex-direction: column !important;
}

/* =========================================================
   JOINUP Studio Sprint 3.5
   Optional Hero Elements + Optional BEST
   ========================================================= */

#previewBadge[hidden],
#previewHeroButton[hidden] {
  display: none !important;
}

[data-preview-section][data-panel="benefits"][data-show-featured="off"] .benefit-card::before {
  display: none !important;
}

[data-preview-section][data-panel="benefits"][data-show-featured="off"] .benefit-card {
  box-shadow: 0 15px 35px color-mix(in srgb, var(--brand-text) 7%, transparent);
}

[data-preview-section][data-panel="benefits"][data-show-featured="off"][data-benefit-shadow="off"] .benefit-card {
  box-shadow: none;
}

[data-preview-section][data-panel="benefits"][data-show-featured="off"][data-benefit-border="off"] .benefit-card {
  border-color: transparent;
}

/* =========================================================
   JOINUP Studio Sprint 3.6
   Hero Smart Palette
   ========================================================= */

.smart-palette-card {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #dfe3e9;
  border-radius: 15px;
  background:
    linear-gradient(145deg, #ffffff, #f7f8fa);
}

.smart-palette-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.smart-palette-head strong {
  display: block;
  font-size: 12px;
}

.smart-palette-head p {
  margin: 5px 0 0;
  color: #808793;
  font-size: 10px;
  line-height: 1.5;
}

.smart-palette-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
}

.palette-swatch {
  min-width: 0;
  padding: 7px;
  border: 1px solid #e4e7eb;
  border-radius: 10px;
  background: #fff;
}

.palette-swatch i {
  display: block;
  width: 100%;
  height: 29px;
  margin-bottom: 7px;
  border: 1px solid rgba(20, 24, 32, .08);
  border-radius: 7px;
  background: #eef0f3;
}

.palette-swatch span {
  display: block;
  color: #747b87;
  font-size: 8px;
  font-weight: 700;
}

.palette-swatch code {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #24272d;
  font-size: 8px;
  font-weight: 800;
  text-overflow: ellipsis;
}

.smart-palette-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  flex-wrap: wrap;
}

.smart-palette-actions .btn:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.smart-palette-status {
  display: block;
  margin-top: 11px;
  color: #838a96;
  font-size: 9px;
  line-height: 1.5;
}

.smart-palette-status[data-status="loading"] {
  color: #806420;
}

.smart-palette-status[data-status="success"] {
  color: #24835a;
}

.smart-palette-status[data-status="error"] {
  color: #bd3f46;
}

@media (max-width: 560px) {
  .smart-palette-swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   JOINUP Sprint 4.1A
   Component Template Engine Foundation
   ========================================================= */

.component-library-block {
  margin: 0 0 26px;
  padding: 17px;
  border: 1px solid #dfe3e9;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, #f7f8fa);
}

.component-library-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.component-library-head h2 {
  margin: 5px 0 5px;
  font-size: 15px;
}

.component-library-head p {
  max-width: 38ch;
  margin: 0;
  color: #7e8591;
  font-size: 10px;
  line-height: 1.5;
}

.library-filter-button {
  width: 32px;
  height: 32px;
  border: 1px solid #dfe3e9;
  border-radius: 9px;
  background: #fff;
  color: #a7adb6;
}

.template-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.template-library-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #e1e4e9;
  border-radius: 13px;
  background: #fff;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.template-library-card:hover {
  transform: translateY(-1px);
  border-color: #cbd0d8;
}

.template-library-card.selected {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 16%, transparent);
}

.template-select-button {
  width: 100%;
  padding: 9px;
  border: 0;
  background: transparent;
  text-align: left;
}

.template-select-button strong {
  display: block;
  margin-top: 8px;
  color: #202329;
  font-size: 10px;
}

.template-select-button small {
  color: #a07822;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.template-select-button p {
  margin: 5px 0 0;
  color: #858c97;
  font-size: 8px;
  line-height: 1.4;
}

.template-favorite-button {
  position: absolute;
  z-index: 4;
  top: 14px;
  right: 14px;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 8px;
  background: rgba(14,17,22,.48);
  color: rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
}

.template-favorite-button.active {
  background: var(--brand-accent);
  color: var(--brand-primary);
}

.template-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  height: 76px;
  border-radius: 9px;
  background: #17191d;
}

.template-thumb i,
.template-thumb b,
.template-thumb em {
  position: absolute;
  display: block;
}

/* Library thumbnail DNA */
.template-thumb.tpl-hero-recruit-focus {
  background: linear-gradient(150deg, #59616e, #11151b);
}
.template-thumb.tpl-hero-recruit-focus i { inset: 8px 44% 8px 8px; border-radius: 7px; background: rgba(255,255,255,.15); }
.template-thumb.tpl-hero-recruit-focus b { left: 59%; right: 8px; bottom: 22px; height: 7px; background: #fff; }
.template-thumb.tpl-hero-recruit-focus em { left: 59%; right: 22px; bottom: 10px; height: 5px; background: var(--brand-accent); }

.template-thumb.tpl-hero-corporate-glass {
  background: linear-gradient(135deg, #8394aa, #273649);
}
.template-thumb.tpl-hero-corporate-glass i { inset: 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; background: rgba(255,255,255,.12); }
.template-thumb.tpl-hero-corporate-glass b { left: 22px; right: 38%; bottom: 28px; height: 7px; background: #fff; }
.template-thumb.tpl-hero-corporate-glass em { left: 22px; right: 52%; bottom: 15px; height: 5px; background: #dbe8f8; }

.template-thumb.tpl-hero-luxury-dark { background: radial-gradient(circle at 70% 20%, #574826, #090a0c 62%); }
.template-thumb.tpl-hero-luxury-dark i { left: 13px; bottom: 15px; width: 22px; height: 22px; border: 1px solid #d4b66a; border-radius: 50%; }
.template-thumb.tpl-hero-luxury-dark b { left: 44px; right: 12px; bottom: 29px; height: 7px; background: #f6ebc7; }
.template-thumb.tpl-hero-luxury-dark em { left: 44px; right: 32px; bottom: 15px; height: 4px; background: #d4b66a; }

.template-thumb.tpl-hero-center-impact { background: linear-gradient(160deg, #263d39, #07110f); }
.template-thumb.tpl-hero-center-impact i { left: 25%; right: 25%; top: 15px; height: 8px; background: rgba(255,255,255,.65); }
.template-thumb.tpl-hero-center-impact b { left: 15%; right: 15%; top: 34px; height: 10px; background: #fff; }
.template-thumb.tpl-hero-center-impact em { left: 35%; right: 35%; bottom: 12px; height: 12px; border-radius: 999px; background: #33d6a6; }

.template-thumb.tpl-benefit-premium-cards,
.template-thumb.tpl-benefit-dark-stack,
.template-thumb.tpl-benefit-icon-list,
.template-thumb.tpl-benefit-number-grid {
  background: #f1f3f6;
}
.template-thumb.tpl-benefit-premium-cards i,
.template-thumb.tpl-benefit-premium-cards b,
.template-thumb.tpl-benefit-premium-cards em { top: 13px; bottom: 13px; width: 27%; border-radius: 7px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.template-thumb.tpl-benefit-premium-cards i { left: 7%; } .template-thumb.tpl-benefit-premium-cards b { left: 36.5%; } .template-thumb.tpl-benefit-premium-cards em { right: 7%; }

.template-thumb.tpl-benefit-dark-stack { background:#0d1218; }
.template-thumb.tpl-benefit-dark-stack i,
.template-thumb.tpl-benefit-dark-stack b,
.template-thumb.tpl-benefit-dark-stack em { left:10px; right:10px; height:15px; border:1px solid #263441; border-radius:6px; background:#131b23; }
.template-thumb.tpl-benefit-dark-stack i{top:9px}.template-thumb.tpl-benefit-dark-stack b{top:30px}.template-thumb.tpl-benefit-dark-stack em{top:51px}

.template-thumb.tpl-benefit-icon-list i,
.template-thumb.tpl-benefit-icon-list b,
.template-thumb.tpl-benefit-icon-list em { left:12px; width:13px; height:13px; border-radius:4px; background:#192027; box-shadow:22px 0 0 0 #c8cdd4, 46px 0 0 0 #d9dde2; }
.template-thumb.tpl-benefit-icon-list i{top:11px}.template-thumb.tpl-benefit-icon-list b{top:32px}.template-thumb.tpl-benefit-icon-list em{top:53px}

.template-thumb.tpl-benefit-number-grid { background:#11171d; }
.template-thumb.tpl-benefit-number-grid i,
.template-thumb.tpl-benefit-number-grid b,
.template-thumb.tpl-benefit-number-grid em { top:14px; bottom:14px; width:25%; border-radius:8px; border:1px solid #2a3946; background:#162129; }
.template-thumb.tpl-benefit-number-grid i{left:8%}.template-thumb.tpl-benefit-number-grid b{left:37.5%}.template-thumb.tpl-benefit-number-grid em{right:8%}

.template-thumb.tpl-cta-premium-glow { background: radial-gradient(circle at 75% 20%, #5b4b25, #111318 60%); }
.template-thumb.tpl-cta-premium-glow i{left:13px;right:38%;top:19px;height:9px;background:#fff}.template-thumb.tpl-cta-premium-glow b{left:13px;right:50%;top:36px;height:5px;background:#b6bbc2}.template-thumb.tpl-cta-premium-glow em{right:13px;bottom:13px;width:34px;height:15px;border-radius:999px;background:#e7bd5d}

.template-thumb.tpl-cta-split-action { background:#17212a; }
.template-thumb.tpl-cta-split-action i{left:12px;top:18px;width:45%;height:25px;background:rgba(255,255,255,.12)}.template-thumb.tpl-cta-split-action b{right:12px;top:18px;width:32%;height:25px;border-radius:6px;background:#40d3aa}

.template-thumb.tpl-cta-minimal-border { background:#fafafa;border:1px solid #dedede; }
.template-thumb.tpl-cta-minimal-border i{inset:13px;border:1px solid #24272d;border-radius:7px}.template-thumb.tpl-cta-minimal-border b{left:23px;right:44%;top:28px;height:7px;background:#24272d}.template-thumb.tpl-cta-minimal-border em{right:23px;top:24px;width:30px;height:15px;border-radius:999px;background:#24272d}

.template-thumb.tpl-cta-image-panel { background:linear-gradient(145deg,#637064,#202820); }
.template-thumb.tpl-cta-image-panel i{inset:12px 14px;border-radius:7px;background:rgba(9,12,11,.65);backdrop-filter:blur(6px)}.template-thumb.tpl-cta-image-panel b{left:25px;right:42%;top:29px;height:7px;background:#fff}.template-thumb.tpl-cta-image-panel em{right:25px;bottom:20px;width:30px;height:13px;border-radius:999px;background:#4ee0b0}

/* =========================================================
   Preview Component Templates
   ========================================================= */

/* Hero variants */
.preview-hero.tpl-hero-recruit-focus .preview-hero-content {
  max-width: 88%;
}
.preview-hero.tpl-hero-recruit-focus .preview-hero-content h2 {
  font-weight: 850;
}
.preview-hero.tpl-hero-recruit-focus .preview-brand {
  border-radius: 999px;
}

.preview-hero.tpl-hero-corporate-glass .preview-hero-content {
  padding: 22px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 19px;
  background: rgba(16,25,37,.34);
  backdrop-filter: blur(16px);
  box-shadow: 0 22px 50px rgba(0,0,0,.2);
}
.preview-hero.tpl-hero-corporate-glass .preview-hero-content h2 {
  max-width: 14ch;
}

.preview-hero.tpl-hero-luxury-dark .hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.88)) !important;
}
.preview-hero.tpl-hero-luxury-dark .preview-eyebrow {
  color: #d7b86b !important;
}
.preview-hero.tpl-hero-luxury-dark .preview-hero-content button {
  border: 1px solid #d7b86b;
  background: transparent;
  color: #f5e7bd;
  box-shadow: none;
}
.preview-hero.tpl-hero-luxury-dark .preview-badge {
  border-color: rgba(215,184,107,.55);
  color: #f5e7bd;
}

.preview-hero.tpl-hero-center-impact .preview-hero-content {
  left: 50% !important;
  right: auto !important;
  width: calc(100% - 46px);
  transform: translateX(-50%) !important;
  align-items: center !important;
  text-align: center !important;
}
.preview-hero.tpl-hero-center-impact .preview-hero-content h2,
.preview-hero.tpl-hero-center-impact .preview-hero-content > p {
  margin-left: auto !important;
  margin-right: auto !important;
}
.preview-hero.tpl-hero-center-impact .preview-hero-content button,
.preview-hero.tpl-hero-center-impact .preview-badge {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Benefit variants */
[data-panel="benefits"].tpl-benefit-premium-cards .benefit-card {
  background: #fff !important;
  border-color: #e0e4e9 !important;
  color: #16191e !important;
}
[data-panel="benefits"].tpl-benefit-premium-cards .benefit-card strong {
  color: #16191e !important;
}
[data-panel="benefits"].tpl-benefit-premium-cards .benefit-card p {
  color: #68707c !important;
}
[data-panel="benefits"].tpl-benefit-premium-cards .benefit-card > span {
  background: var(--brand-primary) !important;
  color: var(--brand-accent) !important;
}

[data-panel="benefits"].tpl-benefit-dark-stack {
  background: #080c11;
  color: #fff;
}
[data-panel="benefits"].tpl-benefit-dark-stack .benefit-grid {
  grid-template-columns: 1fr !important;
}
[data-panel="benefits"].tpl-benefit-dark-stack .benefit-card {
  min-height: auto;
  border-color: #26323d;
  background: #111820;
  color: #fff;
  box-shadow: none;
}
[data-panel="benefits"].tpl-benefit-dark-stack .benefit-card p {
  color: rgba(255,255,255,.62);
}
[data-panel="benefits"].tpl-benefit-dark-stack .benefit-card > span {
  background: rgba(29,221,165,.08);
  color: #2bd8aa;
  border: 1px solid rgba(43,216,170,.35);
}

[data-panel="benefits"].tpl-benefit-icon-list .benefit-grid {
  gap: 0;
}
[data-panel="benefits"].tpl-benefit-icon-list .benefit-card {
  min-height: auto;
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 13px;
  padding: 19px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb,var(--brand-text) 12%,transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
[data-panel="benefits"].tpl-benefit-icon-list .benefit-card > span {
  grid-row: 1 / 3;
  margin: 0 !important;
}
[data-panel="benefits"].tpl-benefit-icon-list .benefit-card::after {
  display: none;
}

[data-panel="benefits"].tpl-benefit-number-grid {
  background: var(--brand-primary);
  color: #fff;
}
[data-panel="benefits"].tpl-benefit-number-grid .benefit-card {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: none;
}
[data-panel="benefits"].tpl-benefit-number-grid .benefit-card > span {
  width: auto;
  height: auto;
  margin-bottom: 14px;
  background: transparent;
  color: var(--brand-accent);
  font-size: 23px;
}
[data-panel="benefits"].tpl-benefit-number-grid .benefit-card p {
  color: rgba(255,255,255,.62);
}

/* CTA variants */
.preview-footer-cta.tpl-cta-split-action {
  align-items: center;
}
.preview-footer-cta.tpl-cta-split-action .cta-content {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 18px;
}
.preview-footer-cta.tpl-cta-split-action .cta-eyebrow,
.preview-footer-cta.tpl-cta-split-action .cta-description {
  grid-column: 1;
}
.preview-footer-cta.tpl-cta-split-action h3 {
  grid-column: 1;
}
.preview-footer-cta.tpl-cta-split-action button {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
}

.preview-footer-cta.tpl-cta-minimal-border {
  min-height: 260px;
  margin: 18px;
  border: 1px solid color-mix(in srgb,var(--brand-text) 18%,transparent);
  border-radius: 24px;
  background: var(--brand-surface) !important;
  color: var(--brand-text);
}
.preview-footer-cta.tpl-cta-minimal-border h3 {
  color: var(--brand-text);
}
.preview-footer-cta.tpl-cta-minimal-border .cta-description {
  color: color-mix(in srgb,var(--brand-text) 58%,transparent);
}
.preview-footer-cta.tpl-cta-minimal-border .cta-glow {
  display: none;
}

.preview-footer-cta.tpl-cta-image-panel .cta-content {
  padding: 23px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  background: rgba(8,12,14,.55);
  backdrop-filter: blur(15px);
}

@media (max-width: 520px) {
  .template-library-grid {
    grid-template-columns: 1fr;
  }
  .preview-footer-cta.tpl-cta-split-action .cta-content {
    display: flex !important;
  }
}


/* JOINUP Sprint 4.1B */
:root { --theme-radius: 18px; }

/* Center Impact vertical position fix */
.preview-hero.tpl-hero-center-impact .preview-hero-content[data-vertical="top"] {
  top:76px!important; bottom:auto!important; transform:translateX(-50%)!important;
}
.preview-hero.tpl-hero-center-impact .preview-hero-content[data-vertical="center"] {
  top:50%!important; bottom:auto!important; transform:translate(-50%,-50%)!important;
}
.preview-hero.tpl-hero-center-impact .preview-hero-content[data-vertical="bottom"] {
  top:auto!important; bottom:38px!important; transform:translateX(-50%)!important;
}
.phone-frame.desktop .preview-hero.tpl-hero-center-impact .preview-hero-content[data-vertical="top"] { top:94px!important; }
.phone-frame.desktop .preview-hero.tpl-hero-center-impact .preview-hero-content[data-vertical="bottom"] { bottom:58px!important; }

/* Benefit horizontal / vertical */
[data-panel="benefits"][data-benefit-orientation="vertical"] .benefit-grid {
  grid-template-columns:1fr!important; grid-auto-flow:row!important;
}
[data-panel="benefits"][data-benefit-orientation="horizontal"] .benefit-grid {
  grid-template-columns:repeat(3,minmax(0,1fr))!important; grid-auto-flow:row!important;
}
.phone-frame:not(.desktop) [data-panel="benefits"][data-benefit-orientation="horizontal"] .benefit-grid {
  grid-auto-flow:column!important; grid-auto-columns:minmax(78%,1fr);
  grid-template-columns:none!important; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px;
}
.phone-frame:not(.desktop) [data-panel="benefits"][data-benefit-orientation="horizontal"] .benefit-card { scroll-snap-align:start; }
[data-panel="benefits"].tpl-benefit-dark-stack[data-benefit-orientation="horizontal"] .benefit-grid {
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

/* Favorites */
.favorite-template-empty { display:grid; min-height:220px; place-items:center; align-content:center; gap:7px; border:1px dashed #d9dde4; border-radius:16px; color:#858c97; text-align:center; }
.favorite-template-empty[hidden] { display:none; }
.favorite-template-empty>span { font-size:28px; color:#d2a94f; }
.favorite-template-empty strong { color:#272a30; font-size:13px; }
.favorite-template-empty p { margin:0; font-size:10px; }
.favorite-template-grid { display:grid; gap:10px; }
.favorite-template-card { padding:15px; border:1px solid #e0e4e9; border-radius:14px; background:#fff; }
.favorite-template-card>strong { display:block; margin-top:5px; font-size:13px; }
.favorite-template-type { display:inline-block; padding:4px 7px; border-radius:999px; background:#17191d; color:#fff; font-size:8px; font-weight:800; }
.favorite-template-card>small { color:#a47e2e; font-size:9px; font-weight:800; }
.favorite-template-card>p { margin:7px 0 12px; color:#7c838f; font-size:10px; line-height:1.5; }
.favorite-template-card>div { display:flex; gap:7px; }

.storage-info-box { margin-top:14px; padding:12px 14px; border:1px solid #e1e4e9; border-radius:12px; background:#f8f9fb; }
.storage-info-box strong { display:block; font-size:10px; }
.storage-info-box p { margin:5px 0 0; color:#777e89; font-size:9px; line-height:1.5; }
.storage-info-box code { color:#9b7426; }
.favorite-storage-info { margin-bottom:18px; }

/* Theme categories */
.theme-category-tabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:9px; }
.theme-category-tab { flex:0 0 auto; min-height:31px; padding:0 11px; border:1px solid #dfe3e9; border-radius:999px; background:#fff; color:#747b87; font-size:9px; font-weight:750; }
.theme-category-tab.active { border-color:var(--brand-primary); background:var(--brand-primary); color:#fff; }
.theme-library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.theme-library-card { overflow:hidden; padding:9px; border:1px solid #e0e4e9; border-radius:14px; background:#fff; text-align:left; }
.theme-library-card.selected { border-color:var(--brand-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-accent) 16%,transparent); }
.theme-library-preview { position:relative; display:block; overflow:hidden; height:78px; border-radius:10px; background:linear-gradient(145deg,var(--theme-primary) 0 62%,var(--theme-accent) 62% 100%); }
.theme-library-preview i { position:absolute; left:10px; right:42%; bottom:24px; height:7px; background:var(--theme-surface); }
.theme-library-preview b { position:absolute; left:10px; right:56%; bottom:12px; height:5px; background:color-mix(in srgb,var(--theme-surface) 65%,transparent); }
.theme-library-preview em { position:absolute; right:10px; bottom:11px; width:30px; height:14px; border-radius:999px; background:var(--theme-accent); }
.theme-library-meta { display:block; padding:9px 2px 2px; }
.theme-library-meta small { color:#a77e26; font-size:8px; font-weight:850; }
.theme-library-meta strong { display:block; margin-top:3px; color:#25282e; font-size:11px; }
.theme-library-meta p { margin:5px 0 0; color:#838a95; font-size:8px; line-height:1.4; }

.benefit-card,.review-card,.number-card,.question-preview-item { border-radius:var(--theme-radius); }
body[data-shadow-mood="minimal"] .benefit-card,body[data-shadow-mood="minimal"] .review-card { box-shadow:none; }
body[data-shadow-mood="glow"] .benefit-card,body[data-shadow-mood="glow"] .review-card { box-shadow:0 16px 42px color-mix(in srgb,var(--brand-accent) 18%,transparent); }
body[data-shadow-mood="luxury"] .benefit-card,body[data-shadow-mood="luxury"] .review-card { box-shadow:0 20px 48px rgba(12,10,7,.14); }

@media(max-width:520px){ .theme-library-grid{grid-template-columns:1fr;} }


/* =========================================================
   JOINUP Sprint 4.2
   Lead Form + Public Preview Foundation
   ========================================================= */

.lead-form-section {
  padding: 0;
  background: #030706;
  color: #fff;
}

.lead-form-shell {
  min-height: 620px;
  padding: 44px 24px 34px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 34%),
    #030706;
}

.lead-form-intro {
  max-width: 520px;
  margin: 0 auto 32px;
  text-align: center;
}

.lead-form-intro h3 {
  margin: 10px 0 14px;
  color: var(--brand-accent);
  font-size: 24px;
  line-height: 1.32;
  letter-spacing: -.03em;
}

.lead-form-intro > p:last-child {
  margin: 0;
  color: color-mix(in srgb, var(--brand-accent) 72%, #fff);
  font-size: 10px;
  line-height: 1.65;
}

.lead-form-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.lead-form-progress:empty {
  display: none;
}

.lead-form-progress span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand-accent) 42%, transparent);
  border-radius: 50%;
  color: color-mix(in srgb, var(--brand-accent) 65%, transparent);
  font-size: 9px;
  font-weight: 800;
}

.lead-form-progress span.active,
.lead-form-progress span.complete {
  background: var(--brand-accent);
  color: var(--brand-primary);
}

#previewLeadForm {
  max-width: 560px;
  margin: 0 auto;
}

.lead-field {
  margin-bottom: 16px;
}

.lead-field > label {
  display: block;
  margin-bottom: 7px;
  color: var(--brand-accent);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
}

.lead-required {
  color: #ff514b;
}

.lead-field input,
.lead-field select,
.lead-field textarea {
  width: 100%;
  min-height: 49px;
  padding: 0 14px;
  border: 1px solid var(--brand-accent);
  border-radius: 10px;
  background: #fff;
  color: #25282e;
  font: inherit;
  font-size: 12px;
  box-sizing: border-box;
}

.lead-field textarea {
  min-height: 100px;
  padding-top: 13px;
  resize: vertical;
}

.lead-field small {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.58);
  font-size: 9px;
  line-height: 1.5;
}

.lead-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.lead-choice-grid:has(.lead-choice-button:nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lead-choice-button {
  min-height: 52px;
  padding: 8px;
  border: 1px solid var(--brand-accent);
  border-radius: 11px;
  background: transparent;
  color: var(--brand-accent);
  font-size: 12px;
  font-weight: 800;
}

.lead-choice-button.selected {
  background: color-mix(in srgb, var(--brand-accent) 78%, #fff);
  color: #fff;
}

.lead-agreement-list {
  display: grid;
  gap: 9px;
  margin-top: 22px;
}

.lead-agreement-item {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 9px;
}

.lead-agreement-item button {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 9px;
  text-decoration: underline;
}

.lead-form-actions {
  display: flex;
  justify-content: center;
  gap: 11px;
  margin-top: 30px;
}

.lead-form-actions button,
.lead-form-success button {
  min-width: 98px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.lead-back-button {
  background: #f1f1f2;
  color: #424750;
}

.lead-next-button,
.lead-submit-button,
.lead-form-success button {
  background: color-mix(in srgb, var(--brand-accent) 78%, #fff);
  color: #101411;
}

.lead-form-success {
  max-width: 520px;
  margin: 60px auto 0;
  text-align: center;
}

.lead-form-success[hidden] {
  display: none;
}

.lead-form-success > span {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-accent);
  color: var(--brand-primary);
  font-size: 26px;
  font-weight: 900;
}

.lead-form-success h3 {
  margin: 0 0 12px;
  color: var(--brand-accent);
  font-size: 25px;
}

.lead-form-success p {
  margin: 0 0 25px;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  line-height: 1.65;
}

.phone-frame.desktop .lead-form-shell {
  padding: 90px clamp(48px, 8vw, 120px);
}

.phone-frame.desktop .lead-form-intro h3 {
  font-size: 40px;
}

.phone-frame.desktop #previewLeadForm {
  max-width: 720px;
}

.phone-frame.desktop .lead-field > label {
  font-size: 14px;
}

.phone-frame.desktop .lead-field input,
.phone-frame.desktop .lead-field select,
.phone-frame.desktop .lead-field textarea {
  font-size: 15px;
}

/* Editor select consistency */
.repeater-card select {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  background: #fff;
}

/* Public preview cloned markup */
body > .landing-preview {
  min-height: 100vh;
}

@media (max-width: 520px) {
  .lead-choice-grid,
  .lead-choice-grid:has(.lead-choice-button:nth-child(3)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   JOINUP Sprint 4.2.2
   CTA Link
   ========================================================= */

#previewFooterButton[hidden] {
  display: none !important;
}

#previewFooterButton.has-link {
  cursor: pointer;
}

#previewFooterButton:not(.has-link) {
  cursor: default;
}

/* =========================================================
   JOINUP Sprint 4.2.3
   Benefit Layouts + Section White Mode
   ========================================================= */

/* Benefit layouts */
[data-preview-section][data-panel="benefits"][data-benefit-orientation="vertical"] .benefit-grid {
  grid-template-columns: 1fr !important;
  grid-auto-flow: row !important;
}

[data-preview-section][data-panel="benefits"][data-benefit-orientation="horizontal"] .benefit-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
}

[data-preview-section][data-panel="benefits"][data-benefit-orientation="grid"] .benefit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
}

.phone-frame:not(.desktop)
[data-preview-section][data-panel="benefits"][data-benefit-orientation="horizontal"] .benefit-grid {
  display: grid;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(78%, 1fr);
  grid-template-columns: none !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}

.phone-frame:not(.desktop)
[data-preview-section][data-panel="benefits"][data-benefit-orientation="horizontal"] .benefit-card {
  scroll-snap-align: start;
}

.phone-frame:not(.desktop)
[data-preview-section][data-panel="benefits"][data-benefit-orientation="grid"] .benefit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px;
}

.phone-frame:not(.desktop)
[data-preview-section][data-panel="benefits"][data-benefit-orientation="grid"] .benefit-card {
  min-width: 0;
  padding: 14px;
}

/* Editor background mode controls */
.section-appearance-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 18px;
  padding: 13px 14px;
  border: 1px solid #e0e4e9;
  border-radius: 13px;
  background: #f8f9fb;
}

.section-appearance-copy strong {
  display: block;
  font-size: 11px;
}

.section-appearance-copy small {
  display: block;
  margin-top: 4px;
  color: #828995;
  font-size: 9px;
  line-height: 1.45;
}

.option-group.compact {
  flex: 0 0 150px;
}

/* Generic white-mode */
[data-preview-section].section-white-mode,
.preview-hero.section-white-mode {
  background-color: #fff !important;
  color: #16191e !important;
}

/* Hero white-mode: image hidden and text colors changed */
.preview-hero.section-white-mode {
  background-image: none !important;
}

.preview-hero.section-white-mode .hero-overlay {
  background: transparent !important;
}

.preview-hero.section-white-mode .preview-brand,
.preview-hero.section-white-mode .preview-eyebrow,
.preview-hero.section-white-mode .preview-hero-content h2,
.preview-hero.section-white-mode .preview-hero-content p,
.preview-hero.section-white-mode .preview-badge {
  color: #16191e !important;
}

.preview-hero.section-white-mode .preview-brand,
.preview-hero.section-white-mode .preview-badge {
  border-color: rgba(22, 25, 30, .22) !important;
  background: rgba(22, 25, 30, .04) !important;
}

.preview-hero.section-white-mode .preview-hero-content button {
  background: var(--brand-primary) !important;
  color: #fff !important;
}

/* Shared text colors */
[data-preview-section].section-white-mode .section-kicker,
[data-preview-section].section-white-mode .cta-eyebrow {
  color: var(--brand-accent) !important;
}

[data-preview-section].section-white-mode h3,
[data-preview-section].section-white-mode strong,
[data-preview-section].section-white-mode .cta-description,
[data-preview-section].section-white-mode p {
  color: #16191e;
}

/* Benefits */
[data-panel="benefits"].section-white-mode .benefit-card {
  background: #fff !important;
  border-color: #e0e4e9 !important;
  color: #16191e !important;
  box-shadow: 0 14px 34px rgba(16, 22, 30, .08);
}

[data-panel="benefits"].section-white-mode .benefit-card p {
  color: #68707c !important;
}

[data-panel="benefits"].section-white-mode .benefit-card > span {
  background: color-mix(in srgb, var(--brand-accent) 12%, #fff) !important;
  color: var(--brand-primary) !important;
}

/* Reviews */
[data-panel="reviews"].section-white-mode .review-card {
  background: #fff !important;
  border-color: #e0e4e9 !important;
}

[data-panel="reviews"].section-white-mode .review-card p,
[data-panel="reviews"].section-white-mode .review-card div span {
  color: #68707c !important;
}

/* Numbers */
[data-panel="numbers"].section-white-mode .number-card {
  background: #fff !important;
  border-color: #e0e4e9 !important;
}

[data-panel="numbers"].section-white-mode .number-card strong {
  color: var(--brand-primary) !important;
}

[data-panel="numbers"].section-white-mode .number-card span {
  color: #68707c !important;
}

/* Company */
[data-panel="company"].section-white-mode .company-copy > p:last-child {
  color: #68707c !important;
}

/* FAQ */
[data-panel="faq"].section-white-mode .faq-item {
  border-color: #e0e4e9 !important;
}

[data-panel="faq"].section-white-mode .faq-item p {
  color: #68707c !important;
}

/* Lead form */
[data-panel="questions"].section-white-mode .lead-form-shell {
  background: #fff !important;
  color: #16191e !important;
}

[data-panel="questions"].section-white-mode .lead-form-intro h3,
[data-panel="questions"].section-white-mode .lead-field > label {
  color: var(--brand-primary) !important;
}

[data-panel="questions"].section-white-mode .lead-form-intro > p:last-child,
[data-panel="questions"].section-white-mode .lead-field small {
  color: #68707c !important;
}

[data-panel="questions"].section-white-mode .lead-choice-button {
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

[data-panel="questions"].section-white-mode .lead-choice-button.selected,
[data-panel="questions"].section-white-mode .lead-next-button,
[data-panel="questions"].section-white-mode .lead-submit-button {
  background: var(--brand-primary) !important;
  color: #fff !important;
}

[data-panel="questions"].section-white-mode .lead-agreement-item,
[data-panel="questions"].section-white-mode .lead-agreement-item button {
  color: #16191e !important;
}

/* CTA */
[data-panel="cta"].section-white-mode {
  background-image: none !important;
  background: #fff !important;
  color: #16191e !important;
}

[data-panel="cta"].section-white-mode h3 {
  color: #16191e !important;
}

[data-panel="cta"].section-white-mode .cta-description {
  color: #68707c !important;
}

[data-panel="cta"].section-white-mode button {
  background: var(--brand-primary) !important;
  color: #fff !important;
}

@media (max-width: 560px) {
  .section-appearance-control {
    align-items: stretch;
    flex-direction: column;
  }

  .option-group.compact {
    flex-basis: auto;
    width: 100%;
  }
}

/* =========================================================
   JOINUP Sprint 4.2.4
   Unified Theme Background + Save/Load + Public Preview
   ========================================================= */

/* Theme mode must be consistent for all content sections */
[data-preview-section].section-theme-mode:not(.preview-hero) {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}

[data-preview-section].section-theme-mode:not(.preview-hero) > .section-kicker,
[data-preview-section].section-theme-mode:not(.preview-hero) .section-kicker,
[data-preview-section].section-theme-mode:not(.preview-hero) .cta-eyebrow {
  color: var(--brand-accent) !important;
}

[data-preview-section].section-theme-mode:not(.preview-hero) > h3,
[data-preview-section].section-theme-mode:not(.preview-hero) h3,
[data-preview-section].section-theme-mode:not(.preview-hero) strong {
  color: #fff !important;
}

[data-preview-section].section-theme-mode:not(.preview-hero) p,
[data-preview-section].section-theme-mode:not(.preview-hero) span {
  color: rgba(255, 255, 255, .68);
}

/* Reviews theme mode */
[data-panel="reviews"].section-theme-mode .review-card {
  background: color-mix(in srgb, var(--brand-primary) 82%, #fff 8%) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #fff !important;
  box-shadow: none;
}

[data-panel="reviews"].section-theme-mode .review-card p {
  color: rgba(255,255,255,.72) !important;
}

[data-panel="reviews"].section-theme-mode .review-card div strong {
  color: #fff !important;
}

[data-panel="reviews"].section-theme-mode .review-card div span {
  color: rgba(255,255,255,.5) !important;
}

/* Company theme mode */
[data-panel="company"].section-theme-mode .company-copy h3 {
  color: #fff !important;
}

[data-panel="company"].section-theme-mode .company-copy > p:last-child {
  color: rgba(255,255,255,.7) !important;
}

/* FAQ theme mode */
[data-panel="faq"].section-theme-mode .faq-item {
  border-color: rgba(255,255,255,.16) !important;
}

[data-panel="faq"].section-theme-mode .faq-item strong {
  color: #fff !important;
}

[data-panel="faq"].section-theme-mode .faq-item p {
  color: rgba(255,255,255,.62) !important;
}

/* Numbers theme mode */
[data-panel="numbers"].section-theme-mode .number-card {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.14) !important;
}

[data-panel="numbers"].section-theme-mode .number-card strong {
  color: var(--brand-accent) !important;
}

/* Support form theme mode */
[data-panel="questions"].section-theme-mode .lead-form-shell {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand-accent) 10%, transparent), transparent 34%),
    var(--brand-primary) !important;
}

/* CTA theme mode */
[data-panel="cta"].section-theme-mode {
  background-color: var(--brand-primary) !important;
}

/* Saved page UI */
.saved-project-empty {
  display: grid;
  min-height: 250px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed #d9dde4;
  border-radius: 16px;
  color: #848b96;
  text-align: center;
}

.saved-project-empty[hidden] {
  display: none;
}

.saved-project-empty > span {
  font-size: 30px;
  color: #c49a3c;
}

.saved-project-empty strong {
  color: #25282e;
  font-size: 13px;
}

.saved-project-empty p {
  margin: 0;
  font-size: 10px;
}

.saved-project-list {
  display: grid;
  gap: 11px;
  margin-top: 16px;
}

.saved-project-card {
  padding: 15px;
  border: 1px solid #dfe3e9;
  border-radius: 14px;
  background: #fff;
}

.saved-project-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.saved-project-card-head small {
  display: block;
  color: #a17b28;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.saved-project-card-head strong {
  display: block;
  margin-top: 4px;
  color: #23262c;
  font-size: 13px;
}

.saved-project-card-head > span {
  color: #959ba5;
  font-size: 8px;
  text-align: right;
}

.saved-project-card > p {
  margin: 9px 0 12px;
  color: #737a85;
  font-size: 10px;
}

.saved-project-actions {
  display: flex;
  gap: 7px;
}

/* Public page safety */
body > .landing-preview {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* =========================================================
   JOINUP Sprint 4.2.5
   Hero Link + Section Duplication
   ========================================================= */

#previewHeroButton.has-link,
.preview-hero-button-copy.has-link {
  cursor: pointer;
}

#previewHeroButton:not(.has-link),
.preview-hero-button-copy:not(.has-link) {
  cursor: default;
}

.section-manager-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.section-copy-button,
.section-delete-button {
  display: inline-grid;
  width: 27px;
  height: 27px;
  place-items: center;
  padding: 0;
  border: 1px solid #dde2e8;
  border-radius: 8px;
  background: #fff;
  color: #737b87;
  font-size: 14px;
  cursor: pointer;
}

.section-copy-button:hover {
  border-color: var(--brand-accent);
  color: #8a6418;
  background: color-mix(in srgb, var(--brand-accent) 10%, #fff);
}

.section-delete-button:hover:not(:disabled) {
  border-color: #e5b8bc;
  color: #b63d47;
  background: #fff6f7;
}

.section-delete-button:disabled {
  opacity: .28;
  cursor: default;
}

.section-manager-row {
  gap: 7px;
}

.section-manager-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-section-copy="true"] {
  position: relative;
}

/*
  복사 섹션은 현재 단계에서 원본과 콘텐츠/디자인이 연결된 복사본입니다.
  따라서 원본 편집 시 복사본도 함께 변경됩니다.
*/

/* =========================================================
   JOINUP Sprint 4.2.6
   Live Preview Synchronization
   ========================================================= */

#landingPreview[data-preview-updated-at] {
  contain: layout paint style;
}

.preview-stage.is-syncing::after {
  content: "최신 내용 반영 중";
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(17, 20, 25, .82);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

/* =========================================================
   JOINUP Sprint 4.2.9.1
   AI Retouch Safe Restore
   ========================================================= */

.sidebar-bottom {
  display: grid;
  gap: 8px;
}

/*
  안전 복구 원칙:
  - 미리보기 스크롤 유지
  - Hero/섹션 이미지 유지
  - 텍스트·카드·버튼·레이아웃 변경 금지
*/
.landing-preview,
.landing-preview.ai-design-retouch,
.landing-preview.background-harmony-enabled {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}

.landing-preview.ai-design-retouch [data-preview-section],
.landing-preview.background-harmony-enabled [data-preview-section] {
  position: relative;
}

.harmony-card {
  cursor: pointer;
}

.harmony-card .ai-icon {
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.95), transparent 23%),
    linear-gradient(145deg, var(--brand-accent), var(--brand-primary));
}

.harmony-card.active {
  border-color: inherit;
  box-shadow: none;
}

.retouch-progress-overlay {
  display: none !important;
}

/* =========================================================
   JOINUP v4.3.1 — Premium Emerald Default
   New-project visual baseline + image-size guide
   ========================================================= */

.image-size-guide {
  display: block;
  margin-top: 10px !important;
  padding: 11px 12px;
  border: 1px solid #dfe4e8;
  border-radius: 10px;
  background: #f7f9fa;
  color: #747c86 !important;
  font-size: 10px !important;
  line-height: 1.65 !important;
}

.image-size-guide strong {
  display: block;
  margin-bottom: 2px;
  color: #252a31;
  font-size: 10px;
}

/* Dark emerald defaults are driven by the state color variables. */
.landing-preview {
  --joinup-default-emerald: #27d9a5;
}

.landing-preview [data-preview-section].section-theme-mode:not(.preview-hero) {
  border-color: rgba(39, 217, 165, .10);
}

.landing-preview [data-preview-section].section-theme-mode:not(.preview-hero) .section-kicker::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  margin-right: 9px;
  vertical-align: middle;
  border-radius: 999px;
  background: var(--brand-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand-accent) 55%, transparent);
}

.landing-preview .tpl-benefit-dark-stack .benefit-card,
.landing-preview .review-card,
.landing-preview .question-preview-item,
.landing-preview .lead-form-shell {
  border-color: color-mix(in srgb, var(--brand-accent) 14%, transparent);
}


/* =========================================================
   JOINUP v4.4.0 Lead Management
   ========================================================= */
.lead-manager-heading { align-items: center; }
.lead-manager-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:16px; }
.lead-manager-stats > div { padding:13px; border:1px solid #e1e5ea; border-radius:13px; background:#fafbfc; }
.lead-manager-stats span { display:block; color:#7a818d; font-size:10px; }
.lead-manager-stats strong { display:block; margin-top:5px; font-size:22px; }
.lead-manager-tools { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:15px; }
.lead-manager-tools input, .lead-manager-tools select { width:100%; min-height:39px; border:1px solid #dfe3e8; border-radius:10px; padding:8px 10px; background:#fff; color:#17191d; font-size:11px; }
.lead-manager-tools input { grid-column:1 / -1; }
.lead-manager-list { display:grid; gap:11px; }
.lead-manager-card { padding:15px; border:1px solid #dfe3e8; border-radius:15px; background:#fff; box-shadow:0 8px 24px rgba(20,24,32,.05); }
.lead-manager-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.lead-manager-card-head > div { min-width:0; }
.lead-manager-name { display:block; margin:8px 0 4px; font-size:15px; }
.lead-manager-card-head small { display:block; overflow:hidden; color:#747b86; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.lead-manager-card-head time { flex:0 0 auto; color:#9aa0aa; font-size:9px; }
.lead-status-badge { display:inline-flex; padding:4px 7px; border-radius:999px; font-size:8px; font-weight:800; }
.lead-status-badge.new { background:#dcf8ec; color:#07825c; }
.lead-status-badge.checked { background:#e8f0ff; color:#315fbd; }
.lead-status-badge.contacted { background:#eee9ff; color:#6946c7; }
.lead-status-badge.hold { background:#f1f2f4; color:#747b86; }
.lead-manager-answers { display:grid; gap:7px; margin:14px 0; padding:12px; border-radius:11px; background:#f7f8fa; }
.lead-manager-answers > div { display:grid; grid-template-columns:minmax(90px, .75fr) 1.25fr; gap:9px; font-size:10px; line-height:1.45; }
.lead-manager-answers span { color:#838995; }
.lead-manager-answers strong { color:#252930; font-weight:650; overflow-wrap:anywhere; }
.lead-manager-card-actions { display:flex; justify-content:flex-end; align-items:center; gap:8px; }
.lead-manager-card-actions select { min-height:34px; border:1px solid #dfe3e8; border-radius:9px; padding:6px 9px; background:#fff; color:#30343b; font-size:10px; }
.lead-manager-card-actions a { text-decoration:none; }
.lead-manager-empty, .lead-manager-loading, .lead-manager-error { min-height:180px; display:grid; place-items:center; align-content:center; gap:6px; border:1px dashed #d8dde3; border-radius:15px; background:#fafbfc; color:#858c97; text-align:center; font-size:11px; }
.lead-manager-empty span { font-size:25px; }
.lead-manager-empty strong { color:#3a3f47; }
.lead-manager-empty p { margin:0; }
@media(max-width:520px){ .lead-manager-stats{grid-template-columns:1fr}.lead-manager-tools{grid-template-columns:1fr}.lead-manager-tools input{grid-column:auto}.lead-manager-card-head{flex-direction:column}.lead-manager-card-actions{justify-content:flex-start;flex-wrap:wrap} }


/* =========================================================
   JOINUP v4.5.0 Multi Project Manager
   ========================================================= */
.project-dashboard-heading { margin-bottom: 16px; }
.project-dashboard-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:14px; }
.project-dashboard-stats>div { padding:14px; border:1px solid #e0e4e9; border-radius:14px; background:#fafbfc; }
.project-dashboard-stats span { display:block; color:#8a909b; font-size:10px; }
.project-dashboard-stats strong { display:block; margin-top:7px; font-size:22px; }
.project-dashboard-tools { display:grid; grid-template-columns:1fr auto; gap:8px; margin-bottom:14px; }
.project-dashboard-tools input { min-width:0; border:1px solid #dfe3e8; border-radius:10px; padding:10px 12px; }
.project-dashboard-list { display:grid; gap:11px; }
.project-dashboard-card { padding:15px; border:1px solid #e0e4e9; border-radius:15px; background:#fff; box-shadow:0 10px 24px rgba(16,24,40,.04); }
.project-dashboard-card.active { border-color:var(--brand-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-accent) 14%,transparent); }
.project-dashboard-card-head { display:flex; justify-content:space-between; gap:12px; }
.project-dashboard-card-head>div { display:grid; gap:4px; min-width:0; }
.project-dashboard-card-head strong { font-size:14px; }
.project-dashboard-card-head small,.project-dashboard-card-head time { color:#8c929c; font-size:9px; }
.project-status { width:max-content; padding:4px 7px; border-radius:999px; font-size:8px; font-weight:800; }
.project-status.published { background:#e2f8ef; color:#11835f; }
.project-status.draft { background:#edf0f4; color:#6d7480; }
.project-public-path { margin:12px 0 8px; color:#6e7580; font-size:10px; }
.project-card-metrics { padding:9px 0; border-top:1px solid #edf0f3; color:#777e88; font-size:10px; }
.project-card-metrics strong { color:#17191d; }
.project-dashboard-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.project-dashboard-actions .danger { color:#b44848; }
.project-dashboard-empty { min-height:150px; display:grid; place-items:center; align-content:center; gap:6px; border:1px dashed #d8dce2; border-radius:15px; color:#9298a2; text-align:center; }
.project-dashboard-empty[hidden] { display:none; }
.project-dashboard-empty strong { color:#4d535d; font-size:12px; }
.project-dashboard-empty p { margin:0; font-size:10px; }
@media(max-width:520px){.project-dashboard-stats{grid-template-columns:1fr}.project-dashboard-tools{grid-template-columns:1fr}}


/* =========================================================
   JOINUP v4.5.1
   Campaign visibility + mobile readability + ad inquiry
   ========================================================= */

.campaign-setting-heading { margin-top: 26px; }
.campaign-visibility-field { margin-bottom: 14px; }

.project-campaign-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 11px 0 4px;
  padding: 11px 12px;
  border: 1px solid #e8ebef;
  border-radius: 11px;
  background: #fafbfc;
}
.project-campaign-row > div { min-width: 0; }
.project-campaign-row span { display:block; color:#8b929d; font-size:9px; }
.project-campaign-row strong { display:block; margin-top:4px; color:#30353d; font-size:10px; }
.project-visibility-switch { position:relative; flex:0 0 auto; width:42px; height:24px; }
.project-visibility-switch input { position:absolute; opacity:0; }
.project-visibility-switch > span { position:absolute; inset:0; border-radius:999px; background:#d7dbe2; transition:.18s ease; cursor:pointer; }
.project-visibility-switch > span::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.16); transition:.18s ease; }
.project-visibility-switch input:checked + span { background:#19a979; }
.project-visibility-switch input:checked + span::after { transform:translateX(18px); }
.project-card-metrics { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.campaign-state { padding:4px 7px; border-radius:999px; font-size:8px; font-weight:800; }
.campaign-state.active { background:#def8ed; color:#0b805a; }
.campaign-state.scheduled { background:#e8f0ff; color:#315fbd; }
.campaign-state.expired,.campaign-state.off { background:#f0f1f3; color:#777e88; }

/* Mobile-first readability: large titles remain unchanged. */
.landing-preview .preview-hero-content > p:not(.preview-eyebrow) { font-size:14px; line-height:1.72; }
.landing-preview .section-kicker,
.landing-preview .cta-eyebrow { font-size:10px; }
.landing-preview .benefit-card strong { font-size:18px; line-height:1.35; }
.landing-preview .benefit-card p { font-size:13px; line-height:1.7; }
.landing-preview .number-card span { font-size:11px; line-height:1.55; }
.landing-preview .company-copy > p:last-child { font-size:14px; line-height:1.78; }
.landing-preview .review-card > p { font-size:14px; line-height:1.75; }
.landing-preview .review-card div { font-size:11px; }
.landing-preview .faq-item strong { font-size:15px; line-height:1.5; }
.landing-preview .faq-item p { font-size:13px; line-height:1.72; }
.landing-preview .lead-form-intro > p:last-child { font-size:12px; line-height:1.7; }
.landing-preview .lead-field > label { font-size:13px; line-height:1.5; }
.landing-preview .lead-field input,
.landing-preview .lead-field textarea,
.landing-preview .lead-field select,
.landing-preview .lead-choice-button { font-size:14px; }
.landing-preview .lead-field small,
.landing-preview .lead-agreement-item { font-size:11px; line-height:1.55; }
.landing-preview .cta-description { font-size:13px; line-height:1.72; }

.joinup-ad-inquiry {
  padding: 54px 24px 62px;
  border-top: 1px solid color-mix(in srgb, var(--brand-accent) 18%, transparent);
  background:
    radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 42%),
    #05090d;
  color: #f5f7f8;
  text-align: center;
}
.joinup-ad-brand { display:inline-block; color:var(--brand-accent); font-size:10px; font-weight:900; letter-spacing:.18em; }
.joinup-ad-inquiry p { margin:13px 0 8px; color:#aab6b0; font-size:13px; line-height:1.6; }
.joinup-ad-inquiry h3 { margin:0 auto 24px; max-width:18ch; font-size:24px; line-height:1.25; letter-spacing:-.035em; }
.joinup-ad-inquiry a { display:inline-flex; min-height:46px; align-items:center; justify-content:center; padding:0 22px; border-radius:13px; background:var(--brand-accent); color:#06100d; font-size:13px; font-weight:850; text-decoration:none; box-shadow:0 14px 34px color-mix(in srgb,var(--brand-accent) 25%,transparent); }
.joinup-ad-inquiry small { display:block; margin-top:16px; color:#6e7a75; font-size:9px; letter-spacing:.08em; }

.phone-frame.desktop .joinup-ad-inquiry { padding:82px 60px 88px; }
.phone-frame.desktop .joinup-ad-inquiry h3 { font-size:38px; max-width:24ch; }
.phone-frame.desktop .joinup-ad-inquiry p { font-size:15px; }

@media (max-width: 520px) {
  .project-campaign-row { align-items:flex-start; }
  .landing-preview .preview-section { padding-left:26px; padding-right:26px; }
}


/* =========================================================
   JOINUP v4.5.2 — Inquiry section editor + ordering
   ========================================================= */
[data-preview-section][data-panel="inquiry"].preview-section-selected {
  outline-color: var(--brand-accent) !important;
}
.joinup-ad-inquiry.section-is-hidden,
.joinup-ad-inquiry[hidden] {
  display: none !important;
}
[data-editor="inquiry"] .toggle-field {
  margin-bottom: 20px;
}


/* =========================================================
   JOINUP v4.6.1 — Saved page campaign controls
   ========================================================= */
.saved-project-date-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:0 0 12px;
}
.saved-project-date-grid > div {
  padding:9px 10px;
  border:1px solid #e5e8ed;
  border-radius:10px;
  background:#f8f9fb;
}
.saved-project-date-grid span,
.saved-project-period-grid span {
  display:block;
  color:#9096a0;
  font-size:8px;
  font-weight:700;
}
.saved-project-date-grid strong {
  display:block;
  margin-top:4px;
  color:#313640;
  font-size:9px;
  line-height:1.45;
}
.saved-project-campaign {
  margin:0 0 12px;
  padding:12px;
  border:1px solid #dfe4e9;
  border-radius:12px;
  background:#fbfcfd;
}
.saved-project-campaign-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:11px;
}
.saved-project-campaign-head strong { display:block; font-size:11px; }
.saved-project-campaign-head small { display:block; margin-top:3px; color:#8c929d; font-size:8px; }
.saved-project-period-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.saved-project-period-grid label { display:block; }
.saved-project-period-grid input {
  width:100%;
  margin-top:5px;
  padding:9px 8px;
  border:1px solid #dfe3e8;
  border-radius:9px;
  background:#fff;
  color:#30353d;
  font-size:10px;
}
.saved-campaign-save { width:100%; margin-top:9px; }
.saved-project-actions { flex-wrap:wrap; }


/* =========================================================
   JOINUP v4.6.4
   Project period / Saved visibility separation
   Landing typography +2px
   ========================================================= */
.project-campaign-editor {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafbfc;
}
.project-campaign-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}
.project-campaign-editor-head span,
.project-period-grid span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-bottom: 4px;
}
.project-campaign-editor-head strong { font-size: 12px; }
.project-period-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.project-period-grid label { min-width: 0; }
.project-period-grid input {
  width: 100%;
  border: 1px solid #dfe2e7;
  border-radius: 9px;
  padding: 9px 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 11px;
}
.project-period-save { width: 100%; margin-top: 9px; }
.saved-project-visibility-only { padding-bottom: 14px; }

/* 상세페이지 실제 표시 글씨: 기존 대비 약 2px 확대 */
.landing-preview .preview-brand { font-size: 14px; }
.landing-preview .preview-badge { font-size: 11px; }
.landing-preview .preview-eyebrow { font-size: 12px; }
.landing-preview .preview-hero h2 { font-size: 33px; }
.landing-preview .preview-hero-content > p:not(.preview-eyebrow) { font-size: 14px; }
.landing-preview .preview-hero button,
.landing-preview .preview-footer-cta button { font-size: 13px; }
.landing-preview .section-kicker { font-size: 11px; }
.landing-preview .preview-section h3 { font-size: 24px; }
.landing-preview .benefit-card span { font-size: 14px; }
.landing-preview .benefit-card strong { font-size: 15px; }
.landing-preview .benefit-card p { font-size: 12px; }
.landing-preview .faq-item strong { font-size: 14px; }
.landing-preview .faq-item p { font-size: 12px; }
.landing-preview .preview-footer-cta p { font-size: 12px; }
.landing-preview .preview-footer-cta h3 { font-size: 23px; }
.landing-preview .number-card strong,
.landing-preview .number-item strong { font-size: calc(1em + 2px); }
.landing-preview .number-card span,
.landing-preview .number-item span,
.landing-preview .review-card p,
.landing-preview .review-card strong,
.landing-preview .review-card small,
.landing-preview .company-copy p,
.landing-preview .lead-form-shell,
.landing-preview .joinup-ad-inquiry { font-size: calc(1em + 2px); }

@media (max-width: 520px) {
  .project-period-grid { grid-template-columns: 1fr; }
}


/* v4.7.0 project-specific Kakao routing */
.notification-routing-box{display:grid;gap:16px;padding:18px;border:1px solid rgba(39,217,165,.2);border-radius:18px;background:rgba(39,217,165,.045)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.toggle-row span{display:grid;gap:3px}.toggle-row small{color:var(--muted,#7c8792)}
.notification-routing-note{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);font-size:12px;line-height:1.6;color:#8fa49c}
.kakao-recipient-list{display:grid;gap:12px}.kakao-recipient-card{display:grid;gap:12px;padding:14px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(0,0,0,.18)}
.kakao-recipient-card-head{display:flex;justify-content:space-between;align-items:center}.kakao-recipient-card-head span{padding:3px 8px;border-radius:999px;background:#27d9a5;color:#06110d;font-size:11px;font-weight:800}
.kakao-recipient-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:10px}.kakao-recipient-grid label{display:grid;gap:6px}.kakao-recipient-grid span{font-size:12px;color:#91a099}
.kakao-recipient-options,.notification-routing-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.kakao-recipient-options label{display:flex;align-items:center;gap:6px;font-size:12px}.notification-routing-actions{justify-content:flex-end}
@media(max-width:680px){.kakao-recipient-grid{grid-template-columns:1fr}.notification-routing-actions>*{flex:1}}

/* =========================================================
   JOINUP v4.7.1 — Saved project information hierarchy
   ========================================================= */
.saved-project-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 8px;
  margin: 0 0 12px;
}
.saved-project-summary-item {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #e5e8ed;
  border-radius: 10px;
  background: #f8f9fb;
}
.saved-project-summary-item > span {
  display: block;
  margin-bottom: 5px;
  color: #9096a0;
  font-size: 8px;
  font-weight: 800;
}
.saved-project-summary-item > strong {
  display: block;
  color: #313640;
  font-size: 9px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.saved-project-manager {
  grid-column: 1 / -1;
  background: #fffdf7;
  border-color: #eadfbf;
}
.saved-project-manager > strong:first-of-type {
  color: #9b7726;
}
@media (max-width: 560px) {
  .saved-project-summary-grid { grid-template-columns: 1fr; }
  .saved-project-manager { grid-column: auto; }
}


/* JOINUP v5.0 Sprint 5.0-01: ad-centric Studio + Telegram */
.telegram-routing-box{border-color:rgba(77,166,255,.24);background:rgba(77,166,255,.05)}
.telegram-register-row{display:grid;grid-template-columns:1fr auto;gap:10px}
.telegram-register-row input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;letter-spacing:.08em}
.telegram-connection-status{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center;padding:13px 14px;border-radius:13px;background:rgba(255,184,77,.08);border:1px solid rgba(255,184,77,.18)}
.telegram-connection-status .status-dot{grid-row:1/3;width:9px;height:9px;border-radius:50%;background:#ffb84d;box-shadow:0 0 0 5px rgba(255,184,77,.08)}
.telegram-connection-status strong{font-size:13px}.telegram-connection-status small{color:#8fa49c}
.telegram-connection-status.connected{background:rgba(39,217,165,.07);border-color:rgba(39,217,165,.2)}
.telegram-connection-status.connected .status-dot{background:#27d9a5;box-shadow:0 0 0 5px rgba(39,217,165,.08)}
.project-dashboard-card .project-dashboard-actions{justify-content:flex-start}
@media(max-width:680px){.telegram-register-row{grid-template-columns:1fr}.telegram-register-row button{width:100%}}


/* =========================================================
   JOINUP v5.0 Sprint 5.0-02 — compact ad cards
   ========================================================= */
.brand-wrap { gap: 11px; }
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: 16px;
}
.brand-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1;
}
.brand-sub {
  margin-top: 4px;
  font-size: 11px;
}
#createNewProjectBtn {
  min-width: 104px;
  height: 46px;
  padding: 0 15px;
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.project-dashboard-card {
  padding: 0;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.project-dashboard-card-toggle {
  width: 100%;
  min-height: 78px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 11px;
  padding: 14px 15px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.project-dashboard-card-toggle:hover { background: #fafbfc; }
.project-card-chevron {
  display: grid;
  place-items: center;
  color: #7d8490;
  font-size: 17px;
  transform: rotate(-90deg);
  transition: transform .18s ease;
}
.project-dashboard-card:not(.is-collapsed) .project-card-chevron { transform: rotate(0deg); }
.project-card-primary { min-width: 0; display: grid; gap: 5px; }
.project-card-title-row { min-width: 0; display: flex; align-items: center; gap: 8px; }
.project-card-title-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.project-card-primary > small { color: #8c929c; font-size: 9px; }
.project-card-summary { display: flex; align-items: center; gap: 13px; color: #777e88; font-size: 10px; white-space: nowrap; }
.project-card-summary strong { color: #17191d; }
.project-dashboard-card-toggle time { color: #8c929c; font-size: 9px; white-space: nowrap; }
.project-dashboard-card-body {
  max-height: 680px;
  padding: 0 15px 15px;
  border-top: 1px solid #edf0f3;
  opacity: 1;
  overflow: hidden;
  transition: max-height .24s ease, opacity .18s ease, padding .24s ease, border-color .24s ease;
}
.project-dashboard-card.is-collapsed .project-dashboard-card-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-color: transparent;
  opacity: 0;
  pointer-events: none;
}
.project-dashboard-card-body .project-public-path { margin-top: 13px; }
.project-dashboard-card-body .project-campaign-editor { margin: 12px 0; }
.project-dashboard-actions { gap: 7px; }
.project-action-public { border-color: #c9dafd; color: #245bc4; background: #f5f8ff; }
.project-action-copy { background: #f7f8fa; }
.project-action-leads { color: #167a51; background: #f1fbf7; }
.project-action-close { color: #c53c3c; background: #fff6f6; }
@media (max-width: 760px) {
  .project-dashboard-card-toggle { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .project-card-summary { grid-column: 2 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .project-dashboard-card-toggle time { grid-column: 3; grid-row: 1; }
}


/* JOINUP v5.0 Sprint 5.0-03 — hard collapse and action stability */
#createNewProjectBtn {
  min-width: 118px !important;
  width: 118px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  writing-mode: horizontal-tb !important;
}
.project-dashboard-card.is-collapsed .project-dashboard-card-body {
  display: none !important;
}
.project-dashboard-card:not(.is-collapsed) .project-dashboard-card-body {
  display: block !important;
}


/* =========================================================
   JOINUP v5.0 Sprint 5.0-04 — selection and saved-list accordion
   ========================================================= */
.saved-project-card { padding: 0; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.saved-project-card.is-exposure-active { border-color: #62d6a0; background: #fbfffd; box-shadow: 0 0 0 2px rgba(39, 217, 165, .08); }
.saved-project-card-head { width: 100%; min-height: 74px; padding: 14px 15px; border: 0; background: transparent; display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 10px; text-align: left; cursor: pointer; }
.saved-project-card-head:hover { background: #fafcfb; }
.saved-project-chevron { display:grid; place-items:center; color:#7d8490; font-size:17px; transform:rotate(-90deg); transition:transform .18s ease; }
.saved-project-card:not(.is-collapsed) .saved-project-chevron { transform:rotate(0deg); }
.saved-project-title { min-width:0; display:grid; gap:3px; }
.saved-project-title small { color:#a17b28; font-size:8px; font-weight:800; text-transform:uppercase; }
.saved-project-title strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#23262c; font-size:13px; }
.saved-project-title em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#8a919c; font-size:9px; font-style:normal; }
.saved-project-exposure { padding:5px 8px; border-radius:999px; font-size:9px; font-weight:800; white-space:nowrap; }
.saved-project-exposure.active { color:#0b805a; background:#def8ed; }
.saved-project-exposure.inactive { color:#7d8490; background:#f0f2f5; }
.saved-project-card-body { padding: 0 15px 15px; border-top:1px solid #edf0f3; }
.saved-project-card.is-collapsed .saved-project-card-body { display:none !important; }
.saved-project-card:not(.is-collapsed) .saved-project-card-body { display:block !important; }
.saved-project-card-body .saved-project-summary-grid { margin-top:12px; }
.project-dashboard-card.is-exposure-active { border-color:#62d6a0; }
.project-dashboard-card.is-selected-project,
.project-dashboard-card.is-ui-selected { border-color:#27d9a5 !important; background:#f7fffb; box-shadow:0 0 0 3px rgba(39,217,165,.13) !important; }
.project-dashboard-card.is-selected-project .project-dashboard-card-toggle,
.project-dashboard-card.is-ui-selected .project-dashboard-card-toggle { background:#f7fffb; }

.saved-project-card-head { font: inherit; }
.saved-project-card-head > .saved-project-title { text-align:left; color:inherit; font-size:inherit; }


/* =========================================================
   JOINUP v5.0 Sprint 5.0-05 — editing/exposure state contrast
   ========================================================= */
.project-dashboard-card {
  border-width: 2px;
  background: #ffffff;
}
.project-dashboard-card.is-exposure-active {
  border-color: #16a34a !important;
  background: #ecfdf3;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .14);
}
.project-dashboard-card.is-exposure-active .project-dashboard-card-toggle {
  background: #ecfdf3;
}
.project-dashboard-card.is-selected-project,
.project-dashboard-card.is-ui-selected {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .18) !important;
}
.project-dashboard-card.is-selected-project .project-dashboard-card-toggle,
.project-dashboard-card.is-ui-selected .project-dashboard-card-toggle {
  background: #eff6ff !important;
}
.project-dashboard-card.is-selected-project.is-exposure-active,
.project-dashboard-card.is-ui-selected.is-exposure-active {
  border-color: #2563eb !important;
  background: linear-gradient(90deg, #eff6ff 0%, #eff6ff 76%, #ecfdf3 100%) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .18) !important;
}
.project-editing-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.project-dashboard-card.is-selected-project .project-card-chevron,
.project-dashboard-card.is-ui-selected .project-card-chevron { color: #2563eb; font-weight: 900; }
.project-dashboard-card.is-exposure-active:not(.is-selected-project):not(.is-ui-selected) .project-card-chevron { color: #15803d; font-weight: 900; }
.project-dashboard-card.is-selected-project .campaign-state.active,
.project-dashboard-card.is-ui-selected .campaign-state.active {
  outline: 2px solid #22c55e;
  outline-offset: 1px;
}


/* Sprint 5.0-07: 광고목록/편집 역할 분리 */
.project-editor-heading{align-items:flex-start;margin-bottom:18px}
.project-editor-heading #saveCurrentProjectBtn{min-width:132px;white-space:nowrap}
.current-project-context{display:grid;gap:5px;padding:14px 16px;margin-bottom:22px;border:2px solid #2563eb;border-radius:15px;background:#eff6ff;box-shadow:0 5px 18px rgba(37,99,235,.10)}
.current-project-context span{font-size:11px;font-weight:800;color:#2563eb;letter-spacing:.04em}
.current-project-context strong{font-size:16px;color:#102a56}
.current-project-context small{font-size:12px;color:#607594}
.compact-heading{margin-top:22px}
.telegram-routing-compact{gap:13px;padding:16px;background:#f7faff;border:1.5px solid #bfd7ff}
.telegram-routing-compact .field-group{gap:7px}
.telegram-manager-field{margin-bottom:0}
.telegram-link-main{padding:12px;border-radius:13px;background:#fff;border:1px solid #d9e5f7}
.telegram-link-main input{font-family:inherit!important;font-weight:600!important;letter-spacing:0!important;background:#f8fafc}
.telegram-code-details{padding:0 3px;color:#6b7b91;font-size:11px}
.telegram-code-details summary{cursor:pointer;font-weight:700;list-style:none}
.telegram-code-details summary::-webkit-details-marker{display:none}
.telegram-code-details summary:before{content:'▸';margin-right:6px}
.telegram-code-details[open] summary:before{content:'▾'}
.telegram-code-inline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;padding:9px 10px;border-radius:10px;background:#f1f5f9}
.telegram-code-inline code{font-size:11px;font-weight:700;letter-spacing:.08em;color:#475569}
.compact-actions{display:flex;gap:8px;flex-wrap:wrap}
.compact-actions .btn{flex:1;min-width:105px}
.saved-project-compat{display:none!important}
@media(max-width:680px){.project-editor-heading{align-items:stretch}.project-editor-heading #saveCurrentProjectBtn{width:100%}.compact-actions .btn{width:100%;flex-basis:100%}}


/* Sprint 5.0-08: 광고목록 노출 ON/OFF 스위치 복구 */
.saved-project-card-head {
  grid-template-columns: 18px minmax(0, 1fr) auto auto !important;
}
.saved-project-header-switch {
  position: relative;
  z-index: 2;
  margin-left: 2px;
  flex: 0 0 auto;
}
.saved-project-header-switch input { cursor: pointer; }
.saved-project-card.is-collapsed .saved-project-header-switch,
.saved-project-card:not(.is-collapsed) .saved-project-header-switch {
  display: inline-flex !important;
}
@media (max-width: 560px) {
  .saved-project-card-head {
    grid-template-columns: 16px minmax(0, 1fr) auto !important;
  }
  .saved-project-exposure { display: none; }
}


/* Sprint 5.0-09: 광고목록 전용 노출 ON/OFF 슬라이드 */
.project-dashboard-card { position: relative; }
.project-dashboard-visibility-switch {
  position: absolute;
  top: 19px;
  right: 62px;
  z-index: 8;
}
.project-dashboard-visibility-switch input:disabled + span { opacity: .55; cursor: wait; }
.project-dashboard-card-toggle { padding-right: 116px !important; }
.project-dashboard-card.is-collapsed .project-dashboard-visibility-switch { top: 19px; }
.project-dashboard-card:not(.is-collapsed) .project-dashboard-visibility-switch { top: 19px; }
@media (max-width: 760px) {
  .project-dashboard-visibility-switch { right: 18px; top: 18px; }
  .project-dashboard-card-toggle { padding-right: 74px !important; }
}


/* JOINUP v5.0 Sprint 5.0.10: Telegram UX + project header */
.telegram-routing-compact{display:grid;gap:14px;padding:18px;background:#f8fbff;border:1px solid #d5e4f6;border-radius:16px}
.telegram-overview{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.8fr);gap:12px;align-items:end}
.telegram-overview .telegram-connection-status{min-height:48px}
.telegram-link-main{padding:14px;border-radius:14px;background:#fff;border:1px solid #dce7f5}
.telegram-register-row{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:8px}
.telegram-register-row input{font-family:inherit;font-weight:600;letter-spacing:0;background:#f8fafc}
.telegram-connect-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 2px;border-top:1px solid #e4edf7;border-bottom:1px solid #e4edf7}
.telegram-connect-actions>div:first-child{display:grid;gap:3px}.telegram-connect-actions small{color:#718096}
.telegram-code-details{padding:2px;color:#5f6f84}.telegram-code-details summary{padding:7px 0;cursor:pointer;font-weight:800}
.telegram-code-details .toggle-row{margin:8px 0 10px;padding:11px;border-radius:12px;background:#fff;border:1px solid #e1e8f2}
.telegram-code-inline{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:8px;padding:10px 12px;border-radius:11px;background:#eef3f8}
.telegram-code-inline code{text-align:right}.telegram-open-advanced{margin-top:10px;width:100%}
.project-dashboard-card-toggle{grid-template-columns:22px minmax(220px,1.4fr) minmax(250px,.9fr);align-items:center}
.project-card-primary{display:grid;gap:5px}.project-card-name{font-size:17px;line-height:1.25;color:#172033}
.project-card-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.project-card-primary>small{color:#8190a5}
.project-card-summary{display:grid;grid-template-columns:repeat(3,auto);justify-content:end;align-items:center;gap:14px;font-size:12px;white-space:nowrap}
.project-card-summary time{color:#7b8798}.project-dashboard-visibility-switch{right:18px}
@media(max-width:900px){.telegram-overview{grid-template-columns:1fr}.project-dashboard-card-toggle{grid-template-columns:22px 1fr}.project-card-summary{grid-column:2;justify-content:start;margin-top:7px}.project-dashboard-visibility-switch{top:18px}}
@media(max-width:680px){.telegram-register-row{grid-template-columns:1fr}.telegram-connect-actions{align-items:flex-start;flex-direction:column}.telegram-connect-actions .compact-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.project-card-summary{grid-template-columns:1fr 1fr;gap:6px 12px}.project-card-summary time{grid-column:1/-1}}


/* JOINUP v5.0 Sprint 5.0.10.1: project status row hotfix */
.project-telegram-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff4cc;
  color: #9a6700;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}
.project-telegram-badge.connected { background: #fff0b8; color: #8a5a00; }
.project-telegram-badge.waiting { background: #fff7dc; color: #a36b00; }
.project-card-summary { grid-template-columns: repeat(2, auto); }
@media(max-width:680px){
  .project-card-summary { grid-template-columns: auto auto; }
  .project-card-summary time { grid-column: auto; }
}


/* JOINUP v5.0 Sprint 5.0.10.2: compact header + detail meta relocation */
.project-dashboard-card-toggle {
  min-height: 70px;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  padding: 11px 72px 11px 13px !important;
}
.project-card-primary { gap: 4px; }
.project-card-name {
  font-size: 15px;
  line-height: 1.22;
}
.project-card-badges { gap: 5px; }
.project-status,
.project-editing-badge,
.project-telegram-badge {
  min-height: 18px;
  padding: 3px 7px;
  font-size: 8px;
}
.project-card-primary > small { font-size: 8px; }
.project-card-summary { display: none !important; }
.project-dashboard-visibility-switch {
  top: 15px !important;
  right: 15px !important;
}
.project-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.project-detail-meta > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e6ebf1;
  border-radius: 10px;
  background: #f8fafc;
}
.project-detail-meta small {
  color: #8390a2;
  font-size: 9px;
  font-weight: 700;
}
.project-detail-meta strong,
.project-detail-meta time {
  color: #243044;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.project-dashboard-card-body .project-public-path { margin-top: 9px; }
@media (max-width: 520px) {
  .project-dashboard-card-toggle {
    min-height: 66px;
    padding-right: 68px !important;
  }
  .project-card-name { font-size: 14px; }
  .project-detail-meta { grid-template-columns: 1fr; }
}
\n\n/* Sprint 5.0.11 - Ads Kit Foundation */\n.ads-kit-note{padding:13px 14px;border:1px solid #f0d98b;background:#fff9df;border-radius:12px;font-size:12px;line-height:1.5;color:#715b14;margin-bottom:16px}.ads-auto-info{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0 20px}.ads-auto-info>div{border:1px solid #e1e5eb;border-radius:12px;padding:11px;background:#fafbfc;min-width:0}.ads-auto-info .wide{grid-column:1/-1}.ads-auto-info span{display:block;font-size:10px;color:#7b8493;margin-bottom:5px}.ads-auto-info strong{font-size:12px;overflow-wrap:anywhere}.ads-copy-line{display:flex;align-items:center;justify-content:space-between;gap:8px}.ads-upload-card{border:1px solid #dfe4ea;border-radius:14px;padding:13px;margin-bottom:10px;background:#fff}.ads-upload-card>div:first-child{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px}.ads-upload-card strong{font-size:13px}.ads-upload-card span{font-size:10px;color:#7b8493}.ads-upload-card input{width:100%;font-size:11px}.ads-file-status{margin-top:9px;padding:8px 10px;border-radius:9px;background:#f2f4f7;font-size:10px;color:#687180}.ads-file-status.valid{background:#eaf9f1;color:#08764c}.ads-file-status.warning{background:#fff3df;color:#9b5d00}.ads-checklist{display:grid;gap:9px;padding:14px;border:1px solid #dfe4ea;border-radius:14px;margin:18px 0;background:#fafbfc}.ads-checklist strong{font-size:13px;margin-bottom:2px}.ads-checklist label{display:flex;align-items:center;gap:8px;font-size:11px}.ads-google-button{width:100%;justify-content:center;text-decoration:none}.ads-google-help{display:block;text-align:center;margin-top:8px;color:#7b8493}.ads-preview-workspace{height:100%;overflow:auto;padding:34px;background:#f4f6f8}.ads-preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:26px}.ads-preview-head span{font-size:10px;letter-spacing:.16em;color:#7d8794}.ads-preview-head h2{font-size:24px;margin:6px 0}.ads-preview-head p{font-size:12px;color:#6e7784}.ads-preview-project{border:1px solid #dce2e8;border-radius:999px;padding:8px 12px;background:#fff;letter-spacing:0!important}.ads-preview-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,.7fr);gap:20px}.ads-placement-card{background:#fff;border:1px solid #dde3e9;border-radius:18px;padding:16px;box-shadow:0 12px 30px rgba(28,35,45,.06)}.ads-placement-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.ads-placement-label strong{font-size:13px}.ads-placement-label span{font-size:10px;color:#89919d}.ads-mock-page{border:1px solid #e7eaee;background:#fbfbfc;border-radius:12px;padding:18px}.mock-lines{height:54px;background:repeating-linear-gradient(#e7eaf0 0 5px,transparent 5px 12px);margin-bottom:16px}.mock-lines.short{height:34px;margin:16px 0 0}.ads-image-slot{display:flex;align-items:center;justify-content:center;background:#e9edf1 center/cover no-repeat;border:1px dashed #bbc4ce;color:#7e8791;font-size:11px;overflow:hidden}.ads-image-slot.has-image span{display:none}.ads-image-slot.landscape{aspect-ratio:1200/628;border-radius:8px}.ads-image-slot.square{aspect-ratio:1;border-radius:10px}.ads-mock-sidebar{border:1px solid #e7eaee;border-radius:12px;padding:12px;background:#fbfbfc}.ads-mock-sidebar>strong{display:block;font-size:12px;margin-top:10px;line-height:1.4}.ads-mock-sidebar>small{display:block;margin:4px 0 10px;color:#7b8493}.ads-mock-sidebar button{border:0;border-radius:8px;background:#15181d;color:#fff;padding:8px 10px;font-size:10px}.ads-preview-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.ads-preview-summary>div{background:#fff;border:1px solid #dde3e9;border-radius:13px;padding:12px}.ads-preview-summary span{display:block;font-size:9px;color:#7b8493;margin-bottom:5px}.ads-preview-summary strong{font-size:11px}.ads-kit-active .preview-toolbar,.ads-kit-active .preview-stage{display:none}.ads-kit-active .preview-column{background:#f4f6f8}.ads-kit-active .ads-preview-workspace{display:block!important}\n@media(max-width:1000px){.ads-preview-grid{grid-template-columns:1fr}.ads-preview-summary{grid-template-columns:1fr}.ads-preview-workspace{padding:20px}}\n
/* Sprint 5.0.11.1 - Ads Kit selection and automatic checklist */
.ads-checklist input[disabled]{opacity:1;accent-color:#16a36f;cursor:default}.ads-ready-check{padding-top:9px;margin-top:3px;border-top:1px solid #e1e5eb;font-weight:800}.ads-ready-check input:not(:checked){accent-color:#a6afba}


/* Sprint 5.0.11.7 - Telegram connection management */
.telegram-code-management{display:grid;gap:10px;padding:14px;border-radius:14px;background:#fff;border:1px solid #dce7f5}
.telegram-code-management .toggle-row{margin:0;padding:11px;border-radius:12px;background:#f8fafc;border:1px solid #e1e8f2}
.telegram-code-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border-radius:12px;background:#eef4fb}
.telegram-code-copy{display:grid;gap:4px;min-width:0}.telegram-code-copy span{font-size:11px;color:#64748b}.telegram-code-copy code{font-size:13px;font-weight:800;letter-spacing:.08em;color:#334155;overflow-wrap:anywhere}
.telegram-code-warning{color:#b45309}.telegram-open-advanced{width:100%}
#testTelegramRoutingBtn:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.3)}
#telegramConnectUrl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:680px){.telegram-code-panel{grid-template-columns:1fr}.telegram-code-panel button{width:100%}}


/* Sprint 5.0.11.8 - project delete + Studio lock */
.btn-danger-soft{border:1px solid #ffd7d7;background:#fff2f2;color:#d63b3b;font-weight:800}.btn-danger-soft:hover:not(:disabled){background:#ffe5e5;border-color:#ffbcbc;color:#b91f1f}.project-action-delete{margin-left:auto}
.studio-lock-overlay{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:24px;background:rgba(238,242,247,.56);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.studio-lock-overlay[hidden]{display:none}
body.studio-is-locked{overflow:hidden}
body.studio-is-locked>.studio-shell{filter:blur(8px);transform:scale(1.005);pointer-events:none;user-select:none}
.studio-lock-card{width:min(100%,390px);padding:34px;border:1px solid rgba(255,255,255,.86);border-radius:24px;background:rgba(255,255,255,.94);box-shadow:0 30px 80px rgba(22,30,43,.22);text-align:left}
.studio-lock-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}.studio-lock-brand span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#171a20;color:#fff;font-weight:900}.studio-lock-brand strong{font-size:18px;letter-spacing:.15em}.studio-lock-card>small{color:#b17b18;font-size:10px;font-weight:900;letter-spacing:.18em}.studio-lock-card h1{margin:8px 0 8px;font-size:27px}.studio-lock-card p{margin:0 0 22px;color:#707784;font-size:13px;line-height:1.6}.studio-lock-card label{display:block;margin-bottom:8px;font-size:12px;font-weight:800}.studio-lock-card input{width:100%;height:50px;padding:0 15px;border:1px solid #d8dde5;border-radius:13px;background:#fff;font-size:15px;outline:none}.studio-lock-card input:focus{border-color:#171a20;box-shadow:0 0 0 3px rgba(23,26,32,.08)}.studio-lock-card button{width:100%;height:50px;margin-top:12px;border:0;border-radius:13px;background:#171a20;color:#fff;font-size:14px;font-weight:900;cursor:pointer}.studio-lock-card button:disabled{opacity:.6;cursor:wait}.studio-lock-message{min-height:20px;margin-top:10px;color:#d33b3b;font-size:12px;text-align:center}
@media(max-width:700px){.studio-lock-card{padding:27px 22px;border-radius:20px}.project-action-delete{margin-left:0}}

/* Sprint 5.0.11.9 - tab-scoped lock */
.studio-manual-lock{border-color:#ead9a8;background:#fff9e8;color:#815d00}
.studio-manual-lock:hover{background:#fff3c9}