/* Tomova Office brand palette — see MainLayout.razor.css for the top/bottom
   nav chrome that consumes these same variables. */
:root {
    --terra: #E8543A;
    --terra-d: #C43D25;
    --terra-l: #FEF0EC;
    --blue: #2B5797;
    --blue-d: #1A3A6B;
    --blue-l: #EBF1FA;
    --gold: #F7C948;
    --dark: #16213E;
    --mid: #4B5563;
    --muted: #9CA3AF;
    --bg: #F0EDE8;
    --light: #F7F4F0;
    --border: #E5DDD4;
    --white: #FFFFFF;
    --success: #2E7D32;
    --warning: #F57F17;

    /* スケジュール専用: 週末/今日セルの背景トーン */
    --cal-sun-bg: #FEF6F4;
    --cal-sat-bg: #F0F4FD;
    --cal-today-bg: linear-gradient(180deg, #F0F4FC 0%, #FFFFFF 60%);

    /* ステータスカラー（共通） — プロジェクト・タスク・案件など全体で使用 */
    --status-notstarted: var(--muted);
    --status-notstarted-bg: var(--bg);
    --status-progress: var(--blue);
    --status-progress-bg: var(--blue-l);
    --status-planned: #D4A800;
    --status-planned-bg: #FFFBEB;
    --status-done: var(--success);
    --status-done-bg: #E9F5EA;
    --status-delay: var(--terra);
    --status-delay-bg: var(--terra-l);
    --status-hold: #B8860B;
    --status-hold-bg: #FFFBEB;
}

/* ========== Tomova風ボタン（共通） ==========
   Originally written per-page as .webmail-toolbar-* / .mail-toolbar-*
   (Webmail.razor.css/Mail.razor.css, both scoped) — pulled out here,
   global and unscoped, so every other feature (Chat/掲示板/ナレッジ/
   プロジェクト/案件/ワークフロー/グループ, 2026-08-08) can share one
   definition instead of copy-pasting the same block into 7 more scoped
   stylesheets. Webmail/Mail's own copies are left as-is (unaffected,
   just a duplicate at this point) — not worth the regression risk of
   touching already-shipped, already-tested pages to de-duplicate them
   retroactively. */
.tomova-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    white-space: nowrap;
}

.tomova-btn-primary:hover {
    background: var(--blue-d);
}

.tomova-btn-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.tomova-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--white);
    color: var(--mid);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    font-family: inherit;
    white-space: nowrap;
}

.tomova-btn-outline:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: var(--blue-l);
}

.tomova-btn-outline:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.tomova-btn-danger-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--white);
    color: var(--terra);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    font-family: inherit;
    white-space: nowrap;
}

.tomova-btn-danger-outline:hover {
    border-color: var(--terra);
    background: var(--terra-l);
}

.tomova-btn-danger-outline:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* 却下／承認／差し戻しなど、承認フロー特有の強い状態を示すボタン
   (ワークフロー機能用、2026-08-08)。primary/outline/danger-outlineと
   同じ形、色だけ変える。 */
.tomova-btn-danger-solid,
.tomova-btn-success,
.tomova-btn-warning {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
    white-space: nowrap;
}

.tomova-btn-danger-solid {
    background: var(--terra);
}

.tomova-btn-danger-solid:hover {
    background: var(--terra-d);
}

.tomova-btn-success {
    background: var(--success);
}

.tomova-btn-success:hover {
    background: #1B5E20;
}

.tomova-btn-warning {
    background: var(--warning);
}

.tomova-btn-warning:hover {
    background: #C4620F;
}

.tomova-btn-danger-solid:disabled,
.tomova-btn-success:disabled,
.tomova-btn-warning:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.tomova-btn-warning-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--white);
    color: var(--warning);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    font-family: inherit;
    white-space: nowrap;
}

.tomova-btn-warning-outline:hover {
    border-color: var(--warning);
    background: #FDF3E7;
}

.tomova-btn-warning-outline:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* 戻る／削除など、アイコンのみの正方形ボタン。 */
.tomova-btn-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1.5px solid var(--border);
    background: var(--white);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mid);
    transition: background .15s, border-color .15s, color .15s;
    flex-shrink: 0;
}

.tomova-btn-icon:hover {
    background: var(--blue-l);
    border-color: var(--blue);
    color: var(--blue);
}

.tomova-btn-icon.tomova-btn-icon-danger {
    color: var(--terra);
}

.tomova-btn-icon.tomova-btn-icon-danger:hover {
    background: var(--terra-l);
    border-color: var(--terra);
}

.tomova-btn-icon:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* MainLayout.razor.css's .wg-shell/.wg-content design intentionally makes
   .wg-content the ONLY scrolling element (fixed 100dvh shell, internal
   auto-overflow content — see its own comments) so position:sticky and
   bottom-nav clearance math stay predictable. That only holds if the native
   document itself can never scroll: without this, any content that leaks
   past .wg-content's overflow clipping (a nested-flexbox edge case is far
   more likely to slip through than to be perfectly contained on every
   browser) falls through to a native body/html scroll instead — which on
   iOS Safari/Chrome-iOS showed up as a confusing rubber-band bounce with no
   real scroll position to land on, while desktop Chrome's device emulation
   masked it by scrolling the native page normally (confirmed on a real
   iPhone, 2026-08-06). Locking html/body forces all scrolling through
   .wg-content, where it's actually designed to work. */
html, body {
    height: 100%;
    overflow: hidden;
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--bg);
    color: var(--dark);
}

@media print {
    html, body {
        height: auto;
        overflow: visible;
    }
}

/* Trust-blue brand primary, used as the single accent color across links,
   primary buttons, and focus rings so the whole app reads as one
   consistent Tomova palette rather than Bootstrap's default blue. Terracotta
   is now the secondary/accent color, reserved for the logo mark and
   notification/error indicators (see MainLayout.razor.css's .nav-badge and
   Home.razor.css's .card-title-badge/.mail-unread/.todo-due.overdue). */
a, .btn-link {
    color: var(--blue);
}

.btn-primary {
    color: #fff;
    background-color: var(--blue);
    border-color: var(--blue);
}

.btn-primary:hover, .btn-primary:active {
    background-color: var(--blue-d);
    border-color: var(--blue-d);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--blue);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

#wg-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 20rem;
}

.wg-toast {
    background-color: #343a40;
    color: #fff;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    animation: wg-toast-in 0.2s ease-out;
}

.wg-toast strong {
    display: block;
    font-size: 0.9rem;
}

.wg-toast div {
    font-size: 0.85rem;
    opacity: 0.9;
}

@keyframes wg-toast-in {
    from { transform: translateY(-8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 768px) {
    #wg-toast-container {
        top: auto;
        bottom: 4rem;
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
}

/* Webmail/メッセージの新規作成（Components/Pages/Webmail.razor .webmail-compose,
   Components/Pages/Mail.razor .mail-compose）でフィールドにフォーカスがある間
   だけ、固定ボトムナビ(MainLayout.razor.css .bottom-nav-bar)を隠す。iPhoneで
   ソフトキーボードが開くと可視領域が非常に狭くなり、ボトムナビと送信/下書き保存
   ボタンが重なって操作できなくなるのを防ぐため。.webmail-compose/.mail-compose
   はそれぞれのページ側のスコープ付きCSSに属し、.bottom-nav-bar はMainLayout側の
   スコープなので、両方をまたぐこのルールはグローバル(app.css)に置く必要がある
   — .knowledge-body/.memo-body 同様の理由。 */
@media (max-width: 767.98px) {
    body:has(.webmail-compose :focus, .mail-compose :focus) .bottom-nav-bar {
        display: none;
    }
}

/* Calendar event category colors + the category picker/manager controls used by
   Components/Shared/EventEditor.razor. Global (not scoped) because scoped CSS from
   Schedule.razor.css doesn't apply to markup rendered by a different component
   (EventEditor.razor, embedded in both Schedule.razor and Home.razor).

   Hues below (2026-08-06) come from a validated CVD-safe categorical 8-color
   set (Claude's dataviz skill palette — worst adjacent OKLab ΔE 9.1 under
   protanopia/deuteranopia simulation, worst adjacent normal-vision ΔE 19.6;
   see CalendarDisplay.cs's ColorPalette order comment). The old pastel set
   (e.g. blue #cfe2ff/#084298 vs purple #e5dbff/#5f3dc4) all sat in the same
   narrow lightness/chroma band and read as near-identical at calendar-event
   pill size — that's what this replaces. text/bg pairs below are >=4.3:1
   contrast (computed against their own background, not the page surface). */
.cat-color-blue {
    background-color: #dde9f8;
    color: #2466b6;
}

.cat-color-blue:hover {
    background-color: #c3daf3;
}

.cat-color-pink {
    background-color: #fbeaf0;
    color: #904c66;
}

.cat-color-pink:hover {
    background-color: #f6d5e2;
}

.cat-color-green {
    background-color: #d6ebd6;
    color: #007c00;
}

.cat-color-green:hover {
    background-color: #bedebe;
}

.cat-color-purple {
    background-color: #e2dff1;
    color: #46379f;
}

.cat-color-purple:hover {
    background-color: #cac4e5;
}

.cat-color-orange {
    background-color: #fce7df;
    color: #924020;
}

.cat-color-orange:hover {
    background-color: #f8d2c1;
}

.cat-color-teal {
    background-color: #dbf2ea;
    color: #106949;
}

.cat-color-teal:hover {
    background-color: #bfe8db;
}

.cat-color-yellow {
    background-color: #fcf0d6;
    color: #825900;
}

.cat-color-yellow:hover {
    background-color: #f9e3b3;
}

.cat-color-red {
    background-color: #fbe2e2;
    color: #a33534;
}

.cat-color-red:hover {
    background-color: #f6c8c8;
}

.cat-color-shared {
    background-color: #e9ecef;
    color: #495057;
}

.cat-color-shared:hover {
    background-color: #dee2e6;
}

.cat-color-default {
    background-color: #dde9f8;
    color: #2466b6;
}

.cat-color-default:hover {
    background-color: #c3daf3;
}

.category-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.category-dot.cat-color-blue { background-color: #2a78d6; }
.category-dot.cat-color-pink { background-color: #e87ba4; }
.category-dot.cat-color-green { background-color: #008300; }
.category-dot.cat-color-purple { background-color: #4a3aa7; }
.category-dot.cat-color-orange { background-color: #eb6834; }
.category-dot.cat-color-teal { background-color: #1baf7a; }
.category-dot.cat-color-yellow { background-color: #eda100; }
.category-dot.cat-color-red { background-color: #e34948; }
.category-dot.cat-color-shared { background-color: #495057; }
.category-dot.cat-color-default { background-color: #2a78d6; }

.category-choice {
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.55;
}

.category-choice-selected {
    border-color: currentColor;
    opacity: 1;
    font-weight: 600;
}

.category-manage-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
}

.category-swatch {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}

.category-swatch-selected {
    border-color: #212529;
}

/* Markdown rendering for Knowledge articles (Components/Pages/Knowledge.razor).
   Global (not scoped) because the markup comes from Markdig via @((MarkupString)...)
   and scoped CSS attributes are never applied to raw-markup-rendered elements -
   same reasoning as the category-* rules above. */
.knowledge-body h1,
.knowledge-body h2,
.knowledge-body h3 {
    font-weight: 700;
}

.knowledge-body h1 {
    font-size: 1.6rem;
    margin: 1.2em 0 0.6em;
}

.knowledge-body h2 {
    font-size: 1.3rem;
    margin: 1em 0 0.5em;
}

.knowledge-body h3 {
    font-size: 1.1rem;
    margin: 0.8em 0 0.4em;
}

.knowledge-body p {
    margin: 0.6em 0;
    line-height: 1.8;
}

.knowledge-body ul,
.knowledge-body ol {
    padding-left: 1.5em;
    margin: 0.6em 0;
}

.knowledge-body li {
    margin: 0.3em 0;
}

.knowledge-body code {
    background: #f0f2f5;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.875em;
    font-family: Consolas, monospace;
}

.knowledge-body pre {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1em 0;
}

.knowledge-body pre code {
    background: none;
    color: inherit;
    padding: 0;
}

.knowledge-body blockquote {
    border-left: 4px solid var(--blue);
    margin: 0.8em 0;
    padding: 8px 16px;
    background: var(--blue-l);
    border-radius: 0 4px 4px 0;
}

.knowledge-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}

.knowledge-body th,
.knowledge-body td {
    border: 1px solid #e0e0e0;
    padding: 8px 12px;
    text-align: left;
}

.knowledge-body th {
    background: #f0f2f5;
    font-weight: 700;
}

.knowledge-body img {
    max-width: 100%;
    border-radius: 4px;
}

/* Memo view-mode rendering (Components/Pages/Memos.razor). Same rules as
   .knowledge-body above but without the h1/h2 underline, since a memo isn't a
   published article — kept as its own class rather than reusing
   .knowledge-body so tweaking one doesn't affect the other. Global (not
   scoped) for the same raw-innerHTML reason as .knowledge-body. */
.memo-body h1,
.memo-body h2,
.memo-body h3 {
    font-weight: 700;
}

.memo-body h1 {
    font-size: 1.6rem;
    margin: 1.2em 0 0.6em;
}

.memo-body h2 {
    font-size: 1.3rem;
    margin: 1em 0 0.5em;
}

.memo-body h3 {
    font-size: 1.1rem;
    margin: 0.8em 0 0.4em;
}

.memo-body p {
    margin: 0.6em 0;
    line-height: 1.8;
}

.memo-body ul,
.memo-body ol {
    padding-left: 1.5em;
    margin: 0.6em 0;
}

.memo-body li {
    margin: 0.3em 0;
}

.memo-body code {
    background: #f0f2f5;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.875em;
    font-family: Consolas, monospace;
}

.memo-body pre {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1em 0;
}

.memo-body pre code {
    background: none;
    color: inherit;
    padding: 0;
}

.memo-body blockquote {
    border-left: 4px solid var(--blue);
    margin: 0.8em 0;
    padding: 8px 16px;
    background: var(--blue-l);
    border-radius: 0 4px 4px 0;
}

.memo-body img {
    max-width: 100%;
    border-radius: 4px;
}

/* Live Markdown editor, shared by the memo and Knowledge composers
   (Components/Pages/Memos.razor, Components/Pages/Knowledge.razor,
   wwwroot/js/markdown-live-editor.js). The contenteditable line elements and
   their inline formatting spans are built entirely in JS, so — same reasoning
   as .knowledge-body/.memo-body — these rules must be global rather than
   component-scoped CSS. */
.md-live-editor {
    min-height: 20rem;
    padding: 0.75rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background-color: #fff;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.8;
}

.md-live-editor:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 0.25rem rgba(43, 87, 151, 0.15);
}

.md-live-editor .md-line {
    min-height: 1.8em;
}

/* display:none is safe here because .md-syn only ever appears on a line that
   is NOT being actively edited (wwwroot/js/markdown-live-editor.js swaps the
   whole line back to plain raw text the moment the caret enters it), so
   there's no need to keep these markers reachable by the caret. */
.md-live-editor .md-syn {
    display: none;
}

.md-live-editor .md-h1,
.md-live-editor .md-h2,
.md-live-editor .md-h3,
.md-live-editor .md-h4,
.md-live-editor .md-h5,
.md-live-editor .md-h6 {
    font-weight: 700;
}

.md-live-editor .md-h1 {
    font-size: 1.6rem;
}

.md-live-editor .md-h2 {
    font-size: 1.3rem;
}

.md-live-editor .md-h3 {
    font-size: 1.15rem;
}

.md-live-editor .md-quote {
    color: #495057;
    border-left: 3px solid var(--blue);
    padding-left: 8px;
}

.md-live-editor .md-ul-item {
    display: block;
    padding-left: 1.2em;
    position: relative;
}

.md-live-editor .md-ul-item::before {
    content: "•";
    position: absolute;
    left: 0.3em;
}

/* ========== PC/スマホ表示切り替えユーティリティ ==========
   breakpointはこのアプリの他の全モバイル専用CSS（Home.razor.css/
   Schedule.razor.css等）で既に使われている767.98pxに合わせる
   （tomova_mobile_brushup_instructions.mdは480pxを例示しているが、
   実機確認済みの既存breakpointの方を優先）。 */
@media (max-width: 767.98px) {
    .d-none-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .d-mobile-only {
        display: none !important;
    }
}