/* style.css
   共通スタイル（display.html用） + 管理画面専用スタイル（#adminMainスコープ）
   管理画面のスタイルはすべて #adminMain にスコープしてあり、
   display.html の見た目へ影響を与えないように配慮しています。
*/

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1&display=swap');

:root{
  --bg: #ffffff;
  --paper: #f8f8f9;
  --text: #012244;
  --accent: #C38F2B;
  --muted: #e6e8ea;
  --input-bg: #f0f2f4;
  --danger: #C94A46;
  --success: #2E6B3A;
}

html,body{
  height:100%;
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Shippori Mincho B1','Noto Serif JP',serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  box-sizing:border-box;
}

/* header */
header{
  padding:20px 10px;
  border-bottom:1px solid rgba(1,34,68,0.06);
  background-color:var(--paper);
}
.page-title{ margin:0; text-align:center; }
.page-title .jp { display:block; font-size:1.6rem; color:var(--text); letter-spacing:0.04em; font-weight:700; }
.page-title .jp.subtitle{ margin-top:6px; font-size:1.2rem; font-weight:700; }
.small-english { display:block; font-size:0.85rem; color:#4b5b6b; margin-top:4px; }

/* container */
.container { max-width:800px; margin:0 auto; padding:30px 20px; box-sizing:border-box; }

/* section */
.section { margin-bottom:40px; }
.section-title {
  font-size:1.2rem;
  border-left:4px solid var(--accent);
  padding-left:10px;
  margin-bottom:10px;
  color:var(--text);
}
.section-title .small-english { margin-top:6px; color:#4b5b6b; }

/* state */
.state {
  font-size:1.1rem;
  color:var(--text);
  text-align:center;
  margin-bottom:20px;
  padding:10px 0;
  border-top:1px solid rgba(1,34,68,0.04);
  border-bottom:1px solid rgba(1,34,68,0.04);
}
.state .small-english { display:block; margin-top:6px; color:#4b5b6b; }

/* notice */
.notice {
  border-top:1px solid rgba(1,34,68,0.04);
  margin-top:30px;
  padding-top:16px;
  font-size:1rem;
  color:var(--text);
  white-space:pre-line;
}

/* times */
.time-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed rgba(1,34,68,0.03); }
.time-label .jp { font-size:1rem; color:var(--text); }
.time-label .en.small-english { margin-top:4px; display:block; font-size:0.85rem; color:#4b5b6b; }
.time-value { font-size:1rem; color:var(--text); }

/* updated */
.updated { margin-top:12px; font-size:0.9rem; color:#56707f; text-align:right; }
.updated .small-english { display:block; font-size:0.85rem; color:#56707f; }

/* icon display */
.icon-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:14px 0 6px;
}
.status-icon{
  width:min(520px, 90%);
  max-width:520px;
  height:auto;
  display:block;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,0.06);
}
.status-text { font-size:1rem; margin-top:10px; color:var(--text); display:block; text-align:center; }
.status-text .small-english { font-size:0.85rem; color:#4b5b6b; margin-top:4px; }

/* bath (male/female) horizontal layout */
.bath-pair{
  display:flex;
  gap:16px;
  align-items:stretch;
  justify-content:space-between;
}
.bath-card{
  flex:1 1 0;
  min-width:0;
  background:var(--paper);
  border:1px solid rgba(1,34,68,0.06);
  border-radius:12px;
  padding:14px 12px;
  box-sizing:border-box;
}

/* title image for each bath */
.bath-title{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:6px 0 10px;
}
.bath-title-img{
  display:block;
  width:100%;
  max-width:520px;
  height:auto;
}

/* keep icon inside card full width */
.bath-card .icon-wrap{ padding:10px 0 6px; }
.bath-card .status-icon{ width:100%; max-width:100%; }

/* Responsive (keep horizontal on mobile) */
@media (max-width:600px) {
  header h1 { font-size:1.5rem; }
  .section-title { font-size:1.05rem; }
  .container { padding:20px 14px; }
  .bath-pair{ gap:10px; }
  .bath-card{ padding:10px 8px; }
  .bath-title{ padding:4px 0 8px; }
  .bath-title-img{ max-width:100%; }
}

/* -----------------------------
   管理画面専用（#adminMain スコープ）
   ----------------------------- */

#adminMain {
  max-width:820px;
  margin:18px auto;
  padding:22px;
  box-sizing:border-box;
  background:transparent;
  color:var(--text);
  font-family:'Shippori Mincho B1','Noto Serif JP',serif;
}
#adminMain .sub { display:block; margin-top:6px; font-size:0.95rem; color:#4b5b6b; }
#adminMain #msg { margin-bottom:12px; padding:10px; border-radius:8px; text-align:left; }

#adminMain .form-row { margin-bottom:16px; text-align:left; }
#adminMain .form-row label { display:block; font-size:0.98rem; margin-bottom:6px; color:var(--text); font-weight:600; }

#adminMain select,
#adminMain textarea,
#adminMain input[type="password"],
#adminMain input[type="text"],
#adminMain input[type="number"] {
  width:100%;
  padding:10px 12px;
  box-sizing:border-box;
  border-radius:8px;
  background:var(--input-bg);
  color:var(--text);
  border:1px solid rgba(0,0,0,0.06);
  font-size:1rem;
  font-family:inherit;
}
#adminMain textarea { resize:vertical; min-height:88px; }

#adminMain .hint { font-size:0.85rem; color:#6b6b6b; margin-top:6px; }
#adminMain .two-cols { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
#adminMain .two-cols > * { flex:1 1 120px; min-width:120px; }

#adminMain .actions { display:flex; gap:12px; align-items:center; margin-top:8px; }
#adminMain button { background:var(--accent); color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; box-shadow:0 2px 6px rgba(0,0,0,0.08); }
#adminMain button.secondary { background:transparent; color:var(--text); border:1px solid rgba(0,0,0,0.06); }
#adminMain button[disabled] { opacity:0.6; cursor:not-allowed; }

#adminMain .meta { margin-top:12px; }
#adminMain .last-updated { font-size:0.9rem; color:#56707f; text-align:right; }

/* login modal */
#loginModal {
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.45); z-index:2000;
}
#loginModal .modal-box {
  background:#fff; padding:20px; border-radius:12px; width:360px; box-sizing:border-box; text-align:center; border:1px solid rgba(0,0,0,0.06); color:var(--text);
}
#loginModal .modal-box h2 { margin:0 0 8px 0; color:var(--accent); font-size:1.15rem; }
#loginModal .modal-msg { color:#b04b3b; margin-top:8px; font-size:0.95rem; }

@media (max-width:600px) {
  #adminMain .actions { flex-direction:column; align-items:stretch; }
  #adminMain button { width:100%; }
  #adminMain .two-cols { flex-direction:column; }
}