:root { --fg:#111; --muted:#666; --bg:#fff; --line:#eee; --accent:#0d6efd; }

* { box-sizing: border-box; }
html,body { height:100%; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; line-height:1.6; color:var(--fg); background:var(--bg); }

.visually-hidden { position:absolute !important; clip:rect(1px,1px,1px,1px); padding:0; border:0; height:1px; width:1px; overflow:hidden; }

/* Header */
.l-header { position:sticky; top:0; z-index:10; display:flex; gap:.75rem; align-items:center; padding:.75rem 1rem; border-bottom:1px solid var(--line); backdrop-filter:saturate(1.2) blur(4px); background:rgba(255,255,255,.8); }
.app-title { margin:0; font-size:1.25rem; }
.home-link { color: inherit; text-decoration: none; }
.home-link:focus, .home-link:hover { text-decoration: underline; }

.search { flex:1; }
.search input { width:100%; padding:.6rem .8rem; border:1px solid var(--line); border-radius:.75rem; font-size:1rem; }

/* sort controls */
.sortwrap { display:flex; align-items:center; gap:.35rem; }
.sortlabel { color:var(--muted); font-size:.9rem; }
.sortsel { padding:.45rem .6rem; border:1px solid var(--line); border-radius:.6rem; background:#fff; }
.chkwrap { display:flex; align-items:center; gap:.35rem; color:var(--muted); font-size:.95rem; user-select:none; }

/* Buttons */
.btn { cursor:pointer; border:0; padding:.5rem .8rem; border-radius:.6rem; background:var(--accent); color:#fff; }
.btn.-ghost { background:transparent; color:var(--muted); border:1px solid var(--line); }

/* Main */
.l-main { max-width: 960px; margin: 0 auto; padding: 1rem; }

/* Cards */
.recipe-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns: 1fr; gap:.5rem; }
@media (min-width:640px){ .recipe-list{ grid-template-columns: 1fr 1fr; } }
@media (min-width:960px){ .recipe-list{ grid-template-columns: 1fr 1fr 1fr; } }

.item { border:1px solid var(--line); border-radius:1rem; padding:.9rem; background:#fff; display:flex; flex-direction:column; gap:.35rem; }
.item__topline { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.item__title { margin:0; font-size:1rem; line-height:1.4; }
.item__desc { margin:0; color:var(--muted); font-size:.9rem; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.badges { display:flex; flex-wrap:wrap; gap:.35rem; }
.badge { font-size:.75rem; padding:.15rem .5rem; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:#fff; }
.badge[role="link"], .badge-btn { cursor:pointer; }

.meta { color:var(--muted); font-size:.9rem; }
.empty { text-align:center; color:var(--muted); padding:1.5rem; }

/* Detail */
.breadcrumb { margin: .25rem 0 1rem; }
.detail { border:1px solid var(--line); border-radius:1rem; background:#fff; padding:1rem; }
.detail__title { margin:.25rem 0 .25rem; font-size:1.25rem; line-height:1.4; }

/* Favorite buttons */
.fav-btn { border:1px solid var(--line); background:#fff; color:#333; border-radius:.6rem; padding:.35rem .6rem; font-size:.9rem; cursor:pointer; }
.fav-btn[aria-pressed="true"] { border-color: #f7d24c; box-shadow: 0 0 0 2px rgba(247,210,76,.2) inset; }
#favFilterBtn { white-space:nowrap; }
#favCount { font-variant-numeric: tabular-nums; margin-left:.2rem; }

/* Tags page */
#page-tags h2 { margin: 0 0 .5rem; }
#tagStats { margin: 0 0 1rem; }
.tag-list { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.tagchip { display:flex; align-items:center; justify-content:space-between; gap:.5rem; border:1px solid var(--line); border-radius:999px; padding:.4rem .75rem; text-decoration:none; color:inherit; background:#fff; }
.tagchip:hover { border-color:#ddd; }
.tagname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tagcount { color:#888; font-size:.85rem; }

/* 最低限の見た目（必要なければ無視OK） */
.c-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; margin: 16px 0; }
.c-card__title { font-size: 1.1rem; margin: 0 0 .5rem; }
.c-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn { padding: .5rem .9rem; border-radius: 8px; border: 1px solid #d1d5db; background: #fff; cursor: pointer; }
.btn.-ghost { background: transparent; }
.c-help { color: #6b7280; font-size: .9rem; margin-top: .25rem; }
.c-note { margin-top: .5rem; font-size: .9rem; color: #0a6; }

/* === ボタンのコントラスト修正（読みやすさ優先） === */
.btn, .btn:link, .btn:visited { color: #111; }
.btn.-ghost { background: transparent; border: 1px solid #d1d5db; }

/* 一覧カードの「詳しく見る」ははっきり見えるように暗色ボタン化 */
.item__detail { background: #111; color: #fff !important; border: 1px solid #111; display: inline-block; padding: .4rem .8rem; border-radius: 8px; }

/* IOセクションのボタンは白背景＋枠で読みやすく */
#io-section .btn { background: #fff; border: 1px solid #d1d5db; }
#io-section .btn.-ghost { background: transparent; }

/* カードの最低限の見た目（必要なら） */
.c-card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; margin: 16px 0; }
.c-card__title { font-size: 1.1rem; margin: 0 0 .5rem; }
.c-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.c-help { color: #6b7280; font-size: .9rem; margin-top: .25rem; }
.c-note { margin-top: .5rem; font-size: .9rem; color: #0a6; }