:root {
  /* 공통 */
  --color-black: #111;
  --color-primary: #CC3626;
  --color-main-gray: #323234;
  --color-white: #fff;

  --color-red: #CC3626;
  --color-blue: #387ADD;
  --color-green: #29994C;
  --color-gray: #D3D3D3;

  --color-gray5: #555;
  --color-gray7: #717479;
  --color-gray8: #818C96;
  --color-grayA: #aaa;
  --color-grayD: #d9d9d9;
  --color-grayE: #e9e9e9;


  --color-border: var(--color-border);
  --color-form-border: #D9D9D9;

  --color-bg-gray: #F8F8F8;
  /* 공통 흰색 배경 */
}

/* 공통 css */
body {
  background-color: #fff;
  font-family: 'SUIT', 'Spoqa Han Sans Neo', 'sans-serif';
  color: #111;
  letter-spacing: -0.2px;
}


/* font */
.fz24 {
  font-size: 24px;
}

.fz20 {
  font-size: 20px;
}

.fz18 {
  font-size: 18px;
}

.fz16 {
  font-size: 16px;
}

.fz14 {
  font-size: 14px;
}

.fz12 {
  font-size: 12px;
}

.fz10 {
  font-size: 10px;
}

.lh100 {
  line-height: 100%;
}

.lh120 {
  line-height: 120%;
}

.lh160 {
  line-height: 160%;
}

.fw100 {
  font-weight: 100;
}

.fw200 {
  font-weight: 200;
}

.fw300 {
  font-weight: 300;
}

.fw400 {
  font-weight: 400;
}

.fw500 {
  font-weight: 500;
}

.fw600 {
  font-weight: 600;
}

.fw700 {
  font-weight: 700;
}

.fw800 {
  font-weight: 800;
}

.fw900 {
  font-weight: 900;
}

/* color */
.gray000 {
  color: var(--color-black);
}
.gray800 {
  color: var(--color-gray8);
}

.gray700 {
  color: var(--color-gray5);
}

.gray600 {
  color: var(--color-gray7);
}

.gray500 {
  color: var(--color-gray8);
}

.gray400 {
  color: var(--color-grayA);
}

.gray300 {
  color: #D9D9D9;
}

.gray200 {
  color: var(--color-border);
}

.gray100 {
  color: var(--color-white);
}
.mainColor02 {
  color: var(--color-blue);
}
.mainColor01 {
  color: var(--color-primary);
}

.errorRed {
  color: var(--color-red);
}

/* bg color */
.whiteBg {
  background: var(--color-white);
}
.grayBg {
  background-color: var(--color-bg-gray);
}

/* border */
.borderTop {
  border-top: 1px solid var(--color-border);
}

.borderBottom {
  border-bottom: 1px solid var(--color-border);
}

.borderRight {
  border-right: 1px solid var(--color-border);
}

.borderLeft {
  border-left: 1px solid var(--color-border);
}

.borderAll {
  border: 1px solid var(--color-border);
}

/* margin */
.mt0 {
  margin-top: 0px;
}

.mt4 {
  margin-top: 4px;
}

.mt8 {
  margin-top: 8px;
}

.mt12 {
  margin-top: 12px;
}

.mt16 {
  margin-top: 16px;
}

.mt20 {
  margin-top: 20px;
}

.mt24 {
  margin-top: 24px;
}

.mt32 {
  margin-top: 32px;
}


.mt40 {
  margin-top: 40px;
}

.mb0 {
  margin-bottom: 0px;
}

.mb4 {
  margin-bottom: 4px;
}

.mb8 {
  margin-bottom: 8px;
}

.mb12 {
  margin-bottom: 12px;
}

.mb16 {
  margin-bottom: 16px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb24 {
  margin-bottom: 24px;
}

.mr0 {
  margin-right: 0px;
}

.mr4 {
  margin-right: 4px;
}

.mr8 {
  margin-right: 8px;
}

.mr12 {
  margin-right: 12px;
}

.mr16 {
  margin-right: 16px;
}

.mr20 {
  margin-right: 20px;
}

.mr24 {
  margin-right: 24px;
}

.ml0 {
  margin-left: 0px;
}

.ml4 {
  margin-left: 4px;
}

.ml8 {
  margin-left: 8px;
}

.ml12 {
  margin-left: 12px;
}

.ml16 {
  margin-left: 16px;
}

.ml20 {
  margin-left: 20px;
}

.ml24 {
  margin-left: 24px;
}

/* padding */
.pr8 {
  padding-right: 8px;
}

.pr16 {
  padding-right: 16px;
}

.pt16 {
  padding-top: 16px;
}

.pr24 {
  padding-right: 24px;
}

.pn16 {
  padding-left: 16px;
}

.pdAll8 {
  padding: 8px;
}
.pdAll12 {
  padding: 12px;
}
.pbAll16 {
  padding: 16px;
}

.pbAll24 {
  padding: 24px;
}

/* align */
.txtAlignL {
  text-align: left;
}

.txtAlignC {
  text-align: center;
}

.txtAlignR {
  text-align: right;
}


/* Tag */
.dfTag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  border-radius: 24px;
  font-size: 12px;
  font-weight: 400;
  padding: 0 4px;
  flex-shrink: 0;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: #fff;
}

.dfTag._square {
  border-radius: 4px;
  height: 20px;
}

.dfTag._red {
  border: 1px solid var(--color-red);
  color: var(--color-red);
}


/* scrollbar custom */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--color-border);
  border-radius: 10px;
}


._grow {
  flex-grow: 1;
}

.rgap16 {
  row-gap: 16px;
}

.img-box {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}
.img-box > img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    object-fit: cover;
}

#product-list .menu-list:not(:last-child) {margin-bottom: 24px;}