/*
 * 담기 레이어(.add_cart_pop) 전역 스코프.
 *
 * 목업 CSS 는 이 블록을 `page/product.css` 의 `.page-product main` 하위로만 정의한다.
 * 그런데 담기 레이어는 메인(`page-main`)·상품상세에서도 같은 컴포넌트로 열리므로
 * 메인에서는 옵션 드롭다운·선택목록·총액 블록의 스타일이 빠진다.
 *
 * 목업 원본은 수정하지 않는다(FE 사본은 원본과 바이트 단위로 동일해야 한다).
 * 대신 같은 선언을 조상 선택자 없이 한 번 더 둔다 — 선언 내용이 같아 상품목록·상세에서는
 * 결과가 달라지지 않고, 메인에만 없던 스타일이 채워진다.
 *
 * ⚠ `page/product.css` 의 `.add_cart_pop` 블록이 바뀌면 이 파일도 함께 갱신해야 한다.
 * 원본: page/product.css 664~903행, 3131~3275행(@media (max-width: 768px))
 *
 * `.pd_tit`(상품 머리글)이 특히 그렇다 — 스타일이 빠지면 썸네일이 원본 크기 그대로 나온다.
 */

/* 옵션을 문서 흐름에 넣어 팝업이 함께 늘어나게 한다. 최대 4행을 표시하고 나머지는 목록에서 스크롤한다.
 * #root로 상품목록의 깊은 원본 선택자와 모바일 재정의보다 우선한다. */
#root .add_cart_pop .ui-popup-panel .ui-popup-content .option-select > .option-list {
  position: static;
  max-height: 258px;
  overflow-y: auto;
  box-sizing: border-box;
}

#root .add_cart_pop .ui-popup-panel .ui-popup-content .option-list > li {
  height: 64px;
  box-sizing: border-box;
}

#root .add_cart_pop .ui-popup-panel .ui-popup-content .option-list > li > button {
  height: 100%;
  min-height: 0;
  padding: 10px 16px;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.add_cart_pop {
  .ui-popup-panel{
      width: 420px;
      .ui-popup-content{
          .pd_tit{
              display: flex;
              gap: 12px;
              margin-bottom: 12px;
              .img{
                  width: 62px;
                  height: 62px;
                  border-radius: 4px;
                  overflow: hidden;
                  flex-shrink: 0;
                  img{
                      object-fit: cover;
                      object-position: center center;
                      width: 100%;
                      display: block;
                  }
              }
              .tit{
                  em{
                      font-size: 14px;
                      font-weight: 600;
                      line-height: 145%;
                      color: var(--color-text);
                  }
                  p{
                      overflow: hidden;
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 2;
                      margin-top: 2px;
                      color: var(--color-text);
                      font-size: 14px;
                      line-height: 145%;
                  }
              }
          }
          .option-select{
              position:relative;
              margin-bottom: 12px;
              width:100%;

              .select-btn{
                  width:100%;
                  height:44px;
                  padding: 11px 16px;
                  display:flex;
                  align-items:center;
                  justify-content:space-between;
                  background:#fff;
                  border:1px solid #ddd;
                  border-radius: 4px;
                  cursor:pointer;

                  .placeholder{
                      font-size: 15px;
                      font-weight: 400;
                      line-height: 145%;
                      color:var(--color-text-gray);
                  }

                  .arrow{
                      width: 16px;
                      height: 16px;
                      background: url('/assets/images/sub/product/open_arrow02.svg') center no-repeat;
                      transform:rotate(0deg);
                  }
              }

              .option-list{
                  position:absolute;
                  left:0;
                  right:0;
                  top:100%;
                  display:none;
                  background:#fff;
                  border:1px solid #ddd;
                  border-top:0;
                  max-height:250px;
                  overflow-y:auto;
                  z-index:20;

                  li{
                      button{
                          width:100%;
                          height:40px;
                          display:flex;
                          align-items:center;
                          justify-content:space-between;
                          padding:0 20px;
                          background:#fff;
                          border:0;
                          font-size: 14px;
                          font-weight: 400;
                          line-height: 145%;
                          cursor:pointer;
                          color: var(--color-text);

                          &:hover{
                              background:var(--color-bg-gray);
                          }
                      }
                      &+li{
                          border-top:1px solid #eee;
                      }
                      &.disabled{
                          button{
                              color:#bbb;
                              cursor:default;
                              &:hover{
                                  background:#fff;
                              }
                          }
                          em{
                              color:var(--color-text-light);
                          }
                      }
                      /* &.selected{
                          button{
                              background:#f5f5f5;
                          }
                      } */
                  }
              }
              &.active{
                  .arrow{
                      transform:rotate(180deg);
                  }
                  .select-btn{
                      border-radius:6px 6px 0 0;
                  }
                  .option-list{
                      display:block;
                  }
                  >button{
                      border-top: 1px solid rgba(17, 17, 17, 0.50);
                      border-left: 1px solid rgba(17, 17, 17, 0.50);
                      border-right: 1px solid rgba(17, 17, 17, 0.50);
                  }
                  >.option-list{
                      border-bottom: 1px solid rgba(17, 17, 17, 0.50);
                      border-left: 1px solid rgba(17, 17, 17, 0.50);
                      border-right: 1px solid rgba(17, 17, 17, 0.50);
                      border-radius: 0 0 4px 4px;
                  }
              }
          }
          .option_result{
              margin-bottom: 12px;
              display: flex;
              flex-direction: column;
              gap: 8px;
              max-height: 320px;
              overflow-y: scroll;
              li{
                  border-radius: 4px;
                  background: #F6F6F6;
                  padding: 16px;
                  gap: 12px;
                  display: flex;
                  flex-direction: column;

                  >div{
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      >p{
                          color: var(--color-text);
                          width: 90%;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                      }
                      .close{
                          padding: 0;
                          background: url('/assets/images/sub/product/close.svg') center no-repeat;
                          width: 16px;
                          height: 16px;
                          border: 0;
                      }
                      >div{
                          display: flex;
                          align-items: center;
                          gap: 12px;
                          button{
                              width: 32px;
                              height: 32px;
                              border: 0;
                              padding: 0;
                              &.minus{background: url('/assets/images/sub/product/minus.svg') center no-repeat;}
                              &.plus{background: url('/assets/images/sub/product/plus.svg') center no-repeat;}
                          }
                          span{
                              font-weight: 600;
                              color: var(--color-text);
                          }
                      }
                      .price{
                          color: var(--color-text);
                      }
                  }
              }
          }
          .total_price{
              padding: 0 16px 16px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              p{
                  color: var(--color-text);
                  font-size: 15px;
                  font-weight: 600;
                  line-height: 140%;
              }
              span{
                  color: var(--color-text);
                  font-size: 18px;
                  font-weight: 600;
                  line-height: 135%;
              }
          }
      }
      .ui-popup-foot{
          padding-top: 0px;
          .bottom-actions{
              padding-top: 8px;
              width: 100%;
          }
      }
  }
}

/* 장바구니 담기는 흰 배경에 파란 글자·테두리로 표시한다. */
.add_cart_pop .add-cart-submit {
  border-color: var(--color-action-blue, #597FD0);
  background: #fff;
  color: var(--color-action-blue, #597FD0);
}

@media (max-width: 768px) {
  .add_cart_pop {
    .ui-popup-panel{width: 100%;}
    .ui-popup-handle{
        margin-bottom: 16px;
    }
    .ui-popup-head{display: none;}
    .ui-popup-content{
        .pd_tit{
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
            .img{
                border-radius: 4px;
                flex-shrink: 0;
                width: 62px;
                height: 62px;
                overflow: hidden;
                img{
                    width: 100%;
                    object-fit: cover;
                    object-position: center center;
                    display: block;
                }
            }
            .tit{
                em{
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 145%;
                    color: var(--color-text);
                }
                p{
                    margin-top: 2px;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 145%;
                    color: var(--color-text);
                }
            }
        }
        .option-select{
            position:relative;
            margin-bottom: 12px;
            width:100%;

            .select-btn{
                width:100%;
                height:44px;
                padding: 11px 16px;
                display:flex;
                align-items:center;
                justify-content:space-between;
                background:#fff;
                border:1px solid #ddd;
                border-radius: 4px;
                cursor:pointer;

                .placeholder{
                    font-size: 15px;
                    font-weight: 400;
                    line-height: 145%;
                    color:var(--color-text-gray);
                }

                .arrow{
                    width: 16px;
                    height: 16px;
                    background: url('/assets/images/sub/product/open_arrow02.svg') center no-repeat;
                    transform:rotate(0deg);
                }
            }

            .option-list{
                position:absolute;
                left:0;
                right:0;
                top:100%;
                display:none;
                background:#fff;
                border:1px solid #ddd;
                border-top:0;
                max-height:250px;
                overflow-y:auto;
                z-index:20;

                li{
                    button{
                        width:100%;
                        height:40px;
                        display:flex;
                        align-items:center;
                        justify-content:space-between;
                        padding:0 20px;
                        background:#fff;
                        border:0;
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 145%;
                        cursor:pointer;
                        color: var(--color-text);

                        &:hover{
                            background:var(--color-bg-gray);
                        }
                    }
                    &+li{
                        border-top:1px solid #eee;
                    }
                    &.disabled{
                        button{
                            color:#bbb;
                            cursor:default;
                            &:hover{
                                background:#fff;
                            }
                        }
                        em{
                            color:var(--color-text-light);
                        }
                    }
                    /* &.selected{
                        button{
                            background:#f5f5f5;
                        }
                    } */
                }
            }
            &.active{
                .arrow{
                    transform:rotate(180deg);
                }
                .select-btn{
                    border-radius:6px 6px 0 0;
                }
                .option-list{
                    display:block;
                }
                >button{
                    border-top: 1px solid rgba(17, 17, 17, 0.50);
                    border-left: 1px solid rgba(17, 17, 17, 0.50);
                    border-right: 1px solid rgba(17, 17, 17, 0.50);
                }
                >.option-list{
                    border-bottom: 1px solid rgba(17, 17, 17, 0.50);
                    border-left: 1px solid rgba(17, 17, 17, 0.50);
                    border-right: 1px solid rgba(17, 17, 17, 0.50);
                    border-radius: 0 0 4px 4px;
                }
            }
        }

        .option_result{
            margin-bottom: 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 320px;
            overflow-y: scroll;
            li{
                border-radius: 4px;
                background: #F6F6F6;
                padding: 16px;
                gap: 12px;
                display: flex;
                flex-direction: column;

                >div{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    >p{
                        color: var(--color-text);
                        width: 90%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: 14px;
                    }
                    .close{
                        padding: 0;
                        background: url('/assets/images/sub/product/close.svg') center no-repeat;
                        width: 16px;
                        height: 16px;
                        border: 0;
                    }
                    >div{
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        button{
                            width: 32px;
                            height: 32px;
                            border: 0;
                            padding: 0;
                            &.minus{background: url('/assets/images/sub/product/minus.svg') center no-repeat;}
                            &.plus{background: url('/assets/images/sub/product/plus.svg') center no-repeat;}
                        }
                        span{
                            font-weight: 600;
                            color: var(--color-text);
                            font-size: 14px;
                        }
                    }
                    .price{
                        color: var(--color-text);
                        font-size: 15px;
                    }
                }
            }
        }
        .total_price{
            padding: 0 16px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            p{
                color: var(--color-text);
                font-size: 15px;
                font-weight: 600;
                line-height: 140%;
            }
            span{
                color: var(--color-text);
                font-size: 18px;
                font-weight: 600;
                line-height: 135%;
            }
        }
    }
    .ui-popup-foot{
        padding-top: 0px;
        .bottom-actions{
            padding-top: 8px;
            width: 100%;
        }
    }
  }
}