/* 화면별 스타일 — Phase 3 에서 계속 늘어난다.
 * 치수는 20260818 B타입 시안 실측값.
 */

/* ── 화면 제목 ─────────────────────────────────────────────────────────── */

.screen-head { padding-top: 72px; }
.screen-head h1 {
  margin: 0;
  font-size: 32px; line-height: 42px;
  font-weight: 800; letter-spacing: -.03em;
}
.screen-head p {
  /* 시안 01 실측: 잉크 h20, '아래의 메뉴를…' 폭 309, 색 #313132 */
  margin: 6px 0 0;
  font-size: 22px; line-height: 30px; color: #313132;
}

/* ── 전체 메뉴 1Depth ───────────────────────────────────────────────────
 * 시안 01/02 — 카드 182x229, 갭 17, 5열 2행 */

.category-grid {
  margin-top: 35px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 17px;
}
[data-orientation="portrait"] .category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.category-card {
  position: relative;
  height: 229px;
  display: grid;
  grid-template-rows: 47px 92px 1fr;   /* 1px border 보정 → 아이콘이 카드+48 */
  justify-items: center;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  text-align: center;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast),
              transform var(--dur-fast);
}
.category-card:hover {
  border-color: var(--blue);
  box-shadow: 0 6px 18px rgba(45, 103, 212, .12);
  transform: translateY(-2px);
}
.category-card:active { transform: translateY(0); }
.category-card img {
  grid-row: 2;
  width: 92px; height: 92px; display: block;
}
.category-card .label {
  grid-row: 3;
  align-self: start;
  margin-top: 12px;
  /* 시안 01 실측: 잉크 높이 17~18px, '조명' 32px, '전기·배선자재' 105px.
     Pretendard SemiBold 19px 가 폭·높이·획 굵기 모두 일치한다. */
  font-size: 19px; line-height: 25px; font-weight: 600;
  letter-spacing: .01em;
  color: #1C1C1C;
  white-space: pre-line;
}

/* 선택 상태 — 시안은 검정 2px border 뿐이라 색만으로 구분된다(WCAG 1.4.1 위배).
 * 브랜드색 + 굵기 + 체크 배지를 함께 써서 색 없이도 구분되게 한다. */
.category-card[aria-current="true"] {
  border: 2px solid var(--blue);
  box-shadow: 0 0 0 3px rgba(45, 103, 212, .14);
}
.category-card[aria-current="true"] .label { color: var(--blue); font-weight: 800; }
.category-card[aria-current="true"]::after {
  content: "";
  position: absolute; top: 10px; right: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue) center / 15px 15px no-repeat;
  background-image: url("data:image/svg+xml,%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.8 12.6 9.6 17.4 19.2 6.8'/%3E%3C/svg%3E");
}

/* ── 전체 메뉴 2Depth ───────────────────────────────────────────────────
 * 시안 03 — 카드 211x165, 4열 3행 + 좌측 이전 컬럼 */

/* 시안 03 실측: 이전은 작은 버튼이 아니라 x60..123(64) y236..768(533) 전체 높이 컬럼 */
.depth2-layout {
  margin-top: 35px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 17px;
}
[data-orientation="portrait"] .depth2-layout {
  grid-template-columns: 56px minmax(0, 1fr);
}

.depth2-back {
  align-self: stretch;
  display: grid; align-content: center; justify-items: center; gap: 9px;
  padding: 14px 4px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.depth2-back:hover { border-color: var(--blue); color: var(--blue); }
.depth2-back .label { font-size: 17px; line-height: 22px; font-weight: 600; }

.depth2-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
}
[data-orientation="portrait"] .depth2-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.depth2-card {
  height: 165px;
  display: grid;
  grid-template-rows: 21px 76px 1fr;
  justify-items: center;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  text-align: center;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast),
              transform var(--dur-fast);
}
.depth2-card:hover {
  border-color: var(--blue);
  box-shadow: 0 6px 18px rgba(45, 103, 212, .12);
  transform: translateY(-2px);
}
.depth2-card img { grid-row: 2; width: 76px; height: 76px; display: block; }
/* 시안 03 실측: 잉크 17~18px, '레일조명' 66px → 1Depth 와 같은 19px SemiBold.
   1줄/2줄 라벨 모두 남은 영역에서 세로 중앙 정렬된다. */
.depth2-card .label {
  grid-row: 3; align-self: center;
  font-size: 19px; line-height: 24px; font-weight: 600;
  letter-spacing: .01em; color: #1C1C1C;
  white-space: pre-line;
}

/* ── 유휴화면 ───────────────────────────────────────────────────────────
 * 시안 14 — 다크 배경, 프로모 2컷, 하단 터치 유도 */

.idle {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 24px;
  padding: 39px;
  background: var(--idle-bg);
}
.idle-promos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  min-height: 0;
}
[data-orientation="portrait"] .idle-promos {
  grid-template-columns: 1fr; grid-template-rows: 1fr 1fr;
}
/* 배너 등장 — 페이드 + 살짝 떠오름. 두 장을 시차로 띄운다.
   가이드 MOTION_INTENSITY 2 에 맞춰 절제한다. 화려하게 만들지 않는다. */
.idle-promos img {
  width: 100%; height: 100%;
  display: block; object-fit: contain;
  border-radius: var(--r-lg);
  transform-origin: 50% 45%;
  animation: promo-in .62s var(--ease) both,
             promo-drift 18s ease-in-out 1.2s infinite;
}
.idle-promos img:nth-child(2) {
  transform-origin: 50% 55%;
  animation-delay: .14s, 10.2s;   /* 두 장이 엇갈려 움직이게 */
}

@keyframes promo-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
/* 아주 느린 확대·부유. 18초에 한 번 왕복해서 오브젝트가 살아 보이되
   시선을 끌지 않는다. 브랜드보드 MOTION_INTENSITY 2 기준. */
@keyframes promo-drift {
  0%, 100% { transform: scale(1)     translateY(0); }
  50%      { transform: scale(1.028) translateY(-6px); }
}
.idle-foot {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
  padding: 0 4px;
}
.idle-cta {
  position: relative; overflow: hidden;
  min-height: 66px;
  max-width: 700px; width: 100%; justify-self: center;
  border: 0; border-radius: var(--r);
  background: var(--blue-raw-2); color: #fff;
  font-size: 20px; font-weight: 700;
  animation: promo-in .62s var(--ease) .28s both;
}
.idle-cta:hover { background: var(--blue); }
/* 터치를 유도하는 은은한 스윕. 3.6초에 한 번만 지나간다. */
.idle-cta::after {
  content: "";
  position: absolute; inset: 0; left: -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
  animation: cta-sweep 3.6s ease-in-out 1.6s infinite;
}
@keyframes cta-sweep {
  0%        { transform: translateX(0); }
  38%, 100% { transform: translateX(350%); }
}
.idle-foot .idle-mute { animation: promo-in .62s var(--ease) .36s both; }
.idle-mute {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: #fff; color: var(--idle-bg);
}

.screen-todo { padding: 40px 0; color: var(--ink-2); font-size: 15px; }
.screen-todo code {
  padding: 2px 7px; border-radius: 5px;
  background: var(--surface-muted); font-size: 13.5px;
}

/* ── 재구매는 여기에서 ──────────────────────────────────────────────────
 * 시안 04(플랫형) / 06(박스형). 실측:
 *   헤더 잉크 y125..144, 토글 y118..149(h32)
 *   구매이력 카드 x65 pitch200 w170, 이미지 y161 170x170
 *   상품명 y342 · 코드 y359 · 가격 y372..387 · CTA y397..431(h34)
 *   구분선 y464 #DADADA
 *   하단 카드 이미지 y532 160x160, 2+3 분할
 */

/* 세로 리듬은 시안의 박스 앵커에 맞춘다.
   미디어 161 → CTA 397(h34) → 구분선 464 → 제목 494 → 미디어 532 → CTA 758(h34) */
.reorder-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 40px 0 11px;      /* 토글 118(h32) → 미디어 161 */
}
.reorder-head h1 { margin: 0; font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -.02em; }
.reorder-head h1 .biz { color: var(--blue-raw); }

.seg { display: flex; gap: 8px; }
.seg button {
  min-height: 32px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2);
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.seg button[aria-pressed="true"] {
  border-color: var(--ink); color: var(--ink); font-weight: 700;
}

/* 가로 스크롤 캐러셀
 * 네이티브 스크롤바는 콘텐츠 높이를 밀어내서 스크롤 여부에 따라
 * 카드 하단 위치가 8px 달라진다. 숨기고 커스텀 트랙을 쓴다. */
.carousel { position: relative; padding-bottom: 14px; }
.rail-scroll {
  display: grid; grid-auto-flow: column; gap: 30px;
  justify-content: start;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.rail-scroll::-webkit-scrollbar { display: none; }

/* 시안 실측: 트랙 없이 thumb 만. #D9DADD, 높이 6, 라운드.
   구매이력 thumb 400/970, 여름맞이 200/360, 구매시기 260/540 */
.carousel-bar {
  position: absolute; left: 0; right: 0; bottom: 4px;
  height: 6px; cursor: pointer;
  touch-action: none;
}
.carousel-bar[hidden] { display: none !important; }
.carousel-bar i {
  position: absolute; top: 0; bottom: 0; left: 0;
  border-radius: 99px; background: #D9DADD;
  transition: background var(--dur-fast);
}
.carousel-bar:hover i { background: #C2C4C9; }
.carousel-bar:active i { background: #ADB0B6; }

.section-split {
  display: grid; grid-template-columns: 2fr 3fr; gap: 40px;
  margin-top: 19px; padding-top: 30px;   /* border 464 → 제목 494 */
  border-top: 1px solid #DADADA;
}
[data-orientation="portrait"] .section-split { grid-template-columns: 1fr 1fr; gap: 24px; }
.section-split section { min-width: 0; }
.section-split h2 {
  margin: 0 0 9px;                        /* 제목 494+29 → 미디어 532 */
  font-size: 22px; line-height: 29px;     /* 시안 잉크 h20 = 22px */
  font-weight: 700; letter-spacing: -.02em;
}

/* ── 상품 카드 ──────────────────────────────────────────────────────────
 * 두 변형: history(170 타일 · 다시담기) / promo(160 타일 · 담기) */

.pcard { width: var(--pcard-w, 170px); display: grid; gap: 0; text-align: left; }
.pcard .media {
  width: var(--pcard-w, 170px); height: var(--pcard-w, 170px);
  border-radius: var(--r-sm); overflow: hidden; background: #A0A0A0;
}
.pcard .media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pcard .name {
  margin-top: 7px;
  font-size: 14px; line-height: 17px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcard .code {
  font-size: 12px; line-height: 16px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcard .price {
  margin-top: 2px; display: flex; align-items: baseline; gap: 6px;
  font-size: 13px; line-height: 18px;
}
.pcard .price .tag { color: var(--price); font-weight: 700; }
.pcard .price .now { color: var(--price); font-size: 17px; font-weight: 800; }
.pcard .price .was { color: var(--price-strike); text-decoration: line-through; }

/* 게스트 모드 — 숫자를 blur·마스킹하지 않고 명시 카피로 대체한다 (가이드 §7) */
.pcard .price.locked { display: block; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.pcard .price.locked b { display: block; color: var(--ink); font-size: 14px; font-weight: 700; }

.pcard .cta {
  margin-top: 4px; min-height: 34px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: 14px; font-weight: 700;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.pcard .cta.again { background: var(--mint); color: var(--mint-ink); }
.pcard .cta.again:hover { background: #D6EBE4; }
.pcard .cta.add { background: var(--surface); border-color: var(--border-strong); color: var(--ink); }
.pcard .cta.add:hover { border-color: var(--blue); color: var(--blue); }
.pcard .cta.done { background: var(--disabled-bg); color: #4A4A4A; cursor: default; }
.pcard .cta .ic { width: 17px; height: 17px; }

/* ── 재구매 박스형 — 시안 06 ─────────────────────────────────────────────
 * 실측(1200 export): 배경 #F1F2F6, 바깥 여백 좌 52 / 상 18 / 하 26,
 * 박스 사이 세로 12 · 가로 34, 박스 내부 padding 17 25 14 */

/* 좌우 패딩은 shell 이 레일 상태까지 계산해 --main-left/right 로 준다.
   여기서 덮어쓰면 박스가 퀵레일 밑으로 들어간다. 상하만 바꾼다. */
#main[data-screen="reorder"][data-variant="box"] {
  background: #F1F2F6;
  padding-top: 18px;
  padding-bottom: 26px;
}
#main[data-screen="reorder"][data-variant="box"] .reorder-box {
  padding: 17px 25px 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
}
#main[data-screen="reorder"][data-variant="box"] .reorder-head { padding: 0 0 11px; }

#main[data-screen="reorder"][data-variant="box"] .section-split {
  margin-top: 12px; padding-top: 0;
  border-top: 0;
  gap: 34px;
}
#main[data-screen="reorder"][data-variant="box"] .section-split > section {
  padding: 17px 25px 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
}
#main[data-screen="reorder"][data-variant="box"] .section-split h2 { margin-bottom: 9px; }

/* 플랫형(04)에서는 섹션이 카드가 아니라 구분선으로만 나뉜다 */
#main[data-screen="reorder"][data-variant="flat"] .reorder-box { padding: 0; background: none; }

/* ── 상품 목록 — 시안 08/09/10 ───────────────────────────────────────────
 * 실측: 제목 잉크 y124..152(32px) · 필터 행 y172..216 · 카드 이미지 240 239각
 *       텍스트 y490/508/529 · CTA y557..591(h35)
 *       3열(레일 접힘) / 2열(레일 펼침), 카드 239 갭 31 */

.list-head { padding-top: 46px; display: flex; align-items: center; gap: 10px; }
.list-head h1 { margin: 0; font-size: 32px; line-height: 42px; font-weight: 800; letter-spacing: -.03em; }
.list-head .ic { color: #F5A623; }

.list-filters {
  margin-top: 14px; display: flex; align-items: center; gap: 12px;
}
.list-filters button {
  min-height: 44px; padding: 0 16px;
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--border-strong); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  font-size: 16px; font-weight: 600;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.list-filters button:hover { border-color: var(--blue); color: var(--blue); }
.list-filters button .ic { color: var(--ink-2); }
.list-filters .more { width: 52px; padding: 0; justify-content: center; }

.list-grid {
  margin-top: 22px;
  /* 카드 폭을 239 로 고정한다. 레일·장바구니가 열려도 썸네일 크기가 변하지 않는다.
     (열 수를 1fr 로 두면 패널이 열릴 때 카드가 커져 보인다) */
  display: grid; grid-template-columns: repeat(auto-fill, 239px);
  justify-content: start;
  gap: 31px;
}

/* 목록 카드 — 재구매 카드보다 크고 텍스트 블록이 78px */
.lcard { text-align: left; display: grid; }
.lcard .media {
  aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: #A0A0A0;
}
.lcard .media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.lcard .name  { margin-top: 9px; font-size: 16px; line-height: 21px; font-weight: 600; }
.lcard .code  { margin-top: 1px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.lcard .price { margin-top: 4px; display: flex; align-items: baseline; gap: 7px; font-size: 14px; line-height: 22px; }
.lcard .price .tag { color: var(--price); font-weight: 700; }
.lcard .price .now { color: var(--price); font-size: 19px; font-weight: 800; }
.lcard .price .was { color: var(--price-strike); text-decoration: line-through; }
.lcard .price.locked { display: block; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.lcard .price.locked b { display: block; color: var(--ink); font-size: 15px; }
.lcard .cta {
  margin-top: 8px; min-height: 35px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font-size: 15px; font-weight: 700;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.lcard .cta:hover { border-color: var(--blue); color: var(--blue); }
.lcard .cta.done { background: var(--disabled-bg); border-color: transparent; color: #4A4A4A; }
/* 선택된 카드 — 시안 08 은 검정 테두리. 브랜드색 + 굵기로 바꾼다. */
.lcard[aria-current="true"] .media { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── 장바구니 패널 — 시안 11 ─────────────────────────────────────────────
 * 실측: 패널 폭 340, 배경 #F3F4F4, 아이템카드 y135..388, 요약카드 y546..834 */

.cart-panel {
  position: absolute; top: var(--bar-h); right: 0; bottom: 0; z-index: 45;
  width: var(--cart-w);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--rail);
  border-left: 1px solid var(--border);
  transform: translateX(0);
  transition: transform var(--dur) var(--ease);
}
.cart-panel[aria-hidden="true"] {
  transform: translateX(calc(100% + 48px));   /* 닫기 탭까지 화면 밖으로 */
  pointer-events: none;
}
[data-orientation="portrait"] .cart-panel {
  top: auto; left: 0; width: auto; height: 62%;
  border-left: 0; border-top: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  transform: translateY(0);
}
[data-orientation="portrait"] .cart-panel[aria-hidden="true"] {
  transform: translateY(calc(100% + 50px));
}

/* 시안 11 실측: 패널 좌측 가장자리에 50x140 닫기 탭 */
.cart-tab {
  /* 시안 11 실측: x817..864(48폭), 패널(854) 아래로 10px 물린다. 색은 레일 탭과 같다. */
  position: absolute; top: 50%; left: -37px; z-index: -1;
  transform: translateY(-50%);
  width: 48px; height: 140px;
  display: grid; place-items: center;
  padding-right: 9px;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  background: var(--tab-bg); color: var(--tab-ink);
}
.cart-tab:hover { background: var(--tab-bg-hover); }
[data-orientation="portrait"] .cart-tab {
  top: -50px; left: 50%; transform: translateX(-50%);
  width: 140px; height: 50px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -3px 12px rgba(22, 32, 46, .08);
}
[data-orientation="portrait"] .cart-tab .ic { transform: rotate(90deg); }

.cart-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px 12px;
}
.cart-head h2 { margin: 0; font-size: 22px; line-height: 30px; font-weight: 800; }
.cart-head .prev {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.cart-head .prev:hover { color: var(--blue); }

.cart-items { overflow-y: auto; padding: 0 20px 12px; display: grid; gap: 12px; align-content: start; }
.cart-items::-webkit-scrollbar { width: 6px; }
.cart-items::-webkit-scrollbar-thumb { background: #D9DADD; border-radius: 99px; }

.citem {
  padding: 14px 16px 16px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--border);
}
.citem-top { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.citem-top b { font-size: 18px; line-height: 24px; font-weight: 700; }
.citem-top button { color: var(--ink-3); }
.citem-top button:hover { color: var(--ink); }
.citem-body { margin-top: 10px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
.citem-body .thumb { width: 96px; height: 96px; border-radius: var(--r-sm); overflow: hidden; background: #EDEDED; }
.citem-body .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.citem-ctrl { display: grid; gap: 8px; align-content: start; }
.citem-ctrl select {
  font: inherit; min-height: 34px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); font-size: 16px; font-weight: 600;
}
.stepper {
  display: inline-grid; grid-template-columns: 34px minmax(38px, auto) 34px;
  align-items: center; justify-items: center;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  min-height: 34px;
}
.stepper button { width: 34px; height: 32px; display: grid; place-items: center; color: var(--ink); }
.stepper button:hover { color: var(--blue); }
.stepper span { font-size: 17px; font-weight: 700; }
.citem .line-price { font-size: 20px; line-height: 26px; font-weight: 800; }
.citem .bulk {
  margin-top: 12px; width: 100%; min-height: 45px;
  border-radius: var(--r-sm);
  background: var(--blue-soft); color: var(--blue-soft-ink);
  font-size: 15px; font-weight: 700;
}
.citem .bulk:hover { background: #D6E3FE; }
.citem .bulk[aria-pressed="true"] { background: var(--blue); color: #fff; }

.cart-empty { padding: 40px 20px; text-align: center; color: var(--ink-2); font-size: 14px; }

.cart-summary {
  padding: 20px; background: var(--surface);
  border-radius: 24px 0 0 0;   /* 시안 11: 좌상단만 둥글다 */
}
.cart-summary h3 { margin: 0 0 14px; font-size: 20px; line-height: 27px; font-weight: 800; }
.cart-summary dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; font-size: 16px; }
.cart-summary dt { color: var(--ink-2); }
.cart-summary dd { margin: 0; text-align: right; font-weight: 600; }
.cart-summary dd.minus { color: var(--price); }
.cart-summary .total {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
  display: flex; align-items: baseline; justify-content: space-between;
}
.cart-summary .total span { font-size: 17px; font-weight: 700; }
.cart-summary .total b { font-size: 27px; line-height: 34px; font-weight: 800; }
.cart-order {
  margin-top: 16px; width: 100%; min-height: 52px;
  border-radius: var(--r); background: var(--cta); color: #fff;
  font-size: 20px; line-height: 27px; font-weight: 800;
}
.cart-order:hover { background: var(--cta-pressed); }
.cart-order[disabled] { background: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed; }
.cart-guest { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.cart-guest b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }

/* ── 주문 현황 드로어 — 시안 12 ──────────────────────────────────────────
 * 실측: 폭 505(x0..503), 프로필 y96..230, 여신 y268.., 주문/배송 y452.. */

.dim {
  position: absolute; inset: 0; z-index: 50;
  background: var(--dim);
  opacity: 1; transition: opacity var(--dur) var(--ease);
}
.dim[aria-hidden="true"] { opacity: 0; pointer-events: none; }

.drawer {
  position: absolute; top: var(--bar-h); left: 0; bottom: 0; z-index: 51;
  width: var(--drawer-w);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--surface);
  box-shadow: 4px 0 24px rgba(22, 32, 46, .14);
  transform: translateX(0);
  transition: transform var(--dur) var(--ease);
}
.drawer[aria-hidden="true"] { transform: translateX(-100%); pointer-events: none; }
[data-orientation="portrait"] .drawer { width: calc(100% - 80px); }

.drawer-profile {
  position: relative;
  display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 18px;
  align-items: center;
  padding: 18px 24px 22px;
  /* 시안 12: 프로필 아래에 12px 회색 밴드(#F2F3F4)가 노출된다 */
  border-bottom: 12px solid #F2F3F4;
}
.drawer-profile .avatar {
  width: 70px; height: 70px; border-radius: 50%;
  display: grid; place-items: center;
  background: #DFDFDF; color: #9AA0A8;
}
.drawer-profile .who { display: grid; gap: 5px; }
.drawer-profile .org { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; }
.drawer-profile .tier {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--tier-bg); color: var(--tier-ink);
  font-size: 13px; font-weight: 700;
}
.drawer-profile .hello { font-size: 22px; line-height: 30px; font-weight: 700; }
.drawer-profile .hello b { font-weight: 800; }
.drawer-close { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink-2); }
.drawer-close:hover { color: var(--ink); }

.drawer-body { overflow-y: auto; padding: 22px 24px 41px; }
.drawer-body h3 { margin: 0 0 16px; font-size: 21px; line-height: 28px; font-weight: 800; }
.drawer-sec + .drawer-sec { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--border); }

.credit-bar {
  position: relative; height: 15px; border-radius: 99px;
  background: #E9EAE3; overflow: visible;
}
.credit-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--blue-raw-2); }
.credit-bar em {
  position: absolute; top: 50%; width: 30px; height: 30px; border-radius: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  background: #FBD355; color: #6B4F00;
  box-shadow: 0 0 0 3px #fff;
  font-style: normal; font-size: 15px; font-weight: 800;
}
.credit-nums { margin-top: 12px; display: flex; justify-content: space-between; gap: 16px; }
.credit-nums div { display: grid; gap: 2px; }
.credit-nums div:last-child { text-align: right; }
.credit-nums span { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.credit-nums b { font-size: 19px; line-height: 26px; font-weight: 800; }

.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; text-align: center; }
.pipeline b { display: block; font-size: 26px; font-weight: 800; color: var(--blue-raw-2); }
.pipeline span { font-size: 15px; line-height: 20px; color: var(--ink-2); }

.order-card {
  padding: 14px 16px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface);
}
.order-card + .order-card { margin-top: 10px; }
.order-card .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.order-card .row b { font-size: 17px; font-weight: 800; }
.order-card .eta { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; }
.order-card .eta .ic { color: var(--blue-raw); }
.order-card .no { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.order-more {
  margin-top: 12px; width: 100%; min-height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--surface-muted);
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.order-more:hover { background: #E3E6EB; }
.drawer-guest { font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.drawer-guest b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 5px; }

@media (prefers-reduced-motion: reduce) {
  .idle-promos img, .idle-cta, .idle-foot .idle-mute { animation: none; transform: none; }
  .idle-cta::after { display: none; }
}