/* =====================================================
 * 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 { scroll-margin-top: 64px; }

        /* ══════════════════════════════════════════════
           통계 카드 단일 박스
           모바일(≤640): 2×2 그리드 (칸 폭 2배 확보)
           태블릿+(≥641): 가로 4열
        ══════════════════════════════════════════════ */
        .stats-unified .stats-col { min-width: 0; position: relative; }
        .stats-unified .stats-val   { font-size: 34px; letter-spacing: -0.02em; }
        .stats-unified .stats-label { font-size: 14px; }
        .stats-unified .stats-sub   { font-size: 12px; line-height: 1.35; }

        /* ── 태블릿+ (≥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-val   { font-size: 40px; }
          .stats-unified .stats-label { font-size: 15px; }
          .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: 13px !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: 12px !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);
}