:root{
  --washi:#FAF7F0; --ink:#26241F; --ink-soft:#6B675E; --line:#E4DFD3;
  --indigo:#1F3A5F; --amber:#D9A441; --accent:#C73E2E; --accent-soft:#F6E3DF; --card:#FFFFFF;
  --serif:"Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,sans-serif;background:#EFEAE0;color:var(--ink);min-height:100vh}
.wrap{max-width:1040px;margin:0 auto;padding:28px 16px 64px;display:flex;gap:36px;align-items:flex-start;justify-content:center}
/* ---------- control rail ---------- */
.rail{width:280px;flex-shrink:0;padding-top:8px}
.rail h1{font-weight:700;font-size:22px;letter-spacing:.06em}
.rail h1 small{font-size:12px;font-weight:500;color:var(--ink-soft);letter-spacing:.1em;margin-left:8px}
.rail .sub{font-size:12px;color:var(--ink-soft);margin-top:4px;line-height:1.7}
.ctl{margin-top:22px}
.ctl-label{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--ink-soft);margin-bottom:8px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{font-family:inherit;font-size:13px;font-weight:500;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;transition:all .15s}
.seg button:hover{border-color:var(--ink-soft)}
.seg button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ctl-note{font-size:11px;color:var(--ink-soft);line-height:1.7;margin-top:8px}
.memo{margin-top:28px;padding:14px 16px;border-left:3px solid var(--amber);background:#F6F1E4;border-radius:0 8px 8px 0;font-size:12px;line-height:1.8;color:#5A5240}
/* ---------- phone ---------- */
.phone{width:375px;flex-shrink:0;background:#1B1A17;border-radius:46px;padding:10px;box-shadow:0 24px 60px rgba(30,26,18,.28)}
.screen-holder{background:var(--washi);border-radius:38px;overflow:hidden;position:relative;height:724px;display:flex;flex-direction:column}
.statusbar{height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:12px;font-weight:700;color:var(--ink)}
.screen{display:none;flex:1;overflow-y:auto;flex-direction:column}
.screen.active{display:flex;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ---------- store page ---------- */
.noren{background:var(--indigo);color:#fff;padding:26px 22px 22px;position:relative;overflow:hidden}
.noren::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:12px;background:radial-gradient(circle at 12px -4px, transparent 13px, var(--washi) 14px);background-size:25px 16px;background-position:bottom}
.noren .cat{font-size:11px;letter-spacing:.2em;opacity:.75;margin-bottom:6px}
.noren .name{font-family:var(--serif);font-size:27px;font-weight:700;letter-spacing:.05em}
.noren .area{font-size:12px;opacity:.75;margin-top:6px}
.store-body{padding:20px 20px 90px}
.block-title{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--ink-soft);margin-bottom:10px}
.heat-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.heat{display:grid;grid-template-columns:26px repeat(12,1fr);gap:3px;align-items:center}
.heat .dlab{font-size:10px;color:var(--ink-soft)}
.heat .cell{aspect-ratio:1;border-radius:3px;background:#F0EBDD}
.heat .cell.h1{background:#EBD9A8}
.heat .cell.h2{background:#E2BC63}
.heat .cell.h3{background:#D9A441}
.heat-hours{display:grid;grid-template-columns:26px repeat(12,1fr);gap:3px;margin-top:5px}
.heat-hours span{font-size:9px;color:var(--ink-soft);text-align:center}
.heat-legend{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--ink-soft);margin-top:12px}
.heat-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.heat-legend .l0{background:#F0EBDD}
.heat-legend .l1{background:#EBD9A8}
.heat-legend .l2{background:#E2BC63}
.heat-legend .l3{background:#D9A441}
.heat-note{font-size:10.5px;color:var(--ink-soft);line-height:1.7;margin-top:10px}
.foot-count{display:flex;align-items:baseline;gap:8px;margin:22px 2px 0}
.foot-count b{font-size:30px;color:var(--accent)}
.foot-count span{font-size:12px;color:var(--ink-soft)}
.cta-bar{position:absolute;left:0;right:0;bottom:0;padding:14px 18px 22px;background:linear-gradient(transparent, var(--washi) 38%)}
.cta{width:100%;font-family:inherit;font-size:16px;font-weight:700;letter-spacing:.08em;padding:16px;border:none;border-radius:999px;background:var(--accent);color:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(199,62,46,.4);transition:transform .12s}
.cta:active{transform:scale(.97)}
/* ---------- record screen ---------- */
.rec-head{padding:16px 20px 4px;display:flex;align-items:center;gap:10px}
.back{border:none;background:none;font-size:20px;color:var(--ink-soft);cursor:pointer;padding:4px}
.rec-head .t{font-weight:700;font-size:15px}
.rec-body{padding:10px 20px 110px}
.q{margin-top:20px}
.q-label{font-size:14px;font-weight:700;margin-bottom:4px}
.q-sub{font-size:11px;color:var(--ink-soft);margin-bottom:10px}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{font-family:inherit;font-size:14px;font-weight:500;padding:12px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);cursor:pointer;transition:all .15s;flex:1;min-width:90px;text-align:center}
.opt.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}
.opt.chip{flex:initial;min-width:0;border-radius:999px;padding:10px 16px}
.memo-in{width:100%;margin-top:8px;font-family:inherit;font-size:14px;padding:13px 14px;border:1.5px solid var(--line);border-radius:14px;background:#fff;outline:none}
.memo-in:focus{border-color:var(--ink-soft)}
.rec-cta-bar{position:absolute;left:0;right:0;bottom:0;padding:14px 18px 22px;background:linear-gradient(transparent, var(--washi) 38%)}
.cta:disabled{background:#CFC9BB;box-shadow:none;cursor:default}
/* ---------- complete screen ---------- */
.done-body{padding:26px 20px 40px;display:flex;flex-direction:column;align-items:center}
.stamp{width:112px;height:112px;border-radius:50%;border:4px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:52px;font-weight:700;position:relative;mask-image:radial-gradient(circle at 34% 30%, black 62%, rgba(0,0,0,.82) 78%, black 92%);animation:stampin .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes stampin{0%{transform:scale(2.1) rotate(-16deg);opacity:0}55%{transform:scale(.93) rotate(-7deg);opacity:1}75%{transform:scale(1.04) rotate(-8deg)}100%{transform:scale(1) rotate(-8deg)}}
.done-t{font-size:19px;font-weight:700;margin-top:18px}
.done-sub{font-size:12.5px;color:var(--ink-soft);margin-top:6px;text-align:center;line-height:1.7}
.done-sub b{color:var(--accent)}
.share-card{width:100%;margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.share-card .lab{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--ink-soft);margin-bottom:8px}
.share-prev{font-size:13px;line-height:1.75;background:#F7F4EC;border-radius:10px;padding:12px 14px;color:#3A372F}
.share-prev .url{color:var(--indigo);text-decoration:underline}
.share-btn{width:100%;margin-top:12px;font-family:inherit;font-size:14px;font-weight:700;padding:13px;border:none;border-radius:12px;background:#111;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.share-note{font-size:10.5px;color:var(--ink-soft);margin-top:8px;line-height:1.6}
/* ad units */
.ad-slot{width:100%;margin-top:16px}
.ad-native{display:flex;gap:13px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;position:relative}
.ad-native .thumb{width:56px;height:56px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:26px;font-weight:700}
.ad-native .body{flex:1;min-width:0}
.ad-native .pr{position:absolute;top:10px;right:12px;font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--ink-soft);border:1px solid var(--line);border-radius:4px;padding:2px 5px;background:#FBF9F3}
.ad-native .copy{font-size:13.5px;font-weight:700;line-height:1.5}
.ad-native .meta{font-size:11px;color:var(--ink-soft);margin-top:3px}
.ad-native .go{font-size:11px;font-weight:700;color:var(--accent);margin-top:6px;display:inline-block}
.ad-banner{background:#F1F1F1;border:1px solid #DDD;border-radius:6px;padding:12px 14px;position:relative;display:flex;align-items:center;gap:12px;font-family:sans-serif}
.ad-banner .tag{position:absolute;top:0;right:0;background:#BBB;color:#fff;font-size:9px;padding:2px 6px;border-radius:0 6px 0 6px}
.ad-banner .ic{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,#3B82F6,#9333EA);flex-shrink:0}
.ad-banner .tx b{font-size:13px;color:#222;display:block;line-height:1.4}
.ad-banner .tx span{font-size:11px;color:#777}
.ad-banner .btn{margin-left:auto;flex-shrink:0;background:#2563EB;color:#fff;font-size:11px;font-weight:700;border:none;border-radius:6px;padding:8px 12px;cursor:pointer}
.hist-link{margin-top:22px;font-size:13px;font-weight:700;color:var(--indigo);background:none;border:none;cursor:pointer;font-family:inherit}
/* ---------- history screen ---------- */
.hist-body{padding:10px 20px 40px}
.coll{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:6px}
.coll-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.coll-grid .st{aspect-ratio:1;border-radius:50%;border:2.5px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;font-weight:700;transform:rotate(-8deg)}
.coll-grid .st.ghost{border-color:var(--line);color:var(--line);transform:none}
.hist-list{margin-top:18px}
.hist-item{display:flex;gap:12px;align-items:center;padding:13px 2px;border-bottom:1px solid var(--line)}
.hist-item .d{font-size:10.5px;color:var(--ink-soft);width:44px;flex-shrink:0;line-height:1.5}
.hist-item .n{font-size:13.5px;font-weight:700}
.hist-item .f{font-size:11px;color:var(--accent);margin-top:2px}
.q-opt{font-weight:400;color:var(--ink-soft)}
.bt-pad{margin-top:8px}
.bt-gap{margin-top:20px}
/* toast */
.toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px);background:rgba(30,28,22,.92);color:#fff;font-size:12px;padding:10px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:all .25s;white-space:nowrap;z-index:9}
.toast.show{opacity:1;transform:translateX(-50%)}
@media (max-width:760px){
  .wrap{flex-direction:column;align-items:center;gap:20px;padding-top:18px}
  .rail{width:100%;max-width:375px}
  .memo{margin-top:18px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}