/* ==========================================================================
   브랜드 키트 랜딩 (2026) — Figma DAMDApackage / [4K] Brand Kit 기준
   데스크톱: 4K 프레임(3840) 수치를 --u(=100vw/3840, 최대 1px)로 비례 렌더 —
   어떤 창 폭에서도 [4K] 아트보드와 동일한 비율 (ssabari 랜딩과 동일 체계).
   헤더·푸터는 공용(header-main / inc_footer)을 그대로 사용한다.

   시안 세로 좌표(프레임 기준)와 섹션 간격:
     hero 162 / qestion 1845 / We do 2787 / Why 3824 / Portfolio 6531 /
     bar 11561 / Process 12724 / With DAMDA 14366 / FAQ 16129 / banner 18350
   → 섹션 사이 여백은 전부 603u로 일정하다 (--kt-gap).
   ========================================================================== */

#body-wrapper.kt-wrap {
    background: #fff;
    max-width: 3840px;
    margin: 0 auto;
    padding-bottom: 0;
    padding-top: calc(var(--u) * 162); /* 고정 헤더 높이 */
    /* 4K 디자인 px → 화면 px 비례 단위 (3840 초과 화면은 1:1 고정) */
    --u: min(calc(100vw / 3840), 1px);
    --kt-gap: calc(var(--u) * 603);
    --kt-ink: #191919;
    --kt-sub: #4A4A4A;
    --kt-muted: #8B8B8B;
    --kt-line: #DCDCDC;
    --kt-soft: #F5F5F5;
    --kt-green: #1F8E56;
    --kt-green-light: #E8F5EE;
    color: var(--kt-ink);
}

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

/* 랜딩 래퍼는 자체 비례 스케일 → 공용 와이드 zoom 무효화, 푸터만 사이트 방식 유지
   (ssabari와 동일 — 헤더 단위 --uh도 이 구간에서 비례값으로 재정의) */
@media (min-width: 1921px) {
    #body-wrapper.kt-wrap { zoom: 1; }

    .kt-wrap #header2026 { --uh: min(calc(var(--damda-vw, 100vw) / 3840), 1px); }

    #body-wrapper.kt-wrap #footer2026 {
        zoom: tan(atan2(100vw, 1920px));
        margin: 8px;
    }
}

/* 3841 이상: 콘텐츠를 3840에 고정하고 가운데 정렬 */
@media (min-width: 3841px) {
    .kt-wrap #header2026 .hd-inner { max-width: 3840px; margin: 0 auto; }
}

/* ---------- 공통 텍스트 토큰 (4K 기준) ---------- */
.kt-h1 { font-size: calc(var(--u) * 64); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.kt-h2 { font-size: calc(var(--u) * 40); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.kt-h3 { font-size: calc(var(--u) * 28); font-weight: 600; line-height: 1.45; }
.kt-body { font-size: calc(var(--u) * 22); font-weight: 400; line-height: 1.65; color: var(--kt-sub); }

/* ==========================================================================
   1. 히어로 — 시안 hero(631:14033)
   프레임 3808×1080u(y162), 이미지 전면 + inset shadow 250u
   타이틀 64u SemiBold #fff (좌 956u / 상 274u), 본문 28u SemiBold #DCDCDC (상 470u),
   CTA 알약 18u Bold + 아이콘 32u (상 690u)
   ========================================================================== */
.kt-hero {
    position: relative;
    height: calc(var(--u) * 1080);
    margin: 0 calc(var(--u) * 16);
    overflow: hidden;
}

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

.kt-hero-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    padding-left: calc(var(--u) * 956);
    padding-top: calc(var(--u) * 274);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

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

.kt-hero-copy {
    /* 시안: 타이틀 하단(608) → 본문 상단(632) = 24u */
    margin-top: calc(var(--u) * 24);
    max-width: calc(var(--u) * 701);
    color: var(--kt-line);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
    line-height: 1.45;
}

/* CTA 알약 — 시안 nav-contact 195×50u(밴드 631:13998):
   텍스트 18 Bold lh1.65 + 아이콘 32, 패딩 8/8/8/16, 간격 8.
   히어로만 개정 시안(970:21890) 224×54u = 22 Bold — 아래에서 재정의 */
.kt-pill {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 8);
    padding: calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 16);
    border-radius: calc(var(--u) * 100);
    font-size: calc(var(--u) * 18);
    font-weight: 700;
    line-height: 1.65;
    transition: transform .25s ease, box-shadow .25s ease;
}

.kt-pill-glass {
    background: rgba(245, 245, 245, .15);
    border: 1px solid #8B8B8B;
    color: #fff;
    -webkit-backdrop-filter: blur(calc(var(--u) * 25));
    backdrop-filter: blur(calc(var(--u) * 25));
}

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

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

/* 본문 상단(796) → CTA 상단(852) = 56u.
   히어로 CTA는 개정 시안(970:21890) 224×54u — 22 Bold (ssabari 히어로와 동일) */
.kt-hero .kt-pill {
    margin-top: calc(var(--u) * 56);
    font-size: calc(var(--u) * 22);
}

/* ==========================================================================
   2. 질문 말풍선 — 시안 qestion(631:14028)
   흰 카드 2개(패딩 40u, r24u, 보더) 40u SemiBold. 두 번째 카드는 481u 우측·149u 아래
   ========================================================================== */
.kt-ask {
    margin-top: var(--kt-gap);
    padding-left: calc(var(--u) * 1448);
}

.kt-ask-bubble {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--u) * 40);
    border: 1px solid var(--kt-line);
    border-radius: calc(var(--u) * 24);
    background: #fff;
    font-size: calc(var(--u) * 40);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--kt-ink);
    box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 24) rgba(25, 25, 25, .04);
}

.kt-ask-bubble + .kt-ask-bubble {
    /* 시안: 두 번째 말풍선 x+481u, y +149u (첫 카드 190u 높이 → -41u 겹침).
       줄을 바꾸려고 블록 레벨(flex)로 두되, 그대로면 부모 폭까지 늘어나므로
       fit-content로 글자 폭에 맞춘다 — 시안 463×190u */
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: calc(var(--u) * 481);
    margin-top: calc(var(--u) * -41);
}

/* ==========================================================================
   3. 그린 스트립 — 시안 We do(745:34362)
   3808×434u, 아래로 갈수록 #E8F5EE (64.4%부터), 타이틀 64u(1행 그린/2행 먹),
   키워드 칩 6개(28u SemiBold, 간격 8u)
   ========================================================================== */
.kt-wedo {
    position: relative;
    margin: var(--kt-gap) calc(var(--u) * 16) 0;
    height: calc(var(--u) * 434);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 64.423%, #E8F5EE 100%);
    text-align: center;
}

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

.kt-wedo-title span { display: block; color: var(--kt-green); }

.kt-wedo-keys {
    /* 타이틀 상단(0) → 칩 상단(212u) */
    margin-top: calc(var(--u) * 39);
    display: flex;
    justify-content: center;
    gap: calc(var(--u) * 8);
    flex-wrap: wrap;
}

.kt-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--u) * 8) calc(var(--u) * 16);
    border: 1px solid var(--kt-green-light);
    border-radius: calc(var(--u) * 8);
    background: rgba(232, 245, 238, .5);
    -webkit-backdrop-filter: blur(calc(var(--u) * 10));
    backdrop-filter: blur(calc(var(--u) * 10));
    color: var(--kt-green);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}

/* ==========================================================================
   4. 다른 이유 — 시안 Why(748:34364)
   콘텐츠 컬럼 1211..2628u. 1행: 사진 827 + 카드 550 / 2행: 카드 786 + 사진 591
   ========================================================================== */
.kt-why {
    margin-top: var(--kt-gap);
    text-align: center;
}

.kt-why-eyebrow {
    color: var(--kt-green);
    font-size: calc(var(--u) * 40);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.kt-why-title {
    /* 시안: eyebrow 상단(0) → 타이틀 상단(86u) */
    margin-top: calc(var(--u) * 32);
    font-size: calc(var(--u) * 160);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.kt-why-rows {
    /* 타이틀 하단(502) → 1행 상단(644u) */
    margin: calc(var(--u) * 142) auto 0;
    width: calc(var(--u) * 1417);
    text-align: left;
}

.kt-why-row {
    display: flex;
    gap: calc(var(--u) * 40);
}

.kt-why-row + .kt-why-row { margin-top: calc(var(--u) * 40); }

.kt-why-col {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 40);
    flex: 0 0 calc(var(--u) * 786);
}

.kt-why-photo {
    position: relative;
    border-radius: calc(var(--u) * 40);
    background: var(--kt-ink);
    overflow: hidden;
}

.kt-why-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .6;
}

.kt-why-photo-a { flex: 0 0 calc(var(--u) * 827); height: calc(var(--u) * 600); }
.kt-why-photo-b { flex: 0 0 calc(var(--u) * 591); height: calc(var(--u) * 820); }

.kt-why-card {
    position: relative;
    border: 1px solid var(--kt-line);
    border-radius: calc(var(--u) * 40);
    background: var(--kt-soft);
}

.kt-why-card-1 { flex: 0 0 calc(var(--u) * 550); height: calc(var(--u) * 600); }
.kt-why-card-2 { height: calc(var(--u) * 372); }
.kt-why-card-3 { height: calc(var(--u) * 408); }

.kt-why-num {
    position: absolute;
    color: var(--kt-line);
    font-size: calc(var(--u) * 120);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.kt-why-card h3 {
    position: absolute;
    left: calc(var(--u) * 56);
    font-size: calc(var(--u) * 40);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.kt-why-card p {
    position: absolute;
    left: calc(var(--u) * 56);
    color: var(--kt-sub);
    font-size: calc(var(--u) * 22);
    line-height: 1.65;
}

/* 카드 1 — 번호가 제목 위(좌측) */
.kt-why-card-1 .kt-why-num { left: calc(var(--u) * 56); top: calc(var(--u) * 32); }
.kt-why-card-1 h3 { top: calc(var(--u) * 192); width: calc(var(--u) * 320); }
.kt-why-card-1 p { top: calc(var(--u) * 441); width: calc(var(--u) * 440); }

/* 카드 2·3 — 번호가 우측 상단 */
.kt-why-card-2 .kt-why-num,
.kt-why-card-3 .kt-why-num { left: calc(var(--u) * 650); top: calc(var(--u) * 43); }

.kt-why-card-2 h3,
.kt-why-card-3 h3 { top: calc(var(--u) * 69); width: calc(var(--u) * 500); }

.kt-why-card-2 p,
.kt-why-card-3 p { top: calc(var(--u) * 249); width: calc(var(--u) * 650); }

/* 스크롤 진입 연출 — ssabari 랜딩(.sb-rv)과 동일한 연출을 기준으로 삼는다.
   블러 → 선명 + 페이드 + 96u 라이즈, 이징 cubic-bezier(.5,0,.5,1).
   실제 규칙은 아래 "등장 애니메이션" 블록에서 .kt-js 하위로만 적용된다
   (JS가 죽어도 콘텐츠가 보이도록 하는 no-JS 폴백). */

/* ==========================================================================
   5. 목적별 포트폴리오 — 시안 Portfolio(650:108921)
   콘텐츠 972..2868u(1896). 그룹 3개(간격 1369u), 카드 605×910u 3열(간격 40u)
   ========================================================================== */
.kt-folio {
    margin-top: var(--kt-gap);
    text-align: center;
}

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

.kt-folio-group {
    /* 타이틀 상단(0) → 그룹 상단(326u), 타이틀 2행(172u) → 154u */
    margin: calc(var(--u) * 154) auto 0;
    width: calc(var(--u) * 1896);
}

.kt-folio-group + .kt-folio-group { margin-top: calc(var(--u) * 240); }

.kt-folio-group h3 {
    font-size: calc(var(--u) * 40);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.kt-folio-sub {
    margin-top: calc(var(--u) * 0);
    color: var(--kt-green);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
    line-height: 1.45;
}

/* 주요 용도 칩 — 시안 r100, 유리질감, "주요 용도" 16u Bold + 본문 18u */
.kt-folio-usage {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 8);
    margin-top: calc(var(--u) * 36);
    padding: calc(var(--u) * 8) calc(var(--u) * 16);
    border: 1px solid var(--kt-line);
    border-radius: calc(var(--u) * 100);
    background: rgba(245, 245, 245, .7);
    -webkit-backdrop-filter: blur(calc(var(--u) * 25));
    backdrop-filter: blur(calc(var(--u) * 25));
    color: var(--kt-ink);
    white-space: nowrap;
}

.kt-folio-usage b { font-size: calc(var(--u) * 16); font-weight: 700; line-height: 1.6; }

.kt-folio-usage span { font-size: calc(var(--u) * 18); font-weight: 400; line-height: 1.65; }

.kt-folio-cards {
    display: flex;
    gap: calc(var(--u) * 40);
    margin-top: calc(var(--u) * 40);
    text-align: left;
}

.kt-folio-card {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    color: inherit;
}

.kt-folio-media {
    position: relative;
    height: calc(var(--u) * 710);
    border-radius: calc(var(--u) * 40);
    overflow: hidden;
    background: var(--kt-soft);
}

.kt-folio-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.kt-folio-media::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 calc(var(--u) * 20) rgba(0, 0, 0, .05);
    pointer-events: none;
}

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

.kt-folio-card h4 {
    margin-top: calc(var(--u) * 40);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.kt-folio-card p {
    margin-top: calc(var(--u) * 16);
    color: var(--kt-sub);
    font-size: calc(var(--u) * 22);
    line-height: 1.65;
    min-height: calc(var(--u) * 73);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kt-folio-more {
    display: block;
    margin-top: calc(var(--u) * 7);
    color: var(--kt-muted);
    font-size: calc(var(--u) * 15);
    line-height: 1.5;
}

/* 그룹 하단 CTA — 시안 Button_Portfolio(307×75u) */
.kt-folio-cta {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    gap: calc(var(--u) * 8);
    margin: calc(var(--u) * 159) auto 0;
    padding: calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 24);
    border: 1px solid var(--kt-line);
    border-radius: calc(var(--u) * 100);
    background: rgba(245, 245, 245, .7);
    -webkit-backdrop-filter: blur(calc(var(--u) * 25));
    backdrop-filter: blur(calc(var(--u) * 25));
    color: var(--kt-ink);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
    transition: border-color .25s ease, color .25s ease, transform .25s ease;
}

.kt-folio-cta:hover { border-color: var(--kt-green); color: var(--kt-green); transform: translateY(-2px); }

.kt-folio-cta .kt-pill-arrow { width: calc(var(--u) * 32); height: calc(var(--u) * 32); flex-basis: calc(var(--u) * 32); }

/* ==========================================================================
   6. 시딩키트 밴드 — 시안 bar(631:13994) 3808×560u
   ========================================================================== */
.kt-band {
    position: relative;
    height: calc(var(--u) * 560);
    margin: var(--kt-gap) calc(var(--u) * 16) 0;
    overflow: hidden;
    background: #111 url("../../img2026/kit/bar-bg.jpg") center/cover no-repeat;
}

.kt-band-inner {
    position: relative;
    z-index: 1;
    padding: calc(var(--u) * 210) 0 0 calc(var(--u) * 956);
}

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

.kt-band .kt-pill { margin-top: calc(var(--u) * 16); }

/* ==========================================================================
   7. 프로세스 — 시안 Process(748:34365)
   카드 6개(444×559u, 간격 40u), 상단 흰 카드 423u + 하단 설명 136u
   ========================================================================== */
.kt-proc {
    margin-top: var(--kt-gap);
    text-align: center;
}

.kt-proc-head {
    position: relative;
    width: calc(var(--u) * 848);
    margin: 0 auto;
}

.kt-proc-eyebrow {
    display: flex;
    justify-content: space-between;
    color: var(--kt-green);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
    line-height: 1.45;
}

/* 진행 바 — 시안: 15u에서 848u까지 자라난다 (ssabari와 동일하게 scaleX로 구현) */
.kt-proc-bar {
    height: calc(var(--u) * 4);
    width: calc(var(--u) * 848);
    margin-top: calc(var(--u) * 17);
    background: linear-gradient(90deg, rgba(31, 142, 86, 0) 0%, #1F8E56 100%);
}

.kt-proc-title {
    margin-top: calc(var(--u) * 24);
    color: var(--kt-sub);
    font-size: calc(var(--u) * 120);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.kt-proc-list {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: calc(var(--u) * 40);
    /* 타이틀 상단(86) → 카드 상단(314u) : 타이틀 156u + 72u */
    margin-top: calc(var(--u) * 72);
    text-align: left;
}

.kt-proc-item {
    flex: 0 0 calc(var(--u) * 444);
    display: flex;
    flex-direction: column;
}

.kt-proc-top {
    position: relative;
    height: calc(var(--u) * 423);
    border: 1px solid var(--kt-line);
    border-bottom: 0;
    border-radius: calc(var(--u) * 40) calc(var(--u) * 40) 0 0;
    background: #fff;
}

.kt-proc-num {
    position: absolute;
    left: calc(var(--u) * 56);
    top: calc(var(--u) * 54);
    color: var(--kt-line);
    font-size: calc(var(--u) * 120);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.kt-proc-ico {
    position: absolute;
    left: calc(var(--u) * 56);
    top: calc(var(--u) * 228);
    width: calc(var(--u) * 130);
    height: calc(var(--u) * 130);
    object-fit: contain;
}

.kt-proc-top h3 {
    position: absolute;
    left: calc(var(--u) * 56);
    right: calc(var(--u) * 56);
    top: calc(var(--u) * 382);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}

.kt-proc-body {
    flex: 1 1 auto;
    border: 1px solid var(--kt-line);
    border-top: 0;
    border-radius: 0 0 calc(var(--u) * 40) calc(var(--u) * 40);
    background: #fff;
    padding: calc(var(--u) * 8) calc(var(--u) * 54) calc(var(--u) * 56) calc(var(--u) * 56);
    color: var(--kt-sub);
    font-size: calc(var(--u) * 22);
    line-height: 1.65;
    word-break: break-all;
    line-break: anywhere;
}

.kt-proc-notice {
    width: calc(var(--u) * 1880);
    /* 카드 하단(873) → notice 상단(946u), 좌측은 시안 972u 컬럼 */
    margin: calc(var(--u) * 73) auto 0 calc(var(--u) * 972);
    padding-top: calc(var(--u) * 17);
    border-top: 1px solid var(--kt-line);
    color: var(--kt-ink);
    font-size: calc(var(--u) * 22);
    line-height: 1.65;
}

/* ==========================================================================
   8. 함께한 브랜드 — 시안 With DAMDA(748:34366) 로고 4행
   ========================================================================== */
.kt-brand {
    margin-top: var(--kt-gap);
    text-align: center;
}

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

.kt-brand-rows {
    /* 타이틀 상단(0) → 첫 행 상단(241u), 타이틀 86u */
    margin-top: calc(var(--u) * 155);
}

.kt-brand-row {
    display: block;
    margin: 0 auto;
    height: auto;
}

.kt-brand-row + .kt-brand-row { margin-top: calc(var(--u) * 166); }

/* aspect-ratio로 로드 전 높이를 예약 — lazy 이미지가 늦게 들어와도 레이아웃이 밀리지 않는다 */
.kt-brand-row-1 { width: calc(var(--u) * 2639); aspect-ratio: 2639 / 109; }
.kt-brand-row-2 { width: calc(var(--u) * 2687); aspect-ratio: 2687 / 113; }
.kt-brand-row-3 { width: calc(var(--u) * 2696); aspect-ratio: 2696 / 111; }
.kt-brand-row-4 { width: calc(var(--u) * 2675); aspect-ratio: 2675 / 91; }

/* ==========================================================================
   9. FAQ — 시안 FAQ(631:13947) : 회색 밴드 + 아코디언 4문항(1896u, 간격 24u)
   ========================================================================== */
.kt-faq {
    margin: var(--kt-gap) calc(var(--u) * 16) 0;
    padding: calc(var(--u) * 320) 0 calc(var(--u) * 339);
    background: var(--kt-soft);
    text-align: center;
}

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

.kt-faq-list {
    width: calc(var(--u) * 1896);
    /* 타이틀 상단(320) → 목록 상단(486u), 타이틀 86u */
    margin: calc(var(--u) * 80) auto 0;
    text-align: left;
}

.kt-faq-item + .kt-faq-item { margin-top: calc(var(--u) * 24); }

.kt-faq-q {
    display: block;
    width: 100%;
    padding: calc(var(--u) * 56);
    border: 0;
    border-radius: calc(var(--u) * 24);
    background: #fff;
    color: var(--kt-ink);
    font-family: inherit;
    font-size: calc(var(--u) * 40);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-align: left;
    cursor: pointer;
    transition: border-radius .2s ease;
}

.kt-faq-item.is-open .kt-faq-q {
    padding-bottom: calc(var(--u) * 16);
    border-radius: calc(var(--u) * 24) calc(var(--u) * 24) 0 0;
}

.kt-faq-a {
    display: none;
    padding: 9px calc(var(--u) * 56) calc(var(--u) * 56);
    border-radius: 0 0 calc(var(--u) * 24) calc(var(--u) * 24);
    background: #fff;
    color: var(--kt-sub);
    font-size: calc(var(--u) * 28);
    font-weight: 400;
    line-height: 1.45;
}

.kt-faq-item.is-open .kt-faq-a { display: block; }

/* ==========================================================================
   10. 하단 배너 — 시안 banner(631:13942) 3808×1000u
   ========================================================================== */
.kt-banner {
    position: relative;
    height: calc(var(--u) * 1000);
    margin: var(--kt-gap) calc(var(--u) * 16) 0;
    overflow: hidden;
    background: #000;
    text-align: center;
}

.kt-banner-media {
    position: absolute;
    inset: 0;
    background: url("../../img2026/kit/photo-meeting.jpg") center 35% / cover no-repeat;
    opacity: .3;
}

.kt-banner-inner { position: relative; z-index: 1; padding-top: calc(var(--u) * 387); }

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

.kt-banner .kt-pill {
    margin-top: calc(var(--u) * 32);
    padding: calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 24);
    border-color: var(--kt-line);
    font-size: calc(var(--u) * 28);
    font-weight: 600;
    line-height: 1.45;
}

/* ---------- 우하단 고정 CTA (시안 nav-contact-4k 415×135) ---------- */
.kt-float-cta {
    position: fixed;
    right: max(calc(var(--u) * 40), 16px);
    bottom: max(calc(var(--u) * 40), 16px);
    z-index: 300;
    display: block;
    background: #2F6B44;
    color: #fff;
    border-radius: max(calc(var(--u) * 12), 8px);
    padding: max(calc(var(--u) * 28), 12px) max(calc(var(--u) * 40), 16px) max(calc(var(--u) * 22), 10px) max(calc(var(--u) * 48), 18px);
    box-shadow: 0 calc(var(--u) * 16) calc(var(--u) * 40) rgba(20, 40, 28, .35);
    transition: transform .25s ease, box-shadow .25s ease;
}

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

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

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

/* ==========================================================================
   등장 애니메이션 — ssabari 랜딩(.sb-rv)과 동일
   블러 → 선명 + 페이드 + 라이즈(96u) · 언더바: 폭 15→848(scaleX)
   JS가 .kt-wrap에 kt-js를 붙인 뒤에만 초기 숨김 (no-JS 폴백 안전)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    .kt-js .kt-reveal {
        opacity: 0;
        transform: translateY(calc(var(--u) * 96));
        filter: blur(max(calc(var(--u) * 24), 10px));
        transition:
            opacity .8s cubic-bezier(.5, 0, .5, 1),
            transform .8s cubic-bezier(.5, 0, .5, 1),
            filter .9s cubic-bezier(.5, 0, .5, 1);
        transition-delay: var(--rvd, 0s);
        will-change: opacity, transform, filter;
    }

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

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

    .kt-js .kt-proc-bar.is-in { transform: scaleX(1); }
}

/* ==========================================================================
   모바일 (≤900)
   ========================================================================== */
@media (max-width: 900px) {
    #body-wrapper.kt-wrap { padding-top: 48px; }

    .kt-hero {
        height: auto;
        min-height: 380px;
        margin: 0;
    }

    /* 사진이 꽉 차 흰 텍스트와 겹치므로 좌측에 어두운 스크림을 깐다 */
    .kt-hero-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, rgba(20, 18, 15, .72) 0%, rgba(20, 18, 15, .55) 46%, rgba(20, 18, 15, .12) 100%);
    }

    .kt-hero-inner {
        padding: 64px 24px 40px;
    }

    .kt-hero-title { font-size: 26px; line-height: 1.35; }

    .kt-hero-copy { font-size: 15px; line-height: 1.6; margin-top: 16px; max-width: none; }

    .kt-hero .kt-pill { margin-top: 24px; }

    .kt-pill { font-size: 13px; padding: 6px 6px 6px 12px; gap: 6px; }

    .kt-pill-arrow { width: 22px; height: 22px; flex-basis: 22px; }

    /* --- 질문 말풍선 --- */
    .kt-ask { margin-top: 56px; padding: 0 20px; }

    .kt-ask-bubble {
        display: flex;
        padding: 18px 20px;
        border-radius: 14px;
        font-size: 17px;
    }

    /* 모바일은 두 말풍선 모두 화면 폭에 맞춘다 (데스크톱 fit-content 해제) */
    .kt-ask-bubble + .kt-ask-bubble { width: auto; margin: 10px 0 0 24px; }

    /* --- 그린 스트립 --- */
    .kt-wedo {
        margin: 44px 0 0;
        height: auto;
        padding: 28px 20px 32px;
    }

    .kt-wedo-title { font-size: 22px; }

    .kt-wedo-keys { margin-top: 18px; gap: 6px; }

    .kt-key { font-size: 13px; padding: 5px 10px; border-radius: 6px; }

    /* --- 다른 이유 --- */
    .kt-why { margin-top: 56px; padding: 0 20px; }

    .kt-why-eyebrow { font-size: 16px; }

    .kt-why-title { font-size: 30px; margin-top: 10px; line-height: 1.3; }

    .kt-why-rows { width: auto; margin-top: 28px; }

    .kt-why-row { flex-direction: column; gap: 14px; }

    .kt-why-row + .kt-why-row { margin-top: 14px; }

    .kt-why-col { flex: none; gap: 14px; }

    .kt-why-photo-a,
    .kt-why-photo-b { flex: none; height: 220px; border-radius: 18px; }

    .kt-why-card,
    .kt-why-card-1,
    .kt-why-card-2,
    .kt-why-card-3 { flex: none; height: auto; border-radius: 18px; padding: 20px; }

    .kt-why-card .kt-why-num,
    .kt-why-card-1 .kt-why-num,
    .kt-why-card-2 .kt-why-num,
    .kt-why-card-3 .kt-why-num {
        position: static;
        display: block;
        font-size: 40px;
        line-height: 1.1;
    }

    .kt-why-card h3,
    .kt-why-card-1 h3,
    .kt-why-card-2 h3,
    .kt-why-card-3 h3 {
        position: static;
        width: auto;
        margin-top: 6px;
        font-size: 19px;
    }

    .kt-why-card p,
    .kt-why-card-1 p,
    .kt-why-card-2 p,
    .kt-why-card-3 p {
        position: static;
        width: auto;
        margin-top: 10px;
        font-size: 14px;
    }



    /* --- 포트폴리오 --- */
    .kt-folio { margin-top: 56px; padding: 0 20px; }

    .kt-folio-title { font-size: 24px; }

    .kt-folio-group { width: auto; margin-top: 28px; }

    .kt-folio-group + .kt-folio-group { margin-top: 44px; }

    .kt-folio-group h3 { font-size: 20px; }

    .kt-folio-sub { font-size: 14px; margin-top: 4px; }

    .kt-folio-usage {
        margin-top: 12px;
        padding: 5px 12px;
        gap: 6px;
        white-space: normal;
    }

    .kt-folio-usage b { font-size: 11px; }

    .kt-folio-usage span { font-size: 12px; }

    .kt-folio-cards {
        margin-top: 16px;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-right: -20px;
        padding-right: 20px;
    }

    .kt-folio-cards::-webkit-scrollbar { display: none; }

    .kt-folio-card { flex: 0 0 70%; scroll-snap-align: start; }

    .kt-folio-media { height: 190px; border-radius: 16px; }

    .kt-folio-card h4 { margin-top: 12px; font-size: 15px; }

    .kt-folio-card p { margin-top: 6px; font-size: 13px; }

    .kt-folio-more { font-size: 11px; margin-top: 4px; }

    .kt-folio-cta {
        margin: 28px auto 0;
        padding: 9px 10px 9px 16px;
        font-size: 14px;
    }

    .kt-folio-cta .kt-pill-arrow { width: 22px; height: 22px; flex-basis: 22px; }

    /* --- 시딩키트 밴드 --- */
    .kt-band { height: auto; margin: 56px 0 0; }

    .kt-band-inner { padding: 40px 20px; }

    .kt-band-title { font-size: 18px; }

    .kt-band .kt-pill { margin-top: 14px; }

    /* --- 프로세스 --- */
    .kt-proc { margin-top: 56px; padding: 0 20px; }

    .kt-proc-head { width: 100%; max-width: 320px; }

    .kt-proc-eyebrow { font-size: 13px; }

    .kt-proc-bar { margin-top: 8px; width: 100%; }

    .kt-proc-title { font-size: 32px; margin-top: 10px; }

    .kt-proc-list {
        margin-top: 24px;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
        margin-right: -20px;
        padding-right: 20px;
    }

    .kt-proc-list::-webkit-scrollbar { display: none; }

    .kt-proc-item { flex: 0 0 214px; scroll-snap-align: start; }

    .kt-proc-top { height: 196px; border-radius: 16px 16px 0 0; }

    .kt-proc-num { font-size: 46px; left: 20px; top: 16px; }

    .kt-proc-ico { width: 62px; height: 62px; left: 20px; top: 96px; }

    .kt-proc-top h3 {
        left: 20px;
        right: 16px;
        top: 166px;
        font-size: 14px;
        white-space: normal;
    }

    .kt-proc-body {
        border-radius: 0 0 16px 16px;
        padding: 6px 18px 20px 20px;
        font-size: 12px;
    }

    .kt-proc-notice {
        width: auto;
        margin: 20px 0 0;
        padding-top: 12px;
        font-size: 12px;
        text-align: left;
    }

    /* --- 함께한 브랜드 --- */
    .kt-brand { margin-top: 56px; padding: 0 20px; }

    .kt-brand-title { font-size: 22px; }

    /* 4행을 화면 폭에 맞추면 로고가 뭉개져, 2배 폭으로 키우고 가로 스크롤 */
    .kt-brand-rows {
        margin: 22px -20px 0;
        padding: 0 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .kt-brand-rows::-webkit-scrollbar { display: none; }

    .kt-brand-row + .kt-brand-row { margin-top: 18px; }

    .kt-brand-row-1,
    .kt-brand-row-2,
    .kt-brand-row-3,
    .kt-brand-row-4 { width: 720px; max-width: none; }

    /* --- FAQ --- */
    .kt-faq { margin: 56px 0 0; padding: 36px 20px 44px; }

    .kt-faq-title { font-size: 22px; }

    .kt-faq-list { width: auto; margin-top: 20px; }

    .kt-faq-item + .kt-faq-item { margin-top: 10px; }

    .kt-faq-q { padding: 18px 20px; border-radius: 12px; font-size: 16px; }

    .kt-faq-item.is-open .kt-faq-q { padding-bottom: 8px; border-radius: 12px 12px 0 0; }

    .kt-faq-a { padding: 9px 20px 18px; border-radius: 0 0 12px 12px; font-size: 14px; line-height: 1.6; }

    /* --- 배너 --- */
    .kt-banner { height: auto; margin: 56px 0 0; }

    .kt-banner-inner { padding: 48px 20px; }

    .kt-banner-title { font-size: 20px; }

    .kt-banner .kt-pill { margin-top: 18px; padding: 8px 10px 8px 16px; font-size: 14px; }

    .kt-float-cta {
        right: 12px;
        bottom: 12px;
        padding: 10px 14px 9px 16px;
        border-radius: 8px;
    }

    .kt-float-sub { font-size: 10px; }

    .kt-float-main { font-size: 14px; margin-top: 1px; }
}

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

    .kt-js .kt-reveal.is-in { transform: none; }
}