/* 웹(브라우저) 전용 공통 — 사업자정보 푸터와 상품/결제 페이지.

   왜 app.css 와 따로 두는가 —
   app.css 는 폰 화면(#device, 430px) 전용이다. 여기 있는 것은 그 바깥,
   즉 '홈페이지' 로서의 영역이다. 앱에는 필요 없다.

   ★ .is-native 가 붙으면(= Capacitor 앱) 푸터를 숨긴다.
     앱에 디지털 상품 구매 경로가 보이면 스토어 심사에서 반려된다
     (Apple 3.1.1 / Google Play 결제정책).
     판단은 js/native.js 가 가장 먼저 한다. */

:root{
  --sf-bg:#f3f6fa; --sf-line:#dde4ec; --sf-ink:#3d4a5c; --sf-dim:#78869a;
  --sf-brand:#2f6df0;
}

/* ───────── 사업자정보 푸터 ─────────
   전자상거래법 제10조 · PG 가맹점 심사 필수 6항목
   상호 / 대표자명 / 사업자등록번호 / 주소 / 전화번호 / 통신판매업신고번호 */
#site-footer{
  background:var(--sf-bg); border-top:1px solid var(--sf-line);
  color:var(--sf-ink); font-size:13px; line-height:1.85;
  padding:26px 20px 34px; text-align:center;
}
#site-footer .sf-in{ max-width:760px; margin:0 auto; }
#site-footer .sf-brand{
  font-weight:800; font-size:15px; letter-spacing:.04em; color:#1d2838;
  margin-bottom:10px;
}
#site-footer .sf-biz{ color:var(--sf-ink); }
#site-footer .sf-biz b{ font-weight:700; color:#1d2838; }
#site-footer .sf-biz span{ white-space:nowrap; }
#site-footer .sf-sep{ color:var(--sf-line); margin:0 7px; }
#site-footer .sf-links{ margin-top:14px; }
#site-footer a{ color:var(--sf-brand); text-decoration:none; }
#site-footer a:hover{ text-decoration:underline; }
#site-footer .sf-copy{ margin-top:12px; color:var(--sf-dim); font-size:12px; }

/* 앱에서는 숨긴다 */
.is-native #site-footer{ display:none !important; }

/* PC — body 가 세로 flex 라서 푸터가 폰 아래에 온다.
   flex 아이템은 기본적으로 자기 내용만큼만 넓어지므로 너비를 못박아 준다
   (안 그러면 가운데에 좁게 뜬다). */
@media (min-width:820px){
  #site-footer{ width:100%; flex:0 0 auto; margin-top:28px; }
}

@media (max-width:520px){
  /* 폰에서는 한 줄에 하나씩 쌓인다. 줄간격 1.85 를 그대로 두면 7줄이 늘어져
     푸터만 324px 를 먹는다 — 1.5 로 조인다 (2026-11-02 실측 후 수정) */
  #site-footer{ font-size:12.5px; line-height:1.5; padding:20px 16px 26px; text-align:left; }
  #site-footer .sf-brand{ font-size:13.5px; margin-bottom:8px; }
  #site-footer .sf-biz span{ display:block; }
  #site-footer .sf-biz + .sf-biz{ margin-top:3px; }
  /* 사업자 정보 줄 사이의 '|' 만 뗀다 */
  #site-footer .sf-biz .sf-sep{ display:none; }

  /* ★ 링크 사이 구분선은 **살린다.** 예전에는 .sf-sep 을 전부 숨겨서
     '이용약관 개인정보처리방침 PRO 멤버십 구매' 가 한 덩어리로 읽혔다.
     flex 로 눕히고 구분선을 되살려 세 개가 분명히 구분되게 한다. */
  #site-footer .sf-links{
    display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; margin-top:12px;
  }
  #site-footer .sf-links .sf-sep{ display:inline; margin:0; }
  #site-footer .sf-links a{ padding:4px 0; }   /* 손가락으로 누를 여유 */
  #site-footer .sf-copy{ margin-top:10px; }
}

/* ───────── 상품 · 결제 페이지 ───────── */
.pg-wrap{ max-width:880px; margin:0 auto; padding:34px 20px 10px; }
.pg-head{ text-align:center; margin-bottom:28px; }
.pg-head .logo{
  font-weight:800; font-size:26px; letter-spacing:.06em; color:#1d2838;
}
.pg-head h1{ font-size:21px; margin:14px 0 6px; color:#1d2838; }
.pg-head p{ color:var(--sf-dim); font-size:14px; margin:0; }

.pg-card{
  background:#fff; border:1px solid var(--sf-line); border-radius:16px;
  padding:22px; margin-bottom:16px;
}
.pg-card h2{ font-size:16px; margin:0 0 14px; color:#1d2838; }

.pg-goods{ display:grid; gap:12px; }
@media (min-width:720px){ .pg-goods{ grid-template-columns:repeat(3,1fr); } }

.goods{
  border:1.5px solid var(--sf-line); border-radius:14px; padding:18px;
  background:#fff; cursor:pointer; text-align:left; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.goods:hover{ border-color:#b9c9e6; }
.goods.on{ border-color:var(--sf-brand); box-shadow:0 0 0 3px rgba(47,109,240,.12); }
.goods .gname{ font-weight:700; font-size:15px; color:#1d2838; }
.goods .gprice{ font-size:22px; font-weight:800; color:#1d2838; margin:8px 0 4px; }
.goods .gprice i{ font-size:13px; font-weight:600; color:var(--sf-dim); font-style:normal; }
.goods .gdesc{ font-size:12.5px; color:var(--sf-dim); line-height:1.6; }
.goods .gtag{
  display:inline-block; margin-top:9px; font-size:11.5px; font-weight:700;
  color:var(--sf-brand); background:rgba(47,109,240,.09);
  border-radius:999px; padding:3px 9px;
}

.pg-row{ display:flex; justify-content:space-between; gap:12px; font-size:14px;
  padding:9px 0; border-bottom:1px dashed var(--sf-line); }
.pg-row:last-child{ border-bottom:0; }
.pg-row b{ color:#1d2838; }
.pg-total{ font-size:17px; font-weight:800; color:#1d2838; }

.pg-btn{
  display:block; width:100%; border:0; border-radius:12px; padding:15px;
  font-size:16px; font-weight:700; color:#fff; background:var(--sf-brand);
  cursor:pointer; font-family:inherit;
}
.pg-btn:disabled{ background:#aebbd0; cursor:not-allowed; }
.pg-btn.ghost{ background:#fff; color:var(--sf-ink); border:1px solid var(--sf-line); }

.pg-field{ margin-bottom:11px; }
.pg-field label{ display:block; font-size:13px; font-weight:600; color:var(--sf-ink); margin-bottom:5px; }
.pg-field input{
  width:100%; box-sizing:border-box; border:1px solid var(--sf-line); border-radius:10px;
  padding:12px; font-size:15px; font-family:inherit; background:#fff; color:#1d2838;
}
.pg-field input:focus{ outline:none; border-color:var(--sf-brand); }

.pg-note{ font-size:12.5px; color:var(--sf-dim); line-height:1.75; }
.pg-note ul{ margin:7px 0 0; padding-left:17px; }
.pg-msg{
  border-radius:10px; padding:12px 14px; font-size:13.5px; margin-bottom:14px;
  background:#fff4f4; color:#b53a3a; border:1px solid #f3d3d3;
}
.pg-msg.ok{ background:#f1f8f2; color:#2a7a3c; border-color:#cfe6d4; }
.pg-msg.info{ background:#f2f6fd; color:#2c5aa8; border-color:#d3e0f5; }

.pg-who{ font-size:13px; color:var(--sf-dim); }
.pg-who b{ color:#1d2838; }