@charset "utf-8";
/* ============================================================================
   메인 — Microsoft 홈페이지 스타일 (2026-10-19 사용자 지시: "내용은 그대로, 스타일만")
   ----------------------------------------------------------------------------
   index.html 만 로드한다. main.css · main-hero.css · layout.css 는 한 글자도 안 고쳤다.
   ⭐ 되돌리기 = index.html 의 이 파일 <link> 한 줄 삭제.

   무엇이 바뀌나
   · 다크 사진·유리(backdrop-filter)·발광 → 흰 / 98% 회색(--ms-alt) 교대 바탕 + 검정 글자. 섹션 사이는 1px 구분선(--ms-line)
     순서: 히어로 흰 · 제품 회 · 미션 흰 · 질문 회 · 레퍼런스 흰 · FAQ 회 (CTA 는 강조색 단색)
     (2026-10-19 사용자 지시: 연회색 교대 바탕 → 흰색 통일)
   · 강조색 = 브랜드 레드 #D6000F (버튼·링크·번호). 2026-10-19 사용자 지시로 MS 파랑 #0067B8 에서 복귀. 제품 카드는 테두리 전체가 제품 테마색(--tile)
   · 곡률은 원래 디자인 값 그대로(버튼 알약형 · 카드 12~30px) — 2026-10-19 사용자 지시로 4/8px 에서 복귀
   · 그림자는 Fluent depth 값
   · 헤더: 사진 위 투명 바 → 흰 바. 2026-10-20 부터 전 페이지 공용 → layout.css 맨 아래 'GNB 흰 바' 블록
   · 푸터는 전 사이트 공용이라 손대지 않았다
   · 제품 카드 호버-공개 애니메이션(제목 걷히고 설명이 뜬다)은 원본 그대로 쓴다(사용자 지시)

   ⚠ 특정도: 원본 셀렉터 앞에 .isMain 을 붙여 한 단계 위에서 이긴다.
   ⚠ 새 브레이크포인트 없음(CLAUDE.md §1). 크기 단계는 clamp(), mq 는 999 / 520 / (min)1000 만.
   ============================================================================ */

.isMain{
  --ms-accent:#D6000F;        /* 브랜드 레드(main-hero.css --accent 와 같은 값). 흰 바탕 대비 5.43:1 */
  --ms-accent-hover:#A0000B;  /* = --accent-deep */
  --ms-accent-wash:#FBEBEC;   /* = --accent-wash */
  --ms-ink:#1A1A1A;
  --ms-ink-2:#3B3B3B;
  --ms-ink-3:#616161;         /* 흰 바탕 대비 6.19:1 */
  --ms-line:#E1DFDD;
  --ms-line-2:#C8C6C4;
  --ms-alt:#FAFAFA;           /* 교대 섹션 바탕 — 명도 98%(hsl 0 0% 98%). 티 안 나게(2026-10-20 사용자 지시) */
  --ms-shadow:0 1.6px 3.6px rgba(0,0,0,.13),0 .3px .9px rgba(0,0,0,.11);
  --ms-shadow-hover:0 6.4px 14.4px rgba(0,0,0,.13),0 1.2px 3.6px rgba(0,0,0,.11);
  --ms-shadow-lg:0 25.6px 57.6px rgba(0,0,0,.14),0 4.8px 14.4px rgba(0,0,0,.10);
  --ms-sec-pad:clamp(80px,9vw,160px);     /* 섹션 위아래 공통. ≤889px 80 → ≥1778px 160 (2026-10-19 사용자 지시로 56~104 에서 상향) */

}

/* ─────────── 헤더 ─────────── */
/* 종전엔 히어로가 헤더 밑으로 파고들었다(main{margin-top:-70px}). 흰 바이므로 밀어낸다. */
.isMain main#main{margin-top:0}
/* GNB(흰 바 · 메가메뉴)는 2026-10-20 전 페이지 공용이 되어 layout.css 맨 아래로 옮겼다. */

/* ─────────── 히어로 ─────────── */
.isMain .mVisual-wr .mvis-slide{background-image:none !important;background-color:#fff}   /* 사진은 인라인 style 이라 !important */
.isMain .mVisual-wr .mvis-slide::before{display:none}
.isMain .mVisual-wr .mvis-track{height:auto}
.isMain .mVisual-wr .mvis-ubx,
.isMain .mVisual-wr.mvis-single .mvis-ubx{padding:calc(var(--ms-sec-pad) * .7 + 20px) 0 calc(var(--ms-sec-pad) * .8);align-items:center}
/* ↑ 히어로 위아래 여백. 섹션 높이(위+아래 합)는 그대로 두고 내용물만 내린다(2026-10-20 사용자 지시 '위로 쏠려 보인다').
     종전 위 .5×pad+20 · 아래 1×pad → 위 .7×pad+20 · 아래 .8×pad (합 동일). 1920px 100/160 → 132/128 · 1280 78/115 → 101/92 */
.isMain .mVisual-wr .ubx,
.isMain .mVisual-wr .ubx :is(.app,.phone,.tier-ai,.tier-core,a.prod){
  --ink:var(--ms-ink);--ink-2:var(--ms-ink-2);--ink-3:var(--ms-ink-3);
  --line:var(--ms-line);--line-2:var(--ms-line-2);
  --accent:var(--ms-accent);--accent-deep:var(--ms-accent-hover);--accent-wash:var(--ms-accent-wash);
}
/* 히어로 캔버스 — 네 구역의 강조색(2026-10-20 사용자 지시 — 전부 빨강이라 구분이 안 됐다).
   main-hero.js readTokens() 가 읽는다. 순서 = KINDS 순서. 가운데 '기업 AI' 허브는 --accent(브랜드 레드) 그대로.
   흩어진 장면에선 잉크가 아직 안 차서 거의 안 보이고, 정렬(구조화) 장면에서 드러난다. */
.isMain .mVisual-wr .ubx{
  --doc-c1:#2F63D3;   /* 내규 · 공문     — 파랑 */
  --doc-c2:#009040;   /* 보고서 · 제안서 — 초록 */
  --doc-c3:#6054FF;   /* 신청서 · 동의서 — 보라 */
  --doc-c4:#D98200;   /* 품의서 · 계약서 — 주황 */
  /* 흩어진 문서(아직 구조화 전 회색 종이)를 조금 진하게(2026-10-20 사용자 지시). 같은 색상각 그대로 명도만 내림.
     글줄 #697180 → #555C69 · 종이 테두리 #BAC1CA → #9CA4AF */
  --card-ink:#555C69;
  --card-line:#9CA4AF;
}
.isMain .mVisual-wr .ubx :focus-visible{outline-color:var(--ms-accent)}
.isMain .mVisual-wr .ubx .hero-tit{color:var(--ms-ink)}
.isMain .mVisual-wr .ubx .lede{color:var(--ms-ink-2)}

/* 버튼 — 주(강조색 채움) · 보조(흰 바탕 + 회색 테두리) */
.isMain .mVisual-wr .ubx .btn{
  border:1px solid #8A8886;background:#fff;color:var(--ms-ink);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  font-size:16px;font-weight:500;
}
/* 히어로 버튼 1.2 배(2026-10-20 사용자 지시). 글자 16→19.2 · 위아래 12→14.4 · 좌우 24~32→28.8~38.4 · 아이콘 16→19.2 */
.isMain .mVisual-wr .ubx .hero-cta .btn{font-size:19.2px;padding:14.4px clamp(28.8px,2.88vw,38.4px)}
.isMain .mVisual-wr .ubx .hero-cta .btn .btn-ico{width:19.2px;height:19.2px}
/* 히어로 글 덩어리(제목 + 소개문 + 버튼) — 2026-10-20 사용자 지시.
   원본은 PC 에서 버튼을 그림 아랫선까지 밀어 내려(margin-top:auto · main-hero.css ㉒) 글과 버튼이 갈라져 보였다.
   글과 버튼을 한 덩어리로 묶고(사이 40~56px), 덩어리를 그림 높이 안에서 세로 가운데에 둔다 —
   위아래 여백은 덩어리 바깥에 생긴다. ≤999 는 1단이라 세로 가운데가 의미 없고 사이 간격만 같다. */
.isMain .mVisual-wr .ubx .hero-copy .hero-cta{margin-top:0;padding-top:clamp(80px,7.5vw,112px)}   /* ≤999 : 40~56 → 52~72 → 80~112 */
@media all and (min-width:1000px){
  .isMain .mVisual-wr .ubx .hero-copy{justify-content:center}
  .isMain .mVisual-wr .ubx .hero-copy .hero-cta{padding-top:clamp(150px,15vw,224px)}   /* PC 만 '두 배로'(2026-10-20 사용자 지시). 1000px 150 · 1280 192 · ≥1494 224 */
  /* 그림(캔버스 + 장면 설명)만 10px 위로(2026-10-20 사용자 지시). 글 덩어리와는 이미 다른 칸(.hero-viz)이다.
     margin 이 아니라 translate 인 이유 — 칸 높이가 안 바뀌어 옆 글 덩어리의 세로 가운데가 따라 움직이지 않는다.
     transform 이 아니라 translate 속성인 이유 — .rv 등장 애니메이션이 transform 을 쓰므로 덮어쓰면 끊긴다. */
  .isMain .mVisual-wr .ubx .hero-viz{translate:0 -24px}   /* -10 → -24 (2026-10-20 '좀 더 위로') */
}
/* 캔버스 ↔ 장면 설명 간격 축소(2026-10-20 사용자 지시). 종전 PC 12~18 · 그 외 10~16px */
.isMain .mVisual-wr .ubx .axviz-legend{margin-top:clamp(4px,.5vw,8px)}
.isMain .mVisual-wr .ubx .btn.btn-em{background:var(--ms-accent);border-color:var(--ms-accent);color:#fff}
@media (hover:hover){
  .isMain .mVisual-wr .ubx .btn:hover{background:#F3F2F1;border-color:#323130}
  .isMain .mVisual-wr .ubx .btn.btn-em:hover{background:var(--ms-accent-hover);border-color:var(--ms-accent-hover)}
}
/* 캔버스 판: 그림자·테두리·바탕 없이 히어로 흰 바탕에 녹인다(2026-10-20 사용자 지시) */
.isMain .mVisual-wr .ubx .axviz-wrap{
  --hero-btn-h:52px;
  background:transparent;border:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  overflow:visible;   /* 보고서 장면 그림자가 판 가장자리에서 잘려 '배경색이 바뀐 사각형' 으로 보였다(2026-10-20) */
}
/* 보고서 장면 목업 그림자를 작고 옅게 — 판 밖으로 번져도 경계가 안 생기고, 아래 장면 설명 글씨에 닿지 않는다.
   종전 --shadow-lg = 0 2px 4px .06 + 0 24px 60px .14 */
.isMain .mVisual-wr .ubx .mock :is(.app,.phone){box-shadow:0 1px 3px rgba(0,0,0,.06),0 8px 20px rgba(0,0,0,.07)}
/* 캔버스 자체를 키운다(2026-10-20 사용자 지시 — 노안 배려). ≥1000 만 2단이다.
   · 열 비율 1:1 → 5:7. 글 칸은 380px 아래로 줄지 않게 막아 제목 크기를 지킨다
     (제목은 글 칸 폭의 1/11.3 — main-hero.css ㉛). 1000px 380px · 1480px 약 590px.
   · 그림 칸 안에서 88% 로 줄여 오른쪽에 붙이던 것(main-hero.css ㉑)을 100% 로.
   · 높이는 원본 식(75cqi − 버튼 높이)이 폭을 따라오므로 따로 안 건드린다.
   그림 폭(1480px 콘텐츠 기준): 약 640 → 약 830px · 1.3 배. */
@media all and (min-width:1000px){
  .isMain .mVisual-wr .ubx .hero-split{grid-template-columns:minmax(380px,5fr) minmax(0,7fr)}
  /* 100% → 90%(2026-10-20 사용자 지시 '조금 줄여'). 오른쪽 붙임(justify-self:end, main-hero.css ㉑)은 그대로.
     ⚠ transform:scale 로 줄이지 않는다 — 이미 그린 비트맵을 축소하는 거라 다시 흐려진다.
        칸 폭을 줄이면 캔버스의 ResizeObserver 가 resize() 로 그 크기에 맞춰 새로 그린다(main-hero.js). */
  .isMain .mVisual-wr .ubx .hero-viz{width:90%}
}
/* 장면 설명 사이 실선 — 미채움 구간이 흰색이라 밝은 바탕에서 사라진다 */
.isMain .mVisual-wr .ubx .axviz-legend li:not(:last-child)::after{
  background:linear-gradient(90deg,
    var(--accent) 0 calc(var(--fill,0) * 100%),
    var(--ms-line-2) calc(var(--fill,0) * 100%) 100%);
}
/* 지금 장면 강조 — 글자색·굵기만 바뀌던 것 → 둥근 사각형 바탕(2026-10-20 사용자 지시 '불 들어올 때 눈에 안 띈다'). 색은 아래 is-on/is-done.
   ⚠ 연결선(::after)은 원래 li '안' 의 flex 자식이라, li 에 바탕을 깔면 선까지 빨간 상자에 들어간다.
      그래서 선을 li 밖(left:100%)으로 빼고, 그 자리를 li 의 margin-right 로 비워 둔다. 선 길이 = --lg-w.
      글자 ↔ 선 간격은 li 의 좌우 padding 이 대신한다(종전 ::after 좌우 margin 은 0 으로). */
.isMain .mVisual-wr .ubx .axviz-legend li{
  position:relative;padding:.22em 0;border-radius:8px;   /* 2026-10-20 바탕 상자 제거(사용자 지시) — 좌우 안쪽 여백도 0. 되살리려면 .7em */
  transition:color .45s ease,opacity .45s ease,background-color .45s ease;
}
/* 2026-10-20 : 레드 바탕 → 회색 바탕 + 레드 점만(사용자 지시 — 레드 상자가 옆 '도입 문의하기' 버튼을 묻었다).
   지금 = 한 단계 진한 회색 + 검정 굵은 글자 + 레드 점(1.45 배) · 지나간 = 옅은 회색 + 회색 점. */
.isMain .mVisual-wr .ubx .axviz-legend li.is-on{background:none;color:var(--ms-ink);font-weight:500;opacity:1}
.isMain .mVisual-wr .ubx .axviz-legend li.is-on::before{background:var(--ms-accent);opacity:1;transform:scale(1.45)}
/* 지나간 장면 — 연회색 사각형 + 진회색 글자(2026-10-20 사용자 지시). 점도 회색(원본은 빨강 .7) */
.isMain .mVisual-wr .ubx .axviz-legend li.is-done{background:none;color:var(--ms-ink-2);opacity:1}
.isMain .mVisual-wr .ubx .axviz-legend li.is-done::before{background:#8A8886;opacity:1}
/* 선이 있는 구간은 PC(≥1000)와 폰(≤520)뿐이다 — 그 사이(521~999)는 원본이 선 없이 간격만 둔다. */
/* 선 양끝을 사각형에서 --lg-gap 만큼 띄운다(2026-10-20 사용자 지시 — 붙어 보인다). li 오른쪽 자리 = 간격 + 선 + 간격 */
.isMain .mVisual-wr .ubx .axviz-legend li:not(:last-child)::after{position:absolute;left:calc(100% + var(--lg-gap));top:50%;width:var(--lg-w);margin:0}
@media all and (min-width:1000px){
  .isMain .mVisual-wr .ubx .axviz-legend{--lg-w:clamp(20px,2.6vw,48px);--lg-gap:clamp(10px,.8vw,14px)}   /* 상자가 없어져 원본 선 여백값으로 */
  .isMain .mVisual-wr .ubx .axviz-legend li:not(:last-child){margin-right:calc(var(--lg-w) + var(--lg-gap) * 2)}
}
@media all and (max-width:520px){
  .isMain .mVisual-wr .ubx .axviz-legend{--lg-w:clamp(10px,3vw,20px);--lg-gap:6px}
  .isMain .mVisual-wr .ubx .axviz-legend li{padding:.2em 0;border-radius:6px}
  .isMain .mVisual-wr .ubx .axviz-legend li:not(:last-child){margin-right:calc(var(--lg-w) + var(--lg-gap) * 2)}
}

/* ─────────── 제품 플랫폼(생애주기 01~05) ─────────── */
.isMain #main .main-sec.ubx-sec.sec-platform{background:var(--ms-alt);background-image:none;border-top:1px solid var(--ms-line);padding:var(--ms-sec-pad) 0}
.isMain .main-sec.ubx-sec.sec-platform::before{display:none}
.isMain .main-sec.ubx-sec.sec-platform .ubx{
  --ink:var(--ms-ink);--ink-2:var(--ms-ink-2);--ink-3:var(--ms-ink-3);
  --line:var(--ms-line);--line-2:var(--ms-line-2);--accent:var(--ms-accent);
}
.isMain .main-sec.ubx-sec.sec-platform .ubx .plat-beam{display:none}   /* 판 테두리를 도는 붉은 광선 — 판이 없어졌다 */
.isMain .main-sec.ubx-sec.sec-platform .ubx .sc-head :is(h2,h3){font-size:clamp(24px,3vw,40px)}
.isMain .main-sec.ubx-sec.sec-platform .ubx .stack{gap:clamp(16px,1.6vw,24px)}   /* 01~04 ↔ 05 사이. 2026-10-19 사용자 지시로 36~56 → 16~24 */
.isMain .main-sec.ubx-sec.sec-platform .ubx .flow{column-gap:clamp(16px,1.8vw,28px);row-gap:clamp(36px,3.6vw,56px)}

/* 단계 판(검정 유리) 걷기 — 머리글 + 카드만 남긴다 */
.isMain .main-sec.ubx-sec.sec-platform .ubx .flow > .step,
.isMain .main-sec.ubx-sec.sec-platform .ubx .stack > .tier-infra{
  background:none;border:0;border-radius:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.isMain .main-sec.ubx-sec.sec-platform .ubx .step-head{
  padding:0 0 clamp(12px,1.2vw,16px);   /* 검정 밑줄은 2026-10-19 사용자 지시로 삭제 */
}
.isMain .main-sec.ubx-sec.sec-platform .ubx .step-head .s-n{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:28px;height:28px;border-radius:50%;
  background:var(--ms-accent);color:#fff;font-size:14px;font-weight:700;letter-spacing:0;line-height:1;
  align-self:center;
}
.isMain .main-sec.ubx-sec.sec-platform .ubx .step-head .s-ko{color:var(--ms-ink);font-size:clamp(20px,1.8vw,24px);align-self:center}
.isMain .main-sec.ubx-sec.sec-platform .ubx .step-head .s-d{color:var(--ms-ink-3);font-size:clamp(14px,1.1vw,16px)}
.isMain .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card,
.isMain .main-sec.ubx-sec.sec-platform .ubx .step .cards-box .card + .card{margin-left:0;margin-right:0}
.isMain .main-sec.ubx-sec.sec-platform .ubx .tier-infra .cards-box{padding:0;margin-top:clamp(4px,.6vw,8px)}
/* 05 운영 제목 ↔ 카드 간격 축소(2026-10-20 사용자 지시). 종전 합계 = 제목 padding 12~16 + 카드 margin 12~16 + 판 gap 4~6 */
.isMain .main-sec.ubx-sec.sec-platform .ubx .tier-infra .step-head{padding-bottom:0}

/* 제품 카드 — 사진 타일 → 흰 카드. 테두리 전체를 제품색(--tile)으로, 곡률은 원래 값(16px) 그대로
   2026-10-27 바탕을 흰색 → 테두리색 12% 틴트로(사용자 지시 · 시안 A안 = 테두리색 + 알파 1F).
   알파 대신 흰색과 섞어 불투명으로 둔다 — 뒤의 판·사진이 비치지 않게. 호버 판은 그대로 덮는다.
   대비(실측): 회색 글자 --ms-ink-3 5.18~5.78:1 · 설명 --ms-ink-2 9.4~10.5:1 (전부 AA 이상). */
.isMain .main-sec.ubx-sec.sec-platform .ubx .cards-box .card{
  background:#fff;
  background:color-mix(in srgb, var(--tile,var(--ms-accent)) 12%, #fff);
  border:2px solid var(--tile,var(--ms-accent));
  box-shadow:var(--ms-shadow);transition:box-shadow .2s ease;
}
.isMain .main-sec.ubx-sec.sec-platform .ubx .cards-box .card:is(:hover,:focus-within){box-shadow:var(--ms-shadow-hover)}
.isMain .main-sec.ubx-sec.sec-platform .ubx .cards-box .card > a:before,   /* 배경 사진 */
.isMain .main-sec.ubx-sec.sec-platform .ubx .cards-box .card > a::after{display:none}   /* 10% 흰 테두리 · 컨버터 그라데이션 */
/* 화살표: 꼬리 없는 회색 '>' 하나로 통일(2026-10-20 사용자 지시).
   종전엔 꼬리 달린 card_arr.png 였고 크기·위치가 01~04(28×11 · 우18 하15)와 05 운영(40×16 · 우40 하22),
   ≤999(우30 하30)마다 달랐다 — 전부 여기 한 값으로 덮는다. 모양은 SVG 마스크, 색은 background 하나.
   #8A8886 은 흰 바탕 3.5:1(아이콘 기준 3:1 이상). */
.isMain .main-sec.ubx-sec.sec-platform .ubx .cards-box .card:before{
  width:9px;height:16px;right:22px;bottom:20px;
  background:#8A8886;filter:none;opacity:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 16'%3E%3Cpath d='M1.5 1.5 7.5 8l-6 6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 16'%3E%3Cpath d='M1.5 1.5 7.5 8l-6 6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.isMain .main-sec.ubx-sec.sec-platform .ubx .card > a > span{color:var(--ms-ink)}
.isMain .main-sec.ubx-sec.sec-platform .ubx .card .cd-s-tit,
.isMain .main-sec.ubx-sec.sec-platform .ubx .card .cd-tit{color:var(--ms-ink-3)}
.isMain .main-sec.ubx-sec.sec-platform .ubx .card .txt{color:var(--ms-ink-2)}
/* 호버-공개 애니메이션은 원본(main-hero.css ⑬)을 그대로 쓴다 — 제목이 걷히고 제품색(--tile-ink)
   판 위로 설명이 떠오른다. 판이 진한 색이라 그 상태에서만 글자·화살표를 흰색으로 뒤집는다.
   ≤520 은 원본이 설명을 늘 펼쳐 두고 판을 안 띄우므로 뒤집지 않는다(흰 카드에 흰 글자가 된다). */
@media not all and (max-width:520px){
  .isMain .main-sec.ubx-sec.sec-platform .ubx .cards-box .card:is(:focus-within,.is-open) .txt{color:#fff}
  .isMain .main-sec.ubx-sec.sec-platform .ubx .cards-box .card:is(:focus-within,.is-open):before{background:#fff}
  .isMain .main-sec.ubx-sec.sec-platform .ubx .cards-box .card-ubisharing:is(:focus-within,.is-open) .txt{color:#1D2430}
  .isMain .main-sec.ubx-sec.sec-platform .ubx .cards-box .card-ubisharing:is(:focus-within,.is-open):before{background:#1D2430}
}
@media not all and (max-width:520px){@media (hover:hover){
  .isMain .main-sec.ubx-sec.sec-platform .ubx .cards-box .card:hover .txt{color:#fff}
  .isMain .main-sec.ubx-sec.sec-platform .ubx .cards-box .card:hover:before{background:#fff}
  .isMain .main-sec.ubx-sec.sec-platform .ubx .cards-box .card-ubisharing:hover .txt{color:#1D2430}
  .isMain .main-sec.ubx-sec.sec-platform .ubx .cards-box .card-ubisharing:hover:before{background:#1D2430}
}}

/* ─────────── 미션 ─────────── */
.isMain #main .main-sec.ubx-sec.sec-mission{background:#fff;background-image:none;border-top:1px solid var(--ms-line);padding:var(--ms-sec-pad) 0}
.isMain .main-sec.ubx-sec.sec-mission .ubx{
  --ink:var(--ms-ink);--ink-2:var(--ms-ink-2);--ink-3:var(--ms-ink-3);
  --line:var(--ms-line);--line-2:var(--ms-line-2);--accent:var(--ms-accent);
}
.isMain .main-sec.ubx-sec.sec-mission .ubx h2.h{color:var(--ms-ink);font-size:clamp(24px,3vw,40px)}
.isMain .main-sec.ubx-sec.sec-mission .ubx h2.h em{color:var(--ms-accent)}
.isMain .main-sec.ubx-sec.sec-mission .ubx :focus-visible{outline-color:var(--ms-accent)}
.isMain .sec-mission .ubx .ms-card{
  background:#fff;border:1px solid var(--ms-line);box-shadow:var(--ms-shadow);   /* 테두리 2026-10-20 사용자 지시 */
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
/* 연결선 위를 달리는 혜성 — 레드로 부활(2026-10-20 사용자 지시). 색은 main-hero.js 가 이 토큰을 읽는다.
   흰 바탕이라 머리를 흰색으로 띄우지 않는다(--beam-white:0). 머리 = 브랜드 레드 · 꼬리 = 옅은 레드 */
.isMain .sec-mission .ubx .ms-flow{--beam-head:214,0,15;--beam-tail:245,140,146;--beam-white:0}
.isMain .sec-mission .ubx .ms-lb{color:var(--ms-ink)}
.isMain .sec-mission .ubx .ms-doc{
  border-color:var(--ms-line-2);
  background:
    linear-gradient(var(--ms-line-2),var(--ms-line-2)) 22% 38% / 46% 2px no-repeat,
    linear-gradient(var(--ms-line-2),var(--ms-line-2)) 22% 64% / 30% 2px no-repeat,
    #fff;
}
.isMain .sec-mission .ubx .ms-wire path{stroke:#8A8886;stroke-opacity:.6}
.isMain .sec-mission .ubx .ms-core{background:var(--ms-accent-wash);border-color:rgba(214,0,15,.45);box-shadow:0 0 0 clamp(4px,.6vw,8px) rgba(214,0,15,.06)}
.isMain .sec-mission.ms-live .ubx .ms-core{animation:none}   /* 흰 발광 맥동 — 밝은 바탕에선 얼룩으로 보인다 */
.isMain .sec-mission .ubx .ms-core svg{stroke:var(--ms-accent)}
.isMain .sec-mission .ubx .ms-orbit{border-color:rgba(214,0,15,.30)}
/* 로고: <img> 는 흰 로고(logo.png). 내용(HTML)은 안 건드리므로 그림을 상자 밖으로 밀고
   같은 자리에 검정 로고를 배경으로 깐다 — content:url() 보다 브라우저 지원이 넓다. */
.isMain .sec-mission .ubx .ms-logo{object-position:-99999px 0;background:url(/_Img/Layout/logo_bk.png) no-repeat center/contain}

/* ─────────── 지금 시작해보세요(질문 5) ─────────── */
.isMain #main .main-sec3{background:var(--ms-alt);border-top:1px solid var(--ms-line);padding:var(--ms-sec-pad) 0}
.isMain .main-sec3:before{display:none}
.isMain .main-sec3 .tit-box .s-tit{font-size:clamp(15px,1.4vw,18px);font-weight:500;color:var(--ms-ink-3);margin-bottom:8px}
.isMain .main-sec3 .tit-box .m-tit{font-size:clamp(24px,3vw,40px);color:var(--ms-ink)}
.isMain .main-sec3 .links-box .link{background:#fff;border:1px solid var(--ms-line);box-shadow:var(--ms-shadow);transition:box-shadow .2s ease}   /* 테두리 2026-10-20 사용자 지시 */
.isMain .main-sec3 .links-box .link:before,
.isMain .main-sec3 .links-box .link::after{display:none}
.isMain .main-sec3 .links-box .num{color:var(--ms-accent)}
.isMain .main-sec3 .links-box .tit{color:var(--ms-ink)}
.isMain .main-sec3 .links-box .detail{color:var(--ms-accent);font-weight:500}
.isMain .main-sec3 .links-box .m-link{background:var(--ms-accent);border-color:transparent}   /* 레드 카드는 회색 테두리 대신 바탕색이 비치게 — 크기는 다른 카드와 같다 */
.isMain .main-sec3 .links-box .m-link :is(.tit,.detail){color:#fff}
.isMain .main-sec3 .links-box .m-link .num{background:#fff;color:var(--ms-accent)}
@media (hover:hover){
  .isMain .main-sec3 .links-box .link:hover{box-shadow:var(--ms-shadow-hover)}
  .isMain .main-sec3 .links-box .link:hover .detail{text-decoration:underline;text-underline-offset:3px}
  /* 레드 카드 호버 시 진한 레드로 바뀌던 것 삭제(2026-10-20 사용자 지시 — 호버해도 색은 그대로) */
}
@media all and (max-width:520px){
  /* 폰은 번호를 글자 앞에 인라인으로 붙인다(main-hero.css ㉘) — 흰 칩 대신 흰 글자 */
  .isMain .main-sec3 .links-box .m-link .num{background:none;color:#fff}
}

/* ─────────── 레퍼런스 · 도입사례 ─────────── */
.isMain #main .main-sec4{background:#fff;border-top:1px solid var(--ms-line);padding:var(--ms-sec-pad) 0}
.isMain .main-sec4 .m-tit strong{color:var(--ms-ink)}
.isMain .main-sec4 .m-tit p{color:var(--ms-ink-3)}
.isMain .main-sec4 .case-item{
  --case-pad:clamp(20px,1.8vw,32px);
  background:#fff;border:1px solid var(--ms-line);box-shadow:var(--ms-shadow);transition:box-shadow .2s ease;   /* 테두리 2026-10-20 사용자 지시 */
  padding-bottom:calc(var(--case-pad) + 40px);   /* 맨 아래 '도입사례 더보기' 링크 자리 */
}
.isMain .main-sec4 .case-item::after{display:none}
.isMain .main-sec4 .case-logo{background:transparent}
.isMain .main-sec4 .case-quote p{color:#323130}
.isMain .main-sec4 .case-prod span{border-color:var(--ms-line-2);color:var(--ms-ink-2)}
.isMain .main-sec4 .case-by{color:var(--ms-ink-3)}
/* 호버 오버레이(보라 그라데이션) → 늘 보이는 카드 아래 가운데 링크. 카드 전체 클릭(stretched link)은 그대로.
   ⭐ 링크 상자는 카드 전체(inset:0)라 align-items 로 세로 가운데를 주면 카드 한복판으로 올라간다.
      그래서 줄(line)은 align-content 로 맨 아래에 두고, 그 줄 '안에서' 글자와 > 를 align-items:center 로
      맞춘다(2026-10-19 사용자 지시 — 가로·세로 가운데). align-content 는 wrap 이어야 먹는다. */
.isMain .main-sec4 .case-more{
  opacity:1;background-image:none;color:var(--ms-accent);
  flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:flex-end;align-items:center;gap:8px;
  padding:var(--case-pad);
}
.isMain .main-sec4 .case-more .txt{font-size:16px;font-weight:500;line-height:1.4}
.isMain .main-sec4 .case-more .arr{width:8px;margin:0}
.isMain .main-sec4 .case-by{padding-right:0}   /* ≤520 원본은 오른쪽 링크 자리로 70px 비웠다 — 링크가 가운데로 와서 불필요 */
.isMain .main-sec4 .case-more:focus-visible{outline-color:var(--ms-accent)}
@media (hover:hover){
  .isMain .main-sec4 .case-item:hover{box-shadow:var(--ms-shadow-hover)}
  .isMain .main-sec4 .case-item:hover .case-more .txt{text-decoration:underline;text-underline-offset:3px}
}

/* ─────────── 자주 묻는 질문 ─────────── */
.isMain #main .main-sec5{background:var(--ms-alt);border-top:1px solid var(--ms-line);padding:var(--ms-sec-pad) 0}
.isMain .main-sec5 .tit-box .m-tit{font-size:clamp(24px,3vw,40px);color:var(--ms-ink)}
.isMain .main-sec5 .tit-box .s-tit{color:var(--ms-ink-3)}
.isMain .main-sec5 .faq-item,
.isMain .main-sec5 .faq-item:first-child{border-color:var(--ms-line-2)}
.isMain .main-sec5 .faq-q{color:var(--ms-ink)}
.isMain .main-sec5 .faq-q .num{color:var(--ms-accent)}
.isMain .main-sec5 .faq-a p{color:var(--ms-ink-2)}
.isMain .main-sec5 .faq-a a{color:var(--ms-accent);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){
  .isMain .main-sec5 .faq-q:hover .txt{color:var(--ms-accent)}
}

/* ─────────── CTA 밴드 (메인 크기만) ─────────── */
.isMain #cta-wrap .cta-band{
  margin-top:0;
  min-height:0;padding:var(--ms-sec-pad) var(--gutter-min);
}
/* 색(바탕·글자·버튼)은 2026-10-20 부터 전 페이지 공용 — layout.css 맨 아래 'CTA 밴드 테마색 단색'. 여기는 메인의 크기만 */
.isMain #cta-wrap .cta-band-tit{font-size:clamp(22px,2.8vw,36px)}
.isMain #cta-wrap .cta-btn{height:52px}