@charset "utf-8";

#bookWrap * { box-sizing: border-box; }

#bookWrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    color: var(--text);
}

.trpg-nav-toolbar-slot { display: flex; align-items: center; }
.trpg-board-wrap > .trpg-nav-toolbar-slot {
    position: absolute;
    top: -42px; right: 14px; 
    z-index: 20;
}

.mobile-toolbar-frame { display: none; }
@media (max-width: 768px) {
    .mobile-toolbar-frame {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 15px;
        background-color: var(--surface-soft);
        background-image:
            linear-gradient(color-mix(in srgb, var(--border) 18%, transparent) 1px, transparent 1px),
            linear-gradient(90deg, color-mix(in srgb, var(--border) 18%, transparent) 1px, transparent 1px);
        background-size: 24px 24px;
        border-left: 1px solid var(--border);
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }
    .mobile-toolbar-frame .trpg-nav-toolbar-slot { flex: 1; min-width: 0; }
    .mobile-toolbar-frame .searchbar { flex: 1; max-width: none; }
}

.searchbar { flex: 1; max-width: 300px; position: relative; }

.searchbar i {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    color: var(--text-subtle); pointer-events: none; font-size: 12px;
}
.sc-search-empty { text-align: center; padding: 40px; color: var(--text-subtle); display: none; }

.table-wrapper {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: inset 1px 1px 0 var(--window-highlight), 3px 4px 0 color-mix(in srgb, var(--border) 24%, transparent);
}
.lp-gauge-overlay {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}
.table-wrapper::-webkit-scrollbar { width: 8px; height: 8px; }
.table-wrapper::-webkit-scrollbar-track { background: transparent; }
.table-wrapper::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--border) 55%, transparent); border-radius: 4px; }
.table-wrapper::-webkit-scrollbar-thumb:hover { background: var(--brand); }

.sc-table { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; min-width: 800px; }
.sc-table .col-rule { width: 100px; }
.sc-table .col-book { width: 180px; }
.sc-table .col-type { width: 80px; }
.sc-table .col-people { width: 110px; }
.sc-table .col-play { width: 140px; }
.sc-table .col-done { width: 80px; }

.sc-board-empty {
    text-align: center;
    padding: 50px 16px;
    color: var(--text-subtle);
}

.trpg-content-frame:has(> .sc-board-empty) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sc-table thead th {
    position: sticky; top: 0; z-index: 10;
    background: var(--surface-raised);
    color: var(--brand); font-weight: 800; padding: 12px;
    font-size: 12.5px; letter-spacing: .02em;
    border-bottom: 2px solid var(--border); text-align: center;
}

.sc-table thead th:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
.sc-table thead th:last-child { border-top-right-radius: calc(var(--radius) - 1px); }

.sc-table td {
    padding: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
    vertical-align: middle; color: var(--text);
}
.col-subject { white-space: normal !important; word-wrap: break-word; word-break: keep-all; }

.cell-book {
    background: color-mix(in srgb, var(--brand) 6%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
    color: var(--warning) !important;
    font-weight: 700; font-size: 12px; text-align: center;
}

.sc-subject { font-weight: 700; color: var(--text); font-size: 12px; display: block; }

tr.is-complete .sc-subject { text-decoration: line-through; color: var(--text-subtle); opacity: 0.65; }
tr.is-complete td { opacity: 0.65; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; text-align: center; margin: 0 2px 2px 0; }
.badge-type { border: 1px solid var(--border); color: var(--text-subtle); }
.type-series { border-color: var(--warning); color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); }

.role-gm { border: 1px solid var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.role-pl { border: 1px solid var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.role-read { border: 1px solid var(--text-subtle); color: var(--text-subtle); background: color-mix(in srgb, var(--text-subtle) 10%, transparent); }
.role-pdf { border: 1px solid var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

.status-badge { display: inline-block; width: 60px; text-align: center; padding: 4px 0; border-radius: 20px; font-size: 12px; font-weight: 800; }
.st-done { background: var(--brand); color: var(--brand-contrast); }
.st-yet { background: color-mix(in srgb, var(--border) 25%, transparent); color: var(--text-subtle); }

.m-group { margin-bottom: 15px; }
.m-row { display: flex; gap: 10px; }
.m-row > div { flex: 1; }
.m-label { display: block; font-size: 12px; color: var(--text-subtle); margin-bottom: 5px; font-weight: 600; }

.m-role-area {
    background: color-mix(in srgb, var(--surface-soft) 70%, transparent);
    padding: 10px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
}
.m-role-area label { margin: 0; color: var(--text); font-size: 12px; cursor: pointer; }
.m-role-area input[type="checkbox"] { margin-right: 5px; cursor: pointer; }
.m-role-hint { margin-top: 6px; font-size: 12px; color: var(--text-subtle); }

.subject-row { display: flex; gap: 6px; margin-bottom: 6px; }
.subject-row .sc-input { font-weight: 700; }

.sc-write-table { width: 100%; border-collapse: collapse; }
.sc-write-table th { width: 130px; text-align: left; color: var(--brand); padding: 15px 5px; font-weight: 700; }
.sc-write-table td { padding: 10px 5px; border-bottom: 1px solid color-mix(in srgb, var(--border) 35%, transparent); }
#csvModal .sc-write-table td { border-bottom: 0; }

.trpg-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    backdrop-filter: blur(4px);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 12px;
}
.trpg-modal-overlay.open { display: flex; }

#editModal .btn_danger { margin-right: auto; }

.view-info-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: inset 1px 1px 0 var(--window-highlight);
}
.view-info-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;
}
.view-info-grid .vi-label { color: var(--text-subtle); display: block; font-size: 12px; margin-bottom: 3px; }
.view-info-grid .vi-value { color: var(--text); font-weight: 700; }
.view-divider { border: none; border-top: 1px solid var(--border); margin: 30px 0; opacity: 0.6; }
.view-content { color: var(--text); line-height: 1.8; }

.footer-btn.is-danger { border-color: var(--danger); color: var(--danger); }
.footer-btn.is-danger:hover { background: var(--danger); color: var(--brand-contrast); border-color: var(--danger); }

@media (max-width: 768px) {
    .sc-write-table th, .sc-write-table td { display: block; width: 100%; }
    .unified-wrapper { padding: 0; overflow-x: hidden; }

#bookWrap .trpg-content-frame { padding: 0; overflow-x: hidden; }
    .sc-search-empty { padding: 30px 12px; }
    .sc-board-empty { padding: 40px 16px; }

.col-type, .col-people, .col-play { display: none !important; }

    .table-wrapper {
        overflow-x: hidden;
        max-width: 100%;
    }
    .sc-table {
        table-layout: fixed;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100%;
    }
    .sc-table th, .sc-table td {
        padding: 8px 6px !important;
        font-size: 11px !important;
    }
    .sc-table thead th { font-size: 11px; }

.sc-table .col-rule { width: 18% !important; }
    .sc-table .col-book { width: 26% !important; }
    .sc-subject { font-size: 11px; }
    .sc-table .col-done { width: 16% !important; }
    .status-badge { width: 100%; max-width: 40px; font-size: 10px !important; padding: 3px 0; }
    .badge { font-size: 10px !important; padding: 1px 5px; }
    .cell-book div { font-size: 10px !important; }
}