/* =====================================================
 * landing-b.css  v0.9.4.7 (extracted from src/index.tsx)
 * Type B landing page styles (originally L306-673).
 * ===================================================== */
        /* ══════════════════════════════════════════════
           NAV STYLES
        ══════════════════════════════════════════════ */

        /* ── Nav base: 격자 패턴 배경 ── */
        #main-nav {
          position:fixed;
        }
        /* 격자 패턴 레이어 — ::before로 grid 선 그리기 */
        #main-nav::before {
          content:'';
          position:absolute; inset:0; pointer-events:none; z-index:0;
          /* 가로+세로 격자선 — 밝기 강화 */
          background-image:
            linear-gradient(rgba(129,140,248,0.22) 1px, transparent 1px),
            linear-gradient(90deg, rgba(129,140,248,0.22) 1px, transparent 1px);
          background-size:36px 36px;
          /* 위→아래 페이드 (불투명도 유지 강화) */
          mask-image:linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 100%);
          -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 100%);
        }
        /* 하단 인디고 글로우 라인 */
        #main-nav::after {
          content:'';
          position:absolute; bottom:0; left:50%; transform:translateX(-50%);
          width:55%; height:1px; pointer-events:none; z-index:0;
          background:linear-gradient(90deg, transparent, rgba(99,102,241,0.5), transparent);
        }
        #main-nav > * { position:relative; z-index:1; }

        /* ── Nav link pill hover ── */
        .nav-link {
          position:relative; display:inline-flex; align-items:center; gap:6px;
          padding:7px 16px; border-radius:10px; font-size:13.5px; font-weight:600;
          color:rgba(255,255,255,0.5); text-decoration:none;
          border:1px solid transparent;
          transition:color .22s, border-color .22s, background .22s, box-shadow .22s;
          letter-spacing:0.01em;
        }
        .nav-link:hover {
          color:#fff;
          border-color:rgba(129,140,248,0.3);
          background:rgba(99,102,241,0.08);
          box-shadow:0 0 0 3px rgba(99,102,241,0.08), inset 0 0 12px rgba(99,102,241,0.05);
        }
        .nav-link i { transition:color .22s; }
        .nav-link:hover i { filter:brightness(1.3); }

        /* ── Login btn (green pill, always visible) ── */
        .btn-login {
          display:inline-flex; align-items:center; gap:5px;
          padding:8px 14px; border-radius:999px; font-size:13px; font-weight:700;
          color:#fff; cursor:pointer; border:none; flex-shrink:0;
          background:linear-gradient(135deg,#16a34a,#15803d);
          box-shadow:0 2px 14px rgba(22,163,74,0.4);
          transition:opacity .2s, box-shadow .2s, transform .15s;
          white-space:nowrap;
        }
        .btn-login:hover { opacity:.92; box-shadow:0 4px 20px rgba(22,163,74,0.5); transform:translateY(-1px); }
        .btn-login:active { transform:scale(0.97); }
        @media (max-width:767px) {
          .btn-login { padding:6px 10px; font-size:11.5px; gap:3px; }
        }

        /* ── Start btn (blue-purple pill) ── */
        .btn-start {
          display:inline-flex; align-items:center; gap:6px;
          padding:8px 18px; border-radius:999px; font-size:13.5px; font-weight:700;
          color:#fff; cursor:pointer; border:none;
          background:linear-gradient(135deg,#3B82F6,#6366F1);
          box-shadow:0 2px 14px rgba(99,102,241,0.4);
          transition:opacity .2s, box-shadow .2s, transform .15s;
          white-space:nowrap;
        }
        .btn-start:hover { opacity:.92; box-shadow:0 4px 20px rgba(99,102,241,0.5); transform:translateY(-1px); }
        .btn-start:active { transform:scale(0.97); }
        @media (max-width:767px) {
          .btn-start { padding:6px 10px; font-size:11.5px; gap:3px; }
        }

        /* ══════════════════════════════════════════════
           SECTION STREETLIGHT — 스크롤 감응형 가로등 효과
           · div.sl-beam (빛줄기) + div.sl-line (광원라인)
           · overflow:hidden 영향 없이 position:fixed처럼 동작
           · JS IntersectionObserver → opacity transition
        ══════════════════════════════════════════════ */

        /* 섹션 공통: position:relative 보장 */
        #section-hero,
        #section-features, #section-process,
        #stats, #section-comparison, #section-pricing, #section-cta {
          position: relative;
        }

        /* ── 빛줄기 div ── */
        .sl-beam {
          position:absolute;
          top:0; left:50%;
          transform:translateX(-50%);
          width:90vw;            /* 섹션 폭의 90% — 과하지 않게 */
          height:520px;
          pointer-events:none;
          z-index:1;
          /* 연한 오렌지-앰버 원뿔형 가로등 빛 */
          background: radial-gradient(
            ellipse 44% 100% at 50% 0%,
            rgba(255,200,120,0.18)  0%,
            rgba(255,170,80,0.10)  28%,
            rgba(255,140,50,0.04)  60%,
            rgba(200,100,30,0.01)  82%,
            transparent            100%
          );
          filter: blur(1px);
          /* OFF 상태 */
          opacity:0;
          transition: opacity 1.1s cubic-bezier(0.25,0.46,0.45,0.94);
          will-change: opacity;
        }

        /* ── 광원 라인 div ── */
        .sl-line {
          position:absolute;
          top:0; left:50%;
          transform:translateX(-50%);
          width:60vw;
          height:1px;
          pointer-events:none;
          z-index:2;
          background: linear-gradient(
            90deg,
            transparent               0%,
            rgba(180,100,30,0.12)    6%,
            rgba(255,180,80,0.45)   22%,
            rgba(255,220,150,0.88)  50%,
            rgba(255,180,80,0.45)   78%,
            rgba(180,100,30,0.12)   94%,
            transparent             100%
          );
          box-shadow:
            0 0  4px 1px rgba(255,200,100,0.50),
            0 0 16px 4px rgba(255,160,60,0.20),
            0 0 45px 10px rgba(200,100,30,0.07);
          /* OFF 상태 */
          opacity:0;
          transition: opacity 0.85s cubic-bezier(0.25,0.46,0.45,0.94);
          will-change: opacity;
        }

        /* ── ON 상태 ── */
        .sl-beam.sl-on { opacity:1; }
        .sl-line.sl-on { opacity:1; }

        /* ── 섹션별 높이 조정 ── */
        #section-hero    .sl-beam { height:620px; width:95vw; }
        #section-features .sl-beam { height:560px; }
        #section-process .sl-beam { height:480px; }
        #stats           .sl-beam { height:420px; }
        #section-comparison .sl-beam { height:640px; }
        #section-pricing .sl-beam { height:560px; }
        #section-cta     .sl-beam { height:420px; }

        /* ══════════════════════════════════════════════
           FOOTER STYLES — unified section
        ══════════════════════════════════════════════ */

        #site-footer {
          position:relative;
          background:#050810;
        }

        /* 도트 격자 패턴 — 중간 밝기, 전체 균일 */
        #site-footer::before {
          content:'';
          position:absolute; inset:0; pointer-events:none; z-index:0;
          background-image:radial-gradient(rgba(129,140,248,0.32) 1.2px, transparent 1.2px);
          background-size:22px 22px;
        }

        /* 푸터 구분선 — 가운데 밝고 양끝 희미 */
        .footer-divider {
          width:100%; height:1px; border:none; margin:0;
          background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 30%, rgba(255,255,255,0.18) 70%, transparent 100%);
        }

        /* 상단 인디고 글로우 라인 */
        #site-footer::after {
          content:'';
          position:absolute; top:0; left:50%; transform:translateX(-50%);
          width:50%; height:1px; pointer-events:none; z-index:0;
          background:linear-gradient(90deg, transparent, rgba(99,102,241,0.55), transparent);
        }

        #site-footer > * { position:relative; z-index:1; }

        /* ── 사업자 정보 아이템 ── */
        .footer-biz-item {
          display:inline-flex; align-items:center; gap:4px;
          color:rgba(255,255,255,0.5); font-size:12px;
        }
        .footer-biz-item i { color:rgba(129,140,248,0.7); font-size:10px; }

        /* ── 약관 버튼 ── */
        .footer-legal-btn {
          display:inline-flex; align-items:center; gap:4px;
          background:none; border:none; cursor:pointer;
          padding:3px 8px; border-radius:6px;
          font-size:12.5px; font-weight:500;
          color:rgba(255,255,255,0.45);
          transition:color .18s, background .18s;
          text-decoration:none;
        }
        .footer-legal-btn:hover { color:#fff; background:rgba(99,102,241,0.1); }
        .footer-legal-btn i { font-size:10px; color:rgba(129,140,248,0.65); transition:color .18s; }
        .footer-legal-btn:hover i { color:#818CF8; }

        /* ── 구분자 ── */
        .footer-sep {
          color:rgba(255,255,255,0.15); font-size:11px; user-select:none;
          padding:0 1px;
        }

        /* ══════════════════════════════════════════════
           Footer Business Bar (v0.9.5.3)
           PC: 가로 1줄 자연 정렬 (충분한 폭)
           Mobile: 가로 스크롤 1줄 + 좌우 화살표 버튼
        ══════════════════════════════════════════════ */
        .footer-biz-wrap {
          display:flex; align-items:center; justify-content:center;
          width:100%; max-width:100%; gap:6px;
          position:relative;
        }
        .footer-biz-scroll {
          flex:1 1 auto; min-width:0;
          overflow-x:auto; overflow-y:hidden;
          scroll-behavior:smooth;
          -webkit-overflow-scrolling:touch;
          /* 양 끝 페이드 마스크로 잘림 표시 */
          mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
          -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
        }
        .footer-biz-scroll::-webkit-scrollbar { display:none; }
        .footer-biz-scroll { scrollbar-width:none; }
        .footer-biz-track {
          display:inline-flex; align-items:center; flex-wrap:nowrap;
          gap:0; white-space:nowrap;
          padding:0 4px;
        }
        .footer-biz-item {
          display:inline-flex; align-items:center; gap:5px;
          padding:0 8px; font-size:11.5px;
          flex-shrink:0; white-space:nowrap;
        }
        .footer-biz-sep {
          font-size:11px; flex-shrink:0;
        }
        .footer-biz-arrow {
          flex-shrink:0;
          width:24px; height:24px;
          display:none; /* PC 에서는 숨김 */
          align-items:center; justify-content:center;
          background:rgba(255,255,255,0.04);
          border:1px solid rgba(255,255,255,0.08);
          border-radius:9999px;
          color:rgba(255,255,255,0.55);
          cursor:pointer;
          transition:background 0.18s, border-color 0.18s, color 0.18s, transform 0.08s;
          padding:0;
          /* iOS long-press 시 text selection / callout / highlight 차단 */
          -webkit-user-select:none; user-select:none;
          -webkit-touch-callout:none;
          -webkit-tap-highlight-color:transparent;
          touch-action:manipulation;
        }
        .footer-biz-arrow:hover {
          background:rgba(99,102,241,0.18);
          border-color:rgba(99,102,241,0.35);
          color:#fff;
        }
        .footer-biz-arrow:active {
          transform:scale(0.92);
          background:rgba(99,102,241,0.28);
          border-color:rgba(99,102,241,0.5);
          color:#fff;
        }
        .footer-biz-arrow i { font-size:11px; line-height:1; }
        /* PC 에서는 한 줄 우선이지만 폭 부족 시 자연 wrap 허용. 화살표 숨김 */
        @media (min-width: 641px) {
          .footer-biz-track { flex-wrap:wrap; justify-content:center; gap:2px 0; }
          .footer-biz-scroll { overflow-x:visible; mask-image:none; -webkit-mask-image:none; }
        }
        /* 모바일: 화살표 노출 + scroll 컨테이너 활성화 */
        @media (max-width: 640px) {
          .footer-biz-arrow { display:inline-flex; }
          .footer-biz-item { padding:0 6px; font-size:11px; }
          .footer-biz-item span:last-child { letter-spacing:-0.01em; }
        }

        /* ══════════════════════════════════════════════
           MOBILE OPTIMIZATION (v0.9.3.6)
           - 앵커 스크롤: fixed nav(64px) 보정
           - 푸터: 메뉴 한줄 유지 (구분선 여백 축소)
           - 섹션: 모바일에서 좌우 padding·폰트·overflow 최적화
        ══════════════════════════════════════════════ */

        /* ── 앵커 점프: 섹션 최상단 가로줄 = nav 바닥선과 정확히 일치 (64px) ── */
        html { scroll-padding-top: 64px; scroll-behavior: smooth; }
        section[id^="section-"], #stats, #d-testimonials, #d-faq { scroll-margin-top: 64px; }

        /* ══════════════════════════════════════════════
           통계 카드 단일 박스
           모바일(≤640): 2×2 그리드 (칸 폭 2배 확보)
           태블릿+(≥641): 가로 4열
        ══════════════════════════════════════════════ */
        .stats-unified .stats-col { min-width: 0; position: relative; }
        .stats-unified .stats-head {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          margin: 0 auto 8px;
          min-height: 48px;
        }
        .stats-unified .stats-icon {
          width: 40px;
          height: 40px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }
        .stats-unified .stats-val   { font-size: 34px; letter-spacing: -0.02em; line-height: 1; }
        .stats-unified .stats-label {
          font-size: 13px;
          letter-spacing: -0.01em;
          line-height: 1.3;
          text-align: center;
          margin-bottom: 4px;
        }
        .stats-unified .stats-sub   { font-size: 12px; line-height: 1.35; }
        .stats-unified .stats-val-suffix {
          font-size: 0.42em;
          font-weight: 700;
          letter-spacing: -0.01em;
          margin-left: 0.18em;
          vertical-align: 0.18em;
          opacity: 0.88;
        }

        /* ── 태블릿+ (≥641px): 가로 4열, 1·2·3번 칸 왼쪽에 세로선 ── */
        @media (min-width: 641px) {
          .stats-unified .stats-col-1,
          .stats-unified .stats-col-2,
          .stats-unified .stats-col-3 { border-left: 1px solid rgba(255,255,255,0.08); }
        }
        @media (min-width: 1024px) {
          .stats-unified .stats-icon  { width: 48px; height: 48px; border-radius: 16px; }
          .stats-unified .stats-val   { font-size: 40px; }
          .stats-unified .stats-label { font-size: 14px; }
          .stats-unified .stats-sub   { font-size: 13px; }
        }
        /* 태블릿 (641~1023) */
        @media (max-width: 1023px) and (min-width: 641px) {
          .stats-unified .stats-val   { font-size: 30px; }
        }

        /* ── 모바일 (≤640px): 2×2 그리드 ──
           칸 배치:
             [ 0 | 1 ]      (세로선: col-1 왼쪽)
             [ 2 | 3 ]      (가로선: col-2/col-3 위쪽, 세로선: col-3 왼쪽)
           칸 폭이 이전 4열 대비 2배 → "₩3,253만원" 여유롭게 들어감.
        */
        @media (max-width: 640px) {
          .stats-unified .stats-col { padding: 20px 12px !important; }
          .stats-unified .stats-col-1 { border-left: 1px solid rgba(255,255,255,0.08); }
          .stats-unified .stats-col-2,
          .stats-unified .stats-col-3 { border-top: 1px solid rgba(255,255,255,0.08); }
          .stats-unified .stats-col-3 { border-left: 1px solid rgba(255,255,255,0.08); }
          .stats-unified .stats-val   { font-size: 26px !important; letter-spacing: -0.03em !important; }
          .stats-unified .stats-label { font-size: 12px !important; }
          .stats-unified .stats-sub   { font-size: 11px !important; line-height: 1.35 !important; }
        }
        @media (max-width: 380px) {
          .stats-unified .stats-col { padding: 16px 8px !important; }
          .stats-unified .stats-val   { font-size: 22px !important; }
          .stats-unified .stats-label { font-size: 11px !important; }
          .stats-unified .stats-sub   { font-size: 10px !important; }
        }

        /* ══════════════════════════════════════════════
           절감 계산기 결과 박스 (1×4, 줄바꿈 방지)
        ══════════════════════════════════════════════ */
        .calc-result-box .calc-col { min-width: 0; padding: 4px 8px; }
        .calc-result-box .calc-col-divider { border-left: 1px solid rgba(255,255,255,0.08); }
        .calc-result-box .calc-label { font-size: 11px; line-height: 1.3; }
        .calc-result-box .calc-val   { font-size: 20px; letter-spacing: -0.01em; }
        @media (min-width: 1024px) {
          .calc-result-box .calc-label { font-size: 12px; }
          .calc-result-box .calc-val   { font-size: 24px; }
        }
        /* 모바일 (≤640) — 4열 유지, 폰트 축소 */
        @media (max-width: 640px) {
          .calc-result-box { padding: 12px 6px !important; }
          .calc-result-box .calc-col { padding: 2px 4px; }
          .calc-result-box .calc-label { font-size: 9.5px !important; line-height: 1.2 !important; }
          .calc-result-box .calc-val   { font-size: 13px !important; }
        }
        @media (max-width: 380px) {
          .calc-result-box .calc-label { font-size: 8.5px !important; }
          .calc-result-box .calc-val   { font-size: 11px !important; }
        }

        /* ── 모바일: 푸터 구분선·메뉴 여백 축소 (한 줄 유지) ── */
        @media (max-width: 767px) {
          .footer-legal-btn {
            padding: 3px 4px !important;
            font-size: 11.5px !important;
            gap: 3px !important;
          }
          .footer-legal-btn i { font-size: 9px !important; }
          .footer-sep { font-size: 10px !important; padding: 0 !important; }
          #footer-links { gap: 0 1px !important; flex-wrap: nowrap !important; }
          #footer-biz-bar .footer-biz-item { font-size: 11px !important; }
        }

        /* ── 모바일: HERO 제목/본문 가독성 ── */
        @media (max-width: 640px) {
          #section-hero h1 {
            font-size: 26px !important;
            line-height: 1.18 !important;
          }
          #section-hero p {
            font-size: 13.5px !important;
            line-height: 1.65 !important;
          }
        }

        /* ── 모바일: 섹션 공통 좌우 padding·제목 크기 통일 ── */
        @media (max-width: 640px) {
          #section-pain .max-w-5xl,
          #section-features .max-w-7xl,
          #section-process .max-w-7xl,
          #section-comparison .max-w-7xl,
          #section-pricing .max-w-7xl,
          #section-cta .max-w-5xl {
            padding-left: 16px !important;
            padding-right: 16px !important;
          }
          #section-pain h2,
          #section-features h2,
          #section-comparison h2 {
            font-size: 24px !important;
            line-height: 1.2 !important;
          }
        }

        /* ── 모바일: PAIN 해결책 배너 폰트·padding ── */
        @media (max-width: 640px) {
          #section-pain .rounded-2xl {
            padding: 20px 16px !important;
          }
          #section-pain .rounded-2xl > div.text-\[28px\] {
            font-size: 22px !important;
            line-height: 1.25 !important;
          }
        }

        /* ── 모바일: PROCESS step 카드 ── */
        @media (max-width: 640px) {
          #section-process .grid { gap: 24px !important; }
          #section-process .space-y-4 > div {
            padding: 14px !important;
          }
        }

        /* ── 모바일: COMPARISON 수치 카드 폰트 축소 ── */
        @media (max-width: 640px) {
          #section-comparison .text-\[34px\] { font-size: 28px !important; }
          #section-comparison .text-\[44px\] { font-size: 28px !important; }
        }

        /* ── 모바일: CTA 제목 축소 ── */
        @media (max-width: 640px) {
          #section-cta h2 { font-size: 24px !important; line-height: 1.25 !important; }
        }

        /* ── 모바일: 가로 스크롤 원천 차단 ── */
        @media (max-width: 767px) {
          body, html { overflow-x: hidden !important; max-width: 100vw !important; }
          #app-root { overflow-x: hidden !important; max-width: 100vw !important; }
        }

        /* ─────────────────────────────────────────────────────────────
         * 표준 3D 버튼 (대시보드와 동일 패턴, 심플 버전)
         * 단일 솔리드 색 + box-shadow 한 줄로 아래쪽 그림자 표현.
         * ───────────────────────────────────────────────────────────── */
        .btn-3d {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          width: 100%;
          padding: 10px 16px;
          font-size: 13px;
          font-weight: 700;
          color: #fff;
          cursor: pointer;
          outline: none;
          border: 0;
          text-decoration: none;
          border-radius: 10px;
          transition: transform 120ms cubic-bezier(0,0,.58,1),
                      box-shadow 120ms cubic-bezier(0,0,.58,1);
          user-select: none;
          -webkit-tap-highlight-color: transparent;
        }
        .btn-3d:hover  { transform: translateY(2px); }
        .btn-3d:active { transform: translateY(4px); }
        .btn-3d:disabled,
        .btn-3d[aria-disabled="true"] {
          cursor: not-allowed; opacity: .55; transform: none;
        }
        .btn-3d > iconify-icon { font-size: 15px; }

        /* 컬러 변형 */
        .btn-3d.btn-3d-indigo        { background: #6366f1; box-shadow: 0 4px 0 0 #3730a3; }
        .btn-3d.btn-3d-indigo:hover  { background: #4f46e5; box-shadow: 0 2px 0 0 #3730a3; }
        .btn-3d.btn-3d-indigo:active { background: #4f46e5; box-shadow: 0 0 0 0 #3730a3; }

        /* 사이즈 변형 — 랜딩 페이지의 큰 CTA용 */
        .btn-3d.btn-3d-lg {
          padding: 16px 28px;
          font-size: 16px;
          border-radius: 14px;
          gap: 10px;
        }
        .btn-3d.btn-3d-lg > iconify-icon { font-size: 18px; }

        .btn-3d.btn-3d-xl {
          padding: 20px 36px;
          font-size: 17px;
          border-radius: 16px;
          gap: 12px;
        }
        .btn-3d.btn-3d-xl > iconify-icon { font-size: 20px; }

        /* 그림자가 아래로 4px 빠지므로 부모에 여유 */
        .btn-3d-wrap { padding-bottom: 4px; }
        .btn-3d-bar  { padding-bottom: 4px; }

        /* ─────────────────────────────────────────────────────────────
         * B타입 한정: 요금제 플랜 카드 CTA 버튼을 표준 3D 버튼으로 오버라이드.
         * buildPlanCards 함수는 A/B 공용이라 직접 수정 불가 → CSS로 후처리.
         * .plan-card__cta 의 인라인 style 을 모두 무효화하고 3D 버튼 효과 적용.
         * ───────────────────────────────────────────────────────────── */
        .plan-card .plan-card__cta {
          /* 인라인 style 무력화 */
          background: #6366f1 !important;
          color: #fff !important;
          border: 0 !important;
          box-shadow: 0 4px 0 0 #3730a3 !important;
          /* 3D 버튼 트랜지션 */
          transition: transform 120ms cubic-bezier(0,0,.58,1),
                      box-shadow 120ms cubic-bezier(0,0,.58,1),
                      background 120ms !important;
          /* active:scale 류 효과 무력화 */
          transform: none;
        }
        .plan-card .plan-card__cta:hover {
          background: #4f46e5 !important;
          box-shadow: 0 2px 0 0 #3730a3 !important;
          transform: translateY(2px) !important;
        }
        .plan-card .plan-card__cta:active {
          background: #4f46e5 !important;
          box-shadow: 0 0 0 0 #3730a3 !important;
          transform: translateY(4px) !important;
        }
        /* 추천이 아닌 플랜(흰색 반투명) 도 동일 톤으로 통일하려면 그대로 두고,
           좀 더 차분한 느낌이 좋다면 slate 계열로 변경 */
        .plan-card .plan-card__cta[data-featured="false"] {
          background: rgba(255,255,255,0.08) !important;
          color: rgba(255,255,255,0.85) !important;
          box-shadow: 0 4px 0 0 rgba(0,0,0,0.45) !important;
        }
        .plan-card .plan-card__cta[data-featured="false"]:hover {
          background: rgba(255,255,255,0.13) !important;
          box-shadow: 0 2px 0 0 rgba(0,0,0,0.45) !important;
        }
        .plan-card .plan-card__cta[data-featured="false"]:active {
          background: rgba(255,255,255,0.13) !important;
          box-shadow: 0 0 0 0 rgba(0,0,0,0.45) !important;
        }
        /* CTA 가 .mb-7 만 가지고 있어 그림자가 다음 ul 과 겹칠 수 있음 → 여유 추가 */
        .plan-card .plan-card__cta { margin-bottom: 32px !important; }


/* ============================================================
   Type C — Section: Detail Pages (8장 자동 생성 카드 그리드)
   ──────────────────────────────────────────────────────────
   심플하지만 임팩트 있게 "AI가 8장의 상세페이지를 한 번에 자동
   생성한다"를 보여주는 카드 그리드. 책장 넘김 같은 무거운
   인터랙션은 제거. 짝수 카드만 살짝 아래로 어긋나게 배치(--p-shift)
   해서 단순 반복 패턴을 피하고 리듬을 만든다.
   ============================================================ */

/* 8장 카드 — 한 줄 가로 스크롤 (snap)
   데스크탑은 8장이 한 줄에 균등하게 들어가고,
   좁아지면 자연스럽게 좌우 스크롤로 전환된다.
   (Task 13) 카드 어긋남 제거 → 모두 같은 baseline + 같은 높이로 정렬. */
.dp-grid{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;          /* 카드 높이 일치 */
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px 4px 18px;
  margin: 0 -4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(251,191,36,0.35) rgba(255,255,255,0.04);
}
.dp-grid::-webkit-scrollbar{ height: 6px; }
.dp-grid::-webkit-scrollbar-track{ background: rgba(255,255,255,0.04); border-radius: 999px; }
.dp-grid::-webkit-scrollbar-thumb{ background: rgba(251,191,36,0.35); border-radius: 999px; }
.dp-grid::-webkit-scrollbar-thumb:hover{ background: rgba(251,191,36,0.55); }

.dp-card{
  --p-c1: #fbbf24;
  --p-c2: #f59e0b;
  --p-shift: 0px;
  position: relative;
  /* 데스크탑: 8장이 한 줄에 들어가도록 가변 폭 (gap 12px × 7 = 84px) */
  flex: 0 0 calc((100% - 12px * 7) / 8);
  min-width: 0;
  display: flex;                  /* 내부 높이 균등화 위해 */
  flex-direction: column;
  scroll-snap-align: start;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22,.7,.18,1), border-color .25s ease, box-shadow .35s ease;
  /* 어긋남 제거 (Task 13) — 모두 같은 라인 */
  transform: translateY(0);
  box-shadow: 0 12px 28px rgba(0,0,0,0.32);
}
/* body 영역을 카드 하단까지 확장해서 높이 균등화 */
.dp-card .dp-card-body{ flex: 1 1 auto; }
/* 화면이 좁아지면 카드 폭을 고정해서 가로 스크롤이 자연스럽게 작동 */
@media (max-width: 1100px){
  .dp-card{ flex: 0 0 22%; }
}
@media (max-width: 900px){
  .dp-card{ flex: 0 0 28%; }
}
@media (max-width: 640px){
  .dp-grid{ gap: 10px; padding: 6px 4px 14px; }
  .dp-card{ flex: 0 0 46%; }
}
@media (max-width: 420px){
  .dp-card{ flex: 0 0 58%; }
}
.dp-card::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--p-c1) 14%, transparent) 0%, color-mix(in srgb, var(--p-c2) 6%, transparent) 100%);
  opacity: .9;
  pointer-events:none;
  z-index:0;
}
.dp-card:hover{
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--p-c1) 55%, transparent);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.45),
    0 0 0 1px color-mix(in srgb, var(--p-c1) 30%, transparent);
}
@media (max-width: 640px){
  .dp-card:hover{ transform: translateY(-4px); }
}

/* 좌상단 챕터 번호 배지 */
.dp-card-num{
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(8,11,22,0.55);
  border: 1px solid color-mix(in srgb, var(--p-c1) 45%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}
.dp-card-num-pre{
  font-size: 9.5px; letter-spacing: 0.1em; font-weight: 700;
  color: rgba(255,255,255,0.55);
}
.dp-card-num-val{
  font-size: 12.5px; font-weight: 900;
  color: var(--p-c1);
  font-variant-numeric: tabular-nums;
}

/* 그라데이션 비주얼 영역 (상세페이지 hero 이미지 위치 흉내) */
.dp-card-visual{
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--p-c1) 0%, var(--p-c2) 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  z-index: 1;
}
.dp-card-icon{
  font-size: 38px;
  color: rgba(255,255,255,0.92);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
  position: relative; z-index: 2;
}
@media (max-width: 640px){
  .dp-card-icon{ font-size: 32px; }
}
/* 살짝 빛이 흐르는 shimmer overlay */
.dp-card-shimmer{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 20%, rgba(255,255,255,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 90%, rgba(0,0,0,0.18) 0%, transparent 60%);
  pointer-events: none;
}

.dp-card-body{
  position: relative;
  z-index: 1;
  padding: 12px 14px 14px;
  background: rgba(8,11,22,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.dp-card-en{
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--p-c1) 80%, white 20%);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.dp-card-ko{
  font-size: 15px; font-weight: 900;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
@media (max-width: 640px){
  .dp-card-ko{ font-size: 13.5px; }
}
.dp-card-lines{
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 10px;
}
.dp-card-line{
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
}
@media (max-width: 640px){
  .dp-card-lines{ margin-top: 8px; gap: 3px; }
  .dp-card-line{ height: 3px; }
}


/* ============================================================
   Type C — Hero responsive helpers (Task 11 mobile readability)
   ──────────────────────────────────────────────────────────
   - .hero-c-grid : 데스크탑 격자 + 모바일에서는 격자 강도/주기 감소
   - .hero-c-bg   : 모바일에서 전체 배경 효과 살짝 약화
   ============================================================ */
.hero-c-grid{
  background-image:
    linear-gradient(rgba(99,102,241,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(99,102,241,0.05) 1px,transparent 1px);
  background-size: 48px 48px;
}
@media (max-width: 640px){
  /* 모바일: 격자 더 약하게 + 더 넓게 → 텍스트가 격자 위에서 잘 읽힘 */
  .hero-c-grid{
    background-image:
      linear-gradient(rgba(99,102,241,0.025) 1px,transparent 1px),
      linear-gradient(90deg,rgba(99,102,241,0.025) 1px,transparent 1px);
    background-size: 64px 64px;
  }
}

/* ============================================================
   CTA — 핵심 기능 5칩 한 줄 표시 (Task 12 → Task 14 수정)
   ──────────────────────────────────────────────────────────
   데스크탑: 한 줄에 5개 모두 표시 (줄바꿈 금지)
   모바일: 가로 스크롤로 자연스럽게 전환
   
   [Task 14] 모바일에서 왼쪽 칩이 잘려 보이는 문제 수정:
   - `justify-content: center` + overflow는 콘텐츠가 컨테이너보다 클 때
     중앙 정렬이 왼쪽 콘텐츠를 음수 영역으로 밀어 스크롤로도 도달 불가.
   - 모바일 기본을 `flex-start`로 변경하고 좌우 패딩으로 시각적 여백 확보.
   - 부모 `mx-auto` 제한을 무시하도록 viewport 폭에 맞춰 음수 마진+패딩 확장.
   ============================================================ */
.cta-chip-row{
  display: flex;
  flex-wrap: nowrap;
  /* 모바일: 콘텐츠가 넘치면 왼쪽부터 정렬되어야 첫 칩이 잘리지 않음 */
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  /* 부모 컨테이너 좌우 padding을 넘어 viewport 끝까지 스크롤 영역 확장 */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 4px 16px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,0.3) transparent;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: 16px;
}
.cta-chip-row::-webkit-scrollbar{ height: 4px; }
.cta-chip-row::-webkit-scrollbar-thumb{ background: rgba(99,102,241,0.3); border-radius: 999px; }

.cta-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.22);
  color: rgba(255,255,255,0.82);
}
.cta-chip iconify-icon{ font-size: 14px; flex-shrink: 0; }
.cta-chip > span{ white-space: nowrap; }

/* 데스크탑(>=768px): 한 줄에 5개 강제, 중앙 정렬 + viewport 확장 해제 */
@media (min-width: 768px){
  .cta-chip-row{
    justify-content: center;
    gap: 10px;
    overflow: visible;
    /* viewport 확장 해제 (데스크탑은 5칩 모두 들어가므로 중앙 정렬) */
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 4px 6px 6px;
  }
  .cta-chip{
    padding: 8px 14px;
    font-size: 13px;
  }
  .cta-chip iconify-icon{ font-size: 15px; }
}
/* 큰 데스크탑(>=1024px): 여유 있는 패딩 */
@media (min-width: 1024px){
  .cta-chip-row{ gap: 12px; }
  .cta-chip{ padding: 9px 16px; font-size: 13.5px; }
}
/* 매우 작은 화면(<360px): 폰트 축소로 가로 스크롤 거리 줄임 */
@media (max-width: 359px){
  .cta-chip{ padding: 6px 10px; font-size: 11.5px; }
}





/* ============================================================
   Task 17 (v3) — 요금제 카드 호버 ring 효과 + Free 정적 녹색 글로우
   ──────────────────────────────────────────────────────────
   - Free 카드: 평상시에도 미세한 녹색 테두리 글로우 (시그니처)
   - 호버 시: 3개 카드 모두 시그니처 색의 ring 글로우가 살짝 더 또렷해짐
       · Free       → emerald (rgba 52,211,153)
       · 스타터(기본) → white/neutral
       · 프로(featured) → indigo (rgba 99,102,241)
   - box-shadow transition 으로 부드럽게 전환
   ⚠️ animation 단축 속성을 카드 본체에 쓰지 않는다 (fadeInUp 충돌 방지)
   ============================================================ */

/* 카드 공통 — 호버 전환을 부드럽게 */
.plan-card{
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

/* ── Free 카드: 평상시 녹색 미세 글로우 ─────────────────── */
.plan-card.plan-card--free{
  position: relative;
  box-shadow:
    0 0 0 1px rgba(52,211,153,0.35) inset,
    0 0 12px 0 rgba(52,211,153,0.18),
    0 0 24px 2px rgba(52,211,153,0.10);
}
.plan-card.plan-card--free:hover{
  box-shadow:
    0 0 0 1px rgba(110,231,183,0.55) inset,
    0 0 16px 1px rgba(52,211,153,0.28),
    0 0 32px 4px rgba(52,211,153,0.16);
}

/* ── 스타터(기본/일반) 카드: 호버 시 흰색 톤 ring ─────── */
.plan-card:not(.plan-card--featured):not(.plan-card--free):hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.30) inset,
    0 0 16px 1px rgba(255,255,255,0.10),
    0 0 32px 4px rgba(255,255,255,0.06);
}

/* ── 프로(featured) 카드: 호버 시 indigo ring ─────────── */
.plan-card.plan-card--featured:hover{
  box-shadow:
    0 0 0 1px rgba(129,140,248,0.55) inset,
    0 0 16px 1px rgba(99,102,241,0.32),
    0 0 32px 4px rgba(99,102,241,0.18);
}

/* ══════════════════════════════════════════════
   TESTIMONIALS — 마퀴 가로 스크롤 (다크 테마)
   ══════════════════════════════════════════════ */
.d-testimonial-marquee-wrap {
  overflow:hidden; position:relative;
  mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.d-testimonial-marquee {
  display:flex; gap:20px; width:max-content;
  animation:d-marquee 35s linear infinite;
}
.d-testimonial-marquee:hover { animation-play-state:paused; }
@keyframes d-marquee {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.d-testimonial-card {
  flex-shrink:0; width:340px;
  padding:24px; border-radius:20px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 2px 16px rgba(0,0,0,0.2);
  display:flex; flex-direction:column; gap:14px;
}
.d-testimonial-avatar-row {
  display:flex; align-items:center; gap:10px;
}
.d-testimonial-avatar {
  width:36px; height:36px; border-radius:50%;
  object-fit:cover; flex-shrink:0;
  border:2px solid rgba(255,255,255,0.08);
}
.d-testimonial-stars { display:flex; gap:2px; }
.d-testimonial-text { font-size:14px; line-height:1.7; color:rgba(255,255,255,0.6); margin:0; flex:1; }
.d-testimonial-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.d-testimonial-name { font-size:14px; font-weight:700; color:#fff; }
.d-testimonial-role { font-size:12px; color:rgba(255,255,255,0.35); }
.d-testimonial-metric {
  padding:5px 10px; border-radius:999px;
  font-size:11px; font-weight:700; flex-shrink:0;
}
@media (max-width:768px) {
  .d-testimonial-card { width:280px; padding:18px; }
  .d-testimonial-text { font-size:13px; }
}

/* ══════════════════════════════════════════════
   FAQ — 아코디언 (다크 테마)
   ══════════════════════════════════════════════ */
.d-faq-list { max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.d-faq-item {
  border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  transition:border-color .25s, background .25s;
}
.d-faq-item:hover {
  border-color:rgba(255,255,255,0.1);
}
.d-faq-item.open {
  border-color:rgba(251,191,36,0.25);
  background:rgba(251,191,36,0.04);
}
.d-faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 24px; text-align:left;
  background:transparent; border:none; cursor:pointer;
  font-size:15px; font-weight:700; color:#fff;
  font-family:inherit; transition:background .18s;
}
.d-faq-q:hover { background:rgba(251,191,36,0.04); }
.d-faq-arrow { font-size:13px; color:rgba(255,255,255,0.25); transition:transform .25s; flex-shrink:0; }
.d-faq-item.open .d-faq-arrow { transform:rotate(180deg); color:#fbbf24; }
.d-faq-a {
  max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease;
}
.d-faq-item.open .d-faq-a { max-height:none; overflow:visible; }
.d-faq-html {
  padding:0 24px 18px;
  font-size:14px; line-height:1.7; color:rgba(255,255,255,0.62);
}
.d-faq-html p { margin:0 0 10px; color:inherit; }
.d-faq-html p:last-child { margin-bottom:0; }
.d-faq-html strong, .d-faq-html b { color:rgba(255,255,255,0.88); font-weight:700; }
.d-faq-html a { color:#93c5fd; text-decoration:underline; }
.d-faq-html ul, .d-faq-html ol { margin:0 0 10px; padding-left:1.2em; }
.d-faq-html li { margin:0 0 4px; }
.d-faq-html blockquote {
  margin:8px 0; padding:8px 12px; border-left:3px solid rgba(251,191,36,.45);
  background:rgba(255,255,255,.04); border-radius:0 8px 8px 0;
}
.d-faq-html img {
  max-width:100%; height:auto; border-radius:10px; margin:10px 0;
  display:block; border:1px solid rgba(255,255,255,.08);
}
.d-faq-html span[style], .d-faq-html p[style], .d-faq-html h1, .d-faq-html h2, .d-faq-html h3 {
  /* Quill color/background-color inline styles must win over inherited gray */
}

/* ── d-testimonials, d-faq: 스트리트라이트(가로등) 효과용 position:relative ── */
#d-testimonials, #d-faq { position: relative; }
#d-testimonials .sl-beam { height: 520px; }
#d-faq .sl-beam { height: 480px; }

/* ══════════════════════════════════════════════
   Core Features — v0.9.9.235 실서비스 샘플 + 동일 윈도우 프레임
   원본 카드 그리드는 type-d-features-backup.tsx 에 보관
   ══════════════════════════════════════════════ */
.d-feat{
  background:
    radial-gradient(ellipse 80% 50% at 12% 0%,rgba(99,102,241,0.14) 0%,transparent 55%),
    radial-gradient(ellipse 60% 40% at 92% 18%,rgba(244,114,182,0.10) 0%,transparent 50%),
    linear-gradient(180deg,#050810 0%,#070b16 55%,#050810 100%);
}
.d-feat-aurora{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(129,140,248,0.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(129,140,248,0.045) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 88%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 88%);
}
.d-feat-head{text-align:center;margin-bottom:40px}
.d-feat-kicker{
  display:inline-block;padding:5px 12px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#c7d2fe;background:rgba(99,102,241,.14);border:1px solid rgba(129,140,248,.28);
  margin-bottom:16px;
}
.d-feat-title{
  font-weight:900;letter-spacing:-.035em;line-height:1.12;
  font-size:clamp(26px,4.6vw,48px);color:#fff;
}
.d-feat-title em{
  font-style:normal;
  background:linear-gradient(120deg,#f9a8d4 0%,#c4b5fd 45%,#93c5fd 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.d-feat-lead{
  margin:14px auto 0;max-width:640px;
  font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.58);
}
.d-feat-lead strong{color:rgba(255,255,255,.92);font-weight:700}

/* ── editorial stages ── */
.d-stages{display:flex;flex-direction:column;gap:28px;margin-bottom:56px}
.d-stage{
  --accent:#818cf8;
  display:grid;grid-template-columns:1fr;gap:22px;
  align-items:center;
}
.d-stage--ad{--accent:#818cf8}
.d-stage--sns{--accent:#60a5fa}
.d-stage--detail{--accent:#fbbf24}
@media (min-width:960px){
  .d-stage{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px}
  .d-stage--flip .d-stage-copy{order:2}
  .d-stage--flip .d-stage-visual{order:1}
}
.d-stage-head{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
}
.d-stage-icon{
  width:48px;height:48px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
.d-stage-icon iconify-icon{font-size:22px;color:var(--accent)}
.d-stage-titles{min-width:0}
.d-stage-num{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--accent);
  line-height:1;margin-bottom:4px;
}
.d-stage-titles h3{
  font-size:clamp(22px,2.4vw,30px);font-weight:900;color:#fff;
  letter-spacing:-.03em;line-height:1.2;margin:0;
}
.d-stage-copy p{
  font-size:15px;line-height:1.7;color:rgba(255,255,255,.66);margin:0 0 16px;
}
.d-stage-specs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.d-stage-specs li{
  font-size:11.5px;font-weight:700;color:var(--accent);
  padding:4px 9px;border-radius:999px;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}

/* window mock — 01/02/03 동일 박스 (1600×1000 = 16/10), v236: 가로·세로 20% 축소 */
.d-stage-visual{display:flex;justify-content:center;align-items:center;width:100%}
.d-win{
  margin:0 auto;width:80%;max-width:80%;border-radius:18px;overflow:hidden;
  background:#0b1020;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 28px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(129,140,248,.08);
}
.d-win-bar{
  display:flex;align-items:center;gap:7px;
  padding:10px 14px;
  background:rgba(255,255,255,.035);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.d-dot{width:9px;height:9px;border-radius:50%}
.d-dot--r{background:#ff5f56}
.d-dot--y{background:#ffbd2e}
.d-dot--g{background:#27c93f}
.d-win-url{
  margin-left:8px;font-size:11.5px;font-family:ui-monospace,Menlo,monospace;
  color:rgba(255,255,255,.38);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.d-win-shot{position:relative}
.d-win-shot img{display:block;width:100%;height:auto;object-fit:cover;object-position:top center;aspect-ratio:16/10}
.d-win-overlay{
  position:absolute;left:12px;bottom:12px;display:flex;gap:6px;margin:0;
}
.d-win-overlay span{
  font-size:11px;font-weight:800;color:#fff;
  padding:4px 8px;border-radius:999px;
  background:rgba(8,10,20,.62);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
}

/* phone / sheets mocks — 235에서 미사용, 백업 마크업용으로 유지 */
.d-phone{
  position:relative;width:min(230px,68vw);
  border-radius:32px;overflow:hidden;
  background:#0a0d16;
  border:2px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
}
.d-phone-notch{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:72px;height:14px;border-radius:999px;background:#05070e;z-index:2;
}
.d-phone img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.d-phone-meta{
  position:absolute;left:10px;right:10px;bottom:12px;
  display:flex;flex-wrap:wrap;gap:6px;
}
.d-phone-ch{
  font-size:10.5px;font-weight:800;color:#dbeafe;
  padding:4px 8px;border-radius:999px;
  background:rgba(8,12,24,.7);border:1px solid rgba(96,165,250,.35);
}

/* stacked sheets */
.d-sheets{position:relative;width:min(280px,78vw);height:340px;margin:0 auto}
.d-sheet{
  position:absolute;inset:18px 28px 28px 18px;
  border-radius:16px;overflow:hidden;
  background:#111827;border:1px solid rgba(255,255,255,.1);
}
.d-sheet--back{transform:translate(22px,-16px) rotate(6deg);opacity:.38}
.d-sheet--mid{transform:translate(11px,-8px) rotate(3deg);opacity:.62}
.d-sheet--front{inset:18px 28px 52px 18px;transform:none;box-shadow:0 22px 48px rgba(0,0,0,.45)}
.d-sheet--front img{display:block;width:100%;height:100%;object-fit:cover}
.d-sheet-badge{
  position:absolute;top:10px;right:10px;
  font-size:11px;font-weight:800;color:#fde68a;
  padding:4px 8px;border-radius:999px;
  background:rgba(8,10,16,.7);border:1px solid rgba(251,191,36,.35);
}
.d-sheet-dots{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:0;
  list-style:none;display:flex;justify-content:center;gap:5px;
}
.d-sheet-dots li{
  font-size:10px;font-weight:800;color:#fbbf24;
  width:26px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.22);
}

/* ── operations mosaic ── */
.d-ops{margin-top:8px}
.d-ops-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:10px 24px;margin-bottom:20px;
}
.d-ops-kicker{
  display:block;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#f9a8d4;margin-bottom:6px;
}
.d-ops-title{font-size:22px;font-weight:900;color:#fff;letter-spacing:-.03em;margin:0}
.d-ops-note{font-size:13px;color:rgba(255,255,255,.45);margin:0;max-width:320px}

.d-mosaic{
  display:grid;grid-template-columns:1fr;gap:12px;
}
@media (min-width:720px){
  .d-mosaic{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(150px,auto)}
  .d-tile--chat{grid-column:span 4}
  .d-tile--review{grid-column:span 2}
  .d-tile--price{grid-column:span 2}
  .d-tile--blog{grid-column:span 2}
  .d-tile--print{grid-column:span 2}
  .d-tile--promo{grid-column:span 2}
}
@media (min-width:1100px){
  .d-tile--chat{grid-column:span 3;grid-row:span 2}
  .d-tile--review{grid-column:span 3}
  .d-tile--price{grid-column:span 3}
  .d-tile--blog,.d-tile--print,.d-tile--promo{grid-column:span 2}
}
.d-tile{
  position:relative;padding:18px 18px 16px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.d-tile::before{
  content:'';position:absolute;inset:auto -20% -40% 40%;height:140px;
  background:radial-gradient(circle,rgba(196,181,253,.12),transparent 70%);
  pointer-events:none;
}
.d-tile--chat{background:linear-gradient(160deg,rgba(99,102,241,.18),rgba(15,23,42,.55) 58%);border-color:rgba(129,140,248,.28)}
.d-tile--review{background:linear-gradient(160deg,rgba(251,191,36,.16),rgba(30,20,4,.5) 58%);border-color:rgba(251,191,36,.26)}
.d-tile--price{background:linear-gradient(160deg,rgba(52,211,153,.16),rgba(4,24,16,.5) 58%);border-color:rgba(52,211,153,.26)}
.d-tile--blog{background:linear-gradient(160deg,rgba(56,189,248,.16),rgba(8,20,36,.5) 58%);border-color:rgba(56,189,248,.26)}
.d-tile--print{background:linear-gradient(160deg,rgba(251,146,60,.16),rgba(36,16,4,.5) 58%);border-color:rgba(251,146,60,.26)}
.d-tile--promo{background:linear-gradient(160deg,rgba(244,114,182,.16),rgba(36,8,24,.5) 58%);border-color:rgba(244,114,182,.26)}
.d-tile--chat .d-tile-titles h4{color:#c7d2fe}
.d-tile--review .d-tile-titles h4{color:#fde68a}
.d-tile--price .d-tile-titles h4{color:#6ee7b7}
.d-tile--blog .d-tile-titles h4{color:#7dd3fc}
.d-tile--print .d-tile-titles h4{color:#fdba74}
.d-tile--promo .d-tile-titles h4{color:#f9a8d4}
.d-tile--chat .d-tile-icon{background:rgba(99,102,241,.22);border-color:rgba(129,140,248,.38)}
.d-tile--chat .d-tile-icon iconify-icon{color:#c7d2fe}
.d-tile--review .d-tile-icon{background:rgba(251,191,36,.18);border-color:rgba(251,191,36,.36)}
.d-tile--review .d-tile-icon iconify-icon{color:#fde68a}
.d-tile--price .d-tile-icon{background:rgba(52,211,153,.18);border-color:rgba(52,211,153,.36)}
.d-tile--price .d-tile-icon iconify-icon{color:#6ee7b7}
.d-tile--blog .d-tile-icon{background:rgba(56,189,248,.18);border-color:rgba(56,189,248,.36)}
.d-tile--blog .d-tile-icon iconify-icon{color:#7dd3fc}
.d-tile--print .d-tile-icon{background:rgba(251,146,60,.18);border-color:rgba(251,146,60,.36)}
.d-tile--print .d-tile-icon iconify-icon{color:#fdba74}
.d-tile--promo .d-tile-icon{background:rgba(244,114,182,.18);border-color:rgba(244,114,182,.36)}
.d-tile--promo .d-tile-icon iconify-icon{color:#f9a8d4}
.d-tile-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;position:relative}
.d-tile-icon{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(129,140,248,.14);border:1px solid rgba(129,140,248,.26);
}
.d-tile-icon iconify-icon{font-size:18px;color:#c4b5fd}
.d-tile-titles{min-width:0;display:flex;flex-direction:column;gap:2px}
.d-tile-titles h4{
  font-size:16.5px;font-weight:800;color:#fff;letter-spacing:-.02em;
  margin:0;line-height:1.25;
}
.d-tile-tag{
  font-size:10.5px;font-weight:800;letter-spacing:.04em;color:rgba(255,255,255,.48);
}
.d-tile-shot{
  position:relative;margin:0;border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.25);
}
.d-tile-shot img{display:block;width:100%;height:148px;object-fit:cover}
.d-tile p{
  position:relative;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.6);margin:0 0 12px;
}

.d-chat{display:flex;flex-direction:column;gap:8px;position:relative}
.d-chat-in,.d-chat-out{
  max-width:92%;font-size:12.5px;line-height:1.5;padding:8px 11px;border-radius:14px;
}
.d-chat-in{
  align-self:flex-start;color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  border-bottom-left-radius:4px;
}
.d-chat-out{
  align-self:flex-end;color:#e0e7ff;
  background:rgba(99,102,241,.28);border:1px solid rgba(129,140,248,.32);
  border-bottom-right-radius:4px;
}
.d-bars{display:flex;flex-direction:column;gap:8px;position:relative}
.d-bar span{display:block;font-size:11px;font-weight:700;color:rgba(255,255,255,.55);margin-bottom:4px}
.d-bar i{
  display:block;height:6px;border-radius:999px;
  background:linear-gradient(90deg,#34d399,#6ee7b7);
  box-shadow:0 0 12px rgba(52,211,153,.35);
}
.d-bar--warn i{background:linear-gradient(90deg,#fbbf24,#f59e0b);box-shadow:0 0 12px rgba(251,191,36,.3)}
.d-spark{position:relative;margin-top:4px}
.d-spark svg{display:block;width:100%;height:40px}
.d-spark path{fill:none;stroke:#34d399;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.d-spark em{
  position:absolute;right:0;top:-2px;font-style:normal;
  font-size:12px;font-weight:800;color:#6ee7b7;
}

@media (max-width:639px){
  .d-stages{gap:36px;margin-bottom:44px}
  .d-win{border-radius:14px}
  .d-phone{width:min(210px,72vw)}
  .d-sheets{height:300px}
}