@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   BLOG — /blog 전용
   수정안 2026-09-14 슬라이드 15 · 담당 C
   순서: 헤더 → 카테고리 칩 → 풀폭 이미지 밴드 → 중앙 정렬 카피 → 글 목록
   site.css 토큰·공통 컴포넌트만 사용한다. 새 색·새 서체 도입 없음.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. 카테고리 칩 스트립 — 메인 메뉴 바 바로 아래 ─────────── */
.blogbar{
  position:relative;z-index:2;margin-top:var(--nav-h);
  padding-block:clamp(16px,2.2vw,26px);
}
.blogbar .pills{margin-top:0}

/* ── 2. 풀폭 이미지 밴드 ───────────────────────────────────────
   기본 = 저채도 그라디언트 + 소프트 블롭 + 심볼 워터마크.
   클라 사진이 오면 .bloghero__img 슬롯이 그 위를 덮는다. */
.blogband{
  position:relative;overflow:hidden;
  height:clamp(220px,32vw,420px);
  background:linear-gradient(112deg,
    color-mix(in srgb,var(--sky-400) 17%,#fff) 0%,
    color-mix(in srgb,var(--indigo-600) 9%,#fff) 46%,
    color-mix(in srgb,var(--blossom-400) 19%,#fff) 100%);
  border-block:1px solid var(--line);
}
@supports not (background:color-mix(in srgb,#000 10%,#fff)){
  .blogband{background:linear-gradient(112deg,#EDF2FA 0%,#F1F0F9 46%,#F8EFF7 100%)}
}
.blogband__art{position:absolute;inset:0;z-index:0;overflow:hidden}
.blogband .blobs i{opacity:.52;filter:blur(58px)}
.blogband .gridbg{opacity:.85}
/* 심볼 워터마크 — 밴드 안에서만 쓰는 위치·크기(밴드 높이를 넘지 않게) */
.blogband__sym{
  right:5%;top:50%;left:auto;bottom:auto;
  width:clamp(140px,19vw,250px);opacity:.10;
  transform:translateY(-50%) translateY(calc((.5 - var(--p,0)) * 34px))
            rotate(calc(-7deg + var(--p,0) * 14deg));
}
/* 클라 제공 사진 슬롯 — 비율 왜곡 없이 밴드를 채운다 */
.bloghero__img{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;object-position:center 58%;
}
/* 사진 위 얇은 화이트 베일 — 흰 캔버스와 이어지고 심볼 워터마크가 비친다 */
.blogband::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 35%,rgba(255,255,255,.42) 100%)}
.blogband__sym{z-index:3}

/* ── 3. 중앙 정렬 카피 ───────────────────────────────────────── */
.blogintro{
  position:relative;text-align:center;
  padding-top:clamp(32px,4.4vw,58px);
  padding-bottom:clamp(28px,3.8vw,50px);
}
.blogintro .eyebrow{font-size:.72rem;letter-spacing:.17em}
.blogintro .eyebrow::before{width:14px;height:17px}
.blogintro__t{
  white-space:pre-line;
  font-size:clamp(1.42rem,3.4vw,2.6rem);font-weight:800;
  line-height:1.32;letter-spacing:-.032em;
  max-width:min(1000px,100%);margin-inline:auto;
}
html[lang="en"] .blogintro__t{font-size:clamp(1.34rem,3vw,2.3rem)}

/* ── 4. 글 목록 ───────────────────────────────────────────────── */
.bloglist{padding-top:clamp(36px,4.6vw,60px)}
.bloglist__hd{display:flex;align-items:baseline;gap:8px 14px;flex-wrap:wrap}
.bloglist__desc{max-width:70ch}
.bloglist__empty{
  display:grid;gap:6px;justify-items:start;
  padding:clamp(24px,3vw,34px) clamp(22px,3vw,32px);
  border:1px dashed var(--line-2);border-radius:var(--r-lg);background:#fff;
}

/* ── 5. 카테고리 구조 ─────────────────────────────────────────── */
.blogcats{overflow:hidden}
.blogcats__closing{color:var(--indigo-800)}

/* ── 반응형 ───────────────────────────────────────────────────── */
@media (max-width:720px){
  /* 밴드 높이는 브리프 지정값(clamp(220px,32vw,420px)) 유지 — 워터마크 비율만 조정 */
  .blogband__sym{width:clamp(120px,32vw,170px);opacity:.09}
}