/* =============================================================================
   stamp-tour-popup.css (N4b) — 팝업 13종 · 탭 · 스탬프 슬롯 · 여권 펼침 그리드

   설계 정본 : docs/promo-260804/10_DESIGN.md  §4-3 / §4-4 / §6-2 / §6-3
   디자인    : 02_FIGMA_SPEC.md §3-8·§4-1 (팝업 공통 골격) + 05_FIGMA_RECHECK.md §4-1

   ▣ 로드 범위
     프로모션 페이지(Index.cshtml) 와 사이트 전역 파셜(_StampTourPassport.cshtml)
     양쪽에서 쓰인다. 중복 <link> 는 HttpContext.Items 플래그로 방지한다.

   ▣ z-index 티어 (실측: renewal-components.css:1077)
     TIUM 챗봇 999999 > 메가메뉴 10000 > 롤링팝업·딤 9999/9998 > 탭바·FAB 9997
     ⇒ 딤 10001 / 팝업 10002 — 메가메뉴 위, TIUM 아래.
   ============================================================================= */

.st-blind {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.st-scroll-lock { overflow: hidden; }

/* =============================================================================
   1. 모달 셸
   ============================================================================= */
.st-dim {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 10001;
  background: #000000;
  opacity: .3;
}
.st-modal {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 10002;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.st-popup {
  position: relative;
  width: 560px;
  max-width: 100%;
  margin: auto;
  box-sizing: border-box;
  border-radius: 24px;
  background: #FFFFFF;
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
  color: #313D27;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
}

/* 닫기 48×48 — 시안은 팝업 밖 우상단(top 16 / right 16 오프셋 위치) */
.st-close {
  position: absolute;
  right: -64px;
  top: 16px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, .9) url('/Areas/Main/Views/Event/2026/2026_0804/images/popup_btn_close.svg') no-repeat 50% 50%;
  background-size: 20px 20px;
}

/* 포커스 인디케이터 — 시안에 focus 상태가 없어 신규 정의가 필수다(설계 §6-4) */
.st-tab:focus,
.st-major:focus,
.st-btn:focus,
.st-close:focus {
  outline: 2px solid #6F8F56;
  outline-offset: 2px;
}
.st-tab:focus:not(:focus-visible),
.st-major:focus:not(:focus-visible),
.st-btn:focus:not(:focus-visible),
.st-close:focus:not(:focus-visible) { outline: none; }
.st-tab:focus-visible,
.st-major:focus-visible,
.st-btn:focus-visible,
.st-close:focus-visible {
  outline: 2px solid #6F8F56;
  outline-offset: 2px;
}

/* =============================================================================
   2. 타이틀 박스 (560×152, bg #F5D96C, radius 24 24 0 0, padding 40 0 20)

   ⚠ 시안 폰트는 'Sandoll CreamPang'(유료 산돌) 인데 미확보 상태다(§9 O16).
     확보되면 아래 font-family 맨 앞에 'Sandoll CreamPang' 만 추가하면 된다.
     현재는 Pretendard ExtraBold 로 대체한다.
   ============================================================================= */
.st-titlebox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 0 20px;
  border-radius: 24px 24px 0 0;
  background: #F5D96C;
}
.st-titlebox-h {
  margin: 0;
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -1.6px;
  color: #6E8F56;
  text-align: center;
}

/* ── D1 : 시안상 유일한 실데이터 바인딩 지점 (200×36 pill — 05 §4-2 실측) ──
   popup-1(발급)·popup-8(완주)에는 pill 이 없다. 임의로 추가하지 말 것. */
.st-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 200px;
  height: 36px;
  margin: 0;
  box-sizing: border-box;
  border-radius: 100px;
  background: #FFF7D6;
}
.st-pill-label { font-size: 20px; font-weight: 400; line-height: 32px; letter-spacing: -0.4px; color: #313D27; }
.st-pill-count { font-size: 24px; font-weight: 900; line-height: 32px; color: #6F8F56; }
.st-pill-total { font-size: 24px; font-weight: 400; line-height: 32px; color: #94AA83; }

/* =============================================================================
   3. 본문
   ============================================================================= */
.st-body { padding: 40px 20px; border-radius: 0 0 24px 24px; background: #FFFFFF; }
.st-body--plain { border-radius: 24px; padding: 100px 40px; background: transparent; }
.st-content { display: flex; flex-direction: column; gap: 20px; }

/* ── 3-1. 탭 6개 (2행 × 3열). 탭 순서 = 스탬프 번호 1~6 ─────────────────── */
.st-tabs { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; }
.st-tabrow { display: flex; gap: 8px; }
.st-tab {
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  padding: 0 4px;
  box-sizing: border-box;
  border: 1px solid #DBE0D7;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.4px;
  color: #313D27;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
}
.st-tab[aria-selected="true"] { border: 2px solid #6F8F56; font-weight: 700; color: #6E8F56; }
.st-tab:hover { border-color: #6F8F56; }

/* ── 3-2. major section (스탬프 + 라벨 + 헤드카피 + 설명) ────────────────── */
.st-major-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.st-major-head-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px;
  box-sizing: border-box;
}
.st-label { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 400; letter-spacing: -0.4px; color: #313D27; }
.st-label img { width: 26px; height: auto; flex: 0 0 auto; }
.st-label--earned { color: #6F8F56; font-weight: 700; }

.st-head {
  margin: 0;
  font-size: 36px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: -0.72px;
  color: #22291F;
  word-break: keep-all;
}
.st-head em { font-style: normal; font-weight: 800; color: #6F8F56; }

.st-desc {
  margin: 0;
  padding: 40px 20px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #F2F5F0;
  list-style: none;
  counter-reset: st-desc;
}
.st-desc > li { position: relative; padding-left: 36px; counter-increment: st-desc; }
.st-desc > li + li { margin-top: 20px; }
.st-desc > li::before {
  content: counter(st-desc) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.48px;
  color: #22291F;
}
.st-desc-t { display: block; font-size: 24px; font-weight: 600; letter-spacing: -0.48px; color: #22291F; word-break: keep-all; }
.st-desc-b { display: block; margin-top: 8px; font-size: 20px; font-weight: 400; line-height: 1.5; letter-spacing: -0.4px; color: #727A6C; word-break: keep-all; }

/* ── 3-3. major container 4종 (popup-2-1 전공 선택, 480×100) ─────────────── */
.st-major-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 20px 20px 40px;
  border-radius: 12px;
  background: #F2F5F0;
  list-style: none;
}
.st-major {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-height: 100px;
  padding: 16px 24px;
  box-sizing: border-box;               /* ★ 필수 — active 3px 테두리로 486×106 이 되는 것 방지 */
  border: 3px solid transparent;
  border-radius: 8px;
  background: #E5EBE1;
  text-align: left;
  cursor: pointer;
}
.st-major[aria-pressed="true"] { border-color: #6F8F56; background: #E0EBD8; }
.st-major-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 34px;
  background: #CAD6C1;
}
.st-major-icon img { max-width: 50px; max-height: 46px; display: block; }
.st-major-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-major-name { font-size: 28px; font-weight: 700; color: #6F8F56; }
.st-major-sub { font-size: 24px; font-weight: 400; letter-spacing: -0.48px; color: #313D27; word-break: keep-all; }
.st-major-guide { margin: 20px 0 0; font-size: 20px; font-weight: 400; letter-spacing: -0.4px; color: #313D27; text-align: center; word-break: keep-all; }

/* ── 3-4. 버튼 (CTA 400×80 / 2버튼 236×80, radius 40) ────────────────────── */
.st-btns { display: flex; gap: 8px; justify-content: center; }
.st-btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: 400px;
  height: 80px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 0;
  border-radius: 40px;
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.48px;
  white-space: nowrap;
  cursor: pointer;
}
.st-btn--primary { background: linear-gradient(to top, #6F8F56 0%, #92B876 100%); color: #FFFFFF; }
.st-btn--ghost { background: #FFFFFF; border: 2px solid #6F8F56; font-weight: 600; color: #6F8F56; }
.st-btns--single .st-btn { flex: 0 1 400px; }
.st-btn:hover { filter: brightness(1.03); }

/* ── 3-5. popup-1 / popup-8 공통 (타이틀 박스·탭 없는 골격) ──────────────── */
.st-plain { display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.st-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.64px;
  color: #6F8F56;
}
.st-sub img { width: 20px; height: 13px; flex: 0 0 auto; }
.st-headline { margin: 0; font-size: 48px; font-weight: 800; line-height: 1.25; letter-spacing: -0.96px; color: #22291F; word-break: keep-all; }
.st-object {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background: #EFF5EB;
}
.st-object img { width: 105px; height: auto; filter: drop-shadow(4px 16px 24px rgba(0, 0, 0, .16)); }
.st-lead { margin: 0; font-size: 24px; font-weight: 400; line-height: 32px; color: #787A76; word-break: keep-all; }

/* popup-8 전용 — 노란 그라데이션 (시안대로 폭죽 채택본 유지. 20:143 그리드는 켜지 않는다) */
.st-popup--done { background: linear-gradient(to bottom, #FAE182 0%, #F0D469 100%); }
.st-done-object { position: relative; width: 100%; height: 200px; }
.st-done-ellipse { position: absolute; left: 50%; top: 0; width: 200px; transform: translateX(-50%); }
.st-done-fire {
  position: absolute;
  left: 50%;
  top: -6px;
  width: 400px;
  max-width: 100%;
  transform: translateX(-50%) rotate(180deg) scaleY(-1);
}
.st-done-map {
  position: absolute;
  left: 50%;
  top: 54px;
  width: 480px;
  max-width: 100%;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 16px rgba(0, 0, 0, .04)) drop-shadow(0 8px 48px rgba(0, 0, 0, .24));
}
.st-benefits { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 0; padding: 0; list-style: none; }
.st-benefit {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 100px;
  padding: 16px 24px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #FFEEAD;
  text-align: left;
}
.st-benefit-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 34px;
  background: #EBD88D;
}
.st-benefit-icon img { max-width: 54px; max-height: 48px; display: block; }
.st-benefit-name { display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.56px; color: #6F8F56; word-break: keep-all; }
.st-benefit-sub { display: block; margin-top: 2px; font-size: 24px; font-weight: 400; letter-spacing: -0.48px; color: #313D27; }
.st-done-guide { margin: 0; font-size: 24px; font-weight: 400; line-height: 32px; letter-spacing: -0.48px; color: #7A7667; text-align: center; word-break: keep-all; }

/* 지급 부분 실패 안내 */
.st-alert {
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: #FFF7D6;
  border: 1px solid #EBD47A;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.36px;
  color: #22291F;
  text-align: center;
  word-break: keep-all;
}

/* =============================================================================
   4. 스탬프 슬롯 (D2 140px / D3 100px)

   ★ 12 variant 가 전부 단일 래스터라 CSS 상태 전환이 불가능하다 → src 교체가 유일한 방법.
   ★ filter: grayscale() 로 off 를 합성하지 말 것.
     형태 단서(점선 테두리 / + 기호)가 사라져 색 단독 구분이 되어 KWCAG 위반이 된다(§6-3 / D15).
   ★ 슬롯 크기를 고정하고 <img> 를 100% 종속시키면, 획득 시 "도장이 쾅 찍혀 8% 커지는"
     연출이 자동 재현되면서 레이아웃은 전혀 밀리지 않는다(§4-3-3 ② / D16).
     (on 은 지름 160 full-bleed, off 는 사방 6px 투명 여백이 파일에 포함돼 있다)
   ============================================================================= */
.st-stamp { flex: 0 0 auto; position: relative; }   /* flex:1 금지 — 내용에 따라 폭이 변한다 */
.st-stamp--pop { width: 140px; height: 140px; }
.st-stamp--grid { width: 100px; height: 100px; }
.st-stamp > img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* width:auto / height:auto 금지 — 에셋 캔버스 규격이 바뀌면 즉시 인접 칸이 밀린다 */

/* ── 4-1. 여권 펼침 팝업 6칸 그리드 (20:143 승격 — 05 §4-1 실측) ───────────
   ★ 셀 폭 154.666…px 은 정수가 아니다. repeat(3, 1fr) 로 브라우저가 분배하게 할 것.
     고정 px 로 박으면 1px 어긋난다.
   ★ 셀 높이 124 = 스탬프 100 + 상하 padding 12×2 → 세로 여백이 0 이다. 스탬프를 키우면 넘친다.
   ★ 셀 배경 #F2F5F0 자체가 타일이라 off 의 80% 반투명 흰 면이 정상적으로 읽힌다. */
.st-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #FFFFFF;
  list-style: none;
}
.st-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 124px;
  padding: 12px 20px;
  box-sizing: border-box;
  border-radius: 8px;
  background: #F2F5F0;
}

/* ── 4-2. 획득 연출 — src 스왑엔 트랜지션이 걸리지 않으므로 keyframes 로 처리 ── */
.st-stamp.is-earning > img { animation: st-stamp-pop .45s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes st-stamp-pop {
  0%   { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}

/* =============================================================================
   5. 반응형
   ============================================================================= */
@media (max-width: 1279px) {
  /* 닫기 버튼이 화면 밖으로 나가지 않도록 팝업 안쪽으로 이동 */
  .st-close { right: 12px; top: 12px; background-color: rgba(255, 255, 255, .95); }
  .st-titlebox { padding-top: 52px; }
}

@media (max-width: 1023px) {
  .st-popup { width: 100%; max-width: 560px; }
  .st-headline { font-size: 40px; }
  .st-sub { font-size: 26px; }
  .st-head { font-size: 30px; line-height: 38px; }
  .st-stamp--pop { width: 120px; height: 120px; }
  .st-stamp--grid { width: 88px; height: 88px; }
  .st-cell { min-height: 108px; padding: 10px; }
  .st-btn { height: 72px; font-size: 20px; }
  /* 탭 라벨 클리핑 방지 — 20px 로는 '국가공인자격증'·'평생교육이용권'(7자)이 넘친다 */
  .st-tab { font-size: 15px; letter-spacing: -0.5px; }
}

@media (max-width: 767px) {
  /* 풀스크린 전환은 하지 않는다(닫기 접근성 유지) */
  .st-modal { padding: 16px; }
  .st-popup { width: 100%; max-width: none; }
  .st-body { padding: 24px 16px; }
  .st-body--plain { padding: 48px 20px; }
  .st-titlebox { padding: 40px 0 16px; gap: 12px; }
  .st-titlebox-h { font-size: 28px; letter-spacing: -1.12px; }
  .st-pill { width: 176px; height: 32px; gap: 6px; }
  .st-pill-label { font-size: 16px; line-height: 26px; }
  .st-pill-count,
  .st-pill-total { font-size: 20px; line-height: 26px; }

  .st-headline { font-size: 28px; }
  .st-sub { font-size: 20px; gap: 8px; }
  .st-lead { font-size: 16px; line-height: 24px; }
  .st-object { width: 140px; height: 140px; }
  .st-object img { width: 76px; }

  /* 탭 — 15px 로도 넘치므로 2열 × 3행으로 재배치 */
  .st-tabrow { flex-wrap: wrap; }
  .st-tab { flex: 1 1 calc(50% - 4px); height: 44px; font-size: 14px; letter-spacing: -0.5px; }

  .st-major-head { gap: 10px; }
  .st-stamp--pop { width: 92px; height: 92px; }
  .st-head { font-size: 22px; line-height: 30px; letter-spacing: -0.44px; }
  .st-label { font-size: 15px; }
  .st-label img { width: 20px; }
  .st-desc { padding: 20px 16px; }
  .st-desc > li { padding-left: 26px; }
  .st-desc > li::before { font-size: 17px; }
  .st-desc-t { font-size: 17px; }
  .st-desc-b { font-size: 15px; }

  .st-major-list { padding: 16px 12px 24px; }
  .st-major { gap: 14px; padding: 12px 14px; min-height: 84px; }
  .st-major-icon { width: 52px; height: 52px; border-radius: 26px; }
  .st-major-icon img { max-width: 34px; max-height: 32px; }
  .st-major-name { font-size: 20px; }
  .st-major-sub { font-size: 15px; letter-spacing: -0.3px; }
  .st-major-guide { margin-top: 14px; font-size: 14px; }

  /* 🚨 세로 배치에서는 flex-basis 가 **주축=높이**에 걸린다.
     위 3-4절의 `.st-btns--single .st-btn { flex: 0 1 400px }` 는 특이도가 (0,2,0) 라
     바로 아래 `.st-btn { flex: 0 0 auto }` (0,1,0) 를 이긴다. 그 결과 단일 CTA 가
     **400px 높이**로 늘어난다 — popup-1 · popup-8 · 여권 펼침 3종
     (2026-08-04 dev 실측 375px: popup-8 169×400 · popup-1 113×400 · passport 296×400).
     400px 은 **데스크톱의 가로 폭** 의도값이므로 그 규칙 자체는 건드리지 않고
     (≥768 은 flex-direction:row 라 basis 가 정상적으로 폭에 걸린다),
     모바일 구간에서만 **같은 특이도·더 뒤** 규칙으로 되돌린다 — !important 불필요.
     .st-btns 의 width:100% 는 popup-1/popup-8 용이다 — 부모 .st-plain 이
     align-items:center 라 자식이 콘텐츠 폭으로 줄어들어 .st-btn 의 width:100% 가
     글자 폭으로 해석된다(형제 .st-benefits · .st-done-object 가 이미 같은 처방을 쓴다). */
  .st-btns { flex-direction: column; width: 100%; }
  .st-btn { flex: 0 0 auto; width: 100%; max-width: none; height: 60px; font-size: 17px; border-radius: 30px; }
  .st-btns--single .st-btn { flex: 0 0 auto; }

  .st-stamp--grid { width: 72px; height: 72px; }
  .st-grid { gap: 6px; padding: 12px; }
  .st-cell { min-height: 92px; padding: 8px 4px; }

  .st-benefit { gap: 14px; padding: 12px 14px; min-height: 84px; }
  .st-benefit-icon { width: 52px; height: 52px; border-radius: 26px; }
  .st-benefit-icon img { max-width: 38px; max-height: 34px; }
  .st-benefit-name { font-size: 19px; }
  .st-benefit-sub { font-size: 15px; }
  .st-done-guide { font-size: 15px; line-height: 22px; }
  .st-done-object { height: 150px; }
  .st-done-ellipse { width: 150px; }
  .st-done-fire { width: 300px; }
  .st-done-map { width: 340px; top: 40px; }
  .st-plain { gap: 24px; }
}

@media (max-width: 375px) {
  .st-titlebox-h { font-size: 24px; }
  .st-headline { font-size: 24px; }
  .st-tab { font-size: 13px; }
  .st-stamp--pop { width: 80px; height: 80px; }
  .st-stamp--grid { width: 64px; height: 64px; }
  .st-cell { min-height: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-stamp.is-earning > img { animation: none !important; }
}

/* =============================================================================
   6. 짧은 뷰포트 대응 — 완주 팝업(popup-8) CTA 가시성 (P4)

   popup-8 은 원설계 높이가 1124px 라 노트북(뷰포트 높이 768~900)에서
   유일한 CTA '자격증 강의실 바로가기' 가 첫 화면 밖으로 밀렸다
   (2026-08-04 P4 실측: 1440×866 에서 버튼 top 984px).
   .st-modal 이 스크롤되긴 하나, 사용자가 스크롤을 인지하지 못하면
   우측 상단 X 로만 닫게 돼 혜택 확인 동선이 끊긴다.

   ⇒ 세로 여백·타이포를 단계 축소해 **768px 뷰포트에서도 CTA 가 첫 화면에** 들어오게 한다.
     계산(768 기준) : 모달 padding 32 → 가용 736
       body--plain 64 + plain gap 16×5=80 + sub 29 + headline 80 + object 130
       + benefits 168 + guide 56 + btn 64 = 671  ≤ 736 ✔

   □ 설계 메모
     · 폭 조건(min-width:768px)을 함께 건다 — 위 ≤767 모바일 블록이 이미 더 강하게
       축소해 둔 값을 이 블록이 다시 키우면 안 된다(파일 뒤쪽이 이기므로).
     · popup-8 전용이다(.st-popup--done 스코프). 다른 팝업의 시안 정합은 건드리지 않는다.
     · 요소를 숨기거나 지우지 않는다 — **축소만** 한다.
     · .st-modal 의 overflow-y:auto 는 그대로 둔다. 극단적으로 짧거나 200% 확대
       배율에서는 여전히 스크롤로 전체 도달이 가능해야 하며(콘텐츠 손실 0),
       이 스크롤은 모달 밖층(.st-modal)에서만 일어나므로 대화상자 내부에
       중첩 스크롤 캡슐이 생기지 않는다.
     · 포커스 트랩과 무관하다 — 트랩은 document keydown 에서 동작하고
       focusables() 는 offsetWidth/offsetHeight 로 판정하므로, 스크롤 밖에 있는
       버튼도 치수가 살아 있어 순환 대상에서 빠지지 않는다(Tab 이동 시
       브라우저가 자동으로 스크롤해 보여준다).
   ============================================================================= */
@media (min-width: 768px) and (max-height: 1000px) {
  .st-modal { padding: 16px; }

  .st-popup--done .st-body--plain { padding: 32px 40px; }
  .st-popup--done .st-plain { gap: 16px; }
  .st-popup--done .st-sub { font-size: 24px; }
  .st-popup--done .st-headline { font-size: 32px; }

  .st-popup--done .st-done-object { height: 130px; }
  .st-popup--done .st-done-ellipse { width: 130px; }
  .st-popup--done .st-done-fire { width: 260px; top: -4px; }
  .st-popup--done .st-done-map { width: 320px; top: 34px; }

  .st-popup--done .st-benefit { min-height: 80px; padding: 12px 20px; gap: 20px; }
  .st-popup--done .st-benefit-icon { width: 56px; height: 56px; border-radius: 28px; }
  .st-popup--done .st-benefit-icon img { max-width: 44px; max-height: 40px; }
  .st-popup--done .st-benefit-name { font-size: 24px; }
  .st-popup--done .st-benefit-sub { font-size: 20px; }

  .st-popup--done .st-done-guide { font-size: 20px; line-height: 28px; }
  .st-popup--done .st-alert { font-size: 16px; line-height: 22px; padding: 10px 14px; }
  .st-popup--done .st-btn { height: 64px; font-size: 20px; }
}