@charset "UTF-8";
/* =============================================================
   layout/market.css — ตลาดมือสอง (pages/market_list.php · market_listing.php · market_rules.php · app_listings.php
   · app_listing_form.php · ส่วนประกาศใน profile.php · การ์ดประกาศใน app_message_new.php / app_message_thread.php)
   โหลดเฉพาะหน้าที่ใช้ผ่าน layout_start(['styles' => ['layout/market.css']]) · ชิ้นส่วน HTML อยู่ layout/market_ui.php

   กติกาเดียวกับ app-theme.css · chat.css · shop.css
   1) mobile-first: กฎฐานเขียนสำหรับจอ 360px แล้วค่อยขยายด้วย @media (min-width: …) ท้ายไฟล์
   2) สีจากตัวแปร --lt-* ล้วน โหมดมืดสลับที่ :root ของ app-theme.css ไฟล์นี้จึงไม่มี prefers-color-scheme
   3) ตัวอักษรเป็น --lt-ink หรือ --lt-muted เสมอ สีสถานะอยู่ที่ขอบ จุด หรือพื้นอ่อน ผ่าน AA ทั้งสองโหมด
   4) ทุกอย่างที่กดได้สูง ≥ 44px · ปุ่มหลัก 48px (--lt-tap) · ปุ่มแชตกับผู้ขายอยู่ใต้ราคาในจอแรกของมือถือ
   5) ข้อความของผู้ขาย (หัวข้อ รายละเอียด) ตัดคำยาวได้เสมอ (overflow-wrap: anywhere) หน้าไม่ล้นแนวนอน

   แนว A "หินชนวนกับมอส" (26 ก.ย. 2569 · docs/DESIGN.md ข้อ 11)
   · ราคาประกาศเป็นตัวธรรมดาตัวหนา (--lt-font-num · tabular-nums) — ตัวมีหัวของราคาสงวนไว้ให้ร้านของเว็บ (ของที่ทีมงานขาย)
     ตลาดคือของที่สมาชิกขายกันเอง หน้าตาจึงเงียบกว่าร้านหนึ่งขั้น แยกกันได้ด้วยตา
   · การ์ดประกาศเป็น a.lt-card ยกตัวจากฐานอยู่แล้ว · กล่องพับ (ตัวกรอง ความปลอดภัย) ลูกศรหมุนนุ่มตาม --lt-dur และวงโฟกัส --lt-ring
   · กล่องความปลอดภัยหน้าตาเดียวกับ note ของฐาน: ขอบบาง ขีดสีเตือนซ้าย 3px มุม --lt-radius-sm เงาบาง
   ============================================================= */

/* ── หัวหน้าตลาดและแถวปุ่ม ─────────────────────────────────── */

.lt-mk-head { gap: 8px; }
.lt-mk-head .lt-page__lead { margin-bottom: 4px; }
.lt-mk-head__actions,
.lt-mk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.lt-mk-actions { margin-top: 24px; }
.lt-mk-actions:empty { display: none; }
.lt-mk-head__actions .lt-btn svg,
.lt-mk-top .lt-btn svg,
.lt-mk-contact .lt-btn svg { flex: none; }

/* ── ตัวกรอง /market ──────────────────────────────────────── */

.lt-mk-filters { margin-bottom: 12px; }
/* จังหวัดกับเรียงตามวางคู่กันตั้งแต่จอมือถือ — ค่าในช่องสั้น (ทุกจังหวัด · ใหม่ล่าสุด) และประกาศขึ้นเร็วขึ้นหนึ่งแถว */
.lt-mk-filters__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.lt-mk-filters__row .lt-field { margin-bottom: 0; min-width: 0; }
.lt-mk-filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lt-mk-filters__actions .lt-btn { flex: 1 1 140px; }

/* ชิปหมวดเลื่อนแนวนอนบนมือถือ (9 หมวด + ทั้งหมด ไม่ดันหน้าให้ยาว) · จอกว้างขึ้นหลายแถวแทน */
.lt-mk-chips {
  flex-wrap: nowrap;
  margin: 0 -16px 16px;
  padding: 2px 16px 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.lt-mk-chips .lt-chip { flex: none; }
/* มือถือ: ขอบขวาจางลงให้รู้ว่าปัดดูหมวดต่อได้ (ตรวจทานภาพหน้าจอ 19 ก.ย. 2569 ชิปที่สี่ขาดเป็น "ไม้น้" ไม่มีอะไรบอกว่ามีอีก) */
@media (max-width: 767px) {
  .lt-mk-chips {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }
}

/* ช่องค้นหา จังหวัด และเรียงตาม พับไว้ในกล่องเดียว (กางเองเมื่อมีตัวกรองอยู่ · จอกว้างกางด้วยสคริปต์เสริม)
   ตรวจทานภาพหน้าจอ 19 ก.ย. 2569: บนมือถือจอแรกไม่เห็นประกาศเลยเพราะฟอร์มกรองกินที่ทั้งจอ */
.lt-mk-filterbox {
  margin: 0 0 12px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
}
.lt-mk-filterbox > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.lt-mk-filterbox > summary::-webkit-details-marker { display: none; }
.lt-mk-filterbox > summary::marker { content: ""; }
.lt-mk-filterbox > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--lt-dur) var(--lt-ease);
}
.lt-mk-filterbox[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
/* วงโฟกัสนุ่มแบบชิ้นส่วนกลาง (โหมด High Contrast ได้ outline คืนจากกฎ forced-colors ของฐาน) */
.lt-mk-filterbox > summary:focus-visible { outline: none; box-shadow: var(--lt-ring); border-radius: var(--lt-radius); }
.lt-mk-filterbox .lt-mk-filters { margin: 0; padding: 0 14px 14px; }

.lt-mk-count { margin: 0 0 10px; font-size: .9375rem; }
.lt-mk-empty { margin: 8px 0 0; }

/* ── ป้าย ──────────────────────────────────────────────── */

.lt-mk-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.lt-mk-badges:empty { display: none; }

.lt-mk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 2px 10px;
  border: 1px solid var(--lt-border-strong);
  border-radius: 999px;
  background: var(--lt-surface);
  color: var(--lt-ink);
  font-size: .875rem;
  font-weight: 500;     /* แนว A: น้ำหนักเท่า .lt-pill และป้ายของร้าน */
  line-height: 1.6;
  white-space: nowrap;
}
.lt-mk-badge::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lt-mk-badge-color, var(--lt-border-strong));
}
.lt-mk-badge--reserved { --lt-mk-badge-color: var(--lt-accent); border-color: var(--lt-accent); }
.lt-mk-badge--sold     { --lt-mk-badge-color: var(--lt-danger); border-color: var(--lt-danger); }
.lt-mk-badge--caution  { --lt-mk-badge-color: var(--lt-warn);   border-color: var(--lt-warn); }
.lt-mk-badge--new      { --lt-mk-badge-color: var(--lt-ok);     border-color: var(--lt-ok); }

/* ── กริดประกาศ /market · โปรไฟล์ ──────────────────────────── */

/* สองคอลัมน์ตั้งแต่จอ 360px — รูปจัตุรัสเห็นของชัด หัวข้อตัดสองบรรทัด */
.lt-mk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.lt-mk-grid__item { margin: 0; }
.lt-mk-grid__item .lt-card { margin-top: 0; }

.lt-mk-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
  color: var(--lt-ink);
  text-decoration: none;
  /* ยกตัว เงา ขอบตอนชี้มาจาก a.lt-card ของฐาน (ส่วน 2) · เวลาเดียวกับฐาน */
  transition: transform var(--lt-dur) var(--lt-ease), border-color var(--lt-dur) var(--lt-ease), box-shadow var(--lt-dur) var(--lt-ease);
}
.lt-mk-card:hover { color: var(--lt-ink); border-color: var(--lt-border-strong); }
.lt-mk-card:focus-visible { outline: none; box-shadow: var(--lt-ring); }

.lt-mk-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--lt-surface-2);
}
.lt-mk-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lt-mk-card__noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--lt-primary);
  opacity: .8;
}
/* ป้ายบนรูป: พื้นการ์ดทึบ + เงาบาง (ไม่ใช้กระจกฝ้า) */
.lt-mk-card__media .lt-mk-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--lt-shadow-sm);
}

.lt-mk-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 12px 14px 16px;
}
.lt-mk-card__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* ราคาประกาศ = ตัวธรรมดาตัวหนา (ตัวมีหัวสงวนให้ราคาในร้าน) */
.lt-mk-card__price {
  font-family: var(--lt-font-num);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.lt-mk-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: var(--lt-muted);
  font-size: .875rem;   /* เดิม 13px อ่านยากสำหรับผู้ใช้สูงวัย (ตรวจทานภาพหน้าจอ 19 ก.ย. 2569) */
  line-height: 1.5;
}
.lt-mk-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  margin-top: 2px;
}
/* ป้ายในการ์ดตัดบรรทัดได้ ไม่ตัดท้ายเป็นจุดสามจุด — "ซื้อเฉพาะที่เพาะเลี้ยง" คือคำเตือนเดียวของชนิดต้องระวังในรายการ (ตรวจทานภาพหน้าจอ 360px 19 ก.ย. 2569) */
.lt-mk-card__badges .lt-mk-badge {
  font-size: .8125rem;
  line-height: 1.4;
  white-space: normal;
  text-overflow: clip;
}

/* ── หน้าประกาศ /market/{id} ─────────────────────────────── */

.lt-mk-listing {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lt-mk-listing__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.lt-mk-listing__info > .lt-note { margin: 0; }
.lt-mk-listing__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lt-mk-listing__cat { margin: 0; }
.lt-mk-listing__cat .lt-chip { font-size: .875rem; }
.lt-mk-listing__title { margin: 0; overflow-wrap: anywhere; }

.lt-mk-price {
  margin: 0;
  font-family: var(--lt-font-num);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* รูปประกาศ: ปัดแนวนอน (scroll-snap) ไม่มีสคริปต์ · รูปถัดไปโผล่ขอบให้รู้ว่ามีอีก · ชนขอบจอบนมือถือ */
.lt-mk-gallery {
  display: flex;
  gap: 8px;
  margin: 0 -16px;
  padding: 0 16px;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.lt-mk-gallery__item {
  flex: 0 0 88%;
  margin: 0;
  scroll-snap-align: start;
}
.lt-mk-gallery__item:only-child { flex-basis: 100%; }
/* ทั้งรูปอยู่ในกรอบ 4:3 (contain บนพื้นกลาง) ไม่ตัดหัวปลา หาง ครีบ — รูปแนวตั้งจากมือถือเคยหายไปเกือบครึ่ง (ตรวจทานภาพหน้าจอ 19 ก.ย. 2569)
   แตะรูปเปิดรูปเต็มในแท็บใหม่ · การ์ดในรายการยังตัดเป็นจัตุรัสเหมือนเดิม */
.lt-mk-gallery__link {
  display: block;
  border-radius: var(--lt-radius);
}
.lt-mk-gallery__link:focus-visible { outline: none; box-shadow: var(--lt-ring); }
.lt-mk-gallery__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--lt-radius);
  background: var(--lt-surface-2);
  object-fit: contain;
}
/* ขายแล้ว: รูปจางลง ป้าย "ขายแล้ว" บอกเป็นคำด้วย */
.lt-mk-gallery__img.is-sold { opacity: .6; filter: grayscale(.6); }
.lt-mk-gallery--empty {
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  margin: 0;
  border: 1px dashed var(--lt-border-strong);
  border-radius: var(--lt-radius);
  background: var(--lt-surface-2);
  color: var(--lt-primary);
}
.lt-mk-gallery__hint { margin: 6px 0 0; }

/* กล่องปุ่ม: แชตกับผู้ขาย · รายงาน — ต่อจากราคาทันที */
.lt-mk-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.lt-mk-contact .lt-btn { gap: 8px; }
.lt-mk-contact__title { margin: 0; font-weight: 700; line-height: 1.5; }
.lt-mk-contact__note { margin: 0; line-height: 1.7; }
.lt-mk-contact .lt-report { margin: 0; }

/* ปุ่ม "รายงานเนื้อหานี้" สูง 44px กดง่ายด้วยนิ้ว (summary เดิมเป็นลิงก์ตัวเล็ก) */
.lt-mk-report__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}
.lt-mk-report .lt-report__form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

.lt-mk-block { margin: 0; }
.lt-section + .lt-mk-block,
.lt-mk-block + .lt-mk-block { margin-top: 8px; }

/* ตารางข้อมูลสินค้า: ป้ายกำกับบน ค่าล่างบนมือถือ · สองคอลัมน์บนจอกว้าง */
.lt-mk-dl {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
}
.lt-mk-dl__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
}
.lt-mk-dl__row + .lt-mk-dl__row { border-top: 1px solid var(--lt-border); }
.lt-mk-dl dt {
  margin: 0;
  color: var(--lt-muted);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.6;
}
.lt-mk-dl dd {
  margin: 0;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.lt-mk-sci { color: var(--lt-muted); }

.lt-mk-body { margin: 0; line-height: 1.8; overflow-wrap: anywhere; }

.lt-mk-seller {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.lt-mk-seller__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.lt-mk-seller__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
  color: var(--lt-muted);
  font-size: .9375rem;
}
.lt-mk-seller__more { margin: 4px 0 0; }

/* ── กล่องความปลอดภัย ─────────────────────────────────────── */

/* หน้าตาเดียวกับ note/flash ของฐาน (แนว A): ขอบบางสีเส้น + ขีดสีเตือนซ้าย 3px + มุมเล็ก + เงาบาง
   ความหมายอยู่ที่หัวข้อ "ซื้อขายอย่างปลอดภัย" เสมอ สีเป็นแค่ตัวช่วยกวาดตา */
.lt-mk-safety {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--lt-border);
  border-inline-start: 3px solid var(--lt-warn);
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface);
  box-shadow: var(--lt-shadow-sm);
}
.lt-mk-safety__title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}
.lt-mk-safety__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.7;
}
.lt-mk-safety__link { margin: 10px 0 0; }

/* แบบพับบนหัวแชตส่วนตัว: หัวข้อเป็นปุ่มกางสูง 48px มีลูกศรบอกว่ากดได้ · กางแล้วรายการเหมือนกล่องเต็ม */
.lt-mk-safety--fold { padding-top: 0; padding-bottom: 0; }
.lt-mk-safety--fold[open] { padding-bottom: 14px; }
.lt-mk-safety__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--lt-tap);
  margin: 0;
  cursor: pointer;
  list-style: none;
}
.lt-mk-safety__toggle::-webkit-details-marker { display: none; }
.lt-mk-safety__toggle::marker { content: ""; }
.lt-mk-safety__toggle::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--lt-dur) var(--lt-ease);
}
.lt-mk-safety--fold[open] > .lt-mk-safety__toggle { margin-bottom: 4px; }
.lt-mk-safety--fold[open] > .lt-mk-safety__toggle::after { transform: translateY(2px) rotate(-135deg); }
.lt-mk-safety__toggle:focus-visible { outline: none; box-shadow: var(--lt-ring); border-radius: var(--lt-radius-sm); }

/* ── กติกาตลาด /market/rules ──────────────────────────────── */

.lt-mk-rules {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lt-mk-rules__section { margin: 0; }
.lt-mk-rules__section > .lt-section__title { margin-top: 0; }
.lt-mk-rules__section > .lt-note { margin: 10px 0 0; }
.lt-mk-rules__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.7;
}
.lt-mk-rules__extra { margin: 10px 0 0; line-height: 1.7; }
.lt-mk-rules__verify { margin: 0 0 10px; }

.lt-mk-channels {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lt-mk-channels__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.lt-mk-channels__item + .lt-mk-channels__item { border-top: 1px solid var(--lt-border); }

/* ── ประกาศของฉัน /app/listings ────────────────────────────── */

.lt-mk-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
}
.lt-mk-top > * { margin: 0; }
.lt-mk-top .lt-section__title { margin: 0; }
.lt-mk-top__count { font-weight: 600; font-variant-numeric: tabular-nums; }
.lt-mk-top__links { font-size: .9375rem; }

/* แท็บห้าแท็บตัดขึ้นบรรทัดใหม่ (แบบเมนูหลังบ้าน) ไม่เลื่อนแนวนอน — จอ 375px เคยเห็นแค่สามแท็บครึ่ง
   แท็บ "หมดอายุ/ถอนแล้ว" ที่มีปุ่มต่ออายุตกขอบจอแม้เป็นแท็บที่เปิดอยู่ (ตรวจทานภาพหน้าจอ 19 ก.ย. 2569) */
.lt-mk-tabs {
  flex-wrap: wrap;
  row-gap: 4px;
  margin-bottom: 14px;
  overflow-x: visible;
}
.lt-mk-tabs .lt-tabs__item { padding-inline: 12px; }

.lt-mk-mine {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lt-mk-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.lt-mk-row__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.lt-mk-row__thumb {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface-2);
  object-fit: cover;
}
.lt-mk-row__thumb--none {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lt-primary);
}
.lt-mk-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lt-mk-row__main > p { margin: 0; }
.lt-mk-row__title { font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.lt-mk-row__title a { color: var(--lt-ink); }
.lt-mk-row__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lt-mk-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
}
.lt-mk-row__note { margin: 0; }
.lt-mk-row > .lt-note { margin: 0; }

/* ปุ่มสถานะ: สองคอลัมน์บนมือถือ (อยู่ในระยะนิ้วโป้ง สูง 48px) · ฟอร์มติดกันไม่มีระยะของ form + form ใน app-theme.css */
.lt-mk-row__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.lt-mk-row__actions > form,
.lt-mk-row__actions > form + form { margin: 0; }
.lt-mk-row__actions .lt-btn { width: 100%; }
.lt-mk-row__form { margin: 0; }

/* ลบประกาศ: กางขั้นยืนยันก่อน (ปิด JS ก็มีขั้นยืนยัน) กินเต็มแถวเมื่อกางออก */
.lt-mk-delete { margin: 0; }
.lt-mk-delete > summary { list-style: none; cursor: pointer; }
.lt-mk-delete > summary::-webkit-details-marker { display: none; }
.lt-mk-delete[open] { grid-column: 1 / -1; }
.lt-mk-delete__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 0;
  padding: 12px;
  border: 1px solid var(--lt-danger);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
}
.lt-mk-delete__text { margin: 0; line-height: 1.6; }

/* ── ฟอร์มลงประกาศ ───────────────────────────────────────── */

.lt-mk-form { display: flex; flex-direction: column; }
.lt-mk-fieldset[hidden] { display: none; }
.lt-mk-fieldset__hint { margin: -4px 0 12px; }
.lt-mk-caution { margin: -6px 0 16px; }
.lt-mk-caution[hidden] { display: none; }
.lt-mk-warn { margin: -8px 0 16px; }

.lt-mk-pair { display: flex; flex-direction: column; }
.lt-mk-pair > .lt-field:last-child { margin-top: -8px; }
.lt-mk-pair--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 12px;
}
.lt-mk-pair--row > .lt-field:last-child { margin-top: 0; }

.lt-mk-terms {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 20px;
  border-color: var(--lt-warn);
}
.lt-mk-terms__title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.5; }
.lt-mk-terms__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.7;
}
.lt-mk-terms__link { margin: 0; }
.lt-mk-terms .lt-field { margin-bottom: 0; }

.lt-mk-formactions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── การ์ดประกาศในแชตส่วนตัว ─────────────────────────────── */

.lt-mk-chatcards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
}
.lt-mk-chatcard {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
}
.lt-mk-chatcard__img,
.lt-mk-chatcard__noimg {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface-2);
  object-fit: cover;
}
.lt-mk-chatcard__noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lt-primary);
}
.lt-mk-chatcard__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lt-mk-chatcard__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lt-mk-chatcard__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lt-mk-chatcard__link { flex: none; min-height: 44px; }
.lt-mk-chatcard__closed { margin: 0; color: var(--lt-muted); }
.lt-mk-chatcards .lt-mk-safety { margin-top: 4px; }
/* หน้าเริ่มแชตจากประกาศ: กล่องความปลอดภัยแยกจากการ์ดฟอร์ม ไม่ดูเป็นส่วนหนึ่งของฟอร์ม (ตรวจทานภาพหน้าจอ 19 ก.ย. 2569) */
.lt-dmnew + .lt-mk-safety { margin-top: 16px; }

/* ── โปรไฟล์ ─────────────────────────────────────────────── */

.lt-mk-profile .lt-section__foot { margin-top: 8px; }

/* ── จอกว้างขึ้น ─────────────────────────────────────────── */

@media (min-width: 560px) {
  .lt-mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .lt-mk-row__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lt-mk-row__thumb { width: 88px; height: 88px; }
  .lt-mk-dl__row { flex-direction: row; gap: 12px; }
  .lt-mk-dl dt { flex: 0 0 9rem; }
}

@media (min-width: 768px) {
  .lt-mk-chips { flex-wrap: wrap; margin: 0 0 16px; padding: 0; overflow: visible; }
  .lt-mk-gallery { margin: 0; padding: 0; scroll-padding: 0; }
}

@media (min-width: 1000px) {
  .lt-mk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  /* หน้าประกาศสองคอลัมน์: รูปซ้าย ข้อมูลขวา กล่องปุ่มอยู่ในจอแรก */
  .lt-mk-listing {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
  }
  .lt-mk-listing__media { position: sticky; top: calc(var(--lt-topbar-h) + 16px); }
  .lt-mk-gallery__item { flex-basis: 100%; }
}

/* จอใหญ่ที่ใช้เมาส์: เลื่อนแถบรูปแนวนอนด้วยเมาส์ยาก และคำบอก "ปัดซ้ายขวา" ไม่ตรงกับเมาส์ — รูปทั้งหมดเรียงลงมาในคอลัมน์ซ้าย
   (ภาพหน้าจอ 1180px · 15 ก.ย. 2569 เห็นแค่รูปแรก) · คอลัมน์รูปไม่ติดขอบบนแล้ว เพราะรูปหลายรูปสูงเกินจอ */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  .lt-mk-listing__media { position: static; }
  .lt-mk-gallery {
    flex-direction: column;
    gap: 12px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .lt-mk-gallery__item { flex: none; }
  /* รูปเรียงลงมา: แต่ละรูปตามสัดส่วนจริงของมันเอง ไม่ต้องมีกรอบ 4:3 · คำบอก "ปัดซ้ายขวา" ไม่ตรงกับเมาส์ เหลือแค่ "กดที่รูปเพื่อดูรูปเต็ม" */
  .lt-mk-gallery__img { aspect-ratio: auto; height: auto; }
  .lt-mk-gallery__swipe { display: none; }
}