/* ============================================================
   URBAN FIX / 어반픽스 — 시스템장 철거
   DESIGN 01 — APTALL형 포트폴리오 콜라주
   WHITE + CHARCOAL + OCHRE/OLIVE
============================================================ */

:root {
    --bg: #FFFFFF;
    --bg-sub: #F7F7F2;
    --text: #222226;
    --text-sub: #2E2A26;
    --text-mute: #746C64;
    --accent: #8A5E12;
    --accent-2: #5B6B2E;
    --tint: #F3EFE7;
    --tint-2: #F9F7F3;
    --line: #E7E4DC;
    --container: 1280px;
    --radius-photo: 18px;
    --radius-card: 16px;
    --font: 'Gothic A1', -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo",
        "Malgun Gothic", sans-serif;
    --font-serif: 'Noto Serif KR', "Nanum Myeongjo", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; }
svg { display: block; }

/* ------------------------------------------------------------
   MOTION — 절제된 fade-up / reveal (parallax·자동회전·pulse 금지)
------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.hero-copy-content { animation: heroFadeUp 0.7s ease both; }
.hero-photo { animation: heroFadeUp 0.7s ease 0.12s both; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero-copy-content, .hero-photo { animation: none; }
}

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

.eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--tint);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.section {
    padding: 72px 0;
}
.section-lg { padding: 90px 0; }
.section-sub { background: var(--bg-sub); }

.section-head {
    margin-bottom: 48px;
}
.section-head h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    color: var(--text-sub);
    letter-spacing: -0.01em;
    position: relative;
    padding-left: 18px;
    border-left: 4px solid var(--accent);
}
.section-head p {
    margin-top: 14px;
    color: var(--text-mute);
    font-size: 1rem;
}

.point { color: var(--accent); }

/* 큰 여백 구간에 은은하게 배치하는 옷걸이 워터마크 (장식용, 클릭 불가) */
.corner-motif {
    position: absolute;
    pointer-events: none;
    opacity: 0.07;
    z-index: 0;
}
.corner-motif svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------
   HEADER
------------------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--line);
    border-top: 3px solid var(--accent);
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.15;
}
.brand-icon { flex: none; width: 26px; height: 26px; color: var(--accent); }
.brand-text { display: flex; flex-direction: column; }
.brand-en {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: var(--text);
}
.brand-kr {
    font-size: 0.72rem;
    color: var(--text-mute);
    letter-spacing: 0.04em;
}
.nav-desktop {
    display: none;
}
.nav-desktop ul {
    display: flex;
    gap: 32px;
}
.nav-desktop a {
    position: relative;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-sub);
    padding-bottom: 4px;
}
.nav-desktop a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.2s ease;
}
.nav-desktop a:hover,
.nav-desktop a.active { color: var(--accent); }
.nav-desktop a:hover::after,
.nav-desktop a.active::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 12px; }

.btn-call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 11px 20px;
    border-radius: 4px;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease;
}
.btn-call:hover { background: var(--accent-2); transform: translateY(-1px); }
.btn-call svg { width: 16px; height: 16px; flex: none; }

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
    cursor: pointer;
}
.menu-toggle svg { width: 20px; height: 20px; }

.nav-mobile {
    display: none;
    border-top: 1px solid var(--line);
    background: #fff;
}
.nav-mobile.open { display: block; }
.nav-mobile ul { padding: 8px 24px 20px; }
.nav-mobile li { border-bottom: 1px solid var(--line); }
.nav-mobile a {
    display: block;
    padding: 14px 0;
    font-size: 1rem;
    font-weight: 600;
}

@media (min-width: 900px) {
    .nav-desktop { display: block; }
    .menu-toggle { display: none; }
    .nav-mobile { display: none !important; }
}

/* ------------------------------------------------------------
   HERO — 좌측 카피(H1 소형 + 큰 태그라인) / 우측 실사진 1장
------------------------------------------------------------ */
.hero {
    padding: 64px 0 40px;
}
.hero-grid {
    display: grid;
    gap: 40px;
}
.hero-copy { position: relative; }
.hero-copy-bg {
    position: absolute;
    top: -14%;
    right: -10%;
    width: 70%;
    max-width: 340px;
    opacity: 0.14;
    z-index: 0;
    pointer-events: none;
}
.hero-copy-bg svg { width: 100%; height: auto; display: block; }
.hero-copy-content { position: relative; z-index: 1; }
.hero-copy h1 {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}
.hero-tagline {
    font-family: var(--font-serif);
    margin-top: 14px;
    font-size: clamp(2rem, 6.4vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.22;
    color: var(--text-sub);
}
.hero-tagline-by {
    margin-top: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--accent);
}
.hero-copy .sub {
    margin-top: 24px;
    font-size: 1.02rem;
    color: var(--text-mute);
    max-width: 42em;
}
.hero-actions { margin-top: 32px; }

.hero-photo {
    border-radius: var(--radius-photo);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--tint-2);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
    .hero { padding: 96px 0 56px; }
    .hero-grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
}

/* ------------------------------------------------------------
   SERVICE FLOW (timeline, single line — not cards)
------------------------------------------------------------ */
.flow-track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 2px solid var(--text);
}
.flow-item {
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 16px;
}
.flow-item .num { font-size: 1rem; font-weight: 800; color: var(--accent); flex: none; width: 1.6em; }
.flow-item .icon-badge {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.flow-item .icon-badge svg { width: 20px; height: 20px; }
.flow-item .text { min-width: 0; }
.flow-item .en { display: block; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text-mute); text-transform: uppercase; }
.flow-item .kr { display: block; font-size: 1.1rem; font-weight: 700; color: var(--text-sub); margin-top: 2px; }
.flow-item .desc { margin-top: 4px; font-size: 0.86rem; color: var(--text-mute); }
@media (min-width: 900px) {
    .flow-track { grid-template-columns: repeat(4, 1fr); border-top: none; gap: 0; }
    .flow-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        border-bottom: none;
        border-top: none;
        padding: 0 16px;
        position: relative;
    }
    .flow-item .num { width: auto; order: -1; }
    .flow-item:not(:first-child)::before {
        content: "";
        position: absolute;
        top: 45px;
        left: -50%;
        width: 100%;
        height: 1px;
        background: var(--line);
    }
    .flow-item .icon-badge { position: relative; z-index: 1; }
    .flow-item .desc { max-width: 15em; }
}

/* CTA 밴드(다크 배경) 안에 들어간 FLOW — 색상 반전 */
.cta-band .flow-track {
    margin-top: 32px;
    border-top-color: rgba(255, 255, 255, 0.25);
    position: relative;
    z-index: 1;
}
.cta-band .flow-item { border-bottom-color: rgba(255, 255, 255, 0.16); }
.cta-band .flow-item .num { color: var(--accent-2); }
.cta-band .flow-item .icon-badge { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.cta-band .flow-item .en { color: rgba(255, 255, 255, 0.6); }
.cta-band .flow-item .kr { color: #fff; }
@media (min-width: 900px) {
    .cta-band .flow-item:not(:first-child)::before { background: rgba(255, 255, 255, 0.2); }
}

/* ------------------------------------------------------------
   NSEO INDEX — 큰 대표사진 + 서비스명 + 짧은 설명 (사진 카드형)
------------------------------------------------------------ */
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.service-card {
    display: block;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--line);
    background: #fff;
}
.service-card figure { margin: 0; aspect-ratio: 4/3; overflow: hidden; }
.service-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.service-card:hover img { transform: scale(1.03); }
.service-card .service-body { padding: 20px 22px 24px; }
.service-card .num {
    font-size: 1.5rem;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1px var(--accent);
}
.service-card h3 { margin-top: 6px; font-size: 1.2rem; font-weight: 800; color: var(--text-sub); }
.service-card p { margin-top: 6px; font-size: 0.92rem; color: var(--text-mute); }
.service-card .arrow { display: inline-block; margin-top: 12px; color: var(--accent); font-weight: 700; transition: transform 0.15s; }
.service-card:hover .arrow { transform: translateX(4px); }
@media (min-width: 640px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .service-card.is-lead { grid-column: 1 / 3; }
    .service-card.is-lead figure { aspect-ratio: 21/9; }
}
@media (min-width: 1000px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .service-card.is-lead { grid-column: 1 / 3; }
    .service-card.is-lead figure { aspect-ratio: 12/5; }
}

/* ------------------------------------------------------------
   SITUATIONS — 흐르는 태그 클라우드 (그리드형 카드 대신)
------------------------------------------------------------ */
.situation-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.situation-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: #fff;
}
.situation-tag .icon-badge {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tint);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.situation-tag .icon-badge svg { width: 18px; height: 18px; }
.situation-tag p {
    font-size: 0.96rem;
    color: var(--text-sub);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}
.situation-tag:nth-child(3n+1) { border-color: var(--tint); background: var(--tint-2); }
.situation-cta {
    background: var(--accent);
    border-color: var(--accent);
}
.situation-cta .icon-badge { background: rgba(255, 255, 255, 0.2); color: #fff; }
.situation-cta p { color: #fff; }
@media (max-width: 639px) {
    .situation-tag p { white-space: normal; }
}

/* ------------------------------------------------------------
   PROCESS (timeline)
------------------------------------------------------------ */
.process-list { position: relative; }
.process-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    padding-bottom: 34px;
    position: relative;
}
.process-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 46px;
    bottom: 0;
    width: 1px;
    background: var(--line);
}
.process-item .num-badge {
    width: 54px;
    height: 54px;
    border: none;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    background: var(--accent);
    flex: none;
}
.process-item:nth-child(even) .num-badge { background: var(--accent-2); }
.process-item h3 {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-sub);
    margin-top: 10px;
}
.process-item p {
    margin-top: 6px;
    color: var(--text-mute);
    font-size: 0.95rem;
}
@media (min-width: 900px) {
    .process-list {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
    }
    .process-item {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 0 14px 0 0;
        padding-bottom: 0;
    }
    .process-item:not(:last-child)::before {
        left: 50%;
        top: 22px;
        width: 100%;
        right: auto;
        bottom: auto;
        height: 1px;
    }
    .process-item .num-badge { width: 44px; height: 44px; font-size: 0.95rem; margin: 0 auto 4px; }
    .process-item h3 { font-size: 1rem; }
    .process-item p { max-width: 12em; }
}

/* ------------------------------------------------------------
   CASE STUDIES / PHOTO PAIR
------------------------------------------------------------ */
.case-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
.case-pair { }
.case-pair .imgs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@media (min-width: 640px) {
    .case-pair .imgs { grid-template-columns: 1fr 1fr; }
}
.case-pair figure { margin: 0; position: relative; }
.case-pair img { border-radius: var(--radius-photo); aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.case-pair figcaption {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: rgba(34, 34, 38, 0.78);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 3px;
}
@media (min-width: 720px) {
    .case-grid.cols-2 { grid-template-columns: 1fr 1fr; }
    .case-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

.case-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.case-card {
    display: block;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.case-card .tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.06em;
    background: var(--tint);
    padding: 4px 10px;
    border-radius: 999px;
}
.case-card h3 {
    margin-top: 10px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-sub);
    line-height: 1.35;
}
.case-card img {
    margin-top: 18px;
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-photo);
    transition: transform 0.35s ease;
}
.case-card:hover img { transform: scale(1.03); }
@media (min-width: 720px) {
    .case-cards { grid-template-columns: repeat(3, 1fr); }
}

/* CASE 위에 걸린 옷걸이 레일 장식 — 옷걸이가 걸려있는 모습 */
.hanger-rail {
    display: flex;
    justify-content: space-around;
    padding: 0 20px 28px;
    border-top: 3px solid var(--text-sub);
    margin: 0 4px 4px;
}
.hanger-rail svg { width: 30px; height: 30px; margin-top: -3px; color: var(--accent); }
@media (max-width: 719px) {
    .hanger-rail svg:nth-child(3) { display: none; }
}

/* single photo block used inside NSEO/region body */
.photo-block { margin: 0; }
.photo-block img { border-radius: var(--radius-photo); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.photo-block figcaption {
    margin-top: 10px;
    font-size: 0.86rem;
    color: var(--text-mute);
}
.photo-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 640px) {
    .photo-row.two { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------
   FAQ (native details/summary, no JS)
------------------------------------------------------------ */
.faq-list { max-width: 960px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
    padding: 20px 4px;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-sub);
    display: flex;
    gap: 14px;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
    content: "Q";
    flex: none;
    color: var(--accent);
    font-weight: 800;
}
.faq-item[open] .a { animation: faqOpen 0.25s ease; }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.faq-item .a {
    padding: 0 4px 22px 28px;
    color: var(--text-mute);
    font-size: 0.95rem;
    display: flex;
    gap: 14px;
}
.faq-item .a::before {
    content: "A";
    flex: none;
    color: var(--text-mute);
    font-weight: 800;
}

/* ------------------------------------------------------------
   OTHER PROJECTS / OTHER SERVICES / AREA
------------------------------------------------------------ */
.other-projects .imgs { display: grid; grid-template-columns: 1fr; gap: 10px; }
.other-card { display: block; overflow: hidden; border-radius: var(--radius-photo); }
.other-card img { border-radius: var(--radius-photo); aspect-ratio: 1/1; object-fit: cover; width: 100%; transition: transform 0.35s ease; }
.other-card:hover img { transform: scale(1.03); }
@media (min-width: 720px) {
    .other-projects .imgs { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* OTHER SERVICES / AREA / 사이트맵 공용 카드 */
.link-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.link-card {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: #fff;
    transition: border-color 0.2s ease;
}
.link-card:hover { border-color: var(--accent); }
.link-card figure { margin: 0; aspect-ratio: 4/3; overflow: hidden; }
.link-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.link-card:hover figure img { transform: scale(1.03); }
.link-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    font-weight: 700;
    color: var(--text-sub);
}
.link-card-body.no-photo { padding: 22px 18px; }
.link-card-body .arrow { color: var(--accent); flex: none; margin-left: 10px; transition: transform 0.15s; }
.link-card:hover .arrow { transform: translateX(4px); }

@media (min-width: 640px) {
    .link-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .link-card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------
   INFO TABLE
------------------------------------------------------------ */
.info-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.info-table th, .info-table td {
    text-align: left;
    padding: 16px 14px;
    border-bottom: 1px solid var(--line);
    font-size: 0.98rem;
    vertical-align: top;
}
.info-table th {
    width: 30%;
    color: var(--text);
    font-weight: 700;
    background: var(--bg-sub);
}
.info-table td { color: var(--text-sub); }

/* ------------------------------------------------------------
   CHECK POINTS
------------------------------------------------------------ */
.check-list { border-top: 1px solid var(--line); }
.check-item {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}
.check-item .mark {
    flex: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    position: relative;
    margin-top: 2px;
}
.check-item .mark::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 5px;
    height: 9px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(40deg);
}
.check-item p { color: var(--text-sub); font-size: 0.98rem; font-weight: 600; }

/* ------------------------------------------------------------
   FINAL CTA
------------------------------------------------------------ */
.cta-band {
    position: relative;
    background: var(--text-sub);
    color: #fff;
    text-align: center;
    padding: 64px 24px;
    border-radius: var(--radius-card);
    overflow: hidden;
}
.cta-band .corner-motif { top: -30px; right: -20px; width: 220px; height: 220px; opacity: 0.1; color: #fff; }
.cta-band h2 { font-family: var(--font-serif); font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 700; position: relative; z-index: 1; }
.cta-band p { margin-top: 12px; color: #D9D2CB; font-size: 0.98rem; position: relative; z-index: 1; }
.cta-band .btn-call { margin-top: 26px; background: var(--accent-2); font-size: 1rem; padding: 15px 30px; position: relative; z-index: 1; }

/* ------------------------------------------------------------
   SMALL HERO (NSEO / region pages)
------------------------------------------------------------ */
.small-hero {
    padding: 44px 0 8px;
    border-bottom: 1px solid var(--line);
}
.small-hero .crumb {
    font-size: 0.82rem;
    color: var(--text-mute);
    margin-bottom: 16px;
}
.small-hero .crumb a { color: var(--accent); font-weight: 600; }
.small-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 6vw, 3rem);
    font-weight: 700;
    color: var(--text-sub);
    letter-spacing: -0.01em;
    padding-bottom: 36px;
}

/* ------------------------------------------------------------
   FOOTER
------------------------------------------------------------ */
.site-footer {
    background: var(--bg-sub);
    border-top: 1px solid var(--line);
    padding: 56px 0 40px;
    margin-top: 40px;
}
.footer-brand { font-weight: 800; font-size: 1.1rem; color: var(--text-sub); }
.footer-info {
    margin-top: 18px;
    font-size: 0.86rem;
    color: var(--text-mute);
    line-height: 2;
}
.footer-info strong { color: var(--text-sub); font-weight: 700; }
.footer-bottom {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 0.8rem;
    color: var(--text-mute);
}
.footer-updated {
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-mute);
}

.mobile-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 -4px 16px rgba(34, 34, 38, 0.16);
}
.mobile-cta-bar svg { width: 18px; height: 18px; flex: none; }
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
    .mobile-cta-bar { display: none; }
    body { padding-bottom: 0; }
}

/* ------------------------------------------------------------
   UTILITIES
------------------------------------------------------------ */
.text-center { text-align: center; }
.mt-lg { margin-top: 90px; }
.mt-xl { margin-top: 120px; }

@media (max-width: 899px) {
    .mt-lg { margin-top: 64px; }
    .mt-xl { margin-top: 80px; }
    .section { padding: 56px 0; }
    .section-lg { padding: 64px 0; }
}

/* PC 전용 강제 줄바꿈 — 모바일에서는 자연 줄바꿈에 맡기고 숨김 */
.pc-only { display: none; }
@media (min-width: 900px) {
    .pc-only { display: inline; }
}