/* Editor chrome for the CMS.

   Deliberately plain: the interesting colours belong to the site being edited,
   which sits in the preview to the right. Anything eye-catching here would
   compete with it. The one accent is the hotel's own gold, used only for the
   control that publishes. */

:root {
  --ink: #23231f;
  --ink-soft: #6b6b66;
  --line: #dedcd6;
  --ground: #f2f1ee;
  --card: #ffffff;
  --gold: #de8800;
  --radius: 8px;
  --bar-h: 52px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo,
               system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--ink-soft); }
.spacer { flex: 1; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------- gate */
.gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.gate-box {
  width: 320px;
  padding: 28px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .06);
}
.gate-box h1 { margin: 0; font-size: 18px; }
.gate-box p { margin: 2px 0 20px; font-size: 12px; }
.gate-box label { display: block; margin-bottom: 6px; font-size: 12px; }
.gate-box input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.gate-box button {
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.error { min-height: 18px; margin: 10px 0 0; color: #b3261e; font-size: 12px; }

/* -------------------------------------------------------------------- bar */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--bar-h);
  padding: 0 14px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  /* 画面を下へ送っても、上の切り替えボタンと「保存」は出したままにします。
     仮想スマホは縦に長く、下のほうを見ているときほど画面を移りたくなるので、
     いちいち上まで戻らずに済むようにするためです。 */
  position: sticky;
  top: 0;
  z-index: 40;
}
.bar-title { font-size: 15px; }
.bar-sub { font-size: 12px; color: var(--ink-soft); }
.saved { font-size: 12px; color: var(--ink-soft); min-width: 7em; text-align: right; }

.btn {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.btn:hover { background: #faf9f7; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 700; }
.btn.primary:hover { background: #c87b00; }
.btn.quiet { border-color: transparent; color: var(--ink-soft); }
/* Deleting takes the page with it, so the button says so before it is pressed. */
.btn.danger { color: #a4231b; border-color: #e6c9c6; }
.btn.danger:hover { background: #fdf1f0; border-color: #a4231b; }

/* ----------------------------------------------------------------- layout */
.layout {
  flex: 1;
  display: grid;
  /* The middle column is the narrower of the two now: its controls are a
     single column of fields, and the room it gives up goes to the right of
     the phone, where the two QR codes stand. */
  /* The panel is capped rather than greedy, so the settings stay a
     comfortable single column on the left and the room goes to the
     phone and the codes beside it, which sit against the right edge. */
  grid-template-columns: 190px minmax(260px, 560px) minmax(600px, 1fr);
  gap: 14px;
  padding: 14px;
  align-items: start;
}
@media (max-width: 1240px) {
  .layout { grid-template-columns: 160px 1fr; }
  .phone-wrap { grid-column: 1 / -1; }
}

/* The menu is three boxes, told apart by colour: what the hotel uses every day,
   what is set once at installation, and the rest. The point of the colour is to
   stop anyone wandering into the setup screens during ordinary work. */
.group {
  margin-bottom: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.group-head {
  margin: -6px -6px 4px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}
.group-sub {
  margin: 5px 0 3px;
  padding-left: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
}
.group-sub::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 10px;
  margin-right: 5px;
  border-radius: 2px;
  background: currentColor;
  vertical-align: -1px;
}
/* Every day: the hotel's own gold, warmed down so it does not shout. */
.group-manage { border-color: #e6d3ae; background: #fdf8f0; }
.group-manage .group-head { background: #f6e8cf; border-bottom-color: #e6d3ae; color: #7d6127; }
.group-manage .group-sub { color: #8a6d33; }
.group-manage .block-btn.is-on { border-color: #e6d3ae; }
/* Installed once: a cooler colour, so it reads as a different kind of screen. */
.group-setup { border-color: #cfd9e2; background: #f4f7fa; }
.group-setup .group-head { background: #e4ecf3; border-bottom-color: #cfd9e2; color: #3f5b73; }
.group-setup .block-btn.is-on { border-color: #cfd9e2; }
/* 基本設定：入れたときに一度だけ決める箱。落ち着いた紫にしてあります。 */
.group-basic { border-color: #d7d0e4; background: #f8f6fb; }
.group-basic .group-head { background: #ebe5f4; border-bottom-color: #d7d0e4; color: #574a70; }
.group-basic .block-btn.is-on { border-color: #d7d0e4; }
/* スマホ管理：お客様のスマホに出るもの。水色にしてあります。 */
.group-phone { border-color: #c8dde6; background: #f4fafc; }
.group-phone .group-head { background: #e2f0f5; border-bottom-color: #c8dde6; color: #35606e; }
.group-phone .block-btn.is-on { border-color: #c8dde6; }
/* オーダー管理：商品と売れた記録。温かい橙にしてあります。 */
.group-order { border-color: #ecd2bd; background: #fdf7f2; }
.group-order .group-head { background: #f7e5d6; border-bottom-color: #ecd2bd; color: #7a4f2b; }
.group-order .block-btn.is-on { border-color: #ecd2bd; }
/* ダッシュボード：見に来た回数。青にしてあります。 */
.group-dash { border-color: #ccd8ea; background: #f5f8fc; }
.group-dash .group-head { background: #e4ebf5; border-bottom-color: #ccd8ea; color: #3b5478; }
.group-dash .block-btn.is-on { border-color: #ccd8ea; }
/* 売上管理：お金の箱。緑にして、通知の箱と見分けられるようにします。 */
.group-sales { border-color: #cfe0cd; background: #f5faf4; }
.group-sales .group-head { background: #e6f1e4; border-bottom-color: #cfe0cd; color: #3d6338; }
.group-sales .block-btn.is-on { border-color: #cfe0cd; }
/* The rest: plain. */
.group-other { border-color: var(--line); background: #f7f6f4; }
.group-other .group-head { background: #efedea; color: var(--ink-soft); }

.blocks ul { list-style: none; margin: 0 0 4px; padding: 0; }
.blocks .group > ul:last-child { margin-bottom: 0; }
.block-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-bottom: 2px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.block-btn:hover { background: #eae8e3; }
.block-btn.is-on { background: var(--card); border-color: var(--line); font-weight: 700; }
.block-btn .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex: none;
}

/* ------------------------------------------------------------------ panel */
.panel {
  min-height: 300px;
  /* Its own scrollbar, rather than taking the whole window with it.
     各メニュー画面 lists every page and every block on every page, which runs
     to several screenfuls; without this the phone on the right scrolled away
     with it, and the phone is the thing being checked against. 66px is where
     the panel starts, 14px the padding under it. */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel h2 { margin: 0 0 4px; font-size: 16px; }
.panel .lead { margin: 0 0 18px; font-size: 12px; color: var(--ink-soft); }

.field { margin-bottom: 16px; }
.field > label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; }
.field .hint { margin: 4px 0 0; font-size: 11px; color: var(--ink-soft); }
.field input[type="text"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.row > .field { flex: 1; min-width: 130px; margin-bottom: 0; }

.swatch { display: flex; align-items: center; gap: 8px; }
.swatch input[type="color"] {
  width: 42px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.choice { display: flex; gap: 8px; flex-wrap: wrap; }
.choice label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.choice input { margin: 0; }

table.versions { width: 100%; border-collapse: collapse; font-size: 13px; }
table.versions th, table.versions td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
table.versions th { font-size: 11px; color: var(--ink-soft); }

/* ------------------------------------------------------------------ phone */
/* 上のボタン列が動かなくなったので、仮想スマホはその下で止まります。 */
.phone-wrap { position: sticky; top: calc(var(--bar-h) + 14px); }
.phone-head {
  display: flex;
  align-items: center;
  /* Wraps rather than squeezing: the row has grown - language, guides, tidy,
     the page count, the room and the two scan buttons - and on a narrower
     window the labels were being crushed into vertical text. */
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
}
.phone-head select {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.phone-head .btn { padding: 5px 9px; font-size: 12px; white-space: nowrap; }
/* The frame keeps a real phone's dimensions and is scaled down to fit, rather
   than being squashed. A shorter frame would quietly answer "do three rows of
   icons fit?" wrongly, which is one of the things this preview is for. */
.phone-scale { transform-origin: top left; }
.phone {
  position: relative;
  width: 391px;
  height: 828px;
  padding: 8px;
  background: #1d1d1b;
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
/* The way home, laid over the phone's screen. It appears only when whatever
   the phone is showing - a PDF, a picture, an outside site - has no home
   button of its own. Part of the editor, never of the published pages. */
.phone-home {
  position: absolute;
  top: 20px;
  left: 50%;
  /* The frame is scaled down to fit the window; this is not, so the way home
     stays the same size to the hand whatever the phone has been shrunk to. */
  transform: translateX(-50%) scale(calc(1 / var(--phone-k, 1)));
  transform-origin: top center;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(29, 29, 27, .92);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  /* A pale ring as well as the shadow, so it is read as a button whether what
     is behind it is a white PDF page or a dark one. */
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 2px rgba(255, 255, 255, .85);
}
.phone-home:hover { background: #23231f; }
.phone-home svg { width: 15px; height: 15px; fill: currentColor; }
.phone iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 22px;
  background: #fff;
}

/* ------------------------------------------------------------------ toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 50;
  max-width: 70vw;
  padding: 11px 18px;
  border-radius: 8px;
  background: rgba(35, 35, 31, .94);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}
.toast.bad { background: #b3261e; }

/* ------------------------------------------------------------------ slides */
.slides { list-style: none; margin: 0; padding: 0; }
.slide {
  display: flex;
  align-items: center;
  /* The icon rows carry a name, a picker and four buttons. Rather than crushing
     them into one line on a narrow panel, let the controls drop below the name. */
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 6px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}
/* A photo taken out of the rotation is kept, not deleted, so it has to look
   switched off rather than missing. */
.slide.is-off { opacity: .5; }
.slide-thumb {
  width: 74px;
  height: 46px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 5px;
  background: var(--ground);
}
.slide-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-video { font-size: 11px; color: var(--ink-soft); }
.slide-meta { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; }
.slide-meta strong {
  font-size: 12px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slide-meta .hint { margin: 0; }
/* The link box that sits under a photograph's filename. */
.slide-meta input[type="text"] {
  width: 100%;
  margin-top: 4px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 12px;
  font-family: inherit;
  box-sizing: border-box;
}
.slide-tools { display: flex; gap: 4px; flex: none; }
.slide-tools .btn { padding: 5px 9px; font-size: 12px; }

.icon-cell { flex: 1 1 170px; min-width: 0; }

/* "Twice as wide" sits between the mark and the buttons. */
.wide-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
}
.wide-toggle input { margin: 0; }

/* The picker: the mark beside its name, both on the field and in the list. */
#sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico-mark {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink, #23231f);
}

.icon-pick { position: relative; }
.icon-choice {
  display: flex;
  align-items: center;
  gap: 5px;
  /* The name is gone, so the button takes the width of the mark and its
     caret instead of stretching across the cell. */
  width: auto;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.icon-choice:hover { border-color: var(--gold); }
.icon-choice-mark { display: flex; }
.icon-choice-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-choice .caret { flex: none; color: #8d897f; font-size: 10px; }

.icon-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 190px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .13);
}
.icon-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 7px;
  border: 0;
  border-radius: 5px;
  background: none;
  font-size: 12px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.icon-opt:hover { background: #f3f1ec; }
.icon-opt.is-current { background: #fdf4e3; font-weight: 600; }

/* --------------------------------------------------------- drag and drop */
.slide.is-draggable { cursor: grab; }
.slide.is-dragging { opacity: .4; }
.slide.is-over { border-color: var(--gold); box-shadow: 0 -2px 0 0 var(--gold) inset; }
.grip {
  flex: none;
  width: 16px;
  color: #b9b6ae;
  font-size: 12px;
  letter-spacing: -2px;
  cursor: grab;
  user-select: none;
}


/* ------------------------------------------------------------- page areas */
.area-row { border-left: 3px solid var(--gold); }
.area-editor {
  list-style: none;
  margin: -2px 0 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 7px 7px;
  background: #fbfaf8;
}
.area-form .field:last-child { margin-bottom: 0; }
.area-form textarea { min-height: 84px; resize: vertical; line-height: 1.5; }

.switch { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input { width: 17px; height: 17px; margin: 0; }

/* The right-click panel over the phone, while words are being typed into. */
.style-pop {
  position: fixed;
  z-index: 90;
  width: 300px;
  max-width: calc(100vw - 16px);
  /* Never taller than the screen. The line settings have grown - formatting,
     symbols, the frame, the link, the PDF - and on a laptop the panel was
     ending up longer than the window, which put its lower half, and the file
     chooser with it, somewhere no pointer could reach. */
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 13px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}
/* The heading is the handle: the panel is moved by it. It stays at the top of
   a panel that scrolls, so the panel can always be picked up and moved. */
.style-pop-title {
  position: sticky;
  top: -12px;
  z-index: 1;
  margin: -12px -13px 8px;
  padding: 8px 13px;
  border-radius: 10px 10px 0 0;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: move;
  user-select: none;
  touch-action: none;
}
/* The photographs panel carries a list, so it is given more room. */
.style-pop.is-wide { width: 360px; }
.style-pop .field { margin-bottom: 8px; }
.style-pop .mark-b { font-weight: 800; width: 34px; }
.style-pop .mark-i { font-style: italic; width: 34px; }
.style-pop input[type="color"] {
  width: 38px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.symbols { display: flex; flex-wrap: wrap; gap: 4px; }
.symbols .btn { width: 30px; padding: 4px 0; text-align: center; font-size: 14px; }
/* Cancel and save, in that order: the safe one first, the one that commits on
   the right where a hand expects it. Kept in view while the panel scrolls, so
   neither is ever below the fold on a short screen. */
.style-pop-foot {
  position: sticky;
  bottom: -10px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 8px -13px -10px;
  padding: 8px 13px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  background: #fff;
}

/* The four-way pad for nudging a block of words a pixel at a time. */
.nudge {
  display: grid;
  grid-template-columns: repeat(3, 34px);
  gap: 4px;
  width: max-content;
  padding: 3px;
  border-radius: 8px;
}
.nudge:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.nudge .btn { padding: 5px 0; text-align: center; }

/* The add-a-tile form: name on the left, mark on the right, button under. */
.add-go { margin-top: 8px; }
.add-go .btn { width: 100%; }

/* A slider between two buttons needs more room than a text box does. */
.row > .field-wide { flex: 1.7; min-width: 200px; }

.zoom { display: flex; align-items: center; gap: 8px; }
.zoom input[type="range"] { flex: 1; min-width: 0; }
.zoom .btn { flex: none; width: 34px; padding: 5px 0; text-align: center; }

/* Home is in the bar for good; it can be moved, not taken out. */
.slide.is-home-tab { background: #faf9f7; border-style: dashed; }


/* ------------------------------------------------- the directory diagram */
/* A drawing of the site: one line per place, with the connectors written in
   the text itself so a line reads the same at any depth. The page lines are
   clickable - the diagram is a way in, not only a report. */
.tree {
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.tree-head {
  margin: 0;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ground);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.tree-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid #f0eeea;
  font-size: 12px;
}
.tree-row:last-child { border-bottom: 0; }
.tree-row.is-open { cursor: pointer; }
.tree-row.is-open:hover { background: #fdf6ec; }
.tree-lead {
  flex: none;
  font-family: Consolas, "Courier New", monospace;
  color: #b5b1a8;
  white-space: pre;
}
.tree-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; }
.tree-name { font-weight: 700; }
.tree-kind {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: #f3ede2;
  font-size: 10px;
  font-weight: 700;
  color: #8a6d33;
}
.tree-detail { font-size: 11px; color: var(--ink-soft); }
.tree-slug {
  flex: none;
  margin-left: auto;
  padding-left: 8px;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
  color: #b5b1a8;
}

/* ------------------------------------------------- the picture folders */
/* Where the pictures are kept, and what is in there. Thumbnails load only as
   they are scrolled to, and only two dozen are put out at first, so opening
   this does not pull the whole library down the wire. */
.folders { display: flex; flex-direction: column; gap: 12px; }
.folder {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.folder-head { display: flex; align-items: baseline; gap: 8px; }
.folder-head strong { font-size: 12px; }
.folder-url {
  display: block;
  margin: 3px 0 0;
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  color: #8a6d33;
  word-break: break-all;
}
.shots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 6px;
  margin: 8px 0;
}
/* Adding files, above the thumbnails of the folder they go into. */
.folder-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 2px;
  padding: 6px 8px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: var(--ground);
}
.folder-tools label { font-weight: 700; }
.folder-tools input[type="file"] { font-size: 11px; max-width: 260px; }

.shot {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--ground);
}
.shot:hover { border-color: var(--gold); }
.shot-open { display: block; text-decoration: none; color: var(--ink-soft); }
/* The cross, and the word that stops it. Both sit on the picture, so both are
   given a solid ground of their own - a white mark on a white photograph is
   no mark at all. */
.shot-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 18, 16, .72);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}
.shot-del:hover { background: #b3261e; }
.shot-del:disabled { opacity: .4; cursor: default; }
/* On a file a page is still using, the cross is there to explain why it
   cannot go, not to invite a press - so it is kept quiet. */
.shot-used + .shot-del { background: rgba(20, 18, 16, .34); }
.shot-used + .shot-del:hover { background: rgba(20, 18, 16, .55); }
.shot-used {
  position: absolute;
  top: 2px;
  left: 2px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(20, 18, 16, .72);
  color: #fff;
  font-size: 9px;
  line-height: 1.4;
}
.shot img { display: block; width: 100%; height: 56px; object-fit: cover; background: #fff; }
.shot-kind {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 11px;
  font-weight: 700;
  background: #efece6;
}
.shot-name {
  display: block;
  padding: 3px 4px;
  font-size: 9px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------- the two QR codes */
/* Beside the phone, one above the other: the screen being worked on, and the
   site as guests have it. The panel in the middle gives up the width for them,
   which it can spare - its controls are a single column. */
/* The frame sits directly under its own row of controls - the language,
   the guides, the page count - rather than being pushed to the far edge
   away from them. The codes stand to its right. */
.phone-row { display: flex; align-items: flex-start; gap: 14px; }

/* --- 仮想スマホの横の部屋番号 ------------------------------------------
   スマホ管理の画面だけに出ます。部屋ごとに四角い枠で囲み、縦に並べます。
   部屋が多いときは、この列だけが自分でスクロールします。 */
.room-strip { display: none; }
body.mode-phone .room-strip {
  display: block;
  width: 150px;
  flex: none;
  max-height: 828px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* 横に2列。左の列を上から下まで使ってから、右の列へ移ります。行数は
   番号の数に合わせて editor.js が決めます。 */
.room-strip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: column;
  gap: 6px;
}
.room-strip-head {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
}
.room-strip-note { margin: 4px 0 0; font-size: 10px; line-height: 1.5; color: var(--ink-soft); }

.room-chip {
  padding: 9px 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  cursor: pointer;
  flex: none;
}
.room-chip:hover { background: #faf9f7; border-color: var(--gold); }
.room-chip.is-on { background: var(--gold); border-color: var(--gold); color: #fff; }
.codes { display: flex; flex-direction: column; gap: 12px; width: 176px; flex: none; }
.code-card {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.code-card h3 { margin: 0 0 8px; font-size: 12px; }
.code-card .hint { margin: 6px 0 0; font-size: 10px; line-height: 1.5; color: var(--ink-soft); }
.code-art { line-height: 0; }
.code-art svg { width: 100%; height: auto; display: block; border-radius: 4px; }
.code-url {
  margin: 6px 0 0;
  font-family: Consolas, "Courier New", monospace;
  font-size: 9px;
  line-height: 1.4;
  color: var(--ink-soft);
  word-break: break-all;
}

/* The two doing-buttons live with the code they belong to: refresh above the
   screen being edited, publish above the site as guests have it. */
.code-go { width: 100%; margin-bottom: 8px; }
.code-card .lead { margin: 0 0 6px; font-size: 13px; font-weight: 700; }

/* ------------------------------------------------------- access figures */
.chart { width: 100%; height: auto; display: block; }
.chart-name { font-size: 11px; fill: var(--ink); }
.chart-value { font-size: 10px; fill: var(--ink-soft); }
.chart-axis { stroke: var(--line); stroke-width: 1; }
.chart-pie { width: 150px; height: 150px; flex: none; }
.pie-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.legend { list-style: none; margin: 0; padding: 0; font-size: 11px; }
.legend li { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Each set of figures in a box of its own, so where one ends and the next
   begins is not left to the reader's eye. */
.stat-card {
  padding: 12px 14px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.stat-card > label {
  margin: -12px -14px 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--ground);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* What a set of figures adds up to, said once, in its own heading. */
.stat-total { float: right; font-weight: 700; color: var(--gold); }

/* A plain list, for the few places a bulleted note is clearer than a paragraph. */
.plain { margin: 0; padding-left: 18px; font-size: 12px; color: var(--ink-soft); }
.plain li { margin-bottom: 4px; }

/* ---------------------------------------------------- rooms and coupons */
.room-list { display: flex; flex-wrap: wrap; gap: 6px; }
.room-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
}
.room-drop {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f0eeea;
  color: var(--ink-soft);
  line-height: 1;
  cursor: pointer;
}
.room-drop:hover { background: #f6dcd9; color: #a4231b; }
/* The printed sheet of codes: only this goes on the paper. */
.qr-sheet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.qr-room {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}
.qr-room svg { width: 100%; height: auto; display: block; }
.qr-room strong { display: block; margin-top: 4px; font-size: 13px; }
.coupon-shot { max-width: 240px; }
.coupon-shot img {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ground);
}
@media print {
  body.printing-qr .bar,
  body.printing-qr .blocks,
  body.printing-qr .phone-wrap,
  body.printing-qr .panel > h2,
  body.printing-qr .panel > .lead,
  body.printing-qr .panel .field { display: none !important; }
  body.printing-qr .panel .qr-sheet { display: grid !important; }
  body.printing-qr .layout { display: block; padding: 0; }
  body.printing-qr .panel { border: 0; padding: 0; }
  body.printing-qr .qr-sheet {
    grid-template-columns: repeat(4, 1fr);
    gap: 8mm;
  }
  body.printing-qr .qr-room { break-inside: avoid; }
}

/* Typing a room number where a printed code would be held up to the phone. */
.room-try { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); }
.room-try input {
  width: 62px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
}

/* A note in red under a screen's own description: the same thing can be done
   more quickly on the phone to the right. */
.lead-note {
  margin: -12px 0 18px;
  font-size: 12px;
  font-weight: 700;
  color: #b3261e;
}

/* ------------------------------------------------- every menu screen */
/* One card per page, shut until it is asked for: 43 pages of words in five
   languages is more than any screen should try to hold at once. */
.menu-pages { display: flex; flex-direction: column; gap: 6px; }
.menu-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.menu-card.is-open { border-color: var(--gold); }
.menu-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.menu-head:hover { background: #fdf6ec; }
.menu-mark { color: var(--gold); font-size: 10px; }
.menu-title { font-size: 12px; }
.menu-badge {
  padding: 1px 5px;
  border-radius: 3px;
  background: #efece6;
  font-size: 9px;
  color: var(--ink-soft);
}
.menu-slug {
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
  color: #8a6d33;
}
.menu-detail { margin-left: auto; font-size: 10px; color: var(--ink-soft); }
.menu-body { padding: 4px 10px 10px; border-top: 1px solid var(--line); }
.menu-areas { display: flex; flex-direction: column; gap: 8px; }
.menu-area {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ground);
}
.menu-area-head { margin: 0 0 6px; font-size: 11px; }
/* The words of one language, boxed so the five never run together. */
.menu-lang-box {
  margin: 6px 0;
  padding: 6px 8px;
  border-left: 3px solid var(--gold);
  background: #fff;
}
.menu-lang { margin: 0 0 4px; font-size: 11px; }
.menu-rows { display: flex; flex-direction: column; gap: 4px; }
.menu-row {
  display: grid;
  grid-template-columns: 142px 1fr;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
}
.menu-row-label {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  word-break: break-all;
}
.menu-row input, .menu-row textarea, .menu-row .menu-fixed { width: 100%; }
.menu-row textarea { resize: vertical; }
/* The explanation belongs under the control, not beside the label. */
.menu-row-hint {
  grid-column: 2;
  font-size: 10px;
  color: var(--ink-soft);
}
.menu-fixed {
  display: block;
  padding: 4px 6px;
  border: 1px dashed var(--line);
  border-radius: 4px;
  background: var(--ground);
  font-size: 11px;
  color: var(--ink-soft);
  word-break: break-all;
}
/* A link's words and its address, kept together. */
.menu-link {
  margin: 4px 0;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
}
/* An address, and the way through to what it points at. The button appears
   only for the site's own screens - there is nothing to open for a PDF or for
   somebody else's website. */
.menu-url { display: flex; align-items: center; gap: 6px; }
.menu-url input { flex: 1; min-width: 0; }
.menu-go {
  flex: none;
  max-width: 150px;
  padding: 4px 8px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Where a followed link has led, and the way back out of it. The same bar is
   put above the screen and below it. */
.menu-back {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ground);
}
.menu-back:last-child { margin: 12px 0 0; }
.menu-back .btn { flex: none; white-space: nowrap; }
.menu-where { font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.menu-target { display: block; }

/* Which line a settings window is about, under its heading. It is the one
   thing that has to be right before anything in the window is pressed. */
.style-pop .pop-about {
  margin: -4px 0 10px;
  padding: 4px 7px;
  border-radius: 5px;
  background: var(--ground);
  font-size: 11px;
  color: var(--ink-soft);
  word-break: break-all;
}

/* -------------------------------------------------- where a link goes */
/* One control, used wherever a link is set: four kinds of destination, and
   only the one chosen showing its own control. Kept tight - a link is one line
   of a block's settings, not the whole of them. */
.lp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.lp-tile {
  padding: 5px 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  font: inherit;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
}
.lp-tile:hover { background: #faf9f7; }
.lp-tile.on { border-color: var(--gold); background: #fff8ee; font-weight: 700; }
.lp-icon { display: block; font-size: 15px; line-height: 1.3; }
.lp-cap {
  display: block;
  font-size: 9px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-body { margin-top: 7px; display: flex; flex-direction: column; gap: 6px; }
.lp-body .hint { margin: 0; }
.lp-body input[type="text"], .lp-body select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
}
/* What is in the library, shown as what it is: a name tells nobody anything,
   the picture does. */
.lp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  max-height: 168px;
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ground);
}
.lp-grid .hint { grid-column: 1 / -1; margin: 4px; }
.lp-cell {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  font: inherit;
}
.lp-cell:hover { border-color: var(--gold); }
.lp-cell.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(222,136,0,.35); }
.lp-cell img { display: block; width: 100%; height: 42px; object-fit: cover; background: #fff; }
.lp-kind {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  background: #efece6;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-soft);
}
.lp-name {
  display: block;
  padding: 2px 3px;
  font-size: 8px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-soft);
}
/* Where it points now: said once, at the top, in the words the operator uses
   for it - the name of the screen, the name of the file. */
.lp-now {
  margin: 0 0 6px;
  padding: 5px 8px;
  border-radius: 5px;
  background: var(--ground);
  font-size: 11px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The settings windows, tightened: their rows are short and there are many of
   them, so the space between them is what makes them long. */
.style-pop .field { margin-bottom: 10px; }
.style-pop .wide-toggle { margin-bottom: 10px; }
.style-pop .choice { margin-bottom: 10px; }
.style-pop .symbols { margin-bottom: 10px; }
/* Taking the block away: last in the window, and quiet until it is wanted. */
.btn.lp-drop { width: 100%; margin-top: 2px; }

/* The tick beside CMS編集項目, and what its screens say while it is off. */
.group-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  float: right;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  cursor: pointer;
}
.group-mode input { margin: 0; }
.later {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 220px;
  padding: 24px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--ground);
  text-align: center;
}
/* The icon list's heading, with the language box sitting at its right-hand
   end. The label keeps the weight it has everywhere else; the box is small,
   because it changes what one list shows and not what the site is. */
.field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.field-head > label { margin: 0; }
/* The same strip is used over a whole panel, where the heading is an h2 and
   carries its own margins. Those would push the language box out of line. */
.field-head > h2 { margin: 0; }
/* The manual on 各メニュー画面: sections, each a heading and its numbered
   steps, and a picture of the screen each step is talking about. */
.manual-head {
  margin: 20px 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--line);
  font-size: 13px;
  font-weight: 700;
}
.manual-head:first-of-type { margin-top: 8px; }
.manual {
  margin: 0 0 18px;
  padding: 0 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.manual-step { padding-left: 2px; }
.manual-step::marker { font-weight: 700; color: var(--ink); }
.manual-text { margin: 0; font-size: 13px; font-weight: 700; }
.manual-step .hint { margin: 2px 0 0; }
.manual-shot {
  margin-top: 6px;
  max-width: 400px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--ground);
  overflow: hidden;
}
.manual-shot img { display: block; width: 100%; height: auto; }
/* Shown in place of a picture that has not been supplied yet. The step still
   reads; only the illustration is missing. */
.manual-todo {
  margin: 0;
  padding: 20px 10px;
  text-align: center;
  font-size: 11px;
  color: var(--ink-soft);
}

/* The icon rows line up along their tops, not their middles.
   `align-items: center` centres each child as a whole, and the name box is
   not a whole: it is a box with a line of small print under it. Centring the
   pair put the box 7px above everything else, which is the step seen in the
   row. Aligning the tops and giving every control the same height puts the
   name, the mark, the tick and the buttons on one line, and lets the small
   print hang below where it belongs. */
.slide-icon { align-items: flex-start; }
.slide-icon > .icon-cell,
.slide-icon > .wide-toggle,
.slide-icon > .slide-tools {
  height: 32px;
  display: flex;
  align-items: center;
}
.slide-icon > .slide-tools { gap: 6px; }
/* Enough weight to beat `.slide-meta input[type="text"]`, which adds a 4px
   top margin for the link box under a photograph's filename. Here the name is
   the first thing in the row, not something tucked under another, and that
   4px was the whole of the remaining step. */
.slide-icon .slide-meta input.icon-name {
  height: 32px;
  box-sizing: border-box;
  margin-top: 0;
}

/* `select.icon-lang`, not `.icon-lang`: `.field select` is a class plus a
   type and outweighs a class on its own, so the plain form lost and the box
   stayed the width of the panel. Same weight, written later, wins. */
select.icon-lang {
  flex: none;
  /* `.field select` sets width:100%, which here means the width of the whole
     panel for a box holding the word 「日本語」. This is a box that changes
     what one list shows, not a field being filled in, so it takes the width
     of its own text. */
  width: auto;
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
}
/* The name, typed in place. Bold like the heading it replaces, so the row
   still reads as "this icon, called this". */
.icon-name {
  width: 100%;
  /* Without this the row breaks apart on a narrow panel. An input carries an
     intrinsic minimum of about twenty characters, and `min-width: auto` will
     not let a flex item shrink below it - so the name held the row open and
     pushed the icon, the tick and the buttons onto lines of their own. The
     name it replaced was plain text, which had no such floor. */
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
}
.icon-name:focus { outline: 2px solid var(--accent, #2f6fb0); outline-offset: 1px; }
.icon-name-under {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.later-lead { margin: 0; font-size: 14px; font-weight: 700; }
.later-note { margin: 0; font-size: 12px; color: var(--ink-soft); }

/* The drawing of the phone's own corner, and the one action under it. Sized in
   ems so it grows with the panel rather than sitting at one fixed size. */
.guide-art {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 4px 0 2px;
}
.guide-frame {
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.guide-brand {
  fill: var(--ink);
  font: 700 21px/1 Georgia, "Times New Roman", serif;
}
.guide-ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}
.guide-ico {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Pink on purpose: this is the mouse, not part of the hotel's bar, and the two
   have to be told apart at a glance. A white edge keeps it readable wherever it
   lands - over a ring, over the name, over nothing. */
.guide-hand {
  fill: #ec4899;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.later-step {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
}

/* A note that answers at once, in the CMS's own voice: white on dark, one
   line, drawn under whatever it belongs to. The browser's own tooltip takes a
   second to appear and is styled by the operating system; this is neither. */
[data-tip] { position: relative; }
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 90;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(35, 35, 31, .92);
  color: #fff;
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}

/* The build indicator takes no room while nothing is building: the row above
   the phone is tight, and an empty box in it was enough to push a button on to
   a second line. */
#preview-note:empty { display: none; }

/* The coupon screen's own refresh, above the figures it refreshes. */
.panel > .btn { margin-bottom: 12px; }

/* Which room a code was made for, under the code itself. Nothing is written
   when there is no room: a plain code needs no caption. */
.code-room {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.code-room:empty { display: none; }

/* アイコン一覧の「押したら電話をかける番号」 */
.icon-tel-row { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; }
.icon-tel-row .icon-tel { width: 100%; max-width: 170px; padding: 3px 6px; font-size: 12px; }

/* --- 部屋管理：部屋ごとのアイコン ------------------------------------- */
.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  margin: 10px 0 18px;
}

.room-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid #d7dee7;
  border-radius: 14px;
  background: #f7f9fb;
  color: #22303f;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.room-card.is-in { background: #fff; border-color: #9fb8d4; box-shadow: 0 2px 8px rgba(23, 49, 79, .10); }
.room-card.is-new { border-color: #e0533f; background: #fff6f3; }

.room-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.room-card-no { font-size: 17px; font-weight: 800; line-height: 1.2; }

/* 部屋番号の横の札。押すと状況の小窓が開きます。色でひと目に分かるよう、
   空室＝青、在室＝赤、未清掃＝オレンジ、清掃中＝黄にしてあります。 */
.room-mark {
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}
.room-mark:hover { filter: brightness(.96); }
.room-mark:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.room-mark-vacant { background: #e7f0fb; border-color: #bfd6ee; color: #2a618f; }
.room-mark-stay   { background: #fde9e7; border-color: #f0c2bc; color: #b03a2c; }
.room-mark-dirty  { background: #fdeedd; border-color: #f0d2ad; color: #a05a13; }
.room-mark-clean  { background: #fcf5d4; border-color: #e8d98c; color: #85700d; }

/* 状況の小窓は、ボタンが三つだけの小さなものです。 */
.room-pop-mark { max-width: 360px; }
.mark-row { flex-wrap: wrap; gap: 8px; }
.mark-row .mark-go { min-width: 140px; }
/* 部屋番号の下の、清掃を進めた方の名前。 */
.room-card-by { font-size: 11px; color: #6b7f95; }
.room-card-state { font-size: 11px; font-weight: 700; color: #6b7f95; }
.room-card-what {
  font-size: 12px;
  line-height: 1.35;
  color: #17314f;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.room-card-yen { font-size: 13px; font-weight: 800; }
.room-card-sum { font-size: 11px; color: #6b7f95; }
.room-card-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e0533f;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}

.room-detail { border: 1px solid #d7dee7; border-radius: 14px; padding: 12px; background: #fff; }
.room-detail-head h3 { margin: 0 0 6px; font-size: 16px; }
.versions tr.is-off td { color: #9aa7b4; text-decoration: line-through; }

/* 品目は横に並べます。画面が狭ければ勝手に1列に戻るので、どの幅でも読めます。
   縦に積むと10品で何画面分にもなり、上下に探しに行くことになるためです。 */
.order-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  align-items: start;
}
.order-items .order-item { margin-bottom: 0; }
.order-item { border: 1px solid #e3e8ee; border-radius: 12px; padding: 12px; background: #fbfcfd; }

/* --- 画面の切り替え（管理メニュー／部屋状況） --------------------------
   スタッフが触るのは「部屋状況」だけです。そちらでは左に宿泊客通知サービス
   だけを出し、中央を部屋でいっぱいに使います（スマホの絵は出しません）。 */
/* 上の三つのボタンは、いちばん左から始めます（前はここに「ページ管理」と
   書いてありました）。 */
.bar-modes { display: flex; gap: 6px; }

.mode-btn {
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.mode-btn:hover { background: #faf9f7; }
.mode-btn.is-on { background: var(--gold); border-color: var(--gold); color: #fff; }

/* --- どの箱をどの画面に出すか -----------------------------------------
 *
 * 箱はいったん全部しまい、いまの画面のものだけを出します。こう書いておくと、
 * 箱を増やしても一行足すだけで済み、片方に出しっぱなしになる事故が起きません。
 * 管理メニューには印を付けていないので（body に class が付かない画面）、
 * ほかの三つでない、という書き方にしてあります。 */
.blocks .group { display: none; }

body.mode-rooms .group-front,
body.mode-basic .group-basic,
body.mode-phone .group-phone,
body.mode-order .group-order,
body.mode-sales .group-sales,
body.mode-dash .group-dash,
body.mode-rooms .group-daily { display: block; }

/* 仮想スマホ（と、その上のボタン・右のQRコード）は、スマホに出るものを
   直す画面だけに置きます。部屋番号やメール通知、売上の画面では見るものが
   ないので、そのぶんを表に回して、QRコードが横に並ぶようにします。 */
body.mode-basic .phone-wrap,
body.mode-order .phone-wrap,
body.mode-sales .phone-wrap,
body.mode-dash .phone-wrap,
body.mode-rooms .phone-wrap { display: none; }

body.mode-basic .layout,
body.mode-order .layout,
body.mode-sales .layout,
body.mode-dash .layout,
body.mode-rooms .layout { grid-template-columns: 190px minmax(320px, 1fr); }
body.mode-basic .panel,
body.mode-order .panel,
body.mode-sales .panel,
body.mode-dash .panel,
body.mode-rooms .panel { max-width: none; }

/* ダッシュボードは画面が広いので、四つの図を二つずつ並べます。図は幅に合わせて
   大きくなる作りなので、一列のままだと文字だけが大きくなってしまいます。 */
body.mode-dash .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 0 16px;
  align-items: start;
}

/* 基本設定では表が広く使えるので、QRコードを大きめに、横いっぱいに並べます。 */
body.mode-basic .qr-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* 入れる欄まで画面いっぱいに伸ばすと、部屋番号3文字のために横長の箱ができて
   かえって読みにくいので、欄だけは手ごろな幅で止めます。 */
body.mode-basic .field input[type="text"],
body.mode-basic .field input[type="number"],
body.mode-basic .field input[type="email"],
body.mode-basic .field select,
body.mode-basic .field textarea { max-width: 420px; }

/* オーダー管理も同じ考えですが、品目のカードの中は、カードの幅いっぱいで
   使います（外側の欄だけを止めます）。 */
body.mode-order .panel > .field input[type="text"],
body.mode-order .panel > .field select,
body.mode-order .panel > .field textarea { max-width: 560px; }
body.mode-order .order-item input[type="text"],
body.mode-order .order-item input[type="file"] { max-width: none; }

/* 横に並ぶ欄（消費税など）が画面の端と端に離れてしまわないよう、
   ひとまとまりの幅で止めます。長い説明文も、読める幅で折り返します。 */
body.mode-order .panel > .field > .row { max-width: 700px; }
body.mode-basic .panel .lead,
body.mode-order .panel .lead,
body.mode-sales .panel .lead,
body.mode-dash .panel .lead,
body.mode-basic .panel > .field > .hint,
body.mode-order .panel > .field > .hint { max-width: 900px; }
body.mode-rooms .room-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }

/* --- 部屋のQRコード一覧 ------------------------------------------------ */
.qr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 6px;
}

.qr-card {
  padding: 10px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  text-align: center;
}
.qr-card.is-common { background: #fffaf0; border-color: #e7c988; }

.qr-art { display: block; width: 100%; }
.qr-art svg { width: 100%; height: auto; display: block; border-radius: 4px; }

.qr-no { display: block; margin: 6px 0 6px; font-size: 15px; }
.qr-tools { display: flex; gap: 6px; justify-content: center; }
.qr-tools .btn { padding: 4px 10px; font-size: 12px; }

/* 印刷の前の小さな窓 */
.qr-ask-back {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 24, 30, .42);
}
.qr-ask {
  width: min(420px, calc(100vw - 32px));
  padding: 18px 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(12, 32, 56, .3);
}
.qr-ask h3 { margin: 0 0 10px; font-size: 16px; }
.qr-ask .choice { margin-top: 14px; }

/* --- 部屋の操作の小窓（部屋状況で部屋を押したとき） -------------------- */
.room-pop-back {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 24, 30, .45);
}

.room-pop {
  width: min(680px, calc(100vw - 40px));
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 50px rgba(12, 32, 56, .35);
  overflow: hidden;
}

.room-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #faf9f7;
}
.room-pop-head h3 { margin: 0; font-size: 18px; }

.room-pop-shut {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.room-pop-shut:hover { background: #f1efec; }

.room-pop-body {
  padding: 16px 18px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.room-pop-body .field { margin-bottom: 14px; }
.room-pop-body .field:last-child { margin-bottom: 0; }

/* もう一方の記録（公開／TEST）に注文が入っているときの知らせ。画面の
   切り替えボタンの横に小さく出します。中央の表は部屋のために空けます。 */
.bar-cross[hidden] { display: none; }
.bar-cross {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  padding: 4px 6px 4px 10px;
  border: 1px solid #e6d3ae;
  border-radius: 999px;
  background: #fdf8f0;
  font-size: 12px;
  white-space: nowrap;
}
.bar-cross .btn { flex: none; padding: 3px 10px; font-size: 12px; border-radius: 999px; }
.bar-cross span { overflow: hidden; text-overflow: ellipsis; }

/* 上の一列が折り返すと、ボタンの文字が二段になって読みにくくなります。
   ボタンは縮めず、縮んでよいのは知らせと、右のページ数だけにします。 */
.bar-modes { flex: none; }
.mode-btn { white-space: nowrap; }
.bar .btn { white-space: nowrap; flex: none; }
.saved { white-space: nowrap; flex: none; }
.bar-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 部屋状況では、ページ数と言語の数はフロントに用がないので隠します。 */
body.mode-rooms .bar-sub { display: none; }

/* --- 売上管理：日計・月計・年計 ---------------------------------------- */
.sum-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 4px 0 16px;
}

.sum-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfaf8;
}
.sum-card p { margin: 0; }
.sum-head { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.sum-when { font-size: 11px; color: var(--ink-soft); }
.sum-yen { margin-top: 2px !important; font-size: 22px; font-weight: 800; letter-spacing: .01em; }
.sum-tax { font-size: 11px; color: var(--ink-soft); }
.sum-rows { margin-top: 4px !important; font-size: 12px; }

/* 売上管理のいちばん上は一枚だけなので、数字をもっと大きく見せます。 */
.sum-card.is-big { padding: 16px 18px; background: #fffaf0; border-color: #e7c988; }
.sum-card.is-big .sum-head { font-size: 13px; }
.sum-card.is-big .sum-yen { font-size: 34px; }
.sum-card.is-big .sum-tax { font-size: 12px; }
.sum-card.is-big .sum-rows { font-size: 13px; }

tr.sum-foot td { font-weight: 700; background: #faf9f7; }

/* --- 部屋状況：フロントと清掃員の連絡 ----------------------------------
   左から 送り先・送信・受信 の三つを横に並べます。縦に積むと背が高くなり、
   肝心の部屋のカードが画面の下へ追いやられてしまうためです。 */
.talk-box-pc {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 4px 0 14px;
  padding: 10px 12px;
  border: 1px solid #cfe0cd;
  border-radius: 12px;
  background: #f7fbf6;
}
.talk-col { min-width: 0; }
.talk-col-to { flex: none; }
.talk-col-say { flex: 1 1 320px; min-width: 260px; }
.talk-col-got { flex: 1 1 420px; }
.talk-head-pc {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

/* 送り先は縦一列。人数が増えたら2列（行数は editor.js が決めます）。 */
.talk-to {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr;
  gap: 4px;
}
.talk-to.is-two { grid-template-columns: 1fr 1fr; }
.talk-to .btn { padding: 4px 10px; font-size: 12px; white-space: nowrap; }

.talk-row-pc { display: flex; align-items: center; gap: 6px; }

.talk-mic {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: #3b4a5a;
  cursor: pointer;
}
.talk-mic svg { width: 21px; height: 21px; display: block; margin: 0 auto; fill: currentColor; }
.talk-mic:hover { background: #faf9f7; }
.talk-mic.is-live { background: var(--gold); border-color: var(--gold); color: #fff; animation: talkbeat 1.2s ease-in-out infinite; }
@keyframes talkbeat { 0%, 100% { box-shadow: 0 0 0 0 rgba(198, 154, 62, .5); }
                      50% { box-shadow: 0 0 0 8px rgba(198, 154, 62, 0); } }

.talk-say {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 14px;
}
body.mode-rooms .talk-say { max-width: none; }
.talk-ok-pc { flex: none; height: 38px; min-width: 54px; padding: 0 14px; }
.talk-why-pc { margin: 6px 0 0 !important; color: #b03a2c; }

/* 送信・受信とも一行ずつ。長い連絡はそのまま二行、三行と増えます。 */
.talk-col-say .talk-list-pc { margin-top: 6px; }
.talk-list-pc {
  max-height: 96px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.talk-one-pc {
  position: relative;
  margin-bottom: 3px;
  padding: 3px 24px 3px 7px;
  border-radius: 6px;
  background: #f1f5f9;
  font-size: 12.5px;
  line-height: 1.5;
}
.talk-one-pc:last-child { margin-bottom: 0; }
/* フロントが送ったものは色を変えて、清掃員からのものと見分けます。 */
.talk-one-pc.is-front { background: #fdf6e8; }
.talk-who-pc { font-weight: 700; color: var(--ink-soft); }
.talk-text-pc { word-break: break-word; }

.talk-drop-pc {
  position: absolute;
  top: 1px;
  right: 2px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}
.talk-drop-pc:hover { background: rgba(0, 0, 0, .06); }

/* 画面が狭いときは、素直に縦へ戻します。 */
@media (max-width: 1100px) {
  .talk-box-pc { flex-wrap: wrap; }
  .talk-col-got { flex-basis: 100%; }
}

/* --- 部屋状況：左のいちばん上の小箱 --------------------------------------
   記録（公開／TEST）と、音の入り切り。一日に一度触るかどうかのものなので、
   中央の表から外してここに置いています。説明は付けません（ボタンに
   マウスを当てると、どちらの記録かが出ます）。 */
.group-front { border-color: #cbbf9d; background: #fdfaf3; }
.group-front .group-head { background: #f6e8cf; border-bottom-color: #e6d3ae; color: #7d6127; }

.side-pick { display: flex; gap: 6px; margin: 2px 0 8px; }
.side-pick .btn { flex: 1; padding: 5px 0; font-size: 12px; }

.side-sound {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  cursor: pointer;
}
.side-sound input { margin: 0; }

/* 左の箱に出す「滞在中 3 室 / 未対応 3 室」。未対応があるときは赤く点滅
   させます。中央を見ていなくても、目の端で気づけるようにするためです。
   （動きが苦手な方の設定では、点滅せず赤いままにします。） */
.side-count {
  margin: 2px 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}
.side-count.is-waiting { color: #d62f1c; animation: waitblink 1.1s step-end infinite; }
@keyframes waitblink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .side-count.is-waiting { animation: none; }
}