/* ============================================================
   색상 미리보기 플로팅 팝업 (2026-09-16 · 4차)

   구성
     · 펼침: 카드를 색상 미리보기 **영상이 꽉 채우고**, 아래→위로 투명해지는
             그라데이션 위에 문구(하단 정렬). 우상단에 **반투명 × 버튼**.
             이 상태에서는 **팔레트 버튼이 사라진다.**
     · 접힘: **말풍선(가운데 정렬) + 간격 + 팔레트 버튼**

   4차 변경(사장님 지시)
     1) 펼침 상태에서 팔레트 버튼 숨김 → 우상단 반투명 × 로 내린다
     2) `색상 조합하기` 버튼 제거, 남은 문구를 하단으로 내림
        (카드 전체가 색상 페이지로 가는 링크라 버튼이 없어도 이동된다)
     3) 접힘 말풍선: 문구 가운데 정렬 · 가로 폭 축소 · 팔레트와 간격 띄움

   좌표 기준
     · `.ccue`(고정) 자체가 **팔레트 버튼 크기**다. 카드/말풍선은 여기에 absolute로 매달려
       펼침↔접힘을 오가도 팔레트 버튼이 화면에서 1px도 움직이지 않는다.

   · 마크업은 assets/colorcue.js 가 만든다(페이지마다 복제하지 않기 위해).
   · dc-runtime(EL300/EL350/EL600)에서도 body 직속이라 React 렌더에 관여하지 않는다.
   ============================================================ */

.ccue {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 52px;          /* = 팔레트 버튼 크기. 카드/말풍선의 기준점 */
  height: 52px;
  /* gnav(9000)·모바일메뉴(8998)보다 낮고 본문보다 위.
     secnav 점(8000, right:16px top:50%)과 세로로 겹치지 않는다. */
  z-index: 8500;
  font-family: 'Inter Tight', 'Pretendard', 'SF Pro Text', system-ui, -apple-system, sans-serif;
}

/* ── 팔레트 버튼 — 접힘 상태에서만 보인다 ─────────────────── */
.ccue-fab {
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  border: 0; padding: 0;
  border-radius: 9999px; cursor: pointer;
  background: #0066cc; color: #ffffff;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0, 102, 204, 0.30), 0 10px 26px rgba(29, 29, 31, 0.28);
  transition: opacity .2s cubic-bezier(.23, 1, .32, 1),
              transform .2s cubic-bezier(.23, 1, .32, 1);
}
.ccue-fab:hover { transform: translateY(-2px); }
.ccue-fab:active { transform: scale(0.96); }
.ccue-fab svg { width: 25px; height: 25px; }

/* ── 카드(펼침) — 영상이 꽉 찬다 ───────────────────────────── */
.ccue-card {
  position: absolute;
  right: -8px;
  bottom: -8px;
  z-index: 3;                     /* 팔레트 버튼보다 위 (펼침 때 버튼은 숨는다) */
  width: min(340px, calc(100vw - 40px));
  aspect-ratio: 16 / 11;          /* 영상(1.84:1)을 cover로 채울 박스 */
  border-radius: 16px;
  overflow: hidden;               /* 영상·그라데이션을 라운드로 자른다 */
  background: #1d1d1f;            /* 영상 로드 전 빈 화면 방지 */
  box-shadow: 0 1px 2px rgba(29, 29, 31, 0.10), 0 16px 40px rgba(29, 29, 31, 0.22);
  transform-origin: bottom right; /* 팔레트 버튼 자리에서 자라나는 느낌 */
  transition: opacity .22s cubic-bezier(.23, 1, .32, 1),
              transform .22s cubic-bezier(.23, 1, .32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .ccue-card:hover { box-shadow: 0 2px 4px rgba(29, 29, 31, 0.12), 0 22px 52px rgba(29, 29, 31, 0.28); }
}

/* 카드 전체를 덮는 링크 — `색상 조합하기` 버튼을 없앴으므로 카드가 곧 버튼이다.
   ⚠️ × 버튼은 이 <a> **바깥**에 둔다. 안에 넣으면 ×를 눌러도 링크가 같이 발동한다. */
.ccue-link { position: absolute; inset: 0; display: block; text-decoration: none; }

/* 영상 — 박스를 꽉 채운다(비율 유지, 넘치는 부분만 잘림) */
.ccue-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* 아래에서 위로 투명해지는 그라데이션 — 문구 가독성 확보 */
.ccue-veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.62) 26%,
    rgba(0, 0, 0, 0.28) 55%,
    rgba(0, 0, 0, 0.00) 82%);
}

/* ── 그라데이션 위 문구 — 하단 정렬 ────────────────────────── */
.ccue-copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 18px 18px;           /* 팔레트 버튼이 펼침 때 숨으므로 우측 여유가 필요 없다 */
  color: #ffffff;
  line-height: 1.45;
}
/* ⚠️ <a> 안이라 마크업을 span으로 썼다 → display:block 을 꼭 줘야 줄이 나뉜다.
   (안 주면 "COLOR PREVIEW색상 미리보기제품 색상을…"로 한 줄에 붙는다) */
.ccue-eye, .ccue-title, .ccue-sub { display: block; }
.ccue-eye {
  margin: 0 0 3px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.82);
}
.ccue-title {
  margin: 0 0 4px;
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
.ccue-sub {
  margin: 0;
  font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.88);
}

/* ── 우상단 반투명 × — 이걸로 팝업을 내린다 ────────────────── */
.ccue-close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 4;                     /* 링크 위 */
  width: 30px; height: 30px;
  border: 0; padding: 0; cursor: pointer;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.92);
  display: grid; place-items: center;
  transition: background-color .16s ease, transform .16s cubic-bezier(.23, 1, .32, 1);
}
.ccue-close:hover { background: rgba(0, 0, 0, 0.52); color: #ffffff; }
.ccue-close:active { transform: scale(0.94); }
.ccue-close svg { width: 13px; height: 13px; }

/* ── 말풍선(접힘) — 가운데 정렬 · 폭 축소 · 팔레트와 간격 ──── */
.ccue-pill {
  position: absolute;
  right: 62px;          /* 팔레트 버튼(0~52) 오른쪽 끝에서 10px 띄운다 */
  bottom: 6px;          /* 팔레트 버튼과 세로 중앙 정렬 */
  z-index: 1;
  border: 0; cursor: pointer;
  padding: 10px 15px;   /* 좌우 대칭 — 폭이 줄어든다(전엔 우측 30px로 버튼에 물려 있었다) */
  border-radius: 9999px;
  white-space: nowrap;
  text-align: center;   /* 말풍선 안에서 가운데 정렬 */
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 2px rgba(29, 29, 31, 0.08), 0 8px 22px rgba(29, 29, 31, 0.16);
  color: #1d1d1f; font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em;
  transform-origin: right center;
  transition: opacity .22s cubic-bezier(.23, 1, .32, 1),
              transform .22s cubic-bezier(.23, 1, .32, 1);
}

/* ── 상태 전환 ─────────────────────────────────────────────
   기본(펼침) = 카드 보임 / 말풍선·팔레트 숨김.  .is-collapsed = 그 반대.
   숨기는 쪽은 visibility로 빼서 탭 포커스도 가지 않게 한다. */
.ccue-pill { opacity: 0; transform: translateX(8px) scale(.96); visibility: hidden; }
.ccue-fab  { opacity: 0; transform: scale(.9); visibility: hidden; }

.ccue.is-collapsed .ccue-card { opacity: 0; transform: translateY(8px) scale(.96); visibility: hidden; }
.ccue.is-collapsed .ccue-pill { opacity: 1; transform: none; visibility: visible; }
.ccue.is-collapsed .ccue-fab  { opacity: 1; transform: none; visibility: visible; }

/* ── 최초 등장 — scale(0)에서 튀어나오지 않게 0.96에서 시작 ── */
.ccue.is-boot .ccue-card { opacity: 0; transform: translateY(10px) scale(.97); }
.ccue.is-boot .ccue-pill,
.ccue.is-boot .ccue-fab  { opacity: 0; }

/* ── 모바일 ───────────────────────────────────────────────── */
@media (max-width: 833px) {
  .ccue { right: 14px; bottom: 14px; width: 46px; height: 46px; }
  .ccue-card { width: min(272px, calc(100vw - 28px)); right: -6px; bottom: -6px; }
  .ccue-copy { padding: 0 14px 14px; }
  .ccue-title { font-size: 19px; }
  .ccue-sub { font-size: 12px; }
  .ccue-fab svg { width: 22px; height: 22px; }
  .ccue-close { top: 8px; right: 8px; width: 28px; height: 28px; }
  .ccue-pill { right: 55px; bottom: 4px; padding: 9px 13px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .ccue-card, .ccue-pill, .ccue-fab, .ccue-close { transition: none; }
  .ccue.is-boot .ccue-card { opacity: 1; transform: none; }
}