/* ==========================================================================
   Coffee Me Up — Cafe24 스토어프론트 프로토타입
   style.css = 디자인 값의 정본(SOT). DESIGN.md는 그 위의 가이드 — 어긋나면 이 파일이 이긴다.

   토큰 접두어 = --cmu-  (사이트 고유. boilerplate 공유 토큰 없음 — CLAUDE.md §인프라 원칙)

   ⚠ build 승격 시: 이 파일이 Cafe24 스킨의 css/style.css가 된다.
     클래스명은 그대로 살고, 마크업만 스마트디자인 모듈로 치환된다(cafe24-playbook §3-3).
   ========================================================================== */

/* ── 1. 토큰 ─────────────────────────────────────────────────────────────── */
:root {
  /* 브랜드 */
  --cmu-brand:        #1B553C;   /* 딥 그린 — 레일·CTA·인터랙션 */
  --cmu-brand-hover:  #16452F;
  /* 브랜드 그린의 약한 짝 — 크림 위 85% 혼합. 활성 항목의 보조 텍스트(한글 태그라인)용.
     기본 상태의 body:muted 위계를 그린 안에서 그대로 재현한다(대비 8.39:1 → 5.69:1,
     구 muted 5.16:1과 같은 층). 크림 배경 전제의 평면값이라 흰 배경에서는 재검토 대상. */
  --cmu-brand-soft:   #3D6E54;
  --cmu-secondary:    #FFFCDF;   /* 크림 — 레일 배경 */

  /* 표면 */
  --cmu-surface:      #FFFFFF;   /* 정보 컬럼 · 상품 이미지 무대의 바탕 */
  /* 페이지 본문 배경. 기본은 흰색이고 홈만 크림으로 덮어쓴다.
     푸터 pin 규칙(body.has-pinned-foot main)이 배경을 강제하므로, 그 값을 토큰으로 받아
     페이지가 자기 배경을 정할 수 있게 한다 — 안 그러면 홈이 흰색으로 덮인다. */
  --cmu-page-bg:      var(--cmu-surface);

  /* 상품 이미지 무대 — 흰 바탕 + 우하단 대각 워시.
     `to bottom right`는 박스 비율과 무관하게 두 꼭지점을 끝점으로 잡는다(135deg는 정사각형에서만 맞다).

     ⚠ --cmu-stage-hold 가 핵심이다. 홀드 없이 0%→끝값을 코너-투-코너로 깔면
     램프의 50% 지점이 정확히 박스 정중앙에 떨어진다 — 제품이 놓이는 자리다.
     끝값 12%면 정중앙이 6%(#F0F0F0)가 되어 "제품 주변이 균일한 회색"으로 읽힌다
     (구 평면색 #F4F4F2=4.3%보다 오히려 어둡다). 그래서 홀드 지점까지 순백을 유지하고
     램프를 우하단 코너 쪽으로 몰아준다. */
  --cmu-stage-from:   rgba(0, 0, 0, 0);
  --cmu-stage-to:     rgba(0, 0, 0, 0.05);   /* 우하단 꼭지점 — 지정값 */
  --cmu-stage-hold:   82%;                   /* 여기까지 순백. 램프 중심 = (82+100)/2 = 91% */
  /* 홀드에서 끝값으로 직선으로 꺾으면 그 지점에 마하 밴드(가느다란 경계선)가 보일 수 있다.
     선형값보다 낮은 중간 스톱을 하나 끼워 진입을 완만하게 굽힌다.
     ease 지점은 램프 구간의 약 57% 자리에 둔다 — 홀드를 옮기면 같이 옮긴다. */
  --cmu-stage-ease:   92%;
  --cmu-stage-ease-a: rgba(0, 0, 0, 0.018);
  --cmu-stage-grad:   linear-gradient(to bottom right,
                        var(--cmu-stage-from) 0%,
                        var(--cmu-stage-from) var(--cmu-stage-hold),
                        var(--cmu-stage-ease-a) var(--cmu-stage-ease),
                        var(--cmu-stage-to) 100%);

  /* 넓은 변형 — 홈 float 카드 전용. 배경 판이 없어 워시가 카드 경계를 혼자 진다.
     위 기본형은 코너 18% 구간에만 음영이 있어 "떠 있는 제품"에는 경계가 너무 짧다.
     홀드를 40%로 내려 램프를 60% 구간에 펼치고 끝값을 0.07로 올렸다.

     ⚠ 별도 토큰을 세운 이유: --cmu-stage-hold 같은 구성 토큰을 자손에서 덮어써도
     --cmu-stage-grad 는 바뀌지 않는다. 커스텀 프로퍼티는 **선언된 곳(:root)에서 이미
     var()가 치환된 계산값**으로 상속되기 때문이다. 조합형 토큰은 통째로 다시 세워야 한다. */
  --cmu-stage-grad-wide: linear-gradient(to bottom right,
                        rgba(0, 0, 0, 0) 0%,
                        rgba(0, 0, 0, 0) 40%,
                        rgba(0, 0, 0, 0.025) 74%,
                        rgba(0, 0, 0, 0.07) 100%);
  --cmu-line:         #E3E3DF;   /* 스펙 구분선 */
  --cmu-line-strong:  #1A1A1A;

  /* 텍스트 — display는 검정(브랜드 지정) */
  --cmu-ink:          #000000;   /* 디스플레이·제목 */
  --cmu-body:         #1A1A1A;   /* 본문 */
  --cmu-muted:        #6B6B66;   /* 보조 */
  /* 브랜드 그린 위 전경색. 크림(#FFFCDF)에서 흰색으로 변경(2026-08-11).
     소셜 배지 PNG는 글리프가 흰색으로 칠해진 게 아니라 **투명하게 뚫려 있어서**
     (불투명 픽셀이 전부 #1B553C) 배경색을 그대로 비춘다 — 즉 그 에셋은
     "그린 위 전경색"을 규정하지 않는다. 이 값은 자유롭게 정할 수 있다. */
  --cmu-on-brand:     #FFFFFF;

  /* 타이포 — Pretendard 단일 패밀리 */
  --cmu-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
              system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

  --cmu-fs-display: clamp(2.25rem, 1.2rem + 2.6vw, 3.5rem);  /* 상품명 */
  --cmu-fs-hero:    clamp(2rem, 0.9rem + 3.2vw, 3.75rem);  /* 홈 제품 타이틀 — 타이포 중심 히어로 */
  --cmu-fs-h2:      clamp(1.5rem, 1.1rem + 1.1vw, 2rem);
  --cmu-fs-sub:     1.25rem;     /* 20px — 리드 문단(부제 무게). h2와 본문 사이 */
  --cmu-fs-lead:    1.0625rem;   /* 17px — 설명문 */
  --cmu-fs-body:    0.9375rem;   /* 15px — 스펙 */
  --cmu-fs-sm:      0.8125rem;   /* 13px */
  --cmu-fs-xs:      0.6875rem;   /* 11px — 레일 링크 */
  --cmu-fs-2xs:     0.625rem;    /* 10px — 법적 고지·카피라이트(레일·푸터 공용) */

  --cmu-lh-tight:   1.06;
  --cmu-lh-snug:    1.35;
  --cmu-lh-body:    1.55;

  --cmu-tracking-display: -0.02em;
  --cmu-tracking-rail:     0.01em;

  /* 스페이싱 — 4px 그리드 */
  --cmu-s1: 0.25rem;  --cmu-s2: 0.5rem;   --cmu-s3: 0.75rem;  --cmu-s4: 1rem;
  --cmu-s5: 1.5rem;   --cmu-s6: 2rem;     --cmu-s7: 3rem;     --cmu-s8: 4rem;
  --cmu-s9: 6rem;

  /* 레이아웃 */
  /* 레일 폭 이력: 110 → 100 → 90 → 78px. 패딩 18 → 12 → 10px.
     카피라이트를 "© CoffeeZ"로 축약(2026-08-11)하면서 텍스트 병목이 풀렸다.
     ⚠ 이제 폭을 지배하는 건 **로고 정사각 블록 54px**이다(최장 텍스트 "Company" ~50px).
     콘텐츠 폭 = 78 − 10×2 = 58px → 로고 +4px · 텍스트 +8.5px 여유.
     이론상 바닥은 74px(콘텐츠 54 = 로고와 정확히 같음)이지만 4px을 남겼다 —
     폭 추정이 Pretendard 실측 메트릭이 아니라 문자별 근사치라서다.
     74px 아래로 가려면 --cmu-logo-box를 줄여야 하는데, 그건 --cmu-top-zone의
     구성요소라 두 페이지의 상단 정렬선이 함께 움직인다. */
  --cmu-rail-w:       78px;
  --cmu-rail-pad:     10px;
  /* 2026-08-11: 로고·소셜을 각각 ×0.8로 축소 (46→37 / 34→27).
     정수 px로 반올림한다 — PNG 래스터라 소수 px면 리샘플링으로 가장자리가 뭉갠다. */
  --cmu-logo-w:       37px;                  /* logomark.png 110×159 — 마크 자체의 폭 (구 46px) */
  /* 로고마크를 감싸는 **정사각(1:1) 블록**. 한 변 = 마크의 렌더 높이 37×159/110 = 53.5 → 54px.
     이 블록이 우측 영역 상단 여백의 기준자다 — 페이지마다 제각각이던 상단 간격을 하나로 묶는다. */
  --cmu-logo-box:     54px;
  --cmu-logo-gap:     var(--cmu-s6);         /* 32px — 로고 블록 아래 여백(= 소셜 버튼까지) */
  /* 우측 영역 상단 존 = 레일 상단 패딩 + 로고 정사각 블록 + 로고 아래 여백.
     즉 우측 콘텐츠는 **레일 소셜 버튼이 시작하는 선**에서 시작한다.
     Shop = 필터 바가 이 높이를 차지하고 그다음 그리드가 시작 · Product = 아이브로가 시작.
     ⚠ 로고 블록 끝(78px)이 아니다 — 그 선은 로고와 칩의 **중심**을 맞추는 데만 쓰이고,
     다음 섹션의 시작선은 소셜 버튼 상단(110px)이다. */
  --cmu-top-zone:     calc(var(--cmu-s5) + var(--cmu-logo-box) + var(--cmu-logo-gap)); /* 24+54+32 = 110px */
  /* 로고 마크의 수직 중심선(51px). 상단 존이 "다음 섹션의 시작선"이라면 이건 "짝을 맞추는 선"이다.
     Shop 필터 칩이 이 선에 중심을 맞추고, 홈의 브랜드 워드마크도 여기에 맞춘다. */
  --cmu-logo-center:  calc(var(--cmu-s5) + var(--cmu-logo-box) / 2);   /* 24 + 27 = 51px */
  --cmu-social-w:     23px;                  /* 소셜 배지 — 원본 66px → 2.9x 밀도 (34 → 27 → 23px) */
  --cmu-rail-line:    21px;                  /* 레일 하단 텍스트의 단일 행 피치 — 구분점 포함 전 행 동일 */
  --cmu-info-pad-x:   clamp(2rem, 1rem + 5vw, 9.5rem);
  --cmu-info-pad-y:   clamp(3rem, 2rem + 3vw, 5.5rem);
  /* --cmu-page-pad-x 폐기(2026-08-11): 푸터가 좌우 여백 없는 전폭 밴드가 되면서
     유일한 사용처가 사라졌다. 다른 전폭 밴드가 생기면 그때 다시 세운다. */
  /* 정보 컬럼 안 모든 블록이 공유하는 단일 폭 상한.
     구 --cmu-measure(36rem)는 본문 텍스트에만 걸려 있어서, 뷰포트가 넓어지면
     탭·스펙·구매·아코디언은 컬럼 폭을 그대로 쓰는데 본문만 576px에 묶여 어긋났다
     (1920px에서 686 vs 576). 제약을 블록이 아니라 컬럼으로 올린다. */
  --cmu-column:       44rem;                 /* 704px — 초광폭에서 글줄이 늘어지는 것만 막는다 */

  /* 형태 */
  /* pill 치수 — 기본/작은 변형이 이 세 값만 바꿔 쓴다.
     조합형이 아니라 **직접 참조**라 자손에서 덮어써도 정상 재계산된다
     (--cmu-stage-grad 같은 조합 토큰과 다른 점). */
  --cmu-pill-py:      3px;
  --cmu-pill-px:      8px;
  --cmu-pill-fs:      var(--cmu-fs-sm);

  --cmu-radius-pill:  999px;
  --cmu-radius-btn:   4px;
  --cmu-radius-sm:    3px;

  /* 모션 */
  --cmu-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  /* 표류용 이징 — 양끝이 모두 느린 대칭 곡선. 기본 --cmu-ease는 끝이 빨라
     반복 애니메이션에 쓰면 매 주기 끝에서 홱 멈추는 느낌이 난다. */
  --cmu-ease-drift:   cubic-bezier(0.45, 0, 0.55, 1);
  /* 정착용 — 목표를 살짝 지나쳤다 돌아오는 오버슈트. hover out 이 뚝 끊기지 않게. */
  --cmu-ease-settle:  cubic-bezier(0.34, 1.28, 0.64, 1);
  --cmu-dur-fast:     140ms;
  --cmu-dur:          280ms;
  --cmu-dur-slow:     560ms;
  /* 텍스트 링크 hover 페이드 — 레일 내비·푸터 메뉴·인라인 링크가 공유한다.
     구 값이 0.62 / 0.65 / 색변경으로 갈려 있어 링크마다 반응이 달랐다. */
  --cmu-hover-fade:   0.62;
}

/* ── 2. 리셋 · 베이스 ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-left: var(--cmu-rail-w);
  font-family: var(--cmu-font);
  font-size: var(--cmu-fs-body);
  line-height: var(--cmu-lh-body);
  color: var(--cmu-body);
  background: var(--cmu-surface);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
/* ul·ol 모두 리셋한다. ul만 잡으면 ol을 쓰는 컴포넌트에서 기본 번호와
   padding-inline-start 40px가 되살아난다(가공방식 트랙이 그렇게 밀렸다).
   번호가 필요한 목록은 그쪽에서 list-style을 명시적으로 opt-in 한다. */
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--cmu-brand); outline-offset: 3px; }

.cmu-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── 3. 레일 (고정 사이드바) ──────────────────────────────────────────────── */
/* 레퍼런스: library/cmu-product-page.png 좌측. 로고 상단 / 소셜 원형 / 하단 유틸·주내비 */
.cmu-rail {
  position: fixed; inset: 0 auto 0 0;
  width: var(--cmu-rail-w);
  display: flex; flex-direction: column;
  /* 블록(로고·소셜·푸트)은 레일 가운데 정렬. 텍스트 자체는 좌측 정렬을 유지한다
     — 각 블록이 콘텐츠 폭으로 줄어든 뒤 가운데 놓이므로, 링크 텍스트는 왼쪽 정렬인 채로
     덩어리만 중앙에 온다. text-align은 건드리지 않는다(기본 left). */
  align-items: center;
  padding: var(--cmu-s5) var(--cmu-rail-pad) var(--cmu-s5);
  background: var(--cmu-secondary);
  color: var(--cmu-brand);
  z-index: 100;
}

/* 로고 — 정사각 블록 안에 마크를 중앙 배치한다. 블록을 실제로 정사각으로 만들어야
   --cmu-top-zone(= 레일 패딩 + 이 블록)이 화면 위 실제 선과 일치한다. */
.cmu-rail__logo {
  display: grid; place-items: center;
  width: var(--cmu-logo-box); height: var(--cmu-logo-box);
  margin-bottom: var(--cmu-s6);
}
.cmu-rail__logo img {
  width: var(--cmu-logo-w); height: auto;
  /* 회전축을 기구 상단(엔벨로프)에 둔다 — 아래 바구니가 매달려 흔들리는 것처럼 읽힌다.
     축이 중앙이면 마크 전체가 도는 느낌이라 "떠 있다"가 아니라 "돌아간다"가 된다. */
  transform-origin: 50% 22%;
}

/* 열기구 표류 — hover/focus 시에만 도는 tiny motion.
   진폭이 작아야(≤4px, ≤1.6deg) 장난스럽지 않고 "떠 있다"로 읽힌다.
   0%와 100%를 rest 상태로 맞춰 시작·반복 지점에 튐이 없다.
   레이아웃에 영향 없는 transform만 쓴다 — 로고 블록(54px)이 상단 정렬의 기준자라
   크기가 흔들리면 우측 페이지 정렬선까지 함께 떨린다. */
@keyframes cmu-balloon-drift {
    0% { transform: translateY(0)    rotate(0deg); }
   25% { transform: translateY(-3px) rotate(1.6deg); }
   50% { transform: translateY(-1px) rotate(0deg); }
   75% { transform: translateY(-4px) rotate(-1.6deg); }
  100% { transform: translateY(0)    rotate(0deg); }
}
/* ⚠ :hover 로 직접 걸지 않고 JS 클래스로 돌린다.
   CSS 애니메이션은 제거되는 순간 현재 자세에서 **즉시** rest 로 튄다 — 이징을 줄 수 없다.
   hover out 을 부드럽게 하려면 그 순간의 자세를 붙잡아 transition 으로 되돌려야 하는데,
   :hover 가 풀린 뒤에는 이미 자세를 읽을 수 없다. 그래서 시작/정지를 JS가 쥔다. */
.cmu-rail__logo img.is-drifting {
  animation: cmu-balloon-drift 3.4s var(--cmu-ease-drift) infinite;
}
/* 정착 — 붙잡아 둔 자세에서 rest 로. 살짝 지나쳤다 돌아오는 곡선이라 기구가
   바람을 놓고 제자리를 찾는 느낌이 난다. */
.cmu-rail__logo img.is-settling {
  transition: transform var(--cmu-dur-slow) var(--cmu-ease-settle);
}

/* 소셜 — instagram/youtube/blog/kakao.png는 그린 바탕 + 흰 글리프가 구워진 **배지 완성본**이다.
   CSS로 배경 원·마스크를 씌우지 않는다(씌우면 배지가 이중으로 겹친다).
   kakao만 66×69로 말풍선 꼬리가 있어 세로가 약간 길다 — height:auto로 비율을 지킨다. */
.cmu-rail__social { display: flex; flex-direction: column; gap: var(--cmu-s2); }
.cmu-rail__social a {
  display: block; width: var(--cmu-social-w, 34px);
  transition: transform var(--cmu-dur-fast) var(--cmu-ease),
              opacity var(--cmu-dur-fast) var(--cmu-ease);
}
.cmu-rail__social a:hover { opacity: 0.78; transform: translateY(-1px); }
.cmu-rail__social img { width: 100%; height: auto; }

/* 하단 고정 — 유틸 위, 주내비 아래 (레퍼런스 순서)
   foot 자체는 콘텐츠 폭(= 가장 긴 항목 "Order Status")으로 줄어 레일 가운데에 놓이고,
   두 nav는 그 폭에 stretch 되어 **공통 좌측 기준선**을 공유한다.
   → nav를 각각 중앙 정렬하면 "Shop"과 "Cart (0)"의 좌측 끝이 어긋나 들쭉날쭉해진다. */
/* gap 0 — 두 묶음 사이 간격은 구분점(･)이 차지하는 한 행이 전담한다.
   gap을 남기면 그 간격이 행 피치에 더해져 "구분점 위아래만 벌어지는" 어긋남이 생긴다. */
.cmu-rail__foot { margin-top: auto; display: flex; flex-direction: column; gap: 0; }

/* 단일 행 피치 — nav 링크·구분점이 전부 같은 값을 쓴다.
   구 규칙(line-height 1.7 = 18.7px + li 간 margin 2px)은 두 값이 섞여 있어
   구분점 행만 어긋났다. margin을 없애고 line-height 하나로 리듬을 잡는다. */
.cmu-rail__nav,
.cmu-rail__sep { font-size: var(--cmu-fs-xs); line-height: var(--cmu-rail-line); }

.cmu-rail__sep { display: block; letter-spacing: var(--cmu-tracking-rail); user-select: none; }

.cmu-rail__nav a {
  display: inline-block;
  line-height: inherit;
  letter-spacing: var(--cmu-tracking-rail);
  /* 줄바꿈 금지 — 한 줄이 접히면 foot 폭이 흔들려 가운데 정렬이 무너진다.
     레일 콘텐츠 폭 = --cmu-rail-w − --cmu-rail-pad×2 = 100 − 12×2 = 76px.
     "Order Status"(~70px)를 "Orders"로 줄이면서(2026-08-11) 최장 항목이
     "Cart (0)"(~50px)로 내려왔다 — 여유 26px. 레일을 더 좁힐 여지가 생겼다. */
  white-space: nowrap;
  /* 유틸(Cart·Login…)과 주내비(Shop·Company·Cafe) 폰트 통일 — 구 --primary 전용 600을
     전 링크로 올렸다. 두 묶음의 무게가 갈리면 구분점(･) 하나로는 위계가 안 읽힌다. */
  font-weight: 600;
  transition: opacity var(--cmu-dur-fast) var(--cmu-ease);
}
.cmu-rail__nav a:hover { opacity: var(--cmu-hover-fade); }

/* 카피라이트 — 주내비 아래 정확히 한 행 띄우고 레일 최하단.
   10px인 이유: 레일 콘텐츠 폭이 76px인데 "© CoffeeZ Inc."가 11px에서 ~78px로 넘쳐 접힌다.
   line-height를 레일 리듬(21px)이 아니라 본문 비율로 쓰는 이유 = 푸터 하단선 정렬(아래 참고). */
.cmu-rail__copy {
  margin-top: var(--cmu-rail-line);
  font-size: var(--cmu-fs-2xs); line-height: var(--cmu-lh-body);
  letter-spacing: var(--cmu-tracking-rail);
  white-space: nowrap;
  color: var(--cmu-brand);
}

/* ── 4. PDP 레이아웃 ─────────────────────────────────────────────────────── */
/* 미디어 = sticky 100vh(고정) · 정보 = 일반 흐름(오토스크롤) */
.cmu-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

/* 그라디언트는 슬라이드가 아니라 **무대(컨테이너)**에 깐다.
   슬라이드마다 깔면 스와이프 중 슬라이드 경계에서 (5% → 0%) 명암이 맞물려 이음매가 보인다.
   무대에 깔면 이미지가 전부 알파 투명이라 그대로 비치고, 드래그 중에도 배경이 고정된다. */
.cmu-pdp__media {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  background-color: var(--cmu-surface);
  background-image: var(--cmu-stage-grad);
  overflow: hidden;
}

.cmu-pdp__info {
  /* 상단은 --cmu-top-zone(레일 로고 블록이 끝나는 선)에서 시작한다.
     Shop 필터 바와 같은 값이라 두 페이지의 첫 요소가 같은 높이에 선다. */
  padding: var(--cmu-top-zone) var(--cmu-info-pad-x) var(--cmu-s9);
  background: var(--cmu-surface);
}
/* 정보 컬럼의 모든 직계 블록(제목·태그·리드·탭·구매·상세·아코디언)이 같은 폭을 쓴다.
   개별 블록에 max-width를 흩뿌리면 어느 하나만 다른 값을 갖는 순간 어긋난다. */
.cmu-pdp__info > * { max-width: var(--cmu-column); }

/* ── 5. 이미지 슬라이더 (스와이프) ────────────────────────────────────────── */
.cmu-slider { position: relative; height: 100%; }
.cmu-slider__track {
  display: flex; height: 100%;
  transition: transform var(--cmu-dur-slow) var(--cmu-ease);
  touch-action: pan-y;
  cursor: grab;
}
.cmu-slider__track.is-dragging { transition: none; cursor: grabbing; }
.cmu-slider__slide {
  flex: 0 0 100%;
  display: grid; place-items: center;
  padding: clamp(2rem, 6vw, 6rem);
}
.cmu-slider__slide img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  -webkit-user-drag: none; user-select: none;
}

.cmu-slider__dots {
  position: absolute; left: 50%; bottom: var(--cmu-s6);
  transform: translateX(-50%);
  display: flex; gap: var(--cmu-s2);
}
.cmu-slider__dot {
  width: 7px; height: 7px; padding: 0; border: 0;
  border-radius: var(--cmu-radius-pill);
  background: var(--cmu-line-strong); opacity: 0.24;
  cursor: pointer;
  transition: opacity var(--cmu-dur-fast) var(--cmu-ease),
              transform var(--cmu-dur-fast) var(--cmu-ease);
}
.cmu-slider__dot[aria-current="true"] { opacity: 1; transform: scale(1.25); }

.cmu-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: var(--cmu-radius-pill);
  background: transparent; color: var(--cmu-line-strong);
  opacity: 0.35; cursor: pointer;
  transition: opacity var(--cmu-dur-fast) var(--cmu-ease);
}
.cmu-slider__arrow:hover { opacity: 0.9; }
.cmu-slider__arrow--prev { left: var(--cmu-s4); }
.cmu-slider__arrow--next { right: var(--cmu-s4); }
.cmu-slider__arrow svg { width: 22px; height: 22px; margin: auto; fill: none;
  stroke: currentColor; stroke-width: 1.5; }

/* ── 6. 상품 헤더 ────────────────────────────────────────────────────────── */
/* 아이브로는 원문 대소문자 그대로. all caps는 칩 전용 규칙이다.
   여기 트래킹이 0.08em이었던 건 대문자를 벌리기 위한 값이라, 대소문자 혼용으로
   돌아오면서 함께 낮춘다 — 안 낮추면 낱글자가 흩어져 읽힌다. */
.cmu-pdp__eyebrow {
  margin-bottom: var(--cmu-s3);
  font-size: var(--cmu-fs-sm); letter-spacing: 0.01em;
  color: var(--cmu-muted);
}
.cmu-pdp__title {
  font-size: var(--cmu-fs-display);
  line-height: var(--cmu-lh-tight);
  letter-spacing: var(--cmu-tracking-display);
  font-weight: 600;
  color: var(--cmu-ink);
}

/* 상품 태그 = 둥근 칩(pill) 유지.
   커핑 노트(§7 .cmu-chips)는 쉼표 평문 — 둘의 역할이 다르다.
   태그는 분류 축(카테고리·산지·가공·중량)이라 하나씩 눌러 필터링될 후보이고,
   커핑 노트는 한 커피를 서술하는 형용구 나열이라 개별 클릭 대상이 아니다.
   li에 직접 스타일을 건다 — 별도 클래스 없이 목록 시맨틱만으로 충분하다. */
/* ── pill 칩 공통 규격 ────────────────────────────────────────────────────
   세 곳이 같은 모양을 쓴다: PDP 카테고리 칩(.cmu-tags) · Shop 필터(.cmu-chipbtn) ·
   Shop 카드 카테고리(.cmu-card__cat). 규격을 한 곳에 두지 않으면 셋이 조금씩 어긋난다.
   변형(hover·활성)만 각자 아래에서 얹는다. */
.cmu-tags li,
.cmu-chipbtn,
.cmu-card__cat li,
.cmu-feature__chip {
  /* 4px 10px → 3px 8px (2026-08-11). 비율 2.50:1 → 2.67:1.
     정수 px를 유지하면서 2.5:1을 정확히 지키려면 다음 칸이 2px 5px인데 절반이라 과하다.
     소수 px는 금지 — 칩마다 서브픽셀 반올림이 갈려 한 줄에 늘어놨을 때 높이가 1px씩 어긋난다. */
  padding: var(--cmu-pill-py) var(--cmu-pill-px);
  border: 1px solid var(--cmu-line-strong);
  border-radius: var(--cmu-radius-pill);
  font-size: var(--cmu-pill-fs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cmu-body);
  white-space: nowrap;
}

/* 3칸 고정: ① Main 콜렉션 ② Sub 콜렉션 ③ 메타(산지·연도). 셋 다 같은 모양이다.
   Cafe24 분류는 4단(대·중·소·상세)까지 지원하지만, 칩은 3칸을 넘기지 않는다 —
   제목 아래 한 줄에서 위계가 읽히는 한계가 3개다. */
.cmu-tags { display: flex; flex-wrap: wrap; gap: var(--cmu-s2); margin-top: var(--cmu-s5); }
.cmu-tags li {
  /* 내부 여백 축소 (2026-08-11): 세로 6→4px(×0.67) · 가로 14→10px(×0.71).
     가로는 8px에서 한 단 풀었다 — pill은 좌우 끝이 반원이라 같은 px라도
     사각 칩보다 시각적 여백이 좁게 읽힌다. 정수 px 유지(소수면 칩마다
     서브픽셀 반올림이 갈려 한 줄에 늘어놨을 때 높이가 1px씩 어긋난다). */
  /* 라벨 all caps는 위 공통 규격에 있다. HTML/모듈 출력값은 원본 그대로 두고 표시만
     변환한다 — Cafe24 카테고리명을 운영자가 대문자로 입력하도록 강제하지 않기 위해서다. */
  transition: background-color var(--cmu-dur-fast) var(--cmu-ease),
              color var(--cmu-dur-fast) var(--cmu-ease),
              border-color var(--cmu-dur-fast) var(--cmu-ease);
}
.cmu-tags a { display: block; }

/* 작은 변형 — 값만 덮어쓰면 공용 규격(테두리·pill 반경·all caps·트래킹)이 그대로 따라온다.

   .cmu-card__cat 을 함께 잡는 이유: 상품 카드 안 칩은 **전역으로** 작은 변형을 쓴다.
   커스텀 프로퍼티는 상속되므로 컨테이너에 값을 세우면 자식 li 가 그대로 받는다 —
   카드 24개 마크업에 클래스를 일일이 붙이지 않아도 된다. */
.cmu-pill--sm,
.cmu-card__cat {
  --cmu-pill-py: 2px;
  --cmu-pill-px: 6px;
  --cmu-pill-fs: var(--cmu-fs-xs);
}

/* 세 칩은 **시각적으로 완전히 동일**하다. --cat / --meta 클래스는 남기되 스타일은 주지 않는다
   — 슬롯 정체성(Cafe24 모듈 매핑·향후 필터 동작)에만 쓰이는 훅이다.
   층위 구분을 톤으로 하지 않는 이유: 칩은 좌→우 순서 자체가 넓음→좁음을 이미 말한다.
   여기에 명도까지 얹으면 ③이 "덜 중요한 정보"로 읽혀 산지 탐색 진입점이 죽는다. */
.cmu-tags li:hover { background: var(--cmu-line-strong); color: #FFF; }

.cmu-pdp__lead {
  margin-top: var(--cmu-s5);
  font-size: var(--cmu-fs-lead);
  line-height: var(--cmu-lh-snug);
  color: var(--cmu-body);
}

/* ── 7. 상세 탭 · 스펙 ───────────────────────────────────────────────────── */
/* 산지 / 커핑 프로파일 / 브루잉 가이드 3탭. 세 패널 모두 동일한 cmu-spec 행 형식을 쓴다
   — 형식이 갈리면 탭 전환이 "다른 페이지로 이동"처럼 읽혀 비교가 끊긴다. */
.cmu-tabs { margin-top: var(--cmu-s8); }
.cmu-tabs__list {
  display: flex; gap: var(--cmu-s5);
  border-bottom: 1px solid var(--cmu-line);
}
.cmu-tabs__tab {
  position: relative;
  padding: 0 0 var(--cmu-s3);
  border: 0; background: none; cursor: pointer;
  font-size: var(--cmu-fs-body); font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cmu-muted);
  transition: color var(--cmu-dur-fast) var(--cmu-ease);
}
.cmu-tabs__tab:hover { color: var(--cmu-body); }
/* 활성 밑줄은 목록의 1px 경계선 위에 겹쳐 그린다 */
.cmu-tabs__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--cmu-brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--cmu-dur) var(--cmu-ease);
}
.cmu-tabs__tab[aria-selected="true"] { color: var(--cmu-ink); }
.cmu-tabs__tab[aria-selected="true"]::after { transform: scaleX(1); }
.cmu-tabs__panel[hidden] { display: none; }
.cmu-tabs__panel:focus-visible { outline: 2px solid var(--cmu-brand); outline-offset: 4px; }

.cmu-spec { margin-top: 0; }
.cmu-spec__row {
  display: grid;
  grid-template-columns: minmax(6rem, 22%) 1fr;
  gap: var(--cmu-s4);
  align-items: center;
  min-height: 59px;
  padding: var(--cmu-s3) 0;
  border-bottom: 1px solid var(--cmu-line);
}
.cmu-spec__key { font-weight: 500; color: var(--cmu-body); }
.cmu-spec__val { text-align: right; }
.cmu-spec__val p + p { margin-top: 2px; }

/* Roast · Profile — 양극 스케일 */
.cmu-scale { display: flex; align-items: center; justify-content: flex-end; gap: var(--cmu-s4); }
.cmu-scale__end { white-space: nowrap; }
.cmu-scale__track {
  position: relative;
  flex: 0 1 190px; height: 1px;
  background: var(--cmu-line-strong);
}
.cmu-scale__thumb {
  position: absolute; top: 50%;
  left: var(--cmu-scale-pos, 50%);
  width: 9px; height: 9px; border-radius: var(--cmu-radius-pill);
  background: var(--cmu-brand);
  transform: translate(-50%, -50%);
}

/* 가공방식 — Washed·Honey·Natural은 연속값이 아니라 **범주**다.
   스케일(트랙+썸)로 그리면 "중간값"이 있는 것처럼 읽히므로 분절 트랙으로 나눈다. */
.cmu-steps {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 6px; width: 100%; max-width: 16rem; margin-left: auto;
  text-align: center;
}
.cmu-step { font-size: var(--cmu-fs-sm); color: var(--cmu-muted); }
.cmu-step__bar { display: block; height: 3px; margin-bottom: 6px; background: var(--cmu-line); }
.cmu-step[aria-current="true"] { color: var(--cmu-body); font-weight: 600; }
.cmu-step[aria-current="true"] .cmu-step__bar { background: var(--cmu-brand); }

/* 커핑 노트 — 원문에 강도 수치가 없어 막대·레이더로 그리면 없는 값을 지어내게 된다.
   용어 나열로만 두되, 둥근 칩 대신 쉼표 구분 평문으로 통일했다(2026-08-11).
   두 축(향미 / 질감·여운)의 구분은 색이 아니라 행 라벨이 진다 — 색까지 쓰면 중복 부호화다. */
.cmu-chips { display: block; }
.cmu-chips li { display: inline; }
.cmu-chips li + li::before { content: ", "; }

/* 브루잉 수치 — 숫자 폭을 고정해 행마다 자릿수가 흔들리지 않게 */
.cmu-spec__val--num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 8. 옵션 · 구매 ──────────────────────────────────────────────────────── */
.cmu-field { border: 0; margin: 0; padding: 0; }
.cmu-field--inline {
  display: grid;
  grid-template-columns: minmax(6rem, 22%) 1fr;
  gap: var(--cmu-s4);
  align-items: center;
  min-height: 59px;
  padding: var(--cmu-s3) 0;
  border-bottom: 1px solid var(--cmu-line);
}
.cmu-field__legend { font-weight: 500; padding: 0; }
.cmu-choices { display: flex; flex-wrap: wrap; gap: var(--cmu-s5); justify-content: flex-end; }
.cmu-field--stack .cmu-choices { justify-content: flex-start; }

.cmu-choice { display: inline-flex; align-items: center; gap: var(--cmu-s2); cursor: pointer; }
.cmu-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.cmu-choice__mark {
  width: 17px; height: 17px; border-radius: var(--cmu-radius-pill);
  border: 1.5px solid var(--cmu-line-strong);
  display: grid; place-items: center;
  transition: border-color var(--cmu-dur-fast) var(--cmu-ease);
}
.cmu-choice__mark::after {
  content: ""; width: 9px; height: 9px; border-radius: var(--cmu-radius-pill);
  background: var(--cmu-line-strong);
  transform: scale(0);
  transition: transform var(--cmu-dur-fast) var(--cmu-ease);
}
.cmu-choice input:checked + .cmu-choice__mark::after { transform: scale(1); }
.cmu-choice input:focus-visible + .cmu-choice__mark { outline: 2px solid var(--cmu-brand); outline-offset: 2px; }

.cmu-purchase { display: flex; flex-wrap: wrap; gap: var(--cmu-s5); padding: var(--cmu-s5) 0 0; }

.cmu-buy { display: flex; flex-wrap: wrap; gap: var(--cmu-s3); margin-top: var(--cmu-s8); }

.cmu-stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--cmu-line-strong);
  border-radius: var(--cmu-radius-btn);
  height: 52px;
}
.cmu-stepper button {
  width: 40px; height: 100%; border: 0; background: none; cursor: pointer;
  font-size: 1.125rem; line-height: 1;
}
.cmu-stepper output { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }

.cmu-btn {
  height: 52px; padding: 0 var(--cmu-s6);
  border: 0; border-radius: var(--cmu-radius-btn);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cmu-s5);
  font-size: var(--cmu-fs-body); font-weight: 600;
  cursor: pointer;
  transition: background-color var(--cmu-dur-fast) var(--cmu-ease);
}
.cmu-btn--primary { flex: 1 1 15rem; background: var(--cmu-brand); color: var(--cmu-on-brand); }
.cmu-btn--primary:hover { background: var(--cmu-brand-hover); }
.cmu-btn--dark { flex: 1 1 12rem; background: var(--cmu-ink); color: #FFF; }
.cmu-btn--dark:hover { background: #222; }

.cmu-note { margin-top: var(--cmu-s4); font-size: var(--cmu-fs-sm); color: var(--cmu-muted); }

/* ── 8.3 STATIC — 정적 페이지(Company 등) 2분할 지그재그 ───────────────────── */
/* PDP의 full-bleed 2분할 칼럼 체계를 유지하되 **좌측 고정(sticky)은 없다**.
   섹션마다 이미지/본문 좌우가 뒤집히며 내려간다. 본문 서식은 PDP 상세 본문과 동일한
   컴포넌트(.cmu-detail__*)를 그대로 쓴다 — 정적 페이지마다 서식을 새로 만들지 않는다. */
.cmu-static { background: var(--cmu-page-bg); }

.cmu-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;      /* 본문이 짧아도 이미지 높이 안에서 가운데 선다 */
}

/* 좌우 반전 — DOM 순서는 [본문][이미지]로 두고 시각 순서만 바꾸지 않는다.
   direction/order 로 뒤집으면 키보드·스크린리더 순서가 화면과 어긋난다.
   대신 마크업 자체를 뒤집어 두고 이 클래스는 **본문 쪽 패딩 방향만** 조정한다. */
.cmu-split__media { margin: 0; }
.cmu-split__media img {
  width: 100%; height: 100%;
  aspect-ratio: 1;          /* 소스가 전부 1:1 — cover로 잘릴 일이 없다 */
  object-fit: cover;
}

.cmu-split__body {
  padding: var(--cmu-s9) var(--cmu-info-pad-x);
}
.cmu-split__body > * { max-width: var(--cmu-column); }

/* 여는 섹션 — 시그니처가 제목을 겸하는 블록. 로고와 짧은 리드가 한 축에 서도록 가운데 정렬.
   본문 산문까지 가운데로 오지만 이 섹션은 리드 1줄 + 문단 1개라 읽는 데 부담이 없다.
   (뒤 섹션들은 좌측 정렬 유지 — 긴 산문을 가운데로 두면 줄 시작점이 흔들려 읽기 어렵다.) */
.cmu-split__body--center { text-align: center; }
.cmu-split__body--center > * { margin-left: auto; margin-right: auto; }

/* PNG 그대로 사용 — 색이 파일에 구워져 있어 currentColor 가 필요 없다.
   원본 680×720(내용 466×506, 여백 포함)이라 tight crop 없이 그대로 넣는다.
   폭 이력: 18 → 12.6(×0.7) → 10.7rem(×0.85). 누적 ×0.59.
   171px 표시라 원본 466px 대비 2.7x 밀도 — 레티나에서도 넉넉히 선명하다. */
.cmu-signature {
  width: min(100%, 10.7rem);
  margin: 0 auto var(--cmu-s6);
}
.cmu-signature img { display: block; width: 100%; height: auto; }
/* 첫 요소의 상단 마진 제거 — .cmu-detail 계열은 본래 앞 블록과의 간격을 스스로 갖는다 */
.cmu-split__body .cmu-detail__h { margin-top: 0; }
.cmu-split__body .cmu-acc__h + p { margin-top: var(--cmu-s2); }
.cmu-split__body .cmu-detail__body > h3 { margin-top: var(--cmu-s6); }

@media (max-width: 1024px) {
  /* 한 칼럼으로 접으면 지그재그가 의미를 잃는다. 이미지 → 본문 순서로 통일한다.
     --reverse 는 DOM 이 [본문][이미지]라 접었을 때 본문이 먼저 오므로 순서를 되돌린다. */
  .cmu-split { grid-template-columns: 1fr; }
  .cmu-split--reverse .cmu-split__media { order: -1; }
  .cmu-split__body { padding: var(--cmu-s8) var(--cmu-s5); }
}

/* 히어로 슬라이더 — PDP 슬라이더 컴포넌트를 100svh full-bleed 로 확장.
   슬라이드가 이미지를 여백 없이 꽉 채우도록 padding 을 걷고 cover 로 자른다. */
/* 90svh — 100svh 로 꽉 채우면 "여기가 끝"으로 읽혀 스크롤할 이유가 안 보인다.
   10%를 남겨 다음 섹션의 머리가 걸치게 하면 그 자체가 아래로 이어진다는 신호가 된다. */
/* fade 모드 — 슬라이드를 같은 칸에 겹쳐 쌓고 불투명도만 교차한다.
   translate 로 마지막→처음을 순환하면 중간 슬라이드를 거슬러 되감는 게 보이는데,
   겹쳐 쌓으면 그 문제가 사라져 무한 재생이 매끄럽다. */
.cmu-slider--fade .cmu-slider__track { display: grid; transform: none !important; }
.cmu-slider--fade .cmu-slider__slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity var(--cmu-dur-slow) var(--cmu-ease);
}
.cmu-slider--fade .cmu-slider__slide.is-on { opacity: 1; }

.cmu-hero { height: 90svh; overflow: hidden; }

/* 화살표는 평소 숨기고 hover(또는 키보드 포커스)에서 드러낸다.
   전면 사진 위에 컨트롤이 상시 떠 있으면 사진을 먼저 보게 하는 히어로의 목적을 깎는다.
   pointer-events 를 함께 껐다 켜야 안 보이는 버튼이 클릭을 가로채지 않는다. */
.cmu-hero .cmu-slider__arrow { color: #FFF; opacity: 0; pointer-events: none; }
.cmu-hero .cmu-slider:hover .cmu-slider__arrow,
.cmu-hero .cmu-slider:focus-within .cmu-slider__arrow { opacity: 0.65; pointer-events: auto; }
.cmu-hero .cmu-slider__arrow:hover { opacity: 1; }
.cmu-hero .cmu-slider { height: 100%; }
.cmu-slider__slide--hero { padding: 0; }
.cmu-slider__slide--hero img {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover;
}
.cmu-hero .cmu-slider__dot { background: #FFF; opacity: 0.45; }
.cmu-hero .cmu-slider__dot[aria-current="true"] { opacity: 1; }

/* 지도 임베드 — 분할 칼럼의 한 칸을 차지한다.
   카카오 roughmap 은 자기 마크업(.root_daum_roughmap)을 고정 픽셀로 렌더하므로
   폭만 셀에 맞춰 늘린다. aspect-ratio 를 걸지 않는 이유: 지도 높이는 Lander 의
   mapHeight 가 정하고, 여기서 비율을 강제하면 지도와 셀이 서로 잘린다. */
.cmu-map { margin: 0; background: var(--cmu-surface); display: grid; place-items: center; padding: var(--cmu-s6); }
/* roughmap 은 640×360 고정 마크업으로 렌더된다. !important 로 내부 폭을 건드리면
   내부 레이어(지도 타일·경계)가 어긋나므로, 바깥에서 **비율 유지 축소**만 한다. */
.cmu-map .root_daum_roughmap { max-width: 100%; }
.cmu-map .root_daum_roughmap img { max-width: none; }   /* 전역 img{max-width:100%} 가 타일을 깨뜨린다 */

/* 지도 아래 주소 블록만 숨긴다 — 좌측 정보 블록과 완전히 중복이다.
   roughmapLander.js 를 직접 읽어 확인한 루트 직계 자식 구조:
     .wrap_map          지도 본체(타일·확대 버튼)
     .wrap_controllers  카카오맵 로고·로드뷰  ← **임베드 자체 스트립, 건드리지 않는다**
     .cont              .section_address / _subway / _bus  ← 중복 정보, 이것만 숨김
   앞서 `.wrap_map ~ *` 로 뒤 형제를 통째로 가렸다가 저작권 로고까지 죽었다. */
.cmu-map .root_daum_roughmap > .cont { display: none; }


/* ── 8.4 HOME — 타이포그래픽 리스트 + hover 카드 float ─────────────────────── */
/* 레퍼런스 = library/cmu-home-page.png. 페이지 전면이 크림이라 레일과 경계 없이 이어진다.
   좌 절반 = 제품 타이틀 리스트 · 우 절반 = 활성 상품 카드 하나. */
.cmu-home {
  --cmu-page-bg: var(--cmu-secondary);
  background: var(--cmu-page-bg);
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: start;
}
/* 리스트 상단 = "Coffee Me Up" 워드마크의 **수직 중심**이 레일 로고 중심(51px)에 맞는 지점.
   다른 페이지처럼 --cmu-top-zone(110px, 소셜 버튼 상단)에서 시작하지 않는 이유:
   홈의 첫 요소는 아이브로나 필터가 아니라 브랜드명이라, 로고 마크와 한 줄로 읽혀야 한다.
   hero는 clamp로 뷰포트마다 크기가 변하므로 상수 대신 계산으로 따라가게 한다
   (line-height 1.06을 곱한 라인박스의 절반을 중심선에서 뺀다). */
.cmu-home__list {
  padding: calc(var(--cmu-logo-center) - var(--cmu-fs-hero) * var(--cmu-lh-tight) / 2)
           var(--cmu-s6) var(--cmu-s9) var(--cmu-s5);
  min-height: 100svh;
}

/* 브랜드/Shop All — 리스트 위아래를 잡는 두 개의 큰 앵커 */
.cmu-home__brand,
.cmu-home__all {
  display: inline-block;
  font-size: var(--cmu-fs-hero); font-weight: 700;
  line-height: var(--cmu-lh-tight); letter-spacing: var(--cmu-tracking-display);
  color: var(--cmu-ink);
  transition: color var(--cmu-dur-fast) var(--cmu-ease);
}
.cmu-home__brand:hover,
.cmu-home__all:hover { color: var(--cmu-brand); }
.cmu-home__all { margin-top: var(--cmu-s7); }

.cmu-feature { margin-top: var(--cmu-s7); }
.cmu-feature__item + .cmu-feature__item { margin-top: var(--cmu-s6); }

/* 타이틀 + 칩. 칩은 타이틀 상단선에 붙는다(어깨 위) — 레퍼런스의 배치. */
.cmu-feature__head { display: flex; align-items: flex-start; gap: var(--cmu-s3); }
.cmu-feature__title {
  font-size: var(--cmu-fs-hero); font-weight: 700;
  line-height: var(--cmu-lh-tight); letter-spacing: var(--cmu-tracking-display);
  color: var(--cmu-ink);
  transition: color var(--cmu-dur-fast) var(--cmu-ease);
}
/* 홈 리스트 칩 — 규격은 공용(§6), 여기선 배치와 전환만 */
.cmu-feature__chip {
  flex: none; margin-top: 0.15em;
  transition: background-color var(--cmu-dur-fast) var(--cmu-ease),
              border-color var(--cmu-dur-fast) var(--cmu-ease),
              color var(--cmu-dur-fast) var(--cmu-ease);
}
.cmu-feature__sub { display: flex; flex-wrap: wrap; gap: var(--cmu-s2) var(--cmu-s4); margin-top: var(--cmu-s2); }
.cmu-feature__origin,
.cmu-feature__ko { font-size: var(--cmu-fs-body); transition: color var(--cmu-dur-fast) var(--cmu-ease); }
.cmu-feature__origin { font-weight: 500; color: var(--cmu-body); }
.cmu-feature__ko     { color: var(--cmu-muted); }

/* 활성(hover·focus) — 타이틀·태그라인이 함께 그린으로 넘어가고 칩은 채워진다.
   태그라인 두 줄의 **위계는 그린 안에서도 유지**한다: 원산지/원두명은 브랜드 그린,
   한글은 약한 짝(--cmu-brand-soft). 둘 다 같은 그린으로 눕히면 기본 상태에 있던
   "무엇이 주고 무엇이 보조인지"가 활성일 때만 사라진다. */
.cmu-feature__item.is-on .cmu-feature__title  { color: var(--cmu-brand); }
.cmu-feature__item.is-on .cmu-feature__origin { color: var(--cmu-brand); }
.cmu-feature__item.is-on .cmu-feature__ko     { color: var(--cmu-brand-soft); }
.cmu-feature__item.is-on .cmu-feature__chip {
  background: var(--cmu-brand); border-color: var(--cmu-brand); color: var(--cmu-on-brand);
}

/* 카드 무대 — 우측 절반. sticky라 리스트를 스크롤해도 카드가 시야에 남는다.
   카드들을 겹쳐 쌓고 활성 하나만 불투명하게 만든다(교체 시 크로스페이드). */
.cmu-home__stage {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; place-items: center;
  padding: var(--cmu-s6);
}
/* ⚠ 마크업이 Shop과 **같은 구조**여야 한다: .cmu-card > a.
   카드 레이아웃(flex 컬럼·패딩·미디어 여백·hover 워시)이 전부 `.cmu-card > a`에 걸려 있어서,
   앵커를 카드 자신으로 만들면(<a class="cmu-card">) 그 규칙이 통째로 빠진다. */
.cmu-home__stage .cmu-card--float {
  grid-area: 1 / 1;                 /* 전부 같은 칸에 겹쳐 쌓는다 */
  width: min(100%, 34rem);
  /* 배경 없음 — 크림 페이지 위에 제품이 그대로 얹힌다.
     판(板)을 깔지 않으니 카드가 아니라 "떠 있는 제품"으로 읽히고, 좌측 타이포 리스트와
     우측이 같은 바닥을 공유해 화면이 둘로 갈리지 않는다. */
  /* 등장 = 아래에서 크게 밀어 올리며 살짝 다가온다(44px + scale 0.96).
     ⚠ 이동은 **들어올 때만** 건다. 나갈 때도 같은 거리를 움직이면 교체 순간
     나가는 카드가 44px 내려가고 들어오는 카드가 44px 올라와 두 덩어리가 엇갈려 어지럽다.
     transform 트랜지션에 0s + 페이드 길이만큼의 지연을 줘서, 나갈 때는 이동 없이
     페이드만 하고 다 사라진 뒤에 조용히 원위치로 돌아가게 한다. */
  opacity: 0; visibility: hidden;
  transform: translateY(44px) scale(0.96);
  transition: opacity var(--cmu-dur) var(--cmu-ease),
              transform 0s linear var(--cmu-dur),
              visibility 0s linear var(--cmu-dur);
}
.cmu-home__stage .cmu-card--float.is-on {
  opacity: 1; visibility: visible; transform: none;
  /* 이동은 페이드보다 길게(560ms) — 불투명도는 빨리 붙고 자세는 천천히 안착해
     반응은 즉각적으로, 인상은 느긋하게 읽힌다. */
  transition: opacity var(--cmu-dur) var(--cmu-ease),
              transform var(--cmu-dur-slow) var(--cmu-ease),
              visibility 0s;
}
/* ⚠ 샘플 PNG는 캔버스 대비 제품이 24~47%뿐이다(투명 여백이 이미 들어 있다).
   여기에 미디어 패딩까지 얹으면 여백이 두 겹으로 쌓여 큰 카드 안에 제품이 33%로 쪼그라든다.
   float 카드는 패딩을 걷고 이미지가 미디어 박스를 꽉 채우게 해 그 몫을 되돌린다.
   (실촬영본으로 교체되면 PNG 내부 여백이 사라지므로 이 보정도 재조정 대상이다.) */
.cmu-card--float .cmu-card__media { padding: 0; }
.cmu-card--float .cmu-card__media img { max-width: none; }

/* 대각 워시를 상시 노출 — 배경 판이 없으니 이 레이어가 카드 경계를 대신한다.
   Shop 카드에서는 hover 피드백이지만 여기서는 **형태를 규정하는 면**이라 켜둔다.
   hover 피드백은 이미지 확대(.cmu-card > a:hover img)가 계속 맡는다.

   ⚠ 셀렉터에 .cmu-home__stage 를 앞세운 이유: `.cmu-card--float > a::before` 만으로는
   §8.5의 `.cmu-card > a::before { opacity: 0 }` 과 특정도가 (0,1,2)로 **동률**이고,
   그 규칙이 파일 뒤에 있어 덮어써 버린다(HOME §8.4가 SHOP §8.5보다 앞이라).
   조상 클래스를 하나 더 붙여 (0,2,2)로 올리면 파일 순서와 무관하게 이긴다. */
.cmu-home__stage .cmu-card--float > a::before {
  opacity: 1;
  background-image: var(--cmu-stage-grad-wide);
}

@media (max-width: 1024px) {
  /* 좁은 폭에선 hover가 없다 → 카드 무대를 접고 리스트만 남긴다.
     리스트 항목 자체가 상품 링크라 기능은 그대로다. */
  .cmu-home { grid-template-columns: 1fr; }
  .cmu-home__stage { display: none; }
  .cmu-home__list { padding-right: var(--cmu-s5); }
}

/* ── 8.5 SHOP — 필터 칩 바 + 3열 full-bleed 그리드 ───────────────────────── */
/* 레퍼런스 = library/cmu-shop-page.png. 카드는 [카테고리칩 2단 / 이미지 / 제목·가격]. */

.cmu-filter {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center;
  /* 그룹 사이는 넓게(--s5), 그룹 안 칩 사이는 좁게(--s2).
     이 간격 차이 하나가 "어느 칩들이 같은 축인지"를 말한다 — 레퍼런스의 묶음 규칙. */
  gap: var(--cmu-s2) var(--cmu-s5);
  /* 상단 존을 필터 바가 통째로 차지하고, 칩은 그 안에서 수직 중앙에 선다.

     패딩이 레일의 수직 구조를 그대로 복제한다 — 상단 --cmu-s5(24), 하단 --cmu-logo-gap(32).
     그러면 칩 정렬 영역(110−24−32=54px)이 로고 정사각 블록과 정확히 겹쳐
     ① 칩 중심 = 로고 중심(51px) ② 그리드 상단 = 소셜 버튼 상단(110px) 두 가지가 동시에 맞는다.
     min-height 인 이유: 좁은 폭에서 칩이 여러 줄로 접히면 늘어나야 한다(height면 넘친다). */
  min-height: var(--cmu-top-zone);
  padding: var(--cmu-s5) var(--cmu-s4) var(--cmu-logo-gap);
  background: var(--cmu-surface);
}
.cmu-filter__set { display: flex; flex-wrap: wrap; gap: var(--cmu-s2); }

/* 필터 칩 — pill 규격은 공통(§6). 여기선 버튼 고유 속성과 상태만. */
.cmu-chipbtn {
  background: none; cursor: pointer;
  transition: background-color var(--cmu-dur-fast) var(--cmu-ease),
              color var(--cmu-dur-fast) var(--cmu-ease);
}
.cmu-chipbtn:hover { background: var(--cmu-line-strong); color: #FFF; }
.cmu-chipbtn.is-on { background: var(--cmu-line-strong); color: #FFF; }

/* 3열 full-bleed — 거터 없음. 카드끼리 맞붙어 이미지 면이 벽처럼 이어진다. */
.cmu-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.cmu-card { min-width: 0; }
.cmu-card > a {
  display: flex; flex-direction: column;
  height: 100%;
  padding: var(--cmu-s4);
  /* z-index:0 = 자기 쌓임 맥락을 연다. 아래 ::before를 z-index:-1로 깔아도
     카드 밖(페이지 배경)으로 빠지지 않고 이 앵커 안에 머문다. */
  position: relative; z-index: 0;
}

/* hover 배경 — PDP 상품 무대와 **같은 레이어**(--cmu-stage-grad)를 그대로 쓴다.
   우하단 코너에만 옅은 투명 블랙이 얹혀 카드 경계가 은근히 드러난다.
   ::before + opacity 인 이유: background-image(그라디언트)는 트랜지션이 안 먹는다.
   레이어를 깔아두고 불투명도만 페이드해야 부드럽게 등장한다. */
.cmu-card > a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--cmu-stage-grad);
  opacity: 0;
  transition: opacity var(--cmu-dur) var(--cmu-ease);
  pointer-events: none;
}
.cmu-card > a:hover::before,
.cmu-card > a:focus-visible::before { opacity: 1; }
/* 카드 카테고리 = 2단(Main·Sub) pill 2개. 구분점 없이 칩끼리 gap으로만 나뉜다.
   카드 전체가 하나의 링크라 개별 칩에 hover를 주지 않는다 — 누를 수 있는 것처럼 보이면
   실제로는 상품 상세로 가버려 기대가 어긋난다. */
.cmu-card__cat { display: flex; flex-wrap: wrap; gap: var(--cmu-s2); }
.cmu-card__media {
  flex: 1 1 auto;
  display: grid; place-items: center;
  padding: var(--cmu-s7) 0;
  min-height: 0;
}
.cmu-card__media img {
  width: 100%; max-width: 24rem; height: auto;
  transition: transform var(--cmu-dur) var(--cmu-ease);
}
.cmu-card > a:hover .cmu-card__media img { transform: scale(1.035); }

/* 제목·가격 양쪽 정렬 — 레퍼런스의 [제목 ······ 가격] */
.cmu-card__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--cmu-s4);
  font-size: var(--cmu-fs-sm);
}
.cmu-card__title {
  font-size: var(--cmu-fs-sm); font-weight: 400; line-height: var(--cmu-lh-snug);
  /* 한국어 상품명이 길다(레퍼런스의 "The Strong One"과 달리 30자 이상). 2줄에서 자른다. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.cmu-card__price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmu-card__from { margin-left: 2px; color: var(--cmu-muted); }

.cmu-card[hidden] { display: none; }
.cmu-grid__empty { padding: var(--cmu-s9) var(--cmu-s4); color: var(--cmu-muted); }

@media (max-width: 1024px) { .cmu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cmu-grid { grid-template-columns: 1fr; } }

/* ── 9. 상품 상세 본문 (정보 컬럼 계속 스크롤) ────────────────────────────── */
/* 평면 회색 --cmu-stage(#F4F4F2) 폐기(2026-08-11) — 무대는 흰 바탕 + 대각 워시로 일원화.
   시스템에 평면 회색 면은 더 이상 없다. */
.cmu-detail { margin-top: var(--cmu-s9); }
.cmu-detail + .cmu-detail { margin-top: var(--cmu-s8); }
.cmu-detail__h { font-size: var(--cmu-fs-h2); line-height: var(--cmu-lh-snug);
  letter-spacing: var(--cmu-tracking-display); font-weight: 600; color: var(--cmu-ink); }
.cmu-detail__body { margin-top: var(--cmu-s5); }
.cmu-detail__body p { font-size: var(--cmu-fs-lead); line-height: var(--cmu-lh-body); }
.cmu-detail__body p + p { margin-top: var(--cmu-s4); }

/* 리드 문단 — 원본 p.head. heading이 아니라 문단이지만 시각적으로는 부제 무게를 갖는다.
   .cmu-detail__body p 보다 구체성이 낮아 그냥 클래스만 쓰면 덮인다 → 부모를 붙여 올린다. */
.cmu-detail__body .cmu-detail__lead {
  font-size: var(--cmu-fs-sub);
  line-height: var(--cmu-lh-snug);
  letter-spacing: -0.005em;
  font-weight: 600;
  color: var(--cmu-ink);
}
.cmu-detail__body .cmu-detail__lead + p { margin-top: var(--cmu-s5); }
/* 본문 이미지 = 전폭 블록. 원본의 우측 플로트(img.pull-right)는 폐기했다 —
   글줄이 이미지 옆으로 흐르면 한 줄이 20자 밑으로 짜부라져 읽는 리듬이 끊긴다. */
.cmu-detail__figure { margin: var(--cmu-s6) 0; }
.cmu-detail__figure img { width: 100%; height: auto; }
.cmu-detail__cap { margin-top: var(--cmu-s2); font-size: var(--cmu-fs-sm); color: var(--cmu-muted); }

/* 본문 링크 */
/* 인라인 링크 — 밑줄 없이 브랜드 그린으로만 구분(2026-08-11).
   hover 에서 톤을 낮춰 반응을 준다. 밑줄이 유일한 단서가 아니게 되므로,
   본문 색(#1A1A1A)과 그린(#1B553C)의 대비가 링크 식별의 전부다. */
.cmu-link {
  color: var(--cmu-brand);
  transition: opacity var(--cmu-dur-fast) var(--cmu-ease);
}
.cmu-link:hover { opacity: var(--cmu-hover-fade); }

/* 영상 임베드 — 16:9 고정. aspect-ratio가 iframe 높이를 잡으므로 패딩 해킹 불필요 */
.cmu-embed { margin: var(--cmu-s5) 0 0; }
.cmu-embed iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--cmu-radius-sm); background: var(--cmu-ink);
}
.cmu-embed__cap {
  margin-top: var(--cmu-s2);
  font-size: var(--cmu-fs-sm); color: var(--cmu-muted);
}

/* ── 10. 공통 안내 아코디언 (상품 페이지 공통 컴포넌트) ───────────────────── */
/* 네이티브 <details>/<summary> — JS 없이 열림/닫힘·키보드 조작·JS 실패 시 전개가 전부 성립한다.
   상품 고유 정보가 아니라 상점 정책이라 모든 상품 페이지가 이 컴포넌트를 공유한다. */
.cmu-guide { margin-top: var(--cmu-s9); border-top: 1px solid var(--cmu-line-strong); }
.cmu-acc { border-bottom: 1px solid var(--cmu-line); }

.cmu-acc__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--cmu-s4);
  padding: var(--cmu-s4) 0;
  cursor: pointer;
  list-style: none;                                        /* Firefox 기본 삼각형 제거 */
  font-size: var(--cmu-fs-body); font-weight: 600; color: var(--cmu-body);
}
.cmu-acc__head::-webkit-details-marker { display: none; }  /* Safari·구 Chrome */
.cmu-acc__head::after {
  content: "+";
  font-size: 1.125rem; font-weight: 400; line-height: 1;
  color: var(--cmu-muted);
  transition: color var(--cmu-dur-fast) var(--cmu-ease);
}
.cmu-acc[open] .cmu-acc__head::after { content: "−"; color: var(--cmu-brand); }
.cmu-acc__head:hover::after { color: var(--cmu-brand); }
.cmu-acc__head:focus-visible { outline: 2px solid var(--cmu-brand); outline-offset: 2px; }

.cmu-acc__body {
  padding-bottom: var(--cmu-s5);
  font-size: var(--cmu-fs-sm); line-height: var(--cmu-lh-body); color: var(--cmu-muted);
}
.cmu-acc__body > * + * { margin-top: var(--cmu-s3); }
.cmu-acc__h {
  margin-top: var(--cmu-s4);
  font-size: var(--cmu-fs-sm); font-weight: 600; color: var(--cmu-body);
}
.cmu-acc__ul li { position: relative; padding-left: var(--cmu-s4); }
.cmu-acc__ul li + li { margin-top: var(--cmu-s2); }
.cmu-acc__ul li::before { content: "–"; position: absolute; left: 0; }
.cmu-acc__dl > div { display: flex; gap: var(--cmu-s4); }
.cmu-acc__dl > div + div { margin-top: var(--cmu-s2); }
.cmu-acc__dl dt { flex: 0 0 5.5rem; color: var(--cmu-body); }
.cmu-acc__caution { color: var(--cmu-body); }

/* ── 11. 페이지 푸터 ─────────────────────────────────────────────────────── */
/* .cmu-pdp 바깥의 전폭 밴드. body의 padding-left(레일 폭) 안쪽에 놓이므로
   고정 레일을 침범하지 않는다. 미디어 sticky가 풀린 뒤 드러난다. */
/* 패럴랙스 노출 — 푸터를 뷰포트 하단에 깔고 본문이 그 위를 덮으며 지나간다.
   .is-pinned 는 JS가 "푸터가 뷰포트에 들어간다"고 판단했을 때만 붙인다.
   fixed 푸터가 뷰포트보다 높으면 윗부분에 영영 도달할 수 없으므로, 그 경우엔
   클래스를 붙이지 않아 평범한 정적 푸터로 떨어진다(점진적 향상). */
.cmu-foot {
  /* 높이를 뷰포트에 고정한다 — 이러면 fixed 노출이 어떤 화면에서도 성립한다.
     (구 방식: 워드마크 비율 2:1이라 full-bleed 높이가 뷰포트를 넘겨 pin이 자주 무산됐다)
     svh = 모바일 주소창 접힘까지 반영한 실제 뷰포트 높이. */
  height: 100svh;
  display: flex; flex-direction: column;
  justify-content: space-between;   /* 워드마크 배너=상단 · 정보 블록=하단 */
  /* 좌우 패딩 없음 — 배너와 콘텐츠 컨테이너가 정확히 같은 폭(푸터 전폭)을 쓴다.
     하단 패딩 = 레일의 하단 패딩과 동일한 --cmu-s5.
     ⚠ 푸터도 레일도 뷰포트 바닥 기준으로 고정돼 있으므로, 하단 패딩을 같은 값으로 맞추면
     푸터 마지막 줄과 레일 카피라이트의 박스 하단이 같은 선에 떨어진다.
     두 텍스트가 --cmu-fs-2xs · --cmu-lh-body로 완전히 동일해져 베이스라인까지 정확히 맞는다. */
  padding: 0 0 var(--cmu-s5);
  /* 레일과 같은 크림 — 페이지 하단이 레일과 한 덩어리로 읽힌다.
     border-top 없음: 배경 전환 자체가 경계다. 흰색↔크림 사이에 회색 1px(--cmu-line)을
     남기면 두 면 어디와도 대비가 1.3:1 미만이라 이음매가 때 낀 선처럼 보인다. */
  background: var(--cmu-secondary);
  font-size: var(--cmu-fs-sm);
  color: var(--cmu-muted);
  overflow: hidden;              /* 워드마크 full-bleed 시 가로 스크롤 차단 */
}
.cmu-foot.is-pinned {
  position: fixed; left: var(--cmu-rail-w); right: 0; bottom: 0;
  z-index: 0;                    /* 본문(.cmu-pdp z-index:1) 아래에 깔린다 */
}
/* 본문이 푸터를 덮으려면 자기 배경을 가져야 한다(투명하면 푸터가 비친다).
   본문은 푸터보다 **앞**에 있어 형제 결합자(~)로는 잡히지 않는다 → body 클래스로 건다.
   셀렉터를 .cmu-pdp가 아니라 main으로 잡는 이유: 페이지마다 본문 클래스가 다르다
   (PDP=.cmu-pdp / Shop=.cmu-shop). main은 어느 페이지에도 하나뿐이라 새 페이지가
   생겨도 패럴랙스가 자동으로 따라온다. */
body.has-pinned-foot main {
  position: relative; z-index: 1;
  background: var(--cmu-page-bg);
  margin-bottom: var(--cmu-foot-h, 0px);   /* JS 실측값 — 본문이 지나갈 거리 */
}
/* 푸터 콘텐츠 컨테이너 — 메뉴(브랜드 컬러) 위, 사업자 정보(그레이) 아래.
   좌우 10px 여백. 푸터가 left:레일 / right:0 고정이라 콘텐츠가 레일 경계와
   뷰포트(또는 스크롤바) 가장자리에 그대로 닿는다. 패딩을 .cmu-foot 이 아니라
   여기에 거는 이유는 워드마크 배너의 full-bleed를 깨지 않기 위해서다
   — 배너는 가장자리까지, 텍스트만 10px 안쪽. */
.cmu-foot__inner {
  display: flex; flex-direction: column; gap: var(--cmu-s5);
  padding: 0 10px;
}

/* 메뉴 — 전폭 균등 정렬. 첫·마지막 항목이 좌우 끝에 닿아 워드마크 배너와 폭을 공유한다 */
.cmu-foot__menu ul {
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--cmu-s3) var(--cmu-s5);
}
.cmu-foot__menu a {
  color: var(--cmu-brand);
  font-size: var(--cmu-fs-lead); font-weight: 600;
  transition: opacity var(--cmu-dur-fast) var(--cmu-ease);
}
.cmu-foot__menu a:hover { opacity: var(--cmu-hover-fade); }

/* 한 줄 양쪽 정렬 — 메뉴와 같은 space-between이라 좌우 끝이 배너·메뉴와 정확히 맞물린다.
   좁아지면 두 덩어리가 각각 줄바꿈되며 자연스럽게 2줄로 떨어진다. */
/* 정보 행 — 좌: 사업자·연락처 2줄 / 우: 약관·정책 링크.
   align-items:flex-end 가 핵심이다. 좌측이 2줄, 우측이 1줄이라 flex-start면 우측이
   위로 붙는다. flex-end로 맞춰야 **양쪽의 마지막 줄**이 같은 baseline에 서고,
   그 baseline이 곧 레일 카피라이트와 맞물리는 선이 된다. */
.cmu-foot__info {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-end;
  gap: var(--cmu-s3) var(--cmu-s6);
  /* 레일 카피라이트와 완전히 동일한 크기·행간. 둘의 하단 패딩도 --cmu-s5로 같으므로
     박스 하단뿐 아니라 베이스라인까지 정확히 같은 선에 떨어진다. */
  font-size: var(--cmu-fs-2xs); line-height: var(--cmu-lh-body);
  color: var(--cmu-muted);                     /* 정보 행 전체 그레이 통일 */
}

/* 약관·정책 — 중점(·)은 CSS로. 목록 시맨틱을 유지하면서 구분자만 만든다. */
.cmu-foot__policy ul { display: flex; flex-wrap: wrap; }
.cmu-foot__policy li + li::before {
  content: "·"; padding: 0 var(--cmu-s2); color: var(--cmu-line);
}
.cmu-foot__policy a { transition: color var(--cmu-dur-fast) var(--cmu-ease); }
.cmu-foot__policy a:hover { color: var(--cmu-body); }

/* 빅 워드마크 배너 — 푸터 상단, 좌우 full-bleed.
   푸터 자체에 좌우 패딩이 없으므로 음수 마진 없이 그대로 가장자리에 닿는다.
   비율 751:374(≈2:1)이라 full-bleed 높이 = 폭의 절반. 그 높이가 남는 공간을 넘으면
   max-height가 걸려 아트워크가 축소된다(SVG 기본 preserveAspectRatio=meet → 좌우 여백).
   min-height:0 이 없으면 flex 자식이 콘텐츠 높이 밑으로 줄지 않아 하단 정보가 밀려난다. */
.cmu-foot__mark {
  flex: 0 1 auto; min-height: 0;
  line-height: 0;                 /* inline 이미지 아래 여백 제거 */
  color: var(--cmu-brand);        /* SVG fill=currentColor */
}
.cmu-foot__mark svg { display: block; width: 100%; height: auto; max-height: 100%; }

/* ── 10. 반응형 ──────────────────────────────────────────────────────────── */
/* 레일이 고정 사이드바로 버티는 하한 = 1024px. 이하는 상단 바 + 단일 컬럼 */
@media (max-width: 1024px) {
  :root { --cmu-rail-w: 0px; }
  body { padding-left: 0; padding-top: 56px; }

  .cmu-rail {
    inset: 0 0 auto 0; width: 100%; height: 56px;
    flex-direction: row; align-items: center; gap: var(--cmu-s4);
    padding: 0 var(--cmu-s4);
  }
  .cmu-rail__logo { --cmu-logo-w: 26px; margin: 0; }
  .cmu-rail__social { flex-direction: row; align-items: center; }
  .cmu-rail__social a { --cmu-social-w: 26px; }
  .cmu-rail__foot { margin: 0 0 0 auto; flex-direction: row; gap: var(--cmu-s4); }
  .cmu-rail__nav { display: flex; gap: var(--cmu-s3); }
  /* 상단 바에서는 유틸 묶음을 감추므로 구분점도 함께 감춘다(홀로 남으면 의미 없는 점이 된다) */
  .cmu-rail__nav--util, .cmu-rail__sep { display: none; }

  .cmu-pdp { grid-template-columns: 1fr; }
  .cmu-pdp__media { position: static; height: 62vh; }
}

@media (max-width: 640px) {
  .cmu-spec__row, .cmu-field--inline {
    grid-template-columns: 1fr; gap: var(--cmu-s2); align-items: start;
  }
  .cmu-spec__val, .cmu-choices { text-align: left; justify-content: flex-start; }
  .cmu-scale { justify-content: flex-start; }
  .cmu-buy { flex-direction: column; align-items: stretch; }
  .cmu-btn { width: 100%; }
  /* 줄바꿈되면 우측 밀어내기가 어색해진다 — 좌측 정렬로 되돌린다 */
  .cmu-foot__copy { margin-left: 0; }
}