/* 말줄임표 */
.ellipsis-1 {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ellipsis-2 {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

#wrapper {
  max-width: 600px;
  min-width: 340px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  color: var(--color-main-gray);
  position: relative;
  line-height: 1;
  letter-spacing: -0.04em;
}

.home {
  font-size: 16px;
}

.home header {
  border-bottom: 1px solid #E9E9E9;
  box-sizing: border-box;
}
.home header.grayBg {
  border-bottom: none;
}

.home .header-inner {
  padding: 0 16px;
}

.home .logoBox {
  width: 75px;
  height: auto;
}

.home .header-top {
  height: 40px;
}
.home .header-bottom {
  overflow-y: auto;
  scrollbar-width:none;
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
}
.home .header-bottom::-webkit-scrollbar {
  display: none;
  width: 0px;
  height: 0px;
  background: transparent; /* Safari, Chrome */
}
.home .header-bottom .gnbList {
  gap:12px;
}
.home .header-right button {
  width: 24px;
  height: 24px;
}


.home .gnbList li {
  position: relative;
  flex-shrink: 0;
}

.home .gnbList a {
  display: inline-block;
  padding: 10px 8px;
  font-weight: 400;
  font-size: 16px;
}

.home .gnbList .active>a {
  color: var(--color-red);
  font-weight: 700;
}

.home .gnbList .active>a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  display: block;
  transform: translateX(-50%);
  color: var(--color-red);
  background-color: var(--color-red);
  width: calc(100% + 8px);
  height: 2px;
}

.home .inner {
  padding: 0 16px;
}


/* nav */
nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  max-width: 600px;
  min-width: 340px;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.05);
  z-index: 90;
}

nav li {
  width: 25%;
  text-align: center;
  padding: 12px 0;
}

nav a {
  row-gap: 6px;
  color: #717479;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: inherit;
}

nav .active a {
  color: var(--color-red);
}

nav img {
  width: 24px;
}


/* main기본구조조 */
main {
  padding-bottom: 114px;
}

.txt-box .tit {
  margin-bottom: 8px;
  color: #111;
  font-size: 16px;
  font-weight: 500;
  line-height: inherit;
  letter-spacing: inherit;
}

.txt-box .disc {
  color: var(--secondary-color);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: inherit;
  width: 100%;
  text-overflow: ellipsis;
}

.highlight {
  display: inline-block;
  margin: 8px 0 12px;
  padding: 1px 2px;
  background-color: var(--color-main-gray);
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: inherit;
}

.txt-box .price {
  color: var(--color-black);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: inherit;
}

/* tab */
.new-list button {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 50px;
  background-color: #fff;
  color: var(--color-main-gray);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: inherit;
}

.new-list .active > button {
  background-color: var(--color-red);
  border-color: var(--color-red);
  color: #fff;
}


/* 최신순 */
.sort-dropdown {
  position: relative;
  display: inline-block;
  color: var(--secondary-color);
  font-size: 14px;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: inherit;
}


.sort-dropdown button {
  column-gap: 4px;
}

.sort-dropdown img:not(.meal) {
  width: 7px;
  height: 13px;
}

.sort-options {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  row-gap: 8px;
  width: 100%;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-align: center;
  z-index: 10;
}

.sort-options li {
  padding: 6px 0;
}

.sort-options li:hover {
  background-color: rgba(128, 128, 128, 0.2);
}


/* hanbab.html */
.menu-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.menu-box .img-box {
  position: relative;
}
.menu-box img {
  min-height: 158px;
}
.menu-box .disc {
  color: var(--color-gray8);
}
.menu-box .shoppingBtn {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(204, 54, 38, 0.6);
  z-index: 5;
}
.menu-box .shoppingBtn img {
  width: 16px;
  min-height: 16px;
}

/* 검색페이지 */
.search header,
.cart header {
  border-color: #fff;
}

.search-tit {
  font-size: 16px;
  font-weight: 500;
  line-height: inherit;
  letter-spacing: inherit;
}
.cart .backBtn{
  width: 24px;
  text-align: left;
}
.backBtn span {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
}
.search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px;
}

.search-input {
  flex: 1;
  height: 40px;
  padding: 12px 24px 12px 40px; /* 왼쪽에 아이콘 여백 줌 */
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: url("../img/searchIcon-2.svg") no-repeat 12px center;
  background-size: 20px 20px;
  color: var(--color-gray8);
}

.result .search-input {
  color: var(--color-main-gray);
}

.btn-search {
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--color-red);
  border: 1px solid var(--color-red);
  background: #fff;
  border-radius: 4px;
  white-space: nowrap;
}

.search .img-box > img {
  width: 100%;
}


/* 장바구니 */
#wrapper.cart {
  background-color: var(--color-bg-gray);
}
.cartBtn.num  {
  position: relative;
}
.cartBtn.num > span::after {
  content: "3";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-red);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
}

/* 드로어 컨테이너 */
.drawer{
  position: fixed;
  inset: 0 0 0 auto;
  width: 80%;
  height: 100%;
  background: var(--color-white);
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 1200;
}
.drawer.open{ transform: translateX(0); }

.drawer-body{ height:100%; display:flex; flex-direction:column; outline: none; }
.drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--color-grayE);
}
.drawer-title{ font-size:16px; color:var(--color-black); font-weight:600; margin:0; }
.drawer-close{
  all: unset; cursor:pointer; display:grid; place-items:center;
  width:36px; height:36px; border-radius:8px;
}
.drawer-close:active{ background: var(--color-bg-gray); }

.drawer-content{ 
  display: flex; 
  flex-direction: column; 
  height: 100%; 
}

.drawer-nav{ 
  padding: 8px 12px 0; 
  overflow: auto; 
  flex: 1; 
}

/* 완전한 푸터 스타일 */
.drawer-footer {
  margin-top: auto;
  padding: 16px 12px 20px;
  border-top: 1px solid var(--color-grayE);
  /*background-color: #fafafa;*/
  font-size: 11px;
  line-height: 1.4;
}

.drawer-footer .footer-links {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.drawer-footer .footer-links a {
  font-size: 11px;
  color: var(--color-gray7);
  text-decoration: none;
  padding: 2px 0;
}

.drawer-footer .footer-links a:hover {
  color: var(--color-black);
}

.drawer-footer .social-links {
  margin-bottom: 12px;
}

.drawer-footer .blog-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-gray7);
  text-decoration: none;
}

.drawer-footer .blog-link .material-symbols-outlined {
  font-size: 14px;
}

.drawer-footer .blog-link:hover {
  color: var(--color-black);
}

.drawer-footer .company-info {
  margin-bottom: 12px;
}

.drawer-footer .company-name {
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 6px;
  font-size: 12px;
}

.drawer-footer .company-details {
  color: var(--color-gray8);
}

.drawer-footer .company-details > div {
  margin-bottom: 2px;
}

.drawer-footer .company-details a {
  color: var(--color-gray7);
  text-decoration: none;
}

.drawer-footer .company-details a:hover {
  color: var(--color-black);
}

.drawer-footer .business-hours {
  color: var(--color-gray7);
  font-size: 10px;
}

.drawer-footer .disclaimer {
  color: var(--color-gray8);
  font-size: 10px;
  line-height: 1.3;
}

.drawer-footer .disclaimer p {
  margin: 2px 0;
}

/* 배경 스크림 */
.drawer-scrim{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 1195;
}
.drawer-scrim.show{ opacity: 1; }

/* 포커스 표시 */
.drawer .menu-item:focus-visible,
.drawer .submenu-item:focus-visible,
.drawer-close:focus-visible{ outline:2px solid var(--color-gray8); outline-offset:2px; }

html.drawer-open, body.drawer-open{ overflow: hidden; }

.menu-item, .submenu-item{
  all:unset; display:flex; align-items:center; width:100%;
  padding:14px 12px; border-radius:8px; cursor:pointer;
  box-sizing: border-box;
}
.menu-item:active, .submenu-item:active{ background: var(--color-bg-gray); }
.menu-text{ font-size:16px; color: var(--color-black); }
.menu-group{ margin-top:4px; }
.has-chevron{ justify-content:space-between; padding-right:8px; }
.chevron{ width:18px; height:18px; position:relative; }
.chevron::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:8px; height:8px; border-right:2px solid var(--color-gray7); border-bottom:2px solid var(--color-gray7);
  transform: rotate(-45deg) translateY(-1px); transition: transform .2s ease;
}
.has-chevron[aria-expanded="false"] + .submenu{ display:none; }
.has-chevron[aria-expanded="false"] .chevron::before{ transform: rotate(45deg) translateY(1px); }
.submenu{ padding-left:8px; margin:4px 0 8px 28px; }
.submenu-item span{ font-size:15px; color: var(--color-gray7); }
.divider{ border:0; border-top:1px solid var(--color-grayE); margin:12px 0 8px; }
.profile{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:10px; }
.avatar{ width:36px; height:36px; border-radius:50%; background: var(--color-bg-gray); display:grid; place-items:center; color: var(--color-grayA); }
.profile-meta .name{ font-size:15px; color: var(--color-black); font-weight:600; }
.profile-meta .id{ font-size:12px; color: var(--color-gray8); margin-top:2px; }