:root{
  --bg: #EAF6F4;
  --bg-soft: #F4FBFA;
  --card: #FFFFFF;
  --ink: #33544F;
  --ink-soft: #7FA39D;
  --mint: #6FC3B4;
  --sky: #8FCBEA;
  --lavender: #B7B4E8;
  --peach: #F5C6A5;
  --pink: #F2AFC4;
  --line: #DCF0EC;
  --shadow: 0 6px 18px rgba(51,84,79,0.08);
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:
    radial-gradient(circle at 15% 8%, rgba(143,203,234,0.18) 0, transparent 45%),
    radial-gradient(circle at 85% 92%, rgba(111,195,180,0.18) 0, transparent 45%),
    var(--bg);
  color:var(--ink);
  font-family:'Zen Kaku Gothic New', sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  padding-bottom:40px;
  max-width:640px;
  margin:0 auto;
}

/* ---- ヘッダー ---- */
header{ padding:calc(28px + env(safe-area-inset-top)) 20px 16px; }
header .kicker{
  font-size:11px; letter-spacing:0.2em; color:var(--mint);
  font-weight:700; margin-bottom:8px;
}
header h1{
  font-family:'Zen Maru Gothic', sans-serif; font-weight:900;
  font-size:34px; margin:0 0 8px; color:var(--ink); letter-spacing:0.03em;
}
header p.sub{
  font-size:12.5px; color:var(--ink-soft); margin:0; line-height:1.7; max-width:520px;
}

/* ---- 好みの可視化 ---- */
.pref-wrap{
  margin:0 16px 18px; padding:16px 18px 14px;
  background:var(--card); border-radius:20px; box-shadow:var(--shadow);
}
.pref-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;
}
.pref-title{ font-size:11px; color:var(--ink-soft); letter-spacing:0.12em; font-weight:700; }
.diag-btn{
  border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:11.5px;
  color:#fff; padding:7px 14px; border-radius:16px;
  background:linear-gradient(90deg, var(--lavender), var(--sky));
  box-shadow:0 3px 10px rgba(143,203,234,0.35);
}
.diag-btn:active{ transform:scale(0.96); }

#pref.empty .pref-hint{ font-size:12px; color:var(--ink-soft); line-height:1.7; }

.tagbar{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.tagbar-name{
  font-size:12.5px; font-weight:700; color:var(--ink);
  width:90px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tagbar-track{
  flex:1; height:8px; background:var(--line); border-radius:8px; overflow:hidden;
}
.tagbar-fill{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--mint), var(--sky));
  border-radius:8px; transition:width 0.5s ease;
}

#pref-avoids{ margin-top:10px; }
.avoid-title{ font-size:10.5px; color:var(--ink-soft); margin-bottom:6px; letter-spacing:0.1em; }
.avoid-chip{
  display:inline-block; font-size:11px; color:var(--ink-soft);
  background:var(--bg-soft); border:1px solid var(--line);
  padding:3px 10px; border-radius:12px; margin:0 6px 6px 0;
}

/* ---- 診断結果 ---- */
#diag-result{
  margin-top:14px; padding:14px 16px; border-radius:16px;
  background:linear-gradient(135deg, rgba(183,180,232,0.14), rgba(143,203,234,0.14));
  border:1px solid var(--line);
}
#diag-result.hidden{ display:none; }
#diag-result.pop{ animation:pop 0.4s ease; }
@keyframes pop{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }
.diag-tendency{
  display:inline-block; font-size:11px; font-weight:700; color:#fff;
  background:var(--lavender); padding:3px 12px; border-radius:12px; margin-bottom:8px;
}
.diag-text{ margin:0; font-size:13.5px; line-height:1.8; color:var(--ink);
  font-family:'Zen Maru Gothic', sans-serif; font-weight:500; }

/* ---- フィード追加の提案バナー ---- */
#suggest{
  margin-top:14px; padding:13px 14px 12px; border-radius:16px; position:relative;
  background:linear-gradient(135deg, rgba(245,198,165,0.18), rgba(242,175,196,0.18));
  border:1px solid #F3D9C9;
}
#suggest.hidden{ display:none; }
#suggest.pop{ animation:pop 0.4s ease; }
.suggest-body{ display:flex; gap:10px; align-items:flex-start; }
.suggest-icon{ font-size:18px; line-height:1.4; flex-shrink:0; }
#suggest p{ margin:0; font-size:12.5px; line-height:1.75; color:var(--ink); }
#suggest p b{ color:#d98a5a; font-weight:700; }
.suggest-hint{ margin-top:8px; font-size:10.5px; color:var(--ink-soft); line-height:1.6; padding-left:28px; }
.suggest-close{
  position:absolute; top:8px; right:8px; width:24px; height:24px; border:none;
  border-radius:12px; background:rgba(255,255,255,0.6); color:var(--ink-soft);
  font-size:12px; cursor:pointer; font-family:inherit; line-height:1;
}
.suggest-close:active{ transform:scale(0.9); }

/* ---- 記事カード ---- */
main{ padding:4px 16px; }
.status{ text-align:center; color:var(--ink-soft); font-size:13px; padding:40px 20px; line-height:1.8; }
.status.error{ color:var(--pink); }

.card{
  background:var(--card); border-radius:20px; padding:18px 18px 16px;
  margin-bottom:16px; position:relative; box-shadow:var(--shadow);
  animation:fadeIn 0.4s ease;
}
@keyframes fadeIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.card.leaving{ animation:leave 0.34s ease forwards; }
@keyframes leave{
  to{ opacity:0; transform:scale(0.96) translateY(-4px);
      margin-bottom:0; padding-top:0; padding-bottom:0; max-height:0; }
}

.card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  font-size:10.5px; letter-spacing:0.02em; color:#fff; font-weight:700;
  padding:4px 11px; border-radius:14px;
  background:linear-gradient(90deg, var(--mint), var(--sky));
}
.chip:nth-child(2){ background:linear-gradient(90deg, var(--lavender), var(--sky)); }
.chip:nth-child(3){ background:linear-gradient(90deg, var(--peach), var(--pink)); }
.chip-muted{ background:var(--ink-soft); }
.source{ font-size:10px; color:#a9c4c0; flex-shrink:0; }

.card h2{
  font-family:'Zen Maru Gothic', sans-serif; font-size:16.5px; line-height:1.55;
  margin:0 0 8px; font-weight:700; color:var(--ink);
}
.card p{ font-size:12.5px; line-height:1.75; color:var(--ink-soft); margin:0 0 12px; }
.card .meta{ font-size:10.5px; color:#a9c4c0; margin-bottom:14px; }

.actions{ display:flex; gap:8px; }
.actions button{
  flex:1; padding:11px 0; border-radius:16px; font-size:13px; font-weight:700;
  cursor:pointer; border:none; transition:transform 0.15s ease; font-family:inherit;
}
.actions button:active{ transform:scale(0.96); }
.actions .like{ background:linear-gradient(90deg, var(--mint), var(--sky)); color:#fff; }
.actions .dislike{ color:var(--ink-soft); background:var(--bg-soft); border:1px solid var(--line); }

a.readlink{
  display:block; text-align:right; font-size:11px; color:var(--mint);
  text-decoration:none; margin-top:10px; font-weight:700;
}

/* ---- フッター ---- */
footer{ text-align:center; padding:20px 20px calc(10px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:12px; align-items:center; }
footer .refresh{
  background:var(--card); border:1px solid var(--line); color:var(--mint);
  font-size:12.5px; font-weight:700; padding:10px 24px; border-radius:20px;
  cursor:pointer; font-family:inherit; box-shadow:var(--shadow);
}
footer .refresh:active{ transform:scale(0.97); }
footer .reset{
  background:none; border:none; color:#a3c2bd; font-size:11px;
  text-decoration:underline; cursor:pointer; font-family:inherit;
}

/* ---- 演出 ---- */
.stamp-fly{
  position:fixed; pointer-events:none; font-size:28px; z-index:999;
  animation:stampPop 0.64s ease forwards;
}
@keyframes stampPop{
  0%{ transform:scale(0.6) translateY(0); opacity:0; }
  30%{ transform:scale(1.2) translateY(-10px); opacity:1; }
  100%{ transform:scale(1) translateY(-44px); opacity:0; }
}