/* =========================================================
   base.css — 予約システム共通基盤
   デザイントークンは ../../assets/css/tokens.css（正本・v3）を
   先に読み込むこと。ここには :root を置かない。
   旧トークン名（--pink-deep 等）は tokens.css のエイリアスで解決。
   ========================================================= */

/* ---------- リセット ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.7;
  font-size:15.5px;
  -webkit-font-smoothing:antialiased;
  accent-color:var(--pink);
}
img{ max-width:100%; display:block }
a{ color:var(--pink-deep); text-decoration:none }
button{ font-family:inherit; color:inherit; background:none; border:0; cursor:pointer }
input,select,textarea{ font-family:inherit; color:inherit }
::selection{ background:var(--blush); color:var(--ink) }

:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:6px }
button:focus-visible, a:focus-visible{ outline:none; box-shadow:var(--focus-ring) }

.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.nw{ white-space:nowrap }
.muted{ color:var(--ink-soft) }
.num{ font-family:var(--num); font-weight:600; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; letter-spacing:.01em }

/* ---------- 見出し部品 ---------- */
.eyebrow{
  font-family:var(--display);
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:#8fa0a8; font-weight:600;
}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 26px;
  border-radius:999px;
  font-family:var(--sans); font-weight:700; font-size:15px; line-height:1.3;
  letter-spacing:.04em; text-align:center;
  transition:transform .16s var(--ease-out), box-shadow .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
}
.btn:active{ transform:scale(.97) }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none }

.btn-primary{
  color:#fff;
  background:var(--pink-deep);
}
.btn-ghost{
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
}
.btn-light{
  color:var(--pink-deep);
  background:var(--white);
  border:1px solid var(--line);
}
.btn-danger{
  color:#fff;
  background:var(--danger);
}
.btn-text{
  color:var(--ink-soft); font-weight:500; min-height:44px; padding:8px 14px;
}
.btn-sm{ min-height:38px; padding:7px 16px; font-size:13px }
.btn-block{ display:flex; width:100% }

@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{ background:var(--pink-deep-hover); transform:translateY(-1px) }
  .btn-ghost:hover{ border-color:var(--rose); background:rgba(61,85,96,.03) }
  .btn-light:hover{ transform:translateY(-1px) }
  .btn-danger:hover{ filter:brightness(1.08) }
  .btn-text:hover{ color:var(--pink-deep) }
  .btn:active{ transform:scale(.97) }
}

/* ---------- バッジ ---------- */
.badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.05em; line-height:1.5;
  white-space:nowrap;
}
.badge-pink{ background:var(--blush); color:var(--pink-deep) }
.badge-solid{ background:var(--pink-deep); color:#fff }
.badge-champ{ background:#f2eae2; color:#7d6047 }
.badge-ink{ background:rgba(61,85,96,.08); color:var(--ink-soft) }
.badge-line{ background:var(--white); color:var(--ink-soft); border:1px solid var(--line) }
.badge-danger{ background:var(--danger-soft); color:var(--danger) }

/* ---------- カード ---------- */
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:22px;
}

/* ---------- フォーム ---------- */
.field{ display:block; margin-bottom:18px }
.field-label{
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; letter-spacing:.05em;
  margin-bottom:7px; color:var(--ink);
}
.req{ color:var(--pink-deep); font-size:11px; font-weight:700; background:var(--blush); border-radius:999px; padding:1px 8px }
.opt{ color:var(--ink-soft); font-size:11px; font-weight:500; background:rgba(61,85,96,.06); border-radius:999px; padding:1px 8px }

.input,.select,.textarea{
  width:100%;
  min-height:50px;
  padding:12px 16px;
  font-size:16px;               /* iOSズーム防止のため16px以上 */
  line-height:1.5;
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:14px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.textarea{ min-height:96px; resize:vertical }
.select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f747e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:40px;
}
.input:focus,.select:focus,.textarea:focus{
  outline:none;
  border-color:var(--pink);
  box-shadow:var(--focus-ring);
}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{
  border-color:var(--danger);
  background:#fffafb;
}
.field-help{ font-size:12px; color:var(--ink-soft); margin-top:5px }
.field-error{
  display:flex; align-items:flex-start; gap:5px;
  font-size:12.5px; color:var(--danger); font-weight:600; margin-top:6px;
}
.field-error::before{ content:"！"; flex:none; font-size:10px; font-weight:700; background:var(--danger-soft); border-radius:50%; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; margin-top:2px }

/* ラジオ・チェックのカード型選択肢 */
.choice{
  display:flex; align-items:center; gap:10px;
  min-height:50px; padding:12px 16px;
  border:1.5px solid var(--line); border-radius:14px;
  background:var(--white); cursor:pointer; font-size:14.5px; font-weight:600;
  transition:border-color .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.choice input{ width:18px; height:18px; flex:none }
.choice:has(input:checked){
  border-color:var(--pink);
  background:var(--blush-2);
  box-shadow:0 0 0 1px var(--pink) inset;
}
.choice:has(input:focus-visible){ box-shadow:var(--focus-ring) }

/* ---------- モーダル ---------- */
body.ui-modal-open{ overflow:hidden }
.ui-overlay{
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(61,85,96,.5);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity .22s var(--ease-out);
  padding:0;
}
.ui-overlay.is-open{ opacity:1 }
.ui-overlay.is-leaving{ opacity:0; transition-duration:.16s }
.ui-modal{
  width:100%;
  max-height:88dvh;
  display:flex; flex-direction:column;
  background:#fff;
  border-radius:24px 24px 0 0;
  box-shadow:var(--shadow);
  transform:translateY(24px);
  transition:transform .26s var(--ease-out);
  overflow:hidden;
}
.ui-overlay.is-open .ui-modal{ transform:translateY(0) }
.ui-overlay.is-leaving .ui-modal{ transform:translateY(24px); transition-duration:.16s }
.ui-modal-head{
  flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px 12px;
}
.ui-modal-title{ font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:.02em }
.ui-modal-x{
  flex:none; width:40px; height:40px; border-radius:50%;
  font-size:20px; line-height:1; color:var(--ink-soft);
  background:rgba(61,85,96,.06);
  transition:background-color .18s var(--ease), transform .16s var(--ease-out);
}
.ui-modal-x:active{ transform:scale(.94) }
.ui-modal-body{ padding:4px 20px calc(24px + env(safe-area-inset-bottom)); overflow-y:auto }
@media (min-width:640px){
  .ui-overlay{ align-items:center; padding:24px }
  .ui-modal{
    border-radius:24px;
    transform:translateY(14px) scale(.975);
  }
  .ui-modal-sm{ max-width:420px }
  .ui-modal-md{ max-width:560px }
  .ui-modal-lg{ max-width:680px }
  .ui-overlay.is-open .ui-modal{ transform:translateY(0) scale(1) }
  .ui-overlay.is-leaving .ui-modal{ transform:translateY(10px) scale(.98) }
  .ui-modal-body{ padding:4px 24px 26px }
  .ui-modal-head{ padding:20px 24px 12px }
}
.ui-confirm-msg{ font-size:14.5px; color:var(--ink); padding:6px 0 4px; white-space:pre-line }
.ui-actions{
  display:flex; gap:10px; justify-content:flex-end; margin-top:20px;
}
.ui-actions .btn{ min-width:120px }
@media (max-width:480px){
  .ui-actions{ flex-direction:column-reverse }
  .ui-actions .btn{ width:100% }
}

/* ---------- トースト ---------- */
.ui-toast-wrap{
  position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:1400;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:min(92vw,420px);
  pointer-events:none;
}
.ui-toast{
  display:flex; align-items:center; gap:8px;
  max-width:100%;
  padding:12px 18px;
  border-radius:16px;
  background:rgba(61,85,96,.92);
  color:#fff; font-size:13.5px; font-weight:600; line-height:1.5;
  box-shadow:0 14px 34px -14px rgba(61,85,96,.6);
  opacity:0; transform:translateY(10px) scale(.97);
  transition:opacity .24s var(--ease-out), transform .24s var(--ease-out);
}
.ui-toast.is-in{ opacity:1; transform:translateY(0) scale(1) }
.ui-toast::before{
  content:""; flex:none; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(120deg,var(--pink),var(--pink-deep));
}
.ui-toast-error::before{ background:var(--danger) }
.ui-toast-success::before{ background:linear-gradient(120deg,var(--champ-soft),var(--champagne)) }

/* ---------- メールプレビュー ---------- */
.mailview{ padding-bottom:4px }
.mailview-meta{
  background:var(--white); border:1px solid var(--line);
  border-radius:14px 14px 0 0; padding:14px 16px;
}
.mailview-row{ display:flex; gap:10px; padding:3px 0; font-size:13px }
.mailview-k{ flex:none; width:64px; color:var(--ink-soft); font-weight:600 }
.mailview-v{ word-break:break-all }
.mailview-subject{ font-weight:700 }
.mailview-body{
  background:var(--white); border:1px solid var(--line); border-top:0;
  border-radius:0 0 14px 14px;
  padding:18px 16px;
  font-family:var(--sans); font-size:13.5px; line-height:1.9;
  white-space:pre-wrap; word-break:break-word;
  max-height:46dvh; overflow-y:auto;
}
.mailview-demo-note{ font-size:11.5px; color:var(--ink-soft); margin-top:10px; text-align:center }

/* ---------- 月カレンダー ---------- */
.cal{ user-select:none }
.cal-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.cal-title{ font-family:var(--serif); font-size:15.5px; font-weight:600; letter-spacing:.06em }
.cal-title-num{ font-family:var(--num); font-size:17px; font-weight:600 }
.cal-nav{
  width:44px; height:44px; border-radius:50%;
  font-size:20px; color:var(--pink-deep);
  background:var(--white); border:1px solid var(--line);
  transition:background-color .18s var(--ease), transform .16s var(--ease-out), opacity .2s;
  display:flex; align-items:center; justify-content:center;
}
.cal-nav:active{ transform:scale(.94) }
.cal-nav:disabled{ opacity:.3; cursor:not-allowed }
@media (hover:hover) and (pointer:fine){ .cal-nav:hover:not(:disabled){ background:rgba(61,85,96,.04) } }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px }
.cal-dow{ margin-bottom:4px }
.cal-dowcell{
  text-align:center; font-size:11px; font-weight:700; color:var(--ink-soft);
  letter-spacing:.1em; padding:2px 0;
}
.cal-dowcell.is-sun{ color:var(--pink-deep) }
.cal-dowcell.is-sat{ color:var(--champagne) }
.cal-loading{ grid-column:1/-1; text-align:center; padding:34px 0; color:var(--ink-soft); font-size:13px }
.cal-cell{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-height:52px;
  border-radius:12px;
  background:var(--white);
  border:1.5px solid transparent;
  transition:border-color .16s var(--ease), background-color .16s var(--ease), transform .16s var(--ease-out), box-shadow .16s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.cal-cell.is-empty{ background:transparent }
.cal-cell:disabled{ cursor:default; background:transparent }
.cal-cell:not(:disabled):active{ transform:scale(.95) }
@media (hover:hover) and (pointer:fine){
  .cal-cell:not(:disabled):hover{ border-color:var(--rose); background:rgba(61,85,96,.03) }
}
.cal-daynum{ font-family:var(--num); font-size:13.5px; font-weight:600; line-height:1 }
.cal-cell.is-sun .cal-daynum{ color:var(--pink-deep) }
.cal-cell.is-sat .cal-daynum{ color:var(--champagne) }
.cal-mark{ font-size:10.5px; font-weight:700; line-height:1.2 }
.cal-st-open .cal-mark{ color:var(--pink-deep) }
.cal-st-few .cal-mark{ color:var(--champagne) }
.cal-st-full .cal-mark{ color:var(--ink-soft) }
.cal-st-closed .cal-mark, .cal-st-past .cal-mark{ color:rgba(61,85,96,.32) }
.cal-st-closed .cal-daynum, .cal-st-past .cal-daynum{ color:rgba(61,85,96,.32) }
.cal-cell.is-today::after{
  content:""; position:absolute; top:6px; right:6px;
  width:5px; height:5px; border-radius:50%;
  background:var(--champagne);
}
.cal-cell.is-selected{
  background:var(--pink-deep);
  border-color:transparent;
}
.cal-cell.is-selected .cal-daynum,
.cal-cell.is-selected .cal-mark{ color:#fff }

.cal-legend{
  display:flex; flex-wrap:wrap; gap:10px 16px;
  margin-top:12px; font-size:11.5px; color:var(--ink-soft);
}
.cal-lg{ display:inline-flex; align-items:center; gap:5px }
.cal-lg small{ font-size:10px }
.cal-lgmark{
  font-style:normal; font-weight:700; font-size:11px;
  width:20px; height:20px; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--line);
}
.cal-lgmark.cal-st-open{ color:var(--pink-deep) }
.cal-lgmark.cal-st-few{ color:var(--champagne) }
.cal-lgmark.cal-st-full{ color:var(--ink-soft) }
.cal-lgmark.cal-st-closed{ color:rgba(61,85,96,.35) }

/* ---------- 時間スロット ---------- */
.slots-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:8px;
}
.slot{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-height:54px;
  border-radius:14px;
  border:1.5px solid var(--line);
  background:var(--white);
  transition:border-color .16s var(--ease), background-color .16s var(--ease), transform .16s var(--ease-out), box-shadow .16s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.slot:not(:disabled):active{ transform:scale(.95) }
@media (hover:hover) and (pointer:fine){
  .slot-open:hover, .slot-few:hover{ border-color:var(--pink); background:rgba(61,85,96,.02) }
  .slot-full:hover{ border-color:var(--champ-soft); background:#fdf8ef }
}
.slot-time{ font-family:var(--num); font-size:14px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1 }
.slot-mark{ font-size:10px; font-weight:700 }
.slot-open .slot-mark{ color:var(--pink-deep) }
.slot-few{ border-color:var(--champ-soft) }
.slot-few .slot-mark{ color:var(--champagne) }
.slot-full{ border-style:dashed; background:rgba(61,85,96,.035); color:var(--ink-soft) }
.slot-full .slot-mark{ color:var(--ink-soft) }
.slot-full .slot-mark::after{ content:" 待"; color:var(--champagne) }
.slot:disabled{ opacity:.35; cursor:not-allowed; background:transparent }
.slot.is-selected{
  background:var(--pink-deep);
  border-color:transparent;
}
.slot.is-selected .slot-time, .slot.is-selected .slot-mark{ color:#fff }
.slot.is-selected .slot-mark::after{ color:#fff }
.slots-empty{
  padding:26px 12px; text-align:center;
  color:var(--ink-soft); font-size:13.5px;
  background:rgba(61,85,96,.035); border-radius:14px;
}

/* ---------- テーブル（管理画面） ---------- */
.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.tbl{
  width:100%; border-collapse:collapse; font-size:13.5px;
  background:var(--white);
}
.tbl th{
  text-align:left; font-size:11.5px; letter-spacing:.08em; font-weight:700;
  color:var(--ink-soft); padding:10px 12px;
  border-bottom:1.5px solid var(--line);
  white-space:nowrap;
}
.tbl td{
  padding:12px; border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.tbl tbody tr{ transition:background-color .15s var(--ease) }
@media (hover:hover){ .tbl tbody tr:hover{ background:rgba(61,85,96,.03) } }

/* ---------- アニメーション基盤 ---------- */
.fade-up{
  opacity:0; transform:translateY(10px);
  transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.fade-up.is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}