{"id":18840,"date":"2026-06-24T19:18:28","date_gmt":"2026-06-24T10:18:28","guid":{"rendered":"https:\/\/shop.yj24.com\/color-chart\/"},"modified":"2026-07-12T20:43:30","modified_gmt":"2026-07-12T11:43:30","slug":"color-chart","status":"publish","type":"page","link":"https:\/\/shop.yj24.com\/en\/color-chart\/","title":{"rendered":"Color chart"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   YJ24 Felt Color Atelier - 1\ucc28 \uc2dc\uc548\n   - \uc6cc\ub4dc\ud504\ub808\uc2a4 \uc0ac\uc6a9\uc790\uc815\uc758 HTML \ube14\ub85d\uc5d0 \uadf8\ub300\ub85c \ubd99\uc5ec\ub123\uae30 \uac00\ub2a5\n   - \uae30\uc874 \uc0c9\uc0c1\ud45c JPG\ub97c \uace0\uae09 \uce74\ub4dc + \ubaa8\ub2ec \ud655\ub300\ubcf4\uae30\ub85c \uad6c\uc131\n   ========================================================= *\/\n\n.yj24-color-atelier {\n  --yj24-bg: #11100e;\n  --yj24-bg-soft: #1b1915;\n  --yj24-ivory: #fbf6ea;\n  --yj24-paper: #fffaf0;\n  --yj24-gold: #c7a15a;\n  --yj24-gold-soft: rgba(199, 161, 90, .26);\n  --yj24-text: #241f18;\n  --yj24-muted: #7b705f;\n  --yj24-line: rgba(199, 161, 90, .32);\n  --yj24-radius-xl: 30px;\n  --yj24-radius-lg: 22px;\n  --yj24-shadow: 0 26px 80px rgba(26, 18, 8, .18);\n  --yj24-dark-shadow: 0 28px 90px rgba(0, 0, 0, .42);\n\n  position: relative;\n  overflow: hidden;\n  color: var(--yj24-text);\n  background:\n    radial-gradient(circle at 15% 5%, rgba(199,161,90,.22), transparent 34%),\n    radial-gradient(circle at 85% 4%, rgba(255,255,255,.08), transparent 30%),\n    linear-gradient(180deg, var(--yj24-bg) 0%, var(--yj24-bg-soft) 37%, var(--yj24-ivory) 37%, #fff 100%);\n  border-radius: 0;\n  isolation: isolate;\n}\n\n.yj24-color-atelier * {\n  box-sizing: border-box;\n}\n\n.yj24-color-atelier a {\n  color: inherit;\n  text-decoration: none;\n}\n\n.yj24-color-atelier button,\n.yj24-color-atelier input {\n  font: inherit;\n}\n\n.yj24-ca-inner {\n  width: min(1180px, calc(100% - 34px));\n  margin: 0 auto;\n}\n\n\/* HERO *\/\n.yj24-ca-hero {\n  position: relative;\n  padding: 76px 0 54px;\n  color: #fff9ec;\n}\n\n.yj24-ca-hero::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image:\n    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),\n    linear-gradient(0deg, rgba(255,255,255,.03) 1px, transparent 1px);\n  background-size: 42px 42px;\n  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);\n  pointer-events: none;\n  z-index: -1;\n}\n\n.yj24-ca-hero-grid {\n  display: grid;\n  grid-template-columns: 1.02fr .98fr;\n  gap: 44px;\n  align-items: center;\n}\n\n.yj24-ca-eyebrow {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  color: #f1d89b;\n  letter-spacing: .22em;\n  text-transform: uppercase;\n  font-size: 12px;\n  font-weight: 700;\n  margin-bottom: 18px;\n}\n\n.yj24-ca-eyebrow::before {\n  content: \"\";\n  width: 34px;\n  height: 1px;\n  background: linear-gradient(90deg, transparent, var(--yj24-gold));\n}\n\n.yj24-ca-title {\n  color: #009900;\n  margin: 0;\n  font-size: clamp(38px, 5vw, 72px);\n  line-height: .96;\n  letter-spacing: -.055em;\n  font-weight: 800;\n}\n\n.yj24-ca-title span {\n  display: block;\n  font-family: Georgia, \"Times New Roman\", serif;\n  font-weight: 500;\n  font-style: italic;\n  color: #CC3300;\n  letter-spacing: -.045em;\n}\n\n.yj24-ca-lead {\n  max-width: 620px;\n  margin: 22px 0 0;\n  color: rgba(255, 249, 236, .78);\n  font-size: 17px;\n  line-height: 1.8;\n  word-break: keep-all;\n}\n\n.yj24-ca-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  margin-top: 30px;\n}\n\n.yj24-ca-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 48px;\n  padding: 0 22px;\n  border-radius: 999px;\n  border: 1px solid rgba(232,202,131,.46);\n  background: rgba(255,255,255,.06);\n  color: #fff9ec;\n  font-weight: 700;\n  cursor: pointer;\n  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;\n}\n\n.yj24-ca-btn:hover {\n  transform: translateY(-2px);\n  background: rgba(255,255,255,.11);\n  border-color: rgba(232,202,131,.82);\n  box-shadow: 0 14px 35px rgba(0,0,0,.22);\n}\n\n.yj24-ca-btn.is-gold {\n  color: #211b12;\n  border-color: transparent;\n  background: linear-gradient(135deg, #f7df9f, #bd9145);\n  box-shadow: 0 16px 36px rgba(199,161,90,.26);\n}\n\n.yj24-ca-hero-card {\n  position: relative;\n  min-height: 430px;\n  border-radius: var(--yj24-radius-xl);\n  overflow: hidden;\n  border: 1px solid rgba(232,202,131,.38);\n  background:\n    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),\n    rgba(255,255,255,.04);\n  box-shadow: var(--yj24-dark-shadow);\n  backdrop-filter: blur(16px);\n}\n\n.yj24-ca-hero-card::before {\n  content: \"\";\n  position: absolute;\n  inset: 18px;\n  border: 1px solid rgba(232,202,131,.34);\n  border-radius: 23px;\n  pointer-events: none;\n  z-index: 3;\n}\n\n.yj24-ca-hero-card::after {\n  content: \"\";\n  position: absolute;\n  width: 240px;\n  height: 240px;\n  right: -80px;\n  top: -70px;\n  border-radius: 50%;\n  background: radial-gradient(circle, rgba(232,202,131,.35), transparent 68%);\n}\n\n.yj24-ca-fabric-stack {\n  position: absolute;\n  inset: 42px 44px 86px;\n}\n\n.yj24-ca-fabric-sheet {\n  position: absolute;\n  width: 66%;\n  height: 62%;\n  border-radius: 24px;\n  border: 1px solid rgba(255,255,255,.22);\n  box-shadow: 0 28px 55px rgba(0,0,0,.30);\n  overflow: hidden;\n  transform-origin: center;\n}\n\n.yj24-ca-fabric-sheet::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image:\n    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px),\n    radial-gradient(circle at 30% 22%, rgba(255,255,255,.22), transparent 24%);\n  mix-blend-mode: soft-light;\n}\n\n.yj24-ca-fabric-sheet:nth-child(1) {\n  left: 0;\n  top: 46px;\n  background: linear-gradient(135deg, #252525, #59544d);\n  transform: rotate(-8deg);\n}\n\n.yj24-ca-fabric-sheet:nth-child(2) {\n  left: 76px;\n  top: 18px;\n  background: linear-gradient(135deg, #9d2630, #d7a88b);\n  transform: rotate(6deg);\n}\n\n.yj24-ca-fabric-sheet:nth-child(3) {\n  left: 145px;\n  top: 84px;\n  background: linear-gradient(135deg, #2d5c59, #dad1b9);\n  transform: rotate(-1deg);\n}\n\n.yj24-ca-hero-label {\n  position: absolute;\n  left: 44px;\n  right: 44px;\n  bottom: 35px;\n  display: flex;\n  align-items: end;\n  justify-content: space-between;\n  gap: 16px;\n  z-index: 4;\n}\n\n.yj24-ca-hero-label strong {\n  display: block;\n  color: #fff9ec;\n  font-size: 25px;\n  line-height: 1.15;\n  letter-spacing: -.03em;\n}\n\n.yj24-ca-hero-label span {\n  display: block;\n  margin-top: 8px;\n  color: rgba(255,249,236,.68);\n  font-size: 13px;\n}\n\n.yj24-ca-count {\n  flex: 0 0 auto;\n  min-width: 76px;\n  height: 76px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  border: 1px solid rgba(232,202,131,.45);\n  color: #f2d690;\n  font-weight: 800;\n  background: rgba(0,0,0,.22);\n}\n\n\/* PANEL *\/\n.yj24-ca-panel {\n  position: relative;\n  margin-top: 10px;\n  padding: 30px;\n  border-radius: var(--yj24-radius-xl);\n  background: rgba(255,250,240,.88);\n  border: 1px solid rgba(199,161,90,.22);\n  box-shadow: var(--yj24-shadow);\n  backdrop-filter: blur(16px);\n}\n\n.yj24-ca-toolbar {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  gap: 18px;\n  align-items: center;\n  margin-bottom: 24px;\n}\n\n.yj24-ca-section-title {\n  margin: 0;\n  font-size: clamp(25px, 3vw, 38px);\n  letter-spacing: -.045em;\n  line-height: 1.18;\n}\n\n.yj24-ca-section-title small {\n  display: block;\n  margin-top: 7px;\n  color: var(--yj24-muted);\n  font-size: 15px;\n  font-weight: 500;\n  letter-spacing: 0;\n}\n\n.yj24-ca-search {\n  width: min(360px, 100%);\n  position: relative;\n}\n\n.yj24-ca-search input {\n  width: 100%;\n  height: 48px;\n  border-radius: 999px;\n  border: 1px solid rgba(199,161,90,.28);\n  background: rgba(255,255,255,.74);\n  padding: 0 18px 0 42px;\n  outline: none;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);\n}\n\n.yj24-ca-search::before {\n  content: \"\u2315\";\n  position: absolute;\n  left: 17px;\n  top: 50%;\n  transform: translateY(-51%);\n  color: #8e7a55;\n  font-size: 20px;\n  z-index: 2;\n}\n\n.yj24-ca-filter-wrap {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 9px;\n  margin-bottom: 24px;\n}\n\n.yj24-ca-filter {\n  border: 1px solid rgba(36,31,24,.12);\n  background: rgba(255,255,255,.7);\n  color: #514735;\n  min-height: 38px;\n  padding: 0 14px;\n  border-radius: 999px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 700;\n  transition: background .18s ease, transform .18s ease, border-color .18s ease;\n}\n\n.yj24-ca-filter:hover {\n  transform: translateY(-1px);\n  border-color: rgba(199,161,90,.42);\n}\n\n.yj24-ca-filter.is-active {\n  color: #1e1912;\n  background: linear-gradient(135deg, #f6df9f, #c99d4c);\n  border-color: transparent;\n}\n\n\/* CARDS *\/\n.yj24-ca-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 18px;\n}\n\n.yj24-ca-card {\n  position: relative;\n  overflow: hidden;\n  min-height: 470px;\n  border-radius: var(--yj24-radius-lg);\n  background: linear-gradient(180deg, #fffdf7, #f8efdd);\n  border: 1px solid rgba(199,161,90,.24);\n  box-shadow: 0 18px 45px rgba(40,27,10,.10);\n  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;\n}\n\n.yj24-ca-card:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 28px 62px rgba(40,27,10,.17);\n  border-color: rgba(199,161,90,.52);\n}\n\n.yj24-ca-card-media {\n  position: relative;\n  height: 210px;\n  overflow: hidden;\n  background: #201b14;\n  cursor: zoom-in;\n}\n\n.yj24-ca-card-media img {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n  transform: scale(1.02);\n  opacity: .92;\n  transition: transform .35s ease, opacity .35s ease;\n}\n\n.yj24-ca-card:hover .yj24-ca-card-media img {\n  transform: scale(1.075);\n  opacity: 1;\n}\n\n.yj24-ca-card-media::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(180deg, transparent 25%, rgba(0,0,0,.58) 100%),\n    radial-gradient(circle at 15% 10%, rgba(255,255,255,.18), transparent 28%);\n}\n\n.yj24-ca-card-badge {\n  position: absolute;\n  left: 16px;\n  top: 16px;\n  z-index: 3;\n  padding: 8px 12px;\n  border-radius: 999px;\n  color: #241b0d;\n  background: rgba(255, 236, 180, .91);\n  border: 1px solid rgba(255,255,255,.38);\n  font-size: 12px;\n  font-weight: 800;\n  letter-spacing: .02em;\n  box-shadow: 0 9px 23px rgba(0,0,0,.18);\n}\n\n.yj24-ca-zoom-hint {\n  position: absolute;\n  right: 16px;\n  bottom: 15px;\n  z-index: 3;\n  color: #fff9ec;\n  font-size: 13px;\n  font-weight: 800;\n  padding: 8px 11px;\n  border-radius: 999px;\n  border: 1px solid rgba(255,255,255,.26);\n  background: rgba(0,0,0,.28);\n  backdrop-filter: blur(10px);\n}\n\n.yj24-ca-card-body {\n  padding: 20px 20px 18px;\n}\n\n.yj24-ca-card-kicker {\n  color: #9d7e3d;\n  font-size: 12px;\n  font-weight: 900;\n  letter-spacing: .12em;\n  text-transform: uppercase;\n  margin-bottom: 7px;\n}\n\n.yj24-ca-card-title {\n  margin: 0;\n  font-size: 25px;\n  line-height: 1.15;\n  letter-spacing: -.04em;\n}\n\n.yj24-ca-card-desc {\n  min-height: 72px;\n  margin: 12px 0 16px;\n  color: #6f6352;\n  font-size: 14.5px;\n  line-height: 1.62;\n  word-break: keep-all;\n}\n\n.yj24-ca-meta {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 7px;\n  margin-bottom: 16px;\n}\n\n.yj24-ca-meta span {\n  display: inline-flex;\n  align-items: center;\n  min-height: 28px;\n  padding: 0 10px;\n  border-radius: 999px;\n  color: #514735;\n  background: rgba(255,255,255,.72);\n  border: 1px solid rgba(36,31,24,.08);\n  font-size: 12.5px;\n  font-weight: 800;\n}\n\n.yj24-ca-swatches {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 7px;\n  margin-bottom: 17px;\n}\n\n.yj24-ca-swatch {\n  aspect-ratio: 1;\n  min-height: 28px;\n  border-radius: 10px;\n  border: 1px solid rgba(0,0,0,.10);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);\n}\n\n.yj24-ca-card-actions {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 9px;\n}\n\n.yj24-ca-mini-btn {\n  min-height: 42px;\n  border-radius: 14px;\n  border: 1px solid rgba(199,161,90,.32);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 12px;\n  font-weight: 900;\n  font-size: 13.5px;\n  cursor: pointer;\n  transition: transform .18s ease, background .18s ease;\n}\n\n.yj24-ca-mini-btn:hover {\n  transform: translateY(-1px);\n}\n\n.yj24-ca-mini-btn.is-dark {\n  color: #fff9ec;\n  background: #1e1a14;\n  border-color: #1e1a14;\n}\n\n.yj24-ca-mini-btn.is-light {\n  color: #3e3324;\n  background: rgba(255,255,255,.72);\n}\n\n.yj24-ca-empty {\n  display: none;\n  padding: 36px 20px;\n  text-align: center;\n  color: #7b705f;\n  border: 1px dashed rgba(199,161,90,.42);\n  border-radius: 18px;\n  background: rgba(255,255,255,.48);\n}\n\n\/* GUIDE *\/\n.yj24-ca-guide {\n  margin: 26px 0 0;\n  display: grid;\n  grid-template-columns: 1.2fr .8fr;\n  gap: 18px;\n}\n\n.yj24-ca-guide-box {\n  padding: 22px;\n  border-radius: 22px;\n  background:\n    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,250,240,.66));\n  border: 1px solid rgba(199,161,90,.24);\n}\n\n.yj24-ca-guide-box h3 {\n  margin: 0 0 10px;\n  font-size: 19px;\n  letter-spacing: -.03em;\n}\n\n.yj24-ca-guide-box p,\n.yj24-ca-guide-box li {\n  color: #6f6352;\n  line-height: 1.75;\n  font-size: 14px;\n  word-break: keep-all;\n}\n\n.yj24-ca-guide-box ul {\n  margin: 0;\n  padding-left: 18px;\n}\n\n\/* MODAL *\/\n.yj24-ca-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 999999;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  padding: 26px;\n  background: rgba(10, 9, 7, .78);\n  backdrop-filter: blur(10px);\n}\n\n.yj24-ca-modal.is-open {\n  display: flex;\n}\n\n.yj24-ca-modal-shell {\n  width: min(1180px, 100%);\n  max-height: calc(100vh - 52px);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: 26px;\n  background: #fffaf0;\n  border: 1px solid rgba(232,202,131,.45);\n  box-shadow: 0 30px 110px rgba(0,0,0,.48);\n}\n\n.yj24-ca-modal-head {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 15px 18px;\n  background: linear-gradient(135deg, #1c1812, #332817);\n  color: #fff9ec;\n}\n\n.yj24-ca-modal-title {\n  margin: 0;\n  font-size: 18px;\n  letter-spacing: -.02em;\n}\n\n.yj24-ca-modal-sub {\n  margin-top: 4px;\n  color: rgba(255,249,236,.64);\n  font-size: 12.5px;\n}\n\n.yj24-ca-modal-close {\n  flex: 0 0 auto;\n  width: 42px;\n  height: 42px;\n  border: 1px solid rgba(255,255,255,.25);\n  border-radius: 50%;\n  background: rgba(255,255,255,.08);\n  color: #fff9ec;\n  font-size: 24px;\n  line-height: 1;\n  cursor: pointer;\n}\n\n.yj24-ca-modal-body {\n  overflow: auto;\n  padding: 18px;\n  text-align: center;\n  background:\n    radial-gradient(circle at 50% 0%, rgba(199,161,90,.16), transparent 34%),\n    #fffaf0;\n}\n\n.yj24-ca-modal-body img {\n  width: auto;\n  max-width: 100%;\n  height: auto;\n  display: block;\n  margin: 0 auto;\n  border-radius: 14px;\n  box-shadow: 0 16px 46px rgba(40,27,10,.16);\n}\n\n.yj24-ca-modal-foot {\n  flex: 0 0 auto;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 14px 18px;\n  border-top: 1px solid rgba(199,161,90,.20);\n  background: #fffaf0;\n  color: #6f6352;\n  font-size: 13px;\n}\n\n.yj24-ca-modal-foot a {\n  color: #1f1a13;\n  font-weight: 900;\n  border-bottom: 1px solid rgba(199,161,90,.55);\n}\n\n\/* RESPONSIVE *\/\n@media (max-width: 980px) {\n  .yj24-ca-hero-grid,\n  .yj24-ca-toolbar,\n  .yj24-ca-guide {\n    grid-template-columns: 1fr;\n  }\n\n  .yj24-ca-hero {\n    padding: 56px 0 42px;\n  }\n\n  .yj24-ca-hero-card {\n    min-height: 350px;\n  }\n\n  .yj24-ca-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .yj24-ca-search {\n    width: 100%;\n  }\n}\n\n@media (max-width: 640px) {\n  .yj24-ca-inner {\n    width: min(100% - 22px, 1180px);\n  }\n\n  .yj24-ca-hero {\n    padding: 42px 0 30px;\n  }\n\n  .yj24-ca-lead {\n    font-size: 15px;\n  }\n\n  .yj24-ca-actions {\n    display: grid;\n    grid-template-columns: 1fr;\n  }\n\n  .yj24-ca-hero-card {\n    min-height: 300px;\n    border-radius: 22px;\n  }\n\n  .yj24-ca-fabric-stack {\n    inset: 38px 24px 80px;\n  }\n\n  .yj24-ca-fabric-sheet {\n    width: 72%;\n    height: 58%;\n  }\n\n  .yj24-ca-fabric-sheet:nth-child(2) {\n    left: 48px;\n  }\n\n  .yj24-ca-fabric-sheet:nth-child(3) {\n    left: 84px;\n  }\n\n  .yj24-ca-hero-label {\n    left: 26px;\n    right: 26px;\n    bottom: 26px;\n  }\n\n  .yj24-ca-hero-label strong {\n    font-size: 20px;\n  }\n\n  .yj24-ca-count {\n    width: 60px;\n    height: 60px;\n    min-width: 60px;\n  }\n\n  .yj24-ca-panel {\n    padding: 18px;\n    border-radius: 23px;\n  }\n\n  .yj24-ca-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .yj24-ca-card {\n    min-height: auto;\n  }\n\n  .yj24-ca-card-media {\n    height: 230px;\n  }\n\n  .yj24-ca-filter-wrap {\n    gap: 7px;\n  }\n\n  .yj24-ca-filter {\n    min-height: 36px;\n    padding: 0 11px;\n    font-size: 13px;\n  }\n\n  .yj24-ca-modal {\n    padding: 10px;\n  }\n\n  .yj24-ca-modal-shell {\n    max-height: calc(100vh - 20px);\n    border-radius: 18px;\n  }\n\n  .yj24-ca-modal-body {\n    padding: 10px;\n  }\n\n  .yj24-ca-modal-head,\n  .yj24-ca-modal-foot {\n    padding: 12px;\n  }\n}\n.yj24-ca-card-actions .yj24-ca-board-card-btn {\n  grid-column: 1 \/ -1;\n}\n\n.yj24-ca-mini-btn.is-gold {\n  color: #211b12;\n  background: linear-gradient(135deg, #f6df9f, #c99d4c);\n  border-color: transparent;\n}\n\n.yj24-ca-modal-board-btn {\n  min-height: 34px;\n  padding: 0 13px;\n  border-radius: 999px;\n  border: 1px solid rgba(199,161,90,.42);\n  color: #211b12;\n  background: linear-gradient(135deg, #f6df9f, #c99d4c);\n  font-weight: 900;\n  cursor: pointer;\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(function () {\n  \"use strict\";\n\n  const colorBooks = [\n    {\n      name: \"Solitone\",\n      subtitle: \"1.2mm Soft Felt\",\n      thickness: \"1.2mm\",\nboardSeries: \"solitone\",\nboardTitle: \"Solitone \uc778\ud130\ub799\ud2f0\ube0c \uc0c9\uc0c1\ud45c\",\n      tags: [\"1.2mm\", \"solitone\", \"soft\", \"basic\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/solitone.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/solitone\/\",\n      desc: \"\ubd80\ub4dc\ub7fd\uace0 \ub2e4\uc591\ud55c \uae30\ubcf8 \uceec\ub7ec\ub97c \uac16\ucd98 1.2mm \ud3a0\ud2b8 \ub77c\uc778\uc785\ub2c8\ub2e4. \uacf5\uc608, \uc7a5\uc2dd, \uc18c\ud488 \uc81c\uc791\uc5d0 \ud65c\uc6a9\ud558\uae30 \uc88b\uc2b5\ub2c8\ub2e4.\",\n      swatches: [\"#f5f0df\", \"#dfbf4f\", \"#e58a95\", \"#b7233c\", \"#266b58\", \"#314c88\", \"#282828\"]\n    },\n    {\n      name: \"Royal 10\",\n      subtitle: \"1mm Felt\",\n      thickness: \"1mm\",\n      tags: [\"1mm\", \"royal10\", \"royal\", \"basic\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/royal10.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/royal-10\/\",\n      desc: \"\uc587\uace0 \uac00\ubccd\uac8c \uc0ac\uc6a9\ud558\uae30 \uc88b\uc740 Royal \uacc4\uc5f4 \uc0c9\uc0c1\ud45c\uc785\ub2c8\ub2e4. \uc12c\uc138\ud55c \uacf5\uc608\uc640 \uc791\uc740 \ubd80\uc790\uc7ac \uc791\uc5c5\uc5d0 \uc801\ud569\ud569\ub2c8\ub2e4.\",\n      swatches: [\"#fff7e5\", \"#f3cb45\", \"#f19aa5\", \"#d83a33\", \"#28815f\", \"#3158a6\", \"#1e1e1e\"]\n    },\n    {\n      name: \"Royal 20\",\n      subtitle: \"2mm Felt\",\n      thickness: \"2mm\",\n      tags: [\"2mm\", \"royal20\", \"royal\", \"basic\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/royal20.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/royal-20\/\",\n      desc: \"\uac00\uc7a5 \ubc94\uc6a9\uc801\uc73c\ub85c \uc4f0\uae30 \uc88b\uc740 2mm \uae30\ubcf8 \ud3a0\ud2b8\uc785\ub2c8\ub2e4. \uc0c9\uc0c1 \uc120\ud0dd \ud3ed\uc774 \ub113\uc5b4 \uacf5\uc608\uc640 \uad50\uc721\uc6a9 \uc791\uc5c5\uc5d0 \uc88b\uc2b5\ub2c8\ub2e4.\",\n      swatches: [\"#f7ecd2\", \"#f2b544\", \"#e56a84\", \"#b7202c\", \"#1f7a59\", \"#274c90\", \"#121212\"]\n    },\n    {\n      name: \"Artifel M12\",\n      subtitle: \"1.2mm Premium Felt\",\n      thickness: \"1.2mm\",\n     tags: [\"1.2mm\", \"artifelm12\", \"artifel\", \"premium\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/artifelm12.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/artifel-m12\/\",\n      desc: \"\uc587\uc9c0\ub9cc \ub2e8\uc815\ud55c \ud45c\uba74\uac10\uc774 \ud544\uc694\ud55c \uc791\uc5c5\uc5d0 \uc5b4\uc6b8\ub9ac\ub294 Artifel \ud504\ub9ac\ubbf8\uc5c4 \ub77c\uc778\uc785\ub2c8\ub2e4.\",\n      swatches: [\"#f6efe1\", \"#d9b35e\", \"#bf6d6a\", \"#85313a\", \"#56684b\", \"#4c5c76\", \"#2b2927\"]\n    },\n    {\n      name: \"Artifel M20\",\n      subtitle: \"2mm Premium Felt\",\n      thickness: \"2mm\",\n      tags: [\"2mm\", \"artifelm20\", \"artifel\", \"premium\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/artifelm20.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/artifel-m20\/\",\n      boardSeries: \"artifelm20\",\n  \t  boardTitle: \"Artifel M20 \uc778\ud130\ub799\ud2f0\ube0c \uc0c9\uc0c1\ud45c\",\n      desc: \"2mm \ub450\uaed8\uc758 \uace0\uae09 \ud3a0\ud2b8 \ub77c\uc778\uc73c\ub85c, \ud45c\uba74\uac10\uacfc \uc0c9\uac10\uc774 \uc548\uc815\uc801\uc778 \uc791\uc5c5\uc5d0 \ucd94\ucc9c\ub429\ub2c8\ub2e4.\",\n      swatches: [\"#f1e6cf\", \"#c7a15a\", \"#c06c84\", \"#874048\", \"#3f735e\", \"#465a88\", \"#222222\"]\n    },\n    {\n      name: \"Artifel M20 ECO\",\n      subtitle: \"2mm ECO Felt\",\n      thickness: \"2mm\",\n     tags: [\"2mm\", \"artifelm20eco\", \"eco\", \"artifel\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/artifelm20eco.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/artifel-m20-eco\/\",\n      desc: \"ECO \ucf58\uc149\ud2b8\uc758 2mm Artifel \ub77c\uc778\uc785\ub2c8\ub2e4. \uc790\uc5f0\uc2a4\ub7fd\uace0 \ucc28\ubd84\ud55c \uceec\ub7ec \uc791\uc5c5\uc5d0 \uc798 \uc5b4\uc6b8\ub9bd\ub2c8\ub2e4.\",\n      swatches: [\"#eee3cf\", \"#c7b08a\", \"#aa8064\", \"#87806c\", \"#617460\", \"#596a72\", \"#2f302d\"]\n    },\n    {\n      name: \"Artifel M25\",\n      subtitle: \"2.5mm Premium Felt\",\n      thickness: \"2.5mm\",\n      tags: [\"2.5mm\", \"artifelm25\", \"artifel\", \"premium\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/artifelm25.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/artifel-m25\/\",\n      desc: \"2mm\ubcf4\ub2e4 \ub354 \ud0c4\ud0c4\ud55c \ub450\uaed8\uac10\uc774 \ud544\uc694\ud55c \uc791\uc5c5\uc5d0 \uc5b4\uc6b8\ub9ac\ub294 2.5mm \ud504\ub9ac\ubbf8\uc5c4 \ud3a0\ud2b8\uc785\ub2c8\ub2e4.\",\n      swatches: [\"#f4ead9\", \"#d2af68\", \"#b95868\", \"#7c3844\", \"#48735d\", \"#515d77\", \"#242424\"]\n    },\n    {\n      name: \"Artifel MW30\",\n      subtitle: \"3mm Melange Felt\",\n      thickness: \"3mm\",\n      tags: [\"3mm\", \"artifelmw30\", \"melange\", \"artifel\", \"premium\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/artifelmw30.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/artifel-mw30\/\",\n      desc: \"3mm \ub450\uaed8\uc758 \uba5c\ub780\uc9c0 \uacc4\uc5f4\ub85c, \uae4a\uc774\uac10 \uc788\ub294 \ud63c\ud569 \uceec\ub7ec\uc640 \uace0\uae09\uc2a4\ub7ec\uc6b4 \uc9c8\uac10 \ud45c\ud604\uc5d0 \uc88b\uc2b5\ub2c8\ub2e4.\",\n      swatches: [\"#d8d2c4\", \"#a99b82\", \"#8a716a\", \"#6d7070\", \"#5c675a\", \"#464a54\", \"#252627\"]\n    },\n    {\n      name: \"Artifel M40\",\n      subtitle: \"4mm Premium Felt\",\n      thickness: \"4mm\",\n      tags: [\"4mm\", \"artifelm40\", \"artifel\", \"premium\", \"thick\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/artifelm40.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/artifel-m40\/\",\n      desc: \"\ub450\uaecd\uace0 \ud0c4\ud0c4\ud55c 4mm \ud3a0\ud2b8 \ub77c\uc778\uc785\ub2c8\ub2e4. \uad6c\uc870\uac10, \uc644\ucda9\uac10, \ub808\uc774\uc800\ucee4\ud305 \uc791\uc5c5\uc5d0 \ud65c\uc6a9\ub3c4\uac00 \ub192\uc2b5\ub2c8\ub2e4.\",\n      swatches: [\"#f0e5d3\", \"#c7a463\", \"#ad6d66\", \"#74383e\", \"#4e6b58\", \"#4b5366\", \"#202020\"]\n    }\n  ];\n\n  const root = document.getElementById(\"yj24ColorAtelier\");\n  if (!root) return;\n\n  const grid = root.querySelector(\"#yj24CaGrid\");\n  const empty = root.querySelector(\"#yj24CaEmpty\");\n  const searchInput = root.querySelector(\"#yj24CaSearch\");\n  const filterButtons = Array.from(root.querySelectorAll(\".yj24-ca-filter\"));\n  const modal = root.querySelector(\"#yj24CaModal\");\n  const modalImg = root.querySelector(\"#yj24CaModalImg\");\n  const modalTitle = root.querySelector(\"#yj24CaModalTitle\");\n  const modalSub = root.querySelector(\"#yj24CaModalSub\");\n  const modalProduct = root.querySelector(\"#yj24CaModalProduct\");\n  const modalClose = root.querySelector(\"#yj24CaModalClose\");\n\n  let activeFilter = \"all\";\n\n  function escapeHtml(value) {\n    return String(value).replace(\/[&<>\"']\/g, function (s) {\n      return ({\n        \"&\": \"&\",\n        \"<\": \"<\",\n        \">\": \">\",\n        '\"': \"\"\",\n        \"'\": \"'\"\n      })[s];\n    });\n  }\n\n  function getSearchText(item) {\n    return [\n      item.name,\n      item.subtitle,\n      item.thickness,\n      item.desc,\n      item.tags.join(\" \")\n    ].join(\" \").toLowerCase();\n  }\nfunction interactiveBoardButtonHtml(item, extraClass) {\n  if (!item.boardSeries) {\n    return \"\";\n  }\n\n  return `\n    <button type=\"button\" class=\"yj24-color-board-open ${extraClass || \"\"}\" data-yj24-series=\"${escapeHtml(item.boardSeries)}\" data-yj24-title=\"${escapeHtml(item.boardTitle || item.name + \" \uc778\ud130\ub799\ud2f0\ube0c \uc0c9\uc0c1\ud45c\")}\">\n      \uc778\ud130\ub799\ud2f0\ube0c \uc0c9\uc0c1\ud45c \ubcf4\uae30\n    \n  `;\n}\n  function cardTemplate(item, index) {\n    const swatches = item.swatches.map(color => {\n      return `<span class=\"yj24-ca-swatch\" style=\"background:${escapeHtml(color)}\">`;\n    }).join(\"\");\n\n    const meta = [\n      item.thickness,\n      item.tags.includes(\"eco\") ? \"ECO\" : \"Color Chart\",\n      item.tags.includes(\"melange\") ? \"Melange\" : \"Felt\"\n    ].map(v => `<span>${escapeHtml(v)}`).join(\"\");\n\n    return `\n      <article class=\"yj24-ca-card\" data-index=\"${index}\">\n        <div class=\"yj24-ca-card-media\" data-open=\"${index}\" role=\"button\" tabindex=\"0\" aria-label=\"${escapeHtml(item.name)} \uc0c9\uc0c1\ud45c \ud06c\uac8c \ubcf4\uae30\">\n          <img decoding=\"async\" src=\"${escapeHtml(item.image)}\" alt=\"${escapeHtml(item.name)} \uc0c9\uc0c1\ud45c\" loading=\"lazy\">\n          <div class=\"yj24-ca-card-badge\">${escapeHtml(item.thickness)}<\/script>\n\n\n\n<style>\n\/* =========================================================\n   YJ24 Felt Color Atelier - 1\ucc28 \uc2dc\uc548\n   - \uc6cc\ub4dc\ud504\ub808\uc2a4 \uc0ac\uc6a9\uc790\uc815\uc758 HTML \ube14\ub85d\uc5d0 \uadf8\ub300\ub85c \ubd99\uc5ec\ub123\uae30 \uac00\ub2a5\n   - \uae30\uc874 \uc0c9\uc0c1\ud45c JPG\ub97c \uace0\uae09 \uce74\ub4dc + \ubaa8\ub2ec \ud655\ub300\ubcf4\uae30\ub85c \uad6c\uc131\n   ========================================================= *\/\n\n.yj24-color-atelier {\n  --yj24-bg: #11100e;\n  --yj24-bg-soft: #1b1915;\n  --yj24-ivory: #fbf6ea;\n  --yj24-paper: #fffaf0;\n  --yj24-gold: #c7a15a;\n  --yj24-gold-soft: rgba(199, 161, 90, .26);\n  --yj24-text: #241f18;\n  --yj24-muted: #7b705f;\n  --yj24-line: rgba(199, 161, 90, .32);\n  --yj24-radius-xl: 30px;\n  --yj24-radius-lg: 22px;\n  --yj24-shadow: 0 26px 80px rgba(26, 18, 8, .18);\n  --yj24-dark-shadow: 0 28px 90px rgba(0, 0, 0, .42);\n\n  position: relative;\n  overflow: hidden;\n  color: var(--yj24-text);\n  background:\n    radial-gradient(circle at 15% 5%, rgba(199,161,90,.22), transparent 34%),\n    radial-gradient(circle at 85% 4%, rgba(255,255,255,.08), transparent 30%),\n    linear-gradient(180deg, var(--yj24-bg) 0%, var(--yj24-bg-soft) 37%, var(--yj24-ivory) 37%, #fff 100%);\n  border-radius: 0;\n  isolation: isolate;\n}\n\n.yj24-color-atelier * {\n  box-sizing: border-box;\n}\n\n.yj24-color-atelier a {\n  color: inherit;\n  text-decoration: none;\n}\n\n.yj24-color-atelier button,\n.yj24-color-atelier input {\n  font: inherit;\n}\n\n.yj24-ca-inner {\n  width: min(1180px, calc(100% - 34px));\n  margin: 0 auto;\n}\n\n\/* HERO *\/\n.yj24-ca-hero {\n  position: relative;\n  padding: 76px 0 54px;\n  color: #fff9ec;\n}\n\n.yj24-ca-hero::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image:\n    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),\n    linear-gradient(0deg, rgba(255,255,255,.03) 1px, transparent 1px);\n  background-size: 42px 42px;\n  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);\n  pointer-events: none;\n  z-index: -1;\n}\n\n.yj24-ca-hero-grid {\n  display: grid;\n  grid-template-columns: 1.02fr .98fr;\n  gap: 44px;\n  align-items: center;\n}\n\n.yj24-ca-eyebrow {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  color: #f1d89b;\n  letter-spacing: .22em;\n  text-transform: uppercase;\n  font-size: 12px;\n  font-weight: 700;\n  margin-bottom: 18px;\n}\n\n.yj24-ca-eyebrow::before {\n  content: \"\";\n  width: 34px;\n  height: 1px;\n  background: linear-gradient(90deg, transparent, var(--yj24-gold));\n}\n\n.yj24-ca-title {\n  color: #009900;\n  margin: 0;\n  font-size: clamp(38px, 5vw, 72px);\n  line-height: .96;\n  letter-spacing: -.055em;\n  font-weight: 800;\n}\n\n.yj24-ca-title span {\n  display: block;\n  font-family: Georgia, \"Times New Roman\", serif;\n  font-weight: 500;\n  font-style: italic;\n  color: #CC3300;\n  letter-spacing: -.045em;\n}\n\n.yj24-ca-lead {\n  max-width: 620px;\n  margin: 22px 0 0;\n  color: rgba(255, 249, 236, .78);\n  font-size: 17px;\n  line-height: 1.8;\n  word-break: keep-all;\n}\n\n.yj24-ca-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  margin-top: 30px;\n}\n\n.yj24-ca-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 48px;\n  padding: 0 22px;\n  border-radius: 999px;\n  border: 1px solid rgba(232,202,131,.46);\n  background: rgba(255,255,255,.06);\n  color: #fff9ec;\n  font-weight: 700;\n  cursor: pointer;\n  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;\n}\n\n.yj24-ca-btn:hover {\n  transform: translateY(-2px);\n  background: rgba(255,255,255,.11);\n  border-color: rgba(232,202,131,.82);\n  box-shadow: 0 14px 35px rgba(0,0,0,.22);\n}\n\n.yj24-ca-btn.is-gold {\n  color: #211b12;\n  border-color: transparent;\n  background: linear-gradient(135deg, #f7df9f, #bd9145);\n  box-shadow: 0 16px 36px rgba(199,161,90,.26);\n}\n\n.yj24-ca-hero-card {\n  position: relative;\n  min-height: 430px;\n  border-radius: var(--yj24-radius-xl);\n  overflow: hidden;\n  border: 1px solid rgba(232,202,131,.38);\n  background:\n    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),\n    rgba(255,255,255,.04);\n  box-shadow: var(--yj24-dark-shadow);\n  backdrop-filter: blur(16px);\n}\n\n.yj24-ca-hero-card::before {\n  content: \"\";\n  position: absolute;\n  inset: 18px;\n  border: 1px solid rgba(232,202,131,.34);\n  border-radius: 23px;\n  pointer-events: none;\n  z-index: 3;\n}\n\n.yj24-ca-hero-card::after {\n  content: \"\";\n  position: absolute;\n  width: 240px;\n  height: 240px;\n  right: -80px;\n  top: -70px;\n  border-radius: 50%;\n  background: radial-gradient(circle, rgba(232,202,131,.35), transparent 68%);\n}\n\n.yj24-ca-fabric-stack {\n  position: absolute;\n  inset: 42px 44px 86px;\n}\n\n.yj24-ca-fabric-sheet {\n  position: absolute;\n  width: 66%;\n  height: 62%;\n  border-radius: 24px;\n  border: 1px solid rgba(255,255,255,.22);\n  box-shadow: 0 28px 55px rgba(0,0,0,.30);\n  overflow: hidden;\n  transform-origin: center;\n}\n\n.yj24-ca-fabric-sheet::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image:\n    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px),\n    radial-gradient(circle at 30% 22%, rgba(255,255,255,.22), transparent 24%);\n  mix-blend-mode: soft-light;\n}\n\n.yj24-ca-fabric-sheet:nth-child(1) {\n  left: 0;\n  top: 46px;\n  background: linear-gradient(135deg, #252525, #59544d);\n  transform: rotate(-8deg);\n}\n\n.yj24-ca-fabric-sheet:nth-child(2) {\n  left: 76px;\n  top: 18px;\n  background: linear-gradient(135deg, #9d2630, #d7a88b);\n  transform: rotate(6deg);\n}\n\n.yj24-ca-fabric-sheet:nth-child(3) {\n  left: 145px;\n  top: 84px;\n  background: linear-gradient(135deg, #2d5c59, #dad1b9);\n  transform: rotate(-1deg);\n}\n\n.yj24-ca-hero-label {\n  position: absolute;\n  left: 44px;\n  right: 44px;\n  bottom: 35px;\n  display: flex;\n  align-items: end;\n  justify-content: space-between;\n  gap: 16px;\n  z-index: 4;\n}\n\n.yj24-ca-hero-label strong {\n  display: block;\n  color: #fff9ec;\n  font-size: 25px;\n  line-height: 1.15;\n  letter-spacing: -.03em;\n}\n\n.yj24-ca-hero-label span {\n  display: block;\n  margin-top: 8px;\n  color: rgba(255,249,236,.68);\n  font-size: 13px;\n}\n\n.yj24-ca-count {\n  flex: 0 0 auto;\n  min-width: 76px;\n  height: 76px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  border: 1px solid rgba(232,202,131,.45);\n  color: #f2d690;\n  font-weight: 800;\n  background: rgba(0,0,0,.22);\n}\n\n\/* PANEL *\/\n.yj24-ca-panel {\n  position: relative;\n  margin-top: 10px;\n  padding: 30px;\n  border-radius: var(--yj24-radius-xl);\n  background: rgba(255,250,240,.88);\n  border: 1px solid rgba(199,161,90,.22);\n  box-shadow: var(--yj24-shadow);\n  backdrop-filter: blur(16px);\n}\n\n.yj24-ca-toolbar {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  gap: 18px;\n  align-items: center;\n  margin-bottom: 24px;\n}\n\n.yj24-ca-section-title {\n  margin: 0;\n  font-size: clamp(25px, 3vw, 38px);\n  letter-spacing: -.045em;\n  line-height: 1.18;\n}\n\n.yj24-ca-section-title small {\n  display: block;\n  margin-top: 7px;\n  color: var(--yj24-muted);\n  font-size: 15px;\n  font-weight: 500;\n  letter-spacing: 0;\n}\n\n.yj24-ca-search {\n  width: min(360px, 100%);\n  position: relative;\n}\n\n.yj24-ca-search input {\n  width: 100%;\n  height: 48px;\n  border-radius: 999px;\n  border: 1px solid rgba(199,161,90,.28);\n  background: rgba(255,255,255,.74);\n  padding: 0 18px 0 42px;\n  outline: none;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);\n}\n\n.yj24-ca-search::before {\n  content: \"\u2315\";\n  position: absolute;\n  left: 17px;\n  top: 50%;\n  transform: translateY(-51%);\n  color: #8e7a55;\n  font-size: 20px;\n  z-index: 2;\n}\n\n.yj24-ca-filter-wrap {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 9px;\n  margin-bottom: 24px;\n}\n\n.yj24-ca-filter {\n  border: 1px solid rgba(36,31,24,.12);\n  background: rgba(255,255,255,.7);\n  color: #514735;\n  min-height: 38px;\n  padding: 0 14px;\n  border-radius: 999px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 700;\n  transition: background .18s ease, transform .18s ease, border-color .18s ease;\n}\n\n.yj24-ca-filter:hover {\n  transform: translateY(-1px);\n  border-color: rgba(199,161,90,.42);\n}\n\n.yj24-ca-filter.is-active {\n  color: #1e1912;\n  background: linear-gradient(135deg, #f6df9f, #c99d4c);\n  border-color: transparent;\n}\n\n\/* CARDS *\/\n.yj24-ca-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 18px;\n}\n\n.yj24-ca-card {\n  position: relative;\n  overflow: hidden;\n  min-height: 470px;\n  border-radius: var(--yj24-radius-lg);\n  background: linear-gradient(180deg, #fffdf7, #f8efdd);\n  border: 1px solid rgba(199,161,90,.24);\n  box-shadow: 0 18px 45px rgba(40,27,10,.10);\n  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;\n}\n\n.yj24-ca-card:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 28px 62px rgba(40,27,10,.17);\n  border-color: rgba(199,161,90,.52);\n}\n\n.yj24-ca-card-media {\n  position: relative;\n  height: 210px;\n  overflow: hidden;\n  background: #201b14;\n  cursor: zoom-in;\n}\n\n.yj24-ca-card-media img {\n  width: 100%;\n  height: 100%;\n  display: block;\n  object-fit: cover;\n  transform: scale(1.02);\n  opacity: .92;\n  transition: transform .35s ease, opacity .35s ease;\n}\n\n.yj24-ca-card:hover .yj24-ca-card-media img {\n  transform: scale(1.075);\n  opacity: 1;\n}\n\n.yj24-ca-card-media::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(180deg, transparent 25%, rgba(0,0,0,.58) 100%),\n    radial-gradient(circle at 15% 10%, rgba(255,255,255,.18), transparent 28%);\n}\n\n.yj24-ca-card-badge {\n  position: absolute;\n  left: 16px;\n  top: 16px;\n  z-index: 3;\n  padding: 8px 12px;\n  border-radius: 999px;\n  color: #241b0d;\n  background: rgba(255, 236, 180, .91);\n  border: 1px solid rgba(255,255,255,.38);\n  font-size: 12px;\n  font-weight: 800;\n  letter-spacing: .02em;\n  box-shadow: 0 9px 23px rgba(0,0,0,.18);\n}\n\n.yj24-ca-zoom-hint {\n  position: absolute;\n  right: 16px;\n  bottom: 15px;\n  z-index: 3;\n  color: #fff9ec;\n  font-size: 13px;\n  font-weight: 800;\n  padding: 8px 11px;\n  border-radius: 999px;\n  border: 1px solid rgba(255,255,255,.26);\n  background: rgba(0,0,0,.28);\n  backdrop-filter: blur(10px);\n}\n\n.yj24-ca-card-body {\n  padding: 20px 20px 18px;\n}\n\n.yj24-ca-card-kicker {\n  color: #9d7e3d;\n  font-size: 12px;\n  font-weight: 900;\n  letter-spacing: .12em;\n  text-transform: uppercase;\n  margin-bottom: 7px;\n}\n\n.yj24-ca-card-title {\n  margin: 0;\n  font-size: 25px;\n  line-height: 1.15;\n  letter-spacing: -.04em;\n}\n\n.yj24-ca-card-desc {\n  min-height: 72px;\n  margin: 12px 0 16px;\n  color: #6f6352;\n  font-size: 14.5px;\n  line-height: 1.62;\n  word-break: keep-all;\n}\n\n.yj24-ca-meta {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 7px;\n  margin-bottom: 16px;\n}\n\n.yj24-ca-meta span {\n  display: inline-flex;\n  align-items: center;\n  min-height: 28px;\n  padding: 0 10px;\n  border-radius: 999px;\n  color: #514735;\n  background: rgba(255,255,255,.72);\n  border: 1px solid rgba(36,31,24,.08);\n  font-size: 12.5px;\n  font-weight: 800;\n}\n\n.yj24-ca-swatches {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 7px;\n  margin-bottom: 17px;\n}\n\n.yj24-ca-swatch {\n  aspect-ratio: 1;\n  min-height: 28px;\n  border-radius: 10px;\n  border: 1px solid rgba(0,0,0,.10);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);\n}\n\n.yj24-ca-card-actions {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 9px;\n}\n\n.yj24-ca-mini-btn {\n  min-height: 42px;\n  border-radius: 14px;\n  border: 1px solid rgba(199,161,90,.32);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 12px;\n  font-weight: 900;\n  font-size: 13.5px;\n  cursor: pointer;\n  transition: transform .18s ease, background .18s ease;\n}\n\n.yj24-ca-mini-btn:hover {\n  transform: translateY(-1px);\n}\n\n.yj24-ca-mini-btn.is-dark {\n  color: #fff9ec;\n  background: #1e1a14;\n  border-color: #1e1a14;\n}\n\n.yj24-ca-mini-btn.is-light {\n  color: #3e3324;\n  background: rgba(255,255,255,.72);\n}\n\n.yj24-ca-empty {\n  display: none;\n  padding: 36px 20px;\n  text-align: center;\n  color: #7b705f;\n  border: 1px dashed rgba(199,161,90,.42);\n  border-radius: 18px;\n  background: rgba(255,255,255,.48);\n}\n\n\/* GUIDE *\/\n.yj24-ca-guide {\n  margin: 26px 0 0;\n  display: grid;\n  grid-template-columns: 1.2fr .8fr;\n  gap: 18px;\n}\n\n.yj24-ca-guide-box {\n  padding: 22px;\n  border-radius: 22px;\n  background:\n    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,250,240,.66));\n  border: 1px solid rgba(199,161,90,.24);\n}\n\n.yj24-ca-guide-box h3 {\n  margin: 0 0 10px;\n  font-size: 19px;\n  letter-spacing: -.03em;\n}\n\n.yj24-ca-guide-box p,\n.yj24-ca-guide-box li {\n  color: #6f6352;\n  line-height: 1.75;\n  font-size: 14px;\n  word-break: keep-all;\n}\n\n.yj24-ca-guide-box ul {\n  margin: 0;\n  padding-left: 18px;\n}\n\n\/* MODAL *\/\n.yj24-ca-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 999999;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  padding: 26px;\n  background: rgba(10, 9, 7, .78);\n  backdrop-filter: blur(10px);\n}\n\n.yj24-ca-modal.is-open {\n  display: flex;\n}\n\n.yj24-ca-modal-shell {\n  width: min(1180px, 100%);\n  max-height: calc(100vh - 52px);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: 26px;\n  background: #fffaf0;\n  border: 1px solid rgba(232,202,131,.45);\n  box-shadow: 0 30px 110px rgba(0,0,0,.48);\n}\n\n.yj24-ca-modal-head {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 15px 18px;\n  background: linear-gradient(135deg, #1c1812, #332817);\n  color: #fff9ec;\n}\n\n.yj24-ca-modal-title {\n  margin: 0;\n  font-size: 18px;\n  letter-spacing: -.02em;\n}\n\n.yj24-ca-modal-sub {\n  margin-top: 4px;\n  color: rgba(255,249,236,.64);\n  font-size: 12.5px;\n}\n\n.yj24-ca-modal-close {\n  flex: 0 0 auto;\n  width: 42px;\n  height: 42px;\n  border: 1px solid rgba(255,255,255,.25);\n  border-radius: 50%;\n  background: rgba(255,255,255,.08);\n  color: #fff9ec;\n  font-size: 24px;\n  line-height: 1;\n  cursor: pointer;\n}\n\n.yj24-ca-modal-body {\n  overflow: auto;\n  padding: 18px;\n  text-align: center;\n  background:\n    radial-gradient(circle at 50% 0%, rgba(199,161,90,.16), transparent 34%),\n    #fffaf0;\n}\n\n.yj24-ca-modal-body img {\n  width: auto;\n  max-width: 100%;\n  height: auto;\n  display: block;\n  margin: 0 auto;\n  border-radius: 14px;\n  box-shadow: 0 16px 46px rgba(40,27,10,.16);\n}\n\n.yj24-ca-modal-foot {\n  flex: 0 0 auto;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: 10px;\n  padding: 14px 18px;\n  border-top: 1px solid rgba(199,161,90,.20);\n  background: #fffaf0;\n  color: #6f6352;\n  font-size: 13px;\n}\n\n.yj24-ca-modal-foot a {\n  color: #1f1a13;\n  font-weight: 900;\n  border-bottom: 1px solid rgba(199,161,90,.55);\n}\n\n\/* RESPONSIVE *\/\n@media (max-width: 980px) {\n  .yj24-ca-hero-grid,\n  .yj24-ca-toolbar,\n  .yj24-ca-guide {\n    grid-template-columns: 1fr;\n  }\n\n  .yj24-ca-hero {\n    padding: 56px 0 42px;\n  }\n\n  .yj24-ca-hero-card {\n    min-height: 350px;\n  }\n\n  .yj24-ca-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .yj24-ca-search {\n    width: 100%;\n  }\n}\n\n@media (max-width: 640px) {\n  .yj24-ca-inner {\n    width: min(100% - 22px, 1180px);\n  }\n\n  .yj24-ca-hero {\n    padding: 42px 0 30px;\n  }\n\n  .yj24-ca-lead {\n    font-size: 15px;\n  }\n\n  .yj24-ca-actions {\n    display: grid;\n    grid-template-columns: 1fr;\n  }\n\n  .yj24-ca-hero-card {\n    min-height: 300px;\n    border-radius: 22px;\n  }\n\n  .yj24-ca-fabric-stack {\n    inset: 38px 24px 80px;\n  }\n\n  .yj24-ca-fabric-sheet {\n    width: 72%;\n    height: 58%;\n  }\n\n  .yj24-ca-fabric-sheet:nth-child(2) {\n    left: 48px;\n  }\n\n  .yj24-ca-fabric-sheet:nth-child(3) {\n    left: 84px;\n  }\n\n  .yj24-ca-hero-label {\n    left: 26px;\n    right: 26px;\n    bottom: 26px;\n  }\n\n  .yj24-ca-hero-label strong {\n    font-size: 20px;\n  }\n\n  .yj24-ca-count {\n    width: 60px;\n    height: 60px;\n    min-width: 60px;\n  }\n\n  .yj24-ca-panel {\n    padding: 18px;\n    border-radius: 23px;\n  }\n\n  .yj24-ca-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .yj24-ca-card {\n    min-height: auto;\n  }\n\n  .yj24-ca-card-media {\n    height: 230px;\n  }\n\n  .yj24-ca-filter-wrap {\n    gap: 7px;\n  }\n\n  .yj24-ca-filter {\n    min-height: 36px;\n    padding: 0 11px;\n    font-size: 13px;\n  }\n\n  .yj24-ca-modal {\n    padding: 10px;\n  }\n\n  .yj24-ca-modal-shell {\n    max-height: calc(100vh - 20px);\n    border-radius: 18px;\n  }\n\n  .yj24-ca-modal-body {\n    padding: 10px;\n  }\n\n  .yj24-ca-modal-head,\n  .yj24-ca-modal-foot {\n    padding: 12px;\n  }\n}\n.yj24-ca-card-actions .yj24-ca-board-card-btn {\n  grid-column: 1 \/ -1;\n}\n\n.yj24-ca-mini-btn.is-gold {\n  color: #211b12;\n  background: linear-gradient(135deg, #f6df9f, #c99d4c);\n  border-color: transparent;\n}\n\n.yj24-ca-modal-board-btn {\n  min-height: 34px;\n  padding: 0 13px;\n  border-radius: 999px;\n  border: 1px solid rgba(199,161,90,.42);\n  color: #211b12;\n  background: linear-gradient(135deg, #f6df9f, #c99d4c);\n  font-weight: 900;\n  cursor: pointer;\n}\n<\/style>\n\n<div class=\"yj24-color-atelier\" id=\"yj24ColorAtelier\">\n  <section class=\"yj24-ca-hero\">\n    <div class=\"yj24-ca-inner yj24-ca-hero-grid\">\n      <div>\n        <div class=\"yj24-ca-eyebrow\">YJ24 Felt Color Library<\/div>\n        <h1 class=\"yj24-ca-title\">\n          Felt Color\n          <span>Atelier<\/span>\n        <\/h1>\n        <p class=\"yj24-ca-lead\">\n          Explore YJ24 felt color charts like a premium sample book, organized by thickness, texture, and use.\n          View Solitone, Royal, and Artifel color charts in one enlarged color library.\n        <\/p>\n        <div class=\"yj24-ca-actions\">\n          <button type=\"button\" class=\"yj24-ca-btn is-gold\" data-yj24-scroll=\"#yj24ColorBooks\">View All Color Charts<\/button>\n          <button type=\"button\" class=\"yj24-ca-btn\" data-yj24-scroll=\"#yj24ColorGuide\">Color Selection Guide<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"yj24-ca-hero-card\" aria-hidden=\"true\">\n        <div class=\"yj24-ca-fabric-stack\">\n          <div class=\"yj24-ca-fabric-sheet\"><\/div>\n          <div class=\"yj24-ca-fabric-sheet\"><\/div>\n          <div class=\"yj24-ca-fabric-sheet\"><\/div>\n        <\/div>\n        <div class=\"yj24-ca-hero-label\">\n          <div>\n            <strong>Premium Felt<br>Sample Book<\/strong>\n            <span>9 color charts \u00b7 thickness guide \u00b7 enlarged preview<\/span>\n          <\/div>\n          <div class=\"yj24-ca-count\">9 Types<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <section class=\"yj24-ca-inner yj24-ca-panel\" id=\"yj24ColorBooks\">\n    <div class=\"yj24-ca-toolbar\">\n      <h2 class=\"yj24-ca-section-title\">\n        Color Charts by Product Line\n        <small>Quickly find charts by product name, thickness, and texture.<\/small>\n      <\/h2>\n\n      <div class=\"yj24-ca-search\">\n        <input type=\"search\" id=\"yj24CaSearch\" placeholder=\"e.g. 2mm, Royal, MW30, ECO, Melange\">\n      <\/div>\n    <\/div>\n\n<div class=\"yj24-ca-filter-wrap\" id=\"yj24CaFilters\" aria-label=\"Color chart filters\">\n  <button type=\"button\" class=\"yj24-ca-filter is-active\" data-filter=\"all\">All<\/button>\n\n  <button type=\"button\" class=\"yj24-ca-filter\" data-filter=\"1mm\">1mm<\/button>\n  <button type=\"button\" class=\"yj24-ca-filter\" data-filter=\"1.2mm\">1.2mm<\/button>\n  <button type=\"button\" class=\"yj24-ca-filter\" data-filter=\"2mm\">2mm<\/button>\n  <button type=\"button\" class=\"yj24-ca-filter\" data-filter=\"2.5mm\">2.5mm<\/button>\n  <button type=\"button\" class=\"yj24-ca-filter\" data-filter=\"3mm\">3mm<\/button>\n  <button type=\"button\" class=\"yj24-ca-filter\" data-filter=\"4mm\">4mm<\/button>\n\n  <button type=\"button\" class=\"yj24-ca-filter\" data-filter=\"solitone\">Solitone<\/button>\n  <button type=\"button\" class=\"yj24-ca-filter\" data-filter=\"royal10\">Royal 10<\/button>\n  <button type=\"button\" class=\"yj24-ca-filter\" data-filter=\"royal20\">Royal 20<\/button>\n  <button type=\"button\" class=\"yj24-ca-filter\" data-filter=\"artifelm12\">Artifel M12<\/button>\n  <button type=\"button\" class=\"yj24-ca-filter\" data-filter=\"artifelm20\">Artifel M20<\/button>\n  <button type=\"button\" class=\"yj24-ca-filter\" data-filter=\"artifelm20eco\">Artifel M20 ECO<\/button>\n  <button type=\"button\" class=\"yj24-ca-filter\" data-filter=\"artifelm25\">Artifel M25<\/button>\n  <button type=\"button\" class=\"yj24-ca-filter\" data-filter=\"artifelmw30\">Artifel MW30<\/button>\n  <button type=\"button\" class=\"yj24-ca-filter\" data-filter=\"artifelm40\">Artifel M40<\/button>\n<\/div>\n\n    <div class=\"yj24-ca-grid\" id=\"yj24CaGrid\"><\/div>\n    <div class=\"yj24-ca-empty\" id=\"yj24CaEmpty\">No matching color chart was found. Try reducing your search terms or select All.<\/div>\n\n    <div class=\"yj24-ca-guide\" id=\"yj24ColorGuide\">\n      <div class=\"yj24-ca-guide-box\">\n        <h3>Before Choosing Colors<\/h3>\n        <p>\n          The colors shown on screen may differ from the actual fabric depending on monitor brightness, browser, shooting environment, and production lot.\n          If accurate color matching is required, we recommend checking a sample before ordering.\n        <\/p>\n      <\/div>\n      <div class=\"yj24-ca-guide-box\">\n        <h3>Recommended Selection Flow<\/h3>\n        <ul>\n          <li>Choose the thickness first.<\/li>\n          <li>Open the color chart by product line in enlarged view.<\/li>\n          <li>Note the color number and select it from the product options.<\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <div class=\"yj24-ca-modal\" id=\"yj24CaModal\" role=\"dialog\" aria-modal=\"true\" aria-hidden=\"true\">\n    <div class=\"yj24-ca-modal-shell\">\n      <div class=\"yj24-ca-modal-head\">\n        <div>\n          <h3 class=\"yj24-ca-modal-title\" id=\"yj24CaModalTitle\">Color Chart<\/h3>\n          <div class=\"yj24-ca-modal-sub\" id=\"yj24CaModalSub\">Enlarge the chart to check the color numbers.<\/div>\n        <\/div>\n        <button type=\"button\" class=\"yj24-ca-modal-close\" id=\"yj24CaModalClose\" aria-label=\"Close\">\u00d7<\/button>\n      <\/div>\n      <div class=\"yj24-ca-modal-body\">\n        <img decoding=\"async\" src=\"\" alt=\"\" id=\"yj24CaModalImg\" title=\"\">\n      <\/div>\n      <div class=\"yj24-ca-modal-foot\">\n        <span>Actual colors may differ from what appears on screen.<\/span>\n        <a href=\"#\" id=\"yj24CaModalProduct\" target=\"_blank\" rel=\"noopener\">Search This Product<\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<script>\n(function () {\n  \"use strict\";\n\n  const colorBooks = [\n    {\n      name: \"Solitone\",\n      subtitle: \"1.2mm Soft Felt\",\n      thickness: \"1.2mm\",\nboardSeries: \"solitone\",\nboardTitle: \"Solitone Interactive Color Chart\",\n      tags: [\"1.2mm\", \"solitone\", \"soft\", \"basic\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/solitone.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/solitone\/\",\n      desc: \"A 1.2mm felt line with soft texture and a wide range of basic colors. Ideal for crafts, decorations, and small accessory projects.\",\n      swatches: [\"#f5f0df\", \"#dfbf4f\", \"#e58a95\", \"#b7233c\", \"#266b58\", \"#314c88\", \"#282828\"]\n    },\n    {\n      name: \"Royal 10\",\n      subtitle: \"1mm Felt\",\n      thickness: \"1mm\",\nboardSeries: \"royal10\",\nboardTitle: \"Royal 10  Interactive Color Chart\",\n      tags: [\"1mm\", \"royal10\", \"royal\", \"basic\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/royal10.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/royal-10\/\",\n      desc: \"A Royal series color chart for thin, lightweight felt. Suitable for delicate crafts and small accessory work.\",\n      swatches: [\"#fff7e5\", \"#f3cb45\", \"#f19aa5\", \"#d83a33\", \"#28815f\", \"#3158a6\", \"#1e1e1e\"]\n    },\n    {\n      name: \"Royal 20\",\n      subtitle: \"2mm Felt\",\n      thickness: \"2mm\",\nboardSeries: \"royal20\",\nboardTitle: \"Royal 20 Interactive Color Chart\",\n      tags: [\"2mm\", \"royal20\", \"royal\", \"basic\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/royal20.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/royal-20\/\",\n      desc: \"A versatile 2mm basic felt line with a wide color selection, ideal for crafts and educational projects.\",\n      swatches: [\"#f7ecd2\", \"#f2b544\", \"#e56a84\", \"#b7202c\", \"#1f7a59\", \"#274c90\", \"#121212\"]\n    },\n    {\n      name: \"Artifel M12\",\n      subtitle: \"1.2mm Premium Felt\",\n      thickness: \"1.2mm\",\n     tags: [\"1.2mm\", \"artifelm12\", \"artifel\", \"premium\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/artifelm12.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/artifel-m12\/\",\n      desc: \"A premium Artifel line for projects that need a thin felt with a clean, refined surface.\",\n      swatches: [\"#f6efe1\", \"#d9b35e\", \"#bf6d6a\", \"#85313a\", \"#56684b\", \"#4c5c76\", \"#2b2927\"]\n    },\n    {\n      name: \"Artifel M20\",\n      subtitle: \"2mm Premium Felt\",\n      thickness: \"2mm\",\n      tags: [\"2mm\", \"artifelm20\", \"artifel\", \"premium\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/artifelm20.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/artifel-m20\/\",\n      boardSeries: \"artifelm20\",\n  \t  boardTitle: \"Artifel M20 Interactive Color Chart\",\n      desc: \"A premium 2mm felt line recommended for projects that require stable texture and color expression.\",\n      swatches: [\"#f1e6cf\", \"#c7a15a\", \"#c06c84\", \"#874048\", \"#3f735e\", \"#465a88\", \"#222222\"]\n    },\n    {\n      name: \"Artifel M20 ECO\",\n      subtitle: \"2mm ECO Felt\",\n      thickness: \"2mm\",\n     tags: [\"2mm\", \"artifelm20eco\", \"eco\", \"artifel\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/artifelm20eco.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/artifel-m20-eco\/\",\n      desc: \"A 2mm Artifel line with an ECO concept, suitable for natural and calm color palettes.\",\n      swatches: [\"#eee3cf\", \"#c7b08a\", \"#aa8064\", \"#87806c\", \"#617460\", \"#596a72\", \"#2f302d\"]\n    },\n    {\n      name: \"Artifel M25\",\n      subtitle: \"2.5mm Premium Felt\",\n      thickness: \"2.5mm\",\nboardSeries: \"artifelm25\",\nboardTitle: \"Artifel M25 Interactive Color Chart\",\n      tags: [\"2.5mm\", \"artifelm25\", \"artifel\", \"premium\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/artifelm25.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/artifel-m25\/\",\n      desc: \"A 2.5mm premium felt line for projects that require more firmness than standard 2mm felt.\",\n      swatches: [\"#f4ead9\", \"#d2af68\", \"#b95868\", \"#7c3844\", \"#48735d\", \"#515d77\", \"#242424\"]\n    },\n    {\n      name: \"Artifel MW30\",\n      subtitle: \"3mm Melange Felt\",\n      thickness: \"3mm\",\nboardSeries: \"artifelmw30\",\nboardTitle: \"Artifel MW30 Interactive Color Chart\",\n      tags: [\"3mm\", \"artifelmw30\", \"melange\", \"artifel\", \"premium\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/artifelmw30.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/artifel-mw30\/\",\n      desc: \"A 3mm melange felt line, ideal for deep blended colors and a premium textured look.\",\n      swatches: [\"#d8d2c4\", \"#a99b82\", \"#8a716a\", \"#6d7070\", \"#5c675a\", \"#464a54\", \"#252627\"]\n    },\n    {\n      name: \"Artifel M40\",\n      subtitle: \"4mm Premium Felt\",\n      thickness: \"4mm\",\n      tags: [\"4mm\", \"artifelm40\", \"artifel\", \"premium\", \"thick\"],\n      image: \"https:\/\/shop.yj24.com\/wp-content\/uploads\/yj24-imported\/cafe24\/e-brochure\/images\/book2\/artifelm40.jpg\",\n      product: \"https:\/\/shop.yj24.com\/product-category\/%ed%8e%a0%ed%8a%b8%ec%a7%80\/artifel-m40\/\",\n      desc: \"A thick and firm 4mm felt line with excellent structure, cushioning, and laser-cutting versatility.\",\n      swatches: [\"#f0e5d3\", \"#c7a463\", \"#ad6d66\", \"#74383e\", \"#4e6b58\", \"#4b5366\", \"#202020\"]\n    }\n  ];\n\n  const root = document.getElementById(\"yj24ColorAtelier\");\n  if (!root) return;\n\n  const grid = root.querySelector(\"#yj24CaGrid\");\n  const empty = root.querySelector(\"#yj24CaEmpty\");\n  const searchInput = root.querySelector(\"#yj24CaSearch\");\n  const filterButtons = Array.from(root.querySelectorAll(\".yj24-ca-filter\"));\n  const modal = root.querySelector(\"#yj24CaModal\");\n  const modalImg = root.querySelector(\"#yj24CaModalImg\");\n  const modalTitle = root.querySelector(\"#yj24CaModalTitle\");\n  const modalSub = root.querySelector(\"#yj24CaModalSub\");\n  const modalProduct = root.querySelector(\"#yj24CaModalProduct\");\n  const modalClose = root.querySelector(\"#yj24CaModalClose\");\n\n  let activeFilter = \"all\";\n\n  function escapeHtml(value) {\n    return String(value).replace(\/[&<>\"']\/g, function (s) {\n      return ({\n        \"&\": \"&amp;\",\n        \"<\": \"&lt;\",\n        \">\": \"&gt;\",\n        '\"': \"&quot;\",\n        \"'\": \"&#039;\"\n      })[s];\n    });\n  }\n\n  function getSearchText(item) {\n    return [\n      item.name,\n      item.subtitle,\n      item.thickness,\n      item.desc,\n      item.tags.join(\" \")\n    ].join(\" \").toLowerCase();\n  }\nfunction interactiveBoardButtonHtml(item, extraClass) {\n  if (!item.boardSeries) {\n    return \"\";\n  }\n\n  return `\n    <button\n      type=\"button\"\n      class=\"yj24-color-board-open ${extraClass || \"\"}\"\n      data-yj24-series=\"${escapeHtml(item.boardSeries)}\"\n      data-yj24-title=\"${escapeHtml(item.boardTitle || item.name + \" Interactive Color Chart\")}\">\n      View Interactive Color Chart\n    <\/button>\n  `;\n}\n  function cardTemplate(item, index) {\n    const swatches = item.swatches.map(color => {\n      return `<span class=\"yj24-ca-swatch\" style=\"background:${escapeHtml(color)}\"><\/span>`;\n    }).join(\"\");\n\n    const meta = [\n      item.thickness,\n      item.tags.includes(\"eco\") ? \"ECO\" : \"Color Chart\",\n      item.tags.includes(\"melange\") ? \"Melange\" : \"Felt\"\n    ].map(v => `<span>${escapeHtml(v)}<\/span>`).join(\"\");\n\n    return `\n      <article class=\"yj24-ca-card\" data-index=\"${index}\">\n        <div class=\"yj24-ca-card-media\" data-open=\"${index}\" role=\"button\" tabindex=\"0\" aria-label=\"${escapeHtml(item.name)} enlarged color chart\">\n          <img decoding=\"async\" src=\"${escapeHtml(item.image)}\" alt=\"${escapeHtml(item.name)} color chart\" loading=\"lazy\">\n          <div class=\"yj24-ca-card-badge\">${escapeHtml(item.thickness)}<\/div>\n          <div class=\"yj24-ca-zoom-hint\">Enlarge<\/div>\n        <\/div>\n        <div class=\"yj24-ca-card-body\">\n          <div class=\"yj24-ca-card-kicker\">${escapeHtml(item.subtitle)}<\/div>\n          <h3 class=\"yj24-ca-card-title\">${escapeHtml(item.name)}<\/h3>\n          <p class=\"yj24-ca-card-desc\">${escapeHtml(item.desc)}<\/p>\n          <div class=\"yj24-ca-meta\">${meta}<\/div>\n          <div class=\"yj24-ca-swatches\" aria-label=\"Representative color swatches\">${swatches}<\/div>\n <div class=\"yj24-ca-card-actions\">\n  <button type=\"button\" class=\"yj24-ca-mini-btn is-dark\" data-open=\"${index}\">Enlarge Chart<\/button>\n  <a class=\"yj24-ca-mini-btn is-light\" href=\"${escapeHtml(item.product)}\" target=\"_blank\" rel=\"noopener\">Search Product<\/a>\n  ${interactiveBoardButtonHtml(item, \"yj24-ca-mini-btn is-gold yj24-ca-board-card-btn\")}\n<\/div>\n        <\/div>\n      <\/article>\n    `;\n  }\n\n  function render() {\n    const keyword = (searchInput.value || \"\").trim().toLowerCase();\n\n    const filtered = colorBooks.filter(item => {\n      const matchesFilter = activeFilter === \"all\" || item.tags.includes(activeFilter) || item.thickness === activeFilter;\n      const matchesKeyword = !keyword || getSearchText(item).includes(keyword);\n      return matchesFilter && matchesKeyword;\n    });\n\n    grid.innerHTML = filtered.map((item) => {\n      const originalIndex = colorBooks.indexOf(item);\n      return cardTemplate(item, originalIndex);\n    }).join(\"\");\n\n    empty.style.display = filtered.length ? \"none\" : \"block\";\n  }\n\nfunction syncModalBoardButton(item) {\n  let btn = root.querySelector(\"#yj24CaModalBoardBtn\");\n\n  if (!btn) {\n    btn = document.createElement(\"button\");\n    btn.type = \"button\";\n    btn.id = \"yj24CaModalBoardBtn\";\n    btn.className = \"yj24-color-board-open yj24-ca-modal-board-btn\";\n    btn.textContent = \"View Interactive Color Chart\";\n\n    modalProduct.insertAdjacentElement(\"afterend\", btn);\n  }\n\n  if (item.boardSeries) {\n    btn.hidden = false;\n    btn.setAttribute(\"data-yj24-series\", item.boardSeries);\n    btn.setAttribute(\"data-yj24-title\", item.boardTitle || item.name + \" Interactive Color Chart\");\n  } else {\n    btn.hidden = true;\n    btn.removeAttribute(\"data-yj24-series\");\n    btn.removeAttribute(\"data-yj24-title\");\n  }\n}\n\nfunction openModal(index) {\n  const item = colorBooks[index];\n  if (!item) return;\n\n  modalImg.src = item.image;\n  modalImg.alt = item.name + \" color chart\";\n  modalTitle.textContent = item.name + \" color chart\";\n  modalSub.textContent = item.subtitle + \" \u00b7 \" + item.thickness;\n  modalProduct.href = item.product;\n\n  syncModalBoardButton(item);\n\n  modal.classList.add(\"is-open\");\n  modal.setAttribute(\"aria-hidden\", \"false\");\n  document.documentElement.style.overflow = \"hidden\";\n}\n\n  function closeModal() {\n    modal.classList.remove(\"is-open\");\n    modal.setAttribute(\"aria-hidden\", \"true\");\n    modalImg.src = \"\";\n    document.documentElement.style.overflow = \"\";\n  }\n\nroot.addEventListener(\"click\", function (event) {\n  const boardBtn = event.target.closest(\".yj24-color-board-open\");\n  if (boardBtn) {\n    if (modal.classList.contains(\"is-open\")) {\n      closeModal();\n    }\n    return;\n  }\n\n  const openBtn = event.target.closest(\"[data-open]\");\n  if (openBtn) {\n    openModal(Number(openBtn.getAttribute(\"data-open\")));\n    return;\n  }\n\n  const scrollBtn = event.target.closest(\"[data-yj24-scroll]\");\n  if (scrollBtn) {\n    const target = document.querySelector(scrollBtn.getAttribute(\"data-yj24-scroll\"));\n    if (target) target.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n  }\n});\n\n  root.addEventListener(\"keydown\", function (event) {\n    if (event.key === \"Enter\" && event.target.matches(\"[data-open]\")) {\n      openModal(Number(event.target.getAttribute(\"data-open\")));\n    }\n  });\n\n  filterButtons.forEach(button => {\n    button.addEventListener(\"click\", function () {\n      activeFilter = this.getAttribute(\"data-filter\");\n      filterButtons.forEach(btn => btn.classList.toggle(\"is-active\", btn === this));\n      render();\n    });\n  });\n\n  searchInput.addEventListener(\"input\", render);\n\n  modalClose.addEventListener(\"click\", closeModal);\n  modal.addEventListener(\"click\", function (event) {\n    if (event.target === modal) closeModal();\n  });\n  document.addEventListener(\"keydown\", function (event) {\n    if (event.key === \"Escape\" && modal.classList.contains(\"is-open\")) {\n      closeModal();\n    }\n  });\n\n  render();\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>YJ24 Felt Color Library Felt Color Atelier Explore YJ24 felt color charts like a premium sample book, organized by thickness, texture, and use. View Solitone, Royal, and Artifel color charts in one enlarged color library. View All Color Charts Color Selection Guide Premium FeltSample Book 9 color charts \u00b7 thickness guide \u00b7 enlarged preview 9 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-18840","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/shop.yj24.com\/en\/wp-json\/wp\/v2\/pages\/18840","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shop.yj24.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shop.yj24.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shop.yj24.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shop.yj24.com\/en\/wp-json\/wp\/v2\/comments?post=18840"}],"version-history":[{"count":8,"href":"https:\/\/shop.yj24.com\/en\/wp-json\/wp\/v2\/pages\/18840\/revisions"}],"predecessor-version":[{"id":24312,"href":"https:\/\/shop.yj24.com\/en\/wp-json\/wp\/v2\/pages\/18840\/revisions\/24312"}],"wp:attachment":[{"href":"https:\/\/shop.yj24.com\/en\/wp-json\/wp\/v2\/media?parent=18840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}