/* =========================================================================
   Articles archive (.cubig-articles) — editorial index.
   Entity = the unifying color system (4 fixed slugs). Illustration = per
   article (the post thumbnail). Color is set once via --ent per [data-entity]
   and reused by the art tint, badge, and accent. So a card reads as its
   entity even before an illustration is uploaded (tinted placeholder block).
   ========================================================================= */

.cubig-articles {
    --ent: var(--c-accent-violet);              /* fallback */
    --art-radius: var(--r-xl);
    padding: clamp(72px, 9vw, 120px) 0 96px;    /* 블로그 아카이브와 동일 여백 */
    background: var(--c-bg-white);
    position: relative;
    /* overflow:hidden 제거 — 자식 사이드바 position:sticky 가 깨지지 않게.
       워시는 아래 width:min()으로 가로 오버플로 차단(세로는 헤더/문서 상단 밖이라 무해). */
}
/* 헤더 뒤 시그니처 워시 — 블로그 아카이브와 동일 (홈 hero 그라디언트 저채도) */
.cubig-articles::before {
    content: ""; position: absolute; top: -260px; left: 50%;
    transform: translateX(-50%);
    width: min(1100px, 100%); height: 620px;
    background:
        radial-gradient(circle at 30% 30%, rgba(138, 119, 224, 0.16), transparent 60%),
        radial-gradient(circle at 70% 40%, rgba(136, 146, 250, 0.12), transparent 60%),
        radial-gradient(circle at 50% 80%, rgba(255, 175, 200, 0.07), transparent 55%);
    filter: blur(80px);
    pointer-events: none;
}
.cubig-articles .container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-inline: var(--container-px);
    position: relative;
    z-index: 1;
}

/* ── 진입 애니메이션 (페이지 로드 시 위 영역부터 스태거 페이드업) ──────────── */
@keyframes artEnter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.art-hd      { animation: artEnter .55s cubic-bezier(.22,.61,.36,1) both; }
.art-hero    { animation: artEnter .55s cubic-bezier(.22,.61,.36,1) .06s both; }
.art-toolbar { animation: artEnter .55s cubic-bezier(.22,.61,.36,1) .12s both; }
.art-layout  { animation: artEnter .55s cubic-bezier(.22,.61,.36,1) .18s both; }
/* ── 필터 전환(엔티티/클러스터) 시 콘텐츠 페이드 ─────────────────────────── */
@keyframes artSwap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.art-content.is-swapping { animation: artSwap .34s ease; }
@media (prefers-reduced-motion: reduce) {
    .art-hd, .art-hero, .art-toolbar, .art-layout { animation: none; }
    .art-content.is-swapping { animation: none; }
}

/* Entity color contract — slug → --ent. (matches article_entity terms) */
/* 제품 브랜드색 매핑: AI-ready data=보라(CUBIG) / Sensitive workflow=초록(Capsule)
   / AI-ready transformation=주황(DTS) / Decision=파랑(Syntitan) */
.cubig-articles [data-entity="ai-ready-data"]           { --ent: #8A77E0; }
.cubig-articles [data-entity="sensitive-workflow"]      { --ent: #12A150; }
.cubig-articles [data-entity="ai-ready-transformation"] { --ent: #D9730D; }
.cubig-articles [data-entity="decision"]                { --ent: #175DFF; }

/* ── Header (블로그 아카이브와 동일 — 제목만, 미니멀) ──────────────────── */
.art-hd { max-width: 760px; margin: 0 0 clamp(36px, 4vw, 52px); }
.art-hd__name {
    /* !important beats ibm-overrides' global h1/h2/h3 tag rules (font-size/ls) */
    font-size: clamp(36px, 4.5vw, 56px) !important;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.02em !important;
    color: var(--c-text-heading);
    margin: 0;
}

/* ── Category label (entity) — 알약/점 없이 컬러 텍스트만 (블로그 카테고리 라벨 톤) ── */
.art-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    color: var(--ent);
}

/* ── Featured ───────────────────────────────────────────────────────── */
.art-featured {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--fgap, clamp(24px, 4vw, 48px));
    align-items: stretch;
    margin-bottom: clamp(40px, 6vw, 72px);
    text-decoration: none;
    color: inherit;
}
.art-featured__art {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: var(--art-radius);
    overflow: hidden;
    background: color-mix(in srgb, var(--ent) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--ent) 22%, transparent);
}
.art-featured__art img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.art-featured__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    /* 하단에 좌우버튼 공간 확보 → 중앙 정렬이 버튼 고려해 위로 균형 */
    padding: clamp(44px, 5vw, 60px) 0;
}
.art-featured__name {
    font-size: var(--fs-h2) !important;
    line-height: 1.18;
    letter-spacing: -.015em !important;
    color: var(--c-text-heading);
    margin: 4px 0 0;
}
.art-featured__excerpt {
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    color: var(--c-text-body);
    margin: 0;
}
.art-featured:hover .art-featured__name { color: var(--ent) !important; }

/* ── Toolbar: 필터(좌) + 검색·공개글만·정렬(우) — 블로그 툴바와 동일 골격 ── */
.art-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    margin-bottom: clamp(24px, 3.5vw, 36px);
}
.art-toolbar__right { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 검색 (블로그 .blog-search 미러) */
.art-search {
    display: inline-flex; align-items: center; gap: 9px; width: 220px;
    height: 38px; box-sizing: border-box; padding: 0 15px; background: #fff;
    border: 1px solid var(--c-border-light); border-radius: 999px;
    transition: border-color .15s ease;
}
.art-search:focus-within { border-color: rgba(28, 28, 28, .28); }
.art-search__ico { color: var(--c-text-subtle); flex: 0 0 auto; }
/* ibm-overrides 전역 input[type=search] 룰(!important, 특이도 0,1,1)을 이기려면
   2-클래스 셀렉터(0,2,0)로 안쪽 인풋을 완전 리셋 — 박스는 .art-search(바깥) 하나만. */
.art-search .art-search__input {
    border: 0 !important; background: transparent !important;
    border-radius: 0 !important; padding: 0 !important; box-shadow: none !important;
    outline: none; width: 100%;
    font-size: 14px; color: var(--c-text-dark);
}
/* 검색어 지우기(X) 버튼 — 브라우저 기본 파란 X를 회색 커스텀으로 교체 */
.art-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none; appearance: none;
    width: 13px; height: 13px; cursor: pointer;
    background-color: var(--c-text-subtle);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 4l8 8M12 4l-8 8" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 4l8 8M12 4l-8 8" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>') center / contain no-repeat;
}
.art-search__input::-webkit-search-cancel-button:hover { background-color: var(--c-text-dark); }
/* 공개글만 토글 */
.art-pubonly {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center;
    height: 38px; box-sizing: border-box;
    font: inherit; font-size: 13px; font-weight: 500; line-height: 1;
    padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--c-border-light); background: #fff;
    color: var(--c-text-subtle);
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.art-pubonly:hover { color: var(--c-text-dark); border-color: rgba(28, 28, 28, .28); }
.art-pubonly.is-on {
    background: var(--c-bg-dark, #1c1c1c); border-color: var(--c-bg-dark, #1c1c1c);
    color: #fff;
}
/* 날짜 정렬 (블로그 .blog-sort 미러) */
.art-sort {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 auto;
    background: #fff; border: 1px solid var(--c-border-light);
    border-radius: 999px; padding: 0;
    color: var(--c-text-subtle);
    transition: color .15s ease, border-color .15s ease;
}
.art-sort:hover { color: var(--c-text-dark); border-color: rgba(28, 28, 28, .28); }
.art-sort svg { transition: transform .2s ease; }
.art-sort[data-dir="asc"] svg { transform: rotate(180deg); }

/* ── Filter chips (소프트 컬러 박스 — 활성 시 엔티티 색 채워진 박스 + 컬러 텍스트) ── */
.art-filter {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 2vw, 28px);
}
/* 엔티티 탭 — 활성 = 엔티티 컬러 텍스트 + 밑줄(언더라인 탭) */
.art-chip {
    --ent: var(--c-accent-violet, #8A77E0);
    appearance: none; border: 0; cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    font: inherit;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1;
    padding: 6px 1px;
    background: transparent;
    color: var(--c-text-subtle);
    transition: color .15s ease;
}
.art-chip[data-entity="ai-ready-data"]           { --ent: #8A77E0; }
.art-chip[data-entity="sensitive-workflow"]      { --ent: #12A150; }
.art-chip[data-entity="ai-ready-transformation"] { --ent: #D9730D; }
.art-chip[data-entity="decision"]                { --ent: #175DFF; }
.art-chip:hover { color: var(--c-text-dark); }
.art-chip.is-active { color: var(--ent); font-weight: 600; }
.art-chip.is-active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -7px;
    height: 2px; border-radius: 2px; background: var(--ent);
}

/* ── Sub-cluster sub-filter (엔티티 선택 시 노출) ───────────────────────── */
.art-subfilter { display: block; margin: -6px 0 clamp(24px, 3vw, 32px); }
.art-subfilter[hidden] { display: none; }
.art-subfilter__set { display: flex; flex-wrap: wrap; gap: 8px; }
.art-subfilter__set[hidden] { display: none; }
.art-subchip {
    --ent: var(--c-text-muted);
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1;
    padding: 7px 12px; border-radius: 999px;
    border: 1px solid var(--c-border-light); background: #fff;
    color: var(--c-text-subtle);
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.art-subchip:hover { color: var(--ent); border-color: color-mix(in srgb, var(--ent) 40%, transparent); }
.art-subchip.is-active {
    background: color-mix(in srgb, var(--ent) 13%, transparent);
    border-color: transparent; color: var(--ent);
}
.art-subchip__n { font-size: 11px; font-weight: 600; opacity: .72; }

/* ── Entity sections (한 엔티티만 노출) ─────────────────────────────────── */
.art-content { display: block; min-width: 0; }
.art-entity-sec.is-hidden, .art-cluster.is-hidden { display: none; }
.art-cluster + .art-cluster {
    margin-top: clamp(40px, 5vw, 60px);
    padding-top: clamp(40px, 5vw, 60px);
    border-top: 1px solid var(--c-border-light);
}
/* 필터로 앞 클러스터가 숨으면 첫 노출 클러스터의 상단 헤어라인 제거 */
.art-content .art-cluster.is-first-vis { margin-top: 0; padding-top: 0; border-top: 0; }
/* 특정 서브클러스터만 볼 땐 섹션 헤딩 중복 → 숨김 */
.art-content.is-single-cluster .art-cluster__hd { display: none; }
.art-cluster__hd {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: clamp(14px, 1.3vw, 15px) !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase;
    color: var(--ent) !important; line-height: 1.2 !important; margin: 0 0 18px !important;
}
.art-cluster__n {
    font-size: 11px; font-weight: 600; line-height: 1;
    color: var(--ent); background: color-mix(in srgb, var(--ent) 12%, transparent);
    border-radius: 999px; padding: 3px 8px;
}

/* ── 썸네일 자동 엔티티 컬러 틴트 (이미지 있을 때만) ─────────────────────── */
.art-card__art:has(img)::after,
.art-featured__art:has(img)::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: var(--ent); mix-blend-mode: multiply; opacity: .2;
    transition: opacity .18s ease;
}
.art-card:hover .art-card__art:has(img)::after { opacity: .12; }
/* 기본 썸네일 — SVG를 마스크로 써서 심볼만 엔티티 색으로 (배경은 연한 틴트 유지) */
/* 기본 썸네일 배경 = 예쁜 라디얼 그레디언트 (실제 이미지 없을 때) */
.art-card__art:has(.art-default-thumb),
.art-featured__art:has(.art-default-thumb) {
    background:
        radial-gradient(120% 120% at 80% 10%, color-mix(in srgb, var(--ent) 16%, transparent), transparent 60%),
        color-mix(in srgb, var(--ent) 7%, #fff);
}
.art-default-thumb {
    position: absolute; inset: 0;
    background-color: var(--ent);
    opacity: .5; /* 심볼 너무 진하지 않게 연하게 */
    -webkit-mask: url('../images/article/article-default.svg') center / contain no-repeat;
            mask: url('../images/article/article-default.svg') center / contain no-repeat;
}

/* ── Hero slider (최신 N, 하나씩) ──────────────────────────────────────── */
.art-hero { position: relative; margin-bottom: clamp(48px, 6vw, 80px); --fgap: clamp(24px, 4vw, 48px); overflow: hidden; }
/* transform 기반 슬라이드 — 부드러운 easing 전환 */
.art-hero__track {
    display: flex;
    transition: transform .62s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}
.art-hero__slide { flex: 0 0 100%; width: 100%; }
@media (prefers-reduced-motion: reduce) { .art-hero__track { transition: none; } }
/* 슬라이드 안 featured는 자체 하단 여백 제거(히어로가 여백 담당) → nav가 본문 날짜 밑에 앉음 */
.art-hero__slide .art-featured { margin-bottom: 0; }
/* 좌우 버튼 = 본문(오른쪽 컬럼) 왼쪽 끝에 정렬 (그리드 1.15:1 → 본문 시작 위치 계산) */
.art-hero__nav {
    position: absolute;
    left: calc((100% - var(--fgap)) * 0.535 + var(--fgap));
    bottom: clamp(10px, 2vw, 26px);
    display: flex; gap: 8px;
}
/* 공용 좌우 버튼 */
.art-navbtn {
    appearance: none; cursor: pointer;
    width: 38px; height: 38px; border-radius: 999px;
    border: 1px solid var(--c-border-light); background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--c-text-subtle);
    transition: color .15s ease, border-color .15s ease;
}
.art-navbtn:hover { color: var(--c-text-dark); border-color: rgba(28, 28, 28, .28); }

/* ── Layout: 사이드바(sub-cluster) + 콘텐츠 ────────────────────────────── */
.art-layout {
    display: grid;
    grid-template-columns: 224px 1fr;
    gap: clamp(28px, 3vw, 52px);
    align-items: start;
    transition: grid-template-columns .42s cubic-bezier(.4, 0, .2, 1), gap .42s cubic-bezier(.4, 0, .2, 1);
}
.art-sidebar { position: sticky; top: 92px; align-self: start; overflow: hidden; transition: opacity .28s ease; }
/* 검색 모드: 사이드바 컬럼을 0으로 부드럽게 collapse → 콘텐츠 풀폭 */
.art-layout.is-searching { grid-template-columns: 0 1fr; gap: 0; }
.art-layout.is-searching .art-sidebar { opacity: 0; pointer-events: none; }
.art-chip[data-entity="all"] { --ent: #4d4d4d; } /* 검색용 '전체' 탭 = 무채색 밑줄 */
.art-chip[hidden] { display: none; } /* display:inline-flex가 [hidden] 기본을 덮는 것 방지 */
/* '전체' 탭 등장 애니메이션 (검색창 포커스 시 부드럽게) */
.art-chip--all.is-in { animation: artAllIn .28s ease both; }
@keyframes artAllIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .art-chip--all.is-in { animation: none; } }
.art-sidebar__set { display: flex; flex-direction: column; gap: 2px; }
.art-sidebar__set[hidden] { display: none; }
.art-side-item {
    --ent: var(--c-text-muted);
    appearance: none; cursor: pointer; width: 100%; text-align: left;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.3;
    padding: 9px 12px; border-radius: 8px; border: 0; background: transparent;
    color: var(--c-text-subtle);
    transition: color .15s ease, background .15s ease;
}
.art-side-item:hover { background: color-mix(in srgb, var(--ent) 8%, transparent); color: var(--c-text-dark); }
.art-side-item.is-active { background: color-mix(in srgb, var(--ent) 13%, transparent); color: var(--ent); font-weight: 600; }
.art-side-item__n { font-size: 11px; font-weight: 600; opacity: .65; flex: 0 0 auto; }
/* 콘텐츠 영역 그리드는 사이드바만큼 좁으니 자동 채움 */
.art-content .art-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }

@media (max-width: 860px) {
    .art-layout { grid-template-columns: 1fr; gap: 20px; }
    .art-layout.is-searching { grid-template-columns: 1fr; gap: 20px; }
    .art-layout.is-searching .art-sidebar { display: none; }
    .art-sidebar { position: static; }
    .art-sidebar__set { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; scrollbar-width: none; padding-bottom: 4px; }
    .art-sidebar__set::-webkit-scrollbar { display: none; }
    .art-side-item { flex: 0 0 auto; width: auto; border: 1px solid var(--c-border-light); border-radius: 8px; padding: 8px 13px; }
    .art-side-item.is-active { border-color: transparent; }
}

/* ── Grid ───────────────────────────────────────────────────────────── */
.art-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.5vw, 32px) clamp(20px, 2vw, 28px);
}
.art-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform .18s ease;
}
.art-card.is-hidden { display: none; }
.art-card__art {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--art-radius);
    overflow: hidden;
    background: color-mix(in srgb, var(--ent) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--ent) 20%, transparent);
    margin-bottom: 16px;
    transition: border-color .18s ease;
}
.art-card__art img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.art-card:hover { transform: translateY(-3px); }
.art-card:hover .art-card__art { border-color: color-mix(in srgb, var(--ent) 42%, transparent); }
.art-card:hover .art-card__art img { transform: scale(1.03); }

/* ── Coming soon ────────────────────────────────────────────────────── */
/* 썸네일 위 'Coming soon' 라벨 (카드·featured 공용) */
.art-soon {
    position: absolute;
    left: 12px; top: 12px;
    z-index: 2;
    display: inline-flex; align-items: center;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    background: var(--ent);
    color: var(--c-text-white);
    font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
    line-height: 1;
}
/* 비활성: 호버 리프트·확대 제거, 커서 기본, 썸네일 살짝 디밍 */
.art-card.is-coming-soon, .art-featured.is-coming-soon { cursor: default; }
.art-card.is-coming-soon:hover { transform: none; }
.art-card.is-coming-soon:hover .art-card__art { border-color: var(--c-border-light); }
.art-card.is-coming-soon:hover .art-card__art img,
.art-featured.is-coming-soon .art-featured__art img { transform: none; }
.art-card.is-coming-soon:hover .art-card__name a { color: var(--c-text-heading); }
/* 공개예정 = 흑백 필터 + 살짝 디밍 */
.art-card.is-coming-soon .art-card__art img,
.art-card.is-coming-soon .art-ph,
.art-featured.is-coming-soon .art-featured__art img,
.art-featured.is-coming-soon .art-ph { opacity: .7; filter: grayscale(1); }
/* 흑백 유지 — 엔티티 컬러 틴트 오버레이는 공개예정에서 끔 */
.art-card.is-coming-soon .art-card__art::after,
.art-featured.is-coming-soon .art-featured__art::after { display: none; }
.art-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.art-card__name {
    font-size: var(--fs-h4) !important;
    line-height: 1.3;
    letter-spacing: -.01em !important;
    margin: 2px 0 0;
}
.art-card__name a {
    color: var(--c-text-heading);
    text-decoration: none;
}
.art-card:hover .art-card__name a { color: var(--ent); }
.art-card__excerpt {
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--c-text-muted);
    margin: 0;
}

/* Illustration placeholder (no thumbnail yet) — soft entity-tinted block */
.art-ph {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 120% at 80% 10%, color-mix(in srgb, var(--ent) 16%, transparent), transparent 60%),
        color-mix(in srgb, var(--ent) 7%, #fff);
}

/* ── Meta ───────────────────────────────────────────────────────────── */
.art-meta {
    font-size: var(--fs-small);
    color: var(--c-text-subtle);
}
.art-meta__dot { margin: 0 6px; }
.art-meta__author { color: inherit; }

/* ── Empty / blank states ───────────────────────────────────────────── */
.art-empty {
    grid-column: 1 / -1;
    padding: 32px 0;
    color: var(--c-text-muted);
    text-align: center;
}
.art-blank {
    max-width: 540px;
    padding: clamp(40px, 6vw, 72px) 0;
}
.art-blank__msg {
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    color: var(--c-text-body);
    margin: 0 0 24px;
}
.art-blank__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .art-grid { grid-template-columns: repeat(2, 1fr); }
    .art-featured { grid-template-columns: 1fr; }
    .art-featured__art { aspect-ratio: 16 / 9; }
    .art-featured__body { padding: 0; }
    .art-featured__name { font-size: var(--fs-h3) !important; }
    .art-hero { margin-bottom: clamp(38px, 6vw, 48px); } /* 모바일 아래 여백 (히어로↔검색 구분) */
    /* 모바일: 좌우버튼 제거 + 자동회전 끔(JS) → 손가락 스와이프(네이티브 스크롤스냅) */
    .art-hero__nav { display: none; }
    .art-hero__track {
        transform: none !important; display: flex;
        overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; transition: none;
    }
    .art-hero__track::-webkit-scrollbar { display: none; }
    .art-hero__slide { flex: 0 0 100%; opacity: 1; scroll-snap-align: start; }
    /* excerpt 3줄 클램프(슬라이드 높이 균일) */
    .art-featured__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 560px) {
    .art-grid { grid-template-columns: 1fr; }
    /* 검색 세트(검색·공개글만·정렬)를 엔티티 필터 위로 + 한 줄 유지 */
    .art-toolbar { flex-direction: column-reverse; align-items: stretch; gap: 24px; }
    .art-toolbar__right { width: 100%; flex-wrap: nowrap; gap: 8px; }
    .art-search { flex: 1 1 0; min-width: 0; width: auto; } /* 남은 폭만 차지 → 한 줄 */
    /* 엔티티 필터 가로스크롤 + 활성 밑줄(::after bottom:-7px) 잘림 방지 */
    .art-filter { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 9px; }
    .art-filter::-webkit-scrollbar { display: none; }
    .art-chip { flex: 0 0 auto; }
}