{"id":29769,"date":"2026-01-08T17:05:33","date_gmt":"2026-01-08T08:05:33","guid":{"rendered":"https:\/\/cocorycolor.com\/%ec%98%88%ec%95%bd-%ec%8b%9c%ec%9e%91%ea%b0%9c%eb%b0%9c%ed%8c%80-%ed%85%8c%ec%8a%a4%ed%8a%b8-%ed%8e%98%ec%9d%b4%ec%a7%80-copy\/"},"modified":"2026-08-18T15:35:30","modified_gmt":"2026-08-18T06:35:30","slug":"main","status":"publish","type":"page","link":"https:\/\/cocorycolor.com\/en\/","title":{"rendered":"Main"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"29769\" class=\"elementor elementor-29769 elementor-29129\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-379fde53 e-flex e-con-boxed e-con e-parent\" data-id=\"379fde53\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-26d4728d elementor-widget elementor-widget-html\" data-id=\"26d4728d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \uac00\uc7a5 \uc704 HTML \uc704\uc82f\uc5d0 1\ud68c\ub9cc \uc785\ub825 -->\n<style>\n:root{\n  --red:#e3343e;\n  --black:#111;\n  --text:#1b1b1d;\n  --gray:#77777e;\n  --line:#e7e7ea;\n  --soft:#f6f5f3;\n  --white:#fff;\n  --max:1180px;\n  --header:66px;\n}\n*{box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{\n  margin:0;\n  color:var(--text);\n  background:#fff;\n  font-family:Pretendard,\"Noto Sans KR\",Arial,sans-serif;\n  word-break:keep-all;\n}\na{color:inherit;text-decoration:none}\nbutton{font:inherit}\nimg{display:block;max-width:100%}\n.wrap{width:min(var(--max),calc(100% - 40px));margin:auto}\n\n\n\n\/* HERO *\/\n.hero{padding:16px 0 0}\n.hero-main{\n  position:relative;\n  min-height:450px;\n  overflow:hidden;\n  border-radius:22px;\n  background:#111;\n}\n.hero-main::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background:linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.52) 48%,rgba(0,0,0,.07));\n}\n.hero-media-slide{\n  position:absolute;\n  inset:0;\n  opacity:0;\n  transform:scale(1.03);\n  transition:opacity .8s ease,transform 5s ease;\n  background-position:center;\n  background-size:cover;\n}\n.hero-media-slide.active{opacity:1;transform:scale(1)}\n.hero-content{\n  position:relative;\n  z-index:2;\n  max-width:690px;\n  padding:68px 54px 58px;\n  color:#fff;\n}\n.eyebrow{\n  margin:0 0 14px;\n  color:rgba(255,255,255,.68);\n  font-size:10px;\n  font-weight:900;\n  letter-spacing:2px;\n}\n.hero h1{\n  margin:0;\n  font-size:clamp(40px,5vw,62px);\n  line-height:1.06;\n  letter-spacing:-3.3px;\n}\n.hero h1 span{display:block;color:#ff626b}\n.hero-desc{\n  max-width:550px;\n  margin:18px 0 0;\n  color:rgba(255,255,255,.8);\n  font-size:14px;\n  line-height:1.7;\n}\n.hero-actions{display:flex;gap:10px;margin-top:26px}\n.primary-btn,.secondary-btn{\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n  min-height:46px;\n  padding:0 21px;\n  border-radius:999px;\n  font-size:12px;\n  font-weight:900;\n}\n.primary-btn{background:#fff;color:#111}\n.secondary-btn{border:1px solid rgba(255,255,255,.34);color:#fff}\n.hero-counter{\n  position:absolute;\n  right:23px;\n  bottom:19px;\n  z-index:3;\n  display:flex;\n  align-items:center;\n  gap:8px;\n  color:#fff;\n  font-size:10px;\n  font-weight:900;\n}\n.hero-counter i{width:30px;height:1px;background:rgba(255,255,255,.5)}\n\n\/* PROGRAM PREVIEW *\/\n.program-preview{padding:22px 0 48px}\n.preview-head{\n  display:flex;\n  justify-content:space-between;\n  align-items:flex-end;\n  gap:20px;\n  margin-bottom:14px;\n}\n.kicker{\n  margin:0 0 6px;\n  color:var(--red);\n  font-size:10px;\n  font-weight:950;\n  letter-spacing:1.3px;\n}\n.preview-head h2,.booking-head h2,.why-head h2{\n  margin:0;\n  font-size:clamp(26px,3.4vw,38px);\n  line-height:1.15;\n  letter-spacing:-1.9px;\n}\n.preview-head p{\n  max-width:450px;\n  margin:0;\n  color:var(--gray);\n  font-size:11px;\n  line-height:1.6;\n}\n.preview-grid{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:10px;\n}\n.preview-card{\n  position:relative;\n  min-height:145px;\n  overflow:hidden;\n  border:0;\n  border-radius:13px;\n  padding:0;\n  background:#111;\n  color:#fff;\n  text-align:left;\n  cursor:pointer;\n}\n.preview-card img{\n  width:100%;\n  height:145px;\n  object-fit:cover;\n  transition:transform .4s ease;\n}\n.preview-card::after{\n  content:\"\";\n  position:absolute;\n  inset:0;\n  background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.78));\n}\n.preview-card:hover img{transform:scale(1.04)}\n.preview-copy{\n  position:absolute;\n  left:0;right:0;bottom:0;\n  z-index:2;\n  padding:14px;\n}\n.preview-copy strong{\n  display:block;\n  font-size:14px;\n  letter-spacing:-.4px;\n}\n.preview-copy small{\n  display:block;\n  margin-top:4px;\n  color:rgba(255,255,255,.62);\n  font-size:8px;\n}\n.preview-card.coming{opacity:.72;cursor:default}\n.coming-badge{\n  position:absolute;\n  top:8px;\n  left:8px;\n  z-index:3;\n  padding:5px 7px;\n  border-radius:999px;\n  background:var(--red);\n  color:#fff;\n  font-size:7px;\n  font-weight:950;\n}\n\n\/* PROGRAM MODAL \u2014 SINGLE SOURCE OF TRUTH *\/\n#programModal.modal{\n  position:fixed;\n  inset:0;\n  z-index:2147483000;\n  display:none;\n  align-items:center;\n  justify-content:center;\n  padding:24px;\n  background:rgba(15,15,15,.68);\n  backdrop-filter:blur(8px);\n  -webkit-backdrop-filter:blur(8px);\n}\n#programModal.modal.open{display:flex}\n\n#programModal .modal-dialog{\n  position:relative;\n  display:flex;\n  flex-direction:column;\n  width:min(620px,calc(100vw - 48px));\n  max-height:calc(100dvh - 48px);\n  overflow:hidden;\n  border-radius:24px;\n  background:#fff;\n  box-shadow:0 24px 80px rgba(0,0,0,.28),0 4px 18px rgba(0,0,0,.08);\n}\n\n#programModal .modal-program-panel:not([hidden]){\n  display:flex;\n  flex-direction:column;\n  min-height:0;\n  width:100%;\n}\n\n#programModal .modal-image{\n  display:block;\n  flex:0 0 auto;\n  width:100%;\n  height:auto;\n  max-width:none;\n  object-fit:contain;\n  object-position:center;\n}\n\n#programModal .modal-body{\n  flex:1 1 auto;\n  min-height:0;\n  overflow-y:auto;\n  overflow-x:hidden;\n  padding:28px 28px 34px;\n  -webkit-overflow-scrolling:touch;\n  overscroll-behavior:contain;\n  scrollbar-width:thin;\n  scrollbar-color:#c8c8c8 transparent;\n}\n#programModal .modal-body::-webkit-scrollbar{width:5px}\n#programModal .modal-body::-webkit-scrollbar-track{background:transparent}\n#programModal .modal-body::-webkit-scrollbar-thumb{border-radius:999px;background:#c8c8c8}\n\n#programModal .modal-close{\n  position:absolute;\n  top:14px;\n  right:14px;\n  z-index:20;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  width:42px;\n  height:42px;\n  padding:0;\n  border:1px solid rgba(17,17,17,.08);\n  border-radius:50%;\n  background:rgba(255,255,255,.96);\n  color:#111;\n  cursor:pointer;\n  box-shadow:0 4px 18px rgba(0,0,0,.16);\n  -webkit-tap-highlight-color:transparent;\n}\n#programModal .modal-close:hover{background:#111}\n#programModal .modal-close:focus-visible{outline:2px solid var(--red);outline-offset:3px}\n#programModal .modal-close-icon,\n#programModal .modal-close-icon::after{\n  content:\"\";\n  position:absolute;\n  width:17px;\n  height:1.5px;\n  border-radius:999px;\n  background:#111;\n}\n#programModal .modal-close-icon{transform:rotate(45deg)}\n#programModal .modal-close-icon::after{left:0;top:0;transform:rotate(90deg)}\n#programModal .modal-close:hover .modal-close-icon,\n#programModal .modal-close:hover .modal-close-icon::after{background:#fff}\n\n#programModal .modal-kicker{\n  margin:0 0 10px;\n  color:var(--red);\n  font-size:11px;\n  font-weight:800;\n  line-height:1;\n  letter-spacing:1.8px;\n}\n#programModal .modal-program-panel h3{\n  margin:0;\n  color:#111;\n  font-size:28px;\n  font-weight:750;\n  line-height:1.28;\n  letter-spacing:-.04em;\n}\n#programModal .modal-desc{\n  margin:16px 0 0;\n  color:#555;\n  font-size:14px;\n  line-height:1.8;\n  letter-spacing:-.015em;\n}\n#programModal .modal-details{margin-top:28px;padding:0;border:0;background:transparent}\n#programModal .modal-details-title{display:block;margin-bottom:14px;color:#111;font-size:14px;font-weight:750;line-height:1.4}\n#programModal .modal-detail-list{counter-reset:detail-counter;display:grid;gap:10px;margin:0;padding:0;list-style:none}\n#programModal .modal-detail-list li{counter-increment:detail-counter;display:grid;grid-template-columns:34px 1fr;align-items:center;min-height:54px;margin:0;padding:12px 14px;border:1px solid #efedeb;border-radius:14px;background:#fbfaf9;color:#333;font-size:13px;line-height:1.55}\n#programModal .modal-detail-list li::before{content:counter(detail-counter,decimal-leading-zero);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#111;color:#fff;font-size:10px;font-weight:700;line-height:1}\n#programModal .modal-analysis{margin-top:30px;padding:20px;border:1px solid #efedeb;border-radius:16px;background:#f7f6f4}\n#programModal .modal-analysis>strong{display:block;margin-bottom:13px;color:#111;font-size:13px;font-weight:750;line-height:1.4}\n#programModal .modal-tags{display:flex;flex-wrap:wrap;gap:8px}\n#programModal .modal-tags span{display:inline-flex;align-items:center;min-height:32px;padding:8px 12px;border:1px solid #ebe8e5;border-radius:999px;background:#fff;color:#333;font-size:11px;font-weight:650;line-height:1}\n#programModal .modal-branches{margin-top:30px}\n#programModal .modal-branches-title{display:block;margin-bottom:14px;color:#111;font-size:14px;font-weight:750;line-height:1.4}\n#programModal .modal-branch-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}\n#programModal .modal-branch-chip{appearance:none;position:relative;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:13px 15px;border:1px solid #dedbd7;border-radius:12px;background:#fff;color:#222;font-family:inherit;font-size:13px;font-weight:700;line-height:1;text-align:left;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .2s ease}\n#programModal .modal-branch-chip::after{content:\"\u2192\";color:var(--red);font-size:14px;font-weight:700}\n#programModal .modal-branch-chip:hover{border-color:#111;background:#111;color:#fff;transform:translateY(-1px)}\n#programModal .modal-branch-chip:hover::after{color:#fff}\n\n@media(max-width:767px){\n  #programModal.modal{padding:10px}\n  #programModal .modal-dialog{width:100%;max-height:calc(100dvh - 20px);border-radius:20px}\n  #programModal .modal-body{padding:24px 20px 30px}\n  #programModal .modal-program-panel h3{font-size:25px}\n  #programModal .modal-desc{margin-top:14px;font-size:13px;line-height:1.75}\n  #programModal .modal-details{margin-top:24px}\n  #programModal .modal-detail-list{gap:8px}\n  #programModal .modal-detail-list li{min-height:50px;padding:11px 12px;font-size:12.5px}\n  #programModal .modal-analysis{margin-top:24px;padding:18px}\n  #programModal .modal-branches{margin-top:24px}\n  #programModal .modal-branch-chip{min-height:46px;padding:12px 14px;font-size:12.5px}\n  #programModal .modal-close{top:12px;right:12px;width:40px;height:40px}\n}\n@media(max-width:420px){\n  #programModal .modal-branch-list{grid-template-columns:1fr}\n}\n@supports not (height:100dvh){\n  #programModal .modal-dialog{max-height:calc(100vh - 48px)}\n  @media(max-width:767px){#programModal .modal-dialog{max-height:calc(100vh - 20px)}}\n}\n\n\/* BOOKING *\/\n.booking-section{padding:52px 0 62px;background:var(--soft)}\n.booking-head{margin-bottom:18px}\n.branch-tabs-wrap{\n  position:sticky;\n  top:var(--header);\n  z-index:50;\n  padding:10px 0;\n  background:rgba(246,245,243,.95);\n  border-bottom:1px solid rgba(0,0,0,.06);\n  backdrop-filter:blur(12px);\n}\n.branch-tabs{display:flex;gap:8px}\n.branch-tab{\n  flex:1;\n  min-height:44px;\n  border:1px solid #d9d8d5;\n  border-radius:999px;\n  background:#fff;\n  color:#555;\n  font-size:12px;\n  font-weight:900;\n  cursor:pointer;\n}\n.branch-tab.active{border-color:#111;background:#111;color:#fff}\n.branch-panel{display:none;padding-top:22px}\n.branch-panel.active{display:block}\n.branch-title{\n  display:flex;\n  justify-content:space-between;\n  align-items:flex-end;\n  gap:20px;\n  margin-bottom:13px;\n}\n.branch-title h3{margin:0;font-size:22px;letter-spacing:-.8px}\n.branch-title a{color:var(--gray);font-size:10px;font-weight:850}\n.booking-grid{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:14px;\n}\n.booking-card{\n  overflow:hidden;\n  border:1px solid var(--line);\n  border-radius:15px;\n  background:#fff;\n}\n.booking-image{position:relative;aspect-ratio:4\/3;overflow:hidden}\n.booking-image img{width:100%;height:100%;object-fit:cover}\n.booking-label{\n  position:absolute;\n  top:10px;\n  left:10px;\n  padding:6px 8px;\n  border-radius:999px;\n  background:rgba(227,52,62,.94);\n  color:#fff;\n  font-size:8px;\n  font-weight:950;\n}\n.booking-body{padding:15px}\n.booking-body h4{\n  min-height:46px;\n  margin:0 0 11px;\n  font-size:17px;\n  line-height:1.35;\n  letter-spacing:-.55px;\n}\n.price-block{display:grid;gap:6px}\n.price-row{\n  display:flex;\n  justify-content:space-between;\n  gap:10px;\n  padding:8px 9px;\n  border-radius:9px;\n  background:#f7f7f8;\n  font-size:10px;\n}\n.price-row span{color:#777}\n.price-row strong{font-size:11px}\n.booking-btn{\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  min-height:41px;\n  margin-top:10px;\n  border-radius:9px;\n  background:#111;\n  color:#fff;\n  font-size:11px;\n  font-weight:950;\n}\n\n\/* MAP *\/\n.map-section{margin-top:40px}\n.map-box{\n  overflow:hidden;\n  border:1px solid var(--line);\n  border-radius:18px;\n  background:#fff;\n}\n.map-head{\n  display:flex;\n  justify-content:space-between;\n  gap:20px;\n  padding:16px 18px;\n  border-bottom:1px solid var(--line);\n}\n.map-head strong{font-size:15px}\n.map-head span{color:var(--gray);font-size:10px}\n.map-canvas{\n  position:relative;\n  min-height:300px;\n  background:\n    linear-gradient(rgba(255,255,255,.24),rgba(255,255,255,.24)),\n    url(\"https:\/\/images.unsplash.com\/photo-1546874177-9e664107314e?auto=format&fit=crop&w=1600&q=70\") center\/cover;\n}\n.map-canvas::after{content:\"\";position:absolute;inset:0;background:rgba(244,244,241,.68)}\n.marker{\n  position:absolute;\n  z-index:2;\n  transform:translate(-50%,-50%);\n  width:21px;\n  height:21px;\n  padding:0;\n  border:4px solid #fff;\n  border-radius:50%;\n  background:#999;\n  box-shadow:0 5px 16px rgba(0,0,0,.24);\n}\n.marker::after{\n  content:attr(data-label);\n  position:absolute;\n  left:50%;\n  top:24px;\n  transform:translateX(-50%);\n  white-space:nowrap;\n  padding:5px 7px;\n  border-radius:7px;\n  background:rgba(17,17,17,.8);\n  color:#fff;\n  font-size:8px;\n  font-weight:900;\n}\n\/* \ubaa8\ub4e0 \uc9c0\uc810\uc744 \ub3d9\uc77c\ud55c \ud615\ud0dc\ub85c \ud45c\uc2dc *\/\n.marker{\n  background:var(--red);\n}\n\n\/* WHY COCORY - BOTTOM *\/\n.why-section{padding:58px 0 62px}\n.why-head{margin-bottom:18px}\n.why-slider{\n  position:relative;\n  overflow:hidden;\n  border-radius:20px;\n  background:#111;\n  color:#fff;\n}\n.why-track{\n  display:flex;\n  transition:transform .55s cubic-bezier(.22,.61,.36,1);\n}\n.why-slide{\n  flex:0 0 100%;\n  display:grid;\n  grid-template-columns:1.02fr .98fr;\n  min-height:350px;\n}\n.why-image{\n  min-height:350px;\n  background-position:center;\n  background-size:cover;\n}\n.why-copy{\n  display:flex;\n  flex-direction:column;\n  justify-content:center;\n  padding:46px 52px 62px;\n}\n.why-no{\n  margin-bottom:16px;\n  color:#ff626b;\n  font-size:11px;\n  font-weight:950;\n  letter-spacing:1.4px;\n}\n.why-copy h3{\n  margin:0;\n  font-size:clamp(29px,3.8vw,46px);\n  line-height:1.1;\n  letter-spacing:-2.2px;\n}\n.why-copy p{\n  max-width:460px;\n  margin:17px 0 0;\n  color:rgba(255,255,255,.72);\n  font-size:13px;\n  line-height:1.75;\n}\n.why-controls{\n  position:absolute;\n  right:24px;\n  bottom:20px;\n  display:flex;\n  align-items:center;\n  gap:8px;\n  z-index:4;\n}\n.why-arrow{\n  width:40px;\n  height:40px;\n  border:1px solid rgba(255,255,255,.25);\n  border-radius:50%;\n  background:rgba(255,255,255,.06);\n  color:#fff;\n  cursor:pointer;\n}\n.why-dots{display:flex;gap:6px;margin-right:7px}\n.why-dot{\n  width:6px;\n  height:6px;\n  padding:0;\n  border:0;\n  border-radius:50%;\n  background:rgba(255,255,255,.35);\n  cursor:pointer;\n}\n.why-dot.active{width:21px;border-radius:99px;background:#fff}\n.trust-bar{\n  display:grid;\n  grid-template-columns:repeat(4,1fr);\n  margin-top:12px;\n  border-radius:14px;\n  background:#111;\n  color:#fff;\n}\n.trust-item{\n  min-height:80px;\n  display:flex;\n  flex-direction:column;\n  justify-content:center;\n  align-items:center;\n  text-align:center;\n  border-right:1px solid rgba(255,255,255,.12);\n}\n.trust-item:last-child{border-right:0}\n.trust-item strong{font-size:19px}\n.trust-item span{margin-top:5px;color:rgba(255,255,255,.55);font-size:8px;letter-spacing:.5px}\n\/* FOOT *\/\n.footer{padding:29px 0 34px;background:#111;color:#fff}\n.footer p{margin:0;color:rgba(255,255,255,.5);font-size:10px;line-height:1.7}\n\n@media(max-width:760px){\n  :root{--header:62px}\n  .wrap{width:min(100% - 24px,var(--max))}\n  .site-header{height:var(--header)}\n  .logo{font-size:22px}\n  .header-nav a:not(.header-book){display:none}\n  .header-book{padding:9px 13px;font-size:10px}\n\n  .hero{padding-top:9px}\n  .hero-main{min-height:425px;border-radius:16px}\n  .hero-main::after{\n    background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.83) 61%,rgba(0,0,0,.95));\n  }\n  .hero-media-slide{background-position:62% center}\n  .hero-content{\n    display:flex;\n    flex-direction:column;\n    justify-content:flex-end;\n    min-height:425px;\n    padding:35px 21px 38px;\n  }\n  .eyebrow{font-size:8px}\n  .hero h1{font-size:34px;letter-spacing:-2.1px}\n  .hero-desc{margin-top:13px;font-size:11px;line-height:1.6}\n  .hero-actions{margin-top:19px}\n  .primary-btn{width:100%;min-height:44px}\n  .secondary-btn{display:none}\n  .hero-counter{right:16px;bottom:13px;font-size:8px}\n\n  .program-preview{padding:16px 0 36px}\n  .preview-head{display:block;margin-bottom:12px}\n  .preview-head h2{font-size:26px}\n  .preview-head p{margin-top:7px;font-size:9px}\n  .preview-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}\n  .preview-card{min-height:112px;border-radius:10px}\n  .preview-card img{height:112px}\n  .preview-copy{padding:8px}\n  .preview-copy strong{font-size:9.5px;line-height:1.25}\n  .preview-copy small{font-size:6.5px}\n  .coming-badge{top:5px;left:5px;padding:4px 5px;font-size:5.5px}\n\n  .booking-section{padding:43px 0 48px}\n  .booking-head{margin-bottom:14px}\n  .booking-head h2{font-size:27px}\n  .branch-tabs-wrap{margin:0 -12px;padding:8px 12px}\n  .branch-tabs{gap:5px}\n  .branch-tab{min-height:38px;padding:0 2px;font-size:9.5px}\n  .branch-panel{padding-top:15px}\n  .branch-title h3{font-size:18px}\n  .booking-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}\n  .booking-card{border-radius:11px}\n  .booking-image{aspect-ratio:4\/3}\n  .booking-label{top:6px;left:6px;padding:4px 5px;font-size:6px}\n  .booking-body{padding:10px}\n  .booking-body h4{min-height:32px;margin-bottom:7px;font-size:12px}\n  .price-block{gap:4px}\n  .price-row{display:block;padding:6px 7px;font-size:7.8px;line-height:1.4}\n  .price-row span,.price-row strong{display:block}\n  .price-row strong{font-size:9px}\n  .booking-btn{min-height:33px;margin-top:7px;font-size:9px}\n\n  .map-section{margin-top:28px}\n  .map-head{display:block;padding:13px}\n  .map-head span{display:block;margin-top:4px}\n  .map-canvas{min-height:220px}\n  .marker{width:17px;height:17px;border-width:3px}\n  .marker::after{top:20px;font-size:6px}\n\n  .why-section{padding:44px 0 48px}\n  .why-head h2{font-size:27px}\n  .why-slider{border-radius:15px}\n  .why-slide{display:flex;flex-direction:column;min-height:0}\n  .why-image{min-height:190px;aspect-ratio:16\/10}\n  .why-copy{min-height:230px;justify-content:flex-start;padding:24px 18px 62px}\n  .why-no{margin-bottom:11px;font-size:8px}\n  .why-copy h3{font-size:26px;letter-spacing:-1.4px}\n  .why-copy p{margin-top:12px;font-size:10px;line-height:1.65}\n  .why-controls{right:13px;bottom:13px}\n  .why-arrow{width:35px;height:35px}\n  .trust-bar{grid-template-columns:repeat(2,1fr)}\n  .trust-item{min-height:66px}\n  .trust-item:nth-child(2){border-right:0}\n  .trust-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}\n  .trust-item strong{font-size:16px}\n  .trust-item span{font-size:7px}\n}\n\n\/* \uc608\uc57d \uce74\ub4dc \ucd94\uac00 \uc555\ucd95 *\/\n.booking-card .price-row:only-child span{display:none}\n.booking-card .price-row:only-child{justify-content:flex-start}\n.booking-card .price-row:only-child strong{font-size:12px}\n@media(max-width:760px){\n  .booking-card .price-row:only-child strong{font-size:9.5px}\n}\n\n.branch-map-section{\n  padding:0 0 62px;\n  background:#fff;\n}\n.branch-map-section .map-section{margin-top:0}\n@media(max-width:760px){\n  .branch-map-section{padding-bottom:48px}\n}\n\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1cfd1a6a elementor-widget elementor-widget-html\" data-id=\"1cfd1a6a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- PART 01 : HERO -->\n\n<section class=\"hero\">\n    <div class=\"wrap\">\n      <div class=\"hero-main\">\n        <div class=\"hero-media-slide active\" style=\"background-image:url('https:\/\/cocorycolor.com\/wp-content\/uploads\/2025\/07\/\ub9c8\uc9c0\ub9c9\uc5d0-\uace0\uac1d\uc5d0\uac8c-\uacb0\uacfc\ub97c-\uc81c\uacf5\ud558\ub294-\ubc29\uc2dd\uc774-\ub9e4\uc6b0-\ub2e4\uc591\ud569\ub2c8\ub2e4-1.jpg')\"><\/div>\n        <div class=\"hero-media-slide\" style=\"background-image:url('https:\/\/cocorycolor.com\/wp-content\/uploads\/2025\/07\/IMG_6816_jpg-1-scaled.jpg')\"><\/div>\n        <div class=\"hero-media-slide\" style=\"background-image:url('https:\/\/cocorycolor.com\/wp-content\/uploads\/2025\/11\/1\uce35-\uc1fc\ub8f8-1-scaled.jpg')\"><\/div>\n        <div class=\"hero-media-slide\" style=\"background-image:url('https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ud37c\uceec_\uc694\uc18c\uccb4\ud06c.jpg')\"><\/div>\n\n        <div class=\"hero-content\">\n          <p class=\"eyebrow\">COCORY FACE \u00b7 COLOR \u00b7 STYLE ANALYSIS<\/p>\n          <h1>Rather than relying on intuition, I<span>use analysis<\/span>to find the criteria that suit<span>me<\/span>best.<\/h1>\n          <p class=\"hero-desc\">We design style guidelines based on individual data, ranging from Skin Color Measurement to Color Analysis, facial features, body type, and makeup.<\/p>\n          <div class=\"hero-actions\">\n            <a class=\"primary-btn\" href=\"#booking\">Book by Branch \u2193<\/a>\n            <a class=\"secondary-btn\" href=\"#programs\">View Programs<\/a>\n          <\/div>\n        <\/div>\n\n        <div class=\"hero-counter\"><span id=\"heroCurrent\">01<\/span><i><\/i><span>04<\/span><\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-79ea55d6 elementor-widget elementor-widget-html\" data-id=\"79ea55d6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- PART 02 : PROGRAM PREVIEW -->\n<section class=\"program-preview\" id=\"programs\">\n  <div class=\"wrap\">\n    <div class=\"preview-head\">\n      <div>\n        <p class=\"kicker\">COCORY PROGRAM<\/p>\n        <h2>Select a program to view it<\/h2>\n      <\/div>\n      <p>Tap the card to view the program description and analysis.<\/p>\n    <\/div>\n\n    <!--\n      \ud504\ub85c\uadf8\ub7a8 \uce74\ub4dc\uc758 \ubb38\uad6c\ub294 \uc774 HTML\uc5d0\uc11c \uc9c1\uc811 \uc218\uc815\ud569\ub2c8\ub2e4.\n      data-program \uac12\uc740 \uc544\ub798 \ud31d\uc5c5\uc758 data-program-panel \uac12\uacfc \uac19\uc544\uc57c \ud569\ub2c8\ub2e4.\n    -->\n    <div class=\"preview-grid\" id=\"previewGrid\" aria-label=\"\ucf54\ucf54\ub9ac \ud504\ub85c\uadf8\ub7a8 \ubaa9\ub85d\">\n      <button class=\"preview-card\" type=\"button\" data-program=\"color\" aria-label=\"\ud37c\uc2a4\ub110\uceec\ub7ec \uc790\uc138\ud788 \ubcf4\uae30\">\n        <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ud37c\uceec_\ub370\uc77c\ub9ac.jpg\" alt=\"COCORY Personal Color Analysis\" loading=\"lazy\">\n        <span class=\"preview-copy\">\n          <strong>Color Analysis<\/strong>\n          <small>Learn More +<\/small>\n        <\/span>\n      <\/button>\n\n      <button class=\"preview-card\" type=\"button\" data-program=\"balance\" aria-label=\"\ud37c\uc2a4\ub110\ubc38\ub7f0\uc2a4 \ub514\uc790\uc778 \uc790\uc138\ud788 \ubcf4\uae30\">\n        <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ucf54\ucf54\ub9ac\uceec\ub7ec-\ud64d\ub300-\uc5c5\uccb4\uc18c\uac1c\ud2b9\uc9d5-.jpg\" alt=\"COCORY Personal Balance Design\" loading=\"lazy\">\n        <span class=\"preview-copy\">\n          <strong>Personal Balance Design<\/strong>\n          <small>Learn More +<\/small>\n        <\/span>\n      <\/button>\n\n      <button class=\"preview-card\" type=\"button\" data-program=\"makeup\" aria-label=\"\uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4 \ub514\uc790\uc778 \uc790\uc138\ud788 \ubcf4\uae30\">\n        <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/08\/\ucee8\ud22c\uc5b4\ub9c1-\uac00\uc774\ub4dc.png\" alt=\"COCORY Makeup Balance Design\" loading=\"lazy\">\n        <span class=\"preview-copy\">\n          <strong>Makeup Balance Design<\/strong>\n          <small>Learn More +<\/small>\n        <\/span>\n      <\/button>\n\n      <button class=\"preview-card\" type=\"button\" data-program=\"facebody\" aria-label=\"\uc5bc\uad74 \ubc0f \uccb4\ud615 \ubd84\uc11d \uc790\uc138\ud788 \ubcf4\uae30\">\n        <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\uc5bc\uad74-\uc2e4\uce21-scaled.jpg\" alt=\"Body Shape Analysis of COCORY's Face\" loading=\"lazy\">\n        <span class=\"preview-copy\">\n          <strong>Face & Body Analysis<\/strong>\n          <small>View Details +<\/small>\n        <\/span>\n      <\/button>\n\n      <button class=\"preview-card\" type=\"button\" data-program=\"lesson\" aria-label=\"\uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4 \ub808\uc2a8 \uc790\uc138\ud788 \ubcf4\uae30\">\n        <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ucf54\ucf54\ub9ac\uceec\ub7ec-\uc5f0\ud76c\uc5c5\uccb4\uc18c\uac1c\ud2b9\uc9d5-.jpg\" alt=\"COCORY Makeup Balance Lesson\" loading=\"lazy\">\n        <span class=\"preview-copy\">\n          <strong>Makeup Balance Lesson<\/strong>\n          <small>Learn More +<\/small>\n        <\/span>\n      <\/button>\n\n    <button class=\"preview-card\" type=\"button\" data-program=\"colorPsychology\" aria-label=\"\uc131\uaca9\uceec\ub7ec \uc790\uc138\ud788 \ubcf4\uae30\">\n  <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\uc0c9\ucc44\uc2ec\ub9ac.jpg\" alt=\"COCORY's Personality Color\" loading=\"lazy\">\n  <span class=\"preview-copy\">\n    <strong>Personality Color<\/strong>\n    <small>Learn More +<\/small>\n  <\/span>\n<\/button>\n      <\/div>\n    <\/div>\n<\/section>\n\n<!-- \ud504\ub85c\uadf8\ub7a8 \uc0c1\uc138 \ubaa8\ub2ec -->\n<div class=\"modal\" id=\"programModal\" aria-hidden=\"true\">\n  <div class=\"modal-dialog\" role=\"dialog\" aria-modal=\"true\" aria-label=\"\ucf54\ucf54\ub9ac \ud504\ub85c\uadf8\ub7a8 \uc0c1\uc138 \uc548\ub0b4\">\n    <button class=\"modal-close\" type=\"button\" aria-label=\"\ub2eb\uae30\">\n      <span class=\"modal-close-icon\" aria-hidden=\"true\"><\/span>\n    <\/button>\n\n    <!-- \ud37c\uc2a4\ub110\uceec\ub7ec -->\n    <article class=\"modal-program-panel\" data-program-panel=\"color\" hidden=\"\">\n      <img decoding=\"async\" class=\"modal-image\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ud37c\uceec_\ub370\uc77c\ub9ac.jpg\" alt=\"COCORY Personal Color Analysis\">\n      <div class=\"modal-body\">\n        <p class=\"modal-kicker\">COCORY PROGRAM<\/p>\n        <h3>Color Analysis<\/h3>\n        <p class=\"modal-desc\">By objectively measuring skin tone and directly comparing various colors, we identify the shades and colors that blend most naturally with each individual\u2019s skin and overall appearance.<\/p>\n        <div class=\"modal-details\">\n          <strong class=\"modal-details-title\">What the program checks<\/strong>\n          <ul class=\"modal-detail-list\">\n            <li>Skin Color Measurement Using the CUBE Colorimeter<\/li>\n            <li>Comparison of Fashion Colors and Achromatic Draping<\/li>\n            <li>Suggestions for Color Palettes to Use in Outfits and Everyday Styling<\/li>\n          <\/ul>\n        <\/div>\n        <div class=\"modal-analysis\">\n          <strong>Analysis Details<\/strong>\n          <div class=\"modal-tags\">\n            <span>Skin Color Measurement<\/span><span>Draping Analysis<\/span><span>Daily Tone<\/span><span>Best Colors<\/span><span>Digital Color Card<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"modal-branches\">\n          <strong class=\"modal-branches-title\">Available Locations<\/strong>\n          <div class=\"modal-branch-list\" aria-label=\"\ud37c\uc2a4\ub110\uceec\ub7ec \uc774\uc6a9 \uac00\ub2a5 \uc9c0\uc810\">\n            <button class=\"modal-branch-chip\" type=\"button\" data-modal-branch=\"yeonhui\">Yeonhui Main Branch<\/button>\n            <button class=\"modal-branch-chip\" type=\"button\" data-modal-branch=\"gangnam\">Gangnam Branch<\/button>\n            <button class=\"modal-branch-chip\" type=\"button\" data-modal-branch=\"myeongdong\">Myeongdong Branch<\/button>\n            <button class=\"modal-branch-chip\" type=\"button\" data-modal-branch=\"hongdae\">Hongdae Branch<\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/article>\n\n    <!-- \ud37c\uc2a4\ub110\ubc38\ub7f0\uc2a4 \ub514\uc790\uc778 -->\n    <article class=\"modal-program-panel\" data-program-panel=\"balance\" hidden=\"\">\n      <img decoding=\"async\" class=\"modal-image\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ucf54\ucf54\ub9ac\uceec\ub7ec-\ud64d\ub300-\uc5c5\uccb4\uc18c\uac1c\ud2b9\uc9d5-.jpg\" alt=\"COCORY Personal Balance Design\">\n      <div class=\"modal-body\">\n        <p class=\"modal-kicker\">COCORY PROGRAM<\/p>\n        <h3>Personal Balance Design<\/h3>\n        <p class=\"modal-desc\">We take direct measurements of the face and body and perform Face Shape Analysis to determine the balance of facial shape, facial features, and body type, then design a style direction that naturally suits each individual.<\/p>\n        <div class=\"modal-details\">\n          <strong class=\"modal-details-title\">What the program checks<\/strong>\n          <ul class=\"modal-detail-list\">\n            <li>Face Measurements and Body Measurements and Proportion Analysis<\/li>\n            <li>Comparison of Hair, Eyewear, Accessories, Necklines, and Clothing Fit<\/li>\n            <li>Identifying the Optimal Balance Style Among the 15 COCORY Balance Styles<\/li>\n          <\/ul>\n        <\/div>\n        <div class=\"modal-analysis\">\n          <strong>Analysis Details<\/strong>\n          <div class=\"modal-tags\"><span>Face Balance<\/span><span>Facial Features Analysis<\/span><span>Body Shape Analysis<\/span><span>Style Recommendations<\/span><\/div>\n        <\/div>\n        <div class=\"modal-branches\">\n          <strong class=\"modal-branches-title\">Available Locations<\/strong>\n          <div class=\"modal-branch-list\" aria-label=\"\ud37c\uc2a4\ub110\ubc38\ub7f0\uc2a4 \ub514\uc790\uc778 \uc774\uc6a9 \uac00\ub2a5 \uc9c0\uc810\">\n            <button class=\"modal-branch-chip\" type=\"button\" data-modal-branch=\"yeonhui\">Yeonhui Main Branch<\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/article>\n\n    <!-- \uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4 \ub514\uc790\uc778 -->\n    <article class=\"modal-program-panel\" data-program-panel=\"makeup\" hidden=\"\">\n      <img decoding=\"async\" class=\"modal-image\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/08\/\ucee8\ud22c\uc5b4\ub9c1-\uac00\uc774\ub4dc.png\" alt=\"COCORY Makeup Balance Design\">\n      <div class=\"modal-body\">\n        <p class=\"modal-kicker\">COCORY PROGRAM<\/p>\n        <h3>Makeup Balance Design<\/h3>\n        <p class=\"modal-desc\">We analyze skin type, skin tone, and the lines and contours of the face and Facial Features, and then apply makeup that enhances each individual\u2019s unique personality and balance.<\/p>\n        <div class=\"modal-details\">\n          <strong class=\"modal-details-title\">What the program checks<\/strong>\n          <ul class=\"modal-detail-list\">\n            <li>Analysis of Skin Types and Foundation Formulas<\/li>\n            <li>Analysis of the Lines, Shapes, and Proportions of the Face and Facial Features to Determine Face Balance<\/li>\n            <li>Applying Balance Makeup that reflects the color scheme<\/li>\n          <\/ul>\n        <\/div>\n        <div class=\"modal-analysis\">\n          <strong>Analysis Details<\/strong>\n          <div class=\"modal-tags\"><span>Skin Type<\/span><span>Skin Tone<\/span><span>Facial Features Analysis<\/span><span>Balance Makeup<\/span><\/div>\n        <\/div>\n        <div class=\"modal-branches\">\n          <strong class=\"modal-branches-title\">Available Locations<\/strong>\n          <div class=\"modal-branch-list\" aria-label=\"\uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4 \ub514\uc790\uc778 \uc774\uc6a9 \uac00\ub2a5 \uc9c0\uc810\">\n            <button class=\"modal-branch-chip\" type=\"button\" data-modal-branch=\"yeonhui\">Yeonhui Main Store<\/button>\n            <button class=\"modal-branch-chip\" type=\"button\" data-modal-branch=\"myeongdong\">Myeongdong Branch<\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/article>\n\n    <!-- \uc5bc\uad74 & \uccb4\ud615 \ubd84\uc11d -->\n    <article class=\"modal-program-panel\" data-program-panel=\"facebody\" hidden=\"\">\n      <img decoding=\"async\" class=\"modal-image\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\uc5bc\uad74-\uc2e4\uce21-scaled.jpg\" alt=\"Body Shape Analysis of COCORY's Face\">\n      <div class=\"modal-body\">\n        <p class=\"modal-kicker\">COCORY PROGRAM<\/p>\n        <h3>Face & Body Analysis<\/h3>\n        <p class=\"modal-desc\">By measuring key areas of the face and body and analyzing their proportions, we provide guidelines for selecting everything from hairstyles and accessories to clothing silhouettes.<\/p>\n        <div class=\"modal-details\">\n          <strong class=\"modal-details-title\">What the program checks<\/strong>\n          <ul class=\"modal-detail-list\">\n            <li>Actual Measurements of Face Shape and Body Proportions<\/li>\n            <li>Analysis of Hair, Eyewear, Accessories, and Necklines<\/li>\n            <li>Recommendations for Top Fit and Bottom Fit for Your Body Type<\/li>\n          <\/ul>\n        <\/div>\n        <div class=\"modal-analysis\">\n          <strong>Analysis Details<\/strong>\n          <div class=\"modal-tags\"><span>Face Shape<\/span><span>Body Type<\/span><span>Hair<\/span><span>Glasses<\/span><span>Clothing Fit<\/span><\/div>\n        <\/div>\n        <div class=\"modal-branches\">\n          <strong class=\"modal-branches-title\">Available Locations<\/strong>\n          <div class=\"modal-branch-list\" aria-label=\"\uc5bc\uad74 \ubc0f \uccb4\ud615 \ubd84\uc11d \uc774\uc6a9 \uac00\ub2a5 \uc9c0\uc810\">\n            <button class=\"modal-branch-chip\" type=\"button\" data-modal-branch=\"gangnam\">Gangnam Branch<\/button>\n            <button class=\"modal-branch-chip\" type=\"button\" data-modal-branch=\"myeongdong\">Myeongdong Branch<\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/article>\n\n    <!-- \uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4 \ub808\uc2a8 -->\n    <article class=\"modal-program-panel\" data-program-panel=\"lesson\" hidden=\"\">\n      <img decoding=\"async\" class=\"modal-image\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ucf54\ucf54\ub9ac\uceec\ub7ec-\uc5f0\ud76c\uc5c5\uccb4\uc18c\uac1c\ud2b9\uc9d5-.jpg\" alt=\"COCORY Makeup Balance Lesson\">\n      <div class=\"modal-body\">\n        <p class=\"modal-kicker\">COCORY PROGRAM<\/p>\n        <h3>Makeup Balance Lesson<\/h3>\n        <p class=\"modal-desc\">Based on the results of your Makeup Balance analysis, you\u2019ll practice applying makeup that suits you and receive one-on-one instruction on how to use the products and tools.<\/p>\n        <div class=\"modal-details\">\n          <strong class=\"modal-details-title\">What the program checks<\/strong>\n          <ul class=\"modal-detail-list\">\n            <li>Review makeup recommendations based on your personal analysis results<\/li>\n            <li>Demonstration on one side of the face, followed by hands-on makeup practice<\/li>\n            <li>One-on-One Coaching on Product Selection and How to Use Brushes and Tools<\/li>\n          <\/ul>\n        <\/div>\n        <div class=\"modal-analysis\">\n          <strong>Analysis Details<\/strong>\n          <div class=\"modal-tags\"><span>Makeup Workshop<\/span><span>Product Application<\/span><span>One-on-One Coaching<\/span><\/div>\n        <\/div>\n        <div class=\"modal-branches\">\n          <strong class=\"modal-branches-title\">Available Locations<\/strong>\n          <div class=\"modal-branch-list\" aria-label=\"\uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4 \ub808\uc2a8 \uc774\uc6a9 \uac00\ub2a5 \uc9c0\uc810\">\n            <button class=\"modal-branch-chip\" type=\"button\" data-modal-branch=\"yeonhui\">Yeonhui Main Branch<\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/article>\n      <!-- \uc131\uaca9\uceec\ub7ec -->\n    <article class=\"modal-program-panel\" data-program-panel=\"colorPsychology\" hidden=\"\">\n      <img decoding=\"async\" class=\"modal-image\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\uc0c9\ucc44\uc2ec\ub9ac.jpg\" alt=\"COCORY's Personality Color\">\n\n      <div class=\"modal-body\">\n        <p class=\"modal-kicker\">COCORY PROGRAM<\/p>\n\n        <h3>Personality Color<\/h3>\n\n        <p class=\"modal-desc\">\n  Based on color psychology, this program helps you explore your personality and tendencies through the colors you choose and are drawn to\u2014\n \u2014and gain a deeper understanding of yourself.\n        <\/p>\n\n        <div class=\"modal-details\">\n          <strong class=\"modal-details-title\">\n  What the program checks\n          <\/strong>\n\n          <ul class=\"modal-detail-list\">\n            <li>Analysis of an Individual's Personality and Traits Through Color Selection<\/li>\n            <li>Understanding My Strengths, Behavioral Patterns, and Relationship Tendencies<\/li>\n            <li>Check Your Current Mental State and the Color Message You Need<\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"modal-analysis\">\n          <strong>Analysis Details<\/strong>\n\n          <div class=\"modal-tags\">\n            <span>Personality Analysis<\/span>\n            <span>Color Psychology<\/span>\n            <span>Color Messages<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"modal-branches\">\n          <strong class=\"modal-branches-title\">\n  Available Locations\n          <\/strong>\n\n          <div class=\"modal-branch-list\" aria-label=\"\uc131\uaca9\uceec\ub7ec \uc774\uc6a9 \uac00\ub2a5 \uc9c0\uc810\">\n            <button class=\"modal-branch-chip\" type=\"button\" data-modal-branch=\"yeonhui\">\n  Yeonhui Main Branch\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/article>\n\n  <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7142413f elementor-widget elementor-widget-html\" data-id=\"7142413f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- PART 03 : BRANCH SELECT + BOOKING CARDS -->\n<section class=\"booking-section\" id=\"booking\">\n  <div class=\"wrap booking-head\">\n    <p class=\"kicker\">SELECT YOUR BRANCH<\/p>\n    <h2>Please select a branch to visit<\/h2>\n  <\/div>\n\n  <div class=\"branch-tabs-wrap\">\n    <div class=\"wrap\">\n      <div class=\"branch-tabs\" role=\"tablist\" aria-label=\"\ucf54\ucf54\ub9ac \uc9c0\uc810 \uc120\ud0dd\">\n         <button type=\"button\" class=\"branch-tab active\" data-branch=\"yeonhui\" role=\"tab\" aria-selected=\"true\" aria-controls=\"yeonhui\">\n Yeonhui Main Branch\n       <\/button>\n\n        <button type=\"button\" class=\"branch-tab\" data-branch=\"gangnam\" role=\"tab\" aria-selected=\"false\" aria-controls=\"gangnam\">\n Gangnam Branch\n       <\/button>\n\n        <button type=\"button\" class=\"branch-tab\" data-branch=\"myeongdong\" role=\"tab\" aria-selected=\"false\" aria-controls=\"myeongdong\">\n Myeongdong Branch\n       <\/button>\n\n        <button type=\"button\" class=\"branch-tab\" data-branch=\"hongdae\" role=\"tab\" aria-selected=\"false\" aria-controls=\"hongdae\">\n Hongdae Branch\n       <\/button> \n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"wrap\">\n    <!-- \uc5f0\ud76c\ubcf8\uc810 -->\n    <div class=\"branch-panel active\" id=\"yeonhui\" role=\"tabpanel\">\n      <div class=\"branch-title\">\n        <h3>Yeonhui Main Branch<\/h3>\n        <a href=\"#branch-map\" data-map-link=\"\">Check the location on the map \u2193<\/a>\n      <\/div>\n\n      <div class=\"booking-grid\" data-booking-branch=\"yeonhui\">\n          \n          \n      <article class=\"booking-card\" data-booking-program=\"color\">\n        <div class=\"booking-image\">\n          <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ud37c\uceec_\ub370\uc77c\ub9ac.jpg\" alt=\"COCORY Personal Color Analysis\" loading=\"lazy\">\n        <\/div>\n\n        <div class=\"booking-body\">\n          <h4>Color Analysis<\/h4>\n          <div class=\"price-block\">\n          <div class=\"price-row\">\n            <span>Per person<\/span>\n            <strong>140,000 won \u00b7 60 minutes<\/strong>\n          <\/div>\n          <\/div>\n          <a class=\"booking-btn is-disabled\" href=\"#\" aria-disabled=\"true\">Make a Reservation<\/a>\n        <\/div>\n      <\/article>\n      \n      \n      <article class=\"booking-card\" data-booking-program=\"balance\">\n        <div class=\"booking-image\">\n          <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ucf54\ucf54\ub9ac\uceec\ub7ec-\ud64d\ub300-\uc5c5\uccb4\uc18c\uac1c\ud2b9\uc9d5-.jpg\" alt=\"COCORY Personal Balance Design\" loading=\"lazy\">\n        <\/div>\n\n        <div class=\"booking-body\">\n          <h4>Personal Balance Design<\/h4>\n          <div class=\"price-block\">\n          <div class=\"price-row\">\n            <span>Per person<\/span>\n            <strong>280,000 won \u00b7 90 minutes<\/strong>\n          <\/div>\n          <\/div>\n          <a class=\"booking-btn is-disabled\" href=\"#\" aria-disabled=\"true\">Make a Reservation<\/a>\n        <\/div>\n      <\/article>\n      \n      \n      <article class=\"booking-card\" data-booking-program=\"makeup\">\n        <div class=\"booking-image\">\n          <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/08\/\ucee8\ud22c\uc5b4\ub9c1-\uac00\uc774\ub4dc.png\" alt=\"COCORY Makeup Balance Design\" loading=\"lazy\">\n        <\/div>\n\n        <div class=\"booking-body\">\n          <h4>Makeup Balance Design<\/h4>\n          <div class=\"price-block\">\n          <div class=\"price-row\">\n            <span>Per person<\/span>\n            <strong>300,000 won \u00b7 90 minutes<\/strong>\n          <\/div>\n          <\/div>\n          <a class=\"booking-btn is-disabled\" href=\"#\" aria-disabled=\"true\">Make a Reservation<\/a>\n        <\/div>\n      <\/article>\n      \n      \n      <article class=\"booking-card\" data-booking-program=\"lesson\">\n        <div class=\"booking-image\">\n          <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ucf54\ucf54\ub9ac\uceec\ub7ec-\uc5f0\ud76c\uc5c5\uccb4\uc18c\uac1c\ud2b9\uc9d5-.jpg\" alt=\"COCORY Makeup Balance Lesson\" loading=\"lazy\">\n        <\/div>\n\n        <div class=\"booking-body\">\n          <h4>Makeup Balance Lesson<\/h4>\n          <div class=\"price-block\">\n          <div class=\"price-row\">\n            <span>Per person<\/span>\n            <strong>580,000 won \u00b7 150 minutes<\/strong>\n          <\/div>\n          <\/div>\n          <a class=\"booking-btn is-disabled\" href=\"#\" aria-disabled=\"true\">Make a Reservation<\/a>\n        <\/div>\n      <\/article>\n      \n      \n      <article class=\"booking-card\" data-booking-program=\"colorBalance\">\n        <div class=\"booking-image\">\n          <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/08\/\ud328\ud0a4\uc9c0-A-scaled.jpg\" alt=\"Color Analysis and Personal Balance Package\" loading=\"lazy\">\n        <\/div>\n\n        <div class=\"booking-body\">\n          <h4>Color Analysis + Personal Balance Design<br><\/h4>\n          <div class=\"price-block\">\n          <div class=\"price-row\">\n            <span>Per person<\/span>\n            <strong>420,000 won \u00b7 150 minutes<\/strong>\n          <\/div>\n          <\/div>\n          <a class=\"booking-btn is-disabled\" href=\"#\" aria-disabled=\"true\">Make a Reservation<\/a>\n        <\/div>\n      <\/article>\n      \n      \n      <article class=\"booking-card\" data-booking-program=\"colorMakeup\">\n        <div class=\"booking-image\">\n          <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/08\/\ud328\ud0a4\uc9c0-B-scaled.jpg\" alt=\"Color Analysis and Makeup Balance Package\" loading=\"lazy\">\n        <\/div>\n\n        <div class=\"booking-body\">\n          <h4>Color Analysis + Makeup Balance Design<br><\/h4>\n          <div class=\"price-block\">\n          <div class=\"price-row\">\n            <span>Per person<\/span>\n            <strong>440,000 won \u00b7 150 minutes<\/strong>\n          <\/div>\n          <\/div>\n          <a class=\"booking-btn is-disabled\" href=\"#\" aria-disabled=\"true\">Make a Reservation<\/a>\n        <\/div>\n      <\/article>\n      \n      \n      <article class=\"booking-card\" data-booking-program=\"premium\">\n        <div class=\"booking-image\">\n          <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ud504\ub9ac\ubbf8\uc5c4-\ud328\ud0a4\uc9c0-C.png\" alt=\"Color Analysis, Personal Balance, and Makeup Balance Package\" loading=\"lazy\">\n        <\/div>\n\n        <div class=\"booking-body\">\n          <h4>Color Analysis + Personal Balance Design + Makeup Balance Design<br><\/h4>\n          <div class=\"price-block\">\n          <div class=\"price-row\">\n            <span>Per person<\/span>\n            <strong>720,000 won \u00b7 240 minutes<\/strong>\n          <\/div>\n          <\/div>\n          <a class=\"booking-btn is-disabled\" href=\"#\" aria-disabled=\"true\">Make a Reservation<\/a>\n        <\/div>\n      <\/article>\n      \n      \n    <article class=\"booking-card\" data-booking-program=\"colorPsychology\">\n  <div class=\"booking-image\">\n\n    <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\uc0c9\ucc44\uc2ec\ub9ac.jpg\" alt=\"COCORY's Personality Color\" loading=\"lazy\">\n  <\/div>\n\n  <div class=\"booking-body\">\n    <h4>Personality Color<\/h4>\n\n    <div class=\"price-block\">\n      <div class=\"price-row\">\n        <span>Per person<\/span>\n        <strong>120,000 won \u00b7 50 minutes<\/strong>\n      <\/div>\n    <\/div>\n\n    <a class=\"booking-btn is-disabled\" href=\"#\" aria-disabled=\"true\">\n  Make a Reservation\n    <\/a>\n  <\/div>\n<\/article>\n\n\n      <\/div>\n    <\/div>\n\n    <!-- \uac15\ub0a8\uc810 -->\n    <div class=\"branch-panel\" id=\"gangnam\" role=\"tabpanel\" hidden=\"\">\n      <div class=\"branch-title\">\n        <h3>Gangnam Branch<\/h3>\n        <a href=\"#branch-map\" data-map-link=\"\">Check the location on the map \u2193<\/a>\n      <\/div>\n\n      <div class=\"booking-grid\" data-booking-branch=\"gangnam\">\n          \n          \n      <article class=\"booking-card\" data-booking-program=\"color\">\n        <div class=\"booking-image\">\n          <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ud37c\uceec_\ub370\uc77c\ub9ac.jpg\" alt=\"COCORY Personal Color Analysis\" loading=\"lazy\">\n        <\/div>\n\n        <div class=\"booking-body\">\n          <h4>Color Analysis<\/h4>\n          <div class=\"price-block\">\n          <div class=\"price-row\">\n            <span>Per person<\/span>\n            <strong>140,000 won \u00b7 60 minutes<\/strong>\n          <\/div>\n          <\/div>\n          <a class=\"booking-btn is-disabled\" href=\"#\" aria-disabled=\"true\">Make a Reservation<\/a>\n        <\/div>\n      <\/article>\n      \n      \n      <article class=\"booking-card\" data-booking-program=\"facebody\">\n        <div class=\"booking-image\">\n          <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\uc5bc\uad74-\uc2e4\uce21-scaled.jpg\" alt=\"Body Shape Analysis of COCORY's Face\" loading=\"lazy\">\n        <\/div>\n\n        <div class=\"booking-body\">\n          <h4>Face & Body Analysis<\/h4>\n          <div class=\"price-block\">\n          <div class=\"price-row\">\n            <span>Per person<\/span>\n            <strong>130,000 won \u00b7 50 minutes<\/strong>\n          <\/div>\n          <\/div>\n          <a class=\"booking-btn is-disabled\" href=\"#\" aria-disabled=\"true\">Make a Reservation<\/a>\n        <\/div>\n      <\/article>\n      \n      \n      <\/div>\n    <\/div>\n\n    <!-- \uba85\ub3d9\uc810 -->\n    <div class=\"branch-panel\" id=\"myeongdong\" role=\"tabpanel\" hidden=\"\">\n      <div class=\"branch-title\">\n        <h3>Myeongdong Branch<\/h3>\n        <a href=\"#branch-map\" data-map-link=\"\">Check the location on the map \u2193<\/a>\n      <\/div>\n\n      <div class=\"booking-grid\" data-booking-branch=\"myeongdong\">\n          \n          \n      <article class=\"booking-card\" data-booking-program=\"color\">\n        <div class=\"booking-image\">\n          <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ud37c\uceec_\ub370\uc77c\ub9ac.jpg\" alt=\"COCORY Personal Color Analysis\" loading=\"lazy\">\n        <\/div>\n\n        <div class=\"booking-body\">\n          <h4>Color Analysis<\/h4>\n          <div class=\"price-block\">\n          <div class=\"price-row\">\n            <span>Per person<\/span>\n            <strong>140,000 won \u00b7 60 minutes<\/strong>\n          <\/div>\n          <\/div>\n          <a class=\"booking-btn is-disabled\" href=\"#\" aria-disabled=\"true\">Make a Reservation<\/a>\n        <\/div>\n      <\/article>\n      \n      \n      \n      <article class=\"booking-card\" data-booking-program=\"facebody\">\n        <div class=\"booking-image\">\n          <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\uc5bc\uad74-\uc2e4\uce21-scaled.jpg\" alt=\"Body Shape Analysis of COCORY's Face\" loading=\"lazy\">\n        <\/div>\n\n        <div class=\"booking-body\">\n          <h4>Face & Body Analysis<\/h4>\n          <div class=\"price-block\">\n          <div class=\"price-row\">\n            <span>Per person<\/span>\n            <strong>130,000 won \u00b7 50 minutes<\/strong>\n          <\/div>\n          <\/div>\n          <a class=\"booking-btn is-disabled\" href=\"#\" aria-disabled=\"true\">Make a Reservation<\/a>\n        <\/div>\n      <\/article>\n      \n      \n      \n      <article class=\"booking-card\" data-booking-program=\"makeup\">\n        <div class=\"booking-image\">\n          <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/08\/\ucee8\ud22c\uc5b4\ub9c1-\uac00\uc774\ub4dc.png\" alt=\"COCORY Makeup Balance Design\" loading=\"lazy\">\n        <\/div>\n\n        <div class=\"booking-body\">\n          <h4>Makeup Balance Design<\/h4>\n          <div class=\"price-block\">\n          <div class=\"price-row\">\n            <span>Per person<\/span>\n            <strong>300,000 won \u00b7 90 minutes<\/strong>\n          <\/div>\n          <\/div>\n          <a class=\"booking-btn is-disabled\" href=\"#\" aria-disabled=\"true\">Make a Reservation<\/a>\n        <\/div>\n      <\/article>\n      \n      \n      <\/div>\n    <\/div>\n\n    <!-- \ud64d\ub300\uc810 -->\n    <div class=\"branch-panel\" id=\"hongdae\" role=\"tabpanel\" hidden=\"\">\n      <div class=\"branch-title\">\n        <h3>Hongdae Branch<\/h3>\n        <a href=\"#branch-map\" data-map-link=\"\">Check the location on the map \u2193<\/a>\n      <\/div>\n\n      <div class=\"booking-grid\" data-booking-branch=\"hongdae\">\n          \n          \n      <article class=\"booking-card\" data-booking-program=\"color\">\n        <div class=\"booking-image\">\n          <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ud37c\uceec_\ub370\uc77c\ub9ac.jpg\" alt=\"COCORY Personal Color Analysis\" loading=\"lazy\">\n        <\/div>\n\n        <div class=\"booking-body\">\n          <h4>Color Analysis<\/h4>\n          <div class=\"price-block\">\n          <div class=\"price-row\">\n            <span>Per person<\/span>\n            <strong>140,000 won \u00b7 60 minutes<\/strong>\n          <\/div>\n          <\/div>\n          <a class=\"booking-btn is-disabled\" href=\"#\" aria-disabled=\"true\">Make a Reservation<\/a>\n        <\/div>\n      <\/article>\n      \n      \n      <article class=\"booking-card\" data-booking-program=\"miniColor\">\n        <div class=\"booking-image\">\n          <img decoding=\"async\" src=\"https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ub370\uc77c\ub9ac\ud37c\uc2a4\ub110\uceec\ub7ec.jpg\" alt=\"COCORY Mini Color Analysis Coaching\" loading=\"lazy\">\n        <\/div>\n\n        <div class=\"booking-body\">\n          <h4>Mini Color Analysis<\/h4>\n          <div class=\"price-block\">\n          <div class=\"price-row\">\n            <span>Per person<\/span>\n            <strong>80,000 won \u00b7 30 minutes<\/strong>\n          <\/div>\n          <\/div>\n          <a class=\"booking-btn is-disabled\" href=\"#\" aria-disabled=\"true\">Make a Reservation<\/a>\n        <\/div>\n      <\/article>\n      \n\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2be11948 elementor-widget elementor-widget-html\" data-id=\"2be11948\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- PART 04 : ALL BRANCH MAP -->\n<section class=\"branch-map-section\">\n  <div class=\"wrap\">\n    <div class=\"map-section\" id=\"branch-map\">\n        <div class=\"map-box\">\n          <div class=\"map-head\"><strong>COCORY BRANCH MAP<\/strong><span>Check the locations of all four COCORY branches in Seoul at a glance.<\/span><\/div>\n          <\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-45fc9f2f elementor-widget elementor-widget-shortcode\" data-id=\"45fc9f2f\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style>\r\n\t#wpsl-stores .wpsl-store-thumb {height:45px !important; width:45px !important;}\r\n\t#wpsl-stores, #wpsl-direction-details, #wpsl-gmap {height:350px !important;}\r\n\t#wpsl-gmap .wpsl-info-window {max-width:225px !important;}\r\n\t.wpsl-input label, #wpsl-radius label, #wpsl-category label {width:95px;}\r\n\t#wpsl-search-input  {width:179px;}\r\n<\/style>\r\n<div id=\"wpsl-wrap\">\r\n\t<div class=\"wpsl-search wpsl-clearfix wpsl-no-filters\">\r\n\t\t<div id=\"wpsl-search-wrap\">\r\n\t\t\t<form autocomplete=\"off\">\r\n\t\t\t<div class=\"wpsl-input\">\r\n\t\t\t\t<div><label for=\"wpsl-search-input\">Your location<\/label><\/div>\r\n\t\t\t\t<input id=\"wpsl-search-input\" type=\"text\" value=\"\" name=\"wpsl-search-input\" placeholder=\"\" aria-required=\"true\" \/>\r\n\t\t\t<\/div>\r\n\t\t\t\t<div class=\"wpsl-search-btn-wrap\"><input id=\"wpsl-search-btn\" type=\"submit\" value=\"Search\"><\/div>\r\n\t\t<\/form>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\t<div id=\"wpsl-gmap\" class=\"wpsl-gmap-canvas\"><\/div>\r\n\t<div id=\"wpsl-result-list\">\r\n\t\t<div id=\"wpsl-stores\" >\r\n\t\t\t<ul><\/ul>\r\n\t\t<\/div>\r\n\t\t<div id=\"wpsl-direction-details\">\r\n\t\t\t<ul><\/ul>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div>\r\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-273943a6 elementor-widget elementor-widget-html\" data-id=\"273943a6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- PART 05 : WHY COCORY + FOOTER -->\n\n<div class=\"why-controls\">\n  <div class=\"why-dots\">\n    <button class=\"why-dot active\" type=\"button\" aria-label=\"\uccab \ubc88\uc9f8 \uc2ac\ub77c\uc774\ub4dc\"><\/button>\n\n    <button class=\"why-dot\" type=\"button\" aria-label=\"\ub450 \ubc88\uc9f8 \uc2ac\ub77c\uc774\ub4dc\"><\/button>\n\n    <button class=\"why-dot\" type=\"button\" aria-label=\"\uc138 \ubc88\uc9f8 \uc2ac\ub77c\uc774\ub4dc\"><\/button>\n\n    <button class=\"why-dot\" type=\"button\" aria-label=\"\ub124 \ubc88\uc9f8 \uc2ac\ub77c\uc774\ub4dc\"><\/button>\n  <\/div>\n\n  <button class=\"why-arrow why-prev\" type=\"button\" aria-label=\"\uc774\uc804 \uc2ac\ub77c\uc774\ub4dc\">\n  \u2190\n  <\/button>\n\n  <button class=\"why-arrow why-next\" type=\"button\" aria-label=\"\ub2e4\uc74c \uc2ac\ub77c\uc774\ub4dc\">\n  \u2192\n  <\/button>\n<\/div>\n\n<section class=\"why-section\" id=\"why\">\n    <div class=\"wrap\">\n      <div class=\"why-head\">\n        <p class=\"kicker\">WHY COCORY<\/p>\n        <h2>Why You Should Get Your Analysis Done at COCORY<\/h2>\n      <\/div>\n\n      <div class=\"why-slider\" id=\"whySlider\">\n        <div class=\"why-track\">\n          <article class=\"why-slide\">\n            <div class=\"why-image\" style=\"background-image:url('https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ud53c\ubd80-\uce21\uc0c9.jpg')\"><\/div>\n            <div class=\"why-copy\">\n              <div class=\"why-no\">WHY COCORY \u00b7 01<\/div>\n              <h3>We don't judge skin color based solely on what we see at<br\/><\/h3>\n              <p>Use the CUBE Colorimeter to measure skin tone and establish an objective analysis standard that isn't based solely on visual perception.<\/p>\n            <\/div>\n          <\/article>\n          <article class=\"why-slide\">\n            <div class=\"why-image\" style=\"background-image:url('https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ud37c\uc2a4\ub110\uceec\ub7ec\uc5d0-\ub9de\ub294-\ud328\uc158-\uceec\ub7ec-\uc870\ud569.jpg')\"><\/div>\n            <div class=\"why-copy\">\n              <div class=\"why-no\">WHY COCORY \u00b7 02<\/div>\n              <h3><br\/>\u2014it doesn't end with Color Analysis<\/h3>\n              <p>We propose a comprehensive style guide tailored to each individual by considering not only color but also facial features, body type, and Makeup Colors.<\/p>\n            <\/div>\n          <\/article>\n          <article class=\"why-slide\">\n            <div class=\"why-image\" style=\"background-image:url('https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ud398\uc774\uc2a4-\ubc38\ub7f0\uc2a4-\uc9c4\ub2e8.jpg')\"><\/div>\n            <div class=\"why-copy\">\n              <div class=\"why-no\">WHY COCORY \u00b7 03<\/div>\n              <h3>COCORY's<br\/>CCCCS Analysis System<\/h3>\n              <p>Based on numerous case studies and data, we design styles according to clear criteria rather than mere intuition or trends.<\/p>\n            <\/div>\n          <\/article>\n          <article class=\"why-slide\">\n            <div class=\"why-image\" style=\"background-image:url('https:\/\/cocorycolor.com\/wp-content\/uploads\/2025\/07\/\ub9c8\uc9c0\ub9c9\uc5d0-\uace0\uac1d\uc5d0\uac8c-\uacb0\uacfc\ub97c-\uc81c\uacf5\ud558\ub294-\ubc29\uc2dd\uc774-\ub9e4\uc6b0-\ub2e4\uc591\ud569\ub2c8\ub2e4-1.jpg')\"><\/div>\n            <div class=\"why-copy\">\n              <div class=\"why-no\">WHY COCORY \u00b7 04<\/div>\n              <h3>We provide specific guidance on everything from analysis to post-analysis utilization<br\/><\/h3>\n              <p>It doesn't end with just hearing the results; we help you apply them directly to your daily life through Digital Results and style guides.<\/p>\n            <\/div>\n          <\/article>\n        <\/div>\n\n        <div class=\"why-controls\">\n          <div class=\"why-dots\">\n            <button class=\"why-dot active\"><\/button>\n            <button class=\"why-dot\"><\/button>\n            <button class=\"why-dot\"><\/button>\n            <button class=\"why-dot\"><\/button>\n          <\/div>\n          <button class=\"why-arrow why-prev\">\u2190<\/button>\n          <button class=\"why-arrow why-next\">\u2192<\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"trust-bar\">\n        <div class=\"trust-item\"><strong>110+<\/strong><span>COUNTRIES<\/span><\/div>\n        <div class=\"trust-item\"><strong>100,000+<\/strong><span>CLIENT ANALYSES<\/span><\/div>\n        <div class=\"trust-item\"><strong>PATENT<\/strong><span>ANALYSIS SYSTEM<\/span><\/div>\n        <div class=\"trust-item\"><strong>CUBE<\/strong><span>COLORIMETER DATA<\/span><\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3496a6d2 elementor-widget elementor-widget-html\" data-id=\"3496a6d2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =====================================================\nPART 06 : COMMON SCRIPT\n\ud398\uc774\uc9c0 \uac00\uc7a5 \uc544\ub798 HTML \uc704\uc82f\uc5d0 1\ud68c\ub9cc \uc785\ub825\n===================================================== -->\n\n<script>\n(() => {\n\n  'use strict';\n\n\n  \/* ==================================================\n     01. \ud504\ub85c\uadf8\ub7a8 \uc774\ubbf8\uc9c0 \uad00\ub9ac\n\n     \uc774\uacf3\uc758 \uc774\ubbf8\uc9c0 URL\uc744 \ubcc0\uacbd\ud558\uba74 \uc544\ub798 \uc601\uc5ed\uc5d0\n     \ub3d9\uc77c\ud55c \uc774\ubbf8\uc9c0\uac00 \uc790\ub3d9\uc73c\ub85c \ubc18\uc601\ub429\ub2c8\ub2e4.\n\n     \u00b7 \ud504\ub85c\uadf8\ub7a8 \ud504\ub9ac\ubdf0\n     \u00b7 \ud504\ub85c\uadf8\ub7a8 \ud31d\uc5c5\n     \u00b7 \uc9c0\uc810\ubcc4 \uc608\uc57d \uce74\ub4dc\n  ================================================== *\/\n\n  const images = {\n\n    color:\n      'https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ud37c\uceec_\ub370\uc77c\ub9ac.jpg',\n\n    miniColor:\n      'https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ub370\uc77c\ub9ac\ud37c\uc2a4\ub110\uceec\ub7ec.jpg',\n\n    balance:\n      'https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ucf54\ucf54\ub9ac\uceec\ub7ec-\ud64d\ub300-\uc5c5\uccb4\uc18c\uac1c\ud2b9\uc9d5-.jpg',\n\n    makeup:\n      'https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/08\/\ucee8\ud22c\uc5b4\ub9c1-\uac00\uc774\ub4dc.png',\n\n    facebody:\n      'https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\uc5bc\uad74-\uc2e4\uce21-scaled.jpg',\n\n    lesson:\n      'https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ucf54\ucf54\ub9ac\uceec\ub7ec-\uc5f0\ud76c\uc5c5\uccb4\uc18c\uac1c\ud2b9\uc9d5-.jpg',\n\n    colorBalance:\n      'https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ud504\ub9ac\ubbf8\uc5c4-\ud328\ud0a4\uc9c0-A_1.png',\n\n    colorMakeup:\n      'https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ud504\ub9ac\ubbf8\uc5c4-\ud328\ud0a4\uc9c0-B.jpg',\n\n    premium:\n      'https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\ud504\ub9ac\ubbf8\uc5c4-\ud328\ud0a4\uc9c0-C.png',\n\n    colorPsychology:\n      'https:\/\/cocorycolor.com\/wp-content\/uploads\/2026\/07\/\uc0c9\ucc44\uc2ec\ub9ac.jpg'\n\n  };\n\n\n  \/* ==================================================\n     02. \uc9c0\uc810\u00b7\uc5b8\uc5b4\ubcc4 WooCommerce \uc0c1\ud488 ID\n\n     \ud654\uba74 \ubb38\uad6c\ub294 HTML\uacfc WPML\uc774 \ub2f4\ub2f9\ud569\ub2c8\ub2e4.\n     \uc774 \ub370\uc774\ud130\ub294 \uc608\uc57d \ubc84\ud2bc\uc758 \ub9c1\ud06c\ub9cc \uc5f0\uacb0\ud569\ub2c8\ub2e4.\n  ================================================== *\/\n\n  const bookingProductIds = {\n\n    yeonhui: {\n      color: { ko: 27696, en: 27795, zh: 32695 },\n      lesson: { ko: 177, en: 578, zh: 823 },\n      colorBalance: { ko: 10635, en: 12829, zh: 12831 },\n      colorMakeup: { ko: 12837, en: 12840, zh: 12839 },\n      premium: { ko: 13173, en: 13188, zh: 13187 },\n      balance: { ko: 13210, en: 13220, zh: 13219 },\n      makeup: { ko: 21799, en: 21881, zh: 21882 },\n      colorPsychology: { ko: 16795, en: null, zh: null }\n    },\n\n    gangnam: {\n      color: { ko: 27698, en: 27802, zh: 32700 },\n      facebody: { ko: 27503, en: 28003, zh: 32710 }\n    },\n\n    myeongdong: {\n      color: { ko: 23862, en: 23966, zh: 24090 },\n      facebody: { ko: 25785, en: 25792, zh: 25788 },\n      makeup: { ko: 30155, en: 30376, zh: 32726 }\n    },\n\n    hongdae: {\n      color: { ko: 24040, en: 24060, zh: 24115 },\n      miniColor: { ko: 176, en: 580, zh: 822 },\n    }\n\n  };\n\n\n  function getCurrentBookingLanguage() {\n\n    const path =\n      window.location.pathname.toLowerCase();\n\n    const htmlLanguage =\n      (document.documentElement.lang || '')\n        .toLowerCase();\n\n    if (\n      path === '\/zh-hans' ||\n      path.startsWith('\/zh-hans\/') ||\n      htmlLanguage.startsWith('zh')\n    ) {\n      return 'zh';\n    }\n\n    if (\n      path === '\/en' ||\n      path.startsWith('\/en\/') ||\n      htmlLanguage.startsWith('en')\n    ) {\n      return 'en';\n    }\n\n    return 'ko';\n\n  }\n\n\n  function getBookingLanguageRoot(language) {\n\n    if (language === 'en') {\n      return '\/en\/';\n    }\n\n    if (language === 'zh') {\n      return '\/zh-hans\/';\n    }\n\n    return '\/';\n\n  }\n\n\n  function initBookingProductLinks() {\n\n    const language =\n      getCurrentBookingLanguage();\n\n    const languageRoot =\n      getBookingLanguageRoot(language);\n\n    document\n      .querySelectorAll('[data-booking-branch]')\n      .forEach(grid => {\n\n        const branchKey =\n          grid.dataset.bookingBranch;\n\n        grid\n          .querySelectorAll('[data-booking-program]')\n          .forEach(card => {\n\n            const programKey =\n              card.dataset.bookingProgram;\n\n            const bookingButton =\n              card.querySelector('.booking-btn');\n\n            if (!bookingButton) {\n              return;\n            }\n\n            const productId =\n              bookingProductIds\n                [branchKey]\n                ?.[programKey]\n                ?.[language];\n\n            if (\n              !Number.isInteger(productId) ||\n              productId <= 0\n            ) {\n              bookingButton.href = '#';\n              bookingButton.classList.add('is-disabled');\n              bookingButton.setAttribute(\n                'aria-disabled',\n                'true'\n              );\n              return;\n            }\n\n            bookingButton.href =\n              `${languageRoot}?cocory_product_id=${productId}`;\n              \n            bookingButton.classList.remove('is-disabled');\n            bookingButton.removeAttribute('aria-disabled');\n\n          });\n\n      });\n\n  }\n\n\n  \/* ==================================================\n     04. \ud504\ub85c\uadf8\ub7a8 \uacf5\ud1b5 \uc815\ubcf4\n\n     \ud504\ub85c\uadf8\ub7a8\ubcc4 \uacf5\ud1b5 \uc815\ubcf4\ub97c \ud55c \ubc88\ub9cc \ub4f1\ub85d\ud569\ub2c8\ub2e4.\n\n     \u00b7 \ud504\ub85c\uadf8\ub7a8\uba85\n     \u00b7 \uc601\ubb38 \ub77c\ubca8\n     \u00b7 \uc774\ubbf8\uc9c0\n     \u00b7 \uac00\uaca9\n     \u00b7 \uc2dc\uac04\n     \u00b7 \uc124\uba85\n     \u00b7 \ubd84\uc11d \ud0dc\uadf8\n\n     \uc608\uc57d URL\uc740 HTML \uce74\ub4dc\uc640 bookingProductIds\uc5d0\uc11c \uad00\ub9ac\ud569\ub2c8\ub2e4.\n  ================================================== *\/\n\n  const programs = {\n\n\n    \/* ------------------------------\n       \ud37c\uc2a4\ub110\uceec\ub7ec\n    ------------------------------ *\/\n\n    color: {\n\n      title:\n        '\ud37c\uc2a4\ub110\uceec\ub7ec',\n\n      label:\n        'PERSONAL COLOR',\n\n      image:\n        images.color,\n\n      alt:\n        '\ucf54\ucf54\ub9ac \ud37c\uc2a4\ub110\uceec\ub7ec \ubd84\uc11d',\n\n      prices: [\n        {\n          name:\n            '1\uc778',\n\n          detail:\n            '140,000\uc6d0 \u00b7 60\ubd84'\n        }\n      ],\n\n      desc:\n        '\ud53c\ubd80\uc0c9\uc744 \uac1d\uad00\uc801\uc73c\ub85c \uce21\uc815\ud558\uace0 \ub2e4\uc591\ud55c \uceec\ub7ec\ub97c \uc9c1\uc811 \ube44\uad50\ud558\uc5ec, \uac1c\uc778\uc758 \ud53c\ubd80\uc640 \uc774\ubbf8\uc9c0\uc5d0 \uac00\uc7a5 \uc790\uc5f0\uc2a4\ub7fd\uac8c \uc870\ud654\ub418\ub294 \ud1a4\uacfc \uceec\ub7ec\ub97c \ucc3e\uc2b5\ub2c8\ub2e4.',\n\n      details: [\n        'Colorimeter CUBE\ub97c \ud65c\uc6a9\ud55c \ud53c\ubd80\uc0c9 \uce21\uc815',\n        '\ud328\uc158 \uceec\ub7ec\uc640 \ubb34\ucc44\uc0c9 \ub4dc\ub808\uc774\ud551 \ube44\uad50',\n        '\uc758\uc0c1\uacfc \uc77c\uc0c1 \uc2a4\ud0c0\uc77c\ub9c1\uc5d0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uceec\ub7ec \uae30\uc900 \uc81c\uc548'\n      ],\n\n      tags: [\n        '\ud53c\ubd80 \uce21\uc0c9',\n        '\ub4dc\ub808\uc774\ud551 \ubd84\uc11d',\n        '\ub370\uc77c\ub9ac \ud1a4',\n        '\ubca0\uc2a4\ud2b8 \uceec\ub7ec',\n        '\ub514\uc9c0\ud138 \uceec\ub7ec \uce74\ub4dc'\n      ]\n\n    },\n\n\n    \/* ------------------------------\n       \ubbf8\ub2c8 \ud37c\uc2a4\ub110\uceec\ub7ec\n    ------------------------------ *\/\n\n    miniColor: {\n\n      title:\n        '\ubbf8\ub2c8 \ud37c\uc2a4\ub110\uceec\ub7ec',\n\n      label:\n        'MINI PERSONAL COLOR',\n\n      image:\n        images.miniColor,\n\n      alt:\n        '\ucf54\ucf54\ub9ac \ubbf8\ub2c8 \ud37c\uc2a4\ub110\uceec\ub7ec \ucf54\uce6d',\n\n      prices: [\n        {\n          name:\n            '1\uc778',\n\n          detail:\n            '80,000\uc6d0 \u00b7 30\ubd84'\n        }\n      ],\n\n      desc:\n        'CCCS \ubd84\uc11d \uc2dc\uc2a4\ud15c\uc744 \uae30\ubc18\uc73c\ub85c \ud53c\ubd80\uc0c9\uacfc \uac1c\uc778\uc758 \ud575\uc2ec \uc694\uc18c\ub97c \ud655\uc778\ud558\uace0, \ud328\uc158 \uceec\ub7ec \ub4dc\ub808\uc774\ud551\uc744 \ud1b5\ud574 \uc77c\uc0c1\uc5d0\uc11c \ud65c\uc6a9\ud558\uae30 \uc88b\uc740 \ub370\uc77c\ub9ac \ud1a4\uacfc \ubca0\uc2a4\ud2b8 \uceec\ub7ec\ub97c \ucc3e\ub294 \ud64d\ub300\uc810 \uc804\uc6a9 \ud504\ub85c\uadf8\ub7a8\uc785\ub2c8\ub2e4.',\n\n      details: [\n        'Colorimeter CUBE\ub97c \ud65c\uc6a9\ud55c \ud53c\ubd80\uc0c9 \uce21\uc815',\n        '\ud328\uc158 \uceec\ub7ec \ub4dc\ub808\uc774\ud551\uc744 \ud1b5\ud55c \ub370\uc77c\ub9ac \ud1a4\uacfc \ubca0\uc2a4\ud2b8 \uceec\ub7ec \ud655\uc778',\n        '\uc0c1\ub2f4 \ud6c4 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \ub514\uc9c0\ud138 \uceec\ub7ec \uce74\ub4dc \uc81c\uacf5'\n      ],\n\n      tags: [\n        '\ud64d\ub300\uc810 \uc804\uc6a9',\n        '\ud53c\ubd80 \uce21\uc0c9',\n        'Colorimeter CUBE',\n        '\uc2dc\uc98c \ud1a4',\n        '\ubb34\ucc44\uc0c9',\n        '\ub514\uc9c0\ud138 \uceec\ub7ec \uce74\ub4dc'\n      ]\n\n    },\n\n\n    \/* ------------------------------\n       \ud37c\uc2a4\ub110\ubc38\ub7f0\uc2a4\ub514\uc790\uc778\n    ------------------------------ *\/\n\n    balance: {\n\n      title:\n        '\ud37c\uc2a4\ub110\ubc38\ub7f0\uc2a4 \ub514\uc790\uc778',\n\n      label:\n        'BALANCE DESIGN',\n\n      image:\n        images.balance,\n\n      alt:\n        '\ucf54\ucf54\ub9ac \ud37c\uc2a4\ub110\ubc38\ub7f0\uc2a4\ub514\uc790\uc778',\n\n      prices: [\n        {\n          name:\n            '1\uc778',\n\n          detail:\n            '280,000\uc6d0 \u00b7 90\ubd84'\n        }\n      ],\n\n      desc:\n        '\uc5bc\uad74\uacfc \uc2e0\uccb4\ub97c \uc9c1\uc811 \uce21\uc815\ud558\uace0 \uc5bc\uad74\ud615\u00b7\uc774\ubaa9\uad6c\ube44\u00b7\uccb4\ud615\uc758 \uade0\ud615\uc744 \ubd84\uc11d\ud558\uc5ec, \uac1c\uc778\uc5d0\uac8c \uc790\uc5f0\uc2a4\ub7fd\uac8c \uc5b4\uc6b8\ub9ac\ub294 \uc2a4\ud0c0\uc77c \ubc29\ud5a5\uc744 \uc124\uacc4\ud569\ub2c8\ub2e4.',\n\n      details: [\n        '\uc5bc\uad74\uacfc \uc2e0\uccb4 \uc2e4\uce21 \ubc0f \ube44\uc728 \ubd84\uc11d',\n        '\ud5e4\uc5b4\u00b7\uc548\uacbd\u00b7\uc561\uc138\uc11c\ub9ac\u00b7\ub124\ud06c\ub77c\uc778\u00b7\uc758\uc0c1 \ud54f \ube44\uad50',\n        '15\uac00\uc9c0 COCORY \ubc38\ub7f0\uc2a4 \uc2a4\ud0c0\uc77c \uc911 \ucd5c\uc801 \uc2a4\ud0c0\uc77c \ub3c4\ucd9c'\n      ],\n\n      tags: [\n        '\uc5bc\uad74 \ubc38\ub7f0\uc2a4',\n        '\uc774\ubaa9\uad6c\ube44 \ubd84\uc11d',\n        '\uccb4\ud615 \ubd84\uc11d',\n        '\uc2a4\ud0c0\uc77c \uc81c\uc548'\n      ]\n\n    },\n\n\n    \/* ------------------------------\n       \uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4\ub514\uc790\uc778\n    ------------------------------ *\/\n\n    makeup: {\n\n      title:\n        '\uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4 \ub514\uc790\uc778',\n\n      label:\n        'MAKEUP DESIGN',\n\n      image:\n        images.makeup,\n\n      alt:\n        '\ucf54\ucf54\ub9ac \uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4\ub514\uc790\uc778',\n\n      prices: [\n        {\n          name:\n            '1\uc778',\n\n          detail:\n            '300,000\uc6d0 \u00b7 90\ubd84'\n        }\n      ],\n\n      desc:\n        '\ud53c\ubd80 \ud0c0\uc785\uacfc \ud53c\ubd80 \uceec\ub7ec, \uc5bc\uad74\uacfc \uc774\ubaa9\uad6c\ube44\uc758 \uc120\uacfc \ud615\ud0dc\ub97c \ubd84\uc11d\ud558\uace0, \uac1c\uc778\uc758 \uac1c\uc131\uacfc \uade0\ud615\uc744 \uc0b4\ub9ac\ub294 \uba54\uc774\ud06c\uc5c5\uc744 \uc2e4\uc81c\ub85c \uc801\uc6a9\ud569\ub2c8\ub2e4.',\n\n      details: [\n        '\ud53c\ubd80 \ud0c0\uc785\uacfc \ud30c\uc6b4\ub370\uc774\uc158 \uc81c\ud615 \ubd84\uc11d',\n        '\uc5bc\uad74\u00b7\uc774\ubaa9\uad6c\ube44\uc758 \uc120\uacfc \ud615\ud0dc \ubc0f \ud398\uc774\uc2a4 \ubc38\ub7f0\uc2a4 \ubd84\uc11d',\n        '\uceec\ub7ec \uc2a4\ud0b4\uc744 \ubc18\uc601\ud55c \ubc38\ub7f0\uc2a4 \uba54\uc774\ud06c\uc5c5 \uc9c4\ud589'\n      ],\n\n      tags: [\n        '\ud53c\ubd80 \ud0c0\uc785',\n        '\ud53c\ubd80 \uceec\ub7ec',\n        '\uc774\ubaa9\uad6c\ube44 \ubd84\uc11d',\n        '\ubc38\ub7f0\uc2a4 \uba54\uc774\ud06c\uc5c5'\n      ]\n\n    },\n\n\n    \/* ------------------------------\n       \uc5bc\uad74 & \uccb4\ud615 \ubd84\uc11d\n    ------------------------------ *\/\n\n    facebody: {\n\n      title:\n        '\uc5bc\uad74 & \uccb4\ud615 \ubd84\uc11d',\n\n      label:\n        'FACE & BODY',\n\n      image:\n        images.facebody,\n\n      alt:\n        '\ucf54\ucf54\ub9ac \uc5bc\uad74 \ubc0f \uccb4\ud615 \ubd84\uc11d',\n\n      prices: [\n        {\n          name:\n            '1\uc778',\n\n          detail:\n            '130,000\uc6d0 \u00b7 50\ubd84'\n        }\n      ],\n\n      desc:\n        '\uc5bc\uad74\uacfc \uccb4\ud615\uc758 \uc8fc\uc694 \ubd80\uc704\ub97c \uce21\uc815\ud558\uace0 \ube44\uc728\uc744 \ubd84\uc11d\ud558\uc5ec, \ud5e4\uc5b4\uc640 \uc561\uc138\uc11c\ub9ac\ubd80\ud130 \uc758\uc0c1 \uc2e4\ub8e8\uc5e3\uae4c\uc9c0 \uc120\ud0dd\ud560 \uc218 \uc788\ub294 \uae30\uc900\uc744 \uc81c\uc548\ud569\ub2c8\ub2e4.',\n\n      details: [\n        '\uc5bc\uad74\ud615\uacfc \uc2e0\uccb4 \ube44\uc728 \uc2e4\uce21',\n        '\ud5e4\uc5b4\u00b7\uc548\uacbd\u00b7\uc561\uc138\uc11c\ub9ac\u00b7\ub124\ud06c\ub77c\uc778 \ubd84\uc11d',\n        '\uccb4\ud615\uc5d0 \uc801\ud569\ud55c \uc0c1\uc758\uc640 \ud558\uc758 \ud54f \uc81c\uc548'\n      ],\n\n      tags: [\n        '\uc5bc\uad74\ud615',\n        '\uccb4\ud615',\n        '\ud5e4\uc5b4',\n        '\uc548\uacbd',\n        '\uc758\uc0c1 \ud54f'\n      ]\n\n    },\n\n\n    \/* ------------------------------\n       \uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4 \ub808\uc2a8\n    ------------------------------ *\/\n\n    lesson: {\n\n      title:\n        '\uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4 \ub808\uc2a8',\n\n      label:\n        'MAKEUP LESSON',\n\n      image:\n        images.lesson,\n\n      alt:\n        '\ucf54\ucf54\ub9ac \uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4 \ub808\uc2a8',\n\n      prices: [\n        {\n          name:\n            '1\uc778',\n\n          detail:\n            '580,000\uc6d0 \u00b7 150\ubd84'\n        }\n      ],\n\n      desc:\n        '\uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4 \ubd84\uc11d \uacb0\uacfc\ub97c \ubc14\ud0d5\uc73c\ub85c \uc790\uc2e0\uc5d0\uac8c \uc5b4\uc6b8\ub9ac\ub294 \uba54\uc774\ud06c\uc5c5\uc744 \uc9c1\uc811 \uc5f0\uc2b5\ud558\uace0, \uc81c\ud488\uacfc \ub3c4\uad6c\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc744 1:1\ub85c \ubc30\uc6c1\ub2c8\ub2e4.',\n\n      details: [\n        '\uac1c\uc778 \ubd84\uc11d \uacb0\uacfc\ub97c \ubc18\uc601\ud55c \uba54\uc774\ud06c\uc5c5 \ubc29\ud5a5 \ud655\uc778',\n        '\ud55c\ucabd \uc5bc\uad74 \uc2dc\uc5f0 \ud6c4 \uc9c1\uc811 \uba54\uc774\ud06c\uc5c5 \uc2e4\uc2b5',\n        '\uc81c\ud488 \uc120\ud0dd\uacfc \ube0c\ub7ec\uc2dc\u00b7\ub3c4\uad6c \uc0ac\uc6a9\ubc95 1:1 \ucf54\uce6d'\n      ],\n\n      tags: [\n        '\uba54\uc774\ud06c\uc5c5 \uc2e4\uc2b5',\n        '\uc81c\ud488 \uc0ac\uc6a9',\n        '1:1 \ucf54\uce6d'\n      ]\n\n    },\n\n\n    \/* ------------------------------\n       \uceec\ub7ec + \ud37c\uc2a4\ub110\ubc38\ub7f0\uc2a4\n    ------------------------------ *\/\n\n    colorBalance: {\n\n      title:\n        '\ud504\ub9ac\ubbf8\uc5c4 \ud328\ud0a4\uc9c0 A<br\/>(\ud37c\uc2a4\ub110\uceec\ub7ec + \ud37c\uc2a4\ub110\ubc38\ub7f0\uc2a4 \ub514\uc790\uc778)',\n\n      label:\n        'PACKAGE',\n\n      image:\n        images.colorBalance,\n\n      alt:\n        '\ud37c\uc2a4\ub110\uceec\ub7ec\uc640 \ud37c\uc2a4\ub110\ubc38\ub7f0\uc2a4 \ud328\ud0a4\uc9c0',\n\n      prices: [\n        {\n          name:\n            '1\uc778',\n\n          detail:\n            '420,000\uc6d0 \u00b7 150\ubd84'\n        }\n      ],\n\n      desc:\n        '\ud37c\uc2a4\ub110\uceec\ub7ec\uc640 \ud37c\uc2a4\ub110\ubc38\ub7f0\uc2a4\ub514\uc790\uc778\uc758 \uc804\uccb4 \uacfc\uc815\uc744 \ud568\uaed8 \uc9c4\ud589\ud558\uc5ec, \uc5b4\uc6b8\ub9ac\ub294 \uceec\ub7ec\ubd80\ud130 \uc5bc\uad74\u00b7\uccb4\ud615\uc5d0 \ub9de\ub294 \uc2a4\ud0c0\uc77c\ub9c1\uae4c\uc9c0 \ud558\ub098\uc758 \uae30\uc900\uc73c\ub85c \uc5f0\uacb0\ud569\ub2c8\ub2e4.',\n\n      details: [\n        '\ud53c\ubd80 \uce21\uc0c9\uacfc \uceec\ub7ec \ub4dc\ub808\uc774\ud551\uc744 \ud1b5\ud55c \ud37c\uc2a4\ub110\uceec\ub7ec \ubd84\uc11d',\n        '\uc5bc\uad74\u00b7\uc774\ubaa9\uad6c\ube44\u00b7\uccb4\ud615 \uc2e4\uce21\uacfc \ubc38\ub7f0\uc2a4 \ubd84\uc11d',\n        '\uceec\ub7ec\uc640 \uc2a4\ud0c0\uc77c\uc744 \uc5f0\uacb0\ud55c \ud1b5\ud569 \uc774\ubbf8\uc9c0 \ubc29\ud5a5 \uc81c\uc548'\n      ],\n\n      tags: [\n        '\ud37c\uc2a4\ub110\uceec\ub7ec',\n        '\uc5bc\uad74 \ubd84\uc11d',\n        '\uccb4\ud615 \ubd84\uc11d',\n        '\ud1b5\ud569 \uc2a4\ud0c0\uc77c\ub9c1'\n      ]\n\n    },\n\n\n    \/* ------------------------------\n       \uceec\ub7ec + \uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4\n    ------------------------------ *\/\n\n    colorMakeup: {\n\n      title:\n        '\ud504\ub9ac\ubbf8\uc5c4 \ud328\ud0a4\uc9c0 B<br\/>(\ud37c\uc2a4\ub110\uceec\ub7ec + \uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4 \ub514\uc790\uc778)',\n\n      label:\n        'PACKAGE',\n\n      image:\n        images.colorMakeup,\n\n      alt:\n        '\ud37c\uc2a4\ub110\uceec\ub7ec\uc640 \uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4 \ud328\ud0a4\uc9c0',\n\n      prices: [\n        {\n          name:\n            '1\uc778',\n\n          detail:\n            '440,000\uc6d0 \u00b7 150\ubd84'\n        }\n      ],\n\n      desc:\n        '\ud37c\uc2a4\ub110\uceec\ub7ec\uc640 \uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4\ub514\uc790\uc778\uc758 \uc804\uccb4 \uacfc\uc815\uc744 \ud568\uaed8 \uc9c4\ud589\ud558\uc5ec, \uc5b4\uc6b8\ub9ac\ub294 \uceec\ub7ec\ub97c \ud53c\ubd80\uc640 \uc5bc\uad74\uc758 \ud2b9\uc131\uc5d0 \ub9de\ub294 \uba54\uc774\ud06c\uc5c5\uc73c\ub85c \uc5f0\uacb0\ud569\ub2c8\ub2e4.',\n\n      details: [\n        '\ud53c\ubd80 \uce21\uc0c9\uacfc \uceec\ub7ec \ub4dc\ub808\uc774\ud551\uc744 \ud1b5\ud55c \ud37c\uc2a4\ub110\uceec\ub7ec \ubd84\uc11d',\n        '\ud53c\ubd80 \ud0c0\uc785\u00b7\ud53c\ubd80 \uceec\ub7ec\u00b7\uc774\ubaa9\uad6c\ube44 \ubc38\ub7f0\uc2a4 \ubd84\uc11d',\n        '\uceec\ub7ec \uc2a4\ud0b4\uc744 \ubc18\uc601\ud55c \ubc38\ub7f0\uc2a4 \uba54\uc774\ud06c\uc5c5 \uc801\uc6a9'\n      ],\n\n      tags: [\n        '\ud37c\uc2a4\ub110\uceec\ub7ec',\n        '\ud53c\ubd80 \uc9c4\ub2e8',\n        '\uc774\ubaa9\uad6c\ube44 \ubd84\uc11d',\n        '\uba54\uc774\ud06c\uc5c5 \uc81c\uc548'\n      ]\n\n    },\n\n\n    \/* ------------------------------\n       \ud1b5\ud569 \ud504\ub9ac\ubbf8\uc5c4 \ud328\ud0a4\uc9c0\n    ------------------------------ *\/\n\n    premium: {\n\n      title:\n        '\ud504\ub9ac\ubbf8\uc5c4 \ud328\ud0a4\uc9c0 C<br\/>(\ud37c\uc2a4\ub110\uceec\ub7ec + \ud37c\uc2a4\ub110\ubc38\ub7f0\uc2a4 \ub514\uc790\uc778 + \uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4 \ub514\uc790\uc778)',\n\n      label:\n        'PACKAGE',\n\n      image:\n        images.premium,\n\n      alt:\n        '\ud37c\uc2a4\ub110\uceec\ub7ec \ud37c\uc2a4\ub110\ubc38\ub7f0\uc2a4 \uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4 \ud328\ud0a4\uc9c0',\n\n      prices: [\n        {\n          name:\n            '1\uc778',\n\n          detail:\n            '720,000\uc6d0 \u00b7 240\ubd84'\n        }\n      ],\n\n      desc:\n        '\ud37c\uc2a4\ub110\uceec\ub7ec, \ud37c\uc2a4\ub110\ubc38\ub7f0\uc2a4\ub514\uc790\uc778, \uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4\ub514\uc790\uc778\uc744 \ubaa8\ub450 \uc9c4\ud589\ud558\uc5ec \uceec\ub7ec\u00b7\uc2a4\ud0c0\uc77c\u00b7\uba54\uc774\ud06c\uc5c5\uc744 \ud1b5\ud569\uc801\uc73c\ub85c \uc124\uacc4\ud569\ub2c8\ub2e4.',\n\n      details: [\n        '\ud37c\uc2a4\ub110\uceec\ub7ec\uc640 \ud53c\ubd80 \uceec\ub7ec \ubd84\uc11d',\n        '\uc5bc\uad74\u00b7\uc774\ubaa9\uad6c\ube44\u00b7\uccb4\ud615\uacfc \uc2a4\ud0c0\uc77c \ubc38\ub7f0\uc2a4 \ubd84\uc11d',\n        '\uba54\uc774\ud06c\uc5c5 \uc801\uc6a9\uacfc \uc804\uccb4 \uc774\ubbf8\uc9c0 \uc2a4\ud0c0\uc77c\ub9c1 \ubc29\ud5a5 \uc81c\uc548'\n      ],\n\n      tags: [\n        '\ud37c\uc2a4\ub110\uceec\ub7ec',\n        '\uc5bc\uad74 \ubc0f \uccb4\ud615',\n        '\uba54\uc774\ud06c\uc5c5\ubc38\ub7f0\uc2a4',\n        '\ud1b5\ud569 \uc774\ubbf8\uc9c0 \uc124\uacc4'\n      ]\n\n    },\n\n\/* ------------------------------\n   \uc131\uaca9\uceec\ub7ec\n------------------------------ *\/\n\ncolorPsychology: {\n\n  title:\n    '\uc131\uaca9\uceec\ub7ec',\n\n  label:\n    'COLOR PSYCHOLOGY',\n\n  image:\n    images.colorPsychology,\n\n  alt:\n    '\ucf54\ucf54\ub9ac \uc131\uaca9\uceec\ub7ec',\n\n  prices: [\n    {\n      name:\n        '1\uc778',\n\n      detail:\n        '120,000\uc6d0 \u00b7 50\ubd84'\n    }\n  ],\n\n  desc:\n    '\uc0c9\ucc44\uc2ec\ub9ac\ub97c \ubc14\ud0d5\uc73c\ub85c \ub0b4\uac00 \uc120\ud0dd\ud558\uace0 \ub04c\ub9ac\ub294 \uceec\ub7ec\ub97c \ud1b5\ud574 \uc790\uc2e0\uc758 \uc131\uaca9\uacfc \uc131\ud5a5\uc744 \uc54c\uc544\ubcf4\uace0, \ub098\ub97c \ubcf4\ub2e4 \uae4a\uc774 \uc774\ud574\ud558\ub294 \ud504\ub85c\uadf8\ub7a8\uc785\ub2c8\ub2e4.',\n\n  details: [\n    '\uceec\ub7ec \uc120\ud0dd\uc744 \ud1b5\ud55c \uac1c\uc778\uc758 \uc131\uaca9\uacfc \uc131\ud5a5 \ubd84\uc11d',\n    '\ub098\uc758 \uac15\uc810\uacfc \ud589\ub3d9 \ud328\ud134, \uad00\uacc4 \uc131\ud5a5 \uc774\ud574',\n    '\ud604\uc7ac\uc758 \uc2ec\ub9ac \uc0c1\ud0dc\uc640 \ud544\uc694\ud55c \uceec\ub7ec \uba54\uc2dc\uc9c0 \ud655\uc778'\n  ],\n\n  tags: [\n    '\uc131\uaca9 \ubd84\uc11d',\n    '\uc0c9\ucc44\uc2ec\ub9ac',\n    '\uceec\ub7ec \uba54\uc2dc\uc9c0'\n  ]\n\n}\n\n}; \n\n\n  \/* ==================================================\n     06. \uc9c0\uc810\ubcc4 \ud504\ub85c\uadf8\ub7a8 \ub178\ucd9c \uad00\ub9ac\n\n     \uac01 \uc9c0\uc810\uc5d0 \ud45c\uc2dc\ud560 \ud504\ub85c\uadf8\ub7a8\uacfc \uce74\ub4dc \uc21c\uc11c\ub97c\n     \uc544\ub798 \ubc30\uc5f4\uc5d0\uc11c \uad00\ub9ac\ud569\ub2c8\ub2e4.\n  ================================================== *\/\n\n  const branchNames = {\n    yeonhui: '\uc5f0\ud76c\ubcf8\uc810',\n    gangnam: '\uac15\ub0a8\uc810',\n    myeongdong: '\uba85\ub3d9\uc810',\n    hongdae: '\ud64d\ub300\uc810'\n  };\n\n\nconst branchPrograms = {\n\n  yeonhui: [\n    'color',\n    'balance',\n    'makeup',\n    'lesson',\n    'colorBalance',\n    'colorMakeup',\n    'premium',\n    'colorPsychology'\n  ],\n\n  gangnam: [\n    'color',\n    'facebody'\n  ],\n\n  myeongdong: [\n    'color',\n    'facebody',\n    'makeup'\n  ],\n\n  hongdae: [\n    'color',\n    'miniColor'\n  ]\n\n};\n\n\n  function getAvailableBranches(programKey) {\n\n    return Object.entries(branchPrograms)\n      .filter(([, programKeys]) =>\n        programKeys.includes(programKey)\n      )\n      .map(([branchKey]) => ({\n        key: branchKey,\n        name: branchNames[branchKey] || branchKey\n      }));\n\n  }\n\n\n\n  \/* ==================================================\n     08. \uc608\uc57d \uce74\ub4dc \uc790\ub3d9 \uc0dd\uc131\n  ================================================== *\/\n\n  function createPriceRows(prices = []) {\n\n    return prices\n      .map(price => `\n        <div class=\"price-row\">\n\n          <span>\n            ${price.name}\n          <\/span>\n\n          <strong>\n            ${price.detail}\n          <\/strong>\n\n        <\/div>\n      `)\n      .join('');\n\n  }\n\n\n  function createBookingCard(\n    branchKey,\n    programKey\n  ) {\n\n    const program =\n      programs[programKey];\n\n    if (!program) {\n\n      console.warn(\n        `[COCORY] \ub4f1\ub85d\ub418\uc9c0 \uc54a\uc740 \uc608\uc57d \ud504\ub85c\uadf8\ub7a8\uc785\ub2c8\ub2e4: ${programKey}`\n      );\n\n      return '';\n\n    }\n\n\n    const baseBookingPath =\n      branchLinks[branchKey]?.[programKey] || '#';\n\n\n    const bookingUrl =\n      createLocalizedUrl(baseBookingPath);\n\n\n    const isLinkMissing =\n      !baseBookingPath ||\n      baseBookingPath === '#';\n\n\n    return `\n      <article class=\"booking-card\">\n\n        <div class=\"booking-image\">\n\n          <span class=\"booking-label\">\n            ${program.label}\n          <\/span>\n\n          <img decoding=\"async\" src=\"${program.image}\" alt=\"${program.alt || program.title}\" loading=\"lazy\">\n\n        <\/div>\n\n\n        <div class=\"booking-body\">\n\n          <h4>\n            ${program.title}\n          <\/h4>\n\n          <div class=\"price-block\">\n            ${createPriceRows(program.prices)}\n          <\/div>\n\n          <a class=\"booking-btn${isLinkMissing ? ' is-disabled' : ''}\" href=\"${bookingUrl}\" ${isLinkMissing ? 'aria-disabled=\"true\"' : ''}>\n            \uc608\uc57d\ud558\uae30\n          <\/a>\n\n        <\/div>\n\n      <\/article>\n    `;\n\n  }\n\n\n  function renderBookingCards() {\n\n    \/*\n     * \uc608\uc57d \uce74\ub4dc\ub294 \uc5b8\uc5b4\ubcc4 HTML\uc744 \uadf8\ub300\ub85c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.\n     * JavaScript\ub85c \ub2e4\uc2dc \uc0dd\uc131\ud558\uba74 WPML \ubc88\uc5ed\uc744 \ub36e\uc5b4\uc4f0\ubbc0\ub85c\n     * \uc774 \ud568\uc218\ub294 \uc758\ub3c4\uc801\uc73c\ub85c \uc544\ubb34 \uc791\uc5c5\ub3c4 \ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.\n     *\/\n    return;\n\n    const bookingGrids =\n      document.querySelectorAll(\n        '[data-booking-branch]'\n      );\n\n\n    bookingGrids.forEach(grid => {\n\n      const branchKey =\n        grid.dataset.bookingBranch;\n\n\n      const programKeys =\n        branchPrograms[branchKey] || [];\n\n\n      grid.innerHTML =\n        programKeys\n          .map(programKey =>\n            createBookingCard(\n              branchKey,\n              programKey\n            )\n          )\n          .join('');\n\n    });\n\n  }\n\n\n  \/* ==================================================\n     09. URL \ubbf8\uc785\ub825 \uc608\uc57d \ubc84\ud2bc \ud074\ub9ad \ubc29\uc9c0\n  ================================================== *\/\n\n  function initDisabledBookingLinks() {\n\n    document.addEventListener(\n      'click',\n      event => {\n\n        const disabledButton =\n          event.target.closest(\n            '.booking-btn[aria-disabled=\"true\"]'\n          );\n\n\n        if (!disabledButton) {\n          return;\n        }\n\n\n        event.preventDefault();\n\n      }\n    );\n\n  }\n\n\n  \/* ==================================================\n     10. HERO \uc2ac\ub77c\uc774\ub354\n  ================================================== *\/\n\n  function initHeroSlider() {\n\n    const heroSlides = [\n      ...document.querySelectorAll(\n        '.hero-media-slide'\n      )\n    ];\n\n\n    const heroCurrent =\n      document.getElementById(\n        'heroCurrent'\n      );\n\n\n    if (heroSlides.length < 2) {\n      return;\n    }\n\n\n    let heroIndex = 0;\n\n\n    setInterval(() => {\n\n      heroSlides[heroIndex]\n        .classList.remove('active');\n\n\n      heroIndex =\n        (heroIndex + 1) %\n        heroSlides.length;\n\n\n      heroSlides[heroIndex]\n        .classList.add('active');\n\n\n      if (heroCurrent) {\n\n        heroCurrent.textContent =\n          String(heroIndex + 1)\n            .padStart(2, '0');\n\n      }\n\n    }, 5000);\n\n  }\n\n\n\n\n\n  \/* ==================================================\n     11-1. HTML \uae30\ubc18 \ud504\ub85c\uadf8\ub7a8 \uc18c\uac1c \ud31d\uc5c5\n\n     \ud504\ub85c\uadf8\ub7a8 \ubb38\uad6c\uc640 \uc9c0\uc810 \ubc84\ud2bc\uc740 PART 02 HTML\uc5d0\uc11c\n     \uc9c1\uc811 \uad00\ub9ac\ud558\uace0, \uc774 \uc2a4\ud06c\ub9bd\ud2b8\ub294 \uc5f4\uae30\u00b7\ub2eb\uae30\uc640\n     \uc9c0\uc810 \uc774\ub3d9 \ub3d9\uc791\ub9cc \ub2f4\ub2f9\ud569\ub2c8\ub2e4.\n  ================================================== *\/\n\n  function initProgramModal() {\n\n    const modal =\n      document.getElementById('programModal');\n\n    if (!modal) {\n      return;\n    }\n\n    \/*\n     * Elementor \ucee8\ud14c\uc774\ub108\uc758 stacking context\uc5d0\uc11c \ubaa8\ub2ec\uc744 \ubd84\ub9ac\ud569\ub2c8\ub2e4.\n     * \ud5e4\ub354\uac00 \ubaa8\ub2ec \uc704\ub97c \ub36e\uc5b4 \uc774\ubbf8\uc9c0 \uc0c1\ub2e8\uacfc \ub2eb\uae30 \ubc84\ud2bc\uc774 \uac00\ub824\uc9c0\ub294 \ubb38\uc81c\ub97c \ubc29\uc9c0\ud569\ub2c8\ub2e4.\n     *\/\n    if (modal.parentElement !== document.body) {\n      document.body.appendChild(modal);\n    }\n\n    const modalClose =\n      modal.querySelector('.modal-close');\n\n    const panels = [\n      ...modal.querySelectorAll('[data-program-panel]')\n    ];\n\n    let lastFocusedElement = null;\n\n\n    function openModal(programKey) {\n\n      const selectedPanel =\n        panels.find(panel =>\n          panel.dataset.programPanel === programKey\n        );\n\n      if (!selectedPanel) {\n        return;\n      }\n\n      lastFocusedElement =\n        document.activeElement;\n\n      panels.forEach(panel => {\n        panel.hidden =\n          panel !== selectedPanel;\n      });\n\n      modal.classList.add('open');\n      modal.setAttribute('aria-hidden', 'false');\n      document.body.style.overflow = 'hidden';\n\n      const selectedBody =\n        selectedPanel.querySelector('.modal-body');\n\n      if (selectedBody) {\n        selectedBody.scrollTop = 0;\n      }\n\n      if (modalClose) {\n        window.setTimeout(\n          () => modalClose.focus(),\n          0\n        );\n      }\n\n    }\n\n\n    function closeModal() {\n\n      modal.classList.remove('open');\n      modal.setAttribute('aria-hidden', 'true');\n      document.body.style.overflow = '';\n\n      panels.forEach(panel => {\n        panel.hidden = true;\n      });\n\n      if (\n        lastFocusedElement &&\n        typeof lastFocusedElement.focus === 'function'\n      ) {\n        lastFocusedElement.focus();\n      }\n\n    }\n\n\n    document\n      .querySelectorAll(\n        '.preview-card[data-program]:not(.coming)'\n      )\n      .forEach(card => {\n\n        card.addEventListener('click', () => {\n          openModal(card.dataset.program);\n        });\n\n      });\n\n\n    if (modalClose) {\n      modalClose.addEventListener('click', closeModal);\n    }\n\n\n    modal.addEventListener('click', event => {\n\nconst branchButton =\n  event.target.closest('[data-modal-branch]');\n\nif (branchButton) {\n\n  const branchKey =\n    branchButton.dataset.modalBranch;\n\n  \/*\n   * \ud604\uc7ac \uc5f4\ub824 \uc788\ub294 \ud504\ub85c\uadf8\ub7a8 \ud328\ub110 \ud655\uc778\n   * \uc608: color \/ balance \/ makeup \/ facebody \/ lesson\n   *\/\n  const activePanel =\n    branchButton.closest('[data-program-panel]');\n\n  const programKey =\n    activePanel?.dataset.programPanel;\n\n  if (!branchKey || !programKey) {\n    return;\n  }\n\n\n  \/*\n   * \ud604\uc7ac \ud398\uc774\uc9c0 \uc5b8\uc5b4 \ud655\uc778\n   * ko \/ en \/ zh\n   *\/\n  const language =\n    getCurrentBookingLanguage();\n\n\n  \/*\n   * \uc9c0\uc810 + \ud504\ub85c\uadf8\ub7a8 + \uc5b8\uc5b4\uc5d0 \ub9de\ub294\n   * WooCommerce \uc0c1\ud488 ID \uac00\uc838\uc624\uae30\n   *\/\n  const productId =\n    bookingProductIds\n      [branchKey]\n      ?.[programKey]\n      ?.[language];\n\n\n  \/*\n   * \uc0c1\ud488 ID\uac00 \uc5c6\ub294 \uacbd\uc6b0 \uc774\ub3d9\ud558\uc9c0 \uc54a\uc74c\n   *\/\n  if (\n    !Number.isInteger(productId) ||\n    productId <= 0\n  ) {\n\n    console.warn(\n      `[COCORY] \uc608\uc57d \uc0c1\ud488 ID\uac00 \uc5c6\uc2b5\ub2c8\ub2e4: ${branchKey} \/ ${programKey} \/ ${language}`\n    );\n\n    return;\n  }\n\n\n  \/*\n   * \ud604\uc7ac \uc5b8\uc5b4\uc758 \uc0ac\uc774\ud2b8 \ub8e8\ud2b8 \uc0dd\uc131\n   *\n   * \ud55c\uad6d\uc5b4 \/\n   * \uc601\uc5b4   \/en\/\n   * \uc911\uad6d\uc5b4 \/zh-hans\/\n   *\/\n  const languageRoot =\n    getBookingLanguageRoot(language);\n\n\n  \/*\n   * \uc608\uc57d \uc0c1\ud488\uc73c\ub85c \ubc14\ub85c \uc774\ub3d9\n   *\/\n  window.location.href =\n    `${languageRoot}?cocory_product_id=${productId}`;\n\n  return;\n}\n\n      if (event.target === modal) {\n        closeModal();\n      }\n\n    });\n\n\n    document.addEventListener('keydown', event => {\n\n      if (\n        event.key === 'Escape' &&\n        modal.classList.contains('open')\n      ) {\n        closeModal();\n      }\n\n    });\n\n  }\n\n\n\n\n  \/* ==================================================\n     12. \uc9c0\uc810 \uc120\ud0dd \ud0ed\n  ================================================== *\/\n\n  function initBranchTabs() {\n\n    const tabs = [\n      ...document.querySelectorAll(\n        '.branch-tab[data-branch]'\n      )\n    ];\n\n\n    const panels = [\n      ...document.querySelectorAll(\n        '.branch-panel'\n      )\n    ];\n\n\n    if (\n      !tabs.length ||\n      !panels.length\n    ) {\n      return;\n    }\n\n\n    function selectBranch(branchKey) {\n\n      tabs.forEach(tab => {\n\n        const isActive =\n          tab.dataset.branch === branchKey;\n\n\n        tab.classList.toggle(\n          'active',\n          isActive\n        );\n\n\n        tab.setAttribute(\n          'aria-selected',\n          String(isActive)\n        );\n\n\n        tab.setAttribute(\n          'tabindex',\n          isActive ? '0' : '-1'\n        );\n\n      });\n\n\n      panels.forEach(panel => {\n\n        const isActive =\n          panel.id === branchKey;\n\n\n        panel.classList.toggle(\n          'active',\n          isActive\n        );\n\n\n        panel.hidden =\n          !isActive;\n\n      });\n\n    }\n\n\n    tabs.forEach(\n      (tab, tabIndex) => {\n\n\n        tab.addEventListener(\n          'click',\n          () => {\n\n            selectBranch(\n              tab.dataset.branch\n            );\n\n          }\n        );\n\n\n        tab.addEventListener(\n          'keydown',\n          event => {\n\n            if (\n              event.key !== 'ArrowLeft' &&\n              event.key !== 'ArrowRight'\n            ) {\n              return;\n            }\n\n\n            event.preventDefault();\n\n\n            const move =\n              event.key === 'ArrowRight'\n                ? 1\n                : -1;\n\n\n            const nextIndex =\n              (\n                tabIndex +\n                move +\n                tabs.length\n              ) % tabs.length;\n\n\n            tabs[nextIndex].focus();\n\n\n            selectBranch(\n              tabs[nextIndex].dataset.branch\n            );\n\n          }\n        );\n\n      }\n    );\n\n\n    const initialTab =\n      tabs.find(tab =>\n        tab.classList.contains('active')\n      ) || tabs[0];\n\n\n    selectBranch(\n      initialTab.dataset.branch\n    );\n\n  }\n\n\n\/* ==================================================\n   13. WHY COCORY \uc2ac\ub77c\uc774\ub354\n   \uc5d8\ub9ac\uba58\ud130 \uc7ac\ub80c\ub354\ub9c1 \ub300\uc751 \ubc84\uc804\n================================================== *\/\n\nfunction initWhySlider() {\n  const whySlider =\n    document.getElementById('whySlider');\n\n  if (!whySlider) {\n    return;\n  }\n\n  \/*\n   \uc774\ubbf8 \ucd08\uae30\ud654\ub41c \ud604\uc7ac \uc694\uc18c\ub77c\uba74 \uc911\ubcf5 \uc2e4\ud589\ud558\uc9c0 \uc54a\uc74c\n  *\/\n  if (whySlider.dataset.sliderInitialized === 'true') {\n    return;\n  }\n\n  whySlider.dataset.sliderInitialized = 'true';\n\n  const whyTrack =\n    whySlider.querySelector('.why-track');\n\n  const whySlides = [\n    ...whySlider.querySelectorAll('.why-slide')\n  ];\n\n  const whyDots = [\n    ...whySlider.querySelectorAll('.why-dot')\n  ];\n\n  const whyPrev =\n    whySlider.querySelector('.why-prev');\n\n  const whyNext =\n    whySlider.querySelector('.why-next');\n\n  if (!whyTrack || !whySlides.length) {\n    return;\n  }\n\n  let whyIndex = 0;\n  let whyTimer = null;\n  let touchStart = 0;\n\n\n  function renderWhy() {\n    whyTrack.style.transform =\n      `translate3d(-${whyIndex * 100}%, 0, 0)`;\n\n    whyDots.forEach((dot, index) => {\n      const isActive =\n        index === whyIndex;\n\n      dot.classList.toggle(\n        'active',\n        isActive\n      );\n\n      dot.setAttribute(\n        'aria-current',\n        isActive ? 'true' : 'false'\n      );\n    });\n  }\n\n\n  function moveWhy(step) {\n    whyIndex =\n      (\n        whyIndex +\n        step +\n        whySlides.length\n      ) % whySlides.length;\n\n    renderWhy();\n  }\n\n\n  function stopWhy() {\n    if (whyTimer) {\n      clearInterval(whyTimer);\n      whyTimer = null;\n    }\n  }\n\n\n  function startWhy() {\n    stopWhy();\n\n    if (whySlides.length < 2) {\n      return;\n    }\n\n    whyTimer = window.setInterval(() => {\n      moveWhy(1);\n    }, 5000);\n  }\n\n\n  if (whyPrev) {\n    whyPrev.addEventListener('click', () => {\n      moveWhy(-1);\n      startWhy();\n    });\n  }\n\n\n  if (whyNext) {\n    whyNext.addEventListener('click', () => {\n      moveWhy(1);\n      startWhy();\n    });\n  }\n\n\n  whyDots.forEach((dot, index) => {\n    dot.addEventListener('click', () => {\n      whyIndex = index;\n      renderWhy();\n      startWhy();\n    });\n  });\n\n\n  whySlider.addEventListener(\n    'touchstart',\n    event => {\n      touchStart =\n        event.changedTouches[0].clientX;\n\n      stopWhy();\n    },\n    {\n      passive: true\n    }\n  );\n\n\n  whySlider.addEventListener(\n    'touchend',\n    event => {\n      const touchEnd =\n        event.changedTouches[0].clientX;\n\n      const diff =\n        touchEnd - touchStart;\n\n      if (Math.abs(diff) > 45) {\n        moveWhy(\n          diff > 0 ? -1 : 1\n        );\n      }\n\n      startWhy();\n    },\n    {\n      passive: true\n    }\n  );\n\n\n  whySlider.addEventListener(\n    'mouseenter',\n    stopWhy\n  );\n\n\n  whySlider.addEventListener(\n    'mouseleave',\n    startWhy\n  );\n\n\n  document.addEventListener(\n    'visibilitychange',\n    () => {\n      if (document.hidden) {\n        stopWhy();\n      } else {\n        startWhy();\n      }\n    }\n  );\n\n\n  renderWhy();\n  startWhy();\n}\n\n\n  \/* ==================================================\n     14. \uc804\uccb4 \uae30\ub2a5 \uc2e4\ud589\n\n     \ud504\ub9ac\ubdf0 \uce74\ub4dc\ub97c \uba3c\uc800 \uc0dd\uc131\ud55c \ub2e4\uc74c\n     \ud31d\uc5c5 \ud074\ub9ad \uae30\ub2a5\uc744 \uc5f0\uacb0\ud574\uc57c \ud569\ub2c8\ub2e4.\n  ================================================== *\/\n\n  function initPage() {\n\n    initBookingProductLinks();\n\n    initDisabledBookingLinks();\n\n    initHeroSlider();\n\n    initProgramModal();\n\n    initBranchTabs();\n\n    initWhySlider();\n\n  }\n\n\n  if (\n    document.readyState === 'loading'\n  ) {\n\n    document.addEventListener(\n      'DOMContentLoaded',\n      initPage\n    );\n\n  } else {\n\n    initPage();\n\n  }\n\n})();\n\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>COCORY FACE \u00b7 COLOR \u00b7 STYLE ANALYSIS Rather than relying on intuition, Iuse analysisto find the criteria that suitmebest. We design style guidelines based on individual data, ranging from Skin Color Measurement to Color Analysis, facial features, body type, and makeup. Book by Branch \u2193 View Programs 0104 COCORY PROGRAM Select a program to view [&hellip;]<\/p>\n","protected":false},"author":22,"featured_media":30184,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-29769","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/cocorycolor.com\/en\/wp-json\/wp\/v2\/pages\/29769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cocorycolor.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cocorycolor.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cocorycolor.com\/en\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/cocorycolor.com\/en\/wp-json\/wp\/v2\/comments?post=29769"}],"version-history":[{"count":25,"href":"https:\/\/cocorycolor.com\/en\/wp-json\/wp\/v2\/pages\/29769\/revisions"}],"predecessor-version":[{"id":39616,"href":"https:\/\/cocorycolor.com\/en\/wp-json\/wp\/v2\/pages\/29769\/revisions\/39616"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cocorycolor.com\/en\/wp-json\/wp\/v2\/media\/30184"}],"wp:attachment":[{"href":"https:\/\/cocorycolor.com\/en\/wp-json\/wp\/v2\/media?parent=29769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}