/* ==========================================================================
   /solution/snapskin 페이지 전용 CSS
   ----------------------------------------------------------------------------
   - 솔루션 디바이더 · 부가 서비스 · 포트폴리오 마키 (.sk-part / .sk-extra / .sk-portfolio)
   - 분산→통합 어드민 비주얼 (.sk-merge)
   - snapskin/index.php 에서 style.css 다음에 로드.
   - body.page-snapskin 의 hero word-break 룰은 .page-snapfit/.page-snappush/
     .page-snapads 와 공유되어 style.css 에 그대로 둠.
   ========================================================================== */

/* 한글 어절 단위로 줄바꿈 (snapskin hero) */
.page-snapskin .hero-h1,
.page-snapskin .hero-sub { word-break: keep-all; }



/* 솔루션 메인 디바이더 */
.sk-part-divider {
  padding: clamp(72px, 9vw, 120px) 0 clamp(32px, 4vw, 56px);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(38, 153, 251, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, #F4F8FF 0%, #FAFBFD 100%);
  border-top: 1px solid #E6E9F0;
  border-bottom: 1px solid #E6E9F0;
  text-align: center;
}
.sk-part__tag {
  display: inline-block;
  padding: 6px 16px;
  background: linear-gradient(160deg, #2699FB 0%, #5BB6FF 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 20px;
  box-shadow: 0 8px 20px -8px rgba(38, 153, 251, 0.55);
}
.sk-part__title {
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.035em;
  color: #0F172A;
  margin: 0 0 14px;
  word-break: keep-all;
}
.sk-part__sub {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
  color: #475569;
  letter-spacing: -0.012em;
  word-break: keep-all;
  max-width: 640px;
  margin: 0 auto;
}

/* 부가 서비스 — 홈페이지 제작 4 카드 */
.sk-extra {
  padding: clamp(72px, 9vw, 120px) 0;
}
.sk-extra__tag {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(148, 163, 184, 0.16);
  color: #475569;
  border: 1px solid rgba(148, 163, 184, 0.30);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.sk-extra__title {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: #0F172A;
  margin: 0 0 14px;
  word-break: keep-all;
}
.sk-extra__sub {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.7;
  color: #475569;
  margin: 0 auto;
  max-width: 680px;
  letter-spacing: -0.012em;
  word-break: keep-all;
}

.sk-extra__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
}
@media (min-width: 720px)  { .sk-extra__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1100px) { .sk-extra__grid { gap: 24px; } }

.sk-extra__card {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 26px 24px;
  background: #fff;
  border: 1px solid #E6E9F0;
  border-radius: 14px;
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.sk-extra__card:hover {
  transform: translateY(-3px);
  border-color: #94A3B8;
  box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.18);
}
.sk-extra__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  background: #F1F3F7;
  color: #475569;
  border-radius: 10px;
  font-size: 22px;
  margin-bottom: 4px;
}
.sk-extra__card-title {
  font-size: 17px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
  margin: 0;
}
.sk-extra__card-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: #475569;
  margin: 0;
  letter-spacing: -0.012em;
  word-break: keep-all;
  flex: 1;
}
.sk-extra__card-tags {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.sk-extra__card-tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  background: #F1F3F7;
  color: #475569;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.sk-extra__note {
  margin: 28px 0 0;
  text-align: center;
  font-size: 13px;
  color: #94A3B8;
  letter-spacing: -0.012em;
  width: 100%;
}

/* ─── 제작 포트폴리오 마퀴 ─── */
.sk-portfolio {
  margin-top: clamp(56px, 7vw, 88px);
}
.sk-portfolio__label {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0F172A;
  text-align: center;
  margin: 0 0 32px;
}
.sk-portfolio__marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.sk-portfolio__track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: skPortfolioScroll 48s linear infinite;
}
.sk-portfolio__item {
  display: inline-flex;
  flex-shrink: 0;
  width: clamp(180px, 16vw, 280px);
  aspect-ratio: 9 / 19.5;
  border-radius: 22px;
  overflow: hidden;
  background: #F1F4F9;
  border: 1px solid #E2E7EE;
  box-shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.12);
}
.sk-portfolio__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
@keyframes skPortfolioScroll {
  to { transform: translateX(-50%); }
}

@media (max-width: 0) {
  /* 마케팅 비주얼이라 속도만 늦춰서 유지 */
  .sk-portfolio__track {
    animation-duration: 60s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ==========================================================================
   /solution/snapskin · PROBLEM 분산 → 통합 어드민 (sq-chat 대체)
   ========================================================================== */
.sk-merge {
  max-width: 1020px;
  margin: clamp(36px, 4vw, 56px) auto 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
}
.sk-merge__label {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 700;
  color: #6B7280;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.sk-merge__label--brand { color: #1664A9; }

/* Before — 코드 에디터 mockup (HTML 의존 표현) */
.sk-merge__codepad {
  background: #0F172A;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 40px -16px rgba(15, 23, 42, 0.4);
  font-family: 'JetBrains Mono', 'D2 Coding', Menlo, Consolas, monospace;
}
.sk-merge__codepad-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: #1E293B;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sk-merge__codepad-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #475569;
}
.sk-merge__codepad-dot--r { background: #EF4444; }
.sk-merge__codepad-dot--y { background: #F59E0B; }
.sk-merge__codepad-dot--g { background: #10B981; }
.sk-merge__codepad-file {
  margin-left: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
}
.sk-merge__codepad-file i { color: #E5E9EF; font-size: 14px; }

.sk-merge__code {
  padding: 12px 0;
  background: #0F172A;
}
.sk-merge__code-line {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  font-size: 12px;
  line-height: 1.7;
}
.sk-merge__code-line code {
  color: #E5E9EF;
  font-family: inherit;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sk-merge__code-num {
  text-align: right;
  padding-right: 12px;
  color: #475569;
  font-size: 11px;
  user-select: none;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.sk-merge__code .t-tag  { color: #F472B6; }
.sk-merge__code .t-attr { color: #FBBF24; }
.sk-merge__code .t-str  { color: #6FB8FF; }

.sk-merge__caret {
  display: inline-block;
  width: 7px; height: 14px;
  margin-left: 2px;
  background: #5BB6FF;
  vertical-align: middle;
  animation: skCaretBlink 1s steps(2) infinite;
}
@keyframes skCaretBlink { 50% { opacity: 0; } }

.sk-merge__codepad-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(220, 38, 38, 0.12);
  border-top: 1px solid rgba(220, 38, 38, 0.25);
  font-family: var(--font-base, -apple-system, sans-serif);
  font-size: 12px;
  color: #FCA5A5;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.sk-merge__codepad-foot i { font-size: 15px; flex-shrink: 0; }

/* DEAD — (구) 5개 탭 분산 스택. HTML 의존 메시지로 전환되며 사용 안 함. */
@media (max-width: 0px) {
.sk-merge__stack {
  position: relative;
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.sk-merge__tab {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #E5E9EF;
  border-radius: 10px;
  font-size: 12.5px; font-weight: 600;
  color: #6B7280;
  letter-spacing: -0.012em;
  box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.08);
  transform-origin: left center;
  transform: rotate(calc(var(--n, 0) * 0.6deg - 1.2deg)) translateX(calc(var(--n, 0) * 2px));
  animation: skTabSway 5.6s ease-in-out infinite;
  animation-delay: calc(var(--n, 0) * 0.18s);
}
.sk-merge__tab-ico {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #F1F4F8;
  color: #9CA3AF;
  border-radius: 6px;
  font-size: 13px;
  flex-shrink: 0;
}
.sk-merge__tab-t { white-space: nowrap; }
@keyframes skTabSway {
  0%, 100% { transform: rotate(calc(var(--n, 0) * 0.6deg - 1.2deg)) translateX(calc(var(--n, 0) * 2px)); }
  50%      { transform: rotate(calc(var(--n, 0) * 0.6deg - 0.4deg)) translateX(calc(var(--n, 0) * 2px - 2px)); }
}
} /* end DEAD @media wrap for sk-merge stack/tab */

/* Bridge */
.sk-merge__bridge {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.sk-merge__bridge-arrow {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #2699FB 0%, #5BB6FF 60%, #A553E5 130%);
  color: #fff;
  border-radius: 50%;
  font-size: 22px;
  box-shadow: 0 10px 22px -8px rgba(38, 153, 251, 0.55);
  animation: skBridgePulse 2.4s ease-in-out infinite;
}
.sk-merge__bridge-text {
  font-size: 11px; font-weight: 800;
  color: #0F172A;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@keyframes skBridgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 22px -8px rgba(38, 153, 251, 0.55); }
  50%      { transform: scale(1.08); box-shadow: 0 14px 30px -8px rgba(38, 153, 251, 0.75); }
}

/* After — 통합 admin 패널 */
.sk-merge__panel {
  background: #fff;
  border: 1px solid #BFD9F6;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 36px -16px rgba(38, 153, 251, 0.22);
}
.sk-merge__panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(160deg, rgba(38, 153, 251, 0.08) 0%, rgba(165, 83, 229, 0.06) 100%);
  border-bottom: 1px solid #E5E9EF;
}
.sk-merge__panel-mark {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #2699FB 0%, #5BB6FF 60%, #A553E5 130%);
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
}
.sk-merge__panel-title {
  font-size: 13.5px; font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.01em;
}
.sk-merge__panel-dot {
  margin-left: auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  animation: skDotPulse 1.8s ease-in-out infinite;
}
@keyframes skDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
  50%      { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
}
.sk-merge__panel-list {
  margin: 0; padding: 12px 16px;
  list-style: none;
  display: flex; flex-direction: column;
  gap: 8px;
}
.sk-merge__panel-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: #FAFBFD;
  border: 1px solid #EEF1F6;
  border-radius: 7px;
  font-size: 12.5px; font-weight: 600;
  color: #0F172A;
  letter-spacing: -0.012em;
}
.sk-merge__panel-list i {
  color: #2699FB;
  font-size: 13px;
  flex-shrink: 0;
}

@media (max-width: 840px) {
  .sk-merge { grid-template-columns: 1fr; gap: 18px; }
  .sk-merge__bridge { flex-direction: row; }
}

/* ==========================================================================
   배너 · 아이콘 통합 관리 — 어드민 화면 mockup
   실제 어드민 (/web_admin/css/layout.css + base.css) 컬러 키:
     · brand purple #3A307F  · active bg #EEF2FF  · border #DFE1E8
     · btnNormal text #555 / bg #fff  · btnCtrl bg #3A307F
   ========================================================================== */
.sk-banner-mock {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 124px 1fr;
  background: #fff;
  color: #333;
  font-size: 9px;
  letter-spacing: -0.01em;
  overflow: hidden;
}

/* ─── 좌측 사이드바 (라이트) ─── */
.sk-banner-mock__side {
  background: #fff;
  border-right: 1px solid #DFE1E8;
  display: flex; flex-direction: column;
  min-width: 0;
}
.sk-banner-mock__profile {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 9px;
  border-bottom: 1px solid #DFE1E8;
  background: #fff;
}
.sk-banner-mock__avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #EEF2FF;
  display: inline-flex; align-items: center; justify-content: center;
  color: #3A307F;
  font-size: 11px;
  flex-shrink: 0;
}
.sk-banner-mock__profile-info {
  display: flex; flex-direction: column;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
}
.sk-banner-mock__profile-role {
  font-size: 7.5px;
  font-weight: 700;
  color: #333;
}
.sk-banner-mock__profile-id {
  font-size: 8px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sk-banner-mock__parents {
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 6px 4px 0;
}
.sk-banner-mock__parent {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 6px;
  font-size: 8.5px;
  font-weight: 600;
  color: #333;
  background: #fff;
  border-radius: 6px;
  white-space: nowrap;
}
.sk-banner-mock__parent i { font-size: 11px; color: #888; flex-shrink: 0; }
.sk-banner-mock__parent.is-on {
  background: #EEF2FF;
  color: #3A307F;
}
.sk-banner-mock__parent.is-on i { color: #3A307F; }
.sk-banner-mock__nav-h {
  font-size: 8.5px;
  font-weight: 600;
  color: #333;
  background: #f4f8fa;
  border-radius: 6px;
  padding: 5px 8px;
  margin: 4px 6px 2px;
}
.sk-banner-mock__nav {
  list-style: none;
  padding: 0 6px 8px;
  margin: 0;
  display: flex; flex-direction: column;
}
.sk-banner-mock__nav li {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 14px;
  font-size: 8.5px;
  color: #666;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sk-banner-mock__nav li.is-active {
  background: #EEF2FF;
  color: #3A307F;
  font-weight: 600;
}
.sk-banner-mock__nav-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #C9CFD8;
  flex-shrink: 0;
}
.sk-banner-mock__nav li.is-active .sk-banner-mock__nav-dot {
  background: #3A307F;
  box-shadow: 0 0 0 2px rgba(58, 48, 127, 0.18);
}

/* ─── 우측 메인 ─── */
.sk-banner-mock__main {
  display: flex; flex-direction: column;
  background: #fff;
  min-width: 0;
  min-height: 0;
}
.sk-banner-mock__crumb {
  padding: 9px 12px;
  background: #fff;
  border-bottom: 1px solid #DFE1E8;
}
.sk-banner-mock__page-title {
  font-size: 11px;
  font-weight: 600;
  color: #333;
  letter-spacing: -0.015em;
}
.sk-banner-mock__bar {
  display: flex; align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: #fff;
  border: 1px solid #DFE1E8;
  border-left: 0; border-right: 0;
}
.sk-banner-mock__count {
  font-size: 9px;
  color: #666;
}
.sk-banner-mock__count strong {
  color: #3A307F;
  font-weight: 600;
  margin: 0 1px;
}
.sk-banner-mock__bar-actions {
  margin-left: auto;
  display: flex; gap: 4px;
}
.sk-banner-mock__btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 8px;
  font-size: 8.5px;
  font-weight: 500;
  border-radius: 4px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1;
}
.sk-banner-mock__btn i { font-size: 9px; }
.sk-banner-mock__btn--ghost {
  background: #fff;
  color: #555;
  border: 1px solid #DFE1E8;
}
.sk-banner-mock__btn--primary {
  background: #3A307F;
  color: #fff;
  border: 1px solid #3A307F;
}

/* ─── 테이블 ─── */
.sk-banner-mock__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  font-size: 9px;
}
.sk-banner-mock__table th,
.sk-banner-mock__table td {
  padding: 7px 5px;
  border-bottom: 1px solid #EEF0F4;
  text-align: center;
  vertical-align: middle;
  color: #333;
}
.sk-banner-mock__table thead th {
  background: #FAFBFC;
  font-size: 8.5px;
  font-weight: 500;
  color: #666;
  letter-spacing: -0.01em;
  border-bottom: 1px solid #DFE1E8;
  padding: 6px 5px;
}
.sk-banner-mock__table th:nth-child(1),
.sk-banner-mock__table td:nth-child(1) { width: 18px; padding-left: 8px; }
.sk-banner-mock__table th:nth-child(2),
.sk-banner-mock__table td:nth-child(2) { width: 28px; color: #666; }
.sk-banner-mock__table th:nth-child(3),
.sk-banner-mock__table td:nth-child(3) { width: 60px; }
.sk-banner-mock__table th:nth-child(5),
.sk-banner-mock__table td:nth-child(5) { width: 48px; }
.sk-banner-mock__title-cell {
  text-align: left !important;
  color: #333;
  font-weight: 500;
  letter-spacing: -0.015em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 체크박스 — admin standard */
.sk-banner-mock__chk {
  display: inline-block;
  width: 12px; height: 12px;
  border: 1px solid #DFE1E8;
  border-radius: 3px;
  background: #fff;
  position: relative;
  vertical-align: middle;
}
.sk-banner-mock__chk.is-on {
  background: #3A307F;
  border-color: #3A307F;
}
.sk-banner-mock__chk.is-on::after {
  content: "";
  position: absolute;
  left: 3px; top: 0px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* SVG 배너 썸네일 */
.sk-banner-mock__thumb {
  width: 56px; height: 30px;
  border-radius: 3px;
  display: block;
  margin: 0 auto;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* 노출 텍스트 — admin 은 단순 텍스트지만 시각 강조 위해 라이트 칩 처리 */
.sk-banner-mock__badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 500;
  background: #f0f1f5;
  color: #888;
  border: 1px solid #DFE1E8;
}
.sk-banner-mock__badge.is-on {
  background: #EEF2FF;
  color: #3A307F;
  border-color: #DDE3F5;
}

/* 좁은 panel 에서 가독성 보장 */
@media (max-width: 1100px) {
  .sk-banner-mock { grid-template-columns: 108px 1fr; }
  .sk-banner-mock__nav li { font-size: 8px; padding-left: 12px; }
  .sk-banner-mock__profile-role { font-size: 7px; }
  .sk-banner-mock__profile-id { font-size: 7.5px; }
}
@media (max-width: 768px) {
  .sk-banner-mock { grid-template-columns: 92px 1fr; }
  .sk-banner-mock__profile-info { display: none; }
  .sk-banner-mock__parent span:not(.sk-banner-mock__nav-dot) { display: none; }
  .sk-banner-mock__nav li { padding: 3px 6px 3px 10px; font-size: 7.5px; }
  .sk-banner-mock__nav-h { font-size: 7.5px; padding: 4px 6px; }
  .sk-banner-mock__thumb { width: 44px; height: 24px; }
  .sk-banner-mock__table th:nth-child(3),
  .sk-banner-mock__table td:nth-child(3) { width: 50px; }
}

/* ==========================================================================
   메인 컨텐츠 순서 관리 — sortable 어드민 mockup
   참조: /generalidea/web_admin/board/skin/main_display/list.php
     · 액션 바: 좌측 ghost 버튼(선택삭제/노출/미노출) + 우측 purple(순서저장) + blue(섹션추가)
     · 행: chk · drag-handle · 순서 · 섹션타입 배지(displayYn=Y 시 #5cb85c) · 제목 · 노출
     · 드래그 시 sortable-ghost: opacity 0.4 + #f0f8ff bg
   ========================================================================== */
.sk-display-mock {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fff;
  color: #333;
  font-size: 9px;
  letter-spacing: -0.01em;
  overflow: hidden;
}

/* sticky 액션 바 */
.sk-display-mock__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 2px solid #DFE1E8;
  gap: 6px;
}
.sk-display-mock__bar-left,
.sk-display-mock__bar-right {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: nowrap;
}
.sk-display-mock__btn {
  display: inline-flex; align-items: center;
  padding: 4px 8px;
  font-size: 8.5px;
  font-weight: 500;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.2;
  border: 1px solid transparent;
  letter-spacing: -0.01em;
}
.sk-display-mock__btn--ghost {
  background: #f0f1f5;
  border-color: #DFE1E8;
  color: #555;
}
.sk-display-mock__btn--primary {
  background: #3A307F;
  border-color: #3A307F;
  color: #fff;
}
.sk-display-mock__btn--accent {
  background: #2C7DE8;
  border-color: #2C7DE8;
  color: #fff;
}

/* 테이블 */
.sk-display-mock__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  font-size: 9px;
}
.sk-display-mock__table th,
.sk-display-mock__table td {
  padding: 7px 5px;
  border-bottom: 1px solid #EEF0F4;
  text-align: center;
  vertical-align: middle;
  color: #333;
}
.sk-display-mock__table thead th {
  background: #FAFBFC;
  font-size: 8.5px;
  font-weight: 500;
  color: #666;
  letter-spacing: -0.01em;
  border-bottom: 1px solid #DFE1E8;
  padding: 6px 5px;
}
.sk-display-mock__table th:nth-child(1),
.sk-display-mock__table td:nth-child(1) { width: 18px; padding-left: 8px; }
.sk-display-mock__table th:nth-child(2),
.sk-display-mock__table td:nth-child(2) { width: 22px; }
.sk-display-mock__table th:nth-child(3),
.sk-display-mock__table td:nth-child(3) { width: 32px; color: #666; }
.sk-display-mock__table th:nth-child(4),
.sk-display-mock__table td:nth-child(4) { width: 84px; }
.sk-display-mock__table th:nth-child(6),
.sk-display-mock__table td:nth-child(6) { width: 38px; }

/* 행 hover / 드래그 상태 */
.sk-display-mock__table tbody tr { transition: background 0.2s; }
.sk-display-mock__table tbody tr.is-dragging {
  background: #F0F8FF;
  box-shadow: 0 4px 12px -4px rgba(58, 48, 127, 0.25);
  position: relative;
  z-index: 1;
}
.sk-display-mock__table tbody tr.is-dragging td {
  border-bottom-color: #C8DDF6;
}

/* 체크박스 (banner-mock 과 동일 톤) */
.sk-display-mock__chk {
  display: inline-block;
  width: 12px; height: 12px;
  border: 1px solid #DFE1E8;
  border-radius: 3px;
  background: #fff;
  position: relative;
  vertical-align: middle;
}
.sk-display-mock__chk.is-on {
  background: #3A307F;
  border-color: #3A307F;
}
.sk-display-mock__chk.is-on::after {
  content: "";
  position: absolute;
  left: 3px; top: 0px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* drag handle */
.sk-display-mock__col-grip { width: 22px; }
.sk-display-mock__grip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: #C0C5CD;
  font-size: 12px;
  cursor: grab;
}
.sk-display-mock__grip.is-active {
  color: #3A307F;
  cursor: grabbing;
}

/* 순서 숫자 */
.sk-display-mock__num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #666;
}

/* 섹션타입 배지 — displayYn=Y 시 green, 아니면 gray */
.sk-display-mock__type {
  display: inline-flex; align-items: center;
  padding: 3px 7px;
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 500;
  color: #fff;
  background: #999;
  letter-spacing: -0.01em;
}
.sk-display-mock__type.is-on { background: #5cb85c; }

/* 제목 */
.sk-display-mock__title {
  text-align: left !important;
  color: #333;
  font-weight: 500;
  letter-spacing: -0.015em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 노출 텍스트 — admin 은 색 텍스트, mockup 은 mini chip */
.sk-display-mock__state {
  display: inline-flex; align-items: center;
  font-size: 8.5px;
  font-weight: 500;
  color: #999;
}
.sk-display-mock__state.is-on { color: #5cb85c; font-weight: 600; }

/* 반응형 */
@media (max-width: 1100px) {
  .sk-display-mock__table th:nth-child(4),
  .sk-display-mock__table td:nth-child(4) { width: 72px; }
  .sk-display-mock__type { font-size: 8px; padding: 2px 5px; }
}
@media (max-width: 768px) {
  .sk-display-mock__bar { padding: 6px 8px; }
  .sk-display-mock__btn { font-size: 8px; padding: 3px 6px; }
  .sk-display-mock__table th:nth-child(4),
  .sk-display-mock__table td:nth-child(4) { width: 64px; }
  .sk-display-mock__type { font-size: 7.5px; }
}

/* ==========================================================================
   sortable 애니메이션 — 어드민 테이블의 행 2↔3 스왑 (BEST ↔ 컬렉션)
   명시적 행 높이 38px 강제 → translateY 38px = 정확히 한 행 만큼 이동.
   배경은 <tr> 가 아닌 > td 에 직접 입혀 cross-browser 안전 + 완전 불투명 보장.
   ========================================================================== */
.sk-display-mock__table tbody tr {
  position: relative;
  height: 38px;
}
.sk-display-mock__table tbody td { height: 38px; }

.sk-display-mock--anim .sk-display-mock__row--swap-down {
  animation: skSortRowDown 6s ease-in-out infinite;
}
.sk-display-mock--anim .sk-display-mock__row--swap-up {
  animation: skSortRowUp 6s ease-in-out infinite;
}
/* 드래그 row 의 td 에 직접 bg 애니메이션 — 아래 행 컨텐츠 완전 가림 */
.sk-display-mock--anim .sk-display-mock__row--swap-down > td {
  animation: skSortRowDownCell 6s ease-in-out infinite;
}
.sk-display-mock--anim .sk-display-mock__row--swap-down .sk-display-mock__grip {
  animation: skSortGrip 6s ease-in-out infinite;
}

/* 행 swap 사이클 (6s) — 두 행이 동시에 보이며 cross 하는 구간 자체를 제거.
   컬렉션은 fade-out → invisible snap → fade-in 으로 새 자리에 등장.
   BEST 는 컬렉션이 안 보이는 동안만 슬라이드해서 겹침 0.

     0-10%   : idle (원래 순서)
     10-15%  : BEST lift (drag pickup)
     18-25%  : 컬렉션 fade-out (원래 row 3 자리에서 사라짐)
     25-26%  : 컬렉션 invisible 상태로 row 2 자리로 snap
     25-45%  : BEST 가 lift 위치에서 row 3 자리로 슬라이드 (컬렉션 안 보이므로 cross 없음)
     50-60%  : 컬렉션 fade-in (새 자리 row 2 에 나타남)
     60-85%  : 교체 완료 상태 유지 (~1.5s)
     92-95%  : 양쪽 fade out
     96-99%  : invisible snap back
     99-100% : fade in (다음 사이클) */
@keyframes skSortRowDown {
  0%, 10%   { transform: translateY(0); z-index: 1; opacity: 1; box-shadow: none; }
  15%, 25%  { transform: translateY(-3px); z-index: 10; opacity: 1; box-shadow: 0 10px 22px -5px rgba(58, 48, 127, 0.5); }
  45%, 60%  { transform: translateY(38px); z-index: 10; opacity: 1; box-shadow: 0 10px 22px -5px rgba(58, 48, 127, 0.5); }
  70%, 85%  { transform: translateY(38px); z-index: 2; opacity: 1; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
  92%, 95%  { transform: translateY(38px); z-index: 2; opacity: 0; box-shadow: none; }
  96%, 99%  { transform: translateY(0); z-index: 1; opacity: 0; box-shadow: none; }
  100%      { transform: translateY(0); z-index: 1; opacity: 1; box-shadow: none; }
}

/* <td> 배경 — 드래그 중인 행은 항상 불투명 라이트블루 */
@keyframes skSortRowDownCell {
  0%, 10%   { background-color: #fff; }
  15%, 85%  { background-color: #F0F8FF; }
  92%, 99%  { background-color: #F0F8FF; }
  100%      { background-color: #fff; }
}

/* 컬렉션 row — fade-out → invisible snap → fade-in (cross 없는 깔끔한 교체) */
@keyframes skSortRowUp {
  0%, 18%   { transform: translateY(0); opacity: 1; }
  24%       { transform: translateY(0); opacity: 0; }       /* row 3 자리에서 사라짐 (빠른 fade-out) */
  25%, 45%  { transform: translateY(-38px); opacity: 0; }   /* invisible 상태로 row 2 자리에 snap */
  58%, 85%  { transform: translateY(-38px); opacity: 1; }   /* fade-in 후 hold */
  92%, 95%  { transform: translateY(-38px); opacity: 0; }
  96%, 99%  { transform: translateY(0); opacity: 0; }
  100%      { transform: translateY(0); opacity: 1; }
}

@keyframes skSortGrip {
  0%, 10%, 100% { color: #C0C5CD; }
  15%, 85%      { color: #3A307F; }
}

@media (max-width: 0) {
  .sk-display-mock--anim .sk-display-mock__row--swap-down,
  .sk-display-mock--anim .sk-display-mock__row--swap-up,
  .sk-display-mock--anim .sk-display-mock__row--swap-down > td,
  .sk-display-mock--anim .sk-display-mock__row--swap-down .sk-display-mock__grip {
    animation: none;
  }
  .sk-display-mock--anim .sk-display-mock__row--swap-down > td {
    background: #F0F8FF;
  }
}

/* ==========================================================================
   메인페이지 섹션 미리보기 — 어드민 변경이 실시간 반영되는 사이트 mockup
   admin 패널 아래에 별도 카드. 섹션 2↔3 (BEST ↔ 컬렉션) 동기 스왑.
   ========================================================================== */
.sk-display-preview {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  background: #fff;
  border: 1px solid rgba(199, 226, 251, 0.7);
  border-radius: 16px;
  box-shadow: 0 14px 36px -18px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}
.sk-display-preview__bar {
  display: flex; align-items: center;
  gap: 5px;
  padding: 9px 14px;
  background: #ECECEE;
  border-bottom: 1px solid #D6D6D9;
}
.sk-display-preview__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
}
.sk-display-preview__dot:nth-child(1) { background: #FF5F57; }
.sk-display-preview__dot:nth-child(2) { background: #FEBC2E; }
.sk-display-preview__dot:nth-child(3) { background: #28C840; }
.sk-display-preview__url {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px;
  padding: 3px 10px;
  background: #fff;
  border: 1px solid #D6D6D9;
  border-radius: 999px;
  font-size: 10px;
  color: #6B6B6F;
  letter-spacing: -0.01em;
}
.sk-display-preview__url i { font-size: 11px; }
.sk-display-preview__live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #3A307F;
  letter-spacing: -0.01em;
}
.sk-display-preview__pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3A307F;
  box-shadow: 0 0 0 0 rgba(58, 48, 127, 0.4);
  animation: skPreviewPulse 1.8s ease-out infinite;
}
@keyframes skPreviewPulse {
  0%   { box-shadow: 0 0 0 0 rgba(58, 48, 127, 0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(58, 48, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(58, 48, 127, 0); }
}

/* 페이지 본문 */
.sk-display-preview__page {
  padding: 16px 14px 14px;
  background: #FAFBFD;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.sk-display-preview__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px;
  margin-bottom: 12px;
}
.sk-display-preview__logo {
  width: 64px; height: 16px;
  background: linear-gradient(90deg, #3A307F 0%, #6A5BC7 100%);
  border-radius: 3px;
}
.sk-display-preview__nav {
  display: inline-flex; gap: 7px;
}
.sk-display-preview__nav i {
  width: 18px; height: 4px;
  background: #D6D9E1;
  border-radius: 2px;
  display: inline-block;
}

/* 섹션 스택 — 전체 5개 섹션 정적 배치 (메인페이지 모사).
   BEST ↔ 컬렉션 둘 만 어드민 row 와 동기로 swap 애니메이션. */
.sk-display-preview__sections {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

/* BEST 와 컬렉션 동일 min-height 강제 → 스왑 거리 일정하게 */
.sk-display-preview__sec--swap-down,
.sk-display-preview__sec--swap-up {
  position: relative;
  min-height: 160px;
}

/* swap 동기 애니메이션 — 어드민 .sk-display-mock__row--swap-down/up 와 6s 동일 사이클.
   swap 거리 = 섹션 높이(160) + gap(8) = 168px. */
.sk-display-preview__sec--swap-down {
  animation: skPreviewSecDown 6s ease-in-out infinite;
  z-index: 2;
}
.sk-display-preview__sec--swap-up {
  animation: skPreviewSecUp 6s ease-in-out infinite;
  z-index: 1;
}

/* BEST — row 2 → row 3 자리로 swap-down (어드민 의 swap-down 과 동일 타이밍).
   lift → 컬렉션 fade-out 대기 → 슬라이드 다운 → hold → fade reset */
@keyframes skPreviewSecDown {
  0%, 10%   { transform: translateY(0); opacity: 1; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); }
  15%, 25%  { transform: translateY(-4px); opacity: 1; box-shadow: 0 14px 30px -8px rgba(58, 48, 127, 0.4); }
  45%, 60%  { transform: translateY(168px); opacity: 1; box-shadow: 0 14px 30px -8px rgba(58, 48, 127, 0.4); }
  70%, 85%  { transform: translateY(168px); opacity: 1; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); }
  92%, 95%  { transform: translateY(168px); opacity: 0; box-shadow: none; }
  96%, 99%  { transform: translateY(0); opacity: 0; box-shadow: none; }
  100%      { transform: translateY(0); opacity: 1; }
}

/* 컬렉션 — fade-out → invisible snap to new pos → fade-in (어드민 컬렉션 row 와 동일 패턴) */
@keyframes skPreviewSecUp {
  0%, 18%   { transform: translateY(0); opacity: 1; }
  24%       { transform: translateY(0); opacity: 0; }       /* row 3 자리에서 사라짐 */
  25%, 45%  { transform: translateY(-168px); opacity: 0; }  /* invisible 상태로 row 2 자리에 snap */
  58%, 85%  { transform: translateY(-168px); opacity: 1; }  /* fade-in 후 hold */
  92%, 95%  { transform: translateY(-168px); opacity: 0; }
  96%, 99%  { transform: translateY(0); opacity: 0; }
  100%      { transform: translateY(0); opacity: 1; }
}

@media (max-width: 0) {
  .sk-display-preview__sec--swap-down,
  .sk-display-preview__sec--swap-up {
    animation: none;
  }
}

.sk-display-preview__sec {
  position: relative;
  background: #fff;
  border: 1px solid #E4E7EC;
  border-radius: 6px;
  overflow: hidden;
}
/* 공통 — main-tit (push 의 .main-tit) */
.sk-display-preview__sec-tit {
  font-size: 11px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.sk-display-preview__sec-label,
.sk-display-preview__sec-title {
  font-size: 9.5px;
  font-weight: 600;
  color: #333;
  letter-spacing: -0.015em;
}

/* 1. line_banner — 시즌 OFF 알림 배너 (얇은 strip) */
.sk-display-preview__sec--strip {
  height: 22px;
  background: linear-gradient(90deg, #FFE2C8 0%, #FFB37A 100%);
  border-color: #F4C49A;
  display: flex; align-items: center; justify-content: center;
}
.sk-display-preview__sec--strip .sk-display-preview__sec-label {
  font-size: 9.5px;
  color: #8A4F1A;
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* 2. tab_product — main-tit + tab_menu + prList 그리드 */
.sk-display-preview__sec--best {
  padding: 10px 12px 12px;
  background: #fff;
}
.sk-display-preview__sec--best .sk-display-preview__sec-tit {
  margin-bottom: 6px;
}
.sk-display-preview__sec-tabs {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid #EEF1F5;
  margin: 0 -2px 8px;
  padding: 0 2px 4px;
}
.sk-display-preview__sec-tabs span {
  font-size: 9px;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.04em;
  padding-bottom: 4px;
  position: relative;
}
.sk-display-preview__sec-tabs span.is-on {
  color: #0F172A;
}
.sk-display-preview__sec-tabs span.is-on::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 2px;
  background: #0F172A;
  border-radius: 2px;
}
.sk-display-preview__sec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.sk-display-preview__sec-thumb {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
}
.sk-display-preview__sec-thumb svg {
  width: 58%;
  height: 58%;
  display: block;
}
.sk-display-preview__sec-thumb--tee  { background: #FFE4E8; color: #E36E81; }
.sk-display-preview__sec-thumb--shoe { background: #DCE9FB; color: #4F88CC; }
.sk-display-preview__sec-thumb--bag  { background: #DEEEDB; color: #5BA471; }
.sk-display-preview__sec-thumb--cap  { background: #EAE0F8; color: #8B68C8; }

/* 3. collection_banner — main-tit + img-banner(txt 오버레이) + info(prList) */
.sk-display-preview__sec--coll {
  padding: 10px 12px 12px;
  background: #fff;
}
.sk-display-preview__sec--coll .sk-display-preview__sec-tit {
  margin-bottom: 8px;
}
.sk-display-preview__sec-banner {
  position: relative;
  height: 56px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}
.sk-display-preview__sec-banner svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sk-display-preview__sec-banner-txt {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.sk-display-preview__sec-banner-txt-01 {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.sk-display-preview__sec-banner-txt-02 {
  font-size: 8.5px;
  font-weight: 600;
  opacity: 0.92;
}
/* info — prList (가로 상품 카드 행) */
.sk-display-preview__sec-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.sk-display-preview__sec-info .sk-display-preview__sec-prod {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background: linear-gradient(135deg, #F1F3F7 0%, #E2E7EE 100%);
}

/* 4. video_section — main-tit + video frame */
.sk-display-preview__sec--video {
  padding: 10px 12px 12px;
  background: #fff;
}
.sk-display-preview__sec--video .sk-display-preview__sec-tit {
  margin-bottom: 8px;
}
.sk-display-preview__sec-video {
  position: relative;
  height: 56px;
  border-radius: 5px;
  background: linear-gradient(135deg, #1D2530 0%, #2D3645 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sk-display-preview__sec-play {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #1D2530;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}
.sk-display-preview__sec-video-time {
  position: absolute;
  right: 6px; bottom: 6px;
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  border-radius: 2px;
  letter-spacing: 0.02em;
}

/* 5. new_banner — main-tit + img-banner (텍스트 X) + info(prList) */
.sk-display-preview__sec--new {
  padding: 10px 12px 12px;
  background: #fff;
}
.sk-display-preview__sec--new .sk-display-preview__sec-tit {
  margin-bottom: 8px;
}
.sk-display-preview__sec-banner--purple {
  height: 50px;
}
.sk-display-preview__sec--new .sk-display-preview__sec-info {
  grid-template-columns: repeat(2, 1fr);
}


@media (max-width: 0) {
  .sk-display-preview__pulse { animation: none; }
}

/* 반응형 — 미리보기 */
@media (max-width: 1100px) {
  .sk-display-preview { margin-top: 14px; }
  .sk-display-preview__page { padding: 12px; }
}
@media (max-width: 768px) {
  .sk-display-preview__url { font-size: 9px; padding: 2px 8px; }
  .sk-display-preview__sec-label,
  .sk-display-preview__sec-title { font-size: 9px; }
  .sk-display-preview__sec--swap-down,
  .sk-display-preview__sec--swap-up { min-height: 140px; }
  /* 모바일 — 스왑 거리 = 섹션 140 + gap 8 = 148px */
  @keyframes skPreviewSecDown {
    0%, 10%   { transform: translateY(0); }
    15%, 25%  { transform: translateY(-4px); box-shadow: 0 12px 24px -6px rgba(58, 48, 127, 0.35); }
    45%, 60%  { transform: translateY(148px); box-shadow: 0 12px 24px -6px rgba(58, 48, 127, 0.35); }
    70%, 85%  { transform: translateY(148px); }
    92%, 95%  { transform: translateY(148px); opacity: 0; }
    96%, 99%  { transform: translateY(0); opacity: 0; }
    100%      { transform: translateY(0); opacity: 1; }
  }
  @keyframes skPreviewSecUp {
    0%, 18%   { transform: translateY(0); opacity: 1; }
    24%       { transform: translateY(0); opacity: 0; }
    25%, 45%  { transform: translateY(-148px); opacity: 0; }
    58%, 85%  { transform: translateY(-148px); opacity: 1; }
    92%, 95%  { transform: translateY(-148px); opacity: 0; }
    96%, 99%  { transform: translateY(0); opacity: 0; }
    100%      { transform: translateY(0); opacity: 1; }
  }
}

/* ==========================================================================
   #solution-02 전용 — 좌측 카피(sticky) | 우측 시각(어드민 위 / 사이트 미리보기 아래)
   Datarize scrollytelling 참고. 카피는 사용자가 우측을 스크롤하는 동안 뷰포트에 고정.
   우측 두 패널 사이에 큰 vertical gap 을 둬서 sticky 가 실제로 동작할 scroll runway 확보.
   ========================================================================== */
@media (min-width: 960px) {
  /* style.css `.sq-fsec { overflow: hidden }` 가 sticky 발동을 차단.
     #solution-02 에서만 overflow 해제 — glow/mesh 는 .sq-fsec__visual 의
     isolation 안에서 클리핑되므로 영향 없음. */
  #solution-02.sq-fsec { overflow: visible; }

  #solution-02 .sq-fsec__grid--reverse {
    align-items: start;
  }
  /* 좌측 카피 — 화면 정중앙에 sticky.
     top 은 viewport 중앙(50vh) 에서 카피 높이의 절반(약 180px) 만큼 위로 끌어올려
     stuck 시 카피가 viewport 정중앙에 위치하도록 보정. */
  #solution-02 .sq-fsec__copy {
    position: sticky;
    top: calc(50vh - 180px);
    align-self: start;
  }
  /* 시각 컬럼 — 패널 사이 큰 gap + 위·아래 breathing room */
  #solution-02 .sq-fsec__visual {
    padding-top: 4vh;
    padding-bottom: 4vh;
  }
  /* 어드민 ↔ 미리보기 사이 — sticky 동작은 유지하되 빈 공간 축소 */
  #solution-02 .sk-display-preview {
    margin-top: clamp(140px, 20vh, 260px);
  }
}

/* ==========================================================================
   카테고리 · 브랜드 운영 (feat-03) — 메가 메뉴 스타일 (GNB 탭 + LNB 컬럼 그리드)
   하단에 브랜드 운영 패널. W Concept 메가 메뉴 구조 참고.
   ========================================================================== */
.sk-category-mock {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fff;
  color: #333;
  font-size: 9.5px;
  letter-spacing: -0.01em;
  overflow: hidden;
}

/* 상단: 카테고리 트리 (GNB 탭 + LNB 그리드) */
.sk-category-mock__tree {
  flex: 1;
  display: flex; flex-direction: column;
  background: #fff;
  border-bottom: 1px solid #DFE1E8;
  min-height: 0;
}

/* GNB 탭 (가로) */
.sk-category-mock__gnb {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  display: flex;
  gap: 4px;
  background: #FAFBFC;
  border-bottom: 1px solid #DFE1E8;
}
.sk-category-mock__gnb li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px 9px;
  font-size: 10.5px;
  font-weight: 700;
  color: #666;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  position: relative;
}
.sk-category-mock__gnb li span {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #94A3B8;
  background: #F1F5F9;
  padding: 1px 5px;
  border-radius: 3px;
}
.sk-category-mock__gnb li.is-active {
  color: #3A307F;
  border-bottom-color: #3A307F;
  background: #fff;
}
.sk-category-mock__gnb li.is-active span {
  color: #3A307F;
  background: #EEF2FF;
}

/* LNB 4-col 그리드 (active GNB 하위) */
.sk-category-mock__lnb-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 12px 12px 16px;
  overflow: hidden;
  min-height: 0;
}
.sk-category-mock__lnb-col {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 0 8px;
  border-left: 1px solid #EEF0F4;
}
.sk-category-mock__lnb-col:first-child { border-left: 0; padding-left: 0; }

/* LNB 헤더 (대분류) */
.sk-category-mock__lnb-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid #E2E7EE;
}
.sk-category-mock__lnb-head span:first-child {
  font-size: 10.5px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.01em;
}
.sk-category-mock__lnb-cnt {
  font-size: 8.5px;
  font-weight: 700;
  color: #3A307F;
  background: #EEF2FF;
  padding: 1px 6px;
  border-radius: 999px;
}

/* SNB 리스트 (소분류) */
.sk-category-mock__lnb-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column;
}
.sk-category-mock__lnb-col li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px;
  font-size: 9.5px;
  color: #475569;
  border-radius: 4px;
}
.sk-category-mock__lnb-col li em {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 600;
  color: #94A3B8;
  font-variant-numeric: tabular-nums;
}
.sk-category-mock__lnb-col li.is-active {
  background: #EEF2FF;
  color: #3A307F;
  font-weight: 600;
}
.sk-category-mock__lnb-col li.is-active em { color: #3A307F; }

/* 하단: 브랜드 패널 */
.sk-category-mock__brands {
  background: #FAFBFC;
  padding: 8px 12px 12px;
  min-height: 0;
}
.sk-category-mock__panel-head {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 0 8px;
}
.sk-category-mock__panel-head i { font-size: 13px; color: #3A307F; }
.sk-category-mock__panel-t {
  font-size: 10.5px;
  font-weight: 700;
  color: #333;
}
.sk-category-mock__count {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  background: #EEF2FF;
  color: #3A307F;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
}
.sk-category-mock__brand-hint {
  margin-left: auto;
  font-size: 8.5px;
  color: #94A3B8;
  font-weight: 600;
}

/* 브랜드 리스트 — 가로 그리드 (4 cols) */
.sk-category-mock__brand-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.sk-category-mock__brand-list li {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 7px;
  background: #fff;
  border: 1px solid #E2E7EE;
  border-radius: 5px;
}
.sk-category-mock__brand-grip {
  color: #C0C5CD;
  font-size: 10px;
  cursor: grab;
  flex-shrink: 0;
}
.sk-category-mock__brand-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.sk-category-mock__brand-name {
  flex: 1;
  font-size: 9.5px;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sk-category-mock__brand-status {
  font-size: 8px;
  font-weight: 700;
  color: #94A3B8;
  flex-shrink: 0;
}
.sk-category-mock__brand-status.is-on { color: #3A307F; }

@media (max-width: 768px) {
  .sk-category-mock__gnb li { padding: 8px 8px 7px; font-size: 9.5px; }
  .sk-category-mock__gnb li span { display: none; }
  .sk-category-mock__lnb-grid { grid-template-columns: repeat(2, 1fr); padding: 10px; }
  .sk-category-mock__lnb-col { padding: 6px; border-left: 0; border: 1px solid #EEF0F4; border-radius: 4px; }
  .sk-category-mock__brand-list { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   팝업 · 기획전 관리 (feat-04) — event write.php 페이지 빌더
   상단 섹션 타입 toolbar + 아래에 빌드된 섹션들 스택 (각 섹션은 .bannerArea)
   참조: event/write.php — .utilWrap / .bannerArea / .handle / .delete
   ========================================================================== */
.sk-builder-mock {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fff;
  color: #333;
  font-size: 9.5px;
  letter-spacing: -0.01em;
  overflow: hidden;
}

/* 상단 toolbar (.utilWrap) */
.sk-builder-mock__util {
  display: flex; align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  background: #f6f7fb;
  border-bottom: 1px solid #dde0e9;
}
.sk-builder-mock__util-t {
  font-size: 9.5px;
  font-weight: 700;
  color: #555;
  margin-right: 6px;
}
.sk-builder-mock__util-btn {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  background: #fff;
  border: 1px solid #d0d4dc;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  color: #444;
  white-space: nowrap;
}
.sk-builder-mock__util-btn--accent {
  background: #eaf2ff;
  border-color: #b8d3ff;
  color: #0d6efd;
  font-weight: 700;
}

/* 메인 영역 — 빌드된 섹션 스택 */
.sk-builder-mock__main {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 8px 10px 12px;
  overflow: hidden;
  min-height: 0;
}

/* 개별 섹션 (.bannerArea) */
.sk-builder-mock__sec {
  border: 1px solid #e1e3e8;
  border-radius: 5px;
  background: #fff;
}
.sk-builder-mock__sec--selected {
  border-color: #3A307F;
  box-shadow: 0 0 0 2px rgba(58, 48, 127, 0.12);
}
.sk-builder-mock__sec-head {
  display: flex; align-items: center;
  padding: 6px 10px;
  background: #fafbfd;
  border-bottom: 1px solid #e8eaf0;
  border-radius: 5px 5px 0 0;
}
.sk-builder-mock__sec-head h3 {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  color: #3A307F;
  letter-spacing: -0.02em;
}
.sk-builder-mock__anchor {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px;
  background: #fff;
  border: 1px solid #d0d4dc;
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 600;
  color: #555;
}
.sk-builder-mock__anchor i { font-size: 9px; }
.sk-builder-mock__delete {
  margin-left: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px;
  background: #fff5f5;
  border: 1px solid #ffd5d5;
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 600;
  color: #ff4444;
}
.sk-builder-mock__delete i { font-size: 9px; }
.sk-builder-mock__sec-head:has(> .sk-builder-mock__anchor) ~ * {}

/* 섹션 본문 */
.sk-builder-mock__sec-body {
  padding: 8px 10px;
  display: flex; flex-direction: column;
  gap: 6px;
}
.sk-builder-mock__input {
  height: 24px;
  padding: 4px 8px;
  background: #fafbfd;
  border: 1px solid #eef0f4;
  border-radius: 3px;
  font-size: 9.5px;
  color: #333;
  display: flex; align-items: center;
}
.sk-builder-mock__input--lg {
  height: 28px;
  font-size: 11px;
  font-weight: 700;
  color: #0F172A;
}

/* 섹션 타입별 콘텐츠 — 상품 탭 */
.sk-builder-mock__tabs {
  display: flex; gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid #EEF0F4;
}
.sk-builder-mock__tabs span {
  font-size: 9px;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.04em;
  padding-bottom: 2px;
  position: relative;
}
.sk-builder-mock__tabs span.is-on { color: #0F172A; }
.sk-builder-mock__tabs span.is-on::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 2px; background: #0F172A;
}
.sk-builder-mock__prod-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.sk-builder-mock__prod-row > span {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background: linear-gradient(135deg, #F1F3F7 0%, #DCE3EC 100%);
}

/* 카운트다운 타이머 */
.sk-builder-mock__timer {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
}
.sk-builder-mock__timer span {
  display: inline-flex; flex-direction: column; align-items: center;
  min-width: 36px;
  padding: 4px 8px;
  background: #0F172A;
  color: #fff;
  border-radius: 4px;
}
.sk-builder-mock__timer b {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.sk-builder-mock__timer em {
  font-size: 7.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 1px;
}

/* 1단 이미지 placeholder — 고정 높이로 섹션 높이 예측 가능하게.
   기본 상태: 회색 그라데이션 + 이미지 아이콘 / 채워진 상태: 흰 배경 + SnapCompany 로고 */
.sk-builder-mock__img {
  position: relative;
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #F1F3F7 0%, #E2E7EE 100%);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: #94A3B8;
  font-size: 28px;
  overflow: hidden;
}
.sk-builder-mock__img-photo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 62%;
  max-width: 280px;
  height: auto;
  opacity: 0;
  pointer-events: none;
}

/* sections wrapper — main 의 overflow 안에서 translateY 로 자동 스크롤 */
.sk-builder-mock__sections {
  display: flex; flex-direction: column;
  gap: 6px;
}

@media (max-width: 768px) {
  .sk-builder-mock__util { gap: 3px; padding: 6px 10px; }
  .sk-builder-mock__util-btn { font-size: 8.5px; padding: 2px 7px; }
}

/* feat-04 패널 — 3 섹션만 보이게 축소, 4번째 (1단 이미지) 는 scroll 로 노출 */
#solution-04 .sq-fsec__panel-body {
  aspect-ratio: auto;
  height: 380px;
  min-height: 380px;
}
/* main 영역 — sections wrapper translateY 가 clip 되도록 overflow hidden 유지 */
#solution-04 .sk-builder-mock__main {
  position: relative;
}

/* 마우스 cursor — 전체 mock 기준 절대 위치 (toolbar 밖) */
.sk-builder-mock__cursor {
  position: absolute;
  top: 0; left: 0;
  z-index: 100;
  font-size: 14px;
  color: #3A307F;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
  transform: translate(0, 0);
}

/* ==========================================================================
   섹션 추가 + 이미지 추가 2-step 애니메이션 — 10s cycle
   ① 0–18%   : cursor 가 toolbar 우측에서 등장 → '1단 이미지' 버튼으로 이동
   ② 22–32%  : 버튼 hover → click (보라 ring → 진한 파랑 pressed)
   ③ 30–43%  : 신규 섹션 슬라이드 다운 (cursor 는 fade-out)
   ④ 44–50%  : cursor 가 신규 섹션 안 이미지 영역으로 invisible snap + fade-in
   ⑤ 58–62%  : 이미지 영역 click (cursor press)
   ⑥ 65–76%  : 이미지 채워짐 (gray placeholder → 황금 그라데이션, icon 사라짐)
   ⑦ 76–88%  : hold (4 섹션 완성)
   ⑧ 92–100% : fade reset → 다음 사이클
   ========================================================================== */

/* sections wrapper — main 의 overflow 안에서 자동 스크롤 (1단 이미지 섹션이 보이도록) */
.sk-builder-mock--anim .sk-builder-mock__sections {
  animation: skBuilderScroll 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes skBuilderScroll {
  0%, 30%   { transform: translateY(0); }            /* idle — 3 섹션만 보임 */
  43%, 88%  { transform: translateY(-320px); }       /* 1단 이미지가 viewport 상단으로 오도록 깊게 스크롤 */
  94%, 100% { transform: translateY(0); }            /* reset */
}

/* 신규 섹션 — 30% 부터 슬라이드 다운 (sections wrapper scroll 과 동시 진행) */
.sk-builder-mock--anim .sk-builder-mock__sec--new {
  overflow: hidden;
  animation: skBuilderNewSec 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: top center;
}
@keyframes skBuilderNewSec {
  0%, 28%   { max-height: 0; opacity: 0; margin-top: -6px; transform: scaleY(0.92); }
  33%       { max-height: 30px; opacity: 0.6; margin-top: 0; transform: scaleY(1); }
  43%, 88%  { max-height: 260px; opacity: 1; margin-top: 0; transform: scaleY(1); }
  94%, 100% { max-height: 0; opacity: 0; margin-top: -6px; transform: scaleY(0.92); }
}

/* target 버튼 (1단 이미지) — 22% 부터 highlight + 28% click */
.sk-builder-mock--anim .sk-builder-mock__util-btn--target {
  position: relative;
  animation: skBuilderTargetBtn 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes skBuilderTargetBtn {
  0%, 16%   { background: #fff; border-color: #d0d4dc; color: #444; box-shadow: none; transform: scale(1); }
  20%, 25%  { background: #eaf2ff; border-color: #b8d3ff; color: #0d6efd; box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.18); transform: scale(1); }
  28%       { background: #0d6efd; border-color: #0d6efd; color: #fff; transform: scale(0.94); box-shadow: 0 0 0 6px rgba(13, 110, 253, 0.12); }
  32%       { background: #0d6efd; border-color: #0d6efd; color: #fff; transform: scale(1); box-shadow: 0 0 0 0 rgba(13, 110, 253, 0); }
  45%, 88%  { background: #eaf2ff; border-color: #b8d3ff; color: #0d6efd; transform: scale(1); }
  94%, 100% { background: #fff; border-color: #d0d4dc; color: #444; transform: scale(1); }
}

/* cursor — 2단계: ① 버튼 클릭 → ② 새 섹션 안 이미지 영역 클릭.
   좌표는 panel 폭 ~570px 기준 추정 (실제 렌더에 맞춰 미세 조정 가능) */
.sk-builder-mock--anim .sk-builder-mock__cursor {
  animation: skBuilderCursor 10s cubic-bezier(0.5, 0, 0.2, 1) infinite;
}
@keyframes skBuilderCursor {
  0%, 3%    { opacity: 0; transform: translate(460px, 60px); }
  8%        { opacity: 1; transform: translate(460px, 60px); }                /* fade in 우측 */
  18%       { opacity: 1; transform: translate(310px, 22px); }                /* '1단 이미지' 버튼 위 */
  22%       { opacity: 1; transform: translate(310px, 22px); }                /* hover */
  28%       { opacity: 1; transform: translate(310px, 22px) scale(0.85); }    /* click press */
  32%       { opacity: 1; transform: translate(310px, 22px) scale(1); }       /* release */
  37%       { opacity: 0; transform: translate(310px, 22px); }                /* 섹션 등장 + scroll 시작과 함께 fade out */
  46%       { opacity: 0; transform: translate(200px, 170px); }               /* invisible snap to 200px 이미지 중앙 */
  52%       { opacity: 1; transform: translate(200px, 170px); }               /* fade in 이미지 위 */
  58%       { opacity: 1; transform: translate(200px, 170px) scale(0.85); }   /* 이미지 click press */
  62%       { opacity: 1; transform: translate(200px, 170px) scale(1); }      /* release */
  80%       { opacity: 0; transform: translate(200px, 170px); }               /* 이미지 채워진 후 fade out */
  100%      { opacity: 0; }
}

/* 신규 섹션 이미지 채움 — cursor click(58–62%) 직후 시작.
   회색 그라데이션 → 흰 배경 으로 전환되며 SnapCompany 로고가 fade-in */
.sk-builder-mock--anim .sk-builder-mock__img--fill {
  animation: skBuilderFill 10s ease-in-out infinite;
}
@keyframes skBuilderFill {
  0%, 62%   { background: linear-gradient(135deg, #F1F3F7 0%, #E2E7EE 100%); }
  72%       { background: linear-gradient(135deg, #fff 0%, #F5F8FC 100%); }
  76%, 88%  { background: #fff; box-shadow: inset 0 0 0 1px #EEF0F4; }
  94%, 100% { background: linear-gradient(135deg, #F1F3F7 0%, #E2E7EE 100%); }
}
/* 이미지 아이콘 — 채움 시 페이드아웃 */
.sk-builder-mock--anim .sk-builder-mock__img--fill i {
  animation: skBuilderFillIco 10s ease-in-out infinite;
}
@keyframes skBuilderFillIco {
  0%, 65%   { color: #94A3B8; opacity: 1; }
  73%, 88%  { opacity: 0; }
  94%, 100% { color: #94A3B8; opacity: 1; }
}
/* SnapCompany 로고 — 채움 시 페이드인 */
.sk-builder-mock--anim .sk-builder-mock__img--fill .sk-builder-mock__img-photo {
  animation: skBuilderFillLogo 10s ease-in-out infinite;
}
@keyframes skBuilderFillLogo {
  0%, 65%   { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
  73%       { opacity: 0.6; transform: translate(-50%, -50%) scale(0.98); }
  80%, 88%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  94%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
}

/* ==========================================================================
   매거진 · 동영상 콘텐츠 (feat-05) — gmagazine write.php 작성 폼
   참조: gmagazine/write.php — 4-col table (label | input | label | input)
   ========================================================================== */
.sk-form-mock {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fff;
  color: #333;
  font-size: 9.5px;
  letter-spacing: -0.01em;
  overflow: hidden;
}
.sk-form-mock__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #DFE1E8;
  background: #fff;
}
.sk-form-mock__page-title {
  font-size: 11px;
  font-weight: 700;
  color: #333;
  letter-spacing: -0.02em;
}
.sk-form-mock__head-actions {
  display: flex; gap: 4px;
}
.sk-form-mock__btn {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}
.sk-form-mock__btn--ghost {
  background: #fff;
  color: #555;
  border: 1px solid #DFE1E8;
}
.sk-form-mock__btn--primary {
  background: #3A307F;
  color: #fff;
  border: 1px solid #3A307F;
}

.sk-form-mock__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  flex: 1;
  overflow: hidden;
}
.sk-form-mock__table th,
.sk-form-mock__table td {
  padding: 6px 8px;
  border-bottom: 1px solid #EEF0F4;
  vertical-align: middle;
}
.sk-form-mock__table tr:last-child th,
.sk-form-mock__table tr:last-child td { border-bottom: 0; }
.sk-form-mock__table th {
  width: 70px;
  background: #FAFBFC;
  border-right: 1px solid #EEF0F4;
  font-size: 9px;
  font-weight: 700;
  color: #333;
  text-align: left;
}
.sk-form-mock__table td { background: #fff; }

/* input 필드 */
.sk-form-mock__input {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  font-size: 9.5px;
  color: #333;
  width: 100%;
  box-sizing: border-box;
}
.sk-form-mock__input--placeholder { color: #aaa; }
.sk-form-mock__input--mono {
  font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: -0.01em;
  width: auto;
  min-width: 180px;
}
.sk-form-mock__input--date i { font-size: 11px; color: #94A3B8; }
.sk-form-mock__input--sm {
  width: auto;
  height: 20px;
  font-size: 8.5px;
}

/* select */
.sk-form-mock__select {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
  height: 22px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  font-size: 9.5px;
  color: #333;
  min-width: 100px;
}
.sk-form-mock__select i { font-size: 10px; color: #94A3B8; }

/* 썸네일 영역 */
.sk-form-mock__thumb-row {
  display: flex; align-items: center; gap: 12px;
}
.sk-form-mock__thumb {
  width: 96px;
  aspect-ratio: 3 / 2;
  border: 1px solid #e1e3e8;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.sk-form-mock__thumb svg { width: 100%; height: 100%; display: block; }
.sk-form-mock__thumb-meta {
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sk-form-mock__file-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  background: #fff;
  border: 1px solid #DFE1E8;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  color: #555;
  width: max-content;
}
.sk-form-mock__file-btn i { font-size: 11px; color: #3A307F; }
.sk-form-mock__file-hint {
  font-size: 8.5px;
  color: #888;
}

/* 본문 에디터 (SmartEditor 모사) */
.sk-form-mock__editor {
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  overflow: hidden;
}
.sk-form-mock__editor-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px;
  background: #f6f7fb;
  border-bottom: 1px solid #dde0e9;
}
.sk-form-mock__editor-format {
  font-size: 8.5px;
  font-weight: 600;
  color: #555;
  padding: 1px 6px;
  background: #fff;
  border: 1px solid #d0d4dc;
  border-radius: 3px;
}
.sk-form-mock__editor-btns {
  display: inline-flex; gap: 6px;
  color: #555;
  font-size: 11px;
}
.sk-form-mock__editor-body {
  padding: 8px 10px;
  background: #fff;
  display: flex; flex-direction: column;
  gap: 5px;
  min-height: 70px;
}
.sk-form-mock__line {
  display: block;
  height: 6px;
  background: #EEF0F4;
  border-radius: 2px;
}
.sk-form-mock__line--w70 { width: 70%; }
.sk-form-mock__line--w40 { width: 40%; }
.sk-form-mock__line--h {
  height: auto;
  background: transparent;
  font-size: 10.5px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.015em;
  margin-bottom: 2px;
}

/* 예약노출 */
.sk-form-mock__schedule {
  display: inline-flex; align-items: center; gap: 5px;
}
.sk-form-mock__chk {
  display: inline-block;
  width: 11px; height: 11px;
  border: 1px solid #DFE1E8;
  border-radius: 2px;
  background: #fff;
  position: relative;
  flex-shrink: 0;
}
.sk-form-mock__chk.is-on {
  background: #3A307F;
  border-color: #3A307F;
}
.sk-form-mock__chk.is-on::after {
  content: '';
  position: absolute;
  left: 3px; top: 0;
  width: 3px; height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.sk-form-mock__tilde { color: #94A3B8; font-size: 9px; }

@media (max-width: 768px) {
  .sk-form-mock__table th { width: 56px; font-size: 8.5px; }
  .sk-form-mock__thumb { width: 80px; }
  .sk-form-mock__file-hint { font-size: 8px; }
}

/* ==========================================================================
   Hero flow — 퍼블리셔 의존(슬랙) → 스냅스킨 어드민(슬롯) 변환 카드
   ========================================================================== */
.sk-hero-flow {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
  font-family: var(--font-family-base, 'Pretendard Variable', sans-serif);
}

.sk-hero-flow__label {
  margin: 0 0 10px;
  display: inline-flex; align-items: center; gap: 6px;
  align-self: center;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94A3B8;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
}
.sk-hero-flow__label--brand {
  color: #fff;
  background: linear-gradient(135deg, rgba(91, 182, 255, 0.20) 0%, rgba(165, 83, 229, 0.25) 100%);
  border-color: rgba(183, 174, 255, 0.50);
}

/* ─── BEFORE: FTP 파일 매니저 (차분한 톤) ─── */
.sk-hero-flow__before {
  position: relative;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 10px 24px -12px rgba(15, 23, 42, 0.40),
    0 2px 8px -4px rgba(15, 23, 42, 0.20);
  padding: 14px 16px 0;
  opacity: 0.95;
}
.sk-hero-flow__ftp {
  background: #F7F8FA;
  border: 1px solid #E2E7EE;
  border-radius: 12px;
  overflow: hidden;
}
.sk-hero-flow__ftp-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: #1F2937;
  color: #CBD5E1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.sk-hero-flow__ftp-head i { font-size: 13px; color: #FBBF24; }
.sk-hero-flow__ftp-path {
  color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
}
.sk-hero-flow__ftp-host {
  margin-left: auto;
  font-size: 10px;
  color: #94A3B8;
  font-weight: 600;
}
.sk-hero-flow__ftp-list {
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
}
.sk-hero-flow__ftp-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  font-size: 11.5px;
  color: #1F2937;
  border-top: 1px solid #F1F4F9;
}
.sk-hero-flow__ftp-list li:first-child { border-top: 0; }
.sk-hero-flow__ftp-list li > i {
  font-size: 14px;
  color: #6B7280;
  flex-shrink: 0;
}
.sk-hero-flow__ftp-list li > i.ph-file-html,
.sk-hero-flow__ftp-list li > i[class*="file-html"] { color: #EA580C; }
.sk-hero-flow__ftp-list li > i[class*="file-css"] { color: #2563EB; }
.sk-hero-flow__ftp-list li > i[class*="file-image"] { color: #16A34A; }
.sk-hero-flow__ftp-list li.is-warn {
  background: #FFF7ED;
}
.sk-hero-flow__ftp-list li.is-warn::after {
  content: '수정 중';
  margin-left: 6px;
  padding: 1px 7px;
  background: #FED7AA;
  color: #B45309;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.sk-hero-flow__ftp-name {
  flex: 1; min-width: 0;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: #0F172A;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sk-hero-flow__ftp-size {
  flex-shrink: 0;
  font-size: 10.5px;
  color: #94A3B8;
  font-weight: 600;
}
.sk-hero-flow__foot {
  display: flex; align-items: center; gap: 8px;
  margin: 12px -18px 0;
  padding: 10px 18px;
  background: #2A1414;
  color: #FCA5A5;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.sk-hero-flow__foot i { font-size: 14px; color: #F87171; }

/* ─── BRIDGE: 세로 화살표 + pill ─── */
.sk-hero-flow__bridge {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  margin: -2px 0;
}
.sk-hero-flow__bridge-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183, 174, 255, 0.50), transparent);
}
.sk-hero-flow__bridge-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #5BB6FF 0%, #A553E5 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow:
    0 10px 28px -8px rgba(91, 182, 255, 0.65),
    0 4px 14px -4px rgba(165, 83, 229, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  white-space: nowrap;
}
.sk-hero-flow__bridge-pill i {
  font-size: 14px;
  animation: skHeroArrow 1.8s ease-in-out infinite;
}
@keyframes skHeroArrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2px); }
}

/* ─── AFTER: 어드민 슬롯 카드 (강조) ─── */
.sk-hero-flow__after {
  position: relative;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FAF8FF 100%);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 22px 48px -16px rgba(58, 48, 127, 0.55),
    0 8px 20px -8px rgba(165, 83, 229, 0.30),
    inset 0 0 0 1px rgba(165, 83, 229, 0.18);
  padding: 18px 20px 20px;
  transform: scale(1.02);
}
.sk-hero-flow__after::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #5BB6FF 0%, #A553E5 100%);
}
.sk-hero-flow__admin-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #EEF0F4;
}
.sk-hero-flow__admin-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #F4ECFF 0%, #DEC9FF 100%);
  color: #6E3DB5;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.sk-hero-flow__admin-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 1px;
}
.sk-hero-flow__admin-title {
  font-size: 13px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.01em;
}
.sk-hero-flow__admin-meta {
  font-size: 10.5px;
  color: #94A3B8;
  letter-spacing: -0.005em;
}
.sk-hero-flow__admin-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
  flex-shrink: 0;
}

.sk-hero-flow__slot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px;
  padding: 10px;
  border: 1.5px dashed #C9C0F4;
  border-radius: 12px;
  background: #FAF8FF;
}
.sk-hero-flow__slot-thumb {
  flex-shrink: 0;
  width: 84px;
  aspect-ratio: 12 / 7;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #E2E7EE;
  background: #F1F4F9;
}
.sk-hero-flow__slot-thumb svg {
  width: 100%; height: 100%;
  display: block;
}
.sk-hero-flow__slot-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.sk-hero-flow__slot-name {
  font-size: 12px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.01em;
}
.sk-hero-flow__slot-name em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 500;
  color: #94A3B8;
  margin-left: 4px;
}
.sk-hero-flow__slot-bar {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #E2E7EE;
  overflow: hidden;
}
.sk-hero-flow__slot-bar > span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #5BB6FF, #A553E5);
  border-radius: 2px;
}
.sk-hero-flow__slot-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: #475569;
  letter-spacing: -0.005em;
}
.sk-hero-flow__slot-status i {
  font-size: 12px;
  color: #22C55E;
}
.sk-hero-flow__slot-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: #0F172A;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
}
.sk-hero-flow__slot-btn i { font-size: 13px; }

.sk-hero-flow__admin-ok {
  display: flex; align-items: center; gap: 6px;
  margin: 12px 0 0;
  padding: 8px 12px;
  background: #ECFDF5;
  color: #047857;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.sk-hero-flow__admin-ok i { font-size: 14px; color: #10B981; }

@media (max-width: 768px) {
  .sk-hero-flow { max-width: 420px; gap: 12px; }
  .sk-hero-flow__before,
  .sk-hero-flow__after { padding: 14px 14px 14px; }
  .sk-hero-flow__foot { margin: 10px -14px 0; padding: 8px 14px; font-size: 10.5px; }
  .sk-hero-flow__slot-thumb { width: 72px; }
}


/* ============================================================================
   Hero 비주얼 — Isometric scene (mainbanner mock 3D tilt + 액센트 일러스트)
   ============================================================================ */
.page-snapskin .sk-hero-scene {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 30px 60px;
}

/* hero flow — scene 내부 위치 */
.page-snapskin .sk-hero-scene .sk-hero-flow {
  position: relative;
  z-index: 2;
}

/* AFTER 카드 뒤 그라데이션 글로우 */
.page-snapskin .sk-hero-flow-glow {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 120%;
  height: 60%;
  left: -10%;
  bottom: 4%;
  background:
    radial-gradient(60% 80% at 70% 60%, rgba(165, 83, 229, 0.32) 0%, rgba(165, 83, 229, 0) 70%),
    radial-gradient(50% 70% at 30% 50%, rgba(91, 182, 255, 0.28) 0%, rgba(91, 182, 255, 0) 70%);
  filter: blur(8px);
  animation: skHeroGlow 8s ease-in-out infinite alternate;
}
@keyframes skHeroGlow {
  0%   { opacity: 0.7; transform: translateY(0) scale(1); }
  100% { opacity: 1;   transform: translateY(-6px) scale(1.04); }
}

/* 반응형 */
@media (max-width: 1100px) {
  .page-snapskin .sk-hero-scene { padding: 30px 16px 50px; }
}