/* ==========================================================================
   Meatwin Feature Sections (메인 롤링 하단 4개 기능 소개)
   - 흰색(.mw-feat--light) / 남색(.mw-feat--brand) 배경 교차
   - 짝수 섹션은 .mw-feat--reverse 로 그림/텍스트 좌우 반전
   ========================================================================== */

:root {
  --mw-feat-navy: #475a8e; /* 반전 블록 배경: 남색(#193172)을 흰색 20% 섞어 흐리게 (기능 소개 01·03, FAQ 공통) */
}

.mw-feat {
  --mw-navy: #193172;
  --mw-blue: #2563eb;
  position: relative;
  padding: 80px 24px;
  box-sizing: border-box;
  overflow: hidden;
  text-align: left;
  letter-spacing: -0.02em;
}
.mw-feat *, .mw-feat *::before, .mw-feat *::after { box-sizing: border-box; }
.mw-feat ul { margin: 0; padding: 0; }
.mw-feat p { margin: 0; }
.mw-feat strong, .mw-feat b { letter-spacing: -0.01em; } /* mw-style.css의 strong 자간(-1.25px) 보정 */

.mw-feat--light { background: #ffffff; color: #0f172a; }
.mw-feat--brand { background: var(--mw-feat-navy); color: #ffffff; }

/* 남색 섹션 배경 장식 */
.mw-feat--brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1.2px, transparent 1.2px);
  background-size: 28px 28px;
  pointer-events: none;
}
.mw-feat--brand::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}

.mw-feat__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}
.mw-feat--reverse .mw-feat__text { order: 2; }
.mw-feat--reverse .mw-feat__visual { order: 1; }

/* ---------- 텍스트 영역 ---------- */
.mw-feat__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--mw-blue);
  margin-bottom: 18px;
}
.mw-feat__eyebrow .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.1);
  font-size: 14px;
}
.mw-feat--brand .mw-feat__eyebrow { color: #93c5fd; }
.mw-feat--brand .mw-feat__eyebrow .num { background: rgba(255, 255, 255, 0.12); color: #fff; }

.mw-feat__title {
  margin: 0 0 20px;
  font-family: 'Noto Sans KR', sans-serif !important; /* mw-style.css의 h1~h6 Roboto 강제 지정 회피 */
  font-size: 38px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: inherit;
}
.mw-feat__title em { font-style: normal; color: var(--mw-blue); }
.mw-feat--brand .mw-feat__title em { color: #7dd3fc; }

.mw-feat__desc {
  font-size: 17px;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 36px !important;
}
.mw-feat--brand .mw-feat__desc { color: rgba(255, 255, 255, 0.75); }

.mw-feat__points { display: grid; gap: 14px; }
.mw-feat__points li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.mw-feat--brand .mw-feat__points li {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.mw-feat__points .ico {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.1);
  color: var(--mw-blue);
}
.mw-feat--brand .mw-feat__points .ico { background: rgba(125, 211, 252, 0.15); color: #7dd3fc; }
.mw-feat__points .ico svg { width: 20px; height: 20px; }
.mw-feat__points strong { display: block; font-size: 16px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.02em; }
.mw-feat__points li p { font-size: 14px; line-height: 1.55; color: #64748b; }
.mw-feat--brand .mw-feat__points li p { color: rgba(255, 255, 255, 0.65); }

.mw-feat a.mw-feat__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  font-size: 15px;
  font-weight: 700;
  color: var(--mw-blue);
}
.mw-feat--brand a.mw-feat__more { color: #7dd3fc; }
.mw-feat a.mw-feat__more:hover { text-decoration: underline; }

/* ---------- 그림 영역 공통 카드 ---------- */
.mw-feat__visual { position: relative; }
.mw-vcard {
  background: #ffffff;
  color: #0f172a;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.25);
  padding: 24px;
}
.mw-feat--brand .mw-vcard { border-color: transparent; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.5); }
.mw-vcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}
.mw-chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  white-space: nowrap;
}
.mw-chip.blue { background: rgba(37, 99, 235, 0.1); color: #1d4ed8; }
.mw-chip.gray { background: #f1f5f9; color: #64748b; }

/* ---------- 01 창고 통합 (허브) ---------- */
.mw-hub { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; }
.mw-hub__list { display: grid; gap: 12px; }
.mw-hub__wh {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 14px;
  font-weight: 600;
}
.mw-hub__wh span.box { margin-left: auto; font-size: 12px; color: #64748b; font-weight: 500; }
.mw-hub__wire { height: 100%; display: flex; align-items: center; justify-content: center; color: #94a3b8; }
.mw-hub__wire svg { width: 40px; height: 100%; min-height: 220px; }
.mw-hub__center {
  text-align: center;
  padding: 28px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  color: #fff;
}
.mw-hub__center .logo-m {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
}
.mw-hub__center small { display: block; font-size: 13px; opacity: 0.8; }
.mw-hub__center b { display: block; font-size: 28px; font-weight: 700; margin-top: 6px; letter-spacing: -0.02em; }

/* ---------- 02 이력제 (단계 흐름) ---------- */
.mw-flow { display: grid; gap: 0; }
.mw-flow__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.mw-flow__step + .mw-flow__step { margin-top: 28px; }
.mw-flow__step + .mw-flow__step::before {
  content: "";
  position: absolute;
  top: -29px;
  left: 37px;
  width: 2px;
  height: 28px;
  background: repeating-linear-gradient(to bottom, #94a3b8 0 4px, transparent 4px 8px);
}
.mw-flow__step .n {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mw-flow__step.done .n { background: #10b981; }
.mw-flow__step strong { display: block; font-size: 15px; }
.mw-flow__step small { display: block; font-size: 13px; color: #64748b; margin-top: 2px; }
.mw-flow__step .mw-chip { margin-left: auto; }

/* ---------- 03 전자출고증 & 웹팩스 (문서) ---------- */
.mw-doc { position: relative; padding: 10px 30px 30px 0; }
.mw-doc__paper {
  color: #0f172a;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.25);
  padding: 28px;
}
.mw-doc__title { text-align: center; font-size: 20px; font-weight: 700; letter-spacing: 0.3em; margin-bottom: 18px; }
.mw-doc__meta { display: flex; justify-content: space-between; font-size: 12px; color: #64748b; margin-bottom: 14px; }
.mw-doc__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mw-doc__table th, .mw-doc__table td { border: 1px solid #e2e8f0; padding: 8px 10px; text-align: left; }
.mw-doc__table th { background: #f8fafc; font-weight: 700; color: #334155; }
.mw-doc__table td.r, .mw-doc__table th.r { text-align: right; }
.mw-doc__stamp {
  float: right;
  margin-top: 16px;
  width: 64px;
  height: 64px;
  border: 3px solid #ef4444;
  border-radius: 50%;
  color: #ef4444;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-12deg);
  opacity: 0.85;
}
.mw-doc__paper::after { content: ""; display: block; clear: both; }
.mw-doc__badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.3);
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.mw-doc__badge .dot { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.mw-doc__badge.fax { right: 0; top: -12px; }
.mw-doc__badge.fax .dot { background: rgba(16, 185, 129, 0.12); }
.mw-doc__badge.talk { right: 30px; bottom: 0; }
.mw-doc__badge.talk .dot { background: #fee500; }

/* ---------- 04 모바일 앱 (폰) ---------- */
.mw-phone {
  width: 290px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 42px;
  background: #0f172a;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55);
}
.mw-phone__screen { border-radius: 32px; background: #f8fafc; overflow: hidden; color: #0f172a; }
.mw-phone__bar { height: 30px; display: flex; justify-content: center; align-items: center; }
.mw-phone__bar::before { content: ""; width: 80px; height: 6px; border-radius: 3px; background: #cbd5e1; }
.mw-phone__top { padding: 6px 18px 18px; background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); color: #fff; }
.mw-phone__top small { font-size: 12px; opacity: 0.8; }
.mw-phone__top b { display: block; font-size: 22px; font-weight: 700; margin-top: 4px; }
.mw-phone__list { padding: 14px; display: grid; gap: 10px; }
.mw-phone__item { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; }
.mw-phone__item strong { display: block; font-size: 13px; }
.mw-phone__item small { display: block; font-size: 12px; color: #64748b; margin-top: 2px; }
.mw-phone__item .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mw-phone__btn {
  margin: 4px 14px 18px;
  padding: 12px;
  border-radius: 12px;
  background: #2563eb;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

/* ---------- 반응형 ---------- */
@media (max-width: 800px) {
  .mw-feat { padding: 60px 20px; }
  .mw-feat__inner { grid-template-columns: 1fr; gap: 48px; }
  .mw-feat--reverse .mw-feat__text,
  .mw-feat--reverse .mw-feat__visual { order: 0; }
  .mw-feat__title { font-size: 30px; }
  .mw-feat__visual { max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 600px) {
  .mw-feat { padding: 48px 16px; }
  .mw-feat__title { font-size: 25px; }
  .mw-feat__desc { font-size: 15px; }
  .mw-vcard { padding: 18px; }
  .mw-hub { grid-template-columns: 1fr; gap: 12px; }
  .mw-hub__wire { display: none; }
  .mw-doc { padding: 0 0 70px; }
  .mw-doc__paper { padding: 20px 16px; }
  .mw-doc__badge.fax { top: auto; bottom: 0; right: auto; left: 0; }
  .mw-doc__badge.talk { right: 0; bottom: 0; }
  .mw-doc__badge { font-size: 12px; padding: 10px 12px; }
  .mw-phone { width: 260px; }
}

/* ---------- 메인 FAQ(미트윈 서비스?) 블록 여백 ---------- */
/* mw-style.css/.mw-responsive.css 의 공통 .section 여백(230px, 모바일 !important) 보다 우선 */
.section.mw-faq-section { padding: 80px 0 !important; }
@media (max-width: 800px) {
  .section.mw-faq-section { padding: 60px 0 !important; }
}
@media (max-width: 600px) {
  .section.mw-faq-section { padding: 48px 0 !important; }
}

/* ---------- 메인 FAQ(미트윈 서비스?) 블록 색상: 반전 블록과 같은 남색 ---------- */
/* 아코디언/더보기 버튼의 공통 스타일(mw-style.css)은 다른 페이지도 쓰므로 이 블록 안에서만 덮어씀 */
.section.mw-faq-section { background-color: var(--mw-feat-navy); }
.mw-faq-section .about-title { color: #ffffff; }
.mw-faq-section .accordion,
.mw-faq-section .accordion:hover,
.mw-faq-section .accordion.active {
  background-color: transparent;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.mw-faq-section .accordion:hover,
.mw-faq-section .accordion.active { background-color: rgba(255, 255, 255, 0.06); }
.mw-faq-section .accordion:after { color: #ffffff; margin-right: 0.8em; } /* +/- 오른쪽 끝 여백(공백 3칸 정도) */
.mw-faq-section .accordion { padding-top: 20px; padding-bottom: 20px; } /* 행간: 기존 30px → 20px */
.mw-faq-section .panel { background-color: transparent; }
.mw-faq-section .panel p {
  margin: 12px 0;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
}
.mw-faq-section a.button-more,
.mw-faq-section a.button-more:visited {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.7);
}
.mw-faq-section a.button-more:hover { background-color: rgba(255, 255, 255, 0.1); }