@charset "utf-8";
/* ═══════════════════════════════════════════════
   34 썸머 럭키위크 — 이벤트·프로모션 랜딩 (원페이지)
   컨셉: 핫핑크-바이올렛 그라데이션 / 카운트다운 / 응모 폼 전환 중심
   ═══════════════════════════════════════════════ */
:root{
  --pink:#ff3d8d;
  --violet:#7b2ff7;
  --yellow:#ffd34d;
  --ink:#241433;
  --dim:#8d7da3;
  --bg:#fdf7ff;
  --card:#fff;
  --line:#f0e3fa;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font-family:inherit}
.wrap{max-width:920px;margin:0 auto;padding:0 24px}
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
html.js .reveal.on{opacity:1;transform:none}

/* ── 히어로 ── */
.hero{background:linear-gradient(140deg,var(--violet),var(--pink) 70%);color:#fff;padding:74px 0 150px;text-align:center;position:relative;overflow:hidden}
.hero .deco{position:absolute;border-radius:50%;background:rgba(255,255,255,.12)}
.hero .d1{width:300px;height:300px;top:-110px;left:-80px}
.hero .d2{width:200px;height:200px;bottom:-60px;right:-50px;background:rgba(255,211,77,.25)}
.hero .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:9px 20px;font-size:14px;font-weight:800;letter-spacing:.04em}
.hero h1{font-size:clamp(38px,6vw,64px);font-weight:900;letter-spacing:-.04em;line-height:1.18;margin:22px 0 12px;position:relative}
.hero h1 .hl{color:var(--yellow)}
.hero .sub{font-size:17px;opacity:.92;position:relative}
.hero .period{margin-top:16px;display:inline-block;background:rgba(0,0,0,.18);border-radius:10px;padding:8px 18px;font-size:14px;font-weight:700}

/* 카운트다운 */
.count{display:flex;gap:12px;justify-content:center;margin-top:34px;position:relative}
.cnt{background:#fff;color:var(--ink);border-radius:18px;min-width:88px;padding:16px 8px 13px;box-shadow:0 18px 44px rgba(36,20,51,.3)}
.cnt b{display:block;font-size:36px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1}
.cnt span{font-size:11.5px;font-weight:800;color:var(--dim);letter-spacing:.14em}
.count .colon{font-size:30px;font-weight:900;align-self:center;opacity:.7}

/* ── 혜택 카드 ── */
.bens{margin-top:-86px;position:relative;z-index:5;padding-bottom:70px}
.ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ben{background:var(--card);border-radius:22px;padding:30px 26px;text-align:center;box-shadow:0 18px 50px rgba(123,47,247,.13);border:1px solid var(--line);position:relative}
.ben .no{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--yellow);color:var(--ink);font-size:12px;font-weight:900;border-radius:999px;padding:5px 16px;white-space:nowrap}
.ben .em{font-size:42px}
.ben h3{font-size:19px;font-weight:900;margin-top:10px;letter-spacing:-.02em}
.ben h3 .hl{color:var(--pink)}
.ben p{font-size:13.5px;color:var(--dim);margin-top:6px}

/* ── 섹션 공통 ── */
.sec{padding:64px 0}
.sec-head{text-align:center;margin-bottom:38px}
.sec-head .lb{font-size:12px;font-weight:800;letter-spacing:.26em;color:var(--pink)}
.sec-head h2{font-size:clamp(25px,3.2vw,36px);font-weight:900;letter-spacing:-.04em;margin-top:9px}
.sec-head h2 b{color:var(--violet)}
.sec-head .ds{margin-top:8px;font-size:15px;color:var(--dim)}

/* 응모 방법 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.stp{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px 24px;text-align:center;position:relative}
.stp .n{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;font-size:17px;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.stp b{font-size:16.5px;font-weight:900;display:block}
.stp p{font-size:13.5px;color:var(--dim);margin-top:5px}

/* ── 응모 폼 ── */
.form-card{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:42px 44px;box-shadow:0 24px 60px rgba(123,47,247,.12);max-width:620px;margin:0 auto}
.form-card h3{font-size:21px;font-weight:900;text-align:center}
.form-card .left{text-align:center;font-size:13px;color:var(--pink);font-weight:800;margin:6px 0 24px}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:13px;font-weight:800;color:var(--dim);margin-bottom:7px}
.fld label .req{color:var(--pink)}
.fld input,.fld select{width:100%;background:var(--bg);border:2px solid var(--line);border-radius:14px;color:var(--ink);font-size:15px;padding:13px 16px;outline:0;transition:.15s}
.fld input:focus,.fld select:focus{border-color:var(--violet);background:#fff}
.agree{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--dim);margin:18px 0;line-height:1.6}
.agree input{width:17px;height:17px;accent-color:var(--violet);margin-top:2px;flex-shrink:0}
.agree a{color:var(--violet);font-weight:700;text-decoration:underline}
.btn-go{display:block;width:100%;background:linear-gradient(120deg,var(--violet),var(--pink));color:#fff;border-radius:16px;padding:17px;font-size:17px;font-weight:900;letter-spacing:-.01em;box-shadow:0 14px 34px rgba(255,61,141,.3);transition:.2s;text-align:center}
.btn-go:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(255,61,141,.4)}
.form-card .note{text-align:center;font-size:12px;color:var(--dim);margin-top:13px}

/* 유의사항 */
.faq{max-width:720px;margin:0 auto;display:grid;gap:11px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:0 22px}
.faq summary{font-size:14.5px;font-weight:800;padding:16px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:"+";font-size:20px;color:var(--violet);font-weight:700}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 0 17px;font-size:13.5px;color:var(--dim);line-height:1.85}

/* 공유 */
.share{display:flex;gap:11px;justify-content:center}
.share button{width:54px;height:54px;border-radius:50%;font-size:21px;display:flex;align-items:center;justify-content:center;color:#fff;transition:.18s}
.share button:hover{transform:translateY(-3px)}
.share .kko{background:#fee500;color:#3c1e1e}
.share .fb{background:#1877f2}
.share .ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.share .lk{background:var(--ink)}

/* 푸터 */
.footer{background:var(--ink);color:#b9a8cf;padding:34px 0;font-size:13px;text-align:center}
.footer .in{max-width:920px;margin:0 auto;padding:0 24px;display:grid;gap:6px}

/* ── 반응형 ── */
@media (max-width:880px){
  .ben-grid,.steps{grid-template-columns:1fr;gap:24px}
  .ben{margin-top:8px}
  .cnt{min-width:72px}
  .cnt b{font-size:28px}
  .form-card{padding:32px 24px}
}