/* 기준: design.md. 기본값이 Desktop(1024 이상), 맨 아래 미디어 쿼리가 Mobile(1024 미만)입니다. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--label-normal);
  font-family: var(--font);
  font-size: 16px;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* 그레인: 레퍼런스(rachelchen.tech) 값 그대로. 화면 전체에 고정된 노이즈를 곱하기로 얹습니다. Figma에는 없는 요소 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 240px;
}
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; font: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
picture { display: contents; }
source { display: none; }

/* 화면별 줄바꿈: br.d는 Desktop 전용, br.m은 Mobile 전용 */
br.m { display: none; }
.only-m { display: none; }

/* ---------- 레이아웃 ---------- */
.layout { display: flex; align-items: flex-start; }
/* 콘텐츠 880 (섹션 패딩 20 포함 920). 오른쪽에 메뉴 폭(260)만큼 비워 화면 가운데에 둡니다.
   창이 1440보다 좁으면 오른쪽 여백부터 줄어듭니다. */
.main { flex: 1 1 0; min-width: 0; padding-right: clamp(0px, calc(100vw - 1180px), 260px); }
.main-inner { max-width: 920px; margin: 0 auto; }
.content { padding: 240px 0 160px; }

/* ---------- GNB ---------- */
.gnb {
  position: sticky;
  top: 0;
  flex: none;
  width: 260px;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
  background: var(--white);
  z-index: 10;
}
.gnb::-webkit-scrollbar { display: none; }
.logo {
  display: block;
  height: 64px;
  padding: 20px 44px;
  color: var(--label-normal);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}
.logo:hover { color: var(--primary-normal); }
/* 메뉴 위 간격: 화면이 충분히 높으면 Figma대로 176(메뉴 시작 y240).
   화면이 낮으면 메뉴 아래에 120이 남도록 위 간격을 줄입니다(최소 40).
   184 = 로고 64 + 아래 여백 120, --menu-h = 메뉴 높이(항목 46 × 개수) */
.gnb-menu { --menu-h: 92px; margin-top: clamp(40px, calc(100vh - 184px - var(--menu-h)), 176px); }
.gnb-menu.only-d { --menu-h: 368px; }
.gnb-menu a {
  position: relative;
  display: block;
  height: 46px;
  padding: 12px 44px;
  color: var(--gray8);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
}
.gnb-menu a:hover { color: var(--primary-normal); }
.gnb-menu a.active { color: var(--primary-normal); }
.gnb-menu a.active::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 21px;
  width: 4px;
  height: 4px;
  background: var(--primary-normal);
}

/* ---------- Footer ---------- */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 24px 20px;
  box-shadow: inset 0 1px 0 var(--line-alternative);
}
.footer-copy { color: var(--label-alternative); font-size: 15px; line-height: 22px; }
.footer-email {
  padding: 0;
  border: 0;
  background: none;
  color: var(--label-neutral);
  font: inherit;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}

/* ---------- 커서 ---------- */
html.has-cursor, html.has-cursor * { cursor: none !important; }
/* .cursor는 마우스 위치(크기 0). 네모는 그 점을 가운데로 놓습니다.
   기본 12×12 (Figma cursor/default 178:5652), 링크·버튼 위 8×8 (cursor/hover 129:15400) */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  display: none;
  pointer-events: none;
  z-index: 1000;
}
html.has-cursor .cursor.on { display: block; }
.cursor-box {
  position: absolute;
  left: -6px;
  top: -6px;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--primary-normal);
  transition: width .15s ease, height .15s ease, left .15s ease, top .15s ease;
}
.cursor.is-hover .cursor-box { left: -4px; top: -4px; width: 8px; height: 8px; }
/* 글자: 호버 네모 오른쪽 끝에서 8 (가운데에서 12), 줄 가운데를 네모 가운데에 */
.cursor-label {
  position: absolute;
  left: 12px;
  top: -11px;
  color: var(--primary-normal);
  font-size: 15px;
  line-height: 22px;
  white-space: nowrap;
}
.cursor.flip .cursor-label { left: auto; right: 12px; }

/* ---------- Home ---------- */
.home-stack { display: flex; flex-direction: column; gap: 120px; }
.home-hero { padding: 0 20px; color: var(--label-neutral); }
.home-hello { font-size: 28px; line-height: 38px; }
.home-title { margin-top: 20px; font-weight: 500; font-size: 36px; line-height: 48px; }
.home-desc { margin-top: 12px; color: var(--label-alternative); font-size: 16px; line-height: 26px; }
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 180px 20px;
  padding: 0 20px 60px;
}
/* Figma Home Desktop: 카드 줄(Section_project) 높이 422.67, 카드 362.67이라 줄마다 아래 60이 비어 있습니다.
   그 빈 공간을 줄 간격 120+60, 마지막 줄 아래 60으로 옮겼습니다. */
.card { display: block; min-width: 0; }
.card-thumb { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 .5px #e5e5e5; } /* Figma Thumbnail 테두리: 바깥쪽 0.5 #E5E5E5 */
.card-thumb video { width: 100%; height: 100%; object-fit: cover; }
.card-text { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; padding: 0 6px; }
.card-title { display: flex; flex-wrap: wrap; gap: 6px; font-size: 15px; line-height: 22px; }
.card-title b { color: var(--label-normal); font-weight: 500; }
.card-title span { color: var(--label-alternative); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
  padding: 3px 6px;
  border-radius: 12px;
  background: var(--bg-alternative);
  color: var(--primary-normal);
  font-size: 15px;
  line-height: 22px;
}

/* ---------- About ---------- */
/* Figma About Desktop: Container(76:1008) 높이가 2243.64로 고정돼 있어 콘텐츠 아래가 더 비어 있습니다. 그대로 옮깁니다. */
.about-content { min-height: 2243.64px; padding: 240px 20px 160px; display: flex; flex-direction: column; gap: 120px; }
.about-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 20px;
  color: var(--label-neutral);
  line-height: 26px;
}
.exp { display: flex; flex-direction: column; gap: 42px; }
.exp-sec { display: flex; flex-direction: column; gap: 12px; padding: 0 20px; }
.exp-head { display: flex; gap: 4px; color: var(--label-alternative); line-height: 24px; }
.exp-head b { font-weight: 700; }
/* 날짜(왼쪽) → 42 → 내용. Figma 76:1015 (Mobile 76:1150) */
.exp-list { display: flex; flex-direction: column; gap: 32px; }
.add-list { gap: 12px; }
.exp-item { display: flex; gap: 42px; }
.exp-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.exp-info { display: flex; flex-direction: column; gap: 4px; }
.exp-role { color: var(--label-normal); font-weight: 500; line-height: 24px; }
.exp-company { color: var(--label-normal); line-height: 24px; }
.exp-desc { color: var(--label-alternative); line-height: 26px; }
.exp-work { color: var(--label-neutral); line-height: 26px; }
.exp-date { flex: none; color: var(--label-neutral); line-height: 24px; white-space: nowrap; }
.add-body { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.add-name { color: var(--label-alternative); line-height: 26px; }
.add-role { color: var(--label-normal); line-height: 26px; }
.add-year { flex: none; color: var(--label-alternative); line-height: 26px; }
.feed { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 120px; }
.feed-item { min-width: 0; padding: 0 20px; }
.feed-label { height: 26px; margin-bottom: 12px; color: var(--label-alternative); line-height: 26px; }
.feed-img { width: 100%; overflow: hidden; }
.feed-img img { width: 100%; height: 100%; object-fit: cover; }
.feed-img--tall { aspect-ratio: 180 / 223.54; }
.feed-img--short { aspect-ratio: 180 / 111.63; }

/* ---------- Project: 공통 ---------- */
.stack { display: flex; flex-direction: column; gap: 120px; }
.sec { padding: 0 20px; scroll-margin-top: 64px; }
/* 글 머리는 최대 690 (Figma Content 730 - 패딩 20×2) */
.sec-head { display: flex; flex-direction: column; gap: 24px; max-width: 690px; margin-bottom: 64px; }
.eyebrow { color: var(--label-alternative); font-size: 18px; line-height: 28px; }
.sec-title { color: var(--label-neutral); font-size: 28px; line-height: 38px; }
.sec-body { color: var(--label-neutral); font-size: 16px; line-height: 26px; }
.panel { background: var(--bg-alternative); border-radius: 10px; }
.arrow {
  flex: none;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.t20 { color: var(--label-normal); font-weight: 500; font-size: 18px; line-height: 28px; }
/* Problem Definition, UT 흐름 카드 제목: Desktop 16/24, Mobile 18/28 */
.t20.t-sm { font-size: 16px; line-height: 24px; }
.t16 { color: var(--label-alternative); font-size: 16px; line-height: 24px; }
.txt { display: flex; flex-direction: column; gap: 12px; }
.framed { position: relative; overflow: hidden; border-radius: 12px; }
.framed::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line-alternative);
  border-radius: inherit;
  pointer-events: none;
}
.framed video, .framed img { width: 100%; height: 100%; object-fit: cover; }

/* Head, Hero, Detail, Intro */
.head { text-align: center; }
.head-date { color: var(--label-alternative); font-size: 15px; line-height: 22px; }
.head-title { margin-top: 20px; color: var(--label-neutral); font-weight: 500; font-size: 36px; line-height: 48px; }
.head-sub { max-width: 650px; margin: 12px auto 0; color: var(--label-alternative); font-size: 18px; line-height: 28px; }
.hero { aspect-ratio: 880 / 586.67; }
.detail { margin-top: 64px; }
.detail-title { color: var(--label-alternative); font-size: 24px; line-height: 32px; }
.detail-list { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 0; }
.detail-row { display: flex; gap: 12px; color: var(--label-neutral); font-weight: 500; line-height: 24px; }
.detail-row dt { flex: none; width: 80px; }
.detail-row dd { margin: 0; }
.intro-head { text-align: center; margin-bottom: 64px; }
.intro-title { color: var(--label-neutral); font-weight: 500; font-size: 28px; line-height: 38px; }
.intro-sub { max-width: 650px; margin: 12px auto 0; color: var(--label-alternative); font-size: 16px; line-height: 26px; }
.intro-img { aspect-ratio: 880 / 540; }

/* Overview */
.overview-panel { display: flex; flex-direction: column; gap: 32px; padding: 42px 32px; }
.panel-label { color: var(--label-alternative); font-size: 16px; line-height: 24px; }
.i-overview { width: 610px; aspect-ratio: 610 / 74; margin: 0 auto; }

/* Problem */
.problem-cols { display: flex; gap: 24px; }
.problem-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.problem-panel { display: flex; flex-direction: column; gap: 32px; padding: 32px; }
.problem-img { display: flex; align-items: center; justify-content: center; height: 183px; }
.i-problem1 { width: 100%; aspect-ratio: 364 / 73.65; }
.i-problem2 { width: 100%; aspect-ratio: 364 / 175.41; }
.problem-desc { display: flex; flex-direction: column; gap: 6px; padding: 0 6px; }
.problem-desc b { color: var(--label-normal); font-weight: 500; font-size: 16px; line-height: 24px; }
.problem-desc p { color: var(--label-alternative); font-size: 16px; line-height: 26px; }

/* User Research */
.research { display: flex; flex-direction: column; gap: 24px; }
.research-top { display: flex; gap: 32px; padding: 32px; }
.research-top .q { flex: 406.67 1 0; min-width: 0; }
.research-cols { display: flex; gap: 24px; }
.research-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; padding: 32px; }
.q { display: flex; flex-direction: column; gap: 12px; }
.q-label { color: var(--label-alternative); font-size: 16px; line-height: 24px; }
.q-text { color: var(--label-normal); font-weight: 500; font-size: 16px; line-height: 24px; }
/* 한 줄 질문도 옆 카드(두 줄)와 이미지 위치를 맞춤 */
.q-text--tall { min-height: 48px; }
.i-r1 { flex: 377.33 1 0; min-width: 0; aspect-ratio: 377.33 / 114.36; align-self: flex-start; }
.i-r2 { width: 280px; max-width: 100%; aspect-ratio: 280 / 141; margin-left: auto; } /* Figma 162:5218 오른쪽 정렬 */

/* Problem Definition */
.pd { display: flex; flex-direction: column; gap: 24px; }
.pd-row { display: flex; gap: 24px; }
.pd-card { flex: 1 1 0; min-width: 0; padding: 32px; border-radius: 10px; background: var(--bg-alternative); }
.pd-card--to { background: var(--pink-card); }

/* Design Strategy */
.strategy { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.pill {
  padding: 24px 32px;
  border-radius: 10px;
  background: var(--bg-alternative);
  color: var(--label-normal);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}
.strategy-panel { width: 100%; padding: 62px 120px; }
.i-strategy { width: 100%; aspect-ratio: 640 / 235.39; }

/* UT */
.ut-meta { color: var(--label-alternative); font-size: 15px; line-height: 22px; white-space: pre-wrap; }
.ut-flow { display: flex; gap: 24px; margin-top: 24px; }
.ut-card { flex: 1 1 0; min-width: 0; padding: 24px; border-radius: 10px; background: var(--bg-alternative); }
.ut-issues { margin-top: 64px; }
.ut-issues-title { color: var(--accent); font-weight: 500; font-size: 16px; line-height: 24px; }
.ut-issue-row { display: flex; gap: 24px; }
.ut-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding: 32px 0; border-radius: 24px; background: var(--white); }
.ut-list { display: flex; flex-direction: column; gap: 12px; }
.ut-item { display: flex; flex-direction: column; gap: 8px; }
.ut-item b { color: var(--label-normal); font-weight: 500; font-size: 16px; line-height: 24px; }
.ut-item p { color: var(--label-alternative); font-size: 16px; line-height: 26px; }
.ut-apply { display: flex; align-items: flex-start; gap: 8px; }
.ut-apply p { flex: 1 1 0; min-width: 0; }
.ut-apply .ut-tag { flex: none; color: var(--chip-text); font-weight: 500; font-size: 16px; line-height: 26px; white-space: nowrap; }

/* Solution 1, 2: 영상 560 + 간격 40 + 글 280 (사용자 결정, Figma는 480 + 42 + 358) */
.sol-row { display: flex; align-items: flex-end; gap: 40px; }
.sol-video {
  position: relative;
  flex: 560 1 0;
  min-width: 0;
  aspect-ratio: 660 / 613;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg-alternative);
}
.sol-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sol-video::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line-video);
  border-radius: inherit;
  pointer-events: none;
}
.sol-text { flex: 280 1 0; min-width: 0; }

/* Solution 3 */
.compare { display: flex; flex-direction: column; gap: 42px; }
.compare-label { padding: 0 6px; font-weight: 500; font-size: 16px; line-height: 24px; }
.compare-label--as { color: var(--label-alternative); }
.compare-label--to { color: var(--accent); }
.compare-panel { margin-top: 20px; padding: 42px 24px; }
.asis-pair { display: flex; align-items: flex-start; gap: 12px; }
.asis-pair img { min-width: 0; border-radius: 4px; }
.i-asis1 { flex: 498 1 0; aspect-ratio: 498 / 385.22; }
.i-asis2 { flex: 322 1 0; aspect-ratio: 322 / 297; }
.tobe-list { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.tobe-row { display: grid; grid-template-columns: minmax(0, 519fr) minmax(0, 319fr); align-items: end; gap: 42px; }
.tobe-panel { padding: 42px 24px; }
.i-tobe1 { width: 100%; aspect-ratio: 471 / 202.92; } /* Figma 172:5623, 모서리 0 (이미지 자체에 둥근 모서리) */
.i-tobe2 { width: 303px; max-width: 100%; aspect-ratio: 303 / 285; margin: 0 auto; }

/* Outcome */
.outcome-panel {
  display: flex;
  flex-direction: column;
  gap: 42px;
  margin: 0 -20px;
  padding: 24px 20px;
  border-radius: 10px;
  background: var(--dark-panel);
}
.i-out1 { width: 247px; aspect-ratio: 247 / 135; }
.i-out2 { width: 331px; aspect-ratio: 331 / 243; margin-left: auto; }

/* ---------- Mobile (1024 미만) ---------- */
@media (max-width: 1023.98px) {
  br.d { display: none; }
  br.m { display: inline; }
  .only-d { display: none !important; }
  .only-m { display: block; }

  .layout { display: block; }
  .main-inner { max-width: none; }
  .content { padding: 24px 0 32px; }

  .gnb {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
    padding: 14px 20px;
    overflow: visible;
  }
  .logo { height: auto; padding: 0; }
  .gnb-menu { display: flex; gap: 24px; margin-top: 0; }
  .gnb-menu a { height: auto; padding: 0; }
  .gnb-menu a.active::before { display: none; }


  .main { padding-right: 0; }

  /* Home */
  .home-stack { gap: 48px; }
  .home-hello { color: var(--label-normal); font-size: 24px; line-height: 32px; }
  .home-title { font-size: 32px; line-height: 44px; }
  .home-desc { font-size: 15px; line-height: 24px; }
  .cards { grid-template-columns: 1fr; gap: 48px; padding-bottom: 0; }

  /* About */
  .about-content { min-height: 0; padding: 24px 0 32px; }
  .exp { gap: 24px; }
  .add-body { flex-direction: column; align-items: flex-start; }
  .feed { grid-template-columns: 1fr; row-gap: 12px; }
  .feed-img--tall { aspect-ratio: 350 / 425.65; }
  .feed-img--short { aspect-ratio: 350 / 217.07; }

  /* Project 공통 */
  .sec-title { font-size: 24px; line-height: 32px; }
  .t20.t-sm { font-size: 18px; line-height: 28px; }

  .head-title { font-size: 32px; line-height: 44px; }
  .hero { aspect-ratio: 350 / 234; }
  .detail { margin-top: 42px; }
  .detail-title { font-size: 18px; line-height: 28px; }
  .detail-row { flex-direction: column; }
  .detail-row dt { width: auto; }
  .intro-title { font-size: 24px; line-height: 32px; }
  .intro-sub { font-size: 18px; line-height: 28px; }
  .intro-img { aspect-ratio: 350 / 233.333; }

  .overview-panel { gap: 24px; padding: 32px; }
  .overview-panel .panel-label { font-size: 15px; line-height: 22px; }
  .i-overview { width: 100%; aspect-ratio: 286 / 34.813; }

  .problem-cols { flex-direction: column; gap: 32px; }
  .problem-col { flex: none; }
  .problem-col .problem-desc { order: -1; }
  .problem-panel .panel-label { font-size: 15px; }
  .problem-img { height: auto; }
  .i-problem1 { aspect-ratio: 286 / 57.871; }
  .i-problem2 { aspect-ratio: 286 / 137.826; }

  .research-top { flex-direction: column; }
  .research-top .q { flex: none; }
  .research-cols { flex-direction: column; }
  .research-col { flex: none; }
  .q-label { font-size: 15px; }
  .q-text { color: #000; font-size: 18px; line-height: 28px; }
  .q-text--tall { min-height: 64px; } /* Figma 75:9139 높이 64 */
  .i-r1 { flex: none; width: 100%; aspect-ratio: 286 / 86.678; }
  .i-r2 { width: 100%; aspect-ratio: 286 / 144.059; }

  .pd { gap: 32px; }
  .pd-row { flex-direction: column; gap: 12px; }
  .pd-card { flex: none; }
  .arrow img { transform: rotate(90deg); }

  .strategy-panel { padding: 42px 24px; }
  .pill { padding: 12px 32px; font-size: 15px; line-height: 22px; }
  .i-strategy { aspect-ratio: 302 / 111.176; }

  .ut-flow { flex-direction: column; }
  .ut-card { flex: none; padding: 32px; }
  .ut-issue-row { flex-direction: column; gap: 0; }
  .ut-apply { flex-direction: column; }
  .ut-apply p { flex: none; } /* Figma 166:5508: 태그 위, 설명 아래 (간격 8) */
  .ut-col { flex: none; }

  .sol-row { flex-direction: column; align-items: stretch; gap: 42px; }
  .sol-row--20 { gap: 20px; }
  .sol-video { flex: none; aspect-ratio: 350 / 320; }
  .sol-text { flex: none; }

  .compare-label { font-size: 15px; line-height: 22px; }
  .i-asis1 { flex: 170 1 0; aspect-ratio: 170 / 132; }
  .i-asis2 { flex: 120 1 0; aspect-ratio: 120 / 110.6; }
  .tobe-list { gap: 42px; }
  .tobe-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tobe-text .t20 { font-size: 16px; line-height: 24px; }
  /* TO-BE 위: Mobile도 Desktop과 같은 이미지 (사용자 결정, Figma Mobile 76:485는 이전 이미지) */
  .i-tobe2 { width: 192px; aspect-ratio: 192 / 180; }

  .outcome-panel { border-radius: 0; }
  .i-out1 { width: 187px; aspect-ratio: 187 / 102; }
  .i-out2 { width: 210px; aspect-ratio: 210 / 154; }
}

/* 영상 일시정지·다시보기 버튼 (쿠폰 Solution 1·2). Figma에 없음: rachelchen.tech 레퍼런스 값 */
.vc {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity .2s;
}
.sol-video:hover .vc, .vc:focus-within { opacity: 1; }
@media (hover: none) { .vc { opacity: 1; } } /* 터치 기기는 hover가 없어 항상 보임 */
.vc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color .2s;
}
.vc-btn:hover { background: rgba(0, 0, 0, .9); }
.vc-btn svg { display: block; }
.vc-play { display: none; }
.vc-toggle.is-paused .vc-pause { display: none; }
.vc-toggle.is-paused .vc-play { display: inline; }