/*!
 * iSeodang Events — 프런트 스타일
 * 디자인 토큰은 iseodang-page-design-seo 1장 준수.
 * 색 비율 60/30/10 — i Red(#E30613)는 주 CTA 와 D-day 배지에만.
 */

.isd-ev{
  /* 색 */
  --isd-bg:#FFFFFF; --isd-cream:#FAF7F1; --isd-offwhite:#FDFBF7;
  --isd-navy:#25257E; --isd-navy-700:#1C1C5E; --isd-navy-100:#E8E8F2;
  --isd-text:#000000; --isd-muted:#6B6B6B; --isd-line:#DDD8CE; --isd-red:#E30613;
  /* 간격 8pt */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px; --s24:96px;
  /* 라운드·그림자 (검정 아닌 네이비 틴트) */
  --r-card:12px; --r-btn:8px; --r-pill:999px;
  --sh1:0 1px 2px rgba(37,37,126,.06), 0 2px 8px rgba(37,37,126,.05);
  --sh2:0 4px 12px rgba(37,37,126,.10), 0 12px 32px rgba(37,37,126,.08);
  /* 모션 */
  --d1:120ms; --d2:220ms; --d3:420ms;
  --ease:cubic-bezier(.22,.61,.36,1);

  color:var(--isd-text);
  font-size:16px;
  line-height:1.6;
  background:var(--isd-bg);
}

.isd-ev *,.isd-ev *::before,.isd-ev *::after{box-sizing:border-box}
.isd-ev-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}

/* ── 히어로 ───────────────────────────────── */
.isd-ev-hero{
  background:var(--isd-cream);
  padding:var(--s12) 0 var(--s8);
  border-bottom:1px solid var(--isd-line);
}
.isd-ev-hero--single{
  background-size:cover;background-position:center;
  color:#fff;padding:var(--s16) 0 var(--s12);border-bottom:0;
}
.isd-ev-hero--single .isd-ev-eyebrow,
.isd-ev-hero--single .isd-ev-h1{color:#fff}
.isd-ev-hero--single a{color:#fff;text-decoration:underline}

.isd-ev-eyebrow{
  margin:0 0 var(--s2);color:var(--isd-muted);
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
}
.isd-ev-h1{
  margin:0 0 var(--s3);color:var(--isd-navy);
  font-size:clamp(28px,6vw,44px);line-height:1.2;font-weight:800;
}
.isd-ev-lede{margin:0 0 var(--s4);color:var(--isd-muted);max-width:60ch}
.isd-ev-trust{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0}
.isd-ev-trust span{
  font-size:13px;color:var(--isd-navy);background:var(--isd-navy-100);
  padding:4px 12px;border-radius:var(--r-pill);
}
.isd-ev-ended{
  display:inline-block;margin:var(--s3) 0 0;background:rgba(0,0,0,.45);
  padding:8px 14px;border-radius:var(--r-btn);font-size:14px;
}

/* ── 필터 칩 ───────────────────────────────── */
.isd-ev-chips{
  background:var(--isd-bg);border-bottom:1px solid var(--isd-line);
  position:sticky;top:0;z-index:5;
}
.isd-ev-chips__inner{
  display:flex;gap:var(--s2);overflow-x:auto;
  scroll-snap-type:x proximity;scrollbar-width:none;padding-top:10px;padding-bottom:10px;
}
.isd-ev-chips__inner::-webkit-scrollbar{display:none}
.isd-ev-chip{
  flex:0 0 auto;scroll-snap-align:start;
  display:inline-flex;align-items:center;min-height:44px;
  padding:0 16px;border:1.5px solid var(--isd-line);border-radius:var(--r-pill);
  color:var(--isd-navy);text-decoration:none;font-size:14px;font-weight:600;
  background:var(--isd-bg);
  transition:background var(--d2) var(--ease),border-color var(--d2) var(--ease),transform var(--d1) var(--ease);
}
.isd-ev-chip:hover{border-color:var(--isd-navy)}
.isd-ev-chip:active{transform:scale(.96)}
.isd-ev-chip.is-on{background:var(--isd-navy);border-color:var(--isd-navy);color:#fff}

/* ── 카드 그리드 ───────────────────────────── */
.isd-ev-list{padding:var(--s12) 0 var(--s16);background:var(--isd-offwhite)}
.isd-ev-grid{
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.isd-ev-grid--next{grid-template-columns:1fr;max-width:420px}

.isd-ev-card{
  background:var(--isd-bg);border:1px solid var(--isd-line);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--sh1);
  transition:transform var(--d2) var(--ease),box-shadow var(--d2) var(--ease);
  display:flex;flex-direction:column;
}
@media (hover:hover){
  .isd-ev-card:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
}
.isd-ev-card--past{opacity:.72}

.isd-ev-card__band{
  position:relative;aspect-ratio:16/9;
  background:var(--isd-navy-100) center/cover no-repeat;
}
.isd-ev-card__band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(37,37,126,0) 45%,rgba(37,37,126,.62));
}
.isd-ev-dday{
  position:absolute;top:10px;left:10px;z-index:1;
  background:var(--isd-red);color:#fff;font-weight:800;font-size:12px;
  letter-spacing:.04em;padding:5px 10px;border-radius:var(--r-pill);
}
.isd-ev-dday--lg{position:static;display:inline-block;font-size:14px;padding:7px 14px}
.isd-ev-price{
  position:absolute;top:10px;right:10px;z-index:1;
  background:rgba(255,255,255,.94);color:var(--isd-navy);font-weight:700;font-size:12px;
  padding:5px 10px;border-radius:var(--r-pill);
}
.isd-ev-cat{
  position:absolute;left:10px;bottom:10px;z-index:1;
  background:rgba(255,255,255,.94);color:var(--isd-navy);font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:var(--r-pill);
}

.isd-ev-card__body{padding:var(--s4);display:flex;flex-direction:column;gap:6px;flex:1}
.isd-ev-card__title{margin:0;font-size:19px;line-height:1.35;font-weight:700}
.isd-ev-card__title a{color:var(--isd-navy);text-decoration:none}
.isd-ev-card__title a:hover{text-decoration:underline}
.isd-ev-meta{margin:0;font-size:14px;color:var(--isd-muted)}
.isd-ev-meta--cap{margin-top:auto;padding-top:6px}
.isd-ev-pill{
  display:inline-block;margin-left:6px;font-size:11px;font-weight:700;
  color:var(--isd-navy);background:var(--isd-navy-100);padding:2px 8px;border-radius:var(--r-pill);
}

.isd-ev-pager{margin-top:var(--s8);text-align:center}
.isd-ev-pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;margin:0 3px;padding:0 10px;
  border:1px solid var(--isd-line);border-radius:var(--r-btn);
  color:var(--isd-navy);text-decoration:none;
}
.isd-ev-pager .page-numbers.current{background:var(--isd-navy);color:#fff;border-color:var(--isd-navy)}

/* ── 빈 상태 ───────────────────────────────── */
.isd-ev-empty{
  text-align:center;padding:var(--s16) var(--s4);
  background:var(--isd-bg);border:1px dashed var(--isd-line);border-radius:var(--r-card);
}
.isd-ev-empty h2{margin:0 0 var(--s2);color:var(--isd-navy);font-size:clamp(20px,4vw,28px)}
.isd-ev-empty p{margin:0 0 var(--s4);color:var(--isd-muted)}

/* ── 버튼 ─────────────────────────────────── */
.isd-ev-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 22px;border-radius:var(--r-btn);
  font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;
  border:1.5px solid transparent;
  transition:background var(--d2) var(--ease),transform var(--d1) var(--ease);
}
.isd-ev-btn:active{transform:scale(.98)}
.isd-ev-btn--primary{background:var(--isd-red);color:#fff}
.isd-ev-btn--primary:hover{background:#c2050f;color:#fff}
.isd-ev-btn--ghost{background:transparent;color:var(--isd-navy);border-color:var(--isd-navy)}
.isd-ev-btn--ghost:hover{background:var(--isd-navy-100)}
.isd-ev-btn[disabled]{opacity:.5;cursor:not-allowed}

/* ── 상세 ─────────────────────────────────── */
.isd-ev-facts{background:var(--isd-cream);padding:var(--s8) 0;border-bottom:1px solid var(--isd-line)}
.isd-ev-factgrid{
  display:grid;gap:var(--s4);margin:0;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.isd-ev-factgrid dt{
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--isd-muted);font-weight:700;margin-bottom:2px;
}
.isd-ev-factgrid dd{margin:0;color:var(--isd-navy);font-weight:600}
.isd-ev-sub{display:block;font-weight:400;font-size:13px;color:var(--isd-muted)}

.isd-ev-body{padding:var(--s12) 0 var(--s16)}
.isd-ev-body__inner{display:grid;gap:var(--s8);grid-template-columns:1fr}
@media (min-width:900px){
  .isd-ev-body__inner{grid-template-columns:1fr 340px;align-items:start}
  .isd-ev-signup{position:sticky;top:76px}
}
.isd-ev-content :where(h2,h3){color:var(--isd-navy)}

.isd-ev-signup__box,.isd-ev-links{
  background:var(--isd-bg);border:1px solid var(--isd-line);
  border-radius:var(--r-card);padding:var(--s4);box-shadow:var(--sh1);
}
.isd-ev-links{margin-top:var(--s4)}
.isd-ev-links h3{margin:0 0 var(--s2);font-size:15px;color:var(--isd-navy)}
.isd-ev-links ul{margin:0;padding:0;list-style:none}
.isd-ev-links li+li{margin-top:6px}
.isd-ev-links a{color:var(--isd-navy);text-decoration:none;font-weight:600}
.isd-ev-links a:hover{text-decoration:underline}
.isd-ev-signup__msg{margin:0 0 var(--s3);font-weight:600;color:var(--isd-navy)}
.isd-ev-signup__note{margin:var(--s3) 0 0;font-size:13px;color:var(--isd-muted)}
.isd-ev-signup .isd-ev-btn{width:100%}

/* ── 최종 CTA ─────────────────────────────── */
.isd-ev-cta{background:var(--isd-navy);color:#fff;padding:var(--s12) 0}
.isd-ev-cta__inner{display:grid;gap:var(--s4);align-items:center}
@media (min-width:820px){.isd-ev-cta__inner{grid-template-columns:1fr auto}}
.isd-ev-cta h2{margin:0 0 6px;font-size:clamp(20px,3.4vw,28px);color:#fff}
.isd-ev-cta p{margin:0;color:rgba(255,255,255,.86)}
.isd-ev-cta__btns{display:flex;flex-wrap:wrap;gap:var(--s2)}
.isd-ev-cta .isd-ev-btn--ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.isd-ev-cta .isd-ev-btn--ghost:hover{background:rgba(255,255,255,.12)}

/* ── 진입 애니메이션 (GPU 속성만) ───────────── */
.isd-ev-card{opacity:0;transform:translateY(12px)}
.isd-ev-card.is-in,.isd-ev .no-anim .isd-ev-card{opacity:1;transform:none}
.isd-ev-card{transition:opacity var(--d3) var(--ease),transform var(--d3) var(--ease),box-shadow var(--d2) var(--ease)}

/* 접근성 — 모션 최소화 요청 시 전부 정지 */
@media (prefers-reduced-motion:reduce){
  .isd-ev *,.isd-ev *::before,.isd-ev *::after{
    animation-duration:.01ms !important;transition-duration:.01ms !important;
  }
  .isd-ev-card{opacity:1;transform:none}
}

/* 포커스 링 */
.isd-ev a:focus-visible,.isd-ev button:focus-visible{
  outline:3px solid var(--isd-navy);outline-offset:2px;border-radius:4px;
}

/* ─────────────────────────────────────────────────────────────
   10주년 회원가입 이벤트 (isd-a10)
   본문 전용 블록. 토큰은 위 .isd-ev 와 동일한 값을 직접 쓴다
   (본문은 .isd-ev 밖에서도 렌더될 수 있으므로 변수에 의존하지 않는다).
   ───────────────────────────────────────────────────────────── */

.isd-a10{--nv:#25257E;--nv7:#1C1C5E;--nv1:#E8E8F2;--rd:#E30613;--gd:#C9A15A;
  --cr:#FAF7F1;--ln:#DDD8CE;--mu:#6B6B6B;
  --sh:0 1px 2px rgba(37,37,126,.06),0 2px 8px rgba(37,37,126,.05);
  --r:12px;line-height:1.65}
.isd-a10 *{box-sizing:border-box}
.isd-a10 section{margin:0 0 56px}
.isd-a10 h2{color:var(--nv);font-size:clamp(22px,4vw,30px);line-height:1.3;margin:0 0 12px}
.isd-a10 h3{color:var(--nv);font-size:18px;margin:0 0 6px}
.isd-a10 p{margin:0 0 12px}

/* ② 10주년 스토리 */
.isd-a10-story{background:var(--cr);border:1px solid var(--ln);border-radius:var(--r);padding:28px 24px;position:relative;overflow:hidden}
.isd-a10-eyebrow{color:var(--gd);font-weight:800;letter-spacing:.12em;font-size:13px;margin:0 0 6px}
.isd-a10-stats{list-style:none;display:flex;flex-wrap:wrap;gap:24px;margin:18px 0 0;padding:0}
.isd-a10-stats li{display:flex;flex-direction:column}
.isd-a10-stats strong{color:var(--nv);font-size:34px;line-height:1.1;font-weight:800}
.isd-a10-stats span{color:var(--mu);font-size:13px}

/* ③ 참여 3단계 */
.isd-a10-stepgrid{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));counter-reset:none}
.isd-a10-stepgrid li{position:relative;background:#fff;border:1px solid var(--ln);
  border-radius:var(--r);padding:22px 20px 20px;box-shadow:var(--sh)}
.isd-a10-num{position:absolute;top:-14px;left:20px;width:32px;height:32px;border-radius:999px;
  background:var(--nv);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}
.isd-a10-ico{width:30px;height:30px;color:var(--nv);display:block;margin:6px 0 10px}
.isd-a10-mini{display:inline-block;margin-top:4px;color:var(--nv);font-weight:700;text-decoration:none;border-bottom:2px solid var(--nv1)}
.isd-a10-mini:hover{border-bottom-color:var(--nv)}

/* 인사글 템플릿 — 이 페이지 전환율의 핵심 */
.isd-a10-tpl{background:var(--nv1);border-radius:var(--r);padding:22px 20px}
.isd-a10-tpl h3{margin-bottom:10px}
.isd-a10-tpl pre{background:#fff;border:1px solid var(--ln);border-radius:8px;padding:14px 16px;
  margin:0 0 12px;white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:15px;color:#000}
.isd-a10-copy{min-height:44px;padding:0 20px;border:0;border-radius:8px;background:var(--nv);
  color:#fff;font-weight:700;font-size:15px;cursor:pointer;transition:background .2s}
.isd-a10-copy:hover{background:var(--nv7)}
.isd-a10-copy.is-done{background:#1F5A3A}
.isd-a10-hint{color:var(--mu);font-size:13px;margin:10px 0 0}

/* ④ 선물 6종 */
.isd-a10-sub{color:var(--mu);margin-bottom:18px}
.isd-a10-giftgrid{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.isd-a10-giftgrid li{background:var(--bg,#fff);border:1px solid var(--ln);border-radius:var(--r);
  padding:20px 18px;position:relative;min-height:132px}
.isd-a10-giftgrid li.is-wide{grid-column:span 2}
@media (max-width:520px){.isd-a10-giftgrid li.is-wide{grid-column:span 1}}
.isd-a10-giftgrid h3{font-size:16px;margin:0}
.isd-a10-giftgrid p{color:var(--mu);font-size:13px;margin:6px 0 0}
.isd-a10-ribbon{position:absolute;top:12px;right:12px;background:var(--gd);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.04em;padding:3px 9px;border-radius:999px}

/* ⑤ 타임라인 */
.isd-a10-timeline{list-style:none;margin:0;padding:0 0 0 22px;border-left:2px solid var(--ln)}
.isd-a10-timeline li{position:relative;padding:0 0 22px 8px}
.isd-a10-timeline strong{display:block;color:var(--nv);font-size:16px}
.isd-a10-t{color:var(--mu);font-size:14px}
.isd-a10-dot{position:absolute;left:-31px;top:5px;width:12px;height:12px;border-radius:999px;
  background:var(--nv);border:3px solid #fff;box-shadow:0 0 0 2px var(--ln)}
.isd-a10-timeline li.is-final .isd-a10-dot{background:var(--rd);box-shadow:0 0 0 2px rgba(227,6,19,.25)}

/* ⑥ 유의사항 */
.isd-a10-terms ul{margin:0;padding-left:20px}
.isd-a10-terms li{margin-bottom:8px}
.isd-a10-terms .isd-a10-meta{color:var(--mu);font-size:13px;list-style:none;margin-left:-20px;
  padding-top:10px;border-top:1px solid var(--ln)}

/* ⑦ FAQ */
.isd-a10-faq h2{font-size:clamp(18px,3vw,21px);margin-top:22px}
.isd-a10-faq p{color:var(--mu)}

/* ⑧ 최종 CTA */
.isd-a10-cta{background:var(--nv);color:#fff;border-radius:var(--r);padding:34px 26px;text-align:center}
.isd-a10-cta h2{color:#fff}
.isd-a10-cta p{color:rgba(255,255,255,.86)}
.isd-a10-btn{display:inline-flex;align-items:center;min-height:52px;padding:0 28px;border-radius:8px;
  background:var(--rd);color:#fff;font-weight:800;font-size:17px;text-decoration:none;margin-top:6px}
.isd-a10-btn:hover{background:#c2050f;color:#fff}
.isd-a10-alt{display:block;margin-top:14px;color:rgba(255,255,255,.86);font-size:14px}

/* 모바일 스티키 CTA */
.isd-a10-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;
  border-top:1px solid var(--ln);padding:8px 16px;box-shadow:0 -4px 16px rgba(37,37,126,.10);
  transform:translateY(110%);transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.isd-a10-sticky.is-on{transform:none}
.isd-a10-sticky a{display:flex;align-items:center;justify-content:center;min-height:48px;
  border-radius:8px;background:#E30613;color:#fff;font-weight:800;text-decoration:none}
@media (min-width:900px){.isd-a10-sticky{display:none}}

@media (prefers-reduced-motion:reduce){
  .isd-a10-sticky{transition-duration:.01ms}
}