/* ============================================================ web.css — Boundee OS Landing Page Styles ============================================================ */ /* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: 'Roboto', sans-serif; color: #1d293d; background: #fff; min-width: 320px; } img { display: block; max-width: 100%; height: auto; } /* ── Google Fonts ── */ /* Loaded in via */ /* ── Design Tokens ── */ :root { --purple-5: #4120a9; --purple-2: #a16ae8; --purple-9: #59168b; --violet-9: #4d179a; --blue-6: #155dfc; --sky-50: #f0f9ff; --sky-600: #0084d1; --slate-100: #f1f5f9; --slate-300: #cad5e2; --slate-400: #90a1b9; --slate-800: #1d293d; --slate-900: #0f172b; --white: #ffffff; --black: #000000; --section-bg: #f0f6fb; } /* ── Typography Scale ── */ .t-label { font-size: 14px; font-weight: 600; line-height: 1; } .t-serif-h { font-family: 'Roboto Slab', serif; font-size: 28px; font-weight: 600; line-height: 1; } .t-h1 { font-size: 32px; font-weight: 600; line-height: 1; } .t-h1-xl { font-size: 40px; font-weight: 800; line-height: 1; } .t-h2 { font-size: 32px; font-weight: 700; line-height: 1; } .t-h3 { font-size: 24px; font-weight: 700; line-height: 35.1px; } .t-h4 { font-size: 18px; font-weight: 600; line-height: 1; } .t-body-l { font-size: 22px; font-weight: 400; line-height: 34px; } .t-body-m { font-size: 24px; font-weight: 400; line-height: 34.1px; } .t-body { font-size: 18px; font-weight: 400; line-height: 30.1px; } .t-body-s { font-size: 18px; font-weight: 400; line-height: 25.1px; } .t-body-s-b { font-size: 18px; font-weight: 600; line-height: 25.1px; } .t-btn-big { font-size: 24px; font-weight: 700; line-height: 1; } .t-footer { font-size: 16px; font-weight: 500; line-height: 1; } /* ── Layout Utilities ── */ .container-1080 { max-width: 1080px; width: 100%; margin: 0 auto; } .container-1250 { max-width: 1250px; width: 100%; margin: 0 auto; } .section-pad { padding: 90px 45px; } /* ── Buttons ── */ .btn-small { display: inline-flex; align-items: center; justify-content: center; padding: 7px 16px; background: var(--purple-2); color: var(--white); border-radius: 50px; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none; border: none; } .btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 12px 30px; background: var(--purple-2); color: var(--white); border-radius: 10px; font-size: 24px; font-weight: 700; line-height: 1; cursor: pointer; text-decoration: none; border: none; } .btn-primary:hover { background: #8f57d8; } /* ════════════════════════════════════════ HEADER ════════════════════════════════════════ */ .site-header { background: var(--purple-5); height: 75px; display: flex; align-items: center; justify-content: space-between; padding: 10px 60px; overflow: hidden; position: sticky; top: 0; z-index: 100; } .site-header .logo img { height: 30px; width: auto; } .site-header .nav { display: flex; gap: 20px; align-items: center; } .site-header .nav a { color: var(--white); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; } .site-header .nav a:hover { opacity: .8; } .site-header .header-actions { display: flex; gap: 20px; align-items: center; } .site-header .header-actions .sign-in { color: var(--white); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; } .site-header .header-actions .sign-in:hover { opacity: .8; } /* ════════════════════════════════════════ HERO SECTION ════════════════════════════════════════ */ .hero { padding-top: 90px; padding-bottom: 0; overflow: hidden; position: relative; background: #fff; } .hero-inner { max-width: 1250px; margin: 0 auto; padding: 0 45px; min-height: auto; display: flex; align-items: flex-start; position: relative; } .hero-content { width: 753px; flex-shrink: 0; display: flex; flex-direction: column; gap: 70px; } .hero-text { display: flex; flex-direction: column; gap: 30px; } .hero-eyebrow { font-family: 'Roboto Slab', serif; font-size: 28px; font-weight: 600; line-height: 1; color: #9854f1; white-space: nowrap; } .hero-headlines { display: flex; flex-direction: column; gap: 9px; } .hero-headlines .line1, .hero-headlines .line2 { font-size: 32px; font-weight: 600; color: #000; white-space: nowrap; } .hero-headlines .line3 { font-size: 40px; font-weight: 800; color: #400094; white-space: nowrap; } .hero-desc { font-size: 22px; font-weight: 400; line-height: 34px; color: #575555; width: 417px; } .hero-image { position: absolute; left: 541px; top: -38px; width: 687px; height: 535px; } .hero-image img { width: 100%; height: 100%; object-fit: cover; } /* ════════════════════════════════════════ PARTNERS STRIP ════════════════════════════════════════ */ .partners-strip { padding: 90px 45px; display: flex; justify-content: center; } .partners-wrap { max-width: 1080px; width: 100%; display: flex; flex-direction: column; gap: 20px; align-items: center; } .partners-text { text-align: center; font-size: 18px; font-weight: 400; line-height: 30.1px; color: #000; } .partners-logos { display: flex; gap: 60px; align-items: center; justify-content: center; flex-wrap: wrap; } .partners-logos img { object-fit: contain; } /* ════════════════════════════════════════ WHY SECTION (two-column cards) ════════════════════════════════════════ */ .why-section { background: var(--section-bg); padding: 90px 45px; display: flex; justify-content: center; } .why-wrap { max-width: 1120px; width: 100%; display: flex; flex-direction: column; gap: 20px; align-items: center; } .why-heading { text-align: center; font-size: 32px; font-weight: 700; color: var(--purple-5); width: 100%; } .why-sub { text-align: center; font-size: 24px; font-weight: 400; line-height: 34.1px; color: var(--slate-900); width: 100%; } .why-cards { display: flex; align-items: stretch; width: 100%; gap: 0; } /* Card wrapper */ .why-card-wrap { flex: 1; padding: 20px; min-width: 0; } /* Old Way Card (white) */ .card-old { background: #fff; border-radius: 20px; padding: 40px; display: flex; flex-direction: column; gap: 30px; height: 100%; } /* Boundee Way Card (dark purple) */ .card-new { background: var(--violet-9); border-radius: 20px; padding: 40px; display: flex; flex-direction: column; gap: 30px; height: 100%; } .card-header { display: flex; gap: 10px; align-items: center; justify-content: center; } .card-header img { width: 24px; height: 24px; flex-shrink: 0; } .card-title-old { font-size: 24px; font-weight: 700; line-height: 35.1px; color: #000; white-space: normal; } .card-title-new { font-size: 24px; font-weight: 700; line-height: 35.1px; color: var(--white); white-space: normal; } .card-items { display: flex; flex-direction: column; gap: 40px; } /* Bullet item */ .bullet-item { display: flex; gap: 6px; align-items: flex-start; } .bullet-icon { width: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 5px 4px 10px; } .bullet-icon img { width: 14px; height: 14px; } .bullet-text { display: flex; flex-direction: column; gap: 6px; font-size: 18px; min-width: 0; width: 100%; } .bullet-title-dark { font-weight: 600; color: #000; white-space: nowrap; } .bullet-title-light { font-weight: 600; color: var(--white); white-space: nowrap; } .bullet-body-dark { font-weight: 400; line-height: 25.1px; color: var(--slate-800); width: 100%; white-space: normal; } .bullet-body-light { font-weight: 400; line-height: 25.1px; color: var(--slate-300); width: 100%; white-space: normal; } /* ════════════════════════════════════════ HOW ENFORCEMENT SECTION ════════════════════════════════════════ */ .how-section { padding: 90px 45px; display: flex; justify-content: center; background: #fff; } .how-wrap { max-width: 1080px; width: 100%; display: flex; flex-direction: column; gap: 20px; align-items: center; } .how-heading { text-align: center; font-size: 32px; font-weight: 700; color: var(--purple-5); width: 100%; } .how-sub { text-align: center; font-size: 24px; font-weight: 400; line-height: 34.1px; color: var(--slate-900); width: 100%; } .how-steps { max-width: 800px; width: 100%; display: flex; flex-direction: column; gap: 50px; padding-top: 40px; } .how-step { display: flex; gap: 40px; align-items: flex-start; padding: 10px; } .how-step.reverse { flex-direction: row-reverse; } .how-step-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; font-size: 18px; } .how-step-text h4 { font-weight: 600; line-height: 1.3; color: #000; } .how-step-text p { font-weight: 400; line-height: 25.1px; color: var(--slate-800); } .how-step-img { flex: 1; min-width: 0; height: 152px; border: 1px solid var(--slate-300); border-radius: 20px; background: #f8f9fc; overflow: hidden; padding: 10px 10px; } /* Final how-step: centered text + CTA */ .how-final { padding: 10px; text-align: center; display: flex; flex-direction: column; gap: 10px; font-size: 18px; } .how-final h4 { font-weight: 600; color: #000; } .how-final p { font-weight: 400; line-height: 25.1px; color: var(--slate-800); } .how-cta { display: flex; justify-content: center; padding: 10px; } /* ════════════════════════════════════════ BUILT FROM FRONTLINES ════════════════════════════════════════ */ .frontlines-section { background: var(--sky-50); padding: 90px 45px; display: flex; justify-content: center; } .frontlines-wrap { max-width: 1080px; width: 100%; display: flex; flex-direction: column; gap: 20px; align-items: center; } .frontlines-heading { text-align: center; font-size: 32px; font-weight: 700; color: var(--purple-5); width: 100%; } /* Wave decoration */ .wave-wrap { width: 100%; padding: 30px 0; overflow: hidden; display: flex; justify-content: center; } .wave-wrap img { width: 100%; max-width: 1424px; height: auto; } .frontlines-intro { text-align: center; font-size: 24px; font-weight: 700; line-height: 35.1px; color: var(--sky-600); width: 100%; } .frontlines-list { display: flex; flex-direction: column; gap: 20px; padding: 30px 0 30px; width: 100%; } .frontlines-item { display: flex; gap: 6px; align-items: flex-start; } .frontlines-item .bullet-icon { padding: 10px 4px; height: 26px; } .frontlines-item .item-text { font-size: 18px; font-weight: 400; line-height: 25.1px; color: var(--slate-800); white-space: normal; } /* ════════════════════════════════════════ WHERE BOUNDEE ENFORCES (horizontal scroll cards) ════════════════════════════════════════ */ .enforces-section { padding: 90px 45px; display: flex; justify-content: center; background: #fff; } .enforces-wrap { width: 100%; display: flex; flex-direction: column; gap: 20px; align-items: center; } .enforces-heading { text-align: center; font-size: 32px; font-weight: 700; color: var(--purple-5); width: 100%; } /* ── 캐러셀 ── */ .carousel-wrap { width: 100%; max-width: 1370px; /* 카드 4개 × 320px + gap 3개 × 30px */ margin: 0 auto; display: flex; flex-direction: column; gap: 28px; } .carousel-viewport { width: 100%; overflow: hidden; } .carousel-track { display: flex; gap: 30px; transition: transform .4s cubic-bezier(.4,0,.2,1); will-change: transform; padding: 10px 4px; /* 카드 그림자 clipping 방지 */ } /* ── 캐러셀 하단 컨트롤 ── */ .carousel-controls { display: flex; align-items: center; justify-content: center; gap: 20px; } .carousel-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--purple-5); background: transparent; color: var(--purple-5); cursor: pointer; transition: background .2s, color .2s, opacity .2s; flex-shrink: 0; } .carousel-btn:hover:not(:disabled) { background: var(--purple-5); color: #fff; } .carousel-btn:disabled { opacity: .3; cursor: default; } .carousel-dots { display: flex; gap: 8px; align-items: center; } .carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--slate-300); transition: background .2s, transform .2s; } .carousel-dot.active { background: var(--purple-5); transform: scale(1.35); } .enforce-card { background: var(--slate-100); border-radius: 20px; padding: 30px; width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; } .enforce-card-icon { width: 78px; height: 78px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(65, 32, 169, 0.08); border-radius: 16px; } .enforce-card-icon img { width: 100%; height: 100%; } .enforce-card-icon svg { display: block; } .enforce-card-body { display: flex; flex-direction: column; gap: 6px; font-size: 18px; } .enforce-card-title { font-weight: 600; color: #000; white-space: nowrap; } .enforce-card-desc { font-weight: 400; line-height: 25.1px; color: var(--slate-800); } .enforce-card-cta { font-weight: 600; font-style: italic; line-height: 25.1px; color: var(--blue-6); } /* ════════════════════════════════════════ LIGHTWEIGHT SECTION (dark purple bg) ════════════════════════════════════════ */ .lightweight-section { background: var(--purple-9); padding: 90px 45px; display: flex; justify-content: center; } .lightweight-wrap { max-width: 1080px; width: 100%; display: flex; flex-direction: column; gap: 20px; align-items: center; } .lightweight-heading { text-align: center; font-size: 32px; font-weight: 700; color: var(--white); width: 100%; } .lightweight-sub { text-align: center; font-size: 24px; font-weight: 400; line-height: 34.1px; color: var(--slate-400); max-width: 860px; width: 100%; } .lightweight-grid { display: grid; grid-template-columns: repeat(2, 320px); gap: 70px 120px; padding: 30px 0; justify-content: center; } .lw-feature { display: flex; flex-direction: column; gap: 10px; width: 320px; } .lw-feature-icon { width: 78px; height: 78px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .lw-feature-icon img { width: 100%; height: 100%; } .lw-feature-icon svg { display: block; } .lw-feature-body { display: flex; flex-direction: column; gap: 6px; font-size: 18px; } .lw-feature-title { font-weight: 600; color: var(--white); white-space: nowrap; } .lw-feature-desc { font-weight: 400; line-height: 25.1px; color: var(--slate-400); } /* ════════════════════════════════════════ CTA SECTION ("Ready to enforce") ════════════════════════════════════════ */ .cta-section { padding: 90px 45px; display: flex; justify-content: center; background: #fff; } .cta-wrap { width: 100%; display: flex; flex-direction: column; gap: 20px; align-items: center; } .cta-heading { text-align: center; font-size: 32px; font-weight: 700; color: var(--purple-5); width: 100%; } .cta-sub { text-align: center; font-size: 24px; font-weight: 400; line-height: 34.1px; color: var(--purple-5); width: 100%; } .cta-btn-wrap { display: flex; justify-content: center; padding: 40px 0; } /* ════════════════════════════════════════ FOOTER ════════════════════════════════════════ */ .site-footer { background: #000; padding: 60px; display: flex; flex-direction: column; gap: 33px; } .footer-top { display: flex; align-items: center; justify-content: space-between; max-width: 458px; } .footer-logo img { height: 30px; width: auto; } .footer-company { font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--white); white-space: nowrap; } .footer-nav { display: flex; flex-direction: column; gap: 5px; } .footer-nav a { font-size: 16px; font-weight: 500; color: var(--white); text-decoration: none; line-height: 1; } .footer-nav a:hover { opacity: .75; } .footer-contact-wrap { display: flex; flex-direction: column; gap: 2px; } .footer-contact { font-size: 16px; font-weight: 500; color: var(--white); line-height: 1; } .footer-contact-email { font-size: 16px; font-weight: 500; color: var(--white); text-decoration: none; line-height: 1; } .footer-contact-email:hover { text-decoration: underline; } .footer-terms { font-size: 16px; font-weight: 500; color: var(--white); } .footer-terms a { color: var(--white); text-decoration: none; } .footer-terms a:hover { text-decoration: underline; } .footer-bottom { display: flex; align-items: flex-end; justify-content: space-between; } .footer-copy { display: flex; flex-direction: column; gap: 6px; } .footer-copy-line { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: var(--white); } .footer-copy-line img { width: 14px; height: auto; } .footer-member { font-size: 16px; font-weight: 500; color: var(--white); } .footer-badges { display: flex; gap: 20px; align-items: center; } .footer-badges img { height: 50px; width: auto; object-fit: contain; } /* ════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════ */ /* ── 태블릿 (1100px 이하) ── */ @media (max-width: 1100px) { /* hero */ .hero-content { width: 100%; } .hero-inner { min-height: auto; } .hero-image { position: relative; left: auto; top: auto; width: 100%; height: 470px; display: block; overflow: hidden; } .hero-image img { width: 100%; height: 100%; object-fit: contain; object-position: center top; } .hero-headlines .line1, .hero-headlines .line2 { font-size: 26px; white-space: normal; } .hero-headlines .line3 { font-size: 32px; white-space: normal; } .hero-desc { width: 100%; font-size: 18px; } .hero-eyebrow { white-space: normal; } /* lightweight grid 2열 유지 */ .lightweight-grid { grid-template-columns: 1fr 1fr; gap: 40px; } .lightweight-grid .lw-feature { width: 100%; } } /* ── 모바일 (768px 이하) ── */ @media (max-width: 768px) { /* header */ .site-header { padding: 10px 20px; } .site-header .nav { display: none; } /* hero */ .hero { padding-top: 50px; } .hero-inner { padding: 0 20px; min-height: auto; } .hero-content { gap: 30px; } .hero-text { gap: 20px; } .hero-headlines .line1, .hero-headlines .line2 { font-size: 22px; white-space: normal; } .hero-headlines .line3 { font-size: 28px; white-space: normal; } .hero-eyebrow { font-size: 18px; white-space: normal; } .hero-desc { width: 100%; font-size: 16px; line-height: 28px; } /* 모바일에서 hero image: "Enforcement does." 아래 자연스럽게 표시 */ .hero-image { position: relative; left: auto; top: auto; width: 100%; height: 100%; display: block; overflow: hidden; } .hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* sections padding */ .section-pad, .why-section, .how-section, .frontlines-section, .enforces-section, .lightweight-section, .cta-section { padding: 60px 20px; } .partners-strip { padding: 40px 20px; } /* partners */ .partners-logos { gap: 30px; } /* why cards */ .why-cards { flex-direction: column; } .why-card-wrap { padding: 10px 0; } /* bullet-body width: 이미 100%로 통일 */ /* how enforcement: 모든 step을 세로 배치, 텍스트 항상 위 */ .how-step { flex-direction: column; gap: 20px; } .how-step.reverse { flex-direction: column; } /* row-reverse 해제 */ /* reverse step은 DOM 순서가 [img][text] → 텍스트를 order로 앞으로 */ .how-step.reverse .how-step-text { order: -1; } .how-step.reverse .how-step-img { order: 1; } .how-step-text { flex: none; } .how-step-img { flex: none; width: 100%; height: 230px; } /* lightweight */ .lightweight-grid { grid-template-columns: 1fr; gap: 32px; } .lightweight-grid .lw-feature { width: 100%; } /* footer */ .site-footer { padding: 40px 20px; } .footer-bottom { flex-direction: column; gap: 20px; align-items: flex-start; } .footer-company { white-space: normal; } } /* ═══════════════════════════════════════════ 햄버거 메뉴 ═══════════════════════════════════════════ */ /* 햄버거 버튼: 모바일에서만 표시 */ .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 4px; background: transparent; border: none; cursor: pointer; z-index: 1001; } .hamburger span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; transform-origin: center; } /* X 아이콘으로 변환 */ .hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.is-open span:nth-child(2) { opacity: 0; } .hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* 모바일 드로어 닫기 버튼 */ .mobile-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #fff; cursor: pointer; opacity: 0.8; transition: opacity 0.2s; } .mobile-close:hover { opacity: 1; } /* 모바일 드로어 */ .mobile-menu { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(25, 10, 60, 0.97); z-index: 999; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .mobile-menu.is-open { opacity: 1; pointer-events: auto; } .mobile-nav { display: flex; flex-direction: column; align-items: center; gap: 32px; } .mobile-nav a { font-size: 22px; font-weight: 500; color: #fff; text-decoration: none; letter-spacing: 0.01em; transition: color 0.2s; } .mobile-nav a:hover { color: var(--purple-2); } .mobile-nav .mobile-demo-btn { margin-top: 8px; padding: 12px 32px; background: var(--purple-5); border-radius: 6px; font-weight: 700; font-size: 18px; } .mobile-nav .mobile-demo-btn:hover { background: var(--violet-9); color: #fff; } @media (max-width: 768px) { .hamburger { display: flex; } .mobile-menu { display: flex; } .site-header .header-actions .sign-in { display: none; } /* Sign In 숨김 */ } /* ═══════════════════════════════════════════ GNB 활성 링크 ═══════════════════════════════════════════ */ .site-header .nav .nav-active { opacity: 1; border-bottom: 2px solid rgba(255,255,255,0.8); padding-bottom: 2px; } /* ═══════════════════════════════════════════ ABOUT PAGE ═══════════════════════════════════════════ */ /* 공통 섹션 inner */ .about-section-inner { width: 100%; max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; } /* 공통 섹션 제목 */ .about-section-title { font-size: 32px; font-weight: 700; color: var(--purple-5); text-align: center; width: 100%; line-height: 1.2; } /* 공통 섹션 부제목 */ .about-section-subtitle { font-size: 24px; font-weight: 400; color: var(--purple-5); text-align: center; line-height: 34px; width: 100%; } /* ── Hero ── */ .about-hero { padding: 70px 45px 50px; display: flex; flex-direction: column; align-items: center; gap: 40px; } .about-hero-title { font-size: 40px; font-weight: 800; color: #400094; text-align: center; line-height: 1.2; } .about-hero-img { width: 100%; max-width: 850px; border-radius: 16px; overflow: hidden; } .about-hero-img img { width: 100%; height: auto; display: block; } /* ── Accountability Gap ── */ .about-accountability { background: #f0f6fb; padding: 90px 45px; } .about-accountability-inner { gap: 28px; } .about-accountability-body { display: flex; gap: 70px; align-items: flex-start; width: 100%; max-width: 660px; } .about-accountability-text { flex: 1; font-size: 18px; font-weight: 400; color: #0f172b; line-height: 30px; } .about-accountability-card { flex-shrink: 0; background: #ebfffe; border: 1px solid #0092b8; border-radius: 20px; padding: 30px; display: flex; align-items: center; justify-content: center; } .about-accountability-card img { width: 127px; height: auto; display: block; } /* ── Why Healthcare Only ── */ .about-why { padding: 90px 45px; } .about-why-grid { display: grid; grid-template-columns: repeat(2, 320px); gap: 40px; justify-content: center; padding: 10px 0; } .about-why-card { background: #f1f5f9; border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 16px; min-height: 200px; } .about-why-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; } .about-why-text { font-size: 18px; font-weight: 400; color: #000; line-height: 25px; } /* ── Designed ── */ .about-designed { background: #f0f9ff; padding: 90px 45px; } .about-quote { font-size: 24px; font-weight: 700; color: #0084d1; text-align: center; line-height: 35px; max-width: 900px; border: none; font-style: normal; } /* ── Company ── */ .about-company { background: #0069a8; padding: 90px 45px; } .about-company-desc { font-size: 24px; font-weight: 400; color: #fff; text-align: center; line-height: 34px; } .about-company-logos { display: flex; align-items: center; gap: 20px; margin-top: 8px; } /* ── CTA ── */ .about-cta { padding: 90px 45px; } .about-cta-btn-wrap { padding: 20px 0; } .about-cta-btn { display: inline-block; background: var(--purple-2); color: #fff; font-size: 24px; font-weight: 700; padding: 14px 40px; border-radius: 10px; text-decoration: none; transition: background 0.2s; } .about-cta-btn:hover { background: var(--purple-5); } /* ── About 모바일 ── */ @media (max-width: 768px) { .about-hero { padding: 50px 20px 40px; } .about-hero-title { font-size: 26px; } .about-accountability { padding: 60px 20px; } .about-accountability-body { flex-direction: column; gap: 30px; max-width: 100%; } .about-why { padding: 60px 20px; } .about-why-grid { grid-template-columns: 1fr; } .about-why-card { min-height: auto; } .about-designed { padding: 60px 20px; } .about-section-title { font-size: 24px; } .about-section-subtitle { font-size: 18px; line-height: 28px; } .about-quote { font-size: 18px; line-height: 28px; } .about-company { padding: 60px 20px; } .about-company-desc { font-size: 18px; line-height: 28px; } .about-company-logos { flex-wrap: wrap; } .about-cta { padding: 60px 20px; } .about-cta-btn { font-size: 20px; padding: 12px 30px; } } /* ═══════════════════════════════════════════ DEMO REQUEST MODAL ═══════════════════════════════════════════ */ /* 오버레이 */ .demo-overlay { position: fixed; inset: 0; background: rgba(10, 5, 30, 0.7); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; /* 닫혀 있을 때 클릭 통과 */ transition: opacity 0.25s ease; } .demo-overlay.is-open { opacity: 1; pointer-events: auto; /* 열렸을 때만 클릭 차단 */ } /* 모달 카드 */ .demo-modal { position: relative; background: #fff; border-radius: 20px; width: 100%; max-width: 580px; max-height: 90vh; overflow-y: auto; padding: 48px 48px 36px; box-shadow: 0 24px 60px rgba(0,0,0,0.25); transform: translateY(16px); transition: transform 0.25s ease; } .demo-overlay.is-open .demo-modal { transform: translateY(0); } /* 닫기 버튼 */ .demo-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: none; background: transparent; color: #64748b; cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .demo-close:hover { background: #f1f5f9; color: #0f172a; } /* 제목 */ .demo-title { font-size: 26px; font-weight: 800; color: #0f172a; line-height: 1.25; margin-bottom: 32px; text-align: center; } /* 폼 */ .demo-form { display: flex; flex-direction: column; gap: 20px; } .demo-form.is-hidden { display: none; } .demo-field { display: flex; flex-direction: column; gap: 6px; } .demo-label { font-size: 15px; font-weight: 500; color: #374151; } .demo-required { color: #ef4444; margin-left: 2px; } .demo-input, .demo-select { width: 100%; padding: 12px 14px; border: 1.5px solid #cbd5e1; border-radius: 8px; font-size: 15px; font-family: inherit; color: #0f172a; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; outline: none; appearance: none; } .demo-input::placeholder { color: #94a3b8; } .demo-input:focus, .demo-select:focus { border-color: #4120a9; box-shadow: 0 0 0 3px rgba(65,32,169,0.12); } .demo-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; cursor: pointer; } /* 이메일 경고 (개인 도메인) */ .demo-email-warning { font-size: 13px; color: #b45309; background: #fef9c3; border: 1px solid #fde68a; border-radius: 6px; padding: 6px 10px; } /* 필드 에러 */ .demo-field-error { font-size: 13px; color: #ef4444; } /* 서버 에러 */ .demo-server-error { font-size: 14px; color: #ef4444; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 10px 14px; } /* 제출 버튼 */ .demo-submit { width: 100%; padding: 14px; background: var(--purple-5); color: #fff; font-size: 16px; font-weight: 700; font-family: inherit; border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s; margin-top: 4px; } .demo-submit:hover:not(:disabled) { background: var(--violet-9); } .demo-submit:disabled { opacity: 0.7; cursor: default; } /* 로딩 스피너 */ .demo-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: demoSpin 0.7s linear infinite; } @keyframes demoSpin { to { transform: rotate(360deg); } } /* 하단 텍스트 */ .demo-footer-text { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; text-align: center; font-size: 13px; color: #64748b; line-height: 1.5; } .demo-footer-text a { color: #4120a9; text-decoration: underline; } .demo-footer-email { color: #94a3b8; } .demo-footer-email a { color: #64748b; } /* 성공 패널 */ .demo-success { display: none; /* hidden 기본값 */ flex-direction: column; align-items: center; gap: 12px; padding: 20px 0 10px; text-align: center; } .demo-success.is-visible { display: flex; /* JS에서 is-visible 클래스로 표시 */ } .demo-success-title { font-size: 22px; font-weight: 700; color: #0f172a; } .demo-success-body { font-size: 15px; color: #475569; line-height: 1.5; } .demo-success-close { margin-top: 12px; padding: 10px 28px; background: var(--purple-5); color: #fff; font-size: 15px; font-weight: 600; font-family: inherit; border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s; } .demo-success-close:hover { background: var(--violet-9); } /* 모바일 */ @media (max-width: 600px) { .demo-modal { padding: 36px 24px 28px; border-radius: 16px; } .demo-title { font-size: 20px; margin-bottom: 24px; } } /* ══════════════════════════════════════════ Privacy / Legal Pages ══════════════════════════════════════════ */ .privacy-wrap { min-height: calc(100vh - 200px); padding: 80px 24px 120px; } .privacy-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; } .privacy-inner h1 { font-size: 36px; font-weight: 800; color: #0f172a; margin-bottom: 16px; line-height: 1.2; } .privacy-inner h2 { font-size: 20px; font-weight: 700; color: #0f172a; margin-bottom: 12px; } .privacy-inner p { font-size: 15px; color: #374151; line-height: 1.75; margin-bottom: 10px; } .privacy-inner p:last-child { margin-bottom: 0; } .privacy-inner ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .privacy-inner ul li { font-size: 15px; color: #374151; line-height: 1.7; } .privacy-inner ul ul { margin-top: 6px; margin-bottom: 0; } .privacy-inner a { color: var(--purple-5); text-decoration: underline; text-underline-offset: 2px; } .privacy-inner a:hover { color: var(--violet-9); } .privacy-inner strong { color: #0f172a; } @media (max-width: 600px) { .privacy-wrap { padding: 48px 20px 80px; } .privacy-inner h1 { font-size: 26px; } .privacy-inner h2 { font-size: 17px; } }