@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Pretendard:wght@400;500;600;700;800&display=swap');

:root {
    --archive-navy: #07142f;
    --archive-navy-2: #0d2146;
    --archive-blue: #376fff;
    --archive-sky: #74d8ff;
    --archive-mint: #5ee8c2;
    --archive-bg: #f5f8fc;
    --archive-line: #e2e8f2;
    --archive-text: #111c31;
    --archive-sub: #657189;
    --archive-white: #fff;
}

.archive-main,
.archive-main * { box-sizing: border-box; }
.archive-main { overflow: hidden; color: var(--archive-text); font-family: 'Pretendard', 'Inter', sans-serif; }
.archive-main a { text-decoration: none; }
.archive-main svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.archive-container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.archive-section { padding: 112px 0; }
.archive-section-head { margin-bottom: 54px; }
.archive-section-head--center { text-align: center; }
.archive-eyebrow { display: inline-block; margin-bottom: 14px; color: var(--archive-blue); font: 800 13px/1 'Inter', sans-serif; letter-spacing: .14em; }
.archive-section-head h2 { margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.25; letter-spacing: -.045em; }
.archive-section-head p { margin: 17px 0 0; color: var(--archive-sub); font-size: 17px; line-height: 1.75; }

.archive-hero { position: relative; min-height: 820px; padding: 130px 0 100px; background: var(--archive-navy); overflow: hidden; }
.archive-hero__grid,
.archive-final-cta__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(116,216,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(116,216,255,.055) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, #000, transparent 90%); }
.archive-hero__glow { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.archive-hero__glow--one { width: 720px; height: 720px; right: -220px; top: -220px; background: radial-gradient(circle, rgba(55,111,255,.27), transparent 68%); }
.archive-hero__glow--two { width: 560px; height: 560px; left: -220px; bottom: -240px; background: radial-gradient(circle, rgba(94,232,194,.14), transparent 70%); }
.archive-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 72px; padding-top: 100px;}
.archive-badge { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 25px; padding: 9px 15px; border: 1px solid rgba(116,216,255,.25); border-radius: 100px; background: rgba(116,216,255,.08); color: var(--archive-sky); font: 700 12px/1 'Inter', sans-serif; letter-spacing: .07em; }
.archive-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--archive-mint); box-shadow: 0 0 12px var(--archive-mint); }
.archive-hero__title { margin: 0; color: #fff; font-size: clamp(42px, 5vw, 64px); line-height: 1.17; letter-spacing: -.055em; }
.archive-hero__title em { display: inline-block; color: var(--archive-sky); font-style: normal; }
.archive-hero__description { max-width: 575px; margin: 26px 0 0; color: rgba(255,255,255,.66); font-size: 18px; line-height: 1.8; }
.archive-hero__actions { display: flex; gap: 12px; margin-top: 36px; }
.archive-btn { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 25px; border-radius: 10px; font-size: 15px; font-weight: 700; transition: transform .2s, box-shadow .2s, background .2s; }
.archive-btn svg { width: 18px; }
.archive-btn--primary { background: linear-gradient(135deg, var(--archive-sky), var(--archive-mint)); color: var(--archive-navy); box-shadow: 0 12px 34px rgba(94,232,194,.16); }
.archive-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(94,232,194,.25); }
.archive-btn--ghost { border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.86); background: rgba(255,255,255,.04); }
.archive-btn--ghost:hover { background: rgba(255,255,255,.09); }
.archive-hero__trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: rgba(255,255,255,.45); font-size: 12px; }

.archive-hero__visual { position: relative; padding: 42px 0 48px; }
.archive-dashboard { overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 19px; background: rgba(14,35,74,.88); box-shadow: 0 32px 90px rgba(0,0,0,.36); backdrop-filter: blur(14px); transform: perspective(1300px) rotateY(-5deg) rotateX(2deg); }
.archive-dashboard__top { height: 48px; padding: 0 15px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.36); font: 500 10px/1 'Inter', sans-serif; }
.archive-window-dots { display: flex; gap: 5px; }
.archive-window-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.16); }
.archive-dashboard__profile { margin-left: auto; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--archive-blue); color: #fff; font-size: 8px; font-weight: 700; }
.archive-dashboard__body { min-height: 430px; display: grid; grid-template-columns: 58px 1fr; }
.archive-dashboard__sidebar { padding: 17px 0; display: flex; flex-direction: column; align-items: center; gap: 23px; border-right: 1px solid rgba(255,255,255,.07); }
.archive-dashboard__logo { width: 31px; height: 31px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 9px; background: linear-gradient(135deg, var(--archive-sky), var(--archive-mint)); color: var(--archive-navy); font: 800 16px/1 'Inter', sans-serif; }
.archive-dashboard__sidebar span { width: 16px; height: 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; }
.archive-dashboard__sidebar span.is-active { border-color: var(--archive-sky); background: rgba(116,216,255,.16); }
.archive-dashboard__content { padding: 25px; }
.archive-dashboard__heading { display: flex; align-items: center; justify-content: space-between; }
.archive-dashboard__heading small { display: block; margin-bottom: 5px; color: var(--archive-sky); font: 700 8px/1 'Inter', sans-serif; letter-spacing: .16em; }
.archive-dashboard__heading strong { color: #fff; font-size: 17px; }
.archive-dashboard__heading button { border: 0; border-radius: 7px; padding: 9px 12px; background: var(--archive-blue); color: #fff; font-size: 10px; font-weight: 700; }
.archive-upload-zone { margin-top: 20px; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed rgba(116,216,255,.3); border-radius: 12px; background: rgba(116,216,255,.035); }
.archive-upload-zone__icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 10px; background: rgba(116,216,255,.1); color: var(--archive-sky); }
.archive-upload-zone__icon svg { width: 19px; }
.archive-upload-zone strong { margin-top: 10px; color: rgba(255,255,255,.78); font-size: 11px; }
.archive-upload-zone span { margin-top: 5px; color: rgba(255,255,255,.3); font-size: 8px; }
.archive-file-list { margin-top: 14px; display: grid; gap: 8px; }
.archive-file-row { min-width: 0; display: grid; grid-template-columns: 45px 1fr auto auto; gap: 11px; align-items: center; padding: 9px; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; background: rgba(255,255,255,.025); }
.archive-file-thumb { width: 45px; height: 32px; display: grid; place-items: center; border-radius: 6px; color: #fff; font-size: 8px; }
.archive-file-thumb--one { background: linear-gradient(135deg, #6e7ff6, #ef8ad3); }
.archive-file-thumb--two { background: linear-gradient(135deg, #43b7ca, #3170c8); }
.archive-file-info { min-width: 0; }
.archive-file-info strong { display: block; overflow: hidden; color: rgba(255,255,255,.74); font: 600 8px/1.4 'Inter', sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.archive-file-info span { color: rgba(255,255,255,.27); font-size: 7px; }
.archive-status { padding: 4px 7px; border-radius: 100px; background: rgba(94,232,194,.1); color: var(--archive-mint); font-size: 7px; }
.archive-file-row button { border: 1px solid rgba(255,255,255,.08); border-radius: 5px; padding: 6px 8px; background: transparent; color: rgba(255,255,255,.45); font-size: 7px; }
.archive-floating-card { position: absolute; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(11,29,61,.94); color: #fff; box-shadow: 0 18px 50px rgba(0,0,0,.34); backdrop-filter: blur(14px); }
.archive-floating-card--storage { left: -32px; bottom: 0; width: 180px; padding: 15px; }
.archive-floating-card--storage > span { color: rgba(255,255,255,.42); font-size: 8px; }
.archive-floating-card--storage strong { display: block; margin-top: 5px; font: 700 15px/1.3 'Inter', sans-serif; }
.archive-floating-card--storage small { color: rgba(255,255,255,.33); font-size: 8px; font-weight: 500; }
.archive-floating-card--storage > div { height: 4px; margin-top: 10px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.08); }
.archive-floating-card--storage i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--archive-blue), var(--archive-sky)); }
.archive-floating-card--link { right: -28px; top: 5px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.archive-floating-card__check { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: rgba(94,232,194,.12); color: var(--archive-mint); font-size: 11px; }
.archive-floating-card--link strong { display: block; font-size: 9px; }
.archive-floating-card--link small { display: block; margin-top: 3px; color: rgba(255,255,255,.36); font-size: 7px; }

.archive-problem { background: var(--archive-bg); }
.archive-problem__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.archive-problem-card { position: relative; padding: 31px; overflow: hidden; border: 1px solid var(--archive-line); border-radius: 18px; background: #fff; transition: transform .22s, box-shadow .22s, border-color .22s; }
.archive-problem-card:hover { transform: translateY(-5px); border-color: rgba(55,111,255,.28); box-shadow: 0 18px 45px rgba(31,56,104,.08); }
.archive-problem-card__number { position: absolute; right: 20px; top: 17px; color: #edf1f7; font: 800 36px/1 'Inter', sans-serif; }
.archive-icon-box { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: #eef3ff; color: var(--archive-blue); }
.archive-icon-box svg { width: 24px; }
.archive-problem-card h3 { margin: 23px 0 10px; font-size: 19px; }
.archive-problem-card p { margin: 0; color: var(--archive-sub); font-size: 14px; line-height: 1.75; }
.archive-problem__answer { margin-top: 28px; min-height: 106px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 25px 30px; border-radius: 18px; background: var(--archive-navy); color: #fff; }
.archive-problem__answer-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, var(--archive-sky), var(--archive-mint)); color: var(--archive-navy); font: 800 22px/1 'Inter', sans-serif; }
.archive-problem__answer strong { font-size: 18px; }
.archive-problem__answer p { margin: 5px 0 0; color: rgba(255,255,255,.52); font-size: 13px; }
.archive-problem__answer a { padding: 11px 17px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: rgba(255,255,255,.85); font-size: 13px; font-weight: 700; }

.archive-how { background: #fff; }
.archive-how__layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 85px; align-items: center; }
.archive-how__steps { display: grid; }
.archive-step { position: relative; display: grid; grid-template-columns: 50px 1fr; gap: 20px; padding: 0 0 36px; opacity: .48; }
.archive-step:not(:last-child)::after { content: ''; position: absolute; top: 51px; left: 24px; width: 1px; height: calc(100% - 45px); background: var(--archive-line); }
.archive-step__number { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--archive-line); border-radius: 50%; background: #fff; color: var(--archive-sub); font: 700 13px/1 'Inter', sans-serif; }
.archive-step.is-active { opacity: 1; }
.archive-step.is-active .archive-step__number { border-color: var(--archive-blue); background: var(--archive-blue); color: #fff; box-shadow: 0 0 0 7px rgba(55,111,255,.1); }
.archive-step h3 { margin: 2px 0 7px; font-size: 18px; }
.archive-step p { margin: 0; color: var(--archive-sub); font-size: 14px; line-height: 1.7; }
.archive-browser { overflow: hidden; border: 1px solid var(--archive-line); border-radius: 16px; background: #fff; box-shadow: 0 25px 70px rgba(30,54,96,.12); }
.archive-browser__bar { height: 45px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid var(--archive-line); background: #f8fafd; }
.archive-browser__bar > span { width: 7px; height: 7px; border-radius: 50%; background: #d7deea; }
.archive-browser__bar > div { width: 55%; margin: 0 auto; padding: 7px 12px; border: 1px solid #e7ebf2; border-radius: 6px; background: #fff; color: #9aa4b7; font: 500 8px/1 'Inter', sans-serif; text-align: center; }
.archive-browser__body { display: grid; grid-template-columns: 1fr .82fr; min-height: 350px; }
.archive-browser__editor { border-right: 1px solid var(--archive-line); }
.archive-browser__toolbar { height: 40px; display: flex; align-items: center; gap: 14px; padding: 0 14px; border-bottom: 1px solid var(--archive-line); color: #768198; font: 600 9px/1 'Inter', sans-serif; }
.archive-browser__toolbar i { height: 16px; width: 1px; background: var(--archive-line); }
.archive-browser__code { padding: 28px 18px; color: #4d5870; font: 500 8.5px/2.2 'Inter', monospace; }
.archive-browser__code b { display: inline-block; width: 20px; color: #c3cad6; font-weight: 400; }
.archive-browser__code .tag { color: #3f6ad8; }
.archive-browser__code .attr { color: #a453b5; }
.archive-browser__code .text { color: #2e987b; }
.archive-browser__code mark { padding: 2px 3px; border-radius: 3px; background: #eaf0ff; color: var(--archive-blue); }
.archive-browser__result { padding: 20px; display: grid; place-items: center; background: #f8fafd; }
.archive-browser__video { width: 100%; aspect-ratio: 4/5; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 9px; background: linear-gradient(150deg, #1e315d, #6382bb); color: rgba(255,255,255,.75); text-align: center; }
.archive-browser__play { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 13px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; font-size: 11px; }
.archive-browser__video span { font-size: 8px; }
.archive-how__success { width: fit-content; margin: 15px auto 0; padding: 9px 14px; border: 1px solid #dcebe7; border-radius: 100px; background: #f1fbf8; color: #438a79; font-size: 11px; font-weight: 600; }
.archive-how__success span { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 5px; border-radius: 50%; background: var(--archive-mint); color: var(--archive-navy); }

.archive-features { background: var(--archive-bg); }
.archive-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.archive-feature-card { min-height: 260px; padding: 30px; border: 1px solid var(--archive-line); border-radius: 18px; background: #fff; }
.archive-feature-card--wide { grid-column: span 2; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 30px; }
.archive-feature-card--dark { border-color: transparent; background: linear-gradient(140deg, var(--archive-navy), var(--archive-navy-2)); color: #fff; }
.archive-feature-card--accent { border-color: rgba(55,111,255,.18); background: linear-gradient(135deg, #edf3ff, #f7fbff); }
.archive-feature-card__label { color: var(--archive-blue); font: 800 10px/1 'Inter', sans-serif; letter-spacing: .14em; }
.archive-feature-card--dark .archive-feature-card__label { color: var(--archive-sky); }
.archive-feature-card h3 { margin: 16px 0 10px; font-size: 21px; }
.archive-feature-card p { margin: 0; color: var(--archive-sub); font-size: 14px; line-height: 1.7; }
.archive-feature-card--dark p { color: rgba(255,255,255,.54); }
.archive-feature-card ul { margin: 21px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.archive-feature-card li { color: rgba(255,255,255,.72); font-size: 12px; }
.archive-feature-card li::before { content: '✓'; margin-right: 8px; color: var(--archive-mint); }
.archive-feature-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: #eef3ff; color: var(--archive-blue); }
.archive-feature-icon svg { width: 24px; }
.archive-storage-visual { max-width: 260px; margin-left: auto; padding: 25px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.04); }
.archive-storage-visual__ring { width: 125px; height: 125px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 23px; border-radius: 50%; background: radial-gradient(circle closest-side, var(--archive-navy-2) 76%, transparent 77% 99%), conic-gradient(var(--archive-sky) 68%, rgba(255,255,255,.08) 0); }
.archive-storage-visual__ring strong { font: 800 26px/1 'Inter', sans-serif; }
.archive-storage-visual__ring span { margin-top: 5px; color: rgba(255,255,255,.4); font-size: 9px; }
.archive-storage-visual__bar { height: 5px; border-radius: 10px; background: rgba(255,255,255,.08); }
.archive-storage-visual__bar i { display: block; width: 68%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--archive-blue), var(--archive-sky)); }
.archive-storage-visual__meta { display: flex; justify-content: space-between; margin-top: 8px; color: rgba(255,255,255,.38); font-size: 8px; }
.archive-code-chip-list { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.archive-code-chip-list span { padding: 10px 13px; border: 1px solid rgba(55,111,255,.14); border-radius: 8px; background: #fff; color: var(--archive-blue); font: 600 11px/1 'Inter', sans-serif; box-shadow: 0 8px 20px rgba(55,111,255,.07); }

.archive-usecase { background: #fff; }
.archive-usecase__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.archive-usecase-card { overflow: hidden; border: 1px solid var(--archive-line); border-radius: 18px; background: #fff; transition: transform .22s, box-shadow .22s; }
.archive-usecase-card:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(28,53,99,.09); }
.archive-usecase-card__screen { height: 260px; display: grid; place-items: center; overflow: hidden; }
.archive-usecase-card__screen--product { background: linear-gradient(145deg, #edf2ff, #e7f8ff); }
.archive-usecase-card__screen--banner { background: #101c36; }
.archive-usecase-card__screen--board { background: linear-gradient(145deg, #f4f6fa, #e9eef7); }
.archive-phone { width: 122px; height: 220px; padding: 15px 10px; border: 6px solid #18243c; border-radius: 23px; background: #fff; box-shadow: 0 20px 35px rgba(24,36,60,.18); }
.archive-phone__notch { display: block; width: 35px; height: 5px; margin: -6px auto 11px; border-radius: 6px; background: #18243c; }
.archive-phone__video { height: 118px; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(150deg, #8ca3ff, #63d3d0); color: #fff; }
.archive-phone__video i { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; font-size: 8px; font-style: normal; }
.archive-phone b { display: block; height: 5px; margin-top: 9px; border-radius: 5px; background: #e7ebf2; }
.archive-phone b:nth-of-type(2) { width: 74%; }
.archive-phone b:nth-of-type(3) { width: 45%; }
.archive-banner-demo { width: 84%; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.12); background: radial-gradient(circle at 20% 20%, #315a8b, transparent 40%), linear-gradient(135deg, #0d1931, #152f52); color: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.archive-banner-demo span { font: 700 15px/1 'Inter', sans-serif; letter-spacing: .13em; }
.archive-banner-demo i { margin-top: 13px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.45); font: 500 7px/1 'Inter', sans-serif; font-style: normal; letter-spacing: .1em; }
.archive-board-demo { width: 78%; padding: 20px; border-radius: 11px; background: #fff; box-shadow: 0 18px 45px rgba(28,53,99,.12); }
.archive-board-demo > div { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf0f5; }
.archive-board-demo > div:last-child { border-bottom: 0; }
.archive-board-demo i { height: 34px; border-radius: 5px; background: linear-gradient(135deg, #b3c1e2, #d9e4f6); }
.archive-board-demo span { align-self: center; height: 6px; border-radius: 6px; background: #e7ebf2; }
.archive-usecase-card__content { padding: 25px; }
.archive-usecase-card__content span { color: var(--archive-blue); font: 700 11px/1 'Inter', sans-serif; }
.archive-usecase-card__content h3 { margin: 10px 0 9px; font-size: 19px; }
.archive-usecase-card__content p { margin: 0; color: var(--archive-sub); font-size: 13px; line-height: 1.7; }

.archive-pricing { background: var(--archive-bg); }
.archive-price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.archive-price-card { position: relative; padding: 34px 30px 30px; border: 1px solid var(--archive-line); border-radius: 20px; background: #fff; }
.archive-price-card--popular { transform: translateY(-10px); border: 2px solid var(--archive-blue); box-shadow: 0 24px 60px rgba(55,111,255,.14); }
.archive-price-card__popular-label { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); padding: 7px 15px; border-radius: 100px; background: var(--archive-blue); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.archive-price-card__head > span { color: var(--archive-blue); font: 800 10px/1 'Inter', sans-serif; letter-spacing: .14em; }
.archive-price-card__head h3 { margin: 12px 0 6px; font-size: 23px; }
.archive-price-card__head p { margin: 0; color: var(--archive-sub); font-size: 12px; }
.archive-price { display: flex; align-items: flex-end; gap: 6px; margin: 28px 0 25px; }
.archive-price strong { font: 800 38px/.95 'Inter', sans-serif; letter-spacing: -.04em; }
.archive-price span { color: var(--archive-sub); font-size: 12px; }
.archive-price-card ul { min-height: 160px; margin: 0 0 27px; padding: 23px 0 0; border-top: 1px solid var(--archive-line); list-style: none; display: grid; align-content: start; gap: 12px; }
.archive-price-card li { color: #4f5b70; font-size: 13px; }
.archive-price-card li::before { content: '✓'; margin-right: 9px; color: var(--archive-blue); font-weight: 700; }
.archive-price-card a { min-height: 49px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--archive-line); border-radius: 9px; font-size: 13px; font-weight: 700; }
.archive-price-card--popular a { border-color: var(--archive-blue); background: var(--archive-blue); color: #fff; }
.archive-pricing__notice { margin: 25px 0 0; color: #929cad; font-size: 11px; text-align: center; }

.archive-faq { background: #fff; }
.archive-faq__layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; }
.archive-faq .archive-section-head { margin: 0; }
.archive-faq .archive-section-head > a { display: inline-block; margin-top: 25px; color: var(--archive-sub); font-size: 13px; }
.archive-faq .archive-section-head > a span { color: var(--archive-blue); font-weight: 700; }
.archive-faq__list { border-top: 1px solid var(--archive-line); }
.archive-faq details { border-bottom: 1px solid var(--archive-line); }
.archive-faq summary { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 700; }
.archive-faq summary::-webkit-details-marker { display: none; }
.archive-faq summary span { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.archive-faq summary span::before,
.archive-faq summary span::after { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 1px; background: #7e899e; transform: translate(-50%, -50%); }
.archive-faq summary span::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s; }
.archive-faq details[open] summary span::after { transform: translate(-50%, -50%) rotate(0); }
.archive-faq details p { margin: -8px 0 0; padding: 0 38px 27px 0; color: var(--archive-sub); font-size: 13px; line-height: 1.8; }

.archive-final-cta { position: relative; padding: 92px 0; overflow: hidden; background: var(--archive-navy); color: #fff; }
.archive-final-cta__glow { position: absolute; right: -120px; top: -220px; width: 650px; height: 650px; border-radius: 50%; background: radial-gradient(circle, rgba(55,111,255,.32), transparent 68%); }
.archive-final-cta__inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.archive-final-cta__label { color: var(--archive-sky); font: 800 11px/1 'Inter', sans-serif; letter-spacing: .15em; }
.archive-final-cta h2 { margin: 15px 0 14px; font-size: clamp(34px, 4vw, 50px); line-height: 1.2; letter-spacing: -.045em; }
.archive-final-cta p { margin: 0; color: rgba(255,255,255,.52); font-size: 15px; }
.archive-final-cta__action { flex-shrink: 0; text-align: center; }
.archive-final-cta__action span { display: block; margin-top: 13px; color: rgba(255,255,255,.35); font-size: 11px; }

@media (max-width: 1050px) {
    .archive-hero__inner { gap: 35px; }
    .archive-floating-card--link { right: 0; }
    .archive-how__layout { gap: 45px; }
    .archive-faq__layout { gap: 45px; }
}

@media (max-width: 900px) {
    .archive-section { padding: 88px 0; }
    .archive-hero { min-height: auto; padding: 120px 0 85px; }
    .archive-hero__inner { grid-template-columns: 1fr; padding-top: 50px;}
    .archive-hero__content { text-align: center; }
    .archive-hero__description { margin-left: auto; margin-right: auto; }
    .archive-hero__actions,
    .archive-hero__trust { justify-content: center; }
    .archive-hero__visual { width: min(650px, 100%); margin: 0 auto; }
    .archive-problem__grid,
    .archive-usecase__grid,
    .archive-price-grid { grid-template-columns: 1fr; }
    .archive-price-card--popular { transform: none; }
    .archive-how__layout,
    .archive-faq__layout { grid-template-columns: 1fr; }
    .archive-how__steps { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .archive-step { grid-template-columns: 1fr; padding: 0; text-align: center; }
    .archive-step__number { margin: 0 auto; }
    .archive-step:not(:last-child)::after { display: none; }
    .archive-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .archive-feature-card--wide { grid-column: span 2; }
    .archive-final-cta__inner { flex-direction: column; text-align: center; }
}

@media (max-width: 640px) {
    .archive-container { width: min(100% - 32px, 1180px); padding-top: 0;}
    .archive-section { padding: 72px 0; }
    .archive-section-head { margin-bottom: 38px; }
    .archive-section-head h2 { font-size: 31px; }
    .archive-section-head p { font-size: 15px; }
    .archive-hero { padding: 105px 0 70px; }
    .archive-hero__title { font-size: 39px; }
    .archive-hero__description { font-size: 15px; }
    .archive-hero__actions { flex-direction: column; }
    .archive-btn { width: 100%; }
    .archive-hero__trust { display: grid; gap: 8px; }
    .archive-dashboard { transform: none; }
    .archive-dashboard__body { min-height: 370px; grid-template-columns: 43px 1fr; }
    .archive-dashboard__content { padding: 16px 12px; }
    .archive-dashboard__sidebar { gap: 18px; }
    .archive-dashboard__heading button { font-size: 0; }
    .archive-dashboard__heading button::after { content: '+ 업로드'; font-size: 9px; }
    .archive-file-row { grid-template-columns: 38px 1fr auto; }
    .archive-file-thumb { width: 38px; }
    .archive-file-row button { display: none; }
    .archive-floating-card--storage { left: 6px; }
    .archive-floating-card--link { right: 3px; top: 12px; }
    .archive-problem-card { padding: 26px; }
    .archive-problem__answer { grid-template-columns: auto 1fr; padding: 22px; }
    .archive-problem__answer a { grid-column: 1 / -1; text-align: center; }
    .archive-how__steps { grid-template-columns: 1fr; }
    .archive-step { grid-template-columns: 50px 1fr; text-align: left; }
    .archive-step__number { margin: 0; }
    .archive-browser__body { grid-template-columns: 1fr; }
    .archive-browser__editor { border-right: 0; border-bottom: 1px solid var(--archive-line); }
    .archive-browser__result { display: none; }
    .archive-feature-grid { grid-template-columns: 1fr; }
    .archive-feature-card--wide { grid-column: span 1; grid-template-columns: 1fr; }
    .archive-storage-visual { width: 100%; margin: 0; }
    .archive-code-chip-list { justify-content: flex-start; }
    .archive-usecase-card__screen { height: 230px; }
    .archive-faq summary { font-size: 14px; }
    .archive-final-cta { padding: 72px 0; }
    .archive-final-cta h2 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .archive-main * { scroll-behavior: auto !important; transition: none !important; }
}


/*
|--------------------------------------------------------------------------
| 쇼핑몰 분석 소개
|--------------------------------------------------------------------------
*/

.archive-analytics-intro {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(124, 103, 255, 0.08),
            transparent 35%
        ),
        radial-gradient(
            circle at 88% 78%,
            rgba(71, 176, 255, 0.08),
            transparent 32%
        ),
        #f7f8fa;
}

.archive-analytics-intro__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
    background-image:
        linear-gradient(
            rgba(31, 37, 43, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(31, 37, 43, 0.035) 1px,
            transparent 1px
        );
    background-size: 42px 42px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 16%,
            #000 84%,
            transparent
        );
}

.archive-analytics-intro__layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(520px, 0.78fr);
    gap: 78px;
    align-items: center;
}

.archive-analytics-intro__content {
    position: relative;
    z-index: 3;
}

.archive-analytics-intro__content h2 {
    margin:
        20px
        0
        22px;
    color: #16191d;
    font-size: clamp(
        38px,
        4vw,
        60px
    );
    line-height: 1.16;
    letter-spacing: -0.055em;
}

.archive-analytics-intro__content h2 em {
    color: #6554e8;
    font-style: normal;
}

.archive-analytics-intro__description {
    max-width: 610px;
    margin: 0;
    color: #656c75;
    font-size: 17px;
    line-height: 1.85;
    letter-spacing: -0.025em;
}

.archive-analytics-intro__features {
    display: grid;
    gap: 20px;
    margin-top: 38px;
}

.archive-analytics-intro__feature {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    align-items: flex-start;
}

.archive-analytics-intro__feature-icon {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(101, 84, 232, 0.14);
    border-radius: 15px;
    background: rgba(101, 84, 232, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.archive-analytics-intro__feature-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #6554e8;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.archive-analytics-intro__feature strong {
    display: block;
    margin-bottom: 5px;
    color: #20242a;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.archive-analytics-intro__feature p {
    margin: 0;
    color: #7a818a;
    font-size: 13px;
    line-height: 1.65;
    letter-spacing: -0.02em;
}

.archive-analytics-intro__notice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    max-width: 570px;
    margin-top: 30px;
    padding: 15px 17px;
    border: 1px solid rgba(37, 42, 48, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
        0 12px 30px
        rgba(34, 40, 48, 0.045);
    backdrop-filter: blur(12px);
}

.archive-analytics-intro__notice > span {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    color: #fff;
    background: #6554e8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

.archive-analytics-intro__notice p {
    margin: 0;
    color: #656c75;
    font-size: 13px;
    line-height: 1.65;
    letter-spacing: -0.02em;
}

.archive-analytics-intro__button {
    margin-top: 28px;
}

/*
|--------------------------------------------------------------------------
| 분석 대시보드 미리보기
|--------------------------------------------------------------------------
*/

.archive-analytics-preview {
    position: relative;
    min-width: 0;
    padding:
        52px
        16px
        48px;
}

.archive-analytics-preview__window {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(31, 36, 43, 0.09);
    border-radius: 24px;
    background: #fff;
    box-shadow:
        0 45px 100px rgba(39, 45, 56, 0.15),
        0 12px 30px rgba(39, 45, 56, 0.08);
    transform:
        perspective(1600px)
        rotateY(-3deg)
        rotateX(1deg);
    transform-origin: center;
}

.archive-analytics-preview__top {
    height: 51px;
    padding: 0 18px;
    border-bottom: 1px solid #edf0f3;
    background: #fbfbfc;
    display: grid;
    grid-template-columns:
        90px
        minmax(0, 1fr)
        auto;
    align-items: center;
    gap: 12px;
}

.archive-analytics-preview__top > span {
    overflow: hidden;
    color: #989ea7;
    font-size: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.archive-analytics-preview__dots {
    display: flex;
    align-items: center;
    gap: 5px;
}

.archive-analytics-preview__dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d5d9de;
}

.archive-analytics-preview__period {
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid #e7e9ed;
    border-radius: 8px;
    color: #6f7680;
    background: #fff;
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
}

.archive-analytics-preview__body {
    padding: 22px;
    background: #f7f8fa;
}

.archive-analytics-preview__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.archive-analytics-preview__title div {
    display: grid;
    gap: 4px;
}

.archive-analytics-preview__title small {
    color: #9ca2aa;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.12em;
}

.archive-analytics-preview__title strong {
    color: #24282e;
    font-size: 18px;
    letter-spacing: -0.04em;
}

.archive-analytics-preview__title > span {
    min-height: 27px;
    padding: 0 10px;
    border-radius: 999px;
    color: #17a675;
    background: rgba(23, 166, 117, 0.09);
    display: inline-flex;
    align-items: center;
    font-size: 8px;
    font-weight: 750;
}

.archive-analytics-preview__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.archive-analytics-preview__summary article {
    min-width: 0;
    padding: 14px;
    border: 1px solid #eceef1;
    border-radius: 13px;
    background: #fff;
}

.archive-analytics-preview__summary article > span {
    display: block;
    overflow: hidden;
    color: #8a919a;
    font-size: 8px;
    font-weight: 650;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.archive-analytics-preview__summary article > strong {
    display: block;
    margin-top: 7px;
    color: #252a30;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.archive-analytics-preview__summary article > small {
    display: block;
    margin-top: 7px;
    font-size: 8px;
    font-weight: 750;
}

.archive-analytics-preview__summary .is-positive {
    color: #1aae7a;
}

.archive-analytics-preview__main {
    display: grid;
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(170px, 0.75fr);
    gap: 10px;
    margin-top: 10px;
}

.archive-analytics-preview__chart,
.archive-analytics-preview__conversion,
.archive-analytics-preview__products {
    border: 1px solid #eceef1;
    border-radius: 14px;
    background: #fff;
}

.archive-analytics-preview__chart {
    min-width: 0;
    padding: 15px;
}

.archive-analytics-preview__chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.archive-analytics-preview__chart-head > div:first-child {
    display: grid;
    gap: 3px;
}

.archive-analytics-preview__chart-head strong {
    color: #30353c;
    font-size: 11px;
}

.archive-analytics-preview__chart-head span {
    color: #9298a1;
    font-size: 7px;
}

.archive-analytics-preview__chart-head > div:last-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.archive-analytics-preview__chart-head > div:last-child span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.archive-analytics-preview__legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6554e8;
}

.archive-analytics-preview__legend-dot--light {
    background: #aeb6c1;
}

.archive-analytics-preview__chart-area {
    position: relative;
    height: 156px;
    margin-top: 9px;
    padding-bottom: 19px;
}

.archive-analytics-preview__chart-line {
    position: absolute;
    right: 0;
    left: 0;
    height: 1px;
    background: #f0f1f3;
}

.archive-analytics-preview__chart-line--one {
    top: 10%;
}

.archive-analytics-preview__chart-line--two {
    top: 35%;
}

.archive-analytics-preview__chart-line--three {
    top: 60%;
}

.archive-analytics-preview__chart-line--four {
    top: 85%;
}

.archive-analytics-preview__chart-area svg {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(100% - 19px);
    overflow: visible;
}

.archive-analytics-preview__polyline {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.archive-analytics-preview__polyline--one {
    stroke: #6554e8;
}

.archive-analytics-preview__polyline--two {
    stroke: #b1b9c4;
}

.archive-analytics-preview__chart-labels {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
}

.archive-analytics-preview__chart-labels span {
    color: #a0a6ae;
    font-size: 7px;
}

.archive-analytics-preview__conversion {
    padding: 15px;
}

.archive-analytics-preview__conversion-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.archive-analytics-preview__conversion-head strong {
    color: #30353c;
    font-size: 11px;
}

.archive-analytics-preview__conversion-head span {
    color: #9ba1a9;
    font-size: 7px;
}

.archive-analytics-preview__conversion-item {
    margin-top: 20px;
}

.archive-analytics-preview__conversion-item > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}

.archive-analytics-preview__conversion-item span {
    color: #777e87;
    font-size: 8px;
}

.archive-analytics-preview__conversion-item strong {
    color: #363b42;
    font-size: 10px;
}

.archive-analytics-preview__conversion-item > i {
    display: block;
    height: 6px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #eff1f4;
}

.archive-analytics-preview__conversion-item > i b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #6554e8,
            #8b7df2
        );
}

.archive-analytics-preview__products {
    margin-top: 10px;
    padding: 15px;
}

.archive-analytics-preview__products-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.archive-analytics-preview__products-head strong {
    color: #30353c;
    font-size: 11px;
}

.archive-analytics-preview__products-head > span {
    color: #9ba1a9;
    font-size: 8px;
}

.archive-analytics-preview__product-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1.45fr)
        repeat(3, minmax(68px, 0.6fr));
    gap: 10px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #f0f1f3;
}

.archive-analytics-preview__product-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.archive-analytics-preview__product-row > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.archive-analytics-preview__product-row > div > i {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    color: #6554e8;
    background: rgba(101, 84, 232, 0.09);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-style: normal;
    font-weight: 800;
}

.archive-analytics-preview__product-row > div > span,
.archive-analytics-preview__product-row > span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.archive-analytics-preview__product-row strong {
    overflow: hidden;
    color: #42474e;
    font-size: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.archive-analytics-preview__product-row small {
    color: #a0a6ad;
    font-size: 7px;
}

.archive-analytics-preview__product-row > span {
    text-align: right;
}

/*
|--------------------------------------------------------------------------
| 플로팅 정보
|--------------------------------------------------------------------------
*/

.archive-analytics-intro__floating {
    position: absolute;
    z-index: 4;
    border: 1px solid rgba(36, 42, 49, 0.08);
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 22px 50px rgba(33, 39, 49, 0.14);
    backdrop-filter: blur(16px);
}

.archive-analytics-intro__floating--conversion {
    top: 12px;
    right: -11px;
    min-width: 132px;
    padding: 15px 17px;
    border-radius: 17px;
}

.archive-analytics-intro__floating--conversion span,
.archive-analytics-intro__floating--conversion small {
    display: block;
    color: #8e949d;
    font-size: 8px;
}

.archive-analytics-intro__floating--conversion strong {
    display: block;
    margin: 6px 0;
    color: #6554e8;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.archive-analytics-intro__floating--status {
    right: 26px;
    bottom: 2px;
    max-width: 270px;
    padding: 13px 15px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.archive-analytics-intro__floating--status > i {
    flex: 0 0 auto;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    color: #fff;
    background: #1eae7b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.archive-analytics-intro__floating--status div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.archive-analytics-intro__floating--status strong {
    color: #30353b;
    font-size: 10px;
}

.archive-analytics-intro__floating--status span {
    overflow: hidden;
    color: #969ca4;
    font-size: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*
|--------------------------------------------------------------------------
| 반응형
|--------------------------------------------------------------------------
*/

@media (max-width: 1280px) {
    .archive-analytics-intro__layout {
        grid-template-columns:
            minmax(0, 0.82fr)
            minmax(540px, 1.18fr);
        gap: 48px;
    }

    .archive-analytics-preview {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (max-width: 1080px) {
    .archive-analytics-intro__layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .archive-analytics-intro__content {
        max-width: 730px;
    }

    .archive-analytics-intro__features {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .archive-analytics-intro__feature {
        grid-template-columns: 1fr;
        padding: 20px;
        border: 1px solid rgba(31, 36, 43, 0.07);
        border-radius: 17px;
        background: rgba(255, 255, 255, 0.7);
    }

    .archive-analytics-preview {
        width: min(100%, 820px);
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .archive-analytics-intro__content h2 {
        margin-top: 14px;
        font-size: 35px;
        line-height: 1.2;
    }

    .archive-analytics-intro__description {
        font-size: 15px;
        line-height: 1.75;
    }

    .archive-analytics-intro__features {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 28px;
    }

    .archive-analytics-intro__feature {
        grid-template-columns: 43px minmax(0, 1fr);
        padding: 15px;
    }

    .archive-analytics-intro__feature-icon {
        width: 43px;
        height: 43px;
        border-radius: 13px;
    }

    .archive-analytics-intro__notice {
        margin-top: 20px;
    }

    .archive-analytics-preview {
        padding:
            24px
            0
            50px;
    }

    .archive-analytics-preview__window {
        border-radius: 18px;
        transform: none;
    }

    .archive-analytics-preview__top {
        grid-template-columns:
            55px
            minmax(0, 1fr)
            auto;
        height: 43px;
        padding: 0 12px;
    }

    .archive-analytics-preview__period {
        min-height: 23px;
        padding: 0 7px;
        font-size: 7px;
    }

    .archive-analytics-preview__body {
        padding: 13px;
    }

    .archive-analytics-preview__summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 13px;
    }

    .archive-analytics-preview__summary article {
        padding: 11px;
    }

    .archive-analytics-preview__summary article > strong {
        font-size: 17px;
    }

    .archive-analytics-preview__main {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-top: 7px;
    }

    .archive-analytics-preview__conversion {
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 9px;
    }

    .archive-analytics-preview__conversion-head {
        grid-column: 1 / -1;
    }

    .archive-analytics-preview__conversion-item {
        min-width: 0;
        margin-top: 4px;
    }

    .archive-analytics-preview__conversion-item > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .archive-analytics-preview__chart-area {
        height: 130px;
    }

    .archive-analytics-preview__products {
        margin-top: 7px;
        padding: 12px;
    }

    .archive-analytics-preview__product-row {
        grid-template-columns:
            minmax(0, 1.5fr)
            repeat(3, minmax(43px, 0.55fr));
        gap: 5px;
    }

    .archive-analytics-preview__product-row > div > i {
        display: none;
    }

    .archive-analytics-preview__product-row strong {
        font-size: 7px;
    }

    .archive-analytics-preview__product-row small {
        font-size: 6px;
    }

    .archive-analytics-intro__floating--conversion {
        top: 0;
        right: 8px;
        min-width: 112px;
        padding: 12px 14px;
    }

    .archive-analytics-intro__floating--conversion strong {
        font-size: 20px;
    }

    .archive-analytics-intro__floating--status {
        right: 10px;
        bottom: 3px;
        left: 10px;
        max-width: none;
    }
}

@media (max-width: 479px) {
    .archive-analytics-intro__content h2 {
        font-size: 31px;
    }

    .archive-analytics-intro__button {
        width: 100%;
        justify-content: center;
    }

    .archive-analytics-preview__summary article:nth-child(2),
    .archive-analytics-preview__summary article:nth-child(3) {
        display: none;
    }

    .archive-analytics-preview__summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .archive-analytics-preview__chart-head > div:last-child {
        display: none;
    }

    .archive-analytics-preview__conversion {
        grid-template-columns: 1fr;
    }

    .archive-analytics-preview__conversion-item {
        display: none;
    }

    .archive-analytics-preview__conversion-item:first-of-type {
        display: block;
    }

    .archive-analytics-preview__product-row {
        grid-template-columns:
            minmax(0, 1fr)
            repeat(2, minmax(42px, 0.45fr));
    }

    .archive-analytics-preview__product-row > span:nth-last-child(3) {
        display: none;
    }

    .archive-analytics-intro__floating--conversion {
        display: none;
    }
}