/* =============================================================================
 * 컴포넌트 스타일 — 영구크린 블로그 (mcyg-blog) Phase 2
 *
 * 의존: tokens.css, main.css. 모든 값은 var(--*) 토큰만 사용.
 *
 * 섹션
 *   1)  page-header        : 페이지 상단 공통 헤더
 *   2)  breadcrumb         : 빵부스러기 네비
 *   3)  tabs-sticky        : Sticky 카테고리 탭
 *   4)  card               : 글 카드
 *   5)  post-grid          : 카드 그리드 (1/2/3열)
 *   6)  prose              : 글 본문 가독 스타일
 *   7)  eeat               : E-E-A-T 블록 (작성자/권위/배지)
 *   8)  cta-quote          : 견적 신청 CTA 박스 (inline / final)
 *   9)  related-posts      : 관련글 섹션
 *   10) empty-state        : 빈 상태
 *   11) pagination         : WP 기본 페이지네이션 보정
 * ============================================================================= */


/* -----------------------------------------------------------------------------
 * 1) page-header
 * -------------------------------------------------------------------------- */

.page-header {
    /* padding shorthand 사용 금지 — 좌우 0 이 .container 의 padding-inline 을 cascade 로 덮어쓰는 버그를
     * 만든 적이 있음(v2.0.0). top/bottom 만 longhand 로 두어 .container 의 padding-inline (= --container-pad)
     * 이 그대로 유지되도록 한다. */
    /* v4.1.21 — 페이지 제목 영역 간격 축소 (80→48 / 32→24). 위·아래 모두 한 단계씩 컴팩트. */
    padding-top: var(--space-12);
    padding-bottom: var(--space-6);
}

.page-header__eyebrow {
    display: inline-block;
    margin-bottom: var(--space-2);
    /* v4.0.0 — Label/l (14 / medium) */
    font-size: var(--fs-label-l);
    font-weight: var(--fw-medium);
    line-height: var(--lh-label-l);
    letter-spacing: var(--ls-label-l);
    color: var(--color-primary);
}

.page-header__title {
    margin: 0 0 var(--space-3);
    /* v4.0.0 — Head/xl (28 / bold) — 영구꿀팁 페이지 제목 톤 (Mobile 자동 20) */
    font-size: var(--fs-head-xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-head-xl);
    letter-spacing: var(--ls-head-xl);
    color: var(--color-text-strong);
}

.page-header__sub {
    margin: 0;
    /* v4.0.0 — SubHead/l (18 / regular) */
    font-size: var(--fs-subhead-l);
    font-weight: var(--fw-regular);
    line-height: var(--lh-subhead-l);
    letter-spacing: var(--ls-subhead-l);
    color: var(--color-text-soft);
    /* v4.1.7 — 부제가 비어 있어도 한 줄 분량을 확보해 home/category/archive 간
       제목 영역 총 높이를 통일. 토큰 기반 calc 으로 폴백 + 1lh 로 오버라이드.
       PHP 측에서도 빈 부제는   로 line box 강제 형성 (3중 안전망). */
    min-height: calc(var(--fs-subhead-l) * var(--lh-subhead-l));
    min-height: 1lh;
}


/* -----------------------------------------------------------------------------
 * 2) breadcrumb
 * -------------------------------------------------------------------------- */

.breadcrumb {
    padding: var(--space-4) 0 0;
    /* v4.0.0 — Caption/l (13) */
    font-size: var(--fs-caption-l);
    line-height: var(--lh-caption-l);
    color: var(--color-text-soft);
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.breadcrumb__item a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast) var(--ease-default);
}

.breadcrumb__item a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.breadcrumb__item--current {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 30ch;
}

.breadcrumb__sep {
    color: var(--color-text-soft);
    user-select: none;
}


/* -----------------------------------------------------------------------------
 * 3) tabs-sticky
 *    Header 바로 아래 붙는 가로 스크롤 탭. JS 가 .is-stuck 토글하여 그림자 표시.
 * -------------------------------------------------------------------------- */

.tabs-sticky {
    position: sticky;
    top: var(--header-height);
    z-index: var(--z-sticky);
    margin-top: var(--space-8);    /* v3.1.5 — 페이지 제목과 pill 사이 간격 확장 (32px) */
    background-color: var(--color-bg);
    /* v3.1.5 — border-bottom 제거. .is-stuck 시 shadow 만으로 sticky 분리 시각화 */
    transition: box-shadow var(--transition-base) var(--ease-default);
}

.tabs-sticky.is-stuck {
    box-shadow: var(--shadow-sticky);
}

.tabs-sticky__inner {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    height: var(--sticky-tab-height);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.tabs-sticky__inner::-webkit-scrollbar {
    display: none;
}

.tabs-sticky__item {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    /* v4.0.0 — Label/l (14 / medium) */
    font-size: var(--fs-label-l);
    font-weight: var(--fw-medium);
    line-height: var(--lh-label-l);
    letter-spacing: var(--ls-label-l);
    color: var(--color-text);
    background-color: var(--color-bg-soft);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    text-decoration: none;
    white-space: nowrap;
    transition:
        color var(--transition-fast) var(--ease-default),
        background-color var(--transition-fast) var(--ease-default),
        border-color var(--transition-fast) var(--ease-default);
    scroll-snap-align: center;
}

.tabs-sticky__item:hover {
    color: var(--color-primary);
    background-color: var(--color-primary-soft);
    text-decoration: none;
}

/* v4.0.0 — 영구크린 보더 정책(gray-200/300 만): 활성 pill 보더는 transparent 로.
 * 강조는 배경(gray-800/900) 으로만 표현. */
.tabs-sticky__item--active {
    color: var(--color-text-inverse);
    background-color: var(--color-gray-800);
    border-color: transparent;
}

.tabs-sticky__item--active:hover {
    color: var(--color-text-inverse);
    background-color: var(--color-gray-900);
    border-color: transparent;
}

/* v4.1.20 / v4.1.21 — 서브 카테고리 행 (이사·청소 부모 활성 시에만 표시).
   메인 pill 보다 옅은 톤이지만 충분한 여백 + 활성 항목 사이즈·굵기 강조로 가시성 확보. */
.tabs-sticky__sub {
    display: flex;
    gap: var(--space-7);              /* v4.1.21 — 항목 간 간격 20 → 28 */
    align-items: center;
    /* v4.1.21 — 고정 높이 제거 → 패딩으로 줄 높이 확보 (12px 위 + 14px 아래 ≈ 56px). */
    padding-top: var(--space-3);
    padding-bottom: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--color-border);
}

.tabs-sticky__sub::-webkit-scrollbar {
    display: none;
}

.tabs-sticky__sub-item {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    /* v4.1.21 — 줄 높이 확보를 위해 세로 패딩 확대 (4 → 8). */
    padding: var(--space-2) 0;
    font-size: var(--fs-label-xl);    /* v4.1.21 — 14 → 15 */
    font-weight: var(--fw-regular);
    line-height: var(--lh-label-xl);
    letter-spacing: var(--ls-label-xl);
    color: var(--color-text-soft);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color var(--transition-fast) var(--ease-default),
        border-color var(--transition-fast) var(--ease-default);
}

.tabs-sticky__sub-item:hover {
    color: var(--color-text);
    text-decoration: none;
}

/* v4.1.21 — 활성 항목 강조: 사이즈 한 단계 위(16), bold 600, 짙은 컬러. */
.tabs-sticky__sub-item--active {
    color: var(--color-gray-900);
    font-size: var(--fs-label-xxl);   /* 16 — 비활성(15) 대비 +1 */
    font-weight: var(--fw-bold);      /* 600 — 비활성 regular(400) 대비 강조 */
    line-height: var(--lh-label-xxl);
    letter-spacing: var(--ls-label-xxl);
    border-bottom-color: var(--color-gray-900);
}

.tabs-sticky__sub-item--active:hover {
    color: var(--color-gray-900);
}


/* -----------------------------------------------------------------------------
 * 4) post-item + card — 영구꿀팁 톤 (v4.0.2 카드 구조 재정렬)
 *
 *    구조:
 *      article.post-item        (외곽 wrapper)
 *        a.card.card--featured  (그라데이션 영역, aspect-ratio 5/4, 카드 전체 클릭)
 *          .card__media-text       ← 글 제목을 큰 한글 카피로
 *          .card__media-illustration ← 카테고리 아이콘 SVG 또는 썸네일
 *        h3.post-item__title    (카드 외부 하단 제목)
 *
 *    v4.0.2 변경:
 *    · .card__media 폐기 — .card 자체가 그라데이션 미디어 영역
 *    · .card__body / .card__cat / .card__title 폐기 — 외부 .post-item__title 로 대체
 *    · 외부 카테고리 라벨 제거 (영구꿀팁 톤)
 *    · 카드 비율 1/1 → 5/4 (영구꿀팁 시각 정합)
 *
 *    카드 레벨 CSS 변수 (card.php inline style 로 주입):
 *      --cat-color       · --cat-color-soft · --cat-color-grad
 * -------------------------------------------------------------------------- */

.post-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
}

/* 카드 외부 하단 제목 */
.post-item__title {
    margin: 0;
    font-size: var(--fs-subhead-m);
    font-weight: var(--fw-bold);
    line-height: var(--lh-subhead-m);
    letter-spacing: var(--ls-subhead-m);
    color: var(--color-text-strong);
    word-break: keep-all;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-item__title a {
    color: inherit;
    text-decoration: none;
}

.post-item__title a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* v4.1.22 — card 재구성: 대표 이미지 우선 (.card--photo) + 폴백 (.card--icon).
   v4.2.6 — aspect-ratio 4/3 → 266/180 (약 3:2). 썸네일 권장 규격 532×360(266×180 2x). */
.card {
    position: relative;
    display: block;
    aspect-ratio: 266 / 180;
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    background: var(--color-bg-soft);
    transition: box-shadow var(--transition-base) var(--ease-default);
}

.card:hover,
.card:focus-visible {
    box-shadow: var(--shadow-card-hover);
    text-decoration: none;
}

/* === 대표 이미지 있을 때: 카드 전체에 이미지 표시 ===
   v4.1.26 — object-fit: cover → contain. 16:9 카드에 비율이 다른 이미지가 들어와도
   잘리지 않고 전체가 보이도록. 빈 영역은 카드 배경(gray-50) 으로 채움. */
.card--photo {
    background: var(--color-gray-50);
}

.card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;                 /* v4.2.6 — cover → contain: 썸네일 잘림 없이 카드 안에 전체 표시 (비율 다른 원본은 여백) */
    object-position: center;
    display: block;
    transition: transform var(--transition-slow) var(--ease-default);
}

.card--photo:hover .card__image,
.card--photo:focus-visible .card__image {
    transform: scale(1.04);              /* 살짝 zoom hover */
}

/* === 대표 이미지 없을 때 폴백: 카테고리 그라데이션 + 중앙 아이콘 === */
.card--icon {
    background-image: linear-gradient(
        135deg,
        var(--cat-color-soft, var(--color-primary-soft)) 0%,
        var(--cat-color-grad, var(--color-primary-soft)) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    color: var(--cat-color, var(--color-primary));
    opacity: 0.85;
    transition: transform var(--transition-slow) var(--ease-default);
    pointer-events: none;
}

.card--icon:hover .card__icon {
    transform: scale(1.05);
}

.card__icon svg,
.card__illustration-svg {
    width: 100%;
    height: 100%;
}


/* -----------------------------------------------------------------------------
 * 4-2) grid-summary — 그리드 헤딩 (영구꿀팁 "전체" + "총 N건" 톤)
 *    v4.0.2 신규. home / category / archive / search 페이지에서 sticky-tabs 다음,
 *    카드 그리드 직전에 노출.
 * -------------------------------------------------------------------------- */

.grid-summary {
    margin-top: var(--space-8);
    margin-bottom: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.grid-summary__title {
    margin: 0;
    font-size: var(--fs-head-m);
    font-weight: var(--fw-bold);
    line-height: var(--lh-head-m);
    letter-spacing: var(--ls-head-m);
    color: var(--color-text-strong);
}

.grid-summary__count {
    margin: 0;
    font-size: var(--fs-caption-l);
    line-height: var(--lh-caption-l);
    letter-spacing: var(--ls-caption-l);
    color: var(--color-text-soft);
}

.grid-summary__count strong {
    color: var(--color-text);
    font-weight: var(--fw-bold);
}


/* -----------------------------------------------------------------------------
 * 5) post-grid
 *    --4col: 영구꿀팁 톤 메인 그리드 (1024+ 4 / 768+ 2 / 모바일 1).
 *    --3col: related-posts 등 좁은 영역용 (1024+ 3 / 768+ 2 / 모바일 1).
 * -------------------------------------------------------------------------- */

.post-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
}

.post-grid > li {
    display: flex;
}

.post-grid > li > .post-item,
.post-grid > li > .card {
    width: 100%;
}

@media (min-width: 768px) {
    .post-grid--4col,
    .post-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .post-grid--3col {
        grid-template-columns: repeat(3, 1fr);
    }
    .post-grid--4col {
        grid-template-columns: repeat(4, 1fr);
        /* v4.0.1 — 카드 사이 gap 영구꿀팁 표준 24px (이전 20px) */
        gap: var(--space-6);
    }
}


/* -----------------------------------------------------------------------------
 * 6) prose — 글 본문 가독 스타일
 *    .container--prose 안쪽에서 사용. h2/h3/h4 마진, ul/ol, img, blockquote.
 * -------------------------------------------------------------------------- */

.prose {
    max-width: var(--container-prose);
    margin-inline: auto;
    color: var(--color-text);
    /* v4.1.25 — 본사 read-contents 톤 정합 (mcygclean.com/board/read.jsp).
       font-size: clamp(16, 2.5vw, 18) — 모바일 16, 데스크탑 18.
       line-height: 1.6 — 본사 정확 일치.
       letter-spacing: clamp(-0.3px, ..., 0) — 본사보다 살짝 좁히되 0 까지 완화. */
    font-size: clamp(16px, 2.5vw, 18px);
    line-height: 1.6;
    letter-spacing: clamp(-0.3px, calc(0.025vw - 0.3px), 0px);
}

/* v4.1.18 — 소제목 영구크린 브랜드 톤 정렬.
   H2: 좌측 primary blue accent bar(4px) — 브랜드 시그너처, 섹션 구분 강하게.
   H3: primary-700 짙은 블루 텍스트 — 본문 흐름 유지하며 브랜드 연결.
   H4: 본문과 동일 색상 + bold — 가장 작은 위계, 무게만 살림. */

.prose h2 {
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
    padding: var(--space-1) 0 var(--space-1) var(--space-4);
    border-left: 4px solid var(--color-primary);  /* 영구크린 시그너처 */
    /* Head/l (24 / bold) */
    font-size: var(--fs-head-l);
    font-weight: var(--fw-bold);
    line-height: var(--lh-head-l);
    letter-spacing: var(--ls-head-l);
    color: var(--color-text-strong);
}

.prose h2:first-child {
    margin-top: 0;
}

.prose h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    /* Head/xs (18 / bold) */
    font-size: var(--fs-head-xs);
    font-weight: var(--fw-bold);
    line-height: var(--lh-head-xs);
    letter-spacing: var(--ls-head-xs);
    color: var(--color-primary-active);          /* primary-700 = #0040E6 짙은 브랜드 블루 */
}

.prose h4 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
    /* SubHead/m (17 / bold) */
    font-size: var(--fs-subhead-m);
    font-weight: var(--fw-bold);
    line-height: var(--lh-subhead-m);
    letter-spacing: var(--ls-subhead-m);
    color: var(--color-text-strong);
}

/* v4.1.24 — :where() 로 specificity 를 (0,1,0) 으로 낮춤 → 아래 .prose > * + *
   (0,1,0, 동일 specificity, 뒤에 위치) 가 cascade 순서로 margin-top 만 덮어쓸 수 있게 됨.
   이전 (.prose p {margin:0}, 0,1,1) 은 .prose > * + * 보다 우선해서 단락 간 28px 갭을
   먹어버리는 버그. */
.prose :where(p) {
    margin: 0;
}

.prose a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.prose a:hover {
    color: var(--color-primary-hover);
}

.prose ul,
.prose ol {
    padding-left: var(--space-6);
}

.prose ul {
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

.prose li + li {
    margin-top: var(--space-2);
}

.prose :where(blockquote) {
    /* v4.1.24 — :where() — 위 .prose :where(p) 와 동일 이유 (margin-top: > * + * 우선) */
    margin: 0;
    padding: var(--space-4) var(--space-5);
    color: var(--color-text);
    background-color: var(--color-bg-soft);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    /* v4.0.0 — Body/m (15) */
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
}

.prose blockquote p {
    margin: 0;
}

.prose img,
.prose figure {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.prose figure img {
    border-radius: 0;
}

.prose figcaption {
    margin-top: var(--space-2);
    /* v4.0.0 — Caption/l (13) */
    font-size: var(--fs-caption-l);
    line-height: var(--lh-caption-l);
    color: var(--color-text-soft);
    text-align: center;
}

.prose code {
    padding: 0.1em 0.4em;
    background-color: var(--color-bg-soft);
    border-radius: var(--radius-sm);
    font-size: 0.9em;
}

.prose pre {
    padding: var(--space-4);
    background-color: var(--color-bg-soft);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

.prose pre code {
    padding: 0;
    background: transparent;
}

.prose hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-10) 0;
}

/* v4.1.26 — 표 (prose 안 본문 테이블) — 미니멀 + 헤더에 연한 파랑(primary-50) 배경.
   워드프레스 블록 에디터의 wp-block-table 마크업도 함께 지원. */
.prose table,
.prose .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.95em;             /* 본문보다 살짝 작게 */
    line-height: 1.5;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;              /* radius 적용을 위해 */
}

.prose thead {
    background-color: var(--color-primary-50);   /* 연한 파랑 #EBF6FF */
}

.prose th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: var(--fw-bold);
    color: var(--color-text-strong);
    border-bottom: 1px solid var(--color-border);
}

.prose td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.prose tbody tr:last-child td {
    border-bottom: 0;
}

/* thead 가 없는 표 — 첫 행을 헤더처럼 강조 (Markdown 표 패턴) */
.prose table:not(:has(thead)) tbody tr:first-child {
    background-color: var(--color-primary-50);
}

.prose table:not(:has(thead)) tbody tr:first-child td {
    font-weight: var(--fw-bold);
    color: var(--color-text-strong);
}

/* 워드프레스 블록 테이블 wrapper — figure 가 prose img/figure 룰을 받아 radius/overflow
   이중 적용되는 걸 막기 위해 reset. */
.prose .wp-block-table {
    border-radius: 0;
    overflow: visible;
}

/* v4.1.24 — 블록(단락 등) 사이 여백 28px.
   반드시 위의 모든 .prose <태그> 룰보다 *뒤*에 위치해야 함 — 동일 specificity (0,1,0)
   대결에서 cascade 순서로 margin-top 만 덮어쓸 수 있게. 헤딩 (.prose h2/h3/h4,
   specificity 0,1,1) 은 더 높은 specificity 로 자신의 큰 margin-top 을 유지. */
.prose > * + * {
    margin-top: var(--space-7);
}

/* v4.0.0 — Mobile prose 사이즈는 tokens.css 의 @media (max-width: 768px) 오버라이드로
 * --fs-body-m 이 자동으로 16px 로 커진다. .prose h2/h3 등도 토큰 매트릭스에 따라 축소됨.
 * 이 미디어 쿼리에서 추가 보정이 필요한 경우만 명시. 현재는 토큰만으로 충분. */


/* -----------------------------------------------------------------------------
 * 7) eeat — E-E-A-T 블록 (작성자/권위/배지)
 * -------------------------------------------------------------------------- */

.eeat {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin: var(--space-6) 0 var(--space-8);
}

.eeat__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* v4.0.0 — Caption/l (13) — 작성자·날짜 메타 */
    font-size: var(--fs-caption-l);
    line-height: var(--lh-caption-l);
    color: var(--color-text);
    flex-wrap: wrap;
}

.eeat__author {
    color: var(--color-text-strong);
    font-weight: var(--font-weight-semibold);
}

.eeat__author-sep {
    color: var(--color-text-soft);
}

.eeat__date {
    color: var(--color-text-muted);
}

.eeat__authority {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    /* v4.0.0 — Label/s (12 / bold) */
    font-size: var(--fs-label-s);
    font-weight: var(--fw-bold);
    line-height: var(--lh-label-s);
    color: var(--color-primary);
    background-color: var(--color-primary-soft);
    border-radius: var(--radius-pill);
}

.eeat__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.eeat__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    /* v4.0.0 — Label/s (12 / medium) */
    font-size: var(--fs-label-s);
    font-weight: var(--fw-medium);
    line-height: var(--lh-label-s);
    color: var(--color-text);
    background-color: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

/* 추후 이미지 교체 시 .eeat__badge--with-image 사용 */
.eeat__badge--with-image img {
    width: 16px;
    height: 16px;
    margin-right: var(--space-1);
}


/* -----------------------------------------------------------------------------
 * 8) cta-quote — 견적 신청 CTA 박스
 *    .cta-quote--inline : 글 본문 중간 (50% 지점), 작은 박스, 한 줄 카피 + 버튼 1개
 *    .cta-quote--final  : 글 하단, 큰 박스, 제목 + 설명 + 버튼 2개
 * -------------------------------------------------------------------------- */

.cta-quote {
    margin: var(--space-8) 0;
    padding: var(--space-6);
    background-color: var(--color-primary-soft);
    border: 1px solid var(--color-primary-soft);
    border-radius: var(--radius-lg);
    color: var(--color-text);
}

.cta-quote__title {
    margin: 0 0 var(--space-2);
    /* v4.0.0 — Head/m (22 / bold) — CTA 박스 제목 */
    font-size: var(--fs-head-m);
    font-weight: var(--fw-bold);
    line-height: var(--lh-head-m);
    letter-spacing: var(--ls-head-m);
    color: var(--color-text-strong);
}

.cta-quote__desc {
    margin: 0 0 var(--space-4);
    /* v4.0.0 — Body/s (14) */
    font-size: var(--fs-body-s);
    line-height: var(--lh-body-s);
    letter-spacing: var(--ls-body-s);
    color: var(--color-text-soft);
}

.cta-quote__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

/* inline 변형 — 컴팩트한 한 줄 박스 (모바일에서는 세로) */
.cta-quote--inline {
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
}

.cta-quote--inline .cta-quote__title {
    margin: 0;
    /* v4.0.0 — Body/l (16 / bold) — inline CTA 단일 라인 */
    font-size: var(--fs-body-l);
    line-height: var(--lh-body-l);
    flex: 1 1 240px;
    min-width: 0;
}

.cta-quote--inline .cta-quote__desc {
    display: none; /* inline 변형에서는 설명 숨김 */
}

.cta-quote--inline .cta-quote__actions {
    margin-left: auto;
}

/* final 변형 — 큰 박스 */
.cta-quote--final {
    margin: var(--space-12) 0 var(--space-8);
    padding: var(--space-8);
    text-align: center;
}

.cta-quote--final .cta-quote__title {
    /* v4.0.0 — Head/l (24 / bold) — final CTA 큰 박스 */
    font-size: var(--fs-head-l);
    line-height: var(--lh-head-l);
    letter-spacing: var(--ls-head-l);
    margin-bottom: var(--space-3);
}

.cta-quote--final .cta-quote__desc {
    margin-bottom: var(--space-6);
    /* v4.0.0 — Body/m (15) */
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
}

.cta-quote--final .cta-quote__actions {
    justify-content: center;
}

@media (max-width: 767.98px) {
    .cta-quote--final {
        padding: var(--space-6);
    }
    .cta-quote--final .cta-quote__title {
        /* v4.0.0 — Head/m (22) Mobile 시 한 단계 축소 */
        font-size: var(--fs-head-m);
    }
}


/* -----------------------------------------------------------------------------
 * 9) related-posts
 * -------------------------------------------------------------------------- */

.related-posts {
    margin: var(--space-12) 0 0;
    padding-top: var(--space-10);
    border-top: 1px solid var(--color-border);
}

.related-posts__title {
    margin: 0 0 var(--space-6);
    /* v4.0.0 — SubHead/m (17 / bold) */
    font-size: var(--fs-subhead-m);
    font-weight: var(--fw-bold);
    line-height: var(--lh-subhead-m);
    letter-spacing: var(--ls-subhead-m);
    color: var(--color-text-strong);
}


/* -----------------------------------------------------------------------------
 * 10) empty-state
 * -------------------------------------------------------------------------- */

.empty-state {
    padding: var(--space-16) var(--space-4);
    text-align: center;
    color: var(--color-text);
}

.empty-state__title {
    margin: 0 0 var(--space-3);
    /* v4.0.0 — Head/l (24 / bold) */
    font-size: var(--fs-head-l);
    font-weight: var(--fw-bold);
    line-height: var(--lh-head-l);
    letter-spacing: var(--ls-head-l);
    color: var(--color-text-strong);
}

.empty-state__desc {
    margin: 0 0 var(--space-6);
    /* v4.0.0 — Body/m (15) */
    font-size: var(--fs-body-m);
    line-height: var(--lh-body-m);
    color: var(--color-text-soft);
}

.empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

.empty-state__links {
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}

.empty-state__links a {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    /* v4.0.0 — Label/l (14 / medium) */
    font-size: var(--fs-label-l);
    font-weight: var(--fw-medium);
    line-height: var(--lh-label-l);
    color: var(--color-text);
    background-color: var(--color-bg-soft);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background-color var(--transition-fast) var(--ease-default);
}

.empty-state__links a:hover {
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
}


/* -----------------------------------------------------------------------------
 * 11) page-box — 페이지네이션 (v4.1.14 — 영구크린 본사 `.page-box` 정합)
 *
 * 본사 (mcygclean.com/board) 원본 스펙:
 *   .page-box       { display:flex; justify-content:center; align-items:center;
 *                     flex-wrap:wrap; gap:8px; margin-top:30px }
 *   .page-box a     { width:40px; height:40px; border-radius:8px;
 *                     font-size:15px; color:#35425C; line-height:150% }
 *   .page-prev/next { width:48px; height:48px; (본사: arrow PNG bg) }
 *   .page-on        { background-color:#D7EAFF (primary-100) }
 *   a.disabled      { opacity:.5 }
 *
 * 우리 구현 차이: PNG 화살표 → 인라인 SVG 슈브론 (`currentColor`). 색·크기 토큰 제어.
 * -------------------------------------------------------------------------- */

.page-box {
    /* v4.1.14 — 그리드 하단 → 페이지네이션 간격 (본사 30 → 우리 64 로 더 넉넉히). */
    margin-top: var(--space-16);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    text-align: center;
}

.page-box a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--color-gray-700);     /* 본사: #35425C */
    font-size: 15px;
    font-weight: var(--fw-medium);
    line-height: 1.5;                 /* 본사: 150% */
    letter-spacing: -0.3px;
    background-color: transparent;
    border: 0;
    border-radius: 8px;               /* 본사 spec */
    text-decoration: none;
    transition:
        background-color var(--transition-fast) var(--ease-default),
        color var(--transition-fast) var(--ease-default),
        opacity var(--transition-fast) var(--ease-default);
}

.page-box a:hover {
    background-color: var(--color-gray-100);
}

/* 화살표 prev/next — 48×48 (숫자 40×40 보다 한 단계 큼, 본사 spec) */
.page-box .page-prev,
.page-box .page-next {
    width: 48px;
    height: 48px;
    color: var(--color-gray-700);
}

.page-box .page-prev:hover,
.page-box .page-next:hover {
    color: var(--color-text-strong);
    background-color: var(--color-gray-100);
}

.page-box .page-prev svg,
.page-box .page-next svg {
    display: block;
}

/* 현재 페이지 */
.page-box .page-on {
    background-color: var(--color-primary-100);   /* 본사: #D7EAFF */
    color: var(--color-gray-700);
    cursor: default;
}

.page-box .page-on:hover {
    background-color: var(--color-primary-100);   /* 호버 시에도 그대로 */
}

/* 비활성 화살표 — 본사 spec: opacity .5 */
.page-box a.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* paginate_links() 의 dots(...) 매핑 */
.page-box .page-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-gray-500);
}


/* -----------------------------------------------------------------------------
 * (제거됨 v4.0.2) .cat-section* — 카테고리별 섹션 분할 패턴.
 * home.php 가 단일 그리드 + .grid-summary 헤딩으로 변경되어 더 이상 사용되지 않음.
 * -------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------
 * single-post — 글 상세 헤더 (single.php) 의 카테고리 라벨 + 제목.
 * v4.0.2 부터 카드 컴포넌트(.card__cat / .card__title) 와 분리됨.
 * -------------------------------------------------------------------------- */

.single-post__cat {
    display: inline-block;
    font-size: var(--fs-label-l);
    font-weight: var(--fw-medium);
    line-height: var(--lh-label-l);
    letter-spacing: var(--ls-label-l);
    color: var(--cat-color, var(--color-primary));
    text-decoration: none;
}

.single-post__cat:hover {
    text-decoration: underline;
    color: var(--cat-color, var(--color-primary));
}

.single-post__title {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-display-m);
    font-weight: var(--fw-bold);
    line-height: var(--lh-display-m);
    letter-spacing: var(--ls-display-m);
    color: var(--color-text-strong);
}


/* -----------------------------------------------------------------------------
 * scroll-top — 우측 하단 플로팅 버튼 (v3.1.1)
 *
 *    JS (main.js) 에서 scrollY > 300 일 때 hidden 속성 제거.
 *    [hidden] 디폴트 동작(display: none) 으로 노출 제어 — 추가 CSS 불필요.
 * -------------------------------------------------------------------------- */

.scroll-top {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-overlay);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-popover);
    cursor: pointer;
    transition:
        color var(--transition-fast) var(--ease-default),
        border-color var(--transition-fast) var(--ease-default),
        transform var(--transition-fast) var(--ease-default),
        box-shadow var(--transition-fast) var(--ease-default);
}

.scroll-top:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.scroll-top:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.scroll-top svg {
    display: block;
}

@media (max-width: 767.98px) {
    .scroll-top {
        bottom: var(--space-4);
        right: var(--space-4);
        width: 44px;
        height: 44px;
    }
}


/* -----------------------------------------------------------------------------
 * 12) side-menu — 우측 슬라이드 사이드 메뉴 (v4.1.0 / v4.1.1 / v4.1.2 / v4.1.3 보정)
 *
 *    햄버거(.header-cta__menu-toggle[data-side-menu-toggle-btn]) 클릭 시
 *    우측에서 슬라이드 인. 영구크린 본사 카테고리 트리를 항상 펼침 상태로 노출.
 *
 *    v4.1.3 보정:
 *      카드(.side-menu__group / --single) 에 `flex-shrink: 0` 명시.
 *      v4.1.2 의 body `min-height: 0` 으로도 스크롤이 안 되던 잔여 문제 해결.
 *      body 가 flex column 이라 자식 카드의 기본 flex-shrink: 1 이 카드를 압축,
 *      카드의 overflow: hidden(radius 클리핑용) 과 결합되어 내부 메뉴가 잘리고
 *      총 높이가 부모에 맞춰져 overflow-y: auto 트리거 자체가 안 됨.
 *      자식이 자연 높이를 유지하도록 flex-shrink: 0 으로 압축 차단.
 *
 *    v4.1.2 보정:
 *      (1) "카테고리" 헤딩 가운데 정렬 — flex justify-content: center,
 *          X 닫기 버튼은 position: absolute 로 우측 고정 (헤딩에 영향 없음).
 *      (2) 사이드바 배경 토큰 `--color-bg-alt`(#F6F7F8) → `--color-bg-side-menu`(#F5F7FA)
 *          — 영구꿀팁 본사 실측 톤. tokens.css 신규 토큰.
 *      (3) body 영역 세로 스크롤 픽스 — `min-height: 0` 추가. flexbox 자식이
 *          자체 콘텐츠보다 작아지지 못하던 기본 동작 때문에 overflow-y: auto 가
 *          무시되던 문제 해결.
 *
 *    v4.1.1 미세 보정 (영구꿀팁 정합):
 *      (A) 아코디언 패턴 제거 — 카드 헤더는 <a>, 본사 카테고리 메인 페이지 링크
 *      (B) 하위 메뉴 항상 노출 — max-height·overflow·transition 제거
 *      (C) 사이드바 배경 회색(bg-alt) + 카드 흰색 + 카드 보더 0
 *      (D) head/body 분리선은 .side-menu__group-body 의 border-top 으로
 *          — body 없는 그룹·single 그룹에서는 자연스럽게 미출력
 *
 *    마크업: template-parts/side-menu.php (footer.php 의 wp_footer() 직전 호출)
 *    JS    : assets/js/main.js — initSideMenu() (open/close/ESC/dim click 만)
 *
 *    레이어:
 *      .side-menu-overlay  z-index 1000  rgba(0,0,0,0.5) dim (정책 예외)
 *      .side-menu          z-index 1001  width 400px (모바일 100%)
 *
 *    [hidden] 속성은 JS 초기화 시 제거 — 애니메이션은 .is-open 클래스로 제어.
 * -------------------------------------------------------------------------- */

.side-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5); /* dim — 정책 예외 (시각 표준) */
    z-index: 1000;
    opacity: 0;
    transition: opacity var(--transition-base) var(--ease-default);
    pointer-events: none;
}

.side-menu-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* hidden 속성 무시 — JS 가 클래스로 노출 제어 */
.side-menu-overlay[hidden] {
    display: block;
}

.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 100%;
    height: 100vh;
    height: 100dvh; /* iOS Safari 100vh 버그 보정 */
    background: var(--color-bg-side-menu); /* v4.1.2 — #F5F7FA 본사 영구꿀팁 톤 */
    z-index: 1001;
    transform: translateX(100%);
    transition: transform var(--transition-base) var(--ease-default);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 사이드바 자체는 스크롤 없음 — body 만 스크롤 */
    box-shadow: -8px 0 32px rgba(54, 57, 74, 0.12);
}

.side-menu.is-open {
    transform: translateX(0);
}

.side-menu[hidden] {
    display: flex;
}

@media (max-width: 480px) {
    .side-menu {
        width: 100%;
    }
}

/* v4.1.2 — 헤딩 가운데 정렬, X 닫기 버튼은 absolute 로 우측 고정 */
.side-menu__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-7);
    background: var(--color-bg); /* 헤더 영역만 흰색 유지 */
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.side-menu__title {
    font-size: var(--fs-head-m);
    line-height: var(--lh-head-m);
    letter-spacing: var(--ls-head-m);
    font-weight: var(--fw-bold);
    color: var(--color-text-strong);
    margin: 0;
}

.side-menu__close {
    position: absolute;
    top: 50%;
    right: var(--space-7);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--color-text);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
}

.side-menu__close:hover {
    color: var(--color-text-strong);
    background: var(--color-bg-soft);
}

.side-menu__close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.side-menu__close svg {
    display: block;
}

/* v4.1.2 — flex column 자식의 overflow 정상화: min-height: 0 핵심.
   flex item 기본 min-height: auto 가 자체 콘텐츠보다 작아지지 못하게 막아
   overflow-y: auto 가 무시되던 문제 해결. */
.side-menu__body {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-side-menu); /* v4.1.2 — 사이드바와 동일 #F5F7FA */
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.side-menu__group {
    border: 0; /* v4.1.1 — 카드 보더 제거 (배경 대비로 분리) */
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg); /* 카드 흰색 */
    flex-shrink: 0; /* v4.1.3 — flex column 자식 압축 차단. 압축되면 overflow:hidden
                       으로 내부 메뉴가 잘리고, 총 높이가 부모에 맞춰져 스크롤
                       자체가 발동하지 않던 문제 해결. */
}

.side-menu__group--single {
    flex-shrink: 0; /* v4.1.3 — 동일 이유 (single 그룹도 body 의 flex 자식) */
}

.side-menu__group-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg);
    border: 0;
    text-align: left;
    text-decoration: none;
    color: inherit;
    font: inherit;
}

.side-menu__group-head:hover {
    background: var(--color-bg-soft);
}

.side-menu__group-head:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.side-menu__group--single {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    text-decoration: none;
    color: var(--color-text);
}

.side-menu__group--single:hover {
    background: var(--color-bg-soft);
}

.side-menu__group-icon {
    /* v4.2.5 — 이모지 폴백 → 본사 정식 SVG.
       원본이 20×20·18×18 혼재라 박스를 22px 로 고정하고 SVG 를 꽉 채워 통일. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.side-menu__group-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.side-menu__group-title {
    flex: 1;
    font-size: var(--fs-label-xxl);
    line-height: var(--lh-label-xxl);
    letter-spacing: var(--ls-label-xxl);
    font-weight: var(--fw-bold);
    color: var(--color-text);
}

.side-menu__group-arrow {
    color: var(--color-text-soft);
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

/* v4.1.1 — 항상 펼침. head/body 분리선은 body 의 border-top 으로 한정,
   body 가 없는 그룹·single 그룹에서는 자연스럽게 미출력. */
.side-menu__group-body {
    border-top: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-5);
}

.side-menu__items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-menu__items li {
    margin: 0;
}

.side-menu__items a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--fs-body-s);
    line-height: var(--lh-body-s);
    letter-spacing: var(--ls-body-s);
    color: var(--color-text-muted);
    text-decoration: none;
}

.side-menu__items a:hover {
    color: var(--color-primary);
}

.side-menu__items a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.side-menu__item-label {
    word-break: keep-all;
}

.side-menu__badge {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: var(--fw-medium);
    line-height: 1;
    letter-spacing: 0;
    flex-shrink: 0;
}

.side-menu__badge--soft {
    background: var(--color-primary-50);
    color: var(--color-primary);
}

.side-menu__badge--hot {
    background: #FFEFD7; /* 정책 예외 — 본사 HOT 배지 톤 일치 */
    color: #FF7224;
}

/* v4.2.4 — '사업장' 배지: 본사 그린 톤 (영구크린 원본 사이드 메뉴 정합) */
.side-menu__badge--biz {
    background: var(--color-cat-story-soft);
    color: var(--color-cat-story);
}

/* -----------------------------------------------------------------------------
 * 13) bottom-search / search-form — 영구크린 본사 `.board-srch` 패턴 정합 (v4.1.12)
 *
 * 본사 (mcygclean.com/board) 원본 스펙:
 *   .board-srch        { display:flex; justify-content:center; margin-top:40px; gap:8px }
 *   .board-srch input  { width:560px; min-height:44px; padding:8px 16px;
 *                        font-size:16px; line-height:150%; letter-spacing:-0.32px;
 *                        color:#353849; border:1px solid #C3C6CE; border-radius:4px }
 *   ::placeholder      { color:#AAAFBC; font-weight:400; opacity:1 }
 *   .btn.btn-md.btn-secondary { width:120px; height:44px; font-size:16px;
 *                        font-weight:500; border-radius:4px;
 *                        background:#AAAFBC(--secondary=gray-400); color:#fff }
 *
 * 우리 구현:
 *   - <section class="bottom-search"> 가 margin-top 만 담당
 *   - <form class="search-form"> 자체가 flex 컨테이너 (본사 .board-srch 와 일치)
 *   - search.php empty-state 의 get_search_form() 호출도 자동으로 동일 스타일 적용
 * -------------------------------------------------------------------------- */

.bottom-search {
    /* v4.1.13 — 페이지네이션 ↔ 검색 박스 간격 확대 (40 → 64).
       콘텐츠 → 페이지네이션(64) + 페이지네이션 → 검색(64) 으로 시각 분리. */
    margin-top: var(--space-16);
}

.search-form {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.search-form__input {
    flex: 0 1 560px;   /* 본사: 560px. 좁은 컨테이너에서 자동 축소. */
    min-width: 0;
    min-height: 44px;
    padding: 8px 16px;
    color: var(--color-gray-800);             /* 본사: #353849 */
    font-family: inherit;                     /* Pretendard */
    font-size: 16px;
    font-weight: var(--fw-regular);
    line-height: 1.5;                         /* 본사: 150% */
    letter-spacing: -0.32px;
    background: var(--white);
    border: 1px solid var(--color-gray-300);  /* 본사: #C3C6CE */
    border-radius: 4px;
    transition: border-color var(--transition-fast) var(--ease-default);
}

.search-form__input::placeholder {
    color: var(--color-gray-400);             /* 본사: #AAAFBC */
    font-weight: var(--fw-regular);
    opacity: 1;
}

.search-form__input:hover {
    border-color: var(--color-gray-400);
}

.search-form__input:focus,
.search-form__input:focus-visible {
    outline: none;
    border-color: var(--color-primary);
}

.search-form__submit {
    flex-shrink: 0;
    width: 120px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--white);
    background: var(--color-gray-400);        /* 본사 --color-secondary = gray-400 */
    border: 1px solid var(--color-gray-400);
    border-radius: 4px;
    font-family: inherit;
    font-size: 16px;
    font-weight: var(--fw-medium);            /* 본사 .btn font-weight: 500 */
    line-height: 1.5;
    cursor: pointer;
    transition:
        background-color 0.3s,
        border-color 0.3s,
        color 0.3s;
}

.search-form__submit:hover {
    background: var(--color-gray-500);
    border-color: var(--color-gray-500);
}

.search-form__submit:active {
    background: var(--color-gray-500);
    border-color: var(--color-gray-500);
}

.search-form__submit:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .bottom-search {
        margin-top: var(--space-12);   /* 모바일 — 데스크톱 64 → 48 로 축소 */
        padding: 0 var(--container-pad);
    }
}

/* -----------------------------------------------------------------------------
 * 14) contact-box — 콘텐츠 하단 상담 안내 박스 (v4.1.16)
 *
 * 영구크린 본사 read.jsp 하단 박스 패턴 정합:
 *   width:max-content; border-radius:16px; background:#F6F7F8; padding:18px 20px;
 *   phone: clamp(20px, 2.5vw, 22px) / bold / #353849
 *   hours: clamp(13px, 2.5vw, 16px) / regular
 *
 * single.php 의 본문(prose) ↔ 관련글 사이에 항상 출력.
 * -------------------------------------------------------------------------- */

.contact-box {
    width: max-content;                       /* 본사 spec — 콘텐츠 폭에 맞춰 자동 */
    max-width: 100%;
    margin: var(--space-12) 0 0;              /* v4.1.17 — 좌측 정렬 (이전: auto 중앙) */
    padding: 18px 20px;                       /* 본사 spec */
    background: var(--color-gray-50);         /* 본사: #F6F7F8 */
    border: 0;
    border-radius: 16px;                      /* 본사 spec */
    overflow: hidden;
}

.contact-box__phone {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(20px, 2.5vw, 22px);      /* 본사 clamp 정합 */
    font-weight: var(--fw-bold);              /* 본사: bold */
    line-height: 1.6;                         /* 본사 spec */
    color: var(--color-gray-800);             /* 본사: #353849 */
}

.contact-box__phone a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast) var(--ease-default);
}

.contact-box__phone a:hover {
    color: var(--color-primary);
}

.contact-box__icon {
    /* v4.1.17 — SVG 아이콘 → OS 네이티브 컬러 이모지(☎️). 사이즈는 font-size 로 제어. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;                          /* 본사 이모지 25px 근사 (이모지 메트릭 보정) */
    line-height: 1;
    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif;                           /* 컬러 이모지 폰트 우선 — 모노톤 폴백 방지 */
    font-style: normal;
}

.contact-box__hours {
    margin: 0;
    font-size: clamp(13px, 2.5vw, 16px);      /* 본사 clamp 정합 */
    font-weight: var(--fw-regular);
    line-height: 1.6;                         /* 본사 spec */
    color: var(--color-gray-800);
}

@media (max-width: 480px) {
    .contact-box {
        width: 100%;                          /* 모바일 — 풀 폭으로 가독성 확보 */
    }
}