/* ==================================================================
   2026 백두대간 자생곤충전 이벤트 랜딩 페이지
   모바일 우선 + 데스크톱 반응형 (900px 이상에서 PC 레이아웃)
   본문 안내는 디자인 원화(나무 안내판) 이미지로 대체 — alt 로 내용 보존
================================================================== */
:root{
  --green-900:#12281a; --green-800:#1c3a26; --green-700:#265234;
  --green-500:#3d8b4f; --green-400:#5bb06a; --lime:#8ede4a;
  --gold:#ffd94a; --ink:#22301f; --muted:#7c8a76;
  --danger:#e0523f;
  --pad:20px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* display 를 지정한 요소도 hidden 속성이 우선하도록 (약관 시트·완료 화면) */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  color:var(--ink);background:#0e1f14;line-height:1.6;
  -webkit-text-size-adjust:100%;
}
/* 페이지 전체에 길게 깔리는 정글 배경 (스크롤해도 고정) + 가독성 스크림 */
body::before{content:"";position:fixed;inset:0;z-index:-2;
  background:url("img/hero-bg.webp") center top/cover no-repeat;
  background-color:#0e1f14}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,18,10,.22) 0%,rgba(8,18,10,.44) 45%,rgba(8,18,10,.58) 100%)}
img{max-width:100%;display:block}

/* ---------------- 01 메인 비주얼 ---------------- */
.hero{position:relative;min-height:82vh;display:flex;align-items:center;
  overflow:hidden;color:#fff}
.hero-bg{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(6,16,9,.55) 100%)}
.hero-inner{position:relative;width:100%;max-width:1080px;margin:0 auto;
  padding:30px var(--pad) 40px;text-align:center}
.hero-title-img img{width:min(88%,520px);margin:0 auto;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.55))}
.hero-cta{display:inline-block;margin-top:20px;text-decoration:none;
  width:min(78%,340px);filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));
  animation:bob 2.4s ease-in-out infinite}
.hero-cta img{width:100%}
.hero-cta:active{transform:scale(.96)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(min-width:900px){
  :root{--pad:32px}
  .hero-title-img img{width:min(64%,640px)}
  .hero-cta{width:min(40%,400px);margin-top:26px}
}

/* ---------------- 안내판 이미지 공통 ---------------- */
.board{margin:0 auto}
/* 좁은 화면에서는 안내판 글자가 작아지므로 좌우 여백을 줄여 최대한 크게 보여준다 */
@media(max-width:620px){
  .info-sec,.notice-sec{padding-left:8px;padding-right:8px}
  .game-sec{padding-left:10px;padding-right:10px}
}
.board img{width:100%;margin:0 auto;filter:drop-shadow(0 10px 22px rgba(0,0,0,.4))}

/* ---------------- 02 게임 섹션 ---------------- */
.game-sec{padding:34px var(--pad) 44px}
.game-sec .inner{max-width:1080px;margin:0 auto}
.board-game-desc{max-width:760px;margin-bottom:26px}

.game-frame{margin:0 auto}
.game-device{position:relative;width:100%;max-width:400px;margin:0 auto;
  aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#0b1610;
  border:8px solid #20160c;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.game-device iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.game-hint{text-align:center;color:rgba(255,255,255,.82);font-size:14px;margin-top:14px;
  text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* 참여방법 3단계 — 나무 표지판 (모바일: 세로 스택) */
.steps-wrap{margin-top:36px}
.steps-title{font-size:clamp(18px,2.4vw,24px);font-weight:900;color:#f2ffe9;
  text-shadow:0 2px 10px rgba(0,0,0,.6);margin-bottom:14px;text-align:center}
.steps{list-style:none;display:flex;flex-direction:column;gap:18px}
.steps li{position:relative;text-align:center}
.steps li img{width:100%;max-width:420px;margin:0 auto;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
.step-badge{display:inline-block;position:absolute;left:50%;top:-4px;transform:translateX(-50%);
  background:var(--green-700);color:#fff;font-weight:800;font-size:13px;
  padding:4px 16px;border-radius:999px;z-index:2;box-shadow:0 4px 10px rgba(0,0,0,.25)}

@media(min-width:900px){
  .board-game-desc{max-width:860px;margin-bottom:30px}
  /* 게임을 뷰포트 높이에 맞춰 크게 */
  .game-device{width:auto;max-width:94vw;height:min(90vh,1000px);margin:0 auto}
  /* 3단계를 한 줄로 */
  .steps{flex-direction:row;justify-content:center;gap:24px;max-width:1080px;margin:0 auto}
  .steps li{flex:1 1 0;max-width:340px}
  .steps li img{max-width:100%}
  .step-badge{font-size:14px;padding:5px 18px}
}

/* ---------------- 03 이벤트 상세 ---------------- */
.info-sec{padding:30px var(--pad)}
.info-sec .inner{max-width:820px;margin:0 auto}

/* 당첨자 선물 — 모바일 2×2, 데스크톱 한 줄 4개 */
.prizes{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:520px;
  margin:40px auto}
.prizes img{width:100%;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}
@media(min-width:900px){
  .prizes{grid-template-columns:repeat(4,1fr);gap:18px;max-width:100%}
  .info-sec .inner{max-width:980px}
  .info-sec .board{max-width:860px}
}

/* ---------------- 04 유의사항 / 푸터 ---------------- */
.notice-sec{padding:30px var(--pad)}
.notice-sec .inner{max-width:820px;margin:0 auto}
/* 남원시 공식 채널 — 6개를 항상 한 줄에 */
.sns{display:flex;justify-content:center;align-items:flex-start;gap:2vw;margin-top:30px}
.sns a{flex:1 1 0;max-width:120px;min-width:0;text-decoration:none;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px}
.sns img{width:min(13vw,58px);aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.94);padding:4%;
  box-shadow:0 4px 12px rgba(0,0,0,.4);transition:transform .15s}
.sns a:hover img{transform:translateY(-3px) scale(1.05)}
.sns span{font-size:clamp(9.5px,2.4vw,13px);font-weight:700;color:#eafff0;
  text-shadow:0 2px 6px rgba(0,0,0,.7);line-height:1.25;word-break:keep-all}
@media(min-width:900px){
  .sns{gap:26px;margin-top:36px}
  .sns img{width:64px}
  .sns span{font-size:14px}
}

.share{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px}
.share-btn{background:var(--green-700);color:#fff;border:0;border-radius:999px;
  padding:9px 20px;font-size:14px;font-weight:700;cursor:pointer}
@media(min-width:900px){
  .notice-sec .inner{max-width:980px}
  .notice-sec .board{max-width:860px}
  /* 유의사항 원화는 '유의사항' 제목판이 이미지 중심보다 4% 왼쪽에 있어(중심 45.95%),
     PC 에서 제목 글자가 화면 가운데 오도록 이미지를 그만큼 오른쪽으로 옮긴다. */
  .notice-sec .board img{transform:translateX(4.05%)}
}

.footer{text-align:center;padding:36px var(--pad) 130px;color:#eafff0;
  text-shadow:0 2px 8px rgba(0,0,0,.5)}
.footer p{font-weight:800;font-size:16px}
.footer-sub{font-weight:400 !important;color:rgba(255,255,255,.7);font-size:13px;margin-top:4px}

/* ---------------- 06 플로팅 버튼 (펫말 이미지) ---------------- */
.float-btn{position:fixed;right:16px;bottom:18px;z-index:40;cursor:pointer;
  background:linear-gradient(180deg,#57a866,#2c5f39);color:#fff;
  border:3px solid #1b3d23;border-radius:999px;padding:15px 28px;
  font-size:17px;font-weight:900;font-family:inherit;letter-spacing:.02em;
  box-shadow:0 8px 20px rgba(0,0,0,.45);animation:bob 2.6s ease-in-out infinite}
.float-btn:active{transform:scale(.95)}
@media(min-width:900px){ .float-btn{right:26px;bottom:26px;padding:17px 34px;font-size:19px} }

/* ==================================================================
   05 응모 팝업 — 프레임 원화 위에 실제 입력 요소를 겹쳐 배치
   좌표는 원화(760×850) 실측값 기준 %  ·  cqw = 카드 폭의 1%
================================================================== */
.modal{position:fixed;inset:0;z-index:60;display:none}
.modal.open{display:block}
.modal-dim{position:absolute;inset:0;background:rgba(8,16,10,.72);backdrop-filter:blur(3px)}

.modal-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  /* 기존 430px 대비 1.5배(645px) — 화면이 작으면 자동으로 축소 */
  width:min(96vw,645px,calc(92vh * 0.8941));
  aspect-ratio:760 / 850;
  background:url("img/entry-frame.webp") center/100% 100% no-repeat;
  container-type:inline-size;
  animation:pop .3s cubic-bezier(.2,1.2,.4,1)}
@keyframes pop{from{transform:translate(-50%,-46%);opacity:0}
  to{transform:translate(-50%,-50%);opacity:1}}

.modal-x{position:absolute;top:2.2%;left:50%;transform:translateX(-50%);
  width:9cqw;height:9cqw;border:0;background:rgba(0,0,0,.35);border-radius:50%;
  color:#fff;font-size:5cqw;line-height:1;cursor:pointer;z-index:5;opacity:.7}
.modal-x:hover{opacity:1}

/* --- 최고기록 (프레임 녹색 박스 위: x 15.24~80.57%, y 29.85~46.08%) --- */
.record-box{position:absolute;left:18.16%;width:59.6%;top:29.8%;height:16.1%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;text-align:center;line-height:1.15}
.record-label{font-size:3cqw;font-weight:700;opacity:.9;line-height:1.1}
.record-val{font-size:8.6cqw;font-weight:900;color:var(--gold);letter-spacing:-.01em;line-height:1.1}
.record-val em{font-size:4.2cqw;font-style:normal;margin-left:.4cqw}
.double-badge{display:none;margin-top:.6cqw;background:var(--gold);color:#5a3d00;
  font-weight:900;font-size:2.7cqw;padding:.6cqw 2.2cqw;border-radius:999px;white-space:nowrap}
.record-box.doubled .double-badge{display:inline-block}
.record-box.doubled .record-val{font-size:7.8cqw}
.record-hint{font-size:3cqw;opacity:.85;margin-top:.4cqw}
.record-box.has-record .record-hint{display:none}

/* --- 입력칸 (라벨은 프레임에 포함 / x 11.86~76.37%) --- */
.fld{position:absolute;left:19.2%;width:57.5%;
  border:0;background:transparent;font-family:inherit;color:#2c2418;
  font-size:4cqw;padding:0 2.4cqw;outline:none}
.fld::placeholder{color:#a9a08c}
.fld:focus{background:rgba(255,255,255,.5);border-radius:1.6cqw}
.fld-name  {top:50.59%;height:4.82%}
.fld-phone {top:59.88%;height:4.94%}
.fld-region{top:69.41%;height:4.94%}
.fld.invalid{background:rgba(224,82,63,.16);border-radius:1.6cqw}

/* --- 동의 행 (프레임 빈 크림 영역: y ≈ 76.3%) --- */
/* 우측 딱정벌레 그림을 넘지 않도록 폭을 제한한다 */
.agree-row{position:absolute;left:19.2%;width:53%;top:76%;
  display:flex;align-items:center;gap:1.2cqw;flex-wrap:nowrap}
.agree{display:flex;align-items:center;gap:1.2cqw;font-size:2.6cqw;
  color:#3c3524;cursor:pointer;white-space:nowrap}
.agree input{width:3.4cqw;height:3.4cqw;flex:none;accent-color:var(--green-700);cursor:pointer}
.agree b{color:var(--danger)}
.agree-more{background:none;border:0;color:#2f6b3a;text-decoration:underline;
  cursor:pointer;font-size:2.5cqw;font-family:inherit;padding:0;white-space:nowrap}

/* --- 버튼 (취소 x 19.1~44.7% / 참여하기 x 46.5~69.3%, y 81.5~87.4%) --- */
.modal-btns{position:absolute;left:0;top:81.4%;width:100%;height:7%}
.btn-img{position:absolute;top:0;height:100%;background:none;border:0;padding:0;cursor:pointer}
.btn-img img{width:100%;height:100%;object-fit:contain}
.btn-img:active{transform:scale(.96)}
.btn-cancel{left:19.5%;width:24%}
.btn-submit{left:46.5%;width:24%}
.btn-img:disabled{opacity:.5;cursor:default}

/* --- 응모 완료 ---
   프레임 원화에는 라벨·입력칸이 그려져 있어 그대로 겹치면 지저분하다.
   → 불투명 카드로 덮어 완료 내용만 보이게 한다. */
.modal-card.is-done .record-box{display:none}
.entry-done{position:absolute;left:48%;top:52%;transform:translate(-50%,-50%);
  width:66%;background:#fdfaf0;border:.6cqw solid #d8cfb4;border-radius:3cqw;
  padding:5cqw 4cqw;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#2c2418;box-shadow:0 1.6cqw 4cqw rgba(0,0,0,.35)}
.done-icon{font-size:12cqw;line-height:1}
.entry-done h3{font-size:5cqw;font-weight:900;color:#215c30;margin:1.8cqw 0 1.2cqw}
.entry-done p{font-size:3.4cqw;color:#4a4433;line-height:1.6}
.btn-done{margin-top:4cqw;width:56%;background:linear-gradient(180deg,#3d8b4f,#265234);
  color:#fff;border:.5cqw solid #1b3d23;border-radius:2cqw;padding:2.6cqw;
  font-size:4cqw;font-weight:900;font-family:inherit;cursor:pointer}
.btn-done:active{transform:scale(.97)}

/* --- 약관 시트 --- */
.agree-sheet{position:absolute;inset:0;z-index:10;display:grid;place-items:center;
  background:rgba(8,16,10,.6);padding:20px}
.agree-sheet-inner{background:#fdfaf0;border-radius:16px;padding:22px 20px;max-width:380px;
  box-shadow:0 16px 40px rgba(0,0,0,.4)}
.agree-sheet h4{font-size:17px;color:var(--green-800);margin-bottom:10px}
.agree-sheet p{font-size:13.5px;color:#555;line-height:1.7}
.agree-sheet-note{margin-top:8px;color:#8a8471 !important;font-size:12.5px !important}
.btn-plain{margin-top:16px;width:100%;background:var(--green-700);color:#fff;border:0;
  border-radius:10px;padding:12px;font-size:15px;font-weight:800;cursor:pointer;
  font-family:inherit}

/* 오류는 토스트로 안내 (프레임 공간이 고정이라 인라인 문구 미사용) */
.form-error{display:none}

/* ---------------- 토스트 ---------------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;
  background:rgba(20,30,20,.94);color:#fff;padding:13px 22px;border-radius:999px;
  font-size:14.5px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.4);
  max-width:90vw;text-align:center}
.toast[hidden]{display:none}