/* ============================================================
 * NurseLink — common.css
 * ============================================================
 * 【設計方針（最新版）】SKILL.md と同期。
 *
 *  Bootstrap 素クラスの扱い:
 *    ・形状／レイアウト（border-radius・余白・影・サイズ）→ この common.css に集約
 *    ・色 → overrides.css の --bs-* ブリッジが担当
 *      例) .btn-* の pill 形状は common.css が指定（Bootstrap は --bs-border-radius を
 *          参照し pill にならないため、ブリッジ変数では代替不可。削除すると形状が崩れる）
 *
 *  ※ utilities.css 冒頭の「Bootstrap 素クラスは触らない」は【旧ルール（deprecated）】。
 *    現行は上記「形状=common / 色=overrides」が正。utilities.css は ui-* 追加のみ担当。
 *
 *  ※ 個別部品で「素クラスを上書きせず ui-* を足す」方式を採る箇所もある
 *    （例: 14. ページネーション）。その場合は各セクションのコメントに従う。
 * ============================================================ */

/* ============================================================
   0. ベース — タイポグラフィ品質
   -webkit-text-size-adjust: 100% → iOS での文字自動拡大を抑制
   font-feature-settings: "palt"  → 約物（。、「」など）を詰める
   font-kerning: normal            → カーニングを有効化
   -webkit-font-smoothing          → macOS/iOS でアンチエイリアス改善
============================================================ */
*, *::before, *::after {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-feature-settings: var(--font-feature);
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--ui-text); /* デフォルトテキストカラー — 必要な時だけ ui-text-sub / ui-text-muted を使う */
}

/* ============================================================
   2. グローバルナビ
============================================================ */
/* 親：全幅の背景・下線・sticky（ここが画面いっぱいに伸びる） */
.g-header {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.5px solid var(--ui-border);
    position: sticky;
    top: 0;
    z-index: 200;
}

/* 子：中身を並べるだけ（ui-container で幅が決まる） */
.g-nav {
    display: flex;
    align-items: center;
    height: 52px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ハンバーガーボタン */
.g-nav-toggler {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-xs);
    border: none;
    background: transparent;
    color: var(--ui-text-sub);
    cursor: pointer;
    transition: background var(--ui-transition), color var(--ui-transition);
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 201;
    flex-shrink: 0;
}
.g-nav-toggler:hover,
.g-nav-toggler:focus-visible { background: var(--ui-surface-3); color: var(--ui-text); outline: none; }

/* ── ハンバーガー SVG方式（三本線）── */
.ham-svg {
    width: 20px;
    height: 14px;
    display: block;
    overflow: visible;
    pointer-events: none;
    flex-shrink: 0;
}
.ham-line {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}
/* ✕アニメーション廃止 — ×は .g-nav-drawer-close に配置 */

/* ドロワー（スマホ時のメニュー展開エリア） */
/* .g-nav-drawer → スライドドロワー強化版に統合（下部参照）*/

@media (max-width: 767px) {
    .g-nav { height: 52px; }
    .g-nav-toggler { display: flex; }
    .g-nav .g-nav-links { display: none !important; }
}

.g-nav .navbar-brand {
    font-size: var(--text-headline);
    font-weight: 700;
    color: var(--ui-text);
    letter-spacing: -0.02em;
}

.g-nav .nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ui-accent);
    display: inline-block;
    margin-right: 6px;
}

/* 推奨: .g-nav-link（独自プレフィックスで Bootstrap .nav-link と衝突回避）
   互換: .g-nav .nav-link も当面サポート（既存Bladeの移行猶予） */
.g-nav-link,
.g-nav .nav-link {
    font-size: var(--text-footnote);
    font-weight: 500;
    color: var(--ui-text-sub) !important;
    border-radius: var(--ui-radius-xs);
    padding: 5px 11px !important;
    transition: all var(--ui-transition);
}
.g-nav-link:hover,
.g-nav .nav-link:hover  { background: var(--ui-surface-3); color: var(--ui-text) !important; }
.g-nav-link.active,
.g-nav .nav-link.active { color: var(--ui-accent) !important; background: var(--ui-accent-lt); }

.g-nav-notif {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-xs);
    cursor: pointer;
    color: var(--ui-text-sub);
    font-size: var(--text-headline);
    transition: all var(--ui-transition);
}
.g-nav-notif:hover { background: var(--ui-surface-3); }

.g-nav-notif .ndot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ui-danger);
    border: 1.5px solid #fff;
}

/* ------------------------------------------------------------
   通知ドロップダウン（.g-nav-notif のホバー式パネル）
   JS不使用・CSSのみ。.ndot の代替として .badge（件数）も使用可。
     <div class="g-nav-notif">
       <i class="bi bi-bell"></i>
       <span class="badge">3</span>
       <div class="notification-dropdown">
         <div class="notification-item">
           <div class="message">...</div><div class="time">...</div>
         </div>
       </div>
     </div>
------------------------------------------------------------ */
/* ベル位置の微調整（bi-bell の視覚的中心ズレ補正） */
.g-nav-notif .bi-bell {
    line-height: 1;
    transform: translateY(0.5px);
}
/* 件数バッジ（.ndot の代替・右上の赤丸） */
.g-nav-notif .badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-danger);
    color: #fff;
    font-family: var(--font-sans);
    font-size: var(--text-caption-2);
    font-weight: 700;
    line-height: 1;
    border: 1.5px solid var(--ui-surface);
    box-sizing: border-box;
    pointer-events: none; /* バッジ上でも hover を維持 */
    z-index: 2;
}
/* ドロップダウン本体（右寄せ・Apple風の薄い影） */
.g-nav-notif .notification-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: 320px;
    max-height: 380px;
    overflow-y: auto;
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-md);
    padding: 6px;
    /* 初期は非表示 + ふわっと表示の準備 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity   var(--ui-transition),
        transform var(--ui-transition),
        visibility var(--ui-transition);
    z-index: 1000;
    cursor: default; /* 親の cursor:pointer を打ち消す */
}
/* hover で表示（親 .g-nav-notif の :hover は背景のみ＝衝突なし） */
.g-nav-notif:hover .notification-dropdown,
.g-nav-notif:focus-within .notification-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* ベルとドロップダウンの間の隙間でホバーが切れないよう橋渡し */
.g-nav-notif .notification-dropdown::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 0;
    left: 0;
    height: 8px;
}
/* 通知アイテム（区切り線で分割） */
.g-nav-notif .notification-item {
    padding: 10px 12px;
    border-radius: var(--ui-radius-sm);
    border-bottom: 0.5px solid var(--ui-border);
    transition: background var(--ui-transition);
}
.g-nav-notif .notification-item:last-child { border-bottom: none; }
.g-nav-notif .notification-item:hover { background: var(--ui-surface-3); }
.g-nav-notif .notification-item .message {
    color: var(--ui-text);
    font-size: var(--text-subheadline);
    line-height: 1.4;
    margin-bottom: 2px;
}
.g-nav-notif .notification-item .time {
    color: var(--ui-text-sub);
    font-size: var(--text-caption-1);
}
/* 空状態 */
.g-nav-notif .notification-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--ui-text-muted);
    font-size: var(--text-subheadline);
}

.g-nav-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ui-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-caption-1);
    font-weight: 700;
    cursor: pointer;
}

/* ============================================================
   3. パンくず
============================================================ */
.breadcrumb-bar {
    background: var(--ui-surface);
    border-bottom: 0.5px solid var(--ui-border);
}
.breadcrumb-bar .breadcrumb { margin: 0; }
.breadcrumb-bar .breadcrumb-item { font-size: var(--text-footnote); }
.breadcrumb-bar .breadcrumb-item a { color: var(--ui-text-sub); text-decoration: none; }
.breadcrumb-bar .breadcrumb-item a:hover { color: var(--ui-accent); }
.breadcrumb-bar .breadcrumb-item.active { color: var(--ui-text); font-weight: 500; }
.breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before { color: var(--ui-text-muted); font-size: var(--text-caption-2); }

/* ============================================================
   4. ヒーローブロック
============================================================ */
.hero-block {
    background: var(--ui-surface);
    border-bottom: 0.5px solid var(--ui-border);
}

.hero-eyebrow {
    font-size: var(--text-caption-1);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ui-accent);
    font-family: var(--font-mono);
}

/* ダークバリアント */
.hero-block--dark {
    background: #1d1d1f;
    position: relative;
    overflow: hidden;
}
.hero-block--dark::before {
    content: "";
    position: absolute;
    top: -120px; right: -60px;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--ui-accent-rgb), 0.16) 0%, transparent 65%);
    pointer-events: none;
}
.hero-block--dark::after {
    content: "";
    position: absolute;
    bottom: -80px; left: -20px;
    width: 340px; height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(88, 86, 214, 0.12) 0%, transparent 65%);
    pointer-events: none;
}
.hero-block--dark .hero-eyebrow { color: rgba(255, 255, 255, 0.45); }
.hero-block--dark h1,
.hero-block--dark h2 { color: #f5f5f7; }
.hero-block--dark p  { color: rgba(245, 245, 247, 0.6); }

/* 背景画像バリアント
   使い方:
     <div class="hero-block hero-block--image"
          style="--hero-img: url('path/to/image.jpg')">

   オーバーレイ濃さ調整:
     style="--hero-img: url('...'); --hero-overlay: rgba(0,0,0,0.55);"
*/
.hero-block--image {
    position: relative;
    overflow: hidden;
    background: #1d1d1f; /* 画像読み込み前のフォールバック */
}
.hero-block--image::before {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--hero-img);
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-block--image:hover::before {
    transform: scale(1.02);
}
/* オーバーレイ（デフォルト: 半透明黒） */
.hero-block--image::after {
    content: "";
    position: absolute; inset: 0;
    background: var(--hero-overlay, rgba(0, 0, 0, 0.48));
    z-index: 0;
}
/* テキストを前面に */
.hero-block--image > * {
    position: relative;
    z-index: 1;
}
.hero-block--image .hero-eyebrow { color: rgba(255, 255, 255, 0.55); }
.hero-block--image h1,
.hero-block--image h2 { color: #fff; }
.hero-block--image p  { color: rgba(255, 255, 255, 0.65); }

/* ------------------------------------------------------------
   画像スライドバリアント（.hero-block--slider）
   複数画像を横スライドするヒーロー。JS: hero-slider.js が制御。
     <div class="hero-block hero-block--slider" data-interval="6000">
       <div class="hero-slider">
         <div class="hero-slide"><img src="..." alt=""></div> ...
       </div>
       <button class="hero-slide-prev">...</button>
       <button class="hero-slide-next">...</button>
       <div class="hero-slide-dots"></div>
       <div class="hero-slider-content"><h1>...</h1><p>...</p></div>
     </div>
------------------------------------------------------------ */
.hero-block--slider {
    position: relative;
    overflow: hidden;
    height: clamp(320px, 42vw, 420px);
    background: #1d1d1f; /* 画像読み込み前のフォールバック */
    padding: 0;
}
/* スライダーレール（横並び・translateXで移動） */
.hero-block--slider .hero-slider {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
.hero-block--slider .hero-slider.is-dragging { transition: none; }
/* 各スライド */
.hero-block--slider .hero-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
}
.hero-block--slider .hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos, center);
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
/* テキスト可読性オーバーレイ */
.hero-block--slider .hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.20) 45%,
        rgba(0, 0, 0, 0.10) 100%
    );
}
/* テキストコンテンツ（最前面・左下寄せ） */
.hero-block--slider .hero-slider-content {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    padding: clamp(20px, 4vw, 40px);
    max-width: 640px;
    pointer-events: none;
}
.hero-block--slider .hero-slider-content h1 {
    color: #fff;
    font-family: var(--font-sans);
    font-size: var(--text-title-1);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 0 8px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.30);
}
.hero-block--slider .hero-slider-content p {
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font-sans);
    font-size: var(--text-callout);
    line-height: 1.6;
    margin: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}
/* 前へ / 次へ ボタン（透明背景 + hover で薄いサーフェス） */
.hero-block--slider .hero-slide-prev,
.hero-block--slider .hero-slide-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--ui-radius-pill);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background var(--ui-transition),
                border-color var(--ui-transition),
                opacity var(--ui-transition);
    -webkit-tap-highlight-color: transparent;
}
.hero-block--slider .hero-slide-prev:hover,
.hero-block--slider .hero-slide-next:hover {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.45);
}
.hero-block--slider .hero-slide-prev:focus-visible,
.hero-block--slider .hero-slide-next:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
}
.hero-block--slider .hero-slide-prev { left: 14px; }
.hero-block--slider .hero-slide-next { right: 14px; }
/* ページネーションドット（Apple風 pill-dot） */
.hero-block--slider .hero-slide-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.hero-block--slider .hero-slide-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: var(--ui-radius-pill);
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: width var(--ui-transition),
                background var(--ui-transition);
    -webkit-tap-highlight-color: transparent;
}
.hero-block--slider .hero-slide-dot:hover { background: rgba(255, 255, 255, 0.75); }
.hero-block--slider .hero-slide-dot.is-active {
    width: 20px;
    background: var(--ui-accent);
}
/* レスポンシブ（狭幅では矢印を控えめに） */
@media (max-width: 600px) {
    .hero-block--slider .hero-slide-prev,
    .hero-block--slider .hero-slide-next {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }
    .hero-block--slider .hero-slide-prev { left: 8px; }
    .hero-block--slider .hero-slide-next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-block--slider .hero-slider { transition: none; }
}

/* ============================================================
   5. コントロールバー（検索・絞り込み）
============================================================ */
.ctrl-bar {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.5px solid var(--ui-border);
    position: sticky;
    top: 52px;  /* .g-nav の高さ */
    z-index: 100;
}

/* Segmented Control 風ソートボタン */
.sort-group {
    display: flex;
    background: rgba(118, 118, 128, 0.12);
    border-radius: 9px;
    padding: 2px;
    gap: 1px;
}
.sort-btn {
    height: 28px;
    padding: 0 12px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--ui-text-sub);
    font-size: var(--text-footnote);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all var(--ui-transition);
    font-family: inherit;
}
.sort-btn:hover  { color: var(--ui-text); }
.sort-btn.active {
    background: var(--ui-surface);
    color: var(--ui-text);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.06);
}

/* フィルターセレクト */
.filter-select,
.filter-input {
    height: 32px;
    padding: 0 10px;
    border-radius: var(--ui-radius-sm);
    border: 0.5px solid rgba(0, 0, 0, 0.15);
    background: var(--ui-surface);
    font-size: var(--text-footnote);
    color: var(--ui-text);
    outline: none;
    transition: all var(--ui-transition);
    box-shadow: var(--ui-shadow-xs);
    font-family: inherit;
}
.filter-select { /* select 固有スタイル（上記 filter-input と共通部分を拡張）*/
    cursor: pointer;
    padding: 0 28px 0 10px;           /* 右に矢印スペース確保 */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23aeaeb2' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.filter-input::placeholder { color: var(--ui-text-placeholder); }
.filter-select:focus,
.filter-input:focus {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), 0.15);
}
/* 幅モディファイア（一覧の検索ボックス等） */
.filter-input--w170 { width: 170px; }

/* 検索インプット */
.search-wrap { position: relative; }
.search-wrap .si {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-text-muted);
    font-size: var(--text-footnote);
    pointer-events: none;
}
.search-wrap input {
    width: 100%;
    height: 32px;
    padding: 0 12px 0 32px;
    border-radius: var(--ui-radius-sm);
    border: 0.5px solid rgba(0, 0, 0, 0.15);
    background: var(--ui-surface);
    font-size: var(--text-footnote);
    color: var(--ui-text);
    outline: none;
    transition: all var(--ui-transition);
    box-shadow: var(--ui-shadow-xs);
    font-family: inherit;
}
.search-wrap input::placeholder { color: var(--ui-text-placeholder); }
.search-wrap input:focus {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), 0.15);
}

/* ============================================================
   6. ボタン  → button.css へ全面移動（2025リファクタ）
   ------------------------------------------------------------
   汎用ボタンの定義は button.css が唯一の置き場所。
   現行(.ui-btn / .ui-btn-*)・旧(.btn-*-app 等)ともに移動済み。
   読み込み順: common.css の後に button.css を読むこと。
============================================================ */
/* ============================================================
   7. アバター
============================================================ */
.ui-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--ui-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-footnote);
    font-weight: 600;
    color: var(--ui-text-sub);
    flex-shrink: 0;
}

/* サイズ修飾子 */
.ui-avatar--xs  { width: 22px; height: 22px; min-width: 22px; font-size: var(--text-caption-2); }
.ui-avatar--sm  { width: 28px; height: 28px; min-width: 28px; font-size: var(--text-caption-1); }
.ui-avatar--md  { width: 36px; height: 36px; min-width: 36px; }  /* デフォルト */
.ui-avatar--lg  { width: 48px; height: 48px; min-width: 48px; font-size: var(--text-title-3); }
.ui-avatar--xl  { width: 64px; height: 64px; min-width: 64px; font-size: var(--text-title-1); }

/* カラー修飾子 */
.ui-avatar--blue   { background: #ddeeff; color: var(--ui-accent); }
.ui-avatar--green  { background: #d4f5de; color: #1a8a3c; }
.ui-avatar--orange { background: #ffe8cc; color: #c05a00; }
.ui-avatar--purple { background: #f0d9f9; color: #8a2aba; }
.ui-avatar--red    { background: #ffd9d7; color: #c0251a; }
.ui-avatar--dark   { background: #1d1d1f; color: #f5f5f7; }
.ui-avatar--accent { background: var(--ui-accent); color: #fff; box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), 0.20); }

/* ============================================================
   8. バッジ・ステータスタグ
============================================================ */

/* 未読バッジ（数字） */
.badge-unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--ui-radius-pill);
    font-size: var(--text-caption-2);
    font-weight: 700;
    background: var(--ui-danger);
    color: #fff;
}

/* ステータスピル（指示書ステータス） */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--ui-radius-pill);
    font-size: var(--text-caption-1);
    font-weight: 600;
    white-space: nowrap;
}
.status-pill--pending  { background: rgba(142, 142, 147, 0.12); color: #6e6e73; }
.status-pill--issued   { background: rgba(var(--ui-accent-rgb), 0.10);   color: var(--ui-accent); }
.status-pill--received { background: rgba(52, 199, 89, 0.12);   color: #1a8a3c; }

/* 期限バッジ */
.deadline-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--ui-radius-xs);
    font-size: var(--text-caption-2);
    font-weight: 600;
    white-space: nowrap;
}
.deadline-badge--overdue   { background: rgba(255, 59, 48, 0.1);  color: var(--ui-danger); }
.deadline-badge--thismonth { background: rgba(255, 149, 0, 0.1);  color: #b85c00; }
.deadline-badge--future    { background: var(--ui-surface-2);     color: var(--ui-text-muted); }

/* カテゴリータグ（モノスペース・大文字） */
.category-tag {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: var(--ui-radius-xs);
    font-size: var(--text-caption-2);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: var(--ui-accent-lt);
    color: var(--ui-accent);
    font-family: var(--font-mono);
}

/* ============================================================
   9. カード・パネル
   ------------------------------------------------------------
   【命名整理（v6）】役割で2系統に分離:

     .ui-panel  … 独自カード（このセクション）
                  surface背景 + 角丸 + 影 + キーバリュー行(.ui-card-row 等)。
                  Bootstrap .card を使わず単体で完結する独自コンポーネント。
                  ※ 旧名 .ui-card は互換のため当面維持（新規は .ui-panel 推奨）。

     .ui-card-x … Bootstrap .card への拡張クラス（utilities.css 定義）
                  <div class="card ui-card-x"> のように .card と併用する。

   迷ったら: Bootstrap構造に乗せる→ card ui-card-x / 独自で完結→ ui-panel
============================================================ */
.ui-panel,
.ui-card {
    /* ⑤カード背景色：指定色→白のグラデーション */
    background: linear-gradient(180deg, var(--ui-surface) 0%, #ffffff 100%);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    overflow: hidden;
}

.ui-panel-header,
.ui-card-header {
    padding: 14px 20px 12px;
    border-bottom: 0.5px solid var(--ui-border);
}

/* キー・バリュー行（サイドバー内の情報表示） */
.ui-panel-row,
.ui-card-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 18px;
    border-bottom: 0.5px solid var(--ui-border);
}
.ui-panel-row:last-child,
.ui-card-row:last-child { border-bottom: none; }
.ui-panel-key,
.ui-card-key {
    font-size: var(--text-caption-1);
    color: var(--ui-text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
    flex-shrink: 0;
}
.ui-panel-val,
.ui-card-val {
    font-size: var(--text-footnote);
    font-weight: 500;
    color: var(--ui-text);
    text-align: right;
}
.ui-panel-val.empty,
.ui-card-val.empty { color: var(--ui-text-muted); font-weight: 400; }

/* ============================================================
   10. リスト
============================================================ */

/* リストグループ外枠 */
.list-group-app {
    background: var(--ui-surface);
    border-radius: var(--ui-radius);
    overflow: hidden;
    box-shadow: var(--ui-shadow);
}

/* リスト行（一覧・チャット・スレッド共通） — .list-card は .list-row に統合済み */
.list-row {
    display: flex;
    align-items: center;
    position: relative;          /* 行アクションメニューの基準点 */
    gap: 12px;
    padding: 14px 16px;
    background: var(--ui-surface);
    border-bottom: 0.5px solid var(--ui-border);
    text-decoration: none;
    color: var(--ui-text);
    transition: background var(--ui-transition);
}
.list-row:last-child    { border-bottom: none; }
.list-row:hover         { background: rgba(0, 0, 0, 0.025); color: var(--ui-text); text-decoration: none; }
.list-row.is-overdue    { border-left: 3px solid var(--ui-danger); }
.list-row.is-thismonth  { border-left: 3px solid var(--ui-warning); }

/* 状態クラス（左ボーダー3px + 淡色の面 / is-overdue・is-thismonth と同系統で統一） */
.list-row.is-unread {
    border-left: 3px solid var(--ui-accent);
    background: rgba(0, 113, 227, 0.04);   /* --ui-accent 由来の淡いブルー */
}
.list-row.is-unread:hover  { background: rgba(0, 113, 227, 0.07); }

.list-row.is-new {
    border-left: 3px solid var(--ui-success);
    background: rgba(52, 199, 89, 0.05);   /* --ui-success 由来の淡いグリーン */
}
.list-row.is-new:hover     { background: rgba(52, 199, 89, 0.08); }

.list-row.is-warning {
    border-left: 3px solid var(--ui-warning);
    background: rgba(255, 149, 0, 0.05);   /* --ui-warning 由来の淡いアンバー */
}
.list-row.is-warning:hover { background: rgba(255, 149, 0, 0.08); }

.list-row.is-error {
    border-left: 3px solid var(--ui-danger);
    background: rgba(255, 59, 48, 0.05);   /* --ui-danger 由来の淡いレッド */
}
.list-row.is-error:hover   { background: rgba(255, 59, 48, 0.08); }

.list-row.is-disabled {
    opacity: 0.5;
    pointer-events: none;     /* クリック・hover 不可 */
    cursor: not-allowed;
    background: var(--ui-surface-2);
}

/* ============================================================
   11. 情報グリッド（詳細ページ）
   ラベル = .info-label（キャプション・モノスペース）
   値     = .info-value（サブヘッドライン・通常）
============================================================ */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 576px) {
    .info-grid { grid-template-columns: 1fr; }
}

.info-row {
    padding: 12px 20px;
    border-bottom: 0.5px solid var(--ui-border);
    border-right: 0.5px solid var(--ui-border);
}
.info-row:nth-child(even)      { border-right: none; }
.info-row:nth-last-child(-n+2):not(.full) { border-bottom: none; }
.info-row.full                 { grid-column: 1 / -1; border-right: none; }
.info-row.full:last-child      { border-bottom: none; }
/* full行の直前の奇数行（左カラムのみ残る場合）のborder-bottomを維持するため上書き */
.info-row:not(.full):has(+ .info-row.full) { border-bottom: 0.5px solid var(--ui-border); }

/* NOTE: .info-label は情報グリッド専用。フォームのラベルは forms.css の .field-label を使う */
.info-label {
    font-size: var(--text-caption-1);
    color: var(--ui-text-muted);
    font-family: var(--font-mono);
    margin-bottom: 3px;
}
.info-value {
    font-size: var(--text-subheadline);
    font-weight: 500;
}

/* ============================================================
   12. アラートブロック
============================================================ */
.info-block {
    background: rgba(0, 113, 227, 0.04);
    border-radius: var(--ui-radius-sm);
    border: 0.5px solid rgba(0, 113, 227, 0.14);
    font-size: var(--text-footnote);
    color: var(--ui-text);
    line-height: 1.6;
}
.warning-block {
    background: rgba(255, 149, 0, 0.06);
    border-radius: var(--ui-radius-sm);
    border: 0.5px solid rgba(255, 149, 0, 0.2);
    font-size: var(--text-footnote);
    color: #7a4000;
    line-height: 1.6;
}
.danger-block {
    background: rgba(255, 59, 48, 0.04);
    border-radius: var(--ui-radius-sm);
    border: 0.5px solid rgba(255, 59, 48, 0.2);
    font-size: var(--text-footnote);
    color: #7a1a1a;
    line-height: 1.6;
}

/* ============================================================
   13. ステップインジケーター
============================================================ */
.step-bar { display: flex; align-items: center; }

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}
.step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 50%;
    width: 100%;
    height: 1.5px;
    background: var(--ui-surface-3);
}
.step.done::after { background: var(--ui-accent); }

.step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-caption-2);
    font-weight: 700;
    position: relative;
    z-index: 1;
    border: 2px solid var(--ui-surface-3);
    background: var(--ui-surface);
    color: var(--ui-text-muted);
}
.step.done    .step-circle { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.step.current .step-circle { border-color: var(--ui-accent); color: var(--ui-accent); box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), 0.15); }

.step-label {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    margin-top: 5px;
    text-align: center;
}
.step.done    .step-label { color: var(--ui-accent); }
.step.current .step-label { color: var(--ui-text); font-weight: 600; }

/* ============================================================
   14. ページネーション（ui-pagination 拡張クラス）
   ------------------------------------------------------------
   Bootstrap の .pagination はそのまま使い、ui-pagination を足して
   デザインシステムの見た目にする。素クラスは上書きしない。

     <ul class="pagination ui-pagination"> … </ul>
============================================================ */
.ui-pagination {
    display: flex;
    gap: 0;                             /* 隙間なし */
    flex-wrap: wrap;
    align-items: center;
}
.ui-pagination .page-item + .page-item {
    margin-left: -0.5px;                /* ボーダーを重ねて二重線を防ぐ */
}
.ui-pagination .page-link {
    border-radius: 0;                   /* 角丸なし → 整列してスッキリ */
    border: 0.5px solid rgba(0, 0, 0, 0.12);
    color: var(--ui-text-sub);
    font-size: var(--text-footnote);
    font-family: var(--font-mono);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--ui-surface);
    transition: all var(--ui-transition);
    margin-left: 0;                     /* Bootstrap の margin をリセット */
}
.ui-pagination .page-link:hover               { background: var(--ui-surface-3); color: var(--ui-text); border-color: rgba(0, 0, 0, 0.15); }
.ui-pagination .page-item.active .page-link   { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; font-weight: 700; }
.ui-pagination .page-item.disabled .page-link { opacity: 0.3; }

/* 両端だけ角丸 */
.ui-pagination .page-item:first-child .page-link { border-radius: var(--ui-radius-xs) 0 0 var(--ui-radius-xs); }
.ui-pagination .page-item:last-child  .page-link { border-radius: 0 var(--ui-radius-xs) var(--ui-radius-xs) 0; }

/* ============================================================
   15. 空状態
============================================================ */
.empty-state { padding: 64px 0; text-align: center; }
.empty-state i {
    font-size: var(--text-title-1);
    display: block;
    margin-bottom: 12px;
    color: var(--ui-text-muted);
    opacity: 0.3;
}
.empty-state .empty-title {
    font-size: var(--text-headline);
    font-weight: 600;
    color: var(--ui-text-sub);
    margin-bottom: 4px;
}
.empty-state .empty-desc {
    font-size: var(--text-subheadline);
    color: var(--ui-text-muted);
}

/* ============================================================
   16. タイムライン（変更履歴・アクティビティ）
============================================================ */
.tl-item {
    display: flex;
    gap: 12px;
    padding: 10px 20px;
}
.tl-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 24px;
}
.tl-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}
.tl-line {
    flex: 1;
    width: 1px;
    background: var(--ui-border-2);
    margin-top: 3px;
}
.tl-item:last-child .tl-line { display: none; }
.tl-content {
    flex: 1;
    padding-bottom: 8px;
}
.tl-time {
    font-family: var(--font-mono);
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    margin-bottom: 2px;
}
.tl-text  { font-size: var(--text-footnote); line-height: 1.65; }
.tl-by    { font-size: var(--text-caption-2); color: var(--ui-text-muted); margin-top: 2px; }

/* ============================================================
   17. 段階バッジ・レベルバー（level-badge / level-bar）
   旧名: care-level / care-level-bar（NurseLink 固有名→汎用化）
   使用例: 要介護度 / 難易度 / 優先度 / 進捗段階
============================================================ */
.level-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--ui-radius-xs);
    font-size: var(--text-footnote);
    font-weight: 700;
}
.level-badge--1 { background: rgba(52, 199, 89, 0.10);  color: #1a8a3c; }
.level-badge--2 { background: rgba(var(--ui-accent-rgb), 0.10);  color: var(--ui-accent); }
.level-badge--3 { background: rgba(255, 149, 0, 0.10);  color: #b85c00; }
.level-badge--4 { background: rgba(255, 59, 48, 0.10);  color: var(--ui-danger); }
.level-badge--5 { background: rgba(175, 82, 222, 0.10); color: var(--ui-purple); }

.level-bar { display: flex; gap: 3px; align-items: center; }
.level-bar .pip {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--ui-surface-3);
}
.level-bar .pip.on { background: var(--ui-warning); }

/* ============================================================
   18. データカード（data-card / data-grid）
   旧名: vital-card / vital-grid（NurseLink 固有名→汎用化）
   使用例: バイタル / KPI / センサー数値 / ダッシュボード指標
============================================================ */
.data-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 576px) {
    .data-grid { grid-template-columns: repeat(2, 1fr); }
}

.data-card {
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border-2);
    border-radius: var(--ui-radius-sm);
    padding: 12px 14px;
}
.data-label {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    font-family: var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.data-value {
    font-size: var(--text-title-3);
    font-weight: 700;
    font-family: var(--font-mono);
    line-height: 1.1;
}
.data-unit {
    font-size: var(--text-footnote);
    font-weight: 400;
    color: var(--ui-text);
    margin-left: 2px;
}
.data-date {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    font-family: var(--font-mono);
    margin-top: 3px;
}
.data-trend { font-size: var(--text-caption-2); font-family: var(--font-mono); margin-top: 2px; }
.data-trend--up   { color: var(--ui-danger); }
.data-trend--down { color: var(--ui-accent); }
.data-trend--same { color: var(--ui-text-muted); }

/* ============================================================
   19. 番号付きアイテム行（item-row）
   旧名: doc-row（NurseLink 固有名→汎用化）
   使用例: 指示書一覧 / 注文履歴 / タスクリスト / ファイル一覧
============================================================ */
/* item-row はリンクだが、下線は UI として不要 */
.item-row {
    text-decoration: none;
    color: inherit;
}

.item-row:last-child  { border-bottom: none; }
/* アクティブ行（--active）は常に選択状態のため hover で見た目を変えない。
   通常行のみ hover を適用する（:not(.item-row--active) で除外）。 */
.item-row:not(.item-row--active):hover { background: rgba(0, 113, 227, 0.025); text-decoration: none; color: var(--ui-text); }
.item-row--active     { border-left: 3px solid var(--ui-accent); }

.item-num {
    font-family: var(--font-mono);
    font-size: var(--text-caption-1);
    color: var(--ui-text-muted);
    width: 44px;
    flex-shrink: 0;
}

.item-sub {
    font-size: var(--text-caption-1);
    color: var(--ui-text-muted);
    font-family: var(--font-mono);
    margin-top: 1px;
}
.item-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ============================================================
   20. メンバー行（member-row）
   旧名: staff-row（NurseLink 固有名→汎用化）
   使用例: スタッフ / チームメンバー / 担当者一覧
============================================================ */
.member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    border-bottom: 0.5px solid var(--ui-border);
}
.member-row:last-child { border-bottom: none; }

/* NOTE: アバターは .ui-avatar / .ui-avatar--sm を使うこと。
   member-avatar は後方互換エイリアス（新規では使わない）。 */
.member-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-caption-1);
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.member-info { flex: 1; }
.member-name { font-size: var(--text-footnote); font-weight: 600; }
.member-role { font-size: var(--text-caption-1); color: var(--ui-text-muted); margin-top: 1px; }

/* ============================================================
   21. スレッドアイテム（thread-item）
   旧名: note-item（NurseLink 固有名→汎用化）
   使用例: 申し送り / コメント / フィード / ログ
============================================================ */
.thread-item {
    padding: 14px 20px;
    border-bottom: 0.5px solid var(--ui-border);
}
.thread-item:last-child { border-bottom: none; }

.thread-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.thread-author { font-size: var(--text-caption-1); font-weight: 700; }
.thread-time {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    font-family: var(--font-mono);
    margin-left: auto;
}
.thread-body { font-size: var(--text-footnote); line-height: 1.7; color: var(--ui-text); }

.thread-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-caption-2);
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--ui-radius-xs);
    margin-top: 6px;
}
.thread-tag--urgent { background: rgba(255, 59, 48, 0.08);  color: var(--ui-danger); }
.thread-tag--info   { background: var(--ui-accent-lt);  color: var(--ui-accent); }
.thread-tag--check  { background: rgba(52, 199, 89, 0.08);  color: #1a8a3c; }

/* NOTE: 入力エリアは forms.css の .ui-textarea を使うこと。
   以下は thread セクション専用のラッパーのみ定義。 */
.thread-input-wrap {
    padding: 14px 20px;
    border-top: 0.5px solid var(--ui-border);
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

/* ============================================================
   22. アレルギー・注意事項タグ（allergy-pill）
============================================================ */
.allergy-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--ui-radius-pill);
    font-size: var(--text-caption-1);
    font-weight: 700;
}
.allergy-pill--danger  { background: rgba(255,59,48,.08);  color: var(--ui-danger); border: 0.5px solid rgba(255,59,48,.18); }
.allergy-pill--warning { background: rgba(255,149,0,.08);  color: #b85c00;          border: 0.5px solid rgba(255,149,0,.2); }
.allergy-pill--info    { background: var(--ui-accent-lt);  color: var(--ui-accent); border: 0.5px solid rgba(0,113,227,.18); }

/* ============================================================
   23. イベント行（event-row）
   旧名: schedule-row（NurseLink 固有名→汎用化）
   使用例: 訪問スケジュール / 予約一覧 / カレンダー行 / タスク
============================================================ */
.event-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-bottom: 0.5px solid var(--ui-border);
}
.event-row:last-child { border-bottom: none; }

.event-date {
    width: 32px;
    height: 32px;
    border-radius: var(--ui-radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--ui-surface-2);
    flex-shrink: 0;
}
.event-date--active { background: var(--ui-accent-lt); }

.event-date-name { font-size: var(--text-caption-2); font-weight: 700; line-height: 1; }
.event-date-num  { font-size: var(--text-footnote); font-weight: 700; font-family: var(--font-mono); line-height: 1.1; }
.event-date--active .event-date-name,
.event-date--active .event-date-num  { color: var(--ui-accent); }

.event-info  { flex: 1; }
.event-title { font-size: var(--text-footnote); font-weight: 600; }
.event-time  { font-size: var(--text-caption-1); color: var(--ui-text-muted); font-family: var(--font-mono); }
.event-assignee { display: flex; align-items: center; gap: 5px; }

/* ============================================================
   24. キャンセル・グレーボタン（btn-cancel）
       → button.css へ移動（DEPRECATED 区画に集約）
============================================================ */
/* ============================================================
   25. アイコン付きアイテム行（item-row 拡張）
   セクション19の item-row を上書き。align-items: flex-start に変更。
   旧名: med-row（NurseLink 固有名→汎用化）
   NOTE: .item-row と同じ文脈。アイコン付きは .item-icon を追加。
   使用例: 薬剤 / 商品 / ファイル / メニュー項目
============================================================ */
.item-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 0.5px solid var(--ui-border);
}
.item-row:last-child { border-bottom: none; }

.item-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-accent-lt);
    color: var(--ui-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-footnote);
    flex-shrink: 0;
    margin-top: 1px;
}
.item-info   { flex: 1; min-width: 0; }
.item-name   { font-size: var(--text-footnote); font-weight: 600; }
.item-detail {
    font-size: var(--text-caption-1);
    color: var(--ui-text);
    margin-top: 2px;
    line-height: 1.5;
}
.item-meta {
    font-family: var(--font-mono);
    font-size: var(--text-caption-1);
    color: var(--ui-text);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================================
   26. 連絡先カード（contact-card）
============================================================ */
.contact-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 0.5px solid var(--ui-border);
}
.contact-card:last-child { border-bottom: none; }

.contact-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--ui-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-footnote);
    flex-shrink: 0;
}
.contact-info  { flex: 1; }
.contact-type  {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    font-family: var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.contact-name  { font-size: var(--text-footnote); font-weight: 700; }
.contact-sub   { font-size: var(--text-caption-1); color: var(--ui-text); margin-top: 1px; }
.contact-tel   {
    font-family: var(--font-mono);
    font-size: var(--text-footnote);
    font-weight: 600;
    color: var(--ui-accent);
}

/* ============================================================
   27. チャット / コメント行（chat-row / chat-bubble）
   スレッド詳細・申し送りチャット形式に使用
============================================================ */
.chat-row {
    display: flex;
    gap: 10px;
    padding: 10px 20px;
}
.chat-row.is-mine {
    flex-direction: row-reverse;
}

.chat-bubble {
    max-width: 72%;
    padding: 9px 14px;
    border-radius: var(--ui-radius-sm);
    font-size: var(--text-footnote);
    line-height: 1.65;
    background: var(--ui-surface-2);
    color: var(--ui-text);
    border: 0.5px solid var(--ui-border);
}
.chat-row.is-mine .chat-bubble {
    background: rgba(var(--ui-accent-rgb), 0.10);
    border-color: rgba(var(--ui-accent-rgb), 0.15);
    color: var(--ui-text);
}

.chat-meta {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    font-family: var(--font-mono);
    margin-top: 4px;
}
.chat-row.is-mine .chat-meta { text-align: right; }

/* ============================================================
   28. ツールチップ（ui-tooltip）
============================================================ */
.ui-tooltip-wrap {
    position: relative;
    display: inline-flex;
}
.ui-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1d1d1f;
    color: #f5f5f7;
    font-size: var(--text-caption-1);
    font-weight: 500;
    padding: 5px 10px;
    border-radius: var(--ui-radius-xs);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--ui-transition);
    z-index: 300;
    box-shadow: var(--ui-shadow-md);
}
/* 矢印 */
.ui-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1d1d1f;
}
.ui-tooltip-wrap:hover .ui-tooltip { opacity: 1; }

/* 方向修飾子 — bottom */
.ui-tooltip.bottom {
    bottom: auto;
    top: calc(100% + 6px);
}
.ui-tooltip.bottom::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #1d1d1f;
}

/* 方向修飾子 — right */
.ui-tooltip.right {
    bottom: auto;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
}
.ui-tooltip.right::after {
    top: 50%;
    left: auto;
    right: 100%;
    transform: translateY(-50%);
    border-top-color: transparent;
    border-right-color: #1d1d1f;
}

/* ============================================================
   29. ポップオーバー（ui-popover）
============================================================ */
.ui-popover-wrap {
    position: relative;
    display: inline-flex;
}
.ui-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border-2);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-md);
    padding: 12px 14px;
    min-width: 200px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--ui-transition);
    z-index: 300;
}
.ui-popover::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--ui-surface);
    filter: drop-shadow(0 1px 0 var(--ui-border-2));
}
.ui-popover-wrap:hover .ui-popover,
.ui-popover-wrap.is-open .ui-popover {
    opacity: 1;
    pointer-events: auto;
}

.ui-popover-title {
    font-size: var(--text-footnote);
    font-weight: 700;
    color: var(--ui-text);
    margin-bottom: 4px;
}
.ui-popover-body {
    font-size: var(--text-caption-1);
    color: var(--ui-text);
    line-height: 1.65;
}

/* ============================================================
   30. 確認モーダル（confirm-modal）
============================================================ */
.confirm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.confirm-modal {
    background: var(--ui-surface);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-lg);
    width: 100%;
    /*
       モーダルの幅は「中サイズ」1種類に統一している。

       以前は --sm/--lg/--xl/--xxl の4段階を別ファイル（button.css）に置き、
       使う側でクラスを足す作りだった。だが読み込み順に依存するため、
       指定したはずの幅にならない事故が繰り返し起きた。
       画面ごとに幅が違うこと自体、使う人には分かりにくい。

       そこで幅はここ1か所だけで決める。使う側は何も指定しない。
       表のような広さが要るものは、そもそもモーダルにせずページにする。
    */
    max-width: 880px;
    overflow: hidden;
}
.confirm-modal-header {
    padding: 20px 20px 0;
    text-align: center;        /* タイトル・説明文を中央揃え */
}
.confirm-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--ui-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-title-3);
    margin: 0 auto 12px;       /* 左右auto で水平中央 */
}
.confirm-modal-icon--danger  { background: rgba(255, 59, 48, 0.1);  color: var(--ui-danger); }
.confirm-modal-icon--warning { background: rgba(255, 149, 0, 0.1);  color: var(--ui-warning); }
.confirm-modal-icon--info    { background: rgba(var(--ui-accent-rgb), 0.10);  color: var(--ui-accent); }
.confirm-modal-title {
    font-size: var(--text-title-3);
    font-weight: 700;
    color: var(--ui-text);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}
.confirm-modal-desc {
    font-size: var(--text-footnote);
    color: var(--ui-text);
    line-height: 1.7;
    text-align: left;  /* タイトルは中央、説明文は左寄せ */
}
.confirm-modal-body {
    padding: 12px 20px 20px;
}
.confirm-modal-footer {
    display: flex;
    gap: 8px;
    padding: 14px 20px;
    border-top: 0.5px solid var(--ui-border);
    justify-content: flex-end;
}

/* ============================================================
   31. ヒーロータグ（hero-tag / hero-tag-dot）
   ダーク背景のヒーローブロックで使うピルタグ。
   パルスアニメのドット付き。
   使用例: LP・申込ページのキャッチコピー上部タグ
============================================================ */
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0.5px solid rgba(0, 113, 227, 0.3);
    background: var(--ui-accent-lt);
    padding: 5px 14px;
    border-radius: var(--ui-radius-pill);
    font-size: var(--text-caption-2);
    font-family: var(--font-mono);
    letter-spacing: .1em;
    color: var(--ui-accent);
    text-transform: uppercase;
}

/* brand-*.css で色を変える場合:
   border-color: rgba(var(--brand-primary-rgb), .3);
   background:   var(--brand-primary-lt);
   color:        var(--brand-primary);           */

.hero-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ui-accent);
    display: inline-block;
    flex-shrink: 0;
    animation: hero-tag-pulse 2s ease-in-out infinite;
}

@keyframes hero-tag-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

/* ============================================================
   32. フローティングカード（hero-float-card）
   ダーク背景の上に浮遊するすりガラス風カード。
   position:absolute で hero-cards ラッパー内に配置する。
   使用例: ヒーロー右カラムの実績・トレンド表示
============================================================ */

/* カードラッパー（相対位置の親）*/
.hero-float-cards {
    position: relative;
    height: 420px;
}
@media (max-width: 960px) {
    .hero-float-cards { display: none; } /* スマホでは非表示 */
}

/* 個別カード */
.hero-float-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--ui-radius);
    padding: 16px 18px;
}

/* 浮遊アニメ — 2種類（位相をずらす）*/
.hero-float-card.anim-1 {
    animation: hero-float-1 4s ease-in-out infinite;
}
.hero-float-card.anim-2 {
    animation: hero-float-2 5s ease-in-out infinite;
}

@keyframes hero-float-1 {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
@keyframes hero-float-2 {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}

/* カード内パーツ */
.hfc-label {
    font-size: var(--text-caption-2);
    font-family: var(--font-mono);
    color: rgba(255, 255, 255, .4);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.hfc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 0.5px solid rgba(255, 255, 255, .06);
}
.hfc-row:last-child { border-bottom: none; }

.hfc-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--ui-radius-xs);
    background: rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-subheadline);
    flex-shrink: 0;
}
.hfc-name  { font-size: var(--text-caption-1); font-weight: 600; color: #fff; flex: 1; }
.hfc-sub   { font-size: var(--text-caption-2); color: rgba(255,255,255,.4); font-family: var(--font-mono); margin-top: 1px; }
.hfc-price { font-size: var(--text-caption-1); font-family: var(--font-mono); font-weight: 500; color: var(--ui-accent); flex-shrink: 0; }

/* badge（カード内のステータス表示）*/
.hfc-badge {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: var(--ui-radius-pill);
    font-size: var(--text-caption-2);
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: .04em;
}
.hfc-badge--up  { background: rgba(52, 199, 89, .15); color: #4ade80; }
.hfc-badge--new { background: rgba(0, 113, 227, .2);  color: #93c5fd; }
.hfc-badge--hot { background: rgba(255, 149, 0, .15); color: #fbbf24; }

/* ============================================================
   34. 円形プログレスインジケーター（circle-progress / cp-*）
   SVG の stroke-dashoffset で円弧の長さを制御。
   割合に応じてカラーが変わる自動判定バリアントあり。

   使い方:
     JSで makeCircleProgress({size, stroke, pct, colorClass, icon}) を呼ぶ
     または HTML + CSS のみで静的に使う（下記参照）

   カラー自動判定（autoProgressColor(pct)）:
     pct >= 70 → cp-green（良好）
     pct >= 40 → cp-amber（注意）
     pct <  40 → cp-red  （要対応）

   サイズバリアント:
     .cp--sm  32px / stroke 3px
     .cp--md  48px / stroke 4px  ← デフォルト
     .cp--lg  64px / stroke 5px
     .cp--xl  80px / stroke 6px
============================================================ */

/* ラッパー */
.cp {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* SVGを -90deg 回転して12時スタートに */
.cp svg { transform: rotate(-90deg); }

/* トラック（背景の薄い円） */
.cp-track {
    fill: none;
    stroke: var(--ui-surface-3);
    stroke-linecap: round;
}

/* プログレスバー */
.cp-bar {
    fill: none;
    stroke-linecap: round;
    transition: stroke-dashoffset .6s cubic-bezier(.25, .46, .45, .94),
                stroke .3s ease;
}

/* 中央コンテンツ（数値・アイコン）*/
.cp-inner {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    pointer-events: none;
}

.cp-val {
    font-family: var(--font-mono);
    font-weight: 600;
    line-height: 1;
    color: var(--ui-text);
}

.cp-icon { line-height: 1; }

/* ── カラーバリアント ── */
.cp-blue  .cp-bar { stroke: var(--ui-accent); }
.cp-green .cp-bar { stroke: var(--ui-success); }
.cp-red   .cp-bar { stroke: var(--ui-danger); }
.cp-amber .cp-bar { stroke: var(--ui-warning); }
.cp-gray  .cp-bar { stroke: var(--ui-text-muted); }

/* ── サイズバリアント ── */
.cp--sm { width: 32px; height: 32px; }
.cp--md { width: 48px; height: 48px; }
.cp--lg { width: 64px; height: 64px; }
.cp--xl { width: 80px; height: 80px; }

.cp--sm .cp-val { font-size: var(--text-caption-2); }
.cp--md .cp-val { font-size: var(--text-caption-1); }
.cp--lg .cp-val { font-size: var(--text-footnote); }
.cp--xl .cp-val { font-size: var(--text-headline); }

.cp--sm .cp-icon { font-size: var(--text-caption-2); }
.cp--md .cp-icon { font-size: var(--text-footnote); }
.cp--lg .cp-icon { font-size: var(--text-callout); }
.cp--xl .cp-icon { font-size: var(--text-title-3); }

/* ============================================================
   35. タブ（page-tab / tab-content）
   ページコンテンツを切り替えるタブUI。3パターン。

   パターン①: アンダーラインタブ（.tab-bar / .tab-btn）
     管理画面・詳細ページのメインナビに使う
   パターン②: ピルタブ（.tab-pills / .tab-pill）
     セクション内の切り替えに使う
   パターン③: ボックスタブ（.tab-box / .tab-box-btn）
     カード内・コンパクトな切り替えに使う

   共通: .tab-content / .tab-content.active でコンテンツ表示切替
============================================================ */

/* ── ① アンダーラインタブ ── */
.tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 0.5px solid var(--ui-border);
    background: var(--ui-surface);
    overflow-x: auto;
    scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    font-size: var(--text-footnote);
    font-weight: 500;
    color: var(--ui-text-sub);
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--ui-transition);
    font-family: inherit;
    margin-bottom: -0.5px;  /* border-bottomに揃える */
}
.tab-btn:hover {
    color: var(--ui-text);
    background: var(--ui-surface-2);
}
.tab-btn.active {
    color: var(--ui-accent);
    border-bottom-color: var(--ui-accent);
    font-weight: 600;
}
/* バッジ付き */
.tab-btn .tab-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface-3);
    color: var(--ui-text-muted);
    font-size: var(--text-caption-2);
    font-family: var(--font-mono);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tab-btn.active .tab-badge {
    background: var(--ui-accent-lt, rgba(var(--ui-accent-rgb), 0.10));
    color: var(--ui-accent);
}

/* ── ② ピルタブ ── */
.tab-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.tab-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 14px;
    border-radius: var(--ui-radius-pill);
    border: 0.5px solid var(--ui-border-2);
    background: var(--ui-surface);
    color: var(--ui-text-sub);
    font-size: var(--text-footnote);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--ui-transition);
    font-family: inherit;
    white-space: nowrap;
}
.tab-pill:hover {
    border-color: var(--ui-accent);
    color: var(--ui-accent);
    background: rgba(0, 113, 227, .04);
}
.tab-pill.active {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 113, 227, .25);
}

/* ── ③ ボックスタブ ── */
.tab-box {
    display: flex;
    background: var(--ui-surface-2);
    border-radius: var(--ui-radius-sm);
    padding: 3px;
    gap: 2px;
}
.tab-box-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--ui-text-sub);
    font-size: var(--text-footnote);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--ui-transition);
    font-family: inherit;
    white-space: nowrap;
}
.tab-box-btn:hover { color: var(--ui-text); }
.tab-box-btn.active {
    background: var(--ui-surface);
    color: var(--ui-text);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .06);
}

/* ── コンテンツ表示切替（共通）── */
.tab-content         { display: none; }
.tab-content.active  { display: block; }
.tab-content.active.d-flex  { display: flex; }  /* flexレイアウトの場合 */
.tab-content.active.d-grid  { display: grid; }  /* gridレイアウトの場合 */

/* ============================================================
   フロント向けグローバルナビ（.g-nav-front）
   ============================================================
   管理画面の .g-nav と同一の HTML 構造・クラス名を使いつつ、
   --brand-* 変数で色をブランドカラーに上書きしたバリアント。

   使い分け:
     管理画面  → <nav class="g-nav ...">          ← --ui-accent（Apple Blue）
     フロント  → <nav class="g-nav g-nav-front">  ← --brand-primary（ブランド色）

   追加するのは g-nav-front の差分のみ。
   g-nav の構造・レスポンシブ・すりガラスはそのまま継承する。

   HTMLは管理画面と完全に同一:
     <nav class="g-nav g-nav-front d-flex align-items-center px-4">
       <a class="navbar-brand">リビング館</a>
       <ul class="navbar-nav g-nav-links d-flex flex-row gap-1">
         <li><a class="nav-link active">ホーム</a></li>
         <li><a class="nav-link">商品リスト</a></li>
         <li><a class="nav-link">買取について</a></li>
         <li><a class="nav-link">よくある質問</a></li>
       </ul>
       <div class="ms-auto d-flex align-items-center gap-2">
         <a href="#" class="g-nav-front-cta">WEB査定</a>
         <div class="g-nav-notif"><i class="bi bi-bag"></i></div>
         <button class="g-nav-toggler" onclick="...">
           <i class="bi bi-list"></i>
         </button>
       </div>
     </nav>
     <div class="g-nav-drawer g-nav-front-drawer" id="gNavDrawer">
       <a class="nav-link active">ホーム</a>
     </div>
   ============================================================ */

/* ── フロントナビ 幅制限ラッパー ── */
/* container の代わりに使う。flex を壊さず max-width だけ制限できる */
.g-nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* ②グローバルメニュー：ロゴ中央＋下にメニューが並ぶパターン（PC幅のみ。モバイルは通常のハンバーガー表示のまま） */
/* ── ブランドカラー上書き ── */
.g-nav-front {
    /* ⑥背景設定（theme_bg_color）を薄く反映し、テーマカラーとヘッダーを連動させる */
    background: rgba(var(--header-bg-rgb, 255, 255, 255), 0.82);
}

/* ブランドロゴ */
.g-nav-front .navbar-brand {
    color: var(--brand-ink, var(--ui-text));
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ブランドロゴマーク（任意）*/
.g-nav-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--brand-primary, var(--ui-accent));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-footnote);
    font-weight: 700;
    flex-shrink: 0;
}

/* ナビリンク — アクセントカラーをブランドに */
.g-nav-front .nav-link {
    color: var(--brand-ink-muted, var(--ui-text-sub)) !important;
}
.g-nav-front .nav-link:hover {
    color: var(--brand-ink, var(--ui-text)) !important;
    background: var(--brand-surface-2, var(--ui-surface-3));
}
.g-nav-front .nav-link.active {
    color: var(--brand-primary-text, var(--brand-primary, var(--ui-accent))) !important;
    background: var(--brand-primary-lt, var(--ui-accent-lt));
}

/* ドロワー — ブランドカラー */
.g-nav-front-drawer {
    background: rgba(255, 255, 255, 0.96);
}
.g-nav-front-drawer .nav-link {
    color: var(--brand-ink-sub, var(--ui-text-sub)) !important;
}
.g-nav-front-drawer .nav-link:hover {
    color: var(--brand-ink, var(--ui-text)) !important;
    background: var(--brand-surface-2, var(--ui-surface-3));
}
.g-nav-front-drawer .nav-link.active {
    color: var(--brand-primary-text, var(--brand-primary, var(--ui-accent))) !important;
    background: var(--brand-primary-lt, var(--ui-accent-lt));
}

/* 通知ドット — ブランドカラー */
.g-nav-front .ndot {
    background: var(--brand-primary, var(--ui-danger));
}

/* CTAボタン（フロント専用 — 管理画面にはない）*/
.g-nav-front-cta {
    height: 32px;
    padding: 0 14px;
    border-radius: var(--brand-radius-pill, var(--ui-radius-pill));
    border: none;
    background: var(--brand-primary, var(--ui-accent));
    color: #fff;
    font-size: var(--text-caption-1);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--ui-transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.g-nav-front-cta:hover {
    background: var(--brand-primary-hover, var(--ui-accent-hover));
    box-shadow: 0 4px 12px var(--brand-primary-shadow, rgba(0, 113, 227, 0.3));
    color: #fff;
}

/* アバター — ブランドカラー */
.g-nav-front .g-nav-avatar {
    background: var(--brand-primary, var(--ui-accent));
}

/* ============================================================
   グローバルナビ — 検索ドロップダウン（.g-nav-search）
   ============================================================
   虫眼鏡ボタンクリックで .g-nav の直下にドロップ展開。
   利用者・スタッフ・記録など複数リソースの横断検索に使う。

   HTML 構造:
     <nav class="g-nav ...">
       ...
       <button class="g-nav-search-trigger" id="searchTrigger"
         onclick="gNavSearchToggle()">
         <i class="bi bi-search"></i>
       </button>
       ...
     </nav>

     <!-- g-nav の直後に配置 -->
     <div class="g-nav-search-dropdown" id="gNavSearch">
       <div class="g-nav-search-inner">
         <div class="g-nav-search-wrap">
           <i class="bi bi-search g-nav-search-icon"></i>
           <input class="g-nav-search-input" type="text"
             placeholder="利用者・スタッフ・記録を検索..."
             wire:model.live="query">
           <button class="g-nav-search-clear" onclick="gNavSearchClose()">
             <i class="bi bi-x-lg"></i>
           </button>
         </div>
         <!-- 検索候補チップ（任意） -->
         <div class="g-nav-search-hints">
           <span class="g-nav-search-hint-label">よく検索される：</span>
           <button class="g-nav-search-chip">山田 花子</button>
           <button class="g-nav-search-chip">訪問スケジュール</button>
         </div>
         <!-- 検索結果（Livewire で動的に注入） -->
         <div class="g-nav-search-results" id="gNavResults">
           <!-- .g-nav-search-result-item を繰り返す -->
         </div>
       </div>
     </div>

   JS（gNavSearchToggle / gNavSearchClose）は
   app.blade.php に1度だけ記述すれば全ページで動く。
   Livewire 連携は wire:model.live でリアルタイム検索可能。
============================================================ */

/* ── トリガーボタン ── */
.g-nav-search-trigger {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-xs);
    cursor: pointer;
    color: var(--ui-text-sub);
    font-size: var(--text-subheadline);
    transition: all var(--ui-transition);
    flex-shrink: 0;
}
.g-nav-search-trigger:hover {
    background: var(--ui-surface-3);
    color: var(--ui-text);
}
.g-nav-search-trigger.is-active {
    background: var(--ui-surface-3);
    color: var(--ui-text);
}

/* フロント版（--brand-* で色が変わる）*/
.g-nav-front .g-nav-search-trigger:hover,
.g-nav-front .g-nav-search-trigger.is-active {
    background: var(--brand-surface-2, var(--ui-surface-3));
    color: var(--brand-ink, var(--ui-text));
}

/* ── ドロップダウン本体 ── */
.g-nav-search-dropdown {
    display: none;
    position: sticky;     /* g-nav が sticky なので直後に sticky で追従 */
    top: 52px;            /* g-nav の高さ */
    z-index: 199;         /* g-nav(200) より1段下 */
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.5px solid var(--ui-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.g-nav-search-dropdown.is-open { display: block; }

.g-nav-search-inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 12px 24px 16px;
}

/* ── 入力欄ラッパー ── */
.g-nav-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.g-nav-search-icon {
    position: absolute;
    left: 12px;
    font-size: var(--text-subheadline);
    color: var(--ui-text-muted);
    pointer-events: none;
}
.g-nav-search-input {
    width: 100%;
    height: 40px;
    padding: 0 40px 0 36px;
    border: 0.5px solid var(--ui-border-2);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-bg);
    font-size: var(--text-subheadline);
    color: var(--ui-text);
    font-family: inherit;
    outline: none;
    transition: all var(--ui-transition);
}
.g-nav-search-input:focus {
    border-color: var(--ui-accent);
    background: var(--ui-surface);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, .08);
}
.g-nav-search-input::placeholder { color: var(--ui-text-placeholder); }

/* フロント版フォーカスリング */
.g-nav-front ~ .g-nav-search-dropdown .g-nav-search-input:focus {
    border-color: var(--brand-primary, var(--ui-accent));
    box-shadow: 0 0 0 3px var(--brand-primary-lt, var(--ui-accent-lt));
}

/* クリアボタン */
.g-nav-search-clear {
    position: absolute;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: var(--ui-surface-3);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    transition: all var(--ui-transition);
}
.g-nav-search-clear:hover { background: var(--ui-border-2); color: var(--ui-text); }
.g-nav-search-input:not(:placeholder-shown) ~ .g-nav-search-clear { display: flex; }

/* ── 候補チップ ── */
.g-nav-search-hints {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.g-nav-search-hint-label {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    white-space: nowrap;
}
.g-nav-search-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--ui-radius-pill);
    border: 0.5px solid var(--ui-border-2);
    background: var(--ui-surface);
    font-size: var(--text-caption-2);
    font-weight: 500;
    color: var(--ui-text-sub);
    cursor: pointer;
    transition: all var(--ui-transition);
    font-family: inherit;
}
.g-nav-search-chip:hover {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: #fff;
}

/* ── 検索結果リスト ── */
.g-nav-search-results {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.g-nav-search-results:empty { display: none; }

/* 結果アイテム */
.g-nav-search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--ui-radius-xs);
    cursor: pointer;
    transition: background var(--ui-transition);
    text-decoration: none;
    color: var(--ui-text);
}
.g-nav-search-result-item:hover { background: var(--ui-surface-2); }
.g-nav-search-result-item.is-selected { background: var(--ui-surface-2); }

.g-nav-search-result-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-subheadline);
    flex-shrink: 0;
    color: var(--ui-text-sub);
}
.g-nav-search-result-body { flex: 1; min-width: 0; }
.g-nav-search-result-name {
    font-size: var(--text-footnote);
    font-weight: 600;
    color: var(--ui-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.g-nav-search-result-sub {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    margin-top: 1px;
}
.g-nav-search-result-kbd {
    font-size: var(--text-caption-2);
    font-family: var(--font-mono);
    color: var(--ui-text-muted);
    border: 0.5px solid var(--ui-border-2);
    border-radius: 4px;
    padding: 1px 5px;
    flex-shrink: 0;
}

/* 区切りラベル */
.g-nav-search-group-label {
    font-size: var(--text-caption-2);
    font-family: var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ui-text-muted);
    padding: 8px 12px 4px;
}

/* ============================================================
   グローバルナビ — スライドドロワー強化版
   ============================================================
   クライアント要件:
     ① ハンバーガーボタンが開いたとき ✕ マークに切り替わる
     ② ドロワーが右からスライドして展開する

   変更点:
     .g-nav-toggler  → bi-list アイコンをやめCSS3本線に変更
     .g-nav-drawer   → 右スライド版に変更（position:fixed）
     .g-nav-overlay  → 背景オーバーレイ（クリックで閉じる）追加

   JS:
     gNavToggle() / gNavClose() を app.blade.php に追加

   HTML 変更点:
     ❌ <button class="g-nav-toggler"><i class="bi bi-list"></i></button>
     ✅ <button class="g-nav-toggler" onclick="gNavToggle()">
          <div class="ham-icon"><span></span><span></span><span></span></div>
        </button>

     <!-- g-nav の直後に追加 -->
     <div class="g-nav-overlay" onclick="gNavClose()"></div>
============================================================ */

/* ── ハンバーガー → ✕ アニメーション ── */

/* CSS 3本線（bi-list の代わり）*/
.ham-icon {
    width: 18px;
    height: 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}
.ham-icon span {
    display: block;
    height: 2px;
    /* background: currentColor; */
    background-color: #000;
    border-radius: 2px;
    transform-origin: center;
    transition:
        transform .3s cubic-bezier(.25, .46, .45, .94),
        opacity   .2s ease;
}

/* .is-open のとき ✕ に変形 */
/* ✕アニメーション廃止済 */

/* ── スライドドロワー（右から展開）── */

/* フルスクリーンメニュー（✕アニメーション廃止 / ×はドロワー右上に配置）*/
.g-nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 201;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    display: flex;
    flex-direction: column;
    padding: 72px 40px 48px;
    gap: 4px;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}
.g-nav-drawer.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ── × 閉じるボタン（右上固定）── */
.g-nav-drawer-close {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: var(--ui-radius-xs);
    border: none;
    background: transparent;
    color: var(--ui-text-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--ui-transition), color var(--ui-transition);
    -webkit-tap-highlight-color: transparent;
    z-index: 202;
}
.g-nav-drawer-close:hover { background: var(--ui-surface-3); color: var(--ui-text); }
.g-nav-drawer-close svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    display: block;
}

/* ── ドロワー内リンク ── */
.g-nav-drawer .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-radius: var(--ui-radius-sm);
    font-size: var(--text-headline);
    font-weight: 500;
    color: var(--ui-text);
    text-decoration: none;
    opacity: 0;
    transform: translateY(8px);
    transition: background var(--ui-transition),
                opacity .25s ease,
                transform .25s ease;
}
.g-nav-drawer.is-open .nav-link                  { opacity: 1; transform: translateY(0); }
.g-nav-drawer.is-open .nav-link:nth-child(2)     { transition-delay: .04s; }
.g-nav-drawer.is-open .nav-link:nth-child(3)     { transition-delay: .08s; }
.g-nav-drawer.is-open .nav-link:nth-child(4)     { transition-delay: .12s; }
.g-nav-drawer.is-open .nav-link:nth-child(5)     { transition-delay: .16s; }
.g-nav-drawer.is-open .nav-link:nth-child(6)     { transition-delay: .20s; }
.g-nav-drawer .nav-link:hover  { background: var(--ui-surface-2); }
.g-nav-drawer .nav-link.active { color: var(--ui-accent); background: rgba(var(--ui-accent-rgb), .06); }

/* ── ドロワー内パーツ ── */
/* g-nav-overlay: フルスクリーン方式では不要 */
.g-nav-overlay, .g-nav-overlay.is-open { display: none; }


/* ドロワー内リンク — 順番にフェードイン */
.g-nav-drawer .nav-link {
    /* 見た目 */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--ui-radius-xs);
    font-size: var(--text-subheadline);
    font-weight: 500;
    color: var(--ui-text-sub) !important;
    text-decoration: none;

    /* フェードイン */
    opacity: 0;
    transform: translateX(16px);
    transition:
        background var(--ui-transition),
        color var(--ui-transition),
        opacity .25s ease,
        transform .25s ease !important;
}
.g-nav-drawer .nav-link:hover {
    background: var(--ui-surface-2);
    color: var(--ui-text) !important;
    text-decoration: none;
}
.g-nav-drawer .nav-link.active {
    background: var(--ui-accent-lt);
    color: var(--ui-accent) !important;
    font-weight: 600;
}
.g-nav-drawer.is-open .nav-link { opacity: 1; transform: translateX(0); }
.g-nav-drawer.is-open .nav-link:nth-child(1) { transition-delay: .05s; }
.g-nav-drawer.is-open .nav-link:nth-child(2) { transition-delay: .09s; }
.g-nav-drawer.is-open .nav-link:nth-child(3) { transition-delay: .13s; }
.g-nav-drawer.is-open .nav-link:nth-child(4) { transition-delay: .17s; }
.g-nav-drawer.is-open .nav-link:nth-child(5) { transition-delay: .21s; }
.g-nav-drawer.is-open .nav-link:nth-child(6) { transition-delay: .25s; }

/* ── ドロワー内パーツ ── */

/* セクションラベル（グループ区切り） */
.g-nav-drawer-label {
    font-size: var(--text-caption-2);
    font-family: var(--font-mono);
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--ui-text-muted);
    padding: 16px 12px 6px;
}

/* 区切り線 */
.g-nav-drawer-divider {
    height: 0.5px;
    background: var(--ui-border);
    margin: 8px 12px;
}

/* ユーザー情報エリア（ドロワー上部） */
.g-nav-drawer-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 8px;
    margin-bottom: 4px;
}
.g-nav-drawer-user-name {
    font-size: var(--text-footnote);
    font-weight: 700;
    color: var(--ui-text);
}
.g-nav-drawer-user-role {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    margin-top: 1px;
}

/* CTAボタン（ドロワー下部） */
.g-nav-drawer-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 0;
    margin-top: 8px;
}
.g-nav-drawer-cta .btn-primary-app {
    width: 100%;
    justify-content: center;
}
.g-nav-drawer-cta .btn-cancel {
    width: 100%;
    justify-content: center;
}

/* ── 背景オーバーレイ ── */
.g-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 198;
    background: rgba(0, 0, 0, .25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    cursor: pointer;
}
.g-nav-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* フェードイン */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fade-up.visible{opacity:1;transform:none}
@keyframes hero-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ============================================================
   36. アコーディオン（accordion / FAQ）
   開閉式のQ&Aや折りたたみコンテンツ。
   .open クラスで展開。JS不要（onclick でトグル）。

   バリエーション:
     .accordion-item            — シンプル版（管理画面）
     .front-faq-item            — FAQ版（フロントページ）
============================================================ */

/* ── シンプルアコーディオン（管理画面向け）── */
.accordion-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.accordion-item {
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
}
.accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    transition: background var(--ui-transition);
    font-size: var(--text-subheadline);
    font-weight: 600;
    color: var(--ui-text);
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.accordion-trigger:hover { background: var(--ui-surface-2); }
.accordion-arrow {
    font-size: var(--text-caption-1);
    color: var(--ui-text-muted);
    flex-shrink: 0;
    transition: transform var(--ui-transition);
}
.accordion-item.open .accordion-arrow { transform: rotate(180deg); }
.accordion-body {
    display: none;
    padding: 0 16px 14px;
    font-size: var(--text-subheadline);
    color: var(--ui-text);
    line-height: 1.8;
}
.accordion-item.open .accordion-body { display: block; }

/* ============================================================
   40. もっと見るリンク（.more）
   テキストリンク系。シンプルなアンカー。
   hover で下線 + 色変化。

   バリエーション:
     .more            — デフォルト（アクセントカラー）
     .more--muted     — グレー（控えめ）
     .more--arrow     — 矢印付き（→ アイコン）
============================================================ */
.more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-subheadline);
    font-weight: 500;
    color: var(--ui-accent);
    text-decoration: none;
}
.more:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* サイズバリアント */
.more--sm { font-size: var(--text-caption-1); }
.more--xs { font-size: var(--text-caption-2); }
.more--lg { font-size: var(--text-callout);   }

/* グレー版 */
.more--muted {
    color: var(--ui-text-muted);
}

/* 右矢印 → */
.more--arrow::after {
    content: "→";
    font-size: var(--text-footnote);
    text-decoration: none;
    display: inline-block; /* text-decoration を切るために必要 */
}

/* 斜め右上矢印 ↗（外部リンク）*/
.more--arrow-up::after {
    content: "↗";
    font-size: var(--text-footnote);
    text-decoration: none;
    display: inline-block;
}

/* フロント用（ブランドカラー）*/
.more--brand {
    color: var(--brand-primary, var(--ui-accent));
}

/* ============================================================
   43. コンテキストメニュー（context-menu）
   「…」ボタンまたはカードクリックで表示する黒背景のサブメニュー。

   構造:
     .context-menu-wrap    → 位置の基準（position:relative）
       .context-menu-trigger → 「…」ボタン
       .context-menu         → メニュー本体（黒背景）
         .context-menu-item  → メニュー項目
         .context-menu-divider → 区切り線

   JS: toggleContextMenu(trigger) で .is-open をトグル
============================================================ */
.context-menu-wrap {
    position: relative;
    display: inline-block;
}
.context-menu-trigger {
    width: 28px;
    height: 28px;
    border-radius: var(--ui-radius-xs);
    border: none;
    background: transparent;
    color: var(--ui-text-muted);
    font-size: var(--text-callout);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--ui-transition);
    font-family: inherit;
}
.context-menu-trigger:hover {
    background: var(--ui-surface-3);
    color: var(--ui-text);
}
.context-menu-trigger.is-active {
    background: var(--ui-surface-3);
    color: var(--ui-text);
}
.context-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: #1d1d1f;
    border-radius: var(--ui-radius-sm);
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    padding: 6px;
    z-index: 500;
}
.context-menu.is-open { display: block; }
.context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--ui-radius-xs);
    font-size: var(--text-footnote);
    font-weight: 500;
    color: rgba(255,255,255,.85);
    cursor: pointer;
    transition: background var(--ui-transition);
    text-decoration: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.context-menu-item:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
}
.context-menu-item i {
    font-size: var(--text-footnote);
    opacity: .7;
    flex-shrink: 0;
}
.context-menu-item--danger {
    color: rgba(255,100,100,.9);
}
.context-menu-item--danger:hover {
    background: rgba(255,59,48,.15);
    color: #ff6b6b;
}
.context-menu-divider {
    height: 0.5px;
    background: rgba(255,255,255,.1);
    margin: 4px 0;
}

/* ============================================================
   44. テーブル（ui-table）
   データ集計・一覧表示用。ui-card の中に入れて使う。
   数値列は .col-num で右揃え・等幅フォント。
============================================================ */
.ui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-subheadline);
}
.ui-table thead tr {
    border-bottom: 0.5px solid var(--ui-border);
    background: var(--ui-surface-2);
}
.ui-table th {
    padding: 10px 16px;
    font-size: var(--text-caption-1);
    font-weight: 600;
    color: var(--ui-text-muted);
    text-align: left;
    white-space: nowrap;
}
.ui-table td {
    padding: 12px 16px;
    color: var(--ui-text);
    border-bottom: 0.5px solid var(--ui-border);
}
.ui-table tbody tr:last-child td { border-bottom: none; }
.ui-table tbody tr:hover td { background: var(--ui-surface-2); }
.ui-table .col-num {
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--text-footnote);
}
.ui-table tfoot tr {
    border-top: 0.5px solid var(--ui-border-2);
    background: var(--ui-surface-2);
}
.ui-table tfoot td {
    padding: 10px 16px;
    font-weight: 700;
    border-bottom: none;
}

/* ============================================================
   45. ドキュメント・会社概要（doc-*）
   会社概要・プライバシーポリシー・利用規約など
   読み物系ページの標準スタイル。

   使用例:
     <div class="doc-section">
       <h2 class="doc-h2">会社情報</h2>
       <table class="doc-table">...</table>
     </div>
============================================================ */
.doc-section {
    margin-bottom: 40px;
}
.doc-section:last-child {
    margin-bottom: 0;
}

.doc-h2 {
    font-size: var(--text-title-3);
    font-weight: 700;
    color: var(--ui-text);
    letter-spacing: -.02em;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ui-accent);
    display: inline-block;
}

.doc-p {
    font-size: var(--text-subheadline);
    color: var(--ui-text);
    line-height: 1.9;
    margin-bottom: 14px;
}
.doc-p:last-child { margin-bottom: 0; }

/* テーブル */
.doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-subheadline);
}
.doc-table tr {
    border-bottom: 0.5px solid var(--ui-border);
}
.doc-table tr:last-child {
    border-bottom: none;
}
.doc-table th {
    padding: 12px 20px;
    font-size: var(--text-footnote);
    font-weight: 600;
    color: var(--ui-text-muted);
    text-align: left;
    /* カード背景色・ページ背景色（グラデーション設定時）の影響を受けないよう固定のグレーにする */
    background-color: var(--ui-surface-2, #f5f5f7) !important;
    white-space: nowrap;
    vertical-align: top;
    width: 160px;
}
.doc-table td {
    padding: 12px 20px;
    color: var(--ui-text);
    line-height: 1.75;
    vertical-align: top;
    /* カード背景色・ページ背景色（グラデーション設定時）の影響を受けないよう常に白固定 */
    background-color: #ffffff !important;
}
.doc-table td a {
    color: var(--ui-accent);
    font-weight: 600;
    text-decoration: none;
}
.doc-table td a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* リスト */
.doc-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.doc-ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--text-subheadline);
    color: var(--ui-text);
    line-height: 1.75;
}
.doc-ul li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ui-accent);
    flex-shrink: 0;
    margin-top: 8px;
}

/* 注意書き */
.doc-note {
    font-size: var(--text-footnote);
    color: var(--ui-text-muted);
    line-height: 1.8;
    padding: 12px 16px;
    background: var(--ui-surface-2);
    border-left: 3px solid var(--ui-accent);
    border-radius: 0 var(--ui-radius-xs) var(--ui-radius-xs) 0;
    margin-top: 12px;
}

/* レスポンシブ */
@media (max-width: 600px) {
    .doc-table th {
        width: 100px;
        padding: 10px 12px;
    }
    .doc-table td {
        padding: 10px 12px;
    }
}

/* ============================================================
   46. リスト（ui-list-*）
   汎用リストコンポーネント。管理画面・フロント両方で使用。

   パターン:
     .ui-list-disc    → ● 黒丸リスト
     .ui-list-check   → ✓ チェックリスト
     .ui-list-arrow   → → 矢印リスト
     .ui-list-num     → 番号付きリスト
     .ui-list-none    → マーカーなし（整形のみ）
     .ui-list-border  → 区切り線付きリスト（管理画面向け）
============================================================ */

/* 共通ベース */
.ui-list-disc,
.ui-list-check,
.ui-list-arrow,
.ui-list-num,
.ui-list-none,
.ui-list-border {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: var(--text-subheadline);
    color: var(--ui-text);
    line-height: 1.75;
}

/* ● 黒丸リスト */
.ui-list-disc li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.ui-list-disc li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ui-accent);
    flex-shrink: 0;
    margin-top: 8px;
}

/* ✓ チェックリスト */
.ui-list-check li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.ui-list-check li::before {
    content: '\F26E';
    font-family: 'bootstrap-icons';
    font-size: var(--text-caption-1);
    color: var(--ui-success);
    flex-shrink: 0;
    margin-top: 3px;
    font-weight: 900;
}

/* → 矢印リスト */
.ui-list-arrow li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.ui-list-arrow li::before {
    content: '\F285';
    font-family: 'bootstrap-icons';
    font-size: var(--text-caption-1);
    color: var(--ui-accent);
    flex-shrink: 0;
    margin-top: 3px;
}

/* 番号付きリスト */
.ui-list-num {
    counter-reset: ui-list-counter;
}
.ui-list-num li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    counter-increment: ui-list-counter;
}
.ui-list-num li::before {
    content: counter(ui-list-counter);
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ui-accent-lt, rgba(0,113,227,.08));
    color: var(--ui-accent);
    font-size: var(--text-caption-2);
    font-weight: 700;
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

/* マーカーなし */
.ui-list-none li {
    padding: 2px 0;
}

/* 区切り線付き（管理画面向け）*/

.ui-list-border li {
    padding: 10px 0;
    border-bottom: 0.5px solid var(--ui-border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ui-list-border li:last-child {
    border-bottom: none;
}

/* サイズバリエーション */
.ui-list-sm {
    font-size: var(--text-footnote);
    gap: 4px;
}
.ui-list-lg {
    font-size: var(--text-headline);
    gap: 10px;
}

/* インラインリスト（横並び）*/
.ui-list-inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 16px;
}

/* ============================================================
   47. 認証画面（auth-card / auth-*）
   ログイン・コード認証・アカウント追加など認証系ページの標準スタイル。
   Breezeの layouts.guest と組み合わせて使う。

   構造:
     .auth-wrap   → 外側ラッパー（中央揃え・背景）
     .auth-card   → カード本体
     .auth-logo   → ロゴエリア
     .auth-title  → ページタイトル
     .auth-desc   → 説明文
============================================================ */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-bg);
    padding: 24px;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--ui-surface);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-lg);
    overflow: hidden;
}
.auth-header {
    padding: 32px 32px 0;
    text-align: center;
}
.auth-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    text-decoration: none;
}
.auth-logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--ui-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--text-footnote);
    font-weight: 800;
}
.auth-logo-name {
    font-size: var(--text-subheadline);
    font-weight: 700;
    color: var(--ui-text);
}
.auth-title {
    font-size: var(--text-title-3);
    font-weight: 700;
    color: var(--ui-text);
    letter-spacing: -.02em;
    margin-bottom: 8px;
}
.auth-desc {
    font-size: var(--text-footnote);
    color: var(--ui-text-muted);
    line-height: 1.75;
    margin-bottom: 0;
}
.auth-body {
    padding: 24px 32px 32px;
}
.auth-footer {
    padding: 16px 32px;
    background: var(--ui-surface-2);
    border-top: 0.5px solid var(--ui-border);
    text-align: center;
    font-size: var(--text-caption-1);
    color: var(--ui-text-muted);
}
.auth-footer a {
    color: var(--ui-accent);
    text-decoration: none;
    font-weight: 600;
}
.auth-footer a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* コード入力（大きめ）*/
.auth-code-input {
    font-size: var(--text-title-1);
    font-family: var(--font-mono);
    letter-spacing: .3em;
    text-align: center;
    height: 64px;
}
/* コード表示バッジ */
.auth-step-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-caption-2);
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ui-accent);
    background: var(--ui-accent-lt, rgba(0,113,227,.08));
    padding: 3px 10px;
    border-radius: 100px;
    margin-bottom: 12px;
}

/* ============================================================
   48. 画像付きカード（ui-card-img / ui-card-body / ui-card-grid）
   ui-card に画像を持たせる拡張クラス群。
   ui-card に overflow:hidden;position:relative を付けて使う。
============================================================ */

/* カード画像エリア */
.ui-card-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

/* 画像なしプレースホルダー */
.ui-card-img-placeholder {
    width: 100%;
    height: 160px;
    background: var(--ui-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-text-muted);
    font-size: var(--text-title-1);
}

/* カード本体テキストエリア */
.ui-card-body {
    padding: 12px 16px;
}
.ui-card-body-name {
    font-weight: 700;
    font-size: var(--text-subheadline);
    margin-bottom: 2px;
    color: var(--ui-text);
}
.ui-card-body-sub {
    font-size: var(--text-caption-1);
    color: var(--ui-text-muted);
}
.ui-card-body-price {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--ui-accent);
    margin-top: 8px;
}

/* バッジ（右上固定）*/
.ui-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* グリッドレイアウト */
.ui-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 768px) {
    .ui-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .ui-card-grid { grid-template-columns: 1fr; }
}

/* 列数指定バリエーション。
   .ui-card-grid との併用（class="ui-card-grid ui-card-grid--4"）を想定しつつ、
   付け忘れて modifier 単体で使われても崩れないよう display:grid / gap を自己完結させてある。
   ブレークポイント（768 / 480）はベースと揃えてあるので、崩れ方の一貫性は保たれる。 */
.ui-card-grid--2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 480px) {
    .ui-card-grid--2 { grid-template-columns: 1fr; }
}

.ui-card-grid--3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 768px) {
    .ui-card-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .ui-card-grid--3 { grid-template-columns: 1fr; }
}

/* 4列は3→2→1の3段階に分けたほうが崩れが自然（768pxでいきなり4→2は詰まりすぎるため、
   1024pxに中間ブレークポイントを1つ追加）。 */
.ui-card-grid--4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 1024px) {
    .ui-card-grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .ui-card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .ui-card-grid--4 { grid-template-columns: 1fr; }
}

/* ui-card に画像を使う場合の必須スタイル */
.ui-card--img {
    overflow: hidden;
    position: relative;
    border: 1.5px solid var(--ui-border);
    cursor: pointer;
    transition: border-color var(--ui-transition), box-shadow var(--ui-transition);
}
.ui-card--img.is-selected {
    border-color: var(--ui-accent);
    border-width: 2px;
    background: rgba(var(--ui-accent-rgb), 0.06);
    box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), 0.12);
}

/* ============================================================
   45. NEWSセクション（news-list / news-card-grid）
   ============================================================ */
.news-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.news-ttl { font-size: var(--text-title-3); font-weight: 700; color: var(--ui-text); }

/* リスト型 */
.news-list { background: linear-gradient(180deg, var(--ui-surface) 0%, #ffffff 100%); border-radius: var(--ui-radius); overflow: hidden; border: 0.5px solid var(--ui-border); }
.news-list-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 0.5px solid var(--ui-border);
    text-decoration: none;
    transition: background var(--ui-transition);
}
.news-list-row:last-child { border-bottom: none; }
.news-list-row:hover { background: var(--ui-surface-2); }
.news-list-date  { font-size: var(--text-caption-2); font-family: var(--font-mono); color: var(--ui-text-muted); white-space: nowrap; }
.news-list-title { font-size: var(--text-footnote); color: var(--ui-text); font-weight: 500; }
@media (max-width: 600px) {
    .news-list-row { grid-template-columns: 1fr; gap: 4px; }
}

/* カード型 */
.news-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px) { .news-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .news-card-grid { grid-template-columns: 1fr; } }
.news-card {
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;
    text-decoration: none;
    display: block;
    transition: all var(--ui-transition);
}
.news-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.news-card-img { aspect-ratio: 16/9; overflow: hidden; }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card-body { padding: 12px 14px; }
.news-card-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 5px; }
.news-card-date  { font-size: var(--text-caption-2); color: var(--ui-text-muted); font-family: var(--font-mono); }
.news-card-title { font-size: var(--text-footnote); font-weight: 600; color: var(--ui-text); line-height: 1.5; }

/* ============================================================
   46. ブログ記事レイアウト（blog-layout）
   ※ 実際の定義は front.css 側にあります（このファイルの重複定義は削除済み）。
   ============================================================ */

/* メタ情報 */
.blog-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

/* タイトル・タグ */
.blog-title { font-size: var(--text-title-2); font-weight: 700; letter-spacing: -.02em; line-height: 1.35; margin-bottom: 12px; color: var(--ui-text); }
.blog-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }

/* 本文 */
.blog-body { font-size: var(--text-subheadline); line-height: 1.9; color: var(--ui-text); }
.blog-body h2 {
    font-size: var(--text-title-3); font-weight: 700; color: var(--ui-text);
    margin: 24px 0 10px; padding-left: 12px;
    border-left: 3px solid var(--ui-accent);
}
.blog-body h3 { font-size: var(--text-headline); font-weight: 700; color: var(--ui-text); margin: 18px 0 8px; }
.blog-body p   { margin-bottom: 14px; }
.blog-body img { width: 100%; border-radius: var(--ui-radius-sm); margin: 14px 0; }
.blog-body ul, .blog-body ol { padding-left: 20px; margin-bottom: 14px; }

/* ============================================================
   47. タイムスケジュール（縦型）
   ============================================================ */

/* シンプル版（タイムライン）*/
.timeschedule { position: relative; padding-left: 60px; }
.timeschedule::before {
    content: "";
    position: absolute; left: 30px; top: 8px; bottom: 8px;
    width: 2px; background: var(--ui-border); border-radius: 2px;
}
.timeschedule-item { position: relative; margin-bottom: 20px; }
.timeschedule-item:last-child { margin-bottom: 0; }
.timeschedule-dot {
    position: absolute; left: -36px; top: 3px;
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--ui-surface);
}
.timeschedule-dot--accent  { background: var(--ui-accent); }
.timeschedule-dot--success { background: var(--ui-success); }
.timeschedule-dot--warning { background: var(--ui-warning); }
.timeschedule-dot--muted   { background: var(--ui-text-muted); }
.timeschedule-time { font-size: var(--text-caption-1); font-family: var(--font-mono); font-weight: 700; margin-bottom: 2px; }
.timeschedule-time--accent  { color: var(--ui-accent); }
.timeschedule-time--success { color: var(--ui-success); }
.timeschedule-time--warning { color: var(--ui-warning); }
.timeschedule-time--muted   { color: var(--ui-text-muted); }
.timeschedule-ttl  { font-size: var(--text-footnote); font-weight: 700; color: var(--ui-text); margin-bottom: 2px; }
.timeschedule-desc { font-size: var(--text-caption-1); color: var(--ui-text-muted); line-height: 1.7; }

/* カード版 */
.timeschedule-cards { display: flex; flex-direction: column; gap: 10px; }
.timeschedule-card {
    display: grid; grid-template-columns: 64px 1fr;
    background: var(--ui-surface); border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius); overflow: hidden;
}
.timeschedule-card-left {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 12px 8px; gap: 2px;
}
.timeschedule-card-left--accent  { background: rgba(var(--ui-accent-rgb), .10); color: var(--ui-accent); }
.timeschedule-card-left--success { background: rgba(52, 199, 89, .10); color: var(--ui-success); }
.timeschedule-card-left--warning { background: rgba(255, 149, 0, .10); color: var(--ui-warning); }
.timeschedule-card-left--muted   { background: var(--ui-surface-2); color: var(--ui-text-muted); }
.timeschedule-card-left i    { font-size: var(--text-title-3); }
.timeschedule-card-time { font-size: var(--text-caption-2); font-family: var(--font-mono); font-weight: 700; }
.timeschedule-card-body { padding: 12px 16px; }

/* ============================================================
   行アクションメニュー（list-row の … ポップアップ）
   ============================================================ */

/* クリック可能エリア（詳細リンク）*/
.list-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 16px;
    text-decoration: none;
    color: inherit;
    transition: background var(--ui-transition);
}
.list-row-main:hover { background: var(--ui-surface-2); }

/* ナンバー・タイトル・サブ */
.list-row-num {
    width: 48px;
    flex-shrink: 0;
    font-size: var(--text-caption-2);
    font-family: var(--font-mono);
    color: var(--ui-text-muted);
}
.list-row-body   { flex: 1; min-width: 0; }
.list-row-title  { font-size: var(--text-footnote); font-weight: 600; color: var(--ui-text); }
.list-row-sub    { font-size: var(--text-caption-1); color: var(--ui-text-muted); font-family: var(--font-mono); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* 行右端の操作ボタン群（編集・削除など）。aedit-iconbtn を中に置く。
   badges と並ぶ場合は badges の後ろ＝最右に配置する。 */
.list-row-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: 8px; }

/* ============================================================
   一覧ページ構造（list-page-*）
   ctrl-bar → list-group-app → pagination の3層を囲む枠。
   インラインを排し、クラスだけで本番の一覧ページを組めるようにする。
============================================================ */
.list-page {
    border-radius: var(--ui-radius);
    overflow: hidden;
}
/* ① ツールバー（検索・絞り込み）— すりガラス */
.list-page-bar {
    padding: 10px 16px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.5px solid var(--ui-border);
}
.list-page-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* ② 件数バー（表示件数・並び替え） */
.list-page-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    background: var(--ui-surface);
    border-bottom: 0.5px solid var(--ui-border);
}
.list-page-count {
    font-size: var(--text-caption-1);
    color: var(--ui-text-muted);
    font-family: var(--font-mono);
}
/* ③ フッター（件数 + ページネーション） */
.list-page-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    background: var(--ui-surface);
    border-top: 0.5px solid var(--ui-border);
}
/* list-page 内では一覧本体の角丸を消して枠に馴染ませる */
.list-page .list-group-app { border-radius: 0; box-shadow: none; }
/* 件数バーの表示件数セレクトは小さめに */
.list-page-meta .filter-select { height: 26px; font-size: var(--text-caption-2); }

/* ── … ボタン ── */
.row-action-wrap {
    position: relative;
    flex-shrink: 0;
    padding: 0 8px 0 4px;
    display: flex;
    align-items: center;
}
.row-action-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--ui-radius-xs);
    border: none;
    background: transparent;
    color: var(--ui-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-footnote);
    cursor: pointer;
    transition: all var(--ui-transition);
    flex-shrink: 0;
}
.row-action-btn:hover,
.row-action-btn.is-active {
    background: var(--ui-surface-3);
    color: var(--ui-text);
}

/* 行の削除ボタン（… トグル廃止後・編集は行クリックで遷移）
   row-action-btn と同サイズ。通常は控えめなグレー、hoverで赤。 */
.row-del-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--ui-radius-xs);
    border: none;
    background: transparent;
    color: var(--ui-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-footnote);
    cursor: pointer;
    transition: all var(--ui-transition);
    flex-shrink: 0;
}
.row-del-btn:hover {
    background: rgba(255, 59, 48, .08);
    color: var(--ui-danger);
}

/* ── ポップアップメニュー ── */
.row-action-menu {
    position: fixed;            /* overflow:hidden の親に切られない */
    z-index: 500;
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-md);
    min-width: 130px;
    padding: 4px;
    opacity: 0;
    transform: scale(.95) translateY(-4px);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.row-action-menu.is-open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}
/* 上に開くバリアント */
.row-action-menu--up {
    transform-origin: bottom right;
    transform: scale(.95) translateY(4px);
}
.row-action-menu--up.is-open {
    transform: scale(1) translateY(0);
}

/* ── メニュー項目 ── */
.row-action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border-radius: calc(var(--ui-radius-sm) - 2px);
    border: none;
    background: transparent;
    font-size: var(--text-caption-1);
    font-weight: 500;
    color: var(--ui-text);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ui-transition);
    text-align: left;
    font-family: inherit;
}
.row-action-item:hover { background: var(--ui-surface-2); }
.row-action-item-icon  { font-size: var(--text-footnote); color: var(--ui-text-muted); flex-shrink: 0; }

/* 削除は赤 */
.row-action-item--danger         { color: var(--ui-danger); }
.row-action-item--danger:hover   { background: rgba(255, 59, 48, .06); }
.row-action-item--danger .row-action-item-icon { color: var(--ui-danger); }

/* ============================================================
   週間スケジュール ① — 空き状況グリッド（weekly）
   ============================================================ */
.weekly-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.weekly-title {
    font-size: var(--text-subheadline);
    font-weight: 700;
    color: var(--ui-text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.weekly-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.weekly-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
}
.weekly-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.weekly-dot--open   { background: var(--ui-success); }
.weekly-dot--few    { background: var(--ui-warning); }
.weekly-dot--full   { background: var(--ui-danger); }
.weekly-dot--closed { background: var(--ui-surface-3); }

/* グリッド本体 */
/* ============================================================
   週間スケジュール ① — 汎用グリッド
   列数：6日版 / 7日版
   行数：1行〜N行（AM / PM / 夜 など自由）
   構造：[ラベル列 auto] + [日付列 1fr × 6 or 7]
============================================================ */

.weekly-grid {
    display: grid;
    grid-template-columns: auto repeat(7, 1fr);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
}
.weekly-grid--6 { grid-template-columns: auto repeat(6, 1fr); }
.weekly-grid--7 { grid-template-columns: auto repeat(7, 1fr); }

/* ヘッダー行 */
.weekly-head-blank {
    background: var(--ui-surface-2);
    border-right: 0.5px solid var(--ui-border);
    border-bottom: 0.5px solid var(--ui-border);
}
.weekly-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    background: var(--ui-surface-2);
    border-right: 0.5px solid var(--ui-border);
    border-bottom: 0.5px solid var(--ui-border);
    text-align: center;
}
.weekly-head:last-child { border-right: none; }
.weekly-head--holiday   { background: var(--ui-surface-3); }
.weekly-head--today     { background: rgba(var(--ui-accent-rgb), .06); }

/* ラベル列 */
.weekly-row-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    min-height: 48px;
    font-size: var(--text-caption-2);
    font-weight: 700;
    color: var(--ui-text-muted);
    background: var(--ui-surface-2);
    border-right: 0.5px solid var(--ui-border);
    border-bottom: 0.5px solid var(--ui-border);
    white-space: nowrap;
}

/* データセル */
.weekly-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 6px 4px;
    background: var(--ui-surface);
    border-right: 0.5px solid var(--ui-border);
    border-bottom: 0.5px solid var(--ui-border);
}
.weekly-cell:last-child   { border-right: none; }
.weekly-cell--holiday     { background: var(--ui-surface-2); }
.weekly-cell--today       { background: rgba(var(--ui-accent-rgb), .04); }

/* 最終行のborder-bottom除去 */
.weekly-grid--6 > .weekly-row-label:last-of-type,
.weekly-grid--7 > .weekly-row-label:last-of-type,
.weekly-grid    > .weekly-row-label:last-of-type { border-bottom: none; }
.weekly-grid--6 > .weekly-cell:nth-last-child(-n+6),
.weekly-grid--7 > .weekly-cell:nth-last-child(-n+7),
.weekly-grid    > .weekly-cell:nth-last-child(-n+7) { border-bottom: none; }

.weekly-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 4px;
    gap: 5px;
    border-right: 0.5px solid var(--ui-border);
    background: var(--ui-surface);
}
.weekly-col:last-child  { border-right: none; }
.weekly-col--holiday    { background: var(--ui-surface-2); }
.weekly-col--today      { background: rgba(var(--ui-accent-rgb), .04); }

.weekly-day             { font-size: var(--text-caption-2); font-weight: 700; color: var(--ui-text-muted); }
.weekly-day--sun        { color: var(--ui-danger); }
.weekly-day--sat        { color: var(--ui-accent); }

.weekly-date {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--text-caption-1);
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--ui-text);
}
.weekly-date--today     { background: var(--ui-accent); color: #fff; }

.weekly-status {
    font-size: var(--text-caption-2);
    font-weight: 600;
    padding: 2px 5px;
    border-radius: var(--ui-radius-pill);
    white-space: nowrap;
    text-align: center;
}
.weekly-status--good   { background: rgba(52,199,89,.12);  color: #1a7a36; }        /* 空きあり */
.weekly-status--warn   { background: rgba(255,149,0,.12);  color: #a05a00; }        /* 問い合せ */
.weekly-status--bad    { background: rgba(255,59,48,.10);  color: var(--ui-danger); } /* 空きなし */
.weekly-status--open   { background: rgba(52,199,89,.12);  color: #1a7a36; }        /* 旧名互換 */
.weekly-status--few    { background: rgba(255,149,0,.12);  color: #a05a00; }        /* 旧名互換 */
.weekly-status--full   { background: rgba(255,59,48,.10);  color: var(--ui-danger); } /* 旧名互換 */
.weekly-status--closed { background: var(--ui-surface-3); color: var(--ui-text-muted); }

@media (max-width: 480px) {
    .weekly-status { font-size: var(--text-caption-2); padding: 1px 3px; }
    .weekly-date   { width: 22px; height: 22px; font-size: var(--text-caption-2); }
}

/* ============================================================
   週間スケジュール ② — 営業日カレンダー（午前・午後）
   grid構造: [ラベル48px] + [7曜日 × 1fr]
             [ヘッダー行] + [午前行] + [午後行]
   ============================================================ */
.weekly-clinic-wrap    { }

.weekly-clinic-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.weekly-clinic-nav-title {
    font-size: var(--text-footnote);
    font-weight: 700;
    color: var(--ui-text);
}

.weekly-clinic-grid {
    display: grid;
    grid-template-columns: 48px repeat(7, 1fr);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
}

/* 左上の空白セル */
.weekly-clinic-corner {
    background: var(--ui-surface-2);
    border-right: 0.5px solid var(--ui-border);
    border-bottom: 0.5px solid var(--ui-border);
}

/* 曜日ヘッダー */
.weekly-clinic-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    gap: 3px;
    /* カード背景色・ページ背景色の影響を受けないよう固定のグレーにする */
    background-color: var(--ui-surface-2, #f5f5f7) !important;
    border-right: 0.5px solid var(--ui-border);
    border-bottom: 0.5px solid var(--ui-border);
}
.weekly-clinic-head:last-child   { border-right: none; }
.weekly-clinic-head--holiday     { background-color: var(--ui-surface-3, #ececec) !important; }
.weekly-clinic-head--today       { background-color: rgba(var(--ui-accent-rgb), .06) !important; }

.weekly-clinic-day               { font-size: var(--text-caption-2); font-weight: 700; color: var(--ui-text-muted); }

.weekly-clinic-date {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--text-caption-1);
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--ui-text);
}
.weekly-clinic-date--today       { background: var(--ui-accent); color: #fff; }

/* 午前・午後ラベル列 */
.weekly-clinic-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    font-size: var(--text-caption-2);
    font-weight: 700;
    color: var(--ui-text-muted);
    background: var(--ui-surface-2);
    border-right: 0.5px solid var(--ui-border);
    border-bottom: 0.5px solid var(--ui-border);
    letter-spacing: .04em;
    min-height: 52px;
    writing-mode: horizontal-tb;
}

/* 空き状況セル */
.weekly-clinic-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    font-size: var(--text-headline);
    font-weight: 700;
    border-right: 0.5px solid var(--ui-border);
    border-bottom: 0.5px solid var(--ui-border);
    /* カード背景色（--ui-surface）・ページ背景色の影響を受けないよう常に白固定 */
    background-color: #ffffff !important;
}
/* 各行の最右端セルはボーダーなし */
.weekly-clinic-grid > .weekly-clinic-cell:nth-child(8n) { border-right: none; }
/* 最終行（午後行）のボーダーなし */
.weekly-clinic-grid > .weekly-clinic-cell:nth-last-child(-n+8),
.weekly-clinic-grid > .weekly-clinic-label:last-of-type  { border-bottom: none; }

.weekly-clinic-cell--open    { color: var(--ui-success); }
.weekly-clinic-cell--few     { color: var(--ui-warning); }
.weekly-clinic-cell--full    { color: var(--ui-danger); }
.weekly-clinic-cell--closed  { color: var(--ui-text-muted); font-size: var(--text-footnote); }
.weekly-clinic-cell--holiday { background-color: var(--ui-surface-2, #f5f5f7) !important; color: var(--ui-text-muted); font-size: var(--text-footnote); }

/* 凡例 */
.weekly-clinic-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.weekly-clinic-legend-item   { font-size: var(--text-caption-2); font-weight: 600; }
.weekly-clinic-legend--open  { color: var(--ui-success); }
.weekly-clinic-legend--few   { color: var(--ui-warning); }
.weekly-clinic-legend--full  { color: var(--ui-danger); }
.weekly-clinic-legend--closed{ color: var(--ui-text-muted); }

@media (max-width: 600px) {
    .weekly-clinic-grid        { grid-template-columns: 36px repeat(7, 1fr); }
    .weekly-clinic-label       { font-size: var(--text-caption-2); }
    .weekly-clinic-cell        { min-height: 42px; font-size: var(--text-callout); }
    .weekly-clinic-date        { width: 20px; height: 20px; font-size: var(--text-caption-2); }
    .weekly-clinic-day         { font-size: var(--text-caption-2); }
}

/* ============================================================
   ギャラリー・写真グリッド（gallery）
   ============================================================ */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.gallery-item           { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--ui-radius-sm); }
.gallery-item img       { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.gallery-item:hover img { transform: scale(1.05); }

.gallery-featured       { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 600px) {
    .gallery-featured { grid-template-columns: 1fr; }
}
.gallery-featured-main           { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--ui-radius-sm); }
.gallery-featured-main img       { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.gallery-featured-main:hover img { transform: scale(1.03); }
.gallery-featured-sub            { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ============================================================
   印刷・帳票（print）
   ============================================================ */
.print-doc {
    background: #fff;
    padding: 40px;
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    max-width: 720px;
    margin: 0 auto;
}
.print-doc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--ui-text);
}
.print-doc-title   { font-size: var(--text-title-1); font-weight: 700; }
.print-doc-no      { font-size: var(--text-caption-1); font-family: var(--font-mono); color: var(--ui-text-muted); margin-top: 2px; }
.print-doc-company { text-align: right; }
.print-doc-to      { margin-bottom: 20px; }

.print-table       { width: 100%; border-collapse: collapse; font-size: var(--text-footnote); }
.print-table th {
    background: var(--ui-surface-2);
    padding: 8px 12px;
    font-weight: 700;
    font-size: var(--text-caption-1);
    border-bottom: 1px solid var(--ui-border-2);
    text-align: left;
}
.print-table td         { padding: 10px 12px; border-bottom: 0.5px solid var(--ui-border); }
.print-table tfoot th   { background: var(--ui-text); color: #fff; font-size: var(--text-footnote); }

@media print {
    .g-nav, .g-sidebar, .submit-area,
    .ctrl-bar, .btn-action, .breadcrumb-bar { display: none !important; }
    body { background: #fff !important; }
    a    { color: inherit !important; text-decoration: none !important; }
    @page { size: A4 portrait; margin: 15mm 20mm; }
}

/* ============================================================
   メールテンプレート（カタログ表示専用プレビュー）
   ※ 実際のメールはインラインCSSで記述すること
   ============================================================ */
.email-wrap {
    max-width: 560px;
    margin: 0 auto;
    font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.1);
}
.email-header           { background: #0071e3; padding: 20px 32px; }
.email-header--danger   { background: var(--ui-danger); }
.email-logo             { color: #fff; font-size: var(--text-headline); font-weight: 700; letter-spacing: -.02em; }
.email-body             { background: #fff; padding: 32px; }
.email-greeting         { font-size: var(--text-subheadline); font-weight: 700; color: #1d1d1f; margin: 0 0 16px; }
.email-text             { font-size: var(--text-footnote); line-height: 1.9; color: #555; margin: 0 0 20px; }

.email-info-block       { border-radius: 6px; overflow: hidden; margin-bottom: 24px; border: 1px solid #e5e5e5; }
.email-info-table       { width: 100%; border-collapse: collapse; font-size: var(--text-footnote); }
.email-info-table th {
    background: #f5f5f7;
    padding: 10px 14px;
    font-weight: 600;
    color: #555;
    text-align: left;
    width: 30%;
    border-bottom: 1px solid #e5e5e5;
    white-space: nowrap;
}
.email-info-table td    { padding: 10px 14px; color: #1d1d1f; border-bottom: 1px solid #e5e5e5; }
.email-info-table tr:last-child th,
.email-info-table tr:last-child td { border-bottom: none; }

.email-alert-block {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 59, 48, .06);
    border: 1px solid rgba(255, 59, 48, .2);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: var(--text-footnote);
    font-weight: 600;
    color: var(--ui-danger);
    margin-bottom: 20px;
}
.email-cta-wrap         { text-align: center; margin: 28px 0; }
.email-cta-btn {
    display: inline-block;
    background: #0071e3;
    color: #fff;
    padding: 12px 32px;
    border-radius: 100px;
    font-size: var(--text-footnote);
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}
.email-cta-btn:hover    { background: #0077ed; }

.email-footer           { background: #f5f5f7; padding: 20px 32px; font-size: var(--text-caption-1); color: #999; line-height: 1.8; }
.email-footer p         { margin: 0 0 6px; }
.email-footer-note      { font-size: var(--text-caption-2); color: #bbb; margin-top: 8px; }

/* ============================================================
   予約フォーム（booking）
   kimono-booking.html のコンポーネント群
   ============================================================ */

/* プログレスステップバー */
.booking-progress {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 14px 20px;
    background: var(--ui-surface-2);
    border-bottom: 0.5px solid var(--ui-border);
    overflow-x: auto;
}
.booking-step-item {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.booking-step-circle {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--ui-border-2);
    background: var(--ui-surface);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-caption-2);
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--ui-text-muted);
    flex-shrink: 0;
    transition: all var(--ui-transition);
}
.booking-step-circle.is-active {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: #fff;
}
.booking-step-circle.is-done {
    background: var(--ui-success);
    border-color: var(--ui-success);
    color: #fff;
}
.booking-step-label {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    margin-left: 6px;
    white-space: nowrap;
    font-weight: 500;
}
.booking-step-label.is-active { color: var(--ui-accent); font-weight: 700; }
.booking-step-label.is-done   { color: var(--ui-success); }
.booking-step-connector {
    flex: 1;
    height: 1px;
    background: var(--ui-border-2);
    margin: 0 6px;
    min-width: 12px;
}
.booking-step-connector.is-done { background: var(--ui-success); }
@media (max-width: 600px) {
    .booking-step-label { display: none; }
    .booking-step-connector { min-width: 8px; margin: 0 4px; }
}

/* サービス種別選択グリッド */
.booking-service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 600px) {
    .booking-service-grid { grid-template-columns: 1fr; }
}
.booking-service-card {
    border: 1.5px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: 20px;
    cursor: pointer;
    transition: all var(--ui-transition);
    background: var(--ui-surface);
    position: relative;
    overflow: hidden;
    display: block;
}
.booking-service-card input[type="radio"] { display: none; }
.booking-service-card:hover               { border-color: var(--ui-accent); box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb),.08); }
.booking-service-card.is-selected         { border-color: var(--ui-accent); background: rgba(var(--ui-accent-rgb),.04); }
.booking-service-check {
    position: absolute; top: 12px; right: 12px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--ui-accent);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: var(--text-caption-2);
    opacity: 0; transition: opacity var(--ui-transition);
}
.booking-service-card.is-selected .booking-service-check { opacity: 1; }
.booking-service-icon { font-size: var(--text-title-2); display: block; margin-bottom: 8px; }
.booking-service-name { font-size: var(--text-subheadline); font-weight: 600; color: var(--ui-text); margin-bottom: 4px; }
.booking-service-note { font-size: var(--text-caption-1); color: var(--ui-text-muted); line-height: 1.7; }

/* 時間帯選択グリッド */
.booking-time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
    padding: 16px;
}
.booking-time-btn {
    height: 44px;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    font-size: var(--text-caption-1);
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--ui-text);
    cursor: pointer;
    transition: all var(--ui-transition);
    display: flex; align-items: center; justify-content: center;
}
.booking-time-btn:hover                 { border-color: var(--ui-accent); color: var(--ui-accent); }
.booking-time-btn.is-selected           { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.booking-time-btn.is-closed             { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

/* プラン選択グリッド */
.booking-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    padding: 16px;
}
.booking-plan-btn {
    border: 1.5px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 14px 10px;
    cursor: pointer;
    transition: all var(--ui-transition);
    background: var(--ui-surface);
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.booking-plan-btn:hover       { border-color: var(--ui-accent); background: rgba(var(--ui-accent-rgb), 0.08); }
.booking-plan-btn.is-selected { border-color: var(--ui-accent); background: rgba(var(--ui-accent-rgb),.06); }
.booking-plan-name  { font-size: var(--text-footnote); font-weight: 700; color: var(--ui-text); }
.booking-plan-price { font-size: var(--text-caption-1); font-family: var(--font-mono); color: var(--ui-accent); font-weight: 600; }
.booking-plan-time  { font-size: var(--text-caption-2); color: var(--ui-text-muted); }

/* コース一覧（チェック形式）*/
.booking-course-list { display: flex; flex-direction: column; }
.booking-course-item {
    display: flex; align-items: center;
    padding: 12px 16px;
    border-bottom: 0.5px solid var(--ui-border);
    gap: 12px;
    cursor: pointer;
    transition: background var(--ui-transition);
}
.booking-course-item:last-child  { border-bottom: none; }
.booking-course-item:hover       { background: var(--ui-surface-2); }
.booking-course-item.is-selected { background: rgba(var(--ui-accent-rgb),.04); }
.booking-course-name  { font-size: var(--text-footnote); font-weight: 600; color: var(--ui-text); flex: 1; }
.booking-course-desc  { font-size: var(--text-caption-2); color: var(--ui-text-muted); }
.booking-course-price { font-size: var(--text-caption-1); font-family: var(--font-mono); color: var(--ui-accent); font-weight: 600; white-space: nowrap; }

/* 衣装サイズ・人物カード */
.booking-person-card {
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
}
.booking-person-head {
    background: var(--ui-surface-2);
    padding: 10px 16px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 0.5px solid var(--ui-border);
}
.booking-person-title { font-size: var(--text-caption-1); font-weight: 700; color: var(--ui-text); }
.booking-person-body  { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.booking-size-select-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.booking-size-btn {
    height: 34px;
    padding: 0 14px;
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    font-size: var(--text-caption-1);
    font-weight: 600;
    color: var(--ui-text-sub);
    cursor: pointer;
    transition: all var(--ui-transition);
    font-family: inherit;
}
.booking-size-btn:hover       { border-color: var(--ui-accent); color: var(--ui-accent); }
.booking-size-btn.is-selected { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.booking-add-person-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1.5px dashed var(--ui-border-2);
    border-radius: var(--ui-radius-sm);
    background: transparent;
    font-size: var(--text-caption-1);
    font-weight: 600;
    color: var(--ui-text-muted);
    cursor: pointer;
    transition: all var(--ui-transition);
    width: 100%;
    font-family: inherit;
}
.booking-add-person-btn:hover { border-color: var(--ui-accent); color: var(--ui-accent); }

/* アクションバー（戻る・次へ）*/
.booking-action-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0 0;
    gap: 12px;
}

/* ============================================================
   予約管理・管理画面（admin）
   kimono-admin.html のコンポーネント群
   ============================================================ */

/* 予約管理カレンダー */
.admin-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
}
.admin-cal-head {
    background: var(--ui-surface-2);
    text-align: center;
    padding: 8px 4px;
    font-size: var(--text-caption-2);
    font-family: var(--font-mono);
    color: var(--ui-text-muted);
    font-weight: 700;
    border-right: 0.5px solid var(--ui-border);
    border-bottom: 0.5px solid var(--ui-border);
}
.admin-cal-head.sun { color: var(--ui-danger); }
.admin-cal-head.sat { color: var(--ui-accent); }
.admin-cal-head:last-child { border-right: none; }
.admin-cal-cell {
    aspect-ratio: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    padding: 4px;
    border-right: 0.5px solid var(--ui-border);
    border-bottom: 0.5px solid var(--ui-border);
    font-size: var(--text-caption-2);
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--ui-text);
    background: var(--ui-surface);
    cursor: pointer;
    transition: background var(--ui-transition);
    position: relative;
    min-height: 56px;
}
.admin-cal-cell:hover          { background: var(--ui-surface-2); }
.admin-cal-cell.today .admin-cal-date { background: var(--ui-accent); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.admin-cal-cell.other-month    { background: var(--ui-surface-2); color: var(--ui-text-muted); }
.admin-cal-cell.sun            { color: var(--ui-danger); }
.admin-cal-cell.sat            { color: var(--ui-accent); }
.admin-cal-cell:nth-child(7n)  { border-right: none; }
.admin-cal-date { font-size: var(--text-caption-2); line-height: 20px; margin-bottom: 2px; }
.admin-cal-dot-wrap { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
.admin-cal-dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-accent); flex-shrink: 0; }
.admin-cal-dot.full { background: var(--ui-danger); }
.admin-cal-dot.few  { background: var(--ui-warning); }
.admin-cal-count { font-size: var(--text-caption-2); color: var(--ui-text-muted); font-family: var(--font-mono); margin-top: 1px; }

/* スタッフシフト管理テーブル */
.shift-table { width: 100%; border-collapse: collapse; }
.shift-table th {
    padding: 6px 4px;
    font-size: var(--text-caption-2);
    font-weight: 700;
    color: var(--ui-text-muted);
    text-align: center;
    border-bottom: 0.5px solid var(--ui-border);
    background: var(--ui-surface-2);
    white-space: nowrap;
}
.shift-table td {
    padding: 4px;
    text-align: center;
    border-bottom: 0.5px solid var(--ui-border);
    vertical-align: middle;
}
.shift-cell {
    width: 32px; height: 28px;
    border-radius: var(--ui-radius-xs);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-caption-2);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--ui-transition);
    margin: 0 auto;
    border: none;
    font-family: inherit;
}
.shift-cell--on  { background: rgba(var(--ui-accent-rgb),.12); color: var(--ui-accent); }
.shift-cell--off { background: var(--ui-surface-2); color: var(--ui-text-muted); }
.shift-cell--on:hover  { background: rgba(var(--ui-accent-rgb),.2); }
.shift-cell--off:hover { background: var(--ui-surface-3); }

/* 空き状況管理 — 日付グリッド */
.slot-date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.slot-date-btn {
    aspect-ratio: 1;
    border-radius: var(--ui-radius-xs);
    border: 0.5px solid var(--ui-border);
    background: var(--ui-surface);
    font-size: var(--text-caption-2);
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--ui-text);
    cursor: pointer;
    transition: all var(--ui-transition);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    padding: 2px;
    font-family: inherit;
}
.slot-date-btn:hover         { border-color: var(--ui-accent); color: var(--ui-accent); }
.slot-date-btn.is-selected   { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.slot-date-btn.is-full       { background: rgba(255,59,48,.06); border-color: rgba(255,59,48,.2); color: var(--ui-danger); }
.slot-date-btn.is-closed     { background: var(--ui-surface-2); color: var(--ui-text-muted); opacity: .6; }
.slot-date-btn.sun           { color: var(--ui-danger); }
.slot-date-btn.sat           { color: var(--ui-accent); }
.slot-date-btn.is-selected.sun,
.slot-date-btn.is-selected.sat { color: #fff; }
.slot-date-sub { font-size: var(--text-caption-2); font-weight: 400; }

/* 空き状況管理 — 時間帯カード */
.slot-time-list  { display: flex; flex-direction: column; gap: 6px; }
.slot-time-row {
    display: flex; align-items: center;
    padding: 10px 14px;
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    gap: 12px;
    background: var(--ui-surface);
    cursor: pointer;
    transition: background var(--ui-transition), border-color var(--ui-transition);
}
/* ホバー */
.slot-time-row:hover {
    background: rgba(var(--ui-accent-rgb), 0.08);
    border-color: var(--ui-accent);
}
/* 選択済み（ラジオ checked 連動 or .is-selected） */
.slot-time-row.is-selected,
input[type="radio"]:checked + .slot-time-row,
.slot-time-row:has(input[type="radio"]:checked) {
    background: rgba(var(--ui-accent-rgb), 0.10);
    border-color: var(--ui-accent);
    border-width: 1.5px;
}
/* 満員（disabled）*/
.slot-time-row:has(input[type="radio"]:disabled) {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}
/* 早朝料金バッジ */
/* 料金バッジ — 汎用（他プロジェクトでも使いまわし可） */

.slot-time-label { font-size: var(--text-footnote); font-weight: 700; font-family: var(--font-mono); color: var(--ui-text); width: 80px; flex-shrink: 0; }
/* プラン名など長いテキスト用（幅固定を解除） */
.slot-time-row--plan .slot-time-label { width: auto; flex: 1; }
.slot-time-cap   { font-size: var(--text-caption-1); color: var(--ui-text-muted); flex: 1; }
.slot-time-badge {
    font-size: var(--text-caption-2); font-weight: 700;
    padding: 2px 8px; border-radius: var(--ui-radius-pill);
}
/* 空き状況バッジ */
.slot-time-badge--open,
.slot-time-badge--discount  { background: rgba(52,199,89,.12);  color: #1a7a36; }   /* 緑: 空き・割引 */
.slot-time-badge--few,
.slot-time-badge--premium   { background: rgba(255,149,0,.12);  color: #a05a00; }   /* 橙: 残りわずか・プレミアム */
.slot-time-badge--full,
.slot-time-badge--extra     { background: rgba(255,59,48,.10);  color: var(--ui-danger); } /* 赤: 満員・追加料金 */
.slot-time-badge--closed,
.slot-time-badge--info      { background: var(--ui-surface-3); color: var(--ui-text-muted); } /* 灰: 受付終了・情報 */
/* 料金バッジ専用 */
.slot-time-badge--early,
.slot-time-badge--fee       { background: rgba(88,86,214,.10); color: #3b35b0; }    /* 紫: 早朝・割増料金 */
.slot-time-badge--free      { background: rgba(0,113,227,.10); color: var(--ui-accent); } /* 青: 無料 */

/* プラン設定カード */
.plan-setting-card {
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;
    background: var(--ui-surface);
}
.plan-setting-head {
    display: flex; align-items: center;
    padding: 14px 18px;
    border-bottom: 0.5px solid var(--ui-border);
    gap: 12px;
    background: var(--ui-surface-2);
}
.plan-setting-badge {
    font-size: var(--text-caption-2); font-weight: 700;
    padding: 3px 10px; border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-accent-rgb),.1); color: var(--ui-accent);
    white-space: nowrap;
}
.plan-setting-name  { font-size: var(--text-subheadline); font-weight: 700; color: var(--ui-text); flex: 1; }
.plan-setting-price { font-size: var(--text-footnote); font-family: var(--font-mono); font-weight: 700; color: var(--ui-accent); white-space: nowrap; }
.plan-setting-body  { padding: 16px 18px; }
.plan-setting-courses { display: flex; flex-direction: column; gap: 6px; }
.plan-course-row {
    display: flex; align-items: center;
    padding: 8px 12px;
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    gap: 10px;
    font-size: var(--text-caption-1);
}
.plan-course-name  { flex: 1; color: var(--ui-text); font-weight: 500; }
.plan-course-price { font-family: var(--font-mono); color: var(--ui-accent); font-weight: 600; white-space: nowrap; }
.plan-course-time  { color: var(--ui-text-muted); white-space: nowrap; }

/* ============================================================
   CRUD Form — 2カラムレイアウト
   .crud-layout → .crud-form（左）+ .crud-side（右・sticky）
   ============================================================ */
.crud-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 900px) {
    .crud-layout {
        grid-template-columns: 1fr;
    }
    .crud-side {
        position: static !important;
    }
}

/* 右サイドバー: スクロールしても追従 */
.crud-side {
    position: sticky;
    top: 72px;   /* g-nav(52px) + 余白 */
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* フォームカード見出し */
.crud-card-title {
    font-size: var(--text-subheadline);
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 0.5px solid var(--ui-border);
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ui-text);
}
.crud-card-title i { color: var(--ui-accent); }

/* サイドバーラベル */
.crud-side-label {
    font-size: var(--text-caption-2);
    font-weight: 700;
    color: var(--ui-text-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* 削除ボタン */
.crud-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    width: 100%;
    border-radius: var(--ui-radius-sm);
    border: 0.5px solid var(--ui-danger);
    background: transparent;
    color: var(--ui-danger);
    font-size: var(--text-footnote);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--ui-transition);
}
.crud-delete-btn:hover {
    background: rgba(255, 59, 48, .07);
}

/* ── ui-card-row 編集ボタン ── */
.ui-card-edit-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--ui-text-muted);
    border-radius: var(--ui-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-caption-1);
    cursor: pointer;
    transition: background var(--ui-transition), color var(--ui-transition);
}
.ui-card-edit-btn:hover {
    background: var(--ui-surface-3);
    color: var(--ui-accent);
}
/* テキスト付きバリアント（「変更する」など） */
.ui-card-edit-btn--text {
    width: auto;
    height: auto;
    padding: 0;
    gap: 4px;
    font-size: var(--text-caption-1);
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--ui-accent);      /* リンク風・青 */
    border-radius: 0;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.ui-card-edit-btn--text:hover {
    background: transparent;
    color: var(--ui-accent-hover);
    text-decoration: underline;
}
/* key に値を含めるレイアウト用 */
.ui-card-key--with-val {
    display: flex;
    align-items: center;         /* 値とボタンを縦中央揃え */
    justify-content: space-between;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
/* 左側: ラベル + 値 縦並び */
.ui-card-key--with-val .ui-card-kv {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
/* ラベル行 */
.ui-card-key--with-val .ui-card-kv-label {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    font-family: var(--font-mono);
    letter-spacing: .04em;
}
/* 値行 */
.ui-card-key--with-val .ui-card-kv-val {
    font-size: var(--text-footnote);
    font-weight: 600;
    color: var(--ui-text);
}

/* ============================================================
   ui-alert / ui-toast — フォームフィードバック
   ============================================================ */

/* ── インラインアラート ── */
.ui-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--ui-radius-sm);
    border: 0.5px solid transparent;
    font-size: var(--text-caption-1);
    line-height: 1.7;
}
.ui-alert-icon {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 0.9rem;
}
.ui-alert--danger {
    background: rgba(255, 59, 48, 0.07);
    border-color: rgba(255, 59, 48, 0.18);
    color: var(--ui-text);
}
.ui-alert--danger .ui-alert-icon { color: var(--ui-danger); }
.ui-alert--warning {
    background: rgba(255, 149, 0, 0.07);
    border-color: rgba(255, 149, 0, 0.20);
    color: var(--ui-text);
}
.ui-alert--warning .ui-alert-icon { color: var(--ui-warning); }
.ui-alert--success {
    background: rgba(52, 199, 89, 0.07);
    border-color: rgba(52, 199, 89, 0.18);
    color: var(--ui-text);
}
.ui-alert--success .ui-alert-icon { color: var(--ui-success); }
.ui-alert--info {
    background: var(--ui-accent-lt);
    border-color: rgba(var(--ui-accent-rgb), 0.18);
    color: var(--ui-text);
}
.ui-alert--info .ui-alert-icon { color: var(--ui-accent); }
.ui-alert ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 3px;
}
.ui-alert ul li::before { content: '· '; color: var(--ui-danger); }

/* ── トースト ── */
.ui-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-md);
    font-size: var(--text-caption-1);
    color: var(--ui-text);
    margin-top: 12px;
}
.ui-toast--fixed {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 600;
    margin: 0;
    min-width: 240px;
    max-width: 360px;
}
.ui-toast--success { background: rgba(52, 199, 89, 0.07);  border-color: rgba(52, 199, 89, 0.18); }
.ui-toast--danger  { background: rgba(255, 59, 48, 0.07);  border-color: rgba(255, 59, 48, 0.18); }
.ui-toast--warning { background: rgba(255, 149, 0, 0.07);  border-color: rgba(255, 149, 0, 0.20); }

/* トーストのスタックコンテナ（複数を縦に積む・右下固定） */
.ui-toast-stack {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 600;
    display: flex;
    flex-direction: column-reverse;  /* 新しいものを下に追加して上へ積む */
    gap: 10px;
    pointer-events: none;            /* 隙間はクリックを透過 */
}
.ui-toast-stack .ui-toast {
    margin: 0;                       /* スタック内では個別マージン不要 */
    min-width: 240px;
    max-width: 360px;
    pointer-events: auto;            /* トースト本体はクリック可 */
    animation: uiToastIn 0.25s var(--ui-transition);
}
.ui-toast.is-leaving { animation: uiToastOut 0.2s var(--ui-transition) forwards; }
.ui-toast-icon { font-size: 1rem; flex-shrink: 0; }
.ui-toast--success .ui-toast-icon { color: var(--ui-success); }
.ui-toast--danger  .ui-toast-icon { color: var(--ui-danger); }
.ui-toast--warning .ui-toast-icon { color: var(--ui-warning); }
.ui-toast-msg { flex: 1; min-width: 0; }

@keyframes uiToastIn {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes uiToastOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(12px); }
}
@media (max-width: 600px) {
    .ui-toast-stack { left: 12px; right: 12px; bottom: 12px; }
    .ui-toast-stack .ui-toast { min-width: 0; max-width: none; }
}

/* ── ui-check-agree — 同意・確認チェックボックス ── */
.ui-check-agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-2);
    transition: background var(--ui-transition), border-color var(--ui-transition);
    cursor: pointer;
}
.ui-check-agree:hover {
    background: rgba(var(--ui-accent-rgb), 0.06);
    border-color: rgba(var(--ui-accent-rgb), 0.25);
}
/* チェック済み */
.ui-check-agree:has(input[type="checkbox"]:checked) {
    background: rgba(var(--ui-accent-rgb), 0.08);
    border-color: var(--ui-accent);
}
/* チェックボックス本体 */
.ui-check-agree input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 1.5px solid var(--ui-border-2);
    border-radius: 5px;
    margin-top: 1px;
    cursor: pointer;
    transition: all var(--ui-transition);
    position: relative;
    background: var(--ui-surface);
}
.ui-check-agree input[type="checkbox"]:checked {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
}
.ui-check-agree input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px; left: 5px;
    width: 5px; height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
/* ラベルテキストエリア */
.ui-check-agree-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.ui-check-agree-label {
    font-size: var(--text-footnote);
    font-weight: 700;
    color: var(--ui-text);
    line-height: 1.5;
}
.ui-check-agree-desc {
    font-size: var(--text-caption-1);
    color: var(--ui-text-muted);
    line-height: 1.7;
}

/* ============================================================
   17. エッジ画像ブロック（.edge-block）
   ブラウザ端に画像が張り付き、反対側にテキストが並ぶ2カラム。
   MUJIキャリアの「ビジョン・事業内容」「キャリアプラン」風。

   HTML構造:
     <div class="edge-block">
       <div class="edge-block__img">
         <img src="..." alt="">
       </div>
       <div class="edge-block__body">
         <div class="edge-block__eyebrow">Section Label</div>
         <h2 class="edge-block__ttl">タイトル</h2>
         <p class="edge-block__desc">説明文</p>
         <a href="#" class="edge-block__link">詳しく見る →</a>
       </div>
     </div>

   バリアント:
     .edge-block              → 画像左・テキスト右
     .edge-block.edge-block--rev → 画像右・テキスト左
============================================================ */

.edge-block {
    display: grid;
    grid-template-columns: 50% 1fr;
    min-height: 480px;
    overflow: hidden;
}

/* 画像右・テキスト左 */
.edge-block--rev {
    grid-template-columns: 1fr 50%;
}
.edge-block--rev .edge-block__img  { order: 2; }
.edge-block--rev .edge-block__body { order: 1; }

/* ── 画像エリア ── */
.edge-block__img {
    position: relative;
    overflow: hidden;
}
.edge-block__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.edge-block:hover .edge-block__img img {
    transform: scale(1.03);
}

/* ── テキストエリア ── */
.edge-block__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 56px;
    background: var(--ui-surface);
}

/* ──────────────────────────────────────
   オーバーラップバリアント（.edge-block--overlap）
   テキストエリアが画像に中くらい（48px）かぶさる。
   overflow: hidden を外し z-index で重ね順を制御。
   影でテキストカードが浮いているように見せる。
────────────────────────────────────── */
.edge-block--overlap {
    overflow: visible;   /* はみ出しを許可 */
    align-items: center; /* 垂直中央揃えにして自然なオーバーラップに */
}

/* 画像左・テキスト右のオーバーラップ */
.edge-block--overlap .edge-block__img {
    z-index: 0;
}
.edge-block--overlap .edge-block__body {
    position: relative;
    z-index: 1;
    margin-left: -48px; /* 左に48pxはみ出して画像に重なる */
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-md);
    padding: 56px 48px;
    /* 高さを画像より少し小さく見せる */
    margin-top: 40px;
    margin-bottom: 40px;
}

/* 画像右・テキスト左のオーバーラップ（--rev併用）
   テキストを右寄せにしてから右にはみ出す */
.edge-block--overlap.edge-block--rev .edge-block__body {
    margin-left: auto;   /* テキストを右端に寄せる */
    margin-right: -48px; /* 右に48pxはみ出す */
}

/* セカンダリ背景バリアント */
.edge-block--gray .edge-block__body {
    background: var(--ui-surface-2);
}

/* ── eyebrow ── */
.edge-block__eyebrow {
    font-size: var(--text-caption-2);
    font-family: var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ui-text-muted);
    margin-bottom: 14px;
}

/* ── タイトル ── */
.edge-block__ttl {
    font-size: var(--text-title-2);
    font-weight: 700;
    color: var(--ui-text);
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

/* ── 説明文 ── */
.edge-block__desc {
    font-size: var(--text-body);
    color: var(--ui-text);
    line-height: 1.9;
    margin-bottom: 28px;
    max-width: 400px;
}

/* ── リンク（アンダーライン型） ── */
.edge-block__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-caption-1);
    font-weight: 600;
    color: var(--ui-text);
    text-decoration: none;
    letter-spacing: .04em;
    border-bottom: 0.5px solid var(--ui-text);
    padding-bottom: 2px;
    align-self: flex-start;
    transition: gap var(--ui-transition), color var(--ui-transition);
}
.edge-block__link:hover {
    gap: 14px;
    color: var(--ui-text);
}

/* アクセントリンクバリアント */
.edge-block__link--accent {
    color: var(--ui-accent);
    border-bottom-color: var(--ui-accent);
}
.edge-block__link--accent:hover { color: var(--ui-accent); }

/* ── レスポンシブ ── */
@media (max-width: 768px) {
    .edge-block,
    .edge-block--rev {
        grid-template-columns: 1fr;
    }
    .edge-block__img  { order: 1 !important; aspect-ratio: 16 / 9; }
    .edge-block__body { order: 2 !important; padding: 40px 24px; }
    .edge-block--rev .edge-block__img  { order: 1 !important; }
    .edge-block--rev .edge-block__body { order: 2 !important; }
    .edge-block__desc { max-width: 100%; }
    /* オーバーラップはスマホで解除 */
    .edge-block--overlap .edge-block__body {
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
        border-radius: 0;
        box-shadow: none;
    }
}


/* ============================================================
   27. Bootstrap コンポーネントの見た目調整（本番UI）
   ------------------------------------------------------------
   ※ もと ui-tips-v5-catalog.css の Layer B から移設。
     catalog.css はカタログ専用（本番非読込）のため、本番UIが依存する
     Bootstrap 素クラスの見た目（.btn / .btn-primary:hover / .card /
     .form-* / .table / .badge / .alert / .modal / .dropdown /
     .nav-tabs / .list-group / .btn-close）はここ common.css に集約する。
     色そのものは overrides.css の --bs-* ブリッジが担当。
============================================================ */

/* ---- btn-close（モーダル等の × ボタン。Bootstrap Icons で表示） ---- */
.btn-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--ui-surface-3);
    background-image: none !important;
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s;
}
.btn-close:hover {
    background-color: var(--ui-surface-2);
    opacity: 1;
}
.btn-close .bi {
    font-size: .875rem;
    color: var(--ui-text-muted);
    display: block !important;
    opacity: 1 !important;
}

/* ---- btn ---- */
/* レイアウト（flex・中央揃え・gap・pill・font-weight 等）は
   common.css の .ui-btn が担当。ここでは本番UIを壊さない範囲で、
   Bootstrap .btn のボーダー除去とフォント継承のみ最小調整に留める。 */
.btn {
    font-family: inherit;
    border-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
}

/* pill 形状に統一 */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
    border-radius: var(--ui-radius-pill);
}

/* ホバー時グロー */
.btn-primary:hover { background: var(--ui-accent-hover); box-shadow: 0 4px 12px rgba(var(--ui-accent-rgb), 0.35); }
.btn-success:hover { box-shadow: 0 4px 12px rgba(52, 199, 89, 0.35); }
.btn-danger:hover  { box-shadow: 0 4px 12px rgba(255, 59, 48, 0.35); }
.btn-warning       { color: var(--ui-text); }

/* アウトライン */
.btn-outline-primary {
    border: 1.5px solid var(--ui-accent);
    color: var(--ui-accent);
}
.btn-outline-primary:hover {
    background: var(--ui-accent-lt);
    color: var(--ui-accent);
    box-shadow: none;
}

/* outline-secondary もボーダー未定義だと .btn の border-width:0 に打ち消されるため明示 */
.btn-outline-secondary {
    border: 1.5px solid var(--ui-border-2);
    color: var(--ui-text-sub);
}
.btn-outline-secondary:hover {
    background: var(--ui-surface-3);
    color: var(--ui-text);
    border-color: var(--ui-border-2);
    box-shadow: none;
}

/* サイズ統一 */
.btn-sm                           { height: 28px; font-size: var(--text-footnote);    padding: 0 14px; }
.btn-lg                           { height: 48px; font-size: var(--text-callout);     padding: 0 28px; }
.btn:not(.btn-sm):not(.btn-lg)    { height: 36px; padding: 0 20px; }

/* ---- form-control / form-select ---- */
.form-control,
.form-select {
    border: 0.5px solid var(--ui-border-2);
    font-size: var(--text-subheadline);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-xs);
    transition: all var(--ui-transition);
    font-family: inherit;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), 0.12);
}
.form-control::placeholder { color: var(--ui-text-placeholder); }
.form-control-sm,
.form-select-sm { font-size: var(--text-footnote); }
.form-label {
    font-size: var(--text-footnote);
    font-weight: 600;
    margin-bottom: 6px;
}
.form-text { font-size: var(--text-caption-1); color: var(--ui-text-muted); }

/* ---- card ----
   Bootstrap 5.3 は .card 自身に --bs-card-bg をローカル再宣言しているため、
   :root 側での --bs-card-bg 上書きだけでは効かない（継承より要素自身の宣言が優先されるため）。
   ここで background-color を直接指定して確実に不透明な背景にする
   （背景グラデーション設定時にカードが透けて視認性が落ちる不具合の修正）。
*/
.card {
    /* ⑤カード背景色：指定色→白のグラデーション（白のままなら実質ベタ塗りと同じ見た目になる） */
    background: linear-gradient(180deg, var(--ui-surface) 0%, #ffffff 100%) !important;
    border: 0.5px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow);
}
.card-header {
    border-bottom: 0.5px solid var(--ui-border);
    padding: 14px 20px 12px;
    font-size: var(--text-footnote);
    font-weight: 700;
}
.card-body   { padding: 20px; }
.card-footer {
    border-top: 0.5px solid var(--ui-border);
    padding: 12px 20px;
    font-size: var(--text-footnote);
}

/* ---- table ---- */
.table { font-size: var(--text-footnote); }
.table > :not(caption) > * > * {
    padding: 11px 14px;
    border-bottom-color: var(--ui-border);
}
.table thead th {
    font-size: var(--text-caption-1);
    font-weight: 700;
    color: var(--ui-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--font-mono);
    border-bottom: 0.5px solid var(--ui-border-2) !important;
}

/* ---- badge ---- */
.badge {
    font-size: var(--text-caption-2);
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--ui-radius-pill);
}

/* ---- alert ---- */
.alert {
    border: 0.5px solid;
    border-radius: var(--ui-radius-sm);
    font-size: var(--text-footnote);
    line-height: 1.65;
}
.alert-primary {
    background: rgba(var(--ui-accent-rgb), 0.06);
    border-color: rgba(var(--ui-accent-rgb), 0.18);
    color: #003d80;
}
.alert-success {
    background: rgba(52, 199, 89, 0.06);
    border-color: rgba(52, 199, 89, 0.2);
    color: #0e5a28;
}
.alert-danger {
    background: rgba(255, 59, 48, 0.05);
    border-color: rgba(255, 59, 48, 0.18);
    color: #7a1a1a;
}
.alert-warning {
    background: rgba(255, 149, 0, 0.06);
    border-color: rgba(255, 149, 0, 0.2);
    color: #7a3800;
}

/* ---- modal ---- */
/* Bootstrap modal の外枠はそのまま・中身だけ NurseLink スタイルに上書き */
.modal-content {
    border: none;
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-lg);
    overflow: hidden;
}
.modal-header {
    border-bottom: 0.5px solid var(--ui-border);
    padding: 18px 20px;
    align-items: center;
}
.modal-title {
    font-size: var(--text-title-3);
    font-weight: 700;
    color: var(--ui-text);
}
/* btn-close は Bootstrap デフォルトのまま使う
   → 丸いグレー × ボタン（背景画像で × 表示）
   → wire:click と data-bs-dismiss どちらでも使える */
.modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.modal-footer {
    border-top: 0.5px solid var(--ui-border);
    padding: 14px 20px;
    justify-content: flex-end;
    gap: 8px;
}

/* ---- dropdown ---- */
.dropdown-menu  {
    border: 0.5px solid var(--ui-border-2);
    box-shadow: var(--ui-shadow-md);
    padding: 6px;
}
.dropdown-item  {
    border-radius: var(--ui-radius-xs);
    font-size: var(--text-footnote);
    padding: 8px 12px;
    transition: background var(--ui-transition);
}
.dropdown-divider { border-color: var(--ui-border); margin: 4px 0; }

/* ---- nav tabs ---- */
.nav-tabs { border-bottom: 0.5px solid var(--ui-border); }
.nav-tabs .nav-link {
    font-size: var(--text-footnote);
    font-weight: 500;
    color: var(--ui-text-sub);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 16px;
    transition: all var(--ui-transition);
}
.nav-tabs .nav-link:hover  { color: var(--ui-text); background: transparent; }
.nav-tabs .nav-link.active {
    color: var(--ui-accent);
    border-bottom-color: var(--ui-accent);
    background: transparent;
    font-weight: 600;
}

/* ---- list-group ---- */
.list-group-item {
    border: none;
    border-bottom: 0.5px solid var(--ui-border);
    font-size: var(--text-footnote);
    color: var(--ui-text);
    padding: 11px 16px;
    transition: background var(--ui-transition);
}
.list-group-item:last-child { border-bottom: none; }
.list-group-item.active {
    background: var(--ui-accent-lt);
    color: var(--ui-accent);
    font-weight: 600;
}
.list-group-item:not(.active):hover { background: rgba(0, 0, 0, 0.03); }

/* ============================================================
   セクション33: オフセットレイアウト（offset-layout）
   ------------------------------------------------------------
   左に背景色の余白帯（offset-layout-left）、右コンテンツ
   （offset-layout-right）が右端まで突き抜ける2カラム。
   LPセクション・スケジュール行・特集カード・ステップ等に使用。
   コンテナ側 overflow:hidden で角丸をクリップするのがポイント。

   ※ 復元版（推測ベース）。HTMLが使用する全クラスをカバー:
     .offset-layout / -left / -right / -stack
     --sm / --md / --lg / --accent / --dark
     --img-left / --img-right / --img-sq
     .offset-layout-img / -img-overlay / -img-badge（旧命名）
     .offset-img / -icon / -overlay / -price / -price-label / -badge（新命名）
     .olio-label / .olio-price
============================================================ */

/* ── コンテナ ── */
.offset-layout {
    display: flex;
    align-items: stretch;
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;            /* 子の角丸はみ出しをクリップ */
    box-shadow: var(--ui-shadow);
}

/* ── 左：背景帯（ラベル・日付・番号など）── */
.offset-layout-left {
    flex: 0 0 96px;              /* 既定幅（--md相当） */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 16px;
    background: var(--ui-surface-2);
    border-right: 0.5px solid var(--ui-border);
}

/* ── 右：メインコンテンツ（右端まで突き抜ける）── */
.offset-layout-right {
    flex: 1 1 auto;
    min-width: 0;               /* テキスト省略・はみ出し防止 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 20px;
    background: var(--ui-surface);
}

/* ── サイズバリエーション（左帯の幅と余白）── */
.offset-layout--sm .offset-layout-left { flex-basis: 64px;  padding: 12px; }
.offset-layout--sm .offset-layout-right { padding: 12px 16px; }

.offset-layout--md .offset-layout-left { flex-basis: 96px;  padding: 16px; }
.offset-layout--md .offset-layout-right { padding: 16px 20px; }

.offset-layout--lg .offset-layout-left { flex-basis: 150px; padding: 22px 20px; }
.offset-layout--lg .offset-layout-right { padding: 24px 28px; }

/* ── カラーバリエーション ── */
/* accent: 左帯をアクセント薄色に */
.offset-layout--accent .offset-layout-left {
    background: var(--ui-accent-lt);
    border-right-color: rgba(var(--ui-accent-rgb), 0.18);
}

/* dark: 左帯をダークに（白文字前提のHTML） */
.offset-layout--dark .offset-layout-left {
    background: var(--ui-text);     /* #1d1d1f */
    border-right-color: rgba(0, 0, 0, 0.2);
}

/* ── スタック：複数の offset-layout を縦に連結 ── */
.offset-layout-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ============================================================
   画像バリエーション
   ------------------------------------------------------------
   左帯を画像エリアにする。2系統の命名をどちらもサポート:
     旧: .offset-layout-left.offset-layout-img + -img-overlay/-img-badge + olio-*
     新: .offset-img + .offset-img-icon/-overlay/-price/-price-label/-badge
============================================================ */

/* ── 画像エリア共通（旧命名: left に offset-layout-img を併用）── */
.offset-layout-img,
.offset-img {
    position: relative;
    flex: 0 0 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    background: var(--ui-surface-2);
    border-right: 0.5px solid var(--ui-border);
}
/* --sm 時は画像帯も縮小 */
.offset-layout--sm .offset-layout-img,
.offset-layout--sm .offset-img { flex-basis: 80px; }
.offset-layout--lg .offset-layout-img,
.offset-layout--lg .offset-img { flex-basis: 180px; }

/* 画像本体 */
.offset-layout-img img,
.offset-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 絵文字/アイコンのプレースホルダ */
.offset-img-icon {
    font-size: 2.5rem;
    line-height: 1;
}

/* ── 画像オーバーレイ（下部の価格帯など）── */
.offset-layout-img-overlay,
.offset-img-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* オーバーレイ内テキスト（旧命名 olio-* / 新命名 offset-img-price*） */
.olio-label,
.offset-img-price-label {
    font-size: var(--text-caption-2);
    opacity: 0.85;
    letter-spacing: 0.04em;
}
.olio-price,
.offset-img-price {
    font-size: var(--text-footnote);
    font-weight: 700;
    font-family: var(--font-mono);
}

/* ── 画像バッジ（右上のタグ）── */
.offset-layout-img-badge,
.offset-img-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    font-size: var(--text-caption-2);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: var(--ui-radius-xs);
    background: var(--ui-text);
    color: #fff;
}
/* 新命名の badge はタグを内包するだけのラッパなので装飾を外す */
.offset-img-badge:has(.category-tag),
.offset-img-badge:has(.status-pill) {
    background: transparent;
    padding: 0;
}

/* ── 画像レイアウト方向の修飾子 ── */
/* 画像左・テキスト右（既定の並びと同じ。明示用） */
.offset-layout--img-left .offset-img,
.offset-layout--img-left .offset-layout-img { order: 0; border-right: 0.5px solid var(--ui-border); border-left: none; }
.offset-layout--img-left .offset-layout-right { order: 1; }

/* テキスト左・画像右（逆パターン） */
.offset-layout--img-right .offset-layout-right { order: 0; }
.offset-layout--img-right .offset-img,
.offset-layout--img-right .offset-layout-img {
    order: 1;
    border-right: none;
    border-left: 0.5px solid var(--ui-border);
}

/* 正方形画像 */
.offset-layout--img-sq .offset-img,
.offset-layout--img-sq .offset-layout-img {
    flex-basis: 120px;
    aspect-ratio: 1 / 1;
    align-self: stretch;
}

/* ── レスポンシブ：狭幅では縦積みに ── */
@media (max-width: 575.98px) {
    .offset-layout--img-right .offset-layout-right { order: 1; }
    .offset-layout--img-right .offset-img,
    .offset-layout--img-right .offset-layout-img { order: 0; border-left: none; border-bottom: 0.5px solid var(--ui-border); }
}


/* ============================================================
   ui-table 横スクロール + スクロールヒント
   ------------------------------------------------------------
   狭い画面で ui-table が横にはみ出す時、横スクロール化し、
   右（／左）に続きがある間だけフェード＋「→」ヒントを出す。
   端まで見たらヒントは消える。

   構造:
     <div class="ui-table-scroll" data-scrollhint>
       <table class="ui-table"> ... </table>
     </div>
   JS（scrollhint）が data-scrollhint を拾って
   .has-overflow-right / .has-overflow-left を付与する。
   JS無しでもスクロール自体は機能する（フェードが出ないだけ）。
============================================================ */
.ui-table-scroll {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;          /* iOS慣性スクロール */
    scrollbar-width: thin;                       /* Firefox: 細いバー */
    scrollbar-color: var(--ui-border) transparent;
}
/* WebKit: スクロールバーを細く控えめに */
.ui-table-scroll::-webkit-scrollbar { height: 6px; }
.ui-table-scroll::-webkit-scrollbar-thumb {
    background: var(--ui-border);
    border-radius: 100px;
}
.ui-table-scroll::-webkit-scrollbar-track { background: transparent; }

/* 横スクロール時はテーブルを縮めず自然幅に（列を潰さない） */
.ui-table-scroll > .ui-table { min-width: 540px; }

/* --- フェード（右／左の「続きがある」サイン） --- */
.ui-table-scroll::before,
.ui-table-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--ui-transition);
    z-index: 2;
}
.ui-table-scroll::before {        /* 左フェード */
    left: 0;
    background: linear-gradient(90deg, var(--ui-surface), transparent);
}
.ui-table-scroll::after {         /* 右フェード */
    right: 0;
    background: linear-gradient(270deg, var(--ui-surface), transparent);
}
.ui-table-scroll.has-overflow-left::before  { opacity: 1; }
.ui-table-scroll.has-overflow-right::after  { opacity: 1; }

/* --- 右下に出る グラスモーフィズム スワイプヒント --- */
.ui-table-scroll-hint {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 11px;
    /* グラスモーフィズム: 半透明 + ブラー（aedit-topbar と同じ質感） */
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 0.5px solid rgba(255, 255, 255, 0.7);
    color: var(--ui-text);
    font-size: var(--text-caption-1);
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--ui-radius-pill);
    box-shadow: var(--ui-shadow-md);
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px) scale(0.96);
    transition: opacity var(--ui-transition), transform var(--ui-transition);
}
.ui-table-scroll.has-overflow-right .ui-table-scroll-hint {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 指アイコンを丸いアクセントチップに載せる */
.ui-table-scroll-hint .hint-finger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ui-accent);
    color: #fff;
    font-size: 0.8rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(var(--ui-accent-rgb), 0.4);
    /* 指が横にスワイプする動き */
    animation: ui-hint-swipe 1.6s ease-in-out infinite;
}

/* 指チップが右へスッと動いて戻る（スワイプのジェスチャー） */
@keyframes ui-hint-swipe {
    0%, 100% { transform: translateX(0); }
    35%      { transform: translateX(6px); }
    70%      { transform: translateX(0); }
}

/* テキスト部 */
.ui-table-scroll-hint .hint-label { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    .ui-table-scroll-hint .hint-finger { animation: none; }
}

/*
 * .site-logo-img — サイトロゴ画像の安全策。
 * インラインstyleでも高さを指定しているが、万一どこかのCSSに上書きされても
 * 確実にヘッダー等のサイズに収まるよう、専用クラス＋!importantで二重に保証する。
 */
.site-logo-img {
    display: inline-block !important;
    width: auto !important;
    object-fit: contain !important;
}

/*
 * .table-solid-bg — 素の .table はセルの背景色が --bs-table-bg 経由で
 * --bs-body-bg（= テーマ背景色。グラデーション設定時は色付き）を継承してしまい、
 * .card 等の白い親要素の中に置いても白くならない。
 * この不具合を避けたい表には .table-solid-bg を付与し、確実に白背景にする。
 */
.table-solid-bg {
    --bs-table-bg: #ffffff !important;
    background-color: #ffffff !important;
}
.table-solid-bg > :not(caption) > * > * {
    background-color: #ffffff !important;
}

/*
 * .table-solid-bg--gray-head — 上記と同じセル背景バグ対策をした上で、
 * 見出し行（thead）だけはグレー背景にしたい表向け（利用案内の料金表など）。
 */
.table-solid-bg--gray-head thead th {
    background-color: var(--ui-surface-2, #f5f5f7) !important;
}

/*
 * フロント側（front-container配下）の Bootstrap .table は、明示的に
 * .table-solid-bg を付け忘れても既定で白背景になるよう、ここで一括対応する。
 * カード背景色・ページ背景色（グラデーション設定時）の影響を受けず、
 * セルは常に白で読みやすさを確保する（今後追加するtableにも自動的に効く）。
 */
.front-container table.table {
    --bs-table-bg: #ffffff !important;
    background-color: #ffffff !important;
}
.front-container table.table > :not(caption) > * > * {
    background-color: #ffffff !important;
}

/* ------------------------------------------------------------
   30-b. モーダルをフォームに使うための追加
   入力欄の多いフォームを入れると縦に伸びて画面からはみ出し、
   下の「保存」ボタンが押せなくなる。本体の高さを画面内に収め、
   本文だけをスクロールさせて、ヘッダーとフッターは常に見えるようにする。
------------------------------------------------------------ */
.confirm-modal {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
}
.confirm-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
}
.confirm-modal-header,
.confirm-modal-footer {
    flex: 0 0 auto;
}

/* フォーム用モーダルは中身が左寄せ（確認モーダルの中央揃えを打ち消す） */
.confirm-modal--form .confirm-modal-header {
    text-align: left;
    padding: 18px 20px;
    border-bottom: 0.5px solid var(--ui-border);
    display: flex;
    align-items: center;
    gap: 12px;
}
.confirm-modal--form .confirm-modal-title { margin-bottom: 0; flex: 1 1 auto; }
.confirm-modal--form .confirm-modal-body { padding: 20px; }
.confirm-modal-close {
    border: 0;
    background: transparent;
    color: var(--ui-text-muted);
    font-size: var(--text-title-3);
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}
.confirm-modal-close:hover { color: var(--ui-text); }

/* ============================================================
   31-b. QR入庫の使い方（qr-howto）とスマホ案内（qr-phone-setup）
   現場で初めて触る人向けの手順表示。番号を丸で示す。
============================================================ */
.qr-howto { display: flex; flex-direction: column; gap: 14px; }
.qr-howto-step { display: flex; gap: 12px; align-items: flex-start; }
.qr-howto-num {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ui-accent);
    color: #fff;
    font-size: var(--text-caption-1);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.qr-howto-title { font-weight: 700; font-size: var(--text-footnote); color: var(--ui-text); margin-bottom: 2px; }
.qr-howto-desc { font-size: var(--text-caption-1); color: var(--ui-text-muted); line-height: 1.8; }

/* ホーム画面のアプリとして開いているときは、追加の案内はもう要らないので隠す */
/* ホーム画面のアプリとして開いているときは、
   「スマホで開く」案内はもう不要なので隠す。
   d-inline-block を打ち消す必要があるので !important を付けている。 */
@media (display-mode: standalone) {
    .qr-phone-setup { display: none !important; }
}

/* QRコードの枠。
   SVGは生成時にサイズを決めているが、狭い画面では枠ごと縮める必要があるので
   max-width で上限を決め、SVG側は枠いっぱいに追従させる。
   width/height を指定しないと endroid の固定サイズのまま外へはみ出して、
   隣の文字に重なる。 */
.qr-code-frame {
    background: #fff;
    border: 1px solid var(--ui-surface-3);
    border-radius: var(--ui-radius-sm);
    padding: 10px;
    /* 幅を先に決める。col-md-auto は中身の幅に合わせるので、
       width:100% にすると基準が決まらない。 */
    width: 200px;
    max-width: 100%;
}
.qr-code-frame svg {
    display: block;
    width: 100%;
    height: auto;
}
/* ============================================================
   31-c. 検索結果の1行（search-hit）
   画像／本文／在庫の3列。行そのものを押せる形（顧客）でも使う。
============================================================ */
.search-hit {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--ui-surface-2);
    border: 1px solid transparent;
    border-radius: var(--ui-radius-sm);
    text-align: left;
}
.search-hit:last-child { margin-bottom: 0; }
.search-hit--button { cursor: pointer; }
.search-hit--button:hover { border-color: var(--ui-surface-3); }
.search-hit--active {
    border-color: var(--ui-accent);
    background: rgba(var(--ui-accent-rgb), 0.06);
}
.search-hit-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--ui-surface-3);
    border-radius: var(--ui-radius-xs);
    overflow: hidden;
}
.search-hit-icon img { width: 100%; height: 100%; object-fit: contain; }
/* 本文は伸び縮みさせる。min-width:0 を付けないと長い商品名で行がはみ出す。 */
.search-hit-body { flex: 1 1 auto; min-width: 0; }
.search-hit-title {
    font-size: var(--text-footnote);
    font-weight: 600;
    color: var(--ui-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-hit-meta {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-hit-side { flex: 0 0 auto; text-align: right; }
.search-hit-qty { font-size: var(--text-footnote); font-weight: 700; color: var(--ui-text); }

/* ============================================================
   31-d. メーカーのカード一覧（maker-grid）
   縦スクロールの箇条書きより、ロゴが並ぶほうが目で探せる。
============================================================ */
.maker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
}
.maker-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-surface-3);
    border-radius: var(--ui-radius-sm);
    text-decoration: none;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.maker-card:hover {
    border-color: var(--ui-accent);
    box-shadow: var(--ui-shadow-sm, 0 2px 10px rgba(0,0,0,.06));
    transform: translateY(-1px);
}
.maker-card-logo {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: var(--ui-radius-xs);
    overflow: hidden;
}
.maker-card-logo img { width: 100%; height: 100%; object-fit: contain; }
.maker-card-logo i { font-size: 22px; color: var(--ui-text-muted); }
.maker-card-name {
    font-size: var(--text-caption-1);
    font-weight: 600;
    color: var(--ui-text);
    line-height: 1.4;
    /* 長いメーカー名は2行までで打ち切る（カードの高さをそろえるため） */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.maker-card-count { font-size: var(--text-caption-2); color: var(--ui-text-muted); }

/* ============================================================
   31-e. 使い方（マニュアル）ページ
   読み物なので、本文の幅を抑えて行を追いやすくする。
============================================================ */
.manual { max-width: 900px; }
.manual-p { font-size: var(--text-footnote); line-height: 2; color: var(--ui-text); margin-bottom: 14px; }
/* リンク色は「本文の中のリンク」だけに当てる。
   .manual a { ... } と一括で指定すると、青背景のタブや .btn まで
   文字色が青になり、青地に青で読めなくなる（実際にそうなった）。
   ここに並べていない場所のリンクは、その部品側の色をそのまま使う。 */
.manual-p a,
.manual-toc-list a,
.manual-table-wrap a,
.manual-note a,
.manual-order-item a,
.manual-choice-body a,
.manual-glossary-def a {
    color: var(--ui-accent);
}

/* 2本のマニュアルを行き来するタブ */
.manual-switch { display: flex; gap: 8px; flex-wrap: wrap; }
.manual-switch-item {
    display: flex;
    flex-direction: column;
    padding: 10px 18px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-surface-3);
    border-radius: var(--ui-radius-sm);
    text-decoration: none;
    color: var(--ui-text);
    font-size: var(--text-footnote);
    font-weight: 600;
}
.manual-switch-item:hover { border-color: var(--ui-accent); color: var(--ui-text); }
.manual-switch-item--active { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.manual-switch-item--active:hover { color: #fff; }
.manual-switch-note { font-size: var(--text-caption-2); font-weight: 400; opacity: .75; }

/* 目次 */
.manual-toc {
    background: var(--ui-surface-2);
    border-radius: var(--ui-radius-sm);
    padding: 18px 20px;
}
.manual-toc-title { font-size: var(--text-caption-1); font-weight: 700; color: var(--ui-text-muted); margin-bottom: 8px; }
.manual-toc-list { margin: 0; padding-left: 20px; }
.manual-toc-list li { font-size: var(--text-footnote); line-height: 2; }

.manual-section {
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: 24px;
    margin-bottom: 20px;
    /* 目次から飛んだとき、見出しがヘッダーの下に隠れないようにする */
    scroll-margin-top: 20px;
}
.manual-h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--text-title-3);
    font-weight: 700;
    color: var(--ui-text);
    margin-bottom: 16px;
}
.manual-step-no {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ui-accent);
    color: #fff;
    font-size: var(--text-footnote);
    display: flex;
    align-items: center;
    justify-content: center;
}
.manual-h3 {
    font-size: var(--text-footnote);
    font-weight: 700;
    color: var(--ui-text);
    margin: 22px 0 10px;
}
.manual-table-wrap { overflow-x: auto; margin-bottom: 14px; }
.manual-table-wrap code {
    background: var(--ui-surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: var(--text-caption-1);
}

/* 手順（番号つき） */
.manual-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.manual-stepx { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-caption-1); line-height: 1.9; }
.manual-stepx-n {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ui-surface-3);
    color: var(--ui-text);
    font-size: var(--text-caption-2);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

/* 「この順番で作る」の流れ図。狭い画面では縦に折り返る。 */
.manual-order { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.manual-order-item {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--ui-surface-2);
    border-radius: var(--ui-radius-sm);
    padding: 12px 14px;
    font-size: var(--text-footnote);
    font-weight: 600;
}
.manual-order-item span { font-size: var(--text-caption-2); font-weight: 400; color: var(--ui-text-muted); line-height: 1.6; }
.manual-order-arrow { display: flex; align-items: center; color: var(--ui-text-muted); }

/* 2つのやり方を並べて選ばせるカード */
.manual-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; }
.manual-choice-card { border: 1px solid var(--ui-surface-3); border-radius: var(--ui-radius-sm); overflow: hidden; display: flex; flex-direction: column; }
.manual-choice-head { background: var(--ui-surface-2); padding: 12px 14px; font-weight: 700; font-size: var(--text-footnote); }
.manual-choice-body { padding: 14px; font-size: var(--text-caption-1); line-height: 1.9; flex: 1 1 auto; }
.manual-choice-foot { padding: 10px 14px; border-top: 1px solid var(--ui-surface-3); font-size: var(--text-caption-2); color: var(--ui-text-muted); }

/* 優先順位の表示（価格の決まり方） */
.manual-priority { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.manual-priority-item { display: flex; gap: 12px; align-items: center; background: var(--ui-surface-2); border-radius: var(--ui-radius-sm); padding: 12px 14px; font-size: var(--text-caption-1); line-height: 1.7; }
.manual-priority-rank {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ui-accent);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 注意書き。色で重さを分ける（青=補足 / 黄=注意 / 赤=事故につながる） */
.manual-note {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--ui-radius-sm);
    font-size: var(--text-caption-1);
    line-height: 1.9;
    margin: 14px 0;
}
.manual-note > i { flex: 0 0 auto; font-size: 16px; margin-top: 2px; }
.manual-note--info   { background: rgba(var(--ui-accent-rgb), .07); color: var(--ui-text); }
.manual-note--info > i { color: var(--ui-accent); }
.manual-note--warn   { background: rgba(255, 149, 0, .10); color: var(--ui-text); }
.manual-note--warn > i { color: var(--ui-warning); }
.manual-note--danger { background: rgba(255, 59, 48, .09); color: var(--ui-text); }
.manual-note--danger > i { color: var(--ui-danger); }

/* 次に読むものへの案内 */
.manual-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--ui-surface-2);
    border-radius: var(--ui-radius);
    padding: 20px 24px;
    margin-top: 24px;
}

/* ============================================================
   31-f. ヘッダーのメニュー（header-menu）
   Bootstrap の JS を読み込んでいないため、開閉は Alpine で行う。
   ここは見た目だけを持つ。
============================================================ */
.header-menu { position: relative; }
.header-menu-button {
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: var(--ui-text-muted);
    font-size: var(--text-caption-1);
    padding: 4px 6px;
    border-radius: var(--ui-radius-xs);
    cursor: pointer;
}
.header-menu-button:hover { color: var(--ui-text); background: var(--ui-surface-2); }

/* パネルの外側を押したときに閉じるための透明な受け皿。
   パネル自身より低い重なりにして、リンクが押せなくならないようにする。 */
.header-menu-backdrop { position: fixed; inset: 0; z-index: 400; }

.header-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 401;
    width: 260px;
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-lg);
    padding: 8px;
}
.header-menu-title {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    letter-spacing: .08em;
    padding: 4px 8px 6px;
}
.header-menu-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 8px;
    border-radius: var(--ui-radius-xs);
    text-decoration: none;
    color: var(--ui-text);
}
.header-menu-item:hover { background: var(--ui-surface-2); color: var(--ui-text); }
.header-menu-item > i { color: var(--ui-accent); margin-top: 2px; }
.header-menu-item strong { display: block; font-size: var(--text-caption-1); font-weight: 600; }
.header-menu-item small { display: block; font-size: var(--text-caption-2); color: var(--ui-text-muted); line-height: 1.5; }

/* ============================================================
   31-g. 用語の説明（term-hint）
   マスタ画面の上に置く「◯◯とは」。警告ではないので控えめな色にする。
============================================================ */
.term-hint {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--ui-surface-2);
    border-radius: var(--ui-radius-sm);
    padding: 14px 16px;
}
.term-hint-icon { color: var(--ui-accent); font-size: 16px; margin-top: 2px; flex: 0 0 auto; }
/* min-width:0 が無いと、長い説明文で右のリンクが押し出される */
.term-hint-body { flex: 1 1 auto; min-width: 0; }
.term-hint-title { font-size: var(--text-caption-1); font-weight: 700; color: var(--ui-text); margin-bottom: 2px; }
.term-hint-text { font-size: var(--text-caption-1); color: var(--ui-text-muted); line-height: 1.85; }
.term-hint-confuse {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 0.5px solid var(--ui-border);
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    line-height: 1.7;
}
.term-hint-confuse > i { color: var(--ui-warning); margin-top: 2px; flex: 0 0 auto; }
.term-hint-link {
    flex: 0 0 auto;
    align-self: center;
    font-size: var(--text-caption-2);
    color: var(--ui-accent);
    text-decoration: none;
    white-space: nowrap;
}
.term-hint-link:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
    /* 狭い画面では横に並べず、リンクを下に回す */
    .term-hint { flex-wrap: wrap; }
    .term-hint-link { align-self: flex-start; margin-left: 28px; }
}

/* ============================================================
   31-h. 用語集（manual-glossary）
   マニュアル内で「カテゴリとは／メーカーとは」を並べて示す。
   横に並べることで、似た言葉どうしの違いを見比べられるようにする。
============================================================ */
.manual-glossary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.manual-glossary-item {
    border: 1px solid var(--ui-surface-3);
    border-radius: var(--ui-radius-sm);
    overflow: hidden;
}
.manual-glossary-term {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ui-surface-2);
    padding: 10px 14px;
    font-size: var(--text-footnote);
    font-weight: 700;
    color: var(--ui-text);
}
.manual-glossary-term > i { color: var(--ui-accent); }
.manual-glossary-def {
    padding: 12px 14px;
    font-size: var(--text-caption-1);
    line-height: 1.9;
    color: var(--ui-text);
}
.manual-glossary-use {
    display: block;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 0.5px solid var(--ui-border);
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
}

/* 目次の補足（— カテゴリ／メーカー…とは） */
.manual-toc-sub { font-size: var(--text-caption-2); color: var(--ui-text-muted); margin-left: 6px; }

/* ============================================================
   31-i. CSVひな形のダウンロード（csv-template-link）
   取り込みモーダルの中に置く。説明文とファイル選択の間。
============================================================ */
.csv-template-link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(var(--ui-accent-rgb), .07);
    border-radius: var(--ui-radius-sm);
    text-decoration: none;
    color: var(--ui-text);
}
.csv-template-link:hover { background: rgba(var(--ui-accent-rgb), .13); color: var(--ui-text); }
.csv-template-link > i { color: var(--ui-accent); margin-top: 2px; flex: 0 0 auto; }
.csv-template-link strong { display: block; font-size: var(--text-caption-1); font-weight: 600; }
.csv-template-link small { display: block; font-size: var(--text-caption-2); color: var(--ui-text-muted); line-height: 1.6; }

/* ============================================================
   31-j. 導入チェックリスト（setup-*）
============================================================ */
.setup-progress-badge {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ui-accent);
    color: #fff;
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: var(--text-title-2);
    font-weight: 700;
    line-height: 56px;
}
.setup-progress-badge > span { font-size: var(--text-caption-1); font-weight: 400; opacity: .8; }
.setup-progress-badge--done { background: var(--ui-success, #34c759); font-size: 26px; line-height: 1; align-items: center; }

.setup-bar { height: 6px; background: var(--ui-surface-3); border-radius: 3px; overflow: hidden; }
.setup-bar-fill { height: 100%; background: var(--ui-accent); border-radius: 3px; transition: width .3s ease; }

.setup-list { display: flex; flex-direction: column; gap: 8px; }
.setup-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 14px 16px;
}
.setup-item--done { background: var(--ui-surface-2); }
.setup-item-mark {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ui-surface-3);
    color: var(--ui-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-caption-1);
    font-weight: 700;
}
.setup-item--done .setup-item-mark { background: var(--ui-success, #34c759); color: #fff; }
/* min-width:0 が無いと、説明文が長い行で右側のボタンが押し出される */
.setup-item-body { flex: 1 1 auto; min-width: 0; }
.setup-item-title { font-size: var(--text-footnote); font-weight: 600; color: var(--ui-text); display: flex; align-items: center; gap: 8px; }
.setup-item-desc { font-size: var(--text-caption-2); color: var(--ui-text-muted); line-height: 1.7; }
.setup-item-partial {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin-top: 6px;
    font-size: var(--text-caption-2);
    color: var(--ui-warning);
    line-height: 1.6;
}
.setup-item-count { flex: 0 0 auto; text-align: right; min-width: 72px; }
.setup-item-num { font-size: var(--text-title-3); font-weight: 700; color: var(--ui-text); }
.setup-item-unit { font-size: var(--text-caption-2); color: var(--ui-text-muted); margin-left: 2px; }
.setup-item-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.setup-item-manual { font-size: var(--text-caption-2); color: var(--ui-accent); text-decoration: none; white-space: nowrap; }
.setup-item-manual:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
    /* 狭い画面では件数とボタンを下の行に回す */
    .setup-item { flex-wrap: wrap; }
    .setup-item-body { flex: 1 1 100%; order: 1; }
    .setup-item-mark { order: 0; }
    .setup-item-count { order: 2; margin-left: 44px; text-align: left; }
    .setup-item-actions { order: 3; margin-left: auto; }
}

/* CSVひな形のボタン群 */
.setup-templates { display: flex; flex-wrap: wrap; gap: 8px; }
.setup-template {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--ui-surface-2);
    border: 1px solid var(--ui-surface-3);
    border-radius: var(--ui-radius-sm);
    text-decoration: none;
    color: var(--ui-text);
    font-size: var(--text-caption-1);
    font-weight: 600;
}
.setup-template:hover { border-color: var(--ui-accent); color: var(--ui-text); }
.setup-template > i { color: var(--ui-accent); font-size: 16px; }

/* ============================================================
   31-k. 発行した認証番号の表示（issued-code-*）
   電話口で読み上げるので、数字は大きく・字間を広げる。
============================================================ */
.issued-code-card { border: 1px solid var(--ui-accent); }
.issued-code-value {
    font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--ui-text);
    background: var(--ui-surface-2);
    border-radius: var(--ui-radius-sm);
    padding: 8px 14px;
    text-align: center;
}

/* ============================================================
   31-l. ページ背景に直接置く情報パネルの下地

   --ui-surface-2 と --ui-bg はどちらも #f5f5f7 で、同じ色。
   白いカードの「中」に置くぶんには濃淡が出るが、ページ背景の「上」に
   直接置くと背景と同化して、枠が無いように見える
   （仕入先画面の「仕入先とは」が実際にそう見えていた）。

   ページ背景に直接置く部品は、白地＋枠線で「パネルである」と分かるようにする。
============================================================ */
.term-hint,
.manual-toc,
.manual-next {
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border);
}

/* 用語の説明は「補足」なので、見出しをアクセント色にして
   本文と役割の違いを示す。
   以前は左端に3pxの帯を入れていたが、角丸に沿って線が曲がり、
   途中で途切れたように見えて収まりが悪かったのでやめた。
   色を足す場所は「線」ではなく「文字」にする。 */
.term-hint-title {
    color: var(--ui-accent);
}

/* 手順の流れ図・優先順位も、マニュアル本文（白いカード）の中に
   置かれるので濃淡は出るが、枠線があったほうが区切りが分かりやすい */
.manual-order-item,
.manual-priority-item {
    border: 0.5px solid var(--ui-border);
}

/* 「済」の行は薄い緑にする。背景と同じ灰色だと、済んでいるのか
   単に枠が薄いだけなのか見分けがつかない */
.setup-item--done {
    background: rgba(52, 199, 89, 0.06);
    border-color: rgba(52, 199, 89, 0.35);
}

/* ============================================================
   31-m. 導入が終わるまでの案内（setup-callout）
   ダッシュボードに出す。必須の登録が済むと表示されなくなる。
============================================================ */
.setup-callout {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: rgba(var(--ui-accent-rgb), 0.07);
    border: 1px solid rgba(var(--ui-accent-rgb), 0.25);
    border-radius: var(--ui-radius);
    padding: 16px 20px;
}
.setup-callout-mark {
    flex: 0 0 auto;
    min-width: 46px;
    height: 46px;
    padding: 0 10px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-accent);
    color: #fff;
    display: flex;
    align-items: baseline;
    justify-content: center;
    line-height: 46px;
    font-size: var(--text-title-3);
    font-weight: 700;
}
.setup-callout-mark > span { font-size: var(--text-caption-2); font-weight: 400; opacity: .85; }
.setup-callout-body { flex: 1 1 260px; min-width: 0; }
.setup-callout-title { font-size: var(--text-footnote); font-weight: 700; color: var(--ui-text); }
.setup-callout-desc { font-size: var(--text-caption-1); color: var(--ui-text-muted); line-height: 1.7; }

/* ============================================================
   31-n. CSVひな形の一覧（csv-tpl）
   1種類＝1ブロック。列の見出しをチップで並べ、
   ダウンロードする前に中身が分かるようにする。
============================================================ */
.csv-tpl {
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: 20px 24px;
    margin-bottom: 14px;
}
.csv-tpl-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.csv-tpl-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-accent-rgb), 0.10);
    color: var(--ui-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}
/* min-width:0 が無いと、長いファイル名でボタンが右へ押し出される */
.csv-tpl-headline { flex: 1 1 220px; min-width: 0; }
.csv-tpl-title { font-size: var(--text-title-3); font-weight: 700; color: var(--ui-text); }
.csv-tpl-file { font-size: var(--text-caption-2); color: var(--ui-text-muted); }
.csv-tpl-actions { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; }
.csv-tpl-desc {
    font-size: var(--text-caption-1);
    color: var(--ui-text-muted);
    line-height: 1.85;
    margin: 12px 0 0;
}
.csv-tpl-cols { margin-top: 14px; padding-top: 12px; border-top: 0.5px solid var(--ui-border); }
.csv-tpl-cols-label { font-size: var(--text-caption-2); color: var(--ui-text-muted); margin-bottom: 8px; }
.csv-tpl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.csv-tpl-chip {
    display: inline-block;
    padding: 4px 10px;
    background: var(--ui-surface-2);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-xs);
    font-size: var(--text-caption-2);
    color: var(--ui-text);
    font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================
   31-o. 別ページへの大きめの案内（setup-banner）
   リンク全体を押せる面にする。
============================================================ */
.setup-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: var(--ui-surface);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius);
    text-decoration: none;
    color: var(--ui-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.setup-banner:hover {
    border-color: var(--ui-accent);
    box-shadow: var(--ui-shadow-sm, 0 2px 10px rgba(0,0,0,.06));
    color: var(--ui-text);
}
.setup-banner-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: var(--ui-radius-sm);
    background: rgba(var(--ui-accent-rgb), 0.10);
    color: var(--ui-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}
.setup-banner-body { flex: 1 1 auto; min-width: 0; }
.setup-banner-title { font-size: var(--text-footnote); font-weight: 700; color: var(--ui-accent); margin-bottom: 2px; }
.setup-banner-desc { font-size: var(--text-caption-1); color: var(--ui-text-muted); line-height: 1.8; }
.setup-banner-arrow { flex: 0 0 auto; color: var(--ui-text-muted); }

/* ============================================================
   31-p. QRコードの出どころ（qr-source）
   「登録しなければ自動、登録すればそちら」を2行で示す。
   ラジオボタンにしていないのは、実際の切り替えが
   「画像が登録されているかどうか」だけで決まるため。
   選択肢に見せると、画像を消さずに自動へ戻せると誤解される。
============================================================ */
.qr-source {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.qr-source-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 9px 11px;
    background: var(--ui-surface-2);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    font-size: var(--text-caption-2);
    line-height: 1.7;
    color: var(--ui-text-muted);
}
.qr-source-row > i { flex: 0 0 auto; margin-top: 2px; color: var(--ui-text-muted); }
.qr-source-row strong { color: var(--ui-text-muted); font-weight: 600; }
/* いま実際に使われるほうを目立たせる */
.qr-source-row--active {
    background: rgba(var(--ui-accent-rgb), 0.07);
    border-color: rgba(var(--ui-accent-rgb), 0.25);
    color: var(--ui-text);
}
.qr-source-row--active > i,
.qr-source-row--active strong { color: var(--ui-accent); }

/* ============================================================
   31-r. アカウント切り替え中の帯（impersonation-bar）
   見落とされては意味がないので、はっきり目立つ色にする。
============================================================ */
.impersonation-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: var(--ui-purple);
    color: #fff;
    font-size: var(--text-caption-1);
    line-height: 1.6;
}
.impersonation-bar > i { font-size: 16px; }
.impersonation-bar strong { font-weight: 700; }
.impersonation-bar-origin {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: var(--ui-radius-pill);
    background: rgba(255, 255, 255, 0.22);
    font-size: var(--text-caption-2);
}
.impersonation-bar-button {
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    color: #fff;
    border-radius: var(--ui-radius-pill);
    padding: 5px 16px;
    font-size: var(--text-caption-1);
    white-space: nowrap;
    cursor: pointer;
}
.impersonation-bar-button:hover { background: rgba(255, 255, 255, 0.18); }

/* ============================================================
   31-s. メーカーカードの絞り込み欄（maker-filter）
   虫めがねと消去ボタンを入力欄の中に重ねる。
============================================================ */
.maker-filter { position: relative; width: 220px; max-width: 100%; }
.maker-filter .ui-input { padding-left: 34px; padding-right: 32px; }
.maker-filter-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-text-muted);
    font-size: 13px;
    pointer-events: none;
}
.maker-filter-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--ui-text-muted);
    font-size: 11px;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
}
.maker-filter-clear:hover { color: var(--ui-text); }

/* ============================================================
   31-t. ヘッダーからメニューを開くとき（header-menu-panel--nav）
   第二階層ではサイドバーを出さないので、同じ中身をここに入れる。
   項目数が多いので、幅を広げて縦スクロールできるようにする。
============================================================ */
.header-menu-panel--nav {
    width: 280px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: 14px;
}
/* サイドバーで付けていた余白が、パネル内では間延びして見えるので詰める */
.header-menu-panel--nav .list-group { margin-bottom: 12px !important; }
.header-menu-panel--nav .admin-sidebar-title { margin-top: 4px; }

/* ============================================================
   31-u. 並び順の上下ボタン（order-buttons）
   一覧の左端に置く。行の高さに収めるため小さめ。
============================================================ */
.order-buttons { display: flex; align-items: center; gap: 2px; }
.order-button {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid var(--ui-border);
    background: var(--ui-surface);
    border-radius: var(--ui-radius-xs);
    color: var(--ui-text);
    font-size: 11px;
    cursor: pointer;
    padding: 0;
}
.order-button:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-accent); }
/* 端の行では押せない。押せないことが見て分かるよう薄くする */
.order-button:disabled { opacity: .3; cursor: default; }
.order-number {
    margin-left: 4px;
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    min-width: 16px;
    text-align: right;
}

/* ============================================================
   31-v. 入力欄の説明と、欄のまとまりの見出し

   説明（field-hint）は必ず入力欄の「下」に置く。
   上に置くと、説明の行数の違いがそのまま入力欄の高さのずれになり、
   横に並んだ欄が段違いになる（実際にそうなっていた）。

   説明が長くて1行に収まらないものは、欄ごとに付けず
   field-group-label でまとまりごとに書く。
============================================================ */
.field-hint {
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    line-height: 1.6;
    margin-top: 4px;
}
/* 説明の有無で入力欄の下端がそろわないと、行そのものが凸凹に見える。
   1行ぶんの高さを確保して、あってもなくても同じ高さにする。 */
.row .form-field > .field-hint { min-height: 1.6em; }

.field-group-label {
    font-size: var(--text-caption-1);
    font-weight: 700;
    color: var(--ui-text);
    margin-bottom: 8px;
}
.field-group-label > span {
    font-weight: 400;
    color: var(--ui-text-muted);
    font-size: var(--text-caption-2);
    margin-left: 6px;
}

/* ============================================================
   31-w. 出庫登録の確認まわり（sales-context / sales-line-check）

   売上に直結する画面なので、登録する前に数値の根拠を確かめられるようにする。
   リンクはすべて別タブで開く（同じタブだと入力中の明細が消えるため）。
============================================================ */
.sales-context {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: rgba(var(--ui-accent-rgb), 0.06);
    border: 1px solid rgba(var(--ui-accent-rgb), 0.20);
    border-radius: var(--ui-radius-sm);
    padding: 12px 16px;
}
.sales-context-icon { color: var(--ui-accent); font-size: 18px; flex: 0 0 auto; }
.sales-context-body { flex: 1 1 260px; min-width: 0; }
.sales-context-title { font-size: var(--text-footnote); font-weight: 700; color: var(--ui-text); }
.sales-context-meta { font-size: var(--text-caption-2); color: var(--ui-text-muted); line-height: 1.7; }
.sales-context-links { flex: 0 0 auto; display: flex; gap: 12px; flex-wrap: wrap; }
.sales-context-links a,
.sales-line-check-links a {
    font-size: var(--text-caption-2);
    color: var(--ui-accent);
    text-decoration: none;
    white-space: nowrap;
}
.sales-context-links a:hover,
.sales-line-check-links a:hover { text-decoration: underline; }

/* 明細1行ぶんの確認欄。入力欄の下に横並びで置く。 */
.sales-line-check {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin-top: 4px;
    background: var(--ui-surface-2);
    border-radius: var(--ui-radius-xs);
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    line-height: 1.7;
}
.sales-line-check-item { display: inline-flex; align-items: center; gap: 4px; }
.sales-line-check-item strong { color: var(--ui-text); }
.sales-line-check-links { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   31-x. 価格の決まり方（price-rule）
   価格を設定する画面すべてに出す共通の案内。
============================================================ */
.price-rule {
    background: var(--ui-surface-2);
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    padding: 14px 16px;
}
.price-rule-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-caption-1);
    color: var(--ui-text);
    margin-bottom: 10px;
}
.price-rule-title > i { color: var(--ui-accent); }

.price-rule-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 8px;
    border-radius: var(--ui-radius-xs);
    font-size: var(--text-caption-2);
    line-height: 1.7;
}
/* いま設定している段を目立たせる。
   「自分が入れている値が何番目の決まりなのか」が分からないと、
   入れたのに効かない理由にたどり着けない。 */
.price-rule-row--current {
    background: rgba(var(--ui-accent-rgb), 0.10);
    outline: 1px solid rgba(var(--ui-accent-rgb), 0.30);
}
.price-rule-no {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ui-surface-3);
    color: var(--ui-text);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
.price-rule-row--current .price-rule-no { background: var(--ui-accent); color: #fff; }
.price-rule-body { flex: 1 1 auto; min-width: 0; }
.price-rule-body strong { color: var(--ui-text); font-size: var(--text-caption-1); }
.price-rule-desc { color: var(--ui-text-muted); margin-left: 6px; }
.price-rule-where {
    display: block;
    color: var(--ui-text-muted);
    opacity: .8;
    margin-top: 1px;
}
.price-rule-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: var(--ui-radius-pill);
    font-size: 10px;
    font-weight: 600;
}
.price-rule-tag--base { background: rgba(52, 199, 89, .15); color: #1c7c3a; }
.price-rule-tag--exception { background: var(--ui-surface-3); color: var(--ui-text-muted); }
.price-rule-here {
    display: inline-block;
    margin-left: 6px;
    padding: 0 8px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
}
.price-rule-note {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 0.5px solid var(--ui-border);
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    line-height: 1.8;
}
.price-rule--compact { padding: 10px 12px; }
.price-rule--compact .price-rule-row { padding: 3px 6px; }

/* ============================================================
   31-y. ロゴとファビコン（brand-*）

   設定画面で登録された画像を出すところ。
   画像の縦横比はこちらで決められないので、高さだけを揃え、
   横幅は上限を設けて「長いロゴがヘッダーを押し広げる」のを防ぐ。
============================================================ */

/* ヘッダー左上。高さ24pxは、隣の文字（17px）と釣り合う大きさ */
.brand-logo {
    height: 24px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* ログイン画面。既定の頭文字マーク（36px）と同じ高さに揃える */
.auth-logo-image {
    height: 36px;
    max-width: 220px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* 設定画面のプレビュー */
.brand-preview {
    border: 0.5px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-2);
    padding: 14px 16px;
}
.brand-preview-label {
    font-size: var(--text-caption-2);
    font-weight: 700;
    color: var(--ui-text-muted);
    margin-bottom: 8px;
}
.brand-preview-note {
    margin-top: 8px;
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
}
.brand-preview-logo {
    height: 36px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}
.brand-preview-default {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: var(--ui-text);
}
.brand-preview-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ui-accent);
    display: inline-block;
    margin-right: 6px;
}

/* ブラウザのタブを模した表示。
   実物と同じ16pxで出さないと「小さくすると読めない」ことが伝わらない。 */
.brand-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 7px 14px 7px 11px;
    border: 0.5px solid var(--ui-border);
    border-radius: 9px 9px 0 0;
    background: var(--ui-surface-1);
    font-size: var(--text-caption-1);
    color: var(--ui-text);
}
.brand-tab img,
.brand-tab i {
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
    object-fit: contain;
    flex-shrink: 0;
    color: var(--ui-text-muted);
}
.brand-tab span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   31-z. サイドメニュー（第1層｜第2層の2カラム）

   第1層でグループを選ぶと、第2層にその項目が出る。
   アコーディオンにしていないのは、開閉の操作を要らなくするため。

   色の意味は1つに絞る。第1層は「開いているグループ」、
   第2層は「今いるページ」。どちらも同じ薄色＋文字色で表す。
   塗りつぶし（濃い背景）は使わない。Bootstrap の .active は
   「濃い背景＋白文字」を一組で当てるため、背景だけ上書きすると文字が読めなくなる。
============================================================ */

/* Bootstrap の col は width:75% 等を持つ。固定幅と併せると合計が100%を超え、
   本文がカラム落ちする。max-width だけでなく width も解除する。 */
@media (min-width: 768px) {
    .admin-sidebar { flex: 0 0 auto; width: auto; max-width: none; }
    .admin-main { flex: 1 1 0; width: auto; max-width: none; min-width: 0; }

    /* 画面に貼り付けて追従させる。align-self: flex-start が肝で、
       これが無いと行の高さまで引き伸ばされ、下に余白ができる。

       top はヘッダーの高さ（52px・固定）ぶん下げる。0 にすると
       ヘッダー（z-index:200）の下に潜り込み、上端の「メニューを畳む」が隠れる。 */
    .admin-sidebar {
        position: sticky;
        top: 52px;
        align-self: flex-start;
        max-height: calc(100vh - 52px);
        overflow-y: auto;
    }
}

/* .row は既定で子を同じ高さに伸ばす。その高さを中のナビまで渡すと、
   区切り線は「中身の高さ」ぶんだけ引かれる。
   画面の高さで決め打ちすると、短い画面で下に余白と無駄なスクロールが出る。 */
.admin-sidebar { display: flex; }

.admin-nav {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    gap: 10px;
    /* 影で浮かせると、白の面積と相まって軽い見た目になる。細い枠線で締める */
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: 8px;
}

/* ---- 第1層（グループ） ---- */
.admin-nav-main {
    flex: 0 0 auto;
    /* 固定幅にすると、あとから項目名を足したときに端で詰まる */
    width: max-content;
    min-width: 168px;
    max-width: 260px;
    padding-right: 10px;
    border-right: 1px solid var(--ui-border);
}

.admin-nav-main-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    /* ナビだからと薄いグレーにしない。毎日読む場所なので本文と同じ濃さにする */
    color: var(--ui-text);
    font-size: var(--text-caption-1);
    text-align: left;
    line-height: 1.4;
    cursor: pointer;
}
.admin-nav-main-item i { font-size: 16px; flex-shrink: 0; width: 16px; text-align: center; }
.admin-nav-main-item:hover { background: var(--ui-surface-2); }
.admin-nav-main-item.is-selected {
    background: var(--ui-accent-lt);
    color: var(--ui-accent);
    font-weight: 700;
}

/* 行き先ではない操作（畳む・全メニュー）は薄くしてよい。
   薄くしてよいのはここと、グループの見出しだけ。 */
.admin-nav-action { color: var(--ui-text-muted); }

.admin-nav-main-sep {
    height: 1px;
    background: var(--ui-border);
    margin: 8px 4px;
}

/* ---- 第2層（項目） ---- */
.admin-nav-sub {
    flex: 0 0 236px;   /* 最長の項目名が折り返さない幅 */
    width: 236px;
    padding-left: 10px;
}
.admin-nav-panel { display: none; }
.admin-nav-panel.is-open { display: block; }

.admin-nav-panel-title {
    padding: 4px 10px 8px;
    font-size: var(--text-caption-2);
    color: var(--ui-text-muted);
    letter-spacing: .08em;
}

.admin-nav-sub .list-group-item {
    /* 面が白なので、触れたときはグレーに沈ませる（白く浮かせても分からない） */
    background: transparent;
    border-color: transparent;
    color: var(--ui-text);
    padding: 9px 10px;
    border-radius: var(--ui-radius-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-nav-sub .list-group-item:hover { background: var(--ui-surface-2); }
.admin-nav-sub .list-group-item.active {
    background: var(--ui-accent-lt);
    color: var(--ui-accent);
    font-weight: 700;
    border-color: transparent;
}

/* ---- 第1層の折りたたみ ---- */
.admin-nav-collapse-open { display: none; }

@media (min-width: 768px) {
    /* 畳むのは第1層だけ。第2層は残す（畳んだまま項目を選べる）。
       完全に消すと、戻す場所を探させることになる。 */
    .admin-sidebar-collapsed .admin-nav-main {
        flex-basis: 44px;
        width: 44px;
        min-width: 0;
        max-width: none;
    }
    .admin-sidebar-collapsed .admin-nav-main-item { justify-content: center; padding: 9px 0; }
    .admin-sidebar-collapsed .admin-nav-main-label { display: none; }
    .admin-sidebar-collapsed .admin-nav-collapse-close { display: none; }
    .admin-sidebar-collapsed .admin-nav-collapse-open { display: inline-block; }
}

/* ---- 全メニュー（モーダルの中身・ヘッダーのパネル） ----

   ただのリストにしない。項目を平らに並べると、どこがグループの切れ目か
   分からず、探すための画面として機能しない。
   グループごとに枠で囲み、見出しに地色を敷き、項目どうしを横線で区切る。
   この3つのうち1つでも欠けると、ただのリストに戻る。

   段組みは grid ではなく columns。グループごとの項目数がばらばらでも
   列の高さが自然に揃う（grid だと列ごとに手で割り振ることになる）。 */
.admin-full-menu-columns { columns: 3; column-gap: 20px; }
@media (max-width: 991px) { .admin-full-menu-columns { columns: 2; } }
@media (max-width: 575px) { .admin-full-menu-columns { columns: 1; } }

.admin-full-menu-group {
    /* 切らないと、見出しと項目が列をまたいで離れる */
    break-inside: avoid;
    /* columns の中では上マージンが効かない箇所があるので inline-block にする。
       これが無いと、2列目以降のカードが上端にくっつく。 */
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    overflow: hidden;   /* 角丸から中身がはみ出さない */
}

/* 見出しには地色を敷く。無いと項目と同じ高さの行に見え、グループの区切りが消える */
.admin-full-menu-title {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ui-surface-2);
    padding: 10px 14px;
    font-size: var(--text-caption-1);
    font-weight: 700;
    color: var(--ui-text);
}

.admin-full-menu-links { display: flex; flex-direction: column; }

.admin-full-menu-link {
    display: block;
    padding: 9px 14px;
    font-size: var(--text-caption-1);
    /* ナビだからと薄いグレーにしない。行き先を読む場所なので本文と同じ濃さ */
    color: var(--ui-text);
    text-decoration: none;
    /* 項目どうしの横線。これが無いと切れ目が分からず、目が滑る。省かない */
    border-top: 1px solid var(--ui-border);
    transition: var(--ui-transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-full-menu-link:hover { background: var(--ui-accent-lt); color: var(--ui-accent); }

/* ヘッダーから開くパネル（第二階層）でも同じカードを使う。
   段組みは画面幅ではなくパネル幅（280px）で決まるべきなので1列に固定する。
   3段組みのままだと、280pxの中に3列が押し込まれて読めなくなる。 */
.header-menu-panel .admin-full-menu-columns { columns: 1; }
.header-menu-panel .admin-full-menu-group { margin-bottom: 12px; }

/* ---- 狭い画面 ---- */
@media (max-width: 767.98px) {
    /* 第1層は横スクロールの帯にする。縦に積むと本文が遠くなる */
    .admin-nav { flex-direction: column; }
    .admin-nav-main {
        display: flex;
        flex-direction: row;
        width: auto;
        min-width: 0;
        max-width: none;
        overflow-x: auto;
        padding-right: 0;
        padding-bottom: 8px;
        border-right: 0;
        border-bottom: 1px solid var(--ui-border);
    }
    .admin-nav-main-item { width: auto; white-space: nowrap; }
    .admin-nav-main-sep { display: none; }
    .admin-nav-sub { flex: 1 1 auto; width: auto; padding-left: 0; padding-top: 8px; }
}