/* ============================================================
   송장박스 — 테라코타 서브브랜드 디자인 시스템 (2026-05-27)
   - 화이트/오프화이트 베이스
   - 테라코타 액센트 (#bd4f37) CTA
   - Pretendard 산세리프 (세리프 폐기)
   - 둥근 모서리 · 큰 글씨
   ============================================================ */

/* 2026-06-15 self-host 폰트: 외부 CDN(jsdelivr) 대신 우리 서버(/assets/fonts/)에서 폰트 직접 제공.
   원인: 특정 PC 망·백신·확장이 CDN을 차단 → 폰트 미로드 → 굵은 제목이 흰색/얇게 렌더(다른 PC 흐림 신고).
   해결: 사이트와 같은 출처에서 폰트가 오므로 차단 불가. 가변 woff2 1파일(45~920)로 전 굵기 커버.
   세리프(Cormorant·Noto Serif)·CDN @import 모두 제거(미사용). HTML의 CDN <link>도 제거. */
@font-face {
  font-family: 'Pretendard';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('fonts/PretendardVariable.woff2') format('woff2');
}

:root {
  /* 모던 인디고 리스타일 (2026-06-15) — 쿨 화이트 베이스 */
  --c-bg:        #f6f7fb;
  --c-surface:   #ffffff;
  --c-text:      #0d0e14;
  --c-text-soft: #23252f;
  --c-muted:     #44485a;
  --c-faint:     #646879;
  --c-border:    #e4e6ee;
  --c-border-dk: #14151c;

  /* 인디고 액센트 — 채도 낮춰 절제(2026-06-15 refine) */
  --c-accent:    #4f46e5;
  --c-accent-d:  #4338ca;
  --c-accent-soft: #eef2ff;

  /* 메인 = 인디고 */
  --c-primary:   #4f46e5;
  --c-primary-d: #4338ca;

  /* 상태 */
  --c-success:   #006241;
  --c-warn:      #92400e;
  --c-danger:    #c0392b;

  /* 모서리 — 절제된 라운드 */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* 그림자 — 중성·부드럽게(컬러드 글로우 제거) */
  --shadow-sm: 0 1px 2px rgba(15,17,23,0.04);
  --shadow-md: 0 4px 16px -6px rgba(15,17,23,0.08);
  --shadow-lg: 0 24px 48px -20px rgba(15,17,23,0.16);

  /* 타이포 — 세리프 폐기, 산세리프 별칭 */
  --font-serif: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  --font-sans:  'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* P1-10: 큰 숫자 전용 우아한 세리프 — 숫자 요소에만 .numeral, 한글 본문엔 금지 */
  --font-numeral: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  /* 넓은 트래킹 = 순수 영문 UPPERCASE eyebrow 전용. 한글엔 절대 적용 X */
  --letter-wide: 0.18em;
  --letter-mid:  0.05em;

  /* 하이라이트 포인트 — 다크 위 밝은 인디고 */
  --c-gold:      #a5b4fc;
  --c-gold-soft: rgba(91,80,240,0.26);
  --c-ink:       #14151c;

  /* 깊이 그림자 — 중성(글로우 제거) */
  --shadow-float: 0 30px 60px -28px rgba(15,17,23,0.28), 0 10px 24px -16px rgba(15,17,23,0.16);
  --shadow-card:  0 1px 2px rgba(15,17,23,0.04), 0 8px 24px -14px rgba(15,17,23,0.10);

  /* 정교 모션 이징 */
  --ease-lux: cubic-bezier(.16,1,.3,1);

  /* P2-7: 타입 스케일 1.25 모듈러 (13/16/20/25/31/39/49px) */
  --fs-cap:  13px;   /* 캡션 */
  --fs-body: 16px;   /* 본문 기본 */
  --fs-lead: 20px;   /* 리드/소제목 */
  --fs-h3:   26px;
  --fs-h2:   34px;
  --fs-h1:   44px;
  --fs-disp: 64px;   /* 디스플레이(히어로 H1) — 최신 크게 */

  /* P2-9: 8pt 간격 리듬 */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-6: 48px; --sp-8: 64px; --sp-12: 96px; --sp-15: 120px;

  /* P2-10: 배지 단일 규격 */
  --badge-h: 24px;
  --badge-pad: 4px 10px;
  --badge-r: 999px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  font-family: var(--font-sans);
  background: var(--c-bg); color: var(--c-text);
  line-height: 1.72; font-size: 20px;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  /* 한글은 자간 0, 영문 UPPERCASE만 wide spacing */
  letter-spacing: 0;
  word-break: keep-all;
}
/* 한글 헤딩은 자간 0, 영문만 살짝 */
.serif-heading, h1, h2, h3, h4 { word-break: keep-all; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 500; letter-spacing: -0.005em; }
h1.serif, h2.serif, h3.serif, .serif-heading { font-family: var(--font-serif); font-weight: 500; letter-spacing: 0.005em; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }

/* === NAV (Chanel 미니멀 상단) === */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246,247,251,0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(230,232,241,0.8);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.nav-inner { display: flex; align-items: center; gap: 36px; padding: 22px 32px; max-width: 1100px; margin: 0 auto; }
.logo {
  font-family: var(--font-serif);
  font-weight: 700; font-size: 22px;
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 10px;
  color: var(--c-text);
}
.logo-mark {
  width: 28px; height: 28px;
  border: 1.5px solid var(--c-text);
  color: var(--c-text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-family: var(--font-serif); font-weight: 600;
  background: transparent;
  border-radius: var(--r-sm);
}
.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 32px; flex: 1;
}
.nav ul a {
  color: var(--c-text-soft);
  font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em;
  position: relative;
  transition: color .25s var(--ease-lux);
}
/* 골드 언더라인 호버 (미세) */
.nav ul a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px;
  height: 1.5px; background: var(--c-accent);
  transition: right .35s var(--ease-lux);
}
.nav ul a:hover { color: var(--c-accent); }
.nav ul a:hover::after { right: 0; }
/* 현재 페이지 탭 강조 (멀티페이지 탭 UI · 채움형 알약) */
.nav ul a.active { color: var(--c-accent); font-weight: 700; background: rgba(91,80,240,0.10); border-radius: 8px; padding: 6px 12px; }
.nav ul a.active::after { display: none; }
.nav-cta { display: flex; gap: 10px; }
.nav-burger { display: none; background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--c-accent); padding: 4px 8px; }

/* === 변환 시스템: 단계 진행바 (ERP 위저드) === */
.conv-steprail { display: flex; max-width: 920px; margin: 0 auto 20px; border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(31,27,26,0.05); }
.conv-steprail .rs { flex: 1; padding: 13px 10px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--c-muted); background: #f3f3fb; border-right: 1px solid var(--c-border); display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s, color .2s; }
.conv-steprail .rs:last-child { border-right: none; }
.conv-steprail .rs .n { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: #cdc3b0; color: #fff; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; }
.conv-steprail .rs.active { background: #fff; color: var(--c-accent); }
.conv-steprail .rs.active .n { background: var(--c-accent); }
.conv-steprail .rs.done { color: #15803d; }
.conv-steprail .rs.done .n { background: #15803d; }
@media (max-width: 640px) { .conv-steprail .rs { font-size: 11px; padding: 10px 4px; flex-direction: column; gap: 4px; } .conv-steprail .rs .n { width: 22px; height: 22px; } }
/* 변환 작업영역 = 시스템 느낌 프레이밍 */
.demo-section { background: linear-gradient(180deg,#f1f1fc,#e9eaf6); }
.demo-section .panel { background: #fff; border: 1px solid var(--c-border); border-radius: 12px; box-shadow: 0 1px 3px rgba(31,27,26,0.05); }

/* === 매출·정산 표 (ERP) === */
.sum-card { flex:1; min-width:130px; background:#fff; border:1px solid var(--c-border); border-radius:10px; padding:12px 14px; }
.sum-card .lbl { font-size:12px; color:var(--c-muted); margin-bottom:4px; }
.sum-card .val { font-size:20px; font-weight:800; color:var(--c-text); }
.sum-card.due .val { color:#b45309; }
.sum-card.profit .val { color:#15803d; }
.sales-table th, .sales-table td { border:1px solid var(--c-border); padding:5px 6px; text-align:center; }
.sales-table th { background:#f3f3fb; font-size:12px; color:var(--c-muted); white-space:nowrap; position:sticky; top:0; z-index:1; }
.sales-table th.sortable { cursor:pointer; user-select:none; }
.sales-table th.sortable:hover { color:var(--c-accent); }
.sales-table th .sort-ind { font-size:10px; margin-left:2px; color:var(--c-accent); }
.sales-table tfoot td { background:#e9eaf6; font-weight:700; border-top:2px solid var(--c-accent); font-size:13px; }
.sales-table td input, .sales-table td select { width:100%; box-sizing:border-box; border:1px solid transparent; background:transparent; padding:5px 4px; font-size:13px; text-align:center; border-radius:4px; }
.sales-table td input:focus, .sales-table td select:focus { border-color:var(--c-accent); background:#fff; outline:none; }
.sales-table td.profit { font-weight:700; color:#15803d; }
.sales-table tr.paid { background:#f0fdf4; }
.sales-table .st-btn { font-size:11px; padding:3px 8px; border-radius:5px; border:1px solid var(--c-border); background:#fff; cursor:pointer; }
.sales-table .st-btn.unpaid { color:#b45309; border-color:#fcd34d; background:#fffbeb; }
.sales-table .st-btn.paid { color:#15803d; border-color:#bbf7d0; background:#f0fdf4; }
.sales-table .del-btn { color:#b91c1c; background:none; border:none; cursor:pointer; font-size:14px; }

/* === BUTTONS (테라코타 채움) === */
/* 버튼 — 한글 텍스트이므로 넓은 자간/UPPERCASE 금지 */
button, .btn {
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  background: var(--c-accent); color: #fff;
  font-family: var(--font-sans);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  text-align: center;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(15,17,23,0.08);
}
button:hover, .btn:hover {
  background: var(--c-accent-d); color: #fff; border-color: transparent;
  box-shadow: 0 4px 14px -4px rgba(15,17,23,0.18);
}
button:active, .btn:active { opacity: 0.92; }
.btn-lg { padding: 18px 38px; font-size: 19px; border-radius: var(--r-xl); }
.btn-block { display: block; width: 100%; }
.btn.ghost, button.ghost {
  background: transparent; color: var(--c-accent); border: 1px solid var(--c-accent);
}
.btn.ghost:hover, button.ghost:hover {
  background: var(--c-accent); color: #fff; border-color: var(--c-accent);
}
.btn.accent, button.accent {
  background: var(--c-accent); color: white; border-color: var(--c-accent);
}
.btn.accent:hover { background: var(--c-accent-d); border-color: var(--c-accent-d); color: white; }
.btn.dark { background: var(--c-text); color: var(--c-bg); }
.btn.kakao { background: #fee500; color: #181600; border-color: #fee500; }
.btn.kakao:hover { background: #181600; color: #fee500; }

input[type=text], input[type=email], input[type=password], input[type=tel], select, textarea {
  padding: 14px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 18px; font-family: inherit;
  background: var(--c-surface); color: var(--c-text);
  transition: border-color 0.2s;
  width: 100%;
  letter-spacing: 0;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--c-text);
  box-shadow: none;
}

/* === HERO (럭셔리 메시 그라데이션 배경) === */
.hero {
  padding: 84px 32px 120px;  /* 최신 톤: 상단 여백 넉넉히 */
  text-align: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 85% 0%, rgba(79,70,229,0.05) 0%, rgba(79,70,229,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  border-bottom: 1px solid var(--c-border);
}
/* 글로우 광원 제거 — 절제 */
.hero::before, .hero::after { display: none; }
.hero > .container { position: relative; z-index: 1; }
@keyframes heroGlow {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: 0.9; }
  100% { transform: translate3d(-6%,5%,0) scale(1.12); opacity: 1; }
}
@keyframes heroGlow2 {
  0%   { transform: translate3d(0,0,0) scale(1.05); opacity: 0.8; }
  100% { transform: translate3d(7%,-4%,0) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
}
/* 한글 포함 eyebrow — 넓은 자간 금지(0), 골드 헤어라인 */
.hero-eyebrow {
  display: inline-block;
  font-size: 15px; font-weight: 600;
  letter-spacing: 0;
  color: var(--c-accent);
  margin-bottom: 32px;
  padding: 7px 16px;
  border: 1px solid var(--c-gold-soft);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(139,92,246,0.08), rgba(91,80,240,0.05));
}
.hero h1 {
  font-family: var(--font-sans);
  font-size: 66px; font-weight: 800;  /* 모던 리스타일: 굵고 임팩트 */
  max-width: 820px; margin: 0 auto 28px;
  letter-spacing: -0.045em;
  line-height: 1.12;
  word-break: keep-all;
  color: var(--c-text);
}
.hero h1 span {
  color: var(--c-accent);
  font-weight: 800;
  font-style: normal;
}
.hero p.sub {
  font-size: 19px; color: var(--c-muted);  /* P1-9: 색 한 단계 흐리게 */
  max-width: 560px; margin: 0 auto 48px;
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.hero p.sub strong { color: var(--c-text); font-weight: 600; }
.hero-cta {
  display: inline-flex; gap: 14px; flex-wrap: wrap;
  justify-content: center; margin-bottom: 56px;
}
.hero-tip {
  font-size: 14px; color: var(--c-faint);
  margin-top: 12px;
  letter-spacing: var(--letter-mid);
}
.carrier-strip {
  display: flex; justify-content: center; align-items: center;
  gap: 40px; flex-wrap: wrap; margin-top: 32px;
  padding-top: 32px; border-top: 1px solid var(--c-border);
}
.carrier-strip .label {
  font-size: 15px; color: var(--c-muted);
  letter-spacing: var(--letter-wide); text-transform: uppercase;
}
.carrier-strip .carrier {
  font-weight: 500; color: var(--c-text);
  font-size: 15px; padding: 8px 16px;
  border: 1px solid var(--c-border); background: transparent;
  border-radius: var(--r-sm); letter-spacing: var(--letter-mid);
}

/* === SECTION === */
/* R30-T 사장님 명시 - 거대 흰색 빈 화면 차단 (120px → 56px) */
section { padding: 56px 32px; }
section h2.section-title {
  font-family: var(--font-sans);
  font-size: 43px; font-weight: 800;  /* 모던 리스타일: 굵게 */
  text-align: center; margin-bottom: 18px;
  letter-spacing: -0.04em;
  line-height: 1.16;
  word-break: keep-all;
}
section h2.section-title em { color: var(--c-accent); font-style: normal; font-weight: 800; }
section p.section-sub {
  color: var(--c-muted); font-size: 19px;  /* P1-9: 17→16px, 색 흐리게 */
  text-align: center; max-width: 580px;
  margin: 0 auto 64px;
  letter-spacing: -0.01em;
  line-height: 1.72;
}
section p.section-sub strong { color: var(--c-text); font-weight: 600; }
/* 한글 eyebrow — 넓은 자간 금지 */
section p.section-eyebrow {
  text-align: center;
  font-size: 16px; color: var(--c-accent);
  letter-spacing: 0;
  margin-bottom: 16px; font-weight: 600;
}
/* B1: 섹션 번호 각인 */
.section-number {
  display: block; text-align: center;
  font-family: var(--font-sans);
  font-size: 16px; color: var(--c-accent);
  font-style: normal; font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.section-number::before, .section-number::after {
  content: ""; display: inline-block;
  width: 24px; height: 1px; background: var(--c-border);
  vertical-align: middle; margin: 0 12px;
}

/* B5: 풀-bleed CTA banner */
.cta-banner {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #1e1b4b, #14132e);
  color: #fff;
  padding: 100px 32px; text-align: center;
}
.cta-banner .container { position: relative; z-index: 1; }
.cta-banner h2 {
  font-family: var(--font-sans);
  font-size: 48px; font-weight: 700;
  margin-bottom: 18px; letter-spacing: -0.03em;
  color: var(--c-bg); line-height: 1.15;
}
.cta-banner h2 em { color: var(--c-gold); font-style: normal; font-weight: 700; }
.cta-banner p {
  color: rgba(255,255,255,0.7); font-size: 17px;
  max-width: 520px; margin: 0 auto 36px; line-height: 1.7;
}
.cta-banner .btn {
  background: var(--c-bg); color: var(--c-text); border-color: var(--c-bg);
}
.cta-banner .btn:hover { background: var(--c-accent); color: white; border-color: var(--c-accent); }

/* B3: 사회적 증거 라이브 카운터 */
.live-counter {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--c-gold-soft);
  padding: 8px 16px; font-size: 15px; color: var(--c-text-soft);
  letter-spacing: -0.005em; margin-top: 20px;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}
.live-counter .dot {
  width: 6px; height: 6px; background: var(--c-success);
  border-radius: 50%; animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}
.live-counter strong {
  color: var(--c-accent); font-family: var(--font-sans);
  font-size: 17px; font-weight: 600;
}

/* B2: 5택배사 로고 wall */
.carrier-logos {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--c-border);
  max-width: 900px; margin: 64px auto 0;  /* P0-1: 상단 여유로 한 섹션 안 완결 */
  border: 1px solid var(--c-border);
  border-radius: var(--r-md); overflow: hidden;  /* P1-13: 라운드 한 단계↓ */
  box-shadow: var(--shadow-card);
  position: relative;
}
/* 상단 헤어라인 제거 — 절제 */
.carrier-logos::before { display: none; }
.carrier-logo-cell {
  background: var(--c-surface); padding: 28px 16px;
  text-align: center;
  transition: background .3s var(--ease-lux);  /* P0-1: translateY 제거(overflow 잘림 방지) */
}
.carrier-logo-cell:hover { background: var(--c-accent-soft); }
.carrier-logo-cell .mark {
  font-family: var(--font-sans);
  font-size: 28px; font-weight: 600;
  color: var(--c-text); margin-bottom: 6px;
  letter-spacing: 0.05em;
}
.carrier-logo-cell .name {
  font-size: 15px; color: var(--c-muted);
  letter-spacing: -0.005em; font-weight: 500;
}

/* B4: Hero 우측 변환 미리보기 */
.hero-with-visual {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 60px; align-items: start; text-align: left;
  max-width: 1100px; margin: 0 auto;
}
.hero-with-visual .hero-text { text-align: left; }
.hero-with-visual .hero-cta { justify-content: flex-start; }
.hero-with-visual h1 { margin-left: 0 !important; max-width: none !important; }
.hero-with-visual p.sub { margin-left: 0 !important; max-width: none !important; }
/* 변환 미리보기 = 떠 있는 유리질 브라우저 윈도우 */
.hero-visual {
  background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(255,255,255,0.74));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.8);
  padding: 52px 32px 36px; position: relative;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-float);
  animation: heroFloat 6s ease-in-out infinite;
  will-change: transform;
}
/* 브라우저 크롬 — 트래픽 라이트 */
.hero-visual::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 38px;
  background: linear-gradient(180deg, rgba(247,250,248,0.96), rgba(247,250,248,0.86));
  border-bottom: 1px solid var(--c-border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.hero-visual::after {
  content: ""; position: absolute; top: 15px; left: 18px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #e06c5e;
  box-shadow: 16px 0 0 #e3b341, 32px 0 0 #4cae6a;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual { animation: none; }
}
.hero-visual-stage {
  display: flex; align-items: center; gap: 20px;
  position: relative;
}
.hero-visual-card {
  flex: 1; background: var(--c-surface);
  border: 1px solid var(--c-border); padding: 20px 16px;
  font-size: 14px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.hero-visual-card .lbl {
  font-size: 14px; color: var(--c-muted);
  letter-spacing: -0.005em; font-weight: 600;
  margin-bottom: 10px;
}
.hero-visual-card .row {
  font-family: ui-monospace, monospace; font-size: 13px;
  color: var(--c-text-soft); margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-visual-arrow {
  font-family: var(--font-sans);
  font-size: 40px; color: var(--c-accent);
  font-style: normal; font-weight: 600;
}
.hero-visual-card.output {
  background: linear-gradient(160deg, #1d1b3a, #131225);
  color: var(--c-bg);
  box-shadow: 0 16px 40px -16px rgba(31,27,26,0.5);
  border-color: rgba(255,255,255,0.06);
}
.hero-visual-card.output .lbl { color: var(--c-gold); }
.hero-visual-card.output .row { color: rgba(255,255,255,0.85); }
.hero-visual-badge {
  position: absolute; top: -12px; right: 16px; z-index: 3;
  background: var(--c-accent); color: white;
  font-size: 14px; padding: 5px 12px; border-radius: 999px;
  letter-spacing: 0.14em;
  font-weight: 600;
  box-shadow: 0 8px 20px -6px rgba(91,80,240,0.5);
}
@media (max-width: 900px) {
  .hero-with-visual { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero-with-visual .hero-text { text-align: center; }
  .hero-with-visual .hero-cta { justify-content: center; }
  /* minmax(0,1fr): 칸이 글자 min-content보다 작게 줄 수 있어야 그리드가 뷰포트를 안 넘침(우체국 잘림 방지) */
  .carrier-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .carrier-logo-cell { padding: 16px 4px; min-width: 0; overflow: hidden; }
  .carrier-logo-cell .mark { font-size: 18px; letter-spacing: 0.02em; white-space: nowrap; }
  .carrier-logo-cell .name { font-size: 13px; }
}
@media (max-width: 480px) {
  .carrier-logo-cell { padding: 14px 2px; }
  .carrier-logo-cell .mark { font-size: 14px; letter-spacing: 0; }
  .carrier-logo-cell .name { font-size: 11px; }
}

/* === FEATURES === */
.feat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  max-width: 1140px; margin: 0 auto; padding: 0 32px;
  background: none; border: none;
}
.feat-card {
  background: var(--c-surface); padding: 32px 26px;
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  position: relative;
}
.feat-card:hover { border-color: #d7d9e6; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.feat-icon {
  margin-bottom: 20px;
  display: inline-flex; width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  border: none; border-radius: var(--r-md);
}
.feat-icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.feat-card h3 {
  font-family: var(--font-sans);
  font-size: 19px; font-weight: 700;
  margin-bottom: 10px; letter-spacing: -0.02em;
}
.feat-card p { color: var(--c-muted); font-size: 15.5px; margin: 0; line-height: 1.7; }

/* === DEMO === */
.demo-section { background: var(--c-surface); }
.demo-wrap { max-width: 1000px; margin: 0 auto; }
.panel {
  background: var(--c-surface);
  border-radius: var(--r-md); padding: 40px 36px;
  margin-bottom: 24px; border: 1px solid var(--c-border);
  box-shadow: none;
}
.panel h2 {
  display: flex; align-items: center;
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 500;
  margin: 0 0 24px;
  letter-spacing: 0;
}
.step-badge {
  display: inline-flex; background: var(--c-text); color: var(--c-bg);
  width: 28px; height: 28px; border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 15px; margin-right: 14px; font-weight: 500;
  font-family: var(--font-serif);
}
.upload-zone {
  border: 1px dashed var(--c-border); border-radius: var(--r-md);
  padding: 64px 32px; text-align: center; cursor: pointer;
  transition: all 0.25s; display: block;
  background: var(--c-bg);
}
.upload-zone:hover { border-color: var(--c-accent); background: var(--c-accent-soft); }
.upload-zone input { display: none; }
.upload-icon { font-size: 36px; margin-bottom: 14px; opacity: 0.6; }
.upload-zone .main-text {
  font-size: 19px; font-weight: 600;
  letter-spacing: -0.01em;
}
.upload-zone .sub-text {
  color: var(--c-muted); font-size: 16px; margin-top: 8px;
  letter-spacing: 0;
}

table { width: 100%; border-collapse: collapse; font-size: 18px; }
th, td { padding: 14px 12px; border-bottom: 1px solid var(--c-border); text-align: left; }
th {
  background: var(--c-bg); font-weight: 600;
  color: var(--c-muted); font-size: 16px;
  text-transform: uppercase; letter-spacing: var(--letter-wide);
}
/* R29-8 UX-25: 색약(적녹) 대응 — high/mid/low를 색·굵기·접두 기호 3중 구분 */
.conf-high { color: var(--c-success); font-weight: 600; }
.conf-high::before { content: "✓ "; }
.conf-mid  { color: #b45309; font-weight: 700; }
.conf-mid::before { content: "△ "; }
.conf-low  { color: var(--c-danger); font-weight: 700; }
.conf-low::before { content: "✗ "; }

/* R29-8 UX-24: OS 다크 모드 최소 대응 */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #1f2937;
    --c-text: #f3f4f6;
    --c-muted: #9ca3af;
    --c-border: #374151;
  }
  body { background: #111827; color: #f3f4f6; }
  .panel, .acc-card, .step, .info { background: #1f2937 !important; color: #f3f4f6 !important; }
  input, select, textarea { background: #1f2937; color: #f3f4f6; border-color: #374151; }
}

/* R29-8 고대비 모드 (시각 약자) */
@media (prefers-contrast: more) {
  .conf-mid { color: #7c2d12; text-decoration: underline; }
  .conf-low { color: #7f1d1d; text-decoration: underline; }
}
.badge {
  padding: 4px 10px; border-radius: var(--r-md); font-size: 15px;
  font-weight: 600; letter-spacing: -0.005em;
  border: 1px solid;
}
.badge-req { background: transparent; color: var(--c-accent); border-color: var(--c-accent); }
.badge-opt { background: transparent; color: var(--c-muted); border-color: var(--c-border); }
.badge-new { background: var(--c-accent); color: white; border-color: var(--c-accent); margin-left: 6px; }
.toolbar {
  display: flex; gap: 12px; align-items: center;
  justify-content: space-between; margin-top: 28px; flex-wrap: wrap;
}
.info {
  background: var(--c-bg); border: 1px solid var(--c-border);
  color: var(--c-text-soft); padding: 14px 18px; border-radius: var(--r-md);
  font-size: 17px; margin-bottom: 16px;
  letter-spacing: 0;
}
.arrow { color: var(--c-faint); padding: 0 10px; }
.hidden { display: none !important; }
.preview-table {
  font-size: 13px; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  line-height: 1.3;
}
/* 변환표 — 디자인 정돈(5/30): 큰 폰트로 인한 세로 누적 해소·컬럼별 정렬·헤더 sticky */
#previewTable { width: 100%; border-collapse: collapse; }
#previewTable thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--c-bg); color: var(--c-text);
  font-weight: 600; font-size: 12.5px; letter-spacing: 0.01em;
  text-align: left; padding: 9px 10px;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
#previewTable tbody td {
  padding: 6px 9px; vertical-align: middle;
  border-bottom: 1px solid var(--c-border);
  font-size: 13px; line-height: 1.4;
  /* R24 P0 (사장님 명시 "글씨 짤리고"): 전체 셀 잘림 방지·max-width 컬럼만 ellipsis 호버 확장 */
  overflow: visible;
}
/* 정상 셀 클릭=인라인 편집 진입 (사장님 명시: 행별 주문내역 수정 가능) — editable-ok 단서 */
#previewTable .editable-ok { cursor: text; }
#previewTable .editable-ok:hover { background: #fafafa; outline: 1px dashed var(--c-line); outline-offset: -1px; }
#previewTable tbody tr:last-child td { border-bottom: none; }
/* 컬럼별 정책: 1#·2택배사·3상태·4받는분·5전화·6우편·7주소·8상품·9옵션·10수량·11변환 */
#previewTable th:nth-child(1),
#previewTable td:nth-child(1) { width: 44px; text-align: right; color: var(--c-muted); font-variant-numeric: tabular-nums; }
#previewTable th:nth-child(2),
#previewTable td:nth-child(2) { white-space: nowrap; min-width: 110px; }
#previewTable th:nth-child(3),
#previewTable td:nth-child(3) { white-space: nowrap; text-align: center; min-width: 72px; }
/* R24 P0: 받는분·전화 nowrap → 짧은 셀이라 잘릴 일 적으나 호버 확장 안전망 */
#previewTable th:nth-child(4),
#previewTable td:nth-child(4) { white-space: nowrap; min-width: 88px; max-width: 160px; overflow: visible; }
#previewTable th:nth-child(5),
#previewTable td:nth-child(5) { white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 116px; max-width: 180px; overflow: visible; }
#previewTable th:nth-child(6),
#previewTable td:nth-child(6) { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; min-width: 64px; }
/* R24 P0 (사장님 명시 "글씨 짤리고"): 주소·상품·옵션 = white-space:normal + word-break + 호버 시 확장 */
#previewTable th:nth-child(7),
#previewTable td:nth-child(7) { word-break: break-all; white-space: normal; min-width: 220px; max-width: 320px; line-height: 1.4; }
#previewTable th:nth-child(8),
#previewTable td:nth-child(8) { word-break: break-all; white-space: normal; min-width: 180px; max-width: 280px; line-height: 1.4; }
#previewTable th:nth-child(9),
#previewTable td:nth-child(9) { word-break: break-all; white-space: normal; min-width: 140px; max-width: 220px; line-height: 1.4; }
/* 호버 시 max-width 확장 (전체 글씨 확인 가능) */
#previewTable tbody tr:hover td:nth-child(7),
#previewTable tbody tr:hover td:nth-child(8),
#previewTable tbody tr:hover td:nth-child(9) { max-width: 500px; z-index: 1; position: relative; }
#previewTable th:nth-child(10),
#previewTable td:nth-child(10) { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; min-width: 56px; }
#previewTable th:nth-child(11),
#previewTable td:nth-child(11) { white-space: nowrap; min-width: 160px; }
/* 셀 내부 select/배지 톤 통일 */
#previewTable td select.carrier-select { width: 100%; }
#previewTable tbody tr:hover td { background: rgba(91,80,240,0.025); }
.stats { display: flex; gap: 16px; font-size: 15px; margin-bottom: 12px; }
.stat {
  background: var(--c-bg); padding: 12px 20px; border-radius: var(--r-md);
  border: 1px solid var(--c-border);
}
.stat strong {
  color: var(--c-accent);
  font-family: var(--font-serif);
  font-size: 28px; font-weight: 500;
  display: block; line-height: 1; margin-bottom: 6px;
}

/* === PRICING === */
.pricing { background: var(--c-bg); }
.price-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; max-width: 1000px; margin: 0 auto;
}
.price-grid.two-col { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.carrier-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.carrier-tag {
  background: transparent; color: var(--c-text);
  padding: 4px 12px; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 500;
  letter-spacing: var(--letter-mid);
  border: 1px solid var(--c-border);
  text-transform: uppercase;
}
.carrier-tag.matched { color: var(--c-success); border-color: var(--c-success); }
.carrier-tag.unmatched { color: var(--c-warn); border-color: var(--c-warn); }
.carrier-tag.unmapped { color: var(--c-danger); border-color: var(--c-danger); }
/* R30-T 사장님 명시: 가격 카드 열·행 정렬 - flex column·btn 하단 고정·3카드 높이 동일 */
.price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 900px) { .price-cards { grid-template-columns: 1fr; } }
.price-card {
  background: var(--c-surface); padding: 48px 36px;
  border-radius: var(--r-md); border: 1px solid var(--c-border); position: relative;
  transition: transform .35s var(--ease-lux), box-shadow .35s var(--ease-lux);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex; flex-direction: column;   /* R30-T: 세로 정렬 */
}
/* P1-12·13: 카드 상단 골드 헤어라인 1px 액센트선 */
.price-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold-soft), transparent);
}
.price-card.featured {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--c-surface), var(--c-surface)) padding-box,
    linear-gradient(150deg, var(--c-gold), var(--c-accent)) border-box;
  box-shadow: var(--shadow-float);
  /* R30-T 사장님 명시: featured padding-top 56px → 48px로 통일 (다른 카드와 정렬) */
  /* 배지는 position:absolute top:16px라 자체 공간 확보됨 */
}
/* featured는 테두리 자체가 골드→테라 그라데라 상단 별도선 생략 */
.price-card.featured::before { background: linear-gradient(90deg, transparent, var(--c-gold), var(--c-accent), transparent); opacity: 0.9; }
.price-card .tag {
  position: absolute; top: 16px; right: 16px;  /* P0-2: 카드 안쪽으로 */
  background: var(--c-accent); color: white;
  padding: 6px 14px; border-radius: 999px;  /* P0-2: border-radius 맞춤(필 형태) */
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 6px 16px -6px rgba(91,80,240,0.5);
}
.price-card h3 {
  font-family: var(--font-serif);
  font-size: 24px; font-weight: 500; margin-bottom: 8px;
}
.price-card .desc {
  color: var(--c-muted); font-size: 17px;
  margin-bottom: 28px; min-height: 36px;
  line-height: 1.7;
}
.price-card .price {
  font-family: var(--font-serif);
  font-size: 48px; font-weight: 500; margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.price-card .price .unit {
  font-size: 17px; color: var(--c-muted);
  font-weight: 400; font-family: var(--font-sans);
}
.price-card .bep {
  color: var(--c-faint); font-size: 14px;
  margin-bottom: 32px;
  letter-spacing: var(--letter-mid);
}
/* R30-T: ul이 남는 공간 채우게 — btn은 항상 카드 하단 정렬 */
.price-card ul { list-style: none; padding: 0; margin: 0 0 32px; font-size: 18px; flex: 1; }
.price-card ul li { padding: 8px 0; color: var(--c-text-soft); border-bottom: 1px solid var(--c-border); }
.price-card ul li:last-child { border-bottom: none; }
.price-card ul li:before {
  content: "—"; color: var(--c-accent);
  font-weight: 400; margin-right: 12px;
}
.price-card .btn { width: 100%; text-align: center; }

/* === SUPPORTED SHOPS === */
.shops { background: var(--c-surface); padding: 120px 32px; }

/* 무한 마퀴 — 브랜드명 흐름 (절제) */
.shop-marquee {
  max-width: 1100px; margin: 0 auto 56px;
  overflow: hidden; position: relative;
  /* P0-3: 양끝 페이드 더 깊게 — 끝 항목(GS샵 등) 갑작스런 잘림 완화 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  padding: 18px 0;
}
.shop-marquee-track {
  display: inline-flex; align-items: center; white-space: nowrap;
  will-change: transform;
  animation: marqueeFlow 38s linear infinite;
}
.shop-marquee-track span {
  font-size: 18px; font-weight: 600; color: var(--c-faint);
  letter-spacing: -0.01em;
  padding: 0 22px;
  display: inline-flex; align-items: center;
}
.shop-marquee-track span::after {
  content: "·"; color: var(--c-gold); font-weight: 700;
  margin-left: 44px;
}
@keyframes marqueeFlow {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.shop-marquee:hover .shop-marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .shop-marquee-track { animation: none; }
}
.shop-category { margin-bottom: 48px; max-width: 1100px; margin-left: auto; margin-right: auto; }
.shop-category:last-child { margin-bottom: 0; }
.shop-cat-title {
  font-size: 17px; font-weight: 600;
  color: var(--c-text); margin-bottom: 18px;
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--c-border);
}
.shop-cat-title::before {
  content: ""; display: inline-block; width: 24px; height: 1px;
  background: var(--c-accent);
}
.shop-cat-title .count {
  color: var(--c-faint); font-weight: 400; font-size: 15px;
  margin-left: auto;
}
.shop-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);  /* P0-3: 행당 5개 고정 */
  gap: 12px;
}
@media (max-width: 760px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 561px) and (max-width: 900px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
.shop-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 18px 12px;
  text-align: center;
  transition: transform .3s var(--ease-lux), box-shadow .3s var(--ease-lux), border-color .3s ease;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.shop-card:hover {
  border-color: var(--c-gold);
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-card);
}
.shop-card .icon { font-size: 21px; line-height: 1; opacity: 0.7; }
.shop-card .name {
  font-size: 16px; font-weight: 600; color: var(--c-text);
  letter-spacing: -0.01em;
}
.shop-card .check { font-size: 14px; color: var(--c-success); margin-top: 2px; letter-spacing: 0; }
.shop-card.req-form { background: var(--c-accent-soft); border-color: var(--c-accent); }
.shop-card.req-form .check { color: var(--c-accent-d); }

/* === TRUST === */
.trust { background: var(--c-bg); }
.trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; background: none;
  max-width: 1140px; margin: 0 auto; padding: 0 32px;
  border: none;
}
.trust-cell {
  background: var(--c-surface); padding: 40px 24px; text-align: center;
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
}
.trust-num {
  font-family: var(--font-sans);
  font-size: 46px; font-weight: 800;
  color: var(--c-accent); margin-bottom: 10px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.trust-label {
  color: var(--c-muted); font-size: 15px;
  letter-spacing: -0.01em; line-height: 1.5;
  max-width: 200px; margin: 0 auto;
}

/* === FAQ === */
.faq { background: var(--c-surface); }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--c-border);
  padding: 28px 4px; cursor: pointer;
}
.faq-item summary {
  font-weight: 500; font-size: 20px;
  list-style: none; display: flex;
  justify-content: space-between; align-items: center;
  font-family: var(--font-serif);
  letter-spacing: 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 24px; color: var(--c-text);
  font-weight: 300; transition: transform 0.25s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 18px 0 0; color: var(--c-muted); font-size: 18px; line-height: 1.8; }

/* === FOOTER (다크 + 골드 헤어라인) === */
footer {
  background: var(--c-text); color: var(--c-bg);
  padding: 100px 32px 40px;
  position: relative;
}
footer::before { display: none; }
.footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
}
.footer-brand h4 {
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 700; margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.footer-brand p {
  color: rgba(255,255,255,0.66); font-size: 17px;
  line-height: 1.8; letter-spacing: 0;
}
.footer-col h5 {
  font-size: 16px; font-weight: 600;
  color: var(--c-gold); margin-bottom: 20px;
  letter-spacing: -0.005em;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { padding: 6px 0; }
.footer-col ul li a {
  color: rgba(255,255,255,0.72); font-size: 17px;
  letter-spacing: 0;
}
.footer-col ul li a:hover { color: var(--c-accent); }
.footer-bottom {
  max-width: 1100px; margin: 60px auto 0;
  padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 17px; color: rgba(255,255,255,0.68);
  letter-spacing: var(--letter-mid); flex-wrap: wrap; gap: 12px;
}

/* === AUTH (login·signup) === */
.auth-wrap { max-width: 440px; margin: 100px auto; padding: 0 32px; }
.auth-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-xl); padding: 56px 44px; box-shadow: none;
}
.auth-card h1 {
  font-family: var(--font-serif);
  font-size: 32px; font-weight: 500;
  margin-bottom: 8px; text-align: center;
  letter-spacing: 0;
}
.auth-card .sub {
  color: var(--c-muted); font-size: 17px; text-align: center;
  margin-bottom: 36px; letter-spacing: var(--letter-mid);
}
.auth-form .field { margin-bottom: 18px; }
.auth-form label {
  display: block; font-size: 15px; color: var(--c-muted);
  margin-bottom: 8px; font-weight: 500;
  letter-spacing: var(--letter-wide); text-transform: uppercase;
}
.auth-form .helper { font-size: 14px; color: var(--c-faint); margin-top: 8px; letter-spacing: 0; }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 28px 0 20px; color: var(--c-faint); font-size: 15px;
  letter-spacing: var(--letter-wide); text-transform: uppercase;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--c-border);
}
.auth-footer {
  text-align: center; margin-top: 28px;
  font-size: 15px; color: var(--c-muted);
}
.auth-footer a {
  color: var(--c-text); font-weight: 500;
  border-bottom: 1px solid var(--c-text);
}
.field-row {
  display: flex; gap: 10px; align-items: center;
  font-size: 15px; color: var(--c-muted);
}
.field-row input[type=checkbox] { width: auto; }

/* === ACCOUNT (마이페이지) === */
.account-wrap {
  max-width: 1100px; margin: 60px auto; padding: 0 32px;
  display: grid; grid-template-columns: 240px 1fr; gap: 40px; min-height: 600px;
}
.account-side {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 28px 22px;
  /* ERP 앱 셸: 사이드 메뉴는 화면에 고정·콘텐츠만 스크롤 */
  position: sticky; top: 24px; align-self: start;
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.account-side .user-card {
  padding: 8px 6px 22px; border-bottom: 1px solid var(--c-border);
  margin-bottom: 18px;
}
.account-side .user-card .name {
  font-family: var(--font-serif);
  font-weight: 500; font-size: 21px;
}
.account-side .user-card .email { font-size: 14px; color: var(--c-muted); margin-top: 4px; letter-spacing: 0; }
.account-side .plan-pill {
  display: inline-block; background: var(--c-text); color: var(--c-bg);
  font-size: 14px; font-weight: 500; padding: 4px 10px;
  border-radius: var(--r-sm); margin-top: 12px;
  letter-spacing: var(--letter-wide); text-transform: uppercase;
}
.account-side ul { list-style: none; padding: 0; margin: 0; }
.account-side ul li a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-sm);
  color: var(--c-text-soft); font-size: 15px; font-weight: 500;
  letter-spacing: var(--letter-mid); transition: all 0.2s;
}
.account-side ul li a:hover { background: var(--c-bg); color: var(--c-accent); }
.account-side ul li a.active {
  background: transparent; color: var(--c-accent);
  border-left: 2px solid var(--c-accent); padding-left: 12px;
}
.account-side ul li a .ico { width: 18px; text-align: center; }
.account-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
/* 모바일 ERP 상단바 + 드로어 스크림 — 데스크톱에서는 숨김 */
.acc-mobilebar { display: none; }
.acc-scrim { display: none; }
.acc-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 36px 36px;
}
.acc-card h2 {
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 500; margin-bottom: 6px; letter-spacing: 0;
}
.acc-card .desc { color: var(--c-muted); font-size: 17px; margin-bottom: 24px; }
.acc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--c-border);
  flex-wrap: wrap; gap: 12px;
}
.acc-row:last-child { border-bottom: none; }
.acc-row .label {
  color: var(--c-muted); font-size: 14px;
  letter-spacing: var(--letter-wide); text-transform: uppercase;
}
.acc-row .value { font-weight: 500; font-size: 18px; }
.usage-bar {
  width: 100%; height: 2px; background: var(--c-border);
  border-radius: var(--r-sm); overflow: hidden; margin-top: 8px;
}
.usage-bar .fill { height: 100%; background: var(--c-accent); transition: width 0.4s; }

/* === LEGAL (terms·privacy·refund) === */
.legal-wrap { max-width: 800px; margin: 80px auto; padding: 0 32px; }
.legal-wrap h1 {
  font-family: var(--font-serif);
  font-size: 40px; font-weight: 500;
  margin-bottom: 12px; letter-spacing: -0.005em;
}
.legal-wrap .updated {
  color: var(--c-muted); font-size: 14px;
  margin-bottom: 48px;
  letter-spacing: var(--letter-mid); text-transform: uppercase;
}
.legal-wrap h2 {
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 500;
  margin-top: 40px; margin-bottom: 14px; letter-spacing: 0;
}
.legal-wrap p, .legal-wrap li {
  font-size: 18px; line-height: 1.85; color: var(--c-text-soft);
  letter-spacing: 0;
}
.legal-wrap ul { padding-left: 22px; }

/* === RESPONSIVE === */
@media (max-width: 900px) {
  /* 모바일: ☰ 햄버거 → 드롭다운 메뉴 */
  .nav-inner { flex-wrap: wrap; gap: 10px; padding: 14px 18px; }
  /* 2026-06-14 5인 합의: CTA를 order:2로 당겨 로고·버거와 한 줄에 배치(둘째 줄 wrap 깨짐 제거).
     CTA를 숨기지 않음 = 로그인 사용자 로그아웃 동선·가입 전환 보존(A안 BLOCK 사유). */
  .nav-burger { display: block; order: 3; margin-left: 4px; }
  .nav ul { display: none; order: 4; width: 100%; flex-direction: column; gap: 0; flex: none; }
  .nav.nav-open ul { display: flex; }
  .nav ul li { width: 100%; }
  .nav ul a { display: block; padding: 13px 6px; border-bottom: 1px solid var(--c-border); font-size: 15px; }
  .nav ul a::after { display: none; }
  .nav ul a.active { background: rgba(91,80,240,0.08); border-radius: 0; padding: 13px 10px; }
  .nav-cta { order: 2; margin-left: auto; flex-shrink: 0; }
  .hero { padding: 80px 24px 60px; }
  .hero h1 { font-size: 42px; line-height: 1.18; }
  .hero p.sub { font-size: 19px; }
  section { padding: 44px 24px; }
  section h2.section-title { font-size: 34px; }
  .trust-num { font-size: 46px; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .price-grid, .price-grid.two-col { grid-template-columns: 1fr !important; max-width: 460px !important; }
  .price-card.featured { transform: none; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  /* 모바일: 사이드 메뉴를 햄버거 드로어로 — 콘텐츠가 위로 안 밀리고 한 화면씩 */
  .account-wrap { grid-template-columns: 1fr; gap: 0; }
  .account-side {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100%;
    width: 82%; max-width: 300px; z-index: 1200; border-radius: 0;
    transform: translateX(-100%); transition: transform 0.25s ease;
    max-height: none; box-shadow: 2px 0 24px rgba(0,0,0,0.18);
  }
  .account-side.open { transform: translateX(0); }
  .acc-scrim {
    display: block; position: fixed; inset: 0; z-index: 1100;
    background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none;
    transition: opacity 0.25s;
  }
  .acc-scrim.show { opacity: 1; pointer-events: auto; }
  .acc-mobilebar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 900;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--r-md); padding: 11px 14px; margin-bottom: 4px;
  }
  .acc-menu-btn {
    background: none; border: 1px solid var(--c-border); border-radius: 8px;
    font-size: 19px; line-height: 1; padding: 6px 12px; cursor: pointer; color: var(--c-text);
  }
  .acc-cur { font-weight: 700; font-size: 16px; }
  .acc-card { padding: 22px 18px; }
}
@media (max-width: 560px) {
  /* 2026-06-14 5인: 로고+CTA(로그인/무료시작)+☰ 한 줄 수용 위해 컴팩트화(둘째 줄 wrap 방지·둘 다 노출 유지) */
  .nav-inner { padding: 14px 12px; gap: 6px; }
  .logo { font-size: 16px; }
  .nav-cta { gap: 5px; margin-left: auto; flex-shrink: 0; }
  .nav-cta .btn { padding: 8px 9px; font-size: 13px; white-space: nowrap; letter-spacing: 0; }
  .feat-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .hero { padding: 64px 20px 48px; }
  .hero h1 { font-size: 37px; line-height: 1.18; }
  .hero p.sub { font-size: 18px; }
  section h2.section-title { font-size: 29px; }
  .auth-card { padding: 36px 28px; }
  .acc-card { padding: 28px 24px; }
  /* R25 P1-5 모바일 검수 UI: 가로 스크롤 + 폰트 + 터치 친화 (행 높이↑) */
  .preview-table { font-size: 13.5px; }
  #previewTable thead th { font-size: 12.5px; padding: 10px 8px; }
  #previewTable tbody td { font-size: 13.5px; padding: 10px 8px; min-height: 44px; }
  #previewTable { min-width: 980px; }
  /* 모바일에서 글씨 잘림 호버 대신 탭(tap) 시 max-width 확장 */
  #previewTable tbody td:nth-child(7):focus,
  #previewTable tbody td:nth-child(8):focus,
  #previewTable tbody td:nth-child(9):focus { max-width: 400px; background: #fefce8; }
  /* 모바일 다운로드 버튼 터치 친화 */
  #downloadBtn { min-height: 48px; font-size: 16px; }
  /* 좁은 화면 여백 축소 + 가로 넘침 방지 */
  .container { padding: 0 18px; }
  .account-wrap { padding: 0 18px; margin: 32px auto; }
  /* R25 P1-5 신뢰 헤더 모바일 적응 */
  #step3 [style*="background:#dcfce7"],
  #step3 [style*="background:#fef3c7"],
  #step3 [style*="background:#fee2e2"] { font-size: 14px !important; padding: 11px 13px !important; }
}

/* ============================================================
   인라인 SVG 아이콘 (이모지 대체)
   ============================================================ */
.ico { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.18em;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.logo-mark { display: inline-flex; align-items: center; color: var(--c-accent); margin-right: 8px; }
.logo-mark .ico { width: 1.35em; height: 1.35em; vertical-align: middle; }
.input-tab .ico { width: 1em; height: 1em; margin-right: 6px; vertical-align: -0.12em; }

/* 버튼 액티브 미세 눌림 */
.btn:active, button:active { transform: translateY(1px); }

/* 스티키 네비 — 스크롤 시 그림자 + 배경 진해짐 */
.nav.scrolled {
  background: rgba(246,247,251,0.9);
  box-shadow: 0 1px 0 rgba(230,232,241,0.7), 0 10px 30px -18px rgba(40,34,120,0.16);
}

/* ============================================================
   B. 정교한 스크롤 모션 시스템 (2026-05-27)
   - 🔴 노-JS / 정적 캡처 안전: html.js 일 때만 숨김.
     JS 꺼지면 .js 클래스가 안 붙어 모든 콘텐츠가 항상 보임.
   - prefers-reduced-motion: reduce 시 전부 즉시 표시
   - 변환 로직과 무관한 순수 모션 레이어
   ============================================================ */
/* 스태거 리빌 — 우아하게, 거리 짧게(14px), 부드러운 ease */
.js .sjb-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .8s var(--ease-lux),
    transform .8s var(--ease-lux);
  transition-delay: var(--sjb-delay, 0ms);
  will-change: opacity, transform;
}
.js .sjb-reveal.is-in { opacity: 1; transform: none; }

/* 클립 리빌 — 주요 카드/비주얼이 드러남
   ⚠️ 완전 클리핑(clip-path: inset(0 0 100% 0))은 IntersectionObserver가 ratio 0으로 판정해
   is-in이 영영 안 붙는 데드락 유발(빈 공간 버그). opacity+transform 페이드로 IO-안전하게 처리. */
.js .sjb-clip {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .9s var(--ease-lux),
    transform .9s var(--ease-lux);
  transition-delay: var(--sjb-delay, 0ms);
  will-change: opacity, transform;
}
.js .sjb-clip.is-in { opacity: 1; transform: none; }

/* 패럴랙스 대상 (JS가 translateY 주입) */
.sjb-parallax { will-change: transform; }

/* 히어로 장식 오브 — 절제 위해 제거 */
.hero-orb {
  display: none;
}
.hero-orb-a {
  top: 6%; right: 9%;
  width: 230px; height: 230px;
  background: radial-gradient(circle at 38% 35%, rgba(139,92,246,0.24), rgba(139,92,246,0) 70%);
}
.hero-orb-b {
  bottom: 4%; left: 5%;
  width: 280px; height: 280px;
  background: radial-gradient(circle at 60% 50%, rgba(91,80,240,0.18), rgba(91,80,240,0) 72%);
}
@media (max-width: 900px) { .hero-orb { opacity: 0.6; } }

/* 모션 최소화 / 노-JS → 전부 즉시 표시 (백지 방지) */
@media (prefers-reduced-motion: reduce) {
  .js .sjb-reveal, .js .sjb-clip {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; transition: none !important;
  }
  .sjb-parallax { transform: none !important; }
}

/* ============================================================
   C. 디자인 패널 개선안 P0/P1/P2 (2026-05-28)
   - 토큰 변수만 사용 · 변환 로직·id·이벤트 불변
   ============================================================ */

/* ---- P1-10: 큰 숫자 전용 우아한 세리프 (해당 요소에만) ---- */
.numeral {
  font-family: var(--font-numeral);
  font-weight: 500;
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: 0;
}

/* ---- P0-4: 모바일 베타바 ---- */
/* 2026-06-14: 기존 nowrap+ellipsis는 끝의 클릭 링크(카톡 제보/문의)를 화면 밖으로 잘라
   모바일에서 누를 수 없게 만들었음 → 줄바꿈 허용으로 전환(링크까지 모두 노출). */
@media (max-width: 560px) {
  .beta-bar {
    white-space: normal; overflow: visible; text-overflow: clip;
    font-size: 13px; padding: 8px 14px; line-height: 1.45;
  }
}

/* ---- P0-6: before/after 화살표 강화 (연테라 원형 배경·수직중앙) ---- */
.ba-grid { align-items: stretch; }
.ba-arrow {
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-accent-soft);
  border: 1px solid var(--c-gold-soft);
  color: var(--c-accent) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  line-height: 1;
}
@media (max-width: 760px) {
  .ba-grid { grid-template-columns: 1fr !important; }
  .ba-arrow { transform: rotate(90deg); margin: 4px auto; }
  /* H4 픽스(5인 공격 후 정리): 모바일 가로스크롤 박제 — 1107 980px과 동일 통일(같은 @media 중복 정의 cascade로 600 승리하던 결함 해소) */
  #previewTable { min-width: 980px; }
}

/* ---- P0-7: feature·택배사·shop 카드 라인아이콘 stroke 상향 ---- */
.feat-card .ico, .shop-card .ico, .carrier-logo-cell .ico { stroke-width: 1.9; }
.shop-card .icon { font-size: 22px; opacity: 0.85; color: var(--c-text-soft); }
.shop-card .icon .ico { width: 22px; height: 22px; }

/* ---- P1-13: shop·trust·feat 카드 라운드 한 단계↓ + 상단 액센트선 ---- */
.shop-card {
  border-radius: var(--r-sm);
  position: relative;
}
.shop-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--c-gold-soft); opacity: 0; transition: opacity .3s var(--ease-lux);
}
.shop-card:hover::before { opacity: 1; }

/* ---- P2-14: feature 카드 min-height 통일 ---- */
.feat-card { min-height: 280px; display: flex; flex-direction: column; }

/* ---- P1-8: features·trust 좌측정렬 2단 에디토리얼 ---- */
#features {
  max-width: 1100px; margin: 0 auto;
}
#features.editorial { display: block; }
.editorial-head {
  max-width: 360px; text-align: left;
}
.editorial-head .section-number { text-align: left; margin-left: 0; }
.editorial-head .section-number::before { display: none; }
.editorial-head .section-eyebrow { text-align: left; }
.editorial-head .section-title { text-align: left; margin-bottom: 18px; }
.editorial-head .section-sub { text-align: left; margin: 0; max-width: none; }
.editorial-wrap {
  display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  .editorial-wrap { grid-template-columns: 1fr; gap: 36px; }
  .editorial-head { max-width: none; }
  #features .feat-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  #features .feat-grid { grid-template-columns: 1fr !important; }
  .feat-card { min-height: 0; }
}

/* ---- P1-11: 다크 톤 섹션 추가 호흡 — trust-belt(4중 안전망)를 잉크 다크로 ---- */
.trust-belt.dark-section {
  background:
    radial-gradient(60% 80% at 80% -10%, rgba(139,92,246,0.10), rgba(139,92,246,0) 60%),
    radial-gradient(50% 70% at 12% 110%, rgba(91,80,240,0.12), rgba(91,80,240,0) 60%),
    linear-gradient(160deg, #1d1b3a, #131225) !important;
  color: var(--c-bg);
  position: relative;
}
.trust-belt.dark-section::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
  opacity: 0.5;
}
.trust-belt.dark-section .section-title { color: var(--c-bg); }
.trust-belt.dark-section .section-title em { color: var(--c-gold); }
.trust-belt.dark-section .section-eyebrow { color: var(--c-gold); }
.trust-belt.dark-section .section-sub { color: rgba(255,255,255,0.66); }
.trust-belt.dark-section .section-number { color: var(--c-gold); }
.trust-belt.dark-section .section-number::before,
.trust-belt.dark-section .section-number::after { background: rgba(255,255,255,0.2); }
/* 다크 섹션 내 L1~L4 셀 */
.trust-belt.dark-section .safenet-grid {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.trust-belt.dark-section .safenet-cell {
  background: rgba(255,255,255,0.03) !important;
}
.trust-belt.dark-section .safenet-cell .lvl { color: var(--c-gold) !important; }
.trust-belt.dark-section .safenet-cell .ttl { color: var(--c-bg) !important; }
.trust-belt.dark-section .safenet-cell .dsc { color: rgba(255,255,255,0.62) !important; }
/* 모바일/태블릿: 4중 안전망 4열 → 2열로 접기 (인라인 grid 오버라이드) */
@media (max-width: 760px) {
  .safenet-grid { grid-template-columns: repeat(2, 1fr) !important; margin-top: 40px !important; }
}
/* 모바일: 인라인 그리드 섹션 강제 1열 (인라인 grid 오버라이드) */
@media (max-width: 640px) {
  .ba-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .ba-grid .ba-arrow, .ba-grid > .arrow { transform: rotate(90deg); justify-self: center; }
  .feat-grid { grid-template-columns: 1fr !important; }
  .promise-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .promise-trust { grid-template-columns: 1fr !important; }
}

/* ---- P1-12: 골드 헤어라인 — 큰 숫자 밑줄 액센트 (선 전용) ---- */
.numeral-rule { position: relative; display: inline-block; }
.numeral-rule::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -8px; height: 1px;
  background: var(--c-gold); opacity: 0.55;
}

/* ---- P2-14: trust 숫자+라벨 묶음 중앙정렬 균형 ---- */
.trust-cell, .trust-grid > div {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.trust-num {
  font-family: var(--font-numeral) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* ---- P2-14: 히어로 데모카드 placeholder → 샘플 텍스트 느낌 ---- */
.hero-visual-card .row.sample {
  font-family: var(--font-sans); font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-visual-card .row.sample b { font-weight: 600; color: var(--c-text); }
.hero-visual-card.output .row.sample b { color: var(--c-gold); }

/* ---- P2-14: 1:1 플로팅 버튼 z-index + safe-margin ---- */
#kakaoFloat {
  z-index: 300 !important;
  border-radius: 999px;
  bottom: max(24px, env(safe-area-inset-bottom)) !important;
  right: max(20px, env(safe-area-inset-right)) !important;
}
@media (max-width: 560px) {
  #kakaoFloat { padding: 12px 16px !important; font-size: 16px !important; }
}

/* ============================================================
   D. 디자인 패널 격상 P1/P2 (2026-05-29)
   - K-HACCP 부모브랜드 수준 · 토큰 변수만 · 변환 로직·id·이벤트 불변
   ============================================================ */

/* ---- P1-4: 히어로 좌 텍스트 : 우 비주얼 = 5:7 ---- */
.hero-with-visual {
  grid-template-columns: 5fr 7fr;   /* 텍스트 좁히고 비주얼 크게 */
  gap: var(--sp-8);
  perspective: 1600px;              /* P1-3: 프리미엄 깊이 */
}

/* ---- P2-7: 히어로 타입 스케일 디스플레이 ---- */
.hero h1 { font-size: var(--fs-disp); }   /* 49px 모듈러 */
.hero p.sub { font-size: var(--fs-lead); max-width: 480px; }

/* ---- P1-6: 헤드라인 핵심어 연테라 배경칩 강조 ---- */
.hero h1 span.hl {
  color: var(--c-accent);
  -webkit-text-fill-color: var(--c-accent);
  font-weight: 800;
  background: none;
  padding: 0; border-radius: 0;
}

/* ---- P1-5: 3-스탯 행 (히어로 CTA 아래) ---- */
.hero-stats {
  display: flex; align-items: stretch;
  gap: 0; margin-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-3);
}
.hero-stats .stat-item {
  flex: 1; padding: 0 var(--sp-3);
  position: relative; text-align: left;
}
.hero-stats .stat-item:first-child { padding-left: 0; }
.hero-stats .stat-item + .stat-item::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 1px; background: var(--c-border);
}
.hero-stats .stat-num {
  font-family: var(--font-numeral);
  font-size: var(--fs-h3); font-weight: 600;
  color: var(--c-text); line-height: 1.05;
  letter-spacing: -0.02em; display: block;
}
.hero-stats .stat-num .u {
  font-size: var(--fs-body); font-weight: 500;
  color: var(--c-accent); margin-left: 2px;
}
.hero-stats .stat-label {
  font-size: var(--fs-cap); color: var(--c-muted);
  margin-top: 4px; letter-spacing: -0.005em;
}
@media (max-width: 900px) {
  .hero-with-visual .hero-stats { justify-content: center; max-width: 460px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 420px) {
  .hero-stats .stat-num { font-size: var(--fs-lead); }
  .hero-stats .stat-item { padding: 0 12px; }
}

/* ============================================================
   P1-1~3: 리치 디바이스 목업 (CSS only · 실사진 0)
   ============================================================ */
/* 채널톡식 소프트 그라데이션 스테이지 위에 뜬 제품 카드 (최신 톤) */
.hero-device {
  position: relative;
  padding: 30px 30px 0;
  background: linear-gradient(155deg, #e9ebff 0%, #f1ecfd 50%, #e7f5ff 100%);
  border: 1px solid #e8eafb;
  border-radius: 22px;
  overflow: hidden;
}
.js .hero-device.sjb-reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease-lux), transform .7s var(--ease-lux); transition-delay: var(--sjb-delay,0ms); }
.js .hero-device.sjb-reveal.is-in { opacity: 1; transform: none; }
.hero-device::before { display: none; }

/* --- 깔끔한 브라우저 카드 (스테이지 하단으로 자연스럽게 bleed) --- */
.laptop {
  position: relative; z-index: 1;
  border-radius: 12px 12px 0 0;
  background: var(--c-surface);
  border: 1px solid rgba(13,14,20,0.07);
  border-bottom: none;
  padding: 0; overflow: hidden;
  box-shadow: 0 1px 2px rgba(13,14,20,0.04), 0 18px 40px -20px rgba(40,40,90,0.30);
}
.laptop-screen {
  position: relative; overflow: hidden;
  background: var(--c-surface);
}
/* 브라우저 크롬 바 */
.laptop-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 14px;
  background: linear-gradient(180deg, #f3f3fb, #e9eaf6);
  border-bottom: 1px solid var(--c-border);
}
.laptop-bar .dots { display: inline-flex; gap: 6px; }
.laptop-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #d9c9b3; }
.laptop-bar .dots i:nth-child(1) { background: #e06c5e; }
.laptop-bar .dots i:nth-child(2) { background: #e3b341; }
.laptop-bar .dots i:nth-child(3) { background: #4cae6a; }
.laptop-bar .url {
  flex: 1; font-size: var(--fs-cap); color: var(--c-faint);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-sm); padding: 4px 12px; letter-spacing: -0.005em;
}
.laptop-bar .url b { color: var(--c-accent); font-weight: 600; }
/* 변환 미리보기 테이블 */
.laptop-app { padding: 0; background: var(--c-surface); }
.laptop-app-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--c-border);
}
.laptop-app-head .ttl {
  font-size: var(--fs-body); font-weight: 600; color: var(--c-text);
  letter-spacing: -0.01em;
}
.laptop-app-head .pill {
  font-size: 11px; font-weight: 600; color: var(--c-success);
  border: 1px solid var(--c-success); border-radius: var(--badge-r);
  padding: 3px 10px; letter-spacing: -0.005em;
}
.preview-mock { width: 100%; border-collapse: collapse; font-size: 12px; }
.preview-mock th {
  background: #f3f3fb; color: var(--c-muted);
  font-size: 10px; font-weight: 600; text-transform: none;
  letter-spacing: 0; padding: 8px 10px; text-align: left;
  border-bottom: 1px solid var(--c-border); white-space: nowrap;
}
.preview-mock td {
  padding: 7px 10px; border-bottom: 1px solid #eef0f7;
  color: var(--c-text-soft); white-space: nowrap;
  font-size: 11px; letter-spacing: -0.01em;
}
.preview-mock tr:nth-child(even) td { background: #fafaff; }
.preview-mock tr:last-child td { border-bottom: none; }
.mock-conf {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; padding: 2px 7px;
  border-radius: var(--badge-r); white-space: nowrap;
}
.mock-conf.ok   { color: var(--c-success); background: rgba(0,98,65,0.08); }
.mock-conf.warn { color: var(--c-warn);    background: rgba(146,64,14,0.10); }
/* 노트북 하단 받침/힌지 */
/* 노트북 받침·유리반사·겹침폰 제거 — 깔끔한 브라우저 카드(최신 톤) */
.laptop-base { display: none; }
.laptop-screen::after { display: none; }
.phone { display: none; }
.phone-screen {
  position: relative; overflow: hidden;
  border-radius: 15px; background: var(--c-surface);
  padding: 16px 14px 18px;
}
.phone-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,0.20), rgba(255,255,255,0) 40%);
}
.phone .notch {
  width: 44px; height: 4px; border-radius: 999px;
  background: rgba(31,27,26,0.18); margin: 0 auto 12px;
}
.phone .p-step { font-size: 11px; color: var(--c-faint); letter-spacing: -0.01em; margin-bottom: 6px; }
.phone .p-title { font-size: var(--fs-cap); font-weight: 600; color: var(--c-text); letter-spacing: -0.01em; line-height: 1.35; margin-bottom: 12px; }
.phone .p-bar { height: 5px; border-radius: 999px; background: var(--c-border); overflow: hidden; margin-bottom: 8px; }
.phone .p-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--c-accent), var(--c-gold)); }
.phone .p-done { font-size: 11px; font-weight: 600; color: var(--c-success); letter-spacing: -0.005em; }
.phone .p-done .n { font-family: var(--font-numeral); }

/* --- 반응형: 모바일 텍스트→목업(축소)→CTA 단일 흐름 --- */
@media (max-width: 900px) {
  .hero-with-visual { perspective: none; grid-template-columns: 1fr; }
  .hero-device { transform: none; animation: none; }
  .hero-device::before { inset: -6% 0; }
  .laptop { max-width: 520px; margin: 0 auto; }
  .phone { right: 0; bottom: -30px; transform: none; }
}
@media (max-width: 560px) {
  .phone { display: none; }   /* 좁은 화면 겹침 폰 숨김 */
  .preview-mock th:nth-child(4), .preview-mock td:nth-child(4),
  .preview-mock th:nth-child(5), .preview-mock td:nth-child(5) { display: none; }
}

/* ---- P2-10: 배지 단일 규격 통일 ---- */
.hero-visual-badge, .badge-new, .price-card .tag, .hero-eyebrow {
  min-height: var(--badge-h);
}
.badge { padding: var(--badge-pad); border-radius: var(--badge-r); min-height: var(--badge-h);
  display: inline-flex; align-items: center; }

/* ---- P2-8: 강조색 절제 — 섹션 제목 em만 테라, 본문 위계는 잉크/뉴트럴 ---- */
.feat-card h3, .price-card h3, .acc-card h2 { color: var(--c-text); }

/* ---- P2-9: 8pt 리듬 — 섹션/카드 패딩 정렬 ---- */
section { padding: var(--sp-15) var(--sp-4); }
.feat-card { padding: var(--sp-6) var(--sp-4); }
.price-card { padding: var(--sp-6) var(--sp-4); }

/* ---- P2-11: carrier-strip 라벨/택배사 또렷하게 ---- */
.carrier-strip .carrier { color: var(--c-text); border-color: var(--c-border); opacity: 1; }

/* R9 옹호자 2순위 fix: 320px 갤럭시 SE wrap 방지 */
@media (max-width:400px){.nav-cta .btn.ghost{display:none}.nav-cta .btn{padding:8px 12px;font-size:13px;white-space:nowrap}}

/* ============================================================
   홈페이지 콘텐츠 보강 (2026-06-15) — "실제 운영 사이트" 깊이
   How it works 3-step / FAQ teaser / 지원 로고 / use-case
   ============================================================ */
.how { background: var(--c-bg); }
.how-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; max-width: 1000px; margin: 56px auto 0;
}
.how-step {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 32px 28px;
  position: relative;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.how-step:hover { border-color: #d7d9e6; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.how-step .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--c-accent-soft); color: var(--c-accent);
  font-weight: 800; font-size: 17px; margin-bottom: 18px;
}
.how-step h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.how-step p { color: var(--c-muted); font-size: 16px; line-height: 1.7; margin: 0; }
.how-step .arrow-to {
  position: absolute; right: -16px; top: 50%; transform: translateY(-50%);
  color: var(--c-accent); font-size: 22px; font-weight: 700; z-index: 2;
}
.how-step:last-child .arrow-to { display: none; }
@media (max-width: 800px) {
  .how-steps { grid-template-columns: 1fr; gap: 16px; }
  .how-step .arrow-to { right: 50%; top: auto; bottom: -16px; transform: translateX(50%) rotate(90deg); }
}

/* FAQ teaser 전체보기 링크 */
.faq-more { text-align: center; margin-top: 40px; }
.faq-more a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--c-accent); font-weight: 700; font-size: 17px;
  border-bottom: 2px solid transparent; transition: border-color .2s, gap .2s;
}
.faq-more a:hover { border-color: var(--c-accent); gap: 12px; }

/* 지원 쇼핑몰 로고 스트립 (사실: 자동 매핑 대상) */
.shop-strip {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 14px; max-width: 880px; margin: 40px auto 0;
}
.shop-chip {
  padding: 10px 20px; border: 1px solid var(--c-border);
  border-radius: 999px; background: var(--c-surface);
  font-size: 16px; font-weight: 600; color: var(--c-text-soft);
  letter-spacing: -0.01em; box-shadow: var(--shadow-sm);
  transition: border-color .25s, color .25s, transform .25s;
}
.shop-chip:hover { border-color: var(--c-accent); color: var(--c-accent); transform: translateY(-2px); }
.shop-chip .more { color: var(--c-faint); font-weight: 500; }

/* ============================================================
   ERP 폼·필터 컨트롤 통일 (2026-06-15) — 컬럼·버튼 사이즈 일원화
   account.html 등 앱 화면의 .erp-query/.qf/add-row 일괄 정렬
   ============================================================ */
.erp-query {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px 16px; align-items: end;
  padding: 16px; margin-bottom: 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: 12px;
}
.erp-query .qf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.erp-query .qf > label { font-size: 12px; font-weight: 600; color: var(--c-muted); letter-spacing: 0; }
.erp-query .qf input,
.erp-query .qf select,
.erp-query .qf-row input {
  width: 100%; height: 38px; padding: 0 12px;
  border: 1px solid var(--c-border); border-radius: 8px;
  font-size: 14px; background: var(--c-surface); color: var(--c-text);
  box-sizing: border-box; font-family: inherit; letter-spacing: 0;
}
.erp-query .qf-row { display: flex; align-items: center; gap: 8px; }
.erp-query .qf-row > span { color: var(--c-faint); font-size: 13px; flex: 0 0 auto; }
.erp-query .qf-row.preset { gap: 6px; flex-wrap: wrap; }
.erp-query .qf-row.preset button {
  flex: 1 1 auto; min-width: 54px; height: 38px; padding: 0 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0;
  background: var(--c-surface); color: var(--c-text-soft);
  border: 1px solid var(--c-border); border-radius: 8px;
  box-shadow: none;
}
.erp-query .qf-row.preset button:hover { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-surface); }
.erp-query .qf-row.preset button.on { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.erp-query .qf-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.erp-query .qf-actions .btn,
.erp-query .qf-actions button,
.erp-query .qf-actions .ghost { height: 38px; padding: 0 16px; font-size: 14px; box-shadow: none; }

/* 앱 추가 행(고객/CS/상품 등): 필드·버튼 높이 38px 통일 */
.acc-addrow {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  padding: 16px; margin-bottom: 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: 12px;
}
.acc-addrow > div { display: flex; flex-direction: column; gap: 6px; }
.acc-addrow label { font-size: 12px; font-weight: 600; color: var(--c-muted); }
.acc-addrow input,
.acc-addrow select {
  height: 38px !important; padding: 0 12px !important;
  font-size: 14px !important; border: 1px solid var(--c-border) !important;
  border-radius: 8px !important; box-sizing: border-box; background: #fff;
  width: 100%;
}
.acc-addrow button { height: 38px; padding: 0 18px; font-size: 14px; align-self: flex-end; box-shadow: none; }