/* =========================================================
   fudosha.net /assets/css/benly.css

   - Hero: /about/ の hero に寄せる
     - overlayはgrid上でin-flow（absolute禁止）
     - PC: 左=説明 / 右=立ち絵 を固定（grid-row明示）
     - 文字は黒 + 白フチ（text-shadow）
     - 説明は /about/ の about-table 相当（破線で区切れる）
   - A: PC=7枚 / SP=1枚カード+左右
   - B: 横スクロール確実化 + 左端の年号が読める padding
   - 初期状態（A未選択）も data-driven（lineage.json の isInit）
   ========================================================= */

.benly{
  color: var(--text, #1c2233);
  margin-top: clamp(10px, 2.0vw, 18px);
  margin-bottom: clamp(16px, 2.6vw, 26px);

  /* /about/相当のトークン */
  --benly-ink: #1c2233;
  --benly-hover: #f08a2a;

  --benly-gap: clamp(.6rem, 2.2vw, .95rem);
  --benly-pad-y: clamp(.6rem, 2.4vw, 1.1rem);
  --benly-pad-x: clamp(.8rem, 2.4vw, 1.75rem);

  --benly-sep: rgba(15, 18, 28, 0.35);
  --benly-hero-gap: clamp(0rem, 1.2vw, 0rem);

  --benly-ribbon-bg: rgba(0,0,0,.92);
  --benly-ribbon-ink: #fff;
  --benly-ribbon-fs: clamp(.75rem, 1.2vw, .9rem);

  /* hero veil 色（alphaは --hero-veil-pc/sp） */
  --benly-hero-veil-color: rgba(245,245,245,1);

  /* HERO text outline（黒文字 + 白フチ） */
  --hero-sp-text: rgba(15, 18, 28, 0.92);
  --hero-sp-outline: rgba(255,255,255,.96);
  --hero-sp-outline-w: calc(1px * var(--pc-ui-scale, 1));

  --hero-pc-text: rgba(15, 18, 28, 0.92);
  --hero-pc-outline: rgba(255,255,255,.94);
  --hero-pc-outline-w: calc(1px * var(--pc-ui-scale, 1));

  /* Table font size */
  --benly-row-fs-pc: clamp(.9rem, 1.05vw, 1rem);
  --benly-row-fs-sp: clamp(0.75rem, 3.6vw, .9rem);

  /* タイムラインの左右余白（年号の視認性改善） */
  --benly-timeline-pad-l: calc(28px * var(--pc-ui-scale, 1));
  --benly-timeline-pad-r: calc(18px * var(--pc-ui-scale, 1));

  /* Aカードサイズ（PCは横並び、SPはピッカー1枚） */
  --benly-a-card-w: clamp(calc(320px * var(--pc-ui-scale, 1)), 30vw, calc(460px * var(--pc-ui-scale, 1)));
  --benly-a-card-h: clamp(calc(120px * var(--pc-ui-scale, 1)), 12vw, calc(150px * var(--pc-ui-scale, 1)));
}

.benly,
.benly *{ box-sizing: border-box; }

.benly [hidden]{ display:none !important; }

/* =========================================================
   HERO
   ========================================================= */

.benly-hero{ padding: 0; }

.benly-hero{
  --hero-bg-pos-pc: left bottom;
  --hero-bg-pos-sp: center bottom;

  /* 背景は基本「全体に展開」。必要なら inline で contain 等に戻せる */
  --hero-bg-fit-pc: cover;
  --hero-bg-fit-sp: cover;

  --hero-veil-pc: .80;
  --hero-veil-sp: .80;

  --hero-stand-ar: 1 / 1.25;
}

/*
  Hero overlay policy (2026-03):
  - PC: 背景の上に「説明（左） + 立ち絵（右）」を同一行で並べる（/about/ と同じ）
  - SP: 下端寄せの縦積み（立ち絵→説明）
  - overlay は grid の stack 上で in-flow（absolute禁止）
*/
.benly-hero-media{
  display: grid;
  grid-template-areas: "stack";
  overflow: hidden;

  background-image: var(--hero-bg-pc, var(--hero-bg-sp));
  background-repeat: no-repeat;
  background-size: var(--hero-bg-fit-pc, cover);
  background-position: var(--hero-bg-pos-pc, center bottom);
  background-color: var(--bg);

  min-height: clamp(32rem, 68vw, 72dvh);
}

.benly-hero-overlay{
  grid-area: stack;
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--benly-gap);
  align-items: end;

  padding: var(--benly-pad-y) var(--benly-pad-x);
  padding-bottom: max(var(--benly-pad-y), env(safe-area-inset-bottom));
}

/* PC: DOM順に依存しないで「説明=左 / 立ち絵=右」に固定 */
@media (min-width: 768px){
  .benly-hero-copy{
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .benly-hero-fig{
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-content: flex-end;
  }
}

.benly-hero-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--benly-hero-veil-color);
  opacity: var(--hero-veil-pc);
  pointer-events:none;
  z-index: 0;
}

.benly-hero-overlay > *{
  position: relative;
  z-index: 1;
}

/* PC/SP 共通：立ち絵は右寄せ、説明は読みやすい幅で */
.benly-hero-fig{ align-self: flex-end; }
.benly-hero-copy{
  /* align-self はPC/SPで分ける（ここでは指定しない） */
  max-width: 42rem;
  min-width: 0;
}

.benly-hero-fig{
  margin: 0;
  display: flex;
  min-width: 0;
}

.benly-hero-fig::before{
  content:"";
  display:block;

  width: min(var(--hero-stand-pc-w, 20rem), 100%);
  aspect-ratio: var(--hero-stand-ar);

  background-image: var(--hero-stand-pc, var(--hero-stand-sp));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;

  filter: drop-shadow(0 10px 24px rgba(0,0,0,.25));
}

/* role ribbon */
.benly-role{
  display:inline-flex;
  align-items:center;
  margin: 0 0 .55em;
  padding: .35em .75em;
  background: var(--benly-ribbon-bg);
  color: var(--benly-ribbon-ink);
  font-size: var(--benly-ribbon-fs);
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height: 1;
}

.benly-title{
  margin: 0 0 .55rem;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.05;
  font-size: clamp(1.75rem, 3.4vw, 3.0rem);
}

.benly-lead{
  margin: 0 0 .4rem;
  opacity: .92;
  line-height: 1.65;
  font-size: clamp(13px, 1.7vw, 15px);
}

/* /about/の about-table 相当 */
.benly-table{ margin: 0; padding: 0; }

.benly-row{
  display:grid;
  grid-template-columns: calc(140px * var(--pc-ui-scale, 1)) minmax(0, 1fr);
  gap: calc(16px * var(--pc-ui-scale, 1));
  padding: .6rem 0;
  border-top: 2px dashed rgba(28,34,51,.35);
}

.benly-row dt,
.benly-row dd{
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: var(--benly-row-fs-pc);
}

.benly-row dt{
  margin: 0;
  font-weight: 900;
  letter-spacing: .06em;
  /* center within the DT cell (both axes) */
  align-self: center;
  text-align: center;
}

.benly-row dd{
  margin: 0;
  line-height: 1.65;
}

@media (max-width: 767px){
  .benly-hero-media{
    background-image: var(--hero-bg-sp, var(--hero-bg-pc));
    background-size: var(--hero-bg-fit-sp, cover);
    background-position: var(--hero-bg-pos-sp, center bottom);
    min-height: clamp(22rem, 110vw, 40rem);
  }

  /* SP: 下端寄せの縦積み（立ち絵 → 説明） */
  .benly-hero-overlay{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .35rem;
  }

  /* SP: overlayの基本構造はPCと同じ（bottom-aligned stack） */
  .benly-hero-overlay{ gap: .35rem; }

  .benly-hero-overlay::before{ opacity: var(--hero-veil-sp); }

  /* SP: 立ち絵をタイトルの上に明示固定（XYで上） */
  .benly-hero-fig{
    order: 1;
    align-self: flex-start;
    justify-content: flex-start;
    margin: 0 0 .25rem;
  }

  .benly-hero-copy{
    order: 2;
    align-self: flex-start; /* SPは左寄せ */
    width: 100%;
    max-width: none;
  }

  .benly-hero-fig::before{
    /* SPで見えやすいよう少し大きめ。変数があればそれを優先 */
    width: min(var(--hero-stand-sp-w, 13rem), 72vw);
    background-position: left bottom;
  }

  .benly-row{
    grid-template-columns: 6.5em minmax(0, 1fr);
    gap: .8rem;
  }

  .benly-row dt,
  .benly-row dd{
    font-size: var(--benly-row-fs-sp);
  }
}

/* PC hero 文字：黒 + 白フチ（text-shadow） */
@media (min-width: 768px){
  /* PC: 説明ブロックを左側に寄せる */
  .benly-hero-copy :is(.benly-title, .benly-lead, .benly-row dt, .benly-row dd){
    color: var(--hero-pc-text);
    text-shadow:
      var(--hero-pc-outline-w) 0 0 var(--hero-pc-outline),
      calc(var(--hero-pc-outline-w) * -1) 0 0 var(--hero-pc-outline),
      0 var(--hero-pc-outline-w) 0 var(--hero-pc-outline),
      0 calc(var(--hero-pc-outline-w) * -1) 0 var(--hero-pc-outline),
      var(--hero-pc-outline-w) var(--hero-pc-outline-w) 0 var(--hero-pc-outline),
      calc(var(--hero-pc-outline-w) * -1) var(--hero-pc-outline-w) 0 var(--hero-pc-outline),
      var(--hero-pc-outline-w) calc(var(--hero-pc-outline-w) * -1) 0 var(--hero-pc-outline),
      calc(var(--hero-pc-outline-w) * -1) calc(var(--hero-pc-outline-w) * -1) 0 var(--hero-pc-outline);
  }

  /* ribbonだけはフチなし */
  .benly-role{ text-shadow: none; }
}

@media (max-width: 767px){
  .benly-hero-copy :is(.benly-title, .benly-lead, .benly-row dt, .benly-row dd){
    color: var(--hero-sp-text);
    text-shadow:
      var(--hero-sp-outline-w) 0 0 var(--hero-sp-outline),
      calc(var(--hero-sp-outline-w) * -1) 0 0 var(--hero-sp-outline),
      0 var(--hero-sp-outline-w) 0 var(--hero-sp-outline),
      0 calc(var(--hero-sp-outline-w) * -1) 0 var(--hero-sp-outline),
      var(--hero-sp-outline-w) var(--hero-sp-outline-w) 0 var(--hero-sp-outline),
      calc(var(--hero-sp-outline-w) * -1) var(--hero-sp-outline-w) 0 var(--hero-sp-outline),
      var(--hero-sp-outline-w) calc(var(--hero-sp-outline-w) * -1) 0 var(--hero-sp-outline),
      calc(var(--hero-sp-outline-w) * -1) calc(var(--hero-sp-outline-w) * -1) 0 var(--hero-sp-outline);
  }

  .benly-role{ text-shadow: none; }
}

/* hero と blocks の間：/about/と同じダッシュ線 */
.benly-hero-sep{
  border: 0;
  border-top: 2px dashed var(--benly-sep);
  margin: var(--benly-hero-gap) 0 var(--benly-hero-gap);
}



/* =========================================================
   PC hero gap fix (2026-03)
   - /benly/ だけ subheader下に大きな余白に見える問題の本体は、
     「margin」ではなく benly-hero-media の高さ設計。
   - 現在は min-height が viewport基準(68vw)で、ページ全体縮小時(--bgw<100%)に
     背景画像(contain+bottom)より箱の高さだけが過剰になり、上側に余白が出る。
   - PCは背景画像比に合わせて aspect-ratio で箱高を決める。
   ========================================================= */
@media (min-width: 768px){
  .benly-hero-media{
    min-height: 0;
    aspect-ratio: 3141 / 2057; /* /benly/hero-bg.png */
  }
}

/* =========================================================
   A (PC cards)
   ========================================================= */

.benly-lineage-cards{
  /* JSの center計算で基準を安定化（offsetParent をこの要素に寄せる保険） */
  position: relative;

  /* PCは「全部並べて、入る分だけ見える」= 横スクロール列
     7枚全部を潰して並べるのは破綻するので、カード幅を確保する */
  --benly-a-card-w: clamp(320px, 30vw, 460px);
  --benly-a-card-h: clamp(120px, 12vw, 150px);

  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: clamp(10px, 1.6vw, 14px);
  /* 端のカードも“中央スナップ”できるよう左右に余白を持たせる */
  padding-inline: max(8px, calc((100% - var(--benly-a-card-w)) / 2));
  padding-block: 0;
  margin: 0;
  scroll-padding-inline: max(8px, calc((100% - var(--benly-a-card-w)) / 2));

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;

  scroll-snap-type: x mandatory;

}

.benly-lineage-cards{
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.benly-lineage-cards::-webkit-scrollbar{
  height: 0;
}

.benly-card{
  position: relative;
  overflow: hidden;

  border-radius: 18px;
  border: 1px solid rgba(28,34,51,.18);
  background: rgba(255,255,255,.60);
  box-shadow: 0 10px 26px rgba(0,0,0,.14);

  /* 横列用 */
  flex: 0 0 var(--benly-a-card-w);
  height: var(--benly-a-card-h);
  padding: 0;
  cursor: pointer;
  user-select: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  min-width: 0;
  text-align: left;

  scroll-snap-align: center;
}

.benly-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
  border-color: rgba(240,138,42,.55);
}

.benly-card[aria-selected="true"]{
  /* outline は overflow によって切れやすいので、内側リングで表現する */
  outline: none;
  border-color: rgba(240,138,42,.75);
  box-shadow:
    0 14px 32px rgba(0,0,0,.18),
    inset 0 0 0 2px rgba(240,138,42,.82);
}

/* 背景アイコン（カード全面） */
.benly-card-bg{
  position: absolute;
  /* 1px内側に入れて、画像がカード枠からにじんで見えるのを防ぐ */
  inset: 1px;
  border-radius: calc(18px - 1px);
  overflow: hidden;
}

.benly-card-bg img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

/* テキストは上に乗せる */
.benly-card-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  pointer-events: none;
}

/* title + years: 黒帯（白文字） */
.benly-card-band{
  /* band should wrap text, not full width */
  align-self: flex-start;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin: 10px 0 0 12px;
  max-width: calc(100% - 24px);

  padding: 10px 12px 9px;
  background: rgba(0,0,0,.86);
  color: #fff;
  border-radius: 14px;
  overflow: hidden;
}
.benly-card-title{
  font-weight: 800;
  color: inherit;
  letter-spacing: .03em;
  font-size: 16px;
  margin: 0;
  line-height: 1.12;
}

.benly-card-years{
  color: inherit;
  margin: 2px 0 0;
  font-size: 13px;
  opacity: .82;
}

.benly-card-tagline{
  margin: 0 0 12px 12px;
  max-width: calc(100% - 24px);
  font-size: 13px;
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(28,34,51,.12);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   A (SP picker)
   ========================================================= */

.benly-lineage-picker{
  /* same row: prev button + center (SP=single / PC=multi) + next button */
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  margin: 6px 0 6px;
}

.benly-pick-center{
  min-width: 0;
  display: flex;
  align-items: center;
}
.benly-pick-slot{
  display: none;
  min-width: 0;
  /* IMPORTANT (SP): slot must take available width inside flex, or the card collapses to ~0px */
  flex: 1 1 auto;
  width: 100%;
}

/* SP picker slotの中のカードは幅100%で表示 */
.benly-pick-slot .benly-card{
  width: 100%;
  flex: none;
}


.benly-pick-nav{
  width: 44px;
  border-radius: 14px;
  border: 1px solid rgba(28,34,51,.18);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  font-size: 24px;
  line-height: 1;
  height: var(--benly-a-card-h);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.benly-pick-nav:active{ transform: translateY(1px); }

@media (min-width: 768px){
  .benly-lineage-picker{
    grid-template-columns: clamp(52px, 5.6vw, 76px) minmax(0, 1fr) clamp(52px, 5.6vw, 76px);
    gap: 12px;
  }

  .benly-pick-nav{
    width: 100%;
    height: var(--benly-a-card-h);
    border-radius: 22px;
    font-size: 32px;
  }
}


.benly-pick-hint{
  display: none;
  margin-top: 8px;
  font-size: 12px;
  opacity: .68;
}

@media (max-width: 767px){
  .benly{ --benly-a-card-h: clamp(132px, 34vw, 180px); }

  .benly-lineage-cards{ display: none; }
  .benly-pick-slot{ display: block; }
  .benly-lineage-picker{
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }
  .benly-pick-hint{ display: block; }
}

/* =========================================================
   Separators
   ========================================================= */

.benly-sep{
  border: 0;
  height: 1px;
  margin: 10px 0 14px;
  background: linear-gradient(to right,
    rgba(28,34,51,0),
    rgba(28,34,51,.35),
    rgba(28,34,51,0)
  );
}

/* =========================================================
   B + C layout
   ========================================================= */

.benly-bc{
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr);
  gap: clamp(12px, 2.0vw, 18px);
  align-items: start;
  max-width: 100%;
}

.benly-b,
.benly-c{ min-width: 0; }

@media (max-width: 980px){
  .benly-bc{ grid-template-columns: 1fr; }
}

/* =========================================================
   B timeline
   ========================================================= */

.benly-timeline-wrap{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(28,34,51,.16);
  background: rgba(255,255,255,.76);
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
  max-width: 100%;
  min-width: 0;
}

.benly-timeline-head{
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(28,34,51,.12);
}

.benly-timeline-title{
  margin: 0;
  font-size: 16px;
  letter-spacing: .02em;
}

.benly-timeline-meta{
  margin-top: 4px;
  font-size: 12px;
  opacity: .76;
}

/* 横スクロール（左端年号の視認性） */
.benly-timeline-scroll{
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;

  padding: 14px var(--benly-timeline-pad-r) 12px var(--benly-timeline-pad-l);
  max-width: 100%;
}

.benly-timeline{
  position: relative;
  width: calc(720px * var(--pc-ui-scale, 1)); /* JSが上書き */
  max-width: none;
}

.benly-axis{
  position: relative;
  height: 30px;
  margin-bottom: 8px;
}

.benly-axis-line{
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;
  height: 2px;
  background: rgba(28,34,51,.25);
}

.benly-tick{
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 12px;
  opacity: .75;
}

.benly-tick::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 16px;
  width: 2px;
  height: 10px;
  background: rgba(28,34,51,.28);
}

.benly-lanes{
  display: grid;
  gap: 10px;
}

.benly-lane{
  position: relative;
  height: 56px;
  border-radius: 14px;
  background: rgba(28,34,51,.05);
  border: 1px solid rgba(28,34,51,.10);
}

.benly-node{
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(28,34,51,.16);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, opacity .14s ease;
}

.benly-node:hover{
  transform: translate(-50%, -54%);
  border-color: rgba(240,138,42,.55);
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
}

.benly-node[aria-current="true"]{
  outline: 2px solid rgba(240,138,42,.75);
  outline-offset: 2px;
}

.benly-node small{
  display: block;
  font-size: 11px;
  opacity: .72;
  margin-top: 2px;
}

/* init用など：クリック不可 */
.benly-node.is-disabled{
  cursor: default;
  pointer-events: none;
  opacity: .78;
}

.benly-node.is-disabled:hover{
  transform: translate(-50%, -50%);
  border-color: rgba(28,34,51,.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Cあり（summaries.jsonが存在）: 小さい印を付ける */
.benly-node.is-hasC{
  border-color: rgba(240,138,42,.58);
  background: rgba(255,255,255,.98);
}

.benly-node.is-hasC::after{
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(240,138,42,.90);
}

/* Cなし: 少しだけ落とす（選択はできる） */
.benly-node.is-noC{
  opacity: .86;
}

/* =========================================================
   C panel
   ========================================================= */

.benly-panel{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(28,34,51,.16);
  background: rgba(255,255,255,.76);
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
  max-width: 100%;
}

.benly-panel-head{
  padding: 14px 16px 14px;
  border-bottom: 1px solid rgba(28,34,51,.12);
}

.benly-panel-title{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* 空表示（Cなし）: 何も出さない（枠は残る） */
.benly-panel.is-no-title .benly-panel-head{ display:none; }
.benly-panel.is-no-image .benly-panel-fig{ display:none; }
.benly-panel.is-no-bullets .benly-panel-bullets{ display:none; }

.benly-panel-fig{
  margin: 0;
  padding: 12px 16px;
}

.benly-panel-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(28,34,51,.12);
  background: rgba(28,34,51,.05);
}

.benly-panel-bullets{
  margin: 0;
  padding: 0 20px 14px 34px;
  line-height: 1.65;
}

.benly-panel-foot{
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(28,34,51,.12);
}

.benly-panel-btn{
  display: inline-flex;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(28,34,51,.18);
  background: rgba(28,34,51,.06);
  color: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* =========================================================
   Overlay
   ========================================================= */

.benly-ov{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.benly-ov-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.benly-ov-dialog{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(980px, calc(100vw - 28px));
  max-height: min(86vh, 820px);
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(28,34,51,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.benly-ov-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(28,34,51,.12);
}

.benly-ov-title{ font-weight: 800; }

.benly-ov-close{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(28,34,51,.18);
  background: rgba(28,34,51,.06);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.benly-ov-body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
}

body.benly-ov-open{ overflow: hidden; }