/* ============================================================
   style5.css — Diling index5 · Light Tone / Premium Clean
   v=20260506-enhance
   Color policy: white(60%) + gray(25%) + black(10%) + yellow(5%)
   Namespace: --i5-* / .i5-*
   DO NOT import or inherit from style1-4
   ============================================================ */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* Light palette — i5 namespace (Tailwind-style cool tones) */
    --i5-white:        #FFFFFF;
    --i5-bg:           #F9FAFB;
    --i5-gray-50:      #F9FAFB;
    --i5-gray-100:     #F3F4F6;
    --i5-gray-300:     #D1D5DB;
    --i5-gray-500:     #6B7280;
    --i5-gray-700:     #4B5563;
    --i5-gray-900:     #111827;
    --i5-black:        #111827;
    --i5-yellow:       #f9ca21;
    --i5-yellow-soft:  #f9ca21;
    --i5-yellow-hover: #FADA5E;

    /* Layout */
    --i5-header-height: 72px;
    --i5-container:     min(1280px, calc(100% - 48px));
    --i5-section-pad:   clamp(80px, 10vw, 140px);
    --i5-radius:        12px;
    --i5-radius-sm:     8px;
    --i5-radius-lg:     16px;
}

/* ============================================================
   RESET (scoped to i5)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: "Noto Sans KR", sans-serif;
    background: var(--i5-white);
    color: var(--i5-gray-700);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
dl, dt, dd { margin: 0; }
ol, ul { list-style: none; padding: 0; }

/* Scroll margin for sticky header */
section[id] { scroll-margin-top: calc(var(--i5-header-height) + 16px); }

/* ============================================================
   CONTAINER
   ============================================================ */
.i5-container {
    width: var(--i5-container);
    margin: 0 auto;
}

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.i5-section-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--i5-gray-500);
    margin-bottom: 16px;
}

.i5-section-h2 {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 900;
    color: var(--i5-gray-900);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 40px;
}

.i5-mark {
    background: var(--i5-yellow);
    color: var(--i5-black);
    padding: 0 4px;
    border-radius: 3px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.i5-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--i5-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
    white-space: nowrap;
    text-decoration: none;
}

.i5-btn-primary {
    background: var(--i5-black);
    color: var(--i5-white);
    border-color: var(--i5-black);
}
.i5-btn-primary:hover {
    background: var(--i5-gray-900);
    border-color: var(--i5-gray-900);
    transform: translateY(-1px);
}

.i5-btn-secondary {
    background: var(--i5-white);
    color: var(--i5-black);
    border-color: var(--i5-black);
}
.i5-btn-secondary:hover {
    background: var(--i5-gray-50);
    transform: translateY(-1px);
}

/* 활성 탭 색상과 동일 */
.i5-btn-tab-active {
    background: var(--i5-black);
    color: var(--i5-white);
    border-color: var(--i5-black);
}
.i5-btn-tab-active:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* Ghost button (matching index4 nb-btn-ghost pattern) */
.i5-btn-ghost {
    background: var(--i5-gray-900);
    color: var(--i5-white);
    border-color: var(--i5-gray-900);
}
.i5-btn-ghost:hover {
    background: var(--i5-gray-900);
    color: var(--i5-white);
    transform: translateY(-1px);
}

/* Yellow CTA modifier (PPTX iter1: hero primary CTA, slide15 will reuse for form submit) */
.i5-btn-yellow {
    background: var(--i5-yellow);
    color: var(--i5-black);
    border-color: var(--i5-yellow);
}
.i5-btn-yellow:hover {
    background: var(--i5-yellow-hover);
    border-color: var(--i5-yellow-hover);
    transform: translateY(-1px);
}

.i5-btn-wide { width: 100%; }

/* ============================================================
   HEADER
   ============================================================ */
.i5-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--i5-gray-100);
    transition: box-shadow 0.3s;
}
.i5-header.is-scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.i5-header-inner {
    display: flex;
    align-items: center;
    min-height: var(--i5-header-height);
    gap: 24px;
}

.i5-brand img {
    height: 56px;
    width: auto;
}
.i5-brand {
    font-size: 20px;
    font-weight: 900;
    color: var(--i5-gray-900);
    letter-spacing: 0.05em;
    margin-right: auto;
}

.i5-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 14px;
    font-weight: 600;
    color: var(--i5-gray-700);
    margin-left: auto;
    margin-right: 16px;
}
.i5-nav a {
    transition: color 0.2s;
    position: relative;
    padding-bottom: 2px;
}
.i5-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--i5-yellow);
    transition: width 0.2s;
}
.i5-nav a:hover,
.i5-nav a.is-active {
    color: var(--i5-gray-900);
}
.i5-nav a:hover::after,
.i5-nav a.is-active::after {
    width: 100%;
}

.i5-header-cta {
    display: inline-block;
    padding: 10px 20px;
    background: var(--i5-yellow);
    color: var(--i5-black);
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--i5-radius-sm);
    transition: opacity 0.2s, transform 0.15s;
    white-space: nowrap;
}
.i5-header-cta:hover {
    background: var(--i5-yellow-hover);
    transform: translateY(-1px);
}

/* ============================================================
   SECTION 2: HERO
   ============================================================ */
.i5-hero {
    min-height: 100vh;
    background: var(--i5-white);
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.i5-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--i5-yellow);
}

.i5-hero-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
    padding: 118px 0 80px;
}

.i5-hero-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--i5-gray-500);
    margin-bottom: 24px;
}

.i5-hero-title {
    font-family: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
    font-size: clamp(64px, 9vw, 140px);
    font-weight: 900;
    color: var(--i5-gray-900);
    line-height: 0.95;
    letter-spacing: -0.04em;
    margin-bottom: 32px;
}

.i5-hero-sub {
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 500;
    color: var(--i5-gray-500);
    margin-bottom: 40px;
    line-height: 1.55;
    max-width: 560px;
}

.i5-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Hero QR decorative — 120×120 currentColor pattern (matching index4) */
.i5-hero-deco {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    color: var(--i5-gray-900);
}

.i5-qr-svg {
    width: clamp(140px, 16vw, 200px);
    height: auto;
    opacity: 0.92;
}

.i5-qr-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--i5-gray-500);
}

.i5-hero-scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--i5-gray-300);
    animation: i5-scroll-bounce 2s ease-in-out infinite;
}

@keyframes i5-scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
}

/* ============================================================
   SECTION 3: WHY TARGETING MATTERS
   ============================================================ */
.i5-why {
    background: var(--i5-gray-50);
    padding: var(--i5-section-pad) 0;
}

.i5-why-intro {
    font-size: 17px;
    color: var(--i5-gray-700);
    line-height: 1.8;
    max-width: 680px;
    margin-bottom: 60px;
}

.i5-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
}

.i5-why-card {
    background: var(--i5-white);
    border: 1px solid var(--i5-gray-100);
    border-radius: var(--i5-radius);
    padding: 40px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.i5-why-card:hover {
    box-shadow: 0 0 0 3px var(--i5-yellow);
    transform: translateY(-2px);
}

.i5-why-num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--i5-gray-300);
    display: block;
    margin-bottom: 16px;
}

.i5-why-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--i5-gray-900);
    margin-bottom: 16px;
    white-space: nowrap;
}

.i5-why-desc {
    font-size: 16px;
    color: var(--i5-gray-700);
    line-height: 1.8;
}

/* ============================================================
   SECTION 4: TARGETING SEGMENT EXAMPLE
   ============================================================ */
.i5-segment {
    background: var(--i5-white);
    padding: var(--i5-section-pad) 0;
}

.i5-segment-inner {
    display: grid;
    grid-template-columns: minmax(0, 340px) 1fr;
    gap: 32px;
    align-items: center;
}


.i5-segment-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    color: var(--i5-gray-900);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 16px 0 20px;
    white-space: nowrap;
}

.i5-condition-list--row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.i5-segment-preview-full {
    margin-top: 40px;
    width: var(--i5-container);
    margin-left: auto;
    margin-right: auto;
}

.i5-segment-img-full {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--i5-radius);
}

.i5-segment-sub {
    font-size: 15px;
    color: var(--i5-gray-500);
    margin-bottom: 32px;
}

.i5-condition-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.i5-condition-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--i5-gray-700);
    padding: 12px 16px;
    background: var(--i5-gray-50);
    border-radius: var(--i5-radius-sm);
    border: 1px solid var(--i5-gray-100);
    transition: background 0.2s;
}
.i5-condition-item:hover {
    background: var(--i5-yellow-soft);
}

.i5-chip {
    display: inline-block;
    padding: 3px 10px;
    background: var(--i5-yellow-soft);
    color: var(--i5-gray-900);
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.i5-segment-preview {
    display: flex;
    justify-content: center;
    align-items: center;
}
.i5-segment-img {
    width: 100%;
    height: auto;
    border-radius: var(--i5-radius);
    display: block;
}

.i5-phone-mockup {
    background: var(--i5-gray-900);
    border-radius: 28px;
    padding: 20px 16px;
    width: 280px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15);
    position: relative;
}
.i5-phone-mockup::before {
    content: '';
    display: block;
    width: 60px;
    height: 6px;
    background: var(--i5-gray-700);
    border-radius: 3px;
    margin: 0 auto 16px;
}

.i5-phone-screen {
    background: var(--i5-white);
    border-radius: 16px;
    padding: 16px;
    min-height: 240px;
}

.i5-sms-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--i5-gray-100);
    margin-bottom: 12px;
}

.i5-sms-avatar {
    width: 28px;
    height: 28px;
    background: var(--i5-yellow);
    color: var(--i5-black);
    font-size: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.i5-sms-sender {
    font-size: 13px;
    font-weight: 700;
    color: var(--i5-gray-900);
    flex: 1;
}

.i5-sms-time {
    font-size: 11px;
    color: var(--i5-gray-300);
}

.i5-sms-bubble {
    font-size: 12px;
    color: var(--i5-gray-700);
    line-height: 1.7;
    padding: 10px 12px;
    background: var(--i5-gray-50);
    border-radius: 12px 12px 12px 4px;
    margin-bottom: 10px;
}

.i5-sms-tag-row {
    display: flex;
    gap: 6px;
}

.i5-sms-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    background: var(--i5-yellow-soft);
    color: var(--i5-gray-900);
    border-radius: 3px;
}

/* ============================================================
   SECTION 5: KPI STATS
   ============================================================ */
/* Verified label moved from hero to KPI section top */
.i5-kpi-verified {
    display: inline-block;
    margin: 0 0 18px;
    padding: 8px 18px;
    background: var(--i5-yellow-soft);
    color: var(--i5-gray-900);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    border-radius: 100px;
}

.i5-kpi {
    background: var(--i5-gray-900);
    padding: var(--i5-section-pad) 0;
    color: var(--i5-white);
}

.i5-kpi .i5-section-label {
    color: var(--i5-gray-500);
}

.i5-kpi .i5-section-h2 {
    color: var(--i5-white);
}

.i5-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--i5-radius);
    overflow: hidden;
}

.i5-kpi-item {
    background: var(--i5-gray-900);
    padding: 48px 32px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.2s;
}
.i5-kpi-item:last-child { border-right: none; }
.i5-kpi-item:hover { background: rgba(255, 255, 255, 0.04); }

.i5-kpi-num {
    display: block;
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 900;
    color: var(--i5-yellow);
    line-height: 1;
    margin-bottom: 12px;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 3px;
    white-space: nowrap;
}

.i5-kpi-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--i5-white);
    margin-bottom: 6px;
}

.i5-kpi-note {
    font-size: 13px;
    color: var(--i5-gray-500);
}

/* ============================================================
   SECTION 6: 발송형태 3-card (SERVICE with mockups)
   ============================================================ */
.i5-sendtype {
    background: var(--i5-white);
    padding: var(--i5-section-pad) 0;
}

.i5-section-sub {
    font-size: 16px;
    color: var(--i5-gray-500);
    margin-top: -8px;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* 발송형태 2줄 그리드 (3+2 centered) */
.i5-stype-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}
.i5-stype-row {
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: var(--i5-white);
    border: 1px solid var(--i5-gray-100);
    border-radius: var(--i5-radius);
    padding: 24px;
    transition: box-shadow 0.2s, transform 0.2s;
}
/* 1행: LMS(1-3), MMS(3-5), RCS(5-7) */
.i5-stype-row:nth-child(1) { grid-column: 1 / 3; }
.i5-stype-row:nth-child(2) { grid-column: 3 / 5; }
.i5-stype-row:nth-child(3) { grid-column: 5 / 7; }
/* 2행: 카카오톡(2-4), 앱푸쉬(4-6) — 중앙 정렬 */
.i5-stype-row:nth-child(4) { grid-column: 2 / 4; }
.i5-stype-row:nth-child(5) { grid-column: 4 / 6; }

.i5-stype-row:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1); transform: translateY(-2px); }
.i5-stype-hdr {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.i5-stype-ppt-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}
.i5-stype-info .i5-stype-title {
    font-size: 18px;
    font-weight: 900;
    color: var(--i5-gray-900);
    margin: 0 0 6px;
}
.i5-stype-subtitle {
    font-size: 12px;
    color: var(--i5-gray-500);
    margin: 0;
}
.i5-stype-feats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.i5-stype-feats li {
    font-size: 13px;
    color: var(--i5-gray-600);
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}
.i5-stype-feats li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 5px;
    border-left: 2px solid var(--i5-yellow);
    border-bottom: 2px solid var(--i5-yellow);
    transform: rotate(-45deg);
}
.i5-stype-demo {
    margin-top: auto;
}
.i5-stype-demo {
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    border-radius: 10px;
    background: var(--i5-gray-50);
}
.i5-stype-demo img {
    width: 100%;
    height: auto;
    display: block;
}

/* PPT 성과사례 그리드 */
.i5-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.i5-case-card {
    background: var(--i5-white);
    border: 1px solid var(--i5-gray-100);
    border-radius: var(--i5-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.i5-case-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1); transform: translateY(-2px); }
.i5-case-cat {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--i5-gray-900);
}
.i5-case-cat-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.i5-case-kpi {
    font-size: 14px;
    color: var(--i5-gray-700);
    background: var(--i5-yellow-soft);
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid var(--i5-yellow);
}
.i5-case-kpi strong { color: var(--i5-gray-900); }
.i5-case-targeting { flex: 1; }
.i5-case-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--i5-gray-400);
    margin-bottom: 8px;
}
.i5-case-targeting ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.i5-case-targeting li {
    font-size: 13px;
    color: var(--i5-gray-600);
    padding-left: 14px;
    position: relative;
}
.i5-case-targeting li::before {
    content: '-';
    position: absolute;
    left: 0;
    color: var(--i5-gray-400);
}
.i5-case-demo img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.i5-sendtype-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.i5-stype-card {
    background: var(--i5-white);
    border: 1px solid var(--i5-gray-100);
    border-radius: var(--i5-radius);
    padding: 24px 24px 28px;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.i5-stype-card:hover {
    transform: translateY(-6px);
    border-color: var(--i5-yellow);
    box-shadow: 0 0 0 3px rgba(249, 202, 33, 0.18), 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* Service mockup slot */
.i5-service-mockup {
    border-radius: 12px;
    background: var(--i5-gray-50);
    margin-bottom: 20px;
    overflow: hidden;
    aspect-ratio: 670 / 980;
    display: flex;
    align-items: center;
    justify-content: center;
}
.i5-service-mockup svg {
    width: 100%;
    height: auto;
    max-height: 160px;
    transition: transform 0.4s ease;
}
.i5-service-mockup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.i5-stype-card:hover .i5-service-mockup svg,
.i5-stype-card:hover .i5-service-mockup img {
    transform: scale(1.04);
}

.i5-stype-icon {
    width: 44px;
    height: 44px;
    color: var(--i5-gray-700);
    margin-bottom: 16px;
}
.i5-stype-icon svg { width: 100%; height: 100%; }

.i5-stype-num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--i5-gray-300);
    display: block;
    margin-bottom: 10px;
}

.i5-stype-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--i5-gray-900);
    margin-bottom: 6px;
}

.i5-stype-tag-line {
    font-size: 13px;
    font-weight: 600;
    color: var(--i5-gray-500);
    margin-bottom: 12px;
}

.i5-stype-desc {
    font-size: 14px;
    color: var(--i5-gray-700);
    line-height: 1.7;
    margin-bottom: 20px;
}

.i5-stype-price {
    display: inline-block;
    padding: 6px 14px;
    background: var(--i5-yellow-soft);
    color: var(--i5-gray-900);
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
}

/* ============================================================
   SECTION 7: 단가표 (Pricing with Tabs)
   ============================================================ */
.i5-pricing {
    background: var(--i5-gray-50);
    padding: var(--i5-section-pad) 0;
}

.i5-pricing-tabs {
    display: flex;
    gap: 0;
    border: 1px solid var(--i5-gray-100);
    border-radius: var(--i5-radius-sm);
    overflow: hidden;
    background: var(--i5-white);
    width: fit-content;
    margin-bottom: 40px;
}

.i5-pricing-tab {
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
    color: var(--i5-gray-500);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
    border-right: 1px solid var(--i5-gray-100);
    white-space: nowrap;
}
.i5-pricing-tab:last-child { border-right: none; }
.i5-pricing-tab:hover { color: var(--i5-gray-900); background: var(--i5-gray-50); }
.i5-pricing-tab.is-active {
    background: var(--i5-black);
    color: var(--i5-white);
}

.i5-pricing-content {
    animation: i5-tab-fade 0.25s ease;
}
.i5-pricing-content[hidden] { display: none; }

@keyframes i5-tab-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.i5-pricing-tab-sub {
    font-size: 14px;
    font-weight: 600;
    color: var(--i5-gray-500);
    margin-bottom: 24px;
}

.i5-channel-group {
    margin-bottom: 32px;
}

.i5-channel-group-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--i5-gray-900);
    margin-bottom: 12px;
    padding-left: 12px;
    border-left: 3px solid var(--i5-yellow);
}

.i5-table-wrap {
    overflow-x: auto;
    border-radius: var(--i5-radius-sm);
    border: 1px solid var(--i5-gray-100);
    background: var(--i5-white);
}

.i5-pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.i5-pricing-table thead th {
    background: var(--i5-gray-900);
    color: var(--i5-white);
    padding: 14px 20px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.i5-pricing-table thead th:first-child { border-radius: 0; }

.i5-pricing-table tbody tr {
    border-bottom: 1px solid var(--i5-gray-100);
    transition: background 0.15s;
}
.i5-pricing-table tbody tr:last-child { border-bottom: none; }
.i5-pricing-table tbody tr:hover { background: var(--i5-gray-50); }

.i5-pricing-table tbody td {
    padding: 14px 20px;
    color: var(--i5-gray-700);
    white-space: nowrap;
}

.i5-price-cell {
    font-weight: 700;
    color: var(--i5-gray-900);
    background: var(--i5-yellow-soft) !important;
}

.i5-pricing-note {
    font-size: 13px;
    color: var(--i5-gray-500);
    margin-top: 16px;
    line-height: 1.6;
}

/* 발송형태별 탭 헤더 (상세 가이드 버튼) */
.i5-pricing-tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.i5-btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

/* 발송형태별 표 LMS 강조 (border 제거) */
.i5-row-highlight {
    outline: none;
}
.i5-row-highlight td { font-weight: 600; }

/* 제휴채널별 LMS/MMS 2열 */
.i5-channel-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}
.i5-channel-table-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--i5-gray-900);
    margin-bottom: 4px;
}
.i5-channel-table-sub {
    font-size: 12px;
    color: var(--i5-gray-500);
    margin-bottom: 20px;
    line-height: 1.5;
}
.i5-channel-group-label {
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 8px;
    display: inline-block;
}
.i5-cg-card { background: #1a1a2e; color: #fff; }
.i5-cg-telecom { background: #f9ca21; color: #1a1a2e; }
.i5-cg-member { background: #e8f4fd; color: #1a1a2e; }
.i5-cg-other { background: var(--i5-gray-100); color: var(--i5-gray-700); }
.i5-pricing-table--sm { font-size: 12px; }
.i5-pricing-table--sm thead th { padding: 10px 12px; font-size: 11px; }
.i5-pricing-table--sm tbody td { padding: 9px 12px; white-space: normal; }
.i5-note { font-size: 11px; color: #e53e3e; display: block; }

/* ============================================================
   SECTION 8: 5단계 프로세스
   ============================================================ */
.i5-process {
    background: var(--i5-white);
    padding: var(--i5-section-pad) 0;
}

.i5-process-track {
    position: relative;
    margin-bottom: 48px;
}

.i5-process-line {
    position: absolute;
    top: 36px;
    left: 36px;
    right: 36px;
    height: 2px;
    background: var(--i5-gray-100);
    z-index: 0;
}

.i5-process-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    position: relative;
    z-index: 1;
}

.i5-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.i5-step.is-visible {
    opacity: 1;
    transform: none;
}

.i5-step-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--i5-yellow);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    color: var(--i5-black);
    margin: 0 auto 16px;
    flex-shrink: 0;
}

.i5-step.is-visible .i5-step-num {
    background: var(--i5-yellow);
    color: var(--i5-black);
}

/* PPT 스타일 프로세스 아이콘 */
.i5-step-icon-wrap {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.i5-step-icon-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.i5-step-body { padding: 0 8px; }

/* 단가표 아이콘 */
.i5-pt-name {
    display: flex;
    align-items: center;
    gap: 10px;
}
.i5-pt-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.i5-step-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--i5-gray-900);
    margin-bottom: 6px;
}

.i5-step-desc {
    font-size: 13px;
    color: var(--i5-gray-500);
    line-height: 1.6;
}

.i5-process-tip {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 28px;
    background: var(--i5-yellow-soft);
    border-radius: var(--i5-radius-sm);
    border-left: 4px solid var(--i5-yellow);
}

.i5-tip-icon {
    background: var(--i5-yellow);
    color: var(--i5-black);
    font-size: 11px;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 2px;
}

.i5-process-tip p {
    font-size: 15px;
    color: var(--i5-gray-900);
    line-height: 1.7;
}

/* ============================================================
   SECTION 9: CASES RAIL (BPM-style)
   ============================================================ */
.i5-cases {
    background: var(--i5-gray-50);
    padding: var(--i5-section-pad) 0;
}

/* Featured card */
.i5-case-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: var(--i5-radius);
    overflow: hidden;
    border: 1px solid var(--i5-gray-100);
    background: var(--i5-white);
    margin-bottom: 60px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
}

.i5-cf-image {
    position: relative;
    min-height: 360px;
}
.i5-cf-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.i5-cf-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 6px 14px;
    background: var(--i5-yellow);
    color: var(--i5-black);
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
}

.i5-cf-body {
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.i5-cf-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--i5-gray-500);
    margin-bottom: 16px;
}

.i5-cf-title {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 900;
    color: var(--i5-gray-900);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.i5-cf-desc {
    font-size: 15px;
    color: var(--i5-gray-700);
    line-height: 1.8;
    margin-bottom: 28px;
}

.i5-cf-metrics {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
}

.i5-cf-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.i5-cf-metric strong {
    font-size: 24px;
    font-weight: 900;
    color: var(--i5-gray-900);
    display: block;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--i5-yellow);
    text-decoration-thickness: 2px;
}
.i5-cf-metric span {
    font-size: 12px;
    color: var(--i5-gray-500);
}

/* Cases rail */
.i5-cases-rail-wrap { margin-top: 8px; }

.i5-cases-rail-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.i5-rail-hint {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--i5-gray-300);
}

.i5-cases-rail {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    padding-bottom: 16px;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}
.i5-cases-rail:active { cursor: grabbing; }
.i5-cases-rail::-webkit-scrollbar { height: 4px; }
.i5-cases-rail::-webkit-scrollbar-track { background: var(--i5-gray-100); border-radius: 2px; }
.i5-cases-rail::-webkit-scrollbar-thumb { background: var(--i5-gray-300); border-radius: 2px; }

.i5-rail-card {
    flex: 0 0 260px;
    scroll-snap-align: start;
    background: var(--i5-white);
    border: 1px solid var(--i5-gray-100);
    border-radius: var(--i5-radius);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.i5-rail-card:hover {
    box-shadow: 0 0 0 2px var(--i5-yellow), 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.i5-rail-img {
    position: relative;
    height: 160px;
}
.i5-rail-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.i5-rail-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    background: var(--i5-yellow);
    color: var(--i5-black);
    font-size: 11px;
    font-weight: 700;
    border-radius: 3px;
}

.i5-rail-body {
    padding: 18px;
}

.i5-rail-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--i5-gray-900);
    margin-bottom: 6px;
}

.i5-rail-kpi {
    font-size: 13px;
    font-weight: 600;
    color: var(--i5-gray-700);
    background: var(--i5-yellow-soft);
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
}

.i5-rail-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.i5-rail-meta span {
    font-size: 12px;
    color: var(--i5-gray-500);
    padding: 2px 8px;
    border: 1px solid var(--i5-gray-100);
    border-radius: 3px;
}

/* ============================================================
   SECTION 10: PARTNERS (REDESIGNED)
   ============================================================ */
.i5-partners {
    background: var(--i5-white);
    padding: var(--i5-section-pad) 0;
}

/* KPI Strip */
.i5-partners-kpi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 56px;
    background: var(--i5-gray-900);
    border-radius: var(--i5-radius);
    overflow: hidden;
}

.i5-partners-kpi-item {
    padding: 36px 32px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.i5-partners-kpi-item:last-child { border-right: none; }

.i5-partners-kpi-num {
    display: block;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 900;
    color: var(--i5-yellow);
    line-height: 1;
    letter-spacing: -0.02em;
}

.i5-partners-kpi-label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.02em;
}

/* 3 Category Cards */
.i5-partners-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 56px;
}

.i5-partners-card {
    background: var(--i5-white);
    border: 1px solid var(--i5-gray-100);
    border-radius: var(--i5-radius);
    padding: 32px 28px;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.i5-partners-card:hover {
    transform: translateY(-4px);
    border-color: var(--i5-yellow);
    box-shadow: 0 0 0 3px rgba(249, 202, 33, 0.15), 0 16px 40px rgba(0, 0, 0, 0.07);
}

.i5-partners-card-icon {
    width: 48px;
    height: 48px;
    color: var(--i5-gray-700);
    margin-bottom: 20px;
}
.i5-partners-card-icon svg { width: 100%; height: 100%; }

.i5-partners-card-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--i5-gray-900);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.i5-partners-card-data {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}
.i5-partners-card-data li {
    font-size: 14px;
    color: var(--i5-gray-700);
    padding: 5px 0;
    border-bottom: 1px solid var(--i5-gray-100);
    line-height: 1.5;
}
.i5-partners-card-data li:last-child { border-bottom: none; }
.i5-partners-card-data li::before {
    content: '· ';
    color: var(--i5-gray-300);
}

.i5-partners-card-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.i5-partners-channel-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--i5-gray-50);
    border: 1px solid var(--i5-gray-100);
    color: var(--i5-gray-700);
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    transition: background 0.2s, border-color 0.2s;
}
.i5-partners-card:hover .i5-partners-channel-tag {
    background: var(--i5-yellow);
    border-color: var(--i5-yellow);
    color: var(--i5-black);
}

.i5-partners-card-use {
    font-size: 13px;
    color: var(--i5-gray-500);
    line-height: 1.6;
    padding-top: 12px;
    border-top: 1px solid var(--i5-gray-100);
}
.i5-partners-card-use strong {
    color: var(--i5-gray-900);
}

/* Infinite Logo Marquee — 3줄: 1·3줄 오른쪽, 2줄 왼쪽 */
.i5-logo-marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    margin: 16px 0 32px;
    padding: 24px 0;
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    contain: layout paint;
}
.i5-logo-track img {
    background: transparent !important;
    mix-blend-mode: multiply;
}

.i5-logo-track {
    display: flex;
    gap: 80px;
    width: max-content;
    align-items: center;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 오른쪽 → : 0 → -50% */
.i5-track-right {
    animation: i5-marquee-right 20s linear infinite;
}
@keyframes i5-marquee-right {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* 왼쪽 ← : -50% → 0 */
.i5-track-left {
    animation: i5-marquee-left 20s linear infinite;
}
@keyframes i5-marquee-left {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

@keyframes i5-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.i5-logo-track img {
    height: 96px;
    width: auto;
    max-width: 220px;
    opacity: 1;
    filter: grayscale(0);
    transition: transform 0.3s ease, filter 0.3s ease;
    flex-shrink: 0;
    object-fit: contain;
}
.i5-logo-track img:hover {
    transform: scale(1.08);
}

/* Partners disclaimer */
.i5-partners-disclaimer {
    font-size: 13px;
    color: var(--i5-gray-500);
    line-height: 1.6;
    text-align: center;
    padding: 16px;
    background: var(--i5-gray-50);
    border-radius: var(--i5-radius-sm);
    border: 1px solid var(--i5-gray-100);
}

/* ============================================================
   SECTION 11: CONTACT (chatbot style)
   ============================================================ */
.i5-contact {
    background: var(--i5-gray-50);
    padding: var(--i5-section-pad) 0;
}

.i5-contact-title {
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 900;
    color: var(--i5-gray-900);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
}

.i5-contact-sub {
    font-size: 17px;
    color: var(--i5-gray-700);
    margin-bottom: 60px;
    line-height: 1.7;
}

.i5-contact-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
    margin-bottom: 64px;
}

/* Chatbot */
.i5-chat {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.i5-chat-msg {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.i5-chat-msg.is-visible {
    opacity: 1;
    transform: none;
}

.i5-chat-avatar {
    width: 44px;
    height: 44px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    flex-shrink: 0;
}
.i5-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.i5-chat-bubble {
    background: var(--i5-white);
    border: 1px solid var(--i5-gray-100);
    border-radius: 4px 16px 16px 16px;
    padding: 14px 18px;
    font-size: 15px;
    color: var(--i5-gray-700);
    line-height: 1.7;
    max-width: 360px;
}

/* Contact form */
.i5-contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.i5-form-row {
    display: flex;
    gap: 16px;
}
.i5-form-row--half > * { flex: 1; }

.i5-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 1;
    transform: none;
}

.i5-form-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--i5-gray-700);
}

.i5-form-field input,
.i5-form-field textarea {
    padding: 12px 16px;
    border: 1px solid var(--i5-gray-100);
    border-radius: var(--i5-radius-sm);
    font-size: 15px;
    color: var(--i5-gray-900);
    background: var(--i5-white);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    width: 100%;
}
.i5-form-field input:focus,
.i5-form-field textarea:focus {
    border-color: var(--i5-yellow);
    box-shadow: 0 0 0 3px var(--i5-yellow-soft);
}

.i5-form-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    opacity: 1;
    transform: none;
}

.i5-form-note {
    font-size: 13px;
    color: var(--i5-gray-500);
    opacity: 1;
}

/* Contact banner — 어두운 네이비 + 노란 강조 (이미지 색상) */
.i5-contact-banner {
    text-align: center;
    padding: 48px 32px;
    background: #1a1a2e;
    border-radius: var(--i5-radius);
    margin-top: 24px;
}
.i5-contact-banner-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 900;
    color: var(--i5-yellow);
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.i5-contact-banner-sub {
    font-size: clamp(13px, 1.2vw, 16px);
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.6;
}

/* ============================================================
   FOOTER
   ============================================================ */
.i5-footer {
    background: var(--i5-gray-50);
    border-top: 1px solid var(--i5-gray-100);
    padding: 40px 0 24px;
}

.i5-footer-inner {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 20px;
}
.i5-footer-brand { order: 1; }
.i5-footer-links { order: 2; margin-left: auto; }
.i5-footer-contact { order: 3; }

.i5-footer-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--i5-gray-900);
    margin-bottom: 6px;
}

.i5-footer-copy {
    font-size: 13px;
    color: var(--i5-gray-500);
}

.i5-footer-links {
    display: flex;
    gap: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--i5-gray-700);
    flex-wrap: nowrap;
    white-space: nowrap;
}
.i5-footer-links a:hover { color: var(--i5-gray-900); }

.i5-footer-contact {
    font-size: 13px;
    color: var(--i5-gray-500);
    text-align: right;
    line-height: 1.8;
}

/* Legal line */
.i5-footer-legal {
    font-size: 12px;
    color: var(--i5-gray-500);
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid var(--i5-gray-100);
    line-height: 1.6;
}

/* ============================================================
   v6: Privacy Consent + Form Message
   ============================================================ */
.i5-privacy-consent { margin: 8px 0 4px; }
.i5-privacy-details {
    border: 1px solid var(--i5-gray-100);
    border-radius: var(--i5-radius-sm);
    background: var(--i5-gray-50);
    overflow: hidden;
}
.i5-privacy-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--i5-gray-900);
}
.i5-privacy-summary::-webkit-details-marker { display: none; }
.i5-privacy-summary input[type=checkbox] {
    width: 18px;
    height: 18px;
    accent-color: var(--i5-yellow);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}
.i5-privacy-summary label {
    flex: 1;
    cursor: pointer;
    font-weight: 600;
    color: var(--i5-gray-900);
}
.i5-required {
    color: #dc2626;
    font-weight: 700;
    margin-left: 4px;
    font-size: 0.9em;
}
.i5-privacy-toggle {
    font-size: 12px;
    color: var(--i5-gray-500);
    margin-left: auto;
    flex-shrink: 0;
}
.i5-privacy-details[open] .i5-privacy-toggle::after { content: ' ↑'; }

@media (max-width: 380px) {
    .i5-privacy-summary {
        display: grid;
        grid-template-columns: 16px minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 8px;
        row-gap: 0;
        padding: 11px 12px;
        font-size: 11px;
    }
    .i5-privacy-summary input[type=checkbox] {
        grid-column: 1;
        grid-row: 1;
        width: 16px;
        height: 16px;
    }
    .i5-privacy-summary label {
        grid-column: 2;
        grid-row: 1;
        display: block;
        white-space: nowrap;
        min-width: 0;
        font-size: 11px;
        line-height: 1.2;
        letter-spacing: -0.03em;
    }
    .i5-required {
        margin-left: 2px;
        font-size: 0.8em;
    }
    .i5-privacy-toggle {
        grid-column: 3;
        grid-row: 1;
        width: auto;
        margin-left: 0;
        white-space: nowrap;
        font-size: 10px;
        letter-spacing: -0.02em;
        text-align: right;
    }
}

.i5-privacy-text {
    padding: 14px 18px 18px 46px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--i5-gray-700);
    border-top: 1px solid var(--i5-gray-100);
}
.i5-privacy-text strong {
    display: block;
    margin-bottom: 8px;
    color: var(--i5-gray-900);
    font-size: 14px;
}
.i5-privacy-text p { margin: 0 0 10px 0; }
.i5-privacy-text b { color: var(--i5-gray-900); }
.i5-privacy-note {
    color: var(--i5-gray-500);
    font-size: 12px;
    margin-top: 10px !important;
}

.i5-form-message {
    padding: 0;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    margin-top: 12px;
    transition: padding 0.2s, background 0.2s;
}
.i5-form-message.is-success {
    padding: 14px 18px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.i5-form-message.is-error {
    padding: 14px 18px;
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ============================================================
   REVEAL ANIMATION (scroll-triggered)
   ============================================================ */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* ============================================================
   RESPONSIVE — 1024px
   ============================================================ */
@media (max-width: 1024px) {
    .i5-hero-inner { grid-template-columns: 1fr; gap: 48px; }
    .i5-hero-deco { display: none; }
    .i5-why-grid { grid-template-columns: 1fr; }
    .i5-segment-inner { grid-template-columns: 1fr; gap: 48px; }
    .i5-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .i5-sendtype-grid { grid-template-columns: repeat(3, 1fr); }
    .i5-stype-list { grid-template-columns: repeat(2, 1fr); }
    .i5-stype-row:nth-child(n) { grid-column: auto; }
    .i5-stype-demo { height: 420px; }
    .i5-cases-grid { grid-template-columns: repeat(2, 1fr); }
    .i5-channel-dual { grid-template-columns: 1fr; }
    .i5-case-featured { grid-template-columns: 1fr; }
    .i5-cf-image { min-height: 240px; }
    .i5-partners-kpi { grid-template-columns: repeat(3, 1fr); }
    .i5-partners-cards { grid-template-columns: 1fr 1fr; }
    .i5-contact-inner { grid-template-columns: 1fr; gap: 48px; }
    .i5-footer-inner { grid-template-columns: 1fr; gap: 24px; }
    .i5-footer-contact { text-align: left; }
    .i5-process-steps { grid-template-columns: repeat(3, 1fr); }
    .i5-process-line { display: none; }
}

/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */
@media (max-width: 768px) {
    :root { --i5-container: calc(100% - 32px); }

    .i5-nav { display: none; }
    .i5-header-inner { gap: 16px; }

    .i5-hero-title { font-size: clamp(40px, 9vw, 56px); }

    .i5-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .i5-kpi-item { padding: 32px 20px; }

    .i5-sendtype-grid { grid-template-columns: 1fr; }
    .i5-stype-list { grid-template-columns: 1fr; }
    .i5-stype-row:nth-child(n) { grid-column: auto; }
    .i5-stype-demo { height: auto !important; }
    .i5-stype-row { height: auto !important; align-self: start; }
    .i5-cases-grid { grid-template-columns: 1fr; }

    .i5-process-steps { grid-template-columns: repeat(2, 1fr); }

    .i5-partners-kpi { grid-template-columns: 1fr; }
    .i5-partners-kpi-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .i5-partners-kpi-item:last-child { border-bottom: none; }
    .i5-partners-cards { grid-template-columns: 1fr; }

    .i5-form-row--half { flex-direction: column; }
    .i5-form-actions { flex-direction: column; }
    .i5-form-actions .i5-btn { width: 100%; text-align: center; }

    .i5-cf-body { padding: 28px; }

    .i5-logo-track { gap: 72px; }
    .i5-logo-track img { height: 64px; max-width: 180px; }
    .i5-logo-marquee { padding: 28px 0; }
}

/* ============================================================
   RESPONSIVE — 480px
   ============================================================ */
@media (max-width: 480px) {
    .i5-pricing-tabs { width: 100%; }
    .i5-pricing-tab { flex: 1; padding: 12px 16px; font-size: 14px; }

    .i5-kpi-grid { grid-template-columns: 1fr 1fr; }

    .i5-process-steps { grid-template-columns: 1fr 1fr; }

    .i5-header-cta { padding: 8px 14px; font-size: 13px; }

    .i5-partners-kpi { grid-template-columns: 1fr; }
    .i5-logo-marquee { padding: 24px 0; margin: 12px 0 20px; }
    .i5-logo-track { gap: 56px; }
    .i5-logo-track img { height: 48px; max-width: 140px; }
}

/* === MOBILE FOLD FIX (2026-05-08) ===========================
 * Fix Galaxy Z Fold (folded ≈280px) horizontal overflow.
 * style5.css 는 index.html(메인) 활성 스타일시트.
 * Plan/Design: docs/01-plan, 02-design /landing-mobile-fold-fix
 * 3-tier: global safety + 480 narrow + 360 ultra-narrow
 * =========================================================== */

/* (1) 글로벌 안전망 */
html, body {
    max-width: 100vw;
    overflow-x: clip;
}

/* (2) ≤480px (narrow phones) — 기존 480 보강 */
@media (max-width: 480px) {
    /* index5 카드 내부 padding 축소 + width 보호 */
    .i5-why-card {
        padding: 24px 18px;
        max-width: 100%;
        min-width: 0;
    }
    .i5-why-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    /* index5 가격 테이블 — narrow 친화: padding 축소 + font 축소 + wrap 허용 */
    .i5-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .i5-pricing-table {
        font-size: 12px;
        width: 100%;
    }
    .i5-pricing-table thead th,
    .i5-pricing-table tbody td {
        padding: 8px 10px;
        white-space: normal;
        word-break: keep-all;
    }
    .i5-pricing-table thead th {
        font-size: 11px;
        letter-spacing: 0;
    }
    /* Logo marquee narrow 보강: 로고 사이즈 축소 + gap 축소로 더 많이 동시 노출 */
    .i5-logo-track img {
        height: 40px !important;
        max-width: 100px !important;
    }
    .i5-logo-track {
        gap: 36px !important;
    }
    .i5-logo-marquee {
        margin: 12px 0 20px;
        padding: 16px 0;
    }
    /* 일반적 narrow 안전망 */
    .i5-section, .i5-container, .i5-grid, .i5-card {
        max-width: 100%;
        min-width: 0;
    }
    /* 긴 텍스트 wrap 강제 */
    .i5-why-title, .i5-why-num {
        word-break: keep-all;
        overflow-wrap: break-word;
    }
    /* === v2 cutoff fix (2026-05-08) === */
    /* (a) WHY TARGETING MATTERS: i5-why-title 의 white-space:nowrap 해제 */
    .i5-why-title {
        white-space: normal;
        font-size: 18px;
        line-height: 1.35;
    }
    .i5-why-num { line-height: 1.4; }

    /* (b) Footer 메뉴 wrap 허용 */
    .i5-footer-inner {
        flex-wrap: wrap;
        gap: 16px;
    }
    .i5-footer-links {
        flex-wrap: wrap;
        white-space: normal;
        gap: 12px 16px;
        margin-left: 0;
        order: 4;
        width: 100%;
    }
    .i5-footer-contact {
        text-align: left;
        width: 100%;
    }

    /* (c) 안마의자 등 케이스 카드 cutoff */
    .i5-case-card {
        padding: 18px;
        gap: 12px;
    }
    .i5-case-cat {
        font-size: 14px;
        word-break: keep-all;
    }
    .i5-case-targeting li {
        font-size: 12px;
        word-break: keep-all;
        overflow-wrap: break-word;
    }
    .i5-case-kpi {
        font-size: 13px;
        padding: 8px 12px;
        word-break: keep-all;
    }

    /* (d) 단가표 발송형태 탭: 자체 가로 스크롤 허용 (마지막 APP PUSH 접근 가능) */
    .i5-pricing-tabs {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .i5-pricing-tab {
        padding: 10px 14px;
        font-size: 13px;
        flex-shrink: 0;
    }

    /* (e) 발송형태 grid 5열 → 2열 */
    .i5-sendtype-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    /* (f) 발송형태 실제 사용 클래스 보강 (i5-stype-*) */
    .i5-stype-row {
        padding: 16px;
        gap: 12px;
    }
    .i5-stype-feats li {
        font-size: 12px;
        word-break: keep-all;
        overflow-wrap: break-word;
    }
    .i5-stype-title {
        font-size: 17px;
        word-break: keep-all;
    }
    .i5-stype-card {
        padding: 18px 18px 22px;
    }
    /* APP PUSH 등 긴 라벨 wrap */
    .i5-stype-hdr {
        flex-wrap: wrap;
    }

    /* (g) 안마의자 캠페인 타겟설계 예시 — segment-title nowrap 해제 + clamp 폰트 축소 */
    .i5-segment-title {
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: break-word;
        font-size: clamp(18px, 5.5vw, 24px);
        line-height: 1.3;
        margin: 12px 0 16px;
    }
    .i5-segment-preview-full {
        margin-top: 24px;
        width: 100%;
        max-width: 100%;
    }
    .i5-segment-img-full {
        max-width: 100%;
        height: auto;
    }
    .i5-segment-sub {
        font-size: 13px;
        margin-bottom: 20px;
    }

    /* (i) 발송형태 카드 — 이미지 위/아래 빈 공간 제거 + 추가 컴팩트화 */
    .i5-stype-row {
        padding: 14px;
        gap: 8px;
    }
    .i5-stype-feats {
        flex: 0 0 auto;       /* 남은 공간 차지 안 하게 */
        gap: 4px;
    }
    .i5-stype-demo {
        margin-top: 6px;      /* margin-top: auto 무력화 + 더 타이트 */
        max-width: 100%;
        height: auto;          /* 768 미디어쿼리의 height: 560px 무력화 (핵심) */
        background: transparent;  /* 이미지 컨테이너 회색 배경 제거 */
        border-radius: 6px;
        display: flex;
        justify-content: center;
    }
    .i5-stype-demo img {
        max-height: 320px;    /* 폰 mockup 자연 비율 유지하되 너무 크지 않게 */
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }
    /* grid row stretch 무력화 — 짧은 카드는 짧게 */
    .i5-stype-list { align-items: start; }
    .i5-stype-row { height: auto; align-self: start; }
    .i5-stype-hdr { gap: 8px; }
    .i5-stype-ppt-icon { width: 32px; height: 32px; }
    .i5-stype-info .i5-stype-title { font-size: 16px; }
    .i5-stype-subtitle { font-size: 11px; }

    /* 단가표 column 비례 분배 (발송형태 35% / 단가 25% / 최소발송건수 20% / 특징 20%) */
    .i5-pricing-table { table-layout: fixed; }
    .i5-pricing-table thead th:nth-child(1),
    .i5-pricing-table tbody td:nth-child(1) { width: 35%; }
    .i5-pricing-table thead th:nth-child(2),
    .i5-pricing-table tbody td:nth-child(2) { width: 25%; }
    .i5-pricing-table thead th:nth-child(3),
    .i5-pricing-table tbody td:nth-child(3) { width: 20%; }
    .i5-pricing-table thead th:nth-child(4),
    .i5-pricing-table tbody td:nth-child(4) { width: 20%; }

    /* (j) "지금 바로 시작하세요" 한 줄로 강제 (contact 두 곳) */
    .i5-contact-title {
        font-size: clamp(22px, 7vw, 34px);
        white-space: nowrap;
        margin-bottom: 12px;
    }
    .i5-contact-banner-title {
        font-size: clamp(18px, 5.5vw, 28px);
        white-space: nowrap;
    }
    .i5-contact-sub {
        font-size: 14px;
        margin-bottom: 32px;
    }

    /* (h) PROVEN KPI 4개 카드 (i5-kpi-*) narrow 보강 */
    .i5-kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1px;
    }
    .i5-kpi-item {
        padding: 24px 14px;
    }
    .i5-kpi-num {
        font-size: clamp(22px, 7vw, 30px);
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: break-word;
        margin-bottom: 8px;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }
    .i5-kpi-label {
        font-size: 13px;
        word-break: keep-all;
    }
    .i5-kpi-note {
        font-size: 11px;
        line-height: 1.5;
        word-break: keep-all;
    }
}

/* (3) ≤360px (Galaxy Z Fold folded) */
@media (max-width: 360px) {
    .i5-why-card {
        padding: 20px 14px;
    }
    /* 데코 blob/이미지 안전망 */
    [class*="-blob"], [class*="-bg"] {
        max-width: 100%;
    }
    /* 본문 폰트 미세 축소 (절대 px만 영향) */
    body { font-size: 14px; }
    h1, .h1 { font-size: clamp(22px, 7vw, 28px); }
    h2, .h2 { font-size: clamp(18px, 6vw, 24px); }
    /* Logo 추가 축소 */
    .i5-logo-track img {
        height: 32px !important;
        max-width: 80px !important;
    }
    .i5-logo-track {
        gap: 24px !important;
    }
    /* Pricing table 추가 축소 */
    .i5-pricing-table { font-size: 11px; }
    .i5-pricing-table thead th,
    .i5-pricing-table tbody td {
        padding: 6px 8px;
    }
    /* v2 ultra-narrow 추가 보강 */
    .i5-why-title { font-size: 16px; }
    .i5-pricing-tab { padding: 8px 12px; font-size: 12px; }
    .i5-case-card { padding: 16px; }
    .i5-case-targeting li { font-size: 11px; }
    .i5-sendtype-grid { grid-template-columns: 1fr; }
    /* 안마의자 segment-title 추가 축소 */
    .i5-segment-title { font-size: clamp(16px, 5vw, 20px); }
    .i5-segment-sub { font-size: 12px; }
    /* KPI 추가 축소 (Fold) — 280 이하는 1열 grid로 (카드폭 충분 확보) */
    .i5-kpi-grid { grid-template-columns: 1fr; }
    .i5-kpi-item { padding: 20px 16px; }
    .i5-kpi-num { font-size: clamp(24px, 7vw, 30px); }
    .i5-kpi-label { font-size: 13px; }
    .i5-kpi-note { font-size: 11px; }
}
/* === /MOBILE FOLD FIX ====================================== */

/* ============================================================
   HERO REDESIGN · 2026-05-21
   "Editorial Precision" — 노랑 액센트 + 모던 세리프
   원본 HTML 구조 100% 유지 / .i5-hero* 클래스만 재정의
   ============================================================ */

/* === 1. SECTION 배경: 따뜻 오프화이트 + 페이ント 노랑 그리드 === */
.i5-hero {
    position: relative;
    background: #faf9f4;
    padding: clamp(64px, 10vh, 120px) 0 clamp(140px, 18vh, 220px) !important;
    overflow: hidden;
    isolation: isolate;
}
/* faint yellow grid overlay (radial-masked) */
.i5-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(249,202,33,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(249,202,33,.08) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 50%, #000 30%, transparent 78%);
            mask-image: radial-gradient(ellipse 70% 70% at 70% 50%, #000 30%, transparent 78%);
    pointer-events: none;
    z-index: 0;
}
/* corner ornament 제거 (사용자 요청) */

.i5-hero-inner {
    position: relative;
    z-index: 2;
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
    gap: clamp(40px, 6vw, 88px) !important;
    align-items: center !important;
}

/* === 2. LABEL: monospace + 펄싱 yellow 도트 === */
.i5-hero-label {
    display: inline-flex !important;
    align-items: center;
    gap: 14px !important;
    font-family: "Noto Sans KR", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.34em !important;
    text-transform: uppercase !important;
    color: #2a2a44 !important;
    margin-bottom: 30px !important;
    /* animation: hero-rise 0.85s cubic-bezier(.16,.84,.3,1); */
}
.i5-hero-label::before {
    content: "";
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #f9ca21;
    box-shadow: 0 0 0 5px rgba(249,202,33,.22);
    animation: hero-pulse 2.4s ease-in-out infinite;
    flex-shrink: 0;
}
.i5-hero-label::after {
    content: "";
    width: 36px; height: 1px;
    background: linear-gradient(90deg, #2a2a44 0%, transparent 100%);
    margin-left: 4px;
}
@keyframes hero-pulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(249,202,33,.22), 0 0 0 0 rgba(249,202,33,0); }
    50%      { box-shadow: 0 0 0 11px rgba(249,202,33,.06), 0 0 18px rgba(249,202,33,.6); }
}

/* === 3. TITLE: Fraunces display serif + 라인별 yellow 하이라이터 === */
.i5-hero-title {
    font-family: "Noto Sans KR", sans-serif !important;
    font-size: clamp(44px, 5.6vw, 88px) !important;
    font-weight: 900 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.028em !important;
    color: #14142a !important;

    /* 각 줄 하단에 yellow 마커 라인 (line-height 기반 repeating band) */
    background-image: linear-gradient(180deg,
        transparent 0,
        transparent calc(1em - 0.18em),
        #f9ca21 calc(1em - 0.18em),
        #f9ca21 calc(1em - 0.04em),
        transparent calc(1em - 0.04em),
        transparent 1.04em);
    background-size: 100% 1.04em;
    background-repeat: repeat-y;
    background-position: 0 0.04em;

    margin-bottom: 28px !important;
    display: block;
    max-width: max-content;
}

/* === 4. SUB: Noto Serif KR italic === */
.i5-hero-sub {
    font-family: "Noto Sans KR", sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: clamp(17px, 1.6vw, 21px) !important;
    line-height: 1.65 !important;
    color: #2a2a44 !important;
    max-width: 32em;
    margin-bottom: 40px !important;
    position: relative;
    padding-left: 18px;
}
.i5-hero-sub::before {
    content: none;
}

/* === 5. ACTIONS: pill 버튼 + 화살표 모션 === */
.i5-hero-actions {
    display: flex !important;
    gap: 14px !important;
    flex-wrap: wrap;
}
/* 노랑 primary — pill + glow + arrow translate */
.i5-hero .i5-btn-yellow {
    background: #f9ca21 !important;
    color: #14142a !important;
    padding: 17px 30px !important;
    border-radius: 999px !important;
    border: 1.5px solid #f9ca21 !important;
    font-family: "Noto Sans KR", sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    box-shadow: 0 14px 30px rgba(249,202,33,.36),
                inset 0 1px 0 rgba(255,255,255,.45) !important;
    position: relative;
    overflow: hidden;
    transition: transform .28s cubic-bezier(.16,.84,.3,1),
                box-shadow .28s !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
}
.i5-hero .i5-btn-yellow::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .8s cubic-bezier(.16,.84,.3,1);
}
.i5-hero .i5-btn-yellow:hover::before { transform: translateX(120%); }
.i5-hero .i5-btn-yellow:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 20px 38px rgba(249,202,33,.5),
                inset 0 1px 0 rgba(255,255,255,.55) !important;
}

/* ghost 버튼 — outline pill */
.i5-hero .i5-btn-ghost {
    background: #14142a !important;
    color: #ffffff !important;
    padding: 16px 28px !important;
    border: 1.5px solid #14142a !important;
    border-radius: 999px !important;
    font-family: "Noto Sans KR", sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    transition: all .28s cubic-bezier(.16,.84,.3,1) !important;
}
.i5-hero .i5-btn-ghost:hover {
    background: transparent !important;
    color: #14142a !important;
}

/* === 6. DECO: QR + 코너 태그 + 펄스 도트 === */
.i5-hero-deco {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
    padding: 40px 32px !important;
}
/* 액자 코너 라인 (4 corner brackets) */
.i5-hero-deco::before,
.i5-hero-deco::after {
    content: "";
    position: absolute;
    width: 28px; height: 28px;
    border: 1.5px solid #14142a;
    pointer-events: none;
}
.i5-hero-deco::before {
    top: 0; left: 0;
    border-right: 0;
    border-bottom: 0;
}
.i5-hero-deco::after {
    bottom: 0; right: 0;
    border-left: 0;
    border-top: 0;
}

.i5-hero .i5-qr-svg {
    width: clamp(200px, 22vw, 280px) !important;
    height: auto !important;
    color: #14142a;
}
/* Chip 모션 — 노랑 핀 펄스 + 중앙 코어 글로우 (variant 08) */
.i5-hero .i5-qr-svg [data-pulse] {
    transform-origin: center;
    transform-box: fill-box;
    animation: chip-pulse 2.4s ease-in-out infinite;
}
.i5-hero .i5-qr-svg [data-pulse]:nth-of-type(2) { animation-delay: .4s; }
@keyframes chip-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(.78); opacity: .7; }
}
.i5-hero .i5-qr-svg [data-glow] {
    transform-origin: center;
    transform-box: fill-box;
    animation: chip-glow 2s ease-in-out infinite;
}
@keyframes chip-glow {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 3px rgba(249,202,33,.5)); }
    50%      { transform: scale(1.06); filter: drop-shadow(0 0 10px rgba(249,202,33,.9)); }
}

/* Phone Lock Screen 모션 — 폰 진동 + 노랑 SMS pop (variant 06 · 2026-05-21) */
.i5-hero .i5-qr-svg [data-anim="phone-shake"] {
    transform-origin: center;
    transform-box: fill-box;
    animation: phone-shake 2.6s ease-in-out infinite;
}
@keyframes phone-shake {
    0%, 65%, 100% { transform: translate(0, 0) rotate(0); }
    68%           { transform: translate(-2.5px, -1px) rotate(-2deg); }
    71%           { transform: translate(2.5px, 1px)   rotate(2deg); }
    74%           { transform: translate(-2.5px, -.5px) rotate(-1.5deg); }
    77%           { transform: translate(2.5px, .5px)  rotate(1.5deg); }
    80%           { transform: translate(-2px, 0)      rotate(-1deg); }
    83%           { transform: translate(2px, 0)       rotate(1deg); }
    86%           { transform: translate(-1px, 0)      rotate(-.5deg); }
}
.i5-hero .i5-qr-svg [data-anim="sms-pop"] {
    transform-origin: center;
    transform-box: fill-box;
    animation: sms-pop 2.6s ease-out infinite;
    filter: drop-shadow(0 4px 8px rgba(249, 202, 33, .35));
}
@keyframes sms-pop {
    0%, 60%  { transform: scale(0);   opacity: 0; }
    72%      { transform: scale(1.2); opacity: 1; }
    82%      { transform: scale(1);   opacity: 1; }
    100%     { transform: scale(1);   opacity: 1; }
}

.i5-hero .i5-qr-label {
    font-family: "Noto Sans KR", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.36em !important;
    color: #5a5e76 !important;
    margin: 0 !important;
}
.i5-hero .i5-qr-label::before {
    content: "// ";
    color: #f9ca21;
    font-weight: 700;
}

/* === 7. SCROLL: 수직 라인 + 떨어지는 도트 === */
.i5-hero-scroll {
    position: absolute !important;
    bottom: 36px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-family: "Noto Sans KR", sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.46em !important;
    color: #5a5e76 !important;
    text-transform: uppercase;
    padding-top: 78px !important;
    text-indent: 0.46em;
}
.i5-hero-scroll::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 1px; height: 60px;
    background: linear-gradient(180deg, transparent, rgba(20,20,42,.4) 30%, rgba(20,20,42,.4) 70%, transparent);
}
.i5-hero-scroll::after {
    content: "";
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #f9ca21;
    box-shadow: 0 0 12px rgba(249,202,33,.6);
    animation: hero-drop 2.6s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes hero-drop {
    0%   { top: 6px; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { top: 56px; opacity: 0; }
}

/* === 공통 entrance === */
@keyframes hero-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === 모바일 반응형 === */
@media (max-width: 880px) {
    .i5-hero { padding: 56px 0 120px !important; }
    .i5-hero-inner { grid-template-columns: 1fr !important; gap: 52px !important; }
    .i5-hero-deco { padding: 28px 20px !important; }
    .i5-hero-title { font-size: clamp(44px, 11vw, 72px) !important; }
}

/* 344x882 대응: hero 버튼 2개를 한 줄 유지 */
@media (max-width: 380px) and (min-height: 820px) {
    .i5-hero-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        width: 100%;
    }
    .i5-hero .i5-btn-yellow,
    .i5-hero .i5-btn-ghost {
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap !important;
        justify-content: center !important;
        padding: 14px 10px !important;
        font-size: 14px !important;
    }
}

/* Mobile: hero SVG/deco 무조건 숨김 */
@media (max-width: 1024px) {
    .i5-hero-deco { display: none !important; }
    .i5-hero .i5-qr-svg { display: none !important; }
}