/* @import url('https://timeticket.co.kr/cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css'); */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css");
/* @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css"); */

/* Reset styles */
* { margin:0; padding:0; font-family: 'Pretendard Variable', 'Pretendard', 'Malgun Gothic'; }
html, body { width:100%; height:100%; background:#fff; }
html { font-size:16px; overflow-y: scroll; }
body, table { word-break:break-all; font-size:0.875rem; font-weight:400; }
ul,ol,li,dl,dt,dd { list-style:none; }
form, p { margin:0; }
img, fieldset { border:0; }
img { display:block; height:auto; }
em, address { font-style:normal; }
button { margin:0; padding:0; cursor:pointer; }
label { cursor:pointer; }

/* Links */
a { color:#000; text-decoration:none; }
a.underline:hover { text-decoration:underline; }

/* Tables */
table { border-collapse:collapse; }

/* Layout */
.wrap_1100 {
  margin: auto;
  width: 1100px;
  position: relative;
}

/* 유틸리티 */
.red{ color:red; }
.blue{ color:blue; }
.txt_red {color:red;}
.txt_blue {color:#000098;}

.loading {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('/images/loading.gif') 50% 40% no-repeat; background-size: 60px 60px;
  background-color: rgba(0, 0, 0, 0.3);
}

/* 프로모 뱃지 공통 — 색상 + 기본 크기/모양 (컨테이너에서 필요시 오버라이드) */
.promo_new,
.promo_timesale,
.promo_today {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.2;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
}
.promo_new { background: #e6f1fa; color: #3777c5; }
.promo_timesale { background: #fae8e6; color: #D83A3A; }
.promo_today { background: #e9f1df; color: #37841F; }

/* 페이지 위로가기 버튼 */
.scroll-up {
  position: fixed;
  bottom: 50px;
  right: 50px;
  width: 70px;
  height: 70px;
  opacity: 0;
  border-radius: 50%;
  transition: all 300ms ease-in;
  pointer-events: none;
  cursor: pointer;
  z-index: 10000;
}

.scroll-up.visible {
  opacity: 0.9;
  display: block;
  pointer-events: auto;
}

.scroll-up img {
  width: 100%;
  opacity: 0.9;
}


/* ── 웹 전체 최소 폭 — 뷰포트가 1100px 미만이면 가로 스크롤만 발생, 내부 콘텐츠는 고정 ── */
body.is-web { min-width: 68.75rem; }

/* ========================================
   웹 Header (web-header)
   ======================================== */

/* ── 전체 래퍼 ── */
.web-header-wrap { background:#fff; min-width:68.75rem; }

/* ── 공통 레이아웃 (1100px 중앙 정렬) ── */
.web-header { width:68.75rem; margin:0 auto; position:relative; }

/* ── SNB (유틸리티 바) — 전폭 배경 ── */
.web-header-top {
  display:flex; align-items:center; justify-content:flex-end;
  width:100%; background:#f8f7f6;
}
.web-header-top .web-header-util {
  width:68.75rem; margin:0 auto;
  display:flex; align-items:center; justify-content:flex-end;
}

#web-header-gnb { margin:0; margin-right:-0.375rem; display:flex; align-items:center; }
#web-header-gnb > li { position:relative; font-size:0.8125rem; }
#web-header-gnb > li > a {
  display:block; text-align:center; padding:0.5625rem 0.75rem;
  color:#888; white-space:nowrap; transition:color 0.15s;
}
#web-header-gnb > li > a:hover { color:#555; }
#web-header-gnb > li + li::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:0.625rem; background:#ccc; opacity:0.5;
}

/* SNB 드롭다운 */
#web-header-gnb > li > ul {
  position:absolute; visibility:hidden;
  top:100%; left:50%; transform:translateX(-50%);
  margin-top:0.25rem; padding:0.5rem 0;
  border-radius:0.5rem;
  box-shadow:0 0.25rem 1rem rgba(0,0,0,0.08);
  border:1px solid #f0f0f0;
  background:#fff; z-index:9999;
}
#web-header-gnb > li > ul li { display:block; }
#web-header-gnb > li > ul li a {
  display:block; width:5.5rem; font-size:0.8125rem;
  color:#555; padding:0.5rem 1rem; text-align:center;
  transition:color 0.15s, background 0.15s;
}
#web-header-gnb > li > ul li a:hover { color:#ff4b4b; }

/* SNB 친구초대 */
#web-header-gnb .invite-badge > a {
  padding:0.5625rem 0.75rem; display:flex; align-items:center;
}
#web-header-gnb .invite-badge a span {
  display:inline-flex; align-items:center; gap:0.25rem;
  font-size:0.8125rem; font-weight:500; color:#ff4b4b;
  white-space:nowrap; transition:opacity 0.15s;
}
#web-header-gnb .invite-badge a:hover span { opacity:0.7; }
#web-header-gnb .invite-badge a svg { width:0.8125rem; height:0.8125rem; flex-shrink:0; }

/* ── 로고 + 검색 (mid) ── */
.web-header-mid {
  display:flex; align-items:center; justify-content:space-between;
  height:3.5rem; padding-top:1rem;
}
.web-header-logo-link { display:flex; align-items:center; flex-shrink:0; padding-left:0.3125rem; }
.web-header-logo { width:11.5rem; cursor:pointer; image-rendering:optimizeQuality; }

/* 검색 */
.web-header-search { position:relative; }
.web-header-search-box { position:relative; display:flex; align-items:center; }
.web-header-search-input {
  width:15rem; height:2.25rem;
  box-sizing:border-box;
  font-size:0.875rem; line-height:2.25rem;
  padding:0 2.5rem 0 1.125rem;
  border:1px solid #ddd; border-radius:1.25rem;
  color:#333; background:#fff;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.web-header-search-input::placeholder { color:#bbb; }
.web-header-search-input:focus {
  outline:none; border-color:#ff4b4b;
  box-shadow:0 0 0 0.1875rem rgba(255,75,75,0.08);
}
.web-header-search-input.show {
  border-color:#ff4b4b; border-bottom-color:transparent;
  border-bottom-left-radius:0; border-bottom-right-radius:0;
  box-shadow:none;
}
.web-header-search-btn {
  position:absolute; right:0.5rem; top:50%; transform:translateY(-50%);
  padding:0.375rem; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.web-header-search-btn svg { transition:stroke 0.15s; }
.web-header-search-btn:hover svg { stroke:#ff4b4b; }

/* 검색 자동완성 */
.web-header-search-dropdown {
  display:none; position:absolute; top:100%; left:0;
  width:15rem; max-height:40vh; overflow-y:auto; box-sizing:border-box;
  background:#fff; border:1px solid #ff4b4b; border-top:none;
  border-radius:0 0 1.25rem 1.25rem;
  box-shadow:0 0.5rem 1.5rem rgba(0,0,0,0.1); z-index:100;
}
.web-header-search-dropdown a {
  display:block; padding:0.75rem 1.25rem;
  font-size:0.875rem; color:#333; transition:background 0.12s;
}
.web-header-search-dropdown a:hover { background:#f9f9f9; }
.web-header-search-dropdown.show { display:block; }
.web-header-search-dropdown mark { background-color:unset !important; color:#ff4b4b !important; }

/* ── GNB 네비게이션 (bot) — 전폭 하단 라인 ── */
.web-header-bot { border-bottom:1px solid #ddd; }

.web-header-nav { display:flex; align-items:stretch; height:3.125rem; }
.web-nav-main { display:flex; align-items:stretch; }
.web-nav-promo { display:flex; align-items:stretch; margin-left:auto; }

/* GNB 메뉴 아이템 — 공통 */
.web-nav-item {
  display:flex; align-items:center; height:100%;
  padding:0 1rem; position:relative;
  color:#888; font-size:1.0625rem; font-weight:500;
  white-space:nowrap; transition:color 0.15s;
}
.web-nav-item:hover { color:#222; }
.web-nav-main .web-nav-item:first-child { padding-left:0.375rem; }
.web-nav-promo .web-nav-item:last-child { padding-right:0.375rem; }

/* GNB 선택 — 볼드 + 밑줄 */
.web-nav-item.is-active { color:#000; font-weight:700; }
.web-nav-item.is-active::after {
  content:''; position:absolute;
  bottom:-1px; left:50%; transform:translateX(-50%);
  width:calc(100% - 1.5rem); height:2px;
  background:#000; z-index:1;
}
.web-nav-main .web-nav-item:first-child.is-active::after { left:calc(50% - 0.325rem); }
.web-nav-promo .web-nav-item:last-child.is-active::after { left:calc(50% + 0.325rem); }

/* GNB 프로모 — 밑줄 없음, 굵기만 */
.web-nav-promo .web-nav-item.is-active::after { display:none; }
.web-nav-promo .web-nav-item:hover { font-weight:600; }

/* 타임세일 / 오늘할인 — 고유 컬러 (기본/hover/선택 모두 유지) */
.web-nav--timesale { color:#ff4b4b; }
.web-nav--timesale:hover { color:#e03030; }
.web-nav--timesale.is-active { color:#ff4b4b; }
.web-nav--today { color:#459E26; }
.web-nav--today:hover { color:#357A1D; }
.web-nav--today.is-active { color:#459E26; }


/* ========================================
   웹 Footer (web-footer)
   ======================================== */

.web-footer {
  background: #fff;
  border-top: 1px solid #eee;
  color: #666;
  letter-spacing: -0.02em;
}
.web-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.75rem 0;
}

/* 상단: 링크 + 서포트 */
.web-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.web-footer__links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #444;
}
.web-footer__links a { color: #444; text-decoration: none; }
.web-footer__links a:hover { color: #111; }
.web-footer__sep { color: #ddd; font-weight: 300; }
.web-footer__privacy { font-weight: 700; color: #222 !important; }
.web-footer__support {
  display: flex;
  gap: 0.5rem;
}
.web-footer__support a {
  font-size: 0.8125rem;
  color: #555;
  text-decoration: none;
  padding: 0.375rem 1rem;
  border: 1px solid #d5d5d5;
  border-radius: 1.25rem;
  transition: border-color 0.2s, color 0.2s;
}
.web-footer__support a:hover {
  border-color: #999;
  color: #222;
}

/* 중단: 고객센터 + 사업자 정보 */
.web-footer__middle {
  margin-bottom: 1rem;
}
.web-footer__cs {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.web-footer__cs-label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #333;
}
.web-footer__cs-tel {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #333;
}
.web-footer__cs-hours {
  font-size: 0.875rem;
  color: #777;
}
.web-footer__biz {
  font-size: 0.8125rem;
  color: #999;
  line-height: 1.75;
}
.web-footer__dot {
  margin: 0 0.25rem;
  color: #ddd;
}
.web-footer__biz-link {
  display: inline-block;
  padding: 0.0625rem 0.3125rem;
  margin-left: 0.1875rem;
  background: #f0f0f0;
  border-radius: 0.1875rem;
  font-size: 0.75rem;
  color: #999;
  text-decoration: none;
}
.web-footer__biz-link:hover { background: #e5e5e5; }
.web-footer__addr {
  font-size: 0.8125rem;
  color: #999;
  margin-top: 0.375rem;
}

/* 하단: 저작권 */
.web-footer__copyright {
  font-size: 0.8125rem;
  color: #aaa;
  letter-spacing: 0;
}

/* 페이징 → css/paging.css 로 이관됨 */

/* 할인쿠폰 라벨 (상품 카드 하단) */
.dcoupon_label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #fff;
  color: #333333;
  border: 1px solid #ddd;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
}
.dcoupon_label__icon {
  width: 1.25em;
  height: 1.25em;
  fill: #007aff;
  flex: none;
  display: block;
}
.dcoupon_label__text {
  line-height: 1;
}