/* ============================================================
   메인 배너 (3단 서비스 배너 + 전체폭 업무별 배너)
   main.php 에서만 로드. mb- 접두사라 다른 CSS 와 충돌 없음
   ============================================================ */
:root{
  --mb-ink:#23344c;
  --mb-muted:#64748b;
  --mb-line:#e2e8f0;
  --mb-shell:1180px;
}

.mb-shell{
  width:min(var(--mb-shell), calc(100% - 40px));
  margin:0 auto;
}

/* ── 1. 상단 3단 배너 ───────────────────────────────── */
.mb-service-banners{ padding:24px 0 18px; background:#fff; }
.mb-service-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.mb-service-card{
  --card-color:#247f79;
  --card-soft:#e8f6f4;
  --card-line:#a9d8d3;
  --watermark-size:165px;
  --watermark-opacity:.14;
  --watermark-bottom:-23px;
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:220px;
  overflow:hidden;
  padding:24px;
  border:2px solid var(--card-line);
  border-radius:0;
  background:#fff;
  color:var(--mb-ink);
  box-shadow:0 12px 28px rgba(36,50,71,.075);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.mb-service-card:hover{
  transform:translateY(-3px);
  background:linear-gradient(135deg, #fff 55%, var(--card-soft));
  box-shadow:0 19px 38px rgba(36,50,71,.13);
}
.mb-service-card:focus-visible{
  outline:4px solid color-mix(in srgb, var(--card-color) 20%, transparent);
  outline-offset:3px;
}
.mb-card--about{ --card-color:#247f79; --card-soft:#e8f6f4; --card-line:#a9d8d3; }
.mb-card--inquiry{ --card-color:#426f9f; --card-soft:#edf3fa; --card-line:#b7cce3; }
.mb-card--dodon{ --card-color:#9a536c; --card-soft:#faeef2; --card-line:#dfb9c6; }
.mb-card-watermark{
  position:absolute;
  z-index:0;
  right:-3px;
  bottom:var(--watermark-bottom);
  width:var(--watermark-size);
  height:var(--watermark-size);
  color:var(--card-color);
  opacity:var(--watermark-opacity);
  transform-origin:center right;
  pointer-events:none;
  will-change:width, height, bottom, opacity;
}
.mb-card-watermark svg{ width:100%; height:100%; }
.mb-card-head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.mb-card-icon{
  display:grid;
  place-items:center;
  flex:0 0 68px;
  width:68px;
  height:68px;
  border:1px solid var(--card-line);
  border-radius:17px;
  background:var(--card-soft);
  color:var(--card-color);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(36,50,71,.07);
}
.mb-card-icon svg{ width:36px; height:36px; stroke-linecap:round; stroke-linejoin:round; }
.mb-card-copy{ display:grid; min-width:0; }
.mb-card-title{
  display:block;
  margin:2px 0 6px;
  color:#203249;
  font-size:29px;
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.055em;
}
.mb-card-description{
  display:block;
  max-width:260px;
  margin:0;
  color:#617287;
  font-size:16px;
  font-weight:700;
  line-height:1.5;
}
.mb-card-action{
  position:relative;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:142px;
  min-height:48px;
  margin-top:auto;
  align-self:flex-start;
  padding:10px 20px;
  border:1px solid var(--card-color);
  border-radius:999px;
  background:var(--card-color);
  color:#fff;
  font-size:15px;
  font-weight:900;
  box-shadow:0 9px 18px color-mix(in srgb, var(--card-color) 22%, transparent);
}
.mb-card-action span{ font-size:18px; transition:transform .18s ease; }
.mb-service-card:hover .mb-card-action span{ transform:translateX(4px); }

/* 도돈 캐릭터 PNG — 카드 우측 하단 */
.mb-dodon-character{
  position:absolute;
  z-index:1;
  right:-10px;
  bottom:8px;
  width:205px;
  pointer-events:none;
}
.mb-dodon-character img{
  width:100%;
  filter:drop-shadow(0 8px 9px rgba(90,48,62,.12));
}
.mb-card--dodon .mb-card-head{ padding-right:44px; }
.mb-card--dodon .mb-card-description{ max-width:225px; }



/* ── 반응형 ─────────────────────────────────────────── */
@media (max-width:1100px){
  .mb-service-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .mb-card--dodon{ grid-column:1 / -1; }
}
@media (max-width:720px){
  .mb-shell{ width:min(var(--mb-shell), calc(100% - 28px)); }
  .mb-service-banners{ padding:14px 0; }
  .mb-service-grid{ grid-template-columns:1fr; }
  .mb-card--dodon{ grid-column:auto; }
  .mb-service-card{ min-height:210px; padding:20px; border-radius:0; }
  .mb-card-icon{ flex-basis:58px; width:58px; height:58px; border-radius:14px; }
  .mb-card-icon svg{ width:31px; height:31px; }
  .mb-card-title{ font-size:25px; }
  .mb-card-description{ font-size:15px; }
  .mb-dodon-character{ width:225px; }
}
@media (max-width:480px){
  .mb-card-head{ gap:12px; }
  .mb-card--dodon .mb-card-head{ padding-right:0; }
  .mb-card--dodon .mb-card-description{ max-width:190px; }
  .mb-dodon-character{ right:-6px; bottom:10px; width:205px; }
  .mb-card-action{ min-height:44px; padding:8px 16px; }
}