/* ==========================================================================
   싸바리 박스 제작 랜딩 (2026) — Figma DAMDApackage / [4K] Ssabari 기준
   데스크톱: 4K 프레임(3840) 수치를 --u(=100vw/3840, 최대 1px)로 비례 렌더 —
   어떤 창 폭에서도 [4K] 아트보드와 동일한 비율. 모바일(≤900): [MO] 실측.
   이미지: img2026/ssabari/ (Figma 원본 에셋)
   ========================================================================== */

#body-wrapper.sb-wrap {
    background: #fff;
    max-width: 3840px;
    margin: 0 auto;
    padding-bottom: 0;
    /* 고정 헤더(시안 FIXED 그룹) 높이만큼 본문을 내림 — JS가 --sb-hd에 실측값 주입 */
    padding-top: var(--sb-hd, calc(var(--u) * 162));
    /* 4K 디자인 px → 화면 px 비례 단위 (3840 초과 화면은 1:1 고정) */
    --u: min(calc(100vw / 3840), 1px);
    --sb-ink: #191919;
    --sb-sub: #4A4A4A;
    --sb-muted: #8B8B8B;
    --sb-line: #DCDCDC;
    --sb-soft: #F5F5F5;
    --sb-green: #1F8E56;
    --sb-green-light: #E8F5EE;
    color: var(--sb-ink);
}

.sb-wrap #body-section { overflow-x: clip; }

.sb-center { text-align: center; }

/* ---------- 알약 버튼 (4K 실측 2종) ---------- */
/* 대형(배너·포트폴리오 버튼): 텍스트 28 SemiBold lh1.45 + 아이콘 32, 패딩 24/16/16/16, 간격 8 → h75 */
.sb-pill {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 8);
    padding: calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 24);
    border-radius: calc(var(--u) * 100);
    background: rgba(245, 245, 245, .7);
    border: 1px solid var(--sb-line);
    backdrop-filter: blur(calc(var(--u) * 25));
    -webkit-backdrop-filter: blur(calc(var(--u) * 25));
    color: var(--sb-ink);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
    line-height: 1.45;
    transition: transform .25s ease, box-shadow .25s ease;
}

.sb-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .14); }

.sb-pill-arrow {
    display: inline-block;
    width: calc(var(--u) * 32);
    height: calc(var(--u) * 32);
    flex: 0 0 calc(var(--u) * 32);
    background: url("../../img2026/ssabari/icon-arrow.svg") center/contain no-repeat;
}

/* 소형 글래스(히어로·시딩키트, 사진 위): 텍스트 18 Bold lh1.65 + 아이콘 32, 패딩 16/8/8/8 */
.sb-pill-glass {
    background: rgba(245, 245, 245, .15);
    border-color: #8B8B8B;
    color: #fff;
    font-size: calc(var(--u) * 18);
    font-weight: 700;
    line-height: 1.65;
    padding: calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 16);
}

/* 배너 CTA: 대형 + 글래스 배경 (4K: 386×75, 텍스트 28 SemiBold, 보더 #DCDCDC) */
.sb-banner .sb-pill-glass {
    border-color: var(--sb-line);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
    line-height: 1.45;
    padding: calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 24);
}

/* 유형 서브타이틀 (그린 텍스트) */
.sb-chip-text {
    color: var(--sb-green);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
    line-height: 1.45;
}

.sb-dots { display: none; }

/* 헤더: 공용 header-main.css 사용.
   랜딩 래퍼는 와이드에서 zoom을 무효화하므로 헤더 단위(--uh)를 비례값으로 재정의 */
@media (min-width: 1921px) {
    .sb-wrap #header2026 { --uh: min(calc(var(--damda-vw, 100vw) / 3840), 1px); }
}

/* ==========================================================================
   1. 히어로 — 4K: 사진 밴드 3808×1080(마진 16), 텍스트 x972
   타이틀 64 SemiBold, 카피 28 SemiBold #DCDCDC(폭 701), CTA 소형 글래스
   ========================================================================== */
.sb-hero {
    position: relative;
    height: calc(var(--u) * 1080);
    margin: 0 calc(var(--u) * 16);
    overflow: hidden;
}

.sb-hero-media {
    position: absolute;
    inset: 0;
    background-color: #837a6d;
    background-image: url("../../img2026/ssabari/hero.jpg");
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 calc(var(--u) * 250) rgba(0, 0, 0, .1);
}

.sb-hero-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    /* 시안 좌표 972u는 페이지 기준 — .sb-hero가 이미 16u 안쪽에서 시작하므로
       패딩은 972-16=956u (kit 히어로와 같은 텍스트 열) */
    padding-left: calc(var(--u) * 956);
    padding-top: calc(var(--u) * 274);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sb-hero-title {
    color: #fff;
    font-size: calc(var(--u) * 64);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.sb-hero-copy {
    margin-top: calc(var(--u) * 24);
    max-width: calc(var(--u) * 701);
    color: var(--sb-line);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
    line-height: 1.45;
}

/* 히어로 CTA — 시안 개정(nav-contact 224×54): 텍스트 22 Bold, 본문 아래 56u */
.sb-hero .sb-pill { margin-top: calc(var(--u) * 56); }

.sb-hero .sb-pill-glass { font-size: calc(var(--u) * 22); }

/* ==========================================================================
   2. 고객 질문 챗버블 — 4K 실측(424:1689): 섹션 970(히어로끝~강점 헤딩)
   버블1 515×190 @(중앙-467, 241) / 버블2 453×190 @(중앙+14, 390) — 모서리 겹침
   흰 배경 + 보더 1px #E4E4E4 + r24, 텍스트 Heading2/4K 40/135 #191919
   ========================================================================== */
.sb-question {
    position: relative;
    height: calc(var(--u) * 970);
}

.sb-bubble {
    position: absolute;
    display: flex;
    align-items: center;
    height: calc(var(--u) * 190);
    background: #fff;
    border: 1px solid #E4E4E4;
    border-radius: calc(var(--u) * 24);
    padding: 0 calc(var(--u) * 40);
    /* 토큰 Heading2/4K=40 SemiBold — 브라우저 Pretendard가 Figma보다 넓게 렌더되어 36으로 보정(버블 폭 유지) */
    font-size: calc(var(--u) * 36);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.sb-question .sb-bubble:first-child {
    left: calc(50% - var(--u) * 467);
    top: calc(var(--u) * 241);
    width: calc(var(--u) * 515);
}

.sb-bubble-offset {
    left: calc(50% + var(--u) * 14);
    top: calc(var(--u) * 390);
    width: calc(var(--u) * 453);
    z-index: 1;
}

/* ==========================================================================
   3. 강점 카드 — 4K: 헤딩 64, 메인 940×919, 사이드 438², gap 40, r40
   ========================================================================== */
.sb-benefit {
    width: calc(var(--u) * 1417);
    margin: 0 auto;
    /* 헤딩 y2212 = 챗버블 섹션 끝 — 추가 여백 없음 (4K 실측) */
    padding-top: 0;
}

.sb-benefit-title {
    text-align: center;
    font-size: calc(var(--u) * 64);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.sb-benefit-title em { font-style: normal; color: var(--sb-green); }

.sb-benefit-grid {
    /* 카드 y2464 − 헤딩끝 y2384 = 80 (4K 실측) */
    margin-top: calc(var(--u) * 80);
    display: grid;
    grid-template-columns: calc(var(--u) * 940) calc(var(--u) * 438);
    grid-template-rows: calc(var(--u) * 438) calc(var(--u) * 438);
    gap: calc(var(--u) * 40) calc(var(--u) * 39);
}

.sb-benefit-card {
    position: relative;
    background: var(--sb-soft);
    border: 1px solid var(--sb-line);
    border-radius: calc(var(--u) * 40);
    padding: calc(var(--u) * 56);
    overflow: hidden;
}

.sb-benefit-main {
    grid-row: 1 / span 2;
    height: calc(var(--u) * 919);
    padding: calc(var(--u) * 72);
}

.sb-benefit-label {
    color: var(--sb-sub);
    font-size: calc(var(--u) * 28);
    line-height: 1.45;
}

.sb-benefit-main .sb-benefit-label { font-weight: 600; }

.sb-benefit-heading {
    display: block;
    margin-top: calc(var(--u) * 8);
    font-size: calc(var(--u) * 40);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

/* 4K 실측: 원은 중앙이 아니라 카드 우측 정렬 (right 72, top 338) */
.sb-benefit-circle {
    position: absolute;
    right: calc(var(--u) * 72);
    top: calc(var(--u) * 338);
    width: calc(var(--u) * 500);
    height: calc(var(--u) * 500);
    border-radius: 50%;
    background: var(--sb-green);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: calc(var(--u) * 120);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-family: var(--font-kr);
}

.sb-benefit-since {
    position: absolute;
    left: calc(var(--u) * 72);
    bottom: calc(var(--u) * 81);
    color: var(--sb-muted);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
}

.sb-benefit-ico {
    width: calc(var(--u) * 72);
    height: calc(var(--u) * 72);
    margin-top: calc(var(--u) * 81);
    display: block;
}

.sb-benefit-card:not(.sb-benefit-main) .sb-benefit-heading { margin-top: calc(var(--u) * 16); }

/* ==========================================================================
   4. 싸바리 유형(category) — 4K: 칼럼 1896, 카드 605, 이미지 605×710 r40
   ========================================================================== */
.sb-types {
    width: calc(var(--u) * 1896);
    margin: 0 auto;
    padding-top: calc(var(--u) * 430);
}

.sb-types-title {
    text-align: center;
    font-size: calc(var(--u) * 64);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.sb-types-title em { font-style: normal; color: var(--sb-green); }

/* 그룹 높이 1085 고정(4K) — 카드 텍스트 길이(DB)와 무관하게 시안 리듬 유지 */
.sb-type-group { margin-top: calc(var(--u) * 240); height: calc(var(--u) * 1085); text-align: center; }

.sb-type-group:first-child { margin-top: calc(var(--u) * 160); }

.sb-type-heading {
    margin-top: calc(var(--u) * 8);
    font-size: calc(var(--u) * 40);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.sb-card-grid {
    margin-top: calc(var(--u) * 72);
    display: grid;
    grid-template-columns: repeat(3, calc(var(--u) * 605));
    justify-content: space-between;
    gap: calc(var(--u) * 40);
    text-align: left;
}

.sb-card { display: block; }

.sb-card-media {
    width: calc(var(--u) * 605);
    height: calc(var(--u) * 710);
    border-radius: calc(var(--u) * 40);
    overflow: hidden;
    background: #F1F3F1;
    box-shadow: inset 0 0 calc(var(--u) * 20) rgba(0, 0, 0, .05);
}

.sb-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.sb-card:hover .sb-card-media img { transform: scale(1.04); }

.sb-card-title {
    display: block;
    margin-top: calc(var(--u) * 40);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.01em;
}

.sb-card-desc {
    margin-top: calc(var(--u) * 16);
    color: var(--sb-sub);
    font-size: calc(var(--u) * 22);
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sb-card-more {
    display: inline-block;
    margin-top: calc(var(--u) * 8);
    color: var(--sb-muted);
    font-size: calc(var(--u) * 15);
    line-height: 1.5;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sb-types .sb-center { margin-top: calc(var(--u) * 160); }

.sb-types-mo { display: none; }

.sb-types-btn-mo { display: none; }

/* ==========================================================================
   5. 시딩키트 다크 배너 — 4K: 3808×560, 텍스트 40 x972, CTA 소형 글래스
   ========================================================================== */
.sb-seeding {
    margin: calc(var(--u) * 241) calc(var(--u) * 16) 0;
    height: calc(var(--u) * 560);
    position: relative;
    background-color: #0F0F11;
    background-image: url("../../img2026/ssabari/bar.jpg");
    background-size: cover;
    background-position: center;
}

.sb-seeding-inner {
    position: absolute;
    left: calc(var(--u) * 972);
    top: calc(var(--u) * 210);
}

.sb-seeding-title {
    color: #fff;
    font-size: calc(var(--u) * 40);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.sb-seeding-cta { margin-top: calc(var(--u) * 16); }

/* ==========================================================================
   6. 다 해드려요 + 맡기면 달라요 — 4K 실측
   ========================================================================== */
.sb-wedo { padding-top: calc(var(--u) * 429); }

.sb-wedo-head {
    position: relative;
    text-align: center;
}

/* 파스텔 페이드 밴드 (3808×434, 64.4%→#E8F5EE) — 헤딩·칩 뒤 */
.sb-wedo-head::before {
    content: "";
    position: absolute;
    left: calc(var(--u) * 16);
    right: calc(var(--u) * 16);
    top: 0;
    height: calc(var(--u) * 434);
    background: linear-gradient(180deg, rgba(232, 245, 238, 0) 64.4%, #E8F5EE 100%);
    pointer-events: none;
}

.sb-wedo-lead {
    position: relative;
    font-size: calc(var(--u) * 64);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.sb-wedo-lead em { font-style: normal; color: var(--sb-green); display: block; }

.sb-wedo-chips {
    position: relative;
    list-style: none;
    margin: calc(var(--u) * 39) auto 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--u) * 24);
}

.sb-wedo-chips li {
    padding: calc(var(--u) * 8) calc(var(--u) * 16);
    border-radius: calc(var(--u) * 8);
    background: rgba(232, 245, 238, .5);
    border: 1px solid var(--sb-green-light);
    backdrop-filter: blur(calc(var(--u) * 10));
    -webkit-backdrop-filter: blur(calc(var(--u) * 10));
    color: var(--sb-green);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
    line-height: 1.45;
}

.sb-wedo-quality {
    margin: 0 auto;
    padding-top: calc(var(--u) * 370);
    text-align: center;
}

/* "왜 그럴까요?" — 데스크톱: 그린 텍스트 40 (박스 없음) */
.sb-chip-box {
    display: inline-block;
    color: var(--sb-green);
    font-size: calc(var(--u) * 40);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

/* 대형 헤딩 — 4K: 160 Bold lh1.3 올블랙 */
.sb-wedo-title {
    margin-top: calc(var(--u) * 32);
    font-size: calc(var(--u) * 160);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.sb-wedo-title em { font-style: normal; color: inherit; }

/* 사진 2열 스태거 — 카드 605×800 r64, 우열 +78, 세로 gap 40, 가로 간격 42 */
.sb-photo-grid {
    margin: calc(var(--u) * 160) auto 0;
    width: calc(var(--u) * 1252);
    display: grid;
    grid-template-columns: calc(var(--u) * 605) calc(var(--u) * 605);
    justify-content: space-between;
    gap: calc(var(--u) * 40) calc(var(--u) * 42);
}

.sb-photo {
    position: relative;
    margin: 0;
    width: calc(var(--u) * 605);
    height: calc(var(--u) * 800);
    border-radius: calc(var(--u) * 64);
    overflow: hidden;
    background-color: #191919;
}

/* 필터: 검정 바탕 + 이미지 투명도만으로 톤 다운 (블러 없음 — 이미지 선명 유지) */
.sb-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .72;
}

/* 하단 1/4 프로그레시브 블러 — 캡션 가독성 (시안 blur 레이어의 하단부 번역) */
.sb-photo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(max(calc(var(--u) * 25), 10px));
    -webkit-backdrop-filter: blur(max(calc(var(--u) * 25), 10px));
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
}

.sb-photo-1::before { background-image: url("../../img2026/ssabari/wedo-1.jpg"); }
.sb-photo-2::before { background-image: url("../../img2026/ssabari/wedo-2.jpg"); }
.sb-photo-3::before { background-image: url("../../img2026/ssabari/wedo-3.jpg"); }
.sb-photo-4::before { background-image: url("../../img2026/ssabari/wedo-4.jpg"); }

.sb-photo:nth-child(even) { transform: translateY(calc(var(--u) * 78)); }

.sb-photo figcaption {
    position: absolute;
    z-index: 1;
    /* 시안 15.5% 인셋 — 브라우저 폰트 폭 보정으로 6%까지 확장(2줄 유지) */
    left: 6%;
    right: 6%;
    bottom: 8%;
    color: var(--sb-soft);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
}

.sb-wedo::after { content: ""; display: block; height: calc(var(--u) * 78); }

/* ==========================================================================
   7. 프로세스 — 4K 실측(435:2168): 섹션 x972 w1896, 라벨 y14146(wedo끝+456)
   헤딩블록(폭 848 중앙): 라벨 28/145 + 언더바(모션: 폭 15→848) + Display/4K 120/130
   카드 4열 444×559(gap 40, 헤딩끝+64), notice 18/165 (카드끝+81)
   ========================================================================== */
.sb-process {
    width: calc(var(--u) * 1896);
    margin: 0 auto;
    padding-top: calc(var(--u) * 456);
}

/* 헤딩 블록 — 시안 좌표: 라벨 (0,0)/(654,9), 바 (0,58), 대형 (0,86~242) */
.sb-process-head {
    position: relative;
    width: calc(var(--u) * 848);
    height: calc(var(--u) * 242);
    margin: 0 auto;
    text-align: left;
}

.sb-process-labels {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: var(--sb-green);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
    line-height: 1.45;
}

.sb-process-labels span:last-child { margin-top: calc(var(--u) * 9); }

.sb-process-bar {
    position: absolute;
    left: 0;
    top: calc(var(--u) * 58);
    width: 100%;
    height: calc(var(--u) * 4);
    border-radius: calc(var(--u) * 2);
    background: linear-gradient(90deg, rgba(31, 142, 86, 0) 0%, #1F8E56 100%);
}

.sb-process-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--u) * 86);
    margin: 0;
    color: var(--sb-sub);
    /* 토큰 Display/4K=120/130 Bold, 중앙정렬 — 브라우저 렌더 폭 보정: 104/1.5 → 시안 박스 848×156과 일치 */
    font-size: calc(var(--u) * 104);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.sb-process-grid {
    list-style: none;
    margin: calc(var(--u) * 64) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, calc(var(--u) * 444));
    gap: calc(var(--u) * 40);
    text-align: left;
}

.sb-process-card {
    position: relative;
    height: calc(var(--u) * 559);
    background: #fff;
    border: 1px solid var(--sb-line);
    border-radius: calc(var(--u) * 40);
}

/* 번호 — Display/4k: Light(300) 120/1.3, #DCDCDC (시안 실측) */
.sb-process-num {
    position: absolute;
    top: calc(var(--u) * 54);
    left: calc(var(--u) * 56);
    font-size: calc(var(--u) * 120);
    font-weight: 300;
    color: var(--sb-line);
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-family: var(--font-kr);
}

.sb-process-ico {
    position: absolute;
    top: calc(var(--u) * 228);
    left: calc(var(--u) * 56);
    width: calc(var(--u) * 130);
    height: calc(var(--u) * 130);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sb-process-card:nth-child(1) .sb-process-ico { background-image: url("../../img2026/ssabari/process-1.png"); }
.sb-process-card:nth-child(2) .sb-process-ico { background-image: url("../../img2026/ssabari/process-2.png"); }
.sb-process-card:nth-child(3) .sb-process-ico { background-image: url("../../img2026/ssabari/process-3.png"); }
.sb-process-card:nth-child(4) .sb-process-ico { background-image: url("../../img2026/ssabari/process-4.png"); }

.sb-process-card strong {
    position: absolute;
    top: calc(var(--u) * 382);
    left: calc(var(--u) * 56);
    right: calc(var(--u) * 56);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
    line-height: 1.45;
}

.sb-process-card p {
    position: absolute;
    top: calc(var(--u) * 431);
    left: calc(var(--u) * 56);
    right: calc(var(--u) * 56);
    margin: 0;
    color: var(--sb-sub);
    font-size: calc(var(--u) * 22);
    line-height: 1.65;
}

/* notice — 4K: 카드끝+81, 상단 구분선 #DCDCDC, 프레임 h93(패딩 16), 18/165 */
.sb-process-note {
    margin: calc(var(--u) * 81) 0 0;
    padding: calc(var(--u) * 16);
    border-top: 1px solid var(--sb-line);
    color: var(--sb-muted);
    font-size: calc(var(--u) * 18);
    line-height: 1.65;
    text-align: left;
}

/* 시안: 강조는 색만 진하게(Neutral/900), 웨이트는 본문과 동일 */
.sb-process-note strong { color: var(--sb-ink); font-weight: 400; }

/* ==========================================================================
   8. 자주 묻는 질문 — 4K 실측(395:4186): bg #F5F5F5 3808×1618(마진 16, process끝+188)
   헤딩 Heading1 64/135 (bg+320) · 아이템 1896 중앙(헤딩끝+80): 닫힘 h166/열림 h223,
   간격 24, r24, 패딩 56/48 · 질문 40 Bold · 답변 28/145 #4A4A4A (시안: 화살표 없음)
   ========================================================================== */
.sb-faq {
    margin: calc(var(--u) * 188) calc(var(--u) * 16) 0;
    background: var(--sb-soft);
}

.sb-faq-inner {
    width: calc(var(--u) * 1896);
    margin: 0 auto;
    padding: calc(var(--u) * 320) 0 calc(var(--u) * 339);
}

.sb-faq-title {
    text-align: center;
    font-size: calc(var(--u) * 64);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.sb-faq-item {
    margin-top: calc(var(--u) * 24);
    background: #fff;
    border-radius: calc(var(--u) * 24);
    padding: calc(var(--u) * 56);
}

.sb-faq-title + .sb-faq-item { margin-top: calc(var(--u) * 80); }

.sb-faq-item summary {
    list-style: none;
    cursor: pointer;
    font-size: calc(var(--u) * 40);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.sb-faq-item summary::-webkit-details-marker { display: none; }

/* 시안 button-ssabari-faq-4k: 질문 앞 "Q.", 답변 앞 "A." — 장식 접두사라
   CSS로 붙인다. DOM 텍스트를 그대로 두어야 상단 FAQPage JSON-LD의
   question/answer 문구와 화면 문구가 정확히 일치한다 (리치 결과 대응) */
.sb-faq-item summary::before,
.sb-faq-item p::before {
    content: "Q. ";
}

.sb-faq-item p::before { content: "A. "; }

.sb-faq-item p {
    margin-top: calc(var(--u) * 16);
    color: var(--sb-sub);
    font-size: calc(var(--u) * 28);
    line-height: 1.45;
}

/* ==========================================================================
   9. 하단 CTA 배너 — 4K: 3808×1000, 검정+이미지 30%, 헤딩 64 #F5F5F5
   ========================================================================== */
.sb-banner {
    position: relative;
    /* 시안 16 그리드 — 상·좌·우 16u 비례 (4K=16px, FHD=8px) */
    margin: calc(var(--u) * 16) calc(var(--u) * 16) 0;
    height: calc(var(--u) * 1000);
    background-color: #000;
    overflow: hidden;
}

.sb-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../../img2026/ssabari/banner.jpg") center 30%/cover no-repeat;
    opacity: .3;
}

.sb-banner-inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 4K 실측: 헤딩 top 387 (세로 중앙 아님) */
    justify-content: flex-start;
    padding-top: calc(var(--u) * 387);
    text-align: center;
}

.sb-banner-title {
    color: var(--sb-soft);
    font-size: calc(var(--u) * 64);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.sb-banner .sb-pill { margin-top: calc(var(--u) * 32); }

.sb-banner-btn-mo { display: none; }

/* ==========================================================================
   우하단 고정 CTA — 4K 실측(407:3503 nav-contact-4k): 415×135, 우하단 40/40
   1행 24 흰 72% · 2행 36 Bold 흰 + 화살표(텍스트) — FIXED 그룹(항상 고정)
   ========================================================================== */
.sb-float-cta {
    position: fixed;
    right: max(calc(var(--u) * 40), 16px);
    bottom: max(calc(var(--u) * 40), 16px);
    z-index: 300;
    display: block;
    background: #2F6B44;
    color: #fff;
    border-radius: max(calc(var(--u) * 12), 8px);
    /* 4K 기준 415×135가 되는 패딩 — 작은 창에서는 max() 하한으로 가독성 유지 */
    padding: max(calc(var(--u) * 28), 12px) max(calc(var(--u) * 40), 16px) max(calc(var(--u) * 22), 10px) max(calc(var(--u) * 48), 18px);
    box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 40) rgba(20, 40, 28, .35);
    transition: transform .25s ease, box-shadow .25s ease;
}

.sb-float-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(20, 40, 28, .45); }

.sb-float-sub {
    display: block;
    font-size: max(calc(var(--u) * 22), 11px);
    line-height: 1.45;
    color: rgba(255, 255, 255, .72);
}

.sb-float-main {
    display: block;
    margin-top: calc(var(--u) * 2);
    font-size: max(calc(var(--u) * 32), 15px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* ==========================================================================
   와이드 스크린(>1920) — 공용 base.css가 #body-wrapper에 zoom(100vw÷1920)을 걸어
   전체를 확대하지만, 랜딩은 --u(100vw÷3840)로 자체 비례 스케일하므로 이중 확대가 됨.
   → 랜딩 래퍼는 zoom 무효화, 공용 푸터만 사이트 방식대로 재확대(시안 fnb 크기와 일치).
   ========================================================================== */
@media (min-width: 1921px) {
    #body-wrapper.sb-wrap { zoom: 1; }

    #body-wrapper.sb-wrap #footer2026 {
        zoom: tan(atan2(100vw, 1920px));
        /* zoom(vw÷1920)이 마진까지 확대 → 선언 8px = 렌더 16u (시안 비례) */
        margin: 8px;
    }
}

/* 3840 초과 — 콘텐츠(max-width 3840) 중앙 고정에 맞춰 고정 요소도 정렬 */
@media (min-width: 3841px) {
    .sb-wrap #header2026 .hd-inner {
        max-width: 3840px;
        margin: 0 auto;
    }

    .sb-float-cta { right: calc((100vw - 3840px) / 2 + 40px); }
}

/* 푸터 — 4K fnb: x16 y18023(배너끝+16u) → 데스크톱 좌우 16px 고정 + 위 16u 비례 (모바일 0은 아래에서) */
/* 4K fnb: 상하좌우 16 마진 — 16u 비례 (4K=16px, FHD=8px) */
.sb-wrap #footer2026 { margin: calc(var(--u) * 16); }

/* ==========================================================================
   등장 애니메이션 — Figma 모션 트랙 번역 (이징 cubic-bezier(.5,0,.5,1))
   benefit: opacity 0→1 + Y96→0 · category: Y580→0(스크롤 리빌로 160 완화)
   process 카드: Y110→0 스태거 175ms · devider: 폭 15→848 · banner: 페이드
   JS가 .sb-wrap에 sb-js를 붙인 뒤에만 초기 숨김 (no-JS 폴백 안전)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    /* toss.im/company 스타일: 블러 → 선명 + 페이드 + 라이즈 */
    .sb-js .sb-rv {
        opacity: 0;
        filter: blur(max(calc(var(--u) * 24), 10px));
        transition:
            opacity .8s cubic-bezier(.5, 0, .5, 1),
            transform .8s cubic-bezier(.5, 0, .5, 1),
            filter .9s cubic-bezier(.5, 0, .5, 1);
        transition-delay: var(--rvd, 0s);
        will-change: opacity, transform, filter;
    }

    .sb-js .sb-rv-up { transform: translateY(calc(var(--u) * 96)); }
    .sb-js .sb-rv-up-lg { transform: translateY(calc(var(--u) * 160)); }
    .sb-js .sb-rv-up-sm { transform: translateY(calc(var(--u) * 110)); }

    .sb-js .sb-rv.is-in { opacity: 1; transform: none; filter: blur(0); }

    /* 스태거 — benefit 카드 120ms, process 카드 175ms(시안), wedo 사진 120ms */
    .sb-js .sb-benefit-grid .sb-benefit-card:nth-child(2) { --rvd: .12s; }
    .sb-js .sb-benefit-grid .sb-benefit-card:nth-child(3) { --rvd: .24s; }
    .sb-js .sb-process-grid .sb-process-card:nth-child(2) { --rvd: .175s; }
    .sb-js .sb-process-grid .sb-process-card:nth-child(3) { --rvd: .35s; }
    .sb-js .sb-process-grid .sb-process-card:nth-child(4) { --rvd: .525s; }
    .sb-js .sb-photo-grid .sb-photo:nth-child(2) { --rvd: .12s; }
    .sb-js .sb-photo-grid .sb-photo:nth-child(3) { --rvd: .24s; }
    .sb-js .sb-photo-grid .sb-photo:nth-child(4) { --rvd: .36s; }

    /* 프로세스 언더바 — 시안 모션: 폭 15 → 848 (scaleX, 좌측 기준) */
    .sb-js .sb-process-bar {
        transform: scaleX(.0177);
        transform-origin: left center;
        transition: transform .8s cubic-bezier(.5, 0, .5, 1) .2s;
    }

    .sb-js .sb-process-head.is-in .sb-process-bar { transform: scaleX(1); }
}

/* ==========================================================================
   모바일 (≤900px) — [MO] Ssabari 1 실측 (402 기준, 마진 15)
   ========================================================================== */
@media (max-width: 900px) {

    /* 고정 헤더 높이(모바일) — JS가 --sb-hd 실측 주입, 폴백 47px */
    #body-wrapper.sb-wrap { padding-top: var(--sb-hd, 48px); }

    /* --- 히어로: 흰 배경 + 타이틀(2행 그린) + 풀블리드 사진 카드 --- */
    .sb-hero {
        height: auto;
        margin: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
        padding: 24px 15px 0;
    }

    .sb-hero-media {
        position: static;
        order: 2;
        margin-top: 22px;
        border-radius: 16px;
        aspect-ratio: 402 / 654;
        background-image: url("../../img2026/ssabari/hero-mo.jpg");
        box-shadow: none;
    }

    .sb-hero-inner { display: contents; }

    .sb-hero-title {
        order: 1;
        color: var(--sb-ink);
        font-size: 26px;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: -0.01em;
        padding-left: 19px;
    }

    .sb-hero-title span { color: var(--sb-green); }

    .sb-hero-copy {
        order: 3;
        margin-top: 24px;
        max-width: none;
        padding: 0 8px;
        color: var(--sb-sub);
        font-size: 17px;
        font-weight: 400;
        line-height: 1.65;
    }

    .sb-hero .sb-pill { display: none; }

    /* --- 챗버블: 둘 다 좌측 정렬 (MO) --- */
    .sb-question {
        height: auto;
        padding: 56px 15px 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .sb-question .sb-bubble:first-child,
    .sb-bubble-offset {
        position: static;
        left: auto;
        top: auto;
        width: auto;
    }

    /* [MO] 시안: 버블 1줄 (줄바꿈 해제) */
    .sb-bubble br { display: none; }

    .sb-bubble {
        display: block;
        width: auto;
        height: auto;
        padding: 8px 16px;
        border-radius: 50px;
        font-size: 17px;
        line-height: 1.45;
        box-shadow: none;
        white-space: normal;
    }

    .sb-bubble-offset { font-size: 16px; line-height: 1.65; }

    /* --- 강점: 흰→#E6FFE5 그라데이션 배경 (MO) --- */
    .sb-benefit {
        width: auto;
        margin-top: 42px;
        padding: 56px 15px 90px;
        background: linear-gradient(180deg, #fff 0%, #E6FFE5 100%);
    }

    .sb-benefit-title { text-align: left; font-size: 26px; padding-left: 19px; }

    .sb-benefit-grid {
        margin-top: 46px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        gap: 8px;
    }

    .sb-benefit-card {
        border: 1px solid var(--sb-line);
        background: #fff;
        border-radius: 15px;
        padding: 32px 18px 32px 32px;
    }

    .sb-benefit-main {
        grid-row: auto;
        grid-column: 1 / -1;
        height: 240px;
        padding: 32px;
    }

    .sb-benefit-label { font-size: 17px; font-weight: 500; line-height: 1.45; }

    .sb-benefit-main .sb-benefit-label { font-weight: 500; }

    .sb-benefit-heading { margin-top: 3px; font-size: 20px; line-height: 1.4; letter-spacing: -0.01em; }

    /* [MO] 실측: 원 132² — 카드 우측 32, 상단 76 */
    .sb-benefit-circle {
        position: absolute;
        right: 32px;
        top: 76px;
        width: 132px;
        height: 132px;
        font-size: 32px;
        font-weight: 500;
        letter-spacing: -0.05em;
    }

    .sb-benefit-since { left: 32px; bottom: 32px; font-size: 13px; font-weight: 400; line-height: 1.6; }

    .sb-benefit-ico { width: 32px; height: 32px; margin-top: 0; }

    .sb-benefit-card:not(.sb-benefit-main) .sb-benefit-label { position: absolute; opacity: 0; pointer-events: none; }

    .sb-benefit-card:not(.sb-benefit-main) .sb-benefit-heading { margin-top: 14px; font-size: 17px; font-weight: 500; line-height: 1.45; letter-spacing: 0; }

    /* --- 유형: 통합 캐러셀 (MO) --- */
    .sb-types { width: auto; padding: 72px 0 0; }

    .sb-types-title { font-size: 26px; padding: 0 34px; text-align: left; }

    .sb-types-pc { display: none; }

    .sb-types-mo { display: block; margin-top: 46px; }

    .sb-track {
        display: flex;
        gap: 8px;
        align-items: center;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 0 34px;
        scrollbar-width: none;
    }

    .sb-track::-webkit-scrollbar { display: none; }

    .sb-slide {
        position: relative;
        flex: 0 0 85vw;
        max-width: 342px;
        aspect-ratio: 342 / 418;
        border-radius: 16px;
        overflow: hidden;
        scroll-snap-align: center;
        background: #191919;
    }

    .sb-slide img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sb-slide-grad {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 46%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(25, 25, 25, .15) 100%);
    }

    .sb-slide-chip {
        position: absolute;
        left: 24px;
        bottom: 63px;
        padding: 2px 8px;
        border-radius: 4px;
        background: rgba(232, 245, 238, .8);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        border: 1px solid var(--sb-green-light);
        color: var(--sb-green);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.5;
    }

    .sb-slide-title {
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: 27px;
        color: #fff;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: -0.01em;
        text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    }

    .sb-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
    }

    .sb-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--sb-line);
    }

    .sb-dot.is-on { background: var(--sb-green); }

    .sb-types .sb-center { margin-top: 40px; }

    .sb-types-btn-pc { display: none; }

    .sb-types-btn-mo { display: inline; }

    .sb-pill { font-size: 17px; font-weight: 500; padding: 8px 8px 8px 16px; gap: 8px; border-radius: 100px; }

    .sb-pill-arrow { width: 32px; height: 32px; flex: 0 0 32px; }

    /* --- 시딩키트 배너: h100 + 오버레이 (MO) --- */
    .sb-seeding {
        margin: 74px 0 0;
        height: 100px;
        background-image:
            linear-gradient(rgba(25, 25, 25, .3), rgba(25, 25, 25, .3)),
            url("../../img2026/ssabari/bar.jpg");
    }

    .sb-seeding-inner {
        position: static;
        height: 100%;
        padding: 0 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .sb-seeding-title { font-size: 17px; font-weight: 500; line-height: 1.45; }

    .sb-seeding-cta { display: none; }

    /* --- 다 해드려요 / 퀄리티 --- */
    .sb-wedo { padding-top: 90px; }

    .sb-wedo-head::before { left: 0; right: 0; height: 225px; top: auto; bottom: -60px; }

    .sb-wedo-lead {
        font-size: 32px;
        font-weight: 500;
        letter-spacing: -0.05em;
        line-height: 1.35;
    }

    .sb-wedo-chips { gap: 10px 12px; max-width: 420px; margin-top: 32px; padding: 0 24px; }

    .sb-wedo-chips li { padding: 4px 8px; font-size: 17px; font-weight: 500; border-radius: 8px; }

    .sb-wedo-quality { padding: 130px 0 0; text-align: left; }

    .sb-chip-box {
        margin-left: 34px;
        padding: 4px 8px;
        border-radius: 4px;
        background: var(--sb-soft);
        border: 1px solid rgba(245, 245, 245, .7);
        color: var(--sb-sub);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
    }

    .sb-wedo-title {
        margin-top: 16px;
        padding: 0 34px;
        font-size: 26px;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: -0.01em;
    }

    .sb-wedo-title em { color: var(--sb-green); }

    .sb-photo-grid {
        display: flex;
        gap: 8px;
        align-items: center;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin: 40px 0 0;
        padding: 0 34px;
        width: auto;
        scrollbar-width: none;
    }

    .sb-photo-grid::-webkit-scrollbar { display: none; }

    .sb-photo {
        flex: 0 0 85vw;
        max-width: 342px;
        width: auto;
        height: auto;
        aspect-ratio: 342 / 418;
        border-radius: 16px;
        scroll-snap-align: center;
    }

    .sb-photo:nth-child(even) { transform: none; }

    .sb-photo figcaption { font-size: 16px; font-weight: 500; left: 7%; right: 7%; bottom: 5.5%; }

    .sb-wedo::after { height: 0; }

    /* --- 프로세스 (MO) --- */
    .sb-process { width: auto; padding: 118px 15px 0; }

    .sb-process-head {
        width: auto;
        height: auto;
        text-align: center;
    }

    .sb-process-labels {
        justify-content: center;
        gap: 10px;
        font-size: 17px;
    }

    .sb-process-labels span:last-child { margin-top: 0; }

    .sb-process-bar {
        position: static;
        display: block;
        width: 210px;
        height: 2px;
        margin: 4px auto 0;
    }

    .sb-process-title {
        position: static;
        transform: none;
        margin-top: 108px;
        font-size: 26px;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: -0.01em;
        color: var(--sb-ink);
    }

    .sb-process-grid {
        margin-top: 78px;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .sb-process-card {
        height: auto;
        background: var(--sb-soft);
        border: 0;
        box-shadow: none;
        border-radius: 15px;
        padding: 16px 18px 16px;
        min-height: 199px;
    }

    .sb-process-num { display: none; }

    .sb-process-ico { position: static; width: 40px; height: 40px; }

    .sb-process-card strong { position: static; display: block; margin-top: 16px; font-size: 15px; line-height: 1.3; }

    /* [MO] 시안: 제목에 번호 접두 ("1. 견적 및 사양 상담") */
    .sb-process-grid { counter-reset: sb-pc; }

    .sb-process-card { counter-increment: sb-pc; }

    .sb-process-card strong::before { content: counter(sb-pc) ". "; }

    .sb-process-card p { position: static; margin-top: 28px; font-size: 13px; line-height: 1.6; }

    .sb-process-note { display: none; } /* [MO] 시안: 노티스 미표시 */

    /* --- FAQ (MO) --- */
    .sb-faq { margin: 90px 0 0; }

    .sb-faq-inner { width: auto; padding: 56px 15px 88px; }

    .sb-faq-title { font-size: 26px; }

    .sb-faq-title + .sb-faq-item { margin-top: 24px; }

    .sb-faq-item { padding: 24px 16px; margin-top: 8px; border-radius: 8px; }

    .sb-faq-item summary { font-size: 15px; font-weight: 600; }

    .sb-faq-item p { margin-top: 14px; font-size: 13px; line-height: 1.6; }

    /* --- 하단 배너 (MO: h335, 오버레이 .8, 세로 중앙) --- */
    .sb-banner { margin: 0; height: 335px; }

    .sb-banner-inner { justify-content: center; padding-top: 0; }

    .sb-banner::before { opacity: 1; background-image: linear-gradient(rgba(25, 25, 25, .8), rgba(25, 25, 25, .8)), url("../../img2026/ssabari/banner.jpg"); }

    .sb-banner-title { font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }

    .sb-banner .sb-pill { margin-top: 30px; }

    .sb-banner .sb-pill-glass {
        border-color: #8B8B8B;
        font-size: 17px;
        font-weight: 500;
        line-height: 1.45;
        padding: 4px 4px 4px 16px;
    }

    .sb-banner-btn-pc { display: none; }

    .sb-banner-btn-mo { display: inline; }

    /* --- 푸터: 풀블리드 (MO 시안 — 마진 0) --- */
    .sb-wrap #footer2026 { margin: 0; }

    /* --- 고정 CTA 숨김 --- */
    .sb-float-cta { display: none; }
}

/* 모바일 리빌 이동량 — u 스케일(≈10px)이 미미해 고정 28px로 보정 */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
    .sb-js .sb-rv-up,
    .sb-js .sb-rv-up-lg,
    .sb-js .sb-rv-up-sm { transform: translateY(28px); }
}