/* 共通スタイル: 月別ボックス型カレンダー */
* { box-sizing: border-box; }

body {
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    margin: 0;
    padding: 24px;
    color: #222;
    background: #f5f6f8;
}

h1 { font-size: 20px; margin: 0 0 16px; }

.container { max-width: 1000px; margin: 0 auto; }

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.toolbar .month-label { font-size: 18px; font-weight: bold; }
.toolbar a.nav, .toolbar button {
    text-decoration: none;
    color: #fff;
    background: #3b6ea5;
    padding: 6px 14px;
    border-radius: 4px;
    border: none;
    font-size: 14px;
    cursor: pointer;
}
.toolbar a.nav:hover, .toolbar button:hover { background: #2f5985; }

/* タブ（顧客向け） */
.tabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.tabs a {
    text-decoration: none;
    padding: 8px 16px;
    background: #e3e7ec;
    color: #333;
    border-radius: 6px 6px 0 0;
    font-size: 14px;
}
.tabs a.active { background: #3b6ea5; color: #fff; font-weight: bold; }

/* カレンダー本体 */
table.calendar {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    table-layout: fixed;
}
table.calendar th {
    border: 1px solid #d4d8dd;
    background: #eef1f4;
    padding: 8px 0;
    font-size: 13px;
}
/* 曜日ヘッダの配色 */
table.calendar th.sun { color: #c0392b; }
table.calendar th.sat { color: #2c66b0; }

table.calendar td {
    border: 1px solid #d4d8dd;
    vertical-align: top;
    height: 96px;
    padding: 4px;
}
table.calendar td.empty { background: #fafafa; }

/* 日にちセルの配色: 日曜・祝日=赤系統 / 土曜=青系統 */
table.calendar td.sun     { background: #fdecec; }
table.calendar td.holiday { background: #fde7e7; }
table.calendar td.sat     { background: #eaf1fb; }
table.calendar td.sun .daynum,
table.calendar td.holiday .daynum { color: #c0392b; }
table.calendar td.sat .daynum     { color: #2c66b0; }

.daynum { font-size: 13px; font-weight: bold; display: block; margin-bottom: 4px; }
.holiday-name {
    display: block;
    font-size: 10px;
    color: #c0392b;
    line-height: 1.2;
    margin: -2px 0 3px;
    white-space: normal;
}

/* 管理画面: セル内のプルダウン群 */
.room-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    margin: 2px 0;
}
.room-row label { color: #555; }
.room-row select { font-size: 12px; padding: 1px 2px; }

/* 顧客向け: ○/× 表示 */
.mark {
    display: block;
    text-align: center;
    font-size: 24px;
    line-height: 1.4;
    text-decoration: none;
}
.mark.open { color: #27ae60; font-weight: bold; }
.mark.open:hover { background: #eafaf0; border-radius: 4px; }
.mark.closed { color: #aaa; cursor: not-allowed; }

/* メッセージ */
.flash {
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
}
.flash.success { background: #e6f6ec; color: #1e7a42; border: 1px solid #b6e0c4; }
.flash.error   { background: #fdecea; color: #b3261e; border: 1px solid #f5c2bd; }

/* ログインフォーム */
.login-box {
    max-width: 360px;
    margin: 80px auto;
    background: #fff;
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.login-box h1 { text-align: center; }
.login-box input[type=password] {
    width: 100%;
    padding: 10px;
    font-size: 15px;
    margin: 12px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.login-box button {
    width: 100%;
    padding: 10px;
    font-size: 15px;
    background: #3b6ea5;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.logout-link { font-size: 13px; }