/* 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');

/* ===== 추석 기획전 (모든 스타일은 .ce 안에서만 적용됩니다) ===== */
.ce {
  --night: #10318f; --night-deep: #0b2168; --moon: #ffd75e; --discount: #c04a26;
  --persimmon: #e2793f; --cream: #fff0d5; --cream-deep: #ffe2b0;
  --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;
}
.ce, .ce *, .ce *::before, .ce *::after { box-sizing: border-box; }
.ce :where(h1, h2, h3, p, ul) { margin: 0; padding: 0; border: 0; background: none; letter-spacing: normal; }
.ce :where(ul) { list-style: none; }
.ce :where(a) { color: inherit; text-decoration: none; }
.ce :where(img) { border: 0; vertical-align: top; }
.ce :where(button) { font: inherit; }
.ce :focus-visible { outline: 3px solid var(--moon); outline-offset: 3px; }

.ce-page { max-width: 720px; margin: 0 auto; background: var(--paper); overflow: hidden; overflow: clip; }

/* ---------- HERO ---------- */
.ce-hero {
  position: relative; container-type: inline-size; aspect-ratio: 720 / 930;
  background: radial-gradient(120% 60% at 80% 0%, #1f4fc4 0%, transparent 60%),
              linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%);
  overflow: hidden; color: #fff; text-align: center;
}
.ce-hero__bg { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; }
.ce-hero__title {
  position: absolute; left: 0; right: 0; top: 11.5cqw; z-index: 3;
  font-family: var(--font-cute); font-weight: 400; color: #fff;
  font-size: 17.5cqw; line-height: 1.12;
  text-shadow: 0 .25cqw 1.4cqw rgba(6, 20, 80, .55);
}
.ce-hero__sub { position: absolute; left: 0; right: 0; top: 52cqw; z-index: 3; font-size: 3.6cqw; line-height: 1.5; color: #dbe4ff; font-weight: 500; }
.ce-hero__moon { position: absolute; right: -4cqw; top: -4cqw; width: 30cqw; height: auto; }
.ce-hero__branch { position: absolute; left: -3cqw; top: -1cqw; width: 26cqw; height: auto; }
.ce-hero__branch--r { left: auto; right: -2cqw; top: 25cqw; width: 22cqw; transform: scaleX(-1) rotate(-8deg); }

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

.ce-rabbit {
  position: absolute; bottom: 6%; width: 23%; height: auto; display: block;
  transform-origin: 50% 100%;
  animation: ce-hop var(--t, 1.15s) cubic-bezier(.45, 0, .55, 1) var(--d, 0s) infinite;
}
@keyframes ce-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(-6.5cqw) scale(1, 1) rotate(var(--tilt)); }
  86% { transform: translateY(0) scale(.97, 1.04) rotate(0deg); }
}
.ce-rabbit--1 { left: 25%; --tilt: -5deg; --t: 1.1s; }
.ce-rabbit--2 { left: 53%; --tilt: 5deg; --t: 1.25s; --d: -.6s; }

.ce-rabbit-pair {
  animation: ce-hop-pair 1.15s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes ce-hop-pair {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1.05, .93) rotate(0deg); }
  14%      { transform: translateX(-50%) translateY(0) scale(.96, 1.06) rotate(0deg); }
  50%      { transform: translateX(-50%) translateY(-5.5cqw) scale(1, 1) rotate(-2deg); }
  86%      { transform: translateX(-50%) translateY(0) scale(.97, 1.04) rotate(0deg); }
}

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

/* ---------- SECTIONS ---------- */
.ce-section { position: relative; padding: 64px 24px 72px; text-align: center; scroll-margin-top: calc(var(--ce-top, 0px) + 60px); }
.ce-section--coupon { background: var(--paper); padding-bottom: 96px; }
.ce-section--sale { background: var(--cream); padding-bottom: 88px; }
.ce-section__icon { width: 92px; height: auto; margin: 0 auto 10px; display: block; }
.ce-section__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 8.4vw, 54px); line-height: 1.2; color: var(--ink); }
.ce-section__desc { margin-top: 18px; font-size: clamp(15px, 3.6vw, 19px); color: var(--ink-soft); }
.ce-wave { display: block; width: 100%; height: 44px; position: absolute; left: 0; bottom: -1px; }

/* ---------- COUPON ---------- */
.ce-coupon-eyebrow { font-family: var(--font-display); font-weight: 700; letter-spacing: .28em; text-indent: .28em; font-size: 14px; line-height: 1.4; color: var(--persimmon); margin: 40px 0 18px; }
.ce-tickets { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ce-ticket {
  --r: 16px; position: relative; width: 100%; max-width: 360px; padding: 26px 20px 24px;
  border-radius: 18px; 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;
}
.ce-ticket--a { background: linear-gradient(160deg, #eda06a 0%, #d97a3e 100%); filter: drop-shadow(0 6px 10px rgba(180, 100, 50, .2)); }
.ce-ticket--b { background: linear-gradient(160deg, #d97a3e 0%, #b3541f 100%); filter: drop-shadow(0 8px 12px rgba(150, 80, 35, .24)); }
.ce-ticket__step { display: inline-block; padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.22); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.ce-ticket__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 9vw, 42px); line-height: 1.1; margin-top: 10px; }
.ce-ticket--b .ce-ticket__value { font-size: clamp(32px, 9vw, 42px); }
.ce-ticket__cond { margin-top: 8px; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.94); }
.ce-coupon-note { margin-top: 18px; font-size: 13px; color: var(--ink-soft); }
.ce-coupon__btn {
  display: block; width: 100%; max-width: 360px; margin: 22px auto 0; padding: 18px 24px;
  border: 0; border-radius: 999px; cursor: pointer; background: var(--night); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.4;
  box-shadow: 0 10px 22px rgba(16, 49, 143, .28); transition: transform .15s, box-shadow .15s, background .2s;
}
.ce-coupon__btn:active { transform: translateY(2px); box-shadow: 0 6px 14px rgba(16, 49, 143, .28); }
.ce-coupon__btn[data-done="true"] { background: var(--grass); box-shadow: 0 10px 22px rgba(61, 122, 86, .3); }

/* ---------- PRODUCTS ---------- */
.ce-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 18px; margin-top: 24px; text-align: left; }
.ce-card { display: flex; flex-direction: column; color: inherit; }
.ce-card__thumb {
  position: relative; aspect-ratio: 3 / 4; border-radius: 18px; 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 10px 22px rgba(38, 42, 77, .12);
}
.ce-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ce-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; }
.ce-card__off { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--discount); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.3; padding: 5px 10px 4px; border-radius: 10px; box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.ce-card__tag { position: absolute; top: 46px; right: 10px; z-index: 2; background: #000; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.3; padding: 5px 10px 4px; border-radius: 10px; box-shadow: 0 3px 8px rgba(0,0,0,.28); }
.ce-card__name {
  margin-top: 12px; font-size: 14px; font-weight: 600; line-height: 1.42; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(1.42em * 2);
}
.ce-card__price { margin-top: auto; padding-top: 6px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ce-card__rate, .ce-card__now { font-family: var(--font-display); font-weight: 700; line-height: 1.3; }
.ce-card__rate { font-size: 17px; color: var(--discount); }
.ce-card__now { font-size: 16px; color: var(--ink); }
.ce-card__was { font-size: 11px; color: #a0a2b8; text-decoration: line-through; }
.ce-group-title { display: inline-block; margin-top: 44px; padding: 9px 24px; border-radius: 999px; background: var(--night); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .02em; }
.ce-group-title--second { margin-top: 60px; }

/* ---------- NOTICE ---------- */
.ce-foot { background: var(--night); color: #c9d3f5; padding: 40px 28px 48px; font-size: 13px; line-height: 1.75; }
.ce-foot h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.4; color: #fff; margin-bottom: 10px; }
.ce-foot ul { padding-left: 18px; list-style: disc; }

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