:root {
  --line: #e5e7eb; --text: #111; --muted: #6b7280; --radius: 5px;
}

* {
  box-sizing: border-box;
}

.section {
  margin-bottom: 36px;
}

.section h2 {
  margin: 0 0 12px 0; font-size: 18px;
}

.summary {
  margin-top: 8px; font-size: 14px; color: #334155;
}

/* 공통 컴포넌트 스타일 */
.img-multiselect {
  position: relative; display: inline-block;
}

.ims-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  width: 100%;
  /*padding: 0 120px;*/
  background: #fff;
  border: 1px solid #dae2e6;
  border-radius: 5px;
  cursor: pointer;
}

.ims-trigger__label {
  flex:0 0 95%; text-align: center;
}

.ims-trigger__icon {
  position: absolute; right: 10px; top: 10px; width: 18px; height: 18px; flex: 0 0 auto; transition: transform .18s ease; transform: rotate(180deg);
}

.ims-trigger[aria-expanded="true"] .ims-trigger__icon {
  transform: rotate(0);
}

.ims-panel {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: 380px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.08); overflow: hidden;
}

.ims-head,.ims-foot {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #fafafa; border-bottom: 1px solid #f0f0f0;
}

.ims-foot{
  border-top: 1px solid #f0f0f0; border-bottom: none; justify-content: flex-end;
}

.ims-title {
  flex: 1; font-weight: 700;
}

.ims-count {
  font-size: 12px; color: var(--muted);
}

.ims-reset,.ims-ok {
  height: 32px; padding: 0 10px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer;
}

.ims-ok {
  background: #111; color: #fff; border-color: #111;
}

.ims-body {
  position: relative;
}

.ims-grid {
  list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 12px; row-gap: 24px; max-height: 48vh; overflow: auto; -ms-overflow-style:none; scrollbar-width: none;
}

.ims-grid::-webkit-scrollbar {
  width: 0; height: 0;
}

.ims-option {
  display: block; cursor: pointer; position: relative;
}

.ims-option input {
  position: absolute; opacity: 0; pointer-events: none;
}

/*
.ims-card {
  border:1px solid var(--line); border-radius:var(--radius); background:#f3f4f6; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .15s ease, border-color .15s ease
}
.ims-card:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,.06)
}
*/

/* 카드 안 우하단에 수량 셀렉트 배치 */
.ims-card {
  position: relative;
}

.ims-qty-wrap {
  /*position: absolute; right: 8px; bottom: 8px;*/
  /*
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 2px 6px;
  */
  /*box-shadow: 0 2px 8px rgba(0,0,0,.06);*/
}

.ims-qty-wrap.is-disabled {
  opacity: .5;
}

.ims-qty {
  /*
  border: none; background: transparent; outline: none;
  font-size: 13px; padding: 2px 0;
  appearance: none;
  */
}

/* 파이어폭스 기본 화살표 줄이기 */
.ims-qty::-ms-expand {
  display: none;
}


.ims-img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #e5e7eb;
}

.ims-name {
  width: 100%; padding: 10px; font-size: 14px; color: var(--text); background: #fff;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ims-option input:checked + .ims-card {
  border-color: #111; box-shadow: 0 0 0 2px #111 inset; padding: 2px;
}

.ims-option input:checked + .ims-card .ims-name {
  font-weight: 600;
}

.ims-option input:checked + .ims-card::after {
  content: "\2714\FE0E"; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #111; color: #fff; font-size: 12px; font-weight: 700;
}

.ims-hint {
  position: absolute; left: 0; right: 0; height: 28px; pointer-events: none; opacity: 0; transition: opacity .2s ease;
}

.ims-hint--bottom {
  bottom: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center 6px,linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%); background-size:20px 20px, 100% 100%;
}

.ims-body.show-bottom-hint .ims-hint--bottom {
  opacity: 1;
}

.ims-grid {
  padding-bottom: 28px;
}

@media (max-width:420px) {
  .ims-panel {
    width: 92vw;
  }

  .ims-grid {
    grid-template-columns: 1fr;
  }
}


.after-items {
  display: grid; grid-template-columns: 1fr 100px auto auto auto auto; align-items: center; gap: 10px; margin-bottom: 10px; max-width: 380px;
}

/*
.item-one-remove {
  transition: filter 0.3s; cursor:pointer;
}

.item-one-remove:hover {
  filter: sepia(1) hue-rotate(-30deg) saturate(600%) brightness(0.9);
}
*/

.item-one-remove {
  cursor: pointer;
  transition: filter .25s;
}

.item-one-remove:hover {
  /*filter: hue-rotate(0deg) saturate(5) brightness(1.2) sepia(1) hue-rotate(-50deg);*/
}


















  .opt-selector {
    position: relative;
  }

 .opt-selector .trigger-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #dee2e6;
    background-color: #fff;
    cursor: pointer;
    font-size: 14px;
  }

  .opt-selector .trigger-btn .trigger-btn-label {
    width: 95%;
  }

  .opt-selector .opt-panel {
    position: absolute;
    top: 110%;
    right: 0;
    min-width: 362px;
    max-height: 600px;
    border: 1px solid #dee2e6;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    /*overflow-y: auto;*/
    z-index: 1000;
  }


  .opt-selector .opt-panel .panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
  }

  .opt-panel .opt-ok {
    border: none; padding: 4px 16px;
    color: #1a66ea; border-radius: 4px;
    background-color: rgba(26,102,234,0.2);
  }

  /* 옵션 내용 */
  .opt-selector .opt-panel .panel-body {
    max-height: 500px;
    overflow-y: auto;
    padding-bottom: 20px;
  }

  .opt-selector .opt-panel .panel-body .opt-grid {
    display: grid;
    padding: 0 15px;
    grid-template-columns: repeat(2, 1fr); justify-content: space-between; column-gap: 15px; row-gap: 30px;
  }

  .opt-grid .grid-item-checkbox {
  }

  .opt-grid .grid-item-wrap input[type="checkbox"] {
    position: absolute; opacity: 0; pointer-events: none;
  }

  .opt-grid .grid-item-wrap .grid-item {
    border: 1px solid #fff;
  }

  /* 옵션선택시 그리드박스 표시 */
  .opt-grid .grid-item-wrap input:checked + .grid-item .grid-item-img {
    border-color: #1279bd;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
  }

  .opt-grid .grid-item-img {
    position: relative; background-color: #f7f7f7;
    width: 100%; height: 136px; border: 1px solid #d1d1d1; border-radius: 4px; overflow: hidden;
  }

  .opt-grid .grid-item-title {
    padding: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 99%;
  }




  .trigger-btn-icon {
    transition: transform .18s ease;
  }

  .trigger-btn[aria-expanded="true"] .trigger-btn-icon {
    transform: rotate(180deg);
  }