@charset "UTF-8";
/* =============================================================
   SC301 체형 사전 문진 — 랜딩 삽입용 스타일
   원본: SC301_문진_임베드_섹션.html v1.0

   · 클래스는 전부 sc3i- 프리픽스라 기존 랜딩 CSS와 충돌하지 않습니다.
   · 훅 섹션(#sc3i-hook)은 배너 이미지로 대체되어 제외했습니다.
   · iOS 사파리 대응 추가:
       - -webkit-backdrop-filter (프리픽스 없으면 iOS에서 배경 흐림 미적용)
       - dvh 앞에 vh 폴백 (dvh 는 iOS 15.4 미만 미지원 → 모달 높이 깨짐)
       - input font-size 16px (그 미만이면 iOS가 포커스 시 화면을 확대함)
   ============================================================= */

/* =============================================================
   배너 + CTA 버튼 (랜딩 삽입 섹션)

   버튼은 이미지에 그려져 있지 않고 CSS 로 얹습니다.
   배너 이미지(1620x1400) 안의 버튼 자리를 실측해 % 로 배치하므로
   화면 폭이 바뀌어도 이미지와 항상 같은 비율로 따라갑니다.
       가로 16.5% ~ 83.5%   세로 67.6% ~ 79.8%   색 #BA745A
   ============================================================= */
.sc3i-banner{position:relative;line-height:0;font-size:0;container-type:inline-size}
.sc3i-banner img{width:100%;display:block}

.sc3i-banner-btn{
  position:absolute;
  left:16.5%;right:16.5%;top:67.6%;bottom:20.2%;   /* 이미지 비율에 고정 */
  min-height:44px;                                  /* 모바일 최소 탭 영역 확보 */
  display:flex;align-items:center;justify-content:center;
  background:#BA745A;color:#fff;
  border:none;border-radius:999px;cursor:pointer;
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  font-weight:800;letter-spacing:-.02em;line-height:1;white-space:nowrap;
  -webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition:filter .15s ease,transform .12s ease}

/* 글자 크기: 배너 폭 기준 (뷰포트 기준이 아니라 컨테이너 기준이어야
   데스크톱에서 랜딩이 좁게 잡혀도 비율이 유지됩니다) */
.sc3i-banner-btn{font-size:min(5.3vw,34px)}          /* cqw 미지원 환경 폴백 */
@supports (font-size:1cqw){
  .sc3i-banner-btn{font-size:5.3cqw}
}

.sc3i-banner-btn:hover{filter:brightness(1.06)}
.sc3i-banner-btn:active{transform:scale(.985)}

/* 아주 좁은 화면에서 버튼이 지나치게 납작해지지 않도록 */
@media (max-width:360px){
  .sc3i-banner-btn{top:66.5%;bottom:18.5%}
}

/* =============================================================
   문진 모달
   ============================================================= */
#sc3i-modal{--sc3i-plum:#4A1E42;--sc3i-plum-deep:#331230;--sc3i-rose:#C84163;--sc3i-gold:#C9A227;--sc3i-gold-soft:#E3CF8E;--sc3i-ivory:#FAF7F0;--sc3i-ink:#2B2430;--sc3i-ink-soft:#6B5F6E;--sc3i-line:#E4DCCE;
  position:fixed;inset:0;z-index:99999;display:none;font-family:'Pretendard Variable',Pretendard,-apple-system,sans-serif;color:var(--sc3i-ink);text-align:left;line-height:normal}
#sc3i-modal.sc3i-open{display:block}
#sc3i-modal *{box-sizing:border-box}
.sc3i-backdrop{position:absolute;inset:0;background:rgba(30,12,27,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sc3i-sheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 24px));
  max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);
  background:var(--sc3i-ivory);border-radius:18px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4)}
@media(max-width:560px){.sc3i-sheet{top:auto;bottom:0;transform:translateX(-50%);border-radius:18px 18px 0 0;max-height:94vh;max-height:94dvh}}
.sc3i-head{background:var(--sc3i-plum);color:var(--sc3i-ivory);padding:16px 22px;display:flex;align-items:center;justify-content:space-between;flex:none}
.sc3i-head-title{font-size:14px;font-weight:700;letter-spacing:.02em}
.sc3i-head-title span{color:var(--sc3i-gold-soft);font-weight:500;font-size:12px;margin-left:8px}
.sc3i-close{background:none;border:none;color:rgba(250,247,240,.7);font-size:22px;cursor:pointer;line-height:1;padding:4px;font-family:inherit}
.sc3i-progress{height:4px;background:#E9E2D3;flex:none}
.sc3i-progress-bar{height:100%;width:0%;background:linear-gradient(to right,var(--sc3i-gold),var(--sc3i-rose));transition:width .3s ease}
.sc3i-body{padding:28px 26px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}
.sc3i-q-eyebrow{font-size:11px;letter-spacing:.2em;color:var(--sc3i-gold);font-weight:700;margin-bottom:10px;text-transform:uppercase}
.sc3i-q-title{font-size:19px;font-weight:800;color:var(--sc3i-plum);line-height:1.5;margin-bottom:6px;letter-spacing:-.01em}
.sc3i-q-desc{font-size:13px;color:var(--sc3i-ink-soft);margin-bottom:20px;line-height:1.7}
.sc3i-trust{background:#F4EEE0;border-left:3px solid var(--sc3i-gold);padding:10px 14px;border-radius:0 8px 8px 0;font-size:12.5px;color:#6B5A3A;margin-bottom:20px;line-height:1.6}

/* ---------- 문진표 1:1 렌더 (섹션 안에 필드 나열) ---------- */
.sc3i-sec-title{font-size:15px;font-weight:800;color:var(--sc3i-plum);padding-bottom:8px;
  border-bottom:2px solid var(--sc3i-plum);margin-bottom:16px;letter-spacing:-.01em}
.sc3i-fld{margin-bottom:16px}
.sc3i-fld-half{display:inline-block;width:calc(50% - 5px);vertical-align:top}
.sc3i-fld-half + .sc3i-fld-half{margin-left:8px}
.sc3i-fld-label{font-size:13px;font-weight:600;color:var(--sc3i-ink);margin-bottom:7px;line-height:1.5}
.sc3i-fld-label .sc3i-req{color:var(--sc3i-rose)}

.sc3i-chips{display:flex;flex-wrap:wrap;gap:6px}
.sc3i-chip{background:#FFF;border:1.5px solid var(--sc3i-line);border-radius:20px;
  padding:9px 14px;font-size:13.5px;font-family:inherit;color:var(--sc3i-ink);
  cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
  transition:border-color .12s,background .12s,color .12s;line-height:1.3;text-align:left}
.sc3i-chip:hover{border-color:var(--sc3i-gold)}
.sc3i-chip-on{background:var(--sc3i-plum);border-color:var(--sc3i-plum);color:#FFF;font-weight:700}

.sc3i-in-wrap{position:relative;display:flex;align-items:center}
.sc3i-in{width:100%;padding:12px 14px;border:1.5px solid var(--sc3i-line);border-radius:10px;
  font-size:16px;font-family:inherit;background:#FFF;box-sizing:border-box;color:var(--sc3i-ink);
  -webkit-appearance:none;appearance:none}
.sc3i-in:focus{outline:none;border-color:var(--sc3i-plum)}
select.sc3i-in{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236B5F6E' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.sc3i-in-unit{position:absolute;right:14px;font-size:13px;color:var(--sc3i-ink-soft);pointer-events:none}
.sc3i-in-wrap .sc3i-in{padding-right:44px}

.sc3i-opts{display:flex;flex-direction:column;gap:9px}
.sc3i-opt{display:flex;align-items:center;gap:12px;background:#FFF;border:1.5px solid var(--sc3i-line);border-radius:12px;padding:14px 16px;font-size:14.5px;cursor:pointer;transition:border-color .12s,background .12s;-webkit-user-select:none;user-select:none}
.sc3i-opt:hover{border-color:var(--sc3i-gold)}
.sc3i-opt.sc3i-sel{border-color:var(--sc3i-plum);background:#F7F1F6}
.sc3i-opt .sc3i-dot{width:18px;height:18px;border:2px solid #CFC5B2;border-radius:50%;flex:none;position:relative}
.sc3i-opt.sc3i-sel .sc3i-dot{border-color:var(--sc3i-plum)}
.sc3i-opt.sc3i-sel .sc3i-dot::after{content:"";position:absolute;inset:3px;background:var(--sc3i-plum);border-radius:50%}
.sc3i-opt.sc3i-multi .sc3i-dot{border-radius:5px}
.sc3i-opt.sc3i-multi.sc3i-sel .sc3i-dot::after{border-radius:2px}
.sc3i-opt small{color:var(--sc3i-ink-soft);font-size:12px;display:block}

.sc3i-inputs{display:flex;gap:12px}
.sc3i-field{flex:1}
.sc3i-field label{display:block;font-size:12px;font-weight:600;color:var(--sc3i-ink-soft);margin-bottom:6px}
.sc3i-field input,.sc3i-field select{width:100%;padding:13px 14px;border:1.5px solid var(--sc3i-line);border-radius:10px;font-size:16px;font-family:inherit;background:#FFF;box-sizing:border-box;color:var(--sc3i-ink);-webkit-appearance:none;appearance:none}
.sc3i-field select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236B5F6E' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.sc3i-field input:focus,.sc3i-field select:focus{outline:none;border-color:var(--sc3i-plum)}
.sc3i-unit{font-size:12px;color:var(--sc3i-ink-soft);margin-top:5px}

.sc3i-photo-zone{border:2px dashed var(--sc3i-gold);border-radius:14px;background:#FCF9F1;padding:22px;text-align:center;cursor:pointer;transition:background .12s}
.sc3i-photo-zone:hover{background:#F8F3E4}
.sc3i-photo-zone .sc3i-ph-icon{font-size:26px;margin-bottom:6px}
.sc3i-photo-zone p{margin:0;font-size:13.5px;color:#6B5A3A;line-height:1.7}
.sc3i-photo-zone p b{color:var(--sc3i-plum)}
.sc3i-previews{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.sc3i-prev{width:74px;height:74px;border-radius:10px;object-fit:cover;border:1.5px solid var(--sc3i-line);position:relative}
.sc3i-prev-wrap{position:relative}
.sc3i-prev-x{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:var(--sc3i-plum);color:#FFF;border:none;font-size:11px;cursor:pointer;line-height:1}
.sc3i-photo-guide{margin-top:14px;font-size:12px;color:var(--sc3i-ink-soft);text-align:left;background:#FFF;border:1px solid var(--sc3i-line);border-radius:10px;padding:12px 14px;line-height:1.8}
.sc3i-photo-busy{margin-top:10px;font-size:12px;color:#A17F0E;font-weight:600}

.sc3i-consents{display:flex;flex-direction:column;gap:10px;margin-top:6px}

/* 동의 항목 (2026.08.24 아코디언 개편)
     한 칸 = [체크박스 + 제목] + [화살표] + [상세(줄바꿈되어 아래)]
     · 바깥은 flex-wrap:wrap 입니다. 상세가 flex-basis:100% 라 자동으로 아랫줄로 갑니다.
     · cursor 는 .sc3i-consent 전체가 아니라 label/버튼에만 줍니다.
       칸 전체가 포인터면 상세 글을 드래그할 때도 누를 것처럼 보입니다. */
.sc3i-consent{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 10px;
  font-size:12.5px;line-height:1.6;color:var(--sc3i-ink);background:#FFF;
  border:1px solid var(--sc3i-line);border-radius:10px;padding:12px 14px}
.sc3i-consent-head{flex:1 1 auto;min-width:0;display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.sc3i-consent-title{flex:1 1 auto;min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.sc3i-consent input{margin-top:2px;accent-color:var(--sc3i-plum);width:16px;height:16px;flex:none}
.sc3i-consent .sc3i-req{color:var(--sc3i-rose);font-weight:700}

/* 화살표 — label 밖의 독립 버튼입니다 (누를 때 체크가 같이 토글되면 안 되므로)
     터치 영역을 넉넉히 두되(padding) 음수 margin 으로 시각적 위치는 유지합니다. */
.sc3i-acc-btn{flex:0 0 auto;background:none;border:0;padding:6px;margin:-4px -6px -6px 0;
  line-height:0;cursor:pointer;-webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent}
.sc3i-acc-arrow{display:block;width:7px;height:7px;
  border-right:2px solid var(--sc3i-ink-soft);border-bottom:2px solid var(--sc3i-ink-soft);
  transform:rotate(45deg);transform-origin:center;transition:transform .15s ease}
.sc3i-acc-btn[aria-expanded="true"] .sc3i-acc-arrow{transform:rotate(-135deg)}

/* 상세 — 기본 접힘. hidden 이 랜딩 전역 스타일에 눌리지 않도록 명시합니다. */
.sc3i-consent-detail{flex:0 0 100%;margin-top:7px;color:var(--sc3i-ink-soft);
  word-break:keep-all;overflow-wrap:anywhere}
.sc3i-consent-detail[hidden]{display:none}

/* 스크린리더 전용 (화살표 버튼의 용도 안내) */
.sc3i-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.sc3i-foot{padding:14px 22px 18px;border-top:1px solid var(--sc3i-line);display:flex;gap:10px;flex:none;background:var(--sc3i-ivory)}
.sc3i-btn{flex:1;padding:15px;border-radius:12px;font-size:15px;font-weight:700;border:none;cursor:pointer;font-family:inherit;transition:opacity .12s}
.sc3i-btn-back{background:#EDE6D6;color:var(--sc3i-ink-soft);flex:0 0 92px}
.sc3i-btn-next{background:var(--sc3i-plum);color:#FFF}
.sc3i-btn-next:disabled{opacity:.35;cursor:not-allowed}
.sc3i-btn-gold{background:linear-gradient(120deg,var(--sc3i-gold),#DDBC4E);color:var(--sc3i-plum-deep)}
.sc3i-legal{font-size:10.5px;color:#A79C88;text-align:center;padding:0 22px 14px;line-height:1.6;background:var(--sc3i-ivory)}

/* 완료 화면 */
.sc3i-done{text-align:center;padding:14px 6px 6px}
.sc3i-done .sc3i-done-badge{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--sc3i-gold),#DDBC4E);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 18px;color:var(--sc3i-plum-deep)}
.sc3i-done h4{font-size:19px;color:var(--sc3i-plum);margin:0 0 12px;font-weight:800}
.sc3i-done-msg{background:#FFF;border:1px solid var(--sc3i-line);border-left:4px solid var(--sc3i-gold);border-radius:12px;padding:18px 20px;font-size:14px;line-height:1.85;text-align:left;color:var(--sc3i-ink);margin-bottom:14px}
.sc3i-done-next{font-size:13px;color:var(--sc3i-ink-soft);line-height:1.8}
.sc3i-done-next b{color:var(--sc3i-rose)}
.sc3i-err{color:var(--sc3i-rose);font-size:12.5px;margin-top:10px;display:none}

/* ---------- QA 모드 (URL 에 ?sc3i_qa=1 일 때만 노출) ---------- */
.sc3i-qa-badge{display:inline-block;background:#C0392B;color:#fff;font-size:10px;font-weight:800;
  padding:2px 6px;border-radius:4px;letter-spacing:.08em;vertical-align:middle;margin:0 4px}
.sc3i-qa-bar{display:flex;gap:8px;padding:0 22px 14px;background:var(--sc3i-ivory)}
.sc3i-qa-fill{flex:1;padding:9px;border:1px dashed #C0392B;background:#fdeeec;color:#C0392B;
  border-radius:8px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.sc3i-qa-fill:active{background:#fbe2df}

/* =============================================================
   랜딩 기존 CSS 간섭 차단 + 넘침 수정
   모달은 body 에 주입되므로 랜딩의 전역 input/label 스타일이 흘러듭니다.
   ============================================================= */

/* 랜딩이 input 에 배경(화살표 등)을 입히는 경우가 있어 초기화.
   select 만 화살표를 다시 그립니다. */
#sc3i-modal input.sc3i-in,
#sc3i-modal input[type="text"],
#sc3i-modal input[type="tel"],
#sc3i-modal input[type="number"],
#sc3i-modal input[type="date"]{background-image:none !important}

#sc3i-modal select.sc3i-in,
#sc3i-modal .sc3i-field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236B5F6E' d='M6 8 0 0h12z'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}

/* 동의 문구가 박스를 넘어가던 문제
   flex 자식은 기본 min-width:auto 라 긴 문장이 줄바꿈되지 않고 삐져나갑니다. */
.sc3i-consent{align-items:flex-start}
.sc3i-consent-title,
.sc3i-consent-detail{min-width:0;word-break:keep-all;overflow-wrap:anywhere;white-space:normal}

/* 라벨·본문이 랜딩 전역 스타일에 눌리지 않도록 */
#sc3i-modal label{display:block;margin:0;font-weight:inherit;color:inherit}
#sc3i-modal .sc3i-consent{display:flex;flex-wrap:wrap}
/* 위 label 규칙(display:block)에 눌리면 체크박스와 제목이 세로로 쌓입니다 */
#sc3i-modal .sc3i-consent-head{display:flex}
#sc3i-modal .sc3i-field label{display:block;font-size:12px;font-weight:600;color:var(--sc3i-ink-soft);margin-bottom:6px}
#sc3i-modal p{margin:0}

/* 본문 가로 넘침 방지 */
.sc3i-body{overflow-x:hidden}
.sc3i-body *{max-width:100%}

/* QA 바가 하단 문구와 붙어 보이던 문제 */
.sc3i-qa-bar{border-top:1px solid var(--sc3i-line);padding-top:10px;margin-top:2px}

/* 단위(cm/kg 등)가 없는 입력칸은 우측 여백을 두지 않습니다 */
.sc3i-in-wrap .sc3i-in{padding-right:14px}
.sc3i-in-wrap:has(.sc3i-in-unit) .sc3i-in{padding-right:44px}

/* 폰트 : 웹폰트가 로드된 뒤 모달 내부 전체에 확실히 적용되도록 (랜딩 전역 폰트 간섭 차단) */
#sc3i-modal,
#sc3i-modal input,
#sc3i-modal select,
#sc3i-modal button,
#sc3i-modal textarea{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,
              'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* =============================================================
   랜딩 본문 타이포에 맞춤
     랜딩 css 의  .my_after_test_result1 p, span { font-size:14px; font-weight:600; letter-spacing:-1.5px }
     에서 `span` 이 전역 선택자라 모달 안에도 이미 적용되고 있었습니다.
     우연에 기대지 않도록 모달 안에서 같은 값을 명시합니다.
   ============================================================= */
#sc3i-modal p,
#sc3i-modal span,
#sc3i-modal label,
#sc3i-modal .sc3i-opt,
#sc3i-modal .sc3i-chip,
#sc3i-modal .sc3i-fld-label,
#sc3i-modal .sc3i-consent{
  font-size:14px;font-weight:600;letter-spacing:-1.5px}

/* 위 규칙에 눌리면 안 되는 것들 — 크기·굵기를 되살립니다 */
#sc3i-modal .sc3i-q-title{font-size:19px;font-weight:800;letter-spacing:-0.6px}
#sc3i-modal .sc3i-sec-title{font-size:15px;font-weight:800;letter-spacing:-0.6px}
#sc3i-modal .sc3i-head-title{font-size:14px;font-weight:700;letter-spacing:-0.5px}
#sc3i-modal .sc3i-head-title span{font-size:12px;font-weight:500;letter-spacing:-0.5px}
#sc3i-modal .sc3i-q-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.5px}
#sc3i-modal .sc3i-btn{font-size:15px;font-weight:700;letter-spacing:-0.6px}
#sc3i-modal .sc3i-legal{font-size:10.5px;font-weight:400;letter-spacing:-0.5px}
#sc3i-modal .sc3i-consent .sc3i-consent-detail{font-size:12px;font-weight:400;letter-spacing:-0.8px}
#sc3i-modal .sc3i-q-desc{font-size:13px;font-weight:400;letter-spacing:-0.8px}
#sc3i-modal .sc3i-trust{font-size:12.5px;font-weight:500;letter-spacing:-0.8px}
#sc3i-modal .sc3i-in{font-size:16px;font-weight:500;letter-spacing:-0.6px}  /* 16px 미만이면 iOS 가 확대 */
#sc3i-modal .sc3i-in-unit{font-size:13px;font-weight:500}
#sc3i-modal .sc3i-done h4{font-size:19px;font-weight:800;letter-spacing:-0.6px}
#sc3i-modal .sc3i-qa-badge{font-size:10px;font-weight:800;letter-spacing:.8px}
#sc3i-modal .sc3i-photo-guide{font-size:12px;font-weight:400;letter-spacing:-0.8px}

/* select / input 글자 하단 잘림 수정
   appearance:none 인 select 는 줄높이가 없으면 한글 글자 아래가 잘립니다.
   줄높이를 명시하고 높이는 내용에 맞춰 늘어나게 둡니다. */
#sc3i-modal .sc3i-in{
  line-height:1.5;
  height:auto;
  min-height:50px;
  padding-top:13px;padding-bottom:13px}
#sc3i-modal select.sc3i-in{
  /* 셀렉트는 글자가 세로 중앙에 오도록 (브라우저별 차이 흡수) */
  line-height:1.5;
  text-indent:0}
#sc3i-modal .sc3i-in-unit{line-height:1}

/* 배너 노출 제어 (내부 테스트 기간)
   기본은 숨김. medis 가 허용한 접속에서만 .sc3i-banner-on 이 붙어 노출됩니다.
   전체 공개로 전환하면 서버가 항상 허용하므로 이 규칙은 그대로 두어도 됩니다. */
/* 내부 테스트 기간에만 켭니다.
   현재는 전체 공개라 기본 숨김을 끕니다 — JS 가 안 실행돼도 배너가 보입니다.
   다시 IP 제한으로 돌리려면 아래 두 줄의 주석을 해제하고,
   js/pre_survey.js 의 checkVisible() 호출도 함께 살리세요. */
/* .sc3i-banner{display:none} */
/* .sc3i-banner.sc3i-banner-on{display:block} */

/* 맨 하단에 놓인 배너 (index_t)
   iOS 사파리는 화면 아래에 주소창/툴바가 떠 있어, 페이지 마지막 요소는
   그만큼 가려집니다. 버튼이 절반쯤 덮이는 문제가 있어 아래 여백을 둡니다.
   env(safe-area-inset-bottom) 은 노치 기기 대응이고, 툴바 높이(약 60px)를 더합니다. */
/* ⚠ padding 을 쓰면 안 됩니다.
     버튼은 배너 박스 기준 %(top/bottom)로 배치돼 있어서,
     padding 으로 박스가 커지면 버튼 위치도 같이 내려갑니다.
     margin 은 박스 크기를 바꾸지 않으므로 버튼이 그대로 있습니다. */
.sc3i-banner-last{
  margin-bottom:calc(64px + env(safe-area-inset-bottom, 0px))}

/* 툴바가 없는 데스크톱에서는 과한 여백이므로 줄입니다 */
@media (min-width:768px){
  .sc3i-banner-last{margin-bottom:24px}
}