/* ================= TOKENS ================= */
:root{
  --bg:#F4EEDF; --bg-blob:#CFE7E6;
  --paper:#FFFBF1; --paper-2:#F7F0E0;
  --ink:#2A2833; --ink-2:#5E5A66; --ink-3:#B9B2A4;
  --chrome:#BFE3E4;

  /* สีระบบ: แท็บ/ชิปที่เลือก ปุ่มหลัก โฟกัส */
  --sys:#1F6A73; --sys-soft:#D9ECEA; --on-sys:#FFFFFF;

  /* สีวง (กำหนดให้แต่ละวงอัตโนมัติ) สด / อ่อนผสมพื้น */
  --c1:#F0AEC5; --c1-soft:#F6DCDF;
  --c2:#B4A3E3; --c2-soft:#E1D9EE;
  --c3:#93D3AE; --c3-soft:#D6EBD8;
  --c4:#F4CF5D; --c4-soft:#F8E8B6;
  --c5:#F2A283; --c5-soft:#F6D7C4;
  --c6:#8EC9E8; --c6-soft:#D5E9EE;

  /* สถานะ: สี่เหลี่ยม+ไอคอน+ข้อความ */
  --st-available:#2F7D55; --st-available-soft:#DCEBDB;
  --st-reserved:#A86A0C;  --st-reserved-soft:#F3E3C4;
  --st-sold:#6E6976;      --st-sold-soft:#E7E2DA;
  --danger:#B23A3A;

  --font-display:"Mali","IBM Plex Sans Thai",system-ui,sans-serif;
  --font-body:"IBM Plex Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-sm:14px; --fs-md:16px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px;
  --lh-body:1.55; --lh-head:1.25;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --bw:2px;
  --shadow-win:6px 6px 0 var(--ink);
  --shadow-btn:3px 3px 0 var(--ink);
  --shadow-press:1px 1px 0 var(--ink);
  --ctl-h:40px; --content-max:1120px;
  --z-content:1; --z-bar:10; --z-toast:60;
  --ease:160ms cubic-bezier(.3,.7,.4,1);
}
@media (max-width:640px){ :root{ --ctl-h:44px } }

/* ================= BASE ================= */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-body); font-size:var(--fs-md); line-height:var(--lh-body); color:var(--ink); background:var(--bg); min-height:100vh; line-break:loose}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(40% 30% at 8% 18%,var(--bg-blob) 0 60%,transparent 61%),radial-gradient(30% 22% at 92% 70%,var(--bg-blob) 0 60%,transparent 61%),radial-gradient(22% 16% at 70% 8%,var(--bg-blob) 0 60%,transparent 61%)}
h1,h2,h3{font-family:var(--font-display); line-height:var(--lh-head); margin:0; font-weight:700}
button,input,select,textarea{font:inherit; color:inherit}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--sys); outline-offset:2px; border-radius:var(--r-sm)}
[hidden]{display:none !important}

/* ================= COMPONENTS ================= */
.win{position:relative; z-index:var(--z-content); background:var(--paper); border:var(--bw) solid var(--ink); border-radius:var(--r-lg); box-shadow:var(--shadow-win); overflow:hidden}
.win__bar{display:flex; align-items:center; gap:var(--s3); min-height:40px; padding:0 var(--s4); background:var(--chrome); border-bottom:var(--bw) solid var(--ink)}
.win__dots{display:flex; gap:var(--s2)}
.win__dots i{width:14px;height:14px;border-radius:50%;border:var(--bw) solid var(--ink);background:var(--paper)}
.win__title{flex:1; text-align:center; font-family:var(--font-display); font-weight:600; padding-right:38px}
.win__body{padding:var(--s5)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:var(--ctl-h); padding:0 var(--s4);
  border:var(--bw) solid var(--ink); border-radius:var(--r-pill); background:var(--paper); box-shadow:var(--shadow-btn);
  font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:none; color:var(--ink);
  transition:transform var(--ease), box-shadow var(--ease)}
.btn:hover{background:var(--paper-2)}
.btn:active{transform:translate(2px,2px); box-shadow:var(--shadow-press)}
.btn--primary,.btn--primary:hover{background:var(--sys); color:var(--on-sys)}
.btn--danger,.btn--danger:hover{background:var(--danger); color:#fff}
.btn--text{border-color:transparent; box-shadow:none; background:none; color:var(--danger); padding:0 var(--s2)}
.btn--text:hover{background:none; text-decoration:underline}
.btn--icon{width:var(--ctl-h); padding:0}
.btn[aria-disabled="true"]{opacity:.5; pointer-events:none}
.btn svg{width:18px;height:18px;flex:none}
.win__bar .btn--icon{min-height:32px; width:32px; box-shadow:none; margin-left:auto}

.seg{display:inline-flex; border:var(--bw) solid var(--ink); border-radius:var(--r-pill); background:var(--paper); padding:2px; gap:2px}
.seg a{display:inline-flex; align-items:center; min-height:calc(var(--ctl-h) - 8px); padding:0 var(--s4); border-radius:var(--r-pill); text-decoration:none; color:var(--ink); font-weight:600; font-size:var(--fs-sm)}
.seg a[aria-current="page"]{background:var(--sys); color:var(--on-sys)}

.field{display:flex; flex-direction:column; gap:var(--s1)}
.field label,.field .lab{font-size:var(--fs-sm); font-weight:600}
.field .hint{font-size:var(--fs-sm); color:var(--ink-2)}
.field .err{font-size:var(--fs-sm); color:var(--danger); display:none}
.field.is-error .err{display:block}
.field.is-error .input{border-color:var(--danger); box-shadow:0 0 0 2px var(--danger) inset}
.input{min-height:var(--ctl-h); width:100%; padding:0 var(--s3); border:var(--bw) solid var(--ink); border-radius:var(--r-md); background:#fff}
textarea.input{padding:var(--s2) var(--s3); min-height:72px; resize:vertical}
select.input{appearance:none; padding-right:36px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232A2833' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center}
.search{position:relative; display:block}
.search svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-2)}
.search .input{padding-left:40px; border-radius:var(--r-pill)}

.chips{display:flex; flex-wrap:wrap; gap:var(--s2)}
.chip{display:inline-flex; align-items:center; gap:var(--s2); min-height:var(--ctl-h); padding:0 var(--s4) 0 var(--s3);
  border:var(--bw) solid var(--ink); border-radius:var(--r-pill); background:var(--paper); font-size:var(--fs-sm); font-weight:600; cursor:pointer; flex:none}
.chip .count{color:var(--ink-2); font-weight:500}
.chip[aria-pressed="true"]{background:var(--sys); color:var(--on-sys)}
.chip[aria-pressed="true"] .count{color:var(--on-sys)}
.dot{width:12px; height:12px; border-radius:50%; background:var(--gc,var(--chrome)); border:1.5px solid var(--ink); flex:none}

.st{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:600; color:var(--stc)}
.st__mk{width:18px; height:18px; border-radius:4px; background:var(--stc); color:#fff; display:grid; place-items:center}
.st__mk svg{width:12px; height:12px}
.st--available{--stc:var(--st-available); --sts:var(--st-available-soft)}
.st--reserved{--stc:var(--st-reserved); --sts:var(--st-reserved-soft)}
.st--sold{--stc:var(--st-sold); --sts:var(--st-sold-soft)}

/* photocard tile */
.tile{display:flex; flex-direction:column; text-align:left; padding:0; cursor:pointer; background:transparent; border:0}
.tile__img{position:relative; aspect-ratio:55/85; border:var(--bw) solid var(--ink); border-radius:var(--r-md); overflow:hidden; background:var(--gs); box-shadow:var(--shadow-btn); transition:transform var(--ease), box-shadow var(--ease)}
.tile:hover .tile__img{transform:translate(-2px,-2px) rotate(-1deg); box-shadow:5px 5px 0 var(--ink)}
.tile:active .tile__img{transform:translate(2px,2px); box-shadow:var(--shadow-press)}
.tile__img img{width:100%; height:100%; object-fit:cover; display:block}
.tile__stamp{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-12deg); font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg);
  padding:0 var(--s3); border:3px solid currentColor; border-radius:var(--r-sm); background:var(--paper); white-space:nowrap}
.tile--sold .tile__img img{opacity:.45; filter:grayscale(.7)}
.tile--sold .tile__stamp{color:var(--st-sold)}
.tile--reserved .tile__stamp{color:var(--st-reserved)}
.tile__body{padding:var(--s3) var(--s1) 0; display:flex; flex-direction:column}
.tile__name{font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg); line-height:1.3}
.tile__meta{font-size:var(--fs-sm); color:var(--ink-2); display:flex; align-items:center; gap:6px}
.tile__meta .dot{width:10px; height:10px}
.price{font-weight:700; font-variant-numeric:tabular-nums}
.tile .price{margin-top:var(--s1)}

dialog.dlg{padding:0; border:var(--bw) solid var(--ink); border-radius:var(--r-lg); background:var(--paper); color:var(--ink); box-shadow:var(--shadow-win);
  width:min(520px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto}
dialog.dlg--wide{width:min(720px, calc(100vw - 32px))}
dialog.dlg::backdrop{background:rgba(42,40,51,.45)}
.dlg__foot{position:sticky; bottom:0; display:flex; align-items:center; justify-content:flex-end; gap:var(--s3); padding:var(--s4) var(--s5); border-top:var(--bw) solid var(--ink); background:var(--paper-2)}
.dlg__foot .spacer{margin-right:auto}

.empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s3); padding:var(--s7) var(--s4)}
.empty svg{width:110px; height:auto}
.empty h3{font-size:var(--fs-lg)}
.empty p{margin:0; color:var(--ink-2); max-width:34ch}

.toast{position:fixed; z-index:var(--z-toast); left:50%; top:72px; max-width:calc(100vw - 32px); text-align:center; transform:translateX(-50%); background:var(--ink); color:var(--paper);
  border-radius:var(--r-pill); padding:var(--s2) var(--s4); font-weight:600; font-size:var(--fs-sm); box-shadow:var(--shadow-btn)}

/* notice / focus box */
.notice{display:flex; align-items:flex-start; gap:var(--s3); background:var(--sys-soft); border-left:4px solid var(--sys); border-radius:var(--r-md); padding:var(--s3) var(--s4); font-size:var(--fs-sm)}
.notice--warn{background:var(--st-reserved-soft); border-left-color:var(--st-reserved)}
.notice--error{background:#F6DEDA; border-left-color:var(--danger)}
.notice p{margin:0}

/* state block (loading / error) */
.state{display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s3); padding:var(--s7) var(--s4); color:var(--ink-2)}
.dots{display:inline-flex; gap:6px}
.dots i{width:10px; height:10px; border-radius:50%; background:var(--ink); animation:blink 1s infinite alternate}
.dots i:nth-child(2){animation-delay:.2s} .dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{from{opacity:.2} to{opacity:1}}

/* publish bar (แถบล่างแบบ taskbar) */
.pubbar{position:sticky; bottom:var(--s4); z-index:var(--z-bar); display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  background:var(--paper); border:var(--bw) solid var(--ink); border-radius:var(--r-lg); box-shadow:var(--shadow-win); padding:var(--s3) var(--s4)}
.pubbar__text{flex:1; min-width:180px; font-size:var(--fs-sm)}
.pubbar__text b{font-size:var(--fs-md)}
.progress{height:8px; border-radius:var(--r-pill); background:var(--paper-2); border:1.5px solid var(--ink); overflow:hidden; margin-top:var(--s1)}
.progress i{display:block; height:100%; background:var(--sys); width:0; transition:width var(--ease)}

/* setup */
.setup{max-width:520px; margin:var(--s6) auto 0; width:100%}
.setup .win__body{display:flex; flex-direction:column; gap:var(--s4)}
.setup ol{margin:0; padding-left:var(--s5); font-size:var(--fs-sm); color:var(--ink-2)}
.setup ol li + li{margin-top:var(--s1)}
.menubar__link{margin-left:auto; display:inline-flex; align-items:center; gap:var(--s2); min-height:var(--ctl-h); padding:0 var(--s3); font-weight:600; font-size:var(--fs-sm); color:var(--ink); text-decoration:none; border-radius:var(--r-pill)}
.menubar__link:hover{background:var(--paper-2)}
.menubar__link svg{width:16px; height:16px}
.tag-new{display:inline-block; font-size:var(--fs-sm); font-weight:600; color:var(--sys); margin-left:var(--s1)}

/* ================= LAYOUT ================= */
.menubar{position:sticky; top:0; z-index:var(--z-bar); background:var(--paper); border-bottom:var(--bw) solid var(--ink)}
.menubar__in{max-width:var(--content-max); margin:0 auto; padding:var(--s2) var(--s4); display:flex; align-items:center; gap:var(--s4); min-height:56px}
.brand{display:flex; align-items:center; gap:var(--s2); font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg); text-decoration:none; color:var(--ink)}
.brand svg{width:30px; height:30px}
.menubar .seg{margin-left:auto}
main{position:relative; z-index:var(--z-content); max-width:var(--content-max); margin:0 auto; padding:var(--s5) var(--s4) var(--s7)}
.view{display:flex; flex-direction:column; gap:var(--s5)}

/* store */
.profile{padding:var(--s2) var(--s1) 0; display:flex; flex-direction:column; gap:var(--s2)}
.profile h1{font-size:var(--fs-2xl)}
.profile a{color:var(--ink); text-decoration:none}
.profile a[href]:not([href="#"]):hover{text-decoration:underline; text-underline-offset:4px}
.profile p{margin:0; color:var(--ink-2); white-space:pre-line; max-width:60ch}
.profile p:empty{display:none}
.hello{display:flex; align-items:center; gap:var(--s5)}
.hello__art svg{width:96px; height:auto; display:block}
.hello h1{font-size:var(--fs-2xl)}
.hello p{margin:var(--s1) 0 0}
.hello .btn{margin-left:auto}
.shelf .win__body{display:flex; flex-direction:column; gap:var(--s4)}
.filters{display:flex; flex-direction:column; gap:var(--s3)}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:var(--s6) var(--s5); margin-top:var(--s2)}
.foot-row{display:flex; justify-content:space-between; align-items:center; gap:var(--s3); flex-wrap:wrap; font-size:var(--fs-sm); color:var(--ink-2); border-top:1.5px dashed var(--ink-3); padding-top:var(--s3); margin-top:var(--s2)}
.check{display:inline-flex; align-items:center; gap:var(--s2); min-height:var(--ctl-h); font-weight:600; cursor:pointer; color:var(--ink)}
.check input{width:20px; height:20px; accent-color:var(--sys)}

/* detail */
.detail{display:grid; grid-template-columns:minmax(0,260px) 1fr; gap:var(--s5); align-items:start}
.detail__img{aspect-ratio:55/85; border:var(--bw) solid var(--ink); border-radius:var(--r-md); overflow:hidden; background:var(--gs)}
.detail__img img{width:100%; height:100%; object-fit:cover; display:block}
.detail__info{display:flex; flex-direction:column; gap:var(--s3)}
.detail__info h2{font-size:var(--fs-2xl)}
.detail__info .price{font-size:var(--fs-xl)}
.how{background:var(--paper-2); border-radius:var(--r-md); padding:var(--s3) var(--s4); font-size:var(--fs-sm)}
.how p{margin:0}

/* admin */
.admin-head{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.admin-head h1{font-size:var(--fs-xl); margin-right:auto}
.summary{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); font-size:var(--fs-sm)}
.summary b{font-size:var(--fs-md)}
.rows{display:flex; flex-direction:column}
.row{display:grid; grid-template-columns:48px minmax(0,1fr) 96px 150px var(--ctl-h); gap:var(--s4); align-items:center; padding:var(--s2); border-radius:var(--r-md)}
.row + .row{border-top:1.5px solid var(--paper-2)}
.row:hover{background:var(--paper-2)}
.row__thumb{width:48px; aspect-ratio:55/85; border:1.5px solid var(--ink); border-radius:6px; overflow:hidden; background:var(--gs)}
.row__thumb img{width:100%; height:100%; object-fit:cover; display:block}
.row__name{font-weight:600; line-height:1.35}
.row__sub{font-size:var(--fs-sm); color:var(--ink-2); display:flex; align-items:center; gap:6px}
.row__sub{align-items:flex-start}
.row__sub .dot{width:10px; height:10px; margin-top:6px}
.row .price{text-align:right}
.row--sold .row__thumb img{opacity:.45; filter:grayscale(.7)}
select.input.status-select{font-size:var(--fs-sm); font-weight:600; background-color:var(--sts)}

/* form */
.form{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.form .span2{grid-column:1 / -1}
.media{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr)); gap:var(--s3)}
.mitem{display:flex; flex-direction:column; gap:var(--s1)}
.mthumb{position:relative; aspect-ratio:55/85; border:var(--bw) solid var(--ink); border-radius:var(--r-sm); overflow:hidden; background:var(--paper-2)}
.mthumb img,.mthumb video{width:100%; height:100%; object-fit:cover; display:block}
.mthumb__cover{position:absolute; left:4px; top:4px; background:var(--ink); color:var(--paper); font-size:var(--fs-sm); font-weight:600; border-radius:var(--r-pill); padding:0 var(--s2); line-height:22px}
.mitem__act{display:flex; gap:var(--s1); justify-content:center}
.mitem__act .btn{box-shadow:none; border-width:1.5px}
.madd{aspect-ratio:55/85; border:var(--bw) dashed var(--ink-2); border-radius:var(--r-sm); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s1); cursor:pointer; color:var(--ink-2); font-size:var(--fs-sm); font-weight:600; text-align:center; background:var(--paper-2)}
.madd:hover{border-color:var(--ink); color:var(--ink)}
.madd svg{width:24px; height:24px}
.media-input:focus-visible + .madd{outline:3px solid var(--sys); outline-offset:2px}
.play{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.play svg{width:40%; max-width:44px; height:auto}
/* gallery */
.gallery{display:flex; flex-direction:column; gap:var(--s3)}
.gallery__main{position:relative; aspect-ratio:55/85; border:var(--bw) solid var(--ink); border-radius:var(--r-md); overflow:hidden; background:var(--gs)}
.gallery__main img,.gallery__main video{width:100%; height:100%; object-fit:contain; display:block}
.gallery__main video{background:var(--ink)}
.gallery__nav{position:absolute; top:50%; transform:translateY(-50%); box-shadow:none}
.gallery__nav--prev{left:var(--s2)} .gallery__nav--next{right:var(--s2)}
.gallery__count{position:absolute; right:var(--s2); top:var(--s2); background:var(--paper); border:1.5px solid var(--ink); border-radius:var(--r-pill); padding:0 var(--s2); font-size:var(--fs-sm); font-weight:600}
.gallery__thumbs{display:flex; flex-wrap:wrap; gap:var(--s2)}
.gthumb{position:relative; width:44px; aspect-ratio:55/85; padding:0; border:var(--bw) solid var(--ink-3); border-radius:6px; overflow:hidden; background:var(--gs); cursor:pointer}
.gthumb[aria-current="true"]{border-color:var(--sys); box-shadow:0 0 0 2px var(--sys)}
.gthumb img,.gthumb video{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none}
.tile__badge{position:absolute; right:var(--s2); bottom:var(--s2); display:inline-flex; align-items:center; gap:var(--s1); background:var(--paper); border:1.5px solid var(--ink); border-radius:var(--r-pill); padding:0 var(--s2); font-size:var(--fs-sm); font-weight:600; line-height:22px}
.tile__badge svg{width:14px; height:14px}
.draftnote{font-size:var(--fs-sm); color:var(--ink-2); text-align:center}

@media (max-width:720px){
  .hello{flex-wrap:wrap; gap:var(--s3)}
  .hello__art{display:none}
  .hello .btn{margin-left:0; width:100%}
  .detail{grid-template-columns:1fr}
  .gallery{max-width:280px; width:100%; margin:0 auto}
  .row{grid-template-columns:48px minmax(0,1fr) var(--ctl-h); grid-template-areas:"t n e" "t p e" "s s s"; gap:var(--s1) var(--s3); padding:var(--s3) var(--s2)}
  .row .row__thumb{grid-area:t; align-self:start}
  .row .c-name{grid-area:n}
  .row .price{grid-area:p; text-align:left}
  .row .c-status{grid-area:s; margin-top:var(--s2)}
  .row .c-edit{grid-area:e; align-self:start}
}
@media (max-width:640px){
  .menubar__in{padding:var(--s2) var(--s3)}
  .brand span{display:none}
  .win__body{padding:var(--s4)}
  main{padding:var(--s4) var(--s3) var(--s7)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5) var(--s3)}
  .chips{flex-wrap:nowrap; overflow-x:auto; margin:0 calc(var(--s4) * -1); padding:0 var(--s4) var(--s1)}
  .form{grid-template-columns:1fr}
  .dlg__foot{padding:var(--s3) var(--s4)}
  .pubbar{bottom:var(--s2); padding:var(--s3)}
  .pubbar__text{flex-basis:100%}
  .pubbar #publishBtn{flex:1}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} .tile:hover .tile__img,.btn:active{transform:none} }