/* =============================================================================
   console.galaxia.works 共通スタイル
   クライアント担当者向け CMS のスタイル定義。
   ============================================================================= */
:root {
  --brand: #2D6A4F;
  --brand-dark: #1B4332;
  --brand-light: #52B788;
  --brand-soft: #D8F3DC;
  --ink: #1F2937;
  --ink-mute: #6B7280;
  --ink-soft: #9CA3AF;
  --bg: #F9FAFB;
  --card: #FFFFFF;
  --border: #E5E7EB;
  --danger: #DC2626;
  --warn: #D97706;
  --ok: #16A34A;
  --info: #2563EB;
}
* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ヘッダー(トップバー＋ドック)を固定し、この領域だけをスクロールさせる。
   → ブラウザのスクロールバーがヘッダーの下から始まる。header.php で開き
   footer.php で閉じる。 */
.app-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---------- トップバー (モックアップ blog-editor.html 準拠) ---------- */
.topbar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 28px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.topbar__left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.topbar__logo { display: inline-flex; align-items: center; height: 34px; flex-shrink: 0; transition: opacity .2s ease; }
.topbar__logo:hover { opacity: .75; }
.topbar__logo img { height: 100%; width: auto; display: block; object-fit: contain; }
/* パンくず: flex で水平揃え。セパレータは spacing を CSS で制御して
   前後のテキストとピッタリ揃うようにする (= スペース文字に頼らない)。 */
.topbar__crumbs {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-soft);
  line-height: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__crumbs-section,
.topbar__crumbs-home {
  color: var(--ink-soft);
}
.topbar__crumbs-home {
  text-decoration: none;
  transition: color .15s ease;
}
.topbar__crumbs-home:hover { color: var(--ink); text-decoration: underline; }
.topbar__crumbs-sep { color: var(--ink-mute); opacity: .6; }
.topbar__crumbs-current { color: var(--ink); font-weight: 600; }
.topbar__right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.topbar__links { display: flex; gap: 2px; }
.topbar__links a {
  font-size: 13px; font-weight: 500; color: var(--ink-mute);
  text-decoration: none; padding: 6px 10px; border-radius: 7px;
}
.topbar__links a:hover { background: var(--bg); color: var(--ink); }
.topbar__links a.is-active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.topbar__user { display: flex; align-items: center; }
.topbar-user { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.topbar-user__info { text-align: right; line-height: 1.35; min-width: 0; }
.topbar-user__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.topbar-user__tenant { color: var(--ink-mute); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.topbar-user__logout { white-space: nowrap; flex-shrink: 0; }

/* ---------- iOS風アプリドック ---------- */
.app-dock {
  flex-shrink: 0;
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
  border-bottom: 1px solid var(--border);
  padding: 16px 28px 20px;
}
.app-dock__inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: flex-start; justify-content: center;
  gap: 20px; flex-wrap: wrap;
}

/* ドック開閉トグル: 下辺中央にぶら下がるラベル付きハンドル */
.app-dock__toggle {
  position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%);
  z-index: 3; display: flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--ink-mute);
  font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 7px rgba(17, 24, 39, .12);
  transition: color .15s, border-color .15s;
}
.app-dock__toggle:hover { color: var(--brand); border-color: var(--brand); }
.app-dock__chev { transition: transform .2s ease; }
/* 折りたたみ時: タイルを隠し、ドックを細いバーにする */
html.dock-collapsed .app-dock { min-height: 28px; padding-top: 5px; padding-bottom: 5px; }
html.dock-collapsed .app-dock__inner { display: none; }
html.dock-collapsed .app-dock__chev { transform: rotate(180deg); }
.app-tile {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 4px; text-decoration: none; color: var(--ink);
  background: transparent; border: none; font-family: inherit;
  position: relative;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
a.app-tile { cursor: pointer; }
a.app-tile:hover { transform: translateY(-3px); }
a.app-tile:active { transform: translateY(0) scale(.94); }
a.app-tile:hover .app-tile__icon { box-shadow: 0 12px 26px var(--tile-shadow, rgba(0,0,0,.15)); }
.app-tile__icon {
  width: 60px; height: 60px; border-radius: 17px;  /* iOSスクワークル風 */
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #fff;
  background: var(--tile-bg, linear-gradient(135deg, #2D6A4F, #245A43));
  box-shadow: 0 6px 16px var(--tile-shadow, rgba(0,0,0,.15));
  position: relative; overflow: hidden;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s;
}
.app-tile__icon::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.app-tile__icon-glyph { position: relative; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.app-tile__label { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.3; max-width: 96px; }
.app-tile__sub { font-size: 10px; color: var(--ink-soft); text-align: center; line-height: 1.3; max-width: 110px; margin-top: -2px; }

/* 選択中タイル */
.app-tile.is-active .app-tile__icon {
  box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--brand), 0 6px 16px var(--tile-shadow, rgba(0,0,0,.15));
}
.app-tile.is-active .app-tile__label { color: var(--brand-dark); }

/* 準備中タイル (未実装) */
.app-tile--soon { cursor: default; }
.app-tile--soon .app-tile__icon { filter: grayscale(1); opacity: .5; }
.app-tile--soon .app-tile__label,
.app-tile--soon .app-tile__sub { opacity: .5; }
.app-tile__badge {
  position: absolute; top: -4px; right: 2px; z-index: 2;
  font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 999px;
  color: #fff; background: #EF4444;
}
.app-tile__badge--soon { background: var(--ink-soft); }
.app-tile__badge--locked { background: #D97706; }   /* 未契約 (テナント機能 OFF) */

/* テナントの features で OFF になっている機能タイル: グレーアウト + 注意マーク */
.app-tile.is-feature-off .app-tile__icon { filter: grayscale(.7); opacity: .55; }
.app-tile.is-feature-off .app-tile__label,
.app-tile.is-feature-off .app-tile__sub  { opacity: .6; }
.app-tile.is-feature-off { cursor: not-allowed; }

/* タイル色テーマ (モックアップ blog-editor.html 準拠) */
.app-tile--dashboard    { --tile-bg: linear-gradient(135deg, #64748B 0%, #1E293B 100%); --tile-shadow: rgba(30,41,59,.42); }
.app-tile--recruit-site { --tile-bg: linear-gradient(135deg, #818CF8 0%, #4F46E5 100%); --tile-shadow: rgba(79,70,229,.42); }
.app-tile--editor    { --tile-bg: linear-gradient(135deg, #FCD34D 0%, #D97706 100%); --tile-shadow: rgba(217,119,6,.42); }
.app-tile--assist    { --tile-bg: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%); --tile-shadow: rgba(124,58,237,.42); }
.app-tile--analytics { --tile-bg: linear-gradient(135deg, #FB923C 0%, #EA580C 100%); --tile-shadow: rgba(234,88,12,.42); }
.app-tile--calendar  { --tile-bg: linear-gradient(135deg, #60A5FA 0%, #2563EB 100%); --tile-shadow: rgba(37,99,235,.42); }
.app-tile--recruit   { --tile-bg: linear-gradient(135deg, #34D399 0%, #2D6A4F 100%); --tile-shadow: rgba(45,106,79,.45); }
.app-tile--report    { --tile-bg: linear-gradient(135deg, #F472B6 0%, #DB2777 100%); --tile-shadow: rgba(219,39,119,.42); }
.app-tile--qr        { --tile-bg: linear-gradient(135deg, #22D3EE 0%, #0891B2 100%); --tile-shadow: rgba(8,145,178,.42); }
.app-tile--library   { --tile-bg: linear-gradient(135deg, #C7894C 0%, #6B4423 100%); --tile-shadow: rgba(107,68,35,.45); }

@media (max-width: 720px) {
  .topbar { padding: 10px 16px; }
  .topbar__crumbs { display: none; }
  .app-dock { padding: 12px 12px 16px; }
  .app-dock__inner { gap: 14px; }
  .app-tile__icon { width: 52px; height: 52px; font-size: 24px; border-radius: 15px; }
  .app-tile__sub { display: none; }
}

/* ---------- スマホ (≤640px) ---------- */
/* iOS のホームに近い体験になるよう、ドックは折り返さず横スクロール (snap)。
   ナビリンクは dock に主要機能を集約済みなので topbar からは省略する。
   ※ 既存の 720px 規則の後段に置き、競合する宣言を上書きする。 */
@media (max-width: 640px) {
  /* トップバー: 余白とロゴを圧縮、補助ナビリンクは隠す */
  .topbar { padding: 8px 12px; gap: 10px; }
  .topbar__left { gap: 10px; }
  .topbar__logo { height: 28px; }
  .topbar__right { gap: 8px; }
  .topbar__links { display: none; }

  /* アプリドック: 横スクロール式 (snap) に切替 */
  .app-dock { padding: 10px 0 16px; }
  .app-dock__inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 14px;
    padding: 4px 16px 0;            /* 上 4px: 選択中タイルの 6px リングが切れないよう */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;          /* Firefox: スクロールバー非表示 */
    -webkit-overflow-scrolling: touch;
  }
  .app-dock__inner::-webkit-scrollbar { display: none; }   /* WebKit: 同上 */
  .app-tile {
    flex: 0 0 auto;
    scroll-snap-align: center;
    min-width: 72px;
  }
  .app-tile__icon { width: 56px; height: 56px; font-size: 26px; border-radius: 16px; }
  .app-tile__label { font-size: 11px; max-width: 76px; }

  /* メイン領域: 左右の余白を詰める */
  .app-main { margin: 14px 0; padding: 0 12px; }
  .app-footer { padding: 20px 14px; }

  /* ページ見出し: タイトル縮小、アクションは横並びのまま下段に回り込ませる */
  .page-head { gap: 10px; margin-bottom: 16px; align-items: stretch; }
  .page-head__eyebrow { font-size: 11px; letter-spacing: .06em; }
  .page-head__title { font-size: 22px; margin: 2px 0 4px; }
  .page-head__desc { font-size: 13px; line-height: 1.55; }
  .page-head__actions { width: 100%; gap: 6px; flex-wrap: wrap; }
  .page-head__actions .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }

  /* KPI カード: 余白とフォントを圧縮 */
  .kpis { gap: 10px; margin-bottom: 16px; }
  .kpi { padding: 14px; border-radius: 10px; }
  .kpi__value { font-size: 26px; }

  /* カード: 余白を圧縮 */
  .card { padding: 14px; margin-bottom: 12px; border-radius: 10px; }
  .card__head { margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }
  .card__title { font-size: 15px; }

  /* ボタン: タッチターゲットを確保 (44px 近辺) */
  .btn { padding: 10px 14px; font-size: 13px; }
  .btn--sm { padding: 8px 12px; font-size: 12px; }

  /* フォーム: iOS Safari の zoom-on-focus を抑止 (input は 16px 以上に保つ) */
  .field { margin-bottom: 14px; }
  .field__input,
  .field__select,
  .field__textarea { font-size: 16px; padding: 11px 12px; }
  .field__label { font-size: 12.5px; }
  .field__hint { font-size: 11.5px; }

  /* テーブル: 折り返し禁止＋親で横スクロールできる場合に備えセル幅を最小化 */
  th, td { padding: 8px 10px; font-size: 12.5px; }
  th { font-size: 10.5px; }

  /* バッジ / アラート / 空状態: 余白を圧縮 */
  .badge { padding: 2px 8px; font-size: 10.5px; }
  .alert { padding: 10px 12px; font-size: 12.5px; margin-bottom: 12px; }
  .empty { padding: 36px 16px; }
  .empty__icon { font-size: 38px; }
  .empty__title { font-size: 14.5px; }
  .empty__desc { font-size: 12.5px; }

  /* ログインカード: 内側余白を圧縮 (max-width:420 はそのまま) */
  .login-card { padding: 28px 22px; border-radius: 14px; }

  /* トップバー右側のユーザー表示: 余白詰め、ユーザー名は隠してテナント名のみ */
  .topbar-user { gap: 6px; }
  .topbar-user__name { display: none; }      /* スマホでは display_name は省略 */
  .topbar-user__tenant { font-size: 12.5px; color: var(--ink); font-weight: 600; max-width: 160px; }
  .topbar-user__logout { padding: 6px 10px; font-size: 11px; }

  /* ---------- テーブル → 縦積みカードに変換 (スマホ) ----------
     スワイプ閲覧を廃し、1行を 1 枚のカードとして表示する。
     - thead は隠し、tbody は block 表示
     - tr は flex のカードに。1番目のセル (タイトル) を全幅で先頭に、
       最後のセル (編集ボタン等) を右寄せに
     対象: 5カラム以下の主要テーブル (.table-scroll でラップしたもの)。
     applicants 一覧 (.ap-list-card) は 7カラムあり、各行が縦長になり過ぎる
     ためカード化せず横スワイプを維持する (applicants/page.css 側で対応)。 */
  .table-scroll { overflow: visible; margin: 0;
    padding: 0; background: transparent; border: none; }
  .table-scroll > table { min-width: 0; }
  .table-scroll thead { display: none; }
  .table-scroll tbody { display: block; }
  .table-scroll tr {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px 10px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 8px;
  }
  .table-scroll tr:hover td { background: transparent; }
  .table-scroll td {
    display: block; border-bottom: none; padding: 0;
    font-size: 12.5px;
  }
  .table-scroll th { display: none; }
  /* 1番目のセル (タイトル) は全幅で行頭に置く */
  .table-scroll td:first-child {
    flex: 1 1 100%; font-size: 14px; line-height: 1.4;
  }
  /* 最後のセル (編集ボタン等) は行末に右寄せ */
  .table-scroll td:last-child {
    margin-left: auto;
  }
}

/* ---------- メイン ---------- */
.app-main { max-width: 1400px; margin: 24px auto; padding: 0 24px; }
.app-footer { padding: 32px 24px; text-align: center; color: var(--ink-soft); font-size: 12px; }

.page-head { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head__eyebrow {
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.page-head__title { font-size: 28px; font-weight: 800; margin: 4px 0 6px; }
.page-head__desc { color: var(--ink-mute); font-size: 14px; margin: 0; }
.page-head__actions { display: flex; gap: 8px; }

/* ---------- KPI ---------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}
.kpi__label { color: var(--ink-mute); font-size: 12px; margin-bottom: 6px; }
.kpi__value { font-size: 32px; font-weight: 800; font-family: 'Inter', sans-serif; }
.kpi__sub { color: var(--ink-soft); font-size: 11px; margin-top: 4px; }
.kpi--alert .kpi__value { color: var(--warn); }
.kpi--ok    .kpi__value { color: var(--ok); }
.kpi--info  .kpi__value { color: var(--info); }

/* ---------- カード ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.card__title { font-size: 16px; font-weight: 700; margin: 0; }

/* ---------- テーブル ---------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--border); vertical-align: top; }
th {
  background: var(--bg);
  font-weight: 700;
  color: var(--ink-mute);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
tr:hover td { background: #FAFAFA; }
table a { color: var(--brand-dark); text-decoration: none; font-weight: 600; }
table a:hover { text-decoration: underline; }

/* table を横スクロール可にする汎用ラッパ。狭い画面でも全列に届くよう min-width で
   テーブルを潰さない (overflow-x:auto の親内でスワイプ閲覧)。 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }
.table-scroll > table { width: 100%; }

/* ---------- バッジ ---------- */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
}
.badge--draft     { background: #FEF3C7; color: #92400E; }
.badge--published { background: #D1FAE5; color: #065F46; }
.badge--archived  { background: #F3F4F6; color: #6B7280; }
.badge--tag       { background: #D8F3DC; color: #1B4332; font-weight: 500; font-size: 10px; padding: 1px 8px; }

/* ---------- ボタン ---------- */
.btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;   /* ボタンラベルが「編」「集」と縦割れするのを防止 */
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); }
.btn--primary:disabled { background: var(--ink-mute); cursor: not-allowed; }
.btn--ghost { background: var(--card); color: var(--ink); border-color: var(--border); }
.btn--ghost:hover { background: var(--bg); }
.btn--danger { background: #fff; color: var(--danger); border-color: var(--danger); }
.btn--danger:hover { background: var(--danger); color: #fff; }
.btn--sm { padding: 6px 12px; font-size: 12px; }

/* ---------- フォーム ---------- */
.field { margin-bottom: 16px; }
.field__label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.field__input:focus,
.field__select:focus,
.field__textarea:focus { outline: none; border-color: var(--brand); }
.field__hint { font-size: 12px; color: var(--ink-mute); margin-top: 4px; }
.field__textarea { resize: vertical; min-height: 60px; }
.mono.field__input { font-family: 'Inter', monospace; font-size: 13px; }

/* ---------- アラート ---------- */
.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 13px; }
.alert--error { background: #FEE2E2; border: 1px solid #FCA5A5; color: #991B1B; }
.alert--info  { background: #DBEAFE; border: 1px solid #93C5FD; color: #1E40AF; }
.alert--success { background: #D1FAE5; border: 1px solid #6EE7B7; color: #065F46; }
.alert--warn  { background: #FEF3C7; border: 1px solid #FCD34D; color: #92400E; }

/* ---------- 空状態 ---------- */
.empty { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.empty__icon { font-size: 48px; margin-bottom: 8px; }
.empty__title { font-size: 16px; font-weight: 700; color: var(--ink-mute); margin-bottom: 6px; }
.empty__desc { font-size: 13px; }

/* ---------- ログイン専用 ---------- */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
}
.login-card {
  background: var(--card);
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.login-card__brand { text-align: center; font-size: 36px; margin-bottom: 12px; }
.login-card h1 { font-size: 22px; font-weight: 800; margin: 0 0 4px; color: var(--brand-dark); text-align: center; }
.login-card__sub { color: var(--ink-mute); font-size: 13px; margin: 0 0 24px; text-align: center; }
.login-card .btn { width: 100%; justify-content: center; }

/* ---------- mono / コード強調 ---------- */
.mono {
  font-family: 'Inter', monospace;
  font-size: 13px;
  background: var(--bg);
  padding: 3px 8px;
  border-radius: 4px;
}

/* ---------- 印刷 ---------- */
/* 通常時 body は overflow:hidden + flex でスクロールを .app-scroll に閉じ込めるが、
   印刷時はそれを解除しないと内容が1ページ目で切れる (qr.php の印刷等)。 */
@media print {
  html, body { height: auto; overflow: visible; display: block; }
  .app-scroll { overflow: visible; min-height: 0; }
}

/* ============================================================================
   機能 OFF ダイアログ (テナント機能ガード時にドックタイル click で出る)
   ============================================================================ */
.feat-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
}
.feat-modal.is-open { opacity: 1; pointer-events: auto; }

.feat-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(17, 24, 39, 0.55);
}

.feat-modal__card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    width: 480px; max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px); overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    transform: scale(.96);
    transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.feat-modal.is-open .feat-modal__card { transform: scale(1); }

.feat-modal__head {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 20px 22px 12px;
}
.feat-modal__icon {
    font-size: 28px; line-height: 1; flex-shrink: 0;
    width: 44px; height: 44px;
    background: #FEF3C7; color: #92400E;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.feat-modal__title {
    margin: 0; font-size: 16px; font-weight: 800;
    color: var(--ink, #1F2937); line-height: 1.45;
}

.feat-modal__body {
    padding: 4px 22px 18px;
    font-size: 13.5px; line-height: 1.7;
    color: var(--ink, #1F2937);
}
.feat-modal__body p { margin: 0; }

.feat-modal__foot {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--border, #E5E7EB);
}

@media (max-width: 640px) {
    .feat-modal__card { width: 100%; border-radius: 12px; }
    .feat-modal__head { padding: 16px 16px 10px; gap: 10px; }
    .feat-modal__icon { width: 38px; height: 38px; font-size: 24px; }
    .feat-modal__title { font-size: 15px; }
    .feat-modal__body { padding: 4px 16px 14px; }
    .feat-modal__foot { padding: 12px 16px 14px; flex-direction: column-reverse; }
    .feat-modal__foot .btn { width: 100%; }
}