/* =============================================================
   生地の一覧（fabrics.html）  2026-11-09
   ・カード（.fab）・並べ方（.fgrid）・下の帯（.cartbar）・.chip は style.css のものを使い、ここは足りない分だけ
   ・影・グラデーションは使わない
   ・2026-11-10 UX-17 補助の文字（件数・注記・拡大画面の分類と番号）は、薄い --ink-soft（紙色に対して約3.2:1）をやめて
     --ink-mid（約5.5:1）・14px にした。番号は細い欧文の飾り書体ではなく本文の書体で。見出し（h1・eyebrow）の書体はそのまま
   ============================================================= */
.fl-head{padding-bottom:clamp(14px,2vw,24px);}
.fl-sec{padding:clamp(18px,3vw,34px) 0 clamp(60px,8vw,96px);}
.fl-pats .chip{cursor:pointer;font:inherit;font-size:.8rem;letter-spacing:.06em;color:var(--ink);min-height:40px;}
.fl-pats .chip .n{color:var(--ink-mid);font-size:.9em;}
.fl-pats .chip.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.fl-pats .chip.on .n{color:#fff;}
.fl-count{margin:18px 0 14px;color:var(--ink-mid);font-size:.875rem;letter-spacing:.06em;}
.fl-card{font:inherit;color:inherit;text-align:left;cursor:pointer;padding:0;}
.fl-card .sw img{object-fit:cover;}
.fl-card .bd{padding:10px 12px 12px;}
.fl-card .id{font-family:var(--sans);font-size:.8125rem;letter-spacing:.1em;color:var(--ink-mid);}
body.fl-has-cart .fl-card{scroll-margin-bottom:96px;}
.fl-card{scroll-margin-top:calc(var(--navh) + 12px);}
.fl-note{margin-top:26px;color:var(--ink-mid);font-size:.875rem;line-height:1.9;}
/* UX-05 柄は雰囲気の見本、を選ぶ前に読めるように（小さな注意書きだけにしない） */
.fl-sample{margin:18px 0 0;padding:14px 18px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--paper-2);border-radius:2px;max-width:46em;}
.fl-sample p{margin:0;font-size:.875rem;line-height:1.9;color:var(--ink);letter-spacing:.04em;}
.fl-sample .fl-sample-h{font-family:var(--serif);font-size:1rem;letter-spacing:.12em;color:var(--accent-deep);margin-bottom:.3em;}
.fl-more{margin-top:18px;}
body.fl-has-cart .f{padding-bottom:84px;}

.fl-dlg{border:1px solid var(--line);padding:0;width:min(92vw,560px);max-height:92vh;background:var(--paper);color:var(--ink);}
.fl-dlg::backdrop{background:rgba(61,52,45,.55);}
.fl-dlg-x{position:absolute;right:6px;top:6px;margin:0;z-index:1;}
.fl-dlg-x button{width:44px;height:44px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:1.3rem;cursor:pointer;border-radius:2px;}
.fl-dlg-img{position:relative;aspect-ratio:1/1;max-height:56vh;margin:0 auto;background:#fff;touch-action:pan-y;}
.fl-dlg-img img{width:100%;height:100%;object-fit:cover;display:block;}
.fl-dlg-bd{padding:16px 20px 20px;}
.fl-dlg-pat{font-size:.875rem;letter-spacing:.12em;color:var(--ink-mid);margin:0;display:flex;justify-content:space-between;gap:12px;padding-right:0;}
.fl-dlg-pos{letter-spacing:.08em;white-space:nowrap;}
/* UX-18 前後のボタン（画像の左右のまんなか。閉じるボタンと同じ形） */
.fl-dlg-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;border-radius:2px;padding:0;}
.fl-dlg-nav.prev{left:6px;}
.fl-dlg-nav.next{right:6px;}
.fl-dlg-nav svg{fill:none;stroke:currentColor;stroke-width:1.6;}
.fl-dlg-nav:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.fl-dlg-nav:disabled{opacity:.35;cursor:default;}
.fl-dlg-nav[hidden]{display:none;}
.fl-dlg-nm{font-size:1.1rem;letter-spacing:.08em;margin:.2em 0 0;font-weight:500;}
.fl-dlg-no{font-family:var(--sans);font-size:.875rem;letter-spacing:.1em;color:var(--ink-mid);margin:.3em 0 0;}
.fl-dlg-sample{margin:12px 0 0;padding:10px 12px;background:var(--paper-3);font-size:.875rem;line-height:1.85;color:var(--ink);letter-spacing:.03em;border-radius:2px;}
.fl-dlg-act{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:16px;}
.fl-dlg-act .btn{padding:13px 22px;}
@media(max-width:620px){
  /* スマホでは柄の種類を横に1列で流す（縦に場所を取らないように） */
  .fl-pats{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 8px;scrollbar-width:thin;}
  .fl-pats .chip{flex:none;}
  .fl-dlg-act{flex-direction:column;align-items:stretch;}
  .fl-dlg-act .lnk{align-self:center;}
  .fl-dlg-img{max-height:44vh;}
}