/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ========== ページ全体のシェル ==========
   position:sticky はこのアプリではスクロールコンテナがflexサイズの場合に
   信頼できない挙動になることが分かっている（Webmailで実証済み）。代わりに
   シェル全体を固定高さのflex columnにし、上部バーはflex-shrink:0の通常配置、
   実際にスクロールするのは.wg-contentだけにする。 */
.wg-shell[b-ee2iw9q6zg] {
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

/* Sidebar (TOMOVA KIDS指示書のモックアップ) はposition:fixedで独立しているため
   この余白はトップバー/コンテンツ側だけをサイドバー幅ぶん右へ押し出す。 */
@media (min-width: 768px) {
    .wg-shell[b-ee2iw9q6zg] {
        margin-left: 230px;
    }
}

.wg-content[b-ee2iw9q6zg] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    /* overflow-x:hiddenをここに追加して試したが（Home.razorの通知チップ行の
       横あふれ対策として）、この要素は縦方向の-webkit-overflow-scrolling:
       touchを持つ実質的なページビューポートであり、ここにoverflow-x:hidden
       を重ねると実機iOS Safariで子要素(.notify-scroll)自身の横スワイプが
       効かなくなる副作用が疑われたため撤回した（tomova_home_summary_scroll_fix.md
       のチェックリストが指摘する「親要素のoverflow:hiddenが子の横スクロールを
       殺す」パターンに一致・08-18）。横あふれの対策は個々のページ側
       （Home.razor.cssの.notify-scroll）で行う。 */
    /* iOS Safari/Chrome-iOS sometimes won't engage touch/momentum scrolling
       on a nested overflow:auto container without this — seen on Schedule's
       mobile day-agenda panel (confirmed on a real iPhone, 2026-08-06). */
    -webkit-overflow-scrolling: touch;
    /* Stop this container's own scroll from chaining to the document/body if
       it ever bottoms out — pairs with the same overscroll-behavior on inner
       page-owned scroll regions (e.g. Chat's .chat-messages). */
    overscroll-behavior-y: contain;
    /* TOMOVA KIDSモックアップの淡いブルーグレー背景 — content cards (white,
       bordered) sit on top of this. */
    background-color: var(--bg, #F5F8FB);
}

.wg-article[b-ee2iw9q6zg] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding-top: 1.1rem;
}

/* スマホ幅ではBootstrapのpx-3(1rem)固定だった左右余白を最小限まで詰める
   （画面が小さいほど余白のコストが高いため／08-17）。px-md-4は維持し、
   タブレット以上の見た目は変えない。 */
@media (max-width: 767.98px) {
    .wg-article[b-ee2iw9q6zg] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* ========== 上部バー ========== */
/* 指示書モックアップに合わせ、白背景＋下線のヘッダーにする（ネイビーは
   Sidebar.razorだけが担う）。 */
.wg-topbar[b-ee2iw9q6zg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 4.9rem;
    flex-shrink: 0;
    padding: 0 1rem;
    background-color: var(--white, #fff);
    border-bottom: 1px solid var(--border, #E5EAF0);
    color: var(--dark, #1F2937);
}

/* スマホ幅では設定歯車(.wg-settings-menu)がd-none d-md-*で隠れ、中身は
   ロゴ＋アバターだけになるのに、高さはPCの4.9rem固定のままだったため
   無駄に大きかった。tomova_home_mobile_brushup.htmlの.topnav
   (padding:9px 14px、height指定なし＝中身に合わせて自動)に合わせる
   （実機確認・08-18）。 */
@media (max-width: 767.98px) {
    .wg-topbar[b-ee2iw9q6zg] {
        height: auto;
        padding: 0.5625rem 0.875rem;
    }
}

.wg-brand[b-ee2iw9q6zg] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--dark, #1F2937);
    text-decoration: none;
    white-space: nowrap;
    margin-right: 0.25rem;
}

.wg-brand-mark[b-ee2iw9q6zg] {
    height: 32px;
    width: auto;
    object-fit: contain;
}

/* PC幅ではSidebar(Sidebar.razor)が同じブランドを表示するため、トップバー側は隠す。 */
@media (min-width: 768px) {
    .wg-brand[b-ee2iw9q6zg] {
        display: none;
    }
}

.wg-topbar-spacer[b-ee2iw9q6zg] {
    flex: 1;
}

/* ========== ヘッダー検索（現状は表示のみ。/searchへの簡易遷移フォーム） ========== */
.wg-search[b-ee2iw9q6zg] {
    align-items: center;
    gap: 0.5rem;
    background: #F8FAFC;
    border: 1px solid var(--border, #E5EAF0);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    margin-left: 1rem;
    flex: 1;
    max-width: 26rem;
}

.wg-search .nav-icon[b-ee2iw9q6zg] {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    flex-shrink: 0;
}

.wg-search input[b-ee2iw9q6zg] {
    border: none;
    background: transparent;
    outline: none;
    color: var(--dark, #1F2937);
    font-size: 0.85rem;
    width: 100%;
}

.wg-search input[b-ee2iw9q6zg]::placeholder {
    color: #9AA4B2;
}

/* ========== 通知ベル ========== */
.wg-bell-menu[b-ee2iw9q6zg] {
    position: relative;
}

.wg-bell-menu summary[b-ee2iw9q6zg] {
    list-style: none;
    cursor: pointer;
}

.wg-bell-menu summary[b-ee2iw9q6zg]::-webkit-details-marker {
    display: none;
}

.wg-notify-item[b-ee2iw9q6zg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.wg-notify-badge-wrap[b-ee2iw9q6zg] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1rem;
}

.wg-notify-badge-wrap[b-ee2iw9q6zg]  .nav-badge {
    position: static;
}

/* ========== ヘッダーのユーザー名＋役職 ========== */
.wg-username-col[b-ee2iw9q6zg] {
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
}

.wg-user-subtitle[b-ee2iw9q6zg] {
    font-size: 0.65rem;
    color: var(--muted, #6B7280);
}

/* ========== 設定メニュー（歯車） / ユーザーメニュー ========== */
.wg-settings-menu[b-ee2iw9q6zg],
.wg-user-menu[b-ee2iw9q6zg] {
    position: relative;
}

.wg-settings-menu summary[b-ee2iw9q6zg],
.wg-user-menu summary[b-ee2iw9q6zg] {
    list-style: none;
    cursor: pointer;
}

.wg-settings-menu summary[b-ee2iw9q6zg]::-webkit-details-marker,
.wg-user-menu summary[b-ee2iw9q6zg]::-webkit-details-marker {
    display: none;
}

.wg-icon-toggle[b-ee2iw9q6zg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 6px;
    color: var(--mid, #4B5563);
}

.wg-icon-toggle:hover[b-ee2iw9q6zg] {
    background: var(--light, #F7F4F0);
}

.wg-user-toggle[b-ee2iw9q6zg] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
}

.wg-user-toggle:hover[b-ee2iw9q6zg] {
    background: var(--light, #F7F4F0);
}

.wg-avatar[b-ee2iw9q6zg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--blue-l, #DCECFF);
    color: var(--blue, #2563A8);
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.wg-username[b-ee2iw9q6zg] {
    color: var(--dark, #1F2937);
    font-size: 0.85rem;
}

.wg-user-dropdown[b-ee2iw9q6zg] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 12rem;
    background: #fff;
    color: #212121;
    border-radius: 8px;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    padding: 0.5rem 0;
    z-index: 200;
}

.wg-user-dropdown-name[b-ee2iw9q6zg] {
    padding: 0.4rem 1rem;
    font-weight: 700;
    font-size: 0.9rem;
}

.wg-user-dropdown-item[b-ee2iw9q6zg] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 1rem;
    color: #212121;
    text-decoration: none;
    background: none;
    border: none;
    font-size: 0.9rem;
}

.wg-user-dropdown-item:hover[b-ee2iw9q6zg] {
    background: #f0f2f5;
}

.wg-user-dropdown-logout[b-ee2iw9q6zg] {
    color: #c62828;
}

.wg-user-dropdown hr[b-ee2iw9q6zg] {
    margin: 0.25rem 0;
}

/* ========== アイコン（絵文字でカラー表示） ========== */
.wg-topbar[b-ee2iw9q6zg]  .nav-icon,
.wg-shell[b-ee2iw9q6zg]  .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    font-size: 1.15rem;
    font-style: normal;
    line-height: 1;
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-home::before {
    content: "🏠";
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-schedule::before {
    content: "📅";
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-todo::before {
    content: "✅";
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-chat::before {
    content: "💬";
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-mail {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z'/%3E%3C/svg%3E");
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-webmail {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.96 6.96 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5v-2.5zm3.99 0v2.5h2.653c.187-.765.306-1.608.338-2.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a6.96 6.96 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461q.316.44.598.939c.244.44.462.949.64 1.6h1.834a7 7 0 0 0-3.072-2.539M10.855 4a9 9 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.96 6.96 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5v-2.5zm3.99 0v2.5h2.653c.187-.765.306-1.608.338-2.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a6.96 6.96 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461q.316.44.598.939c.244.44.462.949.64 1.6h1.834a7 7 0 0 0-3.072-2.539M10.855 4a9 9 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z'/%3E%3C/svg%3E");
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-info {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 .783-.076.94-.235l.014-.048.041-.031-.114-.34.038-.147c-.09.184-.395.36-.395.145l.011-.086.71-3.342c.14-.65-.026-1.2-1.005-1.2z'/%3E%3Cpath d='M8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 .783-.076.94-.235l.014-.048.041-.031-.114-.34.038-.147c-.09.184-.395.36-.395.145l.011-.086.71-3.342c.14-.65-.026-1.2-1.005-1.2z'/%3E%3Cpath d='M8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-bulletin::before {
    content: "📢";
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-groups::before {
    content: "👥";
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-devices {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E");
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-users::before {
    content: "🧑‍💼";
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-gear::before {
    content: "⚙️";
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-memo::before {
    content: "📝";
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-knowledge {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783M7.5 2.836v9.789c-.936-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.891c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752zm1 9.789V2.836c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.093-.111-2.278-.039-3.213.492z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783M7.5 2.836v9.789c-.936-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.891c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752zm1 9.789V2.836c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.093-.111-2.278-.039-3.213.492z'/%3E%3C/svg%3E");
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-files::before {
    content: "📁";
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-project {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.5 0a.5.5 0 0 1 .5.5V15h14.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5V.5A.5.5 0 0 1 .5 0M2 12a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm4-5a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm3-5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.5 0a.5.5 0 0 1 .5.5V15h14.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5V.5A.5.5 0 0 1 .5 0M2 12a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm4-5a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm3-5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-deal {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v8A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5m1.886 6.914L15 7.151V12.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V7.15l6.614 1.764a1.5 1.5 0 0 0 .772 0M1.5 4h13a.5.5 0 0 1 .5.5v1.616L8.129 7.948a.5.5 0 0 1-.258 0L1 6.116V4.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v8A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5m1.886 6.914L15 7.151V12.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V7.15l6.614 1.764a1.5 1.5 0 0 0 .772 0M1.5 4h13a.5.5 0 0 1 .5.5v1.616L8.129 7.948a.5.5 0 0 1-.258 0L1 6.116V4.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-workflow {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='5.5' height='5.5' rx='1.3'/%3E%3Crect x='9.5' y='9.5' width='5.5' height='5.5' rx='1.3'/%3E%3Cpath d='M6.7 6.7 L9.8 9.8' stroke='black' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M7.6 9.3 L9.8 9.8 L9.3 7.6' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='5.5' height='5.5' rx='1.3'/%3E%3Crect x='9.5' y='9.5' width='5.5' height='5.5' rx='1.3'/%3E%3Cpath d='M6.7 6.7 L9.8 9.8' stroke='black' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M7.6 9.3 L9.8 9.8 L9.3 7.6' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-search::before {
    content: "🔍";
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-bell::before {
    content: "🔔";
}

.wg-shell[b-ee2iw9q6zg]  .nav-icon-apps::before {
    content: "🗂️";
}

/* ========== 未読バッジ ========== */
.wg-shell[b-ee2iw9q6zg]  .nav-badge {
    position: absolute;
    top: -0.3rem;
    right: -0.5rem;
    background: var(--terra, #E8543A);
    color: #fff;
    border-radius: 999px;
    font-size: 0.6rem;
    line-height: 1;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== スマホ用ボトムナビ（PC幅では非表示） ========== */
.wg-shell[b-ee2iw9q6zg]  .bottom-nav-bar {
    display: none;
}

@media (max-width: 767.98px) {
    .wg-shell[b-ee2iw9q6zg]  .bottom-nav-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: #fff;
        border-top: 1px solid #e0e0e0;
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(3.5rem + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    }
}

.wg-shell[b-ee2iw9q6zg]  .bottom-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 3.5rem;
    color: #757575;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0.25rem 0;
    font-family: inherit;
}

.wg-shell[b-ee2iw9q6zg]  .bottom-nav-btn:hover {
    color: var(--blue, #2B5797);
}

.wg-shell[b-ee2iw9q6zg]  .bottom-nav-active {
    color: var(--blue, #2B5797) !important;
}

.wg-shell[b-ee2iw9q6zg]  .bottom-nav-icon-wrap {
    position: relative;
}

.wg-shell[b-ee2iw9q6zg]  .bottom-nav-label {
    font-size: 0.625rem;
    margin-top: 0.15rem;
    white-space: nowrap;
}

/* スマホ時：ボトムナビに隠れないよう下余白を確保 */
@media (max-width: 767.98px) {
    .wg-article[b-ee2iw9q6zg] {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom));
    }
}

/* ========== 「もっと見る」ボトムシート ========== */
.wg-shell[b-ee2iw9q6zg]  .bottom-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    display: flex;
    align-items: flex-end;
}

.wg-shell[b-ee2iw9q6zg]  .bottom-sheet {
    background: #fff;
    width: 100%;
    border-radius: 16px 16px 0 0;
    padding-bottom: calc(3.5rem + env(safe-area-inset-bottom));
    animation: wg-sheet-slide-up-b-ee2iw9q6zg 0.2s ease-out;
}

.wg-shell[b-ee2iw9q6zg]  .bottom-sheet-handle {
    width: 2.5rem;
    height: 0.25rem;
    background: #e0e0e0;
    border-radius: 2px;
    margin: 0.6rem auto 0.25rem;
}

.wg-shell[b-ee2iw9q6zg]  .bottom-sheet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding: 1rem;
}

.wg-shell[b-ee2iw9q6zg]  .bottom-sheet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.25rem;
    text-decoration: none;
    color: #212121;
    border-radius: 8px;
}

.wg-shell[b-ee2iw9q6zg]  .bottom-sheet-item:hover {
    background: #f0f2f5;
}

.wg-shell[b-ee2iw9q6zg]  .bottom-sheet-icon-wrap {
    position: relative;
}

.wg-shell[b-ee2iw9q6zg]  .bottom-sheet-label {
    font-size: 0.7rem;
    margin-top: 0.35rem;
    color: #616161;
}

@keyframes wg-sheet-slide-up-b-ee2iw9q6zg {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ========== 印刷時 ========== */
/* .wg-shell is a fixed-height (100dvh), internally-scrolling flex column —
   fine on screen, but for print it would clip page content to a single
   viewport-height sheet. Printing needs normal, unbounded document flow
   instead, with the app chrome (top bar, bottom nav) hidden — pages that
   opt into printing (e.g. Webmail's message detail) show their own content
   via their own scoped @media print rules. */
@media print {
    .wg-shell[b-ee2iw9q6zg] {
        display: block;
        height: auto;
    }

    .wg-content[b-ee2iw9q6zg] {
        display: block;
        overflow: visible;
    }

    .wg-topbar[b-ee2iw9q6zg],
    .wg-shell[b-ee2iw9q6zg]  .bottom-nav-bar {
        display: none !important;
    }
}

/* ========== エラーバナー ========== */
#blazor-error-ui[b-ee2iw9q6zg] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ee2iw9q6zg] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-w3csn8lcvi],
.components-reconnect-repeated-attempt-visible[b-w3csn8lcvi],
.components-reconnect-failed-visible[b-w3csn8lcvi],
.components-pause-visible[b-w3csn8lcvi],
.components-resume-failed-visible[b-w3csn8lcvi],
.components-rejoining-animation[b-w3csn8lcvi] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-w3csn8lcvi],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-w3csn8lcvi],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-w3csn8lcvi],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-w3csn8lcvi],
#components-reconnect-modal.components-reconnect-retrying[b-w3csn8lcvi],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-w3csn8lcvi],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-w3csn8lcvi],
#components-reconnect-modal.components-reconnect-failed[b-w3csn8lcvi],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-w3csn8lcvi] {
    display: block;
}


#components-reconnect-modal[b-w3csn8lcvi] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-w3csn8lcvi 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-w3csn8lcvi 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-w3csn8lcvi 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-w3csn8lcvi]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-w3csn8lcvi 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-w3csn8lcvi {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-w3csn8lcvi {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-w3csn8lcvi {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-w3csn8lcvi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-w3csn8lcvi] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-w3csn8lcvi] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-w3csn8lcvi] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-w3csn8lcvi] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-w3csn8lcvi] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-w3csn8lcvi] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-w3csn8lcvi 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-w3csn8lcvi] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-w3csn8lcvi {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/Sidebar.razor.rz.scp.css */
/* PC専用の左サイドバー。スマホ幅では非表示にし、下部固定ナビ(BottomNav)に譲る。
   指示書のモックアップ通りネイビー背景・固定表示。 */
.tk-sidebar[b-7e36uuvjbs] {
    display: none;
}

@media (min-width: 768px) {
    .tk-sidebar[b-7e36uuvjbs] {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 230px;
        background: var(--navy, #102A43);
        color: #fff;
        padding: 1rem 0.85rem;
        z-index: 100;
        overflow-y: auto;
    }
}

.tk-sidebar-brand[b-7e36uuvjbs] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem 1.3rem;
    text-decoration: none;
    color: #fff;
}

.tk-sidebar-brand-mark[b-7e36uuvjbs] {
    height: 34px;
    width: auto;
    object-fit: contain;
}

.tk-sidebar-nav[b-7e36uuvjbs] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

[b-7e36uuvjbs] .tk-sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    color: rgba(234, 242, 248, 0.9);
    text-decoration: none;
    font-size: 0.88rem;
    transition: background 0.15s, color 0.15s;
}

[b-7e36uuvjbs] .tk-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

[b-7e36uuvjbs] .tk-sidebar-active {
    background: var(--blue, #2B5797);
    color: #fff !important;
}

[b-7e36uuvjbs] .tk-sidebar-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    flex-shrink: 0;
}

[b-7e36uuvjbs] .tk-sidebar-icon-wrap .nav-icon {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 1.1rem;
}

[b-7e36uuvjbs] .tk-sidebar-label {
    white-space: nowrap;
}
/* /Components/Pages/Bulletin.razor.rz.scp.css */
.bulletin-toolbar[b-0vff1jksmw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.bulletin-tabs[b-0vff1jksmw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.bulletin-tab[b-0vff1jksmw] {
    border: 1px solid var(--border, #E5DDD4);
    background: var(--white, #fff);
    color: var(--mid, #4B5563);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.bulletin-tab.active[b-0vff1jksmw] {
    background: var(--blue, #2B5797);
    border-color: var(--blue, #2B5797);
    color: #fff;
}

.bulletin-toolbar-right[b-0vff1jksmw] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.bulletin-search[b-0vff1jksmw] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border, #E5DDD4);
    background: var(--white, #fff);
    border-radius: 8px;
    padding: 0.3rem 0.7rem;
    color: var(--muted, #9CA3AF);
}

.bulletin-search input[b-0vff1jksmw] {
    border: none;
    outline: none;
    font-size: 0.85rem;
    width: 14rem;
    max-width: 40vw;
    background: transparent;
    color: var(--dark, #16213E);
}

.bulletin-compose-btn[b-0vff1jksmw] {
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
}

.bulletin-list[b-0vff1jksmw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bulletin-card[b-0vff1jksmw] {
    position: relative;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    background: var(--white, #fff);
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    cursor: pointer;
    box-shadow: var(--shadow, 0 4px 16px rgba(16, 42, 67, 0.08));
    transition: box-shadow 0.15s, border-color 0.15s;
}

.bulletin-card:hover[b-0vff1jksmw] {
    border-color: var(--blue, #2B5797);
    box-shadow: 0 6px 20px rgba(16, 42, 67, 0.12);
}

.bulletin-card-pin[b-0vff1jksmw] {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    color: var(--terra, #E8543A);
    font-size: 0.85rem;
}

.bulletin-card-avatar[b-0vff1jksmw] {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--blue-l, #EBF1FA);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.bulletin-card-main[b-0vff1jksmw] {
    flex: 1;
    min-width: 0;
}

.bulletin-card-head[b-0vff1jksmw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.bulletin-card-tag[b-0vff1jksmw] {
    flex: 1;
    min-width: 0;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulletin-card-status[b-0vff1jksmw] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.bulletin-card-status-text[b-0vff1jksmw] {
    font-size: 0.75rem;
    color: var(--muted, #9CA3AF);
}

.bulletin-card-status-unconfirmed[b-0vff1jksmw] {
    color: var(--terra, #E8543A);
    font-weight: 700;
}

.bulletin-card-date[b-0vff1jksmw] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: var(--muted, #9CA3AF);
}

.bulletin-card-unread-dot[b-0vff1jksmw] {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--terra, #E8543A);
}

.bulletin-card-title[b-0vff1jksmw] {
    font-weight: 700;
    font-size: 1rem;
    color: #000;
    margin: 0.5rem 0 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulletin-card-preview[b-0vff1jksmw] {
    font-size: 0.82rem;
    color: var(--mid, #4B5563);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulletin-card-thumb[b-0vff1jksmw] {
    flex-shrink: 0;
    width: 140px;
    height: 90px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--light, #F7F4F0);
}

.bulletin-pagination[b-0vff1jksmw] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

@media (max-width: 640px) {
    .bulletin-toolbar[b-0vff1jksmw] {
        flex-direction: column;
        align-items: stretch;
    }

    .bulletin-toolbar-right[b-0vff1jksmw] {
        justify-content: space-between;
    }

    .bulletin-search input[b-0vff1jksmw] {
        width: 100%;
        max-width: none;
    }

    .bulletin-card-thumb[b-0vff1jksmw] {
        width: 6rem;
        height: 5rem;
    }
}
/* /Components/Pages/BulletinCategories.razor.rz.scp.css */
.page-title[b-k9ijqn09st] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark, #16213E);
}
/* /Components/Pages/BulletinDetail.razor.rz.scp.css */
.bulletin-detail-toolbar[b-1bxhw1aqm7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.bulletin-detail-toolbar-actions[b-1bxhw1aqm7] {
    display: flex;
    gap: 0.5rem;
}

.bulletin-detail-card[b-1bxhw1aqm7] {
    background: var(--white, #fff);
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 10px;
    box-shadow: var(--shadow, 0 4px 16px rgba(16, 42, 67, 0.08));
    padding: 1.2rem 1.5rem;
    margin-bottom: 1rem;
}

.bulletin-comments-section[b-1bxhw1aqm7] {
    margin-top: 1.2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border, #E5DDD4);
}

.bulletin-detail-top[b-1bxhw1aqm7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.bulletin-badge[b-1bxhw1aqm7] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    border-radius: 5px;
    padding: 0.15rem 0.5rem;
}

.bulletin-badge-important[b-1bxhw1aqm7] {
    background: var(--terra, #E8543A);
}

.bulletin-badge-pinned[b-1bxhw1aqm7] {
    background: var(--gold, #F7C948);
    color: var(--dark, #16213E);
}

.bulletin-detail-title[b-1bxhw1aqm7] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 0.4rem;
    word-break: break-word;
}

.bulletin-detail-meta[b-1bxhw1aqm7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--muted, #9CA3AF);
    font-size: 0.82rem;
    padding-bottom: 0.8rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--border, #E5DDD4);
}

.bulletin-card-author[b-1bxhw1aqm7] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.bulletin-avatar-sm[b-1bxhw1aqm7] {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.bulletin-avatar-initial[b-1bxhw1aqm7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--blue, #2B5797);
    color: #fff;
    font-weight: 700;
    font-size: 0.7rem;
}

.bulletin-detail-body[b-1bxhw1aqm7] {
    line-height: 1.75;
    color: var(--dark, #16213E);
    word-break: break-word;
    max-width: 46rem;
}

.bulletin-detail-body[b-1bxhw1aqm7]  img {
    max-width: 100%;
    border-radius: 8px;
    margin: 0.4rem 0;
}

.bulletin-detail-body[b-1bxhw1aqm7]  p {
    margin: 0 0 0.75rem;
}

.bulletin-detail-body[b-1bxhw1aqm7]  blockquote {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.9rem;
    border-left: 3px solid var(--blue, #2B5797);
    background: var(--blue-l, #EBF1FA);
    color: var(--mid, #4B5563);
}

.bulletin-confirm-box[b-1bxhw1aqm7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #EAF9F4;
    border: 1px solid #C9EDDF;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin: 1rem 0;
}

.bulletin-confirm-details[b-1bxhw1aqm7] {
    margin: -0.6rem 0 1rem;
}

[b-1bxhw1aqm7] .bulletin-confirm-toggle {
    background: none;
    border: none;
    padding: 0.2rem 0;
    color: var(--blue, #2B5797);
    font-size: 0.82rem;
    font-weight: 600;
}

.bulletin-confirm-lists[b-1bxhw1aqm7] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
    padding: 0.8rem 1rem;
    background: var(--light, #F7F4F0);
    border-radius: 8px;
}

.bulletin-confirm-list-col[b-1bxhw1aqm7] {
    flex: 1 1 12rem;
    min-width: 12rem;
}

.bulletin-confirm-list-heading[b-1bxhw1aqm7] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mid, #4B5563);
    margin-bottom: 0.4rem;
}

.bulletin-confirm-list-item[b-1bxhw1aqm7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--dark, #16213E);
    padding: 0.2rem 0;
}

.bulletin-confirm-icon-done[b-1bxhw1aqm7] {
    color: var(--emerald, #3F8C63);
}

.bulletin-confirm-icon-pending[b-1bxhw1aqm7] {
    color: var(--muted, #9CA3AF);
}

.bulletin-file-list[b-1bxhw1aqm7] {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border, #E5DDD4);
}

.bulletin-file-list-heading[b-1bxhw1aqm7] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--mid, #4B5563);
    margin-bottom: 0.5rem;
}

.bulletin-file-card[b-1bxhw1aqm7] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 8px;
    margin-bottom: 0.4rem;
}

.bulletin-file-card-icon[b-1bxhw1aqm7] {
    font-size: 1.4rem;
    color: var(--terra, #E8543A);
}

.bulletin-file-card-info[b-1bxhw1aqm7] {
    flex: 1;
    min-width: 0;
}

.bulletin-file-card-name[b-1bxhw1aqm7] {
    font-weight: 600;
    color: var(--dark, #16213E);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulletin-file-card-size[b-1bxhw1aqm7] {
    font-size: 0.75rem;
    color: var(--muted, #9CA3AF);
}

.bulletin-file-card-download[b-1bxhw1aqm7] {
    color: var(--blue, #2B5797);
    font-size: 1.1rem;
}

.bulletin-comments-heading[b-1bxhw1aqm7] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mid, #4B5563);
    margin-bottom: 0.7rem;
}

.bulletin-comments[b-1bxhw1aqm7] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.bulletin-comment[b-1bxhw1aqm7] {
    display: flex;
    gap: 0.6rem;
}

.bulletin-comment-avatar[b-1bxhw1aqm7] {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
}

.bulletin-comment-avatar-initial[b-1bxhw1aqm7] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue, #2B5797);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}

.bulletin-comment-body-col[b-1bxhw1aqm7] {
    flex: 1;
    min-width: 0;
    background: var(--light, #F7F4F0);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.bulletin-comment-head[b-1bxhw1aqm7] {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.bulletin-comment-text[b-1bxhw1aqm7] {
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 0.15rem;
}

/* EditForm renders its own <form> element, which never receives this
   component's CSS-isolation scope attribute — plain (non-::deep) selectors
   silently never match it. */
[b-1bxhw1aqm7] .bulletin-comment-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

[b-1bxhw1aqm7] .bulletin-comment-form textarea {
    width: 100%;
}

@media (max-width: 640px) {
    .bulletin-detail-card[b-1bxhw1aqm7] {
        padding: 0.9rem 1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
        margin-left: -1rem;
        margin-right: -1rem;
    }

    [b-1bxhw1aqm7] .bulletin-comment-form {
        align-items: stretch;
    }
}
/* /Components/Pages/BulletinEditor.razor.rz.scp.css */
/* A direct flex-item child of .wg-article (column-direction flex) is
   stretched to fill its width by default — this button sits directly there
   (unlike e.g. BulletinDetail's back button, which is nested inside a row-
   flex toolbar div and so never faces that stretch in the first place). */
.bulletin-editor-back-btn[b-blwgemm915] {
    align-self: flex-start;
}

.bulletin-editor-card[b-blwgemm915] {
    background: var(--white, #fff);
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 10px;
    box-shadow: var(--shadow, 0 4px 16px rgba(16, 42, 67, 0.08));
    padding: 1.2rem 1.5rem;
}

.bulletin-editor-toolbar[b-blwgemm915] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    border: 1px solid var(--border, #E5DDD4);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: var(--light, #F7F4F0);
    padding: 0.35rem 0.5rem;
}

.bulletin-editor-toolbar button[b-blwgemm915] {
    border: none;
    background: transparent;
    color: var(--mid, #4B5563);
    border-radius: 5px;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

.bulletin-editor-toolbar button:hover[b-blwgemm915] {
    background: var(--blue-l, #EBF1FA);
    color: var(--blue, #2B5797);
}

.bulletin-editor-toolbar-sep[b-blwgemm915] {
    width: 1px;
    align-self: stretch;
    background: var(--border, #E5DDD4);
    margin: 0.2rem 0.3rem;
}

.bulletin-editor-body[b-blwgemm915] {
    min-height: 14rem;
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 0 0 8px 8px;
    padding: 0.75rem 0.9rem;
    line-height: 1.7;
    color: var(--dark, #16213E);
    overflow-y: auto;
}

.bulletin-editor-body:focus[b-blwgemm915] {
    outline: none;
    border-color: var(--blue, #2B5797);
}

.bulletin-editor-body img[b-blwgemm915] {
    max-width: 100%;
    border-radius: 8px;
}

.bulletin-editor-body:empty[b-blwgemm915]::before {
    content: "お知らせの内容を入力してください…";
    color: var(--muted, #9CA3AF);
}

.bulletin-dropzone[b-blwgemm915] {
    border: 2px dashed var(--border, #E5DDD4);
    border-radius: 8px;
    padding: 1.2rem;
    text-align: center;
    color: var(--muted, #9CA3AF);
    cursor: pointer;
    font-size: 0.85rem;
}

.bulletin-dropzone i[b-blwgemm915] {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.35rem;
}

.bulletin-dropzone.bulletin-dropzone-active[b-blwgemm915] {
    border-color: var(--blue, #2B5797);
    background: var(--blue-l, #EBF1FA);
    color: var(--blue, #2B5797);
}

.bulletin-editor-file-list[b-blwgemm915] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.bulletin-editor-file-chip[b-blwgemm915] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    background: var(--light, #F7F4F0);
}

.bulletin-editor-file-chip.removed[b-blwgemm915] {
    text-decoration: line-through;
    opacity: 0.55;
}

.bulletin-editor-file-chip button[b-blwgemm915] {
    border: none;
    background: transparent;
    color: var(--terra, #E8543A);
    font-size: 0.75rem;
    padding: 0;
}

.bulletin-editor-checks[b-blwgemm915] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

@media (max-width: 640px) {
    .bulletin-editor-card[b-blwgemm915] {
        padding: 0.9rem 1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
        margin-left: -1rem;
        margin-right: -1rem;
    }

    .bulletin-editor-checks[b-blwgemm915] {
        flex-direction: column;
        gap: 0.5rem;
    }
}
/* /Components/Pages/Chat.razor.rz.scp.css */
/* Owns the flex:1/min-height:0 fill of .wg-article — .chat-mobile-back-bar
   is a sibling of .chat-layout here (not inside .chat-main-header, which
   lives in the same scrolling flex column as .chat-messages). Keeping it
   fully outside that column means it can never get dragged along with the
   message-list's own scrolling, regardless of any flex/overflow quirk in
   .chat-main/.chat-messages. */
.chat-page[b-5co0jzxpv7] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.chat-mobile-back-bar[b-5co0jzxpv7] {
    display: none;
}

/* ページ見出し（指示書モックアップの「チャット / 職員同士のコミュニケーション」
   + 「＋新規作成」）。 */
.chat-page-header[b-5co0jzxpv7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.chat-page-title[b-5co0jzxpv7] {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--dark, #1F2937);
    margin: 0;
}

.chat-page-subtitle[b-5co0jzxpv7] {
    margin: 0.3rem 0 0;
    color: var(--muted, #6B7280);
    font-size: 0.85rem;
}

.chat-layout[b-5co0jzxpv7] {
    display: flex;
    flex: 1;
    min-height: 0;
    /* モックアップ(.card.chat-layout)通り、一枚の白いカードとして
       枠線・角丸・影を持たせ、一覧/本文の間はgapではなく内側の区切り線
       (border-right/-left)で表現する。 */
    border: 1px solid var(--border, #E5EAF0);
    border-radius: 14px;
    background: var(--white, #fff);
    box-shadow: var(--shadow, 0 4px 16px rgba(16, 42, 67, 0.08));
    overflow: hidden;
    /* Same as .webmail-layout (Webmail.razor.css) — .wg-article's own
       padding-bottom only applies at mobile widths, so on desktop this
       row's flex:1 children stretched flush to the browser window's bottom
       edge with no gap. Padding here shrinks them equally, opening a plain
       page-background gap below both columns instead. */
    margin-bottom: 1rem;
}

/* Glossy button look, matching Webmail.razor.css's .webmail-layout .btn rules. */
.chat-layout .btn:not(.btn-link)[b-5co0jzxpv7] {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.15) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.chat-layout .btn:not(.btn-link):hover:not(:disabled)[b-5co0jzxpv7] {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(0, 0, 0, 0.18) 100%);
}

.chat-layout .btn:not(.btn-link):active:not(:disabled)[b-5co0jzxpv7] {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(255, 255, 255, 0.15) 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.chat-layout .btn:not(.btn-link):disabled[b-5co0jzxpv7] {
    background-image: none;
    box-shadow: none;
}

.chat-channels[b-5co0jzxpv7] {
    width: 17.5rem;
    flex-shrink: 0;
    padding: 0.5rem 0.5rem 1rem;
    border-right: 1px solid var(--border, #E5EAF0);
    background-color: var(--white, #fff);
    overflow-y: auto;
}

.chat-channels h5[b-5co0jzxpv7] {
    font-size: 0.8rem;
    color: var(--muted, #9CA3AF);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* 指示書モックアップ(.chat-row)に合わせた一覧行 — 丸アイコン＋太字名前＋
   最新メッセージのプレビュー2行構成。 */
.chat-channels .list-group-item[b-5co0jzxpv7] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    border: none;
    border-bottom: 1px solid #EEF1F4;
    border-radius: 0;
    margin-bottom: 0;
    padding: 0.7rem 0.5rem;
    font-size: 0.85rem;
    color: var(--mid, #52606D);
    background: transparent;
    transition: background 0.15s, color 0.15s;
}

.chat-channels .list-group-item:hover[b-5co0jzxpv7] {
    background: var(--light, #F1F5F9);
}

.chat-channels .list-group-item.active[b-5co0jzxpv7] {
    background: #EEF6FF;
    color: inherit;
    font-weight: inherit;
}

.chat-channels .text-danger[b-5co0jzxpv7] {
    color: var(--terra, #EF476F) !important;
}

.chat-create-channel-btn[b-5co0jzxpv7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin: 0.25rem 0 0.5rem;
}

.chat-channel-main[b-5co0jzxpv7] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin: 0 0.5rem;
}

.chat-channel-name[b-5co0jzxpv7] {
    display: block;
    flex: 1;
    min-width: 0;
    font-weight: 700;
    color: var(--dark, #1F2937);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-channel-preview[b-5co0jzxpv7] {
    display: block;
    margin-top: 0.15rem;
    color: var(--muted, #6B7280);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* お気に入り☆トグル — 常時表示（ホバー限定にしない。[[feedback_ios_safari_hover_tap]]：
   実iPhoneでホバー限定UIは2タップ操作になるバグがある）。 */
.chat-favorite-star[b-5co0jzxpv7] {
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0 0.15rem;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--muted, #9CA3AF);
    cursor: pointer;
}

.chat-favorite-star-on[b-5co0jzxpv7] {
    color: #E8B923;
}

.chat-channel-badge[b-5co0jzxpv7] {
    flex-shrink: 0;
    background: var(--terra, #E8543A);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-avatar[b-5co0jzxpv7] {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.chat-avatar-sm[b-5co0jzxpv7] {
    width: 1.4rem;
    height: 1.4rem;
    font-size: 0.68rem;
}

.chat-avatar-img[b-5co0jzxpv7] {
    object-fit: cover;
}

.chat-main[b-5co0jzxpv7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background-color: var(--white, #fff);
}

.chat-messages[b-5co0jzxpv7] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Without this, reaching the top/bottom of this inner scroll area on
       mobile hands the gesture off to the page's own scroll container
       (.wg-content), which visibly slides the whole screen (including this
       "fixed" header) instead of just stopping — contain keeps the scroll
       gesture inside this element once its own boundary is hit. */
    overscroll-behavior: contain;
    padding: 1rem;
    /* モックアップ(.chat-window{background:#f8fbfd})通り、白い吹き出しと
       区別が付くよう本文エリアだけ淡いブルーグレーにする。 */
    background-color: #F8FBFD;
}

/* 2026-09-24: TOMOVA_KIDS_コーディング指示書のモックアップ（素材/index.html
   の.msg/.msg.mine/.bubble）に忠実に合わせる。メッセージ単位のアバターは
   モックアップに存在しないため廃止し、名前+時刻はテキストのみ。
   .msg{max-width:72%}.msg.mine{margin-left:auto} と全く同じ手法 —
   行全体をmargin-left:autoで右へ寄せ、中身（名前・吹き出し・アクション）は
   その行の中でずっと左揃えのまま置くだけで、結果的に右寄せに見える
   （row-reverse等のflexトリックは不要）。2026-09-08の「全員左寄せの
   フラットリスト」という決定（[[project_workgroup_chat_line_style]]）を
   明示的に上書きする。 */
.chat-message-row[b-5co0jzxpv7] {
    max-width: 72%;
    margin: 0 0 1rem;
}

.chat-message-row-mine[b-5co0jzxpv7] {
    margin-left: auto;
}

.chat-message-meta[b-5co0jzxpv7] {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    margin-bottom: 0.15rem;
}

/* 吹き出し本体（テキストメッセージのみ。添付/スケジュール・申し送りリンク
   カードは独立したカード表示のまま吹き出しにはしない）。 */
.chat-bubble[b-5co0jzxpv7] {
    display: inline-block;
    max-width: 100%;
    background: var(--white, #fff);
    border: 1px solid var(--border, #E5EAF0);
    border-radius: 14px;
    padding: 0.6rem 0.8rem;
    line-height: 1.6;
    font-size: 0.85rem;
}

.chat-message-row-mine .chat-bubble[b-5co0jzxpv7] {
    background: #E4F7EF;
    border-color: #CCEFE1;
}

.chat-message-actions[b-5co0jzxpv7] {
    margin-top: 0.3rem;
}

.chat-message-time[b-5co0jzxpv7] {
    color: var(--muted, #9CA3AF);
    font-size: 0.72rem;
}

.chat-message-edited[b-5co0jzxpv7] {
    color: var(--muted, #9CA3AF);
    font-size: 0.72rem;
}

.chat-message-text[b-5co0jzxpv7] {
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-message-attachment[b-5co0jzxpv7],
.chat-attachment-card[b-5co0jzxpv7] {
    margin-top: 0.4rem;
}

/* スケジュール／ToDo登録の確認カード（指示書§7.3/§8の完了カード） */
.chat-link-card[b-5co0jzxpv7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 10px;
    background: var(--light, #F7F4F0);
    max-width: 360px;
}

.chat-link-card-icon[b-5co0jzxpv7] {
    flex-shrink: 0;
    font-size: 1.3rem;
}

.chat-link-card-body[b-5co0jzxpv7] {
    flex: 1;
    min-width: 0;
}

.chat-link-card-title[b-5co0jzxpv7] {
    font-weight: 700;
    font-size: 0.85rem;
}

.chat-link-card-text[b-5co0jzxpv7] {
    color: var(--mid, #4B5563);
    font-size: 0.8rem;
    white-space: pre-wrap;
}

.chat-link-card-action[b-5co0jzxpv7] {
    flex-shrink: 0;
    color: var(--blue, #2B5797);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.chat-link-card-action:hover[b-5co0jzxpv7] {
    text-decoration: underline;
}

/* 参照先のスケジュール/ToDoが削除済みの場合 — リンク切れのまま「開く」を
   出すと反応しないボタンに見えるため、はっきり分かる表示に差し替える。 */
.chat-link-card-deleted[b-5co0jzxpv7] {
    background: var(--white, #fff);
    opacity: 0.7;
}

.chat-link-card-action-deleted[b-5co0jzxpv7] {
    flex-shrink: 0;
    color: var(--muted, #9CA3AF);
    font-size: 0.8rem;
    white-space: nowrap;
}

.chat-message-read-status[b-5co0jzxpv7] {
    margin-top: 0.15rem;
}

.chat-message-edit[b-5co0jzxpv7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.chat-message-edit-actions[b-5co0jzxpv7] {
    display: flex;
    gap: 0.4rem;
}

.chat-message-pin-flag[b-5co0jzxpv7] {
    color: var(--terra, #E8543A);
    font-size: 0.7rem;
}

/* リアクション表示（絵文字＋人数のピル） */
.chat-reaction-row[b-5co0jzxpv7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.chat-reaction-pill[b-5co0jzxpv7] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 999px;
    background: var(--white, #fff);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.chat-reaction-pill span[b-5co0jzxpv7] {
    color: var(--mid, #4B5563);
    font-size: 0.72rem;
    font-weight: 600;
}

.chat-reaction-pill:hover[b-5co0jzxpv7] {
    background: var(--light, #F7F4F0);
}

.chat-reaction-pill-mine[b-5co0jzxpv7] {
    border-color: var(--blue, #2B5797);
    background: var(--blue-l, #EBF1FA);
}

.chat-reaction-picker[b-5co0jzxpv7] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    display: flex;
    gap: 0.2rem;
    padding: 0.35rem;
    background: var(--white, #fff);
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    z-index: 100;
}

.chat-reaction-picker-up[b-5co0jzxpv7] {
    top: auto;
    bottom: calc(100% + 4px);
}

.chat-reaction-picker-item[b-5co0jzxpv7] {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.3rem;
    border-radius: 6px;
    cursor: pointer;
}

.chat-reaction-picker-item:hover[b-5co0jzxpv7] {
    background: var(--light, #F7F4F0);
}

.chat-thread-link[b-5co0jzxpv7] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    border: none;
    background: none;
    padding: 0;
    color: var(--blue, #2B5797);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.chat-thread-link:hover[b-5co0jzxpv7] {
    text-decoration: underline;
}

.chat-mention[b-5co0jzxpv7] {
    color: var(--blue, #2B5797);
    background: var(--blue-l, #EBF1FA);
    border-radius: 4px;
    padding: 0 0.2rem;
    font-weight: 600;
}

.chat-mention-badge[b-5co0jzxpv7] {
    flex-shrink: 0;
    background: #C77E2E;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    border-radius: 999px;
}

/* 😊(リアクション)／↩(返信)／・・・の3アイコン — 常時表示（理由は
   .chat-favorite-starと同じ）。 */
.chat-message-actions[b-5co0jzxpv7] {
    display: flex;
    align-items: flex-start;
    gap: 0.2rem;
    flex-shrink: 0;
}

/* 「・・・」ドロップダウン一式 — Webmail.razor.cssの
   .webmail-toolbar-more/-dropdown/-dropdown-menu/-dropdown-itemと同じ構造。 */
.chat-toolbar-more[b-5co0jzxpv7] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted, #9CA3AF);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.chat-toolbar-more:hover:not(:disabled)[b-5co0jzxpv7] {
    background: var(--blue-l, #EBF1FA);
    border-color: var(--blue, #2B5797);
    color: var(--blue, #2B5797);
}

.chat-toolbar-more:disabled[b-5co0jzxpv7] {
    color: var(--border, #E5DDD4);
    cursor: not-allowed;
}

/* 通話・ピン留め解除など「はっきり分かる見た目にしたい」二次アクション用
   （Webmail.razor.cssの.webmail-toolbar-outlineと同じ見た目）。 */
.chat-toolbar-outline[b-5co0jzxpv7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--white, #fff);
    color: var(--mid, #4B5563);
    border: 1.5px solid var(--border, #E5DDD4);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    font-family: inherit;
    white-space: nowrap;
}

.chat-toolbar-outline:hover[b-5co0jzxpv7] {
    border-color: var(--blue, #2B5797);
    color: var(--blue, #2B5797);
    background: var(--blue-l, #EBF1FA);
}

.chat-header-call-label[b-5co0jzxpv7] {
    display: none;
}

@media (min-width: 480px) {
    .chat-header-call-label[b-5co0jzxpv7] {
        display: inline;
    }
}

.chat-toolbar-dropdown[b-5co0jzxpv7] {
    position: relative;
    display: inline-flex;
}

.chat-toolbar-dropdown-menu[b-5co0jzxpv7] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--white, #fff);
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    min-width: 170px;
    max-height: 16rem;
    overflow-y: auto;
    z-index: 100;
}

.chat-toolbar-dropdown-menu-right[b-5co0jzxpv7] {
    left: auto;
    right: 0;
}

/* メンション候補は入力欄のすぐ上に出すため、下向きではなく上向きに開く
   （.chat-main が overflow:hidden なので、下向きだと画面外に切れる）。 */
.chat-toolbar-dropdown-menu-up[b-5co0jzxpv7] {
    top: auto;
    bottom: calc(100% + 4px);
}

.chat-toolbar-dropdown-item[b-5co0jzxpv7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 0.8125rem;
    color: var(--dark, #16213E);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.chat-toolbar-dropdown-item:hover[b-5co0jzxpv7] {
    background: var(--light, #F7F4F0);
}

.chat-toolbar-dropdown-item-danger[b-5co0jzxpv7] {
    color: var(--terra, #E8543A);
}

.chat-toolbar-overlay[b-5co0jzxpv7] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* ファイル添付カード（メッセージ内） */
.chat-attachment-card[b-5co0jzxpv7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 10px;
    background: var(--white, #fff);
    max-width: 320px;
}

.chat-attachment-badge[b-5co0jzxpv7] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 6px;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
}

.chat-attachment-badge-pdf[b-5co0jzxpv7] {
    background: var(--terra, #E8543A);
}

.chat-attachment-badge-doc[b-5co0jzxpv7] {
    background: var(--blue, #2B5797);
}

.chat-attachment-badge-xls[b-5co0jzxpv7] {
    background: #3F8C63;
}

.chat-attachment-badge-ppt[b-5co0jzxpv7] {
    background: #C77E2E;
}

.chat-attachment-badge-file[b-5co0jzxpv7] {
    background: var(--muted, #9CA3AF);
}

.chat-attachment-info[b-5co0jzxpv7] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.chat-attachment-name[b-5co0jzxpv7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dark, #16213E);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.chat-attachment-name:hover[b-5co0jzxpv7] {
    text-decoration: underline;
}

.chat-attachment-size[b-5co0jzxpv7] {
    color: var(--muted, #9CA3AF);
    font-size: 0.72rem;
}

.chat-attachment-download[b-5co0jzxpv7] {
    flex-shrink: 0;
    color: var(--mid, #4B5563);
}

.chat-attachment-download:hover[b-5co0jzxpv7] {
    color: var(--blue, #2B5797);
}

/* メッセージ入力欄 — 指示書モックアップの.chat-input（1行のバー、+ボタン／
   丸角の入力欄／「送信」ラベル付きボタン）に合わせる。「+」だけはまだ
   対応する機能が無いためdisabledのまま（[[project_workgroup_chat_line_style]]
   と同じ思想で、無いものを動くふりで見せない)。😊(絵文字挿入)・@(メンション)
   は第2段階で実装済み。改行(Shift+Enter)に対応するためtextareaのまま
   だが、見た目はモックアップの1行入力欄に近づけてある。 */
.chat-composer[b-5co0jzxpv7] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border: none;
    border-top: 1px solid var(--border, #E5EAF0);
    border-radius: 0;
    background: var(--white, #fff);
}

.chat-composer-textarea[b-5co0jzxpv7] {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border, #E5EAF0);
    border-radius: 10px;
    outline: none;
    resize: none;
    min-height: 2.6rem;
    max-height: 8rem;
    padding: 0.6rem 0.8rem;
    font-family: inherit;
    font-size: 0.85rem;
    background: var(--white, #fff);
    color: var(--dark, #1F2937);
}

.chat-composer-textarea:focus[b-5co0jzxpv7] {
    border-color: var(--blue, #1976D2);
}

.chat-composer-textarea[b-5co0jzxpv7]::placeholder {
    color: var(--muted, #6B7280);
    white-space: pre-line;
}

.chat-composer-icons[b-5co0jzxpv7] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

.chat-composer-icon[b-5co0jzxpv7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--mid, #4B5563);
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    transition: background 0.15s, color 0.15s;
}

.chat-composer-icon:hover:not(:disabled)[b-5co0jzxpv7] {
    background: var(--light, #F7F4F0);
    color: var(--blue, #2B5797);
}

.chat-composer-icon:disabled[b-5co0jzxpv7] {
    color: var(--border, #E5DDD4);
    cursor: not-allowed;
}

/* ファイル/画像添付アイコンが包む<InputFile> — 視覚上は消すが、iOS Safariでも
   ラベルクリックからファイル選択ダイアログを開けるよう display:none ではなく
   視覚的に隠すだけに留める。<InputFile>は自分自身の<input>をBlazorの
   コンポーネントスコープ外（Microsoft.AspNetCore.Components.Forms側）で描画する
   ため、素のセレクタではCSS isolationのスコープ属性が一致せず一切当たらない
   —EditFormの<form>と同じ問題（[[feedback_flexbox_debugging]]）。::deep必須。 */
[b-5co0jzxpv7] .chat-composer-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.chat-composer-send[b-5co0jzxpv7] {
    flex-shrink: 0;
    height: 2.6rem;
    padding: 0 1.1rem;
    border: none;
    border-radius: 9px;
    background: var(--blue, #1976D2);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.chat-composer-send:hover[b-5co0jzxpv7] {
    background: var(--blue-d, #145A9E);
}

.chat-composer-status[b-5co0jzxpv7] {
    margin: 0 1rem 0.5rem;
}

.chat-main-header[b-5co0jzxpv7] {
    flex-shrink: 0;
    padding: 0.75rem 1rem 0;
    border-bottom: 1px solid var(--border, #E5DDD4);
}

.chat-header-top[b-5co0jzxpv7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chat-header-title[b-5co0jzxpv7] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark, #16213E);
}

.chat-header-avatars[b-5co0jzxpv7] {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.chat-header-avatar[b-5co0jzxpv7] {
    border: 2px solid var(--white, #fff);
    margin-left: -0.5rem;
}

.chat-header-avatar:first-child[b-5co0jzxpv7] {
    margin-left: 0;
}

.chat-header-member-count[b-5co0jzxpv7] {
    color: var(--muted, #9CA3AF);
    font-size: 0.8rem;
    margin-left: -0.1rem;
}

/* 検索・「・・・」は裏側の機能がまだ無いため常時disabled
   （[[project_workgroup_chat_tomova_ui_redesign]]と同じ思想 — 動かない
   ボタンを動くふりで見せない）。 */
.chat-header-description[b-5co0jzxpv7] {
    padding: 0.3rem 0 0.6rem;
    color: var(--dark, #16213E);
    font-size: 0.8rem;
}

.chat-header-tabs[b-5co0jzxpv7] {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
}

.chat-header-tab[b-5co0jzxpv7] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    padding: 0.5rem 0.1rem;
    color: var(--muted, #9CA3AF);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.chat-header-tab:hover[b-5co0jzxpv7] {
    color: var(--blue, #2B5797);
}

.chat-header-tab-active[b-5co0jzxpv7] {
    color: var(--blue, #2B5797);
    border-bottom-color: var(--blue, #2B5797);
}

.chat-tab-content[b-5co0jzxpv7] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
}

.chat-tab-list-item[b-5co0jzxpv7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border, #E5DDD4);
}

.chat-tab-list-item:last-child[b-5co0jzxpv7] {
    border-bottom: none;
}

.chat-tab-list-item-icon[b-5co0jzxpv7] {
    flex-shrink: 0;
    font-size: 1.1rem;
    width: 1.6rem;
    text-align: center;
}

.chat-tab-list-item-body[b-5co0jzxpv7] {
    flex: 1;
    min-width: 0;
}

.chat-tab-list-item-meta[b-5co0jzxpv7] {
    color: var(--muted, #9CA3AF);
    font-size: 0.75rem;
}

.chat-search-form[b-5co0jzxpv7] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.chat-search-form .form-control[b-5co0jzxpv7] {
    flex: 1;
    min-width: 0;
}

.chat-search-result[b-5co0jzxpv7] {
    cursor: pointer;
}

.chat-search-result:hover[b-5co0jzxpv7] {
    background: var(--light, #F7F4F0);
}

.chat-search-snippet[b-5co0jzxpv7] {
    font-size: 0.85rem;
    color: var(--dark, #16213E);
    word-break: break-word;
}

.chat-toolbar-more-active[b-5co0jzxpv7] {
    background: var(--blue-l, #EBF1FA);
    border-color: var(--blue, #2B5797);
    color: var(--blue, #2B5797);
}

/* 右側パネル（スレッド／ピン留め一覧） — 指示書§13の「常時固定ではなく必要時
   だけ表示」通り、開いている時だけ3カラム目として現れる。 */
.chat-side-panel[b-5co0jzxpv7] {
    width: 20rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--border, #E5EAF0);
    background-color: var(--white, #fff);
    overflow: hidden;
}

.chat-side-panel-header[b-5co0jzxpv7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border, #E5DDD4);
}

.chat-side-panel-body[b-5co0jzxpv7] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
}

.chat-thread-divider[b-5co0jzxpv7] {
    margin: 0.75rem 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border, #E5DDD4);
    color: var(--muted, #9CA3AF);
    font-size: 0.75rem;
    font-weight: 600;
}

.chat-thread-composer[b-5co0jzxpv7] {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.65rem;
}

.chat-composer-toolbar-end[b-5co0jzxpv7] {
    justify-content: flex-end;
}

.chat-pinned-item[b-5co0jzxpv7] {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border, #E5DDD4);
}

.chat-pinned-item:last-child[b-5co0jzxpv7] {
    border-bottom: none;
}

/* On a wide desktop window, the message column would otherwise stretch to
   fill the whole .chat-main pane — capping it keeps long conversations
   readable. .chat-composer is deliberately NOT capped here (2026-09-24):
   the モックアップの.chat-inputは常にカード全幅（border-topが端から端まで
   伸びる）なので、入力バーだけは.chat-main幅いっぱいに広げる。以前は
   .chat-composerも42remに制限していたが、それだと上のborder-topが
   「送信」ボタンの手前で途切れて見えるバグになっていた（実機で指摘・
   09-24）。Left untouched below 769px: a phone's screen is already narrow
   enough that this never applies. */
@media (min-width: 769px) {
    .chat-message-row[b-5co0jzxpv7] {
        max-width: 42rem;
    }
}

@media (max-width: 768px) {
    .chat-channels[b-5co0jzxpv7],
    .chat-main[b-5co0jzxpv7] {
        width: 100%;
    }

    .chat-channels.chat-channels-mobile-hidden[b-5co0jzxpv7],
    .chat-main.chat-main-mobile-hidden[b-5co0jzxpv7] {
        display: none;
    }

    /* スマホでは3カラム目を右に並べず、指示書§19通り画面全体を使う
       ドロワーとして最前面に重ねる。 */
    .chat-side-panel[b-5co0jzxpv7] {
        position: fixed;
        inset: 0;
        z-index: 60;
        width: auto;
        border-radius: 0;
        border: none;
    }

    .chat-main-header[b-5co0jzxpv7] {
        padding: 0.5rem 0.5rem 0;
    }

    .chat-mobile-back-bar[b-5co0jzxpv7] {
        display: block;
        flex-shrink: 0;
        padding: 0.5rem 0.5rem 0;
    }

    .chat-back-button[b-5co0jzxpv7] {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.6rem 0.75rem;
        font-weight: 600;
        border-radius: 6px;
        color: var(--blue, #2B5797);
        border-color: var(--border, #E5DDD4);
        background-color: var(--white, #fff);
    }

    .chat-back-button:hover[b-5co0jzxpv7] {
        background-color: var(--blue-l, #EBF1FA);
        border-color: var(--blue, #2B5797);
        color: var(--blue, #2B5797);
    }
}
/* /Components/Pages/Files.razor.rz.scp.css */
.page-header[b-pb5eigcr1m] {
    padding: 0.25rem 0 1rem;
}

.page-title[b-pb5eigcr1m] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark, #16213E);
}

.files-list[b-pb5eigcr1m] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.files-row[b-pb5eigcr1m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--white, #fff);
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.files-row:hover[b-pb5eigcr1m] {
    border-color: var(--blue, #2B5797);
    color: inherit;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.files-row-icon[b-pb5eigcr1m] {
    font-size: 1.3rem;
    color: var(--terra, #E8543A);
    flex-shrink: 0;
}

.files-row-main[b-pb5eigcr1m] {
    flex: 1;
    min-width: 0;
}

.files-row-name[b-pb5eigcr1m] {
    font-weight: 600;
    color: var(--dark, #16213E);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.files-row-meta[b-pb5eigcr1m] {
    font-size: 0.72rem;
    color: var(--muted, #9CA3AF);
}

.files-row-size[b-pb5eigcr1m] {
    font-size: 0.75rem;
    color: var(--muted, #9CA3AF);
    flex-shrink: 0;
}

.files-row-download[b-pb5eigcr1m] {
    color: var(--blue, #2B5797);
    flex-shrink: 0;
}
/* /Components/Pages/Groups.razor.rz.scp.css */
.groups-page-header[b-31imer57u9] {
    margin-bottom: 1rem;
}

.groups-layout[b-31imer57u9] {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 1rem;
    padding-bottom: 1rem;
}

/* Glossy button look, matching Webmail.razor.css's .webmail-layout .btn rules. */
.groups-layout .btn:not(.btn-link)[b-31imer57u9] {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.15) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.groups-layout .btn:not(.btn-link):hover:not(:disabled)[b-31imer57u9] {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(0, 0, 0, 0.18) 100%);
}

.groups-layout .btn:not(.btn-link):active:not(:disabled)[b-31imer57u9] {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(255, 255, 255, 0.15) 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.groups-sidebar[b-31imer57u9] {
    width: 16rem;
    flex-shrink: 0;
    padding: 1rem 0.75rem;
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 12px;
    box-shadow: var(--shadow, 0 4px 16px rgba(16, 42, 67, 0.08));
    background-color: var(--light, #F7F4F0);
    overflow-y: auto;
}

.groups-sidebar-heading[b-31imer57u9] {
    font-size: 0.8rem;
    color: var(--muted, #9CA3AF);
    font-weight: 600;
    padding: 0 0.7rem;
    margin-bottom: 0.4rem;
}

.groups-nav[b-31imer57u9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 0.75rem;
}

.groups-nav-item[b-31imer57u9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--mid, #4B5563);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.groups-nav-item:hover[b-31imer57u9] {
    background: var(--white, #fff);
}

.groups-nav-icon[b-31imer57u9] {
    font-size: 0.9rem;
    color: var(--muted, #9CA3AF);
    flex-shrink: 0;
    width: 1.1rem;
    text-align: center;
}

.groups-nav-thumb[b-31imer57u9] {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.groups-nav-name[b-31imer57u9] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.groups-nav-active[b-31imer57u9],
.groups-nav-active:hover[b-31imer57u9] {
    background: var(--blue-l, #EBF1FA);
    color: var(--blue, #2B5797);
    font-weight: 700;
}

.groups-nav-active .groups-nav-icon[b-31imer57u9] {
    color: var(--blue, #2B5797);
}

.groups-create-row[b-31imer57u9] {
    border-top: 1px solid var(--border, #E5DDD4);
    padding-top: 0.75rem;
}

.groups-main[b-31imer57u9] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 12px;
    box-shadow: var(--shadow, 0 4px 16px rgba(16, 42, 67, 0.08));
    background-color: var(--white, #fff);
}

.groups-main-header[b-31imer57u9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border, #E5DDD4);
}

.groups-edit-row[b-31imer57u9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.groups-image-preview[b-31imer57u9] {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.groups-image-placeholder[b-31imer57u9] {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--light, #F7F4F0);
    border: 1px dashed var(--border, #E5DDD4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted, #9CA3AF);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.groups-edit-fields[b-31imer57u9] {
    flex: 1;
    min-width: 0;
}

.groups-member-list[b-31imer57u9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.groups-member-item[b-31imer57u9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.groups-member-item:hover[b-31imer57u9] {
    background: var(--blue-l, #EBF1FA);
}

@media (max-width: 768px) {
    .groups-layout[b-31imer57u9] {
        flex-direction: column;
    }

    .groups-sidebar[b-31imer57u9] {
        width: 100%;
    }
}
/* /Components/Pages/Handover.razor.rz.scp.css */
.handover-toolbar[b-u06vx3j5x8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.handover-tabs[b-u06vx3j5x8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.handover-tab[b-u06vx3j5x8] {
    border: 1px solid var(--border, #E5DDD4);
    background: var(--white, #fff);
    color: var(--mid, #4B5563);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.handover-tab.active[b-u06vx3j5x8] {
    background: var(--blue, #2B5797);
    border-color: var(--blue, #2B5797);
    color: #fff;
}

.handover-compose-btn[b-u06vx3j5x8] {
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
}

.handover-list[b-u06vx3j5x8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.handover-card[b-u06vx3j5x8] {
    position: relative;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    background: var(--white, #fff);
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    cursor: pointer;
    box-shadow: var(--shadow, 0 4px 16px rgba(16, 42, 67, 0.08));
    transition: box-shadow 0.15s, border-color 0.15s;
}

.handover-card:hover[b-u06vx3j5x8] {
    border-color: var(--blue, #2B5797);
    box-shadow: 0 6px 20px rgba(16, 42, 67, 0.12);
}

.handover-card-avatar[b-u06vx3j5x8] {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--blue-l, #EBF1FA);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    font-size: 1.2rem;
}

.handover-card-avatar-img[b-u06vx3j5x8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.handover-card-main[b-u06vx3j5x8] {
    flex: 1;
    min-width: 0;
}

.handover-card-head[b-u06vx3j5x8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.handover-card-classname[b-u06vx3j5x8] {
    font-weight: 700;
    font-size: 1rem;
    color: #000;
}

.handover-card-status[b-u06vx3j5x8] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.handover-card-status-text[b-u06vx3j5x8] {
    font-size: 0.75rem;
    color: var(--muted, #9CA3AF);
}

.handover-card-status-unconfirmed[b-u06vx3j5x8] {
    color: var(--terra, #E8543A);
    font-weight: 700;
}

.handover-card-time[b-u06vx3j5x8] {
    font-size: 0.7rem;
    color: var(--muted, #9CA3AF);
}

.handover-badge-normal[b-u06vx3j5x8] {
    background: var(--light, #F7F4F0);
    color: var(--mid, #4B5563);
}

.handover-badge-important[b-u06vx3j5x8] {
    background: #FFF3CD;
    color: #8A6500;
}

.handover-badge-urgent[b-u06vx3j5x8] {
    background: var(--terra-l, #FFF0F3);
    color: var(--terra, #E8543A);
}

.handover-card-tag[b-u06vx3j5x8] {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    margin: 0.5rem 0 0.4rem;
}

.handover-card-preview[b-u06vx3j5x8] {
    font-size: 0.82rem;
    color: var(--mid, #4B5563);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .handover-toolbar[b-u06vx3j5x8] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/HandoverDetail.razor.rz.scp.css */
.handover-detail-toolbar[b-mvtm3ek6b1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.handover-detail-toolbar-actions[b-mvtm3ek6b1] {
    display: flex;
    gap: 0.5rem;
}

.handover-detail-card[b-mvtm3ek6b1] {
    background: var(--white, #fff);
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 10px;
    box-shadow: var(--shadow, 0 4px 16px rgba(16, 42, 67, 0.08));
    padding: 1.2rem 1.5rem;
    margin-bottom: 1rem;
}

.handover-detail-top[b-mvtm3ek6b1] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.handover-badge[b-mvtm3ek6b1] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 5px;
    padding: 0.15rem 0.5rem;
}

.handover-badge-class[b-mvtm3ek6b1] {
    background: var(--blue-l, #EBF1FA);
    color: var(--blue, #2B5797);
}

.handover-badge-normal[b-mvtm3ek6b1] {
    background: var(--light, #F7F4F0);
    color: var(--mid, #4B5563);
}

.handover-badge-important[b-mvtm3ek6b1] {
    background: #FFF3CD;
    color: #8A6500;
}

.handover-badge-urgent[b-mvtm3ek6b1] {
    background: var(--terra, #E8543A);
    color: #fff;
}

.handover-detail-title[b-mvtm3ek6b1] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dark, #16213E);
    margin-bottom: 0.4rem;
    word-break: break-word;
}

.handover-detail-meta[b-mvtm3ek6b1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--muted, #9CA3AF);
    font-size: 0.82rem;
    padding-bottom: 0.8rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--border, #E5DDD4);
}

.handover-source-link[b-mvtm3ek6b1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--blue, #2B5797);
    margin-bottom: 0.8rem;
}

.handover-detail-body[b-mvtm3ek6b1] {
    line-height: 1.75;
    color: var(--dark, #16213E);
    word-break: break-word;
    white-space: pre-wrap;
    max-width: 46rem;
}

.handover-file-list[b-mvtm3ek6b1] {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border, #E5DDD4);
}

.handover-file-list-heading[b-mvtm3ek6b1] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--mid, #4B5563);
    margin-bottom: 0.5rem;
}

.handover-file-card[b-mvtm3ek6b1] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 8px;
    margin-bottom: 0.4rem;
}

.handover-file-card-icon[b-mvtm3ek6b1] {
    font-size: 1.4rem;
    color: var(--terra, #E8543A);
}

.handover-file-card-info[b-mvtm3ek6b1] {
    flex: 1;
    min-width: 0;
}

.handover-file-card-name[b-mvtm3ek6b1] {
    font-weight: 600;
    color: var(--dark, #16213E);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.handover-file-card-size[b-mvtm3ek6b1] {
    font-size: 0.75rem;
    color: var(--muted, #9CA3AF);
}

.handover-file-card-download[b-mvtm3ek6b1] {
    color: var(--blue, #2B5797);
    font-size: 1.1rem;
}

.handover-confirm-box[b-mvtm3ek6b1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #EAF9F4;
    border: 1px solid #C9EDDF;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin: 1rem 0;
}

.handover-comments-section[b-mvtm3ek6b1] {
    margin-top: 1.2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border, #E5DDD4);
}

.handover-comments-heading[b-mvtm3ek6b1] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mid, #4B5563);
    margin-bottom: 0.7rem;
}

.handover-comments[b-mvtm3ek6b1] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.handover-comment[b-mvtm3ek6b1] {
    display: flex;
    gap: 0.6rem;
}

.handover-comment-body-col[b-mvtm3ek6b1] {
    flex: 1;
    min-width: 0;
    background: var(--light, #F7F4F0);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.handover-comment-head[b-mvtm3ek6b1] {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.handover-comment-text[b-mvtm3ek6b1] {
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 0.15rem;
}

/* EditForm renders its own <form> element, which never receives this
   component's CSS-isolation scope attribute — plain (non-::deep) selectors
   silently never match it. */
[b-mvtm3ek6b1] .handover-comment-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

[b-mvtm3ek6b1] .handover-comment-form textarea {
    width: 100%;
}

@media (max-width: 640px) {
    .handover-detail-card[b-mvtm3ek6b1] {
        padding: 0.9rem 1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
        margin-left: -1rem;
        margin-right: -1rem;
    }

    [b-mvtm3ek6b1] .handover-comment-form {
        align-items: stretch;
    }
}
/* /Components/Pages/HandoverEditor.razor.rz.scp.css */
.handover-editor-back-btn[b-u5ecfmbsx3] {
    align-self: flex-start;
}

.handover-editor-card[b-u5ecfmbsx3] {
    background: var(--white, #fff);
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 10px;
    box-shadow: var(--shadow, 0 4px 16px rgba(16, 42, 67, 0.08));
    padding: 1.2rem 1.5rem;
}

.handover-editor-file-list[b-u5ecfmbsx3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.handover-editor-file-chip[b-u5ecfmbsx3] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    background: var(--light, #F7F4F0);
}

.handover-editor-file-chip.removed[b-u5ecfmbsx3] {
    text-decoration: line-through;
    opacity: 0.55;
}

.handover-editor-file-chip button[b-u5ecfmbsx3] {
    border: none;
    background: transparent;
    color: var(--terra, #E8543A);
    font-size: 0.75rem;
    padding: 0;
}

@media (max-width: 640px) {
    .handover-editor-card[b-u5ecfmbsx3] {
        padding: 0.9rem 1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
        margin-left: -1rem;
        margin-right: -1rem;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ========== ページヘッダー ========== */
.page-header[b-2wi4jdznhv] {
    padding: 0.25rem 0 1rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.page-greeting[b-2wi4jdznhv] {
    font-size: 0.75rem;
    color: var(--muted, #9CA3AF);
    margin-bottom: 0.25rem;
    letter-spacing: 0.03em;
}

.page-date[b-2wi4jdznhv] {
    font-size: 1rem;
    color: #000000;
}

/* ========== メイングリッド（指示書：PC＝左チャット／右申し送り） ========== */
.main-grid[b-2wi4jdznhv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

.left-col[b-2wi4jdznhv],
.right-col[b-2wi4jdznhv] {
    min-width: 0;
}

.grid1[b-2wi4jdznhv] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (max-width: 767.98px) {
    .main-grid[b-2wi4jdznhv] {
        grid-template-columns: 1fr;
    }
}

/* ボトムナビ(MainLayout.razor.css)が固定表示される幅では、.wg-article側の
   共通padding-bottomだけでは足りず、ページ末尾のカードがボトムナビに隠れる。 */
@media (max-width: 767.98px) {
    .grid1[b-2wi4jdznhv] {
        padding-bottom: 4rem;
    }
}

/* ========== カード共通 ========== */
.card[b-2wi4jdznhv] {
    background: var(--white, #fff);
    border-radius: 12px;
    border: 1px solid var(--border, #E5DDD4);
    box-shadow: var(--shadow, 0 4px 16px rgba(16, 42, 67, 0.08));
    overflow: hidden;
}

.card-header[b-2wi4jdznhv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.1rem;
    background: var(--white, #fff);
    border-bottom: 1px solid var(--border, #E5DDD4);
    gap: 0.5rem;
}

.card-title[b-2wi4jdznhv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark, #16213E);
}

.card-title-icon[b-2wi4jdznhv] {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.card-action[b-2wi4jdznhv] {
    font-size: 0.75rem;
    color: var(--blue, #2B5797);
    text-decoration: none;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    white-space: nowrap;
    transition: background 0.15s;
}

.card-action:hover[b-2wi4jdznhv] {
    background: var(--blue-l, #EBF1FA);
    color: var(--blue, #2B5797);
}

.card-body[b-2wi4jdznhv] {
    padding: 0.4rem 1.1rem 0.6rem;
}

@media (max-width: 767.98px) {
    .card-header[b-2wi4jdznhv] {
        background: var(--white, #fff);
        border-bottom: none;
        padding: 0.75rem 0.875rem 0.5rem;
    }

    .card-body[b-2wi4jdznhv] {
        padding: 0 0.8rem 0.7rem;
    }

    .info-item[b-2wi4jdznhv] {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }

    .info-item-icon[b-2wi4jdznhv] {
        width: 1.7rem;
        height: 1.7rem;
        font-size: 0.8rem;
    }
}

/* ========== 情報行（チャット／申し送り／お知らせ、共通） ========== */
.info-item[b-2wi4jdznhv] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.1rem;
    border-bottom: 1px solid var(--border, #E5DDD4);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.info-item:last-child[b-2wi4jdznhv] {
    border-bottom: none;
}

.info-item:hover[b-2wi4jdznhv] {
    background: var(--light, #F7F4F0);
    color: inherit;
}

.info-item-icon[b-2wi4jdznhv] {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
    overflow: hidden;
}

.info-item-icon-img[b-2wi4jdznhv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-item-main[b-2wi4jdznhv] {
    flex: 1;
    min-width: 0;
}

.info-item-title[b-2wi4jdznhv] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dark, #16213E);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-item-meta[b-2wi4jdznhv] {
    font-size: 0.7rem;
    color: var(--muted, #9CA3AF);
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-item-side[b-2wi4jdznhv] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    flex-shrink: 0;
}

.info-item-time[b-2wi4jdznhv] {
    font-size: 0.68rem;
    color: var(--muted, #9CA3AF);
}

.info-item-badge[b-2wi4jdznhv] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-warn[b-2wi4jdznhv] {
    background: #FFF8E1;
    color: var(--warning, #F57F17);
}

.badge-count[b-2wi4jdznhv] {
    background: var(--terra-l, #FEF0EC);
    color: var(--terra, #E8543A);
}

/* ========== お知らせ（掲示板、ホームカード専用のタグ帯レイアウト） ========== */
.notice-item[b-2wi4jdznhv] {
    display: block;
    padding: 0.7rem 0.1rem;
    border-bottom: 1px solid var(--border, #E5DDD4);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.notice-item:last-child[b-2wi4jdznhv] {
    border-bottom: none;
}

.notice-item:hover[b-2wi4jdznhv] {
    background: var(--light, #F7F4F0);
    color: inherit;
}

.notice-item-top[b-2wi4jdznhv] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.notice-item-tag[b-2wi4jdznhv] {
    flex: 1;
    min-width: 0;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice-item-date[b-2wi4jdznhv] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: var(--muted, #9CA3AF);
    flex-shrink: 0;
}

.notice-item-unread-dot[b-2wi4jdznhv] {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--terra, #E8543A);
}

.notice-item-title[b-2wi4jdznhv] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice-item-preview[b-2wi4jdznhv] {
    font-size: 0.75rem;
    color: var(--muted, #9CA3AF);
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice-item-read .notice-item-title[b-2wi4jdznhv] {
    font-weight: 500;
}
/* /Components/Pages/Login.razor.rz.scp.css */
.wg-login-wrap[b-ki5cfpbbu7] {
    display: flex;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.wg-login-card[b-ki5cfpbbu7] {
    width: 100%;
    max-width: 24rem;
    background: var(--white, #fff);
    border-radius: 0.75rem;
    box-shadow: var(--shadow, 0 4px 16px rgba(16, 42, 67, 0.08));
    padding: 2rem 1.75rem 1.75rem;
}

.wg-login-brand[b-ki5cfpbbu7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
}

.wg-login-mark[b-ki5cfpbbu7] {
    height: 56px;
    width: auto;
    object-fit: contain;
}

.wg-login-field[b-ki5cfpbbu7] {
    margin-bottom: 1rem;
}

.wg-login-label[b-ki5cfpbbu7] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mid, #4B5563);
    margin-bottom: 0.35rem;
}

.wg-login-input[b-ki5cfpbbu7] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    background: var(--blue-l, #EBF1FA);
    border: 1px solid transparent;
    border-radius: 0.4rem;
    font-size: 0.95rem;
    color: var(--dark, #16213E);
}

.wg-login-input:focus[b-ki5cfpbbu7] {
    outline: none;
    border-color: var(--dark, #16213E);
    background: var(--white, #fff);
}

.wg-login-submit[b-ki5cfpbbu7] {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.7rem;
    background: var(--dark, #16213E);
    color: #fff;
    border: none;
    border-radius: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.wg-login-submit:hover[b-ki5cfpbbu7] {
    background: var(--blue-d, #1A3A6B);
}
/* /Components/Pages/Schedule.razor.rz.scp.css */
/* ===== ページヘッダー／ツールバー ===== */
.sched-page-header[b-3bjxdx2qvv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex-shrink: 0;
}

.sched-toolbar[b-3bjxdx2qvv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sched-view-switch[b-3bjxdx2qvv] {
    display: flex;
    border: 1.5px solid var(--border, #E5DDD4);
    border-radius: 8px;
    overflow: hidden;
    background: var(--white, #fff);
}

.sched-view-btn[b-3bjxdx2qvv] {
    padding: 0.44rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--mid, #4B5563);
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}

.sched-view-btn:not(:last-child)[b-3bjxdx2qvv] {
    border-right: 1px solid var(--border, #E5DDD4);
}

.sched-view-btn.active[b-3bjxdx2qvv] {
    background: var(--blue, #2B5797);
    color: white;
}

.sched-view-btn:hover:not(.active)[b-3bjxdx2qvv] {
    background: var(--blue-l, #EBF1FA);
    color: var(--blue, #2B5797);
}

.sched-nav-group[b-3bjxdx2qvv] {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border, #E5DDD4);
    border-radius: 8px;
    overflow: hidden;
    background: var(--white, #fff);
}

.sched-nav-arrow[b-3bjxdx2qvv] {
    padding: 0.44rem 0.75rem;
    font-size: 0.9rem;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--mid, #4B5563);
    transition: background 0.15s;
    font-family: inherit;
}

.sched-nav-arrow:hover[b-3bjxdx2qvv] {
    background: var(--blue-l, #EBF1FA);
    color: var(--blue, #2B5797);
}

.sched-nav-today[b-3bjxdx2qvv] {
    padding: 0.44rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--mid, #4B5563);
    border-left: 1px solid var(--border, #E5DDD4);
    border-right: 1px solid var(--border, #E5DDD4);
    transition: background 0.15s;
    font-family: inherit;
}

.sched-nav-today:hover[b-3bjxdx2qvv] {
    background: var(--blue-l, #EBF1FA);
    color: var(--blue, #2B5797);
}

.sched-nav-month[b-3bjxdx2qvv] {
    margin-left: 0.5rem;
    padding: 0.44rem 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--dark, #16213E);
    white-space: nowrap;
}

/* ===== スマホ専用ツールバー（tomova_schedule_mobile_brushup.htmlの.toolbar）=====
   PCの.sched-toolbar（1行に月/週・‹今日›・年月・「…」分類管理・予定を追加を
   すべて詰め込む構成）はd-none-mobileで隠し、スマホ幅だけこちらの2段構成を
   d-mobile-onlyで出す。以前ここにあった.sched-toolbar-navrow用の767.98px
   詰め込み調整は、そのブロック自体が今はd-none-mobileで非表示になるため
   到達不能になった＝削除（08-18）。 */
.sched-toolbar-mobile[b-3bjxdx2qvv] {
    /* .sched-page-header（親）はdisplay:flexでもflex-direction:row（既定）
       のため、このブロックはmain軸=横方向の通常のflexアイテムになり、
       align-items:stretchの対象になる縦方向とは違って幅は既定でcontent
       サイズにしかならない。width:100%が無いとcontent幅(=row1の中身の幅)
       までしか広がらず、.sched-toolbar-mobile-row1のjustify-content:
       space-betweenがその狭い幅の中でしか効かず、‹今日›が画面右端まで
       届かなかった（実機で指摘・08-18）。 */
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem 0.625rem;
    flex-shrink: 0;
    width: 100%;
}

.sched-toolbar-mobile-row1[b-3bjxdx2qvv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.sched-mnav-group[b-3bjxdx2qvv] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sched-mnav-arrow[b-3bjxdx2qvv] {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    border: 1px solid var(--border, #E5DDD4);
    background: var(--white, #fff);
    color: var(--mid, #4B5563);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
}

.sched-mnav-today[b-3bjxdx2qvv] {
    padding: 0 0.75rem;
    height: 2rem;
    border-radius: 8px;
    border: 1px solid var(--border, #E5DDD4);
    background: var(--white, #fff);
    color: var(--mid, #4B5563);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.sched-mnav-month-row[b-3bjxdx2qvv] {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--dark, #16213E);
}

.sched-btn-outline[b-3bjxdx2qvv] {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1.5px solid var(--border, #E5DDD4);
    background: var(--white, #fff);
    color: var(--mid, #4B5563);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    font-family: inherit;
}

.sched-btn-outline:hover[b-3bjxdx2qvv] {
    border-color: var(--blue, #2B5797);
    color: var(--blue, #2B5797);
}

/* .sched-toolbar-navrow always spans the toolbar's full width (flex:1 1 100%
   below) so .sched-toolbar-dropdown's margin-left:auto has real leftover
   space to push into, pinning the "・・・" button to the row's right edge —
   the same row as 月/週/‹今日›/年月, per the design request. */
.sched-toolbar-navrow[b-3bjxdx2qvv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1 1 100%;
}

.sched-toolbar-dropdown[b-3bjxdx2qvv] {
    position: relative;
    display: inline-flex;
    margin-left: auto;
}

.sched-toolbar-more[b-3bjxdx2qvv] {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1.5px solid var(--border, #E5DDD4);
    background: var(--white, #fff);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mid, #4B5563);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
    font-family: inherit;
}

.sched-toolbar-more:hover[b-3bjxdx2qvv] {
    background: var(--blue-l, #EBF1FA);
    border-color: var(--blue, #2B5797);
    color: var(--blue, #2B5797);
}

.sched-toolbar-dropdown-menu[b-3bjxdx2qvv] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--white, #fff);
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    min-width: 160px;
    z-index: 100;
}

.sched-toolbar-dropdown-item[b-3bjxdx2qvv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 0.8125rem;
    color: var(--dark, #16213E);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.sched-toolbar-dropdown-item:hover[b-3bjxdx2qvv] {
    background: var(--light, #F7F4F0);
}

.sched-toolbar-overlay[b-3bjxdx2qvv] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* ===== FAB（スマホ専用、tomova_schedule_mobile_brushup.htmlの.fab）=====
   bottomは固定ボトムナビ(MainLayout.razor.cssの.bottom-nav-bar、
   calc(3.5rem + env(safe-area-inset-bottom)))の上に1remの隙間を空けて配置。 */
.sched-fab[b-3bjxdx2qvv] {
    position: fixed;
    right: 1rem;
    bottom: calc(3.5rem + env(safe-area-inset-bottom) + 1rem);
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    border: none;
    background: var(--blue, #2B5797);
    color: white;
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(43, 87, 151, 0.4);
    cursor: pointer;
    z-index: 60;
}

/* ページ末尾専用の余白スペーサー。固定ボトムナビ(MainLayout.razor.cssの
   .bottom-nav-bar、calc(3.5rem + safe-area))の高さぶんを、marginではなく
   このダミー要素自身のheightで確保する（.sched-cal-wrap/.sched-day-agenda
   自身のmargin-bottomでは.wg-articleのscrollHeightに反映されないことが
   実機で判明したため・08-18）。 */
.sched-bottom-spacer[b-3bjxdx2qvv] {
    /* 中身が空でflex-shrink未指定(既定1)のため、.wg-article内で場所を
       取り合うflexの「自動最小サイズ」が実質0になり、heightをいくら
       指定してもflex-shrinkで真っ先に0へ押し潰されていた
       （Home.razor.cssの.notify-scrollで最初に踏んだのと同じ罠、
       実機で再現・08-18）。flex-shrink:0で固定する。 */
    flex-shrink: 0;
    height: 0;
}

@media (max-width: 767.98px) {
    .sched-bottom-spacer[b-3bjxdx2qvv] {
        height: calc(4.5rem + env(safe-area-inset-bottom));
    }
}

/* ===== カレンダー本体 ===== */
/* flex:1/min-height:0 lets this take exactly the remaining height below
   .sched-page-header (both are direct children of .wg-article, which is
   already a flex column per MainLayout.razor.css) and scroll its own content
   — a month grid (6 rows x 8.5rem) or a week view's 24-hour column (1440px)
   both easily exceed viewport height. overflow-y:auto (not hidden) is what
   actually enables that scrolling; it still clips to the border-radius the
   same way Webmail.razor.css's .webmail-main does. Month and week view both
   use this same direct child of the page — .sched-day-agenda (below) is a
   plain normal-flow sibling of this, not wrapped together with it in any
   extra flex column, matching Home.razor.css's .card/.card-body +
   .home-day-agenda structure (confirmed reliable on a real iPhone; an
   earlier version that nested both inside a shared flex column was not,
   2026-08-06). */
.sched-cal-wrap[b-3bjxdx2qvv] {
    background: white;
    border-radius: 14px;
    border: 1px solid var(--border, #E5DDD4);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
    flex: 1;
    min-height: 0;
    margin-bottom: 1.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* ボトムナビの固定表示ぶんの余白は、この要素自身のmargin-bottomではなく
   ページ末尾の.sched-bottom-spacer（独立した高さを持つ要素）で確保する
   — flexコンテナ(.wg-article)は子のmargin-bottomをscrollHeightの計算に
   含めない挙動が実機で確認されたため（400px試しても.wg-articleの
   scrollHeightが変化せず、高さを持つ別要素にした瞬間に反映された・
   08-18）。ここでは常に通常の行間ぶんの余白だけにする。 */
@media (max-width: 767.98px) {
    .sched-cal-wrap[b-3bjxdx2qvv] {
        margin-bottom: 0.75rem;
    }
}

/* Mobile/tablet: the calendar always renders at the same compact, fixed height
   (see .calendar-cell/.calendar-grid's 992px override below) instead of
   stretching to fill leftover flex space, so day cells don't visibly resize
   depending on whether the .sched-day-agenda panel below happens to be open —
   Google Calendar mobile's look. PC/desktop keeps the original flex:1
   stretch (unchanged, outside this media query). */
@media (max-width: 992px) {
    .sched-cal-wrap[b-3bjxdx2qvv] {
        flex: 0 0 auto;
        /* Base rule (above) sets overflow-y:auto for PC, where a month with
           many events per cell can grow taller than the available space and
           needs its own internal scroll. On mobile the grid is fixed/compact
           height (never taller than its own box, per the flex:0 0 auto and
           .calendar-grid's mobile row-height override below) so this was
           always inert — but Home.razor's .main-grid has NO overflow of its
           own at this level, and unlike this element, scrolls correctly on a
           real iPhone. Calendar occupies most of the visible screen, so a
           touch-drag starting there was very likely being captured by this
           element's own (pointless, on mobile) overflow-y:auto instead of
           reaching .wg-content, the ancestor that's actually supposed to
           scroll — confirmed as the likely cause 2026-08-06 by comparing
           against Home's working structure. */
        overflow-y: visible;
        /* overflow-xだけ据え置き(base rule = hidden)だと、CSS仕様により
           「overflow-x/overflow-yの片方がvisible・もう片方がvisibleでない
           場合、visibleの方は自動的にautoとして計算される」規則が働き、
           上のoverflow-y:visibleが実際にはauto扱いのままになっていた
           （getComputedStyleで確認・overflow-x:hiddenを合わせてvisibleに
           するまで再現し続けた・08-18）。overflow:autoは見た目上スクロール
           バーが無くても独立したタッチスクロール領域として振る舞うため、
           実機でジェスチャーがこの要素に奪われ、下の.sched-day-agendaへ
           伝わっていなかった。x側もvisibleにして初めてy側のvisibleが
           本当に有効になる。 */
        overflow-x: visible;
    }
}

.calendar-grid[b-3bjxdx2qvv] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* auto = day-of-week header row; the 6 week rows use minmax(8.5rem, auto)
       so each row still grows to fit a tall cell's content (many events)
       via normal content-based track sizing — an "auto" max, unlike 1fr,
       isn't diverted through the separate flexible-track algorithm that
       doesn't reliably grow with content. The 8.5rem min is just the floor.
       min-height (not height) below matters for the same reason: a fixed
       height caps this box at exactly 100% and any content taller than
       that gets visually painted UNDER the next row's opaque white cell
       background, hiding it — min-height still fills the wrap on short
       months (default align-content:stretch distributes the leftover
       space across auto-max rows) but lets the box itself grow past 100%
       when content needs more, so nothing ends up hidden behind a sibling. */
    grid-template-rows: auto repeat(6, minmax(8.5rem, auto));
    min-height: 100%;
    gap: 1px;
    background-color: var(--border, #E5DDD4);
}

.calendar-header[b-3bjxdx2qvv] {
    background-color: #f8f9fa;
    padding: 0.5rem;
    text-align: center;
    font-weight: 600;
}

.calendar-header.calendar-sat[b-3bjxdx2qvv] {
    color: var(--blue, #2B5797);
}

.calendar-header.calendar-sun[b-3bjxdx2qvv] {
    color: var(--terra, #E8543A);
}

.calendar-cell[b-3bjxdx2qvv] {
    background-color: white;
    min-width: 0;
    min-height: 8.5rem;
    padding: 0.25rem;
    cursor: pointer;
    overflow: visible;
    transition: background 0.15s;
}

.calendar-cell:hover[b-3bjxdx2qvv] {
    background-color: #f8f9fa;
}

.calendar-cell.calendar-sun[b-3bjxdx2qvv] {
    background-color: var(--cal-sun-bg, #FEF6F4);
}

.calendar-cell.calendar-sat[b-3bjxdx2qvv] {
    background-color: var(--cal-sat-bg, #F0F4FD);
}

.calendar-cell.calendar-sun:hover[b-3bjxdx2qvv] {
    background-color: #FBEAE6;
}

.calendar-cell.calendar-sat:hover[b-3bjxdx2qvv] {
    background-color: #E8EFFA;
}

.calendar-cell-outside[b-3bjxdx2qvv] {
    background-color: #f1f1f1 !important;
    color: #adb5bd;
}

/* .calendar-cell repeated here so these win over the same-specificity
   .calendar-cell.calendar-sun/.calendar-sat weekend-tint rules above,
   regardless of which weekday today/a holiday happens to fall on. */
.calendar-cell.calendar-cell-holiday[b-3bjxdx2qvv] {
    background-color: #fff5f7;
}

.calendar-cell.calendar-cell-holiday:hover[b-3bjxdx2qvv] {
    background-color: #ffe9ee;
}

.calendar-cell.calendar-cell-today[b-3bjxdx2qvv] {
    background: var(--cal-today-bg, linear-gradient(180deg, #F0F4FC 0%, #FFFFFF 60%));
}

/* Mobile/tablet: tapping a cell selects it (.sched-day-agenda shows its events)
   instead of the pill list, so give it a visible selected state. Desktop never
   gets this class (OnDayCellClick only sets SelectedDay when IsCompactViewport). */
.calendar-cell.calendar-cell-selected[b-3bjxdx2qvv] {
    background-color: var(--blue-l, #EBF1FA);
    box-shadow: inset 0 0 0 2px var(--blue, #2B5797);
}

/* Google Calendar-style dots: on mobile/tablet the pill list below is hidden
   (too cramped), so a small color-coded dot per event (same cat-color-*
   used by the PC pills and .sched-day-agenda list) is the "this day has
   events" indicator instead. Hidden on desktop, where the pills themselves
   already show that. */
.calendar-day-dots[b-3bjxdx2qvv] {
    display: none;
}

@media (max-width: 992px) {
    .calendar-day-dots[b-3bjxdx2qvv] {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.15rem;
        margin: 0.1rem auto 0;
    }

    /* .category-dot (app.css) supplies the cat-color-* background; only
       shrink it here to fit several per cell. */
    .calendar-day-dot.category-dot[b-3bjxdx2qvv] {
        width: 0.35rem;
        height: 0.35rem;
    }

    .calendar-day-dot-more[b-3bjxdx2qvv] {
        font-size: 0.5rem;
        line-height: 1;
        color: var(--muted, #8a8a8a);
    }

    .calendar-cell .calendar-event[b-3bjxdx2qvv],
    .calendar-cell .calendar-more[b-3bjxdx2qvv] {
        display: none;
    }

    /* Now that a cell only ever shows a date number + dot (pills are hidden
       above, and the per-cell "+" is gone too, replaced by the day-panel/FAB),
       it doesn't need the 8.5rem floor that exists for PC's event pills —
       shrink it so all 6 weeks fit on one screen without scrolling, Google
       Calendar-style. min-height is dropped (unlike the base rule above) so
       this doesn't stretch to fill .sched-cal-wrap's flex-allocated height —
       see the "always this height" comment near .sched-cal-wrap's 992px rule.
       Row height itself must not vary with how much content/leftover space
       exists (so the day-agenda panel below doesn't cause jitter) — rows are
       "auto" and it's .calendar-cell's own aspect-ratio (below) that pins the
       height to a fixed multiple of the column width, which itself never
       changes when the agenda opens/closes. Previously this used a hardcoded
       2.75rem row height instead of aspect-ratio, which not only doesn't
       track tomova_schedule_mobile_brushup.htmlの.cal-cellの
       aspect-ratio:1/0.92 spec, but also stayed a fixed 44px regardless of
       the actual column width, so cells inside a genuine phone-width
       (~480px, 7 columns ≈68.5px wide) still looked flatter/shorter than the
       mockup's proportionally-scaled cells (実機で指摘・08-18)。 */
    .calendar-grid[b-3bjxdx2qvv] {
        grid-template-rows: auto repeat(6, auto);
        min-height: 0;
    }

    .calendar-cell[b-3bjxdx2qvv] {
        /* PCの無条件ルール(min-height:8.5rem、上の.calendar-cell基本定義)を
           打ち消さないと、aspect-ratioで計算した高さ(幅×0.92)よりmin-height
           のほうが大きく勝ってしまい、セルが136pxまで膨張して日付が
           間延びして見えなくなっていた（実機で再現・08-18）。 */
        min-height: 0;
        aspect-ratio: 1 / 0.92;
        padding: 0.15rem;
    }

    /* tomova_schedule_mobile_brushup.htmlの.cal-cellはセル内の要素を
       flex-direction:columnで中央寄せに積むだけ(日付円→ドット)で、セルごとの
       「+」ボタンは無い（予定追加は日付パネルの「＋追加」／FABに一本化）。 */
    .calendar-add-btn[b-3bjxdx2qvv] {
        display: none;
    }

    .calendar-date-row[b-3bjxdx2qvv] {
        margin-bottom: 0;
    }

    /* tomova_schedule_mobile_brushup.htmlの.cal-head-cellは背景なし・
       font-size 10.5px相当の小さい文字。現状は無条件.calendar-header
       (背景#f8f9fa・ページ既定フォントサイズ)がそのまま使われていて
       見た目が異なっていた（実機で指摘・08-18）。 */
    .calendar-header[b-3bjxdx2qvv] {
        background-color: transparent;
        padding: 0.5rem 0;
        font-size: 0.66rem;
        font-weight: 700;
        color: var(--mid, #4B5563);
    }

    .calendar-day-dots[b-3bjxdx2qvv] {
        margin-top: 0.05rem;
    }

    .calendar-holiday-label[b-3bjxdx2qvv] {
        font-size: 0.5rem;
        margin-bottom: 0;
    }
}

.calendar-date-row[b-3bjxdx2qvv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.calendar-date[b-3bjxdx2qvv] {
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
}

.calendar-date.calendar-sun[b-3bjxdx2qvv] {
    color: var(--terra, #E8543A);
}

.calendar-date.calendar-sat[b-3bjxdx2qvv] {
    color: var(--blue, #2B5797);
}

/* .calendar-date repeated so these win over the same-specificity
   .calendar-date.calendar-sun/.calendar-sat weekday-color rules above. */
.calendar-date.calendar-date-holiday[b-3bjxdx2qvv] {
    background-color: var(--terra-l, #FEF0EC);
    color: var(--terra, #E8543A);
}

.calendar-date.calendar-date-today[b-3bjxdx2qvv] {
    background-color: var(--blue, #2B5797);
    color: white;
}

/* 上の無条件.calendar-date-row/.calendar-dateより後ろに置くこと ―
   同じ詳細度の場合、後に書かれた宣言が勝つため、@media内に書いても
   それより前に置くと無条件ルールに上書きされてしまう
   （Home.razor.cssの.card-bodyで実際に発生した現象と同じ、08-18に
   ここでも再発）。 */
@media (max-width: 992px) {
    /* tomova_schedule_mobile_brushup.htmlの.cal-cellは日付円を単独で
       中央寄せに配置する。「+」ボタンをdisplay:noneにしただけでは
       justify-content:space-betweenのまま単独の子要素が左詰めになって
       しまうため、centerに変える（実機で指摘・08-18）。 */
    .calendar-date-row[b-3bjxdx2qvv] {
        justify-content: center;
    }

    /* tomova_schedule_mobile_brushup.htmlの.cal-daynumはwidth/height両方を
       22pxで固定した正円。min-widthだけだと2桁の日付で横に伸びて真円に
       ならず、文字が視覚的に中央からズレて見えていた（実機で指摘・08-18）。
       width固定＋line-height:1で解消する。 */
    .calendar-date[b-3bjxdx2qvv] {
        font-size: 0.75rem;
        width: 1.375rem;
        min-width: 1.375rem;
        height: 1.375rem;
        line-height: 1;
    }
}

.calendar-holiday-label[b-3bjxdx2qvv] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #b3184f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}

.week-day-holiday[b-3bjxdx2qvv] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #b3184f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}

.calendar-add-btn[b-3bjxdx2qvv] {
    border: none;
    background: none;
    color: #adb5bd;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    /* Always visible on every device — same as Home's summary cards. Used
       to be opacity:0 with a .calendar-cell:hover reveal (PC-only), but
       that hover-gated reveal was also what made iOS Safari require two
       taps to open a .calendar-event nested in the same cell (WebKit
       synthesizes a :hover state on the first tap of a nested element
       before firing the actual click). Keeping the button always visible
       everywhere avoids that ambiguity and matches Home's UI besides. */
    opacity: 1;
    transition: background-color 0.15s, color 0.15s;
}

.calendar-add-btn:hover[b-3bjxdx2qvv] {
    background-color: var(--blue, #2B5797);
    color: white;
}

.calendar-event[b-3bjxdx2qvv] {
    font-size: 0.75rem;
    border-radius: 5px;
    padding: 3px 6px;
    margin-bottom: 3px;
    overflow: hidden;
    line-height: 1.2;
    border-left: 2px solid currentColor;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}

.calendar-event:hover[b-3bjxdx2qvv] {
    opacity: 0.85;
    transform: translateX(1px);
}

.calendar-event-time[b-3bjxdx2qvv] {
    font-weight: 600;
    font-size: 0.7rem;
}

/* スマホ・タブレットは月表示の予定ピルが狭く、タイトルを優先するため時間は
   非表示にする（週表示は縦軸で時間位置が分かるので対象外、日付一覧ポップ
   アップも対象外）。 */
@media (max-width: 992px) {
    .calendar-event .calendar-event-time[b-3bjxdx2qvv] {
        display: none;
    }
}

.calendar-event-title[b-3bjxdx2qvv] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-more[b-3bjxdx2qvv] {
    font-size: 0.7rem;
    color: var(--blue, #2B5797);
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}

.calendar-more:hover[b-3bjxdx2qvv] {
    background: var(--blue-l, #EBF1FA);
}

.calendar-day-list-item[b-3bjxdx2qvv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.25rem;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.calendar-day-list-item:hover[b-3bjxdx2qvv] {
    background-color: #f8f9fa;
}

.calendar-day-list-item:last-child[b-3bjxdx2qvv] {
    border-bottom: none;
}

.week-view[b-3bjxdx2qvv] {
    /* Outer border/radius/shadow now come from the .sched-cal-wrap container. */
}

.week-header-row[b-3bjxdx2qvv],
.week-allday-row[b-3bjxdx2qvv],
.week-body[b-3bjxdx2qvv] {
    display: grid;
    grid-template-columns: 3.5rem repeat(7, 1fr);
}

.week-time-gutter[b-3bjxdx2qvv] {
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    font-size: 0.7rem;
    color: #868e96;
    display: flex;
    align-items: center;
    justify-content: center;
}

.week-day-header[b-3bjxdx2qvv] {
    min-width: 0;
    text-align: center;
    padding: 0.4rem 0.25rem;
    border-left: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa;
}

.week-day-header.calendar-sat[b-3bjxdx2qvv] {
    background-color: var(--cal-sat-bg, #F0F4FD);
    color: var(--blue, #2B5797);
}

.week-day-header.calendar-sun[b-3bjxdx2qvv] {
    background-color: var(--cal-sun-bg, #FEF6F4);
    color: var(--terra, #E8543A);
}

.week-day-name[b-3bjxdx2qvv] {
    font-size: 0.75rem;
    font-weight: 600;
}

.week-day-number[b-3bjxdx2qvv] {
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    margin-top: 2px;
}

.week-allday-row[b-3bjxdx2qvv] {
    min-height: 2rem;
}

.week-allday-cell[b-3bjxdx2qvv] {
    min-width: 0;
    border-left: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    padding: 2px;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.15s;
}

.week-allday-cell.calendar-sat[b-3bjxdx2qvv] {
    background-color: var(--cal-sat-bg, #F0F4FD);
}

.week-allday-cell.calendar-sun[b-3bjxdx2qvv] {
    background-color: var(--cal-sun-bg, #FEF6F4);
}

.week-body[b-3bjxdx2qvv] {
    position: relative;
}

.week-time-col[b-3bjxdx2qvv] {
    border-right: 1px solid #dee2e6;
}

.week-hour-label[b-3bjxdx2qvv] {
    height: 60px;
    box-sizing: border-box;
    font-size: 0.7rem;
    color: #868e96;
    text-align: right;
    padding-right: 0.25rem;
    padding-top: 2px;
    border-top: 1px solid #f1f1f1;
}

.week-hour-label:first-child[b-3bjxdx2qvv] {
    border-top: none;
}

.week-day-col[b-3bjxdx2qvv] {
    position: relative;
    min-width: 0;
    height: 1440px;
    border-left: 1px solid #dee2e6;
    cursor: pointer;
    background-image: repeating-linear-gradient(to bottom, #f1f1f1 0, #f1f1f1 1px, transparent 1px, transparent 60px);
    transition: background-color 0.15s;
}

.week-day-col:hover[b-3bjxdx2qvv] {
    background-color: #fafafa;
}

.week-day-col.calendar-sat[b-3bjxdx2qvv] {
    background-color: var(--cal-sat-bg, #F0F4FD);
}

.week-day-col.calendar-sun[b-3bjxdx2qvv] {
    background-color: var(--cal-sun-bg, #FEF6F4);
}

.week-day-col.calendar-sat:hover[b-3bjxdx2qvv] {
    background-color: #E8EFFA;
}

.week-day-col.calendar-sun:hover[b-3bjxdx2qvv] {
    background-color: #FBEAE6;
}

/* Compounded with the base class (matching .calendar-cell.calendar-cell-holiday's
   trick above) so this wins on specificity over the .calendar-sat/.calendar-sun
   weekend-tint rules regardless of which weekday a holiday happens to fall on. */
.week-day-col.week-day-col-holiday[b-3bjxdx2qvv] {
    background-color: #fff5f7;
}

.week-day-col.week-day-col-holiday:hover[b-3bjxdx2qvv] {
    background-color: #ffe9ee;
}

.week-allday-cell.week-allday-cell-holiday[b-3bjxdx2qvv] {
    background-color: #fff5f7;
}

.week-event[b-3bjxdx2qvv] {
    position: absolute;
    overflow: hidden;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 0.7rem;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
}

/* ===== 日別イベント一覧モーダル（「他N件」） ===== */
.sched-day-agenda-empty[b-3bjxdx2qvv] {
    padding: 1rem;
    color: var(--mid, #4B5563);
    font-size: 0.85rem;
    text-align: center;
}

/* ===== 日別アジェンダ（スマホ・タブレットで日付タップ時にカレンダー下に表示） =====
   以前はmax-height固定＋.sched-day-agenda-list側にflex:1/overflow-y:auto
   というパネル内スクロール構造だったが、.wg-article/.wg-content
   （MainLayout.razor.css、こちら自体がoverflow-y:autoのスクロール領域）
   の内側にネストした2つ目のoverflow-y:autoとして、実機タッチスクロールが
   外側に取られてしまい信頼できなかった（tomova_schedule_day_panel_scroll_fix_v4_ROOT_CAUSE.md
   ・08-18）。max-height/flex構造ごと廃止し、常に5件だけ描画→「他N件を
   表示」タップで全件その場に追加描画する方式に変更。全件表示時は
   このパネル自体が縦に伸び、既に実機確認済みの外側.wg-contentの通常
   スクロールだけで下まで見られる（ネストしたスクロール領域を作らない）。 */
.sched-day-agenda[b-3bjxdx2qvv] {
    background: white;
    border-radius: 14px;
    border: 1px solid var(--border, #E5DDD4);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
    margin-top: 0.75rem;
}

/* ボトムナビぶんの余白は.sched-bottom-spacerが担う（上の.sched-cal-wrap
   と同じ理由でmargin-bottomは使わない）。 */

.sched-day-agenda-header[b-3bjxdx2qvv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border, #E5DDD4);
    flex-shrink: 0;
}

.sched-day-agenda-title[b-3bjxdx2qvv] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--dark, #16213E);
}

.sched-day-agenda-actions[b-3bjxdx2qvv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* tomova_schedule_mobile_brushup.htmlの.day-panel-add。.sched-day-agenda
   全体がIsCompactViewport(≤992px)の時しか描画されないため、PC向けの
   メディアクエリ分岐は不要。 */
.sched-day-agenda-add[b-3bjxdx2qvv] {
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    border: none;
    background: var(--blue, #2B5797);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.sched-day-agenda-add:hover[b-3bjxdx2qvv] {
    background: var(--blue-d, #1A3A6B);
}

.sched-day-agenda-close[b-3bjxdx2qvv] {
    border: none;
    background: none;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--mid, #4B5563);
    cursor: pointer;
    padding: 0.25rem 0.4rem;
}

.sched-day-agenda-list[b-3bjxdx2qvv] {
    /* overflow・max-heightは一切指定しない — 中身の分だけ自然に伸びる
       （ネストしたスクロール領域を作らないため、意図的に何もしない）。 */
}

.sched-day-agenda-item[b-3bjxdx2qvv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f1f1;
}

.sched-day-agenda-item:last-child[b-3bjxdx2qvv] {
    border-bottom: none;
}

.sched-day-agenda-item:hover[b-3bjxdx2qvv] {
    background-color: #f8f9fa;
}

/* tomova_schedule_mobile_brushup.htmlの.day-event-color。丸ドット(category-dot)
   ではなく縦バー。カテゴリ色はcat-color-*が付与するcolorをcurrentColor経由で
   使う（Home.razor.cssの.mobile-event-barと同じ手法）。 */
.sched-day-agenda-bar[b-3bjxdx2qvv] {
    width: 3px;
    height: 1.65rem;
    border-radius: 2px;
    flex-shrink: 0;
    background: currentColor;
}

.sched-day-agenda-item-title[b-3bjxdx2qvv] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.sched-day-agenda-more[b-3bjxdx2qvv] {
    /* <div>から<button>に変更した際のブラウザ既定ボタンスタイルの
       打ち消し（枠線・背景・幅・フォント）。 */
    display: block;
    width: 100%;
    border: none;
    border-top: 1px solid var(--border, #E5DDD4);
    background: var(--light, #F7F4F0);
    border-radius: 0 0 14px 14px;
    font-family: inherit;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--blue, #2B5797);
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
}

.sched-day-agenda-more:hover[b-3bjxdx2qvv] {
    background: var(--blue-l, #EBF1FA);
}
/* /Components/Pages/Search.razor.rz.scp.css */
.page-header[b-5vml4pg2mg] {
    padding: 0.25rem 0 1rem;
}

.page-title[b-5vml4pg2mg] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark, #16213E);
    word-break: break-word;
}

.card[b-5vml4pg2mg] {
    background: var(--white, #fff);
    border-radius: 12px;
    border: 1px solid var(--border, #E5DDD4);
    box-shadow: var(--shadow, 0 4px 16px rgba(16, 42, 67, 0.08));
    overflow: hidden;
}

.card-header[b-5vml4pg2mg] {
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid var(--border, #E5DDD4);
}

.card-title[b-5vml4pg2mg] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dark, #16213E);
}

.card-body[b-5vml4pg2mg] {
    padding: 0.4rem 1.1rem 0.6rem;
}

.info-item[b-5vml4pg2mg] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.1rem;
    border-bottom: 1px solid var(--border, #E5DDD4);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.info-item:last-child[b-5vml4pg2mg] {
    border-bottom: none;
}

.info-item:hover[b-5vml4pg2mg] {
    background: var(--light, #F7F4F0);
    color: inherit;
}

.info-item-icon[b-5vml4pg2mg] {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.info-item-main[b-5vml4pg2mg] {
    flex: 1;
    min-width: 0;
}

.info-item-title[b-5vml4pg2mg] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dark, #16213E);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-item-meta[b-5vml4pg2mg] {
    font-size: 0.7rem;
    color: var(--muted, #9CA3AF);
    margin-top: 0.1rem;
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.page-header[b-9z9tivlwbr] {
    padding: 0.25rem 0 1rem;
}

.page-title[b-9z9tivlwbr] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark, #16213E);
}

.settings-card[b-9z9tivlwbr] {
    background: var(--white, #fff);
    border: 1px solid var(--border, #E5DDD4);
    border-radius: 10px;
    box-shadow: var(--shadow, 0 4px 16px rgba(16, 42, 67, 0.08));
    padding: 1.2rem 1.5rem;
    max-width: 32rem;
}

@media (max-width: 640px) {
    .settings-card[b-9z9tivlwbr] {
        padding: 0.9rem 1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
        margin-left: -1rem;
        margin-right: -1rem;
    }
}
/* /Components/Shared/EventEditor.razor.rz.scp.css */
/* Tomova仕様の予定モーダル（Home/Scheduleで共用）。ダイアログの構造・機能は
   Bootstrapモーダルのまま、見た目（角丸・配色・ボタン）だけを合わせる。 */
.modal-content[b-renm6hzulw] {
    border-radius: 14px;
    border: 1px solid var(--border, #E5DDD4);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}

.modal-header[b-renm6hzulw] {
    border-bottom: 1px solid var(--border, #E5DDD4);
    padding: 1rem 1.25rem;
}

.modal-title[b-renm6hzulw] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark, #16213E);
}

.modal-body[b-renm6hzulw] {
    padding: 1.1rem 1.25rem;
}

.modal-footer[b-renm6hzulw] {
    border-top: 1px solid var(--border, #E5DDD4);
}

.btn-secondary[b-renm6hzulw] {
    background: var(--white, #fff);
    border-color: var(--border, #E5DDD4);
    color: var(--mid, #4B5563);
}

.btn-secondary:hover[b-renm6hzulw] {
    background: var(--light, #F7F4F0);
    border-color: var(--border, #E5DDD4);
    color: var(--dark, #16213E);
}

.btn-outline-danger[b-renm6hzulw] {
    color: var(--terra, #E8543A);
    border-color: var(--border, #E5DDD4);
}

.btn-outline-danger:hover[b-renm6hzulw] {
    background: var(--terra-l, #FEF0EC);
    border-color: var(--terra, #E8543A);
    color: var(--terra, #E8543A);
}

.btn-primary[b-renm6hzulw],
.btn-outline-secondary[b-renm6hzulw],
.btn-link[b-renm6hzulw] {
    border-radius: 8px;
}

.btn-primary.btn-sm[b-renm6hzulw],
.btn-secondary.btn-sm[b-renm6hzulw],
.btn-outline-danger.btn-sm[b-renm6hzulw],
.btn-outline-secondary.btn-sm[b-renm6hzulw] {
    border-radius: 6px;
}

/* スマホ: このモーダルは.wg-content(overflow-y:auto)の中にDOM上ネストされているため、
   その範囲の外にはみ出た部分は描画されずクリップされる（Safari/Chromeともに、overflow
   を持つ祖先の外に出たposition:fixed子要素は消える）。フォームが縦長で画面に収まらない
   と、上端がヘッダー(4.9rem)の裏に、下端がボトムナビ(3.5rem+safe-area、ともに
   MainLayout.razor.css)の裏に隠れて操作できなくなる。ヘッダーとボトムナビの間に収まる
   高さへ制限し、はみ出た分は.modal-body内だけをスクロールさせる。 */
@media (max-width: 767.98px) {
    .modal[b-renm6hzulw] {
        top: 4.9rem;
        height: calc(100dvh - 4.9rem - 3.5rem - env(safe-area-inset-bottom));
    }

    .modal-dialog[b-renm6hzulw] {
        display: flex;
        align-items: center;
        min-height: calc(100% - 1rem);
        margin: 0.5rem auto;
    }

    .modal-content[b-renm6hzulw] {
        max-height: 100%;
        min-height: 0;
    }

    .modal-body[b-renm6hzulw] {
        overflow-y: auto;
        min-height: 0;
    }
}