/*! winovibe 読み物ページ共通スタイル（品種一覧・品種ページ） */
:root{
  --bg:#faf7f3; --paper:#ffffff; --ink:#241c1a; --ink-soft:#6b5f5a; --line:#e2d9d1;
  --red:#8a2f42; --red-soft:#f3e3e6; --gold:#a8811f; --gold-soft:#f7efd9;
  --accent:#2f6b5f; --accent-soft:#eef5f2;
  --mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP",serif;
  --gothic:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,system-ui,sans-serif;
  --w:1280px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--gothic); line-height:1.8}
a{color:var(--accent)}
.wrap{max-width:var(--w); margin:0 auto; padding:0 32px}

.bar{border-bottom:1px solid var(--line); background:var(--paper)}
.bar .wrap{display:flex; align-items:baseline; gap:12px; height:56px}
.brand{font-family:var(--mincho); font-size:20px; letter-spacing:.06em; text-decoration:none; color:var(--ink)}
.bar nav{margin-left:auto; font-size:13.5px}
.bar nav a{text-decoration:none; color:var(--ink-soft); margin-left:18px}
.bar nav a:hover{color:var(--accent)}

.crumb{font-size:12px; color:var(--ink-soft); padding:16px 0 0}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb span{color:#b7ada6; margin:0 7px}

main{padding-bottom:20px}
.head{padding:14px 0 26px; border-bottom:1px solid var(--line); margin-bottom:30px}
.kicker{margin:0 0 6px; font-size:11.5px; letter-spacing:.12em}
.kicker.red{color:var(--red)}
.kicker.white{color:var(--gold)}
h1{font-family:var(--mincho); font-size:clamp(26px,3.2vw,36px); font-weight:600; margin:0 0 4px; letter-spacing:.02em; line-height:1.4}
.head .en{margin:0; font-size:13px; color:#9a8f88; letter-spacing:.04em}
.intro{margin:0 0 28px; font-size:14.5px; color:var(--ink-soft); max-width:44em}

.cols{display:grid; grid-template-columns:1fr; gap:34px}
@media (min-width:940px){
  .cols{grid-template-columns:minmax(0,1fr) 336px; gap:52px; align-items:start}
  .side{position:sticky; top:22px}
}

article h2{font-family:var(--mincho); font-size:18px; font-weight:600; margin:32px 0 12px; letter-spacing:.02em}
article h2:first-of-type{margin-top:0}
article p{margin:0 0 14px; font-size:14.5px; max-width:40em}
p.lead{font-size:15.5px; line-height:1.95; max-width:38em}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px}
.chip{font-size:12.5px; padding:4px 12px; border-radius:6px; background:var(--paper); border:1px solid var(--line); color:var(--ink-soft)}
.chip.red{background:var(--red-soft); border-color:#e6c9cf; color:#7a2a3a}
.chip.white{background:var(--gold-soft); border-color:#e6d5a5; color:#7d6115}

.nextbox{margin:30px 0 6px; padding:18px 22px; border-radius:10px; background:var(--accent-soft); border:1px solid #cbe1d8; max-width:40em}
.nextbox .nb-t{display:block; font-size:11px; letter-spacing:.12em; color:#2f6b5f; font-weight:700; margin-bottom:6px}
.nextbox p{margin:0; font-size:14.5px; color:#25453e; max-width:none}
.nextbox a{color:#1d5c4e; font-weight:600}

/* 3,000円以下で買える1本 */
.wines{margin:30px 0 6px; max-width:40em}
.wines[hidden]{display:none}
.wines-head{display:flex; align-items:center; gap:9px; margin-bottom:12px}
.wines-t{font-family:var(--mincho); font-size:18px; font-weight:600; letter-spacing:.02em}
.ad-badge{font-size:10px; letter-spacing:.08em; padding:2px 8px; border-radius:4px;
  background:#f0ece7; border:1px solid var(--line); color:#7a6f68}
ul.wine-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
ul.wine-list a{display:flex; gap:13px; align-items:center; text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:11px 14px; transition:border-color .15s}
ul.wine-list a:hover{border-color:var(--red)}
ul.wine-list img,.wine-list .noimg{width:64px; height:64px; flex:0 0 64px; object-fit:contain;
  background:var(--bg); border-radius:6px}
.wine-list .wi{display:flex; flex-direction:column; gap:5px; min-width:0}
.wine-list .wn{font-size:13px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.wine-list .wm{display:flex; align-items:baseline; gap:10px; min-width:0}
.wine-list .wm b{font-size:15px; color:var(--red); font-variant-numeric:tabular-nums}
.wine-list .ws{font-size:11px; color:#9a8f88; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wines-note{font-size:11.5px; line-height:1.75; color:#8b807a; margin:10px 0 0; max-width:none}

.rel{font-size:14.5px; line-height:2}
.warn{font-size:13.5px; line-height:1.8; background:#fdf6e6; border:1px solid #ecd9a5; color:#6a5518;
  padding:12px 15px; border-radius:8px; max-width:40em; margin:14px 0 0}

.src{font-size:12.5px; line-height:1.75; border-top:1px solid var(--line); padding:11px 0; margin:0; max-width:46em}
.src .ty{display:inline-block; font-size:10.5px; padding:1px 7px; border-radius:99px; background:var(--paper);
  border:1px solid var(--line); color:var(--ink-soft); margin-right:7px}
.src .pub{font-weight:700}
.src .weak{color:#9a6a1c}
.src a{word-break:break-all}
.src .nt{color:var(--ink-soft); display:block; margin-top:2px}

.card{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-bottom:14px}
.card h3{font-size:11.5px; letter-spacing:.1em; color:var(--ink-soft); margin:0 0 14px; font-weight:700}
.gauge{display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:10px; margin-bottom:9px}
.gauge:last-child{margin-bottom:0}
.gauge .lb{font-size:13px; color:var(--ink-soft)}
.gauge .stars{font-size:15px; letter-spacing:2px; line-height:1}
.gauge .stars .on{color:var(--red)}
.gauge.w .stars .on{color:var(--gold)}
.gauge .stars .off{color:#ddd4cc}
.gauge .num{font-size:11px; color:#a2968f; font-variant-numeric:tabular-nums}
.dl{margin:0; font-size:13.5px}
.dl div{display:flex; gap:10px; padding:7px 0; border-top:1px solid var(--line)}
.dl div:first-child{border-top:0; padding-top:0}
.dl dt{margin:0; color:var(--ink-soft); flex:0 0 auto; min-width:5.2em; white-space:nowrap}
.dl dd{margin:0; flex:1}
.b-easy{color:#1f6b4e; font-weight:600}
.b-possible{color:#8a6b16; font-weight:600}
.b-hard{color:#7a6f68}
.cta{display:flex; align-items:center; justify-content:center; gap:9px; text-decoration:none;
  background:var(--red); color:#fff; font-size:14.5px; font-weight:600; padding:13px 20px; border-radius:9px}
.cta:hover{background:#71232f}

/* 一覧：絞り込み */
.filters{display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; padding:16px 20px;
  background:var(--paper); border:1px solid var(--line); border-radius:11px; margin-bottom:22px}
.fg{display:flex; align-items:center; flex-wrap:wrap; gap:7px}
.fl{font-size:11px; letter-spacing:.1em; color:#9a8f88; margin-right:3px}
.fb{font-family:inherit; font-size:12.5px; padding:6px 13px; border-radius:99px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg); color:var(--ink-soft); transition:.13s}
.fb:hover{border-color:var(--red); color:var(--red)}
.fb.on{background:var(--red); border-color:var(--red); color:#fff}
.fg select{font-family:inherit; font-size:12.5px; padding:6px 10px; border-radius:7px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer}
.fb:focus-visible,.fg select:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.fcount{margin:0 0 0 auto; font-size:12px; color:#9a8f88; font-variant-numeric:tabular-nums}
.empty{font-size:13.5px; color:var(--ink-soft); padding:20px 0}

/* 一覧 */
.list-grid{display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:14px}
@media (min-width:640px){ .list-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1040px){ .list-grid{grid-template-columns:repeat(3,1fr)} }
a.v{display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--paper);
  border:1px solid var(--line); border-radius:11px; padding:17px 19px; transition:border-color .15s, transform .15s}
a.v:hover{border-color:var(--red); transform:translateY(-1px)}
a.v .n{font-family:var(--mincho); font-size:17px; font-weight:600; margin-bottom:1px}
a.v .e{font-size:10.5px; color:#9a8f88; margin-bottom:11px; letter-spacing:.03em}
a.v .s{font-size:12.5px; color:var(--ink-soft); line-height:1.7; margin-bottom:13px}
.bars{display:grid; grid-template-columns:1fr 1fr; gap:5px 14px; margin-top:auto}
.bars i{display:grid; grid-template-columns:1.2em 1fr; align-items:center; gap:5px; font-style:normal; font-size:10px; color:#8b807a}
.bars b{display:block; height:5px; border-radius:3px; background:#eae3dc; overflow:hidden}
.bars b em{display:block; height:100%; border-radius:3px}
.bars.red b em{background:var(--red)}
.bars.white b em{background:var(--gold)}
a.v .tagline{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:11px; font-size:10.5px; color:var(--ink-soft)}
a.v .tagline span{padding:2px 9px; border-radius:99px; border:1px solid var(--line)}
a.v .tagline .c.red{background:var(--red-soft); border-color:#e6c9cf; color:#7a2a3a}
a.v .tagline .c.white{background:var(--gold-soft); border-color:#e6d5a5; color:#7d6115}
a.v[hidden]{display:none}
h2.sec{font-family:var(--mincho); font-size:21px; font-weight:600; margin:38px 0 6px}
p.seclead{margin:0 0 18px; font-size:13.5px; color:var(--ink-soft); max-width:44em}
.parents{display:flex; flex-wrap:wrap; gap:8px}
.parents a{font-size:12.5px; padding:5px 12px; border-radius:6px; background:var(--paper);
  border:1px dashed var(--line); color:var(--ink-soft); text-decoration:none}
.parents a:hover{border-color:var(--accent); color:var(--accent)}

footer{border-top:1px solid var(--line); background:var(--paper); margin-top:34px; padding:24px 0 38px}
footer p{margin:0 0 5px; font-size:12.5px; color:var(--ink-soft)}
footer a{color:var(--ink-soft)}

@media (max-width:600px){
  .wrap{padding:0 20px}
  .bar nav a{margin-left:12px}
}