@import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";

.container {
  .size(@w: 315px, @h: 177px);
  border: 1px solid #0077c8;
  background-color: #eef6fb;
  position: relative;
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.5);

  &.QVC {
    background-color: #fef6f5;
    border: 1px solid #f57c67;
  }
  &.LGE {
    background-color: #f5f9fd;
    border: 1px solid #261f22;
  }
  &.SHOPLC {
    background-color: #edfafe;
    border: 1px solid #009fc3;
  }

  &.ONTV4U {
    background-color: #f5f9fd;
    border: 1px solid #a50034;
  }
  &.HSN {
    background-color: #eef6fb;
    border: 1px solid #0077c8;
  }
  &.liveTimeContainer {
    border: none;
    > div {
      padding: 0;
    }
  }

  .itemContainer {
    .size(@w: 315px, @h: 177px);
    padding: 13px 13px 18px 20px;
    .strtDt {
      color: @PRIMARY_COLOR_RED;
      .font(@fontFamily: @arialFontBold, @fontSize: 20px);
      font-weight: bold;
      line-height: 1.6;
      letter-spacing: -0.5px;
      margin-bottom: 3px;
    }

    .showNm {
      color: @COLOR_GRAY06;
      .font(@fontFamily: @arialFontBold, @fontSize: 24px);
      font-weight: bold;
      line-height: 1.33;
      letter-spacing: -0.6px;
      margin-bottom: 15px;
      .elip(@clamp:2);
    }

    .hstNm {
      color: #666;
      .font(@fontFamily: @arialFont, @fontSize: 18px);
      .elip(@clamp:1);
      margin-bottom: 5px; // 여백 추가
    }

    .patncLogo {
      position: absolute;
      width: 30px;
      top: 13px;
      right: 13px;
    }
    .live {
      .size(@w: 315px, @h: 175px);
      .thumbnail {
        .size(@w: 315px, @h: 175px);
        width: 100%;
        height: 100%;
      }
      .liveBox {
        background-color: @PRIMARY_COLOR_RED;
        color: @COLOR_WHITE;
        width: 53px;
        height: 22px;
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 18px;
        text-align: center;
        .flex();
      }
      .progressBarContainer {
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: @COLOR_WHITE;
        bottom: 0;
        .progressBar {
          max-width: 315px;
          height: 3px;
          background-color: @PRIMARY_COLOR_RED;
        }
      }
    }

    &:focus {
      &::after {
        z-index: 12;
        .focused(@boxShadow:22px);
      }
    }

    .timeOvelay {
      .size(@w: 313px, @h: 175px);
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(26, 26, 26, 0.5);
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      > div {
        color: #fff;
        text-align: center;
        font-size: 32px;
        line-height: 1.5;
        font-weight: bold;
      }
    }
  }

  .checkboxOverlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(26, 26, 26, 0.5);
    width: 100%;
    height: 100%;
    z-index: 10;

    .checkbox {
      position: absolute;
    }

    // &.focus {
    //   &::after {
    //     .focused(@boxShadow:22px, @borderRadius:12px);
    //   }
    // }
  }
}
