:root{
    --gap: 10px;
    --arrow: 10px;
    --radius: 12px;
    --shadow: 0 8px 24px rgba(0,0,0,.16);
    --edge-pad: 12px;
  }
  
  /* =========================
     LAYOUT (PC 공통)
  ========================= */
  .detailcont1{ max-width:1300px; margin:auto; }
  
  .giftdiscountarea{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
  }
  .giftdiscountarea > span{
    font-size:14px;
    color:#141415;
    font-family:'NanumSquareNeoBold';
  }
  
  .detaildiscount{
    border:1px solid #d9d9d9;
    border-radius:14px;
    display:flex;
    justify-content:center;
    align-items:center;
    width:80px;
    height:24px;
    font-size:12px;
    font-family:'NanumSquareNeoBold';
    color:#57585a;
    cursor:pointer;
  }
  
  .popupdiscountcont{ max-width:420px !important; }
  
  .popuptitle{
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    color:#141415;
    font-family:'NanumSquareNeoBold';
  }
  
  .popupcont{
    width:100%;
    padding:0 20px;
    display:flex;
    flex-direction:column;
    gap:20px;
    align-items:center;
    text-align:center;
    margin-bottom:40px;
  }
  
  .popupsubcont{
    font-size:16px;
    color:#141415;
    font-family:'NanumSquareNeoBold';
    line-height:20px;
  }
  
  /* =========================
     GRID (할인표)
  ========================= */
  .popupdiscountgrid{
    display:flex;
    flex-direction:column;
    width:100%;
  }
  .gridheader{
    display:flex;
    justify-content:space-around;
    height:48px;
    align-items:center;
    background:#f5f5f5;
    border-top:1px solid #d9d9d9;
    border-bottom:1px solid #d9d9d9;
    font-size:14px;
    color:#141415;
    font-family:'NanumSquareNeoBold';
  }
  .headeritem{ flex:1; text-align:center; }
  
  .gridcont{
    height:48px;
    display:flex;
    align-items:center;
    justify-content:space-around;
    font-size:14px;
    font-family:'NanumSquareNeoBold';
    color:#141415;
    border-bottom:1px solid #e9e9e9;
  }
  .griditem{ flex:1; text-align:center; }
  
  .subinfo{
    color:#9e9e9e;
    font-size:13px;
    font-family:'NanumSquareNeo';
  }
  
  /* =========================
     PRICE/INFO
  ========================= */
  .deliverytitle{
    display:flex;
    flex-direction:column;
    gap:5px;
    color:#57585a;
    font-size:14px;
    font-family:'NanumSquareNeoBold';
    position:relative;
  }
  
  .mobileprice{
    flex-direction:column;
    align-items:start;
    gap:10px;
    font-family:'NanumSquareNeoBold';
    color:#141415;
  }
  
  .deliverycont{
    flex-direction:column;
    align-items:start !important;
    gap:10px;
    font-family:'NanumSquareNeoBold';
    color:#141415;
  }
  
  .deliveryprice1{
    font-size:14px !important;
    color:#141415 !important;
    font-family:'NanumSquareNeoExtraBold' !important;
    display:flex;
    flex-direction:column;
    gap:5px;
  }
  
  .deliveryinfo1, .deliveryinfo_mobile{
    color:#9e9e9e !important;
    font-size:12px;
    font-family:'NanumSquareNeo';
  }
  
  .swiper-slide > img{
    height:100%;
    width:100%;
    object-fit:cover;
  }
  
  .helpicon{ cursor:pointer; }
  
  /* =========================
     TOOLTIP
  ========================= */
  .tooltip1{
    position:absolute;
    z-index:1000;
    background:#fff;
    border:1px solid #00a0b6;
    border-radius:var(--radius);
    padding:14px 16px;
    max-width:min(360px, calc(100vw - 24px));
    opacity:0;
    transform:translateY(6px);
    pointer-events:none;
    transition:opacity .16s ease, transform .16s ease;
    left:51px;
    top:53px;
  }
  .tooltip1.show{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .tooltip1::after{
    content:"";
    position:absolute;
    width:var(--arrow);
    height:var(--arrow);
    background:#fff;
    border-left:1px solid #00a0b6;
    border-top:1px solid #00a0b6;
    transform:rotate(45deg);
    top:-7px;
    left:var(--arrow-left, 16px);
    box-shadow:-2px -2px 6px rgba(0,0,0,.04);
  }
  .tooltiptitle{ font-weight:700; font-size:14px; margin:0 0 6px; }
  .tooltiptxt{
    font-size:14px;
    color:#374151;
    margin:0;
    margin-right:25px;
    font-family:'NanumSquareNeo';
  }
  .tooltipclose{
    position:absolute;
    top:8px;
    right:8px;
    border:none;
    background:transparent;
    cursor:pointer;
    padding:6px;
    border-radius:8px;
  }
  .tooltipclose svg{ width:18px; height:18px; color:#6b7280; }
  
  /* =========================
     DISCOUNT AREA
  ========================= */
  .discountprictarea{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .orgprice1{
    font-family:'NanumSquareNeoBold';
    font-size:16px;
    color:#9e9e9e;
    text-decoration:line-through;
  }
  .maingiftprice{ gap:4px; }
  .discountrate1{
    font-size:22px;
    font-family:'NanumSquareNeoHeavy';
    color:#FF6B64;
  }
  .detailprice1{
    color:#141415;
    font-size:22px;
    font-family:'NanumSquareNeoHeavy';
  }
  
  .giftinfoarea{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-top:10px;
  }
  .giftinfoitem{
    display:flex;
    gap:10px;
    position:relative;
  }
  .giftinfotitle{
    font-size:14px;
    font-family:'NanumSquareNeoBold';
    color:#57585a;
    min-width:80px;
  }
  .giftinfodesc{
    display:flex;
    flex-direction:column;
    gap:7px;
  }
  .freedlievery{
    color:#00a0b6;
    font-size:14px;
    font-family:'NanumSquareNeoExtraBold';
    line-height:24px;
  }
  .deliverysub{
    display:flex;
    gap:3px;
    font-size:13px;
    font-family:'NanumSquareNeoBold';
  }
  .savepointinfo{
    color:#141415;
    font-size:14px;
    font-family:'NanumSquareNeoExtraBold';
    margin:2px 0 5px;
  }
  .savepointdesc{
    font-size:14px;
    font-family:'NanumSquareNeoBold';
    color:#9e9e9e;
    line-height:20px;
  }
  
  .pc_detail_content_wrapper{ padding-bottom:20px; }
  
  .createbtn{ width:100%; }
  
  .diyorder{
    width:100%;
    display:flex;
    gap:20px;
  }
  
  .diycalcinfo{
    width:100%;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:12px;
    padding-top:10px;
  }
  .diycalcitem{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
    font-family:'NanumSquareNeoBold';
    color:#57585a;
  }
  .diyproductprice{ text-decoration:line-through; }
  
  .diycalcdiscountitem{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:'NanumSquareNeoBold';
    font-size:14px;
    color:#ff6b64;
  }
  .diycalcdiscountitem > span{
    display:flex;
    gap:10px;
  }
  .diydiscount{
    background:#ffe5e4;
    padding:4px 6px;
    border-radius:28px;
    font-size:10px;
    line-height:10px;
  }
  
  .diyartarea{
    display:flex;
    gap:16px;
    padding:20px 0;
    border-top:1px solid #e9e9e9;
    margin-top:22px;
    border-bottom:1px solid #e9e9e9;
    margin-bottom:10px;
  }
  
  .optiondel{ cursor:pointer; }
  
  .discountpriceinfo{
    text-align:right;
    color:#00a0b6;
    font-size:12px;
    font-family:'NanumSquareNeoBold';
    line-height:16px;
    padding-bottom:12px;
  }
  
  .diyimgarea{
    width:96px;
    height:96px;
    position:relative;
    overflow:hidden;
    border-radius:8px;
  }
  .diyimgarea > img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
  }

  .diycomment {
    height:60px;
  }
  
  .diyartinfo{
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1;
  }
  
  .diyarttopinfo{
    display:flex;
    gap:10px;
    align-items:center;
  }
  
  .diyartedit{
    background:#f5f5f5;
    width:100px;
    height:28px;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2px;
    font-size:12px;
    font-family:'NanumSquareNeoBold';
    color:#57585a;
    cursor:pointer;
  }
  .diyarttopinfo > span{
    font-size:12px;
    color:#00a0b6;
    font-family:'NanumSquareNeoBold';
  }
  
  .mobilecategorymastername{ display:none; }
  .mobilehandler{ display:none; }
  
  /* =========================
     ≤ 992px
  ========================= */
  @media (max-width: 992px){
    .mobileprice{
      display:flex !important;
      flex-direction:row;
      gap:1px !important;
      font-size:14px !important;
      color:#141415 !important;
      font-family:'NanumSquareNeoBold' !important;
    }
    .deliveryinfo_mobile{ font-size:14px !important; }
  
    .giftdiscountarea{
      flex-direction:column;
      align-items:start;
      gap:5px;
    }
  
    .tooltip1{ left:10px; top:54px; }
  
    .topcontent{
      padding-left:0 !important;
      padding-right:0 !important;
    }
    .pc_detail_content_wrapper{
      padding-left:20px;
      padding-right:20px;
    }
  }
  
  /* =========================
     ≤ 768px (Mobile)
  ========================= */
  @media (max-width: 768px){
  
    .tooltip1::after{ left:216px; right:22px; }
  
    .common-top-header{ box-shadow:none; }
    .topnavi{ display:none; }
    #favicon{ display:none; }
  
    .createbtn{ display:flex; gap:10px; }
    .diycomment {
      height:50px;
      font-size:11px !important;
    }

    .diyimgarea {
      width:82px;
      height:82px;
    }

    .diyartarea {
      gap:8px;
    }

    #bottomfavicon{
      width:56px;
      height:56px;
      display:flex;
      align-items:center;
      justify-content:center;
      border:1px solid #d9d9d9;
      border-radius:8px;
      flex:none;
    }
  
    .btn-ask, .btn-basket{ flex:1; }
  
    .mobilecategorymastername{
      display:flex;
      margin-bottom:12px;
      font-size:12px;
      color:#9e9e9e;
      font-family:'NanumSquareNeoBold';
    }
  
    /* PC 옵션 영역 숨김 */
    .optionarea{ display:none !important; }
  
    /* 일반 diyInfo-wrapper(PC 레이아웃 깨짐 방지용) */
    .diyInfo-wrapper{
      max-width:100% !important;
      width:100% !important;
      left:0;
      bottom:0;
      top:inherit;
      transform:none; /* 일반 영역에서는 transform 쓰지 않음 */
      border-bottom-right-radius:0 !important;
      border-bottom-left-radius:0 !important;
    }

    .popupdiscountcont {
      height: 400px;
      margin: auto;
      width: 90% !important;
      position: relative;
      overflow: hidden;
      border-bottom-right-radius:8px !important;
      border-bottom-left-radius:8px !important;
    }
  
    .diy-tit{ display:none; }
    .diyInfo-wrapper > .btn_close{ display:none; }

    .popupdiscountcont > .btn_close {display: inline-block;}
  
    .mobilehandler{
      width:100%;
      height:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding-top:16px;
      -webkit-user-select:none;
      user-select:none;
      cursor:grab;
    }
    .mobilehandler:active{ cursor:grabbing; }
  
    /* 드래그 중 transition 끄기 (아이디가 diyinfoBox인 경우만) */
    #diyinfoBox.is-dragging{ transition:none; }
  
    .diyartarea{
      width:100%;
      padding:0 20px;
      border-top:none;
      border-bottom:none;
      margin-bottom:0;
    }
  
    .mobileoption{
      display:block !important;
      width:100%;
      padding:0 20px;
    }
  
    body.scrolllock .topbtn_mobile{ display:none !important; }
  
    /* =========================
       product_option (바텀시트 팝업)
    ========================= */
  
    /* 팝업 레이어 전체 */
    #product_option{
      position:fixed;
      inset:0;
      z-index:10004;
      display:none; /* 기본 숨김 */
    }
    #product_option.is-open, #diyinfo.is-open{ display:grid !important; }
  
    /* 딤 */
    #product_option::before, #diyinfo::before{
      content:"";
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.35);
      opacity:0;
      transition: opacity .30s ease;
    }
    #product_option.is-open::before, #diyinfo.is-open::before{ opacity:1; }
    #product_option.is-closing::before, #diyinfo.is-closing::before{ opacity:0; }
  
    /* 바텀시트 본체 */
    #product_option .diyInfo-wrapper, #diyinfo .diyInfo-wrapper{
      position:absolute;
      left:0;
      right:0;
      bottom:0;
  
      max-height:calc(100dvh - 20px);
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      
      box-sizing:border-box;
  
      opacity: 0;
    transform: translateY(100%);
    transition:
      transform 0.6s cubic-bezier(.22, 1, .36, 1),
      opacity  .30s ease;
      will-change:transform;
  
      background:#fff;
    }

    #product_option .diyInfo-wrapper {
        padding-bottom:calc(100px + env(safe-area-inset-bottom));
    }

    #product_option.is-open .diyInfo-wrapper, #diyinfo.is-open .diyInfo-wrapper{ opacity: 1;transform:translateY(0); }
    #product_option.is-closing .diyInfo-wrapper, #diyinfo.is-closing .diyInfo-wrapper{  opacity: 0;transform:translateY(100%); }
  
    /* 상위 overflow로 잘리는 경우 대비 */
    #product_option,
    #product_option #productOptionBox{
      overflow:visible;
    }
    
    .options-container {
      position: relative;
    }
  
    /* 옵션 목록(드롭다운) 스크롤 */
    #product_option .options-container-mobile{
      max-height:min(19dvh, 420px);
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
    }
    .showdeail , .closedetail {
      cursor: pointer;
      margin-left:2px;
  }

  .closedetail {
      display:none;
  }

  .detailsubitem {
      display: flex;
      justify-content: space-between;
  }

  .detailsubitemarea {
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .totalprice {
    font-size:16px;
    color:#ff6b64;
  }

  .add_addr {
      width: 100%;
      height: auto;
  }

  .add_addr_btn {
      height: 95px;
      width: 100%;
      border: 1px solid #d9d9d9;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      color: #00a0b6;
      font-size: 14px;
      font-family: 'NanumSquareNeoBold';
      border-radius: 4px;
      cursor: pointer;
  }

  .detailbar {
      width: 100%;
      height: 1px;
      background: #e9e9e9;
      margin-top: 8px;
      margin-bottom: 8px;
  }

  .detailsubitemtitle, .detailsubitemcont {
      font-size: 13px;
      color: #9e9e9e;
      font-family:'NanumSquareNeoBold';
  }

  .orderpricearea {
    display: flex;
    align-items: center;
  }
  }