/* ============================================================
   36. 통합 반응형 레이어
   데스크탑 → 태블릿 가로 → 태블릿 세로 → 폰 가로 → 폰 세로
   ============================================================ */

/* 공통: 가로 넘침 차단 + 노치 안전영역 */
html,body{max-width:100%;overflow-x:hidden}
#ev,#fstat,#done,#dlm,#gr{overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-left:max(18px,env(safe-area-inset-left))!important;
  padding-right:max(18px,env(safe-area-inset-right))!important}
#appwrap{padding-right:max(clamp(12px,2vh,20px),env(safe-area-inset-right))!important}
img,svg,canvas{max-width:100%}

/* ---------- ① 작은 데스크탑 · 1280px 이하 ---------- */
@media (max-width:1280px){
  #ticket{width:min(1020px,95vw)!important}
  .chip-grid{width:min(960px,94vw)!important}
  #fcard{width:min(860px,95vw)!important}
}

/* ---------- ② 태블릿 가로 · 1024px 이하 ---------- */
@media (max-width:1024px){
  #ticket{width:96vw!important}
  .evcols{gap:16px 22px!important}
  .stamps,.smgrid{gap:6px!important}
  .stamp .nm,.smcell .nm{font-size:11.4px!important}
  #fgrid{grid-template-columns:repeat(2,1fr)!important}
  #appwrap{width:min(440px,92vw)!important}
  .intro__watch{width:clamp(112px,13vw,146px)}
}

/* ---------- ③ 태블릿 세로 · 860px 이하 ---------- */
@media (max-width:860px){
  /* 랠리: 1열로 쌓고 섹션 순서 유지 */
  .evcols{grid-template-columns:1fr!important;grid-template-rows:none!important;
    gap:22px!important}
  .evcols>.evsec{margin-top:0!important}
  .evcols>.evsec>.lead{display:block!important}
  .stamps,.smgrid{grid-template-columns:repeat(4,1fr)!important}
  .rewards{grid-template-columns:repeat(2,1fr)!important}
  #trrow{grid-template-columns:repeat(2,1fr)!important}
  #ticket .head,#fcard .head{padding:12px 18px!important}
  #ticket .body,#fcard .body{padding:18px 18px 16px!important}

  /* 푸터: QR·문구·버튼 줄바꿈 */
  #evfoot,#ffoot,#grfoot{flex-wrap:wrap!important;gap:12px 14px!important;
    padding:12px 18px!important}
  #evfoot .n,#ffoot .n{flex:1 1 100%;order:3;margin:0!important}
  .stores{flex-wrap:wrap}

  /* 사이드바 */
  #appwrap{width:min(420px,94vw)!important}
  #appbody{padding:16px 18px 4px!important}
  .apscr{min-height:250px!important}
  .apphone{width:172px}

  /* 완주 카드 */
  #donecard{width:min(96vw,640px)!important}
}

/* ---------- ④ 폰 · 600px 이하 ---------- */
@media (max-width:640px){
  /* 오버레이 여백 최소화 */
  #ev,#fstat{padding-top:clamp(56px,8vh,72px)!important;padding-bottom:24px!important}
  #done,#dlm{padding-top:clamp(40px,7vh,60px)!important;padding-bottom:24px!important}

  /* 카드 헤더 */
  #ticket .head b,#fcard .head b,#grcard .hd b,#dlcard .hd b{font-size:15px!important}
  #ticket .head span,#fcard .head span{font-size:10px!important}
  .qchip{font-size:9.5px!important;padding:3px 7px!important}

  /* 랠리 그리드 */
  .stamps,.smgrid{grid-template-columns:repeat(3,1fr)!important;gap:6px!important}
  .stamp,.smcell{padding:8px 4px 7px!important}
  .stamp .slot{width:30px;height:30px}
  .smcell .ill{width:26px;height:30px}
  .stamp .nm,.smcell .nm{font-size:11.5px!important}
  .rewards,#trrow{grid-template-columns:1fr!important;gap:7px!important}
  .rw{padding:10px 12px!important}
  .rwqr{width:38px;height:38px}
  .evsec .cap{font-size:15px!important}
  .evcols>.evsec>h5{font-size:19px!important}
  .evcols>.evsec>.lead{font-size:12.5px!important;margin-bottom:10px!important}

  /* 기능 현황판 */
  #fgrid{grid-template-columns:1fr!important}
  .fcell{padding:11px 13px!important}
  .fcell .slot{width:32px;height:32px}

  /* 푸터 · 스토어 버튼 */
  #evfoot,#ffoot,#grfoot,#apfoot{padding:12px 16px!important}
  .stores{width:100%;gap:8px}
  .store{flex:1 1 0;min-width:0!important;justify-content:center;padding:8px 10px!important}
  .store b{font-size:12px!important}
  .store small{font-size:7.5px!important}
  .qrwrap,#evqr,#fqr,#dlqr{width:52px!important;height:52px!important}

  /* 사이드바 = 하단 시트 */
  #appwrap{width:100%!important;max-width:100%!important;
    left:0!important;right:0!important;bottom:0!important;top:auto!important;
    height:88vh!important;height:88dvh!important;
    padding:0!important;padding-right:0!important;
    transform:translateY(102%)!important}
  #appwrap.on{transform:translateY(0)!important}
  #appcard{width:100%;max-height:100%;border-radius:18px 18px 0 0!important}
  #appclose{top:14px!important;right:14px!important}
  #appbody{padding:16px 18px 4px!important}
  .apphone{width:158px}
  .apscr{min-height:228px!important}
  #appbody .aptitle{font-size:20px!important}

  /* 완주 카드 */
  #donecard{padding:22px!important;width:100%!important}
  #donecard h4{font-size:19px!important;padding-right:0!important;white-space:normal!important}
  #donecard::before{width:62px;height:62px;right:16px;top:16px;opacity:.45}
  #donecard p{font-size:13.5px!important}

  /* 씬 HUD */
  #where{left:12px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important}
  #where .k{font-size:17px!important}

  /* 히어로 */
  .intro__watch{width:104px;left:calc(100% - 14px);bottom:34px}
  .intro__actions{gap:8px}
  .intro__actions button{padding:11px 18px!important;font-size:13.5px!important}
}

/* ---------- ⑤ 작은 폰 · 400px 이하 ---------- */
@media (max-width:375px){
  .stamps,.smgrid{grid-template-columns:repeat(3,1fr)!important;gap:5px!important}
  .stamp .nm,.smcell .nm{font-size:10.6px!important;letter-spacing:-.04em!important}
  .stamp .no{font-size:8px!important}
  .rw .tx b{font-size:13px!important}
  .rw .tx span{font-size:11.2px!important}
  #ticket .body,#fcard .body{padding:14px 13px 12px!important}
  #evfoot,#ffoot{padding:11px 13px!important}
  .store b{font-size:11px!important}
  .intro__watch{display:none}
  #donecard h4{font-size:17.5px!important}
}

/* ---------- ⑥ 폰 가로 · 높이 520px 이하 ---------- */
@media (orientation:landscape) and (max-height:520px){
  #ev,#fstat,#done,#dlm,#gr{padding-top:14px!important;padding-bottom:14px!important;
    align-items:flex-start!important}
  #ticket,#fcard,#donecard,#dlcard,#grcard{margin:0 auto}
  #ticket .body,#fcard .body{padding:12px 16px 10px!important}
  .evcols{gap:12px 18px!important;margin-top:10px!important}
  .evcols>.evsec>.lead{display:none!important}
  .evcols>.evsec>h5{font-size:17px!important;margin-bottom:6px!important}
  .stamp,.smcell{padding:6px 4px 5px!important;gap:4px!important}
  .stamp .slot{width:26px;height:26px}
  .smcell .ill{width:22px;height:26px}
  .rw{padding:8px 11px!important}
  #evfoot,#ffoot{padding:9px 16px!important}
  .qrwrap,#evqr,#fqr,#dlqr{width:46px!important;height:46px!important}

  /* 사이드바는 우측 패널 유지 (가로 공간 활용) */
  #appwrap{width:min(400px,52vw)!important;left:auto!important;right:0!important;
    top:0!important;bottom:0!important;height:100%!important;
    padding:10px!important;transform:translateX(102%)!important}
  #appwrap.on{transform:translateX(0)!important}
  #appcard{border-radius:14px!important}
  #appclose{top:22px!important;right:22px!important}
  .apstage{display:none!important}          /* 폰 목업은 숨기고 텍스트 위주 */
  #appbody{padding:12px 16px 4px!important}
  #appbody .aptitle{font-size:18px!important;margin-top:12px!important}
  #appbody .apnotes{margin-top:12px!important;padding-top:10px!important}
  .aplist li{font-size:13px!important}

  /* 완주 카드 */
  #donecard{padding:18px 20px!important}
  #donecard h4{font-size:18px!important;white-space:normal!important;padding-right:70px!important}
  #donecard::before{width:56px;height:56px;right:14px;top:14px}
  #donecard>div:last-child{margin-top:14px!important}

  /* HUD */
  #hud{top:66px!important;bottom:auto!important;right:10px!important}
  #where{bottom:10px!important}
}

/* ---------- ⑦ 터치 기기: 호버 효과 정리 ---------- */
@media (hover:none){
  .fcell:hover .slot{border-color:rgba(38,31,23,.26)}
  #trrow .rw:hover{background:var(--pp-cell)!important}
}


/* ---------- 37. 게임 · 지도 · 푸터 반응형 보강 ---------- */
@media (max-width:640px){
  #mapgrid{grid-template-columns:repeat(2,1fr)!important}
  #map{padding:clamp(50px,8vh,72px) 16px 32px!important}
  #ghud{padding:14px 14px!important}
  #gbarwrap{width:min(320px,86vw)!important;bottom:14px!important}
  #gcount b{font-size:clamp(56px,20vw,110px)!important}
  #gquit{top:12px!important;right:12px!important;padding:7px 12px!important;font-size:12px!important}
  #grcard{padding:22px 20px!important}
  #grfoot{flex-wrap:wrap;gap:10px}
  #grfoot .n{min-width:0!important;width:auto!important;flex:1 1 100%}
  .site-footer__top{grid-template-columns:1fr!important;gap:26px!important}
  .site-footer__bottom{flex-direction:column;align-items:flex-start;gap:10px}
  .closing__copy h2{font-size:clamp(24px,7.5vw,34px)!important}
  .step-nav__inner{overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;max-width:94vw}
  .step-nav__inner::-webkit-scrollbar{display:none}
  .step-nav__inner button{flex:0 0 auto}
}
@media (orientation:landscape) and (max-height:520px){
  #ghud{padding:10px 14px!important}
  #gbarwrap{bottom:10px!important;width:min(300px,54vw)!important}
  #gcount b{font-size:clamp(44px,13vh,88px)!important}
  #map{padding:44px 16px 24px!important}
  #mapgrid{grid-template-columns:repeat(4,1fr)!important}
  #grcard{padding:18px 20px!important}
  .demo__stage{padding-top:56px!important}
}


/* ---------- 38. 히어로 자체평가 배지 ---------- */
.intro__rating{font-family:var(--kr)!important;font-size:12.5px;font-weight:600!important;
  letter-spacing:-.02em;gap:8px!important;
  padding:6px 14px 6px 11px;border-radius:100px;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:0 10px 24px -14px rgba(12,27,46,.3),0 0 0 1px rgba(12,27,46,.05);
  color:rgba(12,27,46,.62)!important;white-space:nowrap}
.intro__rating em{font-style:normal;font-weight:500;color:rgba(12,27,46,.42);
  font-size:11.5px;margin-right:1px}
.intro__stars svg{width:12px!important;height:12px!important}
@media (max-width:640px){
  .intro__rating{font-size:11.5px;padding:5px 12px 5px 9px;white-space:normal;
    text-align:left;line-height:1.4}
  .intro__rating em{font-size:10.6px;display:block}
  .intro__stars svg{width:11px!important;height:11px!important}
}


/* ---------- 39. 월계관 어워드 배지 ---------- */
.intro__rating{display:inline-flex!important;align-items:center;gap:6px!important;
  padding:5px 14px!important;border-radius:100px;
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:0 12px 26px -16px rgba(12,27,46,.34),0 0 0 1px rgba(12,27,46,.055);
  white-space:nowrap}
.intro__rating .lau{height:clamp(30px,3.2vw,38px);width:auto;flex:0 0 auto;
  color:#C6982F;opacity:.92}
.intro__rating .lau.r{transform:scaleX(-1)}
.intro__rating .award{display:flex;flex-direction:column;align-items:center;
  line-height:1.25;font-family:var(--kr);padding:0 2px}
.intro__rating .award em{font-style:normal;font-size:10.5px;font-weight:500;
  letter-spacing:-.02em;color:rgba(12,27,46,.42)}
.intro__rating .award b{font-size:13px;font-weight:800;letter-spacing:-.03em;
  color:#0C1B2E;margin-top:1px}
.intro__stars{display:none!important}

@media (max-width:640px){
  .intro__rating{padding:4px 11px!important;gap:4px!important}
  .intro__rating .lau{height:27px;width:auto}
  .intro__rating .award em{font-size:9.6px}
  .intro__rating .award b{font-size:11.8px}
}