/* BASIC css start */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@400;500;700&display=swap');

/* ===== Ãß¼® ±âȹÀü PC (¸ðµç ½ºÅ¸ÀÏÀº .cp ¾È¿¡¼­¸¸ Àû¿ëµË´Ï´Ù) ===== */
/* ¹è°æÀº °¡·Î 100%, ±ÛÀÚ¡¤Åä³¢¡¤»óÇ°Àº 1200px ¾È¿¡ ¸ð¿©¿ä. ÆøÀ» ¹Ù²Ù·Á¸é 1200px À» °Ë»öÇؼ­ ¹Ù²Ù¼¼¿ä. */
.cp {
  --night: #10318f; --night-deep: #0b2168; --moon: #ffd75e; --discount: #c04a26;
  --persimmon: #e2793f; --cream: #ffebc9; --cream-deep: #ffe2b0; --ivory: #fff8ea;
  --ink: #262a4d; --ink-soft: #5d6082; --grass: #3d7a56; --paper: #fff;
  --font-display: "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  --font-body: "Pretendard Variable", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-cute: "Jua", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  font-family: var(--font-body); color: var(--ink); line-height: 1.6; text-align: left;
  -webkit-font-smoothing: antialiased;
  padding-top: 50px; background: #fff; /* »çÀÌÆ® »ó´Ü ¸Þ´º¿Í ±âȹÀü »çÀÌ Èò»ö ¿©¹é */
}
.cp, .cp *, .cp *::before, .cp *::after { box-sizing: border-box; }
.cp :where(h1, h2, h3, p, ul) { margin: 0; padding: 0; border: 0; background: none; letter-spacing: normal; }
.cp :where(ul) { list-style: none; }
.cp :where(a) { color: inherit; text-decoration: none; }
.cp :where(img) { border: 0; vertical-align: top; }
.cp :where(button) { font: inherit; }
.cp :focus-visible { outline: 3px solid var(--moon); outline-offset: 3px; }

.cp-page { background: var(--ivory); overflow: hidden; overflow: clip; }

/* ---------- HERO (°¡·Î 100%) ---------- */
.cp-hero {
  position: relative; width: 100%; aspect-ratio: 1200 / 760; max-height: 900px;
  background: radial-gradient(90% 70% at 82% 0%, #1f4fc4 0%, transparent 60%),
              linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%);
  overflow: hidden; isolation: isolate; color: #fff; text-align: center;
}
.cp-hero__bg { position: absolute; left: 0; bottom: -9%; width: 100%; height: auto; max-height: 100%; object-fit: cover; object-position: center bottom; display: block; }
.cp-hero__moon { position: absolute; right: 6%; top: -2%; width: min(14%, 260px); height: auto; }
.cp-hero__branch { position: absolute; left: -1%; top: -1%; width: min(16%, 280px); height: auto; }
.cp-hero__branch--r { left: auto; right: -1%; top: 22%; width: min(12%, 220px); transform: scaleX(-1) rotate(-8deg); }

/* ±ÛÀÚ¡¤Åä³¢°¡ ¸ðÀÌ´Â 1200px ¹«´ë */
.cp-stage { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; width: min(100%, 1200px); container-type: inline-size; }
.cp-hero__title {
  position: absolute; left: 0; right: 0; top: 8.6cqw; z-index: 3;
  font-family: var(--font-cute); font-weight: 400; color: #fff;
  font-size: 9.2cqw; line-height: 1.14; text-shadow: 0 .2cqw 1.2cqw rgba(6, 20, 80, .55);
}
.cp-hero__sub { position: absolute; left: 0; right: 0; top: 30cqw; z-index: 3; font-size: 2cqw; line-height: 1.5; color: #dbe4ff; font-weight: 500; }

.cp-star {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s);
  animation: cp-twinkle var(--t, 3.4s) ease-in-out var(--d, 0s) infinite;
  filter: drop-shadow(0 0 8px rgba(255, 226, 130, .9));
}
.cp-star--g { fill: var(--moon); }
.cp-star--w { fill: #fff; filter: drop-shadow(0 0 8px rgba(190, 215, 255, .95)); }
@keyframes cp-twinkle {
  0%, 100% { opacity: .15; transform: scale(.5) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.25) rotate(45deg); }
}
.cp-shoot {
  position: absolute; left: var(--x); top: var(--y); width: 12cqw; height: .28cqw; border-radius: 99px; opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 85%);
  transform-origin: right center; rotate: 28deg;
  animation: cp-shoot 8s ease-in var(--d, 0s) infinite;
}
.cp-shoot::after { content: ""; position: absolute; right: -.25cqw; top: 50%; width: .9cqw; height: .9cqw; margin-top: -.45cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 1cqw .3cqw rgba(255,226,130,.9); }
@keyframes cp-shoot {
  0% { opacity: 0; translate: 0 0; } 3% { opacity: 1; }
  12% { opacity: 0; translate: 16cqw 8.5cqw; } 100% { opacity: 0; translate: 16cqw 8.5cqw; }
}
.cp-moon-glow { animation: cp-breathe 5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes cp-breathe { 0%, 100% { opacity: .6; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }

.cp-rabbit {
  position: absolute; bottom: 1%; width: 15%; height: auto; display: block;
  transform-origin: 50% 100%;
  animation: cp-hop var(--t, 1.15s) cubic-bezier(.45, 0, .55, 1) var(--d, 0s) infinite;
}
@keyframes cp-hop {
  0%, 100% { transform: translateY(0) scale(1.05, .93) rotate(0deg); }
  14% { transform: translateY(0) scale(.96, 1.06) rotate(0deg); }
  50% { transform: translateY(-3.8cqw) scale(1, 1) rotate(var(--tilt)); }
  86% { transform: translateY(0) scale(.97, 1.04) rotate(0deg); }
}
.cp-rabbit--1 { left: 34%; --tilt: -5deg; --t: 1.1s; }
.cp-rabbit--2 { left: 51%; --tilt: 5deg; --t: 1.25s; --d: -.6s; }

/* ---------- Åä³¢ ¸»Ç³¼± (talk.png »ç¿ë) ---------- */
.cp-bubble {
  position: absolute; z-index: 4; width: 12cqw; aspect-ratio: 1 / 1; opacity: 0;
  display: flex; align-items: center; justify-content: center;
  transform-origin: var(--ox, 50%) 75%;
  animation: cp-pop 2.8s cubic-bezier(.3, 1.4, .5, 1) var(--d, 0s) infinite;
  filter: drop-shadow(0 .5cqw .6cqw rgba(6, 20, 80, .28));
}
.cp-bubble img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp-bubble b { position: relative; font-family: var(--font-cute); font-weight: 400; font-size: 3cqw; line-height: 1; white-space: nowrap; }
.cp-bubble--1 { left: 22cqw; bottom: calc(1% + 17cqw); --ox: 92%; color: var(--persimmon); }
.cp-bubble--2 { left: 65.5cqw; bottom: calc(1% + 19cqw); --ox: 8%; --d: 1.4s; color: var(--night); }
@keyframes cp-pop {
  0%   { opacity: 0; transform: scale(.2) rotate(-6deg); }
  8%   { opacity: 1; transform: scale(1.15) rotate(3deg); }
  14%  { opacity: 1; transform: scale(1) rotate(0deg); }
  38%  { opacity: 1; transform: scale(1); }
  46%  { opacity: 0; transform: scale(.7); }
  100% { opacity: 0; transform: scale(.7); }
}

/* ---------- TABS ---------- */
.cp-tabs { position: sticky; top: var(--cp-top, 0px); z-index: 20; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 6px 18px rgba(16, 49, 143, .18); }
.cp-tab {
  display: block; padding: 22px 8px; text-align: center; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.4;
  background: var(--cream-deep); color: var(--ink); transition: background .25s, color .25s;
}
.cp-tab:hover { background: #ffd699; }
.cp-tab[aria-current="true"], .cp-tab[aria-current="true"]:hover { background: var(--persimmon); color: #fff; }

/* ---------- SECTIONS ---------- */
.cp-section { position: relative; padding: 100px 60px 110px; text-align: center; scroll-margin-top: calc(var(--cp-top, 0px) + 80px); }
.cp-section--coupon { background: linear-gradient(180deg, var(--ivory) 0%, #fff3dc 100%); padding-bottom: 130px; }
.cp-section--sale { background: var(--cream); padding-bottom: 120px; }
.cp-section__icon { width: 110px; height: auto; margin: 0 auto 14px; display: block; }
.cp-section__title { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1.25; color: var(--ink); }
.cp-section__desc { margin-top: 22px; font-size: 20px; color: var(--ink-soft); }
.cp-wave { display: block; width: 100%; height: 56px; position: absolute; left: 0; bottom: -1px; }

/* ---------- COUPON PACK (ƼÄÏ 2Àå) ---------- */
.cp-coupon-eyebrow { font-family: var(--font-display); font-weight: 700; letter-spacing: .28em; text-indent: .28em; font-size: 16px; line-height: 1.4; color: var(--persimmon); margin: 56px 0 22px; }
.cp-tickets { display: flex; align-items: center; justify-content: center; gap: 30px; max-width: 780px; margin: 0 auto; }
.cp-ticket {
  --r: 20px; position: relative; flex: 1; max-width: 340px; padding: 36px 22px 32px;
  border-radius: 22px; color: #fff; text-align: center;
  border: 1px solid rgba(255,255,255,.35);
  -webkit-mask: radial-gradient(circle var(--r) at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--r) at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--r) at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle var(--r) at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
}
.cp-ticket--a { background: linear-gradient(160deg, #eda06a 0%, #d97a3e 100%); filter: drop-shadow(0 10px 14px rgba(180, 100, 50, .22)); }
.cp-ticket--b { background: linear-gradient(160deg, #d97a3e 0%, #b3541f 100%); filter: drop-shadow(0 12px 16px rgba(150, 80, 35, .28)); }
.cp-ticket__step { display: inline-block; padding: 4px 14px; border-radius: 999px; background: rgba(255,255,255,.22); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.cp-ticket__value { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1.1; margin-top: 14px; }
.cp-ticket--b .cp-ticket__value { font-size: 46px; }
.cp-ticket__cond { margin-top: 10px; font-size: 15px; font-weight: 700; color: rgba(255,255,255,.94); }
.cp-coupon-note { margin-top: 24px; font-size: 15px; color: var(--ink-soft); }
.cp-coupon__btn {
  display: block; width: 100%; max-width: 420px; margin: 22px auto 0; padding: 16px 24px;
  border: 0; border-radius: 999px; cursor: pointer; background: var(--night); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.4;
  box-shadow: 0 10px 22px rgba(16, 49, 143, .28); transition: transform .15s, box-shadow .15s, background .2s;
}
.cp-coupon__btn:hover { background: #1740b5; }
.cp-coupon__btn:active { transform: translateY(2px); box-shadow: 0 6px 14px rgba(16, 49, 143, .28); }
.cp-coupon__btn[data-done="true"] { background: var(--grass); box-shadow: 0 10px 22px rgba(61, 122, 86, .3); }

/* ---------- PRODUCTS (4¿­) ---------- */
.cp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; max-width: 900px; margin: 30px auto 0; text-align: left; }
.cp-card { display: flex; flex-direction: column; color: inherit; }
.cp-card__thumb {
  position: relative; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden;
  background: radial-gradient(ellipse 60% 22% at 30% 28%, #fff 0 60%, transparent 62%), linear-gradient(180deg, #bfe6fb 0%, #e9f7ff 70%);
  box-shadow: 0 12px 26px rgba(38, 42, 77, .12); transition: transform .25s, box-shadow .25s;
}
.cp-card:hover .cp-card__thumb { transform: translateY(-6px); box-shadow: 0 18px 32px rgba(38, 42, 77, .18); }
.cp-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-card__thumb::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 34%; background: linear-gradient(180deg, #98b800, #7c9c00); border-radius: 60% 60% 0 0 / 40% 40% 0 0; }
.cp-card__off { position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--discount); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.3; padding: 6px 13px 5px; border-radius: 12px; box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.cp-card__tag { position: absolute; top: 58px; right: 14px; z-index: 2; background: #000; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.3; padding: 6px 13px 5px; border-radius: 12px; box-shadow: 0 3px 8px rgba(0,0,0,.28); }
.cp-card__name {
  margin-top: 16px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(1.45em * 2);
}
.cp-card__price { margin-top: auto; padding-top: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cp-card__rate, .cp-card__now { font-family: var(--font-display); font-weight: 700; line-height: 1.3; }
.cp-card__rate { font-size: 20px; color: var(--discount); }
.cp-card__now { font-size: 19px; color: var(--ink); }
.cp-card__was { font-size: 13px; color: #a0a2b8; text-decoration: line-through; }
.cp-group-title { display: inline-block; margin-top: 56px; padding: 10px 28px; border-radius: 999px; background: var(--night); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: .02em; }
.cp-group-title--second { margin-top: 80px; }

/* ---------- NOTICE ---------- */
.cp-foot { background: var(--night); color: #c9d3f5; padding: 56px 60px 64px; font-size: 14px; line-height: 1.8; }
.cp-foot__in { max-width: 1080px; margin: 0 auto; }
.cp-foot h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.4; color: #fff; margin-bottom: 12px; }
.cp-foot ul { padding-left: 20px; list-style: disc; }

@media (prefers-reduced-motion: reduce) {
  .cp-star { animation: none; opacity: 1; }
  .cp-rabbit { animation: none; }
  .cp-bubble { animation: none; opacity: 1; }
  .cp-shoot { display: none; }
  .cp-moon-glow { animation: none; }
  .cp-coupon__btn, .cp-tab, .cp-card__thumb { transition: none; }
}
/* BASIC css end */