/* セルフ脱毛ＲＥＯ 顧客LIFF — 金サンバースト基調（customer-demo.html 準拠）
   テーマ色は config.themePrimary を --gold に流し込んで差し替え可能。 */
:root{
  --gold:#C9A227; --gold-deep:#A8841C; --gold-soft:#F4E8C6; --gold-tint:#FBF4E0;
  --ivory:#FBF7EF; --paper:#FFFFFF; --ink:#2B2622; --muted:#8C8378; --faint:#B7AFA3;
  --line:#EBE3D4; --sage:#5C8A82; --sage-soft:#E4EEEB;
  --ok:#5C8A82; --warn:#C98A3A; --no:#C16A5A;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"Noto Sans JP",system-ui,sans-serif;color:var(--ink);background:var(--ivory);
  min-height:100vh;
}
#app{max-width:480px;margin:0 auto;background:var(--paper);min-height:100vh;display:flex;flex-direction:column;
  box-shadow:0 0 40px rgba(60,48,20,.06)}

.appbar{display:flex;align-items:center;gap:10px;padding:13px 16px;
  background:linear-gradient(180deg,#fff,#FFFDF7);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5}
.mark{width:30px;height:30px;flex:0 0 auto}
.brand{font-family:"Zen Maru Gothic";font-weight:700;font-size:15px;letter-spacing:.04em;line-height:1}
.brand small{display:block;font-family:"Noto Sans JP";font-weight:500;font-size:10px;color:var(--muted);letter-spacing:.18em;margin-top:3px}
.back{background:none;border:none;cursor:pointer;color:var(--muted);font:inherit;font-weight:600;font-size:13.5px;padding:4px 2px;margin-right:2px}

.progress{display:flex;gap:6px;padding:11px 18px 4px;background:#FFFDF7}
.progress i{height:4px;flex:1;border-radius:999px;background:#EEE6D6;transition:.35s}
.progress i.on{background:var(--gold)}

.appbody{flex:1;overflow-y:auto}
.pad{padding:18px 18px 26px}

.appfoot{padding:13px 16px calc(15px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);position:sticky;bottom:0}
.cta{width:100%;border:none;border-radius:14px;padding:15px;font:inherit;font-weight:700;font-size:15.5px;
  font-family:"Zen Maru Gothic";letter-spacing:.04em;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));box-shadow:0 8px 20px rgba(168,132,28,.32);transition:.15s}
.cta:active{transform:translateY(1px)}
.cta[disabled]{background:#E4DCCB;color:#aaa099;box-shadow:none;cursor:not-allowed}
.footnote{font-size:11px;color:var(--faint);text-align:center;margin-top:9px;line-height:1.5}

.screen{display:none;animation:fade .28s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.sec-h{font-family:"Zen Maru Gothic";font-weight:700;font-size:18px;margin:2px 0 3px;letter-spacing:.03em}
.sec-s{font-size:12px;color:var(--muted);margin:0 0 16px;line-height:1.6}

/* menu list */
.catlabel{font-size:11px;font-weight:700;color:var(--gold-deep);letter-spacing:.1em;margin:18px 0 9px;display:flex;align-items:center;gap:8px}
.catlabel:first-of-type{margin-top:2px}
.catlabel::after{content:"";flex:1;height:1px;background:var(--line)}
.opt{width:100%;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:14px 15px;
  cursor:pointer;display:flex;align-items:center;gap:12px;margin-bottom:10px;transition:.14s;font:inherit}
.opt.sel{border-color:var(--gold);background:#FFF8E8;box-shadow:0 0 0 3px rgba(201,162,39,.14)}
.opt .name{font-weight:700;font-size:14.5px;font-family:"Zen Maru Gothic"}
.opt .meta{font-size:11.5px;color:var(--muted);margin-top:3px}
.opt .badge{display:inline-block;background:var(--gold);color:#fff;font-size:9.5px;font-weight:700;border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:1px}
.price{margin-left:auto;text-align:right;flex:0 0 auto}
.price b{font-family:"Zen Maru Gothic";font-size:15px;color:var(--ink)}
.price s{display:block;font-size:10px;color:var(--faint);font-weight:500}
.price .tbd{font-size:11px;color:var(--warn);font-weight:700}
.dur{font-size:10.5px;color:var(--muted);display:block;margin-top:2px}

.staffopt{margin-top:8px;border:1.5px dashed #E4D49E;background:#FFFBF0;border-radius:13px;padding:13px 14px;display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.staffopt .cb{width:22px;height:22px;border-radius:6px;border:2px solid var(--gold);flex:0 0 auto;margin-top:1px;display:grid;place-items:center;background:#fff;color:#fff;font-weight:700;font-size:14px}
.staffopt.on .cb{background:var(--gold)}
.staffopt .t{font-size:12.5px;line-height:1.6}
.staffopt .t b{font-family:"Zen Maru Gothic"}

.infoband{margin:18px 0 0;background:#FAF5EA;border:1px solid var(--line);border-radius:13px;padding:12px 14px;font-size:11.5px;color:var(--muted);line-height:1.7}
.infoband b{color:var(--ink)}

/* calendar */
.calbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.calbar button{background:#F6F1E6;border:1px solid var(--line);border-radius:10px;width:38px;height:38px;cursor:pointer;color:var(--ink);font-size:17px}
.calbar button:disabled{opacity:.32;cursor:not-allowed}
.calbar .mo{font-family:"Zen Maru Gothic";font-weight:700;font-size:16px}
.dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;color:var(--muted);margin-bottom:6px}
.dow .sun{color:#C16A5A} .dow .sat{color:#5C7AA8}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.day{aspect-ratio:1/1;border:1px solid transparent;border-radius:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#FBF7EE;transition:.12s;font-family:"Zen Maru Gothic";font-weight:600;font-size:14px}
.day.empty{background:none;cursor:default}
.day.past{background:none;color:#D4CCC0;cursor:not-allowed}
.day.ok{border-color:var(--line)}
.day.ok:hover{border-color:var(--gold);background:#FFF8E8}
.day.sel{background:var(--gold);border-color:var(--gold);color:#fff}

/* slots */
.selbar{background:#FFF8E8;border:1px solid #EAD89C;border-radius:12px;padding:11px 14px;margin-bottom:16px;font-size:12.5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.selbar .d{font-family:"Zen Maru Gothic";font-weight:700;font-size:13.5px}
.selbar .du{margin-left:auto;background:#fff;border:1px solid #EAD89C;border-radius:7px;padding:2px 8px;font-size:11px;color:var(--gold-deep);font-weight:700;white-space:nowrap}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.slot{border:1.5px solid var(--line);background:#fff;border-radius:11px;padding:12px 4px;text-align:center;font-family:"Zen Maru Gothic";font-weight:700;font-size:15px;cursor:pointer;transition:.12s}
.slot:hover{border-color:var(--gold);background:#FFF8E8}
.slot.sel{background:var(--gold);color:#fff;border-color:var(--gold)}
.slots-empty{color:var(--muted);font-size:13px;padding:20px 0;text-align:center}
.timehint{font-size:11px;color:var(--faint);margin:14px 0 0;text-align:center;line-height:1.6}

/* form */
.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:7px;font-family:"Zen Maru Gothic"}
.field label em{color:#C16A5A;font-style:normal;font-size:11px;margin-left:5px}
.field input,.field textarea,.field select{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;font:inherit;font-size:14.5px;background:#FFFDF8;color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(201,162,39,.13)}
.field textarea{resize:vertical;min-height:74px}

/* confirm / done receipt */
.receipt{border:1.5px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;margin-top:4px}
.receipt .top{background:linear-gradient(180deg,#FFF8E8,#FFFDF7);padding:16px;border-bottom:1px dashed #E5D9BC;text-align:center}
.receipt .top .mn{font-family:"Zen Maru Gothic";font-weight:700;font-size:18px}
.receipt .top .cat{font-size:11px;color:var(--gold-deep);font-weight:700;letter-spacing:.08em;margin-bottom:5px}
.rrow{display:flex;padding:13px 16px;border-bottom:1px solid #F2ECDD;font-size:13.5px}
.rrow:last-child{border-bottom:none}
.rrow .k{width:92px;color:var(--muted);flex:0 0 auto}
.rrow .v{font-weight:600;font-family:"Zen Maru Gothic"}
.rtotal{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;background:#FBF6EA}
.rtotal .k{font-weight:700;font-family:"Zen Maru Gothic"}
.rtotal .v{font-family:"Zen Maru Gothic";font-weight:700;font-size:20px;color:var(--gold-deep)}
.note-conf{font-size:11.5px;color:var(--muted);text-align:center;margin:16px 4px 0;line-height:1.7}

/* done */
.done{text-align:center;padding:28px 18px 8px}
.check{width:74px;height:74px;margin:6px auto 18px;border-radius:50%;background:var(--gold);color:#fff;font-size:38px;display:grid;place-items:center}
.done h2{font-family:"Zen Maru Gothic";font-weight:700;font-size:21px;margin:0 0 8px}
.done p{font-size:13px;color:var(--muted);line-height:1.75;margin:0 0 18px}

/* loading / toast */
.loading{position:fixed;inset:0;background:rgba(251,247,239,.7);display:grid;place-items:center;z-index:50}
/* hidden 属性を確実に効かせる（display指定がUAの[hidden]を上書きするため） */
.loading[hidden],.progress[hidden],.appfoot[hidden],.infoband[hidden],.toast[hidden],.back[hidden]{display:none !important}
.spinner{width:38px;height:38px;border:4px solid var(--gold-soft);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:12.5px;padding:10px 16px;border-radius:10px;z-index:60;max-width:88%;text-align:center;line-height:1.5}

@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}