@charset "utf-8";
/* =====================================================================
   YUKARI デザインシステム ③ 部品（ボタン・入力・カード・モーダル等）
   ===================================================================== */

/* ---- ボタン ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:inherit; font-size:.92rem; font-weight:500; cursor:pointer;
  padding:9px 18px; border-radius:var(--radius-pill); border:1.5px solid transparent;
  transition:transform .12s, box-shadow .12s, background .15s, color .15s;
}
.btn:hover{ text-decoration:none; }
.btn-solid{ background:var(--green); color:#fff; box-shadow:var(--shadow); }
.btn-solid:hover{ background:var(--green-d); box-shadow:var(--shadow-hover); transform:translateY(-1px); }
.btn-ghost{ border-color:var(--green); color:var(--green-d); background:transparent; }
.btn-ghost:hover{ background:var(--green-l); }
.btn-block{ width:100%; }
.btn:disabled,.btn.is-loading{ opacity:.6; cursor:default; }

/* ---- 入力 ---- */
.field{ margin-bottom:1rem; }
.label{ display:block; font-size:.85rem; font-weight:500; margin-bottom:.35rem; color:var(--ink); }
.input, .textarea, .select{
  width:100%; font-family:inherit; font-size:1rem; color:var(--ink);
  padding:11px 14px; line-height:1.6; border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
/* セレクト要素に直接付ける独自クラス */
.form-select{
  width:100%; font-family:inherit; font-size:1rem; color:var(--ink); line-height:1.6;
  padding:11px 38px 11px 14px; border:1px solid var(--line); border-radius:var(--radius);
  background-color:#fff; cursor:pointer;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1L6 6L11 1' fill='none' stroke='%235b6b61' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.form-select:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(46,158,79,.15); }
.input:focus, .textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(46,158,79,.15); }
.help{ font-size:.78rem; color:var(--muted); margin-top:.3rem; }

/* ---- チップ ---- */
.chip{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none;
  border:1px solid var(--line); background:#fff; border-radius:var(--radius-pill);
  padding:7px 15px; font-size:.85rem; color:var(--muted); transition:.15s;
}
.chip:hover{ border-color:var(--green); color:var(--green-d); }
.chip input{ accent-color:var(--green); }
/* 新聞フィルタ（セグメンテッドコントロール：含む/除く/のみ）*/
.paper-seg{ display:inline-flex; align-items:center; gap:7px; }
.paper-seg__lead{ font-size:.8rem; color:var(--muted); white-space:nowrap; }
.paper-seg__group{ display:inline-flex; }
.paper-seg__opt{ display:inline-flex; }
.paper-seg__opt input{ position:absolute; opacity:0; width:0; height:0; }
.paper-seg__opt span{ display:inline-block; padding:7px 13px; border:1px solid var(--line); border-left:none; font-size:.82rem; color:var(--muted); background:#fff; cursor:pointer; transition:.15s; white-space:nowrap; }
.paper-seg__opt:first-child span{ border-left:1px solid var(--line); border-radius:var(--radius-pill) 0 0 var(--radius-pill); }
.paper-seg__opt:last-child span{ border-radius:0 var(--radius-pill) var(--radius-pill) 0; }
.paper-seg__opt span:hover{ color:var(--green-d); border-color:var(--green); }
.paper-seg__opt input:checked + span{ background:var(--green); border-color:var(--green); color:#fff; font-weight:600; }
.paper-seg__opt input:focus-visible + span{ box-shadow:0 0 0 3px rgba(46,158,79,.25); }
/* 有料機能のグレー不活性化（索引検索を無料会員に見せつつ無効化）
   ※ pointer-events は殺さない（ツールチップを出すため）。無効化は input[disabled] で担保 */
.chip-disabled{ cursor:not-allowed; }
.chip-disabled .chip{ opacity:.45; cursor:not-allowed; }
.chip-disabled .chip:hover{ border-color:var(--line); color:var(--muted); }
/* chip-disabled が .chip 自身に付く場合（例：Noteチップ）*/
.chip.chip-disabled{ opacity:.45; cursor:not-allowed; }
.chip.chip-disabled:hover{ border-color:var(--line); color:var(--muted); }
.chip.chip-disabled input{ cursor:not-allowed; }
.chip-disabled .chip input{ cursor:not-allowed; }

/* ---- カード ---- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px 22px; transition:transform .2s, box-shadow .2s, border-color .2s;
}
.card--hover{ cursor:pointer; }
.card--hover:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--green); }

/* ---- バッジ ---- */
.badge{ display:inline-block; font-size:.7rem; background:var(--green-l); color:var(--green-d); padding:1px 9px; border-radius:var(--radius-pill); }

/* ---- 設定行 ＋ トグルスイッチ ---- */
.setting-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.setting-row:last-child{ border-bottom:none; }
.switch{ position:relative; display:inline-block; width:48px; height:26px; flex:0 0 auto; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; inset:0; background:#ccc; border-radius:999px; transition:.2s; cursor:pointer; }
.switch .slider::before{ content:''; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.switch input:checked + .slider{ background:var(--green); }
.switch input:checked + .slider::before{ transform:translateX(22px); }

/* ---- フラッシュ通知 ---- */
.flash{ padding:12px 18px; border-radius:var(--radius); margin-bottom:10px; font-size:.92rem; }
.flash--success{ background:var(--green-l); color:var(--green-d); border:1px solid #bfe3c8; }
.flash--info{ background:#eef4fb; color:#2c5d8f; border:1px solid #c8ddf0; }

/* ---- テーブル ---- */
.table{ width:100%; border-collapse:collapse; background:#fff; }
.table th,.table td{ padding:12px; text-align:left; border-bottom:1px solid var(--line); }
.table thead th{ background:var(--green-d); color:#fff; font-weight:500; }
.table tbody tr:hover{ background:var(--paper-alt); }

/* ---- モーダル（自前定義。script.js が .is-active を付与して表示）---- */
.modal{ display:none; position:fixed; inset:0; z-index:100; align-items:center; justify-content:center; padding:20px; }
.modal.is-active{ display:flex; }
/* モーダル表示中は背景（検索結果リスト等）のスクロールを止める */
html:has(.modal.is-active),
body:has(.modal.is-active){ overflow:hidden; }
.modal-background{ position:absolute; inset:0; background:rgba(10,20,15,.55); }
.modal-content, .modal-card{ position:relative; z-index:1; width:100%; max-width:560px; background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-hover); }
.modal .delete{
  appearance:none; border:none; cursor:pointer; width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,.08); position:relative;
}
.modal .delete::before,.modal .delete::after{ content:''; position:absolute; top:50%; left:50%; width:14px; height:2px; background:#333; transform:translate(-50%,-50%) rotate(45deg); }
.modal .delete::after{ transform:translate(-50%,-50%) rotate(-45deg); }
/* お問い合わせモーダルは閲読モーダル(z100)・補助ペインのボトムシート(z1000)より前面に */
#contact-modal{ z-index:1300; }

/* ---- ヘッダー（ナビ）---- */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav .brand img{ height:46px; display:block; }
.nav ul{ display:flex; align-items:center; gap:4px; margin:0; padding:0; list-style:none; }
.nav ul a{ padding:8px 14px; border-radius:8px; font-size:.92rem; color:var(--ink); }
.nav ul a:hover{ background:var(--green-l); color:var(--green-d); text-decoration:none; }
.nav .actions{ display:flex; align-items:center; gap:10px; }
.burger{ display:none; background:none; border:none; font-size:1.4rem; color:var(--green-d); cursor:pointer; }

/* ---- ヒーロー＋検索 ---- */
.hero{ position:relative; overflow:hidden; background:radial-gradient(1200px 400px at 85% -10%, rgba(46,158,79,.10), transparent 60%), linear-gradient(180deg,var(--green-l) 0%, #fff 78%); }
.searchbar{ display:flex; align-items:stretch; background:#fff; border:2px solid var(--green); border-radius:var(--radius-pill); box-shadow:var(--shadow); max-width:620px; overflow:hidden; }
/* min-width:0 がないと input の既定の固有幅（約20文字分）で縮まず、
   小画面でヒーロー全体が画面幅を超えて文字が端に張り付く原因になる */
.searchbar input{ flex:1; min-width:0; border:none; outline:none; font-family:inherit; font-size:1.05rem; padding:0 22px; background:transparent; color:var(--ink); }
.searchbar button{ border:none; cursor:pointer; background:var(--green); color:#fff; padding:0 26px; font-size:1.15rem; }
.searchbar button:hover{ background:var(--green-d); }

/* ---- フッター ---- */
.site-footer{ background:var(--green-d); color:#dfeee2; margin-top:24px; }
.site-footer h4{ font-family:var(--font-serif); color:#fff; font-size:1rem; margin:0 0 14px; }
.site-footer p, .site-footer a{ color:#cfe3d4; font-size:.88rem; }
.site-footer a:hover{ color:#fff; }
.site-footer .copy{ text-align:center; border-top:1px solid rgba(255,255,255,.15); padding:16px; font-size:.78rem; color:#a9c6af; }

/* ---- ナビ メニュー（#nav-links）---- */
.nav-menu{ display:flex; align-items:center; gap:8px; }
.nav-link{ padding:8px 12px; border-radius:8px; font-size:.92rem; color:var(--ink); cursor:pointer; }
.nav-link:hover{ background:var(--green-l); color:var(--green-d); text-decoration:none; }
.nav-user{ font-weight:500; color:var(--green-d); padding:8px 6px; }

/* ---- 言語切替 ---- */
.lang-switch{ display:inline-flex; gap:2px; align-items:center; font-size:.76rem; margin-right:4px; }
.lang-switch a{ padding:3px 7px; border-radius:6px; color:var(--muted); }
.lang-switch a:hover{ background:var(--green-l); color:var(--green-d); text-decoration:none; }
.lang-switch a.active{ color:var(--green-d); font-weight:700; }

/* ---- フォームのメッセージ ---- */
.form-message{ color:var(--danger); font-size:.85rem; min-height:1.2em; text-align:center; }

/* ---- フッター段組み ---- */
/* 左右パディングは .wrap に任せる（縦のみ指定。短縮形で左右0にすると端に張り付く）*/
.footer-cols{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; padding-top:50px; padding-bottom:30px; }

/* ---- モバイル ---- */
@media (max-width:880px){
  .burger{ display:block; }
  .nav-menu{ display:none; position:absolute; top:72px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:6px; background:#fff; border-bottom:1px solid var(--line); padding:12px 24px; z-index:60; }
  .nav-menu.is-active{ display:flex; }
  .footer-cols{ grid-template-columns:1fr; gap:26px; padding-top:36px; padding-bottom:24px; }
}
@media (max-width:600px){
  .footer-cols{ gap:22px; padding-top:30px; padding-bottom:20px; }
  .site-footer .copy{ padding:14px 16px; }
}