/* 2026-09-21 大隆さん指示「見た目はInstagramに寄せて」。
 *
 * 方針: レイアウトは変えない。色・角丸・影・グラデーションだけを整える。
 * 既存の CSS を20枚書き換えると壊すので、最後に1枚だけ重ねて上書きする。
 * 外したくなったら index.html からこの1行を消せば元に戻る。
 *
 * Instagram の見た目の要点:
 *   ・背景は白。グラデーションの地を敷かない
 *   ・枠は 1px の薄いグレー。影は使わない
 *   ・角丸は控えめ（カード 12px、ボタン 8px、丸ボタンだけ 999px）
 *   ・文字は黒に近いグレー、補助はもっと薄いグレー
 *   ・色は1色だけアクセントに使う（HOSHILU は紫のまま。ただしベタ塗りにする）
 *   ・太字は見出しと操作だけ。本文は 400〜500
 */
:root{
  --ig-bg:#fff;
  --ig-ink:#262626;
  --ig-muted:#8e8e8e;
  --ig-line:#dbdbdb;
  --ig-soft:#fafafa;
  --ig-accent:#7357ff;
  --ig-radius:12px;
  --ig-radius-sm:8px;
  /* 既存の変数もこの体系へ寄せる。参照している全CSSがまとめて落ち着く。 */
  --ink:var(--ig-ink);
  --muted:var(--ig-muted);
  --line:var(--ig-line);
  --soft:var(--ig-soft);
  --paper:#fff;
  --canvas:#fff;
}

/* 地のグラデーションをやめて白に */
body{background:var(--ig-bg) !important;color:var(--ig-ink)}

/* 影を全部落とす（Instagram は影を使わない） */
body *{box-shadow:none !important}

/* カード類: 白地・1px の線・控えめな角丸 */
.insight-card,.kept-products,.product-card,.values article,.seller-panel,
.auth-card,.form-shell,.google-mall-card,.usual-row,.entrusted-row,
.shop-card,.buzz-card,.sale-card{
  border:1px solid var(--ig-line) !important;
  border-radius:var(--ig-radius) !important;
  background:#fff !important;
}

/* 薄紫の塗りをやめて白に（値下がり待ち・いつものホシルの行） */
.entrusted-row,.usual-row{background:#fff !important}

/* ボタン: グラデーションをやめてベタ塗り。角丸は 8px */
button,.primary,.submit,.auth-button,.ghost-button,a.primary{
  border-radius:var(--ig-radius-sm) !important;
  font-weight:600;
}
.watch-save-button,.usual-cycle-save,.submit,.primary,.auth-button,
.continuous-search-button,.hero-watch-submit,#searchSubmit,button[type="submit"]{
  background:var(--ig-accent) !important;
  color:#fff !important;
  border:0 !important;
}
.ghost-button,.secondary,.usual-row-bought,.entrusted-row-search{
  background:var(--ig-soft) !important;
  color:var(--ig-accent) !important;
  border:1px solid var(--ig-line) !important;
}
.usual-row-stop,.entrusted-row-remove,.usual-make-button{
  background:#fff !important;
  color:var(--ig-ink) !important;
  border:1px solid var(--ig-line) !important;
}

/* 丸い形が意味を持つ「小さなチップ」だけ 999px を残す。
   2026-09-21: ホシってるものの4枚（.hoshi-status a / button）をここに入れていたため、
   複数行のカードが楕円になり、左寄せの文字が丸みにぶつかって見た目がズレていた。
   あれはチップではなくカードなので、カードの角丸（12px）に戻す。 */
.shop-chip,.google-mall-card-mall,.google-mall-card-kind,.usual-cycle-choice,
.checks label,.login-link{
  border-radius:999px !important;
}
.hoshi-status a,.hoshi-status button{
  border-radius:12px !important;
}

/* 見出しのグラデーション文字をやめる */
/* 濃い地のセクション（LP の LIVE DEMAND など）では白地色を塗ると文字が消える。
   地の色に関係なく読めるよう、色は周囲から受け継ぐ。 */
.hero h1 span,h1 span,h2 span{
  background:none !important;
  -webkit-background-clip:initial !important;
  color:inherit !important;
}

/* 区切りは 1px の線だけ。
   2026-09-21: 線のすぐ下に見出しが貼り付いていたので、線と中身のあいだに余白を入れる。
   あわせて、見出しの左端を「今日のホシル」（カードの padding 16px）に合わせる。
   ここだけ 0 だったため、節の題だけが左へ突き出して見えていた。 */
.entrusted-watches,.usual-hoshiru,.later-wishes,.mywatch-hub,.insight-dashboard,
#insight #keptProducts.kept-in-insight,#mywish.insight-wishes{
  padding-left:16px !important;
  padding-right:16px !important;
}
.entrusted-watches,.usual-hoshiru,.later-wishes,.mywatch-hub{
  border-top:1px solid var(--ig-line) !important;
  padding-top:14px !important;
}

/* 画像は白地に収める（モールのロゴが浮かないように） */
.usual-row-media,.entrusted-row-media,.google-mall-card-image{
  background:#fff !important;
  border:1px solid var(--ig-line) !important;
  border-radius:var(--ig-radius-sm) !important;
}

/* 下タブ: 白地＋上に1px。選択中はアクセント色の文字だけで塗らない */
.tab-bar,.tab-nav,.sticky-nav,nav[role="tablist"]{
  background:#fff !important;
  border-top:1px solid var(--ig-line) !important;
}
/* 選択中は塗らない。色のついた文字とアイコンだけで示す（Instagram の下タブと同じ）。 */
.tab-bar-item.active,.tab-bar-item[aria-selected="true"],.tab-nav .on,nav[role="tablist"] .on{
  background:transparent !important;
  color:var(--ig-ink) !important;
}

/* 入力: 薄いグレーの地に 1px。フォーカスは線の色だけ変える */
input,select,textarea{
  border:1px solid var(--ig-line) !important;
  border-radius:var(--ig-radius-sm) !important;
  background:var(--ig-soft) !important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--ig-ink) !important;
  background:#fff !important;
}

/* ダイアログも同じ体系に */
dialog{border:1px solid var(--ig-line) !important;border-radius:var(--ig-radius) !important}
dialog::backdrop{background:rgba(0,0,0,.65)}

/* 本文の太字を落とす。見出しと操作だけ太く残す */
p,span,small,li{font-weight:400}
h1,h2,h3,h4,strong,b,button,.usual-row-name,.entrusted-row-name{font-weight:600}
h1,h2{letter-spacing:-.02em}

/* §31 需要チェック（/for-sellers）。Instagram 寄せの体系で。 */
.demand-check{margin:56px 0;padding:24px;border:1px solid var(--ig-line);border-radius:var(--ig-radius);background:#fff}
.demand-check h2{margin:0 0 8px;font-size:clamp(22px,4vw,34px)}
.demand-check>p{margin:0 0 18px;color:var(--ig-muted);line-height:1.8}
#demandCheckForm{display:flex;gap:8px;flex-wrap:wrap}
#demandCheckQuery{flex:1 1 220px;min-width:0}
#demandCheckForm button{flex:0 0 auto;padding:13px 22px}
.demand-check-query{margin:20px 0 10px;font-weight:600;color:var(--ig-ink)}
.demand-check-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--ig-line);border:1px solid var(--ig-line);border-radius:var(--ig-radius-sm);overflow:hidden}
.demand-check-stat{display:grid;gap:4px;padding:16px 12px;background:#fff;text-align:center}
.demand-check-number{font-size:22px;font-weight:600;color:var(--ig-ink)}
.demand-check-label{font-size:12px;color:var(--ig-muted)}
.demand-check-note{margin:12px 0 0;color:var(--ig-muted);font-size:13px;line-height:1.8}
.demand-check-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.demand-check-actions a{padding:13px 20px;text-decoration:none;text-align:center}
.demand-check-actions .ghost{border:1px solid var(--ig-line);border-radius:var(--ig-radius-sm);color:var(--ig-ink);background:#fff}
@media(max-width:640px){.demand-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 画面に出さないラベル（読み上げ用）。for-sellers 側に定義が無かったので、ここで足す。 */
.visually-hidden{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Instagram は「1画面に塗りつぶしボタンは1つ」。副次の操作は白地＋線にする。
   トップに紫のボタンが2つ並ぶと、どちらを押せばいいか分からなくなる。 */
#submitButton,#rankingSearchButton,.hero-actions .ghost,.secondary,
.direct-search-button,.ranking-search-button{
  background:#fff !important;
  color:var(--ig-ink) !important;
  border:1px solid var(--ig-line) !important;
}

/* 例示のチップ: 薄紫の塗りをやめて白地＋線に */
.chip,.quick-queries button,.example-chip,.suggest-chip,
.wish-list button,.genre-chip{
  background:#fff !important;
  color:var(--ig-ink) !important;
  border:1px solid var(--ig-line) !important;
}

/* 本文中の色つき強調をやめる（Instagram は本文に色を使わない） */
p strong,li strong{color:inherit !important}

/* §⑯ LP の「今の需要」実数（探し中・値下がり待ち・いつものホシル）。数字は API の実データだけ。 */
.demand-totals:empty{display:none}
/* 明るい地にも濃い地にも置けるよう、色は周囲から受け継ぎ、線だけで仕切る。 */
.demand-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 18px;color:inherit}
.demand-total{display:grid;gap:4px;padding:16px 12px;border:1px solid rgb(128 128 128 / .38);border-radius:var(--ig-radius-sm);text-align:center;color:inherit}
.demand-total strong{font-size:22px;font-weight:600;color:inherit}
.demand-total-label{font-size:12px;color:inherit}
.demand-total-note{font-size:12px;line-height:1.6;opacity:.7}
@media(max-width:640px){.demand-totals{grid-template-columns:1fr}.demand-total{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:8px;text-align:left}.demand-total-note{flex:1 0 100%}}

/* ------------------------------------------------------------------
   2026-09-21 大隆さん指示「Instagramに寄せたのは分かったけど、色合い無さすぎ。
   元の色合いをもう少し出して。」

   骨格（白地・1pxの線・影なし・控えめな角丸）はそのまま。
   色だけ HOSHILU のものに戻す。戻すのは次の4つだけにする:
     ・線と面の薄い紫（グレー一色にしたせいで、全部が事務的に見えていた）
     ・主ボタンのグラデーション（HOSHILU の顔。ここだけは塗る）
     ・節の見出し（HOSHILU INSIGHT など）の紫
     ・「気になる」のピンク
   本文の文字色は黒のまま。色を情報の意味に使い、飾りには使わない。
   ------------------------------------------------------------------ */
:root{
  --ig-line:#e6e0f7;
  --ig-soft:#f3efff;
  --line:#e6e0f7;
  --soft:#f3efff;
  --muted:#6d6b80;
  --pink:#f2569b;
  --violet:#7357ff;
  --blue:#2fb6f3;
}

/* 主ボタンだけ、元のグラデーションに戻す */
.watch-save-button,.usual-cycle-save,.submit,.primary,.auth-button,
.continuous-search-button,.hero-watch-submit,#searchSubmit,button[type="submit"],
.primary-button,a.primary{
  background:linear-gradient(110deg,var(--pink),var(--violet)) !important;
  color:#fff !important;
  border:0 !important;
}

/* 副ボタンは白のままだが、線と文字に紫を戻す */
.ghost-button,.secondary,.usual-row-bought,.entrusted-row-search,.usual-row-alt,
.hoshi-status-tile,.insight-dashboard-toggle{
  border-color:#ded7ff !important;
}
.ghost-button,.secondary,.usual-row-bought,.entrusted-row-search{
  background:#f7f4ff !important;
  color:#5140ba !important;
}

/* 節の見出し（HOSHILU INSIGHT / DEMAND MATCH …）は紫に戻す */
.step,.eyebrow{color:#7357ff !important}

/* 「気になる」はピンク。押した後は塗る */
.keep-button,.product-card-action-keep button{
  border:1px solid #f7b7d2 !important;
  color:#d6337a !important;
  background:#fff !important;
}
.keep-button.kept,.product-card-action-keep button.kept{
  background:#fdeef5 !important;
  color:#c22a6b !important;
}

/* 選ばれている状態は、薄紫の面で示す（グレーだと選択に見えない） */
.hoshi-status-tile.active{background:#f3efff !important;border-color:#7357ff !important}

/* 保存したことが一目で分かるように（押した直後に出して、すぐ閉じる） */
.watch-save-status.watch-save-status-done{
  margin:8px 0 0 !important;
  padding:10px 12px !important;
  border-radius:10px !important;
  background:#f3efff !important;
  color:#5140ba !important;
  font-weight:800 !important;
  text-align:center !important;
}

/* 2026-09-22 大隆さん指示「すぐ検索にも色つけて」。
   白のままだと押せるボタンに見えない。ただし塗りつぶしは「AIで探す」1つだけに
   しておきたい（どちらを押すか迷わせない）ので、すぐ検索は薄紫の面＋紫の文字にする。
   上の「副次の操作は白地」より後ろに置いて、こちらを勝たせている。 */
#submitButton,.direct-search-button{
  background:#efeaff !important;
  color:#5140ba !important;
  border:1px solid #cfc2ff !important;
  font-weight:800 !important;
}

/* 2026-09-22 大隆さん指示「スクショのように、色鮮は前回の方が良かった。文字の色や、背景など」。
   Instagram 風に白くしすぎた分を、前の配色へ戻す。
   ・背景は薄紫のにじみを戻す
   ・チップ（検索例）は白地＋紫の線＋紫の文字
   ・ランキング／ショップは白地＋紫の太めの線
   ・すぐ検索は濃紺のベタ（AIで探す＝グラデーションとの役割の差は残す）
   ・手がかりのボタン（カメラ・画像・投稿URL）は薄紫の面＋紫の文字 */
body{background:radial-gradient(circle at 72% 0,#eee8ff 0,transparent 32%),#f8f7fc !important}
.hero{background:linear-gradient(180deg,#f1ecff 0%,#faf8ff 100%)}
.chip,.quick-queries button,.example-chip,.suggest-chip,
.wish-list button,.genre-chip{
  background:#fff !important;
  color:#5140ba !important;
  border:1px solid #cfc2ff !important;
}
.ranking-search-button{
  background:#fff !important;
  color:#5636c7 !important;
  border:2px solid #6b45e8 !important;
}
#submitButton,.direct-search-button{
  background:#2b1d6b !important;
  color:#fff !important;
  border:0 !important;
  font-weight:850 !important;
}
.search-input-action{
  background:#f8f6ff !important;
  color:#4f36b5 !important;
  border:1px solid #dcd4fa !important;
}
.step,.eyebrow{color:#7357ff !important}

/* 2026-09-22 大隆さん指示「トップの文字も前回の色合いに戻して。
   『欲しい値段を、先に決めておく。』文章は変更しなくてよい。スクショの色合いね」。
   見出しのグラデーション文字は全体ではやめたままにして、**トップの後半だけ**戻す。
   （前半は濃い墨、後半がピンク→紫→水色。文言はそのまま） */
#heroTitle .hero-title-accent{
  background:linear-gradient(100deg,#ff4f9a,#7357ff,#23b8ff) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent;
}
#heroTitle .hero-title-line:not(.hero-title-accent){color:#17172b !important}
.hero>p:not(.eyebrow),#heroSub,.hero-sub{color:#6d6b80 !important}

/* 2026-09-22 大隆さん指示「スクショのように、以前の字体に戻して」。
   Instagram 風にするとき、文字の太さを一律に下げていた
   （本文 400 / 見出し・強調・ボタン 600）。スクショの字面はもっと太い。
   もとの太さの段階に戻す。書体（font-family）は元から変えていない。 */
h1,h2,h3,h4{font-weight:800 !important}
h1,h2{letter-spacing:-.045em !important}
strong,b{font-weight:800 !important}
button,.primary,.secondary,.ghost-button,.auth-button,
.ranking-search-button,.buy-link,.wish-button{font-weight:850 !important}
.step,.eyebrow{font-weight:900 !important;letter-spacing:.16em !important}
.brand{font-weight:950 !important}
.chip,.quick-queries button,.example-chip,.suggest-chip,
.wish-list button,.genre-chip{font-weight:750 !important}

/* 2026-09-22 大隆さん指摘「トップメッセージは、もう少し右にずらせない？左に寄りすぎてない？」。
   この帯だけ左右の余白が 4px しかなく、下の検索パネルの文字よりも外へ出ていた。
   パネルの中の文字と左端がそろう余白を持たせる。 */
.hoshilu-primary>.hero{padding-left:20px;padding-right:20px}
@media(min-width:761px){
  .hoshilu-primary>.hero{padding-left:clamp(20px,5vw,42px);padding-right:clamp(20px,5vw,42px)}
}