/* สมุดอุปกรณ์ (gear-book.js) — ครีม/ทองชุดเดียวกับการ์ดไอเทมและช่างคราฟ
   คอม: 4 Rank เรียงเป็นคอลัมน์ ซ้าย→ขวา = ต่ำ→สูง · จอแคบ: ซ้อนเป็นแถว
   ⚠️ ตัวอักษรขั้นต่ำ 13px · ปุ่ม ≥ 44px บนจอสัมผัส */
#windows .win[data-win="gearbook"] { width: min(96vw, 760px); max-height: min(92vh, 660px); }
#windows .win[data-win="gearbook"] > .body { max-height: none; overflow: auto; padding: 0; }
html[data-skin="wood"] body .win[data-win="gearbook"] > .body { max-height: none; }

.gb { display: grid; gap: 8px; padding: 8px 10px 10px; color: #4a3520; }
.gb-lead { margin: 0; font-size: 13.5px; line-height: 1.45; color: #6b5530; }
.gb-lead b { color: #2f6f73; }

.gb-tabs, .gb-tiers { display: flex; gap: 6px; flex-wrap: wrap; }
.gb-tabs button, .gb-tiers button {
  min-height: 34px; padding: 4px 14px; border-radius: 999px; border: 1px solid #d8c294; background: #fbf4e2;
  font: 700 13px/1.2 var(--font-head, inherit); color: #6b5530; cursor: pointer;
}
.gb-tabs button.on { background: #2f6f73; border-color: #2f6f73; color: #fff; }
.gb-tiers { padding: 4px; border-radius: 12px; background: #f4ead4; border: 1px solid #e2d1b0; }
.gb-tiers button { flex: 1; display: grid; place-items: center; border-radius: 9px; background: #fffaf0; }
.gb-tiers button.ok:not(.on) { color: #3b3320; }
.gb-tiers button.on { background: linear-gradient(#f6d27a, #e8b64a); border-color: #c8901a; color: #4a3008; box-shadow: inset 0 -2px 0 #0000001a; }
.gb-tiers button:disabled { opacity: .5; cursor: default; }
.gb-tiers small { font: 600 13px/1 inherit; opacity: .8; }
.gb-lock { margin: 0; padding: 5px 10px; border-radius: 8px; background: #fff4e0; font-size: 13px; color: #8a5a1a; }

.gb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: start; }
.gb-col { display: grid; gap: 6px; padding: 7px; border-radius: 12px; border: 1px solid #e3d4ae; background: #fffdf7; min-width: 0; }
.gb-col h5 { margin: 0 0 2px; display: flex; align-items: center; gap: 6px; font: 600 13px/1.2 var(--font-head, inherit); color: #7a6548; }
.gb-rank { padding: 1px 9px; border-radius: 999px; font: 700 13px/1.5 var(--font-head, inherit); color: #fff; background: #8f8a80; }
.gb-rank.r-good { background: #2f8ae0; }
.gb-rank.r-rare { background: #9a4ae8; }
.gb-rank.r-epic { background: linear-gradient(#f2c14e, #d99a26); color: #4a3008; }
/* คอลัมน์ Rank สูงพื้นอุ่นขึ้นทีละนิด — ตาไล่ได้ว่าทางขวาคือของดีกว่า */
.gb-col.g-C { background: #fbf8ff; border-color: #dccdf0; }
.gb-col.g-D { background: #fffbea; border-color: #ecd49a; }
.gb-none { margin: 0; padding: 10px 4px; text-align: center; font-size: 13px; color: #a8957a; }
/* Rank ที่ช่วงนี้ไม่มีตามแผน — เส้นประจาง ๆ ไม่ใช่กล่องว่างที่ดูเหมือนของหาย */
.gb-col.off { background: transparent; border-style: dashed; opacity: .7; }
.gb-col.off .gb-none { padding: 4px; }

.gb-it { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 5px 8px; align-items: center; padding: 7px; border-radius: 10px; border: 1px solid #ecdfbf; background: #fff; }
.gb-it > :is(.gb-tag, .gb-src, .gb-alt, .gb-go) { grid-column: 1 / -1; }
.gb-it.worn { border-color: #2f6f73; box-shadow: 0 0 0 2px #2f6f7326; background: #f3faf8; }
.gb-ic, .gb-chip { width: 40px; height: 40px; display: grid; place-items: center; font-size: 20px; overflow: hidden; cursor: pointer; box-sizing: border-box; }
.gb-ic img, .gb-chip img { width: 100%; height: 100%; object-fit: contain; }
.gb-nm { min-width: 0; display: grid; gap: 1px; }
.gb-nm b { font: 700 14px/1.2 var(--font-head, inherit); color: #3b3320; overflow-wrap: anywhere; }
.gb-nm small { font-size: 13px; color: #7a6548; }
.gb-tag { justify-self: start; padding: 0 8px; border-radius: 999px; font: 700 13px/1.5 inherit; font-style: normal; background: #efe4c8; color: #6b5530; }
.gb-tag.on { background: #2f6f73; color: #fff; }
.gb-src { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 5px; padding-top: 5px; border-top: 1px dashed #eadcb8; font-size: 13px; line-height: 1.35; color: #5b4524; cursor: pointer; }
.gb-src small { display: block; color: #8a7650; font-size: 13px; overflow-wrap: anywhere; }
.gb-src b { color: #3b3320; }
.gb-src.none { display: block; color: #a8957a; cursor: default; }
.gb-si svg { width: 15px; height: 15px; fill: none; stroke: #c8901a; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.gb-alt { font-size: 13px; color: #8a7650; }
.gb-go { grid-column: 1 / -1; min-height: 32px; border-radius: 9px; border: 1px solid #2f6f3c; background: linear-gradient(#5cb86a, #3f8f4e); color: #fff;
  font: 700 13px var(--font-head, inherit); cursor: pointer; box-shadow: inset 0 -2px 0 #0002; }
.gb-go:hover { filter: brightness(1.06); }
.gb-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.gb-chip.worn { box-shadow: 0 0 0 2px #2f6f73; }

.gb-ladder b { color: #2f6f73; }
.win .foot .gb-open { margin-left: auto; white-space: nowrap; }

/* การ์ดไอเทม: แถบ Rank บอกที่มา */
.icard .ic-ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; width: 100%; margin: 6px 0 0; padding: 5px 8px; border-radius: 9px;
  border: 1px dashed #e3d2a8; background: #fffaf0; font: 600 13px/1.4 inherit; color: #a8957a; cursor: pointer; text-align: left; }
.icard .ic-ladder span.on { padding: 0 6px; border-radius: 999px; background: #2f6f73; color: #fff; }
.icard .ic-ladder i { font-style: normal; opacity: .6; }
.icard .ic-ladder b { margin-left: auto; font-size: 14px; }
.icard .ic-ladder:hover { border-color: #e8b64a; }

/* จอแคบ/มือถือ: 2 คอลัมน์ → 1 คอลัมน์ · ปุ่มสูง 44 */
@media (max-width: 720px) { .gb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .gb-grid { grid-template-columns: minmax(0, 1fr); } }
html.touch-ui .gb-go, html.touch-ui .gb-tiers button, html.touch-ui .gb-tabs button { min-height: 44px; }
html.touch-ui.land .gb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gb-col h5 { flex-wrap: wrap; } .gb-rank { white-space: nowrap; }
html.touch-ui.land .gb-lead { display: none; }