:root { /* ════════════════════════════════════════════════════════════════ BRAND — Blue (인사책 프라이머리) #2B74FB (brand-600) 가 메인. 50→900 shade 로 위계 표현. ════════════════════════════════════════════════════════════════ */ --brand-50: #EBF4FF; --brand-100: #D6E9FF; --brand-200: #B3D9FF; --brand-300: #7FB8FF; --brand-400: #5B9EFF; --brand-500: #4086FF; --brand-600: #2B74FB; /* PRIMARY — 버튼/링크/액센트 */ --brand-700: #1F5FD3; --brand-800: #1B4A99; --brand-900: #152E66; /* ════════════════════════════════════════════════════════════════ SEMANTIC — 역할 기반 색상 (3 포털 모두 동일) ════════════════════════════════════════════════════════════════ */ --success: #059669; /* emerald-600 — 승인/완료/긍정 */ --success-bg: #ecfdf5; --warning: #d97706; /* amber-600 — 대기/주의 */ --warning-bg: #fffbeb; --error: #dc2626; /* red-600 — 반려/오류 */ --error-bg: #fef2f2; --info: #2563eb; /* blue-600 — 정보 배지 */ --info-bg: #eff6ff; /* ════════════════════════════════════════════════════════════════ NEUTRALS — Slate scale (글자/배경/보더) ════════════════════════════════════════════════════════════════ */ --surface: #ffffff; --neutral-50: #f8fafc; --neutral-100: #f1f5f9; --neutral-200: #e2e8f0; --neutral-300: #cbd5e1; --neutral-400: #94a3b8; --neutral-500: #64748b; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1e293b; --neutral-900: #0f172a; /* ════════════════════════════════════════════════════════════════ RADIUS — 4단계 + full (Tailwind 스케일과 정확히 매칭) sm: 6px → rounded-md — 칩/인풋 작은 요소 md: 8px → rounded-lg — 버튼/배너 lg: 12px → rounded-xl — 카드 (기본) xl: 16px → rounded-2xl — 모달/큰 카드 full:9999px → rounded-full — 원형 (아바타/알림 점) ════════════════════════════════════════════════════════════════ */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px; /* ════════════════════════════════════════════════════════════════ SHADOW — 3단계 1: 정적 카드 (가장 약함) 2: 호버/떠 있는 카드 3: 모달/팝오버 (가장 강함) ════════════════════════════════════════════════════════════════ */ --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.04); --shadow-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-3: 0 8px 24px rgba(15, 23, 42, 0.12), 0 24px 60px rgba(15, 23, 42, 0.18); /* ════════════════════════════════════════════════════════════════ TYPE SCALE — 7단계 (한글 가독성 최소 14px 보장, 2026-08-05 한 단계 → 2026-08-06 사장 지시로 한 단계 더) ───────── 하한선: 14px (사다리 T1 마이크로). 한글은 11px 이하에서 받침 획이 뭉갠다. 밀도가 필요해도 14px 아래로는 내리지 않는다. 예외: FontAwesome 글리프(아이콘)는 상향 대상이 아니다 — 아이콘을 키우면 "복잡해 보인다"는 지적이 악화된다. design-system.ts 의 CSS_TYPE_SCALE 이 :not([class*="fa-"]) 로 제외한다. ── 타이포 조정 스위치 (2026-08-05, 목표값 2026-08-06 재작성) ──── --ins-type-step : 1 = 상향 사다리 적용 / 0 = 크기 전면 원복 (이 값 하나) ★step 값은 0/1 두 상태뿐 — "한 단계 더"는 step=2 가 아니라 Δ계수(목표값) 재작성으로 한다. step=2 는 발산([8px]→16px)한다.★ --ins-w-emph : 클래스 강조 굵기. 600 = 신규 L2 / 700 = 원복 (이 값 하나) 두 축은 독립이라 따로 되돌릴 수 있고, 어느 쪽도 style.css 재빌드가 필요 없다. 규칙 문서: docs/reference/typography-rules.md ════════════════════════════════════════════════════════════════ */ --ins-type-step: 1; --ins-w-emph: 600; --ins-type-pc: 0; --ins-row-h: 44px; --ins-ctl-h: 44px; --text-xs: calc(12px + 2px * var(--ins-type-step) + 1px * var(--ins-type-pc)); --text-sm: calc(13px + 2px * var(--ins-type-step) + 1px * var(--ins-type-pc)); --text-md: calc(15px + 1px * var(--ins-type-pc)); --text-lg: calc(16px + 1px * var(--ins-type-pc)); --text-xl: calc(20px + 1px * var(--ins-type-pc)); --text-2xl: calc(24px + 1px * var(--ins-type-pc)); --text-3xl: 32px; /* ════════════════════════════════════════════════════════════════ SPACING — 4px base 8단계 ════════════════════════════════════════════════════════════════ */ --space-2xs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; /* ════════════════════════════════════════════════════════════════ FONTS - sans: Pretendard Variable (한글 + 영문 통합) → 폰트 로드는 Phase 1.1 에서 추가. 미로드 시 시스템 폰트 폴백. - mono: Geist Mono → JetBrains → IBM Plex 순 폴백 ════════════════════════════════════════════════════════════════ */ --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; --font-mono: "Geist Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } @media (min-width:768px){:root{--ins-type-pc:2}} @media (min-width:768px) and (pointer:fine){:root{--ins-row-h:32px;--ins-ctl-h:36px}} /* ════════════════════════════════════════════════════════════════ 유틸리티 클래스 (토큰 직접 사용 시 편의) 기존 Tailwind 클래스를 대체하지 않음 — 보조 도구. ════════════════════════════════════════════════════════════════ */ .r-sm { border-radius: var(--r-sm); } .r-md { border-radius: var(--r-md); } .r-lg { border-radius: var(--r-lg); } .r-xl { border-radius: var(--r-xl); } .r-full { border-radius: var(--r-full); } .shadow-1 { box-shadow: var(--shadow-1); } .shadow-2 { box-shadow: var(--shadow-2); } .shadow-3 { box-shadow: var(--shadow-3); } .font-sans { font-family: var(--font-sans); } .font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ════════════════════════════════════════════════════════════════ 카드 위계 — 1-카드 우선 원칙 한 페이지에 주인공 카드는 1개, 나머지는 평면(flat). primary: 그림자 강함, 시선 끌어들임. flat: 그림자 없음, 보더만 — 정보 그릇 역할. meta: 배경도 없음, 가장 약함 — 부수 정보. ════════════════════════════════════════════════════════════════ */ .card-primary { background: #ffffff; border: 1px solid #e2e8f0; border-radius: var(--r-lg); box-shadow: var(--shadow-2); } .card-flat { background: #ffffff; border: 1px solid #e2e8f0; border-radius: var(--r-lg); } .card-meta { background: transparent; border: 1px solid #f1f5f9; border-radius: var(--r-md); } /* ════════════════════════════════════════════════════════════════ EMPTY STATE — 통일된 보이스 (3.5) .empty-state: 모든 빈 상태가 같은 패턴 사용 ────────────
메시지
선택 CTA →
════════════════════════════════════════════════════════════════ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; text-align: center; } .empty-state-icon { font-size: 28px; color: #cbd5e1; margin-bottom: 10px; } .empty-state-text { font-size: 14px; color: #64748b; font-weight: 500; line-height: 1.5; } .empty-state-cta { margin-top: 12px; font-size: calc(12px + 2px * var(--ins-type-step)); /* 12 → 14 */ font-weight: 600; /* L2 — 링크형 CTA */ color: var(--brand-600); text-decoration: none; } .empty-state-cta:hover { color: var(--brand-700); text-decoration: underline; } /* 마케팅 공통 토큰 보강 */ body { font-family: var(--font-sans, 'Pretendard', -apple-system, sans-serif); color: var(--neutral-900); background: #ffffff; margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { box-sizing: border-box; } a { color: var(--brand-700); text-decoration: none; } a:hover { color: var(--brand-800); } /* 자체 폰트 변수 — design-tokens 의 :root 를 뒤에서 덮어쓴다(--font-mono 에서 Geist Mono·JetBrains·IBM Plex 가 빠진다) */ :root { --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace; } .header-action-link { position:relative; display:inline-grid; place-items:center; height:44px; min-height:44px; padding:0 10px; border:0; border-radius:0; background:transparent; color:#283954; font-size:15px; font-weight:800; line-height:1; text-decoration:none; white-space:nowrap; } .header-action-separator { color:#bdc9db; font-size:16px; line-height:1; user-select:none; } .header-action-label { grid-area:1/1; transition:opacity 500ms ease-in-out,transform 500ms ease-in-out; } .header-action-icon { position:absolute; inset:0; margin:auto; width:26px; height:26px; opacity:0; transform:translateY(5px) scale(.8); stroke-dasharray:90; stroke-dashoffset:90; transition:opacity 500ms ease-in-out,transform 500ms ease-in-out,stroke-dashoffset 500ms ease-in-out; } .header-action-link:focus-visible { outline:2px solid #8dbbff; outline-offset:2px; } .header-action-link:focus-visible .header-action-label { opacity:0; transform:translateY(-5px) scale(.92); } .header-action-link:focus-visible .header-action-icon { opacity:1; transform:translateY(0) scale(1); stroke-dashoffset:0; } @media(hover:hover) and (pointer:fine) { .header-action-link:hover .header-action-label { opacity:0; transform:translateY(-5px) scale(.92); } .header-action-link:hover .header-action-icon { opacity:1; transform:translateY(0) scale(1); stroke-dashoffset:0; } } @media(prefers-reduced-motion:reduce) { .header-action-label,.header-action-icon { transition:none; } } .ms-category-nav { width: 100%; min-width: 0; container: marketing-categories / inline-size; color: var(--neutral-800, #17243a); background: #fff; text-align: left; } .ms-category-nav, .ms-category-nav * { box-sizing: border-box; } .ms-category-nav .ms-category-nav__layout { display: grid; grid-template-columns: 176px minmax(0, 1fr); min-width: 0; } .ms-category-nav .ms-category-nav__tabs { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 12px; background: var(--neutral-50, #f7faff); border-right: 1px solid var(--brand-100, #e3ebf7); } .ms-category-nav .ms-category-nav__tab { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 38px; margin: 0; padding: 8px 12px; border: 0; border-radius: var(--r-lg, 12px); cursor: pointer; background: transparent; color: var(--neutral-600, #617b9d); font: inherit; font-size: 14px; font-weight: 650; line-height: 1.4; letter-spacing: -.035em; text-align: left; word-break: keep-all; transition: color 180ms ease, background-color 180ms ease; } .ms-category-nav .ms-category-nav__tab[aria-selected="true"] { color: var(--brand-700, #176eef); background: var(--brand-50, #e6f0ff); font-weight: 750; } .ms-category-nav .ms-category-nav__arrow { color: var(--brand-500, #669deb); font-size: 20px; line-height: 1; opacity: 0; } .ms-category-nav .ms-category-nav__tab[aria-selected="true"] .ms-category-nav__arrow { opacity: 1; } .ms-category-nav .ms-category-nav__panels { min-width: 0; min-height: 0; padding: 20px; } .ms-category-nav .ms-category-nav__panel { min-width: 0; margin: 0; } .ms-category-nav .ms-category-nav__panel + .ms-category-nav__panel { margin-top: 32px; } .ms-category-nav[data-category-initialized="true"] .ms-category-nav__panel { margin-top: 0; } .ms-category-nav .ms-category-nav__panel[hidden] { display: none; } .ms-category-nav .ms-category-nav__title { margin: 0 0 14px; padding: 0; color: #111; font: inherit; font-size: 20px; font-weight: 750; line-height: 1.35; letter-spacing: -.05em; } .ms-category-nav .ms-category-nav__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; min-width: 0; } .ms-category-nav a.ms-category-nav__link { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; min-height: 44px; margin: 0; padding: 7px 10px; border: 0; border-radius: var(--r-md, 8px); background: transparent; color: #111; font: inherit; font-size: 16px; font-weight: 650; line-height: 1.35; letter-spacing: -.035em; text-align: left; white-space: normal; text-decoration: none; word-break: keep-all; overflow-wrap: anywhere; transition: color 180ms ease, background-color 180ms ease; } .ms-category-nav a.ms-category-nav__link::before, .ms-category-nav a.ms-category-nav__link::after { content: none; } .ms-category-nav .ms-category-nav__icon, .ms-category-nav .ms-page-menu-icon { display: block; width: 30px; height: 30px; flex: none; object-fit: contain; } .ms-category-nav .ms-category-nav__copy { min-width: 0; } .ms-category-nav .ms-category-nav__label { display: block; } .ms-category-nav :where(button, a, [role="tabpanel"]):focus-visible { outline: 3px solid var(--brand-300, #7fb8ff); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .ms-category-nav .ms-category-nav__tab:hover { color: var(--brand-700, #176eef); background: var(--brand-50, #edf5ff); } .ms-category-nav a.ms-category-nav__link:hover { color: #111; background: var(--brand-50, #edf5ff); } } @container marketing-categories (max-width: 700px) { .ms-category-nav .ms-category-nav__layout { grid-template-columns: minmax(0, 1fr); } .ms-category-nav .ms-category-nav__tabs { flex-direction: row; overflow-x: auto; overscroll-behavior-x: contain; gap: 6px; padding: 12px; border-right: 0; border-bottom: 1px solid var(--brand-100, #e3ebf7); scrollbar-width: thin; } .ms-category-nav .ms-category-nav__tab { flex: none; width: auto; min-height: 44px; padding: 10px 14px; font-size: 14px; white-space: nowrap; } .ms-category-nav .ms-category-nav__arrow { display: none; } .ms-category-nav .ms-category-nav__panels { min-height: 0; padding: 20px 16px; } .ms-category-nav .ms-category-nav__title { font-size: 20px; margin-bottom: 12px; } .ms-category-nav .ms-category-nav__links { grid-template-columns: minmax(0, 1fr); gap: 6px; } .ms-category-nav a.ms-category-nav__link { min-height: 44px; padding: 7px 10px; font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .ms-category-nav .ms-category-nav__tab, .ms-category-nav a.ms-category-nav__link { transition: none; } } .ms-nav-panel .ms-nav-panel-inner.ms-nav-panel-inner--categories { display:block; padding:0; } .ms-nav .ms-nav-group .ms-nav-panel .ms-category-nav a.ms-category-nav__link::before, .ms-nav .ms-mobile-menu .ms-mobile-panel .ms-category-nav a.ms-category-nav__link::before { content:none; display:none; } #teamwork-evaluation { scroll-margin-top:100px; } /* ─── Container ─── */ .ms-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } @media (max-width: 640px) { .ms-container { padding: 0 16px; } } .ms-page { overflow-x: clip; background: #ffffff; } .ms-page main { min-height: 40vh; } .ms-page :where(h1, h2, h3, p, a, span, li, summary) { letter-spacing: 0; word-break: keep-all; overflow-wrap: break-word; } .ms-page :where(a, button, summary):focus-visible { outline: 3px solid var(--brand-300); outline-offset: 3px; } /* ─── Hero ─── */ .ms-hero { min-height: min(660px, calc(100svh - 104px)); padding: 96px 0 104px; position: relative; display: flex; align-items: center; overflow: hidden; background: var(--brand-50); border-bottom: 1px solid var(--brand-100); isolation: isolate; } .ms-hero > .ms-container { position: relative; z-index: 2; width: 100%; text-align: center; } .ms-hero:not(.ms-hero-img) { min-height: min(520px, calc(100svh - 136px)); padding: 72px 0 80px; } @media (max-width: 640px) { .ms-hero { min-height: min(620px, calc(100svh - 86px)); padding: 56px 0 68px; } .ms-hero:not(.ms-hero-img) { min-height: min(520px, calc(100svh - 136px)); padding: 48px 0 56px; } } .ms-hero-img { background-color: var(--brand-50); } .ms-hero-media { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; } .ms-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-position, center right); } .ms-hero-img::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(235, 244, 255, 0.84); pointer-events: none; } .ms-hero-img .ms-h1 { max-width: 760px; } .ms-hero-img .ms-lead { max-width: 580px; color: var(--neutral-700); } @media (max-width: 640px) { .ms-hero-media img { object-position: var(--hero-mobile-position, 58% center); } .ms-hero-img::before { background: rgba(235, 244, 255, 0.9); } } .ms-h1 { font-size: clamp(32px, 6vw, 56px); font-weight: 900; line-height: 1.15; color: var(--neutral-900); max-width: 820px; margin: 0 auto 14px; letter-spacing: 0; text-align: center; word-break: keep-all; } .ms-h1-accent { color: var(--brand-600); font-style: normal; } .ms-lead { font-size: clamp(15px, 2.2vw, 18px); color: var(--neutral-600); max-width: 640px; line-height: 1.6; margin: 0 auto 32px; text-align: center; } .ms-cta-group { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .ms-footer-badge { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .ms-footer-badge a:hover { opacity: 0.88; transition: opacity .15s; } .ms-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-600); color: #ffffff; padding: 14px 28px; border-radius: var(--r-md); font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: 0 8px 24px rgba(43,116,251,0.35); transition: transform 0.15s, box-shadow 0.15s, background 0.15s; } .ms-btn-primary:hover { transform: translateY(-2px); background: var(--brand-700); box-shadow: 0 12px 32px rgba(43,116,251,0.45); } .ms-btn-primary:active { transform: translateY(0) scale(0.98); } .ms-btn-lg { padding: 18px 36px; font-size: 16px; } .ms-btn-secondary { display: inline-flex; align-items: center; gap: 8px; background: #ffffff; color: var(--brand-700); padding: 14px 28px; border-radius: var(--r-md); font-size: 15px; font-weight: 700; text-decoration: none; border: 1.5px solid var(--brand-200); transition: border-color 0.15s, color 0.15s, background-color 0.15s, transform 0.15s; } .ms-btn-secondary:hover { border-color: var(--brand-600); color: var(--brand-800); background: var(--brand-50); transform: translateY(-2px); } .ms-btn-secondary:active { transform: translateY(0) scale(0.98); } .ms-trust { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 36px; font-size: var(--text-sm); color: var(--neutral-600); } .ms-trust-item { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .ms-trust-item i { color: var(--success); } @media (max-width: 480px) { .ms-cta-group { width: 100%; } .ms-cta-group > a { width: 100%; min-height: 50px; justify-content: center; } .ms-trust { gap: 10px 16px; margin-top: 24px; } .ms-trust-item { width: 100%; } } /* ─── Section ─── */ .ms-section-wrap { padding: 88px 0; } .ms-page [id$="-faq"], .ms-page #faq { scroll-margin-top: 112px; } .ms-section-wrap + .ms-section-wrap { border-top: 1px solid var(--brand-100); } @media (max-width: 640px) { .ms-section-wrap { padding: 64px 0; } } .ms-section-wrap > .ms-container { text-align: center; } .ms-section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; } .ms-section-title { font-size: clamp(24px, 4vw, 36px); font-weight: 900; margin: 0 0 12px; letter-spacing: 0; text-align: center; } .ms-section-sub { font-size: 16px; margin: 0; line-height: 1.6; text-align: center; } /* ─── FeatureCard (숫자 인덱스 + var(--font-mono) — AI slop #3 회피) 마케팅 면의 --font-mono 는 MARKETING_BASE_CSS 가 다시 정의해 Geist Mono 없이 시스템 mono 로 떨어진다. ─── */ .ms-fc { display: block; background: #ffffff; border: 1px solid var(--brand-100); border-radius: var(--r-md); padding: 28px 24px; text-align: center; text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background-color 0.2s; overflow: hidden; } .ms-fc:hover { border-color: var(--brand-300); transform: translateY(-4px); box-shadow: var(--shadow-2); background: var(--brand-50); } .ms-fc-with-image { padding: 0; } .ms-fc-body { padding: 28px 24px; text-align: center; } .ms-fc-with-image .ms-fc-body { padding: 20px 22px 24px; } .ms-fc-media { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--neutral-200); background: var(--neutral-100); overflow: hidden; } .ms-fc-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fc-image-position, center); transition: transform 0.55s ease; } .ms-fc:hover .ms-fc-media img { transform: scale(1.025); } .ms-fc-index { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 800; color: var(--brand-600); margin-bottom: 12px; line-height: 1; letter-spacing: 0; } .ms-fc-title { font-size: 17px; font-weight: 800; color: var(--neutral-900); margin: 0 0 8px; } .ms-fc-desc { font-size: 14px; color: var(--neutral-600); line-height: 1.6; margin: 0; } .ms-fc-mono { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--brand-700); margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--neutral-200); } /* ─── 그리드 (AI slop #2 회피 — 기능 소개는 비대칭 .ms-grid-async 를 쓴다. .ms-grid-2 / .ms-grid-3 은 일반 카드 나열용이다) ─── */ .ms-grid-async { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; } .ms-grid-async > :nth-child(1) { grid-row: span 2; } @media (max-width: 768px) { .ms-grid-async { grid-template-columns: 1fr; } .ms-grid-async > :nth-child(1) { grid-row: auto; } } .ms-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 640px) { .ms-grid-2 { grid-template-columns: 1fr; } } .ms-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; } @media (max-width: 900px) { .ms-grid-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .ms-grid-3 { grid-template-columns: 1fr; } } /* ─── NFC 상품 선택 + 상세 이미지 ─── */ .nfc-product-experience { position: relative; } .nfc-product-radio { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .nfc-product-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 980px; margin: 0 auto; } .nfc-product-option-group { display: grid; grid-template-rows: 1fr auto; gap: 12px; min-width: 0; } .nfc-product-option { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid var(--brand-100); border-radius: var(--r-md); background: white; color: var(--neutral-900); text-align: center; cursor: pointer; box-shadow: var(--shadow-1); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .nfc-product-option-store .ms-btn-primary { width: 100%; } .nfc-product-option:hover { border-color: var(--brand-300); box-shadow: var(--shadow-2); transform: translateY(-3px); } .nfc-product-option-media { aspect-ratio: 1; overflow: hidden; border-bottom: 1px solid var(--brand-100); background: var(--neutral-100); } .nfc-product-option-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .nfc-product-option-copy { padding: 24px; } .nfc-product-option-kicker { display: block; margin-bottom: 8px; color: var(--brand-700); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 800; } .nfc-product-option-title { margin: 0 0 8px; color: var(--neutral-900); font-size: var(--text-xl); font-weight: 900; } .nfc-product-option-price { display: block; margin-bottom: 12px; color: var(--brand-700); font-size: var(--text-2xl); font-weight: 900; } .nfc-product-option-desc { min-height: 45px; margin: 0 0 18px; color: var(--neutral-600); font-size: var(--text-md); line-height: 1.65; } .nfc-product-option-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; color: var(--brand-700); font-size: var(--text-md); font-weight: 800; } #nfc-product-sticker:checked ~ .ms-section-wrap .nfc-product-option[for="nfc-product-sticker"], #nfc-product-holder:checked ~ .ms-section-wrap .nfc-product-option[for="nfc-product-holder"] { border-color: var(--brand-600); box-shadow: var(--shadow-2); } #nfc-product-sticker:focus-visible ~ .ms-section-wrap .nfc-product-option[for="nfc-product-sticker"], #nfc-product-holder:focus-visible ~ .ms-section-wrap .nfc-product-option[for="nfc-product-holder"] { outline: 3px solid var(--brand-300); outline-offset: 4px; } .nfc-detail-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-width: 680px; margin: 0 auto 32px; padding: 4px; border: 1px solid var(--brand-100); border-radius: var(--r-md); background: var(--brand-50); } .nfc-detail-tab { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 14px; border-radius: var(--r-sm); color: var(--neutral-700); font-size: var(--text-md); font-weight: 800; cursor: pointer; } .nfc-detail-tab strong { color: inherit; } #nfc-product-sticker:checked ~ .ms-section-wrap .nfc-detail-tab[for="nfc-product-sticker"], #nfc-product-holder:checked ~ .ms-section-wrap .nfc-detail-tab[for="nfc-product-holder"] { background: var(--brand-600); color: white; } .nfc-product-panel { display: none; } .nfc-product-panels { margin-top: 48px; } #nfc-product-sticker:checked ~ .ms-section-wrap .nfc-product-panel[data-nfc-product="sticker"], #nfc-product-holder:checked ~ .ms-section-wrap .nfc-product-panel[data-nfc-product="holder"] { display: block; } .nfc-product-detail-head { max-width: 720px; margin: 0 auto 28px; text-align: center; } .nfc-product-detail-head h3 { margin: 0 0 8px; color: var(--neutral-900); font-size: var(--text-2xl); font-weight: 900; } .nfc-product-detail-head strong { display: block; margin-bottom: 10px; color: var(--brand-700); font-size: var(--text-2xl); } .nfc-product-detail-head p { margin: 0; color: var(--neutral-600); font-size: var(--text-md); line-height: 1.7; } .nfc-product-detail-image { display: block; width: 100%; max-width: 860px; height: auto; margin: 0 auto; background: white; } .nfc-product-purchase { max-width: 760px; margin: 32px auto 0; text-align: center; } .nfc-product-purchase-link { display: none; } #nfc-product-sticker:checked ~ .ms-section-wrap .nfc-product-purchase-link--sticker, #nfc-product-holder:checked ~ .ms-section-wrap .nfc-product-purchase-link--holder { display: inline-block; } .nfc-product-purchase p { margin: 14px 0 0; color: var(--neutral-500); font-size: var(--text-sm); line-height: 1.65; } @media (max-width: 640px) { .nfc-product-options { grid-template-columns: 1fr; gap: 16px; } .nfc-product-option-copy { padding: 20px 18px; } .nfc-product-option-desc { min-height: 0; } .nfc-detail-tabs { gap: 2px; padding: 3px; } .nfc-detail-tab { flex-direction: column; gap: 2px; min-height: 56px; padding: 8px 6px; } .nfc-product-detail-head { margin-bottom: 20px; } } /* ─── FAQItem ─── */ .ms-faq-item { background: #ffffff; border: 1px solid var(--brand-100); border-radius: var(--r-md); padding: 0; margin-bottom: 12px; text-align: center; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .ms-faq-item[open] { border-color: var(--brand-300); box-shadow: var(--shadow-1); } .ms-faq-q { padding: 18px 22px; font-weight: 700; color: var(--neutral-900); text-align: center; cursor: pointer; list-style: none; font-size: 16px; } /* 질문 h3 는 ★모양이 아니라 구조★ 다 — 인라인·글꼴 상속으로 종전 렌더를 그대로 유지한다 (블록이면 위 ::before 의 「+」 마커가 줄바꿈된다). */ .ms-faq-q h3 { display: inline; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; } .ms-faq-q::-webkit-details-marker { display: none; } .ms-faq-q::before { content: '+'; margin-right: 12px; color: var(--brand-600); font-weight: 800; font-size: 20px; } .ms-faq-item[open] .ms-faq-q::before { content: '−'; } .ms-faq-a { padding: 0 22px 20px; color: var(--neutral-600); line-height: 1.7; font-size: 14.5px; text-align: center; } /* ─── BlogCard ─── */ .ms-blog-card { display: block; background: #ffffff; border: 1px solid var(--neutral-200); border-radius: var(--r-xl); padding: 28px 26px; text-align: center; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; } .ms-blog-card:hover { border-color: var(--brand-200); transform: translateY(-3px); box-shadow: var(--shadow-2); } .ms-blog-meta { font-family: var(--font-mono); font-size: 11px; color: var(--neutral-500); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; } .ms-blog-title { font-size: 18px; font-weight: 800; color: var(--neutral-900); margin: 0 0 10px; line-height: 1.4; } .ms-blog-excerpt { font-size: 14px; color: var(--neutral-600); line-height: 1.6; margin: 0 0 14px; } .ms-blog-cta { font-size: 13px; font-weight: 700; color: var(--brand-700); } /* ─── LegalDisclaimer ─── */ .ms-disclaimer { background: var(--warning-bg); border: 1px solid var(--warning); border-radius: var(--r-md); padding: 14px 18px; font-size: 13px; color: var(--neutral-700); margin: 20px 0; text-align: center; } .ms-disclaimer strong { color: var(--warning); display: block; margin-bottom: 6px; } .ms-disclaimer p { margin: 4px 0; line-height: 1.55; } .ms-disclaimer a { color: var(--warning); text-decoration: underline; } /* ─── PlaceholderField ─── */ .ms-pf { background: var(--neutral-100); border: 1.5px dashed var(--neutral-300); border-radius: var(--r-md); padding: 14px 18px; margin: 10px 0; text-align: center; } .ms-pf strong { display: block; color: var(--neutral-700); margin-bottom: 6px; font-size: 13px; } .ms-pf-todo { color: var(--brand-600); font-weight: 700; font-size: 12px; } .ms-pf small { display: block; margin-top: 6px; color: var(--neutral-500); font-size: 11px; } .ms-pf-filled { padding: 8px 0; font-size: 14px; color: var(--neutral-700); } .ms-pf-filled strong { color: var(--neutral-900); } /* ─── ComparisonRow ─── */ .ms-cmp-row th, .ms-cmp-row td { padding: 14px 16px; border-bottom: 1px solid var(--neutral-200); text-align: center; } .ms-cmp-row th { font-weight: 700; color: var(--neutral-700); font-size: 13.5px; } .ms-cmp-row td { color: var(--neutral-600); font-size: 14px; } .ms-cmp-ours { background: var(--brand-50); color: var(--brand-800); font-weight: 700; } .ms-cmp-highlight { background: var(--brand-50); } /* ─── Pricing card — 브랜드 단색으로 공개 페이지 톤 통일 ─── */ .ms-price-card { max-width: 480px; margin: 0 auto; background: var(--brand-600); color: #ffffff; border-radius: var(--r-xl); padding: 48px; text-align: center; box-shadow: 0 24px 60px rgba(43,116,251,0.35); } @media (max-width: 480px) { .ms-price-card { padding: 32px 24px; border-radius: var(--r-md); } } /* ─── Marketing nav bar ─── */ .ms-nav { position: sticky; top: 0; background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--neutral-200); z-index: 100; padding: 14px 0; transition: padding 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .ms-nav.is-scrolled { padding: 10px 0; border-color: var(--brand-100); box-shadow: var(--shadow-1); } .ms-nav .ms-container { max-width: 1320px; } .ms-nav-inner { display: grid; grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr); align-items: center; gap: 24px; } .ms-nav-brand { display: inline-flex; align-items: center; justify-self: start; gap: 12px; font-weight: 900; font-size: 18px; color: var(--neutral-900); text-decoration: none; } .ms-nav-brand i { color: var(--brand-600); } .ms-nav-menu { display: flex; align-items: center; justify-content: center; gap: 18px; white-space: nowrap; } .ms-nav-menu a { position: relative; min-height: 40px; display: inline-flex; align-items: center; color: var(--neutral-700); text-decoration: none; font-size: 13px; font-weight: 700; } .ms-nav-menu a:hover { color: var(--brand-600); } .ms-nav-menu a.is-active { color: var(--brand-700); font-weight: 800; } .ms-nav-menu a.is-active::after { content: ''; position: absolute; right: 0; bottom: 1px; left: 0; height: 2px; background: var(--brand-500); } .ms-nav-actions { display: flex; align-items: center; justify-self: end; gap: 0; } .ms-nav-login, .ms-nav-signup { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: var(--r-md); font-size: 13px; font-weight: 800; text-decoration: none; } .ms-nav-login { color: var(--neutral-800); border: 1px solid var(--neutral-300); background: #ffffff; } .ms-nav-login:hover { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); } .ms-nav-login.is-active { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); } .ms-nav-signup { color: #ffffff; background: var(--brand-600); } .ms-nav-signup:hover { color: #ffffff; background: var(--brand-700); } .ms-nav .ms-nav-inner > .ms-mobile-actions { display: none; align-items: center; gap: 8px; } .ms-nav-mobile-cta { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--r-md); background: var(--brand-600); color: #ffffff; font-size: 13px; font-weight: 800; } .ms-nav-mobile-cta:hover { color: #ffffff; background: var(--brand-700); } .ms-mobile-menu { position: relative; } .ms-mobile-menu summary { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--brand-100); border-radius: var(--r-md); background: #ffffff; color: var(--brand-700); cursor: pointer; list-style: none; } .ms-mobile-menu summary::-webkit-details-marker { display: none; } .ms-mobile-menu summary:hover { background: var(--brand-50); border-color: var(--brand-300); } .ms-menu-close { display: none; } .ms-mobile-menu[open] .ms-menu-open { display: none; } .ms-mobile-menu[open] .ms-menu-close { display: inline-block; } .ms-mobile-panel { position: absolute; top: calc(100% + 10px); right: 0; width: min(340px, calc(100vw - 32px)); max-height: min(620px, calc(100svh - 92px)); overflow-y: auto; padding: 10px; border: 1px solid var(--brand-100); border-radius: var(--r-md); background: #ffffff; box-shadow: var(--shadow-3); } .ms-mobile-link, .ms-mobile-login { min-height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: var(--r-sm); color: var(--neutral-700); font-size: 14px; font-weight: 700; } .ms-mobile-link:hover, .ms-mobile-link.is-active { color: var(--brand-700); background: var(--brand-50); } .ms-mobile-login { margin-top: 8px; color: #ffffff; background: var(--brand-600); } .ms-mobile-login:hover { color: #ffffff; background: var(--brand-700); } /* ─── 메가 메뉴 — 소개·연동·지원(2026-10-12 사용자 정리). 소개·연동은 중복 대표 목차 없이 소분류만 표시한다. ─── 패널 링크는 서버가 HTML 로 다 찍어 내려보내고 여기서 접었다 편다. 그래서 접힌 상태에서도 크롤러·AI 가 를 전부 발견한다. */ .ms-nav-group { position: static; display: inline-flex; } .ms-nav-trigger { font: inherit; font-size: 13px; font-weight: 700; color: var(--neutral-700); background: none; border: 0; cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border-radius: var(--r-md); } .ms-nav-trigger i { font-size: 9px; opacity: .6; } .ms-nav:not(.is-menu-ready) .ms-nav-group:hover .ms-nav-trigger, .ms-nav:not(.is-menu-ready) .ms-nav-group:focus-within .ms-nav-trigger, .ms-nav.is-menu-ready .ms-nav-group.is-menu-open .ms-nav-trigger { color: var(--brand-700); background: var(--brand-50); } .ms-nav-group.is-active .ms-nav-trigger { color: var(--brand-700); font-weight: 800; } .ms-nav-panel { position: absolute; left: 0; right: 0; top: 100%; background: #ffffff; border-bottom: 1px solid var(--neutral-200); box-shadow: var(--shadow-1); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .14s ease; } /* JS owns the open state, so focus remaining on a trigger after Escape does not reveal the panel again. Native CSS navigation remains the no-JS path. */ .ms-nav:not(.is-menu-ready) .ms-nav-group:hover .ms-nav-panel, .ms-nav:not(.is-menu-ready) .ms-nav-group:focus-within .ms-nav-panel, .ms-nav.is-menu-ready .ms-nav-group.is-menu-open .ms-nav-panel { visibility: visible; opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .ms-nav-panel { transition: none; } } .ms-nav-panel-inner { max-width: 1320px; margin: 0 auto; padding: 28px 24px 32px; display: grid; grid-template-columns: minmax(170px, 1fr) 3fr; gap: 32px; text-align: left; } .ms-nav-panel-inner.ms-nav-panel-inner--no-rail { grid-template-columns: minmax(0, 1fr); } .ms-nav-col-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--neutral-500); margin: 0 0 12px; } /* 패널 안 링크는 .ms-nav-menu a 의 인라인 칩 스타일을 물려받으면 안 된다. */ .ms-nav-panel a.ms-nav-rail-link, .ms-nav-panel a.ms-nav-sub { display: block; min-height: 0; white-space: normal; } .ms-nav-panel a.ms-nav-rail-link::after, .ms-nav-panel a.ms-nav-sub::after { content: none; } .ms-nav-panel a.ms-nav-rail-link { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--neutral-900); margin-bottom: 12px; line-height: 1.35; } .ms-nav-panel a.ms-nav-rail-link:hover, .ms-nav-panel a.ms-nav-rail-link.is-active { color: var(--brand-700); } .ms-nav-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 26px; } /* Preserve category order while fitting each menu to its content. */ @media (min-width: 1025px) { #ms-panel-product { --menu-width: 1120px; --menu-columns: 6; } #ms-panel-integration { --menu-width: 640px; --menu-columns: 2; } #ms-panel-company { --menu-width: 880px; --menu-columns: 4; } .ms-nav-panel { left: 50%; right: auto; width: min(var(--menu-width), calc(100vw - 48px)); transform: translateX(-50%); border: 1px solid var(--brand-100); border-radius: 12px; } .ms-nav-panel .ms-nav-panel-inner { padding: 24px; gap: 24px; } .ms-nav-panel .ms-nav-cols { grid-template-columns: repeat(var(--menu-columns), minmax(0, 1fr)); gap: 24px; } } .ms-nav-panel a.ms-nav-sub { font-size: 13.5px; font-weight: 650; color: var(--neutral-700); margin-bottom: 9px; } .ms-nav-panel a.ms-nav-sub:hover { color: var(--brand-700); } .ms-nav-panel a.ms-nav-sub.is-active { color: var(--brand-700); font-weight: 800; } .ms-mobile-group { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--neutral-500); margin: 14px 0 2px; } @media (max-width: 1180px) { .ms-nav-menu { gap: 13px; } .ms-nav-menu a { font-size: 12px; } } @media (max-width: 900px) { .ms-nav-panel-inner { grid-template-columns: 1fr; gap: 22px; } } /* The mobile header keeps the same three public actions outside its menu. */ @media (max-width: 1024px) { .ms-nav-inner { grid-template-columns: minmax(0, 1fr) auto 44px; gap: 12px; } .ms-nav-menu { display: none; } .ms-nav .ms-nav-inner > .ms-mobile-actions { display: flex; } } @media (max-width: 600px) { .ms-nav .ms-container { padding-inline: 12px; } .ms-nav-inner { gap: 8px; } .ms-nav-brand { gap: 8px; } .ms-nav-actions .header-action-link { font-size:13px; padding-inline:6px; } .ms-mobile-panel { max-height: min(620px, calc(100svh - 90px)); } } @media (max-width: 380px) { .ms-nav-brand { gap: 8px; font-size: 17px; } .ms-nav-brand img { width: 26px !important; height: 26px !important; } .ms-nav-brand span { display:none; } } /* ─── Footer ─── */ .ms-footer { background: #ffffff; color: var(--neutral-600); padding: 64px 0 32px; border-top: 1px solid var(--brand-100); } .ms-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 36px; text-align: center; } @media (max-width: 768px) { .ms-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .ms-footer-grid { grid-template-columns: 1fr; } } .ms-footer-brand { color: var(--neutral-900); font-weight: 900; font-size: 18px; margin-bottom: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .ms-footer-brand i { color: var(--brand-400); } .ms-footer-tagline { font-size: 13px; line-height: 1.6; max-width: 280px; margin-inline: auto; } .ms-footer .ms-footer-badge { justify-content: center; } .ms-footer-col h2 { color: var(--brand-800); font-size: 13px; font-weight: 800; margin: 0 0 12px; letter-spacing: 0; } .ms-footer-col ul { list-style: none; padding: 0; margin: 0; } .ms-footer-col li { padding: 4px 0; font-size: 13px; } .ms-footer-col a { color: var(--neutral-600); text-decoration: none; transition: color 0.15s; } .ms-footer-col a:hover { color: var(--brand-700); } .ms-footer-bottom { border-top: 1px solid var(--brand-100); padding-top: 24px; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .ms-footer-biz { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; color: var(--neutral-500); line-height: 1.6; } .ms-footer-biz span { white-space: nowrap; } .ms-footer-biz a { color: var(--neutral-500); text-decoration: none; transition: color 0.15s; white-space: nowrap; } .ms-footer-biz a:hover { color: var(--brand-700); } @media (max-width: 480px) { .ms-footer-biz span { white-space: normal; } } /* ─── Public-page motion ─── */ .ms-motion .ms-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease var(--ms-reveal-delay, 0ms), transform 0.65s ease var(--ms-reveal-delay, 0ms); will-change: opacity, transform; } .ms-motion .ms-reveal.is-visible { opacity: 1; transform: translateY(0); } .ms-motion .ms-hero-img { animation: ms-hero-fade 0.9s ease both; } @keyframes ms-hero-fade { from { opacity: 0.65; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ms-page *, .ms-page *::before, .ms-page *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .ms-reveal { opacity: 1 !important; transform: none !important; } } /* ─── Guide breadcrumb ─── */ .ms-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--neutral-500); margin-bottom: 18px; flex-wrap: wrap; } .ms-crumb a { color: var(--neutral-500); text-decoration: none; } .ms-crumb a:hover { color: var(--brand-700); } .ms-crumb i { font-size: 9px; color: var(--neutral-300); } .ms-crumb span { color: var(--neutral-700); font-weight: 600; } /* ─── Guide article prose (renderMarkdown 출력 스타일) ─── */ .guide-prose { font-size: 16px; line-height: 1.8; color: var(--neutral-700); text-align: left; } .guide-prose h2 { font-size: 24px; font-weight: 800; color: var(--neutral-900); margin: 36px 0 14px; letter-spacing: -0.01em; } .guide-prose h3 { font-size: 19px; font-weight: 800; color: var(--neutral-900); margin: 28px 0 12px; } .guide-prose h4 { font-size: 16px; font-weight: 700; color: var(--neutral-900); margin: 22px 0 10px; } .guide-prose p { margin: 0 0 16px; } .guide-prose ul, .guide-prose ol { margin: 0 0 16px; padding-left: 22px; } .guide-prose li { margin: 6px 0; } .guide-prose blockquote { margin: 0 0 16px; padding: 12px 18px; border-left: 3px solid var(--brand-200); background: var(--neutral-50); color: var(--neutral-600); border-radius: var(--r-sm); } .guide-prose a { color: var(--brand-700); text-decoration: underline; } .guide-prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--neutral-100); padding: 2px 6px; border-radius: var(--r-sm); } .guide-prose strong { font-weight: 700; color: var(--neutral-900); } .guide-prose em { font-style: italic; } .guide-prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; display: block; overflow-x: auto; } .guide-prose thead th { background: var(--neutral-50); color: var(--neutral-900); font-weight: 700; text-align: left; } .guide-prose th, .guide-prose td { border: 1px solid var(--neutral-200); padding: 9px 12px; vertical-align: top; } .guide-prose tbody tr:nth-child(even) { background: var(--neutral-50); } .guide-prose pre { background: var(--neutral-900); color: var(--neutral-50); padding: 14px 16px; border-radius: var(--r-md); overflow-x: auto; margin: 0 0 20px; line-height: 1.6; } .guide-prose pre code { font-family: var(--font-mono); font-size: 13.5px; background: none; padding: 0; color: inherit; white-space: pre; } @font-face { font-family: 'InsaCheck Public Display'; src: url('/approved-design/c10003bb74d2/static/insacheck-home-final-20261007/5a1ef8c593ca/assets/210-omni-gothic-040.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; } .ms-intro-ui { --font-intro-heading: 'InsaCheck Public Display', var(--font-sans); --shadow-1: none; --shadow-2: none; --shadow-3: none; background: var(--surface); color: var(--brand-900); } .ms-intro-ui .ms-nav, .ms-intro-ui .ms-nav.is-scrolled, .ms-intro-ui .ms-nav-panel, .ms-intro-ui .ms-mobile-panel { box-shadow: none; } .ms-intro-ui .ms-nav, .ms-intro-ui .ms-nav.is-scrolled { padding-block: var(--space-md); } .ms-intro-ui .ms-nav-trigger, .ms-intro-ui .ms-nav-flat { font-size: var(--text-lg); font-weight: 800; } .ms-intro-ui .ms-nav-rail-link { font-size: var(--text-xl); font-weight: 800; } .ms-intro-ui .ms-nav-sub { font-size: var(--text-md); font-weight: 600; } .ms-intro-ui .ms-nav-col-label { border-bottom: 1px solid var(--brand-100); padding-bottom: var(--space-sm); } .ms-intro-ui .ms-hero:not(.ms-hero-img) { background: var(--surface) !important; min-height: 620px; padding: calc(var(--space-3xl) * 2) 0; } .ms-intro-ui .ms-h1 { max-width: 1060px; font-family: var(--font-intro-heading); font-size: clamp(var(--text-3xl), 5.4vw, calc(var(--text-3xl) * 2.25)); color: var(--brand-900); line-height: 1.22; margin-bottom: var(--space-xl); letter-spacing: -.035em; } .ms-intro-ui .ms-h1-accent { color: var(--brand-600); } .ms-intro-ui .ms-lead { max-width: 760px; font-size: var(--text-lg); line-height: 1.8; margin-bottom: var(--space-2xl); } /* Let short explanations wrap to the actual viewport instead of creating a new * line after every comma. Explicit authored
and long prose are untouched. */ .ms-intro-ui :is(.ms-lead, .ms-fc-desc, .ai-code-lead) .ms-prose-break:not(.ms-prose-sentence-break) { display: none; } .ms-intro-ui :is(.ms-btn-primary, .ms-btn-secondary) { justify-content: center; min-height: 60px; gap: var(--space-md); padding: var(--space-lg) var(--space-2xl); border-radius: var(--r-lg); font-size: var(--text-lg); font-weight: 800; box-shadow: none !important; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; } .ms-intro-ui .ms-btn-primary { background: var(--brand-600) !important; color: var(--surface) !important; } .ms-intro-ui .ms-btn-primary:hover { background: var(--brand-700) !important; transform: translateY(-2px); } .ms-intro-ui .ms-btn-secondary { border: 1px solid var(--brand-200); color: var(--brand-800); } .ms-intro-ui .ms-trust { gap: var(--space-lg) var(--space-2xl); margin-top: var(--space-3xl); font-weight: 700; } .ms-intro-ui .ms-trust-item i { color: var(--brand-600); } .ms-intro-ui .ms-section-wrap { padding-block: calc(var(--space-3xl) * 1.75); } .ms-intro-ui .ms-section-head { max-width: 1040px; margin-bottom: var(--space-3xl); } .ms-intro-ui .ms-section-title { font-family: var(--font-intro-heading); font-size: clamp(var(--text-3xl), 3.6vw, calc(var(--text-3xl) * 1.5)); color: var(--brand-900) !important; line-height: 1.35; letter-spacing: -.025em; } .ms-intro-ui .ms-section-sub { font-size: var(--text-lg); color: var(--neutral-600) !important; line-height: 1.75; } /* Section's existing tone is inline. Only the dark marketing CTA surface changes; * code snippets, real app screen colours and product selections keep their UI. */ .ms-intro-ui .ms-section-wrap[style*="--brand-700"] { background: var(--brand-50) !important; } .ms-intro-ui .ms-section-wrap[style*="--brand-700"] p { color: var(--neutral-600) !important; } .ms-intro-ui .ms-section-wrap[style*="--brand-700"] a:not(.ms-btn-primary) { color: var(--brand-700) !important; } .ms-intro-ui .ms-section-wrap p[style*="font-size:15px"] { font-size: var(--text-lg) !important; } .ms-intro-ui .ms-fc { padding: 0; border-color: var(--brand-100); border-radius: var(--r-xl); box-shadow: none; height: 100%; } .ms-intro-ui .ms-fc:hover { border-color: var(--brand-300); background: var(--brand-50); box-shadow: none; transform: translateY(-3px); } .ms-intro-ui .ms-fc-body { padding: var(--space-2xl); } .ms-intro-ui .ms-fc-index { font-family: var(--font-sans); font-size: var(--text-2xl); font-weight: 900; margin-bottom: var(--space-lg); } .ms-intro-ui .ms-fc-title { font-size: var(--text-xl); line-height: 1.45; color: var(--brand-900); margin-bottom: var(--space-md); } .ms-intro-ui .ms-fc-desc { font-size: var(--text-md); line-height: 1.8; } .ms-intro-ui .ms-fc-mono { font-family: var(--font-sans); font-size: var(--text-sm); border-top: 1px solid var(--brand-100); margin-top: var(--space-xl); padding-top: var(--space-lg); } .ms-intro-ui .ms-faq-item { border-radius: var(--r-lg); border-color: var(--brand-100); margin-bottom: var(--space-md); } .ms-intro-ui .ms-faq-item[open] { background: var(--brand-50); box-shadow: none; } .ms-intro-ui .ms-faq-q { padding: var(--space-xl); font-size: var(--text-lg); color: var(--brand-900); font-weight: 800; } .ms-intro-ui .ms-faq-a { padding: 0 var(--space-xl) var(--space-xl); font-size: var(--text-md); line-height: 1.8; } .ms-intro-ui .ms-footer { background: var(--surface); } /* Intro chrome may change, but simulated mailbox content stays pixel-for-pixel * in its own cmscreen scope. These rules only style its title and lead. */ .ms-intro-ui .cmscreen h1.cm-h { font-family: var(--font-intro-heading); font-size: clamp(var(--text-3xl), 4vw, calc(var(--text-3xl) * 1.5)); color: var(--brand-900); text-align: center; } .ms-intro-ui .cmscreen .lead { font-size: var(--text-lg); text-align: center; margin-inline: auto; } .ms-intro-ui .nfc-product-option { box-shadow: none !important; } /* /ai has a separate stylesheet after the bundle. Scoped specificity converts * the surrounding introduction to white/blue while preserving readable code. */ .ms-intro-ui.ai-code-theme { --ai-bg: var(--surface); --ai-surface: var(--surface); --ai-surface-raised: var(--brand-50); --ai-line: var(--brand-100); --ai-line-strong: var(--brand-200); --ai-text: var(--brand-900); --ai-muted: var(--neutral-600); --ai-dim: var(--neutral-500); --ai-blue: var(--brand-600); --ai-cyan: var(--brand-700); --ai-green: var(--brand-600); } .ms-intro-ui.ai-code-theme .ms-nav { background: var(--surface); border-color: var(--brand-100); } .ms-intro-ui.ai-code-theme :is(.ms-nav-brand, .ms-nav-menu a, .ms-nav-login) { color: var(--brand-900); } .ms-intro-ui.ai-code-theme .ms-nav-brand:hover, .ms-intro-ui.ai-code-theme .ms-nav-menu a:hover, .ms-intro-ui.ai-code-theme .ms-nav-menu a.is-active, .ms-intro-ui.ai-code-theme .ms-nav-login:hover { color: var(--brand-700); } .ms-intro-ui.ai-code-theme .ms-nav-login:hover { border-color: var(--brand-300); } .ms-intro-ui.ai-code-theme :is(.ms-nav-signup, .ms-nav-mobile-cta) { background: var(--brand-600); color: var(--surface); } .ms-intro-ui.ai-code-theme :is(.ms-nav-signup, .ms-nav-mobile-cta):hover { background: var(--brand-700); color: var(--surface); } .ms-intro-ui.ai-code-theme :is(.ms-mobile-menu summary, .ms-mobile-panel) { background: var(--surface); border-color: var(--brand-200); color: var(--brand-900); } .ms-intro-ui.ai-code-theme .ms-mobile-menu summary:hover { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-900); } .ms-intro-ui.ai-code-theme .ms-mobile-link { color: var(--brand-900); } .ms-intro-ui.ai-code-theme .ms-mobile-link:hover, .ms-intro-ui.ai-code-theme .ms-mobile-link.is-active { background: var(--brand-50); color: var(--brand-700); } .ms-intro-ui.ai-code-theme .ms-mobile-login { color: var(--surface); } .ms-intro-ui .ai-code-hero h1 { font-family: var(--font-intro-heading); font-size: clamp(var(--text-3xl), 4.5vw, calc(var(--text-3xl) * 2)); line-height: 1.25; } .ms-intro-ui .ai-code-lead { color: var(--neutral-600); font-size: var(--text-lg); } .ms-intro-ui :is(.ai-code-primary, .ai-code-secondary) { min-height: 60px; padding: var(--space-lg) var(--space-xl); font-size: var(--text-md); border-radius: var(--r-lg); } .ms-intro-ui .ai-code-secondary:hover { background: var(--brand-50); color: var(--brand-800); border-color: var(--brand-300); } .ms-intro-ui .ai-code-kicker::before { box-shadow: none; } .ms-intro-ui .ai-code-window { --ai-line: var(--neutral-700); --ai-line-strong: var(--neutral-600); --ai-muted: var(--neutral-300); --ai-dim: var(--neutral-400); box-shadow: none; border-radius: var(--r-xl); } .ms-intro-ui :is(.ai-code-section h2, .ai-code-final h2) { font-family: var(--font-intro-heading); font-size: clamp(var(--text-3xl), 3vw, calc(var(--text-3xl) * 1.5)); } .ms-intro-ui .ai-code-module { border-radius: var(--r-xl); padding: var(--space-xl); } .ms-intro-ui .ai-code-module:hover { border-color: var(--brand-300); } .ms-intro-ui .ai-code-module h3 { font-size: var(--text-xl); } .ms-intro-ui :is(.ai-code-module p, .ai-code-flow p, .ai-code-endpoint p) { font-size: var(--text-md); line-height: 1.8; } .ms-intro-ui .ai-code-endpoint:hover { background: var(--brand-50); } .ms-intro-ui .ai-code-flow li { background: var(--brand-50); border-radius: var(--r-lg); } .ms-intro-ui.ai-code-theme .ms-footer { background: var(--surface); } .ms-intro-ui.ai-code-theme .ms-footer-col h2 { color: var(--brand-800); } /* The approved 210 OmniGothic 040 is a single native 400 face. The previous * homepage-only subset missed Korean syllables in these public-page headings, * so only those characters fell back to a different 900-weight face. This * shared full-coverage TTF preserves the approved outlines for all 11,172 * Korean syllables; nested emphasis inherits that same face and native weight. * Keep the selector limited to introduction headings, never app/demo screens. */ .ms-intro-ui :is(.ms-h1, .ms-section-title, .cmscreen h1.cm-h, .ai-code-hero h1, .ai-code-section h2, .ai-code-final h2) { font-family: var(--font-intro-heading); font-weight: 400; font-style: normal; font-synthesis: none; } .ms-intro-ui :is(.ms-h1, .ms-section-title, .cmscreen h1.cm-h, .ai-code-hero h1, .ai-code-section h2, .ai-code-final h2) :is(strong, em, b, span) { font-family: inherit; font-weight: inherit; font-style: inherit; } /* One figure owns the phone AND caption; never animate their scales separately. * No JS: native horizontal scroll/snap. JS: a single track with boundary clones. * This stage is intentionally separate from the approved homepage mockups. */ .ms-intro-ui .ms-phone-carousel { width: min(100%, 840px); margin-inline: auto; outline-offset: 6px; border-radius: var(--r-lg); } .ms-intro-ui .ms-phone-viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; touch-action: auto; scrollbar-width: thin; } .ms-intro-ui [data-phone-carousel-ready] .ms-phone-viewport { overflow: hidden; touch-action: pan-y; } .ms-intro-ui .ms-phone-track { display: flex; width: 100%; } .ms-intro-ui [data-phone-carousel-ready] .ms-phone-track { transition: transform 620ms cubic-bezier(.22, 1, .36, 1); will-change: transform; } .ms-intro-ui .ms-phone-slide { flex: 0 0 100%; min-width: 0; margin: 0; padding-inline: var(--space-lg); scroll-snap-align: center; } .ms-intro-ui .ms-phone-device { position: relative; width: clamp(230px, calc((100svh - 410px) * .49), 292px); max-width: 100%; margin-inline: auto; padding: 22px 8px 14px; border: 7px solid var(--brand-900); border-radius: 42px; background: var(--surface); overflow: hidden; } .ms-intro-ui .ms-phone-screen { display: block; width: 100%; height: auto; aspect-ratio: 160 / 287; object-fit: contain; border-radius: 19px; user-select: none; } .ms-intro-ui .ms-phone-island { position: absolute; top: 8px; left: 50%; width: 68px; height: 6px; border-radius: 8px; background: var(--brand-900); transform: translateX(-50%); } .ms-intro-ui .ms-phone-caption { text-align: center; margin: var(--space-lg) auto 0; max-width: 560px; } .ms-intro-ui .ms-phone-title { font-size: var(--text-2xl); line-height: 1.45; font-weight: 900; color: var(--brand-900); margin: 0 0 var(--space-sm); } .ms-intro-ui .ms-phone-desc { font-size: var(--text-lg); line-height: 1.75; color: var(--neutral-600); margin: 0; min-height: 3.5em; } .ms-intro-ui .ms-phone-controls { display: flex; justify-content: center; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); } .ms-intro-ui [data-phone-carousel-controls][hidden] { display: none; } .ms-intro-ui .ms-phone-control { width: 48px; height: 48px; flex: none; border: 1px solid var(--brand-200); border-radius: 50%; background: var(--surface); color: var(--brand-700); font-size: var(--text-xl); cursor: pointer; transition: background-color .2s ease, transform .2s ease; } .ms-intro-ui .ms-phone-control:hover { background: var(--brand-100); transform: translateY(-2px); } .ms-intro-ui .ms-phone-dots { display: flex; align-items: center; gap: var(--space-sm); } .ms-intro-ui .ms-phone-dot { position: relative; width: 24px; height: 32px; border: 0; padding: 0; background: transparent; cursor: pointer; } .ms-intro-ui .ms-phone-dot::after { content: ''; position: absolute; width: 8px; height: 8px; top: 12px; left: 8px; border-radius: 50%; background: var(--brand-200); } .ms-intro-ui .ms-phone-dot[aria-current='true']::after { background: var(--brand-600); } .ms-intro-ui .ms-phone-counter { font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--neutral-600); } .ms-intro-ui .ms-phone-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Reuse the one-time reveal observer. Whole cards move together and stay visible * on the return scroll; no wheel handler or page-scroll lock is introduced. */ .ms-motion .ms-intro-ui .ms-reveal { transform: translateY(18px); transition: opacity .55s ease var(--ms-reveal-delay, 0ms), transform .55s cubic-bezier(.22, 1, .36, 1) var(--ms-reveal-delay, 0ms); } .ms-motion .ms-intro-ui .ms-reveal.is-visible { transform: translateY(0); } @media (max-width: 640px) { .ms-intro-ui .ms-hero:not(.ms-hero-img) { min-height: auto; padding: var(--space-3xl) 0; } .ms-intro-ui .ms-h1 { font-size: clamp(var(--text-3xl), 8.6vw, calc(var(--text-3xl) * 1.375)); } .ms-intro-ui .ms-lead { font-size: var(--text-md); } .ms-intro-ui .ms-section-wrap { padding-block: calc(var(--space-3xl) * 1.25); } .ms-intro-ui .ms-section-head { margin-bottom: var(--space-2xl); } .ms-intro-ui .ms-section-title { font-size: var(--text-3xl); } .ms-intro-ui .ms-section-sub { font-size: var(--text-md); } .ms-intro-ui .ms-fc-body { padding: var(--space-xl); } .ms-intro-ui .ms-faq-q { padding: var(--space-lg); font-size: var(--text-md); } .ms-intro-ui .ms-faq-a { padding-inline: var(--space-lg); } .ms-intro-ui .ms-trust { margin-top: var(--space-2xl); } .ms-intro-ui .ms-phone-device { width: min(260px, 100%); border-radius: 38px; } .ms-intro-ui .ms-phone-slide { padding-inline: var(--space-xs); } .ms-intro-ui .ms-phone-title { font-size: var(--text-xl); } .ms-intro-ui .ms-phone-desc { font-size: var(--text-md); min-height: 5.25em; } .ms-intro-ui .ms-phone-controls { gap: var(--space-md); } } @media (prefers-reduced-motion: reduce) { .ms-intro-ui :is(.ms-btn-primary, .ms-btn-secondary, .ms-fc, .ms-phone-control, .ms-phone-track) { transition: none !important; } .ms-intro-ui :is(.ms-btn-primary, .ms-btn-secondary, .ms-fc, .ms-phone-control):hover { transform: none; } .ms-motion .ms-intro-ui .ms-reveal { opacity: 1; transform: none; transition: none; } } .ms-nav-panel a.ms-nav-rail-link, .ms-nav-panel a.ms-nav-sub, .ms-mobile-panel a.ms-mobile-link { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-sm); overflow-wrap: anywhere; } .ms-nav-panel a::before, .ms-mobile-panel a.ms-mobile-link::before { display: block; flex: 0 0 32px; width: 32px; height: 32px; background-size: contain; background-repeat: no-repeat; background-position: center; } .ms-nav-panel a.ms-nav-rail-link::before { flex-basis: 40px; width: 40px; height: 40px; } .ms-nav-group:hover .ms-nav-panel a[href="/attendance"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/attendance"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/attendance"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/attendance"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/01-attendance.png?v=7c02a653a0a6"); } .ms-nav-group:hover .ms-nav-panel a[href="/nfc-sticker"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/nfc-sticker"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/nfc-sticker"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/nfc-sticker"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/02-nfc-sticker.png?v=40d85a884104"); } .ms-nav-group:hover .ms-nav-panel a[href="/vs"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/vs"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/vs"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/vs"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/03-attendance-methods.png?v=f2146b88cab4"); } .ms-nav-group:hover .ms-nav-panel a[href="/attendance-correction"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/attendance-correction"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/attendance-correction"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/attendance-correction"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/04-attendance-correction.png?v=a4ca7dc0e2eb"); } .ms-nav-group:hover .ms-nav-panel a[href="/workforce"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/workforce"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/workforce"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/workforce"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/05-workforce.png?v=be8d95b06ab5"); } .ms-nav-group:hover .ms-nav-panel a[href="/shift"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/shift"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/shift"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/shift"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/06-shift.png?v=2bee30288bc7"); } .ms-nav-group:hover .ms-nav-panel a[href="/leave"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/leave"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/leave"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/leave"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/07-leave.png?v=cc8b0ac808dd"); } .ms-nav-group:hover .ms-nav-panel a[href="/work-report"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/work-report"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/work-report"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/work-report"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/08-work-report.png?v=0b49aa122ce6"); } .ms-nav-group:hover .ms-nav-panel a[href="/corporate-card"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/corporate-card"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/corporate-card"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/corporate-card"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/09-corporate-card.png?v=0ec001149b69"); } .ms-nav-group:hover .ms-nav-panel a[href="/bank-transactions"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/bank-transactions"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/bank-transactions"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/bank-transactions"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/10-bank-transactions.png?v=bc53a76222c9"); } .ms-nav-group:hover .ms-nav-panel a[href="/e-contract"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/e-contract"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/e-contract"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/e-contract"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/11-e-contract.png?v=6d394c965732"); } .ms-nav-group:hover .ms-nav-panel a[href="/certificate"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/certificate"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/certificate"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/certificate"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/12-certificate.png?v=6bb0c881eade"); } .ms-nav-group:hover .ms-nav-panel a[href="/multi-company"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/multi-company"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/multi-company"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/multi-company"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/13-multi-company.png?v=07d37a8a9dbd"); } .ms-nav-group:hover .ms-nav-panel a[href="/org"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/org"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/org"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/org"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/14-org.png?v=95d5726b916a"); } .ms-nav-group:hover .ms-nav-panel a[href="/for-manager"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/for-manager"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/for-manager"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/for-manager"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/15-manager.png?v=769aae239fa4"); } .ms-nav-group:hover .ms-nav-panel a[href="/modules"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/modules"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/modules"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/modules"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/16-modules.png?v=edefa381295a"); } .ms-nav-group:hover .ms-nav-panel a[href="/notice"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/notice"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/notice"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/notice"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/17-notice.png?v=8a3a56e65579"); } .ms-nav-group:hover .ms-nav-panel a[href="/google-sheets"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/google-sheets"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/google-sheets"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/google-sheets"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-brand-icons-20261012/google-sheets.svg?v=3dd989706d03"); } .ms-nav-group:hover .ms-nav-panel a[href="/slack"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/slack"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/slack"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/slack"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-brand-icons-20261012/slack.png?v=fff0ab554a4d"); } .ms-nav-group:hover .ms-nav-panel a[href="/notion"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/notion"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/notion"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/notion"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-brand-icons-20261012/notion.png?v=483846a85e43"); } .ms-nav-group:hover .ms-nav-panel a[href="/ai"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/ai"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/ai"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/ai"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/21-ai.png?v=405698ab13e2"); } .ms-nav-group:hover .ms-nav-panel a[href="/docs/mcp"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/docs/mcp"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/docs/mcp"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/docs/mcp"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/22-mcp-docs.png?v=ab996012a364"); } .ms-nav-group:hover .ms-nav-panel a[href="/docs"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/docs"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/docs"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/docs"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/23-tool-catalog.png?v=0ab870bcf854"); } .ms-nav-group:hover .ms-nav-panel a[href="/guides"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/guides"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/guides"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/guides"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/24-guides.png?v=a385aa1f73d3"); } .ms-nav-group:hover .ms-nav-panel a[href="/research"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/research"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/research"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/research"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/25-research.png?v=3068e570ab3c"); } .ms-nav-group:hover .ms-nav-panel a[href="/faq"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/faq"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/faq"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/faq"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/26-faq.png?v=8f7bf8d86f86"); } .ms-nav-group:hover .ms-nav-panel a[href="https://play.google.com/store/apps/details?id=com.bridzzi.insacheck"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="https://play.google.com/store/apps/details?id=com.bridzzi.insacheck"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="https://play.google.com/store/apps/details?id=com.bridzzi.insacheck"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="https://play.google.com/store/apps/details?id=com.bridzzi.insacheck"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/27-android-app.png?v=31dfa84da7f2"); } .ms-nav-group:hover .ms-nav-panel a[href="https://apps.apple.com/kr/app/%EC%9D%B8%EC%82%AC%EC%B1%85-%EC%B6%9C%ED%87%B4%EA%B7%BC-%EA%B7%BC%ED%83%9C%EA%B4%80%EB%A6%AC/id6788252248"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="https://apps.apple.com/kr/app/%EC%9D%B8%EC%82%AC%EC%B1%85-%EC%B6%9C%ED%87%B4%EA%B7%BC-%EA%B7%BC%ED%83%9C%EA%B4%80%EB%A6%AC/id6788252248"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="https://apps.apple.com/kr/app/%EC%9D%B8%EC%82%AC%EC%B1%85-%EC%B6%9C%ED%87%B4%EA%B7%BC-%EA%B7%BC%ED%83%9C%EA%B4%80%EB%A6%AC/id6788252248"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="https://apps.apple.com/kr/app/%EC%9D%B8%EC%82%AC%EC%B1%85-%EC%B6%9C%ED%87%B4%EA%B7%BC-%EA%B7%BC%ED%83%9C%EA%B4%80%EB%A6%AC/id6788252248"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/28-ios-app.png?v=64992c3147b8"); } .ms-nav-group:hover .ms-nav-panel a[href="/contact"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/contact"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/contact"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/contact"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/29-contact.png?v=ba31b4c150d2"); } .ms-nav-group:hover .ms-nav-panel a[href="/checklist"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/checklist"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/checklist"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/checklist"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/30-checklist.png?v=8c0b0d4ef82c"); } .ms-nav-group:hover .ms-nav-panel a[href="/compliance/moel"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/compliance/moel"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/compliance/moel"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/compliance/moel"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/31-compliance.png?v=8152aa5311e1"); } .ms-nav-group:hover .ms-nav-panel a[href="/privacy"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/privacy"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/privacy"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/privacy"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/32-privacy.png?v=7b2092c8f3ab"); } .ms-nav-group:hover .ms-nav-panel a[href="/terms"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/terms"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/terms"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/terms"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/33-terms.png?v=e6c04f3f12b3"); } .ms-nav-group:hover .ms-nav-panel a[href="/company"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/company"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/company"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/company"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/34-company.png?v=597368004ebf"); } .ms-nav-group:hover .ms-nav-panel a[href="/why-free"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/why-free"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/why-free"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/why-free"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/35-why-free.png?v=d303a7bb867d"); } .ms-nav-group:hover .ms-nav-panel a[href="/customers"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/customers"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/customers"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/customers"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/36-customers.png?v=20893c19b66c"); } .ms-nav-group:hover .ms-nav-panel a[href="/use-cases"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/use-cases"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/use-cases"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/use-cases"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/37-use-cases.png?v=e40d14783f38"); } .ms-nav-group:hover .ms-nav-panel a[href="/press"]::before, .ms-nav-group:focus-within .ms-nav-panel a[href="/press"]::before, .ms-nav-group.is-menu-open .ms-nav-panel a[href="/press"]::before, .ms-mobile-menu[open] .ms-mobile-panel a[href="/press"]::before { content: ''; background-image: url("/approved-design/c10003bb74d2/static/marketing-page-icons-20261012/38-press.png?v=f233fceb1a92"); } .ms-page-title-icon { display: block; width: 96px; height: 96px; object-fit: contain; margin: 0 auto var(--space-xl); background: none; } @media (max-width: 640px) { .ms-page-title-icon { width: 80px; height: 80px; margin-bottom: var(--space-lg); } } :is(.ms-guides-ui, .ms-directory-ui) { --shadow-1: none; --shadow-2: none; --shadow-3: none; background: #fff; color: #172f69; } :is(.ms-guides-ui, .ms-directory-ui) .ms-hero { background: #fff !important; padding: 76px 0 66px; } .ms-guides-ui .ms-hero-media { display: none; } .ms-guides-ui .ms-hero-img::after { display: none; } .ms-guides-ui main [id] { scroll-margin-top: 110px; } :is(.ms-guides-ui, .ms-directory-ui) .ms-h1 { font-family: 'InsaCheck Public Display', var(--font-sans); font-weight: 400; font-size: clamp(38px, 4.7vw, 66px); max-width: 1100px; line-height: 1.3; letter-spacing: -.035em; color: #172f69; } :is(.ms-guides-ui, .ms-directory-ui) .ms-h1-accent { color: #2b70ff; } :is(.ms-guides-ui, .ms-directory-ui) .ms-lead { max-width: 800px; font-size: 18px; line-height: 1.8; } :is(.ms-guides-ui, .ms-directory-ui) .ms-section-wrap { padding-block: 64px; } :is(.ms-guides-ui, .ms-directory-ui) .ms-section-title { font-family: 'InsaCheck Public Display', var(--font-sans); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.4; color: #172f69; } :is(.ms-guides-ui, .ms-directory-ui) :is(.ms-btn-primary, .ms-btn-secondary) { min-height: 56px; padding: 16px 28px; border-radius: 16px; font-size: 17px; font-weight: 800; box-shadow: none; } .ms-guides-ui :is(.ms-fc, .ms-blog-card) { text-align: left; border: 1px solid #dbe7ff; border-radius: 22px; background: #fff; padding: 26px; box-shadow: none; transition: transform .2s ease, border-color .2s ease, background-color .2s ease; } .ms-guides-ui :is(.ms-fc, .ms-blog-card):hover { transform: translateY(-3px); border-color: #94baff; background: #f8fbff; box-shadow: none; } .ms-guides-ui :is(.ms-fc-title, .ms-blog-title) { font-size: 22px; line-height: 1.45; font-weight: 800; color: #172f69; } .ms-guides-ui :is(.ms-fc-desc, .ms-blog-excerpt) { font-size: 16px; line-height: 1.75; } .ms-guides-ui :is(.ms-fc-cta, .ms-blog-cta) { font-size: 15px; } .ms-guides-ui .ms-blog-meta { font-family: var(--font-sans); font-size: 13px; } .ms-guides-ui main article { max-width: 820px !important; } .ms-guides-ui main article > h1 { font-family: 'InsaCheck Public Display', var(--font-sans); font-weight: 400 !important; font-size: clamp(30px, 4vw, 46px) !important; line-height: 1.4 !important; color: #172f69 !important; } .ms-guides-ui .guide-prose { font-size: 18px; line-height: 1.9; color: #374767; } .ms-guides-ui .guide-prose :is(h2, h3) { color: #172f69; line-height: 1.5; } .ms-directory-ui main ul[style*="grid-template-columns"] { gap: 14px !important; } .ms-directory-ui main ul[style*="grid-template-columns"] > li { padding: 20px !important; border-color: #dbe7ff !important; border-radius: 18px !important; min-width: 0; } .ms-directory-ui main ul[style*="grid-template-columns"] > li > span:first-child { font-size: 17px !important; line-height: 1.6 !important; overflow-wrap: anywhere; } .ms-directory-ui main ul[style*="grid-template-columns"] > li > span + span { font-size: 14px !important; line-height: 1.6; } @media (max-width: 640px) { :is(.ms-guides-ui, .ms-directory-ui) .ms-hero { padding: 48px 0; } :is(.ms-guides-ui, .ms-directory-ui) .ms-section-wrap { padding-block: 44px; } :is(.ms-guides-ui, .ms-directory-ui) .ms-lead { font-size: 16px; } .ms-guides-ui :is(.ms-fc, .ms-blog-card) { padding: 22px; } .ms-guides-ui .guide-prose { font-size: 17px; } .ms-directory-ui main ul[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } } @media (prefers-reduced-motion: reduce) { .ms-guides-ui :is(.ms-fc, .ms-blog-card) { transition: none; } .ms-guides-ui :is(.ms-fc, .ms-blog-card):hover { transform: none; } } :is(.site-header, .ms-nav) :is(#ms-panel-product, #ms-panel-integration, #ms-panel-company) { --menu-width: 960px; } :is(.site-header, .ms-nav) :is(.site-header-panel, .ms-nav-panel, .ms-mobile-panel) { box-sizing: border-box; min-width: 0; overflow-x: hidden; } .site-header .site-header-panel .site-header-panel-inner { max-width: 960px; min-width: 0; padding: 0; } .site-header .site-header-panel .site-header-cols, .ms-nav .ms-nav-panel .ms-nav-panel-inner { padding: 20px; gap: 20px; } .ms-nav .ms-nav-panel .ms-nav-cols { min-width: 0; gap: 20px; } .site-header .site-header-panel .site-header-col, .ms-nav .ms-nav-panel .ms-nav-col { display: flex; flex-direction: column; align-items: stretch; min-width: 0; gap: 2px; } .site-header .site-header-panel .site-header-col-label, .ms-nav .ms-nav-panel .ms-nav-col-label { margin: 0 0 8px; padding: 0 0 8px; font-size: 14px; line-height: 1.4; letter-spacing: 0; border-bottom: 1px solid var(--brand-100, #dce6f4); } .site-header .site-header-panel a.site-header-sub, .ms-nav .ms-nav-panel .ms-nav-cols a.ms-nav-sub, .ms-nav .ms-mobile-menu .ms-mobile-panel a.ms-mobile-link { display: flex; align-items: center; justify-content: flex-start; min-width: 0; min-height: 44px; gap: 10px; margin: 0; padding: 7px 8px; color: #111; font-size: 16px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; } .site-header .site-header-panel .ms-category-nav a.ms-category-nav__link, .ms-nav .ms-nav-panel .ms-category-nav a.ms-category-nav__link, .ms-nav .ms-mobile-panel .ms-category-nav a.ms-category-nav__link { color: #111; font-size: 16px; min-height: 44px; gap: 10px; } .site-header .site-header-panel a.site-header-icon-link img { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; } .ms-nav .ms-nav-panel a.ms-nav-sub::before, .ms-nav .ms-mobile-panel a.ms-mobile-link::before { flex-basis: 30px; width: 30px; height: 30px; } .site-header .site-header-panel .site-header-panel-inner.site-header-panel-inner--categories, .ms-nav .ms-nav-panel .ms-nav-panel-inner.ms-nav-panel-inner--categories { padding: 0; gap: 0; } .site-header .site-header-actions, .ms-nav .ms-nav-actions { flex-wrap: nowrap; white-space: nowrap; } @media (min-width: 1200px) { .site-header .site-header-panel { left: 50%; right: auto; width: min(960px, calc(100vw - 48px)); transform: translateX(-50%); } .site-header .site-header-panel .site-header-cols { grid-template-columns: repeat(var(--menu-columns), minmax(0, 1fr)); } } @media (min-width: 1025px) { .ms-nav .ms-nav-panel { left: 50%; right: auto; width: min(960px, calc(100vw - 48px)); transform: translateX(-50%); } .ms-nav .ms-nav-panel .ms-nav-cols { grid-template-columns: repeat(var(--menu-columns), minmax(0, 1fr)); } } @media (max-width: 1199px) { .site-header .site-header-menu { min-width: 0; overflow-x: hidden; } } @media (max-width: 1024px) { .ms-nav .ms-mobile-panel { min-width: 0; overflow-x: hidden; } } @media (hover: hover) and (pointer: fine) { .site-header .site-header-panel a.site-header-sub:hover, .ms-nav .ms-nav-panel .ms-nav-cols a.ms-nav-sub:hover, .ms-nav .ms-mobile-menu .ms-mobile-panel a.ms-mobile-link:hover { color: #111; background: var(--brand-50, #edf5ff); } }