/* ===== WMX 전용: Label | Drawing | Control (3열) ===== */
.wmx-skin .wmcm-options-list .wmcm-option-item{
  display: grid;
  grid-template-columns: 210px 64px 1fr; /* Label | Drawing | Control */
  column-gap: 0;                         /* 세로 라인 끊김 방지 */
  align-items: center;
  min-height: 50px;
}

/* 라벨/도움 열의 세로 구분선 */
.wmx-skin .wmcm-option-label{ border-right: 1px solid #D1D1D6; }
.wmx-skin .wmcm-option-help{
  display:flex; align-items:center; justify-content:center;
  border-right: 1px solid #D1D1D6;
  min-height: 36px; min-width: 64px;
}

/* help 아이콘 정렬(공통 규칙 덮어쓰기) */
.wmx-skin .wmcm-option-help .info-icon{ margin:0; width:20px; height:20px; opacity:.95; cursor:pointer; }
.wmx-skin .wmcm-option-help .info-icon:hover{ opacity:1; }

/* 컨트롤 칼럼 */
.wmx-skin .wmcm-option-control{ padding:7.5px 16px; display:flex; align-items:center; gap:10px; }

/* 첫 행 가운데 칼럼 'Drawing' 텍스트 (가운데 고정) */
.wmx-skin .wmcm-options-list > .wmcm-option-item:first-child .wmcm-option-help{
  position: relative; justify-content: center;
}
.wmx-skin .wmcm-options-list > .wmcm-option-item:first-child .wmcm-option-help::before{
  content: "Drawing";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap; line-height: 1;
  font-size: 12px; font-weight: 600; color: #6B7280;
}

/* 모바일(≤820px): label|help 한 줄, control 다음 줄 / Drawing 텍스트 숨김 */
@media (max-width: 820px){
  .wmx-skin .wmcm-options-list .wmcm-option-item{
    grid-template-columns: 1fr 28px;
    grid-template-areas:
      "label help"
      "control control";
    row-gap: 8px;
  }
  .wmx-skin .wmcm-option-label{ grid-area: label; border-right: none; padding: 5px 15px; width:auto; }
  .wmx-skin .wmcm-option-help{ grid-area: help; min-width: 28px; }
  .wmx-skin .wmcm-option-control{ grid-area: control; padding: 5px 15px; }
  .wmx-skin .wmcm-options-list > .wmcm-option-item:first-child .wmcm-option-help::before{ content: ""; }
}

/* 요약 각 항목 사이 얇은 구분선 */
.wmcm-summary-details > div + div {
  border-top: 1px solid #E5E7EB;
  margin-top: 6px;
  padding-top: 6px;
}

/* PN 토큰 색/스타일 (빈 값은 회색 물음표) */
.wmx-skin .wmcm-part-number .pn-token{
  color: #02457C;
}
.wmx-skin .wmcm-part-number .pn-placeholder{
  color: #9CA3AF;           /* 회색 */
  text-decoration: underline;
}

/* 아이콘 숨김 클래스 */
.wmx-skin .is-hidden { display:none !important; }







/* 프리뷰 확대 */
.wmx-skin .wmcm-image-preview{
  position: relative;
  overflow: hidden;
  background:#fff;
}
.wmx-skin .wmcm-image-preview img{
  display:block;
  width:100%;
  height:auto;
  transition: transform .18s ease; /* !important 제거 */
  transform-origin: center center; /* !important 제거: JS가 변경 가능하도록 */
  cursor: zoom-in;
}
@media (hover:hover){
  .wmx-skin .wmcm-image-preview.is-zoomed img{
    transform: scale(2);          /* !important 제거: JS scale과 충돌 방지 */
    cursor: zoom-out;
  }
}

/* 라이트박스 */
#wms-preview-lightbox{
  position:fixed; inset:0;
  background:rgba(0,0,0,.65);
  display:none; align-items:center; justify-content:center;
  z-index:99999; padding:24px;
}
#wms-preview-lightbox img{
  max-width:min(95vw, 1200px);
  max-height:90vh; display:block; height:auto; width:auto;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  background:#fff; border-radius:10px;
}

/* Close 버튼 색상 커스텀 */
#wms-preview-lightbox .wms-lb-close{
  position:absolute; top:18px; right:18px;
  background:#111;        /* 진한 배경 */
  color:#fff;             /* 흰 글자 */
  border:1px solid transparent;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
}
#wms-preview-lightbox .wms-lb-close:hover{
  background:#222;        /* hover 약간 밝게 */
}

/* 좌우 태그가 있는 라벨: 왼쪽 텍스트 / 오른쪽 [Left][Right] */
.wmx-skin .wmcm-option-item.has-side .wmcm-option-label {
  display:flex; justify-content:space-between; align-items:center;
}
.wmx-skin .wmcm-option-item.has-side .wmcm-option-label .side-tag{
  font-weight:600; opacity:.8; color:#02457C;
}