:root{
  --bg:#E9DFCB; --bg2:#DCCDB2; --ink:#2B211C; --muted:#6F6253; --line:#CDBC9E;
  --fur:#4A3326; --spot:#2E3560; --card:#F2EAD9; --hold:#9A6B1C; --sold:#A8322A; --seal:#A8322A;
  --glow:rgba(255,250,238,.5);
  --display:"Shippori Mincho","Noto Serif SC",Georgia,serif;
  --body:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1D1612; --bg2:#2A201A; --ink:#ECE1CD; --muted:#A99883; --line:#3D3027;
    --fur:#D8B98E; --spot:#9AA6D6; --card:#251C16; --hold:#E0B055; --sold:#E0705C; --seal:#B8402F;
    --glow:rgba(216,185,142,.06);
  }
}
:root[data-theme="dark"]{
  --bg:#1D1612; --bg2:#2A201A; --ink:#ECE1CD; --muted:#A99883; --line:#3D3027;
  --fur:#D8B98E; --spot:#9AA6D6; --card:#251C16; --hold:#E0B055; --sold:#E0705C; --seal:#B8402F;
  --glow:rgba(216,185,142,.06);
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--body);
  background-image:radial-gradient(ellipse 90% 50% at 50% 0%,var(--glow),transparent 70%);background-repeat:no-repeat;background-size:100% 100vh}
img{max-width:100%;display:block}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--fur);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* header */
header.top{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.seal{font:600 15px/1 "Noto Serif SC",serif;color:#F4E9D6;background:var(--seal);padding:6px 5px;border-radius:3px;writing-mode:vertical-rl;letter-spacing:2px}
.brand b{font:700 19px/1 var(--display)}
.navlink{background:none;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14px;cursor:pointer;color:var(--muted)}
.navlink:hover{color:var(--ink);border-color:var(--muted)}

/* hero */
.hero{position:relative;margin:4px 0 0;border-radius:16px;overflow:hidden}
.hero .art{position:relative;aspect-ratio:2576/1438;background:var(--bg2) center/cover}
.hero .art img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.hero .art::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;background:linear-gradient(transparent,var(--bg))}
.hero .copy{position:absolute;left:clamp(20px,24%,300px);top:10%;max-width:38%}
.hero h1{font:800 clamp(40px,7.4vw,96px)/.95 var(--display);margin:0;letter-spacing:-.02em;color:#2B211C}
.hero p{margin:16px 0 0;color:#4E4237;max-width:30ch;font-size:clamp(14px,1.5vw,17px)}
@media (max-width:720px){
  .hero{margin:0 -20px;border-radius:0}
  .hero .art{aspect-ratio:4/3.4}
  .hero .art img{object-position:92% 50%}
  .hero .copy{position:static;max-width:none;padding:22px 20px 26px}
  .hero h1{color:var(--ink)}.hero p{color:var(--muted)}
}
/* sections */
.dayhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:38px 0 18px;flex-wrap:wrap}
.dayhead h2{font:700 clamp(24px,5vw,34px)/1.1 var(--display);margin:0}
.dayhead span{color:var(--muted);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:26px 20px}
.grid.small{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 14px}
.cup{position:relative}
.ph{position:relative;aspect-ratio:1;border-radius:50% 50% 14px 14px / 40% 40% 14px 14px;overflow:hidden;background:var(--bg2)}
.ph img{width:100%;height:100%;object-fit:cover}
.fire{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(20,14,10,.62);backdrop-filter:blur(4px)}
.fire svg{width:19px;height:19px}
.grid.small .fire{width:26px;height:26px;right:7px;bottom:7px}.grid.small .fire svg{width:14px;height:14px}
.stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-6deg);font:700 15px/1 var(--display);padding:8px 14px;border-radius:4px;color:#fff;white-space:nowrap;letter-spacing:.06em;text-transform:uppercase;border:2px solid rgba(255,255,255,.75);box-shadow:0 2px 10px rgba(0,0,0,.25)} .grid.small .stamp{font-size:12px;padding:6px 10px}
.stamp.sold{background:var(--sold)}.stamp.hold{background:var(--hold);color:#1b1511}
.cup.is-sold .ph img{filter:grayscale(.7) brightness(.8)}
.meta{padding:12px 2px 0}
.meta .name{font:700 18px/1.25 var(--display);margin:0}
.meta .master{color:var(--muted);font-size:14px;margin:2px 0 0}
.meta .price{font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums}
.grid.small .meta .name{font-size:15px}.grid.small .meta .price{font-size:14px}
.cup.is-sold .price{text-decoration:line-through;color:var(--muted)}
.legend{display:flex;gap:18px;color:var(--muted);font-size:14px;margin:12px 0 0;flex-wrap:wrap}
.legend i{display:inline-flex;vertical-align:-3px;margin-right:5px}
.legend svg{width:16px;height:16px}
.empty{padding:50px 0;color:var(--muted);text-align:center}
.archive-title{font:700 clamp(22px,4.5vw,30px)/1 var(--display);margin:64px 0 0;padding-top:22px;border-top:1px solid var(--line)}
footer{color:var(--muted);font-size:13px;padding:60px 0 30px;text-align:center}

/* seller */
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;margin:24px 0}
.panel h2{font:700 24px/1.2 var(--display);margin:0 0 4px}
.panel .sub{color:var(--muted);margin:0 0 18px;font-size:15px}
.login{max-width:420px;margin:60px auto;text-align:center}
.login .seal{display:inline-block;font-size:22px;padding:10px 8px;margin-bottom:16px}
form.add{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:5px;font-size:14px;color:var(--muted)}
.field.full{grid-column:1/-1}
.field input[type=text],.field input[type=number],.field input[type=date]{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:16px;color:var(--ink);width:100%}
.drop{grid-column:1/-1;border:1.5px dashed var(--line);border-radius:12px;padding:16px;display:flex;gap:14px;align-items:center;cursor:pointer;background:var(--bg)}
.drop img{width:76px;height:76px;object-fit:cover;border-radius:10px}
.drop .ghost{width:76px;height:76px;border-radius:10px;background:var(--bg2);display:grid;place-items:center;color:var(--muted);font-size:28px;flex-shrink:0}
.checks{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;font-size:15px;background:var(--bg)}
.chk input{accent-color:var(--fur);width:17px;height:17px}
.chk svg{width:16px;height:16px}
.btn{background:var(--fur);color:var(--bg);border:0;border-radius:999px;padding:11px 20px;font-weight:600;cursor:pointer}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghostb{background:transparent;color:var(--ink);border:1px solid var(--line)}
.actions{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.msg{font-size:14px;color:var(--muted)}
.msg.err{color:var(--sold)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.rows{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.row{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.row img,.row .ghost{width:64px;height:64px;object-fit:cover;border-radius:10px;background:var(--bg2)}
.row .t{font-weight:600;line-height:1.3}
.row .s{font-size:13px;color:var(--muted)}
.seg{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{background:none;border:0;padding:7px 11px;font-size:13px;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.seg button.hold[aria-pressed=true]{background:var(--hold);color:#1b1511}
.seg button.sold[aria-pressed=true]{background:var(--sold);color:#fff}
.rowbtns{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.del{background:none;border:0;color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .25s;pointer-events:none}
.toast.on{opacity:1}
/* cup detail dialog */
.cup[data-cup]{cursor:pointer;transition:transform .2s}
.cup[data-cup]:hover{transform:translateY(-3px)}
.cup[data-cup]:focus-visible{outline:2px solid var(--fur);outline-offset:6px;border-radius:14px}
dialog#cupDialog{border:0;padding:0;border-radius:18px;background:var(--card);color:var(--ink);max-width:min(860px,calc(100vw - 24px));width:100%;max-height:calc(100dvh - 24px);box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog#cupDialog::backdrop{background:rgba(27,20,15,.55);backdrop-filter:blur(3px)}
.dbody{position:relative;display:grid;grid-template-columns:1.1fr 1fr}
.dph{position:relative;aspect-ratio:1;background:var(--bg2)}
.dph img{width:100%;height:100%;object-fit:cover}
.dph.is-sold img{filter:grayscale(.7) brightness(.8)}
.dph .fire{width:42px;height:42px;right:14px;bottom:14px}.dph .fire svg{width:24px;height:24px}
.dinfo{padding:34px 28px 28px;display:flex;flex-direction:column;gap:6px}
.dinfo h2{font:800 clamp(26px,4vw,36px)/1.1 var(--display);margin:0 0 6px}
.ddate{margin:0;color:var(--muted);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.dmeta{margin:0;color:var(--muted);display:flex;align-items:center;gap:6px}
.ficon{display:inline-flex;width:16px}.ficon svg{width:16px;height:16px}
.dprice{font:700 30px/1 var(--display);margin:14px 0 18px;font-variant-numeric:tabular-nums}
.dprice.struck{text-decoration:line-through;color:var(--muted)}
.btn.buy{padding:14px 22px;font-size:16px;width:100%}
.note{color:var(--muted);font-size:14px;margin:6px 0 0}
.dclose{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;background:var(--card);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.dbody.notice{display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 28px 30px;gap:6px}
.dbody.notice .seal{font-size:22px;padding:10px 8px;margin-bottom:10px}
.dbody.notice h2{font:800 30px/1.1 var(--display);margin:0}
.dbody.notice p{color:var(--muted);max-width:40ch;margin:8px 0 18px}
.row.order a{color:inherit}
@media (max-width:640px){
  .dbody{grid-template-columns:1fr}
  .dinfo{padding:20px 20px 24px}
  dialog#cupDialog{border-radius:16px;overflow-y:auto}
}
@media (max-width:560px){
  form.add{grid-template-columns:1fr}
  .row{grid-template-columns:56px 1fr}
  .row img,.row .ghost{width:56px;height:56px}
  .rowbtns{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  .grid{grid-template-columns:repeat(2,1fr);gap:20px 12px}
  .grid.small{grid-template-columns:repeat(3,1fr);gap:14px 10px}
  .meta .name{font-size:15px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}