/* ═══════════════ 랜딩 전용 — header · hero · banks · features · security · pricing · cta · footer ═══════════════ */

/* 공용 키프레임 */
@keyframes bar-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 공용: 목업 조각 */
.mock-tx-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #F1F5F9; font-size: 14px; }
.mock-tx-row:last-child { border-bottom: none; }
.mock-tx-row > div { min-width: 0; }
.mock-tx-row .t { font-weight: 600; word-break: keep-all; }
.mock-tx-row .s { font-size: 12px; color: #94A3B8; margin-top: 2px; word-break: keep-all; }
.mock-tx-row .plus { color: #059669; font-weight: 700; white-space: nowrap; flex: none; }
.mock-tx-row .minus { color: #E11D48; font-weight: 700; white-space: nowrap; flex: none; }
.mock-verify-field { background: #F8FAFC; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 16px; font-size: 14.5px; font-weight: 600; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.mock-verify-ok { background: #ECFDF5; border: 1.5px solid #A7F3D0; color: #059669; border-radius: 10px; padding: 12px 16px; font-size: 14.5px; font-weight: 700; }
.mock-hook-json { font-family: Consolas, 'SFMono-Regular', monospace; font-size: 12.5px; line-height: 1.8; color: #E2E8F0; background: var(--dark); border-radius: 10px; padding: 16px 18px; }
.mock-hook-json .k { color: #93C5FD; } .mock-hook-json .v { color: #6EE7A0; } .mock-hook-json .n { color: #FDBA74; }

/* ══════════════════════════════════════════
   ⓪ HEADER — 클린 스티키 바
══════════════════════════════════════════ */
.header {
    position: sticky; top: 0; z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.header-wrap {
    max-width: 1180px; margin: 0 auto; padding: 0 32px;
    height: 66px; display: flex; align-items: center; gap: 44px;
    position: relative;
}
.header-logo {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 18px; font-weight: 800; letter-spacing: -0.5px;
    color: var(--ink); text-decoration: none;
}
.header-logo .bx {
    width: 64px; height: 64px; object-fit: contain; flex-shrink: 0;
}
.header-nav {
    display: flex; gap: 32px;
    position: absolute; left: 50%; transform: translateX(-50%);
}
.header-nav a {
    color: #475569; text-decoration: none; font-size: 15px; font-weight: 600;
    transition: color 0.15s;
}
.header-nav a:hover { color: var(--ink); }
.header-nav a.on { color: var(--ink); font-weight: 700; } /* 현재 페이지 활성 표시 (서브퍼블 Phase 6) */
.header-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.header-login { color: #475569; text-decoration: none; font-size: 15px; font-weight: 600; }
.header-login:hover { color: var(--ink); }
.header-cta {
    background: var(--ink); color: #fff; text-decoration: none;
    font-size: 14.5px; font-weight: 700; padding: 11px 22px; border-radius: 11px;
    transition: background 0.2s;
}
.header-cta:hover { background: var(--accent); }

/* 로그인 상태 — 사용자 칩 + 호버 드롭다운 */
.header-user { position: relative; display: flex; align-items: center; }
.header-user-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
    padding: 5px 14px 5px 6px; cursor: pointer; font: inherit;
    font-size: 14px; font-weight: 700; color: var(--ink);
    transition: border-color 0.15s, background 0.15s;
}
.header-user-btn:hover { border-color: #CBD5E1; background: #F8FAFC; }
.header-user-avatar {
    width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff;
    font-size: 12.5px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}
.header-user-menu {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 190px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow-lift); padding: 6px; z-index: 200;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.header-user:hover .header-user-menu,
.header-user.open .header-user-menu { opacity: 1; visibility: visible; transform: none; }
/* 칩과 메뉴 사이 8px 틈에서 호버가 끊기지 않게 하는 브리지 */
.header-user-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.header-user-menu a {
    display: block; padding: 9px 12px; font-size: 14px; font-weight: 600;
    color: #334155; text-decoration: none; border-radius: 9px; transition: background 0.15s;
}
.header-user-menu a:hover { background: #F8FAFC; color: var(--ink); }
.header-user-menu hr { border: none; border-top: 1px solid #F1F5F9; margin: 5px 4px; }
.header-user-menu .out { color: var(--danger); }
.header-user-menu .hl { color: var(--accent-deep); font-weight: 700; }

/* 모바일 햄버거 (≤768px에서만 표시) */
.header-burger {
    display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 40px; height: 40px; border: none; background: none; cursor: pointer; border-radius: 10px;
}
.header-burger:hover { background: #F1F5F9; }
.header-burger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.header-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header-burger.open span:nth-child(2) { opacity: 0; }
.header-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 모바일 메뉴 패널 (스티키 헤더 하단에 붙음) */
.header-mobile { display: none; border-top: 1px solid var(--line); background: #fff; padding: 8px 20px 14px; }
.header-mobile.open { display: block; animation: fadeUp 0.25s ease; }
.header-mobile a {
    display: block; padding: 13px 4px; font-size: 15.5px; font-weight: 600;
    color: #334155; text-decoration: none; border-bottom: 1px solid #F1F5F9;
}
.header-mobile a:last-child { border-bottom: none; }
.header-mobile a:active { color: var(--ink); }
.header-mobile .out { color: var(--danger); }
.header-mobile .hl { color: var(--accent-deep); font-weight: 700; }
.header-mobile hr { border: none; border-top: 1.5px solid var(--line); margin: 8px 0; }

/* ══════════════════════════════════════════
   ① HERO — 벤토 그리드
══════════════════════════════════════════ */
.hero { background: #fff; }
.hero-wrap { max-width: 1180px; margin: 0 auto; padding: 72px 32px 90px; width: 100%; }

/* ── 히어로 본체 — 좌: 카피 / 우: 제품 화면 (시안 hero-b-4ways #1) ──
   카드(.tile) 없이 섹션 폭을 그대로 쓴다. 배경이 흰색이라 판때기가 없어도
   제품 미리보기(.hero-browser)의 테두리+그림자만으로 층이 구분된다 */
.hero-b {
    display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px;
    align-items: center;
}
.hero-b-copy { min-width: 0; }

/* 아이브로우 — 기존 '라이브' 펄스의 생동감을 유지하되 시안의 그린 필 형태로 */
.hero-b-eye {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 700; color: var(--accent-deep);
    background: var(--accent-soft); padding: 7px 13px; border-radius: 999px;
    margin-bottom: 18px;
}
.hero-b-eye .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
    animation: hero-eye-pulse 1.6s ease-in-out infinite;
}
@keyframes hero-eye-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.hero-b-title {
    font-size: clamp(30px, 3.4vw, 44px); line-height: 1.18; letter-spacing: -1.4px;
    font-weight: 800; margin: 0 0 18px; word-break: keep-all;
}
.hero-b-title em { font-style: normal; color: var(--accent); }
.hero-b-sub {
    font-size: 16.5px; line-height: 1.68; color: var(--muted);
    margin: 0 0 26px; max-width: 460px; word-break: keep-all;
}
.hero-b-cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hero-b-fine { font-size: 13px; color: var(--muted); margin: 16px 0 0; font-weight: 500; }
.hero-b-fine b { color: var(--ink); font-weight: 700; }

/* CTA — 시안대로 알약형. .hero-cta/.hero-cta-ghost 는 랜딩 히어로 전용 클래스 */
.hero-cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ink); color: #fff; text-decoration: none;
    font-size: 15px; font-weight: 700; padding: 13px 24px; border-radius: 999px;
    border: 1.5px solid var(--ink);
    transition: background 0.2s, border-color 0.2s;
}
.hero-cta:hover { background: var(--accent); border-color: var(--accent); }
.hero-cta-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--ink); text-decoration: none;
    font-size: 15px; font-weight: 700; padding: 13px 22px; border-radius: 999px;
    border: 1.5px solid var(--ink); transition: border-color 0.2s, color 0.2s;
}
.hero-cta-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* 지표 스트립 — 요금 문구 바로 아래. 카피 단이 좁아 기존 타일판보다 작게 */
.hero-metrics {
    margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line);
    display: grid; grid-template-columns: repeat(4, 1fr);
}
.hero-metrics .m { padding-left: 18px; border-left: 1px solid var(--line); }
.hero-metrics .m:first-child { padding-left: 0; border-left: none; }
.hero-metrics .num { font-size: 26px; font-weight: 800; letter-spacing: -0.9px; }
.hero-metrics .lbl { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 5px; }

/* ── 제품 화면 미리보기 (시안 hero-mockups MOCKUP B) ── */
.hero-b-visual { min-width: 0; }
.hero-mock-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.hero-mock-head .label {
    font-family: Consolas, ui-monospace, monospace;
    font-size: 11.5px; font-weight: 700; letter-spacing: 2px; color: var(--ink);
}
/* '예시 화면' 라벨 — 고객사 서비스 예시임을 밝히는 장치 (MOCKUP B의 필수 조건) */
.hero-mock-head .ok { font-size: 11.5px; font-weight: 700; color: var(--accent); }

.hero-browser {
    border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff;
    box-shadow: 0 24px 48px -28px rgba(15, 23, 42, 0.35);
}
.hero-browser-bar {
    display: flex; align-items: center; gap: 6px;
    background: #F8FAFC; border-bottom: 1px solid var(--line); padding: 10px 14px;
}
.hero-browser-bar .b-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: none; }
.hero-browser-url {
    margin-left: 10px; flex: 1; min-width: 0;
    background: #fff; border: 1px solid var(--line); border-radius: 6px;
    font-family: Consolas, ui-monospace, monospace; font-size: 11px; color: var(--muted);
    padding: 4px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-dash { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

.hero-balance {
    background: var(--ink); border-radius: 12px; color: #fff; padding: 18px 20px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.hero-balance .bal-label { font-size: 12px; color: #94A3B8; }
.hero-balance .bal { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.hero-balance-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; text-align: right; }
.hero-balance .bal-diff {
    font-family: Consolas, ui-monospace, monospace; font-size: 12px; font-weight: 700;
    color: #34D399; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.hero-balance .bank-chips { display: flex; gap: 6px; }
.hero-balance .bank-chip {
    font-size: 11px; font-weight: 700; border-radius: 20px; padding: 3px 10px; color: #E2E8F0;
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-tx { display: flex; flex-direction: column; gap: 8px; }
.hero-tx-row {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 13.5px;
}
.hero-tx-row > div { min-width: 0; }
.hero-tx-row .tx-ico {
    width: 30px; height: 30px; border-radius: 8px; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: #fff;
}
/* 은행 브랜드 색 — 시안 공통값 */
.hero-tx-row .c-shinhan { background: #0046FF; }
.hero-tx-row .c-kb { background: #FFBC00; color: #3B2F00; }
.hero-tx-row .c-hana { background: #008485; }
.hero-tx-row .t-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-tx-row .t-meta { font-size: 11.5px; color: var(--muted); font-family: Consolas, ui-monospace, monospace; }
.hero-tx-row .t-amt {
    margin-left: auto; font-weight: 800; font-size: 13px;
    font-family: Consolas, ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hero-tx-row .amt-plus { color: var(--accent); }
.hero-tx-row .amt-minus { color: var(--danger); }

.banks { background: var(--bg); }
.banks-wrap { max-width: 1140px; margin: 0 auto; padding: 100px 32px; width: 100%; }
.banks-title { font-size: clamp(28px, 5.2vw, 56px); font-weight: 800; letter-spacing: -1.6px; line-height: 1.16; margin-bottom: 16px; word-break: keep-all; }
.banks-title .count { color: var(--accent); }
.banks-sub { font-size: 16.5px; color: var(--muted); margin-bottom: 44px; word-break: keep-all; }
.banks-row-label {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted);
    margin-bottom: 16px;
}
.banks-row-label .tag {
    background: var(--accent-soft); color: var(--accent-deep);
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px;
    padding: 4px 11px; border-radius: 999px;
}
.banks-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 44px; }
.banks-card {
    background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg);
    padding: 22px 18px; text-align: center;
    transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s; cursor: default;
}
.banks-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; }
.banks-card .logo { height: 30px; width: auto; max-width: 110px; display: block; margin: 0 auto 14px; object-fit: contain; }
.banks-card .name { font-size: 15.5px; font-weight: 700; letter-spacing: -0.4px; }
/* 1금융권 카드 마키 — 카드를 플렉스 아이템으로 흐르게(고정 폭). 호버 시 일시정지 */
.banks-marquee--cards { margin-bottom: 44px; padding: 8px 0; }
.banks-marquee--cards .banks-card { flex: none; width: 158px; margin-right: 14px; }
.banks-marquee--cards:hover .banks-marquee-track { animation-play-state: paused; }
/* 2금융권 — 왼쪽으로 흐르는 마키 */
.banks-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.banks-marquee-track { display: flex; width: max-content; animation: banks-scroll 30s linear infinite; }
.banks-marquee-set { display: flex; }
.banks-chip {
    display: inline-flex; align-items: center; white-space: nowrap;
    border: 1.5px dashed #CBD5E1; color: var(--muted); background: #fff;
    border-radius: 999px; padding: 10px 22px 10px 12px; margin-right: 12px;
    font-size: 14.5px; font-weight: 600;
}
/* 아이콘 자리 — 로고 확보 시 background-image 또는 <img>로 교체 */
.banks-chip .ico {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    background: #FFF; margin-right: 9px;
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
/* contain: 가로 워드마크(새마을금고·SBI·OK)가 원형에서 잘리지 않도록 */
.banks-chip .ico img { width: 84%; height: 84%; object-fit: contain; }
@keyframes banks-scroll { to { transform: translateX(-50%); } }
/* 모바일(≤768px) 2줄 마키 — 데스크톱 1줄 트랙과 마크업을 분리해 전환 */
.banks-marquee-stack { display: none; }
.banks-marquee-track--rev { animation-direction: reverse; }

/* ══════════════════════════════════════════
   ③ FEATURES — 소프트 아코디언 × 자동 진행바
══════════════════════════════════════════ */
.features { background: #fff; }
.features-wrap {
    max-width: 1140px; margin: 0 auto; padding: 110px 32px; width: 100%;
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center;
}
.feat-title { font-size: clamp(28px, 5.2vw, 56px); font-weight: 800; letter-spacing: -1.6px; line-height: 1.16; margin-bottom: 34px; word-break: keep-all; }
.feat-title mark { background: none; color: var(--accent); }
.feat-item {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 12px;
    box-shadow: var(--shadow-rest); overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.feat-item.active { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.feat-btn {
    width: 100%; background: none; border: none; cursor: pointer; text-align: left;
    display: flex; align-items: center; gap: 14px; padding: 18px 22px; font-family: inherit;
}
.feat-btn .no {
    font-family: Consolas, monospace; font-size: 12.5px; font-weight: 700;
    background: #F1F5F9; color: var(--muted); padding: 4px 10px; border-radius: 7px;
    transition: background 0.2s, color 0.2s;
}
.feat-item.active .feat-btn .no { background: var(--accent); color: #fff; }
.feat-btn .head { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; }
.feat-desc { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.feat-item.active .feat-desc { max-height: 90px; }
.feat-desc p { font-size: 14.5px; color: var(--muted); line-height: 1.65; padding: 0 22px 18px 66px; word-break: keep-all; }
.feat-bar { height: 0; background: #F1F5F9; position: relative; overflow: hidden; }
.feat-item.active .feat-bar { height: 4px; }
.feat-item.active .feat-bar::after {
    content: ""; position: absolute; inset: 0; background: var(--accent);
    transform-origin: left; animation: bar-progress 6s linear forwards;
}
.feat-stage {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-rest);
    padding: 30px 32px; min-height: 420px; display: flex; flex-direction: column; justify-content: center;
}
.feat-stage-head {
    display: flex; justify-content: space-between; align-items: center;
    font-family: Consolas, monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
    color: var(--muted); border-bottom: 1px solid var(--line);
    padding-bottom: 16px; margin-bottom: 24px;
}
.feat-stage-head .ok { color: var(--ok); }
.feat-card { background: #F8FAFC; border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; }
/* B2B 대량 조회 목업 — 스테이지 크기에 맞게 확대 */
.feat-card-lg { min-height: 280px; display: flex; flex-direction: column; justify-content: center; padding: 32px 28px; }
.feat-card-lg .mock-verify-field { padding: 20px 22px; font-size: 17px; margin-bottom: 14px; border-radius: 12px; }
.feat-card-lg .mock-verify-ok { padding: 20px 22px; font-size: 17px; border-radius: 12px; }
.feat-card-lg .mock-tx-row { padding: 17px 0; font-size: 17px; }
.feat-card-lg .mock-tx-row .s { font-size: 14px; margin-top: 4px; }
.feat-card-lg .mock-hook-json { font-size: 16px; line-height: 2; }
.feat-panel { display: none; }
.feat-panel.show { display: block; animation: fadeUp 0.3s ease; }

/* ══════════════════════════════════════════
   ④ SECURITY — 보안 사양서 (다크 네이비)
══════════════════════════════════════════ */
.security { background: var(--dark); color: #fff; }
.security-wrap { max-width: 880px; margin: 0 auto; padding: 110px 32px; width: 100%; }
.security-head { text-align: center; margin-bottom: 44px; }
.security-head .label { color: #6EE7B7; font-size: 13px; font-weight: 700; letter-spacing: 4px; margin-bottom: 16px; }
.security-head h2 { font-size: clamp(28px, 5.2vw, 56px); font-weight: 800; letter-spacing: -1.6px; word-break: keep-all; line-height: 1.2; }
.security-doc {
    background: #fff; color: var(--ink); border-radius: 0;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    padding: 44px 48px; position: relative;
}
.security-doc-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid var(--ink); padding-bottom: 16px; margin-bottom: 8px; }
.security-doc-head .t { font-size: 19px; font-weight: 800; letter-spacing: -0.5px; }
.security-doc-head .v { font-family: Consolas, monospace; font-size: 12px; color: var(--muted); }
.security-row { display: grid; grid-template-columns: 150px 1fr 130px; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: start; }
.security-row .item { font-size: 15.5px; font-weight: 800; }
.security-row .impl { font-size: 14px; color: #475569; line-height: 1.7; word-break: keep-all; }
.security-row .impl b { color: var(--ink); }
.security-row .spec { font-family: Consolas, "Pretendard Variable", Pretendard, monospace; font-size: 12px; font-weight: 700; text-align: right; }
.security-row .spec span { background: var(--accent-soft); color: var(--ink); padding: 5px 11px; border-radius: 0; display: inline-block; }
.security-seal { position: absolute; right: 36px; bottom: 24px; width: 84px; height: 84px; }
.security-seal circle { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 245; stroke-dashoffset: 245; }
.security-seal.play circle { animation: seal-draw 1.2s ease forwards 0.2s; }
.security-seal path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.security-seal.play path { animation: seal-draw 0.5s ease forwards 1.3s; }
.security-seal text { font-size: 9px; font-weight: 800; letter-spacing: 1.6px; fill: var(--ink); opacity: 0; }
.security-seal.play text { animation: seal-fade 0.5s ease forwards 1.5s; }
@keyframes seal-fade { to { opacity: 1; } }
@keyframes seal-draw { to { stroke-dashoffset: 0; } }
.security-foot { text-align: center; margin-top: 26px; font-size: 13.5px; color: #94A3B8; }

/* ══════════════════════════════════════════
   ⑤ PRICING — 플랜 카드
══════════════════════════════════════════ */
.pricing { background: var(--bg); }
.pricing-wrap { max-width: 1000px; margin: 0 auto; padding: 110px 32px; width: 100%; }
.pricing-head { text-align: center; margin-bottom: 56px; }
.pricing-title { font-size: clamp(28px, 5.2vw, 56px); font-weight: 800; letter-spacing: -1.6px; line-height: 1.16; word-break: keep-all; }
.pricing-title mark { background: none; color: var(--accent); }
.pricing-sub { font-size: 16px; color: var(--muted); margin-top: 14px; word-break: keep-all; }
.pricing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.pricing-card {
    background: #fff; border: 1.5px solid var(--line); border-radius: 0;
    padding: 38px 36px; position: relative; display: flex; flex-direction: column;
    transition: transform 0.22s, box-shadow 0.22s;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.pricing-card.hl { border: 2px solid var(--accent); box-shadow: 0 14px 40px rgba(5,150,105,0.16); }
.pricing-card:not(.hl) { border-color: #94A3B8; }
.pricing-badge {
    position: absolute; top: -14px; left: 32px; background: var(--accent); color: #fff;
    font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 999px; letter-spacing: 0.3px; white-space: nowrap;
}
.pricing-plan { font-size: 13.5px; font-weight: 700; letter-spacing: 1.2px; margin-bottom: 16px; color: var(--muted); word-break: keep-all; }
.pricing-card.hl .pricing-plan { color: var(--accent); }
.pricing-price { font-size: 46px; font-weight: 800; letter-spacing: -2px; line-height: 1; }
.pricing-price .u { font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.pricing-price-note { font-size: 13.5px; color: var(--muted); margin: 10px 0 28px; word-break: keep-all; }
.pricing-list { list-style: none; flex: 1; margin-bottom: 32px; }
.pricing-list li { font-size: 15px; font-weight: 500; padding: 10px 0; border-bottom: 1px solid #F1F5F9; display: flex; gap: 10px; color: #334155; word-break: keep-all; }
.pricing-list li:last-child { border-bottom: none; }
.pricing-list li::before { content: "✓"; color: var(--accent); font-weight: 700; flex: none; }
.pricing-cta {
    display: block; text-align: center; text-decoration: none; font-size: 15.5px; font-weight: 700;
    padding: 16px; border-radius: var(--r-md); transition: all 0.2s; word-break: keep-all;
}
.pricing-card.hl .pricing-cta { background: var(--accent); color: #fff; }
.pricing-card.hl .pricing-cta:hover { background: var(--accent-deep); }
.pricing-card:not(.hl) .pricing-cta { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.pricing-card:not(.hl) .pricing-cta:hover { border-color: var(--accent); color: var(--accent); }

/* ══════════════════════════════════════════
   ⑥ CTA — 3단계 스텝
══════════════════════════════════════════ */
.cta { background: #fff; }
.cta-wrap { max-width: 760px; margin: 0 auto; padding: 120px 32px; width: 100%; text-align: center; }
.cta-title { font-size: clamp(28px, 5.2vw, 56px); font-weight: 800; letter-spacing: -1.6px; line-height: 1.16; margin-bottom: 16px; word-break: keep-all; }
.cta-title mark { background: none; color: var(--accent); }
.cta-sub { font-size: 16.5px; color: var(--muted); margin-bottom: 44px; word-break: keep-all; }
.cta-steps {
    display: flex; align-items: stretch; justify-content: center; gap: 0;
    background: var(--dark); border-radius: var(--r-lg);
    box-shadow: 0 20px 50px rgba(15,23,42,0.25);
    padding: 30px 34px; max-width: 620px; margin: 0 auto 40px;
}
.cta-step { flex: 1; text-align: center; }
.cta-step .n { font-family: Consolas, monospace; font-size: 15.5px; font-weight: 700; color: #6EE7B7; display: block; margin-bottom: 8px; letter-spacing: 1px; }
.cta-step .l { font-size: 20.5px; font-weight: 700; color: #fff; display: block; margin-bottom: 4px; }
.cta-step .t { font-size: 16.5px; font-weight: 600; color: #64748B; }
.cta-arr { display: flex; align-items: center; color: #475569; font-size: 18px; font-weight: 700; padding: 0 14px; }
.cta-btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--ink); color: #fff; text-decoration: none; font-size: 16.5px; font-weight: 700;
    padding: 18px 36px; border-radius: var(--r-md); transition: background 0.2s;
}
.cta-btn:hover { background: var(--accent); }
.cta-btn-ghost {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff; color: var(--ink); text-decoration: none; font-size: 16.5px; font-weight: 700;
    padding: 18px 30px; border-radius: var(--r-md); border: 1.5px solid var(--line);
    transition: border-color 0.2s, color 0.2s;
}
.cta-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.cta-note { font-size: 16.5px; font-weight: 700; color: var(--accent); margin-top: 22px; }

/* ══════════════════════════════════════════
   ⑦ FOOTER — 다크 · 좌측 정렬 나열
══════════════════════════════════════════ */
.footer { background: var(--dark); color: #94A3B8; }
.ft-top {
    max-width: 1180px; margin: 0 auto; width: 100%;
    padding: 64px 32px 60px;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px;
}
.ft-brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 17px; font-weight: 800; letter-spacing: -0.4px; margin-bottom: 26px;
    color: #fff;
}
.ft-brand .bx {
    width: 44px; height: 44px; object-fit: contain; flex-shrink: 0;
}
.ft-desc { font-size: 15px; color: #CBD5E1; line-height: 1.75; margin-bottom: 28px; word-break: keep-all; }
.ft-biz { font-size: 13px; color: #64748B; }
.ft-biz p { margin: 0 0 10px; }
.ft-biz p:last-child { margin-bottom: 0; }
.ft-biz .hl { color: #6EE7B7; font-weight: 600; }
.ft-col h4 {
    font-size: 14.5px; font-weight: 700; letter-spacing: -0.2px;
    color: #E2E8F0; margin-bottom: 22px;
}
.ft-col a {
    display: block; color: #94A3B8; text-decoration: none;
    font-size: 14.5px; font-weight: 500; padding: 8px 0;
    transition: color 0.15s;
}
.ft-col a:hover { color: #fff; }
.ft-bottom { border-top: 1px solid rgba(148,163,184,0.16); }
.ft-bottom-wrap {
    max-width: 1180px; margin: 0 auto; padding: 24px 32px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    font-size: 13px; color: #64748B;
}

/* ═══════════════ 반응형 ═══════════════ */
@media (max-width: 1024px) {
    /* 히어로: 카피 460px + 브라우저가 한 줄에 안 들어감 → 세로 스택 */
    .hero-b { grid-template-columns: 1fr; gap: 40px; }
    .hero-b-sub { max-width: none; }
    /* 네비 절대중앙 → 일반 플로우 중앙: 태블릿 폭에서 로그인 우측 메뉴와 겹침 방지 */
    .header-nav { position: static; transform: none; margin: 0 auto; gap: 22px; }
    .header-wrap { gap: 24px; }
    .banks-grid { grid-template-columns: repeat(3, 1fr); }
    .features-wrap { grid-template-columns: 1fr; gap: 44px; }
    /* 요금제: 태블릿(641~1024px)은 2열 그리드 유지 — 두 카드가 다 들어가므로
       캐러셀(왼쪽 정렬 + 우측 빈 공간)이 아니라 컨테이너를 채우는 정렬이 맞다.
       캐러셀은 폰 폭(≤640px)에서만. */
    .security-row { grid-template-columns: 120px 1fr; }
    .security-row .spec { text-align: left; grid-column: 2; }
}
@media (max-width: 800px) {
    .header-nav, .header-login, .header-user { display: none; }
    /* 모바일 헤더: 로고 텍스트('뱅크레일') 숨기고 아이콘만 노출 */
    .header-logo .logo-text { display: none; }
    /* CTA 버튼은 모바일에서 숨김 — 무료 시작/대시보드 모두 햄버거 메뉴 항목과 중복 */
    .header-cta { display: none; }
    .header-burger { display: inline-flex; }
    .header-wrap { height: 60px; padding: 0 20px; gap: 14px; }
    .header-right { gap: 10px; }
    /* 2금융권 마키: 1줄 → 2줄 */
    .banks-marquee--single { display: none; }
    .banks-marquee-stack { display: flex; flex-direction: column; gap: 12px; }
    .banks-marquee-stack .banks-marquee-track { animation-duration: 22s; }
    /* 푸터: 3열 → 1열 (태블릿 폭까지는 3열 유지) */
    .ft-top { grid-template-columns: 1fr; gap: 40px; }
}
@media (min-width: 801px) {
    .header-mobile { display: none !important; }
}
@media (max-width: 640px) {
    /* 요금제 — 폰 폭에서만 가로 스와이프 캐러셀 (카드가 실제로 넘치는 구간) */
    .pricing-cards {
        display: flex; gap: 16px;
        overflow-x: auto; scroll-snap-type: x mandatory;
        padding: 20px 4px 8px; margin: 0 -4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .pricing-cards::-webkit-scrollbar { display: none; }
    .pricing-card { flex: 0 0 min(85%, 380px); scroll-snap-align: center; }
    /* 피처 설명: 좁은 폭에서 줄 수가 늘어 max-height:90px에 걸려 잘리던 문제 — 여유 확대 + 좌측 패딩 축소 */
    .feat-desc p { padding: 0 18px 18px 22px; }
    .feat-item.active .feat-desc { max-height: 240px; }
    /* 스테이지/목업 카드가 폰 폭에서 눌려 텍스트가 잘리던 문제 — 패딩 축소로 여유 확보 */
    .feat-stage { padding: 20px 16px; min-height: 0; }
    .feat-card-lg { padding: 22px 18px; min-height: 0; }
    .feat-card-lg .mock-tx-row { font-size: 15px; }
    .hero-b { gap: 32px; }
    /* 카드 패딩(24px)이 사라진 만큼 래퍼 좌우 여백을 좁혀 폰에서 답답해지지 않게 */
    .hero-wrap { padding: 52px 24px 66px; }
    .hero-metrics { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
    .hero-metrics .m:nth-child(odd) { padding-left: 0; border-left: none; }
    .hero-metrics .num { font-size: 23px; }
    .hero-dash { padding: 14px; gap: 12px; }
    .hero-balance { flex-direction: column; align-items: flex-start; gap: 12px; }
    .hero-balance-side { align-items: flex-start; text-align: left; }
    .banks-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .security-doc { padding: 30px 24px; }
    .security-row { grid-template-columns: 1fr; gap: 8px; }
    .security-row .spec { grid-column: 1; }
    .security-seal { position: static; display: block; margin: 16px 0 0 auto; }
    .cta-steps { flex-direction: column; gap: 18px; }
    .cta-arr { justify-content: center; transform: rotate(90deg); padding: 0; }
    /* 모바일 전체 폰트 축소 — 헤드라인/본문/라벨을 한 단계씩 낮춰 답답함 완화 */
    .hero-b-title { font-size: 26px; letter-spacing: -1px; }
    .hero-b-sub { font-size: 14.5px; }
    .banks-sub, .pricing-sub, .cta-sub { font-size: 14.5px; }
    .banks-title, .feat-title, .pricing-title, .cta-title, .security-head h2 { letter-spacing: -1px; }
    .banks-row-label { font-size: 12px; }
    .banks-card .name { font-size: 14px; }
    .banks-card .logo { height: 26px; }
    .banks-chip { font-size: 13px; padding: 8px 18px 8px 10px; }
    .pricing-price { font-size: 38px; }
    .pricing-list li { font-size: 14px; }
    .feat-btn .head { font-size: 15px; }
    .feat-desc p { font-size: 13.5px; }
    .hero-metrics .lbl { font-size: 12px; }
}
@media (max-width: 410px) {
    /* 좁은 폰(Z 폴드 커버 등) — 사양서 제목이 문서번호에 밀려 강제 줄바꿈되는 문제:
       문서번호(SPEC-SEC-2026 · rev.01)를 제목 아래 줄로 배치 */
    .security-doc-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}