/* ===== ネスパ ネイル予約 — soft gel salon theme ===== */
:root{
  --bg:#FBF3F2;
  --card:#FFFFFF;
  --ink:#4B3A41;
  --muted:#9E828C;
  --rose:#DB84A2;
  --rose-deep:#C4688A;
  --rose-soft:#F3C3D5;
  --blush:#FCE7EE;
  --blush-2:#FBEFF2;
  --line:#F2D9E2;
  --shadow-sm:0 4px 14px rgba(196,104,138,.10);
  --shadow:0 12px 32px rgba(196,104,138,.15);
  --radius:20px;
  --radius-sm:13px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--ink);
  font-family:"Zen Maru Gothic","M PLUS Rounded 1c",system-ui,sans-serif;
  font-weight:500; line-height:1.8;
  background:
    radial-gradient(1100px 460px at 50% -220px,#FDE6EF 0%,rgba(253,230,239,0) 72%),
    linear-gradient(180deg,#FBF3F2 0%,#FBF6F4 100%);
  background-attachment:fixed;
}
.wrap{ max-width:660px; margin:0 auto; padding:22px 18px 66px; }

/* ---- hero ---- */
.hero{ text-align:center; padding:10px 0 2px; }
.hero-script{ font-family:"Parisienne",cursive; font-weight:400; color:var(--rose);
  font-size:29px; line-height:1; margin:0 0 -2px; }
h1{ font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:31px;
  letter-spacing:.02em; color:var(--rose-deep); margin:.12em 0 .3em; }
.hero-img{ display:block; width:100%; max-height:300px; object-fit:cover;
  border-radius:var(--radius); border:5px solid #fff; box-shadow:var(--shadow); margin:16px 0 2px; }

/* ---- description card ---- */
.desc{ position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 20px 18px; box-shadow:var(--shadow-sm);
  color:#5c4a51; font-size:14.5px; margin:24px 0 32px; }
.desc::before{ content:"💅"; position:absolute; top:-16px; left:22px; width:36px; height:36px;
  background:var(--blush); border-radius:50%; display:grid; place-items:center; font-size:17px;
  box-shadow:var(--shadow-sm); }

/* ---- section headings ---- */
h2{ font-size:19px; font-weight:700; color:var(--rose-deep); margin:32px 0 15px;
  display:flex; align-items:center; gap:11px; }
h2 .step{ flex:0 0 auto; width:31px; height:31px; border-radius:50%; color:#fff; font-size:15px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--rose),var(--rose-deep)); box-shadow:var(--shadow-sm); }

/* ---- menu cards ---- */
.menu-list{ display:flex; flex-direction:column; gap:12px; }
.menu-item{ display:flex; align-items:center; gap:13px; width:100%; cursor:pointer;
  background:var(--card); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:15px 17px; box-shadow:var(--shadow-sm); transition:transform .18s,border-color .18s,box-shadow .18s; }
.menu-item:hover{ border-color:var(--rose-soft); transform:translateY(-1px); }
.menu-item input[type=radio]{ flex:0 0 auto; width:20px; height:20px; margin:0; accent-color:var(--rose); }
.menu-name{ flex:1 1 auto; font-weight:700; font-size:15px; color:var(--ink); }
.menu-dur{ flex:0 0 auto; white-space:nowrap; font-weight:700; font-size:12.5px;
  color:var(--rose-deep); background:var(--blush); padding:5px 12px; border-radius:999px; }
.menu-item:has(input:checked){ border-color:var(--rose);
  background:linear-gradient(180deg,#fff,var(--blush-2)); box-shadow:0 9px 24px rgba(196,104,138,.20); }

/* ---- date chips ---- */
.day-list{ display:flex; flex-wrap:wrap; gap:11px; }
.day-item{ display:inline-flex; flex-direction:column; align-items:center; min-width:80px; cursor:pointer;
  background:var(--card); border:1.5px solid var(--line); border-radius:15px; padding:11px 15px;
  box-shadow:var(--shadow-sm); transition:transform .18s,border-color .18s,box-shadow .18s; }
.day-item input[type=radio]{ position:absolute; opacity:0; width:1px; height:1px; }
.day-md{ font-weight:700; font-size:18px; color:var(--rose-deep); }
.day-w{ font-size:12px; color:var(--muted); }
.day-item:hover{ border-color:var(--rose-soft); transform:translateY(-1px); }
.day-item:has(input:checked){ border-color:var(--rose);
  background:linear-gradient(180deg,#fff,var(--blush)); box-shadow:0 9px 24px rgba(196,104,138,.20); }
.empty{ background:var(--card); border:1.5px dashed var(--rose-soft); border-radius:14px;
  padding:16px; text-align:center; color:var(--muted); font-size:14px; }

/* ---- button ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 30px; border:0; border-radius:999px; cursor:pointer; text-decoration:none;
  font-family:inherit; font-weight:700; font-size:15px; color:#fff;
  background:linear-gradient(135deg,var(--rose),var(--rose-deep));
  box-shadow:0 10px 24px rgba(196,104,138,.30); transition:transform .18s,box-shadow .18s; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 15px 30px rgba(196,104,138,.38); }
.btn:active{ transform:translateY(0); }
.btn-row{ margin-top:24px; text-align:center; }

/* ---- slots ---- */
.slots-sub{ text-align:center; color:var(--muted); font-size:14px; margin:0 0 20px; }
.slot-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:10px; }
.slot{ text-align:center; padding:11px 6px 10px; border-radius:14px; font-weight:700; font-size:15px;
  border:1.5px solid var(--line); text-decoration:none; }
.slot .mk{ display:block; font-size:12px; font-weight:500; margin-top:1px; }
.slot.ok{ background:var(--card); color:var(--rose-deep); cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform .16s,border-color .16s,box-shadow .16s,background .16s; }
.slot.ok:hover{ border-color:var(--rose); background:linear-gradient(180deg,#fff,var(--blush));
  transform:translateY(-2px); box-shadow:0 8px 20px rgba(196,104,138,.20); }
.slot.ok .mk{ color:var(--rose); }
.slot.ng{ background:#F4EEF0; color:#C6B6BD; border-color:#ECE0E6; }

/* ---- summary + form ---- */
.summary{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; box-shadow:var(--shadow-sm); margin:8px 0 24px; }
.summary dt{ color:var(--muted); font-size:12.5px; }
.summary dd{ margin:2px 0 12px; font-weight:700; color:var(--ink); }
.summary dd:last-child{ margin-bottom:0; }
.field{ margin:0 0 17px; }
.field label{ display:block; font-weight:700; font-size:13.5px; color:var(--rose-deep); margin-bottom:6px; }
.field input{ width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:12px 14px;
  transition:border-color .15s,box-shadow .15s; }
.field input:focus{ outline:none; border-color:var(--rose); box-shadow:0 0 0 4px rgba(219,132,162,.16); }

/* ---- messages / done ---- */
.err{ color:#C0567B; background:#FBEAF0; border:1px solid #F3CFDD; border-radius:12px;
  padding:11px 15px; font-size:14px; font-weight:500; margin:12px 0; }
.card-note{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 24px; box-shadow:var(--shadow); text-align:center; }
.done-badge{ width:70px; height:70px; border-radius:50%; margin:2px auto 10px; display:grid; place-items:center;
  font-size:32px; background:linear-gradient(135deg,var(--blush),#fff); box-shadow:var(--shadow-sm); }
.back-link{ display:inline-block; margin-top:12px; color:var(--rose-deep); font-weight:700; text-decoration:none; }
.back-link:hover{ text-decoration:underline; }

/* ---- focus visibility ---- */
a:focus-visible,button:focus-visible,input:focus-visible,
.menu-item:focus-within,.day-item:focus-within{
  outline:3px solid rgba(219,132,162,.5); outline-offset:2px; }

/* ---- admin (kept functional, lightly themed) ---- */
nav{ font-size:14px; }
nav a{ color:var(--rose-deep); }
table.admin{ width:100%; border-collapse:collapse; background:#fff; border-radius:12px;
  overflow:hidden; box-shadow:var(--shadow-sm); }
table.admin th,table.admin td{ border:1px solid var(--line); padding:8px 10px; font-size:14px; }
table.admin th{ background:var(--blush); color:var(--rose-deep); }

@media (max-width:480px){
  h1{ font-size:27px; }
  .wrap{ padding:18px 14px 56px; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
  .btn:hover,.slot.ok:hover,.menu-item:hover,.day-item:hover{ transform:none; }
}