/* ========= Special Skin Overlay ========= */
/* 既存テンプレを壊さず“雰囲気だけ”変更する薄いスキン */

:root{
  /* サイドレール画像（JS/要素で上書き可能）： */
  --rail-img-left: none;
  --rail-img-right: none;
  --rail-opacity: .22;
  --rail-scale: 90vh;
  --rail-blur: 0px;
}

/* 基本トーン（デフォルト） */
body{
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", "BIZ UDPGothic", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- テーマ別の色味（必要最小限） --- */
body.theme-showa{
  --bg: #fbf4e6; --paper:#fffaf0; --ink:#2d2a25; --muted:#6d645c;
  --accent:#6b8a44; --link:#2f61a4;
  background: var(--bg);
  color: var(--ink);
}
body.theme-isekai{
  --bg:#f5f2ff; --paper:#fefcff; --ink:#1f2340; --muted:#60648a;
  --accent:#6c5ce7; --link:#374adf;
  background: var(--bg);
  color: var(--ink);
}

/* 見出しとリンクだけ雰囲気を合わせる */
body.theme-showa h1, body.theme-showa h2, body.theme-showa h3{ color: #2b2b2b; }
body.theme-isekai h1, body.theme-isekai h2, body.theme-isekai h3{ color: #1d1e35; }

body.theme-showa a{ color: var(--link); }
body.theme-isekai a{ color: var(--link); }

/* ボタン系をほんのり（classが無くても効くように汎用選択） */
body[class*="theme-"] input[type="submit"],
body[class*="theme-"] button,
body[class*="theme-"] .btn{
  background: var(--accent);
  color:#fff; border:none; border-radius:10px;
  padding:.55em 1em; cursor:pointer;
}
body[class*="theme-"] .btn a{ color:#fff; text-decoration:none; }

/* ペーパーっぽいブロック（既存テンプレの箱を拾いやすい汎用指定） */
body[class*="theme-"] .box, 
body[class*="theme-"] .panel,
body[class*="theme-"] .card,
body[class*="theme-"] .content,
body[class*="theme-"] .result,
body[class*="theme-"] .main,
body[class*="theme-"] article{
  background: var(--paper);
}

/* PC時の左右“レール”背景（薄く） */
@media (min-width: 1024px){
  body[class*="theme-"]::before,
  body[class*="theme-"]::after{
    content:""; position:fixed; inset:0 auto 0 0; z-index:0;
    width: max(0px, (100vw - 980px)/2); max-width: 520px;
    pointer-events:none; opacity:var(--rail-opacity);
    background-repeat:no-repeat; background-position:right center;
    background-size:auto min(var(--rail-scale), 95vh); filter: blur(var(--rail-blur));
  }
  body[class*="theme-"]::after{
    inset:0 0 0 auto; background-position:left center;
  }
  /* 画像は要素側の :root 変数で注入される（ない場合は none） */
  body.theme-showa::before, body.theme-isekai::before{ background-image: var(--rail-img-left); }
  body.theme-showa::after,  body.theme-isekai::after { background-image: var(--rail-img-right); }
}

/* 既存テンプレのz-indexと衝突しないよう主要領域に相対スタック */
body[class*="theme-"] #container,
body[class*="theme-"] .wrapper,
body[class*="theme-"] .site-main,
body[class*="theme-"] .content { position: relative; z-index:1; }

/* 微アクセント：帯の例（既存クラスがあれば拾う） */
body[class*="theme-"] .ribbon,
body[class*="theme-"] .label,
body[class*="theme-"] .tag{
  background: color-mix(in srgb, var(--accent) 16%, white);
  color: #2b2b2b;
}

/* ===== 特集の“下部棚”UI（どのテンプレでも見た目を合わせる） ===== */
body[class*="theme-"] .special-shelf{ margin: 26px 0; }
body[class*="theme-"] .special-shelf__ttl{
  display:inline-block; background: var(--accent); color:#fff;
  padding:.6em .9em; border-radius:12px; font-weight:700; letter-spacing:.03em;
  font-size: 1.02rem;
}
body[class*="theme-"] .special-shelf__empty{ color:var(--muted); }

/* 共通カードグリッド（カード/アイコンは既存app_card.ctpのマークアップに対応） */
body[class*="theme-"] .special-shelf:not(.shelf--list) .app-list{
  list-style:none; padding:0; margin:14px 0 0;
  display:grid; gap:12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 768px){
  body[class*="theme-"] .special-shelf:not(.shelf--list) .app-list{
     grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px;
   }
 }
 @media (min-width: 1024px){
   body[class*="theme-"] .special-shelf:not(.shelf--list) .app-list{
     grid-template-columns: repeat(6, minmax(0,1fr)); gap:18px;
   }
 }
body[class*="theme-"] .app-card{
  background: var(--paper); border:1px solid #eadfce; border-radius:12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.08);
}
body[class*="theme-"] .app-card a{
  display:grid; grid-template-columns: var(--icon-size,48px) 1fr; gap:12px; align-items:center;
  text-decoration:none; color:inherit; padding:14px 14px 12px;
}
body[class*="theme-"] .app-card h3{ margin:.1em 0; font-size:1.02rem; line-height:1.35 }
body[class*="theme-"] .app-card .count{ color:var(--muted); font-size:.9em; margin-left:.15em }

/* アイコン（app_card.ctpのマークアップに対応） */
body[class*="theme-"] .app-icon{
  position:relative; width:var(--icon-size,48px); height:var(--icon-size,48px);
  border-radius:12px; overflow:hidden; color:#fff; font-weight:900; display:grid; place-items:center;
  box-shadow: 0 8px 18px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 10px rgba(0,0,0,.12);
}
body[class*="theme-"] .app-icon::before,
body[class*="theme-"] .app-icon::after{ content:""; position:absolute; inset:0; }
body[class*="theme-"] .app-icon::before{ background: linear-gradient(145deg, var(--c1), var(--c2)); }
body[class*="theme-"] .app-icon::after{
  background: radial-gradient(120% 85% at 50% -20%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 24%, rgba(255,255,255,.14) 48%, rgba(255,255,255,0) 62%);
  mix-blend-mode: screen; pointer-events:none;
}
body[class*="theme-"] .app-icon__text{
  position:relative; z-index:1; text-shadow:0 1px 1px rgba(0,0,0,.28);
  font-weight:900; line-height:1.05; padding-inline:2px;
  font-size: var(--icon-font, calc(var(--icon-size,48px) * .46));
}

/* Appトップのヒーロー */
.app-hero .app-hero__head{
  display:grid; grid-template-columns: var(--icon-size) 1fr; gap:14px; align-items:center;
  justify-content:center; max-width: 760px; margin:0 auto 8px;
}
.app-hero h1{ margin:.2em 0 .2em; font-size: clamp(26px, 4.6vw, 42px); }
.app-hero .lead{ color: var(--muted); margin:0; }

/* 入力フォーム */
.app-form{ max-width:760px; margin:12px auto 0; }
.app-form .fields{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.app-form input.oo{
  flex:1 1 220px; max-width:360px; padding:.85em 1.05em;
  border:1px solid #dfd6c9; border-radius: var(--radius-pill); outline:none;
  background:#fff;
}
.app-form input.submit{
  border:none; border-radius: var(--radius-pill);
  padding:.85em 1.2em; background:var(--accent); color:#fff; cursor:pointer;
}

/* エラー表示 */
.errormes{
  max-width:760px; margin:8px auto 0;
  background:#ffeaea; color:#8a2d2d; border:1px solid #efc7c7; border-radius:10px; padding:.6em .9em;
}

/* メタ部 */
.app-meta .badge{ display:inline-block; margin-right:.6em; }
.app-meta .meta-line{ margin:.4em 0; }

/* ===== Appトップ：アイコン＋タイトルを中央にひとかたまり ===== */
.app-hero{ text-align:center; }
.app-hero .app-hero__head{
  display:inline-flex;           /* ← grid をやめて塊として中央に */
  align-items:center;
  justify-content:center;
  gap:10px;                      /* アイコンと文字の間隔 */
  margin:0 auto 6px;
}
.app-hero .app-hero__titles{ text-align:left; } /* タイトルは左寄せ */
.app-hero h1{ margin:0; line-height:1.15; }     /* 間延び防止 */
@media (max-width:480px){
  .app-hero .app-hero__head{ gap:8px; }
}

/* ===== Appトップの下部棚：1行1アプリの縦並び ===== */
.shelf--list .app-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}
.shelf--list .app-card{
  background:var(--paper);
  border:1px solid #eadfce;
  border-radius:12px;
  box-shadow: var(--shadow-card);
}
.shelf--list .app-card a{
  display:grid;
  grid-template-columns: var(--icon-size,48px) 1fr; /* 左：アイコン / 右：本文 */
  gap:12px;
  align-items:center;
  text-decoration:none;
  color:inherit;
  padding:12px 14px;
}
.shelf--list .app-card h3{ margin:.1em 0; font-size:1.02rem; line-height:1.35; }
.shelf--list .app-card p{ margin:.2em 0 0; color:var(--muted); }

/* ===== ランキング結果（特集版） ===== */
.result-box{
  max-width: 760px;
  margin: 8px auto 0;
  background: var(--paper);
  border: 1px solid #eadfce;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 12px;
}

.result_ranking .ranking-title{
  font-weight: 800; text-align: center; color:#fff;
  /* 背景色は addScript の thead th で上書きされます */
  padding: .45em .6em; border-radius: 8px;
}

.result_ranking table{
  width:100%; border-collapse: collapse;
  background:#fff; margin-top: 8px;
}
.result_ranking th, .result_ranking td{
  padding: .55em .7em;
  border: 1px solid #d9d1c3; /* icon_colorで上書き */
  background:#fff; text-align:left;
}
.result_ranking thead th{
  text-align:center; border-radius: 8px; /* 見出しの角を柔らかく */
}
.result_ranking .hyoka{
  width: 5em; white-space: nowrap; text-align:center; font-weight:700;
}
.result_ranking .credit{
  font-size:.86rem; color: var(--muted); text-align:right; margin-top:8px;
}

/* 共有ボタン周り（軽く余白調整） */
.share-actions{ max-width:760px; margin:10px auto 0; text-align:center; }