/* ==========================================================
   CLL JAPAN — Single Article Styles (single.css)
   ========================================================== */

/* ----------------------------------------------------------
   1. デザイントークン（色・フォント・角丸・アニメーション）
---------------------------------------------------------- */
:root {
  /* 背景 */
  --bg-primary:    #080808;
  --bg-secondary:  #101010;
  --bg-card:       #141414;
  --bg-hover:      #1c1c1c;

  /* アクセントカラー */
  --accent:        #e50914;
  --accent-hover:  #ff2020;
  --accent-dim:    rgba(229, 9, 20, 0.15);
  --accent-blue:   #1a6be0;

  /* テキスト */
  --text-primary:   #f0f0f0;
  --text-secondary: #999999;
  --text-muted:     #555555;

  /* ボーダー */
  --border:        #1e1e1e;
  --border-hover:  #333333;

  /* その他 */
  --gold:          #f5c518;
  --font-main:     'Noto Sans JP', 'Helvetica Neue', sans-serif;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --transition:    0.18s ease;
}

/* ----------------------------------------------------------
   2. ベーススタイル
---------------------------------------------------------- */
body {
  background:             var(--bg-primary);
  color:                  var(--text-primary);
  font-family:            var(--font-main);
  line-height:            1.7;
  -webkit-font-smoothing: antialiased;
}

/* WPデフォルト要素を非表示 */
.site-header,
.site-branding,
.entry-title,
.page-title { display: none !important; }

/* ----------------------------------------------------------
   3. ページレイアウト
---------------------------------------------------------- */
#article-wrapper {
  max-width: 760px;
  margin:    0 auto;
  padding:   0 16px 80px;
}

/* ----------------------------------------------------------
   4. Safety Guide CTA（全言語対応・はみ出し防止）
---------------------------------------------------------- */
#cta-safety {
  margin:          16px 0;
  background:      linear-gradient(135deg, #1a0500, #0d0000);
  border:          1px solid rgba(229, 9, 20, 0.4);
  border-radius:   var(--radius-md);
  padding:         10px 12px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             8px;
  flex-wrap:       wrap;
}
#cta-safety .cta-text {
  font-size:   10px;
  color:       var(--text-primary);
  line-height: 1.6;
  flex:        1;
  min-width:   0;
}
#cta-safety .cta-text strong {
  color:         var(--accent);
  font-size:     clamp(9px, 2.5vw, 11px);
  display:       block;
  margin-bottom: 2px;
  white-space:   nowrap;
}
#cta-safety .cta-btn {
  background:      var(--accent);
  color:           #fff;
  font-size:       clamp(9px, 2.5vw, 11px);
  font-weight:     700;
  padding:         8px 12px;
  border-radius:   20px;
  white-space:     nowrap;
  flex-shrink:     0;
  text-decoration: none;
  max-width:       48%;
}

/* ----------------------------------------------------------
   5. 記事ヘッダー（カテゴリー・タイトル・メタ）
---------------------------------------------------------- */
#article-header {
  padding:       24px 0 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.article-category {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  background:      var(--accent-dim);
  color:           var(--accent);
  font-size:       10px;
  font-weight:     700;
  padding:         3px 10px;
  border-radius:   20px;
  text-decoration: none;
  margin-bottom:   12px;
  letter-spacing:  0.5px;
  text-transform:  uppercase;
}
.article-title {
  font-size:     22px;
  font-weight:   800;
  line-height:   1.4;
  color:         var(--text-primary);
  margin-bottom: 14px;
}
.article-meta {
  display:     flex;
  align-items: center;
  gap:         14px;
  flex-wrap:   wrap;
  font-size:   11px;
  color:       var(--text-muted);
}

/* ----------------------------------------------------------
   6. サムネイル
---------------------------------------------------------- */
.article-thumbnail {
  width:         100%;
  aspect-ratio:  16 / 9;
  border-radius: var(--radius-md);
  overflow:      hidden;
  background:    #0d0d1a;
  margin-bottom: 24px;
}
.article-thumbnail img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: top;
}

/* ----------------------------------------------------------
   7. 記事本文
---------------------------------------------------------- */
#article-body {
  font-size:   14px;
  line-height: 1.9;
  color:       var(--text-secondary);
}
#article-body h2 {
  font-size:    18px;
  font-weight:  700;
  color:        var(--text-primary);
  margin:       32px 0 12px;
  padding-left: 12px;
  border-left:  3px solid var(--accent);
}
#article-body h3 {
  font-size:   15px;
  font-weight: 600;
  color:       var(--text-primary);
  margin:      24px 0 10px;
}
#article-body p                 { margin-bottom: 16px; }
#article-body p.pr-notice       { font-size: 0.75rem !important; color: #888 !important; margin-bottom: 1.5rem !important; }
#article-body p.watch-cta       { margin: 2rem 0; text-align: center; }
#article-body p.watch-cta a     { display: inline-block; padding: 0.75rem 2rem; background: #3b82f6; color: #fff !important; border-radius: 6px; text-decoration: none; font-weight: 600; }
#article-body a                 { color: var(--accent); text-decoration: underline; }
#article-body ul,
#article-body ol                { padding-left: 20px; margin-bottom: 16px; }
#article-body li                { margin-bottom: 6px; }
#article-body img               { width: 100%; border-radius: var(--radius-md); margin: 16px 0; }
#article-body blockquote {
  border-left:   3px solid var(--accent);
  padding:       10px 16px;
  background:    var(--bg-card);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin:        16px 0;
  font-style:    italic;
  color:         var(--text-secondary);
}

/* ----------------------------------------------------------
   8. Save ボタン（上：小／下：大）
---------------------------------------------------------- */
.cll-save-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  background:    transparent;
  border:        1px solid #cccccc;
  color:         #cccccc;
  font-size:     11px;
  font-weight:   600;
  padding:       5px 14px;
  border-radius: 20px;
  cursor:        pointer;
  transition:    color var(--transition), border-color var(--transition), background var(--transition);
  font-family:   var(--font-main);
}
.cll-save-btn:hover            { color: #fff; border-color: #fff; }
.cll-save-btn.saved            { color: #fff; border-color: var(--accent); background: var(--accent); }
.cll-save-btn .save-icon       { font-size: 13px; transition: transform 0.2s ease; }
.cll-save-btn.saved .save-icon { transform: scale(1.2); }

.cll-save-btn-lg {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  width:           100%;
  background:      transparent;
  border:          1px solid #cccccc;
  color:           #cccccc;
  font-size:       14px;
  font-weight:     700;
  padding:         14px 24px;
  border-radius:   var(--radius-md);
  cursor:          pointer;
  transition:      color var(--transition), border-color var(--transition), background var(--transition);
  font-family:     var(--font-main);
  margin:          8px 0;
}
.cll-save-btn-lg:hover            { color: #fff; border-color: #fff; }
.cll-save-btn-lg.saved            { color: #fff; border-color: var(--accent); background: var(--accent); }
.cll-save-btn-lg .save-icon       { font-size: 16px; transition: transform 0.2s ease; }
.cll-save-btn-lg.saved .save-icon { transform: scale(1.2); }

/* ----------------------------------------------------------
   9. CLL Staff Review
---------------------------------------------------------- */
#cll-review {
  background:    #101010;
  border:        1px solid #1e1e1e;
  border-radius: 12px;
  padding:       28px 22px;
  margin:        34px 0;
}
#cll-review .cll-rev-head  { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
#cll-review .cll-rev-badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #080808; background: #f5c518; padding: 4px 10px; border-radius: 999px; }
#cll-review .cll-rev-title { font-size: 15px; font-weight: 700; color: #f0f0f0; }

#cll-review .cll-rev-overall {
  display:        flex;
  align-items:    baseline;
  gap:            14px;
  flex-wrap:      wrap;
  padding-bottom: 20px;
  border-bottom:  1px solid #1e1e1e;
  margin-bottom:  20px;
}
#cll-review .cll-rev-num      { font-size: 46px; font-weight: 800; line-height: 1; color: #f5c518; }
#cll-review .cll-rev-num span { font-size: 18px; font-weight: 600; color: #555; }

/* 星バー */
#cll-review .cll-starbar      { position: relative; display: inline-block; white-space: nowrap; line-height: 1; }
#cll-review .cll-starbar-base { color: #3a3a3a; letter-spacing: 2px; }
#cll-review .cll-starbar-fill { position: absolute; top: 0; left: 0; overflow: hidden; color: #f5c518; letter-spacing: 2px; }
#cll-review .cll-rev-bigstars .cll-starbar { font-size: 24px; }

/* ミニスコア（3項目グリッド） */
#cll-review .cll-rev-mini          { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin-bottom: 22px; }
#cll-review .cll-rev-mini > div    { background: #141414; border: 1px solid #1e1e1e; border-radius: 8px; padding: 12px 10px; text-align: center; }
#cll-review .cll-rev-mini-label    { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #999; margin-bottom: 6px; }
#cll-review .cll-rev-mini .cll-starbar { font-size: 14px; }
#cll-review .cll-rev-mini-score    { font-size: 12px; color: #555; margin-top: 4px; }

/* コメント */
#cll-review .cll-rev-comment { font-size: 15px; line-height: 1.75; color: #d8d8d8; font-style: italic; background: #141414; border-left: 3px solid #e50914; border-radius: 6px; padding: 14px 16px; margin-bottom: 22px; }

/* Good Points / Worth Noting */
#cll-review .cll-rev-points         { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#cll-review .cll-rev-points h3      { font-size: 13px; font-weight: 700; margin-bottom: 10px; color: #f0f0f0; }
#cll-review .cll-rev-points ul      { list-style: none; margin: 0; padding: 0; }
#cll-review .cll-rev-points li      { font-size: 13px; line-height: 1.55; color: #bbb; padding: 5px 0 5px 22px; position: relative; }
#cll-review .cll-rev-good li::before { content: "\1F44D"; position: absolute; left: 0; top: 5px; font-size: 12px; }
#cll-review .cll-rev-note li::before { content: "\26A0\FE0F"; position: absolute; left: 0; top: 5px; font-size: 12px; }

/* ----------------------------------------------------------
   10. Watch CTA（アフィリエイトボタン）
---------------------------------------------------------- */
#cta-watch { margin: 32px 0; text-align: center; }
#cta-watch a {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  width:           100%;
  box-sizing:      border-box;
  background:      var(--accent);
  color:           #fff;
  font-size:       16px;
  font-weight:     800;
  padding:         18px 24px;
  border-radius:   var(--radius-md);
  text-decoration: none;
  letter-spacing:  .3px;
  transition:      background var(--transition);
}
#cta-watch a:hover         { background: var(--accent-hover); }
#cta-watch .cta-watch-note { font-size: 10px; color: var(--text-muted); margin-top: 10px; }

/* ----------------------------------------------------------
   11. VPN CTA
---------------------------------------------------------- */
#cta-vpn             { margin: 32px 0; background: #0c1a30; border: 1px solid rgba(38, 124, 232, 0.5); border-radius: var(--radius-lg); padding: 0; text-align: left; overflow: hidden; }
#cta-vpn .vpn-topbar { height: 3px; width: 100%; background: linear-gradient(90deg, #1a6be0, #4d9bff); }
#cta-vpn .vpn-inner  { padding: 22px 20px; }

#cta-vpn .vpn-head      { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
#cta-vpn .vpn-head-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: rgba(38, 124, 232, 0.14); border: 1px solid rgba(38, 124, 232, 0.4); display: flex; align-items: center; justify-content: center; }

#cta-vpn .cta-vpn-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(38, 124, 232, 0.18); color: #7db4ff; font-size: 9px; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 5px; }
#cta-vpn .cta-vpn-title { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.25; margin: 0; }
#cta-vpn .cta-vpn-desc  { font-size: 12.5px; color: #a8b3c2; line-height: 1.65; margin: 0 0 18px; }

#cta-vpn .vpn-feats     { display: flex; flex-direction: column; gap: 11px; margin-bottom: 20px; }
#cta-vpn .vpn-feat      { display: flex; align-items: flex-start; gap: 11px; }
#cta-vpn .vpn-feat-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: rgba(38, 124, 232, 0.1); display: flex; align-items: center; justify-content: center; }
#cta-vpn .vpn-feat-title { font-size: 12.5px; font-weight: 700; color: #e8edf3; line-height: 1.3; }
#cta-vpn .vpn-feat-sub   { font-size: 11px; color: #8a96a6; line-height: 1.45; }

#cta-vpn .cta-vpn-btn       { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; box-sizing: border-box; background: linear-gradient(180deg, #3d8bff 0%, #1a6be0 55%, #1559c2 100%); color: #fff; font-size: 15px; font-weight: 800; padding: 16px 24px; border-radius: var(--radius-md); text-decoration: none; letter-spacing: .3px; box-shadow: 0 6px 18px rgba(26, 107, 224, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35); border: 1px solid rgba(38, 124, 232, 0.6); transition: transform var(--transition), box-shadow var(--transition); }
#cta-vpn .cta-vpn-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(26, 107, 224, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
#cta-vpn .cta-vpn-note      { font-size: 9.5px; color: var(--text-muted); margin: 11px 0 0; text-align: center; }

/* ----------------------------------------------------------
   12. タグ・関連記事
---------------------------------------------------------- */
#article-tags   { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0; padding-top: 20px; border-top: 1px solid var(--border); }
.tag-item       { background: var(--bg-card); color: var(--text-muted); font-size: 10px; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--border); text-decoration: none; }
.tag-item:hover { color: var(--accent); border-color: var(--accent); }

#related-posts           { margin: 32px 0; }
.related-title           { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.related-title::before   { content: ''; display: inline-block; width: 3px; height: 16px; background: var(--accent); border-radius: 2px; }
.related-grid            { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.related-card            { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: inherit; }
.related-card:hover      { border-color: var(--border-hover); }
.related-thumb           { aspect-ratio: 16 / 9; background: #1a1a2e; overflow: hidden; }
.related-thumb img       { width: 100%; height: 100%; object-fit: cover; }
.related-info            { padding: 8px 10px; }
.related-card-title      { font-size: 11px; font-weight: 600; color: var(--text-primary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.related-cat             { font-size: 9px; color: var(--accent); margin-top: 4px; }

/* ----------------------------------------------------------
   13. フッター
---------------------------------------------------------- */
#site-footer       { background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 32px 16px 20px; }
.footer-inner      { display: flex; flex-direction: column; gap: 28px; }
.footer-logo img   { height: 28px; width: auto; margin-bottom: 10px; }
.footer-desc       { font-size: 11px; color: var(--text-muted); line-height: 1.8; max-width: 280px; }
.footer-cols       { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.footer-col-title  { font-size: 11px; font-weight: 700; color: var(--text-secondary); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; }
.footer-col-list   { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.footer-col-list a { font-size: 12px; color: var(--text-muted); text-decoration: none; }
.footer-col-list a:hover { color: var(--text-primary); }
.footer-disclaimer { font-size: 10px; color: var(--text-muted); line-height: 1.7; padding: 10px 12px; background: #0d0d0d; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 20px; }
.footer-bottom     { border-top: 1px solid var(--border); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.footer-copyright  { font-size: 10px; color: var(--text-muted); }
.footer-legal      { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-legal a    { font-size: 10px; color: var(--text-muted); text-decoration: none; }

/* ----------------------------------------------------------
   14. レスポンシブ（768px以上 = PC）
---------------------------------------------------------- */
@media (min-width: 768px) {

  /* レイアウト */
  #article-wrapper { padding: 0 24px 80px; }
  .article-title   { font-size: 28px; }
  #article-body    { font-size: 15px; }
  #article-body h2 { font-size: 20px; }
  .related-grid    { grid-template-columns: repeat(3, 1fr); }

  /* フッター */
  #site-footer  { padding: 40px 40px 24px; }
  .footer-inner { flex-direction: row; gap: 40px; align-items: flex-start; }
  .footer-brand { flex-shrink: 0; width: 220px; }
  .footer-cols  { flex: 1; grid-template-columns: repeat(5, 1fr); gap: 24px; }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }

  /* Safety Guide CTA */
  #cta-safety                  { flex-wrap: nowrap; padding: 12px 16px; }
  #cta-safety .cta-text        { font-size: 12px; }
  #cta-safety .cta-text strong { font-size: 13px !important; }
  #cta-safety .cta-btn         { font-size: 12px !important; padding: 9px 18px; max-width: none; }

}