/* =======================================================================
 *  portal-top.css — ポータル化トップの汎用スタイル（テーマ非依存・CSS変数着色）
 *  wine-terminal.jp で確立したものを抽出。すべて .wt-top スコープ。
 *  色は :root 変数で上書き（config['theme'] からも出力可）。
 *    --accent  : 主役色（例 緑）   --accent2 : アクセント色（例 ワイン）
 *  ホストの共通CSS（リセット/ヘッダー .wt-appbar/フッター）と併用する前提。
 * ===================================================================== */
/* 変数は .wt-top スコープに閉じ、他ページ（appbar/tabbar/カード）の配色と衝突させない。
   つづきはぐのブランド色: accent=ティールグリーン / accent2=オレンジ */
.wt-top{
  --bg:#fbfaf6; --surface:#fff; --surface-2:#f4f4ee;
  --ink:#23302c; --ink-2:#5b655f; --ink-3:#8d958e;
  --line:#e6e6dd; --line-2:#f0f0e8;
  --accent:#2f8f83; --accent-d:#1f6a60; --accent-bg:#e8f3f1; --accent-l:#74b7ad;
  --accent2:#e08a3c; --accent2-d:#c06e22;
  --r:8px; --r-s:6px; --maxw:1100px;
}

/* 横スクロール（横揺れ）を固定：clipはスクロールコンテナを作らずstickyを維持 */
html{overflow-x:clip}
.wt-top{overflow-x:clip}

.wt-top .wt-wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.wt-top section{padding:26px 0}
.wt-top h2.sec{font-size:17px;font-weight:800;margin:0 0 12px;display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.wt-top h2.sec .more{margin-left:auto;font-size:12px;color:var(--ink-3);font-weight:700}
.wt-top .note{font-size:11.5px;color:var(--ink-3);margin:10px 2px 0}
.wt-top .pt0{padding-top:0}
.wt-top a{color:inherit;text-decoration:none}

/* ファーストビュー2カラム */
.wt-top .fv{padding:20px 0 8px}
.wt-top .fv .grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start}
.wt-top .main,.wt-top .side{min-width:0}
.wt-top .tagline{font-size:14px;font-weight:700;color:var(--accent-d);margin:0 0 10px}
.wt-top .tagline b{color:var(--accent2)}

/* 検索条件カード */
.wt-top .searchcard{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;margin-bottom:16px;max-width:100%;min-width:0}
.wt-top .searchcard .kw{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:14px 14px 0}
.wt-top .searchcard .kw input{min-width:0;border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-size:14px;outline:0}
.wt-top .searchcard .kw input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,125,82,.14)}
.wt-top .searchcard .kw .kwbtn{flex:none;white-space:nowrap;border:0;background:var(--accent);color:#fff;font-weight:800;border-radius:9px;padding:0 22px;font-size:14px;cursor:pointer}
.wt-top .cond{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px 14px}
.wt-top .cond .f{min-width:0}
.wt-top .cond .f label{font-size:11px;font-weight:800;color:var(--ink-3);letter-spacing:.04em;display:block;margin-bottom:5px}
.wt-top .cond .f select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:100%;min-width:0;border:1px solid var(--line);border-radius:9px;
  padding:11px 36px 11px 13px;background-color:#fff;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238e2c3b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:13px;
  font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.25;cursor:pointer;transition:border-color .15s,box-shadow .15s;
}
.wt-top .cond .f select:hover{border-color:var(--accent-l)}
.wt-top .cond .f select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,125,82,.14)}
.wt-top .cond .go{grid-column:1/-1;border:0;background:var(--accent2);color:#fff;font-weight:800;font-size:14px;border-radius:9px;padding:12px;cursor:pointer}
.wt-top .cond .go b{font-size:15px;margin:0 3px}

/* 主軸：地図＋地域別リスト */
.wt-top .areawrap{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.wt-top .areawrap .hd{padding:11px 14px;border-bottom:1px solid var(--line-2);font-size:14px;font-weight:800}
.wt-top .areabody{display:grid;grid-template-columns:230px minmax(0,1fr)}
.wt-top .mapcol{border-right:1px solid var(--line-2);background:var(--surface-2);padding:12px}
.wt-top .region-map{width:100%;margin:0 auto}
.wt-top .region-map svg{display:block;position:static;inset:auto;transform:none;width:100%;height:auto;max-height:240px}
.wt-top .regions{display:grid;grid-template-columns:repeat(3,1fr)}
.wt-top .rg{padding:11px 13px;border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2)}
.wt-top .rg .rh{font-size:11.5px;font-weight:800;color:var(--accent-d);border-left:3px solid var(--accent);padding-left:6px;margin-bottom:6px}
.wt-top .rg .pl{display:flex;flex-wrap:wrap;gap:2px 10px}
.wt-top .rg .pl a{font-size:12px;color:var(--ink-2);white-space:nowrap;display:inline-flex;align-items:baseline;gap:2px;font-weight:700}
.wt-top .rg .pl a:hover{color:var(--accent2);text-decoration:underline}
.wt-top .rg .pl a i{font-style:normal;font-size:10px;color:var(--ink-3);font-weight:400}
.wt-top .rg .pl span{font-size:12px;color:var(--ink-3);opacity:.5}

/* サイド */
.wt-top .side .bn{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:14px;margin-bottom:12px}
.wt-top .side .bn.accent{background:var(--accent-bg);border-color:#cfe3d5}
.wt-top .side .bn h3{margin:0 0 5px;font-size:14px;font-weight:800;color:var(--accent-d)}
.wt-top .side .bn p{margin:0;font-size:12px;color:var(--ink-2)}
.wt-top .side .bn p a{color:var(--accent);font-weight:700}
.wt-top .side .stat{display:flex;gap:10px;text-align:center}
.wt-top .side .stat div{flex:1}
.wt-top .side .stat b{display:block;font-size:20px;font-weight:800;color:var(--accent2)}
.wt-top .side .stat small{font-size:10.5px;color:var(--ink-3)}

/* クイックナビ → 追従ヘッダー */
.wt-top .qbar{position:sticky;top:var(--wt-appbar-h,52px);z-index:55;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:box-shadow .15s}
.wt-top .qbar.stuck{box-shadow:0 3px 10px rgba(31,42,36,.10);border-top-color:transparent}
.wt-top .qnav{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:14px 0;transition:padding .15s}
.wt-top .qnav a{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink-2)}
.wt-top .qnav a .ic{width:42px;height:42px;border-radius:50%;background:var(--accent-bg);display:grid;place-items:center;color:var(--accent-d);transition:width .15s,height .15s}
.wt-top .qnav a:hover{color:var(--accent-d)}
.wt-top .qbar.stuck .qnav{padding:6px 0}
.wt-top .qbar.stuck .qnav a{gap:3px;font-size:11.5px}
.wt-top .qbar.stuck .qnav a .ic{width:28px;height:28px}

/* 注目ランキング */
.wt-top .rank{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wt-top .rcard{display:flex;gap:12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:12px;position:relative;color:inherit}
.wt-top .rcard:hover{border-color:var(--accent)}
.wt-top .rcard .no{position:absolute;left:-1px;top:-1px;background:var(--accent2);color:#fff;font-weight:800;font-size:12px;padding:2px 9px;border-radius:var(--r) 0 var(--r-s) 0}
.wt-top .rcard .th{width:96px;height:72px;flex:none;border-radius:var(--r-s);background:var(--surface-2);display:grid;place-items:center;color:#a7c6b1;border:1px solid var(--line);overflow:hidden}
.wt-top .rcard .th img{width:100%;height:100%;object-fit:cover}
.wt-top .rcard .bd{min-width:0}
.wt-top .rcard .nm{font-size:14px;font-weight:800;margin:2px 0 1px;line-height:1.4;display:block}
.wt-top .rcard .mt{font-size:11.5px;color:var(--ink-3);font-weight:700;display:block}

/* 特集 */
.wt-top .feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.wt-top .fcard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;color:inherit}
.wt-top .fcard:hover{border-color:var(--accent)}
.wt-top .fcard .img{display:block;height:96px;background:var(--surface-2)}
.wt-top .fcard .img.a{background:linear-gradient(135deg,#dfe7da,#eef4ea)}
.wt-top .fcard .img.b{background:linear-gradient(135deg,#efe2c9,#f7f0e0)}
.wt-top .fcard .img.c{background:linear-gradient(135deg,#ecd9dc,#f6ecee)}
.wt-top .fcard .img.d{background:linear-gradient(135deg,#dbe6ea,#eef3f5)}
.wt-top .fcard .cap{display:block;padding:9px 11px;font-size:12.5px;font-weight:700}
.wt-top .fcard .cap small{display:block;color:var(--ink-3);font-size:10.5px;font-weight:500;margin-top:1px}

/* UGC */
.wt-top .ugc{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.wt-top .ugc figure,.wt-top .ugc .ph{margin:0;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--surface-2);aspect-ratio:1/1;display:grid;place-items:center;color:#a7c6b1}
.wt-top .ugc .ph img{width:100%;height:100%;object-fit:cover}

/* チップ */
.wt-top .chips{display:flex;flex-wrap:wrap;gap:8px}
.wt-top .chip{display:inline-flex;align-items:baseline;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.wt-top .chip:hover{border-color:var(--accent);color:var(--accent)}
.wt-top .chip .n{font-size:10.5px;color:var(--ink-3)}
.wt-top .chip.t{border-color:#e6c6cc;color:var(--accent2-d,#6b1f2c)}

/* 網羅リンク */
.wt-top .sitelinks{border-top:1px solid var(--line);background:var(--surface)}
.wt-top .sitelinks .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.wt-top .sitelinks h4{font-size:12px;font-weight:800;color:var(--accent-d);margin:0 0 8px}
.wt-top .sitelinks a{display:inline-block;font-size:11.5px;color:var(--ink-2);margin:0 10px 5px 0}
.wt-top .sitelinks a:hover{color:var(--accent)}

/* ヒーロー写真：PCは横長バンド（下の@mediaでSPは全面写真に切替） */
.wt-top .mhero{display:block;position:relative;overflow:hidden;background:#EAE3D9;border-bottom:1px solid var(--line)}
.wt-top .mhero .bg{width:100%;height:clamp(220px,27vw,330px);object-fit:cover;object-position:center 42%;display:block}
.wt-top .mhero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,38,28,.58),rgba(18,38,28,.22) 50%,rgba(18,38,28,0))}
.wt-top .mhero .ov{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:100%;max-width:var(--maxw);padding:0 24px}
.wt-top .mhero .ov b{display:block;font-size:30px;font-weight:800;color:#fff;letter-spacing:.02em;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.wt-top .mhero .ov small{display:block;font-size:10px;letter-spacing:.26em;color:rgba(255,255,255,.92);font-weight:700;margin-top:3px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.wt-top .mhero .ov p{margin:9px 0 0;font-size:14px;font-weight:700;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5)}

/* ===== モバイル ===== */
@media(max-width:880px){
  /* トップのヘッダーバーをなくす（body.wt-front を付与した場合） */
  .wt-front .wt-appbar{display:none}
  .wt-top .fv{padding-top:0}
  .wt-top .fv .grid{grid-template-columns:minmax(0,1fr)}
  .wt-top .side{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .wt-top .side .bn{margin:0}
  /* 地図＋地域リストはSP非表示（産地選択はカードのselectで） */
  .wt-top .areawrap{display:none}
  /* SPヒーロー写真 */
  .wt-top .tagline{display:none}
  .wt-top .mhero{display:block;position:relative;margin:0;background:#EAE3D9}
  .wt-top .mhero .bg{width:100%;height:min(62vw,360px);object-fit:cover;object-position:center 32%;display:block;background:#EAE3D9}
  .wt-top .mhero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(15,30,20,.28) 0%,rgba(15,30,20,0) 34%,rgba(251,251,247,0) 56%,var(--bg) 100%)}
  .wt-top .mhero .ov{position:absolute;left:0;right:0;top:16px;transform:none;z-index:2;text-align:center;padding:0 16px;max-width:none}
  .wt-top .mhero .ov b{display:block;margin-top:3px;font-size:19px;font-weight:800;color:#fff;letter-spacing:.02em;text-shadow:0 1px 8px rgba(0,0,0,.5)}
  .wt-top .mhero .ov small{display:block;font-size:8px;letter-spacing:.24em;color:rgba(255,255,255,.92);font-weight:700;margin-top:1px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
  .wt-top .mhero .ov p{margin:9px auto 0;white-space:nowrap;font-size:12px;letter-spacing:-.01em;font-weight:700;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55)}
  .wt-top .searchcard{position:relative;z-index:3;margin-top:-36px;box-shadow:0 3px 14px rgba(31,42,36,.12)}
  .wt-top .cond{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wt-top .rank{grid-template-columns:minmax(0,1fr)}
  .wt-top .feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wt-top .ugc{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wt-top .sitelinks .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}