@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* ============================================================
   D2D 항공화물 금지물품 안내 — Step3 트리거 버튼 + 4페이지 바텀시트
   Figma node 79-848 픽셀 정합. 색/폰트/간격/아이콘 모두 Figma 원본.
   아이콘·일러스트는 /images/d2d/aircargo/*.svg (Figma export).
   클래스는 d2dac- 프리픽스로 스코프(.d2d-ac-list 등과 충돌 방지).
   ============================================================ */
:root {
  --d2dac-purple: #572776;        /* 메인 퍼플 (진행 현재단계 / 버튼) */
  --d2dac-purple-past: #AB7EC8;   /* 진행 지난단계 */
  --d2dac-track: #E8E1ED;         /* 진행 빈 트랙 */
  --d2dac-red: #BC4D47;           /* 금지/빨강 헤더/강조 */
  --d2dac-green: #66A678;         /* 허용 초록 헤더 */
  --d2dac-amber: #CB8000;         /* 조건부 amber 헤더 */
  --d2dac-cond-bg: #F6F5D4;       /* Conditional 태그 배경 */
  --d2dac-cond-text: #A39D00;     /* Conditional 태그 글자 */
  --d2dac-cream: #FCF8E3;         /* 경고 박스 배경 */
  --d2dac-ink: #222222;           /* 본문 진한 글자 */
  --d2dac-body: #4B4B4B;          /* 리드/박스 본문 */
  --d2dac-note: #696969;          /* 보조 노트(11px) */
  --d2dac-divider: #E4E4E4;       /* 구분선 */
}

/* ===== Step3 트리거 버튼 (Figma 외 — 진입점. 퍼플만 정합) ===== */
.d2dac-check { margin-top: 22px; font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif; }
.d2dac-check .d2dac-sep { height: 1px; background: var(--d2dac-divider); margin: 0 0 16px; }
.d2dac-check .d2dac-box { background: #FEF6F7; border: 1px solid #F6E4E7; border-radius: 12px; padding: 22px 16px; }
.d2dac-check .d2dac-lab { font-weight: 700; font-size: 19px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; color: var(--d2dac-ink); }
.d2dac-check .d2dac-warn { font-size: 19px; line-height: 1; }
.d2dac-check .d2dac-lab .req { color: var(--d2dac-red); font-weight: 700; }
.d2dac-trigger {
  width: 100%; display: flex; align-items: center; gap: 12px;
  border: none; background: var(--d2dac-purple); color: #fff;
  font-family: inherit; font-weight: 700; font-size: 14px;
  border-radius: 12px; padding: 14px 16px; cursor: pointer; text-align: left;
  box-shadow: 0 6px 16px rgba(87, 39, 118, .26); transition: .16s;
}
.d2dac-trigger:hover { opacity: .94; }
.d2dac-trigger .d2dac-tic { font-size: 18px; line-height: 1; }
.d2dac-trigger .d2dac-tmain { flex: 1; }
.d2dac-trigger .d2dac-tarrow { font-size: 22px; line-height: 1; }
.d2dac-trigger.done { background: #eaf7ee; color: var(--d2dac-green); box-shadow: none; }
.d2dac-trigger.done .d2dac-tarrow { display: none; }
.d2dac-hint { font-size: 13px; color: var(--d2dac-red); margin: 10px 2px 0; font-weight: 500; }
.d2dac-hint.ok { color: var(--d2dac-green); }
#actions-3 .d2d-btn-next:disabled { background: #dcdce1; color: #a2a2ab; box-shadow: none; cursor: not-allowed; opacity: 1; }

/* ===== 바텀시트 모달 ===== */
.d2dac-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5);
  display: none; align-items: flex-end; justify-content: center; z-index: 10000;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  letter-spacing: -0.02em;
}
.d2dac-overlay.open { display: flex; }
.d2dac-sheet {
  background: #fff; width: 100%; max-width: 480px; max-height: 92vh;
  border-radius: 16px 16px 0 0; display: flex; flex-direction: column;
  overflow: hidden; animation: d2dac-rise .28s ease;
}
@keyframes d2dac-rise { from { transform: translateY(40px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.d2dac-grip { width: 40px; height: 4px; background: #D9D9D9; border-radius: 17px; margin: 13px auto 0; flex: 0 0 auto; }
.d2dac-body { padding: 23px 20px 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.d2dac-page { display: none; }
.d2dac-page.active { display: block; }

/* 제목 행 (제목 + 닫기 X) */
.d2dac-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.d2dac-h2 { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--d2dac-ink); margin: 0; }
.d2dac-x { background: none; border: none; font-size: 16px; line-height: 1; color: #686868; cursor: pointer; padding: 3px; margin: 0 -3px 0 0; flex: 0 0 auto; }
.d2dac-lead { color: var(--d2dac-body); font-size: 14px; font-weight: 500; line-height: 1.3; margin: 8px 0 0; }

/* 진행바 (4 세그먼트 + n/4) */
.d2dac-prog { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.d2dac-prog .bar { display: flex; flex: 1; gap: 4px; }
.d2dac-prog .bar i { flex: 1; height: 4px; border-radius: 2px; background: var(--d2dac-track); }
.d2dac-prog .bar i.past { background: var(--d2dac-purple-past); }
.d2dac-prog .bar i.cur { background: var(--d2dac-purple); }
.d2dac-prog .cnt { flex: 0 0 auto; font-size: 10px; font-weight: 400; color: var(--d2dac-body); }

/* p1 X-ray 일러스트 (Figma SVG, 320x175, bg 포함) */
.d2dac-illust { display: block; width: 100%; height: auto; margin-top: 16px; }

/* 본문 텍스트 (p1) */
.d2dac-text { font-size: 16px; font-weight: 500; line-height: 1.25; color: var(--d2dac-body); margin: 16px 0 0; }
.d2dac-text + .d2dac-text { margin-top: 14px; }
.d2dac-overlay b { font-weight: 700; }
.d2dac-overlay .red { color: var(--d2dac-red); font-weight: 700; }
/* page1 본문 강조는 Figma 상 더 선명한 빨강(#DE0000) — 다른 페이지(#BC4D47)와 별개 */
.d2dac-page[data-page="1"] .red { color: #DE0000; }

/* 경고(크림) 박스 */
.d2dac-yellow { background: var(--d2dac-cream); border-radius: 8px; padding: 12px; margin-top: 16px; }
.d2dac-yellow .yh { font-weight: 700; font-size: 16px; color: var(--d2dac-red); display: flex; align-items: center; gap: 4px; }
.d2dac-yellow p { margin: 8px 0 0; font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--d2dac-body); }
.d2dac-yellow.stop { margin-top: 14px; }
.d2dac-heat-ic { width: 12px; height: 12px; display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* 그룹 헤더 (• 점 prefix) */
.d2dac-grouphd { font-weight: 700; font-size: 16px; margin-top: 16px; display: flex; align-items: center; gap: 7px; }
.d2dac-grouphd::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.d2dac-grouphd.no { color: var(--d2dac-red); }
.d2dac-grouphd.cond { color: var(--d2dac-amber); }
.d2dac-grouphd.ok { color: var(--d2dac-green); }
.d2dac-grouphd small { font-weight: 500; font-size: 11px; color: var(--d2dac-note); }

/* 금지/허용 아이템 행 */
.d2dac-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--d2dac-divider); }
.d2dac-item .nm { font-size: 14px; font-weight: 500; color: var(--d2dac-ink); }
.d2dac-item .nm .note { font-weight: 500; font-size: 11px; color: var(--d2dac-note); margin-left: 6px; }
.d2dac-item .nm .note b { font-weight: 700; color: var(--d2dac-note); }
.d2dac-ban { width: 14px; height: 14px; flex: 0 0 auto; display: block; }
.d2dac-tag { font-size: 10px; font-weight: 700; color: var(--d2dac-cond-text); background: var(--d2dac-cond-bg); border-radius: 14px; padding: 2px 7px; flex: 0 0 auto; white-space: nowrap; }

/* p4 카테고리 카드 (아이콘 SVG 40x40 = 박스 포함) */
.d2dac-cat { display: flex; align-items: center; gap: 20px; padding: 12px 0; border-top: 1px solid var(--d2dac-divider); }
.d2dac-cat:last-of-type { border-bottom: 1px solid var(--d2dac-divider); }
.d2dac-cat .ic { width: 40px; height: 40px; flex: 0 0 auto; display: block; }
.d2dac-cat .ct { font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--d2dac-note); }
.d2dac-cat .ct strong { display: block; font-weight: 700; font-size: 14px; color: var(--d2dac-ink); margin-bottom: 2px; }

/* p4 동의 체크박스 (Figma: 24x24, 체크 시 #512972) */
.d2dac-checks { margin-top: 16px; }
.d2dac-chk { display: flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; font-size: 14px; font-weight: 400; line-height: 1.2; color: var(--d2dac-ink); }
.d2dac-chk .box { width: 24px; height: 24px; flex: 0 0 auto; border: 2px solid #DADADA; border-radius: 4px; background: #fff; position: relative; transition: .15s; }
.d2dac-chk.on .box { background: #512972; border-color: #512972; }
.d2dac-chk.on .box::after { content: ""; position: absolute; left: 7.5px; top: 3.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.d2dac-chk b { font-weight: 700; }

/* 하단 고정 버튼 */
.d2dac-foot { display: flex; gap: 8px; padding: 16px 20px 22px; border-top: 1px solid var(--d2dac-divider); background: #fff; flex: 0 0 auto; }
.d2dac-btn { font-family: inherit; font-weight: 700; font-size: 14px; border: none; cursor: pointer; border-radius: 8px; height: 40px; }
.d2dac-btn.back { flex: 0 0 auto; min-width: 76px; background: #fff; border: 1px solid #D8D8D8; color: var(--d2dac-ink); padding: 0 24px; }
.d2dac-btn.fwd { flex: 1; background: var(--d2dac-purple); color: #fff; padding: 0 28px; }
.d2dac-btn.fwd:disabled { background: #dcdce1; color: #a2a2ab; cursor: not-allowed; }

/* PC(≥768px): 하단 시트 → 중앙 모달 (기존 .bottomsheet 규칙과 동일 브레이크포인트) */
@media (min-width: 768px) {
  .d2dac-overlay { align-items: center; }
  .d2dac-sheet { width: 90%; max-width: 500px; border-radius: 16px; max-height: 80vh; animation: d2dac-zoom .2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .d2dac-grip { display: none; }
  .d2dac-body { padding-top: 20px; }
}
@keyframes d2dac-zoom { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }