/* Mint × White base */
:root{--bg:#f8fffa;--panel:#fff;--ink:#1e293b;--muted:#64748b;--accent:#3ccca2;--accent2:#6bd5b2;--ring:#c7f1e5;--shadow:0 8px 24px rgba(18,87,70,.08);--radius:14px}
:root[data-theme="dark"]{--bg:#0a1411;--panel:#0f1a17;--ink:#e6f5ef;--muted:#9db5ab;--accent:#3ccca2;--accent2:#6bd5b2;--ring:#134b3e;--shadow:0 8px 24px rgba(0,0,0,.3)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,Inter,Roboto,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;line-height:1.7}
a{color:var(--accent);text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:24px 16px}
.site-header{position:sticky;top:0;z-index:10;backdrop-filter:saturate(180%) blur(12px);background:rgba(248,255,250,.85);border-bottom:1px solid rgba(0,0,0,.06);display:flex;justify-content:space-between;align-items:center;padding:10px 16px}
[data-theme="dark"] .site-header{background:rgba(10,20,17,.7);border-bottom:1px solid rgba(255,255,255,.08)}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer}
.logo{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent2),var(--accent));box-shadow:var(--shadow)}
.brand-name{font-weight:800}
.nav .btn{margin-left:8px}
.btn{background:var(--accent);color:#0b1613;border:none;padding:10px 14px;border-radius:12px;font-weight:800;cursor:pointer;box-shadow:var(--shadow)}
.btn.ghost{background:transparent;border:1px solid rgba(0,0,0,.08);color:var(--ink)}
.btn.sm{padding:6px 10px;font-weight:700}
.section{margin-top:20px}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:8px}
.card{background:var(--panel);border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;transition:.18s transform,.18s box-shadow;cursor:pointer}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(18,87,70,.12)}
.card h3{margin:0;font-size:20px}
.card .desc{color:var(--muted);margin:0}
.card .actions{display:flex;justify-content:flex-end;gap:8px}
.badge{font-size:12px;padding:3px 8px;border-radius:999px;border:1px solid rgba(0,0,0,.1);color:var(--muted)}
.site-footer{padding:30px 16px;color:var(--muted);border-top:1px solid rgba(0,0,0,.06)}
.footer-grid{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ad-slot{height:120px;display:grid;place-items:center;margin:16px auto;max-width:1120px;border:1px dashed rgba(0,0,0,.15);color:var(--muted);background:var(--panel);border-radius:12px}
:focus-visible{outline:0;box-shadow:0 0 0 4px var(--ring);border-radius:10px}

/* === minimal link-first style (no button) === */
.card-title { margin: 0 0 4px 0; }
.card-link { 
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 700;
}
.card-link:hover { opacity: .8; }
.card .actions { display: none !important; } /* cleanup old buttons if any remain */
.card-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
}
.card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent, #6fcf97) 15%, white);
  box-shadow: 0 1px 0 rgba(0,0,0,.05) inset;
  font-size: 18px;
}
.card-icon img { width: 26px; height: 26px; object-fit: contain; }
.card-body { min-width: 0; }
.card .desc { margin:.25rem 0 0; color: var(--text-muted); }
/* 置換：--text-muted → --muted */
.card .desc { margin:.25rem 0 0; color: var(--muted); }

/* 追加：タイトルを1行に固定（はみ出しは…） */
.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-link {
  display: inline-block;        /* ← block化を避けて1行化を安定 */
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 700;
}

/* ===================== */
/* ▼ 追加：検索UIの見た目 */
/* ===================== */
.search-wrap{ 
  margin: 12px 0 6px; 
}
.search{
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  background:var(--panel);
  color:var(--ink);
  box-shadow:var(--shadow);
  font:inherit;
  outline:none;
}
.search::placeholder{ color:var(--muted); }
.search:focus{ box-shadow:0 0 0 4px var(--ring); border-color:transparent; }

/* 押し込み感（タップ時のわずかなフィードバック） */
.card:active{ transform:translateY(0); box-shadow:0 6px 18px rgba(18,87,70,.10); }
.ad-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px 0;
  width: 100%;
}
.ad-slot {
  background: transparent !important;
  border: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}