/* ==========================================================================
   진행사례(레퍼런스) 페이지
   - 색/폰트/간격은 global-style.css 토큰을 사용한다 (head.php 에서 함께 로드)
   - PC/모바일 단일 파일 반응형. 모바일에서는 필터·검색이 배너 위로 올라온다(order)
   ========================================================================== */
:root {
    --font-family-base: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", sans-serif;
    --ref-font-title-18: normal 600 18px / 24px var(--font-family-base);
    --ref-color-surface-dark: #454D56;
    --ref-font-body-l: normal 500 18px / 28px var(--font-family-base);
    --ref-font-title-24: normal 600 24px / 32px var(--font-family-base);
    --ref-font-title-36: normal 600 36px / 48px var(--font-family-base);
    --ref-font-headline-s: normal 500 32px / 40px var(--font-family-base);
    /* 지표 값 줄 높이 — title-24 의 line-height 와 같게 잡아 3개 지표의 라벨 줄을 맞춘다 */
    --ref-metric-value-height: 32px;
    --ref-sticky-bar-height: 80px;
}

.ref *,
.ref *::before,
.ref *::after {
    font-family: inherit;
    font-weight: inherit;
}

.ref {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    display: flex;
    flex-direction: column;
    background: var(--color-surface-default);
    color: var(--color-content-default);
}

/* --------------------------------------------------------------------------
   크몽 전용 헤더 (reference.php?view=kmong)
   로고만 노출하고 링크·메뉴·회원가입/로그인 버튼은 두지 않는다.
   크몽이 외부 사이트로의 전환 유도를 금지하기 때문.
   -------------------------------------------------------------------------- */
.ref-kmong-header {
    background: var(--color-surface-default);
    border-bottom: 1px solid var(--color-border-subtle);
}
.ref-kmong-header__inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: calc(1280px + var(--spacing-20) * 2);
    height: 72px;
    margin: 0 auto;
    padding: 0 var(--spacing-20);
}
.ref-kmong-header__inner img {
    width: 96px;
    height: 40px;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   배너
   -------------------------------------------------------------------------- */
.ref-hero {
    background: linear-gradient(90deg, var(--color-surface-default) 0%, var(--color-surface-brand-subtle) 100%);
}
.ref-hero__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-24);
    width: 100%;
    max-width: calc(1280px + var(--spacing-20) * 2);
    height: 312px;
    margin: 0 auto;
    padding: 0 var(--spacing-20);
    overflow: hidden;
}
.ref-hero__br-mo { display: none; }
.ref-hero__eyebrow {
    margin-bottom: var(--spacing-12);
    font: var(--ref-font-body-l);
    color: var(--color-content-subtle);
}
.ref-hero__title {
    font: var(--ref-font-title-36);
    color: var(--color-content-strong);
}
.ref-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-20) 6px var(--spacing-16);
    border: 2px solid var(--color-border-brand);
    border-radius: 999px;
    background: var(--color-surface-default);
    font: var(--ref-font-headline-s);
    letter-spacing: -1.5px;
    color: var(--color-content-brand);
}
.ref-hero__visual {
    position: relative;
    align-self: flex-start;
    width: 499px;
    max-width: 50%;
    margin-top: var(--spacing-16);
}
.ref-hero__visual img { display: block; width: 100%; height: auto; }
.ref-hero__rank {
    position: absolute;
    top: var(--spacing-32);
    left: calc(var(--spacing-48) * -1);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    width: 86px;
    height: 37px;
    padding-right: var(--spacing-4);
    /* 말풍선 모양 — 오른쪽 아래 꼬리가 카드를 가리킨다 */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='37' viewBox='0 0 86 37' fill='none'%3E%3Cpath d='M64.8467 0C73.6832 0 80.8467 7.16344 80.8467 16V21C80.8467 23.7065 80.1736 26.2554 78.9873 28.4902L85.5078 31.9326L75.8447 32.6191C72.9775 35.334 69.1069 37 64.8467 37H16C7.1635 36.9999 2.09396e-07 29.8365 0 21V16C0 7.16348 7.16349 5.74435e-05 16 0H64.8467Z' fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.07));
    font: var(--font-body-s-medium);
    color: var(--color-content-default);
}
.ref-hero__rank b { font: var(--font-body-s-semibold); color: var(--color-content-brand); }

/* --------------------------------------------------------------------------
   필터 · 검색
   -------------------------------------------------------------------------- */
.ref-controls__inner,
.ref-body {
    width: 100%;
    max-width: calc(1280px + var(--spacing-20) * 2);
    margin: 0 auto;
    padding: 0 var(--spacing-20);
}
.ref-controls__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-20);
    padding-top: var(--spacing-48);
}
.ref-filters {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
}
.ref-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
}

/* 셀렉트 — PC 드롭다운 / 모바일 바텀시트 (같은 마크업, CSS 로만 표현을 바꾼다) */
.ref-select { position: relative; }
.ref-select__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-8);
    width: 169px;
    height: 48px;
    padding: 0 var(--spacing-16);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-full);
    background: var(--color-surface-default);
    font: var(--font-body-m-medium);
    color: var(--color-content-default);
    cursor: pointer;
}
/* 비활성(업종)은 배경을 채우지 않고 글자만 흐려진다 */
.ref-select__button:disabled {
    background: var(--color-surface-default);
    color: var(--color-content-faint);
    cursor: not-allowed;
}
.ref-select.is-open .ref-select__button { border-color: var(--color-border-brand); }
/* 정렬 셀렉트는 알약이 아니라 8px 사각이다 */
.ref-select[data-select="sort"] .ref-select__button {
    width: auto;
    min-width: 113px;
    padding: 0 var(--spacing-4) 0 var(--spacing-16);
    border-radius: var(--radius-8);
}

.ref-select__panel {
    position: absolute;
    top: calc(100% + var(--spacing-12));
    left: 0;
    z-index: 20;
    min-width: 171px;
    padding: var(--spacing-8) 0;
    border: 0;
    border-radius: var(--radius-16);
    background: var(--color-surface-default);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
.ref-select__panel-head { display: none; }
.ref-select__list { list-style: none; margin: 0; padding: 0; }
.ref-select__option {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    height: 44px;
    padding: 0 var(--spacing-16);
    font: var(--font-body-m-medium);
    color: var(--color-content-default);
}
.ref-select__option:hover { background: var(--color-surface-subtle); }
.ref-select__option.is-selected { color: var(--color-content-brand); }
.ref-select__count { font: var(--font-caption-m); color: var(--color-content-muted); font-style: normal; }

/* 검색 */
.ref-search {
    position: relative;
    flex: 1;
    max-width: 527px;
}
.ref-search__input {
    width: 100%;
    height: 48px;
    padding: 0 48px 0 var(--spacing-20);
    border: 0;
    border-radius: var(--radius-24);
    background: var(--color-surface-subtle);
    font: var(--font-body-m-medium);
    color: var(--color-content-strong);
}
.ref-search__input::placeholder { color: var(--color-content-muted); }
.ref-search__submit {
    position: absolute;
    top: 50%;
    right: var(--spacing-16);
    transform: translateY(-50%);
    display: flex;
    border: 0;
    background: none;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   결과 헤더
   -------------------------------------------------------------------------- */
.ref-body { padding-top: var(--spacing-24); padding-bottom: var(--spacing-80); }
/* 목록 부분 갱신 중 — 새 결과가 오기 전까지 흐리게 두고 중복 조작을 막는다 */
.ref-body.is-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.15s ease; }
.ref-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    margin-bottom: var(--spacing-16);
}
.ref-result-count {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    font: var(--ref-font-title-18);
    color: var(--color-content-default);
}
.ref-result-count__value b { color: var(--color-content-brand); }
.ref-info {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    background: none;
    cursor: pointer;
}
.ref-info__tooltip {
    position: absolute;
    top: calc(100% + var(--spacing-8));
    left: 0;
    /* 고정 하단바(.fixed_bottom_bar)와 채널톡(.floatingButton)이 z-index 9999 라 그 위로 올린다 */
    z-index: 10000;
    width: 296px;
    padding: var(--spacing-16);
    border-radius: var(--radius-12);
    background: var(--ref-color-surface-dark);
    color: var(--color-content-inverse);
    box-shadow: 0 8px 20px rgba(30, 37, 52, 0.2);
}
.ref-info__tooltip strong { display: block; margin-bottom: var(--spacing-8); font: var(--font-body-s-regular); }
.ref-info__tooltip p { font: var(--font-body-s-regular); }

/* 결과 헤더의 정렬 셀렉트 */
.ref-select[data-select="sort"] .ref-select__button {
    min-width: 113px;
    height: 48px;
    padding: 0 var(--spacing-4) 0 var(--spacing-16);
    font: var(--font-body-m-medium);
}
.ref-select[data-select="sort"] .ref-select__panel { left: auto; right: 0; min-width: 120px; }

/* --------------------------------------------------------------------------
   카드 그리드
   -------------------------------------------------------------------------- */
.ref-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;   /* hover 로 카드가 길어져도 같은 행의 다른 카드를 밀지 않는다 */
    gap: var(--spacing-16);
}
.ref-card {
    position: relative;
    display: block;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-12);
    background: var(--color-surface-default);
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}
.ref-card__thumb {
    position: relative;
    width: 100%;
    /* hover 에서 제목이 2줄로 펴지는 만큼 여기서 높이를 내준다(아래 hover 규칙 참고).
       카드 전체 높이는 그대로 유지된다 — Figma 의 Default/Hover 변형이 둘 다 308x354 로 같다. */
    padding-top: 65.03%;
    background: var(--color-surface-muted);
    transition: padding-top 0.15s ease;
}
.ref-card__thumb img { transition: filter 0.15s ease; }
.ref-card__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ref-card__keyword {
    position: absolute;
    left: var(--spacing-12);
    bottom: var(--spacing-12);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-4);
    max-width: calc(100% - var(--spacing-24));
    padding: var(--spacing-4) var(--spacing-12);
    border-radius: var(--radius-full);
    background: var(--color-surface-muted);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.ref-card__keyword em {
    font: var(--font-body-s-medium);
    font-style: normal;
    color: var(--color-content-default);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ref-card__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
    padding: var(--spacing-12) var(--spacing-12) 0;
}
/* 지표 3개는 폰트 크기가 서로 다르다(최고순위 24px / 나머지 18px).
   블록 그대로 두면 줄 높이 차이(32px vs 28px)만큼 값도 라벨도 어긋난다.
   값 영역을 같은 높이로 고정하고 아래 정렬해 세 지표의 기준선을 맞춘다. */
.ref-card__metric strong {
    display: flex;
    align-items: flex-end;
    min-height: var(--ref-metric-value-height);
    font: var(--ref-font-body-l);
    color: var(--color-content-default);
}
/* 카드의 주인공 숫자 */
.ref-card__metric strong.is-brand {
    font: var(--ref-font-title-24);
    color: var(--color-content-brand);
}
.ref-card__metric span {
    display: block;
    margin-top: var(--spacing-4);
    font: var(--font-caption-m);
    color: var(--color-content-subtle);
}

.ref-card__title {
    margin: var(--spacing-12) var(--spacing-12) 0;
    padding-top: var(--spacing-12);
    border-top: 1px solid var(--color-border-subtle);
    font: var(--font-body-s-semibold);
    color: var(--color-content-default);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* 높이를 내용에 맡기지 않고 줄 수로 고정한다. 제목이 원래 한 줄로 끝나는 카드는
       hover 해도 글이 안 늘어나는데 썸네일만 줄어들어서 카드가 되레 작아진다.
       border-box 라 본문 + padding-top + border-top 을 함께 계산한다. */
    height: calc(var(--body-s-line) + var(--spacing-12) + 1px);
    transition: height 0.15s ease;
}
.ref-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-8);
    padding: var(--spacing-4) var(--spacing-12) var(--spacing-12);
}
.ref-card__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    min-width: 0;
    font: var(--font-body-s-regular);
    color: var(--color-content-subtle);
}
.ref-card__author i { color: var(--color-content-muted); }
.ref-card__author em,
.ref-card__author i {
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ref-card__reaction {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    font: var(--font-body-s-regular);
    color: var(--color-content-subtle);
}
.ref-card__reaction em { font-style: normal; margin-right: var(--spacing-8); }
.ref-card__reaction em:last-child { margin-right: 0; }

@media (hover: hover) {
    .ref-card:hover {
        z-index: 2;
        box-shadow: 0 8px 24px rgba(30, 37, 52, 0.16);
    }
    .ref-card:hover .ref-card__title {
        -webkit-line-clamp: 2;
        height: calc(var(--body-s-line) * 2 + var(--spacing-12) + 1px);
    }
    /* 제목이 한 줄(=--body-s-line) 늘어나는 만큼 썸네일에서 정확히 같은 높이를 뺀다.
       그래야 카드 크기가 그대로라 아래 카드가 밀리지 않는다. */
    .ref-card:hover .ref-card__thumb { padding-top: calc(65.03% - var(--body-s-line)); }
    .ref-card:hover .ref-card__thumb img { filter: brightness(0.82); }
}

/* --------------------------------------------------------------------------
   페이지네이션 — 축약형 ‹ 1 … 5 6 [7] 8 9 … 292 ›
   -------------------------------------------------------------------------- */
.ref-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    padding-top: var(--spacing-56);
}
.ref-pagination__page,
.ref-pagination__arrow,
.ref-pagination__gap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    font: var(--font-body-m-medium);
    color: var(--color-content-default);
}
/* 좌우 화살표만 테두리를 두른다 */
.ref-pagination__arrow {
    border: 1px solid var(--color-border-default);
}
.ref-pagination__arrow.is-disabled {
    border-color: var(--color-border-subtle);
}
.ref-pagination__gap { color: var(--color-content-muted); }
.ref-pagination__page.is-current {
    background: var(--color-surface-brand);
    color: var(--color-content-inverse);
}

/* --------------------------------------------------------------------------
   빈 상태
   -------------------------------------------------------------------------- */
.ref-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-8) var(--spacing-20) var(--spacing-40);
    text-align: center;
}
.ref-empty img { width: 290px; max-width: 100%; height: auto; margin-bottom: var(--spacing-20); }
.ref-empty__title { font: var(--ref-font-body-l); color: var(--color-content-default); }
.ref-empty__title em { font-style: normal; color: var(--color-content-brand); }
.ref-empty__desc { font: var(--ref-font-body-l); color: var(--color-content-default); }

/* --------------------------------------------------------------------------
   하단 상담 CTA
   -------------------------------------------------------------------------- */
.ref-cta {
    padding: var(--spacing-48) var(--spacing-20) calc(var(--spacing-48) + var(--ref-sticky-bar-height));
    background: var(--color-surface-brand-subtle);
    text-align: center;
}
.ref-cta h2 { font: var(--ref-font-title-24); color: var(--color-content-default); }
.ref-cta p { margin-top: var(--spacing-8); font: var(--ref-font-body-l); color: var(--color-content-subtle); }
.ref-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    width: 311px;
    max-width: 100%;
    height: 56px;
    margin-top: var(--spacing-8);
    padding: 0 var(--spacing-12);
    border-radius: var(--radius-8);
    background: var(--color-surface-brand);
    font: var(--font-body-m-medium);
    color: var(--color-content-inverse);
    cursor: pointer;
}

/* 바텀시트 등장 모션 — hidden 이 풀리는 순간 1회 재생된다 */
@keyframes ref-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes ref-sheet-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 바텀시트 배경 — 모바일에서만 보인다 */
.ref-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(30, 37, 52, 0.5);
    display: none;
}

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1279px) {
    .ref-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    /* 모바일은 필터·검색을 배너 위로 올린다 */
    .ref-controls { order: 2; }
    .ref-hero { order: 3; }
    .ref-body { order: 4; }
    .ref-cta { order: 5; }

    .ref-hero__inner {
        flex-direction: column;
        align-items: center;
        height: auto;
        gap: var(--spacing-16);
        padding: var(--spacing-24) var(--spacing-20) 0;
        text-align: center;
    }
    .ref-hero__br-mo { display: inline; }
    /* 모바일은 아이브로우와 "노출 1위" 말풍선을 쓰지 않는다 */
    .ref-hero__eyebrow,
    .ref-hero__rank { display: none; }
    .ref-hero__title { font: var(--ref-font-title-24); }
    /* 모바일에서는 알약 테두리 없이 브랜드 컬러 글자로만 강조한다 */
    .ref-hero__badge {
        display: inline;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        font: inherit;
        letter-spacing: inherit;
    }
    .ref-hero__badge svg { display: none; }
    .ref-hero__visual {
        align-self: center;
        width: 100%;
        max-width: 320px;
        max-height: 96px;
        margin-top: 0;
        overflow: hidden;
    }

    .ref-controls__inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-12);
        padding-top: var(--spacing-12);
        padding-bottom: var(--spacing-12);
    }
    .ref-filters { gap: var(--spacing-8); }
    .ref-filters .ref-select { flex: 1; }   /* 태블릿은 남는 폭을 셀렉트가 나눠 갖는다 */
    .ref-select__button { min-width: 0; width: 100%; height: 40px; font: var(--font-body-s-medium); }
    .ref-select[data-select="sort"] .ref-select__button { width: auto; min-width: 96px; }
    .ref-search { max-width: none; }
    .ref-search__input { height: 48px; }

    .ref-body { padding-top: var(--spacing-16); padding-bottom: var(--spacing-48); }
    .ref-grid { grid-template-columns: repeat(2, 1fr); }

    /* 셀렉트를 바텀시트로 전환 */
    body.ref-sheet-open .ref-sheet-backdrop {
        display: block;
        animation: ref-sheet-fade 200ms ease-out;
    }
    .ref-select__panel {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10001;
        width: 100%;
        min-width: 0;
        /* 핸들바·제목은 고정하고 목록만 스크롤한다.
           display 를 지정하면 [hidden](UA 규칙 0,0,1)을 이겨 항상 열려 보이므로
           닫힌 상태를 :not([hidden]) 으로 명시적으로 제외한다 */
        flex-direction: column;
        max-height: 70vh;
        overflow: hidden;
        padding: var(--spacing-12) var(--spacing-16) var(--spacing-20);
        border: 0;
        border-radius: var(--radius-24) var(--radius-24) 0 0;
        box-shadow: 0 -4px 20px rgba(30, 37, 52, 0.16);
        /* 아래에서 밀려 올라오는 느낌 — 감속 커브로 끝을 부드럽게 */
        animation: ref-sheet-up 280ms cubic-bezier(0.32, 0.72, 0, 1);
    }
    /* 상단 핸들바 61×4 */
    .ref-select__panel:not([hidden]) { display: flex; }
    .ref-select__panel::before {
        content: "";
        display: block;
        flex: none;
        width: 61px;
        height: 4px;
        margin: 0 auto var(--spacing-16);
        border-radius: var(--radius-full);
        background: var(--color-surface-muted);
    }
    .ref-select__panel-head {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: space-between;
        height: auto;
        margin-bottom: var(--spacing-16);
        padding: 0;
        color: var(--color-content-strong);
    }
    .ref-select__panel-head span { font: var(--ref-font-title-18); }
    .ref-select__close { display: flex; border: 0; background: none; cursor: pointer; }
    /* 옵션은 세로 16px 여백 + 항목 사이 구분선 (마지막 제외) */
    .ref-select__option {
        height: auto;
        padding: var(--spacing-16) 0;
        border-bottom: 1px solid var(--color-border-subtle);
    }
    .ref-select__list li:last-child .ref-select__option { border-bottom: 0; }
    /* 목록만 스크롤 영역으로 잡는다 (패널은 overflow: hidden) */
    .ref-select__list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .ref-select[data-select="sort"] .ref-select__panel { right: 0; left: 0; }

    /* 바텀시트가 열린 동안 배경 스크롤 잠금 */
    body.ref-sheet-open { overflow: hidden; }

    @media (prefers-reduced-motion: reduce) {
        .ref-select__panel,
        body.ref-sheet-open .ref-sheet-backdrop { animation: none; }
    }
}

@media (max-width: 767px) {
    .ref-grid { gap: var(--spacing-12); }
    .ref-card__metrics { padding: var(--spacing-12) var(--spacing-12) var(--spacing-8); }
    .ref-card__title { margin: 0 var(--spacing-12); }
    .ref-card__foot { padding: var(--spacing-8) var(--spacing-12) var(--spacing-12); }
}

@media (max-width: 600px) {
    /* 크몽 헤더 — 기존 모바일 상단 로고(56px, 가운데 정렬)와 같은 눈높이로 맞춘다 */
    .ref-kmong-header__inner {
        justify-content: center;
        height: 56px;
    }
    .ref-kmong-header__inner img {
        width: 84px;
        height: 32px;
    }

    .ref-grid { grid-template-columns: 1fr; gap: var(--spacing-16); }
    .ref-card__thumb { padding-top: 44%; }

    .ref-filters { gap: var(--spacing-8); }
    .ref-controls__inner,
    .ref-body { padding-left: var(--spacing-16); padding-right: var(--spacing-16); }
    .ref-filters .ref-select { flex: 0 0 auto; }
    .ref-select__button { width: 132px; height: 40px; }
    .ref-select[data-select="sort"] .ref-select__button {
        width: auto; min-width: 96px; height: 36px; border-radius: var(--radius-8);
        font: var(--font-body-s-medium);
    }
    .ref-pagination__page,
    .ref-pagination__arrow,
    .ref-pagination__gap { min-width: 36px; height: 36px; }
    .ref-info__tooltip { width: calc(100vw - var(--spacing-40)); }
    .ref-result-count { font: var(--font-body-m-medium); }
    .ref-empty { padding-top: var(--spacing-24); }
    .ref-empty img { width: 232px; margin-bottom: var(--spacing-8); }
    .ref-empty__title,
    .ref-empty__desc { font: var(--font-body-m-medium); }
    .ref-cta__button { width: 100%; }

    /* 모바일에서는 CTA 문구가 두 줄로 접혀 커 보인다 — 한 단계씩 낮춘다 */
    .ref-cta {
        padding-top: var(--spacing-32);
        padding-bottom: calc(var(--spacing-32) + var(--ref-sticky-bar-height));
    }
    .ref-cta h2 { font: var(--ref-font-title-18); }
    /* 제목·부제는 한 덩어리로 붙이고, 버튼과의 간격만 벌린다 */
    .ref-cta p {
        margin-top: var(--spacing-4);
        font: var(--font-body-s-medium);
        letter-spacing: var(--body-s-letter);
    }
    .ref-cta__button {
        height: 48px;
        margin-top: var(--spacing-24);
        font: var(--font-body-s-medium);
        letter-spacing: var(--body-s-letter);
    }
}