온라인 문의 / 예약 요청

아래 정보를 입력하시면 문자 메시지로 바로 전송됩니다.
주소는 반드시 정확하게 작성해주세요.

연락처

원하시는 지역

상세 주소

원하시는 시간대

관심 프로그램

추가 요청사항

</div>
</div>
</div></div></div></div></section>
</body>

</style>

<p><img src="/image?code=fl697aea8906dc9" style="width: 300px;" class="fr-fic fr-dib"></p><p><br></p><p>회사명 : 남양주출장마사지　대표자 : OOO</p><p>주소 : 남양주광역시　연락처 : 0508-202-6639</p><p>이메일 : massage@naver.com</p><p><br></p><p>Copyright© 남양주출장마사지 All Rights Reserved.</p>
                            </div>
        </div>
    </div>
</footer>

let section = $('.section');
    section.each(function(){
        let code = $(this).attr('id');
        if($('#' + code).hasClass('hidden-lg')) {
            $('#' + code).removeClass('hidden-lg');
            $('#' + code).removeClass('hidden-md');
            $('#' + code).removeClass('hidden-sm');
            $('#' + code).addClass('from-mobile');
        }
    });
</script>

<div class="jdmt-hb-layout">
      <div class="jdmt-hb-aside">
        <div class="jdmt-drawer-wrap jdmt-drawer-wrap-hb">
          <div class="jdmt-drawer">
            <div class="jdmt-drawer-top" :style="{backgroundColor:ctx.row.hb_top_bg_color}">
              <button type="button" class="jdmt-drawer-close" :style="{color:ctx.row.hb_close_color}" aria-label="닫기"></button>
              <div v-if="ctx.row.hb_logo_use" class="jdmt-drawer-logo">
                <img v-if="ctx.hbLogoSrc" :src="ctx.hbLogoSrc" :style="ctx.hbLogoImageStyle">
                <div v-else class="jdmt-drawer-logo-empty">LOGO</div>
              </div>
              <div v-if="ctx.mobileLoginEnabled" class="jdmt-drawer-member" :style="{color:ctx.row.hb_info_font_color}">
                <div v-if="ctx.row.hb_show_nickname">홍길동님</div>
                <div v-if="ctx.row.hb_show_email">gildong@gmail.com</div>
              </div>
              <div v-if="ctx.mobileLoginEnabled" class="jdmt-inline">
                <button type="button" class="jdmt-auth" :style="ctx.authBtnStyle">로그인</button>
                <button type="button" class="jdmt-auth" :style="ctx.authBtnStyle">마이페이지</button>
              </div>
            </div>

<div class="jdmt-drawer-bottom" :style="{backgroundColor:ctx.row.hb_bottom_bg_color}">
              <span
                v-for="service in ctx.selectedServices"
                :key="service.key"
                class="jdmt-service-circle"
                :class="{svg:ctx.serviceMeta(service.key).iconType==='svg'}"
                :style="ctx.serviceStyle(service.key)"
              >
                <template v-if="ctx.serviceMeta(service.key).iconType==='fa'">
                  <i :class="ctx.serviceMeta(service.key).icon"></i>
                </template>
                <template v-else-if="ctx.serviceMeta(service.key).iconType==='svg'">
                  <img :src="ctx.serviceMeta(service.key).src" class="jdmt-service-svg">
                </template>
                <template v-else>{{ctx.serviceMeta(service.key).short}}</template>
              </span>
            </div>
          </div>
        </div>
      </div>

<div class="jdmt-hb-panel">
        <div class="jdmt-hb-panel-section">
          <div class="jdmt-hb-panel-title">기본 설정</div>
          <div class="jdmt-hb-inline-stack">
            <div class="jdmt-hb-inline-row">
              <div class="jdmt-hb-inline-item jdmt-hb-inline-item-select">
                <div class="jdmt-hb-inline-label">등장 위치</div>
                <select class="form-control" v-model="ctx.row.hb_position">
                  <option value="right">오른쪽</option>
                  <option value="left">왼쪽</option>
                </select>
              </div>
            </div>
            <div class="jdmt-hb-inline-row">
              <div class="jdmt-hb-inline-item">
                <div class="jdmt-hb-inline-label">상단 영역 색상</div>
                <external-picker v-model="ctx.row.hb_top_bg_color"></external-picker>
              </div>
              <div class="jdmt-hb-inline-item">
                <div class="jdmt-hb-inline-label">닫기 버튼 색상</div>
                <external-picker v-model="ctx.row.hb_close_color"></external-picker>
              </div>
            </div>
            <div class="jdmt-hb-inline-row">
              <div class="jdmt-hb-inline-item jdmt-hb-inline-item-grow">
                <label class="jdmt-check">
                  <input type="checkbox" v-model="ctx.row.hb_logo_use">
                  <span>로고 노출</span>
                </label>
                <button type="button" class="jdmt-btn jdmt-orange" @click="$refs.hbLogoFile.click()">이미지 업로드</button>
                <div v-if="ctx.hbLogoSrc" class="jdmt-preview">
                  <img :src="ctx.hbLogoSrc">
                  <button type="button" class="jdmt-remove" @click="clearHbLogoFile" aria-label="삭제">×</button>
                </div>
              </div>
            </div>
            <div class="jdmt-hb-inline-row">
              <div class="jdmt-hb-inline-item jdmt-hb-inline-item-size">
                <div class="jdmt-hb-inline-label jdmt-help-label">
                  <span>로고 크기</span>
                  <span class="jdmt-help-wrap">
                    <button type="button" class="jdmt-help-icon" aria-label="로고 크기 안내" @click.stop="$event.currentTarget.nextElementSibling.classList.toggle('active')" @blur="$event.currentTarget.nextElementSibling.classList.remove('active')" @mouseenter="$event.currentTarget.nextElementSibling.classList.add('active')" @mouseleave="$event.currentTarget.nextElementSibling.classList.remove('active')">?</button>
                    <span class="jdmt-help-tooltip">입력값은 로고의 높이 기준(px)이며, 원본 비율을 유지하며 크기가 조정됩니다.</span>
                  </span>
                </div>
                <div class="jdmt-number-inline">
                  <input type="number" class="form-control jdmt-number-input" v-model.number="ctx.row.hb_logo_size">
                  <span class="jdmt-unit">px</span>
                </div>
              </div>
            </div>
          </div>
        </div>

<div v-if="ctx.mobileLoginEnabled" class="jdmt-hb-panel-section">
          <div class="jdmt-hb-panel-title">로그인 정보</div>
          <div class="jdmt-hb-inline-stack">
            <div class="jdmt-hb-inline-row jdmt-hb-inline-row-checks">
              <label class="jdmt-check">
                <input type="checkbox" v-model="ctx.row.hb_show_nickname">
                <span>사용자 닉네임 노출</span>
              </label>
              <label class="jdmt-check">
                <input type="checkbox" v-model="ctx.row.hb_show_email">
                <span>사용자 이메일 노출</span>
              </label>
            </div>
            <div class="jdmt-hb-note">※ 로그인 정보 버튼은 로그인/회원가입 사용 시에만 노출됩니다.</div>
            <div class="jdmt-hb-inline-row">
              <div class="jdmt-hb-inline-item">
                <div class="jdmt-hb-inline-label">로그인 정보 폰트 색상</div>
                <external-picker v-model="ctx.row.hb_info_font_color"></external-picker>
              </div>
            </div>
            <div class="jdmt-hb-auth-row">
              <div class="jdmt-hb-auth-title">로그인/회원가입 버튼</div>
              <div class="jdmt-hb-auth-controls">
                <div class="jdmt-hb-auth-control">
                  <div class="jdmt-hb-auth-label">배경 색상</div>
                  <external-picker v-model="ctx.row.hb_auth_bg_color"></external-picker>
                </div>
                <div class="jdmt-hb-auth-control">
                  <div class="jdmt-hb-auth-label">폰트 색상</div>
                  <external-picker v-model="ctx.row.hb_auth_font_color"></external-picker>
                </div>
                <div class="jdmt-hb-auth-control">
                  <div class="jdmt-hb-auth-label">테두리 선</div>
                  <external-picker v-model="ctx.row.hb_auth_border_color"></external-picker>
                </div>
              </div>
            </div>
          </div>
        </div>

<div class="jdmt-hb-panel-section">
          <div class="jdmt-hb-panel-title">하단 영역</div>
          <div class="jdmt-hb-inline-stack">
            <div class="jdmt-hb-inline-row">
              <div class="jdmt-hb-inline-item">
                <div class="jdmt-hb-inline-label">하단 영역 색상</div>
                <external-picker v-model="ctx.row.hb_bottom_bg_color"></external-picker>
              </div>
            </div>
            <div class="jdmt-field jdmt-span4">
              <label>하단 버튼 추가</label>
              <div class="jdmt-hb-note">※ 하단 버튼은 최대 3개까지만 사용 가능합니다.</div>
              <div class="jdmt-hb-service-list">
                <label
                  v-for="service in ctx.serviceCatalog"
                  :key="service.key"
                  class="jdmt-hb-service-item"
                  :class="{on:ctx.hasService(service.key)}"
                >
                  <span class="jdmt-service-circle jdmt-hb-service-icon" :class="{svg:service.iconType==='svg'}" :style="ctx.serviceStyle(service.key)">
                    <template v-if="service.iconType==='fa'"><i :class="service.icon"></i></template>
                    <template v-else-if="service.iconType==='svg'"><img :src="service.src" class="jdmt-service-svg"></template>
                    <template v-else>{{service.short}}</template>
                  </span>
                  <span class="jdmt-hb-service-name">{{service.label}}</span>
                  <span class="jdmt-hb-service-check">
                    <input type="checkbox" :checked="ctx.hasService(service.key)" @change="ctx.toggleService(service.key,$event)">
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div v-if="ctx.selectedServices.length" class="jdmt-hb-link-list">
            <div v-for="service in ctx.selectedServices" :key="'ip'+service.key" class="jdmt-service-input">
              <div class="jdmt-service-input-label">{{service.label}}</div>
              <input type="text" class="form-control" v-model="service.value" :placeholder="service.placeholder">
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

<input ref="hbLogoFile" class="hidden" type="file" accept="image/*" @change="changeHbLogoFile($event)">
</div>
</script>
<script>
JayDream_components.push({name:"header-mobile-top-modal-hamburger",object:{
  template:"#header-mobile-top-modal-hamburger-template",
  props:{
    ctx:{type:Object,default:null},
  },
  methods:{
    clearHbLogoFile(){
      this.ctx.row.hb_logo_image_src = '';
      this.ctx.row.hb_logo_upload_file = '';

if (this.$refs.hbLogoFile) {
        this.$refs.hbLogoFile.value = '';
      }
    },
    changeHbLogoFile(event){
      this.vue.changeFile(event, this.ctx.row, 'hb_logo_upload_file');
    },
  },
}});
</script>
<script type="text/x-template" id="header-mobile-top-modal-submenu-template">
<div v-if="ctx">
  <section class="jdmt-sec">
    <header-mobile-top-modal-preview :ctx="ctx" :with-submenu="true"></header-mobile-top-modal-preview>
  </section>
  <section class="jdmt-sec">
    <h4 class="jd-image-modal-title">
      <img src="/file/icon/mobile_top/hambuger.svg"> 서브메뉴 탭 설정
    </h4>
    <div class="jdmt-grid jdmt-grid4 jdmt-submenu-config-grid">
      <div class="jdmt-field jdmt-span2 jdmt-submenu-type-field">
        <label>서브메뉴 유형</label>
        <div class="jdmt-submenu-type-group">
          <button type="button" class="jdmt-submenu-type-option" @click="ctx.setSubmenuType('slide')">
            <span class="jdmt-submenu-type-thumb">
              <img src="/file/icon/mobile_top/submenu_slide.svg" alt="">
            </span>
            <span class="jdmt-submenu-type-caption">
              <span class="jdmt-submenu-type-radio" :class="{on:ctx.row.submenu_type==='slide'}">
                <span v-if="ctx.row.submenu_type==='slide'" class="jdmt-submenu-type-radio-dot"></span>
              </span>
              <span>슬라이드형</span>
            </span>
          </button>
          <button type="button" class="jdmt-submenu-type-option" @click="ctx.setSubmenuType('table')">
            <span class="jdmt-submenu-type-thumb">
              <img src="/file/icon/mobile_top/submenu_table.svg" alt="">
            </span>
            <span class="jdmt-submenu-type-caption">
              <span class="jdmt-submenu-type-radio" :class="{on:ctx.row.submenu_type==='table'}">
                <span v-if="ctx.row.submenu_type==='table'" class="jdmt-submenu-type-radio-dot"></span>
              </span>
              <span>테이블형</span>
            </span>
          </button>
          <button type="button" class="jdmt-submenu-type-option" @click="ctx.setSubmenuType('none')">
            <span class="jdmt-submenu-type-thumb">
              <img src="/file/icon/mobile_top/submenu_none.svg" alt="">
            </span>
            <span class="jdmt-submenu-type-caption">
              <span class="jdmt-submenu-type-radio" :class="{on:ctx.row.submenu_type==='none'}">
                <span v-if="ctx.row.submenu_type==='none'" class="jdmt-submenu-type-radio-dot"></span>
              </span>
              <span>사용안함</span>
            </span>
          </button>
        </div>
      </div>
      <div class="jdmt-field"><label>메뉴 탭 높이</label><div class="jdmt-number-inline"><input type="number" class="form-control jdmt-number-input" v-model.number="ctx.row.submenu_height"><span class="jdmt-unit">px</span></div></div>
      <div class="jdmt-field"><label>폰트 크기</label><div class="jdmt-number-inline"><select class="form-control jdmt-mini" v-model.number="ctx.row.submenu_font_size"><option v-for="size in ctx.sizes" :key="'s'+size" :value="size">{{size}}</option></select><span class="jdmt-unit">px</span></div></div>
    </div>
    <div class="jdmt-status">
      <div class="jdmt-box"><div class="jdmt-box-title">비활성 상태</div><div class="jdmt-grid jdmt-grid3"><div class="jdmt-field jdmt-picker-field"><label>배경 색상</label><external-picker v-model="ctx.row.submenu_inactive_bg_color"></external-picker></div><div class="jdmt-field jdmt-picker-field"><label>폰트 색상</label><external-picker v-model="ctx.row.submenu_inactive_font_color"></external-picker></div><div class="jdmt-field jdmt-picker-field"><label>테두리 선</label><external-picker v-model="ctx.row.submenu_inactive_border_color"></external-picker></div></div></div>
      <div class="jdmt-box"><div class="jdmt-box-title">활성 상태</div><div class="jdmt-grid jdmt-grid3"><div class="jdmt-field jdmt-picker-field"><label>배경 색상</label><external-picker v-model="ctx.row.submenu_active_bg_color"></external-picker></div><div class="jdmt-field jdmt-picker-field"><label>폰트 색상</label><external-picker v-model="ctx.row.submenu_active_font_color"></external-picker></div><div class="jdmt-field jdmt-picker-field"><label>테두리 선</label><external-picker v-model="ctx.row.submenu_active_border_color"></external-picker></div></div></div>
    </div>
  </section>
</div>
</script>
<script>
JayDream_components.push({name:"header-mobile-top-modal-submenu",object:{
  template:"#header-mobile-top-modal-submenu-template",
  props:{
    ctx:{type:Object,default:null},
  },
}});
</script>
<script type="text/x-template" id="header-mobile-top-modal-top-template">
<div v-if="ctx">
  <section class="jdmt-sec">
    <h4 class="jd-image-modal-title">
      <img src="/file/icon/basic.svg"> 모바일 상단 기본 설정
    </h4>
    <div class="jdmt-basic-row">
      <div class="jdmt-field jdmt-basic-height"><label>상단 높이</label><div class="jdmt-number-inline"><input type="number" class="form-control jdmt-number-input" v-model.number="ctx.row.top_height"><span class="jdmt-unit">px</span></div></div>
      <div class="jdmt-field jdmt-picker-field jdmt-basic-color"><label>상단 배경 색상</label><external-picker v-model="ctx.row.top_bg_color"></external-picker></div>
      <div class="jdmt-field jdmt-field-toggle jdmt-basic-toggle"><label class="jdmt-check jdmt-check-lg"><input type="checkbox" v-model="ctx.row.top_fixed"><span>상단 스크롤 고정</span></label></div>
      <div class="jdmt-field jdmt-field-toggle jdmt-basic-shadow"><div class="jdmt-shadow-inline"><label class="jdmt-check jdmt-check-lg"><input type="checkbox" v-model="ctx.row.top_shadow_use"><span>그림자</span></label><select class="form-control jdmt-mini" v-model.number="ctx.row.top_shadow_opacity"><option v-for="o in ctx.opacities" :key="o" :value="o">{{o}}%</option></select></div></div>
    </div>
  </section>

<section v-if="ctx.hasLogo" class="jdmt-sec">
    <h4 class="jd-image-modal-title">
      <img src="/file/icon/mobile_top/logo.svg"> 로고 설정
    </h4>
    <div class="jdmt-logo-layout">
      <div class="jdmt-field jdmt-logo-type-field">
        <label>로고 유형</label>
        <div class="jdmt-logo-type-group">
          <label class="jdmt-logo-type-option" :class="{on:ctx.row.logo_type==='image'}" @click="ctx.row.logo_type='image'">
            <input type="radio" value="image" v-model="ctx.row.logo_type">
            <span class="jdmt-logo-type-thumb" :style="ctx.logoTypeThumbStyle('image')">
              <img src="/file/icon/mobile_top/image_logo.svg" alt="">
            </span>
            <span class="jdmt-logo-type-caption">
              <span class="jdmt-logo-type-radio" :style="ctx.logoTypeRadioStyle('image')"><span v-if="ctx.row.logo_type==='image'" class="jdmt-logo-type-radio-dot"></span></span>
              <span>이미지 로고</span>
            </span>
          </label>
          <label class="jdmt-logo-type-option" :class="{on:ctx.row.logo_type==='text'}" @click="ctx.row.logo_type='text'">
            <input type="radio" value="text" v-model="ctx.row.logo_type">
            <span class="jdmt-logo-type-thumb" :style="ctx.logoTypeThumbStyle('text')">
              <img src="/file/icon/mobile_top/text_logo.svg" alt="">
            </span>
            <span class="jdmt-logo-type-caption">
              <span class="jdmt-logo-type-radio" :style="ctx.logoTypeRadioStyle('text')"><span v-if="ctx.row.logo_type==='text'" class="jdmt-logo-type-radio-dot"></span></span>
              <span>텍스트 로고</span>
            </span>
          </label>
        </div>
      </div>
      <template v-if="ctx.row.logo_type==='image'">
        <div class="jdmt-logo-controls jdmt-logo-controls-image">
          <div class="jdmt-field jdmt-logo-upload-field"><label>로고이미지 추가</label><div class="jdmt-inline"><button type="button" class="jdmt-btn jdmt-orange" @click="$refs.logoFile.click()">이미지 업로드</button><div v-if="ctx.logoSrc" class="jdmt-preview"><img :src="ctx.logoSrc"><button type="button" class="jdmt-remove" @click="clearLogoFile">×</button></div></div><div class="jdmt-help">※ 로고 크기는 40px 이하로 설정하는 것을 권장합니다.</div></div>
          <div class="jdmt-field jdmt-logo-size-field"><label class="jdmt-help-label"><span>로고 크기</span><span class="jdmt-help-wrap"><button type="button" class="jdmt-help-icon" aria-label="로고 크기 안내" @click.stop="$event.currentTarget.nextElementSibling.classList.toggle('active')" @blur="$event.currentTarget.nextElementSibling.classList.remove('active')" @mouseenter="$event.currentTarget.nextElementSibling.classList.add('active')" @mouseleave="$event.currentTarget.nextElementSibling.classList.remove('active')">?</button><span class="jdmt-help-tooltip">입력값은 로고의 높이 기준(px)이며, 원본 비율을 유지하며 크기가 조절됩니다.</span></span></label><div class="jdmt-number-inline"><input type="number" class="form-control jdmt-number-input" v-model.number="ctx.row.logo_image_size"><span class="jdmt-unit">px</span></div></div>
        </div>
      </template>
      <template v-else>
        <div class="jdmt-logo-controls jdmt-logo-controls-text">
          <div class="jdmt-field"><label>로고 텍스트</label><input type="text" class="form-control" v-model="ctx.row.logo_text" maxlength="15" placeholder="최대 15자 입력"></div>
          <div class="jdmt-field"><label>폰트</label><select class="form-control" v-model="ctx.row.logo_font"><option v-for="font in ctx.fonts" :key="font" :value="font">{{font}}</option></select></div>
          <div class="jdmt-field"><label>폰트 크기</label><div class="jdmt-number-inline"><select class="form-control jdmt-mini" v-model.number="ctx.row.logo_font_size"><option v-for="size in ctx.sizes" :key="'l'+size" :value="size">{{size}}</option></select><span class="jdmt-unit">px</span></div></div>
          <div class="jdmt-field jdmt-picker-field"><label>폰트 색상</label><external-picker v-model="ctx.row.logo_font_color"></external-picker></div>
        </div>
      </template>
    </div>
  </section>

<section v-if="ctx.hasMenu" class="jdmt-sec">
    <h4 class="jd-image-modal-title">
      <img src="/file/icon/mobile_top/hambuger.svg"> 햄버거 메뉴 설정
    </h4>
    <div class="jdmt-grid jdmt-grid4 jdmt-menu-settings-grid">
      <div class="jdmt-field jdmt-menu-style-field jdmt-span2"><label>햄버거 아이콘 스타일</label><div class="jdmt-menu-shape-row"><button v-for="shape in ctx.menuShapes" :key="shape" type="button" class="jdmt-shape" :class="{on:ctx.row.menu_icon_style===shape}" @click="ctx.row.menu_icon_style=shape" v-html="ctx.menuIcon(shape,24,'#ff5f37')"></button></div></div>
      <div class="jdmt-field jdmt-picker-field"><label>아이콘 색상</label><external-picker v-model="ctx.row.menu_icon_color"></external-picker></div>
      <div class="jdmt-field"><label class="jdmt-help-label"><span>아이콘 크기</span><span class="jdmt-help-wrap"><button type="button" class="jdmt-help-icon" aria-label="아이콘 크기 안내" @click.stop="$event.currentTarget.nextElementSibling.classList.toggle('active')" @blur="$event.currentTarget.nextElementSibling.classList.remove('active')" @mouseenter="$event.currentTarget.nextElementSibling.classList.add('active')" @mouseleave="$event.currentTarget.nextElementSibling.classList.remove('active')">?</button><span class="jdmt-help-tooltip">입력값은 아이콘의 높이 기준(px)이며, 원본 비율을 유지하며 크기가 조정됩니다.</span></span></label><div class="jdmt-number-inline"><input type="number" class="form-control jdmt-number-input" v-model.number="ctx.row.menu_icon_size"><span class="jdmt-unit">px</span></div></div>
    </div>
  </section>

<section v-if="ctx.hasButton" class="jdmt-sec">
    <h4 class="jd-image-modal-title">
      <img src="/file/icon/mobile_top/button.svg"> 버튼 설정
    </h4>
    <div class="jdmt-grid jdmt-button-settings-grid">
      <div class="jdmt-field jdmt-button-action-field"><label>버튼 기능</label><div class="jdmt-inline"><select class="form-control jdmt-type" :value="ctx.row.button_type" @change="ctx.changeButtonType($event.target.value)"><option v-for="type in ctx.buttonTypes" :key="type.value" :value="type.value">{{type.label}}</option></select><input v-if="ctx.row.button_type==='link'" type="text" class="form-control jdmt-grow" v-model="ctx.row.button_value" placeholder="https://"><select v-else-if="ctx.row.button_type==='page'" class="form-control jdmt-grow" v-model="ctx.row.button_value"><option value="">페이지 선택</option><option v-for="page in ctx.pageOptions" :key="page.value" :value="page.value">{{page.label}}</option></select><input v-else-if="ctx.row.button_type==='tel'" type="text" class="form-control jdmt-grow" v-model="ctx.row.button_value" placeholder="- 를 제외한 전화번호 입력"></div></div>
      <div class="jdmt-field jdmt-button-icon-field"><label>아이콘</label><div class="jdmt-inline"><button type="button" class="jdmt-btn jdmt-orange" @click="$refs.buttonFile.click()">직접 업로드</button><button type="button" class="jdmt-btn jdmt-orange" @click="$openModal(ctx.iconModal)">무료 아이콘</button><div v-if="ctx.buttonSrc" class="jdmt-preview"><img v-if="ctx.row.button_icon_mode==='image'" :src="ctx.buttonSrc"><span v-else-if="ctx.parsedButtonIcon && ctx.parsedButtonIcon.library === 'feather'" v-html="ctx.renderFeatherIcon(ctx.parsedButtonIcon.name,ctx.row.button_icon_size,ctx.row.button_icon_color)"></span><i v-else-if="ctx.parsedButtonIcon" :class="ctx.buttonIconClass" :style="ctx.buttonIconStyle"></i><button type="button" class="jdmt-remove" @click="ctx.clearButtonIcon()">×</button></div></div></div>
      <div class="jdmt-field"><label class="jdmt-help-label"><span>버튼 크기</span><span class="jdmt-help-wrap"><button type="button" class="jdmt-help-icon" aria-label="버튼 크기 안내" @click.stop="$event.currentTarget.nextElementSibling.classList.toggle('active')" @blur="$event.currentTarget.nextElementSibling.classList.remove('active')" @mouseenter="$event.currentTarget.nextElementSibling.classList.add('active')" @mouseleave="$event.currentTarget.nextElementSibling.classList.remove('active')">?</button><span class="jdmt-help-tooltip">입력값은 버튼의 높이 기준(px)이며, 원본 비율을 유지하며 크기가 조정됩니다.</span></span></label><div class="jdmt-number-inline"><input type="number" class="form-control jdmt-number-input" v-model.number="ctx.row.button_icon_size"><span class="jdmt-unit">px</span></div></div>
    </div>
  </section>

<input ref="logoFile" class="hidden" type="file" accept="image/*" @change="changeLogoFile($event)">
  <input ref="buttonFile" class="hidden" type="file" accept="image/*" @change="ctx.changeButtonIconFile($event)">
</div>
</script>
<script>
JayDream_components.push({name:"header-mobile-top-modal-top",object:{
  template:"#header-mobile-top-modal-top-template",
  props:{
    ctx:{type:Object,default:null},
  },
  methods:{
    clearLogoFile(){
      this.ctx.row.logo_image_src = '';
      this.ctx.row.logo_upload_file = '';

if (this.$refs.logoFile) {
        this.$refs.logoFile.value = '';
      }
    },
    changeLogoFile(event){
      this.vue.changeFile(event, this.ctx.row, 'logo_upload_file');
    },
  },
}});
</script>
<script type="text/x-template" id="header-mobile-top-modal-preview-template">
<div v-if="ctx" :class="['jdmt-preview-stack', {'jdmt-sub-preview':withSubmenu}]">
  <div class="jdmt-top" :class="{'jdmt-top-linked':withSubmenu,'jdmt-top-readonly':!interactive}" :style="ctx.topStyle">
    <div v-for="slot in ctx.slotKeys" :key="slot" class="jdmt-slot" :class="slot" @dragover.prevent @drop.prevent="interactive && ctx.swapSlot(slot)">
      <template v-if="ctx.row[slot]">
        <template v-if="interactive">
          <div class="jdmt-slot-fill" draggable="true" @dragstart="ctx.dragging=slot" @dragend="ctx.dragging=''">
            <div class="jdmt-slot-bg">
              <img v-if="ctx.row[slot]==='logo'&&ctx.row.logo_type==='image'&&ctx.logoSrc" :src="ctx.logoSrc" class="jdmt-logo-img" :style="ctx.logoImageStyle">
              <span v-else-if="ctx.row[slot]==='logo'" class="jdmt-logo-text" :style="ctx.logoTextStyle">{{ctx.row.logo_text||'LOGO'}}</span>
              <span v-else-if="ctx.row[slot]==='menu'" v-html="ctx.menuIcon(ctx.row.menu_icon_style,ctx.row.menu_icon_size,ctx.row.menu_icon_color)"></span>
              <template v-else>
                <img v-if="ctx.row.button_icon_mode==='image'&&ctx.buttonSrc" :src="ctx.buttonSrc" class="jdmt-btn-img jdmt-preview-btn-img" :style="ctx.buttonPreviewImageStyle">
                <span v-else-if="ctx.parsedButtonIcon && ctx.parsedButtonIcon.library === 'feather'" v-html="ctx.renderFeatherIcon(ctx.parsedButtonIcon.name,ctx.row.button_icon_size,ctx.row.button_icon_color)"></span>
                <i v-else-if="ctx.parsedButtonIcon" :class="ctx.buttonIconClass" :style="ctx.buttonIconStyle"></i>
                <span v-else class="jdmt-fallback">B</span>
              </template>
            </div>
            <button type="button" class="jdmt-float-btn" @click.stop="ctx.row[slot]=''">해제</button>
          </div>
        </template>
        <template v-else>
          <div class="jdmt-slot-readonly">
            <div class="jdmt-slot-bg">
              <img v-if="ctx.row[slot]==='logo'&&ctx.row.logo_type==='image'&&ctx.logoSrc" :src="ctx.logoSrc" class="jdmt-logo-img" :style="ctx.logoImageStyle">
              <span v-else-if="ctx.row[slot]==='logo'" class="jdmt-logo-text" :style="ctx.logoTextStyle">{{ctx.row.logo_text||'LOGO'}}</span>
              <span v-else-if="ctx.row[slot]==='menu'" v-html="ctx.menuIcon(ctx.row.menu_icon_style,ctx.row.menu_icon_size,ctx.row.menu_icon_color)"></span>
              <template v-else>
                <img v-if="ctx.row.button_icon_mode==='image'&&ctx.buttonSrc" :src="ctx.buttonSrc" class="jdmt-btn-img jdmt-preview-btn-img" :style="ctx.buttonPreviewImageStyle">
                <span v-else-if="ctx.parsedButtonIcon && ctx.parsedButtonIcon.library === 'feather'" v-html="ctx.renderFeatherIcon(ctx.parsedButtonIcon.name,ctx.row.button_icon_size,ctx.row.button_icon_color)"></span>
                <i v-else-if="ctx.parsedButtonIcon" :class="ctx.buttonIconClass" :style="ctx.buttonIconStyle"></i>
                <span v-else class="jdmt-fallback">B</span>
              </template>
            </div>
          </div>
        </template>
      </template>
      <template v-else>
        <template v-if="interactive">
          <div class="jdmt-slot-empty" :class="{on:ctx.activeSlot===slot}" @click.stop="ctx.toggleSlotMenu(slot)"><span>+</span>
            <div v-if="ctx.activeSlot===slot" class="jdmt-slot-actions" @click.stop>
              <button v-for="type in ctx.freeSlotTypes" :key="type" type="button" class="jdmt-float-btn" @click.stop="ctx.setSlotType(slot,type)">{{ctx.slotLabel(type)}}</button>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="jdmt-slot-placeholder"></div>
        </template>
      </template>
    </div>
  </div>

<template v-if="withSubmenu">
    <div v-if="ctx.row.submenu_type==='slide'" class="jdmt-sub-slide"><div v-for="(item,index) in ctx.submenuPreview" :key="'sl'+index" class="jdmt-sub-item" :style="ctx.submenuStyle(index===0)">{{item}}</div></div>
    <div v-else-if="ctx.row.submenu_type==='table'" class="jdmt-sub-table"><div v-for="(item,index) in ctx.submenuPreview" :key="'tb'+index" class="jdmt-sub-item" :style="ctx.submenuStyle(index===0)">{{item}}</div></div>
    <div v-else class="jdmt-sub-none">사용안함</div>
  </template>
</div>
</script>
<script type="text/x-template" id="header-mobile-top-modal-template">
<div v-if="load" class="jdmt">
  <div class="jdmt-head"><div class="jdmt-title">모바일 상단 설정</div></div>
  <div class="jdmt-body">
    <div class="jdmt-tabs">
      <button type="button" class="jdmt-tab" :class="{on:activeTab==='top'}" @click="activeTab='top'">상단바 설정</button>
      <button type="button" class="jdmt-tab" :class="{on:activeTab==='submenu'}" @click="activeTab='submenu'">서브메뉴 탭 설정</button>
      <button type="button" class="jdmt-tab" :class="{on:activeTab==='hamburger'}" @click="activeTab='hamburger'">햄버거메뉴 설정</button>
    </div>

<header-mobile-top-modal-top v-if="activeTab==='top'" :ctx="modalCtx"></header-mobile-top-modal-top>
    <header-mobile-top-modal-submenu v-else-if="activeTab==='submenu'" :ctx="modalCtx"></header-mobile-top-modal-submenu>
    <header-mobile-top-modal-hamburger v-else :ctx="modalCtx"></header-mobile-top-modal-hamburger>
  </div>
  <div class="jdmt-foot"><button type="button" class="jdmt-btn jdmt-white" data-dismiss="modal">닫기</button><button type="button" class="jdmt-btn jdmt-orange" @click="save">저장</button></div>
  <external-svg v-model="iconModal" @select="selectIcon"></external-svg>
</div>
<div v-else><div class="loader"></div></div>
</script>
<script>
JayDream_components.push({
  name: "header-mobile-top-modal-preview",
  object: {
    template: "#header-mobile-top-modal-preview-template",
    props: {
      ctx: { type: Object, default: null },
      interactive: { type: Boolean, default: false },
      withSubmenu: { type: Boolean, default: false },
    },
  }
});

const JDMT_FONTS=['Pretendard','Arial','Helvetica','Verdana','Tahoma','NotoSans-Regular','NanumGothic','NanumSquare','GmarketSans','IBMPlexSansKR'];
const JDMT_SERVICES=[
  {key:'kakao_talk',label:'카카오톡',short:'T',iconType:'svg',src:'/file/icon/mobile_top/kakao-talk%201.svg',placeholder:'카카오톡 채널 또는 오픈채팅 주소 입력'},
  {key:'instagram',label:'인스타그램',short:'I',iconType:'svg',src:'/file/icon/mobile_top/instagram%201.svg',placeholder:'인스타그램 프로필 주소 입력'},
  {key:'youtube',label:'유튜브',short:'Y',iconType:'svg',src:'/file/icon/mobile_top/youtube%20(1)%201.svg',placeholder:'유튜브 채널 주소 입력'},
  {key:'facebook',label:'페이스북',short:'f',iconType:'svg',src:'/file/icon/mobile_top/facebook%201.svg',placeholder:'페이스북 프로필 주소 입력'},
  {key:'naver_blog',label:'네이버블로그',short:'bl',iconType:'svg',src:'/file/icon/mobile_top/naver_blog.svg',placeholder:'네이버 블로그 주소 입력'},
  {key:'naver_cafe',label:'네이버카페',short:'N',iconType:'svg',src:'/file/icon/mobile_top/naver_cafe.svg',placeholder:'네이버 카페 주소 입력'},
  {key:'daum_cafe',label:'다음카페',short:'c',iconType:'svg',src:'/file/icon/mobile_top/daum_cafe.svg',placeholder:'다음 카페 주소 입력'},
  {key:'center',label:'고객센터',short:'c',iconType:'svg',src:'/file/icon/mobile_top/center.svg',placeholder:'- 를 제외한 전화번호 입력'},
];

JayDream_components.push({
  name: "header-mobile-top-modal",
  object: {
    template: "#header-mobile-top-modal-template",
    props: {
      site_code: { type: String, default: "" },
      member_code: { type: String, default: "" },
    },
    data() {
      return {
        load: false,
        component_name: "header-mobile-top-modal",
        component_idx: "",
        injectUrls: [
          'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css',
          'https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css',
          'https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css',
          'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js',
        ],
        table: null,
        activeTab: 'top',
        activeSlot: '',
        dragging: '',
        menus: [],
        row: {},
        mobileLoginEnabled: false,
        buttonIconPreviewUrl: '',
        iconModal: this.lib.createModalObject(),
        fonts: JDMT_FONTS,
        sizes: [10, 11, 12, 13, 14, 15, 16, 18, 20, 24, 30],
        opacities: [10, 20, 30, 40, 50, 60, 70, 80, 90],
        menuShapes: ['shape1', 'shape2', 'shape3', 'shape4'],
        serviceCatalog: JDMT_SERVICES,
      };
    },
    async created() {
      this.component_idx = this.lib.generateUniqueId();
      this.api.component_name = this.component_name;
      this.row = this.defaultRow();
    },
    async mounted() {
      document.addEventListener('click', this.handleDocumentClick, true);
      this.table = await this.api.table("jd_mobile_top");
      await this.loadMenus();
      await this.loadHeaderSetting();
      await this.loadRow();
      this.normalizeButtonType();
      this.load = true;
    },
    beforeDestroy() {
      this.revokeButtonIconPreview();
      document.removeEventListener('click', this.handleDocumentClick, true);
    },
    computed: {
      slotKeys() {
        return ['slot_left', 'slot_center', 'slot_right_1', 'slot_right_2'];
      },
      hasLogo() {
        return this.slotKeys.some((slot) => this.row[slot] === 'logo');
      },
      hasMenu() {
        return this.slotKeys.some((slot) => this.row[slot] === 'menu');
      },
      hasButton() {
        return this.slotKeys.some((slot) => this.row[slot] === 'button');
      },
      freeSlotTypes() {
        return ['logo', 'menu', 'button'].filter((type) => {
          return !this.slotKeys.some((slot) => this.row[slot] === type);
        });
      },
      logoSrc() {
        return this.row.logo_upload_file?.src || this.row.logo_image_src || '';
      },
      hbLogoSrc() {
        return this.row.hb_logo_upload_file?.src || this.row.hb_logo_image_src || '';
      },
      buttonSrc() {
        return this.row.button_icon_upload_file?.src || this.buttonIconPreviewUrl || this.row.button_icon_src || '';
      },
      parsedButtonIcon() {
        if (!this.row.button_icon_src || this.row.button_icon_mode === 'image') {
          return null;
        }

const parts = String(this.row.button_icon_src).split(':');
        if (parts.length < 2) {
          return null;
        }

return {
          library: parts[0],
          name: parts[1],
        };
      },
      buttonIconClass() {
        if (!this.parsedButtonIcon) {
          return '';
        }

const { library, name } = this.parsedButtonIcon;

if (library === 'bootstrap') {
          return `bi bi-${name}`;
        }
        if (library === 'phosphor') {
          return `ph ph-${name}`;
        }
        if (library === 'simpleline') {
          return `icon-${name}`;
        }

return '';
      },
      buttonIconStyle() {
        return {
          color: this.row.button_icon_color,
          fontSize: `${this.row.button_icon_size}px`,
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
        };
      },
      buttonImageStyle() {
        return {
          height: `${Number(this.row.button_icon_size || 30)}px`,
          width: 'auto',
          maxWidth: '100%',
          maxHeight: 'none',
          objectFit: 'contain',
          display: 'block',
        };
      },
      buttonPreviewImageStyle() {
        const size = Math.max(1, Number(this.row.button_icon_size || 30));
        return `width:${size}px !important;height:${size}px !important;max-width:none !important;max-height:none !important;object-fit:contain !important;display:block !important;`;
      },
      logoTextStyle() {
        return {
          fontFamily: `${this.row.logo_font}, sans-serif`,
          color: this.row.logo_font_color,
          fontSize: `${this.row.logo_font_size}px`,
          fontWeight: 700,
        };
      },
      logoImageStyle() {
        return {
          height: `${Number(this.row.logo_image_size || 30)}px`,
          width: 'auto',
          maxWidth: 'none',
          maxHeight: 'none',
          objectFit: 'contain',
          display: 'block',
          flex: 'none',
        };
      },
      hbLogoImageStyle() {
        return {
          height: `${Number(this.row.hb_logo_size || 20)}px`,
          width: 'auto',
          maxWidth: '140px',
          maxHeight: 'none',
          objectFit: 'contain',
          display: 'block',
        };
      },
      topStyle() {
        return {
          height: `${this.resolvedTopHeight}px`,
          backgroundColor: this.row.top_bg_color,
          boxShadow: this.row.top_shadow_use
            ? `0 4px 8px rgba(0,0,0,${(this.row.top_shadow_opacity || 10) / 100})`
            : 'none',
        };
      },
      pageOptions() {
        return this.flatMenus(this.menus).map((item) => {
          return {
            label: item.name,
            value: item.url ? `/${String(item.url).replace(/^\/+/, '')}` : '/',
          };
        });
      },
      submenuPreview() {
        if (this.menus.length) {
          return this.menus.map((item) => item.name);
        }

return ['메뉴명1', '메뉴명2', '메뉴명3', '메뉴명4', '메뉴명5'];
      },
      buttonTypes() {
        const types = [
          { value: 'link', label: '링크' },
          { value: 'page', label: '페이지' },
          { value: 'tel', label: '전화걸기' },
        ];

if (this.mobileLoginEnabled) {
          types.push({ value: 'mypage', label: '마이페이지' });
        }

return types;
      },
      drawerPreview() {
        if (this.menus.length) {
          return this.menus.slice(0, 4).map((item) => item.name);
        }

return ['메뉴1', '메뉴2', '메뉴3', '메뉴4'];
      },
      drawerPreviewMenus() {
        if (this.menus.length) {
          let opened = false;
          return this.menus.slice(0, 4).map((item) => {
            const children = this.childMenus(item).slice(0, 4).map((child) => child.name);
            const hasChildren = children.length > 0;
            const previewOpen = !opened && hasChildren;
            if (previewOpen) {
              opened = true;
            }
            return {
              name: item.name,
              children,
              hasChildren,
              previewOpen,
            };
          });
        }

return [
          { name: '메뉴1', children: ['서브메뉴1', '서브메뉴2'], hasChildren: true, previewOpen: true },
          { name: '메뉴2', children: [], hasChildren: false, previewOpen: false },
          { name: '메뉴3', children: [], hasChildren: false, previewOpen: false },
          { name: '메뉴4', children: [], hasChildren: false, previewOpen: false },
        ];
      },
      selectedServices() {
        return (this.row.hb_bottom_services || []).map((item) => {
          return Object.assign({}, this.serviceMeta(item.key), item, {
            key: this.normalizeServiceKey(item.key),
          });
        });
      },
      authBtnStyle() {
        return {
          backgroundColor: this.row.hb_auth_bg_color,
          color: this.row.hb_auth_font_color,
          borderColor: this.row.hb_auth_border_color,
        };
      },
      modalCtx() {
        return this;
      },
      resolvedTopHeight() {
        const topHeight = Number(this.row.top_height || 50);
        const logoSize = Number(this.row.logo_image_size || 30);
        const hasImageLogo = this.row.logo_type === 'image' && this.hasLogo;

return Math.max(topHeight, hasImageLogo ? logoSize : 0);
      },
    },
    methods: {
    defaultRow(){return{
      idx:'',site_code:this.site_code,member_code:this.member_code,top_height:50,top_bg_color:'#ffffff',top_fixed:true,top_shadow_use:false,top_shadow_opacity:10,
      slot_left:'logo',slot_center:'',slot_right_1:'',slot_right_2:'menu',logo_type:'image',logo_text:'',logo_font:'Pretendard',logo_font_size:14,logo_font_color:'#000000',
      logo_image_src:'',logo_image_size:30,logo_upload_file:'',menu_icon_style:'shape1',menu_icon_color:'#000000',menu_icon_size:24,button_type:'link',button_value:'',
      button_icon_mode:'',button_icon_src:'',button_icon_color:'#000000',button_icon_size:30,button_icon_upload_file:'',submenu_type:'slide',submenu_height:30,
      submenu_font_size:14,submenu_inactive_bg_color:'#ffffff',submenu_inactive_font_color:'#000000',submenu_inactive_border_color:'#a4a4a4',submenu_active_bg_color:'#373737',
      submenu_active_font_color:'#ffffff',submenu_active_border_color:'#a4a4a4',hb_position:'right',hb_top_bg_color:'#ffffff',hb_close_color:'#000000',hb_logo_use:false,
      hb_logo_image_src:'',hb_logo_size:20,hb_logo_upload_file:'',hb_show_nickname:true,hb_show_email:true,hb_info_font_color:'#000000',hb_auth_bg_color:'#ffffff',
      hb_auth_font_color:'#000000',hb_auth_border_color:'#d3d3d3',hb_menu_bg_color:'#ffffff',hb_menu_divider_color:'#d3d3d3',hb_menu_arrow_color:'#000000',
      hb_menu_font_size:16,hb_menu_font_color:'#000000',hb_submenu_font_size:14,hb_submenu_font_color:'#454545',hb_bottom_bg_color:'#ffffff',hb_bottom_services:[]
    };},
    logoTypeThumbStyle(type) {
      const active = this.row.logo_type === type;
      return {
        borderColor: active ? '#ff6b45' : '#222222',
        boxShadow: active ? 'inset 0 0 0 1px #ff6b45' : 'none',
      };
    },
    logoTypeRadioStyle(type) {
      return {
        borderColor: this.row.logo_type === type ? '#ff6b45' : '#bdbdbd',
      };
    },
    async loadMenus() {
      const table = await this.api.table("menu");

table.where("site_code", this.site_code);
      table.where("parent_code", "null");
      table.where("is_use_header", "Y");
      table.orderBy("order", "ASC");
      table.relations("menu", "second").where("parent_code", "$parent.code");
      table.relations("second").orderBy("order", "ASC");

this.menus = await table.get();
    },
    parseSettingData(value) {
      if (!value) {
        return {};
      }
      if (typeof value === 'object') {
        return value;
      }

try {
        return JSON.parse(value) || {};
      } catch (e) {
        return {};
      }
    },
    async loadHeaderSetting() {
      const table = await this.api.table("header");
      table.where("site_code", this.site_code);

const header = (await table.get())[0] || {};
      const settingData = this.parseSettingData(header.setting_data || header.settingData);
      this.mobileLoginEnabled = settingData.is_use_mobile_login === 'Y';
    },
    async loadRow() {
      const table = await this.api.table("jd_mobile_top");
      table.where("site_code", this.site_code);

const rows = await table.get();
      this.row = rows.length ? this.hydrate(rows[0]) : this.defaultRow();
    },
    hydrate(raw) {
      const row = Object.assign(this.defaultRow(), raw || {});
      const numberKeys = [
        'top_height',
        'top_shadow_opacity',
        'logo_font_size',
        'logo_image_size',
        'menu_icon_size',
        'button_icon_size',
        'submenu_height',
        'submenu_font_size',
        'hb_logo_size',
        'hb_menu_font_size',
        'hb_submenu_font_size',
      ];

numberKeys.forEach((key) => {
        row[key] = parseInt(row[key] || this.defaultRow()[key], 10);
      });
      row.top_fixed = this.toBool(row.top_fixed, true);
      row.top_shadow_use = this.toBool(row.top_shadow_use, false);
      row.hb_logo_use = this.toBool(row.hb_logo_use, false);
      row.hb_show_nickname = this.toBool(row.hb_show_nickname, true);
      row.hb_show_email = this.toBool(row.hb_show_email, true);
      row.hb_bottom_services = [];

[1, 2, 3].forEach((index) => {
        const key = raw[`hb_bottom_button_${index}_type`];
        const value = raw[`hb_bottom_button_${index}_value`] || '';

if (key) {
          row.hb_bottom_services.push({
            key: this.normalizeServiceKey(key),
            value,
          });
        }
      });

row.logo_upload_file = '';
      row.button_icon_upload_file = '';
      row.hb_logo_upload_file = '';

return row;
    },
    toBool(value, def) {
      if (value === undefined || value === null || value === '') {
        return def;
      }

return (
        value === true ||
        value === 'Y' ||
        value === 'true' ||
        value === '1' ||
        value === 1
      );
    },
    normalizeButtonType() {
      if (!this.mobileLoginEnabled && this.row.button_type === 'mypage') {
        this.row.button_type = 'link';
        this.row.button_value = '';
      }
    },
    changeButtonType(type) {
      if (this.row.button_type === type) {
        return;
      }

this.row.button_type = type;
      this.row.button_value = '';
    },
    flatMenus(menus) {
      let rows = [];

(menus || []).forEach((item) => {
        rows.push(item);

const children = this.childMenus(item);
        if (children.length) {
          rows = rows.concat(children);
        }
      });

return rows;
    },
    childMenus(item) {
      return item?.$second?.data || item.second || [];
    },
    slotLabel(type) {
      return {
        logo: '로고',
        menu: '메뉴',
        button: '버튼',
      }[type] || type;
    },
    toggleSlotMenu(slot) {
      this.activeSlot = this.activeSlot === slot ? '' : slot;
    },
    setSlotType(slot, type) {
      this.row[slot] = type;
      this.activeSlot = '';
    },
    setSubmenuType(type) {
      this.row.submenu_type = type;
    },
    handleDocumentClick(event) {
      if (!this.activeSlot) {
        return;
      }

if (
        event.target.closest('.jdmt-slot-empty') ||
        event.target.closest('.jdmt-slot-actions')
      ) {
        return;
      }

this.activeSlot = '';
    },
    swapSlot(target) {
      if (!this.dragging || this.dragging === target) {
        return;
      }

const file = event?.target?.files?.[0] || null;
      if (!file) {
        this.row.button_icon_upload_file = '';
        return;
      }

this.row.button_icon_upload_file = file;
      this.row.button_icon_mode = 'image';
      this.row.button_icon_src = '';

if (window.URL?.createObjectURL) {
        this.buttonIconPreviewUrl = window.URL.createObjectURL(file);
      }

if (event?.target) {
        event.target.value = '';
      }
    },
    clearButtonIcon() {
      this.revokeButtonIconPreview();
      this.row.button_icon_src = '';
      this.row.button_icon_mode = '';
      this.row.button_icon_upload_file = '';
    },
    renderFeatherIcon(name, size, color) {
      if (typeof feather !== 'undefined' && feather.icons[name]) {
        return feather.icons[name].toSvg({
          width: size,
          height: size,
          color,
        });
      }

return '';
    },
    menuIcon(shape, size, color) {
      const safeSize = parseInt(size || 30, 10);
      const iconHeight = Number.isFinite(safeSize) ? Math.max(1, safeSize) : 30;
      const styleNo = Math.min(4, Math.max(1, parseInt(String(shape || 'shape1').replace(/\D/g, ''), 10) || 1));
      const iconWidth = styleNo === 4 ? iconHeight : Math.round(iconHeight * 17 / 16);
      const safeColor = String(color || '#000000').replace(/[;"'<>]/g, '');
      const src = `/file/icon/mobile_top/hambergur_icon_style_${styleNo}.svg`;

return `<span class="jdmt-hamburger-icon" style="display:inline-block;width:${iconWidth}px;height:${iconHeight}px;background-color:${safeColor};-webkit-mask:url('${src}') center / contain no-repeat;mask:url('${src}') center / contain no-repeat;"></span>`;
    },
    iconHtml(src, size, color) {
      if (!src) {
        return '';
      }

const parts = String(src).split(':');
      if (parts.length < 2) {
        return '';
      }

const library = parts[0];
      const name = parts[1];

if (library === 'feather' && typeof feather !== 'undefined' && feather.icons[name]) {
        return feather.icons[name].toSvg({
          width: size,
          height: size,
          color,
        });
      }
      if (library === 'bootstrap') {
        return `<i class="bi bi-${name}" style="color:${color};font-size:${size}px;"></i>`;
      }
      if (library === 'phosphor') {
        return `<i class="ph ph-${name}" style="color:${color};font-size:${size}px;"></i>`;
      }
      if (library === 'simpleline') {
        return `<i class="icon-${name}" style="color:${color};font-size:${size}px;"></i>`;
      }

return '<span style="font-size:12px;color:#999">icon</span>';
    },
    drawerPreviewArrow(open) {
      const direction = open ? 'up' : 'down';
      return `<i class="fal fa-chevron-${direction}" style="color:${this.row.hb_menu_arrow_color};font-size:20px;"></i>`;
    },
    normalizeServiceKey(key) {
      if (!key) {
        return '';
      }

return key === 'center' ? 'customer_center' : key;
    },
    submenuStyle(active) {
      return {
        height: `${this.row.submenu_height}px`,
        lineHeight: `${this.row.submenu_height}px`,
        fontSize: `${this.row.submenu_font_size}px`,
        backgroundColor: active ? this.row.submenu_active_bg_color : this.row.submenu_inactive_bg_color,
        color: active ? this.row.submenu_active_font_color : this.row.submenu_inactive_font_color,
        borderColor: active
          ? this.row.submenu_active_border_color
          : this.row.submenu_inactive_border_color,
      };
    },
    serviceMeta(key) {
      const normalizedKey = this.normalizeServiceKey(key);
      return this.serviceCatalog.find((service) => {
        return this.normalizeServiceKey(service.key) === normalizedKey;
      }) || this.serviceCatalog[0];
    },
    serviceStyle(key) {
      const service = this.serviceMeta(key);
      if (service.iconType === 'svg') {
        return {
          background: 'transparent',
          color: 'inherit',
          border: 'none',
        };
      }

return {
        background: service.bg,
        color: service.color,
        border: service.border ? `1px solid ${service.border}` : 'none',
      };
    },
    hasService(key) {
      const normalizedKey = this.normalizeServiceKey(key);
      return this.row.hb_bottom_services.some((item) => {
        return this.normalizeServiceKey(item.key) === normalizedKey;
      });
    },
    toggleService(key, event) {
      const normalizedKey = this.normalizeServiceKey(key);
      const checked = event.target.checked;

if (checked) {
        if (this.hasService(normalizedKey)) {
          return;
        }
        if (this.row.hb_bottom_services.length >= 3) {
          event.target.checked = false;
          this.lib.alert('하단 버튼은 최대 3개까지 가능');
          return;
        }

this.row.hb_bottom_services.push({
          key: normalizedKey,
          value: '',
        });
        return;
      }

this.row.hb_bottom_services = this.row.hb_bottom_services.filter((item) => {
        return this.normalizeServiceKey(item.key) !== normalizedKey;
      });
    },
    async uploadFile(file, memo) {
      const sessions = await this.session.all();
      const res = await this.lib.ajax("file_save", {
        user_idx: sessions.mem_idx || '',
        upload_file: file,
        memo,
        site_code: this.site_code,
      });

return res?.file?.src || '';
    },
    async processUploads() {
      if (this.row.logo_upload_file) {
        const src = await this.uploadFile(this.row.logo_upload_file, 'jd_mobile_top_logo');
        if (src) {
          this.row.logo_image_src = src;
        }
        this.row.logo_upload_file = '';
      }

if (this.row.button_icon_upload_file) {
        const src = await this.uploadFile(this.row.button_icon_upload_file, 'jd_mobile_top_button');
        if (src) {
          this.row.button_icon_src = src;
        }
        this.row.button_icon_mode = 'image';
        this.row.button_icon_upload_file = '';
        this.revokeButtonIconPreview();
      }

if (this.row.hb_logo_upload_file) {
        const src = await this.uploadFile(this.row.hb_logo_upload_file, 'jd_mobile_top_hb_logo');
        if (src) {
          this.row.hb_logo_image_src = src;
        }
        this.row.hb_logo_upload_file = '';
      }
    },
    nowDatetime() {
      const d = new Date();
      const p = (n) => String(n).padStart(2, '0');

return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
    },
    serialize() {
      const now = this.nowDatetime();
      const payload = {
        primary: this.row.idx || '',
        idx: this.row.idx || '',
        site_code: this.site_code,
        member_code: this.member_code,
        top_height: this.row.top_height,
        top_bg_color: this.row.top_bg_color,
        top_fixed: this.row.top_fixed ? 'Y' : 'N',
        top_shadow_use: this.row.top_shadow_use ? 'Y' : 'N',
        top_shadow_opacity: this.row.top_shadow_opacity,
        slot_left: this.row.slot_left,
        slot_center: this.row.slot_center,
        slot_right_1: this.row.slot_right_1,
        slot_right_2: this.row.slot_right_2,
        logo_type: this.row.logo_type,
        logo_text: this.row.logo_text,
        logo_font: this.row.logo_font,
        logo_font_size: this.row.logo_font_size,
        logo_font_color: this.row.logo_font_color,
        logo_image_src: this.row.logo_image_src,
        logo_image_size: this.row.logo_image_size,
        menu_icon_style: this.row.menu_icon_style,
        menu_icon_color: this.row.menu_icon_color,
        menu_icon_size: this.row.menu_icon_size,
        button_type: this.row.button_type,
        button_value: this.row.button_value,
        button_icon_mode: this.row.button_icon_mode,
        button_icon_src: this.row.button_icon_src,
        button_icon_color: this.row.button_icon_color,
        button_icon_size: this.row.button_icon_size,
        submenu_type: this.row.submenu_type,
        submenu_height: this.row.submenu_height,
        submenu_font_size: this.row.submenu_font_size,
        submenu_inactive_bg_color: this.row.submenu_inactive_bg_color,
        submenu_inactive_font_color: this.row.submenu_inactive_font_color,
        submenu_inactive_border_color: this.row.submenu_inactive_border_color,
        submenu_active_bg_color: this.row.submenu_active_bg_color,
        submenu_active_font_color: this.row.submenu_active_font_color,
        submenu_active_border_color: this.row.submenu_active_border_color,
        hb_position: this.row.hb_position,
        hb_top_bg_color: this.row.hb_top_bg_color,
        hb_close_color: this.row.hb_close_color,
        hb_logo_use: this.row.hb_logo_use ? 'Y' : 'N',
        hb_logo_image_src: this.row.hb_logo_image_src,
        hb_logo_size: this.row.hb_logo_size,
        hb_show_nickname: this.row.hb_show_nickname ? 'Y' : 'N',
        hb_show_email: this.row.hb_show_email ? 'Y' : 'N',
        hb_info_font_color: this.row.hb_info_font_color,
        hb_auth_bg_color: this.row.hb_auth_bg_color,
        hb_auth_font_color: this.row.hb_auth_font_color,
        hb_auth_border_color: this.row.hb_auth_border_color,
        hb_menu_bg_color: this.row.hb_menu_bg_color,
        hb_menu_divider_color: this.row.hb_menu_divider_color,
        hb_menu_arrow_color: this.row.hb_menu_arrow_color,
        hb_menu_font_size: this.row.hb_menu_font_size,
        hb_menu_font_color: this.row.hb_menu_font_color,
        hb_submenu_font_size: this.row.hb_submenu_font_size,
        hb_submenu_font_color: this.row.hb_submenu_font_color,
        hb_bottom_bg_color: this.row.hb_bottom_bg_color,
        hb_bottom_button_1_type: '',
        hb_bottom_button_1_value: '',
        hb_bottom_button_2_type: '',
        hb_bottom_button_2_value: '',
        hb_bottom_button_3_type: '',
        hb_bottom_button_3_value: '',
        update_date: now,
      };

if (!this.row.idx) {
        payload.insert_date = now;
      }

this.selectedServices.forEach((service, index) => {
        const no = index + 1;
        payload[`hb_bottom_button_${no}_type`] = service.key;
        payload[`hb_bottom_button_${no}_value`] = service.value || '';
      });

return payload;
    },
    async save() {
      window.design?.loadingOn?.();

this.activeSlot = '';
      await this.processUploads();
      await this.table.post(this.serialize(), { return: true });
      await this.loadRow();

window.design?.menu?.reload?.();
      window.design?.loadingOff?.();

$('#mobile_top_setting_jd').modal('hide');
    }
  }
}});
</script>
<style>
.jdmt{background:#fff;min-height:560px;display:flex;flex-direction:column;font-size:14px}
.jdmt-head{padding:16px 24px;border-bottom:1px solid #ececec;text-align:center}
.jdmt-title{font-size:18px;font-weight:700;color:#222}
.jdmt-body{padding:18px 20px 24px;display:flex;flex-direction:column;gap:14px}
.jdmt-tabs{display:inline-flex;flex-wrap:wrap;border:1px solid #ddd;border-radius:14px;overflow:hidden;width:fit-content;max-width:100%}
.jdmt-tab{min-width:152px;height:48px;border:0;background:#fff;font-size:14px;font-weight:700;color:#222;border-right:1px solid #ddd;padding:0 16px}
.jdmt-tab:last-child{border-right:0}
.jdmt-tab.on{background:#ff9b84;color:#fff}
.jdmt-sec{border-top:1px solid #ececec;padding-top:28px}
.jdmt-sec + .jdmt-sec{margin-top:34px}
.jdmt-sec:after{display:none !important;content:none !important}
.jd-image-modal-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:#222;margin:0 0 16px}
.jd-image-modal-title img{display:block;height:18px;width:auto;flex:none}
.jdmt-grid{display:grid;gap:14px 18px;align-items:end}
.jdmt-grid4{grid-template-columns:repeat(4,minmax(180px,1fr))}
.jdmt-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.jdmt-field{display:flex;flex-direction:column;gap:6px}
.jdmt-picker-field{align-items:center;text-align:center}
.jdmt-span2{grid-column:span 2}
.jdmt-span4{grid-column:1 / -1}
.jdmt-field label{font-size:13px;font-weight:600;color:#333;margin:0;line-height:1.4}
.jdmt-help-label{display:inline-flex;align-items:center;gap:6px}
.jdmt-help-wrap{position:relative;display:inline-flex;align-items:center}
.jdmt-help-icon{width:18px;height:18px;border:0;border-radius:50%;background:#8e939a;color:#fff;font-size:11px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.jdmt-help-tooltip{display:none;position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);width:360px;max-width:calc(100vw - 40px);height:auto;min-height:0;box-sizing:border-box;background:#fff;color:#666;padding:12px 14px;border:1px solid #d8d8d8;border-radius:6px;font-size:12px;font-weight:500;line-height:1.55;box-shadow:0 4px 10px rgba(0,0,0,.08);z-index:5000;white-space:normal;word-break:keep-all;overflow:visible;pointer-events:none}
.jdmt-help-tooltip:before{content:'';position:absolute;left:50%;bottom:-7px;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:#fff;border-right:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8}
.jdmt-help-tooltip.active{display:block}
.jdmt-button-settings-grid .jdmt-help-tooltip{left:auto;right:0;transform:none}
.jdmt-button-settings-grid .jdmt-help-tooltip:before{left:auto;right:3px;transform:rotate(45deg)}
.jdmt-inline,.jdmt-check,.jdmt-shape-row,.jdmt-button-type-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.jdmt-number-inline{display:inline-flex;flex-wrap:nowrap;align-items:center;gap:8px}
.jdmt-font-inline{align-items:center}
.jdmt-check{margin:0}
.jdmt-check input[type=checkbox],
.jdmt-check input[type=radio]{width:16px;height:16px;accent-color:#ff5a47;margin:0}
.jdmt-field-toggle{justify-content:flex-end}
.jdmt-check-lg{gap:10px;flex-wrap:nowrap}
.jdmt-check-lg span{font-size:15px;font-weight:600;color:#333;line-height:1;white-space:nowrap}
.jdmt-check-lg input[type=checkbox],
.jdmt-check-lg input[type=radio]{width:18px;height:18px}
.jdmt-shadow-inline{display:inline-flex;align-items:center;gap:12px;flex-wrap:nowrap}
.jdmt-basic-row{display:flex;align-items:flex-start;gap:28px;flex-wrap:wrap}
.jdmt-basic-row .jdmt-field{flex:none}
.jdmt-basic-height{width:auto}
.jdmt-basic-color{width:auto;min-width:118px;align-items:center;text-align:center}
.jdmt-basic-toggle{height:auto;justify-content:flex-start;padding-top:24px}
.jdmt-basic-shadow{height:auto;justify-content:flex-start;padding-top:24px}
.jdmt-basic-row .jdmt-check-lg,
.jdmt-basic-row .jdmt-shadow-inline{min-height:36px}
.jdmt .jdmt-basic-row .form-control{height:36px}
.jdmt-logo-layout{display:flex;align-items:flex-start;gap:28px;flex-wrap:nowrap}
.jdmt-logo-type-field{gap:8px;flex:none;width:200px}
.jdmt-logo-type-group{display:flex;flex-wrap:nowrap;gap:8px}
.jdmt-logo-type-option{position:relative;display:flex;flex-direction:column;gap:8px;cursor:pointer;margin:0}
.jdmt-logo-type-option input{position:absolute;opacity:0;pointer-events:none}
.jdmt-logo-type-thumb{width:92px;height:50px;border:1px solid #222;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#fff;transition:.15s ease}
.jdmt-logo-type-thumb img{max-width:74px;max-height:30px;width:auto;height:auto}
.jdmt-logo-type-caption{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:#333;line-height:1}
.jdmt-logo-type-radio{width:14px;height:14px;border:1.5px solid #bdbdbd;border-radius:50%;background:#fff;position:relative;flex:none}
.jdmt-logo-type-option.on .jdmt-logo-type-thumb{border-color:#ff6b45;box-shadow:inset 0 0 0 1px #ff6b45}
.jdmt-logo-type-option.on .jdmt-logo-type-radio{border-color:#ff6b45}
.jdmt-logo-type-radio-dot{position:absolute;inset:3px;border-radius:50%;background:#ff6b45}
.jdmt-submenu-type-field{gap:10px}
.jdmt-submenu-type-group{display:flex;align-items:flex-start;gap:22px;flex-wrap:nowrap}
.jdmt-submenu-type-option{position:relative;display:flex;flex-direction:column;gap:8px;cursor:pointer;margin:0;padding:0;border:0;background:transparent;text-align:left}
.jdmt-submenu-type-thumb{width:126px;height:38px;display:flex;align-items:flex-end;justify-content:center}
.jdmt-submenu-type-thumb img{display:block;max-width:126px;max-height:38px;width:auto;height:auto}
.jdmt-submenu-type-caption{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:#333;line-height:1}
.jdmt-submenu-type-radio{width:16px;height:16px;border:1.5px solid #bdbdbd;border-radius:50%;background:#fff;position:relative;flex:none}
.jdmt-submenu-type-radio.on{border-color:#ff6b45}
.jdmt-submenu-type-radio-dot{position:absolute;inset:3px;border-radius:50%;background:#ff6b45}
.jdmt-submenu-config-grid{align-items:start}
.jdmt-logo-controls{display:grid;align-items:start;gap:14px 14px;flex:none;min-width:0}
.jdmt-logo-controls-image{grid-template-columns:max-content 104px}
.jdmt-logo-controls-text{grid-template-columns:220px 150px 92px 52px}
.jdmt-logo-upload-field .jdmt-inline{flex-wrap:nowrap}
.jdmt-logo-upload-field .jdmt-preview{min-width:64px}
.jdmt-logo-size-field{width:104px}
.jdmt .form-control{height:34px;font-size:13px;padding:6px 10px}
.jdmt-mini{width:82px}
.jdmt-type{width:110px}
.jdmt-grow{flex:1;min-width:220px}
.jdmt-menu-settings-grid{grid-template-columns:258px 92px 124px;gap:14px 34px;align-items:start;justify-content:start}
.jdmt-menu-settings-grid .jdmt-span2{grid-column:auto}
.jdmt-menu-shape-row{display:flex;align-items:center;gap:7px;flex-wrap:nowrap}
.jdmt-menu-style-field{min-width:0}
.jdmt-button-settings-grid{grid-template-columns:minmax(340px,1fr) max-content 124px;gap:14px 28px;align-items:end}
.jdmt-button-action-field .jdmt-inline{flex-wrap:nowrap}
.jdmt-button-icon-field{justify-self:center}
.jdmt-button-icon-field .jdmt-inline{flex-wrap:nowrap}
.jdmt-button-icon-field .jdmt-preview{flex:none}
.jdmt-number-input{width:78px !important;min-width:78px}
.jdmt-unit{display:inline-flex;align-items:center;font-size:13px;color:#555;white-space:nowrap}
.jdmt-help{font-size:12px;color:#8b8b8b;line-height:1.5}
.jdmt-top{width:min(660px,100%);margin:0 auto 52px;border:1px solid #cfcfcf;display:grid;grid-template-columns:minmax(110px,1fr) minmax(110px,1fr) 58px 58px;gap:12px;align-items:center;padding:0 16px;box-sizing:border-box}
.jdmt-preview-stack .jdmt-top{position:relative;width:400px;max-width:100%;grid-template-columns:minmax(0,1fr) 52px 52px;grid-template-rows:minmax(0,1fr);gap:8px;padding:0 20px;overflow:visible}
.jdmt-preview-stack .jdmt-top .jdmt-slot.slot_left{grid-column:1;grid-row:1}
.jdmt-preview-stack .jdmt-top .jdmt-slot.slot_center{position:absolute;top:0;bottom:0;left:50%;width:120px;transform:translateX(-50%);z-index:1}
.jdmt-preview-stack .jdmt-top .jdmt-slot.slot_right_1{grid-column:2;grid-row:1}
.jdmt-preview-stack .jdmt-top .jdmt-slot.slot_right_2{grid-column:3;grid-row:1}
.jdmt-top-linked{margin-bottom:0}
.jdmt-top-readonly .jdmt-slot-fill{cursor:default}
.jdmt-slot{height:100%;display:flex;align-items:center;justify-content:center;position:relative}
.jdmt-preview-stack .jdmt-slot{height:100%;min-height:0;align-self:stretch;overflow:visible}
.jdmt-slot.slot_left{justify-content:flex-start}
.jdmt-slot-readonly{width:100%;display:flex;justify-content:center}
.jdmt-slot.slot_left .jdmt-slot-readonly{justify-content:flex-start}
.jdmt-slot-placeholder{width:40px;height:40px}
.jdmt-slot-empty{position:relative;width:40px;height:40px;border:2px dashed #d1d1d1;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:28px;cursor:pointer;transition:.15s ease}
.jdmt-slot-empty.on{background:#e6f2ff;border-color:#9ec6f5;color:#89aed8}
.jdmt-slot-actions{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;z-index:20}
.jdmt-slot-fill{width:100%;display:flex;justify-content:center;position:relative;cursor:grab}
.jdmt-preview-stack .jdmt-slot-fill{height:100%;min-height:0;align-items:center}
.jdmt-preview-stack .jdmt-slot-readonly{height:100%;min-height:0;align-items:center}
.jdmt-slot.slot_left .jdmt-slot-fill{justify-content:flex-start}
.jdmt-slot.slot_left .jdmt-slot-empty{margin-right:auto}
.jdmt-slot-bg{background:transparent;min-width:52px;min-height:100%;display:flex;align-items:center;justify-content:center;padding:0 6px}
.jdmt-preview-stack .jdmt-slot-bg{height:100%;min-height:0;max-height:none;overflow:visible}
.jdmt-preview-stack .jdmt-slot-bg>span:not(.jdmt-logo-text):not(.jdmt-fallback){display:inline-flex;align-items:center;justify-content:center;line-height:0}
.jdmt-preview-stack .jdmt-slot-bg i,
.jdmt-preview-stack .jdmt-slot-bg svg,
.jdmt-preview-stack .jdmt-slot-bg .jdmt-hamburger-icon{display:block !important;line-height:1}
.jdmt-float-btn{border:1px solid #c8c8c8;background:#fff;border-radius:10px;padding:4px 10px;font-size:12px;color:#ff5d44;box-shadow:0 8px 20px rgba(0,0,0,.08);white-space:nowrap}
.jdmt-slot-fill>.jdmt-float-btn{position:absolute;bottom:-42px;left:50%;transform:translateX(-50%);z-index:21}
.jdmt-slot.slot_left .jdmt-slot-fill>.jdmt-float-btn{left:0;transform:none}
.jdmt-logo-img{display:block;width:auto;max-width:none;max-height:none;object-fit:contain;flex:none}
.jdmt-logo-text{font-weight:700}
.jdmt-btn-img{display:block;width:auto;max-width:100%;object-fit:contain}
.jdmt-preview-btn-img{flex:none}
.jdmt-fallback{font-size:18px;font-weight:700;color:#b1b1b1}
.jdmt-btn{min-width:96px;height:40px;border-radius:10px;border:1px solid #d6d6d6;font-size:14px;font-weight:700;padding:0 14px}
.jdmt-orange{background:#ff6b45;border-color:#ff6b45;color:#fff}
.jdmt-white{background:#fff;color:#444}
.jdmt-preview{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:74px;min-height:40px;padding:4px 10px;border:1px solid #d7d7d7;border-radius:10px;background:#fff}
.jdmt-preview img{max-width:96px;max-height:30px;object-fit:contain}
.jdmt-remove{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;border:1px solid #bbb;background:#fff;font-size:14px;line-height:1}
.jdmt-shape{width:58px;height:42px;border-radius:8px;border:1px solid #d0d0d0;background:#fff;display:inline-flex;align-items:center;justify-content:center;padding:0}
.jdmt-shape.on{border-color:#ff6b45;box-shadow:inset 0 0 0 1px #ff6b45}
.jdmt-sub-preview{display:flex;flex-direction:column;align-items:center}
.jdmt-sub-preview .jdmt-sub-none{border-top:0}
.jdmt-sub-top{width:min(660px,100%);height:70px;border:1px solid #d0d0d0;display:flex;align-items:center;justify-content:center;color:#d1d1d1;font-size:16px;font-weight:700}
.jdmt-sub-slide,.jdmt-sub-table{width:400px;max-width:100%;border-left:1px solid #d0d0d0;border-right:1px solid #d0d0d0;border-bottom:1px solid #d0d0d0;box-sizing:border-box}
.jdmt-sub-slide{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}
.jdmt-sub-table{display:flex;flex-wrap:wrap;overflow:hidden}
.jdmt-sub-slide .jdmt-sub-item{flex:1 1 0;min-width:max-content;white-space:nowrap}
.jdmt-sub-table .jdmt-sub-item{flex:1 0 25%;min-width:0}
.jdmt-sub-table .jdmt-sub-item:nth-child(4n),
.jdmt-sub-table .jdmt-sub-item:last-child{border-right:0}
.jdmt-sub-item{text-align:center;border-right:1px solid transparent;border-bottom:1px solid transparent;font-weight:700;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 14px}
.jdmt-sub-none{width:400px;max-width:100%;height:70px;border:1px solid #d0d0d0;display:flex;align-items:center;justify-content:center;color:#d1d1d1;font-size:16px;font-weight:700}
.jdmt-status{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.jdmt-box{border:1px solid #ececec;border-radius:14px;padding:16px}
.jdmt-box-title{font-size:14px;font-weight:700;margin-bottom:12px}
.jdmt-drawer-wrap{display:flex;justify-content:center}
.jdmt-drawer{width:286px;min-height:380px;border:1px solid #d0d0d0;background:#fff;display:flex;flex-direction:column}
.jdmt-drawer.left{margin-right:auto}
.jdmt-drawer-top{min-height:52px;box-sizing:border-box;padding:14px 14px 8px;position:relative}
.jdmt-drawer-close{position:absolute;top:8px;right:12px;width:36px;height:36px;border:0;background:transparent;font-size:0;line-height:1;padding:0;color:inherit}
.jdmt-drawer-close:before,.jdmt-drawer-close:after{content:"";position:absolute;top:50%;left:50%;width:25px;height:1.5px;background:currentColor;border-radius:999px;transform-origin:center}
.jdmt-drawer-close:before{transform:translate(-50%,-50%) rotate(45deg)}
.jdmt-drawer-close:after{transform:translate(-50%,-50%) rotate(-45deg)}
.jdmt-drawer-logo{margin-bottom:12px}
.jdmt-drawer-logo img{max-width:92px;max-height:32px;object-fit:contain}
.jdmt-drawer-logo-empty{width:92px;height:32px;border:1px dashed #d4d4d4;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#b6b6b6;background:#fafafa}
.jdmt-drawer-member{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;font-size:13px;font-weight:600}
.jdmt-auth{height:28px;min-width:102px;border:1px solid;border-radius:2px;background:#fff;font-size:13px;font-weight:500}
.jdmt-drawer-main{min-height:52px;border-top:1px solid;display:flex;align-items:center;justify-content:space-between;padding:0 14px}
.jdmt-drawer-sub{border-top:1px solid;padding:14px 14px 14px 30px;display:flex;flex-direction:column;gap:14px}
.jdmt-drawer-sub-item{text-align:left}
.jdmt-drawer-bottom{margin-top:auto;min-height:70px;display:flex;align-items:center;justify-content:center;gap:16px;padding:12px}
.jdmt-hb-main{display:flex;flex-direction:column;gap:24px}
.jdmt-hb-block{display:flex;flex-direction:column;gap:12px}
.jdmt-hb-block-title{font-size:13px;font-weight:700;color:#222}
.jdmt-hb-grid{display:grid;gap:14px 18px;align-items:end}
.jdmt-hb-grid-basic{grid-template-columns:minmax(160px,200px)}
.jdmt-hb-grid-top,.jdmt-hb-grid-menu{grid-template-columns:repeat(5,minmax(0,1fr))}
.jdmt-hb-grid-login{grid-template-columns:max-content repeat(4,max-content);column-gap:24px;justify-content:start;align-items:start}
.jdmt-hb-field-sm{max-width:180px}
.jdmt-hb-toggle-field{justify-content:flex-end}
.jdmt-hb-toggle-field .jdmt-check{min-height:34px}
.jdmt-hb-logo-field{justify-content:flex-end}
.jdmt-hb-logo-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:34px}
.jdmt-hb-logo-inline .jdmt-check{min-height:34px}
.jdmt-hb-upload{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.jdmt-hb-upload .jdmt-preview{min-width:64px}
.jdmt-hb-check-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;min-height:42px}
.jdmt-hb-login-visibility{justify-content:flex-start}
.jdmt-hb-login-color{justify-content:flex-start}
.jdmt-hb-login-color label{white-space:nowrap}
.jdmt-hb-login-color .external-picker{align-self:flex-start}
.jdmt-hb-service-list{display:grid;grid-template-columns:repeat(8,minmax(72px,1fr));gap:18px 12px}
.jdmt-hb-service-item{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;cursor:pointer;margin:0}
.jdmt-hb-service-item input[type=checkbox]{width:16px;height:16px;accent-color:#ff5a47;margin:0}
.jdmt-hb-service-item.on .jdmt-hb-service-icon{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.12)}
.jdmt-hb-service-icon{transition:transform .15s ease, box-shadow .15s ease}
.jdmt-hb-service-name{font-size:12px;font-weight:600;color:#333;line-height:1.35;word-break:keep-all}
.jdmt-hb-service-check{display:flex;align-items:center;justify-content:center;min-height:20px}
.jdmt-hb-link-list{display:grid;gap:12px;margin-top:22px}
.jdmt-hb-preview-block{padding-top:0}
.jdmt-drawer-wrap-hb{justify-content:center}
.jdmt-drawer-wrap-hb .jdmt-drawer{width:286px;min-height:680px}
.jdmt-hb-shell{padding-top:0;border-top:0}
.jdmt-hb-page-title{margin:8px 0 18px;font-size:18px}
.jdmt-hb-layout{display:grid;grid-template-columns:286px minmax(0,1fr);gap:32px;align-items:start}
.jdmt-hb-aside{padding-top:6px}
.jdmt-hb-panel{display:flex;flex-direction:column;gap:24px;min-width:0}
.jdmt-hb-panel-section{padding-bottom:22px;border-bottom:1px solid #ececec}
.jdmt-hb-panel-section:last-child{padding-bottom:0;border-bottom:0}
.jdmt-hb-panel-title{font-size:17px;font-weight:700;color:#222;line-height:1.35;margin:0 0 14px}
.jdmt-hb-inline-stack{display:flex;flex-direction:column;gap:14px}
.jdmt-hb-inline-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.jdmt-hb-inline-row-checks{gap:12px 28px}
.jdmt-hb-inline-row-fonts{gap:16px 32px}
.jdmt-hb-inline-item{display:inline-flex;align-items:center;gap:10px 12px;flex-wrap:nowrap;min-width:0}
.jdmt-hb-inline-item-grow{display:flex;flex-wrap:wrap}
.jdmt-hb-inline-item-select select{width:102px}
.jdmt-hb-inline-item-size{gap:14px}
.jdmt-hb-inline-label{font-size:13px;font-weight:600;color:#333;line-height:1.4;white-space:nowrap;flex:none}
.jdmt-hb-inline-item .external-picker{flex:none}
 .jdmt-hb-auth-row{display:flex;align-items:flex-end;justify-content:flex-start;gap:16px 24px;flex-wrap:wrap}
.jdmt-hb-auth-title{font-size:13px;font-weight:600;color:#333;line-height:1.4;white-space:nowrap;padding-bottom:6px}
.jdmt-hb-auth-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 18px}
.jdmt-hb-auth-control{display:flex;flex-direction:column;gap:8px;align-items:center;min-width:64px}
.jdmt-hb-auth-label{font-size:13px;font-weight:600;color:#333;line-height:1.4;white-space:nowrap}
.jdmt-hb-font-item{display:inline-flex;align-items:center;gap:10px 12px;flex-wrap:nowrap;min-width:0}
.jdmt-hb-row{display:grid;gap:14px 18px;align-items:end}
.jdmt-hb-row + .jdmt-hb-row{margin-top:14px}
.jdmt-hb-row-basic{grid-template-columns:minmax(180px,200px)}
.jdmt-hb-row-color{grid-template-columns:repeat(2,minmax(0,1fr))}
.jdmt-hb-row-logo{grid-template-columns:minmax(0,1fr) minmax(180px,200px)}
.jdmt-hb-row-checks{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center}
.jdmt-hb-row-login-colors{grid-template-columns:repeat(4,minmax(0,1fr))}
.jdmt-hb-row-menu-colors{grid-template-columns:repeat(3,minmax(0,1fr))}
.jdmt-hb-row-menu-fonts{grid-template-columns:repeat(2,minmax(0,1fr))}
.jdmt-hb-row-services{grid-template-columns:minmax(0,1fr)}
.jdmt-hb-note{font-size:13px;line-height:1.6;color:#8a8a8a;margin-top:8px}
.jdmt-hb-logo-inline{gap:12px 10px;min-height:40px}
.jdmt-hb-logo-inline .jdmt-check{min-height:40px}
.jdmt-hb-row-checks .jdmt-check{min-height:32px}
.jdmt-drawer-wrap-hb .jdmt-drawer-top{min-height:56px;padding:18px 16px 14px}
.jdmt-drawer-wrap-hb .jdmt-drawer-close{top:8px;right:12px;width:40px;height:40px;font-size:0;font-weight:400}
.jdmt-drawer-wrap-hb .jdmt-drawer-close:before,.jdmt-drawer-wrap-hb .jdmt-drawer-close:after{width:28px;height:1.5px}
.jdmt-drawer-wrap-hb .jdmt-drawer-logo{margin-bottom:14px}
.jdmt-drawer-wrap-hb .jdmt-drawer-logo img{max-width:108px;max-height:36px}
.jdmt-drawer-wrap-hb .jdmt-drawer-member{gap:6px;margin-bottom:12px;font-size:13px}
.jdmt-drawer-wrap-hb .jdmt-auth{height:32px;min-width:106px;border-radius:4px;font-size:13px}
.jdmt-drawer-wrap-hb .jdmt-drawer-main{min-height:58px;padding:0 16px}
.jdmt-drawer-wrap-hb .jdmt-drawer-sub{padding:16px 16px 16px 30px;gap:18px}
.jdmt-drawer-wrap-hb .jdmt-drawer-bottom{min-height:132px;padding:16px 14px;align-content:flex-start;flex-wrap:wrap;row-gap:14px}
.jdmt-hb-service-list{display:grid;grid-template-columns:repeat(4,minmax(84px,1fr));gap:26px 18px}
.jdmt-hb-service-item{gap:10px}
.jdmt-hb-service-name{font-size:13px}
.jdmt-services{display:grid;grid-template-columns:repeat(8,minmax(92px,1fr));gap:12px;margin-top:18px}
.jdmt-service-card{border:1px solid #e5e5e5;border-radius:14px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff}
.jdmt-service-card.on{border-color:#ff6b45;box-shadow:inset 0 0 0 1px #ff6b45}
.jdmt-service-circle{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}
.jdmt-drawer-wrap-hb .jdmt-service-circle,.jdmt-service-circle.jdmt-hb-service-icon{width:30px;height:30px;font-size:16px}
.jdmt-service-circle.svg{background:transparent!important;border:0!important}
.jdmt-service-svg{width:100%;height:100%;display:block;object-fit:contain}
.jdmt-service-label{font-size:13px;font-weight:700;color:#333;text-align:center;word-break:keep-all}
.jdmt-service-inputs{margin-top:18px;display:grid;gap:12px}
.jdmt-service-input{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;align-items:center}
.jdmt-service-input-label{font-size:13px;font-weight:700;color:#333}
.jdmt-foot{margin-top:auto;display:flex;justify-content:flex-end;gap:10px;padding:14px 20px 18px;border-top:1px solid #ececec}
@media (max-width:1320px){.jdmt-grid4{grid-template-columns:repeat(3,minmax(180px,1fr))}.jdmt-services{grid-template-columns:repeat(4,minmax(120px,1fr))}.jdmt-logo-controls-text{grid-template-columns:200px 132px 88px 48px}}
@media (max-width:980px){.jdmt-body{padding:18px 16px 28px}.jdmt-grid4,.jdmt-status,.jdmt-grid3,.jdmt-service-input{grid-template-columns:repeat(2,minmax(0,1fr))}.jdmt-menu-shape-row{flex-wrap:wrap}.jdmt-button-settings-grid{grid-template-columns:1fr}.jdmt-button-icon-field{justify-self:start}.jdmt-button-action-field .jdmt-inline,.jdmt-button-icon-field .jdmt-inline{flex-wrap:wrap}.jdmt-top{grid-template-columns:1fr 1fr 54px 54px}.jdmt-services{grid-template-columns:repeat(3,minmax(100px,1fr))}.jdmt-span2{grid-column:auto}.jdmt-span4{grid-column:auto}.jdmt-logo-layout{flex-direction:column;align-items:stretch}.jdmt-logo-type-field{width:auto}.jdmt-logo-type-group{flex-wrap:wrap}.jdmt-logo-controls-image,.jdmt-logo-controls-text{grid-template-columns:repeat(2,minmax(0,1fr))}.jdmt-hb-layout{grid-template-columns:1fr;gap:28px}.jdmt-hb-aside{display:flex;justify-content:center;padding-top:0}.jdmt-hb-inline-row,.jdmt-hb-auth-row,.jdmt-hb-auth-controls{gap:12px 16px}.jdmt-hb-service-list{grid-template-columns:repeat(4,minmax(84px,1fr))}}
@media (max-width:720px){.jdmt-tab{min-width:120px;height:48px;font-size:14px}.jdmt-grid4,.jdmt-status,.jdmt-grid3,.jdmt-service-input{grid-template-columns:1fr}.jdmt-services{grid-template-columns:repeat(2,minmax(120px,1fr))}.jdmt-top{grid-template-columns:1fr 1fr;height:auto!important;padding:12px}.jdmt-slot{min-height:52px}.jdmt-logo-controls-image,.jdmt-logo-controls-text{grid-template-columns:1fr}.jdmt-hb-row-basic,.jdmt-hb-row-color,.jdmt-hb-row-logo,.jdmt-hb-row-login-colors,.jdmt-hb-row-menu-colors,.jdmt-hb-row-menu-fonts{grid-template-columns:1fr}.jdmt-hb-field-sm{max-width:none}.jdmt-hb-service-list{grid-template-columns:repeat(2,minmax(84px,1fr))}.jdmt-drawer-wrap-hb{justify-content:center}.jdmt-drawer-wrap-hb .jdmt-drawer{width:100%;max-width:286px;min-height:620px}}
@media (min-width:721px){.jdmt .jdmt-menu-settings-grid{grid-template-columns:258px 92px 124px;gap:14px 34px;align-items:start;justify-content:start}.jdmt .jdmt-menu-settings-grid .jdmt-span2{grid-column:auto}.jdmt .jdmt-menu-settings-grid .jdmt-menu-shape-row{flex-wrap:nowrap}}
</style>
<script type="text/x-template" id="header-mobile-top-template">
<div v-if="load && row.idx" class="jdmth" :class="{'jdmth-design':isDesign}">
    <div v-if="row.top_fixed && !isDesign" class="jdmth-spacer" :style="{height:fixedHeight+'px'}"></div>

<div v-if="mobileLoginEnabled && (row.hb_show_nickname || row.hb_show_email)" class="jdmth-drawer-member" :style="{color:row.hb_info_font_color}">
                <div v-if="row.hb_show_nickname && memberName">{{memberName}}</div>
                <div v-if="row.hb_show_email && memberEmail">{{memberEmail}}</div>
            </div>

<div v-if="mobileLoginEnabled" class="jdmth-auth-row">
                <button type="button" class="jdmth-auth-btn" :style="authBtnStyle" @click="clickAuth('primary')">{{authPrimaryLabel}}</button>
                <button type="button" class="jdmth-auth-btn" :style="authBtnStyle" @click="clickAuth('secondary')">{{authSecondaryLabel}}</button>
            </div>
        </div>

<div class="jdmth-drawer-menu" :style="{backgroundColor:row.hb_menu_bg_color}">
            <template v-for="item in drawerMenus">
                <button type="button" :key="item.code" class="jdmth-main-item" :style="{borderColor:row.hb_menu_divider_color}" @click="clickDrawerMenu(item)">
                    <span :style="{color:row.hb_menu_font_color,fontSize:row.hb_menu_font_size+'px'}">{{item.name}}</span>
                    <span :style="{color:row.hb_menu_arrow_color}" v-html="drawerArrow(item)"></span>
                </button>
                <div v-if="hasChildren(item) && openMenus[item.code]" :key="item.code + '_sub'" class="jdmth-sub-items" :style="{borderColor:row.hb_menu_divider_color}">
                    <template v-for="sub in childMenus(item)">
                        <button type="button" :key="sub.code" class="jdmth-sub-item" :class="{'has-children':hasChildren(sub)}" :style="{color:row.hb_submenu_font_color,fontSize:row.hb_submenu_font_size+'px'}" @click="clickDrawerMenu(sub)">
                            <span>{{sub.name}}</span>
                            <span v-if="hasChildren(sub)" :style="{color:row.hb_menu_arrow_color}" v-html="drawerSubArrow(sub)"></span>
                        </button>
                        <div v-if="hasChildren(sub) && openMenus[sub.code]" :key="sub.code + '_third'" class="jdmth-third-items">
                            <button v-for="third in childMenus(sub)" :key="third.code" type="button" class="jdmth-third-item" :style="{color:row.hb_submenu_font_color,fontSize:row.hb_submenu_font_size+'px'}" @click="clickMenu(third)">
                                {{third.name}}
                            </button>
                        </div>
                    </template>
                </div>
            </template>
        </div>

<div v-if="selectedServices.length" class="jdmth-drawer-bottom" :style="{backgroundColor:row.hb_bottom_bg_color}">
            <button v-for="service in selectedServices" :key="service.key" type="button" class="jdmth-service-btn" @click="clickService(service)">
                <span class="jdmth-service-circle" :class="{svg:serviceMeta(service.key).iconType==='svg'}" :style="serviceStyle(service.key)">
                    <template v-if="serviceMeta(service.key).iconType==='fa'">
                        <i :class="serviceMeta(service.key).icon"></i>
                    </template>
                    <template v-else-if="serviceMeta(service.key).iconType==='svg'">
                        <img :src="serviceMeta(service.key).src" class="jdmth-service-svg">
                    </template>
                    <template v-else>
                        {{serviceMeta(service.key).short}}
                    </template>
                </span>
            </button>
        </div>
    </div>
</div>
</script>

JayDream_components.push({name:"header-mobile-top",object:{
    template:"#header-mobile-top-template",
    props:{
        site_code:{type:String,default:""},
        is_design:{type:String,default:"N"},
    },
    data(){
        return {
            load:false,
            component_name:"header-mobile-top",
            component_idx:"",
            injectUrls:[
                'https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css',
                'https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css',
                'https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css',
                'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js',
            ],
            menus:[],
            row:{},
            drawerOpen:false,
            openMenus:{},
            member:null,
            mobileLoginEnabled:false,
            serviceCatalog:JDMTH_SERVICES,
        };
    },
    async created(){
        this.component_idx = this.lib.generateUniqueId();
        this.api.component_name = this.component_name;
        this.row = this.defaultRow();
    },
    async mounted(){
        await this.loadMenus();
        await this.loadHeaderSetting();
        await this.loadMember();
        await this.loadRow();
        this.initOpenMenus();
        this.load = true;
    },
    beforeDestroy(){
        this.setDrawerBodyClass(false);
    },
    computed:{
        slotKeys(){return ['slot_left','slot_center','slot_right_1','slot_right_2'];},
        isDesign(){return this.is_design === 'Y' || this.is_design === true;},
        logoSrc(){return this.row.logo_image_src || '';},
        drawerLogoSrc(){return this.row.hb_logo_image_src || this.row.logo_image_src || '';},
        buttonSrc(){return this.row.button_icon_src || '';},
        parsedButtonIcon(){if(!this.row.button_icon_src || this.row.button_icon_mode==='image') return null; const parts=String(this.row.button_icon_src).split(':'); if(parts.length < 2) return null; return {library:parts[0],name:parts[1]};},
        buttonIconClass(){if(!this.parsedButtonIcon) return ''; const {library,name}=this.parsedButtonIcon; if(library === 'bootstrap') return `bi bi-${name}`; if(library === 'phosphor') return `ph ph-${name}`; if(library === 'simpleline') return `icon-${name}`; return '';},
        buttonIconStyle(){return {color:this.row.button_icon_color,fontSize:`${this.row.button_icon_size}px`,display:'inline-flex',alignItems:'center',justifyContent:'center',lineHeight:1};},
        buttonImageStyle(){const size = Math.max(1, Number(this.row.button_icon_size || 30)); return `width:${size}px !important;height:${size}px !important;max-width:none !important;max-height:none !important;object-fit:contain !important;display:block !important;`;},
        logoImageStyle(){return {height:`${Number(this.row.logo_image_size || 30)}px`,width:'auto',maxWidth:'none',maxHeight:'none',objectFit:'contain',display:'block',flex:'none'};},
        logoTextStyle(){return {fontFamily:`${this.row.logo_font}, sans-serif`,color:this.row.logo_font_color,fontSize:`${this.row.logo_font_size}px`,fontWeight:700};},
        topStyle(){return {height:`${this.resolvedTopHeight}px`,backgroundColor:this.row.top_bg_color,boxShadow:this.row.top_shadow_use?`0 4px 8px rgba(0,0,0,${(this.row.top_shadow_opacity||10)/100})`:'none'};},
        showSubmenu(){return this.row.submenu_type === 'slide' || this.row.submenu_type === 'table';},
        submenuItems(){return this.menus;},
        drawerMenus(){return this.menus;},
        fixedHeight(){return this.resolvedTopHeight;},
        resolvedTopHeight(){const topHeight = Number(this.row.top_height || 50); const logoSize = Number(this.row.logo_image_size || 30); const hasImageLogo = this.row.logo_type === 'image' && this.slotKeys.some(slot => this.row[slot] === 'logo'); return Math.max(topHeight, hasImageLogo ? logoSize : 0);},
        memberName(){return this.member?.name || this.member?.nick || this.member?.nick_name || '';},
        memberEmail(){return this.member?.email || '';},
        authPrimaryLabel(){return this.member ? '로그아웃' : '로그인';},
        authSecondaryLabel(){return this.member ? '마이페이지' : '회원가입';},
        authBtnStyle(){return {backgroundColor:this.row.hb_auth_bg_color,color:this.row.hb_auth_font_color,borderColor:this.row.hb_auth_border_color};},
        selectedServices(){
            const rows = [];
            [1,2,3].forEach(index => {
                const key = this.normalizeServiceKey(this.row[`hb_bottom_button_${index}_type`]);
                const value = this.row[`hb_bottom_button_${index}_value`] || '';
                if(key) rows.push({key,value});
            });
            return rows;
        },
    },
    methods:{
        defaultRow(){
            return {
                idx:'',
                top_height:50,top_bg_color:'#ffffff',top_fixed:true,top_shadow_use:false,top_shadow_opacity:10,
                slot_left:'logo',slot_center:'',slot_right_1:'',slot_right_2:'menu',
                logo_type:'image',logo_text:'',logo_font:'Pretendard',logo_font_size:14,logo_font_color:'#000000',logo_image_src:'',logo_image_size:30,
                menu_icon_style:'shape1',menu_icon_color:'#000000',menu_icon_size:30,
                button_type:'link',button_value:'',button_icon_mode:'',button_icon_src:'',button_icon_color:'#000000',button_icon_size:30,
                submenu_type:'slide',submenu_height:30,submenu_font_size:14,submenu_inactive_bg_color:'#ffffff',submenu_inactive_font_color:'#000000',submenu_inactive_border_color:'#a4a4a4',submenu_active_bg_color:'#373737',submenu_active_font_color:'#ffffff',submenu_active_border_color:'#a4a4a4',
                hb_position:'right',hb_top_bg_color:'#ffffff',hb_close_color:'#000000',hb_logo_use:false,hb_logo_image_src:'',hb_logo_size:20,hb_show_nickname:true,hb_show_email:true,hb_info_font_color:'#000000',hb_auth_bg_color:'#ffffff',hb_auth_font_color:'#000000',hb_auth_border_color:'#d3d3d3',hb_menu_bg_color:'#ffffff',hb_menu_divider_color:'#d3d3d3',hb_menu_arrow_color:'#000000',hb_menu_font_size:16,hb_menu_font_color:'#000000',hb_submenu_font_size:14,hb_submenu_font_color:'#454545',hb_bottom_bg_color:'#ffffff',
                hb_bottom_button_1_type:'',hb_bottom_button_1_value:'',hb_bottom_button_2_type:'',hb_bottom_button_2_value:'',hb_bottom_button_3_type:'',hb_bottom_button_3_value:'',
            };
        },
        toBool(value, def){
            if(value === undefined || value === null || value === '') return def;
            return value === true || value === 'Y' || value === 'true' || value === '1' || value === 1;
        },
        async loadMenus(){
            let table = await this.api.table("menu");
            table.where("site_code",this.site_code);
            table.where("is_use_header","Y");
            table.orderBy("order","ASC");
            this.menus = this.buildMenuTree(await table.get());
        },
        buildMenuTree(rows){
            const map = {};
            const roots = [];
            const sortByOrder = (a, b) => (parseInt(a.order || 0, 10) || 0) - (parseInt(b.order || 0, 10) || 0);

(rows || []).forEach(row => {
                row.second = [];
                row.$second = {data: row.second};
                map[row.code] = row;
            });

(rows || []).forEach(row => {
                const parentCode = row.parent_code === null || row.parent_code === undefined ? '' : String(row.parent_code);
                if(parentCode && parentCode !== 'null' && map[parentCode]){
                    map[parentCode].second.push(row);
                    map[parentCode].$second = {data: map[parentCode].second};
                }else{
                    roots.push(row);
                }
            });

Object.keys(map).forEach(code => {
                map[code].second.sort(sortByOrder);
            });
            return roots.sort(sortByOrder);
        },
        async loadMember(){
            const sessions = await this.session.all();
            if(!sessions[`site_mem_${this.site_code}`]) return;
            let table = this.api.table("site_member");
            this.member = (await table.where("idx",sessions[`site_mem_${this.site_code}`]).get())[0] || null;
        },
        parseSettingData(value){
            if(!value) return {};
            if(typeof value === 'object') return value;
            try{
                return JSON.parse(value) || {};
            }catch(e){
                return {};
            }
        },
        async loadHeaderSetting(){
            const table = await this.api.table("header");
            table.where("site_code",this.site_code);
            const header = (await table.get())[0] || {};
            const settingData = this.parseSettingData(header.setting_data || header.settingData);
            this.mobileLoginEnabled = settingData.is_use_mobile_login === 'Y';
        },
        async loadRow(){
            let table = await this.api.table("jd_mobile_top");
            table.where("site_code",this.site_code);
            const rows = await table.get();
            if(!rows.length) return;
            this.row = this.hydrate(rows[0]);
        },
        hydrate(raw){
            const row = Object.assign(this.defaultRow(), raw || {});
            ['top_height','top_shadow_opacity','logo_font_size','logo_image_size','menu_icon_size','button_icon_size','submenu_height','submenu_font_size','hb_logo_size','hb_menu_font_size','hb_submenu_font_size'].forEach(key => {
                row[key] = parseInt(row[key] || this.defaultRow()[key], 10);
            });
            row.top_fixed = this.toBool(row.top_fixed, true);
            row.top_shadow_use = this.toBool(row.top_shadow_use, false);
            row.hb_logo_use = this.toBool(row.hb_logo_use, false);
            row.hb_show_nickname = this.toBool(row.hb_show_nickname, true);
            row.hb_show_email = this.toBool(row.hb_show_email, true);
            return row;
        },
        initOpenMenus(){
            const openMenus = {};
            this.menus.forEach(item => {
                if(this.hasChildren(item) && this.isActiveParent(item)) openMenus[item.code] = true;
            });
            this.openMenus = openMenus;
        },
        currentPath(){
            return decodeURIComponent((window.location.pathname || '/').replace(/\/+$/,'') || '/');
        },
        normalizeUrl(url){
            const cleaned = String(url || '').trim();
            if(!cleaned) return '/';
            if(cleaned.startsWith('http://') || cleaned.startsWith('https://') || cleaned.startsWith('tel:')) return cleaned;
            return '/' + cleaned.replace(/^\/+/,'');
        },
        isActiveMenu(item){
            const current = this.currentPath();
            const target = this.normalizeUrl(item.url || item.link || '/');
            return current === target || current.indexOf(target + '/') === 0;
        },
        isActiveParent(item){
            if(this.isActiveMenu(item)) return true;
            return this.childMenus(item).some(sub => this.isActiveParent(sub));
        },
        submenuStyle(active){
            return {
                height:`${this.row.submenu_height}px`,
                lineHeight:`${this.row.submenu_height}px`,
                fontSize:`${this.row.submenu_font_size}px`,
                backgroundColor:active ? this.row.submenu_active_bg_color : this.row.submenu_inactive_bg_color,
                color:active ? this.row.submenu_active_font_color : this.row.submenu_inactive_font_color,
                borderColor:active ? this.row.submenu_active_border_color : this.row.submenu_inactive_border_color,
            };
        },
        menuIcon(shape,size,color){
            const safeSize = parseInt(size || 30, 10);
            const iconHeight = Number.isFinite(safeSize) ? Math.max(1, safeSize) : 30;
            const styleNo = Math.min(4, Math.max(1, parseInt(String(shape || 'shape1').replace(/\D/g, ''), 10) || 1));
            const iconWidth = styleNo === 4 ? iconHeight : Math.round(iconHeight * 17 / 16);
            const safeColor = String(color || '#000000').replace(/[;"'<>]/g, '');
            const src = `/file/icon/mobile_top/hambergur_icon_style_${styleNo}.svg`;

return `<span class="jdmth-menu-icon" style="display:inline-block;width:${iconWidth}px;height:${iconHeight}px;background-color:${safeColor};-webkit-mask:url('${src}') center / contain no-repeat;mask:url('${src}') center / contain no-repeat;"></span>`;
        },
        normalizeServiceKey(key){
            if(!key) return '';
            return key === 'center' ? 'customer_center' : key;
        },
        renderFeatherIcon(name,size,color){
            if(typeof feather !== 'undefined' && feather.icons[name]) return feather.icons[name].toSvg({width:size,height:size,color});
            return '';
        },
        iconHtml(src,size,color){
            if(!src) return '';
            const parts = String(src).split(':');
            if(parts.length < 2) return '';
            const library = parts[0];
            const name = parts[1];
            if(library === 'feather' && typeof feather !== 'undefined' && feather.icons[name]) return feather.icons[name].toSvg({width:size,height:size,color});
            if(library === 'bootstrap') return `<i class="bi bi-${name}" style="color:${color};font-size:${size}px;"></i>`;
            if(library === 'phosphor') return `<i class="ph ph-${name}" style="color:${color};font-size:${size}px;"></i>`;
            if(library === 'simpleline') return `<i class="icon-${name}" style="color:${color};font-size:${size}px;"></i>`;
            return '';
        },
        childMenus(item){
            return item?.$second?.data || item?.second || [];
        },
        hasChildren(item){
            return this.childMenus(item).length > 0;
        },
        async clickMenu(item){
            const check = this.checkMenu(item);
            if(check === false) return false;
            if(check === 'mde1'){
                if(this.isDesign) return false;
                await this.lib.alert('로그인 후 이용가능합니다.');
                this.lib.href('/main/login');
                return false;
            }

if(item.is_move_sub1 === 'Y' && this.childMenus(item)[0]) {
                await this.clickMenu(this.childMenus(item)[0]);
                return false;
            }

if(this.isDesign) return false;
            this.closeDrawer();

if(item.link_type === 'tel'){
                window.location.href = `tel:${item.link || item.url || ''}`;
                return;
            }

table : null,
                    row: {},
                    rows : [],

menus : [],

member : null,
                    sub_setting_data : null,
                };
            },
            async created() {
                this.component_idx = this.lib.generateUniqueId();
                this.api.component_name = this.component_name
            },
            async mounted() {
                // this.table = await this.api.table("exam");
                // await this.table.get(this.rows,{paging : 10})
                this.sessions = await this.session.all()

if(this.sessions[`site_mem_${this.site_code}`]) {
                    let table = this.api.table("site_member");
                    this.member = (await table.where("idx",this.sessions[`site_mem_${this.site_code}`]).get())[0];
                }

await this.getMenu();

{
                    let table = this.api.table("header");
                    let header = (await table.where("site_code",this.site_code).get())[0];
                    if(header?.sub_setting_data) this.sub_setting_data = header.sub_setting_data
                }

this.load = true;

this.$nextTick(async () => {
                    // 해당부분에 퍼블리싱 라이브러리,플러그인 선언부분 하시면 됩니다 ex) swiper
                });
            },
            updated() {

},
            methods: {
                styleMenu(item) {
                    let style = {};
                    if(!this.sub_setting_data) return style;

const s = this.sub_setting_data;

const isTableType = !s?.submenu_mobile_type || s?.submenu_mobile_type == "table";

if(isTableType) {
                        const lineCount = s?.text_mobile_line_count || 3; // 기본값 3
                        style.width = `${100 / lineCount}%`;
                    }else {
                        // 메뉴 간격
                        if(s.back_mobile_spacing) {
                            // style.marginLeft = `${s.back_mobile_spacing}px`;
                            style.marginRight = `${s.back_mobile_spacing}px`;
                        }
                    }

// 글자 색상
                    if(s.text_mobile_color) {
                        const opacity = s.text_mobile_color_opacity || 100;
                        style.color = `${s.text_mobile_color}${Math.round(opacity * 2.55).toString(16).padStart(2, '0')}`;
                    }

// 글자 크기
                    if(s.text_mobile_size) style.fontSize = `${s.text_mobile_size}px`;

// 글자 굵기
                    if(s.text_mobile_weight) style.fontWeight = s.text_mobile_weight;

// 자간
                    if(s.text_mobile_letter_spacing) style.letterSpacing = `${s.text_mobile_letter_spacing}px`;

// 배경 색상
                    if(s.back_mobile_color) style.backgroundColor = s.back_mobile_color;

// 메뉴 높이
                    if(s.back_mobile_height) {
                        style.height = `${s.back_mobile_height}px`;
                        style.lineHeight = `${s.back_mobile_height}px`; // 추가
                    }

// 활성 상태 (현재 페이지인 경우)
                    let current = decodeURIComponent(window.location.pathname.replace(/^\//, '').split('/')[0]);
                    let itemPath = item.url?.replace(/^\//, '').split('/')[0] || '';

let isActive = current === itemPath;

if(isActive) {
                        // 활성 배경 색상
                        if(s.h_back_mobile_color) {
                            const opacity = s.h_back_mobile_color_opacity || 100;
                            style.backgroundColor = `${s.h_back_mobile_color}${Math.round(opacity * 2.55).toString(16).padStart(2, '0')}`;
                        }

// 활성 글자 색상
                        if(s.h_text_mobile_color) {
                            const opacity = s.h_text_mobile_color_opacity || 100;
                            style.color = `${s.h_text_mobile_color}${Math.round(opacity * 2.55).toString(16).padStart(2, '0')}`;
                        }

// 활성 밑줄선
                        if(s?.submenu_mobile_type == "slide") {
                            if(s.underline_mobile_color) {
                                const opacity = s.underline_mobile_color_opacity || 100;
                                style.borderBottom = `2px solid ${s.underline_mobile_color}${Math.round(opacity * 2.55).toString(16).padStart(2, '0')}`;
                            }
                        }
                    }

return style;
                },
                async clickMenu(item) {
                    if(this.checkMenu(item) == "mde1") {
                        await this.lib.alert("로그인 후 이용가능합니다.");
                        this.lib.href("/main/login");
                        return false;
                    }

if(item.is_move_sub1 == "Y") {
                        if(item.$second?.data[0]) {
                            await this.clickMenu(item.$second.data[0])
                        }else {
                            if(item.is_new_window == "Y") {
                                this.lib.href(item.url,"_blank")
                            }else {
                                this.lib.href(item.url)
                            }
                        }

return false;
                    }

if(item.link_type == "link" || !item.link_type) {
                        if(item.is_new_window == "Y") {
                            this.lib.href(item.url,"_blank")
                        }else {
                            this.lib.href(item.url)
                        }

}

if(item.link_type == "tel") {
                        window.location.href = `tel:${item.link}`
                    }
                },
                checkMenu(item) {
                    if(item.menu_auth == "all" || !item.menu_auth) {
                        return true;
                    }

if(item.menu_auth == "member") {
                        if(this.member) {
                            return true;
                        }else {
                            if(item.mde2 == "Y") return false
                            if(item.mde1 =="Y") return "mde1"
                            return true;
                        }
                    }

if(item.menu_auth == "admin") {
                        if(this.member?.grade == "A") return true;

return false;
                    }

if(item.menu_auth == "group") {
                        if(this.member?.group_code == item.menu_group) return true;
                        return false;
                    }
                },
                async getMenu() {
                    let table = await this.api.table("menu");

table.where("site_code",this.site_code);
                    table.where("parent_code","null");
                    table.where("is_use_header","Y");
                    table.orderBy("order","ASC");

table.relations("menu","second").where("parent_code","$parent.code");
                    table.relations("second").orderBy("order","ASC");
                    await table.get(this.menus);
                }
            },
            computed: {

},
            watch: {

}
        }});
</script>

/* 실제 모바일(768px 이하)에서 표시 */
    @media all and (max-width:768px) {
        .header-mobile-slide {
            display: block;
        }
    }

/* 모바일 편집모드(_mbv 클래스)일 때 표시 */
    body._mbv .header-mobile-slide {
        display: block;
    }

.header-mobile-slide a {
        display: inline-block;
        padding: 0 15px;
        line-height: inherit;
        vertical-align: middle;
        white-space: nowrap;
    }

.header-mobile-table {
        display: none;
    }

@media all and (max-width:768px) {
        .header-mobile-table {
            display: flex;
            flex-wrap: wrap;
            gap: 0;
        }
    }

/* 모바일 편집모드(_mbv 클래스)일 때 표시 */
    body._mbv .header-mobile-table {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }

.header-mobile-table .menu-item {
        text-align: center;
        cursor: pointer;
        /*padding: 15px 10px;*/
        box-sizing: border-box;
    }
</style><script type="text/x-template" id="design-widget-image-free-modal-template">
    <div v-if="load">
        <external-bs-modal v-model="modelValue" @update:modelValue="value => $emit('update:modelValue', value)">
            <template v-slot:header>
                <h5 class="modal-title" id="exampleModalLabel">무료 이미지</h5>
            </template>

<template v-slot:default>
                <div>
                    <div style="margin-bottom: 15px;">
                        <div style="position: relative;">
                            <input type="text"
                                   class="form-control free-modal-image-modal-search-input"
                                   placeholder="검색어를 입력해 주세요."
                                   v-model="keyword"
                                   @keyup.enter="getImages()"/>
                            <button type="button"
                                    class="free-modal-image-modal-search-btn"
                                    @click="getImages()">
                                <img src="/file/icon/돋보기.svg">
                            </button>
                        </div>
                    </div>
                    <div class="text-right text-muted">Powered by Freepik</div>
                    <div v-if="loading">이미지 불러오는중...</div>
                    <template v-else>
                        <div v-if="rows.length == 0">{{text_content}}</div>
                        <div v-else>
                            <div class="free-modal-image-grid-flex">
                                <template v-for="item in visibleRows">
                                    <div class="free-modal-image-item"
                                         @click="choiceImage(item)"
                                         :class="activeImage(item)">
                                        <img :src="getImageSrc(item)">
                                        <div class="free-modal-image-overlay">
                                            <div class="free-modal-image-info">
                                                <div class="free-modal-author-name">{{getAuthorName(item)}}</div>
                                                <div class="free-modal-image-description">
                                                    {{getDescription(item)}}
                                                </div>
                                                <div class="free-modal-image-meta" v-if="getSourceUrl(item)">
                                                    <span>Freepik</span>
                                                    <a :href="getSourceUrl(item)"
                                                       target="_blank"
                                                       rel="noopener noreferrer"
                                                       class="free-modal-image-link"
                                                       @click.stop>원본</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>

</div>
            </template>

temp : {
                        $table : "",
                    },
                    row: {},
                    rows : [],
                    rowsByApiPage : {},

file_idx : "",
                    limit : 9,
                    page : 1,
                    apiPageSize : 99,
                    currentApiPage : 1,
                    lastApiPage : null,

image_url : "",
                    keyword : "",
                    searchedKeyword : "",
                    select_item : null,
                    text_content : "이미지가 없습니다.",
                };
            },
            async created() {
                this.component_idx = this.lib.generateUniqueId();
            },
            async mounted() {
                this.table = await this.api.table("jd_file");

this.load = true;

},
            methods: {
                async getImages(reset = true) {
                    this.loading = true;
                    if(reset) {
                        this.page = 1;
                        this.currentApiPage = 1;
                        this.select_item = null;
                        this.text_content = "이미지가 없습니다.";
                        this.rows = [];
                        this.rowsByApiPage = {};
                        this.lastApiPage = null;
                        this.searchedKeyword = this.keyword;
                    }

try {
                        await this.requestApiPage(1, reset ? this.keyword : this.searchedKeyword);
                        this.applyApiPage(1);
                    } catch (err) {
                        this.rows = [];
                        this.rowsByApiPage = {};
                        this.text_content = "현재 요청이많아 무료 이미지는 사용이 불가능합니다. 죄송합니다."
                    } finally {
                        this.loading = false;
                    }
                },
                getApiPage(page) {
                    return Math.ceil(page / this.localPageSize) || 1;
                },
                getLocalPage(page) {
                    return ((page - 1) % this.localPageSize) + 1;
                },
                async requestApiPage(apiPage, keyword = "") {
                    const targetKeyword = keyword !== "" ? keyword : this.searchedKeyword;
                    if(this.rowsByApiPage[apiPage]) {
                        return this.rowsByApiPage[apiPage];
                    }

let res = await this.lib.ajax("get_resources",{term : targetKeyword, page : apiPage},"/JayDream/provider/freepik/api.php");
                    let data = res?.data?.data?.data || [];

this.rowsByApiPage = Object.assign({}, this.rowsByApiPage, {
                        [apiPage] : data
                    });
                    this.rows = data;

if(data.length < this.apiPageSize) {
                        this.lastApiPage = apiPage;
                    }

return data;
                },
                applyApiPage(apiPage) {
                    this.currentApiPage = apiPage;
                    this.rows = this.rowsByApiPage[apiPage] || [];
                    this.page = ((apiPage - 1) * this.localPageSize) + 1;
                },
                async goNextApiPage() {
                    if(this.loading || !this.canGoNextApiPage) return;

const targetApiPage = this.currentApiPage + 1;

this.loading = true;
                    try {
                        const data = await this.requestApiPage(targetApiPage);
                        if(!data.length) {
                            this.lastApiPage = targetApiPage - 1;
                            return;
                        }
                        this.applyApiPage(targetApiPage);
                    } catch (err) {
                        this.text_content = "현재 요청이많아 무료 이미지는 사용이 불가능합니다. 죄송합니다.";
                    } finally {
                        this.loading = false;
                    }
                },
                goPrevApiPage() {
                    if(this.loading || !this.canGoPrevApiPage) return;
                    this.applyApiPage(this.currentApiPage - 1);
                },
                parseImageSize(sizeText) {
                    const defaultSize = {width : "", height : ""};
                    if(!sizeText || typeof sizeText !== "string") return defaultSize;

const size = sizeText.toLowerCase().split("x");
                    if(size.length !== 2) return defaultSize;

const width = parseInt(size[0].replace(/[^0-9]/g, ""));
                    const height = parseInt(size[1].replace(/[^0-9]/g, ""));

return {
                        width : isNaN(width) ? "" : width,
                        height : isNaN(height) ? "" : height,
                    };
                },
                normalizeImageUrl(url) {
                    if(!url) return "";
                    return url.replace(/^http:\/\//i, "https://");
                },
                getImageSrc(item) {
                    return this.normalizeImageUrl(item && item.image && item.image.source ? item.image.source.url : "");
                },
                getSourceUrl(item) {
                    return this.normalizeImageUrl(item && item.url ? item.url : "");
                },
                getAuthorName(item) {
                    return item && item.author && item.author.name ? item.author.name : "Freepik";
                },
                getDescription(item) {
                    if(item && item.title) return item.title;
                    if(item && item.filename) return item.filename;
                    return "제목 없음";
                },
                getImageName(item) {
                    return this.getDescription(item);
                },
                async saveImage() {
                    if(!this.select_item) return false;

const imageSrc = this.getImageSrc(this.select_item);
                    const imageSize = this.parseImageSize(this.select_item && this.select_item.image && this.select_item.image.source ? this.select_item.image.source.size : "");
                    const imageName = this.getImageName(this.select_item);

if(this.widget_type === "image") {
                        this.modelValue.row.file_src = imageSrc;
                        this.modelValue.row.file_width = imageSize.width;
                        this.modelValue.row.file_height = imageSize.height;

this.modelValue.row.width = imageSize.width;
                    }else if(this.widget_type === "image_hover") {
                        this.modelValue.row.option_mouse_over_image_src = imageSrc;
                        this.modelValue.row.option_mouse_over_image_name = imageName;
                    }else if(this.widget_type === "text_bg") {
                        this.modelValue.row.upfile = null;
                        this.modelValue.row.file_idx = "";
                        this.modelValue.row.$jd_file__src = imageSrc;
                        this.modelValue.row.$jd_file__name = imageName;
                        this.modelValue.row.free_image_src = imageSrc;
                        this.modelValue.row.free_image_name = imageName;
                        this.modelValue.row.free_image_width = imageSize.width;
                        this.modelValue.row.free_image_height = imageSize.height;
                    }

this.$closeModal(this.modelValue);

},
                activeImage(item) {
                    if(this.widget_type === "image" || this.widget_type === "image_hover" || this.widget_type === "text_bg") {
                        if(this.getImageSrc(item) === this.getImageSrc(this.select_item)) return "active";
                    }

return false;
                },
                choiceImage(item) {
                    if(this.widget_type === "image" || this.widget_type === "image_hover" || this.widget_type === "text_bg") {
                        this.select_item = item;
                    }
                },
            },
            computed: {
                localPageSize() {
                    return this.apiPageSize / this.limit;
                },
                visibleRows() {
                    const localPage = this.getLocalPage(this.page);
                    const start = (localPage - 1) * this.limit;
                    const end = localPage * this.limit;
                    return this.rows.slice(start, end);
                },
                totalPage() {
                    if(!this.rows.length) return 0;
                    return this.rows.length % this.limit === 0 ? this.rows.length / this.limit : Math.floor(this.rows.length / this.limit) + 1;
                },
                displayedPages() {
                    const start = this.page - this.getLocalPage(this.page) + 1;
                    return Array.from({length : this.totalPage}, (_, index) => start + index);
                },
                canGoPrevApiPage() {
                    return this.currentApiPage > 1;
                },
                canGoNextApiPage() {
                    if(this.lastApiPage !== null) {
                        return this.currentApiPage < this.lastApiPage;
                    }

return this.rows.length === this.apiPageSize;
                },
            },
            watch: {
                async "modelValue.status"(value, old_value) {
                    const $modal = $("#widget_setting_jd");

if(!value) {
                        this.file_idx = "";
                        this.rows = [];
                        this.rowsByApiPage = {};
                        this.page = 1;
                        this.currentApiPage = 1;
                        this.lastApiPage = null;
                        this.searchedKeyword = "";
                        this.select_item = null;
                        this.text_content = "이미지가 없습니다.";

$modal.data('bs.modal').options.backdrop = true;
                        $modal.data('bs.modal').options.keyboard = true;
                        return false;
                    }

$modal.data('bs.modal').options.backdrop = 'static';
                    $modal.data('bs.modal').options.keyboard = false;

await this.getImages();
                }
            }
        }});
</script>

.free-modal-image-item {
        cursor: pointer;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #ddd;
        transition: all 0.2s;
        aspect-ratio: 1 / 1;
        position: relative;
    }

.free-modal-image-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: all 0.2s;
    }

.free-modal-image-item:hover {
        border-color: #337ab7;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        transform: scale(1.05);
    }

.free-modal-image-item.active {
        outline: 3px solid red;
        outline-offset: -3px;
    }

/* 오버레이 스타일 */
    .free-modal-image-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.3) 70%, transparent 100%);
        padding: 15px 10px 10px;
        opacity: 0;
        transition: opacity 0.3s;
        z-index: 999999;
    }

.free-modal-image-item:hover .free-modal-image-overlay {
        opacity: 1;
    }

.free-modal-image-info {
        color: white;
        font-size: 12px;
    }

.free-modal-author-name {
        font-weight: bold;
        margin-bottom: 3px;
        font-size: 13px;
        text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 10px rgba(0,0,0,0.5);
    }

.free-modal-image-description {
        font-size: 11px;
        line-height: 1.3;
        opacity: 0.95;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.5);
    }

.free-modal-image-meta {
        margin-top: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        font-size: 11px;
    }

.free-modal-image-link {
        color: #fff;
        text-decoration: underline;
    }

.free-modal-image-link:hover,
    .free-modal-image-link:focus {
        color: #fff;
    }

.free-modal-image-modal-search-input {
        padding-right: 45px !important;
        border-radius: 4px;
        border: 1px solid #ddd;
        height: 40px;
    }

.free-modal-image-modal-search-input:focus {
        border-color: #66afe9;
        outline: 0;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    }

.free-modal-image-modal-search-btn {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        color: #999;
        transition: color 0.2s;
    }

.free-modal-image-modal-search-btn:hover {
        color: #333;
    }

.free-modal-image-modal-search-btn:focus {
        outline: none;
    }
</style>
<script type="text/x-template" id="design-widget-image-modal-template">
    <div v-if="load" class="jaydream design-widget-image-modal">
        <div class="jd-image-upload-header">
            <div class="jd-image-upload-header-main">
                <div>
                    <h4 class="jd-image-modal-title">
                        <img src="/file/icon/이미지추가.svg"> 이미지 추가
                    </h4>
                    <div class="button-group">
                        <button class="btn btn-orange btn-sm" @click="$refs.fileInput.click()">직접 업로드</button>
                        <button class="btn btn-orange btn-sm" @click="widget_type = 'image'; $openModal(modal,{row})">무료 이미지</button>
                        <button class="btn btn-orange btn-sm" @click="widget_type = 'image'; $openModal(modal2,{row})">이미지 보관함</button>
                    </div>
                </div>
                <div class="jd-preview-device-toggle" v-if="row.upload_file || row.file_src">
                    <button type="button" :class="{active: previewDevice == 'pc'}" @click="setPreviewDevice('pc')">
                        <i class="far fa-desktop"></i> PC
                    </button>
                    <button type="button" :class="{active: previewDevice == 'mobile'}" @click="setPreviewDevice('mobile')">
                        <i class="far fa-mobile"></i> 모바일
                    </button>
                </div>
            </div>
            <input class="hidden" ref="fileInput" type="file" @change="vue.changeFile($event,row,'upload_file',{'callback' : changeEvent});">
        </div>

<hr>

<div class="form-group" style="margin-bottom: 12px;">
                    <label class="jd-image-modal-content-text">
                        <input type="checkbox" v-model="row.border_radius_use"> 모서리 둥글게

<div class="form-group" style="margin-bottom: 12px;">
                    <label class="jd-image-modal-content-text">
                        <input type="checkbox" v-model="row.border_use"> 테두리

<div class="jd-image-alt-setting">
                    <div style="display: inline-flex; align-items: center; gap: 8px; font-size: 16px; position: relative;">
                        <span style="white-space: nowrap;">alt 태그</span>
                        <img src="/file/icon/물음표.svg"
                             style="cursor: pointer; width: 16px; height: 16px; margin-bottom: 3px;"
                             class="design-widget-multi-modal-each-help-icon"
                             @mouseenter="$event.target.nextElementSibling.classList.add('active')"
                             @mouseleave="$event.target.nextElementSibling.classList.remove('active')">
                        <div class="design-widget-multi-modal-each-help-tooltip">
                            이미지 내용을 글로 설명하는 텍스트입니다.
                            접근성 향상과 SEO(검색 노출)에 도움이 됩니다.
                        </div>
                    </div>

<hr>

<div class="row">
            
            <div class="col-md-6">
                <h4 class="jd-image-modal-title">
                    <img src="/file/icon/image_size.svg"> 이미지 사이즈
                </h4>

<div class="col-md-6">
                <h4 class="jd-image-modal-title">
                    <img src="/file/icon/image_margin.svg"> 여백 설정
                </h4>

<hr>

<div class="panel panel-default" style="margin-bottom: 10px;">
            <div class="panel-heading" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center;" data-toggle="collapse" data-target="#textSection">
                <div>
                    <img src="/file/icon/text.svg" style="height: 23px">
                    <span class="jd-effect-text">텍스트 삽입</span>
                    <button class="jd-effect-btn">
                        <img :src="`/file/icon/${row.option_text}.svg`" style="width: 16px; height: 16px;">
                        <span class="fs-14">{{row.option_text}}</span>
                    </button>
                </div>
                <i class="glyphicon glyphicon-chevron-down"></i>
            </div>
            <div id="textSection" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="jd-text-section-row">
                        <div class="jd-text-option-list">
                            <div class="jd-action-button" :class="{active : row.option_text == '사용안함'}" @click="row.option_text = '사용안함'; editor = false;">
                                <img src="/file/icon/사용안함.svg">
                                <span>사용안함</span>
                            </div>

<div class="jd-text-setting-panel">
                            <div v-if="row.option_text == '사용안함'" style="flex : 1; text-align : center; align-content: center;">
                                <span style="font-size: large; color : #959595; ">텍스트를 추가하지 않았습니다.</span>
                            </div>
                            <div v-if="row.option_text == '이미지 하단'" style="flex : 1; align-content: center;">
                                <p class="jd-text-help">
                                    ※ 생성된 텍스트를 더블클릭하면 문구와 서식을 상세 설정할 수 있습니다.
                                </p>
                                <div class="jd-text-margin-table jd-text-margin-table-standalone">
                                    <div class="jd-text-margin-table-header">
                                        <span></span>
                                        <span>상</span>
                                        <span>하</span>
                                        <span>좌</span>
                                        <span>우</span>
                                    </div>
                                    <div class="jd-text-margin-table-row">
                                        <div class="jd-text-margin-table-label">PC 여백</div>
                                        <input type="text" v-number class="form-control input-sm" v-model="row.option_text_margin_top">
                                        <input type="text" v-number class="form-control input-sm" v-model="row.option_text_margin_bottom">
                                        <input type="text" v-number class="form-control input-sm" v-model="row.option_text_margin_left">
                                        <input type="text" v-number class="form-control input-sm" v-model="row.option_text_margin_right">
                                    </div>
                                    <div class="jd-text-margin-table-row">
                                        <div class="jd-text-margin-table-label">모바일 여백</div>
                                        <input type="text" v-number class="form-control input-sm" v-model="row.option_text_mobile_margin_top">
                                        <input type="text" v-number class="form-control input-sm" v-model="row.option_text_mobile_margin_bottom">
                                        <input type="text" v-number class="form-control input-sm" v-model="row.option_text_mobile_margin_left">
                                        <input type="text" v-number class="form-control input-sm" v-model="row.option_text_mobile_margin_right">
                                    </div>
                                </div>
                            </div>

<div v-if="row.option_text == '이미지 겹침'" style="flex:1;">
                                <p class="jd-text-help">
                                    ※ 생성된 텍스트를 더블클릭하면 문구와 서식을 상세 설정할 수 있습니다.
                                </p>
                                <div class="jd-text-overlay-setting">
                                    
                                    <div class="jd-text-position-setting">
                                        <div style="margin-bottom: 5px; font-weight: bold;">텍스트 위치</div>
                                        <div class="jd-text-position-grid">
                                            <div class="jd-position-cell" :class="{active: row.option_text_position === 'top-left'}" @click="row.option_text_position = 'top-left'"></div>
                                            <div class="jd-position-cell" :class="{active: row.option_text_position === 'top-center'}" @click="row.option_text_position = 'top-center'"></div>
                                            <div class="jd-position-cell" :class="{active: row.option_text_position === 'top-right'}" @click="row.option_text_position = 'top-right'"></div>

<div class="jd-text-margin-table">
                                        <div class="jd-text-margin-table-header">
                                            <span></span>
                                            <span>상</span>
                                            <span>하</span>
                                            <span>좌</span>
                                            <span>우</span>
                                        </div>
                                        <div class="jd-text-margin-table-row">
                                            <div class="jd-text-margin-table-label">PC 여백</div>
                                            <input type="text" v-number class="form-control input-sm" v-model="row.option_text_margin_top">
                                            <input type="text" v-number class="form-control input-sm" v-model="row.option_text_margin_bottom">
                                            <input type="text" v-number class="form-control input-sm" v-model="row.option_text_margin_left">
                                            <input type="text" v-number class="form-control input-sm" v-model="row.option_text_margin_right">
                                        </div>
                                        <div class="jd-text-margin-table-row">
                                            <div class="jd-text-margin-table-label">모바일 여백</div>
                                            <input type="text" v-number class="form-control input-sm" v-model="row.option_text_mobile_margin_top">
                                            <input type="text" v-number class="form-control input-sm" v-model="row.option_text_mobile_margin_bottom">
                                            <input type="text" v-number class="form-control input-sm" v-model="row.option_text_mobile_margin_left">
                                            <input type="text" v-number class="form-control input-sm" v-model="row.option_text_mobile_margin_right">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div class="panel panel-default" style="margin-bottom: 10px;">
            <div class="panel-heading" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center;" data-toggle="collapse" data-target="#clickSection">
                <div>
                    <img src="/file/icon/mouse_click.svg" style="height: 23px">
                    <span class="jd-effect-text">마우스 클릭 동작</span>
                    <button class="jd-effect-btn">
                        <img :src="`/file/icon/${row.option_mouse_click}.svg`" style="width: 16px; height: 16px;">
                        <span class="fs-14">{{row.option_mouse_click}}</span>
                    </button>
                </div>
                <i class="glyphicon glyphicon-chevron-down"></i>
            </div>
            <div id="clickSection" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row" style="display: flex;">
                        <div class="col-md-6" style="border-right: 1px solid #ddd;">
                            <div class="jd-action-button" :class="{active : row.option_mouse_click == '동작없음'}" @click="row.option_mouse_click = '동작없음'">
                                <img src="/file/icon/동작없음.svg">
                                <span>동작없음</span>
                            </div>

<div class="col-md-6" style="display : flex;">
                            <div style="flex: 1; text-align: center; align-content: center;">
                                <template v-if="row.option_mouse_click == '동작없음'">
                                    <span style="font-size: large; color : #959595; ">마우스 클릭 동작을 선택하지 않았습니다.</span>
                                </template>

<template v-if="row.option_mouse_click_url_type == '페이지'">
                                            <template v-if="menus.length == 0">데이터를 불러들이는 중입니다.</template>

<template v-else>
                                                <select class="form-control" style="flex : 8;" v-model="row.option_mouse_click_url">
                                                    <option value="">선택해주세요.</option>
                                                    <template v-for="item in menus">
                                                        <option :value="item.url">{{item.name}}</option>
                                                    </template>
                                                </select>
                                            </template>
                                        </template>
                                    </div>

<template v-if="row.option_mouse_click == '크게 보기'">
                                    <img src="/file/icon/전구.svg" style="width: 22px; margin-right: 3px; margin-bottom: 9px;">
                                    <span style="font-size: large; color : #959595; ">이미지 클릭 시 확대된 이미지 창이 노출됩니다.</span>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div class="panel panel-default" style="margin-bottom: 10px;">
            <div class="panel-heading" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center;" data-toggle="collapse" data-target="#scrollSection">
                <div>
                    <img src="/file/icon/scroll.svg" style="height: 23px">
                    <span class="jd-effect-text">스크롤 애니메이션</span>
                    <button class="jd-effect-btn">
                        <img :src="`/file/icon/${row.option_scroll}.svg`" style="width: 16px; height: 16px;">
                        <span class="fs-14">{{row.option_scroll}}</span>
                    </button>
                </div>
                <i class="glyphicon glyphicon-chevron-down"></i>
            </div>
            <div id="scrollSection" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row" style="display: flex;">
                        <div class="col-md-6" style="border-right: 1px solid #ddd;">
                            <div class="jd-action-button" :class="{active : row.option_scroll == '효과없음'}" @click="row.option_scroll_direction = 'center';  row.option_scroll = '효과없음'">
                                <img src="/file/icon/효과없음.svg">
                                <span>효과없음</span>
                            </div>
                            <div class="jd-action-button" :class="{active : row.option_scroll == '페이드'}" @click="row.option_scroll_direction = 'center';  row.option_scroll = '페이드'">
                                <img src="/file/icon/페이드.svg">
                                <span>페이드</span>
                            </div>
                            <div class="jd-action-button" :class="{active : row.option_scroll == '줌인'}" @click="row.option_scroll_direction = 'center';  row.option_scroll = '줌인'">
                                <img src="/file/icon/줌인.svg">
                                <span>줌인</span>
                            </div>
                            <div class="jd-action-button" :class="{active : row.option_scroll == '줌아웃'}" @click="row.option_scroll_direction = 'center';  row.option_scroll = '줌아웃'">
                                <img src="/file/icon/줌아웃.svg">
                                <span>줌아웃</span>
                            </div>
                            <div class="jd-action-button" :class="{active : row.option_scroll == '플립'}" @click=" row.option_scroll_direction = 'up'; row.option_scroll = '플립'">
                                <img src="/file/icon/플립.svg">
                                <span>플립</span>
                            </div>
                        </div>

<div class="col-md-6" style="display : flex;">
                            <template v-if="row.option_scroll == '효과없음'">
                                <div style="flex: 1; text-align: center; align-content: center;">
                                    <span style="font-size: large; color : #959595; ">스크롤 애니메이션을 선택하지 않았습니다.</span>
                                </div>
                            </template>

</div>
                            </template>

</div>
                    </div>
                </div>
            </div>
        </div>

<div class="panel panel-default" style="margin-bottom: 10px;">
            <div class="panel-heading" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center;" data-toggle="collapse" data-target="#hoverSection">
                <div>
                    <img src="/file/icon/mouse_over.svg" style="height: 23px">
                    <span class="jd-effect-text">마우스 오버 애니메이션</span>
                    <button class="jd-effect-btn">
                        <img :src="`/file/icon/${row.option_mouse_over}.svg`" style="width: 16px; height: 16px;">
                        <span class="fs-14">{{row.option_mouse_over}}</span>
                    </button>
                </div>
                <i class="glyphicon glyphicon-chevron-down"></i>
            </div>
            <div id="hoverSection" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row" style="display: flex;">
                        <div class="col-md-6" style="border-right: 1px solid #ddd;">
                            <div class="jd-action-button" :class="{active : row.option_mouse_over == '효과없음'}" @click="row.option_mouse_over = '효과없음'">
                                <img src="/file/icon/효과없음.svg">
                                <span>효과없음</span>
                            </div>

<div class="col-md-6" style="display : flex; align-items: center;">
                            <template v-if="row.option_mouse_over == '효과없음'">
                                <div style="flex: 1; text-align: center; align-content: center;">
                                    <span style="font-size: large; color : #959595; ">마우스오버 애니메이션을 선택하지 않았습니다.</span>
                                </div>
                            </template>

</div>
                            </template>

<template v-else>
                                                <button type="button" class="jd-white-btn" @click="$refs.fileInput2.click()">직접 업로드</button>
                                                <button type="button" class="jd-white-btn" @click="widget_type = 'image_hover'; $openModal(modal,{row});">무료 이미지</button>
                                                <button type="button" class="jd-white-btn" @click="widget_type = 'image_hover'; $openModal(modal2,{row})">이미지 보관함</button>
                                                <input class="hidden" ref="fileInput2" type="file" @change="vue.changeFile($event,row,'hover_file',{'callback' : changeEvent2});">
                                            </template>
                                        </div>
                                    </div>
                                    <div style="margin-top: 8px; font-size: 12px; color: #666;">
                                        ※ 애니메이션 이미지는 대상 이미지의 크기에 자동으로 맞춰집니다.
                                    </div>

<div>
                                        <div style="margin-bottom: 8px; font-weight: 600; font-size: 14px;">전환 애니메이션</div>
                                        <select class="form-control" style="font-size: 13px;" v-model="row.option_mouse_over_image_animation">
                                            <option value="">없음</option>
                                            <option value="페이드">페이드</option>
                                            <option value="슬라이드">슬라이드</option>
                                            <option value="플립">플립</option>
                                        </select>
                                    </div>
                                </div>
                            </template>

<div style="display:flex; align-items: center; gap: 10px;">
                                        <span style="margin: 0; font-weight: 600; font-size: 14px;">전환 애니메이션</span>
                                        <select class="form-control input-sm" style="width: 80px; display: inline-block; flex : 1" v-model="row.option_mouse_over_text_animation">
                                            <option value="">없음</option>
                                            <option value="페이드">페이드</option>
                                            <option value="슬라이드">슬라이드</option>
                                            <option value="플립">플립</option>
                                        </select>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<design-widget-image-free-modal v-model="modal" @update:modelValue="value => $emit('update:modelValue', value)" :widget_type></design-widget-image-free-modal>
        <design-widget-image-storage-modal v-model="modal2" @update:modelValue="value => $emit('update:modelValue', value)" :widget_type></design-widget-image-storage-modal>
    </div>

modal : this.lib.createModalObject(),
                    modal2 : this.lib.createModalObject(),

sessions : {},

table : null,
                    widget_type : "image",
                    row: {
                        widget_code : this.widget_code,
                        user_idx : "",
                        upload_file : null,
                        file_src : "",
                        box_shadow_use : false,
                        box_shadow_opacity : "20",
                        filter_use : false,
                        filter_brightness : "50",
                        filter_overlay_color : "#00000030",
                        border_radius_use : false,
                        border_radius_px : "6",
                        circle_use : false,
                        border_use : false,
                        border_width : "1",
                        border_color : "#000000",
                        height : "400",
                        width : "0",
                        mobile_height : "",
                        mobile_width : "",
                        image_attribute : "full",
                        padding_top : "0",
                        padding_right : "0",
                        padding_bottom : "0",
                        padding_left : "0",

option_text : "사용안함",
                        option_text_content : "더블 클릭하여 텍스트를 수정해주세요.",
                        option_text_position : "middle-center",
                        option_text_background : "transparent",
                        option_text_margin_top : "0",
                        option_text_margin_right : "0",
                        option_text_margin_bottom : "0",
                        option_text_margin_left : "0",
                        option_text_mobile_margin_top : "0",
                        option_text_mobile_margin_right : "0",
                        option_text_mobile_margin_bottom : "0",
                        option_text_mobile_margin_left : "0",

option_mouse_click : "동작없음",
                        option_mouse_click_url_type : "URL",
                        option_mouse_click_url : "",
                        option_mouse_click_target : "_self",

option_scroll : "효과없음",
                        option_scroll_direction : "center",
                        option_scroll_duration : "1000",
                        option_scroll_delay : "0",

// 페이드~ 플립
                        option_mouse_over : "효과없음",
                        option_mouse_over_direction : "center",
                        option_mouse_over_duration : "1000",
                        option_mouse_over_delay : "0",
                        //테두리
                        option_mouse_over_border_color : "#000000",
                        option_mouse_over_border_width : "1",
                        //그림자
                        option_mouse_over_box_shadow_opacity : "20",
                        //색 오버레이
                        option_mouse_over_background_color : "#00000030",
                        option_mouse_over_overlay_opacity: "",
                        //이미지 전환
                        hover_file : null,
                        option_mouse_over_image_name : "",
                        option_mouse_over_image_src : "",
                        option_mouse_over_image_animation : "",
                        //텍스트
                        option_mouse_over_text_color : "#ffffff",
                        option_mouse_over_text_background : "#0000008c",
                        option_mouse_over_font_size : "14",
                        option_mouse_over_text_position : "middle-center",
                        option_mouse_over_text : "",
                        option_mouse_over_text_animation : "",

alt_text : "",
                    },
                    rows : [],
                    menus : [],
                    menu_load : false,

editor : false,
                    viewportWidth : typeof window !== "undefined" ? window.innerWidth : 0,
                    previewDevice : (typeof document !== "undefined" && document.body && document.body.classList.contains('_mbv')) ? 'mobile' : 'pc',
                    previewViewportWidth : 0,
                    previewBaseWidth : 0,
                    previewStageHeight : 0,
                    previewMeasureFrame : null,
                    previewMeasureTimeouts : [],
                    previewResizeObserver : null,
                    previewObservedViewport : null,
                    previewObservedTarget : null,
                };
            },
            async created() {
                this.component_idx = this.lib.generateUniqueId();
                this.api.component_name = this.component_name
            },
            async mounted() {
                if(!this.site_code) {
                    await this.lib.alert("잘못된 접근입니다.")
                    window.history.back();
                    return false;
                }
                this.sessions = await this.session.all();
                this.table = await this.api.table("jd_widget_image");
                this.table.where('widget_code',this.widget_code);
                let row = await this.table.get();
                if(row.length > 0) this.row = row[0];

this.normalizeTextMobileMargins();
                this.migrateOverlayColors();

this.row.user_idx = this.sessions.mem_idx;
                // await this.table.get(this.rows,{paging : 10})

this.handleResize = () => {
                    this.viewportWidth = window.innerWidth;
                    this.queuePreviewMetrics();
                };
                window.addEventListener("resize", this.handleResize);

this.load = true;

this.$nextTick(async () => {
                    this.queuePreviewMetrics();
                    [120, 350, 800].forEach((delay) => {
                        const timeout = setTimeout(() => {
                            this.queuePreviewMetrics();
                        }, delay);
                        this.previewMeasureTimeouts.push(timeout);
                    });

// 해당부분에 퍼블리싱 라이브러리,플러그인 선언부분 하시면 됩니다 ex) swiper
                    //해당부분은 시간이 좀 걸리길래 비동기로 변경
                    this.api.table("menu").where("site_code",this.site_code).get(this.menus);
                });
            },
            updated() {
            },
            beforeUnmount() {
                this.destroyPreviewMetrics();
            },
            beforeDestroy() {
                this.destroyPreviewMetrics();
            },
            methods: {
                destroyPreviewMetrics() {
                    if(this.handleResize) {
                        window.removeEventListener("resize", this.handleResize);
                    }

if(this.previewMeasureFrame) {
                        const cancelFrame = window.cancelAnimationFrame || clearTimeout;
                        cancelFrame(this.previewMeasureFrame);
                        this.previewMeasureFrame = null;
                    }

this.previewMeasureTimeouts.forEach((timeout) => {
                        clearTimeout(timeout);
                    });
                    this.previewMeasureTimeouts = [];

if(this.previewResizeObserver) {
                        this.previewResizeObserver.disconnect();
                        this.previewResizeObserver = null;
                        this.previewObservedViewport = null;
                        this.previewObservedTarget = null;
                    }
                },
                queuePreviewMetrics() {
                    if(!this.load) return;

if(this.previewMeasureFrame) {
                        const cancelFrame = window.cancelAnimationFrame || clearTimeout;
                        cancelFrame(this.previewMeasureFrame);
                    }

const requestFrame = window.requestAnimationFrame || function(callback) {
                        return setTimeout(callback, 16);
                    };

this.previewMeasureFrame = requestFrame(() => {
                        this.previewMeasureFrame = null;
                        this.updatePreviewMetrics();
                    });
                },
                updatePreviewMetrics() {
                    if(!this.$refs.previewViewport) return;

this.observePreviewTargets();

const viewportWidth = Math.round(this.$refs.previewViewport.clientWidth || 0);
                    const baseWidth = Math.round(this.getPreviewBaseWidth() || viewportWidth || 0);

if(viewportWidth && Math.abs(this.previewViewportWidth - viewportWidth) > 1) {
                        this.previewViewportWidth = viewportWidth;
                    }

if(baseWidth && Math.abs(this.previewBaseWidth - baseWidth) > 1) {
                        this.previewBaseWidth = baseWidth;
                    }

this.$nextTick(() => {
                        const stage = this.$refs.previewStage;
                        const stageHeight = stage ? Math.round(stage.scrollHeight || stage.offsetHeight || 0) : 0;
                        const fallbackHeight = this.getFallbackPreviewHeight();
                        const nextHeight = stageHeight || fallbackHeight;

if(nextHeight && Math.abs(this.previewStageHeight - nextHeight) > 1) {
                            this.previewStageHeight = nextHeight;
                        }
                    });
                },
                observePreviewTargets() {
                    if(typeof ResizeObserver === 'undefined') return;

if(!this.previewResizeObserver) {
                        this.previewResizeObserver = new ResizeObserver(() => {
                            this.queuePreviewMetrics();
                        });
                    }

const viewport = this.$refs.previewViewport || null;
                    const target = this.getLivePreviewElement();

if(viewport !== this.previewObservedViewport) {
                        if(this.previewObservedViewport) this.previewResizeObserver.unobserve(this.previewObservedViewport);
                        if(viewport) this.previewResizeObserver.observe(viewport);
                        this.previewObservedViewport = viewport;
                    }

if(target !== this.previewObservedTarget) {
                        if(this.previewObservedTarget) this.previewResizeObserver.unobserve(this.previewObservedTarget);
                        if(target) this.previewResizeObserver.observe(target);
                        this.previewObservedTarget = target;
                    }
                },
                getLivePreviewElement() {
                    if(!this.widget_code || typeof document === 'undefined') return null;

const widget = document.getElementById(this.widget_code);
                    if(!widget) return null;

const paddingFrame = widget.querySelector('.jd-image-padding-frame');
                    if(paddingFrame) return paddingFrame;

const image = widget.querySelector('.jd-image');
                    if(image && image.parentElement) return image.parentElement;

return widget;
                },
                getLivePreviewWidth() {
                    const target = this.getLivePreviewElement();
                    if(!target) return 0;

const rect = target.getBoundingClientRect();
                    return rect && rect.width ? rect.width : 0;
                },
                getPreviewBaseWidth() {
                    const liveWidth = this.getLivePreviewWidth();
                    const isBodyMobile = typeof document !== 'undefined'
                        && document.body
                        && document.body.classList.contains('_mbv');

if(this.previewDevice == 'mobile') {
                        if(isBodyMobile && liveWidth) return liveWidth;
                        if(this.row.image_attribute == 'full') return this.getEstimatedMobilePreviewWidth();
                        return this.getFallbackPreviewWidth();
                    }

if(!isBodyMobile && liveWidth) return liveWidth;
                    if(this.row.image_attribute == 'full') return this.getEstimatedPcPreviewWidth();

return this.getFallbackPreviewWidth();
                },
                getEstimatedPcPreviewWidth() {
                    if(typeof document === 'undefined') return 0;

const viewportWidth = document.documentElement ? document.documentElement.clientWidth : window.innerWidth;
                    return Math.max(0, viewportWidth - 180);
                },
                getEstimatedMobilePreviewWidth() {
                    if(typeof document === 'undefined') return 398;

const viewportWidth = document.documentElement ? document.documentElement.clientWidth : window.innerWidth;
                    return Math.max(0, Math.min(562, viewportWidth) - 164);
                },
                getFallbackPreviewWidth() {
                    const height = this.getFallbackPreviewHeight();
                    const width = this.isMobileView()
                        ? (this.row.mobile_width || this.row.width)
                        : this.row.width;
                    const parsedWidth = parseInt(width, 10) || 0;

if(this.row.image_attribute == 'self' && parsedWidth) return parsedWidth;

if(this.row.image_attribute == 'original') {
                        const fileWidth = parseInt(this.row.file_width, 10) || 0;
                        const fileHeight = parseInt(this.row.file_height, 10) || 0;

if(fileWidth && fileHeight && height) {
                            return Math.round(fileWidth * height / fileHeight);
                        }

if(fileWidth) return fileWidth;
                    }

if(this.row.image_attribute == 'full') {
                        const fileWidth = parseInt(this.row.file_width, 10) || 0;
                        if(parsedWidth) return parsedWidth;
                        if(fileWidth) return fileWidth;
                    }

return parsedWidth;
                },
                getFallbackPreviewHeight() {
                    const height = this.isMobileView()
                        ? (this.row.mobile_height || this.row.height)
                        : this.row.height;

return parseInt(height, 10) || 0;
                },
                resetPreviewMetrics() {
                    this.previewViewportWidth = 0;
                    this.previewBaseWidth = 0;
                    this.previewStageHeight = 0;
                },
                setPreviewDevice(device) {
                    if(!['pc', 'mobile'].includes(device) || this.previewDevice == device) return;

this.previewDevice = device;
                    this.resetPreviewMetrics();
                    this.$nextTick(() => {
                        this.queuePreviewMetrics();
                    });
                },
                getPreviewScale() {
                    const baseWidth = this.previewBaseWidth || this.getPreviewBaseWidth();
                    const viewportWidth = this.previewViewportWidth
                        || (this.$refs.previewViewport ? this.$refs.previewViewport.clientWidth : 0);

if(!baseWidth || !viewportWidth) return 1;

return Math.min(1, viewportWidth / baseWidth);
                },
                getPreviewViewportStyle() {
                    const scale = this.getPreviewScale();
                    const baseHeight = this.previewStageHeight || this.getFallbackPreviewHeight();
                    let style = {};

if(baseHeight) {
                        style.height = `${Math.ceil(baseHeight * scale)}px`;
                    }

return style;
                },
                getPreviewScaleStageStyle() {
                    const baseWidth = this.previewBaseWidth || this.getPreviewBaseWidth();
                    const scale = this.getPreviewScale();
                    const viewportWidth = this.previewViewportWidth
                        || (this.$refs.previewViewport ? this.$refs.previewViewport.clientWidth : 0);
                    const visibleWidth = baseWidth * scale;
                    let style = {
                        transform: `scale(${scale})`,
                        transformOrigin: 'top left',
                        textAlign: 'center',
                    };

if(!this.previewViewportWidth || !this.previewBaseWidth) {
                        style.visibility = 'hidden';
                    } else {
                        style.visibility = 'visible';
                    }

if(baseWidth) {
                        style.width = `${baseWidth}px`;
                    }

if(this.previewDevice == 'mobile' && viewportWidth && visibleWidth < viewportWidth) {
                        style.marginLeft = `${Math.floor((viewportWidth - visibleWidth) / 2)}px`;
                    } else {
                        style.marginLeft = '0';
                    }

return style;
                },
                summernoteColorEvent(color) {
                    this.row.option_text_background = color;
                },
                summernoteCustomEvent() {
                    this.editor = false;
                },
                async dataPost() {
                    window.design.loadingOn()
                    if(this.row.upload_file) {
                        let res = await this.lib.ajax("file_save",{
                            "user_idx" : this.row.user_idx,
                            "upload_file" : this.row.upload_file,
                            "width" : this.row.file_width,
                            "height" : this.row.file_height,
                            "memo" : "jd_widget_image",
                            "widget_code" : this.row.widget_code,
                            "site_code" : this.site_code,
                        })

let file = res['file'];

this.row.upload_file = null;
                        this.row.file_src = file.src;
                    }

if(this.row.hover_file) {
                        let res = await this.lib.ajax("file_save",{
                            "user_idx" : this.row.user_idx,
                            "hover_file" : this.row.hover_file,
                            "memo" : "jd_widget_image_hover"
                        })

let file = res['file'];

this.row.hover_file = null;
                        this.row.option_mouse_over_image_name = file.name;
                        this.row.option_mouse_over_image_src = file.src;
                    }

await this.table.post(this.row,{return : true});
                    window.design.loadingOff()

window.JAYDREAM_VUE_GLOBAL[this.widget_code].reload = true;

$(this.$el).closest('.modal').modal('hide');
                },
                changeEvent() {
                    this.row.width = this.row.upload_file.width;

this.row.file_width = this.row.upload_file.width;
                    this.row.file_height = this.row.upload_file.height;
                },
                changeEvent2() {
                    // this.row.option_mouse_over_image_name = this.hover_file.name;
                },
                migrateOverlayColors() {
                    if(!this.row.filter_overlay_color) {
                        this.row.filter_overlay_color = this.getLegacyFilterOverlayColor();
                    }

this.row.option_mouse_over_background_color = this.normalizeAlphaColor(
                        this.row.option_mouse_over_background_color,
                        '#00000030',
                        this.row.option_mouse_over_overlay_opacity
                    );
                    this.row.option_mouse_over_overlay_opacity = '';
                },
                normalizeTextMobileMargins() {
                    const defaults = {
                        option_text_mobile_margin_top: "0",
                        option_text_mobile_margin_right: "0",
                        option_text_mobile_margin_bottom: "0",
                        option_text_mobile_margin_left: "0",
                    };

Object.keys(defaults).forEach((key) => {
                        if(this.row[key] === undefined || this.row[key] === null || this.row[key] === '') {
                            this.row[key] = defaults[key];
                        }
                    });
                },
                getTextMargins() {
                    const prefix = this.isMobileView() ? 'option_text_mobile_margin_' : 'option_text_margin_';

return {
                        top: parseInt(this.row[prefix + 'top'], 10) || 0,
                        right: parseInt(this.row[prefix + 'right'], 10) || 0,
                        bottom: parseInt(this.row[prefix + 'bottom'], 10) || 0,
                        left: parseInt(this.row[prefix + 'left'], 10) || 0,
                    };
                },
                normalizeAlphaColor(color, defaultColor = '#00000030', legacyOpacity = null) {
                    color = String(color || '').trim();
                    defaultColor = String(defaultColor || '#00000030').trim();

if(/^#[0-9a-f]{6}$/i.test(color)) {
                        if(legacyOpacity !== null && legacyOpacity !== '' && legacyOpacity !== undefined) {
                            return color + this.opacityToHex(legacyOpacity);
                        }

return color + 'ff';
                    }

if(/^#[0-9a-f]{8}$/i.test(color)) {
                        if(color.toLowerCase() === '#ffffff00' && legacyOpacity !== null && legacyOpacity !== '' && legacyOpacity !== undefined) {
                            return color.slice(0, 7) + this.opacityToHex(legacyOpacity);
                        }

return color;
                    }

if(/^#[0-9a-f]{6}$/i.test(defaultColor)) return defaultColor + 'ff';
                    if(/^#[0-9a-f]{8}$/i.test(defaultColor)) return defaultColor;

return '#00000030';
                },
                opacityToHex(opacity) {
                    const percent = Math.max(0, Math.min(100, parseInt(opacity, 10) || 0));
                    return ('0' + Math.round(percent * 255 / 100).toString(16)).slice(-2);
                },
                hexAlphaToRgba(color) {
                    const normalizedColor = this.normalizeAlphaColor(color);
                    const r = parseInt(normalizedColor.slice(1, 3), 16);
                    const g = parseInt(normalizedColor.slice(3, 5), 16);
                    const b = parseInt(normalizedColor.slice(5, 7), 16);
                    const a = parseInt(normalizedColor.slice(7, 9), 16) / 255;

return `rgba(${r}, ${g}, ${b}, ${a})`;
                },
                getLegacyFilterOverlayColor() {
                    const opacity = this.row.filter_brightness !== undefined && this.row.filter_brightness !== ''
                        ? this.row.filter_brightness
                        : 19;
                    return '#000000' + this.opacityToHex(opacity);
                },
                getImageOverlayStyle() {
                    let style = {
                        position: 'absolute',
                        top: '0',
                        left: '0',
                        width: '100%',
                        height: '100%',
                        pointerEvents: 'none',
                        backgroundColor: this.hexAlphaToRgba(this.row.filter_overlay_color || this.getLegacyFilterOverlayColor())
                    };

if(this.row.circle_use) {
                        style.borderRadius = '50%';
                    } else if(this.row.border_radius_use) {
                        style.borderRadius = `${this.row.border_radius_px}px`;
                    }

return style;
                },
                getPaddingStyle() {
                    let style = {
                        boxSizing: 'border-box',
                        maxWidth: '100%',
                    };

if (this.row.padding_top) {
                        style.paddingTop = `${this.row.padding_top}px`;
                    }
                    if (this.row.padding_right) {
                        style.paddingRight = `${this.row.padding_right}px`;
                    }
                    if (this.row.padding_bottom) {
                        style.paddingBottom = `${this.row.padding_bottom}px`;
                    }
                    if (this.row.padding_left) {
                        style.paddingLeft = `${this.row.padding_left}px`;
                    }

return style;
                },
                getPreviewOuterStyle() {
                    let style = this.getPaddingStyle();
                    style.display = 'inline-block';
                    style.maxWidth = '100%';

if(this.row.image_attribute == 'full') {
                        style.display = 'block';
                        style.width = '100%';
                    }

return style;
                },
                getPreviewDivStyle() {
                    let style = {
                        position: 'relative',
                        display: 'inline-block',
                        overflow: 'hidden',
                        maxWidth: '100%',
                        boxSizing: 'border-box',
                    };

// 그림자
                    if(this.row.box_shadow_use) {
                        style.boxShadow = `0px 4px 8px rgba(0, 0, 0, ${this.row.box_shadow_opacity / 100})`;
                    }

// 모서리 둥글게
                    if (this.row.border_radius_use) {
                        style.borderRadius = `${this.row.border_radius_px}px`;
                    }

// 원형 이미지
                    if (this.row.circle_use) {
                        style.borderRadius = '50%';
                    }

// 테두리
                    if (this.row.border_use) {
                        style.border = `${this.row.border_width}px solid ${this.row.border_color}`;
                    }

if(this.row.image_attribute == 'full') {
                        style.display = 'block';
                        style.width = '100%';
                    }

return style;
                },
                getTextStyle() {
                    let style = {};

// style.padding = "10px";
                    style.fontSize = "16px";
                    style.background = this.row.option_text_background;
                    // style.width = this.row.width + "px";
                    style.maxWidth = "100%";

const margins = this.getTextMargins();
                    const marginTop = margins.top;
                    const marginRight = margins.right;
                    const marginBottom = margins.bottom;
                    const marginLeft = margins.left;

style.marginTop = marginTop + "px";
                    style.marginRight = marginRight + "px";
                    style.marginBottom = marginBottom + "px";
                    style.marginLeft = marginLeft + "px";

if(this.row.option_text == "이미지 겹침") {
                        style.position = 'absolute';
                        style.left = `${marginLeft}px`;
                        style.right = `${marginRight}px`;
                        style.width = 'auto';
                        style.maxWidth = 'none';
                        style.boxSizing = 'border-box';
                        style.margin = '0';

// position에 따른 스타일 적용
                        const position = this.row.option_text_position || 'middle-center';
                        const verticalPosition = position.split('-')[0];
                        const horizontalPosition = position.split('-')[1];

if(horizontalPosition === 'center') {
                            style.textAlign = 'center';
                        } else if(horizontalPosition === 'right') {
                            style.textAlign = 'right';
                        } else {
                            style.textAlign = 'left';
                        }

if(verticalPosition === 'top') {
                            style.top = `${marginTop}px`;
                        } else if(verticalPosition === 'middle') {
                            const verticalOffset = marginTop - marginBottom;
                            style.top = '50%';
                            style.transform = verticalOffset
                                ? `translateY(calc(-50% ${verticalOffset > 0 ? '+' : '-'} ${Math.abs(verticalOffset)}px))`
                                : 'translateY(-50%)';
                        } else if(verticalPosition === 'bottom') {
                            style.bottom = `${marginBottom}px`;
                        }
                    }

return style;
                },
                isMobileView() {
                    return this.previewDevice == 'mobile';
                },
                getStyle() {
                    let style = {};
                    const isMobileView = this.isMobileView();
                    const height = isMobileView ? (this.row.mobile_height || this.row.height) : this.row.height;
                    const width = isMobileView ? (this.row.mobile_width || this.row.width) : this.row.width;

// 모서리 둥글게
                    if (this.row.border_radius_use) {
                        style.borderRadius = `${this.row.border_radius_px}px`;
                    }

// 원형 이미지
                    if (this.row.circle_use) {
                        style.borderRadius = '50%';
                        style.aspectRatio = '1 / 1';  // 정사각형 비율
                        style.objectFit = 'cover';     // 이미지 가운데 중심으로 채움
                    }

// 이미지 사이즈
                    if(this.row.image_attribute == 'full') {
                        style.height = `${height}px`;
                        style.width = '100%';
                        style.objectFit = 'cover';
                    }
                    if(this.row.image_attribute == 'original') {
                        style.height = `${height}px`;
                        if (!this.row.circle_use) style.objectFit = 'contain';
                    }
                    if(this.row.image_attribute == 'self') {
                        style.height = `${height}px`;
                        if (!this.row.circle_use) style.width = `${width}px`;
                        style.objectFit = 'cover';
                    }

return style;
                },
            },
            computed: {

},
            watch: {
                row: {
                    handler() {
                        if(this.load) this.queuePreviewMetrics();
                    },
                    deep: true,
                },
                async "row.image_attribute"(value, old_value) {
                    if(value == "full") this.row.circle_use = false;
                },

async "row.border_radius_use"(value, old_value) {
                    if(value) this.row.circle_use = false;
                },

async "row.circle_use"(value, old_value) {
                    if(value) this.row.border_radius_use = false;
                }
            }
        }});
</script>

.jd-image-modal-content-text {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 0;
        font-size: 14px;
    }

.jd-image-size-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 10px;
    }

.jd-image-size-row {
        display: flex;
        gap: 28px;
        flex-wrap: wrap;
    }

.jd-image-size-field {
        display: flex;
        align-items: center;
        gap: 6px;
    }

.jd-image-size-input {
        width: 80px;
    }

.jd-image-upload-header {
        margin-bottom: 12px;
    }

.jd-image-upload-header-main {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
    }

.jd-image-upload-header .button-group {
        margin-top: 8px;
    }

.jd-preview-device-toggle {
        display: inline-flex;
        flex: 0 0 auto;
        margin-bottom: 2px;
        border: 1px solid #f47452;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
    }

.jd-preview-device-toggle button {
        min-width: 70px;
        height: 32px;
        border: 0;
        border-right: 1px solid #f47452;
        background: #fff;
        color: #f47452;
        font-size: 13px;
        font-weight: 600;
        line-height: 32px;
        padding: 0 10px;
    }

.jd-preview-device-toggle button:last-child {
        border-right: 0;
    }

.jd-preview-device-toggle button.active {
        background: #f47452;
        color: #fff;
    }

.jd-preview-device-toggle button i {
        margin-right: 4px;
    }

.jd-image-preview-box-wide {
        width: 100%;
        min-height: 260px;
        margin-bottom: 10px;
        overflow: hidden;
    }

.jd-image-preview-box-wide.has-image {
        display: block;
        min-height: 0;
        text-align: left;
    }

.jd-image-preview-scale-stage {
        flex: 0 0 auto;
        will-change: transform;
    }

.jd-image-preview-scale-stage .jd-preview-image {
        max-height: none;
    }

.jd-image-text-editor-wrap {
        margin-top: 10px;
    }

.jd-image-basic-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(260px, 1fr));
        gap: 8px 24px;
        align-items: start;
    }

.jd-image-alt-setting {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

.jd-text-section-row {
        display: flex;
        align-items: stretch;
        min-height: 170px;
    }

.jd-text-option-list {
        flex: 0 0 360px;
        max-width: 360px;
        border-right: 1px solid #ddd;
        padding-right: 14px;
        display: flex;
        gap: 10px;
        align-items: flex-start;
        flex-wrap: wrap;
        align-content: flex-start;
    }

.jd-text-setting-panel {
        flex: 1 1 auto;
        min-width: 0;
        padding-left: 16px;
        display: flex;
        align-items: center;
    }

.jd-text-overlay-setting {
        display: flex;
        align-items: flex-start;
        gap: 28px;
        flex-wrap: nowrap;
        width: 100%;
    }

.jd-text-position-setting {
        flex: 0 0 auto;
    }

.jd-text-help {
        color: #999;
        font-size: 12px;
        margin: 0 0 10px;
    }

.jd-text-margin-table {
        display: grid;
        grid-template-columns: 76px repeat(4, 58px);
        gap: 8px 10px;
        align-items: center;
    }

.jd-text-margin-table-standalone {
        justify-content: flex-start;
    }

.jd-text-margin-table-header {
        display: contents;
    }

.jd-text-margin-table-header span {
        font-weight: bold;
        font-size: 13px;
        text-align: center;
    }

.jd-text-margin-table-row {
        display: contents;
    }

.jd-text-margin-table-label {
        font-weight: bold;
        white-space: nowrap;
    }

.jd-text-margin-table input {
        width: 58px;
        text-align: center;
    }

@media (max-width: 980px) {
        .jd-text-section-row {
            flex-direction: column;
        }

.jd-text-option-list {
            flex: 0 0 auto;
            max-width: none;
            border-right: none;
            border-bottom: 1px solid #ddd;
            padding-right: 0;
            padding-bottom: 12px;
            margin-bottom: 12px;
        }

.jd-text-setting-panel {
            padding-left: 0;
        }
    }

.number-input-wrapper {
        position: relative;
        width: 80px;
    }

.number-input-wrapper input {
        width: 100%;
        padding-left: 24px;   /* 왼쪽 아이콘 공간 */
        padding-right: 24px;  /* 오른쪽 스테퍼 공간 */
        text-align: center;
        font-size: 14px;
    }

.input-icon-left {
        position: absolute;
        left: 6px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        pointer-events: none;
    }

.number-stepper {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 0;
    }

.number-stepper button {
        border: none;
        background: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 10px;
    }

.number-stepper button:hover svg path {
        fill: #333;
    }

.number-stepper button:active svg path {
        fill: #999;
    }

.number-stepper svg {
        display: block;
    }

.panel-default > .panel-heading {
        background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%) !important;
    }
</style>
<script type="text/x-template" id="design-widget-image-storage-modal-template">
    <div v-if="load">
        <external-bs-modal v-model="modelValue" @update:modelValue="value => $emit('update:modelValue', value)">
            <template v-slot:header>
                <h5 class="modal-title" id="exampleModalLabel">이미지 보관함</h5>
            </template>

<template v-slot:default>
                <div>
                    <div v-if="loading">이미지 불러오는중...</div>
                    <template v-else>
                        <div v-if="rows.length == 0">이미지가 없습니다.</div>
                        <div v-else>
                            <div class="image-grid-flex">
                                <template v-for="item,index in rows">
                                    <div v-if="index >= (page - 1) * limit && index < page * limit" class="image-item" @click="choiceImage(item)" :class="activeImage(item)">
                                        <img :src="item.src">
                                        <button class="image-delete-btn" @click.stop="deleteImage(item)">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <polyline points="3 6 5 6 21 6"></polyline>
                                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                                <line x1="10" y1="11" x2="10" y2="17"></line>
                                                <line x1="14" y1="11" x2="14" y2="17"></line>
                                            </svg>
                                        </button>
                                    </div>
                                </template>
                            </div>

</div>
            </template>

temp : {
                        $table : "",
                    },
                    row: {},
                    rows : [],

limit : 9,
                    page : 1,

select_item : null,
                };
            },
            async created() {
                this.component_idx = this.lib.generateUniqueId();
            },
            async mounted() {
                this.table = await this.api.table("jd_file");

this.load = true;

},
            methods: {
                async deleteImage(item) {
                    if(!await this.lib.confirm("삭제시 연결된 이미지가 있을경우 엑박이 뜹니다 삭제 하시겠습니까?")) return false;

await this.api.table("jd_file").delete(item,{return : true});

await this.getImages();
                },
                async getImages() {
                    this.loading = true;

await this.table.where("user_idx",this.modelValue.row.user_idx).get(this.rows);

this.loading = false;

},
                saveImage() {
                    if(this.widget_type === "image") {
                        this.modelValue.row.file_src = this.select_item.src;
                        this.modelValue.row.file_width = this.select_item.width;
                        this.modelValue.row.file_height = this.select_item.height;

// height는 기획자가 고정 400으로 원함
                        this.modelValue.row.width = this.select_item.width;
                    }else if(this.widget_type === "image_hover") {
                        this.modelValue.row.option_mouse_over_image_src = this.select_item.src;
                        this.modelValue.row.option_mouse_over_image_name = this.select_item.name;
                    }

this.$closeModal(this.modelValue);

},
                activeImage(item) {
                    if(this.widget_type === "image" || this.widget_type === "image_hover") {
                        if(item.src === this.select_item?.src) return "active";
                    }

return false;
                },
                choiceImage(item) {
                    if(this.widget_type === "image" ||  this.widget_type === "image_hover") {
                        this.select_item = item;
                    }
                },
            },
            computed: {
                totalPage() {
                    return this.rows.length % this.limit === 0 ? this.rows.length / this.limit : Math.floor(this.rows.length / this.limit) + 1;
                }
            },
            watch: {
                async "modelValue.status"(value, old_value) {
                    const $modal = $("#widget_setting_jd");

if(!value) {
                        this.file_idx = "";
                        this.rows = [];

$modal.data('bs.modal').options.backdrop = true;
                        $modal.data('bs.modal').options.keyboard = true;

return false;
                    }

$modal.data('bs.modal').options.backdrop = 'static';
                    $modal.data('bs.modal').options.keyboard = false;

await this.getImages();
                }
            }
        }});
</script>

.image-item {
        cursor: pointer;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #ddd;
        transition: all 0.2s;
        aspect-ratio: 1 / 1; /* 정사각형 비율 */
        position: relative; /* 삭제 버튼 위치를 위해 추가 */
    }

.image-item img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 이미지를 정사각형에 꽉 차게 */
        display: block;
        transition: all 0.2s;
    }

.image-item:hover {
        border-color: #337ab7;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        transform: scale(1.05);
    }

.image-item.active {
        outline: 3px solid red;
        outline-offset: -3px;
    }

/* 삭제 버튼 스타일 */
    .image-delete-btn {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 28px;
        height: 28px;
        background-color: rgba(255, 255, 255, 0.9);
        border: 1px solid #ddd;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0;
        transition: all 0.2s;
        padding: 0;
    }

.image-delete-btn svg {
        color: #dc3545;
    }

.image-item:hover .image-delete-btn {
        opacity: 1;
    }

.image-delete-btn:hover {
        background-color: #dc3545;
        border-color: #dc3545;
    }

.image-delete-btn:hover svg {
        color: white;
    }
</style><script type="text/x-template" id="design-widget-image-template">
    <div v-if="load">
        <template v-if="row.idx">
            <div style="text-align: center;" ref="imageElement" @mouseenter="hoverEvent(); parent_div_hover = true;" @mouseleave="leaveEvent(); parent_div_hover = false;">
                <div class="jd-image-padding-frame" :style="getOuterStyle()" @mouseenter="hover = true;" @mouseleave="hover = false;">
                    <div class="jd-image-effect-frame" :style="getDivStyle()">
                    <img :src="getSrc()" class="jd-image" :style="getStyle()"
                         @click="getClick()" @load="onImageLoad" :title="row.alt_text || ''">

<div v-if="row.option_mouse_over == '색 오버레이' && hover"
                         :style="getOverlayStyle()"
                         style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;">
                    </div>

<template v-if="row.option_mouse_over == '텍스트' && hover">
                        <div :style="getHoverTextPositionStyle()">
                            <div :style="getHoverTextAnimationStyle()">
                                {{row.option_mouse_over_text}}
                            </div>
                        </div>
                    </template>
                    </div>
                </div>
            </div>
        </template>

<template v-else>
            <div class="jd-imageupload-box jd-widget-placeholder">
                <img class="jd-widget-placeholder-icon" src="/file/icon/widget-add/image.svg" alt="">
                <p class="jd-imageupload-text">더블 클릭하여 이미지를 추가하세요.</p>
            </div>
        </template>

</div>

observer: null,
                    scrollEvent : true,

table : null,
                    row: {},
                    rows : [],

hover : false,
                    parent_div_hover : false,

renderedWidth: null,
                    viewportWidth: typeof window !== "undefined" ? window.innerWidth : 0,

modal: {
                        id : "", // modal의 id값을 설정합니다 빈값이라면 고유값을 랜덤으로 생성해 지정합니다
                        class_1: "", // modal fade 부분에 클래스를 추가합니다 ex) "one_class two_class"
                        class_2: "", // modal-dialog 부분에 클래스를 추가합니다
                        status: false,
                        table : "",
                        primary : "",
                        row : null,
                    },

viewImage : "",
                };
            },
            async created() {
                this.component_idx = this.lib.generateUniqueId();
                this.api.component_name = this.component_name
            },
            async mounted() {
                this.table = await this.api.table("jd_widget_image");
                this.table.where('widget_code',this.widget_code);
                let row = await this.table.get();
                if(row.length > 0) this.row = row[0];

this.handleResize = () => {
                    this.viewportWidth = window.innerWidth;
                };
                window.addEventListener("resize", this.handleResize);

this.load = true;

this.$nextTick(async () => {
                    if(!this.row.file_src) $('.firewall').addClass('widget_setting_btn');

this.initScrollObserver();

if(window.design) {
                        window.design.menu.grid.reset();
                    }
                });
            },
            updated() {

},
            beforeUnmount() {
                window.removeEventListener("resize", this.handleResize);
            },
            methods: {
                isMobileView() {
                    return document.body.classList.contains('_mbv')
                        || this.viewportWidth <= 768
                        || this.lib.isMobile('device');
                },
                onImageLoad(event) {
                    if(this.row.image_attribute == 'original' && !this.renderedWidth) {
                        this.renderedWidth = event.target.offsetWidth;
                    }
                },
                getSrc() {
                    if(this.row.option_mouse_over == '이미지 전환' && this.hover) {
                        return this.row.option_mouse_over_image_src;
                    }

return this.row.file_src
                },
                leaveEvent() {
                    if(['페이드','줌인','줌아웃','플립'].includes(this.row.option_mouse_over)) {
                        this.scrollEvent = false;
                    }
                },
                hoverEvent() {
                    if(['페이드','줌인','줌아웃','플립'].includes(this.row.option_mouse_over)) {
                        this.scrollEvent = true;
                    }
                },
                getHoverTextPositionStyle() {
                    let style = {};
                    style.position = 'absolute';
                    style.color = this.row.option_mouse_over_text_color;
                    style.background = this.row.option_mouse_over_text_background;
                    style.fontSize = `${this.row.option_mouse_over_font_size}px`;

const position = this.row.option_mouse_over_text_position;

if(position === 'top-left') {
                        style.top = '0';
                        style.left = '0';
                    } else if(position === 'top-center') {
                        style.top = '0';
                        style.left = '50%';
                        style.transform = 'translateX(-50%)';
                    } else if(position === 'top-right') {
                        style.top = '0';
                        style.right = '0';
                    } else if(position === 'middle-left') {
                        style.top = '50%';
                        style.left = '0';
                        style.transform = 'translateY(-50%)';
                    } else if(position === 'middle-center') {
                        style.top = '50%';
                        style.left = '50%';
                        style.transform = 'translate(-50%, -50%)';
                    } else if(position === 'middle-right') {
                        style.top = '50%';
                        style.right = '0';
                        style.transform = 'translateY(-50%)';
                    } else if(position === 'bottom-left') {
                        style.bottom = '0';
                        style.left = '0';
                    } else if(position === 'bottom-center') {
                        style.bottom = '0';
                        style.left = '50%';
                        style.transform = 'translateX(-50%)';
                    } else if(position === 'bottom-right') {
                        style.bottom = '0';
                        style.right = '0';
                    }

return style;
                },

getHoverTextAnimationStyle() {
                    let style = {};

if(this.row.option_mouse_over_text_animation) {
                        const animation = this.row.option_mouse_over_text_animation;
                        const duration = 500;

if(animation === '페이드') {
                            style.animation = `hover-text-fade ${duration}ms ease both`;
                        } else if(animation === '슬라이드') {
                            style.animation = `hover-text-slide ${duration}ms ease both`;
                        } else if(animation === '플립') {
                            style.animation = `hover-text-flip ${duration}ms ease both`;
                        }
                    }

return style;
                },
                normalizeAlphaColor(color, defaultColor = '#00000030', legacyOpacity = null) {
                    color = String(color || '').trim();
                    defaultColor = String(defaultColor || '#00000030').trim();

return color + 'ff';
                    }

return color;
                    }

if(/^#[0-9a-f]{6}$/i.test(defaultColor)) return defaultColor + 'ff';
                    if(/^#[0-9a-f]{8}$/i.test(defaultColor)) return defaultColor;

return style;
                },
                getOverlayStyle() {
                    return {
                        backgroundColor: this.hexAlphaToRgba(this.normalizeAlphaColor(
                            this.row.option_mouse_over_background_color,
                            '#00000030',
                            this.row.option_mouse_over_overlay_opacity
                        ))
                    };
                },
                hoverStyle(style) {
                    if(!this.hover) return false;
                    if(this.row.option_mouse_over == '테두리') {
                        style.outline = `${this.row.option_mouse_over_border_width}px solid ${this.row.option_mouse_over_border_color}`;
                        style.outlineOffset = `-${this.row.option_mouse_over_border_width}px`;
                    }

if(this.row.option_mouse_over == '그림자') {
                        style.boxShadow = `0px 4px 8px rgba(0, 0, 0, ${this.row.option_mouse_over_box_shadow_opacity / 100})`;
                    }

return style;
                },
                initScrollObserver() {
                    let component = this;
                    let time = parseInt(this.row.option_scroll_delay) + parseInt(this.row.option_scroll_duration);
                    this.observer = new IntersectionObserver((entries) => {
                        entries.forEach(entry => {
                            if (entry.isIntersecting) {
                                this.scrollEvent = true;
                                setTimeout(() => {
                                    component.scrollEvent = false;
                                }, time);
                            } else if (!entry.isIntersecting) {
                                this.scrollEvent = false;
                            }
                        });
                    }, {
                        threshold: 0.1  // 이미지의 10%가 보이면 트리거
                    });

if(this.$refs.imageElement) {
                        this.observer.observe(this.$refs.imageElement);
                    }
                },
                async getClick() {
                    if(this.row.option_mouse_click == '링크 이동') {
                        this.lib.href(this.row.option_mouse_click_url,this.row.option_mouse_click_target);
                    }

if(this.row.option_mouse_click == '크게 보기') {
                        this.viewImage = this.row.file_src;
                    }

return false;
                },
                getTextStyle() {
                    let style = {};

return style;
                },
                getTextMargins() {
                    const prefix = this.isMobileView() ? 'option_text_mobile_margin_' : 'option_text_margin_';

return {
                        top: parseInt(this.row[prefix + 'top'], 10) || 0,
                        right: parseInt(this.row[prefix + 'right'], 10) || 0,
                        bottom: parseInt(this.row[prefix + 'bottom'], 10) || 0,
                        left: parseInt(this.row[prefix + 'left'], 10) || 0,
                    };
                },
                getPaddingStyle() {
                    let style = {};
                    style.boxSizing = 'border-box';
                    style.maxWidth = '100%';

return style;
                },
                getOuterStyle() {
                    let style = this.getPaddingStyle();
                    style.display = 'inline-block';
                    style.maxWidth = '100%';

if(this.row.option_mouse_click != "동작없음") {
                        style.cursor = 'pointer';
                    }

if(this.row.image_attribute == 'full') {
                        style.display = "block";
                        style.width = "100%";
                    }

if(this.row.option_scroll !== '효과없음' && this.scrollEvent) {
                        const effect = this.row.option_scroll;
                        const direction = this.row.option_scroll_direction || 'up';
                        const duration = parseInt(this.row.option_scroll_duration) || 300;  // 숫자로 변환
                        const delay = parseInt(this.row.option_scroll_delay) || 0;          // 숫자로 변환

const animationName = effect === '페이드' ? 'fade' :
                            effect === '줌인' ? 'zoom-in' :
                                effect === '줌아웃' ? 'zoom-out' :
                                    effect === '플립' ? 'flip' : 'fade';

style.animation = `${animationName}-${direction} ${duration}ms ease ${delay}ms both`;
                    }

if(['페이드','줌인','줌아웃','플립'].includes(this.row.option_mouse_over) && this.scrollEvent && this.parent_div_hover) {
                        const effect = this.row.option_mouse_over;
                        const direction = this.row.option_mouse_over_direction || 'up';
                        const duration = parseInt(this.row.option_mouse_over_duration) || 300;  // 숫자로 변환
                        const delay = parseInt(this.row.option_mouse_over_delay) || 0;          // 숫자로 변환

style.animation = `${animationName}-${direction} ${duration}ms ease ${delay}ms both`;
                    }

return style;
                },
                getDivStyle() {
                    let style = {};
                    style.position = 'relative';
                    style.display = 'inline-block';
                    style.overflow = 'hidden';
                    style.maxWidth = '100%';
                    style.boxSizing = 'border-box';

// 그림자
                    if(this.row.box_shadow_use) {
                        style.boxShadow = `0px 4px 8px rgba(0, 0, 0, ${this.row.box_shadow_opacity / 100})`;
                    }

// 모서리 둥글게
                    if (this.row.border_radius_use) {
                        style.borderRadius = `${this.row.border_radius_px}px`;
                    }

// 원형 이미지
                    if (this.row.circle_use) {
                        style.borderRadius = '50%';
                    }

// 테두리
                    if (this.row.border_use) {
                        style.border = `${this.row.border_width}px solid ${this.row.border_color}`;
                    }

if(this.row.image_attribute == 'full') {
                        style.display = "block";
                        style.width = "100%";
                    }

this.hoverStyle(style);

return style;
                },
                getStyle() {
                    let style = {};
                    const isMobileView = this.isMobileView();
                    const height = isMobileView ? (this.row.mobile_height || this.row.height) : this.row.height;
                    const width = isMobileView ? (this.row.mobile_width || this.row.width) : this.row.width;

// 모서리 둥글게
                    if (this.row.border_radius_use) {
                        style.borderRadius = `${this.row.border_radius_px}px`;
                    }

}
                    if(this.row.image_attribute == 'self') {
                        style.height = `${height}px`;
                        if (!this.row.circle_use) style.width = `${width}px`;
                        style.objectFit = 'cover';
                    }

if(this.row.option_mouse_over == '이미지 전환' && this.hover) {

if(this.row.image_attribute == 'original') style.width = `${this.renderedWidth}px`;
                        if(this.row.image_attribute == 'full') style.width = "100%";
                        if(this.row.image_attribute == 'self') style.width = `${width}px`;
                        style.objectFit = 'cover';
                        style.height = `${height}px`;
                        let animation = this.row.option_mouse_over_image_animation;
                        let duration = 500;
                        if(animation === '페이드') {
                            style.animation = `hover-text-fade ${duration}ms ease both`;
                        } else if(animation === '슬라이드') {
                            style.animation = `hover-text-slide ${duration}ms ease both`;
                        } else if(animation === '플립') {
                            style.animation = `hover-text-flip ${duration}ms ease both`;
                        }
                    }

return style;
                },
            },
            computed: {
                appState() {
                    return window.JAYDREAM_VUE_GLOBAL[this.$app_name];
                }
            },
            watch: {
                appState: {
                    async handler(newVal) {
                        if(newVal.reload) {
                            let row = await this.table.get();
                            if(row.length > 0) this.row = row[0];
                            this.appState.reload = false;
                        }
                    },
                    deep: true
                }
            }
        }});
</script>

/* 키프레임들 */
    @keyframes fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fade-down { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fade-left { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes fade-right { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes fade-center { from { opacity: 0; } to { opacity: 1; } }

@keyframes zoom-in-up { from { opacity: 0; transform: scale(0.8) translateY(30px); } to { opacity: 1; transform: scale(1) translateY(0); } }
    @keyframes zoom-in-down { from { opacity: 0; transform: scale(0.8) translateY(-30px); } to { opacity: 1; transform: scale(1) translateY(0); } }
    @keyframes zoom-in-left { from { opacity: 0; transform: scale(0.8) translateX(30px); } to { opacity: 1; transform: scale(1) translateX(0); } }
    @keyframes zoom-in-right { from { opacity: 0; transform: scale(0.8) translateX(-30px); } to { opacity: 1; transform: scale(1) translateX(0); } }
    @keyframes zoom-in-center { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

@keyframes zoom-out-up { from { opacity: 0; transform: scale(1.2) translateY(30px); } to { opacity: 1; transform: scale(1) translateY(0); } }
    @keyframes zoom-out-down { from { opacity: 0; transform: scale(1.2) translateY(-30px); } to { opacity: 1; transform: scale(1) translateY(0); } }
    @keyframes zoom-out-left { from { opacity: 0; transform: scale(1.2) translateX(30px); } to { opacity: 1; transform: scale(1) translateX(0); } }
    @keyframes zoom-out-right { from { opacity: 0; transform: scale(1.2) translateX(-30px); } to { opacity: 1; transform: scale(1) translateX(0); } }
    @keyframes zoom-out-center { from { opacity: 0; transform: scale(1.2); } to { opacity: 1; transform: scale(1); } }

@keyframes flip-up { from { opacity: 0; transform: perspective(400px) rotateX(90deg); } to { opacity: 1; transform: perspective(400px) rotateX(0); } }
    @keyframes flip-down { from { opacity: 0; transform: perspective(400px) rotateX(-90deg); } to { opacity: 1; transform: perspective(400px) rotateX(0); } }
    @keyframes flip-left { from { opacity: 0; transform: perspective(400px) rotateY(90deg); } to { opacity: 1; transform: perspective(400px) rotateY(0); } }
    @keyframes flip-right { from { opacity: 0; transform: perspective(400px) rotateY(-90deg); } to { opacity: 1; transform: perspective(400px) rotateY(0); } }

/* 호버 텍스트 애니메이션 */
    @keyframes hover-text-fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

@keyframes hover-text-slide {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

@keyframes hover-text-flip {
        from {
            opacity: 0;
            transform: perspective(400px) rotateX(90deg);
        }
        to {
            opacity: 1;
            transform: perspective(400px) rotateX(0);
        }
    }

/* 이미지 오버레이 */
    .widget-image-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 910000;
        cursor: pointer;
    }

.widget-image-overlay img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
        cursor: default;
    }

.widget-overlay-close {
        position: absolute;
        top: 20px;
        right: 30px;
        font-size: 40px;
        color: white;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        width: 40px;
        height: 40px;
        line-height: 1;
    }

.widget-overlay-close:hover {
        color: #ccc;
    }
</style>
<script type="text/x-template" id="design-widget-map-google-template">
    <div v-if="load">
        <div v-html="modelValue.google_iframe"></div>
    </div>

table : null,
                    row: {},
                    rows : [],
                };
            },
            async created() {
                this.component_idx = this.lib.generateUniqueId();
                this.api.component_name = this.component_name
            },
            async mounted() {
                // this.table = await this.api.table("exam");
                // await this.table.get(this.rows,{paging : 10})

this.load = true;

},
            methods: {

},
            computed: {

},
            watch: {

}
        }});
</script><script type="text/x-template" id="design-widget-map-kakao-template">
    <div v-if="load">
        <iframe
            class="design-widget-map-kakao-frame"
            :src="iframeSrc"
            :style="getStyle()"
            frameborder="0"
            allowfullscreen
            loading="lazy">
        </iframe>
    </div>

},
            methods: {
                getStyle() {
                    let style = {
                        width: "100%",
                        border: "0",
                    };

if(this.lib.isMobile()) {
                        style.height = (this.row.mobile_height || this.row.pc_height || 320) + "px";
                    } else {
                        style.height = (this.row.pc_height || 450) + "px";
                    }

return style;
                }
            },
            computed: {
                row() {
                    return this.modelValue || {};
                },
                iframeSrc() {
                    const code = this.row.widget_code || this.widget_code || "";
                    const origin = this.kakaoMapEmbedOrigin || window.location.origin;
                    return origin.replace(/\/$/, "") + "/JayDream/kakaoMapEmbed.php?widget_code=" + encodeURIComponent(code);
                }
            },
            watch: {

}
        }});
</script>

<div class="design-widget-map-modal-google-note">
                ※ 지도의 크기를 조정하시려면, 퍼온 링크 내에서 width(너비), height(높이) 픽셀값을 각각 수정해 주세요.(*채우기: width=”100%” 입력)
            </div>
        </div>