/* members.css — rinran-members 専用スタイル (会員アプリ固有・公開HPには無い)。
 *
 * 🔴 site.css は公開ビルド deploy/ の信頼コピー (sync_menu が丸ごと上書き) ゆえ、
 *    会員アプリ独自の追加 CSS はこのファイルに置く (site.css へ追記しない)。
 *    site.css へ書くと次の sync で消える + 正本との drift 原因になる。
 *    変数 (--c-ink-soft / --c-red / --c-red-deep / --c-ink) は site.css :root 由来。
 */

/* ===== 注文同意欄 (法令: 特商法/キャンセル規定リンク + 同意) ===== */
.consent-links { font-size: 12.5px; line-height: 1.8; color: var(--c-ink-soft); margin: 0 0 8px; }
.consent-links a { color: var(--c-red); text-decoration: underline; }
.consent-links a:hover { color: var(--c-red-deep); }
.consent-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.7; color: var(--c-ink); font-weight: 400; cursor: pointer; }
.consent-row input { margin-top: 3px; flex: 0 0 auto; }

/* ===== 会員ログイン中の装飾: ヘッダー金バッジ ===== */
.member-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(180deg,#dcc081,#c9a961);
  color:#5a4a23;font:700 12.5px/1.2 'Noto Sans JP',sans-serif;padding:7px 13px;border-radius:999px;
  border:1px solid #b8995a;box-shadow:0 1px 3px rgba(90,74,35,.18);white-space:nowrap;}
.member-badge__dot{font-size:10px;line-height:1;opacity:.85;}
.member-bar-links{font-size:12px;color:#6f665d;margin-left:10px;}
.member-bar-links a{color:#8b6d2e;text-decoration:underline;text-underline-offset:2px;}
.member-bar-links a:hover{color:#5a4a23;}

/* ===== 会員ページ共通ナビ = 左サイドバー =====
   /account /order /checkout /history /news で共有 (mem-nav.js が開閉)。
   PC(>=880px): 左に常時固定。「«」でワンクリック横格納 / 「»」で再表示 (localStorage 永続)。
   スマホ(<880px): 上部バーのハンバーガー → ドロワー + スクリム。
   現在地は .mem-nav__link.is-active で強調。JS が触る ID (#nav-account/#nav-history/#member-bar) は不変。 */
:root{--mem-sb-w:230px;}

/* サイドバー本体 */
.mem-sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--mem-sb-w);z-index:55;
  background:#fff;border-right:1px solid var(--c-line,#e7e0d6);box-shadow:2px 0 10px rgba(26,22,20,.05);
  display:flex;flex-direction:column;gap:6px;padding:16px 12px;overflow-y:auto;
  transform:translateX(0);transition:transform .22s ease;}
.mem-sidebar__brand{font-family:var(--f-display,'Noto Serif JP',serif);font-size:16px;letter-spacing:.06em;
  color:var(--c-red,#8b1a1a);text-decoration:none;font-weight:700;white-space:nowrap;padding:4px 10px 12px;}
.mem-nav{display:flex;flex-direction:column;gap:4px;}
.mem-nav__link{font:600 14px/1.2 'Noto Sans JP',sans-serif;color:var(--c-ink,#1a1614);text-decoration:none;
  padding:11px 13px;border-radius:10px;white-space:nowrap;transition:background .15s,color .15s;}
.mem-nav__link:hover{background:var(--c-ivory,#f8f4ee);color:var(--c-red,#8b1a1a);}
.mem-nav__link.is-active{background:var(--c-red,#8b1a1a);color:#fff;}
/* 本体サイト(rinran.net)への戻り導線 — app 内遷移と区別するため控えめ+区切り線 (2026-07-03 harumi 指摘 §3) */
.mem-nav__link--site{margin-top:6px;padding-top:12px;border-top:1px solid var(--c-line,#e7e0d6);
  border-radius:0 0 10px 10px;font-weight:500;font-size:13px;color:#6f665d;}
.mem-nav__link.is-active:hover{background:var(--c-red-deep,#9c2c25);color:#fff;}
.mem-sidebar__bar{margin-top:auto;padding:12px 10px 4px;border-top:1px solid var(--c-line,#e7e0d6);
  font-size:12.5px;min-height:20px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;}

/* トグル類 */
.mem-burger{appearance:none;border:1px solid var(--c-line,#e7e0d6);background:#fff;cursor:pointer;
  width:40px;height:40px;border-radius:9px;font-size:18px;line-height:1;color:var(--c-ink,#1a1614);}
.mem-topbar{display:none;position:sticky;top:0;z-index:40;background:#fff;
  border-bottom:1px solid var(--c-line,#e7e0d6);align-items:center;gap:12px;padding:8px 12px;}
.mem-topbar__brand{font-family:var(--f-display,'Noto Serif JP',serif);font-size:15px;letter-spacing:.05em;
  color:var(--c-red,#8b1a1a);text-decoration:none;font-weight:700;}
.mem-collapse{position:absolute;top:12px;right:10px;appearance:none;border:none;background:transparent;
  cursor:pointer;font-size:18px;line-height:1;color:#9a8f82;padding:4px 7px;border-radius:6px;}
.mem-collapse:hover{background:var(--c-ivory,#f8f4ee);color:var(--c-red,#8b1a1a);}
.mem-reopen{display:none;position:fixed;top:14px;left:0;z-index:56;appearance:none;
  border:1px solid var(--c-line,#e7e0d6);border-left:none;background:#fff;cursor:pointer;
  padding:9px 11px;border-radius:0 9px 9px 0;font-size:16px;color:var(--c-red,#8b1a1a);
  box-shadow:2px 2px 8px rgba(0,0,0,.07);}
.mem-scrim{display:none;position:fixed;inset:0;z-index:50;background:rgba(26,22,20,.4);}

/* PC: 常時固定 + ワンクリック格納 */
@media(min-width:880px){
  body{padding-left:var(--mem-sb-w);transition:padding-left .22s ease;}
  .mem-topbar,.mem-burger{display:none;}
  .mem-collapse{display:block;}
  body.mem-nav-collapsed{padding-left:0;}
  body.mem-nav-collapsed .mem-sidebar{transform:translateX(-100%);}
  body.mem-nav-collapsed .mem-reopen{display:block;}
}

/* スマホ: ハンバーガー → ドロワー */
@media(max-width:879.98px){
  .mem-topbar{display:flex;}
  .mem-collapse{display:none;}
  .mem-sidebar{transform:translateX(-100%);box-shadow:none;}
  body.mem-nav-open .mem-sidebar{transform:translateX(0);box-shadow:2px 0 16px rgba(0,0,0,.18);}
  body.mem-nav-open .mem-scrim{display:block;}
}

/* ===== checkout: 保存した基本情報を反映するボタン (会員のみ・再注文の入力やり直し対策) ===== */
.co-prefill{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;
  padding:11px 13px;background:#faf6ef;border:1px solid #e5dccb;border-radius:8px;}
.co-prefill__btn{appearance:none;cursor:pointer;border:1px solid var(--c-red,#8b1a1a);
  background:var(--c-red,#8b1a1a);color:#fff;font:700 13.5px/1 'Noto Sans JP',sans-serif;
  padding:10px 16px;border-radius:8px;white-space:nowrap;transition:background .15s;}
.co-prefill__btn:hover{background:var(--c-red-deep,#9c2c25);}
.co-prefill__hint{font-size:12px;color:#6f665d;line-height:1.6;flex:1 1 220px;}

/* ===== 客側共通フッター (法令リンク + 本体サイト導線) =====
   order/checkout/login/account/history/news の6ページ共通 (2026-07-03 harumi 指摘)。
   情報セキュリティ基本方針の正本は本体HP側 security-policy.html — app 正本化は未決ゆえ外部リンク。 */
.mem-footer{margin-top:48px;padding:22px 18px 26px;background:var(--c-ivory,#f8f4ee);
  border-top:1px solid var(--c-line,#e7e0d6);text-align:center;}
.mem-footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin:0 auto 10px;max-width:720px;}
.mem-footer__links a{font-size:12px;color:#6f665d;text-decoration:underline;text-underline-offset:3px;}
.mem-footer__links a:hover{color:var(--c-red,#8b1a1a);}
.mem-footer__site{margin:0 0 6px;font-size:12.5px;}
.mem-footer__site a{color:var(--c-red,#8b1a1a);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.mem-footer__copy{margin:0;font-size:11px;color:#9a8f82;}

/* ===== メニュー ヒーローを約3割縮小 =====
   .bento-hero のスタイルは menu-render.js が runtime 注入する (= sync_menu 上書き対象ゆえ
   そちらは触らない)。注入 <style> は members.css link より後ろに入るので、`body .bento-hero`
   と1段詳細にして上書きする。寸法は menu-render.js の元値の約0.7倍。 */
body .bento-hero{padding:clamp(39px,4.9vw,67px) 0 clamp(22px,2.8vw,34px);}
body .bento-hero h1{font-size:clamp(20px,2.8vw,28px);margin:8px 0 13px;}
body .bento-hero p{font-size:13px;line-height:1.85;}
body .bento-hero .plan-badge{margin-bottom:6px;}
body .bento-hero__termslink{margin-top:10px;}

/* ===== 2026-07-04 スマホ監査 優先2 ===== */
/* /order 絞り込みバー: menu-render.js 注入の .filter-bar (sticky top:0 z-30) は
   親 #menu-filter の高さ=自身のため sticky が効かず、スクロール中は mem-topbar (z-40 高57px) の
   裏に隠れてタップ不能。ラッパー #menu-filter 側を topbar 直下に sticky 化して解消。
   menu-render.js は sync_menu 上書き対象のため触らない。 */
@media(max-width:879px){
  #menu-filter{position:sticky;top:57px;z-index:30;}
  /* iOS フォーカス自動ズーム根治: 16px 未満の入力系を一括底上げ。
     cart.js / menu-render.js の注入 <style> は本ファイルより後に head へ入るため !important 必須 */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px !important;}
  /* 会員バッジ (◆会員ログイン中 会社名/メール): nowrap だと長い名義でドロワー内横スクロール → 折返し許可 */
  .member-badge{white-space:normal;word-break:break-all;}
  /* 数量ステッパー/カート操作のタップターゲット 44px 底上げ (2026-07-04 監査 中)。
     .qa-* / .cart-* / .btn-addcart は menu-render.js / cart.js の注入 <style> 定義 (sync 対象ゆえ触らない)
     → 本ファイルより後に評価されるため !important で上書き */
  .qa-step,.cart-step{width:42px !important;height:44px !important;}
  .qa-qty,.cart-qty{height:44px !important;}
  .btn-addcart{height:44px !important;}
  .cart-line__del{padding:12px 4px !important;}
}

/* ===== 入力形式エラーの可視化 =====
   .fmt-invalid は validators.js が郵便/電話の形式エラー時に付与するが CSS 定義がどこにも無かった
   (2026-07-04 監査 低)。site.css の .form-group input[type=…] (0,2,1) と :focus に勝つため !important。 */
.fmt-invalid{border-color:#b02a20 !important;background:#fdf6f6 !important;}