/* ========================================
   MOCO100 CLONE - main.css
   타이포·컬러: www.moco100.com (Figma Sites) SSR 스타일 추출값 기준
   브레이크포인트: 375 / 800 / 1280 / 1920 (width)
   ======================================== */

:root {
    --mc-header-height: 72px;
    --mc-blue: rgb(63, 104, 254);
    --mc-blue-2: rgb(63, 104, 254);
    /* 순수 #000 대신 — 동영상·원격 배경 로드 전 깜빡임 완화 */
    --mc-bg: #0f1114;
    --mc-hero-bg-fallback: #141820;
    /* STATS 섹션 배경 — CTA 상단 블렌드 등에서 동일 값 사용 */
    --mc-stats-section-bg: rgb(241, 243, 245);
    /* QUALITY 섹션 배경 — SAFETY 상단과 경계 블렌드에 사용 */
    --mc-quality-section-bg: rgb(40, 41, 43);
    --mc-panel: #151616;
    --mc-panel-2: #1e1e1e;
    --mc-card: #1a1a1a;
    --mc-border: #28292b;
    --mc-kakao: #ffe300;
    --mc-text: #ffffff;
    --mc-reviews-bg: rgb(63, 104, 254);
    /* 제목(태그~타이틀) 위·아래 동일 리듬 — 한쪽만 크게 두지 않음 */
    --mc-section-head-block-y: clamp(48px, 9vw, 112px);
    /* 영문 태그(POINT 등) ↔ 한글 제목 · 제목 ↔ 부제 간격 */
    --mc-section-tag-gap-below: clamp(20px, 2.8vw, 36px);
    --mc-section-title-gap-below: clamp(32px, 4vw, 56px);
    /* 97px 래퍼(.mc-*-heading) 안: 제목·부제 em 간격 */
    --mc-section-head-em-title-gap: 0.5em;
    --mc-section-head-em-desc-top: 0.36em;
    /* 레이아웃 본문 최대 폭 (헤더·플로팅바와 맞춤) */
    --mc-container-max: 1600px;
    /* 푸터 티커 + 하단 고정 배너 — 동일 높이(상·하 여백만 조정해 맞춤) */
    --mc-footer-strip-height: clamp(64px, 7vw, 80px);
    /* QUALITY 카드 본문·상단 흰 영역 공통 안쪽 여백 */
    --mc-quality-inner-padding: clamp(24px, 3.2vw, 40px);
    /* STRUCTURE: 상단 짙은 회색 / 하단 파랑 — CTA·mc-blue 와 동일 톤 */
    --mc-structure-split-top: #1a1a1a;
    --mc-structure-split-bottom: var(--mc-blue);
    /* 분할 비율 — 짙은 상단 vs 파랑 하단 (높이는 --mc-structure-min-height·패딩으로 함께 확대) */
    --mc-structure-split-pct: 64%;
    /* STRUCTURE 섹션 최소 높이: 짙은·파랑 둘 다 절대적으로 길어짐 */
    --mc-structure-min-height: clamp(820px, 92vh, 1280px);
    /* 헤더 위·카드 아래(파랑) 추가 여백 */
    --mc-structure-pad-top-extra: clamp(48px, 7vw, 100px);
    --mc-structure-pad-bottom: clamp(140px, 20vw, 260px);
    /* STRUCTURE 카드 하단이 .mc-cta 검정 위로 걸침 */
    --mc-structure-card-overlap: clamp(200px, 20vw, 300px);
    /* CTA 파트너 블록: 배경 위 텍스트 가독용 */
    --mc-cta-partner-overlay: rgba(0, 0, 0, 0.5);
    /* SAFETY 전체 배경: 상단은 QUALITY rgb(40,41,43)에 맞춤 · 하단은 비네트 — 사진은 --mc-safety-photo-dim 으로 전역 어둡게 */
    --mc-safety-vignette: linear-gradient(
        180deg,
        rgba(40, 41, 43, 0.98) 0%,
        rgba(40, 41, 43, 0.72) 8%,
        rgba(40, 41, 43, 0.35) 16%,
        rgba(0, 0, 0, 0.2) 28%,
        rgba(0, 0, 0, 0.08) 48%,
        rgba(0, 0, 0, 0.14) 62%,
        rgba(0, 0, 0, 0.42) 84%,
        rgba(0, 0, 0, 0.94) 100%
    );
    --mc-safety-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.48));
    --mc-safety-photo-dim: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));
    --font-cond: "Encode Sans Condensed", "Noto Sans KR", sans-serif;
    --font-exp: "Encode Sans Expanded", "Noto Sans KR", sans-serif;
}

/* --- RESET & BASE --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-cond);
    background-color: var(--mc-bg);
    color: var(--mc-text);
    line-height: 1.5;
    font-size: 16px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

/* --- CONTAINER --- */
.mc-container {
    width: 100%;
    max-width: min(var(--mc-container-max), 100%);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}

/* --- BUTTONS --- */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-cond);
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 15px;
    padding: 12px 28px;
    gap: 6px;
}

.mc-btn-sm {
    padding: 8px 20px;
    font-size: 13px;
    border-radius: 6px;
}

.mc-btn-lg {
    padding: 16px 36px;
    font-size: 17px;
    border-radius: 10px;
}

.mc-btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

.mc-btn-primary {
    background-color: var(--mc-blue);
    color: #fff;
    font-family: var(--font-cond);
    font-weight: 700;
}

.mc-btn-primary:hover {
    background-color: var(--mc-blue-2);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(63, 104, 254, 0.35);
}

.mc-btn-kakao {
    background: var(--mc-kakao);
    color: #191919;
    font-family: var(--font-cond);
    font-weight: 700;
}

.mc-btn-kakao:hover {
    filter: brightness(0.95);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 227, 0, 0.25);
}

.mc-btn-outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-family: var(--font-cond);
    font-weight: 600;
}

.mc-btn-outline:hover {
    border-color: var(--mc-blue);
    color: var(--mc-blue-2);
    transform: translateY(-2px);
}

.mc-btn-hero-white {
    background: #ffffff;
    color: var(--mc-blue);
    font-family: var(--font-cond);
    border-radius: 999px;
    padding: 14px 32px;
}

.mc-btn-hero-white:hover {
    background: #f0f2f6;
    color: var(--mc-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.12);
}

.mc-btn-hero-blue {
    background: var(--mc-blue);
    color: #ffffff;
    font-family: var(--font-cond);
    border-radius: 999px;
    padding: 14px 32px;
}

.mc-btn-hero-blue:hover {
    background: var(--mc-blue-2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(63, 104, 254, 0.35);
}

/* --- REVEAL ANIMATION --- */
.mc-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.mc-reveal.mc-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   HEADER
   ======================================== */
.mc-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.25s ease, box-shadow 0.3s;
}

.mc-header.mc-scrolled {
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mc-header-inner {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    height: var(--mc-header-height);
}

.mc-logo {
    display: flex;
    align-items: center;
    align-self: center;
}

.mc-logo a {
    display: flex;
    align-items: center;
}

.mc-logo .mc-logo-img,
.mc-logo img {
    height: auto;
    max-height: 25px;
    width: auto;
    max-width: min(220px, 48vw);
    object-fit: contain;
    object-position: left center;
}

.mc-logo-text {
    font-family: var(--font-cond);
    font-size: 22px;
    font-weight: 700;
    color: var(--mc-blue);
    letter-spacing: -0.44px;
}

.mc-nav {
    display: flex;
    align-items: stretch;
    align-self: stretch;
}

.mc-nav ul {
    display: flex;
    align-items: stretch;
    gap: 0;
    height: 100%;
    margin: 0;
    padding: 0;
}

.mc-nav li {
    display: flex;
    align-items: stretch;
}

.mc-nav a {
    display: flex;
    align-items: center;
    font-family: var(--font-cond);
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    padding: 0 clamp(14px, 2vw, 22px);
    min-height: 100%;
    box-sizing: border-box;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mc-nav a:hover,
.mc-nav a:focus-visible {
    background-color: var(--mc-blue);
    color: #ffffff;
    opacity: 1;
}

.mc-mobile-toggle {
    display: none;
    align-self: center;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.mc-mobile-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: transform 0.3s, opacity 0.3s;
}

.mc-mobile-toggle.mc-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mc-mobile-toggle.mc-active span:nth-child(2) {
    opacity: 0;
}
.mc-mobile-toggle.mc-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* MOBILE NAV — 헤더와 동일 투명도·블러, 높이는 메뉴 영역만 */
.mc-mobile-nav {
    display: none;
    position: fixed;
    top: var(--mc-header-height);
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
    z-index: 999;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
}

.mc-mobile-nav.mc-open {
    display: block;
}

.mc-mobile-nav ul {
    margin-bottom: 16px;
}

.mc-mobile-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mc-mobile-nav li a {
    display: block;
    padding: 14px 0;
    font-size: 16px;
    color: #ffffff;
}

/* ========================================
   HERO (이미지1: 중앙 정렬, 청년철거 파란 박스, 전화 아이콘, 흰/파 버튼 — 배경 동영상)
   ======================================== */
.mc-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--mc-header-height) + 48px) 20px 80px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mc-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-color: var(--mc-hero-bg-fallback);
    /* 동영상 첫 프레임 전·비디오 레이어 아래: 순검정 대신 현장 톤에 가까운 그라데이션 */
    background-image: linear-gradient(
        165deg,
        #1c2633 0%,
        #141a24 38%,
        #0e1016 100%
    );
}

.mc-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* 첫 프레임 디코딩 전 검정 사각형 대신 .mc-hero-bg 그라데이션이 보이도록 */
    opacity: 0;
    transition: opacity 0.55s ease;
}

.mc-hero-video.mc-hero-video--ready {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .mc-hero-video {
        transition-duration: 0.15s;
    }
}

.mc-hero-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.mc-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    width: 100%;
}

.mc-hero-content {
    max-width: min(1100px, 100%);
    width: 100%;
}

.mc-hero-title {
    margin: 0;
    font-family: var(--font-cond);
    color: #ffffff;
}

/* 히어로 제목 타이포는 hero-tune.css */
.mc-hero-line1,
.mc-hero-line2 {
    display: block;
}

.mc-hero-brand-mark {
    display: inline;
    background-color: var(--mc-blue);
    color: #ffffff;
    padding: 0.04em 0.14em 0.06em;
    margin-right: 0.03em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.mc-hero-desc {
    font-family: var(--font-cond);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-align: center;
    margin-top: clamp(18px, 3.2vw, 32px);
    margin-bottom: clamp(22px, 3.5vw, 36px);
}

.mc-hero-phone {
    margin-bottom: clamp(24px, 4vw, 36px);
}

.mc-hero-phone a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--font-exp);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #ffffff;
    transition: opacity 0.2s;
}

.mc-hero-phone a:hover {
    opacity: 0.88;
}

.mc-hero-phone-icon {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
}

.mc-hero-actions {
    display: flex;
    gap: clamp(12px, 2vw, 20px);
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
}

/* ========================================
   SECTIONS COMMON
   ======================================== */
.mc-section {
    padding: 80px 0;
}

.mc-section-header {
    text-align: center;
    margin-bottom: 48px;
}

/* 제목 블록: 태그 위 여백 = 본문(마퀴·그리드) 직전까지 아래 여백 */
.mc-section.mc-reviews,
.mc-section.mc-stats,
.mc-section.mc-point,
.mc-section.mc-process,
.mc-section.mc-quality,
.mc-section.mc-safety,
.mc-section.mc-structure {
    padding-top: 0;
}

.mc-reviews-intro.mc-container,
.mc-stats-intro.mc-container,
.mc-point > .mc-container,
.mc-process > .mc-container,
.mc-quality > .mc-container,
.mc-safety > .mc-container,
.mc-structure > .mc-container {
    padding-top: var(--mc-section-head-block-y);
}

.mc-reviews-header,
.mc-stats-header,
.mc-point .mc-section-header,
.mc-process > .mc-container > .mc-section-header:first-child,
.mc-quality > .mc-container > .mc-section-header:first-child,
.mc-safety-heading-panel .mc-section-header.mc-safety-heading,
.mc-structure > .mc-container > .mc-section-header:first-child {
    margin-bottom: var(--mc-section-head-block-y);
}

/* POINT / PROCESS / STRUCTURE 라벨 (Encode Sans Expanded + --mc-blue) */
.mc-section-tag {
    display: block;
    font-family: var(--font-exp);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.19;
    letter-spacing: -0.9px;
    color: var(--mc-blue);
    text-align: center;
    margin-bottom: var(--mc-section-tag-gap-below);
}

.mc-section-title {
    font-family: var(--font-cond);
    font-weight: 700;
    font-size: 97px;
    line-height: 1.13;
    letter-spacing: -1.94px;
    color: #fff;
    text-align: center;
    margin-bottom: var(--mc-section-title-gap-below);
}

@media (min-width: 800px) {
    .mc-section-tag {
        font-weight: 400;
        font-size: 23.125px;
        letter-spacing: -1.3875px;
    }
}

@media (min-width: 1280px) {
    .mc-section-tag {
        font-size: 37px;
        letter-spacing: -2.22px;
    }
}

@media (min-width: 1920px) {
    .mc-section-tag {
        font-size: 55.5px;
        letter-spacing: -3.33px;
    }
}

.mc-section-subtitle {
    font-family: var(--font-cond);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 8px;
    text-align: center;
}

.mc-section-desc {
    font-family: var(--font-cond);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}

.mc-section-lead {
    font-family: var(--font-cond);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 8px;
    text-align: center;
}

/* 본문 폭·좌우 패딩 통일 (POINT / PROCESS / QUALITY / SAFETY / STRUCTURE) */
.mc-point > .mc-container,
.mc-process > .mc-container,
.mc-quality > .mc-container,
.mc-safety > .mc-container,
.mc-structure > .mc-container {
    max-width: min(var(--mc-container-max), 100%);
}

/* ========================================
   POINT SECTION (01~04 정적 행, 이미지·텍스트 지그재그)
   ======================================== */
.mc-point {
    background: var(--mc-bg);
}

.mc-point-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 8vw, 96px);
    padding-bottom: 8px;
}

.mc-point-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(28px, 5vw, 72px);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.mc-point-row--media-left {
    flex-direction: row;
}

.mc-point-row--media-right {
    flex-direction: row-reverse;
}

.mc-point-row-media {
    flex: 0 0 auto;
    width: min(655px, 100%);
    max-width: 655px;
    min-width: 0;
    border-radius: 22px;
    overflow: hidden;
    background: #eeeeee;
}

.mc-point-row-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 655px;
    object-fit: cover;
    display: block;
}

.mc-point-row-body {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mc-point-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mc-blue);
    color: #ffffff;
    font-family: var(--font-exp);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: clamp(18px, 3vw, 28px);
    flex-shrink: 0;
}

.mc-point-row-title {
    font-family: var(--font-cond);
    font-size: clamp(1.65rem, 3.4vw, 2.875rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.32;
    letter-spacing: -0.03em;
    margin: 0 0 clamp(18px, 2.5vw, 26px);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.mc-point-row-desc {
    font-family: var(--font-cond);
    font-size: clamp(1.05rem, 2vw, 1.4rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ========================================
   CLIENTS — POINT 다음 섹션 · 클라이언트 로고 마퀴 (REVIEW와 별개 · 검정 배경)
   ======================================== */
.mc-clients {
    background: #000000;
    padding: 0 0 clamp(48px, 8vw, 100px);
    overflow: hidden;
}

.mc-clients-header {
    text-align: center;
    padding: var(--mc-section-head-block-y) clamp(20px, 4vw, 48px);
    margin-bottom: 0;
    /* .mc-section-title(97px)과 동일 기준 → 부제 0.5em = 제목의 50% */
    font-size: 97px;
}

.mc-clients .mc-section-title.mc-clients-title {
    font-size: 1em;
    margin-bottom: var(--mc-section-head-em-title-gap);
}

.mc-clients-title-line1,
.mc-clients-title-line2 {
    display: block;
    word-break: keep-all;
}

.mc-clients-title-line1 {
    margin-bottom: 0.08em;
}

.mc-clients-brand {
    color: var(--mc-blue);
}

.mc-clients .mc-clients-lead {
    font-family: var(--font-cond);
    font-size: 0.5em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    margin: var(--mc-section-head-em-desc-top) auto 0;
    max-width: 42em;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

@media (max-width: 768px) {
    .mc-clients-header {
        font-size: clamp(28px, 7.5vw, 97px);
    }
}

.mc-clients-marquees {
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 3.5vw, 40px);
    max-width: min(1600px, 100%);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(0px, 2vw, 24px);
    padding-right: clamp(0px, 2vw, 24px);
}

.mc-clients-marquee-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: clamp(96px, 12vw, 148px);
    /* 가운데 밝게(완전 표시) · 양끝은 투명 처리로 어둡게 보임 — 이미지1 참고 */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #fff 14%,
        #fff 86%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #fff 14%,
        #fff 86%,
        transparent 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.mc-clients-marquee-track {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(48px, 6.5vw, 100px);
    width: max-content;
    padding: clamp(16px, 2.5vw, 28px) 0;
    will-change: transform;
}

.mc-clients-marquee--ltr .mc-clients-marquee-track {
    animation: mc-clients-marquee-ltr 42s linear infinite;
}

.mc-clients-marquee--rtl .mc-clients-marquee-track {
    animation: mc-clients-marquee-rtl 48s linear infinite;
}

@keyframes mc-clients-marquee-ltr {
    from {
        transform: translate3d(-50%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes mc-clients-marquee-rtl {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.mc-client-logo {
    flex: 0 0 auto;
    font-family: var(--font-exp);
    font-size: clamp(16px, 2.35vw, 28px);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    user-select: none;
}

.mc-client-logo img {
    display: block;
    height: clamp(36px, 4.5vw, 56px);
    width: auto;
    max-width: min(360px, 48vw);
    object-fit: contain;
    opacity: 0.88;
}

@media (prefers-reduced-motion: reduce) {
    .mc-clients-marquee--ltr .mc-clients-marquee-track,
    .mc-clients-marquee--rtl .mc-clients-marquee-track {
        animation: none;
        transform: translate3d(0, 0, 0);
    }
}

@media (max-width: 768px) {
    /* 클라이언트: PC와 동일 — 1행 LTR + 1행 RTL, 각각 독립 무한 흐름(클론·애니메이션 유지) */
    .mc-clients-marquees {
        padding-left: clamp(16px, 4vw, 24px);
        padding-right: clamp(16px, 4vw, 24px);
        gap: 0;
    }

    .mc-clients-marquee-viewport {
        min-height: clamp(72px, 14vw, 100px);
        /* 가운데 영역 강조(양끝 페이드) — PC와 동일 개념 */
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            #fff 10%,
            #fff 90%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            transparent 0%,
            #fff 10%,
            #fff 90%,
            transparent 100%
        );
    }

    .mc-clients-marquee-track {
        gap: clamp(32px, 8vw, 56px);
        padding: clamp(6px, 1.5vw, 14px) 0;
    }

    .mc-client-logo {
        font-size: clamp(12px, 3.2vw, 17px);
        letter-spacing: 0.02em;
    }

    .mc-client-logo img {
        height: clamp(28px, 5.5vw, 44px);
        max-width: min(280px, 55vw);
    }
}

/* ========================================
   REVIEW 섹션 (파란 배경 / 후기 2건 · 2행 CSS 마퀴, 슬라이더 없음)
   ======================================== */
.mc-reviews {
    background: var(--mc-reviews-bg);
    overflow: hidden;
}

.mc-reviews-intro.mc-container {
    max-width: min(var(--mc-container-max), 100%);
    padding-left: clamp(20px, 4vw, 48px);
    padding-right: clamp(20px, 4vw, 48px);
}

/* 클라이언트 섹션과 동일: 제목 = .mc-section-title(1em) · 부제 = 0.5em */
.mc-reviews-header {
    text-align: center;
}

.mc-reviews-heading {
    font-size: 97px;
}

.mc-reviews .mc-reviews-heading .mc-section-title {
    font-size: 1em;
    margin-bottom: var(--mc-section-head-em-title-gap);
}

.mc-reviews .mc-reviews-heading .mc-section-desc {
    font-size: 0.5em;
    font-weight: 400;
    margin: var(--mc-section-head-em-desc-top) auto 0;
    max-width: 42em;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.mc-reviews .mc-section-tag {
    color: rgba(255, 255, 255, 0.92);
}

.mc-reviews .mc-section-desc {
    color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 768px) {
    /* REVIEW 제목: 1em만 쓰면 공통 .mc-section-title과 겹쳐 잘리거나 과대해질 수 있어 명시 크기 */
    .mc-reviews-heading {
        font-size: clamp(20px, 5.2vw, 30px);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mc-reviews .mc-reviews-heading .mc-section-title {
        font-size: clamp(17px, 4.6vw, 24px);
        line-height: 1.22;
        letter-spacing: -0.04em;
        word-break: keep-all;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .mc-reviews .mc-reviews-heading .mc-section-desc {
        font-size: clamp(12px, 3.1vw, 15px);
        max-width: 100%;
    }

    .mc-cta-heading {
        font-size: clamp(22px, 6vw, 40px);
    }
}

.mc-reviews-marquees {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 28px);
    padding-bottom: 16px;
    -webkit-mask-image: none;
    mask-image: none;
}

.mc-reviews-marquee-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* 가장자리 페이드/마스크·흐림 잔존 방지 (테마·구버전 JS 대비) */
    -webkit-mask-image: none;
    mask-image: none;
}

.mc-reviews-marquee-track {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: clamp(20px, 3vw, 28px);
    width: max-content;
    padding: 10px 0 14px;
    will-change: transform;
    -webkit-mask-image: none;
    mask-image: none;
}

.mc-reviews-marquee--ltr .mc-reviews-marquee-track {
    animation: mc-reviews-marquee-ltr 52s linear infinite;
}

.mc-reviews-marquee--rtl .mc-reviews-marquee-track {
    animation: mc-reviews-marquee-rtl 48s linear infinite;
}

@keyframes mc-reviews-marquee-ltr {
    from {
        transform: translate3d(-50%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes mc-reviews-marquee-rtl {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.mc-review-block {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 0 0 auto;
    width: min(1160px, 92vw);
    max-width: 1160px;
    /* 구버전 스크립트 인라인 filter 등 덮어씀 */
    filter: none !important;
    -webkit-mask-image: none;
    mask-image: none;
    background: #ffffff;
    border: 1.5px solid rgba(74, 118, 253, 0.55);
    border-radius: 20px;
    box-sizing: border-box;
    overflow: visible;
    padding: clamp(22px, 2.8vw, 30px);
    gap: clamp(22px, 2.8vw, 30px);
    box-shadow: 0 8px 32px rgba(45, 85, 200, 0.08);
}

.mc-review-block__media {
    flex: 0 0 min(466px, 38vw);
    width: min(466px, 38vw);
    aspect-ratio: 1 / 1;
    max-width: 466px;
    max-height: 466px;
    align-self: center;
    background: #eeeeee;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    box-sizing: border-box;
}

.mc-review-block__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mc-review-block__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: clamp(6px, 1vw, 10px) clamp(4px, 1vw, 8px) 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    justify-content: center;
}

.mc-review-block__title {
    font-family: var(--font-cond);
    font-size: clamp(1.125rem, 2.1vw, 1.4rem);
    font-weight: 700;
    line-height: 1.42;
    color: #111111;
    margin: 0 0 clamp(22px, 2.8vw, 28px);
    padding: clamp(18px, 2.2vw, 22px) clamp(20px, 2.5vw, 24px);
    border: 1px solid rgba(74, 118, 253, 0.35);
    border-radius: 16px;
    background: #ffffff;
    box-sizing: border-box;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.8) inset,
        0 6px 28px rgba(74, 118, 253, 0.2),
        0 2px 12px rgba(74, 118, 253, 0.12);
}

.mc-review-block__text {
    font-family: var(--font-cond);
    font-size: clamp(15px, 1.85vw, 18px);
    font-weight: 400;
    line-height: 1.82;
    color: #4d4d4d;
    margin: 0 0 auto;
    padding-bottom: clamp(22px, 2.8vw, 28px);
    flex: 1;
}

.mc-review-block__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding-top: 4px;
    margin-top: auto;
}

.mc-review-block__type {
    font-family: var(--font-cond);
    font-size: clamp(15px, 1.95vw, 19px);
    font-weight: 700;
    color: var(--mc-reviews-bg);
    line-height: 1.3;
}

.mc-review-block__name {
    font-family: var(--font-cond);
    font-size: clamp(15px, 1.95vw, 19px);
    font-weight: 700;
    color: #111111;
    line-height: 1.3;
}

.mc-review-block__stars {
    font-size: clamp(16px, 2vw, 20px);
    color: #e6b800;
    letter-spacing: 4px;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .mc-reviews-marquee--ltr .mc-reviews-marquee-track,
    .mc-reviews-marquee--rtl .mc-reviews-marquee-track {
        animation: none;
        transform: translate3d(0, 0, 0);
    }
}

@media (max-width: 768px) {
    /* REVIEW: 마퀴 없음 — LTR·RTL 각 트랙을 세로로 쌓아 비클론 카드 4개(한 줄에 하나) */
    .mc-reviews-marquees {
        padding-left: clamp(12px, 4vw, 24px);
        padding-right: clamp(12px, 4vw, 24px);
        padding-bottom: 16px;
        box-sizing: border-box;
        gap: clamp(14px, 3.5vw, 22px);
    }

    .mc-reviews-marquee-viewport {
        overflow: visible;
        min-height: 0;
    }

    .mc-reviews-marquee--ltr .mc-reviews-marquee-track,
    .mc-reviews-marquee--rtl .mc-reviews-marquee-track {
        animation: none;
        transform: translate3d(0, 0, 0);
        will-change: auto;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: min(520px, 100%);
        margin-left: auto;
        margin-right: auto;
        gap: clamp(14px, 3vw, 20px);
        padding: 4px 0 6px;
    }

    .mc-review-block--clone {
        display: none;
    }

    .mc-review-block {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        flex-direction: row;
        align-items: stretch;
        padding: clamp(10px, 2.6vw, 14px);
        gap: clamp(8px, 2.2vw, 12px);
        border-radius: clamp(14px, 3vw, 18px);
        border-width: 1px;
        box-shadow: 0 4px 18px rgba(45, 85, 200, 0.07);
    }

    .mc-review-block__media {
        flex: 0 0 clamp(88px, 26vw, 120px);
        width: clamp(88px, 26vw, 120px);
        max-width: 120px;
        max-height: clamp(88px, 26vw, 120px);
        margin: 0;
        align-self: center;
        aspect-ratio: 1 / 1;
        border-radius: clamp(10px, 2vw, 14px);
    }

    .mc-review-block__media img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .mc-review-block__body {
        padding: 0;
        min-width: 0;
        width: auto;
        flex: 1 1 auto;
    }

    .mc-review-block__title {
        font-size: clamp(0.78rem, 2.75vw, 0.92rem);
        line-height: 1.32;
        margin: 0 0 clamp(6px, 1.8vw, 10px);
        padding: clamp(6px, 1.8vw, 10px) clamp(9px, 2.2vw, 12px);
        border-radius: clamp(9px, 2vw, 12px);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.85) inset,
            0 3px 12px rgba(74, 118, 253, 0.14);
    }

    .mc-review-block__text {
        font-size: clamp(11px, 2.95vw, 13px);
        line-height: 1.55;
        padding-bottom: clamp(6px, 1.8vw, 10px);
    }

    .mc-review-block__meta {
        gap: 6px 10px;
        padding-top: 2px;
    }

    .mc-review-block__type,
    .mc-review-block__name {
        font-size: clamp(11px, 2.85vw, 13px);
    }

    .mc-review-block__stars {
        font-size: clamp(12px, 3vw, 15px);
        letter-spacing: 1px;
    }
}

/* ========================================
   STATS — 실시간 철거 현황 · 연회색 배경 · 카드 마퀴 · 양끝 페이드 · 상단 그라데이션
   ======================================== */
.mc-stats {
    background-color: var(--mc-stats-section-bg);
}

/* 마퀴 직후 CTA 배너와 간격 줄임 — 공통 .mc-section 하단 80px 대신 */
.mc-section.mc-stats {
    padding-bottom: clamp(40px, 6vw, 64px);
}

.mc-stats-intro.mc-container {
    max-width: min(var(--mc-container-max), 100%);
    padding-left: clamp(20px, 4vw, 48px);
    padding-right: clamp(20px, 4vw, 48px);
}

.mc-stats-header {
    text-align: center;
}

.mc-stats .mc-section-title {
    color: #111111;
}

.mc-stats-marquee-outer {
    max-width: min(1600px, 100%);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(0px, 2vw, 24px);
    padding-right: clamp(0px, 2vw, 24px);
}

.mc-stats-marquee-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: clamp(420px, 52vw, 640px);
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #fff 12%,
        #fff 88%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #fff 12%,
        #fff 88%,
        transparent 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* 헤더·섹션 배경과 마퀴 카드 사이 경계를 부드럽게 (상단만, 하단 미적용) */
.mc-stats-marquee-viewport::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    height: clamp(48px, 8vw, 112px);
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        var(--mc-stats-section-bg) 0%,
        rgba(241, 243, 245, 0.55) 42%,
        rgba(241, 243, 245, 0) 100%
    );
}

.mc-stats-marquee-track {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: clamp(20px, 2.5vw, 28px);
    width: max-content;
    padding: 8px 0 24px;
    will-change: transform;
    /* 93카드×2(클론) — 오른쪽→왼쪽으로 흐름 */
    animation: mc-stats-marquee-rtl 600s linear infinite;
}

@keyframes mc-stats-marquee-rtl {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.mc-stats-card {
    flex: 0 0 auto;
    width: min(530px, 92vw);
    max-width: 530px;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.04),
        0 12px 32px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.mc-stats-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    outline: none;
}

.mc-stats-card__link:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-blue) 45%, transparent);
    border-radius: 20px;
}

.mc-stats-card__media {
    margin: 0;
    padding: 0;
    border-radius: 0;
    overflow: hidden;
    /* 회색 여백 방지: 로딩 전에도 카드와 동일 톤 */
    background: #ffffff;
    aspect-ratio: 530 / 331;
    position: relative;
    flex-shrink: 0;
    line-height: 0;
    font-size: 0;
}

/* cover + center는 상·하를 동일하게 잘라 현장 사진 하단이 잘릴 수 있음 → 위쪽(주요 피사체) 기준 */
.mc-stats-card__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* 이미지1: 카테고리(중)·제목(최대·검정)·지역(최소·회색) 3단 계층 */
.mc-stats-card__body {
    padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 30px);
}

.mc-stats-card__meta {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 14px);
    margin: 0 0 clamp(10px, 1.2vw, 14px);
}

.mc-stats-card__icon-img {
    display: block;
    width: clamp(36px, 4.2vw, 44px);
    height: clamp(36px, 4.2vw, 44px);
    flex-shrink: 0;
    border-radius: 10px;
    object-fit: contain;
    background: #ffffff;
    box-shadow:
        0 2px 4px rgba(63, 104, 254, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.mc-stats-card__type {
    font-family: var(--font-cond);
    font-size: clamp(15px, 1.55vw, 18px);
    font-weight: 700;
    color: var(--mc-blue);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.mc-stats-card__title {
    font-family: var(--font-cond);
    font-size: clamp(20px, 2.15vw, 26px);
    font-weight: 800;
    color: #000000;
    line-height: 1.28;
    margin: 0 0 clamp(6px, 0.8vw, 8px);
    letter-spacing: -0.03em;
}

.mc-stats-card__loc {
    font-family: var(--font-cond);
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 400;
    color: #5c5c5c;
    margin: 0;
    line-height: 1.45;
    letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
    .mc-stats-marquee-track {
        animation: none;
        transform: translate3d(0, 0, 0);
    }
}

@media (max-width: 768px) {
    /* 실시간 철거 현황: PC와 동일 한 줄 마퀴(클론·애니메이션 유지), 카드만 축소 */
    .mc-stats-marquee-outer {
        padding-left: clamp(0px, 1.5vw, 12px);
        padding-right: clamp(0px, 1.5vw, 12px);
    }

    .mc-stats-marquee-viewport {
        min-height: clamp(240px, 68vw, 360px);
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            #fff 8%,
            #fff 92%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            transparent 0%,
            #fff 8%,
            #fff 92%,
            transparent 100%
        );
    }

    .mc-stats-marquee-viewport::before {
        height: clamp(32px, 11vw, 72px);
    }

    .mc-stats-marquee-track {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        width: max-content;
        max-width: none;
        gap: clamp(12px, 2.8vw, 20px);
        padding: 6px 0 18px;
    }

    .mc-stats-card {
        width: min(248px, 68vw);
        max-width: 248px;
        border-radius: clamp(14px, 3vw, 18px);
    }

    .mc-stats-card__body {
        padding: clamp(12px, 3vw, 18px) clamp(12px, 3vw, 18px) clamp(14px, 3.2vw, 20px);
    }

    .mc-stats-card__meta {
        margin: 0 0 clamp(8px, 2vw, 12px);
        gap: 8px;
    }

    .mc-stats-card__icon-img {
        width: clamp(30px, 8vw, 36px);
        height: clamp(30px, 8vw, 36px);
        border-radius: 8px;
    }

    .mc-stats-card__type {
        font-size: clamp(12px, 3.1vw, 15px);
    }

    .mc-stats-card__title {
        font-size: clamp(14px, 3.6vw, 17px);
        margin: 0 0 clamp(4px, 1.2vw, 6px);
    }

    .mc-stats-card__loc {
        font-size: clamp(11px, 2.8vw, 13px);
    }
}

/* ========================================
   PROCESS — 이미지1·2: 5×2 그리드(양끝 필러+중앙 3열 카드) · 06 CTA
   ======================================== */
.mc-process {
    background-color: rgb(241, 243, 245);
    overflow-x: hidden;
}

.mc-process .mc-section-title {
    color: #111111;
}

.mc-process-steps-wrap {
    width: calc(100vw + 200px);
    margin-left: calc(50% - 50vw - 100px);
}

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

.mc-process-filler {
    background: #dee3eb;
    border-radius: 12px;
}

.mc-process-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    padding: clamp(28px, 3.6vw, 44px) clamp(24px, 3.2vw, 40px);
    min-height: clamp(220px, 28vw, 340px);
    box-sizing: border-box;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.mc-process-step:not(.mc-process-step--cta):hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.mc-process-num {
    display: block;
    font-family: var(--font-exp);
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 700;
    color: var(--mc-blue);
    line-height: 1.05;
    margin-bottom: clamp(14px, 1.8vw, 22px);
}

.mc-process-step__text {
    font-family: var(--font-cond);
    font-size: clamp(20px, 2.15vw, 30px);
    font-weight: 700;
    color: #111111;
    line-height: 1.32;
    letter-spacing: -0.03em;
    margin: 0;
}

/* 06 · 파란 CTA 카드 — 우하단 문의 링크 */
.mc-process-step--cta {
    background: var(--mc-blue);
    border: 1px solid rgba(63, 104, 254, 0.35);
    padding-bottom: clamp(52px, 6vw, 68px);
}

.mc-process-step--cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(63, 104, 254, 0.35);
}

.mc-process-step--cta .mc-process-num {
    color: #ffffff;
}

.mc-process-step--cta .mc-process-step__text {
    color: #ffffff;
}

.mc-process-step__cta-link {
    position: absolute;
    right: clamp(24px, 3.2vw, 40px);
    bottom: clamp(24px, 3.2vw, 40px);
    font-family: var(--font-cond);
    font-size: clamp(15px, 1.55vw, 18px);
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: -0.02em;
    transition: opacity 0.2s;
}

.mc-process-step__cta-link:hover {
    opacity: 0.88;
}

/* ========================================
   QUALITY — 이미지1 동일: 카드1·3 풀 이미지+그라데이션 / 카드2 상단 흰+하단 이미지
   ======================================== */
.mc-quality {
    background-color: var(--mc-quality-section-bg);
}

.mc-quality-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2vw, 24px);
}

/* 참고: 세로로 긴 포트레이트 카드(약 2 : 3.5 비율) */
.mc-quality-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 2 / 3.45;
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
}

/* 카드1·3만 어두운 오버레이 */
.mc-quality-card--overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.62) 100%);
    pointer-events: none;
    z-index: 0;
}

.mc-quality-card__body {
    position: relative;
    z-index: 1;
    padding: var(--mc-quality-inner-padding);
    width: 100%;
    box-sizing: border-box;
}

/* 카드1: 세로만 가운데 · 텍스트는 왼쪽 정렬 (안쪽 여백은 __body만 사용) */
.mc-quality-card--center {
    align-items: center;
    justify-content: flex-start;
}

.mc-quality-card--center .mc-quality-card__body {
    text-align: left;
    width: 100%;
    max-width: none;
}

.mc-quality-card--center .mc-quality-title {
    display: flex;
    justify-content: flex-start;
}

/* 카드1(s_8_1) — 참고안: cover 대비 확대 + 중심을 몸·바닥 쪽으로(머리 상단 크롭) */
.mc-quality-card--bg-s81 {
    background-color: #121212;
    background-size: 230%;
    background-position: center 100%;
}

/* 카드3: 하단 영역 · 왼쪽 정렬 */
.mc-quality-card--lower {
    align-items: flex-end;
    justify-content: flex-start;
}

.mc-quality-card--lower .mc-quality-card__body {
    text-align: left;
    width: 100%;
    max-width: none;
}

.mc-quality-card--lower .mc-quality-title {
    display: flex;
    justify-content: flex-start;
}

/* 카드2「현장 공유」: 상단 흰 영역(.mc-quality-card__top) + 하단 이미지(__media) — 흰 비율은 __top 의 flex % · min-height 로 조절 */
.mc-quality-card--split {
    flex-direction: column;
    background-color: #ffffff;
}

.mc-quality-card--split::before {
    display: none;
}

/* 현장 공유 — 흰색 박스 높이: flex % ↑ = 흰 영역↑ · 모바일은 @media(max-width:768px) 의 .mc-quality-card__top 참고 */
.mc-quality-card__top {
    flex: 0 0 30%;
    min-height: clamp(180px, 28%, 300px);
    background: #ffffff;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--mc-quality-inner-padding);
    box-sizing: border-box;
}

.mc-quality-card--split .mc-quality-card__body {
    padding: 0;
    width: 100%;
    max-width: none;
    text-align: left;
}

.mc-quality-card__media {
    flex: 1 1 auto;
    min-height: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 제목·부제: 카드 안에서 균형 있게 (참고 72/36 → 화면에 맞게 상한 조정) */
.mc-quality-title {
    font-family: var(--font-cond);
    font-size: clamp(28px, 3.6vw, 56px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 0;
}

.mc-quality-title__row {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.08em;
}

.mc-quality-title__leadwrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

.mc-quality-title__lead {
    display: block;
    line-height: 1.12;
}

.mc-quality-title__tail {
    white-space: pre;
    padding-top: 0;
    line-height: 1.12;
}

.mc-quality-title__rule {
    display: block;
    width: 100%;
    height: 9px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgb(63, 104, 254) 0%, rgba(255, 255, 255, 0) 92%);
}

.mc-quality-title--on-light {
    color: #000000;
}

.mc-quality-title--on-light .mc-quality-title__rule {
    background: linear-gradient(90deg, rgb(63, 104, 254) 0%, rgba(255, 255, 255, 0) 92%);
}

.mc-quality-subtitle {
    font-family: var(--font-cond);
    font-size: clamp(14px, 1.75vw, 28px);
    font-weight: 400;
    color: #ffffff;
    line-height: 1.2;
    margin: clamp(24px, 3vw, 36px) 0 0;
    text-align: left;
}

.mc-quality-subtitle--on-light {
    color: #000000;
}

/* ========================================
   SAFETY SECTION — 사진+전역 딤+스크림+비네트+SVG 블렌드 · 상단 QUALITY 톤 연결
   background-image 순서(앞이 위): 비네트 → 스크림 → SVG 블렌드 → 사진 딤 → 사진
   ::after: 하단을 STRUCTURE 상단색(--mc-structure-split-top)으로 페이드 — 이미지1 하단과 동일한 경계
   ======================================== */
.mc-safety {
    --mc-safety-bg-image: url("./layouts/moco100/images/s_9_bg.webp");
    /* Figma #container .css-ytoukf 와 동일: userSpaceOnUse 그라데이션 + matrix 변환 */
    --mc-safety-blend-overlay: url("./layouts/moco100/images/safety-blend-gradient.svg");
    position: relative;
    overflow: hidden;
    background-color: rgb(40, 41, 43);
    background-image: var(--mc-safety-vignette), var(--mc-safety-scrim), var(--mc-safety-blend-overlay), var(--mc-safety-photo-dim), var(--mc-safety-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.mc-safety::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    height: clamp(96px, 18vw, 240px);
    pointer-events: none;
    background: linear-gradient(
        to top,
        var(--mc-structure-split-top) 0%,
        color-mix(in srgb, var(--mc-structure-split-top) 52%, transparent) 40%,
        transparent 100%
    );
}

/* 제목·부제 블록: 배경 없음(섹션 배경이 비침) */
.mc-safety-heading-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    padding: var(--mc-section-head-block-y) 0 clamp(32px, 5vw, 56px);
}

.mc-safety-heading-panel .mc-container {
    position: relative;
    z-index: 1;
}

.mc-safety > .mc-container {
    position: relative;
    z-index: 1;
    padding-bottom: clamp(48px, 8vw, 100px);
}

/* SAFETY 헤더 타이포: css/safety-heading.css · 카드: css/safety-cards.css */

/* ========================================
   STRUCTURE SECTION — 상단 #1a1a1a / 하단 var(--mc-blue) 분할 · 카드가 경계에 걸침 · 흰 카드
   ======================================== */
.mc-structure {
    position: relative;
    z-index: 1;
    overflow: visible;
    min-height: var(--mc-structure-min-height);
    padding-top: var(--mc-structure-pad-top-extra);
    padding-bottom: var(--mc-structure-pad-bottom);
    box-sizing: border-box;
    background: linear-gradient(
        180deg,
        var(--mc-structure-split-top) 0%,
        var(--mc-structure-split-top) var(--mc-structure-split-pct),
        var(--mc-structure-split-bottom) var(--mc-structure-split-pct),
        var(--mc-structure-split-bottom) 100%
    );
}

/* SAFETY · CLIENTS와 동일: 래퍼 97px → 제목 1em · 부제 .mc-section-desc 0.5em */
.mc-structure-heading {
    text-align: center;
    font-size: 97px;
}

.mc-structure .mc-structure-heading .mc-section-title {
    font-size: 1em;
    margin-bottom: var(--mc-section-head-em-title-gap);
    line-height: 1.13;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.mc-structure .mc-structure-heading .mc-section-desc {
    font-size: 0.5em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    margin: var(--mc-section-head-em-desc-top) auto 0;
    max-width: 42em;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* 그리드를 위로 당겨 분할선 위·아래로 카드가 걸치게 함 · 음수 margin-bottom으로 다음 섹션과 겹침 */
.mc-structure-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.2vw, 28px);
    margin-top: clamp(-44px, -5.2vw, -76px);
    margin-bottom: calc(-1 * var(--mc-structure-card-overlap));
    position: relative;
    z-index: 2;
}

/* 카드 내부 타이포·간격: .mc-safety-grid .mc-safety-card* 와 동일(배경색에 맞춰 글자색만 조정) */
.mc-structure-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    text-align: center;
    background: #ffffff;
    border: none;
    border-radius: 14px;
    min-height: clamp(280px, 30vw, 400px);
    padding: clamp(26px, 3vw, 40px) clamp(22px, 2.6vw, 32px) clamp(28px, 3.2vw, 42px);
    box-sizing: border-box;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mc-structure-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.14),
        0 6px 16px rgba(0, 0, 0, 0.08);
}

.mc-structure-card__title {
    font-family: var(--font-cond);
    font-size: clamp(20px, 1.55vw, 30px);
    font-weight: 800;
    color: #111111;
    line-height: 1.28;
    letter-spacing: -0.03em;
    margin: 0;
    word-break: keep-all;
    text-align: center;
    flex-shrink: 0;
    width: 100%;
}

.mc-structure-card__icon {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(88px, 14vw, 140px);
    margin: clamp(22px, 3.2vw, 44px) 0;
    width: 100%;
}

.mc-structure-card__icon img {
    width: min(68%, 230px);
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 14px;
}

.mc-structure-card__desc {
    font-family: var(--font-cond);
    font-size: clamp(17px, 1.45vw, 23px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
    margin-top: auto;
    padding-top: clamp(6px, 1vw, 12px);
    word-break: keep-all;
    text-align: center;
    width: 100%;
    color: rgba(0, 0, 0, 0.72);
}

/* ========================================
   STATS 직후 — 풀폭 배너 CTA (배경 사진 + 반투명 흰 오버레이 · 어두운 제목 가독)
   상·하 ::before / ::after: STATS·PROCESS 공통 배경 rgb(241,243,245)와 자연스럽게 연결
   ======================================== */
/* STATS 직후 배너: min-height 로 세로 여유 — 본문은 flex 중앙 정렬 */
.mc-cta-section {
    --mc-cta-banner-overlay: rgba(255, 255, 255, 0.82);
    /* 기본: 현장 느낌 더미(레이아웃 stats_cta_bg 로 --mc-cta-banner-image 덮어쓰기) */
    --mc-cta-banner-image: url("https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1920&q=75");
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: min(72vh, 920px);
    padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px) clamp(48px, 8vw, 80px);
    text-align: center;
    background-color: var(--mc-stats-section-bg);
    background-image: linear-gradient(var(--mc-cta-banner-overlay), var(--mc-cta-banner-overlay)), var(--mc-cta-banner-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* STATS(mc-stats) 상단 연회색 → 본문 배경으로 페이드 */
.mc-cta-section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    height: clamp(72px, 14vw, 200px);
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        var(--mc-stats-section-bg) 0%,
        color-mix(in srgb, var(--mc-stats-section-bg) 48%, transparent) 42%,
        transparent 100%
    );
}

/* PROCESS 상단과 동일 톤으로 하단 경계 페이드 */
.mc-cta-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: clamp(72px, 14vw, 200px);
    pointer-events: none;
    background: linear-gradient(
        to top,
        var(--mc-stats-section-bg) 0%,
        color-mix(in srgb, var(--mc-stats-section-bg) 48%, transparent) 42%,
        transparent 100%
    );
}

.mc-cta-section__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: min(var(--mc-container-max), 100%);
    margin-left: auto;
    margin-right: auto;
}

/* CLIENTS와 동일: mc-section-header 래퍼 97px → 제목 1em · 부제 .mc-section-desc 0.5em */
/* 부제~버튼 사이 = 다른 섹션과 동일 리듬 */
.mc-cta-section .mc-cta-heading {
    font-size: 97px;
    text-align: center;
    margin-bottom: var(--mc-section-head-block-y);
    word-break: keep-all;
}

.mc-cta-section .mc-cta-heading .mc-section-title {
    font-size: 1em;
    color: #111111;
    margin-bottom: var(--mc-section-head-em-title-gap);
    line-height: 1.13;
    letter-spacing: -0.02em;
}

.mc-cta-section .mc-cta-heading .mc-section-desc {
    font-size: 0.5em;
    font-weight: 400;
    color: #2a2a2a;
    margin: var(--mc-section-head-em-desc-top) auto 0;
    max-width: 42em;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* 1행 「철거는 곧 청년철거,」 / 2행 「전국 1위의 이유가 있습니다」 */
.mc-cta-section__title-line {
    display: block;
}

.mc-cta-section__title-line + .mc-cta-section__title-line {
    margin-top: 0.06em;
}

.mc-cta-section__accent {
    color: var(--mc-blue);
    font-weight: inherit;
}

.mc-cta-section__btn.mc-btn {
    border-radius: 9999px;
    font-size: clamp(15px, 4vw, 33px);
    font-weight: 700;
    padding: clamp(14px, 2.1vw, 22px) clamp(28px, 4vw, 52px);
    line-height: 1.2;
    box-shadow: 0 4px 20px rgba(63, 104, 254, 0.3);
}

/* ========================================
   CTA SECTION — STRUCTURE 카드와 겹침: 카드가 이 섹션 배경 위로 걸치도록 상단 패딩으로 본문만 아래로 */
/* 상단 파랑 패널: 타이포·부제·제목행 간격·버튼 크기 = .mc-cta-section (stats-cta-banner) 과 동일 수치 — 해당 블록 CSS는 수정하지 않고 여기서만 스코프 */
/* ======================================== */
.mc-cta {
    position: relative;
    z-index: 0;
    background: var(--mc-blue);
    padding: 0;
}

/* .mc-section 공통 padding(80px/모바일 44px)이 섹션 하단에 남아 파란 띠로 보임 → CTA만 제거 */
.mc-section.mc-cta {
    padding-top: 0;
    padding-bottom: 0;
}

.mc-cta-primary-wrap {
    width: 100%;
    background: var(--mc-blue);
    box-sizing: border-box;
    /* 제목 위: STRUCTURE 겹침만큼 이미 여백 있음 — 상단 패딩은 작게 */
    padding: clamp(8px, 1.8vw, 28px) 0 clamp(56px, 9vw, 120px);
}

.mc-cta-primary-inner {
    text-align: center;
}

/* CLIENTS / stats-cta-banner 과 동일: 래퍼 97px → 제목 1em · 부제 .mc-section-desc 0.5em · 부제~버튼 = mc-section-head-block-y */
.mc-cta-primary-wrap .mc-section-header.mc-cta-heading {
    font-size: 97px;
    text-align: center;
    margin-bottom: var(--mc-section-head-block-y);
    word-break: keep-all;
}

.mc-cta-primary-wrap .mc-cta-heading .mc-section-title {
    font-size: 1em;
    color: #ffffff;
    margin-bottom: var(--mc-section-head-em-title-gap);
    line-height: 1.13;
    letter-spacing: -0.02em;
}

.mc-cta-primary-wrap .mc-cta-heading .mc-section-desc,
.mc-cta-primary-wrap .mc-cta-primary__desc {
    font-size: 0.5em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    margin: var(--mc-section-head-em-desc-top) auto 0;
    max-width: min(42em, 100%);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.mc-cta-primary__accent {
    color: #ffffff;
    font-weight: 800;
}

/* .mc-cta-section__btn.mc-btn 과 동일 치수 — 파랑 배경용 흰 버튼 */
.mc-cta-primary-wrap .mc-cta-primary__btn.mc-btn {
    border-radius: 9999px;
    font-size: clamp(15px, 4vw, 33px);
    font-weight: 700;
    padding: clamp(14px, 2.1vw, 22px) clamp(28px, 4vw, 52px);
    line-height: 1.2;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    background: #ffffff;
    color: var(--mc-blue);
}

.mc-cta-primary-wrap .mc-cta-primary__btn.mc-btn:hover {
    background: color-mix(in srgb, var(--mc-blue) 14%, #ffffff);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

.mc-cta-partner-outer {
    background: var(--mc-bg);
    padding: 0;
}

/* 파트너 CTA: 풀폭 배경(기본 layouts/moco100/images/s12_bg.webp) + 어두운 오버레이 · 레이아웃 partner_cta_bg 로 덮어쓰기 가능 */
.mc-cta-partner-panel {
    --mc-cta-partner-bg-image: url("./layouts/moco100/images/s12_bg.webp");
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: clamp(80px, 12vw, 140px) 0;
    background-color: #1a1a1a;
    background-image:
        linear-gradient(var(--mc-cta-partner-overlay), var(--mc-cta-partner-overlay)),
        var(--mc-cta-partner-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.mc-cta-partner-inner {
    text-align: center;
}

.mc-cta-partner-panel .mc-section-header.mc-cta-partner-heading {
    font-size: 97px;
    text-align: center;
    margin-bottom: var(--mc-section-head-block-y);
    word-break: keep-all;
}

.mc-cta-partner-panel .mc-cta-partner-heading .mc-section-title {
    font-size: 1em;
    color: #ffffff;
    margin-bottom: var(--mc-section-head-em-title-gap);
    line-height: 1.13;
    letter-spacing: -0.02em;
}

.mc-cta-partner__title-line {
    display: block;
}

.mc-cta-partner__title-line + .mc-cta-partner__title-line {
    margin-top: 0.06em;
}

.mc-cta-partner-panel .mc-cta-partner-heading .mc-section-desc,
.mc-cta-partner-panel .mc-cta-partner__desc {
    font-size: 0.5em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    margin: var(--mc-section-head-em-desc-top) auto 0;
    max-width: min(42em, 100%);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.mc-cta-partner-panel .mc-cta-partner__btn.mc-btn {
    border-radius: 9999px;
    font-size: clamp(15px, 4vw, 33px);
    font-weight: 700;
    padding: clamp(14px, 2.1vw, 22px) clamp(28px, 4vw, 52px);
    line-height: 1.2;
    background: var(--mc-blue);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 20px rgba(63, 104, 254, 0.35);
}

.mc-cta-partner-panel .mc-cta-partner__btn.mc-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(63, 104, 254, 0.42);
}

/* ========================================
   FOOTER
   ======================================== */
.mc-footer {
    background: #000000;
    color: #fff;
    padding-bottom: calc(var(--mc-footer-strip-height) + clamp(20px, 4vw, 36px));
    overflow-x: hidden;
}

/* 가로는 .mc-container와 합치기 — 단축 padding(... 0 ...) 쓰면 좌우가 0으로 덮여 여백 사라짐 */
.mc-footer-main {
    padding-top: clamp(48px, 6vw, 72px);
    padding-bottom: clamp(40px, 5vw, 56px);
}

.mc-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 4vw, 48px);
    align-items: start;
}

.mc-footer-brand {
    min-width: 0;
}

.mc-footer-brand-name {
    font-family: "Noto Sans KR", sans-serif;
    font-size: clamp(48px, 6vw, 72px);
    font-weight: 800;
    font-style: italic;
    color: #fff;
    text-decoration: none;
    letter-spacing: -0.03em;
    line-height: 1.12;
    display: inline-block;
}

.mc-footer-brand-name:hover {
    color: rgba(255, 255, 255, 0.85);
}

.mc-footer-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: var(--font-cond);
    font-size: clamp(22px, 2vw, 30px);
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.2;
}

.mc-footer-col--contact {
    max-width: min(300px, 100%);
    overflow-wrap: anywhere;
}

.mc-footer-col--contact .mc-footer-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.2;
}

/* 대표자 + 이름 한 줄 */
.mc-footer-col--contact .mc-footer-row--ceo-inline {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 10px;
    white-space: nowrap;
}

.mc-footer-col--contact .mc-footer-row--ceo-inline .mc-footer-value {
    white-space: nowrap;
    font-weight: 600;
    color: #fff;
}

.mc-footer-col--legal .mc-footer-row:not(.mc-footer-row--block) {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.2;
}

.mc-footer-col--legal {
    max-width: min(400px, 100%);
    text-align: left;
    overflow-wrap: anywhere;
}

.mc-footer-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: baseline;
}

.mc-footer-row--block {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.2;
}

.mc-footer-row--block .mc-footer-label {
    min-width: 0;
}

.mc-footer-row--block span:last-child {
    line-height: 1.2;
}

.mc-footer-address-value {
    line-height: 1.45;
}

.mc-footer-label {
    color: rgba(255, 255, 255, 0.7);
    min-width: 88px;
    flex-shrink: 0;
    line-height: 1.2;
}

.mc-footer-col--contact .mc-footer-label {
    min-width: 0;
}

.mc-footer-col--legal .mc-footer-label {
    min-width: 0;
}


.mc-footer-row a {
    color: #fff;
    text-decoration: none;
    line-height: 1.2;
}

.mc-footer-row a:hover {
    color: var(--mc-blue);
}

.mc-footer-copy {
    margin: 8px 0 0;
    font-size: clamp(17px, 1.45vw, 22px);
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.2;
    text-align: left;
}

/* PC: 참고 레이아웃 — 3열 · 라벨(회색) 윗줄·값(흰색) 아랫줄(대표자만 한 줄) · 링크 밑줄 · 저작권 #666 */
@media (min-width: 1024px) {
    .mc-footer-grid {
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(48px, 7vw, 100px);
        align-items: start;
    }

    .mc-footer-brand-name {
        font-size: clamp(44px, 5vw, 58px);
        line-height: 1.1;
    }

    .mc-footer-col {
        gap: clamp(14px, 1.8vw, 18px);
        font-size: clamp(18px, 1.45vw, 24px);
        line-height: 1.5;
        color: #ffffff;
    }

    .mc-footer-col--contact {
        max-width: none;
    }

    .mc-footer-col--contact .mc-footer-row:not(.mc-footer-row--ceo-inline) {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .mc-footer-col--contact .mc-footer-row--ceo-inline {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 8px;
        white-space: normal;
    }

    .mc-footer-col--contact .mc-footer-row--ceo-inline .mc-footer-value {
        white-space: normal;
        font-weight: 400;
    }

    .mc-footer-col--legal {
        max-width: none;
    }

    .mc-footer-col--legal .mc-footer-row--block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .mc-footer-col--legal .mc-footer-row:not(.mc-footer-row--block) {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .mc-footer .mc-footer-label {
        font-size: inherit;
        font-weight: 400;
        color: #a0a0a0;
    }

    .mc-footer-col--contact .mc-footer-row a,
    .mc-footer-col--contact .mc-footer-row span:not(.mc-footer-label),
    .mc-footer-col--legal .mc-footer-row span:not(.mc-footer-label) {
        font-size: inherit;
        font-weight: 400;
        color: #ffffff;
        line-height: 1.45;
    }

    .mc-footer .mc-footer-row a {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* 링크가 없는 값(인스타·유튜브 텍스트)도 참고 이미지처럼 밑줄 */
    .mc-footer-col--contact .mc-footer-row > span:not(.mc-footer-label):not(:has(a)) {
        text-decoration: underline;
        text-underline-offset: 3px;
        color: #ffffff;
    }

    .mc-footer .mc-footer-row a:hover {
        color: #ffffff;
        opacity: 0.88;
    }

    .mc-footer-copy {
        margin-top: 12px;
        font-size: clamp(14px, 1.05vw, 18px);
        line-height: 1.45;
        color: #666666;
    }
}

/* Footer ticker — 뷰포트 풀폭, 오른쪽→왼쪽 무한 루프(CSS transform, marquee 요소 미사용) */
.mc-footer-ticker {
    width: 100vw;
    max-width: 100%;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    left: 0;
    right: 0;
    background: #333333;
    border: none;
    box-shadow: none;
}

.mc-footer-ticker-viewport {
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: var(--mc-footer-strip-height);
    min-height: var(--mc-footer-strip-height);
    box-sizing: border-box;
}

.mc-footer-ticker-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: mc-footer-ticker-rtl 110s linear infinite;
}

.mc-footer-ticker-segment {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: clamp(18px, 2.2vw, 28px);
}

.mc-footer-ticker-item,
.mc-footer-ticker-sep {
    font-family: "Noto Sans KR", sans-serif;
    font-size: clamp(17px, 1.55vw, 22px);
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    user-select: none;
    line-height: 1.2;
}

.mc-footer-ticker-sep {
    color: rgba(255, 255, 255, 0.5);
    padding: 0 2px;
    font-weight: 600;
}

@keyframes mc-footer-ticker-rtl {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-footer-ticker-track {
        animation: none;
        transform: translate3d(0, 0, 0);
    }
}

/* ========================================
   FLOATING BAR (하단 배너 — 짙은 차콜 배경, 4요소 균등 배치)
   ======================================== */
.mc-floating-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    background: #1a1a1a;
    border: none;
    box-shadow: none;
    padding: 0;
    min-height: var(--mc-footer-strip-height);
    height: var(--mc-footer-strip-height);
    display: flex;
    align-items: center;
    transform: translateY(100%);
    transition: transform 0.4s ease;
    box-sizing: border-box;
}

.mc-floating-bar.mc-visible {
    transform: translateY(0);
}

.mc-floating-bar-inner {
    width: 100%;
    max-width: min(var(--mc-container-max), 100%);
    margin: 0 auto;
    min-height: 0;
    height: 100%;
    padding: 0 clamp(14px, 2.5vw, 36px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px clamp(10px, 1.5vw, 22px);
    box-sizing: border-box;
}

.mc-floating-label {
    font-family: "Noto Sans KR", var(--font-cond), sans-serif;
    font-size: clamp(17px, 1.45vw, 24px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
    color: #ffffff;
    white-space: nowrap;
}

.mc-floating-label-mid {
    margin-left: clamp(4px, 1.5vw, 20px);
}

.mc-floating-bar .mc-floating-btn-outline,
.mc-floating-bar .mc-floating-btn-solid {
    font-family: "Noto Sans KR", var(--font-cond), sans-serif;
    font-size: clamp(15px, 1.25vw, 20px);
    font-weight: 700;
    padding: 12px clamp(22px, 3vw, 40px);
    border-radius: 999px;
    line-height: 1.25;
}

.mc-floating-btn-outline {
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
}

.mc-floating-btn-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: none;
    box-shadow: none;
}

.mc-floating-btn-solid {
    background: var(--mc-blue);
    color: #ffffff;
    border: 1px solid transparent;
}

.mc-floating-btn-solid:hover {
    background: var(--mc-blue-2);
    transform: none;
    box-shadow: none;
}

@media (min-width: 1024px) {
    .mc-floating-bar {
        height: var(--mc-footer-strip-height);
        min-height: var(--mc-footer-strip-height);
    }

    .mc-floating-bar-inner {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0 clamp(12px, 1.4vw, 24px);
        padding: 0 clamp(16px, 2.5vw, 40px);
        max-width: min(var(--mc-container-max), 100%);
        min-height: 0;
        height: 100%;
    }

    .mc-floating-label-mid {
        margin-left: 0;
    }

    .mc-floating-label {
        font-size: clamp(18px, 1.35vw, 24px);
    }

    .mc-floating-bar .mc-floating-btn-outline,
    .mc-floating-bar .mc-floating-btn-solid {
        font-size: clamp(15px, 1.2vw, 20px);
        padding: 14px clamp(28px, 3.5vw, 44px);
    }
}

/* ========================================
   SUB CONTENT
   ======================================== */
.mc-sub-content {
    padding: 100px 0 60px;
    min-height: 60vh;
}

/* ========================================
   RESPONSIVE - TABLET (768px+)
   ======================================== */
@media (max-width: 1024px) {
    .mc-process-steps-wrap {
        width: calc(100vw + 140px);
        margin-left: calc(50% - 50vw - 70px);
    }

    .mc-process-grid {
        gap: 14px;
    }
}

@media (max-width: 768px) {
    :root {
        --mc-header-height: 60px;
        /* 헤더 블록 ↔ 본문(마퀴·그리드) — 제목/부제 내부 간격과 별도 */
        --mc-section-head-block-y: clamp(24px, 6vw, 38px);
        /* 태그↔제목 · 제목↔부제(모바일에서 넉넉히) */
        --mc-section-tag-gap-below: clamp(20px, 5vw, 32px);
        --mc-section-title-gap-below: clamp(26px, 6.5vw, 44px);
        /* 97px 래퍼형: 제목 줄간·제목↔부제 */
        --mc-section-head-em-title-gap: 0.58em;
        --mc-section-head-em-desc-top: 0.52em;
        --mc-footer-strip-height: clamp(52px, 12vw, 68px);
        --mc-quality-inner-padding: clamp(16px, 4vw, 24px);
    }

    /* 모바일 8섹션 헤더 상·하: POINT / REVIEW / STATS / PROCESS / QUALITY / SAFETY / STRUCTURE / CTA(파랑) — 아래 :root·섹션 전용 규칙으로 통일 */

    /* 섹션 공통 타이포(모바일) — 97px 고정 해제 · 여러 줄 제목 줄간도 넉넉히 */
    .mc-section-title {
        font-size: clamp(24px, 6.8vw, 36px);
        line-height: 1.26;
        letter-spacing: -0.06em;
        margin-bottom: var(--mc-section-title-gap-below);
    }

    .mc-section-tag {
        font-size: clamp(11px, 2.8vw, 14px);
        letter-spacing: -0.04em;
        margin-bottom: var(--mc-section-tag-gap-below);
    }

    .mc-section-subtitle {
        font-size: clamp(14px, 3.5vw, 17px);
    }

    .mc-section-desc,
    .mc-section-lead {
        font-size: clamp(13px, 3.2vw, 15px);
        line-height: 1.45;
    }

    /* 부제(마지막) 아래는 헤더 margin-bottom으로만 본문과 간격 — 중복 여백 제거 */
    .mc-section-header .mc-section-desc:last-child {
        margin-bottom: 0;
    }

    .mc-container {
        padding-left: clamp(16px, 4vw, 24px);
        padding-right: clamp(16px, 4vw, 24px);
    }

    /* SAFETY / STRUCTURE — 모바일: 이미지3 — 제목·카드 동일 기준선, 화면~카드 거터 한 겹(~20px대) */
    .mc-safety .mc-container,
    .mc-structure .mc-container {
        padding-left: clamp(18px, 5vw, 26px);
        padding-right: clamp(18px, 5vw, 26px);
    }

    /* SAFETY — 외곽 패널(내부 제목/부제 간격은 --mc-section-head-em-* ) */
    .mc-safety-heading-panel {
        padding-top: clamp(36px, 9vw, 52px);
        padding-bottom: clamp(36px, 9vw, 52px);
    }

    .mc-safety > .mc-container {
        padding-top: clamp(14px, 3.6vw, 22px);
        padding-bottom: clamp(48px, 11vw, 72px);
    }

    .mc-sub-content {
        padding: 72px 0 40px;
    }

    /* Header */
    .mc-nav {
        display: none;
    }

    .mc-mobile-toggle {
        display: flex;
    }

    /* Hero */
    .mc-hero {
        min-height: 100svh;
        padding: calc(var(--mc-header-height) + 20px) 16px 48px;
    }

    .mc-cta-section {
        min-height: min(52svh, 520px);
        padding: clamp(24px, 6vw, 44px) 20px clamp(40px, 9vw, 64px);
    }

    /* STATS 직후 CTA: .mc-cta-heading 97px 고정 → 모바일에서도 제목·부제(0.5em)가 커짐 · 클라이언트 헤더와 동일 스케일 */
    .mc-cta-section .mc-cta-heading {
        font-size: clamp(22px, 6vw, 40px);
    }

    .mc-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mc-hero-actions .mc-btn {
        width: 100%;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Sections — 섹션 사이 간격(제목/부제 블록 내부는 :root 태그·제목 변수) */
    .mc-section {
        padding: clamp(36px, 9vw, 50px) 0;
    }

    .mc-section.mc-stats {
        padding-bottom: clamp(28px, 7vw, 42px);
    }

    .mc-section.mc-reviews,
    .mc-section.mc-stats,
    .mc-section.mc-point,
    .mc-section.mc-process,
    .mc-section.mc-quality,
    .mc-section.mc-safety,
    .mc-section.mc-structure {
        padding-top: 0;
    }

    .mc-section-header {
        margin-bottom: clamp(20px, 5.5vw, 34px);
    }

    .mc-reviews-header,
    .mc-stats-header,
    .mc-point .mc-section-header,
    .mc-process > .mc-container > .mc-section-header:first-child,
    .mc-quality > .mc-container > .mc-section-header:first-child,
    .mc-safety-heading-panel .mc-section-header.mc-safety-heading,
    .mc-structure > .mc-container > .mc-section-header:first-child {
        margin-bottom: var(--mc-section-head-block-y);
    }

    /* SAFETY: 헤딩 패널은 상·하 padding으로만 간격 — 위 규칙 마진 제거(아래만 커 보이던 현상) */
    .mc-safety-heading-panel .mc-section-header.mc-safety-heading {
        margin-bottom: 0;
    }

    /* REVIEW / STATS: 인트로 ↔ 마퀴(추가 마진 최소) */
    .mc-reviews-marquees {
        margin-top: 0;
        gap: clamp(24px, 6vw, 32px);
    }

    .mc-stats-marquee-outer {
        margin-top: 0;
    }

    .mc-reviews-marquee-track {
        gap: clamp(18px, 4.5vw, 26px);
    }

    .mc-stats-marquee-track {
        gap: clamp(18px, 4.5vw, 26px);
    }

    /* CLIENTS: 제목 블록 ↔ 마퀴 */
    .mc-clients-marquees {
        margin-top: clamp(6px, 1.5vw, 12px);
    }

    /* Point — 모바일: 이미지1 — 가로 2열(이미지·텍스트 나란히) + 홀/짝 지그재그 */
    .mc-point-stack {
        gap: clamp(32px, 8vw, 52px);
    }

    .mc-point-row {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: clamp(10px, 2.8vw, 16px);
        padding: 0;
        width: 100%;
    }

    .mc-point-row--media-left {
        flex-direction: row;
    }

    .mc-point-row--media-right {
        flex-direction: row-reverse;
    }

    /* 이미지·텍스트 열 폭 균등(약 1:1, gap 제외) — 텍스트 정렬과 무관 */
    .mc-point-row-media {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
        margin: 0;
        border-radius: clamp(12px, 3.2vw, 18px);
    }

    .mc-point-row-media img {
        aspect-ratio: 1 / 1;
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: cover;
        display: block;
    }

    .mc-point-row-body {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
        align-items: flex-start;
        text-align: left;
        padding: 0;
        box-sizing: border-box;
    }

    /* 02·04행: 이미지 오른쪽 — 텍스트 블록 오른쪽 정렬 */
    .mc-point-row--media-right .mc-point-row-body {
        align-items: flex-end;
        text-align: right;
    }

    .mc-point-badge {
        width: 36px;
        height: 36px;
        font-size: 12px;
        margin-bottom: clamp(8px, 2.2vw, 12px);
    }

    .mc-point-row-title {
        font-size: clamp(0.88rem, 3.5vw, 1.05rem);
        line-height: 1.28;
        margin-bottom: clamp(6px, 2vw, 10px);
    }

    .mc-point-row-desc {
        font-size: clamp(0.72rem, 2.95vw, 0.88rem);
        line-height: 1.32;
    }

    /* Process — 필러 숨김 · 1줄 2열 · 데스크톱용 가로 확장(width/margin) 해제로 좌측 잘림 방지 */
    .mc-process-filler {
        display: none;
    }

    .mc-process-steps-wrap {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: clamp(16px, 4vw, 24px);
        padding-right: clamp(16px, 4vw, 24px);
        box-sizing: border-box;
    }

    .mc-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        gap: clamp(12px, 3.2vw, 16px);
    }

    .mc-process-step {
        min-height: 0;
        padding: clamp(14px, 3.5vw, 18px) clamp(10px, 2.8vw, 14px);
        border-radius: 14px;
    }

    .mc-process-num {
        font-size: clamp(18px, 4.2vw, 26px);
        margin-bottom: clamp(8px, 2vw, 12px);
    }

    .mc-process-step__text {
        font-size: clamp(12px, 3.25vw, 15px);
        line-height: 1.28;
        letter-spacing: -0.04em;
    }

    .mc-process-step--cta {
        padding-bottom: clamp(44px, 12vw, 52px);
    }

    .mc-process-step__cta-link {
        right: clamp(12px, 3vw, 16px);
        bottom: clamp(12px, 3vw, 16px);
        font-size: clamp(13px, 3.2vw, 15px);
    }

    /* Quality — 세로 min-height·max-height 약 50% 수준으로 축소 · 2열(분할)은 모바일에서 1·3열과 동일 풀 이미지+오버레이 */
    .mc-quality-grid {
        grid-template-columns: 1fr;
        gap: clamp(16px, 4vw, 22px);
    }

    .mc-quality-card {
        aspect-ratio: 2 / 1.85;
        max-height: min(46vw, 210px);
        min-height: 0;
    }

    .mc-quality-card--bg-s81 {
        background-size: 128%;
        background-position: center 42%;
    }

    /* 현장 공유 상단 흰 영역(모바일에서 분할 카드 배경이 풀블리드로 바뀌기 전 단계에서도 동일 클래스 사용) */
    .mc-quality-card__top {
        flex: 0 0 30%;
        min-height: clamp(72px, 18vw, 108px);
    }

    .mc-quality-card--split {
        flex-direction: column;
        justify-content: center;
        background-color: transparent;
        background-image: var(--quality-split-image);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .mc-quality-card--split::before {
        display: block;
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.62) 100%);
        pointer-events: none;
        z-index: 0;
    }

    .mc-quality-card--split .mc-quality-card__media {
        display: none;
    }

    /* 카드1(일정 준수)과 동일: 세로 가운데 · 텍스트 왼쪽 */
    .mc-quality-card--lower {
        align-items: center;
        justify-content: flex-start;
    }

    .mc-quality-card--split .mc-quality-card__top {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        background-color: transparent;
        padding: var(--mc-quality-inner-padding);
        position: relative;
        z-index: 1;
        align-self: stretch;
        box-sizing: border-box;
    }

    .mc-quality-card--split .mc-quality-title--on-light {
        color: #ffffff;
    }

    .mc-quality-card--split .mc-quality-subtitle--on-light {
        color: rgba(255, 255, 255, 0.92);
    }

    .mc-quality-title {
        font-size: clamp(22px, 5.5vw, 40px);
        line-height: 1.12;
    }

    .mc-quality-title__leadwrap {
        gap: clamp(6px, 2vw, 10px);
    }

    .mc-quality-title__rule {
        height: 7px;
    }

    .mc-quality-subtitle {
        font-size: clamp(13px, 3.4vw, 17px);
        margin-top: clamp(14px, 3.6vw, 22px);
        line-height: 1.4;
    }

    .mc-structure-heading {
        font-size: clamp(22px, 6vw, 40px);
    }

    .mc-clients-header {
        font-size: clamp(22px, 6vw, 40px);
    }

    :root {
        --mc-structure-min-height: clamp(480px, 82svh, 720px);
        /* STRUCTURE: 섹션 상단(짙은 배경) — 태그~제목 상단 여백 */
        --mc-structure-pad-top-extra: clamp(30px, 7.2vw, 50px);
        --mc-structure-pad-bottom: clamp(72px, 14vw, 120px);
        --mc-structure-card-overlap: clamp(40px, 10vw, 72px);
    }

    /* Structure — 모바일: 타이틀~카드 간격(음수 margin 제거) · 카드 폭=컨테이너(거터는 위 패딩만) */
    .mc-structure {
        --mc-structure-split-pct: 64%;
    }

    /* 섹션에 이미 --mc-structure-pad-top-extra → 컨테이너 상단은 이중 여백 방지 */
    .mc-structure > .mc-container {
        padding-top: clamp(12px, 3.2vw, 22px);
    }

    .mc-structure > .mc-container > .mc-section-header:first-child {
        margin-bottom: var(--mc-section-head-block-y);
    }

    .mc-structure-grid {
        grid-template-columns: 1fr;
        gap: clamp(14px, 3.5vw, 18px);
        margin-top: 0;
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        z-index: 2;
    }

    /* flex + min-height + 아이콘 flex:1 이 본문 영역을 압축/가리는 경우 방지 · 높이는 콘텐츠 기준 */
    .mc-structure-card {
        min-height: 0;
        height: auto;
        overflow: visible;
        justify-content: flex-start;
        gap: clamp(8px, 2.2vw, 14px);
        padding: clamp(16px, 4vw, 22px) clamp(14px, 3.5vw, 18px) clamp(18px, 4vw, 24px);
        border-radius: clamp(18px, 4.2vw, 24px);
        position: relative;
        z-index: 1;
    }

    .mc-structure-card__title {
        font-size: clamp(15px, 3.9vw, 19px);
    }

    .mc-structure-card__icon {
        flex: 0 0 auto;
        min-height: clamp(52px, 17vw, 96px);
        margin: 0;
    }

    .mc-structure-card__icon img {
        width: min(56%, 150px);
    }

    .mc-structure-card__desc {
        font-size: clamp(13px, 3.35vw, 16px);
        flex-shrink: 0;
        margin-top: 0;
        padding-top: 0;
    }

    /* CTA — 파랑(새로운 시작을~)·파트너(청년철거와~): 97px 래퍼가 모바일에서도 그대로 적용되던 문제 → 전용 축소 + 좌우 여유 */
    .mc-cta-primary-inner.mc-container,
    .mc-cta-partner-inner.mc-container {
        padding-left: clamp(18px, 5vw, 26px);
        padding-right: clamp(18px, 5vw, 26px);
    }

    /* CTA 파랑: 외곽 패딩 · 제목/부제 간격은 :root em 변수 */
    .mc-cta-primary-wrap {
        padding: clamp(14px, 3.6vw, 22px) 0 clamp(34px, 9vw, 56px);
    }

    .mc-cta-primary-wrap .mc-section-header.mc-cta-heading {
        font-size: clamp(20px, 5.2vw, 32px);
        margin-bottom: var(--mc-section-head-block-y);
    }

    .mc-cta-primary-wrap .mc-cta-heading .mc-section-title {
        line-height: 1.16;
        margin-top: 1.5em;
    }

    .mc-cta-primary-wrap .mc-cta-heading .mc-section-desc,
    .mc-cta-primary-wrap .mc-cta-primary__desc {
        line-height: 1.42;
    }

    .mc-cta-partner-panel {
        padding: clamp(44px, 11vw, 88px) 0 clamp(52px, 13vw, 96px);
    }

    .mc-cta-partner-panel .mc-section-header.mc-cta-partner-heading {
        font-size: clamp(17px, 4.4vw, 28px);
        margin-bottom: var(--mc-section-head-block-y);
    }

    .mc-cta-partner-panel .mc-cta-partner-heading .mc-section-title {
        line-height: 1.18;
    }

    .mc-cta-partner-panel .mc-cta-partner-heading .mc-section-desc,
    .mc-cta-partner-panel .mc-cta-partner__desc {
        line-height: 1.42;
    }

    /* Floating bar — 모바일: 참고 이미지처럼 「판단은 지금…」+ 카톡 버튼 1줄만 */
    .mc-floating-item--desktop-only {
        display: none !important;
    }

    .mc-floating-label-mid {
        margin-left: 0;
    }

    .mc-floating-bar {
        min-height: var(--mc-footer-strip-height);
        height: auto;
        background: #1a1a1a;
        justify-content: center;
    }

    .mc-floating-bar-inner {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        column-gap: clamp(10px, 3vw, 18px);
        row-gap: 0;
        padding: 6px 12px;
        min-height: var(--mc-footer-strip-height);
        box-sizing: border-box;
        /* 문구+버튼 너비만 사용 → 부모 flex에서 가운데 배치 */
        width: fit-content;
        max-width: calc(100% - 24px);
        flex-shrink: 0;
    }

    .mc-floating-label {
        white-space: normal;
        text-align: left;
        font-size: clamp(12px, 3.2vw, 15px);
        line-height: 1.3;
        min-width: 0;
        flex: 0 1 auto;
    }

    .mc-floating-bar .mc-floating-btn-outline,
    .mc-floating-bar .mc-floating-btn-solid {
        font-size: clamp(12px, 3.1vw, 15px);
        padding: 8px 14px;
        min-height: 0;
        width: auto;
        max-width: none;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .mc-floating-bar-inner .mc-btn {
        width: auto;
        max-width: none;
    }

    /* Footer — 플로팅 바(모바일 1줄) 높이에 맞춰 여백 */
    .mc-footer {
        padding-bottom: calc(var(--mc-footer-strip-height) + clamp(16px, 4vw, 28px));
    }

    .mc-footer-main {
        padding-top: clamp(40px, 10vw, 52px);
        padding-bottom: clamp(36px, 9vw, 48px);
    }

    /* 푸터 전용 가로 여유(.mc-container보다 한 단계 넉넉히) */
    .mc-footer .mc-container.mc-footer-main {
        padding-left: clamp(20px, 5.5vw, 28px);
        padding-right: clamp(20px, 5.5vw, 28px);
    }

    .mc-footer-brand-name {
        font-size: clamp(32px, 9vw, 48px);
    }

    .mc-footer-col {
        font-size: clamp(17px, 4.2vw, 22px);
        gap: 10px;
    }

    .mc-footer-copy {
        font-size: clamp(14px, 3.5vw, 18px);
    }

    .mc-footer-ticker-item,
    .mc-footer-ticker-sep {
        font-size: clamp(12px, 3.1vw, 16px);
    }

    .mc-footer-ticker-segment {
        gap: clamp(10px, 2vw, 16px);
    }

    .mc-footer-grid {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 28px;
    }

    .mc-footer-col--legal {
        text-align: left;
        max-width: none;
    }

    .mc-footer-row--block {
        align-items: flex-start;
    }

    .mc-footer-col--legal .mc-footer-row:not(.mc-footer-row--block) {
        justify-content: flex-start;
    }

    .mc-footer-row {
        flex-direction: column;
        gap: 2px;
        align-items: flex-start;
    }

    .mc-footer-label {
        min-width: auto;
    }
}

/* ========================================
   RESPONSIVE - SMALL MOBILE (480px-)
   ======================================== */
@media (max-width: 480px) {
    :root {
        --mc-section-head-block-y: clamp(22px, 6vw, 34px);
        --mc-section-tag-gap-below: clamp(16px, 4.2vw, 26px);
        --mc-section-title-gap-below: clamp(22px, 5.8vw, 36px);
        --mc-section-head-em-title-gap: 0.52em;
        --mc-section-head-em-desc-top: 0.46em;
    }

    .mc-section-title {
        font-size: clamp(20px, 6.2vw, 30px);
    }

    .mc-reviews .mc-reviews-heading .mc-section-title {
        font-size: clamp(16px, 4.4vw, 22px);
    }

    .mc-review-block__media {
        flex: 0 0 clamp(76px, 24vw, 108px);
        width: clamp(76px, 24vw, 108px);
        max-width: 108px;
        max-height: clamp(76px, 24vw, 108px);
    }

    .mc-review-block__title {
        font-size: clamp(0.72rem, 2.6vw, 0.88rem);
    }

    .mc-review-block__text {
        font-size: clamp(10px, 2.85vw, 12px);
    }

    .mc-review-block__type,
    .mc-review-block__name {
        font-size: clamp(10px, 2.75vw, 12px);
    }

    .mc-process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}