:root{
  --bg: #f7f8fa;
  --surface: #ffffff;
  --ink: #14181f;
  --ink-soft: #4a5164;
  --ink-faint: #8a90a3;
  --line: rgba(20,24,31,0.10);
  --accent: #2a5bd7;
  --accent-soft: #eaf0ff;
  --good: #1f8a5c;
  --bad: #c14545;

  /* category colors */
  --cat-battery: #2a5bd7;   --cat-battery-soft: #eaf0ff;
  --cat-audio:   #7c3aed;   --cat-audio-soft:   #f1e9ff;
  --cat-smart:   #0f9488;   --cat-smart-soft:   #e3f6f2;
  --cat-clean:   #d9730d;   --cat-clean-soft:   #fdecd8;
  --cat-care:    #d1477a;   --cat-care-soft:    #fbe7ee;
  --cat-rental:  #0891b2;   --cat-rental-soft:  #e0f4f8;
  --sans: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --measure: 760px;
  --side: clamp(20px, 6vw, 48px);
  --radius: 14px;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

.container{
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--side);
}

/* ---------- header ---------- */
.site-header{
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.site-logo{
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.site-logo span{ color: var(--accent); }
.site-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.site-nav a{
  margin-left: 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}
@media (max-width: 520px){
  .site-header .container{ justify-content: flex-start; }
  .site-nav{ width: 100%; }
}

/* ---------- hero ---------- */
.hero{
  padding: clamp(40px, 8vh, 72px) 0 clamp(28px, 5vh, 40px);
}
.hero h1{
  font-size: clamp(26px, 4vw, 34px);
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 14px;
}
.hero p{
  font-size: 15px;
  color: var(--ink-faint);
  max-width: 52ch;
}

/* ---------- disclosure banner ---------- */
.disclosure-banner{
  background: #fff8e6;
  border: 1px solid #f0d998;
  color: #6b5417;
  font-size: 12.5px;
  padding: 10px 16px;
  border-radius: 10px;
  margin: 24px 0;
}
.disclosure-banner a{ color: #6b5417; text-decoration: underline; }

/* ---------- article list ---------- */
.article-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0 64px;
}
@media (max-width: 640px){
  .article-grid{ grid-template-columns: 1fr; }
}
.article-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
}
.article-card:hover{
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20,24,31,0.06);
}
.article-card .tag{
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.article-card h2{
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.5;
}
.article-card h2 a{ color: inherit; text-decoration: none; }
.article-card p{
  font-size: 13.5px;
  color: var(--ink-faint);
  margin: 0 0 14px;
  flex-grow: 1;
}
.article-card .card-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.card-stars{
  font-size: 12px;
  letter-spacing: 1px;
  color: #f5a623;
  font-family: var(--mono);
}

/* icon badges (category illustrations, no photos needed) */
.icon-badge{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-badge svg{ width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-badge--lg{ width: 64px; height: 64px; border-radius: 16px; }
.icon-badge--lg svg{ width: 34px; height: 34px; }

.cat-battery{ color: var(--cat-battery); background: var(--cat-battery-soft); }
.cat-audio{ color: var(--cat-audio); background: var(--cat-audio-soft); }
.cat-smart{ color: var(--cat-smart); background: var(--cat-smart-soft); }
.cat-clean{ color: var(--cat-clean); background: var(--cat-clean-soft); }
.cat-care{ color: var(--cat-care); background: var(--cat-care-soft); }

.tag.cat-battery{ background: var(--cat-battery-soft); color: var(--cat-battery); }
.tag.cat-audio{ background: var(--cat-audio-soft); color: var(--cat-audio); }
.tag.cat-smart{ background: var(--cat-smart-soft); color: var(--cat-smart); }
.tag.cat-clean{ background: var(--cat-clean-soft); color: var(--cat-clean); }
.tag.cat-care{ background: var(--cat-care-soft); color: var(--cat-care); }
.tag.cat-rental{ background: var(--cat-rental-soft); color: var(--cat-rental); }

/* ---------- article page ---------- */
.article-header{
  padding: 40px 0 24px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.article-header .header-text{ flex: 1; }
.article-header .tag{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: 6px;
}
.article-header h1{
  font-size: clamp(24px, 4vw, 30px);
  color: var(--ink);
  margin: 14px 0 8px;
  line-height: 1.5;
}
.byline{
  font-size: 12.5px;
  color: var(--ink-faint);
  font-family: var(--mono);
}
@media (max-width: 560px){
  .article-header{ gap: 14px; }
  .article-header .icon-badge--lg{ width: 48px; height: 48px; }
  .article-header .icon-badge--lg svg{ width: 26px; height: 26px; }
}

article.body{
  padding-bottom: 80px;
}
article.body h2{
  font-size: 19px;
  color: var(--ink);
  margin: 40px 0 14px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
article.body h3{
  font-size: 16px;
  color: var(--ink);
  margin: 24px 0 10px;
}
article.body p{ font-size: 15px; }
article.body ul{ padding-left: 20px; }
article.body li{ font-size: 15px; margin-bottom: 6px; }

/* pros / cons */
.pros-cons{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0;
}
@media (max-width: 560px){
  .pros-cons{ grid-template-columns: 1fr; }
}
.pros-cons div{
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 14px;
}
.pros{ background: #eefaf3; border: 1px solid #c7ecd8; }
.cons{ background: #fdefef; border: 1px solid #f3d2d2; }
.pros-cons h4{
  margin: 0 0 8px;
  font-size: 13px;
}
.pros h4{ color: var(--good); }
.cons h4{ color: var(--bad); }
.pros-cons ul{ margin: 0; padding-left: 18px; }
.pros-cons li{ font-size: 13.5px; margin-bottom: 4px; }

/* spec table */
table.spec{
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin: 16px 0;
}
table.spec th, table.spec td{
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
}
table.spec th{
  background: #f2f3f6;
  color: var(--ink);
  width: 32%;
}

/* affiliate CTA */
.cta-box{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 22px 0;
  text-align: center;
}
.cta-box .price-note{
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.cta-button{
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 999px;
  text-decoration: none;
}
.cta-button:hover{ opacity: 0.88; text-decoration: none; }
.cta-box .ext-note{
  display: block;
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 8px;
}
.cta-button--clean{ background: var(--cat-clean); }
.cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* ---------- footer ---------- */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 28px 0 40px;
}
.site-footer .container{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  justify-content: space-between;
}
.site-footer p{
  font-size: 12px;
  color: var(--ink-faint);
  margin: 0;
}
.site-footer nav a{
  font-size: 12px;
  color: var(--ink-faint);
  margin-right: 14px;
}

/* ---------- 応援セクション ----------
   中身は本体サイトの /support/support.js が描画する。
   ここは記事一覧との間隔と、囲みの見た目だけを持つ。 */
.support-section{
  margin: 48px 0 8px;
  padding: 28px 26px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
@media (max-width: 640px){
  .support-section{ padding: 24px 20px 28px; }
}