/* ค้นหาพัสดุ — แผนกคลังพัสดุ
 * ใช้บนมือถือขณะเดินในคลัง: ปุ่มใหญ่ ตัวอักษรคอนทราสต์ผ่าน WCAG AA ธีมสว่างอย่างเดียว
 * (คลังมีแสงจ้า จอมืดอ่านไม่ออกกลางแดด)
 */

:root{
  /* พื้น/เส้น/ตัวอักษร */
  --bg:#f4f7fa; --panel:#ffffff; --panel-2:#eef3f8;
  --line:#d3dfea; --line-strong:#b8c9da;
  --ink:#16222e; --dim:#4d6379;          /* dim เข้มพอให้ผ่าน 4.5:1 บน --panel */

  /* สีความหมาย — คู่ "ink" ใช้กับตัวอักษร, ตัวไม่มี ink ใช้กับพื้น/เส้น */
  --accent:#0284c7;  --accent-ink:#01669b;
  --hit:#f59e0b;     --hit-ink:#8a5100;   /* ส้มสดใช้ระบายบนผัง · ส้มเข้มใช้เป็นตัวอักษร */
  --warn:#dc2626;    --warn-ink:#b31b1b;
  --edit:#7c3aed;    --edit-soft:#f7f3ff; --edit-line:#ddd0f7;

  --grid-dot:#a9bccf;
  --focus:#0b5cad;

  --r-sm:9px; --r-md:11px; --r-lg:14px;
  --tap:44px;                             /* ขนาดขั้นต่ำของสิ่งที่นิ้วต้องแตะ */
}

*{ box-sizing:border-box }

/* [hidden] ต้องชนะ display ที่ตั้งไว้ใน CSS — ไม่งั้นซ่อนด้วย .hidden=true แล้วยังโผล่ */
[hidden]{ display:none !important }

/* Noto Sans Thai — variable font (wght 100-900 ในไฟล์เดียว) self-host เพราะแอปใช้เดินในคลัง
 * เน็ตอาจไม่เสถียร ห้ามพึ่ง Google Fonts CDN ตอนใช้งานจริง (ดาวน์โหลดมาไว้ในเครื่องแล้ว) */
@font-face{
  font-family:"Noto Sans Thai"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/NotoSansThai-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:"Noto Sans Thai"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/NotoSansThai-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:"Noto Sans Thai"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/NotoSansThai-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF;
}

body{
  margin:0; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  font-family:"Noto Sans Thai","Segoe UI Variable","Segoe UI",Tahoma,sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-text-size-adjust:100%;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:4px }

/* ---------- หน้าแรก — hero ค้นหา (วัดพิกัดจาก Figma "Desktop/Phone — ค้นหาพัสดุ" pixel-exact) ----------
 * ⚠ ใช้ "body > header" ไม่ใช่ "header" เฉยๆ เสมอ — item.js สร้าง <header class="ihead">
 * ของตัวเองซ้อนอยู่ใน #results (ดู itempage) ถ้าใช้ selector แบบ tag เปล่าจะเหมาถูกไปด้วย
 * กลายเป็น sticky+gradient+padding ซ้อนทับหน้าเพจ (เจอจริง 2026-08-27) */
body > header{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(180deg,#eaf2f9 0%, var(--bg) 100%);
  border-bottom:1px solid var(--line);
  padding:56px 20px 40px;
}
body > header{ transition:padding .26s cubic-bezier(.32,.72,0,1) }

/* หน้าแรกล้วน (ยังไม่ค้นหา/ยังไม่เปิดผัง — main[hidden]) ให้ hero ลอยกึ่งกลาง
 * เต็มพื้นที่ที่เหลือเหนือ footer แบบ Google homepage ตาม Figma (footer อยู่ก้นจอเสมอ ไม่ทับ)
 * พอมี main โผล่ (ค้นหา/เปิดผัง) header กลับไป top-anchored ปกติ */
body:has(main[hidden]) > header{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  border-bottom:0;
}

.help-link{
  position:absolute; top:30px; right:40px;
  font-size:15px; color:var(--dim); text-decoration:none;
  transition:opacity .16s ease-out;
}
.help-link:hover{ color:var(--accent-ink); text-decoration:underline }
/* ลดเสียงรบกวนตอนโฟกัสค้นหา (ค้นหา/เปิดผัง) ให้พฤติกรรมเดียวกับ wordmark/chip-row/meta */
body > header.compact .help-link{ opacity:0; pointer-events:none }

.sitefoot{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
  padding:20px 40px; background:var(--panel-2);
  font-size:14px; color:var(--dim);
}

.hero{
  display:flex; flex-direction:column; align-items:center;
  gap:34px; max-width:900px; margin:0 auto;
}

.wordmark, .chip-row, .meta{
  overflow:hidden;
  max-height:120px; opacity:1; transform:translateY(0);
  transition:max-height .26s cubic-bezier(.32,.72,0,1),
             margin .26s cubic-bezier(.32,.72,0,1),
             transform .26s cubic-bezier(.32,.72,0,1),
             opacity .16s ease-out;
}

body > header.compact{ padding:10px 12px }
body > header.compact .hero{ gap:0 }
body > header.compact .wordmark,
body > header.compact .chip-row,
body > header.compact .meta{
  max-height:0; margin-top:0; margin-bottom:0;
  opacity:0; transform:translateY(-10px);
}
body > header.compact .pill{ min-height:46px; padding:0 16px; font-size:17px }
body > header.compact .pill-icon{ width:22px; height:22px }

/* เคารพคนที่ตั้งเครื่องว่าไม่อยากเห็นการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important }
}

/* wordmark — 68/34px SemiBold สองสี (Figma: --ink + --accent) */
.wordmark{
  margin:0; font-weight:600; font-size:68px; line-height:1.25; letter-spacing:-.5px;
}
.w-ink{ color:var(--ink) }
.w-accent{ color:var(--accent) }

.searchbox{ position:relative; max-width:760px; width:100%; margin:0 auto }

.pill{
  display:flex; align-items:center; gap:16px;
  min-height:64px; padding:0 22px;
  border:1px solid var(--line); border-radius:32px;
  background:var(--panel);
  box-shadow:0 1px 2px rgba(22,34,46,.05), 0 4px 14px rgba(22,34,46,.06);
  transition:box-shadow .18s, border-color .18s,
             min-height .26s cubic-bezier(.32,.72,0,1),
             padding .26s cubic-bezier(.32,.72,0,1);
}
.pill:hover{ box-shadow:0 1px 2px rgba(22,34,46,.06), 0 6px 20px rgba(22,34,46,.10) }
.pill:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(2,132,199,.16), 0 6px 20px rgba(22,34,46,.10);
}

#q{
  flex:1; min-width:0; border:0; background:none; padding:0;
  font-family:inherit; font-size:18px; color:var(--ink);
  transition:font-size .26s cubic-bezier(.32,.72,0,1);
}
#q:focus{ outline:none }
#q::placeholder{ color:#54697e; opacity:1 }   /* เข้มกว่าค่า default ของเบราว์เซอร์ ให้ผ่าน 4.5:1 */

/* ไอคอน 26×26 จาก icon library ของเราเอง (design/references/design-system-warehouse) —
 * export เป็น PNG จาก Figma เพราะ figma-mcp export SVG จริงไม่ได้ (ต้องรีสตาร์ท MCP server) */
.pill-icon{
  flex:none; width:26px; height:26px;
  background-repeat:no-repeat; background-size:contain; background-position:center;
  transition:width .26s cubic-bezier(.32,.72,0,1), height .26s cubic-bezier(.32,.72,0,1);
}
.pill-icon--search{ background-image:url("icons/ic-search.png") }
.pill-icon--map{
  background-image:url("icons/ic-map-accent.png");
  min-height:0; min-width:0; padding:0; border:0; background-color:transparent; cursor:pointer;
}
.pill-divider{ flex:none; width:1px; height:28px; background:var(--line) }

/* ---------- เมนูแนะนำแท็ก @ ---------- */
.suggest{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40;
  margin:0; padding:6px; list-style:none;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--r-md);
  box-shadow:0 10px 30px rgba(22,34,46,.16);
  max-height:320px; overflow-y:auto;
}
.sug{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 13px; border-radius:var(--r-sm); cursor:pointer; min-height:44px;
}
.sug:hover, .sug.on{ background:#e6f2fb }
.sugname{ font-weight:600; font-size:15px; color:var(--accent-ink) }
.sugkind{ font-size:12.5px; color:var(--dim); white-space:nowrap }

/* แถวชิปแท็กด่วนบนสุดของ dropdown (โผล่ตอน focus ก่อนพิมพ์ @ ด้วย) + ตัวอย่างผลลัพธ์ใต้แถว
 * ใช้คลาส .sug เดิมสำหรับแถวผลลัพธ์ (โครงเหมือนกัน ต่างแค่เนื้อหา) */
.sug-tagrow{
  display:flex; flex-wrap:wrap; gap:6px; padding:6px 7px 10px;
  border-bottom:1px solid var(--line); margin-bottom:4px;
}
.sugchip{
  padding:6px 12px; border-radius:999px; cursor:pointer;
  font-size:13.5px; font-weight:600; color:var(--accent-ink);
  background:var(--panel-2); border:1px solid var(--line);
}
.sugchip:hover{ background:#e6f2fb; border-color:var(--accent) }

/* หัวแถวประวัติค้นหาล่าสุด (โผล่ต่อท้ายแถวชิปเสมอ — ไม่ใช่แทนที่ — เมื่อช่องว่างเปล่า+เคยค้นหามาก่อน) */
.sug-recenthead{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 13px; margin-top:2px; font-size:12.5px; font-weight:600; color:var(--dim);
}
.sug-clear{ font-weight:400; cursor:pointer; text-decoration:underline; text-underline-offset:2px }
.sug-clear:hover{ color:var(--accent-ink) }

/* แท็กสถานที่ — chip 45px วางกึ่งกลาง (Figma: แถวเดียว desktop · กริด 2×2 มือถือ ดู @media) */
.chip-row{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px; max-width:760px; margin:0 auto;
}
.chip{
  display:inline-flex; align-items:center;
  min-height:45px; padding:0 20px; margin:0;
  font-size:15px; font-weight:500; white-space:nowrap;
  border-radius:22px; border:1px solid var(--line);
  color:var(--accent-ink); background:var(--panel);
}

button{
  min-height:var(--tap); min-width:var(--tap);
  padding:11px 15px; font-size:16px;
  border:1px solid var(--line-strong); border-radius:var(--r-md);
  background:var(--panel); color:var(--ink);
  cursor:pointer; white-space:nowrap;
  transition:background .15s, border-color .15s;
}
button:hover:not(:disabled){ background:var(--panel-2); border-color:var(--accent) }
button:active:not(:disabled){ transform:scale(.97) }
button:disabled{ opacity:.45; cursor:default }
#q:disabled{ opacity:.55; cursor:default }
button.small{ padding:9px 12px; font-size:14px; border-radius:var(--r-sm) }
button.danger{ color:var(--warn-ink); border-color:#eabdbd }
button.on{ background:var(--edit); border-color:var(--edit); color:#fff }
button.on:hover{ background:#6d28d9; border-color:#6d28d9 }

.meta{
  max-width:760px; margin:0 auto;
  font-size:15px; color:var(--dim); line-height:1.55; text-align:center;
}
.meta .caution{ color:var(--hit-ink) }

/* ---------- มือถือ — เวอร์ชัน Figma "Phone — ค้นหาพัสดุ" (390 wide) ---------- */
@media (max-width:640px){
  body > header{ padding:32px 20px 24px }
  .hero{ gap:23px }

  .wordmark{ font-size:34px }

  .pill{ min-height:56px; padding:0 18px; gap:12px; border-radius:28px }
  #q{ font-size:16px }

  .chip-row{
    display:grid; grid-template-columns:repeat(2, auto);
    justify-content:center; width:fit-content;
  }
}

/* ---------- โครงหน้า ---------- */
/* min-height กันเคสหน้าสั้น (ผลค้นหาว่าง/ผังเล็ก) — ถ้าไม่กันไว้ พอเลื่อนจนหัวเว็บยุบ
 * (~70px) เนื้อหารวมอาจตกลงมาพอดีเท่าจอ ทำให้ scrollY ที่เพิ่งเลื่อนไปถูก clamp กลับ 0
 * ทันที (เพราะไม่มีที่ให้เลื่อนอีกแล้ว) — เห็นเป็นอาการ "เลื่อนแล้วกระตุกกลับบนสุด" */
/* width:100% ต้องมี — body เป็น flex column (บรรทัด 48) ทำให้ main เป็น flex item
 * margin:0 auto (คู่กับ max-width) บนแกน cross ของ flex item จะ "ดูดพื้นที่" แทนการ stretch
 * เต็มความกว้างตามปกติของ block ธรรมดา กลายเป็นขนาดตาม fit-content ของเนื้อหาข้างในแทน
 * ซึ่งพอเนื้อหามี CSS Grid auto-fit ซ้อนอยู่ (.imedia) จะเกิด circular sizing — grid ต้องรู้ความกว้าง
 * container ถึงตัดสินใจจำนวนคอลัมน์ได้ แต่ container (main) ก็รอความกว้างจาก grid กลับมาตัดสินใจ
 * ตัวเอง — เอนจินแต่ละตัวคลี่ loop นี้ไม่เหมือนกัน (เจอจริง 2026-09-04: หน้าพัสดุ .imedia
 * สลับ 1/2 คอลัมน์รัวๆ เห็นชัดใน Chrome มากกว่า Zen/Firefox) — ใส่ width:100% ตัดความกำกวมทิ้ง
 * ให้ main กาง fit เต็มความกว้าง (จำกัดด้วย max-width) เป็นค่าที่แน่นอนตั้งแต่แรก ไม่ต้องพึ่งเนื้อหา */
main{ width:100%; max-width:1500px; margin:0 auto; padding:12px; min-height:calc(100vh - 70px) }

.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:12px; margin-bottom:12px;
}
.cardhead{
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  margin-bottom:9px;
}
h2{ margin:0; font-size:16px; font-weight:600; color:var(--ink) }
h2 .hint{ font-size:14px; font-weight:400; color:var(--dim) }

/* ---------- แถวนำทาง: ปุ่มย้อนกลับ + เส้นทาง ---------- */
.navrow{ display:flex; align-items:center; gap:12px; margin:2px 2px 10px }

#mapBack{
  flex:none; padding:9px 16px; font-size:15px; font-weight:600;
  border-radius:999px;
  color:var(--accent-ink); border-color:var(--accent); background:var(--panel);
}
#mapBack:hover{ background:var(--accent); border-color:var(--accent); color:#fff }

/* เส้นทาง — อ่านเหมือน path ของโฟลเดอร์ เงียบๆ ไม่แย่งสายตาจากผัง */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center;
  font-size:14px; line-height:1.6; min-width:0;
}
.crumbs button{
  min-height:0; min-width:0; padding:2px 2px; font-size:14px;
  border:0; background:none; border-radius:3px;
  color:var(--dim); font-weight:400;
}
.crumbs button:hover{ background:none; color:var(--accent-ink); text-decoration:underline }
.crumbs .sep{ color:var(--line-strong); padding:0 5px; user-select:none }
.crumbs .here{ font-weight:600; color:var(--ink) }

/* ---------- แถบเครื่องมือแก้ผัง ---------- */
#editBar{
  margin-bottom:10px; padding:10px;
  background:var(--edit-soft); border:1px solid var(--edit-line); border-radius:var(--r-md);
}
.ebrow{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:7px; align-items:center }
.ebnote{ margin:0; font-size:12.5px; color:var(--dim); line-height:1.65 }
.ebnote code{ background:var(--panel); padding:1px 5px; border-radius:4px }

kbd{
  font-family:ui-monospace,Consolas,monospace; font-size:11.5px;
  padding:1px 6px; border:1px solid var(--line-strong); border-bottom-width:2px;
  border-radius:5px; background:var(--panel);
}

/* ---------- ผังคลัง ---------- */
#mapWrap{ display:flex; justify-content:center; overflow-x:auto; -webkit-overflow-scrolling:touch }

svg{
  display:block; width:100%; min-width:560px; height:auto; max-height:76vh;
  background:none;                       /* ไม่มีกรอบ — จุดกริดทำหน้าที่บอกขอบเขตผังเอง */
  touch-action:none;                     /* ไม่งั้นลากบนมือถือกลายเป็นสกรอลล์ */
}

/* ---------- การ์ดกริดอาคาร (แทน SVG ลากอิสระ เฉพาะผังบนสุด — จาก Figma 2026-08-21) ---------- */
.bcard-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
@media (max-width:820px){ .bcard-grid{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:520px){ .bcard-grid{ grid-template-columns:1fr } }

.bcard{
  display:flex; align-items:center; gap:16px;
  min-height:120px; padding:20px 24px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  text-align:left; cursor:pointer;
}
.bcard:hover{ border-color:var(--line-strong) }
.bcard:focus-visible{ outline:2px solid var(--focus); outline-offset:2px }
.bcard .bicon{ flex:none; width:24px; height:24px }
.bcard .btext{ flex:1; min-width:0 }
.bcard .btitle{ font-size:16px; font-weight:600; color:var(--ink) }
.bcard .bmeta{ font-size:13px; color:var(--dim); margin-top:4px }
.bcard .bchev{ flex:none; width:20px; height:20px; opacity:.6 }

/* ผังว่างนอกโหมดแก้ไข — ซ่อนผ้าใบ SVG เปล่าๆ ไว้ (โชว์แค่การ์ดข้อความแทน)
 * เข้าโหมดแก้ไข (svg ได้คลาส .editing) ก็โผล่กลับมาให้วาดได้ตามเดิม */
#mapWrap.is-empty svg:not(.editing){ display:none }

/* ---------- ผังว่าง (ยังไม่ได้สำรวจ) ---------- */
.map-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:12px; padding:64px 20px;
}
.map-empty img{ width:48px; height:48px; opacity:.5 }
.map-empty .metitle{ font-size:17px; font-weight:600; color:var(--ink) }
.map-empty .mesub{ font-size:14px; color:var(--dim); max-width:420px }

.griddot{ fill:var(--grid-dot); opacity:.5 }
svg.editing .griddot{ opacity:.95 }

/* ---------- โหมด 3D Top Side — เส้นลวด (wireframe.js, 2026-08-27) ----------
 * มุมกล้องคงที่ต่อระดับ ไม่หมุนโต้ตอบ มีแค่ fade เจาะเข้า/ถอยออก
 * "หน้าโล่งๆ" ตามที่ผู้ใช้ขอ — ไม่มี title/crumbs ปกติ/แถบเตือนค้างจอ เหลือแค่ผ้าใบ +
 * breadcrumb/ปุ่มออก ลอยอยู่มุมจอแบบโปร่งแสง เหมือนภาพอ้างอิงที่ส่งมา
 */
.card:has(> #wireWrap:not([hidden])){ padding:0; overflow:hidden }   /* ผ้าใบเต็มการ์ด ไม่มีขอบใน */

.wire-wrap{
  position:relative;
  transition:opacity .2s ease;
}
.wire-wrap.fading{ opacity:0 }

.wire-canvas{
  width:100%; height:78vh; min-height:420px; max-height:760px;
  display:block; background:var(--panel-2);
  cursor:pointer; touch-action:none;
}

.wire-crumbs{
  position:absolute; top:14px; left:14px; z-index:2;
  display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:13px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(4px);
  border-radius:999px; padding:6px 12px; max-width:calc(100% - 140px);
}
.wc-crumb{
  background:none; border:none; padding:2px; color:var(--accent); cursor:pointer;
  font-size:inherit; border-radius:6px; white-space:nowrap;
}
.wc-crumb:hover:not(:disabled){ text-decoration:underline }
.wc-crumb.current, .wc-crumb:disabled{ color:var(--ink); font-weight:600; cursor:default }
.wc-sep{ color:var(--line-strong) }

.wire-exit{
  position:absolute; top:14px; right:14px; z-index:2;
  background:rgba(255,255,255,.82); backdrop-filter:blur(4px);
  border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:13px;
  cursor:pointer; color:var(--ink);
}
.wire-exit:hover{ background:#fff }

.wire-note{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:2;
  background:var(--ink); color:#fff; font-size:13px;
  padding:8px 14px; border-radius:999px; pointer-events:none; max-width:88%; text-align:center;
}

/* กดช่องชั้นวางแล้วขึ้นเป็น panel overlay กดปิดได้ (2026-09-04 ผู้ใช้ขอ แทนของเดิมที่เขียนลง
 * #results ใต้ผ้าใบ ต้องเลื่อนจอไปดู) — รูปแบบ modal เดียวกับ .lightbox ที่มีอยู่แล้วในแอป */
.wire-overlay-backdrop{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,18,26,.75); padding:16px;
}
.wire-overlay{
  position:relative; width:100%; max-width:640px; max-height:92vh;
  background:var(--panel); border-radius:var(--r-lg);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.wire-overlay-body{ padding:44px 18px 20px }
.wire-overlay-close{
  position:absolute; top:8px; right:8px; z-index:2;
  background:rgba(255,255,255,.92); backdrop-filter:blur(4px);
  border:1px solid var(--line); border-radius:999px;
  width:var(--tap); height:var(--tap); font-size:16px; line-height:1;
  cursor:pointer; color:var(--ink);
}
.wire-overlay-close:hover{ background:#fff }

/* ช่องที่มีมากกว่า 1 รหัส (พบจริง 1 ช่องจาก 372 — A04 03/3) — รายการย่อให้เลือกก่อนเปิดหน้าพัสดุเต็ม */
.wire-itemrow{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  width:100%; text-align:left; padding:10px 12px; margin-bottom:6px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm);
  cursor:pointer; font:inherit;
}
.wire-itemrow:hover{ background:#e3ecf3 }
.wire-itemrow-code{ font-weight:600; font-size:13px; color:var(--accent-ink) }
.wire-itemrow-name{ font-size:14px }
.wire-itemback{ margin-bottom:10px }

/* พื้นที่ = เป้าหมายหลักในการกด ทำให้ใหญ่และบอกชัดว่ากดได้ */
.area{ fill:var(--panel-2); stroke:var(--line-strong); stroke-width:1.5; cursor:pointer }
.area:hover, .area:focus-visible{ fill:#dceaf6; stroke:var(--accent); stroke-width:2.5 }
.area.main{ fill:#e7eef5 }
.area.shelf{ fill:#fdf3e3; stroke:#d9ab63 }
.area.shelf:hover{ fill:#fae7c8; stroke:var(--hit-ink) }
.area.leaf{ stroke-dasharray:5 4 }        /* ยังไม่มีผังย่อย/ของข้างใน */

.alabel{ font-size:14px; fill:var(--ink); pointer-events:none; user-select:none }
.acount{ font-size:12px; fill:var(--dim); pointer-events:none; user-select:none }

/* หมุดโซน 1-28 จากป้ายจริง = ข้อมูลประกอบ ไม่ใช่ปุ่มหลัก */
.spot{ fill:var(--panel); stroke:var(--dim); stroke-width:1.6; pointer-events:none }
.spot.hit{ fill:var(--hit); stroke:var(--hit-ink) }
.spot.sel{ stroke:var(--accent); stroke-width:3.4 }
.spothit{ fill:transparent; cursor:pointer }   /* วงใสขนาดนิ้วซ้อนทับ ให้แตะติดง่าย */
.spothit:hover + .spot, .spothit:focus-visible + .spot{ stroke:var(--accent); stroke-width:3 }

.snum{
  font-size:12px; font-weight:700; fill:var(--ink);
  text-anchor:middle; dominant-baseline:central; pointer-events:none; user-select:none;
}
.spot.hit + .snum{ fill:#2b1a00 }

/* ---- โหมดแก้ผัง ---- */
svg.editing .area{ cursor:move }
svg.editing .spothit{ cursor:move }
.area.picked{ stroke:var(--edit); stroke-width:2.5; stroke-dasharray:6 4 }
.spot.picked{ stroke:var(--edit); stroke-width:3.4 }

.handle{ fill:#fff; stroke:var(--edit); stroke-width:2 }
.handle.vertex{ fill:var(--edit); stroke:#fff; cursor:move }
.handle.nw,.handle.se{ cursor:nwse-resize }
.handle.ne,.handle.sw{ cursor:nesw-resize }
.handle.n,.handle.s{ cursor:ns-resize }
.handle.e,.handle.w{ cursor:ew-resize }

/* ระหว่างวาดรูปหลายเหลี่ยม */
svg.drawing{ cursor:crosshair }
svg.drawing .area, svg.drawing .spothit{ pointer-events:none }
.drawdot{ fill:var(--edit); stroke:#fff; stroke-width:1.5 }
.drawline{ stroke:var(--edit); stroke-width:2; stroke-dasharray:5 4 }

/* ---------- หน้าชั้นวาง: ตารางช่อง ----------
 * UI ต่างจากผังลากอิสระโดยตั้งใจ — ที่นี่คือ "ของจริงบนชั้น" ไม่ใช่แผนที่
 * ปุ่มเพิ่ม 2 ชนิดต้องแยกออกจากกันด้วยตา: ลูกบาศก์ = ของ · รูปชั้น = โครงสร้าง
 */
#shelfWrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* ---------- หน้าโซนชั้นวาง: แถวของชั้นวางหลายตัว ---------- */
.zonehead{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:2px 4px 12px; border-bottom:1px solid var(--line); margin-bottom:12px;
}
.zonename{ font-size:17px; font-weight:700 }
.zonehead .shelftools{ margin-left:auto }

.zonerow{ display:flex; align-items:stretch; gap:6px; min-width:min-content; padding:2px 2px 8px }

.shelfcard{
  flex:none; width:184px;
  display:flex; flex-direction:column; align-items:stretch; gap:7px;
  padding:13px 13px 15px; text-align:right;
  border:2px dashed var(--line-strong); border-radius:var(--r-lg);
  background:var(--bg);
}
.shelfcard:hover{ border-style:solid; border-color:var(--accent); background:#eaf4fb }
.shelfcard.has{ border-style:solid; border-color:#d9ab63; background:#fdf3e3 }
.shelfcard.has:hover{ border-color:var(--hit-ink); background:#fae7c8 }

.scardname{ font-size:15.5px; font-weight:700 }
.scardsub{ font-size:12.5px; color:var(--dim) }

/* ผังจิ๋วของช่องในชั้นวาง — เห็นได้ทันทีว่าเต็มแค่ไหน โดยไม่ต้องกดเข้าไป */
.mini{ display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:2px; margin-top:2px }
.mini i{
  display:block; aspect-ratio:1; border-radius:2px;
  background:var(--panel); border:1px solid var(--line-strong);
}
.mini i.on{ background:var(--hit); border-color:var(--hit-ink) }

/* ปุ่มแทรกชั้นวางระหว่างชั้น — แคบกว่าปุ่มซ้าย/ขวาในหน้าชั้นวาง */
.addshelf.slot{ width:74px; font-size:12px }
.addshelf.slot .ico{ width:24px; height:24px }

.shelfrow{ display:flex; align-items:stretch; gap:12px; min-width:min-content; padding:2px }

.shelfunit{
  flex:1; min-width:320px;
  border:2px solid var(--line-strong); border-radius:var(--r-lg);
  background:var(--panel); overflow:hidden;
}
.shelfhead{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:11px 14px; background:var(--panel-2); border-bottom:1px solid var(--line);
}
.shelfname{ font-size:16px; font-weight:700 }
.shelfsize{ font-size:12.5px; color:var(--dim) }

.shelftools{ display:flex; gap:6px; flex-wrap:wrap }
.sizectl{ display:flex; align-items:center; gap:5px; margin-left:auto; font-size:12.5px; color:var(--dim) }
.sizectl b{ min-width:18px; text-align:center; color:var(--ink); font-size:14px }
button.tiny{
  min-width:30px; min-height:30px; padding:0; font-size:16px; line-height:1;
  border-radius:8px;
}

/* ช่องกว้างสูงสุด 200px แล้วจัดกึ่งกลาง — ไม่ปล่อยให้ยืดเต็มจอจนช่องแบนผิดสัดส่วน */
.shelfgrid{
  display:grid; grid-template-columns:repeat(var(--cols), minmax(128px, 200px));
  justify-content:center; gap:8px; padding:12px;
}

.cell{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; min-height:132px; padding:26px 12px 14px; text-align:center;
  border:1px dashed var(--line-strong); border-radius:var(--r-md);
  background:var(--bg);
}
.cell:hover{ border-style:solid; border-color:var(--accent); background:#eaf4fb }
.cell.filled{ border-style:solid; border-color:#d9ab63; background:#fdf3e3 }
.cell.filled:hover{ border-color:var(--hit-ink); background:#fae7c8 }

.cellid{
  position:absolute; top:8px; right:11px;
  font-family:ui-monospace,Consolas,monospace; font-size:12px; font-weight:700; color:var(--dim);
}

.cellmid{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; width:100% }
.cellmid.empty{ color:var(--dim) }
.cellmid.empty .ico{ width:26px; height:26px; opacity:.55 }
.cellmid.empty b{ font-size:15px; font-weight:600 }

.cellcount{ font-size:16px; font-weight:700 }
.cellpeek{
  font-size:12.5px; color:var(--dim); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* "+ เพิ่มของ" เป็นคำเชิญรอง — จางไว้ ชัดขึ้นตอนชี้ ไม่แย่งความสนใจจากคำว่า "ว่าง" */
.celladd{
  font-size:12.5px; color:var(--accent-ink); opacity:.5; transition:opacity .15s;
}
.celladd b{ font-size:14px }
.cell:hover .celladd, .cell:focus-visible .celladd{ opacity:1 }

.ico{ width:18px; height:18px; flex:none }

/* ปุ่มเพิ่มชั้นวางถัดไป — สูงเต็มความสูงชั้น ให้รู้สึกว่าเป็น "โครงสร้าง" ไม่ใช่ของบนชั้น */
.addshelf{
  flex:none; width:104px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:12px 8px; font-size:13px; line-height:1.35; text-align:center;
  border:2px dashed var(--line-strong); border-radius:var(--r-lg);
  background:var(--bg); color:var(--dim);
}
.addshelf .ico{ width:30px; height:30px }
.addshelf b{ font-size:16px; color:var(--edit) }
.addshelf:hover{ border-style:solid; border-color:var(--edit); color:var(--edit); background:var(--edit-soft) }
.addshelf.go{
  border-style:solid; border-color:var(--accent); color:var(--accent-ink); background:var(--panel);
}
.addshelf.go:hover{ background:#eaf4fb; border-color:var(--accent); color:var(--accent-ink) }

/* แถบหัวรายการของในช่อง */
.cellbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:10px 4px 12px; border-bottom:1px solid var(--line); margin-bottom:4px;
}
.cellwhere{ font-size:13px; color:var(--dim) }
.addthing{
  margin-right:auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; font-size:14px; font-weight:600; border-radius:999px;
  color:var(--accent-ink); border-color:var(--accent); background:var(--panel);
}
.addthing:hover{ background:var(--accent); border-color:var(--accent); color:#fff }

/* รูปประจำช่องชั้นวาง (ผังปกติ, 2026-09-07) — รวมทั้งรูปสำรวจเดิม (bundle มากับเว็บ) และรูปที่
 * ถ่าย/อัปโหลดเพิ่มทีหลัง (Google Drive ผ่าน gas-api.js) แสดงในกล่องเดียวกันไม่แยก */
.cellgallery-wrap{ padding:0 4px 14px; border-bottom:1px solid var(--line); margin-bottom:10px }
.cellgallery{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px }
.cellgallery a{
  display:block; width:110px; height:110px; border-radius:var(--r-sm);
  overflow:hidden; border:1px solid var(--line); flex:none;
}
.cellgallery img{ width:100%; height:100%; object-fit:cover; display:block }

/* ---------- รายการผลลัพธ์ ---------- */
.item{
  display:block; width:100%; text-align:right;
  border:0; border-top:1px solid var(--line); border-radius:0;
  background:none; padding:12px 4px; min-height:var(--tap); cursor:pointer;
}
.item:first-of-type{ border-top:0 }
.item:hover{ background:var(--panel-2) }

.code{ font-family:ui-monospace,Consolas,monospace; font-size:16px; font-weight:700; color:var(--accent-ink) }
.nm{ margin-top:3px; font-size:15px; line-height:1.45; font-weight:500 }
.sub{ margin-top:3px; font-size:13px; color:var(--dim); line-height:1.5 }
.tags{ margin-top:7px; display:flex; flex-wrap:wrap; gap:5px }

.tag{
  display:inline-block; padding:3px 9px;
  font-size:12px; border:1px solid var(--line-strong); border-radius:999px; color:var(--dim);
}
.tag.z{ border-color:var(--accent); color:var(--accent-ink) }
.tag.del{ border-color:var(--warn); color:var(--warn-ink) }
.tag.guess{ border-color:var(--hit-ink); color:var(--hit-ink) }

.empty{ margin:0; padding:16px 4px; font-size:14.5px; color:var(--dim); line-height:1.7 }

#more{ width:100%; margin-top:10px }

/* ---------- รายละเอียดของชิ้นเดียว ---------- */
.detail dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 14px }
.detail dt{ font-size:13px; color:var(--dim) }
.detail dd{ margin:0; font-size:15px; word-break:break-word }
.detail .code{ font-size:22px }
.detail .nm{ font-size:17px; margin-bottom:12px }

/* ================= หน้าพัสดุ ================= */

/* ---- แถวย่อในรายการ: รูปย่อ + ชื่อ + แท็กที่อยู่ ---- */
.rowmain{ display:flex; gap:11px; align-items:flex-start }
.thumb{
  flex:none; width:52px; height:52px; border-radius:var(--r-sm);
  object-fit:cover; background:var(--panel-2); border:1px solid var(--line);
}
.thumb.none{
  display:flex; align-items:center; justify-content:center;
  color:var(--line-strong); font-size:22px;
}
.rowtext{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.rowtext .code{ font-size:15px }
.rowtext .nm{ margin:0 }

/* ---- หน้าเต็ม ---- */
/* scroll-margin-top กัน item.js เรียก scrollIntoView() แล้วโผล่ไปโดนใต้ header ที่ sticky อยู่
 * (เจอจริง 2026-08-27 — หัวรายการ .ihead ไปนอนซ้อนใต้ body>header พอดี มองไม่เห็นเลย)
 * ใช้ความสูง header ตอนยุบ (compact, ~67px ตอนวัดจริง) + เผื่อกันเหนียว */
.itempage{ padding:4px 2px 8px; scroll-margin-top:84px }

.ihead{ margin-bottom:12px }
.icode{
  font-family:ui-monospace,Consolas,monospace; font-size:26px; font-weight:700;
  color:var(--accent-ink); letter-spacing:.5px;
}
.iname{ margin:4px 0 0; font-size:20px; font-weight:600; line-height:1.35 }
.isap{ margin:3px 0 0; font-size:14px; color:var(--dim) }

.itags{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-bottom:16px }
.chip{
  min-height:0; min-width:0; padding:5px 12px; font-size:13px; font-weight:600;
  border-radius:999px; border:1px solid var(--line-strong); background:var(--panel);
}
.chip.loc{ color:var(--accent-ink); border-color:var(--accent) }
.chip.loc.guess{ color:var(--hit-ink); border-color:var(--hit-ink); border-style:dashed }
.chip.mat{ color:var(--edit); border-color:var(--edit-line); background:var(--edit-soft) }
.chip.none{ color:var(--dim); cursor:default }
.chipsep{ color:var(--line-strong); padding:0 1px }

/* ---- รูป + 3D ---- */
.imedia{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; margin-bottom:18px }

.photo{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; min-height:220px; padding:12px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel-2);
}
.photo img{ max-width:100%; max-height:260px; border-radius:var(--r-sm); cursor:zoom-in }
.photo.nophoto span{ color:var(--dim); font-size:14px }
.photobtn{
  padding:8px 14px; font-size:13.5px; font-weight:600; border-radius:999px;
  border:1px solid var(--accent); color:var(--accent-ink); background:var(--panel); cursor:pointer;
}
.photobtn:hover{ background:var(--accent); color:#fff }
.photodel{
  position:absolute; top:8px; left:8px;
  min-height:0; min-width:0; padding:4px 10px; font-size:12px;
  color:var(--warn-ink); border-color:#eabdbd;
}

.three{
  display:flex; flex-direction:column; min-height:220px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel-2); overflow:hidden;
}
.threehead{
  display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap;
  padding:9px 12px; font-size:13px; font-weight:600;
  background:var(--panel); border-bottom:1px solid var(--line);
}
.threehead span{ font-weight:400; color:var(--dim); font-size:12px }
.canvas3d{ flex:1; width:100%; min-height:190px; cursor:grab; touch-action:none }
.canvas3d:active{ cursor:grabbing }

.lightbox{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,18,26,.82); padding:24px;
}
.lightbox img{ max-width:96%; max-height:88%; border-radius:var(--r-md) }
.lbclose{ position:fixed; top:20px; left:20px; font-size:16px }

/* ---- ส่วนเนื้อหา ---- */
.isec{ padding-top:14px; border-top:1px solid var(--line); margin-top:14px }
.isec h4{ margin:0 0 8px; font-size:14px; color:var(--dim); font-weight:600 }
.idesc{ margin:0 0 10px; font-size:15px; line-height:1.65 }
.inote{
  margin:0 0 8px; padding:10px 12px; font-size:14px; line-height:1.6;
  background:var(--panel-2); border-radius:var(--r-sm); color:var(--ink);
}

.itraits{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:7px 16px }
.itraits dt{ font-size:13px; color:var(--dim) }
.itraits dd{ margin:0; font-size:14.5px; word-break:break-word }

/* ---- ตำแหน่งแบบเต็ม: ผังจริงพร้อมไฮไลต์ช่อง ---- */
.placeview{ display:flex; flex-direction:column; align-items:flex-start; gap:10px }
.placepath{ margin:0; font-size:14.5px; font-weight:600 }
.placegrid{
  display:grid; grid-template-columns:repeat(var(--cols), 46px); gap:4px;
  padding:10px; background:var(--panel-2); border-radius:var(--r-sm);
}
.placegrid i{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1; border-radius:4px; font-style:normal; font-size:11px; font-weight:700;
  background:var(--panel); border:1px solid var(--line-strong);
}
.placegrid i.on{ background:#fae7c8; border-color:#d9ab63 }
.placegrid i.here{
  background:var(--warn); border-color:var(--warn-ink); color:#fff;
  box-shadow:0 0 0 3px rgba(220,38,38,.22);
}

/* ป้ายชื่อที่ผู้ใช้ปักเองบนผัง (คนละอย่างกับหมุดเลขโซน 1-28) */
.pinbox{ fill:var(--panel); stroke:var(--edit); stroke-width:1.8; pointer-events:none }
.pintext{
  font-size:13px; font-weight:600; fill:var(--edit);
  text-anchor:middle; dominant-baseline:central; pointer-events:none; user-select:none;
}
.spothit:hover + .pinbox, .spothit:focus-visible + .pinbox{ fill:var(--edit-soft); stroke-width:2.6 }
.pinbox.picked{ stroke-dasharray:5 3 }