/* มติ 426 — AIC Frame Builder · ทุกกฎอยู่ใต้ .frame-builder จึงไม่รั่วไปหน้าอื่น
   มติ 457 — จอกว้าง = 3D ซ้าย (ตรึงไว้) · ตั้งค่า + รายการซ้อนกันทางขวา · ≤1100px = คอลัมน์เดียว 3D → ตั้งค่า → รายการ
   ⚠ ลำดับใน HTML คือ ตั้งค่า → 3D → รายการ (ข้อสอบ PHP เฝ้าอยู่) — ย้ายตำแหน่งด้วย grid-area/order เท่านั้น */
.frame-builder { max-width: 1480px; margin: 0 auto; padding: 16px; display: grid; gap: 14px; }
.frame-builder > * { min-width: 0; }
.frame-builder h1 { margin: 0 0 4px; font-size: clamp(24px, 3vw, 32px); }
.frame-builder .fr-beta { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #ffd70a; color: #111; font-size: 13px; font-weight: 700; }
.frame-builder .fr-lead { margin: 0; color: #333; font-size: 16px; max-width: 80ch; }
.frame-builder h2 { margin: 16px 0 8px; font-size: 16px; }
.frame-builder h2:first-child { margin-top: 0; }
.frame-builder label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.frame-builder input[type="text"], .frame-builder select { font: inherit; font-weight: 400; width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #cfcfcf; border-radius: 8px; background: #fff; box-sizing: border-box; }
.frame-builder .fr-check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-top: 8px; }
.frame-builder .fr-note { margin: 6px 0 0; color: #666; font-size: 13px; }
.frame-builder .fr-warn { color: #b45309; }
.frame-builder .fr-sub { font-size: 12px; color: #666; font-weight: 400; }
.frame-builder .fr-pending { color: #b45309; }
.frame-builder .fr-link { cursor: pointer; text-decoration: underline; }

.frame-builder .fr-layout { display: grid; gap: 14px; }
/* มติ 458 — ส่วนออกแบบ: 3D ซ้ายติดจอระหว่างปรับค่า · ตั้งค่าขวา · ส่วนราคาเต็มความกว้างข้างล่าง (3D ไม่ลอยทับ) */
.frame-builder .fr-design { display: grid; grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr); grid-template-areas: "view setup"; gap: 14px; align-items: start; }
.frame-builder .fr-panel { min-width: 0; background: #fff; border: 1px solid #e3e3e3; border-radius: 10px; padding: 14px; }
.frame-builder .fr-setup { grid-area: setup; }
.frame-builder .fr-view { grid-area: view; position: sticky; top: 12px; }
.frame-builder .fr-bom-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 20px; align-items: start; }
.frame-builder .fr-bom-side { display: grid; gap: 0; }
.frame-builder .fr-bom-side .fr-sum { margin-top: 0; }
.frame-builder .fr-bom-list > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; }
.frame-builder .fr-bom-list > summary::-webkit-details-marker { display: none; }
.frame-builder .fr-bom-list > summary::before { content: "▸"; font-size: 14px; }
.frame-builder .fr-bom-list[open] > summary::before { content: "▾"; }
.frame-builder .fr-bom-list > summary h3 { display: inline; margin: 0; }
.frame-builder .fr-mini-partial { background: #fffbeb; outline: 1px solid #fde68a; }
.frame-builder h3 { margin: 14px 0 6px; font-size: 15px; }
/* มติ 457 — หัวข้อขั้น 1-2-3 */
.frame-builder .fr-step { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: #ffd70a; color: #111; font-size: 13px; font-weight: 800; vertical-align: 1px; }
/* ขนาด: ชื่อ · แถบเลื่อน · ช่องพิมพ์ มม. ในแถวเดียว */
.frame-builder .fr-dims { display: grid; gap: 10px; }
.frame-builder .fr-dim { display: grid; grid-template-columns: 84px minmax(0, 1fr) 118px; align-items: center; gap: 10px; }
.frame-builder .fr-dim > label { font-size: 14px; }
.frame-builder .fr-dim input[type="range"] { width: 100%; min-height: 32px; accent-color: #111; }
.frame-builder .fr-num { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; }
.frame-builder .fr-num input[type="text"] { text-align: right; }
.frame-builder [aria-invalid="true"] { border-color: #dc2626 !important; outline: 1px solid #fecaca; }
.frame-builder .fr-field-hint { margin: 4px 0 0; padding: 6px 8px; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 13px; }
.frame-builder .fr-field-hint .fr-btn { margin-top: 4px; }
.frame-builder .fr-dims .fr-field-hint { margin-top: -4px; }
.frame-builder #fr-base-wrap, .frame-builder .fr-qty-row { margin-top: 12px; }
.frame-builder #fr-base-wrap[hidden] { display: none; }
.frame-builder .fr-mini { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #fff8cc; font-size: 14px; }
.frame-builder .fr-mini[hidden] { display: none; }
.frame-builder .fr-mini a { color: #111; font-weight: 700; }
/* «ตั้งค่าเพิ่มเติม» — พับไว้เป็นค่าเริ่ม · แบบไม่หายเมื่อพับ/กาง (เป็นแค่การซ่อนช่อง) */
/* มติ 462 — «ตั้งค่าเพิ่มเติม» เห็นตลอด (เลิกพับ) · เส้นคั่นบางจากค่าพื้นฐาน */
.frame-builder .fr-adv { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e3e3e3; }
.frame-builder .fr-adv > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 4px; }
.frame-builder .fr-adv > h2 .fr-sub { font-weight: 400; }
.frame-builder .fr-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
/* ข้อความตอบรับสั้นบนภาพ 3D · ลดการเคลื่อนไหว = home.css ปิด transition ทั้งเว็บอยู่แล้ว (ไม่ต้องเขียนซ้ำ) */
.frame-builder .fr-toast { position: absolute; left: 50%; bottom: 14px; z-index: 2; margin: 0; padding: 8px 14px; border-radius: 999px; background: #111; color: #fff; font-size: 14px; font-weight: 600; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.frame-builder .fr-toast.fr-on { opacity: 1; transform: translate(-50%, 0); }

.frame-builder .fr-tpl { display: flex; flex-wrap: wrap; gap: 8px; }
/* มติ 458 · 462 (เจ้าของสั่ง «ขนาดเท่ากล่องรถเข็น/ชั้นวางของ») — การ์ดเลือกแบบเล็กเท่าการ์ดตัวอย่าง: ภาพย่อซ้าย ชื่อขวา
   เลือกแล้ว = กรอบเข้ม (เงาด้านใน ไม่ขยายขนาด) + พื้นเหลือง · วงกลมเลือกซ่อนแต่โฟกัสด้วยคีย์บอร์ดได้ */
.frame-builder .fr-tpl-card { position: relative; display: inline-flex; flex-direction: row; align-items: center; gap: 6px; min-height: 48px; padding: 4px 12px 4px 6px; border: 1px solid #e3e3e3; border-radius: 10px; background: #fff; cursor: pointer; font-size: 14px; font-weight: 700; transition: border-color .15s ease, background .15s ease; }
.frame-builder .fr-tpl-card:hover { border-color: #9ca3af; }
.frame-builder .fr-tpl-card input { position: absolute; opacity: 0; pointer-events: none; }
.frame-builder .fr-tpl-card:has(input:checked) { border-color: #111; box-shadow: inset 0 0 0 1px #111; background: #fff8cc; }
.frame-builder .fr-tpl-card:has(input:focus-visible) { outline: 3px solid #111; outline-offset: 2px; }
.frame-builder .fr-tpl-img { display: block; width: 56px; height: auto; }
.frame-builder .fr-table-only { margin-top: 8px; display: grid; gap: 8px; }
.frame-builder .fr-table-only[hidden] { display: none; }
.frame-builder .fr-extras { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.frame-builder .fr-extras li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* มติ 427 — แถวคานเสริมแก้ความสูงในที่ · แถวที่วางไม่ได้เป็นสีแดง · แถวของชิ้นที่เลือกเป็นสีเหลือง */
.frame-builder .fr-extras li { flex-wrap: wrap; padding: 6px 8px; border-radius: 8px; background: #f8f9fb; }
.frame-builder .fr-extras li.fr-note { background: none; padding: 0; }
.frame-builder .fr-extras li.fr-bad { background: #fef2f2; outline: 1px solid #fecaca; }
.frame-builder .fr-extras li.fr-hl { background: #fff3c4; }
.frame-builder .fr-extra-label { flex: 1 1 160px; min-width: 0; }
.frame-builder .fr-extra-edit { display: inline-flex; align-items: center; gap: 6px; }
.frame-builder .fr-extra-edit input[type="text"] { width: 76px; padding: 5px 8px; }
.frame-builder .fr-picked-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.frame-builder .fr-dims-toggle { margin-top: 0; font-size: 13px; }
.frame-builder .fr-extra-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.frame-builder .fr-extra-add select { grid-column: 1 / -1; }   /* คอลัมน์ซ้ายแคบ — แนวคานเต็มแถว ช่องความสูง+ปุ่มแถวล่าง */

.frame-builder .fr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 9px 14px; border: 1px solid #cfcfcf; border-radius: 8px; background: #fff; color: #111; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.frame-builder .fr-btn:hover:not(:disabled) { border-color: #111; }
.frame-builder .fr-btn:disabled { opacity: .5; cursor: not-allowed; }
.frame-builder .fr-small { padding: 5px 10px; font-size: 13px; }
.frame-builder .fr-primary { background: #ffd70a; border-color: #e6c000; }

.frame-builder .fr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.frame-builder .fr-sep { flex: 1; }
.frame-builder .fr-canvas { position: relative; height: min(72vh, 720px); min-height: 320px; border-radius: 8px; overflow: hidden; background: #f5f6f8; touch-action: none; }
.frame-builder .fr-canvas canvas { display: block; width: 100%; height: 100%; }
.frame-builder .fr-3d-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; }
.frame-builder .fr-3d-msg[hidden] { display: none; }
.frame-builder .fr-picked { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #f5f6f8; font-size: 14px; }
.frame-builder .fr-issues { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 14px; }
.frame-builder .fr-issues[hidden] { display: none; }
.frame-builder .fr-issues .fr-sub { color: #991b1b; }

.frame-builder .fr-qty-row input { width: 110px; }
.frame-builder .fr-mode { display: grid; gap: 0; }
.frame-builder .fr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.frame-builder .fr-table th, .frame-builder .fr-table td { padding: 6px 4px; border-bottom: 1px solid #eee; text-align: left; vertical-align: top; }
.frame-builder .fr-table .r { text-align: right; white-space: nowrap; }
.frame-builder .fr-table tbody tr, .frame-builder #fr-cut tr { cursor: pointer; }
.frame-builder .fr-table tr.fr-hl td { background: #fff3c4; }
.frame-builder .fr-sum { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 12px 0 0; font-size: 14px; }
.frame-builder .fr-sum dt { color: #444; }
.frame-builder .fr-sum dd { margin: 0; text-align: right; font-weight: 700; }
.frame-builder .fr-sum p { grid-column: 1 / -1; }
.frame-builder .fr-status { margin-top: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid #e3e3e3; }
.frame-builder .fr-status:empty { display: none; }
.frame-builder .fr-st-ok { background: #f0fdf4; border-color: #bbf7d0; }
.frame-builder .fr-st-review { background: #fffbeb; border-color: #fde68a; }
.frame-builder .fr-st-fix { background: #fef2f2; border-color: #fecaca; }
.frame-builder .fr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.frame-builder .fr-notes { margin: 12px 0 0; padding-left: 18px; color: #555; font-size: 13px; }
.frame-builder .fr-cutlist { margin-top: 12px; }
.frame-builder .fr-cutlist summary { cursor: pointer; font-weight: 700; }

@media (max-width: 1100px) {
  .frame-builder .fr-design { grid-template-columns: minmax(0, 1fr); grid-template-areas: "view" "setup"; }
  .frame-builder .fr-bom-cols { grid-template-columns: minmax(0, 1fr); }
  .frame-builder .fr-view { position: static; }
  .frame-builder .fr-canvas { height: 50vh; min-height: 280px; }
}
@media (max-width: 480px) {
  .frame-builder { padding: 10px; }
  .frame-builder .fr-dim { grid-template-columns: 64px minmax(0, 1fr) 104px; gap: 8px; }
}
/* มติ 428 — กล่องเซฟเข้าโปรเจค / ส่งแบบให้ AIC ตรวจ */
.frame-builder .fr-save { display: grid; gap: 8px; margin-top: 14px; padding: 12px; border: 1px solid #e3e3e3; border-radius: 10px; background: #fafafa; }
.frame-builder .fr-save h3 { margin: 0; font-size: 16px; }
.frame-builder .fr-save .fr-note { margin: 0; }
.frame-builder .fr-save-form { display: grid; gap: 8px; }
.frame-builder .fr-save-form[hidden], .frame-builder .fr-save [hidden] { display: none; }
.frame-builder .fr-save-form .fr-check { margin-top: 0; }
/* มติ 446 — กล่องเชิญร่วมทีมประกอบ · มติ 459 ย้ายมาท้ายหน้า (นอกส่วนออกแบบ) · พื้นอ่อน ลิงก์รอง · รูปซ้าย ข้อความขวา */
.frame-builder .fr-join { padding: 12px 16px; border: 1px solid #ece3bf; border-radius: 10px; background: #fffbea; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.frame-builder .fr-join img { display: block; width: 100%; max-width: 96px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.frame-builder .fr-join h3 { margin: 0 0 4px; font-size: 15px; line-height: 1.4; }
.frame-builder .fr-join p { margin: 0 0 6px; font-size: 13px; color: #555; }
.frame-builder .fr-join-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 1px solid #cfcfcf; border-radius: 8px; background: #fff; color: #111; font-size: 14px; font-weight: 600; text-decoration: none; }
.frame-builder .fr-join-link:hover { border-color: #111; }
.frame-builder .fr-join-link:focus-visible { outline: 3px solid #111; outline-offset: 2px; }
@media (max-width: 480px) {
  .frame-builder .fr-join { grid-template-columns: 72px minmax(0, 1fr); }
}
/* มติ 459 — ผู้ช่วยออกแบบ (มาสคอต) ในชุดตั้งค่า · ปุ่มทำได้จริง + ย้อนกลับ */
.frame-builder .fr-helper { margin-top: 16px; padding: 12px; border: 1px solid #fde68a; border-radius: 12px; background: #fffbeb; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; }
.frame-builder .fr-helper[hidden] { display: none; }
.frame-builder .fr-helper img { width: 76px; height: auto; }
.frame-builder .fr-helper h3 { margin: 0 0 2px; font-size: 13px; color: #92400e; }
.frame-builder .fr-helper p { margin: 0 0 8px; font-size: 15px; font-weight: 600; line-height: 1.45; }
.frame-builder .fr-helper-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.frame-builder .fr-helper-actions .fr-btn { min-height: 44px; }
/* มติ 461 — แบบตัวอย่าง (รถเข็น · ชั้นวางของ) ใต้การ์ดเลือกแบบ · การ์ดเล็กมีภาพ · เป็นลิงก์ */
.frame-builder .fr-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.frame-builder .fr-preset { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 4px 12px 4px 6px; border: 1px solid #e3e3e3; border-radius: 10px; background: #fff; color: #111; font-size: 14px; font-weight: 700; text-decoration: none; }
.frame-builder .fr-preset:hover { border-color: #111; background: #fffdf2; }
.frame-builder .fr-preset:focus-visible { outline: 3px solid #111; outline-offset: 2px; }
.frame-builder .fr-preset .fr-tpl-img { width: 56px; }