/* ==========================================================================
   FeelForYou · ไอคอน 3D จากแผ่น sprite — ของกลาง v1
   --------------------------------------------------------------------------
   ใช้ยังไง

     <span class="icon-tile" data-icon="cake"></span>                แผ่นอุ่น
     <span class="icon-tile" data-set="cool" data-icon="rain"></span> แผ่นเย็น

   เลือกไอคอนด้วยชื่อ ห้ามคำนวณพิกัดเองในหน้างาน เพราะสองแผ่นนี้เรขาคณิตไม่เหมือนกัน
   แผ่นเย็นมีคำบรรยายภาษาไทยพิมพ์อยู่ใต้ไอคอนแต่ละช่อง ถ้าลอกพิกัดข้ามแผ่น
   ตัวหนังสือจะติดมาบนหน้าลูกค้า เคยเกิดขึ้นมาแล้วจริง

   ไฟล์นี้กำหนดแค่ว่าไอคอนไหนอยู่ตรงไหน ส่วนขนาด กรอบการ์ด เงา และฟิลเตอร์
   เป็นเรื่องของแต่ละงาน ให้เขียนใน CSS ของหน้านั้นเอง
   ========================================================================== */

.icon-tile {
  display: block;
  background-repeat: no-repeat;

  /* ค่าเริ่มต้นคือแผ่นอุ่น keepsake · 1536x1024 · ช่อง 250x198 · 5 คอลัมน์ 5 แถว */
  aspect-ratio: 250 / 198;
  background-image: url("/shared/sprites/keepsake.jpg");
  background-size: 614.4% 516.6%;
}

/* แผ่นเย็น cool · 1402x1122 · ช่อง 239x200 · 5 คอลัมน์ 4 แถว */
.icon-tile[data-set="cool"] {
  aspect-ratio: 239 / 200;
  background-image: url("/shared/sprites/cool.jpg");
  background-size: 586.61% 561%;
}

/* --------------------------------------------------------------------------
   แผ่นอุ่น keepsake
   คอลัมน์ x = 4.2 / 25.86 / 47.51 / 69.17 / 90.82 %
   แถว    y = 5.59 / 29.59 / 55.4 / 77.59 / 100 %
   -------------------------------------------------------------------------- */

.icon-tile[data-icon="mailbox"]  { background-position: 4.2% 5.59%; }    /* ตู้จดหมาย ฉากเปิด */
.icon-tile[data-icon="jar"]      { background-position: 25.86% 5.59%; }  /* โหล For You ความรู้สึกที่เก็บไว้ */
.icon-tile[data-icon="camera"]   { background-position: 47.51% 5.59%; }  /* กล้อง ความทรงจำ */
.icon-tile[data-icon="diary"]    { background-position: 69.17% 5.59%; }  /* ไดอารีมีกุญแจ ข้อความลับ */
.icon-tile[data-icon="globe"]    { background-position: 90.82% 5.59%; }  /* สโนว์โกลบ โมเมนต์พิเศษ */

.icon-tile[data-icon="gift"]     { background-position: 4.2% 29.59%; }   /* ของขวัญกับลูกโป่ง ฉากแกะกล่อง */
.icon-tile[data-icon="envelope"] { background-position: 25.86% 29.59%; } /* ซองกับดอกไม้ จดหมาย สารภาพ */
.icon-tile[data-icon="basket"]   { background-position: 69.17% 29.59%; } /* ตะกร้า ปิกนิก ออกไปด้วยกัน */
.icon-tile[data-icon="signpost"] { background-position: 90.82% 29.59%; } /* ป้าย Together อนาคตร่วมกัน */

.icon-tile[data-icon="frame"]    { background-position: 4.2% 55.4%; }    /* กรอบรูป ความทรงจำ */
.icon-tile[data-icon="record"]   { background-position: 25.86% 55.4%; }  /* เครื่องเล่นแผ่นเสียง ฉากเพลง */
.icon-tile[data-icon="balloon"]  { background-position: 69.17% 55.4%; }  /* บอลลูน การเดินทางไปด้วยกัน */
.icon-tile[data-icon="moon"]     { background-position: 90.82% 55.4%; }  /* พระจันทร์ ราตรีสวัสดิ์ */

.icon-tile[data-icon="bear"]     { background-position: 4.2% 77.59%; }   /* หมีเท็ดดี้ ความอบอุ่น เพื่อน */
.icon-tile[data-icon="house"]    { background-position: 25.86% 77.59%; } /* บ้าน ครอบครัว */
.icon-tile[data-icon="puzzle"]   { background-position: 47.51% 77.59%; } /* จิ๊กซอว์ ชิ้นส่วนที่หายไป */
.icon-tile[data-icon="cups"]     { background-position: 90.82% 77.59%; } /* แก้วสองใบ ความสัมพันธ์ ครบรอบ */

.icon-tile[data-icon="plane"]    { background-position: 4.2% 100%; }     /* เครื่องบินกระดาษ ส่งข้อความออกไป */
.icon-tile[data-icon="photos"]   { background-position: 47.51% 100%; }   /* กองรูป อัลบั้ม */
.icon-tile[data-icon="lock"]     { background-position: 69.17% 100%; }   /* กุญแจ รหัสเปิดอ่าน */
.icon-tile[data-icon="cake"]     { background-position: 90.82% 100%; }   /* เค้ก วันเกิด */

/* --------------------------------------------------------------------------
   แผ่นเย็น cool
   คอลัมน์ x = 3.18 / 26.31 / 49.44 / 72.57 / 95.7 %
   แถว    y = 3.15 / 33.41 / 63.34 / 92.73 %
   ชื่อซ้ำกับแผ่นอุ่นได้ เพราะ [data-set="cool"] มี specificity สูงกว่าจึงชนะเสมอ
   -------------------------------------------------------------------------- */

.icon-tile[data-set="cool"][data-icon="letter"]    { background-position: 3.18% 3.15%; }  /* 1 จดหมายรัก */
.icon-tile[data-set="cool"][data-icon="bottle"]    { background-position: 26.31% 3.15%; } /* 2 ข้อความในขวด */
.icon-tile[data-set="cool"][data-icon="gift"]      { background-position: 49.44% 3.15%; } /* 3 ของขวัญ */
.icon-tile[data-set="cool"][data-icon="camera"]    { background-position: 72.57% 3.15%; } /* 4 กล้องถ่ายรูป */
.icon-tile[data-set="cool"][data-icon="world"]     { background-position: 95.7% 3.15%; }  /* 5 โลกแห่งรัก */

.icon-tile[data-set="cool"][data-icon="music"]     { background-position: 3.18% 33.41%; }  /* 6 เพลงพิเศษ */
.icon-tile[data-set="cool"][data-icon="float"]     { background-position: 26.31% 33.41%; } /* 7 ลอยไปด้วยกัน */
.icon-tile[data-set="cool"][data-icon="chat"]      { background-position: 49.44% 33.41%; } /* 8 แชทพูดคุย */
.icon-tile[data-set="cool"][data-icon="date"]      { background-position: 72.57% 33.41%; } /* 9 วันที่สำคัญ */
.icon-tile[data-set="cool"][data-icon="key"]       { background-position: 95.7% 33.41%; }  /* 10 กุญแจแห่งรัก */

.icon-tile[data-set="cool"][data-icon="corner"]    { background-position: 3.18% 63.34%; }  /* 11 มุมโปรดของเรา */
.icon-tile[data-set="cool"][data-icon="family"]    { background-position: 26.31% 63.34%; } /* 12 ครอบครัว */
.icon-tile[data-set="cool"][data-icon="home"]      { background-position: 49.44% 63.34%; } /* 13 บ้านของเรา */
.icon-tile[data-set="cool"][data-icon="coffee"]    { background-position: 72.57% 63.34%; } /* 14 คอฟฟี่เดท */
.icon-tile[data-set="cool"][data-icon="memory"]    { background-position: 95.7% 63.34%; }  /* 15 ความทรงจำ */

.icon-tile[data-set="cool"][data-icon="fly"]       { background-position: 3.18% 92.73%; }  /* 16 บินไปหาเธอ */
.icon-tile[data-set="cool"][data-icon="rain"]      { background-position: 26.31% 92.73%; } /* 17 ฝนแห่งรัก */
.icon-tile[data-set="cool"][data-icon="goodnight"] { background-position: 49.44% 92.73%; } /* 18 ราตรีสวัสดิ์ */
.icon-tile[data-set="cool"][data-icon="jar"]       { background-position: 72.57% 92.73%; } /* 19 เก็บรักไว้ */
.icon-tile[data-set="cool"][data-icon="puzzle"]    { background-position: 95.7% 92.73%; }  /* 20 เราเติมเต็มกัน */