/* ============================================================
   ゲート（資料の閲覧ポップアップ／動画プレイヤー／ログイン案内）
   ＋ 資料一覧・動画ライブラリのカード
   ============================================================ */

/* ---------- モーダル ---------- */
body.is-modal-open{ overflow:hidden; }

.amica-modal{ position:fixed; inset:0; z-index:4000; display:flex; align-items:center; justify-content:center; padding:24px; }
/* display 指定より [hidden] を優先させる（ビューア／プレイヤー／ログイン案内の出し分け） */
.amica-modal[hidden], .amica-modal [hidden]{ display:none !important; }
.amica-modal__back{ position:absolute; inset:0; background:rgba(12,14,12,.72); backdrop-filter:blur(2px); }
.amica-modal__panel{
  position:relative; z-index:1; width:min(1000px, 100%); max-height:92vh; display:flex; flex-direction:column;
  background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.4);
}
.amica-modal__head{
  display:flex; align-items:center; gap:16px; padding:16px 20px;
  border-bottom:1px solid var(--line); background:#fff;
}
.amica-modal__title{ margin:0; flex:1; font-weight:700; font-size:1rem; color:var(--ink); line-height:1.5; }
.amica-modal__close{
  flex:none; width:36px; height:36px; border:0; border-radius:8px; background:var(--gray-100);
  font-size:1.4rem; line-height:1; color:var(--gray-600); cursor:pointer; transition:var(--tr);
}
.amica-modal__close:hover{ background:var(--gray-200,#e6e6e6); color:var(--ink); }
.amica-modal__body{ flex:1; min-height:0; display:flex; background:var(--gray-100); }
.amica-modal__frame{ width:100%; height:min(76vh, 900px); border:0; background:#fff; }
.amica-modal__video{ width:100%; max-height:76vh; background:#000; display:block; margin:auto; }
/* 縦型ショート動画（9:16）はパネルごと細くして黒帯を出さない */
.amica-modal.is-video .amica-modal__panel{ width:min(440px, 100%); }
.amica-modal.is-video .amica-modal__body{ background:#000; }
.amica-modal__foot{ padding:14px 20px; border-top:1px solid var(--line); background:#fff; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

/* ログイン案内 */
.amica-modal__lock{ padding:46px 32px 42px; text-align:center; margin:auto; max-width:560px; }
.amica-modal__lock-ic{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:#fff; box-shadow:var(--shadow-sm);
}
.amica-modal__lock-ic .ic{ width:24px; height:24px; color:var(--navy); }
.amica-modal__lock-lead{ margin:0 0 10px; font-size:1.06rem; font-weight:700; color:var(--ink); line-height:1.6; }
.amica-modal__lock-sub{ margin:0 0 24px; font-size:.86rem; color:var(--gray-600); line-height:1.85; }
.amica-modal__lock-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

@media(max-width:640px){
  .amica-modal{ padding:0; }
  .amica-modal__panel{ width:100%; max-height:100vh; height:100vh; border-radius:0; }
  .amica-modal__frame{ height:auto; flex:1; }
  .amica-modal__lock{ padding:36px 22px; }
  .amica-modal__foot{ padding-bottom:calc(14px + env(safe-area-inset-bottom)); }
}
/* iOS Safari の 100vh はツールバーを畳んだ高さのため、ツールバー表示中はパネル下端
   （.amica-modal__foot の操作列）がツールバーの裏に入る。dvh はツールバーに追従する。
   非対応ブラウザは上の 100vh のまま。 */
@supports (height:100dvh){
  @media(max-width:640px){
    .amica-modal__panel{ max-height:100dvh; height:100dvh; }
  }
}

/* ---------- 資料カード（一覧は誰でも見える／操作でゲート） ---------- */
.doc-card--gated{ cursor:default; }
.doc-actions{ margin-top:14px; display:flex; gap:8px; }
.doc-actions .doc-act{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 10px; border-radius:8px; font-size:.8rem; font-weight:700; transition:var(--tr); cursor:pointer;
}
.doc-act--view{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.doc-act--view:hover{ border-color:var(--navy); color:var(--navy); }
.doc-act--dl{ background:var(--navy); color:#fff; border:1px solid var(--navy); }
.doc-act--dl:hover{ background:var(--charcoal); border-color:var(--charcoal); color:#fff; }
.doc-actions .ic{ width:15px; height:15px; }

/* 鍵バッジ */
.doc-lock{
  position:absolute; right:10px; top:10px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px; border-radius:99px; background:rgba(17,20,17,.72); color:#fff;
  font-size:.66rem; font-weight:700; letter-spacing:.04em;
}
.doc-lock .ic{ width:11px; height:11px; }

/* ---------- 動画ライブラリ ---------- */
.vid-filter{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
.vid-filter button{
  padding:9px 18px; border-radius:99px; border:1px solid var(--line); background:#fff;
  font-size:.83rem; font-weight:700; color:var(--gray-600); cursor:pointer; transition:var(--tr);
}
.vid-filter button:hover{ border-color:var(--navy); color:var(--navy); }
.vid-filter button.is-on{ background:var(--navy); border-color:var(--navy); color:#fff; }

.vid-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media(max-width:1000px){ .vid-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:760px){  .vid-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){  .vid-grid{ grid-template-columns:1fr; } }

.vid-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); transition:var(--tr); }
.vid-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.vid-thumb{ position:relative; aspect-ratio:9 / 16; background:#111; overflow:hidden; cursor:pointer; border:0; padding:0; width:100%; display:block; }
.vid-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.vid-card:hover .vid-thumb img{ transform:scale(1.05); }
.vid-thumb::after{
  content:""; position:absolute; left:50%; top:50%; width:52px; height:52px; transform:translate(-50%,-50%);
  border-radius:50%; background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231B1C1A'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 22px;
  box-shadow:0 6px 20px rgba(0,0,0,.3); transition:var(--tr);
}
.vid-thumb:hover::after{ transform:translate(-50%,-50%) scale(1.08); }
/* サムネイル左上：商品名バッジ（＋必要なら用途タグ）を縦に積む */
.vid-tags{ position:absolute; left:10px; top:10px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.vid-product{ padding:4px 9px; border-radius:5px; background:var(--gold); color:#fff; font-size:.64rem; font-weight:700; letter-spacing:.02em; }
.vid-product.blue { background:var(--blue); }
.vid-product.green{ background:var(--green); }
.vid-product.dark { background:var(--navy); }
.vid-badge{ padding:4px 9px; border-radius:5px; background:rgba(17,20,17,.72); color:#fff; font-size:.64rem; font-weight:700; }
.vid-dur{ position:absolute; right:8px; bottom:8px; padding:2px 7px; border-radius:4px; background:rgba(0,0,0,.72); color:#fff; font-size:.68rem; font-variant-numeric:tabular-nums; }
.vid-body{ padding:14px 15px 15px; display:flex; flex-direction:column; flex:1; }
.vid-name{ font-weight:700; font-size:.88rem; line-height:1.55; color:var(--ink); }
.vid-sub{ margin-top:4px; font-size:.72rem; color:var(--gray-500); }
.vid-dl{
  margin-top:12px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 12px; border-radius:8px; border:1px solid var(--line); background:#fff;
  font-size:.78rem; font-weight:700; color:var(--gray-600); transition:var(--tr); cursor:pointer;
}
.vid-dl:hover{ border-color:var(--navy); color:var(--navy); }
.vid-dl .ic{ width:14px; height:14px; }