/* SELLER AI — 구독 안내 팝업 모양  2026-11-04 클로드
 * 형님 규칙: 테두리 두르지 않고 색으로만 · 단추 높이 44/36 · 모서리 12/10/999 · 초록 #007E51 */

.sa-구독겹{
  position:fixed; inset:0; z-index:9000;
  display:grid; place-items:center;
  padding:16px;
  padding-top:calc(16px + env(safe-area-inset-top,0px));
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
  background:rgba(12,63,46,.52);
  opacity:0; transition:opacity .16s ease;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.sa-구독겹.본다{opacity:1}

.sa-구독속{
  position:relative;
  width:min(420px,100%);
  max-height:86vh; overflow-y:auto;
  background:#fff; color:#13332A;
  border-radius:16px; padding:28px 22px 18px;
  box-shadow:0 20px 56px rgba(12,63,46,.3);
  transform:translateY(8px) scale(.99);
  transition:transform .16s ease;
  font-family:Pretendard,-apple-system,"Malgun Gothic",system-ui,sans-serif;
  letter-spacing:-.02em;
}
.sa-구독겹.본다 .sa-구독속{transform:none}

/* 닫기 — 【중요】 항상 또렷하게. 숨기거나 흐리게 하면 다크패턴이 된다 */
/* ★ 손가락으로 누르는 곳은 44px 이상 (2026-11-05 전수 검수에서 40px 로 걸렸다) */
.sa-구독닫기{
  position:absolute; top:10px; right:10px;
  width:44px; height:44px; border:0; border-radius:999px;
  background:transparent; color:#5E7268;
  font-size:24px; line-height:1; cursor:pointer;
  display:grid; place-items:center;
}
.sa-구독닫기:hover{background:rgba(12,63,46,.07); color:#13332A}

.sa-구독속 h2{
  margin:0 0 7px; font:800 19px/1.4 inherit;
  letter-spacing:-.04em; text-wrap:balance;
}
.sa-구독속 p{
  margin:0; font-size:14.5px; line-height:1.65; color:#5E7268;
}

.sa-구독단추{display:flex; gap:8px; margin-top:20px; flex-wrap:wrap}
.sa-구독가기{
  flex:1 1 170px;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:0 20px; border:0; border-radius:12px;
  background:#007E51; color:#fff; text-decoration:none;
  font:800 15px/1 inherit; cursor:pointer;
}
.sa-구독가기:hover{background:#006B45}
/* 거절 단추를 작거나 흐리게 만들지 않는다 — 같은 높이, 읽히는 색 */
.sa-구독나중{
  flex:0 1 110px;
  min-height:46px; padding:0 18px; border:0; border-radius:12px;
  background:#E7F3EC; color:#0A6343;
  font:800 15px/1 inherit; cursor:pointer;
}
.sa-구독나중:hover{background:#D5EBE0}

.sa-구독작게{
  margin-top:12px!important; font-size:12.5px!important; color:#7D9189!important;
}

@media(max-width:430px){
  .sa-구독속{padding:24px 18px 18px; border-radius:14px}
  .sa-구독속 h2{font-size:18px}
  .sa-구독가기,.sa-구독나중{flex:1 1 100%}
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sa-구독속{background:#15211E; color:#E6EFEA}
  :root:not([data-theme="light"]) .sa-구독속 p{color:#9CB3A9}
  :root:not([data-theme="light"]) .sa-구독머리{color:#3FD6A4}
  :root:not([data-theme="light"]) .sa-구독닫기{color:#9CB3A9}
  :root:not([data-theme="light"]) .sa-구독닫기:hover{background:#ffffff14; color:#E6EFEA}
  :root:not([data-theme="light"]) .sa-구독나중{background:#13332A; color:#A9E5CB}
}
@media (prefers-reduced-motion:reduce){
  .sa-구독겹,.sa-구독속{transition:none}
}