@import url('./reset.css');
@import url('./layout.css');
:root {
  /* Primary Color */
  --color-orange-main: #ff6838;
  --color-orange-sub: #ffbaab;
  --color-red-main: #ca2222;
  --color-red-sub: #eeaaaa;
  
  /* Monotone Color */
  --color-black: #333;
  --color-gray1: #898989;
  --color-gray2: #bfbfbf;
  --color-gray3: #eee;
  --color-gray4: #f6f6f6;
  --color-gray5: #666;
  --color-gray6: #ccc;
  --color-gray7: #999;
  --color-gray8: #d9d9d9;
  --color-gray9: #4c4c4c;
  --color-white: #fff;
  /* --color-blue-main: #2589ca; */
  --color-blue-main: #0383d6;
  --color-blue-sub: #3691CE;
  --color-blue-active: #1f5db6;
  --color-blue-bg: #f2f5f8;

  

  /* Divider Line Color */
  --divider-line: #e0e0e0;
  --divider-dark-line: #d6d6d6;

  /* font-size */
  --fs-36: 36px;
  --fs-32: 32px;
  --fs-30: 30px;
  --fs-28: 28px;
  --fs-26: 26px;
  --fs-24: 24px;
  --fs-22: 22px;
  --fs-20: 20px;
  --fs-18: 18px;
  --fs-16: 16px;
  --fs-14: 14px;
  --fs-12: 12px;
  --fs-10: 10px;

  /* line-height */
  --lh-160: 1.6;
  --lh-145: 1.45;
  --lh-135: 1.35;
  --lh-130: 1.3;
  --lh-120: 1.2;

  --lh-54: 54px;
  --lh-52: 52px;
  --lh-50: 50px;
  --lh-42: 42px;
  --lh-41: 41px;
  --lh-40: 40px;
  --lh-38: 38px;
  --lh-36: 36px;
  --lh-34: 34px;
  --lh-32: 32px;
  --lh-30: 30px;
  --lh-28: 28px;
  --lh-27: 27px;
  --lh-26: 26px;
  --lh-24: 24px;
  --lh-23: 23px;
  --lh-22: 22px;
  --lh-20: 20px;
  --lh-19: 19px;
  --lh-18: 18px;
  --lh-17: 17px;
  --lh-16: 16px;
  --lh-15: 15px;
  --lh-14: 14px;
  --lh-13: 13px;
}
*{caret-color: var(--color-blue-main);}
button{margin: 0;padding: 0;border: 0;cursor: pointer;background-color: unset;overflow: visible;}
input:focus-visible{outline: 0;}
textarea:focus-visible{outline: 0;}

.lazyload,
.lazyloading{opacity: 0;}
.lazyloaded{opacity: 1;transition: opacity .4s;}

.displaynone{display: none !important;}

.sound_only{display:inline-block !important;position:absolute !important;top:0 !important;left:0 !important;width:0 !important;height:0 !important;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important;}

.frm_wrap{}
.frm_box{}
.frm_box + .frm_box{margin-top: 16px;}
.frm_box .frm_label_box{}
.frm_box .frm_label_box .frm_label{display: inline-block;}
.frm_box .frm_label_box .frm_label_txt{display: inline-block;font-size: var(--fs-16);font-weight: 400;line-height: var(--lh-24);color: var(--color-black);letter-spacing: -0.02em;}
.frm_box .frm_label_box .frm_required{display: inline-block;font-size: var(--fs-16);font-weight: 700;line-height: var(--lh-24);color: var(--color-orange-main);vertical-align: top;}

.frm_box .frm_inp_box{}
.frm_box .frm_label_box + .frm_inp_box{margin-top: 6px;}
.frm_box .frm_inp_box .frm_inp{width: 100%;height: 54px;padding: 0 10px;font-size: var(--fs-16);font-weight: 400;line-height: var(--lh-24);color: var(--color-black);letter-spacing: -0.02em;background-color: var(--color-white);border: 1px solid var(--color-gray2);border-radius: 4px;position: relative;box-sizing: border-box;transition: border-color .15s;}
.frm_box .frm_inp_box .frm_inp::placeholder{color: var(--color-gray7);}
.frm_box .frm_inp_box .frm_inp:focus{border-color: var(--color-blue-main);}
.frm_box .frm_inp_box .frm_inp.required{background-image: unset !important;background-repeat: unset !important;background-position: unset !important;}

.frm_box .frm_msg_box{margin-top: 2px;}
.frm_box .frm_tooltip_msg{margin-top: 2px;display: none;}
.frm_box .frm_msg_box .frm_msg_txt{display: inline-block;font-size: var(--fs-14);font-weight: 300;line-height: var(--lh-20);color: var(--color-gray1);letter-spacing: -0.02em;}
.frm_box .frm_tooltip_msg .tooltip_msg{display: inline-block;font-size: var(--fs-14);font-weight: 300;line-height: var(--lh-20);color: var(--color-orange-main);letter-spacing: -0.02em;}

/* 인풋 커스텀 */
.frm_only_inp{}
.frm_only_inp + .frm_only_inp{margin-top: 10px;}
.frm_only_inp .frm_label_box{}
.frm_only_inp .frm_label_box .frm_label{}
.frm_only_inp .frm_label_box .frm_label_txt{}

.frm_only_inp .frm_inp_box{}
.frm_only_inp .frm_label_box + .frm_inp_box{margin-top: 0;}
.frm_only_inp .frm_inp_box .frm_inp{}



/* 체크박스 커스텀 */
.frm_chk_box{}
.frm_chk_box .frm_label_box{}
.frm_chk_box .frm_chk_label{display: inline-flex;align-items: center;justify-content: center;flex-wrap: nowrap;column-gap: 12px;position: relative;cursor: pointer;}
.frm_chk_box .frm_chk_inp{display:inline-block !important;position:absolute !important;top:0 !important;left:0 !important;width:0 !important;height:0 !important;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important;appearance: none !important;-webkit-appearance: none !important;}
.frm_chk_box .frm_chk_label .icon_frm_chk{flex: 0 0 auto;width: 16px;height: 16px;pointer-events: none;}
.frm_chk_box .frm_chk_label .icon_frm_chk svg{width: 100%;height: 100%;pointer-events: none;}
.frm_chk_box .frm_chk_label .icon_frm_chk svg path{fill: var(--color-gray6);transition: fill .2s;}
.frm_chk_box .frm_chk_inp:checked ~ .icon_frm_chk svg path{fill: var(--color-blue-main);}
.frm_chk_box .frm_chk_label .frm_label_txt{display: inline-block;font-size: var(--fs-14);font-weight: 400;line-height: var(--lh-20);color: var(--color-black);cursor: pointer;}
.frm_chk_box .frm_chk_label .frm_label_txt.bold{font-weight: 700;}

.frm_chk_box.type_box .frm_chk_label{column-gap: 8px;}
.frm_chk_box.type_box .frm_chkbox{flex: 0 0 auto;width: 20px;height: 20px;display: inline-flex;align-items: center;justify-content: center;border-radius: 4px;border: 1px solid var(--color-gray6);background-color: var(--color-white);transition: background-color .2s, border-color .2s;}
.frm_chk_box.type_box .frm_chk_label .icon_frm_chk{width: 14px;height: 14px;}
.frm_chk_box.type_box .frm_chk_inp:checked ~ .frm_chkbox{background-color: var(--color-blue-main);border-color: var(--color-blue-main);}
.frm_chk_box.type_box .frm_chk_inp:checked ~ .frm_chkbox .icon_frm_chk svg path{fill: var(--color-white);}



.frm_radio_box{}
.frm_radio_box .frm_label_box{}
.frm_radio_box .frm_radio_label{display: inline-flex;align-items: center;justify-content: center;flex-wrap: nowrap;column-gap: 12px;position: relative;cursor: pointer;}
.frm_radio_box .frm_radio_inp{display:inline-block !important;position:absolute !important;top:0 !important;left:0 !important;width:0 !important;height:0 !important;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important;}
.frm_radio_box .frm_radio_label .icon_frm_radio{flex: 0 0 auto;width: 16px;height: 16px;pointer-events: none;}
.frm_radio_box .frm_radio_label .icon_frm_radio svg{width: 100%;height: 100%;pointer-events: none;}
.frm_radio_box .frm_radio_label .icon_frm_radio svg path{fill: var(--color-gray6);transition: fill .2s;}
.frm_radio_box .frm_radio_inp:checked ~ .icon_frm_radio svg path{fill: var(--color-blue-main);}
.frm_radio_box .frm_radio_label .frm_label_txt{display: inline-block;font-size: var(--fs-14);font-weight: 400;line-height: var(--lh-20);color: var(--color-black);cursor: pointer;}
.frm_radio_box .frm_radio_label .frm_label_txt.bold{font-weight: 700;}

.frm_radio_box.type_box .frm_radio_label{column-gap: 8px;}
.frm_radio_box.type_box .frm_radiobox{flex: 0 0 auto;width: 20px;height: 20px;display: inline-flex;align-items: center;justify-content: center;border-radius: 4px;border: 1px solid var(--color-gray6);background-color: var(--color-white);transition: background-color .2s, border-color .2s;}
.frm_radio_box.type_box .frm_radio_label .icon_frm_radio{width: 14px;height: 14px;}
.frm_radio_box.type_box .frm_radio_inp:checked ~ .frm_radiobox{background-color: var(--color-blue-main);border-color: var(--color-blue-main);}
.frm_radio_box.type_box .frm_radio_inp:checked ~ .frm_radiobox .icon_frm_radio svg path{fill: var(--color-white);}

.frm_chk_box .frm_msg_box{padding-left: 28px;}
.frm_box .frm_inp_box input[readonly].frm_inp,
input[readonly] {background-color: #f9f9f9;color: #666;border: 1px solid #ddd;cursor: default;}

.frm_box .frm_inp_box.frm_textarea_box{position: relative;}
.frm_box .frm_inp_box.frm_textarea_box .char_count_box{position: absolute;right: 20px;bottom: 8px;display: inline-block;font-size: var(--fs-12);font-weight: 400;line-height: var(--lh-16);letter-spacing: -0.02em;}
.frm_box .frm_inp_box.frm_textarea_box .char_count_box #char_count{display: inline-block;font-size: var(--fs-12);font-weight: 400;line-height: var(--lh-14);letter-spacing: -0.02em;}
.frm_box .frm_inp_box.frm_textarea_box .frm_textarea{width: 100%;height: 150px;padding: 16px;font-size: var(--fs-16);font-weight: 400;line-height: var(--lh-24);color: var(--color-black);letter-spacing: -0.02em;background-color: var(--color-white);border: 1px solid var(--color-gray2);border-radius: 4px;position: relative;box-sizing: border-box;transition: border-color .15s;resize: none;}
.frm_box .frm_inp_box.frm_textarea_box .frm_textarea:focus{border-color: var(--color-blue-main);}

@media (max-width: 600px){
  .frm_box .frm_inp_box .frm_inp{font-size: var(--fs-14);line-height: var(--lh-20);}
}

.new_win_wrap .review_form_wrap{padding:20px;font-family:'Noto Sans KR',sans-serif}
.new_win_wrap .product_info_box{display:flex;align-items:center;margin-bottom:20px}
.new_win_wrap .product_thumb{width:60px;height:60px;object-fit:cover;margin-right:10px}
.new_win_wrap .product_text .product_name{display:block;font-size:16px;font-weight:700}
.new_win_wrap .product_text .product_price{font-size:14px;color:#666}
.new_win_wrap .like_box{text-align:center;margin:25px 0;padding:30px 0;border-top:solid 1px #ccc;border-bottom:solid 1px #ccc}
.new_win_wrap .like_label{font-weight:700;margin-bottom:10px}
.new_win_wrap .like_btn{font-size:16px;cursor:pointer;display:inline-flex;cursor:pointer;align-items:center;border:solid 1px #ccc;border-radius:100px;padding:10px 20px;margin-top:20px}
.new_win_wrap .like_box{text-align:center;margin:30px 0}
.new_win_wrap .like_label{font-size:16px;margin-bottom:10px;color:#333}
.new_win_wrap .like_btn input[type=checkbox]{display:none}
.new_win_wrap .like_btn svg{width:32px;height:32px;transition:fill .3s ease,stroke .3s ease;fill:none;stroke:#666;stroke-width:1}
.new_win_wrap .like_btn input[type=checkbox]:checked+svg{fill:#fff;stroke:#fff}
.new_win_wrap .like_btn span{margin-left:8px;font-size:16px;color:#999;font-weight:600}
.new_win_wrap .like_btn:has(input[type=checkbox]:checked){background-color:#3e84d0;border-color:#3e84d0}
.new_win_wrap .like_btn:has(input[type=checkbox]:checked) span{color:#fff}
.new_win_wrap .upload_box{margin:30px 0}
.new_win_wrap .upload_title{display:block;font-size:16px;font-weight:700;margin-bottom:5px}
.new_win_wrap .upload_guide{font-size:13px;color:#555;margin-bottom:10px;color:var(--color-blue-main)}
.new_win_wrap .upload_area{display:flex;gap:8px;flex-wrap:wrap}
.new_win_wrap .upload_btn{width:80px;height:80px;display:flex;justify-content:center;align-items:center;background:#fff;border:1px solid #ccc;font-size:24px;cursor:pointer;border-radius:4px}
.new_win_wrap .content_box{margin-top:20px;border-top:solid 1px #ccc;padding-top:30px}
.new_win_wrap .content_title{font-weight:700;font-size:16px;display:block;margin-bottom:5px}
.new_win_wrap .content_title>span{color:#e20000}textarea{width:100%;padding:10px;resize:none;font-size:14px;border:solid 1px #eee}
.new_win_wrap .char_counter{text-align:right;font-size:13px;color:#888;margin-top:5px}
.new_win_wrap .validation_message{font-size:14px;color:var(--color-orange-main);margin-top:4px;display:none}
.new_win_wrap .submit_box{margin-top:30px;text-align:center}
.new_win_wrap .btn_submit{background:#007bff;color:#fff;border:none;padding:12px 24px;font-size:16px;border-radius:4px;cursor:pointer}
.new_win_wrap .btn_submit[disabled]{background:#ccc;cursor:not-allowed}
.new_win_wrap .upload_box{margin:30px 0}
.new_win_wrap .upload_title{font-weight:700;display:block;margin-bottom:10px}
.new_win_wrap .upload_guide{font-size:13px;color:#888;margin-bottom:10px}
.new_win_wrap .upload_area{display:flex;flex-wrap:wrap;gap:10px}
.new_win_wrap .image_preview{position:relative;width:80px;height:80px;border:solid 1px #ddd;border-radius:4px}
.new_win_wrap .image_preview img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.new_win_wrap .image_preview button{position:absolute;top:-5px;right:-5px;background:#333;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:12px;cursor:pointer}
.new_win_wrap .image_preview button::before,
.new_win_wrap .image_preview button::after{content: '';display: block;width: 10px;height: 2px;border-radius: 2px;background-color: #fff;position: absolute;left: 50%;top: 50%;}
.new_win_wrap .image_preview button::before{transform: translate(-50%, -50%) rotate(45deg);}
.new_win_wrap .image_preview button::after{transform: translate(-50%, -50%) rotate(135deg);}