/* ==========================================================================
   DAMDA 2026 — 메인 페이지
   시안: main_base / main_scroll down / main_slider 1~4 / main_mobile ver
   레이아웃: 좌 슬라이더 스테이지 + 우 위젯(자주 묻는 질문·오시는길), 100vh 기준
   ========================================================================== */

/* 메인에서만 헤더 고정 (스크롤 다운 시안: GNB 유지된 채 푸터 노출) */
#header2026 {
    position: sticky;
    top: 0;
}

#main2026 {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 16px; /* 하단 간격은 푸터 margin(16px)이 담당 */
}

/* ---------- 본문 2컬럼 ---------- */
#main2026 .mn-body {
    display: flex;
    gap: 16px;
    align-items: stretch;
    /* 시안(1920×1080): 헤더 112 + 본문 952 + 하단 16 = 1080 */
    height: calc(100vh / var(--wide-zoom) - 128px);
    min-height: 720px;
}

/* ---------- 좌: 슬라이더 스테이지 ---------- */
#main2026 .mn-stage-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#main2026 .mn-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

/* 슬라이드 공통 (페이드 전환 0.3s — XD 기본) */
#main2026 .mn-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-out, visibility .3s ease-out;
}

#main2026 .mn-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* 슬라이드 헤드라인 밴드 */
#main2026 .mn-slide-head {
    flex: 0 0 auto;
    height: 228px;
    padding: 64px 120px 0 72px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

#main2026 .mn-head-title {
    /* XD 스펙: normal normal 520 56px/56px Pretendard */
    text-align: left;
    font-family: var(--font-kr);
    font-size: 56px;
    font-weight: 520;
    line-height: 56px;
    letter-spacing: -1.12px;
    color: #1F8E56;
    word-break: keep-all;
}

#main2026 .mn-head-sub {
    /* XD 스펙: normal normal 450 32px Pretendard
       줄 구성: 행간 37px + 줄 사이 마진 8px (푸터와 동일 패턴, 시안 피치 45px) */
    font-family: var(--font-kr);
    font-size: 32px;
    font-weight: 450;
    line-height: 37px;
    letter-spacing: -0.64px;
    color: #1F8E56;
    word-break: keep-all;
    padding-top: 6px;
    flex: 0 0 auto;
}

#main2026 .mn-head-sub span { display: block; }

#main2026 .mn-head-sub span + span { margin-top: 8px; } /* 문구 간 줄 간격 8px */

/* 슬라이드 미디어(사진/지도) */
#main2026 .mn-slide-media {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

#main2026 .mn-slide-media > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 슬라이드 4: 지도 SVG (전체 미디어 영역 커버 — viewBox 2824×1286) */
#main2026 .mn-slide-media.is-map { background: #D9E0DD; }

/* 부자재 상세 (사이드 '부자재' 칩 클릭 시 표시) — 방산시장 라벨 우측 */
#main2026 .mn-map-detail {
    position: absolute;
    left: 70%;
    top: 15.5%;
    width: 320px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-out, visibility .3s ease-out;
    z-index: 3;
}

/* 방산시장 라벨 → 텍스트 연결선 */
#main2026 .mn-map-detail::before {
    content: "";
    position: absolute;
    right: calc(100% + 12px);
    top: 14px;
    width: 96px;
    height: 1px;
    background: #252A28;
}

#main2026 .mn-map-detail-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.32px;
    color: #252A28;
}

#main2026 .mn-map-detail-photo {
    display: block;
    margin-top: 20px;
    width: 257px;
    height: auto;
}

#main2026 .mn-slide.is-detail .mn-map-detail {
    opacity: 1;
    visibility: visible;
}

/* 슬라이드 2: 클라이언트 로고 상하 마퀴 (홀수열 ↓ / 짝수열 ↑)
   XD 실측: 좌우 패딩 없이 4등분 전체 폭 사용, 하단은 컨트롤 영역(64px) 확보 */
#main2026 .mn-clients {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0 0 64px;
    overflow: hidden;
}

#main2026 .mn-client-col {
    position: relative;
    overflow: hidden;
    /* 위아래 살짝 페이드 */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}

/* 트랙은 JS가 3초마다 한 칸씩 스텝 이동 (영상: 스텝 방식, 홀수열 ↓ / 짝수열 ↑)
   로고 나열은 항상 4×4 고정: 트랙(10칸) = 열 높이의 250% → 한 칸 = 열의 25% */
#main2026 .mn-client-track {
    display: flex;
    flex-direction: column;
    height: 250%;
    will-change: transform;
}

#main2026 .mn-client-cell {
    flex: 0 0 10%; /* 트랙의 10% = 화면에 4칸 */
    display: flex;
    align-items: center;
    justify-content: center;
}

#main2026 .mn-client-cell img {
    width: auto;
    height: auto;
}

/* 로고별 표시 크기 — XD 아트보드 실측값 (slider1·2 교차 검증) */
#main2026 .mn-client-cell img[src*="/sempio"]         { width: 116px; }
#main2026 .mn-client-cell img[src*="/baskin-robbins"] { width: 147px; }
#main2026 .mn-client-cell img[src*="/ktng"]           { width: 173px; }
#main2026 .mn-client-cell img[src*="/kyobo"]          { width: 161px; }
#main2026 .mn-client-cell img[src*="/lg"]             { width: 100px; }
#main2026 .mn-client-cell img[src*="/jung-saemmool"]  { width: 212px; }
#main2026 .mn-client-cell img[src*="/kurly"]          { width: 123px; }
#main2026 .mn-client-cell img[src*="/cgv"]            { width: 106px; }
#main2026 .mn-client-cell img[src*="/sk-telecom"]     { width: 140px; }
#main2026 .mn-client-cell img[src*="/samsung"]        { width: 147px; }
#main2026 .mn-client-cell img[src*="/amorepacific"]   { width: 194px; }
#main2026 .mn-client-cell img[src*="/dr-g"]           { width: 87px; }
#main2026 .mn-client-cell img[src*="/picasso"]        { width: 135px; }
#main2026 .mn-client-cell img[src*="/smilegate"]      { width: 175px; }
#main2026 .mn-client-cell img[src*="/woori-card"]     { width: 154px; }
#main2026 .mn-client-cell img[src*="/chicor"]         { width: 139px; }
#main2026 .mn-client-cell img[src*="/genesis"]        { width: 153px; }
#main2026 .mn-client-cell img[src*="/starbucks"]      { width: 195px; }
#main2026 .mn-client-cell img[src*="/cj"]             { width: 73px; }
#main2026 .mn-client-cell img[src*="/pilot"]          { width: 159px; }

/* 슬라이더 컨트롤 (이전 / 일시정지 / 다음) — 스테이지 하단 중앙 */
#main2026 .mn-ctrl {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 5;
}

#main2026 .mn-ctrl button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #848D89;
    transition: color .2s ease;
}

#main2026 .mn-ctrl button:hover { color: var(--green); }

/* ---------- 좌 하단: 그린 스트립 ---------- */
#main2026 .mn-strip {
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 40px;
    background: var(--green);
    color: #F9F9F9;
}

#main2026 .mn-strip-title {
    /* XD 스펙: normal normal 500 24px/29px Pretendard */
    font-size: 24px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: -0.48px;
    color: #8CCC99;
    transition: color .2s ease;
}

#main2026 .mn-strip-list {
    /* XD 스펙: normal normal 500 24px/32px Pretendard */
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.48px;
    color: #8CCC99;
    white-space: nowrap;
    transition: color .2s ease;
}

/* 마우스 오버: 밝은 그린 (#E6FDE7) */
#main2026 .mn-strip-title:hover,
#main2026 .mn-strip-list:hover {
    color: #E6FDE7;
}

#main2026 .mn-strip-list span + span {
    position: relative;
    padding-left: 25px;
}

#main2026 .mn-strip-list span + span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: rgba(249, 249, 249, .4);
}

/* ---------- 우: 사이드 위젯 ---------- */
#main2026 .mn-side {
    flex: 0 0 460px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

/* 자주 묻는 질문 */
#main2026 .mn-faq {
    background: #fff;
    padding: 32px;
}

#main2026 .mn-faq-title {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.36px;
    color: #848D89;
}

#main2026 .mn-faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 아코디언 항목 (좌우는 카드 패딩 안쪽 기준으로 네거티브 마진 없이 배치) */
#main2026 .mn-faq-item {
    margin: 0 -16px;
    padding: 16px;
}

/* 첫 항목만 타이틀과 16px 간격 */
#main2026 .mn-faq-item:nth-child(1) { margin-top: 16px; }

#main2026 .mn-faq-item.is-open {
    /* XD 스펙 */
    background: #F9F9F9 0% 0% no-repeat padding-box;
    border-radius: 8px;
}

#main2026 .mn-faq-q {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: left;
}

/* 답변 (아코디언) — XD 스펙: normal normal 400 18px/32px Pretendard */
#main2026 .mn-faq-a {
    display: none;
    margin-top: 12px;
    margin-bottom: 8px;
    padding-left: 34px; /* 번호 18 + 간격 16 = 질문 텍스트와 정렬 */
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: -0.36px;
    color: #505554;
}

#main2026 .mn-faq-a strong { font-weight: 550; }

#main2026 .mn-faq-item.is-open .mn-faq-a { display: block; }

#main2026 .mn-faq-item.is-open .mn-faq-text { color: var(--green); }

#main2026 .mn-faq-num {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pastel-green);
    border-radius: 6px;
    /* XD 스펙: normal normal 400 14px/16px Pretendard */
    font-family: var(--font-kr);
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -0.28px;
    text-align: center;
    color: #1F8E56;
}

#main2026 .mn-faq-text {
    /* XD 스펙: normal normal 500 24px/29px Pretendard */
    text-align: left;
    margin-top: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: -0.48px;
    color: #252A28;
    transition: color .2s ease;
}

#main2026 .mn-faq-q:hover .mn-faq-text { color: var(--green); }

/* 오시는길(충무로) 카드 — FAQ 아코디언이 열리면 지도부터 줄어들도록 flex 구성 */
#main2026 .mn-loc {
    flex: 1 1 auto;
    min-height: 0;
    background: #fff;
    padding: 16px 16px 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#main2026 .mn-loc-map {
    width: 100%;
    height: 204px; /* 원본 비율 기준 (428×204) */
    flex: 0 1 auto;
    min-height: 0;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

#main2026 .mn-loc-inner { flex: 0 0 auto; }

#main2026 .mn-loc-inner { padding: 0 12px; }

#main2026 .mn-loc-title {
    margin-top: 28px;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.48px;
    color: #252A28;
}

#main2026 .mn-loc-text {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.32px;
    color: var(--dark-gray);
}

#main2026 .mn-loc-chip-row {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
}

#main2026 .mn-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--pastel-green);
    border-radius: 4px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.4px;
    color: var(--green);
}

#main2026 .mn-loc-chip-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.44px;
    color: #252A28;
}

/* ==========================================================================
   오프닝 애니메이션 (스플래시) — XD 프로토타입 영상 기준 재구현
   ① 블랙 위 그린 바가 세로로 자라 정사각형(152)
   ② 정사각형 안에 D 등장
   ③ 박스가 화면 전체로 확장 + DAMDA·태그라인 대각선 와이프(D는 중앙→제자리)
   ④ 그린 패널 위로 슬라이드 아웃 → 그레이(#EDEDED) 페이드 아웃 → 페이지
   ========================================================================== */
#mn-intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #252A28;
    overflow: hidden;
    cursor: pointer;
    opacity: 1;
}

#mn-intro[hidden] { display: none; }

/* 그레이 레이어: 패널 아래에 깔려 있다가 패널이 올라가면 드러남 */
#mn-intro .in-gray {
    position: absolute;
    inset: 0;
    background: #EDEDED;
    opacity: 0;
}

/* 그린 패널: 중앙 고정, 크기만 변함 */
#mn-intro .in-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 152px;
    height: 8px;
    background: #169254;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

/* 로고 + 태그라인 락업: D 글리프 중심(47, 50)을 기준점으로 화면 중앙에 배치
   시작은 D.svg 단독(정중앙) → DAMDA.svg가 창(width)이 넓어지며 D 뒤에서 슬라이드 아웃 */
#mn-intro .in-lockup {
    --ix: 0px;   /* 시작: D 글리프 = 화면 정중앙 */
    --is: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 365px;
    margin: -50px 0 0 -47px;      /* D 글리프 중심을 화면 중앙에 */
    transform-origin: 47px 50px;  /* 스케일도 D 글리프 중심 기준 */
    transform: translateX(var(--ix)) scale(var(--is));
    opacity: 0;
}

/* DAMDA.svg 슬라이드 창: 폭 0 → 365 (내용물은 고정, 창만 넓어짐) */
#mn-intro .in-word {
    position: relative;
    width: 0;
    height: 93px; /* 365 × 100/392 */
    overflow: hidden;
}

#mn-intro .in-word .in-logo {
    display: block;
    width: 365px;
    max-width: none;
    height: auto;
}

/* D.svg: 최상단 레이어, DAMDA의 D와 동일 좌표·스케일로 겹침 */
#mn-intro .in-d {
    position: absolute;
    left: 0;
    top: 0;
    width: 93px;  /* 100/392 × 365 */
    height: 93px;
    z-index: 2;
}

/* 태그라인 슬라이드 창: 폭 0 → 266, 로고 아래 중앙 */
#mn-intro .in-tagline-wrap {
    width: 0;
    height: 39px;
    margin: 2px 0 0 49.5px; /* (365-266)/2 = 중앙 정렬 기준점 */
    overflow: hidden;
}

/* 태그라인은 HTML 텍스트로 렌더 (svg <text>는 img 임베드 시 폰트 미적용) */
#mn-intro .in-tagline-wrap .in-tagline {
    display: block;
    width: 266px;
    font-family: var(--font-kr);
    font-size: 28px;
    font-weight: 600;
    line-height: 39px;
    letter-spacing: -0.04em;
    color: #252A28;
    text-align: center;
    white-space: nowrap;
}

/* 단계 진행: JS가 .p1~.p5 클래스 부여 — 타이밍·이징은 XD 프로토타입 영상 실측값 */

/* p1: 바 → 정사각형, 0.24s — 가속 곡선을 완화해 초반 움직임이 바로 보이게 */
#mn-intro.p1 .in-panel {
    height: 152px;
    transition: height .24s cubic-bezier(.45, 0, .7, .4);
}

/* p2: D 등장 — 정사각 완성과 거의 동시(짧은 페이드) */
#mn-intro.p2 .in-lockup {
    opacity: 1;
    transition: opacity .12s ease-out;
}

/* p3: 화면 확장 + DAMDA·태그라인 슬라이드, 0.36s (초반 약간 가속 → 감속) */
#mn-intro.p3 .in-panel {
    width: calc(100vw / var(--wide-zoom));
    height: calc(100vh / var(--wide-zoom));
    background: #1F8E56;
    transition: width .36s cubic-bezier(.45, 0, .25, 1),
                height .36s cubic-bezier(.45, 0, .25, 1),
                background-color .36s ease-out;
}

#mn-intro.p3 .in-lockup {
    --ix: -135.5px; /* 종료: DAMDA 로고 전체가 화면 중앙 (D는 좌측 제자리로) */
    transition: transform .36s cubic-bezier(.45, 0, .25, 1);
}

#mn-intro.p3 .in-word {
    width: 365px;
    transition: width .36s cubic-bezier(.45, 0, .25, 1);
}

#mn-intro.p3 .in-tagline-wrap {
    width: 266px;
    transition: width .3s cubic-bezier(.45, 0, .25, 1) .06s;
}

/* p4: 그린 패널 슬라이드 업, 0.6s ease-in-out (실측: 완만 시작 → 가속 → 감속)
   이동거리 102vh: 마지막 감속 구간까지 화면 안에서 보이도록 (영상: 0.6s에 걸쳐 이탈) */
#mn-intro.p4 .in-panel {
    transform: translate(-50%, calc(-50% - 102vh));
    transition: transform .6s cubic-bezier(.65, 0, .35, 1);
}

/* 그레이는 패널이 풀스크린인 슬라이드업 시점에 켜져 뒤에서 드러남 (확장 중엔 블랙 유지) */
#mn-intro.p4 .in-gray { opacity: 1; }

/* p5: 그레이 페이드 아웃 0.32s → 페이지 */
#mn-intro.p5 {
    opacity: 0;
    visibility: hidden;
    transition: opacity .32s ease-out, visibility .32s ease-out;
}

/* ==========================================================================
   팝업 (공지)
   ========================================================================== */
.mn-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(90vw / var(--wide-zoom));
    max-height: calc(90vh / var(--wide-zoom));
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .56);
    z-index: 9000;
    display: none;
}

.mn-popup.is-open { display: block; }

.mn-popup img {
    display: block;
    width: auto;
    max-width: calc(90vw / var(--wide-zoom));
    max-height: calc(90vh / var(--wide-zoom) - 56px);
}

.mn-popup .pu-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    font-size: 24px;
    line-height: 1;
    color: #252A28;
    background: rgba(255, 255, 255, .8);
    border-radius: 4px;
}

.mn-popup .pu-bar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px;
    background: #F9F9F9;
}

.mn-popup .pu-bar button {
    font-size: 14px;
    letter-spacing: -0.28px;
    color: var(--dark-gray);
    padding: 4px 10px;
}

.mn-popup .pu-bar button:hover { color: var(--ink); }

/* ==========================================================================
   모바일 (≤900px) — main_mobile ver 시안 기준 세로 스택
   ========================================================================== */
@media (max-width: 900px) {
    /* main_mobile ver 시안 실측(@2x): 페이지 거터 16, 카드 간 세로 간격 8 */
    #main2026 { padding: 0 16px; }

    #main2026 .mn-body {
        flex-direction: column;
        height: auto;
        min-height: 0;
    }

    #main2026 .mn-stage-wrap { gap: 8px; }

    #main2026 .mn-stage {
        min-height: 0;
        height: auto;
    }

    /* 모바일: 슬라이드를 문서 흐름으로 (활성 슬라이드만 표시) */
    #main2026 .mn-slide { position: relative; inset: auto; display: none; }

    #main2026 .mn-slide.is-active { display: flex; }

    /* 시안 실측: 상 32 / 좌우 24 / 하 24, 제목-부제 간격 12 */
    #main2026 .mn-slide-head {
        height: auto;
        flex-direction: column;
        gap: 12px;
        padding: 32px 24px 24px;
    }

    /* 시안 실측: 제목 글리프 높이 41px@2x ≈ 폰트 26px */
    #main2026 .mn-head-title {
        font-size: 26px;
        line-height: 36px;
        letter-spacing: -0.52px;
    }

    #main2026 .mn-head-sub {
        font-size: 18px;
        line-height: 28px;
        letter-spacing: -0.36px;
        padding-top: 0;
    }

    /* 시안: 부제는 한 줄 ("자체 인쇄기로 품질을 직접 관리.") */
    #main2026 .mn-head-sub span { display: inline; }
    #main2026 .mn-head-sub span + span { margin: 0 0 0 6px; }

    /* 시안 실측: 이미지 743×459@2x ≈ 비율 1.62 (기존 320px 고정보다 낮음) */
    #main2026 .mn-slide-media {
        flex: none;
        min-height: 0;
        aspect-ratio: 743 / 459;
    }

    /* 슬라이드 2(거래처 로고): 슬라이드 1·3·4 미디어와 동일 높이 유지,
       데스크톱과 같은 4×4 배열, 로고는 열 폭 대비 비례 축소
       (백분율 = 데스크톱 px ÷ 데스크톱 열 폭 353px) */
    #main2026 .mn-clients {
        flex: none;
        min-height: 0;
        aspect-ratio: 743 / 459;
        grid-template-columns: repeat(4, 1fr);
        padding: 0 8px 44px; /* 하단 컨트롤 공간 */
    }

    #main2026 .mn-client-cell img { width: auto; max-width: 82%; }

    #main2026 .mn-client-cell img[src*="/sempio"]         { width: 33%; }
    #main2026 .mn-client-cell img[src*="/baskin-robbins"] { width: 42%; }
    #main2026 .mn-client-cell img[src*="/ktng"]           { width: 49%; }
    #main2026 .mn-client-cell img[src*="/kyobo"]          { width: 46%; }
    #main2026 .mn-client-cell img[src*="/lg"]             { width: 28%; }
    #main2026 .mn-client-cell img[src*="/jung-saemmool"]  { width: 60%; }
    #main2026 .mn-client-cell img[src*="/kurly"]          { width: 35%; }
    #main2026 .mn-client-cell img[src*="/cgv"]            { width: 30%; }
    #main2026 .mn-client-cell img[src*="/sk-telecom"]     { width: 40%; }
    #main2026 .mn-client-cell img[src*="/samsung"]        { width: 42%; }
    #main2026 .mn-client-cell img[src*="/amorepacific"]   { width: 55%; }
    #main2026 .mn-client-cell img[src*="/dr-g"]           { width: 25%; }
    #main2026 .mn-client-cell img[src*="/picasso"]        { width: 38%; }
    #main2026 .mn-client-cell img[src*="/smilegate"]      { width: 50%; }
    #main2026 .mn-client-cell img[src*="/woori-card"]     { width: 44%; }
    #main2026 .mn-client-cell img[src*="/chicor"]         { width: 39%; }
    #main2026 .mn-client-cell img[src*="/genesis"]        { width: 43%; }
    #main2026 .mn-client-cell img[src*="/starbucks"]      { width: 55%; }
    #main2026 .mn-client-cell img[src*="/cj"]             { width: 21%; }
    #main2026 .mn-client-cell img[src*="/pilot"]          { width: 45%; }

    /* 위아래 페이드 폭도 축소된 높이에 맞춰 조정 */
    #main2026 .mn-client-col {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    }

    #main2026 .mn-ctrl { bottom: 16px; }

    /* 시안: 타이틀 없이 서비스 목록만 한 줄 가운데 정렬, 높이 64 (실측 127px@2x) */
    #main2026 .mn-strip {
        flex: none;
        min-height: 64px;
        height: auto;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 12px 8px;
    }

    #main2026 .mn-strip-title { display: none; }

    #main2026 .mn-strip-list {
        flex-wrap: wrap; /* 초소형 화면에서만 줄바꿈 (기본은 한 줄) */
        justify-content: center;
        row-gap: 6px;
        gap: 8px;
        font-size: 13px;
        letter-spacing: -0.39px;
        color: #F9F9F9; /* 시안: 밝은 흰색 계열 */
    }

    #main2026 .mn-strip-list span + span { padding-left: 9px; }

    #main2026 .mn-side {
        flex: none;
        margin-top: 8px;
        gap: 8px;
    }

    /* 시안: 모바일 섹션 순서 — 오시는길(지도)이 먼저, FAQ가 다음 */
    #main2026 .mn-loc { order: -1; }

    /* 시안: FAQ는 아코디언 대신 항상 펼쳐진 카드(#F9F9F9, radius 12),
       번호 칩 없음, 제목은 그린 */
    #main2026 .mn-faq { padding: 24px; }

    #main2026 .mn-faq-title { font-size: 16px; }

    #main2026 .mn-faq-item,
    #main2026 .mn-faq-item:nth-child(1) {
        margin: 16px 0 0;
        padding: 20px 24px;
        background: #F9F9F9;
        border-radius: 12px;
    }

    #main2026 .mn-faq-num { display: none; }

    #main2026 .mn-faq-q { pointer-events: none; }

    #main2026 .mn-faq-text {
        font-size: 18px;
        font-weight: 600;
        color: var(--green);
    }

    #main2026 .mn-faq-a {
        display: block;
        margin: 10px 0 0;
        padding-left: 0;
        font-size: 16px;
        line-height: 28px;
    }

    /* 데스크톱용 강제 줄바꿈은 모바일 폭에서 어색 — 자연 줄바꿈으로 */
    #main2026 .mn-faq-a br { display: none; }

    #main2026 .mn-loc { padding: 8px 8px 28px; }

    #main2026 .mn-loc-map { height: 200px; }

    #main2026 .mn-loc-inner { padding: 0 16px; }

    #main2026 .mn-loc-title { font-size: 21px; margin-top: 24px; }

    #main2026 .mn-chip { font-size: 17px; }

    #main2026 .mn-loc-chip-title { font-size: 19px; }

    #mn-intro .in-lockup { --is: 0.62; }

    #mn-intro.p3 .in-lockup { --ix: -84px; } /* -135.5 × 0.62 */
}

/* ==========================================================================
   와이드(>1920) — Figma 4K-MAIN 시안 실측값(절반 스케일) 재정의
   규칙 설명은 base/base.css 와이드 블록 주석 참고.
   ========================================================================== */
@media (min-width: 1921px) {
    #main2026 .mn-body {
        gap: 8px;
        /* 4K: 헤더(81) + 하단 간격(8) + 푸터(127) + 바닥 여백(8) = 224 */
        height: calc(100vh / var(--wide-zoom) - 224px);
        min-height: 500px;
    }

    /* 슬라이드 헤드 — 4K: 높이 274, 상 94, 좌 62 */
    #main2026 .mn-slide-head {
        height: 137px;
        padding: 47px 60px 0 31px;
    }

    #main2026 .mn-head-title {
        font-size: 28px;              /* 4K 56 */
        font-weight: 600;
        line-height: 33.5px;          /* 4K 67 */
        letter-spacing: 0;
    }

    #main2026 .mn-head-sub {
        font-size: 20px;              /* 4K 40 */
        line-height: 24px;            /* 4K 48 */
    }

    /* 그린 스트립 — 높이(64→4K 129)는 2배 규칙이라 그대로, 폰트만 재정의 */
    #main2026 .mn-strip { padding: 0 28px; } /* 4K 56 */

    #main2026 .mn-strip-title,
    #main2026 .mn-strip-list {
        font-size: 20px;              /* 4K 40 */
        font-weight: 600;
        line-height: 24px;
    }

    /* 우측 사이드 — 4K 940 */
    #main2026 .mn-side { flex: 0 0 470px; gap: 8px; }

    #main2026 .mn-faq-title { font-size: 16px; font-weight: 600; } /* 4K 32 */

    #main2026 .mn-faq-item { padding: 12px 16px; }

    #main2026 .mn-faq-text { font-size: 20px; line-height: 24px; } /* 4K 40 */

    #main2026 .mn-faq-a { font-size: 16px; line-height: 24px; }

    #main2026 .mn-faq-num {
        width: 14px;
        height: 14px;
        font-size: 10.5px;
        line-height: 12px;
        border-radius: 4px;
    }

    #main2026 .mn-loc-inner { padding: 0 16px; } /* 4K: 텍스트 좌측 오프셋 64(=32+32) */

    #main2026 .mn-loc-title { font-size: 20px; line-height: 24px; } /* 4K 40 */

    #main2026 .mn-loc-text { line-height: 22px; } /* 4K 줄피치 ~44 (폰트 16은 2배 규칙 그대로) */

    #main2026 .mn-chip { font-size: 16px; }           /* 4K 32 */

    #main2026 .mn-loc-chip-title { font-size: 17px; } /* 4K ~34 */
}

/* 와이드(>1920) 추가 보정 */
@media (min-width: 1921px) {
    /* 본문 좌우 여백을 헤더/푸터 인셋(8px)과 정렬 */
    #main2026 { padding: 0 8px; }

    /* 히어로 서브 문구: 두 줄 → 한 줄 */
    #main2026 .mn-head-sub span { display: inline; }
    #main2026 .mn-head-sub span + span::before { content: " "; }
}