/* Printpao — home.css · หน้าแรกเท่านั้น (โหลดผ่าน @push ใน home.blade.php) — ปรับโครงใหม่ 2026-10-24 (บรีฟ Ui_Renovate2)
 *
 * ★ ของที่ใช้ร่วมกับหน้าอื่น (การ์ดสินค้า .sf-pcard · .sf-pgrid · .sf-sec-head · ปุ่ม .sf-pill · รีวิว · FAQ) ยังอยู่ storefront.css
 * ★ theme.css ใส่ padding 56px ให้ทุก <section> — section ในไฟล์นี้กำหนดระยะเองทุกตัว
 * ★ animation (เจ้าของ: "ไม่รกตา ไม่ปวดหัว อ่านง่าย") = จางขึ้นครั้งเดียวตอนเลื่อนมาเจอ
 *   ยกเว้นหน้าจอออกแบบตัวอย่างในส่วนม่วง = เดโมเล่นวนจากหน้า Opensoon (เจ้าของขอ 2026-10-24 · home-studio.js · เล่นเฉพาะตอนอยู่บนจอ)
 *   home.js ใส่คลาส .sf-reveal-on ให้ <html> เฉพาะเมื่อผู้ใช้ไม่ได้ตั้ง "ลดการเคลื่อนไหว" → ไม่มี JS / ลดการเคลื่อนไหว = เห็นครบทันที
 */

/* ลิงก์ในหน้า (#products · #how) เลื่อนนุ่ม และไม่จมใต้หัวเว็บที่ติดบน */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
#products, #how { scroll-margin-top: calc(var(--sf-head-h) + 8px); }

/* ปุ่มรอง (พื้นขาว ขอบเทา) — ใช้คู่กับ .sf-pill ของ storefront.css */
.sf-pill-ghost { background: #fff; color: var(--sf-ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.sf-pill-ghost:hover { background: var(--purple-lt); color: var(--sf-violet); box-shadow: inset 0 0 0 1.5px var(--purple-br); }

/* ═══════════ จอแรก: แบนเนอร์ + แนะนำ + แถบ 4 ขั้นตอน ═══════════ */
.sf-first { display: flex; flex-direction: column; gap: 20px; padding-block: 16px 4px; }
.sf-first .wrap { width: 100%; }   /* .wrap มี margin-inline:auto — ในกล่อง flex จะหดตามเนื้อหา (แบนเนอร์กว้าง 0) ถ้าไม่บังคับเต็มกว้าง */

/* แบนเนอร์ — กล่องมนในคอนเทนเนอร์ (เดิมเต็มจอกว้าง) · กรอบสัดส่วนยังมาจาก x-sf-slider (3:1 / มือถือ 4:5) */
.sf-hero { position: relative; margin-inline: auto; padding: 0; background: var(--sf-lime); overflow: hidden; border-radius: 24px; }
@media (max-width: 720px) { .sf-hero { border-radius: 18px; } }
/* ยังไม่มีรูปแบนเนอร์ → กล่องสีพร้อมก้อนสี (สัดส่วนเดียวกับรูปที่จะอัป 3:1) */
.sf-hero-mock { position: relative; aspect-ratio: 3 / 1; width: 100%; }
.sf-hero-mock::before {   /* ก้อนชมพูซ้ายล่าง */
  content: ""; position: absolute; left: -6%; bottom: -30%; width: 38%; aspect-ratio: 1;
  background: var(--sf-pink); border-radius: 42% 58% 61% 39% / 45% 39% 61% 55%;
}
.sf-hero-mock::after {    /* ก้อนม่วงขวา */
  content: ""; position: absolute; right: -8%; top: 18%; width: 30%; aspect-ratio: 1;
  background: var(--sf-violet); border-radius: 61% 39% 52% 48% / 44% 59% 41% 56%;
}
.sf-hero-note {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); z-index: 1;
  padding: 10px 18px; border-radius: 12px; background: rgba(255,255,255,.75); color: var(--sf-ink);
  font-size: 14px; font-weight: 600; text-align: center;
}
@media (max-width: 720px) { .sf-hero-mock { aspect-ratio: 4 / 3; } }

/* แบนเนอร์กว้างเท่าขอบเนื้อหาเสมอ · กรอบ 3:1 เดิม (รูปไม่โดนตัด) → คอมจอ 1440×900 แบนเนอร์สูงราวครึ่งจอ อีกครึ่งเป็นส่วนแนะนำ
   ★ 2026-10-26 (เจ้าของ) — เลิกย่อความกว้างแบนเนอร์เพื่อให้ 3 ส่วนพอดี 1 จอ: แถบ 4 ขั้นตอนเลื่อนลงไปใต้จอแรกได้
   จอสูงมาก: ส่วนแนะนำยืดเติมที่ว่างให้จอแรกเต็มพอดี ไม่เหลือที่ขาวล่างจอ */
@media (min-width: 1081px) and (min-height: 700px) {
  .sf-first { min-height: calc(100vh - var(--sf-head-h)); min-height: calc(100svh - var(--sf-head-h)); }
  .sf-first .sf-intro { flex: 1 0 auto; display: flex; align-items: center; padding-block: 28px 12px; }   /* เว้นจากแบนเนอร์ ~48px ไม่ชิดกัน */
}

/* ── ส่วนแนะนำ ── */
.sf-intro { padding-block: 8px; }
.sf-intro .wrap { width: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 72px); }
.sf-intro h2 { margin: 0; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.14; color: var(--sf-ink); }
/* "ไอเดีย" = ปากกาไฮไลต์เขียวมะนาวขีดใต้ (สีมะนาวเป็นพื้นเท่านั้น ตัวอักษรเป็นม่วง — DESIGN.md) */
/* หัวข้อ "ไอเดียของคุณ / พิมพ์ได้ทุกแบบ" (แบบจากเจ้าของ 2026-10-26) — ฟอนต์เดิม (Anuphan) · สีและลูกเล่นตาม ref
   บรรทัด 2 ไล่สีชมพู → ม่วงตรง "ทุกแบบ" · เส้นปากกาเขียวมะนาว = SVG เส้นบางในตัว (ไม่โหลดไฟล์) วางหลังตัวหนังสือ (z-index -1)
   vector-effect: non-scaling-stroke = เส้นหนาเท่าเดิมแม้กล่องถูกยืดตามความยาวบรรทัด */
.sf-intro-title { position: relative; isolation: isolate; margin-bottom: 26px !important; font-size: clamp(40px, 4.8vw, 64px) !important; line-height: 1.12 !important; }
.sf-intro-title span { position: relative; display: block; width: fit-content; white-space: nowrap; }
.sf-intro-title span + span { color: var(--sf-pink); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .sf-intro-title span + span {
    color: transparent; -webkit-background-clip: text; background-clip: text;
    background-image: linear-gradient(90deg, var(--sf-pink) 0%, var(--sf-pink) 52%, var(--sf-violet) 82%);
    /* สีไล่ระบายได้แค่ในกรอบ span — สระล่าง (ทุก) / วรรณยุกต์บน (ได้) / ปลายตัวเอียงขวา ที่ยื่นพ้นกรอบจะไม่มีสี = หายไป (เจอ 2026-10-26 "สระโดนตัด")
       ขยายพื้นที่ระบายสีด้วย padding แล้วหักคืนด้วย margin ติดลบ → ตำแหน่งบรรทัดเท่าเดิม */
    padding: .25em .12em .3em 0; margin: -.25em -.12em -.3em 0;
  }
}
.sf-intro-title span::before, .sf-intro-title span::after { content: ""; position: absolute; z-index: -1; pointer-events: none; background: center / 100% 100% no-repeat; }
.sf-intro-title span:first-child::before {  /* ประกาย 2 ขีดมุมขวาบนของบรรทัด 1 */
  right: -.42em; top: -.06em; width: .34em; height: .34em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M7 20 11 4M15 26 28 19' fill='none' stroke='%23D4FF1A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sf-intro-title span + span::before {       /* เส้นโค้งใต้ "มพ์ได้" */
  left: 24%; width: 36%; bottom: .2em; height: .16em;   /* bottom รวม padding-bottom .3em ของ span แล้ว */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4 14C60 6 130 4 196 8' fill='none' stroke='%23D4FF1A' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.sf-intro-title span + span::after {        /* เส้นซิกแซ็กใต้ "ทุกแบบ" ปลายตวัดขึ้น */
  left: 68%; right: 2%; bottom: -.06em; height: .5em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M4 14 70 3 32 27 96 16' fill='none' stroke='%23D4FF1A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.sf-intro-text > p { margin: 16px 0 0; max-width: 46ch; color: var(--ink-soft); font-size: 16.5px; line-height: 1.65; }
.sf-intro-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.sf-intro-cta .sf-pill { min-height: 46px; padding-inline: 22px; }
.sf-intro-text > .sf-intro-proof { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: 600; }
.sf-intro-proof svg { flex: none; width: 18px; height: 18px; color: var(--sf-violet); }

/* ภาพขวา: แผ่นงานพื้นม่วงอ่อนลายจุด + เครื่องหมายตัดตก (crop mark) + การ์ดสินค้าจริงซ้อนกัน 3 ใบ */
.sf-intro-art {
  position: relative; justify-self: end; width: 100%; max-width: 500px; height: clamp(240px, 24vw, 300px);
  border-radius: 28px; background: var(--purple-lt) radial-gradient(rgba(91,24,242,.16) 1.2px, transparent 1.6px) 0 0 / 22px 22px;
}
.sf-crop { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(91,24,242,.45); }
.sf-crop-tl { top: 14px; left: 14px; border-top-width: 1.5px; border-left-width: 1.5px; }
.sf-crop-tr { top: 14px; right: 14px; border-top-width: 1.5px; border-right-width: 1.5px; }
.sf-crop-bl { bottom: 14px; left: 14px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.sf-crop-br { bottom: 14px; right: 14px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.sf-ring { position: absolute; border-radius: 50%; }
.sf-ring-violet { top: -26px; right: 52px; width: 64px; height: 64px; border: 1.5px solid rgba(91,24,242,.45); }
.sf-ring-pink { bottom: -22px; left: 38%; width: 44px; height: 44px; border: 1.5px solid rgba(255,46,147,.6); }
.sf-fan { position: absolute; inset: 0; display: grid; place-items: center; }
.sf-fan-card {
  grid-area: 1 / 1; width: min(46%, 230px); aspect-ratio: 1; overflow: hidden;
  border: 5px solid #fff; border-radius: 18px; background: var(--card-bg, #F1EEF6);
  box-shadow: 0 2px 4px rgba(20,16,31,.08), 0 18px 36px -14px rgba(20,16,31,.35);
}
.sf-fan-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* สินค้าแนะนำอันที่ 1 = ใบหน้าสุดตรงกลาง · อันที่ 2 ซ้าย · อันที่ 3 ขวา (เจ้าของ 2026-10-24) */
.sf-fan-card:nth-child(1) { z-index: 1; transform: translateY(3%) rotate(-2deg); }
.sf-fan-card:nth-child(2) { transform: translateX(-54%) rotate(-9deg) scale(.84); }
.sf-fan-card:nth-child(3) { transform: translateX(54%) rotate(8deg) scale(.84); }
.sf-fan-card:only-child { transform: rotate(-2deg); }
/* ป้ายลอย 2 มุม */
.sf-chip {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px;
  border-radius: 14px; background: #fff; color: var(--sf-ink); font-size: 13.5px; font-weight: 700; line-height: 1.25;
  box-shadow: 0 2px 4px rgba(20,16,31,.06), 0 12px 28px -10px rgba(20,16,31,.3);
}
.sf-chip small { display: block; font-size: 11px; font-weight: 600; color: var(--ink-mute); }
.sf-chip b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--sf-violet); color: var(--sf-lime); }
.sf-chip b svg { width: 15px; height: 15px; }
.sf-chip img { width: 32px; height: 32px; }
.sf-chip-tl { top: 20px; left: -18px; }
.sf-chip-br { bottom: 20px; right: -18px; }

@media (max-width: 880px) {
  .sf-intro .wrap { grid-template-columns: 1fr; }
  .sf-intro-art { justify-self: stretch; max-width: none; height: 270px; }
  .sf-chip-tl { left: 10px; top: 12px; }
  .sf-chip-br { right: 10px; bottom: 12px; }
}

/* ── แถบ "สั่งพิมพ์ง่ายๆ 4 ขั้นตอน" ── */
.sf-howbar {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 32px; padding: 16px 28px;
  background: #fff; border-radius: 20px; box-shadow: var(--shadow); border: 1px solid var(--line);
}
.sf-howbar h2 { margin: 0; font-size: 19px; font-weight: 700; font-style: italic; line-height: 1.15; white-space: nowrap; }
.sf-howbar h2 span { display: block; }
.sf-howbar h2 span + span { color: var(--sf-pink-dk); }
.sf-howbar ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sf-howbar li { display: flex; align-items: center; gap: 14px; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.sf-howbar-icon { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--purple-lt); color: var(--sf-violet); }
.sf-howbar-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sf-howbar-icon svg.is-fill { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.sf-howbar-icon b {
  position: absolute; top: -7px; left: -7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sf-pink-dk); color: #fff; font-size: 12px; box-shadow: 0 0 0 2px #fff;
}
.sf-howbar li:nth-child(even) .sf-howbar-icon b { background: var(--sf-lime); color: var(--sf-ink); }
@media (max-width: 1080px) { .sf-howbar { gap: 22px; padding-inline: 20px; } .sf-howbar li { gap: 10px; font-size: 14px; } }
@media (max-width: 880px) {
  .sf-howbar { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .sf-howbar h2 span { display: inline; }
  .sf-howbar ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .sf-howbar li br { display: none; }
}

/* ═══════════ หมวดหมู่ (วงกลม) เหนือสินค้าแนะนำ — เจ้าของ 2026-10-26 ═══════════
   แถวเลื่อนเดียวกับรีวิว (.sf-rail + ลูกศรใน storefront.js) · คอม 6 อัน/หน้า · ≤1080px 4 · ≤640px 3.5 (เห็นอันถัดไปครึ่งหนึ่ง = รู้ว่าปัดได้)
   หมวดไม่ถึงจำนวนต่อหน้า = จัดกลาง · safe center = ล้นเมื่อไรกลับชิดซ้าย เลื่อนได้ปกติ (center ธรรมดาจะตัดอันแรกจนเลื่อนไปไม่ถึง) */
.sf-home-cats { padding-block: 48px 0; }
.sf-home-cats + #products { padding-top: 40px; }
.sf-home-cats-title { margin: 0 0 14px; text-align: center; font-size: clamp(22px, 2.4vw, 30px); color: var(--sf-ink); }   /* ~ครึ่งของหัว display สินค้าแนะนำ (52px) */
.sf-rail-cats { list-style: none; margin: 0; padding-bottom: 8px; grid-auto-columns: calc((100% - 14px * 5) / 6); justify-content: safe center; }
/* วงกลมหน้าแรกใหญ่กว่าหน้าสินค้าทั้งหมด (เจ้าของ 2026-10-26 "ทำวงกลมให้ใหญ่หน่อย") · จอแคบ = เต็มความกว้างช่อง */
.sf-home-cats .sf-cat-img { width: min(100%, 152px); height: auto; aspect-ratio: 1; }
.sf-home-cats .sf-cat { gap: 10px; font-size: 15px; }
.sf-home-cats .sf-rail-btn { top: 61px; }   /* กลางวงกลม 152px (ไม่ใช่กลางทั้งแถวที่รวมชื่อหมวด) */
@media (max-width: 1080px) { .sf-rail-cats { grid-auto-columns: calc((100% - 14px * 3) / 4); } }
@media (max-width: 640px)  { .sf-home-cats { padding-top: 32px; } .sf-rail-cats { grid-auto-columns: calc((100% - 14px * 3) / 3.5); } }

/* ═══════════ สินค้าแนะนำ: 2 แถว + ปุ่ม "ดูสินค้าเพิ่ม" ═══════════
   .is-clamped (ใส่จาก view) ซ่อนการ์ดเกิน 2 แถวของแต่ละจอ · home.js เอาออกตอนกดปุ่ม
   ปุ่มซ่อนเองเมื่อสินค้าไม่เกิน 2 แถว (:has) — เกณฑ์ต้องตรงกับจำนวนคอลัมน์ .sf-pgrid ใน storefront.css (5 · 3 · 2) */
.sf-more-row { display: flex; justify-content: center; margin-top: 28px; }
@media (min-width: 1081px) {
  .sf-pgrid.is-clamped > :nth-child(n+11) { display: none; }
  .sf-pgrid:not(:has(> :nth-child(11))) + .sf-more-row { display: none; }
}
@media (min-width: 641px) and (max-width: 1080px) {
  .sf-pgrid.is-clamped > :nth-child(n+7) { display: none; }
  .sf-pgrid:not(:has(> :nth-child(7))) + .sf-more-row { display: none; }
}
@media (max-width: 640px) {
  .sf-pgrid.is-clamped > :nth-child(n+5) { display: none; }
  .sf-pgrid:not(:has(> :nth-child(5))) + .sf-more-row { display: none; }
}
.sf-more-row[hidden] { display: none; }
.sf-more {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 20px; border-radius: 999px;
  border: 1.5px solid var(--purple-br); background: #fff; color: var(--sf-violet); font: inherit; font-size: 14.5px; font-weight: 700;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.sf-more:hover { background: var(--purple-lt); border-color: var(--sf-violet); }
.sf-more:focus-visible { outline: 3px solid var(--sf-violet); outline-offset: 2px; }
.sf-more svg { width: 18px; height: 18px; }

/* ═══════════ ออกแบบเองบนเว็บ (พื้นม่วงเต็มจอ) ═══════════ */
.sf-studio { position: relative; overflow: hidden; padding-block: clamp(64px, 8vw, 104px); background: var(--sf-violet); color: #fff; }
.sf-studio-orb { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.14); }
.sf-studio-orb-a { width: 420px; height: 420px; right: -150px; top: -170px; }
.sf-studio-orb-b { width: 260px; height: 260px; left: -120px; bottom: -130px; }
.sf-studio .wrap { position: relative; }
.sf-studio-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.sf-studio h2 { margin: 0; font-size: clamp(30px, 4.2vw, 52px); color: #fff; }
.sf-studio h2 span { display: block; color: var(--sf-lime); }
.sf-studio-text p { margin: 18px 0 0; max-width: 44ch; color: rgba(255,255,255,.86); font-size: 16.5px; line-height: 1.7; }

/* หน้าจอออกแบบตัวอย่าง — เดโมเล่นเอง ย้ายมาจากหน้า Opensoon (2026-10-24 เจ้าของ: "เอามาใช้เลย") · JS: public/js/home-studio.js
   คลาสสถานะที่ JS สลับ: ชิ้นงาน .has-fill/.has-band/.has-tag/.has-sticker/.is-typing/.is-clearing
   · .sf-ed-wrap.is-real = กดยืนยันแล้ว ชิ้นงานเอียง 3D มีความหนา + ลายกระดาษ + แสงวาบ เหมือนงานพิมพ์จริง
   · ค่าเริ่มต้นใน HTML = แบบแรกที่ทำเสร็จแล้ว (ไม่มี JS / ลดการเคลื่อนไหว เห็นภาพนิ่งนี้) */
.sf-ed {
  --ease-out: cubic-bezier(.16,1,.3,1); --ease-pop: cubic-bezier(.34,1.56,.64,1);
  position: relative; overflow: hidden; border-radius: 22px; background: #fff; color: var(--sf-ink);
  box-shadow: 0 30px 60px -24px rgba(10,4,40,.6);
}
.sf-ed-bar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-mute); }
.sf-ed-bar i { width: 10px; height: 10px; border-radius: 50%; }
.sf-ed-bar i:nth-child(1) { background: var(--sf-pink); }
.sf-ed-bar i:nth-child(2) { background: var(--sf-lime-dk); }
.sf-ed-bar i:nth-child(3) { background: var(--sf-violet); }
.sf-ed-bar span { margin-left: auto; }
.sf-ed-body { display: grid; grid-template-columns: 60px 148px minmax(0, 1fr); gap: 12px; height: clamp(330px, 29vw, 380px); padding: 12px; }

/* แถบเครื่องมือ (เขียวมะนาว) + แผงสติกเกอร์ */
.sf-ed-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; background: var(--sf-lime); border-radius: 16px; }
.sf-ed-tool { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--sf-ink); transition: background .3s var(--ease-out), color .3s, transform .3s var(--ease-pop); }
.sf-ed-tool svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-ed-tool.is-active { background: var(--sf-ink); color: var(--sf-lime); }
.sf-ed-tool.is-press { transform: scale(.88); }
.sf-ed-panel { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--surface-2); border-radius: 16px; overflow: hidden; }
.sf-ed-panel b { font-size: 13px; }
.sf-ed-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sf-ed-tile { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, transform .35s var(--ease-pop), box-shadow .3s; }
.sf-ed-tile svg { width: 62%; height: auto; overflow: visible; }
.sf-ed-tile.is-hot { background: var(--purple-lt); box-shadow: inset 0 0 0 2px var(--sf-violet); transform: scale(1.05); }
.sf-ed-tile.is-press { transform: scale(.94); }
.sf-ed-art path, .sf-ed-art circle { stroke: var(--sf-ink); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.sf-ed-art .ln { fill: none; }

/* โต๊ะงาน (ตารางเส้นแบบแผ่นรองตัด) + ชิ้นงาน */
.sf-ed-stage {
  position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 16px; perspective: 1400px;
  background:
    linear-gradient(rgba(20,16,31,.07) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(90deg, rgba(20,16,31,.07) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(rgba(20,16,31,.035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(20,16,31,.035) 1px, transparent 1px) 0 0 / 24px 24px,
    #F4F2F8;
}
.sf-ed-wrap { position: relative; width: min(84%, 420px); margin-top: -16px; transform-style: preserve-3d; transition: transform 1.1s var(--ease-out); }
.sf-ed-board {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: inline-size; border-radius: 6px; background: #fff;
  transform: translateZ(0); box-shadow: 0 0 0 1px rgba(20,16,31,.08), 0 24px 40px -22px rgba(20,16,31,.5);
  transition: box-shadow 1.1s var(--ease-out), opacity .45s var(--ease-out);
}
.sf-ed-board.is-clearing { opacity: 0; }
/* ความหนาของชิ้นงาน — ซ้อน 3 ชั้น เห็นเฉพาะตอนเอียง */
.sf-ed-edge { position: absolute; inset: 0; border-radius: 6px; background: #E4E4DF; transform: translateZ(calc(var(--i) * -4px)); opacity: 0; transition: opacity .5s var(--ease-out); }
.sf-ed-edge:first-child { background: #BDBDB7; }
.sf-ed-wrap.is-real .sf-ed-edge { opacity: 1; }
.sf-ed-grain {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: multiply; opacity: 0; transition: opacity .6s var(--ease-out);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sf-ed-wrap.is-real .sf-ed-grain { opacity: .32; }
.sf-ed-fill { position: absolute; inset: 0; background: var(--bd-bg, var(--sf-lime)); clip-path: circle(0% at 8% 50%); transition: clip-path .9s var(--ease-out); }
.sf-ed-board.has-fill .sf-ed-fill { clip-path: circle(150% at 8% 50%); }
.sf-ed-band {
  position: absolute; left: -12%; top: -20%; width: 42%; height: 140%; border-radius: 0 50% 50% 0 / 0 50% 50% 0;
  background: var(--bd-band, var(--sf-violet)); border-right: .9cqw solid var(--sf-ink);
  transform: translateX(-110%) rotate(6deg); transition: transform .9s var(--ease-out);
}
.sf-ed-board.has-band .sf-ed-band { transform: translateX(0) rotate(6deg); }
.sf-ed-name { position: absolute; left: 40%; right: 6%; top: 32%; margin: 0; font-size: 9.5cqw; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--bd-ink, var(--sf-ink)); white-space: nowrap; }
.sf-ed-caret { display: inline-block; width: .06em; height: .9em; margin-left: .04em; vertical-align: -.08em; background: currentColor; opacity: 0; }
.sf-ed-board.is-typing .sf-ed-caret { opacity: 1; animation: sf-caret 1s steps(1) infinite; }
@keyframes sf-caret { 50% { opacity: 0; } }
.sf-ed-tag {
  position: absolute; left: 40.6%; right: 6%; top: 57%; margin: 0; font-size: 4.2cqw; font-weight: 600; line-height: 1.4;
  color: var(--bd-ink, var(--sf-ink)); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.sf-ed-board.has-tag .sf-ed-tag { opacity: .9; transform: none; }
.sf-ed-sticker { position: absolute; right: 7%; top: 9%; width: 17%; transform: rotate(10deg) scale(0); }
.sf-ed-sticker svg { display: block; width: 100%; height: auto; overflow: visible; }
.sf-ed-board.has-sticker .sf-ed-sticker { animation: sf-sticker-drop .55s var(--ease-pop) both; }
@keyframes sf-sticker-drop { from { transform: rotate(-8deg) scale(.4); } to { transform: rotate(10deg) scale(1); } }

/* กดยืนยัน → ชิ้นงานกลายเป็นงานพิมพ์จริง */
.sf-ed-wrap.is-real { transform: rotateX(16deg) rotateY(-20deg) rotateZ(3deg) translateZ(30px); }
.sf-ed-wrap.is-real .sf-ed-board { box-shadow: 0 0 0 1px rgba(20,16,31,.12), 0 50px 60px -26px rgba(20,16,31,.75), 0 14px 22px -10px rgba(20,16,31,.45); }
.sf-ed-board::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 45%, transparent 58%);
}
.sf-ed-wrap.is-real .sf-ed-board::after { animation: sf-sheen 1.5s var(--ease-out) .15s both; }
@keyframes sf-sheen { from { opacity: 1; transform: translateX(-70%); } to { opacity: 1; transform: translateX(10%); } }
.sf-ed-ok {
  position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
  background: var(--sf-pink); color: var(--sf-ink); border: 2.5px solid var(--sf-ink); transition: transform .35s var(--ease-pop), background .3s;
}
.sf-ed-ok svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sf-ed-ok.is-press { transform: scale(.86); }
.sf-ed-ok.is-done { background: var(--sf-lime); transform: scale(1.08) rotate(-6deg); }
.sf-ed-status {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 5px 13px; border-radius: 999px;
  background: #fff; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: background .3s, color .3s;
}
.sf-ed-status.is-real { background: var(--sf-lime); color: var(--sf-ink); box-shadow: none; }
/* เคอร์เซอร์ + สติกเกอร์ที่กำลังลาก (JS เลื่อนด้วย transform) */
.sf-ed-cursor, .sf-ed-ghost { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; will-change: transform; }
.sf-ed-cursor { opacity: 0; transition: opacity .3s; }
.sf-ed-cursor.is-on { opacity: 1; }
.sf-ed-cursor svg { display: block; width: 26px; height: 26px; fill: #fff; stroke: var(--sf-ink); stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 4px 6px rgba(20,16,31,.45)); }
.sf-ed-ghost { width: 60px; opacity: 0; }
.sf-ed-ghost.is-on { opacity: .95; }
.sf-ed-ghost svg { display: block; width: 100%; height: auto; overflow: visible; transform: rotate(-6deg); filter: drop-shadow(0 10px 12px rgba(20,16,31,.45)); }
/* คอลัมน์ข้อความกับหน้าจอวางคู่กันแต่จอยังไม่กว้าง → ซ่อนแผงสติกเกอร์ (JS ลากจากปุ่มสติกเกอร์บนแถบแทน) */
@media (min-width: 881px) and (max-width: 1180px) {
  .sf-ed-body { grid-template-columns: 60px minmax(0, 1fr); }
  .sf-ed-panel { display: none; }
}
@media (max-width: 560px) {
  .sf-ed-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; padding: 10px; gap: 10px; }
  .sf-ed-panel { display: none; }
  .sf-ed-rail { flex-direction: row; justify-content: center; padding: 6px; border-radius: 14px; }
  .sf-ed-tool { width: 40px; height: 40px; }
  .sf-ed-stage { min-height: 250px; }
  .sf-ed-wrap { width: 86%; }
  .sf-ed-ok { right: 10px; top: 10px; width: 38px; height: 38px; border-radius: 11px; }
  .sf-ed-ok svg { width: 20px; height: 20px; }
  .sf-ed-status { bottom: 10px; font-size: 12px; }
  .sf-ed-ghost { width: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-ed-board.has-sticker .sf-ed-sticker { animation: none; transform: rotate(10deg); }
}

/* จุดเด่น 3 ข้อใต้หน้าจอตัวอย่าง */
.sf-studio-points { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sf-studio-points li { padding: 22px 22px 24px; border-radius: 18px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.sf-studio-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sf-lime); color: var(--sf-ink); }
.sf-studio-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sf-studio-points h3 { margin: 16px 0 6px; font-size: 17px; font-weight: 700; color: #fff; }
.sf-studio-points p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.82); }
@media (max-width: 880px) {
  .sf-studio-top, .sf-studio-points { grid-template-columns: 1fr; }
}

/* ═══════════ จากไอเดียไปสู่งานพิมพ์ (4 ขั้นจริงของระบบ) ═══════════ */
.sf-how { padding-block: clamp(64px, 8vw, 100px); background: var(--surface-2); }
.sf-how-head { max-width: 640px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.sf-how h2 { margin: 0; font-size: clamp(30px, 4.2vw, 52px); }
.sf-how h2 span { color: var(--sf-pink); }
.sf-how-head p { margin: 12px 0 0; color: var(--ink-soft); font-size: 16px; }
.sf-how-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; text-align: center; }
.sf-how-steps::before { content: ""; position: absolute; top: 31px; left: 12.5%; right: 12.5%; border-top: 2px dashed var(--purple-br); }   /* เส้นเชื่อมระหว่างขั้น */
.sf-how-steps li { position: relative; display: flex; flex-direction: column; align-items: center; }
.sf-how-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: #fff; color: var(--sf-violet); box-shadow: inset 0 0 0 1px var(--line); }
.sf-how-steps li:nth-child(even) .sf-how-ico { background: var(--sf-lime); color: var(--sf-ink); box-shadow: none; }
.sf-how-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-how-steps small { margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--sf-pink-dk); }
.sf-how-steps h3 { margin: 4px 0 6px; font-size: 18.5px; font-weight: 700; }
.sf-how-steps p { margin: 0; max-width: 24ch; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
/* มือถือ: เรียงแนวตั้ง ไอคอนซ้าย เส้นเชื่อมแนวตั้ง */
@media (max-width: 720px) {
  .sf-how-steps { grid-template-columns: 1fr; gap: 0; text-align: left; }
  .sf-how-steps::before { top: 32px; bottom: 64px; left: 31px; right: auto; border-top: 0; border-left: 2px dashed var(--purple-br); }
  .sf-how-steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-items: start; padding-bottom: 26px; }
  .sf-how-ico { grid-row: span 3; }
  .sf-how-steps small { margin-top: 4px; }
  .sf-how-steps p { max-width: none; }
}

/* ═══════════ เริ่มจากงานที่คุณกำลังทำ ═══════════ */
.sf-uses-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 32px; margin-bottom: 28px; }
.sf-uses-head h2 { margin: 0; font-size: clamp(30px, 4.2vw, 52px); }
.sf-uses-head h2 span { display: block; color: var(--sf-pink); }
.sf-uses-head p { margin: 0; max-width: 32ch; text-wrap: pretty; color: var(--ink-soft); font-size: 15px; }
.sf-uses-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sf-use {
  --tone: var(--tone-violet);
  display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 26px; height: 100%;
  padding: 28px 30px; border-radius: 24px; background: var(--tone); color: var(--sf-ink); text-decoration: none;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
.sf-use-lime { --tone: var(--tone-lime); }
.sf-use-pink { --tone: var(--tone-pink); }
.sf-use-sky  { --tone: var(--tone-sky); }
.sf-use:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.sf-use:focus-visible { outline: 3px solid var(--sf-violet); outline-offset: 3px; }
/* การ์ดขาวเอียงเล็กๆ (เหมือนชิ้นงานพิมพ์) — ชี้แล้วตั้งตรง */
.sf-use-art {
  position: relative; display: grid; place-items: center; width: 100px; height: 112px; margin-inline: auto;
  border-radius: 14px; background: #fff; color: var(--sf-violet); transform: rotate(-6deg);
  box-shadow: 0 2px 4px rgba(20,16,31,.06), 0 14px 28px -12px rgba(20,16,31,.3); transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.sf-uses-grid li:nth-child(even) .sf-use-art { transform: rotate(5deg); }
.sf-uses-grid .sf-use:hover .sf-use-art { transform: rotate(0); }
.sf-use-art svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sf-use-art em { position: absolute; right: 9px; bottom: 7px; font-size: 8px; font-weight: 700; color: var(--sf-pink-dk); }
.sf-use-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sf-use h3 { margin: 0; font-size: 20px; font-weight: 700; }
.sf-use-text p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.sf-use-text b { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; color: var(--sf-violet); }
.sf-use-text b svg { width: 16px; height: 16px; transition: transform .2s ease; }
.sf-use:hover .sf-use-text b svg { transform: translateX(3px); }
@media (max-width: 880px) { .sf-uses-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .sf-use { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 20px 18px; border-radius: 20px; }
  .sf-use-art { width: 70px; height: 80px; border-radius: 12px; }
  .sf-use-art svg { width: 30px; height: 30px; }
  .sf-use-art em { display: none; }
  .sf-use h3 { font-size: 18px; }
}

/* ═══════════ แบนเนอร์ชวนเริ่ม (ก่อน FAQ) ═══════════ */
.sf-ready {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px;
  margin-bottom: 24px; padding: clamp(36px, 5vw, 56px) clamp(26px, 5vw, 64px); border-radius: 28px; color: #fff;
  background: radial-gradient(55% 130% at 88% 18%, rgba(91,24,242,.75), transparent 70%), var(--sf-ink);
}
.sf-ready h2 { margin: 0; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.22; color: #fff; }
.sf-ready-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sf-ready-cta .sf-pill { min-height: 48px; padding-inline: 26px; }
.sf-ready-link {
  display: inline-flex; align-items: center; min-height: 32px; color: rgba(255,255,255,.78); font-size: 13.5px; font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 4px;
}
.sf-ready-link:hover { color: #fff; text-decoration-color: currentColor; }
.sf-ready-spark { position: absolute; width: 26px; height: 26px; }
.sf-ready-spark-a { top: 18px; left: 56%; color: var(--sf-pink); }
.sf-ready-spark-b { right: 22px; bottom: 18px; width: 20px; height: 20px; color: var(--sf-lime); }
@media (max-width: 720px) {
  .sf-ready { flex-direction: column; align-items: flex-start; }
  .sf-ready-cta { align-items: flex-start; }
  .sf-ready-spark-a { left: auto; right: 24px; }
}

/* ═══════════ animation: จางขึ้นครั้งเดียวตอนเลื่อนมาเจอ ═══════════
   --d = ลำดับในกลุ่ม (หน่วง 90ms ต่อชิ้น) · ease-out ยาว ไม่เด้ง · ระยะเลื่อนแค่ 18px */
.sf-reveal-on [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.sf-reveal-on [data-reveal].is-in { opacity: 1; transform: none; }
@media print { .sf-reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; } }   /* สั่งพิมพ์หน้า = เห็นครบแม้ยังไม่เลื่อนถึง */

@media (prefers-reduced-motion: reduce) {
  .sf-use, .sf-use-art, .sf-use-text b svg, .sf-more { transition: none; }
}