@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap");

/* 모든 선택자는 .wn-page 아래에 씁니다 */
.wn-page {
  /* 색 */
  --acc: #34f5a1;
  --acc-rgb: 52, 245, 161;
  --acc-deep: #12c97f;
  --ink: #03130b;
  --bg: #050806;
  --panel: #0c120f;
  --text: #fff;
  --body: rgba(255, 255, 255, 0.84);
  --mute: #8b948f;
  --line: rgba(255, 255, 255, 0.12);
  --edge: rgba(52, 245, 161, 0.5);
  --up: #ff4d4d;
  --red: #e01b1b;
  --gold: #ffcf3f;

  /* 간격: 모든 구역이 이 다섯 값만 씁니다 */
  --sec: 72px;    /* 구역 위아래 */
  --group: 88px;  /* 한 구역 안에서 새 이야기가 시작될 때 */
  --gap: 32px;    /* 제목과 내용, 내용과 내용 */
  --tight: 14px;  /* 작은 말머리와 제목 */
  --note: 14px;   /* 각주 */

  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  word-break: keep-all;
  letter-spacing: -0.03em;
  -webkit-font-smoothing: antialiased;
}

.wn-page * {
  box-sizing: border-box;
}

/* 구역 */
.wn-page section {
  position: relative;
  width: 100%;
  padding-block: var(--sec);
  padding-inline: max(24px, calc((100% - 600px) / 2));
  background: var(--bg);
  text-align: center;
  overflow-x: clip;
}

.wn-page .wn-rel {
  position: relative;
}

.wn-page .wn-glowtop,
.wn-page .wn-last {
  background: radial-gradient(ellipse 100% 420px at 50% 40%, rgba(var(--acc-rgb), 0.13), transparent 74%), var(--bg);
}

/* ───────── 간격 규칙 ─────────
   1) 구역 안의 덩어리는 기본 --gap 만큼 띄웁니다
   2) 말머리(.wn-s)·태그 바로 뒤는 --tight 로 붙입니다
   3) 내용 뒤에 새 말머리·제목이 오면 --group 만큼 띄웁니다
   4) 각주는 바로 위 내용에 붙입니다 */
.wn-page section > * {
  margin-top: 0;
  margin-bottom: 0;
}

.wn-page section > * + * {
  margin-top: var(--gap);
}

.wn-page section > :not(.wn-s, .wn-tag, .wn-notch, .wn-scribble) + :is(.wn-s, h1, h2, .wn-mt) {
  margin-top: var(--group);
}

.wn-page section > :is(.wn-s, .wn-tag) + * {
  margin-top: var(--tight);
}

.wn-page section > :is(h1, h2, h3) + :is(h2, h3, .wn-lead) {
  margin-top: 18px;
}

.wn-page section > * + .wn-small {
  margin-top: var(--note);
}

.wn-page section > :is(.wn-notch, .wn-scribble) + * {
  margin-top: 0;
}

/* 구분선 위아래는 같은 간격 */
.wn-page section > :is(.wn-vline, .wn-tri) + :is(*, .wn-s, h1, h2, .wn-mt) {
  margin-top: var(--gap);
}

/* 큰 숫자·이름 바로 뒤 제목은 붙입니다 */
.wn-page section > :is(.wn-huge, .wn-osname) + :is(h2, h3, .wn-pick) {
  margin-top: 18px;
}

/* 글자 */
.wn-page h1 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.045em;
}

.wn-page h2 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.36;
  letter-spacing: -0.04em;
}

.wn-page h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.035em;
}

.wn-page :where(p, ul, ol, figure) {
  margin: 0;
}

.wn-page p {
  color: var(--body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
}

.wn-page b {
  font-weight: 700;
}

/* 말머리: 제목 위의 작은 한 줄 */
.wn-page .wn-s {
  color: var(--body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
}

.wn-page .wn-lead {
  font-size: 17px;
}

.wn-page .wn-small {
  color: var(--mute);
  font-size: 12.5px;
  line-height: 1.6;
}

.wn-page .wn-acc {
  color: var(--acc);
}

.wn-page .wn-up {
  color: var(--up);
}

/* 강조: 바탕을 칠하지 않고 글자색으로만 */
/* 강조: 바탕 상자 없이 글자색으로만 (빨강 = 문제, 민트 = 해답) */
.wn-page mark {
  padding: 0;
  background: none;
  color: var(--up);
}

.wn-page mark.wn-glow {
  color: var(--acc);
}

/* 알약 태그 (LIMITED OFFER 느낌) */
.wn-page .wn-tag,
.wn-page .wn-pill {
  display: inline-block;
  padding: 5px 14px 6px;
  border-radius: 99px;
  background: var(--acc);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* 대괄호 라벨 [ ... ] */
.wn-page .wn-bracket {
  position: relative;
  display: inline-block;
  padding: 6px 20px;
  color: var(--acc);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
}

.wn-page .wn-bracket::before,
.wn-page .wn-bracket::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9px;
  border: 2.5px solid var(--acc);
}

.wn-page .wn-bracket::before {
  left: 0;
  border-right: 0;
}

.wn-page .wn-bracket::after {
  right: 0;
  border-left: 0;
}

/* 큰 글자 */
.wn-page .wn-name {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.045em;
}

.wn-page .wn-huge {
  color: var(--acc);
  font-size: 96px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
}

/* 세로 구분선 */
.wn-page .wn-vline,
.wn-page .wn-tri {
  display: block;
  width: 1px;
  height: 96px;
  margin-inline: auto;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
}

.wn-page .wn-tri i {
  display: none;
}

/* 이미지 */
.wn-page img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}

/* 캡처 화면: 하늘색 점선 테두리 */
.wn-page .wn-shot {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  border: 2px dashed var(--acc);
  border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(var(--acc-rgb), 0.08), 0 0 28px rgba(var(--acc-rgb), 0.18);
}

.wn-page .wn-wide {
  max-width: 600px;
}

.wn-page .wn-mini {
  max-width: 240px;
}

.wn-page .wn-phone {
  width: min(250px, 66%);
  margin-inline: auto;
  padding: 6px;
  border-radius: 34px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(var(--acc-rgb), 0.45), 0 0 40px rgba(var(--acc-rgb), 0.22);
}

.wn-page .wn-phone img {
  border-radius: 28px;
}

.wn-page .wn-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 560px;
  margin-inline: auto;
}

/* 영상 자리 */
.wn-page .wn-video {
  position: relative;
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
}

.wn-page .wn-video-v {
  max-width: 400px;
  aspect-ratio: 9 / 16;
}

.wn-page .wn-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ───────── 첫 화면 ───────── */
.wn-page .wn-hero {
  overflow: hidden;
  padding-top: 64px;
  background: radial-gradient(ellipse 110% 460px at 50% 0, rgba(var(--acc-rgb), 0.16), transparent 72%), var(--bg);
}

.wn-page .wn-lead-h {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.45;
}

.wn-page .wn-osname {
  color: var(--acc);
  font-size: 48px;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.05em;
}

.wn-page .wn-osname-q {
  white-space: nowrap;
}

.wn-page section > .wn-lead-h + .wn-osname {
  margin-top: 18px;
}

.wn-page section > .wn-osname + .wn-one {
  margin-top: 10px;
}

.wn-page section > .wn-one + .wn-s {
  margin-top: 56px;
}

.wn-page .wn-one {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.wn-page .wn-hero h2 mark {
  display: inline-block;
}

/* 첫 화면: 작은 말머리 → 큰 제목 → 한 줄 설명, 세 단계만 */
.wn-page .wn-hero-eye {
  color: var(--body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.wn-page .wn-hero-title {
  font-size: clamp(34px, 11.4vw, 44px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.wn-page .wn-hero-sub {
  color: var(--body);
  font-size: 18px;
  font-weight: 500;
}

.wn-page .wn-hero-sub b {
  color: #fff;
  font-weight: 800;
}

.wn-page section > .wn-tag + .wn-todo + .wn-hero-eye {
  margin-top: 28px;
}

.wn-page section > .wn-hero-eye + .wn-hero-title {
  margin-top: 14px;
}

.wn-page section > .wn-hero-title + .wn-hero-sub {
  margin-top: 18px;
}

.wn-page section > .wn-hero-sub + .wn-shot {
  margin-top: 44px;
}

.wn-page section > .wn-hero-img + .wn-stats {
  margin-top: 36px;
}

/* ───────── 오프닝 이야기 ───────── */
.wn-page .wn-hero-eye b {
  color: #fff;
  font-weight: 800;
}

.wn-page section.wn-story > .wn-tag + .wn-hero-eye {
  margin-top: 28px;
}

/* 표지 아래: 내 컴퓨터에 직접 만들어서 / 평생 사용합시다 */
.wn-page .wn-own-pre {
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
}

.wn-page .wn-own {
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.05em;
}

.wn-page section.wn-story > .wn-top-img + .wn-own-pre {
  margin-top: 48px;
}

.wn-page section.wn-story > .wn-own-pre + .wn-own {
  margin-top: 8px;
}

/* 큰 제목 아래 표지 이미지 */
.wn-page section.wn-story > * + .wn-top-img {
  margin-top: 36px;
}

/* 레퍼런스(430px 폭) 실측을 375px 폭으로 환산한 값.
   굵은 건 강조 단어만, 나머지는 보통 굵기 */
.wn-story .wn-hero-eye {
  color: #fff;
  font-size: 17px;
  font-weight: 400;
}

.wn-page .wn-story-lead {
  color: #fff;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
}

.wn-page .wn-story-lead b,
.wn-page .wn-story-p b,
.wn-page .wn-story-big b {
  font-weight: 800;
}

.wn-page .wn-story-p {
  color: #fff;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.55;
}

.wn-page .wn-story-big {
  color: #fff;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.04em;
}

.wn-page .wn-story-end {
  font-size: 29px;
}

.wn-page .wn-big-acc {
  color: var(--acc);
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.wn-page .wn-vline-l {
  height: 150px;
}

.wn-page .wn-howto {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.045em;
}

/* 지인 구역 제목: 작은 두 줄 → 큰 민트 한 줄 → 두 줄 */
.wn-page .wn-ease-h {
  font-size: clamp(26px, 8.6vw, 34px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.05em;
}

.wn-page section.wn-ease > .wn-story-p + .wn-ease-h {
  margin-top: 14px;
}

.wn-page section.wn-ease > .wn-ease-h + .wn-kakao {
  margin-top: 44px;
}

.wn-page section.wn-notend > .wn-story-p + .wn-howto {
  margin-top: 8px;
}

.wn-page section.wn-notend > .wn-howto + .wn-story-p {
  margin-top: 28px;
}

/* 이야기 → '그 방법' 사이를 잇는 민트 선 (아래로 갈수록 진해짐) */
.wn-page section.wn-notend > .wn-vline-m {
  width: 2px;
  height: 110px;
  margin-top: -24px;
  background: linear-gradient(rgba(var(--acc-rgb), 0), var(--acc));
}

.wn-page section.wn-notend > .wn-vline-m + * {
  margin-top: 36px;
}

/* 세 줄 답을 위아래 가는 선으로 묶습니다 */
.wn-page .wn-howto-box {
  position: relative;
  max-width: 300px;
  margin-inline: auto;
  padding: 24px 0;
  border-top: 1px solid rgba(var(--acc-rgb), 0.55);
  border-bottom: 1px solid rgba(var(--acc-rgb), 0.55);
}

.wn-page .wn-howto-box::before,
.wn-page .wn-howto-box::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--acc);
}

.wn-page .wn-howto-box::before {
  top: -4px;
}

.wn-page .wn-howto-box::after {
  bottom: -4px;
}

.wn-page section.wn-story > .wn-hero-eye + .wn-story-lead {
  margin-top: 12px;
}

.wn-page section.wn-story > .wn-story-lead + .wn-hero-title {
  margin-top: 26px;
}

/* 레퍼런스처럼 길고 옅은 세로선, 위아래 넉넉하게 */
.wn-page section.wn-story > .wn-vline-l {
  width: 2px;
  height: 260px;
  background: var(--acc);
}

.wn-page section.wn-story > * + .wn-vline-l {
  margin-top: 104px;
}

.wn-page section.wn-story > .wn-vline-l + * {
  margin-top: 96px;
}

.wn-page section.wn-story > .wn-story-p + .wn-story-p {
  margin-top: 46px;
}

.wn-page section.wn-story > .wn-story-p + .wn-story-big {
  margin-top: 150px;
}

.wn-page section.wn-story > .wn-story-big + .wn-story-end {
  margin-top: 300px;
}

.wn-page section:is(.wn-story, .wn-notend) > .wn-vline + * {
  margin-top: 40px;
}

.wn-page section:is(.wn-story, .wn-notend) > * + .wn-vline {
  margin-top: 40px;
}

.wn-page section.wn-story > .wn-story-p + .wn-story-p {
  margin-top: 56px;
}

.wn-page section.wn-story > * + .wn-story-big {
  margin-top: 120px;
}

.wn-page section.wn-notend > .wn-big-acc + .wn-story-p {
  margin-top: 22px;
}

.wn-page section.wn-notend > .wn-story-p + .wn-big-acc {
  margin-top: 16px;
}

.wn-page section.wn-notend > .wn-story-p + .wn-hero-img {
  margin-top: 48px;
}

/* 후기 카드: 프로필 → 전(회색) → 후(굵게, 민트 막대) */
.wn-page .wn-voice {
  display: grid;
  gap: 12px;
  text-align: left;
}

.wn-page .wn-voice > div {
  padding: 20px 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.wn-page .wn-voice-who {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--body);
  font-size: 14px;
  font-weight: 700;
}

.wn-page .wn-voice-who i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1c2a24;
  color: var(--acc);
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
}

.wn-page .wn-voice-before {
  margin-top: 16px;
  color: var(--mute);
  font-size: 14.5px;
  line-height: 1.5;
}

.wn-page .wn-voice-after {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 3px solid var(--acc);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.03em;
}


/* 실제 사례 카드 */
.wn-page section.wn-cases > :is(.wn-todo, h2) + .wn-case {
  margin-top: 64px;
}

.wn-page section.wn-cases > .wn-case + .wn-case {
  margin-top: 104px;
}

.wn-page section.wn-cases > .wn-case + .wn-small {
  margin-top: 24px;
}

.wn-page .wn-case-pre {
  margin-top: 28px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

.wn-page .wn-case-big {
  margin-top: 4px;
  color: var(--acc);
  font-size: 52px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.05em;
}

.wn-page .wn-case-shot {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 3;
  margin: 28px auto 0;
  border: 2px dashed var(--acc);
  border-radius: 6px;
  background: var(--panel);
  color: var(--mute);
  font-size: 15px;
}

/* ───────── 공감 시작 ───────── */
.wn-page .wn-hook {
  overflow: hidden;
  padding-top: calc(var(--sec) + 24px);
}

/* 질문 한 줄(흰색) → 핵심 한 단어(빨간 상자) → 결론(빨간 큰 글씨), 세 단계만 */
.wn-page .wn-hook > .wn-s {
  color: var(--mute);
  font-size: 16px;
  font-weight: 400;
}

.wn-page .wn-hook h1 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.wn-page .wn-hook h1 mark {
  display: inline-block;
  margin-top: 14px;
  padding: 2px 16px 6px;
  font-size: 50px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.05em;
}

.wn-page .wn-hook .wn-stoplead {
  color: var(--mute);
  font-size: 16px;
  font-weight: 400;
  transition: opacity 0.3s ease;
}

.wn-page .wn-hook > h1 + .wn-stoplead {
  margin-top: 64px;
}

.wn-page .wn-hook .wn-stoplead.is-wait {
  opacity: 0;
}

.wn-page section > .wn-stoplead + .wn-stop {
  margin-top: 6px;
}

.wn-page .wn-hook .wn-stop {
  color: var(--up);
  font-size: 56px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.wn-page .wn-hook .wn-stop.is-wait {
  opacity: 0;
}

/* 이름에 붙는 말풍선 */
.wn-page .wn-osname-m {
  position: relative;
  display: inline-block;
  font-size: 52px;
  filter: none;
}

.wn-page .wn-bubble {
  position: absolute;
  top: -34px;
  right: 2px;
  padding: 6px 13px 7px;
  border-radius: 14px;
  background: var(--gold);
  color: #111;
  -webkit-text-fill-color: #111;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  white-space: nowrap;
  transform: rotate(-4deg);
  transform-origin: 80% 100%;
  animation: wn-wiggle 2.4s ease-in-out infinite;
}

.wn-page .wn-bubble::after {
  content: "";
  position: absolute;
  right: 30px;
  bottom: -9px;
  border-top: 10px solid var(--gold);
  border-right: 10px solid transparent;
}

@keyframes wn-wiggle {
  0%, 70%, 100% { transform: rotate(-4deg); }
  78% { transform: rotate(-9deg); }
  86% { transform: rotate(1deg); }
  93% { transform: rotate(-6deg); }
}

.wn-page .wn-pick {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.wn-page .wn-pick mark {
  font-weight: 800;
}

/* 읽을 때쯤 긋는 취소선 */
.wn-page .wn-strike {
  position: relative;
}

.wn-page .wn-strike::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -8px;
  left: -8px;
  height: 10px;
  margin-top: -5px;
  border-radius: 6px;
  background: var(--acc);
  box-shadow: 0 0 16px rgba(var(--acc-rgb), 0.6);
  transform: rotate(-4deg) scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

.wn-page .wn-strike.is-on::after {
  transform: rotate(-4deg) scaleX(1);
}

/* 낙서 구분선 */
.wn-page .wn-scribble {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(300px, 80%);
  height: auto;
  overflow: visible;
  transform: translate(-50%, -50%);
}

.wn-page .wn-hook .wn-scribble {
  transform: translate(-50%, 0);
}

.wn-page .wn-scribble path {
  fill: none;
  stroke: var(--acc);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
}

/* ───────── 움직임 ───────── */
.wn-page .wn-orbit {
  transform-origin: 165px 165px;
  animation: wn-spin 6s linear infinite;
}

.wn-page .wn-orbit-s {
  transform-origin: 135px 135px;
  animation-duration: 3s;
}

.wn-page .wn-spark {
  fill: #fff;
  filter: drop-shadow(0 0 7px var(--acc));
}

.wn-page .wn-n .wn-node {
  animation: wn-node 6s linear infinite;
  animation-delay: var(--d);
}

.wn-page .wn-n .wn-node-t {
  animation: wn-node-t 6s linear infinite;
  animation-delay: var(--d);
}

.wn-page .wn-n-s .wn-node,
.wn-page .wn-n-s .wn-node-t {
  animation-duration: 3s;
}

.wn-page .wn-core {
  animation: wn-pulse 2s ease-in-out infinite;
}

.wn-page .wn-ring {
  animation: wn-dash 8s linear infinite;
}

.wn-page .wn-swing-line {
  stroke-dasharray: 1;
  animation: wn-draw 5s linear infinite;
}

.wn-page .wn-swing-top,
.wn-page .wn-swing-tags span {
  animation: wn-show1 5s linear infinite;
}

.wn-page .wn-swing-tags b {
  animation: wn-show2 5s linear infinite;
}

.wn-page .wn-swing-end,
.wn-page .wn-swing-tags .wn-more {
  animation: wn-show3 5s linear infinite;
}

.wn-page .wn-time li::before {
  animation: wn-step 6s linear infinite;
  animation-delay: calc(var(--t, 0) * 0.9s);
}

.wn-page .wn-time li:nth-child(2) { --t: 1; }
.wn-page .wn-time li:nth-child(3) { --t: 2; }
.wn-page .wn-time li:nth-child(4) { --t: 3; }
.wn-page .wn-time li:nth-child(5) { --t: 4; }

.wn-page .wn-time .wn-end::before {
  animation: none;
}

.wn-page .wn-time .wn-end {
  animation: wn-alarm 6s linear infinite;
}

.wn-page .wn-dots i {
  animation: wn-dot 7s linear infinite;
  animation-delay: calc(var(--i) * 0.13s);
}

@keyframes wn-spin {
  to { transform: rotate(360deg); }
}

@keyframes wn-node {
  0%, 18%, 100% { fill: #06140e; }
  3%, 12% { fill: #34f5a1; }
}

@keyframes wn-node-t {
  0%, 18%, 100% { fill: #fff; }
  3%, 12% { fill: #03130b; }
}

@keyframes wn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.84; }
}

@keyframes wn-dash {
  to { stroke-dashoffset: -88; }
}

@keyframes wn-draw {
  0% { stroke-dashoffset: 1; }
  70%, 97% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes wn-show1 {
  0%, 22% { opacity: 0; }
  24%, 97% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes wn-show2 {
  0%, 42% { opacity: 0; }
  45%, 97% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes wn-show3 {
  0%, 68% { opacity: 0; }
  71%, 97% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes wn-step {
  0%, 16%, 100% { background: #050806; color: #34f5a1; }
  3%, 12% { background: #34f5a1; color: #03130b; }
}

@keyframes wn-alarm {
  0%, 72%, 100% { background: rgba(255, 77, 77, 0.08); }
  78%, 92% { background: rgba(255, 77, 77, 0.28); }
}

@keyframes wn-dot {
  0% { opacity: 0.14; }
  2%, 88% { opacity: 1; }
  100% { opacity: 0.14; }
}

/* ───────── 지인 대화 ───────── */
.wn-page .wn-kakao {
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: 16px;
  align-items: center;
  max-width: 520px;
  margin-inline: auto;
}

.wn-page .wn-kphone {
  width: 100%;
  padding: 5px;
  border-radius: 24px;
}

.wn-page .wn-kphone img {
  border-radius: 19px;
}

.wn-page .wn-kq {
  display: grid;
  gap: 10px;
  text-align: left;
}

.wn-page .wn-kq p {
  max-width: 100%;
  padding: 9px 13px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.wn-page .wn-kq .wn-you {
  justify-self: start;
  border-radius: 4px 14px 14px 14px;
  background: #2a332e;
  color: #fff;
}

.wn-page .wn-kq .wn-me {
  justify-self: end;
  border-radius: 14px 4px 14px 14px;
  background: #fee500;
  color: #111;
}

.wn-page .wn-kq b {
  color: var(--acc);
  font-weight: 800;
}

.wn-page .wn-kq p:nth-child(2) { transition-delay: 0.6s; }
.wn-page .wn-kq p:nth-child(3) { transition-delay: 1.2s; }
.wn-page .wn-kq p:nth-child(4) { transition-delay: 1.8s; }

.wn-page.wn-js .wn-kq:not(.is-run) p {
  opacity: 0;
  transform: scale(0.92);
}

/* ───────── 실제 화면 6칸 ───────── */
.wn-page .wn-proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.wn-page figure {
  margin: 0;
  overflow: hidden;
  border: 2px dashed var(--edge);
  border-radius: 6px;
  background: #fff;
}

.wn-page figcaption {
  padding: 8px 4px 9px;
  background: var(--panel);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
}

/* ───────── 벌었다가 뱉는 흐름 ───────── */
.wn-page .wn-swing {
  position: relative;
  padding: 20px 14px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}

.wn-page .wn-swing svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.wn-page .wn-swing-line {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wn-page .wn-swing-base {
  stroke: #5b665f;
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

.wn-page .wn-swing-t {
  fill: var(--mute);
  font-size: 12px;
  text-anchor: end;
}

.wn-page .wn-swing-top {
  fill: var(--acc);
}

.wn-page .wn-swing-end {
  fill: var(--up);
}

.wn-page .wn-swing-tags {
  display: grid;
  grid-template-columns: 1fr 1.2fr 0.9fr;
  gap: 6px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.wn-page .wn-swing-tags span {
  color: var(--acc);
}

.wn-page .wn-swing-tags b {
  color: #ffb3bd;
  font-weight: 500;
}

.wn-page .wn-swing-tags .wn-more {
  color: var(--up);
  font-weight: 700;
}

/* ───────── 자가진단 ───────── */
.wn-page .wn-diag {
  display: grid;
  padding: 8px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  list-style: none;
  text-align: left;
}

.wn-page .wn-diag li {
  position: relative;
  padding: 13px 0 13px 32px;
  border-bottom: 1px solid var(--line);
  color: var(--body);
  font-size: 16px;
  line-height: 1.4;
}

.wn-page .wn-diag li:last-child {
  border-bottom: 0;
}

.wn-page .wn-diag li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 2px;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--acc);
  border-radius: 4px;
}

.wn-page .wn-diag b {
  color: #fff;
  font-weight: 700;
}

/* 두 칸 격자 */
.wn-page .wn-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.wn-page .wn-bad-grid div {
  position: relative;
  padding: 22px 8px;
  border: 1px solid rgba(255, 77, 77, 0.7);
  border-radius: 14px;
  background: rgba(255, 77, 77, 0.12);
  box-shadow: 0 0 20px rgba(255, 77, 77, 0.22);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.34;
  transition: opacity 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.wn-page .wn-bad-grid div::after {
  content: "✕";
  position: absolute;
  top: -9px;
  right: -5px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.wn-page .wn-bad-grid div:nth-child(2),
.wn-page .wn-bad-grid div:nth-child(2)::after { transition-delay: 0.45s; }
.wn-page .wn-bad-grid div:nth-child(3),
.wn-page .wn-bad-grid div:nth-child(3)::after { transition-delay: 0.9s; }
.wn-page .wn-bad-grid div:nth-child(4),
.wn-page .wn-bad-grid div:nth-child(4)::after { transition-delay: 1.35s; }

.wn-page.wn-js .wn-bad-grid:not(.is-run) div {
  border-color: rgba(255, 255, 255, 0.1);
  background: var(--panel);
  box-shadow: none;
  opacity: 0.45;
}

.wn-page.wn-js .wn-bad-grid:not(.is-run) div::after {
  opacity: 0;
  transform: scale(0.4);
}

/* ───────── 급등주 ───────── */
.wn-page .wn-rankbox {
  max-width: 320px;
  margin-inline: auto;
}

.wn-page .wn-rankbox .wn-shot {
  border-color: var(--up);
  box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.08), 0 0 30px rgba(255, 77, 77, 0.2);
}

.wn-page .wn-why {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
}

.wn-page .wn-why span {
  position: relative;
  display: inline-block;
  padding-bottom: 11px;
}

.wn-page .wn-why svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 9px;
  overflow: visible;
}

.wn-page .wn-why path {
  fill: none;
  stroke: var(--up);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  transition: stroke-dashoffset 0.55s ease-in-out;
}

.wn-page .wn-why span:nth-child(2) path { transition-delay: 0.5s; }
.wn-page .wn-why span:nth-child(3) path { transition-delay: 1s; }

.wn-page.wn-js .wn-why:not(.is-run) path {
  stroke-dashoffset: 1;
  opacity: 0;
}

.wn-page.wn-js .wn-swing:not(.is-run) *,
.wn-page.wn-js .wn-time:not(.is-run) *,
.wn-page.wn-js .wn-time:not(.is-run) li::before,
.wn-page.wn-js .wn-cups:not(.is-run) *,
.wn-page.wn-js .wn-hub:not(.is-run) * {
  animation-play-state: paused;
}

/* 물린 뒤의 혼잣말 */
.wn-page .wn-loss {
  position: relative;
}

.wn-page section > * + .wn-loss {
  margin-top: var(--group);
}

.wn-page .wn-loss-bg {
  position: absolute;
  inset: 0;
  color: var(--up);
  letter-spacing: -0.05em;
  line-height: 1;
  pointer-events: none;
}

.wn-page .wn-loss-bg b {
  position: absolute;
  top: -52px;
  left: 50%;
  margin-left: -150px;
  font-size: 118px;
  font-weight: 900;
  white-space: nowrap;
  opacity: 0.12;
  transform: rotate(-14deg);
}

.wn-page .wn-chat {
  position: relative;
  display: grid;
  gap: 10px;
  max-width: 330px;
  margin: var(--tight) auto 0;
}

.wn-page .wn-chat p {
  justify-self: start;
  padding: 10px 16px;
  border-radius: 16px 16px 16px 4px;
  background: #18211c;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}

.wn-page .wn-chat p:nth-child(2) {
  justify-self: center;
}

.wn-page .wn-chat .wn-bad {
  justify-self: end;
  border-radius: 16px 16px 4px 16px;
  background: var(--red);
  font-weight: 700;
}

/* ───────── 소식이 오는 순서 ───────── */
.wn-page .wn-time {
  position: relative;
  display: grid;
  gap: 16px;
  max-width: 420px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
  text-align: left;
  counter-reset: wn;
}

.wn-page .wn-time::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 24px;
  left: 14px;
  width: 2px;
  background: linear-gradient(var(--acc), var(--up));
}

.wn-page .wn-time li {
  position: relative;
  min-height: 42px;
  padding-left: 46px;
  counter-increment: wn;
}

.wn-page .wn-time li::before {
  content: counter(wn);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--acc);
  border-radius: 50%;
  background: var(--bg);
  color: var(--acc);
  font-size: 13px;
  font-weight: 700;
}

.wn-page .wn-time b {
  display: block;
  font-size: 17px;
}

.wn-page .wn-time span {
  color: var(--body);
  font-size: 15px;
  line-height: 1.45;
}

.wn-page .wn-time .wn-end {
  padding: 10px 12px 12px 46px;
  border: 1px solid var(--up);
  border-radius: 14px;
  background: rgba(255, 77, 77, 0.08);
}

.wn-page .wn-time .wn-end::before {
  top: 12px;
  border-color: var(--up);
  background: var(--up);
  color: #fff;
}

.wn-page .wn-crash {
  color: var(--up);
  font-style: normal;
  font-weight: 800;
}

/* 알약 */
.wn-page .wn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.wn-page .wn-chips span {
  padding: 10px 16px;
  border: 1px solid var(--acc);
  border-radius: 99px;
  background: rgba(var(--acc-rgb), 0.12);
  box-shadow: 0 0 16px rgba(var(--acc-rgb), 0.25);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  transition: opacity 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

/* 4개 + 3개, 두 줄로 고정 */
.wn-page .wn-chip-br {
  flex-basis: 100%;
  height: 0;
}

.wn-page .wn-lit {
  gap: 10px 8px;
}

.wn-page .wn-lit span {
  padding: 9px 13px;
  font-size: 14.5px;
  white-space: nowrap;
}

.wn-page .wn-lit span:nth-child(2) { transition-delay: 0.3s; }
.wn-page .wn-lit span:nth-child(3) { transition-delay: 0.6s; }
.wn-page .wn-lit span:nth-child(4) { transition-delay: 0.9s; }
.wn-page .wn-lit span:nth-child(5) { transition-delay: 1.2s; }
.wn-page .wn-lit span:nth-child(6) { transition-delay: 1.5s; }
.wn-page .wn-lit span:nth-child(7) { transition-delay: 1.8s; }

.wn-page.wn-js .wn-lit:not(.is-run) span {
  border-color: rgba(255, 255, 255, 0.12);
  background: transparent;
  box-shadow: none;
  color: var(--mute);
  opacity: 0.6;
}

/* ───────── 전환 구역 (조명) ───────── */
.wn-page .wn-notch {
  position: absolute;
  top: -1px;
  left: 0;
  display: block;
  width: 100%;
  height: 50px;
  fill: var(--bg);
}

.wn-page .wn-notch-l {
  fill: #eef3f0;
}

.wn-page .wn-flash {
  padding-top: calc(var(--sec) + 40px);
  padding-bottom: calc(var(--sec) + 40px);
  --body: #03130b;
  background: linear-gradient(180deg, #5cf9b6 0, var(--acc) 66%, #12a56b 80%, #083524 92%, #050806 100%);
  color: #03130b;
}

.wn-page .wn-flash h2 {
  font-size: 32px;
}

.wn-page .wn-flash .wn-s,
.wn-page .wn-flash .wn-lead {
  font-weight: 600;
}

.wn-page .wn-answer {
  display: inline-block;
  padding: 10px 26px 12px;
  border-radius: 99px;
  background: #03130b;
  color: var(--acc);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* ───────── 원 도식 ───────── */
.wn-page .wn-hub {
  max-width: 320px;
  margin-inline: auto;
}

.wn-page .wn-hub-s {
  max-width: 260px;
}

.wn-page .wn-hub svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.wn-page .wn-ring {
  fill: none;
  stroke: var(--edge);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
}

.wn-page .wn-node {
  fill: #06140e;
  stroke: var(--acc);
  stroke-width: 1.5;
}

.wn-page .wn-node-t {
  fill: #fff;
  font-size: 14px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
}

.wn-page .wn-core {
  fill: var(--acc);
  filter: drop-shadow(0 0 14px rgba(var(--acc-rgb), 0.6));
}

.wn-page .wn-core-t {
  fill: var(--ink);
  font-size: 19px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
}

/* PC 화면 위에 휴대폰을 겹쳐 보여 줍니다 */
.wn-page .wn-duo {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
  padding-bottom: 96px;
}

.wn-page .wn-duo .wn-phone {
  position: absolute;
  right: 4px;
  bottom: 0;
  width: 36%;
  padding: 4px;
  border-radius: 20px;
}

.wn-page .wn-duo .wn-phone img {
  border-radius: 16px;
}

/* ───────── 항목 패널: 별점 줄 + 위아래 선 ───────── */
.wn-page .wn-panel {
  position: relative;
  padding-top: 44px;
  border-top: 1px solid rgba(var(--acc-rgb), 0.55);
}

.wn-page section > * + .wn-panel {
  margin-top: var(--group);
}

.wn-page section > h2 + .wn-panel,
.wn-page section > .wn-lead + .wn-panel {
  margin-top: 64px;
}

.wn-page .wn-panel > * {
  margin-top: 0;
  margin-bottom: 0;
}

.wn-page .wn-panel > * + * {
  margin-top: 20px;
}

.wn-page .wn-panel > .wn-pill {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
}

.wn-page .wn-panel > .wn-pill + * {
  margin-top: 0;
}

.wn-page .wn-panel h3 {
  color: var(--acc);
  font-size: 25px;
  font-weight: 800;
}

.wn-page .wn-panel > h3 + .wn-lead {
  margin-top: 10px;
}

.wn-page .wn-panel .wn-lead {
  font-size: 16px;
}

.wn-page .wn-without {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(var(--acc-rgb), 0.55);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

.wn-page .wn-without b {
  flex: none;
  color: var(--up);
  font-size: 13px;
}

.wn-page .wn-chartname {
  color: var(--acc);
  font-size: 15px;
  font-weight: 700;
}

.wn-page .wn-panel > .wn-chartname + .wn-shot {
  margin-top: 10px;
}

.wn-page .wn-panel > .wn-shot + .wn-chartname {
  margin-top: 36px;
}

.wn-page .wn-panel > :is(.wn-shot, .wn-stack) + .wn-small {
  margin-top: var(--note);
}

/* 두 화면을 한 상자로 붙입니다 */
.wn-page .wn-stack {
  max-width: 460px;
  margin-inline: auto;
  overflow: hidden;
  border: 2px dashed var(--acc);
  border-radius: 6px;
  background: #fff;
}

.wn-page .wn-stack p {
  padding: 10px 12px;
  background: #06140e;
  color: var(--acc);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

/* 별점: 제목 위에 다섯 개 */
.wn-page h3:has(.wn-stars) {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  align-items: center;
}

.wn-page .wn-stars {
  height: 20px;
  overflow: visible;
}

.wn-page .wn-stars-3 {
  width: 64px;
}

.wn-page .wn-stars-2 {
  width: 44px;
}

.wn-page .wn-stars path {
  fill: var(--gold);
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ───────── 비교 표 ───────── */
.wn-page .wn-day,
.wn-page .wn-cmp {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: left;
}

.wn-page .wn-day > div,
.wn-page .wn-cmp > div {
  display: grid;
  grid-template-columns: 46px 1fr 1.08fr;
  align-items: stretch;
  border-top: 1px solid var(--line);
}

.wn-page .wn-day > div:first-child,
.wn-page .wn-cmp > div:first-child {
  border-top: 0;
}

.wn-page .wn-day em,
.wn-page .wn-cmp em {
  display: grid;
  place-items: center;
  padding: 4px 2px;
  background: var(--panel);
  color: var(--mute);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 600;
}

.wn-page .wn-day p,
.wn-page .wn-cmp p {
  padding: 13px 10px;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.4;
}

.wn-page .wn-day p:last-child,
.wn-page .wn-cmp p:last-child {
  background: rgba(var(--acc-rgb), 0.1);
  color: #fff;
  font-weight: 600;
}

.wn-page .wn-day-h b,
.wn-page .wn-cmp-h b {
  padding: 11px 10px;
  color: var(--mute);
  font-size: 14px;
  text-align: center;
}

.wn-page .wn-day-h span,
.wn-page .wn-cmp-h span {
  background: var(--panel);
}

.wn-page .wn-day-h b:last-child,
.wn-page .wn-cmp-h b:last-child {
  background: var(--acc);
  color: var(--ink);
  font-weight: 800;
}

/* ───────── 반론 대화 ───────── */
.wn-page .wn-talk {
  display: grid;
  gap: 10px;
}

.wn-page .wn-talk p {
  max-width: 86%;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

.wn-page .wn-talk .wn-q {
  justify-self: end;
  border-radius: 18px 18px 4px 18px;
  background: #1c2620;
  color: #fff;
}

.wn-page .wn-talk .wn-a {
  justify-self: start;
  margin-bottom: 10px;
  border: 1px solid var(--edge);
  border-radius: 18px 18px 18px 4px;
  background: var(--panel);
  color: #fff;
}

/* ───────── 밝은 구역 ───────── */
.wn-page .wn-wh {
  --acc: #07955e;
  --acc-rgb: 7, 149, 94;
  --acc-deep: #057a4c;
  --text: #0b1410;
  --body: #36423c;
  --mute: #7d8892;
  --line: #d5ddd8;
  --edge: #bcd4c8;
  --panel: #fff;
  padding-top: calc(var(--sec) + 40px);
  background: #eef3f0;
  color: var(--text);
}

.wn-page .wn-wh .wn-tag {
  color: #fff;
}

.wn-page .wn-wh .wn-shot {
  box-shadow: 0 8px 24px rgba(10, 40, 25, 0.08);
}

.wn-page .wn-wh .wn-up {
  color: #e01b1b;
}

/* 번역 비교 */
.wn-page .wn-tr {
  display: grid;
  gap: 12px;
  text-align: left;
}

.wn-page .wn-tr div {
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(10, 40, 25, 0.07);
}

.wn-page .wn-tr em {
  display: block;
  margin-bottom: 8px;
  color: var(--mute);
  font-size: 14px;
  font-style: normal;
}

.wn-page .wn-tr p {
  color: var(--body);
  font-size: 16px;
}

.wn-page .wn-tr b {
  display: block;
  margin-top: 4px;
  color: var(--acc);
  font-size: 18px;
  font-weight: 800;
}

.wn-page .wn-tr i {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 7px;
  border-radius: 5px;
  background: #e4e9e6;
  color: var(--body);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  vertical-align: 1px;
}

.wn-page .wn-tr b i {
  background: var(--acc);
  color: #fff;
}

/* 숫자 네 칸 */
.wn-page .wn-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 440px;
  margin-inline: auto;
}

.wn-page .wn-tiles div {
  padding: 20px 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.wn-page .wn-tiles strong {
  display: block;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.wn-page .wn-tiles span {
  color: var(--body);
  font-size: 14px;
}

.wn-page .wn-tiles .wn-on {
  border-color: var(--acc);
  box-shadow: 0 0 22px rgba(var(--acc-rgb), 0.2);
}

.wn-page .wn-tiles .wn-on strong {
  color: var(--acc);
}

/* 한 달, 1년, 10년 */
.wn-page .wn-never {
  display: grid;
  gap: 6px;
}

.wn-page .wn-never p {
  color: var(--mute);
  font-size: 22px;
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-color: var(--up);
}

.wn-page .wn-never p:nth-child(3) {
  color: var(--body);
}

/* 카페 30일 */
.wn-page .wn-cups {
  padding: 28px 18px 30px;
  border: 1px solid var(--edge);
  border-radius: 20px;
  background: var(--panel);
}

.wn-page section > * + .wn-cups {
  margin-top: var(--group);
}

/* 커피 30잔: 민트색 커피잔 아이콘 (모양은 mask, 색은 background) */
.wn-page .wn-dots {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px 4px;
  max-width: 300px;
  margin: 16px auto 20px;
}

.wn-page .wn-dots i {
  aspect-ratio: 1;
  background: var(--acc);
  opacity: 0.85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 10h13v5.2a5 5 0 0 1-5 5h-3a5 5 0 0 1-5-5z'/%3E%3Cpath d='M16.5 11.5h1.3a2.6 2.6 0 0 1 0 5.2h-1.6' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8 2.8c-1.1 1.2 1.1 2.4 0 3.8M12 2.8c-1.1 1.2 1.1 2.4 0 3.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect x='2.5' y='21.2' width='15' height='1.6' rx='.8'/%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 24 24'%3E%3Cpath d='M3.5 10h13v5.2a5 5 0 0 1-5 5h-3a5 5 0 0 1-5-5z'/%3E%3Cpath d='M16.5 11.5h1.3a2.6 2.6 0 0 1 0 5.2h-1.6' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8 2.8c-1.1 1.2 1.1 2.4 0 3.8M12 2.8c-1.1 1.2 1.1 2.4 0 3.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect x='2.5' y='21.2' width='15' height='1.6' rx='.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wn-page .wn-phonerow {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 18px;
  align-items: center;
  text-align: left;
}

.wn-page section > * + .wn-phonerow {
  margin-top: var(--group);
}

.wn-page .wn-phonerow .wn-phone {
  width: 100%;
  padding: 5px;
  border-radius: 24px;
}

.wn-page .wn-phonerow .wn-phone img {
  border-radius: 19px;
}

/* 33분: 라벨 → (여백) → 걸린 시간은 단 → 33분 → 한 줄 결과 */
.wn-page section.wn-took > .wn-s + .wn-s {
  margin-top: 44px;
}

.wn-page section.wn-took > .wn-s + .wn-huge {
  margin-top: 0;
}

.wn-page .wn-took .wn-huge {
  font-size: 88px;
}

.wn-page section.wn-took > .wn-huge + h3 {
  margin-top: 14px;
}

.wn-page section.wn-took > h3 + .wn-shot {
  margin-top: 40px;
}

/* 가운데 정렬 휴대폰: 제목 → 설명 → 휴대폰 */
.wn-page .wn-phone-c {
  width: min(240px, 64%);
}

.wn-page section > .wn-lead + .wn-phone-c {
  margin-top: 40px;
}

.wn-page .wn-phonetext p {
  margin-top: 10px;
  font-size: 15px;
}

/* 전략 네 칸 */
.wn-page .wn-strategy div {
  padding: 16px 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(10, 40, 25, 0.07);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}

.wn-page .wn-strategy b {
  display: block;
  margin-bottom: 4px;
  color: var(--acc);
  font-size: 18px;
  font-weight: 900;
}

/* 확장 단계 */
.wn-page .wn-steps {
  display: grid;
  justify-items: center;
}

.wn-page .wn-steps div {
  width: 100%;
  padding: 15px 20px 16px;
  border: 1px solid var(--edge);
  border-radius: 18px;
  background: var(--panel);
}

.wn-page .wn-steps b {
  display: block;
  color: var(--acc);
  font-size: 17px;
}

.wn-page .wn-steps span {
  color: var(--body);
  font-size: 14px;
  line-height: 1.45;
}

.wn-page .wn-steps i {
  width: 1px;
  height: 28px;
  background: var(--edge);
}

.wn-page .wn-cardcap {
  font-size: 15px;
  line-height: 1.55;
}

.wn-page section > .wn-pair + .wn-cardcap {
  margin-top: 16px;
}

.wn-page .wn-cardcap b {
  display: block;
  color: var(--acc);
  font-size: 17px;
}

/* 대괄호 라벨이 말머리·차트 이름 안에 들어갈 때 */
.wn-page .wn-s .wn-bracket b {
  font-weight: 800;
}

.wn-page .wn-chartname .wn-bracket {
  font-size: 15px;
  font-weight: 700;
}

/* LIMITED OFFER 형 블록: 태그 → 순번 → 제목 → 별점 줄 */
.wn-page .wn-offer > * {
  margin: 0;
}

.wn-page section > * + .wn-offer {
  margin-top: var(--group);
}

.wn-page section > h2 + .wn-offer {
  margin-top: 64px;
}

.wn-page .wn-offer-no {
  margin-top: 16px !important;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.wn-page .wn-offer h3 {
  margin-top: 6px !important;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.38;
}

.wn-page .wn-rows {
  max-width: 420px;
  margin: 28px auto 0 !important;
  border-top: 1px solid rgba(var(--acc-rgb), 0.55);
}

.wn-page .wn-rows p {
  padding: 18px 0;
  border-bottom: 1px solid rgba(var(--acc-rgb), 0.55);
  color: var(--body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.wn-page .wn-rows i {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 15px;
  font-style: normal;
  letter-spacing: 0.08em;
}

.wn-page .wn-rows b {
  display: block;
  color: var(--acc);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.wn-page section > .wn-offer + .wn-toc {
  margin-top: var(--group);
}

/* 얻는 것 */
.wn-page .wn-gain {
  display: grid;
  gap: 12px;
  text-align: left;
}

.wn-page .wn-gain div {
  position: relative;
  padding: 15px 16px 15px 50px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--panel);
}

.wn-page .wn-gain div::before {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 14px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--acc);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.wn-page .wn-gain b {
  display: block;
  font-size: 18px;
}

.wn-page .wn-gain span {
  color: var(--body);
  font-size: 14px;
}

.wn-page .wn-toc {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  text-align: left;
}

.wn-page .wn-toc h3 {
  font-size: 18px;
  text-align: center;
}

.wn-page .wn-toc ol {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: wn;
}

.wn-page .wn-toc li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  color: var(--body);
  font-size: 15px;
  counter-increment: wn;
}

.wn-page .wn-toc li::before {
  content: counter(wn) "장";
  display: inline-block;
  width: 40px;
  color: var(--acc);
  font-weight: 700;
}

/* 물결 밑줄 */
.wn-page .wn-under svg {
  display: block;
  width: min(280px, 76%);
  height: auto;
  margin: -2px auto 0;
  overflow: visible;
}

.wn-page .wn-under path {
  fill: none;
  stroke: var(--acc);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s ease-in-out;
}

.wn-page .wn-under.is-wait path {
  stroke-dashoffset: 1;
  opacity: 0;
}

/* FAQ */
.wn-page .wn-faq {
  display: grid;
  gap: 10px;
}

.wn-page details {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  text-align: left;
}

.wn-page summary {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

.wn-page summary::marker {
  color: var(--acc);
}

.wn-page details p {
  margin-top: 10px;
  font-size: 15px;
}

/* 마지막 */
.wn-page .wn-checks {
  display: grid;
  gap: 10px;
  max-width: 340px;
  margin-inline: auto;
  text-align: left;
}

.wn-page .wn-checks p {
  padding: 13px 18px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--panel);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.wn-page .wn-checks p::before {
  content: "✓  ";
  color: var(--acc);
  font-weight: 900;
}

/* ───────── 해방 구역 (흰 바탕) ───────── */
.wn-page .wn-white {
  --text: #14191c;
  --body: #3d4650;
  --mute: #7d8892;
  background: #fff;
  color: var(--text);
}

.wn-page .wn-hand {
  display: inline-block;
  color: #0fbf73;
  font-family: "Nanum Pen Script", cursive;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: 0;
  transform: rotate(-2deg);
}

.wn-page section > .wn-hand + :is(h2, .wn-hand) {
  margin-top: 8px;
}

.wn-page .wn-hl {
  background: linear-gradient(transparent 56%, rgba(var(--acc-rgb), 0.6) 56%, rgba(var(--acc-rgb), 0.6) 92%, transparent 92%);
}

.wn-page .wn-candle {
  max-width: 440px;
  margin-inline: auto;
}

.wn-page .wn-candle svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.wn-page .wn-candle line {
  stroke-width: 1.5;
}

.wn-page .wn-c-up rect { fill: #f0283c; }
.wn-page .wn-c-up line { stroke: #f0283c; }
.wn-page .wn-c-dn rect { fill: #2f6bff; }
.wn-page .wn-c-dn line { stroke: #2f6bff; }

.wn-page .wn-ma {
  fill: none;
  stroke: #c5163a;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.85;
}

.wn-page .wn-tip rect {
  fill: #f0283c;
}

.wn-page .wn-tip-sell rect {
  fill: #2f6bff;
}

.wn-page .wn-tip text {
  fill: #fff;
  font-size: 11.5px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
}

.wn-page .wn-hilo b {
  display: block;
  font-size: 54px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.05em;
}

.wn-page .wn-hilo b:first-child {
  color: #c8102e;
}

.wn-page .wn-dots3 {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.wn-page .wn-dots3 i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #14191c;
}

.wn-page .wn-dots3 i:nth-child(2) { opacity: 0.55; }
.wn-page .wn-dots3 i:nth-child(3) { opacity: 0.25; }

.wn-page section > .wn-dots3 + :is(h2, .wn-dots3) {
  margin-top: var(--gap);
}

/* ───────── 해결 구역 (검은 바탕) ───────── */
.wn-page .wn-notch-w {
  fill: #fff;
}

.wn-page .wn-solve {
  padding-top: calc(var(--sec) + 48px);
  padding-bottom: 0;
  overflow: hidden;
  background: #000;
}

.wn-page .wn-solve > .wn-s {
  color: var(--mute);
}

.wn-page .wn-solve h2 {
  font-size: 34px;
}

.wn-page .wn-arrows {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.wn-page .wn-arrows i {
  width: 0;
  height: 0;
  border-top: 11px solid var(--acc);
  border-right: 9px solid transparent;
  border-left: 9px solid transparent;
}

.wn-page .wn-arrows i:nth-child(1) { opacity: 0.35; }
.wn-page .wn-arrows i:nth-child(2) { opacity: 0.65; }

/* 레퍼런스: 짧은 줄, 위→아래 초록→연두 그라데이션, 넓은 행간 */
.wn-page .wn-do {
  width: fit-content;
  margin-inline: auto;
  background: linear-gradient(180deg, #22d98a 0%, var(--acc) 40%, #a8ff6a 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.wn-page .wn-do p {
  color: transparent;
  font-size: 30px;
  font-weight: 900;
  line-height: 2;
  letter-spacing: -0.05em;
}

/* 레퍼런스: 흰 화면 카드가 아래로 갈수록 검정에 묻히고, 그 위에 자막바 */
.wn-page .wn-peek {
  position: relative;
  width: min(330px, 92%);
  height: 360px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 30px 30px 0 0;
}

.wn-page .wn-peek img {
  border-radius: 30px 30px 0 0;
}

.wn-page .wn-peek::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 62%, #000 88%);
}

.wn-page section > .wn-do + .wn-peek {
  margin-top: 40px;
}

.wn-page section > .wn-peek + .wn-banner {
  position: relative;
  margin-top: -78px;
}

.wn-page .wn-banner {
  margin-inline: -10px;
  padding: 11px 8px 13px;
  background: var(--acc);
  color: #000;
  /* 자막바 폭의 92% 정도를 글자가 채우도록 화면 폭에 맞춰 키웁니다 */
  font-size: clamp(26px, 9.3vw, 44px);
  white-space: nowrap;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.05em;
}

.wn-page .wn-solve {
  padding-bottom: 56px;
}

/* ───────── 마지막 가격 구역 ───────── */
.wn-page .wn-price {
  padding-bottom: calc(var(--sec) + 24px);
}

.wn-page .wn-price > h2 + .wn-lead {
  margin-top: 18px;
}

.wn-page section.wn-price > .wn-lead + h3 {
  margin-top: 28px;
}

/* 하루 값 비교 카드 두 장 */
.wn-page .wn-cost {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wn-page .wn-cost > div {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 22px 8px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.wn-page .wn-cost .wn-cost-on {
  border: 2px solid var(--acc);
}

.wn-page .wn-cost-ico {
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  fill: none;
  stroke: var(--acc);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wn-page .wn-cost i.wn-cost-ico {
  background: #d6dcd8;
}

.wn-page .wn-cost b {
  font-size: 15px;
}

.wn-page .wn-cost span {
  color: var(--mute);
  font-size: 12px;
}

.wn-page .wn-cost strong {
  margin-top: 6px;
  color: var(--acc);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.wn-page .wn-cost > div:last-child strong {
  color: var(--up);
  font-size: 21px;
}

.wn-page .wn-cost small {
  margin-left: 1px;
  font-size: 12px;
  font-weight: 600;
}

/* 커피잔 아이콘 (커피 30잔과 같은 모양) */
.wn-page .wn-cup {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 10h13v5.2a5 5 0 0 1-5 5h-3a5 5 0 0 1-5-5z'/%3E%3Cpath d='M16.5 11.5h1.3a2.6 2.6 0 0 1 0 5.2h-1.6' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8 2.8c-1.1 1.2 1.1 2.4 0 3.8M12 2.8c-1.1 1.2 1.1 2.4 0 3.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect x='2.5' y='21.2' width='15' height='1.6' rx='.8'/%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 24 24'%3E%3Cpath d='M3.5 10h13v5.2a5 5 0 0 1-5 5h-3a5 5 0 0 1-5-5z'/%3E%3Cpath d='M16.5 11.5h1.3a2.6 2.6 0 0 1 0 5.2h-1.6' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M8 2.8c-1.1 1.2 1.1 2.4 0 3.8M12 2.8c-1.1 1.2 1.1 2.4 0 3.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect x='2.5' y='21.2' width='15' height='1.6' rx='.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wn-page section.wn-price > .wn-cost + h2 {
  margin-top: 40px;
}

/* 흰 할부 카드 */
.wn-page .wn-pay {
  max-width: 400px;
  margin-inline: auto;
  padding: 26px 20px 22px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.wn-page .wn-pay > * + * {
  margin-top: 6px;
}

.wn-page .wn-pay-tag {
  display: inline-block;
  padding: 4px 12px 5px;
  border-radius: 99px;
  background: #e8344e;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.wn-page .wn-pay-head {
  margin-top: 12px;
  color: #14191c;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.wn-page .wn-pay-head span {
  color: #e8344e;
}

.wn-page .wn-pay-big {
  color: #14191c;
  font-size: 20px;
  font-weight: 700;
}

.wn-page .wn-pay-big b {
  margin: 0 4px;
  color: #079a62;
  font-size: 50px;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.wn-page .wn-pay-calc {
  color: #5c6670;
  font-size: 13px;
}

.wn-page .wn-pay-calc span {
  color: #e8344e;
  font-weight: 800;
}

.wn-page .wn-pay-note {
  margin-top: 12px !important;
  color: #98a1a8;
  font-size: 11.5px;
}

.wn-page section.wn-price > :is(.wn-pay, .wn-todo) + .wn-lead {
  margin-top: 28px;
}

/* 사라지는 소비 알약 */
.wn-page .wn-spend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.wn-page .wn-spend span {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--panel);
  color: var(--body);
  font-size: 14px;
  font-weight: 600;
}

.wn-page section.wn-price > .wn-lead + .wn-spend {
  margin-top: 24px;
}

.wn-page .wn-price-big {
  font-size: 34px;
  line-height: 1.32;
}

.wn-page section.wn-price > .wn-price-big + .wn-lead {
  margin-top: 22px;
}

.wn-page section.wn-price > .wn-lead + h3 {
  margin-top: 56px;
}

/* 구매 버튼 */
.wn-page .wn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  padding: 19px 20px 20px;
  border-radius: 99px;
  background: var(--acc);
  color: #000;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-decoration: none;
  box-shadow: 0 8px 30px rgba(var(--acc-rgb), 0.35);
}

.wn-page section.wn-price > h3 + .wn-cta {
  margin-top: 40px;
}

.wn-page section.wn-price > :is(.wn-cta, h3) + .wn-cta-sub {
  margin-top: 20px;
}

.wn-page .wn-cta-sub {
  color: var(--body);
  font-size: 13px;
}

.wn-page .wn-cta-sub span {
  color: var(--up);
  font-weight: 700;
}

/* ───────── 확인 필요 표시 (올리기 전에 지우거나 내용 확정) ───────── */
.wn-page .wn-todo {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 7px 12px 8px;
  border: 2px dashed #ff4fd8;
  border-radius: 8px;
  background: rgba(255, 79, 216, 0.12);
  color: #ff7be3;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.wn-page .wn-todo::before {
  content: "⚠ ";
}

.wn-page section > * + .wn-todo {
  margin-top: 12px;
}

.wn-page section > .wn-tag + .wn-todo + * {
  margin-top: 18px;
}

.wn-page .wn-wh .wn-todo {
  color: #c4189f;
}

/* 첫 화면 결과 숫자 */
.wn-page .wn-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 420px;
  margin-inline: auto;
  border-top: 1px solid rgba(var(--acc-rgb), 0.55);
  border-bottom: 1px solid rgba(var(--acc-rgb), 0.55);
}

.wn-page .wn-stats div {
  padding: 18px 4px;
}

.wn-page .wn-stats div + div {
  border-left: 1px solid var(--line);
}

.wn-page .wn-stats b {
  display: block;
  color: var(--acc);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.wn-page .wn-stats span {
  color: var(--body);
  font-size: 13px;
}

/* 선물 티저 */
.wn-page .wn-gift {
  max-width: 420px;
  margin-inline: auto;
}

.wn-page .wn-gift-ico {
  font-size: 72px;
  line-height: 1;
  filter: drop-shadow(0 0 24px rgba(var(--acc-rgb), 0.5));
}

.wn-page .wn-gift ul {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.wn-page .wn-gift li {
  position: relative;
  padding: 14px 16px 14px 48px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--panel);
}

.wn-page .wn-gift li::before {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 14px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--acc);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.wn-page .wn-gift b {
  display: block;
  font-size: 17px;
}

.wn-page .wn-gift span {
  color: var(--body);
  font-size: 14px;
}

/* 월가 vs 나 */
.wn-page .wn-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wn-page .wn-vs div {
  padding: 18px 12px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--panel);
}

.wn-page .wn-vs div:last-child {
  border-color: rgba(255, 77, 77, 0.6);
  background: rgba(255, 77, 77, 0.08);
}

.wn-page .wn-vs em {
  display: block;
  margin-bottom: 8px;
  color: var(--acc);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.wn-page .wn-vs div:last-child em,
.wn-page .wn-vs div:last-child b {
  color: var(--up);
}

.wn-page .wn-vs p {
  font-size: 14px;
  line-height: 1.5;
}

.wn-page .wn-vs b {
  color: #fff;
}

/* 나의 아침 */
/* 가운데 정렬된 카드 한 장, 시간 칸 폭을 고정해 줄을 맞춥니다 */
.wn-page .wn-dayline {
  max-width: 360px;
  margin-inline: auto;
  padding: 4px 20px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--panel);
  list-style: none;
  text-align: left;
}

.wn-page .wn-dayline li {
  display: grid;
  grid-template-columns: 54px 1fr;
  column-gap: 14px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.wn-page .wn-dayline li:last-child {
  border-bottom: 0;
}

.wn-page .wn-dayline time {
  grid-row: span 2;
  color: var(--acc);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.wn-page .wn-dayline b {
  font-size: 16px;
  line-height: 1.4;
}

.wn-page .wn-dayline span {
  color: var(--body);
  font-size: 14px;
  line-height: 1.45;
}

.wn-page section > .wn-dayline + .wn-s {
  margin-top: 64px;
}

.wn-page section > .wn-s + .wn-huge {
  margin-top: 6px;
}

.wn-page section > .wn-huge + h3 {
  margin-top: 10px;
}

/* 가격 쌓기 */
.wn-page .wn-bill {
  max-width: 420px;
  margin-inline: auto;
  padding: 8px 20px;
  border: 2px dashed var(--acc);
  border-radius: 10px;
  background: var(--panel);
  text-align: left;
}

.wn-page .wn-bill p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.wn-page .wn-bill p b {
  color: #fff;
  white-space: nowrap;
}

.wn-page .wn-bill .wn-bill-sum s {
  color: var(--mute);
  text-decoration-color: var(--up);
}

.wn-page .wn-bill .wn-inc {
  color: var(--acc);
  font-size: 14px;
  font-weight: 700;
}

.wn-page .wn-bill .wn-inc::before {
  content: "✓ ";
}

.wn-page .wn-bill .wn-bill-final {
  align-items: baseline;
  margin-top: 4px;
  border-top: 1px solid var(--edge);
}

.wn-page .wn-bill .wn-bill-final {
  border-bottom: 0;
  color: #fff;
  font-weight: 700;
}

.wn-page .wn-bill .wn-bill-final b {
  color: var(--acc);
  font-size: 24px;
  font-weight: 900;
}

/* 후기 */
.wn-page .wn-reviews {
  display: grid;
  gap: 12px;
  text-align: left;
}

.wn-page .wn-reviews div {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.wn-page .wn-reviews i {
  color: var(--gold);
  font-size: 14px;
  font-style: normal;
  letter-spacing: 0.08em;
}

.wn-page .wn-reviews p {
  margin-top: 8px;
  color: #fff;
  font-size: 15px;
}

.wn-page .wn-reviews span {
  display: block;
  margin-top: 8px;
  color: var(--mute);
  font-size: 13px;
}

/* 만든 사람 */
.wn-page .wn-maker {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  border: 2px dashed var(--edge);
  border-radius: 6px;
  background: var(--panel);
  color: var(--mute);
  font-size: 15px;
}

@media (min-width: 768px) {
  .wn-page {
    --sec: 96px;
    --group: 112px;
    --gap: 40px;
  }

  .wn-page h1 { font-size: 56px; }
  .wn-page h2 { font-size: 38px; }
  .wn-page h3 { font-size: 27px; }
  .wn-page .wn-s { font-size: 21px; }
  .wn-page .wn-lead-h { font-size: 30px; }
  .wn-page .wn-hero-eye { font-size: 20px; }
  .wn-page .wn-hero-title { font-size: 68px; }
  .wn-page .wn-hero-sub { font-size: 22px; }
  .wn-page .wn-story-lead { font-size: 34px; }
  .wn-page .wn-story-p { font-size: 26px; }
  .wn-page .wn-story-big { font-size: 30px; }
  .wn-page .wn-story-end { font-size: 38px; }
  .wn-page .wn-own-pre { font-size: 24px; }
  .wn-page .wn-own { font-size: 46px; }
  .wn-page .wn-story .wn-hero-eye { font-size: 20px; }
  .wn-page .wn-big-acc { font-size: 56px; }
  .wn-page .wn-howto { font-size: 36px; }
  .wn-page .wn-ease-h { font-size: 46px; }
  .wn-page .wn-case-big { font-size: 72px; }
  .wn-page .wn-hook h1 { font-size: 42px; }
  .wn-page .wn-hook h1 mark { font-size: 72px; }
  .wn-page .wn-hook .wn-stop { font-size: 84px; }
  .wn-page .wn-osname { font-size: 72px; }
  .wn-page .wn-osname-m { font-size: 80px; }
  .wn-page .wn-name { font-size: 58px; }
  .wn-page .wn-huge { font-size: 136px; }
  .wn-page .wn-panel h3 { font-size: 30px; }
  .wn-page .wn-swing-tags { font-size: 16px; }

  .wn-page .wn-day p,
  .wn-page .wn-cmp p {
    font-size: 16px;
  }
}