html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

*::-webkit-scrollbar {
    display: none;
}

* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}
img {
    vertical-align: top;
    font-size: 0;
    line-height: 0;
}
input,
select {
    vertical-align: middle;
}
/* 🚨 フォーム部品はファイル先頭の要素一覧に入っていないので box-sizing が効かない。
   width:100% + padding + border を当てると必ず親からはみ出す。
   （2026-08-29 ぽかぽか日記のお問い合わせフォームで Ryuichi が指摘） */
input,
textarea,
button,
select {
    box-sizing: border-box;
    font-family: inherit;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    text-decoration: none;
    word-break: break-all;
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
/* font setting */
body {
    width: 100%;
    color: #010101;
    font-weight: 500;
    font-style: normal;
    font-optical-sizing: auto;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    line-height: 1;
    overflow-x: clip;
}
html {
    overflow-x: clip;
    background: #fff;
}
/* ▼共通：改行させるための基本形 */
.lw-br {
  display: inline-block;
  width: 100%;
  height: 0;
}

:root {
  --font-jp: "Yu Gothic", "Meiryo", sans-serif;
  --font-en: "Segoe UI", sans-serif;
  --color-ink: #172438;
  --color-muted: #637080;
  --color-accent: #087b89;
  --color-border: #d0d8e2;
  --color-slate: #53687a;
  --color-border-field: #b8cad7;
  --color-bar-line: #dce2e9;
  --color-pale: #f5f9fa;
  --color-gray-pale: #f0f4f6;
  --color-gray-soft: #edf0f3;
  --color-inactive-bg: #f2f4f6;
  --color-focus: #69b9c5;
  --color-pressed-bg: #e4f4f5;
  --color-pressed-border: #43a8b4;
  --color-active-bg: #e4f2f4;
  --color-selected-bg: #e6f3f4;
  --color-confirmed: #066776;
  --color-confirmed-bg: #e0f3f0;
  --color-pending-bg: #fff1d2;
  --color-info: #136d79;
  --color-info-bg: #e6f2f3;
  --color-info-line: #b9dde1;
  --color-warning-bg: #fff8e7;
  --color-warning-border: #e7c77c;
  --color-error: #b32636;
  --color-saturday: #1d5fa8;
  --color-saturday-bg: #eaf2fc;
  --color-sunday-bg: #fdeeef;
  --color-disabled-ink: #8a95a1;
  --color-pattern-alert: #a82a3d;
  --color-service-alert: #9b3542;
  --color-amber-bg: #fff0cd;
  --color-past-bg: #fffaf0;
  --color-past-border: #e8b663;
  --color-past-ink: #87540b;
  --color-inspector-bg: #f7fcfd;
  --color-inspector-border: #c4e6ee;
  --color-seat-reserved: #e6c58d;
  --color-seat-unresolved: #b6ad9d;
  --color-seat-disabled: #c2c5c6;
  --color-seat-disabled-line: #82898c;
  --color-backdrop: #13233366;
  --color-backdrop-ink: #17243866;
  --color-backdrop-ink-light: #17243855;
  --color-offline-bg: #fff3cd;
  --color-offline-border: #e9c46a;
  --color-offline-ink: #6b4500;
  --color-wait-ink: #8a5300;
  --color-wait-bg: #fff4e0;
  --color-wait-line: #e8b45a;
  --color-print-ink: #1f2933;
  --color-print-muted: #52606d;
  --color-print-line: #cfd6dc;
  --color-print-rule: #9aa5b1;
  --color-print-head-bg: #eef2f1;
  --color-print-done: #7b8794;
  --color-print-memo: #3e4c59;
}
body {
  color: var(--color-ink);
  background: #fff;
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.5em;
}
button, input, select {
  font: inherit;
}
button {
  cursor: pointer;
  &:disabled {
    color: #9ca5b0;
    cursor: default;
    opacity: .65;
  }
}
[hidden] {
  display: none !important;
}
.btn_ptn_1 {
  padding: 12px 18px;
  min-height: 48px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--color-ink);
  background: #fff;
  font-weight: 700;
  line-height: 1.4em;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  @media (hover: hover) {
    &:hover:not(:disabled) {
      filter: brightness(.96);
    }
  }
  &.primary {
    color: #fff;
    background: var(--color-accent);
    border-color: var(--color-accent);
  }
  &.danger {
    color: #d72d45;
    border-color: #e15060;
  }
  &[aria-pressed="true"] {
    color: #067987;
    background: var(--color-pressed-bg);
    border-color: var(--color-pressed-border);
  }
  &:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.sec_sekiraku_head {
  --color-current: #086a77;
  background: #fff;
  border-bottom: 1px solid var(--color-bar-line);
  .wrap {
    padding: 0 28px;
    min-height: 68px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    @media (max-width: 900px) {
      flex-wrap: wrap;
      gap: 12px;
    }
    @media (max-width: 600px) {
      padding: 12px 16px;
    }
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 28px;
    h1 {
      font-family: var(--font-en);
      font-size: 30px;
      font-weight: 600;
      line-height: 1.3em;
      letter-spacing: .16em;
    }
    span {
      padding-left: 28px;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: .06em;
      border-left: 1px solid var(--color-border);
      @media (max-width: 600px) {
        padding-left: 14px;
        font-size: 18px;
      }
    }
  }
  nav {
    display: flex;
    gap: 28px;
    button {
      padding: 21px 10px 15px;
      background: transparent;
      font-size: 20px;
      font-weight: 700;
      border: 0;
      border-bottom: 4px solid transparent;
      @media (max-width: 900px) {
        padding: 14px 8px 10px;
        font-size: 18px;
      }
      &[aria-current="page"] {
        color: var(--color-current);
        border-color: var(--color-current);
      }
    }
  }
}

.sec_sekiraku_tools {
  .wrap {
    padding: 18px 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    @media (max-width: 900px) {
      padding: 16px;
      gap: 12px;
    }
  }
  .floors {
    max-width: 100%;
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    overflow: hidden;
    overflow-x: auto;
    button {
      padding: 14px 32px;
      min-height: 54px;
      flex: 0 0 auto;
      background: #fff;
      font-size: 20px;
      font-weight: 700;
      white-space: nowrap;
      border: 0;
      &[aria-pressed="true"] {
        color: #fff;
        background: var(--color-accent);
      }
    }
  }
  .mode {
    padding: 14px 20px;
    color: var(--color-info);
    background: var(--color-info-bg);
    font-size: 20px;
    font-weight: 700;
    border-radius: 7px;
  }
  .save-info {
    margin-left: auto;
    display: grid;
    gap: 2px;
    color: var(--color-muted);
    font-size: 14px;
    small {
      font-size: 12px;
    }
    [data-state="保存失敗"] {
      color: var(--color-error);
    }
  }
  .actions {
    display: flex;
    gap: 12px;
    @media (max-width: 1200px) {
      gap: 8px;
    }
    @media (max-width: 600px) {
      width: 100%;
      flex-wrap: wrap;
    }
    .btn_ptn_1 {
      @media (max-width: 600px) {
        padding: 10px 12px;
        flex: 1;
        font-size: 14px;
        white-space: nowrap;
      }
    }
  }
  .floor-controls {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  #floor-select {
    padding: 10px 12px;
    max-width: 100%;
    min-height: 44px;
    color: var(--color-ink);
    background: #fff;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
  }
  #manage-floors {
    padding: 8px 12px;
    min-height: 44px;
    font-size: 14px;
    white-space: nowrap;
  }
}

.sec_sekiraku_notice {
  .wrap {
    padding: 0 28px;
  }
  #message {
    margin-bottom: 12px;
    padding: 14px 18px;
    color: #9b3527;
    background: #fff0db;
    border: 1px solid #f4cd97;
    border-radius: 7px;
  }
  .past {
    margin-bottom: 14px;
    padding: 12px 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: #71500d;
    background: #fff3d5;
    border: 1px solid #eac86d;
    border-radius: 7px;
  }
}
#booking-context {
  margin-top: 12px;
  padding: 12px 16px;
  color: var(--color-info);
  background: var(--color-info-bg);
  border-radius: 7px;
}

.sec_sekiraku_logout {
  padding: 24px;
  box-sizing: border-box;
  width: calc(100% - 24px);
  max-width: 480px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  &::backdrop {
    background: var(--color-backdrop);
  }
  .head {
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    h2 {
      font-size: 20px;
      font-weight: 700;
    }
  }
  .hint {
    line-height: 1.8em;
  }
  .message {
    margin-top: 12px;
    color: var(--color-error);
    &:empty {
      display: none;
    }
  }
  .actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}

.sec_sekiraku_editor {
  --color-handle: #0797a6;
  &.viewing {
    .wrap {
      grid-template-columns: minmax(0, 1fr);
    }
    .surface {
      min-height: 320px;
      max-height: calc(100dvh - 250px);
    }
  }
  .wrap {
    padding: 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 28%);
    align-items: start;
    gap: 18px;
    @media (max-width: 1000px) {
      padding: 0 16px;
      grid-template-columns: minmax(0, 1fr) minmax(270px, 30%);
      gap: 12px;
    }
    @media (max-width: 760px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .main {
    min-width: 0;
    background: var(--color-pale);
  }
  .canvas-bar {
    padding: 8px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    .zones {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 700;
      select {
        padding: 8px;
        min-height: 44px;
        color: var(--color-ink);
        background: #fff;
        border: 1px solid var(--color-border);
        border-radius: 6px;
      }
    }
    .tools {
      display: flex;
      gap: 6px;
      button {
        padding: 8px 14px;
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--color-ink);
        background: #fff;
        font-size: 14px;
        font-weight: 700;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        &[aria-pressed="true"] {
          color: var(--color-accent);
          background: var(--color-pressed-bg);
          border-color: var(--color-pressed-border);
        }
        svg {
          width: 20px;
          height: 20px;
          fill: currentColor;
        }
        &[data-canvas-tool="hand"] svg {
          fill: none;
          stroke: currentColor;
          stroke-width: 1.6;
          stroke-linejoin: round;
        }
      }
    }
  }
  .palette {
    padding: 8px 4px 12px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 9px;
    @media (max-width: 1000px) {
      gap: 5px;
    }
    @media (max-width: 500px) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    button {
      padding: 8px 5px 7px;
      min-height: 91px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      background: #fff;
      font-size: 16px;
      font-weight: 700;
      border: 1px solid #d9e2ea;
      border-radius: 7px;
      @media (max-width: 1200px) {
        min-height: 78px;
        font-size: 14px;
      }
      @media (hover: hover) {
        &:hover:not(:disabled) {
          background: #f3fbfc;
          border-color: #389aa6;
        }
      }
      svg {
        width: 100%;
        max-width: 84px;
        height: 42px;
        fill: #d9ba8f;
        stroke: #79694f;
        stroke-width: 1.6;
        .chair {
          fill: #f7f7f6;
          stroke: #666d71;
        }
        .wall {
          fill: #91948f;
          stroke: #5c6768;
        }
        .zone {
          fill: #edf5f4;
          stroke: #27828d;
          stroke-dasharray: 5 4;
        }
      }
    }
  }
  .surface {
    width: 100%;
    height: auto;
    aspect-ratio: 1000 / 820;
    display: block;
    touch-action: none;
    user-select: none;
    overflow: hidden;
    cursor: default;
    &[data-tool="hand"] {
      cursor: grab;
      &.dragging {
        cursor: grabbing;
      }
    }
    &[data-tool="select"].dragging {
      cursor: grabbing;
    }
    &:focus-visible {
      outline: 2px solid #0c8998;
      outline-offset: -2px;
    }
    .tag {
      fill: #142133;
      font-family: var(--font-jp);
      font-size: 21px;
      font-weight: 700;
      pointer-events: none;
    }
    .zone-label {
      fill: #636e79;
      font-family: var(--font-jp);
      font-size: 22px;
      font-weight: 600;
    }
    [data-object-id] {
      cursor: inherit;
    }
    [data-handle="resize"] {
      cursor: nwse-resize;
      &[data-corner="1"], &[data-corner="3"] {
        cursor: nesw-resize;
      }
    }
    [data-handle="rotate"] {
      cursor: crosshair;
    }
    .handle {
      fill: var(--color-handle);
      stroke: #fff;
      stroke-width: 2;
      cursor: inherit;
    }
    .rotation {
      fill: #fff;
      stroke: var(--color-handle);
      stroke-width: 3;
      cursor: crosshair;
    }
  }
  .map-tools {
    padding: 14px 12px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    p {
      color: #6a7582;
      font-size: 13px;
    }
  }
  .zoom {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    @media (max-width: 600px) {
      margin-left: 0;
    }
    button {
      padding: 8px 16px;
      min-height: 48px;
      background: #fff;
      font-size: 22px;
      font-weight: 700;
      border: 1px solid var(--color-border);
      border-radius: 7px;
    }
    output {
      font-family: var(--font-en);
      font-size: 14px;
      font-variant-numeric: tabular-nums;
    }
  }
  .sub {
    padding: 22px 24px 26px;
    min-width: 0;
    background: var(--color-inspector-bg);
    border: 1px solid var(--color-inspector-border);
    border-radius: 6px;
    @media (max-width: 1200px) {
      padding: 20px 18px;
    }
    .ttl {
      margin-bottom: 22px;
      font-size: 24px;
      font-weight: 700;
      line-height: 1.4em;
    }
    .row {
      margin-bottom: 20px;
      display: grid;
      grid-template-columns: 62px minmax(0, 1fr);
      align-items: center;
      gap: 18px;
      @media (max-width: 1200px) {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 12px;
      }
      span {
        font-size: 18px;
        font-weight: 600;
        @media (max-width: 1200px) {
          font-size: 16px;
        }
      }
      input, select {
        padding: 11px 14px;
        width: 100%;
        min-width: 0;
        min-height: 52px;
        color: var(--color-ink);
        background: #fff;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.4em;
        border: 1px solid #bfcbd8;
        border-radius: 6px;
        @media (max-width: 1200px) {
          padding: 10px;
          font-size: 18px;
        }
      }
      input[type="checkbox"] {
        width: 24px;
        min-height: 24px;
      }
      input:disabled, select:disabled {
        color: #778390;
        background: var(--color-gray-pale);
      }
    }
    .hint {
      margin: 22px 0;
      color: #617082;
      font-size: 15px;
      font-weight: 600;
    }
    .actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      .btn_ptn_1 {
        padding: 14px 8px;
        min-height: 60px;
        font-size: 18px;
      }
    }
    h3 {
      margin: 24px 0 20px;
      padding-top: 20px;
      font-size: 22px;
      font-weight: 700;
      border-top: 1px solid var(--color-border);
    }
  }
  .catalog {
    display: none;
  }
}
#service-legend {
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--color-ink);
  background: #fff;
  font-size: 13px;
  .key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    &::before {
      width: 20px;
      height: 20px;
      background: var(--seat-color, #fcfcfb);
      content: '';
      border: 1px solid #64676a;
      border-radius: 5px;
    }
  }
  .selected {
    --seat-color: #078c9b;
  }
  .occupied {
    --seat-color: #6198e8;
  }
  .reserved {
    --seat-color: var(--color-seat-reserved);
  }
  .unresolved {
    --seat-color: var(--color-seat-unresolved);
  }
  #service-target-time {
    margin-left: auto;
  }
  .time-disabled {
    --seat-color: repeating-linear-gradient(135deg, var(--color-seat-disabled) 0 4px, var(--color-seat-disabled-line) 4px 5px);
  }
}

.sec_history_ptn_1 {
  margin: auto;
  padding: 0;
  width: calc(100% - 36px);
  max-width: 850px;
  max-height: 86dvh;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid #c8d4df;
  border-radius: 12px;
  box-shadow: 0 20px 70px #17243840;
  overflow: auto;
  &::backdrop {
    background: #13233470;
  }
  .wrap {
    padding: 24px;
  }
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    h2 {
      font-size: 24px;
      font-weight: 700;
    }
  }
  .hint {
    margin: 16px 0;
    color: var(--color-muted);
    font-size: 15px;
  }
  .query {
    margin: 20px 0;
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
    background: #f4f9fa;
    border-radius: 8px;
    label {
      display: grid;
      gap: 5px;
      font-size: 14px;
    }
    input {
      padding: 10px;
      min-height: 45px;
      background: #fff;
      border: 1px solid var(--color-border);
      border-radius: 6px;
    }
  }
  [data-history-message] {
    margin: 12px 0;
    color: #9a5c07;
  }
  ol {
    list-style: none;
  }
  .version {
    padding: 14px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid #e1e7ed;
    strong {
      font-weight: 700;
    }
    p {
      margin-top: 5px;
      color: var(--color-muted);
      font-size: 14px;
    }
  }
}

.sec_sekiraku_bookings {
  padding-bottom: 20px;
  background: var(--color-pale);
  .wrap {
    margin: 0 auto;
    padding: 14px 16px;
    max-width: 1240px;
    @media (max-width: 600px) {
      padding: 12px 8px;
    }
  }
  .heading {
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    h2 {
      font-size: 24px;
      font-weight: 700;
      line-height: 1.4em;
    }
    button {
      padding: 10px 14px;
      min-height: 44px;
      color: #fff;
      background: var(--color-accent);
      font-size: 17px;
      font-weight: 700;
      border: 0;
      border-radius: 9px;
      &:disabled {
        opacity: 1;
        cursor: default;
      }
      &[data-offline]:disabled {
        opacity: .4;
      }
    }
    .print {
      margin-left: auto;
      padding: 9px 17px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--color-accent);
      background: #fff;
      font-size: 16px;
      border: 1px solid var(--color-accent);
      .icon {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linejoin: round;
      }
    }
  }
  .dates {
    display: grid;
    grid-template-columns: 36px 1fr auto 36px;
    align-items: center;
    gap: 9px;
    @media (max-width: 370px) {
      gap: 5px;
    }
    strong {
      font-size: 20px;
      font-weight: 700;
      text-align: center;
      white-space: nowrap;
      @media (max-width: 370px) {
        font-size: 18px;
      }
    }
    button {
      padding: 6px;
      min-height: 36px;
      color: var(--color-ink);
      background: #fff;
      font-size: 28px;
      line-height: 1em;
      border: 1px solid var(--color-border);
      border-radius: 7px;
    }
    .today {
      padding: 6px 10px;
      color: var(--color-accent);
      font-size: 16px;
      font-weight: 700;
      @media (max-width: 370px) {
        padding: 6px;
      }
    }
  }
  .summary {
    margin: 4px 0 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 20px;
    color: var(--color-muted);
    font-size: 15px;
    @media (max-width: 600px) {
      font-size: 12px;
    }
  }
  .day_space {
    margin-bottom: 12px;
    padding: 12px 14px 14px;
    display: grid;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    .head {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 4px 14px;
      h4 {
        font-size: 16px;
        font-weight: 700;
      }
      p {
        color: var(--color-muted);
        font-size: 13px;
        line-height: 1.5em;
      }
    }
    .slots {
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
      gap: 6px;
      list-style: none;
    }
    .space {
      padding: 6px 2px;
      width: 100%;
      min-height: 56px;
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 2px;
      color: var(--color-ink);
      background: #fff;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.3em;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      strong {
        color: var(--color-accent);
        font-size: 14px;
      }
      &[data-level="few"] {
        background: var(--color-amber-bg);
        border-color: var(--color-warning-border);
        strong {
          color: var(--color-past-ink);
        }
      }
      &[data-level="none"] {
        color: #8a95a1;
        background: var(--color-gray-soft);
        strong {
          color: #8a95a1;
        }
      }
      &:focus-visible {
        outline: 3px solid var(--color-focus);
        outline-offset: 2px;
      }
    }
  }
  .search {
    margin-bottom: 12px;
    padding: 0 13px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-muted);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    @media (max-width: 600px) {
      padding: 0 6px;
      gap: 6px;
    }
    &:focus-within {
      outline: 2px solid var(--color-focus);
      outline-offset: 2px;
    }
    svg {
      width: 23px;
      height: 23px;
      flex: 0 0 auto;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      @media (max-width: 600px) {
        width: 16px;
        height: 16px;
      }
    }
    input {
      padding: 10px 0;
      width: 100%;
      min-width: 0;
      color: var(--color-ink);
      background: transparent;
      font-size: 16px;
      border: 0;
      outline: none;
      @media (max-width: 600px) {
        font-size: 13px;
      }
    }
  }
  .filters {
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    @media (max-width: 600px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4px;
    }
    button {
      padding: 9px 5px;
      min-height: 40px;
      color: var(--color-muted);
      background: transparent;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.3em;
      border: 1px solid var(--color-border);
      border-radius: 8px;
      @media (max-width: 600px) {
        min-height: 44px;
        font-size: 12px;
      }
      &[aria-pressed="true"] {
        color: #fff;
        background: var(--color-accent);
        border-color: var(--color-accent);
      }
    }
  }
  .cards {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    list-style: none;
  }
  .card {
    padding: 10px 12px 8px;
    width: 100%;
    display: grid;
    gap: 8px;
    color: var(--color-ink);
    background: #fff;
    text-align: left;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    @media (max-width: 600px) {
      padding: 10px 8px;
    }
    @media (hover: hover) {
      &:hover {
        border-color: var(--color-focus);
      }
    }
    &:focus-visible {
      outline: 2px solid var(--color-focus);
      outline-offset: 2px;
    }
    &.cancelled {
      background: var(--color-inactive-bg);
    }
    &.is_web_pending {
      padding: 9px 11px 7px;
      border: 2px solid var(--color-warning-border);
      @media (max-width: 600px) {
        padding: 9px 7px;
      }
    }
    .head {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto auto;
      align-items: center;
      gap: 8px;
      @media (max-width: 600px) {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
      }
      > .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      > .badge,
      > .tags {
        @media (max-width: 600px) {
          justify-self: start;
          grid-column: 1;
          grid-row: 3;
        }
      }
    }
    .time {
      margin-right: 4px;
      font-family: var(--font-en);
      font-size: 24px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      line-height: 1.2em;
      white-space: nowrap;
      @media (max-width: 600px) {
        margin-right: 0;
        font-size: 20px;
      }
    }
    .name {
      min-width: 0;
      font-size: 18px;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      @media (max-width: 600px) {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 15px;
      }
    }
    .guests {
      font-size: 16px;
      font-weight: 700;
      white-space: nowrap;
      @media (max-width: 600px) {
        grid-column: 2;
        grid-row: 1;
        font-size: 13px;
      }
    }
    .arrow {
      margin-left: 2px;
      color: #44576b;
      font-size: 28px;
      line-height: .9em;
      @media (max-width: 600px) {
        grid-column: 2;
        grid-row: 3;
      }
    }
    .row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      line-height: 1.4em;
      @media (max-width: 600px) {
        gap: 4px;
        font-size: 12px;
      }
    }
    .label {
      margin-right: 10px;
      width: 38px;
      flex: 0 0 auto;
      color: var(--color-muted);
      font-size: 14px;
      font-weight: 700;
      @media (max-width: 600px) {
        margin-right: 2px;
        width: 28px;
        font-size: 12px;
      }
    }
    .seats {
      padding-top: 8px;
      border-top: 1px solid #e6ebef;
    }
    .badge {
      @media (max-width: 600px) {
        padding: 3px 5px;
        font-size: 11px;
        white-space: normal;
      }
    }
  }
  .badge {
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    color: #586579;
    background: #e5e9f0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4em;
    white-space: nowrap;
    border-radius: 6px;
    &.teal {
      color: var(--color-accent);
      background: #daf1f3;
    }
    &.amber {
      color: #905609;
      background: var(--color-amber-bg);
    }
    &.violet {
      color: #625681;
      background: #eeeaf5;
    }
    &.web {
      color: var(--color-info);
      background: var(--color-info-bg);
    }
    &.pending {
      color: var(--color-offline-ink);
      background: #ffe3a3;
    }
  }
  .empty {
    padding: 36px 16px;
    color: var(--color-muted);
    background: #fff;
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    @media (max-width: 600px) {
      padding: 24px 8px;
      font-size: 13px;
    }
  }
  .columns {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    @media (max-width: 900px) {
      grid-template-columns: minmax(150px, 180px) minmax(0, 1fr);
      gap: 16px;
    }
    @media (max-width: 600px) {
      grid-template-columns: 104px minmax(0, 1fr);
      gap: 8px;
    }
  }
  .calendar {
    position: sticky;
    top: 12px;
    padding: 12px;
    box-sizing: border-box;
    min-width: 0;
    max-height: calc(100dvh - 160px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    @media (max-width: 600px) {
      padding: 4px;
      border-radius: 7px;
    }
    .month {
      margin-bottom: 8px;
      display: block;
      flex: 0 0 auto;
      input {
        padding: 8px 4px;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        color: var(--color-ink);
        background: #fff;
        font-size: 16px;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        @media (max-width: 600px) {
          padding: 4px 0;
          font-size: 12px;
        }
      }
    }
    .month-controls {
      margin-bottom: 12px;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 44px;
      gap: 4px;
      @media (max-width: 600px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      button {
        min-width: 0;
        min-height: 44px;
        color: var(--color-ink);
        background: #fff;
        font-size: 24px;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        &[data-calendar-shift="1"] {
          grid-column: 3;
          grid-row: 1;
          @media (max-width: 600px) {
            grid-column: 2;
          }
        }
        &.today {
          grid-column: 2;
          grid-row: 1;
          color: var(--color-accent);
          font-size: 14px;
          font-weight: 700;
          @media (max-width: 600px) {
            grid-column: 1 / -1;
            grid-row: 2;
          }
        }
      }
    }
    .labels {
      margin-bottom: 6px;
      padding: 0 8px;
      display: flex;
      justify-content: space-between;
      color: var(--color-muted);
      font-size: 12px;
      @media (max-width: 600px) {
        padding: 0 2px;
        font-size: 10px;
      }
    }
    .month-controls, .labels, .hint, .holiday-notice {
      flex: 0 0 auto;
    }
    .days {
      min-height: 120px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      flex: 1 1 auto;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .day {
      padding: 8px;
      min-height: 48px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 4px;
      flex: 0 0 auto;
      color: var(--color-ink);
      background: #f8fafb;
      text-align: left;
      border: 2px solid transparent;
      border-radius: 7px;
      @media (max-width: 600px) {
        padding: 6px 3px;
        min-height: 44px;
        border-radius: 5px;
      }
      &[data-kind="saturday"] {
        background: #e9f2ff;
        .date {
          color: #265c9c;
        }
      }
      &[data-kind="sunday"], &[data-kind="holiday"] {
        background: #fff0f0;
        .date, .holiday {
          color: #aa3948;
        }
      }
      &[aria-current="date"] {
        border-color: var(--color-accent);
        box-shadow: inset 3px 0 var(--color-accent);
      }
      &:focus-visible {
        outline: 2px solid #258694;
        outline-offset: -2px;
      }
      &[data-today="true"] .date {
        text-decoration: underline;
        text-decoration-color: var(--color-accent);
        text-underline-offset: 4px;
      }
    }
    .date {
      min-width: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 8px;
      font-family: var(--font-en);
      font-size: 18px;
      font-weight: 700;
      @media (max-width: 600px) {
        gap: 3px;
        font-size: 15px;
      }
      .weekday {
        font-family: var(--font-jp);
        font-size: 13px;
        font-weight: 500;
        @media (max-width: 600px) {
          font-size: 11px;
        }
      }
    }
    .count {
      padding: 1px 6px;
      box-sizing: border-box;
      min-width: 24px;
      color: #28505d;
      background: #ffffffb8;
      font-family: var(--font-en);
      font-size: 14px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      text-align: center;
      border-radius: 6px;
      @media (max-width: 600px) {
        padding: 1px 3px;
        min-width: 20px;
        font-size: 12px;
      }
    }
    .web_pending {
      padding: 0 6px;
      color: var(--color-offline-ink);
      background: #ffe3a3;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.6em;
      border-radius: 999px;
      @media (max-width: 600px) {
        padding: 0 3px;
        font-size: 10px;
      }
    }
    .holiday {
      grid-column: 1 / -1;
      font-size: 11px;
      line-height: 1.4em;
      overflow-wrap: anywhere;
    }
    .hint, .holiday-notice {
      margin-top: 8px;
      color: var(--color-muted);
      font-size: 11px;
      line-height: 1.5em;
      overflow-wrap: anywhere;
      @media (max-width: 600px) {
        font-size: 10px;
      }
    }
  }
  .details {
    min-width: 0;
    h3 {
      margin-bottom: 8px;
      font-size: 22px;
      font-weight: 700;
      line-height: 1.4em;
      @media (max-width: 600px) {
        font-size: 16px;
      }
    }
  }
  .detail-action {
    margin-top: 6px;
    display: flex;
    justify-content: flex-end;
    button {
      min-height: 44px;
      color: var(--color-accent);
      font-size: 15px;
      &.primary {
        color: #fff;
      }
    }
  }
}
#booking-error {
  margin: 12px 0;
  color: var(--color-error);
  font-size: 14px;
}

.sec_sekiraku_navigation {
  position: fixed;
  inset: auto 0 0;
  z-index: 10;
  padding-bottom: env(safe-area-inset-bottom);
  display: none;
  background: #fff;
  border-top: 1px solid var(--color-bar-line);
  @media (max-width: 600px) {
    display: block;
  }
  .wrap {
    margin: 0 auto;
    max-width: 560px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  button {
    padding: 9px 2px 8px;
    min-height: 65px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    color: var(--color-muted);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2em;
    border: 0;
    &[aria-current="page"] {
      color: var(--color-accent);
    }
    svg {
      width: 23px;
      height: 23px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linejoin: round;
    }
  }
}

.sec_sekiraku_entry {
  background: var(--color-pale);
  .wrap {
    margin: 0 auto;
    padding: 14px 16px 24px;
    max-width: 560px;
  }
  .back {
    margin-bottom: 14px;
    padding: 0;
    min-height: 36px;
    color: var(--color-accent);
    background: none;
    font-size: 16px;
    font-weight: 700;
    border: 0;
  }
  h2 {
    margin-bottom: 18px;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.4em;
  }
  .panel {
    padding: 16px 14px;
    display: grid;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
  }
  .row {
    display: grid;
    gap: 7px;
    span, legend {
      font-size: 16px;
      font-weight: 700;
    }
    small {
      margin-left: 8px;
      padding: 2px 6px;
      color: var(--color-muted);
      background: #edf1f4;
      font-size: 12px;
      font-weight: 400;
      border-radius: 4px;
    }
  }
  .times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  input, select, textarea {
    padding: 10px 12px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    color: var(--color-ink);
    background: #fff;
    font-size: 16px;
    line-height: 1.4em;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    &:focus-visible {
      outline: 2px solid var(--color-focus);
      outline-offset: 2px;
    }
  }
  textarea {
    min-height: 90px;
    resize: vertical;
  }
  fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    legend {
      margin-bottom: 7px;
      font-size: 16px;
      font-weight: 700;
    }
  }
  .states {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    label {
      padding: 10px 12px;
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      &:has(:checked) {
        color: var(--color-accent);
        background: var(--color-selected-bg);
        border-color: var(--color-focus);
      }
      input {
        padding: 0;
        width: 20px;
        height: 20px;
        min-height: 0;
        accent-color: var(--color-accent);
      }
    }
  }
  .info {
    margin: 12px 0 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-accent);
    background: var(--color-selected-bg);
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
    svg {
      width: 23px;
      height: 23px;
      flex: 0 0 auto;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
    }
  }
  .draft {
    margin: 0 0 8px;
    color: var(--color-muted);
    font-size: 12px;
    text-align: right;
  }
  .submit {
    padding: 12px;
    width: 100%;
    min-height: 48px;
    color: #fff;
    background: var(--color-accent);
    font-size: 20px;
    font-weight: 700;
    border: 0;
    border-radius: 7px;
  }
  .cancel {
    margin-top: 10px;
    width: 100%;
    min-height: 44px;
    color: var(--color-accent);
    background: none;
    font-size: 16px;
    font-weight: 700;
    border: 0;
  }
  .message {
    margin: 8px 0;
    color: var(--color-error);
    font-size: 14px;
  }
  .next-day {
    color: var(--color-muted);
    font-size: 13px;
  }
  .stay {
    margin-top: -6px;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.5em;
  }
}

.sec_sekiraku_patterns {
  .wrap {
    margin: auto;
    padding: 28px 32px 48px;
    max-width: 1440px;
    @media (max-width: 600px) {
      padding: 20px 16px 88px;
    }
  }
  .day-bar {
    padding: 20px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
    background: #f0f8f8;
    border: 1px solid #d6e9e9;
    border-radius: 12px;
    small {
      color: var(--color-muted);
      font-size: 13px;
    }
    p {
      margin-top: 6px;
      color: var(--color-muted);
      font-size: 14px;
    }
    .date {
      margin-top: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
      button, input {
        padding: 8px 10px;
        min-height: 44px;
        background: #fff;
        border: 1px solid var(--color-border);
        border-radius: 6px;
      }
      button {
        font-size: 24px;
      }
      input {
        min-width: 0;
        max-width: 180px;
      }
    }
  }
  .heading {
    margin: 32px 0 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    h2 {
      margin-bottom: 10px;
      font-size: 28px;
      font-weight: 700;
      line-height: 1.4em;
    }
    p {
      color: var(--color-muted);
      font-size: 15px;
    }
  }
  .pattern-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    @media (max-width: 1100px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
    @media (max-width: 600px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .pattern-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d6e0e6;
    border-radius: 12px;
    &.selected {
      border: 2px solid var(--color-accent);
    }
  }
  .preview {
    position: relative;
    padding: 10px;
    background: #f4f8f9;
    svg {
      width: 100%;
      height: 190px;
      display: block;
      pointer-events: none;
    }
    .applied {
      position: absolute;
      top: 12px;
      left: 12px;
      padding: 5px 10px;
      color: #fff;
      background: var(--color-accent);
      font-size: 12px;
      font-weight: 700;
      border-radius: 5px;
    }
  }
  .card-body {
    padding: 20px;
    h3 {
      margin-bottom: 10px;
      font-size: 22px;
      font-weight: 700;
    }
    p {
      color: var(--color-muted);
      font-size: 13px;
    }
  }
  .card-actions {
    margin-top: 22px;
    display: flex;
    gap: 10px;
    button {
      padding: 10px;
      flex: 1;
      font-size: 14px;
    }
  }
  details {
    margin-top: 16px;
    font-size: 13px;
    summary {
      color: var(--color-muted);
      cursor: pointer;
    }
    .menu {
      padding-top: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      button {
        padding: 8px;
        border: 1px solid var(--color-border);
        border-radius: 5px;
      }
    }
  }
  .archive-option {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
  }
  [data-library-message] {
    margin-bottom: 12px;
    color: var(--color-pattern-alert);
  }
}

.sec_sekiraku_pattern_form {
  margin: auto;
  padding: 28px;
  width: min(480px, calc(100% - 24px));
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  &::backdrop {
    background: var(--color-backdrop-ink-light);
  }
  h2 {
    font-size: 22px;
    font-weight: 700;
  }
  label {
    margin-top: 24px;
    display: block;
  }
  input[type="text"] {
    margin-top: 8px;
    padding: 12px;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 6px;
  }
  small {
    margin: 6px 0 0 24px;
    display: block;
    color: var(--color-muted);
  }
  form > div {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  [role="alert"] {
    margin-top: 12px;
    color: var(--color-pattern-alert);
  }
}

.sec_sekiraku_builder_head {
  display: none;
}

.sec_sekiraku_service_date {
  padding: 12px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  label {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  input {
    padding: 8px;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
  }
  p {
    color: var(--color-muted);
    font-size: 14px;
  }
}

.sec_sekiraku_context {
  --color-context-focus: #168f9d;
  position: fixed;
  z-index: 20;
  margin: 0;
  padding: 8px;
  width: max-content;
  max-width: min(560px, calc(100% - 24px));
  display: block;
  color: var(--color-ink);
  background: #fff;
  overflow: auto;
  border: 1px solid #c6d6df;
  border-radius: 10px;
  box-shadow: 0 5px 18px #17243826;
  .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-ink);
    font-size: 13px;
    font-weight: 700;
  }
  input {
    padding: 8px 6px;
    width: 62px;
    min-width: 0;
    min-height: 44px;
    color: var(--color-ink);
    background: #fff;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    line-height: 1.4em;
    border: 1px solid #bdcdd9;
    border-radius: 6px;
    &[data-quick-field="name"] {
      width: 112px;
    }
    &:focus {
      outline: 2px solid var(--color-context-focus);
      outline-offset: 1px;
    }
    &:disabled {
      color: #7b8590;
      background: var(--color-gray-pale);
    }
  }
  .actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  button {
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    color: var(--color-ink);
    background: #fff;
    font-size: 21px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    @media (hover: hover) {
      &:hover {
        color: var(--color-accent);
        background: #eef8f9;
      }
    }
    &:focus-visible {
      outline: 2px solid var(--color-context-focus);
      outline-offset: 1px;
    }
  }
  .join {
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    &[aria-pressed="true"] {
      background: var(--color-pressed-bg);
      border-color: var(--color-pressed-border);
    }
    svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
    }
  }
}

.sec_sekiraku_inspector {
  position: fixed;
  top: 12px;
  right: auto;
  bottom: auto;
  margin: 0;
  padding: 0;
  width: min(420px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  color: var(--color-ink);
  background: var(--color-inspector-bg);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-inspector-border);
  border-radius: 10px;
  &::backdrop {
    background: #17243850;
  }
  .head {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #d9e6eb;
    h2 {
      font-size: 18px;
      font-weight: 700;
    }
  }
  .sub {
    border: 0;
  }
}

.sec_sekiraku_floors {
  margin: auto;
  padding: 24px;
  box-sizing: border-box;
  width: calc(100% - 24px);
  max-width: 640px;
  max-height: calc(100dvh - 24px);
  color: var(--color-ink);
  background: #fff;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  @media (max-width: 600px) {
    padding: 16px;
  }
  &::backdrop {
    background: #10243855;
  }
  .head {
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    h2 {
      font-size: 22px;
      font-weight: 700;
    }
  }
  p {
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.5em;
  }
  .rows {
    margin: 20px 0;
    display: grid;
    gap: 12px;
  }
  .row {
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
    background: var(--color-pale);
    border-radius: 8px;
    label {
      min-width: 0;
      display: grid;
      gap: 6px;
      flex: 1 1 240px;
      font-size: 14px;
    }
    input {
      padding: 10px;
      width: 100%;
      min-width: 0;
      min-height: 44px;
      background: #fff;
      font-size: 16px;
      border: 1px solid var(--color-border);
      border-radius: 6px;
    }
  }
  .order {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    button {
      padding: 8px;
      min-height: 44px;
      background: #fff;
      font-size: 13px;
      border: 1px solid var(--color-border);
      border-radius: 5px;
    }
  }
  .hint {
    margin-top: 12px;
  }
  [data-floor-error] {
    margin-top: 12px;
    color: var(--color-error);
  }
  .actions {
    margin-top: 20px;
    display: flex;
    justify-content: end;
    gap: 12px;
  }
}

.sec_sekiraku_service {
  padding: 18px;
  min-width: 0;
  max-height: calc(100dvh - 220px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  @media (max-width: 1000px) {
    position: fixed;
    right: 12px;
    bottom: 12px;
    left: 12px;
    z-index: 30;
    padding: 12px 16px;
    max-height: 50dvh;
    gap: 8px;
    overflow: auto;
    box-shadow: 0 -8px 24px #15314520;
  }
  @media (max-width: 600px) {
    bottom: 76px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    @media (max-width: 600px) {
      grid-column: 2;
      grid-row: 1;
    }
    button {
      color: var(--color-accent);
      background: var(--color-active-bg);
      @media (max-width: 600px) {
        padding: 8px;
        font-size: 12px;
      }
    }
    span {
      @media (max-width: 600px) {
        display: none;
      }
    }
  }
  .party {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 24px;
    font-weight: 700;
    overflow-wrap: anywhere;
    @media (max-width: 1000px) {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      align-items: center;
      grid-column: 1;
      grid-row: 1;
      font-size: 18px;
    }
    strong {
      @media (max-width: 600px) {
        font-size: 15px;
        white-space: nowrap;
      }
    }
  }
  .time {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    @media (max-width: 1000px) {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      grid-column: 1;
      font-size: 14px;
    }
  }
  .states {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    @media (max-width: 1000px) {
      font-size: 13px;
    }
    @media (max-width: 600px) {
      gap: 4px;
      grid-column: 2;
      font-size: 11px;
    }
    span {
      padding: 8px 12px;
      background: var(--color-gray-soft);
      border-radius: 6px;
      @media (max-width: 1000px) {
        padding: 4px 8px;
      }
      @media (max-width: 600px) {
        padding: 2px 4px;
      }
      &:first-child {
        background: #fae1b6;
      }
    }
  }
  .remaining {
    padding: 14px;
    background: var(--color-pending-bg);
    font-size: 20px;
    font-weight: 700;
    border-radius: 6px;
    @media (max-width: 1000px) {
      padding: 8px 12px;
      font-size: 18px;
    }
  }
  .hint, .status {
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.5em;
  }
  .assignment {
    font-size: 16px;
    line-height: 1.5em;
    overflow-wrap: anywhere;
  }
  .stages {
    padding-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border-top: 1px solid var(--color-border);
    h3 {
      grid-column: 1 / -1;
      font-size: 16px;
      font-weight: 700;
    }
    .offline {
      grid-column: 1 / -1;
      color: var(--color-error);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.5em;
    }
    button {
      padding: 12px 6px;
      min-height: 60px;
      &[aria-pressed="true"] {
        color: var(--color-confirmed);
        background: var(--color-confirmed-bg);
        border-color: #7cb2aa;
      }
    }
  }
  button {
    min-height: 44px;
  }
  .error {
    color: #b8323a;
    font-size: 14px;
    line-height: 1.6em;
  }
  .error:empty, .status:empty {
    display: none;
  }
  .more {
    summary {
      display: none;
      @media (max-width: 1000px) {
        padding: 10px 0;
        min-height: 44px;
        display: list-item;
        color: var(--color-accent);
        font-weight: 700;
        cursor: pointer;
      }
    }
    .content {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
  }
  .remaining, .more, [data-withdrawal] {
    @media (max-width: 600px) {
      grid-column: 1 / -1;
    }
  }
}

.dialog_ptn_1 {
  padding: 24px;
  box-sizing: border-box;
  width: calc(100% - 24px);
  max-width: 620px;
  max-height: calc(100dvh - 24px);
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  &::backdrop {
    background: var(--color-backdrop);
  }
  .head {
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    h2 {
      font-size: 20px;
      font-weight: 700;
    }
  }
  .reservations {
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    button {
      min-height: 64px;
      text-align: left;
      overflow-wrap: anywhere;
    }
  }
  &.type_bookings {
    @media (max-width: 600px) {
      padding: 16px;
    }
    .reservations {
      .row {
        padding: 8px 12px;
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--color-border);
        border-radius: 7px;
        @media (max-width: 600px) {
          padding: 8px;
          gap: 6px;
        }
        /* ネットの仮予約で未対応（工程5・画像6・ui/web-pending.js の markPickerRow） */
        &.is_web_pending {
          background: var(--color-warning-bg);
          border-color: var(--color-warning-border);
        }
        .web_pick {
          grid-column: 1 / -1;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: flex-end;
          gap: 8px;
          .badge {
            padding: 2px 8px;
            color: var(--color-offline-ink);
            background: #ffe3a3;
            font-size: 13px;
            font-weight: 700;
            border-radius: 4px;
          }
          .btn_ptn_1 {
            padding: 0 16px;
            min-height: 44px;
          }
        }
      }
      .choice {
        padding: 4px 0;
        min-width: 0;
        min-height: 44px;
        display: grid;
        justify-content: stretch;
        align-items: center;
        text-align: left;
        border: 0;
        .main {
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 4px;
        }
        .heading {
          display: flex;
          flex-wrap: wrap;
          align-items: baseline;
          gap: 4px 12px;
          @media (max-width: 600px) {
            gap: 2px 8px;
            font-size: 14px;
          }
        }
        .time, .guests {
          flex: none;
          font-variant-numeric: tabular-nums;
          white-space: nowrap;
        }
        .name {
          overflow-wrap: anywhere;
        }
        .meta {
          color: var(--color-muted);
          font-size: 12px;
          font-weight: 400;
        }
      }
      .badge {
        padding: 6px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        color: #865b13;
        background: var(--color-pending-bg);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.4em;
        border-radius: 6px;
        &.confirmed {
          color: var(--color-confirmed);
          background: var(--color-confirmed-bg);
        }
      }
      .label {
        white-space: nowrap;
      }
      .detail {
        max-width: 88px;
        font-size: 11px;
        font-weight: 400;
        text-align: center;
      }
      .visit {
        padding: 8px 10px;
        min-width: 90px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--color-ink);
        font-size: 14px;
        white-space: nowrap;
        @media (max-width: 600px) {
          padding: 8px;
          min-width: 76px;
          gap: 4px;
          font-size: 12px;
        }
        svg {
          width: 12px;
          height: 12px;
          flex: none;
          fill: none;
          stroke: currentColor;
          stroke-width: 1.5;
        }
      }
    }
    [data-walk-in] {
      margin-left: 8px;
    }
  }
  &.type_visit {
    max-width: 400px;
    .party {
      font-weight: 700;
      overflow-wrap: anywhere;
    }
    .current {
      margin-top: 12px;
      padding: 10px 12px;
      background: #edf5f6;
      font-weight: 700;
      border-radius: 6px;
    }
    .hint {
      margin-top: 12px;
      color: var(--color-muted);
      font-size: 14px;
      line-height: 1.5em;
    }
    .options {
      margin-top: 16px;
      display: grid;
      gap: 8px;
      button {
        min-height: 48px;
        justify-content: flex-start;
      }
      [data-visit-undo] {
        margin-top: 8px;
        color: var(--color-service-alert);
        border-color: #dfafb5;
      }
    }
  }
  &.type_walk_in {
    max-width: 440px;
    form {
      display: grid;
      gap: 14px;
    }
    .head {
      margin-bottom: 0;
    }
    .hint {
      color: var(--color-muted);
      font-size: 14px;
      line-height: 1.5em;
    }
    label {
      display: grid;
      gap: 6px;
      font-weight: 700;
    }
    input {
      padding: 10px 12px;
      width: 100%;
      min-width: 0;
      min-height: 44px;
      background: #fff;
      font-size: 16px;
      border: 1px solid var(--color-border);
      border-radius: 6px;
    }
    [data-walk-in-message] {
      color: var(--color-service-alert);
      font-size: 14px;
      line-height: 1.5em;
      &:empty {
        display: none;
      }
    }
  }
  &.type_withdrawal {
    max-width: 440px;
    .party {
      font-weight: 700;
      overflow-wrap: anywhere;
    }
    .hint {
      margin-top: 12px;
      font-size: 14px;
      line-height: 1.6em;
    }
    [role="alert"] {
      margin-top: 12px;
      color: var(--color-service-alert);
      font-size: 14px;
      line-height: 1.5em;
      &:empty {
        display: none;
      }
    }
  }
  &.type_print {
    max-width: 420px;
    .head {
      margin-bottom: 4px;
      h2 {
        font-size: 18px;
        line-height: 1.4em;
      }
    }
    .hint {
      margin-bottom: 16px;
      color: var(--color-muted);
      font-size: 13px;
      line-height: 1.6em;
    }
    .options {
      display: flex;
      flex-direction: column;
      gap: 10px;
      button {
        padding: 12px 16px;
        width: 100%;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 2px;
        font-size: 16px;
        text-align: left;
      }
      small {
        color: var(--color-muted);
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5em;
      }
    }
    .close {
      margin-top: 16px;
      padding: 8px 0;
      min-height: 44px;
      color: var(--color-accent);
      background: none;
      font-size: 14px;
      font-weight: 700;
      border: 0;
    }
  }
}

.sec_sekiraku_seat_time {
  padding: 24px;
  box-sizing: border-box;
  width: calc(100% - 24px);
  max-width: 640px;
  max-height: calc(100dvh - 24px);
  background: #fff;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  @media (max-width: 600px) {
    padding: 16px;
  }
  &::backdrop {
    background: var(--color-backdrop);
  }
  form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    h2 {
      font-size: 22px;
      font-weight: 700;
      @media (max-width: 600px) {
        font-size: 20px;
      }
    }
  }
  label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
  }
  input, select {
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    color: var(--color-ink);
    background: #fff;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
  }
  .times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    @media (max-width: 600px) {
      gap: 8px;
    }
  }
  .hint {
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.6em;
  }
  .state {
    padding: 12px;
    background: var(--color-gray-soft);
    border-radius: 6px;
  }
  h3 {
    padding-top: 16px;
    font-size: 16px;
    font-weight: 700;
    border-top: 1px solid var(--color-border);
  }
  ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      line-height: 1.6em;
      span {
        overflow-wrap: anywhere;
      }
      button {
        flex: 0 0 auto;
      }
    }
  }
  button {
    min-height: 44px;
  }
  [data-time-rule-message] {
    font-size: 14px;
    line-height: 1.6em;
  }
}

.sec_sekiraku_layout_time {
  padding: 24px;
  box-sizing: border-box;
  width: calc(100% - 24px);
  max-width: 640px;
  max-height: calc(100dvh - 24px);
  background: #fff;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  @media (max-width: 600px) {
    padding: 16px;
  }
  &::backdrop {
    background: var(--color-backdrop);
  }
  form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    h2 {
      font-size: 22px;
      font-weight: 700;
      @media (max-width: 600px) {
        font-size: 20px;
      }
    }
  }
  label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
  }
  input, select {
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    color: var(--color-ink);
    background: #fff;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
  }
  .times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    @media (max-width: 600px) {
      gap: 8px;
    }
  }
  .hint {
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.6em;
  }
  .state {
    padding: 12px;
    background: var(--color-gray-soft);
    border-radius: 6px;
  }
  h3 {
    padding-top: 16px;
    font-size: 16px;
    font-weight: 700;
    border-top: 1px solid var(--color-border);
  }
  ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      line-height: 1.6em;
      span {
        overflow-wrap: anywhere;
      }
      button {
        flex: 0 0 auto;
      }
    }
  }
  button {
    min-height: 44px;
  }
  [data-layout-time-message] {
    font-size: 14px;
    line-height: 1.6em;
  }
}

.sec_booking_details {
  --color-danger-line: #e16e7a;
  margin: auto;
  padding: 0;
  width: calc(100% - 32px);
  max-width: 760px;
  max-height: calc(100dvh - 32px);
  color: var(--color-ink);
  background: #fff;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  @media (max-width: 600px) {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
  }
  &::backdrop {
    background: var(--color-backdrop-ink);
  }
  .wrap {
    padding: 24px;
    @media (max-width: 600px) {
      padding: 16px;
    }
  }
  .head {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    h2 {
      font-size: 25px;
      font-weight: 700;
    }
  }
  h3 {
    margin-bottom: 14px;
    font-size: 21px;
    font-weight: 700;
  }
  .code, .hint, .draft {
    margin-bottom: 10px;
    color: var(--color-muted);
    font-size: 14px;
  }
  .tabs {
    margin: 16px 0;
    display: flex;
    gap: 12px;
    border-bottom: 1px solid var(--color-border);
    button {
      padding: 10px 20px;
      min-height: 46px;
      color: var(--color-muted);
      background: #fff;
      font-size: 17px;
      font-weight: 700;
      border: 0;
      border-bottom: 3px solid transparent;
      &[aria-selected="true"] {
        color: var(--color-accent);
        border-bottom-color: var(--color-accent);
      }
    }
  }
  .message {
    margin: 12px 0;
    color: var(--color-muted);
    font-size: 15px;
    overflow-wrap: anywhere;
  }
  fieldset {
    margin: 0;
    padding: 0;
    min-width: 0;
    border: 0;
  }
  .fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    @media (max-width: 480px) {
      grid-template-columns: minmax(0, 1fr);
    }
    label {
      display: grid;
      gap: 7px;
      font-weight: 700;
    }
    .wide {
      grid-column: 1 / -1;
    }
  }
  input, select, textarea {
    padding: 10px 12px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    color: var(--color-ink);
    background: #fff;
    font-size: 16px;
    line-height: 1.4em;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    &:disabled {
      background: var(--color-inactive-bg);
      opacity: 1;
    }
  }
  textarea {
    min-height: 72px;
    resize: vertical;
  }
  .impact {
    margin-top: 18px;
    padding: 14px 16px;
    color: var(--color-info);
    background: #f0f9fa;
    border: 1px solid var(--color-focus);
    border-radius: 6px;
    strong {
      font-weight: 700;
    }
    p {
      margin: 6px 0;
    }
    small {
      font-size: 13px;
    }
  }
  .changes {
    margin: 12px 0;
    padding: 12px;
    background: #f0f3f6;
    font-size: 14px;
    overflow-wrap: anywhere;
    border-radius: 6px;
  }
  .actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    .danger {
      margin-right: auto;
      color: var(--color-error);
      border-color: var(--color-danger-line);
    }
    .primary {
      color: #fff;
      background: var(--color-accent);
    }
  }
  .refresh {
    margin-top: 14px;
    font-size: 13px;
  }
  .confirmation {
    margin-top: 16px;
    padding: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    background: #fff5f3;
    border: 1px solid var(--color-danger-line);
    border-radius: 6px;
    p {
      width: 100%;
    }
  }
  .query {
    margin: 16px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    label {
      min-width: 0;
      display: grid;
      gap: 5px;
    }
  }
  ol {
    margin: 12px 0;
    padding: 0;
    list-style: none;
    li {
      padding: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      border-bottom: 1px solid var(--color-border);
      @media (max-width: 480px) {
        flex-direction: column;
        align-items: start;
      }
      strong {
        font-weight: 700;
      }
      p {
        margin-top: 6px;
        color: var(--color-muted);
        font-size: 13px;
      }
      button {
        flex-shrink: 0;
      }
    }
  }
  .past {
    margin-top: 18px;
    padding: 16px;
    background: var(--color-past-bg);
    border: 1px solid var(--color-past-border);
    border-radius: 6px;
    h3 {
      font-size: 18px;
      span {
        padding: 4px 8px;
        display: inline-block;
        color: var(--color-past-ink);
        background: var(--color-amber-bg);
        font-size: 13px;
      }
    }
    dl {
      display: grid;
      gap: 12px;
      div {
        display: grid;
        grid-template-columns: 85px minmax(0, 1fr);
        gap: 12px;
      }
      dt {
        color: var(--color-muted);
      }
      dd {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }
    }
    p {
      margin-top: 16px;
      color: var(--color-muted);
      font-size: 13px;
    }
  }
  .current {
    margin-top: 16px;
  }
}

.sec_day_history {
  margin: auto;
  padding: 0;
  width: calc(100% - 32px);
  max-width: 1100px;
  max-height: calc(100dvh - 32px);
  color: var(--color-ink);
  background: #fff;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  @media (max-width: 600px) {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
  }
  &::backdrop {
    background: var(--color-backdrop-ink);
  }
  .wrap {
    padding: 24px;
    @media (max-width: 600px) {
      padding: 16px;
    }
  }
  .head {
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    h2 {
      font-size: 27px;
      font-weight: 700;
    }
  }
  h3 {
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 700;
  }
  .hint, .message {
    margin: 10px 0;
    color: var(--color-muted);
    font-size: 14px;
  }
  .query {
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 14px;
    label {
      min-width: 0;
      display: grid;
      gap: 6px;
    }
    input {
      padding: 10px;
      min-width: 0;
      max-width: 100%;
      min-height: 46px;
      font-size: 16px;
      border: 1px solid var(--color-border);
      border-radius: 6px;
    }
  }
  .columns {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 20px;
    @media (max-width: 760px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .records {
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    ol {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    li {
      margin-bottom: 10px;
      padding: 14px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      &:has([aria-pressed="true"]) {
        background: var(--color-selected-bg);
        border-color: var(--color-focus);
      }
      strong {
        font-weight: 700;
      }
      p {
        margin-top: 7px;
        color: var(--color-muted);
        font-size: 13px;
      }
    }
  }
  .past {
    padding: 20px;
    min-width: 0;
    background: var(--color-past-bg);
    border: 1px solid var(--color-past-border);
    border-radius: 6px;
    h3 {
      font-size: 18px;
      span {
        padding: 3px 7px;
        display: inline-block;
        color: var(--color-past-ink);
        background: var(--color-amber-bg);
        font-size: 13px;
      }
    }
    h4 {
      margin: 18px 0 10px;
      font-size: 17px;
      font-weight: 700;
    }
    dl {
      border: 1px solid var(--color-border);
      border-radius: 5px;
      div {
        padding: 12px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
        gap: 12px;
        border-bottom: 1px solid var(--color-border);
        @media (max-width: 480px) {
          grid-template-columns: minmax(0, 1fr);
          gap: 5px;
        }
        &:last-child {
          border-bottom: 0;
        }
      }
      dt, dd {
        overflow-wrap: anywhere;
      }
    }
    ul {
      padding-left: 18px;
      li {
        margin: 10px 0;
      }
    }
    .notice {
      margin-top: 22px;
      padding-top: 14px;
      color: var(--color-muted);
      font-size: 14px;
      border-top: 1px solid var(--color-border);
    }
  }
  .actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
  }
}

.sec_sekiraku_time_head {
  background: #fff;
  .wrap {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .modes {
    display: flex;
    button {
      color: var(--color-ink);
      background: #fff;
      font-weight: 700;
      white-space: nowrap;
      border: 1px solid var(--color-border);
      &[aria-pressed="true"] {
        color: #fff;
        background: var(--color-accent);
        border-color: var(--color-accent);
      }
    }
  }
  .time-chip {
    padding: 8px 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-ink);
    background: #fff;
    font-family: var(--font-en);
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    &[aria-expanded="true"] {
      background: var(--color-active-bg);
      border-color: var(--color-accent);
    }
    svg {
      width: 22px;
      height: 22px;
      flex: 0 0 auto;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
    }
    .chevron {
      width: 12px;
      height: 12px;
    }
  }
}

.sec_sekiraku_time_popup {
  margin: auto;
  padding: 28px 32px 24px;
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 620px;
  max-height: calc(100dvh - 32px);
  color: var(--color-ink);
  background: #fff;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 20px 60px #17243830;
  @media (max-width: 600px) {
    padding: 20px 16px 12px;
  }
  @media (max-height: 500px) {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  &::backdrop {
    background: var(--color-backdrop-ink-light);
  }
  .wrap {
    display: flex;
    flex-direction: column;
    gap: 28px;
    @media (max-width: 600px) {
      gap: 20px;
    }
    @media (max-height: 500px) {
      gap: 10px;
    }
  }
  .head {
    display: flex;
    align-items: center;
    gap: 20px;
    @media (max-width: 600px) {
      gap: 10px;
    }
    h2 {
      font-size: 22px;
      font-weight: 700;
      @media (max-width: 600px) {
        font-size: 18px;
      }
    }
    select {
      max-width: 120px;
      @media (max-width: 600px) {
        padding: 8px;
        max-width: 90px;
      }
    }
    .close {
      margin-left: auto;
      padding: 4px;
      min-width: 44px;
      font-size: 30px;
      border: 0;
    }
  }
  button, select {
    padding: 10px 16px;
    min-height: 48px;
    color: var(--color-ink);
    background: #fff;
    font: inherit;
    font-weight: 700;
    border: 1px solid var(--color-border);
    border-radius: 6px;
  }
  .time-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    @media (max-width: 600px) {
      gap: 8px;
    }
  }
  .time {
    min-width: 0;
    input {
      padding: 10px 8px;
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      min-height: 72px;
      color: var(--color-ink);
      background: #e7f3f4;
      font-family: var(--font-en);
      font-size: 40px;
      font-weight: 700;
      line-height: 1.2em;
      text-align: center;
      border: 1px solid transparent;
      border-radius: 6px;
      @media (max-width: 600px) {
        min-height: 64px;
        font-size: 28px;
      }
      @media (max-height: 500px) {
        min-height: 54px;
        font-size: 28px;
      }
      &:focus {
        border-color: var(--color-accent);
      }
      &::-webkit-calendar-picker-indicator {
        margin: 0;
        width: 20px;
      }
    }
  }
  .track {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    font-family: var(--font-en);
    font-size: 14px;
    @media (max-width: 600px) {
      gap: 8px;
      font-size: 12px;
    }
    .slider {
      min-width: 0;
    }
    input {
      margin: 0;
      width: 100%;
      height: 44px;
      display: block;
      accent-color: var(--color-accent);
      cursor: pointer;
    }
    small {
      margin-top: -12px;
      grid-column: 1 / -1;
      color: var(--color-muted);
      font-family: var(--font-jp);
      font-size: 13px;
      text-align: right;
    }
  }
  .jumps {
    padding-top: 20px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    border-top: 1px solid var(--color-gray-soft);
    @media (max-width: 600px) {
      gap: 8px;
    }
    @media (max-height: 500px) {
      padding-top: 10px;
    }
    button {
      min-height: 54px;
      @media (max-width: 600px) {
        padding: 8px;
        font-size: 13px;
      }
    }
    .jump {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      font-variant-numeric: tabular-nums;
    }
    .arrow {
      font-size: 26px;
      line-height: 1em;
    }
  }
  .context {
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.6em;
    summary {
      min-height: 44px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    p {
      margin-top: 8px;
      &:empty {
        display: none;
      }
    }
    .keys {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      span {
        display: flex;
        align-items: center;
        gap: 6px;
        &::before {
          width: 14px;
          height: 14px;
          background: #fff;
          content: '';
          border: 1px solid var(--color-seat-disabled-line);
          border-radius: 3px;
        }
      }
      .reserved::before {
        background: var(--color-seat-reserved);
      }
      .disabled::before {
        background: repeating-linear-gradient(135deg, var(--color-seat-disabled) 0 4px, var(--color-seat-disabled-line) 4px 5px);
      }
      .unresolved::before {
        background: var(--color-seat-unresolved);
      }
    }
  }
  button {
    @media (max-width: 600px) {
      padding: 8px 10px;
      font-size: 14px;
    }
  }
}

.sec_sekiraku_operating_rail {
  padding: 16px 8px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border-right: 1px solid var(--color-border);
  @media (max-width: 700px) {
    padding: 8px 4px;
    gap: 4px;
  }
  > div {
    display: contents;
  }
  button {
    padding: 12px 4px;
    width: 100%;
    min-height: 76px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--color-ink);
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    border: 0;
    border-radius: 6px;
    @media (max-width: 700px) {
      padding: 8px 2px;
      min-height: 64px;
      gap: 4px;
      font-size: 11px;
    }
  }
  svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    @media (max-width: 700px) {
      width: 24px;
      height: 24px;
    }
  }
  [data-open-operating-floors] {
    color: var(--color-accent);
    background: var(--color-active-bg);
  }
  [data-current-floor] {
    max-width: 100%;
    font-size: 12px;
    overflow-wrap: anywhere;
    @media (max-width: 700px) {
      font-size: 10px;
    }
  }
}

.sec_sekiraku_operating_tools {
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  @media (max-width: 1000px) {
    gap: 6px;
  }
  @media (max-width: 700px) {
    flex-wrap: wrap;
    justify-content: start;
    row-gap: 6px;
  }
  > label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0;
    input {
      padding: 8px 10px;
      box-sizing: border-box;
      max-width: 168px;
      min-height: 44px;
      color: var(--color-ink);
      background: #fff;
      font-size: 16px;
      border: 1px solid var(--color-border);
      border-radius: 6px;
      @media (max-width: 700px) {
        padding: 6px;
        max-width: 142px;
        font-size: 14px;
      }
    }
  }
  .unset {
    padding: 6px 8px;
    min-height: 44px;
    order: 1;
    color: #825d1c;
    background: #fff6df;
    font-size: 12px;
    white-space: nowrap;
    border: 1px solid #e7d3a7;
    border-radius: 6px;
  }
  .sec_sekiraku_time_head {
    border: 0;
    .wrap {
      padding: 0;
      min-height: 0;
      display: flex;
      flex-wrap: nowrap;
      gap: 12px;
      @media (max-width: 1000px) {
        gap: 6px;
      }
    }
    .modes {
      gap: 4px;
      button {
        padding: 10px 18px;
        min-height: 44px;
        border-radius: 6px;
        @media (max-width: 1000px) {
          padding: 8px 10px;
        }
        @media (max-width: 700px) {
          padding: 8px;
          font-size: 13px;
        }
      }
    }
  }
  .sec_sekiraku_time_head, .sec_sekiraku_time_head .wrap {
    @media (max-width: 700px) {
      display: contents;
    }
  }
}

.sec_sekiraku_operating_nav {
  display: flex;
  align-items: center;
  gap: 16px;
  @media (max-width: 1000px) {
    gap: 4px;
    font-size: 14px;
  }
  [data-open-operating-navigation] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    svg {
      width: 12px;
      height: 12px;
      flex: 0 0 auto;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  }
  button {
    padding: 10px;
    min-height: 44px;
    color: var(--color-ink);
    background: transparent;
    font-weight: 700;
    white-space: nowrap;
    border: 0;
    @media (max-width: 1000px) {
      padding: 8px;
    }
  }
}

.dialog_ptn_2 {
  margin: auto;
  padding: 24px;
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: 520px;
  max-height: calc(100dvh - 32px);
  color: var(--color-ink);
  background: #fff;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  &::backdrop {
    background: var(--color-backdrop-ink-light);
  }
  .head {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    h2 {
      font-size: 22px;
      font-weight: 700;
    }
  }
  button, select {
    padding: 10px 16px;
    min-height: 48px;
    background: #fff;
    font: inherit;
    border: 1px solid var(--color-border);
    border-radius: 6px;
  }
  [aria-pressed="true"] {
    color: var(--color-accent);
    background: var(--color-active-bg);
    border-color: var(--color-accent);
  }
  &.type_floors {
    .floor-controls, .floors {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
  }
  &.type_settings {
    [data-settings-slot] {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    [data-settings-note] {
      margin-top: 16px;
      color: var(--color-muted);
      font-size: 13px;
      line-height: 1.6em;
    }
  }
  &.type_screen {
    max-width: 340px;
    .choices {
      display: grid;
      gap: 12px;
      button {
        min-height: 52px;
        font-weight: 700;
        text-align: left;
      }
    }
  }
}

.sec_sekiraku_notes {
  .wrap {
    padding: 12px 28px 20px;
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.5em;
  }
}

body {
  @media (max-width: 600px) {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  &.booking-view {
    background: var(--color-pale);
  }
  &.entry-view {
    @media (max-width: 600px) {
      padding-bottom: 0;
    }
    .sec_sekiraku_head nav, .sec_sekiraku_navigation {
      display: none;
    }
  }
  .sec_sekiraku_head {
    .wrap {
      @media (max-width: 600px) {
        padding: 8px 16px;
        min-height: 52px;
      }
    }
    .brand {
      @media (max-width: 600px) {
        width: 100%;
        justify-content: space-between;
        gap: 16px;
      }
      h1 {
        @media (max-width: 600px) {
          font-size: 25px;
        }
      }
      span {
        @media (max-width: 600px) {
          padding: 0;
          font-size: 18px;
          border: 0;
        }
      }
    }
    nav {
      @media (max-width: 600px) {
        display: none;
      }
    }
  }
}

.builder-view {
  --color-catalog-bg: #f6f9fa;
  --color-catalog-line: #dce6eb;
  --color-builder-pressed-bg: #e1f2f3;
  .sec_sekiraku_head, .sec_sekiraku_navigation, .sec_sekiraku_service_date {
    display: none;
  }
  .sec_sekiraku_builder_head {
    padding: 16px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--color-border);
    button:first-child {
      min-height: 44px;
      color: var(--color-muted);
      background: transparent;
    }
    .logo {
      font-family: var(--font-en);
      font-size: 24px;
      font-weight: 700;
      letter-spacing: .15em;
    }
    h2 {
      font-size: 20px;
      font-weight: 700;
    }
    button:last-child {
      margin-left: auto;
    }
  }
  .sec_sekiraku_tools .wrap {
    padding-top: 12px;
    padding-bottom: 12px;
    .mode {
      display: none;
    }
    .floors button {
      padding: 8px 18px;
      min-height: 44px;
      font-size: 16px;
    }
  }
  .sec_sekiraku_editor {
    &.viewing .wrap {
      grid-template-columns: minmax(0, 1fr);
    }
    .wrap {
      grid-template-columns: 206px minmax(0, 1fr);
      gap: 16px;
      @media (max-width: 1400px) {
        grid-template-columns: minmax(0, 1fr);
      }
      @media (max-width: 1150px) {
        gap: 10px;
      }
    }
    .catalog {
      padding: 16px 12px;
      display: block;
      background: var(--color-catalog-bg);
      border: 1px solid var(--color-catalog-line);
      border-radius: 10px;
      @media (max-width: 1400px) {
        position: fixed;
        z-index: 30;
        padding: 16px;
        width: calc(100% - 24px);
        max-width: 380px;
        display: none;
        background: var(--color-catalog-bg);
        overflow: auto;
        overscroll-behavior: contain;
        box-shadow: 0 10px 28px #13283929;
        &.is-open {
          display: block;
        }
      }
      h2 {
        margin-bottom: 8px;
        font-size: 18px;
        font-weight: 700;
      }
      p {
        color: var(--color-muted);
        font-size: 12px;
        line-height: 1.5em;
      }
      .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        h2 {
          margin: 0;
        }
        button {
          display: none;
          @media (max-width: 1400px) {
            min-height: 44px;
            display: block;
            font-size: 14px;
          }
        }
        + p {
          margin-top: 8px;
        }
      }
      .catalog-tabs button {
        @media (max-width: 1400px) {
          min-height: 44px;
          font-size: 13px;
        }
      }
      .palette {
        @media (max-width: 1400px) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        button {
          @media (max-width: 1400px) {
            min-height: 88px;
            font-size: 14px;
          }
        }
      }
    }
    .catalog-tabs {
      margin: 16px 0 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      button {
        padding: 8px 3px;
        min-width: 0;
        min-height: 40px;
        flex: 1;
        background: #fff;
        font-size: 11px;
        white-space: nowrap;
        border: 1px solid var(--color-border);
        border-radius: 5px;
        &[aria-pressed="true"] {
          color: var(--color-accent);
          background: var(--color-builder-pressed-bg);
          border-color: var(--color-accent);
        }
      }
    }
    .palette {
      padding: 8px 0;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      @media (max-width: 600px) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      button {
        min-height: 92px;
        font-size: 12px;
        touch-action: none;
        @media (max-width: 600px) {
          min-height: 70px;
        }
        &[aria-pressed="true"] {
          background: var(--color-builder-pressed-bg);
          border-color: var(--color-accent);
        }
      }
    }
    .main {
      border: 1px solid var(--color-catalog-line);
      border-radius: 10px;
      overflow: hidden;
    }
    .canvas-bar {
      padding: 10px;
      gap: 8px;
      .tools {
        gap: 4px;
        button {
          padding: 8px;
          font-size: 12px;
        }
      }
      .zones {
        font-size: 12px;
        select {
          max-width: 130px;
        }
      }
    }
    .zoom {
      gap: 4px;
      button {
        padding: 6px 10px;
        min-height: 40px;
        font-size: 16px;
      }
    }
    .surface {
      min-height: 380px;
      max-height: calc(100dvh - 260px);
      @media (max-width: 600px) {
        min-height: 320px;
      }
    }
    .sub {
      padding: 18px 16px;
      .ttl {
        font-size: 20px;
      }
      .row {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 8px;
      }
      .btn_ptn_1 {
        padding: 10px;
        font-size: 14px;
      }
      .rotation-tools {
        margin-bottom: 20px;
        p {
          margin-bottom: 10px;
          font-size: 14px;
          font-weight: 700;
        }
        .actions {
          margin-bottom: 14px;
        }
        label {
          display: block;
          font-size: 13px;
        }
        input {
          margin-top: 12px;
          width: 100%;
          accent-color: var(--color-accent);
        }
      }
      details {
        margin-top: 18px;
        summary {
          padding: 12px 0;
          color: var(--color-muted);
          font-size: 14px;
          cursor: pointer;
        }
      }
    }
    #placement-help {
      margin-top: 12px;
    }
    #cancel-placement {
      margin-top: 10px;
      width: 100%;
      font-size: 12px;
    }
    .catalog-toggle {
      display: none;
      @media (max-width: 1400px) {
        min-height: 44px;
        display: block;
        color: var(--color-accent);
        background: var(--color-pressed-bg);
        border-color: var(--color-pressed-border);
        font-size: 14px;
        white-space: nowrap;
      }
    }
    .placement {
      padding: 8px 12px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      color: var(--color-accent);
      background: var(--color-pressed-bg);
      p {
        flex: 1;
        font-size: 14px;
        line-height: 1.5em;
      }
      #cancel-placement, .end {
        margin: 0;
        width: auto;
        min-height: 44px;
        font-size: 13px;
      }
    }
    .joins-toggle {
      min-height: 44px;
      color: var(--color-accent);
      background: var(--color-pressed-bg);
      border-color: var(--color-pressed-border);
      font-size: 14px;
      white-space: nowrap;
      &[aria-expanded="true"] {
        background: var(--color-builder-pressed-bg);
      }
    }
    .joins {
      position: fixed;
      z-index: 30;
      padding: 16px;
      width: calc(100% - 24px);
      max-width: 380px;
      display: none;
      color: var(--color-ink);
      background: var(--color-catalog-bg);
      overflow: auto;
      overscroll-behavior: contain;
      border: 1px solid var(--color-catalog-line);
      border-radius: 10px;
      box-shadow: 0 10px 28px #13283929;
      &.is-open {
        display: grid;
        gap: 12px;
      }
      .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        h2 {
          font-size: 18px;
          font-weight: 700;
        }
        button {
          min-height: 44px;
          font-size: 14px;
        }
      }
      .lead {
        color: var(--color-slate);
        font-size: 13px;
        line-height: 1.6em;
      }
      ul {
        margin: 0;
        padding: 0;
        display: grid;
        gap: 8px;
        list-style: none;
      }
      li {
        padding: 10px 12px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 12px;
        background: #fff;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        &.empty {
          display: block;
          color: var(--color-muted);
          font-size: 14px;
        }
        strong {
          font-size: 16px;
        }
        span {
          color: var(--color-slate);
          font-size: 14px;
        }
        button {
          padding: 4px 12px;
          min-height: 36px;
          color: var(--color-slate);
          background: #fff;
          font-size: 13px;
          font-weight: 700;
          border: 1px solid var(--color-border);
          border-radius: 6px;
        }
      }
      .how {
        padding: 10px 12px;
        color: var(--color-info);
        background: var(--color-info-bg);
        font-size: 13px;
        line-height: 1.6em;
        border-radius: 6px;
      }
    }
  }
}

.service-view {
  padding-bottom: 0;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  .sec_sekiraku_editor {
    min-height: 0;
    grid-column: 2;
    grid-row: 2;
    .main {
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 0;
      border-radius: 0;
    }
    &.viewing .wrap {
      grid-template-columns: minmax(0, 1fr);
    }
    .map-tools {
      padding: 8px 12px;
      display: none;
    }
    .canvas-bar {
      padding: 8px 16px;
      flex: 0 0 auto;
      background: transparent;
      @media (max-width: 700px) {
        padding: 4px 8px;
      }
      @media (max-width: 600px) {
        gap: 6px;
      }
      .zoom {
        @media (max-width: 600px) {
          margin-left: auto;
          gap: 4px;
        }
        button {
          @media (max-width: 600px) {
            padding: 6px 8px;
            min-width: 44px;
            min-height: 44px;
            font-size: 16px;
          }
        }
        output {
          @media (max-width: 600px) {
            font-size: 12px;
          }
        }
      }
    }
    .wrap {
      padding: 0;
      height: 100%;
      min-height: 0;
      align-items: stretch;
      gap: 12px;
    }
    .surface {
      height: 100%;
      min-height: 0;
      max-height: none;
      aspect-ratio: auto;
      flex: 1 1 0;
    }
    .map-viewport {
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      flex: 1 1 0;
      background: #ecf1f5;
      overflow: hidden;
      isolation: isolate;
      .canvas-bar {
        z-index: 1;
        padding: 8px 12px;
        max-width: 100%;
        flex-wrap: nowrap;
        align-self: start;
        justify-self: end;
        grid-area: 1 / 1;
        background: transparent;
        @media (max-width: 700px) {
          padding: 6px;
        }
      }
      .surface {
        width: 100%;
        min-width: 0;
        height: 100%;
        min-height: 0;
        align-self: stretch;
        grid-area: 1 / 1;
        overflow: hidden;
      }
    }
    .zoom button {
      @media (max-width: 700px) {
        padding: 6px 10px;
        min-height: 44px;
      }
    }
  }
  #booking-context {
    display: none;
  }
  .sec_sekiraku_tools .wrap {
    padding-top: 8px;
    padding-bottom: 8px;
    @media (max-width: 600px) {
      gap: 8px;
    }
    .mode {
      @media (max-width: 600px) {
        display: none;
      }
    }
    .floors button {
      @media (max-width: 600px) {
        padding: 8px 16px;
        min-height: 44px;
        font-size: 16px;
      }
    }
    .actions {
      @media (max-width: 600px) {
        width: auto;
        flex: 0;
      }
      .btn_ptn_1 {
        @media (max-width: 600px) {
          padding: 8px;
          min-height: 44px;
          flex: none;
          font-size: 12px;
        }
      }
    }
  }
  .sec_sekiraku_service_date {
    padding-top: 8px;
    padding-bottom: 8px;
    @media (max-width: 600px) {
      padding: 8px 16px;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px;
    }
    label {
      @media (max-width: 600px) {
        gap: 8px;
        grid-column: 1 / -1;
        font-size: 14px;
      }
    }
    input {
      @media (max-width: 600px) {
        padding: 6px;
        font-size: 14px;
      }
    }
    p {
      @media (max-width: 600px) {
        font-size: 11px;
      }
    }
    button {
      @media (max-width: 600px) {
        padding: 8px;
        min-height: 44px;
        font-size: 12px;
      }
    }
  }
  #choose-service-booking {
    min-height: 44px;
    @media (max-width: 600px) {
      padding: 6px 8px;
      font-size: 12px;
    }
  }
  .surface [data-seat-id][role="button"] {
    cursor: pointer;
    &:focus-visible {
      outline: 3px solid var(--color-accent);
    }
  }
  &.service-selected .sec_sekiraku_editor.viewing .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 29%);
    align-items: stretch;
    @media (max-width: 1000px) {
      padding-bottom: 0;
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .sec_sekiraku_head {
    flex: 0 0 auto;
    > .wrap {
      padding: 8px 24px;
      box-sizing: border-box;
      min-height: 64px;
      gap: 16px;
      @media (max-width: 1200px) {
        padding: 8px 12px;
        gap: 10px;
      }
      @media (max-width: 1000px) {
        flex-wrap: wrap;
      }
      @media (max-width: 700px) {
        padding: 6px 8px;
        gap: 6px;
      }
    }
    .brand {
      width: auto;
      min-width: 0;
      gap: 16px;
      flex: 0 1 auto;
      @media (max-width: 1200px) {
        gap: 10px;
      }
      @media (max-width: 1000px) {
        margin-right: auto;
      }
      h1 {
        display: none;
        font-size: 28px;
        @media (max-width: 1200px) {
          font-size: 24px;
        }
      }
      > span {
        padding: 0;
        font-size: 16px;
        border: 0;
        @media (max-width: 1200px) {
          display: block;
        }
      }
      .shared-store-label select {
        max-width: 170px;
        @media (max-width: 1200px) {
          max-width: 140px;
        }
      }
    }
    nav[aria-label="画面"] {
      display: none;
    }
  }
  #layout-screen {
    min-height: 0;
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    flex: 1;
    @media (max-width: 1000px) {
      grid-template-columns: 84px minmax(0, 1fr);
    }
    @media (max-width: 700px) {
      grid-template-columns: 68px minmax(0, 1fr);
    }
    > main {
      min-height: 0;
      display: flex;
      flex-direction: column;
      grid-column: 2;
      grid-row: 2;
      .sec_sekiraku_editor {
        min-height: 0;
        flex: 1;
      }
    }
  }
  #operating-rail {
    grid-column: 1;
    grid-row: 1 / -1;
  }
  .sec_sekiraku_service_date, .sec_sekiraku_tools, .sec_sekiraku_notes, .sec_sekiraku_navigation {
    display: none;
  }
  #shared-message:empty {
    display: none;
  }
  .sec_sekiraku_notice {
    grid-column: 2;
    grid-row: 1;
    .wrap {
      padding: 0 12px;
    }
  }
  #service-legend {
    padding: 6px 12px;
    gap: 6px 12px;
    flex: 0 0 auto;
    font-size: 12px;
    .key::before {
      width: 14px;
      height: 14px;
    }
  }
  .sec_sekiraku_service {
    margin: 8px 12px 8px 0;
    max-height: none;
    @media (max-width: 1000px) {
      bottom: 12px;
      margin: 0;
      max-height: 50dvh;
    }
  }
  #operating-toolbar {
    @media (max-width: 1000px) {
      flex: 1 0 100%;
      order: 3;
    }
  }
  #service-target-time {
    @media (max-width: 700px) {
      display: none;
    }
  }
}

.capacity_ptn_1 {
  padding: 14px;
  display: grid;
  gap: 12px;
  color: var(--color-ink);
  background: var(--color-pale);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  .head {
    display: grid;
    gap: 2px;
    h3 {
      font-size: 16px;
      font-weight: 700;
      line-height: 1.5em;
    }
    p {
      color: var(--color-muted);
      font-size: 13px;
      line-height: 1.5em;
    }
  }
  .slots {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 6px;
    list-style: none;
  }
  .slot {
    padding: 6px 0;
    width: 100%;
    min-height: 52px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1px;
    color: var(--color-accent);
    background: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3em;
    border: 1px solid var(--color-pressed-border);
    border-radius: 6px;
    small {
      font-size: 13px;
      font-weight: 700;
    }
    &[data-ok="false"] {
      color: #8a95a1;
      background: var(--color-gray-soft);
      border-color: var(--color-border);
    }
    &[aria-pressed="true"] {
      color: #fff;
      background: var(--color-accent);
      border-color: var(--color-accent);
      box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-accent);
      &[data-ok="false"] {
        color: var(--color-error);
        background: #fff;
        border: 2px solid var(--color-error);
        box-shadow: none;
      }
    }
    &:focus-visible {
      outline: 3px solid var(--color-focus);
      outline-offset: 2px;
    }
  }
  .hint {
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.6em;
  }
  .result {
    padding: 12px 14px;
    display: grid;
    gap: 8px;
    font-size: 14px;
    line-height: 1.6em;
    border-radius: 6px;
    &.ok {
      color: var(--color-confirmed);
      background: var(--color-confirmed-bg);
      border: 1px solid var(--color-info-line);
    }
    &.ng {
      color: #6c1d28;
      background: #fff1f2;
      border: 1px solid #f0b8bf;
      .title {
        color: var(--color-error);
      }
    }
    .title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.5em;
      svg {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
      }
    }
    .note {
      color: var(--color-slate);
      font-size: 13px;
    }
  }
  .near {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    span {
      font-weight: 700;
    }
    button {
      padding: 6px 14px;
      min-height: 40px;
      color: var(--color-accent);
      background: #fff;
      font-size: 15px;
      font-weight: 700;
      border: 1px solid var(--color-pressed-border);
      border-radius: 6px;
    }
  }
  .force {
    margin-top: 4px;
    padding-top: 10px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 2px 10px;
    color: var(--color-ink);
    border-top: 1px solid #f0c9ce;
    cursor: pointer;
    input {
      margin-top: 2px;
      padding: 0;
      width: 20px;
      height: 20px;
      min-height: 0;
      accent-color: var(--color-error);
    }
    strong {
      font-size: 15px;
    }
    small {
      grid-column: 2;
      color: var(--color-muted);
      font-size: 13px;
      line-height: 1.5em;
    }
  }
}

.sec_sekiraku_members {
  --color-members-accent: #087f8f;
  --color-members-line: #d4e0e8;
  --color-members-divider: #e2e9ee;
  padding: 24px 40px;
  color: #14263a;
  @media (max-width: 1000px) {
    padding: 24px;
  }
  @media (max-width: 700px) {
    padding: 20px 16px;
  }
  & > .wrap {
    margin: auto;
    max-width: 1390px;
  }
  .heading {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    @media (max-width: 700px) {
      display: block;
    }
    h2 {
      margin: 0 0 8px;
      font-size: 32px;
      @media (max-width: 700px) {
        font-size: 26px;
      }
    }
    p {
      color: var(--color-slate);
    }
    [data-identity] {
      padding: 12px 16px;
      color: var(--color-slate);
      background: var(--color-gray-pale);
      font-size: 14px;
      @media (max-width: 700px) {
        margin-top: 12px;
        display: inline-block;
      }
    }
  }
  .tabs {
    margin-bottom: 16px;
    display: flex;
    border-bottom: 1px solid var(--color-members-line);
    button {
      padding: 12px 24px;
      min-height: 44px;
      background: none;
      font: inherit;
      border: 0;
      border-bottom: 3px solid transparent;
    }
    [aria-current] {
      color: var(--color-members-accent);
      border-bottom-color: var(--color-members-accent);
      font-weight: 700;
    }
  }
  .panel, .invite, .roles, .link {
    margin: 12px 0;
    padding: 22px;
    border: 1px solid var(--color-members-line);
    border-radius: 8px;
    @media (max-width: 700px) {
      padding: 16px;
    }
  }
  h3 {
    margin: 0 0 14px;
    font-size: 24px;
  }
  .head, .actions, .send {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .head h3 {
    margin: 0;
  }
  [data-message] {
    margin: 12px 0;
    color: var(--color-members-accent);
  }
  .labels, .member {
    padding: 14px 18px;
    display: grid;
    grid-template-columns: minmax(140px, 1.4fr) minmax(120px, 1fr) minmax(80px, .6fr) minmax(150px, 1fr) minmax(180px, 1fr);
    align-items: center;
    gap: 16px;
    @media (max-width: 1000px) {
      padding: 12px 8px;
      grid-template-columns: minmax(110px, 1fr) 120px 80px minmax(120px, 1fr) minmax(140px, 1fr);
      gap: 10px;
    }
  }
  .labels {
    background: #eef4f7;
    @media (max-width: 700px) {
      display: none;
    }
  }
  .member {
    border-bottom: 1px solid var(--color-members-divider);
    .notice {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      color: var(--color-slate);
      font-size: 14px;
      &.none {
        color: var(--color-past-ink);
        font-weight: 700;
      }
      @media (max-width: 700px) {
        grid-column: 1 / -1;
      }
    }
    .mine {
      padding: 0;
      color: var(--color-members-accent);
      background: transparent;
      font-size: 13px;
      font-weight: 700;
      text-decoration: underline;
      border: 0;
    }
    @media (max-width: 700px) {
      grid-template-columns: 1fr auto;
      gap: 12px;
    }
    .actions {
      justify-content: flex-start;
      @media (max-width: 700px) {
        grid-column: 1 / -1;
      }
    }
    select {
      padding: 10px;
      width: 100%;
      max-width: 170px;
      min-height: 44px;
      background: #fff;
      font: inherit;
      border: 1px solid var(--color-border-field);
      border-radius: 6px;
    }
    button {
      padding: 8px 10px;
    }
    strong {
      @media (max-width: 700px) {
        grid-column: 1 / -1;
      }
    }
  }
  .invite {
    background: #edf7fa;
    label {
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-weight: 700;
    }
    input[type=email] {
      padding: 12px;
      width: 100%;
      min-height: 44px;
      background: #fff;
      font: inherit;
      border: 1px solid var(--color-border-field);
      border-radius: 6px;
    }
    fieldset {
      margin: 16px 0;
      padding: 0;
      border: 0;
    }
    legend {
      margin-bottom: 8px;
      font-weight: 700;
    }
    .choices {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      label {
        padding: 14px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        background: #fff;
        border: 1px solid var(--color-border-field);
        border-radius: 6px;
        &:has(:checked) {
          background: #f5fcfd;
          border-color: var(--color-members-accent);
        }
      }
      input {
        margin-top: 4px;
        accent-color: var(--color-members-accent);
      }
      small {
        margin-top: 4px;
        display: block;
        color: var(--color-slate);
        font-size: 14px;
        font-weight: 400;
      }
    }
    p {
      margin-top: 10px;
      color: var(--color-slate);
      font-size: 14px;
    }
  }
  .roles {
    background: #f6f8fa;
    & > div {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }
    strong, span {
      display: block;
    }
    p {
      margin: 0 0 10px;
      font-size: 14px;
    }
    strong {
      margin-bottom: 6px;
      font-size: 18px;
    }
    & > p {
      margin-top: 16px;
      color: var(--color-slate);
    }
  }
  .confirm {
    margin-top: 16px;
    padding: 16px;
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: 6px;
    p {
      margin-bottom: 12px;
    }
    button {
      margin-right: 8px;
    }
  }
  .link {
    background: #f4fafb;
    input {
      margin: 10px 0;
      padding: 12px;
      width: 100%;
      min-height: 44px;
      font: inherit;
      border: 1px solid var(--color-border-field);
    }
    .buttons {
      margin-top: 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    p {
      margin-top: 12px;
    }
    .copied {
      margin-top: 10px;
      color: var(--color-members-accent);
      font-weight: 700;
      &:empty {
        display: none;
      }
    }
  }
  .pending li {
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--color-members-divider);
  }
  [hidden] {
    display: none !important;
  }
  .invite .choices, .roles > div {
    @media (max-width: 700px) {
      grid-template-columns: 1fr;
    }
  }
  .send .primary {
    @media (max-width: 700px) {
      width: 100%;
    }
  }
  .basic {
    .columns {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      align-items: start;
      gap: 16px;
      @media (max-width: 1000px) {
        grid-template-columns: minmax(0, 1fr);
      }
    }
    .panel {
      margin: 0;
    }
    .side {
      display: grid;
      gap: 16px;
    }
    .net {
      margin-bottom: 16px;
      .lead {
        margin-bottom: 8px;
      }
    }
    .net_row {
      padding: 14px 0;
      display: grid;
      grid-template-columns: 200px minmax(0, 1fr);
      align-items: start;
      gap: 6px 20px;
      border-top: 1px solid var(--color-members-divider);
      @media (max-width: 700px) {
        grid-template-columns: minmax(0, 1fr);
      }
    }
    .net_key {
      padding-top: 10px;
      @media (max-width: 700px) {
        padding-top: 0;
      }
    }
    .net_body {
      display: flex;
      flex-direction: column;
      gap: 6px;
      textarea,
      .net_phone,
      select {
        padding: 10px 12px;
        min-height: 44px;
        color: var(--color-ink);
        background: #fff;
        font-size: 16px;
        border: 1px solid var(--color-border-field);
        border-radius: 6px;
      }
      textarea {
        line-height: 1.6em;
        resize: vertical;
      }
    }
    .net_switch {
      max-width: 320px;
    }
    .net_phone {
      max-width: 260px;
    }
    .net_inline {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 16px;
      label {
        display: flex;
        align-items: center;
        gap: 8px;
      }
    }
    .net_link {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      input {
        padding: 0 12px;
        min-height: 44px;
        min-width: 0;
        flex: 1 1 320px;
        color: var(--color-ink);
        background: var(--color-pale);
        font-size: 15px;
        border: 1px solid var(--color-border-field);
        border-radius: 6px;
      }
      .btn_ptn_1 {
        padding: 0 16px;
        min-height: 44px;
      }
    }
    .copy {
      color: var(--color-accent);
      border-color: var(--color-pressed-border);
    }
    .net_code {
      background: var(--color-pale);
      font-family: Consolas, 'Courier New', monospace;
      font-size: 13px;
    }
    .net_note,
    .net_none,
    .net_copied {
      color: var(--color-muted);
      font-size: 13px;
      line-height: 1.6em;
    }
    .net_none {
      padding-top: 10px;
      font-size: 14px;
    }
    .lead, .unsaved {
      margin: -4px 0 14px;
      color: var(--color-slate);
      font-size: 14px;
      line-height: 1.6em;
    }
    .unsaved {
      margin-top: 0;
      padding: 8px 12px;
      color: var(--color-past-ink);
      background: var(--color-warning-bg);
      border: 1px solid var(--color-warning-border);
      border-radius: 6px;
    }
    .day {
      padding: 8px 0;
      display: grid;
      grid-template-columns: 44px 144px 112px 12px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid var(--color-members-divider);
      @media (max-width: 700px) {
        grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr);
      }
      &:last-child {
        border-bottom: 0;
      }
      &[data-kind="saturday"] strong {
        color: #265c9c;
      }
      &[data-kind="sunday"] strong {
        color: #aa3948;
      }
      strong {
        font-size: 18px;
      }
      input[type="time"] {
        padding: 8px 10px;
        width: 100%;
        min-height: 44px;
        color: var(--color-ink);
        background: #fff;
        font-size: 16px;
        border: 1px solid var(--color-border-field);
        border-radius: 6px;
      }
      .switch {
        @media (max-width: 700px) {
          grid-column: 2 / -1;
        }
      }
      .to {
        color: var(--color-muted);
        text-align: center;
        @media (max-width: 700px) {
          display: none;
        }
      }
      input[name^="from-"] {
        @media (max-width: 700px) {
          grid-column: 2;
        }
      }
      .close {
        display: flex;
        align-items: center;
        gap: 8px;
        @media (max-width: 700px) {
          grid-column: 3;
        }
        input {
          max-width: 112px;
          @media (max-width: 700px) {
            max-width: none;
          }
        }
        small {
          padding: 2px 6px;
          color: var(--color-past-ink);
          background: var(--color-amber-bg);
          font-size: 12px;
          font-weight: 700;
          white-space: nowrap;
          border-radius: 4px;
        }
      }
      .off {
        grid-column: 3 / -1;
        color: var(--color-muted);
        font-size: 14px;
        @media (max-width: 700px) {
          grid-column: 2 / -1;
        }
      }
    }
    .switch {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border: 1px solid var(--color-border-field);
      border-radius: 6px;
      overflow: hidden;
      label {
        min-height: 42px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--color-slate);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        & + label {
          border-left: 1px solid var(--color-border-field);
        }
        &:has(:checked) {
          color: #fff;
          background: var(--color-members-accent);
        }
        &:has(:focus-visible) {
          outline: 3px solid var(--color-focus);
          outline-offset: -3px;
        }
      }
      input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
      }
    }
    .field {
      display: grid;
      grid-template-columns: 150px minmax(0, 220px);
      align-items: center;
      gap: 12px;
      @media (max-width: 700px) {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
      }
      span {
        font-weight: 700;
      }
      select {
        padding: 10px;
        min-height: 44px;
        background: #fff;
        font-size: 16px;
        border: 1px solid var(--color-border-field);
        border-radius: 6px;
      }
    }
    .note {
      margin: 6px 0 16px 162px;
      color: var(--color-slate);
      font-size: 13px;
      line-height: 1.6em;
      @media (max-width: 700px) {
        margin-left: 0;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
    .rules {
      dl {
        margin: 0;
      }
      .rule {
        padding: 12px 0;
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 12px;
        border-bottom: 1px solid var(--color-members-divider);
        &:last-child {
          padding-bottom: 0;
          border-bottom: 0;
        }
      }
      dt {
        font-weight: 700;
      }
      dd {
        margin: 0;
        display: grid;
        justify-items: start;
        gap: 8px;
        color: #24384c;
        font-size: 15px;
        line-height: 1.6em;
      }
      .inline {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        select {
          padding: 6px 8px;
          min-height: 40px;
          background: #fff;
          font-size: 15px;
          border: 1px solid var(--color-border-field);
          border-radius: 6px;
        }
      }
      .btn_ptn_1 {
        padding: 8px 14px;
        min-height: 40px;
        font-size: 14px;
      }
    }
    .save {
      margin-top: 16px;
      padding: 16px 22px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 16px;
      background: var(--color-pale);
      border: 1px solid var(--color-members-line);
      border-radius: 8px;
      @media (max-width: 700px) {
        flex-direction: column;
        align-items: stretch;
      }
      p {
        color: var(--color-slate);
        font-size: 14px;
      }
      .btn_ptn_1 {
        min-width: 160px;
      }
    }
  }
}
.sec_sekiraku_members .members_pane {
  .notice_warn {
    margin-bottom: 16px;
    padding: 14px 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    color: var(--color-offline-ink);
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: 10px;
    strong {
      font-size: 17px;
    }
    p {
      margin-top: 2px;
      font-size: 14px;
      line-height: 1.6em;
    }
  }
  .notice_hint {
    margin-top: 10px;
    color: var(--color-muted);
    font-size: 13px;
  }
}

.sec_shared_conflict {
  margin: 12px 0;
  padding: 16px;
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: 6px;
  p {
    margin-bottom: 12px;
  }
  ul {
    margin: 12px 0;
    max-height: 180px;
    font-size: 14px;
    line-height: 1.6em;
    overflow-wrap: anywhere;
    overflow: auto;
  }
  button {
    margin: 4px;
  }
}

#shared-message {
  margin: 12px 24px;
  color: var(--color-slate);
  font-size: 14px;
  line-height: 1.6em;
}
.shared-store-label select {
  padding: 10px;
  max-width: 220px;
  min-height: 44px;
  background: #fff;
  font: inherit;
  border: 1px solid var(--color-border-field);
  border-radius: 6px;
}
.sec_sekiraku_head .brand {
  max-width: 100%;
  flex-wrap: wrap;
  gap: 16px;
}
.sec_sekiraku_navigation .wrap {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
#access-reset {
  padding: 40px;
  line-height: 1.8em;
  h1 {
    font-size: 24px;
  }
  p {
    margin: 16px 0;
  }
}

.sec_sekiraku_offline {
  color: var(--color-offline-ink);
  background: var(--color-offline-bg);
  border-bottom: 1px solid var(--color-offline-border);
  .wrap {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    @media (max-width: 600px) {
      padding: 10px 16px;
    }
  }
  .icon {
    width: 22px;
    height: 22px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .text {
    min-width: 0;
    font-size: 15px;
    line-height: 1.5em;
  }
  .main {
    display: block;
    font-weight: 700;
  }
  .sub {
    display: block;
    font-size: 13px;
  }
  .wide {
    @media (max-width: 600px) {
      display: none;
    }
  }
  .narrow {
    display: none;
    @media (max-width: 600px) {
      display: inline;
    }
  }
}

.sec_sekiraku_joined {
  color: var(--color-info);
  background: var(--color-info-bg);
  border-bottom: 1px solid var(--color-info-line);
  .wrap {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    @media (max-width: 600px) {
      padding: 10px 16px;
    }
  }
  .icon {
    width: 22px;
    height: 22px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .text {
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5em;
  }
}

.sec_sekiraku_invite {
  background: var(--color-pale);
  .wrap {
    padding: 56px 24px;
    box-sizing: border-box;
    min-height: calc(100dvh - 69px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    @media (max-width: 600px) {
      padding: 24px 16px;
    }
  }
  .card {
    padding: 32px;
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    @media (max-width: 600px) {
      padding: 24px 20px;
    }
  }
  .label {
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5em;
  }
  h2 {
    margin-top: 6px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5em;
    @media (max-width: 600px) {
      font-size: 21px;
    }
  }
  .text p,
  .after {
    margin-top: 14px;
    line-height: 1.8em;
  }
  .after:empty {
    display: none;
  }
  ul {
    margin-top: 10px;
    padding-left: 1.4em;
    list-style: disc;
    line-height: 1.8em;
  }
  li {
    margin-top: 4px;
  }
  .account {
    margin-top: 20px;
    border-top: 1px solid var(--color-bar-line);
  }
  .row {
    padding: 12px 0;
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    border-bottom: 1px solid var(--color-bar-line);
    @media (max-width: 600px) {
      grid-template-columns: 96px minmax(0, 1fr);
    }
  }
  dt {
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.6em;
  }
  dd {
    font-weight: 700;
    line-height: 1.6em;
    overflow-wrap: anywhere;
  }
  .actions {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    @media (max-width: 600px) {
      flex-direction: column;
    }
  }
  /* アプリの中の画面（LINE など）で、外のブラウザで開くボタン（決定#1267） */
  .open {
    padding: 14px 16px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    svg {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  }
  .help {
    margin-top: 24px;
    padding: 16px;
    background: var(--color-pale);
    border: 1px solid var(--color-bar-line);
    border-radius: 8px;
  }
  h3 {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5em;
  }
  ol {
    margin-top: 8px;
    padding-left: 1.4em;
    list-style: decimal;
    line-height: 1.8em;
    /* 行の終わりに1文字だけ残さない（対応していないブラウザはふつうの折り返し） */
    text-wrap: pretty;
  }
  /* 手順の中のメニューの印（縦の点・横の点）。文字だと細くて見えにくいので絵にする */
  .dots {
    margin: 0 2px;
    padding: 2px;
    display: inline-flex;
    vertical-align: -4px;
    color: var(--color-ink);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }
  }
  .copy {
    margin-top: 14px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: #fff;
    svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  }
  .copied {
    margin-top: 10px;
    color: var(--color-info);
    font-size: 14px;
    line-height: 1.6em;
    overflow-wrap: anywhere;
    &:empty {
      display: none;
    }
  }
  .note {
    margin-top: 18px;
    color: var(--color-muted);
    font-size: 14px;
    line-height: 1.6em;
    overflow-wrap: anywhere;
    &:empty {
      display: none;
    }
  }
}

/* 印刷の紙（予約一覧は A4 縦・店内図は A4 横でフロアごと。決定#1244・KB の specs/offline-and-print.md）。
   画面には出さない。印刷のボタンから印刷するときだけ（body.printing）、この紙のほかを隠す。
   紙の向きは @page で決める。店内図の紙は名前つきの面（map）で横にする（両方を1回で印刷するときも、店内図だけ横になる） */
@page {
  size: A4 portrait;
  margin: 12mm 14mm;
}
@page map {
  size: A4 landscape;
  margin: 10mm 12mm;
}
body.printing {
  @media print {
    & > :not(.sec_sekiraku_print) {
      display: none !important;
    }
  }
}
.sec_sekiraku_print {
  display: none;
  color: var(--color-print-ink);
  background: #fff;
  font-family: var(--font-jp);
  @media print {
    body.printing & {
      display: block;
    }
  }
  .paper {
    min-height: 1020px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    break-after: page;
    &:last-child {
      break-after: auto;
    }
    &.landscape {
      min-height: 700px;
      gap: 14px;
      page: map;
    }
  }
  .head {
    padding-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    border-bottom: 2px solid var(--color-print-ink);
    h1 {
      font-size: 24px;
      line-height: 1.3em;
    }
    p {
      font-size: 14px;
      line-height: 1.6em;
    }
    .when {
      flex: none;
      text-align: right;
      strong {
        display: block;
        font-size: 18px;
      }
    }
  }
  table {
    width: 100%;
    font-size: 14px;
    line-height: 1.5em;
    border-collapse: collapse;
  }
  th {
    padding: 8px;
    background: var(--color-print-head-bg);
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-print-rule);
  }
  td {
    padding: 10px 8px;
    vertical-align: top;
    border-bottom: 1px solid var(--color-print-line);
    &.time {
      font-size: 16px;
      font-weight: 700;
      white-space: nowrap;
    }
    &.name {
      font-size: 15px;
      font-weight: 700;
      white-space: nowrap;
    }
    &.num, &.tel {
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    &.memo {
      color: var(--color-print-memo);
      font-size: 13px;
      overflow-wrap: anywhere;
    }
  }
  tr {
    break-inside: avoid;
    &.done td {
      color: var(--color-print-done);
    }
  }
  .note {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--color-print-muted);
    font-size: 12px;
    line-height: 1.6em;
    border-top: 1px solid var(--color-print-line);
    span:last-child {
      flex: none;
      white-space: nowrap;
    }
  }
  .body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    align-items: start;
    gap: 20px;
  }
  .map svg {
    width: auto;
    max-width: 100%;
    height: 540px;
    display: block;
    border: 1px solid var(--color-print-line);
    [data-seat-id] rect {
      fill: #fff;
    }
    .tag {
      fill: #142133;
      font-family: var(--font-jp);
      font-size: 21px;
      font-weight: 700;
    }
    .zone-label {
      fill: #636e79;
      font-family: var(--font-jp);
      font-size: 22px;
      font-weight: 600;
    }
    .label rect {
      fill: #fff;
      fill-opacity: .94;
      stroke: var(--color-accent);
      stroke-width: 2.5;
    }
    .label text {
      fill: #102a43;
      font-family: var(--font-jp);
      text-anchor: middle;
    }
  }
  .side {
    h2 {
      padding-bottom: 4px;
      font-size: 15px;
      line-height: 1.5em;
      border-bottom: 1px solid var(--color-print-rule);
    }
    ul {
      margin-bottom: 14px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      list-style: none;
    }
    li {
      padding: 6px 0;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 6px;
      font-size: 13px;
      line-height: 1.5em;
      border-bottom: 1px dashed var(--color-print-line);
      b {
        font-size: 14px;
      }
      small {
        display: block;
        color: var(--color-print-muted);
        font-size: 12px;
      }
    }
    p {
      color: var(--color-print-muted);
      font-size: 13px;
      line-height: 1.6em;
    }
  }
}

/* 未対応のネット仮予約（工程5・画像4〜6）。予約一覧の欄・件数の丸・営業画面の上の帯と左の列・予約の詳細の欄 */
.count_ptn_1 {
  padding: 0 7px;
  min-width: 24px;
  display: inline-block;
  color: var(--color-offline-ink);
  background: #ffe3a3;
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  border-radius: 999px;
}
#booking-mode .count_ptn_1 {
  margin-left: 8px;
}
.web_pending_ptn_1 {
  margin-bottom: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: 10px;
  @media (max-width: 600px) {
    padding: 12px;
  }
  .head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
  }
  .ttl {
    color: var(--color-offline-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5em;
    @media (max-width: 600px) {
      font-size: 16px;
    }
  }
  .text {
    color: var(--color-offline-ink);
    font-size: 14px;
    line-height: 1.6em;
  }
  .rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .row {
    padding: 10px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    background: #fff;
    border: 1px solid #f0d9a4;
    border-radius: 8px;
  }
  .when {
    font-size: 16px;
  }
  .guests {
    font-weight: 700;
  }
  .received {
    color: var(--color-muted);
    font-size: 13px;
  }
  .act {
    margin-left: auto;
    padding: 0 16px;
    min-height: 44px;
    color: #fff;
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    font-weight: 700;
    border-radius: 7px;
  }
}
.web_chip {
  padding: 0 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-offline-ink);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  font-size: 14px;
  font-weight: 700;
  border-radius: 7px;
  @media (max-width: 600px) {
    padding: 0 8px;
    font-size: 12px;
  }
}
#choose-service-booking.is_web_pending {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  .count_ptn_1 {
    padding: 0 5px;
    min-width: 20px;
    font-size: 12px;
    line-height: 20px;
  }
}
.web_todo_ptn_1 {
  margin-bottom: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--color-ink);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: 10px;
  @media (max-width: 600px) {
    padding: 12px;
  }
  .ttl {
    color: var(--color-offline-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5em;
  }
  .text,
  .note {
    color: var(--color-offline-ink);
    font-size: 14px;
    line-height: 1.6em;
  }
  .note {
    font-size: 13px;
  }
  .step {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .step_ttl {
    font-weight: 700;
  }
  .contacts {
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    background: #fff;
    border: 1px solid #f0d9a4;
    border-radius: 8px;
    @media (max-width: 600px) {
      grid-template-columns: 52px minmax(0, 1fr) auto;
      gap: 8px;
    }
  }
  .key {
    color: var(--color-muted);
    font-size: 14px;
  }
  .value {
    font-size: 16px;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
  }
  .go {
    padding: 0 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--color-accent);
    background: #fff;
    border: 1px solid var(--color-pressed-border);
    font-weight: 700;
    text-decoration: none;
    border-radius: 7px;
  }
  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    .btn_ptn_1 {
      min-height: 52px;
      font-size: 17px;
    }
  }
}

/* 知らせの設定（工程5・画像7・8）と、上の帯の「知らせ」のボタン。切り替えの部品は switch_ptn_1 */
.notice_bell {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
  }
  &[aria-current="page"] {
    background: var(--color-active-bg);
    border-color: var(--color-pressed-border);
  }
}
.switch_ptn_1 {
  padding: 3px;
  width: 56px;
  height: 32px;
  flex: none;
  display: flex;
  justify-content: flex-start;
  /* オフの色は、白い丸と白いカードから見分けられる濃さ（3:1 以上。--color-border では 1.4:1 だった・2026-10-25 のレビュー） */
  background: var(--color-muted);
  border: 0;
  border-radius: 999px;
  span {
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: 50%;
  }
  &[aria-checked="true"] {
    justify-content: flex-end;
    background: var(--color-accent);
  }
  &:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }
}
.sec_sekiraku_notices {
  padding: 24px 16px 40px;
  background: var(--color-pale);
  min-height: calc(100dvh - 69px);
  @media (max-width: 600px) {
    padding: 16px 12px 28px;
  }
  .wrap {
    margin: 0 auto;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4em;
  }
  .lead {
    margin-top: 4px;
    color: var(--color-slate);
    font-size: 14px;
    line-height: 1.6em;
  }
  .viewer {
    padding: 12px 14px;
    color: var(--color-info);
    background: var(--color-info-bg);
    border: 1px solid var(--color-info-line);
    font-size: 14px;
    border-radius: 8px;
  }
  .card {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
  }
  .card_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  h3 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5em;
  }
  /* 送り先（画像13・決定#1345）: Google のメールか、別のメールアドレス。選んでいる方を色で示す */
  .to {
    margin: 0;
    padding: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 0;
  }
  .to_ttl {
    margin-bottom: 6px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
  }
  .to_option {
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    &:has(> input:checked) {
      background: var(--color-selected-bg);
      border-color: var(--color-pressed-border);
    }
    > input {
      margin-top: 5px;
      flex: none;
    }
  }
  .to_text {
    display: flex;
    flex-direction: column;
    strong {
      font-size: 15px;
    }
    span {
      color: var(--color-slate);
      font-size: 14px;
      overflow-wrap: anywhere;
    }
  }
  .to_other {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .to_name {
    font-size: 15px;
    font-weight: 700;
  }
  .to_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .state_tag {
    padding: 2px 10px;
    flex: none;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid;
    border-radius: 999px;
    &.wait {
      color: var(--color-wait-ink);
      background: var(--color-wait-bg);
      border-color: var(--color-wait-line);
    }
    &.done {
      color: var(--color-confirmed);
      background: var(--color-active-bg);
      border-color: var(--color-pressed-border);
    }
  }
  .to_address {
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
  }
  .to_form {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .to_input {
    padding: 0 10px;
    min-height: 44px;
    color: var(--color-ink);
    background: #fff;
    font-size: 15px;
    border: 1px solid var(--color-border-field);
    border-radius: 6px;
  }
  .send {
    padding: 0 14px;
    min-height: 44px;
    font-size: 15px;
  }
  .to_note {
    color: var(--color-slate);
    font-size: 13px;
    line-height: 1.6em;
  }
  .to_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    .btn_ptn_1 {
      padding: 0 14px;
      min-height: 44px;
      font-size: 14px;
    }
    .again {
      color: var(--color-accent);
      border-color: var(--color-pressed-border);
    }
  }
  .device {
    padding: 8px 12px;
    background: var(--color-pale);
    font-size: 14px;
    border-radius: 8px;
  }
  .test {
    color: var(--color-accent);
    border-color: var(--color-pressed-border);
  }
  .note {
    color: var(--color-slate);
    font-size: 13px;
    line-height: 1.6em;
  }
  .install {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--color-info-bg);
    border: 1px solid var(--color-info-line);
    border-radius: 8px;
  }
  .install_ttl {
    font-weight: 700;
  }
  .steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    li {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      align-items: start;
      gap: 10px;
    }
  }
  .num {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--color-accent);
    font-size: 14px;
    font-weight: 700;
    border-radius: 50%;
  }
  .step {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .share {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.8;
    stroke-linejoin: round;
  }
  .install_note {
    color: var(--color-slate);
    font-size: 13px;
  }
  .devices {
    display: flex;
    flex-direction: column;
    li {
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border-bottom: 1px solid var(--color-gray-soft);
      &:last-child {
        border-bottom: 0;
      }
    }
    strong {
      font-size: 15px;
    }
    .meta {
      margin-left: 8px;
      color: var(--color-muted);
      font-size: 13px;
    }
    .state {
      color: var(--color-confirmed);
      font-size: 14px;
    }
    .stop {
      padding: 0 14px;
      min-height: 44px;
      font-size: 14px;
    }
    .none {
      color: var(--color-muted);
      font-size: 14px;
    }
  }
  .status {
    color: var(--color-muted);
    font-size: 13px;
    text-align: center;
  }
}