/* ==========================================================
   メール登録ポップアップ（右下・×で閉じる）
   PC＝右下の小さなカード／スマホ＝固定バーの上の帯→タップで全文表示
   ========================================================== */

.newsletter-popup__overlay{display:none}
.newsletter-popup__peek{display:none}

.newsletter-popup__panel{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:120;
  width:360px;
  max-width:calc(100vw - 32px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 4px 20px rgba(31,33,35,.12);
  padding:22px 20px;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;
}
.newsletter-popup__panel[hidden]{display:none}
.newsletter-popup__panel.is-open{opacity:1;transform:translateY(0);pointer-events:auto}

.newsletter-popup__close{position:absolute;top:10px;right:10px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;color:var(--sub)}
.newsletter-popup__close:hover{color:var(--ink)}

.newsletter-popup__tabs{display:flex;gap:4px;padding-right:36px;border-bottom:1px solid var(--line);margin-bottom:14px}
.newsletter-popup__tab{flex:1;padding:8px 2px 10px;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--sub);border-bottom:2px solid transparent;text-align:center;line-height:1.4}
.newsletter-popup__tab.is-active{color:var(--ink);border-bottom-color:var(--gold)}

.newsletter-popup__pane[hidden]{display:none}
.newsletter-popup__title{font-size:15px;line-height:1.6;margin-bottom:6px}
.newsletter-popup__lead{font-size:14px;line-height:1.8;color:var(--sub)}

.newsletter-popup__pane--seller{display:flex;gap:12px}
.newsletter-popup__cover{flex:none;width:90px}
.newsletter-popup__cover img{width:100%;aspect-ratio:424/600;object-fit:cover;border:1px solid var(--line)}
.newsletter-popup__pane-text{flex:1;min-width:0}

.newsletter-popup__form{margin-top:14px}
.newsletter-popup__row{margin-bottom:8px}
.newsletter-popup__row input[type="email"],
.newsletter-popup__row input[type="text"]{width:100%;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:4px;font-size:14px;background:var(--white)}

.newsletter-popup__conditions{margin-bottom:10px;padding:12px 12px 4px;background:var(--paper);border-radius:4px}
.newsletter-popup__conditions[hidden]{display:none}
.newsletter-popup__cond-label{font-size:14px;font-weight:700;color:var(--sub);margin-bottom:6px}
.newsletter-popup__cond-row{display:flex;flex-wrap:wrap;gap:6px 12px;margin-bottom:10px}
.newsletter-popup__chk{display:flex;align-items:center;gap:5px;font-size:14px;color:var(--text)}
.newsletter-popup__chk input{width:15px;height:15px;flex:none}
.newsletter-popup__conditions .newsletter-popup__row{margin-bottom:10px}
.newsletter-popup__conditions .newsletter-popup__row input{height:36px}

.newsletter-popup__actions{margin-top:6px}
.newsletter-popup__submit{width:100%;height:42px;font-size:14px}
.newsletter-popup__note{margin-top:8px;font-size:14px;color:var(--sub);line-height:1.7}
.newsletter-popup__note a{text-decoration:underline}

/* 完了・エラー表示は既存の .form-done を流用（紙色の背景＋中央寄せ） */
.newsletter-popup .form-done{margin-top:0;padding:16px;font-size:14px;line-height:1.8}

/* 迷惑投稿よけの隠し欄は style.css の .leadform__hp をそのまま使う */

@media (max-width:767px){
  .newsletter-popup__peek{
    display:flex;
    align-items:center;
    gap:8px;
    position:fixed;
    left:0;right:0;
    bottom:calc(68px + env(safe-area-inset-bottom));
    z-index:58;
    height:40px;
    padding:0 8px 0 16px;
    background:var(--white);
    border-top:1px solid var(--line);
    box-shadow:0 -2px 8px rgba(0,0,0,.08);
    opacity:0;
    transform:translateY(8px);
    transition:opacity .35s ease,transform .35s ease;
  }
  .newsletter-popup__peek[hidden]{display:none}
  .newsletter-popup__peek.is-visible{opacity:1;transform:translateY(0)}
  .newsletter-popup__peek-open{flex:1;min-width:0;text-align:left;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .newsletter-popup__peek-close{flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--sub)}

  .newsletter-popup__overlay{display:block;position:fixed;inset:0;z-index:115;background:rgba(31,33,35,.4)}
  .newsletter-popup__overlay[hidden]{display:none}

  .newsletter-popup__panel{
    left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom));
    width:auto;max-width:none;
    max-height:70vh;
    overflow-y:auto;
    border-radius:12px 12px 0 0;
    box-shadow:0 -4px 20px rgba(31,33,35,.16);
    transform:translateY(100%);
  }
  .newsletter-popup__panel.is-open{transform:translateY(0)}
}
.newsletter-popup :focus-visible{outline:2px solid var(--gold);outline-offset:2px}