/* =====================================================================
   event.css — 이벤트
   ---------------------------------------------------------------------
   이벤트를 알리는 방법을 통째로 바꿨습니다.

   예전에는 첫 화면 맨 위에 가로로 누운 카드 한 장(.pge-card)이 있었습니다.
   소식은 전했지만 '사이트 위에 얹힌 배너' 였어요. 내용과 따로 놀고,
   히어로의 큰 제목이 바로 아래 또 나와서 큰 글자가 두 번 겹쳤습니다.

   이제 배너라는 물건은 없습니다. 대신 두 곳으로 스며듭니다.

     1) 화면 테두리   무지개가 창 가장자리를 따라 계속 흐릅니다(.pgf).
                      들어온 순간 시계 방향으로 한 번 그어지고, 그다음에는
                      있는지 모를 만큼 옅게 남아 계속 돕니다. 배너가 자리를
                      차지하는 대신, 페이지 전체가 이벤트 중인 것이 됩니다.

     2) 히어로        눈썹 자리(.eyebrow)가 이벤트 알약이 되고, 계속 바뀌는
                      큰 문구의 마지막 차례로 'Pigent is Coming' 이 들어옵니다.
                      그 막이 오면 알약이 남은 시간을 펼치고, 아래 설명도
                      이벤트 문장으로 바뀝니다(.hero.pge-act).

   움직이는 값은 transform 과 opacity 뿐입니다. 색이 흐르는 것도 그라디언트를
   다시 그리는 게 아니라, 미리 그려둔 띠를 옆으로 밀어서 만듭니다.
   ===================================================================== */

:root {
  --pgf-w: 2px;        /* 또렷한 선의 굵기 */
  --pgf-g: 104px;      /* 안쪽으로 번지는 빛이 닿는 거리 */
  --pgf-glow: .24;     /* 그 빛의 세기 */

  /* 무지개 한 바퀴의 길이.
     띠를 밀어서 색을 흐르게 하는데, 미는 거리와 이 값이 정확히 같아야
     한 바퀴 뒤 원래 자리와 겹칩니다. 다르면 매 바퀴 색이 튑니다. */
  --pgf-cycle: 460px;
}

/* =====================================================================
   1. 화면 테두리를 도는 무지개
   ---------------------------------------------------------------------
   왜 네 조각으로 나눴나

   가장 쉬운 방법은 화면만 한 요소 하나에 conic-gradient 를 깔고 색상환을
   돌리는(hue-rotate) 것입니다. 실제로 예전 배너가 그렇게 했어요. 그런데
   그건 매 프레임 화면 전체(1920×1080)를 다시 칠하는 일입니다. 테두리
   2px 을 움직이려고 200만 픽셀을 다시 그리는 셈이에요.

   그래서 가장자리마다 얇은 조각을 두고, 그 안에 무지개 띠를 넣어
   **옆으로 밀기만** 합니다. 이동은 transform 이라 다시 칠하지 않고
   합성기가 옮겨주기만 하면 됩니다. 정지 화면에서도 CPU 가 놀아요.

   한 조각이 선과 빛을 함께 냅니다 — 마스크 두 겹을 더해서
     · 바깥 2px 은 알파 1  → 또렷한 선
     · 그 안쪽은 서서히 0  → 안으로 번지는 빛
   ===================================================================== */

.pgf {
  position: fixed;
  inset: 0;
  z-index: 90;              /* 도크(60) 위, 모달 가림막(100) 아래 */
  pointer-events: none;
  opacity: .5;              /* 자리를 잡은 뒤의 세기 */
  animation: pgfIn 3.6s var(--swift) .15s both;
}

/* 들어올 때만 또렷하게. 처음 몇 초는 이벤트가 눈에 띄어야 하지만,
   글을 읽는 동안 테두리가 계속 밝으면 그게 방해가 됩니다. */
@keyframes pgfIn {
  0%   { opacity: 0; }
  14%  { opacity: 1; }
  52%  { opacity: 1; }
  100% { opacity: .5; }
}

.pgf-e {
  position: absolute;
  overflow: hidden;         /* 띠가 밖으로 새지 않게 */
}

/* 네 가장자리. 가로 조각은 폭 전체를 덮고, 세로 조각도 높이 전체를 덮습니다.
   모서리에서 두 조각이 겹쳐 조금 더 밝은데, 빛이 고이는 것처럼 보여서
   일부러 그대로 뒀습니다. */
.pgf-t { top: 0;    left: 0; right: 0;  height: var(--pgf-g); transform-origin: left center;  }
.pgf-r { right: 0;  top: 0;  bottom: 0; width:  var(--pgf-g); transform-origin: center top;   }
.pgf-b { bottom: 0; left: 0; right: 0;  height: var(--pgf-g); transform-origin: right center; }
.pgf-l { left: 0;   top: 0;  bottom: 0; width:  var(--pgf-g); transform-origin: center bottom;}

/* 마스크 두 겹 — 첫 겹이 바깥의 또렷한 선, 둘째 겹이 안으로 번지는 빛입니다.
   여러 겹은 기본이 add 라 알파가 더해집니다. */
.pgf-t {
  -webkit-mask:
    linear-gradient(to bottom, #000 0 var(--pgf-w), transparent var(--pgf-w)),
    linear-gradient(to bottom, rgba(0,0,0,var(--pgf-glow)), transparent);
          mask:
    linear-gradient(to bottom, #000 0 var(--pgf-w), transparent var(--pgf-w)),
    linear-gradient(to bottom, rgba(0,0,0,var(--pgf-glow)), transparent);
  animation: pgfDrawX .8s var(--spring) .2s both;
}
.pgf-r {
  -webkit-mask:
    linear-gradient(to left, #000 0 var(--pgf-w), transparent var(--pgf-w)),
    linear-gradient(to left, rgba(0,0,0,var(--pgf-glow)), transparent);
          mask:
    linear-gradient(to left, #000 0 var(--pgf-w), transparent var(--pgf-w)),
    linear-gradient(to left, rgba(0,0,0,var(--pgf-glow)), transparent);
  animation: pgfDrawY .8s var(--spring) .56s both;
}
.pgf-b {
  -webkit-mask:
    linear-gradient(to top, #000 0 var(--pgf-w), transparent var(--pgf-w)),
    linear-gradient(to top, rgba(0,0,0,var(--pgf-glow)), transparent);
          mask:
    linear-gradient(to top, #000 0 var(--pgf-w), transparent var(--pgf-w)),
    linear-gradient(to top, rgba(0,0,0,var(--pgf-glow)), transparent);
  animation: pgfDrawX .8s var(--spring) .92s both;
}
.pgf-l {
  -webkit-mask:
    linear-gradient(to right, #000 0 var(--pgf-w), transparent var(--pgf-w)),
    linear-gradient(to right, rgba(0,0,0,var(--pgf-glow)), transparent);
          mask:
    linear-gradient(to right, #000 0 var(--pgf-w), transparent var(--pgf-w)),
    linear-gradient(to right, rgba(0,0,0,var(--pgf-glow)), transparent);
  animation: pgfDrawY .8s var(--spring) 1.28s both;
}

/* 들어올 때 테두리가 시계 방향으로 그어집니다 — 위 → 오른쪽 → 아래 → 왼쪽.
   한 번에 나타나는 것보다 '지금 막 켜졌다' 는 느낌이 확실합니다. */
@keyframes pgfDrawX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pgfDrawY { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* 무지개 띠. 조각보다 한 바퀴만큼 길게 빼두고 그만큼 밀면, 끝과 시작이
   같은 색이라 이음매가 보이지 않습니다. */
.pgf-e i {
  position: absolute;
  display: block;
  background: repeating-linear-gradient(var(--pgf-dir, 90deg),
    #FF6B96 0,
    #FFB65E calc(var(--pgf-cycle) * .2),
    #3FE08A calc(var(--pgf-cycle) * .4),
    #3FD8E8 calc(var(--pgf-cycle) * .6),
    #7C6BFF calc(var(--pgf-cycle) * .8),
    #FF6B96 var(--pgf-cycle));
}
.pgf-t i, .pgf-b i {
  top: 0; bottom: 0;
  left: calc(var(--pgf-cycle) * -1); right: calc(var(--pgf-cycle) * -1);
}
.pgf-l i, .pgf-r i {
  --pgf-dir: 180deg;
  left: 0; right: 0;
  top: calc(var(--pgf-cycle) * -1); bottom: calc(var(--pgf-cycle) * -1);
}

/* 흐르는 방향은 시계 방향으로 맞춥니다.
   위는 오른쪽으로, 오른쪽은 아래로, 아래는 왼쪽으로, 왼쪽은 위로. */
.pgf-t i { animation: pgfFlowX 4.4s linear infinite; }
.pgf-r i { animation: pgfFlowY 4.4s linear infinite; }
.pgf-b i { animation: pgfFlowX 4.4s linear infinite reverse; }
.pgf-l i { animation: pgfFlowY 4.4s linear infinite reverse; }

@keyframes pgfFlowX { from { transform: translateX(0); } to { transform: translateX(var(--pgf-cycle)); } }
@keyframes pgfFlowY { from { transform: translateY(0); } to { transform: translateY(var(--pgf-cycle)); } }

/* 좁은 화면 — 테두리가 화면을 잡아먹지 않게 얇게 */
@media (max-width: 720px) {
  :root { --pgf-w: 1.5px; --pgf-g: 58px; --pgf-glow: .2; --pgf-cycle: 300px; }
}

/* 움직임을 줄여 달라고 했으면 색만 남기고 전부 멈춥니다.
   지우지는 않습니다 — 이벤트 중이라는 사실 자체는 전해야 하니까요. */
@media (prefers-reduced-motion: reduce) {
  .pgf,
  .pgf-e,
  .pgf-e i { animation: none; }
  .pgf { opacity: .42; }
}

/* =====================================================================
   2. 히어로 — 이벤트 알약
   ---------------------------------------------------------------------
   index.html 의 눈썹(.eyebrow)이 그대로 이벤트 알약이 됩니다. 새 요소를
   끼워 넣지 않은 이유: 히어로 맨 위에 알림 줄을 하나 더 만들면 첫 화면이
   그만큼 아래로 밀립니다. 어차피 그 자리에 있던 줄을 이벤트가 넘겨받는
   편이 화면을 하나도 더 쓰지 않아요.

   평소에는 'PIGENT EVENT · 10월 10일 →' 만 조용히 있다가, 큰 문구가
   이벤트 막에 닿으면 남은 시간이 옆으로 펼쳐집니다.
   ===================================================================== */

a.pge-pill {
  gap: 9px;
  padding: 6px 14px 6px 10px;
  cursor: pointer;
  transition: transform .45s var(--spring);
}
a.pge-pill:hover  { transform: translateY(-1.5px); }
a.pge-pill:active { transform: translateY(0) scale(.985); }

/* 넓은 화면에서 히어로는 두 단 격자가 됩니다(index.css). 그때 눈썹 칸의
   요소는 기본값대로 단 전체로 늘어나는데, 알약이 왼쪽 단만큼 넓어지면
   알약으로 읽히지 않습니다. 내용만큼만 차지하게 붙잡아 둡니다. */
@media (min-width: 1040px) {
  .hero a.pge-pill { justify-self: start; }
}

/* 무지개 점 하나. 작아서 통째로 돌려도 부담이 없습니다. */
.pge-pill-dot {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    #FF6B96, #FFB65E, #3FE08A, #3FD8E8, #7C6BFF, #FF6B96);
  box-shadow: 0 0 10px -1px rgba(255, 255, 255, .45);
  animation: pgeSpin 3.6s linear infinite;
}
@keyframes pgeSpin { to { transform: rotate(360deg); } }

.pge-pill b {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
  color: var(--lumen);
}

.pge-pill-date {
  position: relative;
  padding-left: 11px;
  font-weight: 650;
  color: var(--lumen-2);
  white-space: nowrap;
}
/* 가운뎃점 대신 아주 작은 점 하나 — 글자 사이의 간격을 색으로 나눕니다 */
.pge-pill-date::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 3px; margin-top: -1.5px;
  border-radius: 50%;
  background: var(--lumen-4);
}

/* 남은 시간. 평소에는 폭 0 으로 접혀 있습니다.
   margin-left 로 부모의 gap 을 상쇄해야 접혔을 때 정말 0 이 됩니다 —
   안 그러면 아무것도 없는데 9px 이 남아 알약이 어정쩡하게 넓어집니다. */
.pge-pill-count {
  display: inline-flex;
  align-items: center;
  max-width: 0;
  margin-left: -9px;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--lumen);
  transition:
    max-width .7s var(--spring),
    margin-left .7s var(--spring),
    opacity .45s var(--swift);
}
.hero.pge-act .pge-pill-count { max-width: 220px; margin-left: 0; opacity: 1; }

.pge-pill-go {
  color: var(--lumen-3);
  transition: transform .4s var(--spring), color .3s var(--swift);
}
a.pge-pill:hover .pge-pill-go { transform: translateX(3px); color: var(--lumen); }

/* 이벤트 막일 때(그리고 손을 올렸을 때) 알약 둘레에 무지개 테가 켜집니다.
   .lgt 의 테두리(::before)는 그대로 두고 그 위에 한 겹만 얹습니다. */
.pge-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1.4px;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    #FF6B96, #FFB65E, #3FE08A, #3FD8E8, #7C6BFF, #FF6B96);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .6s var(--swift);
  animation: pgeHue 7s linear infinite;
}
.hero.pge-act .pge-pill::after,
a.pge-pill:hover::after { opacity: .9; }

@keyframes pgeHue { to { filter: hue-rotate(360deg); } }

/* ---- 이벤트 막 ----
   index.js 의 문구 로테이션이 이벤트 차례에 오면 .hero 에 .pge-act 를 답니다.
   여기서는 그때 무엇이 달라지는지만 정합니다. */

/* 큰 글자에 무지개가 흐릅니다. 평소 문구는 원래의 초록–하늘–보라 그대로예요 */
.hero.pge-act .display em {
  background: linear-gradient(96deg,
    #FF8FC7 0%, #FFC178 22%, #8FE9B4 44%, #7FD9F5 66%, #B3A8FF 84%, #FF8FC7 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: pgeFlow 7s linear infinite;
}
@keyframes pgeFlow { to { background-position: 250% 50%; } }

/* 설명 문장은 두 벌을 같은 칸에 겹쳐두고 서로 바꿉니다.
   한쪽을 지우고 다른 쪽을 넣으면 문장 길이가 달라 아래 내용이 그때마다
   위아래로 튑니다. 겹쳐두면 칸 높이가 둘 중 큰 쪽으로 한 번 정해지고
   다시는 움직이지 않아요. */
.pge-lede { display: grid; }
.pge-lede > span {
  grid-area: 1 / 1;
  transition: opacity .6s var(--swift), transform .7s var(--spring);
}
.pge-lede-b { opacity: 0; transform: translateY(7px); }
.hero.pge-act .pge-lede-a { opacity: 0; transform: translateY(-7px); }
.hero.pge-act .pge-lede-b { opacity: 1; transform: none; }

/* 움직임을 줄여 달라고 했으면 문구는 첫 줄에 멈춥니다(index.js).
   그때는 이벤트 막이 영영 오지 않으니, 남은 시간을 처음부터 펼쳐 둡니다. */
@media (prefers-reduced-motion: reduce) {
  .pge-pill-dot,
  .pge-pill::after { animation: none; }
  .pge-pill::after { opacity: .55; }
  .pge-pill-count { max-width: 220px; margin-left: 0; opacity: 1; transition: none; }
  .pge-lede > span { transition: none; }
}

/* 좁은 화면 — 남은 시간까지 넣으면 알약이 두 줄로 접힙니다.
   접히면 그 아래 전부가 밀리니, 날짜만 남기고 초시계는 접어둡니다. */
@media (max-width: 560px) {
  .pge-pill-count { display: none; }
  .pge-pill b { font-size: 10.5px; letter-spacing: .12em; }
}

/* =====================================================================
   3. 영역 분할
   ---------------------------------------------------------------------
   색이 가운데서 스몄다가 위아래로 사라집니다. 경계선을 긋는 대신 어둠으로
   녹여서 이음매가 보이지 않아요.
   ===================================================================== */

main {
  background: #05060B;
}

main > .section,
main > .hero {
  position: relative;
  scroll-margin-top: 96px;
  background: transparent;
  isolation: isolate;
}

/* 영역마다 넉넉한 여백 — 애플은 여백으로 나눕니다 */
main > .section {
  padding-block: clamp(100px, 15vw, 175px);
}

/* 색이 가운데서 부풀었다 가장자리에서 사라지는 판 */
main > .section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--pge-band, rgba(124, 107, 255, .07)) 26%,
    var(--pge-band, rgba(124, 107, 255, .07)) 74%,
    transparent 100%);
}

/* 가운데 은은한 빛무리 — 깊이를 만듭니다 */
main > .section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(62% 48% at 50% 46%,
    var(--pge-glow, rgba(124, 107, 255, .1)),
    transparent 72%);
}

/* 영역마다 색을 조금씩 다르게 — 스크롤할 때 공기가 바뀝니다 */
main > .section:nth-of-type(1) {
  --pge-band: rgba(124, 107, 255, .075);
  --pge-glow: rgba(124, 107, 255, .11);
}
main > .section:nth-of-type(2) {
  --pge-band: rgba(0, 169, 79, .07);
  --pge-glow: rgba(63, 224, 138, .1);
}
main > .section:nth-of-type(3) {
  --pge-band: rgba(79, 217, 255, .06);
  --pge-glow: rgba(79, 217, 255, .09);
}
main > .section:nth-of-type(4) {
  --pge-band: rgba(255, 107, 150, .055);
  --pge-glow: rgba(255, 107, 150, .085);
}
main > .section:nth-of-type(n+5) {
  --pge-band: rgba(124, 107, 255, .06);
  --pge-glow: rgba(124, 107, 255, .09);
}

/* 히어로 위쪽은 검게 시작합니다 — 화면 테두리의 무지개가 가장 잘 읽히는
   바탕이 검정이라, 첫 화면 맨 위는 비워두고 어둡게 둡니다. */
main > .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg,
    #000 0%,
    rgba(var(--base-rgb),.96) 34%,
    rgba(124, 107, 255, .05) 74%,
    transparent 100%);
}

/* 영역 제목 */
.section-head h2 {
  font-size: clamp(1.75rem, 4.6vw, 3.2rem);
  font-weight: 780;
  letter-spacing: -.04em;
  line-height: 1.12;
}
.section-head .lede {
  font-size: clamp(14.5px, 1.9vw, 17.5px);
  line-height: 1.68;
}

/* 바닥도 어둠으로 잦아듭니다 */
footer {
  position: relative;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 60%, #000);
}

/* =====================================================================
   4. 등장
   ---------------------------------------------------------------------
   작은 요소는 아래에서 떠오르고, 큰 글자와 큰 카드는 앞에서 다가왔다가
   제자리로 물러납니다.
   ===================================================================== */

.pge-rise {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .75s cubic-bezier(.22, .61, .36, 1),
    transform .85s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
.pge-rise.pge-in { opacity: 1; transform: none; }

.pge-zoom {
  opacity: 0;
  transform: perspective(1100px) translateZ(var(--pge-z, 150px)) scale(var(--pge-s, 1.16));
  filter: blur(var(--pge-b, 11px));
  transition:
    opacity .72s cubic-bezier(.22, .61, .36, 1),
    transform 1.05s cubic-bezier(.16, 1, .3, 1),
    filter .68s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform, filter;
}
.pge-zoom.pge-in {
  opacity: 1;
  transform: perspective(1100px) translateZ(0) scale(1);
  filter: blur(0);
}

/* 큰 카드는 약하게 — 글자만큼 세게 하면 어지럽습니다 */
.pge-zoom.pge-soft {
  --pge-z: 70px;
  --pge-s: 1.05;
  --pge-b: 6px;
}

/* 움직임이 끝나면 GPU 힌트를 놓아줍니다 */
.pge-rise.pge-done,
.pge-zoom.pge-done { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .pge-rise,
  .pge-zoom {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* 영역 색이 바뀌는 곳에 배경이 겹치지 않도록 정리 */
main > .section > * { position: relative; }

/* ----- 좁은 화면 ----- */
@media (max-width: 720px) {
  /* 다가오는 거리를 줄입니다. 작은 화면에서 크게 움직이면 멀미가 나요 */
  .pge-zoom { --pge-z: 90px; --pge-s: 1.1; --pge-b: 8px; }
  .pge-zoom.pge-soft { --pge-z: 40px; --pge-s: 1.03; --pge-b: 4px; }

  main > .section { padding-block: clamp(76px, 14vw, 120px); }
}

/* =====================================================================
   5. 이벤트 페이지 (/event)
   ---------------------------------------------------------------------
   예전 이벤트 페이지는 밝은 회백색(#F5F5F7)에 검은 글씨였습니다. 애플
   제품 페이지를 그대로 옮겨온 것이라 그 자체로는 단정했지만, 첫 화면에서
   눌러 들어오면 **다른 사이트로 넘어온 것 같았습니다**. 유리도 없고,
   배경의 빛도 없고, 도크도 없었어요.

   이제 Pigent 의 것을 그대로 씁니다 — glass.css 의 색 토큰, index.css 의
   유리(.lg)·알약(.pill)·도크·큰 글자(.display). 여기서는 이 페이지에만
   필요한 것(단어 시퀀스, 카운트다운 타일, 타임라인)만 얹습니다.
   그래서 클래스 이름을 pev- 로 따로 뒀습니다. 첫 화면의 규칙과 섞이면
   한쪽을 고칠 때 다른 쪽이 조용히 망가집니다.
   ===================================================================== */

/* ---- 1막 · 단어 ---- */

/* 세로 여백은 한 번 조였습니다. 처음에는 넉넉하게 잡았는데, 1280×800 에서
   재보니 '계정 만들기' 가 접힌 선 바로 아래(850px)에 걸렸습니다. 남은 시간을
   보여주고 나서 무엇을 하라는 것인지가 화면 밖에 있으면 안 됩니다. */
.pev-hero {
  position: relative;
  min-height: 100svh;
  padding-top: calc(var(--safe-t) + clamp(104px, 14vw, 140px));
  padding-bottom: clamp(56px, 7vw, 88px);
  padding-inline: calc(var(--gutter) + var(--safe-l)) calc(var(--gutter) + var(--safe-r));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  isolation: isolate;
}
.pev-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58% 44% at 50% 40%, rgba(124, 107, 255, .13), transparent 72%),
    linear-gradient(180deg, #000 0%, rgba(var(--base-rgb), .94) 42%, transparent 100%);
}

/* 이 페이지에서는 알약이 링크가 아니라 표지판입니다. 이미 이벤트 안에
   들어와 있으니 무지개 테를 처음부터 켜둡니다. */
.pev-badge { margin-bottom: clamp(22px, 4vw, 34px); }
.pev-badge::after { opacity: .8; }

/* 단어들은 같은 칸에 쌓여 차례로 나타났다 물러납니다.
   min-height 로 칸을 미리 잡아두는 이유 — 단어마다 높이가 달라지면
   아래 있는 날짜와 카운트다운이 단어가 바뀔 때마다 출렁입니다. */
.pev-words {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(76px, 12vw, 132px);
}
.pev-word {
  grid-area: 1 / 1;
  font-size: clamp(2.3rem, 8vw, 5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.05em;
  white-space: nowrap;
  color: var(--lumen);
  opacity: 0;
  transform: scale(1.3);
  filter: blur(14px);
  transition:
    opacity .5s var(--swift),
    transform .9s var(--spring),
    filter .5s var(--swift);
  will-change: opacity, transform, filter;
}
.pev-word.pev-in  { opacity: 1; transform: scale(1);   filter: blur(0); }
.pev-word.pev-out { opacity: 0; transform: scale(.84); filter: blur(10px); }

/* 마지막 단어에만 색을 씁니다. 전부 무지개면 아무것도 강조되지 않아요. */
.pev-word.pev-finale {
  background: linear-gradient(96deg,
    #FF8FC7 0%, #FFC178 22%, #8FE9B4 44%, #7FD9F5 66%, #B3A8FF 84%, #FF8FC7 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: pgeFlow 7s linear infinite;
}

/* ---- 2막 · 날짜와 남은 시간 ---- */

.pev-reveal {
  width: 100%;
  opacity: 0;
  transform: translateY(26px);
  pointer-events: none;
  transition: opacity .8s var(--swift), transform 1s var(--spring);
}
.pev-reveal.pev-in { opacity: 1; transform: none; pointer-events: auto; }

.pev-date {
  margin-top: clamp(20px, 3.4vw, 34px);
  font-size: clamp(1.05rem, 2.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--lumen);
}
.pev-date span { color: var(--lumen-3); font-weight: 600; }

/* 남은 시간 — 유리 타일 넷.
   숫자는 tabular-nums 로 고정폭이라 초가 바뀌어도 칸이 흔들리지 않습니다. */
.pev-count {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 1.6vw, 16px);
  margin-top: clamp(24px, 3.6vw, 36px);
}
.pev-unit {
  flex: 0 1 clamp(74px, 15vw, 138px);
  padding: clamp(15px, 2.2vw, 24px) clamp(6px, 1.4vw, 14px);
  border-radius: var(--r-lg);
}
.pev-num {
  font-size: clamp(1.7rem, 5.6vw, 3.3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  color: var(--lumen);
}
.pev-lbl {
  margin-top: 9px;
  font-size: clamp(11px, 1.3vw, 12.5px);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--lumen-3);
}

.pev-note {
  margin: clamp(22px, 3.2vw, 32px) auto 0;
  max-width: 42ch;
  color: var(--lumen-2);
  font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.72;
}

.pev-cta {
  display: flex;
  gap: 11px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(22px, 3.4vw, 32px);
}
.pev-cta .pill { min-height: 50px; padding: 0 26px; font-size: 15px; }

/* 건너뛰기 — 단어가 다 지나가기를 기다리고 싶지 않은 사람을 위해.

   화면 구석에 고정하지 않았습니다. 도크는 가운데에 떠 있는데(AURORA 에서는
   위가 아니라 아래로 내려갑니다), 좁은 화면에서는 그 도크와 구석에 박은
   버튼이 서로 겹칩니다. 어느 구석을 골라도 둘 중 한 모드에서는 부딪혀요.
   그래서 히어로 안에 자기 줄을 하나 갖습니다.

   줄의 높이를 미리 잡아두는 이유 — 버튼이 사라질 때 줄까지 접히면 아래
   내용이 그만큼 위로 딸려 올라갑니다. 자리는 남기고 버튼만 흐려집니다. */
.pev-skiprow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: clamp(10px, 1.6vw, 16px);
}
.pev-skip {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--lumen-2);
  transition: opacity .45s var(--swift), color .3s var(--swift);
}
.pev-skip:hover { color: var(--lumen); }
.pev-skip.pev-gone { opacity: 0; pointer-events: none; }

/* ---- 아래 내용 ---- */

.pev-cards {
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  text-align: left;
}
.pev-card {
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--r-lg);
}
.pev-card .pev-glyph {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  margin-bottom: 16px;
  border-radius: 13px;
  background: var(--g, linear-gradient(150deg, #7C6BFF, #5C46E0));
}
.pev-card .pev-glyph svg { width: 21px; height: 21px; }
.pev-card h3 { margin-bottom: 9px; }
.pev-card p { color: var(--lumen-2); font-size: 14.5px; line-height: 1.7; }

/* 마지막 부름 — 첫 화면의 .band 와 같은 결 */
.pev-band {
  padding: clamp(38px, 6vw, 64px) clamp(22px, 4vw, 48px);
  border-radius: var(--r-xl);
  text-align: center;
}
.pev-band .mark { width: 46px; margin: 0 auto 16px; }
.pev-band .lede { margin: 14px auto 26px; max-width: 46ch; }

@media (max-width: 560px) {
  .pev-count { gap: 7px; }
  .pev-unit { padding: 13px 4px; }
  .pev-skiprow { min-height: 40px; }
}

/* 낮은 화면(노트북) — 큰 글자는 폭에 맞춰 커지는데, 부족한 건 폭이 아니라
   높이입니다. 1280×800 에서 재보니 날짜와 남은 시간까지는 들어오는데
   '계정 만들기' 가 접힌 선에 걸쳤습니다. 무엇을 하라는 것인지가 화면
   밖에 있으면 카운트다운을 보여준 보람이 없어요.
   높이가 낮을 때만 글자와 타일을 한 단계 줄여 전부 한 화면에 넣습니다. */
@media (min-width: 900px) and (max-height: 900px) {
  .pev-hero {
    padding-top: calc(var(--safe-t) + 104px);
    padding-bottom: 56px;
  }
  .pev-words { min-height: 116px; }
  .pev-word { font-size: clamp(2.3rem, 7vw, 4.4rem); }
  .pev-unit { padding: 18px 12px; }
  .pev-num { font-size: clamp(1.7rem, 4.6vw, 2.9rem); }
  .pev-note { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .pev-word,
  .pev-reveal { transition: none; }
  .pev-word.pev-finale { animation: none; background-position: 30% 50%; }
}