/* ============================================================
   Microsoft 페이지 스타일 — accent #0078D4
   ============================================================ */
.ms-page {
  --ms: #0078D4;
  --ms-deep: #005A9E;
  --ms-soft: #EAF4FC;
  --ms-tint: #F3F9FE;
}

/* 공통 */
.ms-logo { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; flex-shrink: 0; vertical-align: -2px; }
.ms-page .ad-hero-badge { white-space: nowrap; }
.ms-accent { color: var(--ms); }
.ms-eyebrow { color: var(--ms) !important; }
.ms-crumb-cur { color: var(--ms-deep); }
.ad-subheader.is-scrolled .ms-crumb-cur { color: var(--ms-deep); }
.ms-cta-btn-header { background: var(--ms); }
.ms-cta-btn-header:hover { background: var(--ms-deep); }
.ms-tag-num { color: var(--ms); }
.ms-section-tint { background: var(--ms-tint); }
.ms-sec-note { font-size: 15px; color: #515154; line-height: 1.7; margin-top: 14px; max-width: 640px; word-break: keep-all; }
.ms-check { color: var(--ms); font-weight: 700; flex-shrink: 0; }

/* 칩바 */
.ms-chip { border-color: rgba(0,120,212,.25); white-space: nowrap; }
.ms-chip-ready { color: var(--ms-deep); }
.ms-chip-ready:hover { background: var(--ms-soft); border-color: var(--ms); }
.ms-chip-active { background: var(--ms); color: #fff; border-color: var(--ms); }

/* 최상단 투명 헤더에서는 crumb-cur도 밝게 */
.ms-page .ad-subheader:not(.is-scrolled) .ms-crumb-cur { color: #fff; }

/* 다크 히어로 — 한컴/Adobe와 동일한 톤 */
.ms-hero {
  background: linear-gradient(160deg, #071F35 0%, #0B4F86 60%, #16181D 100%) !important;
}
.ms-hero::before {
  background: radial-gradient(circle, rgba(0,120,212,.28), transparent 65%) !important;
}
.ms-copilot-hero {
  background: linear-gradient(160deg, #17103E 0%, #3A2380 55%, #0B4F86 130%) !important;
}
.ms-copilot-hero::before {
  background: radial-gradient(circle, rgba(150,110,255,.3), transparent 65%) !important;
}
.ms-server-hero {
  background: linear-gradient(160deg, #0B1622 0%, #12324D 60%, #0B4F86 130%) !important;
}
.ms-server-hero::before {
  background: radial-gradient(circle, rgba(56,189,248,.22), transparent 65%) !important;
}

/* 다크 히어로 위 칩바 */
.ms-hero .ms-chip { border-color: rgba(255,255,255,.28); }
.ms-hero .ms-chip-ready { color: rgba(255,255,255,.85); }
.ms-hero .ms-chip-ready:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.ms-hero .ms-chip-active { background: #fff; color: var(--ms-deep); border-color: #fff; }
.ms-hero .ms-accent { color: #6CB8F2; }

/* 브랜드 메인 */
.ms-brand-hero {
  padding: 140px 0 90px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #071F35 0%, #0A3E68 55%, #0B4F86 100%);
}
.ms-brand-hero::before {
  content: ""; position: absolute; top: -30%; right: -8%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(0,164,239,.25), transparent 65%);
  filter: blur(50px); pointer-events: none;
}
.ms-brand-hero .wrap { position: relative; z-index: 2; }
.ms-brand-head { max-width: 760px; margin-bottom: 56px; }
.ms-brand-logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.ms-brand-name { font-size: 22px; font-weight: 700; color: rgba(255,255,255,.9); letter-spacing: -0.01em; }
.ms-brand-head h1 { font-size: clamp(38px, 4.6vw, 56px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; color: #fff; margin-bottom: 22px; word-break: keep-all; }
.ms-brand-head p { font-size: 17px; color: rgba(255,255,255,.72); line-height: 1.7; word-break: keep-all; }

.ms-brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ms-brand-card {
  text-align: left; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 18px;
  padding: 30px 28px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column;
  min-height: 240px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ms-brand-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,60,110,.12); border-color: rgba(0,120,212,.4); }
.ms-brand-card-top { margin-bottom: 18px; }
.ms-product-badge {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--ms-deep); background: var(--ms-soft); border-radius: 999px; padding: 6px 14px;
}
.ms-brand-card-name { font-size: 21px; font-weight: 800; color: #1D1D1F; letter-spacing: -0.01em; margin-bottom: 10px; }
.ms-brand-card-desc { font-size: 14.5px; color: #515154; line-height: 1.6; word-break: keep-all; }
.ms-brand-card-footer {
  margin-top: auto; padding-top: 22px; font-size: 14px; font-weight: 700; color: #E8590C;
  display: inline-flex; align-items: center; gap: 6px;
}
.ms-brand-card-footer-arrow { transition: transform .2s; color: #E8590C; }
.ms-brand-card:hover .ms-brand-card-footer-arrow { transform: translateX(4px); }

.ms-trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,.15); }
.ms-trust-val { font-size: 26px; font-weight: 800; color: #6CB8F2; letter-spacing: -0.01em; }
.ms-trust-lbl { font-size: 13.5px; color: rgba(255,255,255,.65); margin-top: 6px; word-break: keep-all; }

/* ── 히어로 비주얼 ── */
.ms-hero-visual {
  background: linear-gradient(160deg, #0B3A66 0%, #0F5A9E 60%, #0078D4 100%);
  border-radius: 20px; padding: 32px 32px 96px; color: #fff;
}
.ms-hero-visual-label { font-size: 14px; font-weight: 700; opacity: .85; margin-bottom: 20px; }
.ms-hero-apps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ms-hero-app { text-align: center; }
.ms-hero-app-ic {
  width: 46px; height: 46px; margin: 0 auto 6px; border-radius: 10px;
  background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; padding: 7px;
}
.ms-hero-app-ic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ms-hero-app-nm { font-size: 11px; opacity: .8; }

/* ── 플랜 카드 ── */
.ms-plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.ms-ed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.ms-plan-card {
  position: relative; background: #fff; border: 1px solid rgba(0,0,0,.09); border-radius: 16px;
  padding: 26px 22px; display: flex; flex-direction: column;
}
.ms-plan-highlight { border-color: var(--ms); box-shadow: 0 10px 30px rgba(0,120,212,.12); }
.ms-plan-rec {
  position: absolute; top: -11px; left: 22px; background: var(--ms); color: #fff;
  font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}
.ms-plan-name { font-size: 17px; font-weight: 800; color: #1D1D1F; margin-bottom: 14px; letter-spacing: -0.01em; }
.ms-plan-apps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ms-app-chip {
  font-size: 11px; font-weight: 600; color: var(--ms-deep); background: var(--ms-soft);
  padding: 3px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
}
.ms-chip-ic { width: 13px; height: 13px; object-fit: contain; flex-shrink: 0; }
.ms-cmp-ic { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; vertical-align: -3px; margin-right: 8px; display: inline-block; }
.ms-plan-feats { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
.ms-plan-feat { display: flex; gap: 8px; font-size: 13.5px; color: #3A3A3C; line-height: 1.5; word-break: keep-all; }
.ms-plan-btn {
  margin-top: auto; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  padding: 11px 0; border-radius: 10px; border: 1px solid rgba(0,120,212,.35);
  background: #fff; color: var(--ms-deep); transition: background .2s, color .2s;
}
.ms-plan-btn:hover { background: var(--ms-soft); }
.ms-plan-btn-pri { background: var(--ms); border-color: var(--ms); color: #fff; }
.ms-plan-btn-pri:hover { background: var(--ms-deep); }
.ms-ed-target { font-size: 13.5px; color: #86868B; margin-bottom: 16px; }

/* ── 비교표 ── */
.ms-compare { margin-top: 40px; border: 1px solid rgba(0,0,0,.09); border-radius: 16px; overflow: hidden; background: #fff; }
.ms-compare-head, .ms-compare-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; }
.ms-compare-head { background: #F5F5F7; font-size: 13px; font-weight: 700; color: #515154; }
.ms-compare-head > div, .ms-compare-row > div { padding: 16px 20px; }
.ms-compare-row { border-top: 1px solid rgba(0,0,0,.06); font-size: 14px; color: #3A3A3C; word-break: keep-all; }
.ms-compare-row .ms-cmp-c1 { font-weight: 700; color: #1D1D1F; }
.ms-compare-head .ms-cmp-c3, .ms-compare-row .ms-cmp-c3 { background: var(--ms-tint); color: var(--ms-deep); font-weight: 600; }
.ms-compare-head .ms-cmp-c3 { font-weight: 800; }

/* ── 비교표 v2 — 항목 중앙 배치 · 컬러 강조 ── */
.ms-cmp2 { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; }
.ms-cmp2-headrow, .ms-cmp2-row { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 16px; align-items: stretch; }
.ms-cmp2-head { border-radius: 14px; padding: 18px 20px; text-align: center; font-size: 16px; font-weight: 800; color: #FFF; background: var(--ms-deep); letter-spacing: -0.01em; }
.ms-cmp2-head-spacer { visibility: hidden; }
.ms-cmp2-val {
  border-radius: 14px; padding: 20px; background: #F5F5F7; box-shadow: 0 2px 10px rgba(0,0,0,.05);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 15px; font-weight: 600; color: #3A3A3C; word-break: keep-all;
}
.ms-cmp2-item {
  border-radius: 14px; padding: 20px; background: var(--ms-tint); box-shadow: 0 2px 10px rgba(0,0,0,.05);
  display: flex; align-items: center; justify-content: center; text-align: center; gap: 8px;
  font-size: 16px; font-weight: 800; color: var(--ms-deep); word-break: keep-all;
}
@media (max-width: 700px) {
  .ms-cmp2-headrow, .ms-cmp2-row { grid-template-columns: 1fr; gap: 10px; }
  .ms-cmp2-head-spacer { display: none; }
  .ms-cmp2-item { order: -1; }
}

/* ── 핵심 서비스 ── */
.ms-svc-list { display: flex; flex-direction: column; gap: 24px; }
.ms-svc-block { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 18px; padding: 34px 32px; }
.ms-svc-head { display: flex; align-items: center; gap: 16px; }
.ms-svc-ic {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px; background: var(--ms-tint);
  border: 1px solid rgba(0,120,212,.12); display: flex; align-items: center; justify-content: center; padding: 8px;
}
.ms-svc-ic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ms-svc-tag { font-size: 12.5px; font-weight: 700; color: var(--ms); margin-bottom: 6px; }
.ms-svc-name { font-size: 22px; font-weight: 800; color: #1D1D1F; letter-spacing: -0.01em; }
.ms-svc-lead { font-size: 15px; color: #515154; line-height: 1.7; margin-top: 12px; max-width: 780px; word-break: keep-all; }
.ms-svc-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.ms-svc-point { background: var(--ms-tint); border-radius: 12px; padding: 18px; }
.ms-svc-point-t { font-size: 14.5px; font-weight: 700; color: #1D1D1F; margin-bottom: 7px; word-break: keep-all; }
.ms-svc-point-d { font-size: 13.5px; color: #515154; line-height: 1.6; word-break: keep-all; }
.ms-svc-plans { margin-top: 22px; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; overflow: hidden; }
.ms-svc-plans-head, .ms-svc-plans-row { display: grid; grid-template-columns: 1fr 1fr; }
.ms-svc-plans-head { background: #F5F5F7; font-size: 13px; font-weight: 700; color: #515154; }
.ms-svc-plans-head > div, .ms-svc-plans-row > div { padding: 13px 18px; }
.ms-svc-plans-row { border-top: 1px solid rgba(0,0,0,.05); font-size: 13.5px; color: #3A3A3C; word-break: keep-all; }
.ms-svc-plan2 { background: var(--ms-tint); }
.ms-svc-plans-head .ms-svc-plan2 { color: var(--ms-deep); }

/* ── Copilot ── */
.ms-copilot-hero { background: linear-gradient(180deg, #F4F1FE 0%, #FFF 75%); }
.ms-copilot-visual {
  background: linear-gradient(160deg, #1B1464 0%, #4B2E9E 55%, #0078D4 130%);
  border-radius: 20px; padding: 40px 32px; color: #fff; text-align: center;
}
.ms-copilot-orb {
  width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 50%;
  background: conic-gradient(from 210deg, #64D2FF, #BF5AF2, #FF6482, #FFD60A, #64D2FF);
  filter: blur(0.5px); box-shadow: 0 0 44px rgba(150,110,255,.55);
}
.ms-copilot-visual-name { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.ms-copilot-visual-sub { font-size: 13.5px; opacity: .75; margin-top: 6px; }
.ms-copilot-app-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 20px; }
.ms-copilot-app-chips .ms-app-chip { background: rgba(255,255,255,.14); color: #fff; }

/* 채팅 데모 */
.ms-chat-intro { font-size: 15.5px; color: #515154; line-height: 1.7; margin-top: 16px; word-break: keep-all; }
.ms-chat {
  margin-top: 44px; border: 1px solid rgba(0,0,0,.1); border-radius: 18px; overflow: hidden;
  background: #FAFAFC; box-shadow: 0 20px 50px rgba(0,30,70,.08);
}
.ms-chat-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-bottom: 1px solid rgba(0,0,0,.07); padding: 15px 24px;
}
.ms-chat-title { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; color: #1D1D1F; }
.ms-copilot-dot {
  width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex-shrink: 0;
  background: conic-gradient(from 210deg, #64D2FF, #BF5AF2, #FF6482, #FFD60A, #64D2FF);
}
.ms-chat-appctx { font-size: 12.5px; color: #86868B; }
.ms-chat-body { padding: 28px 28px 34px; display: flex; flex-direction: column; gap: 26px; }
.ms-msg-label { font-size: 12.5px; font-weight: 700; color: #86868B; margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }
.ms-msg-user { align-self: flex-end; max-width: 78%; }
.ms-msg-user .ms-msg-label { justify-content: flex-end; }
.ms-msg-ai { align-self: flex-start; max-width: 92%; }
.ms-bubble { border-radius: 16px; font-size: 14.5px; line-height: 1.7; word-break: keep-all; }
.ms-bubble-user { background: var(--ms); color: #fff; padding: 16px 20px; border-bottom-right-radius: 5px; }
.ms-bubble-ai { background: #fff; border: 1px solid rgba(0,0,0,.08); padding: 24px 26px; border-top-left-radius: 5px; color: #3A3A3C; }
.ms-ans-sec { margin-bottom: 20px; }
.ms-ans-sec:last-child { margin-bottom: 0; }
.ms-ans-h { font-size: 13px; font-weight: 800; color: var(--ms-deep); letter-spacing: .02em; margin-bottom: 8px; }
.ms-bubble-ai p { margin: 0; }
.ms-bubble-ai ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.ms-ans-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.ms-ans-cols .ms-ans-sec { margin-bottom: 0; }
.ms-ans-table { border: 1px solid rgba(0,0,0,.08); border-radius: 10px; overflow: hidden; }
.ms-ans-tr { display: grid; grid-template-columns: 90px 1fr 80px; border-top: 1px solid rgba(0,0,0,.05); }
.ms-ans-tr:first-child { border-top: none; }
.ms-ans-tr > div { padding: 10px 14px; font-size: 13.5px; }
.ms-ans-th { background: #F5F5F7; font-weight: 700; color: #515154; font-size: 12.5px; }
.ms-ans-total { font-size: 13px; font-weight: 700; color: var(--ms-deep); margin-top: 9px; }
.ms-chat-takeaway {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 26px;
  background: var(--ms-soft); border-radius: 14px; padding: 18px 22px;
  font-size: 15px; font-weight: 600; color: var(--ms-deep); line-height: 1.6; word-break: keep-all;
}

/* 앱별 활용 */
.ms-apps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 44px; }
.ms-app-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 22px 18px; }
.ms-app-card-ic {
  width: 42px; height: 42px; border-radius: 10px; background: var(--ms-soft); color: var(--ms-deep);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; margin-bottom: 14px; padding: 7px;
}
.ms-app-card-ic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ms-app-card-nm { font-size: 15.5px; font-weight: 800; color: #1D1D1F; margin-bottom: 6px; }
.ms-app-card-desc { font-size: 13px; color: #515154; line-height: 1.55; word-break: keep-all; }

/* ── Copilot 상세: 기능 예시 카드 ── */
.ms-feat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 44px; }
.ms-feat-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 22px 18px; display: flex; flex-direction: column; }
.ms-feat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ms-feat-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--ms-soft); display: flex; align-items: center; justify-content: center; padding: 7px; flex-shrink: 0; }
.ms-feat-ic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ms-feat-nm { font-size: 15px; font-weight: 800; color: #1D1D1F; letter-spacing: -.01em; }
.ms-feat-lbl { font-size: 12px; color: var(--ms-deep); font-weight: 600; margin-top: 2px; }
.ms-feat-cmds { display: flex; flex-direction: column; gap: 10px; }
.ms-feat-cmd { font-size: 12.5px; line-height: 1.5; color: #3A3A3C; background: #F5F7FB; border: 1px solid rgba(0,0,0,.05); border-radius: 10px; padding: 10px 12px; word-break: keep-all; position: relative; }
.ms-feat-cmd::before { content: "“"; color: var(--ms-accent, #0078D4); font-weight: 800; margin-right: 2px; }
.ms-feat-cmd::after { content: "”"; color: var(--ms-accent, #0078D4); font-weight: 800; margin-left: 1px; }

/* ── Copilot 상세: 아키텍처 ── */
.ms-arch { margin-top: 44px; }
.ms-arch-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; background: linear-gradient(180deg, #FBFCFE, #F4F7FC); border: 1px solid rgba(0,0,0,.07); border-radius: 20px; padding: 40px 32px; }
.ms-arch-pillar { text-align: center; }
.ms-arch-glyph { font-size: 30px; color: var(--ms-deep); line-height: 1; margin-bottom: 14px; }
.ms-arch-k { font-size: clamp(16px, 1.6vw, 20px); font-weight: 800; color: #1D1D1F; letter-spacing: -.01em; margin-bottom: 8px; }
.ms-arch-v { font-size: 13px; color: #515154; line-height: 1.5; word-break: keep-all; max-width: 220px; margin: 0 auto; }
.ms-arch-plus { font-size: 28px; font-weight: 300; color: #B7BEC9; }
.ms-arch-plus.sm { font-size: 20px; }
.ms-arch-guards { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 16px; padding: 20px; flex-wrap: wrap; }
.ms-arch-guard { font-size: 14px; font-weight: 700; color: #1D1D1F; }

/* ── Copilot 상세: 생산성 ── */
.ms-prod-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.ms-prod-stat { text-align: center; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 30px 18px; }
.ms-prod-val { font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; color: var(--ms-deep); letter-spacing: -.02em; }
.ms-prod-lbl { font-size: 13px; color: #515154; margin-top: 8px; word-break: keep-all; }
.ms-prod-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 40px; position: relative; }
.ms-prod-timeline::before { content: ""; position: absolute; top: 27px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, rgba(0,120,212,.35), transparent); }
.ms-prod-step { text-align: center; position: relative; }
.ms-prod-ic { width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 2px solid var(--ms-accent, #0078D4); display: flex; align-items: center; justify-content: center; padding: 11px; margin: 0 auto 14px; position: relative; z-index: 1; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.ms-prod-ic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ms-prod-ic-copilot { background: conic-gradient(from 210deg, #2E7BF6, #6C4BF5, #E24AA0, #F5A623, #2E7BF6); border-color: transparent; }
.ms-prod-time { font-size: 13px; font-weight: 800; color: #1D1D1F; margin-bottom: 8px; }
.ms-prod-tag { font-size: 12.5px; font-weight: 700; color: var(--ms-deep); background: var(--ms-soft); border-radius: 999px; padding: 5px 12px; display: inline-block; margin-bottom: 10px; }
.ms-prod-desc { font-size: 12.5px; color: #515154; line-height: 1.55; word-break: keep-all; }
@media (max-width: 1080px) {
  .ms-feat-grid { grid-template-columns: repeat(2, 1fr); }
  .ms-prod-stats { grid-template-columns: repeat(2, 1fr); }
  .ms-prod-timeline { grid-template-columns: repeat(2, 1fr); }
  .ms-prod-timeline::before { display: none; }
}
@media (max-width: 880px) {
  .ms-arch-row { grid-template-columns: 1fr; }
  .ms-arch-plus { display: none; }
  .ms-arch-pillar { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
}
@media (max-width: 640px) {
  .ms-feat-grid { grid-template-columns: 1fr; }
}

/* ── Server: 도입 이유 / SQL 강점 카드 ── */
.ms-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.ms-why-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ms-why-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 28px 24px; box-shadow: 0 6px 20px rgba(0,0,0,.04); }
.ms-why-ic { width: 52px; height: 52px; border-radius: 13px; background: var(--ms-soft); color: var(--ms-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.ms-why-title { font-size: 17px; font-weight: 800; color: #1D1D1F; letter-spacing: -.01em; margin-bottom: 10px; word-break: keep-all; }
.ms-why-desc { font-size: 13.5px; color: #515154; line-height: 1.6; word-break: keep-all; }
.ms-subhead { font-size: clamp(19px, 2vw, 23px); font-weight: 800; color: #1D1D1F; letter-spacing: -.02em; margin: 0 0 8px; }

/* ── Server: CAL 다이어그램 ── */
.ms-cal-diagram { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.ms-cal-panel { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 18px; padding: 28px 26px 24px; box-shadow: 0 6px 20px rgba(0,0,0,.04); text-align: center; }
.ms-cal-panel-head { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 24px; }
.ms-cal-mode { font-size: 18px; font-weight: 800; color: #1D1D1F; }
.ms-cal-sub { font-size: 13px; color: var(--ms-deep); font-weight: 600; }
.ms-cal-license { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; background: var(--ms-soft); border: 1.5px solid color-mix(in srgb, var(--ms-deep) 30%, transparent); border-radius: 14px; padding: 18px 30px; position: relative; }
.ms-cal-tag { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #fff; background: var(--ms-deep); border-radius: 999px; padding: 4px 12px; }
.ms-cal-license-ic { color: var(--ms-deep); line-height: 0; }
.ms-cal-license-t { font-size: 14px; font-weight: 700; color: #1D1D1F; }
.ms-cal-conn { position: relative; height: 42px; display: flex; align-items: center; justify-content: center; }
.ms-cal-conn::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--ms-deep) 45%, transparent) 0 5px, transparent 5px 9px); }
.ms-cal-conn-lbl { position: relative; background: #fff; padding: 3px 10px; font-size: 12px; font-weight: 600; color: #515154; }
.ms-cal-served { display: flex; justify-content: center; gap: 14px; }
.ms-cal-served-ic { width: 48px; height: 48px; border-radius: 12px; background: #F4F7FC; border: 1px solid rgba(0,0,0,.08); color: #3A3A3C; display: flex; align-items: center; justify-content: center; }
.ms-cal-served-lbl { font-size: 13px; font-weight: 600; color: #1D1D1F; margin-top: 12px; }
.ms-cal-server-bar { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(180deg, #2A3342, #1B222E); color: #fff; border-radius: 12px; padding: 12px 22px; font-size: 14px; font-weight: 700; }
.ms-cal-server-bar svg { color: #7FA8E8; }
.ms-cal-note { font-size: 13px; color: #515154; line-height: 1.6; margin: 22px 0 0; word-break: keep-all; text-align: left; padding-top: 18px; border-top: 1px solid rgba(0,0,0,.07); }

/* ── 백신/보안: 라이트 히어로 & 공통 ── */
.sec-hero { background: #F0F4FF !important; color: #0A0A0A !important; }
.sec-hero .ad-hero-body { color: #515154; }
.sec-hero .ad-hero-tag-lbl { color: #515154; }
/* 라이트 히어로 위 칩바 — 흰 텍스트 가시성 보정 */
.sec-hero .ot-chipbar .ot-chip { background: #fff; border-color: rgba(26,79,184,.22); color: #3A3F4A; }
.sec-hero .ot-chipbar .ot-chip-ready:hover { background: #E3EAFF; border-color: rgba(26,79,184,.5); color: #12294F; }
/* 라이트 히어로 위 서브헤더 — 어두운 텍스트로 가시성 보정 */
.ad-page:has(.sec-hero) .ad-subheader:not(.is-scrolled) .ad-back { color: #1d1d1f; background: rgba(0,0,0,.05); }
.ad-page:has(.sec-hero) .ad-subheader:not(.is-scrolled) .ad-back:hover { background: rgba(0,0,0,.08); }
.ad-page:has(.sec-hero) .ad-subheader:not(.is-scrolled) .ad-crumb { color: #86868B; }
.ad-page:has(.sec-hero) .ad-subheader:not(.is-scrolled) .ad-crumb .crumb-switch-trigger { color: #1d1d1f; }
.ot-group-tag, .hc-product-badge, .sec-central-file { white-space: nowrap; }

/* ── 제품 구분 eyebrow (제품명 강조) ── */
.sec-prod-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.sec-prod-badge { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #fff; background: #1A4FB8; border-radius: 999px; padding: 5px 13px; }
.sec-prod-title { font-size: clamp(19px, 2vw, 24px); font-weight: 800; letter-spacing: -.02em; color: #12294F; }

/* ── AhnLab 히어로: 2제품 스택 ── */
.sec-ahn-stack { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 8px 0; }
.sec-ahn-prod { display: flex; align-items: stretch; background: #fff; border: 1px solid rgba(26,79,184,.16); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(18,41,79,.10); }
.sec-ahn-prod-tag { display: flex; align-items: center; justify-content: center; width: 66px; flex-shrink: 0; background: #12294F; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.sec-ahn-prod:nth-child(2) .sec-ahn-prod-tag { background: #1A4FB8; }
.sec-ahn-prod-body { padding: 18px 20px; }
.sec-ahn-prod-name { font-size: 16px; font-weight: 800; color: #12151A; letter-spacing: -.01em; }
.sec-ahn-prod-role { font-size: 12.5px; font-weight: 700; color: #1A4FB8; margin-top: 4px; }
.sec-ahn-plus { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid rgba(26,79,184,.2); color: #1A4FB8; font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(18,41,79,.14); z-index: 2; }

/* ── 백신/보안: AhnLab 다차원 분석 ── */
.sec-layer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.sec-layer-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 26px 24px; box-shadow: 0 6px 20px rgba(0,0,0,.04); }
.sec-layer-num { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: #1A4FB8; margin-bottom: 12px; }
.sec-layer-k { font-size: 16.5px; font-weight: 800; color: #1D1D1F; letter-spacing: -.01em; margin-bottom: 8px; }
.sec-layer-v { font-size: 13.5px; color: #515154; line-height: 1.6; word-break: keep-all; }

/* ── 백신/보안: AhnLab EPP 콘솔 ── */
.sec-epp { margin-top: 44px; max-width: 760px; }
.sec-epp-console { background: #12294F; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 40px rgba(18,41,79,.25); }
.sec-epp-console-head { display: flex; align-items: center; gap: 7px; padding: 14px 18px; background: rgba(255,255,255,.06); }
.sec-epp-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.25); }
.sec-epp-console-title { margin-left: 8px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.75); letter-spacing: .02em; }
.sec-epp-console-body { display: flex; flex-wrap: wrap; gap: 12px; padding: 26px 22px; }
.sec-epp-module { font-size: 13.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 12px 18px; }
.sec-epp-note { font-size: 13.5px; color: #515154; line-height: 1.6; margin-top: 18px; word-break: keep-all; }

/* ── AhnLab EPP 대시보드 (자료 p4 실제 화면) ── */
.sec-epp { max-width: 980px; }
.sec-dash-shot { margin: 0; border-radius: 16px; overflow: hidden; background: #1E2A44; box-shadow: 0 18px 50px rgba(15,27,52,.28); border: 1px solid rgba(15,27,52,.12); }
.sec-dash-chrome { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #0A1428; }
.sec-dash-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.sec-dash-dot.r { background: #FF5F57; }
.sec-dash-dot.y { background: #FEBC2E; }
.sec-dash-dot.g { background: #28C840; }
.sec-dash-chrome-title { margin-left: 10px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); }
.sec-dash-shot img { display: block; width: 100%; height: auto; background: #fff; }

/* ── ESET PROTECT 주요기능 (자료 p6~7) ── */
.sec-cf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.sec-cf-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 22px 20px; box-shadow: 0 6px 20px rgba(0,0,0,.04); border-top: 3px solid #1A4FB8; }
.sec-cf-k { font-size: 15.5px; font-weight: 800; color: #12294F; letter-spacing: -.01em; margin-bottom: 8px; }
.sec-cf-v { font-size: 13px; color: #515154; line-height: 1.6; word-break: keep-all; }
@media (max-width: 900px) {
  .sec-cf-grid { grid-template-columns: 1fr; }
}

/* ── 백신/보안: Cyberdigm ── */
.sec-central-visual { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 20px; padding: 34px 30px; text-align: center; box-shadow: 0 14px 40px rgba(0,0,0,.08); }
.sec-central-files { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.sec-central-file { font-size: 13px; font-weight: 700; color: #1A4FB8; background: #E3EAFF; border-radius: 10px; padding: 10px 14px; }
.sec-central-arrow { font-size: 22px; color: #1A4FB8; margin: 16px 0; }
.sec-central-server { display: inline-flex; align-items: center; gap: 10px; background: #12294F; color: #fff; border-radius: 12px; padding: 14px 26px; font-size: 15px; font-weight: 800; }
.sec-central-server-ic { color: #7FA8E8; }
.sec-flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.sec-flow-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 26px 24px; box-shadow: 0 6px 20px rgba(0,0,0,.04); }
.sec-flow-tag { display: inline-block; font-size: 12px; font-weight: 800; color: #fff; background: #1A4FB8; border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; }
.sec-flow-t { font-size: 16.5px; font-weight: 800; color: #1D1D1F; margin-bottom: 8px; }
.sec-flow-v { font-size: 13.5px; color: #515154; line-height: 1.6; word-break: keep-all; }
@media (max-width: 900px) {
  .sec-layer-grid, .sec-flow-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) {
  .ms-why-grid, .ms-why-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .ms-cal-diagram { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ms-why-grid, .ms-why-grid-4 { grid-template-columns: 1fr; }
}

/* ── Server ── */
.ms-server-hero { background: linear-gradient(180deg, #EEF3F8 0%, #FFF 75%); }
.ms-server-visual {
  background: linear-gradient(160deg, #10202E 0%, #163A54 60%, #0F5A9E 130%);
  border-radius: 20px; padding: 36px 32px; color: #fff; text-align: center;
}
.ms-server-rack { display: flex; flex-direction: column; gap: 7px; max-width: 260px; margin: 0 auto 20px; }
.ms-server-unit {
  display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 11px 14px;
}
.ms-server-led { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 8px rgba(74,222,128,.8); }
.ms-led-2 { background: #38BDF8; box-shadow: 0 0 8px rgba(56,189,248,.8); }
.ms-server-slots { flex: 1; height: 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 10px, transparent 10px 16px); }

/* ── CTA ── */
.ms-final-cta { background: linear-gradient(180deg, #FFF 0%, var(--ms-tint, #F3F9FE) 100%); padding: 110px 0 130px; }
.ms-cta-block { text-align: center; max-width: 680px; margin: 0 auto; }
.ms-cta-block h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; color: #1D1D1F; word-break: keep-all; }
.ms-cta-block p { font-size: 16px; color: #515154; line-height: 1.7; margin-top: 18px; word-break: keep-all; }
.ms-cta-pri { background: var(--ms) !important; }
.ms-cta-pri:hover { background: var(--ms-deep) !important; }
.ms-page .ad-cta-sec { background: rgba(0,120,212,.08); color: var(--ms-deep); border: 1px solid rgba(0,120,212,.3); }
.ms-page .ad-cta-sec:hover { background: rgba(0,120,212,.14); border-color: var(--ms); }

/* ── 반응형 ── */
@media (max-width: 1080px) {
  .ms-plan-grid { grid-template-columns: repeat(2, 1fr); }
  .ms-apps-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .ms-brand-grid, .ms-ed-grid { grid-template-columns: 1fr; }
  .ms-trust-row { grid-template-columns: repeat(2, 1fr); }
  .ms-svc-points { grid-template-columns: 1fr; }
  .ms-ans-cols { grid-template-columns: 1fr; }
  .ms-compare-head, .ms-compare-row { grid-template-columns: 1fr 1fr 1fr; font-size: 12.5px; }
  .ms-compare-head > div, .ms-compare-row > div { padding: 12px 12px; }
  .ms-msg-user, .ms-msg-ai { max-width: 100%; }
}
@media (max-width: 640px) {
  .ms-plan-grid, .ms-apps-grid { grid-template-columns: 1fr; }
}