/* ==========================================================
   와우오더 — 카드단말기 페이지 (/카드단말기 · /card-terminal)

   레퍼런스(신신엠앤씨 토스·커넥트·터미널 세트·케어 랜딩, 아이샵케어, 히엘페이,
   쿠팡·스마트스토어 상세)를 요소 하나하나 벤치마킹한 판매 랜딩.
   기존 와우오더 메인 디자인과는 따로 간다 — 공통은 상단바 · 푸터 · 상담바뿐.

   · 내용은 가운데 800px 기둥(레퍼런스 750~790), 바탕 띠는 화면 끝까지
   · 글자 위계는 신신 랜딩 실측을 살짝 줄여서: 큰 제목 54 / 부제 28 / 카드 제목 36 / 목록 20
   · 토스 구역 = 토스 디자인 시스템 색(#3182f6 · #2272eb · #191f28 · #8b95a1) · 연파랑 바탕 + 그림자 없는 흰 카드
   · 네이버 구역 = 초록빛 검정 + 초록 지평선 빛, 기둥 바깥은 어둡게, 판 3색(민트 · 하늘 · 라벤더)
   · 움직임은 토스 운영 코드의 이징 값 그대로(기본 .25,.1,.25,1 / 감속 .16,1,.3,1 / 튐 .34,1.56,.64,1)
   ========================================================== */

.page-card {
  /* 토스 디자인 시스템 토큰 (tossplace.com 운영 CSS 와 같은 값) */
  --t-blue: #3182f6;
  --t-blue-d: #2272eb;
  --t-blue-50: #e8f3ff;
  --t-blue-100: #c9e2ff;
  --t-ink: #191f28;
  --t-g800: #333d4b;
  --t-g700: #4e5968;
  --t-g600: #6b7684;
  --t-g500: #8b95a1;
  --t-g400: #b0b8c1;
  --t-g200: #e5e8eb;
  --t-g100: #f2f4f6;
  --t-g50: #f9fafb;
  --t-dark: #17171c;

  /* 네이버 구역 (신신 커넥트 랜딩 실측) */
  --n-green: #03c75a;
  --n-pay: #00de5a;
  --n-night: #020a04;          /* 초록빛 검정 — 순수 검정 대신 */
  --n-story: #011103;
  --n-mint: #f2fff7;
  --n-sky: #eaf3ff;
  --n-lav: #f3f2ff;
  --n-blue: #3283fd;
  --n-violet: #5a5cf6;         /* 플레이스+ 배지의 파랑→보라 계열 */

  /* 판매 띠 (신신 "85,968명이 신청했어요" 띠) */
  --strip: #16212c;
  --strip-hi: #4491fa;

  /* 움직임 — 토스 운영 번들(@tossteam/easings) 값 */
  --ease-out: cubic-bezier(.25, .1, .25, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  --col: 800px;                /* 내용 기둥 */
  --gut: 24px;                 /* 좁은 화면 좌우 여백 */
}

/* 메인 페이지 공통 규칙(섹션 여백 · 제목 글꼴)이 이 페이지 본문에 넘어오지 않게 끊는다 */
.page-card main section { padding: 0; }
.page-card main h1,
.page-card main h2,
.page-card main h3 {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.page-card main { color: var(--t-ink); }
.page-card main em { font-style: normal; }
.page-card main ul,
.page-card main ol { list-style: none; }


/* ---------- 기둥 ---------- */
.ct-col {
  width: 100%;
  max-width: calc(var(--col) + var(--gut) * 2);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* ---------- 섹션 머리 (신신 랜딩: 가운데 큰 두 줄 제목 + 회색 부제) ---------- */
.ct-head { text-align: center; }
.ct-eyebrow {                   /* 제목 위 색 이름표(신신 커넥트 "리뷰 자동화") */
  display: block;
  margin-bottom: 14px;
  font-size: clamp(18px, 3.4vw, 26px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--t-blue-d);
}
.page-card .ct-h2 {
  font-size: clamp(30px, 6.6vw, 54px);
  line-height: 1.38;
  color: var(--t-ink);
  word-break: keep-all;
}
.ct-h2 em { color: var(--t-blue-d); }
.ct-sub {
  margin-top: clamp(14px, 2.6vw, 22px);
  font-size: clamp(17px, 3.3vw, 26px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--t-g700);
}

/* ---------- 버튼 (토스 주 버튼: 높이 52 · 반경 12 · 600) ---------- */
.ct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 28px;
  border-radius: 12px;
  background: var(--t-blue);
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.ct-btn:hover { background: var(--t-blue-d); }
.ct-btn:active { transform: scale(.96); }               /* 토스: 누르면 0.96 */
.ct-btn:focus-visible { outline: 3px solid var(--t-blue-100); outline-offset: 3px; }
.ct-btn--green { background: var(--n-green); }
.ct-btn--green:hover { background: #02b351; }
.ct-btn--line {                                          /* 테두리 버튼 (아이샵케어 "정말 0원인지 확인하기 →") */
  height: 52px;
  border: 1px solid var(--t-g200);
  background: #fff;
  color: var(--t-blue);
}
.ct-btn--line:hover { background: var(--t-g50); }
.ct-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 파란 체크 목록 (신신 조합 카드의 체크리스트) ---------- */
.ct-checks li {
  position: relative;
  padding-left: 30px;
  font-size: clamp(15px, 2.6vw, 19px);
  line-height: 1.55;
  color: var(--t-g800);
}
.ct-checks li + li { margin-top: 10px; }
.ct-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .38em;
  width: 20px;
  height: 14px;
  background: var(--t-blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M2 7.2 7.3 12 18 2' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M2 7.2 7.3 12 18 2' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ct-checks--green li::before { background: var(--n-green); }
.ct-checks li b { font-weight: 700; color: var(--t-ink); }

/* ---------- 숫자 굴림 (js/card/motion.js) ---------- */
.roll--ready { display: inline-flex; align-items: baseline; }
.roll__col { display: inline-block; height: 1.15em; overflow: hidden; line-height: 1.15; vertical-align: bottom; }
.roll__strip { display: flex; flex-direction: column; }
.roll__strip span { display: block; height: 1.15em; }
.roll__sep { display: inline-block; overflow: hidden; }
.tnum { font-variant-numeric: tabular-nums; }
.roll { font-style: normal; }

/* 움직임 줄이기 — 모든 반복·전환을 끝 상태로 */
@media (prefers-reduced-motion: reduce) {
  .page-card *,
  .page-card *::before,
  .page-card *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==========================================================
   ① 첫 화면 (#hero) — 띠 한 줄 · 제목 한 줄 · 세트 카드 2장
   ========================================================== */
.page-card .ch { position: relative; padding-top: 66px; }
@media (min-width: 1024px) { .page-card .ch { padding-top: 76px; } }

/* 판매 띠 — 신신 토스 랜딩의 신청자 띠(#16212c · 높이 98 · 32/700 · 강조만 파랑)와 같은 자리·크기 */
.ch-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 18px var(--gut);
  background: var(--strip);
  text-align: center;
}
.ch-strip__txt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  font-size: clamp(18px, 3.6vw, 30px);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}
.ch-strip__txt b { color: var(--strip-hi); }

.ch__body {
  padding: clamp(56px, 9vw, 88px) 0 clamp(64px, 10vw, 104px);
  background: linear-gradient(180deg, #edf4fe 0%, #f7f9fd 60%, #ffffff 100%);
}
.page-card .ch__title {
  font-size: clamp(28px, 6vw, 50px);
  line-height: 1.3;
  text-align: center;
  color: var(--t-ink);
}

/* 세트 카드 — 같은 크기 2장, 그림 + 이름만. 고른 쪽만 색 테두리 */
.ch-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: clamp(36px, 6vw, 52px);
}
.ch-set {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 26px;
  background: #fff;
  text-align: center;
  box-shadow: 0 0 0 1px var(--t-g200);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .2s var(--ease-out);
}
.ch-set--toss  { --acc: var(--t-blue); --acc-shadow: rgba(49, 130, 246, .24); }
.ch-set--naver { --acc: var(--n-green); --acc-shadow: rgba(3, 199, 90, .26); }
.ch-set.is-on { border-color: var(--acc); box-shadow: 0 18px 40px -14px var(--acc-shadow); }
.ch-set:not(.is-on):hover { box-shadow: 0 0 0 1px var(--t-g400); }
.ch-set:active { transform: scale(.98); }
.ch-set:focus-visible { outline: 3px solid var(--acc); outline-offset: 4px; }

/* 그림 — 4:3 무대 위 실물 기기 (무대 바닥선: 토스판 왼쪽 81% → 오른쪽 67%, 네이버판 지평선 70% 안팎) */
.ch-set__stage { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.ch-set__plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-set__dev { position: absolute; height: auto; max-width: none; filter: drop-shadow(0 14px 14px rgba(25, 31, 40, .18)); }
.ch-set__dev--front    { left: 9%;  bottom: 7%; width: 47%; }
.ch-set__dev--terminal { right: 5%; bottom: 8%; width: 48%; }
.ch-set__dev--connect  { left: 10%; bottom: 6%; width: 46%; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .55)); }
.ch-set__dev--cat      { right: 4%; bottom: 7%; width: 46%; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .5)); }

.ch-set__name {
  display: block;
  padding: 22px 16px 24px;
  font-size: clamp(20px, 3.4vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--t-ink);
  transition: color .3s var(--ease-out);
}
.ch-set.is-on .ch-set__name { color: var(--acc); }

@media (max-width: 599px) {
  .ch-pick { gap: 10px; }
  .ch-set { border-radius: 18px; border-width: 2px; }
  .ch-set__name { padding: 14px 8px 16px; }
}

/* ==========================================================
   ② 와우오더에서 하면 (#benefit) — 제목 두 줄 + 8칸(아이콘 + 이름)
   신신 케어 그리드: 연회색 칸 #f4f4f4 · 큰 둥글기 · 굵은 이름
   ========================================================== */
.page-card .cb { padding: clamp(84px, 13vw, 128px) 0 clamp(84px, 13vw, 128px); background: #fff; }
.page-card .cb__title { text-align: center; }
.page-card[data-pick] .cb__title em,
.page-card .cb__title em { color: var(--t-blue-d); }
#card-main[data-pick="naver"] .cb__title em { color: var(--n-green); }

.cb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: clamp(40px, 6vw, 56px);
}
.cb-item {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 112px;
  padding: 18px 24px 18px 18px;
  border-radius: 22px;
  background: #f4f5f7;
}
.cb-item img { flex: none; width: 76px; height: 76px; object-fit: contain; }
.cb-item b { font-size: clamp(17px, 2.8vw, 22px); font-weight: 700; line-height: 1.4; color: var(--t-ink); }

@media (max-width: 599px) {
  .cb-grid { gap: 8px; }
  .cb-item { flex-direction: column; justify-content: center; gap: 8px; min-height: 0; padding: 18px 10px 20px; text-align: center; border-radius: 18px; }
  .cb-item img { width: 60px; height: 60px; }
}

/* ==========================================================
   ③ 진짜 무료? (#free) — 남색 + 제목 두 줄 + 답 한 줄 + 0원 카드 3장 + 흐르는 띠
   히엘포스 "숨겨진 사용 조건 전혀 없어요": #050d33 → #0a1550 남색, 카드 3장, 아래 흐르는 띠
   ========================================================== */
.page-card .cf {
  overflow: hidden;
  padding: clamp(84px, 13vw, 124px) 0 0;
  background: linear-gradient(180deg, #050d2e 0%, #0a1648 100%);
  text-align: center;
}
.page-card .cf__title { color: #fff; }
.page-card .cf__title em { color: #6aa8ff; }
.cf__answer {
  max-width: 560px;
  margin: clamp(16px, 2.6vw, 24px) auto 0;
  font-size: clamp(16px, 2.8vw, 22px);
  line-height: 1.6;
  color: #b0b8c1;
}

.cf-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: clamp(40px, 6vw, 56px);
}
.cf__law { padding: 18px 0 clamp(64px, 10vw, 96px); font-size: 13px; line-height: 1.5; color: #6f7c99; }
.cf-cards li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 190px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.cf-cards span { font-size: clamp(15px, 2.4vw, 20px); font-weight: 500; color: #b0b8c1; }
.cf-cards b { font-size: clamp(34px, 6.4vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #fff; }

/* 흐르는 띠 — 오른쪽에서 왼쪽으로 천천히(40초 한 바퀴), 마우스를 올리면 멈춤 */
.cf-ticker { overflow: hidden; background: var(--t-blue); }
.cf-ticker__in { display: flex; width: max-content; animation: cf-flow 40s linear infinite; }
.cf-ticker:hover .cf-ticker__in { animation-play-state: paused; }
.cf-ticker span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 20px 40px;
  font-size: clamp(16px, 2.6vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
}
.cf-ticker img { width: 34px; height: 34px; object-fit: contain; }
@keyframes cf-flow { to { transform: translateX(-50%); } }

@media (max-width: 599px) {
  .cf-cards { gap: 8px; }
  .cf-cards li { min-height: 128px; border-radius: 16px; }
}

/* ==========================================================
   ④ 고른 세트 자세히 (#products) — 섹션마다 두 줄 제목 + 그림 한 덩어리
   ========================================================== */
.page-card .ts,
.page-card .ns { position: relative; overflow: hidden; padding: clamp(84px, 13vw, 128px) 0; text-align: center; }
.page-card .ts .ct-h2 em { color: var(--t-blue-d); }

/* ---------- 토스 구역 — 신신 토스 배경 리듬 ---------- */
.page-card .ts-intro  { background: #fff; padding-bottom: 0; }
.page-card .ts-pay    { background: #f7f9fb; }
.page-card .ts-screen { background: #e6eaef; }
.page-card .ts-design { background: #fff; }
.page-card .ts-term   { background: var(--t-blue-50); }
.page-card .ts-pos    { background: #fff; }

/* T1 세트 소개 — 넓은 무대 위 실물 두 대 */
.ts-intro__stage {
  position: relative;
  max-width: 1280px;
  margin: clamp(36px, 6vw, 56px) auto 0;
  aspect-ratio: 16 / 7.4;
  overflow: hidden;
}
.ts-intro__plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ts-intro__front,
.ts-intro__term { position: absolute; height: auto; max-width: none; filter: drop-shadow(0 22px 22px rgba(25, 31, 40, .18)); }
.ts-intro__front { left: 30%; bottom: 7%; width: 22%; }
.ts-intro__term  { left: 50%; bottom: 9%; width: 23%; }

/* T2 모든 결제 — 2×2 사진 칸 */
.ts-pay__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: clamp(36px, 6vw, 56px);
}
.ts-pay__tiles li {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 20px;
  background: #e9edf1;
}
.ts-pay__tiles li > img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.ts-pay__face { display: flex; align-items: flex-end; justify-content: center; }
.ts-face { position: relative; display: block; width: 34%; margin-bottom: -2%; }
.ts-face img { display: block; width: 100%; height: auto; }
.ts-face__screen {                      /* 정면 사진의 화면 영역: 가로 12.1~87.2% · 세로 6.6~72.9% */
  position: absolute;
  left: 12.1%; top: 6.6%; width: 75.1%; height: 66.3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8%;
  border-radius: 4px;
  background: linear-gradient(180deg, #1c2532 0%, #10151d 100%);
}
.ts-face__scan { width: 64%; fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; }
.ts-face__screen b { font-size: clamp(9px, 1.5vw, 13px); font-weight: 700; color: #fff; letter-spacing: 0; }
.ts-face__scan path:first-child { stroke: var(--t-blue); }

/* T3 첫 화면 꾸미기 — 커버플로우(가운데 크게, 양옆 작게·뒤로) */
.ts-flow { position: relative; height: clamp(300px, 54vw, 560px); margin-top: clamp(36px, 6vw, 60px); }
.ts-flow__track { position: absolute; inset: 0; }
.ts-flow__item {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: clamp(170px, 30vw, 300px);
  transform: translateX(-50%) translateX(var(--tx, 0)) scale(var(--sc, 1));
  transform-origin: 50% 100%;
  z-index: var(--z, 1);
  opacity: var(--op, 1);
  transition: transform .8s var(--ease-expo), opacity .8s var(--ease-expo);
}
.ts-flow__dev { display: block; width: 100%; height: auto; }
.ts-flow__wp {                          /* 정면 사진의 화면 영역에 배경화면을 끼운다 */
  position: absolute;
  left: 12.1%; top: 6.6%; width: 75.1%; height: 66.3%;
  object-fit: cover;
  border-radius: 2.5% / 1.6%;
}

/* T4 디자인 — 낮/밤 사진 두 장(장면 + 실물 합성) */
.ts-design__photos { display: grid; gap: 20px; margin-top: clamp(36px, 6vw, 56px); }
.ts-photo { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 24px; background: #e9edf1; }
.ts-photo__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ts-photo__dev { position: absolute; left: 50%; bottom: var(--dev-b, 16%); width: var(--dev-w, 27%); height: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .28)); }
/* 낮 사진 — 프론트 2(왼쪽 앞) + 터미널 2(오른쪽). 장면판 실측: 카운터 윗면 58~94%, 프론트 높이 사진의 44~48% · 발 80~84%
   빛은 왼쪽 창 — 기기에 아주 옅은 낮빛 색을 입힌다 */
.ts-photo--day .ts-photo__dev { filter: brightness(.97) sepia(.05) drop-shadow(10px 16px 14px rgba(60, 52, 45, .3)); }
.ts-photo--day .ts-photo__dev--front { left: 41%; bottom: 17%; width: 24.5%; }
.ts-photo--day .ts-photo__dev--term  { left: 61%; bottom: 16%; width: 25%; }
/* 밤 사진 — 프론트 높이 46~50% · 발 78~82%, 따뜻한 텅스텐 빛 */
.ts-photo--night .ts-photo__dev { bottom: 19%; width: 26%; filter: brightness(.9) sepia(.22) saturate(1.05) drop-shadow(0 16px 14px rgba(12, 6, 2, .5)); }
.ts-photo__award {
  position: absolute;
  left: 20px;
  top: 20px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  font-size: 14px;
  font-weight: 700;
  color: var(--t-ink);
}

/* T5 터미널 2 */
.ts-term__fig { margin: clamp(36px, 6vw, 56px) auto 0; max-width: 560px; }
.ts-term__fig img { width: 100%; height: auto; filter: drop-shadow(0 26px 30px rgba(49, 70, 110, .18)); }

/* T6 토스 포스 구성 — 카드 3장(그림 · 이름 · 가격), 평생 0원 카드만 파란 테두리 */
.ts-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(36px, 6vw, 56px); }
.ts-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 26px;
  border: 2px solid var(--t-g200);
  border-radius: 22px;
  background: #fff;
}
.ts-plan.is-best { border-color: var(--t-blue); }
.ts-plan__fig {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: var(--t-g100);
}
.ts-plan__fig img { position: absolute; height: auto; max-width: none; }
.ts-plan__a { left: 10%; bottom: 14%; width: 46%; }
.ts-plan__b { right: 7%; bottom: 15%; width: 48%; }
.ts-plan__pos { left: 50%; bottom: 16%; width: 78%; transform: translateX(-50%); }
.ts-plan__pos--pc { width: 72%; bottom: 12%; }
.ts-plan__txt { display: flex; flex-direction: column; align-items: center; }
.ts-plan__name { margin-top: 18px; font-size: clamp(15px, 2.4vw, 19px); font-weight: 700; color: var(--t-g800); }
.ts-plan__price { margin-top: 4px; font-size: clamp(22px, 3.8vw, 30px); font-weight: 800; letter-spacing: -0.02em; color: var(--t-ink); }
.ts-plan.is-best .ts-plan__price { color: var(--t-blue); }
.ts-pos__note { margin-top: 20px; font-size: 15px; color: var(--t-g500); }

/* ---------- Npay 커넥트 구역 — 초록빛 검정 다크 시리즈 ---------- */
.page-card .ns { background: var(--n-night); color: #fff; }
.page-card .ns .ct-h2 { color: #fff; }
.page-card .ns .ct-h2 em { color: var(--n-green); }
.page-card .ns-story  { background: var(--n-story); }
.page-card .ns-review { background: #040e07; }
.page-card .ns-pay    { background: var(--n-night); }
.page-card .ns-cat    { background: #061209; }

/* N1 소개 — 넓은 지평선 빛 위 실물 두 대 */
.page-card .ns-intro { padding-bottom: 0; }
.ns-intro__plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ns-intro .ct-col { position: relative; }
.ns-intro__film {                      /* 영상 가장자리를 바탕 어둠에 녹인다 — 테두리·상자 없음 */
  position: relative;
  max-width: 760px;
  margin: clamp(28px, 5vw, 44px) auto 0;
  aspect-ratio: 1034 / 960;
}
.ns-intro__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask: radial-gradient(closest-side at 50% 50%, #000 62%, transparent 100%);   /* 가장자리에서 정확히 투명 */
          mask: radial-gradient(closest-side at 50% 50%, #000 62%, transparent 100%);
}

/* N2 이야기 */
.ns-story__fig { position: relative; margin: clamp(32px, 5vw, 48px) auto 0; max-width: 720px; }
.ns-story__fig img { width: 100%; height: auto; }
.ns-story__tag {
  position: absolute;
  top: 3%;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: clamp(13px, 2vw, 18px);
  font-weight: 800;
  transform: translateX(-50%);
}
.ns-story__tag--a { left: 19%; background: #3a3f3c; color: #c9cecb; }
.ns-story__tag--b { left: 77%; background: var(--n-green); color: #fff; }
.ns-story__answer { margin-top: clamp(24px, 4vw, 36px); font-size: clamp(20px, 3.6vw, 30px); font-weight: 600; color: #e6ece8; }
.ns-story__answer b { color: var(--n-green); }

/* 커넥트 기기 + 화면 — 정면 사진의 실제 화면: 가로 6.2~79% · 세로 10.8~88.4% */
.ns-dev { position: relative; width: clamp(220px, 36vw, 340px); margin: 0 auto; }
.ns-dev__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 28px 30px rgba(0, 0, 0, .55)); }
.ns-dev__screen {
  position: absolute;
  left: 6.2%; top: 10.8%; width: 72.8%; height: 77.6%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 3px;
  background: #111412;
  text-align: left;
}

/* N3 키워드 리뷰 화면 */
.ns-review__stage { position: relative; margin-top: clamp(36px, 6vw, 56px); }
.ns-kw { padding: 13% 8% 8%; }
.ns-kw__done { font-size: clamp(9px, 1.4vw, 13px); font-weight: 600; color: var(--n-pay); }
.ns-kw__q { margin-top: 3%; font-size: clamp(12px, 2vw, 19px); font-weight: 700; line-height: 1.35; color: #fff; }
.ns-kw__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8%; }
.ns-kw__chips li {
  padding: .55em .7em;
  border: 1.5px solid #2c312e;
  border-radius: 8px;
  font-size: clamp(9px, 1.35vw, 12.5px);
  font-weight: 600;
  line-height: 1.2;
  color: #c7ccc9;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.ns-kw__chips li.is-on { border-color: var(--n-green); background: rgba(3, 199, 90, .16); color: #fff; }
.ns-kw__btn {
  margin-top: auto;
  padding: 6% 0;
  border-radius: 8px;
  background: var(--n-green);
  font-size: clamp(10px, 1.5vw, 14px);
  font-weight: 700;
  text-align: center;
  color: #fff;
}
.ns-review__pop {
  position: absolute;
  left: calc(50% + clamp(90px, 15vw, 150px));
  top: 18%;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
  font-size: clamp(13px, 2vw, 17px);
  font-weight: 600;
  color: var(--t-ink);
  white-space: nowrap;
}
.ns-review__pop b { color: var(--n-green); }

/* N4 결제 수단 화면 — 네 가지가 차례로 */
.ns-pay__stage { margin-top: clamp(36px, 6vw, 56px); }
.ns-pay__screen { padding: 14% 9% 10%; background: #0f1311; }
.ns-pay__amt { font-size: clamp(10px, 1.5vw, 14px); color: #9aa39e; }
.ns-pay__amt b { display: block; margin-top: 2%; font-size: clamp(16px, 2.8vw, 26px); font-weight: 800; color: #fff; }
.ns-pay__ways { position: relative; flex: 1; margin-top: 10%; }
.ns-pay__ways li {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6%;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--ease-out), transform .55s var(--ease-expo);
}
.ns-pay__ways li.is-on { opacity: 1; transform: none; }
.ns-pay__ways b { font-size: clamp(12px, 2vw, 18px); font-weight: 700; color: #fff; }
.ns-pay__ways span { font-size: clamp(10px, 1.5vw, 13px); font-weight: 600; color: var(--n-green); }

/* N5 CAT 연결 — CAT · 초록 선 · 커넥트 */
.ns-cat__fig {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  max-width: 640px;
  height: clamp(220px, 38vw, 340px);
  margin: clamp(36px, 6vw, 56px) auto 0;
}
.ns-cat__cat { position: relative; z-index: 1; width: 42%; height: auto; filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .5)); }
.ns-cat__connect { position: relative; z-index: 1; width: 30%; height: auto; margin-left: 6%; filter: drop-shadow(0 24px 24px rgba(0, 0, 0, .55)); }
.ns-cat__wire {
  position: absolute;
  left: 30%;
  bottom: 18%;
  width: 34%;
  height: 34%;
  fill: none;
  stroke: var(--n-green);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
  animation: ns-wire 1.6s linear infinite;
}
@keyframes ns-wire { to { stroke-dashoffset: -28; } }

/* ==========================================================
   ⑤ 도입 절차 (#step) — 아이콘 칸 4개 + 점선
   ========================================================== */
.page-card .cs { padding: clamp(84px, 13vw, 124px) 0; background: #fff; text-align: center; }
.page-card .cs .ct-h2 em { color: var(--t-blue-d); }
#card-main[data-pick="naver"] .cs .ct-h2 em { color: var(--n-green); }
.cs-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: clamp(36px, 6vw, 56px);
  padding: 32px 24px 30px;
  border-radius: 24px;
  background: #f4f5f7;
}
.cs-steps::before {                     /* 칸 사이를 잇는 점선 */
  content: "";
  position: absolute;
  left: 18%; right: 18%; top: 72px;
  border-top: 2px dashed #cfd5dc;
}
.cs-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cs-steps__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: #fff;
}
.cs-steps__ic svg { width: 36px; height: 36px; fill: none; stroke: var(--t-g800); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-steps b { font-size: clamp(15px, 2.4vw, 19px); font-weight: 700; color: var(--t-ink); }

/* ==========================================================
   ⑥ 무료 상담 신청 (#end) — 신신 상담 카드
   ========================================================== */
.page-card .cc { padding: clamp(72px, 11vw, 104px) 0 clamp(96px, 14vw, 140px); background: #f5f8fd; }
.cc-card {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 72px) clamp(20px, 6vw, 72px);
  border-radius: 28px;
  background: #fff;
  text-align: center;
}
.page-card .cc-card__title em { color: var(--t-blue-d); }
#card-main[data-pick="naver"] .cc-card__title em { color: var(--n-green); }
.cc-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: clamp(28px, 5vw, 40px);
  padding: 6px;
  border-radius: 16px;
  background: var(--t-g100);
}
.cc-seg label { position: relative; cursor: pointer; }
.cc-seg input { position: absolute; opacity: 0; pointer-events: none; }
.cc-seg span {
  display: block;
  padding: 14px 8px;
  border-radius: 12px;
  font-size: clamp(14px, 2.4vw, 17px);
  font-weight: 700;
  color: var(--t-g600);
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.cc-seg input:checked + span { background: var(--t-ink); color: #fff; }
.cc-seg input:focus-visible + span { outline: 3px solid var(--t-blue-100); outline-offset: 2px; }
.cc-input {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: 12px;
  padding: 0 20px;
  border: 1.5px solid var(--t-g200);
  border-radius: 14px;
  font: inherit;
  font-size: 18px;
  color: var(--t-ink);
  outline: none;
  transition: border-color .2s var(--ease-out);
}
.cc-input:focus { border-color: var(--t-blue); }
.cc-input.is-error { border-color: #d71900; }
.cc-agree { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--t-g600); cursor: pointer; }
.cc-agree input { width: 18px; height: 18px; accent-color: var(--t-blue); }
.cc-agree a { color: var(--t-g500); text-decoration: underline; }
.cc-btn { width: 100%; height: 62px; margin-top: 18px; font-size: 19px; }
#card-main[data-pick="naver"] .cc-btn { background: var(--n-green); }
.cc-msg { margin-top: 16px; font-size: 16px; font-weight: 600; color: var(--t-blue-d); }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 599px) {
  .ts-pay__tiles { gap: 8px; }
  .ts-pay__tiles li { border-radius: 14px; }
  .ts-plans { grid-template-columns: 1fr; }
  .ts-plan { flex-direction: row; gap: 18px; padding: 12px; text-align: left; }
  .ts-plan__fig { width: 104px; flex: none; }
  .ts-plan__txt { align-items: flex-start; }
  .ts-plan__name { margin-top: 0; white-space: nowrap; }
  .ts-plan__price { white-space: nowrap; }
  .ts-intro__stage { aspect-ratio: 4 / 3; }
  .ts-intro__front { left: 14%; width: 38%; }
  .ts-intro__term  { left: 49%; width: 40%; }
  .cs-steps { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .cs-steps::before { display: none; }
  .ns-review__pop { position: static; display: inline-block; margin-top: 20px; }
}