@charset "UTF-8";
/* UMI& mikkabi - pre-open booking */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

#umi-mk-app, #umi-mk-app * { box-sizing: border-box; }

#umi-mk-app {
  --ink:#12212B; --paper:#F2F4F3; --surface:#FFFFFF;
  --water:#1F6F78; --water-soft:#DEEAEA; --water-deep:#12474D;
  --mikan:#E8833A; --mikan-soft:#FBEADC;
  --stone:#7E888E; --line:#DFE3E2; --danger:#B3453A;
  font-family:"Zen Kaku Gothic New", -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color:var(--ink); line-height:1.6; max-width:880px; margin:0 auto;
  -webkit-font-smoothing:antialiased;
}
#umi-mk-app .mono { font-family:"IBM Plex Mono", ui-monospace, monospace; font-feature-settings:"tnum"; }
#umi-mk-app .umi-boot { padding:60px 0; text-align:center; color:var(--stone); }

#umi-mk-app h2.umi-h { font-size:22px; font-weight:700; margin:0 0 6px; letter-spacing:.02em; }
#umi-mk-app h3.umi-h { font-size:15px; font-weight:700; margin:0 0 14px; letter-spacing:.08em; }
#umi-mk-app .lede { color:var(--stone); font-size:14px; margin:0 0 22px; }
#umi-mk-app .eyebrow { font-size:11px; letter-spacing:.16em; color:var(--stone); font-weight:500; margin-bottom:6px; }
#umi-mk-app .card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:22px; margin-bottom:16px; }
#umi-mk-app .row { display:flex; gap:12px; flex-wrap:wrap; }
#umi-mk-app .grow { flex:1; }

#umi-mk-app label.umi-l { display:block; font-size:12px; font-weight:500; letter-spacing:.06em; color:var(--stone); margin-bottom:6px; }
#umi-mk-app .field { margin-bottom:14px; }
#umi-mk-app input, #umi-mk-app select, #umi-mk-app textarea {
  font-family:inherit; font-size:16px; width:100%; padding:11px 12px; margin:0;
  border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink);
}
#umi-mk-app input:disabled { background:var(--paper); color:var(--stone); }
#umi-mk-app .hint { font-size:11.5px; color:var(--stone); margin-top:5px; line-height:1.6; }

#umi-mk-app button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
#umi-mk-app .btn { padding:12px 22px; border-radius:6px; font-size:14px; font-weight:500; background:var(--water); color:#fff; transition:background .15s; }
#umi-mk-app .btn:hover { background:var(--water-deep); }
#umi-mk-app .btn[disabled] { background:var(--line); color:var(--stone); cursor:not-allowed; }
#umi-mk-app .btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
#umi-mk-app .btn.ghost:hover { background:var(--paper); }
#umi-mk-app .btn.danger { background:transparent; color:var(--danger); border:1px solid #E4C9C5; }
#umi-mk-app .btn.danger:hover { background:#FBF2F1; }
#umi-mk-app .btn.sm { padding:8px 14px; font-size:13px; }
#umi-mk-app button:focus-visible, #umi-mk-app input:focus-visible, #umi-mk-app select:focus-visible { outline:2px solid var(--water); outline-offset:2px; }

/* calendar */
#umi-mk-app .cal-head { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
#umi-mk-app .nav { width:34px; height:34px; border:1px solid var(--line); border-radius:6px; background:var(--surface); font-size:16px; line-height:1; }
#umi-mk-app .nav:hover:not([disabled]) { border-color:var(--water); color:var(--water); }
#umi-mk-app .nav[disabled] { opacity:.35; cursor:not-allowed; }
#umi-mk-app .cal-year { font-weight:700; font-size:14px; letter-spacing:.08em; margin-left:4px; }
#umi-mk-app .months { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
@media (max-width:700px){ #umi-mk-app .months { grid-template-columns:1fr; } }
#umi-mk-app .mo-name { font-size:13px; font-weight:500; letter-spacing:.1em; color:var(--stone); margin-bottom:10px; text-align:center; }
#umi-mk-app .grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
#umi-mk-app .dow { text-align:center; font-size:10px; letter-spacing:.06em; color:var(--stone); padding-bottom:6px; }
#umi-mk-app .dow.sat { color:#3E6E8E; }
#umi-mk-app .dow.sun { color:#A5564B; }
#umi-mk-app .cell {
  aspect-ratio:1/1; border-radius:5px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  font-size:13px; background:var(--surface); border:1px solid var(--line); padding:0; transition:transform .08s;
}
#umi-mk-app .cell .st { font-size:9px; color:var(--stone); }
#umi-mk-app .cell.empty { border:none; background:transparent; cursor:default; }
#umi-mk-app .cell.open:hover { border-color:var(--water); transform:translateY(-1px); }
#umi-mk-app .cell.past { background:var(--paper); color:#C3C9C8; cursor:not-allowed; }
#umi-mk-app .cell.closed { background:var(--paper); border-color:transparent; color:#C3C9C8; cursor:not-allowed; }
#umi-mk-app .cell.booked { background:var(--water-deep); border-color:var(--water-deep); color:#fff; cursor:not-allowed; }
#umi-mk-app .cell.booked .st { color:#9CC3C6; }
#umi-mk-app .cell.sel { background:var(--water); border-color:var(--water); color:#fff; }
#umi-mk-app .cell.sel .st { color:#CDE4E5; }
#umi-mk-app .cell.preview { background:var(--water-soft); border-color:var(--water); }
#umi-mk-app .cell.edge { box-shadow:inset 0 0 0 2px var(--ink); }
#umi-mk-app .legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:18px; font-size:12px; color:var(--stone); }
#umi-mk-app .legend i { width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:6px; vertical-align:-1px; border:1px solid var(--line); }

/* booking card */
#umi-mk-app .bk { border:1px solid var(--line); border-radius:8px; padding:18px; background:var(--surface); margin-bottom:10px; }
#umi-mk-app .bk.cancelled { opacity:.55; }
#umi-mk-app .bk-top { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
#umi-mk-app .bk-dates { font-weight:700; font-size:15px; }
#umi-mk-app .bk-meta { font-size:13px; color:var(--stone); line-height:1.9; }
#umi-mk-app .pill { font-size:11px; padding:3px 8px; border-radius:3px; letter-spacing:.06em; font-weight:500; }
#umi-mk-app .pill.ok { background:var(--water-soft); color:var(--water-deep); }
#umi-mk-app .pill.no { background:#F2F0EF; color:var(--stone); }

#umi-mk-app .sum { position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--line); padding:14px 0 4px; margin-top:18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
#umi-mk-app .sum-price { font-size:19px; font-weight:700; }
#umi-mk-app .err { background:#FBF2F1; border:1px solid #E4C9C5; color:var(--danger); font-size:13.5px; padding:11px 13px; border-radius:6px; margin-bottom:14px; }
#umi-mk-app .ok-box { background:#F3F9F9; border:1px solid var(--water); border-radius:8px; padding:18px; margin-bottom:16px; }
#umi-mk-app .note { background:var(--paper); border-radius:6px; padding:13px 15px; font-size:12.5px; color:var(--stone); line-height:1.8; }
#umi-mk-app .empty-state { text-align:center; padding:36px 20px; color:var(--stone); font-size:14px; line-height:1.9; }
#umi-mk-app .spin { display:inline-block; width:13px; height:13px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:umi-spin .7s linear infinite; vertical-align:-2px; margin-right:7px; }
@keyframes umi-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ #umi-mk-app * { transition:none !important; animation:none !important; } }