@charset "UTF-8";
/* ==========================================================================
   ZZAX STUDIO — page-company.css  (ทีม C · 13 ก.ย. 2569)
   ใช้เฉพาะ about / contact / store / status / 404 / privacy / terms
   โหลดต่อจาก styles.css เท่านั้น · ใช้โทเค็นจาก styles.css ล้วน ห้ามฮาร์ดโค้ดสี
   ทุกคลาสขึ้นต้น pc- หรือเป็นคลาสเฉพาะหน้าเหล่านี้ เพื่อไม่ชนกับไฟล์กลาง
   ========================================================================== */

/* ---------- ไทม์ไลน์แนวตั้ง (about) ---------- */
.pc-tl { display: grid; gap: 0; }
.pc-tl__row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--line);
  position: relative;
}
.pc-tl__row:last-child { border-bottom: 1px solid var(--line); }
.pc-tl__when {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  letter-spacing: .08em;
  color: var(--accent);
  display: grid;
  gap: 2px;
  align-content: start;
  padding-top: 2px;
}
.pc-tl__yr { font-size: 11px; letter-spacing: .12em; color: var(--fg-mid); }
.pc-tl__body > h3 { font-size: var(--fs-22); margin-bottom: var(--sp-3); }
.pc-tl__facts { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.pc-tl__facts > li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-14);
  color: var(--fg-mid);
}
.pc-tl__facts > li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.pc-tl__shots { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.pc-tl__shot {
  display: grid;
  gap: var(--sp-2);
  width: 128px;
  text-decoration: none;
  color: var(--fg-mid);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
}
.pc-tl__shot img {
  width: 128px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pc-tl__shot:hover img,
.pc-tl__shot:focus-visible img { border-color: var(--accent); transform: translateY(-2px); }
.pc-tl__shot:hover { color: var(--accent); }

/* ---------- แถวชิปข้อความ mono (about · เครื่องมือที่ใช้) ---------- */
.pc-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pc-chips > span {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: .08em;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg-mid);
  background: var(--card-bg);
}

/* ---------- ช่องทางติดต่อ (contact) ---------- */
.pc-chan { display: grid; gap: var(--sp-3); }
.pc-chan__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}
.pc-chan__row h3 { font-size: var(--fs-18); margin-bottom: 2px; }
.pc-chan__row p { font-size: var(--fs-14); margin: 0 0 var(--sp-2); }

/* ---------- หลอดสถานะ 4 ขั้น แนวนอน (status) ---------- */
.pc-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  list-style: none;
  margin: var(--sp-5) 0;
  padding: 0;
}
.pc-track > li { display: grid; gap: var(--sp-2); align-content: start; position: relative; }
.pc-track > li::after {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(36px + var(--sp-2));
  right: calc(var(--sp-4) * -1);
  height: 1px;
  background: var(--line);
}
.pc-track > li:last-child::after { display: none; }
.pc-track__mark {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--accent);
  font-size: var(--fs-14);
  position: relative;
  z-index: 1;
}
.pc-track strong { font-size: var(--fs-16); }
.pc-track span.pc-track__note { font-size: var(--fs-12); color: var(--fg-mid); line-height: 1.5; }
.pc-code {
  font-family: var(--font-mono);
  font-size: var(--fs-18);
  letter-spacing: .05em;
  word-break: break-all;
  color: var(--fg);
}

/* ---------- หน้าเอกสารกฎหมาย (privacy / terms) ---------- */
.pc-legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.pc-toc {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}
.pc-toc > strong {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-mid);
}
.pc-toc a {
  font-size: var(--fs-14);
  color: var(--fg-mid);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.pc-toc a:hover, .pc-toc a:focus-visible { color: var(--accent); border-bottom-color: var(--line); }
.pc-prose { display: grid; gap: var(--sp-7); }
.pc-prose > section { scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }
.pc-prose h2 {
  font-size: var(--fs-22);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-4);
}
.pc-prose h2 > .pc-prose__n {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--accent);
  margin-right: var(--sp-3);
}
.pc-prose p { font-size: var(--fs-16); margin: 0 0 var(--sp-4); }
.pc-prose p:last-child { margin-bottom: 0; }

/* ---------- 404 ---------- */
.pc-404 {
  font-family: var(--font-mono);
  font-size: clamp(72px, 16vw, 168px);
  line-height: 1;
  letter-spacing: .06em;
  color: var(--accent);
  display: block;
  margin-bottom: var(--sp-4);
}
.pc-404-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.pc-404-links a {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card-bg);
  text-decoration: none;
  color: var(--fg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pc-404-links a:hover, .pc-404-links a:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.pc-404-links small { font-size: var(--fs-12); color: var(--fg-mid); line-height: 1.5; }

/* ---------- store ---------- */
.pc-price {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.pc-price-note { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--fg-mid); }
.pc-tile-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* ---------- จอเล็ก ---------- */
@media (max-width: 900px) {
  .pc-legal { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .pc-toc { position: static; }
  .pc-404-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-track > li::after { display: none; }
}
@media (max-width: 680px) {
  .pc-tl__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding-block: var(--sp-5); }
  .pc-tl__when { grid-auto-flow: column; justify-content: start; gap: var(--sp-3); align-items: baseline; }
  .pc-tl__shot, .pc-tl__shot img { width: 104px; }
  .pc-tl__shot img { height: 78px; }
  .pc-chan__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
}
@media (max-width: 520px) {
  .pc-404-links { grid-template-columns: minmax(0, 1fr); }
  .pc-track { grid-template-columns: minmax(0, 1fr); }
}