/* =========================================================
   하단 고정 구독 유도 배너 (partials/_sub_banner.html)
   /static 은 nginx 30d immutable — 수정 시 포함 템플릿의 ?v= 를 올릴 것.
   ========================================================= */

.sub-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;                      /* Ask Hyunnes(60/61) 아래 */
  background: var(--ink-950);
  color: var(--ink-50);
  border-top: 1px solid rgba(212, 168, 75, 0.35);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
  transform: translateY(110%);
  transition: transform 280ms ease;
}
.sub-banner[hidden] { display: none; }
.sub-banner.is-shown { transform: translateY(0); }

.sub-banner__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "copy form more"
    "copy note note"
    "result result result";
  align-items: center;
  column-gap: 1.25rem;
  row-gap: 0.25rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  padding-right: 3rem;              /* 닫기 버튼 자리 */
}

.sub-banner__copy { grid-area: copy; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sub-banner__title { font-size: 0.9875rem; font-weight: 600; color: var(--ink-50); }
.sub-banner__sub { font-size: 0.8125rem; color: var(--ink-300); }

.sub-banner__form { grid-area: form; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sub-banner__input {
  width: 15rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm);
  background: var(--ink-900);
  color: var(--ink-50);
  font: inherit;
  font-size: 0.875rem;
}
.sub-banner__input::placeholder { color: var(--ink-500); }
.sub-banner__input:focus { outline: none; border-color: var(--gold-400); }

.sub-banner__btn {
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--gold-400);
  color: var(--ink-950);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast);
}
.sub-banner__btn:hover { background: #e0b95f; }
.sub-banner__btn[disabled] { opacity: 0.6; cursor: progress; }
.sub-banner__captcha { flex-basis: 100%; }

.sub-banner__more {
  grid-area: more;
  font-size: 0.8125rem;
  color: var(--ink-300);
  white-space: nowrap;
  text-decoration: none;
}
.sub-banner__more:hover { color: var(--gold-400); }

.sub-banner__note { grid-area: note; font-size: 0.75rem; color: var(--ink-500); }
.sub-banner__note b { color: var(--ink-300); font-weight: 500; }
.sub-banner__note a { color: var(--ink-300); text-decoration: underline; }

.sub-banner__result { grid-area: result; }
.sub-banner__result:not(:empty) { margin-top: 0.6rem; }

.sub-banner__close {
  position: absolute;
  top: 50%; right: 0.75rem;
  transform: translateY(-50%);
  width: 2.25rem; height: 2.25rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-300);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.sub-banner__close:hover,
.sub-banner__close:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--ink-50); }

/* 가입 완료 후 — 폼은 접고 결과만 남긴다 */
.sub-banner.is-done .sub-banner__form,
.sub-banner.is-done .sub-banner__more,
.sub-banner.is-done .sub-banner__note { display: none; }

/* 배너가 떠 있는 동안: 본문 끝이 가려지지 않게 여백, Ask Hyunnes 버튼은 배너 위로 */
body.has-sub-banner { padding-bottom: var(--sub-banner-h, 0px); }
body.has-sub-banner #ask-fab { bottom: calc(var(--sub-banner-h, 0px) + 20px); }

@media (max-width: 860px) {
  .sub-banner__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "form" "note" "more" "result";
    row-gap: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .sub-banner__close { top: 0.4rem; transform: none; }
  .sub-banner__copy { padding-right: 2.5rem; }   /* 닫기 버튼과 겹치지 않게 */
  .sub-banner__sub { display: none; }
  .sub-banner__form { flex-wrap: nowrap; }
  .sub-banner__input { flex: 1; width: auto; min-width: 0; }
  .sub-banner__more { display: none; }   /* 모바일은 한 줄 가입에 집중 */
  body.has-sub-banner #ask-fab { bottom: calc(var(--sub-banner-h, 0px) + 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .sub-banner { transition: none; }
}