/* RECOA demo v3 追加分 — スタジオ（アーティストの管理画面）／商品ページ／規約ページ */
.stag{font:800 10.5px/1 var(--en);letter-spacing:.12em;background:var(--ink);color:var(--bg);border-radius:var(--pill);padding:5px 9px;margin-left:8px}
.abar .lnk{font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.hello{padding:18px 16px 6px;font:900 21px/1.45 var(--jp)}
.hello small{display:block;font:400 13.5px/1.6 var(--jp);color:var(--sub);padding-top:2px}

.hero-money{margin:10px 16px;background:var(--ink);color:var(--bg);border-radius:var(--r-l);padding:22px;display:grid;gap:4px;position:relative;overflow:hidden;box-shadow:var(--sh-2)}
.hero-money::before{content:"";position:absolute;right:-60px;top:-60px;width:190px;height:190px;border-radius:50%;background:var(--or)}
.hero-money>*{position:relative}
.hero-money .cap{font-size:13px;color:#D9CFC4;font-weight:500}
.hero-money .amt{font:800 clamp(44px,13vw,56px)/1.05 var(--en);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.hero-money dl{display:grid;gap:0;padding-top:12px}
.hero-money dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #4A3E39;font-size:14px}
.hero-money dd{font:700 15px/1.4 var(--en);font-variant-numeric:tabular-nums}
.bars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:end;height:120px;padding-top:6px}
.bars div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%;font:600 10.5px/1 var(--en);color:var(--sub)}
.bars i{display:block;flex:none;width:100%;border-radius:6px 6px 2px 2px;background:var(--beige);transform-origin:50% 100%}
.bars div:last-child i{background:var(--or)}
.js .bars i{transform:scaleY(0)}
.js .bars.in i{transform:none;transition:transform .7s var(--ease) calc(var(--k,0)*70ms)}
.bignum{font:800 40px/1 var(--en);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.bignum small{font:700 13px/1 var(--jp);letter-spacing:0;color:var(--or);margin-left:8px}
.todo li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.6}
.todo li:first-child{border-top:0}
.todo li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px #D9CFC4;margin-top:1px}
.todo li.ok::before{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.500l3.500 3.500L16 8' fill='none' stroke='%23FFFEFB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain;box-shadow:none}
.todo li.ok{color:var(--sub)}

/* form */
.form{display:grid;gap:16px;padding:6px 16px 28px}
.fld{display:grid;gap:7px}
.fld>span{font-size:13px;font-weight:700}
.fld input[type=text],.fld textarea{width:100%;border:0;border-radius:var(--r-s);background:var(--beige);padding:14px;font:400 16px/1.7 var(--jp);color:var(--ink);letter-spacing:.02em}
.fld textarea{min-height:120px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:2px solid var(--ink);outline-offset:0;background:var(--card)}
.lseg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--beige);border-radius:var(--pill);padding:4px}
.lseg button{border:0;background:none;border-radius:var(--pill);height:42px;font-size:14px;font-weight:500}
.lseg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);font-weight:700}
.pick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.pick button{border:0;padding:0;border-radius:12px;overflow:hidden;aspect-ratio:4/5;background:var(--tile);position:relative}
.pick button svg{width:100%;height:100%;display:block}
.pick button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--bg),0 0 0 5.5px var(--or)}
.pick button.none{display:grid;place-content:center;font-size:11px;color:var(--sub);font-weight:500}
.prevw{border-radius:var(--r-m);box-shadow:var(--sh-1);background:var(--card);overflow:hidden}
.prevw .post{padding-top:12px}
.lbl{font:700 12px/1 var(--en);letter-spacing:.12em;text-transform:uppercase;color:var(--or);padding:22px 16px 0}

/* wizard */
.wz{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:16px 16px 4px}
.wz li{display:grid;gap:7px;font-size:12px;font-weight:500;color:var(--sub)}
.wz li::before{content:"";height:5px;border-radius:3px;background:var(--beige)}
.wz li.on{color:var(--ink);font-weight:700}
.wz li.on::before,.wz li.past::before{background:var(--or)}
.items{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px 16px 8px}
.it{border:0;text-align:left;background:var(--card);border-radius:var(--r-m);box-shadow:var(--sh-1);padding:10px 10px 14px;display:grid;gap:6px;font-size:14px;line-height:1.5;transition:transform .2s var(--ease)}
.it:active{transform:scale(.97)}
.it .ph{border-radius:12px}
.it b{font-weight:700}
.it .c{font-size:12.5px;color:var(--sub)}
.it[aria-pressed="true"]{box-shadow:inset 0 0 0 2.5px var(--or),var(--sh-1)}
.stage{margin:8px 16px;position:relative}
.stage .ph{border-radius:var(--r-l)}
.stage .art-img{position:absolute;left:50%;top:40%;width:27%;max-height:30%;transform:translate(-50%,-50%);object-fit:contain;mix-blend-mode:multiply}
.swatches{display:flex;gap:12px;padding:6px 16px}
.swatches button{width:40px;height:40px;border-radius:50%;border:0;box-shadow:inset 0 0 0 1px rgba(31,22,20,.2)}
.swatches button[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(31,22,20,.2),0 0 0 3px var(--bg),0 0 0 5.5px var(--or)}
.upl{margin:4px 16px;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;border-radius:var(--pill);box-shadow:inset 0 0 0 1.5px var(--ink);font-weight:700;cursor:pointer;background:var(--card)}
.upl input{position:absolute;opacity:0;width:1px;height:1px}
.range{display:grid;gap:8px;padding:0 16px}
.range input{width:100%;accent-color:var(--or);height:32px}
.range .v{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700}
.range .v b{font:800 28px/1 var(--en);font-variant-numeric:tabular-nums}
.take{margin:14px 16px;background:var(--ink);color:var(--bg);border-radius:var(--r-l);padding:22px;display:grid;gap:4px}
.take .cap{font-size:13px;color:#D9CFC4}
.take .amt{font:800 56px/1 var(--en);letter-spacing:-.04em;color:var(--or);font-variant-numeric:tabular-nums}
.take table{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px}
.take td{padding:9px 0;border-top:1px solid #4A3E39}
.take td:last-child{text-align:right;font:700 15px/1.4 var(--en);font-variant-numeric:tabular-nums}
.navrow{display:flex;gap:10px;padding:10px 16px 28px}
.navrow .btn{flex:1}
.navrow .btn.line{flex:0 0 auto}
.done{display:grid;justify-items:center;text-align:center;gap:14px;padding:48px 24px}
.done i{width:72px;height:72px;border-radius:50%;background:var(--or);display:grid;place-content:center}
.done i::after{content:"";width:26px;height:14px;border-left:3.5px solid var(--ink);border-bottom:3.5px solid var(--ink);transform:rotate(-45deg) translate(2px,-3px)}
.done h2{font:900 23px/1.5 var(--jp)}

/* sales */
.month{margin:12px 16px;background:var(--card);border-radius:var(--r-m);box-shadow:var(--sh-1);padding:18px;display:grid;gap:10px}
.month .top{display:flex;justify-content:space-between;align-items:baseline}
.month .top b{font:800 26px/1 var(--en);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.month .top span{font-weight:700}

/* 商品ページ */
.pd{display:grid;gap:28px;padding-block:20px 56px}
.gal{display:grid;gap:10px}
.gal .main{border-radius:var(--r-l);aspect-ratio:1/1}
.gal .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gal .thumbs button{border:0;padding:0;background:var(--tile);border-radius:12px;aspect-ratio:1/1;display:grid;place-content:center;overflow:hidden}
.gal .thumbs button svg{width:80%;height:auto;justify-self:center}
.gal .thumbs button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--bg),0 0 0 5.5px var(--ink)}
.pd .info{display:grid;gap:14px;align-content:start}
.pd h1{font:900 clamp(26px,6.4vw,38px)/1.4 var(--jp)}
.pd .by{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-weight:700;font-size:14.5px}
.pd .by span{width:36px;height:36px;border-radius:50%;overflow:hidden;display:block}
.pd .price{font-size:30px}
.sizes{width:100%;border-collapse:collapse;font-size:14px;text-align:center}
.sizes th,.sizes td{padding:10px 4px;border-bottom:1px solid var(--line)}
.sizes thead th{font:700 12px/1 var(--en);color:var(--sub);letter-spacing:.06em}
.sizes td{font-family:var(--en);font-variant-numeric:tabular-nums}
.sizes tbody th{font:700 14px var(--en)}
.pbuy{position:fixed;left:0;right:0;bottom:0;z-index:25;background:rgba(255,254,251,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 -6px 24px rgba(31,22,20,.08);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:center;gap:12px}
.pbuy .l{font-size:12px;color:var(--sub);line-height:1.45}
.pbuy .l b{display:block;font:800 19px/1.1 var(--en);font-variant-numeric:tabular-nums;color:var(--or)}
.pbuy .btn{min-height:50px}

/* 規約 */
.doc{max-width:820px;padding-block:28px 72px;display:grid;gap:18px}
.doc h1{font:900 clamp(26px,6vw,36px)/1.4 var(--jp)}
.doc h2{font:700 19px/1.5 var(--jp);padding-top:18px}
.doc p,.doc li{font-size:15.5px;line-height:1.9}
.doc ul{padding-left:1.2em;list-style:disc;display:grid;gap:4px}
.doc ol{padding-left:1.4em;list-style:decimal;display:grid;gap:4px}
.doc .warn{background:var(--or-pale);border-radius:var(--r-m);padding:16px 18px;font-size:14.5px;line-height:1.8}
.dl{background:var(--card);border-radius:var(--r-m);box-shadow:var(--sh-1);padding:4px 18px}
.dl div{display:grid;gap:4px;padding:14px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.8}
.dl div:first-child{border-top:0}
.dl dt{font-weight:700;font-size:13.5px;color:var(--sub)}
.flinks{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px}
.flinks a{text-decoration:underline;text-underline-offset:3px}

@media (min-width:860px){
  .pd{grid-template-columns:1.05fr 1fr;gap:56px;padding-block:40px 96px;align-items:start}
  .gal{position:sticky;top:84px}
  .pbuy{display:none}
  .dl div{grid-template-columns:11em 1fr;gap:16px}
}