@charset "UTF-8";
/* ============================================================
   두레몰 피드백 부품 v1.0.0 (2026-09-05, F1)
   규격 = DureShop/FEEDBACK_GUIDE.md — "눌렸다는 확신 → 기다리는 동안 안심 → 결과를 한 문장으로"

   이 파일이 그리는 것
     §1 B  버튼 안 스피너      .dz-busy            (js/comm/feedback.js dzBusy)
     §1 C  섹션 오버레이        .dz-sec-busy        (dzSectionBusy)
     §1    검색 자동완성 아크    .dz-inp-busy        (입력창 오른쪽 끝)
     §1    더보기 꼬리          .dz-more            (목록 끝 24px 아크 + "불러오는 중")
     §2    토스트               .dz-toast           (dzToast)
     §3    확인·안내 창          .dz-dlg             (dzAlert / dzConfirm)
     §4    인라인 오류·빈 상태   .dz-field-err / .dz-empty

   원칙
     · 인라인 스타일 0건 — 전부 클래스. JS 는 클래스만 토글한다.
     · 스피너 아크는 화면 전환 표시(css/comm/page_loading.css v2.7)와 같은 문법·같은 색·같은 속도
       (conic-gradient + 링 마스크, 0.85s 등속). 크기만 14 / 24 / 32px 로 갈린다.
     · mask 미지원 브라우저는 테두리 아크로 폴백. prefers-reduced-motion 은 정지.
     · z-index 는 규격 고정값만 쓴다 — 토스트 2000 · 확인창 1000. (화면 전환 99999 는 기존 유지)
     · 기존 부품과 이름이 겹치지 않는다 : dure_perf 의 .dzbusy(하이픈 없음)·quick_order 의 .qodz-toast
       는 별개 부품이며 이 파일은 건드리지 않는다.
   ============================================================ */

/* ── §0 공통 토큰 ─────────────────────────────────────────────── */
:root {
  --dzfb-green: #3D6041;
  --dzfb-green-d: #2F4B33;
  --dzfb-ink: #1D271E;
  --dzfb-gray: #5F6B62;
  --dzfb-cream: #F7F7F4;
  --dzfb-line: #DFE5DC;
  --dzfb-red: #D8352A;
  --dzfb-mint: #BFE3C6;
  --dzfb-sh: 0 10px 30px -8px rgba(31, 42, 34, .28), 0 1px 2px rgba(31, 42, 34, .08);
  --dzfb-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ── 아크(스피너) 공용 — page_loading v2.7 과 동일 문법 ────────────
   --dzfb-w = 링 두께. 머리는 둥근 점, 꼬리는 옅어진다. 0.85s 등속. */
.dz-arc {
  display: block;
  box-sizing: border-box;
  position: relative;
  width: 24px;
  height: 24px;
  --dzfb-w: 3px;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(61, 96, 65, 0) 0deg, rgba(61, 96, 65, .12) 60deg, #3D6041 300deg, #3D6041 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--dzfb-w)), #000 calc(100% - var(--dzfb-w) + 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--dzfb-w)), #000 calc(100% - var(--dzfb-w) + 1px));
  animation: dzfbSpin .85s linear infinite;
}
.dz-arc::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(var(--dzfb-w) + .5px);
  height: calc(var(--dzfb-w) + .5px);
  margin-left: calc((var(--dzfb-w) + .5px) / -2);
  border-radius: 50%;
  background: #3D6041;
}
.dz-arc-14 { width: 14px; height: 14px; --dzfb-w: 2px; }
.dz-arc-24 { width: 24px; height: 24px; --dzfb-w: 3px; }
.dz-arc-32 { width: 32px; height: 32px; --dzfb-w: 3.5px; }

/* 글자색을 따라가는 아크 — 초록 채움 버튼(흰 글자) 위에서도 보인다(규격 §1 B "버튼 글자색") */
.dz-arc-cur {
  background: conic-gradient(from 0deg, transparent 0deg, currentColor 300deg, currentColor 360deg);
}
.dz-arc-cur::before { background: currentColor; }

@keyframes dzfbSpin { to { transform: rotate(360deg); } }


/* ═══ §1 B — 버튼 안 스피너 ═══════════════════════════════════════
   글자를 유지한 채 왼쪽에 14px 아크. 폭·높이 불변(아크는 absolute).
   .dz-busy-lock = 눌린 즉시(가드만, 겉모습 변화 0) / .dz-busy = 150ms 뒤(아크+불투명도).  */
.dz-busy-lock {
  position: relative;
  cursor: default;
}
.dz-busy {
  position: relative;
  opacity: .7;
}
.dz-busy-arc {
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -7px;
  pointer-events: none;
}
/* 좁은 버튼(썸네일 담기 아이콘 등)은 아크를 가운데로 */
.dz-busy-c > .dz-busy-arc {
  left: 50%;
  margin-left: -7px;
}
/* 2026-09-06 F2a : 카드 CSS 가 담기 버튼 **안의 자식을 통째로 숨기거나**(아이콘 칩 .pc_cart.cfm-ic —
   아크 폭이 0 으로 계산됨) 크기를 다시 잡는 곳이 있다. 아크만은 늘 규격대로 보이게 못 박는다.
   선택자는 이 부품 클래스 안으로 한정되어 다른 화면에 새지 않는다. */
.dz-busy-lock > i.dz-busy-arc.dz-arc {
  display: block;
  visibility: visible;
  opacity: 1;
  font-size: 0;
  line-height: 0;
  text-indent: 0;
  min-width: 0;
  max-width: none;
  min-height: 0;
  max-height: none;
  padding: 0;
  border: 0;
  z-index: 2;
}
.dz-busy-lock > i.dz-busy-arc.dz-arc-14 { width: 14px; height: 14px; }
.dz-busy-lock > i.dz-busy-arc.dz-arc-24 { width: 24px; height: 24px; }
/* 모바일 카드 아이콘 칩은 `body .cfm-ph > .cfm-ic > *{display:none!important}`(css/mobile/card_flat_m.css:85)
   로 자식을 통째로 숨긴다 → 아크 하나만 예외로 되살린다. 이 부품 클래스 안에서만 걸린다. */
.dz-busy-lock > i.dz-busy-arc.dz-arc { display: block !important; }

/* 아이콘 전용 버튼(가운데 아크)은 제 아이콘을 잠시 감춘다 — 아크와 겹치면 둘 다 안 읽힌다.
   글자 버튼(왼쪽 아크)은 규격대로 글자를 그대로 둔다. */
.dz-busy.dz-busy-c.dz-busy-lock { background-image: none !important; }   /* 카드 CSS 가 !important 로 아이콘을 그린다 */
.dz-busy.dz-busy-c * { visibility: hidden; }
.dz-busy.dz-busy-c > .dz-busy-arc,
.dz-busy.dz-busy-c > .dz-busy-arc * { visibility: visible; }


/* ═══ §1 C — 섹션 오버레이 ═══════════════════════════════════════
   해당 섹션만 흰 베일 58% + 32px 아크. 높이 유지(absolute → 레이아웃 점프 0). */
.dz-sec-host { position: relative; }
.dz-sec-veil {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .58);
  animation: dzfbFade .16s ease-out both;
}

/* 무한스크롤 더보기 꼬리 — 목록 끝 24px 아크 + 안내 한마디 */
.dz-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--dzfb-gray);
}

/* 검색 자동완성 — 입력창 오른쪽 끝 14px 아크(즉시) */
.dz-inp-busy { position: relative; }
.dz-inp-arc {
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -7px;
  pointer-events: none;
}


/* ═══ §2 토스트 ═══════════════════════════════════════════════════
   모바일 = 하단 바(--btmnav-h) 위 16px · PC = 하단 중앙 32px.
   먹 90% 배경 + 흰 글자 15/500, 라운드 999, 좌우 18, 높이 44(2줄이면 자동). */
.dz-toast {
  position: fixed;
  /* 가운데 정렬을 left:50%+translateX 로 하면 shrink-to-fit 가용폭이 "화면 절반"으로 잡혀
     짧은 문장도 2줄로 접힌다(09-05 실측 box=222·msg=60). left/right 0 + margin auto 로 잡는다. */
  left: 0;
  right: 0;
  margin: 0 auto;
  width: -webkit-fit-content;
  width: fit-content;
  bottom: calc(var(--btmnav-h, 54px) + env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 44px;
  min-width: 200px;
  max-width: calc(100% - 32px);
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(29, 39, 30, .9);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.01em;
  box-shadow: var(--dzfb-sh);
  cursor: pointer;
  transform: translateY(12px);
  opacity: 0;
  transition: transform .16s var(--dzfb-ease), opacity .16s var(--dzfb-ease);
}
.dz-toast.is-on {
  transform: none;
  opacity: 1;
}
.dz-toast.is-off {
  transform: translateY(8px);
  opacity: 0;
  transition-duration: .12s;
}
.dz-toast-msg {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 0;          /* 1줄이면 min-height 44px 가 이긴다 → 정확히 44px, 2줄이면 자동으로 늘어난다 */
  word-break: keep-all;
}
/* 오류는 아이콘 대신 첫 단어를 굵게 */
.dz-toast-strong { font-weight: 700; }
/* 성공 체크(흰) 1종만 */
.dz-toast-ico {
  flex: none;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2218%22%20height=%2218%22%20viewBox=%220%200%2018%2018%22%3E%3Cpath%20d=%22M3.5%209.4l3.6%203.6L14.6%205.5%22%20fill=%22none%22%20stroke=%22%23ffffff%22%20stroke-width=%222.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
.dz-toast-act {
  flex: none;
  margin-right: -8px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--dzfb-mint);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.dz-toast-act:hover,
.dz-toast-act:focus { text-decoration: none; }

@media (min-width: 768px) {
  .dz-toast { bottom: 32px; max-width: calc(100% - 40px); }
}

/* 옵션 1개 — 열려 있는 레이어 위로 띄울 때만 쓴다 : dzToast(msg, {top:true})
   레이어팝업(.layer_popmsg_wrap z 1102~1103)이 열린 채 담기 결과를 알려야 하는 화면에서,
   화면 아래쪽이 베일에 덮여 토스트가 "깔린 것처럼" 보이는 것을 막는다.
   기본값(하단·z 2000)은 규격 그대로 두고, 이 클래스가 붙을 때만 위로 올라간다. */
.dz-toast--top {
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  bottom: auto;
  z-index: 2400;
  transform: translateY(-12px);
}
.dz-toast--top.is-on { transform: none; }
.dz-toast--top.is-off { transform: translateY(-8px); }
@media (min-width: 768px) {
  .dz-toast--top { top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .dz-toast--top,
  .dz-toast--top.is-on,
  .dz-toast--top.is-off { transform: none; }
}


/* ═══ §3 확인·안내 창 ══════════════════════════════════════════════
   중앙 카드 16 라운드 · 폭 모바일 화면-40 / PC 360 · 패딩 24 · 뒤 베일 먹 40%.
   제목 라벨 없음 — 첫 문장이 제목이다. */
.dz-dlg-veil {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(29, 39, 30, .4);
  animation: dzfbFade .12s ease-out both;
}
.dz-dlg {
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  padding: 24px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--dzfb-sh);
  animation: dzfbPop .18s var(--dzfb-ease) both;
}
.dz-dlg-t {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--dzfb-ink);
  letter-spacing: -.01em;
  word-break: keep-all;
}
.dz-dlg-d {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dzfb-gray);
  letter-spacing: -.01em;
  word-break: keep-all;
  white-space: pre-line;
}
.dz-dlg-btns {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.dz-dlg-btn {
  flex: 1 1 0;
  box-sizing: border-box;
  height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease;
}
.dz-dlg-ok {
  background: var(--dzfb-green);
  color: #fff;
}
.dz-dlg-ok:hover,
.dz-dlg-ok:active { background: var(--dzfb-green-d); }
/* 위험 행동(삭제·주문 취소) : 빨강 채움 금지 → 먹 배경 */
.dz-dlg-ok.is-danger { background: var(--dzfb-ink); }
.dz-dlg-ok.is-danger:hover,
.dz-dlg-ok.is-danger:active { background: #000; }
.dz-dlg-cancel {
  background: #fff;
  color: var(--dzfb-ink);
  box-shadow: inset 0 0 0 1px var(--dzfb-line);
}
.dz-dlg-cancel:hover,
.dz-dlg-cancel:active { background: var(--dzfb-cream); }
/* 안내창(버튼 1개)은 꽉 찬 한 줄 */
.dz-dlg-btns.is-one .dz-dlg-btn { flex: 1 1 100%; }

/* 창이 열려 있는 동안 뒤 본문 스크롤 잠금 */
html.dz-lock, body.dz-lock { overflow: hidden; }


/* ═══ §4 인라인 오류 · 빈 상태 ═══════════════════════════════════ */
.dz-field-err {
  display: block;
  margin: 6px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--dzfb-red);
  letter-spacing: -.01em;
  word-break: keep-all;
}
.dz-field-invalid {
  border: 1px solid var(--dzfb-red) !important;
}

.dz-empty {
  padding: 44px 20px;
  text-align: center;
}
.dz-empty-t {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--dzfb-ink);
  letter-spacing: -.01em;
}
.dz-empty-d {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dzfb-gray);
  letter-spacing: -.01em;
}
.dz-empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  margin-top: 18px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: var(--dzfb-green);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
}
.dz-empty-btn:hover,
.dz-empty-btn:active { background: var(--dzfb-green-d); color: #fff; }


/* ── 공용 키프레임 ───────────────────────────────────────────────── */
@keyframes dzfbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dzfbPop  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }


/* ── mask 미지원 브라우저: 테두리 아크로 폴백(page_loading 과 같은 처리) ── */
@supports not ((mask: radial-gradient(#000, #0000)) or (-webkit-mask: radial-gradient(#000, #0000))) {
  .dz-arc {
    background: none;
    border: var(--dzfb-w) solid rgba(61, 96, 65, .15);
    border-top-color: #3D6041;
    border-right-color: #3D6041;
  }
  .dz-arc::before { content: none; }
  .dz-arc-cur {
    border-color: rgba(255, 255, 255, .25);
    border-top-color: currentColor;
    border-right-color: currentColor;
  }
}


/* ── 접근성: 모션 최소화 — 회전 정지, 등장 애니메이션 없음 ── */
@media (prefers-reduced-motion: reduce) {
  .dz-arc { animation: none; }
  .dz-sec-veil { animation: none; }
  .dz-toast { transition: opacity .12s linear; transform: none; }
  .dz-toast.is-on { transform: none; }
  .dz-toast.is-off { transform: none; }
  .dz-dlg-veil { animation: none; }
  .dz-dlg { animation: none; }
}