/* 영문·한글 모두 Pretendard (자체 서버 호스팅) */
@font-face {
    font-family: 'Pretendard Variable';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('fonts/PretendardVariable.woff2') format('woff2-variations');
}

:root {
    --primary: #d71920;
    --text: #111111;
    --text-sub: #555555;
    --text-date: #5E3F3B;
    --text-muted: #8a8c93;

    /* ─── 그레이 톤 (추후 컬러 변경 가능성 있음 — 변수만 수정하면 전체 반영) ─── */
    --gray-section: #ebebeb;   /* 회색 섹션 배경 (SERVICES, CTA 등) */
    --gray-card: #f3f3f4;      /* 카드/박스 배경 */
    --gray-img: #dcdcde;       /* 이미지 플레이스홀더 */
    --gray-footer: #c8c8ca;    /* 푸터 배경 */
    --gray-badge: #b9b9bc;     /* 인사이트 카드 하단 띠 */
    --border: #dddddf;

    --header-h: 76px;
    --container: 1280px;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;     /* 스크롤바 유무와 무관하게 폭 고정 (헤더 흔들림 방지) */
    overflow-y: scroll;           /* 구형 브라우저 대비 — 항상 스크롤바 영역 확보 */
    overflow-x: hidden;           /* 의도치 않은 가로 스크롤 차단 */
}
body { overflow-x: hidden; }

body {
    margin: 0;
    /* 영문·한글 모두 Pretendard */
    font-family: 'Pretendard Variable', 'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    font-weight: 400;
    color: var(--text);
    font-size: 16px;
    line-height: 1.5;
    background: #fff;
    word-break: keep-all;       /* 한글 단어 중간 줄바꿈 방지 */
    overflow-wrap: break-word;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 32px;
}

/* ---------- 고정 헤더 ---------- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    background: #fff;
    z-index: 100;
    border-bottom: 1px solid transparent;
}
.site-header.scrolled { border-bottom-color: var(--border); }
.header-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 32px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo img { height: 26px; }
.gnb { display: flex; gap: 36px; }
.gnb a {
    font-size: 16px;
    font-weight: 700;
    transition: color .15s;
}
.gnb a:hover, .gnb a.active { color: var(--primary); }

/* 모바일 햄버거 버튼 (좁은 화면에서만 표시) */
/* 줄 간격을 flex gap이 아니라 절대 위치로 잡는다 —
   gap은 구형 iOS Safari(14.1 미만)에서 무시되어 세 줄이 붙어버리고,
   그러면 X로 전환될 때 줄이 정확히 겹치지 않아 뒤로 막대가 비쳐 보인다 */
.menu-toggle {
    display: none;
    position: relative;
    width: 32px;
    height: 32px;
    background: none;
    border: 0;
    padding: 0;
}
.menu-toggle span {
    position: absolute;
    left: 4px;
    width: 24px;
    height: 2px;
    background: var(--text);
    transition: transform .2s, opacity .2s;
}
.menu-toggle span:nth-child(1) { top: 9px; }
.menu-toggle span:nth-child(2) { top: 15px; }  /* 버튼 세로 중앙 */
.menu-toggle span:nth-child(3) { top: 21px; }
/* 위·아래 줄을 중앙(top 15px)으로 6px씩 이동시켜 정확히 포개어 X를 만든다 */
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
    .menu-toggle { display: block; }
    .gnb {
        display: none;
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: #fff;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
        padding: 6px 0 14px;
        z-index: 99;
    }
    body.menu-open .gnb { display: flex; }
    .gnb a { padding: 13px 32px; }

    /* 좁은 화면: 너무 납작해지지 않게 최소 높이만 확보 (비율은 기본 규칙이 처리) */
    .hero { min-height: 300px; }
    /* 중간 화면: 상단 정보가 한 줄을 넘으면 줄바꿈 허용 */
    .contact-info-row { flex-wrap: wrap; row-gap: 10px; }
}

.site-main { padding-top: var(--header-h); min-height: 60vh; }

/* ---------- 공통 ---------- */
.section { padding: 90px 0; }
.section-gray { background: var(--gray-section); }

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 28px;
    row-gap: 0;
    margin-bottom: 24px;
}
.section-head::before { /* 제목 위 짧은 빨간 라인 */
    content: "";
    flex-basis: 100%;
    height: 2px;
    background: linear-gradient(to right, var(--primary) 0 56px, transparent 56px);
    margin-bottom: 16px;
}

/* 제목 위 빨간 라인 숨김 (예: 홈 SERVICES·RECENT PROJECTS) */
.section-head.no-redbar::before { display: none; }

/* 섹션 사이 구분선 (예: OVERVIEW ↔ HIGHLIGHTS) */
.hr-line { height: 1px; background: var(--border); }
.section-head h2 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0;
    white-space: nowrap;
}
.section-head .rule { flex: 1; height: 1px; background: #999; }
.section-head .view-all {
    font-size: 14px;
    color: var(--text-sub);
    white-space: nowrap;
    font-weight: 700;
}
.section-head .view-all:hover { color: var(--primary); }

/* 가운데 정렬 제목 (빨간 라인·회색 라인 없음 — 예: BUILT BY RAONSQUARE) */
.section-head-center { text-align: center; margin-bottom: 50px; }
.section-head-center h2 { font-size: 26px; font-weight: 800; letter-spacing: 0; margin: 0 0 14px; }
.section-head-center p { color: var(--text-sub); margin: 0 auto; max-width: 760px; line-height: 1.6; }

/* ---------- RELATED/RECENT — 헤딩은 컨테이너 안(View More 안쪽 정렬), 카드 스크롤만 오른쪽 화면 끝으로 흘러나감 ---------- */
.bleed-section .section-head::before { display: none; } /* 카루셀 제목 위 빨간 라인 없음 */
.bleed-section .scroll-nav { display: none; }           /* 드래그/스와이프로 이동 */
.project-scroll.bleed-right {
    margin-right: calc(50% - 50vw); /* 오른쪽 화면 끝까지 확장 */
    padding-right: 32px;
}
.project-scroll.bleed-right .project-card { flex: 0 0 calc((var(--container) - 120px) / 3); } /* Projects 목록 카드와 동일 크기 (3열, gap 28px 기준) */
@media (max-width: 1024px) { .project-scroll.bleed-right .project-card { flex-basis: 60vw; } }
@media (max-width: 640px)  { .project-scroll.bleed-right .project-card { flex-basis: 82%; } }

/* 본문 컨텐츠 폭 — 컨테이너 전체 폭(RELATED PROJECTS와 동일) */
.content-narrow { max-width: none; margin: 0; }

.img-ph {
    width: 100%;
    height: 100%;
    min-height: 100px;
    background: var(--gray-img);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9b9b9e;
    font-size: 14px;
}
.ratio-169 {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gray-img);
}
.ratio-169 > img, .ratio-169 > video, .ratio-169 > iframe, .ratio-169 > .img-ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.btn-line {
    display: inline-block;
    border: 1px solid var(--text);
    background: #fff;
    color: var(--text);
    padding: 12px 38px;
    font-size: 16px;
    font-weight: 700;
    transition: all .15s;
}
.btn-line:hover { background: var(--text); color: #fff; }
.btn-fill {
    display: inline-block;
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
    padding: 12px 38px;
    font-size: 16px;
    font-weight: 700;
}
.btn-fill:hover { background: #b8141a; }

/* ---------- 홈 Hero (문구를 영상 중앙에 오버레이) ---------- */
.hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;                       /* 가로폭에 맞춰 16:9로 세로가 함께 줄어듦 */
    max-height: calc(100vh - var(--header-h));  /* 큰 화면에서 화면 높이를 넘지 않게 상한 */
    overflow: hidden;
}
/* 영상 첫 프레임이 그려지기 전 잠깐 보이는 바탕 — 회색이 번쩍이지 않도록 검정 */
.hero-media { position: absolute; inset: 0; background: #000; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.hero-media .img-ph { height: 100%; }
/* YouTube Hero — iframe은 16:9 고정이라 컨테이너를 덮도록 JS가 크기를 계산해 넣는다(object-fit: cover 대체).
   pointer-events를 막아 클릭·호버로 YouTube UI가 뜨지 않게 한다. */
.hero-yt { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-yt iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0;
    display: block;
}
/* 플레이어가 뜨기 전까지 보여줄 대기 이미지 */
.hero-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .6s;
}
.hero-poster.hidden { opacity: 0; }
.hero-media::after {
    /* 문구 가독성용 어두운 오버레이 — 영상이 밝을 경우를 대비 */
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .22);
    pointer-events: none;
}
.hero-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 32px;
    z-index: 1;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.hero-title {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.25;
    min-height: 1.3em;
    margin: 0 0 14px;
    position: relative;
    width: 100%;
    overflow: hidden;             /* 위/아래로 빠지는 글자를 가리는 마스크 */
    /* 줄들을 같은 칸에 겹쳐 쌓는다 — absolute와 달리 높이가 확보되어
       모바일처럼 문구가 여러 줄로 접히는 경우에도 잘리지 않는다 */
    display: grid;
}
/* 두 줄을 겹쳐 두고 — 하나는 위로 빠지고 다른 하나는 동시에 아래에서 올라옴 */
.hero-title .flip-line {
    grid-area: 1 / 1;             /* 모든 줄이 같은 칸 → 높이는 가장 긴 줄 기준 */
    width: 100%;
    min-width: 0;
    text-align: center;
    /* 한 줄 유지 — front.js가 폭에 맞게 글자 크기를 줄인다.
       최소 크기로도 안 들어가면 JS가 white-space를 normal로 풀어 줄바꿈시킨다 */
    white-space: nowrap;
    word-break: keep-all;         /* 줄바꿈 fallback 시 한글 어절 단위로 접힘 */
    overflow-wrap: break-word;
    will-change: transform;
    transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.hero-title .flip-line.no-trans { transition: none; }
.hero-sub { font-size: 23px; margin: 0; opacity: .92; }

/* ---------- 프로젝트 카드 ---------- */
.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 28px;
}
/* RECENT 가로 스크롤(캐러셀) — 한 화면 3개, 옆으로 스크롤 */
.project-scroll {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 16px;
    cursor: grab;
    scrollbar-width: thin;
}
.project-scroll.dragging { cursor: grabbing; }
.project-scroll, .project-scroll * { user-select: none; }
.project-scroll a, .project-scroll img { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; user-drag: none; }

/* 가로 스크롤 좌우 화살표 */
.scroll-wrap { position: relative; }
.scroll-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background .15s, color .15s, border-color .15s;
}
.scroll-nav:hover { background: var(--text); color: #fff; border-color: var(--text); }
.scroll-nav.prev { left: -14px; }
.scroll-nav.next { right: -14px; }
.scroll-nav[hidden] { display: none; }
@media (max-width: 640px) { .scroll-nav { display: none; } } /* 모바일은 터치 스와이프 */
.project-scroll::-webkit-scrollbar { height: 6px; }
.project-scroll::-webkit-scrollbar-track { background: #eee; border-radius: 3px; }
.project-scroll::-webkit-scrollbar-thumb { background: #c4c4c8; border-radius: 3px; }
.project-scroll .project-card {
    flex: 0 0 calc((100% - 56px) / 3);  /* 한 화면에 3개 (gap 28px×2) */
    scroll-snap-align: start;
}

.project-card { display: block; }
.project-card .ratio-169 { border-radius: 0; }
.project-card .ratio-169 img { transition: transform .4s; }
.project-card:hover .ratio-169 img { transform: scale(1.04); }

/* 이미지 아래 정보: 연도 / 제목 / 구분선 + View More */
.project-card .pc-body { padding-top: 8px; }
.project-card .pc-date {
    font-size: 12px;
    font-weight: 500;
    color: #5E5E5E;
    letter-spacing: .02em;
    margin: 0;
}
.project-card .pc-top { display: flex; align-items: center; margin-bottom: 6px; }
.project-card .pc-arrow {
    margin-left: auto;   /* 연도와 같은 줄, 우측 끝 */
    color: var(--text);
    transition: color .15s, transform .2s;
}
.project-card .pc-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    transition: color .15s;
}
.project-card .pc-sub {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.15;
    color: var(--text);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.project-card:hover .pc-arrow { color: var(--primary); transform: translate(3px, -3px); }

/* ---------- 페이지 헤더 ---------- */
.page-hero { padding: 70px 0 36px; scroll-margin-top: var(--header-h); }  /* 고정 헤더에 가리지 않도록 앵커 이동 시 오프셋 */
.page-hero h1 {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 14px;
}
.page-hero .lead { color: var(--text-sub); margin: 0; }

/* ---------- 목록 필터 바 ---------- */
.list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 10px 0 14px;
    flex-wrap: wrap;
}
.list-toolbar .tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.list-toolbar .tab {
    border: 1px solid #C8C6C5;
    background: #fff;
    border-radius: 20px;
    padding: 7px 22px;
    font-size: 14px;
    font-weight: 700;
    color: #2A1714;
}
.list-toolbar .tab.active { border-color: #E20613; color: #E20613; background: #fff; }
/* 카테고리 커스텀 드롭다운 (펼친 목록까지 스타일링) */
.cat-dropdown { position: relative; }
.cat-toggle {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #d4d4d8;
    border-radius: 999px;
    padding: 12px 48px 12px 22px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    background: #fff;
    color: var(--text);
    min-width: 230px;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: border-color .15s, box-shadow .15s;
}
.cat-toggle:hover { border-color: var(--text); }
.cat-dropdown.open .cat-toggle { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(215,25,32,.12); }
.cat-toggle i {
    position: absolute;
    right: 20px;
    top: 50%;
    width: 9px; height: 9px;
    border-right: 2px solid var(--text);
    border-bottom: 2px solid var(--text);
    transform: translateY(-65%) rotate(45deg);
    transition: transform .2s;
}
.cat-dropdown.open .cat-toggle i { transform: translateY(-30%) rotate(-135deg); }
.cat-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 100%;
    background: #fff;
    border: 1px solid #e6e7eb;
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
    padding: 8px;
    margin: 0;
    list-style: none;
    z-index: 30;
    display: none;
    max-height: 360px;
    overflow-y: auto;
}
.cat-dropdown.open .cat-menu { display: block; }
.cat-menu li a {
    display: block;
    padding: 11px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.cat-menu li a:hover { background: #f4f5f7; }
.cat-menu li a.on { background: var(--primary); color: #fff; }
.search-box {
    display: flex;
    align-items: center;
    border: 1px solid #C8C6C5;
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(215,25,32,.12); }
.search-box input {
    border: 0;
    outline: none;
    padding: 12px 8px 12px 22px;
    font-size: 14px;
    font-family: inherit;
    width: 200px;
    background: transparent;
}
.search-box button {
    border: 0;
    background: none;
    padding: 10px 20px 10px 8px;
    color: var(--text-sub);
    display: flex;
    align-items: center;
    cursor: pointer;
}
.search-box button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}
.search-box button:hover { color: var(--primary); }
.list-count { color: #000; font-size: 15px; margin: 40px 0 22px; }
.list-loading { text-align: center; color: var(--text-muted); padding: 24px 0; font-size: 14px; }

.pagination { margin-top: 48px; display: flex; gap: 8px; justify-content: center; }
.pagination a {
    min-width: 36px;
    text-align: center;
    padding: 7px 10px;
    border: 1px solid var(--border);
    font-size: 14px;
}
.pagination a.active { background: var(--text); border-color: var(--text); color: #fff; }

/* ---------- 인사이트 카드 ---------- */
.insight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 28px;
}
.insight-card { display: block; }
.insight-card .ratio-169 { background: var(--gray-img); } /* 정사각 모서리 (라운드 없음) */
.insight-card .ratio-169 img { transition: transform .4s; }
.insight-card:hover .ratio-169 img { transform: scale(1.04); }
.insight-card .body { background: #f6f6f6; padding: 22px 22px 24px; }
.insight-card .cat {
    display: inline-block;
    background: #111;
    color: #fff;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    margin-bottom: 12px;
}
.insight-card h3 { margin: 0 0 16px; font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--text); transition: color .15s; }
.insight-card:hover h3 { color: var(--primary); }
.insight-card .date { font-size: 11px; color: var(--text-date); font-weight: 500;}

/* ---------- 상세 공통 ---------- */
.detail-top { padding: 56px 0 0; }
.back-link { font-size: 13px; font-weight: 700; color: var(--text-sub); letter-spacing: .06em; }
.back-link:hover { color: var(--primary); }
.detail-top h1 { font-size: 38px; font-weight: 800; margin: 14px 0 10px; line-height: 1.3; }
.detail-top .detail-subtitle { font-size: 32px; font-weight: 400; line-height: 1.25; margin: -12px 0 28px; } /* 프로젝트명(38px/800)보다 한 단계 작고 얇게 — 위계 구분 */
.detail-top .lead { color: var(--text-sub); margin: 0 0 28px; }
.meta-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 36px;
}
.meta-row .item { padding-right: 36px; margin-right: 36px; border-right: 1px solid var(--border); }
.meta-row .item:last-child { border-right: 0; }
.meta-row .label { font-weight: 800; font-size: 15px; }
.meta-row .value { font-size: 14px; color: var(--text-sub); margin-top: 2px; }
/* Technology는 여러 개일 수 있다. 데스크톱은 가운뎃점으로 이어 붙이고 모바일은 줄바꿈한다 */
.meta-row .tech-values span:not(:last-child)::after { content: " · "; }

.detail-media { background: #fff; }
.yt-thumb { position: relative; cursor: pointer; }
.ratio-169 > .yt-thumb { position: absolute; inset: 0; }
.yt-thumb img, .yt-thumb .img-ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.yt-thumb .play-btn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 84px; height: 84px;
    border-radius: 50%;
    border: 0;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.yt-thumb:hover .play-btn { background: var(--primary); }

.tag-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tag-chips .chip {
    border: 1px solid var(--text);
    border-radius: 18px;
    padding: 5px 20px;
    font-size: 14px;
}

.cs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 36px;
}
.cs-box { background: var(--gray-card); padding: 26px 28px; border-radius: 6px; }
.cs-box h3 { margin: 0 0 10px; font-size: 16px; font-weight: 800; }
.cs-box p { margin: 0; font-size: 15px; color: var(--text-sub); white-space: pre-line; }

.gallery-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
}
.gallery-grid2 figure { margin: 0; }
.gallery-grid2 .ratio-169 { border-radius: 0; }
.gallery-grid2 figcaption { font-size: 14px; color: var(--text-sub); margin-top: 12px; white-space: pre-line; }

/* ---------- 인사이트 상세 ---------- */
.insight-body { max-width: none; margin: 0; }
.key-message {
    margin: 56px auto 48px;
}
.key-message p { margin: 0 0 12px; }
.key-message .tags { color: var(--primary); font-size: 13px; display: flex; gap: 12px; flex-wrap: wrap; }
.insight-section { margin-bottom: 52px; }
.insight-section h3 { font-size: 18px; font-weight: 800; margin: 0 0 14px; }
.insight-section p { white-space: pre-line; margin: 0 0 20px; color: #222; }
.insight-section figure { margin: 0; }
.insight-section figcaption { font-size: 13px; color: var(--text-muted); margin-top: 10px; }
.closing-message {
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    margin: 64px 0 30px;
}

/* ---------- CTA ---------- */
.cta-band {
    position: relative;
    /* 콘텐츠 위아래 여백을 절반으로 — 450px일 때 남던 빈 공간(약 316px)의 절반만 남긴다 */
    min-height: 290px;
    background: #0a0a0a;
    overflow: hidden;
}
.cta-band .cta-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cta-band .cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.35) 100%);
}
.cta-band .cta-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container);
    min-height: 290px;
    margin: 0 auto;
    padding: 0 32px;
}
.cta-band .cta-text {          /* 좌측 상단 */
    position: absolute;
    left: 80px;
    top: 27%;
    color: #fff;
}
.cta-band h2 {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 0;
    color: #fff;
    margin: 0 0 20px;
}
.cta-band p {
    color: rgba(255, 255, 255, .82);
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
}
.cta-band .cta-btn {           /* 우측 중앙 — Projects 상세의 문의 버튼과 같은 위치 */
    position: absolute;
    right: 80px;               /* .cta-text의 left와 대칭 */
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    border: 0;
    border-radius: 0;         /* 각진 사각 버튼 */
    font-size: 18px;
    font-weight: 400;
    letter-spacing: .02em;
    transition: background .15s;
}
.cta-band .cta-btn:hover { background: #b8141a; }
@media (max-width: 860px) {   /* 모바일: 세로 스택 */
    .cta-band, .cta-band .cta-inner { min-height: 0; }
    .cta-band .cta-inner { padding: 35px 32px; }
    .cta-band .cta-text { position: static; }
    .cta-band h2 { font-size: 36px; }
    .cta-band .cta-btn { position: static; transform: none; margin-top: 36px; }
}

.cta-strip {
    background: #2b2b2b;
}
.cta-strip .inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 80px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.cta-strip strong { display: block; font-size: 20px; font-weight: 300; color: #fff; line-height: 0.5; }
.cta-strip span { display: block; font-size: 16px; font-weight: 300; color: #fff; margin-top: 10px; }
.cta-strip .btn-line {
    border: 0;
    background: var(--primary);
    color: #fff;
    border-radius: 0;
    width: 212px;
    height: 57px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 400;
}
.cta-strip .btn-line:hover { background: #b8141a; color: #fff; }

/* ---------- About 헤드라인 (흰 배경, 좌측 정렬) ---------- */
.about-head { text-align: left; padding: 90px 0 80px; }
.about-head .small { font-size: 18px; font-weight: 800; margin: 0 0 12px; }
/* 줄높이·여백·접두사 크기를 모두 상대값으로 — 글자 크기가 줄면 함께 줄어든다 */
.about-head h1 { font-size: 66px; font-weight: 700; margin: 0 0 12px; line-height: 1.29; }
.about-head h1 .prefix { font-size: .53em; font-weight: 700; }
.about-head h1 .accent { color: var(--primary); }

/* 헤드라인 라인별 마스크 reveal (아래에서 위로 올라오며 가려진 부분이 드러남) */
.about-head h1 .r-line { display: block; overflow: hidden; }
.about-head h1 .r-line.is-prefix { margin-bottom: .47em; }
.about-head h1 .r-in {
    display: inline-block;
    transform: translateY(110%);
    transition: transform .85s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}
.about-head h1.in .r-in { transform: translateY(0); }
.about-head h1.in .r-line:nth-child(1) .r-in { transition-delay: .04s; }
.about-head h1.in .r-line:nth-child(2) .r-in { transition-delay: .15s; }
.about-head h1.in .r-line:nth-child(3) .r-in { transition-delay: .26s; }
.about-head h1.in .r-line:nth-child(4) .r-in { transition-delay: .37s; }
@media (prefers-reduced-motion: reduce) {
    .about-head h1 .r-in { transform: none; transition: none; }
}
.about-head .tail { font-size: 22px; font-weight: 800; margin: 0; }

/* WHO WE ARE — 어두운 배경 + 흰 텍스트 */
.who-section {
    position: relative;
    padding: 110px 0;
    background: #0a0a0a;
    overflow: hidden;
    color: #fff;
}
.who-section .who-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.who-section .who-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .35);
}
.who-section .container { position: relative; z-index: 1; }

.who-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 60px;
    align-items: start;
}
.who-head .who-bar {
    display: block;
    width: 48px;
    height: 3px;
    background: var(--primary);
    margin-bottom: 22px;
}
.who-head h2 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 0;
    color: #fff;
    margin: 0;
}

.who-body { max-width: 900px; margin-left: auto; } /* 그룹 전체는 오른쪽 정렬, 내부 텍스트는 좌측 */
.stat-list { display: flex; flex-direction: row; align-items: flex-start; gap: 72px; margin-bottom: 44px; }
.stat-list > div { text-align: center; } /* 숫자와 라벨을 각각 중앙 정렬 */
.stat-list .num { font-size: 84px; font-weight: 650; line-height: 1.05; letter-spacing: -.01em; color: #fff; }
/* 카운트업: 자리수 변동에도 흔들리지 않도록 등폭 숫자 + 최종 자리수만큼 폭 예약(우측 정렬 → 일의 자리 고정) */
.stat-list .count { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
.stat-list .num sup { font-size: 36px; color: var(--primary); font-weight: 650; }
.stat-list .label { font-size: 16px; font-weight: 800; letter-spacing: .04em; color: #fff; margin-top: 6px; }
.who-text p { margin: 0 0 22px; color: rgba(255, 255, 255, .82); font-size: 16px; }
.pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.35;
}
.pdf-btn .circle {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    font-weight: 800;
    line-height: 1; /* 글리프 기준선 영향 제거 — 정중앙 정렬 */
}
.pdf-btn:hover { color: var(--primary); }
.pdf-btn:hover .circle { border-color: var(--primary); }

/* 좌측: 제목 + 소개 / 우측: 세로 타임라인 6단계 */
.how-we-work { background: #f6f6f6; }
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.how-head .section-head { margin-bottom: 22px; }
.how-intro { color: var(--text-sub); margin: 0; line-height: 1.8; font-size: 16px; }

.how-timeline { position: relative; }
.how-step { position: relative; padding-left: 46px; padding-bottom: 34px; }
.how-step:last-child { padding-bottom: 0; }
.how-step:not(:last-child)::before { /* 점과 점을 잇는 세로선 */
    content: "";
    position: absolute;
    left: 6px; top: 10px; bottom: -10px;
    width: 1px;
    background: #d9d9d9;
}
.how-dot { /* 빨간 링 점 */
    position: absolute;
    left: 0; top: 4px;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--primary);
    box-sizing: border-box;
}
.how-no { color: var(--primary); font-size: 11px; font-weight: 700; letter-spacing: .08em; margin-bottom: 8px; }
.how-name { font-size: 18px; font-weight: 800; margin: 0 0 8px; letter-spacing: .01em; }
.how-desc { color: var(--text-sub); margin: 0; line-height: 1.6; font-size: 16px; }

/* ---------- Contact ---------- */
.contact-info-row {
    display: flex;
    flex-wrap: nowrap;            /* 한 줄 유지 — Business Hours가 내려가지 않게 */
    margin: 6px 0 0;
}
.contact-info-row .item { min-width: 0; padding-right: 24px; margin-right: 24px; border-right: 1px solid var(--border); }
.contact-info-row .item:last-child { border-right: 0; padding-right: 0; margin-right: 0; }
.contact-info-row .label { font-weight: 800; font-size: 15px; }
.contact-info-row .value { font-size: 14px; color: var(--text-sub); margin-top: 2px; }
.contact-info-row .value a:hover { color: var(--primary); }
/* Email·Tel은 항상 한 줄로 (Address·Business Hours가 줄어들며 공간 양보) */
.contact-info-row .item:nth-child(1),
.contact-info-row .item:nth-child(2) { flex-shrink: 0; }
.contact-info-row .item:nth-child(1) .value,
.contact-info-row .item:nth-child(2) .value { white-space: nowrap; }

/* 좌우 여백 — .container를 쓰지 않는 영역이라 폭이 좁아지면 폼이 화면 끝에 붙는다 */
.inquiry-wrap { background: #EFEFEF; padding: 80px 20px; }
.inquiry-box {
    max-width: 820px;
    margin: 0 auto;
    background: transparent;
}
.inquiry-box h2 { font-size: 28px; font-weight: 800; margin: 0 0 10px; }
.inquiry-box .lead { font-size: 15px; color: var(--text-sub); margin: 0 0 36px; }

.f-row { margin-bottom: 24px; }
/* 문의 유형·프로젝트 분야·예산·오픈 일정·프로젝트 내용 등 폼 직속 그룹 간격 확대 */
.inquiry-box form > .f-row { margin-bottom: 44px; }
.inquiry-box form > .f-grid + .f-row { margin-top: 30px; }   /* 문의 유형 위 여백 늘림 */
.inquiry-box form > .f-row:has(textarea) { margin-bottom: 28px; } /* 파일 첨부 위 여백 줄임 */
.f-row > label { display: block; font-weight: 500; font-size: 16px; margin-bottom: 8px; }
.f-row .req { color: var(--primary); }
.f-row .desc { font-weight: 200; font-size: 13px; color: #000; margin-left: 8px; }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.f-row input[type=text], .f-row input[type=email], .f-row input[type=tel], .f-row textarea {
    width: 100%;
    border: 1px solid #bbb;
    background: #fff;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    border-radius: 4px;
}
.f-row input:focus, .f-row textarea:focus { outline: none; border-color: var(--text); }
.f-row textarea { min-height: 225px; resize: vertical; border: 0; }

/* 상단 4개 입력 — 라벨 오른쪽에 입력창, 밑줄은 행 전체 폭(라벨 아래까지) */
.f-grid .f-row { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid #cfcfcf; }
.f-grid .f-row > label { font-weight: 500; font-size: 14px; color: #333; margin-bottom: 0; white-space: nowrap; flex: 0 0 auto; }
.f-grid .f-row input[type=text],
.f-grid .f-row input[type=email],
.f-grid .f-row input[type=tel] {
    flex: 1;
    min-width: 0;
    border: 0;
    border-radius: 0;
    padding: 10px 0;
    background: transparent;
}
.f-grid .f-row:focus-within { border-bottom-color: var(--text); }

/* 기본 1줄에 3개 — 모든 선택지 박스 크기(폭) 동일하게 고정 */
.pill-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pill-group label { cursor: pointer; display: grid; min-width: 0; } /* min-width:0 — 긴 라벨이 칸을 밀어 폼이 넘치는 것 방지 */
.pill-group input { display: none; }
.pill-group .pill {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 46px;
    border: 1px solid #979797;
    border-radius: 22px;
    background: #fff;
    padding: 8px 14px;
    font-size: 14px;
    line-height: 1.3;
    white-space: normal;
    word-break: keep-all;       /* 한글 어절 단위 줄바꿈 (긴 라벨은 2줄, 폭은 고정) */
    transition: all .12s;
}
.pill-group input:checked + .pill { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }

.file-drop {
    border: 0;
    background: #fff;
    border-radius: 4px;
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    position: relative;
}
.file-drop.dragover { border-color: var(--primary); color: var(--primary); }
.file-drop input { display: none; }
.file-drop .pick-btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border-radius: 16px;
    padding: 5px 18px;
    font-size: 13px;
    font-weight: 700;
    margin-top: 10px;
}
.file-drop .file-names { margin-top: 12px; font-size: 13px; color: var(--text); text-align: left; }
/* 선택한 파일 목록 — 개수가 늘어도 한 줄에 하나씩 모두 보이게 */
.file-drop .file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    margin-top: 6px;
    background: #fafafa;
}
.file-drop .file-item .fi-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-drop .file-item .fi-size { color: var(--text-muted); font-size: 12px; flex: none; }
.file-drop .file-item .fi-del {
    flex: none;
    width: 20px;
    height: 20px;
    line-height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ddd;
    color: #444;
    font-size: 15px;
    cursor: pointer;
}
.file-drop .file-item .fi-del:hover { background: var(--primary); color: #fff; }
.file-drop .file-total { margin-top: 8px; font-size: 12px; color: var(--text-muted); text-align: right; }
/* 용량 초과 등 첨부 거부 안내 */
.file-drop .file-warn { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--primary); line-height: 1.5; }

.consent-row { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 10px; }
.consent-row .detail-btn {
    display: inline-block;
    background: #fff;
    border: 0;
    color: #222;
    font-weight: 700;
    font-size: 13px;
    padding: 5px 18px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.consent-row .detail-btn:hover { background: #f6f6f6; border-color: #ccc; }
.form-error { background: #fbe9ea; color: var(--primary); padding: 12px 16px; border-radius: 6px; font-size: 14px; margin-bottom: 20px; font-weight: 700; }
.submit-row { text-align: center; margin-top: 48px; }

/* ---------- Location / FAQ ---------- */
.location-grid {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: 48px;
    align-items: start;
}
.location-grid h3 { font-size: 20px; font-weight: 500; margin: 50px 0 14px; }
.location-grid .desc { font-size: 15px; color: #000000; line-height: 1.4; margin: 0 0 20px; white-space: pre-line; }
.map-links { display: flex; gap: 12px; }
.map-links a { display: inline-flex; transition: transform .12s; }
.map-links a:hover { transform: translateY(-2px); }
.map-links img { width: 46px; height: 46px; border-radius: 10px; display: block; }
.map-icon-ph {
    width: 46px; height: 46px;
    border-radius: 10px;
    background: var(--gray-img);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #6f6f73;
    line-height: 1.15;
    padding: 4px;
}
#naver-map, .map-ph {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--gray-img);
    border-radius: 0;
}
.map-ph { display: flex; align-items: center; justify-content: center; color: #9b9b9e; }

.faq-list { max-width: none; margin-left: 0; }
.faq-item { background: #fff8f7; border-radius: 0; margin-bottom: 12px; overflow: hidden; }
.faq-item summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding: 18px 52px 18px 50px;   /* 좌: Q. 라벨 / 우: +/- */
    font-weight: 500;
    font-size: 15px;
    color: #000;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {       /* Q. 라벨 */
    content: 'Q.';
    position: absolute;
    left: 24px; top: 18px;
    color: #000;
    font-weight: 500;
}
.faq-item summary::after {        /* +/- 토글 */
    content: '+';
    position: absolute;
    right: 22px; top: 15px;
    font-size: 20px; font-weight: 400; color: #D60011;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item .answer {
    position: relative;
    padding: 8px 22px 20px 50px;  /* 질문 텍스트와 동일한 세로선에 정렬 + 질문과 간격 */
    font-size: 15px; font-weight: 400; color: var(--text-sub); white-space: pre-line;
}
.faq-item .answer::before {       /* A. 라벨 */
    content: 'A.';
    position: absolute;
    left: 24px; top: 8px;
    color: var(--text-sub);
    font-weight: 400;
}
/* FAQ 카테고리 탭 + 그룹 제목 */
.faq-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.faq-tab {
    border: 1px solid #C8C6C5;
    background: #fff;
    border-radius: 20px;
    padding: 7px 22px;
    font-size: 14px;
    font-weight: 700;
    color: #2A1714;
    cursor: pointer;
    font-family: inherit;
}
.faq-tab.active { border-color: var(--primary); color: var(--primary); }
.faq-flex { display: grid; grid-template-columns: 1fr 1.7fr; gap: 48px; align-items: start; }
.faq-flex .side p { font-size: 15px; color: #000000; line-height: 1.4; }

/* ---------- 모달 ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal-overlay.open { display: flex; }
.modal {
    background: #fff;
    border-radius: 10px;
    max-width: 680px;
    width: 100%;
    max-height: 84vh;
    overflow-y: auto;
    padding: 44px 40px;
    position: relative;
}
.modal .close-x {
    position: absolute;
    top: 18px; right: 20px;
    border: 0; background: none;
    font-size: 26px;
    line-height: 1;
    color: var(--text);
}
.modal h3 { text-align: center; font-size: 20px; font-weight: 800; margin: 0 0 24px; }
.modal .modal-body { font-size: 15px; white-space: pre-line; }
.modal.modal-center { text-align: center; }
.modal .modal-actions { display: flex; gap: 12px; justify-content: center; margin-top: 30px; }
.modal .modal-actions .btn-line, .modal .modal-actions .btn-dark { min-width: 180px; text-align: center; }
.btn-dark {
    display: inline-block;
    background: #8d8d90; /* 그레이 톤 — 변경 가능 */
    border: 1px solid #8d8d90;
    color: #fff;
    padding: 12px 30px;
    font-size: 15px;
    font-weight: 700;
}
.btn-dark:hover { background: var(--text); border-color: var(--text); }
/* 문의 보내기 버튼 — 레드 배경 + 가로 확대 */
.submit-row .btn-dark { background: var(--primary); border-color: var(--primary); padding: 17px 70px; }
.submit-row .btn-dark:hover { background: #b8141a; border-color: #b8141a; }

/* ---------- 푸터 ---------- */
.site-footer {
    background: #F6F6F6;
    margin-top: 0;
}
.footer-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 44px 32px 30px;
}
.footer-info p { margin: 0; font-size: 14px; line-height: 1.45; }
.footer-info strong { font-weight: 800; }
.footer-info a:hover { text-decoration: underline; }
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 26px;
}
.footer-legal { font-size: 13px; }
.footer-legal a { font-weight: 700; }
.footer-legal a:hover { color: var(--primary); }
.footer-legal .divider { margin: 0 10px; color: #999; }
.footer-sns { display: flex; align-items: center; gap: 16px; }
.footer-sns a {
    display: inline-flex;
    color: #493936;
    transition: color .15s;
}
.footer-sns svg { width: 22px; height: 22px; }
.footer-sns a:hover { color: var(--primary); }

/* ---------- 전송 중 대기 레이어 ---------- */
.sending-box {
    background: #fff;
    border-radius: 12px;
    padding: 40px 48px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.sending-box p { margin: 18px 0 0; font-size: 15px; color: var(--text); line-height: 1.6; }
.sending-box .spinner {
    width: 46px;
    height: 46px;
    margin: 0 auto;
    border: 4px solid #ececed;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* 전송 중에는 버튼 비활성 표시 */
.btn-dark:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- 개인정보처리방침 페이지 ---------- */
.policy-body { max-width: 860px; white-space: pre-line; font-size: 15px; color: #222; padding-bottom: 40px; }

/* ---------- 반응형 (기본) ---------- */
@media (max-width: 1024px) {
    .hero-title { font-size: 40px; }
    .hero-sub { font-size: 18px; }
    .project-grid, .insight-grid { grid-template-columns: repeat(2, 1fr); }
    .who-grid { grid-template-columns: 1fr; gap: 36px; }
    .location-grid, .faq-flex { grid-template-columns: 1fr; }
    .project-scroll .project-card { flex-basis: calc((100% - 28px) / 2); } /* 태블릿: 2개 */
    .how-grid { grid-template-columns: 1fr; gap: 40px; } /* HOW WE WORK: 제목/타임라인 세로 스택 */
}
@media (max-width: 640px) {
    .container, .header-inner { padding: 0 20px; }
    /* 모바일도 16:9 유지 — 비율을 풀면 영상이 좌우로 30%가량 잘린다.
       대신 좁은 높이(390px 화면에서 211px)에 문구가 들어가도록 글자·여백을 줄인다. */
    .hero { aspect-ratio: 16 / 9; max-height: none; min-height: 0; display: block; }
    .hero-text { position: absolute; inset: 0; padding: 0 20px; }
    .hero-title { font-size: 28px; margin-bottom: 10px; }   /* 폭이 좁으면 front.js가 더 줄인다 */
    .hero-sub { font-size: 14px; line-height: 1.4; }
    .page-hero h1 { font-size: 34px; }
    /* 데스크톱 기준 아래 여백(80px)이 모바일에서는 과하다 */
    .about-head { padding: 90px 0 40px; }
    .about-head h1 { font-size: 30px; }
    .about-head .small { font-size: 16px; }
    .about-head .tail { font-size: 18px; }
    /* 긴 영문 섹션 제목이 모바일 폭을 넘어 가로 스크롤을 만들지 않도록 축소 */
    /* gap을 쓰면 데스크톱의 row-gap:0까지 덮여 빨간 줄 아래 간격이 두 배가 된다 */
    .section-head { column-gap: 16px; row-gap: 0; }
    .section-head::before { margin-bottom: 10px; }
    .section-head h2 { font-size: 22px; }
    .project-grid, .insight-grid, .f-grid, .cs-grid, .gallery-grid2 { grid-template-columns: 1fr; }
    .cs-grid { gap: 12px; }  /* 세로로 쌓이면 24px은 과해 보여 절반으로 */
    .project-scroll .project-card { flex-basis: 82%; } /* 모바일: 1개 + 다음 카드 살짝 */
    .how-name { font-size: 19px; }
    .stat-list { gap: 32px; }
    .stat-list .num { font-size: 52px; }
    .stat-list .num sup { font-size: 24px; }
    .who-section { padding: 64px 0; }
    .section { padding: 56px 0; }
    /* 모바일: 상단 정보는 줄바꿈 허용, 선택지 박스는 2개씩 */
    .contact-info-row { flex-wrap: wrap; }
    .contact-info-row .item { flex: 0 0 100%; border-right: 0; padding-right: 0; margin: 0 0 10px; }

    /* 상세 상단 메타(Client/Date/Industry/Technology) —
       항목마다 좌우 72px 여백과 세로 구분선이 있어 좁은 폭에서 줄바꿈이 어긋나고
       줄 끝 항목에 구분선이 남아 잘린 것처럼 보인다. 2열 그리드로 정리한다 */
    .meta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-bottom: 28px; }
    .meta-row .item { padding-right: 0; margin-right: 0; border-right: 0; min-width: 0; }
    .meta-row .value { overflow-wrap: anywhere; }
    /* Technology가 여러 개면 한 줄에 하나씩 */
    .meta-row .tech-values span { display: block; }
    .meta-row .tech-values span:not(:last-child)::after { content: none; }
    .pill-group { grid-template-columns: repeat(2, 1fr); }
    /* CONTACT CTA: 세로 정렬 — display:flex가 있어야 아래 gap이 문구와 버튼 사이 간격으로 동작한다
       (이게 빠져 있어 버튼이 본문에 붙어 있었다) */
    .cta-band { min-height: 0; padding: 64px 0; }
    .cta-band .cta-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
    .cta-band h2 { font-size: 34px; margin-bottom: 14px; }
    .cta-band p { font-size: 15px; }
    .cta-band .cta-btn { margin: 0; padding: 18px 48px; font-size: 16px; }
}

/* ---------- 홈 SERVICES — ACTIVE VISION 사업 영역 ----------
   6개 항목은 번호와 영문 타이틀로 이미 구분되므로 색은 보조 강조일 뿐이다.
   흰 배경 기준으로 대비·채도를 검증한 6색을 순서대로 고정 배정한다. */
.av-head { text-align: left; max-width: 1000px; margin: 0 0 56px; }
.av-head h3 {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.6;
    margin: 0 0 18px;
    color: var(--text);
}
.av-head h3 em { font-style: normal; color: var(--primary); }
.av-head p { margin: 0; font-size: 15px; color: var(--text-sub); }

/* 좌·우가 각각 별도 컬럼이면 행 대응이 없어 세로 시작선이 어긋난다.
   하나의 grid로 묶고 행을 명시해 01·04 / 02·05 / 03·06이 같은 줄에서 시작하게 한다. */
.av-map {
    display: grid;
    grid-template-columns: 1fr minmax(220px, 300px) 1fr;
    column-gap: 40px;
    row-gap: 44px;
    align-items: start;
}
.av-core { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.av-c1 { grid-column: 1; grid-row: 1; }
.av-c2 { grid-column: 1; grid-row: 2; }
.av-c3 { grid-column: 1; grid-row: 3; }
.av-c4 { grid-column: 3; grid-row: 1; }
.av-c5 { grid-column: 3; grid-row: 2; }
.av-c6 { grid-column: 3; grid-row: 3; }
.av-c1, .av-c2, .av-c3 { text-align: right; }
.av-c4, .av-c5, .av-c6 { text-align: left; }

.av-item h4 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.3;
}
.av-item .av-no { font-size: 13px; font-weight: 800; margin-right: 8px; opacity: .85; }
.av-item .av-sub {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0px;
}
.av-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-sub);
}

/* 항목 색 — 순서 고정 배정 (필터·정렬로 바뀌지 않는다) */
.av-c1 { --c: #C8102E; }   /* Exhibition        */
.av-c2 { --c: #B45309; }   /* Media Art         */
.av-c3 { --c: #1558C0; }   /* Kids & Edu        */
.av-c4 { --c: #157A47; }   /* Public & Culture  */
.av-c5 { --c: #6D28A8; }   /* Brand Space       */
.av-c6 { --c: #0F766E; }   /* Event & Promotion */
.av-item h4, .av-item .av-no { color: var(--c); }

/* 키워드 — 색 밑줄로 항목을 묶어준다 */
.av-item .av-kw {
    display: inline-block;
    margin: 0 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--text-sub);
    padding-bottom: 7px;
    border-bottom: 2px solid var(--c);
    transition: color .25s ease;
}
.av-item:hover .av-kw { color: var(--c); }

/* 가운데 링 + 로고 */
.av-core { display: flex; justify-content: center; }
.av-ring {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1;
    border: 1px dashed #D6DAE0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 링 위의 표식 — 각 항목이 놓인 각도에 하나씩, 색은 해당 항목(--c)과 맞춘다.
   원 위의 점 좌표: left = 50 + 50·cos(θ), top = 50 − 50·sin(θ) */
.av-ring .av-dot {
    position: absolute;
    width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px;   /* 계산한 지점에 중심을 맞춘다 */
    background: var(--c);
    transform: rotate(45deg);
}
.av-dot.d1 { left: 14.64%; top: 14.64%; --c: #C8102E; }  /* 01 · 135° */
.av-dot.d2 { left: 0;      top: 50%;    --c: #B45309; }  /* 02 · 180° */
.av-dot.d3 { left: 14.64%; top: 85.36%; --c: #1558C0; }  /* 03 · 225° */
.av-dot.d4 { left: 85.36%; top: 14.64%; --c: #157A47; }  /* 04 ·  45° */
.av-dot.d5 { left: 100%;   top: 50%;    --c: #6D28A8; }  /* 05 ·   0° */
.av-dot.d6 { left: 85.36%; top: 85.36%; --c: #0F766E; }  /* 06 · 315° */
/* 로고는 정사각 캔버스(120×120). 원에 내접하는 정사각형은 지름의 약 71%가 한계이므로
   그보다 작게 잡아 링과 겹치지 않게 한다. 높이 기준이라 비율이 바뀌어도 안전하다. */
.av-logo {
    height: 62%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.av-logo img { height: 100%; width: auto; }
.av-logo .img-ph { width: 160px; aspect-ratio: 16 / 9; height: auto; min-height: 0; font-size: 13px; }

@media (max-width: 1024px) {
    .av-map { grid-template-columns: 1fr; row-gap: 36px; }
    .av-map > * { grid-column: 1; grid-row: auto; }   /* 명시 배치 해제 후 DOM 순서대로 */
    .av-c1, .av-c2, .av-c3, .av-c4, .av-c5, .av-c6 { text-align: left; }
    .av-head h3 { font-size: 18px; }
}
@media (max-width: 640px) {
    .av-head { margin-bottom: 36px; }
    .av-head h3 { font-size: 17px; line-height: 1.55; }
    .av-item h4 { font-size: 15px; }
}

/* 01·03과 04·06은 원의 같은 각도(45°)에 있어 원과의 거리가 같다 → 안쪽 여백도 동일.
   바깥쪽에도 여백을 줘 블록 폭을 좁히면 원 반대편 가장자리도 곡선으로 읽힌다.
   02·05는 원이 가장 넓은 세로 중앙이라 안쪽으로 가장 많이 밀리고 폭은 가장 넓다. */
.av-c1, .av-c3 { margin-right: 8px; margin-left: 44px; }
.av-c2 { margin-right: 84px; }
.av-c4, .av-c6 { margin-left: 10px; margin-right: 44px; }
.av-c5 { margin-left: 80px; }

@media (max-width: 1024px) {
    /* 세로로 쌓이면 어긋난 배치가 의미를 잃고 읽기만 불편해진다 */
    .av-c1, .av-c2, .av-c3 { margin-right: 0; margin-left: 0; }
    .av-c4, .av-c5, .av-c6 { margin-left: 0; margin-right: 0; }
}


/* ---------- About · CORE COMPETITIVENESS ----------
   이미지 자산 0개. 육각형은 clip-path, 아이콘은 인라인 SVG.
   클래스 접두사 cc- 로 기존 규칙 및 홈의 av- 와 충돌하지 않는다. */
.cc-core{
  --cc-ink:#111418;
  --cc-body:#4A4F58;
  --cc-muted:#6B7280;
  --cc-line:#E3E6EA;

  --cc-o:#C4490B;  --cc-o-bg:#FDF2EA;  /* 인식 · Sensing    */
  --cc-c:#0B7A9E;  --cc-c-bg:#EAF5FA;  /* 생성 · AI         */
  --cc-g:#477F12;  --cc-g-bg:#F2F8E8;  /* 경험 · Experience */
  --cc-g2:#E2EFCC;                     /* Buildable 강조    */
  --cc-b:#1D4ED8;                      /* FX Lab            */

  --hw:clamp(84px,7.8vw,126px);
  --hh:calc(var(--hw) * 1.1547);
  /* 육각형 사이 간격. 모든 이웃 중심거리가 hw 로 동일하므로
     x 는 gap, y 는 gap*0.866 만큼 벌리면 간격이 균일해진다. */
  --gap:clamp(8px,1.05vw,15px);
  --sx:calc(var(--hw) + var(--gap));
  --sy:calc(var(--hh) * .75 + var(--gap) * .866);

  --hex:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);

  background:#fff;color:var(--cc-body);
  word-break:keep-all;
  padding:96px 24px 104px;-webkit-font-smoothing:antialiased;
}
.cc-inner{max-width:1280px;margin:0 auto;}

/* ===== 헤더 ===== */
.cc-eyebrow{display:flex;align-items:center;gap:20px;margin:0 0 40px;}
/* HOW WE WORK(.section-head h2)와 같은 크기 */
.cc-eyebrow h2{
  margin:0;font-size:32px;font-weight:800;letter-spacing:0;
  color:var(--cc-ink);white-space:nowrap;
}
.cc-eyebrow span{flex:1;height:1px;background:var(--cc-line);}

.cc-lede{
  max-width:960px;margin:0 0 8px;
  font-size:clamp(17px,1.5vw,21px);line-height:1.65;font-weight:600;
  letter-spacing:-.015em;color:var(--cc-ink);
}
.cc-lede b{font-weight:800;color:var(--cc-o);}
.cc-lede em{font-style:normal;font-weight:800;color:var(--cc-ink);}
.cc-lede .cc-patent{
  display:inline-block;margin-left:6px;padding:2px 10px;
  font-size:.72em;font-weight:800;letter-spacing:0;
  color:#fff;background:var(--cc-ink);border-radius:999px;vertical-align:2px;
}
.cc-sublede{max-width:960px;margin:0 0 64px;font-size:15px;line-height:1.7;color:var(--cc-muted);}

/* ===== 다이어그램 ===== */
.cc-flow{
  display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(14px,2.2vw,34px);
  margin:0 0 72px;
}
.cc-stage{display:flex;flex-direction:column;align-items:center;}
.cc-chev{
  flex:0 0 auto;color:#C7CCD3;
  margin-top:calc(var(--hh) * .78);
}
.cc-chev svg{display:block;width:clamp(16px,1.8vw,26px);height:auto;}

/* 육각 클러스터 */
.cc-comb{position:relative;}
.cc-comb--sense{width:calc(var(--hw) + var(--sx));    height:calc(var(--hh) + var(--sy));}
.cc-comb--ai   {width:calc(var(--hw) * 1.15);         height:calc(var(--hh) + var(--sy));}
.cc-comb--exp  {width:calc(var(--hw) + var(--sx) * 2);height:calc(var(--hh) + var(--sy));}

/* 육각형 */
.cc-hex{
  position:absolute;width:var(--hw);height:var(--hh);
  clip-path:var(--hex);background:var(--edge);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(3px,.45vw,6px);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.cc-hex::before{
  content:"";position:absolute;inset:2.5px;
  clip-path:var(--hex);background:var(--fill);
}
.cc-hex > *{position:relative;z-index:1;}
.cc-hex:hover{transform:translateY(-4px);}

.cc-hex .cc-ico{display:block;margin:0;line-height:0;color:var(--edge);}
.cc-hex .cc-ico svg{display:block;width:clamp(22px,2.4vw,34px);height:auto;}
.cc-hex .cc-lb{
  display:block;text-align:center;line-height:1.25;
  font-size:clamp(12px,1.15vw,16px);font-weight:800;letter-spacing:-.01em;
  color:var(--edge);
}
.cc-hex .cc-lb small{
  display:block;margin-top:3px;
  font-size:clamp(9.5px,.82vw,11.5px);font-weight:600;letter-spacing:0;
  color:var(--cc-muted);
}
.cc-hex--ai{--edge:var(--cc-c);--fill:var(--cc-c-bg);
  width:calc(var(--hw) * 1.15);height:calc(var(--hh) * 1.15);}
.cc-hex--ai .cc-lb{font-size:clamp(24px,2.8vw,38px);letter-spacing:.02em;line-height:1;}

/* 캡션 */
.cc-cap{margin:22px 0 0;text-align:center;max-width:calc(var(--hw) * 2.7);}
.cc-cap b{
  display:block;font-size:clamp(13px,1.15vw,15.5px);font-weight:800;
  letter-spacing:-.01em;color:var(--cc-ink);
}
.cc-cap span{
  display:block;margin-top:6px;
  font-size:clamp(11.5px,.95vw,13px);line-height:1.6;color:var(--cc-muted);
}

/* ===== 하단 4열 요약 ===== */
.cc-sum{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:36px 40px;
  padding-top:52px;border-top:1px solid var(--cc-line);
}
.cc-sum article h3{
  display:flex;align-items:center;gap:9px;
  margin:0 0 12px;font-size:clamp(15px,1.3vw,18px);font-weight:800;
  letter-spacing:-.01em;color:var(--c);
}
.cc-sum article h3 i{
  flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--c);
  font-style:normal;
}
.cc-sum article h3 i.cc-ast{
  width:auto;height:auto;border-radius:0;background:none;
  font-weight:800;font-size:1.05em;line-height:1;
}
.cc-sum article p{margin:0;font-size:14px;line-height:1.75;letter-spacing:-.01em;color:var(--cc-body);}
.cc-sum article p strong{font-weight:700;color:var(--cc-ink);}

/* ===== 반응형 ===== */
@media (max-width:1140px){
  .cc-flow{flex-direction:column;align-items:center;gap:8px;}
  .cc-chev{margin:2px 0;transform:rotate(90deg);}
  .cc-core{--hw:clamp(96px,15vw,138px);}
  .cc-cap{margin-bottom:14px;}
  .cc-sum{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;}
}
@media (max-width:560px){
  .cc-core{padding:64px 20px 72px;--hw:clamp(84px,25vw,110px);}
  .cc-sublede{margin-bottom:44px;}
  .cc-sum{grid-template-columns:1fr;gap:28px;}
}
@media (prefers-reduced-motion:reduce){ .cc-hex{transition:none;} }
/* .section-head h2 와 같은 분기점(640px)에서 같은 크기로 줄인다 */
@media (max-width:640px){ .cc-eyebrow h2{font-size:22px;} }

/* ---------- 우측 하단 문의 플로팅 버튼 ----------
   노출 페이지에서 $floatInquiry = true 로 켠다 (Projects 목록 · About)
   이미지 원본 크기(256×256) 그대로 표시한다. */
.float-inquiry {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 90;              /* 헤더(100)보다 아래, 본문 위 */
    display: block;
    line-height: 0;
    transition: transform .2s;
}
.float-inquiry img { display: block; }   /* 크기 지정 없이 원본 그대로 */
.float-inquiry:hover { transform: translateY(-3px); }

@media (max-width: 640px) {
    .float-inquiry { right: 12px; bottom: 12px; }
    /* 모바일에서는 본문을 덜 가리도록 원본(100px)의 75%로 축소 */
    .float-inquiry img { width: 75px; height: 75px; }
}
@media (prefers-reduced-motion: reduce) { .float-inquiry { transition: none; } }