:root {
  color-scheme: light;
  --bg: #fbf9ff;
  --panel: #ffffff;
  --panel-2: #f6f3ff;
  --text: #17142b;
  --muted: #6f6d83;
  --line: rgba(52, 44, 91, 0.12);
  --pink: #ff2bd6;
  --purple: #7b4dff;
  --blue: #2f7bff;
  --cyan: #23f2ff;
  --red: #ff1738;
  --lime: #d9ff3f;
  --yellow: #ffe500;
  --green: #03e164;
  --radius: 28px;
  --shell: 1180px;
  --shadow: 0 24px 80px rgba(82, 65, 145, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  background: var(--bg);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 6%, rgba(255, 163, 211, 0.2), transparent 25%),
    radial-gradient(circle at 92% 12%, rgba(147, 207, 255, 0.2), transparent 24%),
    var(--bg);
  color: var(--text);
  font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", sans-serif;
  word-break: keep-all;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* 모바일에서만 살아나는 줄바꿈. 데스크톱에선 숨고 앞의 공백이 대신 붙는다. */
.br-mobile {
  display: none;
}

/* 눈에는 안 보이지만 스크린리더는 읽는다. display:none이나 visibility:hidden이면 낭독도 안 된다.
   제품 섹션 타이틀이 전부 이미지라, 이게 없으면 스크린리더가 가격표 20장을 통째로 건너뛴다. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.shell {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 48px), var(--shell));
  margin: 0 auto;
}

.top-glow {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--pink), var(--purple), var(--cyan), var(--red));
  box-shadow: 0 0 18px var(--purple);
}

.site-header {
  position: sticky;
  z-index: 90;
  top: 0;
  left: 0;
  display: grid;
  width: 100%;
  height: 78px;
  grid-template-columns: 185px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 0 max(24px, calc((100% - var(--shell)) / 2));
  border-bottom: 1px solid rgba(78, 60, 129, 0.09);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 28px rgba(77, 56, 137, 0.08);
  color: var(--text);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  height: 62px;
  align-items: center;
}

.brand-logo {
  width: 164px;
  height: 62px;
  object-fit: contain;
  object-position: left center;
}

.footer-logo {
  width: 220px;
  height: auto;
  object-fit: contain;
}

.header-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}

.header-nav a {
  position: relative;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border-radius: 12px;
  color: #625d76;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.header-nav a::after {
  position: absolute;
  right: 11px;
  bottom: 5px;
  left: 11px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), var(--purple), var(--blue));
  content: "";
  transform: scaleX(0);
  transition: transform 220ms ease;
}

.header-nav a:hover,
.header-nav a:focus-visible,
.header-nav a.is-active {
  background: #f1edff;
  color: #39287d;
  outline: none;
  transform: translateY(-1px);
}

.header-nav a.is-active::after {
  transform: scaleX(1);
}

.header-cta {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #29233f;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.header-cta img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.header-cta:hover,
.header-cta:focus-visible {
  color: #5e44d7;
  transform: translateY(-1px);
  box-shadow: none;
  outline: none;
}

.desktop-kakao-float,
.desktop-auto-float {
  position: fixed;
  z-index: 75;
  right: 24px;
  display: block;
  width: 92px;
  height: 92px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: transform 180ms ease;
}

.desktop-kakao-float { top: 50%; }
.desktop-auto-float { top: calc(50% + 106px); }

.desktop-kakao-float img,
.desktop-auto-float img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 13px 18px rgba(65, 50, 131, 0.18));
}

.desktop-kakao-float:hover,
.desktop-kakao-float:focus-visible,
.desktop-auto-float:hover,
.desktop-auto-float:focus-visible {
  transform: translateY(-50%) scale(1.045);
  outline: none;
}

.hero {
  position: relative;
  min-height: 980px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
  color: #ffffff;
}

.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #080717 0%, rgba(8, 7, 23, 0.94) 24%, rgba(21, 14, 54, 0.48) 57%, rgba(21, 14, 54, 0.06) 100%);
  content: "";
}

.hero-art {
  position: absolute;
  z-index: -3;
  top: 0;
  left: 50%;
  width: max(100%, 1712px);
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center top;
  filter: saturate(1.1) contrast(1.04);
}

.hero-overlay {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 7, 23, 0.08) 0%, rgba(8, 7, 23, 0.04) 68%, #fbf9ff 100%),
    radial-gradient(circle at 24% 48%, rgba(95, 64, 212, 0.1), transparent 25%);
}

/* padding-top이 있으면 가운데 정렬이 그만큼 아래로 밀린다.
   뱃지 줄을 걷어낸 뒤 실측하니 위 250px / 아래 137px로 기울어 있었다.
   패딩을 빼면 justify-content: center가 제 일을 해서 위아래가 맞는다. */
.hero-content {
  display: flex;
  min-height: 920px;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}

.platform-orbit {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.orbit-logo {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

.orbit-logo {
  width: 50px;
  height: 50px;
  border-radius: 16px;
}

.orbit-logo img {
  width: 24px;
  height: 24px;
}

.instagram-logo {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 43, 214, 0.12));
  box-shadow: 0 14px 40px rgba(255, 43, 214, 0.17);
}

.youtube-logo {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 23, 56, 0.13));
  box-shadow: 0 14px 40px rgba(255, 23, 56, 0.16);
}

.tiktok-logo {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(35, 242, 255, 0.12));
  box-shadow: 0 14px 40px rgba(35, 242, 255, 0.12);
}

.platform-orbit .orbit-logo {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.platform-orbit .orbit-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.18);
}

.hero h1 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(54px, 6.1vw, 94px);
  font-weight: 950;
  letter-spacing: -0.065em;
  line-height: 1.07;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.hero h1 span {
  display: inline-block;
  background: linear-gradient(90deg, #ffffff 0%, #ff8be8 24%, var(--pink) 55%, #8d8fff 78%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 43, 214, 0.25));
}

.hero-copy {
  margin: 27px 0 0;
  color: #c5c6d2;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.button {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 25px;
  border: 1px solid transparent;
  border-radius: 17px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.03em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: linear-gradient(100deg, #ff24c8, #7b4dff 55%, #317aff);
  box-shadow: 0 15px 44px rgba(123, 77, 255, 0.36), inset 0 1px rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.button-ghost {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
}

.trial-ticket {
  display: flex;
  width: min(100%, 585px);
  align-items: center;
  gap: 15px;
  margin-top: 30px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: linear-gradient(95deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.ticket-icon {
  display: grid;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  place-items: center;
  background: transparent;
}

.ticket-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.trial-ticket div:nth-child(2) {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.trial-ticket div span {
  color: #babccc;
  font-size: 11px;
  font-weight: 800;
}

.trial-ticket strong {
  font-size: 18px;
  letter-spacing: -0.045em;
}

.trial-ticket em {
  color: var(--yellow);
  font-style: normal;
}

.ticket-id {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f3f1ff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

.hero-marquee {
  position: absolute;
  z-index: 4;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid rgba(94, 78, 157, 0.17);
  border-bottom: 1px solid rgba(94, 78, 157, 0.17);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
}

.hero-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  will-change: transform;
  animation: marquee 48s linear infinite;
}

.hero-marquee-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 34px;
  padding: 20px 34px 20px 0;
}

.hero-marquee span {
  color: #24213e;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.07em;
}

/* 텍스트 사이 구분자. 분홍 점 대신 플랫폼 로고를 쓴다.
   <i>당 <img>를 넣으면 태그가 64개 생기므로 background-image로 처리한다 — 이미지는 4장만 받는다.
   로고는 전부 1024 정사각형이라 contain으로 왜곡 없이 들어간다. */
.hero-marquee i {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  background: center / contain no-repeat;
}

.hero-marquee i.mq-ig { background-image: url("./public/logo-instagram.webp"); }
.hero-marquee i.mq-yt { background-image: url("./public/logo-youtube.webp"); }
.hero-marquee i.mq-tt { background-image: url("./public/logo-tiktok.webp"); }
.hero-marquee i.mq-nv { background-image: url("./public/logo-naver.webp"); }

/* 신뢰 카드가 리뷰 밑으로 내려가면서 platform-nav만 히어로 직후에 남았다.
   nav는 margin-top으로 위 요소에 붙는 전제였으므로 혼자 설 여백을 따로 준다. */
.platform-nav-strip {
  position: relative;
  padding: 30px 0 34px;
  background: linear-gradient(135deg, #fff8fc 0%, #f5f0ff 48%, #eefcff 100%);
}

.platform-nav-strip .platform-nav {
  margin-top: 0;
}

.trust-strip {
  position: relative;
  padding: 64px 0 74px;
  background:
    radial-gradient(circle at 10% 14%, rgba(255, 73, 163, 0.2), transparent 31%),
    radial-gradient(circle at 88% 13%, rgba(255, 71, 71, 0.17), transparent 29%),
    radial-gradient(circle at 83% 88%, rgba(41, 226, 216, 0.2), transparent 34%),
    radial-gradient(circle at 13% 88%, rgba(3, 199, 90, 0.16), transparent 31%),
    linear-gradient(135deg, #fff8fc 0%, #f5f0ff 48%, #eefcff 100%);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.trust-grid article {
  display: flex;
  min-height: 106px;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 16px 34px rgba(77, 61, 132, 0.08);
}

.trust-grid article:nth-child(2) {
  border-color: rgba(217, 255, 63, 0.36);
  box-shadow: inset 0 0 30px rgba(217, 255, 63, 0.04);
}

.trust-grid div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.trust-grid strong {
  font-size: 15px;
}

.trust-grid small {
  color: var(--muted);
  font-size: 11px;
}

.trust-grid .trust-image-card {
  display: block;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border-color: rgba(93, 77, 151, 0.12);
  border-radius: 21px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(77, 61, 132, 0.1);
  aspect-ratio: 8 / 3;
}

.trust-grid .trust-image-card:nth-child(2) {
  border-color: rgba(93, 77, 151, 0.12);
  box-shadow: 0 16px 34px rgba(77, 61, 132, 0.1);
}

.trust-image-card picture,
.trust-image-card img {
  display: block;
  width: 100%;
  height: 100%;
}

.trust-image-card img {
  object-fit: cover;
}

.platform-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  margin-top: 34px;
}

.platform-nav a {
  display: inline-flex;
  height: auto;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 2px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
  transition: color 0.2s ease, transform 0.2s ease;
}

.platform-nav a:hover {
  color: #5e44d7;
  transform: translateY(-2px);
}

.platform-nav img {
  width: 35px;
  height: 35px;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(54, 37, 126, 0.18));
}

.platform-section,
.contact-section {
  scroll-margin-top: 96px;
  position: relative;
  overflow: hidden;
  padding: 126px 0;
  isolation: isolate;
}

/* Platform art stays behind the pricing content so each long section keeps a
   distinct scene without competing with the rendered cards. */
.platform-section::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: var(--platform-bg) center / cover no-repeat;
  content: "";
  opacity: 0.5;
  pointer-events: none;
}

.platform-section > .shell {
  position: relative;
  z-index: 1;
}

.section-float-icon {
  position: absolute;
  z-index: 0;
  top: clamp(22px, 1.8vw, 26px);
  left: max(22px, calc((100% - var(--shell)) / 2));
  display: grid;
  width: clamp(62px, 5.6vw, 86px);
  aspect-ratio: 1;
  place-items: center;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(65, 45, 118, 0.2));
  animation: platform-logo-float 5s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.section-float-icon img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.youtube-section .section-float-icon { animation-delay: -1.4s; }
.tiktok-section .section-float-icon { animation-delay: -2.8s; }
.naver-section .section-float-icon { animation-delay: -4.1s; }

.section-noise {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(88, 69, 160, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 69, 160, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 80%, transparent);
}

.instagram-section {
  --platform-bg: url("./public/instagram-bg-pc.webp");
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 126, 202, 0.25), transparent 27%),
    radial-gradient(circle at 88% 20%, rgba(142, 153, 255, 0.24), transparent 30%),
    linear-gradient(180deg, #fff2fb, #fbf8ff 78%, #f7f6ff);
}

.section-title-render {
  display: block;
  margin-bottom: 38px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.section-title-render img {
  display: block;
  width: 100%;
  height: auto;
  /* PC 원본 2508x627 = 4:1. 모바일은 1122x1402 = 0.8:1로 비율이 5배 다르다.
     명시하지 않으면 브라우저가 <img>의 PC 치수로 자리를 잡아뒀다가
     세로 이미지가 도착하는 순간 화면이 튄다(모바일에서 +336px). */
  aspect-ratio: 2508 / 627;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (min-width: 981px) {
  .instagram-section .plan-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .instagram-section .plan-grid > .plan-image-card {
    grid-column: span 2;
  }

  .instagram-section .plan-grid > .plan-image-card:nth-last-child(2) {
    grid-column: 2 / span 2;
  }
}

.plan-card {
  position: relative;
  display: flex;
  min-height: 430px;
  flex-direction: column;
  padding: 25px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(7, 7, 14, 0.78);
  box-shadow: var(--shadow);
}

.plan-card::after {
  position: absolute;
  right: -42px;
  bottom: -42px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--purple);
  content: "";
  filter: blur(58px);
  opacity: 0.35;
}

.plan-card.plan-image-card {
  display: block;
  min-height: 0;
  padding: 0;
  line-height: 0;
  background: transparent;
  border-color: rgba(52, 44, 91, 0.11);
  box-shadow: 0 20px 48px rgba(82, 65, 145, 0.14);
}

.plan-card.plan-image-card::after {
  display: none;
}

.plan-image-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1122 / 1402;
  object-fit: cover;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.plan-image-card:hover img {
  transform: scale(1.015);
  filter: saturate(1.04) brightness(1.02);
}

.plan-card.plan-image-card,
.video-package.video-image-card,
.tiktok-prices article.tiktok-image-card,
.naver-cards article.naver-image-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.plan-card.plan-image-card:hover,
.video-package.video-image-card:hover,
.tiktok-prices article.tiktok-image-card:hover,
.naver-cards article.naver-image-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 27px 56px rgba(65, 50, 123, 0.2);
}

@property --featured-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* 바깥 글로우의 번짐 크기. @property로 등록해야 애니메이션이 걸린다. */
@property --featured-halo {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.is-featured-product {
  --featured-border-angle: 0deg;
  --featured-halo: 0px;
  position: relative;
  isolation: isolate;
  /* overflow:hidden은 자기 box-shadow를 자르지 않으므로 글로우가 카드 밖으로 번진다. */
  box-shadow:
    0 0 28px var(--featured-halo) var(--featured-glow),
    0 21px 54px var(--featured-shadow);
  animation: featured-halo-pulse 2.6s ease-in-out infinite;
}

/* 위 선택자(.is-featured-product = 특이도 0-1-0)는 .plan-card.plan-image-card(0-2-0)에 진다.
   그대로 두면 인스타 강조 카드의 후광이 평상시 아예 안 그려지고 hover에서만 보인다 — 모바일에선 영영 안 보인다.
   같은 값을 더 높은 특이도로 한 번 더 선언해 이기게 한다. */
.plan-card.plan-image-card.is-featured-product:not(:hover),
.video-package.video-image-card.is-featured-product:not(:hover) {
  box-shadow:
    0 0 28px var(--featured-halo) var(--featured-glow),
    0 21px 54px var(--featured-shadow);
}

.is-featured-product::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 4px;
  border-radius: inherit;
  /* 아래 레이어 = 진한 색 링(파스텔 배경과 대비). 위 레이어 = 그 위를 도는 흰 빛줄기.
     흰색을 배경이 아니라 진한 띠 위에서 움직이게 해야 대비가 산다. */
  background:
    conic-gradient(
      from var(--featured-border-angle),
      transparent 0deg 26deg,
      rgba(255, 255, 255, 0.98) 60deg,
      rgba(255, 255, 255, 0.35) 84deg,
      transparent 108deg 206deg,
      rgba(255, 255, 255, 0.98) 240deg,
      rgba(255, 255, 255, 0.35) 264deg,
      transparent 288deg
    ),
    linear-gradient(140deg, var(--featured-soft), var(--featured-edge) 60%, var(--featured-deep));
  /* 링만 남기고 안쪽은 도려낸다. 이게 빠지면 그라데이션이 카드 전체를 덮는다. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  content: "";
  pointer-events: none;
  animation: featured-border-spin 2.6s linear infinite;
}

.plan-card.plan-image-card.is-featured-product:hover,
.video-package.video-image-card.is-featured-product:hover {
  box-shadow:
    0 0 34px calc(var(--featured-halo) + 5px) var(--featured-glow),
    0 29px 66px var(--featured-shadow);
}

.is-instagram-featured {
  --featured-edge: #ff2f9e;
  --featured-soft: #b86cff;
  --featured-deep: #6D28D9;
  --featured-shadow: rgba(255, 53, 164, 0.38);
  --featured-glow: rgba(226, 40, 168, 0.72);
}

.is-youtube-featured {
  --featured-edge: #ff1f3d;
  --featured-soft: #ffaf4b;
  --featured-deep: #C1121F;
  --featured-shadow: rgba(255, 43, 66, 0.38);
  --featured-glow: rgba(233, 26, 55, 0.72);
}

@keyframes featured-border-spin {
  to { --featured-border-angle: 360deg; }
}

@keyframes featured-halo-pulse {
  0%, 100% { --featured-halo: 0px; }
  50% { --featured-halo: 10px; }
}

.plan-card:nth-child(5) {
  grid-column: span 1;
}

.plan-card ul,
.video-package ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-card li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #9fa1b0;
  font-size: 11px;
}

.plan-card li b {
  color: #eeeeF5;
  font-weight: 850;
}

.plan-card > small {
  margin-top: auto;
  padding-top: 15px;
  color: #777989;
  font-size: 10px;
  font-weight: 700;
}

/* 플랫폼 CTA. 원래는 폭 1232px 패널에 텍스트와 버튼을 양 끝으로 벌려놔서
   가운데 700px이 텅 비었다. 가운데로 모으는 것만으론 좌우가 대신 비므로,
   패널 자체를 내용 크기(fit-content)로 줄여서 가운데 놓는다. */
.section-cta {
  --cta-logo: url("./public/logo-instagram.webp");
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 24px auto 0;
  padding: 20px 28px;
  border: 1.5px solid rgba(255, 43, 214, 0.26);
  border-radius: 22px;
  background: linear-gradient(100deg, rgba(255, 240, 252, 0.95), rgba(246, 241, 255, 0.9));
  box-shadow: 0 16px 34px rgba(77, 61, 132, 0.09);
}

/* 플랫폼 로고. 마키와 같이 background-image로 처리해 이미 받아둔 이미지를 재사용한다. */
.section-cta::before {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  background: var(--cta-logo) center / contain no-repeat;
  content: "";
  filter: drop-shadow(0 5px 9px rgba(30, 20, 60, 0.22));
}

.section-cta p {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
}

/* 버튼은 카드 아트의 3D 알약과 같은 언어로. 단단한 오프셋 그림자 + 위쪽 광택.
   각 플랫폼 버튼의 배경색·그라데이션은 그대로 두고 입체감만 얹는다. */
.section-cta .button {
  min-height: 54px;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.12),
    0 12px 26px rgba(40, 20, 70, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.34);
}

.section-cta .button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.12),
    0 18px 34px rgba(40, 20, 70, 0.24),
    inset 0 2px 0 rgba(255, 255, 255, 0.34);
}

.button-instagram {
  min-height: 51px;
  border-radius: 15px;
  background: linear-gradient(100deg, #ff2bd6, #7b4dff);
  box-shadow: 0 12px 32px rgba(255, 43, 214, 0.22);
  color: #ffffff;
}

.youtube-section {
  --platform-bg: url("./public/youtube-bg-pc.webp");
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 132, 151, 0.22), transparent 25%),
    radial-gradient(circle at 88% 80%, rgba(255, 201, 158, 0.18), transparent 25%),
    #fff9f7;
}

.youtube-packages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

/* 카드 4장을 2x2로. 단품·채널 / 스타터·인기 순서다. */
.youtube-packages.youtube-image-grid {
  grid-template-columns: repeat(2, 1fr);
}

.video-package {
  min-height: 420px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 27px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025));
}

.video-package.video-image-card {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  line-height: 0;
  background: transparent;
  border-color: rgba(52, 44, 91, 0.11);
  box-shadow: 0 20px 48px rgba(106, 77, 123, 0.14);
}

.video-image-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1122 / 1402;
  object-fit: cover;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.video-image-card:hover img {
  transform: scale(1.015);
  filter: saturate(1.04) brightness(1.02);
}

.video-package > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.video-package > div span {
  color: #8e909e;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.video-package > div strong {
  color: var(--red);
  font-size: 31px;
  font-weight: 950;
  letter-spacing: -0.06em;
}

.video-package h3 {
  margin: 36px 0 25px;
  font-size: 25px;
  letter-spacing: -0.05em;
}

.video-package li {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: #a7a8b5;
  font-size: 12px;
  font-weight: 700;
}

.video-package li b {
  color: #fff;
}

.video-package > small {
  display: block;
  margin-top: 22px;
  color: #777986;
  font-size: 10px;
}

.section-cta-red {
  --cta-logo: url("./public/logo-youtube.webp");
  border-color: rgba(255, 23, 56, 0.26);
  background: linear-gradient(100deg, rgba(255, 241, 243, 0.95), rgba(255, 247, 241, 0.9));
}

.button-youtube {
  min-height: 51px;
  background: var(--red);
  box-shadow: 0 12px 32px rgba(255, 23, 56, 0.2);
  color: #ffffff;
}

.section-cta-tiktok {
  --cta-logo: url("./public/logo-tiktok.webp");
  border-color: rgba(31, 208, 216, 0.38);
  background: linear-gradient(100deg, rgba(230, 253, 255, 0.9), rgba(255, 244, 253, 0.9));
}

.button-tiktok {
  min-height: 51px;
  background: linear-gradient(100deg, #1fd4d8, #ff4eac);
  box-shadow: 0 12px 32px rgba(44, 201, 207, 0.22);
  color: #ffffff;
}

.section-cta-naver {
  --cta-logo: url("./public/logo-naver.webp");
  border-color: rgba(3, 190, 101, 0.34);
  background: linear-gradient(100deg, rgba(239, 255, 247, 0.95), rgba(245, 255, 249, 0.88));
}

.button-naver {
  min-height: 51px;
  background: #03c75a;
  box-shadow: 0 12px 32px rgba(3, 199, 90, 0.2);
  color: #ffffff;
}

/* 배너를 패널에 담지 않고 섹션을 꽉 채운다. 배경 그라데이션은 이미지가 로드되기 전까지만 보인다. */
.event-section {
  --featured-border-angle: 0deg;
  position: relative;
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 205, 240, 0.45), transparent 27%),
    radial-gradient(circle at 85% 76%, rgba(186, 204, 255, 0.42), transparent 30%),
    linear-gradient(180deg, #fbf9ff, #f7f6ff);
}

/* 배너가 풀블리드라 위(네이버)·아래(문의) 섹션과 경계가 사라진다.
   이벤트 구간임을 알리는 강조 링으로 경계를 만든다.
   강조 카드와 같은 방식(진한 띠 + 그 위를 도는 흰 빛줄기)이라 사이트 언어가 통일된다.
   회전 장치(--featured-border-angle / featured-border-spin)는 강조 카드 것을 그대로 쓴다. */
.event-section::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  padding: 5px;
  background:
    conic-gradient(
      from var(--featured-border-angle),
      transparent 0deg 26deg,
      rgba(255, 255, 255, 0.98) 60deg,
      rgba(255, 255, 255, 0.35) 84deg,
      transparent 108deg 206deg,
      rgba(255, 255, 255, 0.98) 240deg,
      rgba(255, 255, 255, 0.35) 264deg,
      transparent 288deg
    ),
    linear-gradient(140deg, #FDE047, #A855F7 52%, #6D28D9);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  content: "";
  pointer-events: none;
  animation: featured-border-spin 3.4s linear infinite;
}

.section-event-banner {
  display: block;
  line-height: 0;
}

.section-event-banner img {
  display: block;
  width: 100%;
  height: auto;
  /* PC 배너는 21:9 전용. 풀블리드라 배너 높이 = 화면폭 ÷ 비율인데,
     브라우저 주소창·탭이 세로를 먹어서 뷰포트 비율이 항상 2.0~2.2가 된다.
     즉 16:9(1.78)는 어떤 노트북에서도 한 화면에 안 들어온다. 21:9(2.33)라야 들어온다.
     소스별로 비율이 달라 명시하지 않으면 로드 시 레이아웃이 튄다. */
  aspect-ratio: 21 / 9;
  object-fit: cover;
  transition: filter 0.3s ease;
}

.section-event-banner:hover img {
  filter: saturate(1.06) brightness(1.03);
}

/* ── 고객 리뷰 ─────────────────────────────────────────────
   이 페이지는 전부 자기주장(24시간 상담·안전한 계정·고퀄리티)뿐이라 제3자 목소리가 없었다.
   가격을 다 본 직후, 문의 직전에 놓아 "살까 말까" 지점에서 신뢰를 받친다. */
.review-section {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background:
    radial-gradient(circle at 14% 18%, rgba(214, 205, 255, 0.42), transparent 28%),
    radial-gradient(circle at 86% 78%, rgba(255, 212, 240, 0.36), transparent 30%),
    linear-gradient(180deg, #fbfaff, #f6f4ff);
}

.review-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--text);
  font-size: clamp(23px, 2.3vw, 31px);
  font-weight: 950;
  letter-spacing: -0.035em;
}

/* 별 뱃지. 카드 아트의 3D 알약과 같은 언어(단단한 그림자 + 위쪽 광택)로 그린다. */
.review-heading-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: linear-gradient(150deg, #ffd94f, #ffab13);
  box-shadow: 0 6px 15px rgba(255, 171, 19, 0.42), inset 0 2px 0 rgba(255, 255, 255, 0.55);
  color: #ffffff;
  font-size: 19px;
  place-items: center;
  text-shadow: 0 1px 2px rgba(160, 96, 0, 0.35);
}

.review-heading-icon::before {
  content: "★";
}

.review-sub {
  margin: 10px 0 0;
  color: #6c648f;
  font-size: 14px;
  font-weight: 700;
}

.review-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.review-card {
  padding: 17px 20px;
  border: 1px solid rgba(76, 58, 144, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 28px rgba(77, 61, 132, 0.07);
}

.review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.review-id {
  overflow: hidden;
  color: #2b2649;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-body {
  margin: 0;
  color: #4d4674;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

/* 별점을 두 겹으로 그린다. 위층 폭을 점수 비율로 잘라서 4.5점 같은 반 칸도 처리된다.
   이미지가 아니라 글자라 어떤 해상도에서도 또렷하고 추가 다운로드가 0이다. */
.review-stars {
  position: relative;
  flex: 0 0 auto;
  color: #dedaf2;
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1;
  white-space: nowrap;
}

.review-stars::before {
  content: "★★★★★";
}

.review-stars > span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: calc(var(--rating) / 5 * 100%);
  color: #7b4dff;
}

.review-stars > span::before {
  content: "★★★★★";
}

/* 세로 점 3개 — "후기가 더 있다"는 신호.
   점 하나를 box-shadow로 두 번 복제해 요소 하나로 그린다.
   box-shadow는 자리를 안 먹으므로 아래 여백을 margin-bottom으로 따로 준다. */
.review-more {
  width: 5px;
  height: 5px;
  margin: 24px auto 18px;
  border-radius: 50%;
  background: rgba(124, 77, 255, 0.3);
  box-shadow:
    0 9px 0 rgba(124, 77, 255, 0.3),
    0 18px 0 rgba(124, 77, 255, 0.3);
}

.event-popup {
  position: fixed;
  z-index: 100;
  top: 28px;
  right: auto;
  bottom: auto;
  left: clamp(20px, 3vw, 48px);
  width: 420px;
  max-width: calc(100vw - 40px);
  min-width: 0;
  max-height: none;
  margin: 0;
  overflow: visible;
  padding: 0;
  box-sizing: border-box;
  transform: none;
  border: 1px solid rgba(113, 87, 182, 0.28);
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 22px 60px rgba(35, 21, 70, 0.3);
}

.event-popup-card {
  overflow: hidden;
  border-radius: inherit;
  background: #ffffff;
}

.event-popup-link,
.event-popup-link img {
  display: block;
  width: 100%;
}

.event-popup-link img {
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.event-popup-controls {
  display: grid;
  grid-template-columns: 1fr 78px;
  min-height: 48px;
  background: #292441;
}

.event-popup-controls button {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}

.event-popup-controls button + button {
  border-left: 1px solid rgba(255, 255, 255, 0.19);
  color: #ffffff;
}

.event-popup-controls button:hover,
.event-popup-controls button:focus-visible {
  background: rgba(255, 255, 255, 0.11);
  outline: none;
}

.product-lightbox {
  position: fixed;
  z-index: 1000;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  overflow: hidden;
  padding: clamp(22px, 4vh, 48px) clamp(22px, 5vw, 72px);
  border: 0;
  background: transparent;
  box-sizing: border-box;
}

.product-lightbox[open] {
  display: grid;
  place-items: center;
}

.product-lightbox::backdrop {
  background: rgba(12, 9, 28, 0.72);
  backdrop-filter: blur(9px);
}

.product-lightbox-stage {
  position: relative;
  display: grid;
  justify-items: center;
  max-width: min(92vw, 1120px);
  max-height: calc(100dvh - 44px);
}

/* HTML이 class가 아니라 id로 쓴다(index.html: <img id="product-lightbox-image">).
   클래스 선택자였을 땐 이 규칙이 통째로 죽어서 라운드·그림자·흰 배경이 전부 안 먹었다. */
#product-lightbox-image {
  display: block;
  max-width: min(92vw, 1120px);
  max-height: calc(100dvh - 110px);
  width: auto;
  height: auto;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 28px 76px rgba(6, 4, 20, 0.44);
  object-fit: contain;
}

/* Product renders include portrait and square artwork. Keep the full artwork
   inside the viewport instead of allowing the intrinsic image height to crop. */
#product-lightbox-image {
  width: auto !important;
  height: auto !important;
  max-width: min(92vw, 1120px) !important;
  max-height: calc(100vh - 118px) !important;
  max-height: calc(100dvh - 118px) !important;
}

/* 여기도 id다(<p id="product-lightbox-caption">). 클래스 선택자였을 땐 이 규칙이 죽어서
   <dialog>의 브라우저 기본 색(검정)이 나왔다 — 어두운 backdrop 위 검은 글씨. */
#product-lightbox-caption {
  margin: 13px 0 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.product-lightbox-close {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 12px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  background: rgba(20, 15, 43, 0.76);
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: 29px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease;
}

.product-lightbox-close:hover,
.product-lightbox-close:focus-visible {
  transform: scale(1.08);
  background: #ff3fa8;
  outline: none;
}

@media (min-width: 981px) {
  .plan-card.plan-image-card.is-lightbox-enabled,
  .video-package.video-image-card.is-lightbox-enabled,
  .tiktok-prices article.tiktok-image-card.is-lightbox-enabled,
  .naver-cards article.naver-image-card.is-lightbox-enabled {
    cursor: zoom-in;
  }

  .plan-card.plan-image-card.is-lightbox-enabled:focus-visible,
  .video-package.video-image-card.is-lightbox-enabled:focus-visible,
  .tiktok-prices article.tiktok-image-card.is-lightbox-enabled:focus-visible,
  .naver-cards article.naver-image-card.is-lightbox-enabled:focus-visible {
    outline: 3px solid rgba(94, 190, 255, 0.95);
    outline-offset: 4px;
  }
}

.tiktok-section {
  --platform-bg: url("./public/tiktok-bg-pc.webp");
  background:
    linear-gradient(135deg, rgba(111, 222, 255, 0.18), transparent 35%),
    linear-gradient(315deg, rgba(255, 146, 215, 0.18), transparent 35%),
    #f7fdff;
}

.tiktok-prices {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.tiktok-prices article {
  display: flex;
  min-height: 248px;
  align-items: flex-start;
  flex-direction: column;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025));
  box-shadow: 7px 8px 0 rgba(255, 43, 214, 0.05), -7px -8px 0 rgba(35, 242, 255, 0.035);
}

.tiktok-prices article.tiktok-image-card {
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  line-height: 0;
  background: transparent;
  border-color: rgba(52, 44, 91, 0.11);
  box-shadow: 0 20px 48px rgba(64, 137, 162, 0.13);
}

.tiktok-image-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.tiktok-image-card:hover img {
  transform: scale(1.015);
  filter: saturate(1.04) brightness(1.02);
}

.tiktok-prices article > span {
  color: var(--cyan);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.17em;
}

.tiktok-prices article > strong {
  margin-top: 27px;
  font-size: 24px;
  letter-spacing: -0.05em;
}

.tiktok-prices article > em {
  margin-top: 7px;
  color: #8f919f;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.tiktok-prices article > b {
  margin-top: auto;
  font-size: 25px;
  font-weight: 950;
  letter-spacing: -0.055em;
}

.naver-section {
  --platform-bg: url("./public/naver-bg-pc.webp");
  background:
    radial-gradient(circle at 10% 25%, rgba(93, 228, 154, 0.2), transparent 25%),
    radial-gradient(circle at 88% 80%, rgba(198, 255, 221, 0.4), transparent 24%),
    linear-gradient(180deg, #f5fff8, #fbfffd);
}

.naver-logo {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.naver-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.naver-cards article {
  display: flex;
  min-height: 285px;
  flex-direction: column;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
}

.naver-cards article.naver-image-card {
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  line-height: 0;
  background: transparent;
  border-color: rgba(52, 44, 91, 0.11);
  box-shadow: 0 20px 48px rgba(68, 142, 98, 0.13);
}

.naver-image-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.naver-image-card:hover img {
  transform: scale(1.015);
  filter: saturate(1.04) brightness(1.02);
}

.naver-cards article > span {
  color: var(--green);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.15em;
}

.naver-cards h3 {
  margin: 36px 0 9px;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.05em;
}

.naver-cards p {
  margin: 0;
  color: #888b98;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.naver-cards strong {
  margin-top: auto;
  font-size: 25px;
  font-weight: 950;
  letter-spacing: -0.055em;
}

.contact-section {
  min-height: 790px;
  display: flex;
  align-items: center;
  background: #f9fbff url("./public/last-bg.webp") center / cover no-repeat;
  color: #211b43;
  text-align: center;
}

.contact-beam {
  display: none;
}

.contact-inner {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.contact-inner h2 {
  margin: 0;
  font-size: clamp(49px, 6.5vw, 88px);
  font-weight: 950;
  letter-spacing: -0.075em;
  line-height: 1.02;
}

.contact-inner h2 span {
  background: linear-gradient(90deg, #ff3f9f, #8069ed, #14b9e8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 16px rgba(88, 74, 178, 0.13));
}

.contact-inner > p:not(.section-kicker) {
  margin: 24px 0 0;
  color: #615b78;
  font-size: 17px;
  font-weight: 650;
}

.contact-buttons {
  display: grid;
  width: min(100%, 760px);
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 37px;
}

.contact-buttons .button {
  min-height: 86px;
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
  padding: 18px 24px;
  font-size: 18px;
}

.contact-buttons .button.button-render {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.button-render img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 20px rgba(73, 55, 145, 0.14));
}

.contact-buttons .button.button-render:hover,
.contact-buttons .button.button-render:focus-visible {
  box-shadow: none;
}

.site-footer {
  padding: 68px 0 58px;
  border-top: 1px solid var(--line);
  background: #11102a;
  color: #ffffff;
  text-align: center;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.footer-brand p {
  margin: 10px 0 0;
  color: #b4b2c8;
  font-size: 12px;
}

.business-info {
  display: flex;
  max-width: 980px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px 0;
  margin: 0;
}

.business-info div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  font-size: 11px;
  line-height: 1.55;
}

.business-info div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.business-info dt {
  color: #a19fb8;
  font-weight: 750;
}

.business-info dd {
  margin: 0;
  color: #e1e0ee;
  font-weight: 650;
}

.copyright {
  width: min(calc(100% - 48px), var(--shell));
  margin: 28px auto 0;
  padding-top: 21px;
  border-top: 1px solid var(--line);
  color: #9391aa;
  font-size: 10px;
  text-align: center;
}

.policy-links {
  display: flex;
  width: min(calc(100% - 48px), var(--shell));
  justify-content: center;
  gap: 18px;
  margin: 24px auto 0;
}

.policy-links a {
  color: #d9d8e8;
  font-size: 11px;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

.policy-links a:hover {
  color: #ffffff;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 8px rgba(77, 255, 144, 0); }
  100% { box-shadow: 0 0 0 0 rgba(77, 255, 144, 0); }
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

@keyframes platform-logo-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg) scale(1); }
  50% { transform: translate3d(3px, -10px, 0) rotate(3deg) scale(1.025); }
}

@keyframes title-sheen {
  0%, 58% { transform: translateX(-145%) skewX(-18deg); }
  77%, 100% { transform: translateX(155%) skewX(-18deg); }
}

.section-title-render {
  position: relative;
}

.section-title-render::after {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  content: "";
  opacity: 0.58;
  pointer-events: none;
  animation: title-sheen 4.6s ease-in-out infinite;
}

/* Added by script.js only after the page is ready: no hidden content when JS
   is unavailable, while scroll entry remains crisp on modern browsers. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.985);
  transition:
    opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

/* ── 플랫폼별 등장 효과 ────────────────────────────────────────────
   트리거(.is-visible)는 공용 IntersectionObserver가 그대로 붙인다. 여기선 효과만 갈아끼운다.
   리듬을 인스타(바운스) → 유튜브(직선) → 틱톡(스냅) → 네이버(정돈) 순으로
   오르내리게 해서, 네 섹션이 연달아 지나가도 눈이 지치지 않게 한다. */

/* 인스타 — 더블탭 하트 팝. 넷 중 유일하게 바운스를 허용하는 자리.
   fill-mode가 both가 아니라 backwards인 게 중요하다. both면 애니메이션이 끝난 뒤에도
   마지막 프레임의 transform이 남는데, 애니메이션은 일반 선언을 무조건 이기므로
   hover의 translateY(-7px)가 영영 안 먹는다. backwards는 지연 구간만 채우고 끝나면 비켜준다. */
.instagram-section .plan-image-card.reveal:not(.is-visible) {
  transform: translate3d(0, 14px, 0) scale(0.9);
  transition: none;
}

.instagram-section .plan-image-card.reveal.is-visible {
  animation: reveal-ig 0.62s ease-out var(--reveal-delay, 0ms) backwards;
}

/* animation은 덮어쓰기다. 강조 카드는 후광 맥동을 함께 선언하지 않으면 후광이 죽는다. */
.instagram-section .plan-image-card.is-featured-product.reveal.is-visible {
  animation:
    reveal-ig 0.62s ease-out var(--reveal-delay, 0ms) backwards,
    featured-halo-pulse 2.6s ease-in-out infinite;
}

@keyframes reveal-ig {
  0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.9); }
  58% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.045); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* 인스타 광택 — 등장 직후 대각선으로 한 번 훑는다. */
.instagram-section .plan-card.plan-image-card.reveal.is-visible::after {
  display: block;
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);
  content: "";
  pointer-events: none;
  animation: reveal-ig-sheen 0.95s ease-out calc(var(--reveal-delay, 0ms) + 130ms) both;
}

@keyframes reveal-ig-sheen {
  0% { opacity: 0; transform: translate3d(-125%, 0, 0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(125%, 0, 0); }
}

/* 유튜브 — 재생 시작 와이프. 이미지를 좌→우로 잘라 드러낸다.
   불투명 셔터로 덮는 방법도 써봤지만, 섹션 배경이 단색이 아니라
   방사형 그라데이션 + 플랫폼 배경 아트(opacity 0.5)가 얹힌 것이라 단색으로는 흉내가 안 된다.
   아직 안 드러난 영역은 카드의 투명 배경으로 두는 게 정답이다 — 진짜 섹션 배경이 그대로 비친다. */
/* 등장 전에만 기본 reveal 상태를 중화한다. is-visible 이후까지 물고 있으면
   여기 transform: none 이 hover의 translateY(-7px)를 눌러버린다. */
.youtube-section .video-image-card.reveal:not(.is-visible) {
  opacity: 1;
  transform: none;
  transition: none;
}

/* 등장 전에만 숨긴다. is-visible이 붙는 순간부터는 아래 애니메이션이 가시성을 담당한다. */
.youtube-section .video-image-card.reveal:not(.is-visible) img {
  opacity: 0;
}

/* fill-mode가 both가 아니라 backwards인 게 핵심이다.
   both면 애니메이션이 끝난 뒤에도 clip-path가 남고, 그러면 이미지가 별도 레이어로 승격돼
   hover의 scale(1.015)이 다시 그리기가 아니라 비트맵 확대가 되어 흐려진다(이전에 겪은 그 버그).
   backwards는 지연 구간만 채우고 끝나면 효과가 사라져서 clip-path가 남지 않는다.
   카드가 아니라 이미지에 거는 이유는, 카드에 걸면 강조 카드의 후광(box-shadow)까지 잘려나가기 때문. */
.youtube-section .video-image-card.reveal.is-visible img {
  animation: reveal-yt 0.66s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0ms) backwards;
}

@keyframes reveal-yt {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* 이미지가 도착하기 전엔 카드 틀만 덩그러니 남아 "빈 액자"로 보인다. 틀도 같이 드러낸다. */
.youtube-section .video-image-card.reveal {
  border-color: transparent;
  box-shadow: none;
}

/* :not(:hover) — 이게 없으면 이 규칙(특이도 0-4-0)이 hover 그림자(0-3-0)를 이겨서
   유튜브 카드만 hover 반응이 죽는다. */
.youtube-section .video-image-card.reveal.is-visible:not(:hover) {
  border-color: rgba(52, 44, 91, 0.11);
  box-shadow: 0 20px 48px rgba(106, 77, 123, 0.14);
  transition: border-color 0.45s ease, box-shadow 0.45s ease;
  transition-delay: calc(var(--reveal-delay, 0ms) + 320ms);
}

.youtube-section .video-image-card.reveal.is-visible:hover {
  border-color: rgba(52, 44, 91, 0.11);
}

/* 강조 카드는 링(::before)과 후광이 따로 있으므로 자기 값으로 되살린다. */
.youtube-section .video-image-card.is-featured-product.reveal::before {
  opacity: 0;
}

.youtube-section .video-image-card.is-featured-product.reveal.is-visible::before {
  opacity: 1;
  transition: opacity 0.45s ease calc(var(--reveal-delay, 0ms) + 320ms);
}

.youtube-section .video-image-card.is-featured-product.reveal.is-visible:not(:hover) {
  box-shadow:
    0 0 28px var(--featured-halo) var(--featured-glow),
    0 21px 54px var(--featured-shadow);
}

/* 틱톡 — 글리치 스냅. 시안/마젠타 잔상이 어긋났다가 착 붙는다. */
.tiktok-section .tiktok-image-card.reveal:not(.is-visible) {
  transform: translate3d(0, 40px, 0);
  transition: none;
}

.tiktok-section .tiktok-image-card.reveal.is-visible {
  animation: reveal-tt 0.44s cubic-bezier(0.2, 0.9, 0.3, 1.15) var(--reveal-delay, 0ms) backwards;
}

@keyframes reveal-tt {
  0% {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    filter: drop-shadow(7px 0 0 rgba(0, 242, 234, 0.9)) drop-shadow(-7px 0 0 rgba(255, 0, 80, 0.9));
  }
  55% {
    opacity: 1;
    transform: translate3d(0, -7px, 0);
    filter: drop-shadow(3px 0 0 rgba(0, 242, 234, 0.65)) drop-shadow(-3px 0 0 rgba(255, 0, 80, 0.65));
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: drop-shadow(0 0 0 rgba(0, 242, 234, 0)) drop-shadow(0 0 0 rgba(255, 0, 80, 0));
  }
}

/* 네이버 — 검색 결과 정렬. 위에서 아래로, 바운스 없이. 검색·신뢰가 정체성이라 얌전한 게 맞다. */
.naver-section .naver-image-card.reveal:not(.is-visible) {
  transform: translate3d(0, -18px, 0);
  transition: none;
}

.naver-section .naver-image-card.reveal.is-visible {
  animation: reveal-nv 0.44s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms) backwards;
}

@keyframes reveal-nv {
  0% { opacity: 0; transform: translate3d(0, -18px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .platform-section::before {
    background-attachment: fixed;
  }
}

@media (max-width: 980px) {
  .trust-grid,
  .naver-cards { grid-template-columns: repeat(2, 1fr); }
  
  .youtube-packages.youtube-image-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
  
  .tiktok-prices { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: 1fr; gap: 38px; }
}

@media (max-width: 720px) {
  /* 데스크톱은 화면 우측 중앙. 모바일은 중앙에 두면 카드 위를 덮으므로 우측 하단으로 내린다. */
  .desktop-kakao-float,
  .desktop-auto-float {
    top: auto;
    right: 12px;
    width: 62px;
    height: 62px;
    transform: none;
  }

  .desktop-kakao-float { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .desktop-auto-float { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

  .desktop-kakao-float:hover,
  .desktop-kakao-float:focus-visible,
  .desktop-auto-float:hover,
  .desktop-auto-float:focus-visible {
    transform: scale(1.045);
  }

  

  

  

  

  

  

  

  

  .shell,
  .copyright { width: min(calc(100% - 32px), var(--shell)); }

  .site-header {
    width: 100%;
    height: 64px;
    grid-template-columns: 104px minmax(0, 1fr) auto;
    gap: 4px;
    padding: 0 12px;
  }
  .brand { height: 44px; }
  .brand-logo { width: 98px; height: 44px; }
  .header-nav {
    gap: 0;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .header-nav::-webkit-scrollbar { display: none; }
  .header-nav a { min-height: 38px; padding: 0 7px; font-size: 10px; }
  .header-nav a:last-child { display: none; }
  .header-cta { min-height: 41px; gap: 3px; padding: 0 9px; border-radius: 12px; font-size: 10px; }
  .header-cta img { width: 16px; height: 16px; }
  .footer-logo { width: 200px; }
  .hero { min-height: 1030px; }
  .hero::before {
    background: linear-gradient(180deg, rgba(8, 7, 23, 0.18) 0%, rgba(8, 7, 23, 0.3) 33%, #18152f 68%, #18152f 100%);
  }
  .hero-art {
    top: 0;
    left: 50%;
    width: 100%;
    height: 640px;
    object-position: center top;
  }
  .hero-overlay {
    background: linear-gradient(180deg, transparent 30%, rgba(24, 21, 47, 0.8) 56%, #18152f 78%);
  }
  .hero-content {
    min-height: 970px;
    justify-content: flex-end;
    padding-top: 380px;
    padding-bottom: 100px;
  }
  .platform-orbit { margin-bottom: 18px; }
  .orbit-logo { width: 43px; height: 43px; border-radius: 14px; }
  .orbit-logo img { width: 21px; height: 21px; }
  .hero h1 { font-size: clamp(48px, 15.4vw, 70px); line-height: 1.07; }
  .hero-copy { margin-top: 22px; font-size: 14px; line-height: 1.65; }
  .hero-actions { display: grid; width: 100%; grid-template-columns: 1fr; margin-top: 26px; }
  .button { min-height: 55px; border-radius: 15px; font-size: 14px; }
  .trial-ticket { justify-content: center; margin-top: 14px; padding: 13px; border-radius: 17px; text-align: center; }
  .ticket-icon { width: 40px; height: 40px; flex-basis: 40px; }
  .trial-ticket div:nth-child(2) { flex: 0 1 auto; align-items: center; }
  .trial-ticket strong { font-size: 15px; }
  .ticket-id { display: none; }

  .trust-strip { padding: 45px 0 56px; }
  .trust-grid { grid-template-columns: 1fr; gap: 12px; }
  .trust-grid article { min-height: 94px; align-items: flex-start; flex-direction: column; gap: 7px; padding: 15px; }
  
  .trust-grid strong { font-size: 13px; }
  .trust-grid small { font-size: 9px; }
  .trust-grid .trust-image-card { aspect-ratio: 2 / 1; }
  .platform-nav {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 22px;
    overflow-x: auto;
    margin-top: 24px;
    padding: 3px 4px;
    scrollbar-width: none;
  }
  .platform-nav::-webkit-scrollbar { display: none; }
  .platform-nav a { height: auto; padding: 8px 3px; font-size: 15px; }
  .platform-nav img { width: 29px; height: 29px; }

  .platform-section,
.contact-section {
    scroll-margin-top: 84px;
    padding: 84px 0;
  }
  .platform-section::before {
    background-attachment: scroll;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    opacity: 0.42;
  }
  .section-float-icon {
    top: 18px;
    left: 20px;
    width: 47px;
  }
  .instagram-section { --platform-bg: url("./public/instagram-bg-mobile.webp"); }
  .youtube-section { --platform-bg: url("./public/youtube-bg-mobile.webp"); }
  .tiktok-section { --platform-bg: url("./public/tiktok-bg-mobile.webp"); }
  .naver-section { --platform-bg: url("./public/naver-bg-mobile.webp"); }
  
  
  
  
  
  
  

  
  
  
  
  
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card { min-height: 405px; padding: 23px; border-radius: 23px; }
  
  
  .br-mobile { display: inline; }

  .review-section { padding: 62px 0; }
  .review-list { grid-template-columns: 1fr; gap: 10px; }
  .review-card { padding: 15px 16px; }

  /* 모바일 타이틀 원본은 1122x1402 세로형. PC(4:1)와 정반대라 따로 잡아준다. */
  .section-title-render img { aspect-ratio: 1122 / 1402; }

  /* 모바일은 세로로 쌓이므로 fit-content로 두면 폭이 들쭉날쭉해진다. 전체 폭으로 되돌린다. */
  .section-cta { width: auto; align-items: center; flex-direction: column; padding: 19px; text-align: center; }
  .section-cta p { width: 100%; text-align: center; }
  .section-cta .button { width: 100%; }

  
  
  

  .youtube-packages { grid-template-columns: 1fr; }
  .youtube-packages.youtube-image-grid { grid-template-columns: 1fr; }
  .video-package { min-height: 390px; padding: 23px; }
  

  .tiktok-prices { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tiktok-prices article { min-height: 195px; padding: 19px; }
  .tiktok-prices article > strong { margin-top: 22px; font-size: 21px; }
  .tiktok-prices article > b { font-size: 22px; }
  /* 카드가 5장인데 2열이라 마지막 한 장이 남는다. span 2를 걸면 남는 자리를 통째로 먹어서
     형제 대비 면적 4배가 된다(아이폰 15에서 177px vs 361px). 형제와 같은 폭으로 가운데 놓는다.
     50% - 4px = 2열에서 gap(8px)을 뺀 한 칸 폭과 정확히 같다. */
  .tiktok-prices article:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 4px);
  }

  .naver-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .naver-cards article { min-height: 230px; padding: 19px; border-radius: 21px; }
  .naver-cards h3 { margin-top: 27px; font-size: 17px; }
  .naver-cards strong { font-size: 21px; }
  /* 모바일 배너는 4:5 전용. 9:16은 작은 폰(아이폰 SE 등)에서 화면을 넘긴다. */
  .section-event-banner img { aspect-ratio: 4 / 5; }
  .event-section { padding: 0; }
  .event-popup {
    /* sticky 헤더가 64px. 그 아래로 12px 띄운다 — 위로 올리면 로고·카톡상담 버튼을 덮는다. */
    top: 76px;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(calc(100vw - 32px), 390px);
    max-width: none;
    transform: translateX(-50%);
  }

  .event-popup-controls { min-height: 46px; grid-template-columns: 1fr 74px; }
  .event-popup-controls button { font-size: 12px; }

  .contact-section { min-height: 750px; }
  .contact-inner h2 { font-size: clamp(46px, 14vw, 65px); }
  .contact-inner > p:not(.section-kicker) { font-size: 14px; line-height: 1.65; }
  .contact-buttons { grid-template-columns: 1fr; }
  .contact-buttons .button { min-height: 79px; }
  

  .site-footer { padding: 54px 0 78px; }
  .footer-inner { gap: 22px; }
  .business-info { flex-direction: column; align-items: center; gap: 7px; }
  .business-info div { justify-content: center; padding: 0; }
  .business-info div + div { border-left: 0; }
  .copyright { margin-top: 28px; }
  .policy-links {
    width: min(calc(100% - 32px), var(--shell));
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 22px;
  }

  
  
}

@media (max-width: 390px) {
  .naver-cards { grid-template-columns: 1fr; }
  .tiktok-prices { grid-template-columns: 1fr; }
  /* 여기선 1열이라 가운데 정렬·반폭 지정이 오히려 마지막 카드만 반쪽으로 만든다. 전부 되돌린다. */
  .tiktok-prices article:last-child { grid-column: auto; justify-self: stretch; width: auto; }
}

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

  .platform-section::before {
    background-attachment: scroll;
  }

  /* 플랫폼별 등장 효과가 filter·clip-path·이미지 opacity까지 건드리므로 전부 되돌린다.
     이 중 하나라도 빠지면 모션을 끈 사용자에게 이미지가 안 보인 채로 남는다. */
  .reveal,
  .reveal img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    clip-path: none !important;
    filter: none !important;
  }

  /* 인스타 광택만 정확히 제거한다. .reveal::after로 뭉뚱그리면
     .section-cta·.footer-inner 등 다른 reveal 요소의 멀쩡한 ::after까지 죽는다. */
  .instagram-section .plan-card.plan-image-card.reveal.is-visible::after {
    display: none !important;
  }

  .section-float-icon {
    animation: none;
  }
}

.render-mode .section-float-icon {
  animation: none;
}