/* ═══════════════════════════════════════════════
   SaaS予約システム — メインスタイルシート
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
    background: #fdf8f9;
    color: #3d2a32;
    min-height: 100vh;
    line-height: 1.75;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── App Wrapper ── */
.app-wrapper { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid #f0e4e8;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow-y: auto;
}
.sidebar-logo { padding: 26px 24px 18px; }
.sidebar-logo a { display: inline-block; text-decoration: none; }
.sidebar-logo img { height: 34px; width: auto; display: block; }

.sidebar-nav { flex: 1; padding: 4px 12px 8px; }
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: #8a7075;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: background .15s, color .15s;
    margin-bottom: 2px;
}
.sidebar-nav a:hover { background: #fdf0f3; color: #c4718f; }
.sidebar-nav a.active { background: #fdf0f3; color: #c4718f; font-weight: 700; }
.sidebar-nav a svg { flex-shrink: 0; opacity: .75; }
.sidebar-nav a.active svg { opacity: 1; }
.sidebar-nav .nav-divider { height: 1px; background: #f0e4e8; margin: 10px 0; }

.sidebar-bottom {
    padding: 12px 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sidebar-bottom a {
    display: block;
    text-align: center;
    padding: 9px 12px;
    border-radius: 8px;
    color: #8a7075;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.sidebar-bottom a.plan-btn { background: #f7f0f3; color: #5c4048; font-weight: 600; }
.sidebar-bottom a.plan-btn:hover { background: #f0e0e6; }
.sidebar-bottom a.logout-link { font-size: 12px; color: #b0949b; }
.sidebar-bottom a.logout-link:hover { color: #c4718f; background: #fdf0f3; }

/* ── Page Content ── */
.page-content {
    margin-left: 240px;
    flex: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fdf8f9;
}

/* ── Mobile Top Bar ── */
.mobile-top-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #f0e4e8;
    position: sticky;
    top: 0;
    z-index: 80;
}
.mobile-top-bar .mobile-logo img { height: 28px; width: auto; }
.mobile-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #8a7075;
    border-radius: 6px;
    display: flex;
    align-items: center;
}
.mobile-menu-btn:hover { background: #fdf0f3; color: #c4718f; }

/* ── Sidebar Overlay (mobile) ── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(61,42,50,.4);
    z-index: 99;
}
.sidebar-overlay.open { display: block; }

/* ── Container / Layout ── */
.container { padding: 32px 28px; }

/* ── Card ── */
.card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(180,120,140,.07);
    padding: 24px;
}
.card-sm { padding: 16px; margin-bottom: 16px; }

/* ── Typography ── */
h1 { font-size: 22px; font-weight: 700; color: #3d2a32; letter-spacing: -0.01em; line-height: 1.4; }
h2 { font-size: 18px; font-weight: 600; margin-bottom: 16px; letter-spacing: -0.01em; line-height: 1.45; }
h3 { font-size: 16px; font-weight: 600; line-height: 1.5; }
p  { line-height: 1.8; }

/* ── Form ── */
.form-group { margin-bottom: 20px; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #5c4048; }

input[type=text],
input[type=email],
input[type=password],
input[type=date],
input[type=tel],
input[type=time],
input[type=number],
input[type=url],
select,
textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e8d5da;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    font-family: inherit;
    background: #fff;
    color: #3d2a32;
    line-height: 1.6;
}
input:focus, select:focus, textarea:focus {
    border-color: #c4718f;
    box-shadow: 0 0 0 3px rgba(196,113,143,.12);
}
textarea { resize: vertical; min-height: 80px; }

/* ── Buttons ── */
.btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background .2s;
    font-family: inherit;
    line-height: 1.4;
    white-space: nowrap;
}
.btn-primary { background: #c4718f; color: #fff; }
.btn-primary:hover { background: #ae5d7a; color: #fff; }
.btn-secondary { background: #f7eff2; color: #5c4048; }
.btn-secondary:hover { background: #f0e0e6; color: #5c4048; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-danger { background: #fee2e2; color: #b91c1c; }
.btn-danger:hover { background: #fecaca; }

/* ── Alerts ── */
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; line-height: 1.7; }
.alert-error   { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
.alert-info    { background: #fff6f9; color: #9b4a6a; border: 1px solid #f0b8cc; }
.alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
.alert-row     { display: flex; justify-content: space-between; align-items: center; }

/* ── Utilities ── */
.text-sm      { font-size: 13px; color: #8a7075; margin-top: 8px; }
.text-center  { text-align: center; }
.text-brand   { color: #c4718f; }
.text-id      { color: #9ca3af; font-size: 12px; }
.text-muted-sm { font-size: 12px; color: #b0949b; }
.text-disabled { font-size: 12px; color: #9ca3af; }
.mt-1 { margin-top: 4px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-4 { margin-bottom: 20px; }
.hint { font-size: 12px; color: #b0949b; margin-top: 4px; }
.nowrap        { white-space: nowrap; }
.overflow-auto { overflow-x: auto; }
.text-right    { text-align: right; }
.mb-0          { margin-bottom: 0 !important; }
.form-inline    { display: inline; }
.form-inline-ml { display: inline; margin-left: 6px; }

/* ── Guest layout (no sidebar) ── */
body.guest-layout .app-wrapper { display: block; }
body.guest-layout .sidebar,
body.guest-layout .sidebar-overlay,
body.guest-layout .mobile-top-bar { display: none !important; }
body.guest-layout .page-content { margin-left: 0; background: #fdf8f9; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
body.guest-layout .container { width: 100%; padding: 24px; }

/* ── Page Header Row ── */
.page-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

/* ── Filter Form ── */
.filter-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.filter-form label {
    font-size: 13px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
    color: #5c4048;
}
.filter-input {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    width: auto;
}

/* ── Card Header ── */
.card-head {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    color: #6b7280;
}

/* ── Data Table ── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.6;
}
.data-table thead { background: #f9fafb; }
.data-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}
.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
}
.data-table td.nowrap, .data-table th.nowrap { white-space: nowrap; }
.data-table td.center, .data-table th.center { text-align: center; }
.data-table td.text-id { color: #9ca3af; font-size: 14px; }

/* ── Source Badges ── */
.src-badge {
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    display: inline-block;
}
.src-badge-line  { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
.src-badge-web   { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.src-badge-admin { background: #f5f3ff; color: #5b21b6; border: 1px solid #c4b5fd; }

/* ── Empty State ── */
.empty-state {
    text-align: center;
    padding: 40px;
    color: #6b7280;
}

/* ── Mobile Cards (reservations) ── */
.mobile-cards { padding: 12px; }
.mobile-card-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
}
.mobile-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.mobile-card-meta {
    font-size: 14px;
    color: #374151;
    line-height: 1.8;
}
.mobile-card-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.mobile-card-actions .text-disabled { padding: 6px 0; }

/* ── Status / Action Elements ── */
.status-select {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    cursor: pointer;
}
.status-select.sm { padding: 4px 8px; }
.del-link {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
}
.btn-delete {
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fca5a5;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
    }
    .sidebar.open { transform: translateX(0); }
    .page-content { margin-left: 0; }
    .mobile-top-bar { display: flex; }
    .container { padding: 20px 14px; }
    .card { padding: 18px 16px; }
}
@media (max-width: 480px) {
    h1 { font-size: 18px; }
    h2 { font-size: 16px; }
    .btn { font-size: 14px; }
}

/* ════════════════════════════════════════════════
   ダッシュボード (dashboard.php)
   ════════════════════════════════════════════════ */
.dash-main { padding: 32px 32px 48px; }
@media (max-width:768px) { .dash-main { padding: 20px 14px 40px; } }

.dash-page-header { margin-bottom: 24px; }
.dash-page-header h1 { font-size: 22px; font-weight: 700; color: #3d2a32; }
.dash-page-header .page-sub { font-size: 13px; color: #b0949b; margin-top: 3px; }

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
@media (max-width:900px) { .stats-row { grid-template-columns: 1fr 1fr; } }
@media (max-width:480px) { .stats-row { grid-template-columns: 1fr; } }

.stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 1px 4px rgba(180,120,140,.07);
}
.stat-card.plan-card {
    background: linear-gradient(135deg, #b5607c 0%, #9a4e6a 100%);
    color: #fff;
}
.stat-card .stat-label { font-size: 12px; color: #b0949b; margin-bottom: 6px; }
.stat-card.plan-card .stat-label { color: rgba(255,255,255,.75); }
.stat-card .stat-value { font-size: 30px; font-weight: 800; color: #c4718f; line-height: 1; }
.stat-card.plan-card .stat-value { color: #fff; }
.stat-card .stat-unit { font-size: 14px; font-weight: 600; margin-left: 2px; }
.stat-card .stat-sub { font-size: 12px; color: #b0949b; margin-top: 6px; }
.stat-card.plan-card .stat-sub { color: rgba(255,255,255,.75); }

.next-res-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 1px 4px rgba(180,120,140,.07);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.next-res-card .stat-label { font-size: 12px; color: #b0949b; margin-bottom: 6px; }
.next-res-card .next-name { font-size: 16px; font-weight: 700; color: #3d2a32; }
.next-res-card .next-info { font-size: 12px; color: #8a7075; margin-top: 3px; }
.next-res-card .btn-confirm {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 14px;
    background: #fdf0f3;
    color: #c4718f;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    align-self: flex-start;
    transition: background .15s;
}
.next-res-card .btn-confirm:hover { background: #f0d6e0; }

.dash-two-col {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 960px) { .dash-two-col { grid-template-columns: 1fr; } }

.calendar-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(180,120,140,.07);
}
.cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.cal-header h2 { font-size: 16px; font-weight: 700; margin: 0; }
.cal-nav { display: flex; gap: 4px; }
.cal-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 6px;
    background: #f7f0f3;
    color: #8a7075;
    text-decoration: none;
    font-size: 14px;
    transition: background .15s;
}
.cal-nav a:hover { background: #f0d6e0; color: #c4718f; }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.cal-day-head {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #b0949b;
    padding: 4px 0 6px;
}
.cal-day-head.sat { color: #93c5fd; }
.cal-day-head.sun { color: #fca5a5; }

.cal-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
    color: #3d2a32;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    transition: background .15s;
    cursor: pointer;
}
.cal-day:hover { background: #d3f1f1; }
.cal-day.empty { pointer-events: none; }
.cal-day.past { color: #ccc; pointer-events: none; cursor: default; }
.cal-day.sat { color: #60a5fa; }
.cal-day.sun { color: #f87171; }
.cal-day.past.sat { color: #c7ddf9; }
.cal-day.past.sun { color: #fcc; }
.cal-day.selected { outline: 2px solid #0a8384; font-weight: 700; }
.cal-day.has-res { background: #10b8b9; color: #fff; font-weight: 700; border-radius: 8px; }
.cal-day.has-res:hover { background: #0d9b9c; }
.cal-day.has-res .cal-dot { display: none; }
.cal-day.selected.has-res { background: #10b8b9; outline: 2px solid #0a8384; }

.day-res-list { margin-top: 20px; }
.day-res-head { font-size: 13px; font-weight: 600; color: #5c4048; margin-bottom: 10px; }
.day-res-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: #fdf8f9;
    border-radius: 8px;
    margin-bottom: 6px;
    border-left: 3px solid #c4718f;
    font-size: 13px;
    color: #3d2a32;
}
.day-res-item.confirmed { border-color: #10b8b9; }
.day-res-item.pending   { border-color: #f59e0b; }
.day-res-item .res-time   { font-weight: 700; white-space: nowrap; }
.day-res-item .res-name   { font-weight: 600; }
.day-res-item .res-course { color: #8a7075; font-size: 12px; }
.day-res-empty { font-size: 13px; color: #b0949b; padding: 12px 0; text-align: center; }

.booking-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(180,120,140,.07);
    position: sticky;
    top: 20px;
}
.booking-card h2 { font-size: 16px; font-weight: 700; margin-bottom: 20px; }
.booking-form .form-group { margin-bottom: 14px; }
.booking-form label { font-size: 12px; font-weight: 600; color: #5c4048; margin-bottom: 5px; }
.booking-form input,
.booking-form select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #e8d5da;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #3d2a32;
    background: #fff;
    outline: none;
    transition: border-color .2s;
}
.booking-form input:focus,
.booking-form select:focus {
    border-color: #c4718f;
    box-shadow: 0 0 0 3px rgba(196,113,143,.12);
}
.booking-form .date-time-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.booking-form .btn-book {
    display: block;
    width: 100%;
    padding: 12px;
    background: #c4718f;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s;
    margin-top: 8px;
}
.booking-form .btn-book:hover { background: #ae5d7a; }
.booking-note { font-size: 11px; color: #b0949b; text-align: center; margin-top: 6px; }

.line-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 13px 18px;
    background: #fff;
    border-radius: 10px;
    border-left: 4px solid #22c55e;
    box-shadow: 0 1px 4px rgba(180,120,140,.07);
    font-size: 13px;
    color: #3d2a32;
}
.line-banner .line-status { font-weight: 700; color: #16a34a; }
.line-banner .line-status.disabled { color: #9ca3af; }
.line-banner-link {
    margin-left: auto;
    font-size: 13px;
    color: #c4718f;
    text-decoration: none;
    white-space: nowrap;
}
.line-banner-link:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════
   レポート (report.php)
   ════════════════════════════════════════════════ */
.rpt-wrap { padding: 32px 32px 56px; }
@media (max-width:768px) { .rpt-wrap { padding: 18px 14px 40px; } }

.rpt-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:10px; }
.rpt-head h1 { font-size:22px; font-weight:700; }
.period-tabs { display:flex; gap:4px; }
.period-tabs a {
    padding:6px 14px; border-radius:6px; font-size:13px; font-weight:600;
    text-decoration:none; color:#8a7075; background:#f7f0f3;
    transition:background .15s,color .15s;
}
.period-tabs a.active, .period-tabs a:hover { background:#c4718f; color:#fff; }

.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px; }
@media (max-width:900px) { .kpi-row { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .kpi-row { grid-template-columns:1fr; } }
.kpi-card { background:#fff; border-radius:12px; padding:20px 22px; box-shadow:0 1px 4px rgba(180,120,140,.07); }
.kpi-label { font-size:12px; color:#b0949b; margin-bottom:6px; }
.kpi-value { font-size:28px; font-weight:800; color:#c4718f; line-height:1; }
.kpi-unit  { font-size:14px; font-weight:600; margin-left:2px; }
.kpi-sub   { font-size:12px; color:#b0949b; margin-top:6px; }
.kpi-sub.up   { color:#10b981; }
.kpi-sub.down { color:#ef4444; }

.chart-card { background:#fff; border-radius:12px; padding:24px; box-shadow:0 1px 4px rgba(180,120,140,.07); margin-bottom:20px; }
.chart-title { font-size:15px; font-weight:700; color:#3d2a32; margin-bottom:18px; }
.chart-row  { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
@media (max-width:768px) { .chart-row { grid-template-columns:1fr; } }
.chart-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin-bottom:20px; }
@media (max-width:900px) { .chart-row3 { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .chart-row3 { grid-template-columns:1fr; } }

.section-title { font-size:15px; font-weight:700; color:#3d2a32; margin:24px 0 12px; }

.rpt-table { width:100%; border-collapse:collapse; font-size:13px; }
.rpt-table th { text-align:left; padding:9px 14px; background:#fdf8f9; color:#8a7075; font-weight:600; border-bottom:2px solid #f0e4e8; white-space:nowrap; }
.rpt-table td { padding:10px 14px; border-bottom:1px solid #f7f0f3; color:#3d2a32; }
.rpt-table tr:last-child td { border-bottom:none; }
.rpt-table tr:hover td { background:#fdf8f9; }

.rev-bar-wrap { background:#f0e4e8; border-radius:4px; height:6px; min-width:60px; flex:1; }
.rev-bar-fill { background:#c4718f; border-radius:4px; height:6px; }

.alert-card { background:#fff9f9; border:1px solid #fca5a5; border-radius:12px; padding:20px 22px; margin-bottom:20px; }
.alert-card .alert-title { font-size:14px; font-weight:700; color:#b91c1c; margin-bottom:12px; }

.heatmap-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.heatmap-day {
    width:44px; border-radius:6px; padding:6px 4px; text-align:center;
    background:#f7f0f3; font-size:11px; color:#8a7075;
    transition:background .15s;
}
.heatmap-day .hm-date { font-size:10px; color:#b0949b; }
.heatmap-day .hm-cnt  { font-size:16px; font-weight:700; color:#c4718f; line-height:1.2; }
.heatmap-day.hm-0 { background:#fdf8f9; }
.heatmap-day.hm-1 { background:#f9e0eb; }
.heatmap-day.hm-2 { background:#f0b8cc; }
.heatmap-day.hm-3 { background:#e08aaa; }
.heatmap-day.hm-4 { background:#c4718f; }
.heatmap-day.hm-4 .hm-cnt, .heatmap-day.hm-4 .hm-date { color:#fff; }
.heatmap-day.hm-3 .hm-cnt { color:#fff; }
.heatmap-day.hm-today { outline:2px solid #c4718f; }

.badge-pending { background:#fffbeb; color:#92400e; border:1px solid #fcd34d; border-radius:20px; font-size:11px; padding:2px 8px; font-weight:600; }
.badge-done    { background:#f0fdf4; color:#166534; border:1px solid #86efac; border-radius:20px; font-size:11px; padding:2px 8px; font-weight:600; }

.rank-1 { color:#f59e0b; font-weight:800; }
.rank-2 { color:#94a3b8; font-weight:700; }
.rank-3 { color:#b45309; font-weight:700; }

.visit-dots span {
    display:inline-block; width:8px; height:8px;
    border-radius:50%; background:#c4718f; margin-right:2px;
}
.visit-dots span.empty { background:#f0e4e8; }
.no-data { text-align:center; color:#b0949b; font-size:13px; padding:24px 0; }

/* ── 会計エクスポート ── */
.export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
@media (max-width: 640px) { .export-grid { grid-template-columns: 1fr; } }
.export-date-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.export-preset { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.preset-btn {
    padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
    text-decoration: none; color: #8a7075; background: #f7f0f3; border: 1.5px solid #e8d8df;
    white-space: nowrap;
}
.preset-btn:hover { background: #f0e0e8; }
.preset-btn.active { background: #c4718f; color: #fff; border-color: #c4718f; }

.export-summary {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-bottom: 20px;
}
@media (max-width: 640px) { .export-summary { grid-template-columns: 1fr 1fr; } }
.export-summary-item {
    background: #fff; border-radius: 10px; padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(180,120,140,.07);
}
.export-summary-label { display: block; font-size: 11px; color: #9ca3af; margin-bottom: 4px; font-weight: 600; letter-spacing: .03em; }
.export-summary-val   { display: block; font-size: 18px; font-weight: 700; color: #1f2937; }

/* ── 会計ガイド ── */
.export-guide {
    margin-top: 28px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(180,120,140,.07);
    overflow: hidden;
}
.export-guide-title {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 20px;
    background: #fdf2f6;
    font-size: 14px; font-weight: 700; color: #9b3a5e;
    border-bottom: 1px solid #f0c4d8;
}
.export-guide-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.export-guide-table th {
    background: #f9fafb; padding: 10px 16px;
    text-align: left; font-size: 12px; font-weight: 700;
    color: #6b7280; border-bottom: 1px solid #e5e7eb;
}
.export-guide-table td {
    padding: 11px 16px; border-bottom: 1px solid #f3f4f6;
    vertical-align: middle; color: #374151; line-height: 1.5;
}
.export-guide-table tr:last-child td { border-bottom: none; }
.guide-row-highlight td { background: #fdf8fb; }
.guide-badge {
    display: inline-block; padding: 2px 10px;
    background: #f0e6ee; color: #9b3a5e;
    border-radius: 20px; font-size: 12px; font-weight: 700;
    white-space: nowrap;
}
.export-guide-notes {
    display: flex; flex-direction: column; gap: 0;
    border-top: 1px solid #e5e7eb;
}
.export-guide-note {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 20px; border-bottom: 1px solid #f3f4f6;
    font-size: 13px; color: #374151; line-height: 1.65;
}
.export-guide-note:last-child { border-bottom: none; }
.guide-note-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.export-guide-note strong { display: block; margin-bottom: 2px; color: #111827; font-size: 13px; }

@media (max-width: 640px) {
    .export-guide-table th:last-child,
    .export-guide-table td:last-child { display: none; }
}

/* ── プラン変更ボックス ── */
.plan-switch-box {
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 12px;
}
.plan-switch-upgrade {
    background: linear-gradient(135deg, #fdf2f6 0%, #fce8f0 100%);
    border: 1.5px solid #f0c4d8;
}
.plan-switch-downgrade {
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
}
.plan-switch-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: #111827; margin-bottom: 8px;
}
.plan-switch-badge {
    background: #c4718f; color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 2px 9px; border-radius: 20px;
}
.plan-switch-desc {
    font-size: 13px; color: #6b7280; line-height: 1.7; margin-bottom: 14px;
}

/* ── オンボーディングバナー ── */
.onboarding-banner {
    background: linear-gradient(135deg, #fdf2f6 0%, #fce8f0 100%);
    border: 1.5px solid #f0c4d8;
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 24px;
}
.onboarding-inner {
    display: flex;
    align-items: center;
    gap: 16px;
}
.onboarding-icon { font-size: 32px; flex-shrink: 0; }
.onboarding-body { flex: 1; min-width: 0; }
.onboarding-title { font-size: 17px; font-weight: 700; color: #9b3a5e; margin-bottom: 4px; }
.onboarding-desc  { font-size: 13px; color: #8a6070; line-height: 1.6; }
.onboarding-btn   { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 600px) {
    .onboarding-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
    .onboarding-btn   { width: 100%; text-align: center; display: block; box-sizing: border-box; }
}

/* ════════════════════════════════════════════════
   設定 (settings.php)
   ════════════════════════════════════════════════ */
.container.settings-page {}
.page-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.settings-tabs { display: flex; border-bottom: 2px solid #e5e7eb; margin-bottom: 0px; gap: 4px; }
.time-row { display: flex; gap: 8px; align-items: center; }
.nav-inner { display: flex; align-items: center; }
.cal-num    { font-size: 14px; font-weight: 700; }
.cal-status { font-size: 12px; margin-top: 2px; line-height: 1.3; word-break: break-all; }
.cal-closed { color: #ef4444; }
.cal-timed  { color: #16a34a; }

.s-select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 9px 32px 9px 12px;
    font-size: 14px;
    color: #111827;
    cursor: pointer;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.s-select:hover { border-color: #9ca3af; }
.s-select:focus { border-color: #c4718f; box-shadow: 0 0 0 3px rgba(196,113,143,.15); }

.s-input {
    padding: 9px 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #111827;
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.s-input:hover { border-color: #9ca3af; }
.s-input:focus { border-color: #c4718f; box-shadow: 0 0 0 3px rgba(196,113,143,.15); }

.time-sep { font-size: 14px; color: #6b7280; user-select: none; white-space: nowrap; }

.course-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
}
.course-row-top    { display: flex; gap: 10px; align-items: flex-start; }
.course-row-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.course-row-meta   { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.price-input-wrap { position: relative; display: inline-flex; align-items: center; }
.price-input-wrap::before {
    content: '¥';
    position: absolute;
    left: 10px;
    color: #8a7075;
    font-size: 14px;
    pointer-events: none;
    font-weight: 600;
}
.price-input-wrap .s-input { padding-left: 26px; }

.course-thumb-wrap {
    position: relative;
    width: 64px; height: 64px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}
.course-thumb-img { width: 64px; height: 64px; object-fit: cover; display: block; }
.course-thumb-placeholder {
    width: 64px; height: 64px;
    background: #fdf0f3;
    border: 2px dashed #e8b8c8;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4718f;
    transition: background .15s, border-color .15s;
}
.course-thumb-wrap:hover .course-thumb-placeholder { background: #fce8ef; border-color: #c4718f; }
.course-thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s;
    border-radius: 7px;
}
.course-thumb-wrap:hover .course-thumb-overlay { opacity: 1; }
.course-thumb-del {
    position: absolute;
    top: 3px; right: 3px;
    width: 18px; height: 18px;
    background: rgba(239,68,68,.9);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    z-index: 2;
}
.course-thumb-del:hover { background: #dc2626; }

.logo-upload-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 240px; height: 96px;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
}
.logo-upload-placeholder {
    width: 100%; height: 100%;
    background: #fdf0f3;
    border: 2px dashed #e8b8c8;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #c4718f;
    font-size: 12px;
    font-weight: 600;
    transition: background .15s, border-color .15s;
}
.logo-upload-wrap:hover .logo-upload-placeholder { background: #fce8ef; border-color: #c4718f; }
.logo-upload-img {
    max-width: 220px; max-height: 80px;
    object-fit: contain;
    display: block;
    padding: 8px;
    background: #f9fafb;
}

.desc-counter  { font-size: 11px; color: #9ca3af; text-align: right; margin-top: 2px; }
.course-img-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.course-del-btn {
    background: none;
    border: 1px solid transparent;
    color: #d1d5db;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: color .12s, background .12s, border-color .12s;
}
.course-del-btn:hover { color: #ef4444; background: #fef2f2; border-color: #fca5a5; }

@media (max-width: 600px) {
    .container { padding: 16px 12px !important; }
    .card { padding: 20px 16px !important; }
    .settings-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .settings-tabs a { white-space: nowrap; padding: 8px 12px !important; font-size: 13px !important; }
    .page-hd { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 16px !important; }
    .page-hd h1 { margin-bottom: 0 !important; }
    .time-row { flex-wrap: wrap !important; gap: 6px !important; }
    .time-row select { flex: 1 1 auto; min-width: 60px; }
    .course-row { flex-wrap: wrap !important; }
    .course-row input[type="text"]   { flex: 1 1 100% !important; width: 100% !important; }
    .course-row input[type="number"],
    .course-row select { flex: 1 1 calc(50% - 24px) !important; width: auto !important; min-width: 60px; }
    .settings-page .btn-primary { width: 100%; text-align: center; display: block; box-sizing: border-box; }
    .cal-nav { padding: 8px 10px !important; }
    .cal-nav-btn { padding: 6px 10px !important; font-size: 13px !important; }
    #cal-month-label { font-size: 15px !important; }
    .cal-wrap { overflow-x: visible !important; }
    #cal-grid td { height: 50px !important; padding: 3px 2px !important; }
    .cal-num    { font-size: 11px; }
    .cal-status { font-size: 9px; margin-top: 1px; }
    thead th   { padding: 6px 2px !important; font-size: 12px !important; }
}

/* ══════════════════════════════════
   お知らせバナー（LP・トップページ）
   ══════════════════════════════════ */
.notice-bar {
    background: #fce8ef;
    border-bottom: 1px solid #f0cad7;
    padding: 10px 24px;
    font-size: 13px;
    color: #7a3a52;
}
.notice-bar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    line-height: 1.5;
}
.notice-bar-item + .notice-bar-item {
    border-top: 1px solid rgba(196,113,143,0.15);
    margin-top: 4px;
    padding-top: 7px;
}
.notice-bar-icon {
    color: #c4718f;
    flex-shrink: 0;
}

/* ══════════════════════════════════
   お知らせカード（ダッシュボード）
   ══════════════════════════════════ */
.notice-card {
    background: #fff8fb;
    border: 1px solid #f0cad7;
    border-left: 4px solid #c4718f;
    border-radius: 10px;
    padding: 14px 18px;
}
.notice-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.notice-icon {
    width: 18px;
    height: 18px;
    color: #c4718f;
    flex-shrink: 0;
    margin-top: 2px;
}
.notice-title {
    font-size: 14px;
    font-weight: 700;
    color: #3d2a32;
    line-height: 1.4;
}
.notice-body {
    font-size: 13px;
    color: #7a6068;
    margin-top: 4px;
    line-height: 1.6;
}