/* ============================================================================
 * 공동구매몰(ponyong.co.kr) — 공통 컴포넌트
 *   출처 : Figma "[v1.0] 공구몰 사이트 기획 및 디자인" > 공구몰 시안 (A안)
 *   tokens.css 를 먼저 로드할 것.
 *
 *   ※ 시안 캔버스는 678px 이지만 타입 크기는 실 px 값이다(본문 13~15px).
 *     따라서 통짜로 축소하지 않고, 폭만 유동으로 두고 글자 크기는 시안값을 지킨다.
 *     - 컨테이너 : max-width 678px, 좁은 화면에서는 100%
 *     - 좌우 여백 : 시안 28px → 좁은 화면에서 16px 로 축소
 *     - 이미지 : 고정 px 대신 aspect-ratio 1/1 (시안 622×622 정사각)
 * ========================================================================= */

/* ---- Reset / Base ------------------------------------------------------ */
* { box-sizing: border-box; }

body.gonggu {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body2);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  color: var(--c-black-900);
  background: var(--c-white);
  -webkit-text-size-adjust: 100%;
}

/* 링크 리셋은 :where() 로 특정도 0 을 만든다.
   .gonggu a (0,2,0) 로 두면 .g-bnav__item 같은 단일 클래스 색상을 덮어써서
   비활성 탭이 Gray600 대신 Black900 으로 나온다. */
:where(.gonggu a) { color: inherit; text-decoration: none; }
.gonggu img { max-width: 100%; display: block; }
.gonggu button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* 화면 컨테이너 : 시안 678px 기준 */
.g-wrap {
  max-width: var(--layout-max);
  margin: 0 auto;
  background: var(--c-white);
  /* 하단 고정 네비 높이만큼 여백 */
  padding-bottom: var(--bottomnav-h);
}

/* 좌우 여백 — 시안 03_Spacing 의 2xl(28px) 고정.
   좁은 화면에서 16px 로 줄이던 분기는 제거했다(PC/모바일 동일 규칙, 2026-08-21). */
.g-pad { padding-left: var(--layout-pad); padding-right: var(--layout-pad); }

/* ============================================================================
 * GNB — 678×64
 *   좌 햄버거 / 중앙 로고(맘스공구, Coral) / 우 검색·장바구니
 * ========================================================================= */
.g-gnb {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center;
  height: var(--gnb-h);
  padding: 0 var(--layout-pad);
  background: var(--c-white);
}
.g-gnb__btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 auto;
  color: var(--c-coral-500);   /* 시안 GNB : 햄버거·검색·장바구니 전부 Coral */
}
/* 로고는 화면 가로 정중앙에 고정한다.
   왼쪽은 햄버거 1개, 오른쪽은 검색+장바구니 2개라 flex 로 나누면 가운데가 아니라
   왼쪽으로 밀린다. absolute 로 빼서 아이콘 개수와 무관하게 정중앙에 둔다. */
.g-gnb__logo {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: var(--fs-h2); font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-coral-500);
  white-space: nowrap;
}
.g-gnb__right { display: flex; align-items: center; gap: var(--sp-sm); flex: 0 0 auto; margin-left: auto; }

/* ============================================================================
 * Category Tabs — 678×52
 *   활성 : Coral(#FF7A59) 텍스트 + 하단 언더라인 / 비활성 : Gray600(#8A8A8A)
 *   ※ 시안 Category Tabs.png 픽셀 샘플링으로 확정한 값이다. Black900 아니다.
 * ========================================================================= */
.g-tabs {
  position: sticky; top: var(--gnb-h); z-index: 29;
  display: flex; align-items: stretch; gap: var(--sp-xl);
  height: var(--tabs-h);
  padding: 0 var(--layout-pad);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-gray-200);
  overflow-x: auto; scrollbar-width: none;
}
.g-tabs::-webkit-scrollbar { display: none; }
.g-tabs__item {
  position: relative; display: flex; align-items: center;
  white-space: nowrap;
  font-size: var(--fs-body1); font-weight: var(--fw-medium);
  color: var(--c-gray-600);
}
.g-tabs__item.is-active { color: var(--c-coral-500); font-weight: var(--fw-semibold); }
/* 활성 언더라인 — 시안 픽셀 측정값 : 28×3px, 끝이 둥글고 라벨 중앙 정렬.
   (탭 폭 전체가 아니라 고정 28px 이다. 라벨이 길어도 바 길이는 그대로) */
.g-tabs__item.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: 8px;
  width: 28px; height: 3px; margin-left: -14px;
  border-radius: var(--r-full);
  background: var(--c-coral-500);
}

/* ============================================================================
 * Main Banner — 678×300
 *   Coral 그라데이션 배경 + 흰 텍스트 + 좌하단 도트
 *   시안 : BannerText (36,96) / Dots (36,264) 활성 18×6 + 6×6 ×2
 * ========================================================================= */
.g-banner {
  position: relative;
  aspect-ratio: 678 / 300;
  background: linear-gradient(135deg, var(--c-coral-500) 0%, var(--c-coral-300) 100%);
  color: var(--c-white);
  overflow: hidden;
}
.g-banner__inner {
  position: absolute; left: 36px; top: 96px; right: 36px;
}

.g-banner__title {
  font-size: var(--fs-display); font-weight: var(--fw-semibold);
  margin: 0;
}
.g-banner__sub {
  margin: var(--sp-sm) 0 0;
  font-size: var(--fs-body2); font-weight: var(--fw-regular);
  opacity: .9;
}
.g-banner__dots {
  position: absolute; left: 36px; bottom: 30px;
  display: flex; align-items: center; gap: 6px;
}

.g-banner__dot {
  width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--c-white); opacity: .5;
}
.g-banner__dot.is-active { width: 18px; opacity: 1; }

/* ============================================================================
 * Section — Sec_타임특가 / Sec_베스트 / Sec_유아용품큐레이션
 *   SectionHeader (28,28) 622×52 : SecTitle 30h + SecSub 18h(y=34), More 우측
 * ========================================================================= */
.g-sec { padding-top: var(--sp-3xl); }

/* 섹션 교차 배경 — 시안 01_메인 홈 의 2번째 섹션(엄마들의 PICK, 베스트)이 Cream 이다.
   전체 폭을 채워야 해서 .g-pad 안쪽이 아니라 섹션 자체에 배경을 준다. */
.g-sec--alt { background: var(--c-cream); padding-bottom: var(--sp-3xl); }

.g-sec__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-xl);
}
.g-sec__title {
  margin: 0;
  font-size: var(--fs-h2); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}
.g-sec__sub {
  margin: var(--sp-xs) 0 0;
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
  color: var(--c-gray-600);
}
.g-sec__more {
  flex: 0 0 auto; padding-top: var(--sp-xs);
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
  color: var(--c-gray-600);
}

/* ---- Button (04_Components) -------------------------------------------
 *  Primary   : Coral 채움 · 흰 글씨 (구매하기)
 *  Secondary : 흰 배경 · Gray200 테두리 · 검정 글씨 (전체보기)
 *  둘 다 r-12 / 높이 49px / Body1 15px
 * -------------------------------------------------------------------- */
.g-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 49px;
  border-radius: var(--r-12);
  font-size: var(--fs-body1); font-weight: var(--fw-semibold);
  text-align: center;
}
.g-btn--primary {
  background: var(--c-coral-500); color: var(--c-white); border: 0;
}
.g-btn--primary:active { background: var(--c-coral-600); }
.g-btn--secondary {
  background: var(--c-white); color: var(--c-black-900);
  border: 1px solid var(--c-gray-200);
}
.g-btn[disabled], .g-btn.is-disabled {
  background: var(--c-gray-100); color: var(--c-gray-400);
  border-color: var(--c-gray-200); pointer-events: none;
}

/* 섹션 하단 더보기 — Secondary 버튼과 동일 (시안 622×49) */
.g-morebtn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 49px;
  margin-top: var(--sp-lg);
  border: 1px solid var(--c-gray-200); border-radius: var(--r-12);
  font-size: var(--fs-body1); font-weight: var(--fw-medium);
  color: var(--c-black-900); background: var(--c-white);
}

/* ============================================================================
 * Product Card — 622×774 (1단 대형 카드)
 *   이미지 622×622 정사각 + 텍스트 영역 152px
 *   이미지 위 : 좌상단 타이머 뱃지 / 우하단 담기 FAB
 * ========================================================================= */
.g-cards { display: flex; flex-direction: column; gap: var(--sp-lg); }

/* 2열 그리드 — 시안 Layout Grid 명시 : 거터 16px, 카드 303px (622 = 303*2 + 16) */
.g-cards--2col {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-lg);
}

.g-card__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-16);
  background: var(--c-beige);
  overflow: hidden;
}
.g-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* 등록된 상품 사진(590×590)이 사방에 약 7.5% 흰 여백을 물고 들어온다.
   실제 내용은 502×502 이라 카드가 비어 보인다. 590/502 = 1.175 만큼 키워
   여백만 잘라낸다(.g-card__thumb 의 overflow:hidden 이 잘라준다).
   여백 없는 사진이 올라오면 가장자리가 그만큼 잘리니, 사진을 미리 트림해
   올리게 되면 이 규칙을 지울 것. */
.g-card__thumb img { transform: scale(1.18); }

/* 타이머 뱃지 — Timer Dark 75% · r-8 */
.g-card__timer {
  position: absolute; left: var(--sp-md); top: var(--sp-md);
  padding: 5px var(--sp-sm);
  border-radius: var(--r-8);
  background: rgba(31, 31, 31, .75);
  color: var(--c-white);
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
}

/* 랭크 뱃지 — 타이머와 같은 자리, Coral 채움 (예: BEST 1) */
.g-card__rank {
  position: absolute; left: var(--sp-md); top: var(--sp-md);
  padding: 5px var(--sp-md);
  border-radius: var(--r-8);
  background: var(--c-coral-500); color: var(--c-white);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}

/* 소프트 뱃지 — Coral50 배경 + Coral 글씨 (예: 순연100%) */
.g-card__badge-soft {
  position: absolute; left: var(--sp-md); top: var(--sp-md);
  padding: 5px var(--sp-md);
  border-radius: var(--r-8);
  background: var(--c-coral-50); color: var(--c-coral-500);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}

/* 담기 버튼 — 우하단 원형 Coral */
.g-card__add {
  position: absolute; right: var(--sp-lg); bottom: var(--sp-lg);
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  background: var(--c-white); color: var(--c-coral-500);
  font-size: 28px; font-weight: var(--fw-regular); line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.g-card__add:active { background: var(--c-coral-50); }

.g-card__body { padding-top: var(--sp-md); }

/* 키워드 한 줄 — 상품명 위 보조문구 */
.g-card__keyword {
  margin: 0 0 var(--sp-xs);
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
  color: var(--c-gray-600);
}
.g-card__name {
  margin: 0;
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 가격 행 : 정가(취소선) · 할인율(Sale Red) · 판매가 */
.g-card__price {
  display: flex; align-items: baseline; gap: var(--sp-sm);
  margin-top: var(--sp-sm);
}
.g-card__price-was {
  font-size: var(--fs-body2); font-weight: var(--fw-regular);
  color: var(--c-gray-400); text-decoration: line-through;
}
.g-card__price-rate {
  font-size: var(--fs-price-lg); font-weight: var(--fw-semibold);
  color: var(--c-sale-red);
}
.g-card__price-now {
  font-size: var(--fs-price-lg); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}

/* 구매중 — Coral */
.g-card__joined {
  margin: var(--sp-xs) 0 0;
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
  color: var(--c-coral-500);
}

/* 태그 칩 — Coral100 배경 · r-6 · 11px
   글자색은 시안 01_메인 홈 픽셀값이 #FF7A59(Coral500) 다. Coral600 이 아니다. */
.g-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-top: var(--sp-sm); }
.g-tag {
  padding: 3px var(--sp-sm);
  border-radius: var(--r-6);
  background: var(--c-coral-100); color: var(--c-coral-500);
  font-size: var(--fs-tag); font-weight: var(--fw-medium);
}

/* ============================================================================
 * 서브카테고리 칩 (Pill r-22) — 카테고리 리스트 화면
 * ========================================================================= */
.g-chips {
  display: flex; gap: var(--sp-sm);
  padding-top: var(--sp-lg); padding-bottom: var(--sp-lg);
  overflow-x: auto; scrollbar-width: none;
}
.g-chips::-webkit-scrollbar { display: none; }
.g-chip {
  flex: 0 0 auto;
  padding: var(--sp-sm) var(--sp-lg);
  border-radius: var(--r-22);
  background: var(--c-gray-100); color: var(--c-gray-600);
  font-size: var(--fs-body2); font-weight: var(--fw-medium);
  white-space: nowrap;
}
.g-chip.is-active { background: var(--c-coral-500); color: var(--c-white); }

/* 카운트 + 정렬 행 */
.g-listbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--sp-md);
}
.g-listbar__count { font-size: var(--fs-body2); font-weight: var(--fw-medium); }
.g-listbar__sort  { font-size: var(--fs-caption); color: var(--c-gray-600); }

/* ============================================================================
 * Footer — 678×181
 * ========================================================================= */
.g-footer {
  /* 마지막 섹션과의 간격. .g-sec 는 padding-bottom 이 0(교차배경 섹션만 32px)이라
     마지막이 일반 섹션이면 푸터가 상품 태그칩에 딱 붙는다.
     시안 01_메인 홈 에서 마지막 섹션 콘텐츠 하단 → 푸터 상단이 28px 이다. */
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-3xl); padding-bottom: var(--sp-3xl);
  background: var(--c-gray-100);
}
.g-footer__logo {
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  color: var(--c-gray-600);
}
.g-footer__info {
  margin: var(--sp-sm) 0 0;
  font-size: var(--fs-tag); color: var(--c-gray-600);
}
.g-footer__links {
  margin: var(--sp-md) 0 0;
  font-size: var(--fs-caption); color: var(--c-gray-600);
}

/* ============================================================================
 * Bottom Nav — 678×72
 *   시안 확정 : 4탭 (검색 / 홈 / 마이페이지 / 주문관리). 홈이 기본 활성.
 *   아이콘(면채움) 위 · 라벨 아래. 비활성 Gray600 / 활성 Coral500.
 * ========================================================================= */
.g-bnav {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 30;
  width: 100%; max-width: var(--layout-max);
  height: var(--bottomnav-h);
  display: flex; align-items: center;
  background: var(--c-white);
  border-top: 1px solid var(--c-gray-200);
}
.g-bnav__item {
  flex: 1 1 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
  color: var(--c-gray-600);
}
.g-bnav__item svg { width: 24px; height: 24px; fill: currentColor; }
.g-bnav__item.is-active { color: var(--c-coral-500); }

/* 시안은 비활성 아이콘이 라벨보다 밝다 (아이콘 #C7C7C7 · 라벨 Gray600 #8A8A8A).
   #C7C7C7 은 01_Color 에 없는 값이라 토큰을 만들지 않고 여기에만 적는다.
   활성은 아이콘·라벨 모두 Coral500 이라 currentColor 로 되돌린다. */
.g-bnav__item svg { fill: #C7C7C7; }
.g-bnav__item.is-active svg { fill: currentColor; }

/* ============================================================================
 * 메인 홈 추가 요소 (main.php)
 * ========================================================================= */

/* 배너 슬라이더 — 여러 장이면 is-on 인 것만 보인다 */
.g-banner-wrap { position: relative; }
.g-banner-wrap .g-banner { display: none; }
.g-banner-wrap .g-banner.is-on { display: block; }
.g-banner__link { position: absolute; inset: 0; z-index: 1; }
.g-banner-wrap .g-banner__dots {
  position: absolute; left: 36px; bottom: 30px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
}


/* GNB 장바구니 뱃지 */
.g-gnb__cart { position: relative; }
.g-gnb__badge {
  position: absolute; top: -2px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--c-coral-500); color: var(--c-white);
  font-size: 10px; font-weight: var(--fw-semibold);
  line-height: 16px; text-align: center;
}

/* 카드 썸네일 : 전체를 덮는 오버레이 링크 + 그 위에 담기 버튼
   (a 안에 button 을 넣으면 유효하지 않은 마크업이라 형제로 겹쳐 쌓는다) */
.g-card__thumblink { position: absolute; inset: 0; z-index: 1; }
.g-card__thumb .g-card__timer,
.g-card__thumb .g-card__rank,
.g-card__thumb .g-card__badge-soft { z-index: 2; }
.g-card__thumb .g-card__add { z-index: 3; }

/* 기획전 */
.g-plans { display: flex; flex-direction: column; gap: var(--sp-md); }
.g-plan {
  position: relative; display: block;
  border-radius: var(--r-16); overflow: hidden;
  background: var(--c-beige);
}
.g-plan img { width: 100%; height: auto; }
.g-plan__title {
  display: block; padding: var(--sp-md);
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
}

/* 빈 상태 */
.g-empty { padding: 64px 0; text-align: center; }
.g-empty__tit {
  margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}
.g-empty__sub {
  margin: var(--sp-sm) 0 0;
  font-size: var(--fs-body2); color: var(--c-gray-600);
}

/* 검색바 — GNB 검색 아이콘으로 토글 (wrap.header.php) */
.g-search {
  display: none;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--layout-pad);
  border-bottom: 1px solid var(--c-gray-200);
  background: var(--c-white);
}
.g-search.is-open { display: flex; }
.g-search__input {
  flex: 1 1 auto; min-width: 0; height: 44px;
  padding: 0 var(--sp-lg);
  border: 1px solid var(--c-gray-200); border-radius: var(--r-22);
  background: var(--c-gray-100);
  font-family: inherit; font-size: var(--fs-body1);
  letter-spacing: var(--ls-base); color: var(--c-black-900);
}
.g-search__input:focus { outline: none; border-color: var(--c-coral-300); background: var(--c-white); }
.g-search__btn {
  flex: 0 0 auto; height: 44px; padding: 0 var(--sp-xl);
  border-radius: var(--r-22);
  background: var(--c-coral-500); color: var(--c-white);
  font-size: var(--fs-body1); font-weight: var(--fw-semibold);
}
.g-search__btn:active { background: var(--c-coral-600); }

/* ============================================================================
 * 상품 목록 (카테고리 · 검색 · 연관상품) — .g-card 를 2열로 깐다
 *   마크업은 views/site/gonggu/product.list.inc_new.php
 *   레거시 .item_list 골격(ajax.product.list.php 가 그린다)을 그대로 두고
 *   그 안의 ul/li 만 그리드로 덮어쓴다. 베스트 슬라이드(.swiper-wrapper)는 제외.
 * ========================================================================= */
.item_list > .layout_fix > ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* 시안 02_카테고리 리스트 : 1열 대형 카드 */
  gap: var(--sp-2xl);
  margin: 0; padding: var(--sp-lg) 0 var(--sp-3xl);
  list-style: none;
}
.item_list > .layout_fix > ul > li {
  float: none; width: auto; margin: 0; padding: 0;
  border: 0; background: none; list-style: none;
}

/* 관리자가 2단 진열을 지정한 경우에만 2열 (기본은 시안대로 1열) */
.item_list.mobile_type_box2 > .layout_fix > ul,
.item_list.if_box2_type > .layout_fix > ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-xl) var(--sp-lg);
}

/* 베스트 슬라이드 안에서는 카드 폭을 슬라이드가 정한다 */
.item_list .swiper-wrapper { align-items: flex-start; }
.item_list .swiper-slide .g-card { width: 100%; }

/* ---- 목록 전용 카드 요소 ------------------------------------------------- */

/* 마우스오버 이미지 : 기본 이미지 위에 겹쳐두고 hover 때만 보인다 */
.g-card__ovimg {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .2s ease;
}
.g-card__thumb:hover .g-card__ovimg { opacity: 1; }

/* 구매 불가 오버레이 */
.g-card__soldout {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  background: rgba(31, 31, 31, .55);
  color: var(--c-white); text-align: center;
}
.g-card__soldout span { font-size: var(--fs-body1); font-weight: var(--fw-semibold); }
.g-card__soldout strong { font-size: var(--fs-caption); font-weight: var(--fw-medium); opacity: .9; }
/* 오버레이가 덮인 카드는 담기 버튼을 숨긴다 (오버레이 위로 새어나오지 않게) */
.g-card.is-dim .g-card__add { display: none; }
.g-card.is-dim .g-card__body { opacity: .55; }

/* 담기 버튼이 목록에서는 a 태그다 */
a.g-card__add { text-decoration: none; }

/* 브랜드명은 a, 부제는 p — 같은 자리·같은 모양 */
a.g-card__keyword { display: block; text-decoration: none; color: var(--c-gray-600); }

/* 타이머 뱃지 내부 (카운트다운) — 시계 아이콘 + "3일 12:34:56" / "03:44:08 종료"
   초가 바뀔 때마다 글자폭이 흔들리지 않게 숫자는 고정폭(tabular-nums)으로 쓴다 */
.g-card__timer { display: inline-flex; align-items: center; gap: 4px; }
.g-card__timer .js_time_sale_icon:empty { display: none; }
.g-card__timer .suffix { margin-left: 5px; }
.g-card__timer strong,
.g-card__timer em {
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  font-style: normal; color: inherit;
}
.g-card__timer .last { font-weight: var(--fw-medium); }

/* 시계 아이콘 + 숫자칸 — 카드(.g-card__timer)와 상세(.item_timer)가 같이 쓴다 */
.g-timer-ic { flex: none; width: 12px; height: 12px; display: block; }
.js_g_timer_text {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: .02em; white-space: nowrap;
}

/* 상품 아이콘 (관리자 등록) — 썸네일 좌하단 */
.g-card__thumb .item_icon {
  position: absolute; left: var(--sp-md); bottom: var(--sp-md); z-index: 2;
  display: flex; flex-wrap: wrap; gap: var(--sp-xs);
}
.g-card__thumb .item_icon img { width: auto; height: 20px; }
.g-card__thumb .item_icon span {
  display: inline-block; padding: 2px 6px;
  border: 1px solid transparent; border-radius: var(--r-6);
  font-size: var(--fs-tag); font-weight: var(--fw-medium);
}
.g-card__body .item_icon { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-top: var(--sp-sm); }
.g-card__body .item_icon img { width: auto; height: 18px; }
.g-card__body .item_icon span {
  display: inline-block; padding: 2px 6px;
  border: 1px solid transparent; border-radius: var(--r-6);
  font-size: var(--fs-tag); font-weight: var(--fw-medium);
}

/* 상품 없음 */
.c_none .gtxt {
  padding: 64px 0; text-align: center;
  font-size: var(--fs-body1); color: var(--c-gray-600);
}

/* 부가정보 칩 (무료배송 · 적립 · 기획전 · KC) — 해시태그 칩과 구분되게 회색 */
.g-tag--info { background: var(--c-gray-100); color: var(--c-gray-600); }

/* ============================================================================
 * 레거시 CSS 명시도 방어 (2026-08-21)
 *
 *   setting.css 에 이런 규칙이 있다.
 *       a:link, a:visited { color: inherit }        명시도 (0,1,1)
 *   그리고 위쪽 리셋에도
 *       .gonggu button   { color: inherit }         명시도 (0,1,1)
 *
 *   .g-xxx 단일 클래스는 (0,1,0) 이라 둘 다에게 진다. 그래서 코랄이어야 할
 *   로고·GNB 아이콘·담기 버튼이 검정으로, 흰색이어야 할 검색버튼 글씨가
 *   회색으로 나오고 있었다. (브라우저에서 계산값 측정해 확인)
 *
 *   구조를 바꾸거나 !important 를 쓰지 않고, 클래스를 두 번 적어 (0,2,0) 으로
 *   올려서 되찾는다. 새 컴포넌트에 색을 줄 때 같은 증상이 보이면 여기에 추가할 것.
 * ========================================================================= */
.g-gnb__logo.g-gnb__logo       { color: var(--c-coral-500); }
.g-gnb__btn.g-gnb__btn         { color: var(--c-coral-500); }  /* 시안 GNB : 햄버거·검색·장바구니 전부 Coral */
.g-card__add.g-card__add       { color: var(--c-coral-500); }
.g-bnav__item.g-bnav__item     { color: var(--c-gray-600); }
.g-bnav__item.is-active.g-bnav__item { color: var(--c-coral-500); }
.g-search__btn.g-search__btn   { color: var(--c-white); }
.g-sec__more.g-sec__more       { color: var(--c-gray-600); }
.g-morebtn.g-morebtn           { color: var(--c-black-900); }
.g-tabs__item.g-tabs__item     { color: var(--c-gray-600); }
.g-tabs__item.is-active.g-tabs__item { color: var(--c-coral-500); }
.g-chip.g-chip                 { color: var(--c-gray-600); }
.g-chip.is-active.g-chip       { color: var(--c-white); }

/* 같은 함정이 background 에도 있다 (2026-08-24).
 *   위쪽 리셋 .gonggu button { background: none }  이 (0,1,1) 이라
 *   .g-card__add / .g-search__btn 의 배경이 통째로 날아가 있었다.
 *     · 담기 FAB  : 시안은 흰 원 + Coral "+" 인데 흰 원이 사라져 사진 위에 + 만 떠 있었다
 *     · 검색 버튼 : 배경이 사라져 흰 글씨만 남아 사실상 보이지 않았다
 *   색과 같은 방식으로 클래스를 두 번 적어 되찾는다. */
.g-card__add.g-card__add          { background: var(--c-white); }
.g-card__add.g-card__add:active   { background: var(--c-coral-50); }
.g-search__btn.g-search__btn        { background: var(--c-coral-500); }
.g-search__btn.g-search__btn:active { background: var(--c-coral-600); }

/* ============================================================================
 * 제품 상세 (시안 05_제품 상세)
 *   body.if_view 가 상세 페이지 훅이다. 레거시 마크업(.p_Vtit · .p_Vtop ·
 *   .p_Vfixbtn)을 그대로 두고 CSS 로만 시안에 맞춘다.
 *   product.view.php 는 2,696줄에 KCP 결제·옵션 로직이 얽혀 있어 재작성하지 않는다.
 * ========================================================================= */

/* 시안 상세에는 상단바가 TopBar 하나뿐이다. GNB·카테고리탭은 감춘다. */
.if_view .g-gnb,
.if_view .g-tabs { display: none; }

/* ---- TopBar : ← / 상품 상세 / 홈 · 장바구니 ------------------------------- */
.if_view .p_Vtit {
  position: sticky; top: 0; z-index: 30;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-gray-200);
}
.if_view .p_Vtit .inner {
  display: flex; align-items: center;
  height: 56px; padding: 0 var(--sp-lg);
}
.if_view .p_Vtit .left,
.if_view .p_Vtit .right { display: flex; align-items: center; flex: 0 0 auto; gap: var(--sp-sm); }
.if_view .p_Vtit .tit {
  flex: 1 1 auto; text-align: center;
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}
/* 시안에 없는 것 : 공유 · TopBar 찜 (찜은 하단 구매바에 있다) */
.if_view .p_Vtit .btn_share,
.if_view .p_Vtit .right .btn_wish { display: none; }

.if_view .p_Vtit .g-tb__ico {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: none;                 /* 레거시 배경 아이콘 제거 : 인라인 SVG 를 쓴다 */
}
.if_view .p_Vtit .g-tb__ico.g-tb__ico { color: var(--c-coral-500); }
.if_view .p_Vtit .btn_back { width: 32px; height: 32px; }

/* ---- 하단 고정 구매바 : 찜 / 장바구니(아웃라인) / 구매하기(채움) ------------
   바탕(흰 배경·윗선)까지 컨테이너 폭(--layout-max)에 맞춘다. 하단 네비(.g-bnav)와
   같은 방식으로 가운데 정렬 — 넓은 화면에서 바만 끝까지 늘어나 보이지 않게. */
.if_view .p_Vfixbtn {
  position: fixed; left: 50%; right: auto; bottom: 0; z-index: 350;
  transform: translateX(-50%);
  width: 100%; max-width: var(--layout-max);
  background: var(--c-white);
  border-top: 1px solid var(--c-gray-200);
  padding: var(--sp-md) var(--layout-pad);
  padding-bottom: calc(var(--sp-md) + env(safe-area-inset-bottom, 0px));
}
.if_view .p_Vfixbtn > ul {
  display: flex; align-items: center; gap: var(--sp-md);
  margin: 0; list-style: none;
}
.if_view .p_Vfixbtn > ul > li { flex: 1 1 auto; }
.if_view .p_Vfixbtn > ul > li.type_wish { flex: 0 0 auto; }
.if_view .p_Vfixbtn > ul > li.type_cart { flex: 0 0 38%; }

.if_view .p_Vfixbtn .btn_wish {
  display: block; width: 40px; height: 40px;
  background: no-repeat center / 26px 26px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='1.8'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1L12 21.2l7.7-7.8 1.1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
  font-size: 0;
}
.if_view .p_Vfixbtn .btn_wish.hit {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF3B30'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1L12 21.2l7.7-7.8 1.1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
}

.if_view .p_Vfixbtn .btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px;
  border-radius: var(--r-12);
  font-size: var(--fs-body1); font-weight: var(--fw-semibold);
}
.if_view .p_Vfixbtn .btn_cart_fix.btn_cart_fix {
  border: 1px solid var(--c-coral-500);
  background: var(--c-white); color: var(--c-coral-500);
}
.if_view .p_Vfixbtn .btn_buy.btn_buy {
  background: var(--c-coral-500); color: var(--c-white);
}
.if_view .p_Vfixbtn .btn_buy:active { background: var(--c-coral-600); }
.if_view .p_Vfixbtn .btn_soldout.btn_soldout {
  background: var(--c-gray-100); color: var(--c-gray-600);
}

/* 고정 구매바에 본문이 가리지 않게 */
.if_view .g-wrap { padding-bottom: calc(var(--buybar-h) + var(--sp-lg)); }

/* ---- 상세 상품정보 영역 (.p_Vtop) ---------------------------------------- */

/* 이미지 : 시안은 컨테이너 폭을 꽉 채우는 정사각.
   레거시 .layout_fix 가 좌우 30px 을 물고 있어 사진만 그 여백을 걷어낸다. */
.if_view .this_photo > .layout_fix { max-width: none; padding: 0; }
.if_view .p_Vphoto { position: relative; }
.if_view .p_Vphoto,
.if_view .p_Vphoto .big_photo { aspect-ratio: 1 / 1; }
.if_view .p_Vphoto .rolling_wrap,
.if_view .p_Vphoto .rolling_box,
.if_view .p_Vphoto .swiper-wrapper,
.if_view .p_Vphoto .thumb { height: 100%; }
.if_view .p_Vphoto img { width: 100%; height: 100%; object-fit: cover; }
/* 등록된 사진이 사방에 약 7.5% 흰 여백을 물고 들어온다(카드 .g-card__thumb img 와 같은 사정).
   그대로 두면 정사각 안에서 상품이 작아 보여 카드와 같은 배율로 여백만 잘라낸다.
   여백 없는 사진으로 교체하면 이 줄과 카드쪽 규칙을 같이 지울 것. */
.if_view .p_Vphoto .thumb img { transform: scale(1.18); }

/* 슬라이드 인디케이터 — 시안은 사진 하단 가운데 점, 현재 장만 길쭉한 알약.
   레거시 썸네일 목록(.rolling_thumb)이 이미 .hit 로 현재 장을 표시하고 있어 그걸 점으로 바꿔 쓴다.
   좌우 화살표 + "1/4" 컨트롤(.rolling_ctrl)은 시안에 없다. */
.if_view .p_Vphoto .rolling_ctrl { display: none; }
.if_view .p_Vphoto .rolling_thumb {
  position: absolute; left: 0; right: 0; bottom: var(--sp-md); z-index: 5;
  margin: 0; padding: 0;
}
.if_view .p_Vphoto .rolling_thumb ul {
  display: flex; justify-content: center; align-items: center; gap: 5px;
  margin: 0; padding: 0; list-style: none;
}
.if_view .p_Vphoto .rolling_thumb li { width: 6px; height: 6px; transition: width .2s; }
.if_view .p_Vphoto .rolling_thumb li a {
  display: block; width: 100%; height: 100%;
  border-radius: 100px; background: rgba(31, 31, 31, .3);
  font-size: 0; overflow: hidden;
}
.if_view .p_Vphoto .rolling_thumb li img { display: none; }
.if_view .p_Vphoto .rolling_thumb li.hit { width: 18px; }
.if_view .p_Vphoto .rolling_thumb li.hit a { background: rgba(31, 31, 31, .75); }

.if_view .this_info > .layout_fix { padding: var(--sp-xl) var(--layout-pad) 0; }

/* 가격 아래 한 줄 : [🔥 N명 구매중] + [타임세일 타이머] (시안 05_제품 상세) */
.if_view .g-vmeta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-md);
  margin-top: var(--sp-md);
}
.if_view .g-vmeta__joined {
  font-size: var(--fs-body2); font-weight: var(--fw-semibold);
  color: var(--c-coral-500);
}

/* 리뷰 요약(별점 + N개 리뷰) — 시안 상품정보에는 없다. 별점은 '구매 후기' 제목 옆에 있다. */
.if_view .p_Vreview { display: none; }

/* 타임세일 뱃지 — 카드와 동일 (Timer Dark 75% · r-8 · 흰 글씨 12px) */
.if_view .item_timer {
  display: inline-flex; align-items: center; gap: 4px;
  margin-bottom: 0;
  padding: 5px var(--sp-sm);
  border-radius: var(--r-8);
  background: rgba(31, 31, 31, .75);
}
.if_view .item_timer,
.if_view .item_timer strong,
.if_view .item_timer em {
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
  font-style: normal; color: var(--c-white);
}
.if_view .item_timer .clock { display: none; }   /* 레거시 아날로그 시계 아이콘 — 인라인 SVG 로 대체 */
.if_view .item_timer .suffix { margin-left: 5px; }

/* 업체 링크 — 레거시 인라인 style 이 파란 알약으로 그린다. 시안은 상품명 위 회색 브랜드 줄. */
.if_view .pv_company_row { display: block; margin: 0 0 var(--sp-xs); }
.if_view a.company_view_all.company_view_all {
  display: inline-flex; padding: 0; gap: 4px;
  background: none; border: 0; border-radius: 0;
  font-size: var(--fs-body2); font-weight: var(--fw-regular);
  color: var(--c-gray-600) !important;   /* 레거시가 !important 로 파랑을 박아둬서 맞불 */
}
.if_view a.company_view_all .ico,
.if_view a.company_view_all .arr { display: none; }
.if_view a.company_view_all .nm,
.if_view a.company_view_all span,
.if_view a.company_view_all i { color: var(--c-gray-600) !important; font-weight: var(--fw-regular); }

/* 상품명 — 시안 H2 22px SemiBold */
.if_view .item_name .dt,
.if_view .item_name {
  font-size: var(--fs-h2); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}

/* 가격 행 — 시안 순서 : 정가(취소선) · 할인율(Sale Red) · 판매가(Black)
   DOM 은 [정가][판매가·할인율] 순이라 order 로 뒤집는다. */
.if_view .item_price {
  display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap;
  /* sub.css 의 .p_Vname .item_price 가 flex-direction:column 이라 세로로 쌓였다.
     방향을 명시하지 않으면 그 값이 그대로 남는다. */
  width: 100%;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
}
.if_view .item_price .price_in { display: contents; }
/* 레거시가 .before/.after/.percent 를 각각 한 줄 폭으로 잡아 3줄로 떨어졌다.
   flex 아이템으로 내용만큼만 차지하게 되돌린다. */
.if_view .item_price .before,
.if_view .item_price .percent,
.if_view .item_price .after {
  flex: 0 0 auto; width: auto; min-width: 0; float: none; margin: 0;
}
.if_view .item_price .before {
  order: 1;
  font-size: var(--fs-body2); font-weight: var(--fw-regular);
  color: var(--c-gray-400); text-decoration: line-through;
}
.if_view .item_price .percent {
  order: 2;
  font-size: var(--fs-display); font-weight: var(--fw-semibold);
  color: var(--c-sale-red);
}
.if_view .item_price .after {
  order: 3;
  display: flex; align-items: baseline;
  font-size: var(--fs-display); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}

/* 해시태그 — 시안대로 가격 바로 아래, 카드의 .g-tag 와 같은 Coral 칩.
   레거시(sub.css·sub_responsive.css)가 좌우 여백·회색 알약·아래 구분선·가로스크롤(width:max-content)을
   넣어두는데, 여기 블록이 그걸 전부 되돌린다. 칩 모양은 .g-tag 한 곳만 보고 맞추면 된다. */
.if_view .p_Vhashtag {
  margin: var(--sp-md) 0 0; padding: 0;
  border: 0; overflow: visible;
}
.if_view .p_Vhashtag ul {
  display: flex; flex-wrap: wrap; justify-content: flex-start;
  gap: var(--sp-xs); width: auto; margin: 0; padding: 0; list-style: none;
}
.if_view .p_Vhashtag li { display: inline-flex; }
.if_view .p_Vhashtag li .tag {
  display: inline-flex; align-items: center; height: auto;
  padding: 4px var(--sp-sm);
  border: 0; border-radius: var(--r-6);
  background: var(--c-coral-100); color: var(--c-coral-500);
  font-size: var(--fs-tag); font-weight: var(--fw-medium);
}
/* 레거시 hover(흰 배경 + 회색 테두리) 를 끄고 칩 톤만 살짝 진하게 */
.if_view .p_Vhashtag li .tag:hover {
  background: var(--c-coral-100); border: 0; color: var(--c-coral-600);
}

/* 배송/업체 정보 — 시안 : 라벨 Gray600 / 값 Black900, 위아래 Gray100 밴드로 분리 */
.if_view .p_Vinfo {
  margin-top: var(--sp-xl);
  padding: var(--sp-xl) 0;
  border-top: 8px solid var(--c-gray-100);
}
.if_view .p_Vinfo dl {
  display: flex; gap: var(--sp-md);
  margin: 0 0 var(--sp-md);
}
.if_view .p_Vinfo dl:last-child { margin-bottom: 0; }
.if_view .p_Vinfo dt {
  flex: 0 0 80px;
  font-size: var(--fs-body2); font-weight: var(--fw-medium);
  color: var(--c-gray-600);
}
.if_view .p_Vinfo dd {
  flex: 1 1 auto; margin: 0;
  font-size: var(--fs-body2); font-weight: var(--fw-regular);
  color: var(--c-black-900);
}

/* ---- 상세 하단 섹션 (상세정보 · 후기 · 문의 · 안내) ------------------------
 *   시안 05_제품 상세 는 탭바 없이 섹션 제목으로 평면 나열한다.
 *   레거시는 같은 sticky 탭바(.tab_menu)를 섹션마다 하나씩, 총 4개 깔아둔다.
 *   전부 top:0 / z-index:100 이라 TopBar(z:30)를 덮어버리는 문제도 있었다.
 *   마크업은 그대로 두고(앵커 스크롤이 이걸 참조한다) 표시만 끈다.
 * ------------------------------------------------------------------------ */
.if_view .tab_menu { display: none; }

/* 섹션 사이 구분 밴드 — 시안의 두꺼운 Gray100 띠.
   레거시 margin-top:80px 이 띠 위에 흰 공백을 만들어 띠가 두 줄로 보였다. 붙인다.
   ⚠ 레거시는 띠를 :before(absolute, top:-40px, height:10px)로 그린다. 그 40px 은
     margin-top:80px 안에 들어가 있던 값이라, 여백을 없앤 지금은 앞 블록(상품정보 마지막 줄)
     위로 올라와 글자를 덮는다. 띠는 border-top 으로 그리므로 레거시 :before 는 끈다. */
.if_view .p_Vconts { margin-top: 0; border-top: 8px solid var(--c-gray-100); }
.if_view .p_Vconts::before { display: none; }
.if_view .p_Vconts.p_Vrelative { border-top: 8px solid var(--c-gray-100); }

.if_view .g-vsec__head {
  display: flex; align-items: baseline; gap: var(--sp-sm);
  padding: var(--sp-3xl) var(--layout-pad) var(--sp-lg);
}
.if_view .g-vsec__title {
  margin: 0;
  font-size: var(--fs-h2); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}
.if_view .g-vsec__score {
  font-size: var(--fs-body1); font-weight: var(--fw-semibold);
  color: var(--c-coral-500);
}
.if_view .g-vsec__more {
  margin-left: auto; flex: 0 0 auto;
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
}
.if_view .g-vsec__more.g-vsec__more { color: var(--c-gray-600); }

.if_view .tab_conts { padding: 0 var(--layout-pad) var(--sp-3xl); }
.if_view .tab_conts > .layout_fix,
.if_view .p_Vconts > .layout_fix { padding-left: 0; padding-right: 0; }

/* 리뷰·문의 비어있을 때 — 시안엔 없는 상태라 카드 톤에 맞춰 정리만 한다 */
.if_view .none_box {
  padding: var(--sp-3xl) var(--sp-xl);
  border-radius: var(--r-16);
  background: var(--c-gray-100);
  text-align: center;
}
.if_view .none_box .icon { display: none; }
.if_view .none_box .c_btnbox ul {
  display: flex; justify-content: center; gap: var(--sp-sm);
  margin: 0; padding: 0; list-style: none;
}
.if_view .none_box .c_btnbox li:empty { display: none; }
.if_view .none_box .c_btn {
  display: flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 var(--sp-xl);
  border: 1px solid var(--c-gray-200); border-radius: var(--r-12);
  background: var(--c-white);
  font-size: var(--fs-body2); font-weight: var(--fw-medium);
}
.if_view .none_box .c_btn.c_btn { color: var(--c-black-900); }
.if_view .none_box .c_btn.black {
  border-color: var(--c-coral-500); background: var(--c-white);
}
.if_view .none_box .c_btn.black.black { color: var(--c-coral-500); }

/* ---- 구매 후기 목록 (시안 05_제품 상세) ---------------------------------
   시안 카드 : Cream 배경 r-16 · 코랄 별점(위) · 사진 · 본문 · 작성자·날짜(아래 회색).
   레거시 마크업은 [별점+작성자] 가 한 덩어리(.post_info)라 display:contents 로 풀어
   order 로 작성자만 본문 아래로 내린다. 마크업은 건드리지 않는다. */
.if_view .p_Vboard.type_review .board_list ul {
  display: flex; flex-direction: column; gap: var(--sp-md);
  margin: 0; padding: 0; list-style: none;
}
.if_view .p_Vboard.type_review .board_list li {
  border: 0; padding: var(--sp-xl);
  border-radius: var(--r-16); background: var(--c-cream);
}
.if_view .p_Vboard.type_review .posting { display: flex; flex-direction: column; gap: var(--sp-sm); }
.if_view .p_Vboard.type_review .post_info { display: contents; }
.if_view .p_Vboard.type_review .post_info .mark { order: 1; }
.if_view .p_Vboard.type_review .post_conts  { order: 2; }
.if_view .p_Vboard.type_review .post_info .writer { order: 3; display: flex; gap: 4px; }
.if_view .p_Vboard.type_review .post_info .writer .name,
.if_view .p_Vboard.type_review .post_info .writer .date {
  font-size: var(--fs-caption); color: var(--c-gray-400);
}
.if_view .p_Vboard.type_review .post_conts .content {
  font-size: var(--fs-body2); color: var(--c-black-900); line-height: 1.5;
}
.if_view .p_Vboard.type_review .eval_photos { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-bottom: var(--sp-sm); }
.if_view .p_Vboard.type_review .eval_photos img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--r-8); cursor: pointer;
}
/* 목록 위 요약(별점·총건수)은 섹션 제목 옆 ★4.9 (238) 과 겹친다. 버튼줄만 남긴다. */
.if_view .p_Vboard.type_review .board_top .left_box { display: none; }
.if_view .p_Vboard.type_review .board_top .guide_tx { display: none; }
.if_view .p_Vboard.type_review .board_top .c_btnbox ul {
  display: flex; gap: var(--sp-sm); margin: 0 0 var(--sp-md); padding: 0; list-style: none;
}
.if_view .p_Vboard.type_review .board_top .c_btn {
  display: flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 var(--sp-lg);
  border: 1px solid var(--c-gray-200); border-radius: var(--r-12);
  background: var(--c-white);
  font-size: var(--fs-body2); font-weight: var(--fw-medium);
}
.if_view .p_Vboard.type_review .board_top .c_btn.c_btn { color: var(--c-black-900); }

/* 상세 이미지 영역 — 시안은 Beige 플레이스홀더에 r-16 */
.if_view .js_content_wrap .editor:empty {
  display: block; aspect-ratio: 4 / 3;
  border-radius: var(--r-16);
  background: var(--c-beige);
}

/* "상세정보 펼쳐보기" — 레거시는 알약 버튼이었다. 시안은 전체 폭 테두리 버튼.
   접힘 자체(.detail.this_fold{height:1000px})와 토글은 레거시 로직을 그대로 쓴다. */
.if_view .p_Vconts .detail .fold_ctrl {
  left: 0; right: 0; width: 100%;
  height: 140px; padding: 0 0 var(--sp-md);
  align-items: flex-end;
}
.if_view .p_Vconts .detail .fold_ctrl .btn_ctrl {
  flex: 1 1 auto; max-width: none; height: 52px;
  border: 1px solid var(--c-gray-200); border-radius: var(--r-12);
  box-shadow: none; background: var(--c-white);
  font-size: var(--fs-body1); font-weight: var(--fw-semibold);
}
.if_view .p_Vconts .detail .fold_ctrl .btn_ctrl.btn_ctrl { color: var(--c-black-900); }

/* 관련상품 섹션 제목 */
/* 관련상품은 2열 슬라이드라 카드가 작다. 담기 버튼(장바구니 담기 FAB)도 그만큼 줄인다. */
.if_view .p_Vrelative .g-card__add {
  right: var(--sp-md); bottom: var(--sp-md);
  width: 36px; height: 36px;
  font-size: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.if_view .p_Vrelative .tit_box { padding: var(--sp-3xl) var(--layout-pad) var(--sp-lg); }
.if_view .p_Vrelative .tit_box .tit {
  font-size: var(--fs-h2); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}

/* ---- 옵션 바텀시트 (시안 05-1_옵션 바텀시트) ------------------------------- */
.if_view .p_Vfix .white_box {
  border-radius: var(--r-16) var(--r-16) 0 0;
  padding: 0 var(--layout-pad);
  padding-bottom: calc(var(--sp-lg) + env(safe-area-inset-bottom, 0px));
}
/* 상단 닫기 영역을 시안의 grab handle 로 */
.if_view .p_Vfix .btn_close {
  position: relative; display: block;
  height: 28px; background: none; border-radius: 0;
}
.if_view .p_Vfix .btn_close::after {
  content: ""; position: absolute; left: 50%; top: 12px;
  width: 40px; height: 4px; margin-left: -20px;
  border-radius: var(--r-full);
  background: var(--c-gray-200);
}
.if_view .g-sheet__title {
  margin: 0 0 var(--sp-lg);
  font-size: var(--fs-h2); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}

/* 수량 행 */
.if_view .p_Vfix .this_volume {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md); margin: 0 0 var(--sp-lg);
}
.if_view .p_Vfix .this_volume dt {
  font-size: var(--fs-body2); font-weight: var(--fw-medium);
  color: var(--c-gray-600);
}
.if_view .p_Vfix .this_volume dd { margin: 0; }
.if_view .p_Vfix .counter_box {
  display: flex; align-items: center;
  height: 44px;
  border: 1px solid var(--c-gray-200); border-radius: var(--r-12);
  overflow: hidden;
}
.if_view .p_Vfix .counter_box .btn_down,
.if_view .p_Vfix .counter_box .btn_up {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 100%;
}
.if_view .p_Vfix .counter_box .updown_input {
  width: 44px; height: 100%;
  border: 0; text-align: center;
  font-family: inherit; font-size: var(--fs-body1); font-weight: var(--fw-semibold);
  color: var(--c-black-900); background: none;
}

/* 합계 — 시안 : 라벨 Gray600 / 금액 Coral 30px */
.if_view .p_Vfix .price_total {
  /* 라벨은 왼쪽, 금액+원 은 오른쪽에 붙인다 (space-between 이면 금액이 가운데로 뜬다) */
  display: flex; align-items: baseline; justify-content: flex-end;
  gap: 2px;
  padding: var(--sp-lg) 0;
  border-top: 1px solid var(--c-gray-200);
}
.if_view .p_Vfix .price_total .total_tt.total_tt {
  margin-right: auto;
  font-size: var(--fs-body2); font-weight: var(--fw-medium);
  color: var(--c-gray-600);
}
/* "원" 은 금액보다 한 단계 작게 (주문서 결제예정금액과 같은 규칙) */
.if_view .p_Vfix .price_total em { font-size: var(--fs-price-lg); }
.if_view .p_Vfix .price_total strong,
.if_view .p_Vfix .price_total em {
  font-size: var(--fs-display); font-weight: var(--fw-semibold);
  font-style: normal; color: var(--c-coral-500);
}

/* 시트 하단 버튼 : 장바구니(아웃라인) / 구매하기(채움) */
.if_view .p_Vfix .buy_box {
  display: flex; gap: var(--sp-md);
  margin: 0; padding: 0; list-style: none;
}
.if_view .p_Vfix .buy_box li { flex: 1 1 0; }
.if_view .p_Vfix .buy_box .btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px;
  border-radius: var(--r-12);
  font-size: var(--fs-body1); font-weight: var(--fw-semibold);
}
.if_view .p_Vfix .buy_box .btn_cart.btn_cart {
  border: 1px solid var(--c-coral-500);
  background: var(--c-white); color: var(--c-coral-500);
}
.if_view .p_Vfix .buy_box .btn_order.btn_order {
  border: 0; background: var(--c-coral-500); color: var(--c-white);
}
.if_view .p_Vfix .buy_box .btn_order:active { background: var(--c-coral-600); }

/* ---- 상세에 남아있던 레거시 색 정리 --------------------------------------
 *   꼬망세 시절 파랑(#1B3BA1 · #0065E3)과 회색 계열이 팔레트 밖 값이라 맞춘다.
 *   (브라우저에서 계산색을 훑어 찾아낸 것들)
 * ------------------------------------------------------------------------ */
/* 상품명은 <dt> 요소다(클래스 아님). sub.css 의 .p_Vname .item_name dt 가
   25px/#222 를 걸고 있어 명시도를 한 단계 올려 되찾는다. */
.if_view .p_Vname .item_name dt {
  font-size: var(--fs-h2); font-weight: var(--fw-semibold); color: var(--c-black-900);
}
.if_view .sub_tit .tit.tit { color: var(--c-black-900); font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.if_view .sub_tit .add.add,
.if_view .tip_txt.tip_txt { color: var(--c-gray-600); }
.if_view .notify .table,
.if_view .notify .txt_box { font-size: var(--fs-body2); }
.if_view .notify .txt_box.editor,
.if_view .notify .txt_box.editor div { color: var(--c-gray-600); }

/* 구매 안내(판매자정보 · 배송 · 교환/반품) 표기 색 — 레거시 #666/#333/#999 → 팔레트 */
.if_view .notify .table th,
.if_view .notify .table dt,
.if_view .notify .table .tt { color: var(--c-gray-600); }
.if_view .notify .table td,
.if_view .notify .table dd { color: var(--c-black-900); }
.if_view .notify .txt_box,
.if_view .notify .txt_box * { color: var(--c-gray-600); font-size: var(--fs-body2); }
.if_view .p_Vinfo .btn_view,
.if_view .notify .btn_view { color: var(--c-black-900); text-decoration: underline; }

/* 관련상품 롤링 페이지네이션 (02/18) */
.if_view .p_Vrelative .rolling_ctrl .pagi,
.if_view .p_Vrelative .rolling_ctrl .pagi strong,
.if_view .p_Vrelative .rolling_ctrl .pagi em {
  font-size: var(--fs-caption); font-weight: var(--fw-medium);
  font-style: normal; color: var(--c-gray-600);
}
.if_view .p_Vrelative .rolling_ctrl .pagi strong.active { color: var(--c-black-900); }

/* ============================================================================
 * 사이드 메뉴 (시안 03_사이드 메뉴 · 로그인/비로그인)
 *   햄버거로 열리는 .p_Slide. 레거시 구조를 두고 CSS 로 시안에 맞춘다.
 * ========================================================================= */
.p_Slide .slide_in { width: 68%; max-width: 460px; background: var(--c-white); }
.p_Slide .slide_layout { padding: 0 var(--layout-pad); }

/* 상단 : 인사문구(비로그인) 또는 프로필(로그인) + 닫기 */
.p_Slide .my_info { padding: var(--sp-xl) 0 var(--sp-lg); background: var(--c-white); }
.p_Slide .top_box { display: flex; align-items: flex-start; gap: var(--sp-md); }
.p_Slide .top_box .left_box { flex: 1 1 auto; min-width: 0; }
.p_Slide .top_box .right_box { flex: 0 0 auto; }

.g-side__greet {
  margin: 0;
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}
.p_Slide .who { display: flex; align-items: center; gap: var(--sp-sm); }
.p_Slide .who .name.name {
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}
.p_Slide .who .level img { width: 36px; height: 36px; border-radius: var(--r-full); }
.g-side__grade {
  padding: 3px var(--sp-md);
  border-radius: var(--r-full);
  background: var(--c-coral-500); color: var(--c-white);
  font-size: var(--fs-tag); font-weight: var(--fw-semibold);
}
.p_Slide .btn_close {
  display: block; width: 32px; height: 32px;
  background: no-repeat center / 20px 20px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");
  font-size: 0;
}

/* 로그인/회원가입 버튼 (비로그인) */
.g-side__auth {
  display: flex; gap: var(--sp-md);
  margin: var(--sp-xl) 0 0; padding: 0; list-style: none;
}
.g-side__auth li { flex: 1 1 0; }
.g-side__btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 48px;
  border-radius: var(--r-12);
  font-size: var(--fs-body1); font-weight: var(--fw-semibold);
}
.g-side__btn.is-primary.is-primary { background: var(--c-coral-500); color: var(--c-white); }
.g-side__btn.is-line.is-line {
  border: 1px solid var(--c-coral-500);
  background: var(--c-white); color: var(--c-coral-500);
}

/* QuickMenu — Coral100 원형 + Coral300 아이콘, 라벨 Gray600 */
.g-quick {
  display: flex; justify-content: space-between; gap: var(--sp-sm);
  margin: var(--sp-2xl) 0 var(--sp-xl); padding: 0; list-style: none;
}
.g-quick li { flex: 1 1 0; }
.g-quick__item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-sm); }
.g-quick__ico {
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  background: var(--c-coral-100) no-repeat center / 28px 28px;
}
.g-quick__tx {
  font-size: var(--fs-tag); font-weight: var(--fw-medium);
}
.g-quick__item .g-quick__tx { color: var(--c-gray-600); }
.g-quick__ico--my    { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFB499'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0z'/%3E%3C/svg%3E"); }
.g-quick__ico--order { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFB499'%3E%3Cpath d='M2 8l10-4 10 4-10 4z'/%3E%3Cpath d='M2 11l10 4 10-4v5l-10 4-10-4z'/%3E%3C/svg%3E"); }
.g-quick__ico--wish  { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFB499'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1L12 21.2l7.7-7.8 1.1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); }
.g-quick__ico--cart  { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFB499'%3E%3Cpath d='M7 18a2 2 0 100 4 2 2 0 000-4zm10 0a2 2 0 100 4 2 2 0 000-4zM1 2h3l2.6 12.6A2 2 0 008.6 16H18a2 2 0 002-1.6L22 6H6'/%3E%3C/svg%3E"); }

/* 카테고리 — 시안은 Cream 배경 밴드 */
.p_Slide .category {
  background: var(--c-cream);
  border-top: 1px solid var(--c-gray-200);
  padding: var(--sp-xl) 0;
}
.p_Slide .category::before {
  content: "카테고리";
  display: block; padding: 0 var(--layout-pad) var(--sp-md);
  font-size: var(--fs-body2); font-weight: var(--fw-medium);
  color: var(--c-gray-600);
}
.p_Slide .category .ul,
.p_Slide .category .second_ctg ul { margin: 0; padding: 0; list-style: none; }
.p_Slide .category .first_ctg { display: flex; align-items: center; justify-content: space-between; }
.p_Slide .category .ctg_name.ctg_name {
  flex: 1 1 auto; padding: var(--sp-md) 0;
  font-size: var(--fs-body1); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}
.p_Slide .category .second_ctg a {
  display: block; padding: var(--sp-sm) 0 var(--sp-sm) var(--sp-lg);
  font-size: var(--fs-body2);
}
.p_Slide .category .second_ctg a { color: var(--c-gray-600); }

/* 고객센터 */
.p_Slide .cs_info { padding: var(--sp-xl) 0; }
.p_Slide .cs_info .tel.tel {
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}
.p_Slide .cs_info .open_time.open_time {
  font-size: var(--fs-body2); color: var(--c-gray-600);
}

/* ---- customize_p.css 의 !important 상쇄 (사이드 메뉴 한정) ------------------
 *   views/site/css/customize_p.css 는 꼬망세 커스터마이즈 레이어다.
 *   2,241줄 / !important 353개 / 꼬망세 파랑(#4B99FF) 63곳을 쓰고, 그중
 *   .p_Slide 관련만 50개 규칙이 색을 !important 로 박아둔다.
 *   명시도를 올려도 못 이기므로 여기서만 !important 로 맞선다.
 *   ⚠ 파일 전체를 gonggu 스킨에서 빼는 게 근본책이지만, .c_comb(143개 규칙) 등
 *     아직 개편 안 한 화면이 물고 있어 확인 없이 빼면 위험하다. HANDOFF 참고.
 * ------------------------------------------------------------------------ */
.p_Slide .my_info .who,
.p_Slide .my_info .who .name { color: var(--c-black-900) !important; }
.p_Slide .my_info .btn_close { background-color: transparent !important; }

.p_Slide .my_info .member_link li:first-child .btn {
  background-color: var(--c-coral-500) !important; color: var(--c-white) !important;
}
.p_Slide .my_info .member_link li:last-child .btn {
  background-color: var(--c-white) !important; color: var(--c-coral-500) !important;
}

.p_Slide .category .first_ctg .ctg_name { color: var(--c-black-900) !important; }
.p_Slide .category .li.if_open_sd_cate .first_ctg .ctg_name,
.p_Slide .category .first_ctg .ctg_name:hover { color: var(--c-coral-500) !important; }
.p_Slide .category .second_ctg { background-color: transparent !important; }
.p_Slide .category .second_ctg .ctg_name { color: var(--c-gray-600) !important; }
.p_Slide .category .second_ctg .ctg_name:hover { color: var(--c-coral-500) !important; }

.p_Slide .type_menu .type_name { color: var(--c-gray-600) !important; }
.p_Slide .type_menu .type_name:hover { color: var(--c-coral-500) !important; }
.p_Slide .type_menu_wrap .type_menu .type_name strong {
  color: var(--c-coral-600) !important; background-color: var(--c-coral-100) !important;
}

.p_Slide .board_menu .tab_tit .tab { color: var(--c-gray-400) !important; }
.p_Slide .board_menu .tab_tit .tab.hit { color: var(--c-coral-500) !important; }
.p_Slide .board_menu .tab_cont .menu { color: var(--c-gray-600) !important; }
.p_Slide .board_menu .tab_cont .menu:hover { color: var(--c-coral-500) !important; }

.p_Slide .cs_info .cs_in .tel { color: var(--c-black-900) !important; }
.p_Slide .cs_info .cs_in .open_time { color: var(--c-gray-600) !important; }
.p_Slide .cs_info .go_page .btn {
  color: var(--c-gray-600) !important; background-color: var(--c-gray-100) !important;
}
.p_Slide .cs_info .go_page .btn:hover {
  color: var(--c-coral-500) !important; background-color: var(--c-coral-100) !important;
}

/* ============================================================================
 * 서브페이지 TopBar (.c_page_tit) — 장바구니 · 마이페이지 · 주문관리 등
 *   시안 09_장바구니 / 08_주문관리 : "← 제목" 좌측 정렬, GNB·카테고리탭 없음.
 *   상세(.p_Vtit)와 달리 제목이 가운데가 아니라 왼쪽이다.
 *   :has() 미지원 브라우저에서는 GNB 가 그대로 보인다(기능상 문제 없음).
 * ========================================================================= */
body:has(.c_page_tit) .g-gnb,
body:has(.c_page_tit) .g-tabs,
/* :has() 미지원 대비 — 실제 쓰는 화면은 명시적으로도 적어둔다 */
body[class*="if_shop_"] .g-gnb,  body[class*="if_shop_"] .g-tabs,
body.if_order_list .g-gnb,       body.if_order_list .g-tabs,
body.if_mypage .g-gnb,           body.if_mypage .g-tabs { display: none; }

.c_page_tit {
  position: sticky; top: 0; z-index: 30;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-gray-200);
}
/* 상품 상세(.p_Vtit)와 같은 규격으로 맞춘다 — 56px · 가운데 제목 · 좌측 ← 화살표.
   레거시는 여기만 140px 에 30px 제목이라 화면마다 상단이 따로 놀았다. */
.c_page_tit .tit_box {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-sm);
  height: 56px; padding: 0 56px;   /* 좌우 아이콘 자리만큼 비워 제목이 정확히 가운데 오게 */
}
.c_page_tit .btn_back {
  position: absolute; left: var(--sp-lg); top: 50%; transform: translateY(-50%);
  display: block; flex: none; width: 32px; height: 32px; margin: 0;
  background: no-repeat center / 20px 20px;
  /* 상세 TopBar 와 같은 ← 모양 (긴 화살표) */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M12 19l-7-7 7-7'/%3E%3C/svg%3E");
  font-size: 0;
}
.c_page_tit .tit {
  flex: 0 1 auto; text-align: center;
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  color: var(--c-black-900); line-height: 1.2;
}
.c_page_tit a.tit { opacity: 1; }   /* 레거시가 비활성 제목을 opacity .2 로 흐려둔다 */

/* 빈 상태 (장바구니 · 목록 공통) */
.c_none .gtxt {
  padding: 64px var(--layout-pad); text-align: center;
  font-size: var(--fs-body1); color: var(--c-gray-600);
}

/* ---- 상세 : 데스크톱 폭에서도 시안(모바일) 레이아웃 유지 -------------------
 *   시안은 모바일 한 벌뿐이고 컨테이너도 --layout-max:800px 다.
 *   그런데 레거시 반응형이 폭에 따라 다른 화면을 만든다.
 *     sub.css              .p_Vtit .tit { display:none }      → 700~900px 밖에서 제목이 사라짐
 *     sub.css              .p_Vtop .area { display:flex }     → 사진/정보 2단
 *     sub_responsive.css   .p_Vfixbtn·.p_Vfix 는 max-width:700px 에서만 하단 시트
 *   → 700px 를 넘으면 제목이 없고, 2단이 되고, 구매바가 인라인으로 풀린다.
 *   폭과 무관하게 시안대로 동작하도록 아래에서 되돌린다.
 * ------------------------------------------------------------------------ */
.if_view .p_Vtit .tit { display: block; }

/* 사진 → 정보 세로 1단.
   레거시 .layout_fix 의 좌우 30px 는 여기서 걷어낸다. 사진은 전체 폭이어야 하고,
   정보는 .this_info > .layout_fix 가 --layout-pad 로 자기 여백을 따로 잡는다. */
.if_view .p_Vtop .area.layout_fix { display: block; max-width: none; padding: 0; }
.if_view .this_photo,
.if_view .this_info { width: 100%; float: none; }

/* 하단 고정 구매바 : 폭 무관하게 노출 */
.if_view .p_Vfixbtn { display: block; }

/* 옵션 바텀시트 : max-width:700px 에서만 적용되던 동작을 전 폭으로 */
.if_view .p_Vfix {
  position: fixed; left: 0; bottom: 0; width: 100%; height: 100%;
  z-index: -1; border: 0; padding-top: 80px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.if_view .p_Vfix .white_box {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  width: 100%; max-width: var(--layout-max);   /* 시트도 컨테이너 폭까지만 */
  max-height: 550px;
  transform: translateY(100%);
}
/* 합계·버튼 줄(.fix_btm)이 흐름 안에 있으므로 스크롤 영역에 자리를 비워둘 필요가 없다.
   200px 이 옵션과 합계 사이 빈 공간으로 보였다. */
.if_view .p_Vfix .scroll_box { flex: 1 1 0%; overflow: hidden auto; padding-bottom: var(--sp-md); }
.if_view .p_Vfix .btn_close { display: block; }
.if_view .p_Vfix .bg_close { display: block; }
.if_view .p_Vfix.if_open_fix { z-index: 1000; }
.if_view .p_Vfix.if_open_fix .white_box { transform: translateY(0); transition: .3s ease-out; }
.if_view .p_Vfix.if_open_fix .bg_close { opacity: 1; transition: opacity .3s ease-out; }
/* 시트 안 흐름에 그대로 둔다(예전엔 fixed 라 스크롤 영역에 200px 을 비워둬야 했다).
   .white_box 가 flex column 이라 옵션이 길어지면 위쪽만 스크롤되고 이 줄은 아래 고정된다. */
.if_view .p_Vfix.if_open_fix .fix_btm {
  position: static; transform: none;
  width: auto; max-width: none;
  margin-top: 0; padding: var(--sp-md) 0;
  padding-bottom: calc(var(--sp-md) + env(safe-area-inset-bottom, 0px));
  background: var(--c-white);
}

/* 회원 혜택 뱃지 · 적립 문구 — 레거시 인라인 파랑을 팔레트로 */
.g-vbadge {
  display: inline-block; padding: 3px var(--sp-md);
  border-radius: var(--r-6);
  background: var(--c-coral-100); color: var(--c-coral-600);
  font-size: var(--fs-tag); font-weight: var(--fw-semibold);
}
.if_view .benefit { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin: var(--sp-sm) 0 0; padding: 0; list-style: none; }
.if_view .benefit .tx { font-size: var(--fs-body2); color: var(--c-gray-600); }
.if_view .benefit .tx strong { color: var(--c-coral-500); font-weight: var(--fw-semibold); }

/* ============================================================================
 * 장바구니 + 주문서 (시안 09_장바구니 / 주문서는 시안 없음 — 같은 톤으로 맞춘다)
 *
 *   두 화면은 레거시 마크업이 사실상 동일하다.
 *     .cart_wrap · .area_item · .c_group_tit · .cart_list · .cart_item ·
 *     .option_list · .point_info · .cart_delivery_detail · .cart_sum ·
 *     .this_discount · .this_last · .c_btnbox · .btn-buy
 *   그래서 body class 에 `if_shop_` 이 들어가는 두 화면
 *   (if_shop_cart · if_shop_order) 를 한 번에 잡는다.
 *
 *   ⚠️ 주문서(shop.order.form.php 3,320줄)는 KCP 결제로 이어지는 화면이라
 *      마크업은 건드리지 않았다. 여기 CSS 로만 맞춘다.
 *
 *   시안에 없는 것은 전부 끈다. 되살리려면 해당 줄만 지우면 된다.
 *   (2026-08-21 사용자 결정 : 시안대로만)
 * ========================================================================= */
/* 업체명 헤더 — 시안에 없음. 단 주문서는 같은 .c_group_tit 을 "할인 및 추가 혜택 적용"
   같은 섹션 제목에도 쓰므로, 통째로 숨기지 않고 업체 정보 부분만 숨긴다. */
[class*="if_shop_"] .cart_delivery_detail, /* 업체별 배송비 상세 */
[class*="if_shop_"] .cart_npay,            /* 네이버페이 */
[class*="if_shop_"] .total_number,         /* 전체상품 N개 */
[class*="if_shop_"] .this_point,           /* 총 적립금 */
[class*="if_shop_"] .point_info,           /* 상품별 적립금 */
[class*="if_shop_"] .cart_ctrl.type_hidden /* 하단 중복 전체선택 바 */
  { display: none; }

[class*="if_shop_"] .c_group_tit .shop_name,
[class*="if_shop_"] .c_group_tit .sub_txt { display: none; }
.if_shop_cart .c_group_tit { display: none; }   /* 장바구니의 .c_group_tit 은 업체명 전용 */

[class*="if_shop_"] .cart_wrap { padding: 0 var(--layout-pad); }

/* 전체선택 바 */
[class*="if_shop_"] .cart_ctrl {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-lg) 0;
  border-bottom: 1px solid var(--c-gray-200);
}
[class*="if_shop_"] .cart_ctrl .btn_sel {
  display: flex; align-items: center; gap: var(--sp-sm);
  font-size: var(--fs-body1); font-weight: var(--fw-semibold);
}
[class*="if_shop_"] .cart_ctrl .btn_sel.btn_sel { color: var(--c-black-900); }
[class*="if_shop_"] .cart_ctrl .btn_del.btn_del {
  font-size: var(--fs-body2); font-weight: var(--fw-regular);
  color: var(--c-gray-600);
}
[class*="if_shop_"] .g-cart__cnt { font-weight: var(--fw-regular); color: var(--c-gray-600); }
[class*="if_shop_"] .g-cart__cnt em { font-style: normal; }

/* 상품 행 */
[class*="if_shop_"] .cart_list ul,
[class*="if_shop_"] .cart_list li { margin: 0; padding: 0; list-style: none; }
[class*="if_shop_"] .cart_item {
  display: flex; align-items: flex-start; gap: var(--sp-md);
  margin: 0; padding: var(--sp-xl) 0;
  border-bottom: 1px solid var(--c-gray-200);
}
[class*="if_shop_"] .cart_item > dt {
  flex: 0 0 auto; display: flex; align-items: flex-start; gap: var(--sp-md);
}
[class*="if_shop_"] .cart_item > dd { flex: 1 1 auto; min-width: 0; margin: 0; }
[class*="if_shop_"] .cart_item .thumb {
  display: block; width: 88px; height: 88px;
  border-radius: var(--r-12); overflow: hidden; background: var(--c-beige);
}
[class*="if_shop_"] .cart_item .thumb img { width: 100%; height: 100%; object-fit: cover; }
[class*="if_shop_"] .cart_item .item_name.item_name {
  display: block; margin-bottom: var(--sp-xs);
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}

/* 체크박스 — 시안 : 선택 시 Coral 원형 체크
   마크업이 <label.c_label><input><span.tx><span.icon></span>라벨문구</span></label> 라
   동그라미는 .icon 에 그리고 .tx 는 [동그라미 + 문구] 가로줄로 둔다.
   (.tx 자체를 24px 원으로 만들면 문구가 있는 라벨 — 주문서 구매동의·결제수단 —
    에서 글자가 24px 폭에 갇혀 세로로 쏟아진다) */
[class*="if_shop_"] .c_label {
  display: inline-flex; align-items: center; position: relative;
  width: auto; min-height: 24px;
}
[class*="if_shop_"] .c_label input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
[class*="if_shop_"] .c_label .tx {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  width: auto; height: auto;
  border: 0; border-radius: 0; background: none;
  font-size: var(--fs-body2); color: var(--c-gray-600);
}
[class*="if_shop_"] .c_label .tx .icon {
  flex: none; display: block; width: 24px; height: 24px;
  border: 1px solid var(--c-gray-200); border-radius: var(--r-full);
  background: var(--c-white) no-repeat center / 14px 14px;
}
[class*="if_shop_"] .c_label input:checked + .tx { color: var(--c-black-900); }
[class*="if_shop_"] .c_label input:checked + .tx .icon {
  border-color: var(--c-coral-500); background-color: var(--c-coral-500);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E");
}

/* 옵션 행 : 옵션명 / 수량 스테퍼 / 금액 / 삭제 */
[class*="if_shop_"] .option_list { margin: 0; padding: 0; list-style: none; }
[class*="if_shop_"] .option_list .opt_name {
  font-size: var(--fs-body2); color: var(--c-gray-600);
  margin-bottom: var(--sp-sm);
}
[class*="if_shop_"] .option_list .opt_price {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md); flex-wrap: wrap;
}
[class*="if_shop_"] .option_list .price {
  order: 2; margin-left: auto;
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}
[class*="if_shop_"] .counter {
  order: 1;
  display: inline-flex; align-items: center;
  height: 40px;
  border: 1px solid var(--c-gray-200); border-radius: var(--r-12);
  overflow: hidden;
}
[class*="if_shop_"] .counter .btn_minus,
[class*="if_shop_"] .counter .btn_plus {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 100%;
}
[class*="if_shop_"] .counter .counter_input {
  width: 40px; height: 100%; border: 0; text-align: center; background: none;
  font-family: inherit; font-size: var(--fs-body1); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}
[class*="if_shop_"] .btn_delete {
  order: 3;
  width: 28px; height: 28px;
  background: no-repeat center / 16px 16px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");
  font-size: 0;
}

/* 결제 요약 — 시안 : 회색 밴드, 총 결제 금액만 Coral */
[class*="if_shop_"] .cart_sum {
  margin: 0 calc(var(--layout-pad) * -1);
  padding: var(--sp-2xl) var(--layout-pad) var(--sp-3xl);
  background: var(--c-gray-100);
  display: flex; flex-direction: column;
}
[class*="if_shop_"] .cart_sum dl {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-md); margin: 0 0 var(--sp-md);
}
[class*="if_shop_"] .cart_sum dt { font-size: var(--fs-body1); color: var(--c-gray-600); }
[class*="if_shop_"] .cart_sum dd {
  margin: 0; font-size: var(--fs-body1); font-weight: var(--fw-medium);
  color: var(--c-black-900);
}
/* 시안 순서 : 상품 금액 → 할인 금액 → 배송비 → 총 결제 금액 */
[class*="if_shop_"] .cart_sum .g-cart__row--discount { order: 2; }
[class*="if_shop_"] .cart_sum .g-cart__row--delivery { order: 3; }
[class*="if_shop_"] .cart_sum .this_last { order: 4; }
[class*="if_shop_"] .cart_sum .cart_free_badge { order: 5; }
[class*="if_shop_"] .cart_sum .c_btnbox { order: 6; }

[class*="if_shop_"] .this_discount dd,
[class*="if_shop_"] .this_discount dd strong { color: var(--c-sale-red); }
[class*="if_shop_"] .this_discount .ic_price { display: none; }

[class*="if_shop_"] .this_last {
  margin-top: var(--sp-md); padding-top: var(--sp-lg);
  border-top: 1px solid var(--c-gray-200);
}
[class*="if_shop_"] .this_last dt {
  font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-black-900);
}
[class*="if_shop_"] .this_last dd,
[class*="if_shop_"] .this_last dd strong,
[class*="if_shop_"] .this_last dd em {
  font-size: var(--fs-display); font-weight: var(--fw-semibold);
  font-style: normal; color: var(--c-coral-500);
}
/* 레거시 `.c_order .cart_sum .this_last dd * {font-size:1.6em}` 가 "원" 을 48px 로
   키워버린다(30px × 1.6). 명시도를 올려 금액과 같은 크기로 되돌린다. */
.gonggu .c_order .cart_sum .this_last dd *,
.gonggu .c_form .sum_price .this_last dd * { font-size: var(--fs-display); }
.gonggu .c_order .cart_sum .this_last dd strong,
.gonggu .c_order .cart_sum .this_last dd em {
  font-size: var(--fs-display); font-weight: var(--fw-semibold); color: var(--c-coral-500);
}
/* "원" 은 금액보다 한 단계 작게 — 시안 가격 표기와 같은 규칙 */
.gonggu .c_order .cart_sum .this_last dd em { font-size: var(--fs-price-lg); margin-left: 2px; }

[class*="if_shop_"] .cart_free_badge {
  margin-top: var(--sp-sm);
  font-size: var(--fs-body2); color: var(--c-coral-500);
}
[class*="if_shop_"] .cart_free_badge em { font-style: normal; }

/* 하단 고정 주문 버튼 — 바탕까지 컨테이너 폭에 맞춘다 (상세 구매바와 동일) */
[class*="if_shop_"] .cart_sum .c_btnbox {
  position: fixed; left: 50%; right: auto; bottom: 0; z-index: 350;
  transform: translateX(-50%);
  width: 100%; max-width: var(--layout-max);
  padding: var(--sp-md) var(--layout-pad);
  padding-bottom: calc(var(--sp-md) + env(safe-area-inset-bottom, 0px));
  background: var(--c-white);
  border-top: 1px solid var(--c-gray-200);
}
[class*="if_shop_"] .btn-buy {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  width: 100%; margin: 0;
  height: 52px;
  border-radius: var(--r-12);
  font-size: var(--fs-body1); font-weight: var(--fw-semibold);
}
[class*="if_shop_"] .btn-buy.btn-buy { background: var(--c-coral-500); color: var(--c-white); }
[class*="if_shop_"] .btn-buy:active { background: var(--c-coral-600); }
[class*="if_shop_"] .btn-buy strong,
[class*="if_shop_"] .btn-buy em { font-style: normal; font-weight: var(--fw-semibold); }

/* 고정 버튼에 본문이 가리지 않게 (하단 네비는 장바구니에서 숨긴다 — 시안 기준) */
[class*="if_shop_"] .g-bnav { display: none; }
[class*="if_shop_"] .g-wrap { padding-bottom: calc(var(--buybar-h) + var(--sp-lg)); }

/* ============================================================================
 * 주문관리 (시안 08_주문관리)
 *   레거시는 B2B 주문관리 화면이다. 시안에 없는 블록은 끈다.
 *   되살리려면 아래 display:none 목록에서 해당 줄만 지우면 된다.
 * ========================================================================= */
.if_order_list .g-gnb,
.if_order_list .g-tabs,
.if_order_list .grid_aside,        /* 마이페이지 좌측 네비 */
.if_order_list .c_my_stats,        /* 상태별 통계 (결제대기/결제완료/…) */
.if_order_list .c_my_go,           /* 주문취소·환불요청 링크 */
.if_order_list .c_board_ctrl,      /* 기간검색 (전체/오늘/일주일/1개월/3개월) */
.if_order_list .estimate_btns,     /* 견적서·비교견적서·거래명세서·통장사본·놀이안·주소록 */
.if_order_list .naver_pay          /* 네이버페이 뱃지 */
  { display: none; }

.if_order_list .c_section { background: var(--c-gray-100); }
.if_order_list .layout_grid,
.if_order_list .grid_section > .layout_fix { padding: 0; }

/* 탭 : 배송현황 / 주문내역 — 시안은 언더라인이 탭 폭 전체 */
.if_order_list .g-otab {
  background: var(--c-white);
  border-bottom: 1px solid var(--c-gray-200);
}
.if_order_list .g-otab ul {
  display: flex; margin: 0; padding: 0; list-style: none;
  max-width: var(--layout-max); margin: 0 auto;
}
.if_order_list .g-otab li { flex: 1 1 0; }
.if_order_list .g-otab .tab {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 52px;
  font-size: var(--fs-body1); font-weight: var(--fw-medium);
}
.if_order_list .g-otab .tab.tab { color: var(--c-gray-600); }
.if_order_list .g-otab .hit .tab.tab { color: var(--c-coral-500); font-weight: var(--fw-semibold); }
.if_order_list .g-otab .hit .tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--c-coral-500);
}

/* 주문 카드 */
.if_order_list .c_my_list { padding: var(--sp-lg) var(--layout-pad) var(--sp-3xl); }
.if_order_list .c_my_list ul { margin: 0; padding: 0; list-style: none; }
.if_order_list .c_my_list > ul > li {
  position: relative;
  display: flex; flex-direction: column;
  margin-bottom: var(--sp-lg);
  padding: var(--sp-xl);
  border-radius: var(--r-16);
  background: var(--c-white);
}
.if_order_list .c_my_list .upper_link { position: absolute; inset: 0; z-index: 1; }

/* 상단 줄 : 주문번호·주문일 (좌) / 상태 뱃지 (우) — DOM 순서가 달라 order 로 맞춘다 */
.if_order_list .area_state {
  order: 1;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}
.if_order_list .area_conts { order: 2; display: flex; gap: var(--sp-md); }

.if_order_list .area_state .date {
  font-size: var(--fs-body2); color: var(--c-gray-600);
}
.if_order_list .area_state .price {
  margin-left: auto; order: 9;
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}
/* 상태 뱃지 — 시안 : Coral100 배경 · Coral 글씨 · Pill */
.if_order_list .c_tag {
  padding: 4px var(--sp-md);
  border: 0; border-radius: var(--r-full);
  background: var(--c-coral-100); color: var(--c-coral-600);
  font-size: var(--fs-tag); font-weight: var(--fw-semibold);
}
.if_order_list .c_tag.gray { background: var(--c-gray-100); color: var(--c-gray-600); }

.if_order_list .area_conts .thumb {
  flex: 0 0 auto; width: 88px; height: 88px;
  border-radius: var(--r-12); overflow: hidden; background: var(--c-beige);
}
.if_order_list .area_conts .thumb img { width: 100%; height: 100%; object-fit: cover; }
.if_order_list .conts_wrap { flex: 1 1 auto; min-width: 0; }
.if_order_list .conts_wrap .order_num {
  margin-bottom: var(--sp-xs);
  font-size: var(--fs-body2); font-weight: var(--fw-regular);
  color: var(--c-gray-600);
}
.if_order_list .conts_wrap .order_num strong { font-weight: var(--fw-regular); }
.if_order_list .conts_wrap .tit {
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}

/* 배송 조회 링크 — 시안 : 카드 하단 Coral 문구 */
.if_order_list .delivery_tracker {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  margin-top: var(--sp-md);
  font-size: var(--fs-body2); font-weight: var(--fw-medium);
}
.if_order_list .delivery_tracker.delivery_tracker { color: var(--c-coral-500); }

.if_order_list .c_none .gtxt {
  display: block; padding: 64px var(--layout-pad); text-align: center;
  font-size: var(--fs-body1); color: var(--c-gray-600);
}
.if_order_list .c_pagi { padding: 0 var(--layout-pad) var(--sp-3xl); }

/* ---- 주문서 전용 보정 (시안 없음 — 장바구니/주문관리 톤에 맞춤) ------------
 *   결제 버튼이 레거시 파랑이었다. .c_btn.color 가 원인.
 * ------------------------------------------------------------------------ */
.if_shop_order .c_btn.color.btn-buy,
.if_shop_order .btn-buy.btn-buy {
  background: var(--c-coral-500); color: var(--c-white); border: 0;
}
.if_shop_order .c_btn.color.btn-buy:active { background: var(--c-coral-600); }

/* 결제 동의 체크 줄 — 고정 버튼 바로 위 */
.if_shop_order .c_btnbox { gap: var(--sp-sm); }
.if_shop_order .agree_box,
.if_shop_order .c_btnbox .agree {
  display: flex; align-items: center; gap: var(--sp-sm);
  font-size: var(--fs-body2); color: var(--c-black-900);
}

/* 주문서는 입력 폼이 많다 — 공통 입력 스타일 */
.if_shop_order .input_design,
.if_shop_order input[type="text"],
.if_shop_order input[type="tel"],
.if_shop_order input[type="email"],
.if_shop_order select,
.if_shop_order textarea {
  height: 48px; padding: 0 var(--sp-lg);
  border: 1px solid var(--c-gray-200); border-radius: var(--r-12);
  background: var(--c-white);
  font-family: inherit; font-size: var(--fs-body1);
  letter-spacing: var(--ls-base); color: var(--c-black-900);
}
.if_shop_order textarea { height: auto; padding: var(--sp-md) var(--sp-lg); }
.if_shop_order .input_design:focus,
.if_shop_order input:focus,
.if_shop_order select:focus,
.if_shop_order textarea:focus { outline: none; border-color: var(--c-coral-300); }

/* 섹션 제목 (배송지 · 결제수단 등) */
.if_shop_order .c_group_tit .tit {
  display: block; padding: var(--sp-2xl) 0 var(--sp-md);
  font-size: var(--fs-h2); font-weight: var(--fw-semibold);
  color: var(--c-black-900);
}


/* ============================================================================
 * 공용 알림·확인 팝업 (.c_common_alert) — commonAlert() / commonConfirm()
 *
 *   레거시는 흰 상자에 검정 확인버튼이라 사이트 톤(Coral)과 따로 놀았다.
 *   마크업(.white_box > .msg + .btn_area)은 그대로 두고 CSS 만 다시 얹는다.
 *   열고 닫는 동작·애니메이션은 common.css 의 .if_open / .is_closing 을 그대로 쓴다.
 * ========================================================================= */
.c_common_alert .bg_close {
  background: rgba(31, 31, 31, .55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.c_common_alert .white_box {
  max-width: 340px; padding: 0; overflow: hidden;
  border-radius: var(--r-16);
  /* 위쪽만 코랄빛이 은은하게 도는 그라디언트 */
  background: linear-gradient(180deg, var(--c-coral-50) 0%, var(--c-white) 45%);
  box-shadow: 0 18px 40px rgba(31, 31, 31, .18), 0 2px 6px rgba(31, 31, 31, .06);
}
/* 상단 포인트 라인 */
.c_common_alert .white_box::before {
  content: ""; display: block; height: 4px;
  background: linear-gradient(90deg, var(--c-coral-500) 0%, var(--c-coral-300) 100%);
}
.c_common_alert .msg {
  padding: var(--sp-3xl) var(--sp-xl) var(--sp-lg);
  font-size: var(--fs-body1); font-weight: var(--fw-medium);
  color: var(--c-black-900); line-height: 1.6;
}
.c_common_alert .btn_area {
  gap: var(--sp-sm); margin: 0;
  padding: 0 var(--sp-xl) var(--sp-xl);
}
.c_common_alert .btn_area a {
  height: 48px; border-radius: var(--r-12);
  font-size: var(--fs-body1); font-weight: var(--fw-semibold);
}
.c_common_alert .btn_area .btn_cancel.btn_cancel {
  background: var(--c-gray-100); border: 1px solid var(--c-gray-100);
  color: var(--c-gray-600);
}
.c_common_alert .btn_area .btn_cancel:active { background: var(--c-gray-200); border-color: var(--c-gray-200); }
.c_common_alert .btn_area .btn_confirm.btn_confirm {
  border: 0; color: var(--c-white);
  background: linear-gradient(135deg, var(--c-coral-500) 0%, var(--c-coral-600) 100%);
  box-shadow: 0 6px 14px rgba(255, 122, 89, .35);
}
.c_common_alert .btn_area .btn_confirm:active { filter: brightness(.95); }

/* ============================================================================
 * 레거시 파랑(꼬망세) 일괄 정리 — #1B3BA1 · #0065e3 → 팔레트(Coral)
 *
 *   common.css / sub.css / *_responsive.css 에 파랑이 67곳 박혀 있다.
 *   공용 CSS 는 다른 스킨도 쓰므로 건드리지 않고, 여기서 `.gonggu` 를 한 겹 얹어
 *   덮어쓴다(명시도 +1). 원본이 !important 인 곳만 !important 로 맞선다.
 *
 *   새 화면을 붙였는데 파란 요소가 보이면, 그 선택자를 이 블록에 추가할 것.
 *   찾는 법 : 브라우저 콘솔에서 계산색이 rgb(27,59,161) / rgb(0,101,227) 인 요소 검색.
 * ========================================================================= */

/* ---- 포인트 텍스트 → Coral ---- */
.gonggu .c_user_guide dd em,
.gonggu .c_form .tx_item,
.gonggu .c_form .tip_txt strong,
.gonggu .c_form .mine .txt .num,
.gonggu .c_form .sum_price .this_discount *,
.gonggu .c_my_list .price.if_wait,
.gonggu .c_my_coupon .coupon_num,
.gonggu .c_order .cart_sum .this_last dd strong,
.gonggu .c_order .cart_sum .this_discount *,
.gonggu .c_order .cart_free_badge span,
.gonggu .c_order .cart_item .opt_name .date,
.gonggu .c_order .coupon_result span,
.gonggu .c_order .coupon_result .discount,
.gonggu .c_board_gallery .tag_state,
.gonggu .c_layer .qr_box .code_num .state .possible,
.gonggu .p_Vname .brand,
.gonggu .p_Vname .benefit .mb_add .tx,
.gonggu .p_Vcoupon .coupon_box dt,
.gonggu .p_Vopt .opt_dropbox[data-multi="Y"] .opt_list label.opt_chk_item:hover strong,
.gonggu .p_Vopt .opt_dropbox[data-multi="Y"] .this_selected .multi_count,
.gonggu .p_Vopt .opt_dropbox .opt_list .opt_tx:hover strong,
.gonggu .p_Vopt .opt_dropbox .opt_list .opt_tx:hover em.opt_price,
.gonggu .p_Vopt .opt_other label:hover .tx strong,
.gonggu .p_Vopt .opt_other label:hover .tx em.opt_price,
.gonggu .p_Vopt .type_result .date,
.gonggu .p_Vconts .sub_tit .tit,
.gonggu .p_Vconts .tab_menu .hit .tab,
.gonggu .p_Vconts .tab_menu .tab:hover,
.gonggu .p_Vrelative .tit_box .tit,
.gonggu .c_board_list.type_qna .about_item:hover,
.gonggu .c_board_rv .about_item:hover { color: var(--c-coral-500); }

.gonggu .c_attend .calendar_box li:last-of-type strong { color: var(--c-coral-500) !important; }

/* 총 합계금액 줄 : 라벨까지 파랑이었다. 숫자만 Coral, 나머지는 본문색 */
.gonggu .p_Vfix .fix_btm .price_total { color: var(--c-gray-600); }
.gonggu .p_Vfix .fix_btm .price_total strong { color: var(--c-coral-500); }

/* ---- 채움 버튼·뱃지 → Coral ---- */
.gonggu .c_btn.dipblue {
  background-color: var(--c-coral-500) !important;
  border-color: var(--c-coral-500) !important; color: var(--c-white) !important;
}
.gonggu .c_btn.dipblue.line {
  background-color: var(--c-white) !important;
  border-color: var(--c-coral-500) !important; color: var(--c-coral-500) !important;
}
.gonggu .c_tag.blue {
  background: var(--c-coral-500) !important;
  border-color: var(--c-coral-500) !important; color: var(--c-white) !important;
}
.gonggu .c_tag.blue.line { color: var(--c-coral-500) !important; background: var(--c-white) !important; }

.gonggu .c_process .hit .num { background: var(--c-coral-500); border-color: var(--c-coral-500); color: var(--c-white); }
.gonggu .c_process .hit::after,
.gonggu .c_process .hit + li::before { background: var(--c-coral-500); }

.gonggu .c_form .payway_box .c_label input:checked + .tx {
  border-color: var(--c-coral-500); background: var(--c-coral-500); color: var(--c-white);
}
.gonggu .c_order .cart_sum .c_btn.color,
.gonggu .c_order .cart_sum .c_btn.color:hover { background: var(--c-coral-500); border-color: var(--c-coral-500); }
.gonggu .btn-buy { background: var(--c-coral-500); }
.gonggu .c_board_view .reply .form .btn_ok:hover { background: var(--c-coral-600); }

.gonggu .p_Vname .item_price .percent { background: var(--c-coral-500); }

/* ---- 테두리·점선 → Coral 계열 ---- */
.gonggu .p_Vcoupon .coupon_box dl { border-color: var(--c-coral-300); }
.gonggu .p_Vcoupon .coupon_box .discount::before { border-left-color: var(--c-coral-300); }
.gonggu .c_order .coupon_result span { border-color: var(--c-coral-300); }
.gonggu .c_order .coupon_result .discount::before { border-left-color: var(--c-coral-300); }
.gonggu .c_board_list.type_qna .about_item:hover::before,
.gonggu .c_board_rv .about_item:hover::before { border-color: var(--c-coral-500); }
.gonggu .p_Vconts .tab_menu .hit .tab::before { background: var(--c-coral-500); }

/* 옵션 선택 UI */
.gonggu .p_Vopt .opt_dropbox.if_open_opt .opt_tx.this_selected { border-color: var(--c-coral-500); }
.gonggu .p_Vopt .opt_dropbox[data-multi="Y"] .opt_list label.opt_chk_item input[type="checkbox"]:checked {
  background: var(--c-coral-500); border-color: var(--c-coral-500);
}
.gonggu .p_Vopt .opt_other label input:checked + .tx { border-color: var(--c-coral-500); }
.gonggu .p_Vopt .opt_other label input:checked + .tx .shape::before { border-color: var(--c-coral-500); }

/* 상세 하단 시트 버튼 (레거시 hover 까지) */
.gonggu .p_Vfix .fix_btm .buy_box .btn { border-color: var(--c-coral-500); color: var(--c-coral-500); }
.gonggu .p_Vfix .fix_btm .buy_box .btn:hover { background: var(--c-coral-50); border-color: var(--c-coral-500); color: var(--c-coral-500); }
.gonggu .p_Vfix .fix_btm .buy_box .btn.btn_order,
.gonggu .p_Vfix .fix_btm .buy_box .btn.btn_order:hover {
  background: var(--c-coral-500); border-color: var(--c-coral-500); color: var(--c-white);
}
.gonggu .p_Vfixbtn .btn { background: var(--c-coral-500); }

/* ============================================================================
 * 로그인 (.c_login) — 시안 톤으로 정리
 *   레거시 마크업 그대로 두고 CSS 만 얹는다.
 *     .c_sns_login  : SNS 로그인 (관리자에서 켠 채널만 나온다)
 *     .c_form       : 아이디/비밀번호 · 자동로그인/아이디저장
 *     .c_btnbox     : 로그인 버튼
 *     .other_link   : 회원가입(dt) / 아이디·비밀번호 찾기(dd)
 * ========================================================================= */
.c_login .layout_fix { max-width: 400px; padding: var(--sp-3xl) var(--layout-pad) var(--sp-3xl); }

/* 입력칸 */
.c_login .form_ul { display: flex; flex-direction: column; gap: var(--sp-sm); margin: 0; padding: 0; }
.c_login .form_li { margin: 0; }
.c_login .input_design {
  width: 100%; height: 52px; padding: 0 var(--sp-lg);
  border: 1px solid var(--c-gray-200); border-radius: var(--r-12);
  background: var(--c-white);
  font-family: inherit; font-size: var(--fs-body1); color: var(--c-black-900);
  box-sizing: border-box;
}
.c_login .input_design::placeholder { color: var(--c-gray-400); }
.c_login .input_design:focus { outline: none; border-color: var(--c-coral-300); }

/* 자동로그인 · 아이디 저장 */
.c_login .c_labelbox { display: flex; gap: var(--sp-lg); margin-top: var(--sp-sm); }
.c_login .c_label .tx { font-size: var(--fs-body2); color: var(--c-gray-600); }
.c_login .c_label input:checked + .tx { color: var(--c-black-900); }
/* 레거시가 .icon 배경을 !important 로 회색/검정으로 박아둬서 맞불.
   흰 배경만 주면 미선택 체크박스가 흰 화면에 묻혀 안 보인다 → 테두리를 준다. */
.c_login .c_label .tx .icon {
  flex: none; width: 20px; height: 20px;
  border: 1px solid var(--c-gray-300, #DCDCDC) !important;
  border-radius: var(--r-6);
  background-color: var(--c-white) !important;
  background-size: 12px auto !important;
}
.c_login .c_label input:checked + .tx .icon { border-color: var(--c-coral-500) !important; background-color: var(--c-coral-500) !important; }

/* 로그인 버튼 — 시안 CTA */
.c_login .c_btnbox { margin-top: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-sm); }
.c_login .c_btn.h50,
.c_login .c_btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px;
  border-radius: var(--r-12);
  font-size: var(--fs-body1); font-weight: var(--fw-semibold);
}
.c_login .c_btn.black.black {
  background: var(--c-coral-500); border: 0; color: var(--c-white);
}
.c_login .c_btn.black:active { background: var(--c-coral-600); }
.c_login .c_btn.color.line {
  background: var(--c-white); border: 1px solid var(--c-gray-200); color: var(--c-black-900);
}

/* 회원가입 — 작은 밑줄 링크였다. 시안처럼 큼직한 아웃라인 버튼으로 올린다. */
.c_login .other_link { display: block; margin-top: var(--sp-lg); }
.c_login .other_link dt { margin: 0 0 var(--sp-lg); }
.c_login .other_link dt .btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px; padding: 0;
  border: 1px solid var(--c-coral-500); border-radius: var(--r-12);
  color: var(--c-coral-500); font-size: var(--fs-body1); font-weight: var(--fw-semibold);
}
.c_login .other_link dt .btn:active { background: var(--c-coral-50); }
.c_login .other_link dt .btn em { color: inherit; font-style: normal; }
.c_login .other_link dt .btn em::before { display: none; }   /* 레거시 빨간 밑줄 제거 */

/* 아이디 · 비밀번호 찾기 */
.c_login .other_link dd { display: flex; justify-content: center; margin: 0; }
.c_login .other_link dd .btn { color: var(--c-gray-600); font-size: var(--fs-body2); font-weight: var(--fw-regular); }
.c_login .other_link dd .btn + .btn::before { background: var(--c-gray-200); }

/* 비회원 주문조회 */
.c_login .btn_guest {
  margin-top: var(--sp-2xl); padding: var(--sp-lg) 0;
  border: 1px solid var(--c-gray-200); border-radius: var(--r-12);
  font-size: var(--fs-body2);
}
.c_login .btn_guest em { color: var(--c-gray-600); font-style: normal; }
.c_login .btn_guest strong { color: var(--c-black-900); }

/* ---- SNS 로그인 : 동그란 아이콘 → 전체 폭 버튼 --------------------------- */
.c_sns_login { margin-bottom: var(--sp-xl); }
.c_sns_login ul { flex-direction: column; gap: var(--sp-sm); margin: 0; padding: 0; }
.c_sns_login li { width: 100%; }
.c_sns_login .btn {
  width: 100%; height: 52px;
  border-radius: var(--r-12);
  font-size: var(--fs-body1); font-weight: var(--fw-semibold);
}
.c_sns_login .btn .icon { width: 20px; height: 20px; }
/* 라벨은 마크업에 없어서 여기서 넣는다 (아이콘만 있는 <a>) */
.c_sns_login .btn.kakao::after   { content: "카카오로 로그인";  color: #191600; }
.c_sns_login .btn.naver::after   { content: "네이버로 로그인";  color: var(--c-white); }
.c_sns_login .btn.google::after  { content: "구글로 로그인";    color: #3c4043; }
.c_sns_login .btn.apple::after   { content: "Apple로 로그인";   color: var(--c-white); }
.c_sns_login .btn.facebook::after{ content: "페이스북으로 로그인"; color: var(--c-white); }
.c_sns_login .btn.kakao  { background: #FEE500; border-color: #FEE500; }
.c_sns_login .btn.naver  { background: #03C75A; border-color: #03C75A; }
.c_sns_login .btn.google { background: var(--c-white); border-color: var(--c-gray-200); }

/* "또는" 구분선 */
.c_sns_login .or_box {
  display: flex; align-items: center; gap: var(--sp-md);
  margin-top: var(--sp-xl);
}
/* 레거시는 :before 를 absolute 로 깔고 .tx 에 흰 배경을 줘서 선을 끊는 방식이다.
   여기서는 선 두 개를 flex 로 양옆에 두므로 position/width 를 되돌려야 한다. */
.c_sns_login .or_box::before,
.c_sns_login .or_box::after {
  content: ""; position: static; z-index: auto;
  flex: 1 1 auto; width: auto; height: 1px; background: var(--c-gray-200);
}
.c_sns_login .or_box .tx {
  padding: 0; background: none;
  font-size: var(--fs-body2); font-weight: var(--fw-regular); color: var(--c-gray-400);
}

/* ============================================================================
 * 컨테이너 여백 (사용자 지정 2026-08-25)
 *   setting.css `.layout_fix{padding:0 30px}` / sub_responsive.css `{padding:0 15px}`
 *   전 화면에서 0 으로 지웠더니 상단바 아이콘 등 레거시 여백에 기대던 곳이 깨져서
 *   **주문서(if_shop_order) 의 본문(.c_order) 안쪽만** 0 으로 둔다.
 *   상단바(.c_page_tit)·푸터·하단네비는 레거시 여백 그대로.
 * ========================================================================= */
.gonggu.if_shop_order .c_order .layout_fix { padding: 0; }

/* 쿠폰·적립금·프로모션 코드의 "할인적용" 버튼 — 옆 입력칸과 같은 규격으로 맞춘다
   (레거시 .c_btn.h45 는 45px 각진 버튼이라 48px/r-12 인 입력칸과 따로 놀았다) */
[class*="if_shop_"] .c_btn.h45 {
  height: 48px; padding: 0 var(--sp-lg);
  border-radius: var(--r-12);
  font-size: var(--fs-body2); font-weight: var(--fw-semibold);
  white-space: nowrap;
}
[class*="if_shop_"] .c_btn.h45.black.line {
  border: 1px solid var(--c-black-900); background: var(--c-white);
}
[class*="if_shop_"] .c_btn.h45.black.line.black { color: var(--c-black-900); }
[class*="if_shop_"] .c_btn.h45.black.line:active { background: var(--c-gray-100); }

/* 결제 고정바의 "상품정보 확인 및 구매동의" 줄 — 레거시 margin-top:-5px 때문에
   고정바(.c_btnbox, overflow:hidden) 위로 밀려나가 글자 윗부분이 잘렸다.
   전자상거래법 고지 문구라 잘리면 안 된다. */
[class*="if_shop_"] .cart_sum .c_btnbox .order_tip { margin-top: 0; margin-bottom: var(--sp-xs); }
[class*="if_shop_"] .order_tip .tip_ctrl { align-items: center; min-height: 22px; }
[class*="if_shop_"] .order_tip label.c_label .tx {
  height: auto; line-height: 1.3;
  font-size: var(--fs-body2); color: var(--c-gray-600);
}
[class*="if_shop_"] .order_tip label.c_label input:checked + .tx { color: var(--c-black-900); }

/* ---- 체크박스/라디오 아이콘 색 : 레거시가 !important 로 회색·검정을 박아둬서 맞불 ---- */
[class*="if_shop_"] .c_label .tx .icon {
  background-color: var(--c-white) !important;
  border: 1px solid var(--c-gray-300, #DCDCDC) !important;
}
[class*="if_shop_"] .c_label input:checked + .tx .icon {
  background-color: var(--c-coral-500) !important;
  border-color: var(--c-coral-500) !important;
}

/* 결제수단 칩 : 칩 모양은 .tx 가 만든다. 라벨은 그리드 칸을 꽉 채워야 칸마다 폭이 맞는다 */
[class*="if_shop_"] .payway_box .c_label { display: block; width: 100%; }
[class*="if_shop_"] .payway_box .c_label .tx { width: 100%; box-sizing: border-box; }
/* 선택된 칩은 간편결제 블록과 같은 차콜로. 코랄은 최종 결제 버튼에만 남긴다. */
.gonggu .c_form .payway_box .c_label input:checked + .tx {
  border-color: var(--c-black-900); background: var(--c-black-900); color: var(--c-white);
}

/* 주문상세 하단 고정 버튼바 (.c_order .area_ctrl .c_btnbox)
   레거시(common_responsive.css)가 left:0;width:100% 로 화면 전체를 덮는다.
   다른 고정바(상세 구매바·장바구니 주문바)와 같이 컨테이너 폭 안으로 넣는다. */
.gonggu .c_order .area_ctrl .c_btnbox {
  left: 50%; right: auto; transform: translateX(-50%);
  width: 100%; max-width: var(--layout-max);
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--layout-pad);
  padding-bottom: calc(var(--sp-md) + env(safe-area-inset-bottom, 0px));
  background: var(--c-white);
  border-top: 1px solid var(--c-gray-200); box-shadow: none;
}
.gonggu .c_order .area_ctrl .c_btnbox .c_btn {
  height: 52px; border-radius: var(--r-12);
  font-size: var(--fs-body1); font-weight: var(--fw-semibold);
}
.gonggu .c_order .area_ctrl .c_btnbox .c_btn.line.black {
  border: 1px solid var(--c-black-900); background: var(--c-white);
}
.gonggu .c_order .area_ctrl .c_btnbox .c_btn.light.line {
  border: 1px solid var(--c-gray-200); background: var(--c-white);
}
.gonggu .c_order .area_ctrl .c_btnbox .c_btn.light.line.light { color: var(--c-gray-600); }

/* 달력(air-datepicker) 파랑 → 팔레트 */
.gonggu .datepicker--cell.-current- { color: var(--c-coral-500); }
.gonggu .datepicker--cell.-focus- { background: var(--c-coral-100); }
.gonggu .datepicker--cell.-selected-,
.gonggu .datepicker--cell.-selected-.-current- { background: var(--c-coral-500); color: var(--c-white); }
.gonggu .datepicker--cell.-in-range- { background: var(--c-coral-50); color: var(--c-black-900); }
.gonggu .datepicker--button { color: var(--c-coral-500); }

/* 주문관리 탭 — 시안 08 은 언더라인 탭이다.
   레거시 .c_page_tab .tab 이 테두리+라운드 박스(그리고 .hit 에 background:#fff !important)를
   씌우고 있어서 밑줄 스타일이 박스처럼 보였다. 박스 흔적을 지운다. */
.if_order_list .g-otab .tab {
  border: 0; border-radius: 0; padding: 0;
  background: transparent !important;
}
.if_order_list .g-otab .hit .tab { background: transparent !important; }

/* 주문 상태 뱃지 (입금대기·배송중 …) — 시안은 Coral 100 배경 pill, 테두리 없음 */
.if_order_list .c_my_list .c_tag,
.if_order_list .c_my_list .c_tag.line,
.if_order_list .c_my_list .c_tag.red.line {
  border: 0 !important;
  background: var(--c-coral-100) !important;
  color: var(--c-coral-500) !important;
  height: 26px; padding: 0 var(--sp-md);
  border-radius: var(--r-full);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}

/* ============================================================================
 * TopBar 통일 (2026-08-25 사용자 지정)
 *   GNB · 상품상세(.p_Vtit) · 서브페이지(.c_page_tit) 모두
 *   좌우 여백 15px, 같은 ← 아이콘(32px 박스에 20px 글리프), 제목 16px/600.
 * ========================================================================= */
.g-gnb { padding: 0 15px; }

/* 서브페이지 TopBar : 상품상세(.p_Vtit) 실측값에 맞춘다.
     바 56px + 1px 보더 / 백버튼 32px 박스·아이콘 14px·바 왼쪽에서 5px
     / 제목 16px·600 가운데 / 우측 아이콘 바 오른쪽에서 5px  */
.c_page_tit .tit_box { padding: 0 56px; }
.c_page_tit .btn_back {
  left: 5px;
  background: url("../images/c_img/ic_back.svg") no-repeat center;
  background-size: 14px auto;
}
.c_page_tit .tit_box .right {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: var(--sp-sm);
}
.c_page_tit .tit_box .right .g-tb__ico {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: none;
}
.c_page_tit .tit_box .right .g-tb__ico.g-tb__ico { color: var(--c-coral-500); }

/* 서브페이지 TopBar 의 컨테이너 여백만 제거 (상세와 같은 위치에서 시작하도록) */
.c_page_tit > .layout_fix { padding: 0; max-width: none; }

/* ============================================================================
 * 주문관리 카드 — 시안 08_주문관리
 *   [주문번호 · 주문일 | 상태뱃지] / [썸네일 + 상품명·수량·금액] / [배송문구 | 주문상세]
 * ========================================================================= */
.if_order_list .c_page_tab.g-otab { margin: 0; }          /* 타이틀과 탭 사이 공백 제거 */
.if_order_list .c_section { padding-top: 0; }
.if_order_list .grid_section > .layout_fix { padding-top: 0; }

.if_order_list .c_my_list li { position: relative; }
.if_order_list .g-ord__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-sm); margin-bottom: var(--sp-md);
}
.if_order_list .g-ord__num { font-size: var(--fs-body2); color: var(--c-gray-600); }
.if_order_list .g-ord__state { flex: none; }

.if_order_list .area_conts { display: flex; align-items: flex-start; gap: var(--sp-md); }
.if_order_list .area_conts .thumb {
  flex: none; width: 88px; height: 88px;
  border-radius: var(--r-12); overflow: hidden; background: var(--c-beige);
}
.if_order_list .area_conts .thumb img { width: 100%; height: 100%; object-fit: cover; }
.if_order_list .conts_wrap { min-width: 0; }
.if_order_list .conts_wrap .tit {
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  color: var(--c-black-900); line-height: 1.35;
}
.if_order_list .g-ord__opt { margin-top: 2px; font-size: var(--fs-body2); color: var(--c-gray-600); }
.if_order_list .g-ord__price {
  margin-top: var(--sp-sm);
  font-size: var(--fs-price-lg); font-weight: var(--fw-semibold); color: var(--c-black-900);
}

.if_order_list .g-ord__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-md); margin-top: var(--sp-lg);
}
.if_order_list .g-ord__ship { font-size: var(--fs-body2); color: var(--c-coral-500); }
.if_order_list .g-ord__ship:empty { display: none; }
.if_order_list .g-ord__ship .delivery_tracker,
.if_order_list .g-ord__due { color: var(--c-coral-500); }
/* 카드 전체 링크(.upper_link) 위로 올려야 버튼이 눌린다 */
.if_order_list .g-ord__btn {
  position: relative; z-index: 2; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 var(--sp-lg); margin-left: auto;
  border: 1px solid var(--c-gray-200); border-radius: var(--r-12);
  background: var(--c-white);
  font-size: var(--fs-body2); font-weight: var(--fw-semibold);
}
.if_order_list .g-ord__btn.g-ord__btn { color: var(--c-black-900); }

/* 타이틀 ↔ 탭 사이 15px : .grid_section 의 margin-top 이다 */
.if_order_list .grid_section { margin-top: 0; }
/* 카드 내부 순서 : 앞서 레거시 카드용으로 .area_conts 에 order:2 를 줬던 게 남아
   새 마크업에서 [배송문구·버튼]이 상품 위로 올라갔다. 순서를 명시한다. */
.if_order_list .c_my_list li > .g-ord__head { order: 1; }
.if_order_list .c_my_list li > .area_conts { order: 2; }
.if_order_list .c_my_list li > .estimate_btns { order: 3; }
.if_order_list .c_my_list li > .g-ord__foot { order: 4; }

/* ============================================================================
 * 마이페이지 — 시안 07_마이페이지
 *   새 블록(.g-my)만 노출하고 레거시(가로탭 · 검정 프로필카드 · 적립금/쿠폰 박스 ·
 *   최근 주문내역)는 마크업을 남긴 채 감춘다. 되살리려면 아래 display:none 을 지운다.
 * ========================================================================= */
.if_mypage .c_nav.type_only,
.if_mypage .c_my_main,
.if_mypage .c_group_tit,
.if_mypage .c_my_list,
.if_mypage .c_pagi { display: none; }
/* 등급별 혜택 레이어는 새 블록에서도 부르므로 살려둔다 */
.if_mypage .c_my_main .c_layer.type_level { display: block; }
.if_mypage .c_page_tit { display: none; }   /* 제목은 .g-my__head 가 대신한다 */

.g-my { padding: var(--sp-xl) 0 var(--sp-3xl); }
.g-my__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--layout-pad) var(--sp-lg);
}
.g-my__title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-semibold); color: var(--c-black-900); }
.g-my__set { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--c-gray-600); }

/* 프로필 */
.g-my__profile { display: flex; align-items: center; gap: var(--sp-md); padding: 0 var(--layout-pad) var(--sp-xl); }
.g-my__avatar {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--r-full);
  background: var(--c-coral-100); color: var(--c-coral-500);
  font-size: var(--fs-h2); font-weight: var(--fw-semibold);
}
.g-my__who { min-width: 0; }
.g-my__name { display: flex; align-items: center; gap: var(--sp-sm); margin: 0; }
.g-my__name strong { font-size: var(--fs-h2); font-weight: var(--fw-semibold); color: var(--c-black-900); }
.g-my__grade {
  padding: 3px var(--sp-md); border-radius: var(--r-full);
  background: var(--c-coral-500); color: var(--c-white);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}
.g-my__benefit { display: inline-block; margin-top: 2px; font-size: var(--fs-body2); }
.g-my__benefit.g-my__benefit { color: var(--c-gray-600); }

/* 요약 3분할 */
.g-my__sum {
  display: flex; margin: 0 var(--layout-pad);
  border-radius: var(--r-16); background: var(--c-cream);
}
.g-my__sum a {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--sp-xl) var(--sp-sm);
}
.g-my__sum strong { font-size: var(--fs-price-lg); font-weight: var(--fw-semibold); color: var(--c-coral-500); }
.g-my__sum span { font-size: var(--fs-body2); color: var(--c-gray-600); }

/* 주문 현황 */
.g-my__ordhead {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--sp-3xl) var(--layout-pad) var(--sp-md);
}
.g-my__subtit { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--c-black-900); }
.g-my__more { font-size: var(--fs-caption); }
.g-my__more.g-my__more { color: var(--c-gray-600); }
.g-my__steps { display: flex; align-items: center; padding: 0 var(--layout-pad) var(--sp-xl); }
.g-my__step {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative;
}
/* 단계 사이 > 표시 */
.g-my__step + .g-my__step::before {
  content: ""; position: absolute; left: -4px; top: 12px;
  width: 7px; height: 7px;
  border-top: 1.5px solid var(--c-gray-200); border-right: 1.5px solid var(--c-gray-200);
  transform: rotate(45deg);
}
.g-my__step strong { font-size: var(--fs-h2); font-weight: var(--fw-semibold); color: var(--c-gray-400); }
.g-my__step span { font-size: var(--fs-caption); color: var(--c-gray-600); }
.g-my__step.is-on strong { color: var(--c-black-900); }

/* 메뉴 리스트 */
.g-my__menu { margin: 0; padding: 0; list-style: none; border-top: 8px solid var(--c-gray-100); }
.g-my__menu li + li { border-top: 1px solid var(--c-gray-100); }
.g-my__menu a {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: var(--sp-lg) var(--layout-pad);
  font-size: var(--fs-body1); font-weight: var(--fw-medium);
}
.g-my__menu a.g-my__menu a,
.g-my__menu a { color: var(--c-black-900); }
.g-my__menu .ico { flex: none; font-size: 18px; line-height: 1; }
/* 우측 화살표 */
.g-my__menu a::after {
  content: ""; margin-left: auto; flex: none;
  width: 7px; height: 7px;
  border-top: 1.5px solid var(--c-gray-400); border-right: 1.5px solid var(--c-gray-400);
  transform: rotate(45deg);
}