/* =======================================================
   STELLANEWS.LIFE – Interactive Layer
   対象: 上部インフォバー（SNS帯）/ 共有ボタン / コメント / 評価 / ニュースレター / モーダル等
   読み込みはすべてのCSSの“最後”（後勝ち）で行う
   ======================================================= */

/* ---- トークン ---- */
:root{
  --snl-accent:#007bff;
  --snl-accent-ink:#fff;
  --snl-ink:#111;
  --snl-ink-2:#333;
  --snl-ink-3:#666;
  --snl-border:#e0e6ed;
  --snl-surface:#fff;
  --snl-surface-soft:#f7fbff; /* newsletter 見た目のトーンに合わせる */
  --snl-radius:10px;
  --snl-radius-lg:12px;
  --snl-shadow:0 6px 18px rgba(0,0,0,.06);

  --snl-header-ink:#e9eef7;
  --snl-header-band:rgba(8,10,18,.28);
}
@media (prefers-color-scheme: dark){
  :root{
    --snl-ink:#e9eef5;
    --snl-ink-2:#d5dbe6;
    --snl-ink-3:#aeb7c6;
    --snl-border:#2a3340;
    --snl-surface:#11161d;
    --snl-surface-soft:#0c1016;
    --snl-shadow:0 8px 20px rgba(0,0,0,.35);

    --snl-header-ink:#e9eef7;
    --snl-header-band:rgba(8,10,18,.36);
  }
}

/* =======================================================
 * 1) 上部インフォバー（SNSアイコン帯）
 *    （header-custom.css の方針をこちらで後勝ち微調整）
 * ======================================================= */
body.snl-header .mg-head-detail{
  background: var(--snl-header-band);
  color: var(--snl-header-ink);
  font-size: 12.5px; line-height: 1;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  backdrop-filter: saturate(120%) blur(2px);
}
body.snl-header .mg-head-detail .info-left:empty{ display:none; }
body.snl-header .mg-head-detail a{ color: var(--snl-header-ink); text-decoration: none; }
body.snl-header .mg-head-detail a:hover{ opacity:.95; }
body.snl-header .mg-head-detail .mg-social{
  display:flex; gap:10px; justify-content:flex-end; align-items:center; margin:0;
}
body.snl-header .mg-head-detail .mg-social li{ list-style:none; }
body.snl-header .mg-head-detail .icon-soci{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  background: rgba(255,255,255,.06);
  transition: background .2s ease, transform .2s ease;
}
body.snl-header .mg-head-detail .icon-soci i{ font-size:14px; color:#fff; line-height:1; }
body.snl-header .mg-head-detail .icon-soci:hover{
  background: rgba(255,255,255,.12); transform: translateY(-1px);
}

/* =======================================================
 * 2) AddToAny（共有ボタン）
 * ======================================================= */
.a2a_kit{ line-height:0 !important; }
.a2a_kit .a2a_svg{
  width:40px !important; height:40px !important; line-height:40px !important;
  background-size:40px !important; border-radius:8px !important;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  transition: transform .08s ease, filter .2s ease;
}
.a2a_kit .a2a_svg:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.a2a_label{ font-size:12px; color:var(--snl-ink-3); margin-left:8px; }

/* 浮遊バー（縦） */
.a2a_floating_style.a2a_vertical_style{
  right:10px !important; top:20px !important; background:transparent !important; z-index:40 !important;
}
/* 本文下インライン */
.addtoany_content .a2a_kit.addtoany_list{
  display:flex !important; flex-wrap:wrap !important; gap:10px !important; align-items:center !important;
}

/* モバイル */
@media (max-width: 767.98px){
  .a2a_floating_style.a2a_vertical_style{
    position:fixed !important; right:8px !important; bottom:16px !important; top:auto !important;
  }
  .a2a_kit_size_40 .a2a_svg, .a2a_kit .a2a_svg{
    width:36px !important; height:36px !important; background-size:36px !important;
  }
  .a2a_label{ display:none !important; }
}
/* セーフガード */
.addtoany_content, .addtoany_share_save_container, .a2a_kit{
  max-width:100% !important; overflow:hidden !important;
}
.a2a_svg svg{ width:100% !important; height:100% !important; display:block !important; }

/* =======================================================
 * 3) コメント領域（読み/書きしやすいUI）
 * ======================================================= */
#comments.comments-area{
  background: var(--snl-surface);
  border:1px solid var(--snl-border);
  border-radius: var(--snl-radius-lg);
  box-shadow: var(--snl-shadow);
  padding: clamp(16px, 2vw, 24px);
  color: var(--snl-ink);
}
#comments .comment-reply-title{
  font-size: clamp(18px, 2.3vw, 22px);
  font-weight: 700; margin: 0 0 12px; letter-spacing: .2px; color: var(--snl-ink);
}
#comments .logged-in-as{
  font-size: .95rem; color: var(--snl-ink-3);
  background: var(--snl-surface-soft);
  border:1px solid var(--snl-border);
  border-radius: var(--snl-radius);
  padding:.7rem .9rem; margin-bottom:.9rem;
}
#comments .logged-in-as a{ color: var(--snl-accent); text-decoration:none; }
#comments .logged-in-as a:hover{ text-decoration:underline; }

#commentform.comment-form{ display:grid; gap:12px; }
#commentform label{
  font-weight:600; color:var(--snl-ink-2); margin-bottom:.35rem; display:inline-block;
}
#commentform textarea,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"]{
  width:100%;
  background: var(--snl-surface); color: var(--snl-ink);
  border:1px solid var(--snl-border); border-radius: var(--snl-radius);
  padding:.8rem .9rem; font-size:1rem; line-height:1.5;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#commentform textarea{ min-height:120px; }
#commentform textarea:focus, #commentform input:focus{
  outline:none; border-color: var(--snl-accent);
  box-shadow: 0 0 0 3px rgba(0,123,255,.25);
}
#commentform .required{ color:#e02424; font-weight:700; }
#commentform .required-field-message{
  display:inline-block; font-size:.85rem; color:var(--snl-ink-3); margin-left:.5rem;
}
#commentform .form-submit{ margin-top:.4rem; }
#commentform .submit{
  appearance:none; background: var(--snl-accent); color: var(--snl-accent-ink);
  border:0; border-radius:8px; padding:.7rem 1.1rem; font-size:1rem; font-weight:700;
  cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.06);
  transition: transform .05s ease, filter .2s ease, box-shadow .2s ease;
}
#commentform .submit:hover{ filter:brightness(1.03); }
#commentform .submit:active{ transform: translateY(1px); box-shadow:none; }

/* コメントリスト */
.comment-list, .children{ list-style:none; margin:0; padding:0; }
.comment-list > li{ border-top:1px dashed var(--snl-border); padding-top:16px; margin-top:16px; }
.comment-author .avatar{ border-radius:50%; width:40px; height:40px; margin-right:10px; }
.comment-meta a{ color:var(--snl-ink-3); text-decoration:none; }
.comment-meta a:hover{ text-decoration:underline; }
.comment-content{ color: var(--snl-ink-2); }

/* 絵文字のサイズ安定化（functions.php から移管） */
img.emoji, .emoji {
  width: 1em !important;
  height: 1em !important;
  max-width: none !important;
  display: inline !important;
  vertical-align: -0.125em;
  box-sizing: content-box !important;
}

/* 見出し用絵文字（functions.php から移管） */
.stnx-emoji { font-size: 1em !important; line-height: 1em !important; display: inline-block; vertical-align: -0.125em; }
.stnx-emoji img.emoji { width:1em !important; height:1em !important; max-width:none !important; display:inline-block !important; vertical-align:-0.125em; }

/* =======================================================
 * 4) 記事評価（いいね／いまいち）
 * ======================================================= */
.stellanews-rating-box{
  margin:2rem 0; padding:1rem;
  border:1px solid var(--snl-border);
  border-radius: var(--snl-radius-lg);
  background: var(--snl-surface);
  text-align:center; box-shadow: var(--snl-shadow);
}
.stellanews-rating-box h4{ margin:0 0 .7rem; font-weight:800; color:var(--snl-ink); }
.stellanews-rating-buttons{ display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap; }
.stnx-btn{
  appearance:none; border:0; border-radius:8px;
  padding:.6rem 1rem; font-size:.96rem; cursor:pointer;
  transition: transform .05s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow:0 2px 0 rgba(0,0,0,.05);
}
.stnx-btn:active{ transform: translateY(1px); box-shadow:none; }
.stnx-btn--like{ background: var(--snl-accent); color: var(--snl-accent-ink); }
.stnx-btn--meh{ background:#e5e7eb; color:#111; }

/* 評価ボックスのはみ出し保護（functions.php から移管） */
.single .stellanews-rating-box, .single .stellanews-rating-box * {
  min-width: 0 !important;
  max-width: 100% !important;
}
.single .stellanews-rating-buttons {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
}

/* =======================================================
 * 5) ニュースレター（MC4WP / newsletter widget）— functions.php から移管
 * ======================================================= */
.widget .newsletter,
.widget .newsletter form,
.widget_mc4wp_form_widget,
.mc4wp-form,
form[id^="mc4wp-form"]{
  background: var(--snl-surface-soft);
  border: 1px solid #d6e8ff;
  border-radius: var(--snl-radius);
  padding: 16px;
}
.widget .newsletter input[type="email"],
.mc4wp-form input[type="email"],
form[id^="mc4wp-form"] input[type="email"]{
  border: 1px solid #bcd6ff;
  background: #fff;
}
.widget .newsletter input[type="submit"],
.mc4wp-form input[type="submit"],
form[id^="mc4wp-form"] input[type="submit"],
.widget .newsletter button[type="submit"],
.mc4wp-form button[type="submit"],
form[id^="mc4wp-form"] button[type="submit"]{
  background: var(--snl-accent);
  color: var(--snl-accent-ink);
  border: 0;
  border-radius: 6px;
  padding: .6rem 1rem;
}

/* =======================================================
 * 6) 「ランキング行タイトル 2 行省略」— functions.php から移管（双方向寄りのUI）
 * ======================================================= */
.single .top-ranking-widget li a,
.widget .top-ranking-widget li a{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-width: 100%;
}

/* =======================================================
 * 7) モーダル（MailPoet / Popup Maker）— 既出の可読性ルール（維持）
 * ======================================================= */
.pum, .pum .pum-container, .pum .pum-content,
.mailpoet_popup, .mailpoet-modal, .mailpoet_form_popup,
.mfp-content .mailpoet_form, .mfp-content .mailpoet_form_container{
  background:#ffffff !important; color:#111827 !important;
}
.pum .mailpoet_form, .pum .mailpoet_form *,
.mailpoet_popup .mailpoet_form, .mailpoet_popup .mailpoet_form *,
.mailpoet-modal .mailpoet_form, .mailpoet-modal .mailpoet_form *,
.mfp-content .mailpoet_form, .mfp-content .mailpoet_form *{
  color:#111827 !important; text-shadow:none !important;
}
.pum .mailpoet_form h2, .pum .mailpoet_form h3, .pum .mailpoet_form h4,
.pum .mailpoet_form p, .pum .mailpoet_form label,
.mailpoet_popup .mailpoet_form h2, .mailpoet_popup .mailpoet_form p, .mailpoet_popup .mailpoet_form label{
  color:#111827 !important;
}
.pum .mailpoet_form input[type="email"],
.pum .mailpoet_form input[type="text"],
.pum .mailpoet_form input[type="name"],
.pum .mailpoet_form textarea,
.pum .mailpoet_form select,
.mailpoet_popup .mailpoet_form input[type="email"],
.mailpoet_popup .mailpoet_form input[type="text"],
.mailpoet_popup .mailpoet_form input[type="name"],
.mailpoet_popup .mailpoet_form textarea,
.mailpoet_popup .mailpoet_form select{
  background:#ffffff !important; color:#111827 !important; border-color:#2563EB !important;
}
.pum .mailpoet_form ::placeholder, .mailpoet_popup .mailpoet_form ::placeholder{
  color:#6B7280 !important; opacity:1 !important;
}
.pum .mailpoet_form a, .mailpoet_popup .mailpoet_form a{
  color:#007bff !important; text-decoration:underline !important;
}
.pum .mailpoet_form a:hover, .mailpoet_popup .mailpoet_form a:hover{
  color:#0056b3 !important; text-decoration:none !important;
}
.pum .mailpoet_form input[type="submit"], .mailpoet_popup .mailpoet_form input[type="submit"]{
  color:#fff !important; background-color:#007bff !important; border:none !important;
  border-radius:6px !important; padding:10px 20px !important; font-weight:700 !important;
}
.pum .mailpoet_form input[type="submit"]:hover, .mailpoet_popup .mailpoet_form input[type="submit"]:hover{
  background-color:#0056b3 !important;
}
.pum .pum-container, .mailpoet_popup, .mailpoet-modal, .mfp-content .mailpoet_form_container{
  border-radius:12px !important; padding:20px !important; box-shadow:0 10px 30px rgba(0,0,0,.18) !important;
}
@media (prefers-color-scheme: dark){
  .pum, .pum .pum-container, .pum .pum-content,
  .mailpoet_popup, .mailpoet-modal, .mailpoet_form_popup,
  .mfp-content .mailpoet_form, .mfp-content .mailpoet_form_container{
    background:#ffffff !important; color:#111827 !important;
  }
}

/* =======================================================
 * 8) サイドバー内の画像/絵文字（双方向系の見出しで使用）
 * ======================================================= */
.single #secondary img:not(.emoji){ max-width:100% !important; height:auto !important; }