:root{
  --pink:#c2185b; --pink-d:#8e0038; --bg:#faf7f8; --ink:#222; --muted:#777;
  --line:#e7dde1; --danger:#c62828;
}
*{box-sizing:border-box}
[hidden]{display:none !important}  /* display:flex等がhidden属性を上書きしないように */
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-text-size-adjust:100%;
}
#hdr{background:var(--pink); color:#fff; padding:12px 16px; position:sticky; top:0; z-index:10}
#storeName{font-weight:700; font-size:17px}
#storeSvc{font-size:12px; opacity:.9}
#discBar{
  background:#fff3cd; color:#7a5b00; font-size:12px; line-height:1.5;
  padding:8px 16px; border-bottom:1px solid #f0e3a8; position:sticky; top:52px; z-index:9;
}
main{max-width:560px; margin:0 auto; padding:14px}
.card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; margin:0 0 14px}
.card h2{font-size:15px; margin:0 0 10px}
.card.disabled{opacity:.45; pointer-events:none}
.muted{color:var(--muted); font-size:13px; line-height:1.6; margin:6px 0}
.small{font-size:12px}
.chk{display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; margin-top:10px; cursor:pointer}
.chk input{margin-top:3px; width:20px; height:20px; flex:0 0 auto}
.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:none; border-radius:10px; padding:13px 16px; font-size:15px; font-weight:600;
  cursor:pointer; background:#eee; color:#333; text-align:center;
}
.btn.primary{background:var(--pink); color:#fff}
.btn.primary:disabled{background:#d9b3c2; cursor:not-allowed}
.btn.ghost{background:#fff; border:1.5px solid var(--pink); color:var(--pink)}
.btn.danger{background:#fff; border:1.5px solid var(--danger); color:var(--danger)}
.btn.camera{background:var(--pink); color:#fff}
.btn.big{width:100%; padding:16px; font-size:16px; margin-top:12px}
.seg{display:flex; gap:8px}
.seg-btn{flex:1; padding:12px; border:1.5px solid var(--line); background:#fff; border-radius:10px; font-size:15px; cursor:pointer}
.seg-btn.active{border-color:var(--pink); background:#fde9f0; color:var(--pink-d); font-weight:700}
.seg-hint{display:block; font-size:11px; font-weight:400; color:var(--muted); margin-top:2px}
.code-input{width:100%; padding:14px; font-size:17px; border:1.5px solid var(--line); border-radius:10px; margin-top:8px}
#codeGateMsg:empty{display:none !important}
#previewWrap{margin-top:12px; text-align:center}
#preview{max-width:100%; max-height:46vh; border-radius:10px}
#loading{margin-top:12px; color:var(--pink-d); font-size:14px; display:flex; align-items:center; gap:8px}
.spinner{width:16px;height:16px;border:3px solid #f0c9d8;border-top-color:var(--pink);border-radius:50%;display:inline-block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.err{margin-top:10px; background:#fdecea; color:var(--danger); padding:10px; border-radius:8px; font-size:13px}
/* before/after */
.ba{position:relative; width:100%; border-radius:12px; overflow:hidden; background:#000; user-select:none; touch-action:none}
.ba-img{display:block; width:100%; pointer-events:none}
.ba-after{position:absolute; inset:0; overflow:hidden; width:50%}
.ba-after .ba-img{width:100vw; max-width:560px}
.ba-range{position:absolute; bottom:10px; left:5%; width:90%; z-index:5}
.ba-tag{position:absolute; top:8px; color:#fff; font-size:11px; font-weight:700; background:rgba(0,0,0,.5); padding:3px 7px; border-radius:6px}
.ba-tag.left{left:8px}
.ba-tag.right{right:8px}
.composite{display:block; width:100%; border-radius:10px; margin-top:8px; border:1px solid var(--line)}

/* スタッフ操作の押しやすさ */
.card h2{display:flex; align-items:center; gap:8px}
.btn{min-height:52px}                 /* 指で押しやすい高さ */
.seg-btn{min-height:52px}
#genBtn{font-size:17px}

/* お客様提示モード（大画面） */
.present{position:fixed; inset:0; background:#101013; z-index:100; display:flex; flex-direction:column}
.present-head{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; color:#fff; background:var(--pink)}
.present-head span{font-weight:700; font-size:16px}
.present-x{background:rgba(255,255,255,.22); color:#fff; border:none; border-radius:10px; padding:10px 14px; font-size:15px; min-height:44px}
.present-ba{flex:1; display:flex; align-items:center; justify-content:center; padding:12px; overflow:hidden}
.present-ba .ba{width:min(92vw,520px); max-height:100%}
.present-disc{background:#ffe9b3; color:#6b4e00; font-weight:600; font-size:14px; text-align:center; padding:10px 16px; line-height:1.5}
.present-foot{padding:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.present-foot .btn{width:100%}
footer{max-width:560px; margin:0 auto; padding:16px; color:var(--muted); font-size:11px; line-height:1.6}