/* lucky-number dream.css (v0.43.0 · แผน docs/plan-v043-dream.md 1.1-1.3 · 4.1)
   หมวดทำนายฝัน: บรรยากาศกลางคืน โทนครามกับทอง · สีจาก tokens.css เท่านั้น · มือถือก่อน · breakpoint 640 / 960
   โหลดเฉพาะหน้า dream-hub dream-cat dream และหน้าแรกเมื่อมีการ์ดฝัน */

.dn,
.dn-home {
  /* ท้องฟ้ากลางคืน: จุดดาวจาก token + แสงม่วงของเว็บ บนพื้นคราม (ใช้กับหัวหน้าและกล่องรูปที่ยังไม่มีรูป) */
  --dn-sky: radial-gradient(circle at 14% 30%, var(--gold-2) 0 1px, transparent 1.6px),
    radial-gradient(circle at 31% 72%, var(--violet-ink) 0 1px, transparent 1.6px),
    radial-gradient(circle at 58% 22%, var(--ink-2) 0 1px, transparent 1.6px),
    radial-gradient(circle at 76% 58%, var(--gold) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 90% 18%, var(--ink-2) 0 1px, transparent 1.6px),
    var(--glow-1), var(--surface-2);
}
.dn { max-width: var(--wrap); margin: 0 auto; padding: var(--sp-4) var(--gutter) var(--sp-12); }
.dn-page { max-width: calc(var(--wrap-doc) + 2 * var(--gutter)); }

/* ---------- หัวหน้า ---------- */
.dn-head { position: relative; padding-top: var(--sp-4); }
.dn-head-sky {
  isolation: isolate;
  margin: 0 calc(-1 * var(--gutter));
  padding: var(--sp-8) var(--gutter) var(--sp-6);
  text-align: center;
  background: var(--glow-1);
}
.dn-head-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--dn-sky);
  background-color: transparent;
  opacity: 0.55;
  pointer-events: none;
}
.dn-moon {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  transform: rotate(-24deg);
  box-shadow: inset -8px 3px 0 0 var(--gold), var(--shadow-gold);
}
.dn h1 { font-size: var(--text-2xl); }
.dn-h1 { line-height: 1.35; }
.dn-eyebrow { margin-bottom: var(--sp-2); font-size: var(--text-sm); letter-spacing: 1px; }
.dn-eyebrow a { color: var(--muted-2); text-decoration: none; }
.dn-eyebrow a:hover { color: var(--gold-2); text-decoration: underline; }
.dn-intro {
  max-width: 36em;
  margin: var(--sp-4) auto 0;
  color: var(--ink-2);
  font-size: var(--text-base);
  line-height: 1.75;
}
.dn-note {
  max-width: 40em;
  margin-top: var(--sp-3);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.dn-head-sky .dn-note { margin-inline: auto; }
.dn-meta { margin-top: var(--sp-3); color: var(--muted); font-size: var(--text-sm); }
.dn-compared { color: var(--ink-2); }

/* ---------- หัวข้อส่วน ---------- */
.dn-sec { margin-top: var(--sp-10); }
.dn-h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--text-xl);
}
.dn-h2::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* ---------- ช่องค้นหา (มี JS จึงแสดง) ---------- */
.dn-search { max-width: 640px; margin: var(--sp-6) auto 0; }
.dn-search-l {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--muted-2);
  font-size: var(--text-sm);
  text-align: center;
}
.dn-search-box { position: relative; }
.dn-q {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--line-input);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-strong);
  font-size: var(--text-base);
  transition: border-color var(--speed);
}
.dn-q::placeholder { color: var(--placeholder); }
.dn-q:hover { border-color: var(--violet-ink); }
.dn-q:focus-visible { border-color: var(--gold); outline-offset: 2px; border-radius: var(--radius-pill); }
.dn-hits {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 3;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--sp-2);
  list-style: none;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-glow);
}
.dn-hits a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
}
.dn-hits a:hover,
.dn-hits [aria-selected="true"] a { background: var(--violet-dim); color: var(--ink-strong); }
.dn-hits a:focus-visible { outline-offset: -2px; }
.dn-none { margin-top: var(--sp-3); color: var(--ink-2); font-size: var(--text-md); text-align: center; }

/* ---------- การ์ดฝัน ---------- */
.dn-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); list-style: none; }
.dn-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--panel);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--speed);
}
.dn-card:hover { border-color: var(--line-2); }
.dn-card:focus-within { border-color: var(--gold); }
.dn-card-a { display: block; color: var(--ink-strong); text-decoration: none; }
.dn-card-a:hover { color: var(--gold-2); }
.dn-card-a:focus-visible { outline-offset: -2px; border-radius: var(--radius-md); }
.dn-card-name {
  display: block;
  padding: var(--sp-3) var(--sp-3) 0;
  font-family: var(--font-display);
  font-size: var(--text-base-s);
  line-height: 1.45;
}
.dn-card-nums {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
}
.dn-card .dn-chip { font-size: var(--text-base); padding: 0 8px; }

/* ---------- กล่องรูป: พื้นท้องฟ้าจาก token ตอนรูปยังไม่มี · ไม่ขยับเลย์เอาต์ ---------- */
.dn-media { position: relative; display: block; overflow: hidden; background: var(--dn-sky); }
.dn-media-s { aspect-ratio: 480 / 252; }
.dn-media-l {
  aspect-ratio: 1200 / 630;
  margin-top: var(--sp-5);
  border: 1px solid var(--panel);
  border-radius: var(--radius-lg);
}
.dn-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent;
}
/* รูปเสีย: เบราว์เซอร์วาด ::before ทับไอคอนรูปเสียและข้อความ alt */
.dn-media img::before { content: ""; position: absolute; inset: 0; background: var(--dn-sky); }

/* ---------- ชิปเลข ---------- */
.dn-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; }
.dn-chip {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  min-width: 2.4em;
  padding: 1px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.5;
}
.dn-chip.dn-agree { border-color: var(--gold); background: var(--gold-dim); color: var(--gold-2); font-weight: 600; }
.dn-chip a { color: inherit; text-underline-offset: 3px; }
.dn-chip a:hover { color: var(--ink-strong); }
.dn-chip-l { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; color: var(--ink-2); }
.dn-chips-l .dn-chip { padding: 4px 16px; font-size: var(--text-2xl); }
.dn-chips-l .dn-chip-l { font-size: var(--text-sm); }

/* ป้ายสถานะ: ชุดเดียว / ตารางให้เลขต่างกัน */
.dn-single {
  display: inline-flex;
  align-items: center;
  padding: 1px 10px;
  border: 1px solid var(--pass-edge);
  border-radius: var(--radius-pill);
  background: var(--pass-dim);
  color: var(--pass);
  font-size: var(--text-xs);
  line-height: 1.7;
}

/* ---------- กล่องสรุปหน้าฝัน ---------- */
.dn-summary {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-glow);
}
.dn-summary-h { color: var(--muted-2); font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 1px; }
.dn-summary-p { margin-top: var(--sp-2); color: var(--ink); font-size: var(--text-lg); line-height: 1.75; }
.dn-summary .dn-single { margin-top: var(--sp-3); font-size: var(--text-sm); }
.dn-summary .dn-chips { margin-top: var(--sp-4); }
.dn-summary .dn-note { margin-top: var(--sp-4); }

/* ---------- ตาราง role="table" ---------- */
.dn-table { border-top: 1px solid var(--panel); }
.dn-tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--panel);
}
.dn-tr > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
.dn-tr > :nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
.dn-tr:not(.dn-th):hover { background: var(--surface); }
.dn-th { padding-block: var(--sp-2); color: var(--muted); font-size: var(--text-xs); letter-spacing: 0.5px; }
.dn-td-name { color: var(--ink-strong); font-weight: 500; }
.dn-td-name a { color: var(--ink-strong); text-decoration: none; }
.dn-td-name a:hover { color: var(--gold-2); text-decoration: underline; }
.dn-td-nums { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dn-td-count {
  min-width: 2ch;
  color: var(--muted);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--text-lg);
}
/* ตารางชุดเดียวกัน: แถวติดกัน เส้นคั่นประ + เส้นนำทางซ้าย */
.dn-tr:has(+ .dn-same) { border-bottom-style: dashed; border-bottom-color: var(--line); }
.dn-same .dn-td-name { padding-left: var(--sp-3); border-left: 2px solid var(--line-2); }
.dn-same-l { display: block; color: var(--muted); font-size: var(--text-xs); font-weight: 400; }

/* ---------- หมวด ลิงก์ ---------- */
.dn-cat-grid { display: grid; gap: var(--sp-4); }
.dn-cat-block {
  padding: var(--sp-4);
  border: 1px solid var(--panel);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.dn-cat-name { margin-bottom: var(--sp-3); font-size: var(--text-lg); }
.dn-cat-name a { color: var(--gold-2); text-underline-offset: 4px; }
.dn-cat-name a:hover { color: var(--gold-hover); }
.dn-cat-items,
.dn-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; }
.dn-cat-items a,
.dn-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--text-md);
  text-decoration: none;
  transition: border-color var(--speed), color var(--speed);
}
.dn-cat-items a:hover,
.dn-links a:hover { border-color: var(--violet-ink); color: var(--ink-strong); }

/* ---------- เนื้อความ คำถาม ท้ายหน้า ---------- */
.dn-prose { max-width: var(--wrap-doc); }
.dn-prose p { color: var(--ink); line-height: 1.85; }
.dn-prose p + p { margin-top: var(--sp-3); }
.dn-more-a { font-weight: 500; text-underline-offset: 4px; }
.dn-variant-h { margin: var(--sp-5) 0 var(--sp-2); color: var(--gold-2); font-size: var(--text-lg); }
.dn-good,
.dn-caution { padding-left: var(--sp-4); border-left: 2px solid var(--pass-edge); }
.dn-caution { border-left-color: var(--warn-edge); }
.dn-faq-item { border-bottom: 1px solid var(--panel); }
.dn-faq-item:first-of-type { border-top: 1px solid var(--panel); }
.dn-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 54px;
  padding: 10px 0;
  color: var(--ink-strong);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.dn-faq-item summary::-webkit-details-marker { display: none; }
.dn-faq-item summary::after {
  content: "+";
  flex: none;
  color: var(--gold);
  font-family: var(--font-num);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform var(--speed);
}
.dn-faq-item[open] summary::after { transform: rotate(45deg); }
.dn-faq-item summary:hover { color: var(--gold-2); }
.dn .dn-faq-item p { padding-bottom: var(--sp-4); color: var(--ink-2); }
.dn-foot { margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: 1px solid var(--panel); }
.dn-foot-h { color: var(--muted-2); font-family: var(--font-body); font-size: var(--text-base-s); }
.dn-names {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--sp-2);
  list-style: none;
  color: var(--ink-2);
  font-size: var(--text-md);
}
.dn-names li + li::before { content: "·"; margin: 0 var(--sp-2); color: var(--muted); }

/* ---------- หน้าแรก ---------- */
.dn-home .dn-cards { margin: var(--sp-4) 0; }
.dn-home-all { display: inline-block; }

/* ---------- 640+ ---------- */
@media (min-width: 640px) {
  .dn { padding-top: var(--sp-6); }
  .dn h1 { font-size: var(--text-3xl); }
  .dn-head-sky {
    margin: 0;
    padding: var(--sp-10) var(--sp-8) var(--sp-8);
    border: 1px solid var(--panel);
    border-radius: var(--radius-xl);
  }
  .dn-head-sky::before { border-radius: inherit; }
  .dn-h2 { font-size: var(--text-2xl); }
  .dn-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
  .dn-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dn-summary { padding: var(--sp-6); }
  .dn-tr > :nth-child(2),
  .dn-tr > :nth-child(3) { grid-column: auto; grid-row: auto; }
  .dn-table-3 .dn-tr { grid-template-columns: minmax(10rem, 1.1fr) minmax(0, 2fr) 6rem; }
  .dn-table-2 .dn-tr { grid-template-columns: minmax(9rem, 1fr) minmax(0, 2.2fr); }
}

/* ---------- 960+ ---------- */
@media (min-width: 960px) {
  .dn-hub h1,
  .dn-cat h1 { font-size: var(--text-hero); }
  .dn-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dn-home .dn-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dn-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dn-page h1 { font-size: var(--text-3xl); }
}