/* =========================================================
   M's MEMBERS — 試作版スタイル（架空データ）
   外部フォント・外部リソースへの通信なし
   ========================================================= */

:root{
  --ink:        #17151b;
  --ink-2:      #3a3541;
  --ink-3:      #6b6472;
  --ink-4:      #9a93a1;
  --paper:      #f6f2ea;
  --paper-2:    #fffdf8;
  --paper-3:    #efe9df;
  --line:       #e0d9cc;
  --line-2:     #cec5b5;
  --violet:     #6b5c8c;
  --violet-2:   #574a75;
  --violet-pale:#eee9f3;
  --rose:       #8a6072;
  --sage:       #5f7060;
  --amber:      #8a7340;

  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", "Meiryo", system-ui, sans-serif;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Times New Roman", "Noto Serif JP", serif;

  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;

  --banner-h: 26px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

h1,h2,h3,p,dl,dd,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
img{ max-width:100%; }

:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:2px;
  border-radius:3px;
}

/* ---------- shell ---------- */
.shell{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

.demo-banner{
  position:sticky; top:0; z-index:60;
  min-height:var(--banner-h);
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:4px 12px;
  background:var(--ink);
  color:#f3ede2;
  font-size:11.5px;
  letter-spacing:.06em;
  line-height:1.4;
  text-align:center;
}
.demo-banner .dot{
  width:6px; height:6px; border-radius:50%;
  background:#b79ede;
  flex:none;
}

/* ---------- reviewer nav ---------- */
.reviewer{
  position:sticky; top:var(--banner-h); z-index:50;
  background:rgba(246,242,234,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.reviewer__top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:7px 14px 3px;
}
.wordmark{
  display:flex; align-items:baseline; gap:7px;
  min-width:0;
  font-family:var(--serif);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wordmark__group{ font-size:11px; letter-spacing:.2em; color:var(--ink-3); }
.wordmark__sep{ color:var(--line-2); }
.wordmark__app{ font-size:14.5px; letter-spacing:.16em; }

.roles__list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  padding:0 8px 6px;
}
.role{
  appearance:none; background:none; border:0;
  border-bottom:2px solid transparent;
  padding:5px 2px 6px;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  cursor:pointer;
  color:var(--ink-3);
  min-height:44px;
  justify-content:center;
}
.role__jp{ font-size:12.5px; letter-spacing:.03em; }
.role__en{ font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-4); }
.role[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--violet); }
.role[aria-selected="true"] .role__en{ color:var(--violet); }
.role:hover{ color:var(--ink); }

/* ---------- stage ---------- */
.stage{ flex:1 1 auto; min-height:0; display:flex; }
.view{ flex:1 1 auto; min-width:0; display:flex; }
.view[hidden]{ display:none; }

.page-title{
  font-family:var(--serif);
  font-size:20px; letter-spacing:.06em; font-weight:600;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.sub{ font-size:12.5px; color:var(--ink-3); margin-top:4px; }

.tag{
  font-size:10px; letter-spacing:.08em;
  padding:1px 6px; border-radius:999px;
  background:var(--violet-pale); color:var(--violet-2);
  border:1px solid #e0d6ec;
  white-space:nowrap;
  line-height:1.6;
}
.note{
  font-size:11.5px; line-height:1.65; color:var(--ink-3);
  margin-top:8px;
}
.note--tight{ margin-top:6px; }

/* ---------- buttons ---------- */
.btn{
  appearance:none; cursor:pointer;
  border-radius:var(--r-m);
  border:1px solid var(--line-2);
  background:var(--paper-2);
  padding:11px 16px;
  font-size:14px; letter-spacing:.03em;
  min-height:44px;
  transition:background .15s, border-color .15s, color .15s;
}
.btn:hover{ border-color:var(--ink-3); }
.btn--solid{ background:var(--ink); color:#f6f2ea; border-color:var(--ink); }
.btn--solid:hover{ background:var(--violet-2); border-color:var(--violet-2); }
.btn--ghost{ background:transparent; }
.btn--violet{ background:var(--violet); color:#fff; border-color:var(--violet); }
.btn--danger{ background:#fff; color:#8a3b3b; border-color:#d9b6b6; }
.btn--danger:hover{ background:#8a3b3b; color:#fff; border-color:#8a3b3b; }
.btn--lg{ width:100%; padding:14px 18px; font-size:15px; min-height:52px; }
.btn--tiny{ padding:6px 11px; font-size:11.5px; min-height:32px; border-radius:999px; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn:disabled:hover{ border-color:var(--line-2); background:var(--paper-2); }
.btn--solid:disabled:hover{ background:var(--ink); }

/* ---------- fields ---------- */
.field{ display:block; margin-bottom:12px; }
.field__label{
  display:block; font-size:11.5px; letter-spacing:.06em;
  color:var(--ink-3); margin-bottom:5px;
}
.input{
  width:100%; max-width:100%;
  font:inherit; font-size:15px;
  padding:11px 12px;
  min-height:46px;
  color:var(--ink);
  background:var(--paper-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-m);
}
.input:focus{ border-color:var(--violet); }
.input--num{
  font-family:var(--serif);
  font-size:24px; letter-spacing:.04em;
  text-align:right;
  font-variant-numeric:tabular-nums;
  padding-right:44px;
}
.input-yen{ position:relative; }
.input-yen__suffix{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:13px; color:var(--ink-3); pointer-events:none;
}
select.input{
  appearance:none; -webkit-appearance:none;
  padding-right:36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% - 2px), calc(100% - 15px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.err{
  min-height:0; font-size:12px; color:#8a3b3b; margin-top:2px;
}
.err:empty{ display:none; }

/* =========================================================
   お客様（電話枠）
   ========================================================= */
.view--customer{
  gap:28px;
  padding:20px 16px 28px;
  justify-content:center;
  align-items:flex-start;
}
.phone{
  width:100%;
  max-width:390px;
  flex:0 0 auto;
  height:min(844px, calc(100dvh - 132px));
  min-height:520px;
}
.phone__inner{
  height:100%;
  display:flex; flex-direction:column;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(23,21,27,.04), 0 18px 44px -30px rgba(23,21,27,.42);
}
.phone__scroll{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  padding:16px 16px 20px;
  scrollbar-width:thin;
}
.phone-side{
  max-width:300px;
  font-size:12.5px; line-height:1.85; color:var(--ink-3);
  border-left:1px solid var(--line);
  padding-left:22px;
  margin-top:10px;
}
.phone-side p + p{ margin-top:10px; }
.side__title{
  font-family:var(--serif); font-size:13px; letter-spacing:.12em;
  color:var(--ink); margin-bottom:10px; font-weight:600;
}

.greet{
  font-size:12px; letter-spacing:.06em; color:var(--ink-3);
  margin-bottom:10px;
}

/* 会員証カード */
.card{
  position:relative;
  background:linear-gradient(158deg,#221f28 0%, #17151b 52%, #241f31 100%);
  color:#efe9de;
  border-radius:var(--r-l);
  padding:15px 16px 14px;
  overflow:hidden;
}
.card::after{
  content:"";
  position:absolute; right:-38px; top:-46px;
  width:132px; height:132px; border-radius:50%;
  border:1px solid rgba(183,158,222,.26);
}
.card__top{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.card__brand{
  font-family:var(--serif); font-size:12px; letter-spacing:.26em;
  color:#e6ddf1;
}
.card__rank{
  font-size:10px; letter-spacing:.1em;
  border:1px solid rgba(230,221,241,.36);
  border-radius:999px; padding:1px 8px;
  color:#d9cfe8; white-space:nowrap;
}
.card__rule{
  height:1px; background:rgba(239,233,222,.16);
  margin:12px 0 11px;
}
.card__nick{
  font-family:var(--serif);
  font-size:19px; letter-spacing:.08em; line-height:1.35;
}
.card__id{
  margin-top:5px;
  font-size:11px; letter-spacing:.18em; color:#a99fb8;
  font-variant-numeric:tabular-nums;
}
.card__foot{
  margin-top:10px;
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:10.5px; color:#a99fb8; letter-spacing:.04em;
}
.card--full{ padding:19px 18px 18px; }
.card--full .card__nick{ font-size:23px; }

/* 残高 + コード */
.balance{
  margin-top:12px;
  display:flex; gap:14px; align-items:center;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:13px 14px;
}
.balance__left{ flex:1 1 auto; min-width:0; }
.balance__right{ flex:0 0 auto; }
.balance__label{
  font-size:11px; letter-spacing:.08em; color:var(--ink-3);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.balance__value{
  font-family:var(--serif);
  font-size:38px; line-height:1.15; letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  margin-top:2px;
}
.balance__value--lg{ font-size:46px; }
.balance__value .unit{ font-size:16px; margin-left:4px; color:var(--ink-2); letter-spacing:.08em; }
.balance__meta{ font-size:11px; color:var(--ink-3); margin-top:3px; }
.balance--full{ align-items:flex-start; }

/* 提示コード（QRではない） */
.codetile{
  width:112px;
  background:var(--paper-2);
  border:1px solid var(--line-2);
  border-radius:12px;
  padding:9px 9px 0;
  display:flex; flex-direction:column; align-items:center;
}
.codetile--lg{ width:136px; padding:11px 11px 0; }
.codegrid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:repeat(12,1fr);
  gap:1.5px;
  width:100%;
  aspect-ratio:1 / 1;
}
.codegrid i{ background:var(--paper-3); border-radius:1px; }
.codegrid i.on{ background:var(--ink); }
.codegrid i.vi{ background:var(--violet); }
.codetile__cap{
  font-size:8.5px; letter-spacing:.04em; color:var(--ink-3);
  padding:5px 0 6px; text-align:center; line-height:1.3;
}

/* ブロック */
.block{ margin-top:20px; }
.block__title{
  font-family:var(--serif);
  font-size:13px; letter-spacing:.14em; font-weight:600;
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding-bottom:7px;
  border-bottom:1px solid var(--line);
  margin-bottom:9px;
}
.rows > li{
  display:flex; align-items:baseline; gap:10px;
  padding:8px 0;
  border-bottom:1px dotted var(--line);
  font-size:13px;
}
.rows > li:last-child{ border-bottom:0; }
.rows .row__store{
  flex:none; font-size:10px; letter-spacing:.06em;
  padding:2px 7px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--ink-2);
  background:var(--paper);
}
.rows .row__main{ flex:1 1 auto; min-width:0; }
.rows .row__sub{ display:block; font-size:11px; color:var(--ink-3); }
.rows .row__time{
  flex:none; font-variant-numeric:tabular-nums;
  font-size:12px; color:var(--ink-2); letter-spacing:.02em;
}

.deflist > div{
  display:flex; gap:12px; justify-content:space-between;
  padding:8px 0; border-bottom:1px dotted var(--line);
  font-size:13px;
}
.deflist > div:last-child{ border-bottom:0; }
.deflist dt{ color:var(--ink-3); font-size:12px; flex:none; }
.deflist dd{ text-align:right; min-width:0; word-break:break-word; }

.ledger > li{
  display:flex; gap:10px; align-items:baseline;
  padding:9px 0; border-bottom:1px dotted var(--line);
  font-size:13px;
}
.ledger > li:last-child{ border-bottom:0; }
.ledger__when{
  flex:none; width:78px;
  font-size:11px; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.ledger__what{ flex:1 1 auto; min-width:0; }
.ledger__what small{ display:block; font-size:11px; color:var(--ink-3); }
.ledger__pt{
  flex:none; font-family:var(--serif); font-size:15px;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.ledger__pt.minus{ color:var(--rose); }
.ledger__pt.zero{ color:var(--ink-4); }
.is-void{ opacity:.55; }
.void-mark{
  font-size:9.5px; letter-spacing:.08em; border:1px solid var(--line-2);
  border-radius:999px; padding:0 6px; color:var(--ink-3); margin-left:6px;
}

.perks > li{
  padding:10px 12px; margin-bottom:8px;
  border:1px solid var(--line);
  border-left:2px solid var(--violet);
  border-radius:var(--r-s);
  background:var(--paper-2);
  font-size:13px;
}
.perks small{ display:block; font-size:11px; color:var(--ink-3); margin-top:2px; }

.news > li{
  padding:12px 0; border-bottom:1px solid var(--line);
}
.news time{ font-size:11px; color:var(--ink-3); letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.news h3{ font-size:14px; margin:3px 0 3px; font-weight:600; }
.news p{ font-size:12.5px; color:var(--ink-2); }

.stores{ display:grid; gap:12px; }
.storecard{
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:14px 15px;
  background:var(--paper-2);
  border-top:3px solid var(--sc, var(--violet));
}
.storecard__mono{
  font-family:var(--serif); font-size:11px; letter-spacing:.28em;
  color:var(--sc, var(--violet));
}
.storecard__name{
  font-family:var(--serif); font-size:18px; letter-spacing:.06em;
  margin-top:2px;
}
.storecard__concept{
  font-size:11.5px; letter-spacing:.08em; color:var(--ink-3); margin-top:2px;
}
.storecard__body{ font-size:12.5px; color:var(--ink-2); margin-top:8px; }
.storecard__meta{ font-size:11px; color:var(--ink-3); margin-top:8px; }

/* 下部ナビ */
.tabbar{
  flex:none;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  background:rgba(255,253,248,.97);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar__btn{
  appearance:none; border:0; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:8px 2px 9px;
  min-height:56px;
  font-size:10.5px; letter-spacing:.04em;
  color:var(--ink-4);
}
.tabbar__ico svg{
  width:21px; height:21px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linejoin:round; stroke-linecap:round;
}
.tabbar__btn.is-on{ color:var(--violet-2); }
.tabbar__btn.is-on .tabbar__ico svg{ stroke-width:1.8; }

/* =========================================================
   店舗タブレット
   ========================================================= */
.view--tablet{ padding:22px 16px 40px; justify-content:center; }
.pad{ width:100%; max-width:1040px; }
.pad__head{
  display:flex; gap:16px; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.rate{
  font-size:12px; letter-spacing:.03em;
  background:var(--violet-pale); color:var(--violet-2);
  border:1px solid #e0d6ec; border-radius:999px;
  padding:6px 13px;
}
.steps{
  display:flex; gap:8px; flex-wrap:wrap;
  margin:14px 0 16px;
}
.steps__item{
  display:flex; align-items:center; gap:7px;
  font-size:12px; color:var(--ink-4);
  padding:4px 12px 4px 4px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--paper-2);
}
.steps__item span{
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--paper-3); color:var(--ink-3);
  font-size:10.5px;
}
.steps__item.is-on{ color:var(--ink); border-color:var(--violet); }
.steps__item.is-on span{ background:var(--violet); color:#fff; }

.pad__grid{
  display:grid; gap:18px;
  grid-template-columns:1fr;
}
.panel{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:16px 16px 18px;
}
.panel + .panel{ margin-top:18px; }
.panel__title{
  font-family:var(--serif);
  font-size:13px; letter-spacing:.14em; font-weight:600;
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding-bottom:8px; border-bottom:1px solid var(--line);
  margin:0 0 12px;
}
.panel__title:not(:first-child){ margin-top:22px; }

.segmented{ display:grid; gap:8px; grid-template-columns:1fr; margin-bottom:6px; }
.segbtn{
  appearance:none; cursor:pointer; text-align:left;
  border:1px solid var(--line-2); background:var(--paper);
  border-radius:var(--r-m);
  padding:11px 13px; min-height:52px;
  display:flex; flex-direction:column; gap:1px;
}
.segbtn b{ font-family:var(--serif); font-size:14.5px; letter-spacing:.06em; font-weight:600; }
.segbtn small{ font-size:11px; color:var(--ink-3); }
.segbtn[aria-checked="true"]{
  border-color:var(--ink); background:var(--ink); color:#f3ede2;
}
.segbtn[aria-checked="true"] small{ color:#b3aabc; }

.lookup__actions{ display:flex; gap:8px; flex-wrap:wrap; }
.lookup__actions .btn{ flex:1 1 160px; }

.quick{ display:flex; gap:8px; flex-wrap:wrap; }
.quick button{
  appearance:none; cursor:pointer;
  border:1px solid var(--line-2); background:var(--paper);
  border-radius:999px; padding:8px 14px; min-height:40px;
  font-size:12.5px; font-variant-numeric:tabular-nums;
}
.quick button:hover{ border-color:var(--ink-3); }

.draft{ }
.draft__member{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.draft__nick{ font-family:var(--serif); font-size:20px; letter-spacing:.06em; }
.draft__id{ font-size:11.5px; letter-spacing:.14em; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.draft__calc{ margin-top:10px; }
.draft__calc > div{
  display:flex; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px dotted var(--line);
  font-size:13.5px;
}
.draft__calc dt{ color:var(--ink-3); font-size:12.5px; }
.draft__calc dd{ font-variant-numeric:tabular-nums; }
.draft__calc .big{
  border-bottom:0; padding-top:12px; align-items:baseline;
}
.draft__calc .big dd{
  font-family:var(--serif); font-size:30px; letter-spacing:.02em;
}
.draft__calc .add dd{ color:var(--violet-2); font-weight:600; }
.draft__actions{ display:grid; gap:8px; margin-top:14px; }
.empty{
  padding:24px 4px; text-align:center;
  color:var(--ink-4); font-size:12.5px;
}
.ok-banner{
  margin-top:12px;
  border:1px solid #cfe0cf; background:#f2f7f1;
  color:var(--sage); border-radius:var(--r-m);
  padding:10px 12px; font-size:12.5px;
}

.padlog > li{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 0; border-bottom:1px dotted var(--line);
  font-size:12.5px;
}
.padlog > li:last-child{ border-bottom:0; }
.padlog__body{ flex:1 1 auto; min-width:0; }
.padlog__body small{ display:block; font-size:11px; color:var(--ink-3); }
.padlog__pt{ flex:none; font-family:var(--serif); font-size:15px; font-variant-numeric:tabular-nums; }
.padlog__pt.minus{ color:var(--rose); }

/* =========================================================
   顧客管理
   ========================================================= */
.view--crm{ padding:22px 16px 40px; justify-content:center; }
.crm{ width:100%; max-width:1180px; }
.crm__head{ padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.crm__body{ display:grid; gap:18px; grid-template-columns:1fr; }
.crm__filters{
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r-l); padding:14px 14px 4px;
}
.crm__count{ font-size:11.5px; color:var(--ink-3); margin:10px 2px 8px; }

.memberlist{ display:grid; gap:8px; }
.memberlist button{
  width:100%; text-align:left; cursor:pointer;
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r-m); padding:12px 13px;
  display:flex; gap:12px; align-items:center;
  min-height:60px;
}
.memberlist button:hover{ border-color:var(--line-2); }
.memberlist button[aria-current="true"]{
  border-color:var(--violet); box-shadow:inset 2px 0 0 var(--violet);
}
.ml__main{ flex:1 1 auto; min-width:0; }
.ml__nick{ font-size:14.5px; letter-spacing:.03em; }
.ml__id{ font-size:10.5px; letter-spacing:.14em; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.ml__pt{
  flex:none; text-align:right;
}
.ml__pt b{ font-family:var(--serif); font-size:17px; font-variant-numeric:tabular-nums; }
.ml__pt small{ display:block; font-size:10px; color:var(--ink-3); }
.novisit{ color:var(--ink-4); }

.crm__detail{
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r-l); padding:18px 16px 20px;
  min-width:0;
}
.crm__detail:focus{ outline:none; }
.detail__head{
  display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.detail__nick{ font-family:var(--serif); font-size:24px; letter-spacing:.06em; }
.detail__id{ font-size:12px; letter-spacing:.16em; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.detail__stats{
  display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:14px;
}
.stat{
  border:1px solid var(--line); border-radius:var(--r-m);
  padding:10px 12px; background:var(--paper);
}
.stat dt{ font-size:10.5px; letter-spacing:.08em; color:var(--ink-3); }
.stat dd{
  font-family:var(--serif); font-size:19px; margin-top:2px;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
  word-break:break-word;
}
.stat dd.sm{ font-size:14px; font-family:var(--sans); letter-spacing:0; }

.memo textarea{
  width:100%; font:inherit; font-size:13.5px; line-height:1.7;
  padding:11px 12px; min-height:96px; resize:vertical;
  border:1px solid var(--line-2); border-radius:var(--r-m);
  background:var(--paper-2); color:var(--ink);
}
.memo textarea:focus{ border-color:var(--violet); }
.memo__actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }

.optable > li{
  display:flex; gap:10px; align-items:flex-start;
  padding:9px 0; border-bottom:1px dotted var(--line);
  font-size:12.5px;
}
.optable > li:last-child{ border-bottom:0; }
.op__when{ flex:none; width:92px; font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.op__body{ flex:1 1 auto; min-width:0; }
.op__body small{ display:block; font-size:11px; color:var(--ink-3); }

/* =========================================================
   引き継ぎ
   ========================================================= */
.view--migration{ padding:22px 16px 40px; justify-content:center; }
.mig{ width:100%; max-width:1040px; }
.mig__head{ padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.mig__cols{ display:grid; gap:18px; grid-template-columns:1fr; margin-bottom:18px; }
.panel--fact{ border-left:3px solid var(--sage); }
.panel--unknown{ border-left:3px solid var(--amber); }
.facts > li{
  position:relative; padding:8px 0 8px 20px;
  border-bottom:1px dotted var(--line);
  font-size:13px;
}
.facts > li:last-child{ border-bottom:0; }
.facts > li::before{
  content:""; position:absolute; left:2px; top:15px;
  width:7px; height:7px; border-radius:50%;
  background:var(--sage);
}
.facts--unknown > li::before{
  background:none; border:1px solid var(--amber);
}

.stages{ display:grid; gap:2px; }
.stage-item{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 0; border-bottom:1px dotted var(--line);
}
.stage-item:last-child{ border-bottom:0; }
.stage-item__no{
  flex:none; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line-2); color:var(--ink-3);
  font-size:11px; font-variant-numeric:tabular-nums;
}
.stage-item > div{ flex:1 1 auto; min-width:0; }
.stage-item b{ font-size:14px; letter-spacing:.04em; }
.stage-item p{ font-size:12px; color:var(--ink-3); margin-top:2px; }
.stage-item__state{
  flex:none; font-size:10.5px; letter-spacing:.04em;
  color:var(--ink-3); border:1px solid var(--line-2);
  border-radius:999px; padding:2px 9px;
  background:var(--paper);
  align-self:center;
}

/* =========================================================
   ダイアログ・トースト
   ========================================================= */
.dialog-layer{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background:rgba(23,21,27,.44);
}
.dialog-layer[hidden]{ display:none; }
.dialog{
  width:100%; max-width:430px;
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:20px 18px 18px;
  box-shadow:0 30px 60px -30px rgba(23,21,27,.6);
}
.dialog h2{
  font-family:var(--serif); font-size:17px; letter-spacing:.08em;
  font-weight:600; margin-bottom:10px;
}
.dialog p{ font-size:13px; color:var(--ink-2); }
.dialog .deflist{ margin:12px 0 4px; }
.dialog__actions{ display:grid; gap:8px; margin-top:16px; }
.dialog__note{ font-size:11.5px; color:var(--ink-3); margin-top:10px; }

.scanner{
  position:relative;
  aspect-ratio:4/3; width:100%;
  border-radius:var(--r-m);
  background:linear-gradient(160deg,#1e1b24,#14121a);
  overflow:hidden;
  display:grid; place-items:center;
  margin-bottom:12px;
}
.scanner__frame{
  width:56%; aspect-ratio:1;
  border:1px solid rgba(183,158,222,.5);
  border-radius:10px;
  position:relative;
}
.scanner__frame::before, .scanner__frame::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:rgba(183,158,222,.85);
  animation:sweep 2.4s ease-in-out infinite;
}
.scanner__frame::after{ animation-delay:1.2s; opacity:.4; }
@keyframes sweep{ 0%{top:4%} 50%{top:94%} 100%{top:4%} }
.scanner__label{
  position:absolute; bottom:8px; left:0; right:0;
  text-align:center; font-size:10.5px; letter-spacing:.1em;
  color:#a99fb8;
}
@media (prefers-reduced-motion: reduce){
  .scanner__frame::before,.scanner__frame::after{ animation:none; top:48%; }
}
.pickmember{ display:grid; gap:8px; }
.pickmember button{
  width:100%; text-align:left; cursor:pointer; min-height:52px;
  border:1px solid var(--line-2); background:var(--paper);
  border-radius:var(--r-m); padding:10px 12px;
  display:flex; justify-content:space-between; gap:10px; align-items:center;
}
.pickmember button:hover{ border-color:var(--ink-3); }
.pickmember b{ font-size:14px; font-weight:600; }
.pickmember small{ font-size:10.5px; letter-spacing:.12em; color:var(--ink-3); }

.toasts{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:18px; z-index:120;
  display:grid; gap:8px; width:min(420px, calc(100vw - 32px));
  pointer-events:none;
}
.toast{
  background:var(--ink); color:#f3ede2;
  border-radius:var(--r-m); padding:11px 14px;
  font-size:12.5px; line-height:1.6;
  box-shadow:0 14px 30px -18px rgba(0,0,0,.7);
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 899px){
  body[data-role="customer"] .shell{ height:100dvh; min-height:0; overflow:hidden; }
  .demo-banner, .reviewer{ flex-shrink:0; }
  .roles__list{ grid-template-columns:1fr 1.4fr 1fr 1fr; }
  .role__jp{ white-space:nowrap; font-size:12px; letter-spacing:0; }
  input, select, textarea{ font-size:16px; }
  .phone-side{
    display:none;
  }
  .view--customer{ padding:0; }
  .phone{
    max-width:none;
    height:100%;
    flex:1 1 auto;
    min-height:0;
    align-self:stretch;
    display:flex;
  }
  .phone__inner{
    border:0; border-radius:0; box-shadow:none;
    background:var(--paper);
    flex:1 1 auto;
    min-height:0;
  }
  .phone__scroll{ background:var(--paper); }
}

@media (min-width: 700px){
  .segmented{ grid-template-columns:repeat(3,1fr); }
  .detail__stats{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .stores{ grid-template-columns:repeat(3,1fr); }
  .draft__actions{ grid-template-columns:1fr 1fr; }
  .dialog__actions{ grid-template-columns:1fr 1fr; }
  .crm__filters{ display:grid; gap:0 14px; grid-template-columns:1.4fr 1fr 1fr; }
  .mig__cols{ grid-template-columns:1fr 1fr; }
}

@media (min-width: 900px){
  .pad__grid{ grid-template-columns:1.05fr .95fr; align-items:start; }
  .crm__body{ grid-template-columns:minmax(280px, 360px) 1fr; align-items:start; }
  .reviewer__top{ padding:9px 22px 4px; }
  .roles__list{
    grid-template-columns:repeat(4, max-content);
    gap:22px; padding:0 22px 7px;
  }
  .role{ align-items:flex-start; }
  .wordmark__group{ font-size:12px; }
  .wordmark__app{ font-size:16px; }
  .view--tablet,.view--crm,.view--migration{ padding:26px 22px 52px; }
}