:root {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --ink: #131722;
  --muted: #747b8c;
  --line: #e7eaf0;
  --dark: #0c1020;
  --accent: #6a5cff;
  --accent-2: #9d8cff;
  --success: #1c9a68;
  --warning: #b7791f;
  --danger: #c84c61;
  --shadow: 0 18px 54px rgba(25, 31, 50, .10);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 17px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% -5%, rgba(106,92,255,.14), transparent 28%),
    var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(106,92,255,.22); outline-offset: 2px; }
.phone-shell { width: min(100%, 520px); min-height: 100dvh; margin: 0 auto; position: relative; background: rgba(244,246,250,.78); }
.topbar {
  position: sticky; top: 0; z-index: 40;
  min-height: 72px; padding: 11px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(244,246,250,.88); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(231,234,240,.75);
}
.brand, .credit, .nav-item, .nav-create, .plain-btn { border: 0; background: none; cursor: pointer; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0; text-align: left; }
.brand-mark { width: 41px; height: 41px; border-radius: 15px; display: grid; place-items: center; color: #fff; font-weight: 850; letter-spacing: -.05em; background: linear-gradient(145deg,#0c1020,#6a5cff); box-shadow: 0 10px 24px rgba(106,92,255,.25); }
.brand-copy strong { display: block; font-size: 15px; letter-spacing: -.02em; }
.brand-copy small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.credit { min-height: 37px; display: flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.93); box-shadow: 0 8px 20px rgba(20,25,40,.05); }
.credit span { color: var(--muted); font-size: 11px; }.credit strong { font-size: 12px; }
.app-main { padding: 16px 16px calc(108px + var(--safe-bottom)); }
.page { display: grid; gap: 16px; animation: rise .22s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hero { overflow: hidden; position: relative; padding: 25px 22px; border-radius: 30px; color: #fff; background: radial-gradient(circle at 90% 12%, rgba(255,255,255,.17), transparent 26%), linear-gradient(145deg,#0c1020,#302a73 65%,#6a5cff); box-shadow: var(--shadow); }
.hero::after { content:""; position:absolute; right:-52px; bottom:-66px; width:190px; height:190px; border:1px solid rgba(255,255,255,.15); border-radius:50%; }
.hero .eyebrow { color: rgba(255,255,255,.64); }
.hero h1 { margin: 9px 0 11px; max-width: 360px; font-size: clamp(29px,8vw,39px); line-height: 1.12; letter-spacing: -.055em; }
.hero p { margin:0; max-width:390px; color:rgba(255,255,255,.75); font-size:13px; line-height:1.65; }
.hero-actions { margin-top:20px; display:flex; gap:9px; flex-wrap:wrap; }
.eyebrow { margin:0; color:var(--accent); font-size:11px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:2px; }
.section-head h2, .page-title { margin:0; font-size:20px; letter-spacing:-.035em; }.section-head p, .page-lead { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.card { padding:18px; border:1px solid rgba(231,234,240,.9); border-radius:var(--radius-lg); background:rgba(255,255,255,.96); box-shadow:0 10px 34px rgba(22,28,45,.055); }
.card.tight { padding:15px; }.card.dark { color:#fff; border:0; background:linear-gradient(145deg,#111827,#28234f); }
.btn { min-height:48px; border:0; border-radius:16px; padding:0 17px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; font-weight:780; font-size:14px; }
.btn.primary { color:#fff; background:linear-gradient(145deg,#5145e6,#7568ff); box-shadow:0 12px 28px rgba(106,92,255,.25); }.btn.dark { color:#fff; background:var(--dark); }.btn.light { color:var(--ink); border:1px solid var(--line); background:#fff; }.btn.soft { color:#5045ca; background:#efedff; }.btn.wide { width:100%; }.btn.small { min-height:38px; padding:0 13px; font-size:12px; border-radius:13px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.quick-card { min-height:115px; padding:17px; border:1px solid var(--line); border-radius:21px; background:var(--surface); text-align:left; cursor:pointer; box-shadow:0 8px 28px rgba(20,25,40,.045); }
.quick-card strong { display:block; font-size:15px; letter-spacing:-.025em; }.quick-card span { display:block; margin-top:7px; color:var(--muted); font-size:11px; line-height:1.5; }.quick-icon { width:37px; height:37px; margin-bottom:13px; display:grid; place-items:center; border-radius:13px; color:#5145e6; background:#efedff; font-weight:850; }
.product-list { display:grid; gap:10px; }
.product-row { width:100%; display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:19px; background:#fff; text-align:left; cursor:pointer; }
.product-thumb { width:58px; aspect-ratio:1; border-radius:16px; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:800; background:linear-gradient(145deg,#293047,#7b6dff); overflow:hidden; }.product-thumb img { width:100%; height:100%; object-fit:cover; }
.product-copy { min-width:0; }.product-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; letter-spacing:-.02em; }.product-copy small { display:block; margin-top:5px; color:var(--muted); font-size:11px; }.chev { color:#a0a6b3; }
.status { display:inline-flex; align-items:center; gap:5px; margin-top:7px; padding:4px 8px; border-radius:999px; font-size:10px; font-weight:760; }.status.ready { color:#28634f; background:#e9f8f1; }.status.draft { color:#72561b; background:#fff6da; }.status.published { color:#4338ca; background:#efedff; }
.progress { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-bottom:2px; }.progress span { height:5px; border-radius:999px; background:#e4e7ed; }.progress span.on { background:linear-gradient(90deg,#5145e6,#8d82ff); }
.step-label { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; }
.field { display:grid; gap:7px; }.field label { font-size:12px; font-weight:760; }.input, .textarea, .select { width:100%; border:1px solid var(--line); border-radius:16px; background:#fff; color:var(--ink); padding:14px 15px; font-size:14px; }.textarea { min-height:92px; resize:vertical; line-height:1.6; }.input::placeholder,.textarea::placeholder { color:#adb2be; }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.choice { position:relative; }.choice input { position:absolute; opacity:0; pointer-events:none; }.choice label { min-height:80px; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:13px; border:1px solid var(--line); border-radius:17px; background:#fff; cursor:pointer; }.choice label strong { font-size:13px; }.choice label small { color:var(--muted); font-size:10px; line-height:1.45; }.choice input:checked + label { border-color:#7468ff; box-shadow:0 0 0 3px rgba(106,92,255,.10); background:#f7f5ff; }
.image-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.image-slot { position:relative; aspect-ratio:.84; border:1px dashed #cfd3dd; border-radius:17px; overflow:hidden; background:#fafbfc; display:grid; place-items:center; }.image-slot input { position:absolute; inset:0; opacity:0; cursor:pointer; }.image-slot img { width:100%; height:100%; object-fit:cover; }.image-placeholder { text-align:center; color:#9096a5; font-size:10px; line-height:1.5; }.image-placeholder b { display:block; color:#575d6d; font-size:22px; font-weight:500; }.image-remove { position:absolute; top:6px; right:6px; width:27px; height:27px; border:0; border-radius:50%; background:rgba(10,14,26,.68); color:#fff; cursor:pointer; }
.info-grid { display:grid; gap:0; }.info-row { display:grid; grid-template-columns:92px minmax(0,1fr); gap:10px; padding:11px 0; border-bottom:1px solid var(--line); font-size:12px; }.info-row:last-child { border-bottom:0; }.info-row span { color:var(--muted); }.info-row strong { min-width:0; overflow-wrap:anywhere; }
.check-list { display:grid; gap:8px; }.check-row { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:52px; padding:0 13px; border:1px solid var(--line); border-radius:16px; background:#fff; }.check-row strong { display:block; font-size:13px; }.check-row small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }.switch { width:42px; height:24px; appearance:none; border-radius:999px; background:#d8dce4; position:relative; cursor:pointer; transition:.2s; }.switch::after { content:""; position:absolute; width:18px; height:18px; top:3px; left:3px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.18); transition:.2s; }.switch:checked { background:#6659f4; }.switch:checked::after { transform:translateX(18px); }
.summary-box { padding:14px; border-radius:17px; background:#f7f8fb; border:1px solid var(--line); }.summary-box h3 { margin:0 0 9px; font-size:13px; }.summary-box p { margin:5px 0; color:#555c6d; font-size:11px; line-height:1.55; }
.cardnews-preview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.preview-page { aspect-ratio:4/5; padding:13px; border-radius:17px; color:#fff; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(145deg,#111827,#4b42a0); box-shadow:0 8px 20px rgba(26,30,48,.12); }.preview-page:nth-child(2n) { background:linear-gradient(145deg,#f4f1eb,#ded7ff); color:#1a1d26; }.preview-page b { font-size:11px; opacity:.65; }.preview-page strong { font-size:14px; line-height:1.35; letter-spacing:-.035em; }.preview-page span { font-size:9px; opacity:.72; line-height:1.45; }
.tabs { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; }.tabs::-webkit-scrollbar { display:none; }.tab { white-space:nowrap; min-height:37px; padding:0 13px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); cursor:pointer; font-size:11px; font-weight:750; }.tab.on { color:#fff; border-color:var(--dark); background:var(--dark); }
.publish-row { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:11px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); }.publish-row:last-child { border-bottom:0; }.channel-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:#f1efff; color:#5145e6; font-weight:850; font-size:11px; }.publish-row strong { display:block; font-size:13px; }.publish-row small { display:block; margin-top:4px; color:var(--muted); font-size:10px; }
.notice { padding:13px 14px; border-radius:16px; font-size:11px; line-height:1.6; }.notice.info { color:#49419b; background:#efedff; }.notice.warn { color:#745516; background:#fff6dc; }.notice.success { color:#236348; background:#eaf8f2; }
.bottom-actions { display:grid; grid-template-columns:1fr 1.5fr; gap:9px; }
.bottom-nav { position:fixed; left:50%; bottom:0; z-index:50; width:min(100%,520px); min-height:72px; padding:7px 9px calc(7px + var(--safe-bottom)); transform:translateX(-50%); display:grid; grid-template-columns:1fr 1fr 74px 1fr 1fr; align-items:end; background:rgba(255,255,255,.94); backdrop-filter:blur(22px); border-top:1px solid rgba(231,234,240,.9); box-shadow:0 -12px 36px rgba(24,29,45,.07); }
.nav-item { min-height:52px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; color:#9096a5; font-size:10px; }.nav-item.is-active { color:#4f43d8; font-weight:800; }.nav-glyph { font-size:18px; line-height:1; }
.nav-create { width:58px; height:58px; align-self:start; justify-self:center; margin-top:-20px; border-radius:20px; color:#fff; font-size:29px; display:grid; place-items:center; background:linear-gradient(145deg,#4f43dc,#796dff); box-shadow:0 13px 30px rgba(106,92,255,.35); }
.toast { position:fixed; z-index:100; left:50%; bottom:calc(90px + var(--safe-bottom)); max-width:calc(100% - 32px); transform:translate(-50%,18px); padding:11px 15px; border-radius:999px; color:#fff; background:rgba(12,16,32,.92); box-shadow:0 14px 38px rgba(0,0,0,.2); opacity:0; pointer-events:none; transition:.22s; font-size:12px; }.toast.show { opacity:1; transform:translate(-50%,0); }
.empty { padding:28px 18px; text-align:center; border:1px dashed #d8dce4; border-radius:20px; background:#fafbfc; }.empty strong { display:block; font-size:14px; }.empty p { margin:7px 0 15px; color:var(--muted); font-size:11px; line-height:1.6; }
@media (max-width:360px) { .app-main { padding-inline:12px; }.topbar { padding-inline:12px; }.choice-grid,.grid-2 { grid-template-columns:1fr; }.brand-copy small { display:none; } }
@media (min-width:521px) { body { padding:18px 0; }.phone-shell { min-height:calc(100dvh - 36px); border:1px solid rgba(231,234,240,.9); border-radius:32px; overflow:hidden; box-shadow:0 28px 80px rgba(20,25,40,.12); }.bottom-nav { bottom:18px; border-radius:0 0 32px 32px; } }

/* AF_STUDIO_MOBILE_NAV_WRAP_V3_20260728_START */

/* 하단 메뉴 아이콘을 손가락으로 보기 편한 크기로 확대 */
.nav-glyph {
  width: 30px;
  height: 29px;
  display: grid;
  place-items: center;
  font-size: 23px;
  font-weight: 760;
  line-height: 1;
}

.nav-item[data-route="home"] .nav-glyph {
  font-size: 26px;
}

.nav-item > span:last-child {
  line-height: 1.2;
}

/* 한글 설명 문장이 글자 중간에서 끊기지 않도록 단어 단위 줄바꿈 */
.hero p,
.quick-card span,
.section-head p,
.page-lead,
.card.dark p,
.product-copy small,
.notice,
.summary-box p,
.empty p,
.publish-row small {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: pretty;
}

/* 제목도 조사·단어 중간에서 끊기지 않도록 정리 */
.hero h1,
.section-head h2,
.page-title,
.quick-card strong,
.card.dark h2,
.product-copy strong {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* 아주 좁은 휴대폰에서도 설명 영역이 답답하지 않게 유지 */
@media (max-width: 380px) {
  .hero p,
  .quick-card span,
  .section-head p,
  .page-lead,
  .card.dark p {
    font-size: 12px;
    line-height: 1.7;
  }
}

/* AF_STUDIO_MOBILE_NAV_WRAP_V3_20260728_END */

/* AF_STUDIO_MOBILE_LUX_NAV_TEMPLATE_V4_20260728_START */

/* 하단 아이콘을 텍스트 기호 대신 고급 SVG 아이콘으로 정리 */
.nav-item {
  min-height: 56px;
  gap: 6px;
  color: #8c93a3;
  font-size: 10px;
  font-weight: 650;
}

.nav-item.is-active {
  color: #4f43d8;
  font-weight: 820;
}

.nav-glyph {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: transparent;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.nav-item.is-active .nav-glyph {
  background: rgba(106,92,255,.10);
  box-shadow: inset 0 0 0 1px rgba(106,92,255,.08);
}

.nav-svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item[data-route="home"] .nav-svg {
  width: 23px;
  height: 23px;
}

.nav-item > span:last-child {
  line-height: 1.15;
}

/* 디자인 선택 카드를 2x2로 채우고 오른쪽에 샘플 미리보기 제공 */
.template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.template-card label {
  min-height: 92px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  align-items: center;
  gap: 10px;
  padding: 14px;
}

.template-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.template-copy strong {
  display: block;
  font-size: 13px;
}

.template-copy small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.template-preview {
  height: 62px;
  border-radius: 14px;
  padding: 8px;
  display: grid;
  grid-template-rows: 8px 1fr 8px;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 8px 18px rgba(31, 36, 56, .08);
}

.template-preview .tp-top,
.template-preview .tp-bottom {
  border-radius: 999px;
  opacity: .92;
}

.template-preview .tp-image {
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.template-preview .tp-image::after {
  content: "";
  position: absolute;
  inset: 8px 10px auto 10px;
  height: 4px;
  border-radius: 999px;
  opacity: .85;
}

.template-preview.clean {
  background: linear-gradient(145deg, #f8f9fe, #eef1f7);
}
.template-preview.clean .tp-top,
.template-preview.clean .tp-bottom,
.template-preview.clean .tp-image::after { background: #586074; }
.template-preview.clean .tp-image { background: linear-gradient(145deg, #d9deeb, #f8faff); }

.template-preview.soft {
  background: linear-gradient(145deg, #f9f1f6, #f0e8ff);
}
.template-preview.soft .tp-top,
.template-preview.soft .tp-bottom,
.template-preview.soft .tp-image::after { background: #8d6da8; }
.template-preview.soft .tp-image { background: linear-gradient(145deg, #f2d9ea, #e5defd); }

.template-preview.bold {
  background: linear-gradient(145deg, #1a2142, #5747b7);
}
.template-preview.bold .tp-top,
.template-preview.bold .tp-bottom,
.template-preview.bold .tp-image::after { background: rgba(255,255,255,.88); }
.template-preview.bold .tp-image { background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.34)); }

.template-preview.premium {
  background: linear-gradient(145deg, #1d1f2a, #43465a 60%, #7a6a4e);
}
.template-preview.premium .tp-top,
.template-preview.premium .tp-bottom,
.template-preview.premium .tp-image::after { background: #f0d6a0; }
.template-preview.premium .tp-image { background: linear-gradient(145deg, rgba(240,214,160,.22), rgba(255,255,255,.20)); }

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

  .template-card label {
    grid-template-columns: minmax(0, 1fr) 92px;
  }
}

/* AF_STUDIO_MOBILE_LUX_NAV_TEMPLATE_V4_20260728_END */

/* AF_STUDIO_PRODUCT_CARDNEWS_UPLOAD_V5_20260728_START */

/* 고급 하단 아이콘 */
.nav-item {
  min-height: 56px;
  gap: 5px;
  color: #8d94a4;
  font-size: 10px;
  font-weight: 650;
}
.nav-item.is-active { color: #5044db; font-weight: 820; }
.nav-glyph {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: transparent;
}
.nav-item.is-active .nav-glyph {
  background: rgba(106,92,255,.10);
  box-shadow: inset 0 0 0 1px rgba(106,92,255,.08);
}
.nav-svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scope-path {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--muted);
  background: rgba(255,255,255,.88);
  font-size: 11px;
}
.scope-path b { color: #a5aaba; }
.scope-path strong { color: var(--ink); font-size: 12px; }

/* 상품 미디어 */
.media-image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.media-slot {
  position: relative;
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
  border: 1px dashed #cfd4df;
  border-radius: 17px;
  background: #f8f9fc;
}
.media-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  text-align: center;
}
.media-placeholder input,
.video-add-card input { position: absolute; opacity: 0; pointer-events: none; }
.media-plus {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #594ee3;
  background: #eceaff;
  font-size: 20px;
  line-height: 1;
}
.media-placeholder strong { font-size: 10px; }
.media-placeholder small { color: var(--muted); font-size: 9px; }
.media-badge {
  position: absolute;
  left: 7px;
  bottom: 7px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: rgba(12,16,32,.76);
  backdrop-filter: blur(8px);
  font-size: 8px;
  font-weight: 800;
}
.media-remove {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(12,16,32,.72);
  cursor: pointer;
}
.saved-media {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  color: #5145d8;
  background: linear-gradient(145deg,#f0eeff,#f9faff);
}
.saved-media b { font-size: 11px; }
.saved-media span {
  width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.video-add-card,
.video-media-card {
  position: relative;
  width: 100%;
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}
.video-add-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  cursor: pointer;
}
.video-add-icon,
.play-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg,#191e30,#6a5cff);
  box-shadow: 0 10px 22px rgba(68,58,180,.20);
}
.video-add-card strong,
.video-meta strong { display: block; font-size: 12px; }
.video-add-card small,
.video-meta small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.video-media-card video {
  width: 100%;
  max-height: 230px;
  display: block;
  background: #0c1020;
}
.saved-video {
  min-height: 125px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(145deg,#111827,#342c79);
  color: #fff;
}
.saved-video strong {
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.video-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}
.video-meta > span { min-width: 0; }
.video-meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-banner,
.result-mode-summary {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: #fff;
}
.mode-banner.video-mode,
.result-mode-summary { border-color: rgba(106,92,255,.25); background: linear-gradient(145deg,#f8f7ff,#fff); }
.mode-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg,#171c2c,#6a5cff);
  font-size: 15px;
}
.mode-banner strong,
.result-mode-summary strong { display: block; font-size: 12px; }
.mode-banner small,
.result-mode-summary small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.result-mode-summary.compact { min-height: 64px; }

/* 디자인 4종 */
.template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.template-card label {
  min-height: 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  align-items: center;
  gap: 9px;
  padding: 13px;
}
.template-copy { min-width: 0; display: grid; gap: 5px; }
.template-copy strong { font-size: 13px; }
.template-copy small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.template-preview {
  height: 64px;
  padding: 8px;
  display: grid;
  grid-template-rows: 7px 1fr 7px;
  gap: 5px;
  border-radius: 13px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 8px 18px rgba(25,31,50,.08);
}
.template-preview span { display: block; border-radius: 999px; }
.template-preview .tp-image { border-radius: 9px; }
.template-preview.clean { background: linear-gradient(145deg,#f7f8fc,#e9edf5); }
.template-preview.clean span { background: #6a7285; }
.template-preview.clean .tp-image { background: linear-gradient(145deg,#d7deea,#fff); }
.template-preview.soft { background: linear-gradient(145deg,#faeff5,#eee7ff); }
.template-preview.soft span { background: #956d9f; }
.template-preview.soft .tp-image { background: linear-gradient(145deg,#f0d6e7,#e2dafe); }
.template-preview.bold { background: linear-gradient(145deg,#171d2d,#4e43aa); }
.template-preview.bold span { background: #fff; }
.template-preview.bold .tp-image { background: linear-gradient(145deg,#3d4565,#7769ff); }
.template-preview.premium { background: linear-gradient(145deg,#111318,#372b20); }
.template-preview.premium span { background: #d7b56d; }
.template-preview.premium .tp-image { background: linear-gradient(145deg,#2d2b2b,#8a6b39); }

/* 결과 카드 묶음 */
.result-card-grid { align-items: stretch; }
.media-result-card { position: relative; overflow: hidden; }
.media-result-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-result-card.has-video { background: linear-gradient(145deg,#111827,#2f276b); }
.result-card-overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}
.media-result-card.has-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,rgba(5,7,14,.08),rgba(5,7,14,.72));
}
.file-type {
  align-self: flex-end;
  padding: 4px 7px;
  border-radius: 999px;
  color: #172033;
  background: rgba(255,255,255,.84);
  font-size: 8px;
  font-weight: 850;
}
.file-type.video { color: #fff; background: rgba(106,92,255,.88); }
.bundle-files { display: grid; gap: 8px; }
.bundle-file {
  min-height: 54px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}
.file-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #4f45d1;
  background: #efedff;
}
.file-icon.video { color: #fff; background: linear-gradient(145deg,#171c2c,#6a5cff); }
.bundle-file span:nth-child(2) { min-width: 0; }
.bundle-file strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.bundle-file small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.bundle-file > b { color: var(--muted); font-size: 9px; }

/* 게시 선택·검수·진행 */
.channel-card-list { padding-top: 6px; padding-bottom: 6px; }
.publish-channel-row,
.review-channel {
  min-height: 67px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}
.publish-channel-row:last-child,
.review-channel:last-child { border-bottom: 0; }
.channel-check {
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 22px 42px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.channel-check input { width: 18px; height: 18px; accent-color: #6558f4; }
.channel-copy,
.review-channel > span:nth-child(2) { min-width: 0; flex: 1; }
.channel-copy strong,
.review-channel strong { display: block; font-size: 12px; }
.channel-copy small,
.review-channel small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.channel-side { flex: 0 0 auto; }
.connected-dot {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  color: #178158;
  background: #e9f8f1;
  font-size: 9px;
  font-weight: 800;
}
.upload-status {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}
.upload-status.idle { color: #737b8d; background: #f0f2f6; }
.upload-status.ready { color: #4f45d1; background: #efedff; }
.upload-status.uploading { color: #9a6714; background: #fff4d9; }
.upload-status.success { color: #178158; background: #e9f8f1; }
.upload-status.failed { color: #b13e54; background: #fdecef; }
.upload-progress-card {
  padding: 19px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(145deg,#0d1221,#3b327e);
  box-shadow: var(--shadow);
}
.upload-progress-card strong { display: block; font-size: 28px; letter-spacing: -.05em; }
.upload-progress-card > span { display: block; margin-top: 2px; color: rgba(255,255,255,.66); font-size: 10px; }
.upload-progress-track {
  height: 8px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}
.upload-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#a99fff,#fff);
  transition: width .35s ease;
}

@media (max-width: 380px) {
  .template-grid { grid-template-columns: 1fr; }
  .template-card label { grid-template-columns: minmax(0,1fr) 104px; }
  .media-image-grid { gap: 7px; }
  .channel-check { grid-template-columns: 20px 38px minmax(0,1fr); gap: 8px; }
}

/* AF_STUDIO_PRODUCT_CARDNEWS_UPLOAD_V5_20260728_END */

/* AF_STUDIO_PRODUCT_CARDNEWS_CAROUSEL_V6_20260728_START */

/* 고급 하단 아이콘 */
.nav-item {
  min-height: 56px;
  gap: 5px;
  color: #8d94a4;
  font-size: 10px;
  font-weight: 650;
}
.nav-item.is-active { color: #5044db; font-weight: 820; }
.nav-glyph {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: transparent;
}
.nav-item.is-active .nav-glyph {
  background: rgba(106,92,255,.10);
  box-shadow: inset 0 0 0 1px rgba(106,92,255,.08);
}
.nav-svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scope-path {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--muted);
  background: rgba(255,255,255,.88);
  font-size: 11px;
}
.scope-path b { color: #a5aaba; }
.scope-path strong { color: var(--ink); font-size: 12px; }

/* 상품 미디어 */
.media-slot video,
.media-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-slot.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 56%, rgba(0,0,0,.38));
  pointer-events: none;
}
.media-kind-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: rgba(17,24,39,.78);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
}
.media-map-note {
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #f6f7fb;
}
.media-map-note strong,
.media-map-note span { display: block; }
.media-map-note strong { font-size: 11px; }
.media-map-note span { margin-top: 4px; color: var(--muted); font-size: 10px; word-break: keep-all; }
.media-result-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.media-slot {
  position: relative;
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
  border: 1px dashed #cfd4df;
  border-radius: 17px;
  background: #f8f9fc;
}
.media-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  text-align: center;
}
.media-placeholder input,
.video-add-card input { position: absolute; opacity: 0; pointer-events: none; }
.media-plus {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #594ee3;
  background: #eceaff;
  font-size: 20px;
  line-height: 1;
}
.media-placeholder strong { font-size: 10px; }
.media-placeholder small { color: var(--muted); font-size: 9px; }
.media-badge {
  position: absolute;
  left: 7px;
  bottom: 7px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: rgba(12,16,32,.76);
  backdrop-filter: blur(8px);
  font-size: 8px;
  font-weight: 800;
}
.media-remove {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(12,16,32,.72);
  cursor: pointer;
}
.saved-media {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  color: #5145d8;
  background: linear-gradient(145deg,#f0eeff,#f9faff);
}
.saved-media b { font-size: 11px; }
.saved-media span {
  width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.video-add-card,
.video-media-card {
  position: relative;
  width: 100%;
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}
.video-add-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  cursor: pointer;
}
.video-add-icon,
.play-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg,#191e30,#6a5cff);
  box-shadow: 0 10px 22px rgba(68,58,180,.20);
}
.video-add-card strong,
.video-meta strong { display: block; font-size: 12px; }
.video-add-card small,
.video-meta small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.video-media-card video {
  width: 100%;
  max-height: 230px;
  display: block;
  background: #0c1020;
}
.saved-video {
  min-height: 125px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(145deg,#111827,#342c79);
  color: #fff;
}
.saved-video strong {
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.video-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}
.video-meta > span { min-width: 0; }
.video-meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-banner,
.result-mode-summary {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: #fff;
}
.mode-banner.video-mode,
.result-mode-summary { border-color: rgba(106,92,255,.25); background: linear-gradient(145deg,#f8f7ff,#fff); }
.mode-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg,#171c2c,#6a5cff);
  font-size: 15px;
}
.mode-banner strong,
.result-mode-summary strong { display: block; font-size: 12px; }
.mode-banner small,
.result-mode-summary small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.result-mode-summary.compact { min-height: 64px; }

/* 디자인 4종 */
.template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.template-card label {
  min-height: 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  align-items: center;
  gap: 9px;
  padding: 13px;
}
.template-copy { min-width: 0; display: grid; gap: 5px; }
.template-copy strong { font-size: 13px; }
.template-copy small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.template-preview {
  height: 64px;
  padding: 8px;
  display: grid;
  grid-template-rows: 7px 1fr 7px;
  gap: 5px;
  border-radius: 13px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 8px 18px rgba(25,31,50,.08);
}
.template-preview span { display: block; border-radius: 999px; }
.template-preview .tp-image { border-radius: 9px; }
.template-preview.clean { background: linear-gradient(145deg,#f7f8fc,#e9edf5); }
.template-preview.clean span { background: #6a7285; }
.template-preview.clean .tp-image { background: linear-gradient(145deg,#d7deea,#fff); }
.template-preview.soft { background: linear-gradient(145deg,#faeff5,#eee7ff); }
.template-preview.soft span { background: #956d9f; }
.template-preview.soft .tp-image { background: linear-gradient(145deg,#f0d6e7,#e2dafe); }
.template-preview.bold { background: linear-gradient(145deg,#171d2d,#4e43aa); }
.template-preview.bold span { background: #fff; }
.template-preview.bold .tp-image { background: linear-gradient(145deg,#3d4565,#7769ff); }
.template-preview.premium { background: linear-gradient(145deg,#111318,#372b20); }
.template-preview.premium span { background: #d7b56d; }
.template-preview.premium .tp-image { background: linear-gradient(145deg,#2d2b2b,#8a6b39); }

/* 결과 카드 묶음 */
.result-card-grid { align-items: stretch; }
.media-result-card { position: relative; overflow: hidden; }
.media-result-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-result-card.has-video { background: linear-gradient(145deg,#111827,#2f276b); }
.result-card-overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}
.media-result-card.has-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,rgba(5,7,14,.08),rgba(5,7,14,.72));
}
.file-type {
  align-self: flex-end;
  padding: 4px 7px;
  border-radius: 999px;
  color: #172033;
  background: rgba(255,255,255,.84);
  font-size: 8px;
  font-weight: 850;
}
.file-type.video { color: #fff; background: rgba(106,92,255,.88); }
.bundle-files { display: grid; gap: 8px; }
.bundle-file {
  min-height: 54px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}
.file-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #4f45d1;
  background: #efedff;
}
.file-icon.video { color: #fff; background: linear-gradient(145deg,#171c2c,#6a5cff); }
.bundle-file span:nth-child(2) { min-width: 0; }
.bundle-file strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}
.bundle-file small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.bundle-file > b { color: var(--muted); font-size: 9px; }

/* 게시 선택·검수·진행 */
.channel-card-list { padding-top: 6px; padding-bottom: 6px; }
.publish-channel-row,
.review-channel {
  min-height: 67px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}
.publish-channel-row:last-child,
.review-channel:last-child { border-bottom: 0; }
.channel-check {
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 22px 42px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.channel-check input { width: 18px; height: 18px; accent-color: #6558f4; }
.channel-copy,
.review-channel > span:nth-child(2) { min-width: 0; flex: 1; }
.channel-copy strong,
.review-channel strong { display: block; font-size: 12px; }
.channel-copy small,
.review-channel small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.channel-side { flex: 0 0 auto; }
.connected-dot {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  color: #178158;
  background: #e9f8f1;
  font-size: 9px;
  font-weight: 800;
}
.upload-status {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}
.upload-status.idle { color: #737b8d; background: #f0f2f6; }
.upload-status.ready { color: #4f45d1; background: #efedff; }
.upload-status.uploading { color: #9a6714; background: #fff4d9; }
.upload-status.success { color: #178158; background: #e9f8f1; }
.upload-status.failed { color: #b13e54; background: #fdecef; }
.upload-progress-card {
  padding: 19px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(145deg,#0d1221,#3b327e);
  box-shadow: var(--shadow);
}
.upload-progress-card strong { display: block; font-size: 28px; letter-spacing: -.05em; }
.upload-progress-card > span { display: block; margin-top: 2px; color: rgba(255,255,255,.66); font-size: 10px; }
.upload-progress-track {
  height: 8px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}
.upload-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#a99fff,#fff);
  transition: width .35s ease;
}

@media (max-width: 380px) {
  .template-grid { grid-template-columns: 1fr; }
  .template-card label { grid-template-columns: minmax(0,1fr) 104px; }
  .media-image-grid { gap: 7px; }
  .channel-check { grid-template-columns: 20px 38px minmax(0,1fr); gap: 8px; }
}

/* AF_STUDIO_PRODUCT_CARDNEWS_CAROUSEL_V6_20260728_END */

/* AF_STUDIO_PRODUCT_CARDNEWS_MEDIA_SLOTS_V7_20260728_START */
.quick-card .quick-icon {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
  line-height: 1 !important;
  text-align: center !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}
.quick-card .quick-icon::before,
.quick-card .quick-icon::after { display: none !important; }

.media-result-card.is-info-card {
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,244,253,.98));
}
.media-result-card.is-info-card::before {
  content: "";
  position: absolute;
  inset: 13px 13px auto 13px;
  height: 31%;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(92,72,238,.16), rgba(92,72,238,.04)),
    linear-gradient(#dfe3f1 0 0) 12px 12px / 62% 4px no-repeat,
    linear-gradient(#e9ebf4 0 0) 12px 23px / 78% 3px no-repeat,
    linear-gradient(#e9ebf4 0 0) 12px 32px / 51% 3px no-repeat;
}
.media-result-card.is-info-card::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  top: 43%;
  height: 25%;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(25,31,53,.08) 49%, transparent 49% 52%, rgba(25,31,53,.05) 52%);
}
.media-result-card.is-info-card .result-card-overlay {
  background: linear-gradient(180deg, transparent 0 43%, rgba(255,255,255,.2) 43%, rgba(20,24,43,.88) 100%);
}
/* AF_STUDIO_PRODUCT_CARDNEWS_MEDIA_SLOTS_V7_20260728_END */


/* AF_STUDIO_PRODUCT_CARDNEWS_CUSTOMER_FLOW_V8_20260728_START */
.af-svg-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.button-icon {
  width: 17px;
  height: 17px;
}

.mode-icon,
.file-icon,
.media-plus,
.media-remove,
.nav-create-icon {
  display: grid;
  place-items: center;
}

.mode-icon .af-svg-icon,
.file-icon .af-svg-icon {
  width: 18px;
  height: 18px;
}

.media-plus .af-svg-icon {
  width: 25px;
  height: 25px;
}

.media-remove .af-svg-icon {
  width: 15px;
  height: 15px;
}

.nav-create-icon svg {
  display: block;
  width: 27px;
  height: 27px;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

.publish-result-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}

.retry-channel-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  white-space: nowrap;
}

.retry-icon {
  width: 15px;
  height: 15px;
}

@media (max-width: 420px) {
  .review-channel {
    align-items: start;
  }

  .publish-result-actions {
    max-width: 142px;
  }

  .retry-channel-button {
    min-height: 32px;
    padding: 0 10px;
    font-size: 10px;
  }
}
/* AF_STUDIO_PRODUCT_CARDNEWS_CUSTOMER_FLOW_V8_20260728_END */

/* AF_STUDIO_MOBILE_INTERFACE_SITE_CONCEPTS_V10_20260728_START */
body,
button,
input,
textarea,
select {
  word-break: keep-all;
}

body.is-public-route {
  background: #f6f7fb;
}

body.is-public-route .bottom-nav {
  display: none !important;
}

body.is-public-route .app-main {
  padding-bottom: max(26px, env(safe-area-inset-bottom));
}

body.is-public-route header {
  border-bottom-color: rgba(22, 27, 45, .06);
  background: rgba(255, 255, 255, .90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

body.is-public-route .credit {
  min-width: 68px;
}

.studio-svg,
.nav-create-svg {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.studio-svg svg,
.nav-create-svg svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-create-svg {
  width: 27px;
  height: 27px;
}

.media-plus .studio-svg,
.mode-icon .studio-svg,
.file-icon .studio-svg,
.media-remove .studio-svg {
  width: 18px;
  height: 18px;
}

.media-remove .studio-svg {
  color: #fff;
}

.public-page {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 16px 34px;
  color: #161a29;
}

.public-page h1,
.public-page h2,
.public-page p,
.public-page strong,
.public-page small,
.public-page span {
  word-break: keep-all;
}

.public-hero {
  position: relative;
  overflow: hidden;
  padding: 34px 24px 27px;
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 12%, rgba(142, 125, 255, .50), transparent 31%),
    radial-gradient(circle at 15% 88%, rgba(75, 119, 255, .22), transparent 34%),
    linear-gradient(155deg, #0d1120 0%, #171a35 55%, #4d42c9 140%);
  box-shadow: 0 24px 55px rgba(22, 28, 58, .20);
}

.public-hero::after {
  content: "";
  position: absolute;
  width: 154px;
  height: 154px;
  right: -64px;
  bottom: -88px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 0 0 21px rgba(255,255,255,.035),
    0 0 0 43px rgba(255,255,255,.025);
}

.public-badge,
.public-kicker {
  margin: 0 0 11px;
  color: #776be8;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
}

.public-badge {
  color: rgba(255,255,255,.65);
}

.public-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(31px, 9vw, 43px);
  line-height: 1.13;
  letter-spacing: -.055em;
}

.public-hero > p {
  position: relative;
  z-index: 1;
  max-width: 330px;
  margin: 17px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.75;
}

.public-hero-actions {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  margin-top: 25px;
}

.public-primary {
  gap: 9px;
  color: #fff;
  background: linear-gradient(145deg, #6657ee, #897dff);
  box-shadow: 0 13px 30px rgba(78, 64, 214, .27);
}

.public-ghost {
  color: #2f3448;
  border: 1px solid #e2e4ec;
  background: #fff;
}

.public-hero .public-ghost {
  color: #fff;
  border-color: rgba(255,255,255,.17);
  background: rgba(255,255,255,.09);
  box-shadow: none;
}

.public-trust-line {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 19px minmax(0,1fr);
  gap: 8px;
  align-items: center;
  margin-top: 17px;
  color: rgba(255,255,255,.68);
  font-size: 10px;
  line-height: 1.5;
}

.public-section {
  margin-top: 35px;
}

.public-section h2,
.public-final-cta h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.045em;
}

.pain-flow {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 9px;
  margin-top: 17px;
}

.pain-before,
.pain-after {
  min-height: 166px;
  padding: 16px;
  border-radius: 21px;
}

.pain-before {
  border: 1px solid #e5e7ee;
  background: #fff;
}

.pain-after {
  color: #fff;
  background: linear-gradient(145deg, #171c31, #6558dc);
  box-shadow: 0 15px 32px rgba(48, 43, 113, .16);
}

.pain-before > span,
.pain-after > span {
  display: block;
  margin-bottom: 13px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .05em;
  opacity: .68;
}

.pain-before small {
  display: block;
  margin-top: 8px;
  padding: 8px 9px;
  border-radius: 10px;
  color: #687083;
  background: #f6f7f9;
  font-size: 9px;
}

.pain-after strong,
.pain-after b {
  display: block;
}

.pain-after strong {
  margin-top: 25px;
  font-size: 22px;
  line-height: 1.1;
}

.pain-after b {
  margin-top: 10px;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  line-height: 1.5;
}

.service-choice {
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  gap: 13px;
  align-items: center;
  margin-top: 10px;
  padding: 16px;
  border: 1px solid #e7e8ef;
  border-radius: 20px;
  text-align: left;
  color: #1a1e2d;
  background: #fff;
  box-shadow: 0 8px 22px rgba(25, 30, 51, .045);
}

.service-choice.is-ready {
  cursor: pointer;
}

.service-choice.is-ready:active {
  transform: scale(.992);
}

.service-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #5e52d9;
  background: #f0eeff;
}

.service-icon .studio-svg {
  width: 24px;
  height: 24px;
}

.service-copy strong,
.service-copy small {
  display: block;
}

.service-copy strong {
  font-size: 14px;
  letter-spacing: -.02em;
}

.service-copy small {
  margin-top: 5px;
  color: #747b8d;
  font-size: 10px;
  line-height: 1.55;
}

.service-arrow {
  color: #777e91;
}

.service-arrow .studio-svg {
  width: 18px;
  height: 18px;
}

.soon-label {
  padding: 6px 8px;
  border-radius: 9px;
  color: #8a90a0;
  background: #f2f3f6;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.result-showcase {
  padding: 23px 18px 20px;
  border-radius: 25px;
  background: linear-gradient(145deg, #fff, #f1f0fb);
  box-shadow: 0 13px 35px rgba(38, 41, 75, .07);
}

.public-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
  margin-top: 18px;
}

.public-result-card {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 9px;
  border-radius: 14px;
}

.public-result-card.media {
  color: #fff;
  background: linear-gradient(145deg, #161c31, #695bdc);
}

.public-result-card.info {
  color: #24293a;
  background: linear-gradient(145deg, #fff, #e8e9f4);
}

.public-result-card span {
  font-size: 8px;
  font-weight: 800;
  opacity: .72;
}

.public-result-card i {
  flex: 1;
  display: block;
  margin: 9px 0;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.02));
}

.public-result-card.info i {
  background:
    linear-gradient(#d8dbe7 0 0) 8px 10px / 65% 4px no-repeat,
    linear-gradient(#e5e7ef 0 0) 8px 21px / 80% 3px no-repeat,
    linear-gradient(#e5e7ef 0 0) 8px 30px / 51% 3px no-repeat,
    #f3f4f8;
}

.public-result-card b {
  font-size: 8px;
  line-height: 1.3;
}

.public-output-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.public-output-list span {
  padding: 7px 9px;
  border-radius: 10px;
  color: #555d73;
  background: rgba(255,255,255,.85);
  font-size: 9px;
  font-weight: 750;
}

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

.landing-template {
  min-height: 92px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 58px;
  gap: 8px;
  align-items: center;
  padding: 13px;
  border: 1px solid #e5e7ee;
  border-radius: 18px;
  background: #fff;
}

.landing-template span strong,
.landing-template span small {
  display: block;
}

.landing-template span strong {
  font-size: 12px;
}

.landing-template span small {
  margin-top: 4px;
  color: #818797;
  font-size: 8px;
}

.landing-template > i {
  position: relative;
  height: 66px;
  overflow: hidden;
  border-radius: 10px;
  background: #f1f2f6;
}

.landing-template > i b,
.landing-template > i em {
  position: absolute;
  left: 8px;
  right: 8px;
  display: block;
  border-radius: 4px;
}

.landing-template > i b {
  top: 9px;
  height: 26px;
}

.landing-template > i em {
  bottom: 10px;
  height: 5px;
}

.landing-template > i.clean b { background: linear-gradient(145deg, #21283c, #6e62df); }
.landing-template > i.clean em { background: #cdd1dd; }
.landing-template > i.soft { background: #f4eee9; }
.landing-template > i.soft b { background: #d9c5bc; }
.landing-template > i.soft em { background: #c6aaa0; }
.landing-template > i.bold { background: #191d2b; }
.landing-template > i.bold b { background: #ff654f; }
.landing-template > i.bold em { background: #fff; }
.landing-template > i.lux { background: #11131a; }
.landing-template > i.lux b { border: 1px solid #c8a968; background: #25211a; }
.landing-template > i.lux em { background: #c8a968; }

.public-steps {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.public-steps > div {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding: 15px;
  border: 1px solid #e7e8ef;
  border-radius: 18px;
  background: #fff;
}

.public-steps > div > b {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #5d51db;
  background: #efedff;
  font-size: 11px;
  line-height: 1;
}

.public-steps span strong,
.public-steps span small {
  display: block;
}

.public-steps span strong {
  font-size: 13px;
}

.public-steps span small {
  margin-top: 4px;
  color: #7e8495;
  font-size: 10px;
  line-height: 1.5;
}

.trust-section {
  padding: 22px 18px;
  border-radius: 25px;
  color: #fff;
  background: linear-gradient(150deg, #111626, #282654);
}

.trust-section .public-kicker {
  color: #a79fff;
}

.trust-list {
  display: grid;
  gap: 13px;
  margin-top: 19px;
}

.trust-list > div {
  display: grid;
  grid-template-columns: 25px minmax(0,1fr);
  gap: 9px;
  align-items: start;
}

.trust-list .studio-svg {
  color: #a9a1ff;
}

.trust-list strong,
.trust-list small {
  display: block;
}

.trust-list strong {
  font-size: 11px;
}

.trust-list small {
  margin-top: 4px;
  color: rgba(255,255,255,.57);
  font-size: 9px;
  line-height: 1.5;
}

.faq-preview {
  display: grid;
  gap: 8px;
  margin: 16px 0 10px;
}

.faq-preview > div {
  padding: 15px;
  border: 1px solid #e5e7ee;
  border-radius: 17px;
  background: #fff;
}

.faq-preview strong,
.faq-preview small {
  display: block;
}

.faq-preview strong {
  font-size: 12px;
}

.faq-preview small {
  margin-top: 6px;
  color: #777e8f;
  font-size: 10px;
  line-height: 1.55;
}

.public-final-cta {
  margin-top: 35px;
  padding: 25px 20px;
  border: 1px solid #e2e3ed;
  border-radius: 25px;
  text-align: center;
  background: #fff;
}

.public-final-cta > p {
  margin: 10px 0 18px;
  color: #757c8f;
  font-size: 11px;
  line-height: 1.65;
}

.public-cta-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 15px;
  border-radius: 16px;
  color: #5d51da;
  background: #efedff;
}

.public-cta-icon .studio-svg {
  width: 23px;
  height: 23px;
}

.public-back {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: 15px;
  border: 1px solid #e2e4ec;
  border-radius: 14px;
  color: #22283a;
  background: #fff;
  line-height: 1;
}

.public-back .studio-svg {
  transform: rotate(180deg);
}

.tour-head,
.help-head {
  padding: 10px 4px 6px;
}

.tour-head h1,
.auth-copy h1,
.help-head h1 {
  margin: 0;
  font-size: 31px;
  line-height: 1.14;
  letter-spacing: -.052em;
}

.tour-head > p:last-child,
.auth-copy > p:last-child,
.help-head > p:last-child {
  margin: 13px 0 0;
  color: #737a8d;
  font-size: 12px;
  line-height: 1.7;
}

.tour-result-panel {
  margin-top: 20px;
  padding: 17px;
  border-radius: 25px;
  background: #111627;
  box-shadow: 0 20px 45px rgba(20, 25, 45, .18);
}

.tour-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
}

.tour-card {
  min-width: 0;
  min-height: 137px;
  display: flex;
  flex-direction: column;
  padding: 9px;
  border-radius: 14px;
}

.tour-media {
  color: #fff;
  background: linear-gradient(145deg, #342e70, #7366e9);
}

.tour-info {
  color: #24283a;
  background: linear-gradient(145deg, #fff, #e8eaf2);
}

.tour-card span {
  font-size: 8px;
  font-weight: 850;
  opacity: .68;
}

.tour-card div {
  flex: 1;
  margin: 8px 0;
  border-radius: 8px;
  background:
    radial-gradient(circle at 70% 27%, rgba(255,255,255,.3), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.02));
}

.tour-info div {
  background:
    linear-gradient(#d8dbe5 0 0) 8px 10px / 68% 4px no-repeat,
    linear-gradient(#e5e7ee 0 0) 8px 21px / 82% 3px no-repeat,
    linear-gradient(#e5e7ee 0 0) 8px 31px / 54% 3px no-repeat,
    #f5f6f9;
}

.tour-card strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-card small {
  margin-top: 3px;
  font-size: 7px;
  opacity: .67;
}

.tour-caption-list {
  display: grid;
  gap: 10px;
  margin-top: 17px;
}

.tour-caption-list > div {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  gap: 9px;
  align-items: center;
  color: #fff;
}

.tour-caption-list .studio-svg {
  color: #9b91ff;
}

.tour-caption-list strong,
.tour-caption-list small {
  display: block;
}

.tour-caption-list strong {
  font-size: 11px;
}

.tour-caption-list small {
  margin-top: 3px;
  color: rgba(255,255,255,.55);
  font-size: 9px;
}

.tour-process {
  display: grid;
  grid-template-columns: minmax(0,1fr) 35px minmax(0,1fr);
  gap: 7px;
  align-items: center;
  margin-top: 13px;
}

.tour-process > div {
  padding: 13px;
  border: 1px solid #e3e5ed;
  border-radius: 15px;
  background: #fff;
}

.tour-process b,
.tour-process strong {
  display: block;
}

.tour-process b {
  color: #776be8;
  font-size: 8px;
}

.tour-process strong {
  margin-top: 4px;
  font-size: 10px;
}

.tour-process i {
  height: 1px;
  background: #d6d9e3;
}

.tour-cta {
  margin-top: 20px;
}

.tour-cta .btn + .btn {
  margin-top: 8px;
}

.auth-page {
  min-height: calc(100dvh - 85px);
  display: flex;
  flex-direction: column;
}

.auth-brand {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 5px 0 28px;
  color: #2a2f42;
}

.auth-brand > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #111628, #7164e9);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.auth-brand strong {
  font-size: 12px;
  letter-spacing: .035em;
}

.auth-card,
.custom-card {
  display: grid;
  gap: 14px;
  margin-top: 25px;
  padding: 19px;
  border: 1px solid #e5e6ed;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(30, 35, 60, .07);
}

.auth-card .field,
.custom-card .field {
  gap: 8px;
}

.auth-card .field label,
.custom-card .field label {
  color: #33394b;
  font-size: 11px;
}

.auth-card .input,
.custom-card .input,
.custom-card .textarea {
  min-height: 52px;
  border-radius: 15px;
  background: #fafbfc;
}

.auth-text-button {
  border: 0;
  color: #73798a;
  background: transparent;
  font-size: 10px;
  text-align: center;
}

.auth-switch {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  color: #858b9a;
  font-size: 11px;
}

.auth-switch button {
  border: 0;
  color: #594dd3;
  background: transparent;
  font-size: inherit;
  font-weight: 800;
}

.auth-agree {
  display: grid;
  grid-template-columns: 19px minmax(0,1fr);
  gap: 8px;
  align-items: start;
  color: #696f80;
  font-size: 10px;
  line-height: 1.5;
}

.auth-agree input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #6558df;
}

.auth-demo-notice {
  margin: auto 4px 0;
  padding-top: 22px;
  color: #9297a5;
  font-size: 9px;
  line-height: 1.6;
  text-align: center;
}

.help-list {
  display: grid;
  gap: 9px;
  margin: 21px 0;
}

.help-list > div {
  display: grid;
  grid-template-columns: 39px minmax(0,1fr);
  gap: 11px;
  align-items: start;
  padding: 15px;
  border: 1px solid #e4e6ed;
  border-radius: 18px;
  background: #fff;
}

.help-list > div > b {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #5e52d8;
  background: #efedff;
  font-size: 10px;
  line-height: 1;
}

.help-list strong,
.help-list small {
  display: block;
}

.help-list strong {
  font-size: 12px;
}

.help-list small {
  margin-top: 5px;
  color: #757c8e;
  font-size: 10px;
  line-height: 1.6;
}

.create-hub-page {
  display: grid;
  gap: 10px;
}

.create-service-card {
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid #e4e6ed;
  border-radius: 20px;
  text-align: left;
  color: #222737;
  background: #fff;
}

.create-service-card.available {
  box-shadow: 0 9px 24px rgba(29, 34, 59, .05);
}

.create-service-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #5f53da;
  background: #efedff;
}

.create-service-icon .studio-svg {
  width: 24px;
  height: 24px;
}

.create-service-card > span:nth-child(2) strong,
.create-service-card > span:nth-child(2) small,
.create-service-card > span:nth-child(2) em {
  display: block;
}

.create-service-card > span:nth-child(2) strong {
  font-size: 14px;
}

.create-service-card > span:nth-child(2) small {
  margin-top: 5px;
  color: #777e90;
  font-size: 10px;
  line-height: 1.5;
}

.create-service-card > span:nth-child(2) em {
  margin-top: 7px;
  color: #5e52d8;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.interface-notice {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  gap: 9px;
  align-items: start;
  margin-top: 3px;
  padding: 14px;
  border-radius: 17px;
  color: #615423;
  background: #fff7dc;
}

.interface-notice strong,
.interface-notice small {
  display: block;
}

.interface-notice strong {
  font-size: 10px;
}

.interface-notice small {
  margin-top: 4px;
  font-size: 9px;
  line-height: 1.55;
}

.customer-welcome {
  position: relative;
  overflow: hidden;
  padding: 27px 21px 23px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 15%, rgba(134,119,255,.48), transparent 29%),
    linear-gradient(150deg, #0e1323, #252754 70%, #5549bf 130%);
  box-shadow: 0 21px 45px rgba(25, 30, 59, .17);
}

.customer-welcome > p {
  margin: 0;
  color: rgba(255,255,255,.66);
  font-size: 10px;
}

.customer-welcome h1 {
  margin: 8px 0 20px;
  font-size: 30px;
  line-height: 1.13;
  letter-spacing: -.05em;
}

.customer-create-button {
  gap: 8px;
  color: #202437;
  background: #fff;
}

.customer-create-button .studio-svg {
  width: 18px;
  height: 18px;
}

.home-status-caption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin: 23px 2px 9px;
}

.home-status-caption span {
  font-size: 12px;
  font-weight: 800;
}

.home-status-caption small {
  color: #969ba8;
  font-size: 8px;
}

.home-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}

.home-status-grid button {
  min-height: 85px;
  padding: 14px;
  border: 1px solid #e5e7ed;
  border-radius: 18px;
  text-align: left;
  color: #24293a;
  background: #fff;
}

.home-status-grid strong,
.home-status-grid span {
  display: block;
}

.home-status-grid strong {
  font-size: 23px;
  line-height: 1;
}

.home-status-grid span {
  margin-top: 8px;
  color: #777e8f;
  font-size: 10px;
}

.home-workflow-card {
  margin-top: 12px;
  padding: 17px;
  border-radius: 22px;
  background: #f1f0fb;
}

.home-workflow-head {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 10px;
  align-items: center;
}

.home-workflow-head > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #5e52d8;
  background: #fff;
}

.home-workflow-head strong,
.home-workflow-head small {
  display: block;
}

.home-workflow-head strong {
  font-size: 12px;
}

.home-workflow-head small {
  margin-top: 4px;
  color: #7a8192;
  font-size: 9px;
}

.home-workflow-steps {
  display: grid;
  grid-template-columns: auto minmax(14px,1fr) auto minmax(14px,1fr) auto;
  align-items: start;
  margin: 17px 0;
}

.home-workflow-steps > span {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.home-workflow-steps b {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #9298a7;
  background: #fff;
  font-size: 9px;
}

.home-workflow-steps span.done b,
.home-workflow-steps span.current b {
  color: #fff;
  background: #6659df;
}

.home-workflow-steps small {
  color: #747b8c;
  font-size: 8px;
  white-space: nowrap;
}

.home-workflow-steps i {
  height: 1px;
  margin-top: 15px;
  background: #d4d5e4;
}

.home-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  margin-top: 19px;
}

.home-quick-grid button {
  min-height: 117px;
  padding: 15px;
  border: 1px solid #e4e6ed;
  border-radius: 19px;
  text-align: left;
  color: #252a3b;
  background: #fff;
}

.home-quick-grid button > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 13px;
  border-radius: 13px;
  color: #5f53d9;
  background: #efedff;
}

.home-quick-grid strong,
.home-quick-grid small {
  display: block;
}

.home-quick-grid strong {
  font-size: 12px;
}

.home-quick-grid small {
  margin-top: 5px;
  color: #7b8293;
  font-size: 9px;
  line-height: 1.45;
}

.future-analysis-card {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr);
  gap: 11px;
  align-items: start;
  margin-top: 12px;
  padding: 15px;
  border-radius: 19px;
  color: #fff;
  background: #171c2e;
}

.future-analysis-card > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #aaa2ff;
  background: rgba(255,255,255,.08);
}

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

.future-analysis-card strong {
  font-size: 11px;
}

.future-analysis-card small {
  margin-top: 5px;
  color: rgba(255,255,255,.55);
  font-size: 9px;
  line-height: 1.55;
}

@media (min-width: 560px) {
  .public-page {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* AF_STUDIO_MOBILE_INTERFACE_SITE_CONCEPTS_V10_20260728_END */