/* ===========================================================================
   แผนที่แนวเขตแปลง (parcelmap.js) — รูป SVG ล้วน ไม่มีไลบรารีแผนที่
   ต่อจาก marketplace.css (ใช้ --navy --green --ink --sub --line --mist --blue)
   =========================================================================== */

.njp{
  border:1px solid var(--line);border-radius:14px;background:#fff;
  padding:18px 20px 16px;margin-bottom:22px;
}
.njp-head{padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.njp-head h2{font-size:17px;line-height:1.4;color:var(--navy);margin:0 0 3px}
.njp-head p{font-size:12.5px;color:var(--sub);margin:0;line-height:1.65}

/* ---------- กรอบรูปแปลง ----------
   พื้นหลังเป็นตารางบางๆ ให้รู้สึกว่าเป็นแบบแปลน ไม่ใช่ภาพถ่าย
   ⚠️ ตั้งใจไม่ทำให้ดูเหมือนแผนที่ดาวเทียม — รูปนี้ไม่ได้วางทับตำแหน่งจริงบนโลก */
.njp-frame{
  background:#F7FAFC;border:1px solid var(--line);border-radius:11px;
  background-image:linear-gradient(#E7EEF5 1px,transparent 1px),linear-gradient(90deg,#E7EEF5 1px,transparent 1px);
  background-size:26px 26px;padding:6px;overflow:hidden;
}
/* ⚠️ ต้องมีเพดานความสูง — สัดส่วนของรูปมาจากรูปร่างแปลงจริง แปลงแคบยาว (ซึ่งพบบ่อยมาก
   เช่นแปลงริมถนน) จะได้ SVG สูงหลายพันพิกเซล แล้วดันทุกอย่างใต้แผนที่ตกจอไปหมด
   จำกัดความสูงแล้วให้ความกว้างหดตาม เพื่อรักษาสัดส่วนจริงของแปลงไว้ (ห้ามบีบให้ผิดสัดส่วน) */
.njp-svg{display:block;width:100%;height:auto;max-height:72vh;margin:0 auto}
@media(min-width:641px){ .njp-svg{max-height:560px} }

.njp-poly{fill:rgba(28,164,92,.14);stroke:var(--green);stroke-width:3;stroke-linejoin:round}

.njp-side{
  font:600 19px/1 "IBM Plex Sans Thai",sans-serif;fill:#41556B;
  text-anchor:middle;dominant-baseline:middle;
  paint-order:stroke;stroke:#F7FAFC;stroke-width:5px;stroke-linejoin:round;
}

.njp-m circle{fill:#fff;stroke:var(--navy);stroke-width:3}
.njp-m text{
  font:700 19px/1 var(--nj-font);fill:var(--navy);text-anchor:middle;
  paint-order:stroke;stroke:#F7FAFC;stroke-width:5px;stroke-linejoin:round;
}
.njp-m.on circle{fill:var(--green);stroke:#0d6b3c;r:14}
.njp-m.on text{fill:#0d6b3c}

.njp-scale line{stroke:#5A6B7D;stroke-width:2.5}
.njp-scale text{font:600 17px/1 "IBM Plex Sans Thai",sans-serif;fill:#5A6B7D;text-anchor:middle}
.njp-n circle{fill:#fff;stroke:var(--line);stroke-width:2}
.njp-n path{fill:var(--navy)}
.njp-n text{font:800 15px/1 var(--nj-font);fill:var(--navy);text-anchor:middle}

/* ---------- รายการหมุด (เป็นปุ่มจริง) ---------- */
.njp-pins{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.njp-pin{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  border:1px solid var(--line);background:var(--mist);border-radius:9px;
  padding:8px 12px;text-align:left;min-width:104px;max-width:100%;
  font-family:inherit;color:var(--ink);
}
.njp-pin b{font:700 13px/1.5 var(--nj-font);color:var(--navy)}
.njp-pin span{font-size:11px;color:var(--sub);line-height:1.6}
.njp-pin:hover{border-color:var(--blue);background:#fff}
.njp-pin:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.njp-pin.on{border-color:var(--green);background:#E4F3EA}
.njp-pin.on b{color:#0d6b3c}

/* ---------- แผงรายละเอียดหมุด ---------- */
.njp-detail{
  margin-top:12px;border:1px solid var(--line);border-radius:11px;
  background:var(--mist);padding:13px 15px;
}
.njp-detail[hidden]{display:none !important}   /* ⚠️ ต้องมี !important — สไตล์ชีตของเราตั้ง display ทับกฎของเบราว์เซอร์ได้ (บทเรียนเดิมของ .cs-field) */
.njp-d-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.njp-d-h b{font-size:14px;color:var(--navy)}
.njp-close{
  border:1px solid var(--line);background:#fff;border-radius:7px;
  width:29px;height:29px;color:var(--sub);font-size:14px;line-height:1;
}
.njp-close:hover{border-color:var(--blue);color:var(--blue)}
.njp-close:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.njp-detail img{
  display:block;width:100%;height:auto;max-height:340px;object-fit:contain;
  border-radius:8px;background:#0B1F3A;margin-bottom:9px;
}
.njp-detail p{font-size:12.5px;line-height:1.8;color:var(--sub);margin:0 0 5px}
.njp-nophoto{
  background:#fff;border:1px dashed var(--line);border-radius:8px;
  padding:16px;text-align:center;color:#8798A9 !important;margin-bottom:9px !important;
}
.njp-when{font-size:11.5px;color:#7A5D1E;background:#FCF8EE;border-radius:7px;padding:7px 10px}

.njp-note{font-size:12.5px;line-height:1.8;color:var(--sub);margin:12px 0 0}
.njp-foot{
  margin:12px 0 0;padding-top:13px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.85;color:#6D8095;
}
.njp-foot b{color:var(--ink)}

@media print{
  .njp{break-inside:avoid;border-color:#999}
  .njp-frame{background-image:none}
  .njp-pins,.njp-detail{display:none}   /* ปุ่มกดไม่ได้บนกระดาษ · รูปแปลงกับตัวเลขยังพิมพ์ครบ */
}

@media(max-width:640px){
  .njp{padding:15px 14px 13px;border-radius:12px}
  .njp-head h2{font-size:16px}
  .njp-pin{min-width:0;flex:1 1 calc(50% - 4px);padding:7px 10px}
}